*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.5 var(--f-ui);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0;padding:0}
ul{list-style:none}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:var(--r0)}

.skip{position:fixed;left:16px;top:-60px;z-index:60;background:var(--ink);color:var(--on-ink);padding:10px 16px;border-radius:var(--r-pill)}
.skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--own-gutter)}
.tone{color:var(--light)}

/* announcement + nav */
.bar{display:flex;align-items:center;justify-content:center;gap:8px;padding:9px var(--own-gutter);background:var(--own-butter);color:var(--own-espresso);font-size:14px;font-weight:500;text-align:center}
.bar svg{flex:none;transition:transform var(--d-glide) var(--ease)}
.bar:hover svg{transform:translateX(3px)}
.nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:24px;height:68px;padding:0 var(--own-gutter);background:var(--bar);-webkit-backdrop-filter:var(--bar-frost);backdrop-filter:var(--bar-frost)}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;font-size:20px;letter-spacing:-.025em}
.links{display:flex;align-items:center;gap:30px;font-size:15px;font-weight:500}
.links a{transition:opacity var(--d-dur)}
.links a:hover{opacity:.55}

/* buttons */
.pill{display:inline-flex;align-items:center;justify-content:center;background:var(--own-honey);color:var(--own-espresso);font-size:15px;font-weight:500;padding:14px 26px;border-radius:var(--r-pill);transition:transform var(--d-glide) var(--ease),background var(--d-dur)}
.pill:hover{transform:translateY(-2px);background:var(--own-cta-hover)}
.pill.small{padding:10px 18px;font-size:14px}
.pill.dark{background:var(--own-espresso);color:var(--ground)}
.pill.dark:hover{background:var(--own-espresso-deep)}
.text{font-size:15px;font-weight:500;padding:14px 8px}
.text:hover{opacity:.6}
.actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* type */
h1{font-size:clamp(44px,6.3vw,80px);line-height:1.02;letter-spacing:-.024em;font-weight:500}
h2{font-size:clamp(36px,4.5vw,58px);line-height:1.05;letter-spacing:-.022em;font-weight:500}
.body{max-width:480px;color:var(--ink-2);font-size:18px;line-height:1.45}

/* hero */
main{position:relative}
.hero{padding:30px var(--own-gutter) 40px}
.hero-top{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px;align-items:end}
.w{display:inline-block;opacity:0;transform:translateY(.16em);filter:blur(10px);animation:rise var(--d-macro) var(--ease) forwards}
.w:nth-child(1){animation-delay:.05s}
.w:nth-child(2){animation-delay:.16s}
.w:nth-child(3){animation-delay:.27s}
.w:nth-child(5){animation-delay:.38s}
.w:nth-child(6){animation-delay:.49s}
@keyframes rise{to{opacity:1;transform:none;filter:none}}
.lede{margin-bottom:16px;max-width:420px;color:var(--ink-2);font-size:18px;line-height:1.45}
.hero-stage{height:clamp(240px,24vw,320px);margin-top:48px}

/* cards: a flat row without scripts, one scroll-driven stage with them */
.cards{display:flex;justify-content:center;height:100%}
.card{position:relative;flex:0 1 var(--cw,var(--own-card-width));width:var(--cw,var(--own-card-width));aspect-ratio:1/1.08;margin:0 -14px;border-radius:var(--r3)}
.card img{width:100%;height:100%;object-fit:cover;border-radius:inherit;box-shadow:var(--shadow)}
.card figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 13px;border-radius:0 0 var(--r3) var(--r3);color:var(--on-ink);font-size:13px;font-weight:500;background:var(--own-caption-scrim)}
.js .cards{display:block;position:absolute;top:0;left:0;width:100%;height:0;overflow:clip;pointer-events:none;z-index:5}
.js .card{position:absolute;top:0;left:0;margin:0;transform-origin:50% 50%;will-change:transform}
.card:nth-child(n+5) figcaption{text-align:right}

.bubble{position:absolute;top:-36px;left:50%;padding:7px 15px;border-radius:var(--r-pill);font-size:14px;font-weight:500;white-space:nowrap;opacity:0;transform:translate(-50%,8px) rotate(var(--unrotate,0deg));transition:opacity var(--d-glide),transform var(--d-glide)}
.bubble::after{content:"";position:absolute;left:18px;bottom:-5px;width:12px;height:12px;background:inherit;transform:rotate(45deg);border-radius:2px}
.bubble.cream{background:var(--raised);color:var(--own-espresso);box-shadow:var(--own-bubble-shadow)}
.bubble.honey{background:var(--own-honey);color:var(--own-espresso);box-shadow:var(--own-bubble-shadow)}
.cards[data-phase=hero] .at-hero,
.cards[data-phase=cascade] .at-cascade{opacity:1;transform:translate(-50%,0) rotate(var(--unrotate,0deg))}

/* how it works: the espresso sheet */
.how{position:relative;margin:0 8px;padding:84px 0;border-radius:var(--own-sheet-radius);background:var(--own-espresso);color:var(--ground);overflow:clip}
.how .wrap{position:relative}
.how h2 .tone{color:var(--own-honey)}
.how .body{margin:22px 0;color:var(--own-sheet-word)}
.how .text{color:var(--ground)}
.how-copy{position:relative;z-index:6;max-width:560px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:40px;padding-top:22px;border-top:1px solid var(--own-sheet-line)}
.facts dt{color:var(--own-honey);font-size:19px;font-weight:500;letter-spacing:-.012em;line-height:1.2}
.facts dd{margin-top:4px;color:var(--own-sheet-small);font-size:14px;line-height:1.3}
.cascade-stage{position:absolute;top:30px;left:50%;right:0;height:460px}

/* compare */
.side{padding:96px 0 40px}
.side .body{margin-top:18px}
.compare{--x:50%;position:relative;margin-top:36px;aspect-ratio:16/9;border-radius:var(--r3);overflow:hidden;background:var(--own-compare-ground);container-type:inline-size;box-shadow:var(--shadow-pop)}
.pairs,.pair{position:absolute;inset:0}
.pair[hidden]{display:none}
.mock{position:absolute;inset:0;overflow:hidden}
.mock.old{clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.range{position:absolute;inset:0;z-index:4;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y}
.compare:has(.range:focus-visible) .grip{outline:2px solid var(--own-honey);outline-offset:3px}
.grip{position:absolute;z-index:3;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:var(--own-white);pointer-events:none}
.grip svg{position:absolute;top:50%;left:50%;width:46px;height:46px;padding:12px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--own-white);color:var(--ink);box-shadow:var(--own-compare-grip-shadow)}
.tag{position:absolute;z-index:3;top:18px;padding:7px 14px;border-radius:var(--r-pill);background:var(--own-compare-tag);color:var(--on-ink);font-size:13px;font-weight:500;pointer-events:none}
.tag.left{left:18px}
.tag.right{right:18px;background:var(--own-honey);color:var(--own-espresso)}
.sample{position:absolute;z-index:5;left:18px;bottom:18px;padding:9px 16px;border-radius:var(--r-pill);background:var(--raised);color:var(--ink);font-size:13px;font-weight:500;pointer-events:none}
.turn{position:absolute;z-index:5;right:18px;bottom:18px;display:flex;gap:10px}
.turn button{width:44px;height:44px;display:grid;place-items:center;border-radius:50%;background:var(--own-compare-turn);color:var(--ink);transition:background var(--d-dur)}
.turn button:hover{background:var(--own-white)}

/* "look two" mock */
.new img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.new::after{content:"";position:absolute;inset:0;background:var(--own-look-two-scrim)}
.new-nav{position:absolute;z-index:1;left:4cqw;right:4cqw;top:7.5cqw;display:flex;justify-content:flex-end;gap:2.6cqw;color:var(--on-ink);font-size:1.5cqw;font-weight:500}
.new-nav b{margin-right:auto;margin-left:52cqw;font-family:var(--own-look-two-serif);font-size:1.9cqw;font-weight:400}
.new-hero{position:absolute;z-index:1;right:5cqw;bottom:11cqw;width:40cqw;color:var(--on-ink);text-align:right}
.new-hero p{font-family:var(--own-look-two-serif);font-size:6.2cqw;line-height:1.02;letter-spacing:-.02em;margin-bottom:2cqw}
.new-btn{display:inline-block;padding:1.1cqw 2.4cqw;border-radius:var(--r-pill);background:var(--own-white);color:var(--own-look-two-ink);font-size:1.5cqw;font-weight:600}
.new.tea img{object-position:50% 72%}
.new.dental img{object-position:50% 26%}
.new.skin img{object-position:50% 55%}

/* "look one" mock: deliberately tired */
.old{background:var(--own-look-one-ground);color:var(--own-look-one-ink);font-family:var(--own-look-one-sans);font-size:1.6cqw;line-height:1.35}
.old-top{display:flex;justify-content:space-between;align-items:flex-end;gap:2cqw;padding:7.5cqw 3cqw 1.2cqw;background:var(--own-look-one-head);color:var(--on-ink);font-family:var(--own-look-one-serif)}
.old-top b{font-size:3cqw;font-weight:700}
.old-top i{font-size:1.7cqw;color:var(--own-look-one-note)}
.old-nav{padding:.8cqw 3cqw;background:var(--own-look-one-band);color:var(--own-look-one-link);border-bottom:.12cqw solid var(--own-look-one-rule)}
.old-body{display:grid;grid-template-columns:24cqw 1fr;gap:2.4cqw;padding:2.6cqw 3cqw;max-width:56cqw}
.old-photo{display:grid;place-items:center;height:18cqw;background:var(--own-look-one-photo);border:.15cqw dashed var(--own-look-one-photo-edge);color:var(--own-look-one-photo-ink);font-size:1.3cqw}
.old-body h3{margin:0 0 .8cqw;color:var(--own-look-one-title);font:700 2.3cqw/1.1 var(--own-look-one-serif)}
.old-body p{margin-bottom:.9cqw}
.old-body u{color:var(--own-look-one-link)}
.old-foot{position:absolute;left:0;right:0;bottom:0;padding:.9cqw 3cqw;background:var(--own-look-one-band);color:var(--own-look-one-foot-ink);font-size:1.2cqw}
.old.dental .old-top{background:var(--own-look-one-head-dental)}
.old.dental .old-top i{color:var(--own-look-one-note-dental)}
.old.skin .old-top{background:var(--own-look-one-head-skin)}
.old.skin .old-top i{color:var(--own-look-one-note-skin)}

/* in the bag: the tile grid */
.bag{padding:90px 0 40px}
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-top:36px}
.tile{position:relative;display:block;border-radius:var(--r3);overflow:hidden;transition:transform var(--d-slow) var(--ease)}
.tile:hover{transform:translateY(-3px)}
.tile.big{grid-column:span 3;min-height:clamp(240px,27vw,340px);padding:24px;color:var(--on-ink);background:var(--own-espresso)}
.tile.big img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform var(--d-macro) var(--ease)}
.tile.big:hover img{transform:scale(1.04)}
.tile.big::after{content:"";position:absolute;inset:0;background:var(--own-tile-scrim)}
.tile.big h3,.tile.big p,.tile.big .chev{position:absolute;z-index:1}
.tile.big h3{top:24px;left:24px;font-size:clamp(24px,2.5vw,32px);line-height:1.06;font-weight:500;letter-spacing:-.018em}
.tile.big h3 span{color:var(--own-honey)}
.tile.big p{left:24px;right:64px;bottom:24px;font-size:15px;line-height:1.3}
.tile.big .chev{right:24px;bottom:24px;color:var(--on-ink)}
.tile.small{grid-column:span 2;display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:16px 16px 16px 20px;background:var(--raised)}
.tile.small h3{font-size:18px;font-weight:500;letter-spacing:-.012em;line-height:1.2}
.tile.small h3 span{color:var(--light)}
.tile.small p{margin-top:3px;color:var(--ink-2);font-size:14px;line-height:1.3}
.tile.small img{width:64px;height:64px;object-fit:cover;border-radius:var(--r1);box-shadow:var(--own-tile-shadow)}
.chev{width:10px;height:10px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-right:4px}
.for{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center;margin-top:36px}
.for p{max-width:480px;color:var(--ink-2);font-size:18px;line-height:1.45}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.chips li{padding:8px 14px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:14px;font-weight:500}

/* close */
.contact{padding:50px 0 70px}
.close{display:grid;grid-template-columns:1fr auto;gap:clamp(20px,4vw,56px);align-items:center;padding:clamp(28px,5vw,64px);border-radius:var(--own-sheet-radius);background:var(--own-honey);color:var(--own-espresso)}
.close h2{color:var(--own-espresso)}
.close p{margin:16px 0 24px;max-width:430px;font-size:18px;line-height:1.45}
.close-mark{width:clamp(170px,26vw,340px)}

/* foot */
.foot{margin-top:0;padding:56px 0 0;border-radius:var(--own-sheet-radius) var(--own-sheet-radius) 0 0;background:var(--own-foot);color:var(--own-foot-ink);overflow:hidden}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.foot-top img{width:96px}
.foot-top nav{display:grid;gap:10px;font-size:16px;text-align:right}
.foot-top nav a:hover{opacity:.6}
.foot-small{display:flex;justify-content:space-between;gap:8px 24px;flex-wrap:wrap;margin-top:40px;color:var(--own-foot-small);font-size:14px}
.foot-word{margin:20px 0 -.26em;color:var(--own-foot-word);font-size:20.4vw;font-weight:800;line-height:1;letter-spacing:-.045em;text-align:center;white-space:nowrap}

/* a quiet rise as things arrive */
.js .rise{opacity:0;transform:var(--arrive);transition:opacity var(--d-rise) var(--ease),transform var(--d-rise) var(--ease)}
.js .rise.in{opacity:1;transform:none}

.lost{min-height:100svh;display:grid;place-content:center;justify-items:center;gap:26px;padding:24px;text-align:center}
.lost h1{font-size:clamp(40px,6vw,64px)}

@media (max-width:980px){
  .links{display:none}
}

@media (max-width:820px){
  .bar{font-size:13px}
  .hero{padding:24px var(--own-gutter) 30px}
  .hero-top{grid-template-columns:1fr;gap:18px}
  .hero-stage{height:230px;margin-top:40px}
  .how{margin:0 6px;padding:52px 0 0;border-radius:var(--own-sheet-radius-phone)}
  .facts{grid-template-columns:1fr;gap:12px;margin-top:28px}
  .cascade-stage{position:relative;top:auto;left:auto;right:auto;height:370px;margin-top:40px}
  .side{padding:64px 0 24px}
  .compare{aspect-ratio:4/3.4;border-radius:var(--r2);margin-top:26px}
  .tag{top:12px;font-size:12px;padding:6px 11px}
  .tag.left{left:12px}
  .tag.right{right:12px}
  .sample{left:12px;bottom:12px;padding:7px 11px;font-size:11px;max-width:60%}
  .turn{right:12px;bottom:12px;gap:8px}
  .new-nav{top:12cqw;font-size:2.6cqw;gap:3cqw}
  .new-nav span{display:none}
  .new-nav b{margin-left:auto;margin-right:0;font-size:3.2cqw}
  .new-hero{width:58cqw;bottom:24cqw}
  .new-hero p{font-size:9.5cqw}
  .new-btn{font-size:2.9cqw;padding:1.8cqw 3.6cqw}
  .old{font-size:2.7cqw}
  .old-top{display:block;padding:12cqw 4cqw 2cqw}
  .old-top b{font-size:4.6cqw;display:block}
  .old-top i{font-size:2.8cqw}
  .old-nav{padding:1.4cqw 4cqw}
  .old-body{grid-template-columns:1fr;padding:3cqw 4cqw;max-width:62cqw}
  .old-photo{height:15cqw;font-size:2.4cqw}
  .old-body h3{font-size:3.8cqw}
  .old-foot{display:none}
  .bag{padding:64px 0 30px}
  .bento{grid-template-columns:1fr;margin-top:26px}
  .tile.big,.tile.small{grid-column:auto}
  .tile.big{min-height:230px}
  .for{grid-template-columns:1fr}
  .chips{justify-content:flex-start}
  .close{grid-template-columns:1fr;border-radius:var(--own-sheet-radius-phone)}
  .close-mark{justify-self:end;width:200px}
  .contact{padding:30px 0 48px}
  .foot{border-radius:var(--own-sheet-radius-phone) var(--own-sheet-radius-phone) 0 0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .w{opacity:1;transform:none;filter:none;animation:none}
  .js .rise{opacity:1;transform:none;transition:none}
  .pill,.bubble,.tile,.tile.big img{transition:none}
}