/* The pages beside the homepage: /future-advantage, /privacy and the 404. The homepage keeps its own styles inline; the tokens,
   type, nav, buttons, dialog, closing band and footer below follow it, with Cobalt as the accent (its default palette). */
:root{
  --ink:#12172A; --text:#1C2130; --muted:#5E6374; --faint:#80859A; --rule:#E6E0D5; --cream:#F6F1E8; --paper:#FBF8F2; --panel:#EFE9DE;
  --gold:#C98F32; --gold-soft:#E8C27A; --pale:#F3EFE7; --night:#131A30; --cobalt:#3458D4; --black:#000;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif; --sans:Inter,Aptos,"Segoe UI",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --gutter:max(24px,env(safe-area-inset-left,0px)); --gutter-r:max(24px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--cream);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:#0C1020}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:-.012em;text-wrap:balance;color:var(--text)}
h1{font-size:clamp(44px,6vw,88px);line-height:1;font-weight:300}
h2{font-size:clamp(34px,4.4vw,64px);line-height:1.04}
h3{font-size:clamp(24px,2.2vw,32px);line-height:1.15}
p{margin:0}
a{color:inherit}
img{display:block;max-width:100%}
button{font:inherit}
/* Focus (UX review, 8 November): a cobalt ring on light backgrounds and a pale one over the dark bands, which set --focus, for links,
   buttons and fields alike. */
:focus-visible{outline:2px solid var(--focus,var(--cobalt));outline-offset:3px;border-radius:2px}
/* Skip to content (UX review, 8 November): the keyboard's first stop on every page, out of sight until it is focused. */
.skip{position:fixed;top:calc(env(safe-area-inset-top,0px) + 14px);left:var(--gutter);z-index:40;padding:10px 18px;border-radius:999px;background:var(--cobalt);color:#fff;font-size:14px;font-weight:500;text-decoration:none;transform:translateY(-160%);transition:transform .2s var(--ease)}
.skip:focus{transform:none}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter-r)}
.label{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt)}
.lede{font-size:clamp(17px,1.35vw,20px);color:var(--muted);max-width:640px}
.btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 24px;border:0;border-radius:999px;background:var(--cobalt);color:#fff;font-weight:500;font-size:15.5px;text-decoration:none;cursor:pointer;transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:15px;height:15px}
.btn.ghost{background:transparent;color:var(--pale);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pale) 42%,transparent)}  /* the second button on a dark band */
.btn.ghost:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pale) 85%,transparent)}
.link{font-weight:500;font-size:15.5px;text-decoration:none;display:inline-flex;align-items:center;gap:8px;color:var(--cobalt)}
.link:hover{text-decoration:underline;text-underline-offset:4px}
.link svg{width:14px;height:14px}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}

/* Nav: pale over the night bands (data-dark), ink on a solid cream fade elsewhere (page.js). Without JS it stays at the top. */
.nav{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:20;color:var(--pale);transition:color .6s}
html:not(.js) .nav{position:absolute}
.nav.ink{color:var(--ink)}
/* The scrolled header is opaque (UX review, 4 November): cream over light sections, and over a dark band the band's own colour,
which the script passes in --nav-bg, so no text shows through it. */
.nav::before{content:"";position:absolute;inset:0;background:var(--nav-bg,var(--cream));opacity:0;transition:opacity .6s,background-color .3s;pointer-events:none;z-index:-1}
.nav.solid::before{opacity:1}
.nav.solid.ink::before{box-shadow:0 1px 0 var(--rule)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:72px}
/* The lockup has 20 units of margin inside its viewBox and is 28 px tall, the same size as before but on a whole pixel in the
72 px header, and it may draw past its box: at 100% zoom the edge rows of the rings and letters were being cut (Hugo, 4 November). */
.logo svg{height:28px;width:auto;display:block;color:inherit;overflow:visible}
.nav.ink .logo{color:var(--cobalt)}
.mark{fill:currentColor;transition:fill .6s}.mark-stroke{stroke:currentColor;transition:stroke .6s}
.nav-right{display:flex;align-items:center;gap:22px}
/* The header since 5 November (Hugo): Value creation (the homepage) and Our platform (/future-advantage), the current page marked,
and Let’s talk, which opens the booking page; it is the primary navigation. On phones (UX review, 8 November) the menu keeps the link
to the other page while the .wide item gives way (Value creation where the logo already leads home), and below 460 px the lockup
shows its mark alone to make the room. */
.menu{display:flex;gap:24px;margin:0;padding:0;list-style:none}
.menu a{font-size:13.5px;font-weight:500;text-decoration:none;opacity:.78;transition:opacity .3s;white-space:nowrap}
.menu a:hover,.menu a[aria-current]{opacity:1}
.menu a[aria-current]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.nav .cta{font-size:14px;font-weight:500;text-decoration:none;border:1px solid var(--cobalt);border-radius:999px;padding:9px 16px;background:var(--cobalt);color:#fff;white-space:nowrap}
.nav{--focus:var(--pale)}
.nav.ink{--focus:var(--cobalt)}
@media (max-width:600px){.menu .wide{display:none}}
@media (max-width:459px){.logo{width:48px;overflow:hidden}.nav-right{gap:18px}}

/* Reveals: on scroll into view, once */
.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .9s var(--ease) var(--d,0s),transform .9s var(--ease) var(--d,0s)}
.js [data-reveal].in{opacity:1;transform:none}

/* Sections */
.sec{padding-block:clamp(88px,11vw,150px)}
.sec + .sec{padding-top:0}
.head{display:grid;gap:20px;max-width:880px}
.band{background:var(--night);color:var(--pale);padding-block:clamp(88px,11vw,150px);--focus:var(--pale)}
.band h2,.band h3{color:var(--pale)}
.band .label{color:var(--gold-soft)}
.band .lede{color:color-mix(in srgb,var(--pale) 86%,transparent)}

/* Closing band, in Cobalt as on the homepage */
/* Where to go next: the rewrite branch's line and rings (Hugo, 4 November), in the band's text colour, white on cobalt. The copy sits
left above the line; the rings rise from a point at 78% of the width in a box that scales with the page (ten rings from radius 40
to 780 in 1600, strokes 9 to 1.8, tones 100% to 30%), only the outer, lighter ones passing behind the heading; below the line they
continue as full circles and fade out. It draws once when the line comes into view (the cue carries data-reveal), about 2.9 s,
then holds still; without motion or JavaScript it shows complete. Below 760 px the rings sit under the copy. */
.close{--box:clamp(440px,100vw,1600px);--depth:clamp(150px,15vw,220px);position:relative;overflow:hidden;padding:clamp(110px,12vw,170px) 0 calc(var(--depth) + 84px)}
.close .wrap{position:relative;z-index:1;display:grid;justify-items:start;text-align:left;gap:22px}
.close .lede{text-align:left;max-width:520px}
.close .ctas{display:flex;gap:14px 24px;align-items:center;flex-wrap:wrap;justify-content:flex-start;margin-top:6px}
.close-art{position:absolute;inset:0;pointer-events:none}
.close-cue{position:absolute;left:78%;bottom:var(--depth);width:1px;height:1px}
.close-above{position:absolute;top:0;left:0;right:0;bottom:var(--depth);overflow:hidden}
.close-below{position:absolute;left:0;right:0;bottom:0;height:var(--depth);overflow:hidden;-webkit-mask-image:linear-gradient(#000,transparent 62%);mask-image:linear-gradient(#000,transparent 62%)}
.close-rings,.close-depth{position:absolute;left:78%;width:var(--box);height:calc(var(--box) / 2);transform:translateX(-50%)}
.close-rings{bottom:0}
.close-depth{top:0}
.close-rings path,.close-depth circle{fill:none;stroke:currentColor}
.close-line{position:absolute;left:0;right:0;bottom:var(--depth);height:24px;margin-bottom:-12px;overflow:hidden}
.close-line span{position:absolute;inset:0}
.close-line span::before{content:"";position:absolute;left:0;right:0;top:50%;height:max(1px,calc(var(--box) * .0015625));transform:translateY(-50%);background:currentColor;opacity:.8}
.close-line span::after{content:"";position:absolute;left:100%;top:0;width:144px;height:24px;background:radial-gradient(circle,currentColor 1.3px,transparent 1.8px) 0 50%/9px 24px repeat-x;-webkit-mask-image:linear-gradient(to right,#000,transparent);mask-image:linear-gradient(to right,#000,transparent)}
.close-point{position:absolute;left:78%;bottom:var(--depth);width:calc(var(--box) * .01625);height:calc(var(--box) * .01625);border-radius:50%;background:currentColor;transform:translate(-50%,50%)}
@media (min-width:760px) and (max-width:1099px){.close{--box:80vw}}
@media (max-width:759px){.close{--depth:min(60vw,240px);padding-bottom:calc(var(--depth) + var(--box) * .4875 + 32px)}}
@media (prefers-reduced-motion:no-preference){
  .js .close-line span{animation:close-line 1.2s cubic-bezier(.65,0,.35,1) .2s both paused}
  .js .close-point{animation:close-point .45s cubic-bezier(.2,0,0,1) .95s both paused}
  .js .close-rings path{stroke-dasharray:1;animation:close-draw 1.2s cubic-bezier(.2,0,0,1) 1.05s both paused}
  .js .close-rings g:nth-child(2) path{animation-delay:1.12s}.js .close-rings g:nth-child(3) path{animation-delay:1.19s}.js .close-rings g:nth-child(4) path{animation-delay:1.26s}.js .close-rings g:nth-child(5) path{animation-delay:1.33s}.js .close-rings g:nth-child(6) path{animation-delay:1.40s}.js .close-rings g:nth-child(7) path{animation-delay:1.47s}.js .close-rings g:nth-child(8) path{animation-delay:1.54s}.js .close-rings g:nth-child(9) path{animation-delay:1.61s}.js .close-rings g:nth-child(10) path{animation-delay:1.68s}
  .js .close-depth{animation:close-fade 1.2s cubic-bezier(.2,0,0,1) 1.3s both paused}
  .js .close-cue.in ~ .close-line span,.js .close-cue.in ~ .close-point,.js .close-cue.in ~ .close-above .close-rings path,.js .close-cue.in ~ .close-below .close-depth{animation-play-state:running}
}
@keyframes close-line{from{transform:translateX(calc(-100% - 144px))}}
@keyframes close-point{from{opacity:0;transform:translate(-50%,50%) scale(.2)}}
@keyframes close-draw{from{stroke-dashoffset:1}}
@keyframes close-fade{from{opacity:0}}
.close{background:var(--cobalt);color:#fff;--focus:#fff}
.close h2{color:#fff}
.close .lede{color:rgba(255,255,255,.84)}
.close .btn{background:#fff;color:var(--cobalt)}
.close .btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.close .btn.ghost:hover{box-shadow:inset 0 0 0 1px #fff}

footer{padding-block:28px;font-size:13.5px;color:var(--muted);border-top:1px solid var(--rule)}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--text)}

/* Try the platform: the waiting-list dialog (door.js), as on the homepage */
.door{border:0;padding:0;width:min(520px,calc(100vw - 32px));max-width:none;background:var(--paper);color:var(--text);box-shadow:0 30px 80px rgba(12,16,32,.35)}
.door::backdrop{background:rgba(12,16,32,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.door-card{display:grid;gap:14px;padding:clamp(28px,5vw,44px);position:relative}
.door-card[hidden]{display:none}
.door-card > .label{color:var(--cobalt)}
.door-card h3{font-size:clamp(26px,2.6vw,34px);line-height:1.15;padding-right:28px}
.door-card p{font-size:16px;color:var(--muted)}
.door-card label{margin-top:6px;color:var(--muted)}
.door-card input{font:inherit;font-size:16px;width:100%;padding:13px 18px;border:1px solid var(--rule);border-radius:999px;background:var(--cream);color:var(--text)}
.door-card input:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.door-card .btn{justify-self:start;margin-top:4px}
.door-card .btn[disabled]{opacity:.6;cursor:progress}
.door-card .door-error{color:#A3392B}
.door-card .door-error[hidden]{display:none}
.door-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.door-small{font-size:13.5px}
.door-card .door-small{color:var(--muted)}  /* the privacy line and Would you rather talk now?, darker since the UX review of 8 November */
.door-card h3[tabindex]:focus{outline:none}  /* the thank-you heading takes focus after a sign-up, so it is read out */
.door-small a{color:var(--cobalt)}
.door-x{position:absolute;top:14px;right:14px;width:40px;height:40px;border:0;border-radius:999px;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center}
.door-x:hover{background:var(--panel);color:var(--text)}
.door-x svg{width:18px;height:18px}

/* ---------- /future-advantage ---------- */
/* Hero: the copy on night over the homepage drawing in miniature, its horizon at the foot */
/* The art is cropped to fill the width (xMidYMax slice). Its box grows with very wide screens too (32vw from about 1560 px), or the
crop would cut off the top of the drawing and the lit opportunity with it, as it did from about 1730 px (Hugo, 4 November). */
.pg-hero{--art-h:max(min(44vw,500px),32vw);position:relative;overflow:hidden;background:var(--night);color:var(--pale);padding:clamp(140px,18vh,190px) 0 calc(var(--art-h) * .62)}
.pg-hero .wrap{position:relative;z-index:1;display:grid;gap:22px;justify-items:start}
.pg-hero{--focus:var(--pale)}
.pg-hero h1{color:var(--pale)}
.pg-hero .label{color:var(--gold-soft)}
.pg-hero .lede{color:color-mix(in srgb,var(--pale) 80%,transparent);max-width:660px}
.pg-hero .lede + .lede{margin-top:-8px}
.pg-hero .ctas{margin-top:10px}
.pg-hero .link{color:var(--pale)}
.fa-name{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;color:var(--pale)}
.fa-name svg{height:30px;width:auto;display:block;overflow:visible}
.fa-name .gold{fill:var(--gold)}
.fa-name .gold-s{stroke:var(--gold)}
.fa-name b{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.3vw,32px);line-height:1.1;letter-spacing:-.01em;color:var(--gold-soft)}
.fa-name span{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-soft)}  /* Linebreak's AI platform, beside the mark (Hugo, 3 November) */
.pg-art{position:absolute;left:0;right:0;bottom:0;width:100%;height:var(--art-h);display:block}
/* The drawing since 6 November (Hugo): three horizons, the farthest in gold; the lit route from the business across all three to
the chosen opportunity, beside darker routes to the options not taken (one stops at the horizon); stars in three strengths, a few
twinkling and a few drawn as the Linebreak mark; and now and then a shooting star. Generated by scripts/fa-art.py. */
.pg-star{fill:var(--pale)}
.pg-glow{fill:var(--pale);opacity:.08}
.pg-mark{color:var(--pale);opacity:.4}
.pg-mark circle{fill:currentColor}
.pg-mark .o{fill:none;stroke:currentColor;stroke-width:.7}
.pg-edge{fill:none;stroke:var(--pale);stroke-width:1}
.pg-edge.b{stroke-opacity:.3}
.pg-edge.c{stroke-opacity:.2}
.pg-alt path{fill:none;stroke:var(--pale);stroke-opacity:.2;stroke-width:1;stroke-linecap:round}
.pg-alt path.far{stroke-dasharray:2 6;stroke-opacity:.24}
.pg-cand{fill:var(--pale);fill-opacity:.38}
.pg-cand-ring{fill:none;stroke:var(--pale);stroke-opacity:.26}
.pg-shoot{fill:none;stroke:var(--pale);stroke-width:1.3;stroke-linecap:round;stroke-dasharray:34 600;stroke-dashoffset:34;opacity:0}
.pg-horizon{fill:none;stroke:var(--gold);stroke-opacity:.85;stroke-width:1.4}
.pg-core{fill:var(--pale)}
.pg-core-ring{fill:none;stroke:var(--pale);stroke-opacity:.45}
.pg-route{fill:none;stroke:var(--gold-soft);stroke-width:1.8;stroke-linecap:round}
.pg-rest{fill:none;stroke:var(--pale);stroke-opacity:.55;stroke-width:1.2;stroke-dasharray:2 6;stroke-linecap:round}
.pg-opp{fill:var(--gold-soft)}
.pg-opp-ring{fill:none;stroke:var(--gold-soft);stroke-opacity:.8;stroke-width:1.6}
.pg-opp-halo{fill:none;stroke:var(--gold-soft);stroke-opacity:.35}
.pg-opp,.pg-opp-ring,.pg-opp-halo,.pg-core{transform-box:fill-box;transform-origin:center}
@media (max-width:640px){.pg-art{height:62vw}.pg-hero{padding-bottom:58vw}}

/* What goes in, What you receive: cells under a rule */
.cells{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
.cells.four{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.cell{display:grid;gap:10px;align-content:start;padding-top:24px;border-top:2px solid var(--cobalt);min-width:0}
.cell b{font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.1vw,30px);line-height:1.15;letter-spacing:-.01em}
.cell p{font-size:16px;color:var(--muted)}
.cells.four .cell{background:var(--paper);border:1px solid var(--rule);border-top:2px solid var(--cobalt);padding:clamp(20px,2.2vw,30px)}
.cells.four .cell b{font-size:clamp(20px,1.65vw,24px)}
/* The handoff after the platform's outputs (Hugo, 3 November): one line that passes from Future Advantage to the engagement with Linebreak */
.handoff{margin-top:clamp(32px,4vw,48px);max-width:760px;padding-left:20px;border-left:2px solid var(--cobalt);font-size:clamp(17px,1.35vw,20px);color:var(--text)}
@media (max-width:1023px){.cells.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.cells{grid-template-columns:1fr}}
@media (max-width:560px){.cells.four{grid-template-columns:1fr}}

/* How it works: three steps, the first on night with the research graph */
.step-name{display:grid;gap:6px;margin-top:clamp(48px,6vw,80px);max-width:760px}
.step-name .num{font-size:12.5px;font-weight:600;letter-spacing:.1em;color:var(--gold)}
.band .step-name .num{color:var(--gold-soft)}
.step-name h3{font-size:clamp(28px,2.8vw,40px)}
.step-name .sub{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.band .step-name .sub{color:color-mix(in srgb,var(--pale) 76%,transparent)}
.step-name p{margin-top:10px;font-size:clamp(16px,1.2vw,18px);color:var(--muted)}
.band .step-name p{color:color-mix(in srgb,var(--pale) 86%,transparent)}
.rg{margin:clamp(40px,5vw,72px) 0 0}
.rg-art{display:block;width:100%;height:auto;overflow:visible;color:var(--pale)}
.rg-stages{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
.rg-stages li{display:grid;gap:6px;align-content:start;text-align:center;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--pale) 16%,transparent)}
.rg-stages b{font-family:var(--serif);font-weight:400;font-size:clamp(18px,1.5vw,21px);line-height:1.2;color:var(--pale)}
.rg-stages span{font-size:14.5px;line-height:1.5;color:color-mix(in srgb,var(--pale) 78%,transparent)}
.rg-stages li:nth-child(4) b,.rg-stages li:last-child b{color:var(--gold-soft)}
/* Secondary text a step stronger (UX review, 4 November): the caption at 15 px and brighter on navy, like the stage notes above it */
.rg figcaption{margin-top:28px;font-size:15px;color:color-mix(in srgb,var(--pale) 76%,transparent)}
@media (max-width:760px){
  .rg-stages{grid-template-columns:1fr;gap:0;counter-reset:stage}
  .rg-stages li{text-align:left;grid-template-columns:28px 1fr;column-gap:10px;padding:14px 0}
  .rg-stages li::before{counter-increment:stage;content:counter(stage);grid-row:span 2;font-size:12.5px;font-weight:600;color:var(--gold-soft);padding-top:3px}
}
/* The graph's marks. Base styles are the finished drawing (reduced motion, no JS); with motion it builds left to right once a third
   of it is in view (.play, page.js), and the kept options breathe while it is on screen. Since the UX review of 8 November the whole
   flow shows from the first frame, every mark waiting at a third of its strength, and the build lights it in about three seconds, the
   routes to the kept options tracing in gold last. */
.rg-line{fill:none;stroke:currentColor;stroke-opacity:.42;stroke-width:1.3}
.rg-faint{stroke-opacity:.22}
.rg-src{fill:currentColor;fill-opacity:.7}
.rg-q{fill:var(--pale)}
.rg-q-ring{fill:none;stroke:var(--pale);stroke-opacity:.5;stroke-width:1.3}
.rg-sub{fill:var(--pale);fill-opacity:.85}
.rg-ev{fill:var(--pale);fill-opacity:.55}
.rg-opp{fill:var(--night);stroke:var(--pale);stroke-width:1.5;stroke-opacity:.3}
.rg-opp.rg-kept{stroke:var(--gold-soft);stroke-opacity:1}
.rg-track{fill:none;stroke:var(--pale);stroke-opacity:.28;stroke-width:1.3;stroke-dasharray:2 5;stroke-linecap:round}
.rg-gate{fill:none;stroke:var(--gold);stroke-opacity:.85;stroke-width:1.6}
.rg-route{fill:none;stroke:var(--gold-soft);stroke-width:1.8;stroke-linecap:round}
.rg-opt{fill:var(--gold-soft)}
.rg-opt-ring{fill:none;stroke:var(--gold-soft);stroke-width:1.6}
.rg-opt-halo{fill:none;stroke:var(--gold-soft);stroke-opacity:.4;stroke-width:1.1}
.rg-art circle{transform-box:fill-box;transform-origin:center}
@media (max-width:640px){.rg-line,.rg-q-ring,.rg-track{stroke-width:2.4}.rg-opp,.rg-gate,.rg-opt-ring{stroke-width:2.6}.rg-route{stroke-width:3}}

/* The decision and activation: two cells led by an emblem, as the homepage offers */
.offers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
.offer{display:grid;gap:8px;align-content:start;padding-top:26px;border-top:1px solid var(--rule);min-width:0}
.offer-mark{display:flex;align-items:center;height:36px;margin-bottom:10px;color:var(--cobalt)}
.offer-mark svg{height:100%;width:auto;display:block;overflow:visible}
/* New Icon's logo in its own black, linking to newicon.net, the link no wider than the logo (Hugo, 4 November) */
.offer-mark.newicon-mark{color:var(--black);justify-self:start;width:max-content;transition:opacity .3s}
.offer-mark.newicon-mark:hover{opacity:.75}
.offer-mark.newicon-mark svg{height:30px}  /* the solid wordmark a step below the 36px box of the two line emblems, which it outweighed at their height (review, 9 November) */
.offer .num{font-size:12.5px;font-weight:600;letter-spacing:.1em;color:var(--gold)}
.offer h3{font-size:clamp(26px,2.4vw,34px)}
.offer-sub{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.offer p{font-size:16px;color:var(--muted);max-width:460px;margin-top:6px}
.offer .link{margin-top:8px;justify-self:start;font-size:15px}
@media (max-width:860px){.offers{grid-template-columns:1fr}}

/* For investors: title and copy side by side */
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:start;padding-top:clamp(48px,6vw,80px);border-top:1px solid var(--rule)}
.split .head{gap:16px}
.split h2{font-size:clamp(32px,3.4vw,48px)}
.split .body{display:grid;gap:18px;font-size:clamp(17px,1.3vw,19px);color:var(--muted)}
.split .body p:first-child{color:var(--text)}
@media (max-width:860px){.split{grid-template-columns:1fr}}

@media (prefers-reduced-motion:no-preference){
  .js .pg-star{animation:pg-in .8s ease var(--t) both}
  .js .pg-horizon,.js .pg-route,.js .pg-edge{stroke-dasharray:1;stroke-dashoffset:1}
  .js .pg-edge.c{animation:pg-trace 1.1s var(--ease) .1s forwards}
  .js .pg-edge.b{animation:pg-trace 1.1s var(--ease) .22s forwards}
  .js .pg-horizon{animation:pg-trace 1.1s var(--ease) .34s forwards}
  .js .pg-star.tw{animation:pg-in .8s ease var(--t) both,pg-twinkle var(--tw) ease-in-out calc(var(--t) + var(--tl)) infinite}
  .js .pg-glow{animation:pg-in 1.2s ease 1.2s both}
  .js .pg-mark{animation:pg-in .9s ease var(--t) both}
  .js .pg-alt{animation:pg-in .9s ease var(--t) both}
  .js .pg-shoot.a{animation:pg-shoot 13s linear 3.5s infinite}
  .js .pg-shoot.b{animation:pg-shoot 19s linear 9s infinite}
  .js .pg-core,.js .pg-core-ring{animation:pg-pop .5s var(--ease) .9s both}
  .js .pg-route{animation:pg-trace .6s var(--ease) 1.3s forwards}
  .js .pg-rest{animation:pg-in .8s ease 1.8s both}
  .js .pg-opp,.js .pg-opp-ring{animation:pg-pop .6s var(--ease) 2.1s both}
  .js .pg-opp-halo{animation:pg-pop .6s var(--ease) 2.1s both,pg-breathe 3.6s ease-in-out 2.8s infinite}
  .js .pg-hero:not(.play) .pg-art *{animation-play-state:paused}

  .js .rg-art :is(.rg-line,.rg-src,.rg-pop,.rg-gate,.rg-track){animation:rg-light .5s ease calc(var(--t) * .6) both}
  .js .rg-art .rg-route{stroke-dasharray:1;stroke-dashoffset:1;animation:pg-trace .5s var(--ease) calc(var(--t) * .6) forwards}
  .js .rg-art .rg-opp.rg-dropped{animation:rg-light .5s ease calc(var(--t) * .6) both,rg-drop .7s ease 2s both}
  .js .rg-art .rg-opp.rg-kept{animation:rg-light .5s ease calc(var(--t) * .6) both,rg-keep .5s ease 2s both}
  .js .rg-art .rg-opt-halo{animation:rg-light .5s ease calc(var(--t) * .6) both,pg-breathe 3.6s ease-in-out calc(var(--t) * .6 + .5s) infinite}
  .js .rg:not(.play) .rg-art *{animation-play-state:paused}
}
@keyframes pg-in{from{opacity:0}to{opacity:1}}
@keyframes pg-trace{to{stroke-dashoffset:0}}
@keyframes pg-pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes pg-breathe{50%{transform:scale(1.22);stroke-opacity:.12}}
@keyframes pg-twinkle{50%{opacity:.35}}
@keyframes pg-shoot{0%{stroke-dashoffset:34;opacity:0}.6%{opacity:.85}5%{stroke-dashoffset:-300;opacity:0}to{stroke-dashoffset:-300;opacity:0}}
@keyframes rg-light{from{opacity:.34}}
@keyframes rg-drop{from{stroke-opacity:.8}to{stroke-opacity:.3}}
@keyframes rg-keep{from{stroke:var(--pale);stroke-opacity:.8}to{stroke:var(--gold-soft);stroke-opacity:1}}

/* ---------- /privacy ---------- */
.doc{max-width:760px;padding:clamp(130px,16vh,170px) 0 clamp(72px,9vw,120px)}
.doc h1{font-size:clamp(40px,5vw,64px);margin-top:16px}
.doc .updated{margin:18px 0 clamp(40px,5vw,64px);font-size:14px;color:var(--muted)}
.doc section{margin:0 0 clamp(32px,4vw,44px)}
.doc h2{font-size:clamp(22px,2vw,28px);line-height:1.2;margin:0 0 12px}
.doc p{margin:0 0 12px;color:var(--muted);max-width:68ch}
.doc ul{margin:10px 0 14px;padding-left:1.2rem}
.doc li{margin:0 0 8px;color:var(--muted);max-width:66ch}
.doc li::marker{color:var(--cobalt)}
.doc strong{color:var(--text);font-weight:600}
.doc a{color:var(--cobalt);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.doc a:hover{text-decoration-thickness:2px}

/* ---------- 404: the Future Advantage hero, one screen tall ---------- */
.pg-hero.lost{min-height:100vh;min-height:100svh;display:grid;align-content:center;padding-top:120px}
.lost .lede{max-width:46ch}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .skip{transition:none}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
}