/* ============================================================
   Civexa AI — brand layer
   ============================================================

   This sits ON TOP of content.css, which already defines the approved
   palette, the type stack and the nav/footer/button vocabulary. Nothing here
   redefines a brand colour: the tokens below are all derived from the ones
   content.css publishes, so the approved identity stays the single source and
   a change there still propagates everywhere.

   What this adds is the editorial register the brand specification asks for —
   large headlines, real whitespace, restrained motion, and a set of section
   patterns the story pages compose from. The visual weight comes from type,
   space and the product itself; there are no decorative gradients, no glowing
   abstractions, and no card grid standing in for an argument.

   Motion communicates relationship or transformation and nothing else, and
   every transition here is inside a prefers-reduced-motion guard.
   ============================================================ */

:root{
  /* Derived roles. --ink-inv is the one new surface: an near-black teal for
     the two full-bleed moments in the story, dark enough to carry white text
     at 14:1 and still unmistakably the brand's teal rather than grey. */
  --ink-inv:#0B2F2C;
  --ink-inv-2:#103F3B;
  --on-inv:#EAF4F2;
  --on-inv-soft:#A9C6C2;
  --rule:var(--line);
  --measure:68ch;

  --step-0:1rem;
  --step-1:clamp(1.05rem,.98rem + .35vw,1.25rem);
  --step-2:clamp(1.35rem,1.2rem + .7vw,1.75rem);
  --step-3:clamp(1.8rem,1.5rem + 1.4vw,2.6rem);
  --step-4:clamp(2.3rem,1.8rem + 2.4vw,3.6rem);
  --step-5:clamp(2.8rem,2rem + 3.8vw,5rem);

  --gap:clamp(18px,2.2vw,30px);
  --band:clamp(64px,8vw,124px);
}

/* ---- skip link: first in the document, visible on focus ---- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--slate-950);color:#fff;padding:12px 18px;
  border-radius:0 0 8px 0;font-weight:600;text-decoration:none;
}
.skip:focus{left:0}

/* A visible focus ring everywhere, on the brand's own colour. */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--survey);outline-offset:2px;border-radius:3px;
}

/* ---- section rhythm ---- */
.band{padding:var(--band) 0}
.band-tint{background:var(--slate-100);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.band-inv{background:var(--ink-inv);color:var(--on-inv)}
.band-inv h1,.band-inv h2,.band-inv h3{color:#fff}
.band-inv .eyebrow,.band-inv .tag{color:var(--on-inv-soft)}
.band-inv p{color:var(--on-inv)}
.band-inv .muted{color:var(--on-inv-soft)}
.band-inv a:not(.btn){color:#fff;text-decoration:underline;text-underline-offset:.18em}
.band-inv .btn-ghost{border-color:rgba(255,255,255,.4);color:#fff}
.band-inv .btn-ghost:hover{background:rgba(255,255,255,.1)}

.w{max-width:1180px;margin:0 auto;padding:0 28px}
.w-narrow{max-width:760px;margin:0 auto;padding:0 28px}

/* ---- editorial type ---- */
.eyebrow{
  font-family:var(--mono);font-size:.7rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--survey);
  display:block;margin-bottom:18px;
}
.display{font-size:var(--step-5);font-weight:700;line-height:1.02;letter-spacing:-.03em}
.h-xl{font-size:var(--step-4);font-weight:700;line-height:1.06;letter-spacing:-.025em}
.h-lg{font-size:var(--step-3);font-weight:600;line-height:1.12;letter-spacing:-.02em}
.h-md{font-size:var(--step-2);font-weight:600;line-height:1.2;letter-spacing:-.015em}
.lede{font-size:var(--step-1);line-height:1.6;color:var(--slate-700);max-width:var(--measure)}
.muted{color:var(--slate-400)}
.measure{max-width:var(--measure)}

/* The narrative statement: the story beats that are one sentence on their own
   line. Large, quiet, and given room — the opposite of a feature card. */
.statement{
  font-family:var(--disp);font-weight:600;
  font-size:var(--step-3);line-height:1.28;letter-spacing:-.02em;
  max-width:24ch;
}
.statement-lg{
  font-family:var(--disp);font-weight:700;
  font-size:var(--step-4);line-height:1.12;letter-spacing:-.025em;
  max-width:18ch;
}

/* ---- the complexity list: what a developer actually has to reconcile ---- */
.tangle{
  display:grid;gap:10px;margin-top:34px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.tangle li{
  list-style:none;display:flex;gap:10px;align-items:flex-start;
  padding:14px 16px;border:1px solid var(--rule);border-radius:8px;
  background:#fff;font-size:.93rem;line-height:1.5;color:var(--slate-700);
}
.tangle b{display:block;color:var(--slate-950);font-weight:600;margin-bottom:2px}
.tangle-mark{
  width:7px;height:7px;flex:none;margin-top:8px;border-radius:1px;
  background:var(--slate-200);
}

/* ---- the signature reveal: parcel -> decision ---- */
.reveal{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1fr);margin-top:44px}
@media(min-width:900px){.reveal{grid-template-columns:290px minmax(0,1fr)}}

.reveal-steps{margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.reveal-step{
  width:100%;text-align:left;background:none;cursor:pointer;
  font:inherit;color:var(--slate-700);
  display:flex;gap:12px;align-items:flex-start;
  padding:13px 14px;border-radius:8px;border:1px solid transparent;
  transition:background .18s ease,border-color .18s ease;
}
.reveal-step:hover{background:var(--slate-100)}
.reveal-step[aria-selected="true"]{
  background:#fff;border-color:var(--rule);
  box-shadow:0 1px 2px rgba(19,78,74,.06);
}
.reveal-step[aria-selected="true"] .reveal-n{background:var(--survey);color:#fff}
.reveal-step[aria-selected="true"] .reveal-t{color:var(--slate-950)}
.reveal-n{
  flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--slate-200);color:var(--slate-700);
  font-family:var(--mono);font-size:.66rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
  transition:background .18s ease,color .18s ease;
}
.reveal-t{font-weight:600;font-size:.95rem;color:var(--slate-700);display:block}
.reveal-q{font-size:.83rem;color:var(--slate-400);display:block;margin-top:2px;line-height:1.45}

.reveal-stage{
  position:relative;background:#fff;border:1px solid var(--rule);
  border-radius:12px;padding:clamp(20px,3vw,34px);min-height:430px;
}
.reveal-panel[hidden]{display:none}
.reveal-panel h3{font-size:var(--step-2);margin-bottom:10px}
.reveal-panel>p{color:var(--slate-700);line-height:1.6;max-width:58ch}
.reveal-figure{margin-top:22px}
.reveal-cap{
  font-family:var(--mono);font-size:.7rem;color:var(--slate-400);
  margin-top:12px;line-height:1.5;
}

/* The parcel diagram. Drawn in SVG from the same vocabulary the product's own
   constraint plan uses: the boundary in ink, what the code takes in amber,
   what the ground takes in red, and what is left to build on in green. */
.parcel-svg{width:100%;height:auto;max-width:430px;display:block}
.pl-boundary{fill:#fff;stroke:var(--slate-950);stroke-width:2}
.pl-setback{fill:var(--blue);opacity:.12}
.pl-setback-line{fill:none;stroke:var(--blue);stroke-width:1.2;stroke-dasharray:4 3}
.pl-eca{fill:#B45309;opacity:.2}
.pl-eca-line{fill:none;stroke:#B45309;stroke-width:1.2;stroke-dasharray:4 3}
.pl-build{fill:var(--green);opacity:.24}
.pl-build-line{fill:none;stroke:var(--green);stroke-width:1.6}
.pl-mass{fill:var(--survey);opacity:.55}
.pl-mass-top{fill:var(--survey);opacity:.8}
.pl-label{font-family:var(--mono);font-size:8.5px;fill:var(--slate-700)}
/* A label sitting ON the massing solid, which is dark. */
.pl-label-inv{fill:#fff;font-weight:700}

.legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:16px}
.legend span{display:flex;align-items:center;gap:7px;font-size:.78rem;color:var(--slate-700)}
.legend i{width:11px;height:11px;border-radius:2px;border:1px solid var(--rule);flex:none}

/* A readout row: the numbers a step produces, with their provenance. */
.rows{border-top:1px solid var(--rule);margin-top:20px}
.row{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--rule);
}
.row-k{font-size:.9rem;color:var(--slate-700)}
.row-v{font-family:var(--mono);font-weight:700;font-size:.95rem;white-space:nowrap}
.prov{
  font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;padding:2px 6px;border-radius:3px;margin-left:8px;
  border:1px solid var(--rule);
}
.prov-v{color:#0A5C40;border-color:#BEE3CE;background:#F0FAF5}
.prov-d{color:#075985;border-color:#C7D7F5;background:#EFF5FD}
.prov-e{color:#7A4E05;border-color:#EBD3A3;background:#FDF8EE}
.prov-u{color:#9E2B22;border-color:#F1C2C4;background:#FDF1F1}

/* ---- the six outcomes ---- */
.outcomes{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:12px;overflow:hidden;margin-top:48px}
@media(min-width:700px){.outcomes{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.outcomes{grid-template-columns:1fr 1fr 1fr}}
.outcome{background:var(--paper);padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column}
.outcome-k{font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--survey);margin-bottom:14px}
.outcome h3{font-size:var(--step-2);line-height:1.2;margin-bottom:12px}
.outcome p{color:var(--slate-700);font-size:.95rem;line-height:1.6;flex:1 1 auto}
.outcome-link{
  margin-top:18px;font-weight:600;font-size:.9rem;display:inline-flex;
  align-items:center;gap:6px;align-self:flex-start;
}
.outcome-link::after{content:"→";transition:transform .18s ease}
.outcome-link:hover::after{transform:translateX(3px)}

/* ---- Ask Civexa ---- */
.ask{display:grid;gap:var(--gap);margin-top:42px}
@media(min-width:900px){.ask{grid-template-columns:1fr 1fr;align-items:start}}
.ask-qs{display:flex;flex-wrap:wrap;gap:9px}
.ask-q{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.22);
  color:var(--on-inv);border-radius:20px;padding:9px 16px;font:inherit;
  font-size:.9rem;cursor:pointer;text-align:left;
  transition:background .18s ease,border-color .18s ease;
}
.ask-q:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.ask-q[aria-selected="true"]{background:#fff;color:var(--slate-950);border-color:#fff;font-weight:600}
.ask-a{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);
  border-radius:12px;padding:clamp(20px,2.6vw,30px);
}
.ask-a[hidden]{display:none}
.ask-a .row{border-color:rgba(255,255,255,.16)}
.ask-a .rows{border-color:rgba(255,255,255,.16)}
.ask-a .row-k{color:var(--on-inv-soft)}
.ask-a .row-v{color:#fff}
.ask-src{
  margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16);
  font-size:.83rem;line-height:1.55;color:var(--on-inv-soft);
}
.ask-src b{color:#fff;font-weight:600}

/* ---- proof strip: honest, checkable properties of the engine ---- */
.proof{display:grid;gap:var(--gap);margin-top:40px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.proof div{border-left:2px solid var(--survey);padding-left:18px}
.proof h3{font-size:1rem;margin-bottom:7px}
.proof p{font-size:.92rem;color:var(--slate-700);line-height:1.6}

/* ---- before you buy ---- */
.stages{display:grid;gap:var(--gap);margin-top:44px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.stage{position:relative;padding-top:26px;border-top:2px solid rgba(255,255,255,.28)}
.stage-n{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--on-inv-soft);margin-bottom:12px}
.stage h3{font-size:var(--step-2);margin-bottom:10px}
.stage p{font-size:.94rem;line-height:1.6;color:var(--on-inv)}

/* ---- FAQ ---- */
.faq{margin-top:36px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer;padding:20px 0;font-family:var(--disp);font-weight:600;
  font-size:1.06rem;color:var(--slate-950);list-style:none;
  display:flex;justify-content:space-between;gap:18px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:1.3rem;color:var(--survey);flex:none;transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq-a{padding:0 0 22px;color:var(--slate-700);line-height:1.65;max-width:var(--measure)}

/* ---- final brand moment ---- */
.finale{text-align:center;padding:calc(var(--band) * 1.1) 0}
.finale .statement-lg{margin:0 auto 18px;max-width:16ch}
.finale p{font-size:var(--step-1);color:var(--on-inv-soft);margin-bottom:34px}
.finale-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---- capability page furniture ---- */
.cap-hero{padding:clamp(56px,7vw,104px) 0 clamp(40px,5vw,72px)}
.cap-hero .display{max-width:17ch}
.cap-hero .lede{margin-top:22px;font-size:var(--step-1)}
.cap-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.split{display:grid;gap:clamp(28px,4vw,60px);align-items:start}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}}
.list-check{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:16px}
.list-check li{padding-left:26px;position:relative;line-height:1.6;color:var(--slate-700)}
.list-check li::before{
  content:"";position:absolute;left:0;top:.55em;width:11px;height:2px;
  background:var(--survey);
}
.list-check b{color:var(--slate-950);font-weight:600}

.note{
  margin-top:28px;padding:16px 20px;border-left:3px solid var(--slate-200);
  background:var(--slate-100);font-size:.9rem;line-height:1.6;color:var(--slate-700);
  border-radius:0 6px 6px 0;
}

.crumbs{font-size:.82rem;color:var(--slate-400);padding-top:26px}
.crumbs a{color:var(--slate-700)}
.crumbs span{margin:0 7px;opacity:.5}

.cards-3{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:40px}
.card{border:1px solid var(--rule);border-radius:10px;padding:24px;background:#fff}
.card h3{font-size:1.06rem;margin-bottom:9px}
.card p{font-size:.93rem;color:var(--slate-700);line-height:1.6}
.card a{font-weight:600;font-size:.9rem;display:inline-block;margin-top:14px}

/* ---- reduced motion: every transition above is opt-in ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .outcome-link::after{transition:none}
}

@media (max-width:640px){
  .statement,.statement-lg{max-width:none}
  .reveal-stage{min-height:0;padding:20px}
}

/* ---- footer: the site's whole link graph, laid out to be scannable ----
   The old footer was a single run of inline links. With eighteen destinations
   that reads as a wall, so the graph is grouped by what a reader is actually
   looking for. */
.foot-grid{
  display:grid;gap:clamp(26px,3vw,44px);
  grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  padding:var(--band) 0 44px;
}
@media(min-width:900px){
  .foot-grid{grid-template-columns:minmax(220px,1.4fr) repeat(5,minmax(0,1fr))}
}
.foot-brand .logo{margin-bottom:16px}
.foot-line{font-size:.88rem;line-height:1.6;color:var(--slate-700);max-width:30ch}
.foot-col h2{
  font-family:var(--mono);font-size:.66rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--slate-400);
  margin-bottom:14px;
}
.foot-col a{
  display:block;font-size:.9rem;line-height:1.5;color:var(--slate-700);
  padding:5px 0;text-decoration:none;
}
.foot-col a:hover{color:var(--survey);text-decoration:underline}
.foot-legal{
  border-top:1px solid var(--rule);padding:26px 0 40px;
  display:flex;flex-direction:column;gap:16px;
}
.foot-legal-links{display:flex;gap:20px;flex-wrap:wrap}
.foot-legal-links a{font-size:.85rem;color:var(--slate-700)}
.foot-legal .disclaimer{
  font-size:.82rem;line-height:1.6;color:var(--slate-400);
  max-width:92ch;margin:0;
}

/* ---- two contrast/distinguishability fixes the audit caught ----
   1. .list-check sets its own dark ink for use on the paper ground. Inside an
      inverted band that ink lands on near-black and measures ~2:1. The band
      has to re-assert the light ink for anything that sets its own.
   2. Breadcrumb links sit inside a run of text, so colour alone is not enough
      to identify them (WCAG 1.4.1) — they get an underline like every other
      in-text link on the site. */
.band-inv .list-check li{color:var(--on-inv)}
.band-inv .list-check li b{color:#fff}
.band-inv .list-check li::before{background:var(--on-inv-soft)}
.band-inv .note{
  background:rgba(255,255,255,.07);border-left-color:rgba(255,255,255,.4);
  color:var(--on-inv);
}
.crumbs a{text-decoration:underline;text-underline-offset:.18em}

/* ---- ghost button on an inverted band ----
   content.css gives .btn-ghost a white background and dark ink. The inverted
   band was only overriding the ink, which left white text on a white button.
   The background has to be overridden too, not just the colour. */
.band-inv .btn-ghost{
  background:transparent;border-color:rgba(255,255,255,.45);color:#fff;
}
.band-inv .btn-ghost:hover{
  background:rgba(255,255,255,.12);border-color:#fff;color:#fff;
}

/* ---- the platform chain ----
   Six engines in sequence. The rule down the left is the chain: it is the
   argument the page is making, so it is drawn rather than described. */
.chain{margin-top:44px;border-left:2px solid var(--rule);padding-left:0}
.chain-step{
  display:grid;grid-template-columns:52px minmax(0,1fr);
  gap:var(--gap);padding:0 0 34px 0;position:relative;
}
.chain-step:last-child{padding-bottom:0}
.chain-n{
  width:34px;height:34px;border-radius:50%;margin-left:-18px;
  background:var(--paper);border:2px solid var(--survey);color:var(--survey);
  font-family:var(--mono);font-size:.78rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex:none;
}
.chain-step h3{font-size:var(--step-2);margin-bottom:8px}
.chain-step h3 a{color:var(--slate-950);text-decoration:none}
.chain-step h3 a:hover{color:var(--survey);text-decoration:underline}
.chain-step p{color:var(--slate-700);line-height:1.6;max-width:58ch}
.chain-hands{
  margin-top:10px;font-size:.88rem;color:var(--slate-400);
  padding-left:14px;border-left:2px solid var(--slate-200);
}
@media(max-width:640px){
  .chain{padding-left:14px}
  .chain-step{grid-template-columns:1fr;gap:12px}
  .chain-n{margin-left:-32px}
}

/* The nav CTA's long form, dropped on a phone so the menu toggle keeps its
   place on the bar. The link's aria-label carries the full phrase regardless. */
@media(max-width:740px){
  .nav-cta-long{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
}