/* Acclines marketing — homepage (Close Evidence positioning).
   Scoped to index.html only: this file is loaded by index.html alone and adds
   new selectors on top of site.css (never restyles its shared primitives, so the
   other six pages are untouched). Reuses site.css tokens from :root and its
   shared classes (.wrap, .narrow, .btn, .shot, .cap, .label, .body-c, .reveal…).
   Colour law holds: blue = AI provenance only, amber = needs attention,
   green = confirmed/balanced. No gradients, no dark hero, no decorative blue. */

/* ============================================================
   HERO
   ============================================================ */
.home-hero{position:relative;overflow:hidden;padding:70px 0 78px}
.home-hero .wrap{position:relative;z-index:1}
.home-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:64px;align-items:center}

.home-hero .kicker{margin-bottom:22px}
.home-hero h1{
  font-family:var(--serif);font-weight:500;
  font-size:clamp(38px,5.1vw,62px);line-height:1.03;letter-spacing:-.022em;
  color:var(--ink);text-align:left;max-width:15ch;margin:0 0 22px}
.home-hero .sub{
  font-size:clamp(18px,2vw,21px);line-height:1.5;color:var(--meta);
  max-width:34ch;margin:0 0 32px;text-align:left}
.home-hero .hero-cta{justify-content:flex-start;flex-wrap:wrap}
.home-hero .note{margin-top:20px;text-align:left}

/* ---------- the calm sequence stage ---------- */
.stage{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:16px;box-shadow:var(--shadow-shot);
  aspect-ratio:5/4.4;overflow:hidden}
.stage-head{
  display:flex;align-items:center;gap:9px;
  padding:14px 18px;border-bottom:1px solid var(--border);
  font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--meta)}
.stage-head .peak{width:15px;height:15px;color:var(--action);flex:none}
.stage-head .dotrow{margin-left:auto;display:flex;gap:5px}
.stage-head .dotrow i{width:6px;height:6px;border-radius:50%;background:var(--border)}

.seq{position:absolute;inset:44px 0 0;overflow:hidden}
.scene{position:absolute;inset:0;padding:22px 22px 20px;display:flex;flex-direction:column;opacity:0}
/* Base / no-motion / no-JS: rest on the resolved final frame (Scene D). */
.scene.s-d{opacity:1}
.scene-cap{margin-top:auto;font-size:12.5px;color:var(--meta);line-height:1.45;padding-top:14px}
.scene-cap b{color:var(--ink);font-weight:600}
.step-eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--meta);margin-bottom:14px}

/* mini specimen chrome shared by scenes */
.spec-row{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink);padding:9px 0;border-top:1px solid var(--border)}
.spec-row:first-of-type{border-top:0}
.spec-k{color:var(--meta);width:78px;flex:none;font-size:12px}
.mono{font-family:var(--font);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}

/* Scene A — a source document becomes structured work (blue provenance clears) */
.doc-mini{display:flex;gap:14px;align-items:stretch}
.doc-edge{width:58px;flex:none;border:1px solid var(--border);border-radius:7px;background:var(--canvas);
  padding:9px 8px;display:flex;flex-direction:column;gap:5px}
.doc-edge i{height:3px;border-radius:2px;background:var(--g300);display:block}
.doc-edge i:nth-child(1){width:60%}.doc-edge i:nth-child(2){width:90%}
.doc-edge i:nth-child(3){width:80%}.doc-edge i:nth-child(4){width:70%}
.doc-edge i:nth-child(5){width:88%}.doc-edge i:nth-child(6){width:52%}
.fields{flex:1;min-width:0}
.aiv{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:5px;
  background:var(--ai-bg);color:var(--ai-text);border:1px solid var(--ai-border);
  font-size:12.5px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.aiv .tick{opacity:0}
.aiv .spark{width:11px;height:11px}
/* the confirmed (green) resting look */
.scene.s-a .aiv{background:var(--ok-bg);color:var(--ok-text);border-color:var(--ok-border)}
.scene.s-a .aiv .spark{display:none}
.scene.s-a .aiv .tick{opacity:1}

/* Scene B — a bank line reconciles */
.bankline{border:1px solid var(--border);border-radius:8px;padding:11px 13px;background:var(--surface)}
.bankline .top{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink)}
.bankline .amt{margin-left:auto;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.match{display:flex;align-items:center;gap:9px;margin:11px 0 0;padding-left:6px;
  font-size:12px;color:var(--meta)}
.match .link{width:14px;height:14px;color:var(--meta);flex:none}
.tie{display:flex;align-items:center;justify-content:space-between;margin-top:14px;
  padding:10px 12px;border-radius:8px;border:1px solid var(--ok-border);background:var(--ok-bg)}
.tie .lab{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ok-text)}
.tie .val{font-size:12.5px;color:var(--ok-text);font-feature-settings:"tnum";display:flex;align-items:center;gap:7px}

/* Scene C — close status turns ready  (compact) */
.mini-close .crow{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--border);font-size:12.5px;color:var(--ink)}
.mini-close .crow:first-child{border-top:0}
.mini-close .cover{margin-top:14px}
.cover-bar{height:6px;border-radius:99px;background:var(--canvas);border:1px solid var(--border);overflow:hidden}
.cover-fill{display:block;height:100%;width:82%;background:var(--ok-text);border-radius:99px}
.cover-lab{display:flex;justify-content:space-between;font-size:11px;color:var(--meta);margin-top:8px}

/* Scene D — records tie out (the resolved frame) */
.scene.s-d{align-items:center;justify-content:center;text-align:center}
.peak-big{width:96px;height:96px;color:var(--action);margin:0 auto}
.resolved{margin-top:20px}
.resolved .badge{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:99px;
  background:var(--ok-bg);color:var(--ok-text);border:1px solid var(--ok-border);
  font-size:12px;font-weight:600;letter-spacing:.02em}
.resolved .rlead{font-family:var(--serif);font-size:20px;color:var(--ink);margin-top:16px;letter-spacing:-.01em}
.resolved .rsub{font-size:12.5px;color:var(--meta);margin-top:6px}

/* shared status dots / ticks */
.dot{width:8px;height:8px;border-radius:50%;flex:none}
.dot.amber{background:var(--warn-text)}
.dot.green{background:var(--ok-text)}
.ic{width:15px;height:15px;flex:none}
.ic.g{color:var(--ok-text)}
.ic.a{color:var(--warn-text)}

/* ============================================================
   SEQUENCE MOTION  — one 18s master clock, restrained crossfades.
   Everything is gated behind no-preference; the base state above is the
   static resolved frame, so reduced-motion and JS-off both rest on Scene D.
   ============================================================ */
@media (prefers-reduced-motion:no-preference){
  .scene{animation:sceneHide 18s linear infinite both}
  .scene.s-a{animation-name:sceneA}
  .scene.s-b{animation-name:sceneB}
  .scene.s-c{animation-name:sceneC}
  .scene.s-d{animation-name:sceneD}

  @keyframes sceneA{0%{opacity:0}2%{opacity:1}22%{opacity:1}26%{opacity:0}100%{opacity:0}}
  @keyframes sceneB{0%,24%{opacity:0}28%{opacity:1}47%{opacity:1}51%{opacity:0}100%{opacity:0}}
  @keyframes sceneC{0%,49%{opacity:0}53%{opacity:1}72%{opacity:1}76%{opacity:0}100%{opacity:0}}
  @keyframes sceneD{0%,74%{opacity:0}78%{opacity:1}97%{opacity:1}100%{opacity:0}}
  @keyframes sceneHide{0%,100%{opacity:0}}

  /* Scene A: values sit AI-blue, then clear to confirmed green within the window */
  .scene.s-a .aiv{animation:aiClear 18s linear infinite both}
  .scene.s-a .aiv .spark{animation:sparkOut 18s linear infinite both}
  .scene.s-a .aiv .tick{animation:tickIn 18s linear infinite both}
  .scene.s-a .aiv.f2{animation-delay:.35s}
  @keyframes aiClear{
    0%,10%{background:var(--ai-bg);color:var(--ai-text);border-color:var(--ai-border)}
    16%,24%{background:var(--ok-bg);color:var(--ok-text);border-color:var(--ok-border)}
    26%,100%{background:var(--ai-bg);color:var(--ai-text);border-color:var(--ai-border)}}
  @keyframes sparkOut{0%,12%{opacity:1}16%,100%{opacity:0}}
  @keyframes tickIn{0%,13%{opacity:0}18%,24%{opacity:1}26%,100%{opacity:0}}

  /* Scene B: the tie-out band settles into balance */
  .scene.s-b .tie{animation:tieSettle 18s linear infinite both}
  @keyframes tieSettle{
    0%,30%{border-color:var(--border);background:var(--canvas)}
    30%{border-color:var(--border);background:var(--canvas)}
    40%,100%{border-color:var(--ok-border);background:var(--ok-bg)}}
  .scene.s-b .tie .lab,.scene.s-b .tie .val{animation:tieText 18s linear infinite both}
  @keyframes tieText{0%,32%{color:var(--meta)}42%,100%{color:var(--ok-text)}}

  /* Scene C: coverage grows, last item resolves to green */
  .scene.s-c .cover-fill{animation:coverGrow 18s linear infinite both}
  @keyframes coverGrow{0%,53%{width:34%}66%,100%{width:82%}}
  .scene.s-c .crow.last .dot{animation:dotResolve 18s linear infinite both}
  @keyframes dotResolve{0%,60%{background:var(--warn-text)}66%,100%{background:var(--ok-text)}}

  /* Scene D: the Tie-Out Peak draws its rules and ties out */
  .peak-big .r1,.peak-big .r2,.peak-big .r3{transform-box:fill-box;transform-origin:center;
    animation:peakCascade 18s ease-in-out infinite both}
  .peak-big .r2{animation-delay:.28s}
  .peak-big .r3{animation-delay:.56s}
  .peak-big .tieln{transform-box:fill-box;transform-origin:center;
    animation:peakTie 18s ease-in-out infinite both}
  @keyframes peakCascade{
    0%,74%{transform:scaleX(0);opacity:0}
    80%{transform:scaleX(1);opacity:1}
    96%{transform:scaleX(1);opacity:1}
    100%{transform:scaleX(0);opacity:0}}
  @keyframes peakTie{
    0%,80%{transform:translateX(6px);opacity:0}
    88%{transform:translateX(0);opacity:1}
    96%{transform:translateX(0);opacity:1}
    100%{transform:translateX(6px);opacity:0}}
  .scene.s-d .resolved{animation:resolveIn 18s linear infinite both}
  @keyframes resolveIn{0%,84%{opacity:0;transform:translateY(6px)}90%,97%{opacity:1;transform:none}100%{opacity:0}}
}

/* ============================================================
   NARRATIVE
   ============================================================ */
.lead-serif{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.3vw,38px);
  line-height:1.18;letter-spacing:-.015em;color:var(--ink);max-width:20ch}
.measure{max-width:60ch}

/* Section: the workflow steps (2) — reuse .split for shots, add a step ribbon */
.stepline{display:flex;flex-direction:column;gap:14px;margin-top:30px}
.stepline .st{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline}
.stepline .st .n{font-family:var(--font);font-size:12px;font-weight:600;color:var(--meta);
  border:1px solid var(--border);border-radius:99px;width:26px;height:26px;display:grid;place-items:center;flex:none}
.stepline .st h4{font-size:15.5px;font-weight:600;color:var(--ink);display:inline}
.stepline .st p{font-size:15px;color:var(--meta);line-height:1.5;margin-top:2px}

/* Homepage-only: keep links out of AI-blue (blue = provenance only here).
   Scoped to this file, which loads on index.html alone, so subpages keep their
   shared .more accent. */
/* Ink (not blue) needs its own link affordance: a dotted ink underline on the
   label (goes solid on hover) so it reads as a link without borrowing the blue.
   The underline sits on the label span so the arrow can slide free of it. */
.txt .more,.close-copy .more{color:var(--ink)}
.txt .more .more-txt,.close-copy .more .more-txt{text-decoration:underline;text-decoration-style:dotted;text-decoration-color:var(--ink);text-decoration-thickness:1px;text-underline-offset:5px}
.txt .more:hover .more-txt,.close-copy .more:hover .more-txt{text-decoration-style:solid}

/* Persona fork — two quiet doors, not a pricing grid */
.fork{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:34px}
.fork-card{display:block;border:1px solid var(--border);background:var(--surface);border-radius:14px;
  padding:28px 28px 24px;box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .15s ease}
.fork-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-shot)}
.fork-card .k{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--meta);margin-bottom:12px}
.fork-card h3{font-family:var(--serif);font-weight:500;font-size:23px;letter-spacing:-.01em;color:var(--ink);margin:0 0 8px}
.fork-card p{font-size:15px;color:var(--meta);line-height:1.5;margin-bottom:18px}
.fork-card .go{font-size:14.5px;font-weight:500;color:var(--ink);display:inline-flex;align-items:baseline;gap:7px}
.fork-card .go .arr{color:var(--meta);transition:transform .15s ease}
.fork-card:hover .go .arr{transform:translateX(3px)}
@media(max-width:760px){.fork{grid-template-columns:1fr}}

/* quiet callouts (differentiation, local-first) */
.callout{border-left:2px solid var(--action);padding:6px 0 6px 22px;margin:34px 0 0;max-width:62ch}
.callout p{font-family:var(--serif);font-size:20px;line-height:1.45;color:var(--ink);letter-spacing:-.01em}
.callout p .q{color:var(--meta);font-style:italic}

/* ============================================================
   the close-checklist specimen (faithful HTML) — stands on its own under the
   heading, so the section is one statement and one visual
   ============================================================ */
.close-panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  box-shadow:var(--shadow-shot);overflow:hidden;max-width:640px;margin-top:34px}
.cp-head{display:flex;align-items:center;gap:11px;padding:16px 20px;border-bottom:1px solid var(--border)}
.cp-head .peak{width:17px;height:17px;color:var(--action);flex:none}
.cp-head .ttl{font-size:14px;font-weight:600;color:var(--ink)}
.cp-head .sub{font-size:12px;color:var(--meta)}
.cp-head .pillstat{margin-left:auto;font-size:11px;font-weight:600;letter-spacing:.03em;
  padding:4px 10px;border-radius:99px;background:var(--warn-bg);color:var(--warn-text);border:1px solid var(--warn-border)}
.cp-list{padding:4px 20px 8px}
.cp-item{display:grid;grid-template-columns:16px 1fr auto;gap:12px;align-items:center;
  padding:13px 0;border-top:1px solid var(--border)}
.cp-item:first-child{border-top:0}
.cp-item .lead{font-size:13.5px;color:var(--ink)}
.cp-item .fam{font-size:11px;color:var(--meta);letter-spacing:.02em}
.cp-item .n{font-size:12px;color:var(--meta);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.cp-item.done .lead{color:var(--meta)}
.cp-foot{padding:16px 20px;border-top:1px solid var(--border);background:var(--canvas)}
.cp-foot .cover-bar{height:7px}
.cp-foot .cover-fill{width:82%}
.cp-foot .cover-lab{margin-top:10px}
.cp-foot .cover-lab b{color:var(--ink)}

/* jurisdiction row — set as a ruled ledger line (mono small caps, hairline
   dividers), matching the site's marginalia annotations rather than chips */
.juris{display:flex;flex-wrap:wrap;gap:12px 0;margin-top:26px}
.juris .j{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  color:var(--meta);padding:2px 22px;position:relative}
.juris .j+.j::before{content:"";position:absolute;left:0;top:1px;bottom:1px;border-left:1px solid var(--border)}
.juris .j b{color:var(--ink);font-weight:500}

/* ============================================================
   CLOSING CTA
   ============================================================ */
.close-cta{text-align:center;padding:96px 0 240px;background:var(--canvas)}
/* The closing still-life is the resolved state of the hero's loose evidence:
   a squared file and the accountant's double rule. It stays nearly monochrome
   so product-state colours keep their meaning. */
/* bottom-anchor the still-life so the papers sit flush on the footer edge —
   no fade, no gap */
.close-cta .calm-close-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;opacity:.16;pointer-events:none}
/* the closing photo carries its own texture — drop the circle motif here so it
   doesn't add a faint band between the papers and the footer */
.close-cta .texture{display:none}
.close-cta h2{font-family:var(--serif);font-weight:500;font-size:clamp(32px,4.4vw,48px);
  line-height:1.1;letter-spacing:-.02em;color:var(--ink);margin:0 auto 14px;max-width:20ch}
.close-cta p{font-size:18px;color:var(--meta);max-width:48ch;margin:0 auto 30px}
.close-cta .hero-cta{justify-content:center;flex-wrap:wrap}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .home-grid{grid-template-columns:1fr;gap:40px}
  .home-hero h1,.home-hero .sub{max-width:none}
  .stage{max-width:460px;margin:0 auto;width:100%}
}
@media(max-width:560px){
  .home-hero{padding:44px 0 56px}
  .close-cta{padding:76px 0 190px}
  .close-cta .calm-close-bg{opacity:.12;object-position:58% 100%}
}