/* ============================================================ Drapto marketing — blue brand design system ============================================================ */ :root { --blue-900: #0b1c3d; --blue-800: #10275c; --blue-700: #1e3a8a; --blue-600: #1d4ed8; --blue-500: #2563eb; --blue-400: #3b82f6; --blue-100: #dbeafe; --blue-50: #eff6ff; --ink: #0f172a; --ink-soft: #475569; --ink-faint: #94a3b8; --bg: #ffffff; --bg-soft: #f8fafc; --line: #e2e8f0; --green: #059669; --amber: #d97706; /* accent ramp — energy, CTAs, emphasis */ --orange-700:#c2410c; --orange-600:#ea580c; --orange-500:#f97316; --orange-400:#fb923c; --orange-300:#fdba74; --orange-100:#ffedd5; --orange-50:#fff7ed; --coral:#ff5a3c; /* semantic roles */ --accent:var(--orange-500); --accent-strong:var(--orange-600); --accent-soft:var(--orange-50); --structure:var(--blue-900); --structure-mid:var(--blue-600); --radius: 14px; --shadow: 0 10px 40px rgba(15, 23, 42, .08); --font-display: "Source Serif 4", Georgia, serif; --font-body: "IBM Plex Sans", -apple-system, sans-serif; --font-mono: "IBM Plex Mono", monospace; }* { margin: 0; padding: 0; box-sizing: border-box; }html { scroll-behavior: smooth; }body { font-family: var(--font-body); color: var(--ink); background: var(--bg); line-height: 1.6; font-size: 16px; }img { max-width: 100%; }a { color: var(--blue-600); text-decoration: none; }.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }/* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }.site-header .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }.logo { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--blue-800); letter-spacing: -.02em; }.logo b { color: var(--blue-500); }.main-nav { display: flex; gap: 22px; margin-left: 8px; }.main-nav a { color: var(--ink-soft); font-size: 14.5px; font-weight: 500; }.main-nav a:hover, .main-nav a.active { color: var(--blue-600); }.header-cta { margin-left: auto; display: flex; align-items: center; gap: 14px; }.link-quiet { color: var(--ink-soft); font-size: 14.5px; font-weight: 500; }.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 18px; cursor: pointer; color: var(--ink); }/* ---------- Buttons ---------- */ .btn { display: inline-block; padding: 11px 22px; border-radius: 10px; font-weight: 600; font-size: 15px; border: 1px solid transparent; cursor: pointer; transition: all .15s; }.btn-primary { background: var(--blue-600); color: #fff; box-shadow: 0 4px 14px rgba(37,99,235,.3); }.btn-primary:hover { background: var(--blue-700); transform: translateY(-1px); }.btn-ghost { border-color: var(--line); color: var(--ink); background: #fff; }.btn-ghost:hover { border-color: var(--blue-400); color: var(--blue-600); }.btn-lg { padding: 14px 30px; font-size: 16px; }.btn-invert { background: #fff; color: var(--blue-700); }/* ---------- Hero ---------- */ .hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }.eyebrow { display: inline-block; background: var(--blue-100); color: var(--blue-700); font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; margin-bottom: 18px; }h1 { font-family: var(--font-display); font-size: 46px; line-height: 1.12; letter-spacing: -.02em; color: var(--blue-900); }h1 em { font-style: normal; color: var(--blue-500); }.hero p.lead { font-size: 18.5px; color: var(--ink-soft); margin: 20px 0 28px; max-width: 34em; }/* ---------- Product mock (pure CSS dashboard) ---------- */ @keyframes grow { from { height: 0 !important; } }/* ---------- Sections ---------- */ section { padding: 72px 0; }section.alt { background: var(--bg-soft); }.sec-head { text-align: center; max-width: 640px; margin: 0 auto 48px; }h2 { font-family: var(--font-display); font-size: 34px; letter-spacing: -.015em; color: var(--blue-900); line-height: 1.2; }.sec-head p { color: var(--ink-soft); margin-top: 12px; font-size: 17px; }h3 { font-family: var(--font-display); font-size: 21px; color: var(--blue-900); }/* ---------- Stat band ---------- */ /* ---------- Cards / grids ---------- */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }.card .icon { width: 42px; height: 42px; border-radius: 10px; background: var(--blue-50); color: var(--blue-600); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 16px; }.card h3 { font-size: 18.5px; margin-bottom: 8px; }.card p { color: var(--ink-soft); font-size: 14.5px; }.card ul { margin: 12px 0 0 18px; color: var(--ink-soft); font-size: 14px; }.card ul li { margin: 5px 0; }.card a.more { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600; }/* ---------- Steps ---------- */ .step { position: relative; padding: 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }.step::before { counter-increment: step; content: counter(step); font-family: var(--font-mono); font-weight: 600; color: var(--blue-500); background: var(--blue-50); width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }/* ---------- Quotes ---------- */ /* ---------- Pricing ---------- */ .plan .btn { text-align: center; }/* ---------- FAQ ---------- */ .faq-list { max-width: 760px; margin: 0 auto; }.faq-item { border-bottom: 1px solid var(--line); }.faq-item summary { cursor: pointer; padding: 18px 0; font-weight: 600; font-size: 16px; color: var(--blue-900); list-style: none; display: flex; justify-content: space-between; }.faq-item summary::after { content: "+"; color: var(--blue-500); font-size: 20px; }.faq-item[open] summary::after { content: "–"; }.faq-item p { color: var(--ink-soft); padding-bottom: 18px; font-size: 15px; }/* ---------- CTA band ---------- */ .cta-band { background: linear-gradient(135deg, var(--blue-800), var(--blue-600)); border-radius: 20px; padding: 56px 40px; text-align: center; color: #fff; }.cta-band h2 { color: #fff; }.cta-band p { color: #dbeafe; margin: 12px auto 26px; max-width: 34em; }/* ---------- Tables ---------- */ /* ---------- Footer ---------- */ .site-footer { background: var(--blue-900); color: #9fb4dd; padding: 56px 0 32px; margin-top: 40px; }.site-footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }.site-footer h4 { color: #fff; font-size: 13.5px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }.site-footer a { display: block; color: #9fb4dd; font-size: 14px; margin: 7px 0; }.site-footer a:hover { color: #fff; }.site-footer .fine { border-top: 1px solid rgba(255,255,255,.12); margin-top: 40px; padding-top: 22px; font-size: 13px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }.footer-logo { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 10px; }/* ---------- Page hero (subpages) ---------- */ .page-hero { background: linear-gradient(180deg, var(--blue-50), #fff); padding: 60px 0 36px; text-align: center; }.page-hero h1 { font-size: 38px; }.page-hero p { color: var(--ink-soft); margin-top: 12px; font-size: 17px; max-width: 40em; margin-left: auto; margin-right: auto; }.breadcrumbs { font-size: 13px; color: var(--ink-faint); margin-bottom: 14px; }.breadcrumbs a { color: var(--ink-faint); }/* ---------- Prose (long-form SEO copy) ---------- */ .prose { max-width: 760px; margin: 0 auto; }.prose h2 { font-size: 26px; margin: 36px 0 12px; }.prose h3 { margin: 26px 0 8px; }.prose p { color: var(--ink-soft); margin: 12px 0; }.prose ul { margin: 12px 0 12px 22px; color: var(--ink-soft); }/* ---------- Forms ---------- */ .form-card { max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; }.form-card label { display: block; font-size: 13.5px; font-weight: 600; margin: 14px 0 6px; }.form-card input, .form-card textarea, .form-card select { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 9px; font: inherit; font-size: 14.5px; }.form-card input:focus, .form-card textarea:focus { outline: 2px solid var(--blue-100); border-color: var(--blue-400); }/* ---------- Responsive ---------- */ @media (max-width: 960px) {.hero .wrap, .grid-3, .grid-2, .plans, .steps, .quotes, .stats { grid-template-columns: 1fr 1fr; }h1 { font-size: 36px; }.site-footer .cols { grid-template-columns: 1fr 1fr; }}@media (max-width: 640px) {.hero .wrap, .grid-3, .grid-2, .plans, .steps, .quotes { grid-template-columns: 1fr; }.main-nav { display: none; position: absolute; top: 64px; left: 0; right: 0; background: #fff; flex-direction: column; padding: 16px 24px; border-bottom: 1px solid var(--line); gap: 14px; }.main-nav.open { display: flex; }.nav-toggle { display: block; }.header-cta .link-quiet { display: none; }h1 { font-size: 30px; }section { padding: 48px 0; }}/* ---------- Launch discount ---------- */ /* ═══════════════════════════════════════════════════════════ DRAPTO DESIGN SYSTEM v2 — depth, hierarchy, clinical calm ═══════════════════════════════════════════════════════════ */ :root{ --d-mesh:rgba(37,99,235,.10); --d-mint:#059669; --d-amber:#d97706; --d-panel:#ffffff; --d-panel-2:#f8fafc; }/* ── HERO ── */ .dhero .wrap{position:relative;z-index:2;}.deyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:800; letter-spacing:.15em;text-transform:uppercase;color:var(--blue-600); padding:7px 15px;border-radius:999px;border:1px solid rgba(37,99,235,.26);background:rgba(37,99,235,.07);}.dcta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px;}.dbtn{display:inline-flex;align-items:center;gap:9px;padding:15px 30px;border-radius:12px; font-size:.95rem;font-weight:700;text-decoration:none;transition:transform .16s,box-shadow .16s,background .16s;}.dbtn-p{background:var(--blue-600);color:#fff;box-shadow:0 10px 28px -8px rgba(37,99,235,.55);}.dbtn-p:hover{transform:translateY(-2px);box-shadow:0 16px 38px -8px rgba(37,99,235,.7);background:var(--blue-700);}.dbtn-o{background:#fff;color:var(--blue-800);border:1px solid var(--line);}.dbtn-o:hover{border-color:var(--blue-400);transform:translateY(-2px);box-shadow:var(--shadow);}/* ── HOOK BANNERS ── */ .dhook{padding:76px 0;text-align:center;}.dhook-rule{width:56px;height:3px;border-radius:2px;margin:0 auto 24px; background:linear-gradient(90deg,var(--blue-500),var(--d-mint));}.dhook-line{font-family:var(--font-display);font-size:clamp(1.8rem,3.9vw,3rem);line-height:1.2; letter-spacing:-.02em;color:var(--blue-900);max-width:21ch;margin:0 auto;font-weight:600;}.dhook-line em{font-style:italic;color:var(--blue-500);}.dhook-sub{color:var(--ink-soft);max-width:54ch;margin:18px auto 0;line-height:1.68;}/* ── SECTION SHELL ── */ .dsec{padding:74px 0;}.dsec.tint{background:var(--bg-soft);}.dsec-head{text-align:center;max-width:60ch;margin:0 auto 46px;}.dsec-tag{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-600);}.dsec-h{font-family:var(--font-display);font-weight:600;font-size:clamp(1.9rem,3.5vw,2.7rem); letter-spacing:-.02em;line-height:1.15;margin-top:12px;color:var(--blue-900);}.dsec-p{color:var(--ink-soft);margin-top:14px;line-height:1.68;}/* ── AGENT CARDS ── */ /* ── SPLIT ── */ .dsplit{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;}.dsplit.rev .dsplit-t{order:2;}.dsplit-t h3{font-family:var(--font-display);font-weight:600;font-size:clamp(1.6rem,3vw,2.2rem); letter-spacing:-.02em;line-height:1.18;color:var(--blue-900);}.dsplit-t p{color:var(--ink-soft);margin-top:15px;line-height:1.7;}.dsplit-list{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:11px;}.dsplit-list li{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;color:var(--ink-soft);}.dsplit-list li::before{content:"";flex-shrink:0;width:18px;height:18px;border-radius:50%;margin-top:1px; background:rgba(5,150,105,.1);border:1px solid rgba(5,150,105,.35); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size:11px;background-position:center;background-repeat:no-repeat;}.dpanel{border-radius:20px;border:1px solid var(--line);padding:22px;background:#fff;box-shadow:var(--shadow);}.drow{display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:11px; background:var(--bg-soft);border:1px solid var(--line);margin-bottom:9px;}.drow:last-child{margin-bottom:0;}.drow-t{flex:1;min-width:0;}.drow-t b{display:block;font-size:.83rem;color:var(--blue-900);font-weight:650;}.drow-t span{display:block;font-size:.73rem;color:var(--ink-faint);margin-top:2px;}.dtag{font-size:.64rem;font-weight:800;padding:4px 9px;border-radius:999px;letter-spacing:.04em; text-transform:uppercase;white-space:nowrap;}.dtag.win{background:rgba(5,150,105,.1);color:var(--d-mint);}.dtag.hot{background:rgba(37,99,235,.1);color:var(--blue-600);}.dtag.warn{background:rgba(217,119,6,.1);color:var(--d-amber);}.dtag.mut{background:var(--bg-soft);color:var(--ink-faint);}/* ── PROOF STRIP ── */ .dproof{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px; background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden;}.dproof div{background:#fff;padding:26px 18px;text-align:center;}.dproof b{display:block;font-family:var(--font-display);font-size:1.8rem;font-weight:700; letter-spacing:-.02em;color:var(--blue-800);}.dproof b em{font-style:normal;color:var(--blue-500);}.dproof span{display:block;font-size:.76rem;color:var(--ink-faint);margin-top:6px;line-height:1.5;}/* ── CONTRAST ── */ .dvs{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;}/* ── FAQ ── */ .dfaq{border:1px solid var(--line);border-radius:13px;margin-bottom:10px;background:#fff;overflow:hidden;}.dfaq[open]{border-color:rgba(37,99,235,.4);box-shadow:var(--shadow);}.dfaq summary{padding:17px 20px;cursor:pointer;font-weight:650;font-size:.94rem;color:var(--blue-900); list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;}.dfaq summary::-webkit-details-marker{display:none;}.dfaq summary::after{content:"+";font-size:1.3rem;color:var(--blue-500);transition:transform .2s;line-height:1;}.dfaq[open] summary::after{transform:rotate(45deg);}.dfaq p{padding:0 20px 18px;color:var(--ink-soft);font-size:.89rem;line-height:1.7;margin:0;}/* ── FINAL CTA ── */ /* ── TRUST BAND ── */ .dtrust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-soft);}.dtrust-in{max-width:1120px;margin:0 auto;padding:34px 24px; display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;}.dtrust-i{display:flex;gap:12px;align-items:flex-start;}.dtrust-i svg{width:19px;height:19px;flex-shrink:0;margin-top:2px;stroke:var(--d-mint);fill:none; stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}.dtrust-i b{display:block;font-size:.85rem;color:var(--blue-900);font-weight:650;}.dtrust-i span{display:block;font-size:.76rem;color:var(--ink-faint);margin-top:3px;line-height:1.5;}@media(max-width:880px){.dsplit{grid-template-columns:1fr;gap:32px;}.dsplit.rev .dsplit-t{order:0;}.dvs{grid-template-columns:1fr;gap:14px;}.dsec{padding:54px 0;}}/* ═══ MEGA MENU HEADER ═══ */ .dnav-item{position:relative;}.dnav-btn{display:inline-flex;align-items:center;gap:5px;padding:8px 12px;border-radius:9px; font-size:14.5px;font-weight:500;color:var(--ink-soft);background:none;border:none;cursor:pointer; font-family:inherit;transition:background .15s,color .15s;}.dnav-btn:hover,.dnav-item:hover .dnav-btn{background:var(--blue-50);color:var(--blue-700);}.dnav-btn svg{transition:transform .2s;}.dmega{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px); display:grid;grid-template-columns:repeat(3,232px);gap:10px;padding:20px;border:1px solid var(--line); border-radius:18px;background:#fff;box-shadow:0 26px 60px -14px rgba(15,23,42,.22); opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s;z-index:60;}.dnav-item:hover .dmega,.dnav-item:focus-within .dmega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}.dmega a{display:block;padding:9px 10px;border-radius:10px;transition:background .15s;}.dmega a:hover{background:var(--blue-50);}.dmega strong{display:block;font-size:.89rem;color:var(--blue-900);font-weight:650;}.dmega span{display:block;font-size:.75rem;color:var(--ink-faint);margin-top:2px;line-height:1.45;}@media(max-width:1040px){.main-nav{display:none;}.site-header.open .main-nav{display:flex;position:fixed;inset:64px 12px auto 12px;flex-direction:column; align-items:stretch;gap:2px;padding:14px;border:1px solid var(--line);border-radius:18px;background:#fff; max-height:calc(100vh - 90px);overflow-y:auto;box-shadow:0 24px 60px -12px rgba(15,23,42,.25);z-index:70;}.site-header.open .dnav-btn{width:100%;justify-content:space-between;padding:13px 14px;font-size:15px;}.site-header.open .dnav-item.expanded .dnav-btn{background:var(--blue-50);color:var(--blue-700);}.site-header.open .dnav-item.expanded .dnav-btn svg{transform:rotate(180deg);}.site-header.open .dmega{position:static;transform:none;opacity:1;visibility:visible; grid-template-columns:1fr;box-shadow:none;border:none;padding:2px 6px 10px;display:none;}.site-header.open .dnav-item.expanded .dmega{display:grid;}.site-header.open .main-nav > a{padding:13px 14px;border-radius:10px;font-size:15px;}body.nav-lock{overflow:hidden;}}@media(max-width:1120px){.dmega{grid-template-columns:repeat(3,200px);}}/* hero mesh for the two-column homepage hero */ .hero.dhero-mesh > .wrap{position:relative;z-index:2;}/* ═══ INNER PAGE HERO LIFT ═══ */ .page-hero{position:relative;overflow:hidden;padding:66px 0 54px;background:var(--bg-soft); border-bottom:1px solid var(--line);}.page-hero::before{content:"";position:absolute;top:-55%;left:50%;transform:translateX(-50%); width:1100px;height:800px;pointer-events:none; background:radial-gradient(ellipse at center,rgba(37,99,235,.10),transparent 66%);}.page-hero::after{content:"";position:absolute;inset:0;pointer-events:none; background-image:linear-gradient(rgba(15,23,42,.03) 1px,transparent 1px), linear-gradient(90deg,rgba(15,23,42,.03) 1px,transparent 1px); background-size:52px 52px; mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent 76%); -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent 76%);}.page-hero .wrap{position:relative;z-index:2;}.page-hero .breadcrumbs{font-size:.78rem;color:var(--ink-faint);margin-bottom:18px;}.page-hero .breadcrumbs a{color:var(--ink-faint);}.page-hero .breadcrumbs a:hover{color:var(--blue-600);}.page-hero h1{font-family:var(--font-display);font-weight:600;letter-spacing:-.025em;line-height:1.08; font-size:clamp(2.2rem,4.8vw,3.5rem);color:var(--blue-900);max-width:20ch;}.page-hero h1 em{font-style:italic;color:var(--blue-500);}.page-hero > .wrap > p{font-size:clamp(1rem,1.5vw,1.12rem);color:var(--ink-soft);margin-top:18px; max-width:62ch;line-height:1.65;}/* ═══ CARD + ICON POLISH ═══ */ .card{border:1px solid var(--line);border-radius:16px;background:#fff;padding:28px; transition:transform .2s,border-color .2s,box-shadow .2s;}.card:hover{transform:translateY(-3px);border-color:rgba(37,99,235,.32); box-shadow:0 18px 42px -18px rgba(37,99,235,.3);}.card .icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center; background:var(--blue-50);border:1px solid var(--blue-100);margin-bottom:16px;font-size:0;}.card .icon svg{width:23px;height:23px;stroke:var(--blue-600);fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round;}.card h3{font-size:1.05rem;font-weight:700;color:var(--blue-900);letter-spacing:-.01em;}.card > p{color:var(--ink-soft);margin-top:8px;font-size:.9rem;line-height:1.6;}.card ul{margin-top:14px;padding-left:0;list-style:none;display:grid;gap:9px;}.card ul li{font-size:.86rem;color:var(--ink-soft);line-height:1.55;display:flex;gap:9px;align-items:flex-start;}.card ul li::before{content:"";flex-shrink:0;width:16px;height:16px;border-radius:50%;margin-top:2px; background:rgba(5,150,105,.1); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23059669' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size:10px;background-position:center;background-repeat:no-repeat;}/* ═══ CTA BAND + QUOTES ═══ */ .cta-band{position:relative;overflow:hidden;border-radius:24px;padding:64px 34px;text-align:center; border:1px solid rgba(37,99,235,.2);background:linear-gradient(160deg,var(--blue-50),#fff);}.cta-band::before{content:"";position:absolute;top:-50%;left:50%;transform:translateX(-50%); width:760px;height:560px;background:radial-gradient(circle,rgba(37,99,235,.13),transparent 66%);}.cta-band > *{position:relative;z-index:2;}.cta-band h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.8rem,3.6vw,2.6rem); letter-spacing:-.02em;color:var(--blue-900);}/* ═══ CALCULATOR VISUALS ═══ */ .dcalc-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:26px;align-items:start;}.dfield{margin-bottom:16px;}.dfield label{display:block;font-size:.78rem;font-weight:650;color:var(--blue-900);margin-bottom:6px;}.dfield .hint{font-size:.73rem;color:var(--ink-faint);margin-top:5px;line-height:1.5;}.dinp{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-size:.92rem; font-family:inherit;color:var(--ink);background:#fff;transition:border-color .15s,box-shadow .15s;}.dinp:focus{outline:none;border-color:var(--blue-400);box-shadow:0 0 0 3px rgba(37,99,235,.12);}.dg2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}.dbig{text-align:center;padding:26px;border-radius:16px;background:linear-gradient(160deg,var(--blue-50),#fff); border:1px solid rgba(37,99,235,.22);}.dbig-k{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-600);}.dbig-v{font-family:var(--font-display);font-size:clamp(2rem,5vw,3rem);font-weight:700; color:var(--blue-900);letter-spacing:-.02em;margin-top:8px;line-height:1.05;}.dbig-s{font-size:.82rem;color:var(--ink-soft);margin-top:8px;}.dchart{display:grid;gap:11px;}.dbar-row{display:grid;grid-template-columns:130px 1fr 100px;gap:12px;align-items:center;font-size:.82rem;}.dbar-lab{color:var(--ink-soft);}.dbar-track{height:10px;border-radius:999px;background:var(--bg-soft);overflow:hidden;border:1px solid var(--line);}.dbar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--blue-500),var(--blue-400));transition:width .5s cubic-bezier(.4,0,.2,1);}.dbar-fill.bad{background:linear-gradient(90deg,#dc2626,#f87171);}.dbar-fill.good{background:linear-gradient(90deg,#059669,#34d399);}.dbar-val{text-align:right;font-weight:700;color:var(--blue-900);font-variant-numeric:tabular-nums;}.ddonut{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}.dleg-wrap{display:grid;gap:9px;}.dleg{display:flex;align-items:center;gap:9px;font-size:.83rem;color:var(--ink-soft);}.dleg i{width:11px;height:11px;border-radius:3px;flex-shrink:0;}.dleg b{color:var(--blue-900);margin-left:auto;padding-left:14px;}.dtable{width:100%;border-collapse:collapse;font-size:.83rem;}.dtable th{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);font-size:.67rem; text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);}.dtable td{padding:10px 12px;border-bottom:1px solid var(--line);color:var(--ink-soft);}.dtable td.mono{text-align:right;font-variant-numeric:tabular-nums;color:var(--blue-900);font-weight:600;}.dtable tr:last-child td{border-bottom:none;}.dscen{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}.dscen-c{padding:18px;border-radius:13px;border:1px solid var(--line);background:#fff;text-align:center;}.dscen-c.good{border-color:rgba(5,150,105,.35);background:rgba(5,150,105,.05);}.dscen-c.bad{border-color:rgba(220,38,38,.3);background:rgba(220,38,38,.04);}.dscen-k{font-size:.67rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-faint);font-weight:800;}.dscen-v{font-size:1.35rem;font-weight:800;color:var(--blue-900);margin-top:8px;letter-spacing:-.02em;}.dscen-s{font-size:.73rem;color:var(--ink-faint);margin-top:5px;}.dblock{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);}.dblock h4{font-size:.69rem;text-transform:uppercase;letter-spacing:.12em;color:var(--blue-600); font-weight:800;margin-bottom:14px;}@media(max-width:880px){.dcalc-grid{grid-template-columns:1fr;}.dscen{grid-template-columns:1fr;}.dbar-row{grid-template-columns:95px 1fr 84px;font-size:.76rem;}}/* ═══ HEALTH SCORE SCORECARD ═══ */ .hs-q{border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:12px;background:#fff; transition:border-color .2s,box-shadow .2s;}.hs-q.answered{border-color:rgba(37,99,235,.35);}.hs-q-n{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-600);}.hs-q h4{font-size:.98rem;font-weight:650;color:var(--blue-900);margin-top:7px;line-height:1.45;}.hs-opts{display:grid;gap:8px;margin-top:14px;}.hs-opt{display:flex;align-items:center;gap:11px;padding:11px 14px;border:1px solid var(--line); border-radius:10px;cursor:pointer;font-size:.87rem;color:var(--ink-soft);background:#fff; transition:border-color .15s,background .15s,color .15s;text-align:left;font-family:inherit;width:100%;}.hs-opt:hover{border-color:var(--blue-400);background:var(--blue-50);}.hs-opt.sel{border-color:var(--blue-500);background:var(--blue-50);color:var(--blue-900);font-weight:600;}.hs-opt i{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;}.hs-opt.sel i{border-color:var(--blue-500);background:var(--blue-500);box-shadow:inset 0 0 0 3px #fff;}.hs-prog{position:sticky;top:70px;z-index:20;background:#fff;border:1px solid var(--line); border-radius:12px;padding:14px 18px;margin-bottom:20px;box-shadow:var(--shadow);}.hs-prog-bar{height:7px;border-radius:999px;background:var(--bg-soft);overflow:hidden;margin-top:9px;border:1px solid var(--line);}.hs-prog-fill{height:100%;background:linear-gradient(90deg,var(--blue-500),var(--d-mint));width:0; transition:width .35s cubic-bezier(.4,0,.2,1);}.hs-grade{text-align:center;padding:34px 26px;border-radius:20px;border:1px solid rgba(37,99,235,.25); background:linear-gradient(160deg,var(--blue-50),#fff);}.hs-grade-l{font-family:var(--font-display);font-size:4.4rem;font-weight:700;line-height:1;letter-spacing:-.03em;}.hs-grade-t{font-size:1.15rem;font-weight:700;color:var(--blue-900);margin-top:10px;}.hs-grade-s{color:var(--ink-soft);margin-top:10px;font-size:.92rem;line-height:1.6;max-width:46ch; margin-left:auto;margin-right:auto;}.hs-domain{display:grid;gap:12px;margin-top:8px;}.hs-dom{display:grid;grid-template-columns:150px 1fr 54px;gap:12px;align-items:center;font-size:.85rem;}.hs-dom-l{color:var(--ink-soft);}.hs-dom-t{height:9px;border-radius:999px;background:var(--bg-soft);overflow:hidden;border:1px solid var(--line);}.hs-dom-f{height:100%;border-radius:999px;transition:width .5s;}.hs-dom-v{text-align:right;font-weight:700;color:var(--blue-900);font-variant-numeric:tabular-nums;}.hs-leak{border:1px solid var(--line);border-left:3px solid var(--d-amber);border-radius:10px; padding:16px 18px;margin-bottom:10px;background:#fff;}.hs-leak b{display:block;font-size:.9rem;color:var(--blue-900);}.hs-leak p{font-size:.85rem;color:var(--ink-soft);margin-top:6px;line-height:1.6;}.hs-leak span{display:inline-block;margin-top:9px;font-size:.72rem;font-weight:800;letter-spacing:.06em; text-transform:uppercase;color:var(--blue-600);}@media(max-width:700px){.hs-dom{grid-template-columns:110px 1fr 46px;font-size:.78rem;}.hs-grade-l{font-size:3.4rem;}}/* ═══════════════════════════════════════════════════════════ ACCENT SYSTEM v3 — white base · blue structure · orange energy ═══════════════════════════════════════════════════════════ */ /* eyebrow pills become accent */ .deyebrow{color:var(--orange-700);border-color:var(--orange-300);background:var(--orange-50);}.dsec-tag{color:var(--orange-600);}/* headline emphasis: orange, not blue */ .dh1 em,.page-hero h1 em,.dhook-line em,.dsplit-t h3 em{color:var(--orange-600);font-style:italic;}/* primary CTA carries the accent; blue becomes the quiet secondary */ .dbtn-p{background:var(--orange-500);box-shadow:0 10px 28px -8px rgba(249,115,22,.45);}.dbtn-p:hover{background:var(--orange-600);box-shadow:0 16px 38px -8px rgba(249,115,22,.6);}.dbtn-o{color:var(--blue-800);border-color:var(--line);}.dbtn-o:hover{border-color:var(--orange-400);color:var(--orange-700);}.btn-primary{background:var(--orange-500)!important;border-color:var(--orange-500)!important;}.btn-primary:hover{background:var(--orange-600)!important;border-color:var(--orange-600)!important;}/* hero mesh: warm on one side, cool on the other */ .page-hero::before{ background:radial-gradient(ellipse at 42% 42%,rgba(249,115,22,.11),transparent 60%), radial-gradient(ellipse at 62% 46%,rgba(37,99,235,.10),transparent 62%);}/* rules and dividers */ .dhook-rule{background:linear-gradient(90deg,var(--orange-500),var(--blue-500));}/* cards: orange top-edge on hover, blue kept for icons */ .card:hover{border-color:var(--orange-300);box-shadow:0 18px 42px -18px rgba(249,115,22,.26);}.card .icon{background:var(--orange-50);border-color:var(--orange-100);}.card .icon svg{stroke:var(--orange-600);}/* tags */ .dtag.hot{background:var(--orange-50);color:var(--orange-700);}.dtag.win{background:rgba(5,150,105,.1);color:var(--green);}/* contrast + final panels */ .dfinal,.cta-band{border-color:var(--orange-200,rgba(249,115,22,.24)); background:linear-gradient(155deg,var(--orange-50),#fff 62%);}.dfinal::before,.cta-band::before{background:radial-gradient(circle,rgba(249,115,22,.14),transparent 66%);}/* FAQ */ .dfaq[open]{border-color:var(--orange-300);}.dfaq summary::after{color:var(--orange-500);}/* nav */ .dnav-btn:hover,.dnav-item:hover .dnav-btn{background:var(--orange-50);color:var(--orange-700);}.dmega a:hover{background:var(--orange-50);}/* proof strip numerals */ .dproof b em{color:var(--orange-500);}/* calculator + scorecard accents */ .dbig{background:linear-gradient(155deg,var(--orange-50),#fff 66%);border-color:var(--orange-200,rgba(249,115,22,.22));}.dbig-k{color:var(--orange-700);}.dbar-fill{background:linear-gradient(90deg,var(--orange-500),var(--orange-400));}.dblock h4{color:var(--orange-600);}.dinp:focus{border-color:var(--orange-400);box-shadow:0 0 0 3px rgba(249,115,22,.14);}.hs-opt:hover{border-color:var(--orange-400);background:var(--orange-50);}.hs-opt.sel{border-color:var(--orange-500);background:var(--orange-50);}.hs-opt.sel i{border-color:var(--orange-500);background:var(--orange-500);}.hs-q.answered{border-color:var(--orange-300);}.hs-prog-fill{background:linear-gradient(90deg,var(--orange-500),var(--blue-500));}.hs-grade{border-color:var(--orange-200,rgba(249,115,22,.22)); background:linear-gradient(155deg,var(--orange-50),#fff 66%);}.hs-leak{border-left-color:var(--orange-500);}.hs-leak span{color:var(--orange-600);}/* trust band keeps green ticks but warms the ground */ .dtrust{background:linear-gradient(180deg,var(--orange-50),#fff);}/* ═══ MEGA MENU v3 — Innovaccer-style tiered panel ═══ */ .dmega.wide{grid-template-columns:1fr;width:min(1080px,94vw);padding:24px 26px;gap:0;}.dmega-sec{padding:6px 0 16px;}.dmega-sec + .dmega-sec{border-top:1px solid var(--line);padding-top:16px;}.dmega-lab{font-size:.63rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase; color:var(--ink-faint);margin-bottom:12px;}.dmega-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;}.dmega-tile{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:11px; background:var(--bg-soft);border:1px solid transparent;transition:background .15s,border-color .15s;}.dmega-tile:hover{background:var(--orange-50);border-color:var(--orange-300);}.dmega-tile i{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;}.dmega-tile i svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2;}.dmega-tile b{font-size:.88rem;color:var(--blue-900);font-weight:650;}@media(max-width:1040px){.dmega.wide{width:auto;padding:2px 6px 10px;}.dmega-tiles,.dmega-grid,.dmega-rows{grid-template-columns:1fr;}.dmega-sec + .dmega-sec{border-top:1px solid var(--line);}}/* ═══════════════════════════════════════════════════════════ RESPONSIVE HARDENING + STATUS PALETTE POLISH ═══════════════════════════════════════════════════════════ */ /* tables must never break the page on narrow screens */ .card:has(> .dtable),.dpanel:has(> .dtable){overflow-x:auto;}.dtable{min-width:520px;}.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}@media(max-width:760px){.dtable{min-width:480px;font-size:.8rem;}.dtable th,.dtable td{padding:9px 10px;}}/* never allow horizontal page scroll */ html,body{max-width:100%;}/* overflow-x:hidden removed — it forces overflow-y to compute as auto, which makes body a scroll container and silently kills position:sticky */ img,svg,video,table{max-width:100%;}.wrap{width:100%;box-sizing:border-box;}/* soft status palette — pastel tints in the clinical register */ .dtag{border:1px solid transparent;}.dtag.crit{background:#fee2e2;color:#b91c1c;border-color:#fecaca;}.dtag.warn{background:#fff7ed;color:#c2410c;border-color:#fed7aa;}.dtag.hot{background:#eff6ff;color:#1d4ed8;border-color:#dbeafe;}.dtag.win{background:#ecfdf5;color:#047857;border-color:#d1fae5;}.dtag.mut{background:#f8fafc;color:#64748b;border-color:#e2e8f0;}/* status card component (soft tinted, rounded — clinical dashboard register) */ .dstat.ok{background:linear-gradient(150deg,#f0fdf4,#fff);border-color:#bbf7d0;}.dstat.ok .dstat-pill{background:#22c55e;}/* mobile: menu, hero and grids */ @media(max-width:1040px){.dmega.wide{width:auto;max-width:100%;padding:2px 4px 10px;}.dmega-tiles,.dmega-grid,.dmega-rows{grid-template-columns:1fr;}.dmega-sec{padding:4px 0 10px;}}@media(max-width:760px){.page-hero{padding:44px 0 38px;}.page-hero h1{font-size:clamp(1.85rem,7vw,2.4rem);}.dhook-line{font-size:clamp(1.45rem,6vw,2rem);}.dsec-h{font-size:clamp(1.5rem,5.5vw,2rem);}.dproof{grid-template-columns:repeat(2,1fr);}.dcta{justify-content:stretch;}.dcta .dbtn{flex:1 1 100%;justify-content:center;}.cta-band,.dfinal{padding:44px 20px;}.dpanel{padding:16px;}.drow{padding:11px 12px;}.drow-t b{font-size:.8rem;}.dtrust-in{grid-template-columns:1fr;}}@media(max-width:420px){.dproof{grid-template-columns:1fr;}.dproof div{padding:18px 14px;}}/* ═══ SUPPORT WIDGET — desktop & tablet only ═══ */ .dsup-launch{position:relative;width:56px;height:56px;border-radius:50%;border:none;cursor:pointer; background:var(--orange-500);color:#fff;display:grid;place-items:center; box-shadow:0 12px 30px -8px rgba(249,115,22,.6);transition:transform .18s,background .18s;}.dsup-launch:hover{transform:translateY(-2px) scale(1.04);background:var(--orange-600);}.dsup-dot{position:absolute;top:12px;right:12px;width:9px;height:9px;border-radius:50%; background:#22c55e;border:2px solid #fff;}.dsup-panel{position:absolute;right:0;bottom:70px;width:368px;max-height:min(620px,80vh); display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px; box-shadow:0 26px 70px -18px rgba(15,23,42,.32);overflow:hidden;}.dsup-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px; padding:16px 18px;border-bottom:1px solid var(--line);background:linear-gradient(150deg,var(--orange-50),#fff);}.dsup-head b{display:block;font-size:.95rem;color:var(--blue-900);}.dsup-head span{display:block;font-size:.75rem;color:var(--ink-faint);margin-top:3px;}.dsup-x{background:none;border:none;font-size:1.3rem;line-height:1;color:var(--ink-faint);cursor:pointer;padding:2px 6px;border-radius:6px;}.dsup-x:hover{background:var(--bg-soft);color:var(--ink);}.dsup-body{flex:1;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:10px;}.dsup-msg{font-size:.86rem;line-height:1.6;padding:11px 14px;border-radius:14px;max-width:88%;}.dsup-msg.bot{background:var(--bg-soft);color:var(--ink);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:5px;}.dsup-msg.you{background:var(--blue-600);color:#fff;align-self:flex-end;border-bottom-right-radius:5px;}.dsup-msg a{color:var(--orange-600);font-weight:650;}.dsup-msg.you a{color:#fff;text-decoration:underline;}.dsup-quick{display:grid;gap:7px;margin-top:4px;}.dsup-q{text-align:left;font-family:inherit;font-size:.82rem;padding:10px 13px;border-radius:11px; border:1px solid var(--line);background:#fff;color:var(--blue-800);cursor:pointer;transition:all .15s;}.dsup-q:hover{border-color:var(--orange-400);background:var(--orange-50);color:var(--orange-700);}.dsup-foot{padding:13px 18px;border-top:1px solid var(--line);background:var(--bg-soft);}.dsup-ticket-btn,.dsup-send,.dsup-close2{width:100%;padding:12px;border-radius:11px;border:none;cursor:pointer; font-family:inherit;font-size:.88rem;font-weight:700;background:var(--orange-500);color:#fff;transition:background .15s;}.dsup-ticket-btn:hover,.dsup-send:hover,.dsup-close2:hover{background:var(--orange-600);}.dsup-send:disabled{opacity:.6;cursor:default;}.dsup-form{display:flex;flex-direction:column;flex:1;min-height:0;}.dsup-fields{flex:1;overflow-y:auto;padding:16px 18px;display:grid;gap:12px;}.dsup-fields label{display:block;font-size:.76rem;font-weight:650;color:var(--blue-900);}.dsup-fields input,.dsup-fields select,.dsup-fields textarea{width:100%;box-sizing:border-box;margin-top:5px; padding:10px 12px;border:1px solid var(--line);border-radius:9px;font-family:inherit;font-size:.86rem; color:var(--ink);background:#fff;}.dsup-fields input:focus,.dsup-fields select:focus,.dsup-fields textarea:focus{outline:none; border-color:var(--orange-400);box-shadow:0 0 0 3px rgba(249,115,22,.14);}.dsup-note{font-size:.7rem;color:var(--ink-faint);margin-top:9px;line-height:1.5;}.dsup-done{padding:34px 24px;text-align:center;}.dsup-tick{width:52px;height:52px;border-radius:50%;background:#ecfdf5;color:#059669; display:grid;place-items:center;margin:0 auto 14px;border:1px solid #d1fae5;}.dsup-done b{display:block;font-size:1.05rem;color:var(--blue-900);}.dsup-ref{font-family:var(--font-mono);font-size:.85rem;color:var(--orange-700);margin-top:8px; background:var(--orange-50);display:inline-block;padding:5px 12px;border-radius:8px;}.dsup-close2{margin-top:18px;}/* hidden on phones — desktop and tablet only */ /* CRITICAL: class-level display rules override the [hidden] attribute, which made every support panel render at once. This restores it. */ .dsup-panel[hidden],.dsup-form[hidden],.dsup-done[hidden], .dsup-body[hidden],.dsup-foot[hidden],[hidden]{display:none!important;}/* ═══ LEGAL / DOCUMENT PAGES ═══ */ /* ═══════════════════════════════════════════════════════════ VISUAL SYSTEM v4 — depth, colour, motion ═══════════════════════════════════════════════════════════ */ :root{ --teal-500:#14b8a6; --teal-50:#f0fdfa; --violet-500:#8b5cf6; --violet-50:#f5f3ff; --rose-500:#f43f5e; --rose-50:#fff1f2; --amber-500:#f59e0b; --amber-50:#fffbeb; --emerald-500:#10b981; --emerald-50:#ecfdf5; --sky-500:#0ea5e9; --sky-50:#f0f9ff; }/* ── FLOATING STAT CARDS (the Xtallo-style metric boxes) ── */ @keyframes dfloatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}/* ── ANIMATED COUNTERS / BIG STAT BAND ── */ .dstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;}/* ── SCROLL REVEAL ── */ .rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);}.rv.in{opacity:1;transform:none;}.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}.rv-d3{transition-delay:.27s}.rv-d4{transition-delay:.36s}@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none;}.dfloat,.dorb{animation:none!important;}}/* ── DECORATIVE GRADIENT ORBS ── */ .dorb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0;}.dorb.o1{width:340px;height:340px;background:rgba(249,115,22,.20);top:-90px;left:-70px;animation:dorbA 17s ease-in-out infinite;}.dorb.o2{width:300px;height:300px;background:rgba(37,99,235,.18);bottom:-80px;right:-60px;animation:dorbA 21s ease-in-out infinite reverse;}.dorb.o3{width:230px;height:230px;background:rgba(20,184,166,.14);top:44%;left:46%;animation:dorbA 25s ease-in-out infinite;}@keyframes dorbA{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(36px,-26px) scale(1.1)}66%{transform:translate(-24px,22px) scale(.94)}}/* ── COLOURED FEATURE CARDS ── */ /* ── LIVE MINI DASHBOARD (animated bars) ── */ @keyframes dgrow{from{height:0;opacity:0}to{opacity:1}}/* ── PULSE / LIVE DOT ── */ @keyframes dpulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.55)}70%{box-shadow:0 0 0 9px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}/* ── SECTION TINT VARIANTS (more colour across the page) ── */ .dsec.tint-warm{background:linear-gradient(180deg,var(--orange-50),#fff);}.dsec.tint-cool{background:linear-gradient(180deg,var(--sky-50),#fff);}.dsec.tint-mint{background:linear-gradient(180deg,var(--emerald-50),#fff);}.dsec.tint-violet{background:linear-gradient(180deg,var(--violet-50),#fff);}/* floats anchor to the hero wrap (no markup restructuring needed) */ .hero .wrap{position:relative;}.page-hero{position:relative;overflow:hidden;}.page-hero .wrap{position:relative;z-index:1;}.page-hero .dorb.o1{width:280px;height:280px;top:-80px;left:-60px;}.page-hero .dorb.o2{width:240px;height:240px;bottom:-70px;right:-50px;}/* ═══════════════════════════════════════════════════════════ ALIGNMENT + MENU POSITIONING FIXES (authoritative — last wins) ═══════════════════════════════════════════════════════════ */ /* 1. INNER PAGE HERO — the original stylesheet set text-align:center while CTAs used flex-start, producing centred text with left-aligned buttons. Left alignment is now enforced consistently for every element. */ .page-hero{text-align:left;}.page-hero .wrap{text-align:left;}.page-hero .breadcrumbs{text-align:left;margin-left:0;}.page-hero h1{max-width:22ch;margin-left:0;margin-right:0;text-align:left;}.page-hero p,.page-hero > .wrap > p{margin-left:0;margin-right:0;text-align:left;max-width:62ch;}.page-hero .deyebrow{margin-left:0;}.page-hero .dcta{justify-content:flex-start;}/* 2. WIDE MEGA MENU — was centred on the nav *button* (left:50%), so a 1080px panel anchored near the left edge overflowed off-screen. Anchor it to the viewport instead so it is always fully visible and centred. */ .dmega.wide{position:fixed;top:70px;left:50%; transform:translateX(-50%) translateY(8px); width:min(1080px,94vw);max-height:calc(100vh - 90px);overflow-y:auto;}.dnav-item:hover .dmega.wide,.dnav-item:focus-within .dmega.wide{ transform:translateX(-50%) translateY(0);}/* narrow menus stay anchored to their button but must never overflow */ .dmega:not(.wide){max-width:min(720px,92vw);}/* 3. PROOF STRIP — values are often short phrases, not numerals. Scale the type so words do not render at display-numeral size. */ .dproof b{font-size:clamp(1.05rem,2vw,1.55rem);line-height:1.2;overflow-wrap:break-word;hyphens:auto;}.dproof b:has(+ span){display:block;}.dproof div{min-width:0;}.dproof span{overflow-wrap:break-word;}/* 4. consolidate float positions (remove earlier conflicting values) */ /* 5. card icon — resolve flex/grid duplicate */ .card .icon{display:grid;place-items:center;width:46px;height:46px;}/* 6. hero mock must not overflow its column */ .hero .wrap{align-items:center;}/* 7. responsive: mega menu inside the mobile drawer must return to flow */ @media(max-width:1040px){.dmega.wide{position:static;transform:none;width:auto;max-width:100%; max-height:none;overflow:visible;box-shadow:none;border:none;padding:2px 4px 10px;}.dnav-item:hover .dmega.wide,.dnav-item:focus-within .dmega.wide{transform:none;}.dmega:not(.wide){position:static;transform:none;max-width:100%;box-shadow:none;border:none;}.dnav-item:hover .dmega,.dnav-item:focus-within .dmega{transform:none;}}@media(max-width:760px){.page-hero h1{max-width:100%;}.page-hero .dcta{flex-direction:column;align-items:stretch;}.dproof{grid-template-columns:repeat(2,1fr);}.dproof b{font-size:clamp(.95rem,4vw,1.25rem);}}/* ============================================================ PRICING v2 — gated INR rate card ============================================================ */ .pr-hero .eyebrow{ font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--orange-600); display:inline-flex; align-items:center; gap:9px; }.pr-hero .eyebrow::before{ content:""; width:22px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--orange-400),var(--orange-600)); }.pr-hero .lead{ color:var(--ink-soft); font-size:18px; max-width:60ch; margin-top:16px; }/* the gate */ .pr-gate .lead{ color:var(--ink-soft); font-size:16px; margin-top:14px; }.pr-form .btn{ margin-top:6px; }/* the rate card */ .pr-t .num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600; white-space:nowrap; }.pr-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }@keyframes prIn{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }/* ============================================================ REVENUE INTEGRITY ============================================================ */ .ri-hero{ padding:64px 0 40px; }.ri-hero .eyebrow{ font-size:12.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--orange-600); display:inline-flex; align-items:center; gap:9px; }.ri-hero .eyebrow::before{ content:""; width:22px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--orange-400),var(--orange-600)); }.ri-hero h1{ font-family:var(--font-display); font-size:clamp(30px,4.2vw,48px); line-height:1.12; letter-spacing:-.025em; margin:16px 0 0; max-width:20ch; }.ri-hero h1 em{ font-style:normal; color:var(--orange-600); }.ri-hero .lead{ color:var(--ink-soft); font-size:18px; max-width:62ch; margin-top:18px; }.ri-star{ background:linear-gradient(180deg,var(--blue-900),#0d2149); color:#cbd5e1; padding:64px 0; }.ri-star-in{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(28px,4vw,56px); align-items:start; }.ri-star .eyebrow{ font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--orange-300); }.ri-star h2{ font-family:var(--font-display); color:#fff; font-size:clamp(25px,3.2vw,36px); line-height:1.16; letter-spacing:-.02em; margin:14px 0 0; max-width:19ch; }.ri-star p{ margin-top:15px; font-size:16px; line-height:1.68; }.ri-star b{ color:#fff; }.ri-l{ list-style:none; margin:22px 0 0; padding:0; }.ri-l li{ position:relative; padding:9px 0 9px 24px; font-size:15.5px; line-height:1.6; border-top:1px solid rgba(255,255,255,.1); }.ri-l li:first-child{ border-top:0; }.ri-l li::before{ content:""; position:absolute; left:0; top:17px; width:9px; height:9px; border-radius:2px; background:var(--orange-500); }.ri-calc{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.13); border-radius:14px; padding:22px 24px; }.ri-calc-h{ font-size:11.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:#93a4bd; padding-bottom:13px; border-bottom:1px solid rgba(255,255,255,.12); }.ri-row{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:14.5px; }.ri-row b{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:#fff; font-size:16px; }.ri-row.is-bad b{ color:#ff8a6b; font-size:20px; }.ri-bar{ position:relative; height:26px; margin-top:12px; border-radius:6px; background:rgba(255,255,255,.07); display:flex; align-items:center; }.ri-bar i{ position:absolute; left:0; top:0; bottom:0; border-radius:6px; background:#3b82f6; }.ri-bar.is-bad i{ background:linear-gradient(90deg,var(--orange-500),#ff5a3c); }.ri-bar em{ position:relative; font-style:normal; font-size:12px; font-weight:700; color:#fff; padding-left:10px; font-variant-numeric:tabular-nums; }.ri-calc-f{ font-size:13px !important; color:#93a4bd; margin-top:16px !important; }.ri-g .card{ display:flex; flex-direction:column; }.ri-g .card h3{ font-family:var(--font-display); font-size:18.5px; letter-spacing:-.01em; }.ri-g .card p{ font-size:14.6px; color:var(--ink-soft); line-height:1.62; margin-top:10px; }.ri-n{ margin-top:auto !important; padding-top:12px; padding-left:12px; border-top:1px solid var(--line); border-left:2px solid var(--orange-300); font-size:13.6px !important; color:var(--ink-faint) !important; }.ri-honest{ padding:64px 0; }.ri-honest-in{ max-width:900px; margin:0 auto; background:var(--bg-soft); border:1px solid var(--line); border-radius:16px; padding:clamp(26px,4vw,44px); }.ri-honest h2{ font-family:var(--font-display); font-size:clamp(23px,2.8vw,30px); letter-spacing:-.02em; }.ri-honest > .wrap > .ri-honest-in > p{ color:var(--ink-soft); margin-top:12px; }.ri-h-g{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:24px; }.ri-h-g > div{ background:#fff; border:1px solid var(--line); border-radius:11px; padding:18px 20px; }.ri-h-g b{ display:block; font-size:15px; color:var(--ink); margin-bottom:7px; }.ri-h-g span{ font-size:14px; color:var(--ink-soft); line-height:1.6; }@media(max-width:860px){.ri-star-in{ grid-template-columns:1fr; }.ri-star h2,.ri-hero h1{ max-width:none; }.ri-h-g{ grid-template-columns:1fr; }}/* ============================================================ BLOG ============================================================ */ .bl-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }.bl-meta span{ font-size:12.5px; font-weight:700; color:var(--ink-soft); background:rgba(255,255,255,.7); border:1px solid var(--line); border-radius:999px; padding:5px 12px; }.bl-g{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; padding:52px 0; }.bl-c{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; text-decoration:none; color:inherit; transition:box-shadow .25s, transform .25s, border-color .25s; }.bl-c:hover{ box-shadow:var(--shadow); transform:translateY(-2px); border-color:var(--orange-300); }.bl-cat{ align-self:flex-start; font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--orange-700); background:var(--orange-50); border:1px solid var(--orange-100); border-radius:999px; padding:4px 10px; }.bl-c h3{ font-family:var(--font-display); font-size:20px; line-height:1.26; letter-spacing:-.015em; margin:14px 0 9px; }.bl-c p{ font-size:14.6px; color:var(--ink-soft); line-height:1.6; }.bl-body{ max-width:68ch; margin:52px auto; }.bl-body p{ font-size:17px; line-height:1.72; color:var(--ink-soft); margin-bottom:20px; }.bl-body strong,.bl-body b{ color:var(--ink); }.bl-body h2{ font-family:var(--font-display); font-size:26px; letter-spacing:-.02em; color:var(--ink); margin:38px 0 14px; }.bl-body ul{ margin:0 0 22px 20px; }.bl-body li{ font-size:16.5px; line-height:1.68; color:var(--ink-soft); margin-bottom:10px; }.bl-body a{ color:var(--blue-600); border-bottom:1px solid var(--blue-100); }.bl-body a:hover{ border-bottom-color:var(--blue-600); }.bl-tbl-w{ overflow-x:auto; border:1px solid var(--line); border-radius:12px; margin:0 0 24px; }.bl-t{ width:100%; border-collapse:collapse; font-size:15px; min-width:480px; }.bl-t th,.bl-t td{ padding:12px 15px; text-align:left; border-bottom:1px solid var(--line); }.bl-t thead th{ background:var(--bg-soft); font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-soft); font-weight:800; }.bl-t tbody th{ font-weight:700; color:var(--ink); }.bl-t td{ color:var(--ink-soft); font-family:var(--font-mono); font-variant-numeric:tabular-nums; }.bl-t tr.bl-tot th,.bl-t tr.bl-tot td{ background:var(--orange-50); color:var(--orange-700); font-weight:700; border-bottom:0; }.bl-end{ margin-top:44px; padding:24px 26px; background:var(--bg-soft); border:1px solid var(--line); border-left:3px solid var(--orange-500); border-radius:12px; }.bl-end h3{ font-family:var(--font-display); font-size:19px; }.bl-end p{ font-size:15px !important; margin:10px 0 0 !important; }/* blog v2 — answer block, hubs, FAQ, related */ .bl-ans{ background:linear-gradient(180deg,var(--blue-50),#fff); border:1px solid var(--blue-100); border-left:3px solid var(--blue-500); border-radius:12px; padding:20px 22px; margin:0 0 30px; }.bl-ans b{ display:block; font-size:11.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--blue-700); margin-bottom:8px; }.bl-ans p{ margin:0 !important; font-size:16.5px !important; color:var(--ink) !important; line-height:1.66; }.bl-faq{ border:1px solid var(--line); border-radius:10px; margin-bottom:10px; background:#fff; }.bl-faq summary{ cursor:pointer; padding:14px 18px; font-weight:700; font-size:15.5px; list-style:none; display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }.bl-faq summary::-webkit-details-marker{ display:none; }.bl-faq summary::after{ content:"+"; color:var(--orange-600); font-size:20px; line-height:1; flex:0 0 auto; }.bl-faq[open] summary::after{ content:"–"; }.bl-faq p{ padding:0 18px 16px; margin:0 !important; font-size:15.5px !important; }.bl-rel{ margin-top:40px; padding-top:26px; border-top:1px solid var(--line); }.bl-rel h3{ font-family:var(--font-display); font-size:19px; margin-bottom:14px; }.bl-rel-g{ display:grid; gap:10px; }.bl-rel-g a{ display:block; padding:14px 16px; border:1px solid var(--line); border-radius:10px; text-decoration:none; color:inherit; transition:.2s; }.bl-rel-g a:hover{ border-color:var(--orange-300); background:var(--orange-50); }.bl-rel-g b{ display:block; font-size:15px; color:var(--ink); }.bl-rel-g span{ display:block; font-size:13.5px; color:var(--ink-soft); margin-top:4px; }/* ============================================================ HOMEPAGE ASSISTANT DEMO ============================================================ */ .dd-sec .sec-head h2{ font-family:var(--font-display); font-size:clamp(26px,3.2vw,36px); letter-spacing:-.022em; margin-top:14px; }.dd-bar{ display:flex; align-items:center; gap:7px; padding:13px 18px; background:var(--bg-soft); border-bottom:1px solid var(--line); }.dd-bar i{ width:10px; height:10px; border-radius:50%; background:#cbd5e1; }.dd-bar i:first-child{ background:#f87171 }.dd-bar i:nth-child(2){ background:#fbbf24 }.dd-bar i:nth-child(3){ background:#34d399 }.dd-bar em{ font-style:normal; font-size:13px; font-weight:700; color:var(--ink-soft); margin-left:10px; }.dd-live{ margin-left:auto; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--green); display:inline-flex; align-items:center; gap:6px; }.dd-live::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--green); animation:ddPulse 2.4s ease-out infinite; }@keyframes ddPulse{0%{box-shadow:0 0 0 0 rgba(5,150,105,.5)}70%{box-shadow:0 0 0 7px rgba(5,150,105,0)}100%{box-shadow:0 0 0 0 rgba(5,150,105,0)}}.dd-body{ min-height:280px; max-height:430px; overflow-y:auto; padding:20px; }.dd-bub{ max-width:88%; font-size:15px; line-height:1.62; color:var(--ink-soft); background:var(--bg-soft); border:1px solid var(--line); border-radius:13px; padding:14px 16px; }.dd-m.you .dd-bub{ background:var(--blue-600); border-color:var(--blue-600); color:#fff; font-weight:600; }.dd-bub b{ color:var(--ink); }.dd-badge{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--green); margin-bottom:9px; }.dd-tbl{ margin:13px 0; border:1px solid var(--line); border-radius:9px; overflow:hidden; background:#fff; }.dd-tbl-h{ font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); padding:9px 13px; background:var(--bg-soft); border-bottom:1px solid var(--line); }.dd-tr{ display:flex; justify-content:space-between; gap:14px; padding:9px 13px; font-size:13.6px; border-bottom:1px solid var(--line); }.dd-tr:last-child{ border-bottom:0; }.dd-tr b{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--ink); text-align:right; }.dd-tr.is-hot{ background:var(--orange-50); }.dd-tr.is-hot b{ color:var(--orange-700); }.dd-link{ display:inline-block; margin-top:11px; font-size:13.5px; font-weight:700; color:var(--blue-600); }.dd-dots{ display:inline-flex; gap:5px; }.dd-dots i{ width:7px; height:7px; border-radius:50%; background:var(--ink-faint); animation:ddB 1.3s infinite; }.dd-dots i:nth-child(2){ animation-delay:.16s }.dd-dots i:nth-child(3){ animation-delay:.32s }@keyframes ddB{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}.dd-form{ display:flex; gap:10px; padding:14px 18px; border-top:1px solid var(--line); background:#fff; }.dd-in{ flex:1; font:inherit; font-size:15px; padding:11px 14px; border:1px solid var(--line); border-radius:9px; background:var(--bg-soft); color:var(--ink); }.dd-in:focus{ outline:2px solid var(--blue-500); outline-offset:1px; background:#fff; }.dd-send{ width:42px; border:0; border-radius:9px; cursor:pointer; font-size:18px; color:#fff; background:linear-gradient(135deg,var(--orange-500),var(--orange-600)); }.dd-send:hover{ filter:brightness(1.06); }.dd-chips{ display:flex; flex-wrap:wrap; gap:8px; padding:0 18px 14px; }.dd-chips button{ font:inherit; font-size:13px; font-weight:600; color:var(--ink-soft); background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 13px; cursor:pointer; min-height:34px; transition:.18s; }.dd-chips button:hover{ border-color:var(--orange-400); color:var(--orange-700); background:var(--orange-50); }.dd-hint{ padding:0 18px 16px; font-size:12.5px; color:var(--ink-faint); }@media(prefers-reduced-motion:reduce){.dd-live::before,.dd-dots i{ animation:none }}@media(max-width:640px){.dd-bub{ max-width:94%; }.dd-body{ padding:16px; }}/* ============================================================ BANNERS — page-hero upgrade ============================================================ */ .page-hero{ position:relative; overflow:hidden; padding:56px 0 44px; background:linear-gradient(180deg,var(--blue-50) 0%, #fff 78%); border-bottom:1px solid var(--line); }.page-hero::after{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(760px 300px at 6% -18%, rgba(249,115,22,.09), transparent 62%), radial-gradient(660px 280px at 92% -12%, rgba(37,99,235,.11), transparent 60%); }.page-hero > .wrap{ position:relative; z-index:1; }.page-hero .breadcrumbs{ font-size:13px; color:var(--ink-faint); font-weight:600; }.page-hero .breadcrumbs a{ color:var(--ink-soft); }.page-hero h1{ font-family:var(--font-display); font-size:clamp(30px,4.2vw,46px); line-height:1.12; letter-spacing:-.026em; margin:14px 0 0; max-width:22ch; text-wrap:balance; }.page-hero > .wrap > p{ color:var(--ink-soft); font-size:17.5px; max-width:62ch; margin-top:14px; text-wrap:pretty; }.dorb{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; pointer-events:none; }.dorb.o1{ width:340px; height:340px; left:-90px; top:-140px; background:radial-gradient(circle,rgba(249,115,22,.34),transparent 68%); }.dorb.o2{ width:400px; height:400px; right:-120px; top:-180px; background:radial-gradient(circle,rgba(37,99,235,.3),transparent 68%); }@media(max-width:640px){.page-hero{ padding:40px 0 32px }.page-hero h1{ max-width:none }}/* ============================================================ PRICE BOXES — visible structure, locked figures ============================================================ */ .pb{ display:flex; flex-direction:column; position:relative; background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 22px 24px; transition:box-shadow .25s, transform .25s, border-color .25s; }.pb:hover{ box-shadow:var(--shadow); transform:translateY(-3px); border-color:var(--blue-100); }.pb.is-lead{ border-color:var(--orange-300); box-shadow:0 0 0 1px var(--orange-100), var(--shadow); }.pb h3{ font-family:var(--font-display); font-size:22px; letter-spacing:-.015em; }.pb-amt{ font-family:var(--font-mono); font-size:34px; font-weight:600; color:var(--blue-900); line-height:1; display:flex; align-items:baseline; gap:6px; }.pb-amt small{ font-family:var(--font-body); font-size:13px; color:var(--ink-faint); font-weight:500; }.pb-lock{ position:relative; letter-spacing:.02em; color:var(--ink-faint); filter:blur(.4px); user-select:none; transition:.3s; }.pb.is-open .pb-lock{ color:var(--blue-900); filter:none; letter-spacing:normal; }.pb-yr{ font-size:13px; color:var(--ink-faint); margin-top:8px; font-family:var(--font-mono); }.pb.is-open .pb-yr{ color:var(--ink-soft); }.pb.is-lead .pb-l li::before{ background:var(--orange-50); border-color:var(--orange-400); }.pb-cta{ width:100%; justify-content:center; text-align:center; }.pb-note{ font-size:13.5px; color:var(--ink-faint); margin-top:22px; max-width:74ch; }/* ============================================================ PRODUCT MOCK ============================================================ */ .dmock{ background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:0 30px 70px -40px rgba(11,28,61,.55); } /* corners live on the children now — see the note in the 3D block below */ .dmock > :first-child{ border-radius:15px 15px 0 0; } .dmock > :last-child{ border-radius:0 0 15px 15px; }.dmock-bar{ display:flex; align-items:center; gap:7px; padding:12px 18px; background:var(--bg-soft); border-bottom:1px solid var(--line); }.dmock-bar i{ width:10px; height:10px; border-radius:50%; background:#cbd5e1; }.dmock-bar i:first-child{background:#f87171}.dmock-bar i:nth-child(2){background:#fbbf24}.dmock-bar i:nth-child(3){background:#34d399}.dmock-bar em{ font-style:normal; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-left:10px; }.dmock-live{ margin-left:auto; font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--green); }.dmock-body{ display:grid; grid-template-columns:172px minmax(0,1fr); }.dmock-side{ border-right:1px solid var(--line); padding:16px 0; background:#fcfdfe; }.dmock-side b{ display:block; font-size:13px; font-weight:600; color:var(--ink-soft); padding:9px 18px; }.dmock-side b.on{ color:var(--blue-700); background:var(--blue-50); box-shadow:inset 3px 0 0 var(--blue-600); font-weight:700; }.dmock-main{ padding:18px; }.dmock-k{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.dmock-k > div{ border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:#fff; }.dmock-k u{ display:block; text-decoration:none; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }.dmock-k q{ display:block; quotes:none; font-family:var(--font-mono); font-size:21px; font-weight:600; color:var(--blue-900); margin-top:6px; font-variant-numeric:tabular-nums; }.dmock-k q.hot{ color:var(--orange-600); }.dmock-k q.ok{ color:var(--green); }.dmock-h{ font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); margin:20px 0 10px; }.dmock-rows p{ display:flex; align-items:center; gap:12px; padding:11px 13px; margin:0 0 7px; border:1px solid var(--line); border-radius:9px; background:#fff; font-size:13.5px; }.rk{ flex:0 0 46px; text-align:center; font-family:var(--font-mono); font-size:11.5px; font-weight:700; padding:4px 0; border-radius:6px; }.rk.hi{ background:#fee2e2; color:#b91c1c; }.rk.md{ background:var(--orange-50); color:var(--orange-700); }.rk.lo{ background:var(--blue-50); color:var(--blue-700); }.dmock-rows b{ flex:1; font-weight:600; color:var(--ink); }.dmock-rows u{ text-decoration:none; font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--ink-soft); font-weight:600; white-space:nowrap; }.dmock-foot{ display:flex; align-items:center; gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }.dmock-pill{ font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--orange-700); background:var(--orange-50); border:1px solid var(--orange-100); border-radius:999px; padding:5px 11px; }.dmock-foot em{ font-style:normal; font-size:12.5px; color:var(--ink-faint); }@media(max-width:820px){.dmock-body{ grid-template-columns:1fr; }.dmock-side{ display:flex; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); padding:8px; }.dmock-side b{ white-space:nowrap; padding:7px 13px; }.dmock-side b.on{ box-shadow:inset 0 -3px 0 var(--blue-600); border-radius:6px; }.dmock-k{ grid-template-columns:repeat(2,1fr); }.dmock-rows p{ flex-wrap:wrap; }.dmock-rows u{ width:100%; text-align:right; }}/* ============================================================ VISUAL-FIRST HOME — marquee, stats, categories, steps, versus ============================================================ */ h2.big{ font-family:var(--font-display); font-size:clamp(32px,5.4vw,64px); line-height:1.06; letter-spacing:-.035em; margin:0 0 40px; text-wrap:balance; }h2.big em{ font-style:normal; color:var(--orange-600); }@keyframes mq{ from{transform:translateX(0)} to{transform:translateX(-50%)} }.stat-sec{ padding:84px 0; }.cat-sec{ padding:84px 0; background:var(--bg-soft); }.cat-g{ display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:18px; }.cat{ display:block; background:#fff; border:1px solid var(--line); border-radius:16px; text-decoration:none; color:inherit; transition:.26s; perspective:900px; } /* overflow:hidden here flattened the card's 3D context exactly as it did on .dmock. The illustration panel rounds its own top corners instead. */ .cat .cat-v{ border-radius:15px 15px 0 0; }.cat:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--orange-300); }.cat-v{ height:150px; display:grid; place-items:center; border-bottom:1px solid var(--line); }.cat-v svg{ width:78%; height:auto; }.cat-v svg rect,.cat-v svg circle{ fill:var(--blue-400); opacity:.34; }.cat-v svg .hot{ fill:var(--orange-500); opacity:1; }.cat-v svg .ring,.cat-v svg .ring2{ fill:none; stroke:var(--blue-400); stroke-width:2.5; opacity:.4; }.cat-v svg .arc{ fill:none; stroke:var(--orange-500); stroke-width:4; stroke-linecap:round; }.cat-v svg .ln{ fill:none; stroke:var(--orange-500); stroke-width:2.5; stroke-linecap:round; }.cat-v svg .tick{ fill:none; stroke:var(--green); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }.cat-v1{ background:linear-gradient(135deg,var(--orange-50),#fff); }.cat-v2{ background:linear-gradient(135deg,var(--blue-50),#fff); }.cat-v3{ background:linear-gradient(135deg,#ecfdf5,#fff); }.cat-v4{ background:linear-gradient(135deg,#eef2ff,#fff); }.cat b{ display:block; font-family:var(--font-display); font-size:20px; padding:18px 20px 0; }.cat span{ display:block; font-size:14px; color:var(--ink-soft); padding:7px 20px 20px; line-height:1.5; }.step-sec{ padding:84px 0; }.step-g{ display:grid; grid-template-columns:repeat(auto-fit,minmax(226px,1fr)); gap:20px; }.step{ position:relative; padding:26px 22px; background:#fff; border:1px solid var(--line); border-radius:14px; }.step span{ font-family:var(--font-mono); font-size:40px; font-weight:600; color:var(--line); line-height:1; display:block; }.step b{ display:block; font-family:var(--font-display); font-size:20px; margin:12px 0 8px; }.step p{ font-size:14.5px; color:var(--ink-soft); line-height:1.6; }.step:hover span{ color:var(--orange-300); }.vs-sec h2.big{ color:#fff; }@media(max-width:640px){.stat-sec,.cat-sec,.step-sec,.vs-sec{ padding:54px 0; }}/* ============================================================ HOME BANNER v2 — the number is the hook ============================================================ */ .nh > .wrap{ position:relative; z-index:1; }.nh .btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }.nh .btn-ghost:hover{ background:rgba(255,255,255,.1); border-color:#fff; }.cat span{ font-size:13.5px !important; }.step p{ font-size:14px; }/* ============================================================ HOMEPAGE v3 — editorial hero, hooks, rhythm ============================================================ */ .hx{ position:relative; padding:72px 0 0; overflow:hidden; background:linear-gradient(180deg,#fff 0%, var(--blue-50) 46%, #fff 100%); }.hx-bg{ position:absolute; inset:0; pointer-events:none; background: radial-gradient(820px 340px at 4% -14%, rgba(249,115,22,.14), transparent 62%), radial-gradient(760px 320px at 96% -8%, rgba(37,99,235,.16), transparent 60%); }.hx-in{ position:relative; text-align:center; padding-bottom:52px; }.hx-eb{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--orange-700); background:var(--orange-50); border:1px solid var(--orange-100); border-radius:999px; padding:7px 16px; }.hx h1{ font-family:var(--font-display); font-size:clamp(38px,6.4vw,78px); line-height:1.02; letter-spacing:-.04em; margin:24px auto 0; max-width:17ch; text-wrap:balance; color:var(--blue-900); }.hx h1 em{ font-style:normal; color:var(--orange-600); }.hx-sub{ font-size:clamp(16px,1.7vw,19.5px); color:var(--ink-soft); max-width:60ch; margin:22px auto 0; line-height:1.62; text-wrap:pretty; }.hx-cta{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:30px; }.hx-flags{ display:flex; justify-content:center; flex-wrap:wrap; gap:9px; margin-top:26px; }.hx-flags span{ font-size:12.5px; font-weight:600; color:var(--ink-soft); background:rgba(255,255,255,.8); border:1px solid var(--line); border-radius:999px; padding:7px 14px; }.hx .dmock{ position:relative; }.sec-eb{ font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-600); margin-bottom:14px; }.one{ padding:88px 0; background:var(--blue-900); color:#cbd5e1; }.one-in{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(30px,5vw,68px); align-items:center; }.one-eb{ font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-400); }.one h2.big{ color:#fff; margin:14px 0 0; }.one-p{ font-size:17px; line-height:1.68; margin-top:18px; max-width:46ch; }.one-p b{ color:#fff; }.one-l{ display:inline-block; margin-top:22px; font-weight:700; font-size:15px; color:var(--orange-400); }.one-b.is-bad i{ background:linear-gradient(90deg,var(--orange-500),#ff5a3c); }.one-b.is-bad b{ color:#ff8a6b; font-size:34px; }.fin{ padding:80px 0; background:linear-gradient(135deg,var(--blue-900),#10275c); }.fin-in{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:36px; align-items:center; }.fin h2.big{ color:#fff; margin:0; font-size:clamp(28px,3.8vw,44px); }.fin p{ color:#93a4bd; font-size:16.5px; margin-top:14px; max-width:48ch; }.fin-cta{ display:flex; flex-wrap:wrap; gap:12px; }.fin .btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.4); }.fin .btn-ghost:hover{ background:rgba(255,255,255,.1); border-color:#fff; }.dd-sec .sec-head{ max-width:760px; }.dd-sec .sec-head h2.big{ margin-bottom:16px; }@media(max-width:880px){.one-in,.fin-in{ grid-template-columns:1fr; }.hx{ padding-top:44px; }.one,.fin{ padding:56px 0; }}/* announcement bar */ .anb{ background:var(--blue-900); color:#cbd5e1; font-size:13.5px; }.anb .wrap{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 24px; }.anb-p{ font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; background:var(--orange-600); color:#fff; border-radius:999px; padding:3px 9px; }.anb b{ color:#fff; font-weight:700; }.anb a{ margin-left:auto; color:var(--orange-400); font-weight:700; white-space:nowrap; }@media(max-width:700px){.anb a{ margin-left:0 }}/* audience split */ .aud{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:16px; padding:28px 24px; text-decoration:none; color:inherit; transition:.26s; }.aud:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--orange-300); }.aud.is-mid{ background:linear-gradient(180deg,var(--orange-50),#fff); border-color:var(--orange-200,#fed7aa); }.aud b{ display:block; font-family:var(--font-display); font-size:24px; margin:12px 0 10px; letter-spacing:-.018em; }.aud p{ font-size:15px; color:var(--ink-soft); line-height:1.6; flex:1; }.aud em{ font-style:normal; margin-top:18px; font-size:14px; font-weight:700; color:var(--blue-600); }/* homepage FAQ */ .hfaq{ padding:84px 0; background:var(--bg-soft); }.hfaq-in{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,4vw,60px); align-items:start; }.hfaq-p{ font-size:16px; color:var(--ink-soft); margin:16px 0 24px; max-width:40ch; }.hfaq-l h2.big{ margin-bottom:0; }@media(max-width:880px){.hfaq-in{ grid-template-columns:1fr }}/* credentials */ .cred-sec{ padding:64px 0; border-top:1px solid var(--line); }.cred-lab{ text-align:center; font-size:11px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:28px; }.cred-g{ display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:16px; }.cred-g > div{ text-align:center; padding:18px 12px; border:1px solid var(--line); border-radius:12px; background:#fff; }.cred-g b{ display:block; font-family:var(--font-mono); font-size:15px; font-weight:700; color:var(--blue-800); letter-spacing:.02em; }.cred-g span{ display:block; font-size:12.5px; color:var(--ink-faint); margin-top:6px; line-height:1.45; }/* ============================================================ SITE-WIDE ROLLOUT — bring interior pages up to the homepage ============================================================ */ main h2, section > .wrap > h2, .sec-head h2{ font-family:var(--font-display); font-size:clamp(26px,3.6vw,42px); line-height:1.08; letter-spacing:-.03em; text-wrap:balance; }.sec-head{ max-width:760px; }.sec-head p{ font-size:17px; line-height:1.6; text-wrap:pretty; }/* cards get the homepage treatment everywhere */ .card{ border-radius:14px; transition:box-shadow .25s, transform .25s, border-color .25s; }.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--orange-300); }.card h3{ font-family:var(--font-display); font-size:19px; letter-spacing:-.014em; }/* section rhythm — alternate so no page is one flat column */ section.alt{ background:var(--bg-soft); border-block:1px solid var(--line); }main > section, body > section{ padding:clamp(52px,6.5vw,84px) 0; }/* eyebrow device, reused from home */ .sec-head .eyebrow,.sec-head .kicker{ display:inline-flex; align-items:center; gap:9px; font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--orange-600); margin-bottom:12px; }.sec-head .eyebrow::before,.sec-head .kicker::before{ content:""; width:22px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--orange-400),var(--orange-600)); }/* buttons — one system */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:9px; font-weight:700; transition:.2s; white-space:nowrap; }.btn-primary{ background:linear-gradient(135deg,var(--orange-500),var(--orange-600)); border:1px solid var(--orange-600); color:#fff; box-shadow:0 1px 2px rgba(194,65,12,.2), 0 8px 18px -8px rgba(249,115,22,.42); }.btn-primary:hover{ filter:brightness(1.06); transform:translateY(-1px); }.btn-ghost{ background:#fff; border:1px solid var(--line); color:var(--ink); }.btn-ghost:hover{ border-color:var(--ink-faint); background:var(--bg-soft); }/* trailing CTA on every interior page reads like the home close */ .grid-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:18px; }/* ============================================================ WHITE SYSTEM — overrides every dark band. Orange survives on buttons, CTAs and one accent word only. ============================================================ */ .one,.vs-sec,.fin,.mq-sec,.ri-star,.anb{ background:#fff !important; color:var(--ink) !important; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.one h2.big,.vs-sec h2.big,.fin h2.big,.ri-star h2{ color:var(--ink) !important; }.one-p,.fin p,.ri-star p{ color:var(--ink-soft) !important; }.one-p b,.ri-star b{ color:var(--ink) !important; }/* announcement bar */ .anb{ background:var(--bg-soft) !important; color:var(--ink-soft) !important; border-bottom:1px solid var(--line); }.anb b{ color:var(--ink) !important; }.anb a{ color:var(--orange-600) !important; }.anb-p{ background:var(--orange-600); color:#fff; }/* marquee on white */ /* the ₹42,857 band */ .one-b.is-bad i{ background:linear-gradient(90deg,var(--orange-400),var(--orange-600)) !important; }.one-b.is-bad b{ color:var(--orange-700) !important; }.one-eb,.sec-eb{ color:var(--orange-600) !important; }.one-l{ color:var(--orange-700) !important; }/* versus table on white */ /* closing CTA on white */ .fin{ background:var(--bg-soft) !important; }.fin .btn-ghost{ background:#fff !important; color:var(--ink) !important; border-color:var(--line) !important; }.fin .btn-ghost:hover{ border-color:var(--ink-faint) !important; background:#fff !important; }/* revenue-integrity star band */ .ri-star{ background:#fff !important; }.ri-star .eyebrow{ color:var(--orange-600) !important; }.ri-l li{ border-top-color:var(--line) !important; color:var(--ink-soft) !important; }.ri-calc{ background:var(--bg-soft) !important; border-color:var(--line) !important; }.ri-calc-h{ color:var(--ink-faint) !important; border-bottom-color:var(--line) !important; }.ri-row{ border-bottom-color:var(--line) !important; color:var(--ink-soft) !important; }.ri-row b{ color:var(--ink) !important; }.ri-row.is-bad b{ color:var(--orange-700) !important; }.ri-bar{ background:var(--bg-soft) !important; box-shadow:inset 0 0 0 1px var(--line); }.ri-bar i{ background:var(--blue-200,#bfdbfe) !important; }.ri-bar.is-bad i{ background:linear-gradient(90deg,var(--orange-400),var(--orange-600)) !important; }.ri-bar em{ color:var(--ink) !important; }.ri-calc-f{ color:var(--ink-faint) !important; }/* hero: white, no gradient wash */ .hx{ background:#fff !important; }.hx-bg{ display:none !important; }.hx h1{ color:var(--ink) !important; }.hx-flags span{ background:#fff !important; }.dorb{ display:none !important; }.page-hero{ background:#fff !important; border-bottom:1px solid var(--line); }.page-hero::after{ display:none !important; }.bl-ans{ background:var(--bg-soft) !important; border-color:var(--line) !important; border-left:3px solid var(--orange-500) !important; }.bl-ans b{ color:var(--orange-700) !important; }.cat-v1,.cat-v2,.cat-v3,.cat-v4{ background:var(--bg-soft) !important; }.cat-v svg rect,.cat-v svg circle{ fill:#cbd5e1; opacity:1; }.cat-v svg .ring,.cat-v svg .ring2{ stroke:#cbd5e1; }.cat-v svg .hot{ fill:var(--orange-500); }.cat-v svg .arc,.cat-v svg .ln{ stroke:var(--orange-500); }.cat-v svg .tick{ stroke:var(--orange-500); }.dd-bub{ background:var(--bg-soft) !important; }.dd-m.you .dd-bub{ background:var(--ink) !important; border-color:var(--ink) !important; }.dd-badge{ color:var(--orange-700) !important; }.dmock-side b.on{ color:var(--orange-700) !important; background:var(--orange-50) !important; box-shadow:inset 3px 0 0 var(--orange-500) !important; }.dmock-k q{ color:var(--ink) !important; }.dmock-k q.hot{ color:var(--orange-600) !important; }.dmock-k q.ok{ color:var(--ink) !important; }.rk.hi{ background:var(--orange-50) !important; color:var(--orange-700) !important; }.rk.md{ background:var(--bg-soft) !important; color:var(--ink-soft) !important; }.rk.lo{ background:var(--bg-soft) !important; color:var(--ink-faint) !important; }.aud.is-mid{ background:#fff !important; border-color:var(--orange-300) !important; }.step span{ color:#e2e8f0 !important; }.pb-amt,.price{ color:var(--ink) !important; }.cred-g b{ color:var(--ink) !important; }.hfaq,.cat-sec,.stat-sec,section.alt{ background:var(--bg-soft) !important; }/* footer on white */ .site-footer{ background:#fff !important; color:var(--ink-soft) !important; border-top:1px solid var(--line); }.site-footer h4{ color:var(--ink) !important; }.site-footer a{ color:var(--ink-soft) !important; }.site-footer a:hover{ color:var(--orange-700) !important; }.footer-logo{ color:var(--ink) !important; }.site-footer .foot-b,.site-footer .legal{ border-top-color:var(--line) !important; color:var(--ink-faint) !important; }/* ============================================================ CASE STUDIES — white, orange only on the accent ============================================================ */ .cs-badge{ display:inline-flex; align-items:center; gap:9px; font-size:11.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--orange-700); background:var(--orange-50); border:1px solid var(--orange-100); border-radius:999px; padding:6px 14px; }.cs-g{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:16px; padding:48px 0; }.cs-c{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px; text-decoration:none; color:inherit; transition:.24s; }.cs-c:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--orange-300); }.cs-k{ align-self:flex-start; font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); border:1px solid var(--line); border-radius:999px; padding:4px 10px; }.cs-c b{ font-family:var(--font-display); font-size:26px; letter-spacing:-.02em; margin:14px 0 2px; }.cs-c p{ font-size:14.5px; color:var(--ink-soft); }.cs-c em{ font-style:normal; font-size:13px; color:var(--ink-faint); margin-top:4px; }.cs-p{ margin-top:auto; padding-top:14px; font-size:13.5px; color:var(--orange-700); font-weight:600; }.cs-body{ max-width:70ch; margin:48px auto; }.cs-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; margin-bottom:36px; }.cs-fact{ border:1px solid var(--line); border-radius:11px; padding:14px 16px; }.cs-fact u{ display:block; text-decoration:none; font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); }.cs-fact b{ display:block; font-size:15px; color:var(--ink); margin-top:6px; line-height:1.35; }.cs-body h2{ font-family:var(--font-display); font-size:24px; letter-spacing:-.02em; margin:32px 0 12px; }.cs-body p{ font-size:16.5px; line-height:1.7; color:var(--ink-soft); }.cs-l{ list-style:none; margin:0; padding:0; }.cs-l li{ position:relative; padding:11px 0 11px 24px; font-size:16px; color:var(--ink-soft); border-top:1px solid var(--line); line-height:1.6; }.cs-l li:first-child{ border-top:0; }.cs-l li::before{ content:""; position:absolute; left:0; top:19px; width:9px; height:9px; border-radius:2px; background:var(--orange-500); }.cs-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:40px; padding-top:28px; border-top:1px solid var(--line); }/* deployment / integrations / timeline — white */ .dep-sec,.int-sec,.tl-sec{ padding:clamp(52px,6.5vw,84px) 0; }.dep-lead{ font-size:17px; color:var(--ink-soft); max-width:62ch; margin:-22px 0 34px; line-height:1.62; }.dep-g{ display:grid; grid-template-columns:repeat(auto-fit,minmax(262px,1fr)); gap:18px; }.dep{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:15px; padding:26px 24px; transition:.24s; }.dep:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--orange-300); }.dep.is-mid{ border-color:var(--orange-300); }.dep-k{ align-self:flex-start; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--orange-700); background:var(--orange-50); border:1px solid var(--orange-100); border-radius:999px; padding:5px 11px; }.dep b{ display:block; font-family:var(--font-display); font-size:21px; margin:14px 0 10px; letter-spacing:-.016em; }.dep p{ font-size:14.5px; color:var(--ink-soft); line-height:1.6; }.dep ul{ list-style:none; margin:16px 0 0; padding:14px 0 0; border-top:1px solid var(--line); }.dep li{ position:relative; padding:6px 0 6px 20px; font-size:14px; color:var(--ink-soft); }.dep li::before{ content:""; position:absolute; left:0; top:13px; width:8px; height:8px; border-radius:2px; background:var(--orange-400); }.int-note{ font-size:14px; color:var(--ink-faint); margin-top:22px; max-width:64ch; }.tl{ border:1px solid var(--line); border-radius:15px; overflow:hidden; }.tl-r{ display:grid; grid-template-columns:150px minmax(0,1fr); gap:20px; padding:22px 24px; border-bottom:1px solid var(--line); align-items:start; }.tl-r:last-child{ border-bottom:0; }.tl-r:hover{ background:var(--bg-soft); }.tl-t{ font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--orange-700); letter-spacing:.03em; padding-top:2px; }.tl-r b{ font-family:var(--font-display); font-size:19px; letter-spacing:-.014em; }.tl-r p{ font-size:14.8px; color:var(--ink-soft); line-height:1.62; margin-top:6px; }@media(max-width:640px){.tl-r{ grid-template-columns:1fr; gap:6px }}/* ============================================================ MOTION + DEPTH ============================================================ */ .has-motion .rv{ opacity:0; transform:translateY(26px) scale(.985); transition:opacity .75s cubic-bezier(.22,1,.36,1) var(--rv-d,0ms), transform .75s cubic-bezier(.22,1,.36,1) var(--rv-d,0ms); }.has-motion .rv.in{ opacity:1; transform:none; }.no-motion .rv{ opacity:1 !important; transform:none !important; }[data-tilt]{ transition:transform .5s cubic-bezier(.22,1,.36,1); transform-style:preserve-3d; will-change:transform; }.cat,.dep,.aud{ transform-style:preserve-3d; will-change:transform; }.has-motion .cat:hover,.has-motion .dep:hover,.has-motion .aud:hover{ box-shadow:0 26px 54px -30px rgba(15,23,42,.42); } /* ── The product frame in three dimensions ────────────────────────────── .dmock-stage owns the perspective so the depth reads before any script runs; tilt() then rotates the frame inside it. Perspective on a parent rather than inside the element's own transform means the vanishing point stays put while the frame turns, which is what makes it look like an object rather than a warping picture. Depths are a real hierarchy, not decoration: chrome sits furthest forward because it is the physical shell, then the figures you are meant to read, then the rows, then the sidebar which is almost on the base plane. */ .dmock-stage{ perspective:1500px; perspective-origin:50% 42%; } .dmock{ transform-style:preserve-3d; } .dmock-bar { transform:translateZ(30px); } .dmock-k > div{ transform:translateZ(22px); box-shadow:0 6px 16px -10px rgba(11,28,61,.45); } .dmock-rows p{ transform:translateZ(12px); } .dmock-side { transform:translateZ(4px); } .dmock-foot { transform:translateZ(8px); } .dmock-h { transform:translateZ(10px); } /* A frame with no perspective ancestor renders translateZ as a no-op, so this degrades to the flat card it has always been if the stage is missing or the script never runs. */ @media (prefers-reduced-motion:reduce){ .dmock-stage{ perspective:none; } .dmock-bar,.dmock-k > div,.dmock-rows p,.dmock-side,.dmock-foot,.dmock-h{ transform:none; } } @media (max-width:820px){ .dmock-stage{ perspective:none; } .dmock-bar,.dmock-k > div,.dmock-rows p,.dmock-side,.dmock-foot,.dmock-h{ transform:none; } } /* ============================================================ WHY — the category critique ============================================================ */ .why-sec{ padding:clamp(56px,7vw,92px) 0; }.why-lead{ font-size:17.5px; line-height:1.68; color:var(--ink-soft); max-width:66ch; margin:-20px 0 40px; }.why-g{ display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:18px; }.why-c{ background:#fff; border:1px solid var(--line); border-radius:15px; padding:26px 24px; }.why-n{ font-family:var(--font-mono); font-size:12.5px; font-weight:700; color:var(--orange-600); letter-spacing:.08em; }.why-c b{ display:block; font-family:var(--font-display); font-size:20px; letter-spacing:-.016em; margin:12px 0 10px; line-height:1.26; }.why-c p{ font-size:14.8px; color:var(--ink-soft); line-height:1.62; }/* motion must never hide content from print or from a stalled observer */ @media print{.rv{ opacity:1 !important; transform:none !important; }}/* ============================================================ CTA CONTRAST, MENU POSITION, SHADOWS, FOOTER Measured: white on #F97316 = 2.80:1. Under AA, on the primary button, on every page. The orange had to go darker. ============================================================ */ .btn-primary,.pb-cta.btn-primary,.pr-cta.solid,.dd-send,.mh-signup,button.btn-primary{ background:linear-gradient(135deg,#C2410C,#9A3412) !important; border-color:#9A3412 !important; color:#fff !important; box-shadow:0 1px 2px rgba(15,23,42,.08), 0 6px 14px -8px rgba(15,23,42,.28) !important; text-shadow:none; }.btn-primary:hover,.dd-send:hover,.mh-signup:hover{ background:linear-gradient(135deg,#9A3412,#7C2D12) !important; border-color:#7C2D12 !important; filter:none !important; box-shadow:0 1px 2px rgba(15,23,42,.1), 0 10px 22px -10px rgba(15,23,42,.34) !important; transform:translateY(-1px); }.btn-primary:active{ transform:translateY(0); }/* no orange glow anywhere — it read as a warning state, not a button */ .btn,.pb-cta,.pr-cta,.cat,.dep,.aud,.cs-c,.bl-c,.card,.pb,.int,.why-c{ box-shadow:0 1px 2px rgba(15,23,42,.05), 0 4px 12px -6px rgba(15,23,42,.1); }.card:hover,.cat:hover,.dep:hover,.aud:hover,.cs-c:hover,.bl-c:hover,.pb:hover{ box-shadow:0 1px 2px rgba(15,23,42,.06), 0 14px 30px -14px rgba(15,23,42,.2) !important; }.has-motion .cat:hover,.has-motion .dep:hover,.has-motion .aud:hover{ box-shadow:0 1px 2px rgba(15,23,42,.06), 0 20px 42px -22px rgba(15,23,42,.26) !important; }.tier.is-lead,.pb.is-lead,.dep.is-mid,.aud.is-mid,.qfaq[open]{ box-shadow:0 1px 2px rgba(15,23,42,.05), 0 6px 18px -10px rgba(15,23,42,.16) !important; }/* the orange accent stays, but as ink not glow */ .sec-eb,.one-eb,.hx-eb,.cs-badge,.dep-k,.bl-cat,.tl-t,.why-n{ color:#C2410C !important; }.one-l,.dd-link,.bl-body a,.aud em{ color:#C2410C !important; }.hx-eb,.cs-badge,.dep-k{ background:#FFF7ED !important; border-color:#FED7AA !important; }/* ── mobile menu toggle: it was centred in the header ─────────────────── */ @media(max-width:900px){.site-header .wrap{ display:flex !important; align-items:center; justify-content:space-between; gap:12px; }.nav-toggle{ margin-left:auto !important; order:9; width:44px; height:44px; display:grid; place-items:center; background:#fff; border:1px solid var(--line); border-radius:10px; font-size:19px; line-height:1; color:var(--ink); cursor:pointer; padding:0; }.nav-toggle:hover{ border-color:var(--ink-faint); }.site-header .logo{ margin-right:auto; }.header-cta{ display:none; }}/* ── footer ───────────────────────────────────────────────────────────── */ .site-footer{ background:#fff !important; border-top:1px solid var(--line); padding:clamp(44px,5vw,64px) 0 26px !important; margin-top:0 !important; }.site-footer .cols{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:clamp(24px,4vw,52px); align-items:start; }.footer-logo{ font-family:var(--font-display); font-size:24px; letter-spacing:-.02em; color:var(--ink) !important; }.site-footer .cols > div:first-child p{ font-size:14.5px; color:var(--ink-soft) !important; line-height:1.62; margin-top:12px; max-width:34ch; }.site-footer h4{ font-size:11px !important; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint) !important; margin-bottom:14px !important; }.site-footer ul{ list-style:none; margin:0; padding:0; }.site-footer li{ margin-bottom:9px; }.site-footer a{ font-size:14.5px; color:var(--ink-soft) !important; text-decoration:none; transition:color .15s; }.site-footer a:hover{ color:#C2410C !important; }.site-footer .foot-b,.site-footer .legal,.site-footer .bottom{ margin-top:38px !important; padding-top:22px !important; border-top:1px solid var(--line) !important; color:var(--ink-faint) !important; font-size:13px !important; display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; }.foot-flag{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--ink-soft); background:var(--bg-soft); border:1px solid var(--line); border-radius:999px; padding:6px 13px; }@media(max-width:820px){.site-footer .cols{ grid-template-columns:1fr 1fr; gap:28px; }.site-footer .cols > div:first-child{ grid-column:1 / -1; }}@media(max-width:520px){.site-footer .cols{ grid-template-columns:1fr; }}/* ============================================================ LOGO — real mark replaces the wordmark text ============================================================ */ .site-header .logo{ display:inline-flex; align-items:center; padding:0; }.site-header .logo img{ height:34px; width:auto; display:block; }.footer-logo{ display:block; }.footer-logo img{ height:40px; width:auto; display:block; }@media(max-width:900px){.site-header .logo img{ height:30px; }}/* horizontal lockup: mark + typeset wordmark. The supplied artwork is a stacked lockup and goes illegible under ~60px, so the header pairs the mark with the wordmark set in the display face. */ .site-header .logo{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; }.site-header .logo img.logo-mark{ height:30px; width:auto; display:block; }.footer-logo img{ height:52px; width:auto; display:block; }@media(max-width:900px){.site-header .logo img.logo-mark{ height:26px; }}/* ============================================================ BRAND PALETTE — sampled from the logo indigo #2A2AD2 · blue #0046E0 · teal #00B6B6 · ink #001134 The mark contains no orange, so the accent moves to teal and the primary action to the indigo-blue of the hexagon. ============================================================ */ :root{ --brand-ink:#001134; --brand-indigo:#2A2AD2; --brand-blue:#0046E0; --brand-teal:#00B6B6; --brand-teal-d:#00807F; --brand-teal-50:#E6FAFA; --brand-teal-100:#B8F0EF; --brand-blue-50:#EEF2FF; --brand-blue-100:#D6DEFF; }/* accents: everything that was orange ink */ .sec-eb,.one-eb,.hx-eb,.cs-badge,.dep-k,.bl-cat,.tl-t,.why-n,.dd-badge, .one-l,.dd-link,.aud em,.cs-p,.bl-hub em,.mq-t i,.dmock-pill, .site-footer a:hover,.mh-col a:hover,.pb-tag{ color:var(--brand-teal-d) !important; }.hx-eb,.cs-badge,.dep-k,.bl-cat,.dmock-pill{ background:var(--brand-teal-50) !important; border-color:var(--brand-teal-100) !important; }/* primary action: the hexagon's indigo-blue. White on #1B27A8 = 8.9:1 */ .btn-primary,.pb-cta.btn-primary,.pr-cta.solid,.dd-send,.mh-signup,button.btn-primary{ background:linear-gradient(135deg,#2A2AD2,#1B27A8) !important; border-color:#1B27A8 !important; color:#fff !important; box-shadow:0 1px 2px rgba(0,17,52,.1), 0 6px 14px -8px rgba(0,17,52,.3) !important; }.btn-primary:hover,.dd-send:hover,.mh-signup:hover{ background:linear-gradient(135deg,#1B27A8,#131C7C) !important; border-color:#131C7C !important; box-shadow:0 1px 2px rgba(0,17,52,.12), 0 10px 22px -10px rgba(0,17,52,.34) !important; }/* structural accents that were orange */ .tier.is-lead,.pb.is-lead,.dep.is-mid,.aud.is-mid,.why-r.is-hot,.qfaq[open], .cat:hover,.dep:hover,.aud:hover,.cs-c:hover,.bl-c:hover,.pb:hover,.card:hover,.int:hover{ border-color:var(--brand-teal-100) !important; }.tier-l li::before,.pb-l li::before,.dep li::before,.cs-l li::before,.why-arrow{ background:var(--brand-teal) !important; }.dep li::before,.cs-l li::before{ background:var(--brand-teal) !important; }.bl-ans,.pr-callout,.bl-end,.cs-q,.ri-n,.qship-n{ border-left-color:var(--brand-teal) !important; }.sec-eb::before,.hx-eb::before,.dd-eyebrow::before,.one-eb::before, .sec-head .eyebrow::before,.sec-head .kicker::before{ background:linear-gradient(90deg,var(--brand-blue),var(--brand-teal)) !important; }.one-b.is-bad i,.ri-bar.is-bad i{ background:linear-gradient(90deg,var(--brand-blue),var(--brand-teal)) !important; }.one-b.is-bad b,.ri-row.is-bad b,.dmock-k q.hot,.why-r.is-hot b,.rk.hi{ color:var(--brand-teal-d) !important; }.rk.hi{ background:var(--brand-teal-50) !important; }.dmock-side b.on{ color:var(--brand-blue) !important; background:var(--brand-blue-50) !important; box-shadow:inset 3px 0 0 var(--brand-blue) !important; }.anb-p{ background:var(--brand-blue) !important; }.anb a{ color:var(--brand-blue) !important; }.bl-faq summary::after{ color:var(--brand-teal-d) !important; }.cat-v svg .hot{ fill:var(--brand-teal) !important; }.cat-v svg .arc,.cat-v svg .ln,.cat-v svg .tick{ stroke:var(--brand-teal) !important; }.dd-m.you .dd-bub{ background:var(--brand-ink) !important; border-color:var(--brand-ink) !important; }.dd-tr.is-hot{ background:var(--brand-teal-50) !important; }.dd-tr.is-hot b{ color:var(--brand-teal-d) !important; }h2.big em,.hx h1 em,.ital{ color:var(--brand-blue) !important; }/* logo lockup */ .site-header .logo{ display:inline-flex; align-items:center; gap:9px; }.site-header .logo .logo-mark{ height:30px; width:auto; display:block; }.site-header .logo .logo-word{ height:21px; width:auto; display:block; }@media(max-width:900px){.site-header .logo .logo-mark{ height:26px; }.site-header .logo .logo-word{ height:18px; }}/* last orange holdouts from the original theme */ .aud-n,.dsec-tag,.dhook em,.dsec-head em,.site-footer h4, .dvs-arrow,.dfeat-i,.dstat-c b,.dagent-tag,.dproof b,.dhook-rule{ color:var(--brand-teal-d) !important; }.dhook-rule,.dsec-rule{ background:linear-gradient(90deg,var(--brand-blue),var(--brand-teal)) !important; }.site-footer h4{ color:var(--ink-faint) !important; }/* support widget + remaining theme leftovers */ .dsup-launch,.dsup-ticket-btn,.dsup-send,.dsup-close2,.dsup-fab{ background:linear-gradient(135deg,#2A2AD2,#1B27A8) !important; border-color:#1B27A8 !important; color:#fff !important; }.dsup-launch:hover,.dsup-send:hover,.dsup-ticket-btn:hover{ background:linear-gradient(135deg,#1B27A8,#131C7C) !important; }.dsup-head,.dsup-badge{ background:var(--brand-blue-50) !important; color:var(--brand-blue) !important; }h4{ color:inherit; }.site-footer h4,.dsec-head h4{ color:var(--ink-faint) !important; }.dstats i,.dproof i,.dhook i,i.dot,i.bar{ background:var(--brand-teal) !important; }/* ============================================================ CLAIM HELP · DECODER · FREE AUDIT ============================================================ */ .irdai-note{ background:var(--bg-soft); border:1px solid var(--line); border-left:3px solid var(--brand-blue); border-radius:11px; padding:16px 18px; font-size:13.8px; line-height:1.6; color:var(--ink-soft); margin:0 0 30px; }.irdai-note b{ color:var(--ink); }.ch-body{ max-width:70ch; margin:44px auto; }.ch-body h2{ font-family:var(--font-display); font-size:24px; letter-spacing:-.02em; margin:34px 0 12px; }.ch-body p{ font-size:16.5px; line-height:1.7; color:var(--ink-soft); }.ch-steps{ margin:0 0 0 20px; }.ch-steps li{ font-size:16px; line-height:1.65; color:var(--ink-soft); margin-bottom:11px; }.ch-steps b{ color:var(--ink); }.ch-rel{ display:flex; flex-wrap:wrap; gap:9px; }.ch-rel a{ font-size:13.5px; padding:8px 13px; border:1px solid var(--line); border-radius:999px; color:var(--ink-soft); text-decoration:none; min-height:34px; display:inline-flex; align-items:center; }.ch-rel a:hover{ border-color:var(--brand-teal-100); color:var(--brand-teal-d); }.ch-src{ margin:0 0 0 20px; }.ch-src li{ font-size:14.5px; color:var(--ink-soft); margin-bottom:7px; }.ch-g{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:14px; padding:8px 0 40px; }.ch-c{ display:block; background:#fff; border:1px solid var(--line); border-radius:13px; padding:20px 22px; text-decoration:none; color:inherit; transition:.22s; }.ch-c:hover{ border-color:var(--brand-teal-100); box-shadow:var(--shadow); transform:translateY(-2px); }.ch-c b{ display:block; font-family:var(--font-display); font-size:18px; letter-spacing:-.014em; }.ch-c span{ display:block; font-size:14px; color:var(--ink-soft); margin-top:7px; line-height:1.55; }/* free audit */ .fa-in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(28px,4vw,56px); align-items:start; padding:44px 0; }.fa-l h2{ font-family:var(--font-display); font-size:24px; margin-bottom:16px; }.fa-note{ margin-top:24px; background:var(--bg-soft); border:1px solid var(--line); border-left:3px solid var(--brand-teal); border-radius:11px; padding:16px 18px; font-size:14.5px; color:var(--ink-soft); line-height:1.6; }.fa-note b{ color:var(--ink); }.fa-form{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:clamp(22px,3vw,32px); box-shadow:0 1px 2px rgba(0,17,52,.05), 0 12px 30px -18px rgba(0,17,52,.18); }.fa-form h2{ font-family:var(--font-display); font-size:22px; margin-bottom:18px; }.fa-form label{ display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:14px; }.fa-opt{ font-weight:500; color:var(--ink-faint); text-transform:none; letter-spacing:0; }.fa-form input,.fa-form select,.fa-form textarea{ width:100%; margin-top:6px; font:inherit; font-size:15px; padding:11px 13px; border:1px solid var(--line); border-radius:9px; background:#fff; }.fa-form input:focus,.fa-form select:focus,.fa-form textarea:focus{ outline:2px solid var(--brand-blue); outline-offset:1px; border-color:var(--brand-blue); }.fa-form input[aria-invalid=true],.fa-form select[aria-invalid=true]{ border-color:#dc2626; }.fa-fine{ font-size:13px; color:var(--ink-faint); margin-top:12px; }/* decoder */ .dec-warn{ background:#FFFBEB; border:1px solid #FDE68A; border-left:3px solid #F59E0B; border-radius:11px; padding:15px 18px; font-size:14px; color:#78350F; margin:34px 0 20px; }.dec{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 1px 2px rgba(0,17,52,.05), 0 16px 40px -24px rgba(0,17,52,.22); }.dec-bar{ display:flex; align-items:center; gap:7px; padding:13px 18px; background:var(--bg-soft); border-bottom:1px solid var(--line); }.dec-bar i{ width:10px; height:10px; border-radius:50%; background:#cbd5e1; }.dec-bar em{ font-style:normal; font-size:13px; font-weight:700; color:var(--ink-soft); margin-left:10px; }.dec-free{ margin-left:auto; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-teal-d); }.dec-body{ padding:20px; min-height:110px; }.dec-hint{ font-size:14.5px; color:var(--ink-faint); }.dec-form{ padding:0 20px 20px; }.dec-form textarea{ width:100%; font:inherit; font-size:14.5px; padding:13px; border:1px solid var(--line); border-radius:10px; background:var(--bg-soft); resize:vertical; }.dec-form textarea:focus{ outline:2px solid var(--brand-blue); outline-offset:1px; background:#fff; }.dec-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px; }.dec-meta{ font-size:13px; color:var(--ink-faint); }.dec-gate{ border-top:1px solid var(--line); padding:24px 20px; background:var(--bg-soft); }.dec-gate h3{ font-family:var(--font-display); font-size:20px; }.dec-gate p{ font-size:14.5px; color:var(--ink-soft); margin:8px 0 16px; }.dec-gform{ display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:end; }.dec-gform label{ display:block; font-size:13px; font-weight:700; }.dec-gform input{ width:100%; margin-top:6px; font:inherit; font-size:15px; padding:11px 13px; border:1px solid var(--line); border-radius:9px; }.dec-what{ padding:48px 0; }.dec-what h2{ font-family:var(--font-display); font-size:24px; margin-bottom:18px; }.dec-g{ display:grid; grid-template-columns:repeat(auto-fit,minmax(212px,1fr)); gap:14px; }.dec-g > div{ border:1px solid var(--line); border-radius:12px; padding:18px 20px; background:#fff; }.dec-g .is-key{ border-color:var(--brand-teal-100); background:var(--brand-teal-50); }.dec-g b{ display:block; font-size:15px; color:var(--ink); }.dec-g span{ display:block; font-size:13.8px; color:var(--ink-soft); margin-top:6px; line-height:1.5; }@media(max-width:880px){.fa-in{ grid-template-columns:1fr }.dec-gform{ grid-template-columns:1fr }}.foot-compliance{ max-width:1180px; margin:18px auto 0; padding:16px 24px 0; border-top:1px solid var(--line); font-size:12.5px; line-height:1.6; color:var(--ink-faint); }/* header: four destinations, one of them the conversion */ .main-nav{ display:flex; align-items:center; gap:4px; }.main-nav > a{ font-size:14.5px; font-weight:600; color:var(--ink-soft); padding:9px 13px; border-radius:8px; text-decoration:none; white-space:nowrap; }.main-nav > a:hover{ color:var(--brand-blue); background:var(--brand-blue-50); }.main-nav a.nav-cta{ background:var(--brand-teal-50); color:var(--brand-teal-d); border:1px solid var(--brand-teal-100); margin-left:6px; }.main-nav a.nav-cta:hover{ background:var(--brand-teal-100); }/* footer: six columns, everything else lives here */ .site-footer .cols{ grid-template-columns:1.7fr repeat(5,1fr) !important; }.foot-desc{ font-size:14px; color:var(--ink-soft); line-height:1.6; margin-top:12px; max-width:30ch; }.foot-flags{ display:flex; flex-wrap:wrap; gap:7px; margin-top:16px; }.foot-flags span{ font-size:11px; font-weight:700; color:var(--ink-faint); border:1px solid var(--line); border-radius:999px; padding:4px 10px; }.site-footer .cols > div > a{ display:block; margin-bottom:9px; }@media(max-width:1080px){.site-footer .cols{ grid-template-columns:1fr 1fr 1fr !important; }}@media(max-width:720px){.site-footer .cols{ grid-template-columns:1fr 1fr !important; }.site-footer .cols > div:first-child{ grid-column:1/-1; }}/* ============================================================ CALCULATORS — real, playable, no signup ============================================================ */ .pdc{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(24px,3.5vw,44px); align-items:start; padding:40px 0; }.pdc-in{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 24px; }.pdc-in h2{ font-family:var(--font-display); font-size:18px; letter-spacing:-.01em; margin:0 0 14px; }.pdc-in h2:not(:first-child){ margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }.pdc-grid{ display:grid; gap:11px; }.pdc-f{ display:grid; grid-template-columns:1fr 128px; gap:12px; align-items:center; }.pdc-f > span{ font-size:14px; color:var(--ink-soft); }.pdc-f input[type=number]{ width:100%; font:inherit; font-size:15px; padding:9px 12px; border:1px solid var(--line); border-radius:8px; text-align:right; font-variant-numeric:tabular-nums; }.pdc-f input:focus{ outline:2px solid var(--brand-blue); outline-offset:1px; }.pdc-ex{ grid-column:1/-1; justify-self:end; font-style:normal; font-size:12px; color:var(--ink-faint); display:inline-flex; align-items:center; gap:6px; margin-top:-4px; }.pdc-hint{ font-size:13px; color:var(--ink-faint); margin:16px 0 14px; line-height:1.55; }.pdc-out{ min-height:160px; }.pdc-ok{ background:var(--bg-soft); border:1px solid var(--line); border-radius:13px; padding:22px 24px; font-size:15px; color:var(--ink-soft); }.pdc-ok b{ color:var(--ink); }.pdc-heads{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }.pdc-heads > div{ border:1px solid var(--line); border-radius:13px; padding:18px 20px; background:#fff; }.pdc-heads .is-real{ border-color:var(--brand-teal-100); background:var(--brand-teal-50); }.pdc-heads u{ display:block; text-decoration:none; font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); }.pdc-heads q{ display:block; quotes:none; font-family:var(--font-mono); font-size:29px; font-weight:600; color:var(--ink); margin-top:8px; font-variant-numeric:tabular-nums; letter-spacing:-.02em; }.pdc-heads .is-real q{ color:var(--brand-teal-d); }.pdc-heads span{ display:block; font-size:12.5px; color:var(--ink-faint); margin-top:6px; }.pdc-ratio{ background:var(--bg-soft); border:1px solid var(--line); border-radius:10px; padding:12px 16px; font-size:14px; color:var(--ink-soft); margin-bottom:16px; }.pdc-ratio b{ font-family:var(--font-mono); color:var(--ink); font-variant-numeric:tabular-nums; }.pdc-tbl-w{ overflow-x:auto; border:1px solid var(--line); border-radius:12px; }.pdc-t{ width:100%; border-collapse:collapse; font-size:14px; min-width:420px; }.pdc-t th,.pdc-t td{ padding:11px 14px; text-align:right; border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums; }.pdc-t thead th{ background:var(--bg-soft); font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-faint); font-weight:800; }.pdc-t tbody th,.pdc-t thead th:first-child{ text-align:left; font-weight:600; color:var(--ink); }.pdc-t td{ color:var(--ink-soft); }.pdc-t tr.is-cut td:last-child{ color:var(--brand-teal-d); font-weight:700; }.pdc-t tr.is-ex{ opacity:.62; }.pdc-t tr.is-ex em{ font-style:normal; font-size:10.5px; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.06em; }.pdc-t tr.pdc-tot th,.pdc-t tr.pdc-tot td{ background:var(--brand-teal-50); color:var(--brand-teal-d); font-weight:700; border-bottom:0; }.pdc-note{ font-size:13.5px; color:var(--ink-faint); margin-top:14px; line-height:1.6; }.pdc-note b{ color:var(--ink); }.pdc-cta{ margin-top:18px; }.pdc-explain{ max-width:70ch; padding:20px 0 56px; }.pdc-explain h2{ font-family:var(--font-display); font-size:24px; margin-bottom:14px; }.pdc-src{ font-size:14px; color:var(--ink-faint); margin-top:18px; }@media(max-width:900px){.pdc{ grid-template-columns:1fr; }.pdc-heads{ grid-template-columns:1fr; }}/* ── connecting payers ─────────────────────────────────────────────────── */ .int-hero{ padding:40px 0 8px; }.int-flow{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:16px; align-items:center; }.int-step{ background:#fff; border:1px solid var(--line); border-radius:15px; padding:22px 22px; }.int-step.is-key{ border-color:var(--brand-teal-100); background:var(--brand-teal-50); }.int-step span{ font-family:var(--font-mono); font-size:12.5px; font-weight:700; color:var(--brand-teal-d); }.int-step b{ display:block; font-family:var(--font-display); font-size:19px; margin:10px 0 8px; letter-spacing:-.014em; line-height:1.28; }.int-step p{ font-size:14.2px; color:var(--ink-soft); line-height:1.6; }.int-step code{ background:#fff; border:1px solid var(--line); border-radius:6px; padding:2px 7px; font-size:13px; color:var(--ink); }.int-arrow{ font-size:22px; color:var(--brand-teal); }.int-why,.int-routes,.int-privacy{ padding:48px 0 0; }.int-why h2,.int-routes h2,.int-privacy h2{ font-family:var(--font-display); font-size:26px; letter-spacing:-.022em; margin-bottom:18px; }.int-wg{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; }.int-wg > div{ border:1px solid var(--line); border-radius:12px; padding:20px 22px; background:#fff; }.int-wg .is-key{ border-color:var(--brand-teal-100); background:var(--brand-teal-50); }.int-wg b{ display:block; font-size:15.5px; color:var(--ink); }.int-wg span{ display:block; font-size:14px; color:var(--ink-soft); margin-top:7px; line-height:1.58; }@media(max-width:900px){.int-flow{ grid-template-columns:1fr; }.int-arrow{ transform:rotate(90deg); justify-self:center; }}/* form validation + payer chips */ .f-err{ display:block; margin-top:5px; font-style:normal; font-size:12.5px; font-weight:600; color:#B91C1C; }.f-done{ background:var(--brand-teal-50); border:1px solid var(--brand-teal-100); border-radius:13px; padding:26px 24px; }.f-done b{ display:block; font-family:var(--font-display); font-size:21px; color:var(--ink); letter-spacing:-.016em; }.f-done p{ font-size:15px; color:var(--ink-soft); line-height:1.65; margin-top:10px; }.f-fallback{ margin-top:16px; background:#FFFBEB; border:1px solid #FDE68A; border-radius:11px; padding:16px 18px; }.f-fallback b{ color:#78350F; font-size:14.5px; }.f-fallback p{ font-size:14px; color:#78350F; margin-top:6px; line-height:1.6; }.f-fallback a{ color:#92400E; text-decoration:underline; }.pset{ border:1px solid var(--line); border-radius:11px; padding:16px 16px 14px; margin-bottom:14px; }.pset legend{ font-size:13px; font-weight:700; padding:0 6px; }.pset-h{ font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); margin:6px 0 8px; }.pchips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }.pchip{ margin:0 !important; }.pchip{ position:relative; display:inline-flex; }/* visually hidden but still a real, focusable, hit-testable control — width:0/height:0 removes it from the accessibility tree's hit region and makes it unreachable for anything that targets the input directly */ .pchip input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:1; }.pchip span{ display:inline-flex; align-items:center; min-height:32px; padding:6px 11px; font-size:12.5px; font-weight:600; color:var(--ink-soft); background:#fff; border:1px solid var(--line); border-radius:999px; cursor:pointer; transition:.15s; }.pchip input:checked + span{ background:var(--brand-teal-50); color:var(--brand-teal-d); border-color:var(--brand-teal-100); }.pchip input:focus-visible + span{ outline:2px solid var(--brand-blue); outline-offset:2px; }.pset-n{ font-size:12.5px; color:var(--ink-faint); line-height:1.55; }.dec-payer{ display:block; font-size:13px; font-weight:700; margin-top:12px; }.dec-payer select{ width:100%; max-width:340px; margin-top:6px; font:inherit; font-size:14.5px; padding:10px 12px; border:1px solid var(--line); border-radius:9px; }/* ── three playable assistants ─────────────────────────────────────────── */ .h3-panel .dd-bar em{ font-style:normal; }.h3-panel .dd-bar em em{ color:var(--ink-faint); font-weight:500; }.h3-panel .dd-live{ text-transform:none; letter-spacing:0; font-weight:600; font-size:11.5px; }.h3-panel .dd-live::before{ display:none; }.h3-panel .dd-body{ min-height:300px; max-height:440px; }/* ── inline deployment proof ───────────────────────────────────────────── */ .pf-sec{ padding:clamp(52px,6.5vw,80px) 0; }.pf-lead{ font-size:16px; color:var(--ink-soft); max-width:58ch; margin:-22px 0 30px; }.pf-g{ display:grid; grid-template-columns:repeat(auto-fit,minmax(262px,1fr)); gap:16px; }.pf{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px 22px; }.pf-k{ display:inline-flex; font-size:10.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--brand-teal-d); background:var(--brand-teal-50); border:1px solid var(--brand-teal-100); border-radius:999px; padding:5px 11px; }.pf b{ display:block; font-family:var(--font-display); font-size:18px; letter-spacing:-.014em; margin:13px 0 10px; line-height:1.3; }.pf ul{ list-style:none; margin:0; padding:12px 0 0; border-top:1px solid var(--line); }.pf li{ position:relative; padding:6px 0 6px 19px; font-size:13.8px; color:var(--ink-soft); line-height:1.55; }.pf li::before{ content:""; position:absolute; left:0; top:13px; width:7px; height:7px; border-radius:2px; background:var(--brand-teal); }.pf-more{ margin-top:22px; }.pf-more a{ font-size:14.5px; font-weight:700; color:var(--brand-teal-d); }.pdc-t td.fill{ color:#B45309; background:#FFFBEB; font-style:italic; }/* markets: state groups */ .st-g{ display:grid; gap:14px; padding:40px 0 0; }.st{ border:1px solid var(--line); border-radius:14px; padding:20px 22px; background:#fff; }.st-h{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:12px; }.st-h a{ text-decoration:none; }.st-h b{ font-family:var(--font-display); font-size:20px; letter-spacing:-.016em; color:var(--ink); }.st-h a:hover b{ color:var(--brand-blue); }.st-h span{ font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--brand-teal-d); background:var(--brand-teal-50); border:1px solid var(--brand-teal-100); border-radius:999px; padding:4px 10px; }.st-c{ display:flex; flex-wrap:wrap; gap:7px; padding-top:12px; border-top:1px solid var(--line); }.st-c a{ font-size:13.5px; color:var(--ink-soft); text-decoration:none; padding:7px 12px; border:1px solid var(--line); border-radius:999px; min-height:34px; display:inline-flex; align-items:center; }.st-c a:hover{ border-color:var(--brand-teal-100); color:var(--brand-teal-d); background:var(--brand-teal-50); }/* ── site search ───────────────────────────────────────────────────────── */ .nav-search{ display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:14px; font-weight:600; color:var(--ink-soft); background:var(--bg-soft); border:1px solid var(--line); border-radius:8px; padding:8px 12px; cursor:pointer; margin-left:4px; }.nav-search:hover{ border-color:var(--brand-blue); color:var(--brand-blue); }.nav-search kbd{ font:inherit; font-size:11px; color:var(--ink-faint); background:#fff; border:1px solid var(--line); border-radius:4px; padding:1px 5px; }@media(max-width:900px){.nav-search span,.nav-search kbd{ display:none }.nav-search{ padding:9px 10px }}.sr{ position:fixed; inset:0; z-index:200; background:rgba(0,17,52,.42); backdrop-filter:blur(3px); padding:8vh 20px 20px; overflow-y:auto; }.sr-box{ max-width:680px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 30px 70px -30px rgba(0,17,52,.5); }.sr-top{ display:flex; align-items:center; gap:11px; padding:16px 18px; border-bottom:1px solid var(--line); color:var(--ink-faint); }.sr-top input{ flex:1; font:inherit; font-size:17px; border:0; outline:0; color:var(--ink); background:transparent; }.sr-top button{ font:inherit; font-size:11.5px; font-weight:700; color:var(--ink-faint); background:var(--bg-soft); border:1px solid var(--line); border-radius:6px; padding:4px 9px; cursor:pointer; }.sr-out{ max-height:56vh; overflow-y:auto; }.sr-count{ font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); padding:13px 18px 6px; margin:0; }.sr-i{ display:block; padding:13px 18px; border-top:1px solid var(--line); text-decoration:none; }.sr-i:hover,.sr-i:focus{ background:var(--brand-blue-50); outline:0; }.sr-i b{ display:block; font-size:15.5px; color:var(--ink); margin:8px 0 4px; line-height:1.35; }.sr-d{ display:block; font-size:13.5px; color:var(--ink-soft); line-height:1.55; }.sr-d mark{ background:#FEF3C7; color:var(--ink); padding:0 2px; border-radius:2px; }.sr-none{ padding:22px 18px; font-size:14.5px; color:var(--ink-soft); margin:0; }.sr-foot{ padding:12px 18px; border-top:1px solid var(--line); background:var(--bg-soft); font-size:12.5px; color:var(--ink-faint); margin:0; }/* Placeholder blocks: visible to whoever is filling them, quiet enough that a shared draft link does not read as a broken page. These only ever appear on noindexed pages. */ .dmega.wide{ display:grid; grid-template-columns:repeat(3,minmax(210px,1fr)); gap:26px; padding:24px 26px; min-width:720px; }.dmega-lab{ font-size:10.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:11px; }.dmega-tiles{ display:grid; gap:4px; }.dmega-tile{ display:block; padding:9px 11px; border-radius:9px; text-decoration:none; }.dmega-tile:hover{ background:var(--brand-blue-50); }.dmega-tile b{ display:block; font-size:14.5px; color:var(--ink); }.dmega-tile span{ display:block; font-size:12.5px; color:var(--ink-faint); margin-top:2px; }@media(max-width:900px){.dmega.wide{ grid-template-columns:1fr; min-width:0; }}/* ── STICKY HEADER ───────────────────────────────────────────────────────── position:sticky fails if any ancestor is a scroll container. The search overlay was setting body.style.overflow and resetting it to '' — but a stylesheet rule elsewhere left body at overflow:auto, which is enough. Body must not scroll-contain; lock the html element instead when needed. */ html,body{ overflow:visible; }html.is-locked,html.is-locked body{ overflow:hidden; }.site-header{ position:sticky !important; top:0; z-index:60; background:rgba(255,255,255,.94) !important; backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line); transition:box-shadow .2s ease; }.site-header.is-stuck{ box-shadow:0 1px 2px rgba(0,17,52,.05), 0 8px 24px -16px rgba(0,17,52,.24); }.site-header .wrap{ display:flex !important; align-items:center; gap:22px; height:64px; flex-wrap:nowrap; }.site-header .main-nav{ display:flex; align-items:center; gap:4px; margin-left:auto; }.site-header .header-cta{ display:flex; align-items:center; gap:12px; }@media(max-width:900px){.site-header .wrap{ gap:12px; }.site-header .main-nav{ margin-left:0; }}/* ── 768px OVERFLOW ──────────────────────────────────────────────────────── Removing overflow-x:hidden from html/body fixed sticky, but it had been hiding two real overflows. Both are fixed at source rather than clipped. 1. The header collapsed at 900px, but nav + CTA already overflow at 768. 2. The marquee track is 8,544px wide. It needs its own clipping context — which is safe, because a section-level overflow:hidden does not make an ancestor of the header into a scroll container. */ @media(max-width:1024px){.site-header .main-nav > a{ padding:8px 9px; font-size:13.5px; }.nav-search span{ display:none; }.nav-search kbd{ display:none; }}@media(max-width:860px){.site-header .main-nav, .site-header .header-cta .link-quiet{ display:none; }.site-header .nav-toggle{ display:grid; margin-left:auto; order:9; }.site-header .header-cta{ margin-left:0; }.site-header.open .main-nav{ display:flex; }}@media(max-width:560px){.site-header .header-cta .btn{ padding:9px 14px; font-size:13.5px; }}/* 1024px: nav + search + CTA still exceed the bar before the 860 collapse. Tighten the gaps rather than adding another breakpoint. */ @media(max-width:1120px){.site-header .wrap{ gap:12px; }.site-header .main-nav{ gap:0; }.site-header .main-nav > a{ padding:8px 8px; font-size:13px; }.nav-search{ padding:8px 10px; margin-left:2px; }.site-header .header-cta{ gap:8px; }.site-header .header-cta .link-quiet{ font-size:13.5px; }}/* The mega panel is absolutely positioned, but at 720px wide and centred on the Solutions button it still extends the document's scroll width on mid-size screens — even while hidden, because visibility:hidden elements are still laid out. Clamp it to the viewport and take it out of layout entirely when closed. */ .dmega,.dmega.wide{ min-width:min(720px, calc(100vw - 32px)); max-width:calc(100vw - 32px); box-sizing:border-box; }.dnav-item{ position:relative; }.dnav-item .dmega{ pointer-events:none; }.dnav-item:hover .dmega,.dnav-item:focus-within .dmega{ pointer-events:auto; }@media(min-width:861px){/* closed panels must not contribute to scroll width at all */ .dnav-item .dmega{ content-visibility:hidden; }.dnav-item:hover .dmega,.dnav-item:focus-within .dmega{ content-visibility:visible; }}/* The full nav — four links, search and CTA — genuinely needs about 1150px. Tightening spacing below that only delayed the overflow; it did not fix it. Collapse to the toggle at 1080 instead, which is where the content actually stops fitting rather than where a round number suggested it might. */ @media(max-width:1080px){.site-header .main-nav{ display:none; }.site-header .header-cta .link-quiet{ display:none; }.site-header .nav-toggle{ display:grid; margin-left:auto; order:9; }.site-header.open .main-nav{ display:flex; position:fixed; inset:64px 12px auto 12px; flex-direction:column; align-items:stretch; gap:2px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:10px; box-shadow:0 24px 50px -26px rgba(0,17,52,.4); z-index:70; max-height:calc(100vh - 84px); overflow-y:auto; }.site-header.open .main-nav > a{ padding:12px 14px; font-size:15px; }.site-header.open .nav-search{ width:100%; justify-content:flex-start; margin:4px 0; }.site-header.open .nav-search span{ display:inline; }}/* Calculator field grid was locked to two columns at every width. On a 390px viewport that is a 480px row — which overflow-x:hidden had been clipping rather than fixing. Collapse it, and let long option labels wrap. */ @media(max-width:560px){.dg2{ grid-template-columns:1fr !important; }.dfield,.dfield label,.dfield input,.dfield select{ max-width:100%; min-width:0; }.card h3{ overflow-wrap:anywhere; }}.dg2{ min-width:0; }.dg2 > *{ min-width:0; }/* ── GRID BLOWOUT ────────────────────────────────────────────────────────── .dcalc-grid already collapsed to 1fr at 880px, but 1fr is minmax(auto, 1fr) and the auto minimum refuses to shrink below the item's min-content width. So a 342px container held a 538px track and the page overflowed — which overflow-x:hidden had been clipping rather than fixing. minmax(0, 1fr) is the fix, and min-width:0 on the children makes it stick. */ .dcalc-grid,.dscen,.dg2,.pdc,.fa-in,.hfaq-in,.one-in,.ri-star-in,.int-flow,.fin-in{ grid-template-columns:minmax(0,1fr); }@media(min-width:881px){.dcalc-grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); }.pdc{ grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); }.fa-in{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); }.hfaq-in{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }.one-in{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); }.ri-star-in{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); }.fin-in{ grid-template-columns:minmax(0,1fr) auto; }.int-flow{ grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); }/* v139: .dg2 and .dscen were collapsed to one column in the blowout fix above but left out of this restore, so they stayed single-column on desktop. */.dg2{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }.dscen{ grid-template-columns:repeat(3,minmax(0,1fr)); }}.dcalc-grid > *,.dscen > *,.dg2 > *,.pdc > *,.fa-in > *,.hfaq-in > *, .one-in > *,.ri-star-in > *,.fin-in > *{ min-width:0; }.dinp,.dfield input,.dfield select,.dfield label{ max-width:100%; }/* .dtable carries min-width:480px so its columns stay readable. That is the right instinct and the wrong mechanism — on a 390px screen it pushes the whole page wide. Give the table its own scroll container instead, so the columns keep their width and the page keeps its. */ @media(max-width:620px){.dtable{ min-width:520px; }.dcalc-out .dtable,.card .dtable{ display:table; }.dtable-w,.dcalc-out,.card{ max-width:100%; }.card:has(> .dtable){ overflow-x:auto; }}/* The table's immediate parent is an unclassed div inside .dblock, which is why the earlier :has() and .card selectors never matched. Make .dblock the scroll container — it is the nearest element that reliably wraps the table on every calculator page. */ .dblock{ max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; }.dblock > *{ min-width:0; }@media(max-width:620px){.dtable{ min-width:460px; font-size:.79rem; }.dtable th,.dtable td{ padding:9px 10px; }}/* Markets mega-menu — five columns, wider than Solutions */ .dmega-mkt .dmega-tile b{ font-size:13.5px; }.dmega-mkt .dmega-tile span{ font-size:11.5px; }/* search results, grouped */ .sr-g{ display:flex; align-items:center; justify-content:space-between; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); background:var(--bg-soft); padding:8px 18px; margin:0; border-top:1px solid var(--line); position:sticky; top:0; }.sr-g em{ font-style:normal; font-weight:700; letter-spacing:0; text-transform:none; color:var(--brand-teal-d); }.sr-p{ display:block; font-size:11.5px; color:var(--ink-faint); margin:3px 0 5px; font-family:var(--font-mono); }.sr-i b{ margin:0 0 2px; }.sr-i:focus{ background:var(--brand-blue-50); outline:2px solid var(--brand-blue); outline-offset:-2px; }.sr-more{ font-size:12.5px; color:var(--ink-faint); padding:8px 18px 12px; margin:0; }.foot-legal{ max-width:1180px; margin:18px auto 0; padding:16px 24px 0; border-top:1px solid var(--line); font-size:13px; line-height:1.6; color:var(--ink-soft); }.foot-legal b{ color:var(--ink); }.foot-legal a{ color:var(--brand-teal-d); }.foot-compliance{ border-top:0 !important; padding-top:8px !important; margin-top:6px !important; }.legal-block{ max-width:74ch; }.legal-block h2{ font-family:var(--font-display); font-size:24px; margin:34px 0 14px; }.legal-block h2:first-child{ margin-top:0; }/* Solutions panel now carries four columns including specialty */ .dmega.wide:not(.dmega-mkt){ grid-template-columns:repeat(4,minmax(196px,1fr)) !important; min-width:min(860px, calc(100vw - 32px)) !important; }@media(max-width:1080px){.dmega.wide:not(.dmega-mkt){ grid-template-columns:1fr !important; min-width:0 !important; }}/* Solutions panel now leads with facility type — the list a visitor scans to find themselves. Four columns, and the type column is taller so it scrolls rather than stretching the panel. */ .dmega.wide:not(.dmega-mkt){ grid-template-columns:minmax(220px,1.2fr) minmax(200px,1fr) minmax(190px,1fr) !important; min-width:min(760px, calc(100vw - 32px)) !important; }.dmega-types .dmega-tiles{ max-height:340px; overflow-y:auto; }.dmega-types .dmega-tile b{ font-size:13.5px; }.dmega-types .dmega-tile span{ font-size:11.5px; }@media(max-width:1080px){.dmega.wide:not(.dmega-mkt){ grid-template-columns:1fr !important; min-width:0 !important; }.dmega-types .dmega-tiles{ max-height:none; }}/* ── LOGO WALL ───────────────────────────────────────────────────────────── Empty until there is a real customer with written permission. The empty state is written to be worth reading on its own, so the section is not a visible gap while you wait. */ /* populated state */ /* ── DECODER OUTPUT ────────────────────────────────────────────────────── */ .dx-try{ font-size:13.5px; color:var(--ink-faint); margin:12px 0; }.dx-try a{ font-weight:700; color:var(--brand-teal-d); }.dx-hint{ font-size:14.5px; color:var(--ink-faint); }.dx-warn{ background:#FFFBEB; border:1px solid #FDE68A; border-left:3px solid #F59E0B; border-radius:10px; padding:14px 16px; font-size:14px; color:#78350F; margin-bottom:18px; line-height:1.55; }.dx-sec{ margin-bottom:22px; }.dx-sec h4{ font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 10px; }.dx-t{ border:1px solid var(--line); border-radius:10px; overflow:hidden; }.dx-r{ display:flex; justify-content:space-between; gap:16px; padding:10px 14px; border-bottom:1px solid var(--line); font-size:14px; }.dx-r:last-child{ border-bottom:0; }.dx-r span{ color:var(--ink-soft); }.dx-r b{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--ink); }.dx-r.is-tot{ background:var(--bg-soft); }.dx-r.is-tot b{ color:var(--brand-teal-d); font-weight:700; }.dx-basis{ font-size:12.5px; color:var(--ink-faint); margin-top:8px; line-height:1.5; }.dx-lines{ display:grid; gap:8px; }.dx-l{ display:grid; grid-template-columns:1fr auto; gap:4px 14px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:#fff; }.dx-g{ font-size:13.5px; font-weight:700; color:var(--ink); }.dx-l b{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--ink); }.dx-x{ grid-column:1/-1; font-size:12px; color:var(--ink-faint); line-height:1.45; overflow-wrap:anywhere; }.dx-tag{ grid-column:1/-1; justify-self:start; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:3px 9px; border-radius:999px; margin-top:4px; }.dx-l.is-predictable .dx-tag{ background:var(--bg-soft); color:var(--ink-faint); border:1px solid var(--line); }.dx-l.is-collectable .dx-tag{ background:var(--brand-blue-50); color:var(--brand-blue); border:1px solid var(--brand-blue-100); }.dx-l.is-unexplained{ border-color:var(--brand-teal-100); background:var(--brand-teal-50); }.dx-l.is-unexplained .dx-tag{ background:var(--brand-teal-d); color:#fff; }.dx-split{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin:20px 0; }.dx-split > div{ border:1px solid var(--line); border-radius:12px; padding:16px 18px; background:#fff; }.dx-split .is-key{ border-color:var(--brand-teal-100); background:var(--brand-teal-50); }.dx-split u{ display:block; text-decoration:none; font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); }.dx-split q{ display:block; quotes:none; font-family:var(--font-mono); font-size:23px; font-weight:600; color:var(--ink); margin-top:7px; font-variant-numeric:tabular-nums; }.dx-split .is-key q{ color:var(--brand-teal-d); }.dx-split span{ display:block; font-size:12px; color:var(--ink-faint); margin-top:5px; }.dx-clean{ background:var(--bg-soft); border:1px solid var(--line); border-left:3px solid var(--brand-blue); border-radius:11px; padding:18px 20px; font-size:14.5px; color:var(--ink-soft); line-height:1.6; }.dx-clean b{ color:var(--ink); }.dx-cta{ background:var(--brand-teal-50); border:1px solid var(--brand-teal-100); border-radius:13px; padding:20px 22px; }.dx-cta b{ display:block; font-size:16px; color:var(--ink); }.dx-cta p{ font-size:14px; color:var(--ink-soft); margin:8px 0 16px; line-height:1.6; }/* ── SAHAYAK ───────────────────────────────────────────────────────────── */ .sk{ background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 1px 2px rgba(0,17,52,.05), 0 16px 40px -26px rgba(0,17,52,.22); margin:22px 0; }.sk .dd-body{ min-height:260px; max-height:420px; }.sk .dd-live{ text-transform:none; letter-spacing:0; font-weight:600; font-size:11.5px; }.sk .dd-live::before{ display:none; }.sk-steps{ display:grid; gap:9px; margin:13px 0; }.sk-steps > div{ display:grid; grid-template-columns:26px 1fr; gap:4px 11px; align-items:start; }.sk-steps span{ grid-row:span 2; width:26px; height:26px; border-radius:50%; background:var(--brand-teal-50); color:var(--brand-teal-d); border:1px solid var(--brand-teal-100); display:grid; place-items:center; font-size:12px; font-weight:800; }.sk-steps b{ font-size:14px; color:var(--ink); }.sk-steps em{ font-style:normal; font-size:13px; color:var(--ink-soft); line-height:1.5; }.sk-l{ list-style:none; margin:12px 0; padding:0; }.sk-l li{ position:relative; padding:5px 0 5px 19px; font-size:13.8px; color:var(--ink-soft); line-height:1.5; }.sk-l li::before{ content:""; position:absolute; left:0; top:12px; width:7px; height:7px; border-radius:2px; background:var(--brand-teal); }.sk-link{ font-weight:700; color:var(--brand-teal-d); }/* ── SAHAYAK LETTER TEMPLATES ──────────────────────────────────────────── */ .sk-tpl{ border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; margin:14px 0; }.sk-tpl-h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:12px 15px; background:var(--bg-soft); border-bottom:1px solid var(--line); flex-wrap:wrap; }.sk-tpl-h b{ font-size:14.5px; color:var(--ink); }.sk-tpl-h span{ font-size:11.5px; color:var(--ink-faint); }.sk-tpl-m{ display:grid; grid-template-columns:56px 1fr; gap:10px; padding:9px 15px; border-bottom:1px solid var(--line); font-size:13px; }.sk-tpl-m u{ text-decoration:none; font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); padding-top:2px; }.sk-tpl-m span{ color:var(--ink-soft); }.sk-tpl-b{ margin:0; padding:15px; font-family:var(--font-mono); font-size:12.5px; line-height:1.62; color:var(--ink); white-space:pre-wrap; overflow-wrap:anywhere; max-height:290px; overflow-y:auto; background:#fff; }.sk-tpl-f{ display:flex; align-items:center; gap:12px; padding:11px 15px; border-top:1px solid var(--line); background:var(--bg-soft); flex-wrap:wrap; }.sk-copy{ font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; color:var(--brand-teal-d); background:#fff; border:1px solid var(--brand-teal-100); border-radius:7px; padding:6px 13px; min-height:32px; }.sk-copy:hover{ background:var(--brand-teal-50); }.sk-tpl-f em{ font-style:normal; font-size:12px; color:var(--ink-faint); line-height:1.5; flex:1; min-width:180px; }/* ── CONTRAST ────────────────────────────────────────────────────────────── Measured across six pages: 256 of 1,100 text elements failed WCAG AA. The cause was one token. --ink-faint was #94A3B8, which is 2.56:1 on white — fine for a decorative rule, not for the hints, captions, meta lines and menu descriptions it was actually being used on. Darkened to #556274 (5.1:1). The teal and green accents were also marginal at small sizes. */ :root{ --ink-faint:#556274; --brand-teal-d:#0F6E6D; --green:#0F7A4F; }.dd-hint,.mq-lab,.pdc-note,.int-note,.pf-lead,.lw-note,.dx-basis,.sr-more, .dmega-tile span,.dmega-lab,.sk-tpl-h span,.sk-tpl-f em,.foot-compliance, .bl-meta span,.cs-fact u,.dmock-k u,.dd-tbl-h,.tl-note,.fa-fine,.pr-fine, .pset-n,.dec-meta,.dx-split span,.st-c a{ color:#556274 !important; }.dmock-live,.dd-live{ color:#0F7A4F !important; }.rk.lo{ color:#556274 !important; }.rk.hi{ color:#0F6E6D !important; }.nav-cta{ color:#0B5B5A !important; }.hx-eb,.cs-badge,.dep-k,.bl-cat,.dmock-pill,.sec-eb,.one-eb,.dd-eyebrow, .tl-t,.why-n,.dd-badge,.cs-p,.sr-g em{ color:#0F6E6D !important; }.skip{ position:absolute; left:-9999px; top:0; z-index:300; background:var(--ink); color:#fff; padding:12px 18px; border-radius:0 0 8px 0; font-weight:700; font-size:14px; }.skip:focus{ left:0; }.bl-more{ font-size:15px; color:var(--ink-soft); padding:14px 16px; background:var(--bg-soft); border:1px solid var(--line); border-radius:10px; margin:26px 0; }.bl-more a{ font-weight:700; color:var(--brand-teal-d); }.st-crosslink{ margin-top:48px; padding-top:34px; border-top:1px solid var(--line); }.st-next-a{ display:inline-block; font-size:16px; font-weight:700; color:var(--brand-teal-d); padding:12px 18px; border:1px solid var(--brand-teal-100); background:var(--brand-teal-50); border-radius:10px; text-decoration:none; }.st-next-a:hover{ background:var(--brand-teal-100); }/* ── HTML SITEMAP ──────────────────────────────────────────────────────── */ .sm-g{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(22px,3vw,40px); padding:44px 0; align-items:start; }.sm-sec h2{ font-family:var(--font-display); font-size:19px; letter-spacing:-.014em; padding-bottom:10px; border-bottom:2px solid var(--brand-teal); margin-bottom:12px; display:flex; align-items:baseline; justify-content:space-between; gap:10px; }.sm-sec h2 em{ font-style:normal; font-family:var(--font-mono); font-size:12.5px; font-weight:700; color:#0F6E6D; }.sm-l{ list-style:none; margin:0; padding:0; }.sm-l li{ border-bottom:1px solid var(--line); }.sm-l li:last-child{ border-bottom:0; }.sm-l a{ display:block; padding:8px 0; font-size:14px; color:var(--ink-soft); text-decoration:none; line-height:1.45; }.sm-l a:hover{ color:#0F6E6D; }/* in-body cross-links — nav and footer links carry less weight than these */ .lk-near{ margin:34px 0; padding-top:20px; border-top:1px solid var(--line); }.lk-row{ display:flex; flex-wrap:wrap; gap:8px; }.lk-row a{ font-size:13.5px; color:var(--ink-soft); text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:8px 14px; min-height:34px; display:inline-flex; align-items:center; }.lk-row a:hover{ border-color:var(--brand-teal-100); color:#0F6E6D; background:var(--brand-teal-50); }/* ── CHARTS ────────────────────────────────────────────────────────────── */ .cx-wrap{ margin:26px 0; }.cx{ margin:0; border:1px solid var(--line); border-radius:14px; background:#fff; padding:20px 22px; box-shadow:0 1px 2px rgba(0,17,52,.04); }.cx-t{ font-family:var(--font-display); font-size:17px; letter-spacing:-.014em; color:var(--ink); margin-bottom:16px; line-height:1.35; }.cx-svg{ overflow-x:auto; }/* Chart arrival. Every rule is gated on .cx-armed, which only JS adds, so a no-JS or reduced-motion reader gets the finished chart with no hidden marks. */ .cx-armed svg rect{ transform:scaleX(0); transform-origin:left center; transform-box:fill-box; transition:transform .8s cubic-bezier(.22,1,.36,1); }.cx-armed svg circle{ opacity:0; transform:scale(.4); transform-origin:center; transform-box:fill-box; transition:opacity .45s ease, transform .55s cubic-bezier(.34,1.56,.64,1); }.cx-armed svg text{ opacity:0; transition:opacity .5s ease .35s; }.cx-armed.cx-play svg rect{ transform:none; }.cx-armed.cx-play svg circle{ opacity:1; transform:none; }.cx-armed.cx-play svg text{ opacity:1; }.cx-armed svg rect:nth-of-type(2n){ transition-delay:.08s; }.cx-armed svg rect:nth-of-type(3n){ transition-delay:.16s; }@media (prefers-reduced-motion:reduce){.cx-armed svg rect, .cx-armed svg circle, .cx-armed svg text{ opacity:1; transform:none; transition:none; }}/* ── Deduction cascade ─────────────────────────────────────────────────── The animated states are additive: with no JS and with reduced-motion the block renders as a finished bill, because every rule below that hides something is gated on .csc-armed, which only JS adds. */ .csc{ border:1px solid var(--line); border-radius:16px; background:#fff; padding:24px 26px; box-shadow:0 1px 2px rgba(0,17,52,.04), 0 12px 34px -22px rgba(0,17,52,.28); }.csc-h{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:4px; }.csc-h span{ font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }.csc-r{ display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:6px 14px; padding:11px 0; border-bottom:1px solid var(--line-2,#EEF1F5); }.csc-r b{ font-weight:600; font-size:14.5px; }.csc-a{ font:600 14px/1 var(--font-mono,ui-monospace); font-variant-numeric:tabular-nums; }.csc-c{ font:700 13px/1 var(--font-mono,ui-monospace); color:#B5493A; background:#FDF6F4; border-radius:5px; padding:5px 8px; min-width:94px; text-align:right; }.csc-w{ grid-column:1/-1; font-size:12.5px; color:#B5493A; }.csc-f{ display:grid; grid-template-columns:1fr auto; gap:8px 20px; padding-top:16px; margin-top:4px; border-top:2px solid var(--ink); }.csc-k{ font-size:13.5px; color:var(--ink-soft); }.csc-v{ font:700 17px/1 var(--font-mono,ui-monospace); font-variant-numeric:tabular-nums; text-align:right; }.csc-big{ font-size:24px; color:var(--brand-teal-d,#0F6E6D); }.csc-bar{ grid-column:1/-1; height:7px; border-radius:99px; background:var(--line); overflow:hidden; margin-top:6px; }.csc-bar i{ display:block; height:100%; background:var(--brand-teal,#00B6B6); }.csc-n{ font-size:12.5px; color:var(--ink-faint,#8593A6); margin:14px 0 0; }/* animated states, added by JS only */ .csc-armed .csc-r{ transition:opacity .42s ease, transform .42s cubic-bezier(.22,1,.36,1); }.csc-armed .csc-r.csc-hold{ opacity:0; transform:translateY(7px); }.csc-armed .csc-c, .csc-armed .csc-w{ opacity:0; transition:opacity .3s ease, transform .34s cubic-bezier(.22,1,.36,1); }.csc-armed .csc-c{ transform:translateX(-6px); }.csc-armed .csc-r.csc-hit .csc-c, .csc-armed .csc-r.csc-hit .csc-w{ opacity:1; transform:none; }.csc-armed .csc-bar i{ width:0; transition:width 1.5s cubic-bezier(.22,1,.36,1); }@media (prefers-reduced-motion:reduce){.csc-armed .csc-r, .csc-armed .csc-c, .csc-armed .csc-w{ opacity:1; transform:none; }}@media (max-width:560px){.csc{ padding:18px 16px; }.csc-r{ grid-template-columns:1fr auto; }.csc-c{ min-width:0; }}/* Legend and quadrant captions. Added with the chart rewrite: the old charts used two fills with nothing to say which was which, and a chart whose colours are unexplained is a picture, not a reading. */ .cx-lg{ display:flex; flex-wrap:wrap; gap:6px 18px; list-style:none; margin:0 0 14px; padding:0; font-size:12.5px; color:var(--ink-soft,#556274); }.cx-lg li{ display:flex; align-items:center; gap:7px; }.cx-sw{ width:11px; height:11px; border-radius:3px; flex:0 0 auto; }.cx-qd{ font:600 10.5px var(--font-body,system-ui); fill:#8593A6; letter-spacing:.04em; }.cx-s{ width:100%; height:auto; display:block; min-width:520px; }.cx-lb{ font:600 12.5px var(--font-body,system-ui); fill:#001134; }.cx-lb.cx-b{ font-weight:800; }.cx-ax{ font:500 11px var(--font-body,system-ui); fill:#556274; }.cx-v{ font:600 12px var(--font-mono,ui-monospace); fill:#001134; }.cx-hot{ fill:#0F6E6D !important; font-weight:700; }.cx-n{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin-top:12px; max-width:64ch; }.cx-d{ margin-top:16px; border-top:1px solid var(--line); padding-top:12px; }.cx-d summary{ cursor:pointer; font-size:12.5px; font-weight:700; color:var(--brand-teal-d); }.cx-d .pdc-t{ margin-top:12px; font-size:13px; min-width:0; }@media(max-width:640px){.cx{ padding:16px 14px; }.cx-t{ font-size:15.5px; }}/* ── CLINICAL MOTION ─────────────────────────────────────────────────────── One trace, one settle, one tilt. A revenue product that animates like a consumer app reads as unserious to the clinician in the room. */ .ecg{ width:100%; height:76px; overflow:hidden; border-block:1px solid var(--line); background:linear-gradient(180deg,#fff,var(--bg-soft)); }.ecg-s{ width:100%; height:76px; display:block; }.ecg-ghost{ fill:none; stroke:var(--line); stroke-width:1.6; }.ecg-live{ fill:none; stroke:var(--brand-teal); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }.vt-band{ display:grid; grid-template-columns:repeat(auto-fit,minmax(184px,1fr)); gap:20px; }.vt{ border-top:3px solid var(--brand-teal); padding-top:16px; }.vt u{ display:block; text-decoration:none; font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#556274; }.vt q{ display:block; quotes:none; font-family:var(--font-mono); font-size:clamp(26px,3.4vw,38px); font-weight:600; color:var(--ink); line-height:1; letter-spacing:-.028em; margin-top:11px; font-variant-numeric:tabular-nums; opacity:.28; transition:opacity .5s ease; }.vt q.is-on{ opacity:1; }.vt span{ display:block; font-size:13px; color:#556274; margin-top:9px; }@media(prefers-reduced-motion:reduce){.ecg-live{ stroke-dashoffset:0 !important; }.vt q{ opacity:1 !important; }}/* legal pages + footer legal nav */ .lg{ max-width:74ch; margin:44px auto; }.lg h2{ font-family:var(--font-display); font-size:23px; letter-spacing:-.02em; margin:34px 0 12px; }.lg h2:first-of-type{ margin-top:0; }.lg p{ font-size:16px; line-height:1.7; color:var(--ink-soft); margin-bottom:14px; }.lg b{ color:var(--ink); }.lg a{ color:var(--brand-teal-d); font-weight:600; }.lg kbd{ font:inherit; font-size:12.5px; background:var(--bg-soft); border:1px solid var(--line); border-radius:4px; padding:1px 6px; }.lg-upd{ font-size:13px !important; color:var(--ink-faint) !important; padding:10px 14px; background:var(--bg-soft); border:1px solid var(--line); border-radius:8px; }.lg-foot{ margin-top:38px !important; padding-top:20px; border-top:1px solid var(--line); font-size:13.5px !important; color:var(--ink-faint) !important; }.foot-legal-nav{ display:flex; flex-wrap:wrap; gap:6px 18px; max-width:1180px; margin:20px auto 0; padding:16px 24px 0; border-top:1px solid var(--line); }.foot-legal-nav a{ font-size:13px; color:var(--ink-soft); text-decoration:none; }.foot-legal-nav a:hover{ color:var(--brand-teal-d); }.st-depth{ margin-top:44px; padding-top:36px; border-top:1px solid var(--line); }.st-depth .why-g{ margin-top:20px; }.st-check{ margin-top:32px; background:var(--brand-teal-50); border:1px solid var(--brand-teal-100); border-left:3px solid var(--brand-teal); border-radius:12px; padding:20px 22px; }.st-check p:last-child{ font-size:16px; color:var(--ink); line-height:1.65; margin-top:8px; }.st-faq{ margin-top:44px; padding-top:36px; border-top:1px solid var(--line); }.st-faq .bl-faq{ margin-bottom:9px; }/* product page: the routes table needs its own scroll container at phone width — code cells carry app.drapto.com/appointment/ and will not wrap below about 370px */ /* v139: table scroll moved to .tbl-scroll — see drapto.system.css */@media(max-width:560px){.wrap table code{ font-size:11.5px; overflow-wrap:anywhere; }.wrap table th,.wrap table td{ padding:9px 10px; }}/* ── MODULES ───────────────────────────────────────────────────────────── */ .md-g{ display:grid; grid-template-columns:repeat(auto-fit,minmax(288px,1fr)); gap:18px; padding:44px 0; }.md{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px 24px; transition:.24s; }.md:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--brand-teal-100); }.md-h{ display:flex; align-items:baseline; gap:11px; flex-wrap:wrap; }.md-h b{ font-family:var(--font-display); font-size:26px; letter-spacing:-.022em; color:var(--ink); }.md-h span{ font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--brand-teal-d); background:var(--brand-teal-50); border:1px solid var(--brand-teal-100); border-radius:999px; padding:4px 10px; }.md-d{ font-size:15px; color:var(--ink-soft); line-height:1.62; margin-top:12px; }.md-url{ margin-top:10px; }.md-url code{ font-size:12.5px; background:var(--bg-soft); border:1px solid var(--line); border-radius:6px; padding:3px 9px; color:var(--ink-soft); overflow-wrap:anywhere; }.md-l{ list-style:none; margin:16px 0 0; padding:14px 0 0; border-top:1px solid var(--line); flex:1; }.md-l li{ position:relative; padding:6px 0 6px 20px; font-size:14px; color:var(--ink-soft); line-height:1.55; }.md-l li::before{ content:""; position:absolute; left:0; top:13px; width:8px; height:8px; border-radius:2px; background:var(--brand-teal); }.md-why{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:13.2px; color:var(--ink-faint); line-height:1.6; }.md-why b{ color:var(--ink-soft); }.cs-pending{ background:var(--bg-soft); border:1px solid var(--line); border-left:3px solid var(--brand-teal); border-radius:12px; padding:20px 22px; margin-top:28px; }.cs-pending b{ display:block; font-size:15.5px; color:var(--ink); }.cs-pending p{ font-size:14.5px !important; color:var(--ink-soft) !important; line-height:1.65; margin-top:10px !important; }/* module band — the naming as a spine across the site */ .mb-sec{ padding:clamp(48px,6vw,76px) 0; }.mb-g{ display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:12px; margin-top:26px; }.mb{ display:block; background:#fff; border:1px solid var(--line); border-radius:13px; padding:18px 20px; text-decoration:none; color:inherit; transition:.22s; }.mb:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--brand-teal-100); }.mb.is-key{ border-color:var(--brand-teal-100); background:var(--brand-teal-50); }.mb b{ display:block; font-family:var(--font-display); font-size:21px; letter-spacing:-.02em; color:var(--ink); }.mb span{ display:block; font-size:13px; color:#556274; margin-top:6px; line-height:1.45; }.mb-n{ margin-top:20px; }.mb-n a{ font-size:14.5px; font-weight:700; color:var(--brand-teal-d); }.md:target{ border-color:var(--brand-teal); box-shadow:0 0 0 3px var(--brand-teal-50); scroll-margin-top:90px; }/* ---------- Header density (v65) ---------- Free forever, For doctors and Who brings the patient added a top-level item. Keep the CTA cluster on one line and let the nav absorb the pressure. */ .site-header .wrap{gap:20px}.main-nav{gap:18px}.header-cta{gap:12px}.header-cta .link-quiet{white-space:nowrap}.nav-cta{white-space:nowrap}@media(min-width:900px) and (max-width:1180px){.main-nav{gap:14px}.main-nav a,.dnav-btn{font-size:13.5px}.nav-search kbd{display:none}}/* ---------- Claim help: an honestly-declared gap (v66) ---------- */ .ch-pending{background:var(--bg-soft);border:1px solid var(--line);border-left:3px solid var(--ink-faint); border-radius:0 10px 10px 0;padding:16px 20px;margin:26px 0}.ch-pending p{font-size:14.5px;line-height:1.62;color:var(--ink-soft);margin:0;max-width:70ch}.ch-pending b{color:var(--ink)}/* ---------- Footer heading level (v77) ---------- Footer column headings were

directly after page

, a skipped level on 194 pages. Promoted to

for correct document outline; these rules keep the appearance identical to the old h4 styling. */ .site-footer .f-h{ color:var(--ink) !important; font-size:11px !important; font-weight:800; letter-spacing:.13em; text-transform:uppercase; margin-bottom:14px; font-family:var(--font-body); line-height:1.3; }/* ---------- Heading outline repair (v77) ---------- Some pages jumped

straight to

, so a screen-reader user navigating by heading level saw a gap in the outline. Those headings are now

for a correct document outline; this rule reproduces the previous h3 appearance so nothing moves visually. */ h2.as-h3{ font-family:var(--font-display); font-size:21px; color:var(--blue-900); letter-spacing:0; line-height:1.35; }/* Calculator result-panel headings, level-corrected, appearance preserved. */ .as-h4{ font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--blue-900); letter-spacing:0; line-height:1.35; }/* ══════════════════════════════════════════════════════════════════════════ Mega menu, rebuilt (v83) It had grown to 37 tiles across three columns, one of them holding twenty: a tile was appended in nearly every release and nobody opened the panel to look. It overflowed the viewport and clipped the first column mid-item. Now four equal columns of six. Two earlier rules had to be overridden: .dmega.wide carries an !important three-column grid, and .dmega-grid was already taken by an unrelated auto-fit layout — hence .dnav-cols. ══════════════════════════════════════════════════════════════════════════ */ .dmega.wide:not(.dmega-mkt){ display:block !important; grid-template-columns:none !important; width:min(1060px, calc(100vw - 32px)) !important; min-width:0 !important; padding:22px 24px !important; }.dnav-cols{ display:grid !important; grid-template-columns:repeat(4, minmax(0,1fr)) !important; gap:20px; align-items:start; }.dnav-cols .dmega-sec{ min-width:0; }.dnav-cols .dmega-tiles{ display:grid !important; grid-template-columns:1fr !important; gap:5px; }.dnav-cols .dmega-lab{ margin-bottom:10px; }.dnav-cols .dmega-tile{ padding:8px 11px; border-radius:8px; }.dnav-cols .dmega-tile b{ display:block; font-size:13.5px; line-height:1.3; }.dnav-cols .dmega-tile span{ display:block; font-size:11.5px; line-height:1.4; margin-top:2px; }@media(max-width:1080px){.dnav-cols{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }}@media(max-width:640px){.dnav-cols{ grid-template-columns:1fr !important; }}/* Ecosystem tiles were different heights and the last row sat short. */ /* Mega column labels sat on different baselines across the four columns. */ .dnav-cols .dmega-lab{ min-height:16px; display:block; }/* ---------- Header: stop the logo squeeze (v83) ---------- With six top-level items the flex row compressed the logo instead of the nav, clipping the wordmark to a sliver. The brand never shrinks; the nav and the search control absorb the pressure instead. */ .site-header .logo{ flex:0 0 auto !important; min-width:0; }.site-header .logo img{ max-width:none; }.site-header .main-nav{ flex:1 1 auto; min-width:0; justify-content:flex-end; flex-wrap:nowrap; overflow:hidden; }.site-header .header-cta{ flex:0 0 auto; }.site-header .nav-search{ flex:0 0 auto; }@media(min-width:1000px) and (max-width:1340px){.site-header .main-nav{ gap:13px; }.site-header .main-nav > a,.site-header .dnav-btn{ font-size:13px; }.site-header .nav-search span{ display:none; }.site-header .nav-search kbd{ display:none; }}/* header-guard: the brand and the two CTAs never compress; only the nav does, and it is short enough now that it does not have to. */ .site-header > .wrap{ display:flex; align-items:center; gap:24px; flex-wrap:nowrap; }.site-header .logo{ margin-right:8px; }/* ---------- pl-code mobile (v84) ---------- Copy-paste blocks on /clinics/share used white-space:pre, which pushed the whole page 164px wider than a 390px screen. Wrap instead of overflow, and let the long iframe snippet break at any character rather than dragging the layout sideways. */ .pl-k .pl-code{ white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; overflow-x:auto; max-width:100%; }@media(max-width:640px){.pl-k .pl-code{ font-size:11.5px; line-height:1.65; padding:12px 13px; }}/* Belt and braces: nothing in the page body may widen the document. */ html,body{ overflow-x:hidden; }main{ max-width:100%; overflow-x:clip; }/* ---------- dmock mobile (v84) ---------- The claims-worklist mockup keeps its sidebar at 390px, so the nav labels ran past the right edge of the phone. It is decorative on mobile: the sidebar goes, the mockup keeps the numbers, which are the part that matters. */ @media(max-width:640px){.dmock-side{ display:none !important; }.dmock-body{ grid-template-columns:1fr !important; display:block !important; }.dmock{ max-width:100%; overflow:hidden; transform:none !important; }.dmock-k{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }}/* ---------- Mobile tap targets and a broken image link (v84) ---------- The anchor wrapping the hero figure was display:inline, so its hit box was one line-height (17px) rather than the image it contains — the picture looked clickable and mostly was not. Standalone CTA links sat between 15 and 24px tall on a phone. Inline links inside prose are exempt from target-size guidance and are left alone; these are the ones that stand on their own line and read as buttons. */ .hx-fig > a{ display:block; }@media(max-width:640px){.link-quiet, .one-l, .pf-more > a, .lw-note > a, .mb-n > a, .hx-fig p > a{ display:inline-flex; align-items:center; min-height:44px; }/* the two calculator links on the claim-help hub are headings, so they inherit heading line-height rather than a control height */ .cl-cols h3 > a{ display:inline-flex; align-items:center; min-height:44px; }/* tap-target: breadcrumbs and prose links are deliberately excluded */ }/* ══════════════════════════════════════════════════════════════════════════ THE FREE TIER It sits first because it is how a clinic arrives, and it is the only card somebody can act on without talking to anybody. Four price-gated tiers with no free option asked every visitor to book a call before they could see anything. ══════════════════════════════════════════════════════════════════════════ */ .pb-free .pb-amt { color: var(--teal, #17635a); }.pb-free .pb-cta { width: 100%; text-align: center; }/* ══════════════════════════════════════════════════════════════════════════ TWO DOORS The homepage below this is fourteen sections about write-offs — the right story for a hospital finance head, the wrong one for a dermatologist with two chairs. Both doors are the same height and neither carries a "start here" badge, because implying one is the real product is how you lose the audience that brings the other. ══════════════════════════════════════════════════════════════════════════ */ .doors { padding: 54px 0 10px; }.doors-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); align-items: stretch; }.door { display: flex; flex-direction: column; padding: 30px; border: 1px solid var(--line, #e3e2dc); border-radius: 16px; background: var(--surface, #fff); }.door:hover { border-color: var(--teal, #17635a); }.door-eb { margin: 0 0 6px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--teal, #17635a); }.door h2 { margin: 0 0 4px; font-size: 27px; line-height: 1.2; }.door-lead { margin: 0 0 18px; color: var(--ink-soft, #5c665f); }.door-l { margin: 0 0 22px; padding: 0; list-style: none; }.door-l li { padding: 9px 0 9px 20px; position: relative; line-height: 1.62; border-bottom: 1px solid var(--line-soft, #f0efe9); }.door-l li:last-child { border-bottom: 0; }.door-l li::before { content: ""; position: absolute; left: 2px; top: 18px; width: 5px; height: 5px; border-radius: 50%; background: var(--teal, #17635a); }/* Pushed to the bottom so both doors' buttons line up however long the lists are. */ .door-cta { margin-top: auto; display: flex; gap: 9px; flex-wrap: wrap; }.door-note { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-faint, #8a938c); }@media (max-width: 700px) {.doors { padding: 34px 0 4px; }.door { padding: 22px; }.door h2 { font-size: 23px; }.door-cta .btn { width: 100%; text-align: center; }}/* ══════════════════════════════════════════════════════════════════════════ THE ANCHOR A price with nothing beside it is just a number. Forty thousand a month sounds expensive next to other software and obvious next to a write-off line of four lakh, and the second is the honest comparison. ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════════════ PRICING AS A CATALOGUE A SaaS grid says "pick a tier". A catalogue says "this is a platform and here is what each part costs", which is the actual proposition — clinics, corporates, labs and pharmacies buy different things. Free sits first because it is how a clinic arrives. ══════════════════════════════════════════════════════════════════════════ */ .pcat { margin: 46px 0; }.pcat-head { max-width: 720px; margin-bottom: 20px; }.pcat-head h2 { margin: 0 0 6px; font-size: 26px; }.pcat-head p { margin: 0; color: var(--ink-soft, #5c665f); line-height: 1.65; }.pcat-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); align-items: stretch; }.pcard { display: flex; flex-direction: column; padding: 24px; border-radius: 14px; border: 1px solid var(--line, #e3e2dc); background: var(--surface, #fff); position: relative; }.pcard-lead { border-color: var(--teal, #17635a); border-width: 2px; }.pcard-free { border-color: var(--teal, #17635a); }.pcard-tag { position: absolute; top: -10px; left: 22px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .04em; background: var(--teal, #17635a); color: #fff; }.pcard h3 { margin: 0 0 3px; font-size: 20px; }.pcard-who { margin: 0 0 12px; font-size: 13px; color: var(--ink-faint, #8a938c); }.pcard-amt { margin: 0 0 2px; font-size: 29px; font-weight: 600; line-height: 1.1; }.pcard-amt small { font-size: 14px; font-weight: 400; color: var(--ink-faint, #8a938c); }.pcard-free .pcard-amt { color: var(--teal, #17635a); }.pcard-yr { margin: 0 0 16px; font-size: 12.5px; color: var(--ink-faint, #8a938c); }.pcard-l { margin: 0 0 16px; padding: 0; list-style: none; }.pcard-l li { padding: 8px 0 8px 18px; position: relative; line-height: 1.6; font-size: 14.5px; border-bottom: 1px solid var(--line-soft, #f0efe9); }.pcard-l li:last-child { border-bottom: 0; }.pcard-l li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 4px; height: 4px; border-radius: 50%; background: var(--teal, #17635a); }/* The reason, not another feature. Pushed to the bottom so the cards line up however long the lists are. */ .pcard-why { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line-soft, #f0efe9); font-size: 13px; line-height: 1.65; color: var(--ink-soft, #5c665f); }.pcard-cta { margin-top: 14px; text-align: center; }.pcat-note { margin: 20px 0 0; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line, #e3e2dc); font-size: 14px; line-height: 1.7; }@media (max-width: 620px) {.pcat { margin: 32px 0; }.pcat-head h2 { font-size: 22px; }.pcard { padding: 20px; }.pcard-amt { font-size: 25px; }.pcard-cta { width: 100%; }}/* ══════════════════════════════════════════════════════════════════════════ FIGURES Beside the section they explain, not gathered into a gallery. A page of screenshots is a brochure; one figure next to the paragraph it argues for is an argument. Two shapes in here — phone portraits at 392x862 and landscape panels at 736x452 — so the rule is aspect-ratio-preserving rather than a fixed height that would squash one of them. ══════════════════════════════════════════════════════════════════════════ */ .hfig { margin: 22px 0 0; text-align: center; }.hfig img { /* height:auto with the intrinsic width/height on the tag means the browser reserves the right space before it loads, so nothing jumps. */ max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line, #e3e2dc); background: var(--surface, #fff); }/* A phone mock at full width is a two-metre phone. */ .hfig img[height="862"] { max-width: 300px; }.hfig figcaption { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--ink-faint, #8a938c); }@media (max-width: 620px) {.hfig { margin-top: 16px; }.hfig img[height="862"] { max-width: 240px; }}/* Nobody reads a page that prices five different businesses at once. */ /* ══════════════════════════════════════════════════════════════════════════ .cards AND .cta-row Used on the pages added in this build and defined nowhere — they were copied from a page that styled them inline, so every one of those pages rendered as an unstyled stack. The lesson is the same as the .dd2 one: a rule that lives inside a section dies with the section. ══════════════════════════════════════════════════════════════════════════ */ .cards { display: grid; gap: 16px; margin-top: 22px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }.cards .card { padding: 22px; border-radius: 14px; border: 1px solid var(--line, #e3e2dc); background: var(--surface, #fff); }.cards .card h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.3; }.cards .card p { margin: 0; line-height: 1.65; color: var(--ink-soft, #5c665f); }.cards .card p + p { margin-top: 10px; }.cta-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }@media (max-width: 620px) {.cards { grid-template-columns: 1fr; gap: 12px; }.cards .card { padding: 18px; }.cta-row .btn { width: 100%; text-align: center; }}/* ══════════════════════════════════════════════════════════════════════════ DIAGRAMS THAT ARE NOT PICTURES Forty-two pages had no visual element at all and several ran past 1,800 words. The answer is not stock photography of smiling doctors — it is the argument, drawn. All of it is HTML and CSS, so it is selectable, translatable, readable by a screen reader, and weighs nothing. An image of a table is a table nobody can search. ══════════════════════════════════════════════════════════════════════════ */ /* ── A FLOW: what happens, in order ── */ .dflow { display: grid; gap: 0; margin: 26px 0; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); counter-reset: dflow; }.dflow-step { position: relative; padding: 20px 18px; border: 1px solid var(--line, #e3e2dc); border-right: 0; background: var(--surface, #fff); }.dflow-step:first-child { border-radius: 12px 0 0 12px; }.dflow-step:last-child { border-right: 1px solid var(--line, #e3e2dc); border-radius: 0 12px 12px 0; }.dflow-step::before { counter-increment: dflow; content: counter(dflow); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--teal, #17635a); color: #fff; font-size: 12px; font-weight: 600; margin-bottom: 10px; }.dflow-step b { display: block; font-size: 14.5px; line-height: 1.35; }.dflow-step span { display: block; margin-top: 5px; font-size: 13px; line-height: 1.55; color: var(--ink-soft, #5c665f); }/* The step that is the point of the whole diagram. */ .dflow-step.is-key { background: var(--accent-tint, #eef4f2); }/* ── A COMPARISON: two columns, honestly labelled ── */ .dvs { display: grid; gap: 14px; margin: 26px 0; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }.dvs-col { padding: 20px; border-radius: 12px; border: 1px solid var(--line, #e3e2dc); }.dvs-col.is-bad { background: #fdf6f4; border-color: #e8cfc7; }.dvs-col.is-good { background: var(--accent-tint, #eef4f2); border-color: var(--teal, #17635a); }.dvs-col :is(h2,h3,h4,h5) { margin: 0 0 12px; font-size: 15px; }.dvs-col ul { margin: 0; padding: 0; list-style: none; }.dvs-col li { padding: 8px 0 8px 20px; position: relative; line-height: 1.6; font-size: 14px; }.dvs-col li::before { position: absolute; left: 0; top: 8px; font-weight: 600; }.dvs-col.is-bad li::before { content: "×"; color: #b5493a; }.dvs-col.is-good li::before { content: "✓"; color: var(--teal, #17635a); }/* ── A FIGURE: one number, and what it means ── */ .dnums { display: grid; gap: 14px; margin: 26px 0; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }.dnum { padding: 20px; border-radius: 12px; border: 1px solid var(--line, #e3e2dc); background: var(--surface, #fff); }.dnum b { display: block; font-size: 30px; line-height: 1.05; font-weight: 600; font-variant-numeric: tabular-nums; }.dnum span { display: block; margin-top: 7px; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft, #5c665f); }.dnum.is-loss b { color: #b5493a; }.dnum.is-gain b { color: var(--teal, #17635a); }@media (max-width: 700px) {/* A five-column flow on a phone is five unreadable columns. Stacked, the numbers still carry the order. */ .dflow { grid-template-columns: 1fr; }.dflow-step { border-right: 1px solid var(--line, #e3e2dc); border-bottom: 0; border-radius: 0; }.dflow-step:first-child { border-radius: 12px 12px 0 0; }.dflow-step:last-child { border-bottom: 1px solid var(--line, #e3e2dc); border-radius: 0 0 12px 12px; }.dnum b { font-size: 25px; }}/* ══════════════════════════════════════════════════════════════════════════ FOOTER COLUMNS The existing footer used a different markup shape; these columns are the new sections. A footer is where a crawler finds what the navigation does not show, which is why 120 city pages need a hub link here. ══════════════════════════════════════════════════════════════════════════ */ .f-col { min-width: 0; }.f-col h2 { margin: 0 0 10px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-faint, #8a938c); }.f-col a { display: block; padding: 5px 0; font-size: 13.5px; line-height: 1.5; text-decoration: none; color: inherit; /* 30px is the practical floor for a footer link on a phone without the column becoming a scroll of its own. */ min-height: 30px; }.f-col a:hover { text-decoration: underline; }@media (max-width: 620px) {.f-col a { padding: 7px 0; }}/* ══════════════════════════════════════════════════════════════════════════ A LIST OF LINKS These were .card blocks holding a heading and nothing else, which renders as six full-width empty bars. They are links. They should look like links. ══════════════════════════════════════════════════════════════════════════ */ .speclist { display: grid; gap: 10px; margin-top: 20px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }.specrow { display: block; padding: 15px 18px; border-radius: 11px; border: 1px solid var(--line, #e3e2dc); background: var(--surface, #fff); text-decoration: none; color: inherit; }.specrow:hover { border-color: var(--teal, #17635a); }.specrow b { display: block; font-size: 15.5px; color: var(--teal, #17635a); }.specrow span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft, #5c665f); }/* ── Cascade placements ────────────────────────────────────────────────── .one is a blue-900 band, so the white card carries the contrast on its own and needs no wrapper. .hx-in is centred and hero-width; a bill wants a measure and a left edge, so it opts out of both. */ .one .csc{ box-shadow:0 24px 70px -30px rgba(0,0,0,.65); }.csc-hero{ max-width:560px; margin:28px auto 30px; text-align:left; }@media (max-width:900px){.csc-hero{ margin:24px auto 26px; }} /* The icon panel lifts off its own card on hover — the only depth cue the category grid gets, and it is enough. Any more and four cards start competing with the product frame further down the page. */ .has-motion .cat{ transform-style:preserve-3d; } .has-motion .cat .cat-v{ transition:transform .32s cubic-bezier(.22,1,.36,1); } .has-motion .cat:hover .cat-v{ transform:translateZ(18px); } @media (prefers-reduced-motion:reduce){ .has-motion .cat:hover .cat-v{ transform:none; } } /* ── The frame as a section of its own ─────────────────────────────────── Thirteen pages describe a module in prose and then showed nothing. The frame is the one place a buyer sees the software, so it gets air and a caption rather than being wedged into a hero. */ .dmock-sec{ padding:66px 0; } .dmock-eb{ font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-teal-d,#0F6E6D); margin:0 0 16px; } .dmock-cap{ font-size:13.5px; line-height:1.65; color:var(--ink-soft); max-width:60ch; margin:22px 0 0; } @media(max-width:820px){ .dmock-sec{ padding:44px 0; } } /* ══ Frame variants ═══════════════════════════════════════════════════════ The dashboard frame answers "what does the software look like". It cannot answer "what does it feel like to ask it something", or "what does a patient hold". Two more shapes, sharing the stage, the tilt and the Z ladder so all three read as the same object family. */ /* ── Command palette ──────────────────────────────────────────────────── */ .dpal{ background:#0B1C3D; border:1px solid rgba(255,255,255,.14); border-radius:16px; transform-style:preserve-3d; box-shadow:0 40px 90px -46px rgba(11,28,61,.8); } .dpal-q{ display:flex; align-items:center; gap:12px; padding:20px 22px; border-bottom:1px solid rgba(255,255,255,.12); transform:translateZ(26px); } .dpal-k{ font:700 10.5px var(--font-mono,ui-monospace); letter-spacing:.06em; color:#93A5C4; border:1px solid rgba(255,255,255,.22); border-radius:6px; padding:4px 7px; } .dpal-t{ font-size:17px; color:#fff; font-weight:500; } .dpal-c{ display:inline-block; width:2px; height:19px; background:var(--brand-teal,#00B6B6); margin-left:3px; vertical-align:-4px; animation:dpal-blink 1.1s step-end infinite; } @keyframes dpal-blink{ 50%{ opacity:0; } } .dpal-r{ padding:10px 0; transform:translateZ(14px); } .dpal-r p{ display:flex; align-items:center; gap:13px; margin:0; padding:11px 22px; } .dpal-r p.on{ background:rgba(0,182,182,.13); box-shadow:inset 3px 0 0 var(--brand-teal,#00B6B6); } .dpal-r i{ font-style:normal; font:700 9.5px var(--font-body,system-ui); letter-spacing:.09em; text-transform:uppercase; color:#0B1C3D; background:var(--brand-teal,#00B6B6); border-radius:4px; padding:4px 7px; flex:0 0 auto; } .dpal-r b{ flex:1; font-weight:500; font-size:14.5px; color:#E6ECF6; } .dpal-r u{ text-decoration:none; font:600 13px var(--font-mono,ui-monospace); color:#93A5C4; font-variant-numeric:tabular-nums; white-space:nowrap; } .dpal-f{ padding:13px 22px; border-top:1px solid rgba(255,255,255,.12); font-size:12px; color:#7D8FAE; transform:translateZ(8px); } /* ── Phone ────────────────────────────────────────────────────────────── */ .dph{ width:290px; margin:0 auto; background:#0B1C3D; border-radius:34px; padding:9px; transform-style:preserve-3d; box-shadow:0 44px 90px -44px rgba(11,28,61,.72); } .dph-s{ background:#fff; border-radius:27px; overflow:hidden; } .dph-top{ position:relative; height:26px; background:#fff; } .dph-top::after{ content:''; position:absolute; left:50%; top:7px; transform:translateX(-50%); width:78px; height:5px; border-radius:99px; background:#DDE4EE; } .dph-h{ padding:6px 18px 14px; border-bottom:1px solid var(--line); } .dph-h b{ display:block; font-size:15.5px; font-weight:700; letter-spacing:-.01em; } .dph-h span{ display:block; font-size:11.5px; color:var(--ink-faint); margin-top:3px; } .dph-b{ padding:14px 18px 18px; } .dph-row{ display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--line-2,#EEF1F5); } .dph-row:last-child{ border-bottom:0; } .dph-row em{ font-style:normal; font:700 9.5px var(--font-body,system-ui); letter-spacing:.08em; text-transform:uppercase; color:var(--brand-teal-d,#0F6E6D); background:var(--brand-teal-50,#E6FAFA); border-radius:4px; padding:4px 7px; flex:0 0 auto; } .dph-row b{ flex:1; font-size:13.5px; font-weight:600; } .dph-row span{ font-size:11.5px; color:var(--ink-faint); } .dph-cta{ margin-top:14px; text-align:center; font:700 13px var(--font-body,system-ui); color:#fff; background:var(--brand-teal-d,#0F6E6D); border-radius:10px; padding:11px; } .dph-n{ font-size:11px; color:var(--ink-faint); text-align:center; margin:12px 0 0; } @media (prefers-reduced-motion:reduce){ .dpal-c{ animation:none; } } @media (max-width:820px){ .dpal-q,.dpal-r,.dpal-f{ transform:none; } .dpal-r p{ padding:10px 16px; } .dpal-q{ padding:16px; } } /* ── Document parse ─────────────────────────────────────────────────────── Fourth frame shape. The decoder page opens "Paste a settlement advice" and a dashboard cannot show that — what matters is the raw thing on one side and the fields pulled out of it on the other, with the line each field came from still visible. */ .ddoc{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); background:#fff; border:1px solid var(--line); border-radius:16px; transform-style:preserve-3d; box-shadow:0 30px 70px -40px rgba(11,28,61,.55); } .ddoc-l{ padding:20px 22px; border-right:1px solid var(--line); background:var(--bg-soft); border-radius:15px 0 0 15px; } .ddoc-r{ padding:20px 22px; transform:translateZ(20px); } .ddoc-h{ font:800 10.5px var(--font-body,system-ui); letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 14px; } .ddoc-raw{ font:400 12.5px/1.85 var(--font-mono,ui-monospace); color:var(--ink-soft); white-space:pre-wrap; margin:0; } .ddoc-raw mark{ background:var(--brand-teal-50,#E6FAFA); color:var(--brand-teal-d,#0F6E6D); font-weight:600; border-radius:3px; padding:1px 3px; } .ddoc-f{ display:flex; align-items:baseline; gap:10px; padding:10px 0; border-bottom:1px solid var(--line-2,#EEF1F5); } .ddoc-f:last-of-type{ border-bottom:0; } .ddoc-f b{ flex:1; font-size:13.5px; font-weight:600; } .ddoc-f u{ text-decoration:none; font:600 13px var(--font-mono,ui-monospace); font-variant-numeric:tabular-nums; white-space:nowrap; } .ddoc-f u.hot{ color:var(--brand-teal-d,#0F6E6D); } .ddoc-f span{ font-size:10.5px; color:var(--ink-faint); flex:0 0 auto; } .ddoc-n{ margin:16px 0 0; padding-top:14px; border-top:1px solid var(--line); font-size:12.5px; line-height:1.6; color:var(--ink-soft); } @media(max-width:820px){ .ddoc{ grid-template-columns:1fr; } .ddoc-l{ border-right:0; border-bottom:1px solid var(--line); border-radius:15px 15px 0 0; } .ddoc-r{ transform:none; } } /* ── Help centre and trust pages ───────────────────────────────────────── One set of primitives for 108 generated pages. Deliberately plain: these are read by somebody with a queue in front of them, and by a procurement officer with a checklist. Neither wants a hero. */ .hc-lede{ font-size:17px; line-height:1.65; color:var(--ink-soft); max-width:62ch; margin:0 0 30px; } .hc-body{ max-width:68ch; } .hc-body h2{ font-size:21px; letter-spacing:-.015em; margin:36px 0 12px; } .hc-body h2:first-child{ margin-top:0; } .hc-body p{ font-size:16px; line-height:1.72; margin:0 0 16px; } .hc-body code{ font:600 14px var(--font-mono,ui-monospace); background:var(--bg-soft); border:1px solid var(--line); border-radius:5px; padding:1px 6px; } .hc-list{ list-style:none; margin:0 0 20px; padding:0; } .hc-list li{ position:relative; padding:0 0 0 22px; margin-bottom:11px; font-size:16px; line-height:1.65; } .hc-list li::before{ content:''; position:absolute; left:2px; top:11px; width:7px; height:7px; border-radius:50%; background:var(--brand-teal,#00B6B6); } .hc-steps{ list-style:none; counter-reset:hc; margin:0 0 22px; padding:0; } .hc-steps li{ counter-increment:hc; position:relative; padding:0 0 0 44px; margin-bottom:20px; } .hc-steps li::before{ content:counter(hc); position:absolute; left:0; top:1px; width:28px; height:28px; border-radius:50%; background:var(--bg-soft); border:1px solid var(--line); display:grid; place-items:center; font:700 13px var(--font-mono,ui-monospace); color:var(--brand-teal-d,#0F6E6D); } .hc-steps b{ display:block; font-size:16px; margin-bottom:4px; } .hc-steps span{ display:block; font-size:15px; line-height:1.65; color:var(--ink-soft); } .hc-note{ border-left:3px solid var(--brand-teal,#00B6B6); background:var(--bg-soft); border-radius:0 10px 10px 0; padding:16px 20px; margin:26px 0; } .hc-note b{ display:block; font-size:14.5px; margin-bottom:5px; } .hc-note p{ margin:0; font-size:15px; line-height:1.65; color:var(--ink-soft); } .hc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:16px; } .hc-card{ display:block; padding:20px 22px; background:#fff; border:1px solid var(--line); border-radius:12px; text-decoration:none; color:inherit; transition:.22s; } .hc-card:hover{ border-color:var(--brand-teal,#00B6B6); transform:translateY(-2px); box-shadow:0 14px 30px -20px rgba(11,28,61,.4); } .hc-card b{ display:block; font-size:16px; margin-bottom:6px; } .hc-card span{ display:block; font-size:14px; line-height:1.6; color:var(--ink-soft); } @media(max-width:640px){ .hc-body h2{ font-size:19px; } .hc-steps li{ padding-left:38px; } } /* Help in the header. The trust and company sections stay in the footer — they are read once, during procurement, not while using the product. */ .nav-help{ font-size:14.5px; font-weight:500; } @media(max-width:1040px){ .site-header.open .nav-help{ padding:13px 14px; border-radius:10px; } } /* The assumption note on the collections tool. It sits under the five rate inputs and is the reason they are inputs at all, so it should read as part of the form rather than as fine print somewhere below it. */ .dcalc-note{ grid-column:1/-1; margin:6px 0 0; padding:12px 14px; font-size:13px; line-height:1.6; color:var(--ink-soft); background:var(--bg-soft); border:1px solid var(--line); border-radius:9px; } .dcalc-note b{ color:var(--ink); }