/* ==========================================================================
   Digital Clear — shared design system
   One stylesheet for every page. Change a shared style here, never per page.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Brand */
  --navy:#0F1E36;
  --blue:#2563EB;
  --orange:#F97316;
  --near-black:#0A0F1C;
  --off-white:#F8FAFC;
  --light-gray:#E2E8F0;
  --dark-gray:#475569;

  /* Derived (tints only — no new hues) */
  --blue-700:#1D4ED8;
  --blue-050:#EFF4FE;
  --navy-800:#152744;
  --mid-gray:#94A3B8;      /* decoration / borders only — fails AA as text */
  --muted:#64748B;         /* muted TEXT — 4.8:1 on white */
  --white:#FFFFFF;

  /* Roles — light ground */
  --bg:var(--off-white);
  --surface:var(--white);
  --text:var(--dark-gray);
  --heading:var(--navy);
  --border:var(--light-gray);
  --cta:var(--blue);
  --on-cta:var(--white);

  /* Spacing — 8px system */
  --s1:8px;  --s2:16px; --s3:24px; --s4:32px;
  --s5:40px; --s6:48px; --s8:64px; --s12:96px;

  /* Radii */
  --r-input:6px; --r-btn:8px; --r-card:12px; --r-lg:16px;

  /* Elevation — navy-tinted, no glow */
  --shadow-sm:0 1px 2px rgba(15,30,54,.06);
  --shadow-md:0 4px 16px rgba(15,30,54,.08);
  --shadow-lg:0 12px 32px rgba(15,30,54,.12);

  /* Motion */
  --ease:cubic-bezier(.4,0,.2,1);
  --t-fast:150ms; --t-base:240ms; --t-slow:400ms;

  /* Layout */
  --maxw:1200px;
  --gutter:16px;
  --header-h:72px;
}

@media (min-width:768px){ :root{ --gutter:32px } }
@media (min-width:1024px){ :root{ --gutter:48px } }
@media (min-width:1440px){ :root{ --gutter:64px } }

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  padding-top:var(--header-h);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.65; color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
ul,ol{list-style:none}

/* ---------- Type ---------- */
h1,h2,h3,h4{color:var(--heading);line-height:1.15;letter-spacing:-.021em;font-weight:600}
h1{font-family:Outfit,Inter,sans-serif;font-size:clamp(2.125rem,1.35rem + 3.6vw,3.75rem);line-height:1.06;letter-spacing:-.03em;font-weight:700}
h2{font-size:clamp(1.625rem,1.15rem + 2.1vw,2.5rem);letter-spacing:-.025em}
h3{font-size:clamp(1.125rem,1.02rem + .5vw,1.375rem)}
h4{font-size:1.0625rem}
p{max-width:68ch}
strong{color:var(--heading);font-weight:600}

.lede{font-size:clamp(1.0625rem,1rem + .35vw,1.25rem);line-height:1.6;color:var(--dark-gray)}
.measure{max-width:60ch}
.surface-dark .lede,.surface-navy .lede,.surface-dark .on-dark,.surface-navy .on-dark{color:#B9C6D8}
.surface-dark .caption,.surface-navy .caption{color:#93A4BC}
.measure-tight{max-width:46ch}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--s8)}
.section--compact{padding-block:var(--s6)}
.section--hero{padding-block:var(--s12)}
@media (min-width:768px){
  .section{padding-block:var(--s12)}
  .section--compact{padding-block:var(--s8)}
}
.stack>*+*{margin-top:var(--s3)}
.grid{display:grid;gap:var(--s3)}
@media (min-width:768px){ .grid-2{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .grid-3{grid-template-columns:repeat(3,1fr)} }

/* ---------- Surfaces ---------- */
.surface-dark{background:var(--near-black);color:#C7D2E0}
.surface-navy{background:var(--navy);color:#C7D2E0}
.surface-dark h1,.surface-dark h2,.surface-dark h3,.surface-dark h4,
.surface-navy h1,.surface-navy h2,.surface-navy h3,.surface-navy h4{color:var(--white)}
.surface-dark strong,.surface-navy strong{color:var(--white)}
.surface-light{background:var(--white)}
.surface-offwhite{background:var(--off-white)}

/* ---------- Section label ---------- */
.section-label{
  display:inline-block;font-size:.75rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blue-700);
  margin-bottom:var(--s2);
}
.surface-dark .section-label,.surface-navy .section-label{color:#7FA9F5}
.section-label--accent{color:#C2410C}
.surface-dark .section-label--accent,.surface-navy .section-label--accent{color:#FDBA74}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:.9375rem;font-weight:600;letter-spacing:-.005em;
  padding:13px 22px;border-radius:var(--r-btn);border:1px solid transparent;
  cursor:pointer;text-align:center;white-space:nowrap;
  transition:background var(--t-base) var(--ease),border-color var(--t-base) var(--ease),
             color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}
.btn svg{width:16px;height:16px;flex:none}
.btn-primary{background:var(--cta);color:var(--on-cta)}
.btn-primary:hover{background:var(--blue-700);box-shadow:var(--shadow-md)}
.btn-secondary{background:transparent;color:var(--heading);border-color:var(--border)}
.btn-secondary:hover{border-color:var(--navy);background:var(--white)}
.surface-dark .btn-secondary,.surface-navy .btn-secondary{color:var(--white);border-color:rgba(255,255,255,.32)}
.surface-dark .btn-secondary:hover,.surface-navy .btn-secondary:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.06)}
.btn-block{width:100%}
@media (max-width:479px){ .btn{width:100%} .btn-row .btn{width:100%} }
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s2)}

.link-arrow{
  display:inline-flex;align-items:center;gap:6px;font-weight:600;
  font-size:.9375rem;color:var(--blue);
  transition:gap var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.link-arrow svg{width:16px;height:16px}
.link-arrow:hover{gap:10px;color:var(--blue-700)}
.surface-dark .link-arrow{color:#7FA9F5}

/* ---------- Focus ---------- */
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}
.surface-dark :focus-visible,.surface-navy :focus-visible{outline-color:#7FA9F5}
.skip-link{
  position:fixed;left:var(--s2);top:-100px;z-index:200;
  background:var(--white);color:var(--navy);font-weight:600;
  padding:12px 18px;border-radius:var(--r-btn);box-shadow:var(--shadow-lg);
  transition:top var(--t-fast) var(--ease);
}
.skip-link:focus{top:var(--s2)}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  min-height:var(--header-h);display:flex;align-items:center;
  background:transparent;border-bottom:1px solid transparent;
  transition:background var(--t-base) var(--ease),border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(10,15,28,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:1;transition:opacity var(--t-base) var(--ease);
}
.site-header.is-solid{background:var(--white);border-bottom-color:var(--border);box-shadow:var(--shadow-sm)}
.site-header.is-solid::before{opacity:0}
/* Pages with a light hero start solid */
.site-header--light{background:var(--white);border-bottom-color:var(--border)}
.site-header--light::before{opacity:0}

.header-inner{
  width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand img{height:32px;width:auto}
.brand .wordmark{
  font-family:Outfit,Inter,sans-serif;font-weight:600;font-size:1.1875rem;
  letter-spacing:-.02em;color:var(--white);transition:color var(--t-base) var(--ease);
}
.is-solid .brand .wordmark,.site-header--light .brand .wordmark{color:var(--navy)}
.brand .mark-dark{display:block} .brand .mark-light{display:none}
.is-solid .brand .mark-dark,.site-header--light .brand .mark-dark{display:none}
.is-solid .brand .mark-light,.site-header--light .brand .mark-light{display:block}

.main-nav{display:none}
@media (min-width:1024px){
  .main-nav{display:flex;align-items:center;gap:var(--s4)}
}
.main-nav a{
  font-size:.9375rem;font-weight:500;color:rgba(255,255,255,.82);
  transition:color var(--t-fast) var(--ease);
}
.main-nav a:hover{color:var(--white)}
.is-solid .main-nav a,.site-header--light .main-nav a{color:var(--dark-gray)}
.is-solid .main-nav a:hover,.site-header--light .main-nav a:hover{color:var(--navy)}
.main-nav a[aria-current="page"]{color:var(--white)}
.is-solid .main-nav a[aria-current="page"],.site-header--light .main-nav a[aria-current="page"]{color:var(--navy)}

.header-cta{display:none}
@media (min-width:1024px){ .header-cta{display:flex;align-items:center;gap:var(--s2)} }
.header-cta .btn{padding:10px 18px;font-size:.875rem}

.nav-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;margin-right:-10px;
  background:none;border:none;cursor:pointer;color:var(--white);border-radius:var(--r-btn);
}
.is-solid .nav-toggle,.site-header--light .nav-toggle{color:var(--navy)}
.nav-toggle svg{width:24px;height:24px}
@media (min-width:1024px){ .nav-toggle{display:none} }

.mobile-nav{
  display:none;position:fixed;inset:var(--header-h) 0 0;z-index:99;
  background:var(--white);padding:var(--s4) var(--gutter) var(--s8);
  overflow-y:auto;
}
.mobile-nav.is-open{display:block}
.mobile-nav a{display:block;padding:14px 0;font-size:1.125rem;font-weight:500;color:var(--navy);border-bottom:1px solid var(--border)}
.mobile-nav .btn{margin-top:var(--s4);width:100%}

/* ---------- Hero ---------- */
body.has-dark-hero{padding-top:0}
.hero{position:relative;background:var(--near-black);overflow:hidden;isolation:isolate}
body.has-dark-hero .hero{padding-top:calc(var(--s12) + var(--header-h))}
.hero-media{position:absolute;inset:0;z-index:-2}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:72% center;opacity:.62}
.hero-scrim{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(96deg,#0A0F1C 0%,rgba(10,15,28,.96) 34%,rgba(10,15,28,.72) 62%,rgba(10,15,28,.34) 100%);
}
@media (max-width:767px){
  .hero-media img{object-position:68% center;opacity:.34}
  .hero-scrim{background:linear-gradient(180deg,rgba(10,15,28,.88) 0%,rgba(10,15,28,.94) 55%,#0A0F1C 100%)}
}
.hero-inner{position:relative;max-width:640px}
.hero h1{margin-bottom:var(--s3)}
.hero .lede{color:#B9C6D8;margin-bottom:var(--s5)}

/* ---------- Node-and-line motif ---------- */
.node-field{position:absolute;inset:0;pointer-events:none;opacity:.32;overflow:hidden}
.node-field svg{width:100%;height:100%}
.node-field line{stroke:rgba(127,169,245,.30);stroke-width:.35;vector-effect:non-scaling-stroke}
.node-field circle{fill:rgba(127,169,245,.5)}
.node-field circle.is-accent{fill:var(--orange)}
.surface-light .node-field line,.surface-offwhite .node-field line{stroke:rgba(37,99,235,.22)}
.surface-light .node-field circle,.surface-offwhite .node-field circle{fill:rgba(37,99,235,.42)}

/* ---------- Cards ---------- */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  padding:var(--s4);
  transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}
.card--lg{border-radius:var(--r-lg);padding:var(--s5)}
a.card:hover,.card--interactive:hover{border-color:#C3D3EE;box-shadow:var(--shadow-md)}
.surface-dark .card,.surface-navy .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.surface-dark a.card:hover,.surface-navy a.card:hover{border-color:rgba(255,255,255,.28);box-shadow:none;background:rgba(255,255,255,.07)}

.card-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:10px;margin-bottom:var(--s3);
  background:var(--blue-050);color:var(--blue);
}
.card-icon svg{width:22px;height:22px;stroke-width:2}
.surface-dark .card-icon,.surface-navy .card-icon{background:rgba(37,99,235,.18);color:#7FA9F5}
.card h3{margin-bottom:var(--s1)}
.card p{font-size:.9375rem;color:var(--dark-gray)}
.surface-dark .card p,.surface-navy .card p{color:#9FB0C6}

/* ---------- Lifecycle rail ---------- */
.rail{position:relative}
.rail-track{display:grid;gap:var(--s3)}
@media (min-width:1024px){
  .rail-track{grid-template-columns:repeat(5,1fr);gap:var(--s2)}
  .rail-track::before{
    content:"";position:absolute;left:0;right:0;top:22px;height:1px;
    background:linear-gradient(90deg,var(--blue) 0%,rgba(37,99,235,.35) 70%,var(--orange) 100%);
  }
}
.rail-step{position:relative}
.rail-dot{
  position:relative;z-index:1;width:44px;height:44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--white);border:1px solid var(--border);color:var(--mid-gray);
  margin-bottom:var(--s2);
  transition:border-color var(--t-slow) var(--ease),color var(--t-slow) var(--ease),background var(--t-slow) var(--ease);
}
.rail-dot svg{width:20px;height:20px;stroke-width:2}
.rail-step.is-active .rail-dot{border-color:var(--blue);color:var(--blue);background:var(--blue-050)}
.rail-step:last-child.is-active .rail-dot{border-color:var(--orange);color:var(--orange);background:#FFF3EA}
.rail-step h3{font-size:1.0625rem;margin-bottom:6px}
.rail-step p{font-size:.9375rem}
.rail-num{
  font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:4px;
}
.surface-dark .rail-num,.surface-navy .rail-num,
.surface-dark .stage-card__eyebrow,.surface-navy .stage-card__eyebrow{color:#A3B3C9}

/* ---------- Stage path cards ---------- */
.stage-card{
  display:flex;flex-direction:column;gap:var(--s3);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s5);position:relative;overflow:hidden;
  transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}
.stage-card:hover{border-color:#C3D3EE;box-shadow:var(--shadow-lg)}
.stage-card__eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.stage-card h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem)}
.stage-card ul{display:grid;gap:10px;margin-top:var(--s1)}
.stage-card li{display:flex;gap:10px;font-size:.9375rem;align-items:flex-start}
.stage-card li svg{width:18px;height:18px;color:var(--blue);flex:none;margin-top:3px;stroke-width:2}
.stage-card .btn{margin-top:auto;align-self:flex-start}
@media (max-width:479px){ .stage-card .btn{align-self:stretch} }

/* ---------- Workstreams ---------- */
.workstream{
  display:grid;gap:var(--s2);padding:var(--s4) 0;border-top:1px solid var(--border);
}
.workstream:last-child{border-bottom:1px solid var(--border)}
@media (min-width:768px){
  .workstream{grid-template-columns:64px 1fr 1.15fr;gap:var(--s4);align-items:start}
}
.surface-dark .workstream,.surface-navy .workstream{border-color:rgba(255,255,255,.12)}
.workstream__num{
  font-family:Outfit,Inter,sans-serif;font-size:1.5rem;font-weight:600;
  color:var(--blue);line-height:1;
}
.surface-dark .workstream__num{color:#7FA9F5}
.workstream h3{margin-bottom:4px}
.workstream p{font-size:.9375rem}

/* ---------- Failure modes list ---------- */
.fault-list{display:grid;gap:0}
.fault{display:grid;gap:6px;padding:var(--s3) 0;border-top:1px solid var(--border)}
.fault:last-child{border-bottom:1px solid var(--border)}
@media (min-width:768px){ .fault{grid-template-columns:.85fr 1.15fr;gap:var(--s4);align-items:baseline} }
.fault h3{font-size:1.0625rem;display:flex;align-items:center;gap:10px}
.fault h3 svg{width:18px;height:18px;color:var(--orange);flex:none;stroke-width:2}
.fault p{font-size:.9375rem}

/* ---------- Resource cards ---------- */
.resource{
  display:flex;flex-direction:column;gap:var(--s2);
  border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s5);
  background:var(--surface);
  transition:border-color var(--t-base) var(--ease),box-shadow var(--t-base) var(--ease);
}
.resource:hover{border-color:#C3D3EE;box-shadow:var(--shadow-md)}
.resource__format{
  font-size:.6875rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--blue-700);
}
.resource .link-arrow{margin-top:auto;padding-top:var(--s2)}

/* ---------- Qualification ---------- */
.qual{display:grid;gap:var(--s3)}
@media (min-width:768px){ .qual{grid-template-columns:1fr 1fr;gap:var(--s4)} }
.qual__col{border:1px solid var(--border);border-radius:var(--r-card);padding:var(--s4);background:var(--surface)}
.qual__col h3{display:flex;align-items:center;gap:10px;margin-bottom:var(--s3);font-size:1.0625rem}
.qual__col h3 svg{width:20px;height:20px;flex:none;stroke-width:2}
.qual__col--yes h3 svg{color:var(--blue)}
.qual__col--no h3 svg{color:var(--mid-gray)}
.qual__col li{display:flex;gap:10px;font-size:.9375rem;padding:8px 0;align-items:flex-start}
.qual__col li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--muted);flex:none;margin-top:11px}
.qual__col--yes li::before{background:var(--blue)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) 0;cursor:pointer;list-style:none;
  font-weight:600;color:var(--heading);font-size:1.0625rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";flex:none;width:12px;height:12px;
  border-right:2px solid var(--mid-gray);border-bottom:2px solid var(--mid-gray);
  transform:rotate(45deg);margin-top:-6px;
  transition:transform var(--t-base) var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:2px}
.faq details p{padding-bottom:var(--s3);font-size:.9375rem;max-width:72ch}

/* ---------- Forms & embeds ---------- */
.form-panel{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--s4);box-shadow:var(--shadow-md);
}
@media (min-width:768px){ .form-panel{padding:var(--s5)} }
.surface-dark .form-panel h1,.surface-dark .form-panel h2,.surface-dark .form-panel h3,.surface-dark .form-panel h4,
.surface-navy .form-panel h1,.surface-navy .form-panel h2,.surface-navy .form-panel h3,.surface-navy .form-panel h4{color:var(--heading)}
.surface-dark .form-panel,.surface-navy .form-panel{color:var(--text)}
.surface-dark .form-panel strong,.surface-navy .form-panel strong{color:var(--heading)}
.surface-dark .form-panel .caption,.surface-navy .form-panel .caption{color:var(--muted)}
.form-panel__title{font-size:1.25rem;margin-bottom:6px}
.form-panel__note{font-size:.875rem;color:var(--dark-gray);margin-bottom:var(--s3)}
.form-embed{min-height:320px}
.form-fallback{font-size:.875rem;color:var(--dark-gray)}

/* ---------- Scorecard ---------- */
.scorecard{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.scorecard__head{padding:var(--s4);border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:var(--s3);flex-wrap:wrap}
.scorecard__progress{font-size:.8125rem;color:var(--dark-gray);font-weight:500}
.scorecard__body{padding:var(--s4)}
.sc-q{padding:var(--s3) 0;border-bottom:1px solid var(--border)}
.sc-q:last-of-type{border-bottom:none}
.sc-q legend{font-weight:600;color:var(--heading);font-size:1rem;margin-bottom:4px}
.sc-q .sc-hint{font-size:.875rem;color:var(--dark-gray);margin-bottom:var(--s2)}
.sc-scale{display:flex;gap:8px;flex-wrap:wrap}
.sc-scale input{position:absolute;opacity:0;width:0;height:0}
.sc-scale label{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:46px;height:44px;padding:0 12px;
  border:1px solid var(--border);border-radius:var(--r-input);
  font-weight:600;font-size:.9375rem;color:var(--dark-gray);cursor:pointer;background:var(--white);
  transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.sc-scale label:hover{border-color:var(--blue);color:var(--blue)}
.sc-scale input:checked + label{background:var(--blue);border-color:var(--blue);color:var(--white)}
.sc-scale input:focus-visible + label{outline:2px solid var(--blue);outline-offset:3px}
.sc-scale-ends{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);margin-top:8px;max-width:340px}
.scorecard__foot{padding:var(--s4);border-top:1px solid var(--border);background:var(--off-white)}
.sc-result{display:none;padding:var(--s4);border-top:1px solid var(--border);background:var(--off-white)}
.sc-result.is-visible{display:block}
.sc-band{font-family:Outfit,Inter,sans-serif;font-size:2rem;font-weight:700;color:var(--navy);line-height:1.1}
.sc-meter{height:8px;border-radius:999px;background:var(--light-gray);overflow:hidden;margin:var(--s2) 0;max-width:420px}
.sc-meter span{display:block;height:100%;background:linear-gradient(90deg,var(--blue),var(--orange));width:0;transition:width var(--t-slow) var(--ease)}
.sc-weakest{font-size:.9375rem}
.sc-disclaimer{font-size:.8125rem;color:var(--muted);margin-top:var(--s3);max-width:66ch}

/* ---------- Blueprint schematic ---------- */
.schematic{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);padding:var(--s4);overflow-x:auto;contain:paint;-webkit-overflow-scrolling:touch}
.schematic-hint{display:none;font-size:.8125rem;color:var(--blue);font-weight:600;margin-bottom:12px}
@media (max-width:719px){ .schematic-hint{display:flex;align-items:center;gap:6px} }
.schematic-hint svg{width:15px;height:15px}
.schematic svg{min-width:560px;width:100%;height:auto}
.schematic-caption{font-size:.8125rem;color:var(--muted);margin-top:var(--s2)}

/* ---------- Icon list ---------- */
.icon-list{display:grid;gap:14px}
.icon-list li{display:flex;gap:12px;font-size:.9375rem;align-items:flex-start}
.icon-list li>svg,.icon-list li>i{width:20px;height:20px;color:var(--blue);flex:none;margin-top:3px;stroke-width:2}
.surface-dark .icon-list li>svg,.surface-dark .icon-list li>i,
.surface-navy .icon-list li>svg,.surface-navy .icon-list li>i{color:#7FA9F5}
.icon-list strong{display:block}

/* ---------- Inquiry journey ---------- */
.journey{display:grid}
.journey li{
  display:grid;grid-template-columns:28px minmax(0,1fr);gap:6px 14px;
  padding:14px 0;border-bottom:1px solid var(--border);align-items:start;
}
.journey li:last-child{border-bottom:none}
.journey__num{
  grid-row:1;width:28px;height:28px;border-radius:50%;
  background:var(--blue-050);color:var(--blue);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.8125rem;font-weight:600;flex:none;
}
.journey__body{grid-row:1;min-width:0}
.journey__body strong{display:block}
.journey__body span{font-size:.9375rem}
.journey__tag{
  grid-column:2;font-size:.8125rem;color:var(--muted);
}
@media (min-width:600px){
  .journey li{grid-template-columns:28px minmax(0,1fr) auto;gap:14px}
  .journey__tag{grid-column:3;grid-row:1;white-space:nowrap;padding-top:4px}
}

/* ---------- Legal pages ---------- */
.legal{max-width:76ch}
.legal h2{font-size:1.375rem;margin-top:var(--s6)}
.legal h3{font-size:1.0625rem;margin-top:var(--s4)}
.legal p,.legal li{font-size:.9375rem}
.legal ul{list-style:disc;padding-left:1.25rem;display:grid;gap:8px}
.legal-note{
  border-left:3px solid var(--orange);background:#FFF7F1;
  padding:var(--s3);border-radius:0 var(--r-input) var(--r-input) 0;font-size:.9375rem;
}

/* ---------- Footer ---------- */
.site-footer{background:var(--near-black);color:#A3B3C9;padding-block:var(--s8) var(--s5)}
.site-footer h4{color:var(--white);font-size:.8125rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:var(--s3);font-weight:600}
.footer-grid{display:grid;gap:var(--s5)}
@media (min-width:768px){ .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr} }
.footer-brand .wordmark{font-family:Outfit,Inter,sans-serif;font-weight:600;font-size:1.1875rem;color:var(--white)}
.footer-brand p{font-size:.875rem;margin-top:var(--s2);max-width:34ch}
.site-footer li{margin-bottom:10px}
.site-footer a{font-size:.9375rem;transition:color var(--t-fast) var(--ease)}
.site-footer a:hover{color:var(--white)}
.footer-legal{
  margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.1);
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);justify-content:space-between;
  font-size:.8125rem;
}
.footer-attr{color:#A3B3C9}
.gdpr-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:1000;
  padding:var(--s3) var(--s4);
  background:rgba(10,15,28,.97);color:var(--white);
  border-top:1px solid rgba(255,255,255,.14);
  box-shadow:0 -8px 30px rgba(0,0,0,.35);
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;justify-content:space-between;
  transition:transform var(--t-fast) var(--ease),opacity var(--t-fast) var(--ease);
}
.gdpr-banner.is-hidden{transform:translateY(100%);opacity:0;pointer-events:none}
.gdpr-text{font-size:.8125rem;color:#A3B3C9;max-width:72ch;line-height:1.6;margin:0}
.gdpr-text a{color:var(--white);text-decoration:underline;text-underline-offset:2px}
.gdpr-accept{flex:0 0 auto;white-space:nowrap}
/* The consent banner sits on near-black but is NOT inside a .surface-dark
   section, so .btn-secondary's navy-on-light styling left Accept unreadable.
   Specificity beats .btn-secondary, so source order cannot break this again. */
.gdpr-banner .btn.gdpr-accept{
  background:var(--white);color:var(--navy);border-color:var(--white);
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.gdpr-banner .btn.gdpr-accept:hover{background:#E6EDF7;border-color:#E6EDF7;color:var(--navy)}
.gdpr-banner .btn.gdpr-accept:active{background:#D6E0EF;border-color:#D6E0EF}
.gdpr-banner .btn.gdpr-accept:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.gdpr-actions{display:flex;flex-direction:column;gap:8px;flex:0 0 auto}
.gdpr-banner .btn.gdpr-reject{
  background:rgba(255,255,255,.5);border-color:transparent;color:var(--navy);
  white-space:nowrap;
}
.gdpr-banner .btn.gdpr-reject:hover{background:rgba(255,255,255,.65)}
.gdpr-banner .btn.gdpr-reject:active{background:rgba(255,255,255,.75)}
.gdpr-banner .btn.gdpr-reject:focus-visible{outline:2px solid var(--white);outline-offset:3px}
@media (max-width:639px){
  .gdpr-banner{padding:var(--s3) var(--gutter)}
  .gdpr-actions{width:100%}
  .gdpr-banner .btn.gdpr-accept,.gdpr-banner .btn.gdpr-reject{width:100%}
}

/* ---------------------------------------------------------------
   Chat widget vs consent banner
   The Votel widget mounts a fixed launcher bottom-right at z-index 50.
   The consent banner is a full-width fixed bar at z-index 1000, so the
   two occupy the same corner and the launcher lands underneath it.
   While the banner is showing, lift the launcher clear of it and raise
   it above the banner so it stays clickable. Once the banner is
   accepted it gets .is-hidden, this rule stops matching, and the
   launcher returns to its normal resting position.
   Degrades safely: without :has() support neither property applies,
   the launcher stays behind the banner, and Accept remains clickable.
   --------------------------------------------------------------- */
body:has(.gdpr-banner:not(.is-hidden)) #nocotel-widget-container{
  transform:translateY(-186px);
  z-index:1100;
}
/* The banner wraps to ~242px on narrow screens, so it needs a bigger lift. */
@media (max-width:639px){
  body:has(.gdpr-banner:not(.is-hidden)) #nocotel-widget-container{
    transform:translateY(-320px);
  }
}
@media (prefers-reduced-motion:no-preference){
  #nocotel-widget-container{transition:transform .25s ease}
}
@media print{
  #nocotel-widget-container{display:none !important}
}

/* ---------- Utilities ---------- */
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.text-center{text-align:center}
.mt-3{margin-top:var(--s3)} .mt-4{margin-top:var(--s4)} .mt-5{margin-top:var(--s5)}
.mb-3{margin-bottom:var(--s3)} .mb-4{margin-bottom:var(--s4)} .mb-5{margin-bottom:var(--s5)}
.caption{font-size:.8125rem;color:var(--muted)}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(12px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease)}
.reveal.is-visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}