/* Dring website design system, light. Brand: navy #011838, sky #62A4FF. */
:root{
  color-scheme:light;
  --bg:#FFFFFF;
  --bg-soft:#F6F8FD;
  --tint:#EBF3FF;
  --tint-2:#DCE9FF;
  --ink:#011838;
  --ink-2:#2B3A5C;
  --muted:#66738F;
  --line:#E4EAF5;
  --line-strong:#C9D5EA;
  --sky:#62A4FF;
  --sky-text:#2F6FD1;
  --sky-deep:#1B4FA8;
  --navy:#011838;
  --navy-2:#0A2450;
  --green:#16A34A;
  --glow:rgba(98,164,255,.35);
  --display:'Bricolage Grotesque','Manrope','Helvetica Neue',Arial,sans-serif;
  --body:'Manrope','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:16px;
  --r-sm:10px;
  --max:1200px;
  --shadow:0 1px 2px rgba(1,24,56,.04),0 24px 60px -30px rgba(1,24,56,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@view-transition{navigation:auto}
body{margin:0;background:var(--bg);color:var(--ink-2);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
i{font-style:normal}
h1,h2,h3,h4{font-family:var(--display);margin:0;color:var(--ink);text-wrap:balance;letter-spacing:-.02em;overflow-wrap:anywhere}
p{margin:0;overflow-wrap:anywhere}
ul,ol{margin:0;padding:0}
svg{display:block}
:focus-visible{outline:2px solid var(--sky-text);outline-offset:3px;border-radius:6px}
::selection{background:var(--tint-2);color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- layout ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;width:100%}
.wrap-narrow{max-width:var(--max);margin:0 auto;padding:0 28px;width:100%}
/* CPO 28 Sep 2026: every section uses the site's left AND right edge. A text section is not a narrow column with an empty right side:
   on desktop the eyebrow sits on top, the heading on the left, the text on the right; card grids, tables and figures take the full width. */
.wrap-narrow>*+*{margin-top:18px}
.wrap-narrow.prose>*{max-width:764px}
@media (min-width:1001px){
  .wrap-narrow:has(>.eyebrow+.h2){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:72px;align-items:start}
  .wrap-narrow:has(>.eyebrow+.h2)>*{grid-column:2;margin:0 0 18px;max-width:none}
  .wrap-narrow:has(>.eyebrow+.h2)>.eyebrow{grid-column:1/-1;grid-row:1;margin:0 0 22px}
  .wrap-narrow:has(>.eyebrow+.h2)>.h2{grid-column:1;grid-row:2/span 12;margin:0;max-width:14ch;position:sticky;top:112px}
  .wrap-narrow:has(>.eyebrow+.h2)>:is(.grid,.cards,.rail,.table-wrap,figure,.stats,.kpi){grid-column:1/-1;margin-top:30px}
  .wrap-narrow:has(>.eyebrow+.h2)>:last-child{margin-bottom:0}
  /* long reads (blog, legal): headings in the left column next to their first paragraph, text on the right */
  .wrap-narrow.prose:not(:has(>.eyebrow+.h2)){display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:72px;align-items:start}
  .wrap-narrow.prose:not(:has(>.eyebrow+.h2))>*{grid-column:2;max-width:none}
  .wrap-narrow.prose:not(:has(>.eyebrow+.h2))>h2{grid-column:1;margin:40px 0 0;max-width:18ch}
  .wrap-narrow.prose:not(:has(>.eyebrow+.h2))>h2+*{margin-top:44px}
  .wrap-narrow.prose:not(:has(>.eyebrow+.h2))>:is(h1,h1+p){grid-column:1/-1}
  .wrap-narrow.prose:not(:has(>.eyebrow+.h2))>h2:first-child,.wrap-narrow.prose:not(:has(>.eyebrow+.h2))>h2:first-child+*{margin-top:0}
}
.sec{padding:112px 0;position:relative}
.sec-tint{background:var(--bg-soft)}
.sec-head{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:end;margin-bottom:56px}
.sec-head .h2{margin-top:18px}
.actions{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
@media (max-width:860px){.sec-head{grid-template-columns:1fr;gap:18px;margin-bottom:40px}.sec{padding:80px 0}.wrap,.wrap-narrow{padding:0 20px}}

/* ---------- type ---------- */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-text);display:inline-flex;align-items:center;gap:10px;font-weight:500}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sky-text);flex:none;box-shadow:0 0 0 3px var(--tint)}
.h1{font-size:clamp(38px,6vw,76px);line-height:1;font-weight:600;letter-spacing:-.035em;font-variation-settings:"opsz" 96;overflow-wrap:normal;hyphens:manual}
.h2{font-size:clamp(30px,4.2vw,54px);line-height:1.04;font-weight:600;max-width:20ch;font-variation-settings:"opsz" 96}
.h3{font-size:clamp(22px,2.4vw,30px);line-height:1.15;font-weight:600}
h1 em,h2 em,h3 em,.h1 em,.h2 em{font-style:normal;color:var(--sky-text)}
.lede{color:var(--ink-2);font-size:18px;max-width:56ch;line-height:1.6}
.note{background:var(--tint);border:1px solid var(--tint-2);border-radius:var(--r-sm);padding:14px 18px;font-size:14.5px;color:var(--ink-2);margin:20px 0}
.note strong{color:var(--ink)}
.factory-care-note{max-width:980px;margin-left:auto;margin-right:auto}
.quote{margin:0;padding:32px 36px;border-left:3px solid var(--sky);background:var(--bg-soft);border-radius:0 var(--r) var(--r) 0}
.quote p{font-family:var(--display);font-size:clamp(22px,2.6vw,32px);line-height:1.25;color:var(--ink);font-weight:500;letter-spacing:-.02em}
.quote footer{margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.prose{font-size:16.5px;line-height:1.7}
.prose h1{font-size:clamp(34px,4.5vw,52px);line-height:1.05;margin-bottom:12px}
.prose h2{font-size:26px;margin:44px 0 12px;line-height:1.2}
.prose h3{font-size:19px;margin:28px 0 8px}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 16px 22px}
.prose li{margin:4px 0}
.prose li::marker{color:var(--sky-text)}
.prose a{color:var(--sky-text);text-decoration:underline;text-underline-offset:3px}
.prose .meta-line{font-family:var(--mono);font-size:13px;color:var(--muted);margin-bottom:28px}
.prose hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.prose table{font-size:14.5px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:999px;font-weight:600;font-size:15px;line-height:1.2;transition:transform .2s ease,box-shadow .25s ease,background .2s ease,border-color .2s;white-space:nowrap;position:relative;overflow:hidden;min-height:44px}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s ease}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-primary:hover{box-shadow:0 14px 34px -14px rgba(1,24,56,.55)}
.btn-ghost{border:1px solid var(--line-strong);color:var(--ink);background:#fff}
.btn-ghost:hover{border-color:var(--ink);background:var(--bg-soft)}
.btn-sky{background:var(--sky);color:var(--navy)}
.btn-sky:hover{box-shadow:0 14px 40px -14px var(--glow)}
.btn svg{width:16px;height:16px;flex:none}
.link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--sky-text)}
.link-arrow::after{content:"";width:14px;height:14px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .25s}
.link-arrow:hover::after{transform:translateX(4px)}

/* ---------- header ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 0;transform:scaleX(0);background:linear-gradient(90deg,var(--sky-deep),var(--sky));z-index:80}
.hdr{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
/* Sticky header is 72px + 1px border = 73px; keep anchored section headings clear of it. */
section[id],[id].sec{scroll-margin-top:89px}
.logo{display:flex;align-items:center;flex:none}
.logo svg{height:26px;width:auto}
.nav{display:flex;gap:4px;align-items:center}
.nav>li{list-style:none;position:relative}
.nav>li>a,.nav>li>button{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:999px;font-size:14.5px;font-weight:600;color:var(--ink-2);transition:background .2s,color .2s;min-height:40px}
.nav>li>a:hover,.nav>li>button:hover,.nav>li:focus-within>button,.nav>li.open>button{background:var(--bg-soft);color:var(--ink)}
.nav>li>button svg{width:12px;height:12px;transition:transform .25s}
.nav>li.open>button svg,.nav>li:hover>button svg{transform:rotate(180deg)}
/* .dd panel geometry, .dd-intro/.dd-groups grid and the .dd-row/.dd-industries
   variants live together in one block: see "mega menus v4" below. Only the
   open/close toggle stays here, next to the trigger button rules above. */
.nav>li:hover .dd,.nav>li:focus-within .dd,.nav>li.open .dd{opacity:1;visibility:visible;transform:translate(-50%,0)}
.hdr-right{display:flex;align-items:center;gap:10px}
.hdr .btn{padding:10px 18px;font-size:14px;min-height:40px}
.menu-btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;border:1px solid var(--line-strong);font-size:14px;font-weight:600;min-height:40px}
.menu-btn i{width:18px;height:12px;position:relative;display:block}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;right:0;height:2px;background:var(--ink);border-radius:2px;transition:transform .3s,top .3s}
.menu-btn i::before{top:0}.menu-btn i::after{top:10px}
.menu-open .menu-btn i::before{top:5px;transform:rotate(45deg)}
.menu-open .menu-btn i::after{top:5px;transform:rotate(-45deg)}
/* Keep the full menu available until the header has room for every primary
   destination, language control and callback action on one line. */
@media (max-width:1200px){.nav{display:none}}
@media (min-width:1201px){.menu-btn{display:none}}
@media (max-width:560px){.hdr .btn-primary{display:none}.menu-btn span{display:none}.menu-btn{padding:10px 12px}}

/* full menu overlay */
.mega{position:fixed;inset:72px 0 0 0;background:#fff;z-index:69;overflow:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s,transform .3s,visibility .3s}
.menu-open .mega{opacity:1;visibility:visible;transform:none}
.menu-open{overflow:hidden}
.mega .wrap{padding-top:36px;padding-bottom:60px}
.mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px 28px}
.mega h4{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.mega ul{list-style:none}
.mega li a{display:block;padding:8px 0;font-size:15px;color:var(--ink-2);transition:color .2s,transform .2s}
.mega li a:hover{color:var(--ink);transform:translateX(4px)}
.mega li a.big{font-family:var(--display);font-size:22px;font-weight:600;color:var(--ink);padding:6px 0 10px;letter-spacing:-.02em}
.mega .col{opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s}
.menu-open .mega .col{opacity:1;transform:none}
.menu-open .mega .col:nth-child(2){transition-delay:.06s}.menu-open .mega .col:nth-child(3){transition-delay:.12s}.menu-open .mega .col:nth-child(4){transition-delay:.18s}.menu-open .mega .col:nth-child(5){transition-delay:.24s}.menu-open .mega .col:nth-child(6){transition-delay:.3s}
.mega-foot{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:14px}
/* The full menu keeps category groups readable as the main nav collapses.
   Tablets get two balanced columns; phones use one predictable flow. */
@media (max-width:1200px){
  .mega .wrap{padding-top:28px;padding-bottom:44px}
  .mega-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 28px}
  .mega .col{max-width:none;min-width:0}
}
@media (max-width:700px){
  .mega .wrap{padding-top:22px;padding-bottom:34px}
  .mega-grid{grid-template-columns:1fr;gap:28px}
  .mega li a.big{font-size:20px}
}

/* mobile sticky CTA */
.mob-cta{display:none}
@media (max-width:560px){
  .mob-cta{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:60;gap:8px;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:999px;padding:6px;box-shadow:var(--shadow)}
  .mob-cta .btn{flex:1;padding:12px 14px;font-size:14px}
  body{padding-bottom:76px}
}

/* ---------- timed homepage callback ---------- */
/* Keep the delayed CTA inside the visual viewport, even when the browser is
   zoomed or the page is open in a narrow embedded window. */
.timed-cta{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:85;width:min(380px,calc(100vw - 32px));max-height:calc(100dvh - 32px);opacity:0;transform:translateY(18px);pointer-events:none;transition:opacity .25s ease,transform .25s ease}
.timed-cta.show{opacity:1;transform:none;pointer-events:auto}
.timed-cta-card{position:relative;max-height:inherit;overflow:auto;padding:22px 22px 18px;border:1px solid rgba(98,164,255,.3);border-radius:18px;background:var(--navy);box-shadow:0 24px 70px -24px rgba(1,24,56,.6)}
.timed-cta .eyebrow{color:var(--sky)}
.timed-cta .eyebrow::before{background:var(--sky);box-shadow:0 0 0 3px rgba(98,164,255,.16)}
.timed-cta h2{max-width:18ch;margin:14px 38px 10px 0;color:#fff;font-size:clamp(24px,2.2vw,30px);line-height:1.08;letter-spacing:-.025em}
.timed-cta p{max-width:42ch;margin-bottom:20px;color:#B8C7E6;font-size:14px;line-height:1.55}
.timed-cta-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.timed-cta .btn-sky{padding:12px 16px;font-size:14px}
.timed-cta-dismiss{padding:10px 0;color:#B8C7E6;font-size:13px}
.timed-cta-dismiss:hover{color:#fff}
.timed-cta-close{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#B8C7E6}
.timed-cta-close:hover{background:rgba(255,255,255,.1);color:#fff}
.timed-cta-close svg{width:16px;height:16px}
@media (max-width:900px){
  .timed-cta{left:16px;right:16px;bottom:max(82px,calc(16px + env(safe-area-inset-bottom)));width:auto;max-height:calc(100dvh - 104px)}
}
@media (max-width:560px){
  .timed-cta{left:12px;right:12px;bottom:max(82px,calc(12px + env(safe-area-inset-bottom)));max-height:calc(100dvh - 104px)}
  .timed-cta-card{padding:20px 18px 16px}
  .timed-cta h2{font-size:25px}
  .timed-cta-actions{gap:10px}
}
@media (prefers-reduced-motion:reduce){.timed-cta{transition:none}}

/* Small production-loop illustration: evidence becomes a reviewed release. */
.learning-loop{margin:24px 0 0;padding:17px 18px 15px;border:1px solid var(--line-strong);border-radius:16px;background:#fff;box-shadow:0 16px 34px -28px rgba(1,24,56,.42);overflow:hidden}
.learning-loop-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:13px;border-bottom:1px solid var(--line);color:var(--muted);font:500 9px var(--mono);letter-spacing:.12em;text-transform:uppercase}.learning-loop-head b{display:inline-flex;align-items:center;gap:7px;color:var(--green);font-weight:500;white-space:nowrap}.learning-loop-head b i{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(22,163,74,.1);animation:learningPulse 1.8s ease-in-out infinite}
.learning-loop-flow{display:grid;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr) 30px minmax(0,1fr) 30px minmax(0,1fr);align-items:center;gap:7px;padding:20px 0 17px}.learning-step{display:grid;gap:4px;min-width:0;padding:11px 10px;border:1px solid var(--line);border-radius:11px;background:var(--bg-soft);transition:border-color .2s,background .2s,transform .2s}.learning-step strong{display:grid;place-items:center;width:23px;height:23px;border:1px solid var(--tint-2);border-radius:50%;color:var(--sky-text);font:500 9px var(--mono)}.learning-step b{color:var(--ink);font:600 13px/1.15 var(--display);overflow-wrap:anywhere}.learning-step small{color:var(--muted);font-size:10px;line-height:1.25;overflow-wrap:anywhere}.learning-step.is-first{animation:learningStep 8s ease-in-out infinite}.learning-step:nth-of-type(3){animation:learningStep 8s ease-in-out -2s infinite}.learning-step:nth-of-type(5){animation:learningStep 8s ease-in-out -4s infinite}.learning-step.is-last{animation:learningStepLast 8s ease-in-out -6s infinite;border-color:rgba(22,163,74,.35);background:#f5fcf7}.learning-loop-flow>i{position:relative;height:1px;background:var(--line-strong)}.learning-loop-flow>i::after{content:"";position:absolute;top:50%;left:0;width:5px;height:5px;border-radius:50%;background:var(--sky);transform:translate(-50%,-50%);animation:learningTravel 2.6s ease-in-out infinite}.learning-loop-flow>i:nth-of-type(2)::after{animation-delay:-.85s}.learning-loop-flow>i:nth-of-type(3)::after{animation-delay:-1.7s}.learning-loop figcaption{}
.learning-loop figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font-size:11px;line-height:1.35}.learning-loop figcaption em{color:var(--sky-text);font:500 10px var(--mono);font-style:normal;letter-spacing:.03em;text-align:right}
@keyframes learningPulse{0%,100%{opacity:.55;transform:scale(.88)}50%{opacity:1;transform:scale(1.08)}}
@keyframes learningStep{0%,100%{border-color:var(--line);background:var(--bg-soft);transform:none}16%,30%{border-color:var(--sky);background:#f6faff;transform:translateY(-3px);box-shadow:0 9px 18px -17px rgba(98,164,255,.6)}}
@keyframes learningStepLast{0%,100%{transform:none;box-shadow:none}58%,75%{transform:translateY(-3px);box-shadow:0 9px 18px -17px rgba(22,163,74,.6)}}
@keyframes learningTravel{0%,100%{left:0;opacity:.25}45%,60%{left:100%;opacity:1}}
.learning-loop-flow .learning-step:nth-of-type(2){animation:learningStep 8s ease-in-out -2s infinite}.learning-loop-flow .learning-step:nth-of-type(3){animation:learningStep 8s ease-in-out -4s infinite}
@media (max-width:760px){.learning-loop{padding:15px 14px}.learning-loop-head{align-items:flex-start;flex-direction:column;gap:8px}.learning-loop-flow{grid-template-columns:1fr 1fr;gap:8px;padding:15px 0}.learning-loop-flow>i{display:none}.learning-step{padding:10px 9px}.learning-step b{font-size:12px}.learning-loop figcaption{align-items:flex-start;flex-direction:column;gap:7px}.learning-loop figcaption em{text-align:left}}
@media (prefers-reduced-motion:reduce){.learning-loop-head b i,.learning-step,.learning-loop-flow>i::after{animation:none!important}}

/* ---------- breadcrumbs ---------- */
.crumbs{display:flex;gap:10px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted);max-width:var(--max);margin:0 auto;padding:22px 28px 0}
.crumbs a:hover{color:var(--ink)}
.crumbs span:last-child{color:var(--ink)}
@media (max-width:860px){.crumbs{padding:18px 20px 0}}

/* ---------- page hero ---------- */
.page-hero,.sec.page-hero{padding:48px 0 40px;position:relative;overflow:hidden}
.page-hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
.page-hero .wrap:not(:has(.hero-card)){grid-template-columns:1fr}
.page-hero .copy{display:grid;gap:22px;justify-items:start;min-width:0;max-width:900px}
.hero-card{justify-self:end;width:100%;max-width:460px}
.hero-card .mock-body{gap:0}
.hero-card .mock-row{padding:11px 0;font-size:13px;gap:18px;align-items:baseline}
.hero-card .mock-row span{flex:none;min-width:96px}
.hero-card .mock-row b{font-family:var(--body);font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.hero-card .link-arrow{margin-top:14px;font-size:14px}
@media (max-width:900px){.page-hero .wrap{grid-template-columns:1fr;gap:28px}.hero-card{justify-self:stretch;max-width:none}}
.page-hero .copy>.rv{opacity:1;transform:none}
.page-hero .h1{margin-top:4px;max-width:16ch;font-size:clamp(36px,5.2vw,68px)}
.page-hero .lede{font-size:19px}
.page-hero .actions{margin-top:6px}
.page-hero .stats,.page-hero .kpi-list{margin-top:10px;width:100%}
.hero-art{position:relative;aspect-ratio:1;max-width:460px;width:100%;justify-self:end;min-width:0}
.hero-art canvas{position:absolute;inset:0;width:100%;height:100%}
@media (max-width:900px){.page-hero .wrap{grid-template-columns:1fr;gap:20px}.hero-art{max-width:300px;aspect-ratio:1.6/1;justify-self:center;order:-1}}
@media (max-width:860px){.page-hero{padding:32px 0 24px}}

/* Blog article heroes use the full editorial width: the lede becomes a deliberate right-hand rail instead of leaving an empty column. */
.blog-article-hero{padding:54px 0 48px}
.blog-article-hero .wrap{display:block}
.blog-article-hero .copy{max-width:none;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);column-gap:clamp(48px,7vw,104px);row-gap:22px;align-items:end}
.blog-article-hero .copy>.eyebrow{grid-column:1/-1}
.blog-article-hero .copy>.h1{grid-column:1;max-width:20ch}
.blog-article-hero .copy>.lede{grid-column:2;max-width:42ch;align-self:end;margin:0 0 5px;padding:4px 0 4px 28px;border-left:2px solid var(--blue)}
@media (max-width:900px){
  .blog-article-hero{padding:34px 0 30px}
  .blog-article-hero .copy{grid-template-columns:1fr;gap:18px}
  .blog-article-hero .copy>.eyebrow,.blog-article-hero .copy>.h1,.blog-article-hero .copy>.lede{grid-column:1}
  .blog-article-hero .copy>.lede{max-width:58ch;margin:0;padding:18px 0 0;border-left:0;border-top:1px solid var(--line)}
}
.cta-band .art{position:absolute;right:-6%;top:50%;transform:translateY(-50%);width:min(46vw,560px);aspect-ratio:1;pointer-events:none;opacity:.9}
.cta-band .art canvas{width:100%;height:100%}
@media (max-width:900px){.cta-band .art{display:none}}

/* ---------- grids & cards ---------- */
.grid{display:grid;gap:16px}
.cols-2{grid-template-columns:repeat(2,1fr)}
/* Quantity queries: cols-3/cols-4 run on a half-column track grid (span 2 per
   item = a normal column) purely so an incomplete last row can be re-centred
   instead of leaving a single item stuck on the left. Divisible item counts
   render byte-identical to the old repeat(3,1fr)/repeat(4,1fr) grids: the
   item's own box absorbs the internal half-gap, so nothing shifts. */
.cols-3{grid-template-columns:repeat(6,minmax(0,1fr))}
.cols-3>*{grid-column:span 2}
.cols-4{grid-template-columns:repeat(8,minmax(0,1fr))}
.cols-4>*{grid-column:span 2}
/* cols-3: 1 leftover item centred; 2 leftover items centred as a pair */
.cols-3:has(>:nth-child(3n+1):last-child)>:last-child{grid-column:3/span 2}
.cols-3:has(>:nth-child(3n+2):last-child)>:nth-last-child(2){grid-column:2/span 2}
.cols-3:has(>:nth-child(3n+2):last-child)>:last-child{grid-column:4/span 2}
/* cols-4: 1, 2 or 3 leftover items centred as a group */
.cols-4:has(>:nth-child(4n+1):last-child)>:last-child{grid-column:4/span 2}
.cols-4:has(>:nth-child(4n+2):last-child)>:nth-last-child(2){grid-column:3/span 2}
.cols-4:has(>:nth-child(4n+2):last-child)>:last-child{grid-column:5/span 2}
.cols-4:has(>:nth-child(4n+3):last-child)>:nth-last-child(3){grid-column:2/span 2}
.cols-4:has(>:nth-child(4n+3):last-child)>:nth-last-child(2){grid-column:4/span 2}
.cols-4:has(>:nth-child(4n+3):last-child)>:last-child{grid-column:6/span 2}
/* cols-2: only possible leftover is 1 item; fill the row rather than centre a
   half-width card, since a 2-up grid has no natural middle track. */
.cols-2:has(>:nth-child(2n+1):last-child)>:last-child{grid-column:1/-1}
@media (max-width:1000px){
  .cols-4,.cols-3{grid-template-columns:repeat(2,1fr)}
  .cols-4>*,.cols-3>*{grid-column:auto}
  .cols-4:has(>:nth-child(2n+1):last-child)>:last-child,
  .cols-3:has(>:nth-child(2n+1):last-child)>:last-child{grid-column:1/-1}
}
@media (max-width:640px){.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}.cols-3>*,.cols-4>*{grid-column:auto}}
.card{--mx:50%;--my:50%;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;position:relative;overflow:hidden;transition:border-color .25s,transform .25s,box-shadow .25s;display:flex;flex-direction:column;gap:12px;min-width:0}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(360px circle at var(--mx) var(--my),rgba(98,164,255,.14),transparent 60%);opacity:0;transition:opacity .35s;pointer-events:none}
.card:hover::before{opacity:1}
.card:hover{border-color:var(--line-strong);transform:translateY(-3px);box-shadow:var(--shadow)}
.card>*{position:relative}
.card h3{font-size:19px;font-weight:600;line-height:1.25}
.card p{color:var(--ink-2);font-size:15px;line-height:1.55}
.card .ic{width:42px;height:42px;border-radius:12px;background:var(--tint);display:grid;place-items:center;color:var(--sky-text);transition:transform .3s,background .3s,color .3s}
.card:hover .ic{transform:translateY(-3px);background:var(--navy);color:#fff}
.card .ic svg{width:20px;height:20px}
.card .tag,.tag{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.card-tint{background:var(--bg-soft)}
.card-link{cursor:pointer}
.card-link .link-arrow{margin-top:auto}
.card-link h3{color:var(--ink)}
.card .k{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--sky-text);margin-bottom:2px}
.card .display{display:block;font-family:var(--display);font-size:48px;font-weight:600;letter-spacing:0;color:var(--sky-text);line-height:1.05;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
@media (max-width:640px){.card .display{font-size:38px}}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span,.tags a{font-family:var(--mono);font-size:12px;border:1px solid var(--line);border-radius:8px;padding:6px 10px;color:var(--ink-2);background:#fff;transition:border-color .2s,color .2s}
.tags a:hover{border-color:var(--sky-text);color:var(--sky-text)}

/* Team map: keep specialist functions legible as a single operating system. */
#teams .team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#teams .team-card{min-height:258px;padding:22px}
#teams .team-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
#teams .team-card .ic{flex:none}
#teams .team-index{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--line-strong);border-radius:50%;background:var(--bg-soft);color:var(--sky-text);font:500 11px var(--mono);letter-spacing:.06em;transition:background .25s,color .25s,border-color .25s,transform .25s}
#teams .team-card:hover .team-index{background:var(--navy);border-color:var(--navy);color:#fff;transform:rotate(8deg)}
#teams .team-card h3{max-width:15ch}
#teams .team-card p{margin-top:auto;max-width:29ch}
.team-section-intro{max-width:45ch}
.team-loop{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.team-loop span:not(:first-child){display:inline-flex;align-items:center;gap:24px}
.team-loop span:not(:first-child)::before{content:"";width:22px;height:1px;background:var(--sky);opacity:.7}
.team-loop-label{color:var(--sky-text)}
@media (max-width:1100px){#teams .team-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){#teams .team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.team-loop{gap:10px 18px}.team-loop span:not(:first-child){gap:18px}}
@media (max-width:520px){#teams .team-grid{grid-template-columns:1fr}#teams .team-card{min-height:0}.team-loop{display:grid;grid-template-columns:1fr;gap:10px}.team-loop span:not(:first-child){gap:10px}.team-loop span:not(:first-child)::before{width:12px}}

/* Industry agent boards: keep every catalogue balanced, then let each card feel like
   a step in the same operational flow instead of an isolated feature tile. */
#agents .grid.cols-3{grid-template-columns:repeat(6,minmax(0,1fr));counter-reset:industry-agent}
#agents .grid.cols-3>.card{grid-column:span 2;min-height:238px;padding-top:62px}
#agents .grid.cols-3>.card{counter-increment:industry-agent}
#agents .grid.cols-3>.card::after{content:counter(industry-agent,decimal-leading-zero);position:absolute;top:22px;right:24px;width:32px;height:32px;border:1px solid var(--line-strong);border-radius:50%;display:grid;place-items:center;font:500 11px var(--mono);letter-spacing:.06em;color:var(--sky-text);background:var(--bg-soft);transition:background .25s,color .25s,border-color .25s,transform .25s}
#agents .grid.cols-3>.card:hover::after{background:var(--navy);border-color:var(--navy);color:#fff;transform:rotate(8deg)}
#agents .grid.cols-3>.card .tags{margin-top:auto;padding-top:15px;border-top:1px solid var(--line);align-items:center}
#agents .grid.cols-3>.card .tags::before{content:"";width:26px;height:2px;background:linear-gradient(90deg,var(--sky-text),var(--sky));transform-origin:left;animation:agentSignal 2.8s ease-in-out infinite}
#agents .grid.cols-3>.card:nth-child(2) .tags::before{animation-delay:-.7s}
#agents .grid.cols-3>.card:nth-child(3) .tags::before{animation-delay:-1.4s}
#agents .grid.cols-3>.card:nth-child(4) .tags::before{animation-delay:-2.1s}
#agents .grid.cols-3:has(> .card:nth-child(4):last-child)>.card{grid-column:span 3}
#agents .grid.cols-3:has(> .card:nth-child(5):last-child)>.card:nth-child(4){grid-column:2/span 2}
#agents .grid.cols-3:has(> .card:nth-child(5):last-child)>.card:nth-child(5){grid-column:4/span 2}
@keyframes agentSignal{0%,100%{opacity:.35;transform:scaleX(.55)}50%{opacity:1;transform:scaleX(1)}}
@media (max-width:900px){
  #agents .grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  #agents .grid.cols-3>.card,
  #agents .grid.cols-3:has(> .card:nth-child(4):last-child)>.card,
  #agents .grid.cols-3:has(> .card:nth-child(5):last-child)>.card:nth-child(4),
  #agents .grid.cols-3:has(> .card:nth-child(5):last-child)>.card:nth-child(5){grid-column:span 1}
}
@media (max-width:560px){#agents .grid.cols-3{grid-template-columns:1fr}}

/* ---------- numbers ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:36px 0}
.stat{border-top:2px solid var(--sky);padding-top:18px;min-width:0}
.stat strong{display:block;font-family:var(--display);font-size:clamp(36px,4vw,56px);font-weight:600;letter-spacing:-.04em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stat span{display:block;margin-top:10px;color:var(--ink-2);font-size:14.5px;line-height:1.5}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.stats{grid-template-columns:1fr}}
.kpi-list{display:grid;gap:18px}
.kpi{display:grid;grid-template-columns:minmax(170px,240px) minmax(0,1fr);gap:18px;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:14px}
.kpi strong{font-family:var(--display);font-size:clamp(34px,3.6vw,50px);font-weight:600;letter-spacing:-.04em;color:var(--sky-text);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.kpi span{color:var(--ink-2);font-size:14.5px;line-height:1.5}
@media (max-width:480px){.kpi{grid-template-columns:1fr;gap:6px}}

/* ---------- steps / timeline ---------- */
.steps{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;position:relative}
.steps li{counter-increment:s;position:relative;padding-top:54px;min-width:0}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;top:0;left:0;font-family:var(--mono);font-size:12px;color:var(--sky-text);width:36px;height:36px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;background:#fff}
.steps li::after{content:"";position:absolute;top:18px;left:44px;right:-24px;height:1px;background:var(--line)}
.steps li:last-child::after{display:none}
.steps .k{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--sky-text);margin-bottom:6px}
.steps h3{font-size:20px;font-weight:600;margin-bottom:8px;line-height:1.2}
.steps p{color:var(--ink-2);font-size:14.5px;line-height:1.55}
/* Quantity queries: auto-fit adapts well to an arbitrary content width, but
   at a given viewport it settles on a fixed column count (5 wide, 3 tablet)
   and a leftover item still sits alone if the item count doesn't divide
   evenly into that. The counts actually used across the site (3, 4, 5, 6, 7)
   are enumerated explicitly per band instead of guessing at auto-fit's
   column count in the abstract; anything outside that set keeps the plain
   auto-fit rule above (already orphan-free for <=3 items). Pairs/trios use
   the same half-column-track centring as .cols-3/.cols-4 above; a single
   leftover item already gets `display:none` on its ::after connector via
   the :last-child rule, so a centred lone item never draws a dangling line. */
@media (min-width:1001px){
  /* 6 items: auto-fit's 5 columns leave 1 orphan (6%5=1) - 3 columns gives
     two clean full rows instead. */
  .steps:not(.factory-loop-steps):not(.steps-glyph):has(>li:last-child:nth-child(6)){grid-template-columns:repeat(3,1fr)}
  /* 7 items: auto-fit's 5 columns leave 2 sparse (7%5=2) - 4 columns leaves
     a trailing row of 3, centred on a half-column track grid. */
  .steps:not(.factory-loop-steps):not(.steps-glyph):has(>li:last-child:nth-child(7)){grid-template-columns:repeat(8,minmax(0,1fr))}
  .steps:not(.factory-loop-steps):not(.steps-glyph):has(>li:last-child:nth-child(7))>li{grid-column:span 2}
  .steps:not(.factory-loop-steps):not(.steps-glyph):has(>li:last-child:nth-child(7))>li:nth-last-child(3){grid-column:2/span 2}
  .steps:not(.factory-loop-steps):not(.steps-glyph):has(>li:last-child:nth-child(7))>li:nth-last-child(2){grid-column:4/span 2}
  .steps:not(.factory-loop-steps):not(.steps-glyph):has(>li:last-child:nth-child(7))>li:last-child{grid-column:6/span 2}
}
@media (min-width:641px) and (max-width:1000px){
  /* auto-fit gives 3 columns here. 4 items leave a lone last item (4%3=1);
     2 columns fits this width comfortably and avoids the orphan. */
  .steps:not(.factory-loop-steps):not(.steps-glyph):has(>li:last-child:nth-child(4)){grid-template-columns:repeat(2,1fr)}
  /* 5 items leave a pair (5%3=2), centred as a pair. */
  .steps:not(.factory-loop-steps):not(.steps-glyph):has(>li:last-child:nth-child(5)){grid-template-columns:repeat(6,minmax(0,1fr))}
  .steps:not(.factory-loop-steps):not(.steps-glyph):has(>li:last-child:nth-child(5))>li{grid-column:span 2}
  .steps:not(.factory-loop-steps):not(.steps-glyph):has(>li:last-child:nth-child(5))>li:nth-last-child(2){grid-column:2/span 2}
  .steps:not(.factory-loop-steps):not(.steps-glyph):has(>li:last-child:nth-child(5))>li:last-child{grid-column:4/span 2}
  /* 7 items leave a lone last item (7%3=1), centred. */
  .steps:not(.factory-loop-steps):not(.steps-glyph):has(>li:last-child:nth-child(7)){grid-template-columns:repeat(6,minmax(0,1fr))}
  .steps:not(.factory-loop-steps):not(.steps-glyph):has(>li:last-child:nth-child(7))>li{grid-column:span 2}
  .steps:not(.factory-loop-steps):not(.steps-glyph):has(>li:last-child:nth-child(7))>li:last-child{grid-column:3/span 2}
}
@media (max-width:640px){.steps{grid-template-columns:1fr;gap:18px}.steps li{padding-top:0;padding-left:52px}.steps li::after{top:44px;left:17px;right:auto;width:1px;height:calc(100% - 20px)}}
.factory-loop-scroll{overflow-x:auto;scrollbar-width:thin}
.factory-loop-steps{grid-template-columns:repeat(6,minmax(150px,1fr));gap:20px;min-width:1000px}
.factory-loop-steps li::after{right:-20px}
@media (max-width:640px){.factory-loop-scroll{overflow:visible}.factory-loop-steps{grid-template-columns:1fr;gap:18px;min-width:0}.factory-loop-steps li::after{right:auto}}
.timeline{list-style:none;border-left:1px solid var(--line);display:grid;gap:26px;padding-left:28px}
.timeline li{position:relative}
.timeline li::before{content:"";position:absolute;left:-33px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--sky)}
.timeline time{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sky-text)}
.timeline h3{font-size:19px;margin:6px 0}
.timeline p{color:var(--ink-2);font-size:15px}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500;background:var(--bg-soft)}
tr:last-child td{border-bottom:0}
td strong{color:var(--ink)}
td .btn{padding:10px 16px;font-size:13.5px}

/* ---------- FAQ ---------- */
.faq{max-width:820px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 28px;align-items:center;gap:20px;padding:20px 0;font-family:var(--display);font-size:19px;font-weight:600;color:var(--ink);line-height:1.3;overflow-wrap:anywhere}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;transition:transform .3s,background .3s;color:var(--ink-2);font-weight:400}
.faq details[open] summary i{transform:rotate(45deg) scale(.7);background:var(--navy);color:#fff;border-color:var(--navy)}
.faq details p{padding:0 0 24px;color:var(--ink-2);max-width:62ch;font-size:16px}
@media (min-width:900px){
  .wrap:has(> .faq){display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
  .wrap:has(> .faq) > .sec-head{grid-template-columns:1fr;margin-bottom:0;position:sticky;top:96px}
  .wrap:has(> .faq) > .faq{max-width:none}
  .wrap:has(> .faq) > .faq-hub-link{grid-column:2;justify-self:start;margin-top:-32px}
}
.faq details p{max-width:none}

/* ---------- FAQ hub ---------- */
.faq-hub-link{margin-top:22px;font-size:14px}
.faq-hero{padding:78px 0 86px;background:var(--bg-soft);border-bottom:1px solid var(--line);overflow:hidden}
.faq-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.82fr);gap:72px;align-items:center}
.faq-hero-copy{max-width:720px}
.faq-hero-copy .h1{max-width:12ch;margin-top:18px}
.faq-hero-copy .lede{max-width:62ch;margin-top:22px}
.faq-hero-copy .actions{margin-top:30px}
.faq-hero-visual{position:relative;min-height:342px;padding:22px;border:1px solid var(--line-strong);border-radius:24px;background:#fff;box-shadow:var(--shadow);overflow:hidden}
.faq-hero-visual::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:34px 34px;opacity:.52;mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 92%);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 92%);pointer-events:none}
.faq-hero-top,.faq-hero-foot,.faq-hero-path{position:relative;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.faq-hero-top{justify-content:space-between;color:var(--muted);font:10px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.faq-hero-top span:last-child{display:inline-flex;align-items:center;gap:8px;color:var(--green)}
.faq-hero-top i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(22,163,74,.12);animation:pulse 1.8s infinite}
.faq-hero-question{position:relative;margin-top:48px;padding:22px;border:1px solid var(--line);border-radius:var(--r);background:rgba(246,248,253,.88);box-shadow:0 18px 32px -28px rgba(1,24,56,.35)}
.faq-hero-question small{display:block;color:var(--sky-text);font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.faq-hero-question strong{display:block;max-width:19ch;margin-top:11px;color:var(--ink);font:600 clamp(22px,2.5vw,30px)/1.12 var(--display);letter-spacing:-.03em}
.faq-hero-question p{max-width:38ch;margin-top:12px;color:var(--ink-2);font-size:14px;line-height:1.5}
.faq-hero-path{justify-content:flex-start;margin-top:28px;color:var(--ink);font:600 13px var(--mono);letter-spacing:.04em}
.faq-hero-path span{padding:8px 11px;border:1px solid var(--line-strong);border-radius:999px;background:#fff}
.faq-hero-path i{position:relative;width:34px;height:1px;background:var(--sky);overflow:visible}
.faq-hero-path i::after{content:"";position:absolute;top:50%;left:0;width:6px;height:6px;border-radius:50%;background:var(--sky-text);transform:translate(-50%,-50%);animation:faqPathFlow 2.8s ease-in-out infinite}
.faq-hero-path i:nth-of-type(2)::after{animation-delay:-1.4s}
.faq-hero-foot{justify-content:space-between;margin-top:30px;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase}
@keyframes faqPathFlow{0%,100%{left:0;opacity:.25}45%,60%{left:100%;opacity:1}}
.faq-index{padding-top:96px;padding-bottom:96px}
.faq-jump-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.faq-jump{display:grid;align-content:start;gap:10px;min-width:0;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:#fff;transition:border-color .25s,box-shadow .25s,transform .25s}
.faq-jump:hover{border-color:var(--sky);box-shadow:0 18px 34px -28px rgba(1,24,56,.45);transform:translateY(-3px)}
.faq-jump>span{color:var(--sky-text);font:11px var(--mono);letter-spacing:.12em}
.faq-jump strong{color:var(--ink);font:600 18px/1.2 var(--display);letter-spacing:-.02em}
.faq-jump small{min-height:42px;color:var(--muted);font-size:13px;line-height:1.5}
.faq-jump b{margin-top:6px;color:var(--sky-text);font:600 12px var(--mono);letter-spacing:.05em}
.faq-category .wrap{display:grid;grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr);gap:64px;align-items:start}
.faq-category .sec-head{display:block;margin:0;position:sticky;top:96px}
.faq-category .sec-head .h2{margin-top:18px}
.faq-category .sec-head .lede{margin-top:20px}
.faq-category .faq{max-width:none}
.faq-category .faq summary{padding:22px 0;font-size:20px}
.faq-category .faq details p{max-width:68ch;padding-bottom:26px;line-height:1.65}
@media (max-width:1000px){.faq-hero .wrap{grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);gap:40px}.faq-jump-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.faq-category .wrap{gap:42px}}
@media (max-width:900px){.faq-hero{padding:56px 0 64px}.faq-hero .wrap,.faq-category .wrap{grid-template-columns:1fr;gap:34px}.faq-category .sec-head{position:static}.faq-category .faq summary{font-size:18px}.faq-index{padding-top:80px;padding-bottom:80px}}
@media (max-width:560px){.faq-hero .wrap{gap:28px}.faq-hero-copy .h1{max-width:none}.faq-hero-copy .lede{font-size:16px}.faq-hero-visual{min-height:310px;padding:16px;border-radius:var(--r)}.faq-hero-question{margin-top:34px;padding:18px}.faq-hero-question strong{font-size:23px}.faq-hero-path{gap:8px;margin-top:22px;font-size:11px}.faq-hero-path i{width:18px}.faq-hero-foot{margin-top:24px;gap:8px;font-size:9px}.faq-jump-grid{grid-template-columns:1fr}.faq-jump small{min-height:0}.faq-category .faq summary{gap:12px;font-size:17px;padding:19px 0}.faq-category .faq details p{font-size:15px}}
@media (prefers-reduced-motion:reduce){.faq-hero-top i,.faq-hero-path i::after{animation:none}.faq-jump{transition:none}}

/* ---------- split / mock ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split .h2{margin-top:18px}
.split .lede{margin-top:18px}
/* #suggestions (booking) puts its check list in a .grid.cols-2 column, not a
   .split; the comma form keeps each selector's own specificity. */
ul.check{list-style:none;padding-left:0}
.split ul.check,#suggestions ul.check,.wrap > ul.check{list-style:none;display:grid;gap:10px;margin-top:22px}
ul.check li{padding-left:28px;position:relative;color:var(--ink-2)}
ul.check li::before{content:"";position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:50%;background:var(--tint);box-shadow:inset 0 0 0 1px var(--tint-2)}
ul.check li::after{content:"";position:absolute;left:5px;top:11px;width:6px;height:4px;border-left:2px solid var(--sky-text);border-bottom:2px solid var(--sky-text);transform:rotate(-45deg)}
.split ul.check + .actions,.split .lede + .actions{margin-top:28px}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:32px}}
.mock{background:#fff;border:1px solid var(--line-strong);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;min-width:0}
.mock-bar{display:flex;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--bg-soft)}
.mock-body{padding:18px;display:flex;flex-direction:column;gap:12px}
.mock-row{display:flex;justify-content:space-between;gap:14px;font-family:var(--mono);font-size:12.5px;color:var(--muted);padding:8px 0;border-bottom:1px dashed var(--line)}
.mock-row:last-child{border-bottom:0}
.mock-row b{color:var(--ink);font-weight:500;text-align:right;overflow-wrap:anywhere}
.mock-row .ok{color:var(--green)}
.hybrid-track{display:grid;grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) 24px minmax(0,1fr);align-items:center;gap:6px;padding:18px 18px 14px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--bg-soft),#fff)}
.hybrid-node{display:grid;justify-items:center;gap:5px;min-width:0;text-align:center;color:var(--muted)}
.hybrid-node i{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--line-strong);border-radius:50%;background:#fff;color:var(--sky-text);font:600 14px var(--body);font-style:normal}
.hybrid-node b{font:600 11px/1.15 var(--body);color:var(--ink);overflow-wrap:anywhere}
.hybrid-node small{font:10px/1.2 var(--body);overflow-wrap:anywhere}
.hybrid-node.active i{border-color:var(--sky);background:var(--tint);box-shadow:0 0 0 5px rgba(98,164,255,.1)}
.hybrid-connector{position:relative;height:1px;background:var(--line-strong)}
.hybrid-connector i{position:absolute;top:50%;left:0;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--sky);animation:hybrid-pulse 2.4s ease-in-out infinite}
.hybrid-connector:last-of-type i{animation-delay:1.2s}
@keyframes hybrid-pulse{0%,100%{left:0;opacity:.35}45%,60%{left:calc(100% - 6px);opacity:1}}
@media (prefers-reduced-motion:reduce){.hybrid-connector i{animation:none;left:calc(100% - 6px);opacity:1}}
.bubble{padding:11px 15px;border-radius:16px;font-size:14.5px;line-height:1.45;max-width:88%}
.bubble.cu{align-self:flex-end;background:var(--bg-soft);border:1px solid var(--line);border-bottom-right-radius:4px;color:var(--ink-2)}
.bubble.ai{align-self:flex-start;background:var(--tint);border:1px solid var(--tint-2);border-bottom-left-radius:4px;color:var(--ink)}
.bubble small{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.bar i{display:block;height:100%;width:var(--w,0%);background:linear-gradient(90deg,var(--sky-deep),var(--sky));transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.mock .lbl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;color:var(--muted)}
.mock .lbl b{color:var(--ink);font-weight:500}
.ops-scene{position:relative;min-width:0;overflow:hidden;padding:24px;border:1px solid rgba(98,164,255,.4);border-radius:24px;background:linear-gradient(145deg,#061d42 0%,#0a2c5e 100%);box-shadow:0 26px 56px -34px rgba(1,24,56,.64);color:#dbe7fb}
.ops-scene::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(174,204,255,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(174,204,255,.11) 1px,transparent 1px);background-size:28px 28px;opacity:.42;mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 92%);pointer-events:none}
.ops-scene::after{content:"";position:absolute;inset:14px;border:1px solid rgba(98,164,255,.14);border-radius:16px;pointer-events:none;animation:opsBoardGlow 4.8s ease-in-out infinite}
.ops-top,.ops-footer{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ops-kicker,.ops-label{font:10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#a8c4ee}
.ops-status{display:inline-flex;align-items:center;gap:7px;color:#c2d3ec;font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.ops-status i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(22,163,74,.12);animation:pulse 1.8s infinite}
.ops-layout{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr 1.15fr .9fr;gap:16px;margin-top:22px;align-items:stretch}
.ops-inbox,.ops-pipeline,.ops-result{position:relative;min-width:0}
.ops-inbox,.ops-pipeline{padding-right:16px;border-right:1px solid rgba(194,211,236,.2)}
.ops-label{margin-bottom:12px;color:#91a8cc}
.ops-inbox-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(194,211,236,.18);opacity:.5;transition:opacity .4s,transform .4s}
.ops-inbox-row.active{opacity:1}
.ops-inbox-row.active{transform:translateX(3px)}
.ops-avatar{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:rgba(98,164,255,.16);color:#a8c4ee;font:10px var(--mono)}
.ops-inbox-row b{display:block;overflow:hidden;color:#f4f8ff;font:600 13px var(--display);white-space:nowrap;text-overflow:ellipsis}
.ops-inbox-row small{display:block;margin-top:3px;color:#9db3d4;font:11px var(--body)}
.ops-inbox-row em{color:#a8c4ee;font:9px var(--mono);font-style:normal;letter-spacing:.06em}
.ops-inbox-row:first-of-type em{color:var(--green)}
.ops-note{margin-top:18px;color:#a9bad7;font:12px var(--body);line-height:1.45}
.ops-track{display:grid;gap:8px}
.ops-node{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:8px;align-items:center;padding:10px;border:1px solid rgba(194,211,236,.2);border-radius:12px;background:rgba(255,255,255,.06);opacity:.52;transition:opacity .4s,border-color .4s,transform .4s,background .4s}
.ops-node.on{border-color:var(--sky);background:rgba(98,164,255,.16);opacity:1;transform:translateX(3px);box-shadow:0 10px 26px -22px rgba(98,164,255,.9)}
.ops-node>span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(98,164,255,.16);color:#b9d3f8;font:10px var(--mono)}
.ops-node b{color:#f4f8ff;font:600 13px var(--display)}
.ops-node small{display:block;grid-column:2;margin-top:2px;color:#9db3d4;font:11px var(--body)}
.ops-connector{position:relative;width:2px;height:22px;margin-left:22px;background:rgba(194,211,236,.28)}
.ops-connector i{position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;background:var(--sky);transform:translate(-50%,-50%);opacity:.7}
.ops-transcript{margin-top:14px;padding:12px;border-radius:12px;background:#fff;color:var(--ink)}
.ops-transcript span{color:var(--sky-text);font:9px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.ops-transcript p{margin-top:7px;color:#fff;font:13px var(--body);line-height:1.4}
.ops-result{display:flex;flex-direction:column}
.ops-transcript p{color:var(--ink);}
.ops-metric{display:flex;align-items:baseline;gap:9px;padding:10px 0;border-bottom:1px solid rgba(194,211,236,.2)}
.ops-metric strong{color:var(--sky);font:600 31px var(--display);letter-spacing:-.04em;white-space:nowrap}
.ops-metric span{color:#c2d3ec;font:12px var(--body);line-height:1.35}
.ops-result-box{display:flex;align-items:flex-start;gap:9px;margin-top:auto;padding:12px;border:1px solid rgba(98,164,255,.65);border-radius:12px;background:rgba(255,255,255,.08)}
.ops-result-box>i{flex:none;width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(22,163,74,.12)}
.ops-result-box b{display:block;color:#f4f8ff;font:600 13px var(--display)}
.ops-result-box small{display:block;margin-top:4px;color:#a9bad7;font:11px var(--body)}
.ops-footer{margin-top:18px;padding-top:14px;border-top:1px solid rgba(194,211,236,.2);color:#91a8cc;font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.ops-footer span{padding-right:10px;border-right:1px solid rgba(194,211,236,.2)}
.ops-footer strong{margin-left:auto;color:#f4f8ff;font:600 12px var(--body);letter-spacing:0;text-transform:none}
@keyframes opsBoardGlow{0%,100%{opacity:.35;transform:scale(.995)}50%{opacity:.8;transform:scale(1)}}
@media(max-width:900px){.ops-layout{grid-template-columns:1fr 1fr}.ops-result{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:12px}.ops-result .ops-label{grid-column:1/-1}.ops-result-box{margin-top:0}.ops-pipeline{padding-right:0;border-right:0}}
@media(max-width:560px){.ops-scene{padding:16px}.ops-scene::after{inset:10px}.ops-layout{grid-template-columns:1fr}.ops-inbox,.ops-pipeline{padding-right:0;border-right:0}.ops-pipeline{padding-top:8px;border-top:1px solid rgba(194,211,236,.2)}.ops-result{display:block;grid-column:auto;padding-top:8px;border-top:1px solid rgba(194,211,236,.2)}.ops-result-box{margin-top:16px}.ops-node.on,.ops-inbox-row.active{transform:none}.ops-footer{align-items:flex-start}.ops-footer strong{width:100%;margin-left:0}}
@media(prefers-reduced-motion:reduce){.ops-scene::after,.ops-scene .ops-status i{animation:none}.ops-node.on,.ops-inbox-row.active{transform:none}}

/* ---------- homepage solution adaptation visual ---------- */
.solution-visual-sec{padding:20px 0 96px;background:var(--bg)}
.solution-visual-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:40px;align-items:end;margin-bottom:38px}
.solution-visual-head .h2{margin-top:18px}
.solution-map{position:relative;overflow:hidden;padding:22px 24px 20px;border:1px solid rgba(98,164,255,.48);border-radius:22px;background:linear-gradient(145deg,#061d42 0%,#0a2c5e 100%);box-shadow:0 26px 56px -34px rgba(1,24,56,.62);color:#dbe7fb}
.solution-map::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(174,204,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(174,204,255,.1) 1px,transparent 1px);background-size:28px 28px;opacity:.42;mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 94%);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 94%);pointer-events:none}
.solution-map-head,.solution-map-body,.solution-map-foot{position:relative;z-index:1}
.solution-map-head,.solution-map-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;font:10px var(--mono);letter-spacing:.13em;text-transform:uppercase;color:#91a8cc}
.solution-map-status{display:inline-flex;align-items:center;gap:8px;color:#a8c4ee}
.solution-map-status i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(22,163,74,.12);animation:solutionMapPulse 2.4s ease-in-out infinite}
.solution-map-body{display:grid;grid-template-columns:minmax(190px,.7fr) minmax(0,1.3fr);gap:28px;align-items:center;padding:34px 0}
.solution-map-core{position:relative;display:grid;place-items:center;min-height:188px;padding:22px;border:1px solid var(--sky);border-radius:18px;background:radial-gradient(circle at 50% 42%,rgba(98,164,255,.2),rgba(98,164,255,.12) 56%,rgba(98,164,255,.1));background-size:145% 145%;background-position:50% 42%;text-align:center;box-shadow:0 18px 42px -30px rgba(98,164,255,.9);will-change:transform,box-shadow,background-position}
.solution-map-core::before{content:"";width:76px;height:76px;margin-bottom:17px;border:1px solid rgba(98,164,255,.58);border-radius:50%;box-shadow:0 0 0 12px rgba(98,164,255,.06),0 0 0 25px rgba(98,164,255,.035);transform-origin:center;will-change:transform,opacity,box-shadow}
.solution-map-core span{color:var(--sky);font:10px var(--mono);letter-spacing:.15em}
.solution-map-core strong{margin-top:10px;color:#fff;font:600 25px/1.05 var(--display)}
.solution-map-core small{margin-top:8px;color:#a9bad7;font:12px var(--body)}
.solution-map-rows{display:grid;gap:10px}
.solution-map-row{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding:13px 14px;border:1px solid rgba(194,211,236,.2);border-radius:13px;background:rgba(255,255,255,.06);opacity:.68;transition:opacity .3s,transform .3s,border-color .3s,background .3s}
.solution-map-row.active{opacity:1;transform:translateX(3px);border-color:var(--sky);background:rgba(98,164,255,.16);box-shadow:0 12px 30px -26px rgba(98,164,255,.95)}
.solution-map-index{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(98,164,255,.16);color:#b9d3f8;font:10px var(--mono)}
.solution-map-row b{display:block;color:#f4f8ff;font:600 15px var(--display)}
.solution-map-row small{display:block;margin-top:3px;color:#a9bad7;font:11px var(--body)}
.solution-map-row em{color:#63d486;font:9px var(--mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase}
.solution-map-foot{padding-top:15px;border-top:1px solid rgba(194,211,236,.2)}
.solution-map-foot span{display:inline-flex;align-items:center;gap:7px}
.solution-map-foot span i{width:7px;height:7px;border-radius:50%;background:var(--sky)}
.solution-map-foot span i.green{background:var(--green)}
.solution-map-foot strong{margin-left:auto;color:#f4f8ff;font:600 12px var(--body);letter-spacing:0;text-transform:none}
@keyframes solutionMapPulse{0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}50%{box-shadow:0 0 0 4px rgba(22,163,74,.13)}}
@keyframes solutionBrainBreathe{0%,100%{transform:translate3d(0,0,0);background-position:50% 42%;box-shadow:0 18px 42px -30px rgba(98,164,255,.9)}50%{transform:translate3d(0,-3px,0);background-position:54% 46%;box-shadow:0 23px 48px -27px rgba(98,164,255,.98)}}
@keyframes solutionBrainHalo{0%,100%{opacity:.62;transform:scale(.96);box-shadow:0 0 0 12px rgba(98,164,255,.05),0 0 0 25px rgba(98,164,255,.025)}50%{opacity:1;transform:scale(1.045);box-shadow:0 0 0 15px rgba(98,164,255,.09),0 0 0 30px rgba(98,164,255,.045)}}
@keyframes solutionMapFocus{0%,14%{opacity:1;transform:translateX(3px);border-color:var(--sky);background:rgba(98,164,255,.16);box-shadow:0 12px 30px -26px rgba(98,164,255,.95)}18%,100%{opacity:.68;transform:none;border-color:rgba(194,211,236,.2);background:rgba(255,255,255,.06);box-shadow:none}}
@media(prefers-reduced-motion:no-preference){.solution-map-core{animation:solutionBrainBreathe 5.8s ease-in-out infinite}.solution-map-core::before{animation:solutionBrainHalo 4.8s ease-in-out infinite}.solution-map-row{animation:solutionMapFocus 12s ease-in-out infinite}.solution-map-row:nth-child(1){animation-delay:0s}.solution-map-row:nth-child(2){animation-delay:-3s}.solution-map-row:nth-child(3){animation-delay:-6s}.solution-map-row:nth-child(4){animation-delay:-9s}}
@media(max-width:900px){.solution-visual-head{grid-template-columns:1fr;gap:18px}.solution-map-body{grid-template-columns:1fr;gap:18px}}
@media(max-width:560px){.solution-visual-sec{padding:4px 0 64px}.solution-map{padding:18px 16px;border-radius:18px}.solution-map-head{align-items:flex-start;flex-direction:column;gap:9px}.solution-map-body{padding:24px 0}.solution-map-core{min-height:160px}.solution-map-row{grid-template-columns:30px minmax(0,1fr);gap:10px}.solution-map-row em{grid-column:2}.solution-map-foot{align-items:flex-start;flex-direction:column;gap:9px}.solution-map-foot strong{margin-left:0}}
@media(prefers-reduced-motion:reduce){.solution-map-core,.solution-map-core::before,.solution-map-status i{animation:none}.solution-map-row{transition:none}}
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 20px;margin:0 -4px;scrollbar-width:thin}
.rail>*{flex:0 0 min(320px,80vw);scroll-snap-align:start}

/* ---------- forms ---------- */
.form{display:grid;gap:16px;max-width:560px;min-width:0}
.form label{display:grid;gap:6px;min-width:0;font-size:14px;font-weight:600;color:var(--ink)}
.form input,.form select,.form textarea{font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;color:var(--ink);width:100%;max-width:100%;min-width:0;min-height:44px}
.form textarea{min-height:120px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--sky);outline-offset:0;border-color:var(--sky)}
.form .check{display:flex;gap:10px;align-items:flex-start;font-weight:400;color:var(--ink-2);font-size:14px}
.form .check input{width:18px;height:18px;min-height:0;margin-top:2px}
.form .check a{color:var(--sky-text);text-decoration:underline}

/* ---------- AI callback conversion ---------- */
.hero-callback-path{display:flex;align-items:center;gap:10px;max-width:640px;margin-top:18px;color:var(--muted);font-family:var(--mono);font-size:11px;text-transform:uppercase}
.hero-callback-path span{display:flex;align-items:center;gap:7px;white-space:nowrap}
.hero-callback-path b{display:grid;place-items:center;width:25px;height:25px;border:1px solid var(--line-strong);border-radius:50%;color:var(--sky-text);font-weight:500}
.hero-callback-path i{width:34px;height:1px;background:var(--line-strong)}
.callback-hero .h1{max-width:17ch}
.callback-hero .lede{max-width:66ch}
.callback-promise{list-style:none;margin:36px 0 0;padding:0;display:flex;align-items:stretch;gap:0;max-width:760px}
.callback-promise li{position:relative;flex:1 1 0;min-width:0;background:var(--tint);border-radius:14px;padding:16px 18px 16px 18px;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center}
.callback-promise li+li{margin-left:28px}
.callback-promise li+li::before{content:"";position:absolute;left:-28px;top:50%;width:28px;height:0;border-top:2px dotted var(--line-strong)}
.callback-promise li+li::after{content:"";position:absolute;left:-9px;top:calc(50% - 4px);width:8px;height:8px;border-radius:50%;background:var(--sky)}
.callback-promise i{grid-row:1/3;font-family:var(--mono);font-style:normal;font-size:12px;letter-spacing:.02em;color:var(--sky-text);width:32px;height:32px;border-radius:50%;background:#fff;display:grid;place-items:center;border:1px solid var(--line)}
.callback-promise b{color:var(--ink);font-family:var(--display);font-size:20px;font-weight:600;line-height:1.1}
.callback-promise span{color:var(--muted);font-size:13px;line-height:1.35}
.callback-layout{display:grid;grid-template-columns:minmax(0,.82fr) minmax(480px,1.18fr);gap:clamp(36px,6vw,88px);align-items:start}
.callback-explainer{position:sticky;top:112px}
.callback-explainer .h2{max-width:13ch;margin:18px 0 30px}
.callback-steps{display:grid;gap:0;border-top:1px solid var(--line)}
.callback-step{display:grid;grid-template-columns:42px minmax(0,1fr);gap:14px;padding:18px 0;border-bottom:1px solid var(--line)}
.callback-step>span{font-family:var(--mono);font-size:12px;color:var(--sky-text)}
.callback-step h3{font-size:17px;line-height:1.25}
.callback-step p{max-width:46ch;margin-top:4px;color:var(--muted);font-size:14px;line-height:1.55}
.callback-disclosure{margin-top:24px;padding:16px 18px;border-left:3px solid var(--sky);background:#fff;color:var(--ink-2);font-size:13px;line-height:1.6}
.callback-form{position:relative;max-width:none;padding:30px;border:1px solid var(--line-strong);border-radius:var(--r);background:#fff;box-shadow:var(--shadow)}
.callback-form{min-width:0}
.callback-form>.eyebrow{margin-bottom:-2px}
.callback-form h2{font-size:28px;line-height:1.15}
.callback-form-intro{margin-top:-8px;color:var(--muted);font-size:14px;line-height:1.55}
.callback-agent-note{display:flex;align-items:center;gap:9px;margin:0;color:var(--ink-2);font-size:13px;line-height:1.45;font-weight:600}
.callback-agent-note::before{content:"";flex:0 0 8px;width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(31,168,90,.1)}
.callback-fields{gap:14px}
.callback-form textarea{min-height:94px}
.callback-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.callback-submit{width:100%;justify-content:center;min-height:52px}
.callback-submit[disabled]{cursor:wait;opacity:.66}
.callback-fineprint{margin-top:-7px;color:var(--muted);font-size:12px;line-height:1.55;text-align:center}
.form-status{padding:12px 14px;border:1px solid #e6b7b0;border-radius:var(--r-sm);background:#fff5f3;color:#8f3027;font-size:13px;line-height:1.5}
.callback-success{display:grid;gap:14px;padding:22px;border:1px solid rgba(31,168,90,.34);border-radius:var(--r-sm);background:#f4fbf7}
.callback-success[hidden]{display:none}
.callback-form.is-success>:not(.callback-success){display:none!important}
.callback-success-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--green);color:#fff;font-weight:700}
.callback-success h3{font-size:22px;line-height:1.2}
.callback-success p{color:var(--ink-2);font-size:14px;line-height:1.6}
.callback-success .btn{justify-self:start}
.callback-proof .sec-head{align-items:end}
.callback-proof .card .link-arrow{display:block;margin-top:22px;color:var(--sky-text)}
.callback-partner{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted)}
@media (max-width:960px){
  .callback-layout{grid-template-columns:1fr;gap:36px}
  .callback-explainer{position:static}
  .callback-explainer .h2{max-width:18ch}
}
@media (max-width:620px){
  .hero-callback-path{align-items:flex-start;flex-direction:column;gap:8px}
  .hero-callback-path i{width:1px;height:10px;margin-left:12px}
  .callback-promise{flex-direction:column;margin-top:28px;gap:14px}
  .callback-promise li+li{margin-left:0}
  .callback-promise li+li::before,.callback-promise li+li::after{display:none}
  .callback-form{padding:22px 18px}
  .callback-fields{grid-template-columns:1fr}
  .callback-form .check{font-size:13px;line-height:1.5}
  .callback-submit{white-space:normal;padding-inline:14px}
  .form-status{overflow-wrap:anywhere}
}

/* Keep narrow screens usable across every generated page. Long translated
   labels and animated headline variants must wrap inside the viewport rather
   than forcing horizontal scrolling. */
@media (max-width:700px){
  .actions{width:100%;align-items:stretch}
  .actions .btn{max-width:100%;white-space:normal;text-align:center}
  .hero-callback-path{flex-wrap:wrap}
  .h1 .swap{white-space:normal;height:auto}
  .h1 .swap span{white-space:normal}
  .form .grid.cols-2{grid-template-columns:1fr}
  .callback-form .btn{white-space:normal}
  .table-wrap{max-width:100%;-webkit-overflow-scrolling:touch}
}
[dir="rtl"] .callback-promise li+li{margin-left:0;margin-right:28px}
[dir="rtl"] .callback-promise li+li::before{left:auto;right:-28px}
[dir="rtl"] .callback-promise li+li::after{left:auto;right:-9px}
[dir="rtl"] .callback-disclosure{border-right:3px solid var(--sky);border-left:0}

/* ---------- CTA band ---------- */
.cta-band{padding:100px 0;background:var(--navy);color:#fff;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:auto -10% -60% -10%;height:80%;background:radial-gradient(ellipse at center,rgba(98,164,255,.35),transparent 60%);pointer-events:none}
.cta-band .wrap{position:relative;display:grid;gap:22px;justify-items:start}
.cta-band .h2,.cta-band h2{color:#fff}
.cta-band .h2 em{color:var(--sky)}
.cta-band .lede{color:#B8C7E6}
.cta-band .btn-primary{background:var(--sky);color:var(--navy)}
.cta-band .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}

/* ---------- footer ---------- */
.ftr{border-top:1px solid var(--line);padding:64px 0 40px;font-size:14px;color:var(--muted);background:#fff}
.ftr-grid{display:grid;grid-template-columns:1.6fr repeat(5,1fr);gap:32px 24px}
.ftr h4{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin:0 0 14px;font-weight:500}
.ftr ul{list-style:none;display:grid;gap:2px}
.ftr a{display:block;padding:4px 0;color:var(--muted);transition:color .2s}
.ftr a:hover{color:var(--ink)}
.ftr .brand p{margin-top:16px;max-width:34ch;line-height:1.55}
.ftr-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:44px;padding-top:24px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px}
.ftr-legal{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px;line-height:1.4}
.ftr-legal nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ftr-legal nav a{padding:0;color:var(--muted);white-space:nowrap}
.ftr-legal nav a:hover,.privacy-choice:hover{color:var(--ink)}
.ftr-legal nav i{display:block;width:1px;height:12px;background:var(--line-strong)}
.privacy-choice{padding:0;color:var(--ink-2);font:inherit;white-space:nowrap}
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:960px;margin:0 auto;padding:18px 20px;border:1px solid rgba(98,164,255,.35);border-radius:16px;background:var(--navy);box-shadow:0 24px 70px -24px rgba(1,24,56,.65);color:#fff}
.cookie-banner[hidden],.cookie-modal[hidden]{display:none}
.cookie-banner-copy{min-width:0}
.cookie-banner-copy strong{display:block;font-family:var(--display);font-size:17px;color:#fff;line-height:1.2}
.cookie-banner-copy p{margin-top:5px;color:#B8C7E6;font-size:13px;line-height:1.45;max-width:62ch}
.cookie-banner-actions,.cookie-modal-actions{display:flex;align-items:center;gap:10px;flex:none;flex-wrap:wrap}
.cookie-banner .btn,.cookie-modal .btn{font-size:13px;padding:11px 15px;min-height:40px}
.cookie-banner .btn-ghost,.cookie-modal .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.32)}
.cookie-banner .btn-ghost:hover,.cookie-modal .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}
.cookie-unresolved .timed-cta{bottom:120px}
.cookie-modal{position:fixed;inset:0;z-index:92;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .18s ease,visibility .18s ease}
.cookie-modal.show{opacity:1;visibility:visible}
.cookie-modal-backdrop{position:absolute;inset:0;background:rgba(1,24,56,.48);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
.cookie-modal-card{position:relative;width:min(540px,100%);padding:30px;border:1px solid var(--line-strong);border-radius:18px;background:#fff;box-shadow:0 28px 90px -30px rgba(1,24,56,.55)}
.cookie-modal-close{position:absolute;top:18px;right:18px;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:50%;color:var(--ink)}
.cookie-modal-close:hover{background:var(--bg-soft);border-color:var(--ink)}
.cookie-modal-close svg{width:16px;height:16px}
.cookie-modal-card h2{margin:15px 42px 10px 0;font-size:clamp(28px,4vw,38px);line-height:1.05}
.cookie-modal-card>p{color:var(--ink-2);font-size:14px;line-height:1.55;max-width:48ch}
.cookie-options{display:grid;gap:10px;margin:24px 0}
.cookie-option{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:start;gap:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--bg-soft);cursor:pointer}
.cookie-option input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--sky-text)}
.cookie-option span{display:grid;gap:3px;min-width:0}
.cookie-option strong{font-size:14px;color:var(--ink)}
.cookie-option small{font-size:12px;line-height:1.45;color:var(--muted)}
.cookie-option em{font:500 12px var(--mono);letter-spacing:.03em;text-transform:uppercase;color:var(--muted);white-space:nowrap;padding-top:2px}
.cookie-modal-actions{justify-content:flex-end}
.cookie-modal-actions .btn-primary{background:var(--navy);color:#fff}
@media (max-width:1000px){.ftr-grid{grid-template-columns:repeat(3,1fr)}.ftr .brand{grid-column:1/-1}.ftr .brand p{max-width:82ch}}
@media (max-width:700px){
  .ftr-grid{grid-template-columns:1fr 1fr}
  .ftr .brand p{max-width:none}
  .ftr .brand .cbadges{max-width:488px;padding:12px;background:#fff;box-sizing:border-box;gap:16px}
  .ftr .brand .tech-badges{max-width:420px;grid-template-columns:1fr}
  .ftr .brand .tech-badges .tbadge{height:44px;padding:9px 12px;gap:8px;font-size:9px;letter-spacing:.06em}
  .cookie-banner{align-items:stretch;flex-direction:column;gap:14px;padding:16px}
  .cookie-banner-actions{width:100%}
  .cookie-banner-actions .btn{flex:1}
  .cookie-unresolved .timed-cta{bottom:150px}
}
@media (max-width:560px){
  .ftr-grid{grid-template-columns:1fr 1fr}
  .ftr-legal{align-items:flex-start;flex-direction:column;gap:10px}
  .cookie-modal{padding:12px}
  .cookie-modal-card{padding:24px 18px 18px}
  .cookie-option{grid-template-columns:20px minmax(0,1fr)}
  .cookie-option em{grid-column:2}
  .cookie-modal-actions{align-items:stretch;flex-direction:column}
  .cookie-modal-actions .btn{width:100%}
}
@media (max-width:420px){
  .ftr .brand .cbadges,.ftr .brand .tech-badges{max-width:360px}
  .ftr .brand .tech-badges{grid-template-columns:1fr}
}

/* ---------- reveal ---------- */
.rv{transform:translateY(20px);opacity:.25;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s}
.rv.in{transform:none;opacity:1}

/* =========================================================
   HOME PAGE
   ========================================================= */
.hero{position:relative;padding:72px 0 56px;overflow:hidden}
.hero-bg,#stars{position:absolute;inset:0;pointer-events:none}
#stars{width:100%;height:100%}
.hero-bg .grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(ellipse 60% 60% at 30% 40%,#000 10%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 60% 60% at 30% 40%,#000 10%,transparent 75%);opacity:.7}
.hero-bg .blob{display:none}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:40px;align-items:start;position:relative}
@media (max-width:980px){.hero .wrap{grid-template-columns:1fr;gap:28px}.hero{padding:44px 0 36px}}
.live{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);border:1px solid var(--line-strong);border-radius:999px;padding:8px 14px 8px 10px;background:#fff}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 1.8s infinite;flex:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.45)}70%{box-shadow:0 0 0 9px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
.hero .h1{margin:22px 0 18px;font-size:clamp(34px,4.6vw,62px);line-height:.98;letter-spacing:-.04em}
.h1 .swap{display:inline-grid;vertical-align:top;color:var(--sky-text);height:1.02em;line-height:1.2;overflow:hidden;max-width:100%}
.h1 .swap span{grid-area:1/1;white-space:nowrap;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .4s;transform:translateY(110%);opacity:0}
.h1 .swap span.on{transform:translateY(0);opacity:1}
.h1 .swap span.off{transform:translateY(-110%);opacity:0}
.hero .lede{font-size:18.5px;max-width:50ch}
.hero .actions{margin-top:32px}
.hero-note{margin-top:20px;font-size:14px;color:var(--muted)}
.hero-note b{color:var(--ink);font-weight:600}
.hero-speed{margin-top:10px;color:var(--sky-text);font:600 13px/1.45 var(--mono);letter-spacing:.02em}

/* Homepage is a decision path; technical animation belongs on the detail pages. */
body[data-page="index"] #quality .term{display:none}
/* home-outcome-cards, 13 Sep follow-up: the hero proof band went from 3 to 4
   tiles (added "1M+ conversations to date" and "9 countries with live
   operations", dropped the 10K+ minutes tile), so the old index-specific
   3-column override is gone; index now uses the generic repeat(4,auto) below
   like every other page's hero-stats. */
.hero-stats{display:grid;grid-template-columns:repeat(4,auto);gap:28px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line);justify-content:start}
.hero-stats div{font-family:var(--mono);font-size:11.5px;color:var(--muted);letter-spacing:.04em;line-height:1.4;min-width:0}
.hero-stats strong{display:block;font-family:var(--display);font-size:28px;font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1.1;margin-bottom:4px;font-variant-numeric:tabular-nums}
@media (max-width:560px){.hero-stats{grid-template-columns:1fr 1fr;gap:18px}}

.stage{position:relative;max-width:560px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:8px}
.stage canvas{position:relative;width:100%;height:auto;aspect-ratio:1.9/1;display:block;flex:none}
.stage .hud{order:-2;display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:0 4px}
.stage .hud b{color:var(--sky-text);font-weight:500}
.analysis{order:-1;display:flex;gap:8px;flex-wrap:wrap;padding:0 4px}
.analysis span{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 10px;transition:color .4s,border-color .4s}
.analysis span b{color:var(--ink);font-weight:500}
.analysis span.hot{border-color:var(--sky);color:var(--sky-text)}
.analysis span.hot b{color:var(--sky-text)}
.captions{display:flex;flex-direction:column;gap:5px;align-items:flex-start;height:180px;min-height:0;overflow:hidden;justify-content:flex-end;pointer-events:none}
.cap{max-width:86%;padding:6px 10px;border-radius:12px;font-size:13px;line-height:1.4;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s;background:#fff;border:1px solid var(--line);box-shadow:0 8px 24px -14px rgba(1,24,56,.25)}
.cap.show{opacity:1;transform:none}
.cap.ai{background:var(--tint);border-color:var(--tint-2);color:var(--ink)}
.cap.cu{align-self:flex-end;color:var(--ink-2)}
.cap small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.cap.tool{background:none;border:0;box-shadow:none;padding:2px 6px;font-family:var(--mono);font-size:11px;color:var(--green)}
.cap.tool::before{content:"● "}
@media (max-width:980px){.stage{max-width:100%}.captions{height:190px}}

.clients{padding:26px 0 8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-soft)}
.clients .lbl{text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:16px;padding:0 20px}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.track{display:flex;gap:16px;width:max-content;animation:scroll 48s linear infinite;padding-bottom:22px}
.marquee:hover .track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.track span{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-size:14px;font-weight:600;color:var(--ink-2);white-space:nowrap;border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 16px}
.track span i{width:8px;height:8px;border-radius:50%;background:var(--sky)}

.thesis{padding:120px 0 48px}
.thesis .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);gap:64px;align-items:center}
.thesis p{font-family:var(--display);font-size:clamp(26px,3.6vw,48px);line-height:1.14;font-weight:500;letter-spacing:-.025em;max-width:24ch;color:var(--line-strong)}
.thesis p span{transition:color .5s}
.thesis p span.lit{color:var(--ink)}
.thesis p u{text-decoration:none;color:var(--sky-text);border-bottom:2px solid var(--sky)}
.thesis-visual{min-width:0;padding:20px 22px 18px;border:1px solid var(--navy);border-radius:var(--r);background:var(--navy);box-shadow:var(--shadow);color:#cbd8ef;overflow:hidden}
.thesis-visual-head{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.14);font:500 12px var(--mono);letter-spacing:.06em;color:#90a6cc}
.thesis-visual-head b{display:inline-flex;align-items:center;gap:7px;font-weight:500;color:#8ef0b5}
.thesis-visual-head b i{width:7px;height:7px;border-radius:50%;background:#4ee28a;box-shadow:0 0 0 4px rgba(78,226,138,.13);animation:pulse 1.8s infinite}
.thesis-loop{position:relative;min-height:300px;margin:14px 0 10px}
.thesis-orbit{position:absolute;left:50%;top:50%;width:190px;height:190px;border:1px solid rgba(98,164,255,.36);border-radius:50%;transform:translate(-50%,-50%)}
.thesis-orbit::before{content:"";position:absolute;inset:-1px;border:2px solid transparent;border-top-color:var(--sky);border-right-color:rgba(98,164,255,.18);border-radius:50%;animation:thesisOrbit 7s linear infinite}
.thesis-orbit::after{content:"";position:absolute;inset:20px;border:1px dashed rgba(255,255,255,.17);border-radius:50%;animation:thesisOrbit 12s linear infinite reverse}
.thesis-route{position:absolute;left:50%;top:50%;width:39%;height:1px;background:rgba(151,181,226,.34);transform-origin:left center}
.route-a{transform:rotate(-28deg)}.route-b{transform:rotate(28deg)}.route-c{transform:rotate(152deg)}.route-d{transform:rotate(208deg)}
.thesis-runner{position:absolute;left:50%;top:50%;z-index:2;width:7px;height:7px;border-radius:50%;background:#8ef0b5;box-shadow:0 0 0 5px rgba(142,240,181,.12),0 0 16px rgba(142,240,181,.7);animation:thesisRunner 7s linear infinite}
.thesis-node{position:absolute;z-index:3;display:grid;gap:3px;min-width:116px;padding:11px 13px;border:1px solid rgba(151,181,226,.42);border-radius:10px;background:rgba(5,31,67,.92);box-shadow:0 8px 22px rgba(0,0,0,.16);animation:thesisNode 7s ease-in-out infinite}
.thesis-node strong{font:500 11px var(--mono);letter-spacing:.14em;color:#fff}.thesis-node small{font:12px var(--body);color:#91a9d0}
.thesis-node-call{left:0;top:25px}.thesis-node-score{right:0;top:25px;animation-delay:-1.75s}.thesis-node-test{right:0;bottom:25px;animation-delay:-3.5s}.thesis-node-improve{left:0;bottom:25px;animation-delay:-5.25s}
.thesis-core{position:absolute;left:50%;top:50%;z-index:4;display:grid;place-items:center;gap:4px;width:118px;height:118px;border-radius:50%;background:#0d3977;border:1px solid rgba(151,181,226,.58);transform:translate(-50%,-50%);box-shadow:0 0 0 8px rgba(98,164,255,.08),0 12px 30px rgba(0,0,0,.24)}
.thesis-core-mark{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:20px;margin-bottom:1px}
.thesis-core-mark span{display:block;width:4px;border-radius:4px 4px 1px 1px;background:var(--sky);animation:thesisSignal 1.8s ease-in-out infinite}
.thesis-core-mark span:nth-child(1){height:9px}.thesis-core-mark span:nth-child(2){height:18px;animation-delay:-.3s}.thesis-core-mark span:nth-child(3){height:13px;animation-delay:-.6s}
.thesis-core b{font:500 10px var(--mono);letter-spacing:.14em;color:#fff}.thesis-core>span{font:10px var(--body);color:#abc0df}.thesis-core i{width:26px;height:2px;background:var(--sky);animation:thesisMeter 2.4s ease-in-out infinite}
.thesis-telemetry{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);font:500 12px var(--mono);letter-spacing:.02em;color:#90a6cc}.thesis-telemetry span:nth-child(2){color:var(--sky);font-size:14px}.thesis-telemetry i{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:#8ef0b5}
/* The homepage thesis is a service promise, so keep the copy readable and give
   each part of the promise a clear path to its detailed page. */
body[data-page="index"] .thesis{padding:92px 0 84px;background:var(--bg)}
body[data-page="index"] .thesis .wrap{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:56px;align-items:start}
body[data-page="index"] .thesis-copy{max-width:520px}
body[data-page="index"] .thesis-copy .eyebrow{margin-bottom:16px}
body[data-page="index"] .thesis-copy .h2{max-width:14ch;margin:0 0 18px}
body[data-page="index"] .thesis-copy .lede{max-width:44ch;margin:0;font-family:var(--body);font-size:18px;line-height:1.55;font-weight:400;letter-spacing:0;color:var(--muted)}
body[data-page="index"] .thesis-services{grid-column:1/-1}
body[data-page="index"] .thesis-services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-top:4px}
body[data-page="index"] .thesis-service{display:flex;flex-direction:column;min-height:220px;padding:22px 20px;border:1px solid var(--line);border-radius:var(--r);background:#fff;transition:border-color .2s,transform .2s,box-shadow .2s}
body[data-page="index"] .thesis-service:hover{border-color:var(--sky);transform:translateY(-3px);box-shadow:var(--shadow)}
body[data-page="index"] .thesis-service .k{color:var(--sky-text);font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase}
body[data-page="index"] .thesis-service strong{display:block;margin-top:14px;color:var(--ink);font:600 22px/1.08 var(--display);letter-spacing:-.02em}
body[data-page="index"] .thesis-service p{max-width:none;margin:12px 0 20px;color:var(--muted);font-family:var(--body);font-size:14px;line-height:1.48;font-weight:400;letter-spacing:0}
body[data-page="index"] .thesis-service .link-arrow{margin-top:auto;font-size:13px}
@media (max-width:900px){body[data-page="index"] .thesis .wrap{grid-template-columns:1fr;gap:30px}body[data-page="index"] .thesis-copy .h2{max-width:18ch}body[data-page="index"] .thesis-services{grid-template-columns:1fr}body[data-page="index"] .thesis-service{min-height:0}}
.comparison-section{background:var(--bg)}
.compare-table{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.compare-row{display:grid;grid-template-columns:minmax(120px,.72fr) minmax(0,1fr) minmax(0,1.18fr);gap:0;border-top:1px solid var(--line)}
.compare-row:first-child{border-top:0}
.compare-row>span{padding:18px 20px;color:var(--muted);font-size:14px;line-height:1.45}
.compare-row>span+span{border-left:1px solid var(--line)}
.compare-row>span:first-child{font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--sky-text)}
.compare-row>span:last-child{background:linear-gradient(110deg,rgba(235,243,255,.7),rgba(248,251,255,.95));color:var(--ink-2)}
.compare-row b{color:var(--ink);font-weight:600}
.compare-head{background:var(--bg-soft)}
.compare-head>span:last-child{background:rgba(220,234,255,.46)}
.compare-head>span{padding-top:14px;padding-bottom:14px;font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.compare-head>span:first-child{color:var(--muted)}
.compare-head>span:last-child{color:var(--sky-text)}
@media (max-width:700px){.compare-row{grid-template-columns:1fr 1fr}.compare-row>span:first-child{grid-column:1/-1;padding-bottom:4px;border-left:0}.compare-row>span:nth-child(2){border-left:0;padding-top:7px}.compare-row>span:nth-child(3){padding-top:7px}.compare-head{display:none}.compare-row>span:nth-child(2)::before,.compare-row>span:nth-child(3)::before{display:block;margin-bottom:7px;font:500 12px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase}.compare-row>span:nth-child(2)::before{content:attr(data-label);color:var(--muted)}.compare-row>span:nth-child(3)::before{content:attr(data-label);color:var(--sky-text)}}
.product-families{align-items:stretch}
.product-families>.card{display:flex;flex-direction:column;min-height:300px;padding:28px 26px}
.product-families>.card h3{max-width:18ch}
.product-families>.card p{max-width:52ch}
.family-links{margin-top:16px;color:var(--sky-text);font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.product-families>.card .link-arrow{margin-top:auto;padding-top:22px}
.product-included{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;margin-top:18px;padding:20px 22px;border:1px solid var(--tint-2);border-radius:var(--r);background:linear-gradient(110deg,var(--tint),#fff 72%)}
.product-included .tag{margin:0;color:var(--sky-text);white-space:nowrap}
.product-included p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.5}
.product-included .link-arrow{white-space:nowrap;font-size:13px}
@media (max-width:800px){.product-included{grid-template-columns:1fr;gap:10px}.product-included .link-arrow{white-space:normal}}
@media (max-width:560px){.product-included .tag{white-space:normal;line-height:1.35}}
@keyframes thesisOrbit{to{transform:rotate(360deg)}}
@keyframes thesisRunner{0%{transform:translate(-50%,-50%) rotate(-28deg) translateX(0)}25%{transform:translate(-50%,-50%) rotate(28deg) translateX(145px)}50%{transform:translate(-50%,-50%) rotate(152deg) translateX(145px)}75%{transform:translate(-50%,-50%) rotate(208deg) translateX(145px)}100%{transform:translate(-50%,-50%) rotate(332deg) translateX(0)}}
@keyframes thesisNode{0%,100%{border-color:rgba(151,181,226,.42);transform:translateY(0)}12%,25%{border-color:var(--sky);transform:translateY(-3px);box-shadow:0 10px 26px rgba(98,164,255,.16)}}
@keyframes thesisMeter{0%,100%{transform:scaleX(.6);opacity:.65}50%{transform:scaleX(1);opacity:1}}
@keyframes thesisSignal{0%,100%{opacity:.55;transform:scaleY(.72)}50%{opacity:1;transform:scaleY(1)}}
@media (max-width:900px){.thesis{padding:76px 0 36px}.thesis .wrap{grid-template-columns:1fr;gap:40px}.thesis p{max-width:24ch}.thesis-visual{max-width:620px;width:100%;justify-self:center}}
@media (max-width:560px){.thesis-visual{padding:16px 14px 14px}.thesis-loop{min-height:270px}.thesis-orbit{width:156px;height:156px}.thesis-node{min-width:102px;padding:9px 10px}.thesis-node small{font-size:11px}.thesis-node-call{left:-2px;top:18px}.thesis-node-score{right:-2px;top:18px}.thesis-node-test{right:-2px;bottom:18px}.thesis-node-improve{left:-2px;bottom:18px}.thesis-core{width:96px;height:96px}.thesis-core b{font-size:9px}.thesis-core>span{font-size:9px}.thesis-core-mark{height:15px}.thesis-core-mark span:nth-child(1){height:7px}.thesis-core-mark span:nth-child(2){height:14px}.thesis-core-mark span:nth-child(3){height:10px}.thesis-telemetry{font-size:12px}}
@media (prefers-reduced-motion:reduce){.thesis-visual *{animation:none!important}}

/* Agent Factory preview: a compact visual explanation for the home page. */
.factory-preview{overflow:hidden}
.factory-intro{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:end;margin-bottom:42px}
.factory-intro .lede{margin-bottom:18px}
.factory-visual{background:#fff;border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow);padding:0 24px 20px;overflow:hidden}
.factory-visual-head{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:17px 0;border-bottom:1px solid var(--line);font:500 11px var(--mono);letter-spacing:.12em;color:var(--muted)}
.factory-status{display:inline-flex;align-items:center;gap:8px;color:var(--sky-text)}
.factory-status i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--tint);animation:pulse 1.8s infinite}
.factory-track-wrap{overflow-x:auto;padding:28px 0 22px;scrollbar-width:thin}
.factory-track{position:relative;display:grid;grid-template-columns:repeat(5,minmax(122px,1fr));gap:18px;min-width:720px;padding:32px 10px 0}
.factory-track::before{content:"";position:absolute;left:34px;right:34px;top:13px;height:1px;background:var(--line-strong)}
.factory-pulse{position:absolute;z-index:2;left:28px;top:7px;width:13px;height:13px;border-radius:50%;background:var(--sky-text);box-shadow:0 0 0 5px var(--tint),0 2px 8px rgba(1,24,56,.2);animation:factoryTravel 12s linear infinite}
.factory-node{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px;min-height:112px;padding:15px 14px 13px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;animation:factoryFocus 12s ease-in-out infinite}
.factory-node:nth-child(3){animation-delay:-2.4s}.factory-node:nth-child(4){animation-delay:-4.8s}.factory-node:nth-child(5){animation-delay:-7.2s}.factory-node:nth-child(6){animation-delay:-9.6s}
.factory-node b{font:500 11px var(--mono);letter-spacing:.1em;color:var(--sky-text)}
.factory-node strong{font-family:var(--display);font-size:20px;line-height:1.1;color:var(--ink)}
.factory-node small{font-size:12px;color:var(--muted)}
.factory-signal{padding:18px 18px 15px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-sm)}
.factory-signal-head{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:17px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.factory-signal-head b{font-weight:500;color:var(--sky-text)}
.factory-signal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.factory-signal-grid>div{display:grid;grid-template-columns:1fr auto;gap:8px 10px;align-items:center;font-size:12px;color:var(--ink-2)}
.factory-signal-grid>div>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.factory-signal-grid>div>b{font:500 10px var(--mono);color:var(--green);text-transform:uppercase}
.factory-signal-grid>div>i{grid-column:1/-1;height:5px;background:#dce9ff;border-radius:99px;overflow:hidden}
.factory-signal-grid>div>i em{display:block;width:var(--w);height:100%;border-radius:inherit;background:var(--sky-text);transform-origin:left;animation:factoryBar 5.4s ease-in-out infinite}
.factory-signal-grid>div:nth-child(2) em{animation-delay:-1.1s}.factory-signal-grid>div:nth-child(3) em{animation-delay:-2.2s}.factory-signal-grid>div:nth-child(4) em{animation-delay:-3.3s}
.factory-foot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:17px;font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
@keyframes factoryTravel{0%{left:28px}80%,100%{left:calc(100% - 28px)}}
@keyframes factoryFocus{0%,12%,100%{border-color:var(--line-strong);background:#fff;box-shadow:none;transform:none}18%,30%{border-color:var(--sky);background:var(--tint);box-shadow:0 10px 26px -18px var(--sky-text);transform:translateY(-4px)}}
@keyframes factoryBar{0%,100%{opacity:.55;transform:scaleX(.84)}50%{opacity:1;transform:scaleX(1)}}
@media (max-width:900px){.factory-intro{grid-template-columns:1fr;gap:18px}.factory-signal-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.factory-visual{padding:0 16px 16px}.factory-visual-head{align-items:flex-start;flex-direction:column;gap:8px}.factory-track-wrap{margin:0 -2px}.factory-track{padding-top:30px}.factory-track::before{top:12px}.factory-pulse{top:6px}.factory-signal-grid{grid-template-columns:1fr}.factory-foot{display:grid;grid-template-columns:1fr;gap:8px}.factory-foot span:not(:last-child)::after{content:" ↓";color:var(--sky-text)}}

/* A lightweight, human-readable view of Dring building the customer's AI employee. */
.staff-build-visual{position:relative;margin-bottom:22px;border:1px solid rgba(151,181,226,.38);border-radius:24px;background:linear-gradient(135deg,#061D40 0%,#0b2d5e 57%,#123f7b 100%);box-shadow:0 24px 54px -34px rgba(1,24,56,.7);color:#B8C7E6;overflow:hidden;isolation:isolate}
.staff-build-visual::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(151,181,226,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(151,181,226,.08) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent);opacity:.55;pointer-events:none;z-index:-1}
.staff-build-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 24px;border-bottom:1px solid rgba(184,199,230,.18);font:500 10px var(--mono);letter-spacing:.14em;color:#91A9D0}
.staff-build-live{display:inline-flex;align-items:center;gap:8px;color:#8EF0B5}.staff-build-live i{width:7px;height:7px;border-radius:50%;background:#4EE28A;box-shadow:0 0 0 4px rgba(78,226,138,.13);animation:staffLivePulse 1.8s ease-in-out infinite}
.staff-build-board{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,.82fr) minmax(0,1fr);gap:26px;align-items:center;padding:34px 34px 30px}
.staff-build-input,.staff-build-output{display:grid;gap:10px;min-width:0}.staff-build-label{font:500 9px var(--mono);letter-spacing:.13em;color:#8EB9F8}.staff-build-chip{position:relative;display:grid;grid-template-columns:29px minmax(0,1fr) 6px;gap:10px;align-items:center;min-height:58px;padding:10px 12px;border:1px solid rgba(151,181,226,.3);border-radius:12px;background:rgba(7,31,65,.72);box-shadow:0 14px 25px -24px rgba(0,0,0,.75);animation:staffChipFloat 7.2s ease-in-out infinite}.staff-build-chip:nth-child(3){animation-delay:-2.4s}.staff-build-chip:nth-child(4){animation-delay:-4.8s}.staff-build-chip.is-active{border-color:rgba(98,164,255,.82);background:rgba(24,75,138,.72)}.staff-chip-icon{display:grid;place-items:center;width:29px;height:29px;border:1px solid rgba(98,164,255,.55);border-radius:9px;color:#62A4FF;font:500 14px var(--mono)}.staff-build-chip b{display:block;color:#fff;font:600 14px/1.15 var(--display);overflow-wrap:anywhere}.staff-build-chip small{display:block;margin-top:4px;color:#91A9D0;font-size:11px;line-height:1.25}.staff-build-chip>i{width:6px;height:6px;border-radius:50%;background:#62A4FF;box-shadow:0 0 0 4px rgba(98,164,255,.12)}.staff-build-chip.is-active>i{background:#8EF0B5;box-shadow:0 0 0 4px rgba(142,240,181,.12)}
.staff-build-engine{position:relative;display:grid;place-items:center;min-height:230px}.staff-build-core{position:relative;z-index:2;display:grid;place-items:center;gap:5px;width:148px;height:148px;border:1px solid rgba(98,164,255,.78);border-radius:50%;background:radial-gradient(circle at 35% 28%,#2c6db8 0%,#164885 42%,#0d3977 100%);box-shadow:0 0 0 8px rgba(98,164,255,.08),0 0 45px rgba(98,164,255,.22),0 22px 35px -20px rgba(0,0,0,.72);text-align:center}.staff-build-core::after{content:"";position:absolute;inset:9px;border:1px solid rgba(184,199,230,.2);border-radius:50%;pointer-events:none}.staff-build-core span{color:#8EB9F8;font:500 9px var(--mono);letter-spacing:.18em}.staff-build-core b{color:#fff;font:600 25px/1 var(--display);letter-spacing:-.02em}.staff-build-core small{color:#B8C7E6;font-size:11px}.staff-build-orbit{position:absolute;border:1px solid rgba(151,181,226,.3);border-radius:50%;pointer-events:none}.staff-build-orbit-a{width:190px;height:190px;transform:rotate(-28deg);border-style:dashed;animation:staffOrbit 12s linear infinite}.staff-build-orbit-b{width:224px;height:104px;transform:rotate(32deg);border-color:rgba(142,240,181,.35);animation:staffOrbit 15s linear infinite reverse}.staff-build-spark{position:absolute;z-index:3;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(98,164,255,.18),0 0 16px rgba(98,164,255,.9);animation:staffSpark 4.5s ease-in-out infinite}.staff-build-spark-a{top:22px;left:23%;animation-delay:-1.5s}.staff-build-spark-b{right:19%;bottom:26px;background:#8EF0B5;box-shadow:0 0 0 4px rgba(142,240,181,.15),0 0 16px rgba(142,240,181,.8);animation-delay:-3.2s}
.staff-build-card{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;padding:13px 12px;border:1px solid rgba(142,240,181,.55);border-radius:12px;background:rgba(11,54,76,.76);box-shadow:0 16px 28px -22px rgba(0,0,0,.7);animation:staffCardGlow 7.2s ease-in-out infinite}.staff-avatar{position:relative;display:grid;place-items:center;width:36px;height:36px;border:1px solid rgba(142,240,181,.7);border-radius:11px;background:rgba(142,240,181,.12);color:#8EF0B5;font:600 10px var(--mono)}.staff-avatar i{position:absolute;right:-2px;bottom:-2px;width:7px;height:7px;border-radius:50%;background:#4EE28A;border:2px solid #0b364c}.staff-build-card b{display:block;color:#fff;font:600 14px/1.15 var(--display)}.staff-build-card small{display:block;margin-top:4px;color:#B8C7E6;font-size:11px}.staff-build-check{color:#8EF0B5;font:600 18px var(--display)}.staff-build-progress{display:grid;gap:8px;padding:5px 2px 0;color:#91A9D0;font-size:11px}.staff-build-progress>i{display:block;height:4px;border-radius:99px;background:rgba(184,199,230,.15);overflow:hidden}.staff-build-progress em{display:block;width:72%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#62A4FF,#8EF0B5);transform-origin:left;animation:staffProgress 5.2s ease-in-out infinite}
.staff-build-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:15px 34px;border-top:1px solid rgba(184,199,230,.18);font:500 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#91A9D0}.staff-build-foot>i{width:25px;height:1px;background:rgba(98,164,255,.48)}.staff-build-foot strong{margin-left:auto;color:#fff;font:500 12px var(--body);letter-spacing:0;text-transform:none}
@keyframes staffLivePulse{0%,100%{opacity:.55;transform:scale(.86)}50%{opacity:1;transform:scale(1.08)}}
@keyframes staffChipFloat{0%,100%{transform:translateY(0);border-color:rgba(151,181,226,.3)}45%,58%{transform:translateY(-3px);border-color:rgba(98,164,255,.72)}}
@keyframes staffCardGlow{0%,100%{transform:translateY(0);box-shadow:0 16px 28px -22px rgba(0,0,0,.7)}42%,56%{transform:translateY(-4px);box-shadow:0 20px 34px -22px rgba(142,240,181,.38)}}
@keyframes staffOrbit{to{transform:rotate(332deg)}}
@keyframes staffSpark{0%,10%{opacity:0;transform:translateX(0) scale(.6)}22%{opacity:1}78%{opacity:1}92%,100%{opacity:0;transform:translateX(110px) scale(1)}}
@keyframes staffProgress{0%,100%{transform:scaleX(.72);opacity:.72}50%{transform:scaleX(1);opacity:1}}
@media (max-width:980px){.staff-build-board{grid-template-columns:minmax(0,1fr) minmax(190px,.8fr) minmax(0,1fr);gap:16px;padding-left:24px;padding-right:24px}.staff-build-core{width:132px;height:132px}.staff-build-orbit-a{width:170px;height:170px}.staff-build-orbit-b{width:200px;height:94px}}
@media (max-width:700px){.staff-build-visual{border-radius:18px}.staff-build-head{align-items:flex-start;flex-direction:column;gap:9px;padding:16px}.staff-build-board{grid-template-columns:1fr;gap:17px;padding:22px 16px 20px}.staff-build-engine{order:-1;min-height:190px}.staff-build-core{width:124px;height:124px}.staff-build-core b{font-size:23px}.staff-build-orbit-a{width:160px;height:160px}.staff-build-orbit-b{width:188px;height:88px}.staff-build-spark-a{top:11px;left:31%}.staff-build-spark-b{right:28%;bottom:17px}.staff-build-foot{display:grid;grid-template-columns:auto 24px auto 24px auto 24px auto;gap:9px;padding:14px 16px;font-size:8px}.staff-build-foot strong{grid-column:1/-1;margin-left:0;padding-top:5px;font-size:12px}.staff-build-foot>i{width:100%}}
@media (prefers-reduced-motion:reduce){.staff-build-visual *{animation:none!important}.staff-build-spark{opacity:1}.staff-build-progress em{transform:none}}

/* Agent Factory architecture: a customer-safe view of the production system. */
.factory-architecture{overflow:hidden}
.factory-map{background:linear-gradient(135deg,#fff 0%,#fff 68%,var(--tint) 100%);border:1px solid var(--line-strong);border-radius:24px;padding:0 24px 20px;box-shadow:var(--shadow);overflow:hidden}
.factory-map-head{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 0;border-bottom:1px solid var(--line);font:500 12px var(--mono);letter-spacing:.08em;color:var(--muted)}
.factory-map-head b{display:inline-flex;align-items:center;gap:8px;color:var(--sky-text);font-weight:500}
.factory-map-head b i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(22,163,74,.12);animation:pulse 1.8s infinite}
.factory-map-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding:34px 0 22px}
.factory-stage{position:relative;display:grid;align-content:start;gap:17px;min-width:0;min-height:300px;padding:22px 20px 20px;border:1px solid var(--line-strong);border-radius:16px;background:rgba(255,255,255,.92);box-shadow:0 16px 32px -30px rgba(1,24,56,.5)}
.factory-stage:not(:last-child)::after{content:"";position:absolute;z-index:0;top:39px;right:-19px;width:19px;height:1px;background:var(--line-strong)}
.factory-stage-index{position:relative;z-index:1;display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--sky);border-radius:50%;background:var(--tint);color:var(--sky-text);font:500 12px var(--mono)}
.factory-stage-k{display:block;margin-bottom:7px;color:var(--sky-text);font:500 12px var(--mono);letter-spacing:.07em;text-transform:uppercase}
.factory-stage h3{font-size:21px;line-height:1.12;margin-bottom:9px}
.factory-stage p{color:var(--ink-2);font-size:14px;line-height:1.55}
.factory-stage ul{display:grid;gap:9px;margin-top:auto;padding-top:16px;border-top:1px solid var(--line);list-style:none}
.factory-stage li{display:flex;gap:8px;align-items:flex-start;color:var(--muted);font-size:12.5px;line-height:1.4}
.factory-stage li::before{content:"";width:7px;height:7px;flex:none;margin-top:5px;border-radius:50%;background:var(--sky-text);box-shadow:0 0 0 3px var(--tint)}
.factory-stage.is-core{border-color:var(--navy);background:var(--navy);box-shadow:0 18px 34px -24px rgba(1,24,56,.75)}
.factory-stage.is-core .factory-stage-index{border-color:var(--sky);background:rgba(98,164,255,.16);color:var(--sky)}
.factory-stage.is-core .factory-stage-k{color:var(--sky)}
.factory-stage.is-core h3{color:#fff}
.factory-stage.is-core p{color:#B8C7E6}
.factory-stage.is-core ul{border-color:rgba(255,255,255,.16)}
.factory-stage.is-core li{color:#B8C7E6}
.factory-stage.is-core li::before{background:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.14)}
.factory-stage.is-core .factory-stage-index::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 5px rgba(98,164,255,.14),0 0 16px rgba(98,164,255,.7);animation:factoryCorePulse 2.6s ease-in-out infinite}
.factory-map-foot{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-top:17px;border-top:1px solid var(--line);color:var(--muted);font:500 12px var(--mono);letter-spacing:.04em;text-transform:uppercase}
@keyframes factoryCorePulse{0%,100%{transform:scale(.7);opacity:.55}50%{transform:scale(1);opacity:1}}
@media (max-width:980px){.factory-map-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.factory-stage:not(:last-child)::after{display:none}.factory-stage{min-height:260px}}
@media (max-width:640px){.factory-map{padding:0 16px 16px;border-radius:18px}.factory-map-head{align-items:flex-start;flex-direction:column;gap:9px}.factory-map-flow{grid-template-columns:1fr;gap:12px;padding-top:22px}.factory-stage{min-height:0;padding:20px 18px}.factory-stage ul{margin-top:3px}.factory-map-foot{display:grid;grid-template-columns:1fr;gap:8px}.factory-map-foot span:not(:last-child)::after{content:" ↓";color:var(--sky-text)}}
@media (prefers-reduced-motion:reduce){.factory-map-head b i,.factory-stage.is-core .factory-stage-index::after{animation:none}}

/* ---------- Agent Factory infrastructure scene ---------- */
.factory-infra-section{overflow:hidden}
.factory-infra-scene{margin:0;border:1px solid var(--navy);border-radius:24px;background:var(--navy);box-shadow:0 24px 60px -32px rgba(1,24,56,.65);color:#B8C7E6;overflow:hidden}
.factory-infra-head{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 24px;border-bottom:1px solid rgba(184,199,230,.18);font:500 12px var(--mono);letter-spacing:.08em;color:#91A9D0}
.factory-infra-head b{display:inline-flex;align-items:center;gap:8px;color:#8EF0B5;font-weight:500}
.factory-infra-head b i{width:7px;height:7px;border-radius:50%;background:#4EE28A;box-shadow:0 0 0 4px rgba(78,226,138,.12);animation:factoryInfraPulse 1.8s ease-in-out infinite}
.factory-infra-canvas{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.92fr) minmax(0,1fr);gap:34px;align-items:center;min-height:414px;padding:44px 34px 76px;background:#061D40;isolation:isolate}
.factory-infra-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(151,181,226,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(151,181,226,.07) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 82%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 82%,transparent 100%);pointer-events:none;z-index:-1}
.factory-infra-path{position:absolute;z-index:1;height:1px;background:rgba(98,164,255,.36);pointer-events:none}
.factory-infra-path-a{left:25%;width:17%;top:43%}.factory-infra-path-b{left:58%;width:17%;top:43%}.factory-infra-path-c{left:25%;width:17%;top:63%;background:rgba(142,240,181,.28)}.factory-infra-path-d{left:58%;width:17%;top:63%;background:rgba(142,240,181,.28)}
.factory-infra-path::before,.factory-infra-path::after{content:"";position:absolute;top:50%;width:7px;height:7px;border-radius:50%;background:#62A4FF;box-shadow:0 0 0 5px rgba(98,164,255,.11);transform:translateY(-50%)}
.factory-infra-path::before{left:0}.factory-infra-path::after{right:0}
.factory-infra-path-c::before,.factory-infra-path-c::after,.factory-infra-path-d::before,.factory-infra-path-d::after{background:#8EF0B5;box-shadow:0 0 0 5px rgba(142,240,181,.1)}
.factory-infra-path i{position:absolute;left:0;top:50%;z-index:2;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(98,164,255,.2),0 0 14px rgba(98,164,255,.75);transform:translate(-50%,-50%);animation:factoryInfraPacket 4.8s ease-in-out infinite}
.factory-infra-path-b i{animation-delay:-1.5s}.factory-infra-path-c i{background:#8EF0B5;box-shadow:0 0 0 4px rgba(142,240,181,.16),0 0 14px rgba(142,240,181,.65);animation-delay:-2.35s;animation-direction:reverse}.factory-infra-path-d i{background:#8EF0B5;box-shadow:0 0 0 4px rgba(142,240,181,.16),0 0 14px rgba(142,240,181,.65);animation-delay:-3.6s;animation-direction:reverse}
.factory-infra-stack{position:relative;z-index:3;display:grid;gap:12px;min-width:0}
.factory-infra-kicker{color:#8EB9F8;font:500 12px var(--mono);letter-spacing:.06em}
.factory-infra-node{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;min-width:0;min-height:64px;padding:12px 14px;border:1px solid rgba(151,181,226,.36);border-radius:12px;background:rgba(7,34,72,.86);box-shadow:0 16px 30px -24px rgba(0,0,0,.65);animation:factoryInfraNode 8s ease-in-out infinite}
.factory-infra-node:nth-of-type(3){animation-delay:-4s}
.factory-infra-node-icon{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(98,164,255,.55);border-radius:9px;color:#62A4FF;font:500 12px var(--mono);font-style:normal}
.factory-infra-node div{min-width:0}.factory-infra-node strong{display:block;color:#fff;font:600 14px/1.15 var(--display);overflow-wrap:anywhere}.factory-infra-node small{display:block;margin-top:4px;color:#91A9D0;font:13px/1.35 var(--body);overflow-wrap:anywhere}.factory-infra-node>b{color:#8EF0B5;font:500 12px var(--mono);letter-spacing:.03em}
.factory-infra-caption{max-width:28ch;color:#91A9D0;font-size:12px;line-height:1.45}
.factory-infra-core{position:relative;z-index:3;display:grid;place-items:center;gap:7px;min-width:0;min-height:270px;padding:34px 25px;border:1px solid rgba(98,164,255,.7);border-radius:22px;background:linear-gradient(180deg,#164885 0%,#0D3977 100%);box-shadow:0 0 0 8px rgba(98,164,255,.07),0 24px 42px -24px rgba(0,0,0,.78);text-align:center;overflow:hidden}
.factory-infra-core::before{content:"";position:absolute;inset:9px;border:1px solid rgba(184,199,230,.16);border-radius:16px;pointer-events:none}
.factory-infra-core-kicker,.factory-infra-core-status{position:relative;z-index:1;color:#8EB9F8;font:500 12px var(--mono);letter-spacing:.04em;text-transform:uppercase}.factory-infra-core>strong{position:relative;z-index:1;max-width:12ch;color:#fff;font:600 clamp(25px,3vw,36px)/1.06 var(--display);letter-spacing:0;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.18)}.factory-infra-core>strong em{color:#62A4FF;font-style:normal}.factory-infra-core>small{position:relative;z-index:1;max-width:20ch;color:#B8C7E6;font:13px/1.45 var(--body);text-wrap:balance}
.factory-infra-core-bars{position:relative;z-index:1;display:grid;gap:9px;width:100%;margin-top:12px;padding-top:12px;border-top:1px solid rgba(184,199,230,.17)}.factory-infra-core-bars i{position:relative;display:block;width:calc(100% - 160px);height:4px;margin-right:160px;border-radius:99px;background:rgba(184,199,230,.14);font-style:normal}.factory-infra-core-bars i::after{content:"";display:block;width:var(--bar);height:100%;border-radius:inherit;background:#62A4FF;transform-origin:left;animation:factoryInfraBar 3.6s ease-in-out infinite}.factory-infra-core-bars i:nth-child(2)::after{background:#8EF0B5;animation-delay:-1.2s}.factory-infra-core-bars i:nth-child(3)::after{animation-delay:-2.3s}.factory-infra-core-bars b{position:absolute;left:calc(100% + 9px);top:50%;color:#B8C7E6;font:12px/1 var(--mono);font-weight:500;white-space:nowrap;transform:translateY(-50%)}
.factory-infra-core-status{display:inline-flex;align-items:center;justify-content:center;gap:7px;margin-top:6px;color:#8EF0B5;font-size:12px;letter-spacing:.02em;line-height:1.35;text-align:center}.factory-infra-core-status i{width:6px;height:6px;border-radius:50%;background:#8EF0B5;box-shadow:0 0 0 4px rgba(142,240,181,.1);animation:factoryInfraPulse 1.8s ease-in-out infinite}
.factory-infra-telemetry{position:absolute;z-index:3;left:34px;right:34px;bottom:25px;display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;padding-top:14px;border-top:1px solid rgba(184,199,230,.16);color:#91A9D0;font:500 12px var(--mono);letter-spacing:.02em;text-transform:uppercase}.factory-infra-telemetry span,.factory-infra-telemetry b{display:inline-flex;align-items:center;gap:7px}.factory-infra-telemetry span i{width:6px;height:6px;border-radius:50%;background:#62A4FF;box-shadow:0 0 0 4px rgba(98,164,255,.12)}.factory-infra-telemetry b{color:#8EB9F8;font-weight:500}.factory-infra-telemetry em{text-align:right;font-style:normal}.factory-infra-telemetry em strong{color:#fff;font-weight:500}
.factory-infra-feedback{display:flex;align-items:center;gap:12px;padding:15px 34px;border-top:1px solid rgba(184,199,230,.18);color:#91A9D0;font:500 12px var(--mono);letter-spacing:.05em;text-transform:uppercase}.factory-infra-feedback>i{position:relative;width:42px;height:1px;background:rgba(142,240,181,.43)}.factory-infra-feedback>i::after{content:"";position:absolute;right:0;top:50%;width:5px;height:5px;border-radius:50%;background:#8EF0B5;transform:translate(50%,-50%)}.factory-infra-feedback>b{display:inline-flex;align-items:center;gap:8px;margin-left:auto;color:#8EF0B5;font-weight:500}.factory-infra-feedback>b i{width:6px;height:6px;border-radius:50%;background:#8EF0B5;animation:factoryInfraPulse 1.8s ease-in-out infinite}
.factory-infra-scene figcaption{padding:18px 34px 21px;border-top:1px solid rgba(184,199,230,.18);color:#B8C7E6;font-size:14px;line-height:1.55}.factory-infra-scene figcaption strong{color:#fff}
@keyframes factoryInfraPacket{0%,8%{left:0;opacity:0}18%{opacity:1}78%{left:100%;opacity:1}92%,100%{left:100%;opacity:0}}
@keyframes factoryInfraNode{0%,100%{border-color:rgba(151,181,226,.36);transform:translateY(0)}9%,27%{border-color:rgba(98,164,255,.9);transform:translateY(-2px);box-shadow:0 12px 25px -20px rgba(98,164,255,.9)}}
@keyframes factoryInfraBar{0%,100%{transform:scaleX(.88);opacity:.7}50%{transform:scaleX(1);opacity:1}}
@keyframes factoryInfraPulse{0%,100%{opacity:.55;transform:scale(.88)}50%{opacity:1;transform:scale(1.1)}}
@media (max-width:980px){.factory-infra-canvas{grid-template-columns:minmax(0,1fr) minmax(220px,.95fr) minmax(0,1fr);gap:17px;padding-left:24px;padding-right:24px}.factory-infra-path-a,.factory-infra-path-c{left:27%;width:12%}.factory-infra-path-b,.factory-infra-path-d{left:61%;width:12%}.factory-infra-telemetry{left:24px;right:24px}.factory-infra-feedback{padding-left:24px;padding-right:24px}.factory-infra-core-bars{gap:22px;padding-top:26px}.factory-infra-core-bars i{width:100%;margin-right:0}.factory-infra-core-bars b{left:0;top:auto;bottom:calc(100% + 6px);transform:none}}
@media (max-width:700px){.factory-infra-scene{border-radius:18px}.factory-infra-head{align-items:flex-start;flex-direction:column;gap:9px;padding:16px}.factory-infra-canvas{grid-template-columns:1fr;gap:14px;min-height:0;padding:25px 16px 82px}.factory-infra-path{display:none}.factory-infra-core{order:-1;min-height:235px;padding:32px 20px}.factory-infra-core>strong{max-width:11ch}.factory-infra-stack{gap:10px}.factory-infra-caption{max-width:none}.factory-infra-telemetry{left:16px;right:16px;bottom:22px;grid-template-columns:1fr auto;gap:8px;font-size:12px}.factory-infra-telemetry em{grid-column:1/-1;text-align:left}.factory-infra-feedback{display:grid;grid-template-columns:1fr auto;gap:9px 12px;padding:15px 16px;font-size:12px;letter-spacing:.04em}.factory-infra-feedback>i{width:100%}.factory-infra-feedback>b{grid-column:1/-1;margin-left:0;padding-top:4px}.factory-infra-scene figcaption{padding:16px;font-size:13px}}
@media (prefers-reduced-motion:reduce){.factory-infra-head b i,.factory-infra-path i,.factory-infra-node,.factory-infra-core-bars i::after,.factory-infra-core-status i,.factory-infra-feedback>b i{animation:none}.factory-infra-path i{left:50%;opacity:1}}

/* story */
.story{padding:80px 0}
.story .wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.phone-wrap{position:sticky;top:calc(50vh - 240px)}
.phone{position:relative;border:1px solid var(--line-strong);border-radius:28px;background:#fff;box-shadow:var(--shadow);height:480px;overflow:hidden;padding:22px;display:flex;flex-direction:column}
.phone .ph-top{display:flex;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pane{position:absolute;left:22px;right:22px;top:64px;bottom:64px;opacity:0;transform:translateY(16px) scale(.98);transition:opacity .5s,transform .5s;display:flex;flex-direction:column;justify-content:center;gap:14px;pointer-events:none}
.pane.on{opacity:1;transform:none;pointer-events:auto}
.panel{background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-family:var(--mono);font-size:12.5px;line-height:1.7;color:var(--ink-2)}
.panel .k{color:var(--sky-text)}.panel .ok{color:var(--green)}.panel .dim{color:var(--muted)}
.panel h5{margin:0 0 6px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.intent{display:flex;gap:8px;flex-wrap:wrap}
.intent span{font-family:var(--mono);font-size:11px;padding:5px 10px;border-radius:999px;border:1px solid var(--line-strong);color:var(--ink-2);background:#fff}
.intent span.hit{border-color:var(--sky-text);color:var(--sky-text);background:var(--tint)}
.score{display:grid;grid-template-columns:1fr auto;gap:6px 14px;font-family:var(--mono);font-size:12px}
.score b{color:var(--ink);font-weight:500}
.score .bar{grid-column:1/-1}
.pane .bar i{width:0}
.pane.on .bar i{width:var(--w)}
.steps-scroll{display:flex;flex-direction:column}
.st{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding:40px 0 40px 36px;border-left:1px solid var(--line);position:relative;transition:opacity .4s}
.st::before{content:"";position:absolute;left:-5px;top:calc(50% - 5px);width:9px;height:9px;border-radius:50%;background:var(--line-strong);transition:all .4s}
.st.on::before{background:var(--sky-text);box-shadow:0 0 0 6px var(--tint)}
.st:not(.on){opacity:.35}
.st .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-text);margin-bottom:12px;display:block}
.st h3,.st h2{font-size:clamp(26px,3.2vw,40px);font-weight:600;line-height:1.06;margin-bottom:14px;letter-spacing:-.03em}
.st p{color:var(--ink-2);font-size:17px;max-width:44ch}
@media (max-width:900px){.story .wrap{grid-template-columns:1fr;gap:28px}.phone-wrap{position:static}.st{min-height:auto;opacity:1!important;padding:24px 0 24px 28px}}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.bento .card{min-height:220px}
.bento .num{font-family:var(--display);font-size:clamp(40px,4.6vw,66px);font-weight:600;letter-spacing:-.045em;line-height:1;margin:14px 0 6px;color:var(--ink);font-variant-numeric:tabular-nums}
.bento .num.sm{font-size:clamp(26px,2.8vw,38px)}
.bento .card .arrow{position:absolute;top:22px;right:22px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--muted);transition:all .25s;font-size:14px}
.bento .card:hover .arrow{background:var(--navy);color:#fff;border-color:var(--navy);transform:rotate(45deg)}
.bento .card .tag{padding-right:44px}
.c-2{grid-column:span 2}.c-3{grid-column:span 3}.c-4{grid-column:span 4}
.bento .feature{background:linear-gradient(135deg,var(--tint),#fff 60%);border-color:var(--tint-2)}
.bento .feature .num{color:var(--sky-text)}
.bento .spark{width:100%;height:64px;margin-top:auto;opacity:.9}
.bento .spark path.l{stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 2s ease}
.in .spark path.l{stroke-dashoffset:0}
.bento .ring{width:64px;height:64px;margin-top:auto;align-self:flex-end}
.bento .ring circle{fill:none;stroke:var(--line);stroke-width:5}
.bento .ring circle.p{stroke:var(--sky);stroke-dasharray:176;stroke-dashoffset:176;transition:stroke-dashoffset 1.8s ease;transform:rotate(-90deg);transform-origin:center}
.in .ring circle.p{stroke-dashoffset:var(--o,0)}
@media (max-width:1000px){.c-2,.c-3,.c-4{grid-column:span 3}}
@media (max-width:640px){.c-2,.c-3,.c-4{grid-column:span 6}}

/* platform strip */
.plat{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.plat>div{background:#fff;padding:28px 26px;min-height:200px;display:flex;flex-direction:column;gap:12px;transition:background .25s;min-width:0}
.plat>div:hover{background:var(--bg-soft)}
.plat .ic{width:42px;height:42px;border-radius:12px;background:var(--tint);display:grid;place-items:center;color:var(--sky-text);transition:transform .3s,background .3s,color .3s}
.plat>div:hover .ic{transform:translateY(-3px);background:var(--navy);color:#fff}
.plat .ic svg{width:20px;height:20px}
.plat h3{font-size:18px;font-weight:600;margin-top:4px}
.plat p{color:var(--ink-2);font-size:14.5px;line-height:1.55}
@media (max-width:1000px){.plat{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.plat{grid-template-columns:1fr}}

/* network svg */
.integ{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:center}
@media (max-width:900px){.integ{grid-template-columns:1fr}}
.net{width:100%;max-width:640px;margin:0 auto;display:block;height:auto}
.net .wire{fill:none;stroke:var(--line-strong);stroke-width:1.2}
.net .pulse{fill:var(--sky-text)}
.net .pulse.g{fill:var(--green)}
.net .node rect{fill:#fff;stroke:var(--line-strong);stroke-width:1}
.net .node text{fill:var(--ink);font:600 12.5px var(--body)}
.net .core rect{fill:var(--navy)}
.net .core text{fill:#fff;font:600 13px var(--display);letter-spacing:.06em}
.net .lbl{fill:var(--muted);font:11px var(--mono);letter-spacing:.12em}

/* pipeline */
.pipe{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:20px}
.pipe::before{content:"";position:absolute;left:0;right:0;top:18px;height:1px;background:var(--line)}
.pipe .fill{position:absolute;left:0;top:18px;height:1px;background:linear-gradient(90deg,var(--sky-deep),var(--sky));width:0;transition:width 2.4s cubic-bezier(.2,.8,.2,1)}
.pipe.go .fill{width:100%}
.step{position:relative;padding-top:54px;min-width:0}
.step .n{position:absolute;top:0;left:0;width:36px;height:36px;border-radius:50%;background:#fff;border:1px solid var(--line-strong);display:grid;place-items:center;font-family:var(--mono);font-size:12px;color:var(--muted);transition:all .4s}
.pipe.go .step .n{background:var(--navy);color:#fff;border-color:var(--navy)}
.pipe.go .step:nth-child(3) .n{transition-delay:.45s}.pipe.go .step:nth-child(4) .n{transition-delay:.9s}.pipe.go .step:nth-child(5) .n{transition-delay:1.35s}.pipe.go .step:nth-child(6) .n{transition-delay:1.8s}
.step h3{font-size:21px;font-weight:600;margin-bottom:8px}
.step .k{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-text);margin-bottom:6px;display:block}
.step p{color:var(--ink-2);font-size:14.5px;line-height:1.55}
@media (max-width:900px){.pipe{grid-template-columns:1fr;gap:26px}.pipe::before,.pipe .fill{display:none}.step{padding-top:0;padding-left:52px}}

/* quality terminal */
.qgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:48px}
@media (max-width:900px){.qgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.qgrid{grid-template-columns:1fr}}
.term{margin-top:56px;background:var(--navy);border-radius:var(--r);font-family:var(--mono);font-size:12.5px;line-height:1.8;color:#B8C7E6;overflow:hidden;box-shadow:var(--shadow)}
.term .tbar{display:flex;gap:6px;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.08);align-items:center}
.term .tbar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
.term pre{margin:0;padding:18px 20px;overflow-x:auto;white-space:pre;min-height:200px;font-family:inherit}
.term .ln{display:block;opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s}
.term .ln.on{opacity:1;transform:none}
.term .ok{color:#5BE39A}.term .k{color:var(--sky)}.term .dim{color:#7F94BC}
.term .cursor{display:inline-block;width:8px;height:14px;background:var(--sky);vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* voices */
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.voices:has(.v:only-child){grid-template-columns:minmax(0,520px)}
@media (max-width:900px){.voices{grid-template-columns:1fr}}
.v{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:18px;transition:border-color .25s,box-shadow .25s;min-width:0}
.v:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.v .meta{display:flex;justify-content:space-between;gap:12px;align-items:center;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.v h3{font-size:20px;font-weight:600}
.wave{display:flex;align-items:center;gap:3px;height:48px}
.wave i{flex:1;background:var(--tint-2);border-radius:2px;height:20%;transition:height .25s,background .25s}
.v.playing .wave i{background:var(--sky);animation:none;transition:height .08s linear;will-change:height}
.v .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.play{width:44px;height:44px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;transition:transform .2s;flex:none}
.play:hover{transform:scale(1.06)}
.play:disabled{cursor:wait;opacity:.68;transform:none}
.play svg{width:16px;height:16px}
.v .row span{color:var(--ink-2);font-size:14px}
.v .row .audio-status{flex-basis:100%;padding-left:56px;color:var(--muted);font-size:12px}
.v.audio-error .audio-status{color:#ad4f42}
#voices .voices{grid-template-columns:repeat(4,minmax(0,1fr))}
#voices .voices:has(.v:only-child){grid-template-columns:repeat(4,minmax(0,1fr))}
#voices .v{padding:20px;gap:14px}
#voices .v h3{font-size:19px;line-height:1.18;min-height:2.36em}
#voices .v .meta{font-size:10px}
.v-link{margin-top:auto;font-size:14px}
.voices-more{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
@media (max-width:1100px){#voices .voices{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){#voices .voices,#voices .voices:has(.v:only-child){grid-template-columns:1fr}.voices-more{align-items:flex-start;flex-direction:column;gap:10px}}

/* Localized homepages have one native audio asset today. Use the open space
   beside it to make the sector paths visible instead of implying missing audio. */
.voices-shell{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(320px,.98fr);gap:18px;align-items:stretch}
.voices-shell>.voices{grid-template-columns:1fr!important;align-content:stretch}
.voices-shell>.voices .v{height:100%}
.voices-sidecar{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;padding:22px;border:1px solid var(--line);border-radius:var(--r);background:#f6f8fd}
.voices-sidecar::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(135deg,#000,transparent 78%);-webkit-mask-image:linear-gradient(135deg,#000,transparent 78%)}
.voices-sidecar>*{position:relative}
.voices-sidecar-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--line-strong);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.voices-sidecar-head span{max-width:22ch}
.voices-sidecar-head b{color:var(--sky-text);font-weight:500;white-space:nowrap}
.voices-sidecar-row{display:grid;grid-template-columns:34px minmax(0,1fr) 22px;gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);color:var(--ink);transition:color .2s,transform .2s}
.voices-sidecar-row:last-of-type{border-bottom:0}
.voices-sidecar-row:hover{color:var(--sky-text);transform:translateX(4px)}
.voices-sidecar-row .index{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--tint-2);border-radius:50%;font:500 11px var(--mono);color:var(--sky-text);background:#fff}
.voices-sidecar-row strong{display:block;font-size:16px;font-weight:600;line-height:1.2}
.voices-sidecar-row small{display:block;margin-top:4px;color:var(--muted);font-size:13px;line-height:1.35}
.voices-sidecar-row .arrow{font-size:20px;color:var(--sky-text);text-align:right}
.voices-sidecar .link-arrow{margin-top:auto;padding-top:18px}
@media (max-width:900px){.voices-shell{grid-template-columns:1fr}.voices-sidecar{min-height:0}}
@media (max-width:600px){.voices-sidecar{padding:18px}.voices-sidecar-head{flex-direction:column;gap:8px}.voices-sidecar-row{grid-template-columns:32px minmax(0,1fr) 18px}.voices-sidecar-row strong{font-size:15px}}

/* The demo and sector paths form one balanced pair on desktop. A compact 2x2
   path grid keeps the panel the same visual weight as the audio card; it returns
   to a readable vertical list on smaller screens. */
@media (min-width:901px){
  .voices-sidecar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;align-content:start}
  .voices-sidecar-head,.voices-sidecar>.link-arrow{grid-column:1/-1}
  .voices-sidecar-row{min-width:0;padding:14px 0}
  .voices-sidecar-row:nth-of-type(odd){border-right:1px solid var(--line);padding-right:14px}
  .voices-sidecar>.link-arrow{border-right:0}
}
@media (max-width:900px){
  .voices-sidecar{display:flex}
  .voices-sidecar-row:nth-of-type(odd){border-right:0;padding-right:0}
}

/* Industry and solution pages use one focused demo: give it a real stage so the
   sample is discoverable without leaving a large, empty column beside it. */
.voice-demo .sec-head{grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);grid-template-areas:"copy lede";margin-bottom:32px}
.voice-demo .sec-head>div{grid-area:copy;min-width:0}
.voice-demo .sec-head>.lede{grid-area:lede;min-width:0}
.voice-demo .voices,.voice-demo .voices:has(.v:only-child){grid-template-columns:1fr;max-width:none}
.voice-demo .voices.rv{opacity:1;transform:none}
.voice-demo .v{display:grid;grid-template-columns:minmax(230px,.75fr) minmax(0,1.25fr);grid-template-areas:"meta wave" "title wave" "row wave";column-gap:34px;row-gap:10px;align-items:center;min-width:0;padding:26px 30px;border-color:var(--tint-2);background:linear-gradient(110deg,#fff,var(--bg-soft))}
.voice-demo .sec-head .lede{max-width:48ch}
.voice-demo .v{box-shadow:0 16px 36px -28px rgba(1,24,56,.35)}
.voice-demo .v .meta{grid-area:meta}
.voice-demo .v h3{grid-area:title;font-size:clamp(22px,2.8vw,32px);max-width:16ch}
.voice-demo .v .wave{grid-area:wave;height:86px;padding:0 8px;border-left:1px solid var(--line-strong)}
.voice-demo .v .row{grid-area:row;align-self:end}
.voice-demo .v .row>span:not(.audio-status){font-size:13.5px;color:var(--muted)}
@media (max-width:900px){
  .voice-demo .sec-head{grid-template-columns:1fr;grid-template-areas:"copy" "lede"}
  .voice-demo .v{grid-template-columns:1fr;grid-template-areas:"meta" "title" "wave" "row";row-gap:14px}
  .voice-demo .v .wave{height:64px;padding:12px 0 0;border-left:0;border-top:1px solid var(--line-strong)}
}
@media (max-width:560px){.voice-demo .v{padding:22px}.voice-demo .v h3{max-width:20ch}.voice-demo .v .row{align-items:flex-start;flex-direction:column;gap:10px}.voice-demo .v .row .audio-status{padding-left:0}}
.voice-demo .v.playing{border-color:var(--sky);box-shadow:var(--shadow)}
@media (max-width:600px){
  .voice-demo .v{grid-template-columns:1fr;grid-template-areas:"meta" "title" "wave" "row";row-gap:16px;padding:22px}
  .voice-demo .v .wave{height:58px;border-left:0;border-top:1px solid var(--line);padding:14px 0 0}
}

/* case teaser */
.case{background:linear-gradient(125deg,var(--tint) 0%,#fff 68%);border:1px solid var(--tint-2);border-radius:24px;padding:clamp(32px,4.5vw,56px);display:grid;grid-template-columns:minmax(0,1.08fr) minmax(330px,.92fr);gap:clamp(32px,5vw,64px);align-items:stretch;position:relative;overflow:hidden;box-shadow:0 24px 60px -42px rgba(1,24,56,.34)}
.case>div:first-child{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-width:0;max-width:660px}
@media (max-width:1040px) and (min-width:901px){.case{grid-template-columns:minmax(0,1.05fr) minmax(310px,.95fr);gap:34px;padding:38px}.case .kpi-list{padding-left:28px}}
.case h3{max-width:17ch;font-size:clamp(25px,2.8vw,36px);font-weight:600;line-height:1.12;margin:16px 0 18px;letter-spacing:-.03em}
.case p{color:var(--ink-2);font-size:16px;line-height:1.65;max-width:50ch}
.case .kpi-list{align-content:stretch;gap:0;padding-left:clamp(24px,3.5vw,44px);border-left:1px solid var(--line-strong)}
.case .kpi{grid-template-columns:minmax(130px,.92fr) minmax(0,1.08fr);gap:18px;align-items:center;min-height:92px;padding:0 0 22px;margin:0 0 22px}
.case .kpi:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
.case .kpi strong{font-size:clamp(36px,4.2vw,54px)}
.case .kpi span{max-width:25ch;line-height:1.55}
@media (max-width:900px){.case{grid-template-columns:1fr;padding:32px}.case .kpi-list{padding:26px 0 0;border-left:0;border-top:1px solid var(--line-strong)}.case .kpi span{max-width:42ch}}
@media (max-width:480px){.case{padding:24px;border-radius:18px}.case h3{max-width:20ch}.case .kpi{grid-template-columns:1fr;gap:7px;min-height:0;padding-bottom:18px;margin-bottom:18px}.case .kpi strong{font-size:40px}}
.case .link-arrow{margin-top:26px}

/* live call network: a product visual that turns the global footprint into a useful flow */
.call-network-section{padding:30px 0 80px;background:var(--bg)}
.call-network-heading{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr);gap:40px;align-items:end;margin-bottom:38px}
.call-network-heading .h2{margin-top:18px;max-width:18ch}
.call-network-heading .lede{max-width:52ch}
.call-network-visual{position:relative;isolation:isolate;overflow:hidden;padding:22px 24px 18px;border:1px solid var(--line-strong);border-radius:22px;background:var(--bg-soft);box-shadow:0 26px 62px -42px rgba(1,24,56,.38)}
.call-network-visual::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(201,213,234,.27) 1px,transparent 1px),linear-gradient(90deg,rgba(201,213,234,.27) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.62) 72%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.62) 72%,transparent 100%);pointer-events:none}
.call-network-topbar,.network-core-head,.call-network-log{display:flex;align-items:center;justify-content:space-between;gap:16px;font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.call-network-topbar{padding-bottom:16px;border-bottom:1px solid var(--line-strong);color:var(--muted)}
.call-network-topbar>span:last-child{display:inline-flex;align-items:center;gap:8px;color:var(--green)}
.call-network-topbar i,.network-core-head b i,.network-log-state i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(22,163,74,.12)}
.call-network-topbar i{animation:pulse 1.8s infinite}
.call-network-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(260px,.82fr) minmax(0,1.04fr);gap:28px;align-items:stretch;padding:26px 0 22px}
.call-network-grid::before{content:"";position:absolute;z-index:0;left:29%;right:29%;top:50%;height:1px;background:repeating-linear-gradient(90deg,var(--line-strong) 0 8px,transparent 8px 16px)}
.call-network-grid::after{content:"";position:absolute;z-index:0;top:calc(50% - 3px);left:29%;width:7px;height:7px;border-radius:50%;background:var(--sky-text);box-shadow:0 0 0 5px rgba(98,164,255,.14);animation:networkRail 3.2s ease-in-out infinite}
.network-column,.network-core{position:relative;z-index:1;min-width:0}
.network-column-label{margin-bottom:12px;color:var(--muted);font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.network-source-list,.network-outcome-list{display:grid;gap:8px}
.network-source{display:grid;grid-template-columns:34px minmax(0,1fr) 8px;align-items:center;gap:10px;min-height:52px;padding:8px 10px;border:1px solid var(--line-strong);border-radius:10px;background:rgba(255,255,255,.86);transition:background .35s,border-color .35s,box-shadow .35s,transform .35s}
.network-source.is-active{border-color:var(--sky);background:var(--tint);box-shadow:0 10px 24px -18px rgba(47,111,209,.8);transform:translateX(3px)}
.region-code{display:grid;place-items:center;width:30px;height:26px;border-radius:6px;background:var(--tint-2);color:var(--sky-text);font:600 10px var(--mono);letter-spacing:.04em}
.network-source strong,.network-source small,.network-outcome strong,.network-outcome small{display:block;overflow-wrap:anywhere}
.network-source strong{color:var(--ink);font:600 12.5px/1.25 var(--display)}
.network-source small{margin-top:2px;color:var(--muted);font-size:10.5px;line-height:1.25}
.network-source>i{width:7px;height:7px;border-radius:50%;background:var(--line-strong);transition:background .3s,box-shadow .3s}
.network-source.is-active>i{background:var(--sky-text);box-shadow:0 0 0 4px rgba(98,164,255,.18);animation:networkSourcePulse 1.5s ease-in-out infinite}
.network-core{display:flex;flex-direction:column;min-height:382px;padding:20px;border:1px solid var(--navy);border-radius:18px;background:var(--navy);color:#B8C7E6;box-shadow:0 18px 38px -26px rgba(1,24,56,.7)}
.network-core::before{content:"";position:absolute;inset:10px;border:1px dashed rgba(98,164,255,.34);border-radius:12px;pointer-events:none}
.network-core-head{position:relative;color:#9CB0D4}
.network-core-head b{display:inline-flex;align-items:center;gap:8px;color:#8EF0B5;font-weight:500}
.network-core-head b i{width:6px;height:6px;background:#4EE28A;box-shadow:none;animation:pulse 1.8s infinite}
.network-core-signal{position:relative;margin:28px 0 22px;padding:16px;border:1px solid rgba(98,164,255,.42);border-radius:12px;background:rgba(30,79,151,.34)}
.network-core-signal>span{display:block;color:var(--sky);font:500 10px var(--mono);letter-spacing:.14em}
.network-core-signal strong{display:block;margin-top:8px;color:#fff;font:600 clamp(20px,2.1vw,27px)/1.1 var(--display);letter-spacing:-.025em}
.network-core-signal p{margin-top:8px;color:#9CB0D4;font-size:12px}
.network-core-signal p b{color:#D9E5FA;font-weight:600}.network-core-signal p i{padding:0 4px;color:var(--sky)}
.network-core-stages{position:relative;display:grid;gap:7px}
.network-stage{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px 10px;border:1px solid rgba(151,181,226,.22);border-radius:9px;background:rgba(255,255,255,.035);color:#94A8CC;transition:background .35s,border-color .35s,color .35s,transform .35s}
.network-stage b{font:500 10px var(--mono);color:#82A4D8}.network-stage span{font:600 12px var(--display);color:inherit}.network-stage small{font-size:10px;color:inherit;text-align:right;white-space:nowrap}
.network-stage.is-active{border-color:var(--sky);background:rgba(98,164,255,.2);color:#fff;transform:translateX(4px)}
.network-stage.is-done{border-color:rgba(78,226,138,.52);color:#8EF0B5}
.network-core-foot{position:relative;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);color:#8EA5CC;font:500 9px var(--mono);letter-spacing:.07em;text-transform:uppercase}
.network-outcome{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:center;gap:10px;min-height:66px;padding:12px 13px;border:1px solid var(--line-strong);border-radius:10px;background:rgba(255,255,255,.82);opacity:.58;transition:opacity .35s,background .35s,border-color .35s,transform .35s}
.network-outcome.is-active{opacity:1;border-color:var(--green);background:#fff;box-shadow:0 10px 24px -18px rgba(22,163,74,.55);transform:translateX(-3px)}
.network-outcome>i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--tint);color:var(--sky-text);font:600 14px var(--body)}
.network-outcome.is-active>i{background:#E7F7ED;color:var(--green)}
.network-outcome strong{color:var(--ink);font:600 12.5px/1.25 var(--display)}
.network-outcome small{margin-top:3px;color:var(--muted);font-size:10.5px;line-height:1.3}
.network-outcome-note{display:grid;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-strong);color:var(--muted);font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.network-outcome-note span{display:inline-flex;align-items:center;gap:7px}.network-outcome-note span i{width:6px;height:6px;border-radius:50%;background:var(--green)}
.network-outcome-note b{color:var(--sky-text);font-weight:500}
.network-rail{position:relative;height:1px;background:var(--line-strong);margin:0 10% 16px}
.network-rail::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 12px,var(--bg-soft) 12px 20px)}
.network-rail i{position:absolute;top:-3px;left:0;width:7px;height:7px;border-radius:50%;background:var(--sky-text);box-shadow:0 0 0 4px rgba(98,164,255,.14);animation:networkRail 3.2s ease-in-out infinite reverse}
.call-network-log{justify-content:flex-start;flex-wrap:wrap;padding-top:15px;border-top:1px solid var(--line-strong);color:var(--muted)}
.network-log-label{color:var(--sky-text)}
.call-network-log strong{color:var(--ink);font:600 12px var(--display);letter-spacing:0;text-transform:none}.call-network-log strong i{padding:0 5px;color:var(--sky-text);font-style:normal}
.network-log-state{display:inline-flex;align-items:center;gap:7px;margin-left:auto;color:var(--green)}.network-log-state i{width:6px;height:6px;box-shadow:none}
.call-network-log time{color:var(--muted);font:500 10px var(--mono);letter-spacing:.04em}
.call-network-visual.is-flowing .network-core-signal{animation:networkSignalIn .65s ease both}
.call-network-visual.is-flowing .network-rail i{animation-duration:1.35s}
@keyframes networkRail{0%{transform:translateX(0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateX(calc(42vw - 120px));opacity:0}}
@keyframes networkSourcePulse{0%,100%{opacity:.65}50%{opacity:1;box-shadow:0 0 0 5px rgba(98,164,255,.22)}}
@keyframes networkSignalIn{0%{opacity:.45;transform:translateY(5px)}100%{opacity:1;transform:translateY(0)}}
@media (max-width:980px){.call-network-grid{grid-template-columns:minmax(0,1fr) minmax(250px,.84fr);gap:20px}.network-sources{grid-column:1}.network-core{grid-column:2;grid-row:1 / span 2}.network-outcomes{grid-column:1}.call-network-grid::before,.call-network-grid::after{display:none}.network-source-list{grid-template-columns:repeat(2,minmax(0,1fr))}.network-outcome-list{grid-template-columns:repeat(3,minmax(0,1fr))}.network-outcome{min-height:88px;align-content:center}.network-outcome-note{margin-top:12px}}
@media (max-width:760px){.call-network-section{padding:16px 0 64px}.call-network-heading{grid-template-columns:1fr;gap:18px;margin-bottom:28px}.call-network-heading .h2{max-width:20ch}.call-network-visual{padding:18px 16px 16px;border-radius:18px}.call-network-grid{grid-template-columns:1fr;padding-top:22px}.network-core{grid-column:1;grid-row:auto;min-height:350px;order:1}.network-sources{grid-column:1;order:2}.network-outcomes{grid-column:1;order:3}.network-sources .network-column-label,.network-outcomes .network-column-label{margin-top:2px}.network-outcome-list{grid-template-columns:1fr}.network-outcome{min-height:64px}.network-outcome-note{margin-top:15px}.network-core-foot{font-size:8px}.network-log-state{margin-left:0}.call-network-log{gap:10px}.call-network-log time{margin-left:auto}}
@media (max-width:480px){.network-source-list{grid-template-columns:1fr}.network-source{min-height:50px}.network-core{padding:16px}.network-core-signal{margin:22px 0 18px}.network-stage{grid-template-columns:26px minmax(0,1fr);}.network-stage small{grid-column:2;text-align:left;margin-top:-4px}.network-core-foot{display:grid;grid-template-columns:1fr 1fr;gap:8px}.network-core-foot span:last-child{grid-column:1 / -1}.call-network-log{display:grid;grid-template-columns:auto 1fr;align-items:center}.call-network-log strong{grid-column:1 / -1}.network-log-state{margin:0}.call-network-log time{margin-left:0;justify-self:end}}
@media (prefers-reduced-motion:reduce){.call-network-visual *,.call-network-visual::before,.call-network-visual::after{animation:none!important;transition:none!important}}

/* security cards */
.secgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:900px){.secgrid{grid-template-columns:1fr}}
.s{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;gap:16px;align-items:flex-start;transition:border-color .25s,box-shadow .25s;min-width:0}
.s:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.s .sh{flex:none;width:36px;height:36px;color:var(--sky-text)}
.s h3{font-size:17px;font-weight:600;margin-bottom:6px}
.s p{color:var(--ink-2);font-size:14px;line-height:1.55}

/* ribbon divider */
.ribbon{display:block;width:100%;height:120px}

/* final CTA on home */
.cta{position:relative;text-align:center;padding:168px 0 156px;overflow:hidden;background:var(--navy);color:#fff}
.cta canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.42}
.cta .wrap{position:relative;z-index:1;display:grid;justify-items:center;gap:0;max-width:1120px}
.cta h2{color:#fff;font-size:clamp(34px,6vw,88px);font-weight:600;letter-spacing:-.04em;line-height:1.06;margin:30px auto 0;max-width:18ch}
.cta h2 em{color:var(--sky)}
.cta .eyebrow{color:var(--sky)}
.cta .eyebrow::before{background:var(--sky);box-shadow:0 0 0 3px rgba(98,164,255,.25)}
.phoneno{display:inline-flex;align-items:center;gap:14px;margin:40px auto 0;font-family:var(--display);font-size:clamp(24px,4vw,46px);font-weight:600;letter-spacing:-.02em;padding:16px 30px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.06);backdrop-filter:blur(10px);transition:border-color .25s,box-shadow .25s,color .25s; color:#fff;max-width:100%}
.phoneno:hover{border-color:var(--sky);box-shadow:0 0 70px -10px var(--glow)}
.phoneno svg{width:26px;height:26px;flex:none}
.cta .sub{margin-top:24px;color:#B8C7E6;font-size:16px;line-height:1.6;max-width:60ch}
.cta-loop{position:relative;width:min(100%,780px);height:220px;margin:28px auto 0;isolation:isolate}
.cta-loop-field{position:absolute;inset:0;overflow:hidden;border-top:1px solid rgba(169,203,255,.25);border-bottom:1px solid rgba(169,203,255,.25);background:rgba(1,24,56,.2)}
.cta-loop-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(98,164,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(98,164,255,.08) 1px,transparent 1px);background-size:28px 28px;opacity:.55}
.cta-loop-orbit{position:absolute;left:50%;top:50%;display:block;border:1px solid rgba(98,164,255,.34);border-radius:50%;pointer-events:none}
.cta-loop-orbit-a{width:330px;height:126px;transform:translate(-50%,-50%) rotate(-18deg);animation:ctaLoopSpin 20s linear infinite}
.cta-loop-orbit-b{width:218px;height:164px;transform:translate(-50%,-50%) rotate(42deg);border-color:rgba(169,203,255,.24);animation:ctaLoopSpinReverse 28s linear infinite}
.cta-loop-core{position:absolute;left:50%;top:50%;display:grid;place-items:center;align-content:center;gap:4px;width:154px;height:100px;transform:translate(-50%,-50%);border:1px solid rgba(98,164,255,.75);border-radius:18px;background:rgba(10,36,80,.9);box-shadow:0 0 0 10px rgba(98,164,255,.06),0 18px 42px rgba(0,0,0,.24)}
.cta-loop-core b{font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:#fff}
.cta-loop-core small{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:#9cb7df}
.cta-loop-core i{width:7px;height:7px;border-radius:50%;background:#62e49b;box-shadow:0 0 0 4px rgba(98,228,155,.14);animation:ctaLoopPulse 1.8s ease-in-out infinite}
.cta-loop-node{position:absolute;display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border:1px solid rgba(169,203,255,.32);border-radius:999px;background:rgba(1,24,56,.7);font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:#b8c7e6;white-space:nowrap}
.cta-loop-node i{width:6px;height:6px;border-radius:50%;background:var(--sky);flex:none}
.cta-loop-node-a{left:5%;top:25%}.cta-loop-node-b{left:9%;bottom:22%}.cta-loop-node-c{right:5%;top:25%}.cta-loop-node-d{right:9%;bottom:22%}
.cta-loop-node-c i,.cta-loop-node-d i{background:#83e6ad}
.cta-loop-caption{display:flex;justify-content:space-between;gap:16px;padding:10px 4px 0;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:#7f96bb;text-transform:uppercase}
.cta-secondary{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:#fff;font-size:14px;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:3px;transition:color .2s,border-color .2s}
.cta-secondary span{color:var(--sky);font-size:17px;line-height:1}
.cta-secondary:hover{color:var(--sky);border-color:var(--sky)}
@keyframes ctaLoopSpin{from{transform:translate(-50%,-50%) rotate(-18deg)}to{transform:translate(-50%,-50%) rotate(342deg)}}
@keyframes ctaLoopSpinReverse{from{transform:translate(-50%,-50%) rotate(42deg)}to{transform:translate(-50%,-50%) rotate(-318deg)}}
@keyframes ctaLoopPulse{0%,100%{opacity:.65;transform:scale(.82)}50%{opacity:1;transform:scale(1)}}
.cta .actions{justify-content:center;margin-top:46px;gap:16px}
.cta .btn-primary{background:var(--sky);color:var(--navy)}
.cta .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.cta .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}

@media (max-width:700px){
  .cta{padding:112px 0 108px}
  .cta h2{line-height:1.03;margin-top:24px;max-width:13ch}
  .phoneno{margin:28px auto 0;padding:14px 22px;font-size:clamp(22px,6.2vw,34px);line-height:1.15;text-wrap:balance;text-align:left}
  .phoneno svg{width:22px;height:22px}
  .cta .sub{margin-top:18px;font-size:14px;line-height:1.55}
  .cta-loop{height:178px;margin-top:24px}
  .cta-loop-orbit-a{width:270px;height:108px}.cta-loop-orbit-b{width:182px;height:142px}
  .cta-loop-node{padding:5px 7px;font-size:12px;letter-spacing:0;gap:5px}
  .cta-loop-node-a{left:3%;top:18%}.cta-loop-node-b{left:4%;bottom:17%}.cta-loop-node-c{right:3%;top:18%}.cta-loop-node-d{right:4%;bottom:17%}
  .cta-loop-core{width:126px;height:86px}.cta-loop-core b{font-size:12px}.cta-loop-core small{font-size:12px;letter-spacing:.02em}
  .cta-loop-caption{gap:8px;padding-top:8px;font-size:12px;letter-spacing:.02em}
  .cta-secondary{margin-top:16px;font-size:13px}
  .cta .actions{width:100%;margin-top:34px;flex-direction:column;gap:10px}
  .cta .actions .btn{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .rv{opacity:1;transform:none}.track{animation:none}
}

/* ---------- language switcher ---------- */
.lang{position:relative}
.lang>button{display:inline-flex;align-items:center;gap:6px;padding:10px 12px;border-radius:999px;border:1px solid var(--line-strong);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;min-height:40px;color:var(--ink)}
.lang>button svg{width:12px;height:12px}
.lang .lang-dd{position:absolute;right:0;top:calc(100% + 10px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:8px;display:grid;min-width:170px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .22s,transform .22s,visibility .22s;z-index:6}
.lang:hover .lang-dd,.lang:focus-within .lang-dd,.lang.open .lang-dd{opacity:1;visibility:visible;transform:none}
.lang .lang-dd a{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:8px;font-size:14px;color:var(--ink-2)}
.lang .lang-dd a:hover{background:var(--bg-soft);color:var(--ink)}
.lang .lang-dd a.on{color:var(--ink);font-weight:600}
.lang .lang-dd a small{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted)}
.mega-langs{display:flex;gap:6px;flex-wrap:wrap}
.mega-langs a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:6px 10px;color:var(--ink-2)}
.mega-langs a.on{border-color:var(--ink);color:var(--ink)}
@media (max-width:560px){.lang{display:none}}
html[dir="rtl"] .eyebrow::before{order:2}
html[dir="rtl"] .steps li::before{left:auto;right:0}
html[dir="rtl"] .steps li{padding-left:0}

/* ---------- case studies index ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:28px}
.filters .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.filters button{font-size:13.5px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--line-strong);background:#fff;color:var(--ink-2);transition:all .2s;min-height:36px}
.filters button:hover{border-color:var(--ink);color:var(--ink)}
.filters button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.case-grid{display:grid;grid-template-columns:1fr;gap:16px}
.case-card{display:flex;flex-direction:column;gap:18px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;transition:border-color .25s,box-shadow .25s,transform .25s;min-width:0}
.case-card:hover{border-color:var(--line-strong);box-shadow:var(--shadow);transform:translateY(-2px)}
.case-card[hidden]{display:none}
.cc-top{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cc-body{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:32px;align-items:center}
.cc-num{display:block;font-family:var(--display);font-size:clamp(44px,5vw,72px);font-weight:600;letter-spacing:-.045em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:12px}
.cc-lead{color:var(--ink-2);font-size:16px;line-height:1.55;max-width:60ch;margin-bottom:16px}
.cc-chart{width:100%;aspect-ratio:1.5/1;display:block}
@media (max-width:860px){.cc-body{grid-template-columns:1fr}.cc-chart{max-width:360px;aspect-ratio:1.8/1}}

/* ---------- references wall ---------- */
.logo-wall{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.logo-wall li{background:#fff;padding:26px 24px;display:flex;flex-direction:column;gap:6px;min-width:0;transition:background .25s}
.logo-wall li:hover{background:var(--bg-soft)}
.logo-wall b{font-family:var(--display);font-size:clamp(20px,2vw,26px);font-weight:600;letter-spacing:-.02em;color:var(--ink);line-height:1.1}
.logo-wall span{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
@media (max-width:900px){.logo-wall{grid-template-columns:repeat(2,1fr)}}
.clients .wall{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px;padding:0 20px 22px;max-width:var(--max);margin:0 auto}
.clients .wall a,.clients .wall span{font-family:var(--display);font-size:clamp(18px,1.7vw,24px);font-weight:600;letter-spacing:-.02em;color:var(--ink-2);opacity:.7;transition:opacity .2s,color .2s;white-space:nowrap}
.clients .wall a:hover{opacity:1;color:var(--ink)}
.clients .more{font-family:var(--mono)!important;font-size:12px!important;letter-spacing:.1em;text-transform:uppercase;color:var(--sky-text)!important;opacity:1!important;align-self:center}

/* ---------- security emblems ---------- */
.emblems{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;align-items:center;max-width:960px}
.emblems img{width:100%;max-width:130px;height:auto;margin:0 auto;display:block;transition:transform .3s}
.emblems img:hover{transform:translateY(-4px)}
@media (max-width:900px){.emblems{grid-template-columns:repeat(3,1fr)}}
@media (max-width:480px){.emblems{grid-template-columns:repeat(2,1fr)}}
.cta-inline{padding:0}
.cta-inline .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-top:26px;padding-bottom:26px}
.cta-inline p{font-size:17px;color:var(--ink-2)}
.cta-inline p strong{color:var(--ink)}
.cta-inline .btn{padding:12px 18px;font-size:14px}

/* ---------- infrastructure diagram ---------- */
.infra-wrap{width:100%;min-width:0;max-width:100%;background:linear-gradient(135deg,#fff 0%,#fff 62%,var(--bg-soft) 100%);border:1px solid var(--line);border-radius:var(--r);padding:clamp(14px,2vw,24px);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin}
.infra,.infra-wrap>.tech{width:100%;min-width:0;max-width:100%;height:auto;display:block}
.infra .stage rect{fill:var(--bg-soft);stroke:var(--line-strong);stroke-width:1}
.infra .stage.core rect{fill:var(--navy);stroke:var(--navy)}
.infra .t{font:600 12px var(--mono);letter-spacing:.14em;fill:var(--ink)}
.infra .s{font:12.5px var(--body);fill:var(--ink-2)}
.infra .core .t{fill:#fff}.infra .core .s{fill:#B8C7E6}
.infra .badge{fill:var(--sky)}
.infra .b{font:600 11px var(--mono);fill:var(--navy);letter-spacing:.06em}
.infra .wire{fill:none;stroke:var(--line-strong);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.infra .pulse{fill:var(--sky-text);filter:drop-shadow(0 0 3px rgba(47,111,209,.35))}
.infra .pulse.g{fill:var(--green);filter:drop-shadow(0 0 3px rgba(22,163,74,.3))}
.infra .infra-field{fill:url(#infra-grid);opacity:.32}
.infra .infra-sweep{fill:var(--sky);opacity:0;animation:infraSweep 10s ease-in-out infinite}
.infra .forward{stroke-dasharray:7 9;animation:infraDash 2.4s linear infinite}
.infra .return{stroke-dasharray:7 9;animation:infraDash 2.4s linear infinite reverse}
.infra .outcome{stroke-dasharray:5 11;animation:infraDash 3.6s linear infinite}
.infra .core-frame{fill:none;stroke:var(--sky);stroke-width:1;stroke-dasharray:3 8;opacity:.65;animation:infraFrame 10s linear infinite}
.infra .core-rail{fill:none;stroke:var(--sky);stroke-width:1;stroke-dasharray:1 12;opacity:.42}
.infra .core-token{fill:var(--sky);filter:drop-shadow(0 0 4px rgba(98,164,255,.7))}
.infra-mobile{display:none}
.infra .stage.input rect{animation:infraStage 6s ease-in-out infinite}
.infra .stage.edge rect{animation:infraStage 6s ease-in-out -1.5s infinite}
.infra .stage.tools rect{animation:infraStage 6s ease-in-out -3s infinite}
.infra .stage.systems rect{animation:infraStage 6s ease-in-out -4.5s infinite}
@keyframes infraDash{to{stroke-dashoffset:-32}}
@keyframes infraFrame{to{stroke-dashoffset:-66}}
@keyframes infraStage{0%,100%{stroke-opacity:.7}50%{stroke-opacity:1}}
@keyframes infraSweep{0%,8%,92%,100%{opacity:0}22%,78%{opacity:.24}}
.infra-legend{display:flex;justify-content:flex-end;gap:18px;flex-wrap:wrap;border-top:1px solid var(--line);padding:13px 4px 1px;color:var(--muted);font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.infra-legend span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.infra-legend i{width:8px;height:8px;border-radius:50%;background:var(--sky-text);box-shadow:0 0 0 3px var(--tint)}
.infra-legend i.return{background:var(--green)}
.infra-legend i.outcome{background:var(--sky);border-radius:2px}
@media (max-width:700px){.infra-legend{justify-content:flex-start;gap:10px 16px;font-size:9px}}
@media (max-width:700px){
  .infra-wrap{padding:0;border:0;background:none;overflow:visible}
  .infra-wrap:has(+ .infra-mobile)>.infra{display:none}
  .infra-wrap:has(+ .infra-mobile) .infra-legend{display:none}
  .infra-mobile{display:block;margin-top:18px;padding:16px;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(145deg,#fff,var(--bg-soft));box-shadow:0 18px 35px -30px rgba(1,24,56,.45)}
  .infra-mobile-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:14px;color:var(--muted);font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase}
  .infra-mobile-head span:last-child{display:inline-flex;align-items:center;gap:7px}
  .infra-mobile-head i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(22,163,74,.12);animation:pulse 1.8s infinite}
  .infra-mobile-stage{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:center;padding:13px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 10px 24px -22px rgba(1,24,56,.45)}
  .infra-mobile-stage.core{background:var(--navy);border-color:var(--navy);color:#fff;box-shadow:0 16px 28px -22px rgba(1,24,56,.75)}
  .infra-mobile-stage .m-index{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--tint);color:var(--sky-text);font:11px var(--mono);letter-spacing:.04em}
  .infra-mobile-stage.core .m-index{background:rgba(98,164,255,.18);color:var(--sky)}
  .infra-mobile-stage strong{display:block;font:600 17px var(--display)}
  .infra-mobile-stage small{display:block;margin-top:4px;color:var(--muted);font:12px var(--body);line-height:1.4}
  .infra-mobile-stage.core small{color:#B8C7E6}
  .infra-mobile-link{position:relative;height:24px;width:2px;margin-left:29px;background:var(--line-strong)}
  .infra-mobile-link::after{content:"";position:absolute;left:50%;top:-2px;width:7px;height:7px;border-radius:50%;background:var(--sky-text);box-shadow:0 0 0 4px var(--tint);transform:translate(-50%,-50%);animation:mobileInfraFlow 2.2s ease-in-out infinite}
  .infra-mobile-link.return::after{background:var(--green);animation-delay:-1.1s}
  .infra-mobile-result{margin-top:14px;padding:14px;border:1px solid var(--tint-2);border-radius:14px;background:var(--tint)}
  .infra-mobile-result span{display:block;color:var(--sky-text);font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase}
  .infra-mobile-result strong{display:block;margin-top:7px;color:var(--ink);font:600 17px var(--display)}
  .infra-mobile-result small{display:block;margin-top:4px;color:var(--ink-2);font:12px var(--body);line-height:1.45}
}
@keyframes mobileInfraFlow{0%,100%{top:100%;opacity:.25}45%,60%{top:0;opacity:1}}
@media (prefers-reduced-motion:reduce){.infra .forward,.infra .return,.infra .outcome,.infra .core-frame,.infra .stage rect{animation:none}.infra .pulse,.infra .infra-sweep{display:none}}

/* ---------- localized shell and RTL guardrails ---------- */
/* Arabic pages use the same component geometry as the English shell, but
   their reading direction and word lengths need explicit boundaries. */
html[dir="rtl"] body{font-family:"Tahoma","Arial",var(--body);overflow-x:hidden}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4,html[dir="rtl"] .h1,html[dir="rtl"] .h2,html[dir="rtl"] .h3{font-family:"Tahoma","Arial",var(--display);letter-spacing:0}
html[dir="rtl"] .hdr .wrap{direction:rtl}
html[dir="rtl"] .nav{direction:rtl}
html[dir="rtl"] .dd{direction:rtl}
html[dir="rtl"] .mega .col{min-width:0}
html[dir="rtl"] .mega li a,html[dir="rtl"] .mega h4{overflow-wrap:anywhere;word-break:normal}
html[dir="rtl"] .mega{direction:rtl}
html[dir="rtl"] .mega-grid{direction:rtl}
html[dir="rtl"] .mega li a:hover{transform:translateX(-4px)}
html[dir="rtl"] .link-arrow::after{transform:scaleX(-1)}
html[dir="rtl"] .link-arrow:hover::after{transform:translateX(-4px) scaleX(-1)}
html[dir="rtl"] .lang .lang-dd{right:auto;left:0;direction:rtl}
html[dir="rtl"] .btn{white-space:normal;text-align:center;min-width:0}
html[dir="rtl"] .btn svg{transform:scaleX(-1)}
html[dir="rtl"] .crumbs{direction:rtl}
html[dir="rtl"] .prose ul,html[dir="rtl"] .prose ol{margin-left:0;margin-right:22px}

/* Long translated labels stay usable before the full menu takes over. */
@media (max-width:1200px){
  html[dir="rtl"] .hdr-right{gap:8px;min-width:0}
  html[dir="rtl"] .hdr .btn-primary{max-width:min(42vw,250px);padding-inline:14px;line-height:1.25}
  html[dir="rtl"] .mega .wrap{direction:rtl}
}
@media (max-width:760px){
  html[dir="rtl"] .lang .lang-dd{left:0;right:auto;min-width:min(220px,calc(100vw - 24px))}
}
@media (max-width:560px){
  html[dir="rtl"] .hdr .btn-primary{max-width:none}
  html[dir="rtl"] .mega-foot{align-items:stretch}
  html[dir="rtl"] .mega-foot>.btn{width:100%}
}

/* Some translated pages still use the compact map without a mobile companion.
   Keep that map visible and contained instead of leaving a blank section. */
@media (max-width:700px){
  .infra-wrap:has(>.infra):not(:has(+ .infra-mobile)){padding:10px;border:1px solid var(--line);background:linear-gradient(135deg,#fff 0%,#fff 62%,var(--bg-soft) 100%);overflow-x:auto}
  .infra-wrap:has(>.infra):not(:has(+ .infra-mobile))>.infra{display:block;width:100%;min-width:0;max-width:100%}
}

/* The full technical flow has more labels than the compact five-stage map.
   Preserve its designed scale at tablet widths, but keep the scroll inside
   the bordered card instead of widening the document. */
@media (max-width:1040px) and (min-width:701px){
  .infra-wrap:has(>.tech){overflow-x:auto;padding:14px}
  .infra-wrap>.tech{width:1080px;max-width:none}
}
@media (max-width:700px){
  .infra-wrap:has(>.tech){padding:10px;border:1px solid var(--line);background:linear-gradient(135deg,#fff 0%,#fff 62%,var(--bg-soft) 100%);overflow-x:auto}
  .infra-wrap:has(>.tech)>.tech{width:900px;max-width:none}
}

/* ---------- homepage outcome visual ---------- */
.home-call-flow{background:#fff;border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.home-call-flow-head{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:16px 20px;border-bottom:1px solid var(--line);color:var(--muted);font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.home-call-flow-head span:last-child{display:inline-flex;align-items:center;gap:8px;color:var(--sky-text)}
.home-call-flow-head i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(22,163,74,.12);animation:homeFlowBeat 2.4s ease-in-out infinite}
.home-call-flow-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.home-flow-step{position:relative;min-height:220px;padding:24px 22px 20px;border-right:1px solid var(--line);background:linear-gradient(180deg,#fff 0%,#fbfcff 100%)}
.home-flow-step:last-child{border-right:0}
.home-flow-step::after{content:"";position:absolute;left:22px;right:22px;top:0;height:2px;background:var(--line)}
.home-flow-step.active::after{background:var(--sky-text);animation:homeFlowBar 5.6s ease-in-out infinite}
.home-flow-top{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--sky-text);font:10px var(--mono);letter-spacing:.1em}
.home-flow-top b{color:var(--muted);font-weight:500}
.home-flow-step h3{margin:26px 0 10px;font:600 21px/1.08 var(--display);color:var(--ink)}
.home-flow-step p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.48}
.home-flow-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:24px;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);font:11px var(--mono);letter-spacing:.02em}
.home-flow-meta span{display:inline-flex;align-items:center;gap:7px}
.home-flow-meta i{width:7px;height:7px;border-radius:50%;background:var(--sky-text);box-shadow:0 0 0 3px var(--tint);animation:homeFlowBeat 2.4s ease-in-out infinite}
.home-flow-meta b{color:var(--green);font-weight:600;text-transform:uppercase}
.home-call-flow-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:15px 20px;border-top:1px solid var(--line);color:var(--muted);font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.home-call-flow-foot span{display:inline-flex;align-items:center;gap:7px}
.home-call-flow-foot i{width:8px;height:8px;border-radius:50%;background:var(--sky-text);box-shadow:0 0 0 3px var(--tint)}
.home-call-flow-foot i.green{background:var(--green)}
.home-call-flow-foot i.square{border-radius:2px;background:var(--sky)}
.home-flow-arrow{color:var(--line-strong);font-size:14px}
.home-call-flow-foot .link-arrow{margin-left:auto;font:600 12px var(--body);letter-spacing:0;text-transform:none}
html[dir="rtl"] .home-flow-step{border-right:0;border-left:1px solid var(--line)}
html[dir="rtl"] .home-flow-step:last-child{border-left:0}
html[dir="rtl"] .home-call-flow-foot .link-arrow{margin-left:0;margin-right:auto}
@keyframes homeFlowBeat{0%,100%{opacity:.55;transform:scale(.88)}50%{opacity:1;transform:scale(1.12)}}
@keyframes homeFlowBar{0%,100%{opacity:.55}50%{opacity:1}}
@media (max-width:900px){
  .home-call-flow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .home-flow-step:nth-child(2){border-right:0}
  .home-flow-step:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:560px){
  .home-call-flow-head{align-items:flex-start;flex-direction:column;gap:8px;padding:14px 16px}
  .home-call-flow-grid{grid-template-columns:1fr}
  .home-flow-step{min-height:0;padding:22px 18px 18px;border-right:0;border-bottom:1px solid var(--line)}
  html[dir="rtl"] .home-flow-step{border-left:0}
  .home-flow-step:nth-child(2){border-bottom:1px solid var(--line)}
  .home-flow-step:last-child{border-bottom:0}
  .home-flow-step::after{left:18px;right:18px}
  .home-flow-step h3{margin-top:20px;font-size:20px}
  .home-flow-meta{margin-top:18px}
  .home-call-flow-foot{padding:14px 16px;gap:9px 12px}
  .home-call-flow-foot .link-arrow{width:100%;margin:4px 0 0}
}
@media (prefers-reduced-motion:reduce){.home-call-flow-head i,.home-flow-step.active::after,.home-flow-meta i{animation:none}}

/* ---------- homepage operating showcase ---------- */
.showcase-sec{padding:44px 0 72px;background:var(--bg)}
.showcase-panel{display:grid;grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);gap:clamp(28px,5vw,72px);align-items:center;padding:clamp(28px,4.5vw,58px);border-radius:22px;background:var(--navy);overflow:hidden;position:relative;isolation:isolate}
.showcase-panel::before{content:"";position:absolute;width:52%;height:120%;right:-7%;top:-10%;background:radial-gradient(ellipse at center,rgba(98,164,255,.28),transparent 68%);z-index:-1;pointer-events:none}
.showcase-copy{max-width:480px;color:#B8C7E6}
.showcase-eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--sky);font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.showcase-eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 4px rgba(98,164,255,.15);animation:showcaseBeat 2.4s ease-in-out infinite}
.showcase-copy h2{max-width:10ch;margin:20px 0 18px;color:#fff;font:600 clamp(38px,4.6vw,62px)/.98 var(--display);letter-spacing:-.035em}
.showcase-copy h2 em{color:var(--sky);font-style:normal}
.showcase-copy>p{max-width:43ch;font-size:16px;line-height:1.58;color:#B8C7E6}
.showcase-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:28px}
.showcase-actions .btn{padding:13px 18px;font-size:14px}
.showcase-link{display:inline-flex;align-items:center;gap:7px;color:#fff;font-size:14px;font-weight:600}
.showcase-link span{color:var(--sky);font-size:18px;transition:transform .2s}
.showcase-link:hover span{transform:translate(3px,-3px)}
.showcase-note{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:32px;padding-top:18px;border-top:1px solid rgba(184,199,230,.2);color:#8298bf;font:10px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.showcase-note span{display:inline-flex;align-items:center;gap:7px}
.showcase-note i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.14)}
.showcase-console{min-width:0;padding:18px;border:1px solid rgba(184,199,230,.28);border-radius:16px;background:rgba(255,255,255,.07);box-shadow:0 30px 70px -42px rgba(0,0,0,.85)}
.showcase-console-head{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:3px 2px 16px;color:#B8C7E6;font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.showcase-console-head span{display:inline-flex;align-items:center;gap:8px}
.showcase-console-head span i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(22,163,74,.12)}
.showcase-console-head b{color:var(--sky);font-weight:500;white-space:nowrap}
.showcase-console-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(190px,.88fr);gap:10px}
.showcase-call,.showcase-score{min-width:0;padding:18px;border:1px solid rgba(184,199,230,.18);border-radius:12px;background:rgba(1,24,56,.52)}
.showcase-label{display:flex;justify-content:space-between;gap:10px;color:#8298bf;font:10px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.showcase-label b{color:#B8C7E6;font-weight:500;white-space:nowrap}
.showcase-caller{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;margin-top:20px}
.showcase-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(98,164,255,.16);color:var(--sky);font:600 11px var(--mono)}
.showcase-caller strong,.showcase-caller small{display:block;overflow-wrap:anywhere}
.showcase-caller strong{color:#fff;font:600 15px/1.15 var(--display)}
.showcase-caller small{margin-top:3px;color:#8298bf;font-size:11px;line-height:1.3}
.showcase-wave{display:flex;align-items:center;gap:3px;height:24px;color:var(--sky)}
.showcase-wave b{display:block;width:3px;height:var(--h,10px);border-radius:3px;background:currentColor;animation:showcaseWave .9s ease-in-out infinite alternate}
.showcase-wave b:nth-child(2){--h:17px;animation-delay:-.2s}.showcase-wave b:nth-child(3){--h:8px;animation-delay:-.42s}.showcase-wave b:nth-child(4){--h:21px;animation-delay:-.1s}.showcase-wave b:nth-child(5){--h:13px;animation-delay:-.32s}.showcase-wave b:nth-child(6){--h:18px;animation-delay:-.5s}.showcase-wave b:nth-child(7){--h:7px;animation-delay:-.25s}
.showcase-message{margin-top:20px;padding:11px 12px;border-radius:10px;background:rgba(184,199,230,.09)}
.showcase-message.agent{margin-top:8px;background:rgba(98,164,255,.16)}
.showcase-message span{display:block;color:#8298bf;font:9px var(--mono);letter-spacing:.1em}
.showcase-message p{margin-top:5px;color:#fff;font-size:13px;line-height:1.4}
.showcase-call-foot{display:flex;justify-content:space-between;gap:10px;margin-top:18px;padding-top:12px;border-top:1px solid rgba(184,199,230,.16);color:#8298bf;font:10px var(--mono)}
.showcase-call-foot span:first-child{display:inline-flex;align-items:center;gap:6px}
.showcase-call-foot i{width:6px;height:6px;border-radius:50%;background:var(--green)}
.showcase-score{display:flex;flex-direction:column;gap:16px}
.showcase-score-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;align-items:center;padding-top:3px;color:#B8C7E6;font-size:12px}
.showcase-score-row strong{color:#fff;font:600 15px var(--display);font-variant-numeric:tabular-nums}
.showcase-score-row>i{grid-column:1/-1;display:block;height:5px;border-radius:999px;background:rgba(184,199,230,.14);overflow:hidden}
.showcase-score-row>i em{display:block;width:var(--w);height:100%;border-radius:inherit;background:var(--sky);animation:showcaseBar 2.8s ease-in-out infinite alternate}
.showcase-outcome{margin-top:auto;padding-top:14px;border-top:1px solid rgba(184,199,230,.16)}
.showcase-outcome span{display:flex;align-items:center;gap:7px;color:#57c978;font:10px var(--mono);letter-spacing:.08em}
.showcase-outcome span i{width:7px;height:7px;border-radius:50%;background:var(--green)}
.showcase-outcome strong{display:block;margin-top:8px;color:#fff;font:600 14px/1.25 var(--display)}
.showcase-release{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:10px;padding:14px 16px;border:1px solid rgba(184,199,230,.18);border-radius:12px;background:rgba(98,164,255,.08)}
.showcase-release>div:first-child{min-width:145px}
.showcase-release span,.showcase-release b{display:block;color:#8298bf;font:9px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.showcase-release strong{display:block;margin-top:5px;color:#fff;font:600 14px var(--display)}
.showcase-release-track{display:flex;align-items:center;gap:10px;min-width:0;color:var(--sky)}
.showcase-release-track i{display:block;width:72px;height:2px;background:var(--sky);position:relative;overflow:visible}
.showcase-release-track i::after{content:"";position:absolute;top:50%;left:0;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(98,164,255,.18);transform:translate(-50%,-50%);animation:showcaseRunner 2.8s ease-in-out infinite}
.showcase-release-track b{color:#B8C7E6;font-weight:500;white-space:nowrap}
.showcase-release-track span{display:block;color:var(--sky);font-size:15px}
@keyframes showcaseBeat{0%,100%{opacity:.55;transform:scale(.88)}50%{opacity:1;transform:scale(1.12)}}
@keyframes showcaseWave{from{transform:scaleY(.55);opacity:.55}to{transform:scaleY(1);opacity:1}}
@keyframes showcaseBar{from{filter:brightness(.88)}to{filter:brightness(1.18)}}
@keyframes showcaseRunner{0%,10%{left:0}55%,70%{left:100%}100%{left:0}}
@media (max-width:900px){
  .showcase-panel{grid-template-columns:1fr;gap:34px}
  .showcase-copy{max-width:620px}
  .showcase-copy h2{max-width:12ch}
}
@media (max-width:600px){
  .showcase-sec{padding:28px 0 56px}
  .showcase-panel{padding:26px 18px;border-radius:18px}
  .showcase-copy h2{font-size:38px}
  .showcase-console{padding:12px}
  .showcase-console-grid{grid-template-columns:1fr}
  .showcase-score{gap:13px}
  .showcase-release{align-items:flex-start;flex-direction:column;gap:14px}
  .showcase-release-track{width:100%;overflow:auto;padding-bottom:2px}
  .showcase-release-track i{flex:1;min-width:52px}
  .showcase-call-foot{font-size:9px}
}
@media (prefers-reduced-motion:reduce){.showcase-eyebrow i,.showcase-wave b,.showcase-score-row>i em,.showcase-release-track i::after{animation:none}}
.track.brands{gap:48px}
.track.brands span{border:0;background:none;padding:6px 0;font-family:var(--display);font-size:clamp(20px,1.9vw,26px);font-weight:600;letter-spacing:-.02em;color:var(--ink-2);opacity:.75}
.track.brands span:hover{opacity:1;color:var(--ink)}

/* ---------- vertical rhythm between sibling blocks inside a section ---------- */
.wrap > :is(.grid,.steps,.table-wrap,.stats,.faq,.split,.tags,.quote,.kpi-list,.rail,.timeline,.mock,.plat,.bento,.secgrid,.voices,.case,.logo-wall,.infra-wrap,.case-grid,.pipe,.term,.emblems,.std-list,.six-list) + :is(p,.lede,.note,.actions,.tags,.grid,.steps,.table-wrap,.stats,.faq,.split,.quote,.kpi-list,.timeline,.mock,.link-arrow,h2,h3,.h2,.h3){margin-top:32px}
.wrap > :is(p,.lede,.note,.actions,.tags,.eyebrow,h2,h3,.h2,.h3) + :is(.grid,.steps,.table-wrap,.stats,.faq,.split,.quote,.kpi-list,.rail,.timeline,.mock,.logo-wall,.infra-wrap,.case-grid){margin-top:28px}
.wrap > :is(h2,.h2) + :is(p,.lede){margin-top:16px}
.wrap > .eyebrow + :is(h2,.h2,h3){margin-top:14px}
.wrap-narrow > :is(.grid,.steps,.table-wrap,.stats,.faq,.split,.tags) + :is(p,.lede,.note,.actions){margin-top:32px}
.stats{margin:32px 0 0}
.wrap > .stats + *{margin-top:36px}
.sec-head + .stats{margin-top:0}
.faq details p{padding-top:2px}

/* ---------- hero visual variants ---------- */
.hv-transcript .mock-body{gap:10px}
.hv-transcript .bubble{font-size:14px}
.hv-transcript .mock-row{padding:8px 0}
.hv-kpis{display:grid;gap:8px;padding:22px;background:#fff;border:1px solid var(--line-strong);border-radius:20px;box-shadow:var(--shadow)}
.hv-kpi-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hv-kpi strong{display:block;font-family:var(--display);font-size:clamp(24px,2.4vw,34px);font-weight:600;letter-spacing:-.04em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.hv-kpi span{display:block;font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.35}
.hv-kpis canvas{width:100%;aspect-ratio:1.9/1;display:block}
.hv-term{margin:0;font-size:12px}
.hv-term pre{min-height:0;white-space:pre-wrap}
.hv-term .ln{opacity:1;transform:none}
.hv-emblems{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:center}
.hv-emblems img{width:100%;max-width:120px;height:auto;margin:0 auto;display:block}
.hv-chips{display:grid;gap:14px;padding:22px;background:var(--bg-soft);border:1px solid var(--line);border-radius:20px}
.hv-tiers{display:grid;gap:8px}
.hv-tier{display:grid;gap:2px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:#fff}
.hv-tier.on{border-color:var(--navy);background:var(--navy)}
.hv-tier b{font-family:var(--display);font-size:17px;font-weight:600;color:var(--ink)}
.hv-tier span{font-size:13.5px;color:var(--muted)}
.hv-tier.on b{color:#fff}.hv-tier.on span{color:#B8C7E6}
.hv-quote .quote{margin:0}
.hv-people{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.hv-person{display:grid;grid-template-columns:40px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.hv-person i{grid-row:1/3;width:40px;height:40px;border-radius:50%;background:var(--tint);color:var(--sky-text);display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:500}
.hv-person b{font-size:14px;color:var(--ink);font-weight:600;line-height:1.2}
.hv-person span{font-size:12px;color:var(--muted)}
@media (max-width:600px){
  .hv-kpi-row{gap:8px}
  .hv-kpi strong{font-size:22px}
  .hv-people{grid-template-columns:1fr}
  .hv-emblems{grid-template-columns:repeat(3,1fr);gap:10px}
  .hv-chips,.hv-kpis{padding:16px}
  .hero-card .mock-row span{min-width:72px}
  .cta-inline .wrap{flex-direction:column;align-items:flex-start}
  .cta-inline .actions{width:100%}
  .cta-inline .btn{flex:1}
  .filters{gap:6px}
  .filters button{padding:7px 11px;font-size:13px}
  .filters .lbl{width:100%;margin:6px 0 0}
  .case-card{padding:20px}
  .cc-num{font-size:40px}
  .infra-wrap{padding:10px}
  .logo-wall li{padding:18px 16px}
}

/* ---------- journey ---------- */
.journey .step h3{font-size:clamp(19px,1.55vw,21px);line-height:1.18;min-height:2.36em;margin-bottom:12px;text-wrap:balance}
.journey .step>p:not(.win){min-height:11em}
.journey .step p.win{display:flex;align-items:flex-start;min-height:8.8em;margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--tint);color:var(--ink);font-size:14px;line-height:1.5;position:relative;padding-left:32px}
.journey .step p.win::before{content:"";position:absolute;left:12px;top:15px;width:10px;height:6px;border-left:2px solid var(--green);border-bottom:2px solid var(--green);transform:rotate(-45deg)}
.pipe.go.journey .step .win{animation:none}

@media (max-width:900px){
  .journey .step h3,.journey .step>p:not(.win),.journey .step p.win{min-height:0}
}

/* ---------- journey visual ---------- */
.journey-visual{position:relative;margin-top:56px;padding:0 24px 24px;overflow:hidden;border:1px solid var(--line-strong);border-radius:var(--r);background:linear-gradient(145deg,#fff 0%,var(--bg-soft) 100%);box-shadow:var(--shadow)}
.journey-visual::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:28px 28px;opacity:.32;mask-image:linear-gradient(to bottom,rgba(0,0,0,.8),transparent 90%);pointer-events:none}
.journey-visual-head{position:relative;z-index:1;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:17px 0;border-bottom:1px solid var(--line);font:500 11px var(--mono);letter-spacing:.12em;color:var(--muted)}
.journey-visual-status{color:var(--green)}
.journey-visual-status i,.journey-call-foot i,.journey-score-note i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);vertical-align:middle;margin-right:7px}
.journey-visual-status i{animation:journeyStatus 2.2s ease-in-out infinite}
.journey-visual-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(190px,.72fr) minmax(0,1.08fr);gap:18px;padding-top:24px}
.journey-call-panel,.journey-route-panel,.journey-score-panel{min-width:0;padding:18px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.92)}
.journey-call-meta,.journey-route-head,.journey-score-head{display:flex;justify-content:space-between;gap:12px;align-items:center;font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.journey-call-meta b,.journey-route-head b,.journey-score-head b{font-weight:500;color:var(--sky-text);white-space:nowrap}
.journey-wave{display:flex;align-items:center;gap:4px;height:38px;margin:18px 0 16px}
.journey-wave i{flex:1;height:var(--h,55%);min-height:5px;border-radius:99px;background:var(--sky);opacity:.7;transform-origin:center;animation:journeyWave 1.5s ease-in-out infinite}
.journey-wave i:nth-child(1){--h:32%;animation-delay:-.1s}.journey-wave i:nth-child(2){--h:64%;animation-delay:-.3s}.journey-wave i:nth-child(3){--h:44%;animation-delay:-.5s}.journey-wave i:nth-child(4){--h:82%;animation-delay:-.7s}.journey-wave i:nth-child(5){--h:55%;animation-delay:-.9s}.journey-wave i:nth-child(6){--h:92%;animation-delay:-1.1s}.journey-wave i:nth-child(7){--h:46%;animation-delay:-.4s}.journey-wave i:nth-child(8){--h:72%;animation-delay:-.6s}.journey-wave i:nth-child(9){--h:38%;animation-delay:-.8s}.journey-wave i:nth-child(10){--h:78%;animation-delay:-1s}.journey-wave i:nth-child(11){--h:54%;animation-delay:-1.2s}.journey-wave i:nth-child(12){--h:88%;animation-delay:-.2s}.journey-wave i:nth-child(13){--h:43%;animation-delay:-.45s}.journey-wave i:nth-child(14){--h:68%;animation-delay:-.65s}.journey-wave i:nth-child(15){--h:35%;animation-delay:-.85s}.journey-wave i:nth-child(16){--h:76%;animation-delay:-1.05s}.journey-wave i:nth-child(17){--h:50%;animation-delay:-1.25s}.journey-wave i:nth-child(18){--h:86%;animation-delay:-.25s}.journey-wave i:nth-child(19){--h:42%;animation-delay:-.55s}.journey-wave i:nth-child(20){--h:70%;animation-delay:-.75s}.journey-wave i:nth-child(21){--h:30%;animation-delay:-.95s}.journey-wave i:nth-child(22){--h:80%;animation-delay:-1.15s}.journey-wave i:nth-child(23){--h:48%;animation-delay:-.35s}.journey-wave i:nth-child(24){--h:64%;animation-delay:-.9s}
.journey-message{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft)}
.journey-message+.journey-message{margin-top:9px}
.journey-message.agent{background:var(--tint);border-color:var(--tint-2)}
.journey-message span{display:block;font:500 9px var(--mono);letter-spacing:.12em;color:var(--sky-text);margin-bottom:4px}
.journey-message p{font-size:13px;line-height:1.4;color:var(--ink)}
.journey-call-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:15px;padding-top:13px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
.journey-call-foot i{width:6px;height:6px;margin-right:5px}
.journey-route{position:relative;display:grid;gap:13px;margin:19px 0 13px;padding:2px 0 2px 25px}
.journey-route::before,.journey-route-progress{content:"";position:absolute;left:5px;top:5px;bottom:5px;width:2px;border-radius:2px;background:var(--line-strong)}
.journey-route-progress{z-index:1;bottom:auto;height:48%;background:linear-gradient(var(--sky-text),var(--sky));transform-origin:top;animation:journeyRoute 4.2s ease-in-out infinite}
.journey-route-node{position:relative;display:grid;gap:1px}
.journey-route-node::before{content:"";position:absolute;left:-25px;top:4px;width:10px;height:10px;border-radius:50%;border:2px solid var(--line-strong);background:#fff;z-index:2}
.journey-route-node.on::before{border-color:var(--sky-text);background:var(--sky)}
.journey-route-node b{font-family:var(--display);font-size:14px;font-weight:600;line-height:1.2;color:var(--ink)}
.journey-route-node small{font-size:11px;line-height:1.35;color:var(--muted)}
.journey-route-panel>p{padding-top:13px;border-top:1px solid var(--line);font-size:12px;line-height:1.45;color:var(--ink-2)}
.journey-score-grid{display:grid;gap:17px;margin-top:21px}
.journey-score-row{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;font-size:12px;color:var(--ink-2)}
.journey-score-row>b{font:500 11px var(--mono);color:var(--sky-text)}
.journey-score-row>i{grid-column:1/-1;display:block;height:6px;border-radius:99px;background:var(--tint-2);overflow:hidden}
.journey-score-row>i em{display:block;width:var(--w);height:100%;border-radius:inherit;background:var(--sky-text);transform-origin:left;animation:journeyScore 4.8s ease-in-out infinite}
.journey-score-row:nth-child(2)>i em{animation-delay:-1.2s;background:var(--sky)}
.journey-score-row:nth-child(3)>i em{animation-delay:-2.4s;background:var(--green)}
.journey-score-note{display:flex;align-items:center;margin-top:20px;padding-top:14px;border-top:1px solid var(--line);font:500 10px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--green)}
.journey-score-note i{width:6px;height:6px;flex:none;margin-right:7px}
@keyframes journeyWave{0%,100%{transform:scaleY(.62);opacity:.5}50%{transform:scaleY(1);opacity:1}}
@keyframes journeyRoute{0%,100%{height:25%;opacity:.55}55%,78%{height:88%;opacity:1}}
@keyframes journeyScore{0%,18%{width:14%}60%,100%{width:var(--w)}}
@keyframes journeyStatus{0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}50%{box-shadow:0 0 0 4px rgba(22,163,74,.13)}}
@media (max-width:980px){.journey-visual-grid{grid-template-columns:1fr 1fr}.journey-call-panel{grid-column:1/-1}}
@media (max-width:600px){
  .journey-visual{margin-top:40px;padding:0 16px 16px}
  .journey-visual-head{align-items:flex-start;flex-direction:column;gap:8px}
  .journey-visual-grid{grid-template-columns:1fr;gap:12px;padding-top:16px}
  .journey-call-panel{grid-column:auto}
  .journey-call-panel,.journey-route-panel,.journey-score-panel{padding:15px}
}
@media (prefers-reduced-motion:reduce){.journey-visual-status i,.journey-wave i,.journey-route-progress,.journey-score-row>i em{animation:none}.journey-route-progress{height:88%}.journey-score-row>i em{width:var(--w)}}

/* ---------- customer lifecycle flow ---------- */
.flow{position:relative;padding:8px 0 4px;overflow-x:auto;scrollbar-width:thin}
.flow-line{position:absolute;left:24px;right:24px;top:31px;height:2px;background:var(--line)}
.flow-line i{display:block;height:100%;width:var(--p,0%);background:linear-gradient(90deg,var(--sky-deep),var(--sky))}
.flow-nodes{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(150px,1fr));gap:14px;min-width:1050px;position:relative}
.flow-nodes li{padding-top:52px;position:relative;transition:opacity .4s}
.flow-nodes li::before{content:"";position:absolute;left:50%;top:22px;width:18px;height:18px;border-radius:50%;background:#fff;border:2px solid var(--line-strong);transform:translateX(-50%);transition:all .4s;z-index:1}
.flow-nodes li.on::before{border-color:var(--sky-text);background:var(--sky-text);box-shadow:0 0 0 6px var(--tint)}
.flow-nodes li.done::before{border-color:var(--sky-text);background:#fff}
.flow-nodes li.done::after{content:"";position:absolute;left:calc(50% - 3px);top:26px;width:5px;height:9px;border-right:2px solid #16A34A;border-bottom:2px solid #16A34A;transform:rotate(45deg);z-index:2}
.flow-nodes li:not(.on):not(.done){opacity:.55}
.flow-nodes .when{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sky-text)}
.flow-nodes b{display:block;font-family:var(--display);font-size:17px;font-weight:600;color:var(--ink);margin:4px 0 2px;line-height:1.2}
.flow-nodes .who{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin-bottom:8px}
.flow-nodes .who::before{content:"";width:13px;height:13px;flex:none;background:var(--muted);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.362 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.362 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center/contain no-repeat}
.flow-nodes .who.wa::before{background:none;mask:none;-webkit-mask:none;width:14px;height:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2316A34A'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.6.8-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.3-.4.8-1.4.1-.2 0-.3 0-.5l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.8 11.9 11.9 0 0 0 4.6 4c1.7.7 2.1.6 2.8.5a2.4 2.4 0 0 0 1.6-1.1 2 2 0 0 0 .1-1.1c0-.1-.2-.2-.4-.3z'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center}
.flow-nodes p{font-size:13.5px;color:var(--ink-2);line-height:1.5;max-height:0;overflow:hidden;opacity:0;transform:translateY(6px);transition:max-height .5s,opacity .4s}
.flow-nodes li.on p,.flow-nodes li.done p{max-height:120px;opacity:1;transform:translateY(0)}
.flow-dot{position:absolute;top:25px;left:0;width:12px;height:12px;border-radius:50%;background:var(--sky-deep);box-shadow:0 0 0 4px var(--tint),0 2px 6px rgba(1,24,56,.25);transform:translateX(-50%);opacity:0;z-index:3;pointer-events:none}
.flow-dot.show{opacity:1}
.flow-record{margin-top:20px;padding:14px 18px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-sm);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.flow-record .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);flex:none}
.flow-record .chips{display:flex;flex-wrap:wrap;gap:8px;min-height:26px}
.flow-record .chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;background:#fff;border:1px solid var(--line-strong);border-radius:999px;font-size:12.5px;color:var(--ink-2)}
.flow-record .chip i{width:6px;height:6px;border-radius:50%;background:#16A34A;flex:none}
@media (prefers-reduced-motion: no-preference){
  .flow-dot{}
  .flow-nodes p{transition:max-height .5s,opacity .4s,transform .4s}
  .flow-nodes li.on::before{animation:flowPulse 1.8s ease-out infinite}
  .flow-record .chip{animation:chipIn .3s ease}
}
@keyframes flowPulse{0%{box-shadow:0 0 0 6px var(--tint)}70%{box-shadow:0 0 0 15px rgba(98,164,255,0)}100%{box-shadow:0 0 0 6px var(--tint)}}
@keyframes chipIn{from{opacity:0;transform:translateY(4px) scale(.92)}to{opacity:1;transform:none}}
.flow-foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.flow-foot p{color:var(--ink-2);font-size:16px}
.flow-foot strong{color:var(--ink)}
@media (max-width:900px){.flow-nodes{min-width:1050px}.flow-nodes li:not(.on):not(.done){opacity:.8}.flow-nodes p{max-height:120px;opacity:1}}

/* ---------- telephony map ---------- */
.telco-wrap{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px;overflow-x:auto}
.telco{width:100%;min-width:900px;height:auto;display:block}
.telco .node rect{fill:#fff;stroke:var(--line-strong);stroke-width:1}
.telco .node.region rect{fill:var(--bg-soft)}
.telco .node.core rect{fill:var(--navy);stroke:var(--navy)}
.telco .t{font:600 13px var(--body);fill:var(--ink)}
.telco .s{font:11.5px var(--body);fill:var(--muted)}
.telco .core .t{fill:#fff}.telco .core .s{fill:#B8C7E6}
.telco .lbl{font:600 11px var(--mono);letter-spacing:.14em;fill:var(--muted)}
.telco .badge{fill:var(--sky)}.telco .badge.alt{fill:var(--tint-2)}
.telco .b{font:600 10px var(--mono);letter-spacing:.08em;fill:var(--navy)}
.telco .wire{fill:none;stroke:var(--line-strong);stroke-width:1.4}
.telco .wire.dash{stroke-dasharray:4 4}
.telco .pulse{fill:var(--sky-text)}
.telco .pulse.g{fill:var(--green)}
.telco .pulse.m{fill:#7C8DB5}
.telco .pulse.fo{fill:var(--sky)}
.telco .pulse.x{fill:#fff;stroke:#DC2626;stroke-width:1.6}
.telco .guard rect{fill:var(--tint);stroke:var(--line-strong);stroke-width:1;stroke-dasharray:5 4}
.telco .chip rect{fill:#fff;stroke:var(--line-strong);stroke-width:1}
.telco .panel rect{fill:var(--bg-soft);stroke:var(--line-strong);stroke-width:1}
.telco .pod rect{fill:#fff;stroke:var(--line-strong);stroke-width:1}
.telco .pod.ghost rect{fill:#fff;stroke:var(--sky);stroke-dasharray:4 4}
.telco .ban{fill:#fff;stroke:#DC2626;stroke-width:1.6}
.telco .node rect.badge{fill:var(--sky);stroke:var(--sky)}
.telco .node rect.badge.alt{fill:var(--tint-2);stroke:var(--tint-2)}
.telco .glyph{fill:none;stroke:var(--navy);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.telco .barfill{fill:var(--sky)}

/* ---------- integration catalogue ---------- */
.ilegend{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
/* Same half-column quantity-query technique as .cols-3, see above. */
.igrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.igrid>*{grid-column:span 2}
.igrid:has(>:nth-child(3n+1):last-child)>:last-child{grid-column:3/span 2}
.igrid:has(>:nth-child(3n+2):last-child)>:nth-last-child(2){grid-column:2/span 2}
.igrid:has(>:nth-child(3n+2):last-child)>:last-child{grid-column:4/span 2}
.igroup{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px}
.igroup h3{font-size:15px;font-weight:600;margin-bottom:12px;color:var(--ink)}
.ichips{display:flex;flex-wrap:wrap;gap:8px}
.ichip{display:inline-flex;align-items:center;gap:8px;font-size:13px;border:1px solid var(--line);border-radius:999px;padding:6px 11px;color:var(--ink-2);background:#fff}
.ichip i{width:8px;height:8px;border-radius:50%;background:var(--line-strong);flex:none}
.ichip.module i{background:var(--navy)}.ichip.native i{background:var(--sky-text)}.ichip.zapier i{background:#F59E0B}.ichip.api i{background:var(--line-strong)}
@media (max-width:1000px){
  .igrid{grid-template-columns:repeat(2,1fr)}
  .igrid>*{grid-column:auto}
  .igrid:has(>:nth-child(2n+1):last-child)>:last-child{grid-column:1/-1}
}
@media (max-width:600px){.igrid{grid-template-columns:1fr}.igrid>*{grid-column:auto}}
/* ---------- security controls grid ---------- */
.egrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ecard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;justify-items:center;text-align:center;gap:6px;transition:border-color .25s,box-shadow .25s}
.ecard:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.ecard img{width:110px;height:110px}
.ecard h3{font-size:15px;font-weight:600}
.ecard p{font-size:13px;color:var(--muted);line-height:1.45}
@media (max-width:640px){.egrid{grid-template-columns:repeat(2,1fr)}.ecard img{width:84px;height:84px}}
/* ---------- footer trust ---------- */
.ftr-trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.tbadge{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:7px 12px;color:var(--ink-2)}
.tbadge svg{width:14px;height:14px;color:var(--green)}
.tbadge.link{color:var(--sky-text);border-color:var(--tint-2)}
.cbadge{height:36px;width:auto}
.cbadges{display:flex;gap:12px;margin-top:22px}
.social{display:flex;gap:10px}
.social a{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;color:var(--ink-2);transition:all .2s}
.social a:hover{color:var(--ink);border-color:var(--ink)}
.social svg{width:18px;height:18px}

/* ---------- clean bar chart (replaces particle chart) ---------- */
.barchart{width:100%;height:auto;display:block}
.barchart .bg{fill:var(--bg-soft)}
.barchart .bar{fill:var(--sky-text)}
.barchart .bar.alt{fill:var(--sky)}
.barchart .lbl{font:11px var(--mono);fill:var(--muted);letter-spacing:.04em}
.barchart .val{font:600 12px var(--body);fill:var(--ink)}
.fsearch{flex:1 1 100%;display:block;margin-bottom:6px}
.fsearch input{width:100%;max-width:420px;font:inherit;font-size:14px;padding:10px 14px;border:1px solid var(--line-strong);border-radius:999px;background:#fff;min-height:40px}
.fsearch input:focus{outline:2px solid var(--sky);border-color:var(--sky)}

/* ---------- A/B test demo ---------- */
.ab{background:#fff;border:1px solid var(--line-strong);border-radius:20px;padding:22px;box-shadow:var(--shadow)}
.ab-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.ab-phase{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--tint);border-radius:999px;padding:6px 12px}
.ab-rows{display:grid;gap:10px}
.ab-row{display:grid;grid-template-columns:minmax(200px,1.1fr) minmax(0,1.6fr) auto;gap:18px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:14px;transition:background .5s,border-color .5s,opacity .5s}
.ab-row.win{border-color:var(--green);background:#F2FBF5}
.ab-row.lose{opacity:.45}
.ab-meta b{display:block;font-family:var(--display);font-size:16px;color:var(--ink)}
.ab-meta span{display:block;font-size:13px;color:var(--muted);line-height:1.4;margin-top:2px}
.ab-bars{display:grid;gap:8px}
.ab-bar{display:grid;grid-template-columns:118px 1fr 48px;align-items:center;gap:10px}
.ab-bar em{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted);font-style:normal;text-transform:uppercase}
.ab-bar .trk{position:relative;height:12px;background:var(--bg-soft);border-radius:6px;overflow:hidden;display:block}
.ab-bar i{position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:6px;background:var(--sky);transition:width 1.4s cubic-bezier(.2,.8,.2,1)}
.ab-bar.outcome i{background:var(--sky-text)}
.ab-row.win .ab-bar.outcome i{background:var(--green)}
.ab-bar b{font-family:var(--mono);font-size:12px;color:var(--ink);font-weight:500;text-align:right;transition:color .4s}
.ab-row{transition:background .8s,border-color .8s,opacity .8s}
.ab-n{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.ab-n b{color:var(--ink);font-weight:500}
.ab-foot{margin-top:16px;font-size:14px;color:var(--ink-2);border-top:1px solid var(--line);padding-top:14px}
@media (max-width:760px){.ab-row{grid-template-columns:1fr;gap:10px}.ab-n{text-align:right}}
.ab+.grid{margin-top:28px}

.ilogo{width:18px;height:18px;flex:none;display:inline-grid;place-items:center}
.ilogo.mono{font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.02em;color:var(--sky-text);background:var(--tint);border-radius:5px}
.ichip .ilogo{margin-right:2px}
.ichip i{margin-left:2px}
.tags.logos span{display:inline-flex;align-items:center;gap:8px}
.tags.logos .ilogo{width:16px;height:16px}

/* ---------- integration marquee ---------- */
.integ-marquee{margin-top:14px}
.track.integ{gap:12px;animation-duration:70s;padding-bottom:6px}
.track.integ.rev{animation-direction:reverse;animation-duration:80s}
.track.integ span{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-size:14px;font-weight:600;color:var(--ink-2);border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 14px 9px 11px;white-space:nowrap}
.track.integ .ilogo{width:16px;height:16px}

.cap.wa{align-self:flex-end;background:#E8F8EE;border-color:#BFE8CE;color:var(--ink);position:relative;padding-left:40px}
.cap.wa::before{content:"";position:absolute;left:12px;top:12px;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2316A34A'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm0 18.2a8.2 8.2 0 0 1-4.2-1.2l-.3-.2-3 .8.8-2.9-.2-.3A8.2 8.2 0 1 1 12 20.2zm4.5-6.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.6.8-.8 1c-.1.2-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.3-.4.8-1.4.1-.2 0-.3 0-.5l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.8 11.9 11.9 0 0 0 4.6 4c1.7.7 2.1.6 2.8.5a2.4 2.4 0 0 0 1.6-1.1 2 2 0 0 0 .1-1.1c0-.1-.2-.2-.4-.3z'/%3E%3C/svg%3E") center/contain no-repeat}
.cap.wa small{color:#15803D}
@media (max-width:760px){.ab-bar{grid-template-columns:90px 1fr 44px}}

.ph-bottom{position:absolute;left:22px;right:22px;bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:12px}
.ph-bottom .dots{display:flex;gap:8px}
.ph-bottom .dots i{width:8px;height:8px;border-radius:50%;background:var(--line-strong);transition:background .4s,transform .4s}
.ph-bottom .dots i.on{background:var(--sky-text);transform:scale(1.25)}
.ph-bottom .dots i.done{background:var(--sky)}
.ph-bottom span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media (max-width:900px){.phone{height:auto;min-height:420px}.pane{position:relative;inset:auto;display:none}.pane.on{display:flex}.ph-bottom{position:static;margin-top:16px}}

.ftr .brand .cbadges{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;max-width:488px;margin-top:18px;align-items:stretch}
.ftr .brand .cbadge{display:block;width:100%;height:auto;aspect-ratio:3/1;max-width:none}
.ftr .brand .tech-badges{display:grid;grid-template-columns:1fr;gap:10px;width:100%;max-width:488px;margin-top:10px;align-items:stretch}
.ftr .brand .tech-badges .tbadge{display:flex;width:100%;height:46px;min-width:0;box-sizing:border-box;justify-content:flex-start;gap:11px;padding:10px 18px;font-size:10px;letter-spacing:.08em;white-space:nowrap}
.ftr .brand .tech-badges .tbadge img{width:20px;height:20px;flex:none}
@media (max-width:700px){.ftr .brand .cbadges,.ftr .brand .tech-badges{width:min(100%,420px);max-width:none}.ftr .brand .cbadges{padding:10px;gap:10px}}
@media (max-width:420px){.ftr .brand .cbadges,.ftr .brand .tech-badges{width:min(100%,360px);max-width:none}}

/* ---------- security hero drawing ---------- */
.hv-svg{width:100%;max-width:520px;min-width:0}
.split .hv-svg{max-width:520px;justify-self:end;border:0;box-shadow:none;background:none}
.guard{width:100%;height:auto;display:block}
.guard text{font-family:var(--body)}
.guard .cap{font-size:11px;font-weight:600;fill:var(--navy)}
.guard .id{font-size:11px;font-weight:700;fill:var(--navy);letter-spacing:.02em}
.guard .chip-safe rect{fill:#E8F0FF}
.guard .chip-safe text{fill:var(--navy);font-size:11px;font-weight:600}
.guard .chip-attack rect{fill:var(--navy)}
.guard .chip-attack text{fill:#fff;font-size:10.5px;font-weight:600}
.guard .pill rect{fill:var(--green)}
.guard .pill text{fill:#fff;font-size:10px;font-weight:700}
.guard .stopmark{fill:#C2410C}
@media (max-width:900px){
  .split .hv-svg{width:100%;max-width:none;justify-self:stretch}
  .split .hv-svg .guard{max-width:760px;margin:0 auto}
}

/* ---------- technical flow ---------- */
.tech{width:100%;min-width:980px;height:auto;display:block}
.tech .node rect{fill:#fff;stroke:var(--line-strong);stroke-width:1}
.tech .node.region rect{fill:var(--bg-soft)}
.tech .core>rect{fill:var(--navy)}
.tech .core .inner rect{fill:#0F2350;stroke:rgba(255,255,255,.14)}
.tech .core .inner.brain rect{fill:var(--sky-deep);stroke:var(--sky)}
.tech .core .inner.svc rect{fill:#13305F}
.tech .core .inner.guard rect{fill:#0B1C42;stroke:var(--sky);stroke-dasharray:3 3}
.tech .core .t{fill:#fff}.tech .core .s{fill:#B8C7E6}
.tech .core .wire.w{stroke:rgba(255,255,255,.35)}
.tech .rail>rect{fill:var(--bg-soft);stroke:var(--line)}
.tech .rail .inner rect{fill:#fff;stroke:var(--line-strong)}
.tech .t{font:600 12px var(--body);fill:var(--ink)}
.tech .s{font:11px var(--body);fill:var(--muted)}
.tech .lbl{font:600 11px var(--mono);letter-spacing:.14em;fill:var(--muted)}
.tech .badge{fill:var(--sky)}.tech .b{font:600 11px var(--mono);fill:var(--navy);letter-spacing:.06em}
.tech .wire{fill:none;stroke:var(--line-strong);stroke-width:1.4}
.tech .pulse{fill:var(--sky-text)}.tech .pulse.g{fill:var(--green)}.tech .pulse.m{fill:#7C8DB5}

/* ---------- fixes: integration marquee, lifecycle markers ---------- */
.marquee .track.integ{display:flex;grid-template-columns:none;gap:12px;align-items:center}
.marquee .track.integ.rev{animation-direction:reverse}
.flow-nodes{grid-template-columns:repeat(7,minmax(140px,1fr));gap:20px;min-width:1100px}
.flow-nodes li{padding-top:60px}
.flow-nodes li::before{left:50%;top:12px;width:20px;height:20px;border:2px solid var(--line-strong);background:#fff;box-shadow:none;animation:none}
.flow-nodes li.on{opacity:1}
.flow-nodes li.on::before{border-color:var(--line-strong);background:#fff;box-shadow:none;animation:none}
.flow-nodes li.on b{color:var(--sky-text)}
.flow-nodes li.done::before{border-color:var(--green);background:var(--green)}
.flow-nodes li::after{display:none}
.flow-nodes li.done::after{display:block;content:"";position:absolute;left:calc(50% - 4px);top:18px;width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);background:none}
.flow-line{top:29px}
.flow-dot{top:22px;width:16px;height:16px;background:var(--sky-text);box-shadow:0 0 0 5px var(--tint),0 2px 8px rgba(1,24,56,.2)}
.flow-nodes b{font-size:18px;margin:6px 0 4px}
.flow-nodes .who{margin-bottom:10px}
.flow-nodes p{font-size:14px;max-height:none;opacity:1}
.flow-nodes li:not(.on):not(.done){opacity:.45}
.tech-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.tech-badges .tbadge img{width:16px;height:16px}

/* ---------- blog featured images ---------- */
.blog-hero{max-width:var(--max);margin:0 auto;padding:0 28px}
.blog-hero img{width:100%;height:auto;max-height:520px;object-fit:cover;border-radius:var(--r);border:1px solid var(--line);filter:saturate(.96) blur(.25px)}
@media (max-width:860px){.blog-hero{padding:0 20px}}

/* ---------- article field visuals ---------- */
.blog-field-visual{position:relative;max-width:calc(var(--max) - 56px);margin:12px auto 28px;padding:22px 28px 24px;overflow:hidden;border:1px solid var(--line-strong);border-radius:var(--r);background:linear-gradient(145deg,#fff 0%,var(--bg-soft) 100%);box-shadow:var(--shadow)}
.blog-field-visual::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:32px 32px;opacity:.45;mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 92%);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 92%);pointer-events:none}
.blog-field-head,.blog-field-steps,.blog-field-visual figcaption{position:relative;z-index:1}
.blog-field-head{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-bottom:15px;border-bottom:1px solid var(--line);font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.blog-field-status{display:inline-flex;align-items:center;gap:8px;color:var(--green)}
.blog-field-status i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(22,163,74,.12);animation:blogFieldPulse 2.4s ease-in-out infinite}
.blog-field-kicker{position:relative;z-index:1;margin-top:22px;color:var(--sky-text);font:500 12px var(--mono);letter-spacing:.13em;text-transform:uppercase}
.blog-field-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}
.blog-field-step{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;min-height:116px;padding:18px;border:1px solid var(--line-strong);border-radius:14px;background:rgba(255,255,255,.86);transition:border-color .25s,transform .25s,box-shadow .25s}
.blog-field-step:nth-child(2){background:var(--tint)}
.blog-field-step:hover{border-color:var(--sky);transform:translateY(-3px);box-shadow:0 14px 30px -24px var(--sky-text)}
.blog-field-step:not(:last-child)::after{content:"";position:absolute;top:50%;right:-16px;width:15px;height:1px;background:var(--sky);opacity:.65}
.blog-field-step:not(:last-child)::before{content:"";position:absolute;top:calc(50% - 3px);right:-16px;width:6px;height:6px;border-top:1px solid var(--sky);border-right:1px solid var(--sky);transform:rotate(45deg);opacity:.8}
.blog-field-step>span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;font:12px var(--mono)}
.blog-field-step b{display:block;color:var(--ink);font:600 18px var(--display);line-height:1.15}
.blog-field-step small{display:block;margin-top:9px;color:var(--muted);font:13px var(--body);line-height:1.45}
.blog-field-visual figcaption{display:flex;align-items:center;gap:13px;margin-top:18px;padding-top:15px;border-top:1px solid var(--line);font:12px var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.blog-field-visual figcaption strong{color:var(--ink);font:600 13px var(--body);letter-spacing:0;text-transform:none}
@keyframes blogFieldPulse{0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}50%{box-shadow:0 0 0 4px rgba(22,163,74,.13)}}
@media (max-width:860px){.blog-field-visual{margin:4px 20px 28px;padding:20px}.blog-field-steps{grid-template-columns:1fr;gap:10px}.blog-field-step{min-height:0}.blog-field-step:not(:last-child)::after,.blog-field-step:not(:last-child)::before{display:none}}
@media (max-width:560px){.blog-field-visual{margin:0 20px 24px;padding:16px;border-radius:var(--r)}.blog-field-head{align-items:flex-start;flex-direction:column;gap:9px}.blog-field-kicker{margin-top:18px}.blog-field-step{grid-template-columns:30px minmax(0,1fr);padding:15px}.blog-field-step>span{width:28px;height:28px}.blog-field-step b{font-size:17px}.blog-field-step small{font-size:12.5px}.blog-field-visual figcaption{align-items:flex-start;flex-wrap:wrap;gap:8px}.blog-field-visual figcaption strong{width:100%;order:3}}
@media (prefers-reduced-motion:reduce){.blog-field-status i,.blog-field-step{animation:none;transition:none}}

/* ---------- references: open-ended "more" markers ---------- */
.logo-wall li.more b{color:var(--sky-text)}
.track.brands span.more{color:var(--sky-text);opacity:1}
.card-img{width:calc(100% + 52px);margin:-26px -26px 6px;height:150px;object-fit:cover;border-radius:var(--r) var(--r) 0 0;filter:saturate(.96) blur(.25px)}

/* cta-band sphere placement: inside the container, not off the right edge */
.cta-band .art{right:max(28px,calc((100vw - var(--max)) / 2 + 28px));width:min(30vw,380px);top:50%;transform:translateY(-50%)}
.cta-band .wrap{padding-right:min(34vw,420px)}
@media (max-width:900px){.cta-band .wrap{padding-right:28px}}
html[dir="rtl"] .cta-band .art{right:auto;left:max(28px,calc((100vw - var(--max)) / 2 + 28px))}
html[dir="rtl"] .cta-band .wrap{padding-right:28px;padding-left:min(34vw,420px)}
@media (max-width:900px){html[dir="rtl"] .cta-band .wrap{padding-left:28px}}
@media (max-width:860px){html[dir="rtl"] .cta-band .wrap{padding-right:20px}}

/* bespoke hero illustrations */
.hv-art{max-width:520px;justify-self:end;width:100%}
.hv-art svg{width:100%;height:auto;display:block}
@media (max-width:900px){.hv-art{justify-self:stretch;max-width:420px;margin:0 auto}}

/* bespoke blog illustrations */
.blog-art svg{width:100%;height:auto;display:block;border-radius:var(--r);border:1px solid var(--line);background:#fff}
.card-art{display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff;border-bottom:1px solid var(--line)}
.card-art svg{width:165%;height:auto;flex:none;display:block}

/* investors page: indexed growth chart */
#growth-chart svg{width:100%;height:auto}
#growth-chart .l{fill:none;stroke:var(--navy);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.8s ease}
#growth-chart .a{fill:var(--sky);opacity:0;transition:opacity 1.2s ease .3s}
#growth-chart.in .l{stroke-dashoffset:0}
#growth-chart.in .a{opacity:.12}
#growth-chart .axis-line{stroke:var(--line-strong);stroke-width:1}
#growth-chart .axis-lbl,#growth-chart .chart-cap{font:11px var(--mono);letter-spacing:.06em;fill:var(--muted)}
#growth-chart .chart-values{font:600 12px var(--body);fill:var(--ink)}
#growth-chart .chip-bg{fill:var(--navy)}
#growth-chart .chip-txt{font:600 11.5px var(--mono);letter-spacing:.02em;fill:#fff}
#growth-chart .dot-pulse{fill:none;stroke:var(--green);stroke-width:2;animation:chart-pulse 2.2s ease-out infinite}
#growth-chart .dot-core{fill:var(--green)}
@keyframes chart-pulse{0%{r:6;stroke-opacity:.55}100%{r:16;stroke-opacity:0}}

/* ---------- Sector Insight: conversation-to-management visual ---------- */
.insight-architecture-sec{overflow:hidden}
.insight-architecture{position:relative;overflow:hidden;margin:0;border:1px solid var(--line-strong);border-radius:22px;background:#fff;box-shadow:var(--shadow);padding:22px 24px 20px}
.insight-architecture::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(246,248,253,.74),transparent 28%);pointer-events:none}
.insight-board-grid{position:absolute;inset:64px 0 54px;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:34px 34px;opacity:.38;mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 90%);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 90%);pointer-events:none}
.insight-board-head,.insight-architecture-grid,.insight-flow-labels,.insight-architecture figcaption{position:relative;z-index:1}
.insight-board-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line);font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.insight-board-head b{display:inline-flex;align-items:center;gap:8px;color:var(--green);font-weight:500}
.insight-board-head b i,.insight-report-bar b i,.insight-trace-head b i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(22,163,74,.12);animation:insightPulse 2.4s ease-in-out infinite}
.insight-architecture-grid{display:grid;grid-template-columns:minmax(0,1.07fr) minmax(190px,.7fr) minmax(0,1.07fr);gap:22px;align-items:stretch;padding:40px 0 34px}
.insight-panel{display:flex;flex-direction:column;min-width:0;height:100%;padding:18px;border:1px solid var(--line-strong);border-radius:15px;background:rgba(255,255,255,.92);box-shadow:0 16px 34px -30px rgba(1,24,56,.42)}
.insight-panel-head{display:grid;gap:7px;padding-bottom:13px;border-bottom:1px solid var(--line)}
.insight-panel-head span{color:var(--sky-text);font:500 10px var(--mono);letter-spacing:.13em}
.insight-panel-head b{color:var(--ink);font:600 18px/1.2 var(--display)}
.insight-panel-copy{margin:13px 0 15px;color:var(--muted);font-size:13px;line-height:1.45}
.insight-stream,.insight-output-list{display:grid;gap:10px}
.insight-stream-row{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:8px;align-items:start;padding:10px 0;border-bottom:1px dashed var(--line);animation:insightRowFocus 9s ease-in-out infinite}
.insight-stream-row:nth-child(2){animation-delay:-3s}.insight-stream-row:nth-child(3){animation-delay:-6s}
.insight-stream-row:last-child{border-bottom:0}
.insight-stream-icon{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:var(--tint);color:var(--sky-text);font:500 10px var(--mono)}
.insight-stream-row b{display:block;color:var(--ink);font:500 12px/1.35 var(--body);overflow-wrap:anywhere}
.insight-stream-row small{display:block;margin-top:4px;color:var(--muted);font:11px/1.3 var(--body)}
.insight-stream-row em,.insight-output-list>div>em{font:500 9px var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--green);font-style:normal;white-space:nowrap}
.insight-panel-foot{display:block;margin-top:auto;padding-top:13px;border-top:1px solid var(--line);color:var(--muted);font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;overflow-wrap:anywhere}
.insight-engine{position:relative;align-self:center;display:grid;place-items:center;min-height:286px;isolation:isolate}
.insight-engine-orbit{position:absolute;left:50%;top:42%;border:1px solid rgba(98,164,255,.48);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.insight-orbit-one{width:128px;height:128px;box-shadow:0 0 0 14px rgba(98,164,255,.06)}
.insight-orbit-two{width:190px;height:190px;border-color:rgba(98,164,255,.2);animation:insightOrbit 8s linear infinite}
.insight-orbit-three{width:252px;height:252px;border-style:dashed;border-color:rgba(1,24,56,.14);animation:insightOrbit 13s linear infinite reverse}
.insight-engine-core{position:relative;z-index:1;display:grid;place-items:center;width:142px;height:142px;padding:18px;border:1px solid var(--sky);border-radius:50%;background:var(--navy);box-shadow:0 22px 50px -28px rgba(1,24,56,.8);text-align:center}
.insight-engine-core span{color:var(--sky);font:500 8px var(--mono);letter-spacing:.13em}
.insight-engine-core strong{margin-top:8px;color:#fff;font:600 23px/1 var(--display);letter-spacing:-.035em}
.insight-engine-core strong em{color:var(--sky);font-style:normal}
.insight-engine-core small{margin-top:7px;color:#b8c7e6;font:10px var(--body)}
.insight-engine-readout{position:absolute;right:0;bottom:0;display:grid;gap:2px;text-align:right}
.insight-engine-readout b{color:var(--ink);font:600 22px var(--display)}
.insight-engine-readout span{color:var(--muted);font:10px var(--mono);letter-spacing:.04em}
.insight-output-list>div{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:9px;align-items:start;padding:11px 0;border-bottom:1px dashed var(--line)}
.insight-output-list>div:last-child{border-bottom:0}
.insight-output-mark{width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--sky-text);box-shadow:0 0 0 4px var(--tint)}
.insight-output-mark.green{background:var(--green);box-shadow:0 0 0 4px #e8f8ee}.insight-output-mark.navy{background:var(--navy);box-shadow:0 0 0 4px #e9eef7}.insight-output-mark.sky{background:var(--sky);box-shadow:0 0 0 4px #edf5ff}
.insight-output-list p{min-width:0}.insight-output-list p b{display:block;color:var(--ink);font:600 12px/1.3 var(--display)}
.insight-output-list p small{display:block;margin-top:4px;color:var(--muted);font:11px/1.3 var(--body);overflow-wrap:anywhere}
.insight-output-list>div>em{color:var(--sky-text)}
.insight-flow-labels{display:flex;align-items:center;gap:12px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font:500 10px var(--mono);letter-spacing:.13em}
.insight-flow-labels i{position:relative;display:block;flex:1;height:1px;background:var(--line-strong);overflow:visible}
.insight-flow-labels i::after{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;border-radius:50%;background:var(--sky-text);transform:translate(-50%,-50%);animation:insightFlow 3.4s ease-in-out infinite}
.insight-flow-labels i:nth-of-type(2)::after{animation-delay:-1.1s}.insight-flow-labels i:nth-of-type(3)::after{animation-delay:-2.2s}
.insight-architecture figcaption{margin-top:14px;color:var(--muted);font-size:13px;line-height:1.5;max-width:80ch}
@keyframes insightPulse{0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}50%{box-shadow:0 0 0 4px rgba(22,163,74,.14)}}
@keyframes insightOrbit{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes insightFlow{0%,100%{left:0;opacity:.25}45%,60%{left:100%;opacity:1}}
@keyframes insightRowFocus{0%,100%{background:transparent;transform:none}8%,24%{background:var(--tint);transform:translateX(3px)}}

.insight-report{min-width:0;border:1px solid var(--line-strong);border-radius:20px;background:#fff;box-shadow:var(--shadow);overflow:hidden}
.insight-report-bar,.insight-report-foot,.insight-trace-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font:500 10px var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.insight-report-bar{padding:15px 18px;border-bottom:1px solid var(--line);background:var(--bg-soft)}
.insight-report-bar b,.insight-trace-head b{display:inline-flex;align-items:center;gap:8px;color:var(--green);font-weight:500}
.insight-report-body{padding:23px}
.insight-report-title{display:flex;justify-content:space-between;gap:18px;align-items:start}
.insight-report-title span,.insight-report-highlight>span{color:var(--sky-text);font:500 10px var(--mono);letter-spacing:.13em;text-transform:uppercase}
.insight-report-title h3{margin-top:8px;color:var(--ink);font:600 24px/1.1 var(--display);letter-spacing:-.03em}
.insight-report-title small{color:var(--muted);font:11px/1.45 var(--mono);text-align:right}
.insight-report-highlight{display:grid;gap:7px;margin-top:22px;padding:15px;border:1px solid var(--tint-2);border-radius:12px;background:var(--tint)}
.insight-report-highlight strong{color:var(--ink);font:600 17px/1.25 var(--display)}
.insight-report-highlight small{color:var(--muted);font-size:12px;line-height:1.4}
.insight-report-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px}
.insight-report-metrics>div{display:grid;gap:5px;padding:12px 10px;border:1px solid var(--line);border-radius:10px}
.insight-report-metrics span,.insight-report-metrics small{color:var(--muted);font:10px var(--mono);line-height:1.3}
.insight-report-metrics strong{color:var(--sky-text);font:600 27px var(--display);letter-spacing:-.04em}
.insight-report-lines{display:grid;gap:0;margin-top:19px}
.insight-report-lines>div{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:8px;padding:13px 0;border-bottom:1px dashed var(--line);align-items:start}
.insight-report-lines>div>span{color:var(--sky-text);font:500 10px var(--mono)}
.insight-report-lines p{min-width:0}.insight-report-lines p b{display:block;color:var(--ink);font:600 13px/1.3 var(--display)}
.insight-report-lines p small{display:block;margin-top:4px;color:var(--muted);font:11px/1.35 var(--body)}
.insight-report-lines em{color:var(--sky-text);font-style:normal}
.insight-report-foot{margin-top:15px;padding-top:14px;border-top:1px solid var(--line);letter-spacing:.04em;text-transform:none}
.insight-report-foot b{color:var(--sky-text);font:600 12px var(--body)}
.insight-signal-grid .card{min-height:220px}
.insight-steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.insight-steps li::after{right:-20px}
.insight-trace{min-width:0;padding:22px;border:1px solid var(--line-strong);border-radius:18px;background:#fff;box-shadow:var(--shadow)}
.insight-trace-head{padding-bottom:15px;border-bottom:1px solid var(--line)}
.insight-trace-title{display:grid;gap:7px;padding:19px 0 17px}
.insight-trace-title span{color:var(--sky-text);font:500 10px var(--mono);letter-spacing:.13em;text-transform:uppercase}
.insight-trace-title strong{color:var(--ink);font:600 21px/1.2 var(--display)}
.insight-trace-title small{color:var(--muted);font:12px var(--body)}
.insight-trace-row{display:grid;grid-template-columns:minmax(100px,.72fr) minmax(0,1.28fr);gap:14px;padding:12px 0;border-top:1px dashed var(--line);align-items:start}
.insight-trace-row span{color:var(--muted);font:10px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.insight-trace-row b{color:var(--ink);font:500 12px/1.4 var(--body);text-align:right;overflow-wrap:anywhere}
.insight-trace-footer{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:17px;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font:10px var(--mono);letter-spacing:.06em}
.insight-trace-footer a{color:var(--sky-text);font-weight:600}
@media(max-width:1000px){.insight-architecture-grid{grid-template-columns:minmax(0,1fr) minmax(180px,.72fr);gap:18px}.insight-engine{grid-column:1/-1;grid-row:1;min-height:230px}.insight-input{grid-column:1}.insight-output{grid-column:2}.insight-engine-readout{right:calc(50% - 126px)}.insight-steps{grid-template-columns:repeat(3,minmax(0,1fr))}.insight-steps li:nth-child(3)::after{display:none}}
@media(max-width:700px){.insight-architecture{padding:17px 16px}.insight-board-head{align-items:flex-start;flex-direction:column;gap:9px}.insight-architecture-grid{grid-template-columns:1fr;padding:27px 0 25px}.insight-panel{height:auto}.insight-engine{grid-column:auto;grid-row:auto;min-height:245px}.insight-input,.insight-output{grid-column:auto}.insight-engine-readout{right:12%;bottom:0}.insight-flow-labels{gap:7px;font-size:8px;letter-spacing:.08em}.insight-architecture figcaption{font-size:12px}.insight-report-body{padding:18px}.insight-report-title{flex-direction:column;gap:10px}.insight-report-title small{text-align:left}.insight-report-metrics{grid-template-columns:1fr}.insight-signal-grid .card{min-height:0}.insight-steps{grid-template-columns:1fr}.insight-steps li:nth-child(3)::after{display:block}}
@media(max-width:480px){.insight-panel{padding:15px}.insight-stream-row{grid-template-columns:25px minmax(0,1fr);gap:7px}.insight-stream-row em{grid-column:2}.insight-engine-orbit{top:42%}.insight-orbit-one{width:112px;height:112px}.insight-orbit-two{width:166px;height:166px}.insight-orbit-three{width:218px;height:218px}.insight-engine-core{width:126px;height:126px}.insight-engine-core strong{font-size:20px}.insight-engine-readout{right:0}.insight-report-highlight strong{font-size:16px}.insight-trace{padding:17px}.insight-trace-row{grid-template-columns:1fr;gap:6px}.insight-trace-row b{text-align:left}}
@media(prefers-reduced-motion:reduce){.insight-board-head b i,.insight-report-bar b i,.insight-trace-head b i,.insight-engine-orbit,.insight-stream-row,.insight-flow-labels i::after{animation:none}.insight-stream-row{transform:none}}

/* Lifecycle rail: one centre line for the rail, markers and travelling signal. */
.flow-line{left:0;right:auto;width:0;top:29px;height:2px;z-index:0;pointer-events:none}
.flow-line i{display:block;width:var(--p,0%);height:100%;transition:none}
.flow-nodes li{box-sizing:border-box;min-width:0}
.flow-nodes li::before{top:12px;width:20px;height:20px}
.flow-nodes li.done::after{top:18px;left:calc(50% - 4px)}
.flow-dot{top:23px;width:14px;height:14px;box-shadow:0 0 0 4px var(--tint),0 2px 8px rgba(1,24,56,.2)}

/* ---------- AI Agents ---------- */
.ai-hero{padding-top:74px;padding-bottom:88px;background:var(--bg-soft)}
.ai-hero-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.96fr)!important;gap:64px!important;align-items:center!important}
.ai-hero-copy{display:grid;gap:22px;min-width:0;max-width:720px}
.ai-hero-copy .h1{max-width:12ch}
.ai-hero-copy .lede{max-width:58ch}
.ai-hero-proof{display:flex;flex-wrap:wrap;gap:18px 24px;margin-top:8px;color:var(--muted);font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.ai-hero-proof span{display:inline-flex;align-items:center;gap:8px}
.ai-hero-proof i,.ai-language-status i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(22,163,74,.11);flex:none}
.ai-hero-visual{position:relative;min-width:0;overflow:hidden;padding:0 22px 17px;border:1px solid var(--line-strong);border-radius:22px;background:var(--navy);box-shadow:0 26px 56px -34px rgba(1,24,56,.72);color:#dce8fb}
.ai-hero-visual::before,.ai-architecture::before,.ai-release-board::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(174,204,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(174,204,255,.08) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 94%);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 94%);pointer-events:none}
.ai-hero-visual-head,.ai-architecture-head,.ai-release-board-head{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:17px 0;border-bottom:1px solid rgba(194,211,236,.2);font:500 12px var(--mono);letter-spacing:.06em;color:#91a8cc}
.ai-hero-visual-head b,.ai-architecture-head b,.ai-release-board-head b{display:inline-flex;align-items:center;gap:8px;color:#8ef0b5;font-weight:500}
.ai-hero-visual-head b i,.ai-architecture-head b i,.ai-release-board-head b i{width:7px;height:7px;border-radius:50%;background:#4ee28a;box-shadow:0 0 0 4px rgba(78,226,138,.12);animation:aiLivePulse 1.8s ease-in-out infinite}
.ai-hero-visual-body{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.86fr) minmax(170px,1.14fr);grid-template-rows:1fr 1fr auto;gap:12px 18px;align-items:center;min-height:350px;padding:24px 0 20px}
.ai-hero-channel,.ai-hero-outcome{min-width:0;padding:13px;border:1px solid rgba(194,211,236,.28);border-radius:12px;background:rgba(255,255,255,.06);box-shadow:0 12px 24px -22px rgba(98,164,255,.9)}
.ai-hero-channel{position:relative}
.ai-hero-channel::after{content:"";position:absolute;right:-19px;top:50%;width:19px;height:1px;background:rgba(98,164,255,.48)}
.ai-hero-channel-a{grid-column:1;grid-row:1}.ai-hero-channel-b{grid-column:1;grid-row:2}
.ai-hero-channel span,.ai-hero-outcome span,.ai-hero-brain-kicker{display:block;color:#8fa8d1;font:500 9px var(--mono);letter-spacing:.13em;text-transform:uppercase}
.ai-hero-channel strong,.ai-hero-outcome strong{display:block;margin-top:7px;color:#fff;font:600 14px/1.32 var(--display);overflow-wrap:anywhere}
.ai-hero-channel small,.ai-hero-outcome small{display:block;margin-top:6px;color:#9eb5d9;font:11px/1.4 var(--body)}
.ai-hero-brain{position:relative;isolation:isolate;display:grid;place-items:center;align-content:center;min-height:210px;overflow:hidden;padding:32px 14px;border:1px solid rgba(98,164,255,.8);border-radius:50%;background:#123b79;box-shadow:0 0 0 12px rgba(98,164,255,.08),0 20px 46px -25px rgba(98,164,255,.8)}
.ai-hero-brain strong{position:relative;z-index:1;margin-top:8px;color:#fff;font:600 24px/1.05 var(--display);text-align:center;letter-spacing:-.03em}.ai-hero-brain strong em{color:var(--sky);font-style:normal}
.ai-hero-brain small{position:relative;z-index:1;margin-top:9px;color:#b7c9e7;font:11px var(--body);text-align:center}
.ai-hero-ring{position:absolute;inset:12%;border:1px solid rgba(98,164,255,.35);border-radius:50%;pointer-events:none}.ai-hero-ring-a{animation:aiOrbit 8s linear infinite}.ai-hero-ring-b{inset:1%;border-style:dashed;opacity:.6;animation:aiOrbit 13s linear infinite reverse}
.ai-hero-brain-pulse{position:absolute;z-index:2;top:20%;right:19%;width:8px;height:8px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 5px rgba(98,164,255,.16),0 0 18px rgba(98,164,255,.9);animation:aiPulse 2.2s ease-in-out infinite}
.ai-hero-outcome{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;border-color:rgba(78,226,138,.45);background:rgba(22,163,74,.08)}
.ai-hero-outcome span{grid-row:1/3;color:#8ef0b5}.ai-hero-outcome strong{margin-top:0}.ai-hero-outcome small{margin-top:0;text-align:right}
.ai-hero-visual>figcaption,.ai-architecture>figcaption,.ai-release-board>figcaption{position:relative;z-index:1;display:flex;align-items:center;gap:10px;padding-top:13px;border-top:1px solid rgba(194,211,236,.2);color:#8fa8d1;font:500 12px var(--mono);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
.ai-hero-visual>figcaption i,.ai-release-board>figcaption i{display:block;position:relative;flex:1;height:1px;background:rgba(98,164,255,.4);overflow:visible}.ai-hero-visual>figcaption i::after,.ai-release-board>figcaption i::after{content:"";position:absolute;left:0;top:50%;width:5px;height:5px;border-radius:50%;background:var(--sky);transform:translate(-50%,-50%);animation:aiFlow 3.2s ease-in-out infinite}.ai-hero-visual>figcaption i:nth-of-type(2)::after,.ai-release-board>figcaption i:nth-of-type(2)::after{animation-delay:-1.1s}.ai-hero-visual>figcaption i:nth-of-type(3)::after,.ai-release-board>figcaption i:nth-of-type(3)::after{animation-delay:-2.2s}

.ai-architecture{position:relative;overflow:hidden;padding:0 24px 20px;border:1px solid var(--line-strong);border-radius:22px;background:#fff;box-shadow:var(--shadow)}
.ai-architecture::before{opacity:.55;background-image:linear-gradient(rgba(101,139,196,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(101,139,196,.08) 1px,transparent 1px);mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 95%);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 95%)}
.ai-architecture-head{color:var(--muted);border-color:var(--line)}.ai-architecture-head b{color:var(--green)}.ai-architecture-head b i{background:var(--green);box-shadow:0 0 0 4px rgba(22,163,74,.11)}
.ai-architecture-flow{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,1.12fr) minmax(0,1fr);gap:34px;align-items:stretch;padding:34px 0 24px}
.ai-architecture-rail:first-child .ai-architecture-node::after,.ai-architecture-rail:last-child .ai-architecture-node::before{content:"";position:absolute;top:50%;width:34px;height:6px;transform:translateY(-50%);background-repeat:no-repeat;background-image:linear-gradient(to right,var(--line-strong),var(--line-strong)),radial-gradient(circle 3px at 0 50%,var(--sky-text) 99%,transparent 100%);background-position:0 50%,0% 50%;background-size:100% 1px,10px 10px;animation:aiNodeFlow 3.2s ease-in-out infinite;pointer-events:none}
.ai-architecture-rail:first-child .ai-architecture-node::after{left:100%}
.ai-architecture-rail:last-child .ai-architecture-node::before{right:100%}
.ai-architecture-rail .ai-architecture-node:nth-of-type(2)::after,.ai-architecture-rail .ai-architecture-node:nth-of-type(2)::before{animation-delay:-.6s}
.ai-architecture-rail .ai-architecture-node:nth-of-type(3)::after,.ai-architecture-rail .ai-architecture-node:nth-of-type(3)::before{animation-delay:-1.2s}
.ai-architecture-rail .ai-architecture-node:nth-of-type(4)::after,.ai-architecture-rail .ai-architecture-node:nth-of-type(4)::before{animation-delay:-1.8s}
.ai-architecture-rail .ai-architecture-node:nth-of-type(5)::after,.ai-architecture-rail .ai-architecture-node:nth-of-type(5)::before{animation-delay:-2.4s}
.ai-architecture-rail{display:grid;align-content:start;gap:10px;min-width:0}.ai-architecture-kicker{display:block;margin-bottom:4px;color:var(--muted);font:500 12px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.ai-architecture-node{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;min-width:0;padding:12px;border:1px solid var(--line-strong);border-radius:12px;background:var(--bg-soft);transition:transform .25s,border-color .25s,background .25s}.ai-architecture-node:nth-of-type(3){animation:aiNodeFocus 7s ease-in-out infinite}.ai-architecture-node:nth-of-type(4){animation:aiNodeFocus 7s ease-in-out infinite -2.3s}
.ai-architecture-node>i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--tint);color:var(--sky-text);font:500 12px var(--mono)}.ai-architecture-node strong{display:block;color:var(--ink);font:600 14px/1.2 var(--display)}.ai-architecture-node small{display:block;margin-top:3px;color:var(--muted);font:13px/1.35 var(--body);overflow-wrap:anywhere}.ai-architecture-node>b{color:var(--sky-text);font:500 12px var(--mono);letter-spacing:.02em}.ai-architecture-node.is-active{border-color:var(--sky);background:var(--tint);box-shadow:0 12px 24px -22px var(--sky-deep)}.ai-architecture-node.is-active>b{color:var(--green)}
.ai-architecture-core{position:relative;isolation:isolate;display:grid;place-items:center;align-content:center;min-height:330px;overflow:hidden;padding:34px 24px;border-radius:20px;background:var(--navy);box-shadow:0 18px 36px -25px rgba(1,24,56,.8);text-align:center}.ai-architecture-core .ai-architecture-kicker{position:relative;z-index:1;color:#91a8cc}.ai-architecture-core>strong{position:relative;z-index:1;margin-top:19px;color:#fff;font:600 29px/1.04 var(--display);letter-spacing:-.04em}.ai-architecture-core>strong em{color:var(--sky);font-style:normal}.ai-architecture-core>p{position:relative;z-index:1;max-width:28ch;margin-top:15px;color:#b8c7e6;font:13px/1.5 var(--body)}
.ai-architecture-core-badge{position:relative;z-index:1;display:grid;place-items:center;width:42px;height:42px;margin-top:8px;border-radius:50%;background:rgba(98,164,255,.16);border:1px solid rgba(98,164,255,.38)}.ai-architecture-core-badge .ai-ico{width:19px;height:19px;color:var(--sky)}
.ai-architecture-core-orbit{position:absolute;left:50%;top:51%;border:1px solid rgba(98,164,255,.32);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}.ai-architecture-core-orbit-a{width:230px;height:230px;animation:aiOrbit 12s linear infinite}.ai-architecture-core-orbit-b{width:310px;height:150px;border-style:dashed;animation:aiOrbit 9s linear infinite reverse}.ai-architecture-tags{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:19px}.ai-architecture-tags span{padding:5px 8px;border:1px solid rgba(98,164,255,.35);border-radius:999px;color:#bdd0ee;font:12px var(--mono)}
.ai-architecture-line{position:relative;z-index:1;display:flex;align-items:center;gap:12px;padding:15px 0;border-top:1px solid var(--line);color:var(--muted);font:500 12px var(--mono);letter-spacing:.04em;text-transform:uppercase}.ai-architecture-line i{position:relative;display:block;flex:1;height:1px;background:var(--line-strong);overflow:visible}.ai-architecture-line i b{position:absolute;left:0;top:50%;width:6px;height:6px;border-radius:50%;background:var(--sky-text);transform:translate(-50%,-50%);animation:aiFlow 3.2s ease-in-out infinite}.ai-architecture-line i:nth-of-type(2) b{animation-delay:-1.1s}.ai-architecture>figcaption{color:var(--muted);border-color:var(--line);white-space:normal;line-height:1.45}.ai-architecture>figcaption strong{color:var(--ink)}

/* ai-agents.html visual-first pass (2026-09-10 CPO review): filled pictorial icon
   system for the hero, architecture and release-board panels, replacing sentence
   copy with icon+short-label pairs. .ai-ico is a currentColor SVG mask (all shapes
   are plain rects/circles/straight-line paths, no arcs, so they render reliably). */
.ai-ico{display:inline-block;flex:none;width:18px;height:18px;background:currentColor;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:contain;mask-position:center;mask-repeat:no-repeat;mask-size:contain}
.ai-ico-phone{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='7' y='1' width='10' height='22' rx='5' transform='rotate(45 12 12)'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='7' y='1' width='10' height='22' rx='5' transform='rotate(45 12 12)'/%3E%3C/svg%3E")}
.ai-ico-history{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='3' y='5' width='18' height='3' rx='1.5'/%3E%3Crect x='3' y='10.5' width='13' height='3' rx='1.5'/%3E%3Crect x='3' y='16' width='8' height='3' rx='1.5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='3' y='5' width='18' height='3' rx='1.5'/%3E%3Crect x='3' y='10.5' width='13' height='3' rx='1.5'/%3E%3Crect x='3' y='16' width='8' height='3' rx='1.5'/%3E%3C/svg%3E")}
.ai-ico-globe{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E")}
.ai-ico-flag{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='5' y='2' width='2' height='20' rx='1'/%3E%3Cpath d='M9 3h10l-4 4 4 4H9z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='5' y='2' width='2' height='20' rx='1'/%3E%3Cpath d='M9 3h10l-4 4 4 4H9z'/%3E%3C/svg%3E")}
.ai-ico-bolt{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M13 2 L3 14 L10 14 L9 22 L21 9 L14 9 Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M13 2 L3 14 L10 14 L9 22 L21 9 L14 9 Z'/%3E%3C/svg%3E")}
.ai-ico-check{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9.5 16.2 L5.3 12 L3.9 13.4 L9.5 19 L20.6 7.9 L19.2 6.5 Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9.5 16.2 L5.3 12 L3.9 13.4 L9.5 19 L20.6 7.9 L19.2 6.5 Z'/%3E%3C/svg%3E")}
.ai-ico-handover{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 11 H13 V5 L21 12 L13 19 V13 H3 Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 11 H13 V5 L21 12 L13 19 V13 H3 Z'/%3E%3C/svg%3E")}
.ai-ico-repeat{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 7 H16 V4 L22 9 L16 14 V11 H2 Z M22 17 H8 V20 L2 15 L8 10 V13 H22 Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M2 7 H16 V4 L22 9 L16 14 V11 H2 Z M22 17 H8 V20 L2 15 L8 10 V13 H22 Z'/%3E%3C/svg%3E")}
.ai-ico-shield{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2 L20 5 L20 12 L12 22 L4 12 L4 5 Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2 L20 5 L20 12 L12 22 L4 12 L4 5 Z'/%3E%3C/svg%3E")}
.ai-ico-tag{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M13 2 L4 2 L4 11 L14 21 L22 13 Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M13 2 L4 2 L4 11 L14 21 L22 13 Z'/%3E%3C/svg%3E")}
.ai-ico-flask{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9 2 L15 2 L15 4 L17 4 L17 6 L14 12 L19 20 L17.8 22 L6.2 22 L5 20 L10 12 L7 6 L7 4 L9 4 Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M9 2 L15 2 L15 4 L17 4 L17 6 L14 12 L19 20 L17.8 22 L6.2 22 L5 20 L10 12 L7 6 L7 4 L9 4 Z'/%3E%3C/svg%3E")}
.ai-ico-bubble{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4 4 H20 V15 H10 L5 20 V15 H4 Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4 4 H20 V15 H10 L5 20 V15 H4 Z'/%3E%3C/svg%3E")}
.ai-ico-mic{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Crect x='11' y='18' width='2' height='4'/%3E%3Crect x='8' y='21' width='8' height='2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Crect x='11' y='18' width='2' height='4'/%3E%3Crect x='8' y='21' width='8' height='2'/%3E%3C/svg%3E")}
.ai-ico-person{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M5 21 L7 14 L17 14 L19 21 Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M5 21 L7 14 L17 14 L19 21 Z'/%3E%3C/svg%3E")}
.ai-ico-book{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='2' y='4' width='9' height='16'/%3E%3Crect x='13' y='4' width='9' height='16'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='2' y='4' width='9' height='16'/%3E%3Crect x='13' y='4' width='9' height='16'/%3E%3C/svg%3E")}
.ai-ico-record{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath fill-rule='evenodd' d='M3 3 H21 V21 H3 Z M7 7 H17 V17 H7 Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath fill-rule='evenodd' d='M3 3 H21 V21 H3 Z M7 7 H17 V17 H7 Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.ai-ico-systems{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='3' y='3' width='8' height='8' rx='2'/%3E%3Crect x='13' y='3' width='8' height='8' rx='2'/%3E%3Crect x='3' y='13' width='8' height='8' rx='2'/%3E%3Crect x='13' y='13' width='8' height='8' rx='2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='3' y='3' width='8' height='8' rx='2'/%3E%3Crect x='13' y='3' width='8' height='8' rx='2'/%3E%3Crect x='3' y='13' width='8' height='8' rx='2'/%3E%3Crect x='13' y='13' width='8' height='8' rx='2'/%3E%3C/svg%3E")}
.ai-ico-alert{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M10 2 H14 V4 H15 L17 7 V14 L20 18 H4 L7 14 V7 L9 4 H10 Z'/%3E%3Ccircle cx='12' cy='21' r='2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M10 2 H14 V4 H15 L17 7 V14 L20 18 H4 L7 14 V7 L9 4 H10 Z'/%3E%3Ccircle cx='12' cy='21' r='2'/%3E%3C/svg%3E")}
.ai-ico-headset{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='7' y='3' width='10' height='2.4' rx='1.2'/%3E%3Crect x='5.3' y='3' width='2.4' height='10' rx='1.2'/%3E%3Crect x='16.3' y='3' width='2.4' height='10' rx='1.2'/%3E%3Crect x='3.5' y='12.5' width='4.2' height='7' rx='1.8'/%3E%3Crect x='16.3' y='12.5' width='4.2' height='7' rx='1.8'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='7' y='3' width='10' height='2.4' rx='1.2'/%3E%3Crect x='5.3' y='3' width='2.4' height='10' rx='1.2'/%3E%3Crect x='16.3' y='3' width='2.4' height='10' rx='1.2'/%3E%3Crect x='3.5' y='12.5' width='4.2' height='7' rx='1.8'/%3E%3Crect x='16.3' y='12.5' width='4.2' height='7' rx='1.8'/%3E%3C/svg%3E")}

/* hero panel: icon+short-line cards, chip row, bigger brain with waveform, icon-led outcome band */
.ai-hero-card-icon{display:grid;justify-items:center;gap:8px;text-align:center;padding:6px 4px}
.ai-hero-card-icon .ai-ico-phone{width:24px;height:24px;color:#eaf1ff}
.ai-hero-quote{font-style:italic}
.ai-hero-chips{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 12px;padding:6px 4px}
.ai-hero-chip{display:inline-flex;align-items:center;gap:6px;color:#c7d7f2;font:500 11px var(--mono);letter-spacing:.02em}
.ai-hero-chip .ai-ico{width:14px;height:14px;color:var(--sky)}
.ai-hero-wave{display:flex;align-items:flex-end;gap:2px;height:14px;width:44px}
.ai-hero-wave i{display:block;flex:1;width:2px;height:100%;border-radius:2px;background:var(--sky);transform-origin:bottom;animation:aiWave 1.3s ease-in-out infinite}
.ai-hero-wave i:nth-child(1){height:40%;animation-delay:-.9s}
.ai-hero-wave i:nth-child(2){height:75%;animation-delay:-.5s}
.ai-hero-wave i:nth-child(3){height:50%;animation-delay:-1.1s}
.ai-hero-wave i:nth-child(4){height:95%;animation-delay:-.2s}
.ai-hero-wave i:nth-child(5){height:60%;animation-delay:-.7s}
.ai-hero-brain{min-height:250px}
.ai-hero-ring{background:radial-gradient(circle,transparent 54%,rgba(98,164,255,.18) 56%,rgba(98,164,255,.18) 63%,transparent 65%);border:0}
.ai-hero-ring-c{inset:26%;opacity:.55}
.ai-hero-brain-wave{height:34px;width:88px;gap:3px;margin:8px auto}
.ai-hero-brain-wave i{width:3px;background:#bcd4ff}
.ai-hero-brain-wave i:nth-child(6){height:70%;animation-delay:-.35s}
.ai-hero-brain-wave i:nth-child(7){height:45%;animation-delay:-1s}
.ai-hero-outcome-icon .ai-ico-bolt{width:20px;height:20px;color:#8ef0b5}
.ai-hero-outcome-icon .ai-ico-check{width:18px;height:18px;color:#4ee28a}

/* architecture nodes: filled pictograms instead of numerals, sized inside the existing badge circle */
.ai-architecture-node>i .ai-ico{width:14px;height:14px}

/* release board: icon chips replacing the plain signal dots, bigger ring with an orbiting dot, pill under it */
.ai-release-chip{font-weight:500}
.ai-release-chip .ai-ico{width:15px;height:15px;border-radius:0;box-shadow:none;background:currentColor;color:var(--sky)}
.ai-release-middle{min-height:230px}
.ai-release-orbit{inset:8%;border-width:2px;box-shadow:0 0 24px -8px rgba(98,164,255,.5)}
.ai-release-dot-track{position:absolute;inset:8%;border-radius:50%;animation:aiOrbit 4.5s linear infinite}
.ai-release-dot{position:absolute;top:-4px;left:50%;margin-left:-4px;width:8px;height:8px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 4px rgba(98,164,255,.18),0 0 12px rgba(98,164,255,.9)}
.ai-release-middle>b{padding:5px 12px;border-radius:999px;background:rgba(78,226,138,.12);border:1px solid rgba(78,226,138,.35)}

@keyframes aiWave{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}

.ai-conversation{min-width:0;border:1px solid var(--line-strong);border-radius:20px;background:#fff;box-shadow:var(--shadow);overflow:hidden}.ai-conversation-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:15px 18px;border-bottom:1px solid var(--line);background:var(--bg-soft);color:var(--muted);font:500 12px var(--mono);letter-spacing:.06em}.ai-conversation-head b{display:inline-flex;align-items:center;gap:8px;color:var(--green);font-weight:500}.ai-conversation-head b i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(22,163,74,.1)}.ai-conversation-body{display:grid;gap:14px;padding:22px}.ai-conversation-row{padding:14px;border-radius:13px}.ai-conversation-row span,.ai-interpretation>span{display:block;color:var(--sky-text);font:500 12px var(--mono);letter-spacing:.05em;text-transform:uppercase}.ai-conversation-row p{margin-top:8px;color:var(--ink);font:500 14px/1.5 var(--body)}.ai-conversation-caller{background:var(--bg-soft);border:1px solid var(--line)}.ai-conversation-agent{background:var(--tint);border:1px solid var(--tint-2)}.ai-interpretation{padding:2px 14px}.ai-interpretation>div{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:9px}.ai-interpretation b,.ai-interpretation i{padding:7px 9px;border-radius:8px;font:500 12px var(--mono);font-style:normal}.ai-interpretation b{background:var(--navy);color:#fff}.ai-interpretation i{background:var(--tint);color:var(--sky-text);border:1px solid var(--tint-2)}.ai-conversation-foot{display:flex;flex-wrap:wrap;gap:8px;padding-top:13px;border-top:1px solid var(--line);color:var(--muted);font:12px var(--mono);letter-spacing:.02em;text-transform:uppercase}.ai-conversation-foot strong{margin-left:auto;color:var(--green);font-weight:500}

.ai-channel-grid .card{display:grid;align-content:start;min-height:245px}.ai-channel-icon{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--sky);border-radius:50%;background:var(--tint);color:var(--sky-text);font:500 12px var(--mono)}.ai-channel-grid .card h3{margin-top:20px}.ai-channel-grid .card p{margin-top:9px}.ai-channel-grid .link-arrow{margin-top:auto;padding-top:18px;font-size:13px}
.ai-language-band{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center;margin-top:18px;padding:18px 20px;border:1px solid var(--tint-2);border-radius:14px;background:var(--tint)}.ai-language-band>div:first-child{display:flex;align-items:baseline;gap:9px}.ai-language-band strong{color:var(--sky-text);font:600 43px/1 var(--display);letter-spacing:-.04em}.ai-language-band>div:first-child span{color:var(--ink-2);font-size:13px}.ai-language-band p{color:var(--ink-2);font-size:14px;line-height:1.5}.ai-language-status{display:inline-flex;align-items:center;gap:8px;color:var(--green);font:500 12px var(--mono);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}

.ai-behaviour-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ai-behaviour-card{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;min-width:0;padding:22px;border:1px solid var(--line-strong);border-radius:var(--r);background:#fff;box-shadow:0 16px 32px -30px rgba(1,24,56,.5)}.ai-behaviour-index{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--sky);border-radius:50%;background:var(--tint);color:var(--sky-text);font:500 12px var(--mono)}.ai-behaviour-card h3{font-size:22px;line-height:1.13}.ai-behaviour-card p{margin-top:9px;color:var(--ink-2);font-size:14.5px;line-height:1.55}.ai-behaviour-meta{grid-column:2;margin-top:5px;padding-top:13px;border-top:1px solid var(--line);color:var(--muted);font:500 12px var(--mono);letter-spacing:.03em;text-transform:uppercase}

.ai-release-board{position:relative;isolation:isolate;min-width:0;overflow:hidden;padding:0 22px 17px;border:1px solid var(--navy);border-radius:20px;background:var(--navy);box-shadow:var(--shadow);color:#dce8fb}.ai-release-board-head{border-color:rgba(194,211,236,.2)}.ai-release-board-body{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(170px,1.15fr) minmax(0,.9fr);gap:18px;align-items:center;min-height:285px;padding:26px 0 22px}.ai-release-column{display:grid;gap:9px;min-width:0}.ai-release-column>span{color:#91a8cc;font:500 9px var(--mono);letter-spacing:.12em}.ai-release-column p{display:flex;align-items:center;gap:8px;min-width:0;padding:9px 8px;border:1px solid rgba(194,211,236,.2);border-radius:9px;color:#c2d3ec;font:11px var(--body)}.ai-release-column p i{width:6px;height:6px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 3px rgba(98,164,255,.12);flex:none}.ai-release-middle{position:relative;isolation:isolate;display:grid;justify-items:center;align-content:center;min-height:190px;text-align:center}.ai-release-orbit{position:absolute;inset:5%;border:1px solid rgba(98,164,255,.32);border-radius:50%;animation:aiOrbit 10s linear infinite}.ai-release-middle strong,.ai-release-middle small,.ai-release-middle>b{position:relative;z-index:1}.ai-release-middle strong{color:#fff;font:600 28px var(--display);letter-spacing:-.04em}.ai-release-middle strong em{color:var(--sky);font-style:normal}.ai-release-middle small{margin-top:8px;color:#9db3d4;font:11px var(--body)}.ai-release-middle>b{display:inline-flex;align-items:center;gap:7px;margin-top:17px;color:#8ef0b5;font:500 9px var(--mono);letter-spacing:.07em}.ai-release-middle>b i{width:6px;height:6px;border-radius:50%;background:#4ee28a}.ai-release-board>figcaption{border-color:rgba(194,211,236,.2)}

@keyframes aiLivePulse{0%,100%{opacity:.65;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}
@keyframes aiPulse{0%,100%{opacity:.45;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@keyframes aiOrbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes aiFlow{0%,100%{left:0;opacity:.3}45%,60%{left:100%;opacity:1}}
@keyframes aiNodeFocus{0%,100%{transform:none;border-color:var(--line-strong)}10%,26%{transform:translateX(3px);border-color:var(--sky)}}
@keyframes aiNodeFlow{0%,100%{background-position:0 50%,0% 50%;opacity:.55}45%,60%{background-position:0 50%,100% 50%;opacity:1}}
@media(max-width:980px){.ai-hero-wrap{grid-template-columns:1fr!important;gap:36px!important}.ai-hero-copy{max-width:760px}.ai-hero-visual{max-width:760px}.ai-architecture-flow{grid-template-columns:minmax(0,1fr) minmax(220px,1fr);gap:18px}.ai-architecture-node::after,.ai-architecture-node::before{display:none}.ai-architecture-core{grid-column:1/-1;grid-row:1;min-height:260px}.ai-architecture-rail:first-child{grid-column:1;grid-row:2}.ai-architecture-rail:last-child{grid-column:2;grid-row:2}.ai-release-board-body{grid-template-columns:1fr 1.1fr 1fr;gap:10px}}
@media(max-width:700px){.ai-architecture-flow{grid-template-columns:1fr}.ai-architecture-core,.ai-architecture-rail:first-child,.ai-architecture-rail:last-child{grid-column:1;grid-row:auto}}
@media(max-width:700px){.split>*,.grid>*,.page-hero .wrap>*,.callback-layout>*{min-width:0}.mock-row{align-items:flex-start;flex-wrap:wrap}.mock-row b{flex:1 1 100%;text-align:left}.product-included .tag{white-space:normal;line-height:1.35}}
@media(max-width:420px){.cta-loop-node{max-width:36%;overflow:hidden;text-overflow:ellipsis}}
@media(prefers-reduced-motion:reduce){.ai-hero-visual-head b i,.ai-architecture-head b i,.ai-release-board-head b i,.ai-hero-ring,.ai-hero-brain-pulse,.ai-architecture-core-orbit,.ai-architecture-node,.ai-architecture-node::after,.ai-architecture-node::before,.ai-architecture-line i b,.ai-hero-visual>figcaption i::after,.ai-release-board>figcaption i::after,.ai-release-orbit,.ai-hero-wave i,.ai-release-dot-track{animation:none}.ai-architecture-node{transform:none}}

/* ---------- footer compliance chips ----------
   Replaces the oversized bordered <img> badge plates (badge-kvkk.svg etc.)
   with compact pill chips in the same visual language as .tbadge below.
   These rules override the older grid/aspect-ratio .cbadges sizing further
   up this file (same selector specificity, later in source = wins), so the
   old img-based sizing no longer applies to anything. */
.ftr .brand .cbadges{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;width:auto;max-width:none;margin-top:18px;padding:0;background:none}
.cchip{display:inline-flex;align-items:center;gap:8px;height:30px;box-sizing:border-box;padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;font-family:var(--mono);font-size:12px;line-height:1;white-space:nowrap;color:var(--muted);flex:0 0 auto}
.cchip-ic{width:14px;height:14px;flex:none;color:var(--navy)}
.cchip b{font-weight:500;letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.cchip i{font-style:normal;margin-left:1px;color:var(--muted)}
.ftr .brand .tech-badges{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;width:auto;max-width:none;grid-template-columns:none;margin-top:10px}
.ftr .brand .tech-badges .tbadge{display:inline-flex;width:auto;height:30px;box-sizing:border-box;padding:6px 10px;gap:8px;font-size:12px;letter-spacing:.01em;white-space:nowrap;flex:0 0 auto}
.ftr .brand .tech-badges .tbadge img{width:14px;height:14px}
@media (max-width:700px){
  .ftr .brand .cbadges,.ftr .brand .tech-badges{width:auto;max-width:none;padding:0;background:none;gap:8px}
  .ftr .brand .tech-badges{grid-template-columns:none}
}
@media (max-width:420px){
  .ftr .brand .cbadges,.ftr .brand .tech-badges{width:auto;max-width:none}
  .ftr .brand .tech-badges{grid-template-columns:none}
}

/* ---------- home comparison table: the Dring column is the winner ----------
   Adds the closing "What you get" row, a check mark on every Dring cell, a
   muted "you do this" tag on the tool cells and the proof chip row under the
   table. Placed after the .compare-* block further up this file so the
   later-source rules win at equal specificity. */
.compare-head>span:last-child{box-shadow:inset 0 3px 0 var(--sky)}
.compare-row:not(.compare-head)>span:last-child{position:relative;padding-left:48px}
.cmp-tick{position:absolute;left:20px;top:19px;display:block;width:19px;height:19px;border-radius:50%;background:rgba(22,163,74,.13);color:var(--green);font:700 10px/19px var(--body);text-align:center}
.cmp-you{display:block;width:max-content;max-width:100%;margin-top:9px;padding:3px 9px;border:1px solid var(--line-strong);border-radius:999px;background:var(--bg-soft);color:var(--muted);font:500 9px var(--mono);letter-spacing:.07em;text-transform:uppercase}
.compare-final{border-top:1px solid var(--line-strong)}
.compare-final>span{padding-top:22px;padding-bottom:22px}
.compare-final>span:first-child{color:var(--ink)}
.compare-final>span:last-child{background:linear-gradient(110deg,rgba(216,232,255,.95),rgba(238,246,255,.98))}
.compare-final>span:last-child b{font-size:15px}
.compare-final .cmp-tick{top:23px;background:var(--green);color:#fff}
.proof-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.proof-chip{display:inline-flex;align-items:center;gap:10px;padding:11px 17px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:14px;font-weight:600;box-shadow:0 1px 2px rgba(1,24,56,.04);transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
.proof-chip:hover{border-color:var(--sky);transform:translateY(-1px);box-shadow:0 12px 24px -18px rgba(1,24,56,.5)}
.proof-chip>i{width:8px;height:8px;border-radius:50%;background:var(--sky);flex:none}
.proof-chip span{font:500 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.proof-chip::after{content:"→";color:var(--sky-text);font-size:13px}
@media (max-width:700px){
  .compare-row:not(.compare-head)>span:last-child{padding-left:20px}
  .cmp-tick{position:static;display:inline-block;margin-right:7px;vertical-align:-3px}
  .compare-final>span{padding-top:16px;padding-bottom:18px}
  .proof-chips{flex-direction:column;align-items:stretch}
  .proof-chip{justify-content:flex-start}
  .proof-chip span{margin-left:auto}
}

/* ---------- Agent Factory improvement loop (home, dark panel) ----------
   One closed circuit. Stations sit on a 3x3 grid whose cell centres are the
   vertices of the dashed ring, laid out clockwise from the top: live calls,
   signals, recommendation, your approval, release, back to live calls. A
   pulse travels the ring in 12s and lights each station as it arrives, with
   a qualitative micro-caption. The release counter and the resolution
   notches step once per completed loop, so v1 -> v2 -> v3 takes three loops
   (36s) and stays in sync with the release station. CSS keyframes only, no
   script; at narrow widths the ring is dropped and the stations stack in the
   same order. */
.afl{position:relative;margin-bottom:22px;border:1px solid rgba(151,181,226,.38);border-radius:24px;background:linear-gradient(135deg,#061D40 0%,#0b2d5e 57%,#123f7b 100%);box-shadow:0 24px 54px -34px rgba(1,24,56,.7);color:#B8C7E6;overflow:hidden;isolation:isolate}
.afl::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(151,181,226,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(151,181,226,.08) 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);opacity:.5;pointer-events:none;z-index:-1}
.afl-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 24px;border-bottom:1px solid rgba(184,199,230,.18);font:500 12px var(--mono);letter-spacing:.06em;color:#91A9D0}
.afl-live{display:inline-flex;align-items:center;gap:8px;color:#8EF0B5}
.afl-live i{width:7px;height:7px;border-radius:50%;background:#4EE28A;box-shadow:0 0 0 4px rgba(78,226,138,.13);animation:aflLive 1.8s ease-in-out infinite}
.afl-board{padding:30px 30px 26px}
.afl-loop{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));grid-template-areas:". s1 ." "s5 core s2" "s4 . s3";gap:0;min-height:460px}
.afl-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.afl-ring polygon{fill:none;stroke:rgba(98,164,255,.4);stroke-width:1.4;stroke-dasharray:5 7;stroke-linejoin:round;animation:aflRing 6s linear infinite}
.afl-station{position:relative;z-index:2;align-self:center;justify-self:center;width:100%;max-width:248px;min-width:0;padding:13px 15px;border:1px solid rgba(151,181,226,.3);border-radius:13px;background:rgba(7,31,65,.94);box-shadow:0 16px 30px -26px rgba(0,0,0,.85);animation:aflStation 12s linear var(--afl-d,0s) infinite}
.afl-station .afl-k{display:block;font:500 9px var(--mono);letter-spacing:.16em;color:#8EB9F8}
.afl-station b{display:block;margin-top:5px;color:#fff;font:600 15px/1.15 var(--display);letter-spacing:-.01em;overflow-wrap:anywhere}
.afl-station small{display:block;margin-top:5px;min-height:2.5em;color:#B8C7E6;font-size:11px;line-height:1.25;opacity:.42;animation:aflCaption 12s linear var(--afl-d,0s) infinite}
.afl-station::after{content:"";position:absolute;top:14px;right:13px;width:7px;height:7px;border-radius:50%;background:rgba(151,181,226,.3);animation:aflDot 12s linear var(--afl-d,0s) infinite}
.afl-s1{grid-area:s1;--afl-d:0s}
.afl-s2{grid-area:s2;--afl-d:-9.6s}
.afl-s3{grid-area:s3;--afl-d:-7.2s}
.afl-s4{grid-area:s4;--afl-d:-4.8s}
.afl-s5{grid-area:s5;--afl-d:-2.4s}
.afl-core{grid-area:core;position:relative;z-index:3;align-self:center;justify-self:center;display:grid;justify-items:center;gap:9px;width:min(100%,190px);padding:16px 15px 15px;border:1px solid rgba(98,164,255,.6);border-radius:16px;background:radial-gradient(circle at 40% 20%,rgba(46,111,186,.96),rgba(8,42,90,.99));box-shadow:0 0 0 13px rgba(8,36,78,.92),0 0 0 14px rgba(98,164,255,.14),0 18px 34px -22px rgba(0,0,0,.85)}
.afl-core-k{font:500 9px var(--mono);letter-spacing:.18em;color:#8EB9F8}
.afl-vers{display:grid;place-items:center}
.afl-vers b{grid-area:1/1;color:#fff;font:600 30px/1 var(--display);letter-spacing:-.02em}
.afl-v1{animation:aflV1 36s linear infinite}
.afl-v2{animation:aflV2 36s linear infinite}
.afl-v3{animation:aflV3 36s linear infinite}
.afl-kpi{display:grid;justify-items:center;gap:7px;width:100%}
.afl-kpi-plot{display:flex;align-items:flex-end;justify-content:center;gap:8px;width:100%;height:32px;border-bottom:1px solid rgba(184,199,230,.28)}
.afl-kpi-plot i{width:16px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#8EF0B5,#3FBF7F);transform-origin:bottom}
.afl-b1{height:38%;animation:aflBar1 36s linear infinite}
.afl-b2{height:64%;animation:aflBar2 36s linear infinite}
.afl-b3{height:92%;animation:aflBar3 36s linear infinite}
.afl-kpi-k{font:500 9px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#8EB9F8}
.afl-pulse{position:absolute;z-index:4;top:16.67%;left:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(98,164,255,.2),0 0 18px rgba(98,164,255,.95);pointer-events:none;animation:aflPulse 12s linear infinite}
.afl-t1{width:8px;height:8px;margin:-4px 0 0 -4px;opacity:.6;animation-delay:.16s}
.afl-t2{width:6px;height:6px;margin:-3px 0 0 -3px;opacity:.32;animation-delay:.32s}
.afl-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:15px 30px;border-top:1px solid rgba(184,199,230,.18);font:500 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#91A9D0}
.afl-foot>i{width:25px;height:1px;background:rgba(98,164,255,.48)}
.afl-foot strong{margin-left:auto;color:#fff;font:500 12px var(--body);letter-spacing:0;text-transform:none}
@keyframes aflLive{0%,100%{opacity:1;transform:none}50%{opacity:.45;transform:scale(.85)}}
@keyframes aflRing{to{stroke-dashoffset:-48}}
@keyframes aflPulse{
  0%{left:50%;top:16.67%}
  20%{left:83.33%;top:50%}
  40%{left:83.33%;top:83.33%}
  60%{left:16.67%;top:83.33%}
  80%{left:16.67%;top:50%}
  100%{left:50%;top:16.67%}
}
@keyframes aflStation{
  0%,15%{border-color:rgba(98,164,255,.85);background:rgba(24,75,138,.95);box-shadow:0 0 22px -6px rgba(98,164,255,.45),0 16px 30px -26px rgba(0,0,0,.85)}
  24%,100%{border-color:rgba(151,181,226,.3);background:rgba(7,31,65,.94);box-shadow:0 0 0 0 rgba(98,164,255,0),0 16px 30px -26px rgba(0,0,0,.85)}
}
@keyframes aflCaption{0%,15%{opacity:1}24%,100%{opacity:.42}}
@keyframes aflDot{0%,15%{background:#8EF0B5;box-shadow:0 0 0 4px rgba(142,240,181,.16)}24%,100%{background:rgba(151,181,226,.3);box-shadow:0 0 0 0 rgba(142,240,181,0)}}
@keyframes aflV1{0%,25.8%{opacity:1}27.4%,92.2%{opacity:0}93.8%,100%{opacity:1}}
@keyframes aflV2{0%,25.8%{opacity:0}27.4%,59.3%{opacity:1}60.7%,100%{opacity:0}}
@keyframes aflV3{0%,59.3%{opacity:0}60.7%,92.2%{opacity:1}93.8%,100%{opacity:0}}
@keyframes aflBar1{0%,93.3%{transform:scaleY(1);opacity:1}94.6%,100%{transform:scaleY(.07);opacity:.3}}
@keyframes aflBar2{0%,26%{transform:scaleY(.07);opacity:.3}27.4%,93.3%{transform:scaleY(1);opacity:1}94.6%,100%{transform:scaleY(.07);opacity:.3}}
@keyframes aflBar3{0%,59.3%{transform:scaleY(.07);opacity:.3}60.7%,93.3%{transform:scaleY(1);opacity:1}94.6%,100%{transform:scaleY(.07);opacity:.3}}
@media (max-width:980px){
  .afl-board{padding:24px 20px 20px}
  .afl-loop{min-height:420px}
  .afl-station{max-width:210px;padding:11px 12px}
  .afl-station b{font-size:14px}
  .afl-core{width:min(100%,168px);padding:13px 12px 12px}
  .afl-vers b{font-size:26px}
}
@media (max-width:760px){
  .afl-board{padding:20px 16px 18px}
  .afl-loop{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:none;gap:10px;min-height:0;padding-left:22px}
  .afl-loop::before{content:"";position:absolute;left:6px;top:16px;bottom:16px;width:2px;border-radius:2px;background:linear-gradient(180deg,rgba(98,164,255,.55),rgba(142,240,181,.55))}
  .afl-ring,.afl-pulse{display:none}
  .afl-station{grid-area:auto;justify-self:stretch;max-width:none}
  .afl-station small{min-height:0}
  .afl-core{grid-area:auto;justify-self:stretch;width:100%;box-shadow:0 18px 34px -22px rgba(0,0,0,.85)}
  .afl-head{flex-direction:column;align-items:flex-start;gap:9px;padding:16px}
  .afl-foot{padding:14px 16px;font-size:8px}
  .afl-foot strong{margin-left:0;flex:1 0 100%;padding-top:4px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .afl *{animation:none!important}
  .afl-pulse{display:none}
  .afl-station small{opacity:1}
  .afl-v1,.afl-v2{opacity:0}
  .afl-kpi-plot i{transform:none;opacity:1}
}

/* ---------------------------------------------------------------------------
   Home page: "what we do" story scene, improvement loop legibility, role cards
   --------------------------------------------------------------------------- */

/* The thesis panel tells the service story left to right (your workflow, the
   AI staff member on the call, the outcome) so it cannot be confused with the
   improvement loop panel further down the page. Beat captions stay in HTML so
   they remain readable when the drawing scales down on a phone. */
.thesis-story{margin:16px 0 2px}
.thesis-story svg{display:block;width:100%;height:auto}
.thesis-beats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding-bottom:16px;text-align:center}
.thesis-beats span{display:grid;align-content:start;gap:6px;min-width:0}
.thesis-beats b{font:500 12px/1.35 var(--mono);letter-spacing:.06em;color:#C7D6F0}
.thesis-beats i{font:13px/1.35 var(--body);color:#8BA3CA}
@media (max-width:560px){
  .thesis-beats{gap:8px}
  .thesis-beats b{font-size:12px;letter-spacing:.04em}
  .thesis-beats i{font-size:13px}
}

/* Improvement loop: larger type, and a background halo on every card so the
   dashed circuit passes behind them without ever crossing a word. The release
   card keeps clear space inside the pentagon. Timing stays on the 12s cycle. */
.afl-loop{min-height:540px}
.afl-ring{z-index:0}
.afl-pulse{z-index:1}
.afl-station{--afl-halo:12px;max-width:236px;padding:15px 17px}
.afl-station .afl-k{font-size:10px}
.afl-station b{margin-top:6px;font-size:17px}
.afl-station small{margin-top:6px;min-height:2.6em;font-size:13px;line-height:1.3;opacity:.6}
.afl-core{--afl-halo:18px;width:min(100%,196px);padding:18px 17px 17px;gap:10px;box-shadow:0 0 0 var(--afl-halo) rgba(7,30,64,.94),0 0 0 calc(var(--afl-halo) + 1px) rgba(98,164,255,.16),0 18px 34px -22px rgba(0,0,0,.85)}
.afl-core-k{font-size:10px}
.afl-vers b{font-size:30px}
.afl-kpi-k{font-size:10px}
.afl-foot{font-size:12px;letter-spacing:.06em}
.afl-foot strong{font-size:13px}
@keyframes aflStation{
  0%,15%{border-color:rgba(98,164,255,.85);background:rgba(24,75,138,.97);box-shadow:0 0 0 var(--afl-halo) rgba(7,30,64,.94),0 0 22px -6px rgba(98,164,255,.45),0 16px 30px -26px rgba(0,0,0,.85)}
  24%,100%{border-color:rgba(151,181,226,.32);background:rgba(7,31,65,.99);box-shadow:0 0 0 var(--afl-halo) rgba(7,30,64,.94),0 0 0 0 rgba(98,164,255,0),0 16px 30px -26px rgba(0,0,0,.85)}
}
@keyframes aflCaption{0%,15%{opacity:1}24%,100%{opacity:.6}}
@media (max-width:980px){
  .afl-loop{min-height:490px}
  .afl-station{--afl-halo:10px;max-width:210px;padding:13px 14px}
  .afl-core{--afl-halo:14px;width:min(100%,182px);padding:15px 13px 14px}
}
@media (max-width:760px){
  .afl-loop{min-height:0}
  .afl-station,.afl-core{--afl-halo:0px}
  .afl-station{max-width:none;padding:14px 15px}
  .afl-station small{min-height:0}
  .afl-core{width:100%;padding:16px 15px 15px;box-shadow:0 18px 34px -22px rgba(0,0,0,.85)}
  .afl-foot{font-size:11px}
}
/* The story panel's telemetry line carries longer wording than the loop it
   replaced, so let it wrap instead of squeezing on a phone. */
.thesis-telemetry{flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){
  .afl-station small{opacity:1}
}

/* Inner-page hero: centre the copy and illustration on the row so a short
   lede and a small illustration don't leave the art stranded low on the
   right. Home hero (index.html) has its own layout and is untouched. */
.page-hero .wrap{align-items:center}
.page-hero:not(.blog-article-hero) .copy{max-width:600px}
.page-hero .hv-art{max-width:min(100%,560px);width:100%;justify-self:end}
@media (max-width:900px){
  .page-hero .hv-art{justify-self:center;max-width:440px;margin:0 auto}
}

/* ===========================================================================
   HOME PAGE v3: improvement loop as a flow strip, wider role cards, 390px pass
   Appended last on purpose: every rule below is an override of an earlier
   block in this file and must win on source order.
   =========================================================================== */

/* --- Improvement loop: one horizontal flow strip -------------------------
   Five stations read left to right, a sixth visually distinct RELEASE card
   closes the row. A hairline above the row carries a pulse that lights each
   station as it arrives; a shallow dashed arc under the row carries the
   return pulse back to station 01, so the strip still reads as a loop.
   One 12s cycle: station 01 at 0s, then every 1.44s, release card at 7.2s.
   The version counter and the three resolution notches step exactly when the
   pulse reaches the release card, so v1 -> v2 -> v3 takes three cycles (36s).
   Panel height follows the content: no fixed min-height anywhere. */
.afl-flow{--afl-gap:14px;--afl-col:calc((100% - 5 * var(--afl-gap)) / 6);position:relative}
.afl-rail{position:relative;width:calc(100% - var(--afl-col));height:1px;margin:6px 0 16px calc(var(--afl-col) / 2);background:linear-gradient(90deg,rgba(98,164,255,.12),rgba(98,164,255,.45) 12%,rgba(98,164,255,.45) 88%,rgba(142,240,181,.5))}
.afl-stations{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));align-items:stretch;gap:var(--afl-gap)}
.afl-station{position:relative;z-index:2;display:flex;flex-direction:column;align-self:stretch;justify-self:stretch;width:auto;max-width:none;min-width:0;padding:15px 15px 14px;border:1px solid rgba(151,181,226,.3);border-radius:13px;background:rgba(7,31,65,.94);box-shadow:0 16px 30px -26px rgba(0,0,0,.85);animation:aflStation 12s linear var(--afl-d,0s) infinite}
.afl-station .afl-k{display:block;font:500 12px var(--mono);letter-spacing:.08em;color:#8EB9F8}
.afl-station b{display:block;margin-top:7px;color:#fff;font:600 17px/1.16 var(--display);letter-spacing:-.01em;overflow-wrap:break-word}
.afl-station small{display:block;margin-top:auto;padding-top:10px;min-height:0;color:#B8C7E6;font-size:13px;line-height:1.3;opacity:.6;animation:aflCaption 12s linear var(--afl-d,0s) infinite}
.afl-station::after{top:15px;right:14px}
.afl-s1{grid-area:auto;--afl-d:0s}
.afl-s2{grid-area:auto;--afl-d:-10.56s}
.afl-s3{grid-area:auto;--afl-d:-9.12s}
.afl-s4{grid-area:auto;--afl-d:-7.68s}
.afl-s5{grid-area:auto;--afl-d:-6.24s}
.afl-core{grid-area:auto;position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;justify-self:stretch;gap:8px;width:auto;max-width:none;min-width:0;padding:15px 13px 14px;border:1px solid rgba(98,164,255,.6);border-radius:13px;background:radial-gradient(circle at 40% 15%,rgba(46,111,186,.96),rgba(8,42,90,.99));box-shadow:0 16px 34px -24px rgba(0,0,0,.9);animation:aflCore 12s linear -4.8s infinite}
.afl-core-k{font:500 12px var(--mono);letter-spacing:.1em;color:#8EB9F8}
.afl-vers b{font-size:28px}
.afl-kpi{gap:6px}
.afl-kpi-plot{height:26px;gap:7px}
.afl-kpi-plot i{width:14px}
.afl-kpi-k{font-size:12px;letter-spacing:.08em}
.afl-rail .afl-pulse{top:50%;left:0;z-index:4;animation:aflPulse 12s linear infinite}
.afl-rail .afl-t1{animation-delay:.16s}
.afl-rail .afl-t2{animation-delay:.32s}
.afl-return{position:relative;width:calc(100% - var(--afl-col));height:44px;margin:14px 0 2px calc(var(--afl-col) / 2)}
.afl-return svg{display:block;width:100%;height:100%}
.afl-return svg path{fill:none;stroke:rgba(98,164,255,.38);stroke-width:1.2;stroke-dasharray:5 7}
.afl-return::before{content:"";position:absolute;left:-3px;top:-1px;width:7px;height:7px;border-top:1.4px solid rgba(98,164,255,.7);border-left:1.4px solid rgba(98,164,255,.7);transform:rotate(45deg)}
.afl-return-pulse{position:absolute;left:100%;top:1px;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#8EF0B5;box-shadow:0 0 0 4px rgba(142,240,181,.16),0 0 14px rgba(142,240,181,.8);opacity:0;pointer-events:none;animation:aflReturn 12s linear infinite}
.afl-return-tag{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);padding:4px 12px;border:1px solid rgba(151,181,226,.24);border-radius:999px;background:#0a2c5b;color:#91A9D0;font:500 12px var(--mono);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
@keyframes aflPulse{
  0%,4%{left:0%;opacity:1}
  12%,16%{left:20%;opacity:1}
  24%,28%{left:40%;opacity:1}
  36%,40%{left:60%;opacity:1}
  48%,52%{left:80%;opacity:1}
  60%,64%{left:100%;opacity:1}
  66%,99%{left:100%;opacity:0}
  100%{left:0%;opacity:0}
}
@keyframes aflReturn{
  0%,64%{left:100%;top:1px;opacity:0}
  67%{left:100%;top:1px;opacity:1}
  74%{left:78%;top:34px;opacity:1}
  87%{left:22%;top:34px;opacity:1}
  95%{left:0%;top:1px;opacity:1}
  97%,100%{left:0%;top:1px;opacity:0}
}
@keyframes aflStation{
  0%,9%{border-color:rgba(98,164,255,.85);background:rgba(24,75,138,.97);box-shadow:0 0 22px -6px rgba(98,164,255,.45),0 16px 30px -26px rgba(0,0,0,.85)}
  15%,100%{border-color:rgba(151,181,226,.3);background:rgba(7,31,65,.94);box-shadow:0 0 0 0 rgba(98,164,255,0),0 16px 30px -26px rgba(0,0,0,.85)}
}
@keyframes aflCore{
  0%,9%{border-color:rgba(98,164,255,.95);box-shadow:0 0 26px -6px rgba(98,164,255,.5),0 16px 34px -24px rgba(0,0,0,.9)}
  15%,100%{border-color:rgba(98,164,255,.6);box-shadow:0 0 0 0 rgba(98,164,255,0),0 16px 34px -24px rgba(0,0,0,.9)}
}
@keyframes aflCaption{0%,9%{opacity:1}15%,100%{opacity:.6}}
@keyframes aflDot{0%,9%{background:#8EF0B5;box-shadow:0 0 0 4px rgba(142,240,181,.16)}15%,100%{background:rgba(151,181,226,.3);box-shadow:0 0 0 0 rgba(142,240,181,0)}}
@keyframes aflV1{0%,19.4%{opacity:1}20.6%,86%{opacity:0}87.3%,100%{opacity:1}}
@keyframes aflV2{0%,19.4%{opacity:0}20.6%,52.7%{opacity:1}54%,100%{opacity:0}}
@keyframes aflV3{0%,52.7%{opacity:0}54%,86%{opacity:1}87.3%,100%{opacity:0}}
@keyframes aflBar1{0%,86%{transform:scaleY(1);opacity:1}87.3%,100%{transform:scaleY(.07);opacity:.3}}
@keyframes aflBar2{0%,19.4%{transform:scaleY(.07);opacity:.3}20.6%,86%{transform:scaleY(1);opacity:1}87.3%,100%{transform:scaleY(.07);opacity:.3}}
@keyframes aflBar3{0%,52.7%{transform:scaleY(.07);opacity:.3}54%,86%{transform:scaleY(1);opacity:1}87.3%,100%{transform:scaleY(.07);opacity:.3}}
@media (max-width:1080px){
  .afl-board{padding:24px 20px 20px}
  .afl-flow{--afl-gap:10px}
  .afl-station{padding:13px 12px 12px}
  .afl-station b{font-size:15px}
  .afl-station small{font-size:12px;padding-top:8px}
  .afl-core{padding:13px 10px 12px}
  .afl-vers b{font-size:24px}
  .afl-return-tag{font-size:12px;letter-spacing:.03em;padding:3px 9px}
}
/* Six equal columns stop holding "Recommendation" on one line below ~1000px,
   so the strip folds to two rows of three, still in reading order. */
@media (max-width:1000px){
  .afl-stations{grid-template-columns:repeat(3,minmax(0,1fr))}
  .afl-rail{display:none}
  .afl-return{width:100%;margin-left:0}
}
@media (max-width:760px){
  .afl-board{padding:20px 16px 18px}
  .afl-flow{padding-left:22px}
  .afl-stations{position:relative;grid-template-columns:1fr;gap:10px}
  .afl-stations::before{content:"";position:absolute;left:-16px;top:12px;bottom:12px;width:2px;border-radius:2px;background:linear-gradient(180deg,rgba(98,164,255,.55),rgba(142,240,181,.55))}
  .afl-station{padding:14px 15px}
  .afl-station small{margin-top:6px;padding-top:0}
  .afl-core{padding:16px 15px 15px}
  .afl-vers b{font-size:26px}
  .afl-return{height:auto;margin:12px 0 0}
  .afl-return svg,.afl-return-pulse,.afl-return::before{display:none}
  .afl-return-tag{position:static;display:inline-block;transform:none;white-space:normal;text-align:left;line-height:1.5}
  .afl-head{flex-direction:column;align-items:flex-start;gap:9px;padding:16px}
  .afl-foot{padding:14px 16px;font-size:12px;letter-spacing:.04em}
  .afl-foot strong{margin-left:0;flex:1 0 100%;padding-top:4px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .afl *{animation:none!important}
  .afl-rail .afl-pulse,.afl-return-pulse{display:none}
  .afl-station small{opacity:1}
  .afl-v1,.afl-v2{opacity:0}
  .afl-kpi-plot i{transform:none;opacity:1}
}

/* --- 390px pass: home page blocks that would squeeze or overflow --------- */
/* The index-scoped three-column stat rule outranks the 560px media query in
   the block above, so the phone layout has to be restated at this weight. */
@media (max-width:560px){
  body[data-page="index"] .hero-stats{grid-template-columns:1fr 1fr;gap:16px}
  body[data-page="index"] .hero-stats strong{font-size:24px}
}
/* The thesis drawing is one wide three-panel scene: below 640px it would
   render under 100px tall and unreadable, so the beats carry the story as a
   vertical path instead. */
@media (max-width:640px){
  .thesis-story{display:none}
  .thesis-beats{position:relative;grid-template-columns:1fr;gap:16px;padding:4px 0 16px 20px;text-align:left}
  .thesis-beats::before{content:"";position:absolute;left:3px;top:8px;bottom:24px;width:2px;border-radius:2px;background:linear-gradient(180deg,rgba(98,164,255,.6),rgba(142,240,181,.6))}
  .thesis-beats span{position:relative}
  .thesis-beats span::before{content:"";position:absolute;left:-20px;top:4px;width:8px;height:8px;margin-left:-1px;border-radius:50%;background:#62A4FF}
  .thesis-beats b{font-size:12px;letter-spacing:.06em}
  .thesis-beats i{font-size:13px}
}
/* Comparison table: two columns still crowd a 390px screen, so each answer
   gets its own full-width row under its data-label. */
@media (max-width:460px){
  .compare-row{grid-template-columns:1fr}
  .compare-row>span:nth-child(2),.compare-row>span:nth-child(3){padding-top:9px}
  .compare-row>span:nth-child(3){border-top:1px solid var(--line)}
}
/* Nothing inside the page body may hold a fixed track wider than a 390px
   viewport's 350px content column. */
@media (max-width:460px){
  .ftr .brand .cbadges,.ftr .brand .tech-badges{width:100%;max-width:100%}
  .bento .card,.plat>div,.compare-table,.afl,.thesis-visual{max-width:100%}
}
/* The delayed callback card should never read as a full-screen takeover on a
   phone: it stays a card above the sticky CTA, and the page keeps showing. */
@media (max-width:560px){
  .timed-cta{max-height:min(58dvh,calc(100dvh - 104px))}
  .timed-cta p{margin-bottom:16px}
}
/* Agent staff cards (agents.html): collapsed cards keep the 3/2/1 grid, but an
   opened "How it works" panel takes over the full row in place instead of
   stretching one narrow column tall (CPO: too long and narrow). */
.grid.cols-3 .agent-card.is-open{grid-column:1/-1}
.agent-detail{margin-top:4px;padding-top:14px;border-top:1px solid var(--line)}
.agent-detail summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;font:600 16px/1.3 var(--display);color:var(--ink)}
.agent-detail summary::-webkit-details-marker{display:none}
.agent-detail summary i{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;font-style:normal;font-weight:400;color:var(--ink-2);transition:transform .3s,background .3s,color .3s,border-color .3s}
.agent-detail[open] summary i{transform:rotate(45deg) scale(.7);background:var(--navy);color:#fff;border-color:var(--navy)}
.agent-detail-body{padding-top:16px}
@media (prefers-reduced-motion:no-preference){
  .agent-detail[open] .agent-detail-body{animation:agentDetailIn .3s ease both}
}
@keyframes agentDetailIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.agent-facts{display:grid;grid-template-columns:minmax(120px,150px) 1fr;gap:10px 16px;font-size:14px}
.agent-facts dt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sky-text);padding-top:2px}
.agent-facts dd{margin:0;color:var(--ink-2);line-height:1.55}
.agent-sample .mock{margin:0}
.agent-links{margin:14px 0 0;font-size:14px;color:var(--ink-2)}
.agent-links strong{color:var(--ink)}
@media (min-width:641px){
  .agent-detail-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:32px;align-items:start}
  .agent-sample{max-width:420px}
}
/* Flagship role cards (agents.html #featured, 4 columns): the "How it works"
   panel opens inside the card as a short stacked fact list. */
.grid.cols-4 .agent-detail-body{display:block}
.grid.cols-4 .agent-facts{grid-template-columns:1fr;gap:4px}
.grid.cols-4 .agent-facts dd{margin-bottom:10px}
.agent-facts dd a{color:var(--sky-text)}
/* Role catalog rows (agents.html, 28 Sep 2026): one expandable row per role.
   Closed, the list scans like a table (role, what it does, works with,
   direction); open, a row shows the handover rule, what lands in your system,
   the channels and a sample exchange. */
.role-list{border-top:1px solid var(--line-strong)}
.role-head{display:none}
.role-row{border-bottom:1px solid var(--line)}
.role-row>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:6px 16px;padding:18px 0;align-items:start}
.role-row>summary::-webkit-details-marker{display:none}
.role-row>summary>*{grid-column:1}
.role-row>summary>i{grid-column:2;grid-row:1;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;font-weight:400;color:var(--ink-2);transition:transform .3s,background .3s,color .3s,border-color .3s}
.role-row[open]>summary>i{transform:rotate(45deg) scale(.7);background:var(--navy);color:#fff;border-color:var(--navy)}
.role-row>summary:hover .role-name{color:var(--sky-text)}
.role-name{font-size:18px;font-weight:600;line-height:1.3;transition:color .2s}
.role-what{font-size:15px;line-height:1.5;color:var(--ink-2)}
.role-sys{font-size:14px;line-height:1.45;color:var(--muted)}
.role-dir{justify-self:start;font-family:var(--mono);font-size:12px;border:1px solid var(--line);border-radius:8px;padding:5px 9px;color:var(--ink-2);background:#fff;white-space:nowrap}
.role-body{padding:2px 0 26px}
.role-body .agent-facts dt,.grid.cols-4 .agent-facts dt{font-size:13px}
.role-body .agent-facts dd{font-size:15px}
.role-body .agent-sample{margin-top:18px}
@media (min-width:980px){
  .role-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:32px;align-items:start}
  .role-body .agent-sample{margin-top:0}
  .role-head,.role-row>summary{grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr) minmax(0,1.05fr) 104px 28px;gap:24px}
  .role-head{display:grid;padding:0 0 12px;font-family:var(--mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .role-row>summary{align-items:center}
  .role-row>summary>*,.role-row>summary>i{grid-column:auto;grid-row:auto}
}
.agent-card[id],.role-row[id]{scroll-margin-top:96px}
.role-more{margin-top:28px;font-size:15px;color:var(--ink-2)}
.role-more a{color:var(--sky-text)}

/* station titles never break mid-word: scale with the column instead */
.afl-flow .afl-station b{font-size:clamp(14px,1.15vw,17px);overflow-wrap:normal;word-break:keep-all;white-space:nowrap}

/* .split visual column stays in view while a longer card stack scrolls past it */
.split .stick{position:sticky;top:96px;align-self:start}
@media (max-width:760px){
  .split .stick{position:static;align-self:auto;top:auto}
  .split .grid.cols-2{grid-template-columns:1fr}
}
@media (max-width:1000px){.afl-flow .afl-station b{font-size:16px;white-space:normal}}

/* ---------- home-v3: alternative home page, one idea per screen (scoped, does not touch index.html) ---------- */
body[data-page="home-v3"]{font-size:17px}
@media (min-width:900px){body[data-page="home-v3"]{font-size:18px}}
body[data-page="home-v3"] .h1{font-size:clamp(44px,6.4vw,88px);letter-spacing:-.03em}
body[data-page="home-v3"] .h2{font-size:clamp(32px,3.6vw,48px)}
body[data-page="home-v3"] .sec{padding:160px 0}
body[data-page="home-v3"] .v3-hero{padding:112px 0 128px}
body[data-page="home-v3"] .cta-band{padding:160px 0}
@media (max-width:860px){
  body[data-page="home-v3"] .sec{padding:96px 0}
  body[data-page="home-v3"] .v3-hero{padding:64px 0 72px}
  body[data-page="home-v3"] .cta-band{padding:96px 0}
}

/* plain small-caps sans label: every home-v3 screen uses this instead of the
   mono .eyebrow, so the section label reads as a quiet caption, not code */
body[data-page="home-v3"] .v3-eyebrow{display:inline-block;font-family:var(--body);font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--sky-text);text-transform:lowercase;font-variant-caps:small-caps;margin-bottom:14px}

/* hero */
body[data-page="home-v3"] .v3-hero{position:relative}
body[data-page="home-v3"] .v3-hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
body[data-page="home-v3"] .v3-hero .lede{margin-top:18px;max-width:52ch}
body[data-page="home-v3"] .v3-hero .actions{margin-top:28px}
body[data-page="home-v3"] .hero-tour{max-width:1120px;width:100%;margin:0 auto}
body[data-page="home-v3"] .hero-tour svg{display:block;width:100%;height:auto}
@media (max-width:960px){
  body[data-page="home-v3"] .v3-hero-grid{grid-template-columns:1fr;gap:36px}
  body[data-page="home-v3"] .hero-tour{max-width:100%}
}

/* proof: brand marquee + one stat line, nothing else */
body[data-page="home-v3"] .v3-proof .clients-embed{margin-top:8px}
body[data-page="home-v3"] .v3-proof .clients-embed .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
body[data-page="home-v3"] .v3-proof-stat{margin-top:28px;font-size:17px}

/* quality: qualitative scorecard, no visible numbers */
body[data-page="home-v3"] .v3-quality-count{margin-top:16px;font-weight:600;color:var(--ink)}
body[data-page="home-v3"] .v3-scorecard{margin:0}

/* motion budget: the improvement-loop strip stays the one signature animation;
   everywhere else on this page is a plain .rv fade/slide reveal already defined
   above, so no page-specific motion rules are added here. */
@media (prefers-reduced-motion:reduce){
  body[data-page="home-v3"] .afl-pulse,
  body[data-page="home-v3"] .afl-return-pulse,
  body[data-page="home-v3"] .journey-score-row>i em{animation:none}
}

/* voice-anonymizer: caller-said / stored-as comparison mock */
.mock-narrow{max-width:560px}
.mask-compare{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.mask-compare-head{display:grid;grid-template-columns:1fr 1fr;background:var(--bg-soft);border-bottom:1px solid var(--line)}
.mask-compare-head span{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:10px 16px}
.mask-compare-row{display:grid;grid-template-columns:1fr 1fr}
.mask-compare-row+.mask-compare-row{border-top:1px dashed var(--line)}
.mask-compare-cell{padding:14px 16px;font-family:var(--mono);font-size:13px;line-height:1.5;color:var(--ink-2);text-align:left}
.mask-compare-cell+.mask-compare-cell{border-left:1px solid var(--line)}
.mask-compare-label{display:none}
.mask-pill{display:inline-block;background:var(--tint);color:var(--green);border-radius:999px;padding:1px 8px;font-weight:500}
@media (max-width:760px){
  .mask-compare-head{display:none}
  .mask-compare-row{grid-template-columns:1fr;gap:8px;padding:12px 0}
  .mask-compare-cell+.mask-compare-cell{border-left:0;border-top:1px dashed var(--line);padding-top:12px}
  .mask-compare-label{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
}

/* ai-agents.html hero fix (2026-09-08 CPO screenshot review): shorter h1/lede wrap,
   panel capped and recomposed on an 8px grid with equal gaps, no empty cell between
   the context card and the action bar. Selectors below are unique to ai-agents.html
   (en + tr), confirmed via grep across src/pages before appending. */
.ai-hero-copy .h1{max-width:16ch}
.ai-hero-visual{max-width:560px}
.ai-hero-visual-body{gap:16px;padding:24px 0}
.ai-hero-brain{grid-column:2;grid-row:1/3;padding:32px 16px}
.ai-hero-channel,.ai-hero-outcome{padding:16px}
.ai-hero-outcome{gap:16px}
body[data-page="ai-agents"] #architecture .sec-head{margin-bottom:24px}
.ai-architecture-usecases{max-width:78ch;margin:0 0 40px;color:var(--muted);font-size:15px;line-height:1.6}

/* mono badges in the telephony diagram: 11px floor */
.telco .b{font-size:11px}

/* ai-agents.html at phone widths: the hero visual grid (170px min column) and the
   62-language band (3 fixed columns) overflowed a 390px viewport by 20px. One column. */
@media(max-width:700px){
.ai-hero-visual,.ai-architecture,.ai-conversation,.ai-release-board{margin-left:0;margin-right:0}
.ai-hero-visual-body{grid-template-columns:minmax(0,1fr);grid-template-rows:none;min-height:0}
.ai-hero-visual-body>*{grid-column:1!important;grid-row:auto!important}
.ai-hero-channel::after{display:none}
.ai-hero-brain{min-height:190px}
.ai-hero-outcome{grid-template-columns:auto minmax(0,1fr)}
.ai-hero-outcome>*:last-child{grid-column:1/-1}
.ai-hero-outcome-icon{grid-template-columns:auto minmax(0,1fr) auto}
.ai-hero-outcome-icon>*:last-child{grid-column:auto}
.ai-language-band{grid-template-columns:minmax(0,1fr);gap:12px}
.ai-language-status{white-space:normal}
}

/* ---------- codesk.html: coming-soon badge + waitlist form ---------- */
.badge-soon{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;background:var(--tint);border:1px solid var(--tint-2);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--sky-text)}
.badge-soon i{width:6px;height:6px;border-radius:999px;background:var(--sky-text);flex:none}
.waitlist-submit[disabled]{cursor:wait;opacity:.66}
.waitlist-form.is-success>:not(.waitlist-success){display:none!important}

/* negotiate tool rows */
.mock-row.tool{justify-content:flex-start;flex-wrap:wrap;align-items:baseline;gap:6px 10px;background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;padding:9px 12px;border-bottom:0}
.mock-row.tool span{flex:none;color:var(--sky-text);font-weight:600}
.mock-row.tool b{flex:1 1 auto;color:var(--muted);font-weight:400;text-align:left;font-family:var(--mono);font-size:12px}

/* references bento v4 (2026-09-11, CPO 3rd pass: one anatomy for all 8 cards -
   eyebrow+arrow, headline, body, then a full-width .ref-viz band pinned to the
   card bottom via margin-top:auto; .card is already display:flex;flex-direction:column
   and .bento is a grid with the default align-items:stretch, so every card in a
   row shares the row's height and the band always lands flush at the bottom) */
.bento .card.case-card{padding:26px;gap:12px;border-radius:var(--r);background:#fff}
.bento .bento-h{font-family:var(--display);font-weight:600;letter-spacing:-.01em;line-height:1.22;font-size:clamp(17px,1.6vw,20px);color:var(--ink);margin:14px 0 2px}
.bento .feature .bento-h{font-size:clamp(20px,2.1vw,26px)}
.bento .card .tags{margin-top:0}
.bento .card .tags span{font-size:10px;padding:5px 9px}
.bento .ref-viz{position:relative;width:100%;height:120px;margin-top:auto;padding:8px;box-sizing:border-box;background:var(--tint);border-radius:12px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.bento .ref-viz svg{width:100%;height:100%;display:block}
.bento .feature .ref-viz{height:160px}
.viz-resolved-tag{position:absolute;right:4px;top:4px;display:inline-flex;align-items:center;gap:4px;font:600 10px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--green);background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px 7px 2px 6px;white-space:nowrap}
.viz-resolved-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--green);flex:none}
.viz-queue{opacity:.7}

/* language ring card: the two language bubbles gently swap places */
.bubble-a{animation:bubbleSwapA 5s ease-in-out infinite}
.bubble-b{animation:bubbleSwapB 5s ease-in-out infinite}
@keyframes bubbleSwapA{0%,100%{transform:translate(0,0)}50%{transform:translate(3px,3px)}}
@keyframes bubbleSwapB{0%,100%{transform:translate(0,0)}50%{transform:translate(-3px,-3px)}}

@media (prefers-reduced-motion:reduce){
  .bubble-a,.bubble-b{animation:none}
}
@media (max-width:700px){
  .bento .ref-viz{height:96px}
  .bento .feature .ref-viz{height:128px}
}

/* integration logo chips */
.ilogo.int-mark{color:var(--navy);display:inline-grid;place-items:center;transition:color .15s ease}
.ilogo.int-mark svg{width:18px;height:18px;display:block}
.ichip{transition:border-color .15s ease}
.ichip:hover{border-color:var(--sky)}
.ichip:hover .ilogo.int-mark{color:var(--sky-text)}

/* product page rhythm */
.split .h2 + p,.split > div > .h2 + p,.sec-head .h2 + p{margin-top:18px}
.split p{max-width:52ch;line-height:1.55}
.split > div > p + p{margin-top:14px}
.sec-head p + p{margin-top:14px}
.sec-band{padding:56px 0}
.sec-band .blog-hero{max-width:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
.sec-band .blog-art svg{max-width:780px;margin:0 auto;border:0;border-radius:0;background:transparent}
@media (max-width:860px){.sec-band{padding:40px 0}}
.punch{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.punch>div{padding:22px 26px;border-left:1px solid var(--line);font-family:var(--display);font-size:16.5px;font-weight:600;color:var(--ink);line-height:1.35}
.punch>div:first-child{border-left:0}
@media (max-width:860px){.punch{grid-template-columns:1fr}.punch>div{border-left:0;border-top:1px solid var(--line);padding:16px 4px}.punch>div:first-child{border-top:0}}

/* mock variants */
.mock-chips{display:flex;gap:10px;flex-wrap:wrap;padding:2px 0}
.mock-chips span{font-family:var(--mono);font-size:12px;letter-spacing:.01em;padding:7px 13px;border-radius:999px;background:var(--tint);color:var(--ink)}
.mock-chips span.ok{background:rgba(22,163,74,.12);color:var(--green)}
.mockrow2{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:start}
.phone-mock{width:220px;background:var(--navy);border-radius:28px;padding:10px;box-shadow:var(--shadow)}
.phone-mock-notch{width:56px;height:5px;border-radius:3px;background:rgba(255,255,255,.28);margin:4px auto 10px}
.phone-mock-screen{background:#fff;border-radius:20px;padding:16px 14px;min-height:200px;display:flex;flex-direction:column;gap:12px}
.phone-mock-app{font-family:var(--mono);font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.phone-bubble{max-width:100%}
.chip{display:inline-flex;align-items:center;gap:6px;width:fit-content;font-family:var(--mono);font-size:12px;letter-spacing:0;padding:6px 12px;border-radius:999px;background:var(--tint);color:var(--ink)}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sky-text);flex:none}
.chip-priority{background:rgba(22,163,74,.12);color:var(--green)}
.chip-priority::before{background:var(--green)}
.email-mock{background:#fff;border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 24px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.email-mock-head{display:flex;justify-content:space-between;align-items:center;width:100%;font-family:var(--mono);font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.email-mock-subject{font-family:var(--display);font-size:17px;font-weight:600;color:var(--ink);line-height:1.3}
.email-mock-snippet{color:var(--ink-2);font-size:14.5px;line-height:1.55}
@media (max-width:700px){.mockrow2{grid-template-columns:1fr}.phone-mock{margin:0 auto}}
.trio{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px}
.trio>div{flex:1;min-width:180px;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;display:flex;flex-direction:column;gap:8px}
.trio>div.hl{border-color:var(--sky);box-shadow:0 0 0 1px var(--sky) inset}
.trio b{font-family:var(--display);font-size:15px;font-weight:600;color:var(--ink)}
.trio span{font-size:13.5px;line-height:1.5;color:var(--ink-2)}

/* home security split */
#security .split{align-items:center}
#security .split .hv-art{max-width:560px;width:100%;align-self:center}
#security .split .hv-art svg{width:100%;height:auto;display:block}
@media (max-width:900px){#security .split .hv-art{max-width:420px}}
@media (max-width:700px){.trio{flex-direction:column}}

/* board mock */
.board{display:flex;gap:14px;overflow-x:auto}
.board-col{flex:1;min-width:150px;background:var(--bg-soft);border-radius:var(--r-sm);padding:12px;display:flex;flex-direction:column;gap:8px}
.board-col-head{font-family:var(--mono);font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.board-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13px;color:var(--ink-2);box-shadow:var(--shadow)}
.board-card.ok{border-color:var(--green);color:var(--green);font-weight:600}
@media (max-width:700px){.board{flex-direction:column}}

/* == panel-mock-sections == */
.panel-mock{margin:0;width:100%;max-width:100%}
.panel-mock svg{display:block;width:100%;height:auto;border-radius:18px}
.panel-mock-capset{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin:20px 0 0;padding:0;list-style:none;font-family:var(--body);font-size:14px;color:var(--ink-2)}
.panel-mock-capset span{display:inline-flex;align-items:center;gap:10px}
.panel-mock-capset span:not(:first-child)::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--line-strong);flex:none}
@media (max-width:700px){
  .panel-mock-capset{flex-direction:column;align-items:flex-start;gap:8px}
  .panel-mock-capset span:not(:first-child)::before{display:none}
}

/* == tech-flow page variants (platform/technology/infrastructure/security) == */
.tech .icon{fill:var(--navy)}
.tech .icon.on-dark{fill:#fff}
.tech .edgering{fill:none;stroke:var(--line-strong);stroke-dasharray:4 6}
.tech .node.good rect{stroke:var(--green)}
.tech .node.good .t{fill:var(--green)}
.tech .loopwire{fill:none;stroke:var(--line-strong);stroke-width:1.4}
.tech .plate-back{fill:var(--tint);stroke:var(--line)}
.tech .plate-mid{fill:var(--tint-2);stroke:var(--line-strong)}
.tech .plate-front rect{fill:#fff;stroke:var(--line-strong)}
.tech .plate-front.brain rect{fill:var(--navy);stroke:var(--sky)}
.tech .plate-front.brain .t{fill:#fff}.tech .plate-front.brain .s{fill:#B8C7E6}
.tech .plate-face{fill:var(--tint-2);stroke:var(--line-strong)}
.tech .plate-top{fill:var(--tint);stroke:var(--line-strong)}
.tech .plate-ghost{fill:#fff;fill-opacity:.4;stroke:var(--line-strong);stroke-dasharray:3 4}
.tech .ribbon{fill:var(--bg-soft);stroke:var(--line)}
.tech .ribbon-tick{stroke:var(--sky-text);stroke-width:2;stroke-linecap:round}
.tech .ring{fill:none;stroke:var(--line-strong);stroke-dasharray:3 5}
.tech .ring-node rect{fill:#fff;stroke:var(--line-strong)}
.tech .rack rect{fill:#fff;stroke:var(--line-strong)}
.tech .rack-slot{stroke:var(--line-strong);stroke-width:2}
.tech .region{fill:var(--bg-soft);stroke:var(--line)}
.tech .autoscale-bar{fill:var(--tint-2);stroke:var(--sky-text)}
.tech .bell{stroke:var(--navy);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tech .threat .icon{stroke:var(--red);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tech .stopmark{stroke:var(--red);stroke-width:2.4;stroke-linecap:round}
.tech .guardband{fill:var(--navy);stroke:var(--sky);stroke-dasharray:5 4}
.tech .guardband .t{fill:#fff}
.tech .pill{fill:var(--tint-2);stroke:var(--sky-text)}
.tech .pill-mask{fill:var(--line-strong)}
.tech .stopctl rect{fill:#fff;stroke:var(--red)}
.tech .stopctl .t{fill:var(--red)}
.tech .stopctl .icon{stroke:var(--red);fill:none;stroke-width:2.4;stroke-linecap:round}
.tech .lockicon{stroke:var(--sky);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* == ai-agents-release-loop == */
.ai-release-loop .afl-flow{--afl-col:calc((100% - 3 * var(--afl-gap)) / 4)}
.ai-release-loop .afl-stations{grid-template-columns:repeat(4,minmax(0,1fr))}

/* == ai-agents-architecture == */
.ai-architecture-flow{grid-template-columns:minmax(0,1fr) minmax(200px,.95fr) minmax(0,1fr) minmax(126px,.55fr);gap:22px}
.ai-architecture-line{flex-wrap:wrap;row-gap:8px}
.ai-architecture-line i:nth-of-type(3) b{animation-delay:-2.1s}
.ai-architecture-outcome{justify-items:stretch}
.ai-architecture-outcome .ai-architecture-node{align-self:center}
.ai-architecture-node-outcome{border-color:rgba(46,158,91,.4);background:rgba(46,158,91,.08)}
.ai-architecture-node-outcome>i{background:rgba(46,158,91,.16);color:#2E9E5B}
.ai-architecture-node-outcome strong{color:#0F3D24}
@media(min-width:701px) and (max-width:980px){
  .ai-architecture-flow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ai-architecture-flow .ai-architecture-core{grid-column:1/-1;grid-row:1}
  .ai-architecture-flow .ai-architecture-rail-input{grid-column:1;grid-row:2}
  .ai-architecture-flow .ai-architecture-rail-act{grid-column:2;grid-row:2}
  .ai-architecture-flow .ai-architecture-outcome{grid-column:1/-1;grid-row:3;justify-items:center}
  .ai-architecture-outcome .ai-architecture-node{max-width:340px}
}
/* phones: the 4-column rule above outranks the older 700px stack rule, restate it here */
@media(max-width:700px){
  .ai-architecture-flow{grid-template-columns:minmax(0,1fr)}
  .ai-architecture-flow .ai-architecture-core,.ai-architecture-flow .ai-architecture-rail,.ai-architecture-flow .ai-architecture-outcome{grid-column:1;grid-row:auto}
}

/* mega menus v4 */
/* Replaces the base-era .dd rules, "products mega v2" and "mega menus v3"
   in one pass. Root cause of the reported collapse: three eras of grid
   rules were live on the same elements at once (a base ".dd a" rule that
   grid-templated every anchor at 36px+1fr, unused .dd.cols-2/3/4 from v2,
   and v3's .dd-v3/.dd-body/.dd-row fighting the base rule with specificity
   hacks) and, independently, Products' four groups sat in a single row
   (.dd-body.groups-4 was grid-template-columns:repeat(4,1fr)): once the
   920px-wide panel gave up its 280px intro column and three 22px gaps,
   each of the 4 remaining columns had roughly 140px, and after its 40px
   icon and padding that left about the width of one word for the title
   and description, so every line wrapped one word at a time and the row
   stack blew past the panel's max-height. Fix: one .dd panel that is
   fixed and centred under the header (width is no longer tied to which
   nav button happens to trigger it), a single .dd-intro/.dd-groups two
   zone grid, groups keep 4 entries in a 2x2 layout instead of one row,
   and every flexible track uses minmax(0, 1fr) so a column can shrink
   without ever collapsing to single-word width. */
.dd{position:fixed;top:82px;left:50%;transform:translate(-50%,8px);width:min(1120px,calc(100vw - 48px));max-height:calc(100vh - 110px);overflow:auto;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:28px;display:grid;grid-template-columns:280px minmax(0,1fr);gap:32px;opacity:0;visibility:hidden;transition:opacity .22s,transform .22s,visibility .22s;z-index:5}
.dd-intro{background:var(--tint);padding:24px;border-radius:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.dd-intro .eyebrow{margin-bottom:2px}
.dd-intro-h{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.01em;line-height:1.28;color:var(--ink);margin:0}
.dd-intro p{font-size:14px;color:var(--muted);line-height:1.55;margin:0}
.dd-intro-link{margin-top:auto;padding-top:14px;font-size:13px}
.dd-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;row-gap:22px;min-width:0}
.dd-groups.groups-1{grid-template-columns:minmax(0,1fr)}
.dd-group{min-width:0}
.dd-group h4{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500;border-bottom:1px solid var(--line);padding-bottom:9px;margin:0 0 10px}
.dd-rows{display:flex;flex-direction:column;gap:2px}
.dd-rows.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 18px}
.dd-row{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:start;padding:8px 10px;border-radius:10px;transition:background .2s}
.dd-row:hover,.dd-row:focus-visible{background:var(--tint)}
.dd-row:focus-visible{outline-offset:-2px}
.dd-row .ic{width:40px;height:40px;border-radius:10px;background:var(--tint);color:var(--navy);display:grid;place-items:center;flex:none;transition:background .2s}
.dd-row .ic svg{width:20px;height:20px}
.dd-row:hover .ic{background:var(--sky)}
.dd-row b{display:block;font-size:15px;color:var(--ink);font-weight:600;line-height:1.3}
.dd-row span{display:block;font-size:13px;color:var(--muted);line-height:1.4;margin-top:2px;max-width:34ch;overflow-wrap:normal}
@media (max-width:1300px){.dd{width:min(920px,calc(100vw - 32px))}}

/* -- Solutions: intro + industry list + workflow panel -- */
/* CPO 13 Sep 23:50, screenshot at 1440: the left intro tint ran edge to
   edge past the card radius, because this variant dropped the shared .dd
   outer padding to 0, while the industry list sat next to it as its own
   full bleed tint block, so the v4 column gap showed as a bare white seam
   between two competing tint zones. The intro card also had nothing below
   its title: its height stretches to match the tallest column (the
   industry list) and there was no content to fill the rest, so it read
   as unfinished. Fix mirrors the Technology dropdown's contained
   .dd-intro card: one outer 24px padding restored so the card floats with
   a white margin on every side, the industry list drops its own tint for
   a plain column with a hairline right rule, and the intro card gets real
   content (sentence, two quick links, a proof chip row pinned to the
   card's bottom with margin-top:auto so the card is never empty). "By
   role" (4 rows, added separately) sits as its own column next to the
   workflow panel instead of a full-width block underneath: since only one
   .dd-ind-panel is ever unhidden at a time and .dd-role-block always
   follows it in source order, a plain 2-column grid on the wrap is enough
   to place them side by side automatically, so the 4 extra rows add
   width, not height, to the panel. Panels with only 3 workflows (energy,
   B2B distribution) get a 2-chip footer row so every panel ends on the
   same rhythm instead of trailing off short. Row height for the 11
   industries is trimmed to an exact 44px (34px icon + 5px top/bottom
   padding) so the list, still the tallest of the three zones, keeps the
   whole dropdown under 620px at 1440x900.
   CPO round 2, live at 1440 (580px, correct): the workflow column was only
   ~180px (the 1fr leftover after 280+300+220), so two-word titles like
   "Freight qualification" wrapped and descriptions ran to three lines.
   Columns are now explicit widths that sum to the 1180px cap: intro 240 +
   list 250 + workflow >=320 + role 200, four 24px gaps/insets between
   them. Rows also change shape: title and tag pill now share a top line
   (.dd-wf-top, space-between) with the description on its own line below
   (.dd-wf-desc), instead of the old row-level grid that vertically centred
   the pill against the whole two-line block; .dd-wf-rows gap goes from 2px
   to 14px so stacked rows read as separate lines. The active industry
   row's white background used to stop at the list's own content width,
   leaving a bare strip before the divider (dd-ind-col carried the 24px
   divider gap as its own padding, outside the row's box); that padding
   moves off dd-ind-col so the row itself spans the full column, flush to
   the border-right. */
.dd.dd-industries{grid-template-columns:240px 250px minmax(0,1fr);padding:24px;gap:24px;max-width:96vw}
.dd-industries .dd-intro{border-radius:14px;height:100%}
.dd-industries .dd-intro-link{margin-top:0}
.dd-intro-proof{margin-top:auto;padding-top:24px;display:flex;gap:14px}
.dd-intro-proof span{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--sky-text)}
.dd-ind-col{background:none;padding:0;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px;min-width:0}
.dd-ind-list{display:flex;flex-direction:column;gap:1px}
.dd-ind-item{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:center;padding:5px 8px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--ink-2);min-height:44px;transition:background .2s,color .2s,box-shadow .2s}
.dd-ind-item .ic{width:34px;height:34px;border-radius:9px;background:#fff;color:var(--navy);display:grid;place-items:center;flex:none}
.dd-ind-item .ic svg{width:20px;height:20px}
.dd-ind-item:hover,.dd-ind-item:focus-visible,.dd-ind-item[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(1,24,56,.1),0 1px 2px rgba(1,24,56,.06)}
.dd-ind-item:focus-visible{outline-offset:-2px}
.dd-ind-item[aria-selected="true"] .ic{background:var(--sky);color:#fff}
.dd-ind-item .dd-ind-label{display:inline;font-size:13.5px;color:inherit;margin:0}
.dd-ind-all{margin:10px 8px 4px;font-size:12.5px}
.dd-ind-panel-wrap{padding:0 0 0 24px;min-width:0}
.dd-ind-panel-label{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--sky-text);padding-bottom:11px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.dd-wf-rows{display:flex;flex-direction:column;gap:14px}
.dd-wf-row{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border-radius:10px;transition:background .2s}
.dd-wf-row:hover,.dd-wf-row:focus-visible{background:var(--tint)}
.dd-wf-row:focus-visible{outline-offset:-2px}
.dd-wf-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dd-wf-top b{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px;color:var(--ink);font-weight:600}
.dd-wf-desc{display:block;font-size:13px;color:var(--muted);line-height:1.4;max-width:44ch;overflow-wrap:normal}
.dd-wf-tag{display:inline-block;flex:none;font-family:var(--mono);font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--sky-text);background:var(--tint);border-radius:999px;padding:4px 9px}
.dd-wf-all{display:inline-flex;margin-top:14px;font-size:12.5px}
.dd-wf-foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.dd-wf-chip{font-family:var(--mono);font-size:12px;letter-spacing:0;color:var(--sky-text);background:var(--tint);border-radius:999px;padding:6px 12px;transition:background .2s,color .2s}
.dd-wf-chip:hover,.dd-wf-chip:focus-visible{background:var(--sky);color:#fff}
@media (max-width:1300px){.dd.dd-industries{grid-template-columns:240px 250px minmax(0,1fr)}}
@media (max-width:1150px){.dd.dd-industries{width:min(96vw,900px)}}

/* -- mobile: mega menu groups as native accordions -- */
.mega details{border-bottom:1px solid var(--line)}
.mega details:last-child{border-bottom:0}
.mega details>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 0;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mega details>summary::-webkit-details-marker{display:none}
.mega details>summary::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s;flex:none}
.mega details[open]>summary::after{transform:rotate(-135deg)}
.mega details .mega-acc-body{padding-bottom:10px}
.mega li a,.mega li a.big{min-height:44px;display:flex;align-items:center}

/* == home-outcome-cards == */
/* CPO 13 Sep 2026, Retell AI reference: the five case-study cards in
   #outcomes ("Live on real phone lines") were rejected twice for burying the
   scene at the card bottom at ~120px tall. New anatomy: a full-width tinted
   stage takes the top 60-70% of the card, a small white text block (eyebrow,
   headline, one evidence line, arrow) takes the bottom ~30%, Retell-style.
   Scoped to #outcomes so the plain feature card (.feature) and the two
   platform cards (healthcare, 62 languages) keep their old .ref-viz/.viz
   treatment from the references-bento-v4 block above untouched. The #outcomes
   id gives these rules enough specificity to win over .bento .card.case-card
   and .bento .card .arrow above without relying on source order. */
#outcomes .card.case-card{display:flex;flex-direction:column;padding:0;gap:0;overflow:hidden}
#outcomes .card.case-card .case-scene{flex:none;width:100%;aspect-ratio:4/3;min-height:220px;box-sizing:border-box;padding:0;background:linear-gradient(160deg,#F3F7FF,#E8F0FF);border-radius:var(--r) var(--r) 0 0;display:flex;align-items:center;justify-content:center;overflow:hidden}
#outcomes .card.case-card .case-scene svg{width:100%;height:100%;display:block}
#outcomes .card.case-card .case-text{position:relative;flex:1 1 auto;display:flex;flex-direction:column;gap:4px;padding:22px 46px 22px 22px}
#outcomes .card.case-card .case-text .tag{padding-right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block}
#outcomes .card.case-card .bento-h{margin:6px 0 2px;font-size:clamp(23px,1.95vw,25px);line-height:1.22}
#outcomes .card.case-card .case-text p{margin:0;font-size:14px;line-height:1.45;color:var(--muted)}
/* Proof row (26 Sep): the number behind each card, from PRODUCT-FACTS. The
   description is no longer clamped; copy is written to fit two or three lines. */
#outcomes .card.case-card .case-text .case-proof{margin-top:auto;padding-top:14px;padding-right:24px;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:0}
#outcomes .card.case-card .case-text p + .case-proof{margin-top:16px}
#outcomes .card.case-card .case-proof b{flex:none;font-family:var(--display);font-size:24px;line-height:1;font-weight:700;letter-spacing:-.02em;color:var(--sky-text)}
#outcomes .card.case-card .case-proof span{font-size:13px;line-height:1.4;min-height:2.8em;color:var(--muted);text-wrap:pretty}
#outcomes .card.case-card .case-text .arrow{position:absolute;top:auto;bottom:22px;right:18px}
@media (max-width:480px){
  #outcomes .card.case-card .case-text{padding:18px 40px 18px 18px}
}

/* == language-ring == */
/* Full-width #languages section on index.html / tr/index.html replacing the
   small "62 languages" bento card. Two-column .split (existing pattern):
   copy left, an SVG flag ring right. The done-list reuses the site's
   existing .split ul.check pattern (checkmark bullets, 22px margin-top)
   instead of a new one; .lang-done here only adds the link-arrow spacing
   below it. The ring is a computed circle of ten flags (56x40 each)
   orbiting a navy AI-staff headset disc; the whole rotor spins slowly
   while each flag counter-rotates by the same amount so it stays upright
   on screen (see src/pages/index.html for the coordinate math). CSS
   keyframes are used instead of SMIL so the ring can pause on hover,
   which SMIL cannot do. */
.lang-ring-wrap{display:flex;align-items:center;justify-content:center;min-width:0}
.lang-ring-svg{display:block;width:100%;max-width:440px;aspect-ratio:1;height:auto}
.lang-ring-wrap .a-ring-rotor{animation:lang-ring-spin 40s linear infinite}
.lang-ring-wrap .a-flag-counter{animation:lang-flag-spin 40s linear infinite}
.lang-ring-wrap:hover .a-ring-rotor,.lang-ring-wrap:hover .a-flag-counter{animation-play-state:paused}
@keyframes lang-ring-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes lang-flag-spin{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}
.lang-split .lang-done + .link-arrow{margin-top:22px}
@media (max-width:900px){.lang-ring-wrap{margin-top:8px}.lang-ring-svg{max-width:340px}}
@media (max-width:480px){.lang-ring-svg{max-width:280px}}
@media (prefers-reduced-motion:reduce){.lang-ring-wrap .a-ring-rotor,.lang-ring-wrap .a-flag-counter{animation:none}}

/* == hero-v4 == */
/* Home hero v4: right column becomes a globe mount point (globe.js wires the
   actual visualization into [data-globe]; this is only the static frame and
   fallback tint/ring so the layout is never empty before it mounts). The old
   particle sphere, HUD and caption markup are gone from the hero; the JS
   guards on the missing #orb/#captions elements so nothing errors. */
.hero-globe{position:relative;width:100%;max-width:560px;aspect-ratio:1;justify-self:center;align-self:center;border-radius:50%;background:radial-gradient(circle at 50% 50%,#E8F0FF 0%,rgba(232,240,255,0) 68%)}
.hero-globe::before{content:"";position:absolute;inset:-20%;border-radius:50%;background:radial-gradient(circle at 50% 45%,rgba(98,164,255,.2),rgba(98,164,255,0) 70%);pointer-events:none}
.hero-globe::after{content:none}
/* Proof band: moved out of the left column so it spans the full hero width,
   under both columns, aligned to the same container edges as .wrap. Uses its
   own class (not .wrap) so it does not pick up .hero .wrap's grid-column
   layout. Overrides zero out the base .hero-stats spacing/border so there is
   one hairline, not two. */
.hero-proof{max-width:var(--max);margin:34px auto 0;padding:24px 28px 0;border-top:1px solid var(--line)}
.hero-proof .hero-stats{margin-top:0;padding-top:0;border-top:0;grid-template-columns:repeat(4,1fr)}
.hero-proof .hero-stats div{font-size:12px}
@media (max-width:560px){.hero-proof{margin-top:24px;padding-top:18px}.hero-proof .hero-stats{grid-template-columns:1fr 1fr;gap:16px}}
/* Slim section right under the hero: carries the two-minute callback line
   and the 01/02/03 step strip that used to live inside the hero. */
.hero-next{padding:4px 0 40px}
.hero-next .hero-note{margin-top:0}
.hero-next .hero-callback-path{margin-top:16px}

/* == live-counter == */
.live-num{font-variant-numeric:tabular-nums}
.live-dot{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#2E9E5B;box-shadow:0 0 0 0 rgba(46,158,91,.5);animation:liveDotPulse 2s ease-in-out infinite}
@keyframes liveDotPulse{0%{box-shadow:0 0 0 0 rgba(46,158,91,.5)}70%{box-shadow:0 0 0 6px rgba(46,158,91,0)}100%{box-shadow:0 0 0 0 rgba(46,158,91,0)}}
@media (prefers-reduced-motion:reduce){.live-dot{animation:none}}
/* "1,000,000" is wider than the old "1M+"; give it a touch more headroom in
   the 2x2 mobile layout so it never wraps inside its tile. */
@media (max-width:560px){.hero-proof .hero-stats .live-num{font-size:21px}}

/* == hero-v5 == */
/* Live counter sits in the hero copy column under the buttons as a ticker row:
   big tabular number, then a two-line label. Proof band keeps three tiles.
   The h1 swap gets room for descenders so long phrases are not clipped. */
.hero-live{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;align-items:center;max-width:540px;margin:30px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.hero-live .live-num{font-family:var(--display);font-size:34px;font-weight:600;letter-spacing:-.025em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.hero-live span{display:block;min-width:0}
.hero-live span b{display:block;font-family:var(--body);font-size:15px;font-weight:600;color:var(--ink);line-height:1.3}
.hero-live span small{display:flex;align-items:center;gap:7px;margin-top:5px;font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--muted);line-height:1.3}
.hero-live .live-dot{margin:0;flex:none}
.hero-proof .hero-stats{grid-template-columns:repeat(3,1fr)}
/* Bug fix, 18 Sep: height alone (1.14em) left the line box's own tight
   line-height (.98 on .hero .h1, inherited here before this rule set 1.2)
   with no reserved space above the cap-height, so ascenders were flush with
   the box top and got cut by overflow:hidden on first paint. padding-top
   gives that headroom directly; the box no longer needs extra room below
   since line-height 1.2 already reserves it symmetrically. */
.h1 .swap{height:1.2em;padding-top:.05em;padding-bottom:0}
.hero .wrap{align-items:center}
@media (max-width:560px){.hero-live{column-gap:14px;margin-top:24px}.hero-live .live-num{font-size:28px}.hero-proof .hero-stats{grid-template-columns:1fr 1fr}}

/* == hero-v6 == */
/* The 01/02/03 strip is gone; the two-minute note sits under the buttons. The
   proof band is one framed strip with four equal cells, hairlines between. */
.hero-note-v6{margin:16px 0 0;font-size:13.5px;color:var(--muted);line-height:1.5}
.hero-note-v6 b{color:var(--ink);font-weight:600}
.hero-live{margin-top:26px}
.hero-proof{max-width:var(--max);margin:44px auto 0;padding:0 28px;border-top:0}
.hero-proof .hero-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0;padding:0;border:1px solid var(--line);border-radius:18px;background:#F7FAFF;overflow:hidden;justify-content:stretch}
.hero-proof .hero-stats div{padding:22px 26px 20px;border-left:1px solid var(--line);font-family:var(--body);font-size:13.5px;letter-spacing:0;color:var(--muted);line-height:1.35;min-width:0}
.hero-proof .hero-stats div:first-child{border-left:0}
.hero-proof .hero-stats strong{font-size:30px;margin-bottom:6px;line-height:1}
.hero-proof .hero-stats span{display:block}
@media (max-width:760px){.hero-proof .hero-stats{grid-template-columns:1fr 1fr}.hero-proof .hero-stats div:nth-child(3){border-left:0}.hero-proof .hero-stats div:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:560px){.hero-proof{margin-top:28px;padding:0 20px}.hero-proof .hero-stats div{padding:16px 18px 14px}.hero-proof .hero-stats strong{font-size:24px}}

/* == hero-v7 == */
/* Less air above the hero copy; the globe column keeps its own vertical centre. */
body[data-page="index"] .hero{padding-top:40px}
body[data-page="index"] .hero .wrap{align-items:start}
body[data-page="index"] .hero .wrap > div:first-child{padding-top:24px}
body[data-page="index"] .hero-globe{align-self:start;margin-top:-8px}
@media (max-width:900px){body[data-page="index"] .hero{padding-top:28px}body[data-page="index"] .hero .wrap > div:first-child{padding-top:0}}

/* == section-rhythm == */
/* Consecutive sections share one gap instead of stacking two 112px paddings
   (CPO: "bu aralarda bazen çok boşluk bırakıyorsun"). */
.sec{padding:84px 0}
.sec + .sec{padding-top:36px}
.sec + .sec.tint,.sec + .sec.dark,.sec + .sec[class*="bg-"]{padding-top:72px}
@media (max-width:700px){.sec{padding:56px 0}.sec + .sec{padding-top:20px}.sec + .sec.tint,.sec + .sec.dark{padding-top:48px}}

/* == home-narrative == */
/* Persona entry strip right under the clients logo strip on the home page:
   four wide "chips" (reusing .card/.card-link for the white bg, hairline
   border and hover shadow) linking straight to the four persona pages. */
.foryou-section{padding:32px 0 8px}
.foryou-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.foryou-card{flex-direction:row;align-items:center;gap:14px;padding:18px 20px;min-height:0}
.foryou-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.foryou-role{font-family:var(--display);font-size:18px;font-weight:600;color:var(--ink);line-height:1.18}
.foryou-promise{font-family:var(--body);font-size:14px;font-weight:400;color:var(--muted);line-height:1.4}
.foryou-arrow{flex:none;width:16px;height:16px;margin-left:auto;background:var(--sky-text);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .25s}
.foryou-card:hover .foryou-arrow{transform:translateX(4px)}
@media (max-width:760px){.foryou-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.foryou-card{padding:16px 16px;gap:10px}.foryou-role{font-size:17px}}
html[dir="rtl"] .foryou-arrow{transform:scaleX(-1)}
html[dir="rtl"] .foryou-card:hover .foryou-arrow{transform:translateX(-4px) scaleX(-1)}

/* == products-menu-v3 == */
/* Products dropdown restructure (13 Sept): the old .dd-groups.groups-4 auto
   flowed the four dd-group blocks into an implicit 2x2 grid (Develop and
   improve, 2 rows / Run conversations, 5 rows / Connect and act, 4 rows /
   See and decide, 4 rows), so the short Develop group left a tall empty gap
   under it in row one. Fix: three columns instead of two. Column A stacks
   Develop and improve + Connect and act (a .dd-col wrapper, own flex
   column), column B is Run conversations, column C is See and decide.
   Pricing moved out of the See and decide product list into a second
   .dd-intro-link under "All products" (it is a plan, not a product).
   Widened the shared .dd panel a bit so three columns still read
   comfortably; both width caps keep their calc(100vw - Npx) viewport guard
   so small viewports are unaffected. */
.dd{width:min(1180px,calc(100vw - 48px))}
@media (max-width:1300px){.dd:not(.dd-industries){width:min(1040px,calc(100vw - 32px))}}
.dd-groups.groups-3col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px;align-items:start}
.dd-col{display:flex;flex-direction:column;gap:28px;min-width:0}

/* == reveal-soft == */
/* Gentler scroll reveal: less travel, slightly faster, no "ping" feel. */
.rv{transform:translateY(10px);opacity:.4;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s}
@media (prefers-reduced-motion:reduce){.rv{transform:none;opacity:1;transition:none}}

/* == dd-intro-links == */
/* Intro column links stack together at the bottom instead of splitting apart. */
.dd-intro-link + .dd-intro-link{margin-top:0;padding-top:0}

/* == home-security-art == */
#security .hv-security{max-width:560px;justify-self:end;width:100%}
#security .hv-security svg{width:100%;height:auto;display:block}
@media (max-width:900px){#security .hv-security{justify-self:stretch;max-width:520px;margin:0 auto}}

/* == home-v8 == */
/* Home page recut (13 Sept): #for-you folded into #for-your-role, #story,
   #journal, #how, both .cta-inline bands, #platform, #solutions, #finish,
   #lifecycle, #quality and .call-network-section removed from the home
   page (their content lives on product pages); #for-your-role now runs
   before #thesis-sec. The static navy headset disc at the centre of the
   #languages flag ring is replaced by a live "AI staff card" (.lang-live-card)
   driven by [data-lang-show] in site.js: it cycles the ring's flag order,
   highlights the live flag, types a per-language greeting and updates the
   "Speaking X" chip. Each flag <g> is now wrapped in a non-animated
   .a-flag-slot(data-lang) so the highlight can scale/opacity it without
   fighting the existing counter-rotation animation on .a-flag-counter. */
.lang-ring-wrap{position:relative}
.a-flag-slot{transition:opacity .3s ease,transform .3s ease}
.a-flag-slot.is-dim{opacity:.55}
.a-flag-slot.is-live{opacity:1;transform:scale(1.22)}
.a-flag-slot.is-live .a-flagborder{stroke:var(--sky);stroke-width:2.4}
@media (prefers-reduced-motion:reduce){.a-flag-slot{transition:none}}

.lang-live-card{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:56%;max-width:220px;min-width:150px;background:#fff;border-radius:16px;padding:14px 16px;box-shadow:var(--shadow);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px;z-index:2}
.llc-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.llc-avatar{flex:none;width:26px;height:26px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center}
.llc-avatar svg{width:13px;height:13px}
.llc-name{font-family:var(--body);font-size:13px;font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.llc-chip{margin-left:auto;font-family:var(--mono);font-size:12px;font-weight:600;color:var(--sky-text);background:var(--tint);border-radius:20px;padding:4px 8px;white-space:nowrap;transition:opacity .2s ease}
.llc-wave{display:flex;align-items:flex-end;gap:3px;height:20px}
.llc-wave i{flex:1;min-width:2px;background:var(--sky);border-radius:2px;height:30%;transition:height .25s ease}
.llc-wave.is-typing i{animation:llc-bar .9s ease-in-out infinite}
.llc-wave.is-typing i:nth-child(2){animation-delay:.08s}
.llc-wave.is-typing i:nth-child(3){animation-delay:.16s}
.llc-wave.is-typing i:nth-child(4){animation-delay:.24s}
.llc-wave.is-typing i:nth-child(5){animation-delay:.12s}
.llc-wave.is-typing i:nth-child(6){animation-delay:.2s}
.llc-wave.is-typing i:nth-child(7){animation-delay:.04s}
@keyframes llc-bar{0%,100%{height:30%}50%{height:100%}}
.llc-text{margin:0;font-family:var(--body);font-size:15px;font-weight:600;line-height:1.3;color:var(--navy);min-height:2.6em;transition:opacity .2s ease}
.llc-text.is-fading{opacity:0}
.llc-text[dir="rtl"]{text-align:right}
@media (max-width:480px){.lang-live-card{padding:10px 12px;gap:6px;border-radius:13px}.llc-name{font-size:12px}.llc-text{font-size:12px;min-height:2.4em}.llc-chip{font-size:12px;padding:3px 6px}}
@media (prefers-reduced-motion:reduce){.llc-wave.is-typing i{animation:none;height:60%}.llc-text,.llc-chip{transition:none}}

/* mobile overflow fixes 2026-09-13 */
/* platform.html, technology.html, infrastructure.html, security.html embed a
   page-specific techflow-*.svg (class "a-tech", not "tech") whose own inline
   <style> forces min-width:980px with no responsive step-down. The existing
   .infra-wrap>.tech rules below (see "technical flow" and "infrastructure
   diagram" sections above) never match it because of that class name, and
   at max-width:700px the shared ".infra-wrap{overflow:visible}" reset (used
   for the .infra/.infra-mobile companion pattern) strips the scroll
   containment from this wrapper too, so the oversized diagram widens the
   whole document instead of panning inside its own card. These rules mirror
   the ".tech" treatment for ".a-tech" so the same contained-scroll behavior
   applies, with higher selector specificity than both the inline SVG style
   and the ".infra-wrap{overflow:visible}" reset. */
.infra-wrap>.a-tech{width:100%;min-width:0;max-width:100%;height:auto;display:block}
@media (max-width:1040px) and (min-width:701px){
  .infra-wrap:has(>.a-tech){overflow-x:auto;padding:14px}
  .infra-wrap>.a-tech{width:1080px;max-width:none}
}
@media (max-width:700px){
  .infra-wrap:has(>.a-tech){padding:10px;border:1px solid var(--line);background:linear-gradient(135deg,#fff 0%,#fff 62%,var(--bg-soft) 100%);overflow-x:auto}
  .infra-wrap>.a-tech{width:900px;max-width:none}
}

/* languages v3 */
/* #languages redesign: the rotating ring + separate HTML "AI staff card"
   above is replaced by one static SVG (5x2 flag grid, French row above the
   card, Italian row below) with its own SMIL timeline: each flag tile gets
   a sky ring + a small lift for its 2.4s turn, and the card's "Speaking X"
   chip and one-line greeting are stacked <text> elements that cross-fade
   in the same 24s loop, so the whole thing runs with no JS. This overrides
   sizing/aspect-ratio from the old .lang-ring-svg rule above (source order)
   without touching it; the old .a-ring-rotor/.a-flag-counter/.a-flag-slot/
   .lang-live-card rules above are now unused but left in place. */
.lang-ring-svg{max-width:560px;aspect-ratio:8/5}
@media (max-width:900px){.lang-ring-svg{max-width:420px}}
@media (max-width:480px){.lang-ring-svg{max-width:320px}}

/* languages v4 */
/* CPO brief 2026-09-13/14: replaced the 5+5 static flag grid with a live
   scene: a small speech bubble (62% of the content width, tail pointing at
   the active flag) where a short natural-register introduction TYPES OUT
   letter by letter per language (SMIL clip-path rect reveal, sharp caret),
   directly above a strip of four large flat flag tiles, all drawn in the
   same 150x100 (3:2) box, sharp corners, no border, soft shadow, one sky
   accent underline + 4px lift on the active tile, stepping left in sync
   with the bubble. The active flag always sits in the same screen slot
   (2nd of 4 visible), so the bubble/tail never needs to move. viewBox is
   now 720x330 (was 640x396), so this overrides the old v3 aspect-ratio
   without editing it (source order wins; v3 block above is left untouched/
   unused for this element per append-only rule).
   Timing: 10 languages x 3.2s (2.2s typed + 1s hold) = 32s full loop. */
.lang-ring-svg{aspect-ratio:24/11}
@media (max-width:900px){.lang-ring-svg{max-width:420px}}
@media (max-width:480px){.lang-ring-svg{max-width:320px}}

/* languages v5 */
/* CPO 2026-09-14: "make this layout nicer" - wrap the whole visual (the SVG
   panel and the new "Hear Deniz" button below it) in one white product
   panel, like src/art/co-chat-inbox.svg: a soft mist tint sits behind/around
   a white card (1px #D9E3F5 rule, radius, one shared shadow). The SVG itself
   draws no card chrome any more (its viewBox content starts at a 24px inset
   that now serves as the card's own padding); .lang-ring-svg and
   .lang-hear-row are two DOM pieces fused into one visual card (svg = top
   with square bottom corners, hear-row = bottom with square top corners, no
   border between them), with the single shadow living on the mist wrapper
   so it doesn't double up at the seam. viewBox grew to 640x515 (was
   720x330), so max-width/aspect-ratio from v4 above are superseded here
   (left in place, unused for this element, per append-only). */
.lang-ring-wrap{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;background:#F3F7FF;border-radius:24px;padding:14px;box-shadow:var(--shadow);max-width:640px;margin:0 auto}
.lang-ring-svg{width:100%;max-width:none;aspect-ratio:640/515;height:auto;display:block;background:#fff;border:1px solid #D9E3F5;border-bottom:none;border-radius:20px 20px 0 0}
.lang-hear-row{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #D9E3F5;border-top:none;border-radius:0 0 20px 20px;padding:16px 24px}
.lang-hear-label{font-size:14px;color:var(--ink-2);flex:1;min-width:0}
.lang-hear:disabled{cursor:not-allowed}
.lang-hear-row .audio-status{font-size:12px;color:var(--muted)}
@media (max-width:900px){.lang-ring-wrap{padding:10px}.lang-hear-row{padding:14px 18px}}
@media (max-width:480px){.lang-hear-row{flex-wrap:wrap;padding:14px 16px}.lang-hear-label{font-size:13px}}

/* compare table motion 2026-09-13 */
/* Staggered reveal for #working-model .compare-table, on top of the shared
   .rv/.in fade (see "reveal" and "reveal-soft" above). Rows carry an inline
   --i (0..N) custom property in source order (header included), so timing
   stays correct if a row is added or removed later. Without JS the table
   never gets .in, so rows/ticks sit at their plain, fully visible default
   (opacity:1, no transform) below; only .compare-table.rv.in triggers the
   entrance animation, and prefers-reduced-motion:reduce is honoured by
   scoping all of it inside a no-preference query. */
.compare-table.rv .compare-row{opacity:1;transform:none}
.compare-table.rv .cmp-tick{opacity:1;transform:scale(1)}
@media (prefers-reduced-motion:no-preference){
  .compare-table.rv.in .compare-row{animation:cmpRowIn .5s ease-out both;animation-delay:calc(var(--i,0) * 90ms)}
  .compare-table.rv.in .compare-row:not(.compare-head) .cmp-tick{animation:cmpTickIn .35s ease-out both;animation-delay:calc(var(--i,0) * 90ms + 300ms)}
  .compare-table.rv.in .compare-final>span:last-child{animation:cmpFinalPulse .8s ease-out both;animation-delay:calc(var(--i,6) * 90ms + 650ms)}
}
@keyframes cmpRowIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes cmpTickIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes cmpFinalPulse{0%{box-shadow:inset 0 0 0 0 rgba(22,163,74,0)}40%{box-shadow:inset 0 0 0 3px rgba(22,163,74,.22)}100%{box-shadow:inset 0 0 0 0 rgba(22,163,74,0)}}

/* persona FAQ: keep trailing links out of the sticky heading column 2026-09-14 */
@media (min-width:900px){
  .wrap:has(> .faq) > .link-arrow,.wrap:has(> .faq) > .faq-hub-link{grid-column:2;justify-self:start;margin-top:8px}
  .wrap:has(> .faq) > :not(.sec-head):not(.faq){grid-column:2;min-width:0}
}

/* persona pages polish 2026-09-14 */
/* CPO: make the four for-*.html persona pages (EN + tr/ twins) flow as one
   story: pain ("Your week today") -> what changes -> what you look at
   (dashboard) -> proof visual (.telco) -> proof numbers (.stats) -> FAQ ->
   start -> CTA, with alternating .sec/.sec-tint backgrounds so no two
   sections in a row share the same ground. That reorder + the sec-tint
   toggles live in the page markup; the two small pieces below are the only
   new CSS they need: a one-line mono source note directly under .stats
   (proof band already exists, this just labels it without adding a number),
   and a one-line mono caption under the .telco-wrap value-story chart. Both
   reuse the shared --mono/--muted tokens so they match the eyebrow/label
   style used everywhere else; no changes to .stats/.telco themselves. */
.stats-note{margin-top:-20px;margin-bottom:24px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted)}
.telco-caption{margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted)}

/* products mega menu: fixed intro, scrolling groups 2026-09-14 */
@media (min-width:900px){
  .dd:has(> .dd-groups){overflow:hidden;max-height:min(calc(100vh - 110px),680px);align-items:stretch}
  .dd:has(> .dd-groups) > .dd-intro{position:sticky;top:0;align-self:stretch;height:auto}
  .dd:has(> .dd-groups) > .dd-groups{overflow-y:auto;max-height:calc(min(100vh - 110px,680px) - 56px);padding-right:12px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 36px),transparent)}
}

/* footer columns 2026-09-14 */
.ftr h4.ftr-sub{margin-top:22px}
.ftr ul{gap:4px}
.ftr-grid{grid-template-columns:1.5fr repeat(5,minmax(0,1fr));gap:36px 28px;align-items:start}
@media (max-width:1000px){.ftr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:640px){.ftr-grid{grid-template-columns:1fr 1fr}}

/* ai-agents outcome rail 2026-09-14 */
/* CPO feedback: the OUTCOME rail had a single leftover card. Now it carries
   five cards, one per ACT row, and a calm looping highlight reads the flow
   act row N lights up, then its outcome card lights a beat later, then the
   next row, all the way to row 5, then it holds and loops. Desktop grid: the
   outcome column is widened to match the ACT column (it was a narrow
   .55fr sized for one card); scoped to min-width:981px so the existing
   tablet (701 to 980px) and mobile (<=700px) layouts already in this file
   are untouched. Motion is CSS only, driven by an --i custom property per
   row (0 to 4) set inline in the markup; duration and delay share one base
   step (.9s) so every loop iteration re-aligns row for row with no drift. */
@media(min-width:981px){
  .ai-architecture-flow{grid-template-columns:minmax(0,1fr) minmax(200px,.95fr) minmax(0,1fr) minmax(0,1fr)}
}
.ai-architecture-outcome .ai-architecture-node-outcome>b{color:#2E9E5B}
@media(prefers-reduced-motion:no-preference){
  .ai-architecture-rail-act .ai-architecture-node{animation:aiRowGlow 6.3s ease-in-out infinite;animation-delay:calc(var(--i,0) * .9s)}
  .ai-architecture-rail-act .ai-architecture-node>b{animation:aiRowGlowStatus 6.3s ease-in-out infinite;animation-delay:calc(var(--i,0) * .9s)}
  .ai-architecture-outcome .ai-architecture-node:not(.ai-architecture-node-outcome){animation:aiRowGlow 6.3s ease-in-out infinite;animation-delay:calc(var(--i,0) * .9s + .25s)}
  .ai-architecture-outcome .ai-architecture-node:not(.ai-architecture-node-outcome)>b{animation:aiRowGlowStatus 6.3s ease-in-out infinite;animation-delay:calc(var(--i,0) * .9s + .25s)}
  .ai-architecture-outcome .ai-architecture-node-outcome{animation:aiRowGlowGreen 6.3s ease-in-out infinite;animation-delay:calc(var(--i,4) * .9s + .25s)}
}
@keyframes aiRowGlow{0%,14%{border-color:var(--sky);background:var(--tint);box-shadow:0 12px 24px -22px var(--sky-deep)}22%,100%{border-color:var(--line-strong);background:var(--bg-soft);box-shadow:none}}
@keyframes aiRowGlowStatus{0%,14%{color:var(--green)}22%,100%{color:var(--sky-text)}}
@keyframes aiRowGlowGreen{0%,14%{border-color:#2E9E5B;background:rgba(46,158,91,.16);box-shadow:0 12px 24px -22px rgba(15,61,36,.5)}22%,100%{border-color:rgba(46,158,91,.4);background:rgba(46,158,91,.08);box-shadow:none}}

/* proof strip 2026-09-14 */
/* Telephony "Watched around the clock" section cleanup (CPO feedback):
   a slim 2-cell closing proof band for use after a step/rail sequence
   instead of repeating the full 4-cell .stats hero band; a glyph variant
   of .steps that lays out as a 2x2 grid with a filled icon square per
   item (the existing rail-line ::after is kept, just muted after every
   2nd item so it still runs between the two glyphs sharing a row); and a
   small "line health" mock row/meter/chip set reused from the site's
   existing .mock/.chip components. None of .stats/.steps/.mock/.chip
   themselves are edited, only new scoped classes are added. */
.proof-strip{grid-template-columns:repeat(2,minmax(0,220px));gap:32px;margin:40px 0 0;justify-content:start}
.proof-strip .stat{padding-top:14px}
.proof-strip .stat strong{font-size:clamp(28px,2.4vw,38px)}
@media (max-width:480px){.proof-strip{grid-template-columns:1fr;gap:18px}}

.steps-glyph{grid-template-columns:1fr 1fr}
.steps-glyph li::before{display:none}
.steps-glyph li:nth-child(2n)::after{display:none}
.steps-glyph .step-glyph{position:absolute;top:0;left:0;width:36px;height:36px;border-radius:10px;background:var(--tint);color:var(--sky-text);display:grid;place-items:center}
.steps-glyph .step-glyph svg{width:18px;height:18px}
@media (max-width:640px){.steps-glyph{grid-template-columns:1fr}.steps-glyph li:nth-child(2n)::after{display:block}.steps-glyph li:last-child::after{display:none}}

.line-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);flex-wrap:wrap}
.line-row:last-child{border-bottom:0}
.line-row .name{flex:1 1 auto;min-width:120px;font-family:var(--mono);font-size:12.5px;color:var(--ink)}
.line-meter{display:inline-block;width:64px;height:6px;border-radius:99px;background:var(--line);overflow:hidden;flex:none}
.line-meter i{display:block;height:100%;border-radius:inherit;background:var(--sky-text)}
.chip-watching{background:rgba(98,164,255,.16);color:var(--sky-deep)}
.chip-watching::before{background:var(--sky-deep)}
@media (max-width:480px){.line-row .name{flex:1 1 100%}}

/* hero balance 2026-09-14 */
.page-hero .wrap{align-items:center}
.page-hero .hv-art{max-width:560px;width:100%}
.page-hero .hv-art svg{width:100%;height:auto;display:block}
.page-hero .hv-art.hv-small svg{transform:scale(1.12);transform-origin:center}

/* == investors hero 2026-09-20 ==
   CPO: "burayı vurucu yapmalıyız" plus "başlık çok uzun" and "görsel ve yazı
   oranı iyi olmalı". Same .page-hero grid, only the ratio and the headline
   size move: copy 45 / operating-snapshot panel 55, and an h1 that stays on
   one desktop line (two at most on a phone) instead of the old four.
   The panel's own canvas is 600x340, so at the 600px cap it ends roughly level
   with the copy column (eyebrow, one line of h1, three to four lines of lede
   and the CTA row). Below 900px the shared single-column rule takes over. */
body[data-page="investors"] .page-hero .wrap{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
body[data-page="investors"] .page-hero .copy{max-width:none;container-type:inline-size}
/* h1 size 2026-09-26: the 36px cap above was set for the old 63-character
   headline; the current "300K conversations a month" kept it and read smaller
   than every other hero h1. It now takes the standard hero size (clamp 36 to
   68px) unless its own column (cqi) is narrower: the largest size that keeps two lines in the 45 percent copy
   column (at 1440 about 53px in EN; the full 68px would wrap to three lines).
   Longest line per language measured with Helvetica Neue Bold plus 3 percent,
   the same offline proxy as the security hero. */
body[data-page="investors"] .page-hero .h1{max-width:none;font-size:min(clamp(36px,5.2vw,68px),9.3cqi);text-wrap:balance}
html[lang="en"] body[data-page="investors"] .page-hero .h1{font-size:min(clamp(36px,5.2vw,68px),10.8cqi)}
html[lang="tr"] body[data-page="investors"] .page-hero .h1{font-size:min(clamp(36px,5.2vw,68px),16cqi)}
html[lang="de"] body[data-page="investors"] .page-hero .h1{font-size:min(clamp(36px,5.2vw,68px),11.2cqi)}
html[lang="fr"] body[data-page="investors"] .page-hero .h1{font-size:min(clamp(36px,5.2vw,68px),9.8cqi)}
html[lang="it"] body[data-page="investors"] .page-hero .h1{font-size:min(clamp(36px,5.2vw,68px),9.7cqi)}
html[lang="pt"] body[data-page="investors"] .page-hero .h1{font-size:min(clamp(36px,5.2vw,68px),13.4cqi)}
body[data-page="investors"] .page-hero .hv-art{max-width:600px;justify-self:end}
@media (max-width:900px){
  body[data-page="investors"] .page-hero .wrap{grid-template-columns:1fr}
  body[data-page="investors"] .page-hero .hv-art{max-width:600px;justify-self:stretch;margin:0 auto}
}
/* On a phone the panel scales to about 0.56 of its canvas, which would drop the
   13px tile labels to roughly 7px on screen. 17px is the largest the layout
   takes without a collision (svgcheck on a 17px variant reports no overlap and
   nothing outside the box), and lands near 10px at 390px wide. The figures and
   the mono lines keep their sizes; only the four tile labels move. */
@media (max-width:480px){
  body[data-page="investors"] .page-hero .hv-art .iv-lbl{font-size:17px}
}

/* == compare-v3 == */
/* CPO review 2026-09-14, second pass ("uzun olsun demedim; kısa, öz ve
   kullanmaya itsin"): cut #working-model from 9 rows with tags and "what
   it means" lines to 7 compact rows, no tags, no meaning lines. Builds on
   the existing .compare-row grid and the "compare table motion 2026-09-13"
   reveal block above; neither is changed. Scoped to #working-model since
   that id, and the exact classes .compare-row/.compare-table/.compare-final,
   are unique to the two index.html pages (voice-anonymizer.html's
   similar-looking table uses its own unrelated .mask-compare-* classes).
   - #working-model rows (incl. the header and the last/proof row) get a
     compact 14px vertical padding so the whole table stays well under the
     560px-at-1440 budget.
   - .compare-highlight tints the pricing row and .cmp-price-line bumps
     its short Dring statement to a heading size.
   - .compare-links holds the closing primary button + text link under
     the table (previously two .link-arrow items; the CPO now wants a
     push-to-use primary CTA there instead). */
#working-model .compare-row>span,#working-model .compare-final>span{padding-top:14px;padding-bottom:14px}
.compare-highlight>span{background:var(--tint)}
.compare-highlight>span:first-child{color:var(--ink)}
.compare-highlight>span:last-child{background:linear-gradient(110deg,rgba(216,232,255,.95),rgba(238,246,255,.98))}
.cmp-price-line{display:block;font-family:var(--display);font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.compare-links{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:22px}
@media (max-width:700px){
  #working-model .compare-row>span,#working-model .compare-final>span{padding-top:12px;padding-bottom:12px}
  .compare-highlight>span:first-child{background:var(--tint);border-left:0}
  .cmp-price-line{font-size:16px}
  .compare-links{flex-direction:column;align-items:stretch;gap:12px;margin-top:18px}
}

/* == languages-v6-rebuild == */
/* CPO 2026-09-14 (second pass): rejected the v5 SVG panel ("kötü"). Replaced
   the whole right-hand card with plain HTML/CSS/JS: no inline SVG animation
   timeline any more (kept only ten tiny flag <svg> icons, no clipPath, no
   ids: the rounded corner comes from .llc-flag-art{overflow:hidden} in CSS,
   not from SVG chrome). Markup lives in #languages in both index.html and
   tr/index.html: .lang-ring-wrap (grid slot) > .lang-card[data-lang-show]
   (the actual white product card) > .llc-head / .llc-bubble / .llc-flags.
   JS: see the languagesCard() rewrite in site.js (replaces the old
   languagesVoice() + the separate [data-lang-show] IIFE). This block only
   overrides properties; the v2/v3/v4/v5 rules above are left in place
   (dead now that .lang-ring-svg/.lang-hear-row/.lang-live-card no longer
   exist in the DOM) since editing them in place risks colliding with
   whichever other agent still has this shared file open. Reuses
   .llc-head/.llc-avatar/.llc-name/.llc-chip/.llc-wave/.llc-text/.llc-wave i
   rules already appended for "languages v3" above; only new pieces and
   explicit overrides are added here. */
.lang-split{align-items:stretch}
.lang-ring-wrap{background:none;padding:0;box-shadow:none;border-radius:0}
.lang-card{display:flex;flex-direction:column;flex:1 1 auto;width:100%;box-sizing:border-box;background:#fff;border:1px solid #E3E9F3;border-radius:18px;box-shadow:var(--shadow);padding:28px;gap:20px}
/* Grid track is minmax(0,1fr): without min-width:0 the 3,300px flag strip
   pushed the card 68px past the container on desktop (26 Sep). */
#languages .lang-ring-wrap,#languages .lang-card{min-width:0;max-width:100%}
.lang-card .llc-chip{transition:none}

/* speech bubble: text + inline play button on one row, wave strip full width underneath */
.llc-bubble{background:#F3F7FF;border-radius:14px;padding:16px 18px 14px}
.llc-bubble-row{display:flex;flex-wrap:nowrap;align-items:center;gap:12px}
.llc-bubble .llc-text{flex:1 1 auto;min-width:0;min-height:2.6em;margin:0}
.llc-play{flex:none;width:36px;height:36px;border-radius:50%;border:0;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:transform .15s ease,opacity .15s ease}
.llc-play svg{width:16px;height:16px;display:block}
.llc-play .ic-pause{display:none}
.llc-play.is-playing .ic-play{display:none}
.llc-play.is-playing .ic-pause{display:block}
.llc-play:hover:not(:disabled){transform:scale(1.06)}
.llc-play:disabled{opacity:.45;cursor:not-allowed}
.llc-play:focus-visible{outline:2px solid var(--sky);outline-offset:2px}

/* wave strip: runs the full bubble width, mono label at the left end */
.llc-bubble .llc-wave{width:100%;height:22px;margin-top:10px;gap:10px;align-items:center}
.llc-wave-label{flex:none;font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.llc-wave-bars{flex:1 1 auto;min-width:0;display:flex;align-items:flex-end;gap:3px;height:22px}
.llc-wave-bars i{height:22%;opacity:.55}
.llc-wave.is-typing .llc-wave-bars i,.llc-wave.is-playing .llc-wave-bars i{animation:llc-bar .9s ease-in-out infinite;animation-delay:calc(var(--i,0) * .05s);opacity:1}

/* flag grid: five per row, two rows, as wide as the bubble above it, grows to fill any leftover card height */
.llc-flags{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;flex:1 1 auto;align-content:space-between}
.llc-flag{display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border:1px solid #E3E9F3;border-radius:10px;padding:8px 6px 10px;cursor:pointer;font:inherit;box-shadow:0 1px 2px rgba(1,24,56,.05);transition:transform .18s ease,box-shadow .18s ease}
.llc-flag-art{width:100%;aspect-ratio:128/85;border-radius:6px;overflow:hidden;display:block;background:#F3F7FF}
.llc-flag-art svg{width:100%;height:100%;display:block}
.llc-flag-label{font-family:var(--body);font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;transition:color .15s ease}
.llc-flag:hover{transform:translateY(-1px)}
.llc-flag:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
.llc-flag.is-active{box-shadow:0 0 0 2px var(--sky),0 6px 16px rgba(1,24,56,.12);transform:translateY(-2px)}
.llc-flag.is-active .llc-flag-label{color:var(--navy)}

@media (max-width:900px){
  .lang-card{padding:22px;gap:16px}
}
@media (max-width:480px){
  .lang-card{padding:18px;gap:14px}
  .llc-bubble{padding:14px 14px 12px}
  .llc-bubble .llc-text{font-size:13px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .llc-play{width:32px;height:32px}
  .llc-play svg{width:14px;height:14px}
  .llc-wave-label{font-size:12px}
  .llc-flags{gap:8px}
  .llc-flag{padding:6px 4px 8px;border-radius:8px}
  .llc-flag-label{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .llc-wave.is-typing .llc-wave-bars i,.llc-wave.is-playing .llc-wave-bars i{animation:none;height:22%;opacity:.55}
  .llc-flag,.llc-flag.is-active,.llc-play{transition:none}
}

/* == proof-band-v2 == */
/* CPO 14 Sep: the bare 3 to 4 number ".stats" bands under "Measured on
   every call" style sections read tired and identical page to page,
   especially across the industry-*.html family (same "24/7 / No wait /
   100%" triplet everywhere) and the customer-support.html "Quality you can
   audit" section named directly in feedback. New, additive component only:
   .stats itself is untouched (other pages/agents still use it, including
   telephony.html's .proof-strip from earlier the same day). Structure:
   .proof-band > four .proof-cell, each a small tint glyph disc (or, on one
   cell per band where a percentage fits, a .proof-ring CSS conic-gradient
   donut with the number centered instead of a bare number) + a big tabular
   number + a short caption + a tiny mono source tag. Framed strip: white,
   18px radius, 1px line, soft shadow, hairline separators between cells. */
.proof-band{display:grid;grid-template-columns:repeat(4,1fr);background:var(--bg);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);margin:36px 0 0;overflow:hidden}
.proof-cell{position:relative;padding:26px 24px;min-width:0;display:flex;flex-direction:column}
.proof-cell:not(:first-child){border-left:1px solid var(--line)}
.proof-glyph{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--tint);color:var(--sky-deep);margin-bottom:14px;flex:none}
.proof-glyph svg{width:14px;height:14px}
.proof-num{display:block;font-family:var(--display);font-size:clamp(27px,2.6vw,36px);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.proof-cap{display:block;margin-top:9px;color:var(--ink-2);font-size:13.5px;line-height:1.45;max-width:24ch}
.proof-src{display:block;margin-top:7px;font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--muted);font-style:normal}
.proof-ring{position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:conic-gradient(var(--sky) calc(var(--pct,72)*1%),var(--line) 0);margin-bottom:11px;flex:none}
.proof-ring::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--bg)}
.proof-ring b{position:relative;z-index:1;font-family:var(--display);font-size:12.5px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.proof-meter{display:flex;align-items:flex-end;gap:3px;height:26px;margin-bottom:13px;flex:none}
.proof-meter i{display:block;width:6px;border-radius:2px 2px 0 0;background:var(--line-strong)}
.proof-meter i:nth-child(1){height:32%}
.proof-meter i:nth-child(2){height:52%}
.proof-meter i:nth-child(3){height:68%}
.proof-meter i:nth-child(4){height:86%}
.proof-meter i:nth-child(5){height:100%}
.proof-meter i.on{background:var(--sky)}
@media (max-width:900px){
  .proof-band{grid-template-columns:repeat(2,1fr)}
  .proof-cell{border-left:0!important}
  .proof-cell:nth-child(2n){border-left:1px solid var(--line)!important}
  .proof-cell:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:520px){
  .proof-band{grid-template-columns:1fr}
  .proof-cell{border-left:0!important;border-bottom:0!important;flex-direction:row;align-items:flex-start;gap:14px;padding:16px 4px}
  .proof-cell:not(:first-child){border-top:1px solid var(--line)}
  .proof-glyph,.proof-ring,.proof-meter{margin-bottom:0;margin-top:2px}
  .proof-cap,.proof-src{max-width:none}
}

/* == voices-carousel == */
/* Home #voices: rotates the sample cards through the full catalogue instead
   of a static four. Cards stay plain .v elements (existing playback in
   site.js keeps wiring .play/.wave as before); this only adds a track that
   slides by one card, plus arrows, dots and a settle animation. Gap below
   (16px) must match .voices-track's own gap; JS reads it from that rule. */
#voices .voices-carousel{position:relative}
#voices .voices-viewport{overflow:hidden}
#voices .voices-track{display:flex;gap:16px;transition:transform .5s cubic-bezier(.4,0,.2,1)}
#voices .voices-track .v{flex:0 0 100%;min-width:0}
@media (min-width:1024px){#voices .voices-track .v{flex-basis:calc((100% - 2 * 16px) / 3)}}
@media (min-width:1440px){#voices .voices-track .v{flex-basis:calc((100% - 3 * 16px) / 4)}}
#voices .voices-arrow{position:absolute;top:38%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--ink);cursor:pointer;padding:0;transition:border-color .2s,color .2s,box-shadow .2s}
#voices .voices-arrow svg{width:18px;height:18px}
#voices .voices-arrow:hover{border-color:var(--sky);color:var(--sky-text)}
#voices .voices-arrow:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
#voices .voices-prev{left:-20px}
#voices .voices-next{right:-20px}
@media (max-width:1100px){#voices .voices-prev{left:-8px}#voices .voices-next{right:-8px}}
@media (max-width:600px){#voices .voices-arrow{display:none}}
#voices .voices-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:18px}
#voices .voices-dots button{width:8px;height:8px;padding:0;border-radius:50%;border:1px solid var(--line-strong);background:var(--tint-2);cursor:pointer;transition:background .2s,width .2s,border-color .2s}
#voices .voices-dots button.active{background:var(--sky);border-color:var(--sky);width:22px;border-radius:5px}
#voices .voices-dots button:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
#voices .wave i{transform-origin:bottom}
#voices .wave.is-settling i{animation:voicesWaveSettle .5s cubic-bezier(.4,0,.2,1) both}
#voices .wave.is-settling i:nth-child(3n+2){animation-delay:.02s}
#voices .wave.is-settling i:nth-child(3n){animation-delay:.04s}
@keyframes voicesWaveSettle{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){
  #voices .voices-track{transition:none}
  #voices .wave.is-settling i{animation:none}
}

/* == persona-flow-band == */
.flow-band{margin:28px 0 8px;border-radius:18px;background:linear-gradient(180deg,#F7FAFF,#EEF3FB);border:1px solid var(--line);padding:18px;overflow:hidden}
.flow-band svg{width:100%;height:auto;display:block}
@media (max-width:700px){.flow-band{overflow-x:auto}.flow-band svg{min-width:760px}}

/* == nav-for-your-role == */
/* New top-nav "For your role" dropdown reuses the base .dd/.dd-intro/.dd-groups
   two-zone pattern (site.css ~3119-3137) as-is: .dd-groups already defaults to
   a 2-column grid and .dd-group/.dd-rows already stack rows in a plain column,
   so six .dd-row links in two .dd-group wrappers render as two columns of
   three rows with zero new rules. No new selectors needed here.
   Removed rule (was here): .dd-role-block and its two @media overrides, plus
   the second grid column on .dd-ind-panel-wrap, now that the Solutions
   dropdown's "by role" side block is gone (moved to its own nav item). See
   .dd-ind-panel-wrap above (~3195), edited in place rather than appended,
   since the removed markup made the old 2-column grid track dead weight. */

/* == languages-align == */
/* The card is taller than the copy; centre the copy so top and bottom margins match. */
#languages .split.lang-split{align-items:center}

/* == languages-v7-marquee == */
/* CPO 2026-09-14 (third pass): "bayraklar tek sıra olsun, büyük, kaysınlar" -
   one row of big flags that slides. Replaces the v6 5x2 .llc-flags grid with
   a single flex row, same width as .llc-bubble (both are plain full-width
   children of .lang-card, so this is automatic, no extra CSS needed for
   that). Markup: the 10 .llc-flag buttons in #languages are now followed by
   an identical duplicate set (aria-hidden="true" tabindex="-1", same
   data-lang/click behaviour) so the strip can wrap seamlessly - see
   languagesCard() in site.js for the scroll math (native scrollLeft, not a
   CSS @keyframes marquee: a plain keyframe animation cannot be paused mid
   frame AND nudged to "ease a specific flag into view" without the
   animation engine fighting a JS transform override, since a running/paused
   CSS animation keeps priority over an inline transform. Driving real
   scrollLeft sidesteps that entirely and gets native touch drag /
   scroll-snap for free). This block only sizes/overrides; the v6 block
   above still supplies .llc-flag's border/radius/shadow/hover/is-active
   rules untouched. */
.llc-flags{
  position:relative; /* makes this the offsetParent for .llc-flag, so the
    JS marquee's offsetLeft math in languagesCard() lines up with scrollLeft */
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  -ms-overflow-style:none;
  gap:16px;
  flex:none;
  will-change:scroll-position;
  overscroll-behavior-x:contain;
}
.llc-flags::-webkit-scrollbar{display:none}
.llc-flag{flex:none;width:150px}
.llc-flag-art{width:150px;height:104px;aspect-ratio:auto}
.llc-flag-label{font-size:14px}
.lang-card{justify-content:space-between}

@media (hover:none) and (pointer:coarse){
  .llc-flags{scroll-snap-type:x mandatory}
  .llc-flag{scroll-snap-align:center}
}

@media (max-width:480px){
  .llc-flags{gap:10px}
  .llc-flag{width:112px}
  .llc-flag-art{width:112px;height:78px}
  .llc-flag-label{font-size:12px}
}

/* == working-model heading one line 2026-09-14 == */
/* CPO: lede removed, h2 reads as a single line on desktop. */
#working-model .sec-head{grid-template-columns:1fr;margin-bottom:44px}
#working-model .sec-head .h2{max-width:none}
/* Two lines on desktop, one sentence each: the old one-line nowrap version
   ran 45 to 540px past the container in every language at 1440px (26 Sep). */
@media (min-width:1100px){#working-model .sec-head .h2{font-size:clamp(34px,3.3vw,50px);text-wrap:balance}#working-model .sec-head .h2 em{display:block}}
html[lang="tr"] #working-model .sec-head .h2{font-size:clamp(34px,3.1vw,46px)}

/* == why-fail research 2026-09-14 == */
/* CPO: tie the three failure patterns to the Gartner predictions discussed in
   the sales meeting. Left: navy evidence plate (Gartner figures, attributed,
   linked). Right: three rows, each "failure pattern (with the Gartner term)"
   on tint, "Dring answer" on white. */
#why-fail .sec-head{margin-bottom:40px}
.whyfail{display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,7.6fr);gap:24px;align-items:stretch;margin-bottom:28px}
.whyfail-source{position:relative;display:flex;flex-direction:column;gap:20px;padding:30px 30px 26px;border-radius:22px;background:linear-gradient(160deg,#0B2A57 0%,#011838 70%);color:#fff;box-shadow:var(--shadow);overflow:hidden}
.whyfail-source::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse at 20% 0%,#000 30%,transparent 75%);pointer-events:none}
.whyfail-source>*{position:relative}
.whyfail-src-tag{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#BFD6FF}
.whyfail-src-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 4px rgba(98,164,255,.22)}
.whyfail-stat{display:flex;flex-direction:column;gap:10px;margin:0}
.whyfail-stat strong{font-family:var(--display);font-size:clamp(44px,4.6vw,64px);font-weight:600;line-height:1;letter-spacing:-.01em;color:var(--sky);font-variant-numeric:tabular-nums}
.whyfail-stat span{font-size:16px;line-height:1.5;color:#DCE7FA;max-width:34ch}
.whyfail-stat em{display:block;margin-top:6px;font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8FB4EE}
.whyfail-quote{margin:0;padding:18px 20px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.whyfail-quote p{margin:0;font-size:15px;line-height:1.55;color:#EEF4FF}
.whyfail-quote p::before{content:"\201C";color:var(--sky);margin-right:2px}
.whyfail-quote p::after{content:"\201D";color:var(--sky);margin-left:2px}
.whyfail-quote footer{margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#8FB4EE}
.whyfail-stat-sm{padding-top:20px;border-top:1px solid rgba(255,255,255,.12);flex-direction:row;align-items:flex-start;gap:16px}
.whyfail-stat-sm strong{font-size:34px;line-height:1.05;min-width:64px}
.whyfail-stat-sm span{font-size:14px;color:#BFD0EC}
.whyfail-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:auto;padding-top:6px}
.whyfail-links a{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:#BFD6FF;text-decoration:none;border-bottom:1px solid rgba(191,214,255,.35);padding-bottom:2px}
.whyfail-links a:hover{color:#fff;border-color:#fff}
.whyfail-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;counter-reset:whyfail}
.whyfail-row{counter-increment:whyfail;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(1,24,56,.04);transition:border-color .25s,box-shadow .25s,transform .25s}
.whyfail-row:hover{border-color:#C9DAF7;box-shadow:var(--shadow);transform:translateY(-2px)}
.whyfail-cause,.whyfail-answer{padding:22px 24px;display:flex;flex-direction:column;gap:8px;min-width:0}
.whyfail-cause{background:var(--tint);position:relative;border-right:1px solid var(--line)}
.whyfail-cause::before{content:"0" counter(whyfail);position:absolute;top:20px;right:20px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--sky-text);border:1px solid #C9DAF7;border-radius:999px;padding:3px 8px;background:#fff}
.whyfail-lbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.whyfail-answer .whyfail-lbl{color:var(--sky-text)}
.whyfail-cause h3{font-size:19px;font-weight:600;line-height:1.25;margin:0;padding-right:56px}
.whyfail-cause p,.whyfail-answer p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.55}
.whyfail-answer strong{display:block;position:relative;padding-left:28px;font-family:var(--display);font-size:18px;font-weight:600;line-height:1.25;color:var(--navy)}
.whyfail-answer p{color:var(--ink-2);padding-left:28px}
.whyfail-answer strong::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:50%}
.whyfail-answer strong::before{background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat}
.whyfail-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.whyfail-chips i{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.whyfail-chips b{font-weight:600;font-size:12.5px;color:var(--navy);background:#fff;border:1px solid #C9DAF7;border-radius:999px;padding:4px 10px;white-space:nowrap}
.whyfail-chips b::before{content:"\201C";color:var(--sky-text)}
.whyfail-chips b::after{content:"\201D";color:var(--sky-text)}
@media (max-width:1100px){.whyfail{grid-template-columns:1fr}.whyfail-source{padding:28px 26px 26px}}
@media (max-width:700px){
  .whyfail-row{grid-template-columns:1fr}
  .whyfail-cause{border-right:0;border-bottom:1px solid var(--line)}
  .whyfail-cause,.whyfail-answer{padding:18px 18px}
  .whyfail-cause h3{padding-right:52px}
  .whyfail-stat span{font-size:15px}
  .whyfail-stat-sm{flex-direction:column;gap:8px}
}

/* why-fail: brand badge, proof chips, balance (CPO 14 Sep) */
.whyfail-brand{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.whyfail-brand-mark{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:8px;background:#fff;color:#002856;font-family:var(--body);font-weight:800;font-size:17px;letter-spacing:-.01em;line-height:1}
.whyfail-brand .whyfail-src-tag{color:#BFD6FF}
.whyfail-brand .whyfail-src-tag::before{display:none}
.whyfail-stat strong{font-size:clamp(42px,4.2vw,58px)}
.whyfail-quote{padding:16px 18px}
.whyfail-quote p{font-size:14.5px}
.whyfail-proof{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:10px;padding-left:28px}
.whyfail-proof b{font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--sky-text);background:#EEF4FF;border:1px solid #D6E4FB;border-radius:999px;padding:4px 9px;white-space:nowrap}
.whyfail-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:700px){.whyfail-answer p,.whyfail-proof{padding-left:0}.whyfail-answer strong{font-size:17px}}
/* why-fail: balance pass 2 (compact rows, causes strip, fix stacked 30%) */
.whyfail-stat-sm strong{white-space:nowrap;flex:none;min-width:0;font-size:30px}
.whyfail-stat-sm{gap:14px}
.whyfail-causes{display:flex;flex-direction:column;gap:10px}
.whyfail-causes .whyfail-lbl{color:#8FB4EE}
.whyfail-cause-chips{display:flex;flex-wrap:wrap;gap:6px}
.whyfail-cause-chips b{font-weight:600;font-size:12.5px;color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:5px 11px;white-space:nowrap}
.whyfail-cause,.whyfail-answer{padding:20px 22px;gap:7px}
.whyfail-cause h3{font-size:18px}
.whyfail-cause p,.whyfail-answer p{font-size:14.5px;line-height:1.5}
.whyfail-answer strong{font-size:17px}
.whyfail-proof{padding-top:8px}
.whyfail-proof b{font-size:10px;padding:3px 8px}
.whyfail-rows{gap:12px}

/* == compare table: "you do it" vs "ready" decoration 2026-09-14 == */
/* CPO: the middle column should read as work left to the customer, the Dring
   column as already handled. Middle cells get a grey person marker, header
   cells a small sub-label, Dring ticks turn solid green as the row reveals. */
.compare-row:not(.compare-head)>span:nth-child(2){position:relative;padding-left:48px}
.compare-row:not(.compare-head)>span:nth-child(2)::before{content:"";position:absolute;left:20px;top:19px;width:19px;height:19px;border-radius:50%;border:1.5px dashed #B9C5DB;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A97B3' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.4'/%3E%3Cpath d='M5.5 19.5c1.2-3.6 3.6-5.2 6.5-5.2s5.3 1.6 6.5 5.2'/%3E%3C/svg%3E") center/62% no-repeat;box-sizing:border-box}
.compare-final>span:nth-child(2)::before{top:23px}
.compare-row:not(.compare-head)>span:nth-child(2){color:#7B87A3}
.cmp-sub{display:inline-block;margin-left:8px;padding:2px 7px;border-radius:999px;font:500 12px var(--mono);letter-spacing:.02em;text-transform:none;vertical-align:1px}
.cmp-sub-you{background:#EEF1F7;color:#7B87A3;border:1px dashed #C9D3E5}
.cmp-sub-us{background:rgba(22,163,74,.12);color:#15803D;border:1px solid rgba(22,163,74,.25)}
.compare-table.rv.in .cmp-tick{background:var(--green);color:#fff;box-shadow:0 0 0 3px rgba(22,163,74,.14)}
.compare-row:not(.compare-head):hover>span:last-child{background:linear-gradient(110deg,rgba(220,234,255,.9),rgba(240,247,255,1))}
@media (max-width:700px){
  .compare-row:not(.compare-head)>span:nth-child(2){padding-left:20px}
  .compare-row:not(.compare-head)>span:nth-child(2)::before{position:static;display:inline-block;margin-right:7px;vertical-align:-4px}
  .cmp-sub{display:block;margin:4px 0 0;width:max-content}
}

/* == role-switcher 2026-09-14 == */
/* Home "Pick your seat": one framed stage with a tab rail on top and six role
   stories that crossfade in place. The rail is the only navigation; the stage
   auto-advances every seven seconds while it is in view and untouched, and
   stops for good once the visitor clicks or uses the keyboard (site.js,
   [data-role-switcher]). */
.role-section{background:var(--bg-soft)}
.role-switcher{border:1px solid #E3E9F3;border-radius:22px;background:#fff;box-shadow:0 1px 2px rgba(1,24,56,.04),0 30px 70px -34px rgba(1,24,56,.2);overflow:hidden}
.rsw-rail{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;padding:8px 8px 0;background:var(--tint);border-bottom:1px solid #E3E9F3}
.rsw-tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;min-height:62px;padding:13px 8px 15px;border-radius:12px 12px 0 0;color:var(--muted);font-family:var(--body);font-size:13px;font-weight:600;line-height:1.2;letter-spacing:-.005em;text-align:center;transition:background-color .2s,color .2s}
.rsw-tab:hover{background:var(--tint-2);color:var(--ink-2)}
.rsw-tab.is-on,.rsw-tab.is-on:hover{background:#fff;color:var(--ink)}
/* Active tab: a 3px sky underline. Before the visitor touches anything the
   same bar doubles as the auto-advance timer and fills over seven seconds. */
.rsw-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--sky);opacity:0;transform:scaleX(0);transform-origin:left center}
.rsw-tab.is-on .rsw-progress{opacity:1;transform:scaleX(1)}
[data-role-switcher].is-timing .rsw-tab.is-on .rsw-progress{animation:rsw-fill 7s linear forwards}
[data-role-switcher].is-timing.is-held .rsw-tab.is-on .rsw-progress{animation-play-state:paused}
@keyframes rsw-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.rsw-stage{display:grid}
.rsw-panel{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1.38fr) minmax(0,1fr);gap:30px;align-items:center;padding:26px 30px 30px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .26s ease,transform .26s ease,visibility 0s linear .26s}
.rsw-panel.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .26s ease,transform .26s ease,visibility 0s}
.rsw-scene{border:1px solid var(--line);border-radius:16px;background:radial-gradient(120% 130% at 50% 12%,var(--tint),#F7FAFF 72%);overflow:hidden}
.rsw-scene svg{display:block;width:100%;height:auto}
.rsw-copy{display:flex;flex-direction:column;align-items:flex-start}
.rsw-eyebrow{color:var(--sky-text);font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.rsw-copy h3{margin-top:14px;max-width:20ch;color:var(--ink);font-family:var(--display);font-size:clamp(21px,2vw,28px);font-weight:600;line-height:1.1;letter-spacing:-.02em}
.rsw-copy p{margin-top:12px;max-width:44ch;color:var(--muted);font-size:15.5px;line-height:1.55}
.rsw-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}
.rsw-chips i{padding:5px 10px;border:1px solid var(--tint-2);border-radius:999px;background:var(--bg-soft);color:var(--ink-2);font:500 12px var(--mono);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.rsw-copy .link-arrow{margin-top:20px;font-size:13.5px}
@media (max-width:1100px){
  .rsw-tab{font-size:12.5px;min-height:58px;padding:11px 8px 13px}
  .rsw-panel{gap:24px;padding:22px 24px 26px}
}
/* Under 900px the rail scrolls sideways (role names only) and the stage
   stacks: scene above, text below. */
@media (max-width:900px){
  .rsw-rail{display:flex;gap:6px;padding:8px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .rsw-rail::-webkit-scrollbar{display:none}
  .rsw-tab{flex:0 0 auto;width:auto;min-height:0;padding:11px 15px 13px;border-radius:999px;scroll-snap-align:center;white-space:nowrap}
  .rsw-progress{left:15px;right:15px;bottom:4px;border-radius:3px}
  .rsw-panel{grid-template-columns:minmax(0,1fr);gap:20px;padding:20px 20px 24px}
  .rsw-copy p{max-width:none}
  .rsw-copy h3{max-width:22ch}
}
@media (max-width:420px){
  .rsw-panel{padding:16px 16px 20px}
  .rsw-copy h3{font-size:20px}
  .rsw-copy p{font-size:15px}
  .rsw-chips{gap:6px}
  .rsw-chips i{padding:4px 9px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .rsw-panel{transform:none;transition:opacity .01s linear,visibility 0s}
  [data-role-switcher] .rsw-progress{animation:none!important}
}

/* == languages: flags without boxes 2026-09-14 == */
/* CPO: "bu bayraklara kutu çizme". Flag buttons lose card chrome; the active
   state lives on the flag art itself (sky ring + lift), label stays below. */
.llc-flag,.llc-flag.is-active,.llc-flag:hover{background:transparent;border:0;box-shadow:none;padding:4px 0 6px;transform:none}
.llc-flag .llc-flag-art{border-radius:8px;box-shadow:0 1px 2px rgba(1,24,56,.08),0 8px 18px -12px rgba(1,24,56,.35);transition:transform .18s ease,box-shadow .18s ease}
.llc-flag:hover .llc-flag-art{transform:translateY(-2px)}
.llc-flag.is-active .llc-flag-art{transform:translateY(-3px);box-shadow:0 0 0 2px var(--sky),0 10px 22px -12px rgba(1,24,56,.45)}
.llc-flag:focus-visible{outline:0}
.llc-flag:focus-visible .llc-flag-art{box-shadow:0 0 0 2px var(--sky),0 0 0 5px rgba(98,164,255,.25)}

/* == CPO pass 14 Sep 12:40: why-fail one screen, compare colours, switcher stage == */
/* why-fail: every description two lines, whole section fits one viewport at 1440 */
.whyfail{grid-template-columns:minmax(0,4.2fr) minmax(0,7.8fr);gap:20px;margin-bottom:22px}
.whyfail-source{gap:16px;padding:26px 26px 22px}
.whyfail-stat{gap:6px}
.whyfail-stat strong{font-size:clamp(40px,3.8vw,52px)}
.whyfail-stat span{font-size:15px;max-width:none}
.whyfail-quote{padding:14px 16px}
.whyfail-quote p{font-size:14px;line-height:1.5}
.whyfail-quote footer{margin-top:6px}
.whyfail-causes{gap:8px}
.whyfail-cause-chips b{font-size:12px;padding:4px 10px}
.whyfail-stat-sm{padding-top:14px;gap:12px;align-items:center}
.whyfail-stat-sm strong{font-size:28px}
.whyfail-stat-sm span{font-size:13.5px}
.whyfail-stat-sm em{display:inline;margin:0 0 0 6px}
.whyfail-links{padding-top:2px}
.whyfail-rows{gap:10px}
.whyfail-cause,.whyfail-answer{padding:18px 20px;gap:6px}
.whyfail-cause h3{font-size:17px}
.whyfail-cause p,.whyfail-answer p{font-size:14px;line-height:1.45}
.whyfail-answer strong{font-size:16.5px}
.whyfail-chips{margin-top:4px}
.whyfail-chips b{font-size:12px;padding:3px 9px}
.whyfail-proof{padding-top:6px;gap:5px}
.whyfail-proof b{font-size:9.5px;padding:3px 7px}
#why-fail .sec-head{margin-bottom:32px}

/* compare table: cross for the customer's side, big Dring wordmark, colour discipline */
.compare-row:not(.compare-head)>span:nth-child(2)::before{border:0;background:#FDECEC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D64545' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/52% no-repeat}
.compare-row:not(.compare-head)>span:nth-child(2){color:#6B7790}
.cmp-sub-you{background:#FDECEC;color:#B93838;border:1px solid #F3C4C4}
.compare-head>span:last-child{display:flex;align-items:center;gap:10px;padding-top:10px;padding-bottom:10px}
.cmp-brand{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:-.01em;text-transform:none;color:var(--navy);line-height:1}
.compare-head>span:first-child,.compare-row>span:first-child{color:#7B87A3}
.compare-head>span:nth-child(2){color:#7B87A3}
.compare-row:not(.compare-head)>span:first-child{color:#5B6785}
.compare-row:not(.compare-head)>span:last-child{background:linear-gradient(110deg,rgba(225,237,255,.85),rgba(242,247,255,.98))}
.compare-final>span:last-child{background:linear-gradient(110deg,rgba(205,225,255,.95),rgba(232,242,255,.98))}
@media (max-width:700px){.cmp-brand{font-size:16px}.compare-head>span:last-child{display:block}}

/* role switcher: header stacked, navy stage so the scenes stand out */
#for-your-role .sec-head{grid-template-columns:1fr;gap:14px;margin-bottom:36px}
#for-your-role .sec-head .lede{max-width:64ch}
.rsw-scene{border:0;padding:14px;background:linear-gradient(160deg,#0B2A57 0%,#011838 75%);border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.rsw-scene svg{display:block;background:#fff;border-radius:12px;box-shadow:0 12px 30px -18px rgba(0,0,0,.6)}
@media (max-width:700px){.rsw-scene{padding:10px}}
#why-fail .sec-head{margin-bottom:26px}
#why-fail .sec-head .lede{font-size:17px}

/* == role switcher: dark frame 2026-09-14 15:30 == */
/* CPO: "beyazlığı koyu renge al, seçilen yeri de". Whole switcher goes navy; the
   scene keeps its white inner card so the illustrations pop; copy turns light. */
.role-switcher{border:0;background:linear-gradient(160deg,#0B2A57 0%,#011838 70%);box-shadow:0 1px 2px rgba(1,24,56,.08),0 34px 80px -34px rgba(1,24,56,.55)}
.role-switcher .rsw-rail{background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.1)}
.role-switcher .rsw-tab{color:#9FB6DE}
.role-switcher .rsw-tab:hover{background:rgba(255,255,255,.06);color:#fff}
.role-switcher .rsw-tab.is-on,.role-switcher .rsw-tab.is-on:hover{background:rgba(255,255,255,.1);color:#fff}
.role-switcher .rsw-progress{background:var(--sky)}
.role-switcher .rsw-scene{background:transparent;padding:0;border-radius:14px;box-shadow:none}
.role-switcher .rsw-scene svg{border-radius:14px;box-shadow:0 18px 40px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
.role-switcher .rsw-eyebrow{color:#8FB4EE}
.role-switcher .rsw-copy h3{color:#fff}
.role-switcher .rsw-copy p{color:#C9D8F2}
.role-switcher .rsw-chips i{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);color:#EEF4FF}
.role-switcher .rsw-copy .link-arrow{color:#BFD6FF}
.role-switcher .rsw-copy .link-arrow:hover{color:#fff}

/* == persona pages v2 2026-09-14 == */
/* One shared system for the six "For your role" pages (call centre managers is
   the pilot; marketing leaders, sales managers, operations leaders, IT
   directors and founders reuse these classes and swap only copy and scenes).
   Every selector is prefixed pp-; nothing above this block is modified. The
   two exceptions scope an existing generated class inside a pp- ancestor:
   .pp-hero .hero-card (build.py emits the hero aside) and .pp-cta .art (the
   CTA sphere canvas, replaced here by the page's own scene fragment).
   Palette: navy #011838, sky #62A4FF, tint #E8F0FF, one green var(--green),
   one pain red #D64545. Mono labels are JetBrains Mono 11px. */

/* --- hero: copy left, a large scene on a navy plate right ---------------- */
.pp-hero{padding:52px 0 44px}
.pp-hero .wrap{grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:52px;align-items:center}
.pp-hero .h1{max-width:15ch}
.pp-hero .hero-card{max-width:600px;padding:14px;border-radius:22px;background:linear-gradient(160deg,#0B2A57 0%,#011838 70%);box-shadow:0 1px 2px rgba(1,24,56,.08),0 34px 80px -34px rgba(1,24,56,.55)}
.pp-hero .hero-card svg{display:block;width:100%;height:auto;background:#fff;border-radius:14px;box-shadow:0 18px 40px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.08)}
@media (max-width:1100px){.pp-hero .wrap{gap:36px}}
@media (max-width:900px){.pp-hero .wrap{grid-template-columns:1fr}.pp-hero .hero-card{max-width:none;padding:10px}}

/* team & about heroes: no navy plate behind the drawing, it sits directly on
   the page ground. The 8 "for your role" pages keep the plate above, their
   scenes are designed for it. */
body[data-page="team"] .pp-hero .hero-card,body[data-page="about"] .pp-hero .hero-card{padding:0;border-radius:0;background:none;box-shadow:none}
body[data-page="team"] .pp-hero .hero-card svg,body[data-page="about"] .pp-hero .hero-card svg{background:none;border-radius:0;box-shadow:none}

/* --- proof strip: four approved figures, sitting under the hero ---------- */
.pp-strip-sec{padding:4px 0 40px}
.pp-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow);overflow:hidden}
.pp-strip-cell{padding:22px 24px;border-left:1px solid var(--line);min-width:0}
.pp-strip-cell:first-child{border-left:0}
.pp-strip-cell::before{content:"";display:block;width:26px;height:3px;border-radius:2px;background:var(--sky);margin-bottom:14px}
.pp-strip-cell strong{display:block;font-family:var(--display);font-size:clamp(26px,2.6vw,36px);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pp-strip-cell span{display:block;margin-top:9px;color:var(--muted);font-size:13.5px;line-height:1.45}
.pp-strip-note{margin-top:12px;font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--muted)}
@media (max-width:900px){
  .pp-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pp-strip-cell:nth-child(odd){border-left:0}
  .pp-strip-cell:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:560px){
  .pp-strip{grid-template-columns:1fr}
  .pp-strip-cell{border-left:0}
  .pp-strip-cell+.pp-strip-cell{border-top:1px solid var(--line)}
}

/* --- the shift without Dring: three pain moments on one horizontal rail --- */
.pp-shift{list-style:none;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding-top:46px}
.pp-shift::before{content:"";position:absolute;top:7px;left:0;right:0;height:2px;border-radius:1px;background:linear-gradient(90deg,var(--line-strong),#EBCBCB)}
.pp-shift-item{position:relative;min-width:0}
.pp-shift-item::before{content:"";position:absolute;top:-46px;left:0;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--line-strong)}
.pp-shift-item:last-child::before{border-color:#D64545}
.pp-shift-time{position:absolute;top:-22px;left:0;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--muted)}
.pp-shift-item:last-child .pp-shift-time{color:#B93838}
.pp-shift-scene{border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,#FFFFFF,#F8FBFF);padding:10px;overflow:hidden}
.pp-shift-scene svg{display:block;width:100%;height:auto}
.pp-shift-body{margin-top:18px}
.pp-shift-body h3{font-size:20px;font-weight:600;line-height:1.2;color:var(--ink)}
.pp-shift-body p{margin-top:8px;color:var(--muted);font-size:14.5px;line-height:1.55}
@media (max-width:860px){
  .pp-shift{grid-template-columns:1fr;gap:34px;padding-top:0}
  .pp-shift::before{display:none}
  .pp-shift-item{padding-top:34px;border-top:2px solid var(--line-strong)}
  .pp-shift-item:last-child{border-top-color:#D64545}
  .pp-shift-item::before{display:none}
  .pp-shift-time{top:12px}
}

/* --- panel mock: the screen this role actually watches ------------------- */
.pp-panel{border:1px solid var(--line-strong);border-radius:20px;background:#fff;box-shadow:var(--shadow);overflow:hidden}
.pp-panel-bar{display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid var(--line);background:var(--bg-soft)}
.pp-panel-dots{display:flex;gap:6px;flex:none}
.pp-panel-dots i{width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
.pp-panel-name{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pp-panel-live{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--sky-text);white-space:nowrap}
.pp-panel-live i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(22,163,74,.16)}
.pp-panel-body{display:grid;grid-template-columns:minmax(150px,188px) minmax(0,1fr)}
.pp-panel-nav{display:flex;flex-direction:column;gap:2px;padding:16px 12px;background:linear-gradient(180deg,#0B2A57 0%,#011838 85%)}
.pp-panel-nav span{padding:9px 12px;border-radius:9px;font-size:13px;font-weight:500;color:#9FB6DE;white-space:nowrap}
.pp-panel-nav span.is-on{background:rgba(255,255,255,.12);color:#fff}
.pp-panel-main{display:grid;gap:18px;padding:20px 22px 24px;min-width:0}
.pp-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pp-kpi{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--bg-soft);min-width:0}
.pp-kpi b{display:block;font-family:var(--display);font-size:clamp(24px,2.4vw,32px);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.pp-kpi span{display:block;margin-top:8px;color:var(--muted);font-size:12.5px;line-height:1.45}
.pp-queue{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.pp-queue-head{display:flex;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--tint);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--sky-text)}
.pp-queue-row{display:grid;grid-template-columns:9px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid var(--line);font-size:13.5px}
.pp-queue-head+.pp-queue-row{border-top:0}
.pp-queue-what{color:var(--ink);font-weight:500;min-width:0;overflow-wrap:anywhere}
.pp-queue-meta{font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.pp-queue-state{padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--bg-soft);font-size:12px;color:var(--muted);white-space:nowrap}
.pp-dot{display:block;width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
.pp-dot-live{background:var(--sky);box-shadow:0 0 0 3px rgba(98,164,255,.2);animation:pp-pulse 2s ease-in-out infinite}
.pp-dot-ok{background:var(--green)}
.pp-dot-warn{background:#E5A13A}
@keyframes pp-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.pp-meter{padding:14px 16px 16px;border:1px solid var(--line);border-radius:14px}
.pp-meter-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pp-meter-head b{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--green)}
.pp-meter-track{margin-top:12px;height:10px;border-radius:5px;background:var(--tint);overflow:hidden}
.pp-meter-fill{display:block;width:76%;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--sky),var(--sky-deep))}
.pp-panel.in .pp-meter-fill{animation:pp-fill 1.1s cubic-bezier(.4,0,.2,1) both}
@keyframes pp-fill{from{width:0}to{width:76%}}
.pp-meter-foot{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pp-meter-foot span{display:inline-flex;align-items:center;gap:7px}
.pp-meter-foot span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sky)}
.pp-panel-note{margin-top:14px;font-family:var(--mono);font-size:13px;letter-spacing:.02em;color:var(--muted)}
@media (max-width:860px){
  .pp-panel-body{grid-template-columns:1fr}
  .pp-panel-nav{flex-direction:row;gap:6px;padding:10px;overflow-x:auto;scrollbar-width:none}
  .pp-panel-nav::-webkit-scrollbar{display:none}
  .pp-panel-nav span{flex:0 0 auto}
  .pp-panel-main{padding:16px}
  .pp-kpis{grid-template-columns:1fr}
  .pp-queue-row{grid-template-columns:9px minmax(0,1fr);row-gap:7px}
  .pp-queue-meta,.pp-queue-state{grid-column:2;justify-self:start}
}

/* --- one large case card: situation, what Dring did, what changed -------- */
/* Replaces the old link-card version of .pp-case (and the #compare footer
   links, both deleted 14 Sep with the sections they belonged to). The card is
   an <article>, not a link: the title block and the role-specific scene sit
   on one top row, the three named parts run as columns underneath, and a
   single .link-arrow closes it. */
.pp-case{padding:30px 34px 26px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:var(--shadow)}
.pp-case-top{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:28px;align-items:center}
.pp-case-title{min-width:0}
.pp-case-tag{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--sky-text)}
.pp-case-title h3{margin-top:10px;font-family:var(--display);font-size:clamp(21px,2.2vw,28px);font-weight:600;line-height:1.2;letter-spacing:-.02em;color:var(--ink)}
.pp-case-scene{display:block;width:240px;max-width:100%;justify-self:end}
.pp-case-scene svg{display:block;width:100%;height:auto}
.pp-case-parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.pp-case-part{min-width:0}
.pp-case-part h4{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:400}
.pp-case-part p{margin-top:10px;color:var(--ink-2);font-size:14.5px;line-height:1.6}
.pp-case>.link-arrow{margin-top:24px;font-size:14px}
@media (max-width:860px){
  .pp-case{padding:24px 22px 22px}
  .pp-case-top{grid-template-columns:1fr;gap:18px}
  .pp-case-scene{width:200px;justify-self:start}
  .pp-case-parts{grid-template-columns:1fr;gap:20px}
}

/* --- closing band: one line, one button, one small roles link ------------ */
.pp-cta-link{color:#BFD6FF;font-size:14px;font-weight:600}
.pp-cta-link:hover{color:#fff}
.pp-cta .art{display:none}
.pp-cta .wrap{justify-items:stretch}
.pp-cta-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;align-items:center;width:100%}
.pp-cta-copy{display:grid;gap:24px;justify-items:start}
.pp-cta-copy .h2{max-width:24ch}
.pp-cta-scene{width:240px;max-width:100%}
.pp-cta-scene svg{display:block;width:100%;height:auto}
@media (max-width:860px){.pp-cta-row{grid-template-columns:1fr;gap:28px}}

@media (prefers-reduced-motion:reduce){
  .pp-dot-live{animation:none}
  .pp-panel.in .pp-meter-fill{animation:none}
  .pp-case,.pp-case:hover{transform:none;transition:none}
}

/* == why-fail: breathing room (CPO "çok sıkışık", 14 Sep 16:10) == */
.whyfail{gap:24px}
.whyfail-source{gap:20px;padding:30px 30px 26px}
.whyfail-stat{gap:8px}
.whyfail-stat span{font-size:15.5px;line-height:1.5}
.whyfail-quote{padding:16px 18px}
.whyfail-quote p{font-size:14.5px;line-height:1.55}
.whyfail-quote footer{margin-top:8px}
.whyfail-causes{gap:10px}
.whyfail-cause-chips{gap:8px}
.whyfail-cause-chips b{padding:5px 11px}
.whyfail-stat-sm{padding-top:18px;gap:14px}
.whyfail-links{padding-top:8px;gap:8px 22px}
.whyfail-rows{gap:14px}
.whyfail-cause,.whyfail-answer{padding:22px 24px;gap:9px}
.whyfail-cause h3{font-size:17.5px;line-height:1.3}
.whyfail-cause p,.whyfail-answer p{font-size:14.5px;line-height:1.5}
.whyfail-answer strong{font-size:17px;line-height:1.3;margin-bottom:2px}
.whyfail-chips{margin-top:8px;gap:8px}
.whyfail-chips b{padding:4px 10px}
.whyfail-proof{padding-top:12px;gap:7px}
.whyfail-proof b{padding:4px 9px;font-size:10px}
#why-fail .sec-head{margin-bottom:34px}

/* == roles dropdown: narrow panel 2026-09-14 == */
/* CPO: six rows do not need a mega panel. Intro on the left, one column of roles on the right. */
.dd.dd-roles{width:min(760px,calc(100vw - 48px));grid-template-columns:250px minmax(0,1fr);gap:20px;padding:18px}
.dd.dd-roles .dd-intro{padding:20px}
.dd.dd-roles .dd-intro-h{font-size:20px;line-height:1.2}
.dd.dd-roles .dd-groups{grid-template-columns:1fr;row-gap:0}
.dd.dd-roles .dd-rows{display:flex;flex-direction:column;gap:2px}
.dd.dd-roles .dd-row{padding:9px 12px}
.dd.dd-roles .dd-row b{font-size:14.5px}
.dd.dd-roles .dd-row span:last-child{font-size:12.5px}
@media (max-width:900px){.dd.dd-roles{grid-template-columns:1fr}}

/* == why-fail v2: horizontal Gartner band + three columns (CPO "sığmıyor", 14 Sep) == */
.whyfail2{display:flex;flex-direction:column;gap:18px;margin-bottom:26px}
.wf-band{position:relative;display:grid;grid-template-columns:172px minmax(0,.9fr) minmax(0,1.35fr) minmax(0,1.1fr);gap:26px;align-items:start;padding:24px 28px 20px;border-radius:20px;background:linear-gradient(120deg,#0B2A57 0%,#011838 75%);color:#fff;box-shadow:var(--shadow);overflow:hidden}
.wf-band::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse at 10% 0%,#000 25%,transparent 70%);pointer-events:none}
.wf-band>*{position:relative;min-width:0}
.wf-brand{display:flex;flex-direction:column;gap:10px}
.wf-logo{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 18px;border-radius:10px;background:#fff;color:#002856;font-family:var(--body);font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1;width:max-content}
.wf-src{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#8FB4EE;line-height:1.5}
.wf-stat{display:flex;flex-direction:column;gap:6px}
.wf-stat strong{font-family:var(--display);font-size:clamp(36px,3.4vw,46px);font-weight:600;line-height:1;letter-spacing:-.01em;color:var(--sky);white-space:nowrap}
.wf-stat span{font-size:14px;line-height:1.45;color:#DCE7FA}
.wf-quote{margin:0;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.wf-quote p{margin:0;font-size:13.5px;line-height:1.5;color:#EEF4FF}
.wf-quote p::before{content:"\201C";color:var(--sky)}
.wf-quote p::after{content:"\201D";color:var(--sky)}
.wf-quote footer{margin-top:6px;font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:#8FB4EE}
.wf-causes{display:flex;flex-direction:column;gap:8px}
.wf-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.wf-causes .wf-lbl{color:#8FB4EE}
.wf-cause-chips{display:flex;flex-wrap:wrap;gap:6px}
.wf-cause-chips b{font-weight:600;font-size:12px;color:#fff;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:4px 10px;white-space:nowrap}
.wf-second{font-size:12.5px;line-height:1.45;color:#BFD0EC;padding-top:6px;border-top:1px solid rgba(255,255,255,.12)}
.wf-second strong{font-family:var(--display);font-size:16px;color:var(--sky);margin-right:4px}
.wf-links{grid-column:1/-1;display:flex;gap:18px;padding-top:10px;border-top:1px solid rgba(255,255,255,.1)}
.wf-links a{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:#BFD6FF;text-decoration:none;border-bottom:1px solid rgba(191,214,255,.35);padding-bottom:1px}
.wf-links a:hover{color:#fff;border-color:#fff}
.wf-cols{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:wf}
.wf-col{counter-increment:wf;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(1,24,56,.04);transition:border-color .25s,box-shadow .25s,transform .25s}
.wf-col:hover{border-color:#C9DAF7;box-shadow:var(--shadow);transform:translateY(-2px)}
.wf-cause,.wf-answer{padding:20px 22px;display:flex;flex-direction:column;gap:8px}
.wf-cause{background:var(--tint);position:relative;border-bottom:1px solid var(--line);min-height:168px}
.wf-cause::before{content:"0" counter(wf);position:absolute;top:18px;right:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--sky-text);border:1px solid #C9DAF7;border-radius:999px;padding:3px 8px;background:#fff}
.wf-cause h3{font-size:17px;font-weight:600;line-height:1.3;margin:0;padding-right:52px}
.wf-cause p,.wf-answer p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.5}
.wf-term{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:auto;padding-top:6px}
.wf-term i{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.wf-term b{font-weight:600;font-size:12px;color:var(--navy);background:#fff;border:1px solid #C9DAF7;border-radius:999px;padding:3px 9px}
.wf-term b::before{content:"\201C";color:var(--sky-text)}
.wf-term b::after{content:"\201D";color:var(--sky-text)}
.wf-answer{flex:1}
.wf-answer .wf-lbl{color:var(--sky-text)}
.wf-answer strong{display:block;position:relative;padding-left:26px;font-family:var(--display);font-size:16.5px;font-weight:600;line-height:1.3;color:var(--navy)}
.wf-answer strong::before{content:"";position:absolute;left:0;top:2px;width:17px;height:17px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat}
.wf-answer p{padding-left:26px}
.wf-proof{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding:10px 0 0 26px}
.wf-proof b{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--sky-text);background:#EEF4FF;border:1px solid #D6E4FB;border-radius:999px;padding:3px 8px;white-space:nowrap}
#why-fail .sec-head{margin-bottom:30px}
@media (max-width:1100px){.wf-band{grid-template-columns:1fr 1fr}.wf-links{grid-column:1/-1}.wf-cols{grid-template-columns:1fr}}
@media (max-width:700px){.wf-band{grid-template-columns:1fr;padding:22px 20px 18px}.wf-cause{min-height:0}.wf-answer p,.wf-proof{padding-left:0}}
/* why-fail v2: fit one MacBook Air screen (14 Sep 18:10) */
#why-fail.sec{padding:64px 0 72px}
#why-fail .sec-head{margin-bottom:26px}
#why-fail .sec-head .lede{max-width:44ch}
.wf-band{grid-template-columns:168px minmax(0,.85fr) minmax(0,1.25fr) minmax(0,1.15fr);gap:22px;padding:20px 24px 18px;align-items:stretch}
.wf-brand{justify-content:space-between}
.wf-links{grid-column:auto;display:flex;flex-direction:column;gap:6px;padding-top:0;border-top:0}
.wf-links a{width:max-content}
.wf-logo{height:40px;font-size:21px}
.wf-stat strong{font-size:clamp(34px,3vw,42px)}
.wf-stat span{font-size:13.5px}
.wf-quote{padding:12px 14px;align-self:start}
.wf-quote p{font-size:13.5px;line-height:1.45}
.wf-second{font-size:12px}
.wf-cause{min-height:0}
.wf-cause,.wf-answer{padding:18px 20px;gap:7px}
.wf-cause h3{font-size:16.5px}
.wf-cause p,.wf-answer p{font-size:13.5px;line-height:1.45}
.wf-answer strong{font-size:16px}
.wf-term{padding-top:4px}
.wf-proof{padding-top:8px}
.whyfail2{gap:16px;margin-bottom:20px}
@media (max-width:1100px){.wf-links{flex-direction:row;gap:16px}}

/* == why-fail v4: column headers once (not per row), one Gartner term per row instead of the plate's repeated causes list, tighter card and rows (15 Sep) == */
#why-fail.sec{padding:52px 0 56px}
#why-fail .sec-head{margin-bottom:22px}
.wfv{display:grid;grid-template-columns:minmax(0,4.3fr) minmax(0,7.7fr);gap:22px;align-items:stretch;margin-bottom:24px}
.wfv-plate{position:relative;display:flex;flex-direction:column;gap:14px;padding:22px 24px 20px;justify-content:space-between;border-radius:20px;background:linear-gradient(160deg,#0B2A57 0%,#011838 70%);color:#fff;box-shadow:var(--shadow);overflow:hidden}
.wfv-plate::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:32px 32px;mask-image:radial-gradient(ellipse at 20% 0%,#000 30%,transparent 75%);pointer-events:none}
.wfv-plate>*{position:relative;margin:0}
.wfv-brand{display:flex;align-items:center;gap:12px;flex-wrap:nowrap;opacity:.85}
.wfv-logo{display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:8px;background:#fff;color:#002856;font-family:var(--body);font-weight:800;font-size:15px;letter-spacing:-.02em;line-height:1}
.wfv-src{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#7FA0D2;line-height:1.4;min-width:0}
.wfv-stat{display:flex;flex-direction:column;gap:6px}
.wfv-stat strong{font-family:var(--display);font-size:clamp(44px,3.9vw,54px);font-weight:600;line-height:1;letter-spacing:-.01em;color:var(--sky)}
.wfv-stat span{font-size:15px;line-height:1.45;color:#DCE7FA}
.wfv-quote{padding:14px 16px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.wfv-quote p{margin:0;font-size:14px;line-height:1.5;color:#EEF4FF}
.wfv-quote p::before{content:"\201C";color:var(--sky)}
.wfv-quote p::after{content:"\201D";color:var(--sky)}
.wfv-quote footer{margin-top:8px;font-family:var(--mono);font-size:12px;letter-spacing:.02em;line-height:1.45;color:#8FB4EE}
.wfv-second{display:flex;align-items:baseline;gap:10px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);font-size:14px;line-height:1.45;color:#BFD0EC}
.wfv-second strong{font-family:var(--display);font-size:28px;line-height:1;color:var(--sky);flex:none}
.wfv-links{display:flex;flex-wrap:wrap;gap:6px 18px}
.wfv-links a{font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:#BFD6FF;text-decoration:none;border-bottom:1px solid rgba(191,214,255,.35);padding-bottom:1px}
.wfv-links a:hover{color:#fff;border-color:#fff}
.wfv-right{display:flex;flex-direction:column;gap:10px;min-width:0}
.wfv-col-heads{display:flex;gap:16px;padding:0 20px}
.wfv-col-heads span{flex:1;font-family:var(--mono);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.wfv-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.wfv-row{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(1,24,56,.04);transition:border-color .25s,box-shadow .25s,transform .25s}
.wfv-row:hover{border-color:#C9DAF7;box-shadow:var(--shadow);transform:translateY(-2px)}
.wfv-cause,.wfv-answer{padding:16px 20px 14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.wfv-cause{background:var(--tint);position:relative;border-right:1px solid var(--line)}
.wfv-num{position:absolute;top:15px;right:18px;font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--sky-text);border:1px solid #C9DAF7;border-radius:999px;padding:2px 8px;background:#fff}
.wfv-cause h3{position:relative;font-size:17px;font-weight:600;line-height:1.3;margin:0;padding-right:46px;padding-left:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wfv-cause h3 .wfv-x-icon{position:absolute;left:0;top:2px;width:17px;height:17px;border-radius:50%;background:#D64545}
.wfv-cause p,.wfv-answer p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wfv-term{margin-top:auto;padding-top:6px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.wfv-term b{font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:0;text-transform:none;color:var(--navy)}
.wfv-term b::before{content:"\201C";color:var(--sky-text)}
.wfv-term b::after{content:"\201D";color:var(--sky-text)}
.wfv-answer strong{display:block;position:relative;padding-left:26px;font-family:var(--display);font-size:16.5px;font-weight:600;line-height:1.3;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wfv-answer strong::before{content:"";position:absolute;left:0;top:2px;width:17px;height:17px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3 3 7-7' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat}
.wfv-answer p{padding-left:26px;color:var(--ink)}
.wfv-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding:6px 0 0 26px}
.wfv-tags b{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--sky-text);background:#EEF4FF;border:1px solid #D6E4FB;border-radius:999px;padding:3px 9px;white-space:nowrap}
@media (max-width:1100px){.wfv{grid-template-columns:1fr}}
@media (max-width:700px){.wfv-row{grid-template-columns:1fr}.wfv-cause{border-right:0;border-bottom:1px solid var(--line)}.wfv-cause,.wfv-answer{padding:18px}.wfv-cause h3,.wfv-answer strong{white-space:normal}.wfv-cause p,.wfv-answer p{-webkit-line-clamp:unset;display:block}.wfv-answer p,.wfv-tags{padding-left:0}.wfv-col-heads{padding:0 4px}.wfv-src{white-space:normal}}

/* == persona CTA band: scene as a framed card, band fills (CPO 14 Sep 19:05) == */
.cta-band.pp-cta{padding:76px 0}
.pp-cta-row{grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);gap:48px;align-items:center}
.pp-cta-scene{width:100%;max-width:520px;justify-self:end;padding:30px 34px;border-radius:20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 60px -40px rgba(0,0,0,.6);position:relative}
.pp-cta-scene::before{content:"";position:absolute;inset:0;border-radius:inherit;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:28px 28px;mask-image:radial-gradient(ellipse at 50% 50%,#000 40%,transparent 85%);pointer-events:none}
.pp-cta-scene svg{position:relative;width:100%;height:auto}
@media (max-width:860px){.pp-cta-scene{justify-self:stretch;max-width:none;padding:22px}}
/* persona CTA band: full-width row (the default .cta-band .wrap is a single narrow column) */
.cta-band.pp-cta .wrap{grid-template-columns:minmax(0,1fr);max-width:var(--max)}
.pp-cta-row{width:100%;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr)}
.pp-cta-copy .h2{max-width:22ch}
.cta-band.pp-cta .wrap{padding-right:28px}
@media (max-width:860px){.pp-cta-row{grid-template-columns:minmax(0,1fr);gap:28px}.pp-cta-scene{justify-self:stretch;max-width:none}}

/* == product pages 2026-09-14 == */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tier-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tier-table{min-width:780px}
.tier-row{display:grid;grid-template-columns:minmax(158px,1.35fr) repeat(5,minmax(0,1fr));border-top:1px solid var(--line)}
.tier-row:first-child{border-top:0}
.tier-row>span{padding:13px 14px;color:var(--muted);font-size:13px;line-height:1.42;text-align:center}
.tier-row>span+span{border-left:1px solid var(--line)}
.tier-row>span:first-child{text-align:left;font:500 10px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--sky-text)}
.tier-head{background:var(--bg-soft)}
.tier-head>span{padding-top:14px;padding-bottom:14px;font:500 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tier-yes{display:inline-block;width:19px;height:19px;border-radius:50%;background:var(--green);color:#fff;font:700 10px/19px var(--body)}
.std-list,.six-list{list-style:none;margin:6px 0 0;padding:0}
.std-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 34px}
/* An odd item count leaves one row with a single entry; let it span both
   columns instead of sitting alone on the left (it's a text row, not a
   card, so a full-width row reads fine, no centring needed). */
.std-list:has(>:nth-child(2n+1):last-child)>:last-child{grid-column:1/-1}
.std-list li{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-top:1px solid var(--line);color:var(--ink-2);font-size:14px;line-height:1.45}
.std-list li .li-tick{flex:0 0 auto;margin-top:3px;color:var(--green)}
.six-list li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:start;padding:14px 0;border-top:1px solid var(--line)}
.six-list li>svg{margin-top:2px;color:var(--sky-text)}
.six-list b{display:block;margin-bottom:3px;color:var(--ink);font-weight:600;font-size:15px}
.six-list span{color:var(--muted);font-size:14px;line-height:1.45}
/* pricing #support "Service levels by risk": three equal cards in the .card style of
   the neighboring pricing sections instead of a bare full-width list (26 Sep) */
.six-list.risk-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px;align-items:stretch}
.six-list.risk-cards li{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0;padding:26px;border:1px solid var(--line);border-radius:var(--r);background:#fff;transition:border-color .25s,transform .25s,box-shadow .25s}
.six-list.risk-cards li:hover{border-color:var(--line-strong);transform:translateY(-3px);box-shadow:var(--shadow)}
.six-list.risk-cards li>svg{box-sizing:content-box;flex:none;width:20px;height:20px;margin:0;padding:11px;border-radius:12px;background:var(--tint);color:var(--sky-text)}
.six-list.risk-cards b{margin-bottom:8px;font-size:19px;line-height:1.25}
.six-list.risk-cards span{color:var(--ink-2);font-size:15px;line-height:1.55}
@media (max-width:700px){.six-list.risk-cards{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.std-list{grid-template-columns:1fr}}

/* == partner responsibility matrix chips 2026-09-14 == */
.own{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;font-weight:600}
.own::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.own-dring{background:var(--navy);color:#fff}
.own-partner{background:#EEF4FF;color:var(--sky-text);border:1px solid #C9DAF7}

/* empty areas 2026-09-15 */
.cta-band.cta-icon .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:40px}
.cta-band.cta-icon .cta-copy{display:grid;gap:22px;justify-items:start;min-width:0}
.cta-icon-badge{width:104px;height:104px;flex:0 0 auto;border-radius:26px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;position:relative}
.cta-icon-badge::before{content:"";position:absolute;inset:-14px;border-radius:32px;background:radial-gradient(circle,rgba(98,164,255,.22),transparent 70%);pointer-events:none}
.cta-icon-badge svg{width:56px;height:56px;position:relative}
@media (max-width:760px){.cta-band.cta-icon .wrap{grid-template-columns:minmax(0,1fr)}.cta-icon-badge{display:none}}

.punch.punch-ico{grid-template-columns:repeat(4,1fr)}
.punch.punch-ico>div{display:flex;gap:12px;align-items:flex-start}
.punch.punch-ico svg{flex:0 0 auto;width:20px;height:20px;margin-top:1px;color:var(--sky-text)}
@media (max-width:860px){.punch.punch-ico>div{align-items:center}}

.stats.stats-ico .stat{display:flex;flex-direction:column;gap:2px}
.stats.stats-ico .stat-ico{width:26px;height:26px;color:var(--sky-text);margin-bottom:6px}

.card-link.card-ico{gap:14px}
.card-link .card-ico-wrap{width:44px;height:44px;border-radius:12px;background:var(--bg-soft);display:grid;place-items:center;color:var(--sky-text)}
.card-link .card-ico-wrap svg{width:24px;height:24px}

.journal-feature{display:grid;grid-template-columns:minmax(240px,340px) minmax(0,1fr);gap:0;align-items:stretch;max-width:820px}
.journal-feature .card-img{width:100%;height:100%;min-height:180px;margin:0;border-radius:var(--r) 0 0 var(--r);object-fit:cover}
.journal-feature .jf-body{padding:26px 28px;display:flex;flex-direction:column;gap:10px;justify-content:center;border:1px solid var(--line);border-left:0;border-radius:0 var(--r) var(--r) 0}
@media (max-width:700px){.journal-feature{grid-template-columns:1fr}.journal-feature .card-img{border-radius:var(--r) var(--r) 0 0;height:150px}.journal-feature .jf-body{border-left:1px solid var(--line);border-top:0;border-radius:0 0 var(--r) var(--r)}}

.hero-scheme{margin-top:28px;display:flex;align-items:center;gap:14px;max-width:560px}
.hero-scheme svg{width:100%;height:auto;max-width:520px}

/* packaging pages 2026-09-15 */
.rel-links{display:flex;flex-wrap:wrap;gap:24px;margin-top:22px}

/* technology menu intro art 2026-09-15 */
.dd-intro-art{width:100%;height:auto;display:block;margin:18px 0 6px}
.dd-intro .dd-intro-art + .dd-intro-link{margin-top:auto}

/* partner programme 2026-09-15 */
.resp-grid{min-width:660px;display:flex;flex-direction:column}
.resp-row{display:grid;grid-template-columns:minmax(180px,1.5fr) repeat(4,minmax(0,1fr));gap:8px;align-items:center;padding:13px 18px;border-top:1px solid var(--line)}
.resp-row:first-child{border-top:0}
.resp-head{background:var(--bg-soft);font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.resp-label{font-weight:600;color:var(--ink);font-size:14.5px}
.resp-row .own{justify-self:start}

/* menu intro art 2026-09-15 */
.dd-industries .dd-intro .dd-intro-art + .dd-intro-link{margin-top:0}
.dd.dd-roles .dd-intro .dd-intro-art + .dd-intro-link{margin-top:auto}

/* empty areas 2026-09-15 (punch band icons, related/stat icons) */
.punch.punch-num{counter-reset:punch-i}
.punch.punch-num>div{counter-increment:punch-i;display:flex;gap:12px;align-items:flex-start}
.punch.punch-num>div::before{content:counter(punch-i);flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--tint);color:var(--sky-text);font:700 12px var(--mono);display:flex;align-items:center;justify-content:center;margin-top:1px}
@media (max-width:860px){.punch.punch-num>div{align-items:center}}

.stat.stat-ico{position:relative}
.stat.stat-ico .stat-ico-svg{display:block;width:24px;height:24px;color:var(--sky-text);margin-bottom:8px}

.card-link.card-cover{gap:0;padding:0;overflow:hidden}
.card-link.card-cover .cc-cover{width:100%;height:86px;display:flex;align-items:center;justify-content:center;background:var(--bg-soft);color:var(--sky-text)}
.card-link.card-cover .cc-cover svg{width:34px;height:34px}
.card-link.card-cover .cc-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:10px}

/* customers single page 2026-09-15 */
.case-jumprail{position:sticky;top:73px;z-index:40;display:flex;gap:8px;overflow-x:auto;padding:12px 0;margin:0 0 28px;background:var(--bg);border-bottom:1px solid var(--line);scrollbar-width:none}
.case-jumprail::-webkit-scrollbar{display:none}
.case-jumprail a{flex:0 0 auto;display:flex;flex-direction:column;gap:2px;padding:9px 16px;border-radius:14px;border:1px solid var(--line-strong);background:#fff;text-decoration:none;white-space:nowrap;color:var(--ink);transition:border-color .2s,background .2s}
.case-jumprail a:hover{border-color:var(--sky-text);background:var(--tint)}
.case-jumprail a b{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--sky-text);font-weight:600}
.case-jumprail a span{font-size:13px;color:var(--muted)}
.case-art{max-width:320px;margin:4px auto 28px}
.case-art svg{width:100%;height:auto;display:block}
@media (max-width:640px){.case-jumprail{top:0}}
/* customers: "What we learned" text left, workflow demo card right (2026-09-26).
   32px above = the sibling-block rhythm (.table-wrap + block); rows auto/1fr so a
   taller card grows the paragraph row, never the eyebrow row. */
.wrap > .case-learned{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:56px;row-gap:14px;align-items:start;margin-top:32px}
.case-learned>.sec-head{grid-column:1;grid-row:1;display:block;margin:0}
.case-learned>p{grid-column:1;grid-row:2}
.case-learned>.voices,.case-learned>.voices:has(.v:only-child){grid-column:2;grid-row:1/span 2;grid-template-columns:minmax(0,1fr)}
@media (max-width:900px){.wrap > .case-learned{column-gap:32px}}
@media (max-width:700px){.wrap > .case-learned{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}.case-learned>.voices,.case-learned>.voices:has(.v:only-child){grid-column:1;grid-row:3;margin-top:14px}}

/* ---------- surface manager ---------- */
/* Cookie modal (footer.html): aria-modal="true" now actually behaves like
   one, body scroll locked while it's open. The class itself is already
   toggled by setupPrivacyChoices() in site.js; this is the missing rule. */
body.cookie-modal-open{overflow:hidden}

/* Persona strip: a small, non-modal card, not a popup. No backdrop, no
   scroll lock, no focus steal. Same corner and safe-area handling as
   .timed-cta below it in the surface stack, same "sit above .mob-cta on
   mobile" trick (bottom:max(82px,...)). Motion: 220ms in, 160ms out,
   translateY + opacity only, cubic-bezier(.16,1,.3,1); no bounce/scale. */
.persona-strip{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:86;width:min(360px,calc(100vw - 32px));max-height:calc(100dvh - 32px);opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .22s cubic-bezier(.16,1,.3,1),transform .22s cubic-bezier(.16,1,.3,1)}
.persona-strip.show{opacity:1;transform:none;pointer-events:auto}
.persona-strip.hiding{transition:opacity .16s cubic-bezier(.16,1,.3,1),transform .16s cubic-bezier(.16,1,.3,1);opacity:0;transform:translateY(6px)}
/* 8 chips (see persona_chip_1..8 in header.html): flex-wrap already keeps
   them off the horizontal edge at any width; max-height + overflow on the
   card itself is the backstop so a short viewport (landscape phone, a
   browser zoomed in) gets an internal scroll on the chip list instead of
   the whole card growing tall enough to cover page content. */
.persona-strip-card{position:relative;max-height:inherit;overflow:auto;padding:18px 34px 16px 20px;border:1px solid var(--line-strong);border-radius:18px;background:#fff;box-shadow:var(--shadow)}
.persona-strip-q{margin:0 0 12px;color:var(--ink);font:600 15px/1.3 var(--display);letter-spacing:-.01em}
.persona-strip-chips{display:flex;flex-wrap:wrap;gap:8px}
.persona-chip{padding:8px 12px;border:1px solid var(--line);border-radius:999px;background:var(--bg-soft);color:var(--ink);font-size:12.5px;font-weight:500;text-decoration:none;transition:border-color .2s,background .2s}
.persona-chip:hover{border-color:var(--sky-text);background:var(--tint)}
.persona-strip-close{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--muted)}
.persona-strip-close:hover{background:var(--tint);color:var(--ink)}
.persona-strip-close svg{width:14px;height:14px}
@media (max-width:900px){.persona-strip{left:16px;right:16px;width:auto;max-height:calc(100dvh - 104px)}}
@media (max-width:560px){.persona-strip{left:12px;right:12px;bottom:max(82px,calc(12px + env(safe-area-inset-bottom)));max-height:calc(100dvh - 104px)}.persona-strip-card{padding:16px 32px 14px 16px}}
@media (prefers-reduced-motion:reduce){.persona-strip,.persona-strip.hiding{transition:none}}

/* --- hero call floor --- */
.hero-scene{background:none;overflow:visible}
.hero-scene::before{content:none}
.hero-scene .scene-canvas{display:block;margin:0 auto;max-width:100%;height:auto;image-rendering:pixelated}
.hero-scene-digital{background:none;border-radius:0;overflow:visible;aspect-ratio:1;max-width:820px;width:100%}
.hero-scene-digital .scene-frame{display:block;width:100%;height:100%;border:0;background:transparent;color-scheme:normal}
.hero-scene .scene-alt{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* --- home hero on navy, so the pixel room sits on its own colour --- */
body[data-page="index"] .hero{background:#011C38;color:#E6EDFA}
body[data-page="index"] .hero .grid-bg{background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px)}
body[data-page="index"] .hero .h1{color:#fff}
body[data-page="index"] .hero .h1 em,body[data-page="index"] .hero .swap span{color:var(--sky)}
body[data-page="index"] .hero .lede{color:#B8C7E6}
body[data-page="index"] .hero .live{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#C6D5EE}
body[data-page="index"] .hero .btn-primary{background:#fff;color:var(--navy)}
body[data-page="index"] .hero .btn-ghost{background:transparent;border-color:rgba(255,255,255,.3);color:#E6EDFA}
body[data-page="index"] .hero .btn-ghost:hover{background:rgba(255,255,255,.08)}
body[data-page="index"] .hero-note,body[data-page="index"] .hero-note-v6{color:#8FA4C8}
body[data-page="index"] .hero-note b,body[data-page="index"] .hero-note-v6 b{color:#E6EDFA}
body[data-page="index"] .hero-live{border-top-color:rgba(255,255,255,.14)}
body[data-page="index"] .hero-live .live-num,body[data-page="index"] .hero-live span b{color:#fff}
body[data-page="index"] .hero-live span small{color:#8FA4C8}
body[data-page="index"] .hero-scene{background:none}
body[data-page="index"] .hdr{background:#011C38;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:rgba(255,255,255,.12)}

/* --- home header controls on that navy bar (17 Sept) ---
   The sticky header is navy on the home page only, so every control in it had
   kept its light-page colour: the wordmark, the language pill, the Menu label
   and the header callback button were all navy on navy. The logo paths now
   carry fill="currentColor" (src/partials/header.html, #dring-mark), so the
   mark follows .logo's colour; the sky underline bar keeps its own fill.
   Everything below is scoped to body[data-page="index"] so no other page
   changes. */
.logo{color:var(--navy)}
.ftr .brand>svg{color:var(--navy)}
body[data-page="index"] .hdr .nav>li>a,body[data-page="index"] .hdr .nav>li>button{color:#C6D5EE}
body[data-page="index"] .hdr .nav>li>a:hover,body[data-page="index"] .hdr .nav>li>button:hover,body[data-page="index"] .hdr .nav>li:focus-within>button,body[data-page="index"] .hdr .nav>li.open>button{background:rgba(255,255,255,.1);color:#fff}
body[data-page="index"] .hdr .lang>button{color:#E6EDFA;border-color:rgba(255,255,255,.34)}
body[data-page="index"] .hdr .lang>button:hover{background:rgba(255,255,255,.08)}
body[data-page="index"] .hdr .logo{color:#fff}
body[data-page="index"] .hdr .btn-primary{background:#fff;color:var(--navy)}
body[data-page="index"] .hdr .btn-primary:hover{box-shadow:0 14px 34px -14px rgba(0,0,0,.65)}
body[data-page="index"] .menu-btn{color:#E6EDFA;border-color:rgba(255,255,255,.34)}
body[data-page="index"] .menu-btn:hover{background:rgba(255,255,255,.08)}
body[data-page="index"] .menu-btn i::before,body[data-page="index"] .menu-btn i::after{background:#E6EDFA}

/* the about page hero carries the rotating globe in place of a drawing */
body[data-page="about"] .hero-card-globe{background:none;border:0;box-shadow:none;padding:0;display:flex;align-items:center;justify-content:center}
body[data-page="about"] .hero-card-globe .hero-globe{max-width:420px;margin:0 auto}
body[data-page="about"] .hero-card-globe{background:var(--navy);border-radius:22px;padding:18px}
body[data-page="about"] .hero-card-globe .hero-globe{background:none}
body[data-page="about"] .hero-card-globe .hero-globe::before{content:none}

/* =========================================================================
   home hero audit at 390 / 768 / 1440 (17 Sept)
   Everything below is scoped to body[data-page="index"], which is every
   localised home page (dist/index.html and dist/<lang>/index.html all carry
   data-page="index"), so no other page moves. Contrast figures are measured
   against the navy hero ground #011C38, relative luminance .01124.
   ========================================================================= */

/* 1. the rotating headline. At 390px .hero .h1 sits on its clamp floor, 34px,
   and the copy column is 350px wide (390 minus the 2x20px .wrap padding that
   kicks in under 860px). The widest variants are about 8.3em, "keep getting
   better.", and 9.3em for the Turkish "iş akışınıza özel agent.": ~281px and
   ~317px at 34px, so they do fit 350px, but with under 10% headroom. The
   ≤700px rules near the top of this file meant to relax this were dead:
   .h1 .swap span{white-space:nowrap} and .h1 .swap{height:1.14em} are both
   declared later in the file and win on source order, so a webfont reflow had
   nothing to give and the line was cropped by .swap's own overflow:hidden.
   Bring the rotating line down where the column is tight and let it wrap as a
   last resort; height must go auto or a wrapped second line is cropped too. */
@media (max-width:700px){
  body[data-page="index"] .hero .h1 .swap{font-size:clamp(25px,7.4vw,34px);height:auto;line-height:1.16;padding-bottom:0}
  body[data-page="index"] .hero .h1 .swap span{white-space:normal}
}

/* 2. the room canvas. site.js picks the largest whole-number scale that fits
   the column and writes both sides inline (cv.style.width / cv.style.height).
   On a dpr:1 client at 390px that floor clamps to k=1, so the inline size is
   512x512 inside a 350px column: .scene-canvas's max-width:100% pulls the
   width back to 350px, but the inline height stays 512px, so the room is
   squashed and spills 162px past its 350px frame (.hero-scene is
   overflow:visible). Only !important beats an inline declaration. The canvas
   bitmap is always square (ROOM*k both sides), so height:auto reproduces the
   intended size exactly wherever the width is not being clamped. */
body[data-page="index"] .hero-scene .scene-canvas{height:auto!important}

/* 3. contrast on the navy hero. Text and icons all pass: #fff 17.15:1,
   #E6EDFA 14.58:1, #C6D5EE 11.56:1, #B8C7E6 10.09:1, #8FA4C8 6.79:1,
   --sky #62A4FF 6.76:1, the navy arrow on the white primary button 17.66:1,
   and the two status dots #2E9E5B 5.03:1 and #16A34A 5.20:1. The borders were
   the weak spot. The ghost button's border is the only boundary that control
   has, and rgba(255,255,255,.3) resolves to #4D6074, 2.65:1, under the 3:1
   that WCAG 1.4.11 asks of a control boundary. The "Trusted by" pill's .22
   resolves to #394E64, 2.00:1; that pill is decorative and its own text is
   already 11.56:1, so it is lifted to a clearly visible 3.48:1 rather than to
   a 4.5:1 outline that would read as a second button. Two hairlines are left
   alone on purpose: the header underline (.12, 1.41:1) and the hero-live rule
   (.14, 1.51:1) are separators, not boundaries of anything. */
body[data-page="index"] .hero .btn-ghost{border-color:rgba(255,255,255,.47)}  /* #788796, 4.66:1 */
body[data-page="index"] .hero .live{border-color:rgba(255,255,255,.38)}       /* #627284, 3.48:1 */

/* 4. vertical rhythm. .hero .wrap drops to a single column at 980px, but the
   two index tweaks that shape the two-column view only reset at 900px: the
   24px padding-top on the copy and the -8px lift on the art. So from 901 to
   980px the stacked copy is still pushed down 24px, and at every width below
   980px, 768px included, the art eats 8px of the 28px stack gap. Reset both
   at the breakpoint that actually changes the layout. */
@media (max-width:980px){
  body[data-page="index"] .hero .wrap>div:first-child{padding-top:0}
  body[data-page="index"] .hero-globe{margin-top:0}
}

/* 5. the focus ring. The global ring is 2px var(--sky-text) #2F6FD1, which is
   3.52:1 on this navy: it clears 1.4.11's 3:1 but is hard to catch while
   tabbing the dark hero and the navy header. A light ring reads at 14.58:1.
   The header's white primary button keeps its ring legible because the 3px
   offset puts it on the navy bar rather than on the button. Only the navy
   areas are recoloured: the white full menu sits outside .hdr, and every
   section below the hero keeps the brand ring. */
body[data-page="index"] .hero :focus-visible,
body[data-page="index"] .hdr :focus-visible{outline:2px solid #E6EDFA;outline-offset:3px}

/* == premium pass 2026-09-19: pricing cards, logo wall, voice cards == */

/* ---------- 1. references.html logo wall: no orphan cells ----------
   The wall holds 26 items: 25 named brands plus the closing li.more.
   4 columns (default): 26 = 6 x 4 + 2, so the last row starts with one
   brand in column 1 and li.more has to cover columns 2, 3 and 4.
   2 columns (max-width:900px): 26 = 13 x 2 exactly, remainder 0, so the
   last row is already full and li.more keeps its single cell.
   li.more also gets the sky tint so the cell reads as an intentional
   call to action rather than a leftover.
   If a brand is added or removed, recount: the start line below is
   (count mod 4) + 1, and the rule is only needed when that remainder
   is not 0. */
.logo-wall li.more{grid-column:2 / -1;justify-content:center;background:var(--tint)}
.logo-wall li.more:hover{background:var(--tint-2)}
@media (max-width:900px){.logo-wall li.more{grid-column:auto}}

/* ---------- 2. pricing.html package ladder ---------- */

/* Desktop: the header row reads like a row of package cards, and the
   Enterprise column carries the same sky tint the support comparison
   table already uses on its last column. */
#ladder .tier-head>span{font:600 14px var(--display);letter-spacing:-.01em;text-transform:none;color:var(--ink)}
#ladder .tier-head>span:first-child{font:500 13px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
#ladder .tier-head>span:last-child{background:rgba(220,234,255,.46);color:var(--sky-text)}
#ladder .tier-row>span[role=rowheader]{font:500 13px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--sky-text);line-height:1.38}
#ladder .tier-row:not(.tier-head)>span:last-child{background:linear-gradient(110deg,rgba(235,243,255,.7),rgba(248,251,255,.95));color:var(--ink-2)}

/* Mobile: the 6 column grid becomes one card per package. Exactly one
   copy of the ladder is exposed to assistive technology at any width,
   because display:none removes the other copy from the accessibility
   tree: above 700px the cards are gone, at and below 700px the scroller
   is gone. That is why .tier-cards carries no aria-hidden. */
.tier-cards{display:none}
.tier-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px}
.tier-card h3{font:600 17px var(--display);letter-spacing:-.02em;line-height:1.2}
.tier-card dl{display:grid;margin:14px 0 0}
.tier-card dl>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:12px;align-items:baseline;padding:10px 0;border-top:1px solid var(--line)}
.tier-card dl>div:first-child{padding-top:0;border-top:0}
.tier-card dt{font:500 13px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);line-height:1.38}
.tier-card dd{margin:0;color:var(--ink);font-size:14px;line-height:1.45}
.tier-card dd .tier-yes{margin-right:8px;vertical-align:-4px}
.tier-card.is-top{background:linear-gradient(110deg,rgba(235,243,255,.7),rgba(248,251,255,.95))}
@media (max-width:700px){
  #ladder .tier-scroll{display:none}
  .tier-cards{display:grid;gap:14px}
}

/* ---------- 3. index.html #voices: 60/30 sample cards ----------
   .wave keeps an explicit height because site.js writes each bar's
   height as a percentage, which only resolves against a definite
   container height. 140px clears the 120px minimum and leaves a 104px
   content box for the bars once the 18px padding is taken off. */
#voices .v .wave{order:-1;height:140px;gap:4px;padding:18px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(160deg,var(--tint),#fff)}
#voices .v .meta{font-size:13px;letter-spacing:.05em;gap:10px}
#voices .v h3{font-size:17px}
#voices .v .row{margin-top:2px}
@media (max-width:600px){#voices .v .wave{height:124px;padding:16px}}

/* == mobile pass 2026-09-19 == */
/* Three iPhone-390px fixes. Everything is scoped to @media (max-width:560px)
   except the .cta-secondary button rule, which has to be global because the
   link now carries .btn .btn-ghost at every width. Desktop is otherwise
   untouched; src/hero/ is not involved. */

/* --- 1. "Listen to samples first" is a real ghost button --------------
   It used to render as underlined text plus a bare "↘" glyph, which the
   iOS font stack draws as a boxed arrow. The anchor in index.html and
   tr/index.html is now <a class="btn btn-ghost cta-secondary"> with an
   inline <use href="#i-chev"> from the header sprite. These rules undo the
   old underline treatment (.cta-secondary at ~line 1403 sets border-bottom
   and padding-bottom) and restore the full pill border that .btn-ghost and
   .cta .btn-ghost would otherwise give it. Height comes from .btn's
   min-height:44px, so it matches every other .btn-ghost on the page. */
.cta-secondary{margin-top:22px;padding:14px 22px;font-size:15px;gap:9px;border:1px solid rgba(255,255,255,.3);border-radius:999px;color:#fff;background:transparent}
.cta-secondary:hover{color:#fff;border-color:#fff;background:rgba(255,255,255,.08)}
.cta-secondary-ic{width:16px;height:16px;flex:none;color:var(--sky)}
.cta-secondary:hover .cta-secondary-ic{color:#fff}

@media (max-width:560px){
  .cta-secondary{margin-top:16px;padding:12px 18px;font-size:14px}

  /* --- 2a. sticky bottom CTA: one compact row ------------------------
     Was a floating pill (left/right/bottom 12px, two equal 44px buttons,
     ~68px of occupied height) that ate the bottom of the viewport. Now it
     is a flush 56px bar: full-width primary + a small text link, hairline
     top border, backdrop blur, safe-area aware. */
  .mob-cta{left:0;right:0;bottom:0;align-items:center;gap:10px;padding:7px 12px calc(7px + env(safe-area-inset-bottom));border:0;border-top:1px solid var(--line);border-radius:0;background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);box-shadow:0 -2px 14px rgba(1,24,56,.07)}
  .mob-cta .btn{min-height:42px;padding:10px 14px;font-size:13.5px}
  .mob-cta .btn-primary{flex:1 1 auto}
  /* second action becomes a text link, not a competing button */
  .mob-cta .btn-ghost{flex:0 0 auto;padding:10px 2px;border:0;background:transparent;color:var(--sky-text);font-size:13px;font-weight:600}
  .mob-cta .btn-ghost:hover{background:transparent}

  /* Reserve the bar's height. body padding-bottom (not main) is what keeps
     the footer clear, because the footer partial sits outside <main>; main
     gets the same reserve so an anchored last section inside it is never
     the thing under the bar. scroll-padding-bottom makes #hash jumps and
     scrollIntoView() stop short of the bar. */
  html{scroll-padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  main{padding-bottom:calc(8px + env(safe-area-inset-bottom))}

  /* --- 2b. particle orb behind the callback copy --------------------
     #ctaorb is the 900-point sphere site.js draws in .cta. At 390px it
     sits directly behind the h2 and .sub paragraph. Faded, not removed,
     so the section keeps its depth on desktop (opacity stays .42 there). */
  /* 2026-09-19 11:05: Ayberk saw the sphere displaced behind the heading on a
     phone; on mobile the panel has its own ring graphic, so hide the canvas. */
  .cta canvas{display:none}

  /* --- 3. #languages "Deniz · Support" card fits the viewport --------
     Note: this card lives in section#languages, not #voices (#voices is
     the audio-sample carousel further down). Three separate overflows:
     (a) .llc-text carried -webkit-line-clamp:3 from the <=480px block, so
     the Spanish line was cut mid-word ("¿L... bien la hor"); it now wraps
     freely. (b) the waveform bars pushed the bubble wider than the card;
     hidden at this width, the "DENIZ SPEAKING" label stays as the cue.
     (c) the flag strip keeps its horizontal scroll-snap behaviour (site.js
     scrollToFlag() centres the active tile and relies on offsetWidth, so
     the tiles must stay laid out), just at ~96px per tile with the labels
     intact. overflow:hidden on the card is the backstop. */
  #languages .lang-ring-wrap,#languages .lang-card{min-width:0;max-width:100%}
  #languages .lang-card{overflow:hidden}
  #languages .llc-bubble{min-width:0;overflow:hidden}
  #languages .llc-bubble-row{align-items:flex-start}
  #languages .llc-bubble .llc-text{display:block;-webkit-line-clamp:none;-webkit-box-orient:horizontal;overflow:visible;white-space:normal;overflow-wrap:anywhere;font-size:13px;line-height:1.42;min-height:0}
  #languages .llc-wave-bars{display:none}
  #languages .llc-bubble .llc-wave{height:auto;min-height:0;margin-top:8px}
  #languages .llc-flags{min-width:0;max-width:100%;gap:10px;scroll-snap-type:x mandatory}
  #languages .llc-flag{width:96px;scroll-snap-align:center}
  #languages .llc-flag-art{width:96px;height:66px}
  #languages .llc-flag-label{font-size:12px}
}

/* == languages waveform 2026-09-19 == */
/* The #languages card's bars are now written per frame by languagesCard() in
   site.js from the sample's own AnalyserNode. .is-live turns off the old
   @keyframes llc-bar loop and the .25s height transition on the bars (both
   would override or lag the inline height), and is only added when the
   visitor has not asked for reduced motion, so the reduced-motion rules above
   still hold on their own. Colours, gaps and the bar count are untouched. */
.llc-wave.is-live .llc-wave-bars i{animation:none;transition:none;opacity:1}
/* the label only pulses while the audio element is actually playing */
.llc-wave.is-playing .llc-wave-label{color:var(--sky-text);animation:llc-speak-pulse 1.5s ease-in-out infinite}
@keyframes llc-speak-pulse{0%,100%{opacity:.5}50%{opacity:1}}
.llc-wave-bars.is-mini{display:none}
@media (max-width:560px){
  /* the mobile pass hides the 20-bar strip (it pushed the bubble wider than
     the card); this 5-bar version fits beside the label and gets the same
     JS-driven heights, so phones keep the effect. */
  #languages .llc-wave-bars.is-mini{display:flex;flex:0 0 auto;width:60px;height:16px;gap:3px;align-items:flex-end}
  #languages .llc-bubble .llc-wave{align-items:center}
}
@media (prefers-reduced-motion:reduce){
  .llc-wave.is-playing .llc-wave-label{animation:none;color:var(--muted)}
}

/* == languages transcript 2026-09-19 == */
/* The bubble holds one full sentence per language and the line is typed in
   step with the recording, so it must be able to grow to three or four lines
   without clipping and without the card jumping while it types: the reserved
   height is the tallest line, and nothing truncates. The <=480px
   -webkit-line-clamp:3 above (which cut Spanish mid-word) is undone here. */
.llc-bubble .llc-text{min-height:3.9em;overflow-wrap:anywhere}
@media (max-width:480px){
  .llc-bubble .llc-text{display:block;-webkit-line-clamp:none;-webkit-box-orient:horizontal;overflow:visible}
}

/* == compare table mobile 2026-09-19 == */
/* iPhone 390px, home #working-model (and the same markup on pricing.html /
   voice-anonymizer.html): the row used to stack into three full-width blocks,
   so the Dring tint started under the row label and stopped short of the row
   edges ("the paint slipped"), and the ticks/markers sat on a line of their
   own. Now every .compare-row is one grid: the row label spans both columns
   on its own line, the two answer cells sit side by side and stretch to the
   same height (so each background fills its whole cell), and the marker plus
   the text are one flex line with the badge pinned to the first text line.
   The structural half runs to 700px because 561-700px already used the same
   stacked-label layout; only sizing/padding is narrowed to 560px. It also
   undoes the older single-column pass at <=460px (line ~2776) and the
   vertical-align tick/person-marker hacks at <=700px (lines ~2457, ~3992).
   Above 700px nothing changes: desktop keeps its three-column table. */
@media (max-width:700px){
  .compare-row{grid-template-columns:1fr 1fr;align-items:stretch}
  .compare-row>span:first-child{grid-column:1/-1;border-left:0;padding-bottom:2px}
  .compare-row>span:nth-child(2){border-left:0}
  .compare-row>span:nth-child(3){border-left:1px solid var(--line);border-top:0}
  /* the two answer cells: caption line, then marker + text on one line */
  .compare-row:not(.compare-head)>span:nth-child(2),
  .compare-row:not(.compare-head)>span:nth-child(3){display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 8px}
  /* caption ("Other platforms" / "Dring"): full-width, above the answer.
     Column 2's ::before is taken by the person marker, so its caption is
     ::after pulled to the front with order:-1. */
  .compare-row:not(.compare-head)>span:nth-child(2)::after{content:attr(data-label);order:-1;flex:0 0 100%;margin:0;font:500 12px/1.3 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
  .compare-row:not(.compare-head)>span:nth-child(3)::before{flex:0 0 100%;margin:0}
  /* badge column: 22px square, nudged to sit on the first text line */
  .compare-row:not(.compare-head)>span:nth-child(2)::before,
  .compare-row:not(.compare-head)>span:nth-child(3)>.cmp-tick{flex:0 0 22px;display:block;width:22px;height:22px;margin:.15em 0 0;vertical-align:baseline}
  .compare-row:not(.compare-head)>span:nth-child(3)>.cmp-tick{font-size:11px;line-height:22px}
  .compare-final .cmp-tick{top:auto}
  /* the answer text takes the rest of the line instead of wrapping under */
  .compare-row:not(.compare-head)>span:nth-child(3)>b{flex:1 1 0;min-width:0;margin:0}
  /* row tint lives on the row, not on single cells, so it never steps */
  .compare-highlight{background:var(--tint)}
  .compare-highlight>span:first-child,.compare-highlight>span:nth-child(2){background:transparent}
}
@media (max-width:560px){
  #working-model .compare-row>span,#working-model .compare-final>span,
  .compare-row>span,.compare-final>span{padding:14px;font-size:15px;line-height:1.35}
  #working-model .compare-row>span:first-child,
  .compare-row>span:first-child{padding:14px 14px 2px;font-size:12px;line-height:1.3}
  /* 12px captions: "Do-it-yourself platforms" takes two lines on a phone, so the
     one-line "DRING" caption reserves the same height and both answers start level */
  #working-model .compare-row:not(.compare-head)>span:nth-child(2)::after,
  #working-model .compare-row:not(.compare-head)>span:nth-child(3)::before{min-height:2.6em}
  .compare-row:not(.compare-head)>span:nth-child(2),
  .compare-row:not(.compare-head)>span:nth-child(3){padding-left:14px;padding-right:14px}
  #working-model .compare-final>span,
  .compare-final>span{padding-top:16px;padding-bottom:16px}
  #working-model .compare-final>span:first-child,
  .compare-final>span:first-child{padding-bottom:2px}
  .cmp-price-line{font-size:16px;line-height:1.3}
  .compare-final>span:last-child b{font-size:15px}
}

/* == hero listen button 2026-09-19 == */
/* The hero's second action plays the locale's delivery-case clip in place
   instead of scrolling to #voices. The meter (2px sky line + mono elapsed /
   total) is absolutely positioned under the pill and hidden until playback,
   so the hero keeps exactly the height it had: the button itself only grows
   by its 16px glyph. */
.hero-listen-wrap{position:relative;display:inline-flex}
.hero-listen{cursor:pointer;font-family:inherit}
.hero-listen[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.hero-listen .ic-pause{display:none}
.hero-listen.is-playing .ic-play{display:none}
.hero-listen.is-playing .ic-pause{display:block}
.hero-listen-meter{position:absolute;top:100%;left:0;right:0;margin-top:5px;display:flex;align-items:center;gap:8px;height:11px;pointer-events:none}
.hero-listen-meter[hidden]{display:none}
.hero-listen-bar{flex:1 1 auto;height:2px;border-radius:2px;background:rgba(122,162,247,.28);overflow:hidden}
.hero-listen-bar i{display:block;height:100%;width:0;background:var(--sky);border-radius:2px}
.hero-listen-time{flex:none;font-family:var(--mono);font-size:12px;line-height:1;letter-spacing:.04em;color:var(--muted);font-variant-numeric:tabular-nums}
/* No width rules for narrow screens on purpose: the wrap is an ordinary
   .actions flex item, so the button keeps the size the ghost link had. */

/* == role section head 2026-09-19: baslik tek satir, tam genislik; lede altinda == */
.role-section .sec-head{grid-template-columns:1fr;gap:14px;align-items:start}
.role-section .sec-head .h2{max-width:none;font-size:clamp(28px,3.35vw,50px);white-space:nowrap}
.role-section .sec-head .lede{max-width:none}
@media (max-width:860px){.role-section .sec-head .h2{white-space:normal}}

/* == proof band 2026-09-19: is-meter hucresi diger hucrelerle ayni iskelet (kucuk halka ikon + buyuk sayi) == */
.proof-cell.is-meter .proof-ring{display:block;width:auto;height:auto;background:none;margin:0;place-items:initial}
.proof-cell.is-meter .proof-ring::before{position:static;content:"";display:block;width:24px;height:24px;border-radius:50%;margin-bottom:14px;inset:auto;
  background:conic-gradient(var(--sky) calc(var(--pct,72)*1%),var(--tint) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px))}
.proof-cell.is-meter .proof-ring b{position:static;display:block;font-family:var(--display);font-size:clamp(27px,2.6vw,36px);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.proof-cell.is-meter .proof-text{margin-top:0}
@media (max-width:560px){.proof-cell.is-meter .proof-ring::before{margin-bottom:8px}}

/* == improvement loop 2026-09-19: agent-factory cizimi genis/telefon varyanti ==
   Agent Factory sayfasindaki dongu cizimi 1000x564 yatay elips olarak durur.
   390 px'te ayni cizim okunmaz kucuklukte kaliyordu, o yuzden ayni metinleri
   tasiyan dikey (380x740) varyant devreye girer. Ikisi ayni anda gorunmez. */
.fl-wide{display:block}
.fl-phone{display:none}
@media (max-width:760px){
  .fl-wide{display:none}
  .fl-phone{display:block}
}

/* == improvement loop seridi 2026-09-19: kapanis cumlesi ayri satirda ==
   .afl-foot'ta mono seride yaslanan cumle 1440'ta ayni satira biniyordu;
   kendi satirina inip ustunde bosluk birakir. */
.afl-foot strong{margin-left:0;flex:1 0 100%;padding-top:10px}

/* == compare table 2026-09-19: "Other platforms" tarafi her satirda beyaz; isaret + metin ayni satirda hizali == */
.compare-highlight{background:#fff}
.compare-highlight>span,.compare-highlight>span:first-child,.compare-highlight>span:nth-child(2){background:#fff}
.compare-highlight>span:last-child{background:linear-gradient(110deg,rgba(216,232,255,.95),rgba(238,246,255,.98))}
@media (max-width:700px){
  .compare-row:not(.compare-head)>span:nth-child(2),
  .compare-row:not(.compare-head)>span:nth-child(3){display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:10px;row-gap:6px;align-items:start}
  .compare-row:not(.compare-head)>span:nth-child(2)::after,
  .compare-row:not(.compare-head)>span:nth-child(3)::before{grid-column:1/-1;order:-1}
  .compare-row:not(.compare-head)>span:nth-child(2)::before,
  .compare-row:not(.compare-head)>span:nth-child(3)>.cmp-tick{grid-column:1;margin:.1em 0 0;position:static}
  .compare-row:not(.compare-head)>span:nth-child(3)>b{grid-column:2;margin:0}
  .compare-row:not(.compare-head)>span:nth-child(3)>.cmp-you{grid-column:2}
  .compare-highlight>span:nth-child(2){background:#fff}
}


/* == hero butonlari mobilde ayni boy 2026-09-19 == */
@media (max-width:560px){
  body[data-page="index"] .hero .actions{display:grid;grid-template-columns:1fr;gap:12px;width:100%;max-width:420px}
  body[data-page="index"] .hero .actions>.btn,body[data-page="index"] .hero .actions .hero-listen-wrap,body[data-page="index"] .hero .actions .hero-listen{width:100%;justify-content:center;min-height:56px;box-sizing:border-box}
}


/* == security: alti amblem bandi 2026-09-20. Kaynak: src/assets/emblem-*.svg (library/brand-marks lockup seti). Sayfada tek yer. == */
.emb-band{padding:56px 0}
.emb-strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:28px;align-items:center}
.emb-strip li{min-width:0}
.emb-strip img{display:block;width:100%;height:auto;max-width:150px;margin:0 auto}
@media (max-width:700px){.emb-band{padding:36px 0}.emb-strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.emb-strip img{max-width:120px}}

/* security hero: baslik tek satir, tam genislik (CPO 20 Eyl: "neden iki satir"); lede+butonlar solda, cizim sagda */
@media (min-width:901px){
  body[data-page="security"] .page-hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start;row-gap:0}
  body[data-page="security"] .page-hero .copy{display:contents}
  body[data-page="security"] .page-hero .eyebrow{grid-column:1/-1}
  body[data-page="security"] .page-hero .h1{grid-column:1/-1;max-width:none;white-space:nowrap;font-size:clamp(34px,3.9vw,56px);margin-bottom:22px}
  body[data-page="security"] .page-hero .lede{grid-column:1;grid-row:3;margin-top:0}
  body[data-page="security"] .page-hero .actions{grid-column:1;grid-row:4;align-self:start}
  body[data-page="security"] .page-hero .hero-card{grid-column:2;grid-row:3/span 2;justify-self:end}
}

/* investors: 3 sayi, 3 sutun (CPO 20 Eyl: 50+ panele tasindi) */
.stats.stats-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.stats.stats-3{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.stats.stats-3{grid-template-columns:1fr}}

/* == speech-core modules 2026-09-25 == */
/* speech-core #modules (EN + TR): one caller turn as a numbered route on the left
   (5 beats, dotted sky path, one short relay glint after reveal, 3 runs then still),
   the two cross-cutting guarantees on one navy plate on the right. No orphan cell:
   2 columns at desktop, stacked at 900px and below. CPO 25 Sep: "low budget ne alaka". */
.sc-turn{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:48px;align-items:stretch}
.sc-turn>*{min-width:0}
.sc-route{list-style:none;counter-reset:scstep;gap:0;align-content:start}
.sc-route>li{counter-increment:scstep;position:relative;min-width:0;padding:0 0 30px 66px}
.sc-route>li:last-child{padding-bottom:0}
.sc-route>li::before{content:counter(scstep,decimal-leading-zero);position:absolute;top:0;left:0;z-index:1;width:42px;height:42px;border-radius:50%;border:1px solid var(--line-strong);background:#fff;display:grid;place-items:center;font:500 13px/1 var(--mono);letter-spacing:.06em;color:var(--sky-text);transition:background .25s,color .25s,border-color .25s}
.sc-route>li:hover::before{background:var(--navy);border-color:var(--navy);color:#fff}
.sc-route>li:not(:last-child)::after{content:"";position:absolute;left:20px;top:48px;bottom:6px;width:2px;background:linear-gradient(to bottom,transparent,var(--sky) 40%,var(--sky-text) 60%,transparent) no-repeat,radial-gradient(circle,rgba(98,164,255,.8) 0 1px,transparent 1.5px) repeat-y;background-size:2px 30px,2px 7px;background-position:0 -30px,50% 0}
.sc-route.in>li:not(:last-child)::after{animation:scGlint 5s ease-in-out .5s 3 both}
.sc-route.in>li:nth-child(2)::after{animation-delay:1.5s}
.sc-route.in>li:nth-child(3)::after{animation-delay:2.5s}
.sc-route.in>li:nth-child(4)::after{animation-delay:3.5s}
@keyframes scGlint{0%{background-position:0 -30px,50% 0}20%,100%{background-position:0 calc(100% + 30px),50% 0}}
.sc-route h3{font-size:19px;font-weight:600;line-height:1.3;padding-top:9px;margin-bottom:6px}
.sc-route p{font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:62ch}
.sc-route .link-arrow{margin-top:8px;font-size:15px}
.sc-always{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:var(--r);padding:34px 34px 30px;background:radial-gradient(120% 70% at 100% 0,rgba(98,164,255,.2),transparent 62%),var(--navy);box-shadow:var(--shadow);overflow:hidden}
.sc-always-k{font:500 13px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--sky);margin-bottom:22px}
.sc-guard{flex:1 1 auto;display:flex;flex-direction:column;gap:10px;min-width:0}
.sc-guard+.sc-guard{margin-top:26px;padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.sc-guard h3{color:#fff;font-size:21px;font-weight:600;line-height:1.25}
.sc-guard p{font-size:15.5px;line-height:1.6;color:#C9D6EE}
.sc-facts{list-style:none;margin-top:4px}
.sc-facts li{position:relative;padding:9px 0 9px 22px;font-size:15px;line-height:1.5;color:#E3EBF8;border-top:1px solid rgba(255,255,255,.1)}
.sc-facts li::before{content:"";position:absolute;left:2px;top:18px;width:6px;height:6px;border-radius:50%;background:var(--sky)}
.sc-guard .link-arrow{margin-top:6px;font-size:15px;color:#8EB9F8;align-self:flex-start}
.sc-guard .link-arrow:hover{color:#fff}
html[dir="rtl"] .sc-route>li{padding:0 66px 30px 0}
html[dir="rtl"] .sc-route>li:last-child{padding-bottom:0}
html[dir="rtl"] .sc-route>li::before{left:auto;right:0}
html[dir="rtl"] .sc-route>li:not(:last-child)::after{left:auto;right:20px}
html[dir="rtl"] .sc-facts li{padding:9px 22px 9px 0}
html[dir="rtl"] .sc-facts li::before{left:auto;right:0}
html[dir="rtl"] .sc-always{background:radial-gradient(120% 70% at 0 0,rgba(98,164,255,.2),transparent 62%),var(--navy)}
@media (max-width:900px){.sc-turn{grid-template-columns:1fr;gap:36px}}
@media (max-width:700px){
  .sc-turn{gap:28px}
  .sc-route>li{padding:0 0 26px 52px}
  .sc-route>li::before{width:36px;height:36px}
  .sc-route>li:not(:last-child)::after{left:17px;top:42px}
  .sc-route h3{font-size:18px;padding-top:6px}
  .sc-route p,.sc-guard p{font-size:15px}
  .sc-turn .link-arrow{min-height:44px}
  .sc-always{padding:26px 22px 24px}
  .sc-guard h3{font-size:19.5px}
  .sc-facts li{font-size:14.5px}
  html[dir="rtl"] .sc-route>li{padding:0 52px 26px 0}
  html[dir="rtl"] .sc-route>li:last-child{padding-bottom:0}
  html[dir="rtl"] .sc-route>li:not(:last-child)::after{right:17px}
}
@media (prefers-reduced-motion:reduce){.sc-route>li::after{animation:none!important}.sc-route>li::before{transition:none}}
/* == end speech-core modules 2026-09-25 == */
/* == agent-factory loop + growth 2026-09-25 == */
/* #factory-loop: the six steps and the release scorecard share one grid, so the
   scorecard reads as the evidence of the loop, never a lone centred card.
   1200px and up: steps 3x2 on the left, scorecard on the right at the same
   height (its gate rows share the extra height). Below 1200px: steps 3x2 full
   width, scorecard as a full width strip under them (candidate on top, three
   equal gate cells, decision chips). 900px and below: steps in two columns.
   700px and below: gate cells stack. 640px and below: steps use the existing
   one column vertical rail. Micro labels here are 13px (premium QA rubric). */
#factory-loop .factory-loop-body{display:grid;grid-template-columns:minmax(0,1fr);gap:36px}
#factory-loop .factory-loop-scroll{overflow:visible}
#factory-loop .factory-loop-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 20px;min-width:0}
#factory-loop .factory-loop-steps li:nth-child(3)::after{display:none}
#factory-loop .steps li::before{font-size:13px}
#factory-loop .steps .k{font-size:13px;letter-spacing:.12em}
#factory-loop .factory-loop-scorecard{margin:0}
#factory-loop .factory-loop-scorecard .mock-bar{flex-wrap:wrap;padding:16px 22px;font-size:13px;letter-spacing:.05em}
#factory-loop .factory-loop-scorecard .mock-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));row-gap:0;column-gap:28px;padding:20px 24px 22px}
#factory-loop .factory-loop-scorecard .mock-row{display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:6px;padding:14px 0;border-bottom:0;font-size:13.5px}
#factory-loop .factory-loop-scorecard .mock-row b{flex:0 0 auto;font-size:14px;text-align:left}
#factory-loop .factory-loop-scorecard .mock-row:first-child{grid-column:1/-1;padding:0 0 16px;border-bottom:1px dashed var(--line)}
#factory-loop .factory-loop-scorecard .mock-row:first-child b{font:600 18px/1.35 var(--display);color:var(--ink);letter-spacing:0}
#factory-loop .factory-loop-scorecard .mock-chips{grid-column:1/-1;gap:10px;padding:16px 0 0;border-top:1px dashed var(--line)}
#factory-loop .factory-loop-scorecard .mock-chips span{font-size:13px;padding:9px 15px}
#factory-loop .factory-loop-body+.note{margin-top:40px}
@media (min-width:1200px){
  #factory-loop .factory-loop-body{grid-template-columns:minmax(0,1fr) 360px;gap:48px;align-items:stretch}
  #factory-loop .factory-loop-scorecard{display:flex;flex-direction:column}
  #factory-loop .factory-loop-scorecard .mock-body{display:flex;flex:1 1 auto;flex-direction:column;padding:22px}
  #factory-loop .factory-loop-scorecard .mock-row{flex:1 1 auto;border-bottom:1px dashed var(--line)}
  #factory-loop .factory-loop-scorecard .mock-row:first-child{flex:0 0 auto}
  #factory-loop .factory-loop-scorecard .mock-chips{flex:0 0 auto;padding-top:18px;border-top:0}
}
@media (max-width:900px){
  #factory-loop .factory-loop-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  #factory-loop .factory-loop-steps li:nth-child(3)::after{display:block}
  #factory-loop .factory-loop-steps li:nth-child(2n)::after{display:none}
}
@media (max-width:700px){
  #factory-loop .factory-loop-scorecard .mock-body{grid-template-columns:minmax(0,1fr);padding:18px}
  #factory-loop .factory-loop-scorecard .mock-row{padding:12px 0;border-bottom:1px dashed var(--line)}
  #factory-loop .factory-loop-scorecard .mock-row:nth-child(4){border-bottom:0}
}
@media (max-width:640px){
  #factory-loop .factory-loop-steps{grid-template-columns:minmax(0,1fr);gap:18px}
  #factory-loop .factory-loop-steps li:nth-child(n)::after{display:block}
  #factory-loop .factory-loop-steps li:last-child::after{display:none}
}
/* #junior-to-senior: below 860px the growth band keeps a readable size
   (1040px wide, smallest label about 12px) and scrolls sideways inside its own
   figure; the page itself never scrolls sideways. */
@media (max-width:860px){
  #junior-to-senior figure{overflow-x:auto;overscroll-behavior-x:contain;direction:ltr;padding-bottom:6px}
  #junior-to-senior figure>svg{min-width:1040px}
}
/* == end agent-factory loop + growth 2026-09-25 == */
/* == numbering + lonely cards 2026-09-25 == */
/* Step numbering: plain .steps already numbers every step with its counter
   circle (li::before), so the step eyebrows (.steps .k) in agents #shipping,
   ai-receptionist-vs-ai-agent-platform #framework, alert #how, careers #how,
   connect #how, in-call-actions #setup, industry-education #workflow,
   industry-restaurant #workflow, notif #how, partner-referral #how,
   partner-reseller #how, partner-technology #how, partners #start
   and technology #pipeline-quality now carry
   only their word; that fix is markup only, no rule needed here. */
/* alert #compare: the three product cards sit in the right half of a .split.
   While the split has two columns (901px and up) that half is 544px wide at
   1440 and 456px at 1024, too narrow for three 180px cards, so the trio
   wrapped 2 + 1. There the cards stack as one column of full-width cards.
   701-900px (split stacked) keeps three across in one full row; 700px and
   below already stacks through the base .trio rule. */
@media (min-width:901px){
  [data-page="alert"] #compare .trio{flex-direction:column}
}
/* connect #catalogue: four catalogue groups on the three-column .igrid left
   the fourth group alone on its row (3 + 1). From 601px up the grid runs two
   columns, 2 + 2; 600px and below keeps the base single column. */
@media (min-width:601px){
  [data-page="connect"] #catalogue .igrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-page="connect"] #catalogue .igrid>*{grid-column:auto}
}
/* == end numbering + lonely cards 2026-09-25 == */
/* == lonely grids + text walls 2026-09-25 == */
/* House rule: a grid row never holds a lonely cell. These ID rules also beat
   the (0,4,0) .cols-3 3n+1 centring rule, which otherwise keeps a 10th card on
   grid-column 3/span 2 inside the 2-column and 1-column grids below 1001px. */
/* admin-panel #areas, 10 cards: at desktop Agents and Post-call workflows are
   featured and span two columns, so 12 cells fill 4 rows of 3. Below 1001px
   the plain 2-column grid takes the 10 cards as 5 full rows. */
#areas .grid.cols-3>*{grid-column:auto}
#areas .grid.cols-3>:nth-child(1),
#areas .grid.cols-3>:nth-child(6){background:var(--bg-soft)}
@media (min-width:1001px){
  #areas .grid.cols-3>*{grid-column:span 2}
  #areas .grid.cols-3>:nth-child(1),
  #areas .grid.cols-3>:nth-child(6){grid-column:span 4;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);column-gap:32px;align-items:start}
  #areas .grid.cols-3>:nth-child(1) h3,
  #areas .grid.cols-3>:nth-child(6) h3{font-family:var(--display);font-size:24px;line-height:1.2;letter-spacing:-.01em}
}
/* journal #case-studies, 5 cards: the first case is featured. Desktop runs 3
   columns (featured spans 2, then 3 cards); 641-1000px runs 2 columns
   (featured full width, then 2 + 2); phones stack. */
#case-studies .grid.cols-2>:last-child{grid-column:auto}
#case-studies .grid.cols-2>:first-child{grid-column:1/-1;background:var(--bg-soft)}
@media (min-width:1001px){
  #case-studies .grid.cols-2{grid-template-columns:repeat(3,minmax(0,1fr))}
  #case-studies .grid.cols-2>:first-child{grid-column:span 2}
  #case-studies .grid.cols-2>:first-child h3{font-family:var(--display);font-size:28px;line-height:1.15;letter-spacing:-.015em}
  #case-studies .grid.cols-2>:first-child p{font-size:16.5px;max-width:52ch}
}
/* journal #research-notes, 4 groups of 10 short notes: a reading index, not
   40 identical boxes. Two columns of 5 ruled rows per group (tag and link on
   the first line, title, one line of summary); one column on phones. */
#research-notes .grid.cols-3{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px;row-gap:0;margin-bottom:44px}
#research-notes .grid.cols-3:last-child{margin-bottom:0}
#research-notes .grid.cols-3>.card{grid-column:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:20px;row-gap:6px;align-items:baseline;align-content:start;padding:18px 14px;background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none}
#research-notes .grid.cols-3>.card:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
#research-notes .grid.cols-3>.card{transition:background .2s}
#research-notes .wrap>h3,#research-notes>h3{margin-bottom:14px}
#research-notes .grid.cols-3>.card::before{display:none}
#research-notes .grid.cols-3>.card>*{grid-column:1/-1}
#research-notes .grid.cols-3>.card .tag{grid-column:1;grid-row:1}
#research-notes .grid.cols-3>.card .link-arrow{grid-column:2;grid-row:1;margin:0;font-size:13px;white-space:nowrap}
#research-notes .grid.cols-3>.card h3{font-size:17px;line-height:1.3}
#research-notes .grid.cols-3>.card p{font-size:14.5px;line-height:1.5}
#research-notes .grid.cols-3>.card:hover{transform:none;box-shadow:none;border-color:var(--line);background:var(--bg-soft)}
#research-notes .grid.cols-3>.card:hover h3{color:var(--sky-text)}
#research-notes .grid.cols-3>.card:hover .link-arrow::after{transform:translateX(4px)}
@media (max-width:640px){
  #research-notes .grid.cols-3{grid-template-columns:minmax(0,1fr)}
  #research-notes .grid.cols-3>.card{padding:16px 4px}
  #research-notes .grid.cols-3>.card:nth-last-child(2){border-bottom:0}
}
/* == end lonely grids + text walls 2026-09-25 == */
/* == hero h1 fit 2026-09-25 == */
/* Long hero headlines keep two lines at desktop widths. build.py
   (fit_hero_h1) writes the visible length into --h1-len for headlines over 30
   characters. 4.08 is calibrated on the 600px copy column (36 characters fill
   two lines at 68px), so headlines up to about 36 characters keep the full
   68px. The floor stays above the 54px section h2 so the hierarchy holds.
   Heroes without art get a wider headline column instead of an empty right
   half. Under 901px nothing changes (CPO, 25 Sep: 19 hero h1s wrapped to 3 or
   4 lines at 1440). */
@media (min-width:901px){
  .page-hero .h1[style*="--h1-len"]{max-width:none;font-size:clamp(min(56px,3.9vw),calc(min(600px,42vw) * 4.08 / var(--h1-len)),68px);text-wrap:balance}
  .page-hero .wrap:not(:has(.hero-card)) .copy:has(.h1[style*="--h1-len"]){max-width:880px}
  .page-hero .wrap:not(:has(.hero-card)) .copy:has(.h1[style*="--h1-len"]) p{max-width:640px}
  .page-hero .wrap:not(:has(.hero-card)) .h1[style*="--h1-len"]{font-size:clamp(min(56px,3.9vw),calc(min(880px,62vw) * 3.8 / var(--h1-len)),68px)}
}
/* == end hero h1 fit 2026-09-25 == */
/* == security hero 2026-09-25 ==
   CPO 25 Sep ("bu görsel nedir, sayfa tasarımını hiç mi kontrol etmedin"). The
   20 Sep rules above spread the copy over a full-width h1 row and split the lede
   and the buttons into two grid rows beside the 409px scene, which left them
   about 150px apart. Here the copy block (eyebrow, h1, lede, buttons) is one grid
   item again, vertically centred with the scene. The scene column is 500px at
   1440 (labels drawn at 14.5 to 15 units stay at 13px or more down to 1024).
   The h1 stays on one line by sizing to its own column (cqi): 7.19cqi fits the
   EN headline and 6.85cqi the TR one, measured with Helvetica Neue Bold plus 2
   percent (Bricolage could not be measured offline; check in the browser), with
   the 48px gap as spare room. Other languages wrap to two balanced lines
   instead of risking overflow. Only body[data-page="security"]; the two-column
   rules start at 901px, below that the shared stacked hero stays. */
@media (min-width:901px){
  body[data-page="security"] .page-hero .wrap{grid-template-columns:minmax(0,1fr) minmax(0,min(500px,49%));column-gap:48px;row-gap:0;align-items:center}
  body[data-page="security"] .page-hero .copy{display:grid;grid-column:1;grid-row:1;align-self:center;max-width:none;container-type:inline-size}
  body[data-page="security"] .page-hero .eyebrow,
  body[data-page="security"] .page-hero .h1,
  body[data-page="security"] .page-hero .lede,
  body[data-page="security"] .page-hero .actions{grid-column:auto;grid-row:auto}
  body[data-page="security"] .page-hero .h1{max-width:none;margin-bottom:0;white-space:normal;text-wrap:balance;font-size:clamp(34px,3.9vw,52px);line-height:1.05}
  html[lang="en"] body[data-page="security"] .page-hero .h1{white-space:nowrap;font-size:min(48px,7.19cqi)}
  html[lang="tr"] body[data-page="security"] .page-hero .h1{white-space:nowrap;font-size:min(48px,6.85cqi)}
  body[data-page="security"] .page-hero .lede{margin-top:0;max-width:56ch}
  body[data-page="security"] .page-hero .hero-card{grid-column:2;grid-row:1;justify-self:end;align-self:center;width:100%;max-width:500px}
}
/* Stacked hero (900px and below): the scene may use 520px, its own canvas
   width, instead of the shared 440px cap, so the labels keep 13px on tablets.
   Phones (480px and below) draw the scene at about 0.67 of its canvas, so the
   labels are set to 19 to 19.5 units (about 13px on screen at 390), the message
   card switches to its wider phone twin and the LOGGED tag gives way to the
   longer TR outcome line. Checked on static renders, no collisions. */
@media (max-width:900px){
  body[data-page="security"] .page-hero .hv-art{max-width:520px}
}
@media (max-width:480px){
  body[data-page="security"] .page-hero .hv-art .s-layer,
  body[data-page="security"] .page-hero .hv-art .s-std,
  body[data-page="security"] .page-hero .hv-art .s-msg,
  body[data-page="security"] .page-hero .hv-art .s-out{font-size:19.5px}
  body[data-page="security"] .page-hero .hv-art .s-mono{font-size:19px}
  body[data-page="security"] .page-hero .hv-art .s-card-d,
  body[data-page="security"] .page-hero .hv-art .s-log{display:none}
  body[data-page="security"] .page-hero .hv-art .s-card-m{display:inline}
}
/* == end security hero 2026-09-25 == */

/* == EN layout fixes 2026-09-25 == */
/* analytics #record: visible field groups sit above the full-list accordion */
.record-fields > ul.check{margin-top:0}
.record-fields > .faq{margin-top:24px}
/* ai-agents #agent-factory: short paragraph moved from the hero, under the heading */
.factory-intro .h2 + p{margin-top:18px;max-width:52ch}
/* == end EN layout fixes 2026-09-25 == */

/* == voices lang strip 2026-09-25 == */
/* Home #voices: the language demos moved out of the carousel into small play
   chips under it. Each chip is a plain .v[data-audio][data-locale] so the
   existing site.js card player wires it; the label sits outside the button
   (the player rewrites the button's icon) and the button's ::after stretches
   over the whole chip so the chip is one click target. */
#voices .voices-langs{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:20px}
#voices .voices-langs-label{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
#voices .voices-langs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
#voices .voices-langs .v{position:relative;flex-direction:row;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink);min-height:40px}
#voices .voices-langs .v:hover{box-shadow:none;border-color:var(--sky)}
#voices .voices-langs .play{width:30px;height:30px;transform:none}
#voices .voices-langs .play:hover{transform:none}
#voices .voices-langs .play svg{width:12px;height:12px}
#voices .voices-langs .play::after{content:"";position:absolute;inset:-1px;border-radius:999px}
#voices .voices-langs .play:focus-visible{outline:none}
#voices .voices-langs .play:focus-visible::after{outline:2px solid var(--sky-text);outline-offset:2px}
#voices .voices-langs .v.playing{border-color:var(--sky);background:var(--tint)}
#voices .voices-langs .v.playing .play{background:var(--sky-text)}
#voices .voices-langs .v.loading{cursor:wait}
#voices .voices-langs .v.audio-error{border-color:#ad4f42;color:#ad4f42}
@media (max-width:600px){#voices .voices-langs{gap:8px}#voices .voices-langs-label{flex-basis:100%}}
/* == end voices lang strip 2026-09-25 == */

/* == pricing: 3-column standard list, neutral Standard marks 2026-09-26 ==
   The 15-item standard list runs in 3 columns so no row holds a lone item.
   The support table compares two included levels, so the Standard column
   gets a neutral grey tick instead of the red cross used on "old way" tables. */
.std-list.std-list-3{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px}
.std-list.std-list-3:has(>:nth-child(2n+1):last-child)>:last-child{grid-column:auto}
@media (max-width:760px){.std-list.std-list-3{grid-template-columns:1fr}}
.cmp-std-included .compare-row:not(.compare-head)>span:nth-child(2)::before{border:0;background:#EEF1F6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A97B3' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 8'/%3E%3C/svg%3E") center/58% no-repeat}
/* == end pricing 2026-09-26 == */
/* == J8 broken layouts 2026-09-26 == */
/* booking #suggestions: the mock and the "How the ranking works" column share
   a .grid.cols-2. Give it the .split column gap and rhythm so the check list
   no longer hangs against the mock card, and stack it at the .split width. */
#suggestions .grid.cols-2{gap:56px;align-items:center}
#suggestions .grid.cols-2 > div > h3{margin-top:14px;font-size:22px;line-height:1.25}
#suggestions .grid.cols-2 > div > ul.check + p{margin-top:22px}
@media (max-width:900px){#suggestions .grid.cols-2{grid-template-columns:1fr;gap:32px}}
/* == end J8 broken layouts 2026-09-26 == */
/* == L1 voice-demo one-line player 2026-09-26 ==
   Solution/industry #voice-demo card: the scenario title lives only in the
   section h2 (the card h3 is gone). The card is one horizontal player:
   [play] [label · direction / one-line note] [waveform filling the rest],
   vertically centered, 28px inner padding; at 900px and below the wave
   drops under the row (64 bars need about 320px). site.js wiring is
   unchanged (.v[data-audio] > .row > .play, .wave); .wave[data-bars] gives
   64 thin bars with a fixed rest shape and .wave[data-progress] marks played
   bars .is-played. Scoped to .voice-demo: home #voices cards are untouched. */
.voice-demo .v{grid-template-columns:minmax(0,max-content) minmax(340px,1fr);grid-template-areas:"row wave";column-gap:40px;row-gap:0;align-items:center;padding:28px}
.voice-demo .v .row{grid-area:row;align-self:center;position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:18px;min-width:0}
.voice-demo .v .play{width:52px;height:52px;box-shadow:0 0 0 6px var(--tint)}
.voice-demo .v .play svg{width:18px;height:18px}
.voice-demo .v.playing .play{background:var(--sky-deep)}
.voice-demo .v .vd-copy{display:flex;flex-direction:column;gap:6px;min-width:0}
.voice-demo .v .meta{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:baseline;gap:0;font-size:13px;line-height:1.4;letter-spacing:.08em;color:var(--muted)}
.voice-demo .v .row .meta span{font-size:inherit;color:inherit}
.voice-demo .v .row .meta span+span{color:var(--sky-text)}
.voice-demo .v .row .meta span+span::before{content:"\00B7";margin:0 .6em;color:var(--muted)}
.voice-demo .v .row .vd-note{font-size:14px;line-height:1.45;color:var(--ink-2)}
.voice-demo .v .row .audio-status{position:absolute;left:70px;right:0;top:calc(100% + 6px);flex-basis:auto;padding-left:0;font-size:13px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voice-demo .v .wave{grid-area:wave;height:72px;gap:3px;padding:0;border:0;min-width:0}
.voice-demo .v .wave i{flex:1 1 0;min-width:2px;border-radius:99px;background:var(--sky);opacity:.55;transition:height .25s,background-color .2s,opacity .2s}
.voice-demo .v:hover .wave i{opacity:.8}
.voice-demo .v.playing .wave i{background:var(--sky);opacity:.5;transition:height .08s linear,background-color .2s,opacity .2s}
.voice-demo .v.playing .wave i.is-played{background:var(--navy);opacity:1}
@media (max-width:900px){
  .voice-demo .v{grid-template-columns:minmax(0,1fr);grid-template-areas:"row" "wave";row-gap:24px}
}
@media (max-width:720px){
  .voice-demo .v{padding:20px}
  .voice-demo .v .row{gap:14px}
  .voice-demo .v .play{width:48px;height:48px;box-shadow:0 0 0 5px var(--tint)}
  .voice-demo .v .row .audio-status{left:62px;top:calc(100% + 4px)}
  .voice-demo .v .wave{height:56px;gap:2px}
}
@media (max-width:420px){.voice-demo .v .wave i{min-width:1px}}
/* == end L1 voice-demo one-line player 2026-09-26 == */
/* == L2 page use: empty halves, balanced rows, card link alignment 2026-09-26 ==
   Seven sections left half a row empty or let card links float at different
   heights. Each fix reuses an existing layout (.split, .grid, the .card look,
   .timeline, ul.check) and is scoped to its page and section id. */
/* platform #model-layer: text left, the speech core illustration right */
body[data-page="platform"] #model-layer .split .lede + .link-arrow{margin-top:18px}
/* the speech core art's .a-cap rule is document-wide and loads after the
   platform hero art, so the hero keeps its own caption style explicitly */
body[data-page="platform"] .page-hero .hv-art .a-cap{font-size:11px;fill:#5A6B8C}
/* partners #integration: heading left, the integration card right */
body[data-page="partners"] #integration .split .card p{max-width:none}
/* quality #guardrails: the four rules as a 2x2 grid of cards with the .card
   look (white, hairline border, same radius, 26px padding on every side);
   cards in a row stretch to one height so icons and titles line up */
body[data-page="quality"] #guardrails .six-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
body[data-page="quality"] #guardrails .six-list li{align-content:start;padding:26px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
/* reach #ivr-reach: two cards and the campaign mock share one row, the mock
   centered on the cards' height; when it wraps to its own row it is centered */
body[data-page="reach"] #ivr-reach .grid.cols-3>.mock{align-self:center;justify-self:center;width:100%}
body[data-page="reach"] #ivr-reach .grid.cols-3>.card>.link-arrow:last-child{margin-top:auto}
/* telephony #operations: stats, source line and link sit under the mock */
body[data-page="telephony"] #operations .ops-side{min-width:0}
body[data-page="telephony"] #operations .ops-side .proof-strip{margin-top:32px}
body[data-page="telephony"] #operations .ops-side .stats-note{margin:12px 0 0;font-size:13px}
body[data-page="telephony"] #operations .ops-side .stats-note + .link-arrow{margin-top:18px}
/* card links pinned to the card bottom so links in one row line up,
   whatever the text length in each language */
body[data-page="products"] .grid>.card>.link-arrow:last-child,
body[data-page="partners"] #models .grid>.card>.link-arrow:last-child{margin-top:auto}
body[data-page="agents"] .grid>.agent-card>.tags{margin-top:auto}
/* partner-referral #timeline: the four stages on the site timeline rail */
body[data-page="partner-referral"] #timeline ol.timeline{margin-top:24px;gap:14px}
body[data-page="partner-referral"] #timeline ol.timeline li{color:var(--ink-2);line-height:1.55}
/* benchmark #sources: the source notes use the site check list; .prose gives
   lists a 22px side margin and 4px item margins that ul.check does not expect */
body[data-page="voice-ai-operations-benchmark"] #sources .prose ul.check{display:grid;gap:10px;margin:18px 0 22px}
body[data-page="voice-ai-operations-benchmark"] #sources .prose ul.check li{margin:0}
/* phone width: every split and grid above is one column, nothing overflows */
@media (max-width:700px){
  body[data-page="platform"] #model-layer .split,
  body[data-page="partners"] #integration .split,
  body[data-page="telephony"] #operations .split,
  body[data-page="partner-referral"] #timeline .split,
  body[data-page="quality"] #guardrails .six-list,
  body[data-page="reach"] #ivr-reach .grid.cols-3{grid-template-columns:1fr}
  body[data-page="reach"] #ivr-reach .grid.cols-3>*{grid-column:auto}
}
/* == end L2 page use 2026-09-26 == */
/* Platform #analytics: per-agent performance card (status words, no invented numbers) */
.perf-mock .mock-body{gap:0;padding:6px 18px 18px}
.perf-row{display:grid;gap:10px;padding:14px 0;border-bottom:1px dashed var(--line)}
.perf-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.perf-top b{font-family:var(--body);font-size:15px;font-weight:600;color:var(--ink);line-height:1.35}
.perf-top small{display:block;font-family:var(--mono);font-size:12px;font-weight:400;color:var(--muted);margin-top:2px}
.perf-st{display:inline-flex;align-items:center;gap:7px;flex:none;font-family:var(--mono);font-size:12px;padding:6px 11px;border-radius:999px;white-space:nowrap}
.perf-st i{width:7px;height:7px;border-radius:50%;background:currentColor}
.perf-st.ok{background:rgba(22,163,74,.12);color:var(--green)}
.perf-st.watch{background:#FEF3C7;color:#92400E}
.perf-st.bad{background:#FEE4E2;color:#B42318}
.perf-tags{display:flex;flex-wrap:wrap;gap:6px}
.perf-tags span{font-family:var(--mono);font-size:12px;line-height:1.3;padding:5px 9px;border-radius:8px;border:1px solid var(--line);background:var(--bg-soft);color:var(--ink-2)}
.perf-tags span.ok{color:var(--green);background:rgba(22,163,74,.07);border-color:rgba(22,163,74,.22)}
.perf-tags span.warn{color:#92400E;background:#FEF3C7;border-color:#FCD34D}
.perf-tags span.sent{color:var(--sky-text);background:var(--tint);border-color:var(--tint-2)}
.perf-foot{padding-top:16px}