/* freeeme — website v3 */
:root{
  --bg:#f5f3ee; --card:#faf8f4; --card-hi:#fffdf9; --ink:#1a1916; --mute:#5f5a52;
  --faint:#a39d93; --line:rgba(26,25,22,.1); --line-hi:rgba(26,25,22,.16);
  --sans:"Inter Tight",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Newsreader",Georgia,serif;
  --pad:clamp(20px,4vw,48px); --max:1200px;
  --col:min(calc(100% - 2 * var(--pad)), var(--max));   /* the one content column, everywhere */
  --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
::selection{background:#1a1916;color:#fff}

.wrap{width:var(--col);margin:0 auto}
.eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);font-weight:500;margin-bottom:24px}
.display{font-size:clamp(44px,7vw,104px);line-height:.96;letter-spacing:-.045em;font-weight:600}
.display.md{font-size:clamp(38px,5.4vw,80px)}
.mega{font-size:clamp(52px,10.4vw,168px);line-height:.9;letter-spacing:-.055em;font-weight:600}
.display em,.mega em{font-weight:400;letter-spacing:-.03em}
.lede{font-size:clamp(17px,1.3vw,20px);color:var(--mute);max-width:30em;margin-top:26px}
.muted{color:var(--mute)}
.sec{padding:clamp(110px,13vw,190px) 0}
.rule{border-top:1px solid var(--line)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;height:52px;padding:0 26px;border-radius:999px;background:#1a1916;color:#fff;font-weight:600;font-size:16px;transition:transform .3s var(--ease),opacity .3s}
.btn:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-hi)}
.btn-ghost:hover{background:rgba(26,25,22,.04)}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}

/* nav: floating frosted-glass pill, same width as the content column */
.nav{position:fixed;top:16px;left:50%;transform:translateX(-50%);width:var(--col);z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:24px;height:60px;padding:0 10px 0 26px;border-radius:999px;
  background:rgba(250,248,244,.68);backdrop-filter:blur(22px) saturate(1.8);-webkit-backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid rgba(26,25,22,.08);box-shadow:0 8px 32px rgba(26,25,22,.08),inset 0 1px 0 rgba(255,255,255,.8)}
.wordmark{font-family:var(--serif);font-weight:600;font-size:25px;letter-spacing:-.03em;line-height:1;color:var(--ink)}
/* the pen swash under the name, same curve as the app's logo */
.wordmark{position:relative;display:inline-block;font-weight:700;padding-bottom:.16em}
.wordmark::after{content:"";position:absolute;left:-.03em;bottom:-.06em;width:3.6em;height:.36em;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20224%2022%27%3E%3Cpath%20d%3D%27M2%2018%20C64%204%20144%202%20222%2013%27%20stroke%3D%27black%27%20stroke-width%3D%273.4%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20224%2022%27%3E%3Cpath%20d%3D%27M2%2018%20C64%204%20144%202%20222%2013%27%20stroke%3D%27black%27%20stroke-width%3D%273.4%27%20fill%3D%27none%27%20stroke-linecap%3D%27round%27/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;pointer-events:none}
.wordmark.lg{font-size:44px}
.nav-links{display:flex;gap:34px;font-size:14px;color:var(--mute);position:absolute;left:50%;transform:translateX(-50%)}
.nav-links a{transition:color .2s}
.nav-links a:hover{color:var(--ink)}
@media (max-width:860px){.nav-links{display:none}.nav{top:12px;height:56px;padding:0 8px 0 20px}}

/* pinned sections */
.pin{height:var(--len);position:relative}
.pin .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}

/* HERO */
.bunch{position:absolute;inset:0;pointer-events:none}
.bunch canvas{position:absolute;inset:0;width:100%;height:100%}
.bunch .hand{position:absolute;filter:grayscale(1) contrast(1.05);will-change:transform}
.bunch .b{position:absolute;will-change:transform;filter:drop-shadow(0 26px 30px rgba(26,25,22,.16))}
.tag{position:absolute;white-space:nowrap;font-size:13px;font-weight:500;padding:7px 12px;border-radius:999px;background:rgba(250,248,244,.86);box-shadow:0 4px 16px rgba(26,25,22,.08);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line-hi);color:var(--ink);opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.tag b{font-weight:600;margin-left:6px}
.tag.on{opacity:1;transform:none}

.phase{position:absolute;opacity:0;transition:opacity .7s var(--ease),transform .7s var(--ease);pointer-events:none}
.phase.on{opacity:1;pointer-events:auto}
/* hero copy starts exactly at the left edge of the content column */
.hero-copy,.hero-total{left:calc((100% - var(--col)) / 2);top:50%;transform:translateY(calc(-50% + 24px));max-width:min(560px,44vw)}
.hero-copy.on,.hero-total.on{transform:translateY(-50%)}
.hero-copy .display{font-size:clamp(48px,6.6vw,100px)}
.hero-total .num{font-size:clamp(64px,9.4vw,148px);font-weight:600;letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums}
.hero-total .sub{font-size:clamp(18px,1.5vw,22px);color:var(--mute);margin:16px 0 28px}
.hero-total .display{font-size:clamp(36px,4.4vw,64px)}
.scroll-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);display:flex;flex-direction:column;align-items:center;gap:10px;transition:opacity .4s}
.scroll-hint span{width:1px;height:36px;background:linear-gradient(var(--faint),transparent);animation:drip 2s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:760px){
  .hero-copy,.hero-total{top:100px;transform:translateY(24px);max-width:none;right:calc((100% - var(--col)) / 2)}
  .hero-copy.on,.hero-total.on{transform:none}
  .hero-copy .display{font-size:clamp(44px,13vw,64px)}
  .hero-copy .lede{font-size:16px;margin-top:16px}
  .ctas{margin-top:22px}
  .hero-total .num{font-size:clamp(56px,17vw,80px)}
  .hero-total .sub{margin:10px 0 14px}
  .scroll-hint{display:none}
}

/* MANIFESTO */
.manifesto-body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);margin-top:clamp(56px,7vw,96px);align-items:start}
.manifesto-body>p{font-size:clamp(20px,1.8vw,26px);line-height:1.38;letter-spacing:-.01em;max-width:22em}
.nevers{list-style:none;border-top:1px solid var(--line)}
.nevers li{padding:22px 0;border-bottom:1px solid var(--line);color:var(--mute);font-size:17px}
.nevers b{color:var(--ink);font-weight:600;margin-right:6px}
@media (max-width:760px){.manifesto-body{grid-template-columns:1fr}}

/* DATE: one row per loan */
.date-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:end}
.date-head .lede{margin-top:0}
.plan{margin-top:clamp(48px,6vw,72px);background:var(--card);border:1px solid var(--line);border-radius:28px;padding:clamp(24px,3.2vw,44px)}
.plan .label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.plan-top{display:grid;grid-template-columns:auto auto 1fr;gap:clamp(28px,4vw,64px);align-items:end;padding-bottom:28px;border-bottom:1px solid var(--line)}
.date-big{white-space:nowrap;font-size:clamp(48px,5.4vw,84px);font-weight:600;letter-spacing:-.05em;line-height:1;margin-top:10px;font-variant-numeric:tabular-nums}
.date-gain{color:var(--mute);margin-top:10px;font-size:16px}
.date-gain b{color:var(--ink);font-weight:600}
.pt-base{padding-bottom:36px}
.pt-base p{font-size:clamp(22px,2vw,30px);font-weight:500;letter-spacing:-.03em;margin-top:8px;color:var(--mute);text-decoration:line-through;text-decoration-color:rgba(26,25,22,.35);font-variant-numeric:tabular-nums}
.slider{justify-self:end;width:100%;max-width:380px;padding-bottom:36px}
.slider label{font-size:14px;color:var(--mute)}
.slider-row{display:flex;align-items:center;gap:18px;margin-top:12px}
.slider output{font-variant-numeric:tabular-nums;font-weight:600;min-width:72px;text-align:right}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:4px;border-radius:4px;background:linear-gradient(90deg,#1a1916 var(--p,0%),rgba(26,25,22,.12) var(--p,0%));outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#1a1916;box-shadow:0 0 0 6px rgba(26,25,22,.08);cursor:grab}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:#1a1916;cursor:grab}

.rows{margin-top:8px}
.row,.axis{display:grid;grid-template-columns:230px 1fr 210px;gap:28px;align-items:center}
.row{padding:16px 0;border-bottom:1px solid var(--line)}
.r-name{display:flex;align-items:center;gap:14px}
.r-name img{width:38px;height:38px;object-fit:contain;flex:none;filter:drop-shadow(0 4px 6px rgba(26,25,22,.12))}
.r-name b{display:block;font-weight:600;font-size:16px;letter-spacing:-.01em}
.r-name small,.r-meta small{display:block;color:var(--mute);font-size:13px;margin-top:2px}
.r-track{position:relative;height:12px;border-radius:6px;background:rgba(26,25,22,.05)}
.r-track i{position:absolute;left:0;top:0;bottom:0;border-radius:6px}
.r-track .ghost{background:repeating-linear-gradient(-45deg,rgba(26,25,22,.16) 0 3px,transparent 3px 7px)}
.r-track .bar{background:var(--c);width:0;transition:width .7s var(--ease);box-shadow:0 2px 8px rgba(26,25,22,.1)}
.r-meta b{display:block;font-weight:600;font-size:16px;font-variant-numeric:tabular-nums}
.axis .ax{grid-column:2;position:relative;height:34px}
.axis .yr{position:absolute;top:12px;font-size:12px;color:var(--faint);transform:translateX(-50%);white-space:nowrap}
.axis .yr:first-child{transform:none}
.axis .yr::before{content:"";position:absolute;left:50%;top:-12px;width:1px;height:6px;background:var(--line-hi)}
.axis .yr:first-child::before{left:0}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;margin-top:20px;font-size:13px;color:var(--mute)}
.legend i{display:inline-block;width:22px;height:8px;border-radius:4px;margin-right:8px;vertical-align:middle}
.lg-solid{background:#1a1916}
.lg-ghost{background:repeating-linear-gradient(-45deg,rgba(26,25,22,.3) 0 3px,transparent 3px 7px)}
.legend .footnote{margin:0 0 0 auto;color:var(--faint);font-size:12px}
@media (max-width:980px){
  .plan-top{grid-template-columns:auto 1fr}
  .slider{grid-column:1/-1;justify-self:start;max-width:none;padding-bottom:0}
}
@media (max-width:760px){
  .date-head{grid-template-columns:1fr;gap:20px}
  .plan-top{grid-template-columns:1fr;gap:18px}
  .pt-base,.slider{padding-bottom:0}
  .row{grid-template-columns:1fr auto;gap:12px 16px;padding:16px 0}
  .r-track{grid-column:1/-1;grid-row:2}
  .r-meta{text-align:right}
  .r-meta small{max-width:150px;margin-left:auto}
  .axis{grid-template-columns:1fr}
  .axis .ax{grid-column:1}
  .legend .footnote{margin:0;width:100%}
}

/* FEATURES: 3-column bento, every card the same anatomy (art on top, copy below) */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(56px,6vw,80px)}
.card{position:relative;border-radius:28px;background:var(--card);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column}
.card .art{position:relative;height:300px;display:grid;place-items:center;overflow:hidden}
.card-copy{padding:0 32px 34px;margin-top:auto}
.card h3{font-size:clamp(22px,1.9vw,26px);letter-spacing:-.025em;font-weight:600;line-height:1.15}
.card p{color:var(--mute);margin-top:10px;font-size:16px;max-width:30em}
.c-letgo{grid-column:span 2}
.c-letgo .art,.c-jar .art{height:380px}
@media (max-width:980px){.bento{grid-template-columns:1fr 1fr}.c-letgo{grid-column:span 2}}
@media (max-width:640px){.bento{grid-template-columns:1fr}.c-letgo{grid-column:auto}.card .art,.c-letgo .art,.c-jar .art{height:280px}}
/* let it go */
.float-b{position:absolute;left:50%;bottom:-4%;width:118px;transform:translateX(-50%);animation:rise 6s var(--ease) infinite}
.float-b img{filter:drop-shadow(0 22px 26px rgba(26,25,22,.16))}
.float-b i{display:block;width:1px;height:220px;margin:0 auto;background:linear-gradient(rgba(26,25,22,.35),transparent)}
.gstar{position:absolute;left:50%;top:12%;width:80px;transform:translateX(-50%) scale(0);animation:pop 6s var(--ease) infinite;filter:drop-shadow(0 10px 24px rgba(233,185,73,.4))}
@keyframes rise{0%{transform:translate(-50%,0) rotate(-3deg);opacity:0}8%{opacity:1}55%{transform:translate(-46%,-80%) rotate(4deg);opacity:1}70%{transform:translate(-50%,-115%) scale(.6);opacity:0}100%{opacity:0}}
@keyframes pop{0%,60%{transform:translateX(-50%) scale(0);opacity:0}70%{transform:translateX(-50%) scale(1.15);opacity:1}78%,92%{transform:translateX(-50%) scale(1);opacity:1}100%{transform:translateX(-50%) scale(1);opacity:0}}
/* jar */
.jar{position:relative;width:180px;aspect-ratio:772/1100;margin-top:40px}
.jar img{position:absolute}
.j-back,.j-front{inset:0;width:100%;height:100%}
.j-cap{width:94%;left:3%;top:-6%}
.coin{width:34%;left:33%;top:-30%;opacity:0}
.in .coin{animation:drop 3.6s var(--ease) infinite}
.coin.k2{animation-delay:1.2s!important}.coin.k3{animation-delay:2.4s!important}
@keyframes drop{0%{top:-40%;opacity:0;transform:rotate(0)}10%{opacity:1}45%{top:62%;opacity:1;transform:rotate(200deg)}55%,80%{top:58%;opacity:1}100%{top:58%;opacity:0}}
/* family */
.family-art{display:flex!important;flex-direction:column;justify-content:center;gap:10px;padding:0 28px}
.mrow{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:var(--card-hi);border:1px solid var(--line);font-size:15px}
.mrow .dot{width:10px;height:10px;border-radius:50%;background:var(--c)}
.pill{margin-left:auto;font-size:12px;padding:5px 11px;border-radius:999px;border:1px solid var(--line-hi);color:var(--mute)}
.pill.on{background:#1a1916;border-color:#1a1916;color:#fff;font-weight:600}
/* lock screen */
.lock-art{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:0 28px}
.lock-time{font-size:56px;font-weight:300;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.notif{width:100%;max-width:300px;padding:14px 16px;border-radius:20px;background:var(--card-hi);border:1px solid var(--line);box-shadow:0 8px 24px rgba(26,25,22,.06);text-align:left}
.notif .app{font-size:12px;font-weight:600}
.notif .now{float:right;font-size:12px;color:var(--faint)}
.notif p{margin-top:4px;font-size:15px;color:var(--ink)}
/* letter */
.envelope{position:relative;width:220px;aspect-ratio:1.55;border-radius:10px;background:linear-gradient(160deg,#ece6da,#d6cdbb);box-shadow:0 24px 44px rgba(26,25,22,.16);overflow:hidden;transform:rotate(-4deg)}
.envelope::before{content:"";position:absolute;left:0;right:0;top:0;height:62%;background:linear-gradient(160deg,#e2dbcc,#cbc0aa);clip-path:polygon(0 0,100% 0,50% 100%)}
.seal{position:absolute;left:50%;top:62%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#3a3a3a,#0d0d0d);color:#fff;font-family:var(--serif);font-style:italic;font-size:22px;display:grid;place-items:center;box-shadow:0 4px 10px rgba(0,0,0,.35)}

/* DREAMS */
.marquee{margin-top:clamp(48px,6vw,80px);display:flex;flex-direction:column;gap:22px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.track{display:flex;gap:22px;width:max-content;animation:slide 60s linear infinite}
.track.rev{animation-direction:reverse;animation-duration:70s}
@keyframes slide{to{transform:translateX(-50%)}}
.stk{position:relative;width:clamp(120px,13vw,180px);aspect-ratio:1;flex:none}
.stk img{position:absolute;inset:0;width:100%;height:100%;transition:opacity 1.2s var(--ease)}
.stk .c{opacity:0}
.stk.lit .c{opacity:1}
.dreams-note{margin-top:48px;color:var(--mute)}

/* WHY NOW */
.whynow-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:end}
.stat{font-size:clamp(96px,15vw,224px);font-weight:600;letter-spacing:-.06em;line-height:.85;font-variant-numeric:tabular-nums}
.stat small{font-size:.42em;letter-spacing:-.02em;color:var(--mute);margin-left:.04em}
.whynow-copy .big{font-size:clamp(24px,2.3vw,34px);line-height:1.25;letter-spacing:-.02em}
.whynow-copy .big b{font-weight:600}
.whynow-copy .muted{margin-top:20px;font-size:18px}
.source{margin-top:28px;font-size:12px;color:var(--faint)}
@media (max-width:760px){.whynow-grid{grid-template-columns:1fr}}

/* TRUST */
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(56px,6vw,80px);border-top:1px solid var(--line)}
.t{padding:32px 28px 0 0;border-right:1px solid var(--line);margin-right:28px}
.t:last-child{border-right:0;margin-right:0}
.ti{font-size:12px;color:var(--faint);letter-spacing:.16em}
.t h3{font-size:20px;letter-spacing:-.02em;margin:18px 0 10px;font-weight:600}
.t p{color:var(--mute);font-size:15px;padding-bottom:20px}
@media (max-width:900px){.trust-grid{grid-template-columns:1fr 1fr}.t:nth-child(2){border-right:0;margin-right:0}}
@media (max-width:560px){.trust-grid{grid-template-columns:1fr}.t{border-right:0;margin-right:0;border-bottom:1px solid var(--line)}}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(32px,6vw,96px)}
.faq-list{border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;font-size:clamp(18px,1.5vw,21px);font-weight:500;letter-spacing:-.01em;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:300;color:var(--mute);transition:transform .3s var(--ease)}
details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details p{color:var(--mute);padding:0 44px 26px 0;max-width:40em}
@media (max-width:860px){.faq-grid{grid-template-columns:1fr}}

/* GET THE APP */
.cta{position:relative;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;border-radius:36px;border:1px solid var(--line);background:var(--card);overflow:hidden;min-height:540px}
.cta-copy{padding:clamp(36px,5vw,72px)}
.cta-copy .display{font-size:clamp(40px,5vw,76px)}
.stores{display:flex;gap:12px;margin-top:40px;flex-wrap:wrap}
.store{display:inline-flex;align-items:center;gap:12px;height:60px;padding:0 22px 0 18px;border-radius:16px;background:#1a1916;color:#fff;transition:transform .3s var(--ease)}
.store svg{width:24px;height:24px;flex:none}
.store span{display:flex;flex-direction:column;line-height:1.1;font-weight:600;font-size:18px;letter-spacing:-.01em}
.store small{font-size:11px;font-weight:500;color:rgba(255,255,255,.65);margin-bottom:2px}
.store:hover{transform:translateY(-2px)}
.store.soon{background:var(--card-hi);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-hi)}
.store.soon small{color:var(--mute)}
.store.soon:hover{transform:none}
.cta-note{margin-top:18px;font-size:13px;color:var(--faint)}
.cta-art{position:relative;height:100%;min-height:540px;border-left:1px solid var(--line)}
.cta-art .star{position:absolute;left:50%;top:50%;width:150px;transform:translate(-50%,-50%);filter:drop-shadow(0 16px 40px rgba(233,185,73,.4));animation:bob 5s ease-in-out infinite}
.cta-art .float{position:absolute;bottom:-30%;width:var(--w);left:var(--x);opacity:0;filter:drop-shadow(0 20px 26px rgba(26,25,22,.16))}
.cta.in .cta-art .float{animation:away 9s linear var(--d) infinite}
@keyframes away{0%{opacity:0;transform:translateY(0) rotate(-4deg)}10%{opacity:.85}80%{opacity:.85}100%{opacity:0;transform:translateY(-860px) rotate(6deg)}}
@keyframes bob{50%{transform:translate(-50%,calc(-50% - 10px))}}
@media (max-width:860px){.cta{grid-template-columns:1fr}.cta-art{min-height:320px;border-left:0;border-top:1px solid var(--line)}}

/* FOOTER */
.footer{padding:80px 0 40px;border-top:1px solid var(--line)}
.foot-grid{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap}
.foot-grid .muted{margin-top:16px}
.foot-links{display:grid;grid-template-columns:repeat(2,auto);gap:12px 56px;font-size:15px;color:var(--mute);align-content:start}
.foot-links a:hover{color:var(--ink)}
.foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:64px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--faint)}

/* reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal,.phase,.tag{transition:none}
  .track,.float-b,.gstar,.coin,.cta-art .float,.cta-art .star{animation:none!important}
  .gstar{transform:translateX(-50%) scale(1)}
  html{scroll-behavior:auto}
}

@media (max-width:760px){br.dk{display:none}}

/* IMAGE HERO */
.hero{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;background:#010e25;color:#fff}
.hero-bg,.hero-bg img{position:absolute;inset:0;width:100%;height:100%}
.hero-bg img{inset:auto;left:28vw;top:50%;width:max(76vw,177.6vh);height:auto;max-width:none;object-fit:fill;transform:translateY(-50%);animation:heroIn 2.4s var(--ease) both;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24%);mask-image:linear-gradient(90deg,transparent 0,#000 24%)}
@keyframes heroIn{from{transform:translateY(-50%) scale(1.06);opacity:0}to{transform:translateY(-50%) scale(1);opacity:1}}
.hero-shade{position:absolute;inset:0;background:linear-gradient(0deg,#010e25 0%,rgba(1,14,37,.5) 14%,transparent 34%)}
.hero-inner{position:relative;z-index:2;height:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:40px;padding-bottom:clamp(56px,9vh,104px)}
.hero-main{max-width:520px;animation:rise-in 1.2s var(--ease) .5s both}
@keyframes rise-in{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.hero .eyebrow{color:rgba(255,255,255,.6)}
.hero .display{font-size:clamp(52px,6vw,92px);color:#fff}
.hero .display em{color:#f3e2bf}
.hero .lede{color:rgba(255,255,255,.74)}
.hero-side{font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.7vw,26px);line-height:1.25;color:rgba(255,255,255,.6);text-align:right;animation:rise-in 1.2s var(--ease) .9s both}
.btn-light{background:#fff;color:#1a1916}
.btn-ghost-light{background:rgba(255,255,255,.06);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.btn-ghost-light:hover{background:rgba(255,255,255,.14)}
.hero .scroll-hint{color:rgba(255,255,255,.45);z-index:2}
.hero .scroll-hint span{background:linear-gradient(rgba(255,255,255,.5),transparent)}
/* nav over the dark hero */
.nav{transition:background .4s,border-color .4s,box-shadow .4s}
.nav.dark{background:rgba(8,20,46,.34);border-color:rgba(255,255,255,.12);box-shadow:0 8px 32px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.06)}
.nav.dark .wordmark{color:#fff}
.nav.dark .nav-links{color:rgba(255,255,255,.7)}
.nav.dark .nav-links a:hover{color:#fff}
.nav.dark .btn{background:#fff;color:#1a1916}
@media (max-width:860px){.hero-side{display:none}}
@media (max-width:760px){
  .hero-bg img{inset:auto;width:294vw;height:auto;max-width:none;width:200vw;left:-48vw;top:0;object-fit:fill;transform:none;animation:none;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
  .hero-shade{background:linear-gradient(0deg,rgba(6,16,38,.92) 0%,rgba(6,16,38,.55) 40%,transparent 62%)}
  .hero .display{font-size:clamp(44px,13vw,64px)}
  .hero .lede{font-size:16px;margin-top:16px}
  .hero .scroll-hint{display:none}
}
/* the weight section: copy vertically centred on the left */


/* hero copy v2 */
.hero-main{max-width:700px}
.hero .display{font-size:clamp(46px,5.8vw,92px);line-height:.98;max-width:none}
.hero .display em{color:#f3e2bf}
.hero .lede{max-width:30em}
.hero-sub{font-size:clamp(28px,2.9vw,44px);line-height:1.1;letter-spacing:-.02em;color:#f3e2bf;margin-top:10px}
.hero-sub em{font-weight:400}
.hero .lede{max-width:34em;margin-top:22px}
.hero .ctas{margin-top:30px}
.hero-trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px;font-size:13px;color:rgba(255,255,255,.62)}
.hero-trust li{display:flex;align-items:center;gap:8px}
.hero-trust li::before{content:"";width:5px;height:5px;border-radius:50%;background:#f3e2bf;opacity:.8}
.mission{font-size:clamp(44px,7vw,112px);max-width:12em}
@media (max-width:760px){
  .hero-sub{font-size:clamp(24px,7vw,32px)}
  .hero-trust{gap:6px 16px;font-size:12px;margin-top:20px}
}
@media (max-width:760px){
  .hero{height:auto;min-height:0}
  .hero-bg{position:relative;display:block;height:112vw;overflow:hidden}
  .hero-shade{display:none}
  .hero-inner{height:auto;margin-top:-8vw;padding-bottom:56px}
}

/* night to dawn: the hero fades into the paper */
.dawn{height:clamp(240px,42vh,440px);margin-top:-1px;background:linear-gradient(180deg,#010e25 0%,#061a3a 14%,#1a2d50 30%,#4a5874 46%,#8f9099 62%,#c9c3b7 80%,#e9e5dd 92%,#f5f3ee 100%)}
@media (max-width:760px){.hero .display{font-size:clamp(42px,12vw,56px)}}

/* MANIFESTO PAGE */
.hero-short{height:78vh;height:78svh;min-height:560px}
.hero-short .hero-main{max-width:760px}
.hero-short .display{font-size:clamp(40px,5vw,80px);max-width:12em}
.m-open{padding:clamp(40px,6vw,80px) 0 clamp(100px,12vw,170px)}
.m-narrow{max-width:820px}
.m-lead{font-family:var(--serif);font-style:italic;font-size:clamp(30px,3.4vw,52px);line-height:1.12;letter-spacing:-.02em;margin-bottom:40px}
.m-body{font-size:clamp(18px,1.45vw,22px);line-height:1.6;color:#3d3a34;margin-top:22px}
.m-body em{color:var(--ink)}
.m-list{list-style:none;margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.m-list li{display:grid;grid-template-columns:72px 1fr;gap:12px;padding:36px 40px 36px 0;border-bottom:1px solid var(--line)}
.m-list li:nth-child(odd){border-right:1px solid var(--line);margin-right:0}
.m-list li:nth-child(even){padding-left:40px;padding-right:0}
.m-num{font-family:var(--serif);font-style:italic;font-size:32px;line-height:1;color:var(--faint)}
.m-list h3{font-size:clamp(21px,1.8vw,26px);font-weight:600;letter-spacing:-.02em;line-height:1.15}
.m-list p{color:var(--mute);margin-top:10px;font-size:16px;max-width:30em}
.m-never-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(32px,6vw,96px);align-items:start}
.m-nevers li{font-size:17px}
.m-sign{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--ink)}
.m-sign span{font-family:var(--sans);font-style:normal;font-size:13px;color:var(--faint);letter-spacing:.14em;text-transform:uppercase}
.nav-links a[aria-current]{color:inherit;font-weight:600}
@media (max-width:860px){
  .m-list{grid-template-columns:1fr}
  .m-list li,.m-list li:nth-child(even){padding:28px 0;border-right:0}
  .m-list li:nth-child(odd){border-right:0}
  .m-never-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .hero-short{height:auto;min-height:0}
  .m-list li{grid-template-columns:52px 1fr}
  .m-num{font-size:26px}
}
.m-link a{color:var(--ink);font-weight:600;border-bottom:1px solid var(--line-hi);padding-bottom:2px}
.m-link a:hover{border-color:var(--ink)}



/* ================= COLLAGE HERO (editorial) =================
   Every piece is placed in % of a 1200x640 board, and type uses cqw,
   so the whole composition scales as one picture. */
.chero{padding:clamp(110px,14vh,150px) 0 clamp(60px,8vh,96px);background:var(--bg);overflow:hidden}
.collage{position:relative;width:var(--col);margin:0 auto;aspect-ratio:1200/640;container-type:inline-size}
.c-art,.c-copy{position:absolute;inset:0}
.c-art>*{position:absolute;margin:0}
.c-block{left:0;top:36%;width:10%;height:44%;background:#f2c94c}
.c-tile{overflow:hidden;background:#e7e2d7}
.c-tile img{width:100%;height:100%;object-fit:cover;display:block}
.c-a{left:3.5%;top:60%;width:26%;aspect-ratio:3/2}
.c-marks{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:#1a1916;stroke-width:1.1;opacity:.75}
.c-contour{left:60%;top:0;width:20%;opacity:.9}
.c-b{left:69%;top:19%;width:17.5%;aspect-ratio:1}
.c-c{left:81%;top:45%;width:12%;height:46%;border-radius:999px}
.c-star{left:90.5%;top:8%;width:6.5%;filter:drop-shadow(0 6px 10px rgba(26,25,22,.12))}
.c-months{left:68%;top:80%;width:11%;height:6%;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;gap:12% 0}
.c-months i{background:#5a2a14}
.c-months i:nth-child(2n){background:transparent;border-top:2px solid #5a2a14;border-bottom:2px solid #5a2a14}
.c-months i:nth-child(n+5):nth-child(odd){background:transparent;border-top:2px solid #5a2a14;border-bottom:2px solid #5a2a14}
.c-months i:nth-child(n+5):nth-child(even){background:#5a2a14;border:0}
.c-path{left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.c-path path{fill:none;stroke:#9fe0c5;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:url(#brush);opacity:0}
.c-path .p-m{display:none}
@keyframes draw{to{stroke-dashoffset:0}}

.c-copy>*{position:absolute;margin:0}
.c-eyebrow{left:9.4%;top:6%;font-size:max(11px,.92cqw);letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.c-h1{left:9%;top:13%;font-family:var(--serif);font-weight:500;font-size:7cqw;line-height:.98;letter-spacing:-.025em;color:var(--ink)}
.c-h1 span,.c-h1 em{display:block}
.c-h1 .l2{font-style:italic;font-weight:400;margin-left:.75em}
.c-h1 .l3{margin-left:2.5em}
.c-mission{left:45%;top:3%;width:13.5%;font-family:var(--serif);font-size:max(13px,1.12cqw);line-height:1.45;text-align:center;color:var(--ink)}
.c-pills{left:37%;top:67%;display:flex;align-items:center;font-family:var(--serif);font-size:max(12px,1.08cqw)}
.c-pills span{padding:.45em 1.1em;border:1px solid var(--ink);border-radius:999px;white-space:nowrap;background:var(--bg)}
.c-pills i{width:1.4em;height:.7em;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);margin:0 -1px}
.c-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:clamp(24px,3vw,40px)}
.c-foot .ctas{margin-top:0}
.c-trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;color:var(--mute)}
.c-trust li{display:flex;align-items:center;gap:8px}
.c-trust li::before{content:"";width:5px;height:5px;border-radius:50%;background:#9fe0c5;box-shadow:0 0 0 1px rgba(26,25,22,.25)}

/* entrance */
.c-art>*:not(.c-path),.c-copy>*{opacity:0;animation:cin .9s var(--ease) forwards}
.c-copy .c-h1{animation-delay:.1s}.c-copy .c-eyebrow{animation-delay:0s}
.c-block{animation-delay:.25s!important}.c-a{animation-delay:.4s!important}.c-contour{animation-delay:.55s!important}
.c-b{animation-delay:.65s!important}.c-c{animation-delay:.8s!important}.c-months{animation-delay:.9s!important}
.c-mission{animation-delay:.5s!important}.c-pills{animation-delay:.7s!important}
.c-star{animation:none!important;opacity:0;transform:scale(.4) rotate(-40deg);transition:opacity .5s var(--ease),transform .9s cubic-bezier(.3,1.6,.5,1)}
.c-star.pop{opacity:1;transform:none}
.c-balloon{width:5.6%;left:0;top:0;opacity:0;animation:none!important;will-change:transform;filter:drop-shadow(0 8px 10px rgba(26,25,22,.18));pointer-events:none;z-index:3}
.c-lab{position:absolute;font-family:var(--serif);font-size:max(9px,.82cqw);line-height:1;padding:.35em .7em;border:1px solid #1a1916;border-radius:999px;background:#f5f3ee;color:#1a1916;white-space:nowrap}
@keyframes cin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes spin-in{from{transform:scale(.4) rotate(-40deg)}to{transform:none}}
@media (prefers-reduced-motion:reduce){
  .c-art>*,.c-copy>*{opacity:1!important;animation:none!important}
  .c-path path{opacity:1}
  .c-balloon{display:none}
  .c-star{opacity:1;transform:none}
}

/* phones: words first, then the collage as its own picture */
@media (max-width:760px){
  .chero{padding-top:96px;display:flex;flex-direction:column}
  .collage{display:contents}
  .c-copy{position:static;order:1;width:var(--col);margin:0 auto}
  .c-foot{order:2}
  .c-copy>*{position:static}
  .c-eyebrow{font-size:11px;margin-bottom:16px}
  .c-h1{font-size:clamp(46px,14vw,64px)}
  .c-h1 .l2{margin-left:.5em}.c-h1 .l3{margin-left:1.6em}
  .c-mission{width:auto;text-align:left;font-size:17px;margin-top:22px;max-width:30em}
  .c-pills{margin-top:22px;font-size:13px;flex-wrap:nowrap}
  .c-pills span{padding:.45em .9em}
  .c-pills i{width:.9em}
  .c-art{position:relative;inset:auto;order:3;width:var(--col);margin:48px auto 0;height:104vw}
  .c-block{left:0;top:3%;width:20%;height:30%}
  .c-a{left:5%;top:7%;width:56%}
  .c-contour{left:58%;top:0;width:42%}
  .c-b{left:46%;top:36%;width:42%}
  .c-c{left:8%;top:52%;width:28%;height:40%}
  .c-star{left:84%;top:30%;width:13%}
  .c-balloon{width:12%}
  .c-lab{font-size:9px}
  .c-months{left:46%;top:84%;width:26%;height:5%}
  .c-path .p-d{display:none}.c-path .p-m{display:block}
  .c-foot{flex-direction:column;align-items:flex-start}
}

/* footer social icons */
.social{list-style:none;display:flex;gap:10px;margin-top:22px}
.social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-hi);color:var(--ink);transition:background .25s,color .25s,border-color .25s,transform .25s var(--ease)}
.social a:hover{background:var(--ink);border-color:var(--ink);color:var(--bg);transform:translateY(-2px)}
.social svg{width:17px;height:17px;fill:currentColor}

/* ================= PHOTO HERO (smiley balloon in the field) ================= */
.phero{position:relative;height:100vh;height:100svh;min-height:680px;overflow:hidden;background:#1f5f82;color:#fff}
.phero-bg,.phero-bg img{position:absolute;inset:0;width:100%;height:100%}
.phero-bg img{object-fit:cover;object-position:72% 55%;animation:pheroIn 2.2s var(--ease) both}
@keyframes pheroIn{from{transform:scale(1.06);opacity:0}to{transform:none;opacity:1}}
.phero-fade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(14,58,86,.42) 0%,rgba(14,58,86,.18) 38%,transparent 58%),
  linear-gradient(180deg,transparent 84%,rgba(245,243,238,.28) 94%,rgba(245,243,238,.85) 100%)}
.phero-inner{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;padding-bottom:12vh}
.phero-inner>*{max-width:600px;animation:rise-in 1.1s var(--ease) both}
.phero .eyebrow{color:rgba(255,255,255,.78);animation-delay:.35s}
.phero-h1{font-size:clamp(48px,6vw,96px);line-height:.98;letter-spacing:-.045em;font-weight:600;animation-delay:.45s;text-shadow:0 2px 30px rgba(10,40,60,.18)}
.phero-h1 em{font-weight:400;letter-spacing:-.03em;color:#f7e3a1}
.phero-lede{font-size:clamp(17px,1.3vw,20px);line-height:1.55;color:rgba(255,255,255,.88);margin-top:24px;max-width:31em;animation-delay:.6s}
.phero .ctas{animation-delay:.75s}
.phero-trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px;font-size:13px;color:rgba(255,255,255,.8);animation-delay:.9s}
.phero-trust li{display:flex;align-items:center;gap:8px}
.phero-trust li::before{content:"";width:5px;height:5px;border-radius:50%;background:#f7e3a1}
.phero .btn-light{background:#fff;color:#1a1916}
.phero .btn-ghost-light{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.phero .btn-ghost-light:hover{background:rgba(255,255,255,.22)}
/* phones: the picture on top, the words below on paper */
@media (max-width:760px){
  .phero{height:auto;min-height:0;background:var(--bg);color:var(--ink)}
  .phero-bg{position:relative;display:block;height:112vw;overflow:hidden}
  .phero-bg img{object-position:78% 50%}
  .phero-fade{background:linear-gradient(180deg,transparent 0%,transparent calc(112vw - 30vw),#f5f3ee 112vw,#f5f3ee 100%)}
  .phero-inner{height:auto;margin-top:-6vw;padding-bottom:48px}
  .phero .eyebrow{color:var(--faint)}
  .phero-h1{font-size:clamp(42px,12vw,56px);text-shadow:none}
  .phero-h1 em{color:#c2410c}
  .phero-lede{color:var(--mute);font-size:17px}
  .phero .btn-light{background:#1a1916;color:#fff}
  .phero .btn-ghost-light{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-hi)}
  .phero-trust{color:var(--mute)}
}
.phero-inner>.phero-h1{max-width:none}

/* hover: the photo drifts with the cursor; a warm glassy light follows it over the figure */
.phero-bg{transform:scale(1.04) translate3d(var(--px,0px),var(--py,0px),0);transition:transform .9s cubic-bezier(.2,.7,.1,1)}
.phero.near .phero-bg{transform:scale(1.07) translate3d(var(--px,0px),var(--py,0px),0)}
.phero-glow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);mix-blend-mode:soft-light;
  background:radial-gradient(280px circle at var(--mx,70%) var(--my,40%),rgba(255,244,214,.75),rgba(255,244,214,.15) 45%,transparent 70%)}
.phero.near .phero-glow{opacity:1}
.phero-inner{transform:translate3d(calc(var(--px,0px) * -.35),calc(var(--py,0px) * -.35),0);transition:transform .9s cubic-bezier(.2,.7,.1,1)}
@media (max-width:760px),(hover:none),(prefers-reduced-motion:reduce){.phero-bg,.phero.near .phero-bg{transform:none}.phero-glow{display:none}.phero-inner{transform:none}}

/* light version: soft pink-grey studio wall, figure in the orange jacket on the right */
.phero--light{background:#ccb8b8;color:var(--ink)}
.phero--light .phero-bg img{inset:auto;right:0;top:3%;bottom:auto;width:auto;height:97%;max-width:none;object-fit:fill;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%),linear-gradient(180deg,transparent 0,#000 12%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 18%),linear-gradient(180deg,transparent 0,#000 12%);mask-composite:intersect}
.phero--light .phero-h1{font-size:clamp(46px,5.4vw,86px)}
.phero--light .phero-inner{justify-content:flex-end;padding-bottom:clamp(64px,13vh,130px)}
.phero--light .phero-fade{background:linear-gradient(180deg,transparent 88%,rgba(245,243,238,.6) 97%,#f5f3ee 100%)}
.phero--light .eyebrow{color:rgba(26,25,22,.55)}
.phero--light .phero-h1{color:var(--ink);text-shadow:none}
.phero--light .phero-h1 em{color:#e8590c}
.phero--light .phero-lede{color:#3d3a34}
.phero--light .phero-trust{color:rgba(26,25,22,.62)}
.phero--light .phero-trust li::before{background:#e8590c}
.phero--light .btn-ghost{background:rgba(255,255,255,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.phero--light .phero-glow{mix-blend-mode:soft-light;background:radial-gradient(300px circle at var(--mx,70%) var(--my,40%),rgba(255,236,214,.85),rgba(255,236,214,.2) 45%,transparent 70%)}
@media (max-width:760px){
  .phero--light{background:var(--bg)}
  .phero--light .phero-bg{background:#ccb8b8}
  .phero--light .phero-bg img{inset:0;width:100%;height:100%;object-fit:cover;object-position:74% 30%;-webkit-mask-image:none;mask-image:none}
  .phero--light .phero-fade{background:linear-gradient(180deg,transparent calc(112vw - 14vw),#f5f3ee 112vw,#f5f3ee 100%)}
  .phero--light .phero-inner{margin-top:20px}
  .phero--light .phero-h1{font-size:clamp(42px,12vw,56px)}
  .phero--light .phero-h1 em{color:#e8590c}
}
@media (max-width:760px){.phero--light .phero-inner{justify-content:flex-start;padding-bottom:48px}}
@media (min-width:761px) and (max-width:1300px){.phero--light .phero-bg img{right:-11vw}}
@media (min-width:761px) and (max-width:1100px){.phero--light .phero-bg img{right:-20vw}.phero--light .phero-trust{max-width:420px}}

/* blue version of the balloon-face portrait */
.phero--light{background:#c3cfe1}
.phero--light .phero-h1 em{color:#1f47d6}
.phero--light .phero-trust li::before{background:#1f47d6}
.phero--light .phero-glow{background:radial-gradient(300px circle at var(--mx,70%) var(--my,40%),rgba(225,236,255,.85),rgba(225,236,255,.2) 45%,transparent 70%)}
@media (max-width:760px){.phero--light .phero-bg{background:#c3cfe1}.phero--light .phero-h1 em{color:#1f47d6}}

/* meadow version: blue sky on the left for the words, the smiling balloon with flowers on the right */
.phero--meadow{background:#1f6187}
.phero--meadow .phero-bg img{object-position:74% 50%}
.phero--meadow .phero-fade{background:
  linear-gradient(90deg,rgba(16,62,92,.38) 0%,rgba(16,62,92,.14) 40%,transparent 60%),
  linear-gradient(180deg,transparent 78%,rgba(245,243,238,.35) 90%,rgba(245,243,238,.9) 98%,#f5f3ee 100%)}
.phero--meadow .phero-h1 em{color:#ffe7a0}
.phero--meadow .phero-trust li::before{background:#ffe7a0}
.phero--meadow .phero-glow{background:radial-gradient(300px circle at var(--mx,70%) var(--my,40%),rgba(255,240,190,.8),rgba(255,240,190,.18) 45%,transparent 70%)}
@media (max-width:760px){
  .phero--meadow{background:var(--bg)}
  .phero--meadow .phero-bg{background:#1f6187}
  .phero--meadow .phero-bg img{object-position:77% 40%}
  .phero--meadow .phero-fade{background:linear-gradient(180deg,transparent calc(112vw - 22vw),#f5f3ee 112vw,#f5f3ee 100%)}
  .phero--meadow .phero-h1 em{color:#1f6187}
  .phero--meadow .phero-trust li::before{background:#1f6187}
}

/* hero: words sit lower */
@media (min-width:761px){.phero--meadow .phero-inner{padding-bottom:0;padding-top:8vh}}

/* hero: three balloons drifting up from the field */
.phero-floats{position:absolute;inset:0;pointer-events:none;z-index:3}
.fl{position:absolute;display:block;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;width:clamp(58px,5.4vw,90px);opacity:0;animation:fl-rise 2.6s cubic-bezier(.2,.7,.1,1) forwards,fl-bob 6s ease-in-out infinite;filter:drop-shadow(0 14px 16px rgba(20,50,70,.22))}
.fl img{display:block;width:100%}
.fl::after{content:"";display:block;width:1.5px;height:120px;margin:-3px auto 0;background:linear-gradient(rgba(255,255,255,.9),rgba(255,255,255,0))}
.f1{left:48%;bottom:4%;animation-delay:.9s,3.5s}
.f2{left:54.5%;bottom:-6%;width:clamp(50px,4.6vw,76px);animation-delay:1.2s,4.3s}
.f3{left:59.5%;bottom:6%;width:clamp(54px,5vw,84px);animation-delay:1.5s,3.9s}
@keyframes fl-rise{from{opacity:0;transform:translateY(180px)}to{opacity:1;transform:none}}
@keyframes fl-bob{0%,100%{translate:0 0;rotate:0deg}50%{translate:4px -14px;rotate:3deg}}
@media (prefers-reduced-motion:reduce){.fl{animation:none;opacity:1}}
@media (max-width:760px){
  .phero-floats{inset:auto;top:0;left:0;right:0;height:112vw}
  .fl{width:46px}.fl::after{height:70px}
  .f1{left:8%;bottom:16%}.f2{left:20%;bottom:8%;width:38px}.f3{left:31%;bottom:18%;width:42px}
}

/* THE STORY: CRED-style scroll reveal, words go from faint to ink */
.story{position:relative;height:280vh;background:var(--bg)}
.story-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center}
.story-inner{max-width:1100px}
.story-kicker{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint);font-weight:500;margin-bottom:clamp(24px,3vw,40px)}
.story-text{font-size:clamp(28px,3.6vw,56px);line-height:1.16;letter-spacing:-.035em;font-weight:600}
.sw{display:inline-block;color:var(--ink);opacity:calc(.24 + .76 * var(--t,0));transform:translateY(calc((1 - var(--t,0)) * .38em));filter:blur(calc((1 - var(--t,0)) * 1.4px));will-change:opacity,transform}
.si{white-space:nowrap}
.si img{display:inline-block;height:1.05em;width:auto;vertical-align:-.14em;margin:0 .04em 0 .02em;filter:grayscale(calc(1 - var(--t,0)));transform:scale(calc(.7 + .3 * var(--t,0))) rotate(calc((1 - var(--t,0)) * -14deg))}
@media (max-width:760px){
  .story{height:230vh}
  .story-text{font-size:clamp(25px,7.2vw,32px);line-height:1.2}
}
@media (prefers-reduced-motion:reduce){.story{height:auto;padding:120px 0}.story-stage{position:static;height:auto}}

/* hero balloons: hover shows the EMI, click lets it go */
.fl:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:12px}
.fl-tag{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,6px);white-space:nowrap;font-size:13px;font-weight:600;color:#1a1916;background:rgba(250,248,244,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:7px 12px;border-radius:999px;box-shadow:0 8px 20px rgba(10,40,60,.18);opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.fl:hover .fl-tag,.fl:focus-visible .fl-tag,.fl.tag-on .fl-tag{opacity:1;transform:translate(-50%,0)}
.fl.away{animation:fl-away 2s cubic-bezier(.4,0,.6,1) forwards!important;pointer-events:none}
.fl.away .fl-tag{opacity:0}
@keyframes fl-away{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(60px,-115vh) rotate(14deg) scale(.7)}}
@media (max-width:760px){.fl-tag{font-size:11px;padding:5px 9px}}

/* ================= THE APP SHOWCASE (CRED-style phone) ================= */
.showcase{position:relative;height:165vh;background:var(--bg)}
.sc-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,3vh,34px);padding-top:56px}
.sc-phone{position:relative;height:min(64vh,700px);aspect-ratio:814/1674;opacity:0;backface-visibility:hidden}
.sc-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
/* the screen sits exactly on the mockup's black glass */
.ps{position:absolute;left:2.334%;right:2.334%;top:.836%;bottom:.836%;border-radius:16% / 7.6%;overflow:hidden;background:#f5f3ee;z-index:3;container-type:inline-size}
.ps-ui{position:absolute;inset:0;font-family:var(--serif);color:#1a1916}
.ps-status{position:absolute;left:0;right:0;top:0;height:8.4%;display:grid;grid-template-columns:1fr 31% 1fr;align-items:center;font-family:var(--sans);color:#1a1916;z-index:6}
.ps-status b{justify-self:center;font-weight:600;font-size:4.5cqw;letter-spacing:-.01em;padding-left:3cqw}
.ps-island{height:8.6cqw;background:#000;border-radius:99px;margin-top:.4cqw}
.ps-icons{justify-self:center;display:flex;align-items:center;gap:1.4cqw;padding-right:3cqw}
.ps-icons svg{fill:#1a1916;display:block}
.ps-cell{width:4.6cqw;height:3.1cqw}
.ps-wifi{width:4.2cqw;height:3.1cqw}
.ps-batt{position:relative;width:6.6cqw;height:3.2cqw;border:1px solid rgba(26,25,22,.45);border-radius:1.1cqw;padding:.45cqw}
.ps-batt::after{content:"";position:absolute;right:-1.2cqw;top:50%;width:.7cqw;height:1.3cqw;transform:translateY(-50%);border-radius:0 1cqw 1cqw 0;background:rgba(26,25,22,.45)}
.ps-batt i{display:block;width:80%;height:100%;background:#1a1916;border-radius:.6cqw}
.ps.on .ps-status{opacity:1}
.ps-top{position:absolute;left:7%;right:7%;top:9%;display:flex;align-items:flex-start;justify-content:space-between}
.ps-logo{font-weight:600;font-size:7.6cqw;letter-spacing:-.03em;line-height:1;position:relative}
.ps-logo svg{position:absolute;left:-1%;top:78%;width:102%;height:auto;fill:none;stroke:#1a1916;stroke-width:3;stroke-linecap:round}
.ps-menu{display:flex;flex-direction:column;gap:1.5cqw;padding-top:1.5cqw}
.ps-menu i{width:6.6cqw;height:.45cqw;background:#1a1916}
.ps-head{position:absolute;left:0;right:0;top:16%;text-align:center;font-weight:600;font-size:9.4cqw;line-height:1.08;letter-spacing:-.03em}
/* balloons and their labels */
.ps-b{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--w) * 1%);transform:translate(-50%,-50%);opacity:0;z-index:2}
.ps-b img{display:block;width:100%;filter:drop-shadow(0 2cqw 2.4cqw rgba(26,25,22,.16))}
.ps-b em{position:absolute;left:50%;top:100%;margin-top:1.4cqw;transform:translateX(-50%) translateY(4px);white-space:nowrap;font-style:normal;font-family:var(--sans);font-size:2.8cqw;font-weight:500;padding:.8cqw 2cqw;border-radius:99px;background:rgba(245,243,238,.94);border:1px solid rgba(26,25,22,.14);opacity:0;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.ps.landed .ps-b{opacity:1;animation:ps-bob 5s ease-in-out infinite}
.ps.landed .ps-b:nth-of-type(2n){animation-duration:6s;animation-delay:-1.5s}
.ps.landed .ps-b:nth-of-type(3n){animation-duration:5.5s;animation-delay:-3s}
.ps.on .ps-b em{opacity:1;transform:translateX(-50%);transition-delay:.9s}
@keyframes ps-bob{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 1.6cqw)) rotate(1.5deg)}}
/* strings and the hand */
.ps-strings{position:absolute;inset:0;width:100%;height:100%;z-index:1;fill:none;stroke:rgba(26,25,22,.32);stroke-width:.35;vector-effect:non-scaling-stroke}
.ps-hand{position:absolute;left:20%;top:77%;width:34%;z-index:3;filter:grayscale(1)}
.ps-add{position:absolute;right:6%;bottom:17%;width:12.5cqw;height:12.5cqw;border-radius:50%;border:1.3px solid #1a1916;display:grid;place-items:center;font-family:var(--sans);font-weight:300;font-size:8cqw;line-height:1;background:#f5f3ee;z-index:4}
.ps-free{position:absolute;left:0;right:0;margin:0 auto;width:max-content;bottom:12.5%;display:flex;align-items:center;justify-content:center;gap:2.6cqw;font-size:4cqw;z-index:4;padding:1.2cqw 3cqw;border-radius:99px;background:rgba(245,243,238,.92)}
.ps-free i{width:7cqw;height:1px;background:#1a1916;opacity:.55}
.ps-free b{font-weight:600}
.ps-tabs{position:absolute;left:0;right:0;margin:0 auto;width:max-content;bottom:3.4%;display:flex;gap:.6cqw;padding:1.1cqw;border-radius:99px;background:rgba(245,243,238,.75);border:1px solid rgba(255,255,255,.9);box-shadow:0 2cqw 5cqw rgba(0,0,0,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:5;font-family:var(--serif);font-size:3.3cqw;color:#5f5a52;white-space:nowrap}
.ps-tabs span{display:flex;align-items:center;gap:1.1cqw;padding:2cqw 2.6cqw;border-radius:99px}
.ps-tabs span.on{background:rgba(255,255,255,.9);color:#1a1916;font-weight:600;box-shadow:0 .6cqw 1.6cqw rgba(0,0,0,.1)}
.ps-tabs svg{width:4.6cqw;height:4.6cqw;fill:currentColor}
/* the screen wakes up in steps */
.ps-a1,.ps-a2,.ps-a3,.ps-a4,.ps-a5{opacity:0;transform:translateY(3cqw);transition:opacity .7s var(--ease),transform .9s var(--ease)}
.ps.on .ps-a1{opacity:1;transform:none;transition-delay:.05s}
.ps.on .ps-a2{opacity:1;transform:none;transition-delay:.2s}
.ps.on .ps-a3{opacity:1;transform:none;transition-delay:.1s}
.ps.on .ps-a4{opacity:1;transform:none;transition-delay:.5s}
.ps.on .ps-a5{opacity:1;transform:none;transition-delay:.7s}
.ps.on .ps-hand{transform:none}
.ps-hand.ps-a3{transform:translateY(14cqw)}
/* copy under the phone */
.sc-copy{text-align:center;max-width:640px;padding:0 var(--pad);opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.showcase.copy .sc-copy{opacity:1;transform:none}
.sc-title{font-size:clamp(32px,3.6vw,56px);line-height:1.02;letter-spacing:-.04em;font-weight:600}
.sc-title em{font-weight:400}
.sc-text{color:var(--mute);margin-top:14px;font-size:clamp(16px,1.25vw,19px);line-height:1.55}
/* the balloons in flight, from the story into the phone */
.fly-layer{position:fixed;inset:0;pointer-events:none;z-index:45}
.fly-layer img{position:absolute;left:0;top:0;opacity:0;will-change:transform;filter:drop-shadow(0 10px 14px rgba(26,25,22,.18))}
@media (max-width:760px){
  .showcase{height:150vh}
  .sc-phone{height:min(58vh,560px)}
  .sc-stage{gap:18px;padding-top:70px}
  .sc-title{font-size:30px}.sc-text{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.showcase{height:auto;padding:120px 0}.sc-stage{position:static;height:auto}.sc-phone{opacity:1}}

/* ================= DO MORE: the phone walks through the app ================= */
.more{position:relative;height:340vh;background:var(--bg)}
.more-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding-top:56px}
.more-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(40px,7vw,120px);align-items:center}
.more-copy{max-width:520px}
.more-copy .eyebrow{margin-bottom:18px}
.more-title{font-size:clamp(36px,4.2vw,64px);line-height:1;letter-spacing:-.045em;font-weight:600}
.more-title em{font-weight:400}
.more-lede{color:var(--mute);font-size:clamp(16px,1.2vw,18px);line-height:1.55;margin-top:18px;max-width:30em}
.more-steps{list-style:none;margin-top:clamp(26px,4vh,44px);display:grid;gap:4px}
.more-steps li{position:relative;padding:14px 0 14px 26px;opacity:.38;transition:opacity .5s var(--ease)}
.more-steps li>i{position:absolute;left:0;top:18px;bottom:18px;width:2px;border-radius:2px;background:rgba(26,25,22,.12);overflow:hidden}
.more-steps li>i u{position:absolute;left:0;top:0;width:100%;height:calc(var(--f,0) * 100%);background:var(--ink)}
.more-steps h3{font-size:clamp(18px,1.45vw,22px);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.more-steps p{color:var(--mute);font-size:15.5px;line-height:1.5;max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--ease),opacity .5s var(--ease),margin .6s var(--ease)}
.more-steps li.on{opacity:1}
.more-steps li.on p{max-height:5em;opacity:1;margin-top:6px}
.more-phone{display:flex;justify-content:center}
.sc-phone.mp{opacity:1;height:min(74vh,720px)}
/* the screens inside */
.mps .scr{position:absolute;inset:0;transition:transform .8s cubic-bezier(.65,0,.25,1),opacity .6s var(--ease);background:#f5f3ee}
.mps .s-sum,.mps .s-jar{transform:translateX(100%)}
.mps[data-s="1"] .s-loan{transform:translateX(-28%);opacity:.4}
.mps[data-s="1"] .s-sum{transform:none}
.mps[data-s="2"] .s-loan{transform:translateX(-28%);opacity:0}
.mps[data-s="2"] .s-sum{transform:translateX(-28%);opacity:.4}
.mps[data-s="2"] .s-jar{transform:none}
.mps .ps-status{z-index:8}
.mps .ps-top{top:8.5%}
.mps .ps-head{top:15.5%}
/* 1 · loan sheet */
.sl-home{position:absolute;inset:0}
.sl-home>img{position:absolute;filter:drop-shadow(0 2cqw 2.4cqw rgba(26,25,22,.16))}
.sl-dim{position:absolute;inset:0;background:rgba(26,25,22,.32);opacity:0;transition:opacity .6s var(--ease) .15s}
.sl-sheet{position:absolute;left:0;right:0;bottom:0;height:70%;background:#faf8f4;border-radius:7cqw 7cqw 0 0;padding:3cqw 7cqw 0;box-shadow:0 -2cqw 6cqw rgba(0,0,0,.1);transform:translateY(100%);transition:transform .9s cubic-bezier(.2,.9,.25,1) .2s;font-family:var(--serif)}
.more.live .mps[data-s="0"] .sl-sheet,.mps[data-s="1"] .sl-sheet,.mps[data-s="2"] .sl-sheet{transform:none}
.more.live .mps[data-s="0"] .sl-dim,.mps[data-s="1"] .sl-dim,.mps[data-s="2"] .sl-dim{opacity:1}
.sl-grab{display:block;width:11cqw;height:1.2cqw;border-radius:9px;background:rgba(26,25,22,.18);margin:0 auto 4cqw}
.sl-head{display:flex;align-items:center;gap:3.4cqw}
.sl-head img{width:13cqw}
.sl-name{font-weight:600;font-size:6.4cqw;letter-spacing:-.02em;line-height:1.1}
.sl-lender{color:#5f5a52;font-size:4cqw}
.sl-ends{font-weight:700;font-size:6.6cqw;margin-top:5cqw;letter-spacing:-.02em}
.sl-togo{font-style:italic;color:#5f5a52;font-size:4.2cqw;margin-top:.6cqw}
.sl-bar{height:1.8cqw;border-radius:9px;background:#ece7dd;margin-top:3.4cqw;overflow:hidden}
.sl-bar u{display:block;height:100%;width:42%;background:#1a1916;border-radius:9px}
.sl-rows{margin-top:3cqw}
.sl-rows p{display:flex;justify-content:space-between;align-items:baseline;padding:2.7cqw 0;border-bottom:1px solid rgba(26,25,22,.12);font-size:4.3cqw}
.sl-rows p:last-child{border:0}
.sl-rows span{color:#5f5a52}
.sl-rows b{font-weight:600;font-size:4.6cqw}
.sl-btn{display:block;text-align:center;margin-top:3cqw;padding:3.4cqw;border-radius:99px;background:#1a1916;color:#f5f3ee;font-weight:600;font-size:4.4cqw}
.sl-quiet{display:flex;justify-content:center;gap:6cqw;margin-top:3.4cqw;font-size:4cqw;color:#5f5a52}
/* 2 · summary */
.sm-body{position:absolute;left:6%;right:6%;top:16%;font-family:var(--serif);color:#1a1916}
.sm-kick{font-size:4.8cqw;color:#5f5a52;line-height:1.3}
.sm-date{font-weight:700;font-size:11cqw;letter-spacing:-.04em;line-height:1.1}
.sm-span{font-style:italic;color:#5f5a52;font-size:4cqw}
.sm-card{margin-top:4cqw;padding:3.8cqw;border-radius:5cqw;background:#faf8f4;border:1px solid rgba(26,25,22,.14)}
.sm-card>p{font-size:4.2cqw;line-height:1.35}
.sm-card>i{display:block;height:2.8cqw;border-radius:9px;background:#ece7dd;margin:2.6cqw 0;overflow:hidden}
.sm-card>i u{display:block;height:100%;width:0;background:#1d7a49;border-radius:9px;transition:width 1.4s cubic-bezier(.2,.8,.2,1) .5s}
.mps[data-s="1"] .sm-card>i u,.mps[data-s="2"] .sm-card>i u{width:23%}
.sm-three{display:flex;justify-content:space-between}
.sm-three p:nth-child(2){text-align:center}.sm-three p:last-child{text-align:right}
.sm-three span,.sm-tiles span,.sm-label{display:block;font-family:var(--sans);font-size:2.3cqw;letter-spacing:.12em;color:#a39d93;font-weight:600}
.sm-three b{font-size:3.9cqw;font-weight:700}
.sm-three b.g{color:#1d7a49}.sm-three b.s{color:#5f5a52}
.sm-tiles{display:grid;grid-template-columns:1fr 1fr;gap:2.4cqw;margin-top:2.6cqw}
.sm-tiles div{padding:3.2cqw;border-radius:4.4cqw;background:#faf8f4;border:1px solid rgba(26,25,22,.14)}
.sm-tiles b{display:block;font-size:5.4cqw;font-weight:700;letter-spacing:-.02em;margin-top:.6cqw}
.sm-tiles em{display:block;font-size:3cqw;color:#5f5a52}
.sm-label{margin:4.4cqw 0 1cqw}
.sm-loan{display:flex;align-items:center;gap:3cqw;padding:2.4cqw 0;border-bottom:1px solid rgba(26,25,22,.12)}
.sm-loan>img{width:9cqw;height:9cqw;object-fit:contain}
.sm-loan>div{flex:1;min-width:0}
.sm-loan p{display:flex;justify-content:space-between;align-items:baseline;font-size:4.1cqw}
.sm-loan p span{font-size:3.3cqw;color:#5f5a52}
.sm-loan i{display:block;height:1.2cqw;border-radius:9px;background:#ece7dd;margin:1.2cqw 0;overflow:hidden}
.sm-loan i u{display:block;height:100%;background:#1a1916}
.sm-loan .sm-sub{font-size:3.1cqw;color:#5f5a52}
.sm-loan em{font-style:normal;font-family:var(--sans);font-weight:500;font-size:2.8cqw;color:#5f5a52}
.sm-loan em.ok,.mj-cap-t em.ok{color:#1d7a49}
/* 3 · money jars */
.mj-headline{position:absolute;left:0;right:0;top:16%;text-align:center;font-family:var(--serif)}
.mj-headline .sm-label{margin:0 0 .6cqw}
.mj-title{font-weight:700;font-size:8cqw;letter-spacing:-.03em;line-height:1.15}
.mj-put{font-size:4.2cqw;margin-top:1.4cqw}.mj-put span{color:#5f5a52}
.mj-shelf{position:absolute;left:8%;right:8%;top:34%;display:grid;grid-template-columns:1fr 1fr;gap:6%;align-items:end}
.mj-glass{position:relative;width:100%;aspect-ratio:772/1100}
.mj-glass img{position:absolute}
.mj-back,.mj-front{inset:0;width:100%;height:100%}
.mj-front{z-index:2}
.mj-lid{position:absolute;left:9.5%;width:81%;top:-3.2%;aspect-ratio:760/227;z-index:3}
.mj-lid img{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:multiply}
.mj-lid i{position:absolute;inset:0;background:var(--cap,#dd4b35);-webkit-mask:url(assets/jars/cap.webp) center/100% 100% no-repeat;mask:url(assets/jars/cap.webp) center/100% 100% no-repeat}
.mj-glass{isolation:isolate}
.mj-coin{width:32%;left:calc(var(--cx) * 1% - 16%);top:calc(var(--cy) * 1% - 9.5%);transform:translateY(-260%) rotate(var(--cr)) scaleY(var(--cs,1));opacity:0;transition:transform .8s cubic-bezier(.3,1.3,.5,1),opacity .3s;filter:brightness(calc(.7 + .3 * var(--cs,1)))}
.mps[data-s="2"] .mj-coin{transform:rotate(var(--cr)) scaleY(var(--cs,1));opacity:1}
.mps[data-s="2"] .mj-coin:nth-of-type(2){transition-delay:.5s}.mps[data-s="2"] .mj-coin:nth-of-type(3){transition-delay:.62s}.mps[data-s="2"] .mj-coin:nth-of-type(4){transition-delay:.74s}.mps[data-s="2"] .mj-coin:nth-of-type(5){transition-delay:.86s}.mps[data-s="2"] .mj-coin:nth-of-type(6){transition-delay:.98s}.mps[data-s="2"] .mj-coin:nth-of-type(7){transition-delay:1.1s}.mps[data-s="2"] .mj-coin:nth-of-type(8){transition-delay:1.22s}.mps[data-s="2"] .mj-coin:nth-of-type(9){transition-delay:1.34s}
.mj-cap-t{margin-top:4.6cqw;font-family:var(--serif);font-size:3.2cqw;color:#5f5a52;line-height:1.35}
.mj-cap-t b{display:block;color:#1a1916;font-weight:600;font-size:4cqw}
.mj-cap-t span,.mj-cap-t em,.mj-cap-t i{display:block}
.mj-cap-t em{font-style:normal;color:#1a1916;font-weight:500}
.mj-shelf .mj-glass::after{content:"";position:absolute;left:-14%;right:-14%;bottom:-1.4cqw;height:1.8cqw;border-radius:2px;background:#e3dccd;border-bottom:1px solid rgba(26,25,22,.18);box-shadow:0 1.4cqw 2.4cqw rgba(59,47,29,.12);z-index:-1}
.mj-note{position:absolute;left:10%;right:10%;bottom:14%;text-align:center;font-family:var(--serif);font-style:italic;font-size:3.3cqw;color:#5f5a52}
/* tab bar with a sliding glass bubble */
.mtabs{opacity:1;transform:none;position:absolute}
.mtabs span{position:relative;z-index:1;transition:color .4s var(--ease)}
.mtabs span.on{background:none;box-shadow:none}
.mtabs .bub{position:absolute;top:1.1cqw;bottom:1.1cqw;left:var(--bx,1.1cqw);width:var(--bw,20cqw);border-radius:99px;background:rgba(255,255,255,.95);box-shadow:0 .6cqw 1.6cqw rgba(0,0,0,.1);transition:left .6s cubic-bezier(.3,1.25,.5,1),width .6s cubic-bezier(.3,1.25,.5,1)}
.mps[data-s="0"] .mtabs{opacity:0;transition:opacity .4s}
.mps .mtabs{transition:opacity .5s .3s}

@media (max-width:860px){
  .more{height:320vh}
  .more-stage{padding-top:64px;align-items:flex-start}
  .more-grid{grid-template-columns:1fr;gap:14px;justify-items:center;text-align:center}
  .more-copy{display:contents}
  .more-copy .eyebrow,.more-lede{display:none}
  .more-title{font-size:28px;order:1;margin-top:8px}
  .more-phone{order:2}
  .sc-phone.mp{height:min(52vh,470px)}
  .more-steps{order:3;margin-top:0;position:relative;min-height:120px;width:100%;max-width:420px}
  .more-steps li{position:absolute;inset:0;padding:6px 0;opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
  .more-steps li.on{opacity:1;transform:none}
  .more-steps li>i{display:none}
  .more-steps h3{font-size:19px}.more-steps p{font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){.more{height:auto}.more-stage{position:static;height:auto;padding:100px 0}}

/* ================= BIT BY BIT: bento cards (uses .bento/.card from "One private place") ================= */
.bits{padding-top:clamp(60px,8vw,120px)}
.b-free{grid-column:span 2}
.b-free .art,.b-jar .art{height:380px}
.b-jar .jar{width:148px;margin-top:-34px}
.b-tag{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:13px;font-weight:500;padding:7px 14px;border-radius:99px;background:rgba(255,255,255,.8);border:1px solid var(--line)}
/* 1 · the timeline: a dot walks the months, each loan lets go as it passes, then the star */
.b-free .art{display:block}
.bt{position:absolute;left:7%;right:31%;top:58%}
.bt-line{position:relative;height:2px;background:var(--line-hi);border-radius:2px}
.bt-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--ink);animation:bt-walk 9s linear infinite}
.bt-dot{position:absolute;top:50%;left:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 6px rgba(26,25,22,.08);animation:bt-dot 9s linear infinite}
.bt-b{position:absolute;bottom:14px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.bt-b img{height:58px;width:auto;filter:drop-shadow(0 10px 14px rgba(26,25,22,.16))}
.bt-b em{position:absolute;top:calc(100% + 22px);font-style:normal;font-size:12px;color:var(--mute);white-space:nowrap}
.bt-b::after{content:"";display:block;width:1px;height:16px;background:rgba(26,25,22,.3)}
.bt-b.b1{left:14%}.bt-b.b2{left:32%}.bt-b.b3{left:50%}.bt-b.b4{left:68%}.bt-b.b5{left:86%}
.bt-b.b5 img{height:70px}
.bt-b.b1 img,.bt-b.b1::after{animation:bt-go1 9s var(--ease) infinite}
.bt-b.b2 img,.bt-b.b2::after{animation:bt-go2 9s var(--ease) infinite}
.bt-b.b3 img,.bt-b.b3::after{animation:bt-go3 9s var(--ease) infinite}
.bt-b.b4 img,.bt-b.b4::after{animation:bt-go4 9s var(--ease) infinite}
.bt-b.b5 img,.bt-b.b5::after{animation:bt-go5 9s var(--ease) infinite}
@keyframes bt-walk{0%{width:0}75%,100%{width:100%}}
@keyframes bt-dot{0%{left:0}75%,100%{left:100%}}
@keyframes bt-go1{0%,10.5%{transform:none;opacity:1}20%,94%{transform:translateY(var(--rise,-150px)) rotate(-8deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes bt-go2{0%,24%{transform:none;opacity:1}33.5%,94%{transform:translateY(var(--rise,-150px)) rotate(8deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes bt-go3{0%,37.5%{transform:none;opacity:1}47%,94%{transform:translateY(var(--rise,-150px)) rotate(-6deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes bt-go4{0%,51%{transform:none;opacity:1}60.5%,94%{transform:translateY(var(--rise,-150px)) rotate(6deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes bt-go5{0%,64.5%{transform:none;opacity:1}74%,94%{transform:translateY(var(--rise,-160px)) rotate(-4deg);opacity:0}100%{transform:none;opacity:1}}
.bt-free{position:absolute;right:7%;top:50%;transform:translateY(-50%);text-align:right}
.bt-free p{font-family:var(--serif);font-weight:700;font-size:clamp(34px,3.4vw,48px);letter-spacing:-.04em;line-height:1}
.bt-free p span{display:block;font-weight:400;font-style:italic;font-size:16px;letter-spacing:0;color:var(--mute);margin-bottom:8px}
.bt-free p{animation:bt-date 9s var(--ease) infinite}
.bt-star{width:56px;margin:0 0 10px auto;display:block;animation:bt-star 9s var(--ease) infinite;filter:drop-shadow(0 10px 20px rgba(233,185,73,.4))}
@keyframes bt-star{0%,72%{transform:scale(0) rotate(-30deg);opacity:0}80%{transform:scale(1.15);opacity:1}86%,94%{transform:scale(1);opacity:1}100%{transform:scale(0);opacity:0}}
@keyframes bt-date{0%,72%{opacity:.28}80%,94%{opacity:1}100%{opacity:.28}}
/* 2 · the order: they let go one by one, in order */
.bo{display:flex;gap:30px;align-items:flex-end;margin-top:30px}
.bo-b{position:relative;display:flex;flex-direction:column;align-items:center}
.bo-b img{height:74px;width:auto;filter:drop-shadow(0 12px 16px rgba(26,25,22,.16))}
.bo-b i{display:block;width:1px;height:44px;background:rgba(26,25,22,.3)}
.bo-b b{width:28px;height:28px;border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center;font-size:13px;margin-top:6px;background:var(--card);transition:background .3s}
.bo-b.o1 img,.bo-b.o1 i{animation:bo-go1 8s var(--ease) infinite}
.bo-b.o2 img,.bo-b.o2 i{animation:bo-go2 8s var(--ease) infinite}
.bo-b.o3 img,.bo-b.o3 i{animation:bo-go3 8s var(--ease) infinite}
.bo-b.o1 b{animation:bo-n1 8s var(--ease) infinite}.bo-b.o2 b{animation:bo-n2 8s var(--ease) infinite}.bo-b.o3 b{animation:bo-n3 8s var(--ease) infinite}
@keyframes bo-go1{0%,22%{transform:none;opacity:1}36%,90%{transform:translateY(-170px) rotate(-10deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes bo-go2{0%,42%{transform:none;opacity:1}56%,90%{transform:translateY(-170px) rotate(10deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes bo-go3{0%,62%{transform:none;opacity:1}76%,90%{transform:translateY(-170px) rotate(-8deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes bo-n1{0%,26%{background:var(--card);color:var(--ink)}30%,90%{background:var(--ink);color:var(--card)}100%{background:var(--card);color:var(--ink)}}
@keyframes bo-n2{0%,46%{background:var(--card);color:var(--ink)}50%,90%{background:var(--ink);color:var(--card)}100%{background:var(--card);color:var(--ink)}}
@keyframes bo-n3{0%,66%{background:var(--card);color:var(--ink)}70%,90%{background:var(--ink);color:var(--card)}100%{background:var(--card);color:var(--ink)}}
/* 3 · pay a little more: the date moves */
.bm{display:flex;flex-direction:column;align-items:center;gap:16px}
.bm-chip{font-size:14px;font-weight:600;padding:10px 18px;border-radius:99px;background:var(--ink);color:var(--card);animation:bm-chip 6s var(--ease) infinite}
.bm-dates{position:relative;height:52px;width:220px;overflow:hidden;text-align:center;font-family:var(--serif);font-weight:700;font-size:40px;letter-spacing:-.04em;line-height:52px}
.bm-old,.bm-new{position:absolute;inset:0}
.bm-old{color:var(--faint);animation:bm-old 6s var(--ease) infinite}
.bm-new{animation:bm-new 6s var(--ease) infinite}
.bm-old::after{content:"";position:absolute;left:18%;right:18%;top:50%;height:2px;background:var(--faint);transform-origin:left;transform:scaleX(0);animation:bm-strike 6s var(--ease) infinite}
.bm-gain{font-family:var(--serif);font-style:italic;font-size:17px;color:#1d7a49;animation:bm-gain 6s var(--ease) infinite}
@keyframes bm-chip{0%,12%{transform:scale(1)}18%{transform:scale(1.08)}24%,100%{transform:scale(1)}}
@keyframes bm-strike{0%,20%{transform:scaleX(0)}32%,88%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes bm-old{0%,34%{transform:none;opacity:1}46%,88%{transform:translateY(-100%);opacity:0}100%{transform:none;opacity:1}}
@keyframes bm-new{0%,34%{transform:translateY(100%);opacity:0}46%,88%{transform:none;opacity:1}100%{transform:translateY(100%);opacity:0}}
@keyframes bm-gain{0%,44%{opacity:0;transform:translateY(6px)}54%,88%{opacity:1;transform:none}100%{opacity:0}}
/* 4 · carry it together: one balloon, three hands on the strings */
.bf{position:relative;width:220px;height:230px;display:flex;flex-direction:column;align-items:center}
.bf-b{width:84px;position:relative;z-index:1;filter:drop-shadow(0 14px 18px rgba(26,25,22,.16));animation:bf-bob 5s ease-in-out infinite}
.bf-str{width:200px;height:96px;margin-top:-6px;fill:none;stroke:rgba(26,25,22,.32);stroke-width:1.2;vector-effect:non-scaling-stroke;animation:bf-bob 5s ease-in-out infinite}
.bf-people{display:flex;justify-content:space-between;width:184px;margin-top:-4px}
.bf-people span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:600;font-size:15px;border:3px solid var(--card)}
.bf-people .p1{background:#3b6cff}.bf-people .p2{background:#e8678e}.bf-people .p3{background:#e9b23f}
.bf-line{margin-top:14px;font-family:var(--serif);font-style:italic;font-size:15px;color:var(--mute)}
@keyframes bf-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (max-width:980px){.b-free{grid-column:span 2}}
@media (max-width:640px){
  .b-free{grid-column:auto}
  .b-free .art,.b-jar .art{height:300px}
  .bt{left:6%;right:6%;top:70%}
  .bt-b img{height:44px}.bt-b.b5 img{height:54px}
  .bt-free{right:auto;left:6%;top:16%;transform:none;text-align:left}
  .bt-star{margin:0 0 8px 0;width:44px}
}
@media (prefers-reduced-motion:reduce){
  .bits [class*="bt-"],.bits [class*="bo-"],.bits [class*="bm-"],.bits [class*="bf-"],.bits .bt-b img,.bits .bo-b img,.bits .bo-b i,.bits .bo-b b{animation:none!important}
  .bt-fill{width:100%}.bt-dot{left:100%}.bt-star{transform:none;opacity:1}.bm-old{opacity:0}.bm-new{transform:none;opacity:1}.bm-gain{opacity:1}
}

/* hero: link to the free health checkup */
.phero-check{display:inline-flex;align-items:center;gap:8px;margin-top:18px;align-self:flex-start;width:max-content;font-size:14.5px;font-weight:500;color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.45);text-underline-offset:5px;animation:rise-in .9s var(--ease) both;animation-delay:1s;transition:text-decoration-color .3s}
.phero-check:hover{text-decoration-color:#fff}
.phero-check span{transition:transform .3s var(--ease)}
.phero-check:hover span{transform:translateX(4px)}
@media (max-width:760px){.phero-check{color:var(--ink);text-decoration-color:var(--line-hi)}}

/* mission: the manifesto as a button */
.manifesto-body:has(.m-btn){display:flex;flex-direction:column;align-items:flex-start;gap:30px;max-width:640px}
.manifesto-body .m-btn{width:auto}

/* ================= THE FULL PICTURE: what a bank sees vs what a family carries ================= */
.seen{position:relative;height:320vh;background:var(--bg)}
.seen-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding-top:76px;overflow:hidden}
.seen-wrap{display:flex;flex-direction:column;gap:clamp(18px,3vh,30px)}
.seen-head .eyebrow{margin-bottom:12px}
.seen-title{font-size:clamp(30px,3.6vw,52px);line-height:1.02;letter-spacing:-.045em;font-weight:600}
.seen-title em{font-weight:400}
.seen-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,6vw,96px);align-items:center}
/* the credit report: cold, grey, partial */
.report{position:relative;max-width:540px;padding:22px 24px 20px;border-radius:14px;background:#fbfbfa;border:1px solid #dcdad5;box-shadow:0 30px 60px -40px rgba(26,25,22,.35);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#55534e;transition:opacity .6s var(--ease),filter .6s var(--ease);background-image:repeating-linear-gradient(0deg,transparent 0 27px,rgba(0,0,0,.025) 27px 28px)}
.rp-top{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9a978f;padding-bottom:12px;border-bottom:1px dashed #d6d3cc}
.rp-name{font-family:var(--sans);font-weight:600;font-size:18px;color:#3a3833;margin:14px 0 8px;letter-spacing:-.01em}
.rp-rows{display:grid;gap:2px}
.rp-row{display:grid;grid-template-columns:1fr auto 84px;gap:12px;align-items:center;padding:9px 0;font-size:13px;border-bottom:1px solid #ecebe7}
.rp-row b{text-align:right;color:#2f2d29;font-weight:600}
.rp-row span:nth-child(2){font-size:11px;color:#2f8a57;letter-spacing:.04em}
.rp-row.ghost{color:#c3c0b8;max-height:0;padding:0;opacity:0;overflow:hidden;border-bottom-style:dashed;transition:max-height .5s var(--ease),padding .5s var(--ease),opacity .5s var(--ease)}
.rp-row.ghost span:nth-child(2){color:#c0841d}
.rp-row.ghost b{color:#c3c0b8}
.rp-foot{display:flex;justify-content:space-between;font-size:13px;padding-top:12px}
.rp-foot b{color:#2f2d29}
.rp-stamp{position:absolute;right:18px;top:46px;transform:rotate(-8deg) scale(1.4);font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#b0741c;border:2px solid #b0741c;padding:4px 10px;border-radius:6px;opacity:0;transition:opacity .4s var(--ease),transform .5s cubic-bezier(.3,1.6,.5,1)}
.seen[data-k="1"] .g1,.seen[data-k="2"] .g1,.seen[data-k="3"] .g1,.seen[data-k="4"] .g1,
.seen[data-k="2"] .g2,.seen[data-k="3"] .g2,.seen[data-k="4"] .g2,
.seen[data-k="3"] .g3,.seen[data-k="4"] .g3,.seen[data-k="4"] .g4{max-height:40px;padding:9px 0;opacity:1}
.seen[data-k="4"] .rp-stamp{opacity:1;transform:rotate(-8deg) scale(1)}
.seen.done .report{opacity:.62;filter:grayscale(.4)}
/* the phone: every loan, in one place */
.seen-phone{display:flex;justify-content:center}
.sc-phone.sn{opacity:1;height:min(64vh,620px)}
.sn-body{position:absolute;left:6%;right:6%;top:15.5%;font-family:var(--serif);color:#1a1916}
.sn-kick{font-size:4.4cqw;color:#5f5a52}
.sn-total{display:flex;align-items:baseline;gap:2.4cqw;margin-top:.6cqw}
.sn-total span{font-weight:700;font-size:10.5cqw;letter-spacing:-.04em;line-height:1.1;font-variant-numeric:tabular-nums}
.sn-total small{font-size:3.6cqw;color:#5f5a52}
.sn-body .sm-label{margin:4cqw 0 1.4cqw}
.sn-row{display:flex;align-items:center;gap:3cqw;padding:2.3cqw 0;border-bottom:1px solid rgba(26,25,22,.12);overflow:hidden}
.sn-row>img{width:10cqw;height:10cqw;object-fit:contain;flex:none;filter:drop-shadow(0 1.4cqw 1.8cqw rgba(26,25,22,.16))}
.sn-row>div{flex:1;min-width:0}
.sn-row p{display:flex;justify-content:space-between;align-items:baseline;gap:2cqw;font-size:4.2cqw}
.sn-row p b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sn-row p span{font-weight:700;font-variant-numeric:tabular-nums}
.sn-sub{margin-top:.4cqw}
.sn-sub span{font-weight:400!important;font-size:3.2cqw;color:#5f5a52}
.sn-sub em{font-style:normal;font-family:var(--sans);font-size:2.5cqw;font-weight:600;color:#8a5a12;background:#f6ead2;padding:.6cqw 1.6cqw;border-radius:99px;white-space:nowrap}
.sn-row.hid{max-height:0;padding:0;opacity:0;border-color:transparent;transition:max-height .7s var(--ease),padding .7s var(--ease),opacity .5s var(--ease),border-color .5s}
.sn-row.hid.on{max-height:20cqw;padding:2.3cqw 0;opacity:1;border-color:rgba(26,25,22,.12)}
.sn-row.hid.on>img{animation:sn-rise .9s cubic-bezier(.3,1.35,.5,1) both}
.sn-row.hid.on{background:linear-gradient(90deg,rgba(246,234,210,.0),rgba(246,234,210,.55),rgba(246,234,210,0)) no-repeat;background-size:200% 100%;animation:sn-glow 1.6s var(--ease) both}
@keyframes sn-rise{0%{transform:translateY(40cqw) scale(.6) rotate(-10deg);opacity:0}60%{opacity:1}100%{transform:none;opacity:1}}
@keyframes sn-glow{0%{background-position:120% 0}100%{background-position:-120% 0}}
/* the number that explains it */
.seen-stat{display:flex;align-items:flex-start;gap:clamp(16px,2.4vw,30px);max-width:760px;opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.seen.done .seen-stat{opacity:1;transform:none}
.seen-num{font-size:clamp(56px,6.4vw,96px);font-weight:600;letter-spacing:-.05em;line-height:.9;white-space:nowrap}
.seen-num span{font-variant-numeric:tabular-nums}
.seen-line{font-size:clamp(16px,1.3vw,19px);line-height:1.45;color:var(--ink)}
.seen-src{font-size:12px;color:var(--faint);margin-top:8px;line-height:1.5}
/* desktop: the number sits under the report, in the left column */
@media (min-width:861px){
  .seen-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(28px,6vw,96px);row-gap:22px;align-items:start}
  .seen-head{grid-column:1/-1}
  .seen-grid{display:contents}
  .report{grid-column:1;grid-row:2}
  .seen-phone{grid-column:2;grid-row:2/4;align-self:center}
  .seen-stat{grid-column:1;grid-row:3;flex-direction:column;gap:10px}
}
@media (max-width:860px){
  .seen{height:300vh}
  .seen-stage{align-items:flex-start;padding-top:72px}
  .seen-wrap{gap:12px}
  .seen-title{font-size:26px}
  .seen-head .eyebrow{display:none}
  .seen-grid{grid-template-columns:1fr;gap:12px;justify-items:center}
  .report{width:100%;max-width:none;padding:12px 14px}
  .rp-top,.rp-rows,.rp-name{display:none}
  .rp-foot{padding-top:2px;font-size:12px}
  .rp-stamp{top:50%;right:12px;transform:translateY(-50%) rotate(-6deg) scale(1.3);font-size:10px}
  .seen[data-k="4"] .rp-stamp{transform:translateY(-50%) rotate(-6deg) scale(1)}
  .report::before{content:"What a credit report sees";display:block;font-family:var(--sans);font-weight:600;font-size:13px;color:#3a3833;margin-bottom:4px}
  .sc-phone.sn{height:min(46vh,440px)}
  .seen-stat{gap:12px;align-items:center}
  .seen-num{font-size:44px}
  .seen-line{font-size:13.5px;line-height:1.4}.seen-src{font-size:10px}
}
@media (prefers-reduced-motion:reduce){.seen{height:auto}.seen-stage{position:static;height:auto;padding:110px 0}}
@media (min-width:861px) and (max-height:960px){
  .seen-stat{flex-direction:row!important;align-items:flex-start;gap:22px!important}
  .seen-num{font-size:clamp(56px,5vw,76px)}
  .rp-row{padding:7px 0}
  .seen[data-k] .rp-row.ghost{padding:0}
  .seen[data-k="1"] .g1,.seen[data-k="2"] .g1,.seen[data-k="3"] .g1,.seen[data-k="4"] .g1,.seen[data-k="2"] .g2,.seen[data-k="3"] .g2,.seen[data-k="4"] .g2,.seen[data-k="3"] .g3,.seen[data-k="4"] .g3,.seen[data-k="4"] .g4{padding:7px 0}
  .rp-name{margin:10px 0 4px}
}
@media (min-width:861px) and (max-height:780px){
  .seen-head .eyebrow{display:none}
  .seen-title{font-size:clamp(28px,3vw,42px)}
  .rp-top{padding-bottom:8px}
  .report{padding:16px 20px 14px}
  .seen-line{font-size:15px}
}
@media (max-width:860px) and (max-height:780px){
  .seen-stage{padding-top:66px}
  .seen-title{font-size:22px}
  .report{padding:9px 12px}
  .sc-phone.sn{height:39vh}
  .seen-num{font-size:38px}
  .seen-line{font-size:12.5px}
}

/* ================= the full picture: a little more colour ================= */
.seen{background:linear-gradient(180deg,var(--bg) 0,#efe7d6 14%,#efe7d6 86%,var(--bg) 100%)}
.seen-title em{color:#b0741c}
.seen-num{background:linear-gradient(135deg,#d08a1f,#b0741c 45%,#7a4d0e);-webkit-background-clip:text;background-clip:text;color:transparent}
.sn-total span{color:#1d7a49}
.report{background-color:#fdfcfa}
.rp-stamp{color:#a8380a;border-color:#a8380a}
.sn-sub em{background:#fbe2b8;color:#7a4d0e}

/* ================= mission: words left, the flag's three balloons holding the manifesto on the right ================= */
.mission-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr);gap:clamp(32px,5vw,80px);align-items:center}
.mission-grid .mission{font-size:clamp(44px,6.2vw,104px)}
.mission-body{font-size:clamp(19px,1.6vw,24px);line-height:1.4;letter-spacing:-.01em;max-width:28em;margin-top:clamp(28px,4vw,48px);color:var(--ink)}
.mission-art{display:flex;flex-direction:column;align-items:center}
.mission-art .tri{width:min(100%,320px);height:auto;overflow:visible}
.mission-art .bl{transform-box:fill-box;transform-origin:50% 100%;animation:tri-bob 6s ease-in-out infinite}
.mission-art .b-wht{animation-duration:7s;animation-delay:-2s}
.mission-art .b-grn{animation-duration:6.5s;animation-delay:-4s}
.mission-art .bl ellipse:first-child{filter:drop-shadow(0 12px 14px rgba(26,25,22,.18))}
@keyframes tri-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(2deg)}}
.mission-art .m-btn{margin-top:-6px;position:relative;z-index:1;box-shadow:0 14px 30px -14px rgba(26,25,22,.5)}
@media (max-width:860px){.mission-grid{grid-template-columns:1fr}.mission-art .tri{width:240px}}

/* ================= why now: three facts you can see ================= */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(48px,6vw,72px)}
.why-card{background:var(--card);border:1px solid var(--line);border-radius:26px;padding:28px 28px 30px;display:flex;flex-direction:column;gap:14px;min-height:360px}
.why-k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:600}
.why-big{font-size:clamp(64px,6vw,92px);font-weight:600;letter-spacing:-.05em;line-height:.9;font-variant-numeric:tabular-nums;margin-top:6px}
.why-big small,.why-donut small{font-size:.45em;letter-spacing:0}
.why-t{font-size:18px;line-height:1.4;color:var(--ink);letter-spacing:-.01em}
.why-bars{margin-top:auto;display:grid;gap:12px}
.why-bars div{display:grid;grid-template-columns:110px 1fr 54px;align-items:center;gap:10px;font-size:13px;color:var(--mute)}
.why-bars i{display:block;height:10px;border-radius:9px;background:#e6dfd2;position:relative;overflow:hidden}
.why-bars i::after{content:"";position:absolute;inset:0;width:var(--w);background:#c9c1b2;border-radius:9px;transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--ease) .3s}
.why-bars .now i::after{background:linear-gradient(90deg,#d08a1f,#a8380a)}
.why-bars .now{color:var(--ink);font-weight:600}
.why-bars b{text-align:right;font-weight:600;color:var(--ink)}
.why-card.in .why-bars i::after{transform:scaleX(1)}
.why-donut{position:relative;width:170px;height:170px;margin:4px 0 4px}
.why-donut svg{width:100%;height:100%;transform:rotate(-90deg)}
.why-donut circle{fill:none;stroke-width:14}
.why-donut .d-bg{stroke:#e6dfd2}
.why-donut .d-fg{stroke:#b0741c;stroke-linecap:round;stroke-dasharray:301.6;stroke-dashoffset:301.6;transition:stroke-dashoffset 1.6s var(--ease) .3s}
.why-card.in .why-donut .d-fg{stroke-dashoffset:calc(301.6 - 301.6 * var(--p) / 100)}
.why-donut p{position:absolute;inset:0;display:grid;place-items:center;font-size:44px;font-weight:600;letter-spacing:-.04em}
.apps{display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 2px}
.apps span{font-size:12.5px;padding:7px 11px;border-radius:99px;background:#ebe5d9;color:#8d867a;opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.why-card.in .apps span{opacity:1;transform:none}
.apps span:nth-child(2){transition-delay:.05s}.apps span:nth-child(3){transition-delay:.1s}.apps span:nth-child(4){transition-delay:.15s}.apps span:nth-child(5){transition-delay:.2s}.apps span:nth-child(6){transition-delay:.25s}.apps span:nth-child(7){transition-delay:.3s}.apps span:nth-child(8){transition-delay:.35s}.apps span:nth-child(9){transition-delay:.4s}.apps span:nth-child(10){transition-delay:.45s}.apps span:nth-child(11){transition-delay:.5s}.apps span:nth-child(12){transition-delay:.55s}
.apps .fm-pill{font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:-.02em;background:var(--ink);color:var(--bg);transition-delay:.9s!important;box-shadow:0 8px 18px -8px rgba(26,25,22,.5)}
.why-apps .why-t{margin-top:auto}
#whynow .source{margin-top:22px}
@media (max-width:980px){.why-grid{grid-template-columns:1fr}.why-card{min-height:0}}

/* ================= privacy by design: icons ================= */
.trust-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:end}
.trust-lede{font-size:clamp(17px,1.4vw,20px);color:var(--mute);line-height:1.5;max-width:28em}
.trust-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:clamp(44px,5vw,64px)}
.tt{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:26px 26px 28px;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.tt:hover{transform:translateY(-4px);box-shadow:0 24px 44px -30px rgba(26,25,22,.4)}
.tt-ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:#1a1916;color:#f5f3ee;margin-bottom:22px;box-shadow:0 10px 22px -12px rgba(26,25,22,.6)}
.tt-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tt-ic svg .x{stroke:#f0a64a;stroke-width:1.9}
.tt h3{font-size:20px;letter-spacing:-.02em;font-weight:600;line-height:1.2}
.tt p{color:var(--mute);font-size:15.5px;line-height:1.5;margin-top:8px}
@media (max-width:900px){.trust-head{grid-template-columns:1fr}.trust-tiles{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.trust-tiles{grid-template-columns:1fr}}

/* ================= FAQ, reworked ================= */
.faq-note{margin-top:24px;color:var(--mute);font-size:16px;line-height:1.5;max-width:22em}
.faq-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;cursor:pointer;font-size:clamp(17px,1.4vw,20px);font-weight:600;letter-spacing:-.015em}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary i{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-hi);position:relative;transition:background .3s,transform .4s var(--ease)}
.faq-list summary i::before,.faq-list summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.6px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .4s var(--ease)}
.faq-list summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-list details[open] summary i{background:var(--ink)}
.faq-list details[open] summary i::before,.faq-list details[open] summary i::after{background:var(--bg)}
.faq-list details[open] summary i::after{transform:translate(-50%,-50%) rotate(0)}
.faq-list details p{color:var(--mute);font-size:16.5px;line-height:1.6;padding:0 54px 24px 0;max-width:40em;animation:faq-in .4s var(--ease)}
@keyframes faq-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mission-art .bl{animation:none}.why-bars i::after,.why-donut .d-fg,.apps span{transition:none}}
.faq-list summary::after{content:none}
.faq-list summary{position:static;padding-right:0}
.why-donut p{display:flex;align-items:baseline;justify-content:center}
.why-donut p small{font-size:.5em}
.why-donut p{align-items:center}
.why-donut p small{margin-top:.55em}
@media (max-width:560px){
  .tt{display:grid;grid-template-columns:46px 1fr;column-gap:16px;row-gap:4px;padding:18px 18px 20px;border-radius:20px}
  .tt-ic{grid-row:1/3;width:46px;height:46px;margin:2px 0 0;border-radius:14px}
  .tt-ic svg{width:23px;height:23px}
  .tt h3{font-size:18px}.tt p{margin-top:0;font-size:14.5px}
}

/* story heading in ink, readable */
.story-kicker{color:var(--ink);font-weight:600}

/* bento animations wait until the card is properly on screen, then start from the beginning */
.bits .card:not(.play) *,.bits .card:not(.play) *::after{animation-play-state:paused!important}

/* ================= full picture v3: phone level with the heading, report that adds up ================= */
@media (min-width:861px){
  .seen-head{grid-column:1;grid-row:1}
  .report{grid-column:1;grid-row:2}
  .seen-stat{grid-column:1;grid-row:3}
  .seen-phone{grid-column:2;grid-row:1/4;align-self:center}
  .sc-phone.sn{height:min(82vh,780px)}
}
.rp-row.ghost{color:#9a6a1c}
.rp-row.ghost span:first-child{font-weight:600}
.rp-row.ghost b{color:#b0741c;text-decoration:none}
.rp-hidden{color:#9a6a1c;max-height:0;overflow:hidden;opacity:0;padding-top:0!important;transition:max-height .5s var(--ease),opacity .5s var(--ease),padding .5s var(--ease)}
.rp-hidden b{color:#b0741c}
.seen[data-k="1"] .rp-hidden,.seen[data-k="2"] .rp-hidden,.seen[data-k="3"] .rp-hidden,.seen[data-k="4"] .rp-hidden{max-height:40px;opacity:1;padding-top:8px!important}
.rp-real{margin-top:8px;padding-top:10px!important;border-top:1px dashed #d6d3cc;font-weight:600;color:#2f2d29}
.rp-real b{color:#1d7a49;font-size:15px}
.seen.done .report{opacity:1;filter:none}
.seen-src{color:var(--ink)}
.seen-src a,#whynow .source a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.seen-src a:hover,#whynow .source a:hover{color:#b0741c}
@media (max-width:860px){.rp-hidden{display:none}.rp-real b{font-size:13px}}

/* ================= mission v3: two-line headline, words and balloons below ================= */
.mission2{font-size:clamp(38px,5.5vw,84px);line-height:.98;letter-spacing:-.05em;font-weight:600}
.mission2 em{font-weight:400;letter-spacing:-.03em}
.mission-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr);gap:clamp(32px,6vw,96px);align-items:end;margin-top:clamp(36px,5vw,64px)}
.mission-row .mission-body{margin-top:0;align-self:center}
.mission-row .mission-art{padding-top:20px}
.mission-row .tri{width:min(100%,270px)}
@media (max-width:860px){.mission-row{grid-template-columns:1fr}.mission2 br.dk{display:none}}

/* ================= why now v3: one clear story in the balloon colours ================= */
.why-head{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,5vw,80px);align-items:end}
.why-lede{font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--mute);max-width:30em}
.why-card{position:relative;overflow:hidden;border:0}
.why-card .why-t b{font-weight:600}
.why-bl{position:absolute;right:20px;top:18px;width:58px;height:auto;filter:drop-shadow(0 10px 14px rgba(26,25,22,.18));animation:ck-bob 6s ease-in-out infinite}
.why-apps .why-bl{width:46px}
.wc-blue{background:#e8edfb}.wc-blue .why-k{color:#2346d6}.wc-blue .why-big{color:#2346d6}
.wc-blue .why-bars i{background:#d3dcf5}.wc-blue .why-bars i::after{background:#9fb1e6}.wc-blue .why-bars .now i::after{background:linear-gradient(90deg,#5b7cf0,#2346d6)}
.wc-purple{background:#f1e8fb}.wc-purple .why-k{color:#7a35d0}
.wc-purple .why-donut .d-bg{stroke:#e2d2f5}.wc-purple .why-donut .d-fg{stroke:#8b3fe0}.wc-purple .why-donut p{color:#7a35d0}
.wc-gold{background:#fbf1dc}.wc-gold .why-k{color:#a06a12}
.wc-gold .apps span{background:#f3e3c0;color:#9c8a66}
@keyframes ck-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px) rotate(2deg)}}
#whynow .source{color:var(--ink);font-size:13px}
@media (max-width:900px){.why-head{grid-template-columns:1fr}}

/* ================= privacy v3: where your data goes ================= */
.flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:0;margin-top:clamp(44px,5vw,64px)}
.fl-node{border-radius:24px;padding:24px 22px 26px;display:flex;flex-direction:column;gap:8px}
.fl-node b{font-size:19px;letter-spacing:-.02em;font-weight:600}
.fl-node small{font-size:14.5px;line-height:1.45;color:var(--mute)}
.fl-ic{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;margin-bottom:10px;color:#fff}
.fl-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.n-phone{background:#e8edfb}.n-phone .fl-ic{background:#2346d6}
.n-cloud{background:#e5f2ea}.n-cloud .fl-ic{background:#1d7a49}
.n-none{background:#fbe9e3}.n-none .fl-ic{background:#c4452a}
.fl-arrow{width:clamp(70px,9vw,130px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:0 6px;text-align:center}
.fl-arrow i{position:relative;display:block;width:100%;height:2px;background:repeating-linear-gradient(90deg,#1a1916 0 6px,transparent 6px 11px);background-size:22px 2px;animation:fl-move 1s linear infinite}
.fl-arrow i::after{content:"";position:absolute;right:-2px;top:50%;width:8px;height:8px;border-top:2px solid #1a1916;border-right:2px solid #1a1916;transform:translateY(-50%) rotate(45deg)}
.fl-arrow span{font-size:11.5px;line-height:1.3;color:var(--mute)}
.fl-arrow.stop i{background:repeating-linear-gradient(90deg,#c4452a 0 6px,transparent 6px 11px);background-size:22px 2px;animation:none;width:60%}
.fl-arrow.stop i::after{border:0;width:14px;height:14px;right:-14px;background:linear-gradient(45deg,transparent 45%,#c4452a 45% 55%,transparent 55%),linear-gradient(-45deg,transparent 45%,#c4452a 45% 55%,transparent 55%);transform:translateY(-50%)}
.fl-arrow.stop span{color:#c4452a;font-weight:600}
@keyframes fl-move{to{background-position:22px 0}}
.pv-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.pv-col{border-radius:24px;padding:26px 26px 22px;background:var(--card);border:1px solid var(--line)}
.pv-k{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:12px}
.pv-never .pv-k{color:#c4452a}.pv-always .pv-k{color:#1d7a49}
.pv-col ul{list-style:none;display:grid;gap:2px}
.pv-col li{display:flex;align-items:center;gap:14px;padding:11px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.4}
.pv-col li:first-child{border-top:0}
.pv-col li span{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center}
.pv-col li svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pv-never li span{background:#fbe9e3;color:#c4452a}
.pv-always li span{background:#e5f2ea;color:#1d7a49}
@media (max-width:900px){
  .flow{grid-template-columns:1fr}
  .fl-arrow{width:auto;flex-direction:row;padding:10px 0;justify-content:flex-start;gap:12px;margin-left:44px}
  .fl-arrow i{width:2px;height:34px;background:repeating-linear-gradient(180deg,#1a1916 0 6px,transparent 6px 11px);animation:none}
  .fl-arrow i::after{right:auto;left:50%;top:auto;bottom:-2px;transform:translateX(-50%) rotate(135deg)}
  .fl-arrow.stop i{width:2px;height:28px;background:repeating-linear-gradient(180deg,#c4452a 0 6px,transparent 6px 11px)}
  .fl-arrow.stop i::after{left:-6px;right:auto;bottom:-16px;top:auto;transform:none}
  .fl-arrow span{text-align:left}
  .pv-cols{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.fl-arrow i,.why-bl{animation:none}}
.why-head{grid-template-columns:1fr}
.why-head .why-lede{max-width:44em}
.wc-gold .apps .fm-pill{background:var(--ink);color:var(--bg)}
.why-k{padding-right:70px}
@media (max-width:860px){
  .rp-stamp{top:8px;right:10px;transform:rotate(-6deg) scale(1.2)}
  .seen[data-k="4"] .rp-stamp{transform:rotate(-6deg) scale(1)}
}

/* hero: the checkup button gets an arrow and turns black on hover */
.hero-check{transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.hero-check .arr{transition:transform .3s var(--ease)}
.hero-check:hover{background:#1a1916;color:#fff}
.hero-check:hover .arr{transform:translateX(4px)}

/* full picture: the number gets room to breathe */
.seen-stat{gap:6px!important;align-items:baseline}
.seen-num{font-size:clamp(48px,4.6vw,72px)}
.seen-line{font-size:clamp(15px,1.15vw,17px);max-width:30em}
.seen-src{margin-top:6px}
.seen-src a{font-size:12px;color:var(--ink)}
@media (min-width:861px){.seen-wrap{row-gap:28px}}

/* mission v4: words on the left with their own button, balloons on the right */
.mission3{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(240px,.65fr);gap:clamp(32px,6vw,96px);align-items:center}
.m3-title{font-size:clamp(40px,4.6vw,72px);line-height:1;letter-spacing:-.045em;font-weight:600;max-width:14em}
.m3-title em{font-weight:400;letter-spacing:-.03em}
.m3-body{font-size:clamp(18px,1.4vw,21px);line-height:1.45;color:var(--mute);max-width:30em;margin-top:clamp(22px,3vw,32px)}
.m3-btn{margin-top:30px}
.m3-art{display:flex;justify-content:center}
.m3-art .tri{width:min(100%,300px);height:auto;overflow:visible}
.m3-art .bl{transform-box:fill-box;transform-origin:50% 100%;animation:tri-bob 6s ease-in-out infinite}
.m3-art .b-wht{animation-duration:7s;animation-delay:-2s}
.m3-art .b-grn{animation-duration:6.5s;animation-delay:-4s}
.m3-art .bl ellipse:first-child{filter:drop-shadow(0 12px 14px rgba(26,25,22,.18))}
.m3-art .strings path{animation:tri-sway 6s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 0}
@keyframes tri-sway{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (max-width:860px){.mission3{grid-template-columns:1fr}.m3-art{order:-1}.m3-art .tri{width:200px}}

/* why now: plain cards again; only the balloons bring colour */
.why-card{background:var(--card);border:1px solid var(--line)}
.why-card .why-k{color:var(--faint)}
.why-card .why-big{color:var(--ink)}
.why-card .why-bars i{background:#e6dfd2}
.why-card .why-bars i::after{background:#c9c1b2}
.why-card .why-bars .now i::after{background:linear-gradient(90deg,#d08a1f,#a8380a)}
.why-card .why-donut .d-bg{stroke:#e6dfd2}
.why-card .why-donut .d-fg{stroke:#b0741c}
.why-card .why-donut p{color:var(--ink)}
.why-card .apps span{background:#ebe5d9;color:#8d867a}
.why-card .apps .fm-pill{background:var(--ink);color:var(--bg)}

/* mission: the tricolour balloons photo, floating gently */
.m3-art .tri-img{width:min(100%,380px);height:auto;filter:drop-shadow(0 22px 28px rgba(26,25,22,.16));animation:tri-float 7s ease-in-out infinite;transform-origin:50% 90%}
@keyframes tri-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(1.2deg)}}
@media (max-width:860px){.m3-art .tri-img{width:240px}}
@media (prefers-reduced-motion:reduce){.m3-art .tri-img{animation:none}}

/* =================== MOBILE PASS (Oct 23) =================== */
.fly-layer img{transform-origin:0 0;backface-visibility:hidden}
.faq-list details p{animation:none;overflow:hidden}
.faq-list summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.faq-list summary i{transition:background .35s var(--ease)}
.faq-list details.closing summary i{background:transparent}
.faq-list details.closing summary i::before,.faq-list details.closing summary i::after{background:var(--ink)}
.faq-list details.closing summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
/* get the app: balloons float only inside the star panel */
.cta-art{overflow:hidden}
/* goals: both rows always move (no mask on the moving rows; Safari can freeze a masked, animated layer) */
.track{animation-name:slideL;will-change:transform;backface-visibility:hidden}
.track.rev{animation-name:slideR;animation-direction:normal}
@keyframes slideL{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes slideR{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}

@media (max-width:760px){
  /* hero: the two buttons side by side */
  .dk-w{display:none}
  .phero .ctas{flex-wrap:nowrap;gap:10px}
  .phero .ctas .btn{flex:1 1 auto;justify-content:center;height:50px;padding:0 14px;font-size:15px;white-space:nowrap}
  .phero .ctas .hero-check{flex-grow:1.35}
  /* story: shorter pin, lighter per-word effect for phones */
  .story{height:185vh}
  .sw{filter:none;will-change:auto}
  .showcase{height:135vh}
  .fly-layer img{filter:none}
}
@media (max-width:860px){
  /* do more: everything sits below the bar and fits one screen */
  .more{height:260vh}
  .more-stage{padding-top:78px;padding-bottom:16px;align-items:center}
  .more-title{margin-top:0}
  .sc-phone.mp{height:min(calc(100svh - 300px),500px)}
  .more-steps{min-height:104px}
  /* the full picture: no pin on phones. Report first with every row, then a big phone that fills as you scroll */
  .seen{height:auto;padding:96px 0 84px}
  .seen-stage{position:static;height:auto;padding-top:0;overflow:visible}
  .seen-wrap{gap:22px}
  .seen-head .eyebrow{display:block}
  .seen-title{font-size:32px;line-height:1.05}
  .seen-grid{gap:30px}
  .report{padding:16px 18px 14px}
  .report::before{content:none}
  .rp-top,.rp-rows,.rp-name{display:revert}
  .rp-top{display:flex}
  .seen .rp-row.ghost{max-height:40px!important;opacity:.62!important;padding:8px 0!important}
  .seen .rp-hidden{display:none}
  .seen .rp-stamp{opacity:1;top:14px;right:14px;transform:rotate(-6deg) scale(1)}
  .rp-foot{font-size:12.5px;padding-top:6px}
  .sc-phone.sn{height:min(78svh,660px)}
  .seen-stat{flex-direction:column;align-items:flex-start;gap:8px!important;opacity:1;transform:none}
  .seen-num{font-size:64px}
  .seen-line{font-size:16px;line-height:1.45}
  .seen-src a{font-size:13px;line-height:1.5}
  /* mission: the heading first, then the balloons, then the words, all on one screen */
  #manifesto{padding:88px 0}
  .mission3{gap:0}
  .m3-copy{display:contents}
  .mission3 .eyebrow{order:1;margin-bottom:14px}
  .m3-title{order:2;font-size:clamp(34px,9.6vw,44px)}
  .m3-art{order:3;margin:18px 0 6px}
  .m3-art .tri-img{width:min(54vw,220px)}
  .m3-body{order:4;margin-top:6px;font-size:17px}
  .m3-btn{order:5;justify-self:start;margin-top:22px}
  /* why now: heading and one card on screen; swipe for the next */
  #whynow{padding:88px 0}
  .why-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:28px -20px 0;padding:0 20px 6px;scroll-padding:0 20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .why-grid::-webkit-scrollbar{display:none}
  .why-card{flex:0 0 86%;scroll-snap-align:start;min-height:0;padding:22px 22px 24px}
  .why-head .why-lede{font-size:16px}
  #whynow .display.md{font-size:clamp(32px,9vw,40px)}
  #whynow .source{margin-top:16px}
}
/* bit by bit: the freedom date sits clear of the balloons on phones; cards ease in one by one */
@media (max-width:640px){
  .bt{top:79%}
  .bt-free{left:6%;right:auto;top:7%;display:flex;align-items:center;gap:12px;text-align:left}
  .bt-star{width:40px;margin:0}
  .bt-free p{font-size:32px}
  .bt-free p span{font-size:14px;margin-bottom:4px}
  .bits .card.reveal{transform:translateY(48px) scale(.97);transition:opacity .9s var(--ease),transform .9s var(--ease)}
  .bits .card.reveal.in{transform:none}
}
@media (max-width:640px){
  .b-free{--rise:-72px}
  .bt-free{top:5%}
  .bt-free p{animation-name:bt-date-m}
  .rp-top span:last-child{display:none}
  .rp-row{grid-template-columns:minmax(0,1fr) auto 70px;gap:8px;font-size:12px}
  .rp-row span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rp-row span:nth-child(2){font-size:10.5px}
}
@keyframes bt-date-m{0%,72%{opacity:.5}80%,94%{opacity:1}100%{opacity:.5}}
@media (max-width:860px){.why-grid{align-items:flex-start}}
.cta-art::before{content:"";position:absolute;left:0;right:0;top:0;height:90px;z-index:2;pointer-events:none;background:linear-gradient(#faf8f4,rgba(250,248,244,0))}

/* credit report: printed on the real paper (9-slice so the header bar and the curled corner never stretch) */
.report{background:none!important;border-style:solid;border-color:transparent;border-width:54px 46px 66px 38px;border-image:url(assets/report-paper.webp) 128 110 160 90 fill / 54px 46px 66px 38px stretch;border-radius:0;box-shadow:none;padding:6px 6px 0 4px;filter:drop-shadow(0 26px 30px rgba(26,25,22,.10))}
.report .rp-top{margin:-31px 0 18px;height:29px;align-items:center;padding:0 10px;border-bottom:0;color:#8f8c84}
.report .rp-row{border-bottom-color:rgba(0,0,0,.07)}
.report .rp-stamp{top:4px}
@media (max-width:860px){
  .report{padding:6px 4px 0 2px;border-width:50px 40px 60px 32px;border-image-width:50px 40px 60px 32px}
  .report .rp-top{margin-top:-29px;height:27px}
  .seen .rp-stamp{top:2px;right:2px}
}
@media (max-width:640px){
  .report .rp-row{grid-template-columns:minmax(0,1fr) auto 58px;gap:8px;font-size:11px}
  .report .rp-row span:nth-child(2){font-size:9.5px;letter-spacing:0}
  .report .rp-foot{font-size:11px;gap:8px}
  .report .rp-foot b{white-space:nowrap}
  .report .rp-name{font-size:17px}
}

/* =================== MOBILE PASS 2 =================== */
/* why now: balloons hang on black thread; the first two charts take their balloon's colour */
.why-bl{display:flex;flex-direction:column;align-items:center;width:58px;filter:none}
.why-bl img{width:100%;height:auto;filter:drop-shadow(0 10px 14px rgba(26,25,22,.18))}
.why-bl i{display:block;width:1.3px;height:44px;margin-top:-2px;background:#1a1916;border-radius:1px;transform-origin:50% 0;animation:why-sway 6s ease-in-out infinite}
.why-apps .why-bl{width:46px}
.why-apps .why-bl i{height:38px}
@keyframes why-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.why-card.wc-home .why-bars i{background:#dfe5f5}
.why-card.wc-home .why-bars i::after{background:#8fa3dc}
.why-card.wc-home .why-bars .now i::after{background:linear-gradient(90deg,#3b62d1,#1943ac)}
.why-card.wc-home .why-big{color:#1943ac}
.why-card.wc-card .why-donut .d-bg{stroke:#ece2f8}
.why-card.wc-card .why-donut .d-fg{stroke:#8b3ee1}
.why-card.wc-card .why-donut p{color:#7a35d0}
.why-dots{display:none}
@media (prefers-reduced-motion:reduce){.why-bl i{animation:none}}

@media (max-width:760px){
  /* story: bigger words, more air, still one screen */
  .story-text{font-size:clamp(22px,min(7.6vw,3.65svh),32px);line-height:1.34;letter-spacing:-.03em}
  .story-kicker{margin-bottom:20px}
}
@media (max-width:860px){
  /* do more: same type as "Every loan, in one hand." */
  .more-title{font-size:30px;line-height:1.02;letter-spacing:-.04em}
  .more-steps h3{font-size:18px}
  .more-steps p{font-size:15px;line-height:1.55;color:var(--mute)}
  /* the full picture: phones show only the app, the paper report is for the big screen */
  .seen .report{display:none}
  /* why now: every card the same height, snapping one at a time, with dots */
  .why-grid{align-items:stretch}
  .why-card{scroll-snap-stop:always}
  .why-dots{display:flex;justify-content:center;gap:8px;margin-top:16px}
  .why-dots i{width:7px;height:7px;border-radius:50%;background:rgba(26,25,22,.18);transition:width .3s var(--ease),background .3s}
  .why-dots i.on{width:22px;border-radius:9px;background:var(--ink)}
  /* get freeeme: the two store buttons side by side */
  .stores{flex-wrap:nowrap;gap:10px}
  .store{flex:1 1 0;min-width:0;height:56px;padding:0 12px;gap:9px;justify-content:center;border-radius:14px}
  .store svg{width:21px;height:21px}
  .store span{font-size:16px;white-space:nowrap}
  .store small{font-size:10px}
}

/* =================== PRIVATE BY DESIGN: a row of cards you slide through (CRED's "bit by bit" row, in freeeme's paper style) =================== */
.pc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.pc-lede{margin-top:20px;color:var(--mute);font-size:clamp(16px,1.25vw,19px);line-height:1.5;max-width:34em}
.pc-nav{display:flex;gap:10px;flex:none}
.pc-arrow{width:52px;height:52px;border-radius:50%;border:1px solid var(--line-hi);background:var(--card-hi);color:var(--ink);font-size:20px;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),opacity .3s}
.pc-arrow:hover{background:var(--ink);color:var(--bg)}
.pc-arrow:disabled{opacity:.3;pointer-events:none}
.pc-row{display:flex;gap:clamp(14px,1.6vw,24px);overflow-x:auto;scroll-snap-type:x mandatory;margin-top:clamp(36px,4vw,56px);padding:0 calc((100% - var(--col)) / 2) 10px;scroll-padding-inline:calc((100% - var(--col)) / 2);scrollbar-width:none;cursor:grab;-webkit-overflow-scrolling:touch}
.pc-row::-webkit-scrollbar{display:none}
.pc-row.drag{cursor:grabbing;scroll-snap-type:none}
.pc-row.drag *{pointer-events:none}
.pc{position:relative;flex:0 0 clamp(290px,27vw,380px);aspect-ratio:.66;border-radius:26px;overflow:hidden;background:var(--top);border:1px solid var(--line);scroll-snap-align:start;isolation:isolate}
.pc-img{position:absolute;left:0;right:0;bottom:0;width:100%;height:auto;z-index:-1;transition:transform 1.2s var(--ease);transform-origin:50% 100%;user-select:none;-webkit-user-drag:none}
.pc:hover .pc-img{transform:scale(1.035)}
.pc-copy{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(24px,2.4vw,32px) 22px 0}
.pc-lab{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.pc-lab svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pc-title{margin-top:12px;font-size:clamp(24px,2vw,30px);line-height:1.08;letter-spacing:-.035em;font-weight:600;color:var(--ink)}
.pc-btn{margin-top:16px;display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 16px;border:1px solid rgba(26,25,22,.35);border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);transition:background .3s var(--ease),color .3s var(--ease)}
.pc-btn span{transition:transform .3s var(--ease)}
.pc-btn:hover{background:var(--ink);color:var(--bg)}
.pc-btn:hover span{transform:translateX(3px)}
.pc-row.reveal{opacity:1;transform:none}
.pc{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.pc-row.in .pc{opacity:1;transform:none}
.pc:nth-child(2){transition-delay:.08s}.pc:nth-child(3){transition-delay:.16s}.pc:nth-child(4){transition-delay:.24s}.pc:nth-child(5){transition-delay:.32s}
@media (max-width:760px){
  .pc-head{display:block}
  .pc-nav{display:none}
  .pc{flex-basis:80vw}
  .pc-title{font-size:26px}
}
@media (prefers-reduced-motion:reduce){.pc-img{transition:none}}

/* =================== Oct 24 corrections =================== */
/* the full picture: the sentence sits beside the 34%, starting at its top */
.seen-stat{flex-direction:row!important;align-items:flex-start!important;gap:clamp(12px,1.6vw,20px)!important}
.seen-stat>div{padding-top:.35em}
.seen-num{line-height:.86}
@media (max-width:860px){
  .seen-stat{gap:14px!important}
  .seen-num{font-size:56px}
  .seen-stat>div{padding-top:4px}
  .seen-line{font-size:15px;line-height:1.4}
}
/* why now: the numbers and charts in ink */
.why-card.wc-home .why-big,.why-card .why-big{color:var(--ink)}
.why-card.wc-home .why-bars i,.why-card .why-bars i{background:#e8e4dc}
.why-card.wc-home .why-bars i::after,.why-card .why-bars i::after{background:#a19b90}
.why-card.wc-home .why-bars .now i::after,.why-card .why-bars .now i::after{background:var(--ink)}
.why-card.wc-card .why-donut .d-bg{stroke:#e8e4dc}
.why-card.wc-card .why-donut .d-fg,.why-card .why-donut .d-fg{stroke:var(--ink)}
.why-card.wc-card .why-donut p,.why-card .why-donut p{color:var(--ink)}
/* private by design: pinned; scrolling down slides the row to the last card */
#trust.pc-pin{padding:0;position:relative}
.pc-pin .pc-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:64px;overflow:hidden}
.pc-pin .pc-row{overflow:hidden;scroll-snap-type:none;cursor:default}
.pc-pin .pc{flex:0 0 auto;height:min(58svh,560px);width:auto;aspect-ratio:.66}
@media (max-width:760px){
  .pc-pin .pc-stage{padding-top:70px}
  .pc-pin .pc{height:min(56svh,500px)}
  .pc-pin .pc-row{margin-top:24px}
  .pc-pin .pc-lede{font-size:15px;margin-top:12px}
}
@media (max-height:700px){.pc-pin .pc-lede{display:none}}

/* =================== Oct 24 (b) =================== */
/* top bar: the hovered link turns ink and bold, on a soft pill, so you can see where you are */
.nav-links{gap:10px}
.nav-links a{padding:8px 13px;border-radius:99px;transition:color .2s var(--ease),background .2s var(--ease),text-shadow .2s var(--ease)}
.nav-links a:hover,.nav-links a:focus-visible,.nav-links a[aria-current]{color:var(--ink);background:rgba(26,25,22,.07);text-shadow:.35px 0 0 currentColor,-.35px 0 0 currentColor;font-weight:inherit}
.nav-links a[aria-current]{background:rgba(26,25,22,.1)}
@media (max-width:1180px){.nav-links{gap:2px;font-size:13.5px}.nav-links a{padding:8px 10px}}
@media (min-width:861px) and (max-width:1020px){.nav-links a[href$="#faq"]{display:none}}

/* hero buttons on phones: "Financial Health Checkup →" and "Manifesto" side by side */
@media (max-width:760px){
  .phero .ctas .btn{font-size:14.5px;padding:0 12px}
  .phero .ctas .hero-check{flex-grow:2}
}
@media (max-width:370px){.phero .ctas .btn{font-size:13.5px;padding:0 10px}}

/* footer: a closing line with the two actions, link columns, and a giant wordmark with balloons drifting up */
.fx{padding:clamp(72px,9vw,120px) 0 28px;overflow:hidden;position:relative}
.fx-top{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-bottom:clamp(40px,5vw,64px);border-bottom:1px solid var(--line)}
.fx-say{font-size:clamp(32px,4.4vw,60px);line-height:1.02;letter-spacing:-.045em;font-weight:600}
.fx-say em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.03em}
.fx-ctas{display:flex;gap:10px;flex-wrap:wrap}
.fx-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-top:clamp(36px,4vw,52px)}
.fx-brand .muted{margin-top:0;font-size:16px;line-height:1.5}
.fx-col{display:flex;flex-direction:column;gap:12px;font-size:15px}
.fx-col p{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.fx-col a{color:var(--mute);width:fit-content;transition:color .2s}
.fx-col a:hover{color:var(--ink)}
.fx-mark{position:relative;margin-top:clamp(40px,6vw,72px);text-align:center;line-height:.8;user-select:none}
.fx-word{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(96px,24vw,360px);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1.2px rgba(26,25,22,.16);background:linear-gradient(180deg,rgba(26,25,22,.08),rgba(26,25,22,0) 85%);-webkit-background-clip:text;background-clip:text}
.fx-b{position:absolute;bottom:18%;width:clamp(34px,4.4vw,64px);opacity:0;filter:drop-shadow(0 12px 14px rgba(26,25,22,.15));animation:fx-up 9s linear infinite}
.fx-b.b1{left:14%}.fx-b.b2{left:38%;animation-delay:2.2s;width:clamp(30px,3.8vw,54px)}.fx-b.b3{left:63%;animation-delay:4.4s}.fx-b.b4{left:84%;animation-delay:6.6s;width:clamp(26px,3vw,44px)}
@keyframes fx-up{0%{opacity:0;transform:translateY(40px)}12%{opacity:.95}70%{opacity:.9}100%{opacity:0;transform:translateY(-260px) rotate(6deg)}}
.fx .foot-base{margin-top:8px}
@media (max-width:760px){
  .fx-top{display:block}
  .fx-ctas{margin-top:22px}
  .fx-ctas .btn{flex:1 1 100%;justify-content:center}
  .fx-cols{grid-template-columns:1fr 1fr}
  .fx-brand{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.fx-b{animation:none;opacity:.9}}
.nav-links a{white-space:nowrap}
@media (min-width:861px) and (max-width:1100px){.nav-links a[href$="#faq"]{display:none}}
@media (min-width:861px) and (max-width:980px){.nav-links a[href$="#trust"]{display:none}}
.nav.dark .nav-links a:hover,.nav.dark .nav-links a:focus-visible,.nav.dark .nav-links a[aria-current]{color:#fff;background:rgba(255,255,255,.14)}
.fx-mark{overflow:hidden;padding-top:clamp(90px,12vw,170px);margin-top:clamp(0px,2vw,20px)}
.fx-b{bottom:22%}
@media (max-width:760px){
  .fx-ctas .btn{font-size:15px}
  .fx-b{bottom:30%}
  @keyframes fx-up{0%{opacity:0;transform:translateY(30px)}15%{opacity:.95}70%{opacity:.9}100%{opacity:0;transform:translateY(-120px) rotate(6deg)}}
}

/* =================== Oct 25 =================== */
/* hero buttons: one clean label for each screen size */
.lb-m{display:none}
@media (max-width:760px){.phero .ctas .lb-d{display:none}.phero .ctas .lb-m{display:inline}}
/* footer wordmark: the logo itself, solid (no outlines, so overlapping letters never show a line), with its pen swash */
.fx-word{position:relative;display:inline-block;-webkit-text-stroke:0;color:transparent;letter-spacing:-.035em;padding:0 .04em .12em;
  background:linear-gradient(180deg,#d9d3c7 0%,#e6e1d7 55%,#f2efe9 100%);-webkit-background-clip:text;background-clip:text}
.fx-word svg{position:absolute;left:0;right:0;bottom:.02em;width:100%;height:.14em;overflow:visible;fill:none;stroke:#e1dbd0;stroke-width:3.2;stroke-linecap:round;vector-effect:non-scaling-stroke}
@media (min-width:761px){.fx-word svg{stroke-width:5}}
/* footer small print in ink */
.fx .foot-base{color:var(--ink)}
.pc-lede a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.fx-mark{padding-top:clamp(56px,7vw,110px);margin-top:clamp(8px,2vw,24px)}

/* manifesto: the vision, under the mission */
.m-vision{display:grid;grid-template-columns:minmax(160px,.35fr) 1fr;gap:clamp(20px,4vw,64px);align-items:start;margin-top:clamp(48px,6vw,88px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}
.m-vision .eyebrow{margin-top:.6em}
.m-vision-t{font-size:clamp(30px,3.8vw,56px);line-height:1.04;letter-spacing:-.04em;font-weight:600;max-width:18em}
.m-vision-t em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.03em}
@media (max-width:760px){.m-vision{grid-template-columns:1fr;gap:10px}}
/* footer: the big f has room at the top */
.fx-word{line-height:1.02;padding-top:.08em}
.fx-mark{line-height:1}
/* footer links: an underline draws in on hover, so you know it's a link */
.fx-col a,.foot-base a{position:relative;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;padding-bottom:2px;transition:color .2s,background-size .3s var(--ease)}
.fx-col a:hover,.fx-col a:focus-visible{color:var(--ink);background-size:100% 1px}
.fx-word svg{bottom:.16em}

/* =================== phone pass 3 (Oct 25) =================== */
@media (max-width:760px){
  /* hero: picture a little shorter so the words and both buttons sit on the first screen */
  .phero--meadow .phero-bg,.phero-bg{height:86vw}
  .phero-floats{height:86vw}
  .phero--meadow .phero-fade{background:linear-gradient(180deg,transparent calc(86vw - 20vw),#f5f3ee 86vw,#f5f3ee 100%)}
  .phero-fade{background:linear-gradient(180deg,transparent calc(86vw - 22vw),#f5f3ee 86vw,#f5f3ee 100%)}
  .phero-inner{margin-top:-4vw;padding-bottom:36px}
  .phero .eyebrow{color:var(--ink);font-weight:600}
  .phero-h1{font-size:clamp(40px,11.4vw,52px)}
  .phero-lede{font-size:16px;line-height:1.5;margin-top:14px}
  .phero .ctas{margin-top:20px}
  .phero-trust{flex-wrap:nowrap;gap:18px;margin-top:16px;font-size:13px;white-space:nowrap}
  .phero-trust li{gap:7px}
  /* goals: rows are moved by script on phones */
  .marquee .track{animation:none!important;will-change:transform}
  .marquee{-webkit-mask-image:none;mask-image:none}
}
@media (max-width:860px){
  /* do more: a little lower under the bar */
  .more-stage{padding-top:96px}
  /* why now: pinned while the cards slide */
  #whynow.wn-pin{padding:0;position:relative}
  .wn-pin .wn-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:64px;overflow:hidden}
  .wn-pin .why-grid{overflow:hidden;scroll-snap-type:none}
  .wn-pin .why-card{scroll-snap-align:none}
}
@media (max-width:860px) and (max-height:760px){.wn-pin .why-lede{display:none}}
@media (max-width:760px){.story-text{font-size:clamp(22px,min(7.8vw,3.4svh),34px);line-height:1.46}}
@media (max-width:860px){
  .wn-pin .wn-stage{justify-content:flex-start;padding-top:84px}
  .wn-pin .display.md{font-size:clamp(28px,8vw,36px)}
  .wn-pin .why-lede{font-size:15px;line-height:1.45;margin-top:12px}
  .wn-pin .why-grid{margin-top:18px}
  .wn-pin .why-dots{margin-top:12px}
  .wn-pin .source{margin-top:10px;font-size:12px;line-height:1.45}
}
@media (max-width:860px){
  #whynow.wn-pin+.source{width:var(--col);margin:0 auto;padding:18px 0 48px;font-size:12.5px;line-height:1.5}
}
#whynow+.source{color:var(--mute)}
#whynow+.source a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* story (phones): bigger words and more air between lines, measured to fit one screen */
@media (max-width:760px){
  .story-inner{width:calc(100% - 32px)}
  .story-kicker{margin-bottom:14px}
  .story-text{font-size:clamp(22px,min(7.7vw,3.9svh),34px);line-height:1.55;letter-spacing:-.035em}
}
@media (max-width:370px){.story-text{font-size:clamp(21px,min(7.3vw,3.9svh),30px)}}

/* =================== CONTACT PAGE =================== */
.ct-page{background:var(--bg)}
.ct-hero{padding:clamp(130px,16vw,190px) 0 clamp(20px,3vw,40px);overflow:hidden}
.ct-hero-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:40px;align-items:center}
.ct-lede{margin-top:22px;font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--mute);max-width:32em}
.ct-mail{display:inline-block;margin-top:26px;font-family:var(--serif);font-weight:600;font-size:clamp(22px,2.4vw,32px);letter-spacing:-.02em;color:var(--ink);background:linear-gradient(currentColor,currentColor) 0 100%/100% 1.5px no-repeat;padding-bottom:4px;transition:background-size .3s var(--ease)}
.ct-mail:hover{background-size:0 1.5px;background-position:100% 100%}
.ct-art{position:relative;height:clamp(240px,28vw,380px)}
.ct-art img{position:absolute;filter:drop-shadow(0 22px 26px rgba(26,25,22,.16));animation:ct-bob 7s ease-in-out infinite}
.ct-art .b1{width:46%;left:8%;top:22%}
.ct-art .b2{width:24%;right:10%;top:4%;animation-duration:6s;animation-delay:-2s}
.ct-art .b3{width:36%;right:2%;bottom:4%;animation-duration:8s;animation-delay:-4s}
@keyframes ct-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(2deg)}}
.ct-ways{padding-top:clamp(30px,4vw,56px)}
.ct-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.ct-card{position:relative;display:flex;flex-direction:column;gap:10px;padding:24px 22px 22px;border-radius:26px;background:var(--card);border:1px solid var(--line);transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s}
.ct-card img{width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(26,25,22,.14));margin-bottom:6px}
.ct-card h3{font-size:20px;font-weight:600;letter-spacing:-.02em}
.ct-card p{font-size:15px;line-height:1.5;color:var(--mute);flex:1}
.ct-go{margin-top:6px;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.ct-go span{display:inline-block;transition:transform .3s var(--ease)}
.ct-card:hover{transform:translateY(-4px);background:#fff;box-shadow:0 24px 44px -28px rgba(26,25,22,.35)}
.ct-card:hover .ct-go span{transform:translateX(4px)}
.ct-form-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:start}
.ct-note{margin-top:20px;color:var(--mute);font-size:16px;line-height:1.55;max-width:26em}
.ct-follow{margin-top:34px}
.ct-follow>p{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
.ct-form{display:grid;gap:16px;padding:clamp(22px,3vw,34px);border-radius:28px;background:var(--card);border:1px solid var(--line)}
.ct-form label{display:grid;gap:7px}
.ct-form label span{font-size:13px;font-weight:600;color:var(--mute)}
.ct-form input,.ct-form select,.ct-form textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1px solid var(--line-hi);border-radius:14px;padding:13px 14px;outline:none;transition:border-color .2s,box-shadow .2s}
.ct-form textarea{resize:vertical;min-height:130px}
.ct-form input:focus,.ct-form select:focus,.ct-form textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(26,25,22,.08)}
.ct-form .btn{justify-content:center;border:0;cursor:pointer}
.ct-err{color:#a8380a;font-size:14px}
.ct-small{font-size:12.5px;color:var(--faint);line-height:1.5}
@media (max-width:980px){.ct-cards{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
  .ct-hero{padding-top:110px}
  .ct-hero-grid{grid-template-columns:1fr}
  .ct-art{display:none}
  .ct-form-grid{grid-template-columns:1fr}
  .ct-cards{grid-template-columns:1fr;gap:10px}
  .ct-card{display:grid;grid-template-columns:48px 1fr;column-gap:14px;row-gap:4px;padding:18px}
  .ct-card img{grid-row:1/4;width:44px;height:44px;margin:0}
  .ct-card p{font-size:14.5px}
}
@media (prefers-reduced-motion:reduce){.ct-art img{animation:none}}
/* the nav has one more link: tighten on smaller laptops */
@media (min-width:861px) and (max-width:1240px){.nav-links a[href$="#faq"]{display:none}}
@media (min-width:861px) and (max-width:1120px){.nav-links a[href$="#trust"]{display:none}}
@media (min-width:861px) and (max-width:1000px){.nav-links a[href$="#bits"]{display:none}}
/* contact: send directly */
.ct-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-form{position:relative}
.ct-form .btn[disabled]{opacity:.6;cursor:wait}
.ct-err a,.ct-small a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.ct-done{padding:clamp(28px,4vw,44px);border-radius:28px;background:var(--card);border:1px solid var(--line);text-align:center;display:grid;justify-items:center;gap:12px;animation:ct-pop .6s var(--ease)}
.ct-done img{width:76px;filter:drop-shadow(0 14px 22px rgba(233,185,73,.4));animation:ct-bob 6s ease-in-out infinite}
.ct-done h3{font-size:clamp(26px,2.6vw,34px);font-weight:600;letter-spacing:-.03em}
.ct-done p{color:var(--mute);font-size:16px;line-height:1.55;max-width:26em}
.ct-done .btn{margin-top:6px;border:0;cursor:pointer}
@keyframes ct-pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.ct-form[hidden],.ct-done[hidden]{display:none!important}