/* Val Growth - shared design system
Ink #0C0C0E · Paper #F4F0F6 · Signal #E6228F · Fraunces headings + Inter body */
*{margin:0;padding:0;box-sizing:border-box}
:root{
--ink:#0C0C0E;
--panel:#141417;
--paper:#F4F0F6;
--signal:#E6228F;
--signal-hi:#ff2fa0;
--muted:#9A9AA3;
--body:#E8E4EA;
--line:rgba(244,240,246,0.1);
}
html{background:var(--ink);scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font:18px/1.7 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
body,body *{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
h1,h2,h3,h4,h5,h6{font-family:'Fraunces',Georgia,serif}
code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
a{color:var(--signal);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
/* Container width is a variable, not a fixed value, so nav, content and footer
always share the same left/right edge on a given page - that alignment was
the original bug. 1440px matches the deployed site; long-form article pages
opt into a narrower measure with . */
:root{--container:1440px}
body.prose{--container:980px}
.wrap,.wrap-wide{max-width:var(--container);margin:0 auto;padding:0 clamp(20px,4vw,40px)}
/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:10;background:rgba(12,12,14,0.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav .wrap,nav .wrap-wide{display:flex;align-items:center;justify-content:space-between;height:62px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;color:var(--paper);flex-shrink:0}
.logo:hover{text-decoration:none}
.logo .bars{display:flex;align-items:flex-end;gap:4px;height:22px}
.logo .bars span{width:5px;background:var(--signal);border-radius:1px}
.logo .bars span:nth-child(1){height:42%}
.logo .bars span:nth-child(2){height:72%}
.logo .bars span:nth-child(3){height:100%}
.logo b{font-weight:600;font-size:17px}
.navlinks{display:flex;align-items:center;gap:22px}
.navlinks a{color:var(--muted);font-size:14.5px;font-weight:500}
.navlinks a:hover{color:var(--paper);text-decoration:none}
/* ---------- mobile nav ----------
CSS-only checkbox toggle, matching the deployed site. Hiding .navlinks on
small screens without this left mobile visitors no way to navigate. */
.vg-mnav{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.vg-burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;cursor:pointer;flex-shrink:0;margin-left:4px}
.vg-burger span{display:block;width:22px;height:2px;background:var(--paper);border-radius:2px;transition:transform .25s ease,opacity .15s ease}
.vg-mmenu{display:none}
.vg-mnav:focus-visible ~ .wrap-wide .vg-burger,.vg-mnav:focus-visible ~ .wrap .vg-burger{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}
@media(max-width:820px){
.navlinks{display:none}
.vg-burger{display:flex}
.vg-mnav:checked ~ .wrap-wide .vg-burger span:nth-child(1),.vg-mnav:checked ~ .wrap .vg-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.vg-mnav:checked ~ .wrap-wide .vg-burger span:nth-child(2),.vg-mnav:checked ~ .wrap .vg-burger span:nth-child(2){opacity:0}
.vg-mnav:checked ~ .wrap-wide .vg-burger span:nth-child(3),.vg-mnav:checked ~ .wrap .vg-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.vg-mmenu{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;
background:var(--ink);border-bottom:1px solid var(--line);
max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease,opacity .2s ease}
.vg-mnav:checked ~ .vg-mmenu{max-height:420px;opacity:1;padding:6px 0 14px}
.vg-mmenu a{padding:13px clamp(22px,5vw,40px);color:var(--paper);font-size:16px;font-weight:500}
.vg-mmenu a:hover{color:var(--signal);text-decoration:none}
nav .cta{padding:8px 13px;font-size:13.5px}
}
@media(max-width:820px) and (prefers-reduced-motion:reduce){
.vg-mmenu{transition:none}
}
/* Visible keyboard focus on every interactive element. Without this, tabbing
through the page gave no indication of position on buttons and cards. */
a:focus-visible,button:focus-visible,.cta:focus-visible,.cta-ghost:focus-visible,
.post:focus-visible,.vg-burger:focus-visible,summary:focus-visible{
outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}
section.alt a:focus-visible,section.alt .post:focus-visible{outline-color:#C1146F}
/* Skip link - first tab stop, lets keyboard and screen-reader users jump the nav */
.skip{position:absolute;left:-9999px;top:0;z-index:2147483646;
background:var(--signal);color:#fff;padding:12px 20px;border-radius:0 0 6px 0;
font-weight:600;font-size:15px}
.skip:focus{left:0;text-decoration:none}
.cta{background:var(--signal);color:#fff!important;padding:9px 16px;border-radius:5px;font-weight:600;font-size:14px;display:inline-block}
.cta:hover{background:var(--signal-hi);text-decoration:none}
.cta-lg{padding:14px 28px;font-size:15.5px;border-radius:6px}
.cta-ghost{background:transparent;border:1px solid var(--line);color:var(--paper)!important;padding:9px 16px;border-radius:5px;font-weight:600;font-size:14px;display:inline-block}
.cta-ghost:hover{border-color:var(--signal);text-decoration:none}
/* ---------- type ---------- */
.crumbs{font:13px/1 ui-monospace,Menlo,Consolas,monospace;color:var(--muted);padding:22px 0 0}
.crumbs a{color:var(--muted)}
/* Freshness signal: answer engines discount pages that look stale, and buyers
check dates on anything carrying a price. Kept quiet - it's a fact, not a headline. */
.updated{font:12px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.5px;color:var(--muted);margin:0 0 18px}
/* The eyebrow is a label for the headline - it belongs tight to it, not
floating equidistant between the nav and the h1. */
.eyebrow{font:500 12px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:2px;text-transform:uppercase;color:var(--signal);margin:0 0 6px}
.eyebrow + h1{margin-top:10px}
h1{font-weight:700;font-size:clamp(32px,5.2vw,52px);line-height:1.08;letter-spacing:-0.02em;margin:14px 0 18px}
h2{font-weight:700;font-size:clamp(24px,3.4vw,34px);line-height:1.18;letter-spacing:-0.01em;margin:0 0 14px}
h3{font-weight:600;font-size:clamp(18px,2vw,21px);line-height:1.3;margin:0 0 8px}
.sub{color:var(--muted);font-size:19px;max-width:660px;margin-bottom:8px}
p{margin:0 0 18px;color:var(--body)}
ul,ol{margin:0 0 18px 22px;color:var(--body)}
li{margin-bottom:10px}
strong{color:var(--paper);font-weight:600}
main{padding:14px 0 32px}
/* Even rhythm + a hairline between sections so they read as distinct blocks */
section{margin:0;padding:clamp(38px,4.4vw,58px) 0}
section + section{border-top:1px solid var(--line)}
/* ---------- light band ----------
The deployed site and the deck both alternate dark sections with light
#F4F0F6 bands. Rather than duplicate every rule, .alt re-points the same
custom properties, so all existing components invert automatically.
Live palette this mirrors: text #1A1A1E / #3A3A40, captions #6B6B73. */
section.alt{
background:var(--paper-bg,#F4F0F6);
color:#1A1A1E;
--paper:#0C0C0E; /* foreground: headings, strong, logo */
--body:#3A3A40; /* running paragraph text */
--muted:#6B6B73; /* captions and secondary text */
--panel:#FFFFFF; /* cards sit above the band */
--line:rgba(12,12,14,0.12);
}
/* the colour change is its own separator - a rule on top of it reads as grime */
section.alt,section.alt + section{border-top:none}
/* signal magenta only clears 3.7:1 on #F4F0F6, so small text and links get a
deeper tint (5.2:1). Large magenta type is fine at 3:1 and stays as-is. */
section.alt a{color:#C1146F}
section.alt a:hover{color:#E6228F}
section.alt .tier .name,section.alt .step .when{color:#C1146F}
section.alt thead th{background:#E9E4EC;color:#6B6B73}
section.alt thead th:last-child{background:var(--signal);color:#fff}
section.alt td:last-child{color:#0C0C0E}
section.alt .card .ico{background:rgba(230,34,143,0.12)}
/* Cap running prose and headings for readability - at a 1440px container an
uncapped paragraph or headline would run to an unreadable line length.
Anything inside a card, table or grid spans its own box instead. */
main p,main ul,main ol{max-width:74ch}
main h1{max-width:26ch}
main h2{max-width:34ch}
/* GOTCHA: an element that is centred AND inherits a max-width above must set
auto side margins in its OWN `margin:` shorthand. A separate
margin-left/right:auto rule does not survive - any later `margin:` shorthand
resets both sides to 0, the box hugs the left edge, and only the text inside
it looks centred. Check this whenever you add a centred element. */
.card p,.card ul,.tier ul,.step p,.endcta p,.related ul,.callout p,.pull,td,th{max-width:none}
.lede{font-size:20px;line-height:1.6}
.center{text-align:center}
.kicker{color:var(--muted);max-width:620px;margin:0 auto 34px;text-align:center}
/* ---------- hero ---------- */
.hero{padding:clamp(30px,3.4vw,46px) 0 clamp(36px,4vw,52px);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;top:-160px;right:-140px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(230,34,143,0.20),transparent 66%);pointer-events:none}
.hero h1{max-width:24ch;hyphens:none;overflow-wrap:normal}
.hero .sub{font-size:20px;max-width:620px}
.herobtns{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 0}
/* ---------- client marquee ----------
Two identical groups; the track translates exactly -50% so the loop is
seamless. The second group is aria-hidden so screen readers hear the list
once. */
.marquee-label{font:500 12px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);text-align:center;margin:0 auto 34px}
.marquee{position:relative;overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;width:max-content;animation:vg-marquee 36s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-group{display:flex;align-items:center;gap:56px;padding-right:56px}
.marquee-group span{font-weight:600;font-size:22px;color:var(--muted);white-space:nowrap;transition:color .2s ease;display:flex;align-items:center}
.marquee-group span:hover{color:var(--paper)}
/* Drop real logos into /logos/ and swap the text for ![]()
- sizing, muting and
hover-to-full already work. Mixed text/image rows stay aligned. */
.marquee-group img{height:30px;width:auto;max-width:170px;object-fit:contain;
opacity:.6;filter:grayscale(1);transition:opacity .2s ease,filter .2s ease}
.marquee-group span:hover img{opacity:1;filter:grayscale(0)}
@keyframes vg-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:600px){
.marquee-group{gap:36px;padding-right:36px}
.marquee-group span{font-size:18px}
}
/* ---------- stat row ---------- */
/* explicit columns, consistent with every other grid on the site */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin:44px 0 8px;border-top:1px solid var(--line);padding-top:30px}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr);gap:22px}}
@media(max-width:460px){.stats{grid-template-columns:1fr;gap:18px}}
.stat .n{font-weight:700;font-size:clamp(30px,4vw,40px);line-height:1;color:var(--signal);font-family:'Fraunces',Georgia,serif}
.stat .l{color:var(--muted);font-size:14.5px;margin-top:8px}
/* ---------- cards ---------- */
/* Explicit column counts - auto-fit was giving 4 columns to a 6-card grid,
leaving a ragged 4+2 row. Fixed counts keep every row full. */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px 24px}
.card h3{margin-bottom:8px}
.card p{margin:0;font-size:15.5px;color:var(--muted);line-height:1.6}
.card.hi{border-color:rgba(230,34,143,0.5)}
.card .ico{width:38px;height:38px;border-radius:9px;background:rgba(230,34,143,0.14);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.card .ico svg{width:19px;height:19px;stroke:var(--signal);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* problem split */
.split{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(max-width:760px){.split{grid-template-columns:1fr}}
.split .card h3{color:var(--paper);font-size:19px;margin-bottom:18px}
.split .row{margin-bottom:18px}
.split .row:last-child{margin-bottom:0}
.split .row b{display:block;color:var(--signal);font-weight:700;font-size:20px;font-family:'Fraunces',Georgia,serif;margin-bottom:3px}
.split .row span{color:var(--muted);font-size:14.5px;line-height:1.55;display:block}
/* ---------- pricing tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:32px 0}
@media(max-width:860px){.tiers{grid-template-columns:1fr}}
.tier{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:28px 24px;display:flex;flex-direction:column}
.tier.mid{border-color:rgba(230,34,143,0.5)}
.tier .name{font:500 12px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:2px;text-transform:uppercase;color:var(--signal)}
.tier .for{color:var(--muted);font-size:14px;margin:6px 0 16px;font-style:italic}
.tier ul{margin:0 0 22px 18px;font-size:15px}
.tier li{margin-bottom:7px;color:var(--body)}
.tier .price{font-weight:700;font-size:38px;line-height:1;margin-top:auto;font-family:'Fraunces',Georgia,serif;color:var(--signal)}
.tier .price small{font-size:15px;color:var(--muted);font-weight:500;font-family:'Inter',sans-serif}
/* ---------- comparison table ---------- */
.tablewrap{overflow-x:auto;margin:30px 0;border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%;min-width:680px;font-size:14.5px}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)}
thead th{background:#08080a;color:var(--muted);font-weight:600;font-size:13px;letter-spacing:.3px;text-transform:uppercase}
thead th:last-child{background:var(--signal);color:#fff}
tbody th{font-weight:600;color:var(--paper);white-space:nowrap}
td{color:var(--muted)}
td:last-child{color:var(--paper);font-weight:600;background:rgba(230,34,143,0.07)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:none}
/* ---------- timeline ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:26px 22px}
.step .num{font-weight:700;font-size:34px;line-height:1;color:var(--signal);font-family:'Fraunces',Georgia,serif;margin-bottom:14px}
.step h3{font-size:18px;margin-bottom:8px}
.step p{font-size:15px;color:var(--muted);margin-bottom:14px}
.step .when{font:500 12px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:1.5px;text-transform:uppercase;color:var(--signal)}
/* ---------- callouts ---------- */
.callout{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--signal);border-radius:8px;padding:22px 24px;margin:28px 0}
.callout p:last-child{margin-bottom:0}
.pull{text-align:center;font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:clamp(19px,2.6vw,25px);line-height:1.35;color:var(--signal);max-width:760px;margin:36px auto 4px}
.related{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px 24px;margin:32px 0}
.related h2{font-size:18px;margin-bottom:12px}
.related ul{margin:0 0 0 20px}
.related li{margin-bottom:8px}
/* ---------- faq ---------- */
/* ---------- faq ----------
Questions were uncapped while `main p` capped answers at 74ch, so every
question ran far past the answer beneath it - the right edges never lined
up. Both now share one measure. A rule above each question also gives the
list structure; without it seven Q&A pairs read as one undifferentiated
wall of text. */
.faq{--faq-measure:74ch}
/* Native / accordion - no JS, keyboard-operable for free,
and the answers stay in the DOM so search engines still read them. */
.faq details{border-top:1px solid var(--line)}
.faq details:first-of-type{border-top:none}
.faq summary{
list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:24px;
justify-content:space-between;padding:20px 0;
font:600 19px/1.4 'Fraunces',Georgia,serif;color:var(--paper);
transition:color .15s ease}
.faq summary::-webkit-details-marker{display:none} /* kill the default triangle */
.faq summary:hover{color:var(--signal)}
.faq summary .q{max-width:var(--faq-measure)}
/* the +/- indicator: one glyph, rotated rather than swapped, so it animates */
.faq summary::after{
content:"+";flex-shrink:0;line-height:1;
font:300 26px/1 'Inter',-apple-system,sans-serif;color:var(--signal);
transition:transform .22s ease;transform-origin:50% 50%}
.faq details[open] summary::after{content:"\2212"}
.faq details[open] summary{color:var(--signal)}
.faq details > p{max-width:var(--faq-measure);margin:0 0 22px;color:var(--body)}
@media(prefers-reduced-motion:reduce){.faq summary::after{transition:none}}
@media(max-width:600px){
.faq summary{font-size:17px;gap:16px;padding:17px 0}
.faq summary::after{font-size:23px}
}
/* ---------- end cta ---------- */
/* Capped and centred - at the full 1440px the card stretched into a thin band
with its 520px paragraph adrift in the middle, and the radial glow spread so
wide it disappeared. */
.endcta{
background:radial-gradient(ellipse 90% 120% at 50% 0,rgba(230,34,143,0.20),transparent 68%),var(--panel);
border:1px solid rgba(230,34,143,0.24);border-radius:20px;
padding:clamp(38px,4.5vw,62px) clamp(24px,4vw,56px);
text-align:center;margin:56px auto 40px;max-width:1040px}
.endcta .eyebrow{margin:0 auto 12px}
.endcta h2{margin:0 auto 14px;max-width:22ch}
.endcta p{color:var(--muted);max-width:540px;margin:0 auto 30px;font-size:17px}
.endcta .meta{font-size:14px;color:var(--muted);margin:24px auto 0}
/* primary and secondary as siblings - a button with a text link underneath
reads as an afterthought rather than a real second option */
.endcta-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:0 0 34px}
@media(max-width:520px){
.endcta-btns{flex-direction:column}
.endcta-btns .cta,.endcta-btns .cta-ghost{width:100%;text-align:center}
}
/* ---------- risk reversal strip ---------- */
.risk-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0;text-align:left}
.risk-strip div{background:rgba(244,240,246,0.05);border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.risk-strip b{display:block;color:var(--signal);font-size:14px;font-weight:700;margin-bottom:3px;font-family:'Fraunces',Georgia,serif}
.risk-strip span{color:var(--muted);font-size:13.5px;line-height:1.5}
@media(max-width:760px){.risk-strip{grid-template-columns:1fr;text-align:center}}
/* ---------- shortlist form ----------
Two columns: the case for filling it in on the left, the form on the right.
A lone 640px card in a 1440px container read as an afterthought. */
.shortlist-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,4vw,60px);align-items:start}
@media(max-width:900px){.shortlist-grid{grid-template-columns:1fr;gap:30px}}
.shortlist-copy p{margin-bottom:0}
.ticks{list-style:none;margin:24px 0 0;padding:0;max-width:none}
.ticks li{position:relative;padding-left:30px;margin-bottom:14px;color:var(--body);font-size:15.5px;line-height:1.55}
.ticks li::before{content:"";position:absolute;left:4px;top:5px;width:7px;height:12px;
border:solid var(--signal);border-width:0 2px 2px 0;transform:rotate(45deg)}
.formwrap{background:var(--panel);border:1px solid var(--line);border-radius:16px;
padding:clamp(22px,2.6vw,30px);box-shadow:0 20px 50px rgba(0,0,0,0.22)}
.formrow{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media(max-width:520px){.formrow{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:14px;font-weight:600;color:var(--paper);letter-spacing:.01em}
.field label .opt{color:var(--muted);font-weight:400}
.field input,.field select,.field textarea{
background:rgba(244,240,246,0.06);border:1px solid var(--line);border-radius:9px;
padding:13px 14px;color:var(--paper);font:15px/1.4 'Inter',sans-serif;width:100%;
transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);opacity:.75}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(244,240,246,0.22)}
.field textarea{resize:vertical;min-height:88px}
.field input:focus,.field select:focus,.field textarea:focus{
outline:none;border-color:var(--signal);box-shadow:0 0 0 3px rgba(230,34,143,0.18);
background:rgba(244,240,246,0.09)}
.field select{appearance:none;cursor:pointer;
background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
background-position:calc(100% - 19px) 52%,calc(100% - 14px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field select option{background:var(--panel);color:var(--paper)}
.formwrap button{background:var(--signal);color:#fff;border:none;border-radius:8px;
padding:15px 28px;font:600 16px 'Inter',sans-serif;cursor:pointer;width:100%;
transition:background .2s ease,transform .12s ease,box-shadow .2s ease;
box-shadow:0 6px 18px rgba(230,34,143,0.28)}
.formwrap button:hover{background:var(--signal-hi);transform:translateY(-1px);box-shadow:0 9px 24px rgba(230,34,143,0.36)}
.formwrap button:active{transform:translateY(0)}
.formnote{color:var(--muted);font-size:13px;margin:14px auto 0;text-align:center}
/* on a light band the card goes white, so inputs need a tinted fill to stay
visible against it - white-on-white would erase the field boundaries */
section.alt .formwrap{background:#FFFFFF;box-shadow:0 20px 50px rgba(12,12,14,0.10)}
section.alt .field input,section.alt .field select,section.alt .field textarea{
background:#F6F4F8;border-color:rgba(12,12,14,0.14);color:#0C0C0E}
section.alt .field input:hover,section.alt .field select:hover,section.alt .field textarea:hover{border-color:rgba(12,12,14,0.28)}
section.alt .field input:focus,section.alt .field select:focus,section.alt .field textarea:focus{background:#FFFFFF}
section.alt .field select option{background:#FFFFFF;color:#0C0C0E}
section.alt .risk-strip div{background:#FFFFFF}
/* 12px magenta on #F4F0F6 is only 3.7:1 - deepen it for small light-band text */
section.alt .eyebrow{color:#C1146F}
/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:clamp(40px,5vw,60px) 0 26px;color:var(--muted);font-size:14px;margin-top:24px}
footer a{color:var(--muted)}
footer a:hover{color:var(--signal);text-decoration:none}
.footgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.1fr;gap:clamp(24px,3vw,44px);margin-bottom:36px}
@media(max-width:940px){.footgrid{grid-template-columns:1fr 1fr;row-gap:34px}}
@media(max-width:560px){.footgrid{grid-template-columns:1fr;row-gap:28px}}
.footbrand .logo{margin-bottom:14px}
.footbrand p{color:var(--muted);font-size:14px;line-height:1.6;max-width:36ch;margin:0 0 14px}
.footbrand .rate{font:500 12px/1.5 ui-monospace,Menlo,Consolas,monospace;letter-spacing:1.5px;text-transform:uppercase;color:var(--signal)}
.foothead{font:500 12px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:2px;text-transform:uppercase;color:var(--paper);margin:0 0 15px}
.footcol ul{list-style:none;margin:0;padding:0}
.footcol li{margin-bottom:10px}
.footcol a{font-size:14.5px}
.footbar{border-top:1px solid var(--line);padding-top:22px;display:flex;flex-wrap:wrap;gap:10px 24px;
justify-content:space-between;align-items:center;font-size:13.5px;color:var(--muted)}
/* ---------- blog ----------
.ex/.lbl are example blocks used by the older posts, ported here so those
pages can drop their inline stylesheets and share one design system. */
.ex{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:20px 22px;margin:22px 0;font-size:16px;line-height:1.6}
.ex .lbl{font:500 11px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:1.5px;text-transform:uppercase;color:var(--signal);display:block;margin-bottom:10px}
.toc{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px 24px;margin:28px 0}
.toc ul{margin:0 0 0 20px}
.toc li{margin-bottom:8px}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:32px 0}
/* A lone card stranded on the final row reads as a mistake - let it span the
full width instead, so 7 posts lay out as 3 + 3 + 1-wide rather than 3+3+gap. */
.posts > .post:last-child:nth-child(3n+1){grid-column:1/-1}
@media(max-width:1000px){
.posts{grid-template-columns:repeat(2,1fr)}
.posts > .post:last-child:nth-child(3n+1){grid-column:auto}
.posts > .post:last-child:nth-child(2n+1){grid-column:1/-1}
}
@media(max-width:640px){
.posts{grid-template-columns:1fr}
.posts > .post:last-child{grid-column:auto}
}
.post{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;display:block;color:inherit}
.post:hover{border-color:rgba(230,34,143,0.5);text-decoration:none}
.post h2,.post h3{margin-bottom:8px;font-size:19px;font-weight:600;line-height:1.3;letter-spacing:0}
.post p{font-size:15px;color:var(--muted);margin:0}
.post .tag{font:500 11px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:1.5px;text-transform:uppercase;color:var(--signal);display:block;margin-bottom:12px}
article p{margin-bottom:20px}
article h2{margin-top:44px}
article h3{margin-top:30px;font-family:'Fraunces',Georgia,serif}
/* ---------- entrance ----------
Replaces the old bundle's loading splash. That splash existed to mask ~2.2s
of unpacking; this page paints immediately, so instead of manufacturing a
delay we animate content into place as it arrives. Pure CSS - if styles fail
to load, everything is simply visible. Nothing is gated behind JS. */
@keyframes vg-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes vg-fade{from{opacity:0}to{opacity:1}}
@keyframes vg-bar{from{opacity:0;transform:scaleY(0)}to{opacity:1;transform:scaleY(1)}}
/* --enter offsets the whole entrance. On the homepage the splash covers the
page until ~1.18s, so content must wait and then reveal *as* the splash
fades - otherwise the splash lifts to show already-settled, static content. */
:root{--enter:0s}
body.has-splash{--enter:1.12s}
/* Brand mark builds itself - echoes the splash's bar chart */
.logo .bars span{transform-origin:bottom;animation:vg-bar .42s cubic-bezier(.22,.61,.36,1) both}
.logo .bars span:nth-child(1){animation-delay:calc(var(--enter) + .02s)}
.logo .bars span:nth-child(2){animation-delay:calc(var(--enter) + .09s)}
.logo .bars span:nth-child(3){animation-delay:calc(var(--enter) + .16s)}
.logo b,.navlinks,nav .cta{animation:vg-fade .5s ease calc(var(--enter) + .1s) both}
/* Page-top content lifts in, staggered. LCP element (h1) starts early. */
.crumbs{animation:vg-fade .5s ease var(--enter) both}
.eyebrow{animation:vg-rise .5s cubic-bezier(.22,.61,.36,1) var(--enter) both}
main h1{animation:vg-rise .55s cubic-bezier(.22,.61,.36,1) calc(var(--enter) + .06s) both}
.sub{animation:vg-rise .55s cubic-bezier(.22,.61,.36,1) calc(var(--enter) + .12s) both}
.herobtns{animation:vg-rise .55s cubic-bezier(.22,.61,.36,1) calc(var(--enter) + .18s) both}
.hero::after{animation:vg-fade 1.1s ease calc(var(--enter) + .1s) both}
.stats .stat{animation:vg-rise .5s cubic-bezier(.22,.61,.36,1) both}
.stats .stat:nth-child(1){animation-delay:calc(var(--enter) + .24s)}
.stats .stat:nth-child(2){animation-delay:calc(var(--enter) + .30s)}
.stats .stat:nth-child(3){animation-delay:calc(var(--enter) + .36s)}
.stats .stat:nth-child(4){animation-delay:calc(var(--enter) + .42s)}
/* ---------- scroll reveal ----------
Deployed site reveals content on scroll (52 elements via IntersectionObserver).
The hidden state is scoped to .js, which an inline script sets - so if
scripting is off or fails, none of this applies and everything is visible.
No content is ever gated behind JavaScript. */
.js main section .card,
.js main section .tier,
.js main section .step,
.js main section .tablewrap,
.js main section .callout,
.js main section .pull,
.js main section > div > h2,
.js main section > div > .sub,
.js .posts .post{
opacity:0;transform:translateY(22px);
transition:opacity .5s ease,transform .55s cubic-bezier(.22,.61,.36,1);
}
.js .vg-in{opacity:1!important;transform:none!important}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
/* never leave anything hidden waiting for an observer that won't animate */
.js main section .card,.js main section .tier,.js main section .step,
.js main section .tablewrap,.js main section .callout,.js main section .pull,
.js main section > div > h2,.js main section > div > .sub,.js .posts .post{
opacity:1;transform:none;transition:none}
/* splash is display:none here, so content must not wait for it */
body.has-splash{--enter:0s}
*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}
/* the blanket rule above would snap the marquee to its -50% end state and
hide the first group; stop it outright and let the row scroll instead */
.marquee-track{animation:none!important;transform:none!important}
.marquee{overflow-x:auto;mask-image:none;-webkit-mask-image:none}
}
@media(max-width:600px){
body{font-size:17px}
section{padding:40px 0}
.herobtns .cta,.herobtns .cta-ghost{width:100%;text-align:center}
}