:root{
    --navy:#1F3550;
    --navy-ink:#12233A;
    --copper:#B5541E;
    --copper-dark:#8A3E14;
    --copper-soft:#F8EBE1;
    --blue:#3D6FA3;
    --blue-soft:#EAF0F6;
    --surface:#FFFFFF;
    --page:#F7F5F0;
    --text-primary:#1C1B18;
    --text-secondary:#55524B;
    /* Was #8A8579 — 3.37:1 on the cream page, under the 4.5:1 minimum, and
       used at 12.5px for the pricing fine print. */
    --text-muted:#6E6A60;
    --border:rgba(28,27,24,0.13);
    --grid:#E4E0D6;
    --good:#356B31;                 /* 4.31:1 on --good-bg was marginally short */
    --good-bg:#E9F1E5;
    --warning:#95600B;
    --warning-bg:#F7EDD9;
    --serious:#A34A26;
    --serious-bg:#F5E7DE;
    --critical:#A6362B;
    --critical-bg:#F5E3E0;
    --radius:6px;
    --amber:#E8A667;
    --grad-copper: linear-gradient(135deg, var(--copper) 0%, var(--amber) 100%);
    /* White text over the decorative gradient fell to ~2.3:1 at the light end.
       Buttons get their own gradient that stays dark enough all the way
       across; --grad-copper keeps the brighter amber for rules and headings,
       where nothing sits on top of it. */
    --grad-btn: linear-gradient(135deg, var(--copper) 0%, #B25E14 100%);
    --grad-dark: linear-gradient(120deg, var(--navy-ink) 0%, var(--navy) 55%, #2C4A6E 100%);
    --font-display: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', serif;
    font-family: -apple-system, "Segoe UI", Arial, sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--page);color:var(--text-primary);}
  body{line-height:1.55;}
  h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;margin:0 0 .4em 0;color:var(--navy-ink);line-height:1.2;}
  p{margin:0 0 1em 0;color:var(--text-secondary);}
  a{color:var(--copper-dark);}
  .muted{color:var(--text-muted);}
  .container{max-width:1080px;margin:0 auto;padding:0 24px;}
  button{font-family:inherit;cursor:pointer;}

  /* ---- top banner (POC notice) ---- */
  .poc-banner{background:var(--navy-ink);color:#fff;font-size:13px;text-align:center;padding:8px 16px;}
  .poc-banner strong{color:#E8A667;}

  /* ---- nav ---- */
  header.site{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40;}
  .nav-row{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;max-width:1080px;margin:0 auto;}
  .brand{display:flex;align-items:baseline;gap:8px;font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--navy-ink);letter-spacing:-.01em;}
  .brand .tag{font-family:-apple-system,sans-serif;font-weight:600;font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--copper-dark);}
  nav.links{display:flex;gap:2px;align-items:center;flex-wrap:wrap;}
  nav.links button.navlink{background:none;border:none;border-bottom:2px solid transparent;padding:8px 12px;font-size:14px;color:var(--text-secondary);font-weight:600;}
  nav.links button.navlink:hover{color:var(--navy-ink);}
  nav.links button.navlink.active{color:var(--navy-ink);border-bottom-color:var(--copper);}
  .cta-btn{background:var(--grad-btn);color:#fff;border:none;padding:10px 18px;border-radius:var(--radius);font-weight:700;font-size:14px;letter-spacing:.01em;box-shadow:0 0 0 rgba(181,84,30,0);}
  .cta-btn:hover{box-shadow:0 10px 26px rgba(181,84,30,0.35);transform:translateY(-1px);}
  .cta-btn.outline{background:transparent;color:var(--navy-ink);border:1.5px solid var(--navy-ink);box-shadow:none;}
  .cta-btn.outline:hover{background:var(--navy-ink);color:#fff;transform:translateY(-1px);box-shadow:0 10px 26px rgba(18,35,58,0.25);}
  .cta-btn.small{padding:7px 13px;font-size:13px;}

  /* ---- page sections ---- */
  .page{display:none;}
  .page.active{display:block;}
  section.block{padding:56px 0;}
  section.block.tight{padding:36px 0;}
  section.block.alt{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}

  /* ---- kicker (replaces pill "eyebrow") ---- */
  .kicker{display:flex;align-items:center;gap:10px;font-weight:700;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--copper-dark);margin-bottom:16px;}
  .kicker::before{content:"";display:block;width:22px;height:2px;background:var(--copper);}
  .kicker.center{justify-content:center;}

  /* ---- hero (asymmetric two-column) ---- */
  .hero{padding:72px 0 76px 0;}
  .hero .hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:52px;align-items:center;}
  .hero h1{font-size:clamp(34px, 5.4vw, 72px);line-height:1.05;margin:0 0 .35em 0;letter-spacing:-.01em;}
  .hero h1 .accent{background:var(--grad-copper);-webkit-background-clip:text;background-clip:text;color:transparent;}
  .hero h1 .word{display:inline-block;}
  .js .hero h1 .word{opacity:0;transform:translateY(.4em);animation:wordUp .7s cubic-bezier(.16,.8,.3,1) forwards;}
  @keyframes wordUp{to{opacity:1;transform:none;}}
  .hero .sub{font-size:17.5px;max-width:520px;margin:0 0 28px 0;}
  .hero-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px;}
  .hero-ctas .cta-btn{padding:13px 22px;font-size:15px;}
  .hero-preview{background:rgba(255,255,255,0.88);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:8px;padding:0;transform:rotate(1.1deg);box-shadow:0 22px 48px rgba(18,35,58,0.16);}
  .hero-preview .hp-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--navy-ink);border-radius:8px 8px 0 0;}
  .hero-preview .hp-head span{color:#fff;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
  .hero-preview .hp-head .hp-dot{width:7px;height:7px;border-radius:50%;background:#E8A667;}
  .hero-preview .hp-body{padding:16px 18px 18px 18px;}
  .hero-preview table{width:100%;border-collapse:collapse;font-size:12px;}
  .hero-preview th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);font-weight:700;padding:0 0 6px 0;border-bottom:1px solid var(--grid);}
  .hero-preview td{padding:8px 0;border-bottom:1px solid var(--grid);color:var(--text-primary);}
  .hero-preview tr:last-child td{border-bottom:none;}
  .hero-preview .hp-foot{margin-top:12px;font-size:11.5px;color:var(--text-muted);display:flex;justify-content:space-between;align-items:center;}
  .hero-preview .hp-foot a{font-weight:700;font-size:11.5px;}

  /* ---- steps ---- */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:32px;border-top:1px solid var(--border);border-left:1px solid var(--border);}
  .step-card{background:var(--surface);border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:25px 20px 22px 20px;text-align:left;position:relative;}
  .step-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-copper);}
  .step-card .num{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.4vw,38px);background:var(--grad-copper);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:10px;}
  .step-card h3,.step-card h4{font-size:15px;margin-bottom:6px;font-family:-apple-system,sans-serif;color:var(--text-primary);}
  .step-card p{font-size:13.5px;margin:0;}

  /* ---- benefits (editorial list, no icon cards) ---- */
  .benefits-list{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;}
  .benefit{border-top:2px solid var(--navy-ink);padding-top:14px;}
  .benefit .b-num{font-family:var(--font-display);font-size:13px;color:var(--copper-dark);font-weight:700;margin-bottom:6px;display:block;}
  .benefit h3{font-size:16.5px;}
  .benefit p{font-size:14px;margin:0;}

  /* ---- roi calc ---- */
  .roi-card{background:var(--navy-ink);color:#fff;border-radius:8px;padding:34px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;border-top:3px solid var(--copper);}
  .roi-card h3{color:#fff;font-size:20px;}
  .roi-card p{color:#B9C6D6;font-size:14px;}
  .roi-card select{width:100%;padding:10px 12px;border-radius:4px;border:none;font-size:14px;margin-top:10px;font-family:inherit;}
  .roi-output{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.16);border-radius:6px;padding:20px;}
  .roi-output .figure{font-family:var(--font-display);font-size:30px;font-weight:700;color:#fff;}
  .roi-output .label{font-size:12px;color:#B9C6D6;text-transform:uppercase;letter-spacing:.04em;}
  .roi-output .fineprint{font-size:11.5px;color:#93A4B8;margin-top:10px;}

  /* ---- pricing teaser / full ---- */
  .pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--border);border-left:1px solid var(--border);}
  .price-card{background:var(--surface);border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:28px 24px;display:flex;flex-direction:column;}
  .price-card.featured{background:var(--copper-soft);position:relative;border-top:3px solid transparent;}
  .price-card.featured::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-copper);}
  .price-card .ribbon{position:absolute;top:14px;right:14px;background:var(--grad-btn);color:#fff;font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:4px;letter-spacing:.02em;}
  .price-card h3{font-size:17px;font-family:-apple-system,sans-serif;}
  .price-card .price{font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--navy-ink);margin:6px 0 4px 0;}
  .price-card .price small{font-family:-apple-system,sans-serif;font-size:13px;font-weight:600;color:var(--text-muted);}
  .price-card .price-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted);margin-top:8px;}
  .price-card .price-label.sub{color:var(--copper-dark);border-top:1px dashed var(--border);padding-top:10px;}
  .price-card .price.sub{font-size:19px;margin:2px 0 4px 0;}
  .price-card .who{font-size:13px;color:var(--text-muted);margin-bottom:14px;}
  .price-card ul{margin:0 0 18px 0;padding-left:18px;font-size:13.5px;color:var(--text-secondary);}
  .price-card ul li{margin-bottom:6px;}
  .price-card .cta-btn{margin-top:auto;width:100%;text-align:center;}
  /* The teaser cards on the home page are anchors. They looked identical to
     the pricing-page cards and behaved like dead boxes, which is the one
     thing a card showing a price must not do. */
  a.price-card{text-decoration:none;color:inherit;transition:background .15s ease,box-shadow .15s ease;}
  a.price-card:hover,a.price-card:focus-visible{background:var(--copper-soft);box-shadow:inset 0 0 0 2px var(--copper);}
  a.price-card.featured:hover,a.price-card.featured:focus-visible{background:#F3DFCF;}
  a.price-card:focus-visible{outline:none;}
  .price-card .pc-go{margin-top:auto;padding-top:12px;font-size:13px;font-weight:700;color:var(--copper-dark);}
  /* The anchor a pricing card is scrolled to. Without it the sticky header
     covers the plan heading the visitor just clicked. */
  .price-card[id]{scroll-margin-top:90px;}
  #upgrading{scroll-margin-top:90px;}

  /* ---- generic ---- */
  .lead{font-size:16px;max-width:720px;}
  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;}
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  table.plain{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);}
  table.plain th{background:var(--navy-ink);color:#fff;text-align:left;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;padding:10px 14px;font-family:-apple-system,sans-serif;}
  table.plain td{padding:12px 14px;font-size:13.5px;border-top:1px solid var(--grid);color:var(--text-secondary);}
  table.plain tr:nth-child(even) td{background:#FBFAF7;}
  .badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:20px;}
  .badge.good{background:var(--good-bg);color:var(--good);}
  .badge.warning{background:var(--warning-bg);color:var(--warning);}
  .badge.serious{background:var(--serious-bg);color:#a34a26;}
  .badge.status-received{background:#EEECE6;color:#55524B;}
  .badge.status-analysis{background:var(--blue-soft);color:var(--navy);}
  .badge.status-review{background:var(--warning-bg);color:var(--warning);}
  .badge.status-delivered{background:var(--good-bg);color:var(--good);}

  .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;}

  /* ---- sample report banner ---- */
  .sample-banner{background:var(--warning-bg);border:1px solid #E3C888;color:#7a5b06;border-radius:var(--radius);padding:12px 18px;font-size:13.5px;font-weight:600;margin-bottom:28px;display:flex;align-items:center;gap:10px;}

  /* ---- stat tiles ---- */
  .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-bottom:28px;border-top:1px solid var(--border);border-left:1px solid var(--border);}
  .stat-tile{background:var(--surface);border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:16px 18px;}
  .stat-tile .val{font-family:var(--font-display);font-size:24px;font-weight:700;color:var(--navy-ink);}
  .stat-tile .lbl{font-size:11.5px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;margin-top:2px;}

  /* ---- dark impact-stat band ---- */
  .stat-band{background:var(--grad-dark);position:relative;overflow:hidden;padding:52px 0;}
  .stat-band::before{content:"";position:absolute;inset:0;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M0 0 L64 64 M64 0 L0 64' stroke='%23ffffff' stroke-opacity='0.05' stroke-width='1'/%3E%3C/svg%3E");}
  .stat-band .container{position:relative;z-index:1;}
  .stat-band .kicker{color:var(--amber);margin-bottom:10px;}
  .stat-band .kicker::before{background:var(--amber);}
  .stat-band h2{color:#fff;}
  .stat-band .lead{color:#B9C6D6;}
  .stat-grid.dark{border-color:rgba(255,255,255,0.16);margin-top:28px;}
  .stat-grid.dark .stat-tile{background:transparent;border-color:rgba(255,255,255,0.16);padding:8px 22px 8px 0;}
  .stat-grid.dark .icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:12px;background:rgba(232,166,103,0.14);border:1px solid rgba(232,166,103,0.4);}
  .stat-grid.dark .icon svg{width:18px;height:18px;stroke:var(--amber);fill:none;}
  .stat-grid.dark .val{color:#fff;font-size:clamp(30px,4.2vw,46px);}
  .stat-grid.dark .lbl{color:#9FB2C6;font-size:12px;}
  .stat-grid.dark .stat-tile:hover{border-color:var(--amber);}

  /* ---- industries marquee ---- */
  .marquee-wrap{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:20px 0;overflow:hidden;}
  .marquee-wrap .kicker{justify-content:center;margin-bottom:14px;}
  .marquee-track{display:flex;width:max-content;gap:0;animation:marquee 32s linear infinite;}
  .marquee-track span{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--navy-ink);padding:0 26px;white-space:nowrap;}
  .marquee-track span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--copper);display:block;}
  @keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  @media (prefers-reduced-motion: reduce){
    .marquee-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;}
    .marquee-track span:nth-child(n+7){display:none;}
  }

  /* ---- timeline ---- */
  .timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--border);border-left:1px solid var(--border);}
  .tl-phase{background:var(--surface);border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:20px;border-top:3px solid var(--copper);}
  .tl-phase h4{font-size:13px;color:var(--navy);text-transform:uppercase;letter-spacing:.03em;font-family:-apple-system,sans-serif;}
  .tl-phase ul{padding-left:18px;font-size:13.5px;color:var(--text-secondary);margin:8px 0 0 0;}
  .tl-phase li{margin-bottom:6px;}

  /* ---- how it works ---- */
  .flow{display:flex;align-items:stretch;gap:0;margin:28px 0;border-top:1px solid var(--border);border-left:1px solid var(--border);}
  .flow-step{flex:1;background:var(--surface);border-right:1px solid var(--border);border-bottom:1px solid var(--border);padding:18px;position:relative;}
  .flow-step::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad-copper);}
  .flow-arrow{display:flex;align-items:center;justify-content:center;width:0;color:var(--text-muted);font-size:16px;}
  .flow-step .k{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--copper-dark);letter-spacing:.03em;}
  .flow-step h4{font-size:14.5px;margin:4px 0 6px 0;font-family:-apple-system,sans-serif;}
  .flow-step p{font-size:13px;margin:0;}

  /* ---- login / portal ---- */
  .center-wrap{min-height:60vh;display:flex;align-items:center;justify-content:center;padding:60px 24px;}
  .login-card{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:34px;width:100%;max-width:380px;}
  .login-card h2{font-size:20px;text-align:center;}
  .login-card .sub{text-align:center;font-size:13px;margin-bottom:22px;}
  .field{margin-bottom:14px;}
  .field label{display:block;font-size:12.5px;font-weight:700;color:var(--text-secondary);margin-bottom:5px;}
  .field input, .field select, .field textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:4px;font-size:14px;font-family:inherit;}
  .field textarea{resize:vertical;min-height:80px;}
  .login-card .cta-btn{width:100%;margin-top:6px;}
  .demo-note{background:var(--blue-soft);color:var(--navy);font-size:12px;border-radius:4px;padding:8px 10px;margin-top:16px;text-align:center;}

  .portal-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;}
  .portal-topbar h2{margin:0;font-size:22px;}
  .assess-table td.company{font-weight:700;color:var(--navy-ink);}
  .new-assess-btn{margin-bottom:20px;}

  /* ---- portal: manage roadmap ---- */
  .manage-head{display:flex;align-items:center;gap:12px;margin-top:36px;}
  .export-row{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 18px 0;}
  .manage-table td.company{font-weight:700;color:var(--navy-ink);}
  .manage-table td.reorder{text-align:center;white-space:nowrap;}
  .manage-table td.reorder button{background:none;border:1px solid var(--border);border-radius:4px;width:22px;height:20px;font-size:9px;line-height:1;color:var(--text-muted);cursor:pointer;padding:0;}
  .manage-table td.reorder button:hover{border-color:var(--copper);color:var(--copper-dark);}
  .manage-table select, .manage-table input[type="text"]{width:100%;padding:6px 8px;border:1px solid var(--border);border-radius:4px;font-size:12.5px;font-family:inherit;background:var(--surface);}

  /* modal */
  .modal-overlay{position:fixed;inset:0;background:rgba(18,35,58,.5);display:none;align-items:center;justify-content:center;z-index:100;padding:20px;}
  .modal-overlay.open{display:flex;}
  .modal{background:var(--surface);border-radius:8px;max-width:560px;width:100%;max-height:86vh;overflow:auto;padding:28px;position:relative;}
  .modal-close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:16px;color:var(--text-muted);}
  .intake-tabs{display:flex;gap:6px;margin-bottom:18px;border-bottom:1px solid var(--border);}
  .intake-tab{background:none;border:none;padding:10px 14px;font-size:13.5px;font-weight:700;color:var(--text-muted);border-bottom:2px solid transparent;}
  .intake-tab.active{color:var(--navy);border-bottom-color:var(--copper);}
  .intake-pane{display:none;}
  .intake-pane.active{display:block;}
  .dropzone{border:2px dashed var(--border);border-radius:6px;padding:26px;text-align:center;font-size:13px;color:var(--text-muted);}
  .rec-row{display:flex;align-items:center;gap:12px;background:var(--blue-soft);border-radius:6px;padding:16px;}
  .rec-dot{width:14px;height:14px;border-radius:50%;background:var(--critical);}

  /* toast */
  #toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--navy-ink);color:#fff;padding:12px 20px;border-radius:6px;font-size:13.5px;opacity:0;pointer-events:none;transition:all .25s;z-index:200;}
  #toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

  footer.site{background:var(--navy-ink);color:#B9C6D6;padding:36px 0;margin-top:20px;}
  footer.site .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:12.5px;}
  footer.site a{color:#B9C6D6;text-decoration:underline;}
  footer.site .fbrand{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;color:#fff;font-size:17px;margin-bottom:6px;}

  /* ---- brand mark (small fulcrum glyph) ---- */
  .mark{display:inline-flex;flex-shrink:0;}
  .mark svg{display:block;}

  /* ---- scroll-reveal ---- */
  .js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);}
  .reveal.in{opacity:1;transform:none;}
  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1;transform:none;transition:none;}
  }

  /* ---- hover polish ---- */
  .step-card, .benefit, .price-card, .stat-tile, .tl-phase, .card, .flow-step{transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;}
  .step-card:hover, .card:hover, .flow-step:hover, .tl-phase:hover{transform:translateY(-3px);border-color:var(--copper);box-shadow:0 10px 24px rgba(18,35,58,0.08);position:relative;z-index:1;}
  .price-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(18,35,58,0.10);position:relative;z-index:1;}
  .stat-tile:hover{transform:translateY(-2px);border-color:var(--copper);}
  .cta-btn{transition:background .2s ease, transform .15s ease, color .2s ease, border-color .2s ease;}
  .cta-btn:active{transform:scale(.97);}

  /* ---- section divider (animated draw-in line) ---- */
  .divider{display:flex;justify-content:center;padding:0;}
  .divider svg{overflow:visible;}
  .divider path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.16,.8,.3,1);vector-effect:non-scaling-stroke;}
  .divider.in path{stroke-dashoffset:0;}

  /* ---- hero system diagram (hub & spoke) ---- */
  .hero{position:relative;overflow:hidden;}
  .hero-graphic{position:absolute;inset:-6% -4%;z-index:0;opacity:0.92;pointer-events:none;}
  .hero-graphic .spoke-line{stroke:var(--navy);stroke-opacity:.28;stroke-width:1.4;fill:none;stroke-dasharray:1;stroke-dashoffset:1;animation:edgeIn 1s cubic-bezier(.16,.8,.3,1) forwards;}
  .hero-graphic .hub-ring{fill:none;stroke:var(--copper);stroke-width:1.4;opacity:0;transform-box:fill-box;transform-origin:center;animation:pulseRing 3.6s ease-out infinite;}
  .hero-graphic .hub-circle{fill:var(--navy-ink);opacity:0;transform-box:fill-box;transform-origin:center;animation:nodeIn .7s ease forwards;}
  .hero-graphic .hub-label{font-family:-apple-system,sans-serif;font-weight:700;letter-spacing:.03em;fill:#fff;text-anchor:middle;opacity:0;transform-box:fill-box;transform-origin:center;animation:nodeIn .7s ease forwards;animation-delay:.15s;}
  .hero-graphic .chip{opacity:0;transform-box:fill-box;transform-origin:center;animation:nodeIn .6s ease forwards;}
  .hero-graphic .chip rect{fill:rgba(255,255,255,0.96);stroke:var(--copper);stroke-width:1.1;}
  .hero-graphic .chip circle{fill:var(--copper);}
  .hero-graphic .chip text{font-family:-apple-system,sans-serif;font-weight:700;font-size:11px;letter-spacing:.01em;fill:var(--navy-ink);text-anchor:middle;}
  @keyframes nodeIn{from{opacity:0;transform:scale(.5);}to{opacity:1;transform:scale(1);}}
  @keyframes edgeIn{to{stroke-dashoffset:0;}}
  @keyframes pulseRing{0%{opacity:.5;transform:scale(.8);}80%{opacity:0;transform:scale(1.55);}100%{opacity:0;transform:scale(1.55);}}
  .hero .hero-grid{position:relative;z-index:1;}
  @media (prefers-reduced-motion: reduce){
    .hero-graphic .hub-ring, .hero-graphic .hub-circle, .hero-graphic .hub-label, .hero-graphic .spoke-line, .hero-graphic .chip{animation:none;opacity:1;stroke-dashoffset:0;}
    .hero-graphic .hub-ring{opacity:.4;}
    .js .hero h1 .word{opacity:1;transform:none;animation:none;}
  }

  /* ---- animated counters ---- */
  .cnt{font-variant-numeric:tabular-nums;}

  @media (max-width: 860px){
    .steps, .benefits-list, .pricing-grid, .stat-grid, .grid-2, .grid-3, .timeline, .roi-card, .hero .hero-grid{grid-template-columns:1fr;}
    .flow{flex-direction:column;}
    .flow-arrow{display:none;}
    nav.links{display:none;}
    .hero-preview{transform:none;margin-top:28px;}
    .hero-graphic{display:none;}
    .stat-grid.dark .stat-tile{padding:8px 0;border-right:none;}
  }


/* ==================================================================
   Multi-page site additions
   Everything above this line is the shared prototype stylesheet.
   Everything below adapts it to a real, static, multi-page build:
   anchor-based navigation, a mobile menu, real forms, legal pages.
   ================================================================== */

/* ---- the prototype hid non-active pages; every page is its own file now ---- */
.page{display:block;}

/* ---- accessibility: skip link + visible focus ---- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy-ink);color:#fff;padding:10px 16px;border-radius:0 0 6px 0;font-size:14px;font-weight:700;text-decoration:none;}
.skip-link:focus{left:0;}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{outline:3px solid var(--copper);outline-offset:2px;border-radius:3px;}

/* ---- nav is anchors now, not buttons ---- */
.brand{text-decoration:none;}
.brand .mark{color:var(--copper);display:inline-flex;align-self:center;}
nav.links a.navlink{background:none;border:none;border-bottom:2px solid transparent;padding:8px 12px;font-size:14px;color:var(--text-secondary);font-weight:600;text-decoration:none;white-space:nowrap;}
nav.links a.navlink:hover{color:var(--navy-ink);}
nav.links a.navlink.active{color:var(--navy-ink);border-bottom-color:var(--copper);}
nav.links .nav-cta{margin-left:10px;}

/* ---- CTA buttons render as anchors on a static site ---- */
a.cta-btn{display:inline-block;text-decoration:none;text-align:center;}
a.cta-btn:hover{color:#fff;}
a.cta-btn.outline{color:var(--navy-ink);}
a.cta-btn.outline:hover{color:#fff;}
.hp-foot a{background:none;border:none;padding:0;color:var(--copper-dark);font-weight:700;font-size:11.5px;text-decoration:none;}

/* ---- mobile menu ---- */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:38px;background:none;border:1px solid var(--border);border-radius:var(--radius);padding:0 9px;}
.nav-toggle span{display:block;height:2px;width:100%;background:var(--navy-ink);border-radius:2px;transition:transform .22s ease, opacity .18s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width: 860px){
  .nav-row{flex-wrap:wrap;}
  .nav-toggle{display:flex;}
  nav.links{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;margin-top:14px;border-top:1px solid var(--border);padding-top:8px;}
  nav.links.open{display:flex;}
  nav.links a.navlink{padding:12px 4px;border-bottom:1px solid var(--border);border-radius:0;}
  nav.links a.navlink.active{border-bottom-color:var(--border);color:var(--copper-dark);}
  nav.links .nav-cta{margin:14px 0 6px 0;width:100%;}
}

/* ---- headline sizing on interior pages (they lead with h1, not h2) ---- */
main h1{font-size:clamp(30px, 4.2vw, 42px);margin-bottom:.35em;}
.hero h1{font-size:clamp(34px, 6.2vw, 72px);}
.container.narrow{max-width:780px;}

/* ---- forms ---- */
.site-form .field label{display:block;}
.site-form .req{color:var(--copper-dark);}
.site-form input:focus, .site-form select:focus, .site-form textarea:focus{border-color:var(--copper);}
.site-form input[aria-invalid="true"], .site-form textarea[aria-invalid="true"]{border-color:var(--critical);background:var(--critical-bg);}
.form-fine{font-size:11.5px;color:var(--text-muted);margin:4px 0 14px 0;line-height:1.5;}
.form-error{font-size:12px;color:var(--critical);font-weight:600;margin-top:-9px;margin-bottom:11px;}
/* honeypot — must stay in the DOM and out of sight, so bots fill it and people don't */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.numbered-steps{margin:0;padding-left:20px;font-size:13.5px;color:var(--text-secondary);}
.numbered-steps li{margin-bottom:9px;}
.numbered-steps li:last-child{margin-bottom:0;}
.success-mark{color:var(--good);display:flex;justify-content:center;margin-bottom:18px;}

/* ---- legal pages ---- */
.legal{font-size:14.5px;color:var(--text-secondary);}
.legal h3{font-size:19px;margin:34px 0 10px 0;padding-top:20px;border-top:1px solid var(--grid);}
.legal h3:first-of-type{border-top:none;padding-top:0;}
.legal h3,.legal h4{font-size:15px;margin:20px 0 8px 0;color:var(--navy);}
.legal p{margin-bottom:.95em;}
.legal ul{padding-left:20px;margin-bottom:1.1em;}
.legal li{margin-bottom:.5em;}
.legal-meta{font-size:12.5px;color:var(--text-muted);border-bottom:1px solid var(--grid);padding-bottom:14px;margin-bottom:26px;}
.legal-callout{background:var(--copper-soft);border-left:3px solid var(--copper);border-radius:0 var(--radius) var(--radius) 0;padding:16px 20px;margin:0 0 30px 0;font-size:14px;color:var(--text-primary);}
.legal-table{margin:14px 0 22px 0;font-size:13.5px;}
.legal-table th{white-space:nowrap;}
.legal strong{color:var(--text-primary);}

/* ---- table overflow: wide tables scroll, the page never does ---- */
/* A scroll container that a keyboard cannot reach is a table with hidden
   columns. tabindex makes it focusable and arrow-scrollable; the outline
   only shows on :focus-visible, so mouse users see nothing new. */
table.plain{display:block;overflow-x:auto;max-width:100%;}
table.plain:focus-visible{outline:3px solid var(--copper);outline-offset:2px;}
@media (min-width: 861px){ table.plain{display:table;} }

/* ---- footer: four columns on a real site, not one row ---- */
footer.site .container{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px;align-items:start;}
footer.site .fcol h5,footer.site .fcol .foot-h{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#7E8FA6;margin:0 0 10px 0;font-family:-apple-system,sans-serif;}
footer.site .fcol a{display:block;margin-bottom:7px;text-decoration:none;}
footer.site .fcol a:hover{color:#fff;text-decoration:underline;}
footer.site .fsmall{margin-top:10px;color:#7E8FA6;font-size:11.5px;line-height:1.6;}
footer.site .fbottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.12);margin-top:28px;padding-top:18px;font-size:11.5px;color:#7E8FA6;}
@media (max-width: 860px){
  footer.site .container{grid-template-columns:1fr 1fr;}
  footer.site .fcol:first-child{grid-column:1 / -1;}
}

/* ---- print ---- */
@media print{
  header.site, footer.site, .nav-toggle, #toast, .hero-graphic, .marquee-wrap{display:none !important;}
  body{background:#fff;}
  .block{padding:0;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px;color:#666;}
}

/* hero chips were sized for a wider viewBox before the geometry fix */
.hero-graphic .chip text{font-size:10px;}

/* ---- horizontal padding fix ----
   In the prototype, `.hero{padding:72px 0}` and `section.block{padding:56px 0}`
   both out-specify `.container{padding:0 24px}`, so content sat flush against
   the screen edge on narrow viewports. Restoring it explicitly here rather than
   editing the shared block above keeps the prototype file untouched. */
.hero.container,
section.block.container{padding-left:24px;padding-right:24px;}
@media (max-width: 860px){
  .hero.container{padding-top:44px;padding-bottom:48px;}
  .hero .hero-grid{gap:28px;}
  .hero-preview{margin-top:12px;}
  section.block.container{padding-top:40px;padding-bottom:40px;}
}

/* ---- honest-status notice block ----
   Used where the site would otherwise imply the client portal already exists. */
.notice{background:var(--blue-soft);border-left:3px solid var(--blue);border-radius:0 var(--radius) var(--radius) 0;padding:16px 20px;margin:24px 0 4px 0;font-size:13.5px;line-height:1.6;color:var(--text-secondary);}
.notice strong{color:var(--navy-ink);}

/* ---- discreet client-login link in the primary nav ---- */
nav.links a.navlink.login-link{color:var(--copper-dark);}
nav.links a.navlink.login-link:hover{color:var(--copper);}
@media (min-width: 861px){
  nav.links a.navlink.login-link{
    margin-left:10px;padding-left:16px;border-left:1px solid var(--border);border-bottom:none;
  }
}

/* ==================================================================
   Hero product demo
   An auto-playing loop of the workspace behind the login. Built in CSS
   and a little JS rather than a video: sharp at any size, ~4KB instead
   of megabytes, no hosting, and it stays truthful because it is built
   from the same tokens as the real interface.
   ================================================================== */

.demo{
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 24px 54px rgba(18,35,58,.18);overflow:hidden;
  transform:rotate(.6deg);
}
.demo-chrome{
  display:flex;align-items:center;gap:6px;padding:9px 13px;
  background:var(--navy-ink);border-bottom:1px solid rgba(255,255,255,.08);
}
.demo-chrome .dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.22);}
.demo-url{
  margin-left:8px;flex:1;font-size:10.5px;color:#9FB2C9;letter-spacing:.02em;
  background:rgba(255,255,255,.07);border-radius:4px;padding:3px 9px;
}
.demo-url b{color:var(--amber);font-weight:600;}

.demo-tabs{display:flex;gap:1px;background:var(--surface);border-bottom:1px solid var(--border);padding:0 10px;}
.demo-tabs span,.demo-tabs [data-tab]{
  font-size:10.5px;font-weight:700;color:var(--text-muted);padding:8px 9px;
  border-bottom:2px solid transparent;transition:color .3s ease,border-color .3s ease;
}
.demo-tabs span.on,.demo-tabs [data-tab].on{color:var(--navy-ink);border-bottom-color:var(--copper);}

.demo-stage{position:relative;height:210px;background:var(--page);overflow:hidden;}
.demo-scene[data-scene="0"]{opacity:1;transform:none;}   /* no-JS fallback */
.js .demo-scene[data-scene="0"]{opacity:0;transform:translateY(6px);}
.js .demo-scene[data-scene="0"].on{opacity:1;transform:none;}
.demo-pause{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:rgba(255,255,255,.9);border:1px solid var(--border);border-radius:4px;
  font-size:10.5px;font-weight:700;color:var(--navy-ink);padding:3px 9px;cursor:pointer;}
.demo-pause:hover{background:#fff;}
.demo-chrome{position:relative;}
.demo-scene{
  position:absolute;inset:0;padding:13px 15px;opacity:0;transform:translateY(6px);
  transition:opacity .45s ease,transform .45s ease;pointer-events:none;
}
.demo-scene.on{opacity:1;transform:none;}

.demo-cap{
  padding:9px 15px;border-top:1px solid var(--border);background:var(--surface);
  font-size:11px;color:var(--text-secondary);min-height:34px;line-height:1.45;
  display:flex;align-items:center;gap:8px;
}
.demo-cap span{flex:1;}
.demo-cap b{color:var(--copper-dark);font-weight:700;}
.demo-cap::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--copper);
  flex:none;align-self:center;
}

/* --- scene: levers --- */
.d-row{
  display:grid;grid-template-columns:1fr 76px 54px;gap:8px;align-items:center;
  padding:7px 0;border-top:1px solid var(--grid);font-size:11px;
  transition:opacity .4s ease;
}
.d-row:first-child{border-top:none;}
.d-row .nm{font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.d-row .sp{font-size:9.5px;color:var(--text-muted);text-align:right;font-variant-numeric:tabular-nums;}
.d-row.dim{opacity:.5;}
.d-pill{
  font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  padding:2px 6px;border-radius:99px;text-align:center;white-space:nowrap;
  transition:background .4s ease,color .4s ease;
}
.d-pill.todo{background:#EEECE6;color:#55524B;}
.d-pill.prog{background:var(--warning-bg);color:var(--warning);}
.d-pill.done{background:var(--good-bg);color:var(--good);}
/* Blocked is its own state in the product, not a flavour of "not started":
   the timeline flags it because a predecessor has not landed. Showing it in
   the preview is honest about the seeded roadmap and advertises the one
   thing a spreadsheet plan cannot do. */
.d-pill.blocked{background:var(--critical-bg);color:var(--critical);}

.d-head{display:flex;align-items:baseline;gap:8px;margin-bottom:8px;}
.d-head .t{font-size:11.5px;font-weight:700;color:var(--navy-ink);}
.d-head .pct{
  margin-left:auto;font-size:11px;font-weight:700;color:var(--copper-dark);
  font-variant-numeric:tabular-nums;
}
.d-track{height:5px;background:var(--grid);border-radius:99px;overflow:hidden;margin-bottom:11px;}
.d-fill{height:100%;background:var(--grad-copper);border-radius:99px;width:29%;
        transition:width 1.1s cubic-bezier(.16,.8,.3,1);}

/* --- scene: timeline --- */
.d-gantt{display:flex;flex-direction:column;gap:7px;margin-top:4px;}
.d-grow{display:grid;grid-template-columns:96px 1fr;gap:9px;align-items:center;font-size:9.5px;}
.d-glabel{color:var(--text-secondary);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.d-gtrack{position:relative;height:15px;background:#FBFAF7;border-radius:3px;
          border:1px solid var(--grid);}
.d-gbar{
  position:absolute;top:1px;bottom:1px;border-radius:3px;
  transition:left .8s cubic-bezier(.16,.8,.3,1),background .5s ease,width .8s ease;
}
.d-grec{position:absolute;top:1px;bottom:1px;border:1.5px dashed var(--text-muted);
        border-radius:3px;opacity:0;transition:opacity .5s ease;}
.d-quarters{display:grid;grid-template-columns:96px 1fr;gap:9px;margin-bottom:3px;}
.d-qs{display:flex;}
.d-qs span{flex:1;font-size:8.5px;font-weight:700;color:var(--text-muted);
           text-align:center;letter-spacing:.06em;}

/* --- scene: architecture --- */
.d-layer{margin-bottom:7px;}
.d-lname{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
         color:var(--text-muted);margin-bottom:4px;}
.d-nodes{display:flex;gap:6px;}
.d-node{
  flex:1;border:1.5px solid var(--border);border-left-width:3px;border-left-color:var(--copper);
  border-radius:4px;padding:6px 8px;background:var(--surface);
  transition:background .5s ease,border-color .5s ease;
}
.d-node .n{font-size:9.5px;font-weight:700;color:var(--navy-ink);
           white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.d-node .s{font-size:8px;color:var(--text-muted);margin-top:1px;
           transition:color .5s ease;}
.d-node.live{background:var(--good-bg);border-color:var(--good);border-left-color:var(--good);}
.d-node.live .s{color:var(--good);font-weight:700;}

/* --- scene: kpis --- */
.d-kpi{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.d-kcard{border:1px solid var(--border);border-radius:5px;padding:10px 12px;background:var(--surface);}
.d-kname{font-size:9.5px;font-weight:700;color:var(--navy-ink);}
.d-knums{display:flex;gap:11px;margin:6px 0 2px;}
.d-knums div{flex:1;}
.d-klbl{font-size:7.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-weight:700;}
.d-kval{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--navy-ink);
        font-variant-numeric:tabular-nums;}
.d-kval.tgt{color:var(--copper-dark);}
.d-kval.now{color:var(--good);}
.d-spark{display:block;width:100%;height:38px;margin-top:4px;}
.d-spark path{
  fill:none;stroke:var(--navy);stroke-width:1.6;stroke-linejoin:round;
  stroke-dasharray:200;stroke-dashoffset:200;
}
.demo-scene.on .d-spark path{transition:stroke-dashoffset 1.2s ease .25s;stroke-dashoffset:0;}

.demo-foot{
  display:flex;align-items:center;gap:9px;padding:8px 15px;
  border-top:1px solid var(--border);background:var(--page);
}
.demo-progress{flex:1;display:flex;gap:4px;}
.demo-progress i{
  flex:1;height:2.5px;background:var(--grid);border-radius:99px;overflow:hidden;position:relative;
}
.demo-progress i.on::after{
  content:"";position:absolute;inset:0;background:var(--copper);
  transform-origin:left;animation:demoTick var(--demo-dur,4200ms) linear forwards;
}
@keyframes demoTick{from{transform:scaleX(0);}to{transform:scaleX(1);}}
.demo-foot .lbl{font-size:9.5px;color:var(--text-muted);font-weight:600;white-space:nowrap;}

@media (max-width:860px){
  .demo{transform:none;}
  .demo-stage{height:206px;}
  .demo-tabs span:nth-child(n+4),.demo-tabs [data-tab]:nth-child(n+4){display:none;}
}
@media (prefers-reduced-motion: reduce){
  .demo-scene,.d-fill,.d-gbar,.d-node,.d-pill{transition:none !important;}
  .demo-progress i.on::after{animation:none;transform:scaleX(1);}
  .demo-scene.on .d-spark path{transition:none;stroke-dashoffset:0;}
}

/* Card labels in the contact and get-started pages. Were <h4> under an <h1>,
   which read as a three-level skip; they are h2 now and styled to match. */
.card-h{font-size:15px;margin:0 0 6px;}

/* ---- The three steps, right after the hero -----------------------------
   Illustrated rather than iconed: the point is to show what "send us what
   you have" and "you run it" actually look like, which a generic glyph
   cannot do. The drawings are inline SVG so they inherit the palette and
   cost no requests. */
.flow-sec{padding-bottom:8px;}
.flow{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
      margin:34px 0 0;padding:0;counter-reset:flow;}
.flow-step{position:relative;background:var(--surface);border:1px solid var(--border);
           border-radius:var(--radius);padding:22px 22px 24px;box-shadow:0 1px 2px rgba(18,35,58,.05),0 8px 22px rgba(18,35,58,.06);}
.flow-n{position:absolute;top:-14px;left:22px;width:28px;height:28px;border-radius:50%;
        background:var(--navy-ink);color:#fff;font:800 13px/28px var(--font-display);
        text-align:center;letter-spacing:0;}
.flow-art{background:var(--page);border-radius:7px;padding:10px;margin-bottom:16px;}
.flow-art svg{display:block;width:100%;height:auto;}
.flow-step h3{font-size:16px;margin:0 0 8px;}
.flow-step p{font-size:13.5px;line-height:1.6;color:var(--text-secondary);margin:0;}
.flow-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:30px 0 0;}

/* The drawings share one palette so all three read as the same illustration. */
.fs-paper{fill:#fff;stroke:var(--border);stroke-width:1.4;}
.fs-line{stroke:var(--grid);stroke-width:3;stroke-linecap:round;fill:none;}
.fs-grid{stroke:var(--grid);stroke-width:1.2;fill:none;}
.fs-fill{fill:var(--copper-soft);}
.fs-tag{font:700 11px var(--font-body);fill:var(--copper-dark);}
.fs-mic{fill:none;stroke:var(--navy-ink);stroke-width:2.4;stroke-linecap:round;}
.fs-arrow{stroke:var(--copper);stroke-width:2.2;fill:none;stroke-linecap:round;}
.fs-arrowhead{fill:var(--copper);}
.fs-rank1{fill:var(--copper);}
.fs-rank2{fill:var(--amber);}
.fs-rank3{fill:var(--page);stroke:var(--border);stroke-width:1.2;}
.fs-stamp{fill:var(--good-bg);stroke:var(--good);stroke-width:2.2;stroke-linecap:round;
          stroke-linejoin:round;}
.fs-stamp path{fill:none;}
.fs-dot{fill:var(--grid);}
.fs-bar-done{fill:var(--good);} .fs-bar-prog{fill:var(--amber);}
.fs-bar-todo{fill:var(--page);stroke:var(--border);stroke-width:1.2;}
.fs-progress{stroke:var(--copper);stroke-width:5;stroke-linecap:round;fill:none;}

@media (max-width:900px){
  .flow{grid-template-columns:1fr;gap:30px;}
  .flow-step{padding-top:26px;}
}

/* Hero: the "or read the sample instead" line under the two buttons. The
   sample roadmap used to be a second button; it earned the space back as a
   sentence, because the live demo is the stronger of the two offers and two
   equal-weight outline buttons made neither look like the obvious next click. */
.hero-alt{font-size:13px;color:var(--text-secondary);margin:10px 0 0;line-height:1.6;}
.linkish{background:none;border:0;padding:0;font:inherit;color:var(--copper);
  cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.linkish:hover{color:var(--copper-bright,var(--copper));}
.flow-fine{font-size:12.5px;color:var(--text-secondary);text-align:center;
  max-width:560px;margin:12px auto 0;line-height:1.65;}

/* ------------------------------------------------------------------
 * Header fit.
 *
 * Adding "Live Demo" pushed the bar past 1080px and the Get Started button
 * wrapped onto a second line — at every desktop width, not just narrow ones,
 * because the row is capped at 1080px regardless of viewport. Rather than
 * drop a link, the bar gives back the space it was wasting: the tighter
 * padding recovers about 60px and the state tag beside the wordmark, which
 * is decoration rather than navigation, stands down under 1180px.
 *
 * Guarded by the desktop media query so the stacked mobile menu, which sets
 * its own padding at line 44, is untouched.
 * ------------------------------------------------------------------ */
@media (min-width:861px){
  nav.links{flex-wrap:nowrap;}
  nav.links a.navlink{padding:8px 8px;}
  nav.links a.cta-btn.nav-cta{margin-left:6px;}
}
@media (max-width:1180px){
  .brand .tag{display:none;}
}
/* The band just above the hamburger breakpoint is the tightest the full bar
   ever gets — at 870px it overflowed by three pixels, which is a horizontal
   scrollbar on the whole document for the sake of nothing. One step down in
   size clears it with room to spare. */
@media (min-width:861px) and (max-width:1010px){
  nav.links a.navlink{font-size:13px;padding:8px 6px;}
  nav.links a.cta-btn.nav-cta{font-size:13px;padding:8px 12px;margin-left:4px;}
}

/* ---- hero preview: Overview scene ------------------------------------
   The app's first tab, and the preview did not have it at all. Four tiles
   in a 2x2 so the numbers stay legible at the size this renders. */
.d-ovgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px;}
.d-ovcard{background:var(--page);border:1px solid var(--border);border-radius:5px;padding:7px 9px;}
.d-ovv{font-size:15px;font-weight:800;color:var(--navy-ink);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;line-height:1.15;margin-top:1px;}
.d-ovv.good{color:var(--good);} .d-ovv.warn{color:var(--warning);}
.d-ovs{font-size:8px;color:var(--text-muted);margin-top:1px;}
.d-ovalert{display:flex;align-items:center;gap:7px;margin-top:7px;padding:6px 9px;
  background:var(--critical-bg);border-radius:5px;font-size:9px;color:var(--critical);
  font-weight:600;}

/* ---- hero preview: the sequencing conflict on the Timeline -----------
   Collapsed to one line, which is how it behaves in the product: the
   warning is always available and never in the way. */
.d-conflict{display:flex;align-items:baseline;gap:7px;margin-top:8px;padding:6px 9px;
  background:var(--warning-bg);border-radius:5px;}
.d-cwarn{font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  color:var(--warning);white-space:nowrap;}
.d-ctext{font-size:9px;color:var(--text-secondary);line-height:1.35;}

/* ---- Get Started: the plan picker beside the explanation ---- */
.gs-plan{display:flex;justify-content:space-between;align-items:center;gap:12px;
  border:1px solid var(--border);border-radius:7px;padding:11px 13px;margin-bottom:9px;
  font-size:13.5px;}
.gs-plan.featured{border-color:var(--copper);background:var(--surface);}
.gs-plan .muted{font-size:11.5px;}
/* The rows are anchors now — a plan picker you can actually pick from. The
   arrow is generated so the markup stays three tidy links. */
a.gs-plan{text-decoration:none;color:inherit;
  transition:border-color .15s ease,background .15s ease,transform .15s ease;}
a.gs-plan:hover,a.gs-plan:focus-visible{border-color:var(--copper);
  background:var(--copper-soft);transform:translateX(2px);}
a.gs-plan:focus-visible{outline:2px solid var(--copper);outline-offset:2px;}
a.gs-plan .gs-price::after{content:" \203A";color:var(--copper-dark);font-weight:700;}
@media (prefers-reduced-motion:reduce){a.gs-plan{transition:none;}
  a.gs-plan:hover,a.gs-plan:focus-visible{transform:none;}}
.gs-price{text-align:right;font-weight:800;color:var(--navy-ink);white-space:nowrap;
  font-variant-numeric:tabular-nums;}

/* --- FAQ ------------------------------------------------------------------
 * A definition list in everything but markup. No accordions: the questions
 * are the reason someone opened the page, and hiding nine of ten answers
 * behind a click to save vertical space trades the thing they came for
 * against a scrollbar. It also means the page is searchable with ctrl-F and
 * readable with JavaScript off.
 */
.faqlist {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 30px;
  border-top: 1px solid var(--border);
}
.faqitem {
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}
.faqitem h2 {
  font-size: 16px;
  line-height: 1.35;
  margin: 0 0 8px;
  text-wrap: balance;
}
.faqitem p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
  max-width: 62ch;
}
@media (max-width: 720px) {
  .faqitem { padding: 18px 0; }
  .faqitem h2 { font-size: 15px; }
}