/* ============================================================ FONTS — self-hosted Previously four families were hotlinked from fonts.googleapis.com on every page. That is a third-party request on a site selling data governance to banks: some bank networks block fonts.gstatic.com, and hotlinking transmits visitor IP addresses to Google, which an EU court has ruled on. These are the same faces, served from this origin. Subsets: latin and latin-ext only. Weights: only those the CSS uses, which drops Poppins 300 and Noto Sans 700 (both were loaded, neither was ever referenced). 20 files, 581KB total. ============================================================ */ @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-400-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-400-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Noto Sans';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/noto-sans-400-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Noto Sans';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/noto-sans-400-italic-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Noto Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/noto-sans-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Noto Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/noto-sans-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Noto Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/noto-sans-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Noto Sans';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/noto-sans-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/poppins-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/poppins-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/poppins-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/poppins-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} /* ============================================================ TYPE SCALE Every font-size on the site resolves to one of these. The values are unchanged from what shipped; naming them is what makes the scale visible, reviewable, and cheap to change. Adding a new literal px font-size anywhere else is the regression this block exists to catch. Grouped by the six roles in DESIGN.md: display, headline, title, body, label, accent. .tbc keeps a relative .88em on purpose, so it tracks whatever it is quoted inside. ============================================================ */ :root{ /* Display */ --fs-hero:clamp(50px,8vw,96px); --fs-closer:clamp(38px,6.6vw,74px); /* Headline */ --fs-page:clamp(32px,5vw,52px); --fs-section:clamp(30px,4.4vw,46px); --fs-section-sm:clamp(28px,4vw,40px); --fs-section-xs:clamp(26px,3.6vw,34px); --fs-statement:clamp(18px,2.3vw,23px); --fs-axiom:clamp(18px,2.2vw,22px); /* Title */ --fs-title-xl:30px; --fs-title-lg:23px; --fs-title:22px; --fs-title-md:21px; --fs-title-sm:20px; --fs-title-xs:19px; /* Body */ --fs-body-xl:18px; --fs-body-lg:17.5px; --fs-body-md:17px; --fs-body:16.5px; --fs-body-sm:16px; --fs-read:15.5px; --fs-read-sm:15px; --fs-ui:14.5px; --fs-ui-sm:14px; --fs-ui-xs:13.5px; --fs-caption:13px; /* Label */ --fs-mono-lg:12.5px; --fs-mono:12px; --fs-mono-sm:11.5px; --fs-mono-xs:11px; --fs-label:10.5px; --fs-label-sm:10px; --fs-label-xs:9.5px; --fs-label-xxs:9px; } /* ============================================================ TOKENS — Nexus Frontier Tech brand Poppins + Noto Sans, lime #C8D253 on black, white page. Lime is sampled from the Nexus Frontier Tech parent mark, which is the reason it is frozen: it is the inherited corporate signature, not a choice this site gets to make. Both logo files and the token previously carried drifted values (#C4D251 and #CBD253); #C8D253 is the parent's. Every grey is strictly R=G=B: any red-over-blue tint in the hairlines reads as warm cream, which is the look this page is avoiding. ============================================================ */ :root{ --paper:#ffffff; --tint:#F2F2F2; --white:#fff; /* muted-2/-3 and dark-muted-3 were darkened to clear WCAG AA (4.5:1) for the small text they carry: muted-2 #7B7B7B (4.2:1) and muted-3 #979797 (2.9:1) failed on white/tint, dark-muted-3 #6D6D6D (3.8:1) failed on the record ground. muted-3 lands at 3.28:1 — enough for the graphical marks it still paints (the tier-0 ladder bar, the accordion chevron); its one text use, .creed .deny, was reassigned to --muted. */ --ink:#000; --ink-2:#3E3E3E; --muted:#696969; --muted-2:#6E6E6E; --muted-3:#8E8E8E; --line:#E0E0E0; --line-2:#D2D2D2; --line-3:#C6C6C6; --hover:#E9E9E9; --dark:#000; --dark-2:#0c0c0c; --dark-line:#2D2D2D; --dark-line-2:#222222; --dark-ink:#fff; --dark-muted:#A4A4A4; --dark-muted-2:#8A8A8A; --dark-muted-3:#828282; --dark-body:#D0D0D0; --lime:#C8D253; --lime-deep:#9FA733; --on-lime:#44440f; /* Focus rings need their own value. --lime-deep is 2.61:1 on white, which fails the 3:1 WCAG minimum for focus indicators. --focus is 4.35:1 on white and 4.83:1 on black, so one token works on both grounds without needing per-section overrides. --lime-deep keeps its decorative uses (the tier-2 ladder bar, the .legal-note border), where the colour is redundant with a text label rather than the sole carrier of meaning. */ --focus:#767F25; --sans:Poppins,system-ui,-apple-system,sans-serif; --body:"Noto Sans",system-ui,-apple-system,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace; --gut:clamp(24px,5vw,48px); --sec:clamp(64px,9vw,116px); --r:2px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--paper);color:var(--ink);font-family:var(--body);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit;text-decoration:none} ::selection{background:var(--lime);color:var(--on-lime)} /* Poppins is geometric and sets wider than a grotesk — it needs less negative tracking and holds up better at 600 than 700. */ h1,h2,h3,h4,h5{font-family:var(--sans);font-weight:600;letter-spacing:-.025em;line-height:1.08} img{max-width:100%} /* --- shared primitives --- */ .wrap{max-width:1180px;margin:0 auto;padding:0 var(--gut)} .mono{font-family:var(--mono)} .kicker{font-family:var(--mono);font-size:var(--fs-label-sm);letter-spacing:.09em;color:var(--muted);text-transform:uppercase} /* Lime is too light to read as text on white, so accent words take the highlighter treatment instead — black text, lime sitting behind it. */ /* the emphasized word: same highlighter device as before, plus an italic serif switch — the clause headings' version of the hand-drawn underline under "sign." in the hero. */ .mark{background:linear-gradient(transparent 60%,var(--lime) 60%);padding:0 .12em;font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:0} .tick{width:22px;height:3px;background:var(--lime);display:block} /* buttons — Nexus CTA is lime with olive text, flipping to black on hover */ .btn{display:inline-block;font-family:var(--sans);font-size:var(--fs-read-sm);font-weight:500;border-radius:var(--r);border:1px solid transparent;cursor:pointer;transition:.18s;white-space:nowrap} .btn-primary{color:var(--on-lime);background:var(--lime);padding:14px 28px} .btn-primary:hover{background:var(--ink);color:#fff} .btn-ghost{color:var(--ink);border-color:var(--line-3);padding:12px 28px;background:transparent} .btn-ghost:hover{border-color:var(--ink)} .btn-sm{padding:10px 22px;font-size:var(--fs-ui-sm)} .btn-ghost.btn-sm{padding:10px 18px} /* On light grounds the primary CTA is ink, not lime. A chartreuse fill on white is the loudest growth-marketing signal on the page. Lime keeps the dark nav and hero, where it is the only readable bright value, and comes back here as the hover reward. Scoped by ground rather than by a new modifier class, matching how .hero and .nav-links already override. */ .execute .btn-primary,.legal-hero .btn-primary{background:var(--ink);color:#fff} .execute .btn-primary:hover,.legal-hero .btn-primary:hover{background:var(--lime);color:var(--on-lime)} /* Display text that is not an h1-h5 still needs the display face. Noto Sans is the reading font; Poppins carries anything set large or bold. */ .mantra .v,.doc-title,.doc-signer,.creed p,.rung .label,.sigblock .who, .deploy .t,.dark-cols .h,.execute .q, .ladder-hint,.std-link{font-family:var(--sans)} .mantra .v,.doc-title,.creed p,.sigblock .who,.deploy .t, .dark-cols .h{font-weight:600;letter-spacing:-.025em} /* ============================================================ NAV ============================================================ */ nav{position:sticky;top:0;z-index:50;background:var(--dark);border-bottom:1px solid transparent;transition:background .25s,border-color .25s} nav.scrolled{background:rgba(0,0,0,.86);border-bottom-color:var(--dark-line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .nav-in{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;transition:min-height .25s} nav.scrolled .nav-in{min-height:56px} .brand{display:flex;align-items:center;gap:14px;padding:12px 0;transition:padding .25s} .brand img{height:28px;width:auto;display:block;transition:height .25s} /* When the bar shrinks on scroll, shrink the mark with it so the compact state keeps the same breathing room instead of the logo filling the bar. */ nav.scrolled .brand{padding:10px 0} nav.scrolled .brand img{height:24px} /* Shrink the nav buttons on scroll too, or their box (button + the links' 12px bottom padding) fills the whole compact bar and they read as jammed. Fine-pointer only, so touch devices keep 44px tap targets while scrolled. */ @media(pointer:fine){ nav.scrolled .nav-links .btn-sm{padding:8px 20px} nav.scrolled .nav-links .btn-ghost.btn-sm{padding:6px 16px} } .brand-tag{font-family:var(--body);font-size:var(--fs-mono-sm);color:var(--dark-muted);padding-left:14px;border-left:1px solid var(--dark-line);line-height:1.35;transition:color .18s} .brand-tag:hover{color:var(--dark-ink)} .nav-links{display:flex;align-items:center;gap:clamp(14px,2.2vw,28px);flex-wrap:wrap} .nav-links a{font-family:var(--sans);font-size:var(--fs-ui);font-weight:500;color:var(--dark-muted);transition:color .18s;position:relative} .nav-links a:hover{color:var(--dark-ink)} .nav-links .btn{color:var(--dark-ink)} .nav-links .btn-ghost{border-color:var(--dark-line)} .nav-links .btn-ghost:hover{border-color:var(--dark-ink)} .nav-links .btn-primary{color:var(--on-lime)} .nav-links .btn-primary:hover{color:#fff} /* DESKTOP DROPDOWNS — Platform / Signs. Reuses the native
disclosure (same mechanism as the mobile menu and rulebook, no JS). The summary reads as a nav link with a caret; the panel reuses the mobile .navmenu-panel look. Hidden below 860px via .hide-sm, where the links move into the hamburger instead. */ .navdrop{position:relative} .navdrop summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;font-family:var(--sans);font-size:var(--fs-ui);font-weight:500;color:var(--dark-muted);transition:color .18s} .navdrop summary::-webkit-details-marker{display:none} .navdrop summary:hover,.navdrop[open] summary{color:var(--dark-ink)} .navdrop summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px} /* caret drawn from two borders, matching how .navmenu-bars is drawn */ .navdrop summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s} .navdrop[open] summary::after{transform:translateY(1px) rotate(-135deg)} .navdrop-panel{position:absolute;top:calc(100% + 14px);left:0;min-width:214px;background:var(--dark-2);border:1px solid var(--dark-line);border-radius:var(--r);padding:6px 0;z-index:60} .navdrop-panel a{display:block;padding:11px 18px;font-family:var(--sans);font-size:var(--fs-ui);font-weight:500;color:var(--dark-body);white-space:nowrap;transition:color .18s,background .18s} .navdrop-panel a:hover{color:var(--dark-ink);background:var(--dark-line-2)} @media(max-width:860px){.nav-links .hide-sm{display:none}.brand-tag{display:none}} /* MOBILE NAV Below 860px the three section links were hidden with nothing in their place, so the site had no navigation at all on its most common viewport class. A native
disclosure restores them with no JavaScript, which is the same mechanism the rulebook accordion already uses, and it keeps the sticky bar short instead of wrapping the links onto extra rows. Only one of the two link sets is ever rendered: the desktop links are display:none below 860px, the disclosure is display:none above it, so neither duplicates the other in the accessibility tree. */ .navmenu{display:none} @media(max-width:860px){.navmenu{display:block;position:relative}} .navmenu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:var(--fs-ui);font-weight:500;color:var(--dark-muted);padding:8px 0;transition:color .18s} .navmenu summary::-webkit-details-marker{display:none} .navmenu summary:hover,.navmenu[open] summary{color:var(--dark-ink)} .navmenu summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px} /* two rules rather than an icon font or an SVG, matching how .tick is drawn */ .navmenu-bars{display:block;width:17px;height:10px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;position:relative;flex:0 0 auto} .navmenu-bars::before{content:"";position:absolute;left:0;right:0;top:calc(50% - .75px);height:1.5px;background:currentColor} .navmenu[open] .navmenu-bars{border-color:var(--lime)} .navmenu[open] .navmenu-bars::before{background:var(--lime)} /* Right-aligned so the panel opens inward from the bar's right edge and never overflows a narrow viewport; capped so it stays a menu, not a full-width sheet. */ .navmenu-panel{position:absolute;top:calc(100% + 11px);right:0;left:auto;min-width:214px;max-width:min(76vw,264px);background:var(--dark-2);border:1px solid var(--dark-line);border-radius:var(--r);padding:6px 0;z-index:60} .navmenu-panel a{display:block;padding:12px 18px;font-family:var(--sans);font-size:var(--fs-ui);font-weight:500;color:var(--dark-body);transition:color .18s,background .18s} .navmenu-panel a:hover{color:var(--dark-ink);background:var(--dark-line-2)} /* Non-clickable section headings that group the sub-pages in the mobile menu, set like the site's mono kickers; a divider precedes every group after the first. */ .navmenu-group{display:block;padding:11px 18px 5px;font-family:var(--mono);font-size:var(--fs-label-sm);letter-spacing:.09em;text-transform:uppercase;color:var(--dark-muted-3)} .navmenu-group:not(:first-child){margin-top:5px;border-top:1px solid var(--dark-line);padding-top:13px} /* Log in is an account action, not a Sign — a divider sets it apart from the sub-page groups above it. */ .navmenu-login{margin-top:6px;border-top:1px solid var(--dark-line)} /* PHONE BAR — keep logo + CTA + hamburger on a single row. At 375px the bar had brand(146) + gap(20) + links(223) = 389px against ~327px of content width, so the links wrapped to a second row and the sticky header grew to ~125px. Shrinking the mark, tightening the gaps, compacting the CTA, and dropping to an icon-only hamburger brings the row back under the limit. The "Menu" word is visually hidden (not display:none) so screen readers still announce it and the summary keeps an accessible name. Above 600px the word stays, since the hamburger has room there. */ @media(max-width:600px){ .nav-in{gap:12px} .nav-links{gap:10px} .brand img{height:24px} nav.scrolled .brand img{height:22px} .nav-links .btn-sm{padding:10px 15px;font-size:var(--fs-ui-xs)} .navmenu summary{gap:0} .navmenu-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} } /* SMALL-SCREEN REFLOW The hero and clause columns carry min-width floors (260–290px) sized for their two-up desktop layouts. On phones narrower than ~400px the content box (viewport minus two gutters) drops below those floors and the column overflows — previously invisible because body{overflow-x:hidden} silently clipped it. Releasing the floor lets each column take the full width and stack cleanly. */ @media(max-width:480px){ .hero-copy,.body,.ladder,.sigblock-col{min-width:0} } /* ============================================================ HERO — dark ground on the existing --dark tokens, with a lime-tinted glow behind the specimen card (Grath's move, not Grath's purple/gold palette). ============================================================ */ /* .hero-bleed carries the dark background full-width (header itself is a .wrap, capped at 1180px); .hero stays the constrained column and owns overflow:hidden so the specimen's glow crops against its own edge without also clipping a full-bleed background. */ .hero-bleed{background:var(--dark)} .hero{ position:relative;overflow:hidden;color:var(--dark-ink); display:flex;flex-wrap:wrap;gap:clamp(36px,5vw,64px);align-items:flex-start; padding-top:clamp(60px,9vw,112px);padding-bottom:clamp(44px,6vw,76px); } .hero-copy{flex:1 1 470px;min-width:290px} .hero h1{font-size:var(--fs-hero);line-height:.95;letter-spacing:-.04em;color:var(--dark-ink)} .sign-word{position:relative;display:inline-block} .sign-word svg{position:absolute;left:-3%;bottom:-.1em;width:110%;height:auto;overflow:visible} .hero-sub{margin-top:32px;max-width:520px;font-size:var(--fs-body-xl);line-height:1.66;color:var(--dark-muted)} .hero-sub strong{color:var(--dark-ink);font-weight:600} .cta-row{margin-top:32px;display:flex;gap:10px;flex-wrap:wrap} .hero .btn-ghost{color:var(--dark-ink);border-color:var(--dark-line)} .hero .btn-ghost:hover{border-color:var(--lime);color:var(--lime)} /* sub-page hero extras — the Signs use-case pages carry a kicker above the h1 and (ESG) an awards strip under the CTAs, both on the dark ground */ .hero-copy .kicker{display:block;color:var(--dark-muted);margin-bottom:20px} .hero-copy .awards{margin-top:26px;font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em;color:var(--dark-muted);line-height:2} /* specimen document card — bigger (384 -> 440), and given a soft glow that bleeds past the hero's own bottom edge. The glow is on position:absolute pseudo-elements, so it's cropped by .hero's overflow:hidden without pulling the actual doc card (or the signature/seal inside it) out of a safe, uncropped position. */ .specimen{flex:0 1 440px;min-width:300px;position:relative} .specimen::before{content:"";position:absolute;inset:12px -12px -12px 12px;background:var(--tint);border:1px solid var(--line-2);border-radius:var(--r)} .specimen::after{content:"";position:absolute;inset:-56px -44px -48px -100px;background:radial-gradient(closest-side,rgba(200,210,83,.32),rgba(200,210,83,0) 70%);filter:blur(38px);z-index:-1} .doc{position:relative;background:var(--white);color:var(--ink);border:1px solid var(--line-3);border-radius:var(--r);padding:28px 28px 24px} .doc-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--ink);padding-bottom:10px} .doc-head .kicker{color:var(--muted)} .doc-title{font-size:var(--fs-title-lg);font-weight:600;line-height:1.25;margin-top:18px;letter-spacing:-.02em} .doc-meta{display:grid;grid-template-columns:1fr auto;gap:10px 16px;margin-top:22px;font-size:var(--fs-caption)} .doc-meta .k{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em;color:var(--muted);text-transform:uppercase} .doc-meta .v{font-weight:500;text-align:right} .doc-sign{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);display:flex;align-items:flex-end;justify-content:space-between;gap:14px} .doc-sign svg{width:168px;height:33px;display:block} .doc-signer{font-size:var(--fs-ui-sm);font-weight:600;margin-top:8px} .doc-cred{font-family:var(--mono);font-size:var(--fs-label-sm);color:var(--muted);letter-spacing:.1em;margin-top:2px} .seal{font-family:var(--mono);font-size:var(--fs-label-xs);letter-spacing:.09em;background:var(--lime);color:var(--on-lime);padding:6px 10px;transform:rotate(-3deg);white-space:nowrap;font-weight:500} /* Sequence: hero underline lands 1.3s, document signature 1.9s, seal 2.2s. Narrative order (sign, then seal) is preserved, but the hero finishes assembling itself in 2.2s rather than 2.75s. */ .seal-anim{opacity:0;animation:sealin .3s 1.9s linear forwards} /* ============================================================ MANTRA — Run it. Check it. Sign it. ============================================================ */ .mantra{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--tint)} .mantra-in{display:flex;flex-wrap:wrap;padding:0 var(--gut);max-width:1180px;margin:0 auto} .mantra .step{flex:1 1 240px;padding:32px 36px;border-right:1px solid var(--line);position:relative} .mantra .step:first-child{padding-left:0} .mantra .step:last-child{padding-right:0;border-right:none} .mantra .v{font-size:var(--fs-title-xl);font-weight:700;letter-spacing:-.03em} .mantra .d{font-size:var(--fs-ui);color:var(--ink-2);margin-top:8px;max-width:280px;line-height:1.55} .mantra .step.on .v{background:linear-gradient(transparent 60%,var(--lime) 60%);display:inline-block;padding:0 .08em} .mantra .step.on::before{content:"";position:absolute;left:36px;top:0;width:44px;height:3px;background:var(--lime)} @media(max-width:760px){ .mantra .step{padding:26px 0;border-right:none;border-bottom:1px solid var(--line)} .mantra .step:last-child{border-bottom:none} .mantra .step.on::before{left:0} } /* ============================================================ TRUST STRIP — horizontal auto-scroll logo marquee, same duplicate-track-loops-to--50% technique as the testimonials marquee. Logos sit in grayscale/muted until hovered, matching the plain-text muted treatment this replaced. ============================================================ */ .trust-strip{padding:26px 0 30px} .trust-strip .lbl{display:block;font-size:var(--fs-ui-xs);font-weight:500;color:var(--muted)} /* Static logo grid (was an auto-scroll marquee). Flat at rest, per the "nothing performs" principle; grayscale until hover. */ .trust-logos{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:22px 44px} .trust-logos img{height:26px;width:auto;max-width:130px;object-fit:contain;filter:grayscale(1);opacity:.5;transition:opacity .2s,filter .2s} .trust-logos img:hover{filter:grayscale(0);opacity:1} /* ============================================================ CLAUSE SECTIONS — the v2 rail ============================================================ */ .clause{border-top:1px solid var(--line)} .clause-in{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,56px);padding-top:var(--sec);padding-bottom:var(--sec)} .rail{flex:0 1 168px;min-width:130px} .rail .n{font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:.1em;color:var(--ink)} .rail .t{font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:.08em;color:var(--muted);text-transform:uppercase;margin-top:8px;line-height:1.8} .rail .tick{margin-top:18px} .body{flex:1 1 520px;min-width:280px} .body h2{font-size:var(--fs-section);max-width:16ch} .body .lede{margin-top:24px;font-size:var(--fs-body-lg);line-height:1.66;color:var(--ink-2);max-width:60ch} .body .note{margin-top:36px;font-size:var(--fs-body-sm);line-height:1.7;color:var(--ink-2);max-width:60ch} .bg-white{background:var(--white)} .bg-tint{background:var(--tint)} /* the creed — three denials then the claim, one column, anaphora carries it */ .creed{margin-top:44px;padding:30px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);position:relative} .creed::before{content:"";position:absolute;left:0;top:0;width:44px;height:3px;background:var(--lime)} .creed p{font-size:var(--fs-statement);line-height:1.55;letter-spacing:-.02em} .creed .deny{color:var(--muted)} .creed .deny em{font-style:normal;color:var(--ink)} .creed .affirm{color:var(--ink);margin-top:16px} /* ============================================================ CLAUSE 02 — interactive signer ladder ============================================================ */ .signer{margin-top:40px;display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start} .ladder{flex:1 1 330px;min-width:270px;border-top:1px solid var(--line)} .rung{width:100%;text-align:left;display:flex;gap:16px;align-items:flex-start;padding:18px 16px 18px 18px;border:none;border-bottom:1px solid var(--line);background:transparent;cursor:pointer;font-family:inherit;position:relative;transition:background .2s} .rung:hover{background:var(--hover)} .rung[aria-selected="true"]{background:var(--white)} /* one color per tier, always visible at reduced opacity, so the ladder reads as a rising scale of authority at a glance — not just a highlight on whichever rung happens to be selected. */ .rung .bar{position:absolute;left:0;top:0;bottom:0;width:3px;opacity:.55;transition:opacity .2s,width .2s} .rung[data-level="0"] .bar{background:var(--muted-3)} .rung[data-level="1"] .bar{background:var(--muted)} .rung[data-level="2"] .bar{background:var(--lime-deep)} .rung[data-level="3"] .bar{background:var(--ink)} .rung[aria-selected="true"] .bar{opacity:1;width:4px} .rung .num{font-family:var(--mono);font-size:var(--fs-mono-xs);color:var(--muted-2);padding-top:4px;flex:0 0 auto} .rung .txt{flex:1 1 auto} .rung .label{display:block;font-size:var(--fs-body-md);font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1.35} .rung .sub{display:block;font-size:var(--fs-caption);color:var(--muted);margin-top:2px;line-height:1.45} .rung .pill{font-family:var(--mono);font-size:var(--fs-label-xxs);letter-spacing:.09em;color:var(--ink);background:transparent;border:1px solid var(--line-2);padding:4px 6px;flex:0 0 auto;margin-top:4px;transition:.2s;border-radius:var(--r)} .rung[aria-selected="true"] .pill{background:var(--lime);border-color:var(--lime);color:var(--on-lime)} .rung:focus-visible{outline:2px solid var(--focus);outline-offset:-2px} .ladder-hint{font-size:var(--fs-caption);color:var(--muted-2);padding-top:16px} .sigblock-col{flex:1 1 280px;min-width:260px;position:sticky;top:100px} .sigblock{background:var(--white);border:1px solid var(--line-3);border-radius:var(--r);padding:24px 24px 20px} .sigblock .hd{font-family:var(--mono);font-size:var(--fs-label-sm);letter-spacing:.09em;color:var(--muted);text-transform:uppercase;padding-bottom:10px;border-bottom:2px solid var(--ink)} .sigblock .lb{font-family:var(--mono);font-size:var(--fs-label-sm);letter-spacing:.1em;color:var(--muted);text-transform:uppercase;margin-top:20px} .sigblock .who{font-size:var(--fs-title);font-weight:600;letter-spacing:-.025em;margin-top:4px;line-height:1.25} .sigblock .role{font-size:var(--fs-caption);color:var(--ink-2);margin-top:4px} .sigblock svg{width:100%;height:38px;margin-top:16px;display:block} .sigblock .warr-wrap{border-top:1px solid var(--line);margin-top:12px;padding-top:14px} .sigblock .warr{font-size:var(--fs-ui);line-height:1.5;margin-top:6px;color:var(--ink)} .sigblock .foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)} .sigblock .cred{font-family:var(--mono);font-size:var(--fs-label-xs);color:var(--muted-2);letter-spacing:.1em} .std-link{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:var(--fs-ui);font-weight:500;border-bottom:2px solid var(--lime);padding-bottom:2px} /* On narrow screens the columns stack. Drop the sticky pin (set on .sigblock-col above) so the signature block and its "Read the Standard" link scroll with the page. While sticky, the ladder table scrolled up behind the transparent link and overlapped it. order:-1 keeps the block and link above the ladder, so the table always stays below the link. */ @media(max-width:900px){.sigblock-col{order:-1;position:static;margin-bottom:22px}} /* ============================================================ CLAUSE 03 — the record (dark) ============================================================ */ .dark-sec{background:var(--dark);color:var(--dark-ink)} .dark-sec .rail .n{color:var(--dark-ink)} .dark-sec .rail .t{color:var(--dark-muted-2)} .dark-sec h2{color:#fff} .dark-sec .lede{color:var(--dark-muted)} .ledger{margin-top:40px;border:1px solid var(--dark-line);background:var(--dark-2);border-radius:var(--r)} .ledger-hd{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 20px;border-bottom:1px solid var(--dark-line);font-family:var(--mono);font-size:var(--fs-label-sm);letter-spacing:.09em} .ledger-hd .l{color:var(--dark-muted-2)} .ledger-hd .r{color:var(--lime);letter-spacing:.08em} .entry{display:flex;gap:16px;align-items:flex-start;padding:12px 20px;border-bottom:1px solid var(--dark-line-2);font-family:var(--mono);font-size:var(--fs-mono);line-height:1.6} .entry .t{color:var(--dark-muted-3);flex:0 0 auto} .entry .ev{flex:0 0 60px;letter-spacing:.08em;color:var(--dark-body)} .entry .d{flex:1 1 auto;color:var(--dark-body)} .entry.run .ev{color:var(--dark-muted-2)} .entry.sign .ev,.entry.amend .ev{color:var(--lime)} .entry.new{animation:slidein .4s cubic-bezier(.2,.8,.2,1)} .ledger-foot{padding:18px 20px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between} .btn-amend{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em;color:var(--dark-ink);background:transparent;border:1px solid var(--dark-line);padding:10px 16px;cursor:pointer;transition:.2s;border-radius:var(--r)} .btn-amend:hover:not(:disabled){border-color:var(--lime);color:var(--lime)} .btn-amend:disabled{opacity:.4;cursor:default} .amend-note{font-family:var(--mono);font-size:var(--fs-label);color:var(--dark-muted-2);flex:1 1 220px;text-align:right;line-height:1.7} @media(max-width:600px){.amend-note{text-align:left}.entry{flex-wrap:wrap;gap:6px 14px}.entry .ev{flex:0 0 auto}} /* API block — carried over from v1 */ .api{margin-top:32px;border:1px solid var(--dark-line);background:var(--dark-2);border-radius:var(--r);padding:20px 22px;font-family:var(--mono);font-size:var(--fs-mono-lg);line-height:1.95;color:var(--dark-body);overflow-x:auto} .api .g{color:var(--lime)} .api .ok{color:var(--lime)} .api .c{color:var(--dark-muted-3)} .dark-cols{display:flex;flex-wrap:wrap;margin-top:44px;border-top:1px solid var(--dark-line)} .dark-cols>div{flex:1 1 220px;padding:24px 30px 26px;border-right:1px solid var(--dark-line)} .dark-cols>div:first-child{padding-left:0} .dark-cols>div:last-child{padding-right:0;border-right:none} .dark-cols .k{font-family:var(--sans);font-size:var(--fs-mono);font-weight:500;letter-spacing:.02em;color:var(--lime)} .dark-cols .h{font-size:var(--fs-title-xs);font-weight:600;margin-top:10px;color:#fff;letter-spacing:-.02em} .dark-cols p{font-size:var(--fs-ui);color:var(--dark-muted);margin-top:8px;line-height:1.62} @media(max-width:820px){ .dark-cols>div,.dark-cols>div:first-child,.dark-cols>div:last-child{padding:22px 0;border-right:none;border-bottom:1px solid var(--dark-line)} .dark-cols>div:last-child{border-bottom:none;padding-bottom:0} } /* ============================================================ CLAUSE 04 — deployment ============================================================ */ .deploy{margin-top:36px;display:flex;flex-wrap:wrap;border-top:1px solid var(--line)} .deploy>div{flex:1 1 190px;padding:24px 28px 26px;border-right:1px solid var(--line);position:relative;display:flex;flex-direction:column} .deploy>div:first-child{padding-left:0} .deploy>div:last-child{padding-right:0;border-right:none} .deploy .t{font-size:var(--fs-title-md);font-weight:600;letter-spacing:-.025em} .deploy .by{font-family:var(--mono);font-size:var(--fs-mono-sm);color:var(--muted);margin-top:14px;line-height:2.2;letter-spacing:.04em} .deploy .by b{color:var(--ink);font-weight:400} .deploy>div>.std-link{margin-top:auto;padding-top:16px} @media(max-width:640px){ .deploy>div,.deploy>div:first-child,.deploy>div:last-child{padding:22px 0;border-right:none;border-bottom:1px solid var(--line)} .deploy>div:last-child{border-bottom:none} } /* ============================================================ PLATFORM — THE SIGNING STANDARD A numbered rulebook inside one clause body, not seven full clauses — the source is seven short rules, not seven pages, and the layout should read that way. ============================================================ */ .rulebook-toolbar{margin-top:36px;display:flex;justify-content:flex-end} .rulebook-toggle{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);background:transparent;border:1px solid var(--line-2);padding:8px 14px;cursor:pointer;border-radius:var(--r);transition:.18s} .rulebook-toggle:hover{border-color:var(--ink);color:var(--ink)} .rulebook{margin-top:20px;border-top:1px solid var(--line);list-style:none;padding-left:0} .rule{border-bottom:1px solid var(--line)} .rule details{padding:0} .rule summary{display:flex;gap:16px;align-items:flex-start;padding:26px 0;cursor:pointer;list-style:none} .rule summary::-webkit-details-marker{display:none} .rule summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px} .chev{font-family:var(--sans);font-size:var(--fs-title);line-height:1;color:var(--muted-3);flex:0 0 auto;transition:transform .2s,color .2s;transform:rotate(0deg)} .rule details[open] summary .chev{transform:rotate(90deg);color:var(--ink)} .rule-sumtext{flex:1 1 auto} .rule-hd{display:flex;align-items:baseline;gap:14px} .rule-n{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:.09em;color:var(--muted-2)} .rule-name{font-family:var(--sans);font-size:var(--fs-title-sm);font-weight:600;letter-spacing:-.02em} .rule-ax-line{display:block;margin-top:6px;font-family:var(--sans);font-size:var(--fs-body-md);font-weight:500;line-height:1.42;letter-spacing:-.01em;max-width:56ch;color:var(--ink)} .rule-panel{padding:0 0 30px 32px} .rule-panel>*:first-child{margin-top:0} .rule-ax{font-family:var(--sans);font-size:var(--fs-axiom);font-weight:500;line-height:1.42;letter-spacing:-.015em;max-width:54ch} .rule-ax p+p{margin-top:6px} .rule .rule-body{margin-top:16px;font-size:var(--fs-read);line-height:1.72;color:var(--ink-2);max-width:62ch} .rule .rule-body+.rule-body{margin-top:12px} @media(max-width:640px){.rule-panel{padding-left:24px}} .wpills{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px} .wpill{font-family:var(--mono);font-size:var(--fs-label);letter-spacing:.06em;color:var(--ink);border:1px solid var(--line-2);padding:6px 10px;border-radius:var(--r)} .esc-ladder{margin-top:16px;font-family:var(--mono);font-size:var(--fs-caption);letter-spacing:.03em;color:var(--muted-2)} .esc-ladder b{color:var(--ink);font-weight:500} /* ============================================================ TESTIMONIALS — horizontal auto-scroll marquee Track holds the card set twice back to back; animating to -50% loops seamlessly. Paused on hover/focus and disabled entirely under prefers-reduced-motion (handled globally, see MOTION). ============================================================ */ .testi{border-top:1px solid var(--line);padding:var(--sec) 0} .testi-hd{max-width:640px} .testi-hd h2{margin-top:14px;font-size:var(--fs-section-sm);letter-spacing:-.03em;max-width:20ch} /* Static card grid (was an auto-scroll marquee). Quotes show in full now that there's no moving row to keep uniform; cards in a row stretch to equal height and the attribution is pinned to the bottom (margin-top:auto) so the name/role lines share one baseline across the row. */ .testi-grid{margin-top:36px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch} @media(max-width:760px){.testi-grid{grid-template-columns:1fr}} .testi-card{position:relative;display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line-2);border-radius:var(--r);padding:26px 26px 22px;transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s,border-color .22s} .testi-card:hover{transform:translateY(-5px);box-shadow:0 18px 34px rgba(0,0,0,.09);border-color:var(--line-3)} .testi-card .tick{margin-bottom:16px} .testi-card .q{font-size:var(--fs-ui);line-height:1.6;color:var(--ink-2)} .testi-card .q::before{content:"\201C"} .testi-card .q::after{content:"\201D"} .testi-attr{margin-top:auto;padding-top:16px;border-top:1px solid var(--line)} .testi-attr .name{font-size:var(--fs-ui-sm);font-weight:600;color:var(--ink);letter-spacing:-.01em} /* Reserve two lines for the role so every attribution block is the same height: the name lines and divider rules then align across the row even though one role is a single line and the others wrap to two. */ .testi-attr .role{font-family:var(--mono);font-size:var(--fs-label);color:var(--muted);margin-top:4px;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;min-height:3em} /* use-case pages: compact side-by-side testimonial pair (no marquee, no clamp). Cards flex to two equal columns so the pair fills the body width edge to edge. */ .testi-duo{display:flex;gap:16px;flex-wrap:wrap;margin-top:36px} .testi-duo .testi-card{flex:1 1 300px;width:auto;height:auto;padding:20px 22px 16px} .testi-duo .testi-card .q{flex:0 0 auto;height:auto;font-size:var(--fs-ui-xs);display:block;overflow:visible} .testi-duo .testi-attr{margin-top:12px;padding-top:12px} /* use-case pages: award pair — extracted award logos recaptioned in site type, card widths match the testimonial columns above so the block reads as one grid */ .award-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px} .award-card{flex:1 1 300px;display:flex;align-items:center;gap:20px;background:var(--tint);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--r);padding:18px 22px} .award-card .logo{flex:0 0 122px;display:flex;align-items:center;justify-content:center} .award-card .logo img{max-width:100%;max-height:58px;display:block} .award-card .k{font-family:var(--mono);font-size:var(--fs-label-xs);letter-spacing:.09em;color:var(--muted);text-transform:uppercase} .award-card .h{font-family:var(--sans);font-size:var(--fs-read-sm);font-weight:600;letter-spacing:-.015em;line-height:1.35;margin-top:4px} /* use-case pages: resource cards — smaller titles than the deploy cells they reuse */ .deploy.res .t{font-size:var(--fs-body-md);line-height:1.5;letter-spacing:-.015em;margin-top:12px;max-width:30ch} /* ============================================================ EXECUTE ============================================================ */ .execute{background:var(--tint);padding:clamp(70px,10vw,128px) 0} .execute-in{max-width:640px;margin:0 auto;text-align:center;border-top:3px solid var(--lime);padding-top:36px} .execute .q{font-size:var(--fs-ui-sm);font-weight:500;color:var(--muted)} .execute h2{font-size:var(--fs-closer);line-height:1.02;letter-spacing:-.045em;margin-top:20px} .execute p{margin:22px auto 0;max-width:460px;font-size:var(--fs-body-lg);color:var(--ink-2);line-height:1.62} .execute .sig{display:block;margin:26px auto 0;max-width:280px;width:70%} .execute .cta-row{justify-content:center} /* ============================================================ FOOTER ============================================================ */ footer{background:var(--dark);color:var(--dark-ink);padding:clamp(48px,6vw,68px) 0 48px} .foot-in{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between} .foot-co{flex:1 1 260px;max-width:330px} .foot-co img{height:26px;width:auto;display:block} .foot-co .parent{display:block;margin-top:18px} .foot-co .tag{display:block;font-family:var(--body);font-size:var(--fs-mono);color:var(--dark-muted-3);margin-bottom:6px} .foot-co .parent img{height:22px;width:auto;display:block;opacity:.82;transition:opacity .18s} .foot-co .parent:hover img{opacity:1} .legal a{border-bottom:1px solid var(--dark-line);transition:.18s} .legal a:hover{color:#fff;border-bottom-color:var(--lime)} .foot-co p{font-size:var(--fs-ui-sm);color:var(--dark-muted);margin-top:14px;line-height:1.62} .foot-cols{flex:1 1 580px;display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:30px 32px} /* review aid: flags every unbuilt destination */ html[data-review] a[data-planned]{outline:1px dashed var(--lime);outline-offset:3px} html[data-review] a[data-planned]::after{content:" ·planned";color:var(--lime);font-size:var(--fs-label-sm)} .foot-col h5{font-size:var(--fs-mono-lg);font-weight:600;color:var(--dark-muted-2);margin-bottom:14px;letter-spacing:.02em} .foot-col a{display:block;font-size:var(--fs-ui-xs);color:var(--dark-body);margin-bottom:10px;transition:color .18s} .foot-col a:hover{color:#fff} /* ISO 27001 is one of the first things a bank's vendor-risk team looks for. It was previously a 10.5px mono fragment at 43% grey, sharing a line with an award listing. Certification and award are different weight classes: the certification gets a block with its number and a route to the policy that documents it, the award stays in .badge. Lime is spent here on purpose. A verified certification is exactly the authority moment the accent should mark. */ .cert{display:block;margin-top:18px;padding:12px 16px;border:1px solid var(--dark-line);border-left:3px solid var(--lime);border-radius:var(--r);transition:border-color .18s} .cert:hover{border-color:var(--dark-muted-3);border-left-color:var(--lime)} .cert .k{display:block;font-family:var(--mono);font-size:var(--fs-label-sm);letter-spacing:.09em;text-transform:uppercase;color:var(--dark-muted-2)} .cert .h{display:block;font-family:var(--sans);font-size:var(--fs-read-sm);font-weight:600;letter-spacing:-.015em;color:var(--dark-ink);margin-top:4px} .cert .n{display:block;font-family:var(--mono);font-size:var(--fs-label-sm);letter-spacing:.04em;color:var(--dark-muted-3);margin-top:6px;line-height:1.7} .badge{display:block;font-family:var(--mono);font-size:var(--fs-label);color:var(--dark-muted-3);margin-top:14px;line-height:2;letter-spacing:.04em} .legal{margin-top:44px;padding-top:20px;border-top:1px solid var(--dark-line);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;font-family:var(--mono);font-size:var(--fs-label);color:var(--dark-muted-3);letter-spacing:.06em} /* ============================================================ LEGAL PAGES — Privacy Policy, Acceptable Use Policy, etc. Deliberately plain: a legal document earns trust by being easy to scan, not by carrying the marketing page's typography. ============================================================ */ .legal-hero{border-bottom:1px solid var(--line);padding:clamp(48px,7vw,84px) 0 clamp(36px,5vw,56px)} .legal-hero h1{font-size:var(--fs-page);letter-spacing:-.03em;max-width:18ch;margin-top:14px} .legal-hero .meta{margin-top:18px;font-family:var(--mono);font-size:var(--fs-mono);color:var(--muted);letter-spacing:.04em} .legal-hero .dek{margin-top:20px;font-size:var(--fs-body);line-height:1.66;color:var(--ink-2);max-width:62ch} .legal-body{padding:clamp(48px,7vw,84px) 0 clamp(64px,9vw,108px)} .legal-body-in{max-width:720px} /* scroll-margin-top clears the sticky nav (min-height 74px, 56px scrolled) so a TOC jump lands on the section title, not under the nav. */ .legal-body h2{font-size:var(--fs-title);margin-top:52px;padding-top:28px;border-top:1px solid var(--line);letter-spacing:-.02em;scroll-margin-top:90px} /* :first-of-type, not :first-child — the note and TOC precede the first h2 in the DOM, so :first-child never matched it. */ .legal-body h2:first-of-type{margin-top:0;padding-top:0;border-top:none} .legal-body h2 .n{font-family:var(--mono);font-size:var(--fs-caption);color:var(--muted-2);font-weight:400;letter-spacing:.04em;display:block;margin-bottom:6px} .legal-body h3{font-size:var(--fs-body-sm);margin-top:26px;letter-spacing:-.01em} .legal-body p{font-size:var(--fs-read);line-height:1.72;color:var(--ink-2);margin-top:14px;max-width:66ch} .legal-body ul,.legal-body ol{margin-top:14px;padding-left:22px;max-width:66ch} .legal-body li{font-size:var(--fs-read);line-height:1.68;color:var(--ink-2);margin-top:8px} .legal-body strong{color:var(--ink);font-weight:600} .legal-body a{border-bottom:1px solid var(--line-3);color:var(--ink);transition:border-color .18s} .legal-body a:hover{border-bottom-color:var(--ink)} /* draft-review callout and inline to-be-confirmed markers — distinct from .mark, which is for marketing emphasis, not legal placeholders */ .legal-note{margin-top:16px;padding:14px 18px;background:var(--tint);border-left:3px solid var(--lime-deep);font-size:var(--fs-ui-xs);line-height:1.6;color:var(--ink-2)} .legal-note b{color:var(--ink)} .tbc{display:inline-block;background:var(--tint);border:1px dashed var(--line-3);padding:2px 6px;border-radius:2px;font-family:var(--mono);font-size:.88em;color:var(--muted-2)} /* the site-wide nav{} rule targets any