:root{--ink:#0D110C;--crate:#1A2317;--crate-edge:#26331F;--leaf:#8BE02A;--moss:#3D7A17;--chalk:#F1F4EA;--fog:#A3AE9C;--amber:#F0B43C;}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--ink);color:var(--chalk)}body{font-family:"Barlow",system-ui,sans-serif;font-weight:400;min-height:100dvh;overflow-x:clip;display:flex;flex-direction:column;padding:max(14px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));}.page{flex:1;width:100%;max-width:1120px;margin:0 auto;display:grid;gap:14px;grid-template-areas:"head" "box" "act";align-content:start;}.head{grid-area:head;display:flex;flex-direction:column;gap:8px}.logo{width:clamp(52px,14vw,144px);height:auto;aspect-ratio:1;border-radius:22%;display:block;flex:none}h1{font-weight:400;line-height:1}h1 .mark{display:block;font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:800;font-size:clamp(4.2rem,22vw,8.6rem);letter-spacing:-0.01em;line-height:0.86;color:var(--chalk);text-transform:uppercase;}h1 .mark span{color:var(--leaf)}h1 .promise{display:block;margin-top:6px;font-family:"Barlow",sans-serif;font-weight:600;font-size:clamp(1.06rem,0.9rem + 0.9vw,1.5rem);line-height:1.3;color:var(--chalk);max-width:24ch;}.sub{font-size:clamp(0.95rem,0.88rem + 0.35vw,1.1rem);line-height:1.45;color:var(--fog);max-width:36ch}.box{grid-area:box;position:relative}.crate{position:relative;background:var(--crate);border:2px solid var(--crate-edge);border-radius:14px 14px 10px 10px;padding:14px 12px 0;overflow:hidden;}.crate-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px;min-height:28px}.crate-top p{font-size:0.88rem;color:var(--fog);font-weight:600;letter-spacing:0.02em}.tag{font-family:"Big Shoulders Display",sans-serif;font-weight:800;font-size:0.95rem;letter-spacing:0.06em;text-transform:uppercase;padding:4px 10px;border-radius:6px;background:var(--leaf);color:var(--ink);transform:rotate(-3deg);white-space:nowrap;}.side[data-for="without"] .tag{background:transparent;color:var(--fog);box-shadow:inset 0 0 0 2px var(--crate-edge);transform:none}.shelf{display:flex;align-items:flex-end;gap:6px;height:clamp(170px,30dvh,300px);padding:0 2px}.spine{flex:1 1 0;min-width:0;position:relative;border-radius:5px 5px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:8px 0 10px;}.spine .t{writing-mode:vertical-rl;transform:rotate(180deg);font-family:"Big Shoulders Display",sans-serif;font-weight:800;text-transform:uppercase;font-size:clamp(0.9rem,0.7rem + 1vw,1.35rem);letter-spacing:0.04em;white-space:nowrap;}.spine .hd{font-size:0.72rem;font-weight:600;letter-spacing:0.08em;padding:2px 4px;border-radius:3px}.spine .cap{width:60%;height:5px;border-radius:3px}.s1{height:88%;background:var(--chalk);color:var(--ink)}.s1 .cap{background:var(--leaf)}.s1 .hd{background:var(--ink);color:var(--chalk)}.s2{height:76%;background:var(--moss);color:var(--chalk)}.s2 .cap{background:var(--amber)}.s2 .hd{background:var(--chalk);color:var(--ink)}.s3{height:96%;background:var(--leaf);color:var(--ink)}.s3 .cap{background:var(--ink)}.s3 .hd{background:var(--ink);color:var(--leaf)}.s4{height:82%;background:var(--amber);color:var(--ink);transform:rotate(-6deg) translateY(-6px);transform-origin:bottom left}.s4 .cap{background:var(--ink)}.s4 .hd{background:var(--ink);color:var(--amber)}.s5{height:70%;background:var(--chalk);color:var(--ink);margin-left:6px}.s5 .cap{background:var(--moss)}.s5 .hd{background:var(--moss);color:var(--chalk)}.s6{height:90%;background:var(--moss);color:var(--chalk)}.s6 .cap{background:var(--leaf)}.s6 .hd{background:var(--chalk);color:var(--ink)}.s7{height:78%;background:var(--leaf);color:var(--ink)}.s7 .cap{background:var(--chalk)}.s7 .hd{background:var(--ink);color:var(--leaf)}.slot{flex:1 1 0;min-width:0;height:84%;border-radius:5px 5px 0 0;box-shadow:inset 0 0 0 2px var(--crate-edge);display:flex;align-items:center;justify-content:center;color:#7D8A76;font-family:"Big Shoulders Display",sans-serif;font-weight:800;font-size:1.3rem;}.slot:nth-child(2n){height:72%}.slot:nth-child(3n){height:90%}.lip{margin:0 -12px;background:var(--crate-edge);padding:9px 14px;display:flex;justify-content:space-between;align-items:center;font-family:"Big Shoulders Display",sans-serif;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;font-size:0.95rem;color:var(--chalk);}.lip i{font-style:normal;color:var(--leaf)}.wipe{position:absolute;inset:0;background:var(--leaf);transform:scaleY(0);transform-origin:bottom;pointer-events:none;z-index:3;}.act{grid-area:act;display:flex;align-items:center;gap:8px;flex-wrap:nowrap}.seg{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;background:var(--crate);border:2px solid var(--crate-edge);border-radius:12px;padding:3px;flex:none;}.seg .thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:9px;background:var(--crate-edge);box-shadow:inset 0 0 0 2px var(--leaf);transition:transform 260ms cubic-bezier(.3,.7,.2,1);}html[data-side="with"] .seg .thumb{transform:translateX(100%)}.seg button{position:relative;z-index:1;min-height:48px;padding:0 10px;border:0;background:none;cursor:pointer;font:600 0.94rem/1 "Barlow",sans-serif;color:var(--fog);-webkit-tap-highlight-color:transparent;border-radius:9px;}.seg button[aria-pressed="true"]{color:var(--chalk)}.seg button:focus-visible{outline:3px solid var(--amber);outline-offset:2px}.cta{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 14px;white-space:nowrap;background:var(--chalk);color:var(--ink);text-decoration:none;border-radius:12px;font-family:"Big Shoulders Display",sans-serif;font-weight:800;font-size:clamp(1.1rem,0.95rem + 0.6vw,1.45rem);letter-spacing:0.04em;text-transform:uppercase;-webkit-tap-highlight-color:transparent;transition:transform 150ms ease,background-color 150ms ease;}.cta svg{width:14px;height:16px;flex:none}.cta:active{transform:scale(0.98)}.cta:focus-visible{outline:3px solid var(--leaf);outline-offset:3px}@media (hover: hover){.cta:hover{background:#FFFFFF}}footer{width:100%;max-width:1120px;margin:14px auto 0;font-size:0.85rem;color:var(--fog);font-weight:600;letter-spacing:0.04em}@media (min-width: 900px){body{padding-top:36px;padding-bottom:20px}.page{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"box head" "box act";column-gap:56px;row-gap:28px;align-content:center;align-items:end;}.act{align-self:start}.cta{flex:0 1 auto;padding:0 28px}.seg button{padding:0 16px}.head{gap:14px}.logo{width:96px}h1 .mark{font-size:clamp(6rem,9vw,9rem)}.shelf{height:clamp(300px,42vh,380px)}.crate{padding:18px 16px 0}.lip{margin:0 -16px}.box{align-self:center}}@media (max-width: 399px){.cta svg{display:none}}@media (max-width: 899px) and (max-height: 700px){.shelf{height:150px}}@keyframes nudge{0%,100%{transform:translateX(100%)}40%{transform:translateX(calc(100% - 7px))}}html[data-side="with"] .seg .thumb.nudge{animation:nudge 520ms ease 700ms 1}@media (prefers-reduced-motion: reduce){.seg .thumb,.cta{transition:none}html[data-side="with"] .seg .thumb.nudge{animation:none}}