/* ============================================================================ GROWTH NUTS design system ---------------------------------------------------------------------------- THESIS: The homepage is the scanner. A visitor types a URL and watches real agents read their site, then gets every finding, the evidence behind it, and what it costs per month. It refuses the agency landing page that claims results nobody can check, and it refuses the cream-and-one-accent rendition that every design tool ships in 2026. OWN-WORLD: Restrained product-software craft, held to the reference the owner pinned (Linear, Vercel, Raycast) and rendered light, because a dark theme is ruled out. White ground, cool neutrals, one blue accent used sparingly, Inter at display weight 510 rather than 800, small type, generous space, hairline borders at 9% ink, pill and 8px radii. Mobile first: the scan is thumb-reachable, findings open as a sheet, actions dock to the bottom of the viewport. STORY: Suspicion, then a real inspection running in front of them, then a number in their own currency, then one obvious next move. FIRST VIEWPORT (phone): compact app bar carrying the wordmark, one headline, a full-width URL field with a single primary action, and the report card beginning immediately beneath it. FORM: Live Service Tracker, user-pinned, preserved. Rendered in the pinned reference's craft rather than the previous cream world. FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, and DESIGN.md. ---------------------------------------------------------------------------- Linked last in so it wins ties against the legacy inline CSS it supersedes. html.gn prefixes give 0,1,1 which beats a legacy single class. ============================================================================ */ @font-face { font-family: 'Inter'; src: url(/fonts/inter-var.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; 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; } /* Metric-matched fallback. Without it the swap shifts layout, and a site whose pitch is Core Web Vitals cannot ship a CLS it caused itself. */ @font-face { font-family: 'Inter Fallback'; src: local('Helvetica Neue'), local('Arial'), local('Liberation Sans'); ascent-override: 90%; descent-override: 22.43%; line-gap-override: 0%; size-adjust: 107.06%; } html.gn { --bg: #FFFFFF; --bg2: #FAFAFA; --bg3: #F4F4F5; --ink: #08090A; --ink2: #5B5F66; /* 6.3:1 on white */ --ink3: #6E737C; /* 4.8:1 on white, the floor for body-size text */ --line: rgba(8, 9, 10, .09); --line2: rgba(8, 9, 10, .15); --ac: #3D63DD; /* white on this is 5.2:1 */ --acink: #FFFFFF; --actint: rgba(61, 99, 221, .09); --bad: #C0362C; --warn: #B4690E; --ok: #1A7F4B; --f: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mo: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace; --bar: 56px; --safe: env(safe-area-inset-bottom, 0px); --gut: clamp(1rem, .55rem + 2.2vw, 2.75rem); --max: 1180px; color-scheme: light; -webkit-tap-highlight-color: transparent; } @media (min-width: 900px) { html.gn { --bar: 60px; } } /* ------------------------------------------------------------------ ground */ html.gn body { font-family: var(--f); font-size: 15px; line-height: 1.55; color: var(--ink); background: var(--bg); overflow-x: hidden; -webkit-font-smoothing: antialiased; font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; } html.gn :where(button, input, select, textarea) { font: inherit; color: inherit; } html.gn a { color: inherit; text-decoration: none; } html.gn img { max-width: 100%; height: auto; } html.gn ::selection { background: var(--actint); } /* Layers the previous worlds left behind. */ html.gn .bg-effects, html.gn .orb, html.gn .grid-pattern, html.gn .cta-glow, html.gn .wsw { display: none !important; } html.gn :focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; } /* -------------------------------------------------------------- typography */ html.gn h1, html.gn h2, html.gn h3, html.gn h4 { font-family: var(--f); font-weight: 540; letter-spacing: -.028em; line-height: 1.1; color: var(--ink); text-wrap: balance; } html.gn h1 { font-size: clamp(30px, 7.4vw, 52px); font-weight: 510; letter-spacing: -.032em; line-height: 1.05; } html.gn h2 { font-size: clamp(22px, 3.6vw, 32px); } html.gn h3 { font-size: clamp(17px, 2.2vw, 20px); font-weight: 550; letter-spacing: -.018em; } html.gn h4 { font-size: 16px; font-weight: 550; letter-spacing: -.012em; } html.gn h2 { margin: 0 0 12px; } html.gn h3 { margin: 0 0 8px; } html.gn p { margin: 0 0 14px; } html.gn p:last-child { margin-bottom: 0; } /* The eyebrow the previous world used above every heading is gone; the heading carries itself. Kept only as a label inside components. */ html.gn .section-label { font-family: var(--mo); font-size: 11.5px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; color: var(--ink3); display: inline-flex; align-items: center; gap: 7px; margin: 0 0 10px; } html.gn .section-label::before { content: none; } html.gn .section-title { margin-bottom: 10px; } html.gn .section-desc { color: var(--ink2); font-size: 16px; max-width: 62ch; line-height: 1.55; } html.gn .section { padding: clamp(44px, 8vw, 88px) var(--gut); max-width: var(--max); margin: 0 auto; } html.gn .section-dark { background: var(--bg2); border-block: 1px solid var(--line); max-width: none; } html.gn .section-dark > * { max-width: var(--max); margin-inline: auto; } html.gn .section-dark h1, html.gn .section-dark h2, html.gn .section-dark h3, html.gn .section-dark h4 { color: var(--ink); } html.gn .section-dark p, html.gn .section-dark .section-desc { color: var(--ink2); } html.gn .proof-num, html.gn .stat-num, html.gn .rh-stat, html.gn table { font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------- app bar */ html.gn .nav { position: sticky; top: 0; z-index: 1000; min-height: var(--bar); padding: 0 var(--gut); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: rgba(255, 255, 255, .86); border-bottom: 1px solid var(--line); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); } html.gn .nav::before { content: none; } /* The wordmark: GR + hex-nut O + WTH NUTS. The nut is optically aligned to a .757em cap band with ~.015em overshoot top and bottom, measured rather than eyeballed. */ html.gn .nav-logo { display: inline-flex; align-items: baseline; font-weight: 680; font-size: clamp(15px, 1.4vw, 17px); letter-spacing: -.035em; color: var(--ink); background: none; -webkit-text-fill-color: currentColor; white-space: nowrap; } html.gn .gn-o { display: inline-block; width: .691em; height: .757em; margin: 0 .022em; position: relative; top: .014em; fill: currentColor; } html.gn .nav-links { gap: 1px; align-items: center; } html.gn .nav-links > li > a { font-size: 13.5px; font-weight: 460; letter-spacing: -.006em; color: var(--ink2); padding: 6px 10px; border-radius: 7px; transition: background .12s, color .12s; } html.gn .nav-links > li > a:hover { background: var(--bg3); color: var(--ink); } html.gn .nav-links a::after { content: none; } html.gn .nav-cta { font-size: 13.5px; font-weight: 500; padding: 7px 14px; border-radius: 999px; background: var(--ink); color: var(--bg); border: 1px solid var(--ink); min-height: 36px; display: inline-flex; align-items: center; transition: opacity .13s; } html.gn .nav-cta:hover { opacity: .86; background: var(--ink); color: var(--bg); } html.gn .nav-cta::before { content: none; } html.gn .search-toggle { min-width: 38px; min-height: 38px; border-radius: 9px; border: 1px solid var(--line2); background: var(--bg); color: var(--ink2); display: flex; align-items: center; justify-content: center; } html.gn .search-toggle:hover { background: var(--bg3); color: var(--ink); } html.gn .mobile-toggle { min-width: 38px; min-height: 38px; border-radius: 9px; border: 1px solid var(--line2); background: var(--bg); align-items: center; justify-content: center; gap: 4px; } html.gn .mobile-toggle span { background: var(--ink); height: 1.6px; width: 16px; } /* The legacy sheet hides this above 768px, then a later a11y block re-declares display:flex at equal specificity and wins on order. Restate both states. */ @media (max-width: 899px) { html.gn .mobile-toggle { display: flex; } } @media (min-width: 900px) { html.gn .mobile-toggle { display: none; } } html.gn .mega { background: var(--bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 14px 40px -28px rgba(8, 9, 10, .4); gap: 20px 28px; padding: 26px var(--gut) 22px; transform: none; } html.gn .has-mega:hover > .mega, html.gn .has-mega:focus-within > .mega { transform: none; } html.gn .mega-h { font-family: var(--mo); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin-bottom: 9px; } html.gn .mega a { font-size: 13.5px; color: var(--ink2); padding: 5px 0; border-radius: 5px; } html.gn .mega a:hover { color: var(--ac); } html.gn .mega-all { border-top: 1px solid var(--line); color: var(--ac) !important; font-size: 13px; font-weight: 520; padding-top: 12px !important; } html.gn .mobile-nav { background: var(--bg); align-items: stretch; justify-content: flex-start; padding: calc(var(--bar) + 12px) var(--gut) 40px; gap: 0; overflow-y: auto; } html.gn .mobile-nav a { font-size: 17px; font-weight: 520; letter-spacing: -.018em; color: var(--ink); padding: 11px 0; border-bottom: 1px solid var(--line); } html.gn .mobile-nav .m-h { font-family: var(--mo); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin: 20px 0 2px; } html.gn .mobile-nav .m-sub { font-size: 15px !important; font-weight: 440 !important; color: var(--ink2) !important; padding: 10px 0 !important; min-height: 44px; display: flex; align-items: center; } html.gn .mobile-nav .m-cta { background: var(--ac); color: var(--acink) !important; border-radius: 10px; justify-content: center; margin-top: 20px; padding: 14px !important; font-weight: 530 !important; border-bottom: none; } html.gn .mobile-nav-close { min-width: 44px; min-height: 44px; color: var(--ink2); } /* -------------------------------------------------------------- controls */ html.gn .btn, html.gn .hero-audit-btn, html.gn .cookie-accept, html.gn button[type='submit'] { font-size: 15px; font-weight: 520; letter-spacing: -.008em; min-height: 46px; padding: 0 20px; border: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; transition: opacity .13s, background .13s; } html.gn .btn-primary, html.gn .hero-audit-btn, html.gn .cookie-accept { background: var(--ac); color: var(--acink); } html.gn .btn-primary:hover, html.gn .hero-audit-btn:hover { opacity: .9; } html.gn .btn-secondary, html.gn .cookie-decline { background: var(--bg); border: 1px solid var(--line2); color: var(--ink); } html.gn .btn-secondary:hover { background: var(--bg3); } /* Drafting-era lift is not this world's depth system. */ html.gn .btn:hover, html.gn .btn-primary:hover, html.gn .btn-secondary:hover, html.gn .service:hover, html.gn .problem:hover, html.gn .solution:hover, html.gn .testimonial:hover, html.gn .audit-feature:hover, html.gn .tool-card-home:hover, html.gn .gn-ind-card:hover, html.gn .back-to-top:hover { transform: none; box-shadow: none; } html.gn input[type='text'], html.gn input[type='email'], html.gn input[type='url'], html.gn input[type='tel'], html.gn input[type='search'], html.gn select, html.gn textarea { background: var(--bg); border: 1px solid var(--line2); border-radius: 10px; padding: 12px 14px; min-height: 46px; width: 100%; font-size: 16px; transition: border-color .14s, box-shadow .14s; } html.gn input:focus, html.gn select:focus, html.gn textarea:focus { border-color: var(--ac); box-shadow: 0 0 0 3px var(--actint); outline: none; } html.gn input::placeholder { color: var(--ink3); } html.gn .skip-link { background: var(--ac); color: var(--acink); border-radius: 0 0 8px 0; font-size: 14px; font-weight: 520; padding: 10px 16px; } /* ----------------------------------------------------------------- cells */ html.gn .stat, html.gn .proof-stat, html.gn .gn-ind-card, html.gn .tool-card-home, html.gn .testimonial, html.gn .service, html.gn .problem, html.gn .solution, html.gn .audit-feature, html.gn .result-highlight { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: none; padding: 18px; } html.gn .gn-ind-card:hover, html.gn .tool-card-home:hover, html.gn .service:hover, html.gn .audit-feature:hover { border-color: var(--line2); background: var(--bg2); } html.gn .problem { border-left: 1px solid var(--line); } html.gn .solution { border-left: 1px solid var(--line); } html.gn .proof-bar { background: var(--bg2); border-block: 1px solid var(--line); padding: 26px var(--gut); text-align: left; } html.gn .proof-stats { gap: 14px; } html.gn .proof-stat { border: 1px solid var(--line); background: var(--bg); } html.gn .proof-num { font-size: clamp(20px, 3vw, 26px); font-weight: 570; letter-spacing: -.028em; color: var(--ink); display: block; } html.gn .proof-label, html.gn .stat-label { font-size: 12.5px; color: var(--ink3); margin-top: 4px; display: block; line-height: 1.4; } html.gn .proof-industries { justify-content: flex-start; } html.gn .proof-industries-label { font-size: 12.5px; color: var(--ink3); } html.gn .proof-tag { font-size: 12.5px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; color: var(--ink2); background: var(--bg); } html.gn .service-num, html.gn .step-dot { font-family: var(--mo); font-size: 11.5px; font-weight: 500; letter-spacing: .06em; color: var(--ink3); background: none; } html.gn .step-dot { width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--line2); color: var(--ink2); display: flex; align-items: center; justify-content: center; font-size: 12px; } html.gn .cta { background: var(--bg2); text-align: left; border-block: 1px solid var(--line); } html.gn .cta-title { color: var(--ink); } html.gn .cta-desc { color: var(--ink2); margin-left: 0; margin-right: 0; } html.gn .cta-dual { justify-content: flex-start; } html.gn .cta-sub { color: var(--ink3); font-size: 12.5px; } html.gn .footer { background: var(--bg); border-top: 1px solid var(--line); padding: 40px var(--gut) 34px; text-align: left; } html.gn .footer-links { justify-content: flex-start; gap: 8px 20px; margin-bottom: 18px; } html.gn .footer-links a { font-size: 13.5px; color: var(--ink2); min-height: 40px; display: inline-flex; align-items: center; } html.gn .footer-links a:hover { color: var(--ink); } html.gn .footer-copy { font-size: 12.5px; color: var(--ink3); } html.gn .back-to-top { background: var(--ink); color: var(--bg); border-radius: 999px; box-shadow: none; } html.gn .cookie-banner { background: var(--bg); border-top: 1px solid var(--line); backdrop-filter: none; } html.gn .cookie-content { background: var(--bg); } html.gn .cookie-content p { color: var(--ink2); font-size: 13.5px; } html.gn .cookie-content a { color: var(--ac); text-decoration: underline; } html.gn .search-container-modal { background: var(--bg); border: 1px solid var(--line2); border-radius: 14px; box-shadow: 0 24px 60px -30px rgba(8, 9, 10, .5); } html.gn .search-header { border-bottom: 1px solid var(--line); } html.gn .search-header input { color: var(--ink); background: none; border: 0; min-height: 0; box-shadow: none; } html.gn .search-header svg, html.gn .search-close { color: var(--ink3); } html.gn .search-result { color: var(--ink); border-radius: 8px; } html.gn .search-result:hover { background: var(--bg3); } html.gn .search-result-excerpt { color: var(--ink2); } html.gn .search-result-excerpt mark { background: var(--actint); color: var(--ink); } html.gn .glossary-term { border-bottom: 1px dashed var(--ac); } html.gn .glossary-tooltip { background: var(--ink); color: #fff; border: 0; border-radius: 10px; font-size: 13px; line-height: 1.5; padding: 10px 13px; } /* Content is visible by default; the animation is the enhancement. */ html.gn .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.gn *, html.gn *::before, html.gn *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } @media (forced-colors: active) { html.gn .nav-logo, html.gn .proof-num { -webkit-text-fill-color: currentColor; color: CanvasText; } } @media print { html.gn .nav, html.gn .mobile-nav, html.gn .back-to-top, html.gn .cookie-banner, html.gn .gn-dock { display: none !important; } }