/* v4 motion layer: Lenis + GSAP ScrollTrigger + Three.js. Lean: three layers in depth and a scroll-scrubbed chat. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- ACT 1 stage ---------- */
.story{position:relative}
.stage{position:relative;height:100vh;height:100svh;overflow:hidden;background:#fff;isolation:isolate}
/* the three layers. JS sets --lx/--ly (px) per layer from scroll and, on desktop, the pointer */
.layer{position:absolute;inset:0;pointer-events:none;transform:translate3d(var(--lx,0px),var(--ly,0px),0);will-change:transform}
/* back: staging's soft washes and a linen table, kept soft (no detail) so it reads as far away */
.layer--back{z-index:0;inset:-7%;background:linear-gradient(180deg,#FBFDF5 0%,#F6FAEE 46%,#F1F7E7 100%)}
.table{position:absolute;left:-40%;right:-40%;top:46%;bottom:-60%;perspective:700px;perspective-origin:50% 0;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%);mask-image:linear-gradient(180deg,transparent 0,#000 22%)}
.table__plane{position:absolute;inset:0;transform-origin:50% 0;transform:rotateX(64deg);background-color:#F3F8E9;
  background-image:repeating-linear-gradient(90deg,rgba(140,190,120,0) 0 34px,rgba(140,190,120,.085) 52px 86px,rgba(140,190,120,0) 104px 138px),
    repeating-linear-gradient(0deg,rgba(140,190,120,0) 0 34px,rgba(140,190,120,.075) 52px 86px,rgba(140,190,120,0) 104px 138px)}
.wash{position:absolute;display:block;border-radius:50%}
.wash--sun{left:-14%;top:-22%;width:78vmax;height:62vmax;background:radial-gradient(closest-side,rgba(255,238,168,.85),rgba(255,244,194,0))}
.wash--leaf{right:-16%;top:-12%;width:64vmax;height:54vmax;background:radial-gradient(closest-side,rgba(214,236,196,.85),rgba(227,242,214,0))}
.wash--mint{right:4%;bottom:-26%;width:56vmax;height:40vmax;background:radial-gradient(closest-side,rgba(226,241,206,.75),rgba(226,241,206,0))}
/* mid: the floating phone (WebGL body + its soft shadow, and the live DOM screen on top) */
.layer--mid{z-index:1}
.gl{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;z-index:0;background:transparent}
.css3d{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
/* v5: the 336 x 716 app is drawn 3x (K in scene3d.js), so text is crisp on 2x screens and when tilted */
.screen-outer{width:1008px;height:2148px;pointer-events:none}
.screen{position:relative;width:336px;height:716px;transform:scale(3);transform-origin:0 0;border-radius:47px;overflow:hidden}
.screen__ui{display:flex;flex-direction:column;height:100%}
/* the chat is laid out by JS as a pure function of scroll: every item sits at an explicit y */
/* v5: no will-change inside the screen: a promoted layer there is rastered once at its first
   scale and goes soft when the phone grows or turns; plain transforms re-raster at the drawn size */
.m-feed{position:absolute;left:0;right:0;top:0;padding:0!important}
.m-feed>[data-c]{position:absolute;top:0;left:12px;right:12px;margin:0!important;opacity:0}
.m-feed>.mb--me{left:auto}
.mb{transform-origin:0% 100%}
.mb--me{transform-origin:100% 100%}
.mtool{transform-origin:0% 0%}
.mtool__body{overflow:hidden}


.hero-copy{position:absolute;z-index:6}
/* front: the week board. --lift (0..1) is set during the pull-out: the sheet comes forward with a deeper shadow */
.layer--front{z-index:5}
.board{position:absolute;z-index:6;padding:22px 24px 18px;font-family:var(--body);color:var(--ink)}
.phone-slot{position:absolute;visibility:hidden;pointer-events:none}
.board [data-m]{position:relative;transform-origin:0 0;will-change:transform,opacity}
.board__bg{position:absolute!important;inset:0;background:#fff;border:1px solid var(--line);border-radius:28px;
  box-shadow:0 1px 2px rgba(23,34,26,.05),0 calc(30px + 40px * var(--lift,0)) calc(60px + 50px * var(--lift,0)) -34px rgba(35,97,58,calc(.40 + .25 * var(--lift,0))),0 calc(10px + 14px * var(--lift,0)) calc(24px + 20px * var(--lift,0)) -14px rgba(35,97,58,calc(.18 + .14 * var(--lift,0)))}
.b-label{margin:0;font:400 10px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.b-title{margin:4px 0 0;font:700 25px/1.15 var(--display);letter-spacing:-.02em;color:var(--ink)}
.b-chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 8px}
.b-chips span{font-size:12px;background:var(--tint);color:var(--brand-deep);border:1.5px solid var(--leaf-2);border-radius:999px;padding:3px 10px}
.b-chips b{font-weight:700}
.b-chips b{font-weight:600}
.b-week{list-style:none;margin:0;padding:0}
.b-week li{display:flex;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:15px}
.b-week li:last-child{border-bottom:0}
.b-week span{width:34px;flex:none;font:400 10px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--brand-deep)}
.b-week i{font-style:normal;display:flex;flex-direction:column}
.b-week small{font-size:12px;color:var(--accent-ink);font-weight:600}
.b-week em{margin-left:auto;font:400 10px/1.5 var(--mono);text-transform:uppercase;color:var(--muted);white-space:nowrap}
.b-ok{margin:12px 0 0;font-size:13.5px;color:var(--brand-deep);font-weight:600;background:var(--tint);border-radius:12px;padding:8px 12px}
.b-list{margin:6px 0 0;font-size:13px;color:var(--muted)}



/* ---------- the resting composition ----------
   CSS decides where the hero copy, the week board and the phone (.phone-slot) rest;
   the camera is then solved so the phone lands inside its slot on any viewport. */
.stage{--g:max(var(--sc-gutter),calc((100vw - 1760px) / 2));--barH:64px;--hw:min(36rem,35vw);--bw:clamp(15rem,27vw,27rem)}
.hero-copy .h1{font-size:min(clamp(2.4rem,1.2rem + 3.6vw,4.9rem),9vh)}
.hero-copy .lede{font-size:max(.9rem,min(1.15rem,3vh));margin:min(1.5rem,2.6vh) 0 min(2rem,3.6vh)}
.hero-copy .eyebrow{margin-bottom:min(1rem,2vh)}
/* landscape: hero | board | phone */
.hero-copy{left:var(--g);top:calc(50% + var(--barH) / 2);translate:0 -50%;width:var(--hw)}
.board{left:calc(var(--g) + var(--hw) + 3vw);top:calc(50% + var(--barH) / 2);translate:0 -50%;width:var(--bw)}
.phone-slot{left:calc(var(--g) + var(--hw) + var(--bw) + 5.5vw);right:calc(var(--g) * .55);top:calc(var(--barH) + 4vh);bottom:4vh}
/* compact board: smaller desktops, landscape tablets, portrait tablets */
@media (max-width:1279px),(max-height:860px){
  .board{padding:16px 18px 14px}
  .b-title{font-size:21px}
  .b-chips{margin:9px 0 6px}.b-chips span{font-size:11px;padding:2px 8px}
  .b-week li{font-size:13.5px;padding:6px 0;gap:10px}
  .b-ok{font-size:12.5px;margin-top:9px;padding:6px 10px}.b-list{font-size:10px}
}
/* tiny board: short landscape (phones on their side) and phones */
@media (max-height:560px){
  .stage{--barH:56px;--bw:clamp(14rem,29vw,19rem)}
  .board{padding:10px 12px 8px}
  .b-label{font-size:10px}.b-title{font-size:16px}
  .b-chips{gap:3px;margin:6px 0 3px}.b-chips span{font-size:10px;padding:1px 5px;border-width:1px}
  .b-week li{font-size:11.5px;padding:2.5px 0;gap:7px}
  .b-week span{width:28px;font-size:10px}.b-week small{font-size:10px}.b-week em{font-size:10px}
  .b-ok{font-size:11px;margin-top:5px;padding:4px 8px}.b-list{font-size:10px;margin-top:4px}
  .hero-copy .fine{margin-top:6px}
  .hero-cta .btn,.hero-cta .link{min-height:40px;padding:0 16px}
}
/* portrait tablets: hero on top; board and phone side by side below */
@media (orientation:portrait) and (min-width:600px){
  .stage{--bw:min(26rem,52vw)}
  .hero-copy{top:calc(var(--barH) + 4vh);translate:none;width:min(40rem,calc(100vw - 2 * var(--g)))}
  .hero-copy .h1{font-size:min(clamp(2.6rem,1.2rem + 4.6vw,5.8rem),6.2vh)}
  .hero-copy .lede{max-width:40ch}
  .board{top:auto;bottom:3.5vh;translate:none;left:var(--g)}
  .phone-slot{left:calc(var(--g) + var(--bw) + 4vw);right:var(--g);top:var(--slotTop,55%);bottom:3.5vh}
}
/* phones, portrait */
@media (orientation:portrait) and (max-width:599px){
  .stage{--barH:58px;--bw:min(62vw,17rem)}
  .hero-copy{top:calc(var(--barH) + 1.6vh);translate:none;width:auto;right:var(--g)}
  .hero-copy .h1{font-size:min(clamp(2rem,8.6vw,2.8rem),5vh)}
  .hero-copy .lede{font-size:max(.92rem,min(1.02rem,2.3vh));max-width:none;margin:1.3vh 0 1.8vh}
  .hero-cta .btn,.hero-cta .link{min-height:44px;padding:0 18px}
  .board{left:var(--g);top:auto;bottom:2vh;translate:none;padding:10px 12px 8px}
  .b-label{font-size:10px}.b-title{font-size:17px}
  .b-chips{gap:3px;margin:6px 0 3px}.b-chips span{font-size:10px;padding:1px 5px;border-width:1px}
  .b-week li{font-size:11.5px;padding:3px 0;gap:7px}
  .b-week span{width:28px;font-size:10px}.b-week small{font-size:10px}.b-week em{font-size:10px}
  .b-ok{font-size:11px;margin-top:6px;padding:4px 8px}.b-list{font-size:10px;margin-top:4px}
  .phone-slot{left:calc(var(--g) + var(--bw) + 2.5vw);right:2.5vw;top:var(--slotTop,60%);bottom:2vh}
}
@media (orientation:portrait) and (max-width:599px) and (max-height:700px){
  .hero-copy .h1{font-size:min(8vw,5vh)}
  .hero-copy .eyebrow{display:block;margin-bottom:.6vh}
  .b-week li{padding:2px 0}
}

/* ---------- phone layout ---------- */
@media (max-width:860px){
}
@media (max-width:860px) and (orientation:portrait){
}

/* v3: the board's 28px radius shrinks with its padding on small boards */
@media (max-width:1279px),(max-height:860px){ .board__bg{border-radius:22px} }
@media (max-height:560px),(orientation:portrait) and (max-width:599px){ .board__bg{border-radius:18px} }
/* v3: short landscape (phones on their side): the staging mono labels are wide, so tighten the board */
@media (max-height:560px){
  .stage{--bw:clamp(15rem,31vw,20rem)}
  .b-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px}
  .b-title{font-size:15px;margin-top:1px}
  .b-week li{font-size:11px;padding:1.5px 0;gap:6px}
  .b-week span,.b-week em{font-size:9px}
  .b-week small{font-size:9.5px;line-height:1.2}
  .b-week i{line-height:1.25}
  .b-ok{font-size:10.5px;margin-top:4px;padding:3px 8px}
  .b-list{display:none}
  .hero-copy .eyebrow{padding:4px 10px;font-size:10px;margin-bottom:6px}
}
/* v3: phones. Staging's mono labels are wide, so the board takes more of the width, the mono
   labels lose their tracking, and the hero tightens on short screens. Nothing goes under 10px. */
@media (orientation:portrait) and (max-width:599px){
  .stage{--bw:calc(100vw - 2 * var(--g) - max(84px,22vw))}
  .b-week li{font-size:11px;letter-spacing:-.005em}
  .b-week span,.b-week em{letter-spacing:0}
  .b-label{letter-spacing:.02em}
  .phone-slot{left:calc(var(--g) + var(--bw) + 6px);right:6px}
}
@media (orientation:portrait) and (max-width:599px) and (max-height:820px){
  .hero-copy .h1{font-size:min(7.8vw,4.7vh)}
  .hero-copy .lede{font-size:max(.875rem,min(.95rem,2.2vh));line-height:1.45;margin:1vh 0 1.4vh}
  .hero-copy .eyebrow{padding:5px 10px;margin-bottom:1vh}
  .hero-cta{gap:8px}
  .hero-cta .btn,.hero-cta .link{min-height:40px;padding:0 15px;font-size:.95rem}
  .hero-cta .fine{margin-top:0;font-size:.85rem}
  .board{bottom:1.4vh}
  .b-week li{padding:2px 0}
}
/* v5.2: the board shows its chips on phones too, like the card in the phone; short phones (SE) win the line back from the rows */
@media (orientation:portrait) and (max-width:599px) and (max-height:700px){
  .b-week li{padding:1px 0}
  .b-chips{margin:4px 0 2px}
}
@media (max-height:560px){
  /* v5: "Start free trial →" is longer than "Try free →": keep both hero buttons on one line */
  .hero-cta{gap:6px}
  .hero-cta .btn,.hero-cta .link{min-height:38px;padding:0 12px;font-size:.875rem;white-space:nowrap}
  .b-label{font-size:10px}
  .b-week span,.b-week em{font-size:10px;letter-spacing:0}
  .b-week small{font-size:10px}
}
/* v4: the connector card's skeleton sits over its panel while it loads (JS fades it by scroll) */
.mtool{position:relative}
.mtool__skel{position:absolute;left:10px;right:10px}