/* ============================================================ 0. FONT FACES These were missing. The five subset .woff2 files shipped, two of them were preloaded in , and nothing declared them — so document.fonts.size was 0, Chromium warned that both preloads went unused, and the whole page rendered in Segoe UI and Arial rather than Sora and Roboto. Sorted first so the faces are declared before any rule that uses them. All five weights have a real user: Sora 400 .t-display / .t-h2 / .t-h3 / .t-stat / .rc-fig Sora 500 .rc-num Sora 600 .t-h4 / .t-h5 Roboto 400 body Roboto 500 --fw-medium, throughout the product-UI mocks font-display:swap, not optional: both above-fold faces are preloaded, so the swap window is short enough that `optional` would risk discarding a font that is already in flight. The ../fonts/ paths resolve against the stylesheet, not the document, so they hold for pages at any depth — assets/css/ -> assets/fonts/ whether the page is / or /get-started/. They would break only if the CSS were ever inlined into the HTML, which build.mjs does not do. ============================================================ */ @font-face{ font-family:Sora; src:url(../fonts/sora-400.woff2) format('woff2'); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:Sora; src:url(../fonts/sora-500.woff2) format('woff2'); font-weight:500;font-style:normal;font-display:swap; } @font-face{ font-family:Sora; src:url(../fonts/sora-600.woff2) format('woff2'); font-weight:600;font-style:normal;font-display:swap; } @font-face{ font-family:Roboto; src:url(../fonts/roboto-400.woff2) format('woff2'); font-weight:400;font-style:normal;font-display:swap; } @font-face{ font-family:Roboto; src:url(../fonts/roboto-500.woff2) format('woff2'); font-weight:500;font-style:normal;font-display:swap; } /* ============================================================ 1. TOKENS Every colour, size, rhythm and radius on the page resolves to one of these. Nothing below this block should contain a raw hex value or a magic pixel number. Consolidated from the first build: 68 hex + 16 rgba colours, 20 font sizes, 21 line-heights and 12 radii. ============================================================ */ :root{ /* ---- brand ------------------------------------------------ */ --navy:#12243F; --teal-rgb:45 187 164; /* channels, so alpha variants stay in sync */ --teal:rgb(var(--teal-rgb)); --teal-hover:#33C9B0; /* was #2FC5AC — a 2-unit shift no eye could see */ --teal-soft:color-mix(in srgb, var(--teal) 55%, #fff); /* disabled submit */ /* shadows derive from the brand navy. The first build shadowed with rgb(16,29,49), which was never the brand colour. */ --shadow-rgb:18 36 63; --shadow-card:0 18px 40px rgb(var(--shadow-rgb)/.18), 0 2px 6px rgb(var(--shadow-rgb)/.08); --shadow-panel:0 14px 30px rgb(var(--shadow-rgb)/.20), 0 2px 5px rgb(var(--shadow-rgb)/.09); --shadow-thumb:0 1px 5px rgb(var(--shadow-rgb)/.30); /* ---- page neutrals (warm) --------------------------------- A 6-step ramp replacing 12 near-identical warm greys. --ink-3 is the contrast-corrected stand-in for the old --muted (#B8B6B4, 2.02:1 on white) and --ph (#A2A2A2). */ --ink:#222B27; /* 14.6:1 on white */ --ink-2:#5F5D5B; /* 6.6:1 — merges --sub + --body */ --ink-3:#747270; /* 4.5:1 — AA floor for small text on light */ --line:#E4E3E1; /* hairlines, tracks */ --line-2:#D9D8D6; /* button + control borders */ --surface:#F6F8FB; /* tinted section background */ --surface-2:#EFEFEE; /* white-button hover */ /* ---- on dark ---------------------------------------------- White at eight different alphas was doing the work of three text tiers in the first build (.5 / .6 / .7 / .85 all appeared). Named tiers, collapsed to three, plus one rule and one scrim. */ --on-navy:#fff; --on-navy-2:#B8B6B4; /* 7.7:1 on navy — already passing, kept as designed */ --on-navy-3:rgb(255 255 255/.85); --on-navy-4:rgb(255 255 255/.6); --on-navy-dim:rgb(255 255 255/.4); /* the de-emphasised clause in the trial headline */ --rule-navy:rgb(255 255 255/.12); --scrim:rgb(255 255 255/.92); /* mobile drawer */ --glass:rgb(255 255 255/.7); /* the frosted nav bar */ --navy-soft:#5B6B82; /* navy-tinted small text on light, 5.4:1 */ /* navy tints for hover and glass fills */ --navy-05:rgb(18 36 63/.06); --navy-10:rgb(18 36 63/.1); /* ---- product-UI neutrals (cool) --------------------------- The mock product screenshots are a deliberately separate surface, so they keep their own cool ramp — but 24 greys collapse to 7. */ --ui-ink:#1B2536; --ui-ink-2:#475467; --ui-ink-3:#667085; /* 5.0:1 — also absorbs the old #98A2B3 micro-labels */ --ui-line:#E5E9F0; /* visible borders */ --ui-line-2:#F0F3F7; /* row dividers */ --ui-fill:#F5F7FB; /* inset fills, chips */ --ui-fill-2:#FAFBFD; /* card footers */ --ui-hairline:#B6BECD; /* decorative only (flow arrows), never text */ /* ---- status ---------------------------------------------- */ --ok:#1B7A55; --ok-bg:#E9F7F1; --bad:#C2461E; --bad-bg:#FEF0EC; --warn:#986810; --warn-bg:#FEF6E7; --info:#2C5BB8; --info-bg:#EDF2FE; --ring-ok:color-mix(in srgb, var(--ok) 22%, #fff); --ring-bad:color-mix(in srgb, var(--bad) 26%, #fff); --ring-info:color-mix(in srgb, var(--info) 22%, #fff); /* ---- categorical avatar accents --------------------------- Identity colours for the mock people and sources. This is a legitimate categorical set, not colour drift — but the two near-identical blues merged and three strays folded in. */ --av-green:#25D366; /* WhatsApp — carries meaning */ --av-blue:#3B82F6; --av-orange:#F97316; --av-red:#EF4444; --av-amber:#F59E0B; --av-violet:#8B5CF6; --photo-bg:#DED9D2; /* ---- type ------------------------------------------------ Fluid from 360px to the 1440px design canvas. The vw term is the design size / 14.4, so every step lands on its exact design value at 1440. */ --font-display:Sora,"Segoe UI",-apple-system,sans-serif; --font-text:Roboto,-apple-system,"Helvetica Neue",Arial,sans-serif; --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace; --fs-display:clamp(36px, 1.11rem + 3.19vw, 64px); --fs-stat:clamp(34px, 1.29rem + 2.01vw, 48px); --fs-h2:clamp(27px, 1.24rem + 1.51vw, 40px); --fs-h3:clamp(24px, 1.28rem + 1.01vw, 32px); --fs-h4:clamp(20px, 1.15rem + 0.5vw, 24px); --fs-h5:clamp(18px, 1.02rem + 0.25vw, 20px); --fs-base:16px; --fs-sm:14px; --fs-xs:12px; --fs-2xs:11px; --fs-3xs:10px; /* line-heights are ratios now. The old build wrote these out as absolutes — and 30.24 / 25.2 / 60.48 were all just 1.26 x their font size, which is why they had decimals. */ --lh-tight:1.16; /* display */ --lh-head:1.2; /* section headings — was 46.6 / 48 / 50 for one size */ --lh-snug:1.26; /* h4, h5, stat numerals */ --lh-body:1.43; /* 14/20 */ --lh-dense:1.27; /* 10-11px data rows in the mock product UI */ --lh-normal:1.5; /* 16/24, 12/18, 10/15 */ --lh-flat:1; --fw-regular:400; --fw-medium:500; --fw-semibold:600; /* ---- rhythm ---------------------------------------------- 4px scale. Replaces the sub-pixel Figma exports (49.53, 48.47, 33.18, 23.29, 15.87, 9.71 ...). */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px; --s-11:80px; --s-12:96px; /* section padding + gutters, fluid */ --gutter:clamp(20px, 8.33vw, 120px); --shell:1200px; /* ---- radii (12 -> 6) ------------------------------------- */ --r-1:2px; --r-2:4px; --r-3:6px; --r-4:8px; --r-5:12px; --r-pill:999px; /* ---- motion --------------------------------------------- */ --dur-fast:.18s; --dur:.22s; --dur-slow:.3s; --ease:cubic-bezier(.4,0,.2,1); --step-ms:7000ms; } /* ---- On the warm/cool split ------------------------------- The page ramp is warm and the mock product UI's is cool. I built a unified-ramp variant to compare: across the whole page it changed 0.24% of pixels and saved four hex values, because the product UI still needs its own fill and border steps even when its text tiers alias to the page ramp. Not worth losing the "this is a different surface" read, so the split stays. To try it anyway, point the eight --ui-* tokens at their page equivalents (--ui-ink: var(--ink), and so on). ------------------------------------------------------------ */ /* ============================================================ 2. BASE + RESET ============================================================ */ *,*::before,*::after{box-sizing:border-box} html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } body{ margin:0; background:#fff; color:var(--ink); font-family:var(--font-text); font-size:var(--fs-base); line-height:var(--lh-normal); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:hidden; /* belt-and-braces against a stray wide child */ } h1,h2,h3,h4,h5,h6,p,ul,ol,figure,fieldset{ margin:0;padding:0;font-weight:inherit;font-size:inherit;line-height:inherit } fieldset{border:0;min-width:0} ul,ol{list-style:none} img,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} :where(input,select,textarea){font:inherit;color:inherit} /* visually hidden but readable by assistive tech */ .sr{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0 } :focus-visible{outline:2px solid var(--teal);outline-offset:3px} :focus:not(:focus-visible){outline:none} /* ============================================================ 3. TYPE One class per role. The first build had .d2 / .d2a / .d2b — three 40px styles differing only in line-height (46.6 / 48 / 50) — plus .h5 duplicated verbatim as `.form h3`, and a 62px display that was really the 64px one. ============================================================ */ .t-display,.t-h2,.t-h3,.t-h4,.t-h5,.t-stat{ font-family:var(--font-display); text-wrap:pretty; } .t-display{font-size:var(--fs-display);line-height:var(--lh-tight);letter-spacing:-.012em;font-weight:var(--fw-regular)} .t-h2 {font-size:var(--fs-h2);line-height:var(--lh-head);letter-spacing:-.005em;font-weight:var(--fw-regular)} .t-h3 {font-size:var(--fs-h3);line-height:var(--lh-snug);letter-spacing:-.005em;font-weight:var(--fw-regular)} .t-h4 {font-size:var(--fs-h4);line-height:var(--lh-snug);font-weight:var(--fw-semibold)} .t-h5 {font-size:var(--fs-h5);line-height:var(--lh-snug);font-weight:var(--fw-semibold)} .t-stat {font-size:var(--fs-stat);line-height:var(--lh-snug);font-weight:var(--fw-regular);color:var(--teal)} .t-lead {font-size:var(--fs-base);line-height:var(--lh-normal);color:var(--ink-2)} .t-xs {font-size:var(--fs-xs);line-height:var(--lh-body)} /* .t-3xs is gone with the centred footer copyright line — its only user. --fs-3xs is still live, via .ftr-legal. */ /* tabular figures for anything that animates between values */ .tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} /* A designed line break. Applies at the widths the comp was drawn for and collapses below, so copy reflows instead of being pinned by
+ white-space:nowrap (the first build had 20 hard breaks and 32 nowraps). */ @media (max-width:1023px){ br.wbr{display:none} } /* ============================================================ 4. LAYOUT PRIMITIVES The first build placed every element with position:absolute on a 1440x6266 canvas and gave each section a hardcoded height. Everything here is in flow: sections size to their content and the shell narrows with the viewport. ============================================================ */ .shell{ width:min(var(--shell), 100% - var(--gutter) * 2); margin-inline:auto; } .sec{position:relative} /* stack with a rhythm token, no absolute tops. Items stretch by default; anything that should shrink-wrap centres itself. */ .stack{display:flex;flex-direction:column} .center{text-align:center} .center>.hero-shot{align-self:center} /* Measure caps apply only once the designed
breaks have collapsed. At desktop the wbr breaks own the line endings, so a cap here would only force copy to wrap earlier than the comp. */ .measure-xl,.measure-lg,.measure-md{margin-inline:auto} @media (max-width:1023px){ .measure-xl{max-width:640px} .measure-lg{max-width:620px} .measure-md{max-width:520px} } /* cards and forms carry their own alignment, so a centred section heading does not leak into their labels */ .ccard,.form,.pcard,.mk,.pc-ui,.steps{text-align:left} .rule{height:1px;background:var(--rule-navy);border:0} /* ============================================================ 5. COMPONENTS Each component is declared once, here — including its hover and focus states. The first build declared .inp, .segs, .seg, .tab, .step-idle, .rc-foot and .pcard-img twice, because it was organised by authoring pass (a layout pass, then an "interaction layer" pass) rather than by component. ============================================================ */ /* ---------------- buttons ---------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center; flex:none;border-radius:var(--r-4); font-size:var(--fs-sm);line-height:var(--lh-flat); color:var(--ink);text-align:center; transition:background-color var(--dur) ease,border-color var(--dur) ease; } .btn--solid{background:var(--teal)} .btn--solid:hover{background-color:var(--teal-hover)} .btn--ghost{background:#fff;border:1px solid var(--line-2)} .btn--ghost:hover{background-color:var(--surface-2)} .btn--lg{height:48px;padding-inline:var(--s-6)} .btn--md{height:40px;padding-inline:var(--s-5)} .btn--sm{height:32px;padding-inline:var(--s-4)} /* the comp gives the primary CTA visibly more room than the secondary even where its label is shorter; encoded as a rule rather than as the two hardcoded widths (152px / 172px) it was drawn with */ .btn--solid.btn--lg{padding-inline:var(--s-7)} .btn--solid.btn--md{padding-inline:var(--s-6)} /* masked label: the second copy sits below and both slide up on hover. Built by JS; the CSS just clips. */ .mt{position:relative;display:block;overflow:hidden} .mt>span{display:block} .mt>span+span{position:absolute;inset:100% 0 auto 0} /* ---------------- nav ---------------- */ .nav{ position:fixed;top:12px;left:0;right:0;z-index:100; pointer-events:none; } .nav-inner{ position:relative; width:min(var(--shell), 100% - var(--gutter) * 2); min-height:48px;margin-inline:auto; border-radius:var(--r-4); background:var(--on-navy-3); -webkit-backdrop-filter:blur(7.5px);backdrop-filter:blur(7.5px); pointer-events:auto; display:flex;align-items:center; padding-inline:var(--s-6); gap:var(--s-4); } .nav-logo{flex:none;display:flex;align-items:center} .nav-links{ display:flex;align-items:center;gap:30px; margin-inline:auto; } .nav-links a{ font-size:var(--fs-xs);color:var(--ink); padding-block:var(--s-3); transition:color var(--dur-fast) ease; } .nav-links a:hover{color:var(--teal)} .nav-actions{flex:none;display:flex;align-items:center;gap:var(--s-3);margin-left:auto} .nav-cta{height:32px;padding-inline:var(--s-4)} .nav-demo{height:32px;padding-inline:var(--s-4)} /* mobile drawer trigger — no equivalent exists in the 1440 comp */ .nav-burger{ display:none;flex:none;width:36px;height:36px;margin-left:auto; border-radius:var(--r-3);align-items:center;justify-content:center; } .nav-burger:hover{background:var(--navy-05)} .nav-burger span{ display:block;width:17px;height:1.5px;background:var(--ink);border-radius:var(--r-pill); transition:transform var(--dur) var(--ease),opacity var(--dur-fast) ease; } .nav-burger span+span{margin-top:4px} [aria-expanded="true"] .l1{transform:translateY(5.5px) rotate(45deg)} [aria-expanded="true"] .l2{opacity:0} [aria-expanded="true"] .l3{transform:translateY(-5.5px) rotate(-45deg)} /* ---------------- tabs ---------------- */ .tabs{ display:inline-flex;align-items:center;gap:0; height:50px;padding:6px;border-radius:var(--r-4); background:var(--surface);border:1px solid var(--line); } .tab{ height:38px;padding:0 17.5px;border-radius:var(--r-3); font-size:var(--fs-sm);line-height:var(--lh-flat);color:var(--ink-2); white-space:nowrap; display:flex;align-items:center;justify-content:center; transition:background-color var(--dur-fast),color var(--dur-fast); } .tab[aria-selected="true"]{background:var(--navy);color:#fff} .tab:not([aria-selected="true"]):hover{background:var(--navy-05);color:var(--navy)} /* ---------------- segmented control ---------------- */ .segs{ position:relative;display:flex; height:51px;padding:6px;border-radius:var(--r-4); background:var(--surface);border:1px solid var(--line); } .segs .chip{ position:absolute;left:6px;top:6px;height:39px; border-radius:var(--r-3);background:var(--navy); transition:transform var(--dur-slow) var(--ease),width var(--dur-slow) var(--ease); } .seg{ position:relative;z-index:1;flex:1;height:39px; border-radius:var(--r-3); font-size:var(--fs-sm);line-height:var(--lh-flat);color:var(--ink-2); display:flex;align-items:center;justify-content:center; transition:color var(--dur) ease; } .seg[aria-checked="true"]{color:#fff} .seg:not([aria-checked="true"]):hover{color:var(--navy)} /* ---------------- range slider ---------------- */ .slider{position:relative;height:6px} .slider .track{ position:absolute;inset:0;border-radius:var(--r-pill); background:var(--ui-line);overflow:hidden; } .slider .track i{ display:block;height:100%;border-radius:var(--r-pill);background:var(--teal); transform-origin:left center; } .slider input{ -webkit-appearance:none;appearance:none; position:absolute;left:0;top:-8px;width:100%;height:22px; margin:0;padding:0;background:transparent;cursor:ew-resize; } .slider input::-webkit-slider-runnable-track{height:22px;background:transparent} .slider input::-webkit-slider-thumb{ -webkit-appearance:none;width:16px;height:16px;margin-top:3px; border-radius:50%;background:#fff;border:2px solid var(--teal); box-shadow:var(--shadow-thumb);opacity:0;transition:opacity var(--dur-fast) ease; } .slider input::-moz-range-thumb{ width:16px;height:16px;border-radius:50%;background:#fff; border:2px solid var(--teal);box-shadow:var(--shadow-thumb); opacity:0;transition:opacity var(--dur-fast) ease; } .slider:hover input::-webkit-slider-thumb, .slider input:focus-visible::-webkit-slider-thumb, .slider input:active::-webkit-slider-thumb{opacity:1} .slider:hover input::-moz-range-thumb, .slider input:focus-visible::-moz-range-thumb, .slider input:active::-moz-range-thumb{opacity:1} .slider input:focus-visible{outline:2px solid var(--teal);outline-offset:5px;border-radius:var(--r-2)} /* the thumb is invisible until hover, so on touch — where there is no hover — show it permanently */ @media (hover:none){ .slider input::-webkit-slider-thumb{opacity:1} .slider input::-moz-range-thumb{opacity:1} } /* ---------------- form field ---------------- */ .inp{ position:relative;display:flex;align-items:center; height:43px;padding:0 13px; border-radius:var(--r-4); background:var(--surface);border:1px solid var(--line); transition:border-color var(--dur-fast) ease,box-shadow var(--dur-fast) ease,background-color var(--dur-fast) ease; } .inp:hover{border-color:var(--line-2)} .inp:focus-within{ border-color:var(--teal);background-color:#fff; box-shadow:0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent); } .inp.err{border-color:var(--bad);box-shadow:0 0 0 3px color-mix(in srgb, var(--bad) 15%, transparent)} .inp input,.inp select{ flex:1;width:100%;min-width:0;height:41px;margin:0;padding:0; border:0;background:transparent; font-size:var(--fs-sm);color:var(--ink); } .inp input:focus,.inp select:focus{outline:none} .inp input::placeholder{color:var(--ink-3);opacity:1} .inp select{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:26px} .inp select[data-empty="1"]{color:var(--ink-3)} .inp .chev{position:absolute;right:13px;top:50%;transform:translateY(-50%);pointer-events:none} /* ---------------- paired fields ---------------- Two fields per row. The vertical rhythm still lives on the label, so a .ffield needs no margin of its own and paired labels line up across the row for free. Collapses to one column at 480 — a 43px input in a 130px column stops being a field. */ .fpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-4)} .ffield{min-width:0} /* ---------------- phone, with a fixed +91 ---------------- No country-code select: this is an India-only product, and the number is validated as a 10-digit Indian mobile. A dropdown of 200 dial codes would be dead weight on the one field people abandon forms over. */ .inp--tel{padding-left:0} .tel-cc{ flex:none;align-self:stretch;display:flex;align-items:center; padding:0 10px 0 13px;margin-right:10px; border-right:1px solid var(--line); font-size:var(--fs-sm);color:var(--ink-3); transition:border-color var(--dur-fast) ease; } .inp--tel:focus-within .tel-cc{border-right-color:var(--teal)} /* ---------------- textarea ---------------- */ .inp--area{height:auto;padding:10px 13px;align-items:flex-start} .inp--area textarea{ flex:1;width:100%;min-width:0;margin:0;padding:0; border:0;background:transparent;resize:vertical; font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--ink); } .inp--area textarea:focus{outline:none} .inp--area textarea::placeholder{color:var(--ink-3);opacity:1} /* ---------------- checkbox ---------------- The native box is kept in the accessibility tree and driven visually by the adjacent span, so :checked and :focus-visible still do the work. */ .chk{display:flex;align-items:flex-start;gap:10px;cursor:pointer} .chk input{position:absolute;width:1px;height:1px;opacity:0;margin:0} .chk-bx{ /* display is explicit so the box survives being dropped into a label that some later rule has turned back into a block */ flex:none;display:block;position:relative;width:18px;height:18px;margin-top:1px; border:1px solid var(--line-2);border-radius:var(--r-2); background:var(--surface); transition:background-color var(--dur-fast) ease,border-color var(--dur-fast) ease; } .chk-bx::after{ content:"";position:absolute;left:5px;top:2px; width:5px;height:9px; border:solid #fff;border-width:0 2px 2px 0; transform:rotate(45deg) scale(0); transition:transform var(--dur-fast) var(--ease); } .chk:hover .chk-bx{border-color:var(--teal)} .chk input:checked + .chk-bx{background:var(--teal);border-color:var(--teal)} .chk input:checked + .chk-bx::after{transform:rotate(45deg) scale(1)} .chk input:focus-visible + .chk-bx{outline:2px solid var(--teal);outline-offset:3px} .chk-tx{font-size:var(--fs-sm);line-height:var(--lh-body)} /* ---------------- optional-note disclosure ---------------- */ .note-tog{ display:inline-flex;align-items:baseline;gap:7px; font-size:var(--fs-sm);line-height:var(--lh-body); font-weight:var(--fw-medium);color:var(--teal); transition:color var(--dur-fast) ease; } .note-tog::before{content:"+";display:inline-block;width:.7em;text-align:center} .note-tog[aria-expanded="true"]::before{content:"–"} .note-tog:hover{color:var(--teal-hover)} /* ---------------- timezone footnote ---------------- */ .tz{margin-top:var(--s-2);font-size:var(--fs-xs);line-height:var(--lh-body);color:var(--ink-3)} /* ---------------- slot picker ---------------- Two renderings of one dataset (src/js/07-slots.js): these chips on /get-started, and two plain selects in the 500px homepage card. */ .slot-lg{ font-size:var(--fs-sm);line-height:var(--lh-body); font-weight:var(--fw-medium);color:var(--navy); } /* a scrolling strip, not a wrapping grid: ten weekdays wrap into a ragged second row at most widths, and horizontal scroll keeps "there are more dates this way" legible */ .slot-days{ display:flex;gap:var(--s-2); margin-top:10px;padding-bottom:var(--s-2); overflow-x:auto;scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none;-ms-overflow-style:none; } .slot-days::-webkit-scrollbar{display:none} /* Fade whichever edge still has dates behind it, so a chip cut off at the card's padding reads as "keep scrolling" instead of as a broken layout. Driven from JS rather than a static gradient, so the last chip is not left permanently dimmed once you reach the end. */ .slot-days.has-more{ -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 32px),transparent); } .slot-days.has-less{ -webkit-mask-image:linear-gradient(to right,transparent,#000 32px); mask-image:linear-gradient(to right,transparent,#000 32px); } .slot-days.has-less.has-more{ -webkit-mask-image:linear-gradient(to right,transparent,#000 32px,#000 calc(100% - 32px),transparent); mask-image:linear-gradient(to right,transparent,#000 32px,#000 calc(100% - 32px),transparent); } .slot-day{ flex:none;width:58px;padding:8px 0 9px; display:flex;flex-direction:column;align-items:center;gap:1px; border:1px solid var(--line);border-radius:var(--r-4); background:var(--surface);scroll-snap-align:start; transition:border-color var(--dur-fast) ease,background-color var(--dur-fast) ease,color var(--dur-fast) ease; } .slot-day:hover{border-color:var(--line-2);background:#fff} .slot-day[aria-checked="true"]{background:var(--navy);border-color:var(--navy);color:#fff} .sd-dow,.sd-mon{font-size:var(--fs-2xs);line-height:var(--lh-flat);color:var(--ink-3)} .sd-dom{ font-family:var(--font-display);font-size:var(--fs-h5); line-height:var(--lh-snug);font-weight:var(--fw-medium); } .slot-day[aria-checked="true"] .sd-dow, .slot-day[aria-checked="true"] .sd-mon{color:var(--on-navy-4)} /* times appear only once a date exists, so nobody picks 3pm on no particular day */ .slot-times{display:none;margin-top:var(--s-4)} .slot-times[data-live]{display:block} .slot-group + .slot-group{margin-top:var(--s-3)} .slot-period{font-size:var(--fs-xs);line-height:var(--lh-body);color:var(--ink-3)} .slot-grid{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s-2);margin-top:var(--s-2); } .slot-time{ height:36px;padding:0 2px; border:1px solid var(--line);border-radius:var(--r-4); background:var(--surface); font-size:var(--fs-xs);line-height:var(--lh-flat); font-variant-numeric:tabular-nums; transition:border-color var(--dur-fast) ease,background-color var(--dur-fast) ease,color var(--dur-fast) ease; } .slot-time:hover{border-color:var(--line-2);background:#fff} .slot-time[aria-checked="true"]{background:var(--teal);border-color:var(--teal);color:#fff} /* the form's .note carries the message; the legend just has to catch the eye */ .slot.err .slot-lg{color:var(--bad)} /* ---------------- mobile drawer ---------------- Not in the 1440 comp — there was no mobile comp to match. Built restrained and on-brand; treat it as a proposal to redesign. */ .drawer{ position:absolute;top:calc(100% + 8px);left:0;right:0; border-radius:var(--r-4); background:var(--scrim); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); border:1px solid var(--line); box-shadow:var(--shadow-panel); padding:var(--s-2); display:none; } .drawer[data-open]{display:block} .drawer a{ display:flex;align-items:center;min-height:44px; padding-inline:var(--s-3);border-radius:var(--r-3); font-size:var(--fs-sm);color:var(--ink); } .drawer a:hover{background:var(--surface)} .drawer hr{margin:var(--s-2) var(--s-3);border:0;border-top:1px solid var(--line)} .drawer .btn{width:100%;margin-top:var(--s-1)} @media (min-width:1024px){ .drawer{display:none !important} } @media (prefers-reduced-motion:no-preference){ .drawer[data-open]{animation:drawer-in var(--dur) var(--ease) both} @keyframes drawer-in{from{opacity:0;transform:translateY(-6px)}} } /* ============================================================ 6. SECTIONS Vertical rhythm comes from padding and margins, so each section sizes to its content. The comments record the design-canvas offset each value reproduces at 1440. ============================================================ */ /* ============ HERO ============ */ .hero{background:var(--surface);padding-top:138px;overflow:hidden} .hero-title{margin-top:0} /* the accent word in the headline */ .hero-title em{font-style:normal;color:var(--teal)} .hero-sub{margin-top:25px;color:var(--ink-2)}/* -> 371.5 */ .hero-actions{ display:flex;flex-wrap:wrap;justify-content:center;gap:10.5px; margin-top:23px; /* -> 442.5 */ } .hero-shot{ margin-top:48px; /* -> 538.5 */ width:min(922px, 100%); aspect-ratio:922 / 462; border-radius:var(--r-4);overflow:hidden; } .hero-shot img{width:100%;height:auto;border-radius:var(--r-4)} /* ============ TAILORED WORKFLOWS ============ */ .tw{background:#fff;padding:60px 0 60px} .tw .lead{margin-top:15px} /* -> 123 */ .tw .tabs-wrap{ margin-top:16px; /* -> 187 */ /* The strip is 594px wide and does not shrink, so this is a scroll container. `safe center` centres it while it fits and falls back to flex-start once it overflows, which keeps the first tab reachable — a plain `center` would scroll it out of reach. */ display:flex;justify-content:center;justify-content:safe center; overflow-x:auto; scrollbar-width:none;-ms-overflow-style:none; } .tw .tabs-wrap::-webkit-scrollbar{display:none} .tw-grid{ margin-top:111px; /* -> 348 */ display:grid; grid-template-columns:minmax(0,491fr) minmax(0,592fr); gap:117px; align-items:start; } .steps{min-width:0} .step{ display:block;width:100%;text-align:left; border-bottom:1px solid var(--line); position:relative;cursor:pointer;outline-offset:3px; } .step-eyebrow{display:block;font-size:var(--fs-base);line-height:var(--lh-normal);color:var(--ink)} .step-title{display:block} .step-body{ display:block;margin-top:19px;max-width:470px; font-size:var(--fs-base);line-height:var(--lh-normal);color:var(--ink-2); } .step-prog{position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--line)} .step-prog i{ display:block;height:1px;width:100%;background:var(--ink); transform:scaleX(0);transform-origin:left center; } /* progress runs on transform, not width — the first build animated `width` for 7s straight, laying out on every frame */ .step-prog i.go{transition:transform var(--step-ms) linear;transform:scaleX(1)} .step--idle{padding:50px 0 16px;transition:opacity var(--dur) ease} .step--idle .step-eyebrow, .step--idle .step-body, .step--idle .step-prog{display:none} .step--idle .step-title{ font-family:var(--font-text);font-weight:var(--fw-regular); font-size:var(--fs-base);line-height:var(--lh-normal); color:var(--ink-3);letter-spacing:0; transition:color var(--dur-fast) ease; } .step--idle:hover .step-title{color:var(--ink-2)} .step--open{padding:27px 0 33px;border-bottom-color:transparent} .step--open .step-title{margin-top:33px} .demo{ position:relative;min-width:0; aspect-ratio:592 / 540; border-radius:var(--r-3); background:var(--surface); border:1px solid var(--line); overflow:hidden; display:grid;place-items:center; } /* the illustration is out of flow: as a grid child it would take its own row and push the mock card out of the clipped box */ .demo-bg,.pcard-bg,.ephoto img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; } .demo-stage{position:relative;width:min(376px, 100% - var(--s-8));min-width:0} /* ============ SCALE OF COMPLIANCE ============ */ .scale{background:var(--navy);color:var(--on-navy);padding:150px 0 123px} .scale .eyebrow{margin-top:7px;color:var(--on-navy-2)} /* -> 205 */ .scale .lede{margin-top:7px;color:var(--on-navy-2)} /* -> 236 */ .stats{ margin-top:56px; /* -> 340 */ display:grid;grid-template-columns:repeat(4,minmax(0,236px)); gap:80px; } .stats .lbl{margin-top:16px;color:var(--on-navy-2)} /* ============ DATA PRIVACY ============ */ .priv{background:var(--surface);padding:96px 0 116px} .priv .lead{margin-top:14px} /* -> 206 */ .pcards{ margin-top:64px; /* -> 318 */ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px; } .pcard{ background:#fff;border:1px solid var(--line); border-radius:var(--r-4);padding:var(--s-6); display:flex;flex-direction:column; } .pcard-hd{display:flex;align-items:flex-start;gap:var(--s-3);min-height:36px} .pcard-ic{ flex:none;display:flex;align-items:center;justify-content:center; width:36px;height:36px;border-radius:var(--r-2);background:var(--teal); } /* the icon is 36px and the title one line at most widths, so the two centre on each other — until the title wraps, when the icon should stay level with the first line rather than sliding down beside it */ .pcard-hd .t-h5{padding-top:calc((36px - 1em * var(--lh-snug)) / 2)} /* The body grows into whatever height the tallest card sets, so the mock UI below it is pinned to the card's bottom edge. Card heights already match — they are grid items, which stretch — but without this the slack collected under the image instead of above it, and a one-line description next to a three-line one left its visual floating 24px higher than its neighbours'. Any width where the headings or the copy wrap differently used to show it. flex-shrink is 0 because the paragraph must never be squeezed below its content; only the surplus is shared. */ .pcard-bd{margin-top:31px;color:var(--ink-2);flex:1 0 auto} .pcard-img{ position:relative;margin-top:48px; /* the minimum gap; surplus lands above it */ aspect-ratio:334 / 238; border-radius:var(--r-3); background:var(--surface); overflow:hidden; } /* ============ CALCULATOR ============ */ .calc{background:#fff;padding:60px 0 33px} .calc .lead{margin-top:18px} /* -> 174 */ .ccards{ margin-top:111px; /* -> 333 */ display:grid;grid-template-columns:minmax(0,519fr) minmax(0,649fr);gap:32px; align-items:stretch; } .ccard{border-radius:var(--r-3);min-width:0} .ccard--in{background:#fff;border:1px solid var(--line);padding:32px 33px} .ccard--out{background:var(--navy);padding:36px;color:#fff} .fld+.fld{margin-top:var(--s-7)} .fld:last-child{margin-top:var(--s-6)} .fld-hd{ display:flex;align-items:baseline;gap:var(--s-3); font-size:var(--fs-sm);line-height:var(--lh-body); font-weight:var(--fw-medium);color:var(--navy); } .fld-hd .val{margin-left:auto;white-space:nowrap} .fld-hd .val b{font-size:var(--fs-base);font-weight:var(--fw-medium);color:var(--navy);margin-right:var(--s-2)} .fld-hd .val em{font-style:normal;font-size:var(--fs-xs);font-weight:var(--fw-regular);color:var(--navy-soft)} .fld-q{margin-top:7px;font-size:var(--fs-sm);line-height:var(--lh-dense);color:var(--navy-soft)} .fld .segs,.fld .slider{margin-top:15px} .rc-eyebrow{font-size:var(--fs-sm);line-height:var(--lh-dense);color:var(--on-navy-4)} .rc-big{ display:flex;align-items:baseline;flex-wrap:wrap;gap:0 14px; margin-top:9px; } .rc-big strong{ font-family:var(--font-display);font-weight:var(--fw-regular); font-size:var(--fs-display);line-height:var(--lh-snug); letter-spacing:-.03em;color:var(--teal); } .rc-big>span{ font-family:var(--font-display);font-weight:var(--fw-medium); font-size:var(--fs-h5);line-height:var(--lh-snug);color:var(--on-navy-3); } .rc-para{margin-top:5px;color:var(--on-navy-3)} .rc-para b{font-weight:var(--fw-medium);color:#fff} .rc-rule{margin-top:30px;height:1px;background:var(--rule-navy)} .rc-rows{margin-top:27px} .rc-row+.rc-row{margin-top:16px} .rc-row .top{ display:flex;align-items:baseline;gap:var(--s-3); font-size:var(--fs-sm);line-height:var(--lh-body);color:var(--on-navy-3); } .rc-row .top span:last-child{margin-left:auto;font-size:var(--fs-sm);color:var(--on-navy-4);white-space:nowrap} .rc-row .bar{margin-top:8px;height:5px;border-radius:var(--r-pill);background:var(--rule-navy);overflow:hidden} .rc-row .bar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--teal)} .rc-foot{ display:flex;align-items:center;gap:var(--s-3); margin-top:28px;padding-top:20px; border-top:1px solid var(--rule-navy); font-size:var(--fs-sm);line-height:var(--lh-dense);font-weight:var(--fw-medium);color:var(--teal); cursor:pointer;width:100%;text-align:left; } .rc-foot img{margin-left:auto} .rc-foot:hover span{text-decoration:underline} /* ============ PLAN ESTIMATE (/get-started) ============ Lives inside the booking form, directly under the firm-size field it reacts to. Deliberately not a section of its own further down the page: an estimate that appears 900px away from the control that produced it is an estimate nobody sees. */ .est{ margin-top:var(--s-5);padding:var(--s-5); border:1px solid var(--line);border-radius:var(--r-3); background:var(--surface); } .est[hidden]{display:none} @media (prefers-reduced-motion:no-preference){ .est{animation:est-in var(--dur-slow) var(--ease) both} @keyframes est-in{from{opacity:0;transform:translateY(-6px)}} } .est-eyebrow{ font-size:var(--fs-xs);line-height:var(--lh-body); font-weight:var(--fw-medium);letter-spacing:.06em;text-transform:uppercase; color:var(--ink-3); } .est-hd{ display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap; margin-top:var(--s-2); } .est-name{ font-family:var(--font-display);font-size:var(--fs-h5); line-height:var(--lh-snug);font-weight:var(--fw-semibold);color:var(--navy); } .est-price{ margin-left:auto;font-variant-numeric:tabular-nums; font-size:var(--fs-base);font-weight:var(--fw-medium);color:var(--teal); white-space:nowrap; } .est-price span{ margin-left:var(--s-1); font-size:var(--fs-xs);font-weight:var(--fw-regular);color:var(--ink-3); } .est-list{ margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--line); display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2) var(--s-5); } .est-list div{display:flex;align-items:baseline;gap:var(--s-2)} .est-list dt{font-size:var(--fs-xs);line-height:var(--lh-body);color:var(--ink-3)} .est-list dd{ margin:0 0 0 auto; font-size:var(--fs-sm);line-height:var(--lh-body); font-weight:var(--fw-medium);color:var(--ink); font-variant-numeric:tabular-nums;white-space:nowrap; } /* the refinement. The firm-size buckets are people and the plans are partners, and 16-40 people spans two tiers — so rather than guess and be quietly wrong by 40,000 rupees, the control that actually decides the tier sits right here, pre-set to the likeliest band. */ .est-fine{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--line)} .form .est-fine label{margin-top:0} .est-help{margin-top:var(--s-2);font-size:var(--fs-xs);line-height:var(--lh-body);color:var(--ink-3)} .est-note{ margin-top:var(--s-4);font-size:var(--fs-xs);line-height:var(--lh-body);color:var(--navy-soft); } .est-note a{color:var(--info);text-decoration:underline;text-underline-offset:2px} .est-note a:hover{color:var(--teal)} /* ============ TRIAL ============ */ .trial{background:var(--navy);color:var(--on-navy);padding:96px 0 100px} .trial-grid{ display:grid;grid-template-columns:minmax(0,1fr) 500px;gap:32px; /* The comp expressed the copy's position as a fixed 86px top offset against a 430px form. The form is ~710px now that it carries a name, a phone, a consent line and a slot, so an absolute offset from the old drawing means nothing — centring keeps the two columns balanced at whatever height the form ends up. */ align-items:center; } .trial-copy h2 em{font-style:normal;color:var(--on-navy-dim)} .trial .lead{margin-top:29px;color:var(--on-navy-2)} /* -> 355 */ .checks{margin-top:28px;display:flex;flex-direction:column;gap:18px} /* -> 407 */ .check{ display:flex;align-items:flex-start;gap:9.5px; font-size:var(--fs-sm);line-height:var(--lh-dense);color:#fff; } .check img{flex:none;margin-top:2px} .form{ background:#fff;border-radius:var(--r-3); padding:33px;color:var(--ink); } /* The Get Started CTAs scroll here. 100px clears the fixed nav (which ends at 60px) with room for the glow ring — and the form settles ~18px higher than it scrolls to, because its own fade-in is still finishing. */ #trial,#trialForm{scroll-margin-top:100px} /* focus lands on the form only to move the reading position; the pulse is the visual cue, and tabbing to the fields still shows their own outline */ .form:focus{outline:none} /* three pulses when a Get Started CTA points at the form */ @keyframes form-glow{ 0%,100%{box-shadow:0 0 0 0 rgb(var(--teal-rgb)/0)} 45% {box-shadow:0 0 0 5px rgb(var(--teal-rgb)/.5), 0 0 30px 8px rgb(var(--teal-rgb)/.3)} } .form.is-glow{animation:form-glow .8s var(--ease) 3} @media (prefers-reduced-motion:reduce){ /* hold a single ring rather than pulsing; the script clears it on a timer */ .form.is-glow{animation:none;box-shadow:0 0 0 4px rgb(var(--teal-rgb)/.45)} } /* the homepage card titles with h3 under the section's h2; /get-started titles with h2 under the page's h1 */ .form h3,.form > h2{margin-bottom:var(--s-6)} .form label{ display:block;margin-top:23px; font-size:var(--fs-sm);line-height:var(--lh-body); font-weight:var(--fw-medium);color:var(--navy); } .form .inp{margin-top:10px} .form .submit{margin-top:23px;width:100%;height:44px} .form .submit[disabled]{background-color:var(--teal-soft);cursor:default} .form .note{margin-top:23px;font-size:var(--fs-xs);line-height:var(--lh-body);color:var(--navy-soft)} .form .note.is-err{color:var(--bad)} .form .note.is-ok{color:var(--ok)} /* ---- fields added in the slot round ---- The 23px label margin supplies the rhythm wherever a label leads, so only the blocks that do not start with one get a margin of their own: the checkbox (its label is styled as a row), the chip picker (its legend is a

), and the disclosure button. */ /* display:flex has to be restated here. `.form label` below sets display:block and outscores the bare `.chk` in 05-components, which left the 18px box rendering as a 2px inline sliver. */ .form .chk{ display:flex;margin-top:var(--s-4); font-weight:var(--fw-regular);color:var(--ink-2); } .form .slot--chips{margin-top:var(--s-6)} .form .note-tog{margin-top:var(--s-5)} .form .note-box{margin-top:var(--s-3)} .form .note-box .inp{margin-top:0} /* ============ EXPERIENCE ============ */ .exp{background:var(--surface);padding:60px 0} .exp-grid{display:grid;grid-template-columns:minmax(0,695fr) minmax(0,493fr);gap:12px} .ecard{ background:#fff;border-radius:var(--r-4); aspect-ratio:695 / 493; /* centred rather than top-padded, so the block stays balanced however many rows it holds — the comp's 148px top and 149px bottom were a centred layout expressed as a fixed padding */ display:flex;flex-direction:column;align-items:center;justify-content:center; padding:var(--s-9) var(--s-6); text-align:center; } .ebtns{display:flex;flex-wrap:wrap;justify-content:center;gap:9.5px;margin-top:24px} .ephoto{ position:relative;aspect-ratio:1;border-radius:var(--r-4); background:var(--photo-bg);overflow:hidden; } /* ============ FOOTER ============ */ .ftr{background:var(--navy);color:var(--on-navy);padding:60px 0 41px} .ftr-top{ /* flex rather than a fixed grid: the brand block absorbs the slack and the link columns keep their content width, so hiding or restoring a column needs no template change and nothing gets crushed as the shell narrows. */ display:flex;flex-wrap:wrap; gap:var(--s-8) clamp(24px, 6vw, 88px); } .ftr-brand{flex:1 1 320px;min-width:0} .fcol{flex:0 0 auto} /* 12px, not the old 10px: the copyright now shares a row with the 14px legal links instead of sitting centred on its own, and 10px against 14px read as a mistake rather than as a hierarchy. */ .ftr-legal{font-size:var(--fs-xs);line-height:var(--lh-normal);color:var(--on-navy-2)} .ftr-blurb{ margin-top:22px;max-width:44ch; font-size:var(--fs-sm);line-height:var(--lh-normal); color:var(--on-navy-2); } .fcol h2{font-size:var(--fs-sm);line-height:var(--lh-body);font-weight:var(--fw-regular);color:var(--on-navy-4)} .fcol ul{margin-top:16px;display:flex;flex-direction:column;gap:17.6px} .fcol li{font-size:var(--fs-sm);line-height:var(--lh-body)} .fcol a{transition:color var(--dur-fast) ease} .fcol a:hover{color:var(--teal)} .fcol--talk ul{margin-top:17px;gap:21px} .fcol--talk li{font-size:var(--fs-sm);line-height:var(--lh-normal)} /* One rule left in the footer, so this can't be :first-of-type any more — :last-of-type matched the same element and won on source order, which would have made it 41px. Plain descendant selector now. */ .ftr .rule{margin-top:39px} /* -> 306 */ .ftr-mid{ display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between; gap:var(--s-5);margin-top:39px; /* -> 345 */ } .fbot-links{ display:flex;align-items:center;flex-wrap:wrap; font-size:var(--fs-sm);line-height:var(--lh-body); } .fbot-links a{padding:0 17.5px;transition:color var(--dur-fast) ease} .fbot-links a:first-child{padding-left:0} .fbot-links a:last-child{padding-right:0} .fbot-links a:hover{color:var(--teal)} .fbot-links .sep{flex:none;width:1px;height:12px;background:#fff} /* The second rule and the centred .ftr-copy below it are gone: the copyright now lives in .ftr-legal, on the same row as the legal links, which also settles the duplicated-legal-paragraph note in the README. */ /* ============ GET STARTED (/get-started) ============ A conversion page: one job, no exits. It reuses .form, .inp, .check and the button set wholesale — only the page frame is new. */ .gs{background:var(--surface);padding:calc(60px + var(--s-11)) 0 var(--s-11)} /* Head above steps in the left column, form spanning both rows on the right. Areas rather than order so the DOM stays in reading order and the mobile stack (head -> form -> steps) needs one template swap. */ .gs-grid{ display:grid; grid-template-columns:minmax(0,1fr) 560px; /* rows, not just areas: the form spans both, and it is taller than head + copy. With auto/auto the surplus is shared between the rows and opens a 90px hole under the headline, so row 2 absorbs it. */ grid-template-rows:auto 1fr; grid-template-areas:"head form" "copy form"; gap:var(--s-8) clamp(32px, 5vw, 80px); align-items:start; } .gs-head{grid-area:head} .gs-copy{grid-area:copy} .gs-formwrap{grid-area:form} .gs-title em{font-style:normal;color:var(--teal)} .gs .lead{margin-top:var(--s-5)} .gs-steps{display:flex;flex-direction:column;gap:var(--s-6)} .gs-steps li{position:relative;padding-left:44px} .gs-num{ position:absolute;left:0;top:-1px; width:28px;height:28px;border-radius:var(--r-pill); display:flex;align-items:center;justify-content:center; background:var(--navy);color:#fff; font-family:var(--font-display);font-size:var(--fs-sm);font-weight:var(--fw-medium); } .gs-steps p{margin-top:var(--s-1);max-width:46ch} /* .check is white for the navy trial section; here it sits on light */ .gs-checks{margin-top:var(--s-8);padding-top:var(--s-7);border-top:1px solid var(--line)} .gs-checks .check{color:var(--ink)} /* the card needs a border and a lift here, because it sits on --surface rather than on navy like the homepage one */ .gs-form{border:1px solid var(--line);box-shadow:var(--shadow-card)} /* ---- the confirmation panel that replaces the form on success ---- */ .gs-done{ background:#fff;border:1px solid var(--line);border-radius:var(--r-3); box-shadow:var(--shadow-card); padding:var(--s-10) 33px var(--s-9);text-align:center; } .gs-done:focus{outline:none} .gs-tick{ width:56px;height:56px;margin:0 auto var(--s-6); border-radius:var(--r-pill);background:var(--ok-bg); display:flex;align-items:center;justify-content:center; } .gs-tick::after{ content:"";width:13px;height:24px; border:solid var(--ok);border-width:0 3px 3px 0; transform:rotate(45deg) translate(-2px,-3px); } .gs-when{ margin-top:var(--s-3); font-family:var(--font-display);font-size:var(--fs-h5); line-height:var(--lh-snug);font-weight:var(--fw-medium);color:var(--teal); } .gs-said{margin-top:var(--s-3);max-width:40ch;margin-inline:auto} .gs-ics{margin-top:var(--s-7);width:100%;height:44px} .gs-done .note{ margin-top:var(--s-5); font-size:var(--fs-xs);line-height:var(--lh-body);color:var(--navy-soft); } /* ============ LEGAL PAGES ============ One frame, three documents: /dpdp-data-handling, /privacy-policy and /terms-conditions. Everything here is generic — a page sets its own

and clauses and nothing else. The nav is fixed at top:12px and 48px tall, so the header band clears 60px before it starts, exactly as .gs does. The contents rail is a plain