/* ===========================================================
   OptiWize + ARIA brochure. Self-hosted fonts: no runtime
   request to Google, and the PDF renders correctly offline.
   =========================================================== */

@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --ink:#0C1220;
  --muted:#5A6472;
  --paper:#FFFFFF;
  --surface:#F5F7FA;
  --rule:#E2E7EE;

  --night:#08101F;
  --night-2:#0E1A30;
  --night-ink:#F2F6FC;
  --night-muted:#93A2B8;
  --night-rule:#1D2C46;

  --ow-a:#006BA6;
  --ow-b:#D12B92;
  --aria-a:#123F84;
  --aria-b:#29C9F4;
  /* The middle stop of the official ARIA symbol gradient
     (_brand/aria/aria-logo-vector.svg). It exists as a token because dark ink
     on a gradient that starts at --aria-a fails WCAG AA at the dark end:
     #04101F on #123F84 is 1.9:1. Starting the same ramp at --aria-mid keeps
     the brand gradient and clears AA across its whole width (5.5:1 to 9.8:1). */
  --aria-mid:#1D8FE0;

  --ok:#1F9D68;
  --warn:#D98324;
  --crit:#D14343;

  --display:"Space Grotesk","DejaVu Sans",system-ui,sans-serif;
  --body:"Inter","DejaVu Sans",system-ui,sans-serif;
  --mono:"JetBrains Mono","DejaVu Sans Mono",ui-monospace,monospace;

  --gutter:clamp(20px,5vw,72px);
  --maxw:1200px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.03em;margin:0;line-height:1.06}
h1{font-size:clamp(2.6rem,6.2vw,4.5rem)}
h2{font-size:clamp(1.9rem,3.8vw,2.85rem)}
h3{font-size:1.14rem;font-weight:600;letter-spacing:-.014em;line-height:1.3}
p{margin:0 0 1em}
.lede{font-size:clamp(1.05rem,1.8vw,1.28rem);line-height:1.52;color:var(--muted);max-width:58ch}
h2+.lede{margin-top:1.1rem}
/* Most blocks open heading, lede, content, and the lede supplies the gap under
   the heading. #deployment has no lede, so without this its h2 sits flush on
   the top border of the first card, on screen and in the PDF alike.
   :where() holds the selector at element specificity so a block that already
   sets its own opening margin keeps it. */
h2+:where(.grid,.steps,.tiers,.pyramid,.stack,.problem-grid,.stats){margin-top:1.6rem}

.eyebrow{
  font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:.7em;margin:0 0 1.2rem;
}
.eyebrow::before{
  content:"";width:1.6rem;height:2px;flex:none;border-radius:2px;
  background:linear-gradient(90deg,var(--ow-a),var(--ow-b));
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--rule);min-width:1.5rem}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--body);font-size:.92rem;font-weight:600;text-decoration:none;
  padding:.72em 1.25em;border-radius:6px;border:1px solid transparent;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;
}
.btn-primary{background:linear-gradient(100deg,var(--ow-a),var(--ow-b));color:#fff}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{border-color:var(--rule);color:var(--ink);background:var(--paper)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-quiet{border-color:var(--rule);color:var(--ink);background:var(--surface)}
.btn-quiet:hover{border-color:var(--ink)}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--ow-a);outline-offset:3px}

/* ---------- sections ---------- */
section{padding:clamp(3.6rem,8vw,6.5rem) 0;position:relative}
section+section{border-top:1px solid var(--rule)}

/* dark blocks: ARIA and the closing CTA */
.night{
  background:var(--night);color:var(--night-ink);
  border-top:none;
}
.night::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--aria-a),var(--aria-b));
}
.night h1,.night h2,.night h3{color:var(--night-ink)}
.night .lede,.night .eyebrow{color:var(--night-muted)}
.night .eyebrow::before{background:linear-gradient(90deg,var(--aria-a),var(--aria-b))}
.night .eyebrow::after{background:var(--night-rule)}
.night .btn-ghost{border-color:var(--night-rule);color:var(--night-ink);background:transparent}
.night .btn-ghost:hover{border-color:var(--night-ink)}
/* the ramp starts at --aria-mid, not --aria-a: the label ink has to clear AA
   over every pixel of its own gradient, not only over the light end */
.night .btn-primary{background:linear-gradient(100deg,var(--aria-mid),var(--aria-b));color:#04101F}
.night .btn:focus-visible,.night a:focus-visible{outline-color:var(--aria-b)}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s ease}
.reveal.is-in{opacity:1;transform:none}

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

/* ---------- print/screen split ---------- */
.print-only{display:none}

/* ===== from build/blocks/_header.css ===== */
/* ---------- skip link ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink);color:#fff;padding:.7em 1.1em;border-radius:0 0 6px 0;
  font-size:.9rem;font-weight:600;text-decoration:none;
}
.skip:focus{left:0}

/* ---------- masthead ---------- */
.masthead{
  position:sticky;top:0;z-index:30;
  background:rgba(255,255,255,.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:13px;padding-bottom:13px}
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none}
.brand img{display:block;height:22px;width:auto}
/* the ARIA artwork carries generous padding inside its own viewBox, so it
   needs a taller box than the tight-cropped OptiWize wordmark to weigh the
   same: at 34px its node symbol renders 22px of ink, matching the cloud mark */
.brand .aria-mark{height:34px;width:auto}
.brand-plus{color:var(--muted);font-family:var(--display);font-weight:600;font-size:1.1rem}
.masthead nav{display:flex;align-items:center;gap:1.6rem}
.masthead nav a.navlink{font-size:.9rem;text-decoration:none;color:var(--muted)}
.masthead nav a.navlink:hover{color:var(--ink)}
@media(max-width:820px){.masthead nav a.navlink{display:none}.masthead nav{gap:.8rem}}
/* at phone widths the wordmark lockup and the CTA no longer both fit at full
   size, and neither is allowed to overlap the other: both step down instead */
@media(max-width:520px){
  .masthead .wrap{gap:.6rem}
  .brand{gap:.4rem}
  .brand img{height:17px}
  .brand .aria-mark{height:26px}
  .brand-plus{font-size:.95rem}
  .masthead .btn{font-size:.82rem;padding:.58em .8em}
}

/* ===== from build/blocks/01-hero.css ===== */
/* ---------- hero ----------
   Vertical budget is the constraint here, not the type scale: the two-ways
   band has to clear the fold on a 900px-tall viewport, so the headline is
   given a measure wide enough to hold its first sentence on one line. */
.hero{padding-top:clamp(2.4rem,5vw,4rem);padding-bottom:clamp(2.6rem,5vw,4rem);border-top:none}
.hero h1{max-width:24ch}
.hero h1 .dim{display:block;color:var(--muted);font-weight:600}
.hero .lede{margin-top:1.4rem;max-width:62ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.7rem}

/* ---------- two ways in ---------- */
.ways{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:clamp(2rem,4vw,2.8rem)}
@media(max-width:800px){.ways{grid-template-columns:1fr}}

.way{
  display:block;text-decoration:none;padding:1.6rem 1.5rem 1.4rem;
  background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  position:relative;overflow:hidden;
  transition:border-color .18s ease,transform .18s ease;
}
.way::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--ow-a),var(--ow-b));opacity:.55;
}
.way[data-track="distributor"]::before{background:linear-gradient(90deg,var(--aria-a),var(--aria-b))}
.way:hover{border-color:var(--ink);transform:translateY(-2px)}
.way-tag{
  font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.85rem;
}
.way-h{font-size:1.3rem;line-height:1.22;margin-bottom:.7rem}
.way p{color:var(--muted);font-size:.96rem;margin-bottom:1rem}
.way-go{font-size:.9rem;font-weight:600;color:var(--ow-a)}
.way-go::after{content:" \2192"}
.way[data-track="distributor"] .way-go{color:var(--aria-a)}

/* campaign emphasis: distributor-led campaigns lead with the partner card */
.ways.distributor-first{direction:rtl}
.ways.distributor-first>.way{direction:ltr}
.ways.distributor-first .way[data-track="distributor"]{
  border-color:var(--aria-a);box-shadow:0 6px 24px rgba(18,63,132,.10);
}
@media(max-width:800px){
  .ways.distributor-first{direction:ltr;display:flex;flex-direction:column}
  .ways.distributor-first .way[data-track="distributor"]{order:-1}
}

/* ===== from build/blocks/02-problem.css ===== */
/* ---------- problem ---------- */
.problem-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:1.6rem;margin-top:2.6rem;align-items:start}
@media(max-width:900px){.problem-grid{grid-template-columns:1fr}}

.logpane{border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--night)}
.logpane-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:.6rem .9rem;background:var(--night-2);border-bottom:1px solid var(--night-rule);
}
.logpane-dots{display:inline-flex;gap:6px}
.logpane-dots::before{content:"";width:9px;height:9px;border-radius:50%;background:#3C4B66;box-shadow:15px 0 0 #3C4B66,30px 0 0 #3C4B66}
.logpane-clock{font-family:var(--mono);font-size:.78rem;color:var(--warn)}
.logpane-body{margin:0;padding:1rem 1.1rem;overflow-x:auto}
.logpane-body code{
  font-family:var(--mono);font-size:.735rem;line-height:1.85;
  color:var(--night-muted);white-space:pre;display:block;
}
.logpane-body b{font-weight:500}
.logpane-body .crit{color:#FF8A7A}
.logpane-body .warn{color:#F2B45B}

.problem-cards{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:520px){.problem-cards{grid-template-columns:1fr}}
.pcard{padding:1.25rem 1.2rem;background:var(--surface);border:1px solid var(--rule);border-radius:10px}
.pcard h3{margin-bottom:.5rem}
.pcard p{color:var(--muted);font-size:.93rem;margin:0}

/* ===== from build/blocks/03-paradigm.css ===== */
/* ---------- paradigm stack ---------- */
.stack{margin-top:2.8rem;max-width:920px}
.stack-layer{
  display:grid;grid-template-columns:190px 1fr;gap:1.6rem;align-items:center;
  padding:1.5rem 1.6rem;border:1px solid var(--rule);border-radius:12px;background:var(--paper);
}
@media(max-width:700px){.stack-layer{grid-template-columns:1fr;gap:.9rem}}
.stack-mark{display:flex;align-items:center}
.stack-mark img{height:auto}
.stack-aria{background:linear-gradient(180deg,rgba(41,201,244,.09),rgba(18,63,132,.05));border-color:rgba(18,63,132,.25)}
.stack-ow{background:linear-gradient(180deg,rgba(0,107,166,.07),rgba(209,43,146,.045));border-color:rgba(0,107,166,.25)}
.stack-fleet{background:var(--surface)}
.stack-layer h3{margin-bottom:.4rem}
.stack-layer p{color:var(--muted);font-size:.95rem;margin:0}
.stack-join{width:2px;height:26px;margin:0 auto;background:linear-gradient(180deg,var(--aria-b),var(--ow-a))}

/* the fleet layer carries no wordmark, so its copy would otherwise be
   auto-placed into the 190px mark column. Keep it in the text column so the
   three layers read as one aligned stack. */
.stack-fleet .stack-copy{grid-column:2}
@media(max-width:700px){.stack-fleet .stack-copy{grid-column:auto}}

/* ===== from build/blocks/04-optiwize.css ===== */
/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.6rem}
@media(max-width:820px){.steps{grid-template-columns:1fr}}
.step{padding:1.4rem 1.4rem 1.3rem;border:1px solid var(--rule);border-radius:12px;background:var(--paper);position:relative}
.step-n{
  font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;
  background:linear-gradient(90deg,var(--ow-a),var(--ow-b));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:block;margin-bottom:.7rem;
}
.step h3{margin-bottom:.5rem}
.step p{color:var(--muted);font-size:.94rem;margin:0}

/* ---------- capability grid ---------- */
.subhead{
  font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
  margin:2.8rem 0 1rem;padding-bottom:.6rem;border-bottom:1px solid var(--rule);
}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}
.card{padding:1.25rem 1.2rem;border:1px solid var(--rule);border-radius:10px;background:var(--paper)}
.card .tag{
  font-family:var(--mono);font-size:.63rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ow-a);display:block;margin-bottom:.6rem;
}
.card h3{margin-bottom:.45rem}
.card p{color:var(--muted);font-size:.91rem;margin:0}

/* ===== from build/blocks/05-aria.css ===== */
/* ---------- aria head ---------- */
.aria-head{display:grid;grid-template-columns:150px 1fr;gap:2rem;align-items:start;margin-bottom:2.6rem}
@media(max-width:760px){.aria-head{grid-template-columns:1fr;gap:1.2rem}}

/* The mark is inlined everywhere rather than an <img> because the official file
   paints an opaque white plate behind itself: as an <img> that plate shows up
   as a white box on the night block, on the tinted paradigm card and on the
   translucent masthead. Inlined, the artwork carries no background at all and
   the wordmark takes currentColor, so it is light on dark and dark on light
   without a per-context override.
   Each instance defines its own gradient, so --am-paint names which one this
   instance paints with: duplicate element ids in one document are invalid and
   resolve to whichever came first. */
.aria-mark{height:auto;display:block;--am-paint:url(#ariaMarkGradient)}
.brand .aria-mark{--am-paint:url(#ariaMarkGradientBrand)}
.stack-mark .aria-mark{--am-paint:url(#ariaMarkGradientStack)}
.aria-mark .am-link{fill:none;stroke:var(--am-paint);stroke-width:12;stroke-linecap:round;stroke-linejoin:round}
.aria-mark .am-node{fill:var(--am-paint)}
.aria-mark .am-word{
  fill:currentColor;font-family:Arial,"Liberation Sans","DejaVu Sans",sans-serif;
  font-size:92px;font-weight:800;letter-spacing:4px;
}

/* ---------- terminal ---------- */
.term{border:1px solid var(--night-rule);border-radius:12px;overflow:hidden;background:#050B16;margin-bottom:1rem}
.term-bar{display:flex;align-items:center;justify-content:space-between;padding:.6rem .9rem;background:var(--night-2);border-bottom:1px solid var(--night-rule)}
.term-title{font-family:var(--mono);font-size:.72rem;color:var(--night-muted)}
.term-body{margin:0;padding:1.4rem 1.3rem;overflow-x:auto}
.term-body code{font-family:var(--mono);font-size:.82rem;line-height:1.95;white-space:pre;display:block;color:#C6D4E8}
.t-prompt{color:var(--aria-b)}
.t-in{color:#FFFFFF;font-weight:500}
.t-dim{color:#7E8FA8}
.t-ok{color:#5CD9A0}
.t-crit{color:#FF9080}
.t-arrow{color:var(--aria-b)}
.t-cmd{color:#F2B45B}
@media(max-width:620px){.term-body code{font-size:.7rem}}

/* dark-block variants of the shared card/subhead */
.night .subhead{color:var(--night-muted);border-bottom-color:var(--night-rule)}
.night .card{background:var(--night-2);border-color:var(--night-rule)}
.night .card p{color:#B6C4D8}
.night .card .tag{color:var(--aria-b)}

/* ---------- flow ---------- */
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
@media(max-width:980px){.flow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.flow{grid-template-columns:1fr}}
.flow li{padding:1.2rem 1.1rem;border:1px solid var(--night-rule);border-radius:10px;background:var(--night-2);position:relative}
.flow-n{
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  width:1.9rem;height:1.9rem;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;margin-bottom:.75rem;
  /* same reason as .night .btn-primary: the step numeral is content, so its
     ink must clear AA over the dark end of the badge as well as the light one */
  background:linear-gradient(120deg,var(--aria-mid),var(--aria-b));color:#04101F;
}
.flow li h3{margin-bottom:.4rem;font-size:1rem}
.flow li p{color:#B6C4D8;font-size:.875rem;margin:0}

/* ---------- comparison ---------- */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:760px){.vs{grid-template-columns:1fr}}
.vs-col{padding:1.4rem 1.4rem 1.2rem;border-radius:12px;border:1px solid var(--night-rule);background:var(--night-2)}
.vs-after{border-color:rgba(41,201,244,.42);background:linear-gradient(180deg,rgba(41,201,244,.10),rgba(18,63,132,.06)),var(--night-2)}
.vs-h{
  font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;display:block;margin-bottom:1rem;color:var(--night-muted);
}
.vs-after .vs-h{color:var(--aria-b)}
.vs-col ul{margin:0;padding-left:1.1rem}
.vs-col li{color:#B6C4D8;font-size:.93rem;margin-bottom:.7rem;line-height:1.5}
.vs-col li::marker{color:var(--night-muted)}
.vs-after li::marker{color:var(--aria-b)}

/* print: the night block flattens, so the wordmark must go dark to stay visible */
@media print{
  .aria-mark .am-word{fill:var(--aria-a)}
}

/* ===== from build/blocks/06-tenancy.css ===== */
/* ---------- tenancy pyramid ---------- */
.pyramid{margin-top:2.6rem;display:grid;gap:.6rem;max-width:940px}
.ptier{
  padding:1.25rem 1.4rem;border:1px solid var(--rule);border-radius:10px;
  background:var(--surface);margin:0 auto;width:100%;
}
.ptier-1{max-width:58%}
.ptier-2{max-width:72%}
.ptier-3{max-width:86%}
.ptier-4{max-width:100%}
@media(max-width:760px){.ptier-1,.ptier-2,.ptier-3,.ptier-4{max-width:100%}}
.ptier-role{
  font-family:var(--mono);font-size:.64rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ow-a);display:block;margin-bottom:.45rem;
}
.ptier h3{margin-bottom:.35rem;font-size:1.02rem}
.ptier p{color:var(--muted);font-size:.91rem;margin:0}
.ptier-1{background:linear-gradient(120deg,rgba(0,107,166,.10),rgba(209,43,146,.07));border-color:rgba(0,107,166,.28)}

.wl{
  margin-top:2rem;padding:1.5rem 1.6rem;border-radius:12px;
  border:1px solid rgba(18,63,132,.24);
  background:linear-gradient(120deg,rgba(41,201,244,.08),rgba(18,63,132,.05));
  max-width:940px;
}
.wl h3{margin-bottom:.5rem}
.wl p{color:var(--muted);margin:0}

/* ===== from build/blocks/08-proof.css ===== */
/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:2.4rem}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.stats{grid-template-columns:1fr}}
.stat{padding:1.3rem 1.2rem;border:1px solid var(--rule);border-radius:10px;background:var(--surface)}
.stat-n{
  display:block;font-family:var(--display);font-weight:700;letter-spacing:-.035em;
  font-size:clamp(1.7rem,3.2vw,2.3rem);line-height:1;margin-bottom:.5rem;
  background:linear-gradient(100deg,var(--ow-a),var(--ow-b));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat-l{font-size:.85rem;color:var(--muted);line-height:1.35;display:block}
.provenance{margin-top:1.6rem;font-size:.86rem;color:var(--muted);max-width:70ch}

/* ---------- two-up variant of the shared capability grid ---------- */
.grid-2{grid-template-columns:repeat(2,1fr)}
@media(max-width:760px){.grid-2{grid-template-columns:1fr}}

/* ===== from build/blocks/10-partners.css ===== */
/* ---------- partner tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.6rem}
@media(max-width:900px){.tiers{grid-template-columns:1fr}}
.tier{padding:1.5rem 1.4rem 1.4rem;border:1px solid var(--rule);border-radius:12px;background:var(--paper);display:flex;flex-direction:column}
.tier-mark{border-color:var(--ow-a);box-shadow:0 8px 30px rgba(0,107,166,.10)}
.tname{font-family:var(--display);font-weight:700;font-size:1.22rem;letter-spacing:-.02em;display:block;margin-bottom:.3rem}
.tfor{color:var(--muted);font-size:.92rem;margin-bottom:1rem}
.tier ul{margin:0 0 1.3rem;padding-left:1.05rem;flex:1}
.tier li{font-size:.91rem;margin-bottom:.55rem;line-height:1.45}
.tier li::marker{color:var(--ow-a)}
.tier .btn{align-self:flex-start}

.split{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:3rem}
@media(max-width:760px){.split{grid-template-columns:1fr;gap:1.4rem}}
.col-head{
  font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.9rem;
}
.plist{margin:0;padding-left:1.05rem}
.plist li{font-size:.94rem;margin-bottom:.6rem;color:var(--muted);line-height:1.5}

/* ---------- licensing ---------- */
/* The licensing block reuses .grid/.card/.grid-2; this is its only own rule. */
.lic-cta{margin-top:2rem}

/* ===== from build/blocks/12-talk.css ===== */
/* ---------- closing cta ---------- */
.cta-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2rem}
.cta-meta{
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:2.2rem;
  padding-top:1.2rem;border-top:1px solid var(--night-rule);
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--night-muted);
}

/* ===== from build/blocks/_footer.css ===== */
/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--rule);padding:2.6rem 0;background:var(--surface)}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap}
.site-foot img{height:20px;width:auto;margin-bottom:.9rem}
.legal{font-size:.83rem;color:var(--muted);line-height:1.7;margin:0}
.foot-links{display:flex;gap:1.4rem;font-size:.88rem}
.foot-links a{color:var(--muted);text-decoration:none}
.foot-links a:hover{color:var(--ink)}

/* ===========================================================
   PRINT. The PDF is this document, not a second one.
   Dark blocks flatten to light and keep only a brand rule.
   =========================================================== */
@media print{
  @page{size:A4;margin:14mm}

  html,body{background:#fff!important;color:#000!important;font-size:9.6pt;line-height:1.5}

  .no-print,.masthead,.skip,.ways{display:none!important}
  .print-only{display:block!important}

  /* reveal-on-scroll never fires when the document is rendered straight to
     print: the observer only sees the first viewport, so every section below
     it would paint at opacity 0 and the PDF would come out blank. */
  .reveal{opacity:1!important;transform:none!important}

  section{padding:9mm 0;break-inside:auto}
  section+section{border-top:1px solid #D9D9D9}
  .wrap{max-width:none;padding:0}

  /* dark blocks become light, the gradient survives as a rule */
  .night{background:#fff!important;color:#000!important}
  .night::before{height:2pt;background:linear-gradient(90deg,#123F84,#29C9F4)!important;position:static;display:block;margin-bottom:6mm}
  .night h1,.night h2,.night h3,.night .lede,.night .eyebrow{color:#000!important}
  .night .card,.night .flow li,.night .vs-col{background:#F4F6F9!important;border-color:#D9D9D9!important}
  .night .card p,.night .flow li p,.night .vs-col li{color:#333!important}
  .night .cta-meta{color:#555!important;border-top-color:#D9D9D9!important}

  /* accents authored for a dark base become unreadable once the block is
     flattened: cyan on near-white is about 1.8:1. Re-anchor them on the dark
     ARIA stop, which clears AA on the same background. */
  .night .card .tag,.night .vs-h,.night .vs-after .vs-h{color:#123F84!important}
  .night .vs-col li::marker,.night .vs-after li::marker{color:#123F84}
  .night .subhead{color:#555!important;border-bottom-color:#D9D9D9!important}

  /* the terminal and the log pane stay dark: they are screenshots of a
     product, and inverting them would misrepresent what the reader sees */
  .term,.logpane{border-color:#B9C2CE!important;break-inside:avoid}
  .term-body code,.logpane-body code{font-size:7pt;white-space:pre-wrap}

  h1{font-size:24pt}
  h2{font-size:15pt}
  h3{font-size:10.5pt}
  .lede{font-size:10.5pt;color:#333!important}
  .eyebrow{font-size:7pt}
  .eyebrow::after{display:none}

  /* gradient text does not print: fall back to solid ink */
  .stat-n,.step-n{
    -webkit-text-fill-color:#006BA6!important;color:#006BA6!important;
    background:none!important;
  }

  .card,.pcard,.step,.tier,.stat,.ptier,.flow li,.vs-col,.wl{break-inside:avoid}
  /* a block opens with eyebrow, heading, lede: none of the three may be the
     last thing on a page with the block it introduces on the next one */
  h2,h3,.eyebrow,.lede,.subhead{break-after:avoid}
  .eyebrow,.lede,h1,h2,h3{break-inside:avoid}
  p{orphans:2;widows:2}
  .site-foot{break-before:avoid}
  .grid{grid-template-columns:repeat(3,1fr)!important;gap:4mm}
  .problem-grid,.split,.vs,.grid-2{grid-template-columns:1fr 1fr!important;gap:5mm}
  .steps,.tiers{grid-template-columns:repeat(3,1fr)!important;gap:4mm}
  .flow{grid-template-columns:repeat(5,1fr)!important;gap:3mm}
  .stats{grid-template-columns:repeat(5,1fr)!important;gap:3mm}

  #partners,#licensing{break-before:page}

  .contact-print{
    font-family:var(--mono);font-size:9pt;line-height:1.9;margin-top:6mm;
  }
  a{text-decoration:none;color:#000}
  /* the footer is a colophon, not a page: trimmed so it settles under the
     closing block instead of claiming a sheet of its own */
  .site-foot{background:#fff!important;border-top:1px solid #D9D9D9;padding:5mm 0 0;break-inside:avoid}
  .site-foot img{height:14px;margin-bottom:3mm}
  .legal{font-size:8pt;line-height:1.55}
}