/* ============================================================
   BACKBONE SERVICE LAYER  —  assets/service.css
   ------------------------------------------------------------
   Shared, reusable layer for every Backbone service site
   (Aegis, and the services that follow). Loads AFTER site.css.

   site.css     = the Backbone house style (nav, footer, buttons,
                  hero, grids, cards, forms, contact, reveal).
   service.css  = everything a SERVICE page needs that the house
                  style does not already provide, plus the premium
                  rhythm/type refinements.
   page <style> = ONLY genuinely service-specific semantics
                  (e.g. Aegis severity colours). Never layout.

   Token-driven: uses only the CSS variables declared in site.css.
   Palette (navy/gold) and typefaces (Fraunces / Poppins /
   Open Sans) are inherited, never redeclared.
   ============================================================ */


/* ============================================================
   1 · RHYTHM  —  generous, confident vertical space
   ============================================================ */
.section{padding:7.5rem 0}
@media(max-width:900px){.section{padding:5.25rem 0}}
@media(max-width:640px){.section{padding:4.25rem 0}}
.sec-head{max-width:68ch;margin-bottom:3.75rem}
.sec-head p{font-size:1.1rem;line-height:1.7}

/* Hairline gold dividers between major bands — never heavy borders */
.section + .section,
.section + .footer{border-top:1px solid rgba(201,162,74,.16)}


/* ============================================================
   2 · TYPE  —  larger and tighter display, comfortable body
   ============================================================ */
body{line-height:1.7}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.4rem);letter-spacing:-.035em;line-height:1.04;max-width:18ch}
.hero.slim h1{font-size:clamp(2.1rem,4.4vw,3.4rem);letter-spacing:-.03em;line-height:1.08;max-width:20ch}
.hero-sub{max-width:62ch;line-height:1.65}
.sec-head h2{font-size:clamp(2.1rem,4.2vw,3.1rem);letter-spacing:-.03em;line-height:1.08}
.cta-inner{max-width:64ch}
.cta-inner h2{letter-spacing:-.03em;line-height:1.08}

/* Prose measure — text never runs edge to edge */
.prose{max-width:68ch}
.prose p{margin-bottom:14px}
.prose ul{margin:0;padding-left:22px;color:var(--ink-700)}
.prose li{margin-bottom:10px}
.prose a{color:var(--gold-deep);font-weight:600}


/* ============================================================
   3 · CARDS  —  equal height in a row, CTA pinned to the bottom
   ============================================================ */
/* Grid items stretch to equal height by default; the flex column plus
   `margin-top:auto` on the CTA is what actually aligns the buttons. */
.grid2,.grid3,.grid4,.offer-grid{align-items:stretch}
.card{display:flex;flex-direction:column;border-radius:20px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(201,162,74,.35)}
.card .btn{margin-top:auto}
.card h3.ic-head{display:flex;align-items:center;gap:10px}
.card .shieldico{width:24px;height:24px;flex:0 0 auto}
.offer{border-radius:20px}
.offer.feature{border-color:var(--gold);background:linear-gradient(180deg,var(--surface),#fffdf7)}
.offer .btn{width:100%;margin-top:20px}
@media(prefers-reduced-motion:reduce){.card:hover,.offer:hover,.step:hover{transform:none}}

/* Accent box — a card with a gold spine. Used for summaries and terms. */
.tbox{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--gold);
  border-radius:var(--radius);padding:22px;height:100%}
.tbox h3{font-size:1.05rem;margin-bottom:8px}
.tbox p{color:var(--ink-500);font-size:.93rem;margin:0}
.tnote{text-align:center;margin-top:26px;color:var(--ink-500);font-size:.92rem}
.tnote a{color:var(--gold-deep);font-weight:600}


/* ============================================================
   4 · SCREENSHOTS  —  real product shots as hero objects
   Retina captures: always width:100%; height:auto so a 2x image
   can never cause horizontal overflow.
   ============================================================ */
.shot{margin:0;background:var(--surface);border:1px solid rgba(201,162,74,.20);
  border-radius:22px;padding:12px;overflow:hidden;
  box-shadow:0 44px 84px -36px rgba(11,18,32,.48),
             0 26px 70px -34px rgba(201,162,74,.55),
             0 10px 24px -14px rgba(11,18,32,.20)}
.shot img{width:100%;max-width:100%;height:auto;display:block;border-radius:14px;border:1px solid var(--border)}
.shot figcaption{font-size:.84rem;color:var(--ink-500);text-align:center;padding:11px 8px 4px}


/* ============================================================
   5 · NAV  —  gold hairline once scrolled
   ============================================================ */
.nav.scrolled{box-shadow:0 1px 0 rgba(201,162,74,.20),var(--shadow-sm)}


/* ============================================================
   6 · EVIDENCE PANEL  —  the signature service artifact
   An evidence log: things attempted, and the outcome recorded.
   Quiet monospace, gold hairlines, restrained green "held" state.
   ============================================================ */
.evidence-band{background:linear-gradient(180deg,var(--navy-950),var(--navy-900));
  color:var(--slate-200);position:relative;overflow:hidden;border-top:1px solid rgba(201,162,74,.22)}
.evidence{max-width:940px;margin:0 auto;background:rgba(255,255,255,.035);
  border:1px solid rgba(201,162,74,.26);border-radius:20px;padding:34px 36px;
  box-shadow:0 44px 96px -44px rgba(0,0,0,.85)}
@media(max-width:560px){.evidence{padding:26px 22px}}
.evidence-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid rgba(201,162,74,.26)}
.evidence-head h2{font-family:var(--font-display);font-weight:500;color:#fff;
  font-size:clamp(1.45rem,2.6vw,1.95rem);letter-spacing:-.02em}
.evidence-head .ehint{font-family:var(--font-head);font-weight:600;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light)}
.elog{list-style:none;margin:0;padding:0;
  font-family:Consolas,'SFMono-Regular',Menlo,'Courier New',monospace;font-size:.88rem}
.elog li{display:grid;grid-template-columns:1fr auto;gap:6px 24px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.elog li:last-child{border-bottom:0}
.elog .what{color:#D7DEEA;line-height:1.5}
.elog .what b{color:#fff;font-weight:600}
.elog .arrow{color:var(--gold);padding:0 7px}
.elog .note{display:block;color:var(--slate-400);font-size:.78rem;margin-top:3px}
.elog .state{display:inline-flex;align-items:center;gap:9px;color:#8CDCB0;
  font-family:var(--font-head);font-weight:700;font-size:.68rem;letter-spacing:.15em;
  text-transform:uppercase;white-space:nowrap}
.elog .state i{width:6px;height:6px;border-radius:50%;background:#3DDC84;
  box-shadow:0 0 0 3px rgba(61,220,132,.16);flex:0 0 auto}
@media(max-width:620px){.elog li{grid-template-columns:1fr}}
.evidence-foot{margin-top:22px;padding-top:18px;border-top:1px solid rgba(201,162,74,.26);
  font-size:.88rem;color:var(--slate-300);line-height:1.6}
.evidence-foot a{color:var(--gold-light);font-weight:600}

/* Coverage chips — a quiet capability row beneath a dark panel */
.covrow{display:flex;gap:14px 30px;flex-wrap:wrap;justify-content:center;align-items:center;
  margin-top:44px;font-family:var(--font-head);font-weight:500;font-size:.92rem;color:var(--slate-300)}
.covrow span{display:inline-flex;align-items:center;gap:9px}
.covrow i{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:0 0 auto}


/* ============================================================
   7 · STAT ROW  —  Fraunces numerals, gold hairline rules.
   Deliberately static: no animated counters.
   ============================================================ */
.statrow{display:grid;grid-template-columns:repeat(5,1fr);max-width:1060px;margin:0 auto}
@media(max-width:900px){.statrow{grid-template-columns:repeat(2,1fr);row-gap:34px}}
@media(max-width:480px){.statrow{grid-template-columns:1fr;row-gap:30px}}
.statrow .st{text-align:center;padding:4px 18px;border-left:1px solid rgba(201,162,74,.28)}
.statrow .st:first-child{border-left:0}
@media(max-width:900px){.statrow .st:nth-child(odd){border-left:0}}
@media(max-width:480px){.statrow .st{border-left:0}}
.statrow .st b{display:block;font-family:var(--font-display);font-weight:600;
  font-size:clamp(2.1rem,3.6vw,2.85rem);color:var(--ink-900);line-height:1;letter-spacing:-.025em}
.statrow .st b em{font-style:normal;color:var(--gold-deep)}
.statrow .st span{display:block;margin-top:12px;font-family:var(--font-head);font-weight:600;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-400);line-height:1.5}


/* ============================================================
   8 · PRICING PLANS  —  drop into .grid4
   ============================================================ */
.plan{display:flex;flex-direction:column}
.plan h3{font-family:var(--font-head);font-size:1.1rem}
.plan .price{font-family:var(--font-display);font-weight:600;font-size:2.1rem;
  color:var(--ink-900);margin:8px 0 2px;line-height:1.1;letter-spacing:-.02em}
.plan .price small{font-family:var(--font-body);font-size:.88rem;color:var(--ink-500);font-weight:400}
.plan .meta{color:var(--ink-500);font-size:.9rem;margin-bottom:14px}
.plan ul{list-style:none;padding:0;margin:0 0 20px;font-size:.92rem}
.plan li{padding:6px 0 6px 22px;position:relative;color:var(--ink-700)}
.plan li::before{content:"\203A";position:absolute;left:4px;color:var(--gold-deep);font-weight:700}
.plan .btn{width:100%;margin-top:auto}
.plan.pop{border-color:var(--gold);box-shadow:var(--shadow-gold)}
.plan.oneoff{border-color:var(--gold);background:linear-gradient(180deg,var(--surface),#fffdf7)}


/* ============================================================
   9 · READINESS CARDS  —  numbered prerequisite cards with a tier chip
   ============================================================ */
.rnum{font-family:var(--font-display);font-size:1.3rem;color:var(--gold-deep);font-weight:600}
.rtag{display:inline-block;align-self:flex-start;margin-top:auto;padding:4px 11px;
  font-family:var(--font-head);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-radius:var(--radius-pill);background:var(--surface-2);color:var(--ink-500);border:1px solid var(--border)}
.card .rtag{margin-top:auto}
.rtag.gold{background:rgba(201,162,74,.14);color:var(--gold-deep);border-color:rgba(201,162,74,.35)}


/* ============================================================
   10 · SELECTOR  —  "answer two questions" service chooser
   Hooks expected by the page script: .opts[data-group] / .opt[data-v]
   ============================================================ */
.chooser{max-width:900px;margin:0 auto;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:32px;box-shadow:var(--shadow-sm)}
@media(max-width:560px){.chooser{padding:24px 20px}}
.chooser .q{margin-bottom:22px}
.chooser h4{font-size:1rem;margin:0 0 12px;color:var(--ink-900)}
.opts{display:flex;gap:10px;flex-wrap:wrap}
.opt{font-family:var(--font-head);font-size:.94rem;padding:12px 20px;border-radius:var(--radius-pill);
  border:1px solid var(--border-strong);background:var(--surface);color:var(--ink-700);cursor:pointer;
  transition:background .2s,color .2s,border-color .2s}
.opt:hover{border-color:var(--gold)}
.opt.on{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.result{display:flex;gap:16px;align-items:flex-start;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.result .rmark{font-size:1.4rem;color:var(--gold-deep);font-weight:700;line-height:1.2}
.result strong{display:block;font-family:var(--font-head);color:var(--ink-900);font-size:1.08rem;margin-bottom:4px}
.result p{margin:0;color:var(--ink-500);font-size:.96rem}


/* ============================================================
   11 · TABLES  —  always inside .tbl-wrap so wide tables scroll
   themselves rather than pushing the page sideways.
   ============================================================ */
/* Wide content must scroll inside its own box, never widen the page.
   A grid/flex child defaults to min-width:auto, so it refuses to shrink below its
   content and overflow-x:auto alone does nothing — the wide table then forces a
   horizontal page scroll on mobile. min-width:0 is what actually lets it clip. */
.tbl-wrap{overflow-x:auto;max-width:100%;min-width:0}
.grid2>*,.grid3>*,.grid4>*,.wrap>*{min-width:0}
img,svg,video,canvas{max-width:100%}
.tbl{width:100%;border-collapse:collapse;font-size:.94rem;min-width:520px}
.tbl th,.tbl td{text-align:left;padding:11px 13px;border-bottom:1px solid var(--border);vertical-align:top}
.tbl th{background:var(--surface-2);font-family:var(--font-head);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500)}
.tbl tr.us{background:rgba(201,162,74,.11)}
.tbl tr.us td{border-bottom:1px solid rgba(201,162,74,.35)}
.note{margin-top:14px;font-size:.9rem;color:var(--ink-500)}
.note a{color:var(--gold-deep);font-weight:600}

/* Gold-tinted advisory box */
.notebox{background:rgba(201,162,74,.09);border:1px solid rgba(201,162,74,.32);
  border-radius:var(--radius);padding:18px 20px;margin:22px 0}
.notebox strong{color:var(--ink-900)}
.notebox p{margin:0 0 10px}
.notebox p:last-child{margin-bottom:0}
.notebox ol,.notebox ul{margin:10px 0;padding-left:20px}
.notebox li{margin:6px 0}


/* ============================================================
   12 · CONTACT  —  address cards alongside the shared .form-card
   ============================================================ */
.addr-card{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--gold);
  border-radius:var(--radius-lg);padding:24px 26px;box-shadow:var(--shadow-sm);height:100%}
.addr-card h3{font-size:1.1rem;margin-bottom:4px}
.addr-card .addr{display:block;margin:8px 0;font-family:Consolas,'Courier New',monospace;
  font-size:1rem;color:var(--gold-deep);word-break:break-all}
.addr-card p{margin:0;color:var(--ink-500);font-size:.95rem}
.addr-card p a{color:var(--gold-deep);font-weight:600}
.addr-card.urgent{border-left-color:#b3261e}
.addr-card.urgent .addr{color:#b3261e}


/* ============================================================
   13 · FAQ ACCORDION  —  site.css styles .qa/.chev/.body; this
   adds padding for non-paragraph content inside an answer.
   ============================================================ */
.qa .body>*{padding-left:22px;padding-right:22px}
.qa .body>*:last-child{padding-bottom:22px}
.qa .body p{padding-bottom:10px}
.qa .body ul{margin:8px 0;padding-left:42px}
.qa .body li{margin:6px 0;color:var(--ink-500)}
.qa .body .tbl-wrap{padding-bottom:6px}
.qa .body .tbl{min-width:420px;font-size:.93rem}


/* ============================================================
   14 · REFERENCE / METHODOLOGY  —  long-form documentation
   ============================================================ */
.ref{max-width:900px;margin:0 auto}
.ref a{color:var(--gold-deep);font-weight:600}
.ref>p,.ref>.sec-sub,.ref>ul{max-width:68ch}
.ref ul.plain{padding-left:22px;color:var(--ink-700)}
.ref ul.plain li{margin-bottom:10px}
.intro{background:var(--surface);border-left:4px solid var(--gold);border-radius:var(--radius);
  padding:24px 26px;margin-bottom:40px;box-shadow:var(--shadow-sm)}
.intro p{margin:0;font-size:1.04rem}
.toc-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:24px 26px;margin-bottom:44px;box-shadow:var(--shadow-sm)}
.toc-box h2{font-size:1.1rem;margin-bottom:12px}
.toc-box ol{margin:0;padding-left:20px;columns:2;column-gap:34px}
@media(max-width:640px){.toc-box ol{columns:1}}
.toc-box li{margin:5px 0}
.toc-box a{color:var(--ink-700)}
.toc-box a:hover{color:var(--gold-deep)}
h2.sec{font-family:var(--font-display);font-weight:500;font-size:clamp(1.6rem,3vw,2rem);
  letter-spacing:-.02em;margin:52px 0 8px;padding-top:16px;border-top:2px solid var(--border)}
.sec-sub{color:var(--ink-500);margin:0 0 20px;font-size:1.03rem}
.test{background:var(--surface);border:1px solid var(--border);border-radius:20px;
  padding:26px 28px;margin:18px 0;box-shadow:var(--shadow-sm)}
.test h3{font-size:1.2rem;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.trow{margin-top:16px}
.trow .lbl{font-family:var(--font-head);font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:4px}
.trow p{margin:0}
.fix{background:var(--surface-2);border-radius:var(--radius);padding:16px 18px;margin-top:14px}
.fix .lbl{font-family:var(--font-head);font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-900)}
.fix ol{margin:8px 0 0;padding-left:20px}
.fix li{margin:6px 0}
.tierchip{padding:4px 11px;font-family:var(--font-head);font-size:.68rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;border-radius:var(--radius-pill);
  background:var(--surface-2);color:var(--ink-500);border:1px solid var(--border)}
.fitbox{background:var(--surface);border:1px solid var(--border);border-radius:20px;
  padding:24px 26px;box-shadow:var(--shadow-sm);height:100%}
.fitbox h3{font-size:1.1rem;margin-bottom:10px}
.fitbox ul{margin:0;padding-left:20px}
.fitbox li{margin:9px 0;font-size:.95rem}
code{background:#eef1f7;padding:2px 7px;border-radius:5px;font-size:.9em;
  font-family:Consolas,'Courier New',monospace}
pre{background:var(--navy-950);color:#e7e9f5;border-radius:10px;padding:14px 16px;
  overflow-x:auto;max-width:100%;font:12.5px/1.6 Consolas,'Courier New',monospace}


/* ============================================================
   15 · DARK SPLIT BAND  —  copy beside a product screenshot
   ============================================================ */
.report-sec{background:var(--navy-900);color:#fff}
.report-sec h2{font-family:var(--font-display);font-weight:500;color:#fff;
  font-size:clamp(1.9rem,3.4vw,2.6rem);letter-spacing:-.03em;margin:18px 0 16px}
.report-sec p{color:var(--slate-200);font-size:1.06rem;margin-bottom:18px;max-width:60ch}
.report-sec p a{color:var(--gold-light);font-weight:600}
.report-sec .shot{background:rgba(255,255,255,.06);border-color:rgba(201,162,74,.34)}
.report-sec .shot figcaption{color:var(--slate-300)}


/* ============================================================
   16 · FOOTER  —  house footer plus the service family line
   ============================================================ */
.foot-reg a{color:var(--gold-light)}