/* ═══════════════════════════════════════════════════════════════════ BIQc marketing site — shared design system Tokens mirror frontend/src/styles/liquid-steel-tokens.css (:root = Liquid Silver light, [data-theme="dark"] = Liquid Steel). Keep variable names in lockstep with the SPA so chrome (nav/footer) matches Ask BIQc / Platform. Marketing pages default to dark via (same product default as the app). Do not add a manual ?v= query. Image build content-hashes this file (frontend/scripts/hashMarketingAssets.js). nginx never treats the unhashed /assets/site.css name as immutable (KAN-303). ═══════════════════════════════════════════════════════════════════ */ :root{ --canvas:linear-gradient(168deg,#F4F6F9 0%,#E6EAF0 32%,#F1F3F7 52%,#DCE1E9 78%,#ECEFF4 100%); --canvas-app:linear-gradient(168deg,#F4F6F9 0%,#E6EAF0 32%,#F1F3F7 52%,#DCE1E9 78%,#ECEFF4 100%); --surface:#FDFEFF; --surface-raised:#FDFEFF; --surface-sunken:#F4F6F9; --surface-tint:#F1F4F8; --canvas-sage:#F2F4EC; --canvas-sage-deep:#EEF1E6; --canvas-sage-soft:#F7F8F2; --card-wash:linear-gradient(155deg, rgba(255,255,255,0.97) 0%, rgba(247,248,242,0.85) 55%, rgba(255,255,255,0.96) 100%); --inset-highlight:rgba(255,255,255,0.9); --muted-fill:rgba(10,10,10,0.05); --track-fill:rgba(10,10,10,0.16); --ink-display:#14171C; --ink:#14171C; --ink-2:#3E4552; --ink-secondary:#5A6270; --ink-muted:#5A6270; --ink-subtle:#7A8494; --ink-inverse:#F1F4F8; --ink-on-lava:#FFFFFF; --ink-btn-top:#2A303A; --ink-btn-bottom:#181C22; --ink-btn-top-hover:#343B47; --ink-btn-bottom-hover:#20242C; --lava-600:#E85D00; --lava-500:#FF7A1A; --lava:#E85D00; --lava-deep:#E85D00; --lava-ring:rgba(232,93,0,0.18); --lava-wash:rgba(232,93,0,0.08); --lava-text:#B84A00; --silver-0:#FDFEFF; --silver-1:#F4F6F9; --silver-2:#E6EAF0; --silver-3:#DCE1E9; --silver-5:#717884; /* matches SPA — scrollbar thumb / muted chrome */ --border:rgba(20,23,28,0.09); --border-strong:rgba(20,23,28,0.16); --border-hover:rgba(20,23,28,0.23); --border-medium:var(--border-strong); /* SPA scrollbar alias */ --text-muted:var(--ink-muted); /* SPA scrollbar hover alias */ --size-nav:0.78125rem; --positive:#16A34A; --positive-wash:#ECFDF5; --warning:#D97706; --warning-wash:#FFFBEB; --info:#2563EB; --info-wash:#EFF6FF; --positive-ink:#166534; --warning-ink:#92400E; --negative:#B42318; --negative-wash:#FEF3F2; --negative-border:#FECDCA; --font-display:"Source Serif 4", Georgia, serif; --font-marketing-ui:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-mono:"JetBrains Mono","SF Mono",Menlo,Consolas,monospace; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-2xl:20px; --r-3xl:28px; --r-pill:9999px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px; --sp-20:80px; --elev-1:0 1px 2px rgba(10,10,10,0.04), 0 0 0 1px rgba(10,10,10,0.04); --elev-2:0 1px 3px rgba(10,10,10,0.06), 0 8px 24px -4px rgba(10,10,10,0.04); --elev-3:0 4px 12px rgba(10,10,10,0.08), 0 32px 64px -16px rgba(10,10,10,0.08); --content-max:1280px; --topbar-h:57px; /* matches in-app Header h-[57px] */ } /* Liquid Steel v1.1 — same charcoal map as the SPA guest Platform page. */ [data-theme="dark"]{ color-scheme:dark; --canvas:#0d0d0d; --canvas-app:#212121; --surface:#2f2f2f; --surface-raised:#333333; --surface-sunken:#171717; --surface-tint:#262626; --canvas-sage:#212121; --canvas-sage-deep:#171717; --canvas-sage-soft:#262626; --card-wash:linear-gradient(155deg, #2f2f2f 0%, #262626 55%, #2a2a2a 100%); --inset-highlight:rgba(255,255,255,0.06); --muted-fill:rgba(255,255,255,0.06); --track-fill:rgba(255,255,255,0.16); --ink-display:#ececec; --ink:#ececec; --ink-2:#d4d4d4; --ink-secondary:#b4b4b4; --ink-muted:#b4b4b4; --ink-subtle:#8e8e8e; --ink-inverse:#0d0d0d; --ink-on-lava:#FFFFFF; --ink-btn-top:#ececec; --ink-btn-bottom:#ececec; --ink-btn-top-hover:#ffffff; --ink-btn-bottom-hover:#ffffff; --lava-wash:rgba(232,93,0,0.14); --lava-text:#FF7A1A; --silver-0:#171717; --silver-1:#212121; --silver-2:#2a2a2a; --silver-3:#3a3a3a; --border:rgba(255,255,255,0.09); --border-strong:rgba(255,255,255,0.14); --border-hover:rgba(255,255,255,0.18); --positive-wash:rgba(34,197,94,0.12); --warning-wash:rgba(245,158,11,0.12); --info-wash:rgba(59,130,246,0.12); --negative-wash:rgba(239,68,68,0.12); --negative-border:rgba(239,68,68,0.35); --elev-1:0 1px 2px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04); --elev-2:0 1px 3px rgba(0,0,0,0.55), 0 8px 24px -4px rgba(0,0,0,0.45); --elev-3:0 4px 12px rgba(0,0,0,0.6), 0 32px 64px -16px rgba(0,0,0,0.45); } *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:80px;} html,body{overflow-x:clip;} body{ margin:0; font-family:var(--font-ui); font-size:16px; line-height:1.6; color:var(--ink); background:var(--canvas-app); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } h1,h2,h3,h4,p{margin:0;} a{color:inherit; text-decoration:none;} img,svg{display:block; max-width:100%;} ::selection{background:var(--lava); color:var(--ink-on-lava);} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} a:focus-visible,button:focus-visible{outline:2px solid var(--lava); outline-offset:3px; border-radius:8px;} button{font:inherit;background:none;border:0;padding:0;cursor:pointer;color:inherit;} /* ─── SCROLLBAR — exact match for Platform / SPA index.css ─── Do NOT set scrollbar-width / scrollbar-color on html in Chromium: non-auto values disable ::-webkit-scrollbar and paint the OS thin bar. */ ::-webkit-scrollbar{ width:6px; height:6px; } ::-webkit-scrollbar-track{ background:transparent; } ::-webkit-scrollbar-thumb{ background:var(--border-medium); border-radius:4px; } ::-webkit-scrollbar-thumb:hover{ background:var(--text-muted); } @supports not selector(::-webkit-scrollbar){ html{ scrollbar-width:thin; scrollbar-color:var(--border-medium) transparent; } } /* ─────────────────── NAV ─────────────────── Chrome matches the in-app Header (src/components/shared/Header.js): 57px bar, 22px inset, 14px links, 17.6px gap, lava active, ink Log in pill + silver Try for Free pill. */ .gov-nav{ position:sticky; top:0; left:0; right:0; z-index:50; height:var(--topbar-h); background:var(--silver-0); border-bottom:1px solid var(--border); } .gov-nav-inner{ height:100%; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 22px; } .gov-brand{grid-column:1; justify-self:start; display:flex; align-items:center;} .gov-brand .gov-word{ font-family:var(--font-display); font-size:1.5rem; font-weight:600; letter-spacing:-0.025em; color:var(--ink-display); line-height:1; } .gov-word .q{color:var(--lava-600);} .gov-links{grid-column:2; justify-content:center; gap:17.6px; display:flex; align-items:center;} .gov-links a{ font-family:var(--font-ui); font-size:0.875rem; font-weight:400; line-height:1.25; color:var(--ink-2); transition:color .15s ease; } .gov-links a:hover{color:var(--lava);} .gov-links a.active{color:var(--lava); font-weight:600;} .gov-actions{grid-column:3; justify-self:end; display:flex; align-items:center; gap:12px;} .gov-login{ font-family:var(--font-ui); font-size:0.875rem; font-weight:500; color:var(--ink-2); text-decoration:none; white-space:nowrap; background:none; border-radius:2px; } .gov-login:hover{color:var(--lava);} .gov-login:focus-visible{outline:2px solid var(--lava); outline-offset:2px;} .gov-try, .gov-specialist{ display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-ui); font-size:var(--size-nav); font-weight:600; border-radius:var(--r-pill); white-space:nowrap; text-decoration:none; box-sizing:border-box; } .gov-try{ height:33px; padding:0 18px; color:var(--ink-inverse); background:linear-gradient(180deg,var(--ink-btn-top),var(--ink-btn-bottom)); box-shadow:var(--elev-1); } .gov-try:hover{background:linear-gradient(180deg,var(--ink-btn-top-hover),var(--ink-btn-bottom-hover)); color:var(--ink-inverse);} .gov-specialist{ height:33px; padding:0 18px; color:var(--ink-on-lava); background:var(--lava); border:1px solid transparent; box-shadow:0 4px 14px rgba(232,93,0,0.25); } .gov-specialist:hover{background:var(--lava-500); color:var(--ink-on-lava); border-color:transparent;} .gov-end{ grid-column:3; justify-self:end; display:flex; align-items:center; gap:12px; min-width:0; } .gov-end .gov-actions{grid-column:auto; justify-self:auto; min-width:0;} .gov-burger{ display:none; flex-shrink:0; align-items:center; justify-content:center; padding:8px; color:var(--ink-2); background:none; border:1px solid var(--border); border-radius:10px; cursor:pointer; } .gov-mobile{display:none;} .gov-mobile a{ display:block; padding:8px 0; font-family:var(--font-ui); font-size:var(--size-nav); color:var(--ink-2); border-radius:0; } .gov-mobile a:hover{color:var(--lava); background:none;} .gov-mobile a.active{color:var(--lava); font-weight:600;} .gov-mobile .m-login{ display:inline-flex; align-items:flex-start; margin-top:4px; padding:8px 0; font-weight:500; color:var(--ink-2); background:none; } .gov-mobile .m-login:hover{color:var(--lava); background:none;} .gov-mobile .m-cta, .gov-mobile .m-specialist{ display:inline-flex; align-items:center; justify-content:center; margin-top:8px; font-weight:600; border-radius:var(--r-pill); text-align:center; box-sizing:border-box; height:33px; min-height:33px; max-height:33px; padding:0 18px; line-height:1; } .gov-mobile .m-cta{ color:var(--ink-inverse); background:linear-gradient(180deg,var(--ink-btn-top),var(--ink-btn-bottom)); box-shadow:var(--elev-1); } .gov-mobile .m-cta:hover{color:var(--ink-inverse); background:linear-gradient(180deg,var(--ink-btn-top-hover),var(--ink-btn-bottom-hover));} .gov-mobile .m-specialist{ color:var(--ink-on-lava); background:var(--lava); border:1px solid transparent; box-shadow:0 4px 14px rgba(232,93,0,0.25); } .gov-mobile .m-specialist:hover{color:var(--ink-on-lava); background:var(--lava-500);} /* ─────────────────── BUTTONS / EYEBROW ─────────────────── */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-marketing-ui); font-size:14.5px; font-weight:500; border-radius:9999px; padding:12px 22px; cursor:pointer; transition:transform .16s ease, box-shadow .2s ease, background .15s ease, border-color .15s ease; } .btn svg{width:17px; height:17px;} .btn-primary{color:var(--ink-on-lava); background:var(--lava); box-shadow:0 4px 14px rgba(232,93,0,0.25);} .btn-primary:hover{background:var(--lava-500); transform:translateY(-1px); box-shadow:0 8px 22px rgba(232,93,0,0.3);} .btn-primary .arrow{transition:transform .18s ease;} .btn-primary:hover .arrow{transform:translateX(3px);} .btn-ghost{color:var(--ink-display); background:var(--surface); border:1px solid var(--border-strong);} .btn-ghost:hover{transform:translateY(-1px); border-color:var(--ink-display);} .btn-ghost svg{color:var(--lava);} .eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 11px; border-radius:9999px; background:var(--surface); border:1px solid var(--border-strong); box-shadow:var(--elev-1); font-family:var(--font-marketing-ui); font-size:12.5px; font-weight:600; color:var(--ink-display); } .eyebrow .ping{position:relative; display:inline-flex; width:8px; height:8px;} .eyebrow .ping i{position:absolute; inset:0; border-radius:50%; background:var(--lava);} .eyebrow .ping i:first-child{opacity:.65; animation:auPing 2.2s ease-out infinite;} @keyframes auPing{0%{transform:scale(1);opacity:.65;}80%,100%{transform:scale(2.4);opacity:0;}} /* ─────────────────── PAGE SCAFFOLD (subpages) ─────────────────── */ .page-hero{background:var(--canvas-app); padding:clamp(40px,6vw,72px) 0 clamp(22px,3vw,36px);} .page-hero-inner{max-width:var(--content-max); margin:0 auto; padding:0 clamp(20px,4vw,40px);} .page-h1{ font-family:var(--font-display); font-size:clamp(28px,3vw + 0.4rem,42px); line-height:1.12; letter-spacing:-0.022em; font-weight:500; color:var(--ink-display); max-width:22ch; margin-top:16px; } .page-sub{ margin-top:16px; font-family:var(--font-marketing-ui); font-size:clamp(14.5px,0.5vw + 12px,16.5px); line-height:1.6; color:var(--ink-secondary); max-width:58ch; } .section{max-width:var(--content-max); margin:0 auto; padding:clamp(36px,5vw,64px) clamp(20px,4vw,40px);} .section.tight{padding-top:clamp(20px,3vw,36px);} .section-band{background:var(--canvas-app); border-top:1px solid var(--border); border-bottom:1px solid var(--border);} .section-head{margin-bottom:clamp(20px,3vw,32px);} .section-kicker{font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--lava-text);} .section-h2{ font-family:var(--font-display); font-size:clamp(1.45rem,2.4vw,2rem); font-weight:600; letter-spacing:-0.02em; color:var(--ink-display); margin-top:10px; max-width:30ch; } .section-sub{margin-top:12px; font-family:var(--font-marketing-ui); font-size:15px; line-height:1.6; color:var(--ink-secondary); max-width:62ch;} /* ─────────────────── QUOTE BAND ─────────────────── */ .quote-band{background:var(--canvas-app); border-top:1px solid var(--border); border-bottom:1px solid var(--border);} .quote-inner{max-width:var(--content-max); margin:0 auto; padding:clamp(22px,3.2vw,40px) clamp(20px,4vw,40px);} .quote-q{ font-family:var(--font-display); font-weight:500; font-size:clamp(1.4rem,3vw,2.2rem); line-height:1.25; letter-spacing:-0.02em; color:var(--ink-display); max-width:30ch; } .quote-support{ margin-top:18px; font-family:var(--font-marketing-ui); font-size:clamp(15px,1.2vw,17px); line-height:1.6; color:var(--ink-secondary); max-width:62ch; } .quote-pills{margin-top:22px; display:flex; flex-wrap:wrap; gap:10px;} .qp{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:9999px; background:var(--surface); border:1px solid var(--border); font-family:var(--font-marketing-ui); font-size:12.5px; font-weight:500; color:var(--ink-secondary); } .qp svg{width:13px; height:13px; color:var(--positive);} /* ─────────────────── VALUE CARDS ─────────────────── */ .cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,24px);} .cards.c2{grid-template-columns:repeat(2,minmax(0,1fr));} .vcard{ position:relative; overflow:hidden; background:var(--card-wash); border:1px solid var(--border); border-radius:var(--r-2xl); padding:clamp(22px,2.4vw,28px); box-shadow:var(--elev-2); transition:transform .25s ease, box-shadow .3s ease; } .vcard:hover{transform:translateY(-3px); box-shadow:var(--elev-3);} .vicon{ width:40px; height:40px; border-radius:10px; margin-bottom:16px; display:grid; place-items:center; color:var(--lava-deep); background:var(--lava-wash); border:1px solid rgba(232,93,0,0.22); box-shadow:inset 0 1px 0 var(--inset-highlight); } .vicon svg{width:20px; height:20px;} .vcard h3{font-family:var(--font-display); font-size:1.2rem; font-weight:600; letter-spacing:-0.015em; color:var(--ink-display); margin-bottom:9px;} .vcard p{font-family:var(--font-marketing-ui); font-size:0.95rem; line-height:1.55; color:var(--ink-secondary);} .vcard .vmore{display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-family:var(--font-marketing-ui); font-size:13px; font-weight:600; color:var(--lava-text);} .vcard .vmore svg{width:14px; height:14px;} /* ─────────────────── STEP ROWS ─────────────────── */ .steps-row{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(12px,1.6vw,20px);} @media(max-width:980px){.steps-row{grid-template-columns:1fr 1fr;}} @media(max-width:600px){.steps-row{grid-template-columns:1fr;}} .step-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); padding:18px; box-shadow:var(--elev-1);} .step-card .n{ width:26px; height:26px; border-radius:9999px; background:var(--lava-wash); border:1px solid rgba(232,93,0,0.25); color:var(--lava-text); font-family:var(--font-mono); font-size:12.5px; font-weight:600; display:grid; place-items:center; } .step-card h3{font-family:var(--font-marketing-ui); font-size:14.5px; font-weight:600; color:var(--ink-display); margin-top:12px;} .step-card p{font-family:var(--font-marketing-ui); font-size:12.5px; line-height:1.5; color:var(--ink-secondary); margin-top:4px;} /* ─────────────────── CHECK LIST ─────────────────── */ .check-list{display:flex; flex-direction:column; gap:12px; margin-top:18px;} .check-item{display:flex; gap:12px; align-items:flex-start;} .check-item .ck{ flex:none; width:22px; height:22px; border-radius:7px; margin-top:1px; background:var(--positive-wash); border:1px solid rgba(22,163,74,0.3); color:var(--positive); display:grid; place-items:center; } .check-item .ck svg{width:12px; height:12px;} .check-item .t{font-family:var(--font-marketing-ui); font-size:14px; font-weight:600; color:var(--ink-display);} .check-item .d{font-family:var(--font-marketing-ui); font-size:13px; color:var(--ink-secondary); line-height:1.5; margin-top:1px;} /* ─────────────────── DEMO EMBED ─────────────────── */ .demo-frame-card{ position:relative; overflow:hidden; background: radial-gradient(ellipse 120% 50% at 50% 0%, rgba(232,93,0,0.06) 0%, transparent 55%), linear-gradient(155deg, var(--canvas-sage-soft) 0%, var(--canvas-sage) 60%, var(--canvas-sage-deep) 100%); border:1px solid var(--border); border-radius:var(--r-3xl); box-shadow:var(--elev-3), inset 0 1px 0 var(--inset-highlight); padding:14px; } .demo-frame-card iframe{ display:block; width:100%; border:1px solid var(--border); border-radius:var(--r-xl); background:var(--surface); } .demo-caption{ margin-top:10px; text-align:center; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; color:var(--ink-muted); } /* ─────────────────── PROSE (legal / long-form) ─────────────────── */ .prose{max-width:760px;} .prose h2{font-family:var(--font-display); font-size:1.3rem; font-weight:600; letter-spacing:-0.015em; color:var(--ink-display); margin:34px 0 10px;} .prose h3{font-family:var(--font-marketing-ui); font-size:1.02rem; font-weight:600; color:var(--ink-display); margin:22px 0 8px;} .prose p{font-family:var(--font-marketing-ui); font-size:14.5px; line-height:1.7; color:var(--ink-secondary); margin:0 0 12px;} .prose ul{margin:0 0 14px; padding-left:20px;} .prose li{font-family:var(--font-marketing-ui); font-size:14.5px; line-height:1.7; color:var(--ink-secondary); margin-bottom:6px;} .prose strong{color:var(--ink-display); font-weight:600;} .prose a{color:var(--lava-text); font-weight:600; text-decoration:underline;} .prose .blog-disclaimer{font-size:13px; color:var(--ink-muted);} /* ── Blog (static marketing — design-system aligned) ── */ .blog-sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;} .blog-hero .page-h1{max-width:none;} .blog-toolbar-section{padding-top:0; padding-bottom:clamp(16px,2.5vw,28px);} .blog-featured-section{padding-top:0; padding-bottom:clamp(20px,3vw,36px);} .blog-grid-section{padding-top:clamp(20px,3vw,36px);} .blog-newsletter-section{padding-top:0; padding-bottom:clamp(48px,6vw,80px);} .blog-toolbar{ background:transparent; border:0; border-radius:0; padding:0; box-shadow:none; } .blog-search-wrap{position:relative; max-width:none; margin:0 0 16px;} .blog-search-icon{position:absolute; left:16px; top:50%; width:16px; height:16px; color:var(--ink-muted); transform:translateY(-50%); pointer-events:none;} .blog-search{ width:100%; height:46px; padding:0 18px 0 44px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--surface); color:var(--ink-display); font-family:var(--font-marketing-ui); font-size:14px; outline:none; transition:border-color .2s ease, background .2s ease; } .blog-search:focus{border-color:var(--lava); box-shadow:none; background:var(--surface);} .blog-search::-webkit-search-cancel-button, .blog-search::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; display:none; } .blog-filter-row{display:flex; flex-wrap:nowrap; gap:8px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none;} .blog-filter-row::-webkit-scrollbar{display:none;} @media(min-width:720px){.blog-filter-row{flex-wrap:wrap; overflow:visible;}} .blog-filter{ flex:none; font-family:var(--font-marketing-ui); font-size:12px; font-weight:500; border-radius:var(--r-pill); padding:6px 14px; border:1px solid var(--border); background:transparent; color:var(--ink-secondary); cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease; } .blog-filter:hover, .blog-filter:focus-visible{ background:var(--lava-wash); border-color:var(--lava); color:var(--lava); } .blog-filter.is-active{background:var(--lava); border-color:var(--lava); color:var(--ink-on-lava); box-shadow:0 4px 14px rgba(232,93,0,0.25);} .blog-filter.is-active:hover, .blog-filter.is-active:focus-visible{ background:var(--lava-500); border-color:var(--lava-500); color:var(--ink-on-lava); } .blog-chip{ display:inline-flex; align-self:flex-start; align-items:center; font-family:var(--font-marketing-ui); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--chip-color, var(--lava)); background:var(--lava-wash); background:color-mix(in srgb, var(--chip-color, var(--lava)) 14%, transparent); border-radius:6px; padding:4px 8px; margin-bottom:12px; } .blog-featured{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); overflow:hidden; border:1px solid var(--border); border-radius:var(--r-2xl); background:var(--surface); text-decoration:none; color:inherit; box-shadow:var(--elev-2); transition:transform .25s ease, box-shadow .3s ease; } .blog-featured:hover{transform:translateY(-3px); box-shadow:var(--elev-3);} .blog-featured-visual{ position:relative; display:flex; align-items:center; justify-content:center; min-height:260px; background: radial-gradient(ellipse 120% 50% at 50% 0%, rgba(232,93,0,0.06) 0%, transparent 55%), linear-gradient(155deg, var(--canvas-sage-soft) 0%, var(--canvas-sage) 60%, var(--canvas-sage-deep) 100%); } @media(min-width:768px){.blog-featured-visual{min-height:300px;}} .blog-featured-rings{position:relative; display:grid; place-items:center; width:100%; height:100%; min-height:inherit;} .blog-ring{position:absolute; top:50%; left:50%; border:1px solid var(--border); border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; box-sizing:border-box;} .blog-ring--sm{width:180px; height:180px;} .blog-ring--lg{width:280px; height:280px; border-color:var(--border);} .blog-logo-word{ position:relative; z-index:1; font-family:var(--font-display); font-size:clamp(1.75rem,3vw,2.25rem); font-weight:600; letter-spacing:-0.02em; color:var(--ink-display); transition:transform .25s ease; } .blog-featured:hover .blog-logo-word{transform:translateY(-3px);} .blog-logo-word .q{color:var(--lava); font-weight:700;} .blog-featured-body{display:flex; flex-direction:column; justify-content:center; padding:clamp(24px,3.5vw,36px);} .blog-featured-body h2{ font-family:var(--font-display); font-size:clamp(1.35rem,2.2vw,1.75rem); font-weight:600; line-height:1.25; letter-spacing:-0.02em; color:var(--ink-display); margin:0 0 12px; } .blog-featured-body > p{font-family:var(--font-marketing-ui); font-size:15px; line-height:1.65; color:var(--ink-secondary); margin:0 0 18px;} .blog-meta-row{display:flex; align-items:center; gap:10px; font-family:var(--font-marketing-ui); font-size:13px; color:var(--ink-muted); margin-bottom:18px;} .blog-meta-dot{width:3px; height:3px; border-radius:50%; background:var(--ink-subtle); flex:none;} .blog-read{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-marketing-ui); font-size:14px; font-weight:600; color:var(--lava);} .blog-read-icon{width:14px; height:14px; transition:transform .18s ease;} .blog-featured:hover .blog-read-icon{transform:translateX(3px);} .blog-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px;} .blog-grid--related{margin-top:0;} .blog-card{ display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--border); border-radius:14px; background:var(--surface); text-decoration:none; color:inherit; box-shadow:var(--elev-1); transition:transform .3s ease, box-shadow .3s ease; } .blog-card[hidden], .blog-card.is-hidden, .blog-featured-section[hidden], .blog-grid-section[hidden], .blog-grid-head[hidden], .blog-empty[hidden]{ display:none !important; } .blog-card:hover{transform:translateY(-4px); box-shadow:var(--elev-3);} .blog-card-visual{ position:relative; display:flex; align-items:center; justify-content:center; height:160px; box-shadow:inset 0 1px 0 var(--inset-highlight), inset 0 -1px 0 var(--border); } .blog-card[data-tone="0"] .blog-card-visual{background:linear-gradient(135deg, var(--silver-1) 0%, var(--silver-2) 50%, var(--silver-3) 100%);} .blog-card[data-tone="1"] .blog-card-visual{background:linear-gradient(135deg, var(--surface-tint) 0%, var(--silver-2) 50%, var(--silver-3) 100%);} .blog-card[data-tone="2"] .blog-card-visual{background:linear-gradient(135deg, var(--canvas-sage-soft) 0%, var(--canvas-sage) 50%, var(--canvas-sage-deep) 100%);} .blog-card[data-tone="3"] .blog-card-visual{background:linear-gradient(135deg, var(--silver-1) 0%, var(--silver-2) 50%, var(--silver-3) 100%);} .blog-card[data-tone="4"] .blog-card-visual{background:linear-gradient(135deg, var(--surface) 0%, var(--surface-tint) 50%, var(--silver-3) 100%);} .blog-card[data-tone="5"] .blog-card-visual{background:linear-gradient(135deg, var(--surface-sunken) 0%, var(--silver-2) 50%, var(--silver-3) 100%);} .blog-card-stripe{ position:absolute; top:0; left:0; right:0; height:3px; background:var(--chip-color, var(--lava)); opacity:.75; } .blog-card-striations{ position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(90deg, var(--inset-highlight) 0, var(--inset-highlight) 1px, var(--muted-fill) 1px, var(--muted-fill) 2px); mix-blend-mode:overlay; } .blog-card-index{ position:relative; z-index:1; font-family:var(--font-marketing-ui); font-size:42px; font-weight:700; letter-spacing:-0.03em; color:var(--ink-subtle); text-shadow:none; } .blog-card-body{padding:24px; display:flex; flex-direction:column; flex:1;} .blog-card-body h3{ font-family:var(--font-marketing-ui); font-size:1rem; font-weight:600; line-height:1.35; letter-spacing:-0.015em; color:var(--ink-display); margin:0 0 10px; } .blog-card-body > p{ font-family:var(--font-marketing-ui); font-size:14px; line-height:1.6; color:var(--ink-secondary); margin:0 0 16px; flex:1; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .blog-card-footer{ display:flex; align-items:center; justify-content:flex-end; font-family:var(--font-marketing-ui); font-size:12px; color:var(--ink-muted); } .blog-meta{font-family:var(--font-marketing-ui); font-size:12px; color:var(--ink-muted);} .blog-empty{text-align:center; font-family:var(--font-marketing-ui); font-size:14px; color:var(--ink-muted); padding:32px 0 8px;} .blog-newsletter{ width:100%; max-width:100%; box-sizing:border-box; text-align:center; position:relative; overflow:visible; background: radial-gradient(ellipse 90% 70% at 50% 0%, var(--lava-wash) 0%, transparent 62%), var(--surface); border:1px solid var(--border); border-radius:var(--r-2xl); padding:clamp(28px,5.5vw,64px) clamp(16px,5vw,72px); box-shadow:var(--elev-1); } .blog-newsletter-kicker{ display:block; margin-bottom:10px; font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--lava-text); } .blog-newsletter h2{ font-family:var(--font-display); font-size:clamp(1.45rem,2.4vw,1.9rem); font-weight:600; letter-spacing:-0.02em; color:var(--ink-display); margin:0 0 10px; } .blog-newsletter > p{ font-family:var(--font-marketing-ui); font-size:15px; line-height:1.65; color:var(--ink-secondary); margin:0 auto 28px; max-width:44ch; } .blog-newsletter-form{display:flex; flex-direction:column; gap:10px; width:100%; min-width:0; margin:0; align-items:stretch;} @media(min-width:640px){.blog-newsletter-form{flex-direction:row; align-items:center;}} .blog-newsletter-input{ display:block; flex:1; min-width:0; width:100%; height:49px; min-height:49px; max-height:49px; padding:0 20px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--surface); color:var(--ink-display); font-family:var(--font-marketing-ui); font-size:16px; line-height:49px; outline:none; -webkit-appearance:none; appearance:none; box-sizing:border-box; transition:border-color .15s ease; } .blog-newsletter-input:focus{border-color:var(--lava); box-shadow:none; background:var(--surface);} .blog-newsletter-form .btn{ flex:none; white-space:nowrap; appearance:none; -webkit-appearance:none; border:none; cursor:pointer; font:inherit; height:49px; min-height:49px; padding:0 28px; } .blog-newsletter-form .btn.is-success{background:var(--positive); box-shadow:0 4px 14px rgba(22,163,74,0.25);} .blog-newsletter-actions{ display:flex; flex-direction:column; align-items:stretch; gap:24px; width:100%; max-width:28rem; margin:0 auto; min-width:0; } .blog-newsletter-fine{ margin:0; padding:0; max-width:none; font-family:var(--font-marketing-ui); font-size:13px; line-height:1.5; color:var(--ink-muted); text-align:center; } .blog-article-hero .page-hero-inner{ max-width:var(--content-max); margin:0 auto; padding:0 clamp(20px,4vw,40px); } .blog-article-hero .page-h1{max-width:none;} .blog-article-hero .page-sub{max-width:none;} .blog-article-hero .blog-chip{align-self:flex-start; margin-top:4px;} .blog-article-section.section{ padding-top:clamp(12px,2vw,20px); } .blog-article-section .prose.blog-article-body{ max-width:none; margin:0; } .blog-meta--hero{margin-top:16px;} .blog-back{margin:0 0 16px;} .blog-back-btn{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-marketing-ui); font-size:14px; font-weight:600; color:var(--lava); text-decoration:none; transition:color .15s ease; } .blog-back-btn:hover{color:var(--lava-500);} .blog-article-body{margin-top:0;} .blog-related{padding-top:0; padding-bottom:clamp(48px,6vw,72px);} @media(max-width:960px){ .blog-featured{grid-template-columns:1fr;} .blog-featured-visual{min-height:260px;} .blog-ring--sm{width:160px; height:160px;} .blog-ring--lg{width:240px; height:240px;} .blog-grid,.blog-grid--related{grid-template-columns:repeat(2,minmax(0,1fr));} } @media(max-width:640px){ .blog-toolbar-section, .blog-featured-section, .blog-grid-section, .blog-newsletter-section{ padding-left:16px; padding-right:16px; } .blog-featured{border-radius:var(--r-xl);} .blog-featured-visual{min-height:280px;} .blog-featured-body{padding:22px 22px 24px;} .blog-featured-body h2{font-size:1.2rem;} .blog-featured-body > p{font-size:14px; margin-bottom:14px;} .blog-logo-word{font-size:2rem;} .blog-ring--sm{width:170px; height:170px;} .blog-ring--lg{width:250px; height:250px;} .blog-grid,.blog-grid--related{grid-template-columns:1fr;} .blog-newsletter{ padding:36px 28px 40px; border-radius:var(--r-xl); } .blog-newsletter-actions{gap:20px; max-width:100%; padding:0;} .blog-newsletter-form{flex-direction:column; width:100%;} .blog-newsletter-input, .blog-newsletter-form .btn{ width:100%; max-width:100%; height:49px; min-height:49px; box-sizing:border-box; } .blog-newsletter > p{font-size:14px; margin-bottom:20px;} @media(hover:none){ .blog-featured:hover, .blog-card:hover, .blog-newsletter-form .btn:hover{transform:none;} } } .lava-link{color:var(--lava-text);font-weight:600;} .steps-row.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));} @media(max-width:1020px){.steps-row.cols-4{grid-template-columns:1fr 1fr;}} @media(max-width:640px){.steps-row.cols-4{grid-template-columns:1fr;}} .doc-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; } .doc-meta span{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; color:var(--ink-muted); background:var(--surface-sunken); border:1px solid var(--border); border-radius:9999px; padding:4px 11px; } /* Plain-English summary box */ .plain-box{ background:var(--canvas-sage-soft); border:1px solid var(--border); border-left:3px solid var(--lava); border-radius:var(--r-xl); padding:18px 20px; margin:22px 0 8px; } .plain-box .pb-label{ display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--lava-text); margin-bottom:10px; } .plain-box ul{margin:0; padding-left:18px;} .plain-box li{font-family:var(--font-marketing-ui); font-size:13.5px; line-height:1.6; color:var(--ink); margin-bottom:6px;} .plain-box li:last-child{margin-bottom:0;} /* ─────────────────── TABLES ─────────────────── */ .mk-tbl{width:100%; border-collapse:separate; border-spacing:0; font-family:var(--font-marketing-ui); font-size:13.5px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden;} .mk-tbl th{ text-align:left; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); font-weight:600; padding:11px 14px; background:var(--surface-sunken); border-bottom:1px solid var(--border); } .mk-tbl td{padding:12px 14px; border-bottom:1px solid var(--border); color:var(--ink-secondary); vertical-align:top;} .mk-tbl tr:last-child td{border-bottom:0;} .mk-tbl td:first-child{color:var(--ink-display); font-weight:600;} .tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;} /* ─────────────────── FAQ ─────────────────── */ .faq{border-top:1px solid var(--border);} .faq details{border-bottom:1px solid var(--border);} .faq summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px 4px; font-family:var(--font-marketing-ui); font-size:15px; font-weight:600; color:var(--ink-display); } .faq summary::-webkit-details-marker{display:none;} .faq summary .pm{ flex:none; width:22px; height:22px; border-radius:7px; display:grid; place-items:center; position:relative; color:var(--lava-deep); background:var(--lava-wash); border:1px solid rgba(232,93,0,0.22); font-weight:600; font-size:14px; line-height:1; } .faq details[open] summary .pm{ background:var(--lava); color:transparent; /* hide the static "+" */ } .faq details[open] summary .pm::after{ content:"−"; position:absolute; inset:0; display:grid; place-items:center; color:var(--ink-on-lava); font-size:14px; font-weight:600; line-height:1; } .faq .faq-a{padding:0 4px 18px; font-family:var(--font-marketing-ui); font-size:14px; line-height:1.65; color:var(--ink-secondary); max-width:70ch;} /* ─────────────────── CTA BAND ─────────────────── */ .cta-band{background:var(--canvas-app); border-top:1px solid var(--border);} .cta-band-inner{ max-width:var(--content-max); margin:0 auto; padding:clamp(40px,6vw,72px) clamp(20px,4vw,40px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px; } .cta-band h2{font-family:var(--font-display); font-size:clamp(1.4rem,2.4vw,1.9rem); font-weight:600; letter-spacing:-0.02em; color:var(--ink-display); max-width:26ch;} .cta-band p{margin-top:8px; font-family:var(--font-marketing-ui); font-size:14px; color:var(--ink-secondary); max-width:52ch;} .cta-band .cta-actions{display:flex; flex-wrap:wrap; gap:12px;} .cta-fine{margin-top:10px; font-family:var(--font-marketing-ui); font-size:12px; color:var(--ink-muted);} /* ─────────────────── FOOTER ─────────────────── */ .gov-footer{background:var(--surface-sunken); border-top:1px solid var(--border);} .footer-inner{max-width:var(--content-max); margin:0 auto; padding:64px 24px;} .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;} .footer-brand .fb-row{display:flex;align-items:center;gap:10px;} .footer-brand .fb-word{font-family:var(--font-display); font-size:22px; font-weight:600; letter-spacing:-0.012em; color:var(--ink-display);} .footer-brand .fb-word .q{color:var(--lava-600); font-weight:700;} .footer-brand p{margin-top:16px; font-family:var(--font-marketing-ui); font-size:12px; line-height:1.6; color:var(--ink-secondary); max-width:30ch;} .footer-brand .au{margin-top:20px; display:flex; align-items:center; gap:8px;} .footer-brand .au i{width:8px; height:8px; border-radius:50%; background:var(--positive); animation:pulseDot 2s ease-in-out infinite;} @keyframes pulseDot{0%,100%{opacity:1;}50%{opacity:.4;}} .footer-brand .au span{font-family:var(--font-mono); font-size:10px; color:var(--ink-muted);} .footer-brand .au-fine{margin-top:8px; font-family:var(--font-marketing-ui); font-size:10.5px; line-height:1.5; color:var(--ink-muted); max-width:34ch;} .footer-brand .au-fine a{display:inline; font-size:inherit; color:inherit; margin:0; text-decoration:underline;} .footer-social{margin-top:20px;} .footer-social-heading{font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-2); margin:0 0 4px;} .footer-social-list{display:flex; flex-wrap:wrap; align-items:center; gap:0; margin:0; padding:0; list-style:none;} .footer-social-link{display:inline-flex; align-items:center; justify-content:flex-start; min-height:0; padding:4px 8px 4px 0; border-radius:8px; color:var(--ink-secondary); transition:color .15s ease;} .footer-social-link:hover,.footer-social-link:focus-visible{color:var(--lava);} .footer-social-link:focus-visible{outline:2px solid rgba(232,93,0,.3); outline-offset:2px;} .footer-social-link svg{width:18px; height:18px; display:block;} /* Dense link stack — mirror React MarketingFooter mobile rhythm exactly: gap-0.5 (2px) + py-1 (4px) + 12.5px / leading-tight. */ .footer-col{display:flex; flex-direction:column; gap:2px; align-items:flex-start;} .footer-col h2{ font-family:var(--font-marketing-ui); font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:none; color:var(--ink-2); margin:0 0 6px; } .gov-footer .footer-col a, .footer-col a{ display:block; margin:0 !important; padding:4px 0 !important; font-family:var(--font-marketing-ui); font-size:12.5px !important; line-height:1.25 !important; color:var(--ink-display); min-height:0 !important; height:auto !important; transition:color .15s ease; } .footer-col a:hover{color:var(--lava);} @media (min-width:981px){ .footer-col{gap:4px;} .footer-col h2{ font-family:var(--font-mono); letter-spacing:0.14em; text-transform:uppercase; margin:0 0 8px; } .gov-footer .footer-col a, .footer-col a{ font-size:14px !important; line-height:1.375 !important; color:var(--ink-secondary); } .footer-social{margin-top:28px;} .footer-bottom{margin-top:24px; padding-top:20px; gap:12px;} .footer-bottom span{font-size:12px;} } .footer-bottom{margin-top:16px; padding-top:16px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px;} .footer-bottom span{font-family:var(--font-mono); font-size:11px; line-height:1.45; color:var(--ink-muted);} html.marketing-auth-open{ overflow:hidden; /* padding-right set in social-media.js to match scrollbar width */ } .marketing-auth-overlay{ position:fixed;inset:0;z-index:2147483646; /* Transparent — Dialog inside the embed paints the dim + card together (Platform parity). A parent scrim caused an empty-flash before the modal. */ background:transparent; } /* color-scheme:light even on a dark host — Chromium paints an opaque iframe canvas when the frame is dark, which hides Meet BIQc / Pricing behind a solid sheet. Same rule as Merge Link / html.auth-embed. */ .marketing-auth-overlay iframe,.marketing-auth-warm{ display:block;width:100%;height:100%;border:0; background:transparent;color-scheme:light; } /* Off-screen full viewport — 0×0 iframes often never finish booting React. */ .marketing-auth-warm{ position:fixed !important; top:0 !important; left:-100vw !important; width:100vw !important; height:100vh !important; opacity:0 !important; pointer-events:none !important; border:0 !important; } /* Monogram fallback when a third-party logo CDN fails */ .logo-fb{display:inline-grid; place-items:center; width:100%; height:100%; min-width:18px; min-height:18px; border-radius:6px; background:var(--canvas-sage-soft); border:1px solid var(--border); color:var(--ink-secondary); font-family:var(--font-marketing-ui); font-size:11px; font-weight:600;} /* ─────────────────── ENTRANCE ANIMATIONS ─────────────────── */ @keyframes heroFadeUp{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:translateY(0);}} .f1{animation:heroFadeUp .7s ease both .05s;} .f2{animation:heroFadeUp .7s ease both .16s;} .f3{animation:heroFadeUp .7s ease both .27s;} .f4{animation:heroFadeUp .7s ease both .38s;} .f5{animation:heroFadeUp .7s ease both .49s;} .f6{animation:heroFadeUp .8s ease both .3s;} .page-hero .f1, .page-hero .f2, .page-hero .f3, .page-hero .f4, .page-hero .f5, .page-hero .f6{opacity:1;transform:none;} /* ─────────────────── RESPONSIVE ─────────────────── */ @media (max-width:1279px){ /* Brand | CTAs+burger — do not keep 1fr|auto|1fr or the right half clips the hamburger (html/body overflow-x:clip). */ .gov-nav-inner{grid-template-columns:auto minmax(0,1fr);} .gov-brand{grid-column:1;} .gov-links{display:none;} .gov-end{grid-column:2; justify-self:end;} .gov-burger{display:inline-flex;} } @media (max-width:767px){ .gov-actions{display:none;} } @media (min-width:768px){ .gov-mobile .m-login, .gov-mobile .m-cta, .gov-mobile .m-specialist{display:none;} } @media (max-width:980px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:16px 20px; align-items:start; text-align:left; } .footer-brand{grid-column:1 / -1;} .cards{grid-template-columns:1fr 1fr;} .cards.c2{grid-template-columns:1fr;} .footer-inner{padding:32px 20px 28px;} .footer-brand{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; } .footer-brand .fb-row{justify-content:flex-start;} .footer-brand .fb-word{font-size:20px;} .footer-brand p{ margin-top:10px; margin-left:0; margin-right:0; max-width:42ch; line-height:1.45; } .footer-brand .au{justify-content:flex-start; margin-top:12px;} /* Keep React MarketingFooter mobile link rhythm on all 2-col footers */ .footer-col{gap:2px; min-width:0; text-align:left;} .footer-col h2{ margin:0 0 6px; font-size:11px; letter-spacing:0.06em; text-transform:none; font-family:var(--font-marketing-ui); font-weight:600; color:var(--ink-2); } .gov-footer .footer-col a, .footer-col a{ margin:0 !important; padding:4px 0 !important; font-size:12.5px !important; line-height:1.25 !important; color:var(--ink-display); min-height:0 !important; height:auto !important; } .footer-social{ display:flex; flex-direction:column; align-items:flex-start; margin-top:20px; } .footer-social-heading{margin:0 0 4px;} .footer-social-list{justify-content:flex-start; gap:0;} .footer-social-link{ justify-content:flex-start; padding:4px 8px 4px 0; min-height:0; } .footer-bottom{ margin-top:16px; padding-top:16px; flex-direction:column; align-items:flex-start; justify-content:flex-start; text-align:left; gap:6px; } .footer-bottom span{ display:block; max-width:none; line-height:1.45; text-align:left; font-size:11px; } } @media (max-width:760px){ .cards{grid-template-columns:1fr;} } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none !important; transition:none !important;} }