/* ==========================================================================
   site-v3 additions ONLY — everything in liquid-glass.css is an exact,
   unmodified copy of the approved reference file's <style> block. Nothing
   in that file is touched. These are the few genuinely new things this
   round's structure needs: a "Solution" nav dropdown (the client's own
   comments specify subtabs that the reference's flat nav has no mechanism
   for), and moving the news bar out of the fixed top position into the
   bottom of the hero, per the client's explicit placement instruction.
   ========================================================================== */

a{color:var(--blue-d)}

/* nav needs overflow:visible for the dropdown to escape the pill; the
   reference sets overflow:hidden because it never has a dropdown. */
.navbar nav{overflow:visible}

/* Clip only the navbar's glass layers; dropdowns must escape the pill. */
#navbar nav.lg > .rim,
#navbar nav.lg > .sheen,
#navbar nav.lg > .spec{
  clip-path: inset(0 round 26px);
}

#navbar nav.lg > .sheen{
  display:none;
}

.navdrop{position:relative}
.navdrop>a{display:inline-flex;align-items:center;gap:5px}
.navdrop .car{width:8px;height:8px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .18s}
.navdrop:hover .car,.navdrop:focus-within .car{transform:rotate(-135deg) translateY(1px)}
.navmenu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);
  min-width:240px;padding:10px;border-radius:20px;display:none;
  flex-direction:column;gap:2px;text-align:left;
  background:linear-gradient(168deg,rgba(255,255,255,.96),rgba(255,255,255,.9));
  -webkit-backdrop-filter:blur(18px) saturate(180%);backdrop-filter:blur(18px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 26px 60px -34px rgba(14,42,96,.55),
    0 1px 0 rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.9)}
.navdrop:hover .navmenu,.navdrop:focus-within .navmenu{display:flex}
.navmenu a{display:block;padding:10px 14px;border-radius:12px;font-size:13.5px;
  color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:.15s}
.navmenu a:hover{background:rgba(44,123,242,.08);color:var(--ink)}
.navmenu .navgroup{display:block;padding:10px 14px;font-size:13.5px;font-weight:500;color:var(--ink-2);cursor:default}
.navmenu .navsub{padding-left:30px;font-size:12.5px}
@media (max-width:820px){
  .navdrop .navmenu{position:static;transform:none;display:flex;margin-top:6px;
    box-shadow:none;background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* the reference's navbar sits top:22px, clearing a fixed 22px newsbar above
   it. That newsbar is no longer fixed here (see .newsbar.inflow below), so
   the navbar has nothing to clear. */
.navbar{top:0}

/* news bar, in-flow at the bottom of the hero rather than fixed at the very
   top of the page — per the client's placement instruction this round. */
.newsbar.inflow{position:static;height:auto;border-bottom:0;border-top:1px solid var(--line);
  background:rgba(255,255,255,.4)}
.newsbar.inflow .wrap{height:40px}
.newsbar.inflow .newsk,.newsbar.inflow .newsrail,.newsbar.inflow .newsi{height:40px;line-height:40px}
.newsbar.inflow .newsk{padding:0 12px;font-size:10.5px}
.newsbar.inflow .newsarr button{width:32px;height:32px;align-self:center}
/* stage no longer needs to reserve space for a fixed bar above it */
.stage>.inner{padding-top:0}
@media (max-width:760px){.stage>.inner{padding-top:0}}

/* placeholder banner for content the client hasn't supplied yet — reuses
   the reference's own dashed-glass .ph treatment, just labeled clearly */
.pending{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue-d)}

/* Four-tab navigation, shared by every v4 page. Native details supports touch
   and keyboard without requiring JavaScript to open a dropdown. */
.navbar nav{padding:12px 24px}
.navtabs{display:flex;align-items:center;gap:26px}
.navdrop summary{display:flex;align-items:center;gap:8px;cursor:pointer;
  list-style:none;font-size:13.5px;color:var(--ink-2);padding:10px 0}
.navdrop summary::-webkit-details-marker{display:none}
.navdrop summary:focus-visible,.navbar a:focus-visible{outline:2px solid var(--blue-d);outline-offset:4px}
.navdrop:not([open]) .navmenu{display:none}
.navdrop[open] .navmenu{display:flex}
.navdrop .car{flex:none}
.navdrop:not([open]) .car{transform:rotate(45deg) translateY(-2px)}
.navdrop[open] .car{transform:rotate(-135deg) translateY(1px)}
.navmenu{top:calc(100% + 10px);max-height:calc(100dvh - 120px);overflow:auto;
  width:max-content;max-width:min(430px,calc(100vw - 40px))}
.navbar .navmenu a{display:block;white-space:normal}
.navdrop:last-child .navmenu{left:auto;right:-12px;transform:none}
.navbar .logo,.navbar .navplain{display:inline-block}
.navbar .logo{line-height:0}.navbar .logo img{display:block;height:28px;width:auto;transform:translateY(3.7px)} /* optical centring: the p descender makes the box taller than the letter body */
.intro-section{padding:0;border:0}
.intro-section .stage>.inner{padding-top:96px}
/* Keep breathing room above the intro's news bar. */
#intro-semantic-ai-harness .stage>.inner>.wrap:has(+ #newsbar)>.hero{padding-bottom:24px}
.intro-definition{padding-top:66px;padding-bottom:60px}
.hero h2{font-size:clamp(23px,3vw,36px);margin:8px 0 18px}
/* Restrained intro tightening: remove accumulated padding and margins, keeping
   copy sizes and line lengths intact. The animated mark scales its canvas
   geometry to its CSS box; 116px is also its existing small-screen size.
   Saves 192px above 820px wide, 150px below, before the stage's viewport floor. */
.intro-section .hero{padding-top:24px}
.intro-section .hero .pane{padding:20px 40px 16px}
.intro-section .hero .mark{width:116px;height:116px;margin-bottom:14px}
.intro-section .hero h1{margin-bottom:16px}
.intro-section .hero .lede{margin-bottom:16px}
.intro-section .hero h2{margin:4px 0 10px}
.intro-section .hero .micro{margin-top:10px}
.intro-section .hero .cta{margin-top:16px}
.feature-page,.stub-page{padding-top:120px}
.feature-page h1{font-size:clamp(36px,5vw,64px);max-width:26ch;line-height:1.04}
.feature-page .subin p+p{margin-top:20px}
.source-list{padding-left:24px;color:var(--ink-2);font-size:15.5px;line-height:1.66}
.source-list li{margin:12px 0}
.letter>.source-list{max-width:900px;margin:26px auto}
.deeptech-card,.award-link{color:inherit;text-decoration:none;display:block}
.recognition-card blockquote{margin:30px 0 20px}
.recognition-card blockquote p{font-size:20px;line-height:1.65;color:var(--ink)}
.recognition-card cite{display:block;font-style:normal;font-size:14px;line-height:1.6;color:var(--ink-2)}
.recognition-links{display:flex;gap:24px}
.recognition-links a{color:var(--blue-d);text-underline-offset:4px}
.partner-logos{margin-top:64px}
.partner-logos .ph{min-height:130px;padding:24px 16px}
.partner-logos .pht{font-size:18px}
.award-heading{margin:44px 0 24px;font-size:clamp(24px,3vw,34px);line-height:1.2}
.recognition-final{margin-top:48px}
.recognition-final>.ph{max-width:420px}
.award-link .ph{height:100%}
.stub-page{min-height:80vh}
@media(max-width:1000px){.navtabs{gap:18px}.navbar nav .lgc{gap:16px}}
@media(max-width:820px){
  .navbar nav{border-radius:24px;padding:12px 18px}
  .navbar nav .lgc{flex-wrap:wrap;gap:8px}
  .navtabs{width:100%;justify-content:space-between;gap:12px}
  .navdrop{position:static}
  .navdrop summary,.navbar .navplain{font-size:12px}
  .navdrop .navmenu{position:absolute;left:0;right:0;top:calc(100% + 8px);
    transform:none;width:auto;min-width:0;max-width:none;margin:0;
    max-height:calc(100dvh - 154px);background:rgba(250,252,255,.98);
    backdrop-filter:blur(18px);box-shadow:0 20px 50px -20px rgba(14,42,96,.35)}
  .navdrop:last-child .navmenu{left:0;right:0}
  .navbar .navmenu a{display:block;padding:10px 14px}
  .navbar .navmenu .navsub{padding-left:26px}
  main>section[id]{scroll-margin-top:138px}
  .intro-section .stage>.inner{padding-top:116px}
  .feature-page,.stub-page{padding-top:136px}
}
@media(max-width:390px){
  .navtabs{gap:8px;flex-wrap:wrap}
  .navdrop summary,.navbar .navplain{font-size:11px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.intro-section .stage .wrap{padding:0 32px}
/* Leave 22px after section headings without changing other 52px grid gaps. */
.chapsec .wrap > .head h2{margin-bottom:0}
.chapsec .wrap > .head{margin-bottom:0}
.chapsec .wrap > .head + *{margin-top:-30px}
/* The intro paragraph lives inside its head; preserve its existing spacing. */
.chapsec .wrap.intro-definition > .head h2{margin-bottom:14px}
.chapsec .wrap.intro-definition > .head{margin-bottom:var(--s2)}
.chapsec .wrap>.partner-logos{margin-top:64px}
.chapsec .wrap>.award-heading{margin-top:44px;margin-bottom:24px}
.chapsec .wrap>.recognition-final{margin-top:48px}
.chapsec .wrap>h3{margin-top:30px;margin-bottom:24px}
.chapsec .wrap>.below{margin-top:28px}

/* Shared, disabled Ask AI placeholder; retain the reference glass material. */
.ask-ai{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));
  bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:45;
  max-width:calc(100% - 32px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));
  padding:12px 20px;border:1px solid var(--line);border-radius:100px;overflow:hidden;
  background:linear-gradient(168deg,rgba(255,255,255,.78),rgba(255,255,255,.74));
  font:inherit;color:var(--ink-2);text-align:center;cursor:default;
  pointer-events:none;opacity:1}
.ask-ai>.lgc{display:flex;flex-direction:column;gap:4px}
.ask-ai-label{display:block;font-size:14px;font-weight:600;line-height:1.2}
.ask-ai .pending{display:block;line-height:1.4}
.ask-ai.is-obstructed{visibility:hidden}
/* Allow the last footer links to scroll clear of the fixed pill. */
body{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}

/* Smarter, Faster: one glass frame around a sliding filmstrip. */
.pillar-slider{min-width:0;padding:0 0 24px;border-radius:26px;overflow:hidden}
.pillar-slider>.lgc{display:block;min-width:0}
.pillar-viewport{overflow:hidden;border-radius:20px;margin:0 56px}
.pillar-rail{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1)}
.pillar-slide{flex:0 0 100%;min-width:0;padding:34px 34px 30px;
  display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.pillar-slide>.uck{margin-bottom:calc(10px - var(--s3))}
.pillar-controls{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:12px}
.pillar-arrow{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:50%;
  background:rgba(255,255,255,.45);color:var(--ink-2);
  font-family:inherit;font-size:24px;line-height:1;cursor:pointer}
.pillar-arrow:hover{background:rgba(255,255,255,.8);color:var(--ink)}
.pillar-dots{display:flex;align-items:center;gap:8px}
.pillar-dot{width:7px;height:7px;padding:0;border:0;border-radius:50%;
  background:rgba(10,32,72,.18);cursor:pointer;transition:width .2s,background .2s}
.pillar-dot.on{width:20px;border-radius:4px;background:var(--blue)}
.pillar-arrow:focus-visible,.pillar-dot:focus-visible{outline:2px solid var(--blue-d);outline-offset:4px}
@media(max-width:700px){
  .pillar-viewport{margin:0 12px}
  .pillar-slide{padding:26px 22px 24px}
}
@media(prefers-reduced-motion:reduce){
  .pillar-rail,.pillar-dot{transition:none}
}

#use-cases .head{max-width:none}
#use-cases .uc-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;
  align-items:start;
}
#use-cases .uc-split .head{margin:0}
#use-cases .uc-split .letter{margin:0}
/* The section's grid gap (--s5, 52px) applied equally above and below this
   one-line label, reading as dead space. Pull it in on both sides instead of
   changing the section-wide gap. align-self:start avoids the grid-stretch
   trap negative margins can trigger (see the Architecture button fix). */
#use-cases-title{margin-block:-36px;align-self:start}
@media (max-width:860px){
  #use-cases .uc-split{grid-template-columns:1fr}
}

/* Trial pass: these three sections had no atmospheric background at all -
   flat solid fill, nothing else. Reusing the exact same radial-glow recipe
   already established for #architecture and #recognition, just repositioned
   per section for variety, rather than inventing a new visual language. */
#intelligent-orchestration{position:relative;overflow:hidden}
#intelligent-orchestration::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(50% 55% at 15% 20%, rgba(44,123,242,.14), rgba(44,123,242,0) 70%),
    radial-gradient(40% 45% at 85% 75%, rgba(147,189,251,.16), rgba(147,189,251,0) 70%);
  z-index:0;
  pointer-events:none;
}
#intelligent-orchestration > .wrap{position:relative;z-index:1}

#hybrid-reasoning{position:relative;overflow:hidden}
#hybrid-reasoning::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(50% 55% at 80% 15%, rgba(44,123,242,.22), rgba(44,123,242,0) 70%),
    radial-gradient(45% 50% at 10% 85%, rgba(127,176,250,.16), rgba(127,176,250,0) 70%);
  z-index:0;
  pointer-events:none;
}
#hybrid-reasoning > .wrap{position:relative;z-index:1}

#tokenomics{position:relative;overflow:hidden}
#tokenomics::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(48% 52% at 88% 10%, rgba(44,123,242,.13), rgba(44,123,242,0) 70%),
    radial-gradient(42% 46% at 8% 90%, rgba(147,189,251,.15), rgba(147,189,251,0) 70%);
  z-index:0;
  pointer-events:none;
}
#tokenomics > .wrap{position:relative;z-index:1}

#intelligent-orchestration .head{max-width:none}
#intelligent-orchestration .io-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) 240px;
  gap:56px;
  align-items:start;
}
#intelligent-orchestration .io-split .letter{margin:0}
#intelligent-orchestration .io-rail{
  display:flex;
  flex-direction:column;
  gap:18px;
  border-left:1px solid var(--line);
  padding-left:24px;
}
#intelligent-orchestration .io-item{display:flex;flex-direction:column;gap:3px}
#intelligent-orchestration .io-n{font-size:11px;letter-spacing:.14em;color:var(--blue-d)}
#intelligent-orchestration .io-l{font-size:14.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink);line-height:1.35}
@media(max-width:860px){
  #intelligent-orchestration .io-split{grid-template-columns:1fr}
  #intelligent-orchestration .io-rail{
    border-left:0;
    border-top:1px solid var(--line);
    padding-left:0;
    padding-top:20px;
    flex-direction:row;
    flex-wrap:wrap;
  }
  #intelligent-orchestration .io-item{min-width:150px}
}

#context-as-a-service .cas-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;
  align-items:start;
}
#context-as-a-service .cas-split .letter{margin:0}
#context-as-a-service .cas-cards{
  display:flex;
  flex-direction:column;
  gap:14px;
  list-style:none;
  margin:0;
  padding:0;
}
#context-as-a-service .cas-card{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:18px 22px;
  border:1px solid var(--line);
  border-radius:10px;
  background:rgba(255,255,255,.5);
}
#context-as-a-service .cas-n{
  flex:none;
  font-size:11px;
  letter-spacing:.14em;
  color:var(--blue-d);
  padding-top:3px;
}
#context-as-a-service .cas-card p{
  margin:0;
  font-size:15px;
  line-height:1.55;
  color:var(--ink-2);
}
@media (max-width:860px){
  #context-as-a-service .cas-split{grid-template-columns:1fr}
}

#tokenomics .tok-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;
  align-items:start;
}
#tokenomics .tok-split .head{margin:0;max-width:none}
#tokenomics .tok-split .letter{margin:0}
@media (max-width:860px){
  #tokenomics .tok-split{grid-template-columns:1fr}
}

#dynamically-orchestrating .head{max-width:none}
#dynamically-orchestrating .doi-seq{
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  border-top:none;
}
#dynamically-orchestrating .doi-seq .sq{
  border-left:0;
  border-top:1px solid var(--line);
  padding:18px 24px 22px 0;
}
#dynamically-orchestrating .doi-seq .sqt{
  font-size:14.5px;
  font-weight:500;
  line-height:1.5;
}

#hybrid-reasoning .hrp-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:56px;
  align-items:start;
}
#hybrid-reasoning .hrp-head{
  display:flex;
  flex-direction:column;
  gap:28px;
}
#hybrid-reasoning .hrp-head h2{margin:0}
#hybrid-reasoning .hrp-split .letter{margin:0}
@media (max-width:860px){
  #hybrid-reasoning .hrp-split{grid-template-columns:1fr}
}
#architecture .head{max-width:none}
#architecture h2{font-size:clamp(18px,2.4vw,30px);line-height:1.3}
@media (min-width:860px){
  #architecture h2{white-space:nowrap}
}
#architecture h2 .eqn-op{
  font-weight:400;
  color:var(--blue-d);
}

#architecture{position:relative;overflow:hidden}
#architecture .arch-glow{
  position:absolute;
  inset:-15% -10% auto -10%;
  height:620px;
  background:
    radial-gradient(55% 55% at 25% 25%, rgba(44,123,242,.32), rgba(44,123,242,0) 70%),
    radial-gradient(45% 45% at 78% 55%, rgba(147,189,251,.20), rgba(147,189,251,0) 70%);
  filter:blur(48px);
  pointer-events:none;
  z-index:0;
}
#architecture > .wrap{
  position:relative;
  z-index:1;
  grid-template-columns:minmax(0,1fr);
}
#architecture .btn{width:fit-content;align-self:start;padding:7px 20px;line-height:1.3;margin-top:calc(var(--s3) - var(--s5));margin-bottom:calc((var(--s5) - var(--s3)) * -1)}
/* The wrap's existing gap supplies spacing; no extra diagram margins. */
#architecture .arch-diagram{position:relative;margin:0}
#deploying{ min-height:100vh; display:flex; }
#deploying{position:relative;background:linear-gradient(180deg,#F6F9FF 0%,#EAF1FE 55%,#E4EDFC 100%)}
#deploying > .wrap{position:relative;z-index:1}
#deploying .deploy-close{ max-width:720px; margin:0 auto; text-align:center; }
#deploying .deploy-close h2{margin:0 0 var(--s3)}
#deploying .deploy-close p{ margin:0 0 var(--s4); color:var(--ink-2); font-size:16px; line-height:1.68; }
/* Join the home page's final dark chapter directly to the footer. */
main:has(> .chapter.dark:last-child > #deploying) + footer.sitefoot{margin-top:0}

#deploying .deploy-shell{
  --horizon-x:50%;
  position:relative;
  width:75%;
  height:auto;
  margin-inline:auto;
  border-radius:32px;
  overflow:hidden;
  padding-block:80px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  box-shadow:
    0 28px 64px rgba(0,0,0,.6),
    0 0 48px rgba(44,123,242,.35);
}
#deploying .deploy-horizon{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  background:
    radial-gradient(120% 70% at var(--horizon-x) 62%, rgba(255,196,120,.16), rgba(255,196,120,0) 45%),
    linear-gradient(180deg,
      #060d1f 0%,
      #0a1c3d 45%,
      #0a1c3d 62%,
      #060d1f 78%,
      #04070f 100%);
}
#deploying .deploy-horizon::before{
  content:"";
  position:absolute;
  left:50%;
  top:62%;
  width:190%;
  aspect-ratio:1;
  border-radius:50%;
  transform:translateX(-50%);
  background:
    radial-gradient(65% 65% at 50% 0%,
      #9fc3fb 0%,
      #4a8aed 22%,
      #2c7bf2 40%,
      #1b3f74 62%,
      #0a1c3d 82%,
      transparent 100%);
  z-index:0;
}
#deploying .deploy-shell > .wrap{position:relative;z-index:1;width:100%}
@media (prefers-reduced-motion:reduce){
  #deploying .deploy-shell{width:90%;border-radius:20px}
}

#recognition{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#F6F9FF 0%,#EAF1FE 55%,#E4EDFC 100%);
}
#recognition::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(45% 50% at 12% 15%, rgba(44,123,242,.16), rgba(44,123,242,0) 70%),
    radial-gradient(40% 45% at 88% 20%, rgba(147,189,251,.22), rgba(147,189,251,0) 70%),
    radial-gradient(55% 55% at 50% 100%, rgba(15,62,147,.10), rgba(15,62,147,0) 70%);
  z-index:0;
  pointer-events:none;
}
#recognition > .wrap{position:relative;z-index:1}

/* ---------- Hero hierarchy (design rule: title > category line > tagline > paragraph) ---------- */
.intro-section .hero .pane p.lede:nth-of-type(1){
  max-width:none;margin:2px 0 22px;font-size:clamp(20px,2.3vw,27px);font-weight:500;line-height:1.35;color:var(--blue-d);
}
.intro-section .hero .pane h2{
  margin:0 0 10px;font-size:clamp(18px,1.9vw,22px);font-weight:600;line-height:1.3;letter-spacing:0;
}
.intro-section .hero .pane p.lede:nth-of-type(2){
  max-width:52ch;margin:0 auto 18px;font-size:17px;line-height:1.55;color:var(--ink-2);
}

/* ---------- "What is an AI Harness": claim left, definition right (design rule: label/claim + short paragraph, two columns) ---------- */
.intro-definition > .head{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:20px 64px;align-items:start;
  max-width:none;margin:0;text-align:left;
}
.chapsec .wrap.intro-definition > .head h2{margin:0;font-size:clamp(30px,3.6vw,46px);line-height:1.1;text-align:left}
.intro-definition > .head p{
  max-width:none;margin:0;font-size:clamp(19px,1.8vw,24px);line-height:1.5;color:var(--ink);text-align:left;text-wrap:pretty;
}
@media (max-width:820px){
  .intro-definition > .head{grid-template-columns:minmax(0,1fr);gap:14px}
}

/* ---------- Intelligent Orchestration: lead paragraph + capabilities as a visible card ---------- */
#intelligent-orchestration .io-split{grid-template-columns:minmax(0,1.3fr) minmax(280px,1fr);gap:56px}
#intelligent-orchestration .letter p:first-child{font-size:clamp(20px,1.9vw,25px);line-height:1.45;color:var(--ink)}
#intelligent-orchestration .letter p:not(:first-child){font-size:17px;line-height:1.6}
#intelligent-orchestration .io-rail{
  gap:0;padding:6px 0;border:1px solid #d6e2f1;border-radius:18px;background:#fff;
  box-shadow:0 14px 34px -24px rgba(15,62,147,.5);
}
#intelligent-orchestration .io-item{flex-direction:row;align-items:baseline;gap:18px;padding:17px 24px;border-bottom:1px solid #e3ecf7}
#intelligent-orchestration .io-item:last-child{border-bottom:0}
#intelligent-orchestration .io-n{font-size:12px;flex:none}
#intelligent-orchestration .io-l{font-size:18px}
@media(max-width:860px){
  #intelligent-orchestration .io-split{grid-template-columns:1fr;gap:28px}
  #intelligent-orchestration .io-rail{border:1px solid #d6e2f1;padding:6px 0;flex-direction:column;flex-wrap:nowrap}
  #intelligent-orchestration .io-item{min-width:0;padding:15px 20px}
}

/* Intelligent Orchestration: small tone-on-tone line icons beside each capability */
#intelligent-orchestration .io-item{align-items:center}
#intelligent-orchestration .io-ic{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#eaf2ff;color:#1759b0}
#intelligent-orchestration .io-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#intelligent-orchestration .io-n{order:3;margin-left:auto;color:#8aa0bf}

/* Intelligent Orchestration: heading joins the text column; card aligns to the top of the heading */
@media (min-width:861px){
  #intelligent-orchestration > .wrap{
    display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,1fr);column-gap:56px;align-items:start;
  }
  #intelligent-orchestration > .wrap > .head{grid-column:1;grid-row:1}
  #intelligent-orchestration .io-split{display:contents}
  #intelligent-orchestration .io-split .letter{grid-column:1;grid-row:2}
  #intelligent-orchestration .io-rail{grid-column:2;grid-row:1 / span 2;align-self:start}
}

/* ---------- Context-as-a-Service: heading left + text right, then three equal cards (after the reference's claim/paragraph + card row) ---------- */
@media (min-width:861px){
  #context-as-a-service > .wrap{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);column-gap:56px;row-gap:44px;align-items:start;
  }
  #context-as-a-service > .wrap > .head{grid-column:1;grid-row:1;margin:0;max-width:none}
  #context-as-a-service > .wrap > .head h2{font-size:clamp(30px,3.4vw,44px);line-height:1.1}
  #context-as-a-service .cas-split{display:contents}
  #context-as-a-service .cas-split .letter{grid-column:2;grid-row:1}
  #context-as-a-service .cas-cards{
    grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  }
}
#context-as-a-service .letter p:first-child{font-size:clamp(19px,1.8vw,23px);line-height:1.5;color:var(--ink)}
#context-as-a-service .letter p:last-child{font-weight:600;color:var(--ink)}
#context-as-a-service .cas-card{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:26px;
  border:1px solid #d4e1f1;border-radius:16px;background:#fff;box-shadow:0 14px 30px -24px rgba(15,62,147,.45);
}
#context-as-a-service .cas-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#eaf2ff;color:#1759b0}
#context-as-a-service .cas-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#context-as-a-service .cas-n{position:absolute;top:24px;right:26px;padding:0;font-size:12px;color:#8aa0bf}
#context-as-a-service .cas-card p{font-size:17px;line-height:1.55;color:var(--ink)}
@media (max-width:860px){
  #context-as-a-service .cas-split{gap:28px}
  #context-as-a-service .cas-cards{gap:16px}
}

/* Context-as-a-Service: balance the top area - heading + lead on the left, the three shorter paragraphs on the right */
@media (min-width:861px){
  #context-as-a-service > .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:20px}
  #context-as-a-service .cas-split .letter{display:contents}
  #context-as-a-service .letter > p:first-child{grid-column:1;grid-row:2;margin:0}
  #context-as-a-service .letter > .cas-rest{grid-column:2;grid-row:1 / span 2;align-self:start}
  #context-as-a-service .cas-rest p{font-size:18px;line-height:1.55;color:var(--ink-2);margin:0 0 18px}
  #context-as-a-service .cas-rest p:last-child{margin-bottom:0;font-weight:600;color:var(--ink)}
  #context-as-a-service .cas-cards{grid-row:3}
}
@media (min-width:861px){
  #context-as-a-service .cas-rest p:first-child{font-size:18px;line-height:1.55;color:var(--ink-2)}
  #context-as-a-service .cas-cards{margin-top:32px}
}
@media (max-width:860px){
  #context-as-a-service .cas-rest p:first-child{font-size:inherit;color:var(--ink-2)}
}

/* ---------- Hybrid-Reasoning: real diagram (words from the section only) + lead sentence + calmer detail paragraphs ---------- */
.hrfig{margin-top:28px;padding:28px;border:1px solid #395579;border-radius:20px;background:linear-gradient(180deg,#153666,#0f2850);display:flex;flex-direction:column;gap:6px}
.hf-node{padding:14px 16px;border-radius:12px;background:#f4f8ff;color:#102747;font-size:17px;font-weight:600;line-height:1.3;text-align:center;box-shadow:0 5px 0 #7da3d6}
.hf-top{background:#1759b0;color:#fff;box-shadow:0 5px 0 #0f3e93;font-size:19px}
.hf-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hf-arrow{position:relative;display:flex;align-items:center;justify-content:center;height:54px}
.hf-arrow::before{content:"";position:absolute;left:50%;top:6px;bottom:14px;width:2px;margin-left:-1px;background:#8fbbfa}
.hf-arrow::after{content:"";position:absolute;left:50%;bottom:8px;width:9px;height:9px;margin-left:-5px;border-right:2px solid #8fbbfa;border-bottom:2px solid #8fbbfa;transform:rotate(45deg)}
.hf-arrow span{position:relative;z-index:1;padding:2px 12px;border-radius:999px;background:#153666;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#a9ceff}
.hf-up::after{bottom:auto;top:8px;transform:rotate(225deg)}
#hybrid-reasoning .hrp-split{align-items:start}
#hybrid-reasoning .letter p:first-child{font-size:clamp(21px,2vw,27px);line-height:1.4;font-weight:500;color:#fff}
#hybrid-reasoning .letter p:not(:first-child){font-size:17px;line-height:1.6;color:#c6d5eb;padding-top:20px;border-top:1px solid #2f4a70}
@media (min-width:1100px){.hf-row{grid-template-columns:repeat(4,minmax(0,1fr))}.hf-node{font-size:15px;padding:14px 10px}}
@media (max-width:640px){.hrfig{padding:18px}.hf-row{grid-template-columns:1fr}}
.hf-arrow{height:84px}
.hf-arrow::before{top:2px;bottom:10px}
.hf-arrow::after{bottom:4px}
.hf-up::after{bottom:auto;top:6px}
.hrfig{padding:34px 28px}
.hf-node{padding-block:18px}
.hf-top{padding-block:20px}
.hf-up::before{top:6px;bottom:auto;height:44px}
.hf-up{height:64px}

/* ---------- Dynamically Orchestrating: reference "What the Gateway lets you do" - three-column grid, rule above each item, accent label, readable body ---------- */
#dynamically-orchestrating .head h2{max-width:16ch;font-size:clamp(30px,3.6vw,46px);line-height:1.1}
#dynamically-orchestrating .doi-seq{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 48px;max-width:none;margin-top:44px;
}
#dynamically-orchestrating .doi-seq .sq{
  display:flex;flex-direction:column;gap:12px;padding:24px 0 0;border:0;border-top:1px solid #b9cbe6;
}
#dynamically-orchestrating .doi-seq .sq:first-child,#dynamically-orchestrating .doi-seq .sq:last-child{padding:24px 0 0}
#dynamically-orchestrating .doi-seq .sqn{margin:0;font-size:15px;font-weight:600;letter-spacing:.12em;color:#1759b0}
#dynamically-orchestrating .doi-seq .sqt{max-width:none;margin:0;font-size:17px;font-weight:400;line-height:1.6;letter-spacing:0;color:var(--ink-2)}
#dynamically-orchestrating .doi-seq .sq:last-child{grid-column:1 / -1;flex-direction:row;align-items:baseline;gap:28px}
#dynamically-orchestrating .doi-seq .sq:last-child .sqt{max-width:60ch}
@media (max-width:900px){
  #dynamically-orchestrating .doi-seq{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px}
  #dynamically-orchestrating .doi-seq .sq:last-child{grid-column:auto;flex-direction:column;gap:12px}
}
@media (max-width:560px){
  #dynamically-orchestrating .doi-seq{grid-template-columns:minmax(0,1fr)}
}
#dynamically-orchestrating .head h2{max-width:24ch}
#dynamically-orchestrating .head{margin-bottom:0}
#dynamically-orchestrating .doi-seq{margin-top:32px}
/* Dynamically Orchestrating: tighter gap under the heading; item 07 keeps the same column width as the others */
#dynamically-orchestrating .head,#dynamically-orchestrating .head.lft{margin:0;padding:0}
#dynamically-orchestrating .head h2{margin:0}
#dynamically-orchestrating .doi-seq{margin-top:24px}
#dynamically-orchestrating .doi-seq .sq:last-child{grid-column:auto;flex-direction:column;align-items:stretch;gap:12px}
#dynamically-orchestrating .doi-seq .sq:last-child .sqt{max-width:none}
#dynamically-orchestrating > .wrap{row-gap:0}
#dynamically-orchestrating .doi-seq{margin-top:32px}

/* ---------- Tokenomics: framed dark panel, big claim, three large figures with dividers, button (after the reference's "Agents are in production" panel; blue instead of orange) ---------- */
#tokenomics{padding-block:56px}
#tokenomics::before{display:none}
#tokenomics > .wrap{
  width:min(1136px,calc(100% - 64px));margin-inline:auto;padding:56px;
  border:1px solid #3d5f8f;border-radius:28px;color:#f4f8ff;
  background:radial-gradient(ellipse at 90% 0%,#1d4478,transparent 60%),linear-gradient(180deg,#112b52,#0b1b34);
  box-shadow:0 30px 60px -36px rgba(8,20,43,.7);
}
#tokenomics .tok-split{gap:20px 56px}
#tokenomics .head h2{font-size:clamp(32px,4vw,52px);line-height:1.08;color:#fff}
#tokenomics .head h2::before{background:#8fbbfa}
#tokenomics .letter p{font-size:17px;line-height:1.6;color:#c6d5eb}
#tokenomics .letter p:first-child{font-size:19px;color:#fff}
#tokenomics .bignums{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:44px;padding-top:36px;border-top:1px solid #2f4a70;
}
#tokenomics .bn2{padding:6px 32px;border:0;border-left:1px solid #2f4a70;border-radius:0;background:none;display:flex;flex-direction:column;gap:12px}
#tokenomics .bn2:first-child{padding-left:0;border-left:0}
#tokenomics .bnv{font-size:clamp(44px,6vw,76px);line-height:1;font-weight:700;letter-spacing:-.03em;color:#8fbbfa}
#tokenomics .bnl{font-size:15px;line-height:1.5;letter-spacing:0;text-transform:none;font-family:inherit;color:#c6d5eb}
#tokenomics .lead.below{margin:40px 0 0;text-align:center}
#tokenomics .lead.below a{
  display:inline-flex;padding:12px 28px;border:1px solid #8fbbfa;border-radius:999px;color:#fff;text-decoration:none;font-weight:600;
  transition:background .15s ease;
}
#tokenomics .lead.below a:hover{background:rgba(143,187,250,.18)}
@media (max-width:860px){
  #tokenomics > .wrap{width:calc(100% - 32px);padding:32px 24px;border-radius:22px}
  #tokenomics .bignums{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:32px;padding-top:24px}
  #tokenomics .bn2,#tokenomics .bn2:first-child{padding:20px 0 0;border-left:0;border-top:1px solid #2f4a70}
  #tokenomics .bn2:first-child{border-top:0;padding-top:0}
}
#tokenomics > .wrap{row-gap:0}
#tokenomics .tok-split{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}
#tokenomics .head h2{font-size:clamp(30px,3.6vw,46px)}
#tokenomics .bignums{margin-top:36px;padding-top:30px}
#tokenomics .lead.below{justify-self:center;margin-top:34px;width:100%}
@media (max-width:860px){
  #tokenomics .tok-split{grid-template-columns:minmax(0,1fr);gap:16px}
  #tokenomics .head h2{font-size:clamp(28px,8vw,36px)}
}

/* Tokenomics: balance the top area - heading + claim paragraph left, answer paragraph right */
@media (min-width:861px){
  #tokenomics .tok-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;column-gap:64px;row-gap:22px;align-items:start}
  #tokenomics .tok-split .head{grid-column:1;grid-row:1}
  #tokenomics .tok-split .letter{display:contents}
  #tokenomics .letter p:first-child{grid-column:1;grid-row:2;margin:0;font-size:20px;line-height:1.5}
  #tokenomics .letter p:last-child{grid-column:2;grid-row:1 / span 2;align-self:center;margin:0;font-size:20px;line-height:1.6;color:#dbe6f6}
}

/* Tokenomics: heading across the top, the two paragraphs side by side beneath it */
@media (min-width:861px){
  #tokenomics .tok-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto;column-gap:56px;row-gap:24px;align-items:start}
  #tokenomics .tok-split .head{grid-column:1 / -1;grid-row:1}
  #tokenomics .tok-split .head h2{max-width:none}
  #tokenomics .letter p:first-child{grid-column:1;grid-row:2;margin:0;font-size:19px;line-height:1.6;color:#fff}
  #tokenomics .letter p:last-child{grid-column:2;grid-row:2;align-self:start;margin:0;font-size:19px;line-height:1.6;color:#c6d5eb}
}
/* Tokenomics: centered heading */
#tokenomics .tok-split .head,#tokenomics .tok-split .head h2{text-align:center}
#tokenomics .head h2::before{margin-inline:auto}
/* Tokenomics: larger claim paragraph */
#tokenomics .letter p:first-child{font-size:clamp(21px,2.1vw,26px);line-height:1.45;font-weight:500}
/* Tokenomics: first paragraph a little smaller, second a little larger, so both columns end together */
@media (min-width:861px){
  #tokenomics .letter p:first-child{font-size:22px;line-height:1.5;font-weight:500}
  #tokenomics .letter p:last-child{font-size:21px;line-height:1.6}
}
@media (min-width:861px){
  #tokenomics .letter p:first-child{font-size:24px;line-height:1.45}
  #tokenomics .letter p:last-child{font-size:19px;line-height:1.6}
}

/* ---------- Tokenomics: paragraph sizes + new background (light-blue glow, glass stat cells, hairline orange accent #FF7100) ---------- */
@media (min-width:861px){
  #tokenomics .letter p:first-child{font-size:21px;line-height:1.5;font-weight:500}
  #tokenomics .letter p:last-child{font-size:17px;line-height:1.6;color:#c6d5eb}
}
/* section ground: soft light-blue field with two faint blooms, so the dark panel floats */
#tokenomics{
  background:
    radial-gradient(40% 55% at 12% 20%,rgba(44,123,242,.16),transparent 70%),
    radial-gradient(38% 50% at 90% 85%,rgba(143,187,250,.22),transparent 70%),
    #f3f8ff;
}
/* panel: deep navy with an aurora of light blue, glass sheen along the top edge, hairline orange rim */
#tokenomics > .wrap{
  position:relative;isolation:isolate;overflow:hidden;
  border:1px solid rgba(143,187,250,.35);
  background:
    radial-gradient(60% 70% at 85% -10%,rgba(63,140,255,.55),transparent 62%),
    radial-gradient(50% 60% at 5% 105%,rgba(44,123,242,.35),transparent 65%),
    linear-gradient(180deg,#10294f,#0a1a33);
  box-shadow:0 40px 80px -40px rgba(10,44,107,.75),inset 0 1px 0 rgba(255,255,255,.28);
}
#tokenomics > .wrap::before{                 /* hairline orange accent along the bottom edge, fading out at both ends */
  content:"";position:absolute;left:8%;right:8%;bottom:0;height:1px;z-index:-1;
  background:linear-gradient(90deg,transparent,#FF7100 35%,#FF9139 65%,transparent);opacity:.8;
}
#tokenomics > .wrap::after{                  /* faint glass sheen across the upper half */
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,0) 38%);
}
/* stat cells become glass tiles */
#tokenomics .bignums{border-top:0;padding-top:0;gap:16px}
#tokenomics .bn2,#tokenomics .bn2:first-child{
  padding:26px 28px;border:1px solid rgba(143,187,250,.28);border-radius:18px;
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 18px 30px -22px rgba(0,0,0,.6);
}
#tokenomics .bnv{color:#cfe3ff}
#tokenomics .bn2:nth-child(2) .bnv{color:#ffffff}
#tokenomics .bnl{color:#a9c4e8}
#tokenomics .bn2::after{                     /* small orange tick under each caption */
  content:"";width:28px;height:2px;margin-top:4px;border-radius:2px;background:#FF7100;opacity:.9;
}
#tokenomics .lead.below a{border-color:rgba(143,187,250,.7);background:rgba(255,255,255,.06)}
@media (max-width:860px){
  #tokenomics .bignums{gap:14px}
  #tokenomics .bn2,#tokenomics .bn2:first-child{padding:20px 22px;border:1px solid rgba(143,187,250,.28)}
}

/* ---------- Tokenomics: correction - background belongs to the SECTION (full width); no tiles, no orange lines ---------- */
#tokenomics{
  padding-block:72px;
  background:
    radial-gradient(55% 70% at 88% 0%,rgba(63,140,255,.50),transparent 62%),
    radial-gradient(45% 60% at 6% 100%,rgba(44,123,242,.38),transparent 65%),
    radial-gradient(30% 40% at 50% 55%,rgba(143,187,250,.12),transparent 70%),
    linear-gradient(180deg,#10294f,#0a1a33);
  position:relative;overflow:hidden;
}
#tokenomics::after{                      /* glass sheen across the top of the section */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(165deg,rgba(255,255,255,.10),rgba(255,255,255,0) 34%);
}
#tokenomics > .wrap{
  background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;isolation:auto;
  width:min(1136px,calc(100% - 64px));padding:0;
}
#tokenomics > .wrap::before,#tokenomics > .wrap::after{display:none}
/* back to the earlier stat layout: three figures in a row with thin dividers */
#tokenomics .bignums{gap:0;margin-top:44px;padding-top:36px;border-top:1px solid rgba(143,187,250,.28)}
#tokenomics .bn2,#tokenomics .bn2:first-child{
  padding:6px 32px;border:0;border-left:1px solid rgba(143,187,250,.28);border-radius:0;background:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
}
#tokenomics .bn2:first-child{padding-left:0;border-left:0}
#tokenomics .bn2::after{display:none}
#tokenomics .bnv,#tokenomics .bn2:nth-child(2) .bnv{color:#8fbbfa}
#tokenomics .bnl{color:#c6d5eb}
@media (max-width:860px){
  #tokenomics{padding-block:48px}
  #tokenomics > .wrap{width:calc(100% - 40px)}
  #tokenomics .bignums{grid-template-columns:minmax(0,1fr);gap:20px;margin-top:32px;padding-top:24px}
  #tokenomics .bn2,#tokenomics .bn2:first-child{padding:20px 0 0;border:0;border-top:1px solid rgba(143,187,250,.28)}
  #tokenomics .bn2:first-child{border-top:0;padding-top:0}
}

/* Architecture figure: section-scoped plates and row-driven highlights. */
#architecture .archfig{width:100%;min-width:0;margin:0}
#architecture .af-gov{
  padding:28px;border:1px solid #3d5f8f;border-radius:24px;
  background:linear-gradient(180deg,#153666,#0f2850);
  transition:border-color 150ms ease;
}
#architecture .af-gov-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-bottom:26px}
#architecture .af-title{font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#a9ceff}
#architecture .af-chips{display:flex;flex-wrap:wrap;gap:8px;min-width:0;margin:0;padding:0;list-style:none}
#architecture .af-chips li{
  padding:6px 13px;border:1px solid #3d5f8f;border-radius:999px;
  background:rgba(255,255,255,.05);font-size:13px;line-height:1.4;color:#c6d5eb;
  transition:background-color 150ms ease,border-color 150ms ease;
}
#architecture .af-stack{display:flex;flex-direction:column;min-width:0;padding-bottom:6px}
#architecture .af-plate{
  --af-edge:#7da3d6;
  padding:20px 24px;border-radius:16px;background:#f4f8ff;color:#102747;
  box-shadow:0 6px 0 var(--af-edge),0 18px 30px -14px rgba(3,12,30,.7);
  outline:3px solid transparent;outline-offset:0;
  transition:transform 150ms ease,outline-color 150ms ease;
}
#architecture .af-plate b{display:block;font-size:22px;font-weight:600;line-height:1.25}
#architecture .af-plate span{display:block;margin-top:4px;font-size:15px;line-height:1.5;color:#3c4c68}
#architecture .af-primary{--af-edge:#0f3e93;background:#1759b0;color:#fff}
#architecture .af-primary span{color:#fff}
#architecture .af-link{position:relative;height:38px}
#architecture .af-link::before{content:"";position:absolute;left:50%;top:8px;bottom:14px;width:2px;margin-left:-1px;background:#8fbbfa}
#architecture .af-link::after{content:"";position:absolute;left:50%;bottom:8px;width:9px;height:9px;margin-left:-5px;border-right:2px solid #8fbbfa;border-bottom:2px solid #8fbbfa;transform:rotate(45deg)}
#architecture .af-bays{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
#architecture .af-bay{min-width:0;padding:10px 14px;border:1px solid #c9d9ee;border-radius:10px;background:#fff;font-size:14px;line-height:1.4;color:#102747}
#architecture .af-bay em{display:block;margin-bottom:2px;font-size:11px;font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#52627c}
#architecture:has(.sub[data-layer="knowledge"]:hover,.sub[data-layer="knowledge"]:focus-within) .af-plate[data-layer="knowledge"],
#architecture:has(.sub[data-layer="control"]:hover,.sub[data-layer="control"]:focus-within) .af-plate[data-layer="control"],
#architecture:has(.sub[data-layer="gateway"]:hover,.sub[data-layer="gateway"]:focus-within) .af-plate[data-layer="gateway"]{
  transform:translateY(-3px);outline-color:#8fbbfa;
}
#architecture:has(.sub[data-layer="governance"]:hover,.sub[data-layer="governance"]:focus-within) .af-gov[data-layer="governance"]{border-color:#8fbbfa}
#architecture:has(.sub[data-layer="governance"]:hover,.sub[data-layer="governance"]:focus-within) .af-chips li{border-color:#8fbbfa;background:rgba(143,187,250,.16)}
@media (max-width:640px){
  #architecture .af-gov{padding:16px;border-radius:18px}
  #architecture .af-chips{flex-basis:100%}
  #architecture .af-chips li{font-size:12px;padding:5px 10px}
  #architecture .af-plate{padding:16px 18px}
  #architecture .af-plate b{font-size:19px}
  #architecture .af-bays{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  #architecture .af-gov,#architecture .af-chips li,#architecture .af-plate{transition:none}
}

/* ---------- Architecture: the four parts as four equal cards (after Dome "Attach the first tool. Then the next.") ---------- */
#architecture .arch-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px}
#architecture .arch-cards .sub{
  position:relative;display:flex;flex-direction:column;gap:14px;padding:26px 24px 24px;
  border:1px solid #3d5f8f;border-radius:16px;background:linear-gradient(170deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  transition:border-color .15s ease,background .15s ease;
}
#architecture .arch-cards .sub + .sub{border-top:1px solid #3d5f8f}
#architecture .arch-cards .sub:hover,#architecture .arch-cards .sub:focus-within{border-color:#8fbbfa;background:linear-gradient(170deg,rgba(143,187,250,.14),rgba(255,255,255,.03))}
#architecture .arch-cards .arch-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:rgba(143,187,250,.16);color:#a9ceff}
#architecture .arch-cards .arch-ic svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#architecture .arch-cards .subnum{position:absolute;top:24px;right:24px;left:auto;font-size:13px;line-height:1;letter-spacing:.1em;color:#7f9bc4;-webkit-text-stroke:0;opacity:1}
#architecture .arch-cards .subin{display:flex;flex-direction:column;gap:10px;padding:0;grid-template-columns:none}
#architecture .arch-cards .subin h3{margin:0;font-size:21px;line-height:1.25}
#architecture .arch-cards .subin p{margin:0;font-size:15.5px;line-height:1.6;color:#c6d5eb}
#architecture .arch-cards .subin > div:last-child{display:flex;flex-direction:column;gap:14px;flex:1}
#architecture .arch-cards .subin a{margin-top:auto;font-size:15px;font-weight:600;color:#a9ceff}
@media (max-width:1100px){#architecture .arch-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){#architecture .arch-cards{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){#architecture .arch-cards .sub{transition:none}}
#architecture .arch-cards .subin{flex:1}
/* Architecture cards: column widths follow text length so the long Gateway text no longer stretches its card */
@media (min-width:1101px){
  #architecture .arch-cards{grid-template-columns:minmax(0,.85fr) minmax(0,.95fr) minmax(0,1.6fr) minmax(0,1.2fr);align-items:stretch}
}
@media (min-width:1101px){
  #architecture .arch-cards{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1.45fr) minmax(0,1.15fr)}
  #architecture .arch-cards .subin h3{font-size:20px;white-space:nowrap}
}

/* ---------- Architecture: platform map (interfaces -> Knowledge/Control/Gateway modules + Governance bar -> protocols) ---------- */
.archmap{
  display:grid;grid-template-columns:minmax(120px,170px) 32px minmax(0,1fr) 32px minmax(130px,190px);align-items:center;
  padding:28px;border:1px solid #3d5f8f;border-radius:24px;background:linear-gradient(180deg,#153666,#0f2850);
}
.am-label{display:block;margin-bottom:12px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#a9ceff}
.am-col{display:flex;flex-direction:column;gap:10px}
.am-box{padding:13px 14px;border-radius:12px;background:#f4f8ff;color:#102747;font-size:15px;font-weight:600;line-height:1.3;text-align:center;box-shadow:0 4px 0 #7da3d6}
.am-dash{background:transparent;color:#dbe9ff;border:1.5px dashed #6f95c9;box-shadow:none;font-weight:500}
.am-arrow{position:relative;height:2px;background:#8fbbfa;margin-inline:4px}
.am-arrow::after{content:"";position:absolute;right:-1px;top:-4px;width:8px;height:8px;border-right:2px solid #8fbbfa;border-top:2px solid #8fbbfa;transform:rotate(45deg)}
.am-core{padding:14px;border:1px solid #3d5f8f;border-radius:18px;background:rgba(255,255,255,.04)}
.am-mods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.am-mod{display:flex;flex-direction:column;gap:6px;min-height:118px;padding:16px;border-radius:14px;background:#f4f8ff;color:#102747;box-shadow:0 5px 0 #7da3d6,0 14px 24px -14px rgba(3,12,30,.7);transition:transform .15s ease,box-shadow .15s ease}
.am-mod b{font-size:18px;line-height:1.25}
.am-mod span{font-size:13.5px;line-height:1.45;color:#3c4c68}
.am-primary{background:#1759b0;color:#fff;box-shadow:0 5px 0 #0f3e93,0 14px 24px -14px rgba(3,12,30,.7)}
.am-primary span{color:#dbe9ff}
.am-gov{margin-top:14px;padding:12px;border:1px solid #3d5f8f;border-radius:14px;background:rgba(15,40,80,.7);transition:border-color .15s ease,box-shadow .15s ease}
.am-gov .am-label{margin-bottom:10px}
.am-cells{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.am-cell{padding:10px 12px;border-radius:9px;border:1px solid #3d5f8f;background:rgba(255,255,255,.06);font-size:13.5px;line-height:1.35;color:#dbe9ff;text-align:center;transition:background .15s ease,border-color .15s ease}
.am-mod:hover,.am-box:hover{transform:translateY(-2px)}
/* a card below lights its part of the map */
#architecture:has(.sub[data-layer="knowledge"]:hover,.sub[data-layer="knowledge"]:focus-within) .am-mod[data-layer="knowledge"],
#architecture:has(.sub[data-layer="control"]:hover,.sub[data-layer="control"]:focus-within) .am-mod[data-layer="control"],
#architecture:has(.sub[data-layer="gateway"]:hover,.sub[data-layer="gateway"]:focus-within) .am-mod[data-layer="gateway"]{
  transform:translateY(-3px);box-shadow:0 0 0 3px #8fbbfa,0 5px 0 #7da3d6,0 18px 28px -14px rgba(3,12,30,.8)}
#architecture:has(.sub[data-layer="gateway"]:hover,.sub[data-layer="gateway"]:focus-within) .am-box{box-shadow:0 0 0 2px #8fbbfa}
#architecture:has(.sub[data-layer="gateway"]:hover,.sub[data-layer="gateway"]:focus-within) .am-dash{box-shadow:0 0 0 2px #8fbbfa;border-style:solid}
#architecture:has(.sub[data-layer="governance"]:hover,.sub[data-layer="governance"]:focus-within) .am-gov{border-color:#8fbbfa;box-shadow:0 0 0 2px rgba(143,187,250,.55)}
#architecture:has(.sub[data-layer="governance"]:hover,.sub[data-layer="governance"]:focus-within) .am-cell{border-color:#8fbbfa;background:rgba(143,187,250,.16)}
@media (max-width:1000px){
  .archmap{grid-template-columns:minmax(0,1fr);gap:14px;padding:20px}
  .am-arrow{width:2px;height:20px;margin:0 auto;background:#8fbbfa}
  .am-arrow::after{right:auto;left:-4px;top:auto;bottom:-1px;transform:rotate(135deg)}
  .am-in,.am-out{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .am-out{grid-template-columns:repeat(4,minmax(0,1fr))}
  .am-label{grid-column:1 / -1;margin-bottom:2px}
}
@media (max-width:640px){
  .archmap{padding:16px}
  .am-mods{grid-template-columns:minmax(0,1fr)}
  .am-mod{min-height:0}
  .am-cells{grid-template-columns:repeat(2,minmax(0,1fr))}
  .am-out{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.am-mod,.am-gov,.am-cell{transition:none}.am-mod:hover,.am-box:hover{transform:none}}

/* map: icons + faint dot-grid backdrop */
.archmap{background:radial-gradient(circle,rgba(143,187,250,.16) 1px,transparent 1.5px) 0 0/22px 22px,linear-gradient(180deg,#153666,#0f2850)}
.am-ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:9px;background:rgba(23,89,176,.12);color:#1759b0}
.am-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.am-mod .am-ic{width:38px;height:38px;margin-bottom:4px;border-radius:10px}
.am-mod .am-ic svg{width:22px;height:22px}
.am-primary .am-ic{background:rgba(255,255,255,.16);color:#fff}
.am-box{display:flex;align-items:center;justify-content:flex-start;gap:10px;text-align:left}
.am-dash .am-ic{background:rgba(143,187,250,.14);color:#a9ceff}
.am-cell{display:flex;flex-direction:column;align-items:center;gap:6px}
.am-cell .am-ic{background:rgba(143,187,250,.16);color:#a9ceff;width:30px;height:30px}
.am-cell .am-ic svg{width:18px;height:18px}
.am-arrow{background:repeating-linear-gradient(90deg,#8fbbfa 0 6px,transparent 6px 10px)}
@media (max-width:1000px){.am-arrow{background:repeating-linear-gradient(180deg,#8fbbfa 0 5px,transparent 5px 9px)}}

/* map popups + pointer cursors; cards fully clickable via their own link */
.archmap{position:relative}
.am-mod,.am-box,.am-cell{cursor:pointer}
.am-mod:focus-visible,.am-box:focus-visible,.am-cell:focus-visible{outline:3px solid #8fbbfa;outline-offset:3px}
.am-pop{position:absolute;z-index:20;width:min(320px,calc(100% - 16px));padding:16px 18px;border-radius:14px;background:#fff;color:#102747;box-shadow:0 20px 40px -12px rgba(3,12,30,.7),0 0 0 1px rgba(143,187,250,.5)}
.am-pop[hidden]{display:none}
.am-pop strong{display:block;margin-bottom:6px;font-size:16px;line-height:1.3}
.am-pop p{margin:0 0 10px;font-size:14px;line-height:1.55;color:#3c4c68}
.am-pop a{font-size:14px;font-weight:600;color:#1759b0;text-decoration:underline}
#architecture .arch-cards .sub{cursor:pointer}
#architecture .arch-cards .subin a::after{content:"";position:absolute;inset:0;border-radius:16px}
#architecture .arch-cards .arch-ic{cursor:pointer}
@media (prefers-reduced-motion:reduce){.am-pop{transition:none}}

/* ---------- map popup: liquid glass (frosted, specular rim, soft light-blue bloom) ---------- */
.am-pop{
  width:min(330px,calc(100% - 16px));padding:18px 20px 16px;border-radius:20px;color:#f4f8ff;
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.34),rgba(255,255,255,0) 55%),
    radial-gradient(90% 80% at 100% 100%,rgba(63,140,255,.28),rgba(63,140,255,0) 60%),
    linear-gradient(160deg,rgba(255,255,255,.20),rgba(255,255,255,.07));
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 0 rgba(255,255,255,.12),
    0 24px 48px -16px rgba(3,12,30,.75),
    0 0 0 1px rgba(143,187,250,.18);
  animation:am-pop-in .16s ease-out;
}
.am-pop::before{                 /* specular sheen across the top edge */
  content:"";position:absolute;left:14px;right:14px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);pointer-events:none;
}
.am-pop strong{color:#fff;text-shadow:0 1px 8px rgba(3,12,30,.35)}
.am-pop p{color:#e6efff}
.am-pop a{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);color:#fff;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.5);transition:background .15s ease}
.am-pop a:hover{background:rgba(255,255,255,.3)}
.am-pop a:focus-visible{outline:2px solid #fff;outline-offset:2px}
@keyframes am-pop-in{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.am-pop{animation:none}}
/* clicked block shows as active */
.am-mod[aria-expanded="true"],.am-box[aria-expanded="true"],.am-cell[aria-expanded="true"]{box-shadow:0 0 0 3px #8fbbfa,0 5px 0 #7da3d6}
.am-dash[aria-expanded="true"],.am-cell[aria-expanded="true"]{box-shadow:0 0 0 2px #8fbbfa}
/* popup legibility: tint the glass navy so light text stays readable over white modules */
.am-pop{
  background:
    radial-gradient(120% 90% at 0% 0%,rgba(143,187,250,.30),rgba(143,187,250,0) 55%),
    radial-gradient(90% 80% at 100% 100%,rgba(63,140,255,.30),rgba(63,140,255,0) 60%),
    linear-gradient(160deg,rgba(21,54,102,.82),rgba(10,26,51,.78));
  -webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%);
}

/* ---------- map popup: real liquid glass = refraction (SVG lens map) + blur/saturation + adaptive tint + specular rim + pointer light ---------- */
.am-pop{
  isolation:isolate;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 55%,rgba(120,170,255,.10));
  -webkit-backdrop-filter:blur(3px) saturate(185%) brightness(1.08);
  backdrop-filter:url(#am-lens) blur(3px) saturate(185%) brightness(1.08);
  border:1px solid rgba(255,255,255,.30);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(255,255,255,.35),
    inset 1.5px 0 0 rgba(255,255,255,.5),
    inset -1.5px 0 0 rgba(255,255,255,.5),
    inset 0 0 34px rgba(255,255,255,.14),
    0 28px 60px -22px rgba(3,12,30,.8);
}
.am-pop::before{display:none}
.am-pop::after{                  /* pointer-following specular light */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  opacity:var(--go,0);transition:opacity .35s ease;
  background:radial-gradient(180px 180px at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.40),rgba(255,255,255,0) 68%);
}
.am-pop > *{position:relative;z-index:1}
/* text keeps contrast without a heavy tint: a soft dark halo behind the words */
.am-pop strong,.am-pop p{text-shadow:0 1px 10px rgba(3,12,30,.75),0 0 2px rgba(3,12,30,.5)}
.am-pop p{color:#f4f8ff}
.am-pop a{text-shadow:none;background:rgba(255,255,255,.22)}
/* adaptive tint: darker glass so text holds contrast over the bright white modules behind it, still refracting */
.am-pop{
  background:
    linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,0) 45%),
    linear-gradient(180deg,rgba(11,28,58,.62),rgba(9,22,46,.70));
  -webkit-backdrop-filter:blur(5px) saturate(170%) brightness(.78);
  backdrop-filter:url(#am-lens) blur(5px) saturate(170%) brightness(.78);
}
.am-pop strong,.am-pop p{text-shadow:0 1px 6px rgba(3,12,30,.6)}

/* popup refinement: very subtle pointer light + hairline gradient rim (no thick flat outline) */
.am-pop{
  border:0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 0 28px rgba(255,255,255,.06),
    0 28px 60px -22px rgba(3,12,30,.8);
}
.am-pop::before{                       /* 1px rim that fades: lit top-left, faint along the sides, soft catch at bottom-right */
  content:"";display:block;position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,.10) 32%,rgba(255,255,255,.03) 58%,rgba(255,255,255,.32));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
}
.am-pop::after{
  background:radial-gradient(240px 240px at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.10),rgba(255,255,255,0) 70%);
}

/* ---------- Tokenomics: before / after diagram (warm tangle vs clean mint lines) ---------- */
#tokenomics .tokdiag{
  position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.95fr) minmax(0,.95fr) minmax(0,1.25fr);
  column-gap:clamp(40px,6vw,110px);align-items:center;margin-top:44px;padding:30px 30px 26px;
  border:1px solid rgba(143,187,250,.18);border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
}
#tokenomics .tokdiag::before{                    /* faint divider between the two worlds */
  content:"";position:absolute;left:50%;top:22px;bottom:22px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(255,255,255,.22),transparent);
}
.td-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.td-col{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px}
.td-title{margin-bottom:6px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#ffb58a}
.td-chips{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.td-chip{
  padding:11px 16px;border-radius:12px;font-size:15px;line-height:1.3;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.td-before .td-chip{color:#ffe3d1;border:1px solid rgba(255,122,60,.45);background:linear-gradient(160deg,rgba(255,122,60,.16),rgba(255,122,60,.05))}
.td-after .td-chip{color:#dcfff0;border:1px solid rgba(94,224,168,.45);background:linear-gradient(160deg,rgba(94,224,168,.18),rgba(94,224,168,.05))}
.td-chip:hover,.td-chip.on,.td-chip:focus-visible{transform:translateX(2px);outline:0}
.td-before .td-chip.on,.td-before .td-chip:focus-visible{border-color:#ff9a63;box-shadow:0 0 22px -4px rgba(255,122,60,.7)}
.td-after .td-chip.on,.td-after .td-chip:focus-visible{border-color:#7ff0bd;box-shadow:0 0 22px -4px rgba(94,224,168,.75)}
.td-node{padding:18px 18px;border-radius:16px;text-align:center;font-weight:600;line-height:1.35}
.td-bad{font-size:15px;color:#ffc9a8;border:1.5px dashed rgba(255,122,60,.6);background:rgba(255,122,60,.07)}
.td-hub{
  font-size:18px;color:#fff;border:1px solid rgba(255,255,255,.4);
  background:radial-gradient(120% 100% at 30% 0%,rgba(143,187,250,.45),rgba(23,89,176,.55));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 34px -4px rgba(94,224,168,.45),0 18px 40px -20px rgba(3,12,30,.8);
}
.td-lb{fill:none;stroke:#ff7a3c;stroke-width:1.1;stroke-dasharray:2 5;stroke-linecap:round;opacity:.5;transition:opacity .2s ease,stroke-width .2s ease}
.td-la{fill:none;stroke:#5ee0a8;stroke-width:2;stroke-linecap:round;opacity:.8;filter:drop-shadow(0 0 5px rgba(94,224,168,.7));stroke-dasharray:5 7;animation:td-flow 2.4s linear infinite;transition:opacity .2s ease,stroke-width .2s ease}
@keyframes td-flow{to{stroke-dashoffset:-24}}
.tokdiag.is-active path:not(.on){opacity:.10}
.td-lb.on{opacity:1;stroke:#ffa36c;stroke-width:1.8;stroke-dasharray:none}
.td-la.on{opacity:1;stroke-width:3;stroke-dasharray:none;animation:none}
@media (max-width:820px){
  #tokenomics .tokdiag{grid-template-columns:minmax(0,1fr);row-gap:16px;padding:22px 18px}
  #tokenomics .tokdiag::before{display:none}
  .td-chips{flex-direction:row;flex-wrap:wrap}
  .td-node{max-width:none}
}
@media (prefers-reduced-motion:reduce){.td-la{animation:none}.td-chip{transition:none}}
/* diagram spacing + a much clearer lit path */
#tokenomics .tokdiag{grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,.8fr) minmax(0,1.05fr);column-gap:clamp(36px,5.5vw,96px);padding:34px 34px 30px}
.td-hub{padding:20px 14px}
.tokdiag.is-active path:not(.on){opacity:.07}
.td-la.on{stroke:#8ff5c8;stroke-width:3.2;filter:drop-shadow(0 0 8px rgba(94,224,168,.95)) drop-shadow(0 0 2px #fff)}
.td-lb.on{stroke:#ffb487;stroke-width:2;filter:drop-shadow(0 0 6px rgba(255,122,60,.9))}
.td-la{stroke-width:2.2}
#tokenomics .tokdiag.is-active .td-lines path:not(.on){opacity:.07;filter:none}
#tokenomics .tokdiag .td-lines path.on{opacity:1}
#tokenomics .tokdiag.is-active .td-chip:not(.on){opacity:.55}
#tokenomics .tokdiag .td-lines path.td-la.on{stroke-width:3.4;opacity:1;stroke:#9ff7d2;animation:none}
#tokenomics .tokdiag .td-lines path.td-lb.on{stroke-width:2.2;opacity:1;stroke:#ffb487;stroke-dasharray:none}
@media (max-width:820px){
  #tokenomics .tokdiag{grid-template-columns:minmax(0,1fr);column-gap:0;row-gap:18px;padding:22px 18px}
  #tokenomics .tokdiag::before{display:none}
  #tokenomics .tokdiag .td-chips{flex-direction:row;flex-wrap:wrap;gap:8px}
  #tokenomics .tokdiag .td-chip{padding:9px 13px;font-size:14px}
  #tokenomics .tokdiag .td-title{margin-bottom:2px}
  #tokenomics .tokdiag .td-node{max-width:none;width:100%}
  /* a thin arrow between the three stages so the order still reads */
  #tokenomics .tokdiag .td-nb,#tokenomics .tokdiag .td-ha{position:relative}
  #tokenomics .tokdiag .td-nb::after,#tokenomics .tokdiag .td-ha::after{
    content:"";display:block;width:2px;height:20px;margin:14px auto 0;
    background:repeating-linear-gradient(180deg,currentColor 0 4px,transparent 4px 8px)}
  #tokenomics .tokdiag .td-nb{color:#ff7a3c}
  #tokenomics .tokdiag .td-ha{color:#5ee0a8}
}

/* ---------- Tokenomics flow: models/agents -> Semantic AI Harness (Control + Knowledge Plane), four explanation steps ---------- */
#tokenomics .tokflow{margin-top:44px;display:flex;flex-direction:column;gap:22px}
.tf-tag{display:inline-block;margin-bottom:10px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#ffb58a}
.tf-cool{color:#7ff0bd}
.tf-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.12);color:#fff}
.tf-ic svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* conventional band */
.tf-conv{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:16px 20px;border:1px dashed rgba(255,122,60,.5);border-radius:16px;background:rgba(255,122,60,.06)}
.tf-conv .tf-tag{margin:0}
.tf-convlist{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tf-convlist li{padding:7px 13px;border-radius:999px;font-size:14px;color:#ffe3d1;border:1px solid rgba(255,122,60,.45);background:rgba(255,122,60,.12)}
.tf-over{margin-left:auto;padding:7px 14px;border-radius:999px;font-size:14px;font-weight:600;color:#ffc9a8;background:rgba(255,122,60,.16);border:1px solid rgba(255,122,60,.5)}
.tf-over::before{content:"→ ";opacity:.8}
/* main flow */
.tf-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,.8fr) minmax(0,1.3fr);align-items:center;gap:0}
.tf-stage{position:relative;padding:22px;border-radius:22px;border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 30px rgba(255,255,255,.04),0 22px 40px -24px rgba(3,12,30,.85);
  transition:box-shadow .15s ease,border-color .15s ease}
.tf-a{border-color:rgba(255,122,60,.35)}
.tf-b{border-color:rgba(94,224,168,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 44px -10px rgba(94,224,168,.35),0 22px 40px -24px rgba(3,12,30,.85)}
.tf-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tf-mini{display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#f4f8ff;transition:box-shadow .15s ease,background .15s ease,border-color .15s ease}
.tf-mini b{font-size:15px;line-height:1.25}
.tf-hub{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding:16px;border-radius:16px;color:#fff;
  background:radial-gradient(120% 100% at 25% 0%,rgba(143,187,250,.5),rgba(23,89,176,.7));border:1px solid rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 30px -6px rgba(94,224,168,.5)}
.tf-hub b{font-size:19px}
.tf-b .tf-ic{background:rgba(94,224,168,.18);color:#9ff7d2}
.tf-a .tf-ic{background:rgba(255,122,60,.18);color:#ffb487}
.tf-hub .tf-ic{background:rgba(255,255,255,.2);color:#fff}
/* link with token pill */
.tf-link{display:flex;align-items:center;gap:0;padding:0 6px}
.tf-line{flex:1;height:2px;min-width:14px;background:repeating-linear-gradient(90deg,#5ee0a8 0 7px,transparent 7px 12px);filter:drop-shadow(0 0 5px rgba(94,224,168,.7));animation:tf-flow 1.6s linear infinite}
@keyframes tf-flow{to{background-position:-19px 0}}
.tf-pill{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;font-size:13px;font-weight:600;line-height:1.25;text-align:left;max-width:170px;color:#dcfff0;
  background:linear-gradient(160deg,rgba(94,224,168,.28),rgba(94,224,168,.1));border:1px solid rgba(94,224,168,.6);box-shadow:0 0 22px -4px rgba(94,224,168,.6)}
.tf-pill .tf-ic{width:28px;height:28px;background:rgba(94,224,168,.25);color:#9ff7d2}
.tf-pill .tf-ic svg{width:17px;height:17px}
/* steps */
.tf-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:0;padding:0;list-style:none}
.tf-step{position:relative;display:flex;flex-direction:column;gap:12px;padding:20px 18px 18px;border-radius:18px;cursor:pointer;
  background:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35);transition:border-color .15s ease,background .15s ease,transform .15s ease}
.tf-step .tf-n{position:absolute;top:18px;right:18px;font-size:12px;letter-spacing:.1em;color:#8fa9d0}
.tf-step p{margin:0;font-size:14.5px;line-height:1.55;color:#d3e0f3}
.tf-step:hover,.tf-step:focus-visible{outline:0;border-color:#8fbbfa;background:linear-gradient(160deg,rgba(143,187,250,.2),rgba(255,255,255,.05));transform:translateY(-2px)}
/* a step lights the matching part of the flow */
#tokenomics .tokflow:has(.tf-step[data-step="1"]:hover,.tf-step[data-step="1"]:focus-visible) .tf-stage{box-shadow:0 0 0 2px #8fbbfa,0 0 36px -6px rgba(143,187,250,.7)}
#tokenomics .tokflow:has(.tf-step[data-step="2"]:hover,.tf-step[data-step="2"]:focus-visible) .tf-ctl,
#tokenomics .tokflow:has(.tf-step[data-step="4"]:hover,.tf-step[data-step="4"]:focus-visible) .tf-kp{box-shadow:0 0 0 2px #7ff0bd,0 0 24px -2px rgba(94,224,168,.8);background:rgba(94,224,168,.16);border-color:#7ff0bd}
#tokenomics .tokflow:has(.tf-step[data-step="3"]:hover,.tf-step[data-step="3"]:focus-visible) .tf-pill{box-shadow:0 0 0 2px #9ff7d2,0 0 34px 0 rgba(94,224,168,.9)}
#tokenomics .tokflow:has(.tf-step[data-step="3"]:hover,.tf-step[data-step="3"]:focus-visible) .tf-over{box-shadow:0 0 0 2px #ffb487,0 0 24px -2px rgba(255,122,60,.8)}
@media (max-width:1000px){.tf-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
  .tf-main{grid-template-columns:minmax(0,1fr);gap:0}
  .tf-link{flex-direction:column;padding:6px 0}
  .tf-line{width:2px;height:22px;min-width:0;flex:none;background:repeating-linear-gradient(180deg,#5ee0a8 0 6px,transparent 6px 11px);animation:none}
  .tf-pill{max-width:none}
  .tf-over{margin-left:0}
}
@media (max-width:560px){.tf-steps{grid-template-columns:minmax(0,1fr)}.tf-pair{grid-template-columns:minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.tf-line{animation:none}.tf-step{transition:none}}

/* ---------- Tokenomics diagram: set apart from the page copy (no outline) ----------
   own typeface (site mono), a soft dotted "stage" that fades out at the edges, quieter type scale, one small hint line */
#tokenomics .tokflow{position:relative;isolation:isolate;padding:34px clamp(14px,2.4vw,34px) 30px;margin-top:40px;font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
#tokenomics .tokflow::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:34px;
  background:
    radial-gradient(circle,rgba(143,187,250,.20) 1px,transparent 1.6px) 0 0/20px 20px,
    radial-gradient(70% 60% at 50% 0%,rgba(63,140,255,.20),transparent 70%),
    radial-gradient(60% 50% at 50% 100%,rgba(94,224,168,.10),transparent 70%),
    linear-gradient(180deg,rgba(6,16,36,.55),rgba(6,16,36,.30));
  -webkit-mask:radial-gradient(120% 100% at 50% 50%,#000 55%,transparent 98%);
          mask:radial-gradient(120% 100% at 50% 50%,#000 55%,transparent 98%);
}
.tf-hint{margin:0 0 -4px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8fa9d0;opacity:.85;text-align:right}
.tf-hint::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:#5ee0a8;box-shadow:0 0 8px #5ee0a8;vertical-align:1px;animation:tf-blink 2.4s ease-in-out infinite}
@keyframes tf-blink{50%{opacity:.35}}
.tokflow .tf-tag{font-family:inherit;font-size:11px;letter-spacing:.18em}
.tokflow .tf-mini b,.tokflow .tf-hub b{font-family:inherit;font-weight:500;letter-spacing:-.01em}
.tokflow .tf-mini b{font-size:13.5px}
.tokflow .tf-hub b{font-size:16px;font-weight:600}
.tokflow .tf-convlist li,.tokflow .tf-over,.tokflow .tf-pill{font-family:inherit;font-size:12.5px;letter-spacing:0}
.tokflow .tf-pill{font-size:12px}
.tokflow .tf-step p{font-family:inherit;font-size:12.5px;line-height:1.7;color:#c9d8ee}
.tokflow .tf-step .tf-n{font-family:inherit}
@media (max-width:820px){.tf-hint{text-align:left}#tokenomics .tokflow{padding-inline:6px}}
@media (prefers-reduced-motion:reduce){.tf-hint::before{animation:none}}
.tokflow .tf-main{grid-template-columns:minmax(0,1fr) minmax(230px,.9fr) minmax(0,1.3fr)}
.tokflow .tf-pill{max-width:none;white-space:normal}
.tokflow .tf-convlist li{padding:6px 11px;font-size:12px}
.tokflow .tf-conv{gap:10px 14px}
.tokflow .tf-over{font-size:12px;padding:6px 12px}
@media (min-width:1200px){.tokflow .tf-over{margin-left:0}.tokflow .tf-conv{flex-wrap:nowrap}.tokflow .tf-convlist{flex-wrap:nowrap}}
@media (max-width:1000px){.tokflow .tf-main{grid-template-columns:minmax(160px,1fr) minmax(190px,.9fr) minmax(0,1.2fr)}}
@media (max-width:820px){
  .tokflow .tf-main{grid-template-columns:minmax(0,1fr)}
  .tokflow .tf-link{flex-direction:column}
  .tokflow .tf-line{width:2px;height:22px;min-width:0;flex:none}
  .tokflow .tf-pair{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1000px){
  .tokflow .tf-main{grid-template-columns:minmax(0,1fr)}
  .tokflow .tf-link{flex-direction:column;padding:6px 0}
  .tokflow .tf-line{width:2px;height:22px;min-width:0;flex:none;background:repeating-linear-gradient(180deg,#5ee0a8 0 6px,transparent 6px 11px);animation:none}
  .tokflow .tf-pill{justify-content:center}
}

/* diagram stage: fainter dots; edges dissolve on all four sides (no hard end) */
#tokenomics .tokflow::before{
  inset:-30px -60px;border-radius:0;
  background:
    radial-gradient(circle,rgba(143,187,250,.075) 1px,transparent 1.6px) 0 0/22px 22px,
    radial-gradient(70% 60% at 50% 0%,rgba(63,140,255,.12),transparent 72%),
    radial-gradient(60% 50% at 50% 100%,rgba(94,224,168,.06),transparent 72%),
    linear-gradient(180deg,rgba(6,16,36,.30),rgba(6,16,36,.16));
  -webkit-mask:
    linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%),
    linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask:
    linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%) intersect,
    linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-composite:intersect;
}
/* token pill stays on one line; the middle column grows to fit it */
.tokflow .tf-pill{white-space:nowrap;max-width:none}
@media (min-width:1001px){.tokflow .tf-main{grid-template-columns:minmax(0,1fr) auto minmax(0,1.3fr)}}
@media (max-width:420px){.tokflow .tf-pill{font-size:11.5px;padding-right:12px}}
@media (min-width:1001px) and (max-width:1250px){
  .tokflow .tf-a .tf-pair{grid-template-columns:minmax(0,1fr)}
  .tokflow .tf-pill{font-size:11.5px}
}

/* stage: ~30% stronger in the middle; side fade begins 20% in from each edge */
#tokenomics .tokflow::before{
  background:
    radial-gradient(circle,rgba(143,187,250,.098) 1px,transparent 1.6px) 0 0/22px 22px,
    radial-gradient(70% 60% at 50% 0%,rgba(63,140,255,.156),transparent 72%),
    radial-gradient(60% 50% at 50% 100%,rgba(94,224,168,.078),transparent 72%),
    linear-gradient(180deg,rgba(6,16,36,.39),rgba(6,16,36,.21));
  -webkit-mask:
    linear-gradient(90deg,transparent 0,#000 20%,#000 80%,transparent 100%),
    linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask:
    linear-gradient(90deg,transparent 0,#000 20%,#000 80%,transparent 100%) intersect,
    linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-composite:intersect;
}

/* ---------- Architecture map: lessons from the Tokenomics diagram (stage, figure type, hint, living lines, trace) ---------- */
#architecture .arch-diagram{position:relative}
.am-hint{margin:0 0 10px;text-align:right;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8fa9d0;opacity:.85}
.am-hint::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:#5ee0a8;box-shadow:0 0 8px #5ee0a8;vertical-align:1px;animation:tf-blink 2.4s ease-in-out infinite}
.archmap{
  position:relative;isolation:isolate;border:0;background:none;padding:28px clamp(10px,2vw,28px);
  font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
.archmap::before{                       /* soft dotted stage that dissolves at all edges */
  content:"";position:absolute;inset:-30px -60px;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle,rgba(143,187,250,.12) 1px,transparent 1.6px) 0 0/22px 22px,
    radial-gradient(70% 60% at 50% 0%,rgba(63,140,255,.16),transparent 72%),
    radial-gradient(60% 50% at 50% 100%,rgba(94,224,168,.08),transparent 72%),
    linear-gradient(180deg,rgba(6,16,36,.40),rgba(6,16,36,.22));
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 20%,#000 80%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent 0,#000 20%,#000 80%,transparent 100%) intersect,linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-composite:intersect;
}
.archmap .am-label{font-family:inherit;font-size:11px;letter-spacing:.18em}
.archmap .am-box,.archmap .am-cell,.archmap .am-mod span{font-family:inherit}
.archmap .am-box{font-size:13.5px;font-weight:500}
.archmap .am-mod b{font-family:inherit;font-size:16px;font-weight:600;letter-spacing:-.01em}
.archmap .am-mod span{font-size:12px;line-height:1.55}
.archmap .am-cell{font-size:12px}
.archmap .am-pop{font-family:"Archivo",Arial,sans-serif}
/* protocols read as mint "connections"; the Gateway module (the linking piece) carries a mint halo */
.archmap .am-dash{border-color:rgba(94,224,168,.55);color:#dcfff0;background:rgba(94,224,168,.07)}
.archmap .am-dash .am-ic{background:rgba(94,224,168,.18);color:#9ff7d2}
.archmap .am-mod[data-layer="gateway"]{box-shadow:0 5px 0 #7da3d6,0 0 34px -4px rgba(94,224,168,.55),0 14px 24px -14px rgba(3,12,30,.7)}
/* living connectors */
.archmap .am-arrow{height:2px;background:repeating-linear-gradient(90deg,#5ee0a8 0 7px,transparent 7px 12px);filter:drop-shadow(0 0 5px rgba(94,224,168,.7));animation:tf-flow 1.6s linear infinite;transition:opacity .2s ease}
.archmap .am-arrow::after{border-color:#5ee0a8}
@media (max-width:1000px){.archmap .am-arrow{height:22px;width:2px;background:repeating-linear-gradient(180deg,#5ee0a8 0 6px,transparent 6px 11px);animation:none}}
/* trace: hover an interface or a protocol and its connector lights while the other dims */
.archmap:has(.am-in .am-box:hover) .am-arrow:nth-child(2),
.archmap:has(.am-out .am-box:hover) .am-arrow:nth-child(4){filter:drop-shadow(0 0 8px #9ff7d2) drop-shadow(0 0 2px #fff);animation-duration:.7s}
.archmap:has(.am-in .am-box:hover) .am-arrow:nth-child(4),
.archmap:has(.am-out .am-box:hover) .am-arrow:nth-child(2){opacity:.18}
@media (max-width:820px){.am-hint{text-align:left}}
@media (prefers-reduced-motion:reduce){.am-hint::before,.archmap .am-arrow{animation:none}}

/* ---------- Hybrid-Reasoning diagram: stage, figure type, living fan-out lines, trace ---------- */
.hrfig2{position:relative;isolation:isolate;margin-top:28px;padding:24px clamp(6px,1.4vw,18px) 22px;display:flex;flex-direction:column;gap:0;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}
.hrfig2::before{
  content:"";position:absolute;inset:-26px -44px;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle,rgba(143,187,250,.12) 1px,transparent 1.6px) 0 0/22px 22px,
    radial-gradient(70% 60% at 50% 0%,rgba(63,140,255,.16),transparent 72%),
    radial-gradient(60% 50% at 50% 100%,rgba(94,224,168,.08),transparent 72%),
    linear-gradient(180deg,rgba(6,16,36,.40),rgba(6,16,36,.22));
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 20%,#000 80%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent 0,#000 20%,#000 80%,transparent 100%) intersect,linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-composite:intersect;
}
.hrfig2 .am-hint{margin:0 0 12px}
.hf-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.hf-ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.14);color:#fff}
.hf-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hf-top2,.hf-bot2{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:12px;padding:14px 18px;border-radius:16px;color:#fff;
  background:radial-gradient(120% 100% at 25% 0%,rgba(143,187,250,.5),rgba(23,89,176,.7));border:1px solid rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 30px -6px rgba(94,224,168,.5)}
.hf-top2 b,.hf-bot2 b{font-size:15px;font-weight:600}
.hf-bot2{background:linear-gradient(160deg,rgba(94,224,168,.28),rgba(94,224,168,.1));border-color:rgba(94,224,168,.6);box-shadow:0 0 26px -4px rgba(94,224,168,.55),inset 0 1px 0 rgba(255,255,255,.4)}
.hf-bot2 .hf-ic{background:rgba(94,224,168,.25);color:#9ff7d2}
.hf-cap{position:relative;z-index:1;align-self:center;margin:46px 0;padding:3px 12px;border-radius:999px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#a9ceff;background:rgba(15,40,80,.9)}
.hf-cap2{color:#9ff7d2}
.hf-row2{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0}
.hf-cap1{margin-bottom:0}.hf-cap2{margin-top:0}
.hf-cap1,.hf-cap2{margin-block:0}
.hf-src{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;border-radius:14px;text-align:center;cursor:pointer;color:#f4f8ff;
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);transition:box-shadow .15s ease,border-color .15s ease,background .15s ease,transform .15s ease,opacity .15s ease}
.hf-src b{font-size:12px;font-weight:500;line-height:1.35}
.hf-src .hf-ic{background:rgba(94,224,168,.18);color:#9ff7d2}
.hf-src:hover,.hf-src:focus-visible,.hf-src.on{outline:0;transform:translateY(-2px);border-color:#7ff0bd;background:linear-gradient(160deg,rgba(94,224,168,.28),rgba(94,224,168,.08));box-shadow:0 0 0 2px rgba(127,240,189,.55),0 0 26px -2px rgba(94,224,168,.8)}
.hf-down,.hf-up{fill:none;stroke:#5ee0a8;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:5 7;opacity:.8;filter:drop-shadow(0 0 5px rgba(94,224,168,.7));animation:td-flow 2.4s linear infinite;transition:opacity .2s ease}
.hrfig2.is-active .hf-src:not(.on){opacity:.5}
.hrfig2.is-active .hf-lines path:not(.on){opacity:.08;filter:none}
.hrfig2 .hf-lines path.on{opacity:1;stroke:#9ff7d2;stroke-width:3;stroke-dasharray:none;animation:none;filter:drop-shadow(0 0 8px rgba(94,224,168,.95)) drop-shadow(0 0 2px #fff)}
.hrfig2 .hf-cap1{margin:0 auto;transform:translateY(24px)}
.hrfig2 .hf-cap2{margin:0 auto;transform:translateY(-24px)}
.hrfig2 .hf-cap1,.hrfig2 .hf-cap2{height:0;overflow:visible;padding:0;background:none}
.hrfig2 .hf-cap1::before,.hrfig2 .hf-cap2::before{content:attr(aria-hidden);display:none}
@media (max-width:640px){
  .hf-row2{grid-template-columns:minmax(0,1fr)}
  .hf-src{flex-direction:row;justify-content:flex-start;text-align:left;gap:12px;padding:10px 12px}
  .hf-cap{margin:14px 0}
  .hrfig2 .hf-cap1,.hrfig2 .hf-cap2{height:auto;transform:none;padding:3px 12px;background:rgba(15,40,80,.9)}
}
@media (prefers-reduced-motion:reduce){.hf-down,.hf-up{animation:none}.hf-src{transition:none}}
/* fix: real vertical room for the fan-out; captions sit in the middle of each gap */
#hybrid-reasoning .hrfig2 .hf-cap{
  display:flex;align-items:center;justify-content:center;height:92px;margin:0;padding:0;background:none;transform:none;overflow:visible;align-self:stretch;
}
#hybrid-reasoning .hrfig2 .hf-cap::after{
  content:attr(data-t);
}
#hybrid-reasoning .hrfig2 .hf-cap1,#hybrid-reasoning .hrfig2 .hf-cap2{transform:none;height:92px;padding:0;margin:0}
#hybrid-reasoning .hrfig2 .hf-cap::after{content:none}
#hybrid-reasoning .hrfig2 .hf-cap i{font-style:normal;padding:3px 12px;border-radius:999px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#a9ceff;background:#0f2a52}
#hybrid-reasoning .hrfig2 .hf-cap2 i{color:#9ff7d2;background:#0e2d3f}
@media (max-width:640px){#hybrid-reasoning .hrfig2 .hf-cap,#hybrid-reasoning .hrfig2 .hf-cap1,#hybrid-reasoning .hrfig2 .hf-cap2{height:auto;padding:12px 0}}

/* ---------- Comparison table (after the Gravitee "features" table): conventional vs Semantic AI Harness ---------- */
#comparison{padding-block:72px;background:radial-gradient(ellipse at 8% 10%,#dfedff,transparent 60%),radial-gradient(ellipse at 92% 90%,#e7f0fd,transparent 65%),#f3f8ff}
#comparison .cmp-card{max-width:980px;margin-inline:auto;padding:14px;border-radius:30px;background:rgba(15,62,147,.06)}
#comparison .cmp-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;border-radius:20px;background:#fff;box-shadow:0 24px 50px -34px rgba(15,62,147,.55);overflow:hidden}
#comparison .cmp-table th{padding:26px 28px 20px;text-align:left;font-size:15px;font-weight:700;letter-spacing:.01em;border-bottom:1px solid #e3ecf7}
#comparison .cmp-ha{color:#8a4a2a}
#comparison .cmp-hb{color:#0f3e93;background:linear-gradient(180deg,#eef5ff,#fff)}
#comparison .cmp-table td{padding:22px 28px;vertical-align:top;border-bottom:1px solid #e9eff8;font-size:16.5px;line-height:1.5;color:#1d2f4d}
#comparison .cmp-table tr:last-child td{border-bottom:0}
#comparison .cmp-table td > span:last-child{display:block}
#comparison .cmp-table td{position:relative;padding-left:70px}
#comparison .cmp-a{color:#4b5a73}
#comparison .cmp-b{background:linear-gradient(90deg,rgba(23,89,176,.04),rgba(23,89,176,0));font-weight:500}
#comparison .cmp-table td > span:last-child::first-letter{text-transform:uppercase}
#comparison .cmp-mark{position:absolute;left:28px;top:22px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%}
#comparison .cmp-mark svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
#comparison .cmp-no{background:#e5483a}
#comparison .cmp-yes{background:#1fb86a}
#comparison .cmp-table th{padding-left:70px}
@media (max-width:700px){
  #comparison{padding-block:44px}
  #comparison .cmp-card{padding:8px;border-radius:22px}
  #comparison .cmp-table,#comparison .cmp-table tbody,#comparison .cmp-table tr,#comparison .cmp-table td{display:block;width:100%}
  #comparison .cmp-table thead{position:absolute;left:-9999px}
  #comparison .cmp-table tr{border-bottom:1px solid #e3ecf7}
  #comparison .cmp-table tr:last-child{border-bottom:0}
  #comparison .cmp-table td{padding:16px 18px 16px 60px;border:0}
  #comparison .cmp-mark{left:18px;top:16px}
  #comparison .cmp-a::before{content:"Conventional approach";display:block;margin-bottom:4px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8a4a2a}
  #comparison .cmp-b::before{content:"Semantic AI Harness";display:block;margin-bottom:4px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#0f3e93}
  #comparison .cmp-b{background:#f5f9ff}
}

/* ---------- comparison table, refined: raised card, tall highlighted answer column, centred marks, roomy rows, row hover ---------- */
#comparison{padding-block:88px}
#comparison .cmp-card{
  max-width:1040px;padding:18px;border-radius:36px;
  background:linear-gradient(180deg,rgba(15,62,147,.09),rgba(15,62,147,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 40px 70px -44px rgba(15,62,147,.6);
}
#comparison .cmp-table{
  table-layout:fixed;border-radius:24px;overflow:hidden;background:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 4px rgba(15,62,147,.06),0 30px 60px -36px rgba(15,62,147,.55);
}
#comparison .cmp-table th{
  padding:30px 32px 24px 76px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid #dfe9f6;background:#fff;
}
#comparison .cmp-ha{color:#9a5a38;width:48%}
#comparison .cmp-hb{
  position:relative;color:#0f3e93;background:linear-gradient(180deg,#e8f1ff,#f2f7ff);
  box-shadow:inset 1px 0 0 #cfe0f7,inset -1px 0 0 #cfe0f7,inset 0 3px 0 #2c7bf2;
}
#comparison .cmp-hdot{position:absolute;left:32px;top:50%;width:14px;height:14px;margin-top:-4px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#8fbbfa,#1759b0);box-shadow:0 0 0 4px rgba(44,123,242,.16)}
#comparison .cmp-table td{
  padding:30px 32px 30px 76px;font-size:17px;line-height:1.55;border-bottom:1px solid #e6eef9;vertical-align:middle;transition:background .15s ease;
}
#comparison .cmp-a{color:#56637a}
#comparison .cmp-b{
  color:#0d2247;font-weight:600;background:linear-gradient(180deg,#f2f7ff,#f6faff);
  box-shadow:inset 1px 0 0 #dbe8f8,inset -1px 0 0 #dbe8f8;
}
#comparison .cmp-table tr:last-child .cmp-b{box-shadow:inset 1px 0 0 #dbe8f8,inset -1px 0 0 #dbe8f8,inset 0 -3px 0 #2c7bf2}
#comparison .cmp-table tbody tr:hover td{background:#f7faff}
#comparison .cmp-table tbody tr:hover .cmp-b{background:#eaf2ff}
#comparison .cmp-mark{left:32px;top:50%;margin-top:-16px;width:32px;height:32px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 12px -6px currentColor}
#comparison .cmp-mark svg{width:17px;height:17px}
#comparison .cmp-no{background:linear-gradient(180deg,#f0695c,#d83b2d);color:#d83b2d}
#comparison .cmp-yes{background:linear-gradient(180deg,#2fd286,#16a65e);color:#16a65e}
@media (max-width:900px){#comparison .cmp-table th,#comparison .cmp-table td{padding-left:68px;padding-right:20px}#comparison .cmp-mark,#comparison .cmp-hdot{left:24px}}
@media (max-width:700px){
  #comparison .cmp-card{padding:8px;border-radius:24px}
  #comparison .cmp-table td{padding:18px 18px 18px 64px}
  #comparison .cmp-mark{left:18px;top:20px;margin-top:0;width:28px;height:28px}
  #comparison .cmp-b{box-shadow:none}
  #comparison .cmp-table tr:last-child .cmp-b{box-shadow:none}
}
#comparison .cmp-hdot{left:41px;margin-top:-7px}
@media (max-width:900px){#comparison .cmp-hdot{left:33px}}

/* ---------- comparison as a graphic: warm tilted notes -> cool glossy cards, joined by flowing arrows ---------- */
#comparison{padding-block:88px;background:radial-gradient(ellipse at 12% 0%,#dbeaff,transparent 58%),radial-gradient(ellipse at 90% 100%,#e4efff,transparent 62%),#f3f8ff}
#comparison .cg{position:relative;max-width:1060px;margin-inline:auto;padding:0 28px 34px;display:flex;flex-direction:column}
#comparison .cg::before,#comparison .cg::after{content:"";position:absolute;top:0;bottom:0;width:calc(50% - 8px);border-radius:32px;z-index:0}
#comparison .cg::before{left:0;background:linear-gradient(180deg,#fcefe6,#f8e6da);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 30px 60px -40px rgba(150,70,30,.45)}
#comparison .cg::after{right:0;background:linear-gradient(180deg,#e6f0ff,#d8e7fd);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 30px 60px -36px rgba(15,62,147,.5)}
#comparison .cg-row{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);align-items:center;padding-block:9px}
#comparison .cg-head{padding-top:30px;padding-bottom:14px}
#comparison .cg-hl,#comparison .cg-hr{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-align:center}
#comparison .cg-hl{color:#a85a33}
#comparison .cg-hr{position:relative;color:#0f3e93}
#comparison .cg-dot{display:inline-block;width:12px;height:12px;margin-right:10px;border-radius:50%;vertical-align:-1px;background:radial-gradient(circle at 35% 30%,#8fbbfa,#1759b0);box-shadow:0 0 0 4px rgba(44,123,242,.2)}
/* conventional: slightly tilted paper notes */
#comparison .cg-old{display:flex;align-items:center;gap:14px;min-height:76px;padding:16px 18px;border-radius:14px;background:#fff;color:#5a4a40;font-size:16.5px;line-height:1.45;
  box-shadow:0 1px 0 #fff inset,0 10px 20px -12px rgba(120,60,30,.45),0 2px 4px rgba(120,60,30,.08);transition:transform .18s ease,box-shadow .18s ease}
#comparison .cg-t0{transform:rotate(-1.1deg)}#comparison .cg-t1{transform:rotate(.9deg) translateX(8px)}#comparison .cg-t2{transform:rotate(-.6deg) translateX(-4px)}
.cg-x,.cg-ok{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%}
.cg-x svg,.cg-ok svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.cg-x{background:linear-gradient(180deg,#f0695c,#d83b2d);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 10px -6px #d83b2d}
.cg-ok{background:linear-gradient(180deg,#34d58a,#16a65e);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 10px -6px #16a65e}
/* arrows */
#comparison .cg-link{position:relative;height:40px}
#comparison .cg-link i{position:absolute;left:4px;right:10px;top:50%;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,#2c7bf2 0 7px,transparent 7px 12px);animation:tf-flow 1.6s linear infinite}
#comparison .cg-link i::after{content:"";position:absolute;right:-3px;top:-4px;width:9px;height:9px;border-right:2.5px solid #2c7bf2;border-top:2.5px solid #2c7bf2;transform:rotate(45deg)}
/* harness: glossy raised cards with icon tile */
#comparison .cg-new{display:flex;align-items:center;gap:14px;min-height:76px;padding:14px 18px 14px 14px;border-radius:16px;color:#0d2247;font-weight:600;font-size:16.5px;line-height:1.4;
  background:linear-gradient(180deg,#fff,#f4f8ff);border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(44,123,242,.14),0 18px 30px -16px rgba(15,62,147,.55);transition:transform .18s ease,box-shadow .18s ease}
.cg-ic{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:linear-gradient(160deg,#2c7bf2,#1759b0);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 14px -8px #1759b0}
.cg-ic svg{width:23px;height:23px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cg-txt{flex:1;min-width:0}
/* hover lights the pair */
#comparison .cg-row:not(.cg-head):hover .cg-old{transform:rotate(0) translateX(0) translateY(-2px);box-shadow:0 1px 0 #fff inset,0 16px 26px -12px rgba(120,60,30,.55)}
#comparison .cg-row:not(.cg-head):hover .cg-new{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 0 0 2px #2c7bf2,0 0 30px -4px rgba(44,123,242,.55),0 22px 34px -16px rgba(15,62,147,.6)}
#comparison .cg-row:not(.cg-head):hover .cg-link i{animation-duration:.6s}
@media (max-width:820px){
  #comparison .cg{padding:0;gap:0}
  #comparison .cg::before,#comparison .cg::after{display:none}
  #comparison .cg-head{display:none}
  #comparison .cg-row:not(.cg-head){grid-template-columns:minmax(0,1fr);gap:0;padding:14px;margin-bottom:14px;border-radius:22px;background:linear-gradient(180deg,#fcefe6 0,#fcefe6 46%,#e6f0ff 54%,#d8e7fd 100%);box-shadow:0 24px 40px -30px rgba(15,62,147,.5)}
  #comparison .cg-t0,#comparison .cg-t1,#comparison .cg-t2{transform:none}
  #comparison .cg-link{height:30px}
  #comparison .cg-link i{left:50%;right:auto;top:2px;bottom:6px;width:2px;height:auto;margin:0;background:repeating-linear-gradient(180deg,#2c7bf2 0 6px,transparent 6px 11px);animation:none}
  #comparison .cg-link i::after{right:auto;left:-4px;top:auto;bottom:-3px;transform:rotate(135deg)}
}
@media (prefers-reduced-motion:reduce){#comparison .cg-link i{animation:none}#comparison .cg-old,#comparison .cg-new{transition:none}}
#comparison .cg-old > span:last-child::first-letter,#comparison .cg-txt::first-letter{text-transform:uppercase}

/* Hybrid-Reasoning balance: diagram fills its column, aligns with the heading, and both columns end on the same line */
@media (min-width:861px){
  #hybrid-reasoning .hrp-split{align-items:stretch}
  #hybrid-reasoning .hrp-head{display:flex;flex-direction:column}
  #hybrid-reasoning .hrp-head .hrfig2{flex:1;margin-top:28px;padding-inline:0;justify-content:space-between}
  #hybrid-reasoning .hrfig2 .hf-cap{flex:1;min-height:70px;height:auto}
  #hybrid-reasoning .hrfig2 .hf-cap1,#hybrid-reasoning .hrfig2 .hf-cap2{height:auto;min-height:70px}
  #hybrid-reasoning .hrfig2 .am-hint{margin-bottom:12px}
}
@media (min-width:861px){
  #hybrid-reasoning .hrp-head .hrfig2{margin-top:0;padding-top:6px;padding-bottom:6px}
}

/* ---------- comparison table, version 2: the Sept 7 concept-02 table (dark, mono labels, hairline rows, bold lead phrase) ---------- */
#comparison-2{padding-block:96px;background:#07090f}
#comparison-2 .sc-table{width:100%;max-width:1120px;margin-inline:auto;border-collapse:collapse;table-layout:fixed}
#comparison-2 .sc-corner{width:21%}
#comparison-2 .sc-ha{width:36%}
#comparison-2 .sc-table th,#comparison-2 .sc-table td{text-align:left;vertical-align:top;border-top:1px solid #1b2130}
#comparison-2 thead th,#comparison-2 thead td{padding:22px 24px 22px 0;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:12.5px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:#7f8aa0}
#comparison-2 tbody th{padding:46px 20px 46px 0;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:12.5px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:#7f8aa0}
#comparison-2 tbody td{padding:42px 28px 42px 0;font-size:20px;line-height:1.65;color:#8e98ac}
#comparison-2 .sc-b{color:#a9b2c4}
#comparison-2 .sc-b strong{font-weight:600;color:#fff}
#comparison-2 .sc-table tbody tr:last-child th,#comparison-2 .sc-table tbody tr:last-child td{border-bottom:1px solid #1b2130}
@media (max-width:820px){
  #comparison-2{padding-block:56px}
  #comparison-2 .sc-table,#comparison-2 .sc-table tbody,#comparison-2 .sc-table tr,#comparison-2 .sc-table th,#comparison-2 .sc-table td{display:block;width:100%}
  #comparison-2 thead{position:absolute;left:-9999px}
  #comparison-2 .sc-table tr{padding:28px 0;border-top:1px solid #1b2130}
  #comparison-2 .sc-table tbody tr:last-child{border-bottom:1px solid #1b2130}
  #comparison-2 .sc-table th,#comparison-2 .sc-table td{border:0!important;padding:0}
  #comparison-2 tbody th{margin-bottom:14px;font-size:12px}
  #comparison-2 tbody td{font-size:17.5px;line-height:1.6;padding:0 0 12px}
  #comparison-2 .sc-a::before,#comparison-2 .sc-b::before{display:block;margin-bottom:4px;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#5e6980}
  #comparison-2 .sc-a::before{content:"Conventional approach"}
  #comparison-2 .sc-b::before{content:"Semantic AI Harness"}
}
#comparison-2 .sc-corner{width:22%}
#comparison-2 .sc-ha{width:38%}
@media (max-width:820px){#comparison-2 tbody td.sc-b{padding-top:6px}#comparison-2 .sc-a{padding-bottom:16px!important}}

/* ---------- comparison v2: the "Figure" panel under the table (striped dark box, mono label, title, description, split figure) ---------- */
#comparison-2 .sc-fig{
  max-width:1120px;margin:72px auto 0;padding:48px;border:1px solid #1b2130;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 22px,transparent 22px 44px),#0a0d14;
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:48px;align-items:center;
}
#comparison-2 .sc-figlabel{display:block;margin-bottom:22px;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:#7f8aa0}
#comparison-2 .sc-figtext h3{margin:0 0 18px;font-size:clamp(26px,2.6vw,34px);font-weight:500;line-height:1.2;color:#e8ecf4;letter-spacing:-.01em}
#comparison-2 .sc-figtext p{margin:0 0 14px;font-size:17px;line-height:1.7;color:#8e98ac}
#comparison-2 .sc-figart{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.25fr);gap:0;align-items:stretch;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}
#comparison-2 .sc-half{position:relative;padding:22px 22px 24px;display:flex;flex-direction:column;gap:18px}
#comparison-2 .sc-conv{border-right:1px solid #1b2130;padding-right:26px}
#comparison-2 .sc-harn{padding-left:26px}
#comparison-2 .sc-tag{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#6b768c}
#comparison-2 .sc-harn .sc-tag{color:#aab4c8}
#comparison-2 .sc-chain{display:flex;flex-direction:column;align-items:stretch;gap:0}
#comparison-2 .sc-node{padding:12px 14px;border:1px solid #232b3b;border-radius:8px;background:#0d111a;font-size:13px;line-height:1.35;text-align:center;color:#8e98ac}
#comparison-2 .sc-harn .sc-node{border-color:#34405a;color:#e6ebf5;background:#101624}
#comparison-2 .sc-hub{border-color:#4d6da6;background:#122042;color:#fff}
#comparison-2 .sc-out{border-color:#3f6a58;background:#0f2a22;color:#d9fbe9}
#comparison-2 .sc-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#comparison-2 .sc-arr{position:relative;height:28px}
#comparison-2 .sc-arr::before{content:"";position:absolute;left:50%;top:3px;bottom:7px;width:1px;background:#4d5a76}
#comparison-2 .sc-arr::after{content:"";position:absolute;left:50%;bottom:4px;width:7px;height:7px;margin-left:-3.5px;border-right:1px solid #8795b3;border-bottom:1px solid #8795b3;transform:rotate(45deg)}
/* conventional: a loose, doubled-back connection */
#comparison-2 .sc-two{position:relative;height:60px}
#comparison-2 .sc-two i{position:absolute;left:30%;right:30%;top:6px;bottom:6px;border:1px dashed #3a4357;border-top:0;border-bottom:0}
#comparison-2 .sc-two::before,#comparison-2 .sc-two::after{content:"";position:absolute;left:30%;right:30%;height:0;border-top:1px dashed #3a4357}
#comparison-2 .sc-two::before{top:6px}#comparison-2 .sc-two::after{bottom:6px}
#comparison-2 .sc-over{margin-top:auto;align-self:flex-start;padding:4px 10px;border:1px dashed #3a4357;border-radius:999px;font-size:11px;letter-spacing:.04em;color:#7f8aa0}
@media (max-width:900px){
  #comparison-2 .sc-fig{grid-template-columns:minmax(0,1fr);padding:28px 20px;gap:28px;margin-top:48px}
}
@media (max-width:560px){
  #comparison-2 .sc-figart{grid-template-columns:minmax(0,1fr)}
  #comparison-2 .sc-conv{border-right:0;border-bottom:1px solid #1b2130;padding:22px 4px 26px}
  #comparison-2 .sc-harn{padding:26px 4px 22px}
}
#comparison-2 .sc-figart{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
#comparison-2 .sc-tag{white-space:nowrap}
#comparison-2 .sc-two{height:64px}
#comparison-2 .sc-two i,#comparison-2 .sc-two::before,#comparison-2 .sc-two::after{all:unset}
#comparison-2 .sc-two{position:relative;display:block;height:64px}
#comparison-2 .sc-two i{position:absolute;left:50%;top:8px;bottom:8px;width:0;border-left:1px dashed #4a5670;display:block}
#comparison-2 .sc-two::before,#comparison-2 .sc-two::after{content:"";position:absolute;left:50%;width:7px;height:7px;margin-left:-3.5px;border-left:1px solid #8795b3;border-top:1px solid #8795b3}
#comparison-2 .sc-two::before{top:5px;transform:rotate(45deg)}
#comparison-2 .sc-two::after{bottom:5px;transform:rotate(225deg)}
@media (max-width:560px){
  #comparison-2 .sc-figart{grid-template-columns:minmax(0,1fr)}
  #comparison-2 .sc-conv{border-right:0;border-bottom:1px solid #1b2130;padding:22px 4px 26px}
  #comparison-2 .sc-harn{padding:26px 4px 22px}
  #comparison-2 .sc-tag{white-space:normal}
}

/* ---------- comparison v2 on OUR ground: navy section, diagram stage, mono type, glass nodes, flowing mint lines, trace ---------- */
#comparison-2{background:radial-gradient(ellipse at 90% 8%,#18385e,transparent 62%),radial-gradient(ellipse at 6% 100%,#10294f,transparent 60%),#0b1b34}
#comparison-2 .sc-table th,#comparison-2 .sc-table td{border-top-color:#2a4268}
#comparison-2 .sc-table tbody tr:last-child th,#comparison-2 .sc-table tbody tr:last-child td{border-bottom-color:#2a4268}
#comparison-2 thead th,#comparison-2 thead td,#comparison-2 tbody th{color:#8fa9d0}
#comparison-2 tbody td{color:#aebfd8}
#comparison-2 .sc-b{color:#c6d5eb}
#comparison-2 .sc-fig{border:0;background:none;padding:0;margin-top:80px;gap:56px}
#comparison-2 .sc-figlabel{color:#8fa9d0}
#comparison-2 .sc-figtext h3{color:#fff}
#comparison-2 .sc-figtext p{color:#c6d5eb}
#comparison-2 .sc-stage{position:relative;isolation:isolate;padding:10px 6px 6px}
#comparison-2 .sc-stage::before{
  content:"";position:absolute;inset:-34px -56px;z-index:-1;pointer-events:none;
  background:radial-gradient(circle,rgba(143,187,250,.12) 1px,transparent 1.6px) 0 0/22px 22px,radial-gradient(70% 60% at 50% 0%,rgba(63,140,255,.16),transparent 72%),radial-gradient(60% 50% at 50% 100%,rgba(94,224,168,.08),transparent 72%),linear-gradient(180deg,rgba(6,16,36,.40),rgba(6,16,36,.22));
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 20%,#000 80%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent 0,#000 20%,#000 80%,transparent 100%) intersect,linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-composite:intersect;
}
#comparison-2 .sc-stage .am-hint{margin:0 0 12px}
#comparison-2 .sc-conv{border-right-color:rgba(255,255,255,.18)}
#comparison-2 .sc-tag{color:#ffb58a;font-size:11px}
#comparison-2 .sc-harn .sc-tag{color:#7ff0bd}
#comparison-2 .sc-ic{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.12);color:#fff}
#comparison-2 .sc-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#comparison-2 .sc-node{display:flex;align-items:center;gap:10px;padding:10px 12px;text-align:left;border-radius:14px;color:#f4f8ff;cursor:pointer;
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 14px 24px -16px rgba(3,12,30,.8);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease,opacity .15s ease,background .15s ease}
#comparison-2 .sc-node b{font-weight:500;font-size:13px;line-height:1.3}
#comparison-2 .sc-conv .sc-node{border-color:rgba(255,122,60,.4);background:linear-gradient(160deg,rgba(255,122,60,.16),rgba(255,122,60,.04));color:#ffe3d1}
#comparison-2 .sc-conv .sc-ic{background:rgba(255,122,60,.2);color:#ffb487}
#comparison-2 .sc-harn .sc-node{border-color:rgba(94,224,168,.35)}
#comparison-2 .sc-harn .sc-ic{background:rgba(94,224,168,.18);color:#9ff7d2}
#comparison-2 .sc-hub{background:radial-gradient(120% 100% at 25% 0%,rgba(143,187,250,.5),rgba(23,89,176,.7));border-color:rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 30px -6px rgba(94,224,168,.5)}
#comparison-2 .sc-hub .sc-ic{background:rgba(255,255,255,.2);color:#fff}
#comparison-2 .sc-out{background:linear-gradient(160deg,rgba(94,224,168,.28),rgba(94,224,168,.1));border-color:rgba(94,224,168,.6);box-shadow:0 0 26px -4px rgba(94,224,168,.55),inset 0 1px 0 rgba(255,255,255,.4)}
#comparison-2 .sc-pair{gap:8px}
#comparison-2 .sc-pair .sc-node{padding:10px}
#comparison-2 .sc-arr{height:30px}
#comparison-2 .sc-arr::before{width:2px;margin-left:-1px;background:repeating-linear-gradient(180deg,#5ee0a8 0 5px,transparent 5px 9px);filter:drop-shadow(0 0 5px rgba(94,224,168,.7));animation:sc-flow 1.2s linear infinite}
#comparison-2 .sc-arr::after{border-color:#5ee0a8}
@keyframes sc-flow{to{background-position:0 18px}}
#comparison-2 .sc-two i{border-left-color:#ff9a63}
#comparison-2 .sc-two::before,#comparison-2 .sc-two::after{border-color:#ffb487}
#comparison-2 .sc-over{border-color:rgba(255,122,60,.5);color:#ffc9a8;background:rgba(255,122,60,.1)}
/* trace: hover or focus a node, the rest steps back */
#comparison-2 .sc-half:has(.sc-node:hover,.sc-node:focus-visible) .sc-node:not(:hover):not(:focus-visible),
#comparison-2 .sc-half:has(.sc-node:hover,.sc-node:focus-visible) .sc-arr{opacity:.4}
#comparison-2 .sc-node:hover,#comparison-2 .sc-node:focus-visible{outline:0;transform:translateY(-2px)}
#comparison-2 .sc-harn .sc-node:hover,#comparison-2 .sc-harn .sc-node:focus-visible{border-color:#7ff0bd;box-shadow:0 0 0 2px rgba(127,240,189,.55),0 0 26px -2px rgba(94,224,168,.8)}
#comparison-2 .sc-conv .sc-node:hover,#comparison-2 .sc-conv .sc-node:focus-visible{border-color:#ff9a63;box-shadow:0 0 0 2px rgba(255,154,99,.5),0 0 24px -4px rgba(255,122,60,.7)}
@media (max-width:900px){#comparison-2 .sc-fig{margin-top:56px}#comparison-2 .sc-stage::before{inset:-24px -16px}}
@media (prefers-reduced-motion:reduce){#comparison-2 .sc-arr::before{animation:none}#comparison-2 .sc-node{transition:none}}
/* glass cards: beat the older flat-colour rules */
#comparison-2 .sc-harn .sc-node{background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04));color:#f4f8ff;border-color:rgba(94,224,168,.38)}
#comparison-2 .sc-harn .sc-node.sc-hub{background:radial-gradient(120% 100% at 25% 0%,rgba(143,187,250,.5),rgba(23,89,176,.7));border-color:rgba(255,255,255,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 0 30px -6px rgba(94,224,168,.5)}
#comparison-2 .sc-harn .sc-node.sc-out{background:linear-gradient(160deg,rgba(94,224,168,.28),rgba(94,224,168,.1));border-color:rgba(94,224,168,.6)}
#comparison-2 .sc-conv .sc-node{background:linear-gradient(160deg,rgba(255,122,60,.18),rgba(255,122,60,.05))}
#comparison-2 .sc-figtext h3{margin-top:0}

/* ---------- Architecture: the four parts as editorial rows (after the 04-editorial-calm layout): mono number | headline | paragraph, hairline rules ---------- */
#architecture .arch-cards{display:block;margin-top:56px;border-top:1px solid #2f4a70}
#architecture .arch-cards .sub{
  position:relative;display:grid;grid-template-columns:72px minmax(0,.9fr) minmax(0,1.3fr);column-gap:40px;align-items:start;
  padding:44px 24px;border:0;border-bottom:1px solid #2f4a70;border-radius:0;background:none;box-shadow:none;transition:background .2s ease;
}
#architecture .arch-cards .sub:hover,#architecture .arch-cards .sub:focus-within{background:rgba(143,187,250,.06);border-color:#2f4a70}
#architecture .arch-cards .arch-ic{display:none}
#architecture .arch-cards .subnum{
  position:static;grid-column:1;padding-top:8px;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:13px;letter-spacing:.14em;color:#8fa9d0;-webkit-text-stroke:0;opacity:1;
}
#architecture .arch-cards .subin{display:contents}
#architecture .arch-cards .subin > div:first-child{grid-column:2}
#architecture .arch-cards .subin h3{margin:0;font-size:clamp(26px,2.8vw,36px);font-weight:600;line-height:1.15;letter-spacing:-.02em;color:#fff;white-space:normal}
#architecture .arch-cards .subin > div:last-child{grid-column:3;display:flex;flex-direction:column;gap:16px;flex:none}
#architecture .arch-cards .subin p{margin:0;font-size:18px;line-height:1.7;color:#c6d5eb}
#architecture .arch-cards .subin a{margin:0;align-self:flex-start;font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#a9ceff;text-decoration:none;border-bottom:1px solid rgba(169,206,255,.5);padding-bottom:2px}
#architecture .arch-cards .subin a:hover{color:#fff;border-color:#fff}
#architecture .arch-cards .subin a::after{content:"";position:absolute;inset:0;border-radius:0}
@media (max-width:900px){
  #architecture .arch-cards .sub{grid-template-columns:48px minmax(0,1fr);column-gap:20px;row-gap:14px;padding:32px 14px}
  #architecture .arch-cards .subin > div:first-child{grid-column:2}
  #architecture .arch-cards .subin > div:last-child{grid-column:2}
  #architecture .arch-cards .subnum{padding-top:6px}
}
@media (prefers-reduced-motion:reduce){#architecture .arch-cards .sub{transition:none}}

/* Architecture rows: small mono label (the part name) above a headline, as in the 04-editorial-calm screenshot */
#architecture .arch-cards .subin h3{display:flex;flex-direction:column;gap:14px}
#architecture .arch-cards .ar-k{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace;font-size:12.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#8fa9d0;line-height:1.3}
#architecture .arch-cards .ar-h{font-size:clamp(22px,2.3vw,30px);font-weight:600;line-height:1.2;letter-spacing:-.02em;color:#fff}
#architecture .arch-cards .subnum{padding-top:0;line-height:1.3}
@media (max-width:900px){#architecture .arch-cards .ar-h{font-size:22px}#architecture .arch-cards .subnum{padding-top:0}}

/* ---------- Registration modal (fields from the existing site's form; our liquid-glass look) ---------- */
html.reg-open{overflow:hidden}
.reg[hidden]{display:none}
.reg:target{display:block}
.reg{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;overflow-y:auto}
.reg-backdrop{position:fixed;inset:0;background:rgba(5,12,28,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.reg-card{
  position:relative;width:min(560px,100%);padding:44px 44px 36px;border-radius:28px;color:#f4f8ff;isolation:isolate;
  background:radial-gradient(90% 70% at 0% 0%,rgba(143,187,250,.28),transparent 60%),linear-gradient(165deg,rgba(21,54,102,.92),rgba(10,26,51,.94));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 40px 80px -30px rgba(3,12,30,.9);
  animation:am-pop-in .18s ease-out;
}
.reg-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.7),rgba(255,255,255,.10) 35%,rgba(255,255,255,.03) 60%,rgba(255,255,255,.3));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.reg-card h2{margin:0 0 30px;text-align:center;font-size:30px;font-weight:600;letter-spacing:-.02em;color:#fff}
.reg-x{position:absolute;top:18px;right:18px;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#cfe3ff;cursor:pointer;transition:background .15s ease}
.reg-x:hover{background:rgba(255,255,255,.2)}
.reg-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.reg-x:focus-visible,.reg-submit:focus-visible{outline:2px solid #8fbbfa;outline-offset:3px}
.reg-form{display:flex;flex-direction:column;gap:26px}
.reg-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.reg-field{position:relative}
.reg-field input,.reg-field select{width:100%;padding:22px 2px 8px;border:0;border-bottom:1px solid rgba(143,187,250,.45);border-radius:0;background:none;color:#fff;font:inherit;font-size:17px;outline:0;transition:border-color .15s ease}
.reg-field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:28px}
.reg-field select option{color:#102747;background:#fff}
.reg-field label{position:absolute;left:2px;top:22px;font-size:17px;color:#a9c4e8;pointer-events:none;transition:transform .15s ease,font-size .15s ease,color .15s ease;transform-origin:0 0}
.reg-field input:focus,.reg-field select:focus{border-bottom-color:#8fbbfa;box-shadow:0 1px 0 #8fbbfa}
.reg-field input:focus+label,.reg-field input:not(:placeholder-shown)+label,.reg-field select:focus+label,.reg-field select:not([value=""]):valid+label{transform:translateY(-18px) scale(.78);color:#8fbbfa}
.reg-field select:focus+label,.reg-field.has-value label{transform:translateY(-18px) scale(.78);color:#8fbbfa}
.reg-select::after{content:"";position:absolute;right:6px;top:30px;width:8px;height:8px;border-right:2px solid #a9c4e8;border-bottom:2px solid #a9c4e8;transform:rotate(45deg);pointer-events:none}
.reg-field input[aria-invalid="true"]{border-bottom-color:#ff8a7a}
.reg-err{display:block;min-height:0;margin-top:6px;font-size:13px;color:#ffb4a8}
.reg-err:empty{display:none}
.reg-check{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:16px;color:#dbe9ff}
.reg-check input{position:absolute;opacity:0;width:0;height:0}
.reg-box{display:grid;place-items:center;flex:none;width:22px;height:22px;border:1.5px solid rgba(143,187,250,.6);border-radius:6px;background:rgba(255,255,255,.06);transition:background .15s ease,border-color .15s ease}
.reg-check input:checked+.reg-box{background:#2c7bf2;border-color:#2c7bf2}
.reg-check input:checked+.reg-box::after{content:"";width:5px;height:10px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg) translate(-1px,-1px)}
.reg-check input:focus-visible+.reg-box{outline:2px solid #8fbbfa;outline-offset:3px}
.reg-submit{align-self:center;margin-top:6px;padding:15px 48px;justify-content:center}
.reg-submit[disabled]{opacity:.6;cursor:progress}
.reg-status{margin:0;min-height:20px;text-align:center;font-size:15px;color:#9ff7d2}
.reg-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.reg-form.is-done .reg-field,.reg-form.is-done .reg-row,.reg-form.is-done .reg-check,.reg-form.is-done .reg-submit{display:none}
.reg-form.is-done .reg-status{padding:30px 0 10px;font-size:22px;font-weight:600}
@media (max-width:560px){
  .reg{padding:12px;align-items:start}
  .reg-card{padding:34px 22px 26px;border-radius:22px;margin-top:20px}
  .reg-row{grid-template-columns:1fr;gap:26px}
  .reg-card h2{font-size:26px;margin-bottom:24px}
}
@media (prefers-reduced-motion:reduce){.reg-card{animation:none}}

/* Enterprise-grade AI page: first section clears the fixed navbar */
main > #smarter-faster:first-child{padding-top:104px}

/* Architecture intro text (includes the paragraphs moved from the old small Semantic AI Harness block) */
#architecture > .wrap > p{line-height:1.55;max-width:70ch}
/* the grid gap (52px) is for big blocks; stack the short intro paragraphs closer */
#architecture > .wrap > p + p{margin-top:calc(var(--s2) - var(--s5))}
#architecture > .wrap > p:last-of-type{margin-top:calc(var(--s3) - var(--s5))}

/* Contact Us page (new design of the live site's Contact Us: heading, email, contact details) */
.contact-lead{margin:0;font-size:clamp(20px,2.4vw,28px);font-weight:500;letter-spacing:-.01em;overflow-wrap:anywhere}
.contact-lead a{color:var(--ink);text-decoration:none;border-bottom:1px solid rgba(44,123,242,.45)}
.contact-lead a:hover{color:#1759b0;border-color:#1759b0}
.chapsec .wrap > .contact-sub{margin:0;font-size:19px;font-weight:600;letter-spacing:-.02em}
.chapsec .wrap > .contact-grid{margin-top:-30px}
.card.lg.contact-card{display:block;color:inherit;text-decoration:none;padding:24px 26px}
.card.lg.contact-card > .lgc{display:flex;align-items:center;gap:18px}
.contact-ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:#eaf2ff;color:#1759b0}
.contact-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.contact-tx{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:16px;color:var(--ink);overflow-wrap:anywhere}
.contact-tx b{font-weight:600;font-size:16px}
.contact-card:hover .contact-tx{color:#1759b0}

/* Rewriting Tokenomics: "How it works" + HiFi AI blocks (page 13 of the source doc) */
#tokenomics .tok-how{display:grid;gap:44px;margin-top:64px;padding-top:44px;border-top:1px solid #2f4a70}
#tokenomics .tok-how .head h3{margin:0;font-size:clamp(24px,2.6vw,34px);font-weight:600;line-height:1.15;letter-spacing:-.02em;color:#fff}
#tokenomics .tok-how .letter p:first-child{font-size:17px;color:#c6d5eb}

/* Feature-page native disclosures; existing source typography is retained. */
.feature-page .acc{display:block;padding:0;margin-top:0;background:rgba(255,255,255,.32);scroll-margin-top:150px}
.feature-page .acc > summary.subin{display:grid;grid-template-columns:90px minmax(0,1fr) 18px;gap:28px;align-items:center;min-height:88px;padding:22px 16px 22px 0;list-style:none;cursor:pointer;color:var(--ink)}
.feature-page .acc > summary::-webkit-details-marker{display:none}
.feature-page .acc > summary::marker{content:""}
.feature-page .acc > summary:hover{background:rgba(255,255,255,.48)}
.feature-page .acc > summary:focus-visible,.feature-page .acc-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px}
.feature-page .acc .subnum{position:static;font-size:clamp(42px,5vw,64px);line-height:1;letter-spacing:-.06em}
.feature-page .acc > summary h3{margin:0;min-width:0;overflow-wrap:anywhere}
.feature-page .acc .acc-chevron{width:10px;height:10px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(45deg);transition:transform .18s}
.feature-page .acc[open] > summary .acc-chevron{transform:rotate(225deg)}
.feature-page .acc .acc-panel{padding:0 62px 28px 118px;min-width:0;overflow-wrap:anywhere}
.feature-page .acc .acc-panel p{margin:0;font-size:15.5px;line-height:1.66;color:var(--ink-2)}
.feature-page .acc .acc-panel p+p{margin-top:20px}
.feature-page .acc .acc-subsection{margin-top:28px;padding-left:20px;border-left:2px solid var(--blue-l)}
.feature-page .acc .acc-subsection h4{margin:0 0 14px;font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.025em;color:var(--ink)}
.feature-page .acc .acc-label{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.04em;color:var(--blue-d);margin-right:8px}
.feature-page .acc-toggle{display:block;margin:28px 0 12px;padding:10px 14px;min-height:44px;border:1px solid var(--line);border-radius:6px;background:rgba(255,255,255,.66);color:var(--blue-d);font-family:"IBM Plex Mono",monospace;font-size:12px;cursor:pointer}
.feature-page .acc-toggle:hover{border-color:var(--blue);color:var(--ink)}
@media (max-width:900px){
  .feature-page .acc > summary.subin{grid-template-columns:48px minmax(0,1fr) 14px;gap:14px;padding:18px 8px;min-height:64px}
  .feature-page .acc .subnum{font-size:40px}
  .feature-page .acc .acc-panel{padding:0 12px 24px}
  .feature-page .acc .acc-subsection{padding-left:14px}
}
@media (prefers-reduced-motion:reduce){.feature-page .acc .acc-chevron{transition:none}}
/* features accordion: compact list (the section grid gap is 52px, which is for big blocks) */
.feature-page .chapsec .wrap > .acc{border-bottom:1px solid var(--line)}
.feature-page .chapsec .wrap > .acc + .acc{margin-top:calc(var(--s5) * -1)}
.feature-page .chapsec .wrap > .acc-toggle + .acc{border-top:1px solid var(--line)}
.feature-page .acc > summary.subin{min-height:0;padding:18px 16px 18px 0}
.feature-page .acc .subnum{font-size:clamp(34px,4vw,48px)}
.feature-page .acc > summary.subin{grid-template-columns:78px minmax(0,1fr) 18px}
.feature-page .acc .acc-panel{padding-left:106px}
.feature-page .chapsec .wrap > .acc-toggle{width:fit-content;margin-left:auto;margin-bottom:calc(var(--s3) - var(--s5));padding:8px 18px;min-height:44px}
@media (max-width:760px){
  .feature-page .acc > summary.subin{grid-template-columns:44px minmax(0,1fr) 14px}
  .feature-page .acc .subnum{font-size:32px}
  .feature-page .acc .acc-panel{padding-left:12px}
}

/* Recognition: real logos (small - the quotes and awards carry the section) and award cards */
.rec-logo{display:flex;align-items:center;min-height:44px}
.rec-logo img{display:block;height:34px;width:auto;max-width:170px;object-fit:contain}
.recognition-card .rec-logo img{height:38px}
.chapsec .wrap > .partner-logos{display:flex;flex-wrap:wrap;align-items:center;gap:20px 56px}
.partner-logos .rec-logo img{height:30px}
.recognition-final > .rec-logo img{height:34px}
.award-link{display:block;color:inherit;text-decoration:none}
.award-badge{display:flex;flex-direction:column;align-items:flex-start;gap:6px;height:100%;padding:22px 26px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.55)}
.award-link:hover .award-badge{border-color:var(--blue)}
.ab-logo{height:34px;width:auto;max-width:200px;margin-bottom:8px}
.ab-name{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.ab-res{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.ab-cat{font-size:16px;line-height:1.4;color:var(--ink-2)}
#recognition .wrap > .head + .recognition-quotes{margin-top:0}
.partner-logos .rec-logo img[src*="dell"]{height:36px}
/* Governance field is one control (one popup, one link) instead of four identical ones */
.am-gov{cursor:pointer}
.am-gov:hover{border-color:#8fbbfa;box-shadow:0 0 0 2px rgba(143,187,250,.55)}
.am-gov:hover .am-cell{border-color:#8fbbfa;background:rgba(143,187,250,.16)}
.am-gov:focus-visible{outline:3px solid #8fbbfa;outline-offset:3px}
.am-gov[aria-expanded="true"]{box-shadow:0 0 0 3px #8fbbfa}
/* Splash text: fewer, clearer levels. Title > blue tagline > one grouped statement (heading + paragraph at the same size) > keywords > button.
   Before: title, tagline, a 22px bold heading, a 17px grey paragraph and 10.5px keywords all competed. */
.intro-section .hero .pane p.lede:nth-of-type(1){margin:0 0 34px}
.intro-section .hero .pane h2{margin:0 0 6px;font-size:clamp(19px,1.8vw,21px);font-weight:600;line-height:1.4;color:var(--ink)}
.intro-section .hero .pane p.lede:nth-of-type(2){max-width:46ch;margin:0 auto;font-size:clamp(19px,1.8vw,21px);line-height:1.5;color:var(--ink-2)}
.intro-section .hero .micro{margin-top:30px;gap:10px}
.intro-section .hero .micro .mp{font-size:11.5px;padding:8px 16px}
.intro-section .hero .cta{margin-top:30px}
@media (max-width:560px){.intro-section .hero .micro .mp{font-size:10.5px;padding:7px 14px}}

/* Company layouts: scoped to the five editorial pages. */
.co-page{overflow-wrap:anywhere}
.co-page.chapsec .wrap{gap:32px}
.co-page .head.lft{margin-bottom:0}
.co-page p{margin:0;color:var(--ink-2);line-height:1.65}
.co-page h2,.co-page h3{margin:0;color:var(--ink);letter-spacing:-.025em;line-height:1.25}
.co-page .co-lead{max-width:960px;font-size:clamp(22px,2.4vw,30px);line-height:1.5;color:var(--ink)}
.co-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.co-body p{font-size:17px}
.co-cta{display:flex;flex-wrap:wrap;gap:14px;padding-top:28px;border-top:1px solid var(--line)}
.co-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 24px;border:1px solid #2c7bf2;border-radius:30px;color:#1759b0;background:rgba(255,255,255,.6);text-decoration:none;font-weight:600}
.co-button-primary{background:#2c7bf2;color:#fff}
.co-button:hover{background:#eaf2ff}
.co-button-primary:hover{background:#1759b0}
.co-label,.co-meta,.co-date{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.04em;line-height:1.6}
.co-label{color:#1759b0;text-transform:uppercase;letter-spacing:.12em}
.co-meta{color:var(--ink-2)}
.co-link{display:inline-flex;align-items:center;gap:16px;min-height:44px;min-width:44px;width:fit-content;color:#1759b0;text-decoration:none;font-weight:500}
.co-link:hover{text-decoration:underline;text-underline-offset:5px}
.co-link span{font-size:22px}
.co-page a:focus-visible,.co-filter:focus-visible{outline:2px solid #1759b0;outline-offset:4px}
.co-page .card.lg{display:block;min-width:0;height:100%;padding:28px}
.co-page .card.lg > .lgc{display:flex;flex-direction:column;align-items:flex-start;gap:16px;height:100%;min-width:0}
.co-page .card.lg h2{font-size:24px}
.co-page .card.lg .co-link{margin-top:auto}
.co-page .card.lg.co-feature{padding:clamp(26px,4vw,52px);background:linear-gradient(120deg,rgba(255,255,255,.82),rgba(224,237,255,.6))}
.co-page .card.lg.co-feature > .lgc{gap:20px}
.co-page .card.lg.co-feature h2{max-width:28ch;font-size:clamp(28px,3.2vw,42px);line-height:1.15}
.co-page .co-feature .co-excerpt{max-width:65ch;font-size:18px}
.co-news-list{border-top:1px solid var(--line)}
.co-news-row{display:grid;grid-template-columns:120px minmax(0,1.1fr) minmax(0,1fr) 44px;gap:28px;align-items:start;padding:28px 0;border-bottom:1px solid var(--line)}
.co-news-row h2{font-size:21px}
.co-news-row p{font-size:15px}
.co-news-row .co-link{justify-content:center}
.co-event-group{display:grid;gap:22px}
.co-page .co-group-title{font-size:26px}
.co-event-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.co-page .card.lg.co-event > .lgc{display:grid;grid-template-columns:74px minmax(0,1fr);align-items:start;gap:24px}
.co-date{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;border-radius:14px;background:#eaf2ff;color:#1759b0}
.co-date b{font-size:34px;font-weight:500;line-height:1}
.co-event-copy{display:flex;flex-direction:column;align-items:flex-start;gap:12px;min-width:0}
.co-page .co-event h3{font-size:23px}
.co-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.co-filters{display:flex;flex-wrap:wrap;gap:10px}
.co-filter{min-height:44px;padding:10px 19px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.62);color:#1759b0;font:500 13px "IBM Plex Mono",monospace;cursor:pointer}
.co-filter:hover{border-color:#2c7bf2}
.co-filter[aria-pressed="true"]{color:#fff;background:#1759b0;border-color:#1759b0}
.co-resource-top{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%}
.co-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:#eaf2ff;color:#1759b0}
.co-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.co-filters[hidden],.co-page .co-resource[hidden]{display:none}
.co-sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(max-width:900px){
  .co-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .co-news-row{grid-template-columns:110px minmax(0,1fr) 44px;gap:16px}
  .co-news-row p{grid-column:2;grid-row:2}
  .co-news-row .co-link{grid-column:3;grid-row:1 / span 2}
}
@media(max-width:600px){
  .co-page.chapsec .wrap{gap:26px}
  .co-body,.co-event-grid,.co-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  .co-page .card.lg{padding:24px}
  .co-page .card.lg.co-event > .lgc{grid-template-columns:60px minmax(0,1fr);gap:18px}
  .co-date{padding:14px 6px}
  .co-news-row{grid-template-columns:minmax(0,1fr) 44px;gap:12px}
  .co-news-row .co-meta{grid-column:1 / -1}
  .co-news-row h2{grid-column:1;grid-row:2}
  .co-news-row p{grid-column:1;grid-row:3}
  .co-news-row .co-link{grid-column:2;grid-row:2 / span 2}
  .co-cta{gap:12px}
}
/* phones: the Register button now wraps the nav onto a third row, so subpages need more room below it */
@media(max-width:820px){.feature-page,.stub-page{padding-top:196px}}
/* chapter-style Product pages: clear the fixed navbar (the chapter label used to sit underneath it) */
main > .chapter#top{padding-top:104px}
@media(max-width:820px){main > .chapter#top{padding-top:196px}}
/* dev reminder inside the registration form (remove before launch): mirrors the site's dashed "pending" placeholders */
.reg-captcha-ph{display:grid;gap:4px;margin:6px 0 4px;padding:14px 16px;border:1px dashed #8fbbfa;border-radius:12px;background:rgba(143,187,250,.10);color:#dbe9ff;font-size:13.5px;line-height:1.45}
.reg-captcha-ph b{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#a9ceff;font-weight:500}
.reg-form.is-done .reg-captcha-ph{display:none}
/* Recognition: the real award badges from the source doc (kept modest; the quotes carry the section) */
.award-img{display:block;height:190px;width:auto;max-width:100%;border-radius:14px;box-shadow:0 14px 34px -18px rgba(14,42,96,.45)}
.recognition-final .award-img{height:210px}
.award-link:hover .award-img{box-shadow:0 0 0 2px var(--blue),0 14px 34px -18px rgba(14,42,96,.45)}
@media(max-width:560px){.award-img,.recognition-final .award-img{height:auto;width:100%;max-width:340px}}
@media(max-width:560px){.award-img[src*="thecube"]{max-width:230px}}

/* PDF p1 header: Register Now was louder than the logo. Header actions (Register Now + Contact Us) share one compact style. */
.navbar .btn.navcta{font-size:11px;font-weight:600;letter-spacing:.03em;padding:8px 15px;line-height:1.2;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 10px -6px rgba(20,60,140,.5)}
.navbar .btn.navcta + .btn.navcta{margin-left:-14px}
@media(max-width:820px){.navbar .btn.navcta + .btn.navcta{margin-left:0}}

/* PDF p2 footer: the HQ line is now a link like the rest; legal pages (privacy-policy.html / terms-of-use.html) */
.sitefoot .flist a{display:block}
.legal{max-width:78ch;font-size:16px;line-height:1.7;color:var(--ink-2)}
.chapsec .wrap > .legal{margin-top:-30px}
.legal p{margin:0 0 14px}
.legal strong{color:var(--ink);font-weight:600}
.legal ol,.legal ul{margin:0 0 14px;padding-left:1.4em}
.legal li{margin:0 0 8px}
.legal a{color:var(--blue-d);text-underline-offset:3px;overflow-wrap:anywhere}
.legal ol,.legal ul{margin:0 0 4px}
.legal li{margin:0 0 4px}
.legal li > p{margin:0 0 8px}
.legal > ol:has(+ p),.legal > ul:has(+ p){margin-bottom:14px}

/* PDF p4-5 splash (Dave's mockup): title + tagline left, large emblem right; centered statement; plain bold keywords; no hero CTA */
.intro-section .hero .pane{align-items:stretch;text-align:left}
.intro-section .hero .hero-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:24px 40px}
.intro-section .hero .hero-title h1{margin:0 0 18px;text-align:left;color:var(--blue-d)}
.intro-section .hero .hero-title p.lede{margin:0;max-width:20ch;font-size:clamp(20px,2vw,26px);line-height:1.35;font-weight:500;color:var(--ink)}
.intro-section .hero .markslot{justify-self:center}
.intro-section .hero .markslot .mark{width:clamp(220px,26vw,340px);height:clamp(220px,26vw,340px);margin:0}
.intro-section .hero .hero-sub{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:clamp(18px,3vh,36px)}
.intro-section .hero .hero-sub h2{margin:0 0 10px;font-size:clamp(24px,2.8vw,34px);font-weight:700;line-height:1.2;color:var(--blue-d)}
.intro-section .hero .hero-sub p.lede{max-width:46ch;margin:0 auto;font-size:clamp(18px,1.7vw,21px);line-height:1.5;color:var(--ink)}
@media(max-width:760px){
  .intro-section .hero .hero-top{grid-template-columns:1fr;text-align:center;justify-items:center}
  .intro-section .hero .hero-title h1,.intro-section .hero .hero-title p.lede{text-align:center;margin-left:auto;margin-right:auto}
  .intro-section .hero .markslot .mark{width:200px;height:200px}
    }

.intro-section .hero .pane .hero-title h1{font-size:clamp(44px,5.6vw,76px);line-height:1.02;letter-spacing:-.04em;color:var(--blue-d)}
.intro-section .hero .pane .hero-title h1 .nb{color:inherit;white-space:nowrap}
.intro-section .hero .pane .hero-title p.lede{color:var(--ink);max-width:22ch}
.intro-section .hero .pane .hero-sub p.lede{color:var(--ink);max-width:46ch}
@media(max-width:760px){.intro-section .hero .pane .hero-title h1{font-size:clamp(40px,11vw,52px)}.intro-section .hero .hero-top{gap:8px}}

.intro-section .hero .pane .hero-title p.lede{max-width:31ch;font-size:clamp(20px,1.9vw,25px)}
/* PDF p4 "so much wasted space": the first screen is one flex column (window height minus the nav): hero centred in the free space, news strip pinned to its bottom edge, nothing empty below it. */
.intro-section .stage{display:flex;flex-direction:column;min-height:max(560px,100svh)}
.intro-section .stage > .inner{flex:1;display:flex;flex-direction:column;padding-top:96px}
.intro-section .stage > .inner > .wrap{flex:1;display:flex;flex-direction:column;justify-content:center}
.intro-section .stage > .inner > .wrap > .hero{padding:12px 0 28px}
.intro-section .stage > .inner > .newsbar{margin-top:auto}
@media(max-width:760px){.intro-section .stage{min-height:0}.intro-section .stage > .inner{padding-top:150px}}
.intro-section .hero .pane .hero-title p.lede{text-wrap:balance;max-width:28ch}
/* first screen must fit common laptop windows (about 700px of page height): compact vertical rhythm */
.intro-section .stage > .inner{padding-top:88px}
.intro-section .hero .markslot .mark{width:clamp(200px,20vw,290px);height:clamp(200px,20vw,290px)}
.intro-section .hero .pane .hero-title h1{font-size:clamp(42px,5vw,68px);margin-bottom:14px}
.intro-section .hero .pane .hero-title p.lede{font-size:clamp(19px,1.7vw,23px)}
.intro-section .hero .hero-sub{margin-top:clamp(10px,2vh,24px)}
.intro-section .hero .hero-sub h2{font-size:clamp(22px,2.4vw,30px);margin-bottom:8px}
.intro-section .hero .pane .hero-sub p.lede{font-size:clamp(17px,1.5vw,20px)}
.intro-section .stage > .inner > .wrap > .hero{padding:8px 0 20px}
@media(max-width:760px){.intro-section .stage > .inner{padding-top:184px}}
/* Hero height: content height plus padding by default (no 100vh, so large monitors get no dead space).
   Window-height fill applies only to laptop-size windows (<= 1600px wide AND <= 900px tall). */
.intro-section .stage{min-height:0}
.intro-section .stage > .inner > .wrap > .hero{padding:40px 0 48px}
@media (max-width:1600px) and (max-height:900px) and (min-width:761px){
  .intro-section .stage{min-height:max(560px,100svh)}
  .intro-section .stage > .inner > .wrap > .hero{padding:8px 0 20px}
}
.intro-section .stage > .inner > .wrap > .hero{padding:40px 0 78px}
@media (max-width:1600px) and (max-height:900px) and (min-width:761px){.intro-section .stage > .inner > .wrap > .hero{padding:8px 0 20px}}
.intro-section .stage > .inner > .wrap > .hero{padding:8px 0 102px}
@media (max-width:1600px) and (max-height:900px) and (min-width:761px){.intro-section .stage > .inner > .wrap > .hero{padding:8px 0 20px}}

/* Reverted to the approved liquid-glass look: keyword PILLS (capitalized, as originally), and the original heading colours.
   Only the layout (title left / emblem right, compact spacing) follows Dave's note. */
.intro-section .hero .pane .hero-title h1,.intro-section .hero .pane .hero-title h1 .nb{color:var(--ink)}
.intro-section .hero .pane .hero-title p.lede{color:var(--blue-d)}
.intro-section .hero .hero-sub h2{color:var(--ink);font-weight:600}
.intro-section .hero .pane .hero-sub p.lede{color:var(--ink-2)}
.intro-section .hero .hero-sub .micro{margin-top:clamp(14px,2vh,22px);justify-content:center}
.intro-section .hero .hero-sub .micro .mp{font-size:10.5px;padding:7px 15px}

/* PDF p6-7 Intelligent Orchestrator: "What is an AI Harness?" moves into this section as a glass card in the right column
   (replacing the five-item rail, whose items are already listed in paragraph 2); inline links to other pages. */
#intelligent-orchestration .io-def{margin:0;padding:30px 32px;border-radius:24px}
#intelligent-orchestration .io-def:hover{transform:none}
#intelligent-orchestration .io-def h3{margin:0 0 12px;font-size:clamp(22px,2.2vw,28px);font-weight:700;letter-spacing:-.025em;color:var(--blue-d)}
#intelligent-orchestration .io-def p{margin:0;font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--ink)}
.inline-link{color:inherit;text-decoration:underline;text-decoration-color:rgba(23,89,176,.55);text-decoration-thickness:1.5px;text-underline-offset:4px}
.inline-link:hover{color:var(--blue-d);text-decoration-color:var(--blue-d)}
@media (min-width:861px){#intelligent-orchestration .io-def{grid-column:2;grid-row:1 / span 2;align-self:start}}
@media (max-width:860px){#intelligent-orchestration .io-def{margin-top:8px}}

/* Intelligent Orchestrator balance: tight title->text gap, one size for all three paragraphs, a roomier and larger card that stretches to the full height of the text column */
@media (min-width:861px){
  #intelligent-orchestration > .wrap{row-gap:18px;align-items:stretch}
  #intelligent-orchestration .io-def{align-self:stretch}
}
#intelligent-orchestration .letter p,
#intelligent-orchestration .letter p:first-child,
#intelligent-orchestration .letter p:not(:first-child){font-size:18px;line-height:1.65;color:var(--ink-2);margin:0 0 16px}
#intelligent-orchestration .letter p:last-child{margin-bottom:0}
#intelligent-orchestration .io-def{padding:0}
#intelligent-orchestration .io-def > .lgc{display:flex;flex-direction:column;justify-content:center;height:100%;padding:clamp(32px,4vw,52px) clamp(28px,3.6vw,48px)}
#intelligent-orchestration .io-def h3{font-size:clamp(26px,2.6vw,34px);margin-bottom:16px}
#intelligent-orchestration .io-def p{font-size:clamp(19px,1.8vw,22px);line-height:1.6}

/* ===== Home section backgrounds (PDF p5/p7): flat tones, hard edges. Two light tones alternate wherever light sections touch;
   dark sections get one flat dark tone. Splash -> A, then A,B | dark | A,B -> dark footer. ===== */
main:has(#intro-semantic-ai-harness){
  --light-a:#f7faff;   /* very light */
  --light-b:#e3edfc;   /* less light */
  --dark-a:#0b1b38;
}
#intelligent-orchestration{background:var(--light-a)}
#context-as-a-service{background:var(--light-b);border-top:0}
.chapter.dark:has(> #architecture){background:var(--dark-a)}
#use-cases{background:var(--light-a)}
#recognition{background:var(--light-b)}
/* the soft radial glow spots (::before) stay on top of the flat tone: they give each section its depth; only the seams between sections are hard */
/* the footer is the last thing on the page: no leftover bottom padding on <body> (showed as a pale strip under the dark footer) */
body{padding-bottom:0}

/* PDF p8-9 Context-as-a-Service: title, intro + "no manual context engineering" badge, three numbered glass cards, three paragraphs (Dave's replacement copy) */
#context-as-a-service > .wrap.cas2{display:grid;grid-template-columns:minmax(0,1fr);row-gap:32px;align-items:start}
#context-as-a-service .cas2 > .head{grid-column:1;grid-row:auto}
.cas2-top{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center;gap:32px 48px}
.cas2-intro{margin:0;font-size:clamp(20px,2vw,26px);line-height:1.45;font-weight:500;color:var(--blue-d)}
.cas2-no{justify-self:center;position:relative;display:grid;place-items:center;width:clamp(150px,15vw,190px);aspect-ratio:1;border:5px solid #c2494d;border-radius:50%;background:rgba(255,255,255,.72);box-shadow:0 14px 30px -16px rgba(150,40,45,.45)}
.cas2-no span{max-width:8ch;text-align:center;font-size:clamp(16px,1.5vw,19px);font-weight:600;line-height:1.2;color:var(--ink)}
.cas2-no::after{content:"";position:absolute;left:9%;right:9%;top:50%;height:5px;background:#c2494d;border-radius:3px;transform:rotate(-45deg)}
#context-as-a-service .cas2 > .cas-cards{grid-column:1;grid-row:auto;margin:0}
.cas2-paras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 36px;padding-top:12px}
.cas2-paras p{margin:0;font-size:17px;line-height:1.6;color:var(--ink-2)}
@media(max-width:860px){.cas2-top{grid-template-columns:1fr;justify-items:start}.cas2-no{justify-self:start;width:150px}.cas2-paras{grid-template-columns:1fr}}
/* same soft glow-spot recipe as the Orchestrator/Recognition for the two sections that had none, mirrored left/right so neighbours differ */
#context-as-a-service,#use-cases{position:relative;overflow:hidden}
#context-as-a-service::before,#use-cases::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
#context-as-a-service::before{background:radial-gradient(42% 50% at 88% 18%,rgba(44,123,242,.13),rgba(44,123,242,0) 70%),radial-gradient(40% 45% at 10% 85%,rgba(147,189,251,.18),rgba(147,189,251,0) 70%)}
#use-cases::before{background:radial-gradient(45% 50% at 12% 22%,rgba(44,123,242,.12),rgba(44,123,242,0) 70%),radial-gradient(40% 45% at 90% 80%,rgba(147,189,251,.16),rgba(147,189,251,0) 70%)}
#context-as-a-service > .wrap,#use-cases > .wrap{position:relative;z-index:1}
.cas2-no span{max-width:none;width:70%;text-align:center;text-wrap:balance}
.cas2-no::after{height:4px;left:12%;right:12%}
@media(max-width:860px){
  #context-as-a-service > .wrap.cas2{row-gap:28px}
  #context-as-a-service .cas2 > .head{margin-bottom:0}
  .cas2-top{gap:24px}
  .cas2-no{width:140px}
}
.chapsec .wrap.cas2 > .head + .cas2-top{margin-top:0}
@media(max-width:860px){.chapsec .wrap.cas2 > .head + .cas2-top{margin-top:-8px}}
.chapsec .wrap.cas2 > .head + .cas2-top{margin-top:-22px}
/* Context-as-a-Service refinements: black text, tight title->intro gap (intro aligned to the top of its row), slash spans the full diameter so both ends meet the ring */
.cas2-top{align-items:start}
.chapsec .wrap.cas2 > .head + .cas2-top{margin-top:-8px}
.cas2-no{align-self:center}
#context-as-a-service .cas2-intro,#context-as-a-service .cas2-paras p,#context-as-a-service .cas-card p,.cas2-no span{color:#000}
.cas2-no::after{left:-3px;right:-3px;height:5px;top:calc(50% - 2.5px)}

/* paragraphs are one text block (not one per card): lead statement left, the two supporting paragraphs right, hairline above */
.cas2-paras{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px clamp(32px,5vw,72px);align-items:start;padding-top:36px;border-top:1px solid rgba(11,27,56,.14)}
.cas2-paras .cas2-lead{font-size:clamp(20px,2vw,25px);line-height:1.45;font-weight:500;max-width:30ch}
.cas2-more{display:grid;gap:16px;max-width:62ch}
.cas2-more p{margin:0;font-size:17px;line-height:1.65;color:#000}
@media(max-width:860px){.cas2-paras{grid-template-columns:1fr;padding-top:28px}.cas2-paras .cas2-lead{max-width:none}}

/* title + intro share the left column, balanced against a smaller badge on the right */
.cas2-top{align-items:center;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
.cas2-left{display:grid;gap:18px}
.chapsec .wrap.cas2 .cas2-left > .head{margin:0}
.chapsec .wrap.cas2 > .cas2-top{margin-top:0}
.cas2-no{width:clamp(120px,12vw,150px);border-width:4px}
.cas2-no span{font-size:clamp(14px,1.2vw,16px)}
.cas2-no::after{height:4px;top:calc(50% - 2px)}
@media(max-width:860px){.cas2-top{grid-template-columns:1fr}.cas2-no{width:120px}}

/* V3 "refracted refusal": gradient ring + glass slash drawn ABOVE the text (translucent so the words still read through it) */
.cas2-no{border:0;border-radius:0;background:none;box-shadow:none;aspect-ratio:auto;width:clamp(130px,13vw,165px);display:block}
.cas2-no::after{display:none}
.cas2-no svg{display:block;width:100%;height:auto;overflow:visible}
.cas2-no-t{font-family:inherit;font-weight:600;font-size:17px;fill:#000}
@media(max-width:860px){.cas2-no{width:130px}}
.cas2-no-t{font-size:18.5px}
@media(max-width:860px){.cas2-no{width:156px}.cas2-no-t{font-size:19px}}

/* slash draws in once when the badge scrolls into view (JS adds .is-armed, then .is-drawn); click restarts it */
.cas2-no{cursor:pointer;-webkit-tap-highlight-color:transparent}
.cas2-no.is-armed .cas2-slash path{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.cas2-no.is-armed.is-drawn .cas2-slash path{animation:cas2-draw .85s cubic-bezier(.22,.7,.2,1) forwards}
@keyframes cas2-draw{0%{stroke-dashoffset:1;opacity:1}100%{stroke-dashoffset:0;opacity:1}}
@media (prefers-reduced-motion:reduce){.cas2-no.is-armed .cas2-slash path{stroke-dashoffset:0;opacity:1;animation:none !important}}

/* PDF p10 Architecture: (1) the Serverless Gateway is the OUTER RING around Knowledge Plane, Control Plane and Governance (its label is the chip on the ring);
   (2) interface boxes (REST APIs, CLI) are toned down to charcoal so they no longer fight the white module boxes. */
.archmap .am-core.am-ring{position:relative;padding:34px 16px 16px;border:2px solid rgba(94,224,168,.62);border-radius:24px;background:rgba(94,224,168,.045);box-shadow:0 0 38px -8px rgba(94,224,168,.5),inset 0 0 40px -18px rgba(94,224,168,.35)}
.archmap .am-mods{grid-template-columns:repeat(2,minmax(0,1fr))}
.archmap .am-gw{position:absolute;top:-19px;left:22px;display:inline-flex;align-items:center;gap:9px;padding:6px 16px 6px 8px;border-radius:999px;background:#0f2850;border:1.5px solid rgba(94,224,168,.75);color:#dcfff0;cursor:pointer;box-shadow:0 0 22px -4px rgba(94,224,168,.6)}
.archmap .am-gw b{font-size:14px;font-weight:600;letter-spacing:-.005em}
.archmap .am-gw .am-ic{width:26px;height:26px;margin:0;border-radius:50%;background:rgba(94,224,168,.2);color:#9ff7d2}
.archmap .am-gw .am-ic svg{width:15px;height:15px}
.archmap .am-gw:hover,.archmap .am-gw[aria-expanded="true"]{box-shadow:0 0 0 3px rgba(94,224,168,.35),0 0 26px -2px rgba(94,224,168,.8)}
.archmap .am-gw:focus-visible{outline:3px solid #8fbbfa;outline-offset:3px}
#architecture:has(.sub[data-layer="gateway"]:hover,.sub[data-layer="gateway"]:focus-within) .am-ring{border-color:#9ff7d2;box-shadow:0 0 0 2px rgba(159,247,210,.45),0 0 44px -6px rgba(94,224,168,.75)}
.archmap .am-in .am-box{background:#2a3850;color:#e3ecfa;box-shadow:0 4px 0 #18233a;border:1px solid rgba(255,255,255,.08)}
.archmap .am-in .am-box .am-ic{background:rgba(255,255,255,.1);color:#b9cae6}
/* the four rows match Dave's approved screenshot: the layer name is the big heading (no small label + sentence headline) */
#architecture .arch-cards .ar-k{display:block;font-family:inherit;font-size:clamp(26px,2.8vw,36px);font-weight:600;letter-spacing:-.02em;line-height:1.15;text-transform:none;color:#fff}
@media (max-width:900px){#architecture .arch-cards .ar-k{font-size:24px}}
/* "Architecturally, ... four parts:" leads into the diagram, so it is a step larger than the two paragraphs above it */
#architecture > .wrap > p.arch-lead{font-size:clamp(20px,2vw,24px);font-weight:500;line-height:1.4;max-width:none;color:var(--ink)}

/* ===== PDF p11-12 Use Cases carousel: active card enlarged in the centre, neighbours dimmed behind it, seven dots, auto-rotate + arrows ===== */
#use-cases > .wrap{display:grid;grid-template-columns:minmax(0,1fr);row-gap:26px}
#use-cases .head .uc-sub{margin:14px 0 0;font-size:clamp(20px,2.1vw,27px);font-weight:600;letter-spacing:-.015em;line-height:1.3;color:var(--blue-d)}
.chapsec .wrap > .uc-carousel{margin-top:0}
.uc-carousel{position:relative;padding:8px 0 44px;touch-action:pan-y}
.uc-track{position:relative;height:clamp(300px,30vw,340px);margin:0;padding:0;list-style:none;perspective:1200px}
.uc-slide{position:absolute;left:50%;top:0;width:clamp(300px,42%,520px);height:100%;margin:0;padding:clamp(24px,2.6vw,34px);border-radius:26px;background:linear-gradient(168deg,rgba(255,255,255,.92),rgba(255,255,255,.62));border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 22px 46px -26px rgba(14,42,96,.55);overflow:hidden;cursor:pointer;
  transform:translate(calc(-50% + var(--x,0) * 66%),0) scale(var(--s,1));opacity:var(--o,1);z-index:var(--z,1);filter:saturate(var(--sat,1));
  transition:transform .6s cubic-bezier(.22,.7,.2,1),opacity .5s ease,filter .5s ease,box-shadow .5s ease}
.uc-slide .uc-n{display:block;font-size:12px;letter-spacing:.14em;color:#8aa0bf;margin-bottom:10px}
.uc-slide h3{margin:0 0 12px;font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--blue-d)}
.uc-slide p{margin:0;font-size:clamp(16px,1.35vw,18px);line-height:1.6;color:#000}
.uc-slide.is-active{cursor:default;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 30px 56px -26px rgba(14,42,96,.65)}
.uc-slide:not(.is-active) *{pointer-events:none}
.uc-slide:not(.is-active):hover{--o:.75}
/* position by offset from the active slide (set by JS as data-pos) */
.uc-slide[data-pos="0"]{--x:0;--s:1;--o:1;--z:5}
.uc-slide[data-pos="-1"]{--x:-1;--s:.84;--o:.55;--z:3;--sat:.85}
.uc-slide[data-pos="1"]{--x:1;--s:.84;--o:.55;--z:3;--sat:.85}
.uc-slide[data-pos="-2"],.uc-slide[data-pos="2"],.uc-slide[data-pos="-3"],.uc-slide[data-pos="3"]{--o:0;--s:.7;--z:1;pointer-events:none}
.uc-slide[data-pos="-2"]{--x:-1.6}.uc-slide[data-pos="2"]{--x:1.6}.uc-slide[data-pos="-3"]{--x:-1.9}.uc-slide[data-pos="3"]{--x:1.9}
/* before JS runs: show the first slide as a normal card */
.uc-carousel:not(.is-ready) .uc-slide{--x:0;--s:1;--o:0;--z:1}
.uc-carousel:not(.is-ready) .uc-slide:first-child{--o:1;--z:5}
.uc-arrow{position:absolute;top:calc(50% - 22px - 22px);z-index:8;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--blue-d);background:linear-gradient(168deg,rgba(255,255,255,.9),rgba(255,255,255,.55));border:1px solid rgba(255,255,255,.95);box-shadow:0 10px 22px -12px rgba(14,42,96,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:transform .18s ease,box-shadow .18s ease}
.uc-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.uc-arrow:hover{transform:scale(1.07)}
.uc-arrow:focus-visible,.uc-dot:focus-visible,.uc-slide:focus-visible{outline:3px solid var(--blue-d);outline-offset:3px}
.uc-prev{left:0}.uc-next{right:0}
.uc-dots{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:center;gap:12px}
.uc-dot{width:11px;height:11px;padding:0;border-radius:50%;border:0;background:rgba(11,27,56,.25);cursor:pointer;transition:transform .2s ease,background .2s ease;position:relative}
.uc-dot::after{content:"";position:absolute;inset:-10px}   /* 31px touch target */
.uc-dot[aria-current="true"]{background:#000;transform:scale(1.25)}
.uc-runtime{margin:0;max-width:72ch;font-size:clamp(17px,1.5vw,19px);line-height:1.65;color:#000}
@media(max-width:860px){
  .uc-slide{width:76%}
  .uc-slide[data-pos="-1"]{--x:-.9}.uc-slide[data-pos="1"]{--x:.9}
  .uc-track{height:360px}
  .uc-arrow{display:none}
}
@media (prefers-reduced-motion:reduce){.uc-slide{transition:none}}
.uc-slide.is-active{background:linear-gradient(168deg,#ffffff,#f4f8ff)}
.uc-slide:not(.is-active){background:linear-gradient(168deg,rgba(255,255,255,.85),rgba(236,244,255,.7))}
.uc-slide:not(.is-active) p,.uc-slide:not(.is-active) h3,.uc-slide:not(.is-active) .uc-n{opacity:.8}
.uc-slide{display:flex;flex-direction:column;justify-content:center}
/* the runtime paragraph is supporting text: smaller, narrower, softer, tucked to the right so it doesn't compete with the slider */
.uc-runtime{justify-self:end;max-width:50ch;margin:4px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
@media(max-width:860px){.uc-runtime{justify-self:start;max-width:none;font-size:14.5px}}
.uc-runtime{max-width:84ch;width:min(100%,84ch);margin-top:0;font-size:14.5px;line-height:1.6;text-wrap:pretty}
@media(max-width:1100px){.uc-runtime{max-width:none;width:100%}}
@media(max-width:860px){.uc-runtime{justify-self:start}}
/* runtime paragraph: more air above (below the dots), less below (before the section ends) */
#use-cases > .wrap{padding-bottom:36px}
.uc-runtime{margin-top:26px}
.uc-carousel{padding-bottom:44px}
@media(max-width:860px){.uc-runtime{margin-top:20px}#use-cases > .wrap{padding-bottom:32px}}
/* Use Cases title + subtitle centred; runtime paragraph: clearly more space above than below */
#use-cases .head{text-align:center;max-width:none}
#use-cases .head h2{text-align:center}
#use-cases .head h2::before{margin-left:auto;margin-right:auto}
#use-cases .head .uc-sub{text-align:center}
.uc-runtime{margin-top:46px}
#use-cases > .wrap{padding-bottom:14px}
@media(max-width:860px){.uc-runtime{margin-top:34px}#use-cases > .wrap{padding-bottom:12px}}
#use-cases .wrap > .head{display:block;width:100%;max-width:none;text-align:center}
#use-cases .wrap > .head .uc-sub{display:block;margin:14px auto 0;max-width:none;text-align:center}
.chapsec .wrap > .uc-runtime{margin-top:20px}
#use-cases > .wrap{padding-bottom:30px}
@media(max-width:860px){.chapsec .wrap > .uc-runtime{margin-top:14px}#use-cases > .wrap{padding-bottom:26px}}
.chapsec .wrap > .uc-runtime{margin-top:44px}
#use-cases > .wrap{padding-bottom:22px}
@media(max-width:860px){.chapsec .wrap > .uc-runtime{margin-top:34px}#use-cases > .wrap{padding-bottom:20px}}
.chapsec .wrap > .uc-runtime{margin-top:76px}
@media(max-width:860px){.chapsec .wrap > .uc-runtime{margin-top:60px}}
.chapsec .wrap > .uc-runtime{margin-top:54px}
@media(max-width:860px){.chapsec .wrap > .uc-runtime{margin-top:42px}}

/* Recognition, shorter: the two quotes share the full width 50/50; logo strip, then both award groups side by side in one band */
#recognition > .wrap{row-gap:34px;padding-top:56px;padding-bottom:56px}
#recognition .recognition-quotes{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px;width:100%}
#recognition .recognition-card blockquote{margin:20px 0 14px}
#recognition .recognition-card blockquote p{font-size:18px;line-height:1.6}
#recognition .recognition-links{margin-top:0}
.chapsec .wrap > .partner-logos{margin-top:0;justify-content:flex-start;gap:16px 48px}
.rec-awards{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:32px 48px;align-items:start}
.rec-awards .award-heading{margin:0 0 16px;font-size:clamp(18px,1.7vw,22px);line-height:1.3}
.rec-badges{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.rec-award-b .rec-logo{margin-bottom:10px}
.rec-awards .award-img,.rec-award-b .award-img{height:128px;width:auto}
.rec-award-b .award-img{height:128px}
@media(max-width:860px){
  #recognition .recognition-quotes{grid-template-columns:1fr;gap:28px}
  .rec-awards{grid-template-columns:1fr}
  .rec-awards .award-img,.rec-award-b .award-img{height:auto;width:auto;max-width:100%;max-height:150px}
}
#recognition .wrap > .recognition-quotes{max-width:none;width:100%;grid-template-columns:repeat(2,minmax(0,1fr))}
.rec-awards{grid-template-columns:auto auto;justify-content:start;column-gap:clamp(48px,7vw,104px)}
.rec-award-b{max-width:340px}
@media(max-width:860px){.rec-awards{grid-template-columns:1fr}.rec-award-b{max-width:none}}
@media(max-width:860px){
  #recognition .wrap > .recognition-quotes{grid-template-columns:minmax(0,1fr)}
  .rec-badges{flex-direction:column;align-items:flex-start}
  .rec-awards .award-img,.rec-award-b .award-img{height:auto;width:auto;max-width:100%;max-height:120px}
}
/* the dark footer sits flush against the last section on every page (its 96px top margin showed as a thin blank band above it) */
footer.sitefoot{margin-top:0}
@media (max-width:760px){footer.sitefoot{margin-top:0}}
/* first award group: heading on the left (breaks after "AI"), the two badges on the right */
.rec-award-a{display:grid;grid-template-columns:auto auto;align-items:center;justify-content:start;column-gap:clamp(32px,4vw,56px)}
.rec-award-a .award-heading{margin:0;white-space:normal}
@media(max-width:860px){.rec-award-a{grid-template-columns:1fr;row-gap:16px}}
.rec-award-a .rec-badges{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:20px}
.rec-award-a .rec-badges .award-link{flex:none}
.rec-awards{grid-template-columns:auto auto;column-gap:clamp(40px,5vw,72px)}
@media(max-width:860px){.rec-award-a .rec-badges{flex-wrap:wrap}}
.rec-awards{display:flex;flex-wrap:wrap;align-items:center;gap:36px clamp(40px,5vw,72px)}
.rec-award-a{flex:0 0 auto;display:flex;align-items:center;gap:clamp(28px,3.5vw,48px)}
.rec-award-b{flex:0 1 340px;min-width:240px}
@media(max-width:860px){.rec-award-a{flex-direction:column;align-items:flex-start;gap:16px}.rec-award-b{flex-basis:100%}}
/* fit both award groups on one row at desktop widths */
@media(min-width:861px){
  .rec-awards{flex-wrap:nowrap;gap:clamp(32px,4vw,56px);justify-content:space-between}
  .rec-awards .award-heading{font-size:clamp(16px,1.45vw,19px)}
  .rec-award-a{gap:clamp(24px,3vw,40px)}
  .rec-awards .award-img,.rec-award-b .award-img{height:104px}
  .rec-award-b{flex:0 1 300px;min-width:0}
  .rec-badges{gap:16px}
}
/* Microsoft + "Telco-grade GenAI..." is its own row below, laid out like the row above: text on the left, badge on the right (same column start) */
@media(min-width:861px){
  .rec-awards{display:grid;grid-template-columns:minmax(0,1fr);row-gap:36px;justify-content:start}
  .rec-award-a,.rec-award-b{display:grid;grid-template-columns:minmax(320px,380px) auto;column-gap:clamp(24px,3vw,40px);align-items:center;flex:none;max-width:none;min-width:0}
  .rec-award-a .award-heading{grid-column:1}
  .rec-award-a .rec-badges{grid-column:2}
  .rec-award-b .rec-logo{grid-column:1;grid-row:1;align-self:end;margin:0 0 10px}
  .rec-award-b .award-heading{grid-column:1;grid-row:2;align-self:start;margin:0}
  .rec-award-b > .award-link{grid-column:2;grid-row:1 / span 2}
  .rec-award-b .award-heading{max-width:30ch}
}
@media(min-width:861px){
  .rec-award-b{display:block}
  .rec-award-b .recognition-final{display:grid;grid-template-columns:minmax(320px,380px) auto;column-gap:clamp(24px,3vw,40px);align-items:center;margin:0;max-width:none}
  .rec-award-b .recognition-final .rec-logo{grid-column:1;grid-row:1;align-self:end;margin:0 0 10px}
  .rec-award-b .recognition-final .award-heading{grid-column:1;grid-row:2;align-self:start;margin:0}
  .rec-award-b .recognition-final > .award-link{grid-column:2;grid-row:1 / span 2}
}
@media(min-width:861px){
  .rec-awards .award-img,.rec-award-b .award-img{height:130px}
  .rec-award-a .award-heading,.rec-award-b .recognition-final .award-heading{align-self:center}
}
@media(max-width:860px){.rec-awards .award-img,.rec-award-b .award-img{max-height:150px}}

/* Award lightbox: click a badge to enlarge it; the X, a click outside the image, or Esc closes it */
.award-link{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(16px,4vw,48px);background:rgba(8,20,43,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .22s ease}
.lb[hidden]{display:none}
.lb.is-open{opacity:1}
.lb-fig{position:relative;margin:0;max-width:min(92vw,1100px);max-height:88vh;display:grid;place-items:center;transform:scale(.96);transition:transform .25s cubic-bezier(.22,.7,.2,1)}
.lb.is-open .lb-fig{transform:scale(1)}
.lb-img{display:block;max-width:100%;max-height:88vh;width:auto;height:auto;border-radius:18px;box-shadow:0 30px 70px -20px rgba(0,0,0,.7);background:#fff}
.lb-x{position:absolute;top:-16px;right:-16px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#0b1b38;background:linear-gradient(168deg,rgba(255,255,255,.96),rgba(255,255,255,.75));border:1px solid rgba(255,255,255,.95);box-shadow:0 10px 24px -10px rgba(0,0,0,.6)}
.lb-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.lb-x:hover{transform:scale(1.07)}
.lb-x:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-width:560px){.lb-x{top:-14px;right:-6px}}
@media (prefers-reduced-motion:reduce){.lb,.lb-fig{transition:none}}
/* Use Cases runtime paragraph: left-aligned with the rest of the section content */
.chapsec .wrap > .uc-runtime{justify-self:start;text-align:left}

/* ===== Header (Dave's new nav): four tabs; "Subscribe" and "Contact Us" are subtle text links above the bar (fade out once the page scrolls) ===== */
.navbar .wrap{position:relative}
.navbar .navutil{position:absolute;top:6px;right:34px;z-index:2;display:flex;gap:26px;align-items:center;transition:opacity .2s ease,transform .2s ease}
.navbar .navutil a{font-size:14px;font-weight:500;letter-spacing:-.005em;color:#2c6fd1;text-decoration:none;padding:2px 0;border-bottom:1px solid transparent}
.navbar .navutil a:hover{color:#1759b0;border-bottom-color:currentColor}
.navbar .navutil a:focus-visible{outline:2px solid var(--blue-d);outline-offset:3px;border-radius:3px}
@media (min-width:821px){
  .navbar nav{margin-top:34px}
  .navbar.scrolled nav{margin-top:10px}
  .navbar.scrolled .navutil{opacity:0;pointer-events:none;transform:translateY(-6px)}
  .stub-page,.feature-page{padding-top:134px}
  main > .chapter#top{padding-top:118px}
  .intro-section .stage > .inner{padding-top:98px}
}
@media (max-width:820px){
  .navbar .navutil{right:20px;top:4px;gap:20px}
  .navbar .navutil a{font-size:13px}
  .navbar nav{margin-top:30px}
  .navbar.scrolled nav{margin-top:8px}
  .navbar.scrolled .navutil{opacity:0;pointer-events:none}
}
/* About Us and the other text pages: no viewport-height floor (it left dead space on tall screens) */
.stub-page{min-height:0}
/* the nav's top margin collapses through .wrap, so the utility links sit above .wrap (negative top) and need their own pointer events */
.navbar .navutil{top:-28px;pointer-events:auto}
@media (max-width:820px){.navbar .navutil{top:-26px}}
@media(max-width:820px){
  .feature-page,.stub-page{padding-top:146px}
  main > .chapter#top{padding-top:140px}
  .intro-section .stage > .inner{padding-top:150px}
}
main > #smarter-faster:first-child{padding-top:130px}
@media(max-width:820px){main > #smarter-faster:first-child{padding-top:150px}}

/* Subscribe / Contact Us: hidden while scrolling down, back as soon as you scroll up (JS sets .util-on) */
@media (min-width:821px){
  .navbar.scrolled.util-on nav{margin-top:34px}
  .navbar.scrolled.util-on .navutil{opacity:1;pointer-events:auto;transform:none}
}
@media (max-width:820px){
  .navbar.scrolled.util-on nav{margin-top:30px}
  .navbar.scrolled.util-on .navutil{opacity:1;pointer-events:auto;transform:none}
}
.navbar nav{transition:margin-top .22s ease,box-shadow .22s ease}
/* when it reappears mid-page the links float over any section (including the dark Architecture one), so they get a light glass chip */
.navbar .navutil{padding:3px 6px;border-radius:999px;transition:opacity .2s ease,transform .2s ease,background .2s ease,box-shadow .2s ease}
.navbar.scrolled .navutil{padding:3px 16px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 8px 20px -12px rgba(14,42,96,.5)}
@media (min-width:821px){.navbar .navutil{right:30px}.navbar.scrolled .navutil{right:34px}}
/* FIERCE and Leading Lights share one column: same width (height follows each image's own ratio); theCUBE badge matches FIERCE's height */
@media(min-width:861px){
  .rec-awards .award-img[src*="fierce"],.rec-awards .award-img[src*="leading-lights"]{width:300px;height:auto;max-width:none}
  .rec-awards .award-img[src*="thecube"]{height:auto;width:auto;max-height:152px}
}
@media(max-width:860px){
  .rec-awards .award-img[src*="fierce"],.rec-awards .award-img[src*="leading-lights"]{width:100%;max-width:300px;height:auto;max-height:none}
}

/* PDF p3-4 "Why EnterpriseWeb": centred heading + subtitle over a narrower, content-sized glass carousel (no half-empty frame) */
#smarter-faster .why-head{text-align:center;max-width:none}
#smarter-faster .why-head h2{text-align:center;font-size:clamp(40px,5vw,64px)}
#smarter-faster .why-sub{margin:12px 0 0;font-size:clamp(20px,2.1vw,27px);font-weight:600;letter-spacing:-.015em;line-height:1.3;color:var(--blue-d)}
#smarter-faster .wrap{row-gap:26px}
#smarter-faster .pillar-slider{width:100%;max-width:880px;margin:0 auto}
#smarter-faster .pillar-viewport{margin:0 64px}
#smarter-faster .pillar-slide{padding:30px 8px 18px;gap:14px}
#smarter-faster .pillar-slide>.uck{margin-bottom:0;display:flex;align-items:center;gap:10px}
.why-n{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#eaf2ff;color:#1759b0;font-weight:600;font-size:12px}
#smarter-faster .pillar-slide .uct{font-size:clamp(24px,2.6vw,32px);color:var(--blue-d);margin:0}
#smarter-faster .pillar-slide .ucd{margin:0;max-width:none;font-size:clamp(16px,1.4vw,18px);line-height:1.6;color:#000}
#smarter-faster .pillar-slide .why-so{font-style:italic;color:var(--blue-d)}
@media(max-width:700px){#smarter-faster .pillar-viewport{margin:0 14px}#smarter-faster .pillar-slide{padding:22px 4px 14px}}
#smarter-faster .wrap > .why-head{display:block;width:100%;text-align:center}
#smarter-faster .why-head .why-sub{display:block;margin:12px auto 0;text-align:center}

/* ===== PDF p5-6 Rewriting Tokenomics: heading + "Less is More!", paragraph with conventional-wisdom callout, flow diagram, four bullets (dark liquid-glass panel kept) ===== */
#tokenomics > .wrap{display:grid;grid-template-columns:minmax(0,1fr);row-gap:40px}
.tok2-head{text-align:center}
.tok2-head h2{margin:0;font-size:clamp(38px,4.8vw,60px);line-height:1.05;color:#fff}
.tok2-head h2::before{display:none}
.tok2-sub{margin:12px 0 0;font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:-.015em;color:#8fbbfa}
.tok2-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px clamp(28px,4vw,56px);align-items:center}
.tok2-lead{margin:0;font-size:clamp(18px,1.7vw,21px);line-height:1.6;color:#f4f8ff}
.tok2-callout{padding:26px 30px;border-radius:24px;background:linear-gradient(168deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 18px 40px -24px rgba(0,0,0,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.tok2-callout p{margin:0;font-size:clamp(17px,1.5vw,19px);line-height:1.55;font-style:italic;color:#ffd27a}
.tok2-callout .tok2-wrong{margin-top:12px;color:#fff;font-weight:600}
.tok2-diagram{margin:0;display:grid;grid-template-columns:minmax(150px,1fr) minmax(130px,.9fr) minmax(190px,1.15fr) minmax(130px,.9fr) minmax(150px,1fr);align-items:center;gap:0 clamp(8px,1.6vw,20px);padding:34px clamp(18px,3vw,40px);border-radius:26px;background:rgba(255,255,255,.04);border:1px solid rgba(143,187,250,.28)}
.tok2-node{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:118px;padding:16px 14px;text-align:center;border-radius:20px;background:linear-gradient(168deg,rgba(255,255,255,.16),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.tok2-node b{font-size:clamp(17px,1.5vw,20px);font-weight:700;color:#fff;line-height:1.2}
.tok2-node span{font-size:14px;color:#c6d5eb}
.tok2-core{background:linear-gradient(168deg,rgba(143,187,250,.5),rgba(44,123,242,.34));border-color:rgba(255,255,255,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 40px -10px rgba(94,224,168,.45)}
.tok2-core span{color:#eaf3ff}
.tok2-link{display:grid;gap:30px}
.tok2-lane{display:flex;flex-direction:column;align-items:center;gap:6px}
.tok2-lane span{font-size:13.5px;font-weight:500;line-height:1.25;text-align:center;color:#dbe7fb}
.tok2-arrow{position:relative;display:block;width:100%;height:2px;background:repeating-linear-gradient(90deg,#8fbbfa 0 6px,transparent 6px 10px)}
.tok2-arrow::after{content:"";position:absolute;right:-1px;top:-4px;width:9px;height:9px;border-top:2px solid #8fbbfa;border-right:2px solid #8fbbfa;transform:rotate(45deg)}
.tok2-lane.back .tok2-arrow::after{right:auto;left:-1px;transform:rotate(-135deg)}
.tok2-lane.back{flex-direction:column-reverse}
.tok2-points{margin:0;padding:0;list-style:none;display:grid;gap:16px;max-width:980px}
.tok2-points li{position:relative;padding-left:28px;font-size:clamp(16px,1.4vw,18px);line-height:1.6;color:#e6efff}
.tok2-points li::before{content:"";position:absolute;left:4px;top:.62em;width:9px;height:9px;border-radius:50%;background:#8fbbfa;box-shadow:0 0 12px rgba(143,187,250,.8)}
@media(max-width:860px){
  .tok2-top{grid-template-columns:1fr}
  .tok2-diagram{grid-template-columns:1fr;gap:10px;padding:24px 18px}
  .tok2-node{min-height:0}
  .tok2-link{grid-template-columns:1fr 1fr;gap:12px;padding:6px 0}
  .tok2-lane{flex-direction:row;gap:10px;justify-content:center}
  .tok2-lane.back{flex-direction:row}
  .tok2-lane span{max-width:9ch}
  .tok2-arrow{width:2px;height:46px;background:repeating-linear-gradient(180deg,#8fbbfa 0 6px,transparent 6px 10px)}
  .tok2-arrow::after{right:auto;left:-4px;top:auto;bottom:-1px;transform:rotate(135deg)}
  .tok2-lane.back .tok2-arrow::after{left:-4px;top:-1px;bottom:auto;transform:rotate(-45deg)}
}
@media(max-width:860px){
  .tok2-link{grid-template-columns:1fr 1fr;gap:10px;padding:2px 0}
  .tok2-lane,.tok2-lane.back{flex-direction:column;gap:6px;justify-content:flex-start}
  .tok2-lane span{max-width:none;font-size:13px;white-space:nowrap}
  .tok2-arrow{height:38px}
}
@media(max-width:360px){.tok2-lane span{white-space:normal;font-size:12.5px}}

/* ===== PDF p8-9 Orchestrating Complex Interactions: heading + runtime paragraph, "The Semantic AI Harness:" subhead, seven glass cards (3 / 3 / 1) ===== */
#dynamically-orchestrating > .wrap.doi2{display:grid;grid-template-columns:minmax(0,1fr);row-gap:34px}
.doi2-top{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:24px clamp(32px,5vw,72px);align-items:start}
#dynamically-orchestrating .doi2-top .head{margin:0;padding:0}
#dynamically-orchestrating .doi2-top .head h2{max-width:14ch;font-size:clamp(34px,4.2vw,54px);line-height:1.08;margin:0}
.doi2-intro{margin:0;padding-top:8px;font-size:clamp(17px,1.5vw,19px);line-height:1.65;color:var(--ink-2)}
.doi2-sub{margin:0;text-align:center;font-size:clamp(24px,2.6vw,32px);font-weight:700;letter-spacing:-.02em;color:var(--blue-d)}
.doi2-grid{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.doi2-card{grid-column:span 2;display:flex;align-items:center;justify-content:center;min-height:112px;padding:22px 24px;text-align:center;font-size:clamp(15.5px,1.3vw,17px);line-height:1.5;font-weight:500;color:var(--ink);border-radius:22px;background:linear-gradient(168deg,rgba(255,255,255,.92),rgba(255,255,255,.62));border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 16px 34px -22px rgba(14,42,96,.5)}
.doi2-card:nth-child(7){grid-column:3 / span 2}
@media(max-width:1000px){.doi2-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.doi2-card,.doi2-card:nth-child(7){grid-column:span 1}.doi2-card:nth-child(7){grid-column:1 / -1}}
@media(max-width:860px){.doi2-top{grid-template-columns:1fr}#dynamically-orchestrating .doi2-top .head h2{max-width:none}.doi2-sub{text-align:left}}
@media(max-width:560px){.doi2-grid{grid-template-columns:1fr}.doi2-card,.doi2-card:nth-child(7){grid-column:auto;min-height:0}}

/* ===== PDF p10-11 Deep Tech Deep Dive: two large linked glass cards (category, blue title, italic summary) ===== */
#deeptech > .wrap{display:grid;grid-template-columns:minmax(0,1fr);row-gap:34px}
.dd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.dd-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:clamp(28px,3vw,40px);border-radius:28px;color:inherit;text-decoration:none;background:linear-gradient(168deg,rgba(255,255,255,.94),rgba(255,255,255,.66));border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 24px 48px -28px rgba(14,42,96,.55);transition:transform .22s ease,box-shadow .22s ease}
.dd-card:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 30px 56px -26px rgba(14,42,96,.65)}
.dd-card:focus-visible{outline:3px solid var(--blue-d);outline-offset:4px}
.dd-k{font-family:"IBM Plex Mono",monospace;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#4a5b78}
.dd-card h3{margin:0;font-size:clamp(26px,2.6vw,34px);line-height:1.2;font-weight:700;letter-spacing:-.025em;color:var(--blue-d)}
.dd-card p{margin:0;font-size:clamp(17px,1.5vw,19px);line-height:1.65;font-style:italic;color:var(--ink)}
.dd-more{display:inline-flex;align-items:center;gap:10px;margin-top:auto;padding-top:10px;font-weight:600;font-size:15px;color:#1759b0}
.dd-more svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.dd-card:hover .dd-more svg{transform:translateX(5px)}
@media(max-width:860px){.dd-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.dd-card,.dd-more svg{transition:none}.dd-card:hover{transform:none}}
#deeptech .wrap > .head + .dd-grid{margin-top:0}
#deeptech .wrap > .head{margin:0}

/* ===== How it Works tab backgrounds: flat tones, hard edges. Light sections that touch alternate A / B (dark sections keep their own panels). Order: Why (A) | Tokenomics (dark) | Hybrid (dark, a different navy) | Orchestrating (A) | Deep Tech (B) ===== */
main:has(#smarter-faster){--light-a:#f7faff;--light-b:#e3edfc}
#smarter-faster{background:var(--light-a)}
#dynamically-orchestrating{background:var(--light-a);position:relative;overflow:hidden}
#deeptech{background:var(--light-b);position:relative;overflow:hidden}
#dynamically-orchestrating::before,#deeptech::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
#dynamically-orchestrating::before{background:radial-gradient(42% 50% at 10% 14%,rgba(44,123,242,.12),rgba(44,123,242,0) 70%),radial-gradient(40% 45% at 92% 88%,rgba(147,189,251,.17),rgba(147,189,251,0) 70%)}
#deeptech::before{background:radial-gradient(45% 50% at 88% 20%,rgba(44,123,242,.12),rgba(44,123,242,0) 70%),radial-gradient(40% 45% at 8% 85%,rgba(147,189,251,.16),rgba(147,189,251,0) 70%)}
#dynamically-orchestrating > .wrap,#deeptech > .wrap{position:relative;z-index:1}
/* callout uses the dark panel's own palette (soft white text, blue accent) instead of the one-off gold from the mockup */
.tok2-callout p{font-style:normal;font-weight:500;color:#f4f8ff}
.tok2-callout .tok2-wrong{color:#8fbbfa;font-weight:700}

/* ===== Tokenomics diagram, alive: icons, flowing dashes + travelling packets, breathing core, hover/focus tracing (CSS only) ===== */
.tok2-hint{margin:0 0 -22px;text-align:right;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#7f9bc4}
.tok2-hint::before{content:"";display:inline-block;width:6px;height:6px;margin-right:8px;border-radius:50%;background:#5ee0a8;box-shadow:0 0 8px #5ee0a8;vertical-align:middle;animation:tok2-blink 1.6s ease-in-out infinite}
@keyframes tok2-blink{50%{opacity:.35}}
.tok2-node{cursor:pointer;transition:transform .2s ease,box-shadow .25s ease,border-color .25s ease,opacity .25s ease}
.tok2-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(143,187,250,.18);color:#a9ceff;margin-bottom:2px;transition:background .25s ease,color .25s ease,transform .25s ease}
.tok2-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.n-agents .tok2-ic{background:rgba(255,154,99,.16);color:#ffb487}
.n-models .tok2-ic{background:rgba(255,154,99,.16);color:#ffb487}
.tok2-core .tok2-ic{background:rgba(255,255,255,.2);color:#fff}
.tok2-node:hover,.tok2-node:focus-visible{outline:0;transform:translateY(-3px);border-color:#8fbbfa;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 0 2px rgba(143,187,250,.55),0 18px 34px -14px rgba(0,0,0,.6)}
.tok2-node:hover .tok2-ic,.tok2-node:focus-visible .tok2-ic{transform:scale(1.1)}
.tok2-core{animation:tok2-breathe 3.2s ease-in-out infinite}
@keyframes tok2-breathe{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 34px -10px rgba(94,224,168,.4)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 0 52px -6px rgba(94,224,168,.7)}}
.tok2-lane{cursor:pointer;transition:opacity .25s ease,filter .25s ease}
.tok2-lane:focus-visible{outline:2px solid #8fbbfa;outline-offset:6px;border-radius:8px}
.tok2-lane span{transition:color .2s ease}
/* flow: dashes move in the arrow's direction, a bright packet rides along it */
.tok2-arrow{animation:tok2-dash 1.1s linear infinite;background-size:10px 2px}
.tok2-lane.back .tok2-arrow{animation-direction:reverse}
@keyframes tok2-dash{from{background-position:0 0}to{background-position:10px 0}}
.tok2-arrow::before{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:#9ff7d2;box-shadow:0 0 12px 3px rgba(94,224,168,.8);animation:tok2-pkt 2.4s cubic-bezier(.4,0,.6,1) infinite}
.tok2-lane.back .tok2-arrow::before{left:auto;right:0;animation-name:tok2-pkt-back}
.tok2-link .tok2-lane:nth-child(2) .tok2-arrow::before{animation-delay:1.2s}
@keyframes tok2-pkt{0%{transform:translateX(0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(calc(var(--tok2-w,120px) - 8px));opacity:0}}
@keyframes tok2-pkt-back{0%{transform:translateX(0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(calc((var(--tok2-w,120px) - 8px) * -1));opacity:0}}
/* tracing: hover/focus a node or lane and the connected path lights while the rest dims */
.tok2-diagram:has(.n-agents:hover,.n-agents:focus-visible) .l-right,
.tok2-diagram:has(.n-models:hover,.n-models:focus-visible) .l-left,
.tok2-diagram:has(.l-left:hover,.l-left:focus-within) .l-right,
.tok2-diagram:has(.l-right:hover,.l-right:focus-within) .l-left{opacity:.28}
.tok2-diagram:has(.l-left:hover,.l-left:focus-within) .n-models,
.tok2-diagram:has(.l-right:hover,.l-right:focus-within) .n-agents,
.tok2-diagram:has(.n-agents:hover,.n-agents:focus-visible) .n-models,
.tok2-diagram:has(.n-models:hover,.n-models:focus-visible) .n-agents{opacity:.45}
.tok2-diagram:has(.n-agents:hover,.n-agents:focus-visible) .l-left .tok2-arrow,
.tok2-diagram:has(.n-models:hover,.n-models:focus-visible) .l-right .tok2-arrow,
.tok2-diagram:has(.n-core:hover,.n-core:focus-visible) .tok2-arrow,
.tok2-lane:hover .tok2-arrow,.tok2-lane:focus-visible .tok2-arrow{animation-duration:.55s;filter:drop-shadow(0 0 6px #9ff7d2)}
.tok2-diagram:has(.n-agents:hover,.n-agents:focus-visible) .l-left span,
.tok2-diagram:has(.n-models:hover,.n-models:focus-visible) .l-right span,
.tok2-diagram:has(.n-core:hover,.n-core:focus-visible) .tok2-lane span,
.tok2-lane:hover span,.tok2-lane:focus-visible span{color:#fff}
@media(max-width:860px){
  .tok2-hint{text-align:left;margin-bottom:-26px}
  .tok2-arrow{background-size:2px 10px;animation-name:tok2-dash-v}
  @keyframes tok2-dash-v{from{background-position:0 0}to{background-position:0 10px}}
  .tok2-arrow::before{top:0;left:-3px;animation-name:tok2-pkt-v}
  .tok2-lane.back .tok2-arrow::before{top:auto;bottom:0;left:-3px;right:auto;animation-name:tok2-pkt-v-back}
  @keyframes tok2-pkt-v{0%{transform:translateY(0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(30px);opacity:0}}
  @keyframes tok2-pkt-v-back{0%{transform:translateY(0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(-30px);opacity:0}}
}
@media (prefers-reduced-motion:reduce){.tok2-core,.tok2-arrow,.tok2-arrow::before,.tok2-hint::before{animation:none}.tok2-arrow::before{display:none}.tok2-node:hover,.tok2-node:focus-visible{transform:none}}

/* ---- Client edits, round of 5 Oct (v8 home-tab email) ---- */
/* Semantic AI Harness splash: centre "AI Harness" under "The Semantic", and the lede under both. */
.intro-section .hero .hero-title{display:flex;flex-direction:column;align-items:center;text-align:center}
.intro-section .hero .pane .hero-title h1{text-align:center;margin-left:auto;margin-right:auto}
.intro-section .hero .pane .hero-title p.lede{text-align:center;margin-left:auto;margin-right:auto}
/* Footer subject labels in the accent blue so they stand out on the navy footer. */
.fgrid .k{color:var(--blue-l)}
/* Subscribe / Contact Us: nudged left so the last letter of "Contact Us" lines up with the last letter of "Company".
   Offsets = previous right offset + measured gap between the two right edges (36px desktop, 28px narrow). */
@media (min-width:821px){.navbar .navutil{right:66px}.navbar.scrolled .navutil{right:56px}}
@media (max-width:820px){.navbar .navutil{right:48px}}
/* Use Cases: the paragraph under the carousel was removed, so the section now ends with the same bottom padding as its sibling sections (64px, 44px on phones). */
#use-cases > .wrap{padding-bottom:64px}
@media(max-width:640px){#use-cases > .wrap{padding-bottom:44px}}

/* Home hero, client-approved concept 2 ("centred stack"): one centre line. Compact mark on top, one-line headline, tagline, a short blue rule, then the statement and benefit pills. Supersedes the title-left / mark-right split above. */
.intro-section .hero .pane{align-items:center;text-align:center}
.intro-section .hero .hero-top{display:flex;flex-direction:column;align-items:center;gap:0}
.intro-section .hero .markslot{justify-self:auto}
.intro-section .hero .markslot .mark{width:clamp(120px,11vw,150px);height:clamp(120px,11vw,150px);margin:0 0 20px}
.intro-section .hero .hero-title h1,.intro-section .hero .pane .hero-title h1{font-size:clamp(40px,5.6vw,80px);margin:0 0 14px;text-align:center}
.intro-section .hero .pane .hero-title p.lede{max-width:none;margin:0 auto;font-size:clamp(19px,1.9vw,25px);text-align:center}
.intro-section .hero .hero-rule{width:56px;height:3px;border-radius:3px;background:var(--blue);margin:26px auto 22px}
.intro-section .hero .hero-sub{margin-top:0}
.intro-section .hero .hero-sub h2{font-size:clamp(20px,1.9vw,24px);margin:0 0 8px}
.intro-section .hero .pane .hero-sub p.lede{max-width:52ch;font-size:clamp(16px,1.35vw,18px)}
.intro-section .hero .hero-sub .micro{margin-top:26px}
@media(max-width:760px){
  .intro-section .hero .markslot .mark{width:110px;height:110px;margin-bottom:16px}
  .intro-section .hero .hero-title h1,.intro-section .hero .pane .hero-title h1{font-size:clamp(38px,11vw,52px)}
  .intro-section .hero .hero-top{gap:0}
}