/* Holvario — shared design system. Extracted from the single-page build 2026-07-14.
   Linked by every page. Page-specific styles stay inline per page. */
  :root{
    --bg:#0d1526; --bg-2:#0f1a2e; --surface:#141f38; --surface-2:#1b2946;
    --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.14);
    --fg:#ffffff; --muted:#aab6c9; --faint:#7c8aa3;
    --cyan:#22d3ee; --cyan-deep:#0e7490;
    --violet:#a855f7; --emerald:#10b981; --rose:#f43f5e; --amber:#f59e0b; --yellow:#facc15; --indigo:#6366f1; --indigo-text:#8b8df7; --fuchsia:#d946ef; --sky:#38bdf8; --orange:#fb923c; --teal:#14b8a6;
    /* Exact app hub palette (dark theme) — keep in lockstep with globals.css --hub-* */
    --h-overview:#22d3ee; --h-finance:#10b981; --h-home:#a855f7; --h-adventures:#facc15; --h-health:#f43f5e; --h-hobby:#3b82f6; --h-business:#6366f1; --h-trading:#84cc16; --h-tasks:#fb923c; --h-notes:#d946ef; --h-lists:#ec4899; --h-vault:#94a3b8; --h-calendar:#2dd4bf;
    --r-sm:11px; --r:16px; --r-lg:24px; --r-xl:28px;
    --maxw:1140px;
    /* Layered, softer, cooler shadows read more expensive than a single hard drop */
    --shadow:0 1px 2px rgba(2,8,20,.4),0 6px 16px -6px rgba(2,8,20,.5);
    --shadow-lg:0 2px 6px rgba(2,8,20,.4),0 40px 80px -28px rgba(2,8,20,.82);
    --shadow-cyan:0 24px 70px -22px rgba(34,211,238,.5);
    /* Signature glass highlight — a hairline of light along the top edge of every raised surface */
    --hi:inset 0 1px 0 rgba(255,255,255,.08);
    /* Premium easing — a gentle overshoot-free deceleration curve, used everywhere */
    --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1);
    --font:'DM Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    --display:'Manrope',var(--font); --mono:var(--font);
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  /* Accessibility: skip link + keyboard focus ring */
  .skip-link{position:fixed;top:-60px;left:12px;z-index:200;background:var(--cyan);color:#04121a;font-weight:700;font-size:14px;padding:10px 16px;border-radius:0 0 10px 10px;transition:top .18s ease}
  .skip-link:focus{top:0;outline:none}
  a:focus-visible,button:focus-visible,[role="switch"]:focus-visible,[tabindex]:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}
  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.skip-link{transition:none}}
  body{
    margin:0;font-family:var(--font);color:var(--fg);line-height:1.55;
    background:
      radial-gradient(60rem 44rem at 12% -6%, rgba(34,211,238,.10), transparent 60%),
      radial-gradient(52rem 40rem at 100% 8%, rgba(99,102,241,.09), transparent 55%),
      radial-gradient(48rem 40rem at 60% 108%, rgba(217,70,239,.06), transparent 55%),
      var(--bg);
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
  }
  /* Fine film-grain over everything — kills gradient banding and reads premium (on-brand: grain is used in-app) */
  body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.038;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:140px}
  @media(prefers-reduced-motion:reduce){body::after{display:none}}
  a{color:inherit;text-decoration:none}
  h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.08;margin:0;text-wrap:balance}
  p{margin:0}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .mono{font-family:var(--mono);font-variant-numeric:tabular-nums slashed-zero;letter-spacing:.01em}
  .accent{color:var(--cyan)}
  .eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--faint)}
  .btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;cursor:pointer;font-family:var(--font);font-weight:700;font-size:15px;letter-spacing:.005em;border-radius:var(--r-sm);padding:13px 22px;transition:transform .22s var(--ease-out),box-shadow .28s var(--ease),filter .22s var(--ease),background .22s var(--ease)}
  .btn:active{transform:scale(.97)}
  /* Light sweeps across primary/buy buttons on hover */
  .btn-primary::after,.btn-buy::after{content:"";position:absolute;top:0;left:-130%;width:70%;height:100%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .6s var(--ease);pointer-events:none}
  .btn-primary:hover::after,.btn-buy:hover::after{left:130%}
  @media(prefers-reduced-motion:reduce){.btn-primary::after,.btn-buy::after{display:none}}
  .btn-primary{background:linear-gradient(125deg,#2fe1f2,#22d3ee 42%,#0e7490);color:#04121a;box-shadow:0 8px 26px rgba(34,211,238,.32),inset 0 1px 0 rgba(255,255,255,.35)}
  .btn-primary:hover{filter:brightness(1.05);box-shadow:0 14px 34px rgba(34,211,238,.46),inset 0 1px 0 rgba(255,255,255,.4);transform:translateY(-1px)}
  .btn-ghost{background:rgba(255,255,255,.06);color:var(--fg);border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
  .btn-ghost:hover{background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.42)}
  .btn-buy{background:linear-gradient(180deg,#b06bf5,#a855f7 55%,#7c3aed);color:#fff;box-shadow:0 8px 26px rgba(168,85,247,.34),inset 0 1px 0 rgba(255,255,255,.28)}
  .btn-buy:hover{filter:brightness(1.05);box-shadow:0 14px 34px rgba(168,85,247,.48),inset 0 1px 0 rgba(255,255,255,.34);transform:translateY(-1px)}
  .btn-lg{padding:0 30px;font-size:16px;min-height:56px;line-height:1}
  .center{text-align:center}
  section{padding:clamp(52px,6.2vw,74px) 0;position:relative}
  section+section::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(1200px,90%);height:1px;background:linear-gradient(90deg,transparent,rgba(140,178,222,.34),transparent);pointer-events:none}
  .sec-head{max-width:660px;margin:0 auto 40px;text-align:center}
  .sec-head :is(h1,h2){font-size:clamp(28px,4.4vw,40px)}
  .sec-head p{color:var(--muted);margin-top:14px;font-size:17px;text-wrap:pretty}

  /* ---- Nav ---- */
  header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(16px) saturate(1.2);background:rgba(11,18,33,.82);border-bottom:1px solid var(--line);transition:background .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
  header.nav.scrolled{background:rgba(9,15,28,.9);border-bottom-color:var(--line-2);box-shadow:0 12px 32px -14px rgba(2,8,20,.66)}
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
  /* Exact match to the app sidebar lockup (Sidebar.tsx): gap-1, leading-none,
     extrabold uppercase, .04em tracking, wordmark ~0.54x the icon, white text-glow. */
  .brand{display:flex;align-items:center;gap:4px;font-family:var(--display);font-weight:800;font-size:21px;line-height:1;letter-spacing:.04em;text-transform:uppercase;text-shadow:0 1px 1px rgba(0,0,0,.5),0 0 20px rgba(255,255,255,.55)}
  .brand .mark{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--cyan),var(--cyan-deep));display:grid;place-items:center;box-shadow:0 0 18px rgba(34,211,238,.45)}
  .brand .mark svg{width:20px;height:20px}
  /* Logo — raw transparent emblem (no box), consistent sizing across header/footer/sections */
  .blogo{display:grid;place-items:center;flex:none;width:40px;height:40px}
  .blogo img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 0 12px rgba(34,211,238,.4))}
  .foot-brand .blogo{width:40px;height:40px}
  .nav-links{display:flex;align-items:center;gap:28px}
  .nav-links a{position:relative;color:var(--muted);font-size:14.5px;font-weight:500;transition:color .15s;padding:4px 0}
  .nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--cyan),var(--violet));transition:width .22s ease}
  .nav-links a:hover{color:var(--fg)}
  .nav-links a:hover::after{width:100%}
  .nav-cta{display:flex;align-items:center;gap:8px}
  .nav-cta .signin{color:var(--muted);font-size:14px;font-weight:600;padding:9px 15px;border-radius:var(--r-sm);transition:color .15s,background .15s}
  .nav-cta .signin:hover{color:var(--fg);background:rgba(255,255,255,.05)}
  .nav-cta .btn{padding:0 18px;font-size:14px;min-height:44px}
  .menu-btn{display:none;background:none;border:0;color:var(--fg);cursor:pointer;font-size:22px;line-height:1;padding:6px 4px;min-width:44px;min-height:44px;display:none;align-items:center;justify-content:center}
  .m-signin{display:none}
  @media(max-width:860px){
    .nav-links,.nav-cta .signin{display:none}
    .menu-btn{display:inline-flex}
    header.nav.menu-open .nav-links{
      display:flex;flex-direction:column;align-items:stretch;gap:0;
      position:absolute;left:0;right:0;top:64px;z-index:49;
      background:rgba(11,18,33,.98);backdrop-filter:blur(16px) saturate(1.2);
      border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.5);
      padding:6px 20px 14px;animation:navdrop .18s ease}
    header.nav.menu-open .nav-links a{padding:14px 4px;font-size:16px;border-bottom:1px solid var(--line);color:var(--fg)}
    header.nav.menu-open .nav-links a::after{display:none}
    header.nav.menu-open .nav-links a:last-child{border-bottom:0}
    header.nav.menu-open .nav-links .m-signin{display:block;color:var(--cyan);font-weight:600}
  }
  @keyframes navdrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

  /* ---- Hero ---- */
  .hero{padding:96px 0 84px;text-align:center;overflow:hidden}
  .badge{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.1);padding:8px 16px;border-radius:999px;margin-bottom:26px;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 12px 30px -18px rgba(0,0,0,.7);backdrop-filter:blur(10px)}
  .hero h1{font-family:'Bricolage Grotesque',var(--display);font-weight:800;font-size:clamp(42px,7vw,78px);letter-spacing:-.02em}
  .hero h1 .grad{background:linear-gradient(115deg,var(--cyan),#7dd3fc 55%,var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
  .hero .sub{max-width:620px;margin:28px auto 0;color:var(--muted);font-size:clamp(16px,2.2vw,20px);line-height:1.55;text-wrap:pretty}
  .hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:40px}
  .hero-note{margin-top:16px;font-size:14px;color:var(--faint)}
  .hero-price{margin:20px 0 0;font-family:var(--display);font-weight:700;font-size:clamp(21px,2.5vw,28px);color:var(--muted);letter-spacing:-.01em}
  .hero-price b{font-weight:800;font-size:1.28em;background:linear-gradient(100deg,var(--cyan),#7dd3fc 45%,var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}

  /* ---- App window mock ---- */
  .frame{max-width:960px;margin:52px auto 0;border-radius:var(--r-lg);border:1px solid var(--line-2);background:linear-gradient(180deg,rgba(27,41,70,.7),rgba(15,26,46,.85));box-shadow:var(--shadow-lg),var(--hi);overflow:hidden}
  .frame .bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:rgba(0,0,0,.2)}
  .frame .bar i{width:11px;height:11px;border-radius:50%;background:#3a4a63;display:inline-block}
  .frame .bar .u{margin-left:14px;font-size:12px;color:var(--faint);font-family:var(--mono)}
  .app{display:grid;grid-template-columns:190px 1fr;min-height:420px;text-align:left}
  .app .side{background:rgba(4,10,22,.55);border-right:1px solid var(--line);padding:18px 14px}
  .app .side .lg{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:15px;margin-bottom:20px}
  .app .side .lg .m{width:24px;height:24px;border-radius:7px;background:url('brand/logo-mark-opt.png') center/cover no-repeat}
  .app .side .nav-i{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:var(--muted);font-size:13px;font-weight:500;margin-bottom:3px}
  .app .side .nav-i.on{background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.35);color:#fff;box-shadow:0 0 16px rgba(34,211,238,.18)}
  .app .side .dot{width:15px;height:15px;border-radius:5px;background:currentColor;opacity:.85}
  .app .main{padding:20px}
  .app .hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
  .app .hd h4{font-family:var(--display);font-size:22px}
  .app .hd .clock{font-family:var(--mono);font-weight:800;font-size:22px;color:var(--cyan)}
  .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:16px}
  .kpi{border:1px solid var(--line);border-radius:14px;padding:13px;background:linear-gradient(180deg,rgba(20,31,56,.6),rgba(15,26,46,.75));box-shadow:var(--hi)}
  .kpi .lab{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:700}
  .kpi .val{font-family:var(--display);font-weight:800;font-size:20px;margin-top:8px}
  .kpi .val.mono{font-family:var(--mono)}
  .kpi.a{border-color:rgba(16,185,129,.45)} .kpi.a .val{color:var(--emerald)}
  .kpi.b{border-color:rgba(245,158,11,.45)} .kpi.b .val{color:var(--amber)}
  .kpi.c .val{color:var(--fg)}
  .kpi.d{border-color:rgba(139,92,246,.4)} .kpi.d .val{color:var(--violet)}
  .hubgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}

  /* ---- Replaces bar ---- */
  .replaces{background:linear-gradient(180deg,rgba(27,41,70,.5),transparent);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .rep-flow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;max-width:820px;margin:0 auto}
  .chip{font-size:14px;font-weight:600;color:var(--muted);background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px;padding:8px 15px}
  .rep-flow .arrow{color:var(--cyan);font-size:22px;font-weight:800}
  .rep-one{font-family:var(--display);font-weight:700;font-size:16px;color:#04121a;background:linear-gradient(120deg,var(--cyan),var(--cyan-deep));border-radius:999px;padding:9px 20px;box-shadow:0 8px 22px rgba(34,211,238,.3)}
  .rep-punch{text-align:center;margin-top:26px;font-size:19px;color:var(--muted)}
  .rep-punch b{color:var(--fg)}

  /* ---- generic cards ---- */
  .grid{display:grid;gap:18px}
  .card{position:relative;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,rgba(24,37,66,.78),rgba(13,23,42,.88));padding:22px;box-shadow:var(--shadow),var(--hi);transition:border-color .25s var(--ease),transform .28s var(--ease-out),box-shadow .28s var(--ease)}
  .card:hover{border-color:var(--line-2);transform:translateY(-4px);box-shadow:0 22px 48px -18px rgba(2,8,20,.7),var(--hi)}
  .card::before{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);pointer-events:none}
  /* hub cards: a short glowing tube in the hub's colour along the top edge — same signature as the tiles in the app */
  .hubs .card::after,.syshubs .card::after{content:"";position:absolute;left:22%;right:22%;top:1px;height:3px;border-radius:999px;background:var(--c,var(--cyan));opacity:.9;box-shadow:0 0 12px 1px var(--c,var(--cyan));pointer-events:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
  .icn{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:16px;border:1px solid color-mix(in srgb,currentColor 42%,transparent);box-shadow:0 0 26px -6px currentColor,inset 0 1px 0 rgba(255,255,255,.16)}
  .icn .dot{width:20px;height:20px;border-radius:7px;background:currentColor}
  .card h3{font-size:17px;margin-bottom:6px}
  .card p{color:var(--muted);font-size:14.5px}

  /* hubs grid */
  .hubs{grid-template-columns:repeat(4,1fr)}
  .hubs .card:nth-child(1){--c:var(--h-finance)}.hubs .card:nth-child(2){--c:var(--h-home)}.hubs .card:nth-child(3){--c:var(--h-adventures)}.hubs .card:nth-child(4){--c:var(--h-health)}.hubs .card:nth-child(5){--c:var(--h-hobby)}.hubs .card:nth-child(6){--c:var(--h-business)}.hubs .card:nth-child(7){--c:var(--h-trading)}.hubs .card:nth-child(8){--c:var(--h-tasks)}.hubs .card:nth-child(9){--c:var(--h-notes)}.hubs .card:nth-child(10){--c:var(--h-lists)}.hubs .card:nth-child(11){--c:var(--h-calendar)}.hubs .card:nth-child(12){--c:var(--h-vault)}
  .hubs .card{border-color:color-mix(in srgb,var(--c,var(--line)) 26%,var(--line))}
  .hubs .card:hover{border-color:color-mix(in srgb,var(--c,var(--cyan)) 60%,transparent);box-shadow:0 22px 48px -18px rgba(2,8,20,.7),0 0 36px -10px color-mix(in srgb,var(--c,var(--cyan)) 68%,transparent),var(--hi)}
  @media(max-width:900px){.hubs{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:520px){.hubs{grid-template-columns:1fr}}
  /* Homepage "Twelve hubs" — the twelve split into the three lines the hero names.
     Row labels + a 5-across and a 2-across (Business wider) shape; both collapse
     with the rest of .hubs at 900/520. */
  .hubrow{display:flex;align-items:baseline;gap:14px;margin:30px 0 12px}
  .hubrow:first-of-type{margin-top:6px}
  .hubrow .n{flex:none;font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--cyan)}
  .hubrow h3{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:0;color:var(--fg)}
  .hubrow p{margin:0;color:var(--muted);font-size:14px}
  .hubs.g5{grid-template-columns:repeat(5,1fr)}
  .hubs.g2{grid-template-columns:3fr 2fr}
  @media(max-width:900px){.hubs.g5,.hubs.g2{grid-template-columns:repeat(2,1fr)}.hubrow{flex-wrap:wrap;gap:6px 14px}.hubrow p{flex-basis:100%}}
  @media(max-width:520px){.hubs.g5,.hubs.g2{grid-template-columns:1fr 1fr;gap:10px}.hubs.g5 .card,.hubs.g2 .card{padding:14px 12px;display:flex;align-items:center;gap:10px}.hubs.g5 .card h3,.hubs.g2 .card h3{margin:0;font-size:15px}.hubs.g5 .card .icn,.hubs.g2 .card .icn{margin:0;width:38px;height:38px}.hubs.g5 .card p,.hubs.g2 .card p{display:none}}
  @media(min-width:901px) and (max-width:1120px){.hubs.g5 .card{padding:16px 13px}.hubs.g5 .card p{font-size:13.5px}.hubs.g5 .card h3{font-size:15px}}

  /* showcase */
  .shots{grid-template-columns:2fr 1fr}
  @media(max-width:820px){.shots{grid-template-columns:1fr}}
  .shot{border:1px dashed var(--line-2);border-radius:var(--r);background:rgba(4,10,22,.4);min-height:230px;display:grid;place-items:center;text-align:center;padding:24px;color:var(--faint);position:relative;overflow:hidden}
  .shot .tag{position:absolute;top:12px;left:12px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan)}
  .shot .ph{font-size:14px;max-width:280px}
  .shot .ph b{color:var(--muted)}

  /* comparison table */
  .tbl-scroll{overflow-x:auto;border-radius:var(--r);border:1px solid var(--line);box-shadow:var(--shadow),var(--hi)}
  table{border-collapse:collapse;width:100%;min-width:640px}
  th,td{padding:14px 16px;text-align:center;font-size:14.5px;border-bottom:1px solid var(--line)}
  th:first-child,td:first-child{text-align:left;color:var(--muted);font-weight:500}
  thead th{font-family:var(--display);font-weight:700;font-size:14px;background:rgba(255,255,255,.03)}
  thead th.h{color:var(--cyan)}
  td.y{color:var(--emerald);font-weight:700}
  td.n{color:var(--faint)}
  tbody tr:last-child td{border-bottom:0}
  tr.price td{font-family:var(--mono);font-weight:700;background:rgba(255,255,255,.02)}
  tr.price td.h{color:var(--cyan)}

  /* tools */
  .tools{grid-template-columns:repeat(4,1fr);gap:12px}
  @media(max-width:820px){.tools{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:520px){.tools{grid-template-columns:repeat(2,1fr)}}

  /* who */
  .who{grid-template-columns:repeat(3,1fr)}
  @media(max-width:820px){.who{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:480px){.who{grid-template-columns:1fr;max-width:360px;margin-inline:auto}}
  .who .card{text-align:center}

  /* pricing */
  .price-toggle{display:flex;align-items:center;justify-content:center;gap:12px;margin:-24px 0 40px;font-size:14px;color:var(--muted)}
  .switch::after{content:"";position:absolute;inset:-10px -6px}
  .switch{width:48px;height:26px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line-2);position:relative;cursor:pointer;transition:background .2s}
  .switch.on{background:var(--cyan)}
  .switch b{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}
  .switch.on b{transform:translateX(22px)}
  .save{color:var(--emerald);font-weight:700}
  .plans{grid-template-columns:repeat(3,1fr);align-items:stretch}
  @media(max-width:860px){.plans{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}
  .plan{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(24,36,63,.66),rgba(15,26,46,.82));padding:30px 28px;display:flex;flex-direction:column;box-shadow:var(--shadow),var(--hi);transition:transform .3s var(--ease-out),border-color .25s var(--ease),box-shadow .3s var(--ease)}
  .plan::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--pa,var(--cyan)),transparent 82%)}
  .plan::after{content:"";position:absolute;top:-40%;right:-30%;width:70%;height:70%;background:radial-gradient(circle,color-mix(in srgb,var(--pa,var(--cyan)) 20%,transparent),transparent 70%);opacity:.5;pointer-events:none}
  .plans .plan:nth-child(1){--pa:var(--h-overview)}
  .plans .plan:nth-child(2){--pa:var(--cyan)}
  .plans .plan:nth-child(3){--pa:var(--h-home)}
  .plan:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--pa) 45%,transparent);box-shadow:0 30px 60px -22px rgba(2,8,20,.75),var(--hi)}
  .plan.pop{border-color:rgba(34,211,238,.65);box-shadow:0 0 0 1px rgba(34,211,238,.35),0 26px 64px -14px rgba(34,211,238,.3),var(--hi);transform:translateY(-12px) scale(1.03);background:linear-gradient(180deg,rgba(34,211,238,.09),rgba(15,26,46,.88))}
  .plan.pop:hover{transform:translateY(-16px) scale(1.03);box-shadow:0 0 0 1px rgba(34,211,238,.5),0 32px 72px rgba(34,211,238,.3)}
  @media(max-width:860px){.plan.pop,.plan:hover,.plan.pop:hover{transform:none}}
  .plan .pop-tag{position:absolute;top:0;right:0;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#04121a;background:linear-gradient(90deg,#2fe1f2,#22d3ee);padding:6px 16px;border-radius:0 0 0 14px;box-shadow:0 6px 16px rgba(34,211,238,.4)}
  .plan h2{font-size:22px;font-family:var(--display);font-weight:800}
  .plan .desc{color:var(--muted);font-size:14px;margin-top:5px;min-height:38px}
  .plan .amt{font-family:var(--display);font-weight:800;font-size:clamp(46px,4.4vw,54px);line-height:1;margin:16px 0 3px;letter-spacing:-.02em}
  .plan .amt small{font-size:16px;color:var(--faint);font-weight:600;letter-spacing:0}
  .plan .amt-day{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--pa);background:color-mix(in srgb,var(--pa) 13%,transparent);border:1px solid color-mix(in srgb,var(--pa) 32%,transparent);padding:4px 12px;border-radius:999px;margin-bottom:4px}
  .plan .setup{font-size:13.5px;color:var(--faint)}
  .plan ul{list-style:none;padding:0;margin:20px 0 22px;display:flex;flex-direction:column;gap:11px}
  .plan li{display:flex;gap:10px;font-size:14px;color:var(--muted);align-items:flex-start}
  .plan li .ck{color:var(--pa);font-weight:900;flex:none;font-size:15px}
  .plan li b{color:var(--fg)}
  .plan .btn{width:100%;justify-content:center;margin-top:auto}
  .plan .btn.buy.btn-ghost{background:color-mix(in srgb,var(--pa) 12%,transparent);border-color:color-mix(in srgb,var(--pa) 55%,transparent);color:#fff}
  .plan .btn.buy.btn-ghost:hover{background:color-mix(in srgb,var(--pa) 22%,transparent);border-color:var(--pa);transform:translateY(-1px)}
  .plan .ptry{display:block;text-align:center;margin-top:10px;font-size:13px;font-weight:600;color:var(--muted);transition:color .15s}
  .plan .ptry:hover{color:var(--pa)}
  .plan .ptry u{text-decoration-color:color-mix(in srgb,var(--pa) 50%,transparent);text-underline-offset:3px}
  .price-fine{text-align:center;margin-top:26px;color:var(--faint);font-size:14px}

  /* Holly split */
  .holly{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
  @media(max-width:820px){.holly{grid-template-columns:1fr;gap:28px}}
  .holly h2{font-size:clamp(26px,4vw,38px)}
  .holly p{color:var(--muted);margin-top:16px;font-size:17px}
  .chatcard{border:1px solid var(--line-2);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(20,31,56,.7),rgba(15,26,46,.85));padding:18px;box-shadow:var(--shadow-lg),var(--hi)}
  .bubble{border-radius:14px;padding:11px 14px;font-size:14px;margin-bottom:10px;max-width:85%}
  .bubble.me{margin-left:auto;background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.25)}
  .bubble.ai{background:rgba(255,255,255,.04);border:1px solid var(--line)}
  .confirm{display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(20,31,56,.6);border:1px solid var(--line-2);border-radius:10px;padding:9px 12px;font-size:13px;margin-top:6px}
  .confirm .go{background:var(--cyan);color:#04121a;font-weight:800;font-size:12px;padding:4px 12px;border-radius:7px}

  /* FAQ */
  .faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
  .q{border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,rgba(24,37,66,.72),rgba(13,23,42,.82));overflow:hidden;box-shadow:var(--shadow),var(--hi);transition:border-color .2s var(--ease)}
  .q:hover{border-color:var(--line-2)}
  .q[open]{border-color:rgba(34,211,238,.35);box-shadow:var(--shadow),0 0 30px -14px rgba(34,211,238,.5),var(--hi)}
  .q summary{cursor:pointer;list-style:none;padding:18px 20px;font-weight:600;font-size:16px;display:flex;justify-content:space-between;align-items:center}
  .q summary::-webkit-details-marker{display:none}
  .q summary .pl{color:var(--cyan);font-size:22px;transition:transform .2s}
  .q[open] summary .pl{transform:rotate(45deg)}
  .q .a{padding:0 20px 18px;color:var(--muted);font-size:14.5px}

  /* final cta */
  .final{text-align:center;background:linear-gradient(180deg,transparent,rgba(34,211,238,.06));border-top:1px solid var(--line)}
  .final h2{font-size:clamp(28px,5vw,46px)}
  .final p{color:var(--muted);font-size:18px;margin-top:16px}

  footer{border-top:1px solid var(--line);padding:40px 0;color:var(--faint);font-size:14px}
  .foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;align-items:center}
  .foot a{color:var(--muted)}.foot a:hover{color:var(--fg)}

  /* ---- showcase product renders (Morning Brief + entry card) ---- */
  .brief{padding:16px;text-align:left}
  .brief .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
  .brief .top .g{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
  .brief .over{font-size:12px;font-weight:700;color:var(--rose);margin-bottom:14px}
  .brief-cols{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:11px}
  .badge2{font-family:var(--mono);font-size:10px;font-weight:700;background:rgba(244,63,94,.15);color:var(--rose);border-radius:999px;padding:1px 7px}
  .titem{display:flex;align-items:flex-start;gap:9px;margin-bottom:13px}
  .tdot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:none}
  .titem .nm{font-size:13px;font-weight:600}
  .titem .mt{font-size:11px;margin-top:1px}
  .more{font-size:11px;color:var(--cyan);font-weight:600}
  @media(max-width:640px){.brief-cols{grid-template-columns:1fr}}
  .ecard{border:1px solid rgba(16,185,129,.32);border-radius:14px;background:linear-gradient(180deg,rgba(20,31,56,.7),rgba(15,26,46,.85));padding:15px;margin-bottom:14px;box-shadow:var(--shadow)}
  .ecard .row{display:flex;align-items:center;gap:12px}
  .chip2{width:40px;height:40px;border-radius:12px;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.42);display:grid;place-items:center;color:var(--emerald);flex:none}
  .chip2 .d{width:18px;height:18px;border-radius:6px;background:currentColor}
  .chip2 .hi{width:21px;height:21px}
  .ecard .nm{font-family:var(--display);font-weight:700;font-size:15px}
  .ecard .sub{font-size:12px;color:var(--faint)}
  .ecard .amt2{margin-left:auto;text-align:right}
  .ecard .amt2 .v{font-family:var(--mono);font-weight:700;color:var(--emerald);font-size:16px}
  .ecard .amt2 .p{font-size:11px;color:var(--faint)}
  .hly{border:1px solid var(--line-2);border-radius:14px;background:linear-gradient(180deg,rgba(20,31,56,.7),rgba(15,26,46,.85));padding:14px;box-shadow:var(--shadow)}
  .hly .top2{display:flex;align-items:center;gap:8px;margin-bottom:11px}
  .hly .top2 .mm{width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,var(--cyan),var(--cyan-deep));flex:none}
  .hly .top2 .nm{font-family:var(--display);font-weight:700;font-size:13px;color:var(--cyan)}

  /* ============ PREMIUM LAYER ============ */
  /* Section background variety so it never reads as one flat dark sheet */
  .sec-tint{background:linear-gradient(180deg,rgba(36,52,90,.62),rgba(22,34,60,.18) 52%,transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
  .sec-panel{background:linear-gradient(180deg,rgba(19,29,52,.82),rgba(13,21,38,.42));box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
  .sec-glow{position:relative}
  .sec-glow>.wrap{position:relative;z-index:1}
  .sec-glow::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--glow)}
  .g-cyan{--glow:radial-gradient(52rem 34rem at 82% -8%,rgba(34,211,238,.22),transparent 62%)}
  .g-violet{--glow:radial-gradient(52rem 34rem at 16% -6%,rgba(168,85,247,.22),transparent 62%)}
  .g-emerald{--glow:radial-gradient(50rem 32rem at 88% 0%,rgba(16,185,129,.20),transparent 62%)}
  .g-pink{--glow:radial-gradient(50rem 32rem at 12% -2%,rgba(236,72,153,.19),transparent 62%)}
  .g-multi{--glow:radial-gradient(42rem 30rem at 8% -6%,rgba(34,211,238,.19),transparent 60%),radial-gradient(42rem 30rem at 92% 8%,rgba(168,85,247,.18),transparent 60%)}

  /* Colourful gradient titles */
  /* Opt-in only. This used to hit every .sec-head heading, so all 33 section titles
     were gradient and none of them meant anything. */
  .grad-title{background:linear-gradient(106deg,var(--a,var(--cyan)),var(--b,var(--violet)) 94%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.05em}

  /* Trust row */
  .trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 24px;margin-top:30px}
  .trust .ti{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);font-weight:500}
  .trust .ti .k{color:var(--cyan);font-weight:800;flex:none}
  .trust .stars{color:var(--amber);letter-spacing:2px;font-size:15px}
  .trust .sep{width:1px;height:15px;background:var(--line-2)}
  @media(max-width:560px){.trust .sep{display:none}}

  /* Stat strip */
  .stats{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}

  /* Benefit pillars */
  .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media(max-width:820px){.pillars{grid-template-columns:1fr 1fr;max-width:640px;margin-inline:auto}}
  @media(max-width:480px){.pillars{grid-template-columns:1fr;max-width:440px}}
  .pillar{border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;background:linear-gradient(180deg,rgba(20,31,56,.6),rgba(15,26,46,.42));position:relative;overflow:hidden;box-shadow:var(--hi);transition:border-color .25s var(--ease),transform .28s var(--ease-out),box-shadow .28s var(--ease)}
  .pillar:hover{border-color:var(--line-2);transform:translateY(-4px);box-shadow:0 22px 48px -18px rgba(2,8,20,.7),var(--hi)}
  .pillar::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--pc,var(--cyan)),transparent 75%)}
  .pillar .pi{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:16px;background:color-mix(in srgb,var(--pc,var(--cyan)) 13%,transparent);border:1px solid color-mix(in srgb,var(--pc,var(--cyan)) 40%,transparent)}
  .pillar .pi{box-shadow:0 0 20px -9px var(--pc,var(--cyan))}
  .pillar .pi b{width:20px;height:20px;border-radius:7px;background:var(--pc,var(--cyan));display:block}
  .pillar .pi .hi{width:23px;height:23px;stroke:var(--pc,var(--cyan))}
  .pillar h3{font-size:18px;margin-bottom:8px}
  .pillar p{color:var(--muted);font-size:14.5px}
  /* Icon and title as ONE unit: the icon tile sits beside the title on the same
     line, and everything else (text, quote, list) hangs under the title, not under
     the icon. Same rule for cards that carry an .icn (the hub cards). */
  .pillar,.card:has(> .icn){display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:14px;align-content:start}
  .pillar > *,.card:has(> .icn) > *{grid-column:2}
  .pillar > .pi,.card > .icn{grid-column:1;grid-row:1;margin:0}
  .pillar > h3,.card:has(> .icn) > h3{grid-row:1;align-self:center;margin:0}
  .pillar > h3 + *,.card:has(> .icn) > h3 + *{margin-top:10px}
  /* hub cards are narrow (five across): the body runs full width under the icon+title row */
  .card:has(> .icn) > h3 ~ *{grid-column:1 / -1}

  /* Hero picture platform — glow + reflection so the mock reads premium, not flat */
  .hero-stage{position:relative;margin-top:52px}
  .hero-stage::before{content:"";position:absolute;left:50%;top:8%;width:78%;height:86%;transform:translateX(-50%);background:radial-gradient(60% 55% at 50% 40%,rgba(34,211,238,.22),rgba(168,85,247,.12) 55%,transparent 72%);filter:blur(46px);z-index:0;pointer-events:none}
  .hero-stage .frame{position:relative;z-index:1;margin-top:0}

  /* reveal on scroll */
  .rv{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
  .rv.in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
  html{overflow-x:clip}
  @media(max-width:640px){
    .app{grid-template-columns:1fr}
    .app .side{display:none}
    .kpis{grid-template-columns:repeat(2,1fr)}
    .hubgrid{grid-template-columns:repeat(2,1fr)}
  }

/* ============================================================
   MULTI-PAGE ADDITIONS (nav dropdowns, footer, shared placeholders)
   ============================================================ */
/* Reserve header height so the injected nav never shifts layout (CLS) */
#site-nav{display:block;min-height:65px}

/* Desktop dropdown menus */
.nav-item{position:relative;align-self:stretch;display:flex;align-items:center}
.nav-item>a{display:flex;align-items:center;gap:4px;height:100%}
.nav-item .caret{font-size:10px;opacity:.65}
.nav-menu{position:absolute;top:100%;left:-12px;min-width:216px;background:rgba(10,16,30,.98);backdrop-filter:blur(18px) saturate(1.2);border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--shadow-lg),var(--hi);padding:8px;display:flex;flex-direction:column;gap:1px;opacity:0;visibility:hidden;transform:translateY(7px);transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;z-index:60}
.nav-item.has-menu:hover .nav-menu,.nav-item.has-menu:focus-within .nav-menu{opacity:1;visibility:visible;transform:none}
.nav-menu a{padding:9px 12px;border-radius:9px;font-size:14px;font-weight:500;color:var(--muted);white-space:nowrap}
.nav-menu a::after{display:none!important}
.nav-menu a:hover{background:rgba(255,255,255,.06);color:var(--fg)}
.nav-links a[aria-current="page"]{color:var(--fg)}
.nav-links a[aria-current="page"]::after{width:100%}

/* Mobile: flatten dropdowns into the stacked menu */
@media(max-width:860px){
  header.nav.menu-open .nav-links .nav-item{flex-direction:column;align-items:stretch;align-self:auto}
  header.nav.menu-open .nav-links .nav-item>a{border-bottom:1px solid var(--line)}
  header.nav.menu-open .nav-links .nav-menu{position:static;opacity:1;visibility:visible;transform:none;background:none;border:0;box-shadow:none;backdrop-filter:none;padding:0 0 6px 14px;min-width:0}
  header.nav.menu-open .nav-links .nav-menu a{font-size:14.5px;color:var(--muted);padding:10px 4px;border-bottom:1px solid rgba(255,255,255,.05)}
  header.nav.menu-open .nav-links .caret{display:none}
}

/* Multi-page footer */
footer.site{border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(20,31,56,.32));padding:56px 0 32px;color:var(--faint);font-size:14px}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:34px}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;gap:30px 20px}}
@media(max-width:460px){.foot-grid{grid-template-columns:1fr}}
.foot-brand .brand{margin-bottom:14px}
.foot-brand p{max-width:280px;line-height:1.6;color:var(--faint)}
.foot-social{display:flex;gap:10px;margin-top:16px}
.foot-social a{width:34px;height:34px;border-radius:9px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--muted);transition:border-color .2s,color .2s,background .2s}
.foot-social a:hover{color:var(--fg);border-color:var(--cyan);background:rgba(34,211,238,.08)}
.foot-social svg{width:17px;height:17px}
.foot-col .foot-h{font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0 0 14px;font-weight:700}
.foot-col a{display:block;color:var(--faint);padding:5px 0;transition:color .15s}
.foot-col a:hover{color:var(--fg)}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center;margin-top:40px;padding-top:22px;border-top:1px solid var(--line);font-size:13px}
.foot-bottom .legal{display:flex;flex-wrap:wrap;gap:16px}
.foot-bottom .legal a{color:var(--faint);display:inline-block;padding:13px 0;font-size:14px}.foot-bottom .legal a:hover{color:var(--fg)}

/* ============================================================
   PREMIUM PASS 2 — applies to every page via the shared sheet
   ============================================================ */
/* Glassy, interactive chips (business types, tools, problem scatter) */
.chip{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border-color:var(--line-2);box-shadow:var(--hi);padding:9px 16px;transition:transform .2s var(--ease-out),border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.chip:hover{color:var(--fg);border-color:rgba(34,211,238,.45);transform:translateY(-2px)}

/* Ambient glow behind hero screenshots — makes the mock read premium, not flat */
.floaty{position:relative}
.floaty::before{content:"";position:absolute;left:50%;top:4%;width:84%;height:90%;transform:translateX(-50%);background:radial-gradient(58% 54% at 50% 42%,rgba(34,211,238,.22),rgba(168,85,247,.13) 55%,transparent 72%);filter:blur(52px);z-index:0;pointer-events:none}
.floaty>*{position:relative;z-index:1}

/* Connection-proof cards: gradient top accent to match the pillars */
.conn .c{position:relative;overflow:hidden}
.conn .c::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--cyan),var(--fuchsia) 82%);opacity:.85}
/* Shared connection cards + Holly prompts — also declared inline on index.html; here so subpages inherit them */
.conn{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:860px){.conn{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
.conn .c{border:1px solid var(--line);border-radius:var(--r);padding:20px;background:linear-gradient(180deg,rgba(20,31,56,.55),rgba(15,26,46,.4));box-shadow:var(--hi);transition:border-color .2s var(--ease),transform .25s var(--ease-out)}
.conn .c:hover{border-color:var(--line-2);transform:translateY(-3px)}
.conn .c .a{font-weight:600;font-size:14.5px}
.conn .c .x{color:var(--cyan);font-weight:800;margin:8px 0;font-size:13px;letter-spacing:.03em}
.conn .c .b{color:var(--muted);font-size:14px}
.prompts{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.prompts .p{border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,rgba(24,37,66,.78),rgba(13,23,42,.88));box-shadow:var(--shadow),var(--hi);padding:12px 15px;font-size:14px;color:var(--muted)}
.prompts .p b{color:var(--cyan);font-weight:700;margin-right:8px}

/* Popular pricing card: richer cyan→violet accent bar */
.plan.pop::before{background:linear-gradient(90deg,#2fe1f2,#22d3ee 45%,var(--violet))}

/* Feature-row media lifts gently on hover */
.fr-media .frame,.fr-media .shot-wrap{transition:transform .3s var(--ease-out),box-shadow .3s var(--ease)}
.fr-media .frame:hover,.fr-media .shot-wrap:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg),var(--hi)}

/* A touch more air under section headers */
.sec-head{margin-bottom:26px}

/* Chat mockups: subtle depth + confirm-row glow */
.chatcard{transition:transform .28s var(--ease-out),box-shadow .28s var(--ease)}
.chatcard:hover{transform:translateY(-3px)}
.confirm .go{box-shadow:0 6px 16px -4px rgba(34,211,238,.5)}

/* Credibility strip keys glow a little */
.cred .ci .k{text-shadow:0 0 14px rgba(34,211,238,.5)}

/* ===== Shared layout helpers (feature rows, step/card grids) ===== */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;max-width:1040px;margin:0 auto}
.frow+.frow{margin-top:60px}
.frow.rev .fr-media{order:2}
@media(max-width:820px){.frow{grid-template-columns:1fr;gap:24px}.frow.rev .fr-media{order:0}}
.fr-copy h2,.fr-copy h3{font-size:clamp(22px,3.2vw,30px)}
.fr-copy .lead{color:var(--muted);margin-top:14px;font-size:16px;text-wrap:pretty}
.fr-list{list-style:none;padding:0;margin:18px 0 0;display:flex;flex-direction:column;gap:10px}
.fr-list li{display:flex;gap:10px;color:var(--muted);font-size:15px}
.fr-list .ck{color:var(--cyan);font-weight:900;flex:none}
.fr-media .frame,.fr-media .shot-wrap{margin:0}
.fr-media.narrow{max-width:340px;margin:0 auto}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:920px;margin:0 auto}
@media(max-width:760px){.steps3{grid-template-columns:1fr;max-width:440px}}
.steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.steps4{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.steps4{grid-template-columns:1fr}}
.shots-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:900px;margin:0 auto}
@media(max-width:760px){.shots-3{grid-template-columns:1fr;max-width:420px}}
.shots-3 .shot-wrap img{display:block;width:100%;height:auto}
.legal-body{max-width:760px;margin:0 auto}
.legal-body h2{font-size:22px;margin:34px 0 10px}
.legal-body h3{font-size:17px;margin:22px 0 8px}
.legal-body p,.legal-body li{color:var(--muted);font-size:15px;line-height:1.7}
.legal-body ul{padding-left:20px;margin:8px 0}
.legal-body a{color:var(--cyan)}
.legal-body .updated{color:var(--faint);font-size:13px}

/* ===== Report 3 typography refinement (Manrope display system) ===== */
.hero h1,.phero h1,.shero h1,.hhero h1,#pricing h1,.sec-head h1.grad-title{font-family:'Bricolage Grotesque',var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.06}
.sec-head :is(h1,h2){letter-spacing:-.03em}
.card h3{font-family:var(--font);letter-spacing:-.012em}
/* ===== Hierarchy + white-space + hero-callouts pass (2026-07-14) ===== */
section{padding:clamp(34px,4.2vw,54px) 0}
.sec-head{margin-bottom:28px;max-width:700px}
.sec-head :is(h1,h2){font-size:clamp(30px,4.7vw,45px)}
.sec-head p{font-size:17.5px;margin-top:16px}
.final{padding:clamp(46px,5.2vw,68px) 0}
.hero-visual{position:relative}
.hero-callouts .hc{position:absolute;z-index:4;display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#eaf2ff;background:rgba(9,15,28,.92);border:1px solid var(--line-2);border-radius:999px;padding:6px 12px;box-shadow:0 10px 24px -6px rgba(0,0,0,.7),var(--hi);white-space:nowrap;backdrop-filter:blur(8px)}
.hero-callouts .hc b{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px currentColor;color:var(--cyan);flex:none}
.hc-hub{top:30%;left:-14px}.hc-hub b{background:var(--violet);color:var(--violet)}
.hc-holly{top:13%;right:-14px}.hc-holly b{background:var(--emerald);color:var(--emerald)}
.hc-due{bottom:15%;left:50%;transform:translateX(-50%)}
@media(max-width:960px){.hero-callouts{display:none}}

/* Narrow phones: the header CTA kept its desktop size, wrapped onto two lines and
   filled the whole bar, crowding the wordmark. Keep every element — logo, CTA and
   menu — but size them to fit one row. The mobile menu has no CTA of its own, so
   hiding the button would remove the only signup route from a phone header. */
@media(max-width:560px){
  .brand{font-size:17px;gap:3px}
  .brand .blogo img{width:32px;height:32px}
  .nav-cta{gap:4px}
  .nav-cta .btn{padding:0 12px;font-size:13px;white-space:nowrap;min-height:44px}
  .menu-btn{padding:6px 2px;margin-right:-8px}
}

/* Chapter breaks. Every section ran straight into the next with no edge anywhere on the
   page — and `.sec-tint` fades to transparent at its foot, so stacked tints met in a
   mushy seam rather than a clean join. One hairline gives the scroll a rhythm. */
section + section{border-top:1px solid rgba(255,255,255,.055)}
.final{border-top-color:var(--line)}
/* Mid-page CTA band. Was a bare <section style="padding:44px 0"> with no class or id —
   the only section on the page with no treatment at all. */
.sec-cta{padding:30px 0}

/* Theme chooser. Was three thumbnails side by side at a third of the width each, so
   none of them was legible. One big stage and a real choice instead. */
.theme-pick{display:inline-flex;gap:4px;padding:5px;border:1px solid var(--line-2);border-radius:999px;background:rgba(255,255,255,.04);margin:0 auto 26px;}
.theme-pick button{min-height:44px;appearance:none;border:0;cursor:pointer;font:inherit;font-size:14.5px;font-weight:700;
  color:var(--muted);background:transparent;padding:10px 22px;border-radius:999px;transition:color .15s,background .15s}
.theme-pick button:hover{color:var(--fg)}
.theme-pick button[aria-selected="true"]{color:#04121a;background:linear-gradient(135deg,var(--cyan),#67e8f9);box-shadow:0 6px 18px -8px var(--cyan)}
.theme-stage{max-width:920px;margin:0 auto;position:relative}
.theme-stage .frame{margin:0}
.theme-stage img{display:block;width:100%;height:auto}
@media(max-width:560px){.theme-pick button{padding:9px 15px;font-size:13.5px}}
/* Quieter second action under a plan's Buy now. */
/* Second action under a plan's primary CTA. */
.plan .buy-now{margin-top:10px}

/* Contact form — was inline on contact.html only; shared now the homepage ends with one. */
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:960px;margin:0 auto;align-items:start}
  @media(max-width:760px){.contact-grid{grid-template-columns:1fr;max-width:520px}}
  .cform{border:1px solid var(--line-2);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(24,37,66,.78),rgba(13,23,42,.88));padding:28px;box-shadow:var(--shadow-lg),var(--hi)}
  .cform label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin:0 0 6px}
  .cform .fld{margin-bottom:16px}
  .cform input,.cform textarea,.cform select{width:100%;background:rgba(4,10,22,.5);border:1px solid var(--line-2);border-radius:10px;color:var(--fg);font-family:var(--font);font-size:15px;padding:12px 14px}
  .cform textarea{min-height:130px;resize:vertical}
  .cform .btn{width:100%;justify-content:center;margin-top:4px}
  .cform .sent-note{display:none;margin-top:14px;color:var(--emerald);font-size:14px;font-weight:600}
  .cform.sent .sent-note{display:block}
  .cinfo .card{margin-bottom:16px}
  .cinfo .card h2{display:flex;align-items:center;gap:10px;font-size:17px;margin:0}
  .cinfo .card .k{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;flex:none;color:var(--cyan);background:rgba(34,211,238,.12);border:1px solid rgba(34,211,238,.3)}
  .cinfo .card .k svg{width:17px;height:17px}
  .cinfo a{color:var(--cyan)}
  .cinfo .k{color:var(--cyan);font-weight:800}

/* ============ FOOTER ============================================================
   Was: a 4-up link table, 16px row gaps, wordmark in --faint grey, and Privacy /
   Terms / Cookies listed TWICE (in the Company column and again in the legal bar).
   Now: a brand + closing-CTA row, three balanced columns, and one legal line. */
footer.site{position:relative;background:linear-gradient(180deg,transparent 0%,rgba(8,14,26,.6) 40%,rgba(6,11,21,.95));padding-top:0}
footer.site::before{content:"";position:absolute;inset-inline:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.45),rgba(168,85,247,.32),transparent)}
footer.site > .wrap{padding-top:72px;padding-bottom:34px}

.foot-main{display:grid;grid-template-columns:1.15fr 2fr;gap:64px;align-items:start}
@media(max-width:900px){.foot-main{grid-template-columns:1fr;gap:44px}}

.foot-brand .brand{color:#fff;font-size:23px;margin-bottom:14px}
.foot-brand .brand .blogo img{filter:drop-shadow(0 0 16px rgba(34,211,238,.45))}
.foot-tag{font-family:var(--display);font-size:13px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--cyan);margin:0 0 14px}
.foot-brand p{max-width:360px;line-height:1.7;color:var(--muted);font-size:15px}
.foot-cta{margin-top:22px;padding:12px 22px}
.foot-act-n{margin:12px 0 0;font-size:13px;color:var(--faint)}

.foot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
@media(max-width:640px){.foot-grid{grid-template-columns:1fr 1fr;gap:30px 20px}}
@media(max-width:340px){.foot-grid{grid-template-columns:1fr}}
.foot-col{display:flex;flex-direction:column;align-items:flex-start}
.foot-grid h4{font-size:11.5px;font-weight:800;color:var(--faint);letter-spacing:.16em;
  text-transform:uppercase;margin:0 0 18px}
.foot-grid a{color:var(--muted);font-size:15px;padding:7px 0;transition:color .15s}
.foot-grid a:hover{color:#fff}

.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;align-items:center;
  margin-top:52px;padding-top:26px;border-top:1px solid var(--line);font-size:13.5px;color:var(--faint)}
.foot-bottom .legal{display:flex;gap:22px}
.foot-bottom a{color:var(--faint);transition:color .15s}
.foot-bottom a:hover{color:var(--muted)}

/* ---- Section heading hierarchy -------------------------------------------------
   The eyebrow was rendering at 17px, not the 12px it was designed at: `.sec-head p`
   (0,1,1) beats `.eyebrow` (0,1,0) on font-size regardless of order. An uppercase
   17px label with wide tracking sits almost level with a 45px heading, so the two
   competed and neither read as dominant. Eyebrow back to a small accent label,
   heading up to the same weight the hero uses. */
/* The eyebrow is the same pill the hero badge uses, with a lit dot, sitting tight on
   the heading with the heading's own top margin removed — so label + title read as one
   titled component rather than a floating caption above a separate heading. */
.eyebrow,.badge{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:800;letter-spacing:.18em;color:var(--cyan);
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid rgba(34,211,238,.28);border-radius:999px;padding:7px 14px;
  box-shadow:0 0 22px -10px rgba(34,211,238,.55),var(--hi);
  margin:0 0 14px;
}
.eyebrow::before,.badge::before{
  content:"";width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--cyan);box-shadow:0 0 10px 1px rgba(34,211,238,.75);
}
.sec-head :is(h1,h2){
  margin-top:0;
  font-weight:800;
  letter-spacing:-.03em;
  text-shadow:0 1px 24px rgba(34,211,238,.14);
}

/* Where-your-data-goes diagram (security page). */
.flowfig{margin:26px 0 0;padding:0}
.flowfig figcaption{margin-top:14px;text-align:center;font-size:13px;color:var(--faint);line-height:1.6}
@media(max-width:620px){
  .flowfig{overflow-x:auto;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
  .flowfig svg{min-width:520px}
}

/* Workflow tracks (How it works) — a numbered chain, so the page shows a sequence
   rather than another grid of feature cards. */
.track{max-width:940px;margin:0 auto 26px;padding:26px 28px;border:1px solid var(--line);
  border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(22,34,60,.5),rgba(15,26,46,.42))}
@media(max-width:620px){.track{padding:22px 18px}}
.track-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.track-head h3{font-size:19px;margin:0;letter-spacing:-.01em}
.track-tag{font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;border:1px solid}
.track-tag.biz{color:var(--indigo-text);border-color:color-mix(in srgb,var(--h-business) 45%,transparent);
  background:color-mix(in srgb,var(--h-business) 12%,transparent)}
.track-tag.life{color:var(--cyan);border-color:rgba(34,211,238,.45);background:rgba(34,211,238,.1)}
.track-steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:tk}
.track-steps li{counter-increment:tk;position:relative;padding:0 0 20px 46px}
.track-steps li::before{content:counter(tk);position:absolute;left:0;top:-2px;width:28px;height:28px;
  display:grid;place-items:center;border-radius:50%;font-family:var(--display);font-size:13px;font-weight:800;
  color:var(--cyan);border:1px solid rgba(34,211,238,.4);background:rgba(34,211,238,.1)}
/* the connecting line, drawn between the markers rather than under the last one */
.track-steps li:not(:last-child)::after{content:"";position:absolute;left:13.5px;top:30px;bottom:4px;
  width:1px;background:linear-gradient(180deg,rgba(34,211,238,.4),rgba(34,211,238,.08))}
.track-steps li:last-child{padding-bottom:0}
.track-steps b{display:block;color:var(--fg);font-size:15.5px;margin-bottom:3px}
.track-steps span{color:var(--muted);font-size:14.5px;line-height:1.6}

/* Status chains (Business) — shows the sequence a record moves through, with the
   automated hand-offs picked out, rather than describing 25 rules in prose. */
.chains{max-width:940px;margin:0 auto;display:grid;gap:26px}
.chain-row{padding:22px 24px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(24,37,66,.78),rgba(13,23,42,.88));box-shadow:var(--shadow),var(--hi)}
@media(max-width:620px){.chain-row{padding:20px 16px}}
.chain-label{display:inline-block;font-family:var(--display);font-size:11px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--h-business);margin-bottom:14px}
.chain{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:26px}
.chain li{position:relative;padding:8px 14px;border-radius:999px;font-size:14px;font-weight:600;
  color:var(--muted);border:1px solid var(--line-2);background:rgba(255,255,255,.03)}
/* the automated steps — where Holvario does the paperwork for you */
.chain li.hot{color:var(--cyan);border-color:rgba(34,211,238,.5);background:rgba(34,211,238,.12);
  box-shadow:0 0 20px -8px var(--cyan)}
.chain li{white-space:nowrap}
.chain li:not(:last-child)::after{content:"→";position:absolute;right:-19px;top:50%;transform:translateY(-50%);color:var(--faint);font-weight:400;pointer-events:none}
.chain-note{margin:14px 0 0;color:var(--faint);font-size:13.5px;line-height:1.6}
/* Tablet: the seven-step chain was ~30px too wide at 768, so "Accounts" wrapped alone
   under a dangling arrow. Tighter pills + gap keep all seven on one line; the arrow
   offset follows the gap so it stays centred between pills. */
@media(max-width:820px){
  .chain{gap:18px}
  .chain li{padding:7px 11px;font-size:13.5px}
  .chain li:not(:last-child)::after{right:-15px}
}

/* The quoted example inside a Holly mode card. */
.pillar .say{margin:0 0 10px;color:var(--cyan);font-size:15px;font-style:italic;line-height:1.5}

/* Hub page: plan badge + sticky jump nav ------------------------------------------
   A 12-hub page is long, and which plan a hub needs was only discoverable on the
   pricing page. Both fixed here. */
.plan-badge{display:inline-block;margin-left:10px;padding:4px 10px;border-radius:999px;
  font-family:var(--display);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line-2);background:rgba(255,255,255,.04);vertical-align:middle}
.plan-badge.premium{color:var(--cyan);border-color:rgba(34,211,238,.45);background:rgba(34,211,238,.1)}

.hubnav{position:sticky;top:64px;z-index:20;backdrop-filter:blur(14px) saturate(1.2);
  background:rgba(11,18,33,.86);border-block:1px solid var(--line)}
.hubnav-in{display:flex;gap:6px;overflow-x:auto;padding:10px 0;scrollbar-width:none}
@media(max-width:640px){.hubnav-in{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}}
.hubnav-in::-webkit-scrollbar{display:none}
.hubnav a{flex:none;padding:7px 13px;border-radius:999px;font-size:13.5px;font-weight:600;
  color:var(--muted);border:1px solid transparent;transition:color .15s,border-color .15s,background .15s}
.hubnav a:hover{color:var(--fg);border-color:var(--line-2);background:rgba(255,255,255,.04)}
/* anchored sections must clear the site header AND this bar */
.hubnav ~ section[id]{scroll-margin-top:118px}
@media(max-width:560px){.hubnav{top:56px}.hubnav a{font-size:13px;padding:6px 11px}}

/* Tools ---- the invoice generator gets its own band: it is the only tool that
   produces a document AND writes a record into a hub, so it leads the page. */
.tfeat{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:center;
  border:1px solid var(--line-2);border-radius:20px;padding:30px 32px;
  background:linear-gradient(140deg,rgba(139,92,246,.10),rgba(8,12,22,.5) 62%)}
.tfeat .eyebrow{color:var(--indigo-text)}
.tfeat h2{font-size:clamp(24px,2.5vw,31px);font-weight:800;letter-spacing:-.03em;margin:0 0 10px}
.tfeat p{color:var(--muted);margin:0 0 18px;max-width:46ch}
.tfeat-steps{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.tfeat-steps li{display:flex;gap:13px;align-items:flex-start;padding:13px 15px;border-radius:13px;
  border:1px solid var(--line);background:rgba(255,255,255,.022);font-size:14.5px}
.tfeat-steps li b{display:grid;place-items:center;flex:none;width:23px;height:23px;border-radius:7px;
  font-size:12px;font-weight:800;color:#07101d;background:var(--h-business)}
.tfeat-steps li span{color:var(--muted)}
.tfeat-steps li span em{font-style:normal;color:var(--fg);font-weight:600}
@media(max-width:820px){.tfeat{grid-template-columns:1fr;gap:24px;padding:26px 22px}}

/* Two-column "this, not that" panel. Used where a page has to set an expectation
   before someone pays --- scattering the caveats across a risk note and two FAQ
   answers meant nobody read them. */
.dual{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dual .col{border:1px solid var(--line-2);border-radius:17px;padding:24px 24px 22px;
  background:linear-gradient(180deg,rgba(24,37,66,.78),rgba(13,23,42,.88));box-shadow:var(--shadow),var(--hi)}
.dual .col.is{border-color:rgba(34,211,238,.28);background:linear-gradient(160deg,rgba(34,211,238,.07),rgba(255,255,255,.015) 60%)}
.dual h3{font-size:15.5px;font-weight:800;letter-spacing:-.01em;margin:0 0 15px;display:flex;align-items:center;gap:9px}
.dual .col.is h3{color:var(--cyan)}
.dual .col.isnt h3{color:var(--muted)}
.dual ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.dual li{display:flex;gap:11px;font-size:14.5px;line-height:1.5;color:var(--muted)}
.dual li i{flex:none;font-style:normal;font-weight:800;width:17px;text-align:center}
.dual .col.is li i{color:var(--cyan)}
.dual .col.isnt li i{color:var(--faint)}
.dual .col.is li b{color:var(--fg);font-weight:600}
@media(max-width:760px){.dual{grid-template-columns:1fr}}

/* A one-line plan reminder under a hero CTA, so nobody starts a trial for a hub
   their plan will not include. */
.cta-note{margin-top:14px;font-size:13.5px;color:var(--faint)}
.cta-note b{color:var(--muted);font-weight:600}

/* Twelve equally-weighted hub blocks gave no mental model. These dividers split them
   into the three things people actually came to work out: my life, my work, and the
   layer that ties both together. */
.hubgroup{max-width:1180px;margin:0 auto;padding:30px 24px 0;scroll-margin-top:132px}
.hubgroup-in{display:flex;align-items:baseline;gap:16px;padding:6px 0 2px;
  border-top:1px solid var(--line-2)}
.hubgroup .n{flex:none;font-size:12px;font-weight:800;letter-spacing:.2em;color:var(--faint)}
.hubgroup h2{font-size:clamp(21px,2.2vw,27px);font-weight:800;letter-spacing:-.03em;margin:14px 0 4px}
.hubgroup p{color:var(--muted);margin:0 0 4px;font-size:14.5px;max-width:56ch}
.hubgroup + section{padding-top:22px}
@media(max-width:640px){.hubgroup-in{flex-direction:column;gap:2px}}

/* The full automation list. "Twenty-six rules" is a number; this is the actual work
   the app does, which is what a sole trader is buying. Grouped by outcome, not by
   entry type, because nobody shops by entry type. */
.rules{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.rulecol{border:1px solid var(--line-2);border-radius:17px;padding:22px 22px 18px;
  background:linear-gradient(180deg,rgba(24,37,66,.78),rgba(13,23,42,.88));box-shadow:var(--shadow),var(--hi)}
.rulecol h3{display:flex;align-items:baseline;gap:9px;font-size:15.5px;font-weight:800;
  letter-spacing:-.01em;margin:0 0 4px;color:var(--fg)}
.rulecol h3 b{font-size:12px;font-weight:800;color:var(--indigo-text);
  background:rgba(99,102,241,.14);border-radius:6px;padding:2px 7px}
.rulecol > p{color:var(--faint);font-size:13.5px;margin:0 0 14px}
.rulecol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rulecol li{font-size:14px;color:var(--muted);line-height:1.45;padding-left:15px;position:relative}
.rulecol li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--indigo);opacity:.75}
.rulecol li b{color:var(--fg);font-weight:600}
@media(max-width:820px){.rules{grid-template-columns:1fr}}

/* Screenshot slots that degrade politely. The old shots/ README described exactly this
   behaviour ("a neat placeholder shows the filename") but the mechanism had been lost,
   so a missing capture would have shipped as a broken image icon. */
.shotslot{position:relative;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(180deg,rgba(28,40,68,.6),rgba(15,26,46,.55));box-shadow:var(--shadow-lg),var(--hi)}
.shotslot img{display:block;width:100%;height:auto}
.shotslot .pending{display:none;padding:46px 26px;text-align:center}
.shotslot.is-pending .pending{display:block}
.shotslot.is-pending img{display:none}
.shotslot .pending b{display:block;color:var(--muted);font-size:14.5px;font-weight:700;margin-bottom:6px}
.shotslot .pending code{font-family:var(--mono,ui-monospace,monospace);font-size:12.5px;color:var(--faint)}
.flabel{display:block;margin:0 0 6px;font-size:13px;font-weight:600;color:var(--muted);text-align:left}
/* Plan comparison on a phone: the row label stays put while the plan columns scroll. */
@media(max-width:700px){.tbl-scroll table td:first-child,.tbl-scroll table th:first-child{position:sticky;left:0;background:var(--bg);z-index:1;box-shadow:6px 0 12px -8px rgba(0,0,0,.6)}}
/* Solutions pages: "one thing added, everywhere it needs to be" as rows in one panel. */
.flowpanel{border:1px solid var(--line-2);border-radius:var(--r-lg);background:linear-gradient(180deg,rgba(20,31,56,.6),rgba(15,26,46,.72));box-shadow:var(--hi);overflow:hidden;max-width:920px;margin:0 auto}
.flowpanel .fp{display:grid;grid-template-columns:1fr auto 1.4fr;gap:18px;align-items:center;padding:18px 24px;border-top:1px solid var(--line)}
.flowpanel .fp:first-child{border-top:0}
.flowpanel .fa{font-weight:700;color:var(--fg);font-size:15.5px}
.flowpanel .fx{color:var(--cyan);font-weight:800;font-size:18px}
.flowpanel .fb{color:var(--muted);font-size:14.5px}
@media(max-width:600px){.flowpanel .fp{grid-template-columns:1fr;gap:6px}.flowpanel .fx{transform:rotate(90deg);width:18px}}
/* Inline "→" links get a 44px hit area without moving the line they sit on. */
a.arrow-link{display:inline-block;padding:13px 0;margin:-13px 0}