/* dewx.ai public site. Values follow MUSE-LIVE-SPECS.md section 6 (structure, sizes, motion); art, words and code are ours.
   Fonts and colour tokens live in tokens.css (shared with the app); this file holds layout and components only. */
:root{--gutter:56px}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:60px}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/22px Figtree,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;z-index:60;background:var(--accent);color:var(--on-accent);padding:8px 14px;border-radius:999px;font:500 14px/20px Figtree,sans-serif}
.skip:focus{top:12px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:2px;border:0;border-radius:9999px;font:500 14px/20px Figtree,sans-serif;height:36px;padding:0 14px;cursor:pointer;white-space:nowrap;transition:filter .15s var(--ease),background-color .15s var(--ease),color .15s var(--ease)}
.btn:active{filter:var(--press)}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-ghost{background:transparent;color:var(--text-2)}
.btn-flat{background:var(--elev);color:var(--text)}
@media (hover:hover){
  .btn-primary:hover,.btn-cta:hover{filter:var(--hover)}
  .btn-ghost:hover{background:var(--elev);color:var(--text)}
  .btn-flat:hover{background:var(--elev-hover)}
}
.btn-44{height:44px;padding:0 16px;font-size:16px;line-height:22px}
.btn-cta{background:var(--cta);color:var(--on-cta)}
.btn-block{width:100%}

/* header */
.hdr{position:fixed;inset:0 0 auto;height:60px;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);background:transparent;transition:background-color .2s ease-out}
.hdr.is-scrolled{background:color-mix(in srgb,var(--bg) 98%,transparent)}
.brand{display:flex;align-items:center;gap:8px;font:600 18px/22px Figtree,sans-serif;letter-spacing:-.01em}
.brand img{width:24px;height:24px}
.brand .tld{color:var(--text-2);font-weight:400}
.chip{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:9999px;box-shadow:inset 0 0 0 1px var(--divider);color:var(--text-2);font:500 12px/16px Figtree,sans-serif;margin-left:4px}
.hdr-mark{position:absolute;left:50%;top:14px;width:32px;height:32px;margin-left:-16px;opacity:0;transition:opacity .2s ease-out;pointer-events:none}
.hdr.show-mark .hdr-mark{opacity:1}
.nav{display:flex;align-items:center;gap:4px}
.nav .btn-primary{margin-left:4px}

/* hero */
.hero{min-height:100vh;min-height:100svh;padding:calc(18vh + 28px) var(--gutter) 120px;display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-dew{width:100px;height:100px}
.hero h1{margin-top:24px;font-size:62.445px;line-height:1.1;font-weight:500;letter-spacing:-.01em;text-wrap:balance}
.hero-col{width:408px;max-width:100%;margin-top:32px}
.hero-sub{font-size:18px;line-height:26px;color:var(--text-2)}
.hero-col .btn-cta{margin-top:24px}
.hero-col .btn-flat{margin-top:12px}
.helper{margin-top:12px;font-size:12px;line-height:16px;color:var(--text-2)}
.helper a{color:var(--cta)}
.float-pill{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:40;height:42px;padding:0 16px;display:inline-flex;align-items:center;gap:6px;border-radius:9999px;background:var(--glass);-webkit-backdrop-filter:blur(36px);backdrop-filter:blur(36px);box-shadow:var(--e1);font:500 14px/20px Figtree,sans-serif;color:var(--text);transition:opacity .15s var(--ease)}
.float-pill.is-hidden{opacity:0;pointer-events:none}

/* Dew idle wobble: jelly, never more than 2.4% */
.dew-wobble{transform-origin:50% 92%;animation:dew-wobble 4.2s ease-in-out infinite}
@keyframes dew-wobble{0%,100%{transform:scale(1,1)}22%{transform:scale(1.024,.976)}46%{transform:scale(.99,1.012)}70%{transform:scale(1.008,.994)}}

/* section heads */
.shead{max-width:768px;margin:0 auto;text-align:center}
h2{font-size:40px;line-height:46px;font-weight:500;text-wrap:balance}
.lead{margin-top:12px;font-size:18px;line-height:26px;color:var(--text-2);text-wrap:pretty}

/* 3. what Dew does all day */
.intro{padding:56px var(--gutter) 96px;background:var(--bg);transition:background-color .5s ease-in-out}
.intro.is-in{background:var(--raised)}
.cycle-card{width:82%;max-width:1050px;margin:40px auto 0;aspect-ratio:1050/590;border-radius:48px;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(120% 90% at 100% 100%,#bfdcff 0%,#e4f0ff 38%,#fff 70%);color:#0b0b0c;text-align:center}
.cycle-text{width:100%;font-size:clamp(34px,6.2vw,88px);line-height:1.1;font-weight:500;letter-spacing:-.01em}
.cycle-word{display:block;height:1.1em;position:relative;overflow:visible}
.cycle-word span{position:absolute;left:0;right:0;white-space:nowrap;opacity:0;translate:0 .24em;transition:opacity .45s var(--ease),translate .45s var(--ease);color:var(--bubble-user)}
.cycle-word span.on{opacity:1;translate:0 0}

/* 4. feature rows (how it works) */
.row{min-height:744px;display:grid;grid-template-columns:repeat(2,minmax(0,632px));gap:64px;justify-content:center;align-items:center;padding:56px var(--gutter);background:var(--bg)}
.row.alt{background:var(--raised)}
.row.flip .media{order:2}
.row h3{font-size:40px;line-height:46px;font-weight:500;text-wrap:balance}
.row p{margin-top:12px;max-width:576px;font-size:18px;line-height:26px;color:var(--text-2);text-wrap:pretty}
.step{display:block;margin-bottom:12px;font:500 14px/20px Figtree,sans-serif;color:var(--cta)}
.media{aspect-ratio:1;border-radius:64px;background:radial-gradient(closest-side at 50% 46%,color-mix(in srgb,var(--cta) 12%,transparent),transparent);container-type:inline-size;display:grid;place-items:center;overflow:hidden;position:relative}

/* mockups: sized in container units so they scale with the square */
.phone{width:58cqi;min-height:78cqi;border-radius:7cqi;background:var(--phone);box-shadow:var(--ring),var(--e3);padding:4.4cqi 3.4cqi;display:flex;flex-direction:column;gap:1.9cqi;font-size:2.35cqi;line-height:1.4;text-align:left}
.ph-head{display:flex;flex-direction:column;align-items:center;gap:.6cqi;margin-bottom:1.2cqi}
.ph-head img{width:9cqi;height:9cqi}
.ph-name{font-weight:600;font-size:2.4cqi}
.ph-status{color:var(--text-2);font-size:1.9cqi}
.b{max-width:82%;padding:1.7cqi 2.4cqi;border-radius:3.5cqi;background:var(--panel-2)}
.b.me{align-self:flex-end;background:var(--bubble-user);color:var(--on-bubble-user)}
.b.them{background:var(--panel)}
.who{font-size:1.7cqi;color:var(--text-2);margin:.4cqi 0 -1cqi .6cqi}
.who.r{align-self:flex-end;margin:.4cqi .6cqi -1cqi 0}
.composer{margin-top:auto;height:6.6cqi;border-radius:9999px;background:var(--elev);display:flex;align-items:center;padding:0 2.4cqi;color:var(--text-3);font-size:2.1cqi}
.sheet{width:72cqi;border-radius:5.4cqi;background:var(--phone);box-shadow:var(--ring),var(--e3);padding:4cqi;font-size:2.35cqi;line-height:1.45;text-align:left}
.sheet-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:2.6cqi}
.sheet-title{font-weight:600;font-size:2.7cqi}
.tag{display:inline-flex;align-items:center;height:3.8cqi;padding:0 1.6cqi;border-radius:9999px;background:var(--elev);color:var(--text-2);font-size:1.8cqi;font-weight:500}
.tag.good{background:color-mix(in srgb,var(--cta) 16%,transparent);color:var(--cta)}
.lead-row{display:flex;gap:2.2cqi;align-items:flex-start;padding:2.2cqi 0;border-top:1px solid var(--divider)}
.av{flex:none;width:6.4cqi;height:6.4cqi;border-radius:50%;background:var(--raised);box-shadow:var(--ring);display:grid;place-items:center;font-size:2cqi;font-weight:600;color:var(--text-2)}
.lr-main{flex:1;min-width:0}
.lr-t{font-weight:600}
.lr-d,.muted{color:var(--text-2);font-size:2cqi}
.lr-why{margin-top:.8cqi;font-size:2cqi}
.msg{padding:2.6cqi;border-radius:3.4cqi;background:var(--panel-2);margin:1.6cqi 0 2.4cqi}
.actions{display:flex;gap:1.6cqi}
.actions span{flex:1;height:6.4cqi;border-radius:9999px;display:grid;place-items:center;font-weight:500;background:var(--elev)}
.actions span.go{background:var(--cta);color:var(--on-cta)}
.cal{border-radius:3.4cqi;background:var(--panel-2);padding:2.2cqi 2.6cqi;display:flex;gap:2.2cqi;align-items:center}
.cal-ic{flex:none;width:6.4cqi;height:6.4cqi;border-radius:1.8cqi;background:color-mix(in srgb,var(--cta) 18%,transparent);display:grid;place-items:center;color:var(--cta)}
.cal-ic svg{width:3.6cqi;height:3.6cqi}
.checks{margin-top:2.6cqi;display:grid;gap:1.4cqi}
.checks div{display:flex;gap:1.6cqi;align-items:center;font-size:2.1cqi}
.checks svg{width:3cqi;height:3cqi;color:var(--ok);flex:none}
.example{position:absolute;top:4.4cqi;left:0;right:0;text-align:center;font-size:1.9cqi;color:var(--text-3)}

/* 5. what Dew never does (in the tour-video slot) */
.never{padding:96px var(--gutter) 56px}
.never-card{max-width:945px;margin:40px auto 0;border-radius:48px;background:var(--raised);box-shadow:var(--ring);padding:40px 48px;display:grid;grid-template-columns:repeat(2,1fr);column-gap:48px}
.never-item{display:flex;gap:16px;padding:20px 0;border-top:1px solid var(--divider)}
.never-item:nth-child(-n+2){border-top:0}
.ic{flex:none;width:32px;height:32px;display:grid;place-items:center;color:var(--text-2)}
.ic svg{width:24px;height:24px}
.never-item h3,.li h3,.li summary h3{font-size:18px;line-height:26px;font-weight:600}
.never-item p{margin-top:4px;font-size:16px;line-height:22px;color:var(--text-2)}

/* 6. list sections (pricing, FAQ): the "learn more" pattern */
.lm{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px;max-width:1440px;margin:0 auto;padding:96px var(--gutter);align-items:center}
.lm-head{grid-column:span 5;padding-left:56px}
.lm-head .lead{max-width:384px}
.lm-list{grid-column:span 7;list-style:none;margin:0;padding:0 56px 0 0}
.li{position:relative;margin:0 -12px;padding:0 12px;border-radius:16px;transition:background-color .15s var(--ease)}
.li+.li::before{content:"";position:absolute;top:0;left:56px;right:12px;height:1px;background:var(--divider)}
.li-in{display:flex;gap:12px;padding:24px 0}
.li-body{flex:1;min-width:0}
.li-body p{margin-top:8px;font-size:16px;line-height:22px;color:var(--text-2)}
.li-body p strong{color:var(--text);font-weight:500}
.price{font-variant-numeric:tabular-nums}
.li details summary{list-style:none;cursor:pointer;display:flex;gap:12px;padding:24px 0;align-items:flex-start;border-radius:16px}
.li details summary::-webkit-details-marker{display:none}
.li details summary h3{flex:1}
.chev{flex:none;width:15px;height:15px;margin-top:6px;color:var(--text-2);transition:transform .15s var(--ease)}
.li details[open] .chev{transform:rotate(90deg)}
.li details .ans{padding:0 0 24px 44px;margin-top:-16px;font-size:16px;line-height:22px;color:var(--text-2)}
@media (hover:hover){.li.hov:hover{background:var(--raised)}}

/* 7. final CTA */
.final{min-height:560px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:56px var(--gutter)}
.final .btn{margin-top:32px;width:256px;height:48px;background:var(--accent);color:var(--on-cta);font-size:14px}
.final .helper{margin-top:16px;font-size:14px;line-height:20px}

/* 8. footer */
.ftr{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:32px var(--gutter);font-size:14px;line-height:20px;color:var(--text-2)}
.ftr nav{display:flex;gap:24px}
.ftr a{transition:color .15s var(--ease)}
@media (hover:hover){.ftr a:hover{color:var(--text)}}
.ftr .from{justify-self:end;display:flex;align-items:center;gap:6px}
.ftr .from b{color:var(--text);font-weight:600}

/* tablet */
@media (max-width:1023px){
  :root{--gutter:40px}
  .hero h1{font-size:48px;line-height:56px}
  .row{grid-template-columns:minmax(0,560px);gap:40px;min-height:0;padding:72px var(--gutter);text-align:center}
  .row .copy{order:-1}
  .row.flip .media{order:0}
  .row p{margin-left:auto;margin-right:auto}
  .lm{grid-template-columns:1fr;gap:24px}
  .lm-head,.lm-list{grid-column:auto;padding-left:0}
  .nav .hide-sm{display:none}
}
/* phone */
@media (max-width:767px){
  :root{--gutter:20px}
  .chip.hdr-chip,.hdr-mark{display:none}
  .br-d{display:none}
  .lm-list{padding:0}
  .hero{padding-top:72px}
  .hero-dew{width:64px;height:64px}
  .hero h1{font-size:47px;line-height:52px}
  h2,.row h3{font-size:22px;line-height:28px}
  .lead,.row p{font-size:16px;line-height:22px}
  .intro{padding:48px var(--gutter) 64px}
  .cycle-card{width:100%;border-radius:32px;aspect-ratio:350/300;margin-top:32px}
  .row{padding:56px var(--gutter);gap:32px}
  .media{width:100%;max-width:350px;margin:0 auto;border-radius:40px}
  .never{padding:64px var(--gutter) 32px}
  .never-card{grid-template-columns:1fr;padding:8px 24px;border-radius:32px}
  .never-item:nth-child(2){border-top:1px solid var(--divider)}
  .lm{padding:64px var(--gutter)}
  .ftr{grid-template-columns:1fr;justify-items:center;gap:16px;text-align:center}
  .ftr .from{justify-self:center}
  .nav{gap:2px}
  .nav .btn{padding:0 12px}
}

/* early access form (6c) */
.wl{padding:96px var(--gutter)}
.wl-form{max-width:720px;margin:40px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;text-align:left}
.wl-form label{display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:20px;font-weight:500;color:var(--text)}
.wl-form input,.wl-form select,.wl-form textarea{font:400 16px/22px Figtree,sans-serif;color:var(--text);background:var(--elev);border:0;border-radius:12px;box-shadow:var(--ring);padding:10px 12px;min-height:44px;width:100%}
/* IL-102: an opaque option background, or Chrome lays the translucent --elev over white under white text */
option,optgroup{background-color:var(--raised);color:var(--text)}
.wl-form textarea{resize:vertical}
.wl-form .wide{grid-column:1/-1}
.wl-form .check{flex-direction:row;align-items:flex-start;gap:10px;font-weight:400;color:var(--text-2)}
.wl-form .check input{width:20px;min-height:20px;height:20px;margin-top:1px;flex:none}
.wl-form .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.wl-form .btn{width:100%}
.wl-prio{border-radius:16px;background:var(--raised);box-shadow:var(--ring);padding:16px 20px;font-size:16px;line-height:22px}
.wl-prio .helper{margin-top:6px}
.wl-done{max-width:560px;margin:40px auto 0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:16px;line-height:22px;color:var(--text-2)}
.wl-done h3{font-size:22px;line-height:28px;color:var(--text)}
.helper.quiet{margin-top:8px}
.wl-title{font-size:40px;line-height:46px;font-weight:500;letter-spacing:-.01em}
#main > .wl:only-child{padding-top:120px}
@media (max-width:767px){.wl{padding:64px var(--gutter)}.wl-form{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}