/* ============================================================================
   CA Automator — house style: "Soft Sky & Charcoal"
   Ground: cool off-white / soft sky-blue-gray. Ink: charcoal.
   Indigo-blue carries every action — precise and quietly confident.
   Coral-red is reserved for overdue and unverified — nothing decorative.
   Amber is reserved for the autosave heartbeat — nothing else.
   ========================================================================= */

:root{
  --ground:#F6F7FA;
  --panel:#FFFFFF;
  --panel-2:#EEF1F6;
  --ink:#1E2430;
  --ink-60:#565E6B;
  --ink-30:#697180;
  --rule:#E1E5EC;
  --teal:#3E63DD;
  --teal-dk:#2F4EB8;
  --teal-10:#E8ECFB;
  --crimson:#DC3A3A;
  --crimson-10:#FBE9E9;
  --marigold:#E2A73B;
  --marigold-10:#FBF1DE;

  --display:system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SF Mono","Menlo","DejaVu Sans Mono",ui-monospace,monospace;

  --r:8px;
  --shadow:0 1px 2px rgba(30,36,48,.05), 0 10px 26px rgba(30,36,48,.07);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden; max-width:100vw;
}
b,strong{font-weight:600}
button,input,select,textarea{font:inherit;color:inherit}

/* ───────────────────────────────────────────────────────── gate */
.gate{min-height:100%;display:grid;place-items:center;padding:24px;
  background:radial-gradient(120% 90% at 50% 0%,#FFFFFF 0%,var(--ground) 60%)}
.gate[hidden]{display:none}
.gate-card{width:min(400px,100%);background:var(--panel);border:1px solid var(--rule);
  border-radius:var(--r);padding:34px 30px;box-shadow:var(--shadow)}
.gate-mark{width:40px;height:40px;display:grid;place-items:center;background:var(--ink);
  color:var(--ground);font-family:var(--display);font-size:15px;letter-spacing:.08em;border-radius:var(--r)}
.gate-card h1{font-family:var(--display);font-size:24px;letter-spacing:-.01em;margin:18px 0 6px;font-weight:500}
.gate-sub{margin:0 0 22px;color:var(--ink-60);font-size:14px}
.gate-card label{display:block;font-family:var(--display);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-60);margin-bottom:14px}
.gate-card input{display:block;width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--rule);
  border-radius:var(--r);background:#fff;font-family:var(--body);font-size:15px;letter-spacing:0;text-transform:none}
.gate-msg{min-height:20px;margin:12px 0 0;font-size:13px;color:var(--crimson)}

/* ───────────────────────────────────────────────────────── topbar */
.topbar{display:flex;align-items:center;gap:26px;padding:0 20px;height:78px;
  background:var(--ink);color:var(--ground);position:sticky;top:0;z-index:20}
.rail-toggle{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:var(--r);
  border:1px solid rgba(246,247,250,.2);background:rgba(246,247,250,.08);color:var(--ground);cursor:pointer}
.rail-toggle:hover{background:rgba(246,247,250,.16)}
.rail-toggle:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.rail-toggle[aria-expanded="true"]{background:var(--teal);border-color:var(--teal);color:#fff}
.rail-toggle[aria-expanded="true"]:hover{background:var(--teal-dk)}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-mark{width:32px;height:32px;object-fit:contain;display:block;flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-text b{font-family:var(--display);font-size:14px;font-weight:500;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:190px}
.brand-text i{font-style:normal;font-family:var(--display);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(246,247,250,.55)}

.dial-wrap{display:flex;align-items:center;gap:12px;padding-left:22px;border-left:1px solid rgba(246,247,250,.15)}
.dial{width:104px;height:62px;overflow:visible}
.dial-track{fill:none;stroke:rgba(246,247,250,.18);stroke-width:2}
.dial-day{fill:none;stroke:var(--marigold);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:1 999;transition:stroke-dasharray .6s ease}
.dial-hand{stroke:var(--ground);stroke-width:1.5;stroke-linecap:round;opacity:.75;
  transform-origin:66px 70px;transition:transform .6s ease}
.dial-hub{fill:var(--ground)}
.dial-tick{fill:rgba(246,247,250,.45);font-family:var(--mono);font-size:7px}
.pip{fill:var(--marigold)}
.pip-queued{fill:none;stroke:var(--marigold);stroke-width:1.2}
.dial-read{line-height:1.1}
.dial-read b{display:block;font-family:var(--mono);font-size:19px;color:var(--marigold)}
.dial-read i{font-style:normal;font-family:var(--display);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(246,247,250,.5)}
@media (prefers-reduced-motion:reduce){.dial-day,.dial-hand{transition:none}}

.status-strip{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:99px;
  background:rgba(246,247,250,.09);font-family:var(--mono);font-size:11px;color:rgba(246,247,250,.85);white-space:nowrap}
.chip .dot{width:7px;height:7px;border-radius:50%;background:#22A06B;flex:none}
.chip.off .dot{background:var(--marigold)}
.chip-warn{background:rgba(220,58,58,.28);color:#FBD9D9}

.notif-wrap{position:relative}
.notif-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;
  padding:0 4px;margin-left:6px;border-radius:99px;background:var(--crimson);color:#fff;
  font-family:var(--mono);font-size:10px;line-height:1}
.notif-panel{position:absolute;top:calc(100% + 8px);right:0;width:340px;max-height:420px;overflow-y:auto;
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);box-shadow:var(--shadow);z-index:40}
.notif-panel .notif-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;
  border-bottom:1px solid var(--rule)}
.notif-panel .notif-head b{font-family:var(--display);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.notif-item{padding:10px 14px;border-bottom:1px solid var(--rule);cursor:pointer}
.notif-item:last-child{border-bottom:none}
.notif-item.unread{background:var(--teal-10)}
.notif-item b{display:block;font-size:12.5px;color:var(--ink)}
.notif-item span{display:block;font-size:11.5px;color:var(--ink-60);margin-top:2px}
.notif-empty{padding:18px 14px;color:var(--ink-60);font-size:12.5px;text-align:center}

/* ───────────────────────────────────────────────────────── shell */
/* Flex, not grid, on purpose: the rail collapsing to width:0 is what
   actually animates (see body.rail-closed below) — the stage next to it
   just grows to fill the freed space as a normal flex consequence, so
   there's nothing to keep in sync by hand and no risk of the "grid track
   resizes smoothly while the rail's content vanishes instantly" flash a
   grid-template-columns transition + display:none combination causes. */
.shell{display:flex;align-items:flex-start;min-height:calc(100vh - 78px)}
.rail{background:var(--panel);border-right:1px solid var(--rule);padding:18px 0;
  position:sticky;top:78px;height:calc(100vh - 78px);overflow-y:auto;overflow-x:hidden;
  flex:none;width:210px;box-sizing:border-box;
  transition:width .2s ease,opacity .15s ease,border-color .2s ease,visibility 0s linear 0s}
.rail-group{display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;
  font-family:var(--display);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-30);padding:16px 20px 7px}
.rail-group:hover{color:var(--ink-60)}
.rail-group::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-left:auto;transition:transform .15s ease;flex:none}
.rail-group.collapsed::after{transform:rotate(-45deg)}
.rail-group-items{display:flex;flex-direction:column}
.rail-group-items.collapsed{display:none}
.rail a{display:flex;align-items:center;gap:11px;padding:8px 20px;text-decoration:none;color:var(--ink);
  font-size:14px;border-left:2px solid transparent;cursor:pointer}
.rail a:hover{background:var(--panel-2)}
.rail a.on{background:var(--teal-10);border-left-color:var(--teal);color:var(--teal-dk);font-weight:600}
.rail a code{font-family:var(--mono);font-size:10px;color:var(--ink-30);width:22px;flex:none}
.rail a.on code{color:var(--teal)}
.rail a .tally{margin-left:auto;font-family:var(--mono);font-size:10px;background:var(--crimson);
  color:#fff;border-radius:99px;padding:1px 6px}

/* rail-wide collapse (desktop: shrink the sidebar to nothing, stage takes
   the full width) and off-canvas drawer (tablet/mobile: hidden by default,
   opens as an overlay over the content instead of squeezing it) — one
   toggle button drives both, CSS decides which behaviour applies at the
   current width. visibility is delayed on the way out (so the width/opacity
   animation finishes before the rail actually leaves the tab order) but
   instant on the way in (so it's usable the moment it starts opening). */
.rail-backdrop{display:none}
@media (min-width:821px){
  /* Scoped to desktop only — below this width the rail is a fixed-position
     off-canvas drawer with its own independent transform-based open/close
     (see the max-width:820px block), and must never also pick up a
     width:0 from here mid-slide. */
  body.rail-closed .rail{width:0;min-width:0;padding:0;opacity:0;border-color:transparent;
    visibility:hidden;transition:width .2s ease,opacity .15s ease,border-color .2s ease,visibility 0s linear .2s}
}

.stage{flex:1;min-width:0;padding:26px 30px 70px;max-width:1180px;margin:0 auto}

/* ───────────────────────────────────────────────────────── blocks */
.banner{background:var(--crimson-10);border:1px solid #F0C6C6;border-left:3px solid var(--crimson);
  padding:12px 16px;border-radius:var(--r);margin-bottom:22px;font-size:14px}
.banner b{color:var(--crimson)}
.banner[hidden]{display:none}

.msg{padding:9px 14px;border-radius:var(--r);font-size:13.5px;border:1px solid var(--rule);margin-bottom:14px}
.msg.good{background:var(--teal-10);border-color:#C7D1F5;color:var(--teal-dk)}
.msg.bad{background:var(--crimson-10);border-color:#F0C6C6;color:var(--crimson)}

.subcard{border:1px solid var(--rule);border-radius:var(--r);padding:16px 18px;margin-bottom:14px;background:var(--panel-2)}

.page-head{display:flex;align-items:flex-end;gap:18px;margin-bottom:22px;flex-wrap:wrap}
.page-head h2{font-family:var(--display);font-size:25px;font-weight:500;letter-spacing:-.01em;margin:0}
.page-head p{margin:4px 0 0;color:var(--ink-60);font-size:14px;max-width:62ch}
.page-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

.card{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);
  padding:20px 22px;margin-bottom:18px;box-shadow:var(--shadow)}
.card > h3{font-family:var(--display);font-size:12px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-60);margin:0 0 16px;font-weight:500}
.card-note{color:var(--ink-60);font-size:13px;margin:-8px 0 16px}

.grid{display:grid;gap:14px}
.grid.c2{grid-template-columns:repeat(2,1fr)}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.grid.c4{grid-template-columns:repeat(4,1fr)}
.grid .span-all{grid-column:1 / -1}
.grid h4.span-all{font-family:var(--display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-60);margin:10px 0 -2px;font-weight:500}
.grid h4.span-all:first-child{margin-top:0}
@media (max-width:900px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}}

.card > summary{font-family:var(--display);font-size:14px;font-weight:500;color:var(--ink);
  cursor:pointer;list-style:revert}
.card > summary .hint{font-family:var(--body);font-weight:400;font-size:13px;color:var(--ink-60)}
.card[open] > summary{margin-bottom:6px}

.field{display:flex;flex-direction:column;gap:5px}
.field label{font-family:var(--display);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-60)}
.field input,.field select,.field textarea{padding:8px 10px;border:1px solid var(--rule);border-radius:var(--r);
  background:#fff;font-size:14px}
.field input[type=number]{font-family:var(--mono);text-align:right}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--teal);outline-offset:-1px;border-color:var(--teal)}
.field .hint{font-size:11px;color:var(--ink-30)}
.bs-inline-hint{font-size:10px;color:var(--ink-30);margin-left:6px;white-space:nowrap;font-family:var(--mono)}
.field .bs-inline-hint{margin-left:0}
.check{display:flex;align-items:center;gap:8px;font-size:14px}
.check input{width:16px;height:16px}

.btn{border:1px solid var(--rule);background:var(--panel);color:var(--ink);padding:8px 15px;
  border-radius:var(--r);cursor:pointer;font-family:var(--display);font-size:13px;letter-spacing:.01em}
.btn:hover{background:var(--panel-2)}
.btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.btn-primary{background:var(--teal);border-color:var(--teal);color:#fff}
.btn-primary:hover{background:var(--teal-dk)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-60);text-decoration:underline}
.btn-small{padding:5px 11px;font-size:12px}
.btn-wide{width:100%;margin-bottom:9px}
.btn-danger{border-color:#F0C6C6;color:var(--crimson);background:var(--crimson-10)}
.topbar .btn{background:rgba(246,247,250,.1);border-color:rgba(246,247,250,.2);color:var(--ground)}
.topbar .btn:hover{background:rgba(246,247,250,.2)}
.topbar .btn-ghost{background:none;border:none;color:rgba(246,247,250,.6)}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th{font-family:var(--display);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  text-align:left;color:var(--ink-60);padding:8px 10px;border-bottom:1px solid var(--rule);white-space:nowrap}
td{padding:7px 10px;border-bottom:1px solid var(--rule)}
tbody tr:hover{background:var(--panel-2)}
td.num,th.num{text-align:right;font-family:var(--mono);font-size:12.5px}
tr.total td{font-weight:600;border-top:1px solid var(--ink);border-bottom:2px solid var(--ink);background:var(--panel-2)}
td input{width:100%;border:1px solid transparent;background:transparent;padding:4px 6px;border-radius:var(--r)}
td input:hover{border-color:var(--rule)}
td input:focus{border-color:var(--teal);background:#fff;outline:none}
td input[type=number]{font-family:var(--mono);text-align:right}
.table-wrap{overflow-x:auto;margin:0 -22px;padding:0 22px}

.kpi{display:flex;flex-direction:column;gap:3px;padding:14px 16px;background:var(--panel-2);border-radius:var(--r)}
.kpi span{font-family:var(--display);font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-60)}
.kpi b{font-family:var(--mono);font-size:20px;font-weight:500}
.kpi.accent b{color:var(--teal)}
.kpi.alert b{color:var(--crimson)}

.bar-row{display:grid;grid-template-columns:140px 1fr 40px;align-items:center;gap:10px;padding:5px 0}
.bar-row .bar-label{font-size:12px;color:var(--ink-60);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{height:10px;background:var(--panel-2);border-radius:99px;overflow:hidden}
.bar-fill{height:100%;background:var(--teal);border-radius:99px;transition:width .3s ease}
.bar-row .bar-count{font-family:var(--mono);font-size:12px;text-align:right;color:var(--ink)}

.tag{display:inline-block;font-family:var(--mono);font-size:10px;padding:2px 7px;border-radius:99px;
  background:var(--panel-2);color:var(--ink-60);border:1px solid var(--rule)}
.tag-red{background:var(--crimson-10);color:var(--crimson);border-color:#F0C6C6}
.tag-amber{background:var(--marigold-10);color:#8A5D12;border-color:#E9D3A6}
.tag-green{background:var(--teal-10);color:var(--teal-dk);border-color:#C7D1F5}
.mono-tag{font-family:var(--mono);font-size:11px;color:var(--ink-60);background:var(--panel-2);
  padding:2px 6px;border-radius:var(--r)}

.empty{padding:40px 24px;text-align:center;color:var(--ink-60);border:1px dashed var(--rule);border-radius:var(--r)}
.empty b{display:block;font-family:var(--display);font-size:16px;color:var(--ink);margin-bottom:6px;font-weight:500}

.chatbot-transcript{max-height:320px;overflow-y:auto;border:1px solid var(--rule);border-radius:var(--r);padding:10px}
.chatbot-msg{padding:6px 0;font-size:13px;line-height:1.5}
.chatbot-msg b{display:block;font-family:var(--display);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-30);margin-bottom:2px}
.chatbot-msg-user b{color:var(--teal)}
.chatbot-msg span{white-space:pre-wrap;color:var(--ink)}

.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.media-tile{border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.media-tile img{width:100%;height:100px;object-fit:cover;display:block;background:var(--panel-2)}
.media-tile-name{font-size:11px;color:var(--ink-60);padding:6px 8px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.media-tile-actions{display:flex;gap:6px;padding:6px 8px 8px;flex-wrap:wrap}
.media-tile-actions .btn{flex:1;font-size:11px;padding:5px 8px}

.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:var(--ink);color:var(--ground);
  padding:11px 20px;border-radius:99px;font-size:13.5px;z-index:60;box-shadow:var(--shadow)}
.toast[hidden]{display:none}
.toast.bad{background:var(--crimson)}

.rowlist{display:flex;flex-direction:column;gap:0}
.rowlist .rl{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--rule)}
.rowlist .rl:last-child{border-bottom:none}
.rl-main{flex:1;min-width:0}
.rl-main b{display:block;font-size:14.5px}
.rl-main small{color:var(--ink-60);font-size:12.5px}

/* tablet: narrower rail, .grid.c4 gets a 2-column step before mobile
   collapses everything to one column (was a single jump straight to 1fr) */
@media (max-width:1024px){
  .rail{width:180px}
  .grid.c4{grid-template-columns:repeat(2,1fr)}
  .stage{padding:22px 20px 60px}
}

/* mobile/small tablet: the rail becomes an off-canvas drawer — hidden by
   default (never a squeezed sidebar or a 30-item horizontal scroll strip),
   opened over the content via the topbar's toggle button, closed by the
   backdrop, the × equivalent (toggle again), or picking a link. */
@media (max-width:820px){
  .shell{position:relative}
  .rail{position:fixed;top:0;left:0;bottom:0;width:min(78vw,300px);height:100vh;z-index:50;
    opacity:1;visibility:visible;border-color:var(--rule);padding:18px 0;padding-top:78px;
    transform:translateX(-100%);transition:transform .22s ease;box-shadow:2px 0 24px rgba(0,0,0,.18)}
  body.rail-open .rail{transform:translateX(0)}
  .rail-backdrop{display:block;position:fixed;inset:0;background:rgba(20,24,30,.45);z-index:45;
    opacity:0;pointer-events:none;transition:opacity .22s ease}
  body.rail-open .rail-backdrop{opacity:1;pointer-events:auto}
  body.rail-open{overflow:hidden}
  .rail a{padding:10px 20px}
  .topbar{height:auto;flex-wrap:wrap;padding:12px 14px;gap:12px}
  .brand-text b{max-width:120px}
  .dial-wrap{display:none}
  .stage{padding:18px 16px 60px}
  .table-wrap{margin:0 -16px;padding:0 16px}
  .grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}
  .page-head{flex-direction:column;align-items:flex-start}
  .page-actions{margin-left:0;width:100%}
  .notif-panel{position:fixed;top:70px;right:10px;left:10px;width:auto}
  .bar-row{grid-template-columns:1fr;gap:2px}
  .bar-row .bar-count{text-align:left}
}
@media (max-width:480px){
  .stage{padding:14px 12px 50px}
  .card{padding:16px 14px}
  .btn{padding:8px 12px;font-size:12.5px}
  .status-strip{justify-content:flex-start}
}
@media print{
  .topbar,.rail,.page-actions,.toast{display:none}
  body{background:#fff}
  .card{box-shadow:none;border-color:#999;break-inside:avoid}
}

/* ══════════════════════════════════════════════════════ landing page
   "The Intelligence Layer for Modern CA Practice" — scoped entirely under
   #gate, a self-contained deep-navy/charcoal palette with a restrained
   cyan/blue accent, for the public site. Everything inside #app (the
   signed-in tool) keeps the "Soft Sky & Charcoal" house theme untouched;
   the two never share a variable or a bare class rule. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

#gate{
  /* Light theme, matching the authenticated app's own palette (:root above)
     so the marketing site and the product read as one system instead of a
     jarring dark-to-light handoff at sign-in. */
  --g-bg:#F6F7FA; --g-bg-2:#FFFFFF; --g-bg-3:#FFFFFF; --g-bg-4:#EEF1F6;
  --g-rule:#E1E5EC; --g-rule-soft:#EDF0F5;
  --g-ink:#1E2430; --g-ink-60:#565E6B; --g-ink-30:#697180;
  --g-accent:#3E63DD; --g-accent-dk:#2F4EB8; --g-accent-10:rgba(62,99,221,.08); --g-accent-20:rgba(62,99,221,.16);
  --g-on-accent:#FFFFFF;
  --g-blue:#3E63DD; --g-blue-10:rgba(62,99,221,.10);
  --g-green:#1F9D6B; --g-green-10:rgba(31,157,107,.10);
  --g-red:#DC3A3A; --g-red-10:rgba(220,58,58,.10);
  --g-amber:#B9852A; --g-amber-10:rgba(232,177,74,.16);
  --g-gold:var(--g-accent); --g-gold-dk:var(--g-accent-dk); --g-gold-10:var(--g-accent-10); /* legacy alias, appt/auth partials still reference these */

  /* Elevation — layered rather than one flat blur. A single large-radius
     shadow is what reads as "template"; real depth is a tight contact
     shadow plus a wide ambient one, both very low alpha. */
  --sh-1:0 1px 2px rgba(24,32,48,.05), 0 2px 8px rgba(24,32,48,.04);
  --sh-2:0 1px 2px rgba(24,32,48,.06), 0 8px 20px -6px rgba(24,32,48,.09);
  --sh-3:0 1px 3px rgba(24,32,48,.07), 0 18px 40px -12px rgba(24,32,48,.16);
  --sh-4:0 2px 4px rgba(24,32,48,.06), 0 32px 64px -20px rgba(24,32,48,.22);
  --sh-accent:0 10px 30px -8px rgba(62,99,221,.28);
  /* Motion — one easing vocabulary, used everywhere, so transitions feel
     like one system instead of a dozen ad hoc curves. */
  /* Text on a tint of its own hue: the pure hue only reaches ~3:1 against
     its own 8-10% wash, so badges and chips use these darker inks instead.
     Each is >=4.5:1 on its tint, checked rather than eyeballed. */
  --g-accent-ink:#2F4EB8; --g-green-ink:#157A52; --g-amber-ink:#8A6216; --g-red-ink:#A32828;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
  --t-fast:.18s; --t-mid:.32s; --t-slow:.6s;
}
.gate{min-height:100%;display:block;padding:0;background:var(--g-bg);color:var(--g-ink)}
.gate[hidden]{display:none}
#gate *{box-sizing:border-box}
#gate section{position:relative}

/* ── shared section scaffolding, reused by every story section below ── */
#gate .section-inner{max-width:1320px;margin:0 auto;padding:88px 32px}
#gate .section-inner.tight{padding-top:64px;padding-bottom:64px}
#gate .section-head{max-width:680px;margin:0 0 44px}
#gate .section-head.center{margin-left:auto;margin-right:auto;text-align:center}
#gate .section-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--g-accent);margin-bottom:14px}
#gate .section-eyebrow::before{content:'';width:16px;height:1px;background:var(--g-accent)}
#gate .section-title{font-family:var(--display);font-size:clamp(24px,3vw,34px);font-weight:500;letter-spacing:-.015em;
  line-height:1.2;margin:0 0 14px;color:var(--g-ink)}
#gate .section-sub{font-size:15.5px;line-height:1.65;color:var(--g-ink-60);max-width:62ch;margin:0}
#gate .section-head.center .section-sub{margin-left:auto;margin-right:auto}
#gate .alt-surface{background:var(--g-bg-2);border-top:1px solid var(--g-rule-soft);border-bottom:1px solid var(--g-rule-soft)}

/* scroll-reveal primitive — JS toggles .in on IntersectionObserver; CSS-only
   fallback (no JS) leaves everything at full opacity via the noscript rule */
#gate .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
#gate .reveal.in{opacity:1;transform:none}
/* stagger — children rise in sequence rather than as one block. Delays come
   from nth-child rather than a JS-assigned index, so a grid populated
   asynchronously (services, team, modules all render after a fetch) still
   staggers correctly without anything having to re-number it afterwards. */
#gate .reveal-stagger > *{opacity:0;transform:translateY(16px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
#gate .reveal-stagger.in > *{opacity:1;transform:none}
#gate .reveal-stagger.in > :nth-child(1){transition-delay:0ms}
#gate .reveal-stagger.in > :nth-child(2){transition-delay:65ms}
#gate .reveal-stagger.in > :nth-child(3){transition-delay:130ms}
#gate .reveal-stagger.in > :nth-child(4){transition-delay:195ms}
#gate .reveal-stagger.in > :nth-child(5){transition-delay:260ms}
#gate .reveal-stagger.in > :nth-child(6){transition-delay:325ms}
#gate .reveal-stagger.in > :nth-child(7){transition-delay:390ms}
#gate .reveal-stagger.in > :nth-child(8){transition-delay:455ms}
/* anything past the eighth lands together — a longer cascade starts to feel
   slow rather than considered */
#gate .reveal-stagger.in > :nth-child(n+9){transition-delay:500ms}
@media (prefers-reduced-motion:reduce){
  #gate .reveal,#gate .reveal-stagger > *{opacity:1;transform:none;transition:none}
}
noscript #gate .reveal{opacity:1;transform:none}

/* ── surface elevation ──
   One hover behaviour for every card on the page, so the whole site
   responds with the same physics: a small lift, the ambient shadow
   deepening, and a hairline accent rule drawing across the top edge.
   Applied by class rather than to a bare selector so nothing inside #app
   is touched. */
#gate .notsw-card,#gate .service-card,#gate .team-card,#gate .mod-card,#gate .whofor-card,
#gate .juris-card,#gate .insight-card{position:relative;
  transition:transform var(--t-mid) var(--ease-out),box-shadow var(--t-mid) ease,border-color var(--t-mid) ease}
#gate .notsw-card,#gate .service-card,#gate .team-card{box-shadow:var(--sh-1)}
#gate .notsw-card:hover,#gate .service-card:hover,#gate .team-card:hover{box-shadow:var(--sh-3)}
/* the drawn-in top rule — 0→100% width on hover, accent coloured */
#gate .notsw-card::after,#gate .service-card::after,#gate .team-card::after{content:'';position:absolute;
  left:0;top:0;height:2px;width:0;background:var(--g-accent);border-radius:2px 2px 0 0;
  transition:width var(--t-slow) var(--ease-out)}
#gate .notsw-card:hover::after,#gate .service-card:hover::after,#gate .team-card:hover::after{width:100%}
@media (prefers-reduced-motion:reduce){
  #gate .notsw-card::after,#gate .service-card::after,#gate .team-card::after{transition:none}
}

/* ── nav: transparent over the hero, solid once scrolled ── */
#gate .lnav{display:flex;align-items:center;gap:22px;padding:20px 32px;position:sticky;top:0;z-index:40;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .25s ease,border-color .25s ease,padding .25s ease}
#gate .lnav.scrolled{background:rgba(255,255,255,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--g-rule);padding:14px 32px}
#gate .lnav-brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:15px;font-weight:500;color:var(--g-ink)}
#gate .lnav-brand .brand-mark{width:34px;height:34px}
#gate .lnav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--g-rule);border-radius:8px;
  width:38px;height:38px;align-items:center;justify-content:center;color:var(--g-ink);cursor:pointer;flex:0 0 auto}
#gate .lnav-links{display:flex;align-items:center;gap:22px;margin-left:12px;flex:1}
#gate .lnav-links a{position:relative;color:var(--g-ink-60);text-decoration:none;font-size:13.5px;transition:color .15s ease;padding:4px 0;white-space:nowrap}
#gate .lnav-links a::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--g-accent);
  transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
#gate .lnav-links a:hover{color:var(--g-ink)}
#gate .lnav-links a:hover::after,#gate .lnav-links a.on::after{transform:scaleX(1)}
#gate .lnav-links a.on{color:var(--g-ink)}
#gate .lnav-actions{display:flex;gap:10px;flex:0 0 auto}
#gate .lnav-actions-mobile{display:none}
/* Eight nav links plus two action buttons need roughly 1080px to sit on one
   line. Below that the row was overflowing the viewport rather than
   wrapping, so the collapse point is set by what actually fits, not by a
   round "tablet" number. */
@media (max-width:1080px){
  #gate .lnav-toggle{display:flex}
  #gate .lnav-actions-desktop{display:none}
  #gate .lnav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--g-bg-3,#fff);border-bottom:1px solid var(--g-rule);padding:8px 24px 20px;
    box-shadow:0 16px 32px rgba(20,24,32,.1);max-height:calc(100vh - 64px);overflow-y:auto}
  #gate .lnav-links.open{display:flex}
  #gate .lnav-links a{padding:14px 0;border-bottom:1px solid var(--g-rule)}
  #gate .lnav-links a::after{display:none}
  #gate .lnav-actions-mobile{display:flex;flex-direction:column;gap:10px;margin-top:16px}
  #gate .lnav-actions-mobile .btn{width:100%}
}

#gate .btn{border-radius:8px;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease;font-family:var(--display)}
#gate .btn-ghost{background:transparent;border:1px solid var(--g-rule);color:var(--g-ink-60)}
#gate .btn-ghost:hover{border-color:var(--g-ink-30);color:var(--g-ink)}
#gate .btn-primary{background:var(--g-accent);border-color:var(--g-accent);color:var(--g-on-accent);font-weight:600}
#gate .btn-primary:hover{background:var(--g-accent-dk);transform:translateY(-1px);box-shadow:0 8px 22px rgba(62,99,221,.22)}
#gate .btn-outline{background:transparent;border:1px solid var(--g-rule);color:var(--g-ink)}
#gate .btn-outline:hover{border-color:var(--g-accent);color:var(--g-accent)}
#gate .btn:focus-visible{outline:2px solid var(--g-accent);outline-offset:2px}
#gate .btn-lg{padding:13px 22px;font-size:14px}

/* ── hero ──
   Deliberately no photographic/illustrated background here. A stock or
   AI-generated hero image is the single element that makes a professional
   platform read as a template; the surface below is drawn instead — a
   precise engineering grid, a soft accent wash and the platform's own
   architecture diagram as the actual subject. */
#gate .hero{display:grid;grid-template-columns:1.02fr .98fr;gap:40px;align-items:center;
  max-width:1360px;margin:0 auto;padding:56px 32px 84px;position:relative;overflow:hidden;
  background:var(--g-bg)}
/* engineered grid — 1px hairlines on a 34px module, fading out toward the
   copy so text always sits on clean ground */
#gate .hero::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(62,99,221,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(62,99,221,.055) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(120% 100% at 78% 46%,#000 0%,rgba(0,0,0,.55) 42%,transparent 76%);
  mask-image:radial-gradient(120% 100% at 78% 46%,#000 0%,rgba(0,0,0,.55) 42%,transparent 76%)}
/* one wide, very low-alpha accent wash — depth without a "blob" */
#gate .hero::after{content:'';position:absolute;top:-30%;right:-14%;width:900px;height:900px;border-radius:50%;
  background:radial-gradient(circle,rgba(62,99,221,.10) 0%,rgba(62,99,221,.04) 38%,rgba(62,99,221,0) 70%);
  pointer-events:none;z-index:0}
#gate .hero-copy{position:relative;z-index:2}
#gate .hero-visual{position:relative;z-index:2}
#gate .hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--g-accent);background:rgba(255,255,255,.7);padding:7px 13px;border-radius:99px;margin-bottom:22px;
  border:1px solid rgba(62,99,221,.22);box-shadow:var(--sh-1);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
#gate .hero-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--g-green);box-shadow:0 0 0 3px var(--g-green-10);
  animation:hero-pulse 2.4s var(--ease-io) infinite}
@keyframes hero-pulse{0%,100%{box-shadow:0 0 0 3px var(--g-green-10)}50%{box-shadow:0 0 0 6px rgba(31,157,107,.04)}}
#gate .hero-copy h1{font-family:var(--display);font-size:clamp(32px,4.4vw,52px);line-height:1.08;letter-spacing:-.02em;
  font-weight:500;margin:0 0 20px;color:var(--g-ink)}
#gate .hero-copy h1 span{color:var(--g-accent);position:relative;display:inline-block}
#gate .hero-sub{font-size:17px;line-height:1.6;color:var(--g-ink-60);max-width:50ch;margin:0 0 32px}
#gate .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:40px}
#gate .hero-stats{display:flex;gap:36px;flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--g-rule-soft)}
#gate .hero-stats div{display:flex;flex-direction:column;position:relative;padding-left:0}
#gate .hero-stats b{font-family:var(--mono);font-size:26px;color:var(--g-ink);font-weight:500;font-variant-numeric:tabular-nums;
  letter-spacing:-.01em}
#gate .hero-stats span{font-size:12px;color:var(--g-ink-60);letter-spacing:.02em;margin-top:2px}

/* hero entrance — one staggered rise, played once on load. Purely
   transform/opacity so it never costs layout, and skipped entirely under
   reduced-motion. */
@keyframes hero-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
#gate .hero-copy > *{animation:hero-rise .8s var(--ease-out) both}
#gate .hero-eyebrow{animation-delay:.05s}
#gate .hero-copy h1{animation-delay:.13s}
#gate .hero-sub{animation-delay:.21s}
#gate .hero-cta{animation-delay:.29s}
#gate .hero-stats{animation-delay:.37s}
@media (prefers-reduced-motion:reduce){#gate .hero-copy > *{animation:none}
  #gate .hero-eyebrow .dot{animation:none}}

/* hero visual: hub-and-spoke ecosystem SVG + floating dashboard cards */
#gate .hero-visual{position:relative;display:flex;align-items:center;justify-content:center;min-height:500px}
#gate .eco-hero{width:100%;max-width:436px;position:relative;z-index:1;
  animation:hero-rise 1s var(--ease-out) .18s both}
#gate .eco-hero svg{width:100%;height:auto;overflow:visible}
#gate .eco-link{fill:none;stroke:var(--g-rule);stroke-width:1.1;transition:stroke var(--t-mid) ease,stroke-width var(--t-mid) ease}
/* the moving data trace — a short lit segment running hub→module, not a
   dashed line marching in place; each spoke offset so they don't pulse in
   unison */
#gate .eco-link-flow{fill:none;stroke:var(--g-accent);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:26 190;opacity:.9;animation:eco-dash 3.6s linear infinite;
  animation-delay:calc(var(--n,0) * -.42s)}
@keyframes eco-dash{from{stroke-dashoffset:216}to{stroke-dashoffset:0}}
#gate .eco-hub-ring{fill:none;stroke:var(--g-accent-20);stroke-width:1;transform-origin:center;
  animation:eco-ring 4.5s var(--ease-io) infinite}
@keyframes eco-ring{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.045)}}
#gate .eco-hub-circle{fill:#fff;stroke:var(--g-accent);stroke-width:1.5;
  filter:drop-shadow(0 8px 20px rgba(62,99,221,.22))}
#gate .eco-hub-label{font-family:var(--display);font-size:9.5px;font-weight:600;fill:var(--g-ink);letter-spacing:.02em}
#gate .eco-hub-sub{font-family:var(--mono);font-size:6.5px;fill:var(--g-ink-60);letter-spacing:.06em;text-transform:uppercase}
#gate .eco-node-circle{fill:#fff;stroke:var(--g-rule);stroke-width:1.2;
  filter:drop-shadow(0 3px 8px rgba(24,32,48,.07));
  transition:stroke var(--t-fast) ease,fill var(--t-fast) ease,filter var(--t-mid) ease}
#gate .eco-node-label{font-family:var(--display);font-size:7.5px;fill:var(--g-ink-60);letter-spacing:.01em;transition:fill var(--t-fast) ease}
#gate .eco-node{cursor:pointer;transition:transform var(--t-mid) var(--ease-out);transform-origin:center;transform-box:fill-box}
#gate .eco-node:hover .eco-node-circle,#gate .eco-node.on .eco-node-circle{stroke:var(--g-accent);fill:var(--g-accent-10);
  filter:drop-shadow(0 6px 16px rgba(62,99,221,.28))}
#gate .eco-node:hover .eco-node-label,#gate .eco-node.on .eco-node-label{fill:var(--g-ink)}
@media (prefers-reduced-motion:reduce){
  #gate .eco-link-flow{animation:none;stroke-dasharray:none;opacity:.35}
  #gate .eco-hub-ring{animation:none}
  #gate .eco-hero{animation:none}
}

#gate .dash-cards{position:absolute;inset:0;pointer-events:none}
#gate .dash-card{position:absolute;width:162px;background:rgba(255,255,255,.94);border:1px solid var(--g-rule);border-radius:12px;
  padding:12px 14px;box-shadow:var(--sh-3);pointer-events:auto;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:transform var(--t-mid) var(--ease-out),box-shadow var(--t-mid) ease,border-color var(--t-mid) ease;
  will-change:transform;animation:dash-in .7s var(--ease-out) both,dash-float 7s var(--ease-io) infinite;
  animation-delay:calc(.45s + var(--i,0) * .07s), calc(1.2s + var(--i,0) * .55s)}
@keyframes dash-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes dash-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
#gate .dash-card:hover{transform:translateY(-4px) !important;box-shadow:var(--sh-4);border-color:var(--g-accent-20)}
@media (prefers-reduced-motion:reduce){#gate .dash-card{animation:none}}
#gate .dash-card .dc-kind{position:absolute;top:-8px;left:12px;font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:2px 7px;border-radius:99px;background:var(--g-ink);color:#fff;line-height:1.5}
#gate .dash-card.dash-in .dc-kind{background:var(--g-accent)}
#gate .dash-card{position:absolute}
#gate .dash-card .dc-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--g-ink-60);
  display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
#gate .dash-card .dc-value{font-family:var(--mono);font-size:17px;font-weight:500;color:var(--g-ink);line-height:1.15;
  white-space:nowrap;letter-spacing:-.02em}
#gate .dash-card .dc-foot{font-size:10px;color:var(--g-ink-30);margin-top:5px}
#gate .dash-card .dc-tag{font-size:9px;padding:2px 6px;border-radius:99px;font-family:var(--mono)}
#gate .dash-card .dc-tag.g{background:var(--g-green-10);color:var(--g-green-ink)}
#gate .dash-card .dc-tag.r{background:var(--g-red-10);color:var(--g-red-ink)}
#gate .dash-card .dc-tag.a{background:var(--g-amber-10);color:var(--g-amber-ink)}
#gate .demo-flag{position:fixed;pointer-events:none}
#gate .hero-demo-note{position:absolute;left:0;right:0;bottom:-6px;text-align:center;font-size:10px;color:var(--g-ink-30);
  font-family:var(--mono);letter-spacing:.04em}
@media (max-width:980px){
  #gate .hero{grid-template-columns:1fr;padding:36px 20px 48px;text-align:left}
  #gate .hero-visual{order:-1;min-height:340px;margin-bottom:8px}
  #gate .dash-card{width:130px;padding:10px 11px}
  #gate .dash-card .dc-value{font-size:16px}
}
@media (max-width:640px){#gate .dash-cards{display:none}}

/* ── data-flow story: "One Data Point. Multiple Professional Outputs." ── */
#gate .flow-diagram{margin-top:52px;display:grid;grid-template-columns:220px 1fr;gap:36px;align-items:center}
#gate .flow-source{position:relative}
#gate .flow-outputs{position:relative}
#gate .flow-output{position:relative}
#gate .flow-source{background:var(--g-bg-3);border:1.5px solid var(--g-accent);border-radius:12px;padding:22px 18px;text-align:center}
#gate .flow-source .fs-tag{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--g-accent);margin-bottom:8px}
#gate .flow-source .fs-name{font-family:var(--display);font-size:15px;font-weight:500;color:var(--g-ink);margin-bottom:4px}
#gate .flow-source .fs-note{font-size:11.5px;color:var(--g-ink-60)}
#gate .flow-outputs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
#gate .flow-output{background:var(--g-bg-3);border:1px solid var(--g-rule);border-radius:10px;padding:14px 14px 15px;
  opacity:.32;transform:translateX(-8px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1),border-color .3s ease}
#gate .flow-output.lit{opacity:1;transform:none;border-color:var(--g-accent-20)}
#gate .flow-output .fo-icon{width:26px;height:26px;border-radius:7px;background:var(--g-accent-10);color:var(--g-accent-ink);
  display:grid;place-items:center;font-family:var(--mono);font-size:11px;margin-bottom:10px}
#gate .flow-output .fo-name{font-family:var(--display);font-size:12.5px;font-weight:500;color:var(--g-ink);margin-bottom:4px}
#gate .flow-output .fo-note{font-size:11px;color:var(--g-ink-60);line-height:1.4}
/* The bus that actually carries the source into the outputs. This used to
   be a single decorative line spanning the bottom of the section, connected
   to nothing — it now reads as one trunk out of the Trial Balance card
   branching into each row of outputs, drawn on scroll. */
#gate .flow-source::after{content:'';position:absolute;left:100%;top:50%;width:18px;height:1.5px;
  background:var(--g-accent);transform:scaleX(0);transform-origin:left center;
  transition:transform .45s var(--ease-out)}
#gate .flow-diagram.lit .flow-source::after{transform:scaleX(1)}
#gate .flow-outputs::before{content:'';position:absolute;left:-18px;top:26px;bottom:26px;width:1.5px;
  background:var(--g-accent-20);transform:scaleY(0);transform-origin:center;
  transition:transform .6s var(--ease-out) .35s}
#gate .flow-diagram.lit .flow-outputs::before{transform:scaleY(1)}
/* one stub per row, off the first card in each row of four */
#gate .flow-output:nth-child(4n+1)::before{content:'';position:absolute;right:100%;top:50%;width:18px;height:1.5px;
  background:var(--g-accent-20);transform:scaleX(0);transform-origin:right center;
  transition:transform .4s var(--ease-out) .6s}
#gate .flow-diagram.lit .flow-output:nth-child(4n+1)::before{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
  #gate .flow-source::after,#gate .flow-outputs::before,#gate .flow-output:nth-child(4n+1)::before{
    transform:none;transition:none}
}
/* below 900px the source sits above the outputs, so a left-hand bus points
   nowhere — the connectors drop out and the cards simply stack */
@media (max-width:900px){
  #gate .flow-source::after,#gate .flow-outputs::before,#gate .flow-output:nth-child(4n+1)::before{display:none}
}
@media (max-width:900px){#gate .flow-diagram{grid-template-columns:1fr}#gate .flow-outputs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){#gate .flow-outputs{grid-template-columns:1fr}}

/* ── ecosystem map: "Independent by Design. Connected by Intelligence." ── */
#gate .eco-section-inner{display:grid;grid-template-columns:1fr 340px;gap:44px;align-items:start;max-width:1320px;margin:0 auto;padding:88px 32px}
#gate .eco-map-wrap{position:relative}
#gate .eco-map svg{width:100%;height:auto;overflow:visible}
#gate .eco-preview{background:var(--g-bg-3);border:1px solid var(--g-rule);border-radius:12px;padding:20px;min-height:280px;
  position:sticky;top:110px}
#gate .eco-preview-empty{color:var(--g-ink-30);font-size:13px;line-height:1.6;padding-top:8px}
/* the panel cross-fades between modules instead of snapping — the map walks
   itself on a timer, so a hard content swap every few seconds would read as
   a glitch rather than a transition */
#gate .eco-preview{opacity:1;transition:box-shadow var(--t-mid) ease}
#gate .eco-preview > *{opacity:0;transform:translateY(6px);
  transition:opacity .42s var(--ease-out),transform .42s var(--ease-out)}
#gate .eco-preview.is-in > *{opacity:1;transform:none}
#gate .eco-preview.is-in > :nth-child(2){transition-delay:40ms}
#gate .eco-preview.is-in > :nth-child(3){transition-delay:80ms}
#gate .eco-preview.is-in > :nth-child(4){transition-delay:120ms}
#gate .eco-preview-hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--g-ink-30);margin-top:14px;display:flex;align-items:center;gap:7px}
#gate .eco-preview-hint::before{content:'';width:14px;height:1px;background:var(--g-ink-30)}
/* when one module is active, everything else recedes — the point of the
   diagram is the one relationship being shown, not all eleven at once */
#gate .eco-map.focused .eco-node:not(.on){opacity:.34;transition:opacity var(--t-mid) ease}
#gate .eco-map .eco-node{transition:opacity var(--t-mid) ease}
#gate .eco-map.focused .eco-link-flow{opacity:.25}
@media (prefers-reduced-motion:reduce){
  #gate .eco-preview > *{opacity:1;transform:none;transition:none}
}
#gate .eco-preview-tag{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--g-accent);margin-bottom:8px}
#gate .eco-preview h3{font-family:var(--display);font-size:17px;font-weight:500;color:var(--g-ink);margin:0 0 8px}
#gate .eco-preview p{font-size:13px;line-height:1.6;color:var(--g-ink-60);margin:0 0 14px}
#gate .eco-preview-mini{background:var(--g-bg);border:1px solid var(--g-rule-soft);border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:6px}
#gate .eco-preview-mini .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:11.5px;
  flex-wrap:wrap}
#gate .eco-preview-mini .row span{color:var(--g-ink-60);flex:0 0 auto}
#gate .eco-preview-mini .row b{font-family:var(--mono);color:var(--g-ink);font-weight:500;font-size:11px;
  text-align:right;flex:1 1 auto;min-width:0;letter-spacing:-.01em}
@media (max-width:980px){#gate .eco-section-inner{grid-template-columns:1fr}#gate .eco-preview{position:static}}

/* ── "From Data to Decision" stage stepper ── */
/* the two labelled zones sitting above the track — 5 automation steps to
   3 judgment steps, so the bands are weighted 5fr/3fr to line up with the
   columns underneath */
#gate .stage-zones{display:grid;grid-template-columns:5fr 3fr;gap:10px;margin-top:52px}
#gate .stage-zone{border-radius:8px 8px 0 0;padding:9px 14px 10px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  border:1px solid var(--g-rule);border-bottom:none;position:relative}
#gate .stage-zone span{font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:.01em}
#gate .stage-zone i{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--g-ink-60)}
#gate .stage-zone-auto{background:var(--g-accent-10);border-color:rgba(62,99,221,.2)}
#gate .stage-zone-auto span{color:var(--g-accent-ink)}
#gate .stage-zone-judg{background:rgba(30,36,48,.045);border-color:rgba(30,36,48,.14)}
#gate .stage-zone-judg span{color:var(--g-ink)}

#gate .stage-track{display:flex;gap:0;margin-top:0;position:relative;overflow-x:auto;padding:22px 0 8px}
#gate .stage-step{flex:1;min-width:118px;text-align:center;position:relative;padding:0 6px}
#gate .stage-step .st-num{width:38px;height:38px;border-radius:50%;background:#fff;border:1.5px solid var(--g-rule);
  display:grid;place-items:center;margin:0 auto 12px;font-family:var(--mono);font-size:13px;color:var(--g-ink-30);
  transition:border-color .45s var(--ease-out),color .45s var(--ease-out),background .45s var(--ease-out),
    box-shadow .45s var(--ease-out),transform .45s var(--ease-out);position:relative;z-index:2}
#gate .stage-step.active .st-num{border-color:var(--g-accent);color:var(--g-accent);background:var(--g-accent-10);
  box-shadow:0 0 0 4px rgba(62,99,221,.07)}
/* the judgment half reads as ink rather than accent — a different kind of
   work, not a later stage of the same kind */
#gate .stage-step.stage-judg.active .st-num{border-color:var(--g-ink);color:#fff;background:var(--g-ink);
  box-shadow:0 0 0 4px rgba(30,36,48,.07)}
#gate .stage-step .st-name{font-family:var(--display);font-size:11.5px;font-weight:500;color:var(--g-ink-60);letter-spacing:.01em;
  text-transform:uppercase;transition:color .45s var(--ease-out)}
#gate .stage-step.active .st-name{color:var(--g-ink)}
/* connector: drawn left-to-right on activation rather than switching colour
   in place, so the sequence reads as one line being traced */
#gate .stage-step:not(:last-child)::after{content:'';position:absolute;top:19px;left:calc(50% + 24px);right:calc(-50% + 24px);
  height:1.5px;background:var(--g-rule);z-index:1}
#gate .stage-step:not(:last-child)::before{content:'';position:absolute;top:19px;left:calc(50% + 24px);right:calc(-50% + 24px);
  height:1.5px;background:var(--g-accent);z-index:1;transform:scaleX(0);transform-origin:left center;
  transition:transform .5s var(--ease-out)}
#gate .stage-step.active:not(:last-child)::before{transform:scaleX(1)}
#gate .stage-step.stage-judg:not(:last-child)::before{background:var(--g-ink)}
/* the handoff itself — a dashed break between step 5 and step 6 */
#gate .stage-step.stage-last-auto:not(:last-child)::after{background:none;
  border-top:1.5px dashed var(--g-ink-30);height:0}
#gate .stage-step.stage-last-auto:not(:last-child)::before{display:none}

#gate .stage-handoff{margin-top:30px;display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;
  font-size:13px;line-height:1.6;color:var(--g-ink-60);border-top:1px dashed var(--g-rule);padding-top:18px}
#gate .stage-handoff .sh-mark{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--g-ink);border:1px dashed var(--g-ink-30);border-radius:99px;padding:4px 11px;flex:none}
#gate .stage-judgment{margin-top:20px;background:var(--g-bg-3);border:1px solid var(--g-rule);border-left:3px solid var(--g-accent);
  border-radius:10px;padding:18px 22px;font-size:13.5px;line-height:1.6;color:var(--g-ink-60);box-shadow:var(--sh-1)}
#gate .stage-judgment b{color:var(--g-ink)}
@media (prefers-reduced-motion:reduce){#gate .stage-step:not(:last-child)::before{transition:none}}
@media (max-width:820px){#gate .stage-track{justify-content:flex-start}
  #gate .stage-step:not(:last-child)::after,#gate .stage-step:not(:last-child)::before{display:none}}
/* Below 640px the 8-step tracker becomes a vertical list (a numbered
   circle beside its label, top to bottom) instead of a horizontally-
   scrolling row — a horizontal scroller is fine for a secondary aside, but
   this is one of the page's central ideas and deserves to read in one
   glance without a sideways gesture (see the brief: convert complex
   desktop diagrams into vertical flows on mobile, don't just shrink them). */
@media (max-width:900px){
  #gate .stage-track{display:flex;flex-direction:column;align-items:stretch;overflow-x:visible;gap:14px;margin-top:0;padding-top:16px}
  #gate .stage-step{display:flex;align-items:center;gap:14px;text-align:left;min-width:0;padding:0}
  #gate .stage-step .st-num{margin:0;flex:none}
  #gate .stage-step:not(:last-child)::after,#gate .stage-step:not(:last-child)::before{display:none}
  /* Stacked vertically the two zone bands no longer sit above the columns
     they label, so they'd point at nothing. The split is marked inline
     instead — a labelled rule immediately before the first judgment step,
     which is where the handoff actually happens in the list. */
  #gate .stage-zones{display:none}
  #gate .stage-step.stage-first-judg{margin-top:20px;padding-top:26px;position:relative}
  #gate .stage-step.stage-first-judg::after{content:'Judgment begins here';display:block;position:absolute;
    top:0;left:0;right:0;border-top:1px dashed var(--g-ink-30);padding-top:7px;
    font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--g-ink-30);
    background:none;height:auto}
  #gate .stage-handoff{margin-top:24px}
}

/* ── AI copilot section: "AI assists. The CA decides." ── */
#gate .copilot-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:44px;align-items:center;margin-top:12px}
#gate .copilot-points{display:flex;flex-direction:column;gap:22px}
#gate .copilot-point{display:flex;gap:14px}
#gate .copilot-point .cp-n{font-family:var(--mono);font-size:12px;color:var(--g-accent);flex:none;width:22px;padding-top:2px}
/* the four-word model the section is actually built on — named explicitly
   rather than left implicit in the prose */
#gate .copilot-point .cp-kw{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--g-accent-ink);background:var(--g-accent-10);border:1px solid rgba(62,99,221,.18);
  border-radius:99px;padding:2px 9px;margin-bottom:7px}
#gate .copilot-point h3{font-family:var(--display);font-size:14.5px;font-weight:500;color:var(--g-ink);margin:0 0 4px}
#gate .copilot-point p{font-size:13px;line-height:1.6;color:var(--g-ink-60);margin:0}
#gate .copilot-card{background:var(--g-bg-3);border:1px solid var(--g-rule);border-radius:14px;overflow:hidden;box-shadow:var(--sh-4)}
/* the card's contents assemble in reading order once it scrolls in — flag
   first, then the reasoning, then the evidence, then the decision it's
   waiting on. Driven by the parent .reveal's own .in class, so it needs no
   JS of its own. */
#gate .copilot-body > *{opacity:0;transform:translateY(10px);
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out)}
#gate .copilot-grid.in .copilot-body > *{opacity:1;transform:none}
#gate .copilot-grid.in .copilot-body > :nth-child(1){transition-delay:.20s}
#gate .copilot-grid.in .copilot-body > :nth-child(2){transition-delay:.34s}
#gate .copilot-grid.in .copilot-body > :nth-child(3){transition-delay:.42s}
#gate .copilot-grid.in .copilot-body > :nth-child(4){transition-delay:.50s}
#gate .copilot-grid.in .copilot-body > :nth-child(5){transition-delay:.58s}
#gate .copilot-grid.in .copilot-body > :nth-child(6){transition-delay:.66s}
#gate .copilot-grid.in .copilot-body > :nth-child(7){transition-delay:.76s}
@media (prefers-reduced-motion:reduce){
  #gate .copilot-body > *{opacity:1;transform:none;transition:none}
}
#gate .copilot-head{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--g-rule-soft);background:var(--g-bg-4)}
#gate .copilot-head .ch-dot{width:7px;height:7px;border-radius:50%;background:var(--g-accent)}
#gate .copilot-head b{font-family:var(--display);font-size:12.5px;color:var(--g-ink);font-weight:500}
#gate .copilot-head span{font-family:var(--mono);font-size:10px;color:var(--g-ink-60);margin-left:auto}
#gate .copilot-body{padding:18px}
#gate .copilot-alert{display:flex;gap:10px;background:var(--g-amber-10);border:1px solid rgba(232,177,74,.3);border-radius:9px;
  padding:12px 14px;margin-bottom:14px}
#gate .copilot-alert .ca-badge{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--g-amber-ink);
  background:rgba(232,177,74,.16);border-radius:5px;padding:2px 6px;flex:none;height:fit-content}
#gate .copilot-alert p{margin:0;font-size:12.5px;line-height:1.55;color:var(--g-ink)}
#gate .copilot-section-label{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--g-ink-30);margin:14px 0 8px}
#gate .copilot-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
#gate .copilot-tags span{font-family:var(--mono);font-size:10.5px;background:var(--g-bg-4);border:1px solid var(--g-rule);
  color:var(--g-ink-60);border-radius:99px;padding:4px 10px}
#gate .copilot-evidence{font-size:12px;color:var(--g-ink-60);line-height:1.6;background:var(--g-bg);border:1px solid var(--g-rule-soft);
  border-radius:8px;padding:10px 12px;margin-bottom:16px}
#gate .copilot-evidence code{font-family:var(--mono);color:var(--g-ink);font-size:11px}
#gate .copilot-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
#gate .copilot-actions button{font-family:var(--display);font-size:11.5px;padding:9px 4px;border-radius:7px;border:1px solid var(--g-rule);
  background:var(--g-bg);color:var(--g-ink-60);cursor:pointer;transition:all .18s ease}
#gate .copilot-actions button:hover{border-color:var(--g-ink-30);color:var(--g-ink)}
#gate .copilot-actions button.accept:hover{border-color:var(--g-green);color:var(--g-green);background:var(--g-green-10)}
#gate .copilot-actions button.modify:hover{border-color:var(--g-blue);color:var(--g-blue);background:var(--g-blue-10)}
#gate .copilot-actions button.reject:hover{border-color:var(--g-red);color:var(--g-red);background:var(--g-red-10)}
#gate .copilot-actions button.investigate:hover{border-color:var(--g-accent);color:var(--g-accent);background:var(--g-accent-10)}
@media (max-width:980px){#gate .copilot-grid{grid-template-columns:1fr}#gate .copilot-actions{grid-template-columns:repeat(2,1fr)}}

/* ── trust & traceability lineage ── */
#gate .trust-timeline{display:flex;justify-content:space-between;margin-top:52px;position:relative;overflow-x:auto;gap:6px;padding-bottom:10px}
#gate .trust-timeline::before{content:'';position:absolute;top:9px;left:0;right:0;height:1px;background:var(--g-rule)}
/* the completed portion of the chain, drawn over the grey rail. Three of
   the six steps are done in this illustration, so the fill stops halfway
   between the third and fourth dot — it is the state of the chain, not a
   loading bar, so it holds there rather than completing. */
#gate .trust-timeline::after{content:'';position:absolute;top:9px;left:0;height:1.5px;background:var(--g-green);
  width:calc(41.6% + 10px);transition:width 1.4s var(--ease-out) .2s}
/* held at zero only while JS is present and the section hasn't scrolled in
   yet — without JS both rules below drop out and the chain renders finished */
html.has-js #gate .trust-timeline:not(.in)::after{width:0}
html.has-js #gate .trust-timeline:not(.in) .trust-step.done .trust-dot{transform:scale(0)}
#gate .trust-step.done .trust-dot{transition:transform .5s var(--ease-out)}
#gate .trust-timeline.in .trust-step:nth-child(1) .trust-dot{transition-delay:.25s}
#gate .trust-timeline.in .trust-step:nth-child(2) .trust-dot{transition-delay:.55s}
#gate .trust-timeline.in .trust-step:nth-child(3) .trust-dot{transition-delay:.85s}
@media (prefers-reduced-motion:reduce){
  #gate .trust-timeline::after{transition:none;width:calc(41.6% + 10px)}
  #gate .trust-step.done .trust-dot{transform:none;transition:none}
}
#gate .trust-step{flex:1;min-width:126px;text-align:center;position:relative;z-index:1}
#gate .trust-dot{width:19px;height:19px;border-radius:50%;background:var(--g-bg-3);border:2px solid var(--g-rule);margin:0 auto 14px;
  display:grid;place-items:center;transition:border-color .4s ease,background .4s ease}
#gate .trust-step.done .trust-dot{border-color:var(--g-green);background:var(--g-green)}
#gate .trust-step.done .trust-dot::after{content:'✓';color:#FFFFFF;font-size:10px;font-weight:700}
#gate .trust-step .tr-name{font-family:var(--display);font-size:12px;font-weight:500;color:var(--g-ink);margin-bottom:3px}
#gate .trust-step .tr-note{font-size:10.5px;color:var(--g-ink-30);line-height:1.4}
#gate .trust-callouts{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:56px}
#gate .trust-callout{border-top:1px solid var(--g-rule);padding-top:14px}
#gate .trust-callout b{display:block;font-family:var(--display);font-size:13.5px;color:var(--g-ink);margin-bottom:6px;font-weight:500}
#gate .trust-callout span{font-size:12.5px;color:var(--g-ink-60);line-height:1.55}
@media (max-width:900px){#gate .trust-callouts{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){#gate .trust-callouts{grid-template-columns:1fr}}
/* Same vertical-list treatment as the stage tracker above, same reason. */
@media (max-width:900px){
  #gate .trust-timeline{display:flex;flex-direction:column;align-items:stretch;overflow-x:visible;gap:16px;margin-top:32px}
  #gate .trust-timeline::before{display:none}
  #gate .trust-step{display:flex;align-items:center;gap:14px;text-align:left;min-width:0}
  #gate .trust-dot{margin:0;flex:none}
}

/* ── "not another accounting software" ── */
#gate .notsw-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px}
#gate .notsw-card{background:var(--g-bg-3);border:1px solid var(--g-rule);border-radius:14px;padding:26px 28px}
#gate .notsw-tag{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  border-radius:99px;padding:4px 12px;margin-bottom:16px}
#gate .notsw-tag-no{color:var(--g-ink-60);background:var(--g-bg-4)}
#gate .notsw-tag-yes{color:var(--g-accent-ink);background:var(--g-accent-10)}
#gate .notsw-card ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
#gate .notsw-card li{font-size:13.5px;line-height:1.55;color:var(--g-ink-60);padding-left:20px;position:relative}
#gate .notsw-no li::before{content:'—';position:absolute;left:0;color:var(--g-ink-30)}
#gate .notsw-yes li::before{content:'✓';position:absolute;left:0;color:var(--g-accent)}
@media (max-width:760px){#gate .notsw-grid{grid-template-columns:1fr}}

/* ── worked engagement example ── */
/* Nine steps stacked in one narrow column left the right half of the
   section empty and pushed the walkthrough to nearly two screens. Two
   columns fill the measure and let the whole engagement be taken in at
   once — the numbering still carries the order across them. */
/* column flow, not row flow: steps 1-5 run down the left, 6-9 down the
   right, so each column reads top-to-bottom against its own connector line
   rather than zig-zagging across the gap */
#gate .engagement-steps{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto);
  grid-auto-flow:column;gap:0 48px;margin-top:40px;position:relative}
#gate .engagement-steps::before{content:'';position:absolute;left:19px;top:8px;bottom:8px;width:1px;background:var(--g-rule)}
#gate .engagement-steps::after{content:'';position:absolute;left:calc(50% + 24px);top:8px;bottom:8px;width:1px;background:var(--g-rule)}
#gate .eng-step{display:flex;gap:20px;padding:16px 0;position:relative}
@media (max-width:900px){
  #gate .engagement-steps{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row;gap:0}
  #gate .engagement-steps::after{display:none}
}
#gate .eng-n{font-family:var(--mono);font-size:12px;color:var(--g-accent);background:var(--g-bg);border:1.5px solid var(--g-rule);
  border-radius:50%;width:40px;height:40px;flex:none;display:grid;place-items:center;position:relative;z-index:1}
#gate .eng-step h3{font-family:var(--display);font-size:14.5px;font-weight:500;color:var(--g-ink);margin:6px 0 4px}
#gate .eng-step p{font-size:13px;line-height:1.6;color:var(--g-ink-60);margin:0;max-width:62ch}

/* ── who this is for ── */
#gate .whofor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
#gate .whofor-card{border-top:2px solid var(--g-rule);padding-top:16px}
#gate .whofor-card h3{font-family:var(--display);font-size:14.5px;font-weight:500;color:var(--g-ink);margin:0 0 8px}
#gate .whofor-card p{font-size:13px;line-height:1.6;color:var(--g-ink-60);margin:0}
@media (max-width:900px){#gate .whofor-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){#gate .whofor-grid{grid-template-columns:1fr}}

/* ── jurisdiction selector ── */
#gate .juris-tabs{display:flex;gap:8px;margin-top:36px;flex-wrap:wrap}
#gate .juris-tab{font-family:var(--display);font-size:13px;padding:10px 18px;border-radius:8px;border:1px solid var(--g-rule);
  background:var(--g-bg-3);color:var(--g-ink-60);cursor:pointer;transition:all .18s ease;display:flex;align-items:center;gap:8px}
#gate .juris-tab:hover{border-color:var(--g-ink-30);color:var(--g-ink)}
#gate .juris-tab.on{border-color:var(--g-accent);color:var(--g-ink);background:var(--g-accent-10)}
#gate .juris-tab .jt-flag{font-family:var(--mono);font-size:10px;color:var(--g-accent-ink)}
#gate .juris-panel{margin-top:24px;background:var(--g-bg-3);border:1px solid var(--g-rule);border-radius:12px;padding:26px 28px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px 28px}
#gate .juris-panel[hidden]{display:none}
#gate .juris-row{border-bottom:1px solid var(--g-rule-soft);padding-bottom:12px}
#gate .juris-row .jr-label{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--g-ink-30);margin-bottom:6px}
#gate .juris-row .jr-value{font-family:var(--display);font-size:14.5px;color:var(--g-ink);font-weight:500}
@media (max-width:820px){#gate .juris-panel{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){#gate .juris-panel{grid-template-columns:1fr}}

/* ── module categories ── */
#gate .module-groups{display:flex;flex-direction:column;gap:36px;margin-top:12px}
#gate .module-group-head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
#gate .module-group-head h3{font-family:var(--display);font-size:15px;font-weight:500;color:var(--g-ink);margin:0}
#gate .module-group-head span{font-size:12px;color:var(--g-ink-30);font-family:var(--mono)}
#gate .module-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
/* Each card carries its description outright. It used to collapse the blurb
   until clicked, which left the section reading as a wall of empty boxes and
   put a click between the visitor and every single answer — the descriptions
   are one line each, so there is nothing to save by hiding them. */
#gate .module-card{background:var(--g-bg-3);border:1px solid var(--g-rule);border-radius:11px;padding:16px 18px 17px;
  transition:border-color var(--t-mid) ease,transform var(--t-mid) var(--ease-out),box-shadow var(--t-mid) ease;
  position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;box-shadow:var(--sh-1)}
/* accent rule sweeping down the left edge on hover */
#gate .module-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--g-accent);
  transform:scaleY(0);transform-origin:top center;transition:transform .45s var(--ease-out)}
#gate .module-card:hover{border-color:var(--g-accent-20);transform:translateY(-3px);box-shadow:var(--sh-3)}
#gate .module-card:hover::before{transform:scaleY(1)}
#gate .module-card .mc-code{font-family:var(--mono);font-size:9.5px;color:var(--g-accent-ink);letter-spacing:.1em;
  background:var(--g-accent-10);border:1px solid rgba(62,99,221,.16);border-radius:5px;padding:2px 7px;
  align-self:flex-start;line-height:1.6}
#gate .module-card .mc-name{font-family:var(--display);font-size:14px;font-weight:500;color:var(--g-ink);margin:2px 0 0}
#gate .module-card .mc-blurb{font-size:12px;line-height:1.55;color:var(--g-ink-60)}
@media (prefers-reduced-motion:reduce){#gate .module-card::before{transition:none}}
@media (max-width:980px){#gate .module-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){#gate .module-grid{grid-template-columns:1fr}}

/* ── "Why CA Automator?" benefit grid ── */
#gate .benefit-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--g-rule);border:1px solid var(--g-rule);
  border-radius:12px;overflow:hidden;margin-top:12px}
#gate .benefit-card{background:var(--g-bg-3);padding:22px 20px}
#gate .benefit-card .bc-n{font-family:var(--mono);font-size:11px;color:var(--g-accent);margin-bottom:12px}
#gate .benefit-card b{display:block;font-family:var(--display);font-size:13.5px;font-weight:500;color:var(--g-ink);margin-bottom:6px;line-height:1.35}
#gate .benefit-card span{font-size:12px;color:var(--g-ink-60);line-height:1.55}
@media (max-width:980px){#gate .benefit-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){#gate .benefit-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){#gate .benefit-grid{grid-template-columns:1fr}}

/* ── services (admin-managed, public) ── */
#gate .service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px}
#gate .service-empty{grid-column:1/-1;padding:28px 20px;text-align:center;color:var(--g-ink-60);font-size:14.5px;
  border:1px dashed var(--g-rule);border-radius:12px}
#gate .service-card{background:var(--g-bg-3);border:1px solid var(--g-rule);border-radius:12px;padding:20px;
  display:flex;flex-direction:column;gap:8px;transition:border-color .15s,transform .15s}
#gate .service-card:hover{border-color:var(--g-accent-20);transform:translateY(-2px)}
#gate .service-card .sc-img{display:block;width:calc(100% + 40px);margin:-20px -20px 4px;aspect-ratio:16/9;
  object-fit:cover;border-radius:12px 12px 0 0}
#gate .service-card .sc-cat{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--g-accent)}
#gate .service-card h3{font-family:var(--display);font-size:15px;font-weight:500;color:var(--g-ink);margin:0}
#gate .service-card p{font-size:12.5px;line-height:1.55;color:var(--g-ink-60);margin:0;flex:1}
#gate .service-card .sc-price{font-family:var(--mono);font-size:13px;color:var(--g-ink)}
#gate .service-card .sc-title-link{color:inherit;text-decoration:none}
#gate .service-card .sc-title-link:hover{color:var(--g-accent)}
#gate .service-card .sc-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
#gate .service-card .sc-actions .btn{align-self:flex-start}
@media (max-width:980px){#gate .service-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){#gate .service-grid{grid-template-columns:1fr}}

/* ── YouTube videos (admin-managed, public) — the whole section stays
   hidden (see index.html's [hidden] on #videos-section) until at least one
   video is published; the iframe only loads once its card scrolls near
   view (loading="lazy" below) rather than every video's player initializing
   at once on page load. */
#gate .video-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:12px}
#gate .video-card{background:var(--g-bg-3);border:1px solid var(--g-rule);border-radius:12px;overflow:hidden;
  transition:border-color .15s,transform .15s}
#gate .video-card:hover{border-color:var(--g-accent-20);transform:translateY(-2px)}
#gate .video-embed{position:relative;width:100%;padding-top:56.25%;background:var(--g-bg-4)}
#gate .video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
#gate .video-card h3{font-family:var(--display);font-size:14.5px;font-weight:500;color:var(--g-ink);margin:0;padding:14px 16px}
@media (max-width:760px){#gate .video-grid{grid-template-columns:1fr}}

/* ── testimonials (admin-managed, public) ── */
#gate .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:12px}
#gate .testi-card{background:var(--g-bg-3);border:1px solid var(--g-rule);border-radius:12px;padding:20px}
#gate .testi-card .tc-rating{color:var(--g-accent);font-size:13px;letter-spacing:.08em;margin-bottom:10px}
#gate .testi-card p{font-size:13px;line-height:1.6;color:var(--g-ink);margin:0 0 14px}
#gate .testi-card .tc-name{font-family:var(--display);font-size:13px;font-weight:500;color:var(--g-ink)}
#gate .testi-card .tc-role{font-size:11.5px;color:var(--g-ink-60)}
@media (max-width:980px){#gate .testi-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){#gate .testi-grid{grid-template-columns:1fr}}

/* ── contact: firm details/Maps + message form ── */
#gate .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;margin-top:12px}
/* grid items default to min-width:auto, i.e. they refuse to shrink below
   their own min-content — with an address block, a social row and a map
   embed inside, that floor was wider than a 320px viewport and pushed the
   section sideways. */
#gate .contact-grid > *{min-width:0}
@media (max-width:820px){#gate .contact-grid{grid-template-columns:1fr}}
#gate .contact-info{border:1px solid var(--g-rule);border-radius:14px;padding:22px;background:var(--g-bg-2)}
#gate .contact-info-loading{color:var(--g-ink-60);font-size:13px}
#gate .ci-row{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--g-rule-soft)}
#gate .ci-row:last-of-type{border-bottom:none}
#gate .ci-row .ci-label{font-family:var(--display);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--g-ink-60);min-width:88px}
#gate .ci-row .ci-value{font-size:13px;color:var(--g-ink);line-height:1.55}
#gate .ci-row .ci-value a{color:var(--g-accent);text-decoration:none}
#gate .ci-social{display:flex;gap:10px;margin-top:14px}
#gate .ci-social a{font-family:var(--mono);font-size:11px;padding:6px 12px;border:1px solid var(--g-rule);border-radius:99px;
  color:var(--g-ink-60);text-decoration:none}
#gate .ci-social a:hover{border-color:var(--g-accent);color:var(--g-accent)}
/* min-width:0 matters here: an iframe's intrinsic width is 300px, so
   without it the map sets a 300px floor on the whole contact column and
   pushes the section past the viewport at 320px. width:100% alone does not
   override the intrinsic minimum. */
#gate .map-embed{margin-top:14px;border-radius:10px;overflow:hidden;border:1px solid var(--g-rule);min-width:0}
/* width:1px + min-width:100% rather than width:100%. An iframe is a
   replaced element with a 300px intrinsic width, and that intrinsic width
   still sets the container's minimum even with width:100% — which pushed
   the whole contact section past a 320px viewport. Collapsing the declared
   width first removes the floor, then min-width stretches it back out. */
#gate .map-embed iframe{display:block;width:1px;min-width:100%;max-width:100%;height:220px;border:0}
#gate .contact-form{margin:0}

/* ── final CTA ── */
#gate .final-cta{position:relative;overflow:hidden;text-align:center;padding:100px 32px;max-width:1320px;margin:0 auto}
#gate .final-cta::before{content:'';position:absolute;top:50%;left:50%;width:900px;height:900px;transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle,var(--g-accent-10) 0%,rgba(62,99,221,0) 60%);pointer-events:none}
#gate .final-cta h2{font-family:var(--display);font-size:clamp(26px,3.6vw,40px);font-weight:500;letter-spacing:-.015em;
  color:var(--g-ink);margin:0 0 14px;position:relative}
#gate .final-cta p{font-size:16px;color:var(--g-ink-60);margin:0 0 34px;position:relative}
#gate .final-cta .hero-cta{justify-content:center;position:relative}
#gate .final-dash{margin:44px auto 0;max-width:640px;background:var(--g-bg-3);border:1px solid var(--g-rule);border-radius:14px;
  padding:22px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative;box-shadow:0 24px 60px rgba(30,36,48,.12)}
#gate .final-dash .fd-item{text-align:left}
#gate .final-dash .fd-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--g-ink-30);margin-bottom:6px}
#gate .final-dash .fd-value{font-family:var(--mono);font-size:17px;color:var(--g-ink);font-weight:500}
@media (max-width:620px){#gate .final-dash{grid-template-columns:repeat(2,1fr)}}

/* ── careers (kept, restyled) ── */
#gate .careers{max-width:1320px;margin:0 auto;padding:76px 32px;text-align:center;border-top:1px solid var(--g-rule-soft)}
#gate .careers h2{font-family:var(--display);font-size:26px;font-weight:500;letter-spacing:-.01em;margin:0 0 10px;color:var(--g-ink)}

/* ── appointment booking (kept, restyled to the new accent) ── */
#gate .appt-inner{max-width:920px}
.appt-body{margin-top:8px}
.appt-loading,.appt-empty{padding:28px 20px;text-align:center;color:var(--g-ink-60);font-size:14.5px;
  border:1px dashed var(--g-rule);border-radius:12px}
.appt-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:start}
@media (max-width:820px){.appt-grid{grid-template-columns:1fr}}
.appt-days{display:flex;flex-direction:column;gap:18px;max-height:520px;overflow-y:auto;padding-right:6px}
.appt-day-label{font-family:var(--display);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--g-accent);margin-bottom:8px}
.appt-slots{display:flex;flex-wrap:wrap;gap:8px}
.appt-slot{font-family:var(--mono);font-size:12.5px;padding:8px 12px;border-radius:9px;border:1px solid var(--g-rule);
  background:var(--g-bg-2);color:var(--g-ink);cursor:pointer;transition:border-color .15s,background .15s}
.appt-slot:hover{border-color:var(--g-accent)}
.appt-slot.on{background:var(--g-accent-10);border-color:var(--g-accent);color:var(--g-accent)}
.appt-slot .p{display:block;color:var(--g-ink-60);font-size:11px;margin-top:2px}
.appt-slot.on .p{color:var(--g-accent-dk)}
.appt-form{border:1px solid var(--g-rule);border-radius:14px;padding:22px;background:var(--g-bg-2)}
.appt-form h3{font-family:var(--display);font-size:16px;font-weight:500;margin:0 0 4px;color:var(--g-ink)}
.appt-form .sel{font-size:13px;color:var(--g-ink-60);margin:0 0 16px}
.appt-form label{display:block;font-family:var(--display);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--g-ink-60);margin-top:14px}
.appt-form input,.appt-form textarea{display:block;width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--g-rule);
  border-radius:9px;background:var(--g-bg);color:var(--g-ink);font:inherit}
.appt-form input:focus,.appt-form textarea:focus{outline:2px solid var(--g-accent);outline-offset:1px}
.appt-methods{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap}
.appt-method{font-size:12.5px;padding:8px 12px;border-radius:9px;border:1px solid var(--g-rule);background:var(--g-bg);
  color:var(--g-ink-60);cursor:pointer}
.appt-method.on{border-color:var(--g-accent);color:var(--g-accent);background:var(--g-accent-10)}
.appt-form .btn{width:100%;margin-top:18px}
.appt-msg{min-height:20px;margin:10px 0 0;font-size:13px;color:var(--g-red)}
.appt-confirm{padding:20px;border:1px solid var(--g-accent);border-radius:12px;background:var(--g-accent-10);color:var(--g-ink)}
.appt-confirm b{color:var(--g-accent)}

/* ── footer: premium, multi-column ── */
#gate .lfooter{border-top:1px solid var(--g-rule);padding:56px 32px 28px;max-width:1320px;margin:0 auto}
#gate .lfooter-grid{display:grid;grid-template-columns:1.4fr repeat(5,1fr);gap:24px;margin-bottom:40px}
#gate .lfooter-brand{display:flex;align-items:center;gap:9px;font-family:var(--display);font-size:14px;color:var(--g-ink);margin-bottom:12px}
#gate .lfooter-brand .brand-mark{width:30px;height:30px}
#gate .lfooter-tagline{font-size:12.5px;color:var(--g-ink-60);line-height:1.6;max-width:32ch}
#gate .lfooter-col h2{font-family:var(--display);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--g-ink-30);
  margin:0 0 14px;font-weight:500}
#gate .lfooter-col{display:flex;flex-direction:column;gap:10px}
#gate .lfooter-col a,#gate .lfooter-col .lfooter-link-btn{color:var(--g-ink-60);text-decoration:none;font-size:13px;background:none;
  border:none;padding:0;cursor:pointer;font-family:var(--body);text-align:left}
#gate .lfooter-col a:hover,#gate .lfooter-col .lfooter-link-btn:hover{color:var(--g-accent)}
/* "Pull mode": the Legal column only ever contributes the height of its
   trigger row to the footer grid — the actual page list is an absolutely
   positioned overlay, so adding a 3rd or a 13th legal page never changes
   the footer's height or unbalances the other columns. */
#gate .lfooter-legal-col{position:relative}
#gate .lfooter-legal-toggle{position:relative}
#gate .lfooter-legal-toggle summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  color:var(--g-accent);font-size:13px;user-select:none}
#gate .lfooter-legal-toggle summary::-webkit-details-marker{display:none}
#gate .lfooter-legal-toggle summary::after{content:'';width:6px;height:6px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .15s ease;margin-top:-2px}
#gate .lfooter-legal-toggle[open] summary::after{transform:rotate(-135deg);margin-top:2px}
#gate .lfooter-pages-menu{position:absolute;left:0;bottom:calc(100% + 10px);z-index:30;min-width:220px;max-height:260px;
  overflow-y:auto;display:flex;flex-direction:column;gap:4px;background:var(--g-bg,#fff);border:1px solid var(--g-rule);
  border-radius:12px;padding:12px 16px;box-shadow:0 16px 34px rgba(20,24,34,.14)}
#gate .lfooter-pages-menu a{padding:4px 0}
@media (max-width:640px){#gate .lfooter-pages-menu{left:auto;right:0}}
#gate .lfooter-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--g-rule-soft);padding-top:22px}
#gate .lfooter-note{font-size:11.5px;color:var(--g-ink-30);max-width:70ch;line-height:1.6}
#gate .lfooter-legal{display:flex;gap:16px;font-size:11.5px;color:var(--g-ink-30)}
@media (max-width:980px){#gate .lfooter-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){#gate .lfooter-grid{grid-template-columns:repeat(2,1fr)}#gate .lfooter-bottom{flex-direction:column;align-items:flex-start}}

/* ── landing's own sign-in/sign-up modal (auth-overlay lives inside #gate,
   so this stays navy; the offline-PIN modal outside #gate is untouched
   and keeps the app's "Soft Sky & Charcoal" house style) ── */
#gate .auth-overlay{position:fixed;inset:0;background:rgba(30,36,48,.45);display:grid;place-items:center;
  padding:24px;z-index:100}
#gate .auth-overlay[hidden]{display:none}
#gate .auth-card{position:relative;width:min(400px,100%);background:var(--g-bg-3);border:1px solid var(--g-rule);
  border-radius:12px;box-shadow:0 30px 70px rgba(30,36,48,.22);max-height:90vh;overflow-y:auto}
#gate .auth-close{position:absolute;top:12px;right:14px;background:none;border:none;font-size:22px;line-height:1;
  color:var(--g-ink-30);cursor:pointer;padding:4px}
#gate .auth-close:hover{color:var(--g-ink)}
#gate .auth-tabs{display:flex;border-bottom:1px solid var(--g-rule)}
#gate .auth-tab{flex:1;padding:16px;text-align:center;background:none;border:none;cursor:pointer;
  font-family:var(--display);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--g-ink-30)}
#gate .auth-tab.on{color:var(--g-accent);box-shadow:inset 0 -2px 0 var(--g-accent)}
#gate .auth-pane{border:none;box-shadow:none;width:100%;padding:30px 28px}
#gate .auth-pane[hidden]{display:none}

/* ── cookie consent bar ── */
#gate .cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:110;background:var(--g-ink);color:#fff;
  padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  box-shadow:0 -4px 20px rgba(0,0,0,.15)}
#gate .cookie-bar[hidden]{display:none}
#gate .cookie-bar p{margin:0;font-size:13px;line-height:1.5;color:rgba(246,247,250,.85);max-width:640px}
#gate .cookie-bar a{color:#fff;text-decoration:underline}
#gate .cookie-bar-actions{display:flex;gap:10px;flex:none}
#gate .cookie-bar .btn-ghost{color:rgba(246,247,250,.7);border-color:rgba(246,247,250,.25)}
@media (max-width:600px){#gate .cookie-bar{flex-direction:column;align-items:stretch;text-align:center}
  #gate .cookie-bar-actions{justify-content:center}}

/* ── popup announcement banner ── */
#gate .banner-overlay{position:fixed;inset:0;background:rgba(30,36,48,.5);display:grid;place-items:center;
  padding:24px;z-index:120}
#gate .banner-overlay[hidden]{display:none}
#gate .banner-modal{position:relative;width:min(440px,100%);max-height:90vh;overflow-y:auto;
  background:var(--g-bg-3);border-radius:14px;box-shadow:0 30px 70px rgba(30,36,48,.28);animation:bannerIn .25s ease}
@keyframes bannerIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#gate .banner-modal{animation:none}}
#gate .banner-close{position:absolute;top:10px;right:12px;background:rgba(30,36,48,.55);color:#fff;border:none;
  width:28px;height:28px;border-radius:50%;font-size:18px;line-height:1;cursor:pointer;z-index:1}
#gate .banner-close:hover{background:rgba(30,36,48,.8)}
#gate .banner-image{display:block;width:100%;height:auto;max-height:65vh;object-fit:contain;background:var(--g-bg-4)}
#gate .banner-image[hidden]{display:none}
#gate .banner-body{padding:22px 24px 24px}
#gate .banner-body h3{font-family:var(--display);font-size:18px;font-weight:500;color:var(--g-ink);margin:0 0 8px}
#gate .banner-body p{font-size:13.5px;line-height:1.6;color:var(--g-ink-60);margin:0 0 18px;white-space:pre-wrap}
#gate .banner-actions{display:flex;gap:10px;flex-wrap:wrap}

/* ── site chatbot widget ── */
#gate .chat-widget{position:fixed;right:20px;bottom:20px;z-index:90}
#gate .chat-widget[hidden]{display:none}
#gate .chat-fab{position:relative;width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
  background:var(--g-accent);color:#fff;display:grid;place-items:center;box-shadow:0 10px 26px rgba(62,99,221,.35);
  transition:transform .15s ease}
#gate .chat-fab:hover{transform:scale(1.05)}
#gate .chat-fab-badge{position:absolute;top:-2px;right:-2px;min-width:18px;height:18px;padding:0 4px;
  border-radius:99px;background:#B32626;color:#fff;font-family:var(--mono);font-size:10px;
  display:grid;place-items:center;border:2px solid var(--g-bg)}
#gate .chat-panel{position:absolute;right:0;bottom:70px;width:min(360px,calc(100vw - 40px));height:min(520px,70vh);
  background:var(--g-bg-3);border:1px solid var(--g-rule);border-radius:14px;box-shadow:0 24px 60px rgba(30,36,48,.22);
  display:flex;flex-direction:column;overflow:hidden}
#gate .chat-panel[hidden]{display:none}
#gate .chat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:14px 16px;
  background:var(--g-ink);color:#fff;flex:none}
#gate .chat-head b{display:block;font-family:var(--display);font-size:14px}
#gate .chat-head span{display:block;font-size:11.5px;color:rgba(246,247,250,.65);margin-top:2px}
#gate .chat-close{background:none;border:none;color:#fff;font-size:22px;line-height:1;cursor:pointer;padding:0 2px}
#gate .chat-messages{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
#gate .chat-bubble{max-width:85%;padding:9px 12px;border-radius:12px;font-size:13.5px;line-height:1.5;
  white-space:pre-wrap;word-break:break-word}
#gate .chat-bubble.chat-assistant{align-self:flex-start;background:var(--g-bg-4);color:var(--g-ink);
  border-bottom-left-radius:3px}
#gate .chat-bubble.chat-user{align-self:flex-end;background:var(--g-accent);color:#fff;border-bottom-right-radius:3px}
#gate .chat-typing{display:flex;gap:4px;padding:12px}
#gate .chat-typing span{width:6px;height:6px;border-radius:50%;background:var(--g-ink-30);animation:chatTyping 1.1s infinite ease-in-out}
#gate .chat-typing span:nth-child(2){animation-delay:.15s}
#gate .chat-typing span:nth-child(3){animation-delay:.3s}
@keyframes chatTyping{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){#gate .chat-typing span{animation:none;opacity:.6}}
#gate .chat-quick{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px;flex:none}
#gate .chat-quick button{border:1px solid var(--g-rule);background:var(--g-bg-4);color:var(--g-ink-60);
  border-radius:99px;padding:5px 11px;font-size:11.5px;cursor:pointer}
#gate .chat-quick button:hover{border-color:var(--g-accent);color:var(--g-accent)}
#gate .chat-lead-form{padding:10px 16px;border-top:1px solid var(--g-rule);flex:none;display:flex;flex-direction:column;gap:7px}
#gate .chat-lead-form[hidden]{display:none}
#gate .chat-lead-note{font-size:11.5px;color:var(--g-ink-60);margin:0 0 2px;line-height:1.5}
#gate .chat-lead-form input{border:1px solid var(--g-rule);border-radius:8px;padding:7px 10px;font-size:13px;
  font-family:var(--body);color:var(--g-ink);background:var(--g-bg-3)}
#gate .chat-lead-actions{display:flex;gap:8px;align-items:center}
#gate .chat-lead-msg{font-size:11.5px;color:var(--g-ink-60);margin:0}
#gate .chat-input-row{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--g-rule);flex:none}
#gate .chat-input-row input{flex:1;border:1px solid var(--g-rule);border-radius:99px;padding:9px 14px;
  font-size:13.5px;font-family:var(--body);color:var(--g-ink);background:var(--g-bg-3)}
@media (max-width:480px){
  #gate .chat-widget{right:14px;bottom:14px}
  #gate .chat-panel{width:calc(100vw - 28px);height:min(480px,72vh)}
}
#gate .gate-card{background:transparent}
#gate .gate-mark{background:var(--g-accent);color:var(--g-on-accent)}
#gate .gate-card h1{color:var(--g-ink)}
#gate .gate-sub{color:var(--g-ink-60)}
#gate .gate-card label{color:var(--g-ink-60)}
#gate .gate-card input,#gate .gate-card textarea{background:var(--g-bg);border-color:var(--g-rule);color:var(--g-ink)}
#gate .gate-card input:focus,#gate .gate-card textarea:focus{outline:2px solid var(--g-accent);outline-offset:1px}
#gate .gate-msg{color:var(--g-red)}

/* ============================================================================
   Server-rendered public pages (blog, careers, sitemap-adjacent) — see
   server/public_pages.py. Plain top-level <body class="pub-page">, not
   nested under #gate, so these use the app's own :root tokens directly
   rather than the #gate-scoped --g-* aliases (same palette either way,
   since the #gate rule block above now mirrors :root).
   ========================================================================= */
body.pub-page{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.6}
.pub-nav{display:flex;align-items:center;gap:16px;padding:16px 32px;background:var(--panel);
  border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:40}
.pub-nav-brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:15px;
  font-weight:500;color:var(--ink);text-decoration:none}
.pub-nav-brand .brand-mark{width:28px;height:28px}
.pub-nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--rule);border-radius:8px;
  width:38px;height:38px;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;flex:0 0 auto}
.pub-nav-links{display:flex;align-items:center;gap:22px;margin-left:auto}
.pub-nav-link{color:var(--ink-60);text-decoration:none;font-size:13.5px;white-space:nowrap}
.pub-nav-link:hover{color:var(--ink)}
.pub-nav-cta{color:var(--ink);font-weight:500;padding:8px 14px;border:1px solid var(--rule);border-radius:8px}
.pub-nav-cta:hover{border-color:var(--teal);color:var(--teal)}
@media (max-width:900px){
  .pub-nav-toggle{display:flex}
  .pub-nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    gap:0;background:var(--panel);border-bottom:1px solid var(--rule);padding:8px 20px 16px;
    box-shadow:0 12px 24px rgba(20,24,32,.08)}
  .pub-nav-links.open{display:flex}
  .pub-nav-links .pub-nav-link{padding:12px 0;border-bottom:1px solid var(--rule)}
  .pub-nav-links .pub-nav-cta{border:none;padding:14px 0 6px;text-align:left}
}
.pub-main{max-width:860px;margin:0 auto;padding:48px 32px 80px}
.pub-main-wide{max-width:1180px}
.pub-footer{max-width:1180px;margin:0 auto;padding:40px 32px 28px;color:var(--ink-60);font-size:12.5px}
.pub-footer a:not(.btn){color:var(--teal);text-decoration:none}
.pub-footer-cols{display:grid;grid-template-columns:1.6fr repeat(5,1fr);gap:24px;margin-bottom:24px}
@media (max-width:1080px){.pub-footer-cols{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:700px){.pub-footer-cols{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.pub-footer-cols{grid-template-columns:1fr}}
.pub-footer-brand b{display:block;font-family:var(--display);font-size:15px;color:var(--ink);margin-bottom:6px;font-weight:500}
.pub-footer-brand p{font-size:12.5px;color:var(--ink-60);line-height:1.6;margin:0;max-width:32ch}
.pub-footer-col{display:flex;flex-direction:column;gap:8px}
.pub-footer-col h2{font-family:var(--display);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-30);margin:0 0 4px;font-weight:500}
.pub-footer-col a:not(.btn){color:var(--ink-60);font-size:13px}
.pub-footer-col a:not(.btn):hover{color:var(--teal)}
.pub-footer-bottom{font-size:12px;color:var(--ink-30);border-top:1px solid var(--rule);padding-top:16px}

.pub-head{margin-bottom:28px}
.pub-head h1{font-family:var(--display);font-size:30px;font-weight:500;letter-spacing:-.01em;margin:0 0 8px}
.pub-head p{color:var(--ink-60);font-size:15px;margin:0;max-width:60ch}

.pub-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.pub-chip{font-size:12.5px;padding:6px 13px;border-radius:99px;border:1px solid var(--rule);
  background:var(--panel);color:var(--ink-60);text-decoration:none}
.pub-chip:hover{border-color:var(--teal);color:var(--teal)}
.pub-chip.on{border-color:var(--teal);color:var(--teal-dk);background:var(--teal-10)}

.pub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media (max-width:640px){.pub-grid{grid-template-columns:1fr}}
.pub-card{display:block;background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);
  padding:20px;text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:transform .15s,border-color .15s}
.pub-card:hover{transform:translateY(-2px);border-color:var(--teal)}
.pub-card-img{display:block;width:calc(100% + 40px);margin:-20px -20px 14px;aspect-ratio:16/9;
  object-fit:cover;border-radius:var(--r) var(--r) 0 0}
.pub-article-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);margin:0 0 24px}
.pub-card-cat{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--teal);margin-bottom:8px}
.pub-card-firm{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--teal);margin:0 0 6px;font-weight:600}
.pub-card h2,.pub-card h3{font-family:var(--display);font-size:15.5px;font-weight:500;color:var(--ink);margin:0 0 8px;line-height:1.35}
.pub-card p{font-size:13px;color:var(--ink-60);line-height:1.55;margin:0 0 12px}
.pub-card-meta{font-size:11.5px;color:var(--ink-30)}
.pub-empty{color:var(--ink-60);font-size:14px;padding:24px 0}
.pub-note{margin-top:28px;padding-top:18px;border-top:1px dashed var(--rule);
  font-size:12.5px;line-height:1.6;color:var(--ink-30);max-width:76ch}

/* ── /modules ── */
.mod-principle{margin:18px 0 0;padding:13px 16px;border-radius:10px;background:var(--teal-10);
  border:1px solid var(--rule);font-size:13.5px;line-height:1.6;color:var(--ink-60);max-width:none}
.mod-principle b{color:var(--ink)}
.mod-group-head{display:flex;align-items:center;gap:11px;font-family:var(--display);font-size:16px;font-weight:500;
  margin:38px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.mod-group-count{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--ink-30);
  border:1px solid var(--rule);border-radius:99px;padding:2px 9px}
.mod-page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:1000px){.mod-page-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.mod-page-grid{grid-template-columns:1fr}}
.mod-page-card{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);padding:17px 18px;
  position:relative;overflow:hidden;box-shadow:var(--shadow);
  transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s}
.mod-page-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--teal);
  transform:scaleY(0);transform-origin:top;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.mod-page-card:hover{transform:translateY(-3px);border-color:var(--teal);
  box-shadow:0 1px 3px rgba(24,32,48,.07),0 16px 34px -12px rgba(24,32,48,.15)}
.mod-page-card:hover::before{transform:scaleY(1)}
.mod-page-card h3{font-family:var(--display);font-size:14.5px;font-weight:500;color:var(--ink);margin:0 0 6px}
.mod-page-card p{font-size:12.5px;line-height:1.6;color:var(--ink-60);margin:0}
@media (prefers-reduced-motion:reduce){.mod-page-card,.mod-page-card::before{transition:none}}

/* ── jurisdictions ──
   Three coverage levels, each with its own colour, so the page cannot be
   skimmed as "five markets, all equally supported": live (built and
   shipping), partial (engines exist, no module screen yet) and none (not
   configured). The colour is carried by the status pill and the card's top
   edge, never by colour alone — the label always states it in words too. */
.juris-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:1000px){.juris-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.juris-grid{grid-template-columns:1fr}}
.juris-card{display:flex;flex-direction:column;gap:7px;background:var(--panel);border:1px solid var(--rule);
  border-radius:var(--r);padding:20px;text-decoration:none;color:inherit;box-shadow:var(--shadow);
  position:relative;overflow:hidden;transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .3s,box-shadow .3s}
.juris-card::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--rule)}
.juris-card.juris-live::before{background:#1F9D6B}
.juris-card.juris-partial::before{background:#B9852A}
.juris-card.juris-none::before{background:#9AA1AC}
.juris-card:hover{transform:translateY(-3px);border-color:var(--teal);
  box-shadow:0 1px 3px rgba(24,32,48,.07),0 18px 40px -12px rgba(24,32,48,.16)}
.juris-flag{display:inline-grid;place-items:center;width:34px;height:24px;border-radius:4px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;font-weight:600;
  background:var(--teal-10);color:var(--teal-dk);border:1px solid var(--rule)}
.juris-flag-lg{width:44px;height:30px;font-size:13px;margin-right:12px;vertical-align:middle}
.juris-card h3{font-family:var(--display);font-size:17px;font-weight:500;color:var(--ink);margin:4px 0 0}
.juris-status{display:inline-block;align-self:flex-start;font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;padding:3px 9px;border-radius:99px;border:1px solid var(--rule);color:var(--ink-60)}
.juris-live .juris-status,.juris-status.juris-live{color:#157A52;border-color:rgba(31,157,107,.32);background:rgba(31,157,107,.08)}
.juris-partial .juris-status,.juris-status.juris-partial{color:#8A6216;border-color:rgba(185,133,42,.32);background:rgba(232,177,74,.12)}
.juris-none .juris-status,.juris-status.juris-none{color:#4F5765;border-color:var(--rule);background:rgba(30,36,48,.04)}
.juris-status-lg{margin:10px 0 14px !important;font-size:11px;padding:5px 12px}
.juris-card p{font-size:13px;color:var(--ink-60);line-height:1.6;margin:2px 0 0;flex:1}
.juris-more{font-size:12.5px;color:var(--teal);margin-top:12px}
.juris-points{margin:0;padding-left:20px;line-height:1.8;font-size:13.5px;color:var(--ink-60)}
.juris-points li{margin-bottom:6px}
.juris-others{margin-top:24px}
.juris-others h3{font-family:var(--display);font-size:15px;font-weight:500;margin:0 0 12px}
.juris-chips{display:flex;flex-wrap:wrap;gap:10px}
.juris-chip{display:flex;flex-direction:column;gap:3px;padding:11px 15px;border-radius:10px;
  border:1px solid var(--rule);background:var(--panel);text-decoration:none;transition:border-color .2s,transform .2s}
.juris-chip:hover{border-color:var(--teal);transform:translateY(-2px)}
.juris-chip b{font-family:var(--display);font-size:13.5px;font-weight:500;color:var(--ink)}
.juris-chip span{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-30)}
.juris-chip.juris-live span{color:#1F9D6B}
.juris-chip.juris-partial span{color:#B9852A}
@media (prefers-reduced-motion:reduce){
  .juris-card,.juris-chip{transition:none}
}

.pub-pager{display:flex;gap:6px;margin-top:28px}
.pub-page-link{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--rule);
  border-radius:7px;color:var(--ink-60);text-decoration:none;font-size:13px;font-family:var(--mono)}
.pub-page-link.on{border-color:var(--teal);color:#fff;background:var(--teal)}

.pub-article h1{font-family:var(--display);font-size:28px;font-weight:500;letter-spacing:-.01em;
  line-height:1.25;margin:0 0 10px}
.pub-article-meta{color:var(--ink-60);font-size:12.5px;margin:0 0 26px}
.pub-article h2,.pub-article h3{font-family:var(--display);font-weight:500;color:var(--ink);margin:32px 0 12px}
.pub-article h2{font-size:20px}
.pub-article h3{font-size:17px}
.pub-article p{margin:0 0 16px;color:var(--ink);font-size:15px}
.pub-article ol,.pub-article ul{margin:0 0 16px;padding-left:22px}
.pub-article li{margin-bottom:8px;font-size:15px}
.pub-article hr{border:none;border-top:1px solid var(--rule);margin:32px 0}
.pub-article code{background:var(--panel-2);padding:2px 5px;border-radius:4px;font-family:var(--mono);font-size:13px}
.pub-article a:not(.btn){color:var(--teal)}

.pub-faq{margin-top:36px;border-top:1px solid var(--rule);padding-top:24px}
.pub-faq h2{font-family:var(--display);font-size:18px;font-weight:500;margin:0 0 14px}
.pub-faq details{border:1px solid var(--rule);border-radius:var(--r);padding:12px 16px;margin-bottom:10px;background:var(--panel)}
.pub-faq summary{cursor:pointer;font-family:var(--display);font-size:13.5px;font-weight:500;color:var(--ink)}
.pub-faq p{margin:10px 0 0;color:var(--ink-60);font-size:13.5px}

.pub-related{margin-top:32px;border-top:1px solid var(--rule);padding-top:24px}
.pub-related h2{font-family:var(--display);font-size:16px;font-weight:500;margin:0 0 12px}
.pub-related ul{margin:0;padding:0;list-style:none}
.pub-related li{margin-bottom:8px}
.pub-related a:not(.btn){color:var(--teal);text-decoration:none;font-size:14px}
.pub-related a:hover{text-decoration:underline}

.pub-facts{display:flex;flex-wrap:wrap;gap:20px;margin:18px 0 28px;padding:16px 18px;
  background:var(--panel-2);border-radius:var(--r)}
.pub-fact{display:flex;flex-direction:column;gap:2px}
.pub-fact b{font-family:var(--display);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-60)}
.pub-fact span{font-size:13.5px;color:var(--ink)}

#apply-root{margin-top:28px;border-top:1px solid var(--rule);padding-top:24px}
#apply-root h2{font-family:var(--display);font-size:18px;font-weight:500;margin:0 0 14px}
#apply-root label{display:block;font-family:var(--display);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-60);margin-top:14px}
#apply-root input,#apply-root textarea{display:block;width:100%;margin-top:6px;padding:10px 12px;
  border:1px solid var(--rule);border-radius:var(--r);background:#fff;font:inherit}
#apply-root .check{display:flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--body);
  font-size:13px;text-transform:none;letter-spacing:0;color:var(--ink)}
#apply-root .check input{width:auto;margin:0}
#apply-root button{margin-top:18px}
#apply-root .apply-msg{min-height:20px;margin-top:10px;font-size:13px;color:var(--crimson)}
#apply-root .apply-confirm{padding:16px;border:1px solid var(--teal);border-radius:var(--r);background:var(--teal-10);color:var(--ink)}

/* ============================================================================
   About — the signature scroll-driven milestone timeline + team grid.
   The line-fill height is scrubbed by GSAP ScrollTrigger (see landing.js);
   everything else here is plain CSS so the section still reads correctly
   with JS/GSAP disabled or under prefers-reduced-motion.
   ========================================================================= */
#gate .timeline-wrap{margin-top:56px}
#gate .timeline-track{position:relative;display:flex}
#gate .timeline-line{position:absolute;left:19px;top:6px;bottom:6px;width:2px;background:var(--g-rule);border-radius:2px}
#gate .timeline-line-fill{width:100%;height:0%;background:var(--g-accent);border-radius:2px;transform-origin:top}
#gate .timeline-items{display:flex;flex-direction:column;gap:40px;width:100%;padding-left:56px}
#gate .timeline-item{position:relative;opacity:.4;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
#gate .timeline-item.on{opacity:1;transform:translateY(0)}
#gate .timeline-item::before{content:'';position:absolute;left:-45px;top:4px;width:12px;height:12px;border-radius:50%;
  background:var(--g-bg);border:2px solid var(--g-rule);transition:background .4s ease,border-color .4s ease,transform .4s ease}
#gate .timeline-item.on::before{background:var(--g-accent);border-color:var(--g-accent);transform:scale(1.2)}
#gate .timeline-item .ti-year{font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--g-ink-30);
  font-weight:600;transition:color .4s ease}
#gate .timeline-item.on .ti-year{color:var(--g-accent)}
#gate .timeline-item h3{font-family:var(--display);font-size:17px;font-weight:500;color:var(--g-ink);margin:4px 0 8px}
#gate .timeline-item p{font-size:14px;line-height:1.6;color:var(--g-ink-60);margin:0 0 12px;max-width:60ch}
#gate .timeline-item img{max-width:280px;width:100%;border-radius:10px;display:block;margin-top:8px;border:1px solid var(--g-rule)}
#gate .timeline-empty{padding:28px 20px;color:var(--g-ink-60);border:1px dashed var(--g-rule);border-radius:12px}

/* auto-fit rather than a fixed 3 columns: with one or two people published,
   a rigid 3-column grid left two thirds of the row empty and the section
   read as broken rather than small. Cards now size themselves to the space
   and the row stays visually complete at any count. */
#gate .team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,380px));gap:20px}
@media (max-width:600px){#gate .team-grid{grid-template-columns:1fr}}
#gate .team-card{background:var(--g-bg-3);border:1px solid var(--g-rule);border-radius:14px;padding:22px;
  transition:transform .2s ease,border-color .2s ease}
#gate a.team-card{display:block;color:inherit;text-decoration:none}
#gate .team-card:hover{transform:translateY(-3px);border-color:var(--g-accent-20)}
#gate .team-card .tc-more{font-size:12.5px;color:var(--g-accent);font-weight:500}
#gate .team-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;margin-bottom:14px;border:1px solid var(--g-rule)}
#gate .team-photo-fallback{width:64px;height:64px;border-radius:50%;margin-bottom:14px;display:grid;place-items:center;
  background:var(--g-accent-10);color:var(--g-accent-ink);font-family:var(--display);font-weight:600;font-size:20px}
#gate .team-card h3{font-family:var(--display);font-size:15px;font-weight:500;color:var(--g-ink);margin:0 0 2px}
#gate .team-card .tc-role{font-size:12.5px;color:var(--g-accent);margin-bottom:10px}
#gate .team-card p{font-size:13px;line-height:1.6;color:var(--g-ink-60);margin:0 0 12px}
#gate .team-card .tc-expertise{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
#gate .team-card .tc-expertise span{font-family:var(--mono);font-size:10px;padding:3px 8px;border-radius:99px;
  background:var(--g-bg-4);color:var(--g-ink-60)}
#gate .team-card a{font-size:12.5px;color:var(--g-accent);text-decoration:none}
#gate .team-card a:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){
  #gate .timeline-item{transition:none;opacity:1;transform:none}
  #gate .timeline-item::before{transition:none}
}

/* "Our Clients" — a continuously scrolling logo strip. The track is the
   tile list rendered twice back to back (see landing.js renderOurClients);
   animating it to -50% loops seamlessly since that's exactly one full copy.
   Paused on hover so a name/logo can actually be read, and replaced with a
   static wrapped row for prefers-reduced-motion. */
#gate .clients-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
#gate .clients-track{display:flex;align-items:center;width:max-content;animation:clientsScroll 32s linear infinite}
#gate .clients-marquee:hover .clients-track{animation-play-state:paused}
#gate .clients-group{display:flex;align-items:center;gap:56px;padding-right:56px}
#gate .client-tile{flex:0 0 auto;height:40px;display:flex;align-items:center;opacity:.6;filter:grayscale(1);transition:opacity .2s ease,filter .2s ease}
#gate .client-tile:hover{opacity:1;filter:grayscale(0)}
#gate .client-tile img{height:100%;width:auto;max-width:140px;object-fit:contain}
@keyframes clientsScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  #gate .clients-track{animation:none;width:auto}
  #gate .clients-group{flex-wrap:wrap;justify-content:center}
  #gate .clients-group[aria-hidden]{display:none}
  #gate .clients-marquee{-webkit-mask-image:none;mask-image:none}
}