/* Brand fonts (client-supplied; Reckless files are TRIAL cuts. Circular Std Medium not supplied yet: .med fakes it with a hairline stroke) */
@font-face{font-family:"Reckless";src:url(assets/fonts/reckless-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Circular";src:url(assets/fonts/circular-book.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
/* Build of Figma "fyg" WIP page (node 33:2891), designed at 1388px wide.
   Desktop sections are laid out in the design's own coordinates (1364px-wide containers) and scaled with CSS zoom,
   so every position, size and crop matches the file. Hero + "Four simple steps" are one pinned scroll story;
   the phone travels between them on a rendered PNG sequence (placeholder until the updated renders arrive). */
:root{
  --white:#FFFFFF;
  --ink:#000000;
  --ink-2:#191919;
  --ink-3:#1B1B1F;
  --stone:#5E5B50;
  --stone-2:#55554F;
  --stone-3:#878376;
  --cream:#F7F4E9;
  --pillbar:#F2EEE6;
  --navy:#142261;
  --navy-2:#192C80;
  --grad-hero:linear-gradient(180deg,#1D7BF0 39.42%,#7BA6FA 69.15%,#BFBDE9 88.93%,#FBD3B9 100%);
  --grad-bank:linear-gradient(180deg,#1D7BF0 4.1%,#7BA6FA 70.43%,#C3C1EA 92.06%,#FED0B2 121.85%);
  --grad-chat:linear-gradient(180deg,#1D7BF0 3.37%,#7BA6FA 37.64%,#C3C1EA 65%,#FED0B2 100%);
  --f-display:"Reckless", Georgia, "Times New Roman", serif;
  --f-body:"Circular", "Helvetica Neue", Arial, sans-serif;
  --f-ui:"Figtree", "Helvetica Neue", Arial, sans-serif;
  --gap:12px;
  --r:10px;
  --kw:1;
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.3;-webkit-font-smoothing:antialiased;padding-left:max(0px, env(safe-area-inset-left,0px));padding-right:max(0px, env(safe-area-inset-right,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--white)}
p,h1,h2,h3{margin:0;font-weight:400}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
:focus-visible{outline:2px solid #1D7BF0;outline-offset:3px;border-radius:6px}
.med{-webkit-text-stroke:.22px currentColor}
/* heading line masks: each line rises out of its own clip */
.ln{display:block;overflow:hidden;padding:.1em .08em .2em;margin:-.1em -.08em -.2em}
.ln>span{display:inline-block;will-change:transform}
.dz{position:relative}
.pre #heroHdr,.pre #heroHdr2,.pre #heroMain,.pre #heroCopyLay,.pre #heroTop{visibility:hidden}   /* until the intro timeline has set its start states (no flash of the finished hero) */
.abs{position:absolute}
.crop{position:absolute;overflow:hidden}
.crop>img{position:absolute;max-width:none;display:block}
.flipx{transform:scaleX(-1)}
.pill-btn{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 20px;border-radius:100px;background:var(--ink);color:var(--white);font-size:13px;line-height:1;letter-spacing:-0.39px;white-space:nowrap;transition:background .25s}
.pill-btn:hover{background:#1D7BF0}

/* ───────── Header ───────── */
.hdr{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;padding-left:max(8px, env(safe-area-inset-left,0px));padding-right:max(8px, env(safe-area-inset-right,0px));pointer-events:none}
.hdr-in{pointer-events:auto;position:relative;margin:20px auto 0;max-width:903px;height:64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 12px 0 26px;border-radius:999px;background:#fff;border:1px solid #E9E3D2;color:var(--ink);transform:translateY(calc(-100% - 32px));opacity:0;transition:transform .7s var(--ease), opacity .45s ease}
.hdr:not(.show) .hdr-in{pointer-events:none}
.hdr.show .hdr-in{transform:none;opacity:1}
.logo{justify-self:start;display:inline-flex;flex-direction:column;align-items:flex-end;gap:3px;color:inherit}
.logo b{font-family:var(--f-display);font-weight:400;font-size:32px;line-height:.7;letter-spacing:-0.64px;padding-top:4px}
.logo small{font-size:10px;line-height:1;letter-spacing:-0.2px;color:#9C998D}   /* "By Fygge" in the footer grey everywhere it sits on white */
.hero-in .logo small,.hh-logo small{color:inherit}   /* on the blue hero it stays white */
.nav{display:flex;align-items:center;gap:12px;padding:2px;border-radius:100px;backdrop-filter:blur(50px);-webkit-backdrop-filter:blur(50px)}
.nav a{height:32px;display:flex;align-items:center;padding:0 14px;border-radius:100px;font-size:13px;line-height:1;letter-spacing:-0.39px;transition:background .25s, color .25s}
.nav a:hover{background:var(--cream);color:var(--ink)}   /* the section-2 beige */
.hdr .nav a:hover{background:var(--cream)}
.hdr-cta{justify-self:end;display:flex;gap:8px;align-items:center}
.menu-btn{display:none;width:36px;height:36px;border-radius:999px;background:rgba(0,0,0,.06);align-items:center;justify-content:center;gap:4px;flex-direction:column}
.menu-btn span{display:block;width:15px;height:1.5px;background:currentColor}
/* desktop: the pill hugs its content, so the logo, links and CTA sit closer together */
@media (min-width:821px){.hdr-in{display:flex;width:max-content;max-width:none;gap:54px;height:56px;padding:0 10px 0 24px}.hdr-in .nav{margin-right:auto}.hdr-in .logo b{font-size:28px;letter-spacing:-0.56px}.hdr-in .logo small{font-size:9px}.hdr-in .pill-btn{height:34px;padding:0 18px}.hdr-in .nav a{height:30px}}   /* a touch more compact */
/* header CTA: no colour change on hover, just a very slight grow (transform only, so the pill and everything in it stay put) */
.hdr-in .pill-btn{transition:transform .45s var(--ease)}
.hdr-in .pill-btn:hover{background:var(--ink);transform:scale(1.025)}
/* desktop pre-scroll header: same box as the sticky pill (card sits 12px down, pill 20px down → 8px), so the two line up exactly */
.hero-hdr2{display:none}
@media (min-width:821px){
  #heroHdr{display:none}
  .hero-hdr2{display:block;position:absolute;left:0;right:0;top:14px;z-index:6;pointer-events:none}
  .hero-in{transform:none;opacity:1;background:transparent;border-color:transparent;margin:0 auto;pointer-events:auto;transition:none;width:min(1036px, calc(100% - 64px));padding:0;justify-content:space-between}   /* logo and CTA sit on the page's content edges (About/Careers copy lines up under the logo) */
  #heroHdr2 .hero-in{width:min(1036px, calc(100% - 40px))}   /* home: the card is inset 12px, so this lands on the same 32px edge as the other pages */
  .hero-in .nav{position:absolute;left:50%;transform:translateX(-50%);margin:0}   /* links stay centred; logo and CTA spread out to the sides */
  .hero-in .logo,.hero-in .nav a{color:#fff}
  .hero-in .nav a:hover{color:var(--ink)}
}
/* static header that lives in the hero card and scrolls away with it */
.hero-hdr{z-index:6}
.hero-card .hero-hdr>.dz{height:120px}
.hero-hdr,.hero-hdr>.dz{pointer-events:none}
.hero-hdr>.dz>*{pointer-events:auto}
.hh-logo{left:372px;top:30.75px;transform:translateX(-50%);color:#fff}
.hh-nav{left:50%;top:48.25px;transform:translate(-50%,-50%);color:#fff}
.hh-cta{left:870px;top:30.25px}

/* ───────── Story stage (hero → four steps) ───────── */
.story{position:relative;height:620vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.lay{position:absolute;left:0;top:0}
.lay>.dz{width:1364px}
.cream-bg{position:absolute;inset:var(--gap);border-radius:var(--r);background:var(--cream);z-index:0}
.cream-main,.cream-peek{z-index:1}
.cream-top{z-index:4;opacity:0;pointer-events:none}   /* never blocks the hero underneath */
.stage.landed .tone-in{pointer-events:auto}
.cream-main>.dz,.cream-top>.dz,.cream-peek>.dz{height:788px}
.steps-copy{left:59px;top:calc(50% - 39.5px);transform:translateY(-50%);width:385px;display:flex;flex-direction:column;gap:16px}
.steps-copy p{font-size:18px;line-height:1.39;letter-spacing:-0.54px;color:var(--stone)}
.steps-copy h2{font-family:var(--f-display);font-size:45px;line-height:.96;letter-spacing:-0.9px;color:var(--ink-2);width:435px}
.steps-list{left:858px;top:50%;transform:translateY(-50%);width:450px;padding:0 48px;list-style:none;margin:0;display:flex;flex-direction:column}
.steps-list li{display:grid;grid-template-columns:20px 1fr;column-gap:24px;align-items:start;opacity:.35;margin-top:20px;transition:opacity .5s ease, margin .6s var(--ease)}
.steps-list li:first-child{margin-top:0}
.steps-list li.on{opacity:1}
.steps-list li{cursor:pointer}
.steps-list li:not(.on):hover{opacity:.62}
.steps-list li:focus-visible{outline:2px solid #1D7BF0;outline-offset:6px;border-radius:8px}
.steps-list li.on+li{margin-top:30px}
.steps-list li:has(+ li.on){margin-bottom:10px}
.steps-list .ic{width:20px;height:20px;display:grid;place-items:center}
.steps-list .ic img{display:block;max-width:20px;max-height:20px}
.steps-list h3{font-size:15px;line-height:1.2;letter-spacing:-0.3px;color:var(--ink);-webkit-text-stroke:0 transparent;transition:-webkit-text-stroke .3s}
.steps-list li.on h3{-webkit-text-stroke:.22px currentColor}
.steps-list .more{grid-column:2;display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.steps-list .more p{overflow:hidden;font-size:15px;line-height:1.3;letter-spacing:-0.3px;color:var(--stone)}
.steps-list li.on .more{grid-template-rows:1fr}
.steps-list li.on .more p{padding-top:12px}
.m-phone,.mb,.mpips,.jh-m,.pf-screen{display:none}
.peek{left:-25px;top:453.05px;width:590px;height:307px}
.peek>img{left:0;top:0;width:100%;height:100%;transition:opacity .3s ease}
.peek .pk-angry,.peek.angry .pk-song{opacity:0}
.peek.angry .pk-angry{opacity:1}   /* Angry bird: same canvas as the standing bird, so he never moves */
.pslot{left:535.5px;top:99.5px;width:293px;height:589px}
.phone-frame{left:-10.31px;top:.04px;width:318.62px;height:601.917px}
.phone-frame>img{left:0;top:0;width:100%;height:98.41%}
.stage.seq-on:not(.seq-done) .phone-frame{visibility:hidden}
/* section 2 phone: the transition's own last frame (same render, phone3.webp = crop 429,323 of the 2000×3000 frame), placed with the exact transform the frames end on */
#creamMain .pslot .phone-frame{left:4.28px;top:-1.31px;width:287.12px;height:591.32px}
#creamMain .pslot .phone-frame>img{height:100%}   /* the real mockup takes over once the frames finish */

/* chat screen, simplified style (Figma 85:1828 "Fyggero — tone of voice - new"): Fyggero speaks in big plain type, you reply in a white pill */
.chat{position:absolute;left:12.98px;top:9.19px;width:268.7px;height:570.7px;border-radius:42px;background:var(--grad-chat);overflow:hidden;color:#fff}
#creamTop .chat{left:13.78px;top:6.9px;width:266.93px;height:574.42px;border-radius:44px}
#creamTop .c2-ft{bottom:10.96px}   /* composer sits where the transition's last frame has it (Figma 115:903) */
#creamTop .c2-island{left:93.03px;top:9.78px;width:81.2px;height:23.8px;border-radius:12px}   /* screen + camera pill matched to the transition's last frame */   /* section 2 screen: fitted inside phone3's screen, same ~3.7px black border as before */
.c2-island{position:absolute;left:92.55px;top:7.36px;width:83.6px;height:24.75px;border-radius:13px;background:#000;z-index:5;pointer-events:none}
.c2-hd{position:absolute;left:0;right:5px;top:37.23px;display:flex;align-items:center;justify-content:space-between;padding:15px 12px}
.c2-hd img{width:17.397px;height:17.397px;display:block}
.c2-hd b{font-family:var(--f-display);font-weight:400;font-size:21px;line-height:.7;letter-spacing:-0.42px;padding-top:3px}
.c2-status{position:absolute;left:0;right:0;top:84.63px;display:flex;align-items:center;justify-content:center;gap:3.346px;font-family:var(--f-ui);font-size:8.029px;line-height:10.706px;color:rgba(255,255,255,.8);white-space:nowrap}
.c2-status img,.c2-status i{width:4.684px;height:4.684px;display:block;border-radius:50%}
.c2-status i{background:#FF7A45;display:none}
.chat[data-tone="angry"] .c2-status img{display:none}
.chat[data-tone="angry"] .c2-status i{display:block}
.c2-msgs{position:absolute;left:2.5px;right:2.5px;top:103px;bottom:96px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(180deg,transparent 0,#000 30px,#000 calc(100% - 14px),transparent)}
.c2-thread{display:flex;flex-direction:column;align-items:flex-start;padding:35.07px 12px 20px 16px;will-change:transform}
.c2-fy+.c2-fy,.c2-typing+.c2-fy{margin-top:14px}
.c2-you+.c2-you{margin-top:-10px}
.c2-thread>.c2-you:first-child{margin-top:0}
.c2-fy{width:216.191px;max-width:100%;font-size:18px;line-height:21px;letter-spacing:-0.36px;color:#fff}
.c2-you{align-self:flex-end;margin:26px 13.5px 18px 0;max-width:205px;background:#fff;color:#1B1B1F;border-radius:16px 20px 0 16px;padding:8.5px 15px 8.8px 15.3px;font-size:12.691px;line-height:14.668px;box-shadow:0 1.364px 5.456px rgba(26,38,102,.08)}
.c2-later{display:none}
.c2-fy b{font-weight:400}
.c2-typing{display:none;gap:4px;align-items:center;height:21px;padding-left:1px}
.c2-typing i{width:5px;height:5px;border-radius:50%;background:#fff;opacity:.5;animation:dots 1.1s ease-in-out infinite}
.c2-typing i:nth-child(2){animation-delay:.15s}.c2-typing i:nth-child(3){animation-delay:.3s}
@keyframes dots{0%,60%,100%{transform:none;opacity:.45}30%{transform:translateY(-3px);opacity:1}}
.c2-ft{position:absolute;left:2.5px;right:2.5px;bottom:6px;padding:13px 14px;display:flex;flex-direction:column;gap:6px}
/* suggestion pills (Figma 85:1355) appear once the conversation has played */
.chips{display:flex;gap:4px;min-height:19.4px;padding-right:10.7px;overflow-x:clip;overflow-y:visible}   /* room for the hover lift */
.chip{flex:none;background:rgba(255,255,255,.7);border:.669px solid #fff;padding:3px 8px;border-radius:999px;font-family:var(--f-ui);font-weight:500;font-size:8.699px;line-height:12.044px;color:var(--navy-2);white-space:nowrap;cursor:pointer;transition:background .3s ease, box-shadow .3s ease}
.chips.ready .chip{transition:background .3s ease, box-shadow .3s ease, transform .4s var(--ease)}   /* hover lift only once the entrance has finished (no tug-of-war with GSAP) */
.chip:hover{background:#fff;transform:translateY(-1.5px);box-shadow:0 4px 10px -6px rgba(25,44,128,.45)}
/* app-screen micro-interactions */
.stage.landed .cream-top .chat{pointer-events:auto}
.c2-hd img{transition:transform .5s var(--ease), opacity .3s ease;cursor:pointer}
.c2-hd .back:hover{transform:translateX(-3px)}
.c2-hd .more:hover{opacity:.55}
.c2-hd img:active{opacity:.6}
.cbtn{cursor:pointer;transition:transform .5s var(--ease), background .3s ease, opacity .3s ease, box-shadow .3s ease}
.cbtn.attach:hover{background:#000;transform:rotate(90deg)}
.cbtn:hover img{filter:brightness(0) invert(1)}
.cbtn.send:hover{background:#000;opacity:1;transform:translateY(-2px);box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
.cbtn.send:hover img{animation:send-up .7s var(--ease)}
.cbtn:active{transform:scale(.9)}
@keyframes send-up{0%{transform:none}40%{transform:translateY(-5px);opacity:0}41%{transform:translateY(5px);opacity:0}100%{transform:none;opacity:1}}
.cinput{cursor:text;transition:box-shadow .35s ease}
.cinput::before{content:"";display:inline-block;width:1px;height:10px;margin-right:2px;vertical-align:-1px;background:#1D7BF0;opacity:0}
.cinput:hover{box-shadow:0 0 0 3px rgba(255,255,255,.35)}
.cinput:hover::before{animation:caret 1s steps(1) infinite}
@keyframes caret{0%{opacity:1}50%{opacity:0}}
.c2-status{transition:transform .4s var(--ease)}
.chat:hover .c2-status img,.chat:hover .c2-status i{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(91,227,138,.0)}50%{box-shadow:0 0 0 3px rgba(255,255,255,.25)}}
.composer{display:flex;align-items:center;gap:4px}
.cbtn{flex:none;width:25.427px;height:25.427px;border-radius:999px;display:grid;place-items:center}
.cbtn img{width:13.382px;height:13.382px;display:block}
.cbtn.attach{background:rgba(255,255,255,.6)}
.cbtn.send{background:var(--navy-2);opacity:.4}
.cinput{flex:1 0 0;min-width:0;background:#fff;border-radius:13.382px;padding:6.022px 10.706px;font-family:var(--f-ui);font-size:10.037px;line-height:13.382px;color:#8A8A94;white-space:nowrap}

/* Songbird / Angry bird */
.tone{left:552px;top:694px;width:260px;padding:24px 16px}
.tone-in{position:relative;display:flex;padding:2px;border-radius:100px;background:#fff;backdrop-filter:blur(50px)}
.tone-in::before{content:"";position:absolute;top:2px;bottom:2px;left:2px;width:calc(50% - 2px);border-radius:100px;background:#000;transition:transform .5s var(--ease)}
.tone-in[data-tone="angry"]::before{transform:translateX(100%)}
.tone-in button{position:relative;flex:1 0 0;height:32px;border-radius:100px;font-size:13px;line-height:1;letter-spacing:-0.39px;color:var(--stone-3);transition:color .35s}
.tone-in button[aria-pressed="true"]{color:#fff}
/* tiny "click me" shiver on Angry bird: shake, pause, repeat (stops once chosen or hovered) */
.tone-in button[data-t="angry"][aria-pressed="false"] span{display:inline-block;animation:nudge 2.6s ease-in-out 1.5s infinite}
.tone-in button[data-t="angry"]:hover span{animation-play-state:paused}
@keyframes nudge{0%,19%,100%{transform:none}2.5%{transform:translateX(-1.4px) rotate(-2.8deg)}5%{transform:translateX(1.4px) rotate(2.8deg)}7.5%{transform:translateX(-1.3px) rotate(-2.2deg)}10%{transform:translateX(1.3px) rotate(2.2deg)}12.5%{transform:translateX(-.9px) rotate(-1.4deg)}15%{transform:translateX(.7px) rotate(.8deg)}17%{transform:translateX(-.3px) rotate(-.3deg)}}
@media (prefers-reduced-motion: reduce){.tone-in button span{animation:none!important}}

/* hero card */
/* --gs shifts the whole hero gradient upwards on scroll, so the peach horizon grows as the card leaves */
.hero-card{--gs:0%;position:absolute;inset:var(--gap);border-radius:var(--r);overflow:hidden;background:linear-gradient(180deg,#1D7BF0 calc(39.42% - var(--gs)),#7BA6FA calc(69.15% - var(--gs)),#BFBDE9 calc(88.93% - var(--gs)),#FBD3B9 calc(100% - var(--gs)));z-index:2;will-change:transform}
.hero-card .lay>.dz,.hero-top>.dz{height:738px}
.hero-card-top{background:none;z-index:4;pointer-events:none}
.trees-r{left:801.5px;top:-596.78px;width:586.5px;height:1333.571px}
.trees-r>img{position:absolute;inset:0;width:100%;height:100%;object-position:bottom}
.trees-l{left:-51.07px;top:181.19px;width:651.07px;height:555.607px}
.trees-l>img{height:100%;left:0;top:0;width:179.46%}
.hero-phone{left:709.14px;top:33.25px;width:609.162px;height:697.347px;display:flex;align-items:center;justify-content:center}
.hero-phone>div{position:relative;flex:none;width:446.21px;height:586.006px;transform:rotate(18.51deg)}
.hero-phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* hero phone animation: stacked-alpha H.264 (colour on top, matte below) composited in WebGL; poster = first frame */
.hero-phone>.hp-anim{position:absolute;flex:none;left:66.5px;top:97.6px;width:399.8px;height:521.6px;transform:none}
.hp-anim canvas,.hp-anim .hp-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.hp-anim canvas{opacity:0}
.hp-anim.live canvas{opacity:1}   /* the canvas's first frame IS the poster, so it switches on instantly (a fade left the phone blank for a beat) */
.hp-anim.live .hp-poster{opacity:0;transition:opacity 0s linear .15s}   /* poster stays underneath until the canvas has painted */
.hp-video{position:absolute;left:0;top:0;width:2px;height:2px;opacity:0;pointer-events:none}
.hero-copy{left:166px;top:50%;transform:translateY(-50%);width:505px;padding:0 48px;color:#fff;text-align:center}
.hc-wrap{display:flex;flex-direction:column;gap:48px;align-items:center}
.hc-top{display:flex;flex-direction:column;gap:20px;align-items:center;width:100%}
.hc-titles{display:flex;flex-direction:column;gap:16px;align-items:center;width:100%;font-family:var(--f-display)}
.hc-eyebrow{font-size:18px;line-height:.7;letter-spacing:-0.54px;white-space:nowrap}
.hc-h1{font-size:56px;line-height:.88;letter-spacing:-1.12px;width:100%}
.hc-body{width:100%;padding:0 37px;font-size:16.369px;line-height:1.39;letter-spacing:-0.3px}
.hc-body u{text-decoration-thickness:from-font;text-underline-position:from-font;text-decoration-skip-ink:none}
.hc-form{width:415px;display:flex;flex-direction:column;gap:16px;align-items:center}
.wl{width:360px;max-width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;border-radius:100px;padding:10px 10px 10px 24px;cursor:text;box-shadow:0 0 0 0 rgba(255,255,255,0), 0 0 0 rgba(0,30,90,0);transition:width .6s var(--ease), box-shadow .45s ease, transform .45s var(--ease)}
.wl:hover{width:380px;transform:translateY(-2px);box-shadow:0 0 0 5px rgba(255,255,255,.28), 0 14px 30px -14px rgba(0,30,90,.4)}
.wl:hover input::placeholder{color:#6f6f6f}
.wl input::placeholder{transition:color .3s}
.wl:focus-within{width:415px;transform:translateY(-3px);box-shadow:0 0 0 4px rgba(255,255,255,.32), 0 14px 32px -14px rgba(0,30,90,.4)}
.wl button:active{transform:scale(.96)}
.wl button{transition:background .25s, transform .2s}
.wl input{flex:1 0 0;min-width:0;border:0;outline:0;background:transparent;font-family:var(--f-body);font-size:13px;line-height:1.39;letter-spacing:-0.26px;color:#1b1b1f;padding:0}
.wl input::placeholder{color:#949494}
.wl button{flex:none;background:#000;color:#fff;border-radius:100px;padding:10px 20px;font-size:13px;line-height:1;letter-spacing:-0.39px;transition:background .25s}
.wl button:hover{background:#1D7BF0}
.wl-note{font-size:12px;line-height:1;letter-spacing:-0.24px;width:100%}
.wl.done{justify-content:center;padding:20px 24px;color:#1b1b1f;font-size:13px}
.launch{left:50%;top:691.84px;transform:translateX(-50%);font-size:12px;line-height:1;letter-spacing:-0.24px;color:#fff;text-shadow:1px 2px 24px rgba(0,0,0,.33);white-space:nowrap}
.scrollcue{left:1234px;top:690.62px;display:flex;gap:5px;align-items:center;color:#fff;font-size:12px;line-height:1;letter-spacing:-0.24px}
.scrollcue svg{width:9.37px;height:14.457px;display:block;overflow:visible;animation:cue-bob 2.4s ease-in-out infinite}
.scrollcue .dot{animation:cue-dot 2.4s ease-in-out infinite}
@keyframes cue-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(2px)}}
@keyframes cue-dot{0%{transform:translateY(0);opacity:0}15%{opacity:1}60%{transform:translateY(4.5px);opacity:1}80%,100%{transform:translateY(5px);opacity:0}}
@media (prefers-reduced-motion: reduce){.scrollcue svg,.scrollcue .dot{animation:none}}
.hero-top{z-index:5;pointer-events:none}
.bird{left:572.81px;top:104px;width:415.388px;height:366.995px;display:flex;align-items:center;justify-content:center}
.bird>div{flex:none;width:344.673px;height:259.624px;transform:rotate(21.28deg)}
.bird img{width:100%;height:100%;object-fit:cover;display:block}

/* rendered phone sequence (desktop) */
.seq{position:absolute;left:0;top:0;width:683px;height:978px;transform-origin:0 0;z-index:3;pointer-events:none;visibility:hidden;display:none}
.stage.seq-on .seq{display:block}

/* ───────── Journey (Figma 33:4046): pinned, four frames scrubbed by scroll ───────── */
.jr{position:relative;height:280vh}
.jr-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.stage,.jr-stage{background-color:var(--white)}   /* Safari 26 paints its bar from pinned sections at the screen edge; a plain white one keeps the normal glass */
.jr-card{position:absolute;inset:var(--gap);border-radius:var(--r);overflow:hidden;background:var(--grad-bank);isolation:isolate}
.jr-g2{position:absolute;inset:0;background:linear-gradient(180deg,#1D7BF0 3.2%,#7BA6FA 45.38%,#B9E8FD 78.21%,#BCE8FC 94.94%);opacity:0}
.jr-lay{position:absolute;left:0;top:0}
.jr-lay>.dz{width:1364px;height:776px}
.jr-back{z-index:1}
.jr-hills{position:absolute;z-index:2;overflow:hidden;pointer-events:none;will-change:transform}
.jr-hills>canvas{position:absolute;max-width:none;display:block;height:225.51%;left:-0.01%;top:-80%;width:100.02%}
.jr-front{z-index:3;pointer-events:none}
.jr-front .pill-btn{pointer-events:auto}
.cl{position:absolute;will-change:transform,opacity}
.cl>div{position:absolute;inset:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}   /* no hard crop lines in the open sky */
.cl img{position:absolute;max-width:none;display:block}
.jr-copy{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:385px;display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;color:#fff}
.jr-copy h2,.jr-h2{font-family:var(--f-display);font-size:50px;line-height:1;letter-spacing:-1px;width:100%}
.jr-copy p{width:322.992px;font-size:15px;line-height:1.2;letter-spacing:-0.3px}
.jr-h2{position:absolute;left:50%;top:calc(50% - 264px);transform:translate(-50%,-50%);width:640px;text-align:center;color:#fff}
.jr-cta{position:absolute;left:0;right:0;top:calc(50% + 318px);height:0;display:flex;align-items:center;justify-content:center}
/* USP pill rows (marquee) */
.jr-row{position:absolute;left:0;display:flex;gap:14.418px;will-change:transform}
.jr-row.r2{top:399.5px}
.jr-row.r3{top:471.61px}
.usp{flex:none;display:flex;align-items:center;gap:12.015px;height:43.22px;padding:0 18.5px 0 14.5px;border-radius:1200px;border:1.5px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);color:#fff;font-size:15px;line-height:1.2;letter-spacing:-0.3px;white-space:nowrap}
.usp img{width:19.224px;height:19.224px;display:block}
/* savings calculator (Figma 20:5333, storyboard 4): sits in front of the hills */
.calc{left:232px;top:188px;width:900px;display:flex;flex-direction:column;align-items:center;gap:16px;pointer-events:auto;will-change:transform,opacity}
.calc-sub{color:#fff;font-size:17px;line-height:1.3;letter-spacing:-0.34px;margin-bottom:8px}   /* same treatment as the old "Estimated monthly savings" line */
.cc{width:100%;background:#fff;border-radius:14.464px;padding:12px;display:flex;flex-direction:column;gap:12px;color:#191919}
/* the slider gets its own cream panel at the top of the card: label, the amount (big and unmissable), then the rail */
.cc-sl{background:var(--cream);border-radius:9px;padding:12px 26px 15px;display:flex;flex-direction:column;align-items:center}
.cs-amt{position:relative;margin:0 0 10px;font-family:var(--f-display);font-size:60px;line-height:1;letter-spacing:-1.8px;color:#191919;font-variant-numeric:lining-nums;white-space:nowrap}
.odo{display:inline-flex;justify-content:center;vertical-align:top}
.od-cur,.od-d{display:inline-block;height:1.1em;line-height:1.1em}
.od-d{overflow:hidden;width:0;transition:width .5s var(--ease);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent)}
.od-s{display:block;transition:transform .55s cubic-bezier(.2,.75,.25,1)}
.od-s>i{display:block;height:1.1em;font-style:normal;text-align:center}
.cs-amt small{position:absolute;left:100%;bottom:.62em;margin-left:4px;font-family:var(--f-body);font-size:15px;letter-spacing:-0.3px;color:var(--stone)}   /* hangs off the number, so the number itself stays dead centre */
.rail{--t:.5;position:relative;width:calc(100% - 19.72px);height:14.464px}
.rail-bg{position:absolute;left:0;right:0;top:5.47px;height:5.238px;border-radius:100px;background:rgba(0,0,0,.1)}
.rail i{position:absolute;left:0;top:5.47px;height:5.238px;width:calc(var(--t) * 100%);border-radius:100px;background:#4DDB46;background:color-mix(in srgb,#4DDB46 calc(var(--t) * 100%),#BDB6A8)}   /* one solid colour: full green at 40 years, warming to grey as the years come down */
.knob{position:absolute;left:calc(var(--t) * 100% - 12px);top:-4.8px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(13,38,102,.22), 0 3px 10px -4px rgba(13,38,102,.3);pointer-events:none;transition:transform .35s var(--ease), box-shadow .35s ease}
.knob::after{content:"";position:absolute;left:6.5px;top:6.5px;width:11px;height:11px;border-radius:50%;background:#191919;transition:transform .35s var(--ease)}
.knob img{display:none}
.rail.tease .knob{animation:knobTease 3.2s ease-in-out 1s infinite}
.rail.tease .knob::before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px rgba(77,219,70,.7);opacity:0;animation:knobPulse 3.2s ease-out 1s infinite}
@keyframes knobTease{0%,70%,100%{translate:0}74%{translate:-5px}78%{translate:5px}82%{translate:-4px}86%{translate:3px}90%{translate:-1px}94%{translate:0}}
@keyframes knobPulse{0%,70%{opacity:0;transform:scale(1)}74%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(2)}}
@media (prefers-reduced-motion: reduce){.rail.tease .knob,.rail.tease .knob::before{animation:none}}
.rail:hover .knob{transform:scale(1.12)}
.rail.drag .knob{transform:scale(1.12);box-shadow:0 1px 3px rgba(13,38,102,.22), 0 0 0 8px rgba(77,219,70,.2)}
.rail.drag .knob::after{transform:scale(.7)}
.rail input{position:absolute;left:-10px;right:-10px;top:-8px;height:31px;width:calc(100% + 20px);margin:0;opacity:0;cursor:grab}
.rail.drag input{cursor:grabbing}
.rail:has(input:focus-visible) .knob{outline:2px solid #1D7BF0;outline-offset:2px}
/* touch screens: a big invisible strip takes the drag (the native range only answers on its tiny hidden thumb on iOS) */
.rail-hit{display:block;position:absolute;left:-14px;right:-14px;top:-26px;height:66px;z-index:2;touch-action:pan-y;cursor:grab}
.rail input{pointer-events:none}   /* still there for keyboard and screen readers */
.rail.drag .rail-hit{cursor:grabbing}
.cc-sl{-webkit-user-select:none;user-select:none}
/* the three outcomes: desktop = rows that grow left to right (label + rate on the left, total on the right);
   bar length is the total against the most it can be (£500 a month, invested), so they grow and shrink with the slider */
.bars{display:flex;flex-direction:column;gap:6px}
.bar{--v:0;position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;height:61px;padding:0 22px 0 14px;border-radius:10px;overflow:hidden;}
.bar-fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v) * 100%);border-radius:10px;transition:width .6s var(--ease), height .6s var(--ease)}
.b-none .bar-fill{background:#E7E2D5}
.b-save .bar-fill{background:#F6DDA9}
.b-inv .bar-fill{background:linear-gradient(90deg,#86E27B,#4DDB46)}
.bar-l{position:relative;display:flex;align-items:center;gap:12px;font-size:15px;line-height:1.2;letter-spacing:-0.3px;white-space:nowrap}
.bar-l b{font-weight:400}
.bar-l .pill{order:-1}
.pill{display:inline-flex;align-items:center;justify-content:center;height:24px;padding:0 12px;border-radius:100px;font-size:13px;line-height:1;letter-spacing:-0.26px;color:#191919;background:#fff;box-shadow:inset 0 0 0 1px rgba(25,25,25,.1)}
.bar .tv{position:relative;font-family:var(--f-display);font-weight:400;font-size:34px;line-height:1;letter-spacing:-1.1px;color:#191919;font-variant-numeric:lining-nums}
/* qualifying text: the smallest type on the page, on its own cream strip at the foot of the card */
#ccPaid{font-variant-numeric:tabular-nums}
.cc-legal{width:100%;margin-top:-4px;padding:0 12px;font-family:Inter,var(--f-body);font-weight:400;font-size:10.5px;line-height:1.5;letter-spacing:0;color:#191919}   /* sits under the card, on the sky */

/* ───────── FAQ ───────── */
/* Figma 20:4976 */
.faq{position:relative;margin:var(--gap);border-radius:var(--r);overflow:hidden;background:var(--cream);height:calc(868px * var(--kw))}   /* 7 questions: tall enough for the longest answer open, same top/bottom margins as before */
.faq>.dz{width:1364px;height:868px;margin:0 auto;zoom:var(--kw);--z:var(--kw)}
.faq-intro{left:59px;top:114.5px;width:293px;display:flex;flex-direction:column;gap:16px;align-items:flex-start;font-family:var(--f-display)}
.faq-eye{font-size:18px;line-height:.7;letter-spacing:-0.54px;color:var(--stone);padding-top:2px}
.faq-intro h2{font-size:45px;line-height:.96;letter-spacing:-0.9px;color:var(--ink-2)}
.faq-list{left:484px;top:114.5px;width:719px;display:flex;flex-direction:column;gap:12px}
.qa{position:relative;background:rgba(255,255,255,.6);border-radius:16px;padding:16px 20px;transition:background .5s ease, box-shadow .5s ease}
.qa:hover:not(.open){background:rgba(255,255,255,.85)}
.qa.open{background:#fff;box-shadow:0 10px 30px -18px rgba(94,91,80,.35)}
.qa-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;text-align:left;cursor:pointer}
.qa-q span{flex:1 0 0;font-size:18px;line-height:1.2;letter-spacing:-0.36px;color:#000}
.qa-q:focus-visible{outline-offset:6px}
.qa-t{flex:none;width:36px;height:36px;border-radius:999px;display:grid;place-items:center;background:var(--cream);transition:background .35s ease, transform .6s var(--ease)}
.qa-t svg{width:16px;height:16px;display:block;overflow:visible}
.qa-t .v{transform-origin:8px 8px;transition:transform .5s var(--ease)}
.qa:hover .qa-t{background:#EFEBDD}
.qa-q:hover .qa-t{transform:rotate(90deg)}
.qa.open .qa-t{transform:rotate(180deg)}
.qa.open .qa-t .v{transform:scaleY(0)}
.qa-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.qa-a>div{overflow:hidden;min-height:0}
.qa-a p{padding-top:32px;font-size:15px;line-height:1.3;letter-spacing:-0.3px;color:var(--stone);opacity:0;transform:translateY(-6px);filter:blur(4px);transition:opacity .35s ease, transform .5s var(--ease), filter .4s ease}
.qa.open .qa-a{grid-template-rows:1fr}
.qa.open .qa-a p{opacity:1;transform:none;filter:none;transition-delay:.12s}
.faq-leaves{left:auto;right:0;top:0;width:calc(466.717px * var(--kw));height:calc(300.556px * var(--kw));z-index:0;pointer-events:none}
.faq>.dz{position:relative;z-index:1}
.faq-leaves{transform-origin:100% 0}
.faq-leaves>img{height:158.58%;left:-89.68%;top:0;width:203.4%;transform-origin:100% 0;}
@keyframes sway{0%,100%{transform:none}50%{transform:scale(1.03)}}   /* a slow breath that pivots on the corner, so the leaves never lift off the edges */

/* ───────── CTA + footer (Figma 20:5008): one 1388×1320 design row, scaled to the viewport width ───────── */
.end{position:relative;overflow:hidden;margin-top:calc(var(--gap) * -1);padding:var(--gap) var(--gap) calc(113px * var(--kf))}   /* the FAQ's bottom margin is the 12px gutter already */
.end-hb{left:0;bottom:calc(-55.66px * var(--kf));width:calc(1389.875px * var(--kf));height:calc(781.389px * var(--kf));z-index:0;will-change:transform}
.end-hb>img{left:0;top:0;width:100%;height:100%;object-fit:cover}
.end-hf{left:0;bottom:calc(-108.29px * var(--kf));width:100%;height:calc(500.033px * var(--kf));z-index:3;pointer-events:none;will-change:transform}
.end-hf>img{left:0;top:-56.06%;width:100%;height:156.06%;transform:scaleX(-1)}
.cta>.dz,.ft>.dz{width:1364px;margin:0 auto;zoom:var(--kw);--z:var(--kw)}
.cta>.dz{height:620px}
.cta{position:relative;height:calc(620px * var(--kw));z-index:1;border-radius:10px 10px 0 0;overflow:hidden;background:linear-gradient(180.39deg,#1D7BF0 .7%,#7BA6FA 47.93%,#C3C1EA 76.38%,#FED0B2 108.3%)}
.cta-copy{left:59px;top:calc(50% + 13.59px);transform:translateY(-50%);width:610px;padding:0 48px;display:flex;flex-direction:column;gap:40px;align-items:center;color:#fff;text-align:center}
.cta-titles{width:100%;padding:0 32px;display:flex;flex-direction:column;gap:16px;align-items:center;font-family:var(--f-display)}
.cta-eye{font-size:18px;line-height:.7;letter-spacing:-0.54px;white-space:nowrap}
.cta-titles h2{font-size:51.958px;line-height:.8;letter-spacing:-1.0392px;width:100%}
.cta-form{width:415px;display:flex;flex-direction:column;gap:16px;align-items:center}
.cta-form .wl-note{font-size:13px;letter-spacing:-0.26px}
/* hero trees, scaled down, framing the far left and right */
.cta-tl{left:calc(var(--ctax, 0px) * -1);top:calc(620px - 151.6px);width:594px;height:151.6px}
.cta-tr{left:calc(1142px + var(--ctax, 0px));top:calc(620px - 395px);width:269.1px;height:395px}
.cta-tl>img,.cta-tr>img{position:absolute;inset:0;width:100%;height:100%;display:block}
.cta-phone{left:781px;top:62.95px;width:349px;height:724px;perspective:1400px}
.cta-ph-in{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.cta-ph-in .phone-frame{left:-15.01px;top:-.3px;width:383.384px;height:724.265px}
.cta-screen{position:absolute;left:13.02px;top:10.71px;width:268.7px;height:570.7px;transform:scale(1.2033);transform-origin:0 0}
.cta-screen .chat{left:0;top:0;border-radius:38.5px}   /* a touch tighter so it sits inside the scaled-up frame */
/* footer card */
.ft{position:relative;height:var(--fth, 575px);z-index:2;background:#fff;border-left:1.5px solid #E8E7E7;border-right:1.5px solid #E8E7E7}
.ft>.dz{width:var(--ftw, 1364px);padding:74px 57px;display:flex;flex-direction:column;gap:48px}
.ft-top{width:100%;display:flex;align-items:flex-start;justify-content:space-between}
.ft-logo{display:inline-flex;flex-direction:column;align-items:flex-end;gap:3px;color:#000}
.ft-logo b{font-family:var(--f-display);font-weight:400;font-size:32px;line-height:.7;letter-spacing:-0.64px;padding-top:4px}
.ft-logo small{font-size:10px;line-height:1;letter-spacing:-0.2px;color:#9C998D}
.ft-links{flex:1 1 auto;margin-left:229px;display:flex;align-items:flex-start;justify-content:space-between}
.ft-cols{width:612px;display:flex;align-items:flex-start;justify-content:space-between}
.ft-col{display:flex;flex-direction:column;gap:30.17px;align-items:flex-start}
.ft-col h3{font-family:var(--f-display);font-size:15px;line-height:.7;letter-spacing:-0.45px;color:#000;white-space:nowrap}
.ft-col ul{list-style:none;margin:0;padding:0;min-width:86px;white-space:nowrap;display:flex;flex-direction:column;gap:10px}
.ft-col a{position:relative;display:inline-block;font-size:15px;line-height:1.3;letter-spacing:-0.3px;color:#9C998D;transition:color .35s ease, transform .45s var(--ease)}
.ft-col a::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.ft-col a:hover{color:#000;transform:translateX(2px)}
.ft-col a:hover::after{transform:scaleX(1);transform-origin:left}
.totop{position:relative;flex:none;width:24px;height:24px;border-radius:50%}
.totop img{position:absolute;left:1.42px;top:1.355px;width:21.161px;height:21.161px;max-width:none;display:block;transition:transform .5s var(--ease)}
.totop::after{content:"";position:absolute;inset:-6px;border-radius:50%;background:rgba(156,153,141,.14);transform:scale(.4);opacity:0;transition:transform .5s var(--ease), opacity .35s ease}
.totop:hover img{transform:translateY(-3px)}
.totop:hover::after{transform:scale(1);opacity:1}
.ft-bot{position:relative;width:100%;display:flex;align-items:flex-start;justify-content:space-between;padding-top:20px;font-size:13px;line-height:1.3;letter-spacing:-0.26px;color:#9C998D}
.ft-line{position:absolute;left:0;right:0;top:0;height:1.084px;background:rgba(27,27,31,.1);transform-origin:left}
.ft-bot>div{flex:1 1 auto;margin-left:239px}
.ft-bot>div p{width:912.06px}

/* ───────── Type floors: in scaled design boxes, small text never drops below a readable size (narrow desktops / tablets) ───────── */
.usp{font-size:max(15px, calc(13.5px / var(--z, 1)))}
.jr-copy p{font-size:max(15px, calc(14px / var(--z, 1)))}
.bar-l,.cs-amt small{font-size:max(15px, calc(13.5px / var(--z, 1)))}
.pill{font-size:max(13px, calc(12px / var(--z, 1)))}
.calc-sub{font-size:max(17px, calc(15.5px / var(--z, 1)))}
.cc-legal{font-size:max(10.5px, calc(9.5px / var(--z, 1)))}
.qa-q span{font-size:max(18px, calc(15px / var(--z, 1)))}
.qa-a p,.ft-col a{font-size:max(15px, calc(13.5px / var(--z, 1)))}
.ft-bot,.cta-form .wl-note{font-size:max(13px, calc(12px / var(--z, 1)))}


/* ───────── Mobile ───────── */
@media (max-width:820px){
  :root{--gap:6px}
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .hdr-in{grid-template-columns:1fr auto;height:56px;padding:0 8px 0 18px;margin-top:8px}
  .hh-nav{display:none}
  .hh-logo{left:20px;top:22px;transform:none}
  .hh-logo b{font-size:26px}
  .hh-cta{left:auto;right:16px;top:16px}
  .logo b{font-size:26px}
  .logo small{font-size:8.2px;letter-spacing:-0.12px}   /* "By Fygge" tucks in right of the g's descender at this logo size */
  .hdr-cta .pill-btn{padding:0 14px}
  .story{height:520vh}
  .lay{inset:0!important;width:auto!important;height:auto!important}
  .lay>.dz{width:100%!important;height:100%!important;zoom:1!important}
  .hero-copy{left:16px;right:16px;top:96px;transform:none;width:auto;padding:0}
  .hc-wrap{gap:28px}
  .hc-h1{font-size:47px}
  .hc-body{padding:0;font-size:15px}
  .hc-form{width:100%}
  .wl{width:90%}
  .wl:hover{width:90%}
  .wl:focus-within{width:100%}
  .launch,.scrollcue{display:none}
  .steps-copy{left:16px;right:16px;top:40px;transform:none;width:auto;text-align:center;gap:8px}
  .steps-copy p{font-size:15px}
  .steps-copy h2{font-size:30px;width:auto}
  .steps-copy h2 br{display:none}
  .pslot{left:50%;top:50%;margin:-294.5px 0 0 -146.5px;transform:scale(var(--ms,.62))}
  .steps-list{left:16px;right:16px;top:auto;bottom:22px;transform:none;width:auto;padding:0;text-align:center}
  .steps-list{display:grid}
  /* steps share one cell and cross-fade with the site's blur/lift, rather than snapping */
  .steps-list li{display:grid;grid-area:1/1;grid-template-columns:1fr;margin:0!important;opacity:0;filter:blur(8px);transform:translateY(10px);pointer-events:none;transition:opacity .55s ease, filter .55s ease, transform .75s var(--ease)}
  .steps-list li.on{opacity:1;filter:blur(0);transform:none;pointer-events:auto}
  .steps-list li:not(.on):hover{opacity:0}
  .steps-list .ic{display:none}
  .steps-list .more{grid-column:1}
  .peek{display:none}
  /* ── phones: hero ── */
  .trees-l{left:-300px;top:auto;bottom:0;width:440px;height:375px}   /* just a piece of each tree group pokes in */
  .trees-r{left:auto;right:-165px;top:auto;bottom:0;width:340px;height:900px}
  .bird{left:1%;top:calc(var(--hbc, 60%) + 2px);right:auto;bottom:auto;width:46vw;height:40vw}
  .bird>div{width:40vw;height:30vw}
  .m-phone{display:block;position:absolute;z-index:3;pointer-events:none;will-change:transform,opacity}
  .m-phone .hero-phone{left:0;top:0;width:100%;height:100%;display:block;bottom:auto;margin:0}
  .m-phone .hero-phone>.hp-anim{left:0;top:0;width:100%;height:100%}
  /* ── phones: four steps ── */
  .pslot{top:var(--py,50%)}
  .mb{display:block;position:absolute;max-width:none;transition:opacity .4s ease}   /* size + position set in layout(): face in the gap left of the phone, body tucked behind it */
  .mb-angry,#creamMain.angry .mb-song{opacity:0}
  #creamMain.angry .mb-angry{opacity:1}
  .stage.seq-on:not(.seq-done) .mb{opacity:0!important}   /* only once the phone has landed */
  /* phones: the app's screen gradient sits in the mockup, under the fading frames, so the hand-off never dims */
  .pf-screen{display:block;position:absolute;left:13.78px;top:6.9px;width:266.93px;height:574.42px;border-radius:44px;background:var(--grad-chat);opacity:0}
  .tone{display:block;left:50%;top:calc(var(--py) + 294.5px * var(--ms) + 18px);width:248px;padding:0;transform:translateX(-50%)}
  .steps-list{bottom:56px}
  .steps-list h3,.steps-list .more p{max-width:340px;margin-left:auto;margin-right:auto;text-wrap:balance}   /* step copy: two lines max */
  .steps-list h3{font-size:18px}
  .steps-list .more p{font-size:16.5px;line-height:1.35}
  .mpips{display:flex;position:absolute;left:0;right:0;bottom:148px;justify-content:center;gap:7px;opacity:0;transition:opacity .5s ease}   /* fixed: above two lines of step text */
  .stage.has-step .mpips{opacity:1;transition-delay:.35s}   /* only once the first step has appeared */
  .mpips button{width:5px;height:5px;padding:0;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(27,27,31,.14), 0 1px 3px rgba(27,27,31,.12);transition:background .3s ease, transform .4s var(--ease)}
  .mpips button.on{background:var(--ink-3);box-shadow:none;transform:scale(1.15)}
  .jr{height:270vh}
  .jr-copy{width:600px;gap:22px}
  .jr-copy h2{font-size:58px}
  .jr-copy p{width:520px;font-size:28px}
  .jr-h2{width:716px;font-size:58px;top:calc(50% - 475px)}
  .jh-d{display:none}
  .jh-m{display:inline}
  .jr-h2 br{display:none}
  .jr-row{gap:22px}
  .jr-row.r2{top:395px}
  .jr-row.r3{top:490px}
  .usp{height:74px;padding:0 30px 0 24px;gap:20px;font-size:26px;border-width:2px}
  .usp img{width:33px;height:33px}
  .jr-cta{top:calc(50% + 462px)}
  .jr-cta .pill-btn{height:64px;padding:0 36px;font-size:24px}
  .calc{top:4px;left:332px;width:700px}
  .calc{gap:18px}
  .calc-sub{font-size:24px;letter-spacing:-0.5px;margin-bottom:6px}
  .cc{padding:20px;gap:16px;border-radius:26px}
  .cc-sl{padding:12px 30px 24px;border-radius:18px}
  .cs-amt{font-size:88px;margin:0 0 14px;letter-spacing:-3.2px}
  .cs-amt small{font-size:24px;letter-spacing:-0.5px;margin-left:2px}
  .rail{height:36px;width:calc(100% - 52px)}
  .rail-bg,.rail i{top:13px;height:10px}
  .knob{width:50px;height:50px;left:calc(var(--t) * 100% - 25px);top:-7px}   /* big thumb-sized knob */
  .knob::after{left:13.5px;top:13.5px;width:23px;height:23px}
  .rail input{top:-40px;height:116px;left:-30px;right:-30px;width:calc(100% + 60px)}   /* generous touch target */
  .rail-hit{top:-44px;height:124px;left:-34px;right:-34px}
  /* phones: the three outcomes stand side by side as columns, total on top, name + rate underneath */
  .bars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;height:384px;padding:6px 6px 0;align-items:end;grid-template-rows:100%;overflow:hidden}   /* fixed height: the card never grows as the columns do */
  .bar{height:auto;padding:0;border-radius:0;background:none;overflow:visible;flex-direction:column;justify-content:flex-end;align-items:center;gap:14px}
  .bar .tv{order:1;font-size:50px;line-height:1;letter-spacing:-1.8px}
  .bar-fill{order:2;position:relative;left:auto;top:auto;bottom:auto;width:100%;height:calc(var(--v) * 212px + 6px);border-radius:16px;transition:height .6s var(--ease), box-shadow .18s ease, transform .22s var(--ease)}
  .b-none .bar-fill{background:#E9E3D2}
  .b-inv .bar-fill{background:linear-gradient(180deg,#86E27B,#4DDB46)}
  .bar-l{order:3;flex-direction:column;gap:10px;font-size:22px;text-align:center;white-space:normal;height:80px;justify-content:flex-start;align-self:auto;align-items:center;padding:0}
  .bar-l b{padding-left:0}
  .bar-l .pill{order:0}   /* same height in every column, so the bars share one baseline */
  .pill{height:auto;min-height:34px;padding:5px 14px;font-size:17px;box-shadow:none;line-height:1.2;text-align:center;background:#ECEBE7}
  .b-save .pill{background:#FBE6BE}
  .b-inv .pill{background:#C5F1C3}
  .bar-fill{transform-origin:50% 100%}
  .cc-legal{font-size:15px;padding:0 20px;margin-top:-2px}
  .faq{height:auto}
  .faq>.dz{width:auto;height:auto;zoom:1;--z:1;padding:56px 20px 28px}
  .faq-intro,.faq-list{position:static;width:auto}
  .faq-list{margin-top:36px}
  .faq-intro h2{font-size:30px;line-height:.96}
  .faq-eye,.cta-eye{font-size:15px}   /* section headings on phones all match "Four simple steps" / "Every great journey" */
  .qa-q span{font-size:16px}
  .qa-a p{padding-top:20px}
  .qa{padding:14px 16px}
  .faq-leaves{right:-70px;top:-6px;width:300px;height:193px}
  /* CTA + footer: stacked flow layout */
  .end{margin-top:0;padding:0 var(--gap) calc(113px * var(--kf))}
  .cta,.ft{height:auto}
  .cta>.dz,.ft>.dz{width:auto;height:auto;zoom:1;--z:1}
  .cta>.dz{padding:56px 20px 0;display:flex;flex-direction:column;align-items:center}
  .cta-copy{position:relative;left:auto;top:auto;transform:none;width:100%;padding:0;gap:28px}
  .cta-titles{padding:0}
  .cta-titles h2{font-size:30px;line-height:.96}
  .cta-form{width:100%}
  .cta-tl,.cta-tr{display:none}
  .cta-phone{position:relative;left:auto;top:auto;margin:40px auto 0;width:349px;height:420px;zoom:.78}
  .ft>.dz{padding:44px 22px calc(400px * var(--kf) + 24px);gap:36px}
  .ft-top{width:auto;flex-direction:column;gap:36px}
  .ft-links{width:100%}
  .ft-cols{width:auto;flex:1;display:grid;grid-template-columns:1fr 1fr;gap:32px 24px}
  .totop{position:absolute;right:22px;top:44px}
  .ft-bot{flex-direction:column;gap:8px}
  .ft-bot>div,.ft-bot>div p{width:auto}
  .ft-links,.ft-bot>div{margin-left:0}
}
/* ───────── Mobile menu sheet ───────── */
.msheet,.mscrim{display:none}
.menu-btn span{transition:transform .5s var(--ease), opacity .3s ease}
.menu-open .menu-btn span:first-child{transform:translateY(2.75px) rotate(45deg)}
.menu-open .menu-btn span:last-child{transform:translateY(-2.75px) rotate(-45deg)}
@media (max-width:820px){
  .msheet{display:block;position:fixed;left:8px;right:8px;top:calc(env(safe-area-inset-top,0px) + 68px);z-index:49;background:#fff;border-radius:22px;padding:8px 22px 22px;box-shadow:0 24px 60px -24px rgba(13,38,102,.4);clip-path:inset(0 0 100% 0 round 22px);visibility:hidden;transition:clip-path .65s var(--ease), visibility 0s linear .65s}
  .menu-open .msheet{clip-path:inset(0 0 0 0 round 22px);visibility:visible;transition:clip-path .7s var(--ease)}
  .msheet nav{display:flex;flex-direction:column}
  .msheet nav a{display:flex;align-items:center;justify-content:space-between;font-family:var(--f-display);font-size:32px;line-height:1.1;letter-spacing:-.64px;color:var(--ink-2);padding:14px 0 12px;border-bottom:1px solid rgba(27,27,31,.08)}
  .msheet nav a::after{content:"";width:8px;height:8px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);opacity:.35}
  .msheet nav a,.msheet .pill-btn{opacity:0;transform:translateY(16px);transition:opacity .3s ease, transform .5s var(--ease)}
  .menu-open .msheet nav a,.menu-open .msheet .pill-btn{opacity:1;transform:none;transition:opacity .5s ease, transform .8s var(--ease)}
  .menu-open .msheet nav a:nth-child(1){transition-delay:.08s}.menu-open .msheet nav a:nth-child(2){transition-delay:.13s}
  .menu-open .msheet nav a:nth-child(3){transition-delay:.18s}.menu-open .msheet nav a:nth-child(4){transition-delay:.23s}
  .menu-open .msheet .pill-btn{transition-delay:.3s}
  .msheet .pill-btn{margin-top:22px;width:100%;height:50px;font-size:15px}
  .msheet .mnote{margin-top:12px;text-align:center;font-size:12px;color:var(--stone-3)}
  .mscrim{display:block;position:fixed;inset:0;z-index:48;background:rgba(17,28,58,.22);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .5s ease}
  .menu-open .mscrim{opacity:1;pointer-events:auto}
  .menu-open .hdr .hdr-in{transform:none;opacity:1;filter:none;pointer-events:auto}
  .hh-cta{display:none}
  .hh-menu{display:inline-flex;left:auto;right:16px;top:16px;background:rgba(255,255,255,.2);color:#fff}   /* pre-scroll: burger instead of the CTA */
}
@media (prefers-reduced-motion: reduce){
  .steps-list li,.tone-in::before,.qa,.qa-a,.steps-list .more{transition-duration:.01s}
}
/* ───────── Page transitions: the page takes itself apart before the next one loads; the header pill carries straight across ───────── */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s;animation-timing-function:ease}
html.leaving,html.leaving *{cursor:progress}
html.leaving body{pointer-events:none}