/* home. Final Design System — component stylesheet, loaded after tokens.css.
   Colours, spacing steps, radii, shadows and the two font families come from tokens.json;
   the values below are the ones tokens.json cannot hold (fluid clamp() sizes, weights, motion, filters). */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;600;700;800&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600;8..60,700;8..60,800&display=swap');

:root {
  /* fluid display scale (exact values used on the pages) */
  --t-hero: clamp(42px, 5.6vw, 92px);       /* landing h1, weight 600 */
  --t-display: clamp(44px, 5.4vw, 84px);    /* section h2, weight 700 */
  --t-h2: clamp(40px, 5vw, 72px);           /* HomePay h2, weight 600 */
  --t-h3: clamp(30px, 3vw, 44px);           /* card titles (Agentic Reference) */
  --t-h4: clamp(22px, 1.9vw, 28px);         /* small card titles */
  --t-lead: clamp(17px, 1.3vw, 20px);
  --t-body: 16px;
  --t-body-lg: 17px;
  --t-small: 14px;
  --t-caption: 13px;
  --t-eyebrow: 13px;

  --lh-display: 0.98;
  --lh-tight: 1.1;
  --lh-body: 1.55;
  --tracking-display: -0.03em;
  --tracking-hero: -0.04em;
  --tracking-eyebrow: 0.1em;

  --w-regular: 400; --w-medium: 500; --w-semibold: 600; --w-bold: 700; --w-black: 800;

  --section-y: clamp(80px, 12vh, 150px);
  --gutter-x: clamp(20px, 4vw, 56px);
  --nav-top: clamp(28px, 3.6vh, 40px);

  --blur-nav: blur(18px) saturate(1.5);

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-flip: cubic-bezier(0.4, 0.2, 0.2, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.35s;
  --dur-enter: 0.9s;
}

@keyframes homeEaseIn { from { opacity:0; transform:translateY(26px); filter:blur(6px); } to { opacity:1; transform:none; filter:none; } }
body { font-family: var(--font-body); color: var(--text-primary); }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--pink-ink); }
@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

/* Dark grounds: put .on-dark (or data-ground="dark") on any maroon, ink or dark section.
   Headline and Eyebrow inside it switch to --text-on-dark automatically; dark and glass Cards do this themselves. */
.on-dark, [data-ground="dark"] { color: var(--text-on-dark); --headline-ink: var(--text-on-dark); --eyebrow-ink: var(--text-on-dark); }

/* Dashboard components (LiveChat connecting spinner) */
@keyframes hdsSpin { to { transform: rotate(360deg); } }
.hds-spin { display:block; animation: hdsSpin 0.9s linear infinite; }

/* SiteNav — the transparent top nav over the maroon hero (from Landing.dc.html) */
.sn { box-sizing:border-box; height:calc(var(--nav-top) + var(--nav-h)); padding:var(--nav-top) clamp(12px,2vw,24px) 0; font-family:var(--font-body); }
.sn-bar { height:100%; display:flex; align-items:center; gap:clamp(14px,2vw,32px); padding:0 clamp(12px,3vw,56px); }
.sn-logo { display:inline-flex; align-items:center; flex:none; }
.sn-logo img { height:clamp(30px,4.2vh,42px); max-height:42px; width:auto; display:block; }
.sn-drop { position:relative; display:inline-flex; }
.sn-aud { flex:none; transform:translateY(calc(clamp(30px,4.2vh,42px) * 0.12)); }
.sn-chip { display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 16px; border-radius:var(--r-round); background:transparent; border:1px solid rgba(255,255,255,0.28); color:var(--text-on-dark); font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; }
.sn-links { flex:1; min-width:0; display:flex; align-items:center; justify-content:flex-end; gap:clamp(20px,2.6vw,40px); margin-right:clamp(8px,1.2vw,20px); }
.sn-link { display:inline-flex; align-items:center; gap:5px; color:var(--text-on-dark); font-size:16px; font-weight:500; text-decoration:none; white-space:nowrap; }
.sn-link[aria-current="page"] { font-weight:700; text-decoration:underline; text-decoration-color:var(--pink); text-decoration-thickness:2.5px; text-underline-offset:8px; }
.sn-menu { position:absolute; top:100%; left:50%; transform:translateX(-50%); padding-top:16px; display:none; z-index:60; }
.sn-drop:hover .sn-menu, .sn-drop:focus-within .sn-menu { display:block; }
.sn-menu-inner { background:var(--nav-surface); border:1px solid rgba(255,255,255,0.14); border-radius:14px; padding:8px; min-width:180px; box-shadow:0 20px 44px -18px rgba(0,0,0,0.6); display:flex; flex-direction:column; gap:2px; }
.sn-menu-inner a { color:rgba(255,255,255,0.82); font-size:14px; font-weight:500; text-decoration:none; padding:9px 12px; border-radius:9px; white-space:nowrap; transition:background-color .2s ease, color .2s ease; }
.sn-menu-inner a:hover, .sn-menu-inner a:focus-visible { background:rgba(255,255,255,0.08); color:var(--text-on-dark); }
.sn-spacer { flex:1; display:none; }
.sn-login { flex:none; margin-left:auto; display:inline-flex; align-items:center; justify-content:center; height:50px; padding:0 26px; white-space:nowrap; background:rgba(255,255,255,0.08); color:var(--text-on-dark); border:1px solid rgba(255,255,255,0.28); font-size:16px; font-weight:600; border-radius:16px; text-decoration:none; }
.sn-dots { flex:none; width:40px; height:40px; border:none; border-radius:50%; background:transparent; display:none; align-items:center; justify-content:center; gap:4px; cursor:pointer; padding:0; }
.sn-dots span { width:5px; height:5px; border-radius:50%; background:var(--text-on-dark); }
.sn-mobile { position:fixed; inset:0; z-index:60; background:var(--nav-surface); display:flex; flex-direction:column; padding:22px; font-family:var(--font-body); }
.sn-mobile a { color:var(--text-on-dark); font-size:22px; font-weight:600; text-decoration:none; padding:16px 4px; border-bottom:1px solid rgba(255,255,255,0.1); }
.sn-close { align-self:flex-end; width:46px; height:46px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.28); border-radius:12px; color:var(--text-on-dark); font-size:22px; cursor:pointer; margin-bottom:18px; }
@media (max-width: 768px) { .sn-links, .sn-login { display:none; } .sn-spacer { display:block; } .sn-dots { display:flex; } }

/* AuthSplit — Log in / Register: pitch panel stacks above the form on narrow screens */
@media (max-width: 860px) {
  .hds-auth { grid-template-columns: 1fr !important; }
  .hds-auth-aside { position: relative !important; height: auto !important; border-right: none !important; border-bottom: 5px solid var(--pink); }
}

/* Log in & sign-up — focus, hover and motion for the auth components */
.hds-field { transition: border-color .2s ease, box-shadow .2s ease; }
.hds-field:focus { outline: none; border-color: var(--pink) !important; box-shadow: 0 0 0 3px rgba(255,52,137,0.15); }
.hds-role { transition: border-color .18s ease, transform .18s var(--ease-out), box-shadow .18s ease; }
.hds-role:hover, .hds-role:focus-visible { border-color: var(--pink) !important; transform: translateY(-2px); box-shadow: 0 16px 30px -22px rgba(28,15,24,0.35); outline: none; }
.hds-role:active { transform: none; }
.hds-choice { transition: border-color .16s ease, transform .16s ease; }
.hds-choice:hover, .hds-choice:focus-visible { border-color: var(--pink) !important; transform: translateY(-1px); outline: none; }
@keyframes hdsFade { from { opacity: 0; } to { opacity: 1; } }
.hds-fade { animation: hdsFade .2s ease; }
@keyframes hdsLine { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hds-line { animation: hdsLine .34s var(--ease-out); }
@keyframes hdsSweep { from { width: 0%; } to { width: 100%; } }
.hds-sweep { width: 0%; animation: hdsSweep 1.9s cubic-bezier(0.4,0,0.2,1) forwards; }