@import url('../fonts/fonts.css');
:root{
  --ground:#F2F4F8; --surface:#FFFFFF; --tray:rgba(0,29,55,.05); --hair:rgba(0,29,55,.08);
  --ink:#0B1220; --muted:#5C677A; --navy:#001D37; --navy-2:#062A4F; --navy-3:#0B3A6B;
  --green:#17A673; --green-ink:#0E7A54; --green-soft:#E3F6EE; --red:#C0392B; --red-soft:#FBEAE8;
  --display:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --spring:cubic-bezier(.32,.72,0,1); --out:cubic-bezier(.22,1,.36,1); --bounce:cubic-bezier(.34,1.36,.64,1);
  --r-shell:2rem; --r-core:calc(2rem - .5rem);
  /* transitions.dev tokens */
  --tabs-dur:250ms; --tabs-ease:cubic-bezier(.22,1,.36,1);
  --digit-dur:400ms; --digit-distance:6px; --digit-stagger:50ms; --digit-blur:1px; --digit-ease:cubic-bezier(.34,1.45,.64,1);
  --acc-expand:250ms; --acc-collapse:250ms; --acc-chevron:250ms; --acc-ease:cubic-bezier(.22,1,.36,1);
  --learn-shift:2px; --learn-spread:8deg; --learn-in:350ms; --learn-out:350ms; --learn-ease:cubic-bezier(.22,1,.36,1);
  --stagger-dur:600ms; --stagger-distance:14px; --stagger-stagger:60ms; --stagger-blur:2px; --stagger-ease:cubic-bezier(.22,1,.36,1);
  --modal-open-dur:250ms; --modal-close-dur:150ms; --modal-scale:.96; --modal-ease:cubic-bezier(.22,1,.36,1);
  --shake-distance:6px; --shake-overshoot:4px;
  --check-ease-bob:cubic-bezier(.34,1.35,.64,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--ground)}
body{margin:0;background:transparent;color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.55;-webkit-font-smoothing:antialiased}
body.no-scroll{overflow:hidden}
a{color:inherit;text-decoration:none}
p{margin:0}
img{max-width:100%}
button{font-family:inherit}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.02;letter-spacing:-.025em;color:var(--navy);text-wrap:balance}
h1{font-variation-settings:"opsz" 96;font-weight:800}
h2{font-weight:700}
h3{font-weight:600;letter-spacing:-.015em}
.wrap{max-width:1200px;margin:0 auto;padding-inline:24px}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:#fff;padding:8px 12px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* ---------- island nav ---------- */
.island{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:6px;padding:6px 6px 6px 12px;border-radius:999px;background:rgba(255,255,255,.74);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 0 0 1px var(--hair),0 20px 50px -24px rgba(0,29,55,.35);width:max-content;max-width:calc(100vw - 32px)}
.mark{display:flex;align-items:center;gap:10px}
.mark img{height:38px;width:auto;display:block}
.mark b{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:.14em;color:var(--navy);white-space:nowrap;line-height:1}
.mark b small{display:block;font-family:var(--body);font-weight:500;font-size:10px;letter-spacing:.18em;color:var(--muted);margin-top:3px}
.island .mark{padding-right:14px;margin-right:6px;border-right:1px solid var(--hair)}
.island ul{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.island ul a{display:block;padding:9px 12px;border-radius:999px;font-size:14px;font-weight:500;color:var(--muted);transition:color .3s var(--out),background .3s var(--out)}
.island ul a:hover,.island ul a[aria-current="page"]{color:var(--navy);background:var(--tray)}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--tray);position:relative;cursor:pointer;flex:none}
.burger i{position:absolute;left:13px;right:13px;height:2px;background:var(--navy);border-radius:2px;top:50%;transition:transform .5s var(--spring),opacity .3s}
.burger i:nth-child(1){transform:translateY(-6px)}.burger i:nth-child(2){transform:translateY(0)}.burger i:nth-child(3){transform:translateY(6px)}
.burger[aria-expanded="true"] i:nth-child(1){transform:rotate(45deg)}.burger[aria-expanded="true"] i:nth-child(2){opacity:0}.burger[aria-expanded="true"] i:nth-child(3){transform:rotate(-45deg)}
.menu{position:fixed;inset:0;z-index:45;background:rgba(242,244,248,.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);display:grid;align-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .35s var(--out)}
.menu.open{opacity:1;pointer-events:auto}
.menu > a{font-family:var(--display);font-weight:700;font-size:34px;color:var(--navy);padding:12px 0;border-bottom:1px solid var(--hair);opacity:0;transform:translateY(14px);transition:opacity .5s var(--out),transform .6s var(--out)}
.menu.open > a{opacity:1;transform:none}
.menu.open > a:nth-child(2){transition-delay:.05s}.menu.open > a:nth-child(3){transition-delay:.1s}.menu.open > a:nth-child(4){transition-delay:.15s}.menu.open > a:nth-child(5){transition-delay:.2s}.menu.open > a:nth-child(6){transition-delay:.25s}
.menu .menu-contact{margin-top:24px;display:grid;gap:10px;opacity:0;transform:translateY(14px);transition:opacity .5s var(--out) .3s,transform .6s var(--out) .3s}
.menu.open .menu-contact{opacity:1;transform:none}

/* ---------- buttons ---------- */
.pill{display:inline-flex;align-items:center;gap:10px;background:var(--navy);color:#fff;font-weight:600;font-size:15px;padding:8px 8px 8px 20px;border-radius:999px;transition:transform .5s var(--spring),background .4s var(--out),box-shadow .5s var(--spring);will-change:transform;cursor:pointer;border:0}
.pill:hover{transform:translateY(-1px);background:var(--navy-2);box-shadow:0 18px 30px -18px rgba(0,29,55,.7)}
.pill:active{transform:scale(.98)}
.pill .dot{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);display:grid;place-items:center;transition:transform .5s var(--spring),background .4s var(--out);flex:none}
.pill:hover .dot{transform:translate(2px,-1px) scale(1.06);background:rgba(255,255,255,.2)}
.pill .dot svg{width:16px;height:16px}
.pill.light{background:#fff;color:var(--navy);box-shadow:0 0 0 1px var(--hair)}
.pill.light .dot{background:var(--tray)}
.pill.light:hover{background:#fff;box-shadow:0 0 0 1px var(--hair),0 18px 30px -18px rgba(0,29,55,.35)}
.pill.green{background:var(--green)} .pill.green:hover{background:var(--green-ink)}
.pill.wide{width:100%;justify-content:space-between}
.island .pill{padding:7px 7px 7px 16px;font-size:14px} .island .pill .dot{width:30px;height:30px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:6px 12px 6px 9px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--navy);background:#fff;box-shadow:0 0 0 1px var(--hair)}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-soft)}
/* heroes carry a plain kicker: the pill competed with the headline right above the fold */
.hero .eyebrow{background:none;box-shadow:none;padding:0;color:var(--muted);align-items:flex-start}
.hero .eyebrow i{margin-top:.34em;flex:none}

/* ---------- rising chart mark from the logo: bars, trend line, arrow head ---------- */
.upmark{display:block;height:auto;pointer-events:none;color:var(--navy)}
.upmark .b{fill:currentColor;opacity:.26}
.upmark .ln{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.upmark .hd{fill:currentColor}
/* closing card: the mark anchors the foot of the text column, left-aligned with the headline */
.contact .shell.dark .core > div:first-child{display:flex;flex-direction:column;align-items:flex-start}
.contact .shell.dark .upmark{width:108px;margin-top:auto;padding-top:30px;color:var(--green);opacity:.5}

/* ---------- shells ---------- */
.shell{background:var(--tray);border-radius:var(--r-shell);padding:.5rem;box-shadow:0 0 0 1px var(--hair)}
.core{background:var(--surface);border-radius:var(--r-core);box-shadow:inset 0 1px 1px rgba(255,255,255,.9),0 1px 2px rgba(0,29,55,.04)}
.shell.dark{background:rgba(0,29,55,.9);box-shadow:0 0 0 1px rgba(255,255,255,.06),0 40px 80px -40px rgba(0,29,55,.6)}
.shell.dark .core{background:linear-gradient(160deg,var(--navy-2),var(--navy));box-shadow:inset 0 1px 1px rgba(255,255,255,.1)}

/* ---------- hero (fits the first screen) ---------- */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;padding-block:104px 56px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(rgba(0,29,55,.16) 1.2px,transparent 1.6px);background-size:22px 22px;mask-image:radial-gradient(60% 75% at 72% 45%,#000 15%,transparent 72%);-webkit-mask-image:radial-gradient(60% 75% at 72% 45%,#000 15%,transparent 72%)}
.hero::after{content:"";position:absolute;right:-10%;top:-20%;width:55%;height:80%;z-index:-1;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(23,166,115,.14),transparent 70%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center;width:100%}
.hero h1{font-size:clamp(40px,min(5.6vw,8.4vh),84px);margin-top:clamp(14px,2.4vh,26px)}
.hero h1 .g{color:var(--green)}
.hero .lead{font-size:clamp(17px,2.2vh,20px);color:var(--muted);max-width:48ch;margin-top:clamp(14px,2.4vh,26px);line-height:1.5}
.hero .lead strong{color:var(--navy);font-weight:600}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(18px,3.2vh,34px);align-items:center}
.hero .qual{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(14px,2.6vh,28px)}
.hero .qual span{font-size:13px;color:var(--muted);background:#fff;border-radius:999px;padding:7px 12px;box-shadow:0 0 0 1px var(--hair)}
.rise{animation:rise 1s var(--out) both}
.rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.16s}.rise.d3{animation-delay:.24s}.rise.d4{animation-delay:.32s}
@keyframes rise{from{opacity:.001;transform:translateY(26px);filter:blur(6px)}to{opacity:1;transform:none;filter:blur(0)}}
.frame{position:relative;justify-self:end;width:min(100%,480px,62vh)}
.frame .shell{animation:rise 1.1s var(--out) both .2s}
.frame .core{overflow:hidden;aspect-ratio:4/4.5;position:relative}
.frame img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block;transform:scale(1.04);transition:transform 1.4s var(--spring)}
.frame:hover img{transform:scale(1.0)}
.frame .core::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,29,55,.45))}
.frame .say{position:absolute;left:22px;bottom:22px;right:22px;color:#fff;z-index:2}
.frame .say b{font-family:var(--display);font-size:clamp(18px,2.4vh,22px);font-weight:700;letter-spacing:-.02em;display:block;line-height:1.1}
.frame .say span{font-size:13.5px;opacity:.85}
.frame .tag{position:absolute;top:-16px;right:-18px;background:#fff;border-radius:999px;padding:10px 16px;font-family:var(--display);font-weight:700;color:var(--navy);box-shadow:0 0 0 1px var(--hair),0 24px 40px -22px rgba(0,29,55,.5);display:flex;align-items:center;gap:10px;animation:rise 1s var(--out) both .55s}
.frame .tag i{width:10px;height:10px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
/* small hero for subpages */
.hero.sub{min-height:0;padding-block:140px 72px}
.hero.sub .wrap{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.hero.sub h1{font-size:clamp(38px,4.8vw,66px)}
.hero.sub .lead{max-width:52ch}
.hero.sub .frame .core{aspect-ratio:4/3}
.hero.sub .frame .say small{display:block;font-size:11px;opacity:.7;margin-top:4px;letter-spacing:.04em}
.hero.sub .frame img{object-position:50% 40%}
.hero.legal{padding-block:140px 40px}
.hero.legal .wrap{grid-template-columns:1fr;max-width:868px}

/* ---------- sections and their left marker ---------- */
section{padding-block:120px}
section.tight{padding-top:0}
.head{max-width:60ch;position:relative}
.head h2 .g,h2 .g{color:var(--green)}
.head h2{font-size:clamp(32px,3.8vw,50px);margin-top:16px}
.head p{font-size:18px;color:var(--muted);margin-top:16px;max-width:54ch}
.head p.small{font-size:14px;margin-top:18px}
.prose{max-width:66ch;font-size:17px;color:#2C333C}
.legalwrap{max-width:820px;margin:0 auto}
.prose p{margin-top:14px}
.prose h3{font-size:24px;margin-top:36px}
.prose ul{padding-left:20px;margin:12px 0 0}
.prose li{margin:6px 0}
.prose a{color:var(--navy);border-bottom:1px solid var(--hair);transition:border-color .3s}
.prose a:hover{border-color:var(--navy)}

/* ---------- section tones ---------- */
section.navy{background:linear-gradient(160deg,#052A50,var(--navy) 60%);color:#fff;position:relative;overflow:hidden;padding-block:64px}
section.navy::before{content:"";position:absolute;right:-10%;top:-30%;width:60%;height:90%;background:radial-gradient(50% 50% at 50% 50%,rgba(23,166,115,.22),transparent 70%);pointer-events:none}
section.navy .head h2,section.navy h2,section.navy h3{color:#fff}
section.navy .head p,section.navy p{color:#B7C6DC}
section.navy .eyebrow{background:rgba(255,255,255,.08);color:#DCE6F5;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
section.mist{background:#E9EEF5}
section.tight.navy,section.tight.mist{padding-top:64px}
section.navy + section.tight,section.mist + section.tight{padding-top:72px}
/* ---------- funnel: 700 -> 210 -> 46 -> 1 (compact, fits one screen) ---------- */
.funnel{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px;position:relative;z-index:1}
.fstage{position:relative;border-radius:20px;padding:18px 18px 16px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);opacity:0;transform:translateY(18px);transition:opacity .7s var(--out),transform .8s var(--out);display:flex;flex-direction:column}
.funnel.is-shown .fstage{opacity:1;transform:none}
.funnel.is-shown .fstage:nth-child(2){transition-delay:.1s}.funnel.is-shown .fstage:nth-child(3){transition-delay:.2s}.funnel.is-shown .fstage:nth-child(4){transition-delay:.3s}
.fstage .fn{font-family:var(--display);font-weight:800;font-size:clamp(38px,3.8vw,52px);letter-spacing:-.045em;line-height:1;color:#fff;font-variant-numeric:tabular-nums;font-variation-settings:"opsz" 96}
.fstage .fl{font-size:13.5px;color:#B7C6DC;margin-top:6px;line-height:1.35;min-height:2.7em}
.fstage .dots{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin-top:12px}
.fstage .dots i{aspect-ratio:1;border-radius:2px;background:rgba(255,255,255,.55);transform:scale(0);transition:transform .5s var(--bounce)}
.funnel.is-shown .fstage .dots i{transform:none;transition-delay:calc(var(--i) * 14ms + var(--s) * 140ms + 300ms)}
.fstage .dots i.off{background:rgba(255,255,255,.08)}
.fstage .arrow{position:absolute;right:-13px;top:50%;width:26px;height:26px;border-radius:50%;background:var(--navy);box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);display:grid;place-items:center;transform:translateY(-50%);z-index:2}
.fstage .arrow svg{width:12px;height:12px;stroke:#8DE3C0;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* the last stage is not a counter: it is the offer itself */
/* the result card is the payoff of the funnel: it is lifted, tinted and glows against the navy */
.offer-card{background:linear-gradient(168deg,#FFFFFF 38%,#E8F7F0);color:var(--navy);box-shadow:0 0 0 2px var(--green),0 0 0 8px rgba(23,166,115,.18),0 34px 66px -26px rgba(23,166,115,.95);padding:16px 16px 14px;overflow:hidden}
.funnel.is-shown .offer-card{transform:translateY(-10px) scale(1.025)}
.offer-card .oc-badge{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--green-ink)}
.offer-card .oc-badge i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(23,166,115,.22)}
.offer-card .oc-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.offer-card .oc-one{color:var(--green-ink);font-size:clamp(46px,4.4vw,62px)}
/* the three criteria from the stage before, now all ticked: the point of the card */
.offer-card .oc-fit{list-style:none;margin:auto 0 0;padding:12px 0 0;display:grid;gap:5px}
.offer-card .oc-fit li{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--green-ink);opacity:0;transform:translateY(6px);transition:opacity .45s var(--out),transform .5s var(--out)}
.funnel.is-shown .offer-card .oc-fit li{opacity:1;transform:none}
.funnel.is-shown .offer-card .oc-fit li:nth-child(1){transition-delay:1.75s}
.funnel.is-shown .offer-card .oc-fit li:nth-child(2){transition-delay:1.88s}
.funnel.is-shown .offer-card .oc-fit li:nth-child(3){transition-delay:2.01s}
.offer-card .oc-fit li::before{content:"";width:14px;height:14px;flex:none;border-radius:50%;background:rgba(23,166,115,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E7A54' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5 10 17 18.5 7.5'/%3E%3C/svg%3E") center/9px no-repeat}
.offer-card .oc-check{position:static;width:42px;height:42px;flex:none;border-radius:50%;background:var(--green);display:grid;place-items:center;box-shadow:0 0 0 6px rgba(23,166,115,.16);opacity:0;transform:translateY(12px) rotate(-30deg) scale(.7);filter:blur(6px);transition:opacity .5s var(--out) 1.3s,transform .6s var(--check-ease-bob) 1.3s,filter .5s var(--out) 1.3s}
.funnel.is-shown .offer-card .oc-check{opacity:1;transform:none;filter:blur(0)}
.offer-card .oc-check svg{width:24px;height:24px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.offer-card .oc-check circle{display:none}
.offer-card .oc-check path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .5s var(--out) 1.7s}
.funnel.is-shown .offer-card .oc-check path{stroke-dashoffset:0}
.offer-card .fl{color:var(--navy);margin-top:6px;min-height:0;font-weight:700;font-size:14.5px;line-height:1.3}
/* the last connector turns green: this is where the search arrives */
.fstage:nth-child(3) .arrow{background:var(--green);box-shadow:0 0 0 3px rgba(23,166,115,.2)}
.fstage:nth-child(3) .arrow svg{stroke:#fff}
.frow{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px}
.fnote{font-size:13px;color:#8FA3BF;margin:0}
.fcta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
/* navy sections carry a faint skyline drawing along the bottom */
section.navy::after{content:"";position:absolute;left:0;right:0;bottom:0;height:min(55%,300px);background:url(/assets/img/skyline-navy.jpg) center bottom/cover no-repeat;opacity:.16;mix-blend-mode:screen;pointer-events:none;mask-image:linear-gradient(180deg,transparent,#000 60%);-webkit-mask-image:linear-gradient(180deg,transparent,#000 60%)}
section.navy .wrap{position:relative;z-index:1}
section.navy .head h2{margin-top:14px}
section.navy .head p{max-width:62ch;font-size:16.5px;margin-top:12px}
/* ---------- equation strip (Kapitalanlage) ---------- */
.eq{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1.15fr;gap:10px;align-items:stretch;margin-top:30px;position:relative;z-index:1}
.eq .term{border-radius:18px;padding:18px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);opacity:0;transform:translateY(16px);transition:opacity .6s var(--out),transform .7s var(--out)}
.eq.is-shown .term{opacity:1;transform:none}
.eq.is-shown .term:nth-of-type(2){transition-delay:.1s}.eq.is-shown .term:nth-of-type(3){transition-delay:.2s}.eq.is-shown .term:nth-of-type(4){transition-delay:.3s}
.eq .term b{font-family:var(--display);font-weight:700;font-size:20px;color:#fff;display:block;letter-spacing:-.02em}
.eq .term span{font-size:13px;color:#B7C6DC;display:block;margin-top:6px;line-height:1.4}
.eq .op{font-family:var(--display);font-weight:700;font-size:24px;color:var(--navy);display:grid;place-items:center;align-self:center;width:40px;height:40px;border-radius:50%;background:#8DE3C0;box-shadow:0 10px 24px -12px rgba(23,166,115,.8)}
.eq .term.result{background:#fff;box-shadow:0 0 0 3px var(--green),0 30px 60px -30px rgba(23,166,115,.7)}
.eq .term.result b{color:var(--navy)}
.eq .term.result span{color:var(--muted)}
/* ---------- text + card pair (subpages) ---------- */
.pair{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:start;margin-top:36px}
.pair .core{padding:26px}
.pair .prose p:first-child{margin-top:0}
.pair .shell{align-self:start}
.pair h3{font-size:22px}
.pair ul{margin:12px 0 0;padding-left:18px;color:var(--muted);font-size:15.5px}
.pair li{margin:6px 0}
.list3 .core .k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--green-ink);font-weight:600;margin-bottom:8px;display:block}
/* ---------- compare ---------- */
.cmp{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center;position:relative}
.cmp::before{content:"";position:absolute;right:-6%;top:-10%;width:60%;height:120%;background:radial-gradient(50% 50% at 50% 50%,rgba(23,166,115,.14),transparent 70%);z-index:-1;pointer-events:none}
.stepslist{margin-top:28px;display:grid;gap:6px}
.stepslist div{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;padding:11px 12px;border-radius:14px;transition:background .5s var(--out),color .5s;color:var(--muted);font-size:15.5px;position:relative;overflow:hidden}
.stepslist div::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;background:var(--green);transform-origin:left;transform:scaleX(0);opacity:0}
.stepslist div.on::after{opacity:1;animation:fill var(--fill,1.6s) linear forwards}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.stepslist div i{width:10px;height:10px;border-radius:50%;background:var(--hair);justify-self:center;transition:background .4s,box-shadow .4s}
.stepslist div b{font-family:var(--mono);font-weight:500;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;transition:color .4s}
.stepslist div.on{background:#fff;color:var(--navy);box-shadow:0 0 0 1px var(--hair)}
.stepslist div.on i{background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.stepslist div.on b{color:var(--green-ink)}
.stepslist div.done i{background:var(--navy)}
.replay{margin-top:22px}
.stage .core{padding:22px;position:relative;overflow:hidden}
.stage .bar{display:flex;justify-content:space-between;align-items:baseline;color:#B7C6DC;font-size:13px;margin-bottom:16px}
.stage .bar .num{color:#fff;font-size:34px}
.stage .bar .num small{font-family:var(--body);font-size:13px;font-weight:500;color:#B7C6DC;margin-left:8px;letter-spacing:0}
.tiles{display:grid;grid-template-columns:repeat(var(--cols,35),1fr);gap:5px;transition:opacity .8s var(--out),filter .8s var(--out)}
.tile{aspect-ratio:1;border-radius:3px;background:linear-gradient(180deg,rgba(255,255,255,.95) 0 35%,rgba(255,255,255,.55) 35% 50%,rgba(255,255,255,.95) 50% 65%,rgba(255,255,255,.55) 65%);opacity:1;transform:none;transition:opacity .7s var(--out),transform .7s var(--out);transition-delay:var(--d,0ms)}
.tile.out{opacity:.06;transform:scale(.5)}
.tile.keep{background:var(--green);box-shadow:0 0 0 2px rgba(23,166,115,.35),0 0 18px rgba(23,166,115,.7);transform:scale(1.5);border-radius:4px;position:relative;z-index:2}
.stage.final .tiles{opacity:.12;filter:blur(1px)}
.offers{position:absolute;left:22px;right:22px;top:58%;transform:translateY(-50%);display:grid;grid-template-columns:repeat(3,1fr);gap:12px;pointer-events:none}
.offer{background:#fff;border-radius:16px;padding:16px 16px 14px;color:var(--navy);opacity:0;transform:translateY(40px);transition:opacity .7s var(--out),transform .9s var(--spring),box-shadow .6s;position:relative;box-shadow:0 30px 50px -30px rgba(0,0,0,.7)}
.offer .bank{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.offer .z{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.03em;margin-top:6px;font-variant-numeric:tabular-nums;font-variation-settings:"opsz" 96}
.offer .z small{font-family:var(--body);font-weight:500;font-size:11px;color:var(--muted);letter-spacing:0;display:block;margin-top:2px}
.offer .r{font-size:13px;color:var(--muted);margin-top:10px;border-top:1px solid var(--hair);padding-top:8px;font-variant-numeric:tabular-nums;display:flex;justify-content:space-between}
.offer .r b{color:var(--navy)}
.offer .win{position:absolute;top:-12px;left:12px;background:var(--green);color:#fff;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:5px 9px;border-radius:999px;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s var(--bounce)}
.stage.final .offer{opacity:1;transform:none}
.stage.final .offer:nth-child(2){transition-delay:.12s}.stage.final .offer:nth-child(3){transition-delay:.24s}
.stage.best .offer.b{box-shadow:0 0 0 3px var(--green),0 30px 50px -30px rgba(0,0,0,.7);transform:translateY(-8px)}
.stage.best .offer:not(.b){opacity:.45}
.stage.best .offer.b .win{opacity:1;transform:none}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(112px,auto);gap:14px;margin-top:30px}
.b1{grid-column:span 7;grid-row:span 2}.b2{grid-column:span 5}.b3{grid-column:span 5}.b4{grid-column:span 4}.b5{grid-column:span 4}.b6{grid-column:span 4}
.bento .shell{transition:transform .7s var(--spring),box-shadow .7s var(--spring);height:100%;display:block}
.bento .shell:hover{transform:translateY(-6px);box-shadow:0 0 0 1px var(--hair),0 40px 70px -40px rgba(0,29,55,.45)}
.bento .core{height:100%;padding:22px;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;position:relative;overflow:hidden}
.bento h3{font-size:23px}
.bento p{color:var(--muted);font-size:15.5px;max-width:40ch}
.bento .k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--green-ink);font-weight:600;margin-bottom:4px}
.b1 .core{padding:0;justify-content:flex-end;color:#fff;min-height:280px}
.b1 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--spring)}
.b1:hover img{transform:scale(1.05)}
.b1 .core::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,29,55,0) 35%,rgba(0,29,55,.92))}
.b1 .txt{position:relative;z-index:2;padding:28px}
.b1 h3{color:#fff;font-size:26px}
.b1 p{color:rgba(255,255,255,.8)}
.b1 .k{color:#8DE3C0}
/* the Kapitalanlage tile carries the mark as its artwork: text left, chart right */
.b2 .core{padding-right:148px}
.b2 .upmark{position:absolute;right:24px;top:50%;transform:translateY(-50%);width:106px;color:var(--green)}
.bento .big{font-family:var(--display);font-weight:800;font-size:38px;letter-spacing:-.04em;color:var(--navy);line-height:1;font-variant-numeric:tabular-nums;font-variation-settings:"opsz" 96;margin-top:auto}
.bento .big em{font-style:normal;color:var(--green)}
.t-learn{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;color:var(--navy);margin-top:auto;padding-top:8px}
.t-learn-chevron{display:inline-flex;transform:translateX(0);transition:transform var(--learn-out) var(--learn-ease)}
.t-learn-chevron svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.t-learn-arm{transform-box:view-box;transform-origin:10px 8px;vector-effect:non-scaling-stroke;transition:transform var(--learn-out) var(--learn-ease)}
.shell:hover .t-learn-chevron,.t-learn:hover .t-learn-chevron{transform:translateX(var(--learn-shift));transition-duration:var(--learn-in)}
.shell:hover .t-learn-arm,.t-learn:hover .t-learn-arm{transition-duration:var(--learn-in)}
.shell:hover .t-learn-arm-top,.t-learn:hover .t-learn-arm-top{transform:rotate(var(--learn-spread))}
.shell:hover .t-learn-arm-bot,.t-learn:hover .t-learn-arm-bot{transform:rotate(calc(var(--learn-spread) * -1))}

/* ---------- steps ---------- */
.rail{display:grid;grid-template-columns:repeat(3,1fr);margin-top:48px;position:relative;height:44px}
.rail::before{content:"";position:absolute;left:calc(100%/6);right:calc(100%/6);top:21px;height:2px;background:var(--green);transform-origin:left;transform:scaleX(var(--draw,0));transition:transform 1.4s var(--out) .2s}
.rail .n{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:17px;justify-self:center;position:relative;box-shadow:0 0 0 6px var(--ground),0 10px 20px -12px rgba(0,29,55,.6)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:22px}
.step .core{padding:26px;height:100%}
.step h3{font-size:24px}
.step p{color:var(--muted);font-size:15.5px;margin-top:10px}
.step .m{display:none}

/* ---------- calculator ---------- */
.calcwrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center;margin-top:8px}
.calc{min-width:0}
.calc .core{padding:28px}
.t-tabs{position:relative;display:inline-flex;align-items:center;gap:3px;padding:3px;border-radius:48px;background:var(--ground)}
.t-tab{position:relative;appearance:none;border:0;background:transparent;height:40px;padding:4px 16px;color:var(--muted);cursor:pointer;border-radius:48px;z-index:1;font:inherit;font-size:14px;font-weight:600;transition:color var(--tabs-dur) var(--tabs-ease)}
.t-tab:not([aria-selected="true"]):hover,.t-tab[aria-selected="true"]{color:var(--navy)}
.t-tabs-pill{position:absolute;top:3px;left:0;height:40px;width:0;background:#fff;border-radius:48px;box-shadow:0 1px 3px rgba(0,29,55,.12);transform:translateX(0);transition:transform var(--tabs-dur) var(--tabs-ease),width var(--tabs-dur) var(--tabs-ease);z-index:0;pointer-events:none}
.pane{display:none}.pane.on{display:block}
.fld{margin-top:22px}
.fld label{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--muted);font-weight:500}
.fld output{font-family:var(--display);font-weight:700;color:var(--navy);font-size:17px;font-variant-numeric:tabular-nums}
.fld input[type=range]{width:100%;margin-top:10px;accent-color:var(--navy);height:28px}
.fld input[type=number]{width:104px;font:inherit;font-weight:600;color:var(--navy);border:0;border-radius:10px;padding:8px 10px;text-align:right;background:var(--ground);font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 1px var(--hair)}
.fld input[type=number]:focus{outline:2px solid var(--green);outline-offset:1px}
.res{margin-top:26px;border-radius:calc(var(--r-core) - .4rem);background:linear-gradient(160deg,var(--navy-2),var(--navy));color:#fff;padding:22px 24px;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;box-shadow:inset 0 1px 1px rgba(255,255,255,.12)}
.res small{display:block;font-size:13px;color:#B7C6DC;margin-bottom:6px}
.num{font-family:var(--display);font-weight:800;font-size:44px;letter-spacing:-.04em;line-height:1;display:inline-flex;font-variant-numeric:tabular-nums;font-variation-settings:"opsz" 96}
.num .d{display:inline-block;white-space:pre}
.num .d.chg{animation:digit var(--digit-dur) var(--digit-ease) both;animation-delay:calc(var(--i) * var(--digit-stagger))}
@keyframes digit{from{opacity:0;transform:translateY(var(--digit-distance));filter:blur(var(--digit-blur))}to{opacity:1;transform:none;filter:blur(0)}}
.res .side{text-align:right;font-size:13px;color:#B7C6DC;line-height:1.5}
.res .side b{display:block;color:#fff;font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
.calc .hint{font-size:12.5px;color:var(--muted);margin-top:14px;line-height:1.5}
.assume{margin-top:14px;font-size:13px;color:var(--muted);display:grid;gap:4px}
.assume span::before{content:"·";margin-right:8px;color:var(--green)}

/* ---------- faq ---------- */
.faqwrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start}
.faq{margin-top:0}
.t-acc{border-top:1px solid var(--hair)}
.t-acc:last-child{border-bottom:1px solid var(--hair)}
.t-acc-head{width:100%;appearance:none;background:transparent;border:0;padding:22px 4px;display:flex;justify-content:space-between;align-items:center;gap:16px;font:inherit;font-family:var(--display);font-size:20px;font-weight:600;color:var(--navy);cursor:pointer;text-align:left;letter-spacing:-.01em}
.t-acc-chevron{display:inline-flex;width:34px;height:34px;border-radius:50%;background:var(--tray);align-items:center;justify-content:center;flex:none;transform:scaleY(1);transform-origin:center;transition:transform var(--acc-chevron) var(--acc-ease),background .3s}
.t-acc-chevron svg{width:16px;height:16px;fill:none;stroke:var(--navy);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.t-acc-chevron path{vector-effect:non-scaling-stroke}
.t-acc[data-open="true"] .t-acc-chevron{transform:scaleY(-1);background:var(--green-soft)}
.t-acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--acc-collapse) var(--acc-ease)}
.t-acc[data-open="true"] .t-acc-panel{grid-template-rows:1fr;transition:grid-template-rows var(--acc-expand) var(--acc-ease)}
.t-acc-panel-inner{overflow:hidden;opacity:0;filter:blur(2px);transition:opacity var(--acc-collapse) var(--acc-ease),filter var(--acc-collapse) var(--acc-ease)}
.t-acc[data-open="true"] .t-acc-panel-inner{opacity:1;filter:blur(0);transition:opacity var(--acc-expand) var(--acc-ease),filter var(--acc-expand) var(--acc-ease)}
.t-acc-panel-inner p{padding:0 4px 24px;color:var(--muted);max-width:60ch}

/* ---------- checklist (subpages) ---------- */
.list3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.list3 .core{padding:26px;height:100%}
.list3 h3{font-size:22px}
.list3 p{color:var(--muted);font-size:15.5px;margin-top:10px}
.list3 ul{margin:10px 0 0;padding-left:18px;color:var(--muted);font-size:15px}
.list3 li{margin:4px 0}

/* ---------- contact ---------- */
.contact .shell.dark .core{padding:56px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;color:#fff}
.contact h2{color:#fff;font-size:clamp(32px,3.8vw,50px)}
.contact h2 .g{color:#8DE3C0}
.contact p{color:#B7C6DC;font-size:17px;margin-top:16px;max-width:44ch}
.contact .list{display:grid;gap:10px}
.contact .list a,.contact .list button{display:grid;grid-template-columns:44px 1fr auto;gap:14px;align-items:center;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:background .4s var(--out),transform .5s var(--spring);border:0;color:#fff;text-align:left;font:inherit;cursor:pointer;width:100%}
.contact .list a:hover,.contact .list button:hover{background:rgba(255,255,255,.12);transform:translateX(4px)}
.contact .list .ic{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.1);display:grid;place-items:center}
.contact .list .ic svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.contact .list .ic.g{background:var(--green)}
.contact .list b{font-family:var(--display);font-size:17px;display:block;font-weight:700}
.contact .list small{color:#B7C6DC;font-size:13px}
.contact .list .arr{color:#B7C6DC;font-size:18px}

/* ---------- footer ---------- */
footer{padding-block:40px 56px;font-size:13.5px;color:var(--muted);border-top:1px solid var(--hair);margin-top:20px}
footer .wrap{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px}
footer .mark img{height:104px}
footer .addr{line-height:1.6}
footer .addr b{color:var(--navy);font-family:var(--display);font-size:15px}
footer .legal{display:flex;flex-wrap:wrap;gap:16px;justify-content:flex-end}
footer .legal a{border-bottom:1px solid transparent;transition:border-color .3s,color .3s;padding:10px 0;display:inline-block}
footer .legal a:hover{color:var(--navy);border-color:var(--navy)}
footer .copy{grid-column:1/-1;font-size:12.5px;padding-top:16px;border-top:1px solid var(--hair)}

/* ---------- reveal (below the fold only) ---------- */
.t-stagger-line{display:block;opacity:0;transform:translateY(var(--stagger-distance));filter:blur(var(--stagger-blur));transition:opacity var(--stagger-dur) var(--stagger-ease),transform var(--stagger-dur) var(--stagger-ease),filter var(--stagger-dur) var(--stagger-ease)}
.t-stagger-line--2{transition-delay:var(--stagger-stagger)}.t-stagger-line--3{transition-delay:calc(var(--stagger-stagger)*2)}.t-stagger-line--4{transition-delay:calc(var(--stagger-stagger)*3)}
.t-stagger.is-shown .t-stagger-line{opacity:1;transform:translateY(0);filter:blur(0)}
.eyebrow.t-stagger-line{display:inline-flex}

/* ---------- modal form (transitions.dev 06 + 12 + 10) ---------- */
.t-modal-backdrop{position:fixed;inset:0;z-index:70;background:rgba(0,29,55,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity var(--modal-close-dur) var(--modal-ease);display:grid;place-items:center;padding:16px;overflow:auto}
.t-modal-backdrop.open{opacity:1;pointer-events:auto;transition:opacity var(--modal-open-dur) var(--modal-ease)}
.t-modal{width:min(100%,560px);background:#fff;border-radius:24px;padding:28px;box-shadow:0 40px 80px -30px rgba(0,29,55,.6),0 0 0 1px var(--hair);transform:scale(var(--modal-scale));opacity:0;transition:transform var(--modal-close-dur) var(--modal-ease),opacity var(--modal-close-dur) var(--modal-ease);position:relative;max-height:calc(100dvh - 32px);overflow:auto}
.t-modal-backdrop.open .t-modal{transform:none;opacity:1;transition:transform var(--modal-open-dur) var(--modal-ease),opacity var(--modal-open-dur) var(--modal-ease)}
.t-modal h2{font-size:28px}
.t-modal .sub{color:var(--muted);font-size:15px;margin-top:8px}
.t-modal .x{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:0;background:var(--tray);cursor:pointer;display:grid;place-items:center;transition:background .3s,transform .4s var(--spring)}
.t-modal .x:hover{background:var(--hair);transform:rotate(90deg)}
.t-modal .x svg{width:16px;height:16px;stroke:var(--navy);stroke-width:1.8;fill:none;stroke-linecap:round}
.form{display:grid;gap:14px;margin-top:22px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form label{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--navy)}
.form label span.opt{color:var(--muted);font-weight:500}
.form input,.form select,.form textarea{font:inherit;font-size:15px;color:var(--ink);background:var(--ground);border:0;border-radius:12px;padding:12px 14px;box-shadow:inset 0 0 0 1px var(--hair);width:100%;transition:box-shadow .25s}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;box-shadow:inset 0 0 0 2px var(--green)}
.form textarea{min-height:90px;resize:vertical}
.form .chips{display:flex;flex-wrap:wrap;gap:8px}
.form .chips input{position:absolute;opacity:0;width:0;height:0}
.form .chips span{display:inline-block;padding:9px 14px;border-radius:999px;background:var(--ground);box-shadow:inset 0 0 0 1px var(--hair);font-size:14px;font-weight:500;color:var(--muted);cursor:pointer;transition:background .3s,color .3s,box-shadow .3s,transform .4s var(--spring)}
.form .chips input:checked + span{background:var(--navy);color:#fff;box-shadow:none}
.form .chips input:focus-visible + span{outline:2px solid var(--green);outline-offset:2px}
.form .chips span:hover{transform:translateY(-1px)}
.form .consent{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:13px;color:var(--muted);font-weight:400}
.form .consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--navy);padding:0;box-shadow:none}
.form .consent a{color:var(--navy);border-bottom:1px solid var(--hair)}
.form .err{display:none;font-size:13px;color:var(--red);background:var(--red-soft);padding:10px 12px;border-radius:10px}
.form.has-error .err{display:block}
.form.shake{animation:shake .5s cubic-bezier(.22,1,.36,1)}
@keyframes shake{0%{transform:translateX(0)}15%{transform:translateX(calc(var(--shake-distance) * -1))}30%{transform:translateX(var(--shake-distance))}45%{transform:translateX(calc(var(--shake-overshoot) * -1))}60%{transform:translateX(var(--shake-overshoot))}75%{transform:translateX(-1px)}100%{transform:translateX(0)}}
.form .actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:4px;flex-wrap:wrap}
.form .actions small{color:var(--muted);font-size:13px}
.form .pill[disabled]{opacity:.6;pointer-events:none}
.done{display:none;text-align:center;padding:20px 8px 8px}
.t-modal.sent .form{display:none}
.t-modal.sent .done{display:block}
.t-check{width:84px;height:84px;border-radius:50%;background:var(--green-soft);display:grid;place-items:center;margin:0 auto 18px;animation:checkin .6s var(--check-ease-bob) both}
.t-check svg{width:40px;height:40px;fill:none;stroke:var(--green-ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.t-check path{stroke-dasharray:40;stroke-dashoffset:40;animation:draw .5s var(--out) .25s forwards}
@keyframes checkin{from{opacity:0;transform:translateY(20px) rotate(-20deg) scale(.8);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes draw{to{stroke-dashoffset:0}}
.done h3{font-size:26px}
.done p{color:var(--muted);margin-top:10px;max-width:40ch;margin-inline:auto}

/* ---------- mobile ---------- */
.mbar{display:none}
@media (max-width:960px){
  /* stays the centred pill of the desktop nav: width:max-content anchored at left:12px read as left-aligned */
  .island{top:10px;padding:6px 6px 6px 10px;max-width:calc(100vw - 24px)}
  .island ul{display:none}
  .island .mark{border-right:0;margin-right:0;padding-right:0}
  .island .pill{display:none}
  .burger{display:block}
  .mark img{height:34px}
  .hero{min-height:0;padding-block:92px 56px}
  /* first screen is text + button only: a portrait cut off by the fold reads as an accident */
  .hero:not(.sub):not(.legal){min-height:100svh}
  .hero:not(.sub):not(.legal) .htext{min-height:calc(100svh - 92px);display:flex;flex-direction:column;justify-content:center;padding-bottom:40px}
  .hero:not(.sub):not(.legal) .wrap{gap:0}
  .hero:not(.sub):not(.legal) .frame{margin-top:104px}
  .hero .wrap,.cmp,.contact .shell.dark .core,.list3{grid-template-columns:1fr}
  .calcwrap{grid-template-columns:minmax(0,1fr)}
  .calc .core{padding:20px}
  .res{flex-direction:column;align-items:flex-start;gap:8px}
  .res .side{text-align:left}
  .hero .cta .pill.light{display:none}
  .hero .qual{display:none}
  .assume{font-size:12.5px}
  .hero h1{font-size:clamp(38px,10.5vw,56px)}
  .frame{justify-self:stretch;width:100%}
  .frame .core{aspect-ratio:4/4.2}
  .frame .tag{right:8px;top:-14px}
  .hero.sub{padding-block:100px 48px}
  .tiles{--cols:25;gap:4px}
  .stage .core{padding:14px}
  .offers{left:12px;right:12px;gap:8px}
  .offer{padding:10px}
  .offer .z{font-size:22px}
  .offer .r{display:none}
  .bento{grid-template-columns:1fr;grid-auto-rows:auto;gap:14px}
  .bento > *{grid-column:auto!important;grid-row:auto!important}
  /* stacked card: the 148px gutter would squeeze the copy, so the mark moves into the free corner */
  .b2 .core{padding-right:22px;padding-bottom:74px}
  .b2 .upmark{width:78px;top:auto;bottom:18px;right:18px;transform:none}
  /* stacked closing card has no free corner: the mark would orphan between text and tiles */
  .contact .shell.dark .upmark{display:none}
  .b1 .core{min-height:320px}
  .bento .big{margin-top:6px}
  .rail{display:none}
  .steps{grid-template-columns:1fr}
  .step .core{display:grid;grid-template-columns:auto 1fr;gap:6px 16px}
  .step .m{display:grid;grid-row:span 2;width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;place-items:center;font-family:var(--display);font-weight:700}
  .contact .shell.dark .core{padding:30px 22px}
  section{padding-block:72px}
  footer .wrap{grid-template-columns:1fr;gap:18px}
  footer .legal{justify-content:flex-start}
  footer .mark img{height:84px}
  .form .row{grid-template-columns:1fr}
  .faqwrap,.pair,.hero.sub .wrap{grid-template-columns:1fr}
  .funnel{grid-template-columns:1fr 1fr;gap:10px}
  .fstage{padding:16px 14px 14px;border-radius:18px}
  .fstage .fn{font-size:40px}
  .fstage .fl{font-size:13px;min-height:3.9em}
  .fstage .dots{gap:3px;margin-top:12px}
  .fstage .arrow{display:none}
  .offer-card{padding:14px 13px 12px}
  .offer-card .oc-check{width:34px;height:34px;box-shadow:0 0 0 4px rgba(23,166,115,.16)}
  .offer-card .oc-check svg{width:20px;height:20px}
  .offer-card .oc-fit li{font-size:11.5px;gap:6px}
  .funnel.is-shown .offer-card{transform:translateY(-5px) scale(1.015)}
  .eq{grid-template-columns:1fr;gap:8px}
  .eq .op{width:34px;height:34px;font-size:20px;justify-self:center}
  .hero.sub .frame{display:none}
  .t-modal{padding:22px;border-radius:20px}
  .mbar{display:flex;gap:10px;position:fixed;right:14px;bottom:14px;z-index:40}
  /* white ring: the navy button would otherwise vanish on the dark sections and photos */
  .fab{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;box-shadow:0 0 0 2.5px rgba(255,255,255,.94),0 18px 34px -14px rgba(0,29,55,.7);transition:transform .5s var(--spring)}
  .fab svg{width:23px;height:23px}
  .fab.green{background:var(--green)}
  .fab:active{transform:scale(.94)}
  body{padding-bottom:84px}
}
@media (max-height:760px) and (min-width:961px){
  .hero{padding-block:96px 40px}
  .hero .qual{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.t-stagger-line{opacity:1;transform:none;filter:none}.head::before{height:100%}}