/* ============================================================ Goldbar Talent — application flow + landing page. The real design-system tokens from the handoff pack, shipped as-is. Mono + gold, nothing else: surfaces separate by a gold hairline, never by a tinted fill. RULES THIS FILE OBEYS, and which must survive every edit: · Every colour comes from a token. No hardcoded hex in a rule below the token block, with the single sanctioned exception of the #e5484d recording dot (universal record semantics). · No monospaced or typewriter face anywhere. --mono is Inter with tabular figures; there is no third family. · The theme is set as data-theme on , so the body and the overscroll gap follow it too. · Glow appears on exactly five things: the progress-rail dot, primary CTAs, input focus rings, selected chips, and the hero/gift halos. Everything else is a flat gold hairline. ============================================================ */ /* --- Self-hosted, so a blocked font CDN can never leave an applicant reading a fallback face. Converted to woff2: 3.4 MB of TTF became 656 KB. Inter's italic file is not shipped — every italic in this design is Cormorant. --- */ @font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url('fonts/CormorantGaramond.woff2') format('woff2')} @font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:300 700;font-display:swap;src:url('fonts/CormorantGaramond-Italic.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('fonts/Inter.woff2') format('woff2')} :root{ --black:#000000; --white:#FFFFFF; --line-on-dark:#6F5820; --line-on-dark-strong:#C9A961; --line-on-light:#E2C57A; --line-on-light-strong:#C9A961; --wash-on-dark:rgba(201,169,97,0.10); --wash-on-light:rgba(201,169,97,0.14); --placeholder-on-dark:var(--white); --placeholder-on-light:var(--black); --gold-50:#FAF1D6; --gold-100:#EFD89A; --gold-200:#E2C57A; --gold-300:#D4B05E; --gold-400:#C9A961; --gold-500:#B8923D; --gold-600:#9A7A2E; --gold-700:#6F5820; --gold-800:#4A3A18; /* dark is the base resolution; data-theme always states it explicitly */ --bg:var(--black); --surface-1:var(--black); --border:var(--line-on-dark); --border-strong:var(--line-on-dark-strong); --wash:var(--wash-on-dark); --fg-1:var(--white); --fg-2:var(--white); --placeholder:var(--placeholder-on-dark); --accent:var(--gold-400); --accent-hover:var(--gold-500); --accent-ink:var(--black); --accent-type:var(--gold-400); /* the unavailable state, drawn rather than faded - see .gb-btn[disabled] */ --disabled-bg:var(--gold-800); --disabled-line:var(--gold-600); --disabled-ink:var(--gold-100); --inner-hairline:inset 0 1px 0 rgba(201,169,97,0.14); /* Halo and CTA-glow strength as tokens, so light mode dims them in ONE place. Light: halos to 16%, CTA glow to 50% — large gold halos composite to cream on white, which this mono system forbids. */ --halo-strength:0.85; --halo-peak:0.187; /* .22 x .85 — the pack's peak, pre-multiplied so the grain below can be independent of it */ --grain:0.030; --cta-glow:1; --serif-display:'Cormorant Garamond','Garamond',Georgia,serif; --sans:'Inter','Helvetica Neue',Arial,sans-serif; --mono:'Inter','Helvetica Neue',Arial,sans-serif; } [data-theme="dark"]{ --bg:var(--black);--surface-1:var(--black); --border:var(--line-on-dark);--border-strong:var(--line-on-dark-strong); --wash:var(--wash-on-dark); --fg-1:var(--white);--fg-2:var(--white); --placeholder:var(--placeholder-on-dark); --accent-ink:var(--black);--accent-type:var(--gold-400); --disabled-bg:var(--gold-800);--disabled-line:var(--gold-600);--disabled-ink:var(--gold-100); --inner-hairline:inset 0 1px 0 rgba(201,169,97,0.14); --halo-strength:0.85;--halo-peak:0.187;--grain:0.030;--cta-glow:1; } [data-theme="light"]{ --bg:var(--white);--surface-1:var(--white); --border:var(--line-on-light);--border-strong:var(--line-on-light-strong); --wash:var(--wash-on-light); --fg-1:var(--black);--fg-2:var(--black); --placeholder:var(--placeholder-on-light); --accent-ink:var(--black); /* small gold type on white needs the darker cut — #C9A961 on white is 2.25:1 */ --accent-type:var(--gold-700); /* the pale cut, for the same reason --accent-type takes the dark one: a faded gold on white has nothing left. #6F5820 on #FAF1D6 is 6.0:1. */ --disabled-bg:var(--gold-50);--disabled-line:var(--gold-200);--disabled-ink:var(--gold-700); --inner-hairline:inset 0 1px 0 rgba(201,169,97,0.18); --halo-strength:0.136; /* 16% of the dark value */ --halo-peak:0.0299; /* .22 x .136 — same 16% cut, expressed in the gradient */ --grain:0.045; /* white needs a touch more dither than black */ --cta-glow:0.5; } /* THE ONE FRAME IN WHICH NOTHING MAY ANIMATE. Set by setTheme() while the theme attribute flips, then dropped again two frames later. A transition on a property fed by a theme token freezes that property when the token changes underneath it - the transition begins and never commits, so the element keeps the previous theme's colour for as long as the page is open. Proven with a controlled pair of identical buttons whose only difference was the transition. Everything is covered rather than the one property that was reported, because they all have the same defect. */ html.gb-theme-swap *,html.gb-theme-swap *::before,html.gb-theme-swap *::after{ transition:none !important} *{box-sizing:border-box} html{background:var(--bg)} body{margin:0;background:var(--bg);color:var(--fg-1);font-family:var(--sans);font-size:15px; -webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:var(--accent);text-decoration:none} a:hover{color:var(--accent-hover);text-decoration:underline;text-underline-offset:3px} img{max-width:100%} /* ---------- type primitives ---------- */ .gb-eyebrow{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.18em; text-transform:uppercase;color:var(--accent-type);margin:0} /* SplitTitle — the signature heading, and BOTH halves are Cormorant Garamond at weight 500. The handoff PROSE says the prefix is "in the sans face", and that is wrong: the component the prototype actually renders with sets fontFamily:'var(--serif-display)', fontWeight:500, lineHeight:1.12, letterSpacing:-0.01em, with the suffix an italic gold inheriting all of it. Built from the prose first, caught by asking both pages which font the browser had really resolved. Trust the component, not the sentence. */ .gb-title{font-family:var(--serif-display);font-weight:500;letter-spacing:-.01em;line-height:1.12;margin:0} .gb-title .sfx{font-style:italic;color:var(--accent)} .gb-note{font-family:var(--serif-display);font-style:italic;font-size:17px;margin:0} .gb-body{font-size:15px;line-height:1.7;margin:0} /* ---------- chrome ---------- */ .gb-rail{position:fixed;top:0;left:0;right:0;height:2px;background:var(--border);z-index:30} .gb-rail-fill{position:relative;height:2px;background:var(--accent);width:0; transition:width 340ms cubic-bezier(.16,1,.3,1)} .gb-rail-dot{position:absolute;right:-3px;top:-2px;width:6px;height:6px;border-radius:999px; background:var(--accent);box-shadow:0 0 14px 3px rgba(201,169,97,.85)} .gb-header{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between; gap:16px;max-width:1100px;margin:0 auto;padding:26px 24px 0} /* THE WORDMARK — two deliberate overrides of the handoff pack, both Emma's, both recorded here so nobody "corrects" them back as a fidelity fix: 1 · EMMA, 2026-08-24: "the logo needs to be bigger." The pack states 34px as a hard constraint. It is 32px here and reads far larger than the old 34px, because the mark is now cropped to its letterforms — the original artwork spent 44% of its height on a baked-in drop shadow, so a 34px box only ever showed about 19px of actual word. This is roughly 1.7x the size she saw. The OTHER half of the pack's constraint stands: max-width 52vw, so it can never swamp a phone. 2 · EMMA, 2026-08-24: the gold mark is illegible on the white theme. The pack flags this as unresolved and ships no light variant. There is one now: the same letterforms, cut from the same artwork, filled with the light theme's own darker gold (--gold-700, 5.9:1 on white). No new font, no redrawn mark. The dark theme keeps the original 3D gold, untouched, cropped to the same box so the two are the same size and nothing shifts when the theme flips. */ .gb-mark{display:block;height:32px;width:auto;max-width:52vw;object-fit:contain} .gb-mark.on-light{display:none} [data-theme="light"] .gb-mark.on-dark{display:none} [data-theme="light"] .gb-mark.on-light{display:block} .gb-headright{display:flex;align-items:center;gap:16px} .gb-step{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.18em; text-transform:uppercase;color:var(--accent-type);font-variant-numeric:tabular-nums} .gb-themebtn{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:600; font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-1);background:transparent; border:1px solid var(--border);border-radius:999px;padding:7px 14px;cursor:pointer; transition:border-color 140ms cubic-bezier(.2,.7,.2,1)} .gb-themebtn:hover{border-color:var(--accent)} .gb-themedot{width:9px;height:9px;border-radius:999px;border:1px solid var(--accent);background:transparent} [data-theme="light"] .gb-themedot{background:var(--accent)} /* ---------- halos — transform-only animation, opacity is theme-driven ---------- */ @keyframes gb-halo{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.05)}} @keyframes gb-halo-cta{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}} @keyframes gb-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @keyframes gb-blink{0%,100%{opacity:1}50%{opacity:.25}} /* THE HALO, AND WHY IT CARRIES A GRAIN. The rings on white are not a design fault, they are a counting one. In light mode the halo is dimmed to 16% of its dark value, so its strongest point is about 3% alpha — and 3% of 255 is roughly eight distinct steps to spend on a 300px falloff. Eight steps over 300px IS a set of concentric rings; no amount of blurring removes them, because blur cannot invent levels that the screen does not have. The fix is the one displays have always used for this: dither. A barely-there grain sits over the gradient and scatters each pixel across the boundary between two levels, so the eye integrates a smooth ramp instead of a step. ⚠️ THE SPECIFICATION IS UNTOUCHED: same colour, same 22% peak, same 68% cut, same 16%/50% theme dimming. Only the rendering changes — which is the right half to change, because the numbers are Emma's and the rings are the screen's. */ .gb-hero-halo{position:absolute;top:-40px;left:50%;width:min(980px,94vw);height:600px; transform:translateX(-50%);pointer-events:none;opacity:1;filter:blur(10px); background:radial-gradient(ellipse at center,rgba(201,169,97,var(--halo-peak)),rgba(201,169,97,0) 68%); animation:gb-halo 8s ease-in-out infinite} /* THE GRAIN sits on the SECTION, not inside the halo, for two reasons that both had to be found by looking: anything inside the halo is multiplied by the very opacity that causes the banding, and anything inside it is also blurred by the halo's own blur, which smears the dither into exactly the smoothness it is there to break. So the strength now lives in the gradient's alpha (identical composited result, --halo-peak carries the theme dimming) and the grain is a separate, unblurred layer masked to the same ellipse — no texture anywhere the halo does not already reach. */ .gb-terminal::after{content:'';position:absolute;top:-40px;left:50%; width:min(980px,94vw);height:640px;transform:translateX(-50%); pointer-events:none;z-index:0;opacity:var(--grain); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E"); -webkit-mask-image:radial-gradient(ellipse at center,#000 0%,rgba(0,0,0,0) 68%); mask-image:radial-gradient(ellipse at center,#000 0%,rgba(0,0,0,0) 68%)} .gb-cta-wrap{position:relative;display:inline-grid;justify-items:center} .gb-cta-halo{position:absolute;inset:-20px;border-radius:999px;pointer-events:none; opacity:var(--halo-strength);filter:blur(3px); background:radial-gradient(ellipse at center,rgba(201,169,97,.40),rgba(201,169,97,0) 70%); animation:gb-halo-cta 5s ease-in-out infinite} /* ---------- buttons ---------- */ .gb-btn{font-family:var(--sans);font-weight:600;font-size:14px;border-radius:999px; padding:13px 28px;cursor:pointer;border:1px solid var(--accent);background:var(--accent); color:var(--accent-ink);transition:background 140ms cubic-bezier(.2,.7,.2,1), border-color 140ms cubic-bezier(.2,.7,.2,1),opacity 140ms,box-shadow 220ms} .gb-btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)} .gb-btn.lg{font-size:16px;padding:18px 44px} .gb-btn.glow{box-shadow:0 10px 36px rgba(201,169,97,calc(.32 * var(--cta-glow)))} .gb-btn.glow-lg{box-shadow:0 12px 44px rgba(201,169,97,calc(.42 * var(--cta-glow)))} .gb-btn.glow-submit{box-shadow:0 10px 44px rgba(201,169,97,calc(.45 * var(--cta-glow)))} .gb-btn.secondary{background:transparent;color:var(--fg-1);border-color:var(--accent);box-shadow:none} .gb-btn.secondary:hover{background:var(--wash);border-color:var(--accent-hover)} .gb-btn.ghost{background:transparent;color:var(--fg-1);border-color:transparent;box-shadow:none;padding:13px 18px} .gb-btn.ghost:hover{background:var(--wash);border-color:transparent} /* A DISABLED BUTTON MUST STILL SAY WHAT IT IS. This was opacity:.35, and opacity fades the label AND its background together toward whatever is behind them - which on this page is a black or a white sheet. Measured on the built page: the Continue label came out at 1.91:1 in dark and 1.88:1 in light. Below about 2:1 there is nothing left to read, and Emma's screenshot is a gold button with no writing on it at all. It reads as a CLICK problem because Continue starts disabled on every new screen: you answer, you press, the next screen arrives, and the button you land on is the blank one. So the state is drawn in colour now instead of being faded out. It still looks plainly unavailable, and the label survives: 7.8:1 on dark, 6.0:1 on light. */ /* ⚠️ LONGHANDS ON PURPOSE: background-color, not background; and the four border sides, not border-color. Written as shorthands first, and the theme toggle then left the label right and the background WRONG on the same element — the browser re-resolved `color`, which is a longhand, and kept the stale value for the two shorthands carrying a var(). The cascade said light, the pixels said dark, and nothing about it looks broken until you switch themes with a disabled button on screen. Anything here that reads a theme token stays a longhand. */ .gb-btn[disabled],.gb-btn[disabled]:hover{cursor:not-allowed;box-shadow:none; background-color:var(--disabled-bg);color:var(--disabled-ink); border-top-color:var(--disabled-line);border-right-color:var(--disabled-line); border-bottom-color:var(--disabled-line);border-left-color:var(--disabled-line)} .gb-btn.secondary[disabled],.gb-btn.ghost[disabled], .gb-btn.secondary[disabled]:hover,.gb-btn.ghost[disabled]:hover{background-color:transparent; color:var(--disabled-ink); border-top-color:var(--disabled-line);border-right-color:var(--disabled-line); border-bottom-color:var(--disabled-line);border-left-color:var(--disabled-line)} .gb-btn.ghost[disabled],.gb-btn.ghost[disabled]:hover{border-top-color:transparent; border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent} .gb-textbtn{font-family:var(--serif-display);font-style:italic;font-size:17px;color:var(--fg-1); background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px} .gb-textbtn:hover{color:var(--accent)} /* ---------- inputs ---------- */ .gb-input{width:100%;font-family:var(--sans);font-size:17px;color:var(--fg-1);background:transparent; border:1px solid var(--border);border-radius:999px;padding:16px 24px;outline:none; transition:border-color 140ms cubic-bezier(.2,.7,.2,1),box-shadow 220ms cubic-bezier(.2,.7,.2,1)} .gb-input:hover{border-color:var(--border-strong)} .gb-input:focus{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 30px rgba(201,169,97,.30)} .gb-input::placeholder{color:var(--placeholder);opacity:.6;font-family:var(--serif-display); font-style:italic;font-size:18px} /* ---------- the chip: the core control, single and multi select alike ---------- */ .gb-chip{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:600;font-size:14px; padding:12px 22px;border-radius:999px;cursor:pointer;color:var(--fg-1);background:transparent; border:1px solid var(--border);box-shadow:none;text-align:left; transition:all 150ms cubic-bezier(.2,.7,.2,1)} .gb-chip:hover{border-color:var(--border-strong)} .gb-chip .tick{width:0;overflow:hidden;font-size:13px;line-height:1; transition:width 150ms cubic-bezier(.2,.7,.2,1)} .gb-chip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent); box-shadow:0 0 30px rgba(201,169,97,calc(.45 * var(--cta-glow)));transform:translateY(-1px)} .gb-chip.on .tick{width:13px} .gb-chip.dense{font-size:13px;padding:10px 18px;gap:7px} .gb-chip.dense.on .tick{width:12px} .gb-chip.wide{padding:12px 34px} .gb-chiprow{display:flex;flex-wrap:wrap;gap:10px} .gb-chipcol{display:grid;justify-items:start;gap:10px} /* ---------- form screen ---------- */ .gb-screen{position:relative;min-height:calc(100vh - 90px);display:grid;align-items:center; padding:20px 24px 80px} .gb-col{width:100%;max-width:700px;margin:0 auto} .gb-rise{animation:gb-rise 380ms cubic-bezier(.16,1,.3,1) both;display:grid;gap:26px} .gb-block{display:grid;gap:24px} .gb-sub{display:grid;gap:14px;border-top:1px solid var(--border);padding-top:26px} .gb-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px} .gb-foot .spacer{flex:1} /* ---------- cards ---------- */ .gb-card{border:1px solid var(--border);border-radius:24px;padding:24px 26px; box-shadow:var(--inner-hairline)} .gb-card.strong{border-color:var(--border-strong)} .gb-card.gold{border:1px solid var(--accent);border-radius:28px;padding:38px 34px; display:grid;justify-items:center;gap:16px;text-align:center; box-shadow:0 14px 48px rgba(201,169,97,calc(.22 * var(--cta-glow))),inset 0 1px 0 rgba(201,169,97,.2)} /* ---------- speed test ---------- */ .gb-speed{display:grid;gap:16px} .gb-speed.done{border-color:var(--accent); box-shadow:0 0 34px rgba(201,169,97,calc(.24 * var(--cta-glow))),inset 0 1px 0 rgba(201,169,97,.16)} /* Cormorant's default digits are old-style, so "11.8" renders as two short strokes and reads like a letter. A number an applicant is being judged on has to be legible, so the readout and the review values ask the same face for its LINING figures. Same font, same size, same colour — only the numeral shape. */ .gb-speed-read{font-family:var(--serif-display);font-size:48px;line-height:1;color:var(--fg-1); font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'lnum' 1,'tnum' 1} .gb-speed.done .gb-speed-read{color:var(--accent)} .gb-speed-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} .gb-bar{height:4px;border-radius:999px;background:var(--border);overflow:hidden} .gb-bar>span{display:block;height:100%;width:0;border-radius:999px;background:var(--accent); box-shadow:0 0 14px rgba(201,169,97,.7);transition:width 260ms linear} /* ---------- résumé dropzone ---------- */ .gb-drop{display:grid;justify-items:center;gap:8px;border:1px dashed var(--border-strong); border-radius:24px;padding:34px;cursor:pointer;text-align:center; transition:background 140ms,border-color 140ms} .gb-drop:hover,.gb-drop.over{background:var(--wash);border-color:var(--accent)} .gb-drop .lbl{font-family:var(--serif-display);font-size:24px;color:var(--accent)} .gb-drop .sub{font-size:13px} .gb-drop input[type=file]{display:none} /* ---------- recorder ---------- */ .gb-rec{position:relative;border:1px solid var(--border-strong);border-radius:24px;overflow:hidden; background:#000;aspect-ratio:16/9} .gb-rec.has{border-color:var(--accent)} .gb-rec.live{box-shadow:0 0 34px rgba(201,169,97,calc(.26 * var(--cta-glow)))} .gb-rec video{display:block;width:100%;height:100%;object-fit:cover;background:#000} .gb-rec-idle{position:absolute;inset:0;display:grid;place-items:center;gap:18px; align-content:center;justify-items:center;color:var(--white)} .gb-rec-ring{width:64px;height:64px;border-radius:999px;border:1px solid var(--accent); display:grid;place-items:center} .gb-rec-ring i{display:block;width:20px;height:20px;border-radius:999px;background:var(--accent)} .gb-rec-badge{position:absolute;top:16px;left:16px;display:flex;align-items:center;gap:9px; background:rgba(0,0,0,.55);border:1px solid var(--accent);border-radius:999px;padding:8px 16px} /* The single sanctioned non-mono colour in the system: universal record semantics. */ .gb-rec-badge .dot{width:9px;height:9px;border-radius:999px;background:#e5484d; animation:gb-blink 1.1s ease-in-out infinite} .gb-rec-badge .t{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.08em; color:var(--white);font-variant-numeric:tabular-nums} .gb-rec-bar{height:3px;background:var(--border);margin-top:10px;border-radius:999px;overflow:hidden} .gb-rec-bar>span{display:block;height:100%;width:0;background:var(--accent); box-shadow:0 0 12px rgba(201,169,97,.7);transition:width 900ms linear} /* ---------- review ---------- */ .gb-review{border:1px solid var(--border);border-radius:24px;padding:8px 28px;box-shadow:var(--inner-hairline)} /* THE THREE ASSISTANT VIDEOS (2026-08-25). Named gb-vrev, not gb-rev, because .gb-review already exists a few characters away and a class name that nearly collides fails silently - it decorates the wrong thing and nothing errors. */ .gb-vrevrow{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;width:100%} .gb-vrev{margin:0;display:grid;gap:12px} .gb-vrev-frame{position:relative;aspect-ratio:16/9;border:1px solid var(--border);border-radius:20px; overflow:hidden;background:#000} .gb-vrev-frame video{width:100%;height:100%;object-fit:cover;display:block} .gb-vrev-play{position:absolute;inset:0;display:grid;place-items:center;border:0;padding:0; background:rgba(0,0,0,.30);cursor:pointer;transition:background 140ms cubic-bezier(.2,.7,.2,1)} .gb-vrev-play:hover{background:rgba(0,0,0,.16)} .gb-vrev-play .tri{display:block;width:0;height:0;margin-left:5px; border-left:19px solid var(--accent-ink);border-top:12px solid transparent;border-bottom:12px solid transparent} .gb-vrev-play::before{content:'';position:absolute;width:56px;height:56px;border-radius:999px;background:var(--accent)} .gb-vrev-play .tri{position:relative} /* NOT a grid: as one, the became its own row and every card read "Marcel" / "· Guatemala City" on two lines. The name and the place are one line. */ .gb-vrev figcaption{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.02em; color:var(--fg-1);text-align:left;line-height:1.45} .gb-vrev figcaption span{display:block;margin-top:3px;font-weight:400;font-size:13px;color:var(--fg-2); opacity:.78;font-family:var(--serif-display);font-style:italic;letter-spacing:0} @media (max-width:720px){ .gb-vrevrow{grid-template-columns:1fr;gap:26px} } .gb-rrow{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:15px 0; border-bottom:1px solid var(--border)} .gb-rrow:last-child{border-bottom-color:transparent} .gb-rrow .k{font-family:var(--sans);font-weight:600;font-size:13px;white-space:nowrap} .gb-rrow .v{font-family:var(--serif-display);font-size:19px;text-align:right; font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1} /* ---------- terminal screens ---------- */ .gb-terminal{position:relative;padding:40px 24px 90px;display:grid;justify-items:center;text-align:center} .gb-terminal .gb-hero-halo{top:6%;height:480px} .gb-tcol{position:relative;max-width:660px;display:grid;justify-items:center;gap:20px} /* ---------- a message the applicant can act on ---------- */ .gb-alert{border:1px solid var(--accent);border-radius:24px;padding:18px 24px; display:grid;gap:6px;text-align:left;box-shadow:var(--inner-hairline)} .gb-alert .h{font-family:var(--sans);font-weight:600;font-size:14px} .gb-alert .b{font-size:14px;line-height:1.6} /* ---------- honeypot: present for a script, invisible and unreachable for a human ---------- */ .gb-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none} /* ---------- responsive ---------- */ @media (max-width:520px){ .gb-grid2{grid-template-columns:1fr !important} .gb-title{font-size:clamp(28px,8vw,38px) !important} .gb-speed-read{font-size:38px} .gb-foot{gap:10px} .gb-btn.lg{padding:16px 30px;font-size:15px} } @media (prefers-reduced-motion:reduce){ .gb-hero-halo,.gb-cta-halo,.gb-rise,.gb-rec-badge .dot{animation:none} .gb-rail-fill,.gb-bar>span,.gb-rec-bar>span,.gb-chip{transition:none} }