/* Perccent product landing pages: the light system the MLD and unlisted-shares pages share.
   Visual-first: each section leads with a picture of the product (a deal card, a payoff chart,
   a deal room) and keeps the words to a headline and a line. The long, compliance-bearing text
   lives in accordions and the footnote, where it is complete but not in the way.
   Two text colours are darkened from the concept source because the originals fail AA on this
   paper (deep green 4.22:1, warm red 3.10:1); the originals stay on fills and borders. */
:root{
  --paper:#FBFAF7; --sand:#F3F1EA; --card:#FFFFFF;
  --ink:#14181D; --body:#3A3F45; --muted:#565C63; --faint:#6E747A;
  --green:#2ED170; --green-ink:#06210F; --green-text:#0F7A41; --green-tint:#E4F5EA; --green-line:#128A4B; --green-deep:#0B3B22;
  --risk:#C97B63; --risk-text:#9A4A33; --risk-tint:#F8EDE8; --warn:#8A5A0B;
  --line:rgba(20,24,29,.09); --line-2:rgba(20,24,29,.15); --line-3:rgba(20,24,29,.26);
  /* type follows outperfom.com: Fraunces at a fixed optical size for headings, Red Hat Display
     for small titles, Urbanist for text, JetBrains Mono for labels */
  --serif:'Fraunces',ui-serif,Georgia,serif;
  --display:'Red Hat Display',ui-sans-serif,system-ui,sans-serif;
  --sans:'Urbanist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:clamp(20px,4.5vw,64px);
  --maxw:1200px;
  --sec:clamp(80px,10vw,136px);
  --r-card:20px; --r-inner:12px; --r-field:10px;
  --card-line:#E6E3DD;
  /* one soft lift, used only on the product pictures that are meant to float */
  --lift:0 1px 2px rgba(20,24,29,.04),0 12px 32px -12px rgba(20,24,29,.14),0 40px 80px -40px rgba(20,24,29,.18);
  --ease:cubic-bezier(.2,.7,.2,1);
  --nav-bg:rgba(251,250,247,.82); --nav-bg-strong:rgba(251,250,247,.92); --surface:#FFFFFF; --surface-2:#FCFCFA; --field-bg:#FDFDFB; --hover:rgba(20,24,29,.05);
  --btn-dark-bg:#14181D; --btn-dark-hover:#262C33; --btn-dark-fg:#FFFFFF; --on-ink:#FFFFFF; --glass-btn:rgba(255,255,255,.7);
  --grid-line:rgba(20,24,29,.07); --zero-line:rgba(20,24,29,.22); --scrim:rgba(20,24,29,.42); --spark-top:#F7FBF8; --bubble-me:#D9F7E4;
  --stack-1:#E2DED5; --stack-2:#D5E6DB; --stack-3:#DDD8EA; --green-soft:#8FE0B0; --chip-bg:rgba(255,255,255,.9); --show-l:block; --show-d:none;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--paper:#0A0F12;--sand:#0F161A;--card:#141C21;--ink:#F1F5F3;--body:#B9C4C2;--muted:#93A19F;--faint:#869491;--green-text:#4FDB8E;--green-tint:rgba(46,209,112,.13);--risk-text:#E8A08A;--risk-tint:rgba(201,123,99,.14);--warn:#E0B15A;--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.16);--line-3:rgba(255,255,255,.28);--card-line:rgba(255,255,255,.1);--nav-bg:rgba(10,15,18,.78);--nav-bg-strong:rgba(10,15,18,.94);--surface:#141C21;--surface-2:#10181C;--field-bg:#0F161A;--hover:rgba(255,255,255,.07);--btn-dark-bg:#F1F5F3;--btn-dark-hover:#FFFFFF;--btn-dark-fg:#0A0F12;--on-ink:#0A0F12;--glass-btn:rgba(20,28,33,.7);--grid-line:rgba(255,255,255,.08);--zero-line:rgba(255,255,255,.28);--scrim:rgba(0,0,0,.62);--spark-top:#10201A;--bubble-me:rgba(46,209,112,.22);--stack-1:#2A343A;--stack-2:#223A2D;--stack-3:#2E2A40;--chip-bg:rgba(20,28,33,.9);--show-l:none;--show-d:block;--lift:0 1px 2px rgba(0,0,0,.45),0 14px 34px -14px rgba(0,0,0,.65),0 44px 90px -44px rgba(0,0,0,.75);color-scheme:dark;}}
:root[data-theme="dark"]{--paper:#0A0F12;--sand:#0F161A;--card:#141C21;--ink:#F1F5F3;--body:#B9C4C2;--muted:#93A19F;--faint:#869491;--green-text:#4FDB8E;--green-tint:rgba(46,209,112,.13);--risk-text:#E8A08A;--risk-tint:rgba(201,123,99,.14);--warn:#E0B15A;--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.16);--line-3:rgba(255,255,255,.28);--card-line:rgba(255,255,255,.1);--nav-bg:rgba(10,15,18,.78);--nav-bg-strong:rgba(10,15,18,.94);--surface:#141C21;--surface-2:#10181C;--field-bg:#0F161A;--hover:rgba(255,255,255,.07);--btn-dark-bg:#F1F5F3;--btn-dark-hover:#FFFFFF;--btn-dark-fg:#0A0F12;--on-ink:#0A0F12;--glass-btn:rgba(20,28,33,.7);--grid-line:rgba(255,255,255,.08);--zero-line:rgba(255,255,255,.28);--scrim:rgba(0,0,0,.62);--spark-top:#10201A;--bubble-me:rgba(46,209,112,.22);--stack-1:#2A343A;--stack-2:#223A2D;--stack-3:#2E2A40;--chip-bg:rgba(20,28,33,.9);--show-l:none;--show-d:block;--lift:0 1px 2px rgba(0,0,0,.45),0 14px 34px -14px rgba(0,0,0,.65),0 44px 90px -44px rgba(0,0,0,.75);color-scheme:dark;}
*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--paper);color:var(--body);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
p{margin:0;text-wrap:pretty}
h1,h2,h3{margin:0;color:var(--ink);font-family:var(--serif);font-weight:400;text-wrap:balance}
h1{font-size:clamp(44px,6vw,80px);line-height:1.03;letter-spacing:-.016em;font-variation-settings:"opsz" 28}
h2{font-size:clamp(34px,4.2vw,56px);line-height:1.1;letter-spacing:-.012em;font-variation-settings:"opsz" 28}
h3{font-family:var(--display);font-weight:600;font-size:clamp(19px,1.5vw,23px);line-height:1.3;letter-spacing:-.01em}
.hero .kicker,.side .get,.side .say,.dash .bar b,.dash .kpis dd,.points b,.acc summary .q,.lot .p,.deal .metric .v,.price .blur{font-variation-settings:"opsz" 28}
h1 em,h2 em{font-style:italic;color:var(--green-text)}
.skip{position:absolute;left:-9999px;top:8px;z-index:99;background:var(--ink);color:var(--on-ink);padding:10px 14px;border-radius:8px;text-decoration:none}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--green-line);outline-offset:3px;border-radius:4px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{display:inline-grid;place-items:center;flex:none}
.ic svg{width:100%;height:100%;fill:currentColor}

.wrap{max-width:calc(var(--maxw) + var(--pad)*2);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:var(--sec)}
.sec.sand{background:var(--sand)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--green-text)}
.eyebrow:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-tint)}
.lede{font-size:clamp(18px,1.4vw,20px);line-height:1.55;color:var(--body);max-width:52ch}
sup.fn{font:500 .62em/0 var(--mono);vertical-align:super;margin-left:1px}
h1 sup.fn,h2 sup.fn{font-size:14px;vertical-align:.9em;margin-left:4px}
sup.fn a{color:var(--green-text);text-decoration:none;padding:2px}
sup.fn a:hover{text-decoration:underline}

/* section header: a headline and one line, never a paragraph */
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 48px;margin-bottom:clamp(40px,5vw,64px)}
.head h2{max-width:16ch}
.head .lede{max-width:42ch}
.head.center{flex-direction:column;align-items:center;text-align:center}
.head.center h2{max-width:20ch}

/* the staging line: forms here are built and validated but not connected to anything yet */

/* nav */
.nav{position:sticky;top:0;z-index:40;background:var(--nav-bg);backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s ease}
.nav.solid{border-bottom-color:var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:72px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;min-height:44px}
/* the logo is the main site's own two files, at their natural proportions */
.brand img{height:34px;width:auto} .logo-l{display:var(--show-l)} .logo-d{display:var(--show-d)}
.navr{display:flex;align-items:center;gap:10px}
.tbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);background:var(--card);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:border-color .2s}
.tbtn:hover{border-color:var(--ink)} .tbtn .i{width:22px;height:22px} .tbtn .i svg{width:100%;height:100%;fill:currentColor} .tbtn .i-sun{display:var(--show-d)} .tbtn .i-moon{display:var(--show-l)}
.brand .prod{padding-left:14px;border-left:1px solid var(--line-2);font:500 13px/1.2 var(--sans);color:var(--muted);white-space:nowrap}
@media (max-width:430px){.brand{gap:10px}.brand img{height:28px}.brand .prod{padding-left:10px;font-size:12px}.navr{gap:8px}.tbtn{width:40px;height:40px}}
.links{display:flex;gap:4px;font-size:15px}
.links a{text-decoration:none;color:var(--body);padding:10px 14px;border-radius:100px;transition:color .2s,background-color .2s}
.links a:hover,.links a.on{color:var(--ink);background:var(--hover)}
@media (max-width:900px){.links{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:100px;border:1px solid transparent;
  font:600 15px/1 var(--sans);letter-spacing:-.005em;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .2s var(--ease),background-color .2s ease,border-color .2s ease,box-shadow .2s ease}
.btn svg{width:18px;height:18px;fill:currentColor;transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--green);color:var(--green-ink);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 8px 20px -10px rgba(18,138,75,.7)}
.btn-primary:hover{background:#27C465}
.btn-dark{background:var(--btn-dark-bg);color:var(--btn-dark-fg)}
.btn-dark:hover{background:var(--btn-dark-hover)}
.btn-ghost{background:var(--glass-btn);color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink);background:var(--surface)}
.btn-sm{min-height:44px;padding:0 18px;font-size:14px}
.btn[disabled]{opacity:.55;cursor:progress}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}

/* hero */
.hero{position:relative;overflow:hidden;padding-block:clamp(48px,7vw,96px) clamp(40px,5vw,72px)}
.hero:before{content:'';position:absolute;right:-12%;top:-18%;width:min(900px,90vw);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(46,209,112,.16),rgba(46,209,112,0))}
.hero:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 60% 70% at 75% 40%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse 60% 70% at 75% 40%,#000 10%,transparent 70%)}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,5vw,80px);align-items:center}
.hero h1{max-width:12ch}
.hero .kicker{max-width:30ch;margin-bottom:18px;font:400 clamp(20px,1.9vw,26px)/1.3 var(--serif);letter-spacing:-.01em;color:var(--muted);text-wrap:balance}
.hero .lede{margin-top:26px}
@media (max-width:980px){.hero-grid{grid-template-columns:minmax(0,1fr)}.hero h1{max-width:14ch}}

/* the product picture on the right of the hero, with facts pinned to it */
.stage{position:relative;padding:28px 0 36px}
.device{position:relative;background:var(--card);border:1px solid var(--card-line);border-radius:24px;box-shadow:var(--lift);padding:22px;max-width:460px;margin-inline:auto}
.dv-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dv-top .live{display:inline-flex;align-items:center;gap:8px}
.dv-top .live:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-tint)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:100px;background:var(--sand);font:500 10.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.device h3{margin-top:16px;font-size:26px}
.device .sub{margin-top:4px;font-size:14px;color:var(--muted)}
.spark{margin-top:18px;border-radius:var(--r-inner);background:linear-gradient(180deg,var(--spark-top),var(--surface));border:1px solid var(--line);padding:12px 12px 6px}
.spark svg{width:100%;height:auto}
.spark text{font:500 12px var(--sans);fill:var(--muted)}
.spark .t-m{font-weight:600;fill:var(--green-text)}
.spark .t-s{font-size:11px;font-weight:600;fill:var(--green-text)}
@media (max-width:560px){.spark text{font-size:16px}.spark .t-s{font-size:14px}}
@media (max-width:360px){.spark text{font-size:18px}.spark .t-s{font-size:15px}.dv-top .live{font-size:10px}}
.dv-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:14px 0 0}
.dv-facts div{padding:12px;border-radius:var(--r-inner);background:var(--sand)}
.dv-facts dt{font:500 10px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dv-facts dd{margin:6px 0 0;font:500 15px/1.25 var(--sans);color:var(--ink)}
.float{position:absolute;z-index:2;display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:100px;background:var(--surface);border:1px solid var(--card-line);box-shadow:var(--lift);
  font:600 14px/1.2 var(--sans);color:var(--ink);white-space:nowrap}
.float .ic{width:32px;height:32px;border-radius:50%;background:var(--green-tint);color:var(--green-text);padding:6px}
.float.f1{top:0;left:-4%}
.float.f2{bottom:0;right:-3%}
html.js .float{animation:bob 6s ease-in-out infinite}
html.js .float.f2{animation-delay:-3s}
@keyframes bob{50%{transform:translateY(-6px)}}
@media (max-width:560px){.float{font-size:12.5px;padding:8px 12px 8px 8px}.float .ic{width:26px;height:26px;padding:5px}.float.f1{left:0}.float.f2{right:0}.dv-facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.dv-facts div:last-child{grid-column:1/-1}}

/* proof strip: what a reader checks before scrolling, each with its own icon */
.proof{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:1px solid var(--line-2)}
.proof.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.proof div{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:start;padding:24px 20px 0 0}
.proof div+div{padding-left:20px;border-left:1px solid var(--line)}
.proof .ic{width:40px;height:40px;border-radius:12px;background:var(--green-tint);color:var(--green-text);padding:9px}
.proof b{display:block;font:600 16px/1.3 var(--sans);color:var(--ink)}
.proof span:not(.ic){display:block;margin-top:3px;font-size:14px;line-height:1.4;color:var(--muted)}
@media (max-width:980px){.proof,.proof.three{grid-template-columns:repeat(2,minmax(0,1fr))}.proof div:nth-child(odd){padding-left:0;border-left:0}.proof div:nth-child(n+3){border-top:1px solid var(--line);margin-top:0}}
@media (max-width:560px){.proof,.proof.three{grid-template-columns:minmax(0,1fr)}.proof div,.proof div+div{padding:18px 0;border-left:0}.proof div+div{border-top:1px solid var(--line)}}

/* cards */
.card{background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-card)}

/* the three-way comparison: the same three questions asked of each option */
.vs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.opt{padding:28px;display:flex;flex-direction:column}
.opt .tag{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.opt h3{margin-top:12px;font-size:28px}
.opt ul{list-style:none;margin:24px 0 0;padding:0;display:grid}
.opt li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;padding:16px 0;border-top:1px solid var(--line)}
.opt li .ic{width:22px;height:22px;margin-top:1px}
.opt li small{display:block;font:500 10.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.opt li b{display:block;margin-top:4px;font:600 15.5px/1.35 var(--sans);color:var(--ink)}
.st-good{color:var(--green-text)} .st-mid{color:var(--warn)} .st-bad{color:var(--risk-text)}
.opt .foot-note{margin-top:auto;padding-top:18px;font-size:13px;line-height:1.5;color:var(--muted)}
.opt.us{background:var(--green-deep);border-color:var(--green-deep)}
.opt.us .tag{color:var(--green)}
.opt.us h3,.opt.us li b{color:#fff}
.opt.us li{border-top-color:rgba(255,255,255,.12)}
.opt.us li small,.opt.us .foot-note{color:#A9C7B4}
.opt.us .st-good{color:var(--green)}
.opt.us sup.fn a{color:var(--green)}
@media (max-width:900px){.vs{grid-template-columns:minmax(0,1fr)}}

/* the payoff chart: one index, three markets, what comes back at maturity */
.payoff{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);overflow:hidden}
.payoff .plot{padding:clamp(20px,2.4vw,32px);border-right:1px solid var(--line)}
.payoff .side{padding:clamp(20px,2.4vw,32px);display:flex;flex-direction:column;background:var(--surface-2)}
@media (max-width:900px){.payoff{grid-template-columns:minmax(0,1fr)}.payoff .plot{border-right:0;border-bottom:1px solid var(--line)}}
.scen-tabs{display:inline-flex;gap:4px;padding:4px;border-radius:100px;background:var(--sand);max-width:100%}
.scen-tab{min-height:44px;padding:0 18px;border:0;border-radius:100px;background:transparent;cursor:pointer;font:600 14px/1 var(--sans);color:var(--muted);white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;transition:background-color .2s ease,color .2s ease,box-shadow .2s ease}
.scen-tab i{width:8px;height:8px;border-radius:50%}
.scen-tab[data-k="fall"] i{background:var(--risk)}
.scen-tab[data-k="flat"] i{background:var(--faint)}
.scen-tab[data-k="rise"] i{background:var(--green)}
.scen-tab:hover{color:var(--ink)}
.scen-tab[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(20,24,29,.08),0 4px 12px -6px rgba(20,24,29,.2)}
@media (max-width:520px){.scen-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}.scen-tab{padding:0 8px;font-size:13px;justify-content:center}.scen-tab i{display:none}}
.legend{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-size:13.5px;color:var(--body)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend i{width:22px;height:0;border-top:3px solid var(--green)}
.legend i.dir{border-top:2px dashed var(--faint)}
.legend i.area{height:12px;border:0;border-radius:3px;background:var(--green-tint);width:16px}
.chart{margin-top:14px}
.chart svg{width:100%;height:auto;overflow:visible}
.chart text{font-family:var(--sans);font-size:13px;fill:var(--muted)}
.chart .grid line{stroke:var(--grid-line)}
.chart .zero{stroke:var(--zero-line)}
.chart .tick{font:500 12px var(--mono)}
.chart .title{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;fill:var(--muted)}
.chart .saved{fill:var(--green-tint)}
.chart .saved-l{font-size:12px;font-weight:600;fill:var(--green-text)}
.chart .dir{fill:none;stroke:var(--faint);stroke-width:2;stroke-dasharray:6 5}
.chart .mld{fill:none;stroke:var(--green-line);stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round}
.chart .guide{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 4}
.chart .dot-d{fill:var(--surface);stroke:var(--faint);stroke-width:2.5}
.chart .dot-m{fill:var(--green);stroke:var(--surface);stroke-width:3}
.chart .lab-m{font-size:13px;font-weight:600;fill:var(--green-text)}
.chart .lab-d{font-size:13px;font-weight:500;fill:var(--body)}
.chart .halo{paint-order:stroke;stroke:var(--surface);stroke-width:5px;stroke-linejoin:round}
.chart g[data-s]{opacity:0;transition:opacity .35s ease}
[data-scen][data-k="rise"] .chart g[data-s="rise"],[data-scen][data-k="flat"] .chart g[data-s="flat"],[data-scen][data-k="fall"] .chart g[data-s="fall"]{opacity:1}
/* a phone keeps the whole chart and grows the words instead */
@media (max-width:600px){.payoff .plot{padding:18px 14px}.chart text{font-size:20px}.chart .tick{font-size:19px}.chart .title{font-size:16px}.chart .saved-l{font-size:18px}.chart .lab-m,.chart .lab-d{font-size:20px}.legend{font-size:13px;gap:6px 16px}}
@media (max-width:360px){.chart text{font-size:23px}.chart .tick{font-size:22px}.chart .title{font-size:18px}.chart .saved-l{font-size:21px}.chart .lab-m,.chart .lab-d{font-size:23px}}
.side .k{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--green-text)}
[data-k="fall"] .side .k{color:var(--risk-text)}
[data-k="flat"] .side .k{color:var(--muted)}
.side .get{margin-top:16px;font:400 clamp(38px,4vw,54px)/1 var(--serif);letter-spacing:-.03em;color:var(--ink)}
.side .getk{margin-top:8px;font-size:14px;color:var(--muted)}
.side .say{margin-top:22px;padding-top:22px;border-top:1px solid var(--line);font:400 19px/1.45 var(--serif);color:var(--ink)}
.side .fine{margin-top:auto;padding-top:22px;font-size:13px;line-height:1.55;color:var(--muted)}

/* bento: illustrated cards, a title and a line each */
.bento{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tile{display:flex;flex-direction:column;overflow:hidden}
.tile.wide{grid-column:span 2}
.tile .art{position:relative;min-height:210px;margin:10px 10px 0;border-radius:14px;background:var(--sand);display:grid;place-items:center;padding:24px;overflow:hidden}
.tile .txt{padding:22px 26px 28px}
.tile .txt p{margin-top:8px;font-size:15.5px;line-height:1.55;color:var(--body);max-width:46ch}
.tile .t{display:inline-block;margin-bottom:12px;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--green-text)}
@media (max-width:900px){.bento{grid-template-columns:minmax(0,1fr)}.tile.wide{grid-column:auto}}
/* the small pictures inside tiles */
.mini{background:var(--surface);border:1px solid var(--card-line);border-radius:14px;box-shadow:0 10px 30px -18px rgba(20,24,29,.3);padding:14px 16px;width:min(340px,100%)}
.mini .h{display:flex;justify-content:space-between;align-items:center;font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mini .r{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--body)}
.mini .h+.r{margin-top:10px}
.mini .r b{font-weight:600;color:var(--ink);text-align:right}
.mini .r b.g{color:var(--green-text)}
.mini .r b.w{color:var(--risk-text)}
/* platform: a dashboard picture beside three short points */
.plat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.plat h2{font-size:clamp(32px,3.4vw,48px);max-width:18ch}
.plat .lede{margin-top:20px;max-width:46ch}
@media (max-width:980px){.plat{grid-template-columns:minmax(0,1fr)}}
.dash{padding:20px;box-shadow:var(--lift);border-radius:24px}
.dash .bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.dash .bar b{font:500 16px/1.2 var(--serif);color:var(--ink)}
.dash .kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
.dash .kpis div{padding:14px;border-radius:var(--r-inner);background:var(--sand)}
.dash .kpis dt{font:500 10px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dash .kpis dd{margin:8px 0 0;font:400 22px/1 var(--serif);color:var(--ink)}
.dash table{width:100%;margin-top:14px;border-collapse:collapse;font-size:13.5px}
.dash th{text-align:left;font:500 10px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:8px 8px 8px 0}
.dash td{padding:12px 8px 12px 0;border-top:1px solid var(--line);color:var(--body);white-space:nowrap}
.dash td:first-child{color:var(--ink);font-weight:600;white-space:normal}
.dash .ok{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:100px;background:var(--green-tint);color:var(--green-text);font:500 11px/1 var(--mono)}
.dash .tbl{overflow-x:auto}
@media (max-width:520px){.dash .kpis dd{font-size:17px;overflow-wrap:anywhere}.dash .kpis div{padding:12px 10px}}
.points{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:26px}
.points li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:18px;align-items:start}
.points .ic{width:48px;height:48px;border-radius:14px;background:var(--green-tint);color:var(--green-text);padding:12px}
.points b{display:block;font:400 21px/1.25 var(--serif);color:var(--ink)}
.points p{margin-top:6px;font-size:15.5px;line-height:1.55}

/* risks: the headline of each is visible; the full answer is one tap away */
.risk-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,80px);align-items:start}
.risk-grid .head{margin-bottom:0;display:block;position:sticky;top:110px}
.risk-grid .head .lede{margin-top:20px}
@media (max-width:980px){.risk-grid{grid-template-columns:minmax(0,1fr)}.risk-grid .head{position:static}}
.acc{display:grid;gap:10px}
.acc details{background:var(--card);border:1px solid var(--card-line);border-radius:16px;transition:border-color .2s ease}
.acc details[open]{border-color:var(--line-3)}
.acc summary{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) 36px;gap:16px;align-items:center;padding:20px 22px;cursor:pointer;min-height:44px}
.acc summary::-webkit-details-marker{display:none}
.acc summary .k{display:block;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.acc summary .q{display:block;margin-top:10px;}
.acc summary .q:first-child{margin-top:0}
.acc summary .q{font:400 clamp(18px,1.6vw,21px)/1.3 var(--serif);color:var(--ink);text-wrap:balance}
.acc summary .pm{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--ink);transition:transform .3s var(--ease),background-color .2s}
.acc summary .pm svg{width:18px;height:18px;fill:currentColor}
.acc details[open] .pm{transform:rotate(45deg);background:var(--sand)}
.acc summary:hover .pm{background:var(--sand)}
.acc .a{padding:0 22px 22px;font-size:15.5px;line-height:1.65;color:var(--body);max-width:70ch}
.acc .a b{display:block;margin-bottom:6px;font:500 10.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--green-text)}
.acc .hard{border-color:rgba(201,123,99,.5);background:linear-gradient(180deg,var(--surface),var(--risk-tint))}
.acc .hard[open]{border-color:var(--risk)}
.acc .hard summary .k,.acc .hard .a b{color:var(--risk-text)}

/* the closing band holds the form: the page's one decision */
.band{position:relative;overflow:hidden;border-radius:32px;background:var(--green-deep);color:#CFE3D6;padding:clamp(28px,5vw,72px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,72px);align-items:center}
.band:before{content:'';position:absolute;left:-20%;bottom:-60%;width:80%;aspect-ratio:1;pointer-events:none;background:radial-gradient(closest-side,rgba(46,209,112,.35),rgba(46,209,112,0))}
.band:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:48px 48px;
  -webkit-mask-image:linear-gradient(90deg,#000,transparent 60%);mask-image:linear-gradient(90deg,#000,transparent 60%)}
.band>*{position:relative;z-index:1}
.sec.end{padding-bottom:clamp(40px,5vw,64px)}
.band .eyebrow{color:var(--green)}
.band .eyebrow:before{box-shadow:0 0 0 4px rgba(46,209,112,.2)}
.band h2{color:#fff;max-width:14ch}
.band h2 em{color:var(--green)}
.band .lede{margin-top:22px;color:#CFE3D6}
.band .ticks{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:12px}
.band .ticks li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.45;color:#E6F1EA}
.band .ticks .ic{width:22px;height:22px;color:var(--green);margin-top:1px}
.band .form{box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
@media (max-width:980px){.band{grid-template-columns:minmax(0,1fr)}}
@media (max-width:700px){.band-wrap{padding-inline:12px}.band{border-radius:24px;padding:28px 20px}}

/* forms */
.form{padding:clamp(22px,2.6vw,34px);color:var(--body)}
.form h3{font-size:26px}
.form .intro{margin:8px 0 20px;font-size:15px;color:var(--muted)}
.form .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:520px){.form .row{grid-template-columns:minmax(0,1fr)}}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field label,.group legend{font:600 13px/1.3 var(--sans);color:var(--ink)}
.field input{height:52px;padding:0 16px;border:1px solid var(--line-2);border-radius:var(--r-field);background:var(--field-bg);font-size:16px;color:var(--ink);
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}
.field input::placeholder{color:#8A9097}
.field input:hover{border-color:var(--line-3)}
.field input:focus{outline:0;border-color:var(--green-line);background:var(--surface);box-shadow:0 0 0 4px rgba(46,209,112,.18)}
.field input[aria-invalid="true"]{border-color:var(--risk-text);box-shadow:0 0 0 4px rgba(201,123,99,.14)}
.field .err{font-size:13px;color:var(--risk-text)}
.field .err:empty{display:none}
/* once a submit has been tried, error lines keep their space: clearing them used to shift the
   form upward under the pointer, and a click aimed at the consent box landed below it */
.form.tried .field .err,.form.tried .group .err{display:block;min-height:1.4em}
.group{border:0;margin:6px 0 14px;padding:0}
.group legend{margin-bottom:10px;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line-2);border-radius:100px;background:var(--surface);
  font-size:14px;line-height:1.3;color:var(--body);transition:all .2s ease}
.chip input:hover+span{border-color:var(--line-3)}
.chip input:checked+span{background:var(--green-tint);border-color:var(--green-line);color:var(--ink)}
.chip input:focus-visible+span{outline:2px solid var(--green-line);outline-offset:2px}
.group .err{margin-top:8px;font-size:13px;color:var(--risk-text)}
.group .err:empty{display:none}
.consent{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;margin:8px 0 6px;font-size:13px;line-height:1.55;color:var(--muted);cursor:pointer}
.consent input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--green-line)}
.cerr{margin:0 0 12px 34px;font-size:13px;color:var(--risk-text)}
.cerr:empty{display:none}
.form.tried .cerr{display:block;min-height:1.4em}
.form .btn{width:100%;margin-top:8px}
.form .fine{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--muted);text-align:center}
.form-err{margin-top:10px;text-align:center;font-size:13px;color:var(--risk-text)}
.form-err:empty{display:none}
.done{display:none;padding:10px 0 4px}
.form.sent .done{display:block}
.form.sent .fields{display:none}
.done .tick{width:48px;height:48px;border-radius:50%;background:var(--green-tint);display:grid;place-items:center;color:var(--green-text)}
.done .tick svg{width:24px;height:24px;fill:currentColor}
.done h3{margin-top:16px}
.done p{margin-top:8px;color:var(--body)}

/* the deal room picture in the unlisted hero */
.room{padding:18px}
.room .dv-top{padding:4px 4px 14px;border-bottom:1px solid var(--line)}
.lot{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 4px;border-bottom:1px solid var(--line)}
.lot .logo{width:44px;height:44px;border-radius:12px}
.lot b{display:block;font:600 16px/1.2 var(--sans);color:var(--ink)}
.lot small{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
.lot .p{display:flex;align-items:center;gap:8px;font:400 20px/1 var(--serif);color:var(--ink)}
.lot .p .blur{filter:blur(5px);user-select:none}
.lot .p .ic{width:18px;height:18px;color:var(--muted)}
.lot.more-row .stack{display:flex}
.lot.more-row .stack span{width:30px;height:30px;border-radius:9px;border:2px solid var(--surface);background:var(--stack-1)}
.lot.more-row .stack span+span{margin-left:-10px}
.lot.more-row .stack span:nth-child(2){background:var(--stack-2)}
.lot.more-row .stack span:nth-child(3){background:var(--stack-3)}
.lot.more-row{grid-template-columns:auto minmax(0,1fr);border-bottom:0}
.lot.more-row p{font-size:14px;color:var(--body)}
.lot.more-row p b{display:inline;font-size:14px}
.room .held{display:flex;align-items:center;gap:10px;margin-top:16px;padding:12px 14px;border-radius:var(--r-inner);background:var(--green-tint);font-size:13.5px;color:var(--ink)}
.room .held .ic{width:20px;height:20px;color:var(--green-text)}
.logo{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font:600 20px/1 var(--sans);color:#fff;flex:none}

/* deal carousel */
.rail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:8px}
.rail-head h2{max-width:14ch}
.rail-head .lede{margin-top:16px}
.rail-ctrl{display:flex;gap:8px;flex:none}
.rail-ctrl button{width:52px;height:52px;border-radius:50%;border:1px solid var(--line-3);background:var(--surface);display:grid;place-items:center;cursor:pointer;transition:all .2s ease}
.rail-ctrl button:hover{border-color:var(--ink)}
.rail-ctrl button[disabled]{opacity:.35;cursor:default}
.rail-ctrl svg{width:20px;height:20px;fill:var(--ink)}
@media (max-width:700px){.rail-ctrl{display:none}}
.static .rail-ctrl{display:none}
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);padding:32px var(--pad) 12px;margin:0 calc(var(--pad)*-1);
  scrollbar-width:none;overscroll-behavior-x:contain}
.rail::-webkit-scrollbar{display:none}
.rail:focus-visible{outline-offset:-4px}
.deal{flex:0 0 min(340px,82vw);scroll-snap-align:start;display:flex;flex-direction:column;overflow:hidden}
.deal .cover{position:relative;height:104px;padding:16px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  background:radial-gradient(120% 140% at 100% 0%,var(--c1,#7A2BD8) 0%,var(--c2,#3C006B) 55%,var(--c3,#24003F) 100%);color:#fff}
.deal .cover .logo{width:44px;height:44px;border-radius:12px;background:#fff;color:var(--c2,#3C006B);font-size:20px;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.deal .cover .pill{background:rgba(20,24,29,.72);color:#fff}
.deal .body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.deal h3{font-size:22px}
.deal .cat{margin-top:2px;font-size:13.5px;color:var(--muted)}
.deal .metric{margin-top:16px}
.deal .metric .k{font:500 10.5px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.deal .metric .v{margin-top:6px;display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;font:400 30px/1 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.deal .metric .v .up{font:600 12px/1 var(--sans);letter-spacing:0;padding:6px 10px;border-radius:100px;background:var(--green-tint);color:var(--green-text)}
.deal .src{margin-top:8px;font-size:11.5px;line-height:1.5;color:var(--muted)}
.deal .lead-line{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font:600 14.5px/1.4 var(--sans);color:var(--ink)}
.deal dl{margin:14px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.deal dl div{padding:10px;border-radius:var(--r-inner);background:var(--sand)}
.deal dt{font:500 10px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.deal dd{margin:4px 0 0;font:600 14px/1.3 var(--sans);color:var(--ink)}
.price{margin-top:auto;padding-top:14px}
.price .locked{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 10px 10px 14px;border-radius:14px;border:1px solid var(--line-2)}
.price .k{display:block;font:500 10px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.price .blur{display:block;margin-top:4px;font:400 20px/1 var(--serif);color:var(--ink);filter:blur(6px);user-select:none}
.price .unlocked{padding:14px 16px;border-radius:14px;background:var(--green-tint);font-size:14px;line-height:1.5;color:var(--ink)}
.deal.more{background:transparent;border-style:dashed;border-color:var(--line-3)}
.deal.more .body{justify-content:center}
.deal.more .stack{display:flex;margin-bottom:20px}
.deal.more .stack span{width:44px;height:44px;border-radius:12px;border:3px solid var(--sand);background:var(--stack-1);filter:blur(1.5px)}
.deal.more .stack span+span{margin-left:-14px}
.deal.more .stack span:nth-child(2){background:var(--stack-2)}
.deal.more .stack span:nth-child(3){background:var(--stack-3)}
.deal.more .stack span:nth-child(4){background:var(--surface);filter:none;display:grid;place-items:center;color:var(--ink);font:600 15px/1 var(--sans)}
.deal.more p{margin-top:8px;color:var(--body);font-size:14.5px}
.deal.more .btn{margin-top:20px;align-self:flex-start}
.rail-note{margin-top:20px;max-width:80ch;font-size:13px;line-height:1.6;color:var(--muted)}

/* how it works: a real sequence, so it is numbered */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:s}
.step{overflow:hidden;display:flex;flex-direction:column}
.step .art{margin:10px 10px 0;height:200px;border-radius:14px;background:var(--sand);display:grid;place-items:center;padding:20px}
.step .txt{padding:22px 26px 28px}
.step .n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--on-ink);font:600 13px/1 var(--mono);margin-bottom:14px}
.step p{margin-top:8px;font-size:15.5px;line-height:1.55}
@media (max-width:900px){.steps{grid-template-columns:minmax(0,1fr)}}
.bubbles{display:grid;gap:8px;width:min(260px,100%)}
.bubble{max-width:86%;padding:10px 14px;border-radius:16px;font-size:13px;line-height:1.4;background:var(--surface);color:var(--ink);box-shadow:0 6px 18px -12px rgba(20,24,29,.35)}
.bubble.me{justify-self:end;background:var(--bubble-me);border-bottom-right-radius:4px}
.bubble.them{border-bottom-left-radius:4px}
.bubble small{display:block;margin-top:4px;font:500 10px/1 var(--mono);color:var(--muted)}
.holding{display:flex;align-items:center;gap:12px}
.holding .logo{width:40px;height:40px;border-radius:10px;font-size:17px;background:#3C006B}

/* edge: three reasons, each a picture word */
.edge{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
.edge article{padding-top:26px;border-top:1px solid var(--line-2)}
.edge .ic{width:56px;height:56px;border-radius:16px;background:var(--card);border:1px solid var(--card-line);color:var(--green-text);padding:14px}
.edge h3{margin-top:22px}
.edge p{margin-top:10px;font-size:15.5px;line-height:1.55}
@media (max-width:900px){.edge{grid-template-columns:minmax(0,1fr)}}

/* disclosures and footer */
.fn-k{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:6px;border-radius:50%;background:var(--green-tint);color:var(--green-text);font:500 11px/1 var(--mono);vertical-align:1px}
/* the footer styles are copied from the homepage template (scripts/home-v3/home.tpl.html); the markup is the homepage's, injected by scripts/site/pages.py */
.foot{border-top:1px solid var(--line);padding-block:56px 36px}
.foot img{height:36px;width:auto}
.fcols{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,64px)}
@media(max-width:900px){.fcols{grid-template-columns:repeat(3,minmax(0,1fr))} .fbrand{grid-column:1/-1}}
@media(max-width:560px){.fcols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:340px){.fcols{grid-template-columns:minmax(0,1fr)}}
.fcontact{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px;font-size:14.5px;color:var(--body)}
.fcontact span{display:block;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.fcontact a{display:inline-block;padding:9px 0;margin:-9px 0} .fcontact a:hover,.fcol a:hover{color:var(--ink)}
.fcol{display:flex;flex-direction:column;gap:0;font-size:14.5px;color:var(--muted)} .fcol a{padding:10px 0} .fcol h4{margin:0 0 6px;font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.reg{margin-top:44px;padding-top:26px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:6px 26px;font-size:13.5px;color:var(--body)} .reg b{color:var(--ink);font-weight:600}
.disc{margin-top:30px;padding-top:26px;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px clamp(24px,3vw,44px)}
@media(max-width:900px){.disc{grid-template-columns:minmax(0,1fr)}}
.disc h5{margin:0 0 9px;font:500 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.disc p{margin:0;font-size:12.5px;line-height:1.7;color:var(--faint)}
.reg a{text-decoration:underline;text-underline-offset:2px} .reg a:hover{color:var(--ink)}
.note{margin-top:16px;font-size:12px;line-height:1.7;color:var(--faint);max-width:112ch} .note a{text-decoration:underline;text-underline-offset:2px} .note a:hover{color:var(--ink)} .note.copy{margin-top:10px}

/* modal for the gated price */
.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:var(--scrim);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;transition:opacity .25s ease}
.modal[hidden]{display:none}
.modal.open{opacity:1}
.modal .dialog{width:min(460px,100%);max-height:calc(100vh - 40px);overflow:auto;border-radius:var(--r-card);transform:translateY(10px);transition:transform .3s var(--ease)}
.modal.open .dialog{transform:none}
.modal .x{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.modal .x svg{width:20px;height:20px;fill:var(--muted)}
.modal .x:hover{background:var(--hover)}
.modal .form{position:relative}
.modal .form h3{padding-right:40px}

/* reveal: the hidden state belongs to the script that undoes it */
html.js .rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js .rv.in{opacity:1;transform:none}
html.js .rv.d1{transition-delay:.08s}
html.js .rv.d2{transition-delay:.16s}
html.js .rv.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .rv{opacity:1;transform:none;transition:none}
  html.js .float{animation:none}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* a phone gets the one action at the bottom once the hero has gone, and loses it again while
   the form is on screen */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));
  background:var(--nav-bg-strong);backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);
  border-top:1px solid var(--line);transform:translateY(110%);transition:transform .35s var(--ease);visibility:hidden}
.dock.on{transform:none;visibility:visible}
.dock .btn{width:100%}
@media (min-width:701px){.dock{display:none}}

/* phone */
@media (max-width:700px){
  body{font-size:16px}
  .nav .wrap{height:64px}
  .nav .btn{display:none}
  .cta .btn{flex:1 1 100%}
  .head{margin-bottom:32px}
  .tile .art,.step .art{min-height:180px;height:auto}
  .opt{padding:22px}
}