/* Praised marketing site · built from the homepage stylesheet (Aura Light) and the Praised Marketing tokens */
/* =========================================================
   Aura — Praised homepage
   Aura Light: Aura layout on the Observatory palette, white theme · framed page on a navy rim · floating pill nav · halftone aura
   ========================================================= */
:root{
  --ink:#0a1022; --ground:#ffffff; --tint:#f7f9fc; --frame:#ffffff; --muted:#5a6482; --dot:#ffb547; --glow:#ffe7bf;
  --line:rgba(10,16,34,.08); --line2:rgba(10,16,34,.15); --line3:rgba(10,16,34,.24);
  --ink-70:rgba(10,16,34,.7); --frame-70:rgba(255,255,255,.72);
  --display:Gabarito,"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Albert Sans",system-ui,-apple-system,"Segoe UI",sans-serif;   /* two brand fonts only (8 Oct): labels that used a monospace now use the body font */
  --code:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;   /* only for real code: robots.txt, llms.txt, schema, the fan-out outline */
  --r-pill:999px; --r-xl:28px; --r-lg:24px; --r-md:16px; --r-sm:10px;
  --sh-1:0 1px 0 rgba(10,16,34,.05),0 1px 3px rgba(10,16,34,.05);
  --sh-2:0 18px 40px -18px rgba(10,16,34,.32),0 2px 6px -2px rgba(10,16,34,.06);
  --sh-3:0 50px 100px -40px rgba(10,16,34,.45),0 18px 36px -24px rgba(10,16,34,.25);
  --ease:cubic-bezier(.2,.7,.1,1);
  --gut:40px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html,body{margin:0}
body{background:var(--ground);font-family:var(--body);color:var(--ink);padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:1.5;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
img,svg,canvas{display:block}
h1,h2,h3,h4,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:3px solid var(--dot);outline-offset:3px;border-radius:8px}

.skip{position:absolute;left:16px;top:-60px;z-index:200;background:var(--frame);color:var(--ink);padding:10px 16px;border-radius:var(--r-pill);font-weight:600;font-size:14px}
.skip:focus{top:8px}
.wrap{max-width:1200px;margin:0 auto;padding-inline:var(--gut)}
.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- rim announcement ---------- */

/* ---------- page frame ---------- */
.site{background:var(--ground);border-radius:0;overflow:clip;position:relative;isolation:isolate}

/* ---------- floating pill nav ---------- */
.navbar{position:sticky;top:10px;z-index:80;padding:14px 20px 0;pointer-events:none}
.nav{pointer-events:auto;position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 auto;max-width:1180px;background:rgba(255,255,255,.94);border-radius:var(--r-pill);padding:8px 8px 8px 22px;box-shadow:0 1px 0 rgba(10,16,34,.06);transition:box-shadow .35s var(--ease),background .35s}
.navbar.scrolled .nav{background:rgba(255,255,255,.86);box-shadow:0 1px 0 rgba(10,16,34,.06),0 16px 40px -22px rgba(10,16,34,.45);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px)}
.logo{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.025em;display:inline-flex;align-items:center;gap:9px;line-height:1}
.logo svg{width:23px;height:23px;flex:none;overflow:visible}.logo svg .dt{transition:transform .5s var(--ease);transform-box:view-box;transform-origin:24px 24px}
.logo:hover svg .dt{transform:rotate(-40deg)}
.links{display:flex;align-items:center;gap:2px}
.dd{position:relative}
.dd.mega{position:static}
.nl{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:var(--r-pill);font-size:14.5px;font-weight:500;color:var(--muted);transition:background .2s,color .2s}
.nl:hover,.dd.open>.nl{background:var(--tint);color:var(--ink)}
.nl .chev{width:12px;height:12px;stroke-width:2.2;transition:transform .3s var(--ease)}
.dd.open .chev{transform:rotate(180deg)}
.acts{display:flex;gap:6px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-pill);font-weight:600;font-size:14.5px;line-height:1;padding:12px 20px;border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .25s var(--ease),background .25s,box-shadow .25s,border-color .25s,color .25s}
.btn:active{transform:translateY(1px) scale(.985)}
.btn.solid{background:var(--ink);color:var(--frame);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 6px 16px -8px rgba(10,16,34,.6)}
.btn.solid:hover{background:#1f2a4d;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 22px -10px rgba(10,16,34,.7)}
.btn.ghost{border-color:var(--line2);color:var(--ink);background:transparent}
.btn.ghost:hover{border-color:var(--ink);background:rgba(255,255,255,.4)}
.btn.text{padding-inline:14px;color:var(--ink);font-weight:500}
.btn.text:hover{background:var(--tint)}
.btn.lg{font-size:16px;padding:16px 26px}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.burger{display:none;width:44px;height:44px;border-radius:50%;background:var(--tint);align-items:center;justify-content:center;position:relative}
.burger i{position:absolute;left:14px;right:14px;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
.burger i:nth-child(1){top:16px}.burger i:nth-child(2){top:21px}.burger i:nth-child(3){top:26px}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* dropdown menus */
.menu{position:absolute;top:calc(100% + 12px);left:50%;background:var(--frame);border-radius:var(--r-lg);box-shadow:0 30px 70px -30px rgba(10,16,34,.5),0 0 0 1px var(--line);padding:10px;opacity:0;visibility:hidden;transform:translate(-50%,8px) scale(.985);transform-origin:top center;transition:opacity .22s var(--ease),transform .3s var(--ease),visibility 0s .3s;z-index:5}
.menu::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.dd.open>.menu{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1);transition:opacity .22s var(--ease),transform .3s var(--ease),visibility 0s}
.menu.small{min-width:260px}
.menu.mega-menu{width:min(820px,calc(100vw - 80px));padding:0;overflow:hidden}
.mm-grid{display:grid;grid-template-columns:1.55fr 1fr}
.mm-col{padding:18px 14px 14px}
.mm-col+.mm-col{background:linear-gradient(180deg,rgba(244,246,250,.55),rgba(244,246,250,.25));border-left:1px solid var(--line)}
.mm-h{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;color:var(--muted);padding:0 10px 8px;letter-spacing:.02em}
.mm-h::before{content:none}
.mm-list{display:grid;gap:2px}
.mm-col:first-child .mm-list{grid-template-columns:1fr 1fr}
.mi{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:14px;transition:background .2s}
.mi:hover,.mi:focus-visible{background:var(--tint)}
.mi .mi-i{width:34px;height:34px;border-radius:11px;background:var(--tint);display:grid;place-items:center;flex:none;transition:background .2s,color .2s}
.mi:hover .mi-i,.mi:focus-visible .mi-i{background:var(--ink);color:var(--glow)}
.mi .ico{width:17px;height:17px}
.mi b{display:block;font-size:14.5px;font-weight:600;line-height:1.25}
.mi small{display:block;font-size:13px;color:var(--muted);line-height:1.35;margin-top:2px}

.sm{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;font-size:14.5px;font-weight:500;transition:background .2s}
.sm:hover,.sm:focus-visible{background:var(--tint)}
.sm .arr{opacity:0;transform:translateX(-4px);transition:.25s var(--ease);width:16px;height:16px}
.sm:hover .arr,.sm:focus-visible .arr{opacity:1;transform:none}
.sm .free{font-size:11px;font-weight:700;background:var(--glow);border-radius:var(--r-pill);padding:2px 8px;margin-left:auto}

/* mobile menu */
.mnav{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--frame);border-radius:var(--r-lg);box-shadow:0 30px 70px -30px rgba(10,16,34,.55),0 0 0 1px var(--line);padding:10px;max-height:calc(100dvh - 110px);overflow:auto;overscroll-behavior:contain}
.mnav[hidden]{display:none}
.mnav details{border-bottom:1px solid var(--line)}
.mnav summary{list-style:none;display:flex;align-items:center;justify-content:space-between;padding:15px 12px;font-family:var(--display);font-weight:700;font-size:20px;cursor:pointer;border-radius:12px}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary .chev{width:16px;height:16px;transition:transform .3s var(--ease)}
.mnav details[open] summary .chev{transform:rotate(180deg)}
.mnav .mgrp{padding:0 4px 12px}
.mnav .mgrp h4{font-family:var(--mono);font-weight:400;font-size:11.5px;color:var(--muted);padding:8px 8px 4px}
.mnav .mgrp a{display:flex;justify-content:space-between;gap:12px;padding:9px 8px;border-radius:10px;font-size:15px;font-weight:500}
.mnav .mgrp a small{color:var(--muted);font-size:13px;font-weight:400;text-align:right}
.mnav .mgrp a:hover{background:var(--tint)}
.mnav .mlink{display:block;padding:15px 12px;font-family:var(--display);font-weight:700;font-size:20px;border-bottom:1px solid var(--line)}
.mnav .macts{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px 2px 4px}

/* ---------- hero ---------- */
.hero{text-align:center;padding-top:76px;position:relative;z-index:2}

h1.hero-h{font-family:var(--display);font-weight:800;font-size:clamp(46px,7.3vw,104px);line-height:.93;letter-spacing:-.042em;margin:26px auto 0;max-width:1000px;text-wrap:balance}
.hl{position:relative;white-space:nowrap}
.hl::after{content:"";position:absolute;left:.02em;right:.04em;bottom:-.06em;height:.16em;
  background-image:radial-gradient(circle,var(--dot) 46%,transparent 52%),radial-gradient(circle,var(--glow) 46%,transparent 52%);
  background-size:.09em .09em,.09em .09em;background-position:0 0,.045em .08em;background-repeat:repeat-x;z-index:-1;
  -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.lead{font-size:clamp(17px,1.45vw,20px);line-height:1.55;color:var(--muted);max-width:640px;margin:34px auto 0;text-wrap:pretty}
.cta{display:flex;gap:10px;justify-content:center;margin-top:32px;flex-wrap:wrap}

/* domain checker */
.checker{max-width:580px;margin:36px auto 0;text-align:left}

.field{display:flex;align-items:center;gap:6px;background:var(--frame);border:1px solid var(--line2);border-radius:var(--r-pill);padding:6px 6px 6px 18px;box-shadow:0 14px 34px -22px rgba(10,16,34,.5);transition:border-color .2s,box-shadow .25s}
.field:focus-within{border-color:var(--ink);box-shadow:0 0 0 4px rgba(255,181,71,.28),0 14px 34px -22px rgba(10,16,34,.5)}
.field.err{border-color:var(--dot);box-shadow:0 0 0 4px rgba(255,181,71,.22)}
.field .ico{color:var(--muted);width:18px;height:18px}
.field .pre{font-size:15px;color:var(--muted);margin-left:2px;user-select:none}
.field input{flex:1;min-width:0;border:0;background:transparent;font:500 16px/1.2 var(--body);color:var(--ink);padding:12px 2px;outline:none}
.field input::placeholder{color:rgba(90,100,130,.7)}
.field .btn{padding:14px 20px}
.field .btn[disabled]{cursor:progress;opacity:.92}
.check-msg{min-height:0;font-size:13.5px;font-weight:500;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px}
.check-msg:empty{display:none}
.check-msg::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dot);flex:none}
.check-note{font-size:13px;color:var(--muted);text-align:center;margin-top:12px;display:flex;justify-content:center;flex-wrap:wrap;gap:4px 10px}
.check-note span{display:inline-flex;align-items:center;gap:6px}
.check-note span+span::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--muted);opacity:.6;margin-right:4px}

/* checker result */
.result{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease),margin .5s var(--ease);margin-top:0}
.result.show{grid-template-rows:1fr;margin-top:16px}
.result>div{overflow:hidden;min-height:0}
.rcard{background:var(--frame);border-radius:20px;box-shadow:var(--sh-2),0 0 0 1px var(--line);padding:8px;margin:2px 2px 24px}
.steps{display:grid;gap:2px;padding:6px 8px}
.steps li{display:flex;align-items:center;gap:12px;padding:8px 6px;font-size:14px;color:var(--muted);opacity:.4;transition:opacity .3s}
.steps li.on,.steps li.done{opacity:1}
.steps li.on{color:var(--ink)}
.steps .st{width:20px;height:20px;border-radius:50%;border:2px solid var(--line2);flex:none;position:relative;display:grid;place-items:center}
.steps li.on .st{border-color:var(--glow);border-top-color:var(--dot);animation:spin .8s linear infinite}
.steps li.done .st{border-color:var(--ink);background:var(--ink)}
.steps li.done .st::after{content:"";width:8px;height:4px;border:2px solid var(--frame);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}

.steps .tm{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
@keyframes spin{to{transform:rotate(360deg)}}
.rout{border-top:1px solid var(--line);margin-top:4px;padding:14px 14px 10px;animation:fadeup .5s var(--ease) both}
.rout[hidden]{display:none}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.rdom{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;min-width:0}
.rdom span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rdom i{width:22px;height:22px;border-radius:7px;background:var(--ink);color:var(--glow);font-style:normal;font-size:12px;display:grid;place-items:center;flex:none;text-transform:uppercase}

.rfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font-size:13px;color:var(--muted)}
.rfoot a{font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}

/* ---------- aura stage ---------- */
.stage{position:relative;height:560px;margin-top:6px;z-index:1}
.stage canvas{position:absolute;inset:0;width:100%;height:100%}

/* floating live cards */


/* ---------- product panel (rises out of the aura) ---------- */
.panel-wrap{position:relative;z-index:4;margin-top:-132px;padding-inline:var(--gut)}
.app{max-width:1140px;margin:0 auto;background:var(--frame);border-radius:var(--r-lg);box-shadow:var(--sh-3),0 0 0 1px rgba(10,16,34,.05);overflow:hidden;text-align:left}
@media (prefers-reduced-motion:no-preference){
  .app{animation:rise 1.3s .25s var(--ease) both}
  @keyframes rise{from{transform:translateY(70px) scale(.97);opacity:0}to{transform:none;opacity:1}}
}
.app-top{display:flex;align-items:center;gap:16px;padding:12px 16px;border-bottom:1px solid var(--line)}
.win{display:flex;gap:6px}
.win i{width:10px;height:10px;border-radius:50%;background:var(--tint);box-shadow:inset 0 0 0 1px var(--line2)}
.crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);min-width:0}
.crumbs b{color:var(--ink);font-weight:600}
.crumbs .ws{display:inline-flex;align-items:center;gap:7px;color:var(--ink);font-weight:600}
.crumbs .ws i{width:20px;height:20px;border-radius:6px;background:var(--dot);color:var(--ink);font:800 11px/20px var(--display);text-align:center;font-style:normal}
.crumbs .sep{opacity:.4}
.app-tools{margin-left:auto;display:flex;align-items:center;gap:10px}

.app-body{display:grid;grid-template-columns:208px 1fr}
.side{border-right:1px solid var(--line);padding:16px 12px;background:linear-gradient(180deg,var(--frame),rgba(244,246,250,.5))}
.side-g{display:grid;gap:1px;margin-bottom:16px}
.side-h{font-family:var(--mono);font-size:10.5px;color:var(--muted);padding:4px 10px 6px;letter-spacing:.04em}
.side-i{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:10px;font-size:13.5px;font-weight:500;color:var(--muted)}
.side-i .ico{width:16px;height:16px}
.side-i.on{background:var(--frame);color:var(--ink);box-shadow:var(--sh-1),0 0 0 1px var(--line)}
.side-i em{margin-left:auto;font-style:normal;font-size:11px;font-weight:700;background:var(--dot);color:var(--ink);border-radius:var(--r-pill);padding:1px 7px}
.main{padding:20px 22px 22px;min-width:0}
.main-h{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px}
.main-h h3{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em}
.main-h p{font-size:13px;color:var(--muted);margin-top:2px}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.kpi{background:var(--tint);border-radius:14px;padding:13px 14px 12px;position:relative;overflow:hidden}
.kpi small{display:block;font-size:12px;color:var(--muted);font-weight:500}
.kpi b{display:block;font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:-.03em;line-height:1.1;margin-top:4px;font-variant-numeric:tabular-nums}
.kpi span{font-size:11.5px;color:var(--muted);display:inline-flex;align-items:center;gap:4px}
.kpi span.up{color:var(--ink);font-weight:600}
.kpi span.up::before{content:"";border:4px solid transparent;border-bottom:6px solid var(--dot);border-top:0;margin-right:1px}
.kpi svg{position:absolute;right:12px;top:16px;width:70px;height:28px}
.kpi.hot{background:var(--ink);color:var(--frame)}
.kpi.hot small,.kpi.hot span{color:rgba(255,255,255,.7)}
.main-g{display:grid;grid-template-columns:1.2fr 1fr;gap:12px}
.cs{border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.cs-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:13px;font-weight:600}
.legend{display:flex;gap:12px;font-size:11.5px;color:var(--muted);font-weight:500}
.legend span{display:inline-flex;align-items:center;gap:5px}
.legend i{width:8px;height:8px;border-radius:50%;background:var(--ink)}
.legend i.c{background:#2b97d1}

.ans-h{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-bottom:8px}
.ans-h .eg2{font-weight:600;color:var(--ink);background:var(--tint);border-radius:var(--r-pill);padding:3px 9px}
.ans-h .t{margin-left:auto;font-family:var(--mono);font-size:10.5px}
.ans-q{font-size:13.5px;font-weight:600;margin-bottom:8px}
.ans-p{font-size:13px;line-height:1.6;color:#2c3550}
mark{background:var(--glow);color:var(--ink);border-radius:4px;padding:0 3px;font-weight:600}
sup.c{display:inline-grid;place-items:center;min-width:16px;height:16px;border-radius:5px;background:var(--tint);border:1px solid var(--line2);font:600 9.5px/1 var(--mono);color:var(--ink);vertical-align:2px;margin-left:2px;padding:0 3px}

.srcs{display:grid;gap:4px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line2);font-size:11.5px;color:var(--muted)}
.srcs span{display:flex;gap:8px;align-items:center;min-width:0}
.srcs span b{font:600 10px/1 var(--mono);color:var(--ink);background:var(--tint);border-radius:4px;padding:3px 5px;flex:none}
.srcs span em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---------- engines strip ---------- */
.engines{text-align:center;padding-top:96px;padding-bottom:8px}
.engines p{font-size:14px;color:var(--muted);margin:0 0 22px;font-weight:500}
.elist{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px 0;font-family:var(--display);font-weight:700;font-size:clamp(20px,2vw,28px);letter-spacing:-.02em}
.elist li{display:inline-flex;align-items:center;color:var(--ink);opacity:.85;transition:opacity .2s}
.elist li:hover{opacity:1}
.elist li+li::before{content:"";width:1px;height:18px;border-radius:0;background:var(--line3);margin:0 clamp(16px,2.2vw,30px);opacity:.9}

/* ---------- shared section heads ---------- */
section{position:relative}
.sec{padding-top:184px}

.say{font-family:var(--display);font-weight:800;font-size:clamp(34px,4.5vw,60px);line-height:1.04;letter-spacing:-.035em;max-width:920px;text-wrap:balance;margin-top:18px}
.say .q{color:var(--muted);opacity:.72}
.sub{font-size:18px;line-height:1.55;color:var(--muted);max-width:560px;margin-top:20px;text-wrap:pretty}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}

/* ---------- shift ---------- */

/* vignettes */

.one{background:var(--frame);border-radius:12px;padding:10px;font-size:12px;line-height:1.45;box-shadow:var(--sh-1);display:grid;gap:7px;align-content:start}
.one div{display:flex;gap:6px}
.one b{font-family:var(--mono);font-size:10px;font-weight:600;background:var(--tint);border-radius:5px;padding:2px 5px;flex:none;height:fit-content}
.one span{color:#2c3550}

/* ---------- product tour ---------- */
.tour .head-row{align-items:flex-end}
.tabs{display:inline-flex;gap:4px;background:var(--frame);border-radius:var(--r-pill);padding:5px;box-shadow:var(--sh-1);flex:none}
.tab{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;padding:11px 18px;border-radius:var(--r-pill);color:var(--muted);transition:background .25s,color .25s}
.tab em{font-style:normal;font-family:var(--mono);font-size:11px;opacity:.7}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{background:var(--ink);color:var(--frame)}
.tab[aria-selected="true"] em{color:var(--glow);opacity:1}
.tpanels{margin-top:40px}
.tpanel{display:grid;grid-template-columns:5fr 7fr;gap:20px;background:var(--frame);border-radius:32px;padding:12px}
.tpanel[hidden]{display:none}
.tpanel:not([hidden]) .tcopy>*{animation:fadeup .6s var(--ease) both}
.tpanel:not([hidden]) .tcopy>*:nth-child(2){animation-delay:.05s}
.tpanel:not([hidden]) .tcopy>*:nth-child(3){animation-delay:.1s}
.tpanel:not([hidden]) .tcopy>*:nth-child(4){animation-delay:.15s}
.tpanel:not([hidden]) .tstage .mock{animation:fadeup .7s .08s var(--ease) both}
.tcopy{padding:36px 28px 32px 32px;display:flex;flex-direction:column}
.tcopy h3{font-family:var(--display);font-weight:800;font-size:clamp(32px,3.3vw,44px);line-height:1.02;letter-spacing:-.03em;margin-top:16px}
.tcopy p{color:var(--muted);font-size:16.5px;line-height:1.6;margin-top:18px;text-wrap:pretty}

.more{margin-top:auto;padding-top:28px;font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:8px;align-self:flex-start}
.more .arr{width:18px;height:18px;transition:transform .25s var(--ease)}
.more:hover .arr{transform:translateX(4px)}
.tstage{background:var(--tint);border-radius:24px;position:relative;overflow:hidden;padding:36px 32px;display:flex;align-items:center;min-height:560px}
.tstage>canvas{position:absolute;inset:0;width:100%;height:100%}
.mock{position:relative;background:var(--frame);border-radius:20px;box-shadow:var(--sh-3),0 0 0 1px rgba(10,16,34,.05);width:100%;overflow:hidden}
.mock-h{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line);font-size:13px}
.mock-h b{font-weight:600}
.mock-h .f{display:inline-flex;align-items:center;gap:5px;color:var(--muted);font-size:12px;border:1px solid var(--line2);border-radius:var(--r-pill);padding:3px 9px}
/* questions table */

.excerpt{margin:4px 10px 10px;background:var(--tint);border-radius:14px;padding:14px 16px}
/* fixes */

.stt{font-size:11.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;min-width:84px;color:var(--muted)}
.stt.ok{color:var(--ink)}
.stt.ok::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ink)}

/* prove */

@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ---------- capability grid ---------- */

/* ---------- who ---------- */

.spark{display:flex;align-items:flex-end;gap:3px;height:34px;margin:2px 0 10px}
.spark i{flex:1;background:var(--ink);border-radius:3px 3px 1px 1px;opacity:.85}
.spark i:last-child{background:var(--dot);opacity:1}

/* ---------- pricing teaser ---------- */
.plan{display:grid;grid-template-columns:1.05fr 1fr;gap:20px;background:var(--frame);border-radius:32px;padding:12px;margin-top:0}
.plan-c{padding:48px 40px 44px}
.plan-c .say{font-size:clamp(32px,3.8vw,52px)}
.plan-c .cta{justify-content:flex-start;margin-top:30px}
.plan-v{background:var(--tint);border-radius:24px;position:relative;overflow:hidden;min-height:420px;display:grid;place-items:center;padding:40px 28px}
.plan-v canvas{position:absolute;inset:0;width:100%;height:100%}
.stack{position:relative;width:min(380px,100%)}
.stack .ghost{position:absolute;left:8%;right:8%;top:-14px;height:60px;background:rgba(255,255,255,.6);border-radius:20px;box-shadow:var(--sh-1)}
.stack .ghost.g2{left:16%;right:16%;top:-26px;background:rgba(255,255,255,.35)}
.pcard{position:relative;background:var(--frame);border-radius:20px;box-shadow:var(--sh-3);padding:18px 18px 14px}
.pcard-h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.pcard-h b{font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.02em}
.pcard-h span{font-size:12px;color:var(--muted)}
.pcard ul{display:grid;padding-top:6px}
.pcard li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 2px;font-size:14px;font-weight:500;border-bottom:1px dashed var(--line)}
.pcard li:last-child{border-bottom:0}
.pcard li i{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:11.5px;font-weight:600;color:var(--muted)}
.pcard li i::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23ffd3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}

/* ---------- stack / integrations hub ---------- */

@keyframes flow{to{stroke-dashoffset:-218}}

/* ---------- free tools ---------- */

/* ---------- faq ---------- */
.faq-g{display:grid;grid-template-columns:1fr 1.45fr;gap:64px}
.faq-side .sub a{color:var(--ink);font-weight:600;border-bottom:1px solid var(--line3)}
.faq-side .sub a:hover{border-color:var(--dot)}
.acc{background:var(--frame);border-radius:var(--r-lg);padding:6px 22px}
.qa+.qa{border-top:1px solid var(--line)}
.qa h3{font:inherit}
.qa button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left;padding:22px 0;font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.01em;border-radius:6px}
.qa .pm{width:34px;height:34px;border-radius:50%;background:var(--tint);flex:none;position:relative;transition:background .3s,transform .4s var(--ease)}
.qa .pm::before,.qa .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:2px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .35s var(--ease),background .3s}
.qa .pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa button:hover .pm{background:var(--glow)}
.qa button[aria-expanded="true"] .pm{background:var(--ink);transform:rotate(180deg)}
.qa button[aria-expanded="true"] .pm::before,.qa button[aria-expanded="true"] .pm::after{background:var(--frame)}
.qa button[aria-expanded="true"] .pm::after{transform:translate(-50%,-50%) rotate(0)}
.qa .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.qa .ans>div{overflow:hidden;min-height:0;visibility:hidden;transition:visibility 0s .45s}
.qa.open .ans>div{visibility:visible;transition:none}
.qa .ans p{color:var(--muted);font-size:16px;line-height:1.6;padding:0 54px 24px 0;max-width:640px}
.qa.open .ans{grid-template-rows:1fr}

/* ---------- final cta band ---------- */
.band{margin:128px 10px 10px;background:var(--ink);border-radius:24px;color:var(--frame);position:relative;overflow:hidden;padding:200px 64px 72px;display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:end;isolation:isolate}
.band>canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.band h2{font-family:var(--display);font-weight:800;font-size:clamp(46px,6.4vw,92px);line-height:.94;letter-spacing:-.04em;text-wrap:balance}
.band p{color:rgba(255,255,255,.78);font-size:18px;line-height:1.55;margin:0 0 24px;max-width:420px}
.band .cta{justify-content:flex-start;margin:0}
.band .btn.solid{background:var(--dot);color:var(--ink);box-shadow:0 10px 30px -10px rgba(255,181,71,.7)}
.band .btn.solid:hover{background:#ffc56a}
.band .btn.ghost{color:var(--frame);border-color:rgba(255,255,255,.3)}
.band .btn.ghost:hover{border-color:var(--frame);background:rgba(255,255,255,.06)}

/* ---------- footer ---------- */
.foot{padding-top:72px}
.foot-g{display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:28px}
.foot-brand p{color:var(--muted);font-size:14.5px;line-height:1.55;margin-top:14px;max-width:250px}

.foot h4{font-family:var(--mono);font-weight:400;font-size:12px;color:var(--muted);margin-bottom:14px}
.foot ul{display:grid;gap:9px}
.foot ul a{font-size:14.5px;font-weight:500;transition:color .2s}
.foot ul a:hover{color:var(--muted)}
.foot-b{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:64px;padding:22px 0 28px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.foot-b .dots{display:flex;gap:5px}
.foot-b .dots i{width:6px;height:6px;border-radius:50%;background:var(--dot)}
.foot-b .dots i:nth-child(2){background:var(--glow)}
.foot-b .dots i:nth-child(3){background:var(--ink)}

/* ---------- responsive ---------- */
@media (max-width:1180px){

  .foot-g{grid-template-columns:repeat(3,1fr)}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:1040px){
  .links,.acts .btn.text{display:none}
  .burger{display:inline-flex}
  .app-body{grid-template-columns:1fr}
  .side{display:none}
  .tpanel{grid-template-columns:1fr}
  .tcopy{padding:28px 20px 8px}
  .more{padding-top:22px}

  .plan{grid-template-columns:1fr}
  .faq-g{grid-template-columns:1fr;gap:32px}
  .head-row{flex-direction:column;align-items:flex-start;gap:28px}

  .band{grid-template-columns:1fr;padding:150px 40px 56px;gap:28px}
}
@media (max-width:760px){
  :root{--gut:20px}
  body{padding:0 6px 6px}
  .site{border-radius:22px}
  
  .navbar{padding:10px 10px 0}
  .nav{padding:6px 6px 6px 16px}
  .acts .btn.solid{padding:11px 16px}
  .hero{padding-top:52px}
  h1.hero-h{font-size:11.2vw}

  .cta .btn.lg{flex:1 1 150px}
  .field{flex-wrap:wrap;border-radius:22px;padding:6px}
  .field .ico{margin-left:10px}
  .field input{flex:1 1 140px}
  .field .btn{flex:1 1 100%;padding:15px}
  .stage{height:470px}

  .panel-wrap{margin-top:-110px;padding-inline:14px}
  .app-top{padding:10px 12px}
  .crumbs .mid{display:none}
  
  .main{padding:14px}
  .main-h{flex-direction:column;align-items:flex-start;gap:10px}
  
  .kpis{grid-template-columns:1fr 1fr}
  .kpi b{font-size:24px}
  .kpi svg{display:none}
  .main-g{grid-template-columns:1fr}
  
  .engines{padding-top:72px}
  .elist{gap:10px 22px;font-size:20px}
  .elist li+li::before{display:none}
  .sec{padding-top:112px}

  .check-note span:nth-child(3){flex-basis:100%;justify-content:center}
  .check-note span:nth-child(3)::before{display:none}
  .mock-h .f{display:none}
  
  .foot-b{flex-direction:row;flex-wrap:wrap}

  .tabs{width:100%;display:grid;grid-template-columns:repeat(3,1fr)}
  .tab{justify-content:center;padding:11px 6px;font-size:14px;gap:5px}
  .tpanels{margin-top:24px}
  .tpanel{border-radius:24px;padding:8px}
  .tstage{padding:14px;min-height:0;border-radius:18px}

  .plan-c{padding:32px 18px 24px}
  .plan-v{min-height:380px;padding:44px 14px 24px}

  .acc{padding:4px 16px}
  .qa button{font-size:17px;padding:18px 0}
  .qa .ans p{padding-right:0;font-size:15px}
  .band{margin:88px 6px 6px;padding:180px 20px 32px;border-radius:18px}
  
  .band .cta .btn{flex:1 1 150px}
  .foot-g{grid-template-columns:1fr 1fr}
  .foot-b{flex-direction:column;align-items:flex-start}
}
@media (max-width:350px){
  .acts .btn.solid{display:none}
  
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto}
}

/* White theme: cards sit on white, so they get a hairline edge instead of a grey page */
.tpanel,.plan,.acc,.app,.rcard,.field,.tabs,.mock,.pcard,.one,.mnav,.menu{border:1px solid rgba(10,16,34,.09)}
.nav{border:1px solid rgba(10,16,34,.08)}

/* ===== v2: AI visibility copy, dot field, platform links ===== */
.stage{height:440px;margin-top:4px}
.panel-wrap{margin-top:-150px}
.opp-tag{display:inline-flex;align-items:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--ink);background:var(--glow);border-radius:var(--r-pill);padding:3px 9px;white-space:nowrap}
.opp-tag.sm{font-size:9.5px;padding:2px 7px;margin-left:6px;vertical-align:1px}
.opp-go{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:12.5px;font-weight:600;background:var(--ink);color:#fff;border-radius:var(--r-pill);padding:7px 13px}
.opp-go:hover{background:#1f2a4d}

.verdict{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--ink);background:var(--dot);border-radius:var(--r-pill);padding:3px 10px;white-space:nowrap}

.band{padding-top:220px}

@media (max-width:760px){.stage{height:300px}.panel-wrap{margin-top:-90px}.band{padding-top:180px}}

/* ===== v3: spacing, platform tiles, scroll moments ===== */
.engines{padding-top:120px}
/* platform */

/* scroll moment 1: ten links become one answer */
.shift-scroll{height:250vh;margin-top:120px}
.ss-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.ss-in{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;width:100%}
.ss-say{font-size:clamp(38px,4.9vw,70px);line-height:1.02;max-width:640px}
.ss-say .w{color:rgba(10,16,34,.16);transition:color .25s linear}
.ss-say .w.on{color:var(--ink)}
.ss-vis{position:relative;height:min(560px,70vh);background:var(--tint);border-radius:28px;overflow:hidden}
.ss-vis canvas{position:absolute;inset:0;width:100%;height:100%}
.ss-lab{position:absolute;left:22px;top:20px;z-index:2;font-family:var(--mono);font-size:12px;color:var(--muted)}
.ss-lab span{position:absolute;white-space:nowrap;transition:opacity .35s,transform .35s var(--ease)}
.ss-lab .b{opacity:0;transform:translateY(6px);color:var(--ink);font-weight:600}
.ss-vis.done .ss-lab .a{opacity:0;transform:translateY(-6px)}
.ss-vis.done .ss-lab .b{opacity:1;transform:none}

/* scroll moment 2: Measure, Act, Prove */
.tour.is-scrolly .tabs{display:none}
.sc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;margin-top:40px}
.sc-steps{position:relative;padding-left:34px}
.sc-rail{position:absolute;left:6px;top:0;bottom:0;width:2px;background:var(--line)}
.sc-rail i{position:absolute;left:0;top:0;width:2px;height:0;background:var(--dot);border-radius:2px}
.sc-step{min-height:78vh;display:flex;align-items:center;opacity:.32;transition:opacity .45s var(--ease)}
.sc-step.on{opacity:1}
.sc-step .tcopy{padding:0;max-width:460px}

.sc-step .more{margin-top:24px;padding-top:0}
.sc-dot{position:absolute;left:0;width:14px;height:14px;border-radius:50%;background:var(--frame);border:2px solid var(--line3);transform:translateY(-50%);transition:background .3s,border-color .3s}
.sc-dot.on{background:var(--dot);border-color:var(--dot)}
.sc-sticky{position:sticky;top:110px;height:min(640px,calc(100vh - 140px));align-self:start}
.sc-nav{display:flex;gap:4px;background:var(--frame);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px;width:max-content;margin-bottom:14px}
.sc-nav button{font:inherit;font-size:13.5px;font-weight:600;color:var(--muted);padding:8px 14px;border-radius:var(--r-pill);display:inline-flex;gap:7px;align-items:center;transition:background .25s,color .25s}
.sc-nav button em{font-style:normal;font-family:var(--mono);font-size:10.5px;opacity:.7}
.sc-nav button[aria-current="true"]{background:var(--ink);color:#fff}
.sc-nav button[aria-current="true"] em{color:var(--glow);opacity:1}
.sc-nav button:focus-visible{outline:3px solid var(--dot);outline-offset:2px}
.sc-stage{position:relative;height:calc(100% - 56px)}
.sc-stage .tstage{position:absolute;inset:0;min-height:0;opacity:0;transform:translateY(18px) scale(.985);transition:opacity .55s var(--ease),transform .7s var(--ease);pointer-events:none}
.sc-stage .tstage.on{opacity:1;transform:none;pointer-events:auto}
.sc-stage .tstage .mock{animation:none!important}
@media (max-width:760px){.shift-scroll{height:auto;margin-top:72px}.ss-sticky{position:static;height:auto;padding:0}.ss-in{grid-template-columns:1fr;gap:28px}.ss-vis{height:320px}.ss-say .w{color:var(--ink)}}
@media (max-width:1040px) and (min-width:761px){.ss-in{grid-template-columns:1fr;gap:28px}.shift-scroll{height:auto}.ss-sticky{position:static;height:auto}.ss-vis{height:380px}.ss-say .w{color:var(--ink)}}
@media (prefers-reduced-motion:reduce){.shift-scroll{height:auto}.ss-sticky{position:static;height:auto;padding-block:40px}.ss-say .w{color:var(--ink)}}

/* ===== v4: more of the platform, cropped screens ===== */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;margin-top:56px}
.bx{grid-column:span 4;position:relative;display:flex;flex-direction:column;background:var(--tint);border:1px solid rgba(10,16,34,.07);border-radius:26px;overflow:hidden;min-height:380px;transition:border-color .3s,box-shadow .4s var(--ease)}

.bx-shot{position:relative;flex:1;min-height:240px;overflow:hidden;-webkit-mask:linear-gradient(180deg,#000 72%,transparent);mask:linear-gradient(180deg,#000 72%,transparent)}
.bx-shot::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(245,165,36,.55) 1.3px,transparent 1.8px) 0 0/12px 12px;-webkit-mask:radial-gradient(ellipse at 100% 0,#000,transparent 60%);mask:radial-gradient(ellipse at 100% 0,#000,transparent 60%)}
.m-card{position:absolute;left:28px;right:-40px;top:30px;background:var(--frame);border-radius:18px;box-shadow:var(--sh-3),0 0 0 1px rgba(10,16,34,.05);overflow:hidden;transition:transform .5s var(--ease);font-size:12.5px}

.bx:hover{border-color:rgba(10,16,34,.14);box-shadow:var(--sh-2)}
.bx:hover .m-card{transform:translateY(-6px)}
.bx:focus-visible{outline:3px solid var(--dot);outline-offset:3px}
.m-h{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.m-h b{font-weight:600;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-b{display:flex;flex-direction:column;gap:4px;padding:6px 26px 24px;position:relative}
.bx-b b{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em}
.bx-b span{color:var(--muted);font-size:14.5px;line-height:1.45;max-width:420px}
.bx-b em{font-style:normal;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px;margin-top:10px}
.bx-b em .ico{transition:transform .25s var(--ease)}
.bx:hover .bx-b em .ico{transform:translateX(3px)}
/* position grid */
.pg{display:grid;grid-template-columns:96px repeat(5,minmax(70px,1fr));gap:4px;padding:12px 14px}
.pg-q{font-size:10.5px;color:var(--muted);line-height:1.25;padding:0 2px 6px;align-self:end}
.pg-n{font-weight:600;align-self:center;font-size:12px}
.pg-n.me{color:var(--ink)}
.pg-c{display:grid;place-items:center;height:30px;border-radius:8px;font-weight:700;font-size:12px;background:#f2f4f8}
.pg-c.r1{background:#0a1022;color:#fff}.pg-c.r2{background:#3a4566;color:#fff}.pg-c.r3{background:#c9d0e0}.pg-c.r4{background:#e6e9f0}
.pg-c.rx{background:transparent;border:1.5px dashed rgba(10,16,34,.2);color:var(--muted);font-weight:500;font-size:10px}
.pg-c.me.r1,.pg-c.me.r2{background:#f5a524;color:#0a1022}.pg-c.me.r4{background:#ffe7bf}
/* sentiment */

/* sources */
.flow{display:block;width:100%;padding:8px 6px 4px}
.flow .fl{font-size:10.5px;fill:#0a1022;font-family:var(--mono)}
.flow .fb{font-size:11px;fill:#0a1022;font-weight:600;font-family:var(--body)}
/* shopping */

.sp{display:grid;grid-template-columns:20px 40px 1fr;gap:10px;align-items:center;padding:8px;border-radius:12px}
.sp.me{background:#fff6e5;box-shadow:inset 0 0 0 1px rgba(245,165,36,.4)}
.sp .rk{font-weight:800;font-family:var(--display);font-size:15px;text-align:center}

.sp b{display:block;font-size:12.5px}.sp small{color:var(--muted);font-size:11px}
/* locations tile map */

/* content */

/* openings */

/* site health */

/* ai traffic */
.tr{padding:12px 14px}
.trk b{font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-.02em}
.trk span{margin-left:8px;font-size:11.5px;font-weight:600;color:#0b5d45}
.tr svg{display:block;width:100%;height:84px;margin-top:6px}
.trl{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;font-size:11px;color:var(--muted)}
.trl span{display:flex;align-items:center;gap:5px}.trl i{width:8px;height:8px;border-radius:50%}
/* dashboards */

@media (max-width:1040px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.bx{grid-column:span 1}}
@media (max-width:640px){.bento{grid-template-columns:1fr}.bx{grid-column:span 1}.bx{min-height:340px}.m-card{left:18px}}

/* ===== v5: swipeable screens, solutions menu ===== */
.bx-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:48px}
.bx-tabs{display:inline-flex;gap:4px;background:var(--frame);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px}
.bx-tabs button{font:inherit;font-size:14px;font-weight:600;color:var(--muted);padding:9px 16px;border-radius:var(--r-pill);transition:background .25s,color .25s}
.bx-tabs button[aria-selected="true"]{background:var(--ink);color:#fff}
.bx-arrows{display:flex;align-items:center;gap:8px}
.bx-count{font-family:var(--mono);font-size:12px;color:var(--muted);margin-right:6px;font-variant-numeric:tabular-nums}
.bx-arr{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--frame);border:1px solid var(--line2);color:var(--ink);transition:background .2s,border-color .2s,opacity .2s}
.bx-arr:hover{background:var(--tint);border-color:var(--ink)}
.bx-arr:disabled{opacity:.35;cursor:default;background:var(--frame);border-color:var(--line2)}
.bx-arr .ico{width:18px;height:18px}
.bx-tabs button:focus-visible,.bx-arr:focus-visible,.bento-pages:focus-visible{outline:3px solid var(--dot);outline-offset:3px}
.bento-pages{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;margin:20px calc(var(--gut)*-1) 0;padding:6px var(--gut) 10px;gap:32px;overscroll-behavior-x:contain}
.bento-pages::-webkit-scrollbar{display:none}
.bento-page{flex:0 0 100%;margin-top:0;scroll-snap-align:center;scroll-snap-stop:always}
@media (prefers-reduced-motion:reduce){.bento-pages{scroll-behavior:auto}}
@media (max-width:640px){
  .bx-tabs{display:none}
  .bento-pages{gap:12px}
  .bento-page{display:contents}
  .bento-page .bx{flex:0 0 86%;scroll-snap-align:start;scroll-snap-stop:normal}
}
/* solutions menu */
.menu.sol-menu{width:min(700px,calc(100vw - 80px))}

/* ===== v6: detail pass — labels, type proportions ===== */
.say{margin-top:0}
.step-l{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.01em;color:var(--ink)}
.step-l em{font-style:normal;display:inline-grid;place-items:center;min-width:34px;height:26px;padding:0 8px;border-radius:var(--r-pill);background:var(--glow);font-size:13px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.tcopy h3{margin-top:18px}
.mm-h{font-family:var(--body);font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:0}
.mnav .mgrp h4{font-family:var(--body);font-weight:600;font-size:12.5px}
.foot h4{font-family:var(--body);font-weight:600;font-size:14px;color:var(--ink);margin-bottom:16px}

.ss-lab{font-family:var(--body);font-size:13px;font-weight:600}
.engines p{font-size:15.5px}
.bx-count{font-size:13px}

h2,h3{text-wrap:balance}

.bento-pages{gap:calc(var(--gut) * 2 + 16px)}
.band p{text-wrap:balance;max-width:380px}
.band .cta{flex-wrap:wrap}
.bx-shot{flex:none;height:250px}
.bx-b{flex:1}

/* ================= v7: fewer, bigger screens; quieter text; one-shot motion ================= */
/* tour steps: one sentence, no bullet lists */
.tcopy p{max-width:420px}

/* teams: one big screen, three views */
.tms{margin-top:56px}
.tm-p{background:var(--frame);border:1px solid rgba(10,16,34,.09);border-radius:32px;padding:12px}
.tm-copy{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;padding:30px 30px 30px 32px}
.tm-copy h3{font-family:var(--display);font-weight:800;font-size:clamp(28px,2.9vw,40px);line-height:1.04;letter-spacing:-.03em;max-width:520px}
.tm-copy p{color:var(--muted);font-size:16.5px;line-height:1.6;max-width:440px;text-wrap:pretty}
.tm-copy .more{padding-top:14px}
.tm-stage{position:relative;overflow:hidden;background:var(--tint);border-radius:24px;height:500px;padding:48px 56px 0}
.tm-stage>canvas{position:absolute;inset:0;width:100%;height:100%}
.tm-mock{min-height:calc(100% + 24px);border-radius:20px 20px 0 0}
.tm-mock .mock-h{padding:14px 18px}
.tb-l{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:10px}
/* brands */

.nx{display:grid;gap:5px;justify-items:start;background:#fff8ea;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(245,165,36,.35);padding:12px 14px}
.nx b{font-size:13.5px;font-weight:600;margin-top:3px}
.nx small{font-size:12px;color:var(--muted)}
/* agencies */

.cn{display:flex;align-items:center;gap:10px;min-width:0}
.cn>i{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-style:normal;font-family:var(--display);font-weight:800;font-size:13px;background:var(--tint);box-shadow:inset 0 0 0 1px var(--line)}
.cn b{display:block;font-weight:600}
.cn small{display:block;color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cn>span{min-width:0}

.rp{border-left:1px solid var(--line);padding:18px 20px;display:flex;flex-direction:column}
.rp-h{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:16px}
.rp-h b{font-weight:600}
.rp .chip{font-size:10.5px;font-weight:600;border-radius:var(--r-pill);padding:3px 8px;margin-left:auto;white-space:nowrap}
.rp .chip.ok{background:#e4f4ec;color:#0b5d45}
.rp small{font-size:12px;color:var(--muted)}

.rp .spark{height:52px;margin-bottom:14px}
.rp-l{display:flex;justify-content:space-between;font-size:12.5px;padding:8px 0;border-top:1px solid var(--line)}
.rp-l span{color:var(--muted)}
.rp-l b{font-weight:700;font-variant-numeric:tabular-nums}
.rp-go{margin-top:14px;align-self:flex-start;background:var(--ink);color:var(--frame);font-size:12px;font-weight:600;border-radius:var(--r-pill);padding:7px 14px}
/* e-commerce */

.pth{flex:none;width:32px;height:32px;border-radius:9px;background:var(--tint);box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center}
.pth .ico{width:16px;height:16px;color:var(--ink-70)}

/* checker note: hairline separators, no dots */
.check-note span+span::before{width:1px;height:12px;border-radius:0;background:var(--line3);opacity:1;margin-right:6px}

/* pricing: free tools as a quiet link list */
.ftools{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;margin-top:40px;border-top:1px solid var(--line);padding-top:18px}
.ft-h{grid-column:1/-1;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:4px}
.ftools a{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:15px;font-weight:600;padding:11px 0;border-bottom:1px solid var(--line);transition:color .2s}
.ftools a .ico{width:16px;height:16px;color:var(--muted);transition:transform .25s var(--ease),color .2s}
.ftools a:hover .ico{transform:translate(2px,-2px);color:var(--ink)}

@media (max-width:1040px){
  .tm-copy{grid-template-columns:1fr;gap:14px;padding:26px 22px 22px}
  .tm-stage{padding:32px 28px 0;height:480px}
  
  .rp{display:none}

}
@media (max-width:700px){
  .tms{margin-top:36px}
  .tm-p{border-radius:24px;padding:8px}
  .tm-copy{padding:20px 14px 18px}
  .tm-stage{padding:14px 14px 0;height:440px;border-radius:18px}
  .tm-mock .mock-h .f{display:none}

  .ftools{grid-template-columns:1fr}
}

/* ---------- one-shot motion (off under reduced motion) ---------- */
@keyframes growx{from{transform:scaleX(0)}to{transform:none}}
@keyframes growy{from{transform:scaleY(0)}to{transform:none}}
@keyframes pop{0%{opacity:0;transform:translateY(6px) scale(.96)}100%{opacity:1;transform:none}}
@keyframes glowin{0%{box-shadow:inset 0 0 0 1px rgba(245,165,36,0);background-color:rgba(255,248,234,0)}100%{box-shadow:inset 0 0 0 1px rgba(245,165,36,.35);background-color:#fff8ea}}
@media (prefers-reduced-motion:no-preference){
  /* hero panel: lines draw and the opportunity settles in once the panel is in view */
  .app.pre .vchart .l{visibility:hidden}
  .app.play .vchart .l{stroke-dasharray:1;animation:draw 1.5s .2s var(--ease) both}
  .app.play .vchart .l.me{animation-duration:1.9s;animation-delay:.35s}
  .app.pre .shipped>span,.app.pre .cs.opp>*{opacity:0}
  .app.play .shipped>span{animation:fadeup .5s 1.5s var(--ease) both}
  .app.play .shipped>span+span{animation-delay:1.65s}
  .app.play .cs.opp>*{animation:fadeup .55s .6s var(--ease) both}
  .app.play .cs.opp>*:nth-child(2){animation-delay:.7s}
  .app.play .cs.opp>*:nth-child(3){animation-delay:.8s}
  .app.play .cs.opp>*:nth-child(4){animation-delay:.95s}
  .app.play .cs.opp>*:nth-child(5){animation-delay:1.1s}

  /* tour stages play when their step is on (scroll story) or their tab is open */
  .sc-stage .tstage.on .agrr:not(.h),.tpanel:not([hidden]) .agrr:not(.h){animation:fadeup .5s var(--ease) both}
  .sc-stage .tstage.on .agrr:nth-child(3),.tpanel:not([hidden]) .agrr:nth-child(3){animation-delay:.07s}
  .sc-stage .tstage.on .agrr:nth-child(4),.tpanel:not([hidden]) .agrr:nth-child(4){animation-delay:.14s}
  .sc-stage .tstage.on .agrr:nth-child(5),.tpanel:not([hidden]) .agrr:nth-child(5){animation-delay:.21s}
  .sc-stage .tstage.on .agrr i,.tpanel:not([hidden]) .agrr i{animation:pop .4s .35s var(--ease) both}
  .sc-stage .tstage.on .agrr.opp,.tpanel:not([hidden]) .agrr.opp{animation:fadeup .5s var(--ease) both,glowin .6s .9s var(--ease) both}
  .sc-stage .tstage.on .excerpt,.tpanel:not([hidden]) .excerpt{animation:fadeup .6s 1.1s var(--ease) both}
  .sc-stage .tstage.on .nmr,.tpanel:not([hidden]) .nmr{animation:fadeup .5s var(--ease) both}
  .sc-stage .tstage.on .nmr+.nmr,.tpanel:not([hidden]) .nmr+.nmr{animation-delay:.08s}
  .sc-stage .tstage.on .nmr+.nmr+.nmr,.tpanel:not([hidden]) .nmr+.nmr+.nmr{animation-delay:.16s}
  .sc-stage .tstage.on .apl,.tpanel:not([hidden]) .apl{animation:fadeup .55s .5s var(--ease) both}
  .sc-stage .tstage.on .apl-s li,.tpanel:not([hidden]) .apl-s li{animation:fadeup .45s .8s var(--ease) both}
  .sc-stage .tstage.on .apl-s li:nth-child(2),.tpanel:not([hidden]) .apl-s li:nth-child(2){animation-delay:.95s}
  .sc-stage .tstage.on .apl-s li:nth-child(3),.tpanel:not([hidden]) .apl-s li:nth-child(3){animation-delay:1.1s}
  .sc-stage .tstage.on .apl-s li:nth-child(4),.tpanel:not([hidden]) .apl-s li:nth-child(4){animation-delay:1.25s}
  .sc-stage .tstage.on .apl-f .go,.tpanel:not([hidden]) .apl-f .go{animation:pop .45s 1.6s var(--ease) both}
  .sc-stage .tstage.on .verdict,.tpanel:not([hidden]) .verdict{animation:pop .45s 1.5s var(--ease) both}
  .sc-stage .tstage.on .pv-ba>div,.tpanel:not([hidden]) .pv-ba>div{animation:fadeup .5s .2s var(--ease) both}
  .sc-stage .tstage.on .pv-ba>div+div,.tpanel:not([hidden]) .pv-ba>div+div{animation-delay:.55s}
  .sc-stage .tstage.on .pv-ba .rng i,.tpanel:not([hidden]) .pv-ba .rng i{transform-origin:left;animation:growx .8s .7s var(--ease) both}
  .sc-stage .tstage.on .pv-d,.tpanel:not([hidden]) .pv-d{animation:fadeup .5s 1.1s var(--ease) both}
  .sc-stage .tstage.on .etr .eln,.tpanel:not([hidden]) .etr .eln{transform-origin:left;animation:growx .7s 1.2s var(--ease) both}
  .sc-stage .tstage.on .etr .eaf,.tpanel:not([hidden]) .etr .eaf{animation:fadein .3s 1.5s both}

  /* teams: each view settles in when opened or first seen */
  .tms.play .tm-p:not([hidden]) .tm-copy>*{animation:fadeup .55s var(--ease) both}
  .tms.play .tm-p:not([hidden]) .tm-copy>*+*{animation-delay:.06s}
  .tms.play .tm-p:not([hidden]) .tm-mock{animation:fadeup .7s .1s var(--ease) both}
  .tms.play .tm-p:not([hidden]) .mg-ch .ln{stroke-dasharray:1;animation:draw 1.4s .45s var(--ease) both}
  .tms.play .tm-p:not([hidden]) .mg-ch .ms g{animation:fadein .3s 1.3s both}
  .tms.play .tm-p:not([hidden]) .fr i b{transform-origin:left;animation:growx .9s .5s var(--ease) both}
  .tms.play .tm-p:not([hidden]) .spark i{transform-origin:bottom;animation:growy .7s .5s var(--ease) both}
  .tms.play .tm-p:not([hidden]) .wt,.tms.play .tm-p:not([hidden]) .cwc,.tms.play .tm-p:not([hidden]) .bkc{animation:fadeup .5s .45s var(--ease) both}
  .tms.play .tm-p:not([hidden]) .wt+.wt,.tms.play .tm-p:not([hidden]) .cwc+.cwc,.tms.play .tm-p:not([hidden]) .bkc+.bkc{animation-delay:.55s}
  .tms.play .tm-p:not([hidden]) .nx{animation:fadeup .55s .9s var(--ease) both}
}

/* ================= v8: canonical navigation, checker hero, screens drawn from the product ================= */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* header menus */
.menu.prod-menu{width:min(920px,calc(100vw - 80px))}
.menu.sol-menu{width:min(720px,calc(100vw - 80px))}
.mm-grid.g3{grid-template-columns:repeat(3,1fr)}
.mm-grid.g2{grid-template-columns:1fr 1fr}
.mm-grid.g3 .mm-col .mm-list,.mm-grid.g2 .mm-col .mm-list{grid-template-columns:1fr}
.mm-grid.g3 .mm-col+.mm-col,.mm-grid.g2 .mm-col+.mm-col{background:none;border-left:1px solid var(--line)}
.mm-shared{display:flex;flex-wrap:wrap;align-items:center;gap:8px 26px;padding:13px 24px;border-top:1px solid var(--line);font-size:14px;font-weight:600}
.mm-shared a{display:inline-flex;align-items:center;gap:8px;color:var(--ink);transition:color .2s}
.mm-shared a .ico{width:16px;height:16px;color:var(--muted);transition:transform .25s var(--ease),color .2s}
.mm-shared a:first-child .ico{order:2;color:var(--ink)}
.mm-shared a:hover .ico{color:var(--ink)}
.mm-shared a:first-child:hover .ico{transform:translateX(3px)}
.menu.small .sm.all{margin-top:4px;border-top:1px solid var(--line);border-radius:0 0 12px 12px;font-weight:600}
@media (max-width:1240px){.acts .btn.text{display:none}}
@media (max-width:760px){.acts .btn.solid{display:none}}
@media (min-width:1041px) and (max-width:1180px){.nl{padding:9px 10px;font-size:14px}}

/* hero: the checker is the primary action; the product panel shows in the first screen */
.hero{padding-top:44px}
.stage{height:400px;margin-top:0}
.panel-wrap{margin-top:-250px}
@media (max-width:760px){.stage{height:250px}.panel-wrap{margin-top:-80px}}
.checker{max-width:620px;margin-top:34px}
.check-note{display:block;font-size:14px;line-height:1.5;margin-top:14px}
.check-note a{display:inline-flex;align-items:center;gap:5px;margin-left:6px;color:var(--ink);font-weight:600;white-space:nowrap}
.check-note a .ico{width:15px;height:15px;transition:transform .25s var(--ease)}
.check-note a:hover .ico{transform:translateX(3px)}
.rscore{display:flex;align-items:baseline;gap:10px;margin:2px 0 12px}
.rscore b{font-family:var(--display);font-weight:800;font-size:38px;letter-spacing:-.03em;line-height:1}
.rscore span{font-size:13px;color:var(--muted)}
.rfac{display:grid;gap:8px}
.rfac li{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:12px;font-size:13px}
.rfac i{display:block;height:7px;border-radius:99px;background:var(--tint);overflow:hidden}
.rfac i b{display:block;height:100%;border-radius:99px;background:var(--ink)}
.rfac li:first-child i b,.rfac li:nth-child(2) i b{background:var(--dot)}

/* product panel, drawn from Visibility */
.app-tools{gap:8px}
.fchips{display:flex;gap:5px}
.fchips span{font-size:11.5px;font-weight:500;color:var(--ink-70);border:1px solid var(--line2);border-radius:8px;padding:4px 9px;white-space:nowrap}
.side-h{font-family:var(--body);font-size:11.5px;font-weight:600;letter-spacing:0;padding:4px 10px 5px}
.side-i{padding:6px 10px}
.side-g{margin-bottom:12px}
.main-h h3{font-size:21px;line-height:1.2;max-width:720px;text-wrap:balance}
.legend i.me{background:var(--dot)}
.vchart{display:block;width:100%;height:auto;overflow:visible}
.vchart .sg line,.mg-ch .sg line{stroke:rgba(10,16,34,.07)}
.vchart .ax text,.mg-ch .ax text{font-family:var(--mono);font-size:9.5px;fill:var(--muted);text-anchor:end}
.vchart .ax text[text-anchor="start"],.mg-ch .ax text[text-anchor="start"]{text-anchor:start}
.vchart .ax text:nth-child(6),.mg-ch .ax text:nth-child(5){text-anchor:middle}
.vchart .mk line{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3;opacity:.5}
.vchart .mk circle{fill:var(--ink)}
.vchart .mk text{font-family:var(--body);font-size:10px;font-weight:700;fill:#fff;text-anchor:middle}
.vchart .l{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke:#c9d0e0}
.vchart .l.o2{stroke:#9aa4bd}
.vchart .l.c{stroke:#2b97d1}
.vchart .l.me{stroke:var(--dot);stroke-width:3}
.vchart .lb text{font-family:var(--body);font-size:10.5px;font-weight:500;fill:var(--muted)}
.vchart .lb .c{fill:#1f6f99;font-weight:600}
.vchart .lb .me{fill:var(--ink);font-weight:700}
.shipped{display:grid;gap:6px;margin-top:8px;font-size:12px}
.shipped>span{display:flex;align-items:center;gap:8px;color:var(--ink-70)}
.shipped b{width:18px;height:18px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:10px;flex:none}
.shipped em{margin-left:auto;font-style:normal;font-size:11px;font-weight:600;color:#0b5d45;background:#e4f4ec;border-radius:var(--r-pill);padding:2px 8px;white-space:nowrap}
.shipped em.w{color:var(--muted);background:var(--tint)}
.cs.opp{display:flex;flex-direction:column}
.cs.opp .ans-q{font-size:15px;line-height:1.35;font-weight:600}
.cs.opp .opp-go{margin-top:auto}

/* tour: Measure (Answers) */
.agr{padding:4px 14px 6px}
.agrr{display:grid;grid-template-columns:minmax(0,2.3fr) repeat(6,minmax(0,.62fr));align-items:center;gap:6px;padding:9px 6px;border-bottom:1px solid var(--line);font-size:12.5px}
.agrr.h{font-size:10.5px;color:var(--muted);font-weight:600;padding:8px 6px}
.agrr.h span:not(:first-child),.agrr span:not(:first-child){text-align:center}
.agrr .q{font-weight:500;line-height:1.35}
.agrr i{display:inline-grid;place-items:center;min-width:30px;height:22px;padding:0 6px;border-radius:var(--r-pill);font-style:normal;font-size:11px;font-weight:700}
.agrr i.p{background:var(--tint)}
.agrr i.p.one{background:var(--ink);color:#fff}
.agrr i.p.o{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line3)}
.agrr i.n{color:var(--line3);font-weight:500}
.agrr i.u{border:1.5px dashed var(--line3);color:var(--muted);min-width:22px;padding:0}
.agrr.opp{background:#fff8ea;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(245,165,36,.35);border-bottom-color:transparent}
.excerpt .why{margin-left:auto;font-size:11px;font-weight:600;color:#1f6f99;background:rgba(43,151,209,.12);border-radius:var(--r-pill);padding:3px 9px;white-space:nowrap}
/* tour: Act (Next moves + Agent plan) */
.nmv{padding:6px 10px 2px}
.nmr{display:grid;grid-template-columns:26px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:10px 8px;border-radius:12px;font-size:13px}
.nmr+.nmr{border-top:1px solid var(--line)}
.nmr.on{background:#fff8ea;box-shadow:inset 0 0 0 1px rgba(245,165,36,.35)}
.nmr.on+.nmr{border-top-color:transparent}
.nmr .rk{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--tint);font-size:11px;font-weight:700}
.nmr.on .rk{background:var(--dot)}
.nmr b{display:block;font-weight:600;line-height:1.3}
.nmr small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.nmr .imp{font-size:11.5px;font-weight:600;white-space:nowrap}
.nmr .stt{font-size:11px;font-weight:600;color:var(--muted);background:var(--tint);border-radius:var(--r-pill);padding:3px 9px;white-space:nowrap}
.nmr .stt.ok{color:#0b5d45;background:#e4f4ec}
.apl{margin:6px 10px 10px;background:var(--tint);border-radius:14px;padding:14px 16px}
.apl-h{display:flex;gap:12px;align-items:flex-start}
.apl-h .ag{width:30px;height:30px;border-radius:10px;background:var(--ink);display:grid;place-items:center;flex:none}
.apl-h .ag .ico{width:16px;height:16px;color:var(--glow)}
.apl-h small{display:block;font-size:11px;color:var(--muted);font-weight:500}
.apl-h b{display:block;font-size:14px;font-weight:600;line-height:1.35;margin-top:2px}
.apl-s{display:grid;gap:6px;margin:12px 0 0;counter-reset:a}
.apl-s li{counter-increment:a;display:flex;flex-wrap:wrap;align-items:center;gap:6px;background:var(--frame);border-radius:10px;padding:8px 10px;font-size:12.5px;box-shadow:0 0 0 1px var(--line)}
.apl-s li::before{content:counter(a);width:18px;height:18px;border-radius:50%;background:var(--tint);display:grid;place-items:center;font-size:10px;font-weight:700}
.apl-s li b{font-weight:600;margin-right:4px}
.apl-s .ev{font-family:var(--mono);font-size:10px;color:var(--ink-70);background:var(--tint);border-radius:6px;padding:2px 6px}
.apl-s .ev.gap{background:#fff8ea;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(245,165,36,.4)}
.apl-f{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font-size:12px;color:var(--muted)}
.apl-f .go{background:var(--ink);color:#fff;font-weight:600;border-radius:var(--r-pill);padding:7px 14px;white-space:nowrap}
/* tour: Prove (shipped work record) */
.pvr{padding:14px 16px 4px}
.pv-meta{font-size:12px;color:var(--muted)}
.pv-t{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:12px}
.pv-t b{font-size:14px;font-weight:600}
.pv-t span{font-size:11.5px;color:var(--muted);white-space:nowrap}
.pv-ba{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.pv-ba>div{background:var(--tint);border-radius:12px;padding:12px 14px}
.pv-ba small{display:block;font-size:11.5px;color:var(--muted)}
.pv-ba b{display:block;font-family:var(--display);font-weight:800;font-size:28px;letter-spacing:-.03em;line-height:1.1;margin:2px 0 8px}
.pv-ba .rng{position:relative;display:block;height:8px;border-radius:99px;background:var(--frame);margin-bottom:6px}
.pv-ba .rng i{position:absolute;top:0;bottom:0;border-radius:99px;background:#c9d0e0}
.pv-ba .rng em{position:absolute;top:-3px;width:3px;height:14px;border-radius:2px;background:var(--ink);transform:translateX(-50%)}
.pv-ba .aft{background:#fff8ea;box-shadow:inset 0 0 0 1px rgba(245,165,36,.35)}
.pv-ba .aft .rng i{background:var(--dot)}
.pv-d{font-size:12.5px;color:var(--ink-70);margin-top:10px}
.pv-d b{color:#0b5d45}
.emv{margin:8px 10px 10px;border-top:1px solid var(--line);padding:10px 6px 2px}
.emv-h{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;margin-bottom:6px}
.emv-h b{font-weight:600}
.emv-h span{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.emvr{display:grid;grid-template-columns:78px 1fr 74px;align-items:center;gap:10px;padding:5px 0;font-size:12px}
.emvr>b{font-size:11.5px;font-weight:600;color:var(--muted);text-align:right}
.emvr>b.up{color:#0b5d45}
.etr{position:relative;height:12px;border-radius:99px;background:linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat}
.etr i,.emv-h i{position:absolute;top:50%;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%)}
.emv-h i{position:static;transform:none;display:inline-block}
.eb4{background:var(--frame);box-shadow:inset 0 0 0 2px #9aa4bd}
.eaf{background:var(--ink)}
.etr .eln{height:3px;width:auto;border-radius:2px;transform:translateY(-50%);background:var(--dot)}

.nmr .stt{min-width:0;display:inline-block}
.nmr .stt.ok::before{content:none}
.agrr i{line-height:1;vertical-align:middle}
.rsr i{line-height:1;align-self:center}
.mock-h .verdict{background:#e4f4ec;color:#0b5d45}

.tm-tabs .tab{gap:0}
.b3 .bx .m-card,.b3 .bx.tall .m-card{right:26px}
.cl-n{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:4px 14px 14px;padding:12px 14px;border-radius:12px;background:#fff8ea;box-shadow:inset 0 0 0 1px rgba(245,165,36,.35)}
.cl-n>span:first-child{display:grid;gap:4px;justify-items:start}
.cl-n b{font-size:13px;font-weight:600}
.cl-n small{font-size:11.5px;color:var(--muted)}
.btnk{flex:none;font-size:11.5px;font-weight:600;background:var(--ink);color:#fff;border-radius:var(--r-pill);padding:6px 12px}

/* teams: Marketing & growth */
.mg{display:grid;grid-template-columns:minmax(0,1fr) 300px}
.mg-c{padding:18px 20px}
.mg-t{font-size:15px;font-weight:600;line-height:1.35;margin-bottom:6px}
.mg-ch{display:block;width:100%;height:auto;overflow:visible}
.mg-ch .rband{fill:rgba(255,181,71,.22)}
.mg-ch .ln{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mg-ch .ms circle{stroke:var(--frame);stroke-width:2}
.mg-ch .ms text{font-family:var(--body);font-size:10px;font-weight:700;text-anchor:middle}
.mg-ch .ms .v{fill:#0b5d45}.mg-ch .ms .v+text{fill:#fff}
.mg-ch .ms .x{fill:#5a6482}.mg-ch .ms .x+text{fill:#fff}
.mg-ch .ms .i{fill:#e6e9f0}.mg-ch .ms .i+text{fill:var(--ink)}
.mg-ch .ms .w{fill:var(--frame);stroke:var(--line3);stroke-dasharray:2 2}.mg-ch .ms .w+text{fill:var(--muted)}
.tally{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:12px;color:var(--ink-70)}
.tally span{display:inline-flex;align-items:center;gap:6px}
.tally b{font-weight:700;color:var(--ink)}
.tally i{width:10px;height:10px;border-radius:50%}
.tally i.v{background:#0b5d45}.tally i.x{background:#5a6482}.tally i.i{background:#e6e9f0}.tally i.w{box-shadow:inset 0 0 0 1.5px var(--line3)}
.mg-s{border-left:1px solid var(--line);padding:18px 18px}
.wt{display:grid;grid-template-columns:auto 1fr auto;column-gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.wt .k{grid-row:span 2;font-size:10.5px;font-weight:700;background:var(--tint);border-radius:6px;padding:3px 7px}
.wt b{font-weight:600;line-height:1.3}
.wt small{grid-column:2;color:var(--muted);font-size:11.5px}
.wt .rv{grid-row:1 / span 2;grid-column:3;font-size:11.5px;font-weight:600;border:1px solid var(--line2);border-radius:var(--r-pill);padding:4px 10px}
.wt-n{font-size:11.5px;color:var(--muted);margin-top:10px}
/* teams: Agencies */
.agc{display:grid;grid-template-columns:minmax(0,1fr) 280px}
.agc-c{padding:18px 20px}
.cw{display:grid}
.cwc{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.cws{font-size:11px;font-weight:600;color:#0b5d45;background:#e4f4ec;border-radius:var(--r-pill);padding:3px 9px;white-space:nowrap}
.cws.hold{color:var(--ink);background:#fff1d6}
.cws.off{color:var(--muted);background:var(--tint)}
.sd{display:grid}
.sdr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.sdr b{display:block;font-weight:600}
.sdr small{display:block;font-size:11.5px;color:var(--muted)}
.sdr .dots{display:flex;align-items:center;gap:10px}
.sdr .dots i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line3)}
.sdr .dots i.d{background:#0b5d45;box-shadow:none}
.sdr .dots i.sp{visibility:hidden}
.sdr .dots i.t{width:2px;height:22px;border-radius:2px;background:var(--ink);box-shadow:none}
.sdr .dots i.h{box-shadow:inset 0 0 0 1.5px var(--dot);background:repeating-linear-gradient(45deg,#fff1d6 0 2px,transparent 2px 4px)}
.rp-q{font-size:13px;line-height:1.45;margin-bottom:12px}
/* teams: Ecommerce */
.bk{padding:14px 16px 16px}
.bkg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.bkc{position:relative;border:1px solid var(--line);border-radius:14px;padding:10px;font-size:12.5px;display:flex;flex-direction:column;gap:2px}
.bkc.me{border-color:transparent;box-shadow:0 0 0 2px var(--dot)}
.bkc .n{position:absolute;left:10px;top:10px;width:20px;height:20px;border-radius:6px;background:var(--tint);display:grid;place-items:center;font-size:10.5px;font-weight:700}
.bkc.me .n{background:var(--ink);color:#fff}
.bkpl{display:flex;gap:3px;justify-content:flex-end;height:20px;align-items:center}
.bkpl i{width:7px;height:7px;border-radius:2px;box-shadow:inset 0 0 0 1px var(--line3)}
.bkpl i.on{background:var(--ink);box-shadow:none}
.bkc .pth{width:100%;height:64px;margin:6px 0 8px;border-radius:10px}
.bkc .pth .ico{width:22px;height:22px}
.bkc b{font-weight:600}
.bkc small{color:var(--muted);font-size:11.5px}
.bkc em{font-style:normal;font-size:11px;color:#8a5a00;margin-top:4px;line-height:1.35}
.bks{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;margin-top:14px;align-items:start}
.fr{display:grid;grid-template-columns:86px 1fr 36px 62px;align-items:center;gap:10px;padding:6px 0;font-size:12.5px}
.fr i{display:block;height:8px;border-radius:99px;background:var(--tint);overflow:hidden}
.fr i b{display:block;height:100%;border-radius:99px;background:var(--dot)}
.fr em{font-style:normal;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.fr small{color:var(--muted);font-size:11.5px}
.fr.dr small{color:var(--ink);font-weight:700}

/* product grid: nine capabilities in three pages */
.bento.b3{grid-template-rows:auto auto}
.b3 .bx{grid-column:span 5}
.b3 .bx.tall{grid-column:span 7;grid-row:span 2}
.b3.flip .bx.tall{grid-column:6 / span 7;grid-row:1 / span 2}
.b3.flip .bx:not(.tall){grid-column:1 / span 5}
.bx.tall .bx-shot{flex:1;height:auto;min-height:560px}
.bx.tall .bx-b{flex:none}
.pg-c.me.r3{background:#ffd08a}
.bx-all{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;margin-right:14px;white-space:nowrap}
.bx-all .ico{width:16px;height:16px;transition:transform .25s var(--ease)}
.bx-all:hover .ico{transform:translateX(3px)}
.rk3{padding:6px 14px 14px;border-top:1px solid var(--line);margin-top:4px}
.rk3 .tb-l{margin:8px 0 8px}
.rkr,.qlr{display:grid;grid-template-columns:92px 1fr 40px;align-items:center;gap:10px;padding:5px 0;font-size:12px}
.rkr i,.qlr i{display:block;height:8px;border-radius:99px;background:var(--tint);overflow:hidden}
.rkr i b{display:block;height:100%;border-radius:99px;background:#2b97d1}
.rkr:not(:first-child) i b{background:#c9d0e0}
.rkr.me i b{background:var(--dot)}
.rkr.me span{font-weight:700}
.rkr em,.qlr em{font-style:normal;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.ql{padding:12px 14px}
.qlr{grid-template-columns:118px 1fr 34px}
.qlr i b{display:block;height:100%;border-radius:99px;background:var(--ink)}
.qlr.neg i b{background:#2b97d1}
.qlr small{display:block;font-size:10px;font-weight:600;color:#1f6f99}
.qlw{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.qlw span{font-size:11px;font-weight:600;background:#fff1d6;border-radius:var(--r-pill);padding:3px 9px}
.qlw span.n{background:rgba(43,151,209,.12);color:#1f6f99}
.pc{padding:8px 14px 12px}
.pcr{display:grid;grid-template-columns:104px 1fr 56px;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:12px}
.pcr span{font-weight:600;line-height:1.25}
.pcr small{display:block;font-weight:400;font-size:10.5px;color:var(--muted)}
.pcr i{position:relative;height:12px;background:linear-gradient(var(--line2),var(--line2)) center/100% 1px no-repeat}
.pcr u{position:absolute;top:0;width:2px;height:12px;background:var(--ink-70);text-decoration:none}
.pcr i b{position:absolute;top:50%;width:10px;height:10px;border-radius:50%;background:#2b97d1;transform:translate(-50%,-50%)}
.pcr em{font-style:normal;font-weight:600;font-size:11.5px;text-align:right;color:var(--muted)}
.pcr em.up{color:#0b5d45}
.chip-k{font-size:10.5px;font-weight:600;color:var(--muted);background:var(--tint);border-radius:var(--r-pill);padding:2px 8px;margin-left:auto}
.rs-g{padding:10px 14px 6px}
.rsr{display:grid;grid-template-columns:84px repeat(5,minmax(0,1fr));align-items:center;gap:6px;padding:7px 0;border-bottom:1px solid var(--line);font-size:12px}
.rsr.h{font-size:10px;color:var(--muted);font-weight:600}
.rsr>span:first-child{font-weight:600}
.rsr i,.rsr.h span:not(:first-child){text-align:center}
.rsr i{font-style:normal;font-size:11px;font-weight:700;justify-self:center;min-width:30px;height:22px;display:inline-grid;place-items:center;border-radius:var(--r-pill);padding:0 6px}
.rsr i.p{background:var(--tint)}
.rsr i.p.one{background:#2b97d1;color:#fff}
.rsr i.p.k{background:var(--dot)}
.rsr i.n{color:var(--line3)}
.rsr i.x{font-size:10px;font-weight:500;color:var(--muted)}
.rsr.me{background:#fff8ea;border-radius:8px;border-bottom-color:transparent;padding-left:6px;padding-right:6px;margin:0 -6px}
.rs-f{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px 12px}
.rs-f p{font-size:12.5px;font-weight:600;line-height:1.35}
.rs-b{display:flex;gap:6px;flex:none}
.rs-b span{font-size:11.5px;font-weight:600;border-radius:var(--r-pill);padding:5px 11px}
.rs-b .b1{background:var(--ink);color:#fff}
.rs-b .b2{box-shadow:inset 0 0 0 1px var(--line2)}
.rs-k{padding:4px 14px 14px;border-top:1px solid var(--line)}
.rs-k .tb-l{margin:10px 0 6px}
.rskr{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:12px}
.rskr em{font-style:normal;font-size:11px;color:var(--muted);white-space:nowrap}
.rskr em.ok{color:#0b5d45;font-weight:600}
.ck{padding:6px 14px 12px}
.ckr{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:12px}
.ckr em{font-style:normal;font-size:11px;font-weight:600;border-radius:var(--r-pill);padding:2px 8px;white-space:nowrap}
.ckr em.ok{color:#0b5d45;background:#e4f4ec}
.ckr em.bad{color:var(--ink);background:#fff1d6}
.flow-n{font-size:11.5px;color:var(--ink-70);padding:0 14px 12px;line-height:1.45}
.flow-n b{color:var(--ink);font-weight:600;margin-left:4px}
.sw{padding:6px 14px}
.swr{display:grid;grid-template-columns:minmax(0,1fr) 112px 92px;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:12px}
.swr.h{font-size:10.5px;color:var(--muted);font-weight:600}
.swr b{display:block;font-weight:600;line-height:1.3}
.swr small{display:block;font-size:10.5px;color:var(--muted)}
.swr>span:last-child{font-size:11.5px;font-weight:600;color:var(--ink-70)}
.oc{justify-self:start;font-size:10.5px;font-weight:600;border-radius:var(--r-pill);padding:3px 8px;white-space:nowrap}
.oc.v{color:#0b5d45;background:#e4f4ec}
.oc.i{color:var(--ink-70);background:#e6e9f0}
.oc.x{color:#fff;background:#5a6482}
.oc.w{color:var(--muted);box-shadow:inset 0 0 0 1px var(--line3)}
.ww{padding:8px 14px 14px}
.ww .tb-l{margin:6px 0 6px}
.wwr{display:flex;justify-content:space-between;font-size:12px;padding:5px 0}
.wwr em{font-style:normal;font-weight:600;color:var(--ink-70)}
.trb{display:flex;align-items:flex-end;gap:5px;height:70px;margin-top:12px}
.trb i{flex:1;border-radius:4px 4px 1px 1px;background:linear-gradient(180deg,#0a1022 0 60%,#f5a524 60% 78%,#2b97d1 78%)}
.sd-b{padding:6px 14px 12px}
.sd-b .sdr .dots{gap:8px}

/* pricing: a workspace scope, no plan terms */
.scope-l{font-size:12px;color:var(--muted);margin-top:12px}
.pcard.scope li i{font-size:13px;font-weight:600;color:var(--ink)}
.pcard.scope li i::before{display:none}

@media (max-width:1040px){
  .mg,.agc{grid-template-columns:1fr}
  .mg-s,.rp{display:none}
  .bks{grid-template-columns:1fr}
  .bks .nx{display:none}
  .b3 .bx,.b3.flip .bx:not(.tall){grid-column:span 1;grid-row:auto}
  .b3 .bx.tall,.b3.flip .bx.tall{grid-column:span 2;grid-row:auto}
  .bx.tall .bx-shot{min-height:0;flex:none;height:360px}
}
@media (max-width:700px){
  .checker .field{flex-wrap:wrap}
  .check-note a{margin-left:0;margin-top:4px}
  .fchips{display:none}
  .main-h h3{font-size:18px}
  .agrr{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,.7fr))}
  .agrr>span:nth-child(n+5){display:none}
  .excerpt .why{display:none}
  .nmr{grid-template-columns:24px minmax(0,1fr) auto}
  .nmr .imp{display:none}
  .apl-s .ev{display:none}
  .apl-f>span:first-child{display:none}
  .pv-t span{display:none}
  .bkg{grid-template-columns:1fr 1fr}
  .bkc:nth-child(n+3){display:none}
  .fr{grid-template-columns:76px 1fr 34px}
  .fr small{display:none}
  .tm-tabs .tl{display:none}
  .mg-c,.agc-c{padding:14px}
  .sdr .dots{gap:6px}
  .sdr .dots i{width:11px;height:11px}
  .bx.tall .bx-shot{height:250px}
  .rsr{grid-template-columns:70px repeat(3,minmax(0,1fr))}
  .rsr>*:nth-child(n+5){display:none}
  .cws{display:none}
  .sdr .dots i:nth-child(n+6){display:none}
  .bx-count{display:none}
  .pvr .pv-meta{font-size:11.5px}
}
.bx-count{white-space:nowrap}
/* =========================================================
   Product pages: one capability per page.
   Built on the homepage stylesheet above; tokens from the Praised Marketing system.
   ========================================================= */
:root{
  --ink-hover:#1f2a4d; --ink-soft:#2c3550; --dot-deep:#f5a524; --dot-mid:#ffd08a; --dot-tint:#fff1d6;
  --highlight:#fff8ea; --highlight-ring:rgba(245,165,36,.35); --warn-ink:#8a5a00;
  --competitor:#2b97d1; --competitor-ink:#1f6f99; --competitor-tint:rgba(43,151,209,.12);
  --success:#0b5d45; --success-tint:#e4f4ec;
  --slate-50:#f2f4f8; --slate-100:#e6e9f0; --slate-200:#c9d0e0; --slate-300:#9aa4bd; --slate-700:#3a4566;
  color-scheme:light;
}
html,body{background:var(--ground)}

/* ---------- hero: headline left, sentence and actions right, then the screen rising from the field ---------- */
.ph{padding-top:84px;position:relative;z-index:2}
.ph-g{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:56px;align-items:end}
.ph h1{font-family:var(--display);font-weight:800;font-size:clamp(34px,4.5vw,60px);line-height:1.04;letter-spacing:-.035em;text-wrap:balance;max-width:700px}
.ph h1 .q{color:var(--muted);opacity:.72}
.ph-side p{font-size:clamp(17px,1.45vw,19px);line-height:1.55;color:var(--muted);max-width:460px;text-wrap:pretty}
.ph-side .cta{justify-content:flex-start;margin-top:26px}
.pstage{position:relative;height:360px;margin-top:8px;z-index:1}
.pstage canvas{position:absolute;inset:0;width:100%;height:100%}
.pwrap{position:relative;z-index:4;margin-top:-250px;padding-inline:var(--gut)}
.pwrap .app{max-width:1160px}

/* ---------- feature blocks: headline, one sentence, a cropped screen; alternating sides ---------- */
.fb{display:grid;grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr);gap:56px;align-items:center}
.fb.flip{grid-template-columns:minmax(0,7.4fr) minmax(0,4.6fr)}
.fb.flip .fb-copy{order:2}
.fb-copy{max-width:440px}
.fb-copy h2{font-family:var(--display);font-weight:800;font-size:clamp(32px,3.3vw,44px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.fb-copy p{color:var(--muted);font-size:16.5px;line-height:1.6;margin-top:18px;text-wrap:pretty}
.fb-copy .more{margin-top:26px;padding-top:0}
.fstage{position:relative;background:var(--tint);border-radius:var(--r-lg);overflow:hidden;padding:40px;min-height:560px;display:flex;align-items:center}
.fstage>canvas{position:absolute;inset:0;width:100%;height:100%}
.fstage .mock{width:100%}
.fstage.top{align-items:flex-start;padding-bottom:0}
.fstage.top .mock{border-radius:20px 20px 0 0;-webkit-mask:linear-gradient(180deg,#000 82%,transparent);mask:linear-gradient(180deg,#000 82%,transparent)}
.fstage .mock-h .f.on{color:var(--ink);border-color:var(--ink);font-weight:600}
.mock-h .grow{margin-left:auto}
.mv-h{padding:16px 18px 4px}
.mv-h h4{font-family:var(--display);font-weight:800;font-size:19px;line-height:1.2;letter-spacing:-.02em;text-wrap:balance;max-width:560px}
.mv-h p{font-size:12px;color:var(--muted);margin-top:4px}

/* ---------- shared bits inside drawn screens ---------- */
.sw-me{color:var(--ink);font-weight:700}
.you{display:inline-block;font-size:10px;font-weight:700;background:var(--ink);color:#fff;border-radius:5px;padding:1px 5px;margin-left:6px;vertical-align:1px}
.bd{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:7px;vertical-align:0;background:var(--slate-200)}
.bd.me{background:var(--dot-deep)}.bd.c{background:var(--competitor)}.bd.s2{background:var(--slate-300)}.bd.s3{background:var(--slate-700)}
.mbtn{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;border-radius:var(--r-pill);padding:7px 13px;white-space:nowrap;box-shadow:inset 0 0 0 1px var(--line2);color:var(--ink);background:var(--frame)}
.mbtn.k{background:var(--ink);color:#fff;box-shadow:none}
.mbtn .ico{width:14px;height:14px}
.why2{display:inline-flex;font-size:11px;font-weight:600;color:var(--competitor-ink);background:var(--competitor-tint);border-radius:var(--r-pill);padding:3px 9px;white-space:nowrap}
.ok2{display:inline-flex;font-size:11px;font-weight:600;color:var(--success);background:var(--success-tint);border-radius:var(--r-pill);padding:3px 9px;white-space:nowrap}
.mono{font-family:var(--mono)}
.lbl2{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:8px}

/* ---------- Visibility: competitors overview with market switch ---------- */
.mkt{display:inline-flex;gap:3px;background:var(--tint);border-radius:var(--r-pill);padding:3px;box-shadow:inset 0 0 0 1px var(--line);flex:none}
.mkt button{font-size:12.5px;font-weight:600;color:var(--muted);padding:7px 13px;border-radius:var(--r-pill);transition:background .25s var(--ease),color .25s,box-shadow .25s}
.mkt button:hover{color:var(--ink)}
.mkt button[aria-pressed="true"]{background:var(--frame);color:var(--ink);box-shadow:var(--sh-1),0 0 0 1px var(--line)}
.mkt-l{font-size:11.5px;color:var(--muted);font-weight:600;margin-right:8px}
.mkt-w{display:flex;align-items:center}
.vz-g{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px}
.pmap{position:relative;height:250px;margin:26px 4px 0 30px;border-left:1px solid var(--line2);border-bottom:1px solid var(--line2)}
.pmap .gl{position:absolute;left:0;right:0;border-top:1px dashed var(--line)}
.pmap .gx{position:absolute;top:0;bottom:0;border-left:1px dashed var(--line)}
.pmap .yt,.pmap .xt{position:absolute;font-family:var(--mono);font-size:10px;color:var(--muted)}
.pmap .yt{left:-30px;transform:translateY(-50%);width:26px;text-align:right}
.pmap .xt{bottom:-18px;transform:translateX(-50%)}
.pmap .ax-y{position:absolute;left:4px;top:-20px;font-size:10.5px;color:var(--muted);font-weight:600;white-space:nowrap}
.pmap .ax-x{position:absolute;right:0;bottom:-34px;font-size:10.5px;color:var(--muted);font-weight:600}
.pd{position:absolute;transform:translate(-50%,50%);transition:left .9s var(--ease),bottom .9s var(--ease)}
.pd i{display:block;border-radius:50%;background:var(--slate-200);box-shadow:0 0 0 2px var(--frame);transition:width .9s var(--ease),height .9s var(--ease)}
.pd.c i{background:var(--competitor)}
.pd.me i{background:var(--dot);box-shadow:0 0 0 2px var(--frame),0 0 0 5px rgba(255,181,71,.35)}
.pd span{position:absolute;left:calc(100% + 6px);top:50%;transform:translateY(-50%);font-size:11px;font-weight:600;white-space:nowrap;color:var(--ink-70)}
.pd.me span{color:var(--ink);font-weight:700}
.pd.c span{color:var(--competitor-ink)}
.pd.l span{left:auto;right:calc(100% + 6px)}
.rnk{display:grid;gap:2px;padding-top:2px}
.rnr{display:grid;grid-template-columns:22px minmax(0,1fr) 46px;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;font-size:12.5px}
.rnr.me{background:var(--highlight);box-shadow:inset 0 0 0 1px var(--highlight-ring)}
.rnr .n{font-size:11px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.rnr b{font-weight:600;display:flex;align-items:center}
.rnr .tr2{position:relative;display:block;height:7px;border-radius:99px;background:var(--tint);margin-top:6px}
.rnr .tr2 i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--slate-200);transition:width .9s var(--ease)}
.rnr.c .tr2 i{background:var(--competitor)}
.rnr.me .tr2 i{background:var(--dot)}
.rnr .tr2 u{position:absolute;top:-2px;height:11px;border-radius:3px;background:rgba(10,16,34,.14);text-decoration:none;transition:left .9s var(--ease),width .9s var(--ease)}
.rnr em{font-style:normal;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.rnr em small{display:block;font-size:10.5px;font-weight:500;color:var(--muted)}
.vz-opp{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--highlight);box-shadow:inset 0 0 0 1px var(--highlight-ring)}
.vz-opp>span{display:grid;gap:4px;justify-items:start;min-width:0}
.vz-opp b{font-size:13.5px;font-weight:600;line-height:1.35}
.vz-opp small{font-size:12px;color:var(--muted)}
.vz-opp .acts2{display:flex;gap:6px;flex:none}
.swap{transition:opacity .25s var(--ease)}
.swap.out{opacity:0}

/* ---------- Visibility: questions coverage ---------- */
.scope{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px 18px 12px;border-bottom:1px solid var(--line)}
.scope .sl{font-size:11.5px;font-weight:600;color:var(--muted);margin-right:2px}
.scope .scp{font-size:11.5px;font-weight:500;color:var(--ink-70);border:1px solid var(--line2);border-radius:var(--r-pill);padding:3px 10px;white-space:nowrap}
.scope .scp.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.scope .gap{width:12px}
.cov{padding:4px 12px 10px}
.covr{display:grid;grid-template-columns:minmax(0,1.2fr) 52px minmax(0,1.5fr) 62px minmax(0,1.3fr);align-items:center;gap:12px;padding:10px 6px;border-bottom:1px solid var(--line);font-size:12.5px}
.covr.h{font-size:10.5px;font-weight:600;color:var(--muted);padding:9px 6px}
.covr:last-child{border-bottom:0}
.covr .t{font-weight:600}
.covr .t small{display:block;font-weight:400;font-size:11px;color:var(--muted)}
.covr .q{font-variant-numeric:tabular-nums;color:var(--ink-70)}
.covr .nm{display:grid;grid-template-columns:38px 1fr;align-items:center;gap:8px}
.covr .nm b{font-weight:700;font-variant-numeric:tabular-nums}
.covr .nm i{position:relative;display:block;height:7px;border-radius:99px;background:var(--tint)}
.covr .nm i em{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--dot)}
.covr .nm i u{position:absolute;top:-2px;height:11px;border-radius:3px;background:rgba(10,16,34,.13)}
.covr .nm.po{display:block;font-size:11.5px;color:var(--muted)}
.covr .w{font-variant-numeric:tabular-nums;color:var(--ink-70)}
.covr .pl b{font-weight:700;font-variant-numeric:tabular-nums}
.covr .pl small{display:block;font-size:11px;color:var(--muted)}
.covr.opp{background:var(--highlight);border-radius:10px;box-shadow:inset 0 0 0 1px var(--highlight-ring);border-bottom-color:transparent}

/* ---------- Visibility: answers reader ---------- */
.rd{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr)}
.rd-l{padding:12px 12px 14px;border-right:1px solid var(--line)}
.rd-q{font-size:13px;font-weight:600;line-height:1.35}
.rd-q small{display:block;font-weight:400;font-size:11px;color:var(--muted);margin-top:3px}
.rd-e{display:grid;gap:2px;margin-top:10px}
.rde{display:grid;grid-template-columns:62px 34px minmax(0,1fr);align-items:center;gap:8px;padding:7px 8px;border-radius:10px;font-size:11.5px}
.rde>span:first-child{font-weight:600}
.rde p{color:var(--ink-70);line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rde.on{box-shadow:inset 0 0 0 1.5px var(--ink);background:var(--frame)}
.pk{display:inline-grid;place-items:center;min-width:30px;height:22px;padding:0 6px;border-radius:var(--r-pill);font-size:11px;font-weight:700;background:var(--tint);font-variant-numeric:tabular-nums}
.pk.me{background:var(--dot)}
.pk.n{background:transparent;color:var(--line3);font-weight:500}
.pk.u{background:transparent;box-shadow:inset 0 0 0 1.5px var(--line3);color:var(--muted)}
.rd-r{padding:14px 16px 16px;min-width:0}
.rd-m{font-size:11px;color:var(--muted)}
.rd-t{font-size:14px;font-weight:600;margin-top:3px}
.rd-tabs{display:flex;gap:12px;margin:10px 0 0;border-bottom:1px solid var(--line);font-size:11.5px;color:var(--muted);font-weight:500;overflow:hidden;white-space:nowrap}
.rd-tabs span{padding:0 0 7px}
.rd-tabs span.on{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--ink)}
.rd-a{font-size:12.5px;line-height:1.6;color:var(--ink-soft);margin-top:10px}
.rd-a ol{display:grid;gap:3px;margin-top:6px;counter-reset:r}
.rd-a li{counter-increment:r;display:flex;gap:6px}
.rd-a li::before{content:counter(r)".";font-weight:600;color:var(--ink)}
.rd-a b{color:var(--ink);font-weight:600}
.nb{margin-top:12px;border:1px solid var(--line2);border-radius:12px;padding:10px 12px}
.nb-h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600}
.nb p{font-size:11.5px;line-height:1.5;color:var(--ink-70);margin-top:5px}
.src2{display:grid;gap:5px;margin-top:12px;font-size:11.5px}
.src2 span{display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:8px;align-items:center}
.src2 span>b{font:600 10px/1 var(--mono);color:var(--ink);background:var(--tint);border-radius:4px;padding:3px 0;text-align:center}
.src2 em{font-style:normal;color:var(--ink-70);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.src2 small{font-size:10.5px;font-weight:600;color:var(--muted);background:var(--tint);border-radius:var(--r-pill);padding:2px 8px;white-space:nowrap}
.l5{display:flex;align-items:center;gap:5px;margin-top:12px;font-size:11.5px;color:var(--muted)}
.l5 i{width:22px;height:16px;border-radius:var(--r-pill);background:var(--tint);display:grid;place-items:center;font-style:normal;color:var(--line3);font-size:10px}

/* ---------- Visibility: one question, the move it starts ---------- */
.qd{padding:14px 18px 6px}
.qd-m{font-size:11.5px;color:var(--muted)}
.qd-t{font-family:var(--display);font-size:20px;font-weight:800;letter-spacing:-.02em;margin-top:3px}
.qd-s{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 6px;font-size:12.5px;font-weight:600}
.qd-s small{font-weight:500;color:var(--muted);font-size:11.5px}
.qbr{display:grid;grid-template-columns:16px 112px minmax(0,1fr) 22px;align-items:center;gap:8px;padding:5px 0;font-size:12.5px}
.qbr>span:first-child{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.qbr i{display:block;height:7px;border-radius:99px;background:var(--tint);overflow:hidden}
.qbr i b{display:block;height:100%;border-radius:99px;background:var(--slate-200)}
.qbr.c i b{background:var(--competitor)}
.qbr.me{background:var(--highlight);border-radius:8px;margin:0 -6px;padding:5px 6px;grid-template-columns:16px 112px minmax(0,1fr) 22px}
.qbr.me i b{background:var(--dot)}
.qbr em{font-style:normal;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.chips2{display:flex;flex-wrap:wrap;gap:6px}
.nmv2{margin:12px 12px 0;border-top:1px solid var(--line);padding-top:8px}
.qd-f{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px 16px;border-top:1px solid var(--line);margin-top:10px;font-size:11.5px;color:var(--muted)}

/* ---------- Research: lookups ---------- */
.rs-top{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line)}
.rs-in{flex:1;min-width:0;display:flex;align-items:center;gap:8px;border:1px solid var(--line2);border-radius:10px;padding:6px 8px 6px 10px;font-size:13px;font-weight:500}
.rs-in .ico{width:15px;height:15px;color:var(--muted)}
.rs-in span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-in small{font-size:11px;font-weight:600;background:var(--tint);border-radius:6px;padding:2px 8px;color:var(--ink-70)}
.rs-top .f2{font-size:12px;color:var(--ink-70);border:1px solid var(--line2);border-radius:8px;padding:6px 10px;white-space:nowrap}
.rs-top .go2{font-size:12px;font-weight:600;border:1px solid var(--line2);border-radius:8px;padding:6px 10px;white-space:nowrap}
.rs-acts{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 14px}
.ov{display:grid;gap:12px}
.ovr small{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-bottom:5px}
.ovr small b{color:var(--ink);font-weight:600}
.ovb{display:flex;height:34px;border-radius:8px;overflow:hidden;font-size:11px;line-height:1.15}
.ovb span{display:flex;flex-direction:column;justify-content:center;padding:0 8px;min-width:0;white-space:nowrap;overflow:hidden}
.ovb b{font-weight:700;font-variant-numeric:tabular-nums}
.ovb .a{background:var(--competitor);color:#fff}
.ovb .both{background:repeating-linear-gradient(135deg,var(--slate-50) 0 5px,#fff 5px 10px);color:var(--ink-70);box-shadow:inset 0 0 0 1px var(--line)}
.ovb .me{background:var(--dot);color:var(--ink)}
.ovk{display:flex;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--muted);margin-top:2px}
.ovk span{display:inline-flex;align-items:center;gap:5px}
.ovk i{width:9px;height:9px;border-radius:3px}
.phr{display:grid}
.phrr{display:grid;grid-template-columns:minmax(0,1.6fr) 60px 62px 66px 64px;align-items:center;gap:8px;padding:8px 2px;border-bottom:1px solid var(--line);font-size:12px}
.phrr.h{font-size:10.5px;font-weight:600;color:var(--muted)}
.phrr:last-child{border-bottom:0}
.phrr>span{font-variant-numeric:tabular-nums}
.phrr>span:first-child{font-weight:500}
.phrr .no{color:var(--muted)}
.phrr .lk{justify-self:end;font-size:11px;font-weight:600;border:1px solid var(--line2);border-radius:var(--r-pill);padding:3px 9px;white-space:nowrap}
.rel{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.rel-l{padding:6px 12px 12px;border-right:1px solid var(--line)}
.relr{display:grid;grid-template-columns:minmax(0,1fr) 44px 94px;align-items:center;gap:8px;padding:8px 6px;border-bottom:1px solid var(--line);font-size:12px}
.relr.h{font-size:10.5px;color:var(--muted);font-weight:600}
.relr:last-child{border-bottom:0}
.relr>span{font-variant-numeric:tabular-nums}
.relr .df{display:grid;grid-template-columns:18px 1fr;gap:6px;align-items:center}
.relr .df i{display:block;height:5px;border-radius:99px;background:var(--tint);overflow:hidden}
.relr .df i b{display:block;height:100%;background:var(--ink-soft);border-radius:99px}
.relr.on{background:var(--highlight);border-radius:10px;box-shadow:inset 0 0 0 1px var(--highlight-ring);border-bottom-color:transparent}
.st2{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;white-space:nowrap;color:var(--ink-70)}
.st2::before{content:"";width:9px;height:9px;border-radius:50%;flex:none}
.st2.named::before{background:var(--dot-deep)}
.st2.never::before{box-shadow:inset 0 0 0 2px var(--ink-70)}
.st2.notyet::before{box-shadow:inset 0 0 0 1.5px var(--line3);border-radius:2px}
.st2.once::before{background:radial-gradient(circle,var(--ink-70) 0 2px,transparent 2.5px);box-shadow:inset 0 0 0 1.5px var(--ink-70)}
.rel-r{padding:14px 16px}
.rel-r h5{font-size:13.5px;font-weight:600}
.rel-r .st2{margin-top:4px}
.sparkb{display:flex;align-items:flex-end;gap:3px;height:40px;margin:12px 0 4px}
.sparkb i{flex:1;background:var(--ink-soft);border-radius:2px 2px 0 0;opacity:.85}
.sparkb i.pk2{background:var(--dot-deep);opacity:1}
.kv{display:grid;margin-top:8px}
.kv span{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:12px}
.kv span:last-child{border-bottom:0}
.kv b{font-weight:700;font-variant-numeric:tabular-nums}
.kv em{font-style:normal;color:var(--muted)}
.rel-r .acts2{display:flex;gap:6px;margin-top:12px}
/* answers today */
.at{padding:8px 14px 4px;overflow:hidden}
.atr{display:grid;grid-template-columns:118px repeat(6,minmax(0,1fr));align-items:center;gap:6px;padding:7px 4px;border-bottom:1px solid var(--line);font-size:12px}
.atr.h{align-items:end;padding-bottom:9px}
.atr.h>span{font-size:11.5px;font-weight:600;line-height:1.25}
.atr.h>span small{display:block;font-size:10px;font-weight:500;color:var(--muted)}
.atr.h>span small.once{color:var(--ink);font-weight:600}
.atr>span:not(:first-child){text-align:center}
.atr>span:first-child{font-weight:600;display:flex;align-items:center}
.atr.me{background:var(--highlight);border-radius:10px;box-shadow:inset 0 0 0 1px var(--highlight-ring);border-bottom-color:transparent}
.atr .x{font-size:10.5px;color:var(--muted);font-weight:500}
.atr .p{display:inline-grid;place-items:center;min-width:30px;height:22px;padding:0 6px;border-radius:var(--r-pill);font-size:11px;font-weight:700;background:var(--tint)}
.atr .p.one{background:var(--competitor);color:#fff}
.atr .p.k{background:var(--dot)}
.atr .nn{color:var(--line3)}
.sig{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:12px 14px 14px;border-top:1px solid var(--line);margin-top:6px}
.sig>div{background:var(--tint);border-radius:12px;padding:10px 12px}
.sig small{display:block;font-size:11px;font-weight:600;color:var(--muted)}
.sig b{display:block;font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1.15;margin-top:3px;font-variant-numeric:tabular-nums}
.sig b.t{font-size:15px;line-height:1.35;padding:4px 0 2px}
.sig span{display:block;font-size:10.5px;color:var(--muted);line-height:1.35;margin-top:2px}
.sig .once{background:var(--frame);box-shadow:inset 0 0 0 1.5px var(--ink)}
/* carry forward: two overlapping cards */
.duo{width:100%;display:grid;gap:14px}
.duo .d1{width:86%}
.duo .d2{width:86%;justify-self:end}
.tq{padding:4px 16px 0}
.tqr{padding:10px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.tqr b{font-weight:600;display:block}
.tqr small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.tqr .ok3{display:flex;align-items:center;gap:5px;color:var(--success);font-size:11px;font-weight:600;margin-top:4px}
.tqr .ok3 .ico{width:13px;height:13px}
.tqr .wn{display:flex;align-items:center;gap:5px;color:var(--warn-ink);font-size:11px;font-weight:600;margin-top:4px}
.tqr.off b{color:var(--muted)}
.qbar{padding:12px 16px 4px;font-size:11.5px}
.qbar>span{display:flex;justify-content:space-between;color:var(--muted);font-weight:600}
.qbar>span b{color:var(--ink);font-family:var(--mono);font-weight:600;font-size:11px}
.qbar i{display:flex;gap:2px;margin-top:7px}
.qbar i b{flex:1;height:6px;border-radius:1px;background:var(--ink)}
.qbar i b.n{background:var(--dot)}
.qbar i b.e{background:var(--slate-100)}
.mfoot{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px 16px 14px;font-size:11.5px;color:var(--muted)}
.mfoot .l{margin-right:auto}
.wp{padding:4px 16px 2px}
.wpo{border:1px solid var(--line2);border-radius:12px;padding:10px 12px;margin-bottom:6px;font-size:12.5px}
.wpo.on{box-shadow:inset 0 0 0 1.5px var(--ink);border-color:transparent}
.wpo b{display:block;font-weight:600}
.wpo small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.ev2{display:grid;gap:2px;margin-top:8px}
.ev2>span{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:start;padding:5px 0;font-size:12px}
.ev2 i{width:15px;height:15px;border-radius:4px;background:var(--ink);display:grid;place-items:center;margin-top:1px}
.ev2 i::after{content:"";width:7px;height:3.5px;border:1.8px solid #fff;border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.ev2 i.off{background:var(--frame);box-shadow:inset 0 0 0 1.5px var(--line3)}
.ev2 i.off::after{content:none}
.ev2 b{font-weight:600;display:block}
.ev2 small{color:var(--muted);font-size:11px}

/* ---------- Impact: results chart ---------- */
.ix{display:grid;grid-template-columns:minmax(0,1fr) 270px}
.ix-c{padding:4px 20px 18px;min-width:0}
.ntabs{display:flex;gap:18px;padding:0 20px;border-bottom:1px solid var(--line);font-size:12.5px;font-weight:500;color:var(--muted)}
.ntabs span{padding:10px 0 9px}
.ntabs span em{font-style:normal;font-family:var(--mono);font-size:10.5px;margin-left:5px}
.ntabs span.on{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--ink)}
.rchart{display:block;width:100%;height:auto;overflow:visible}
.rchart .sg line{stroke:rgba(10,16,34,.07)}
.rchart .ax text{font-family:var(--mono);font-size:9.5px;fill:var(--muted)}
.rchart .band{fill:rgba(255,181,71,.24)}
.rchart .ln{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.rchart .mk line{stroke:var(--ink);stroke-width:1;stroke-dasharray:2 3;opacity:.35}
.rchart .mk text{font-family:var(--mono);font-size:9px;fill:var(--muted);text-anchor:middle}
.rchart .o circle{stroke:var(--frame);stroke-width:2}
.rchart .o .v{fill:var(--success)}
.rchart .o .x{fill:var(--slate-700)}
.rchart .o .i{fill:var(--slate-100)}
.rchart .o .w{fill:var(--frame);stroke:var(--line3);stroke-dasharray:2 2;stroke-width:1.5}
.rchart .o path{fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rchart .o .pv{stroke:#fff}.rchart .o .px{stroke:#fff}.rchart .o .pi{stroke:var(--ink)}
.ix-s{border-left:1px solid var(--line);padding:16px 18px}
.ix-s h5{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:600}
.ix-s h5 small{font-size:11px;color:var(--muted);font-weight:500}
.stk{display:flex;height:9px;border-radius:99px;overflow:hidden;margin:10px 0 8px;gap:2px}
.stk i{display:block}
.stk .v{background:var(--success)}.stk .x{background:var(--slate-700)}.stk .i{background:var(--slate-100)}.stk .w{background:repeating-linear-gradient(90deg,var(--line3) 0 3px,transparent 3px 5px)}
.ocl{display:grid}
.ocl span{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12px}
.ocl span b{margin-left:auto;font-variant-numeric:tabular-nums}
.og{width:16px;height:16px;border-radius:50%;flex:none;display:grid;place-items:center}
.og.v{background:var(--success)}.og.x{background:var(--slate-700)}.og.i{background:var(--slate-100)}.og.w{box-shadow:inset 0 0 0 1.5px var(--line3)}
.og svg{width:10px;height:10px;fill:none;stroke-width:2;stroke-linecap:round}
.og.v svg,.og.x svg{stroke:#fff}.og.i svg{stroke:var(--ink)}
.wk{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.wkr{display:grid;grid-template-columns:minmax(0,1fr) 34px 50px;align-items:center;gap:8px;padding:5px 0;font-size:12px}
.wkr i{display:flex;gap:3px}
.wkr i b{width:9px;height:9px;border-radius:2px;background:var(--success)}
.wkr i b.e{background:transparent;box-shadow:inset 0 0 0 1px var(--line3)}
.wkr em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--muted);text-align:right}
.ckey{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px;font-size:11.5px;color:var(--ink-70)}
.ckey span{display:inline-flex;align-items:center;gap:6px}
/* work record */
.wr{padding:14px 18px 4px}
.wr-m{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted)}
.wr-m .dt{width:8px;height:8px;border-radius:50%;background:var(--dot-deep)}
.wr-t{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em;line-height:1.2;margin-top:4px}
.wr-st{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:11.5px;color:var(--muted)}
.wr-st .stt2{font-size:11px;font-weight:600;color:var(--ink);background:var(--dot-tint);border-radius:var(--r-pill);padding:3px 9px}
.fnd{margin:12px 18px 0;border-radius:12px;background:var(--tint);padding:10px 12px;font-size:12px}
.fnd small{display:block;font-size:11px;font-weight:600;color:var(--muted)}
.fnd b{display:block;font-weight:600;margin-top:2px;line-height:1.4}
.rows{margin:8px 18px 0}
.rows>span{display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:12px;align-items:start}
.rows>span>small{color:var(--muted);font-size:11.5px}
.rows>span.dc{background:var(--highlight);box-shadow:inset 0 0 0 1px var(--highlight-ring);border-radius:10px;border-bottom-color:transparent;padding:9px 10px;margin:4px -10px}
.rows b{font-weight:600}
.prog{display:flex;align-items:center;gap:10px;margin:12px 18px 0;font-size:11.5px;color:var(--muted)}
.prog i{flex:0 0 120px;height:5px;border-radius:99px;background:var(--tint);overflow:hidden}
.prog i b{display:block;height:100%;width:60%;background:var(--ink);border-radius:99px}
.hist{margin:12px 18px 0;display:grid;gap:4px;font-size:11.5px;color:var(--ink-70)}
.hist .tl2{font-size:12px;font-weight:600;color:var(--ink);margin-bottom:2px}
.hist span{display:grid;grid-template-columns:54px minmax(0,1fr);gap:8px}
.hist span em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--muted)}
/* verified vs inconclusive */
.pair{width:100%;display:grid;gap:14px}
.pair .p1{width:88%}
.pair .p2{width:80%;justify-self:end}
.vh{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:11.5px;color:var(--muted)}
.vchip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;border-radius:var(--r-pill);padding:3px 9px 3px 4px}
.vchip .og{width:15px;height:15px}
.vchip.v{background:var(--success-tint);color:var(--success)}
.vchip.i{background:var(--slate-100);color:var(--ink-70)}
.ba2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 18px 0}
.ba2>div{background:var(--tint);border-radius:12px;padding:10px 12px}
.ba2 small{display:block;font-size:11px;color:var(--muted)}
.ba2 b{display:block;font-family:var(--display);font-weight:800;font-size:26px;letter-spacing:-.03em;line-height:1.1;margin:2px 0 7px;font-variant-numeric:tabular-nums}
.ba2 .rng{position:relative;display:block;height:8px;border-radius:99px;background:var(--frame);margin-bottom:6px}
.ba2 .rng i{position:absolute;top:0;bottom:0;border-radius:99px;background:var(--slate-200)}
.ba2 .rng em{position:absolute;top:-3px;width:3px;height:14px;border-radius:2px;background:var(--ink);transform:translateX(-50%)}
.ba2 .aft{background:var(--highlight);box-shadow:inset 0 0 0 1px var(--highlight-ring)}
.ba2 .aft .rng i{background:var(--dot)}
.ba2.inc .aft{background:var(--tint);box-shadow:none}
.ba2.inc .aft .rng i{background:var(--slate-200)}
.vd{font-size:12px;color:var(--ink-70);margin:10px 18px 0;line-height:1.5}
.vd b{color:var(--success)}
.vd b.n{color:var(--ink)}
.p1 .emv{margin:12px 12px 12px}
/* history table */
.hx{display:block}
.hx-t{padding:4px 12px 10px;min-width:0}
.hxr{display:grid;grid-template-columns:18px minmax(0,1fr) 112px 86px;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line);font-size:12px}
.hxr.h{font-size:10.5px;font-weight:600;color:var(--muted)}
.hxr:last-child{border-bottom:0}
.hxr .og{width:15px;height:15px}
.hxr .d{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.hxr b{display:block;font-weight:600;line-height:1.3}
.hxr small{display:block;font-size:11px;color:var(--muted)}
.hxr .ch{font-family:var(--mono);font-size:10.5px;color:var(--ink-70)}
.hx-s{border-top:1px solid var(--line);padding:14px 16px 16px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px;align-items:start}
.nx2{display:grid;gap:5px;justify-items:start;background:var(--highlight);border-radius:14px;box-shadow:inset 0 0 0 1px var(--highlight-ring);padding:12px 14px}
.nx2 b{font-size:13px;font-weight:600;line-height:1.35}
.nx2 small{font-size:11.5px;color:var(--muted);line-height:1.4}
.nx2 .mbtn{margin-top:4px}

/* ---------- where it connects ---------- */
.cx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:56px}
.cx .bx{grid-column:auto;min-height:400px}
.cx .bx-shot{height:260px;flex:none}

/* ---------- entrance motion, played once (visible at rest) ---------- */
@media (prefers-reduced-motion:no-preference){
  [data-play].play .rise{animation:fadeup .6s var(--ease) both}
  [data-play].play .rise:nth-child(2){animation-delay:.08s}
  [data-play].play .rise:nth-child(3){animation-delay:.16s}
  [data-play].play .rise:nth-child(4){animation-delay:.24s}
  [data-play].play .rise:nth-child(5){animation-delay:.32s}
  [data-play].play .rise:nth-child(6){animation-delay:.4s}
  [data-play].play .growx b,[data-play].play .growx em{transform-origin:left;animation:growx .9s .25s var(--ease) both}
  [data-play].play .draw{stroke-dasharray:1;animation:draw 1.6s .2s var(--ease) both}
  [data-play].play .popin{animation:pop .45s 1.2s var(--ease) both}
  [data-play].play .d2,[data-play].play .p2{animation:fadeup .7s .3s var(--ease) both}
  .pwrap .app{animation:rise 1.2s .2s var(--ease) both}
}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .ph-g{grid-template-columns:1fr;gap:22px}
  .pwrap{margin-top:-210px}
  .fb,.fb.flip{grid-template-columns:1fr;gap:28px}
  .fb.flip .fb-copy{order:0}
  .fstage{padding:28px;min-height:0}
  .vz-g{grid-template-columns:1fr}
  .ix{grid-template-columns:1fr}
  .ix-s{border-left:0;border-top:1px solid var(--line)}
  .cx{grid-template-columns:1fr 1fr}
  .cx .bx:last-child{display:none}
}
@media (max-width:760px){
  .ph{padding-top:48px}
  .pstage{height:240px}
  .pwrap{margin-top:-170px;padding-inline:14px}
  .fstage{padding:14px;border-radius:18px}
  .fstage.top{padding-bottom:0}
  .main-h{flex-direction:column;align-items:flex-start}
  .mkt button{padding:6px 10px;font-size:12px}
  .mkt-l{display:none}
  .pmap{height:210px}
  .rnr{grid-template-columns:18px minmax(0,1fr) 40px}
  .vz-opp{flex-direction:column;align-items:flex-start}
  .covr{grid-template-columns:minmax(0,1.2fr) minmax(0,1.4fr) minmax(0,1fr);gap:8px}
  .covr>span:nth-child(2),.covr>span:nth-child(4){display:none}
  .scope .gap{display:none}
  .rd{grid-template-columns:1fr}
  .rd-l{display:none}
  .qbr,.qbr.me{grid-template-columns:14px 96px minmax(0,1fr) 20px}
  .phrr{grid-template-columns:minmax(0,1.6fr) 54px 64px}
  .phrr>span:nth-child(3),.phrr>span:nth-child(4){display:none}
  .rel{grid-template-columns:1fr}
  .rel-r{display:none}
  .rel-l{border-right:0}
  .relr{grid-template-columns:minmax(0,1fr) 44px 92px}
  .atr{grid-template-columns:92px repeat(3,minmax(0,1fr))}
  .atr>span:nth-child(n+5){display:none}
  .sig{grid-template-columns:1fr 1fr}
  .duo .mock,.pair .mock{width:100%}
  .ix-c{padding:4px 12px 14px}
  .hxr{grid-template-columns:16px minmax(0,1fr) 98px}
  .hxr>span:nth-child(4){display:none}
  .hx-s{grid-template-columns:1fr}
  .rows>span{grid-template-columns:96px minmax(0,1fr)}
  .ba2{margin-inline:12px}
  .cx{grid-template-columns:1fr}
  .cx .bx:last-child{display:flex}
  .ntabs{gap:14px;padding:0 12px}
  .mock-h .grow{display:none}
}
@media (max-width:760px){
  .pd:not(.me):not(.c) span{display:none}
  .rnr .n{font-size:10px;white-space:nowrap}
  .rnr{grid-template-columns:26px minmax(0,1fr) 40px}
  .pmap .ax-y{top:-20px;left:4px}
}

.main-g.rs{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
@media (max-width:1040px){.main-g.rs{grid-template-columns:1fr}}

/* =========================================================
   v2: scroll-led product pages. Centred hero, full-width chapters, one pinned workflow story.
   ========================================================= */
.ph2{text-align:center;padding-top:64px;position:relative;z-index:2}
.ph2 h1{font-family:var(--display);font-weight:800;font-size:clamp(40px,5.8vw,82px);line-height:.96;letter-spacing:-.04em;max-width:1040px;margin:0 auto;text-wrap:balance}
.ph2 .lead{margin-top:28px}
.ph2 .cta{margin-top:32px}
.ph2-note{font-size:13.5px;color:var(--muted);margin-top:14px}
.pw2 .app{max-width:1160px}

/* chapters: headline and sentence, then a full-width stage composed for its screen */
.ch-h{max-width:760px}
.ch-h h2{font-family:var(--display);font-weight:800;font-size:clamp(32px,3.6vw,48px);line-height:1.02;letter-spacing:-.032em;text-wrap:balance}
.ch-h p{color:var(--muted);font-size:18px;line-height:1.55;max-width:620px;margin-top:18px;text-wrap:pretty}
.ch-h .more{margin-top:22px;padding-top:0}
.cstage{position:relative;margin-top:48px;background:var(--tint);border-radius:var(--r-lg);overflow:hidden}
.cstage>canvas{position:absolute;inset:0;width:100%;height:100%}
.cstage.wide{padding:56px 56px 0}
.cstage.wide>.mock{border-radius:20px 20px 0 0;max-height:600px;overflow:hidden;-webkit-mask:linear-gradient(180deg,#000 93%,transparent);mask:linear-gradient(180deg,#000 93%,transparent)}
.cstage.center{padding:56px;display:grid;place-items:center}
.cstage.center>.mock{max-width:880px;width:100%}
.cstage.duo2{padding:56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.cstage.duo2>.m-b{margin-top:88px}
.cstage .float{position:absolute;right:40px;bottom:40px;width:330px;z-index:3}
.cstage.withfloat>.mock:not(.float){width:70%}
.cstage.withfloat .mxr{grid-template-columns:118px repeat(6,minmax(0,1fr)) 96px}

/* the workflow story */
.story{padding-top:184px}
.st-track{position:relative;height:calc(var(--n) * 75vh + 100vh);margin-top:28px}
.st-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding-top:76px}
.st-in{width:100%}
.st-steps{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0;list-style:none}
.st-b{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--muted);padding:9px 15px 9px 9px;border-radius:var(--r-pill);background:var(--frame);border:1px solid var(--line);transition:background .3s var(--ease),color .3s,border-color .3s}
.st-b em{font-style:normal;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--tint);font-size:12px;font-weight:800;color:var(--ink)}
.st-b:hover{color:var(--ink)}
.st-b[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.st-b[aria-pressed="true"] em{background:var(--dot)}
.st-bar{flex:1 1 100%;height:2px;border-radius:2px;background:var(--line);margin-top:8px;position:relative;overflow:hidden}
.st-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--dot);border-radius:2px;transition:width .2s linear}
.st-stage{position:relative;background:var(--tint);border-radius:var(--r-lg);overflow:hidden;padding:32px 44px;height:min(540px,calc(100vh - 270px));min-height:460px}
.st-stage>canvas{position:absolute;inset:0;width:100%;height:100%}
.st-stage .app{position:relative;height:100%;max-width:none;animation:none!important;display:flex;flex-direction:column}
.st-stage .main{flex:1;min-height:0;position:relative;padding:0}
.st-views{position:relative;height:100%}
.st-v{position:absolute;inset:0;overflow:hidden;padding:18px 22px;opacity:0;transform:translateY(14px);transition:opacity .45s var(--ease),transform .6s var(--ease);pointer-events:none}
.st-v.on{opacity:1;transform:none;pointer-events:auto}
.st-caps{position:relative;min-height:64px;margin-top:20px}
.st-c{position:absolute;left:0;top:0;display:flex;gap:12px;align-items:baseline;font-size:clamp(17px,1.6vw,21px);line-height:1.45;font-weight:500;max-width:760px;opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .5s var(--ease);text-wrap:pretty}
.st-c.on{opacity:1;transform:none}
.st-c b{flex:none;display:inline-grid;place-items:center;min-width:30px;height:24px;border-radius:var(--r-pill);background:var(--glow);font-family:var(--display);font-size:13px;font-weight:800}
/* unpinned: phones, short screens and reduced motion; the step buttons switch the view */
.story.flat .st-track{height:auto}
.story.flat .st-sticky{position:static;height:auto;padding-top:0;display:block}
.story.flat .st-stage{height:auto;min-height:0;padding:16px}
.story.flat .st-stage .app{height:auto}
.story.flat .st-v{position:relative;inset:auto;transform:none;transition:none}
.story.flat .st-v:not(.on),.story.flat .st-c:not(.on){display:none}
.story.flat .st-c{position:static;transform:none}
.story.flat .st-caps{min-height:0}

/* ---------- views inside the story and chapters ---------- */
.vh2{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px}
.vh2 h4{font-family:var(--display);font-weight:800;font-size:18px;line-height:1.22;letter-spacing:-.02em;max-width:620px;text-wrap:balance}
.vh2 p{font-size:11.5px;color:var(--muted);margin-top:4px}
.vh2 .mbtn{flex:none}
.cols2{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px;align-items:start}
.box{border:1px solid var(--line);border-radius:14px;padding:12px 14px;min-width:0}
.box .lbl2{margin-bottom:6px}
/* products recommended */
.plr{display:grid;grid-template-columns:22px minmax(0,1.3fr) minmax(0,1fr) 64px 150px;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px solid var(--line);font-size:12.5px}
.plr.h{font-size:10.5px;font-weight:600;color:var(--muted);padding:6px}
.plr:last-child{border-bottom:0}
.plr .n{font-size:11px;font-weight:700;color:var(--muted)}
.plr b{font-weight:600;display:block}
.plr small{display:block;font-size:11px;color:var(--muted)}
.plr i{display:block;height:7px;border-radius:99px;background:var(--tint);overflow:hidden}
.plr i b{display:block;height:100%;border-radius:99px;background:var(--slate-200)}
.plr.c i b{background:var(--competitor)}
.plr.me{background:var(--highlight);border-radius:10px;box-shadow:inset 0 0 0 1px var(--highlight-ring);border-bottom-color:transparent}
.plr.me i b{background:var(--dot)}
.plr .tagx{justify-self:end}
.plr em{font-style:normal;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.tagx{font-size:10.5px;font-weight:600;border-radius:var(--r-pill);padding:2px 8px;white-space:nowrap;background:var(--tint);color:var(--ink-70)}
.tagx.w{background:var(--dot-tint);color:var(--warn-ink)}
.tagx.ok{background:var(--success-tint);color:var(--success)}
.tagx.c{background:var(--competitor-tint);color:var(--competitor-ink)}
/* sources table */
.srr{display:grid;grid-template-columns:minmax(0,1.7fr) 92px 104px 96px;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px solid var(--line);font-size:12px}
.srr.h{font-size:10.5px;font-weight:600;color:var(--muted)}
.srr:last-child{border-bottom:0}
.srr>span:first-child{font-family:var(--mono);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.srr .bar2{display:grid;grid-template-columns:1fr 34px;gap:6px;align-items:center}
.srr .bar2 i{display:block;height:6px;border-radius:99px;background:var(--tint);overflow:hidden}
.srr .bar2 i b{display:block;height:100%;background:var(--ink-soft);border-radius:99px}
.srr .bar2 em{font-style:normal;font-size:11px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.srr.me{background:var(--highlight);border-radius:10px;box-shadow:inset 0 0 0 1px var(--highlight-ring);border-bottom-color:transparent}
.call{display:flex;gap:10px;align-items:flex-start;margin-top:12px;background:var(--highlight);box-shadow:inset 0 0 0 1px var(--highlight-ring);border-radius:12px;padding:10px 12px;font-size:12.5px;line-height:1.45}
.call b{font-weight:600}
/* option cards */
.opts{display:grid;grid-template-columns:repeat(var(--k,2),minmax(0,1fr));gap:12px}
.opt{border:1px solid var(--line2);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:6px;font-size:12.5px;min-width:0}
.opt.on{border-color:transparent;box-shadow:inset 0 0 0 2px var(--ink);background:var(--frame)}
.opt .k{font-size:11px;font-weight:600;color:var(--muted)}
.opt b{font-size:14px;font-weight:600;line-height:1.35}
.opt p{color:var(--ink-70);line-height:1.45}
.opt .ft{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:8px}
.qtrav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;border-top:1px solid var(--line);padding-top:12px;font-size:12px;color:var(--muted)}
.qtrav b{color:var(--ink);font-weight:600}
/* reader in a wide view */
.rdw{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px}
.kv2{display:grid;gap:0}
.kv2>span{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:12px}
.kv2>span:last-child{border-bottom:0}
.kv2 em{font-style:normal;color:var(--muted)}
.kv2 b{font-weight:600;text-align:right}
/* who wins where */
.mx{padding:6px 16px 18px;overflow:hidden}
.mxr{display:grid;grid-template-columns:150px repeat(6,minmax(0,1fr)) 120px;gap:6px;align-items:center;margin-bottom:6px;font-size:12px}
.mxr.h{font-size:11px;font-weight:600;color:var(--ink-70);align-items:end}
.mxr.h>span{text-align:center;line-height:1.25}
.mxr.h>span:first-child,.mxr.h>span:last-child{text-align:left}
.mxr .t b{display:block;font-weight:600}
.mxr .t small{display:block;font-size:11px;color:var(--muted)}
.mxc{height:42px;border-radius:9px;display:grid;place-items:center;font-weight:700;font-variant-numeric:tabular-nums;position:relative}
.mxc small{display:block;font-size:9.5px;font-weight:600;line-height:1}
.mxc.ld{box-shadow:inset 0 0 0 2px var(--ink)}
.mxc.na{background:transparent!important;box-shadow:inset 0 0 0 1.5px var(--line3);color:var(--muted);font-weight:500;font-size:10.5px}
.mxr .pl2 b{display:block;font-weight:700}
.mxr .pl2 small{display:block;font-size:11px;color:var(--muted)}
.mxk{display:flex;flex-wrap:wrap;gap:16px;align-items:center;font-size:11px;color:var(--muted);margin-top:10px}
.mxk i{display:inline-block;width:70px;height:7px;border-radius:99px;vertical-align:middle;margin:0 6px;background:linear-gradient(90deg,rgba(10,16,34,.06),rgba(10,16,34,.8))}
.mxk i.me{background:linear-gradient(90deg,rgba(255,181,71,.15),#ffb547)}
/* question tree */
.qt{display:grid;gap:0;font-size:12.5px}
.qtn{display:grid;grid-template-columns:minmax(0,1fr) 150px 112px;gap:12px;align-items:center;padding:9px 6px;border-bottom:1px solid var(--line)}
.qtn.root{background:var(--tint);border-radius:10px;border-bottom-color:transparent;margin-bottom:4px}
.qtn.root>span:first-child b{font-size:13.5px}
.qtn:not(.root)>span:first-child{position:relative;padding-left:26px}
.qtn:not(.root)>span:first-child::before{content:"";position:absolute;left:8px;top:-14px;bottom:50%;width:12px;border-left:1.5px solid var(--line3);border-bottom:1.5px solid var(--line3);border-bottom-left-radius:6px}
.qtn b{font-weight:600}
.qtn small{display:block;font-size:11px;color:var(--muted)}
/* change log */
.chg{display:grid;gap:6px}
.chg span{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:start;font-size:12.5px;line-height:1.4}
.chg span i{width:16px;height:16px;border-radius:5px;background:var(--success-tint);display:grid;place-items:center;margin-top:1px}
.chg span i::after{content:"";width:7px;height:3.5px;border:1.8px solid var(--success);border-top:0;border-right:0;transform:translateY(-1px) rotate(-45deg)}
.mchart{display:block;width:100%;height:auto;overflow:visible}
.mchart .sg line{stroke:rgba(10,16,34,.07)}
.mchart text{font-family:var(--mono);font-size:9.5px;fill:var(--muted)}
.mchart .ln{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mchart .band{fill:rgba(255,181,71,.24)}
.mchart .mk2 line{stroke:var(--ink);stroke-dasharray:3 3;opacity:.5}
.mchart .mk2 rect{fill:var(--ink)}
.mchart .mk2 text{fill:#fff;font-family:var(--body);font-weight:700;font-size:10px}
.mchart .win{fill:rgba(10,16,34,.05)}
/* engine before/after */
.eba{display:grid;gap:0}
.ebr{display:grid;grid-template-columns:96px 1fr 1fr 110px;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px solid var(--line);font-size:12.5px}
.ebr.h{font-size:10.5px;font-weight:600;color:var(--muted)}
.ebr:last-child{border-bottom:0}
.ebr>span:first-child{font-weight:600}
.ebr .res{font-size:11.5px;font-weight:600;text-align:right;color:var(--ink-70)}
.ebr .res.up{color:var(--success)}
.pk.c{background:var(--competitor);color:#fff}
.sumrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
.sumrow>div{background:var(--tint);border-radius:12px;padding:10px 12px}
.sumrow small{display:block;font-size:11px;color:var(--muted)}
.sumrow b{display:block;font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1.15;margin-top:2px;font-variant-numeric:tabular-nums}
.sumrow span{display:block;font-size:11px;color:var(--muted)}
.sumrow .aft{background:var(--highlight);box-shadow:inset 0 0 0 1px var(--highlight-ring)}
.prow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 18px 0;padding:9px 12px;border-radius:10px;border:1px dashed var(--line3);font-size:12px;color:var(--ink-70)}
.prow b{color:var(--ink);font-weight:600}

@media (max-width:1040px){
  .cstage.duo2{grid-template-columns:1fr;padding:28px}
  .cstage.duo2>.m-b{margin-top:0}
  .cstage.wide{padding:28px 28px 0}
  .cstage.center{padding:28px}
  .cstage .float{position:relative;right:auto;bottom:auto;width:auto;margin:16px 0 28px}
  .cstage.withfloat>.mock:not(.float){width:100%}
  .rdw,.cols2{grid-template-columns:1fr}
  .mx{overflow-x:auto}
  .mxr{min-width:760px}
}
@media (max-width:760px){
  .ph2{padding-top:44px}
  .ph2 h1{font-size:clamp(36px,10vw,52px)}
  .ph2 .cta .btn.lg{flex:1 1 150px}
  .cstage{margin-top:32px;border-radius:18px}
  .cstage.wide{padding:14px 14px 0}
  .cstage.center,.cstage.duo2{padding:14px}
  .cstage .float{margin:12px 0 14px}
  .story{padding-top:112px}
  .st-b{font-size:13px;padding:7px 12px 7px 7px}
  .st-v{padding:14px}
  .plr{grid-template-columns:18px minmax(0,1.4fr) 44px}
  .plr>*:nth-child(3),.plr>*:nth-child(5){display:none}
  .srr{grid-template-columns:minmax(0,1.4fr) 80px}
  .srr>*:nth-child(2),.srr>*:nth-child(4){display:none}
  .opts{grid-template-columns:1fr}
  .qtn{grid-template-columns:minmax(0,1fr) 96px}
  .qtn>*:nth-child(2){display:none}
  .ebr{grid-template-columns:72px 1fr 1fr}
  .ebr>*:nth-child(4){display:none}
  .sumrow{grid-template-columns:1fr 1fr}
  .vh2{flex-direction:column}
}
@media (max-width:760px){.mfoot{flex-wrap:wrap}.mfoot .l{flex-basis:100%;margin:0 0 4px}}

/* =========================================================
   v3: fluid layouts. Open stages (no framing box), screenshots from the design boards in frames,
   a dot dissolve at their edges, and a soft dot field behind the story.
   ========================================================= */
.cstage{background:none;overflow:visible;isolation:isolate}
.cstage>canvas{display:none}
.cstage .glow{position:absolute;width:min(560px,52%);height:min(460px,80%);z-index:-1;pointer-events:none}
.cstage .glow.g-tr{top:-56px;right:-5%}
.cstage .glow.g-bl{bottom:-56px;left:-5%}
.cstage .glow.g-br{bottom:-56px;right:-5%}
.cstage .glow canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.cstage.wide{padding:24px 0 0}
.cstage.center{padding:24px 0}
.cstage.duo2{padding:24px 0}
.cstage .float{right:-10px;bottom:24px}

/* screenshot frames */
.shot{margin:0;position:relative;border-radius:16px;overflow:hidden;background:#f5f6f8;box-shadow:var(--sh-3),0 0 0 1px rgba(10,16,34,.07)}
.shot img{display:block;width:100%;height:auto}
.shot.flat{box-shadow:0 0 0 1px rgba(10,16,34,.06)}
/* the dissolve: the screen breaks into dots towards its lower edge */
.dz{box-shadow:none;background:none;
  -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 84%),radial-gradient(circle,#000 38%,transparent 44%),linear-gradient(180deg,transparent 50%,#000 70%,transparent 98%);
  -webkit-mask-size:100% 100%,7px 7px,100% 100%;-webkit-mask-repeat:no-repeat,repeat,no-repeat;
  -webkit-mask-composite:source-over,source-in,source-over;
  mask-image:linear-gradient(180deg,#000 58%,transparent 84%),radial-gradient(circle,#000 38%,transparent 44%),linear-gradient(180deg,transparent 50%,#000 70%,transparent 98%);
  mask-size:100% 100%,7px 7px,100% 100%;mask-repeat:no-repeat,repeat,no-repeat;mask-composite:add,intersect,add}
.dz-r{box-shadow:none;background:none;
  -webkit-mask-image:linear-gradient(90deg,#000 62%,transparent 90%),radial-gradient(circle,#000 38%,transparent 44%),linear-gradient(90deg,transparent 55%,#000 72%,transparent 99%);
  -webkit-mask-size:100% 100%,7px 7px,100% 100%;-webkit-mask-repeat:no-repeat,repeat,no-repeat;-webkit-mask-composite:source-over,source-in,source-over;
  mask-image:linear-gradient(90deg,#000 62%,transparent 90%),radial-gradient(circle,#000 38%,transparent 44%),linear-gradient(90deg,transparent 55%,#000 72%,transparent 99%);
  mask-size:100% 100%,7px 7px,100% 100%;mask-repeat:no-repeat,repeat,no-repeat;mask-composite:add,intersect,add}

/* chapter compositions with screenshots */
.cstage.bleed{padding:24px 0 0}
.cstage.bleed .shot{width:calc(100% + (100vw - 100%) / 2);border-radius:16px 0 0 16px}
.cstage.bleed .shot.dz{border-radius:16px 0 0 0}
.cstage.layer{padding:24px 0 40px;position:relative}
.cstage.layer .l1{width:82%}
.cstage.layer .l2{position:absolute;right:0;bottom:0;width:36%;z-index:2}
.cstage.focus{padding:24px 0;display:grid;justify-items:center}
.cstage.focus .shot{max-width:1000px;width:100%}

/* the hero screenshot, rising from the field */
.pw2 .shot.hshot{max-width:1160px;margin:0 auto;border-radius:22px}
@media (prefers-reduced-motion:no-preference){.pw2 .shot.hshot{animation:rise 1.2s .2s var(--ease) both}}

/* the story: no box; one framed screen at a time, a soft field drifting behind */
.st-stage{background:none;overflow:visible;isolation:isolate}
.st-soft{position:absolute;left:-14%;right:-14%;bottom:-90px;height:70%;z-index:-1;pointer-events:none;-webkit-mask:linear-gradient(180deg,transparent,#000 30%);mask:linear-gradient(180deg,transparent,#000 30%)}
.st-soft canvas{position:absolute;inset:0;width:100%;height:100%}
.story:not(.imgs) .st-stage{padding:8px 0}
.story.imgs .st-stage{padding:0;--sth:min(560px,calc(100vh - 280px));height:var(--sth)}
.story.imgs .st-v{padding:0;display:flex;align-items:center;justify-content:center}
.story.imgs .st-v .shot{max-height:100%;max-width:100%;display:flex}
.story.imgs .st-v .shot img{max-height:var(--sth);max-width:100%;width:auto;height:auto}
.story.flat.imgs .st-stage{height:auto}
.story.flat.imgs .st-v .shot img{max-height:none;width:100%}

@media (max-width:1040px){
  .cstage.layer .l1{width:100%}
  .cstage.layer .l2{position:relative;width:70%;margin:-40px 0 0 auto}
  .cstage.bleed .shot{width:100%;border-radius:16px}
  .cstage .float{right:auto;bottom:auto}
}
@media (max-width:760px){
  .cstage .glow{width:70%;height:50%}
  .cstage.layer .l2{width:88%}
  .st-soft{display:none}
}

.shot picture{display:block}
@media (max-width:760px){
  .shot.hasm{max-width:320px;margin-left:auto;margin-right:auto;border-radius:28px}
  .cstage.bleed .shot.hasm{width:100%;border-radius:28px}
  .cstage.layer .l2{display:none}
  .cstage.layer{padding-bottom:0}
  .pw2 .shot.hshot.hasm{border-radius:30px}
  .story.flat.imgs .st-v .shot img{width:100%}
}

/* =========================================================
   v4: focused crops in soft tiles, as in the platform grid. No dot dissolve.
   A tile is a tint panel with a halftone corner; the crop sits inset from the top-left,
   runs past the right edge and fades at the bottom.
   ========================================================= */
.tile{position:relative;background:var(--tint);border:1px solid rgba(10,16,34,.07);border-radius:var(--r-tile,26px);overflow:hidden;isolation:isolate;min-width:0}
.tile::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle,rgba(245,165,36,.5) 1.3px,transparent 1.8px) 0 0/12px 12px;
  -webkit-mask:radial-gradient(ellipse at 100% 0,#000,transparent 55%);mask:radial-gradient(ellipse at 100% 0,#000,transparent 55%)}
.tile.bl::before{-webkit-mask:radial-gradient(ellipse at 0 100%,#000,transparent 55%);mask:radial-gradient(ellipse at 0 100%,#000,transparent 55%)}
.tile .crop{margin:0;position:relative;padding:var(--pt,44px) 0 0 var(--pl,44px)}
.tile .crop img{display:block;width:var(--w);max-width:none;height:auto;border-radius:14px 0 0 0;box-shadow:var(--sh-3),0 0 0 1px rgba(10,16,34,.06);transition:transform .5s var(--ease)}
.tile .crop.fit img{width:calc(100% - var(--pl,44px));border-radius:14px 14px 0 0}
.tile .crop.whole{padding-bottom:var(--pt,44px)}
.tile .crop.whole img{border-radius:14px}
.tile .crop.whole.fit img{width:100%}
.tile.fade .crop{-webkit-mask:linear-gradient(180deg,#000 72%,transparent);mask:linear-gradient(180deg,#000 72%,transparent)}
.tile:hover .crop img{transform:translateY(-4px)}
.tile .cap2{position:absolute;left:22px;bottom:18px;z-index:2;font-size:13px;font-weight:600;color:var(--ink);background:rgba(255,255,255,.88);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 12px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* chapter compositions with tiles */
.tiles{display:grid;gap:20px;margin-top:48px;align-items:start}
.tiles.one{grid-template-columns:1fr}
.tiles.t75{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.tiles.t57{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.tiles .lo{margin-top:72px}
.tiles .hi{margin-bottom:72px}

/* the hero crop: the main pane only, framed and rising */
.pw2 .hshot{max-width:1160px;margin:0 auto;border-radius:22px;overflow:hidden;box-shadow:var(--sh-3),0 0 0 1px rgba(10,16,34,.06);background:#fff}
.pw2 .hshot img{display:block;width:100%;height:auto}
.pw2 .hshot.fadeb{-webkit-mask:linear-gradient(180deg,#000 80%,transparent);mask:linear-gradient(180deg,#000 80%,transparent)}

/* story with tiles: the tile fills the stage; each step is one focused crop */
.story.tiles2 .st-stage{padding:0;height:min(560px,calc(100vh - 280px))}
.story.tiles2 .st-views{height:100%}
.story.tiles2 .st-v{padding:0}
.story.tiles2 .st-v .tile{height:100%;display:flex;align-items:center;justify-content:center}
.story.tiles2 .st-v .tile .crop{padding:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%}
.story.tiles2 .st-v .tile .crop img{border-radius:14px;width:var(--w);max-width:90%;max-height:calc(100% - 72px);object-fit:contain;object-position:top}
.story.flat.tiles2 .st-stage{height:auto}
.story.flat.tiles2 .st-v .tile{height:auto}
.story.flat.tiles2 .st-v .tile .crop{padding:20px 0 20px 20px;justify-content:flex-start;height:auto}
.story.flat.tiles2 .st-v .tile .crop img{border-radius:12px 0 0 12px;max-width:none;max-height:none}

@media (max-width:1040px){
  .tiles.t75,.tiles.t57{grid-template-columns:1fr}
  .tiles .lo{margin-top:0}.tiles .hi{margin-bottom:0}
}
@media (max-width:760px){
  .tile{border-radius:20px}
  .tile .crop{--pt:20px;--pl:20px}
  .tile .crop img{width:calc(var(--w) * .85)}
  .tile .crop.fit img{width:calc(100% - 20px)}
  .tiles{margin-top:32px;gap:14px}
  .story.flat.tiles2 .st-v .tile .crop img{width:calc(var(--w) * .85)}
}

/* =========================================================
   Primary button, "signal": the arrow rides in an amber dot (you); on hover the dot floods the
   button and the label turns ink. Without an arrow the flood starts from the left edge.
   ========================================================= */
.btn.solid{isolation:isolate;overflow:hidden;position:relative}
.btn.solid::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--dot);clip-path:circle(0 at 0 50%);transition:clip-path .55s var(--ease)}
.btn.solid:hover::before,.btn.solid:focus-visible::before{clip-path:circle(150% at 0 50%)}
.btn.solid:hover,.btn.solid:focus-visible{color:var(--ink);background:var(--ink)}
.btn.solid:has(.arr){padding-right:8px;gap:12px}
.btn.solid.lg:has(.arr){padding-right:8px}
.btn.solid:has(.arr)::before{clip-path:circle(17px at calc(100% - 25px) 50%)}
.btn.solid:has(.arr):hover::before,.btn.solid:has(.arr):focus-visible::before{clip-path:circle(160% at calc(100% - 25px) 50%)}
.btn.solid .arr{width:34px!important;height:34px!important;padding:8px;color:var(--ink);transition:transform .45s var(--ease)}
.btn.solid:hover .arr{transform:translateX(2px) rotate(-45deg)}
.btn.solid:active{transform:translateY(1px) scale(.985)}
/* on ink (closing band): amber button, ink flood, white label */
.band .btn.solid{background:var(--dot);color:var(--ink)}
.band .btn.solid::before{background:#fff}
.band .btn.solid:has(.arr)::before{background:var(--ink)}
.band .btn.solid:has(.arr) .arr{color:#fff}
.band .btn.solid:has(.arr):hover{color:#fff;background:var(--dot)}
.band .btn.solid:has(.arr):hover .arr{color:var(--dot)}
@media (prefers-reduced-motion:reduce){.btn.solid:hover .arr{transform:none}}
.btn.solid .arr{margin-left:auto}
@media (max-width:760px){.cta .btn.solid.lg:has(.arr){justify-content:flex-start;padding-left:22px}}

/* =========================================================
   v5: collages. Two or three small crops, each framed, layered in a tile or over the hero field.
   Crops stay near real size; none is zoomed.
   ========================================================= */
.collage{position:relative;height:var(--ch,520px);width:100%}
.cfig{position:absolute;margin:0;border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--sh-3),0 0 0 1px rgba(10,16,34,.07);transition:transform .5s var(--ease)}
.cfig img{display:block;width:100%;height:auto}
.tile:hover .cfig:nth-child(2){transform:translateY(-5px)}
.tile .collage{height:var(--ch,520px)}
/* hero collage over the dot field */
.pw2 .collage.hero{max-width:1160px;margin:0 auto}
@media (prefers-reduced-motion:no-preference){
  .pw2 .collage.hero .cfig{animation:rise 1.1s var(--ease) both}
  .pw2 .collage.hero .cfig:nth-child(2){animation-delay:.12s}
  .pw2 .collage.hero .cfig:nth-child(3){animation-delay:.24s}
}
/* story: the tile holds the collage */
.story.tiles2 .st-v .tile.col{display:block}
.story.tiles2 .st-v .tile.col .collage{height:100%}
@media (max-width:1040px){
  .collage{height:auto!important;display:grid;gap:14px;padding:0}
  .cfig{position:relative;inset:auto!important;width:auto!important;max-width:100%}
  .tile .collage{padding:18px}
  .story.tiles2 .st-v .tile.col .collage{height:auto}
}
@media (max-width:760px){
  .cfig.dm{display:none}
  .pw2 .collage.hero{padding:0 4px}
}

/* =========================================================
   v6: one continuous crop per tile, bleeding off the edge and fading, never a floating fragment.
   Primary button: "Halftone follow", dots gather under the pointer; at rest and on keyboard focus they sit by the arrow.
   ========================================================= */
.pw2 .hshot.wide{max-width:1160px;border-radius:22px 22px 0 0;background:#f5f6f8;
  -webkit-mask:linear-gradient(180deg,#000 74%,transparent);mask:linear-gradient(180deg,#000 74%,transparent)}
.story.bleed .st-v .tile{display:block;height:100%}
.story.bleed .st-v .tile .crop{display:block;width:auto;height:auto;padding:40px 0 0 44px;
  -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent),linear-gradient(90deg,#000 93%,transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,#000 70%,transparent),linear-gradient(90deg,#000 93%,transparent);mask-composite:intersect}
.story.bleed .st-v .tile .crop img{width:var(--w);max-width:none;max-height:none;border-radius:14px 0 0 0}
.story.flat.bleed .st-v .tile{height:auto;max-height:440px;overflow:hidden}
.story.flat.bleed .st-v .tile .crop{padding:20px 0 0 20px}
@media (max-width:760px){.story.flat.bleed .st-v .tile .crop img{width:calc(var(--w) * .62)}.story.flat.bleed .st-v .tile{max-height:330px}}

/* primary button */
.btn.solid::before{content:"";position:absolute;inset:0;z-index:-1;clip-path:none!important;background:radial-gradient(circle,var(--dot) 1.4px,transparent 1.9px) 0 0/7px 7px;opacity:0;
  -webkit-mask:radial-gradient(circle 74px at var(--mx,calc(100% - 25px)) var(--my,50%),#000 0,rgba(0,0,0,.55) 45%,transparent);
  mask:radial-gradient(circle 74px at var(--mx,calc(100% - 25px)) var(--my,50%),#000 0,rgba(0,0,0,.55) 45%,transparent);transition:opacity .3s var(--ease)}
.btn.solid:hover::before,.btn.solid:focus-visible::before{opacity:1;clip-path:none}
.btn.solid:hover,.btn.solid:focus-visible{color:#fff;background:var(--ink)}
.btn.solid .arr{border-radius:50%;background:var(--dot);color:var(--ink)}
.btn.solid:hover .arr{transform:translateX(2px) rotate(-45deg)}
.band .btn.solid,.band .btn.solid:hover,.band .btn.solid:focus-visible{background:var(--dot);color:var(--ink)}
.band .btn.solid::before{background:radial-gradient(circle,rgba(255,255,255,.85) 1.4px,transparent 1.9px) 0 0/7px 7px}
.band .btn.solid .arr,.band .btn.solid:has(.arr) .arr,.band .btn.solid:has(.arr):hover .arr{background:var(--ink);color:var(--dot)}
.band .btn.solid:has(.arr)::before{background:radial-gradient(circle,rgba(255,255,255,.85) 1.4px,transparent 1.9px) 0 0/7px 7px}
.band .btn.solid:has(.arr):hover,.band .btn.solid:has(.arr):focus-visible{color:var(--ink);background:var(--dot)}
/* =========================================================
   v7: variations for the Research and Impact pages, same core.
   .ch.ch-split    chapter heading split: headline left, text right.
   .tiles.t11  two equal tiles.
   ========================================================= */
.tiles.t11{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ch.ch-split .ch-h{max-width:none;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);column-gap:64px;align-items:end}
.ch.ch-split .ch-h h2{grid-row:1/3}
.ch.ch-split .ch-h p{margin-top:0}
@media (max-width:900px){
  .tiles.t11{grid-template-columns:1fr}
  .ch.ch-split .ch-h{display:block}
  .ch.ch-split .ch-h p{margin-top:18px}
}

/* Resources and Free tools as grouped panels, like Product and Solutions */
.menu.res-menu{width:min(900px,calc(100vw - 80px))}
.menu.tool-menu{width:min(640px,calc(100vw - 80px))}
.res-menu .mm-col:first-child .mm-list,.tool-menu .mm-col:first-child .mm-list{grid-template-columns:1fr}
/* =========================================================
   v8: the six remaining capability pages. Tall board crops are held to one height so paired tiles
   stay in rhythm; the crop still bleeds and fades at the bottom edge.
   ========================================================= */
.tiles.cap .tile{max-height:560px}
.tiles.cap .tile.fade .crop{-webkit-mask:linear-gradient(180deg,#000 calc(560px - 150px),transparent 560px);mask:linear-gradient(180deg,#000 calc(560px - 150px),transparent 560px)}
@media (max-width:760px){.tiles.cap .tile{max-height:420px}
  .tiles.cap .tile.fade .crop{-webkit-mask:linear-gradient(180deg,#000 300px,transparent 420px);mask:linear-gradient(180deg,#000 300px,transparent 420px)}}
/* =========================================================
   v9-11: three templates, a framed hero screen and soft dot fields that run sections together.
   .hshot[data-bar]  the hero screen in an app window: title bar, full border, closed bottom edge.
   .ph-split         template B hero: headline left, lead and buttons right.
   .rail             template B chapters beside a sticky contents rail.
   .wsteps/.sbento   template B story as a four-step grid (homepage platform-grid tiles, words inside).
   .cgrid/.bento     template C chapters in the homepage platform grid: one tall tile beside two stacked.
   .flow             a soft drifting dot field across a section boundary, behind the content.
   ========================================================= */

/* framed hero screen */
.pw2 .hshot.wide{max-width:1120px;margin:0 auto;border-radius:18px;background:#fff;overflow:hidden;
  border:1px solid rgba(10,16,34,.12);box-shadow:0 40px 80px -40px rgba(10,16,34,.42),0 2px 6px rgba(10,16,34,.05);
  -webkit-mask:none;mask:none;position:relative}
.pw2 .hshot.wide::before{content:attr(data-bar);display:flex;align-items:center;height:42px;padding-left:76px;
  font:600 13px/1 var(--body);color:var(--muted);letter-spacing:.01em;border-bottom:1px solid rgba(10,16,34,.08);
  background:radial-gradient(circle 5px at 22px 21px,#e4e7ee 98%,transparent),radial-gradient(circle 5px at 40px 21px,#e4e7ee 98%,transparent),
    radial-gradient(circle 5px at 58px 21px,#e4e7ee 98%,transparent),#fafbfd}
.pw2 .hshot.wide picture,.pw2 .hshot.wide>img{display:block;max-height:600px;overflow:hidden}
.pw2 .hshot.wide img{display:block;width:100%;height:auto}
.pw2 .hshot.wide::after{content:"";position:absolute;left:0;right:0;bottom:0;height:72px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff 92%)}
@media (max-width:760px){
  .pw2 .hshot.wide{border-radius:14px}
  .pw2 .hshot.wide::before{height:34px;padding-left:58px;font-size:12px;background-position:0 0;
    background:radial-gradient(circle 4px at 16px 17px,#e4e7ee 98%,transparent),radial-gradient(circle 4px at 30px 17px,#e4e7ee 98%,transparent),
      radial-gradient(circle 4px at 44px 17px,#e4e7ee 98%,transparent),#fafbfd}
  .pw2 .hshot.wide picture,.pw2 .hshot.wide>img{max-height:520px}
}

/* template B: split hero */
.ph2.ph-split{text-align:left;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:64px;align-items:end;max-width:1180px}
.ph2.ph-split h1{margin:0;max-width:none;font-size:clamp(40px,5.2vw,76px)}
.ph-side2 .lead{margin:0;max-width:none}
.ph-side2 .cta{justify-content:flex-start;margin-top:26px}
.ph-side2 .ph2-note{text-align:left}
@media (max-width:900px){.ph2.ph-split{display:block}.ph-side2{margin-top:22px}}

/* template B: chapters beside a sticky rail */
.rail{display:grid;grid-template-columns:260px minmax(0,1fr);gap:72px;padding-top:120px;align-items:start}
.rail-nav{position:sticky;top:120px}
.rail-nav ol{list-style:none;margin:0;padding:0;display:grid;gap:4px;border-left:2px solid var(--line)}
.rail-nav a{display:flex;gap:12px;align-items:baseline;padding:10px 0 10px 18px;margin-left:-2px;border-left:2px solid transparent;
  color:var(--muted);text-decoration:none;font-weight:600;font-size:15px;line-height:1.35;transition:color .25s,border-color .25s}
.rail-nav a em{font-style:normal;font-size:12px;font-weight:700;color:var(--muted);opacity:.7;min-width:14px}
.rail-nav a:hover,.rail-nav a.on{color:var(--ink);border-left-color:var(--dot)}
.rail-nav a.on em{color:var(--ink);opacity:1}
.rail-body{display:grid;gap:120px}
.rail-ch h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,3vw,42px);line-height:1.06;letter-spacing:-.03em;text-wrap:balance;max-width:640px;scroll-margin-top:110px}
.rail-ch>p{margin-top:16px;color:var(--muted);max-width:620px;font-size:17px;line-height:1.6}
.rail-ch .more{margin-top:16px}
.rail-ch .tiles{margin-top:32px}
@media (max-width:900px){.rail{display:block;padding-top:72px}.rail-nav{display:none}.rail-body{gap:80px}}

/* story placed straight after the hero (template C) */
.pw2+.story{padding-top:150px}

.rail-body{grid-template-columns:minmax(0,1fr)}
.rail-ch{min-width:0}
.ph2.ph-split{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
.ph2.ph-split h1{font-size:clamp(38px,4.6vw,66px)}

/* homepage platform grid (template C chapters, template B steps): screen at the top of the tile, words inside below it */
.cgrid{padding-top:40px}
.bento{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px;align-items:stretch}
.bento .bt:first-child{grid-row:1/3}
.bt,.sb{display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.bt-shot{position:relative;overflow:hidden;height:250px;-webkit-mask:linear-gradient(180deg,#000 70%,transparent);mask:linear-gradient(180deg,#000 70%,transparent)}
.bento .bt:first-child .bt-shot{height:auto;flex:1;min-height:420px}
.bt-b{padding:22px 30px 30px;position:relative}
.bt-b h2{font-family:var(--display);font-weight:800;font-size:clamp(22px,2vw,28px);line-height:1.12;letter-spacing:-.025em;text-wrap:balance;scroll-margin-top:110px}
.bt-b>p{margin-top:10px;color:var(--muted);font-size:15.5px;line-height:1.6;max-width:560px}
.bt-b .more{margin-top:14px}
.wsteps{padding-top:40px}
.sbento{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.sb{grid-column:span 5}
.sb:nth-child(1),.sb:nth-child(4){grid-column:span 7}
.sb .bt-shot{height:280px}
.sg-l{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;color:var(--ink);margin:0}
.sg-l em{font-style:normal;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--dot);font-size:13px;font-weight:800}
.sg-p{margin-top:8px;color:var(--muted);font-size:15.5px;line-height:1.55}
@media (max-width:900px){.bento{grid-template-columns:1fr}.bento .bt:first-child{grid-row:auto}.bento .bt:first-child .bt-shot{min-height:300px}
  .sbento{grid-template-columns:1fr}.sb,.sb:nth-child(1),.sb:nth-child(4){grid-column:auto}.bt-shot,.sb .bt-shot{height:230px}}



/* flowing transitions: a zero-height anchor at each boundary carries a soft field reaching into both sections */
main{position:relative;z-index:0}
.flow{position:relative;height:0;pointer-events:none}
.flow canvas{position:absolute;left:0;right:0;width:100%;height:640px;top:-320px;z-index:-1;display:block}
@media (max-width:760px){.flow canvas{height:420px;top:-210px}}
/* the template B contents rail rests a little above the middle of the screen */
.rail-nav{top:calc(42vh - 90px)}

/* round 12: grid screens at real size, bleeding off the edge; sections keep a full breath between them */
.bt-shot .crop{--pt:30px;--pl:30px}
.bt-shot .crop img{width:var(--w);max-width:none}
.rail,.wsteps,.cgrid{padding-top:184px}
.pw2+.story{padding-top:184px}
.ch .tiles,.rail-ch .tiles{margin-bottom:0}
@media (max-width:760px){.rail,.wsteps,.cgrid,.pw2+.story{padding-top:112px}.bt-shot .crop img{width:calc(var(--w) * .85)}}

/* R-NO-EMPTY (founder, 8 Oct): the story stage eases to a short screen's height (praised.js fit()); template C chapters sit in
   a 7/5 checkerboard with the third tile full width, so no tall tile stretches past its screen */
.story.tiles2 .st-stage{transition:height .45s var(--ease)}
.bento.cb .bt,.bento.cb .bt:first-child{grid-row:auto;justify-content:flex-start}
.bento.cb .bt-shot,.bento.cb .bt:first-child .bt-shot{flex:1 1 300px;height:auto;min-height:300px}
.bento.cb .bt:nth-child(3){grid-column:1/-1}
.bento.cb .bt:nth-child(3) .bt-shot{flex-basis:340px;min-height:340px}
@media (max-width:900px){.bento.cb .bt-shot,.bento.cb .bt:first-child .bt-shot{min-height:230px;flex-basis:230px}}

/* Where it connects: three tiles, each a real panel from the page it opens (R-CROP, founder 11 Oct 2026) */
.cxg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.cxg-a{display:flex;flex-direction:column;background:var(--tint);border:1px solid rgba(10,16,34,.07);border-radius:26px;overflow:hidden;color:inherit;text-decoration:none;transition:border-color .3s,box-shadow .4s var(--ease)}
.cxg-a:hover{border-color:rgba(10,16,34,.14);box-shadow:var(--sh-2)}
.cxg-a:focus-visible{outline:3px solid var(--dot);outline-offset:3px}
.cxg-shot{position:relative;display:block;height:300px;overflow:hidden;-webkit-mask:linear-gradient(180deg,#000 70%,transparent);mask:linear-gradient(180deg,#000 70%,transparent)}
.cxg-shot img{position:absolute;left:50%;top:22px;translate:-50% 0;width:min(370px,calc(100% - 28px));height:auto;border-radius:16px;box-shadow:0 24px 50px -34px rgba(10,16,34,.35);transition:transform .5s var(--ease)}
.cxg-a:hover .cxg-shot img{transform:translateY(-6px)}
.cxg-a .bx-b{padding:18px 26px 24px}
.cxg-a .bx-b b{font-size:21px}
@media (max-width:760px){.cxg-shot{height:280px}.cxg-shot img{top:16px}}


/* R-CROP (founder 11 Oct 2026, over-ruling the strict no-shrink of Round 12): a wide screen may shrink to 85% to fit its
   frame, never further; below that it bleeds off the right edge. One screen per chapter, a slimmer rail, template C's
   grid stacked full width, so screens show near their real size. */
@media (min-width:761px){
  main .tile .crop img{width:max(calc(var(--w) * .85),min(var(--w),100%))}
  .rail{grid-template-columns:200px minmax(0,1fr);gap:48px}
  .cgrid .bento{grid-template-columns:minmax(0,1fr)}
  .cgrid .bento .bt:first-child{grid-row:auto}
  .cgrid .bt-shot,.cgrid .bento .bt:first-child .bt-shot{height:auto;max-height:440px;min-height:0;flex:none}
}

/* =========================================================
   Solutions template S (sol.py): programme-led pages on the shared visual system. The hero is the product funnel hero
   (pp9.css .pw2 .hshot.wide, R-HERO-FULL). Solutions sections (R-SOLUTIONS, R-FLUID, R-NO-REPEAT, R-SCROLL-ALIVE):
   .sv1      stage in a wide frame that grows to full size as it scrolls in
   .sv2      split heading, then two frames in the grid drifting up at different speeds
   .sv3      a pinned stage: the words hold while a tall report scrolls inside its frame
   .ex       the worked example demonstrated in the homepage grid, tiles rising in
   Scroll values come from praised.js: --p (0 entering, 1 settled) on [data-sx], --pin across [data-pin].
   ========================================================= */

.pchip{display:inline-flex;align-items:center;gap:8px;padding:7px 13px 7px 10px;border-radius:var(--r-pill);background:#fff;
  border:1px solid var(--line2);color:var(--ink);text-decoration:none;font-weight:600;font-size:13.5px;line-height:1.2;
  box-shadow:0 1px 0 rgba(10,16,34,.03);transition:border-color .2s,transform .25s var(--ease),box-shadow .25s}
.pchip .ico{width:15px;height:15px;flex:none;color:var(--muted)}
.pchip:hover,.pchip:focus-visible{border-color:var(--line3);transform:translateY(-1px);box-shadow:var(--sh-1)}

/* hero: the window settles flat as the page starts to scroll */
.pw2 .hshot.wide[data-sx]{transform:translateY(calc((1 - var(--p,1)) * 28px))}   /* translate only: a scaled or tilted screen blurs its text (R-SHARP) */

/* stage words */
.sw .fx-k{display:inline-flex;align-items:center;gap:10px;margin:0;padding:7px 15px 7px 9px;border-radius:999px;justify-self:start;
  background:linear-gradient(180deg,#fff,var(--tint));border:1px solid var(--line2);font-weight:700;font-size:14.5px;color:var(--ink);box-shadow:var(--sh-1)}
.sw .fx-k .ico{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--dot);color:var(--ink)}
.sw h2{margin-top:22px;font-family:var(--display);font-weight:800;font-size:clamp(32px,3.4vw,52px);line-height:1.02;letter-spacing:-.035em;text-wrap:balance;scroll-margin-top:120px}
.sw .fx-p{margin-top:20px;color:var(--muted);font-size:17px;line-height:1.65}
.sw .fx-c{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.sw-c{text-align:center;max-width:780px;margin:0 auto;display:grid;justify-items:center}
.sw-c .fx-k{justify-self:center}.sw-c .fx-p{max-width:640px}.sw-c .fx-c{justify-content:center}
.sw-s{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:72px;align-items:end}
.sw-s .fx-k{grid-column:1}.sw-s h2{grid-column:1;max-width:620px}
.sw-s .fx-p{grid-column:2;grid-row:2;margin:0;align-self:end}
.sw-s .fx-c{grid-column:2;grid-row:3}
.sw-p .fx-p{max-width:430px}.sw-p .fx-c{max-width:430px}

/* frames: lifted, with a warm glow under them */
.sv-t{border-radius:28px;background:linear-gradient(160deg,#fff 0%,var(--tint) 55%,#f1f4fa 100%);
  box-shadow:0 50px 90px -60px rgba(10,16,34,.45),0 1px 0 rgba(255,255,255,.8) inset}
.sv-t .crop{--pt:52px;--pl:52px}
.sv-t .crop img{width:var(--w);max-width:none}
.sv-t.fade .crop{-webkit-mask:linear-gradient(180deg,#000 76%,transparent);mask:linear-gradient(180deg,#000 76%,transparent)}

/* stage 1: a wide frame that grows in */
.sv1{padding-top:184px}
.sv1-f{position:relative;margin-top:60px;clip-path:inset(calc((1 - var(--p,1)) * 7%) calc((1 - var(--p,1)) * 9%) 0 round 28px)}   /* the frame opens up; never scaled (R-SHARP) */
.sv1-f::before{content:"";position:absolute;inset:10% 6% -8%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,181,71,.26),rgba(255,181,71,0));filter:blur(20px)}
.sv1 .sv-t{max-height:560px}

/* stage 2: two frames drifting at different speeds */
.sv2{padding-top:184px}
.sv2-g{margin-top:64px;align-items:start}
.sv2-a{transform:translateY(calc((1 - var(--p,1)) * 50px))}
.sv2-b{transform:translateY(calc((1 - var(--p,1)) * 150px));margin-top:72px}
.sv2 .sv-t{max-height:520px}

/* stage 3: pinned; the report scrolls inside its frame */
.sv3{margin-top:184px;height:250vh;position:relative}
.sv3-st{position:sticky;top:0;height:100vh;display:grid;align-items:center}
.sv3-in{display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,7.6fr);gap:72px;align-items:center;width:100%}
.sv3-f{height:min(660px,80vh);overflow:hidden;position:relative;-webkit-mask:linear-gradient(180deg,transparent 0,#000 56px,#000 calc(100% - 70px),transparent);mask:linear-gradient(180deg,transparent 0,#000 56px,#000 calc(100% - 70px),transparent)}
.sv3-f::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(180deg,rgba(247,249,252,0),var(--tint));pointer-events:none}
.sv3-c{--pt:48px;--pl:48px}
.sv3-c img{border-radius:14px 14px 0 0}

/* the worked example, demonstrated in the grid; tiles rise in */
.ex .sbento{margin-top:56px}
.ex .sb .bt-shot{height:320px}
.ex .sb{transition:box-shadow .5s var(--ease)}
.ex .sb[data-sx]{transform:translateY(calc((1 - var(--p,1)) * 70px));opacity:calc(.25 + .75 * var(--p,1))}
.ex .sb:hover{box-shadow:0 40px 70px -50px rgba(10,16,34,.4)}
.ex .sg-l{color:var(--ink);font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.02em}
.ex .bt-b{padding:20px 30px 28px}

/* overview: the solution pages in homepage grids, each tile a link showing that page's hero screen */
.ov .sbento{margin-top:56px}
.ov .sb .bt-shot{height:300px}
.ov-n3 .sb:nth-child(3){grid-column:1/-1}
.ov-n3 .sb:nth-child(3) .bt-shot{height:340px}
.ov-a{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.ov-t{transition:box-shadow .5s var(--ease)}
.ov-t[data-sx]{transform:translateY(calc((1 - var(--p,1)) * 70px));opacity:calc(.25 + .75 * var(--p,1))}
.ov-t:hover{box-shadow:0 40px 70px -50px rgba(10,16,34,.4)}
.ov .bt-b h3{font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin:0}
.ov .bt-b p{margin-top:8px;color:var(--muted);font-size:15.5px;line-height:1.55;max-width:520px}
.ov .bt-b .more{display:inline-flex;margin-top:14px}
.ov+.ov{padding-top:140px}
@media (prefers-reduced-motion:reduce){.ov-t[data-sx]{transform:none;opacity:1}}

@media (max-width:1040px),(max-height:719px){
  .sv3{height:auto}
  .sv3-st{position:static;height:auto}
  .sv3-in{grid-template-columns:1fr;gap:36px}
  .sv3-f{height:520px}
}
@media (max-width:1040px){
  .sw-s{grid-template-columns:1fr}
  .sw-s .fx-p,.sw-s .fx-c{grid-column:1;grid-row:auto;margin-top:20px}
  .sv2-b{margin-top:0}
}
@media (max-width:760px){
  .sv1,.sv2{padding-top:112px}.sv3{margin-top:112px}
  .sv-t .crop{--pt:28px;--pl:28px}
  .sv-t .crop img{width:calc(var(--w) * .85)}
  .sv3-f{height:440px}
  .ex .sb .bt-shot{height:240px}
  .ov .sb .bt-shot,.ov-n3 .sb:nth-child(3) .bt-shot{height:240px}
}
@media (prefers-reduced-motion:reduce){
  .pw2 .hshot.wide[data-sx],.sv2-a,.sv2-b,.ex .sb[data-sx]{transform:none;opacity:1}
  .sv1-f{clip-path:none}
}

/* ---- middle-section library (R-VARY-MIDDLE). Screens move only by sliding or a clip (R-SHARP). ---- */
.sw-l{max-width:720px}

/* editorial: big type drifting sideways above a frame that rises under it (never covering the type) */
.sed{padding-top:184px;position:relative}
.sed .fx-k{display:inline-flex;align-items:center;gap:10px;margin:0;padding:7px 15px 7px 9px;border-radius:999px;
  background:linear-gradient(180deg,#fff,var(--tint));border:1px solid var(--line2);font-weight:700;font-size:14.5px;color:var(--ink);box-shadow:var(--sh-1)}
.sed .fx-k .ico{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--dot);color:var(--ink)}
.sed-h{margin-top:26px;font-family:var(--display);font-weight:800;font-size:clamp(44px,6.2vw,96px);line-height:.95;letter-spacing:-.045em;
  max-width:1100px;text-wrap:balance;transform:translateX(calc((1 - var(--p,1)) * 70px));position:relative;z-index:0}
.sed-g{display:grid;grid-template-columns:minmax(0,3.8fr) minmax(0,8.2fr);gap:56px;align-items:start;margin-top:44px;position:relative;z-index:1}
.sed-w{padding-top:24px}
.sed-w .fx-p{margin-top:0}
.sed-f{transform:translateY(calc((1 - var(--p,1)) * 40px))}
.sed .sv-t{max-height:540px}

/* tabs: phrases from the copy switch one framed screen */
.stb{padding-top:184px}
.stb-t{display:flex;flex-wrap:wrap;gap:8px;margin-top:48px;padding:6px;border-radius:999px;background:var(--tint);border:1px solid var(--line);width:max-content;max-width:100%}
.stb-b{position:relative;overflow:hidden;font:inherit;font-weight:700;font-size:15px;padding:11px 22px;border-radius:999px;border:0;background:none;color:var(--muted);cursor:pointer;transition:background .25s,color .25s,box-shadow .25s}
.stb-b[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:var(--sh-1)}
.stb-b:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.stb-b i{position:absolute;left:18px;right:18px;bottom:5px;height:2px;border-radius:2px;background:var(--dot);transform-origin:left;transform:scaleX(0)}
.stb.play .stb-b[aria-pressed="true"] i{animation:stbbar var(--tt,4.5s) linear forwards}
@keyframes stbbar{to{transform:scaleX(1)}}
.stb-s{display:grid;grid-template-columns:minmax(0,1fr);margin-top:28px}
.stb-v{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease),visibility 0s .55s}
.stb-v.on{opacity:1;visibility:visible;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}
.stb .sv-t{height:520px}

/* deck: app windows dealt onto a pile as you scroll (pinned) */
.dk{margin-top:184px;height:280vh;position:relative}
.dk-st{position:sticky;top:0;height:100vh;display:grid;align-items:center}
.dk-in{display:grid;grid-template-columns:minmax(0,4.2fr) minmax(0,7.8fr);gap:72px;align-items:center;width:100%}
.dk-pile{position:relative;height:min(600px,74vh)}
.dk-c{position:absolute;left:0;right:0;top:calc(var(--k) * 26px);bottom:calc((var(--n1) - var(--k)) * 26px);margin:0;border-radius:20px;overflow:hidden;
  background:#fff;border:1px solid rgba(10,16,34,.12);box-shadow:0 30px 60px -36px rgba(10,16,34,.45);
  --t:clamp(0, calc(var(--pin, 0) * var(--n1) * 1.15 - var(--k) + 1), 1);transform:translateY(calc((1 - var(--t)) * 115%))}
.dk-c:first-child{transform:none}
.dk-c::before{content:attr(data-bar);display:flex;align-items:center;height:40px;padding-left:72px;font:600 13px/1 var(--body);color:var(--muted);
  border-bottom:1px solid rgba(10,16,34,.08);background:radial-gradient(circle 5px at 22px 20px,#e4e7ee 98%,transparent),radial-gradient(circle 5px at 40px 20px,#e4e7ee 98%,transparent),radial-gradient(circle 5px at 58px 20px,#e4e7ee 98%,transparent),#fafbfd}
.dk-t{border-radius:0;height:calc(100% - 40px);box-shadow:none;border:0}
.dk-t .crop{--pt:36px;--pl:36px}
.dk-t .crop img{width:var(--w);max-width:none}

/* ribbon: a row of framed screens moving sideways through the content box as you scroll (pinned) */
.rb{margin-top:184px;height:260vh;position:relative}
.rb-st{position:sticky;top:0;height:100vh;display:grid;align-items:center}
.rb-in{width:100%}
.rb-view{margin-top:48px;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 90px),transparent);mask:linear-gradient(90deg,transparent 0,#000 40px,#000 calc(100% - 90px),transparent)}
.rb-track{list-style:none;margin:0;padding:0 0 0 0;display:flex;gap:28px;width:max-content;transform:translateX(calc(var(--pin,0) * -1 * var(--dist,0px)))}
.rb-c{width:min(620px,70vw);flex:none}
.rb-t{height:400px}
.rb-t .crop{--pt:40px;--pl:40px}
.rb-t .crop img{width:var(--w);max-width:none}
.rb-l{margin:16px 0 0;font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--ink)}

/* read-along: the paragraph set large, each sentence lighting up as it passes; the frame holds still beside it */
.srd{padding-top:184px;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:64px;align-items:start}
.srd .fx-k{display:inline-flex;align-items:center;gap:10px;margin:0;padding:7px 15px 7px 9px;border-radius:999px;
  background:linear-gradient(180deg,#fff,var(--tint));border:1px solid var(--line2);font-weight:700;font-size:14.5px;color:var(--ink);box-shadow:var(--sh-1)}
.srd .fx-k .ico{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--dot);color:var(--ink)}
.srd h2{margin-top:22px;font-family:var(--display);font-weight:800;font-size:clamp(30px,3vw,44px);line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
.rd-p{margin-top:36px;font-family:var(--display);font-weight:700;font-size:clamp(24px,2.3vw,34px);line-height:1.28;letter-spacing:-.02em;color:var(--ink)}
.rd-p span{opacity:calc(.22 + .78 * clamp(0, calc(var(--r,1) * var(--n) * 1.2 - var(--i)), 1));transition:opacity .3s}
.srd .fx-c{margin-top:30px;display:flex;flex-wrap:wrap;gap:8px}
.rd-s{position:sticky;top:calc(50vh - 300px)}
.rd-t{height:min(600px,70vh)}

/* trio: three frames of different heights drifting at different speeds */
.str{padding-top:184px}
.tr-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr) minmax(0,3fr);gap:22px;margin-top:64px;align-items:start}
.tr-f .sv-t{height:460px}
.tr-1 .sv-t{height:380px}.tr-2 .sv-t{height:420px}
.tr-0{transform:translateY(calc((1 - var(--p,1)) * 30px))}
.tr-1{margin-top:70px;transform:translateY(calc((1 - var(--p,1)) * 110px))}
.tr-2{margin-top:30px;transform:translateY(calc((1 - var(--p,1)) * 190px))}
.tr-f .crop{--pt:34px;--pl:34px}

/* iris: the frame opens from its centre as it scrolls in */
.ir{padding-top:184px}
.ir-f{margin-top:56px;clip-path:circle(calc(22% + var(--p,1) * 70%) at 50% 42%)}
.ir .sv-t{max-height:560px}

@media (max-width:1040px),(max-height:719px){
  .dk,.rb{height:auto}
  .dk-st,.rb-st{position:static;height:auto}
  .dk-in{grid-template-columns:1fr;gap:36px}
  .dk-pile{height:auto;display:grid;gap:18px}
  .dk-c{position:relative;top:auto;bottom:auto;transform:none;height:440px}
  .rb-view{overflow-x:auto;-webkit-mask:none;mask:none;scroll-snap-type:x mandatory}
  .rb-track{transform:none}
  .rb-c{scroll-snap-align:start}
}
@media (max-width:1040px){
  .sed-g{grid-template-columns:1fr;margin-top:28px;gap:28px}
  .sed-w{padding-top:0}
  .srd{grid-template-columns:minmax(0,1fr)}
  .rd-s{position:static}
  .tr-g{grid-template-columns:1fr}
  .tr-1,.tr-2{margin-top:0}
}
@media (max-width:760px){
  .sed,.stb,.srd,.str,.ir{padding-top:112px}.dk,.rb{margin-top:112px}
  .stb .sv-t,.rb-t{height:380px}
  .rb-c{width:82vw}
  .stb-t{width:auto;border-radius:20px}
}
@media (prefers-reduced-motion:reduce){
  .sed-h,.sed-f,.tr-0,.tr-1,.tr-2{transform:none}.ir-f{clip-path:none}.dk-c{transform:none}.rd-p span{opacity:1}
}

/* R-DISSOLVE (founder, 8 Oct): frames dissolve at the edges their screen runs into: the bottom always, the right side as
   the screen runs on. A frame never ends in a hard cut. R-FIT: a frame fits its screen (--cw from sol._t) instead of
   leaving an empty stretch beside it. */
.sv-t,.rb-t,.rd-t,.tr-f .sv-t{
  -webkit-mask:linear-gradient(180deg,#000 calc(100% - 120px),transparent),linear-gradient(90deg,#000 calc(100% - 80px),transparent);
  -webkit-mask-composite:source-in;mask:linear-gradient(180deg,#000 calc(100% - 120px),transparent),linear-gradient(90deg,#000 calc(100% - 80px),transparent);mask-composite:intersect}
.dk-t{-webkit-mask:linear-gradient(180deg,#000 calc(100% - 90px),transparent);mask:linear-gradient(180deg,#000 calc(100% - 90px),transparent)}
.sv-t.fade .crop,.rb-t.fade .crop,.dk-t.fade .crop{-webkit-mask:none;mask:none}
.sv-t{max-width:var(--cw,none)}
.sv1 .sv-t,.ir .sv-t,.stb-v .sv-t{margin-inline:auto}
.bx-shot{-webkit-mask:linear-gradient(180deg,#000 66%,transparent),linear-gradient(90deg,#000 calc(100% - 60px),transparent);-webkit-mask-composite:source-in;
  mask:linear-gradient(180deg,#000 66%,transparent),linear-gradient(90deg,#000 calc(100% - 60px),transparent);mask-composite:intersect}
.m-card.m-shot{right:auto;font-size:0}
.m-card.m-shot img{display:block;max-width:none;height:auto}

/* Content audit (8 Oct): a contextual next-task link beside a section's chips, a caption under each tab's screen
   (a tab names an issue or a job, the caption its response), a caption under each worked-example step, and a three-step
   example grid (7/5, then the third step full width). */
.fx-c .sw-more{margin:0 0 0 6px;padding-top:0;align-self:center;color:var(--ink)}
.stb-c{margin:22px auto 0;max-width:680px;text-align:center;color:var(--muted);font-size:16.5px;line-height:1.6;text-wrap:pretty}
.stb-l{display:inline-flex;align-items:center;gap:6px;margin-left:4px;font-weight:600;color:var(--ink);white-space:nowrap}
.stb-l .arr{width:16px;height:16px}
.ex .sg-p{max-width:560px}
.sbento.ex-n3 .sb:nth-child(3){grid-column:1/-1}
@media (max-width:760px){.stb-c{font-size:15.5px;margin-top:16px}}
.ov-jobs .stb-t{border-radius:26px}   /* seven jobs wrap to two rows: a softer corner than the pill */

/* solution sections at readable size (R-CROP, founder 11 Oct 2026): the editorial frame runs full width under its words */
@media (min-width:761px){
  .sed-g{grid-template-columns:minmax(0,1fr)!important}
  .sed-w{max-width:640px}
  .sv2-g.tiles.one .sv2-a{transform:none}
}
/* a narrow panel gets a frame its own width, beside the words (R-FIT) */
@media (min-width:761px){
  .tile:has(img[src*="cp-"]),.tile:has(img[src*="hm-"]),.tile:has(img[src*="pin-"]){width:fit-content;max-width:100%}
  .tile:has(img[src*="cp-"]) .crop,.tile:has(img[src*="hm-"]) .crop,.tile:has(img[src*="pin-"]) .crop{padding-right:44px}
  main .tile .crop img:is([src*="cp-"],[src*="hm-"],[src*="pin-"]){width:var(--w);border-radius:14px}
}
@media (min-width:761px){.dk-t:has(img[src*="cp-"]),.dk-t:has(img[src*="hm-"]){height:auto;padding-bottom:36px}}

/* =========================================================
   Free tools template T (tools.py): the tool works inside the funnel hero's app window; drawn in HTML (no board exists
   for the public tools) so every word stays pin-sharp. Nothing here scales or tilts text (R-SHARP): motion is
   translation, opacity, clip and SVG strokes only.
   .wck       the website checker in the hero window: input, pages to try, loading, result (dial + five factors)
   .fx5       pinned: one ring of five weighted arcs, the factors passing beside it
   .fd        a free finding opened into its paste-ready fix (light list, dark code pane), the panes settling together
   .tri       the worked example: the free findings weighed as a worksheet, the first fix lifting out of the list
   .bnd       the boundary (retired from the checker page 8 Oct 2026; its points moved to the FAQ and the closing band)
   .nxg       shared bottom grid "Use the result to choose your next step"
   .mt        shared "More free tools", each card a drawn glimpse of that tool's result
   ========================================================= */
:root{--ok:#178a5c;--warn:#c98200;--bad:#d2405a;--ok-t:rgba(23,138,92,.14);--bad-t:rgba(210,64,90,.12);--track:#edf0f6}
.ok{--c:var(--ok)}.warn{--c:var(--warn)}.bad{--c:var(--bad)}

/* ---- the checker, in the hero window ---- */
.pw2 .hshot.wide.wck{overflow:visible;text-align:left}
.pw2 .hshot.wide.wck::after{display:none}
.pw2 .hshot.wide.wck::before{border-radius:18px 18px 0 0}
.ck-form{padding:34px 44px 0}
.ck-field input{font-size:17px;font-weight:500}
.ck-field .btn{font-size:15px}
.ck-try{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.ck-tl{font-size:13.5px;font-weight:600;color:var(--muted);margin-right:4px}
.ck-chip{font:600 13.5px/1.2 var(--body);color:var(--ink);background:#fff;border:1px solid var(--line2);border-radius:var(--r-pill);
  padding:8px 14px;cursor:pointer;transition:border-color .2s,background .2s,box-shadow .25s}
.ck-chip:hover{border-color:var(--line3)}
.ck-chip[aria-pressed=true]{border-color:var(--ink);background:linear-gradient(180deg,#fff,#fff8ec);box-shadow:0 0 0 3px rgba(255,181,71,.22)}
.ck-msg{font-size:13.5px;font-weight:500;color:var(--ink);margin-top:10px;display:flex;gap:8px;align-items:center}
.ck-msg:empty{display:none}
.ck-msg::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dot);flex:none}
.ck-out{position:relative;margin-top:28px;padding:34px 44px 40px;border-top:1px solid var(--line);border-radius:0 0 18px 18px;
  background:linear-gradient(180deg,var(--tint),#fff 70%)}
.ck-res{display:grid;grid-template-columns:184px minmax(0,1fr) minmax(0,1.08fr);gap:44px;align-items:center;transition:opacity .35s}
.ck-dial{width:184px;height:184px;display:block;overflow:visible}
.ck-dial circle{fill:none;stroke-width:14;transform:rotate(-90deg);transform-origin:100px 100px}
.dl-tr{stroke:var(--track)}
.dl-tg{stroke:rgba(23,138,92,.2)}
.dl-v{stroke:var(--c);stroke-linecap:round;transition:stroke-dasharray 1s var(--ease),stroke .4s}
.dl-n{font:800 54px/1 var(--display);fill:var(--ink);letter-spacing:-.03em}
.dl-o{font:500 13px/1 var(--body);fill:var(--muted)}
.ck-t{font:800 clamp(22px,2vw,28px)/1.1 var(--display);letter-spacing:-.025em;margin:0}
.ck-t b{color:var(--c,var(--ink))}
.ck-s{margin-top:12px;font-size:14.5px;line-height:1.55;color:var(--muted);overflow-wrap:anywhere}
.ck-u{color:var(--ink);font-weight:600}
.ck-z{margin-top:10px;font-size:13.5px;color:var(--muted)}
.ck-z a{color:var(--ink);font-weight:600}
.ck-c{display:grid;grid-template-columns:minmax(0,1fr) 38px minmax(80px,130px) 30px;gap:12px;align-items:center;padding:8px 0;font-size:14.5px}
.ck-c+.ck-c{border-top:1px solid var(--line)}
.ck-cl{font-weight:600;color:var(--ink)}
.ck-cw{color:var(--muted);font-size:13px;text-align:right}
.ck-ct{height:8px;border-radius:99px;background:var(--track);overflow:hidden}
.ck-ct i{display:block;height:100%;border-radius:inherit;background:var(--c);transition:width 1s var(--ease)}
.ck-cv{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.ck-load{position:absolute;inset:0;margin:0;padding:0 44px;list-style:none;display:grid;align-content:center;justify-content:center;justify-items:start;gap:14px;
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;z-index:2}
.ck-load li{display:flex;align-items:center;gap:12px;font-weight:600;font-size:15.5px;color:var(--muted);opacity:.45;transition:opacity .25s,color .25s}
.ck-load li::before{content:"";width:18px;height:18px;border-radius:50%;border:2px solid var(--line2);flex:none;box-sizing:border-box}
.ck-load li.now{opacity:1;color:var(--ink)}
.ck-load li.now::before{border-color:var(--dot) var(--line2) var(--line2);animation:ckSpin .7s linear infinite}
.ck-load li.done{opacity:1;color:var(--ink)}
.ck-load li.done::before{border:0;background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
@keyframes ckSpin{to{transform:rotate(360deg)}}
.wck.loading .ck-load{opacity:1;visibility:visible}
.wck.loading .ck-res{opacity:0}
@media (max-width:1000px){.ck-res{grid-template-columns:150px minmax(0,1fr);gap:24px 28px}.ck-dial{width:150px;height:150px}.ck-cats{grid-column:1/-1}}
@media (max-width:760px){
  .ck-form{padding:20px 16px 0}
  .ck-field{padding-left:14px}.ck-field input{font-size:15px}.ck-field .btn{padding:12px 14px;font-size:14px}
  .ck-out{padding:24px 16px 26px;margin-top:20px}
  .ck-res{grid-template-columns:104px minmax(0,1fr);gap:18px}
  .ck-dial{width:104px;height:104px}
  .ck-t{font-size:19px}.ck-s{font-size:13.5px}.ck-z{display:none}
  .ck-c{grid-template-columns:minmax(0,1fr) 34px 64px 26px;gap:8px;font-size:13.5px}
  .ck-load{padding:0 16px}
}

/* ---- five factors, pinned ---- */
.fx5{padding-top:184px}
.fx5-run{position:relative;height:calc(var(--n) * 68vh + 90vh);margin-top:56px}
.fx5-st{position:sticky;top:max(112px,calc(44vh - 300px))}
.fx5-in{display:grid;grid-template-columns:400px minmax(0,1fr) 210px;gap:64px;align-items:center;min-height:620px}
.fx5-ring{position:relative;width:400px;aspect-ratio:1}
.fx5-ring::before{content:"";position:absolute;inset:-12%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,181,71,.2),rgba(255,181,71,0))}
.fx5-ring svg{display:block;width:100%;height:100%;overflow:visible}
.fx5-ring circle{fill:none;stroke-width:24;transform:rotate(-90deg);transform-origin:160px 160px}
.fr-b{stroke:#f0f2f7;transition:stroke .4s}
.fr-f{stroke:#ecd9b6;stroke-linecap:butt;transition:stroke .4s}
.fr-s.on .fr-b{stroke:#e2e6ef}
.fr-s.on .fr-f{stroke:var(--c)}
.fx5-c{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;padding:0 80px}
.fx5-u{font-size:12.5px;font-weight:600;color:var(--muted);max-width:200px;overflow-wrap:anywhere;line-height:1.35}
.fx5-cv{display:none;margin:10px 0 0}
.fx5-cv.on{display:grid;justify-items:center;animation:fxIn .45s var(--ease) both}
.fx5-cv b{font:800 76px/1 var(--display);letter-spacing:-.04em;color:var(--c)}
.fx5-cv span{margin-top:8px;font-weight:700;font-size:16px;color:var(--ink)}
@keyframes fxIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fx5-views{position:relative;align-self:stretch;min-height:620px}
.fv{position:absolute;left:0;right:0;top:0;transform:translateY(26px);opacity:0;visibility:hidden;
  transition:opacity .45s var(--ease),transform .6s var(--ease),visibility .45s}
.fv.on{opacity:1;visibility:visible;transform:none}
.fv-k{display:inline-flex;align-items:center;gap:10px;margin:0;padding:7px 15px 7px 9px;border-radius:999px;background:linear-gradient(180deg,#fff,var(--tint));
  border:1px solid var(--line2);font-weight:700;font-size:14px;color:var(--ink);box-shadow:var(--sh-1)}
.fv-k .ico{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--dot);color:var(--ink)}
.fv h3{margin-top:18px;font:800 clamp(30px,3vw,44px)/1.04 var(--display);letter-spacing:-.035em}
.fv-d{margin-top:12px;color:var(--muted);font-size:17px;line-height:1.55;max-width:520px}
.fv-s{margin-top:16px;font-size:14.5px;color:var(--muted)}
.fv-s b{color:var(--c);font-weight:800}
.fv-l{list-style:none;margin:18px 0 0;padding:0;max-width:560px}
.fv-l li{display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.4}
.fv-l li b{font-weight:600;color:var(--ink)}
.fv-l li span:not(.fv-i){grid-column:2;color:var(--muted);font-size:13.5px;margin-top:2px}
.fv-i{width:18px;height:18px;border-radius:50%;margin-top:1px;background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.fv-l li.no .fv-i{background:var(--bad) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M6.2 6.2l5.6 5.6M11.8 6.2l-5.6 5.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat}
.fv-l li.no b{color:var(--ink)}
.fx5-nav{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.fx5-nav button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:600 14.5px/1.25 var(--body);color:var(--muted);
  background:none;border:0;border-radius:12px;padding:10px 12px;cursor:pointer;transition:color .25s,background .25s}
.fx5-nav button i{width:9px;height:9px;border-radius:50%;background:var(--c);opacity:.4;flex:none;transition:opacity .25s}
.fx5-nav button[aria-pressed=true]{color:var(--ink);background:#fff;box-shadow:var(--sh-1),0 0 0 1px var(--line)}
.fx5-nav button[aria-pressed=true] i{opacity:1}
.fx5-all{display:none;margin:10px 0 0;justify-items:center}
.fx5-all b{font:800 64px/1 var(--display);letter-spacing:-.04em;color:var(--c)}
.fx5-all span{margin-top:6px;font-weight:700;font-size:15px}
/* unpinned: phones, short screens and reduced motion list every factor in full */
@media (max-width:1040px),(max-height:719px),(prefers-reduced-motion:reduce){
  .fx5-run{height:auto;margin-top:44px}
  .fx5-st{position:static}
  .fx5-in{grid-template-columns:minmax(0,1fr);gap:28px;min-height:0}
  .fx5-ring{width:min(300px,78vw);margin:0 auto}
  .fr-f{stroke:var(--c)}
  .fx5-cv,.fx5-cv.on{display:none}
  .fx5-all{display:grid}
  .fx5-views{min-height:0;display:grid;gap:44px}
  .fv,.fv.on{position:static;transform:none;opacity:1;visibility:visible}
  .fx5-nav{display:none}
}
@media (max-width:760px){.fx5{padding-top:112px}.fx5-c{padding:0 56px}}

/* ---- a finding opened into its fix ---- */
.fd{padding-top:184px}
.fd-f{position:relative;margin-top:60px;clip-path:inset(calc((1 - var(--p,1)) * 5%) calc((1 - var(--p,1)) * 7%) -80px round 30px)}
.fd-f::before{content:"";position:absolute;inset:12% 8% -6%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,181,71,.26),rgba(255,181,71,0));filter:blur(20px)}
.fd-t{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);border-radius:30px;overflow:hidden;
  background:linear-gradient(160deg,#fff 0%,var(--tint) 60%,#f1f4fa);border:1px solid rgba(10,16,34,.07);
  box-shadow:0 50px 90px -60px rgba(10,16,34,.45);-webkit-mask:linear-gradient(180deg,#000 88%,transparent);mask:linear-gradient(180deg,#000 88%,transparent)}
.fd-list{padding:40px 30px 70px 40px;transform:translateX(calc((1 - var(--p,1)) * 36px))}
.fd-h3{margin:0 0 12px 18px;font-weight:700;font-size:14.5px;color:var(--ink)}
.fd-ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fd-i{display:grid;gap:4px;width:100%;text-align:left;background:none;border:1px solid transparent;border-radius:16px;padding:14px 18px;cursor:pointer;
  font:inherit;color:var(--ink);transition:background .25s,border-color .25s,box-shadow .3s}
.fd-i:hover{background:rgba(255,255,255,.6)}
.fd-i[aria-pressed=true]{background:#fff;border-color:var(--line2);box-shadow:var(--sh-2)}
.fd-i b{font-weight:700;font-size:16px}
.sev{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.sev.critical{color:var(--bad)}.sev.important{color:var(--warn)}.sev.minor{color:var(--muted)}
.fd-d{color:var(--muted);font-size:14px;line-height:1.5}
.fd-i:not([aria-pressed=true]) .fd-d{display:none}
.fd-lk{margin-top:28px}
.fd-locked{list-style:none;margin:0;padding:0 0 0 18px}
.fd-locked li{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:14.5px;color:var(--muted);border-top:1px solid var(--line)}
.fd-locked li::before{content:"";width:12px;height:13px;flex:none;opacity:.7;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 13'%3E%3Crect x='1' y='5.5' width='10' height='7' rx='2' fill='%235a6482'/%3E%3Cpath d='M3.4 5.5V4a2.6 2.6 0 015.2 0v1.5' fill='none' stroke='%235a6482' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat}
.fd-fix{position:relative;background:radial-gradient(120% 80% at 100% 0,#1c2850,var(--ink) 60%);color:#e9edf6;padding:44px 48px 72px;
  transform:translateX(calc((1 - var(--p,1)) * -36px))}
.fd-x{display:none}.fd-x.on{display:block}
.fd-xh{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0;font:800 22px/1.2 var(--display);letter-spacing:-.02em;color:#fff}
.fd-xh span{display:inline-flex;align-items:center;gap:8px;font:700 12.5px/1 var(--body);letter-spacing:.02em;color:var(--ink);background:var(--dot);border-radius:99px;padding:6px 11px}
.fd-xf{margin-top:12px;color:rgba(233,237,246,.72);font-size:15px;line-height:1.55;max-width:560px}
.fd-code{margin:24px 0 0;padding:22px 24px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);
  font:500 13.5px/1.75 var(--mono);color:#e9edf6;white-space:pre;overflow-x:auto}
.fd-code span{display:block}
.fd-code i{font-style:normal}
.fd-code .k{color:#ffcf8a}.fd-code .s{color:#9fdcbc}
.fd-code em{font-style:normal;color:rgba(233,237,246,.5)}
.fd-f.play .fd-x.on .fd-code span,.fd-f.play .fd-x.on .fd-intro p{animation:fdLine .38s var(--ease) both;animation-delay:calc(var(--i,0) * 65ms + 120ms)}
@keyframes fdLine{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.fd-intro{display:grid;gap:14px;margin-top:24px}
.fd-intro p{margin:0;padding:18px 20px;border-radius:16px;font-size:16px;line-height:1.6}
.fd-intro span{display:block;font:700 12px/1 var(--body);letter-spacing:.03em;margin-bottom:10px}
.fd-was{--i:0;background:rgba(255,255,255,.04);color:rgba(233,237,246,.55);text-decoration:line-through;text-decoration-color:rgba(210,64,90,.7)}
.fd-was span{color:rgba(233,237,246,.5);text-decoration:none}
.fd-now{--i:3;background:rgba(255,181,71,.1);border:1px solid rgba(255,181,71,.35);color:#fff}
.fd-now span{color:var(--dot)}
@media (max-width:900px){.fd-list,.fd-fix{transform:none}.fd-t{grid-template-columns:minmax(0,1fr)}.fd-list{padding:28px 18px 26px}.fd-fix{padding:30px 22px 64px}.fd-code{font-size:12.5px;padding:16px}}
@media (max-width:760px){.fd{padding-top:112px}.fd-f{margin-top:40px}}

/* ---- the first fix: the free findings weighed as a worksheet, the chosen one lifting out of the list ---- */
.tri{padding-top:184px}
.tri-f{position:relative;margin-top:64px;border-radius:30px;background:linear-gradient(160deg,#fff 0%,var(--tint) 60%,#f1f4fa);border:1px solid rgba(10,16,34,.07);
  box-shadow:0 50px 90px -60px rgba(10,16,34,.45);padding:30px 36px 36px}
.tri-f::before{content:"";position:absolute;inset:-8% 18% 45%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,181,71,.24),rgba(255,181,71,0));filter:blur(20px)}
.tri-u{display:flex;align-items:center;gap:8px;margin:0 0 20px;font:600 13px/1.3 var(--mono);color:var(--muted);overflow-wrap:anywhere}
.tri-u .ico{width:16px;height:16px;flex:none}
.tri-hd,.tri-r{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center}
.tri-hd{padding:0 24px 10px;font-size:12.5px;font-weight:700;color:var(--muted)}
.tri-l{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tri-r{--k:clamp(0,calc((var(--p,1) - .2 - var(--i) * .1) * 2.6),1);padding:16px 24px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.55);
  opacity:calc(.2 + .8 * var(--k));transform:translateY(calc((1 - var(--k)) * 40px))}
.tri-r p{margin:0;font-size:14.5px;line-height:1.45;color:var(--muted)}
.tri-r .tri-t{display:grid;gap:7px}
.tri-t b{font-weight:700;font-size:16px;color:var(--ink)}
.tri-t em{justify-self:start;font-style:normal;font-size:11.5px;font-weight:800;border-radius:6px;padding:3px 8px;background:#e9edf6;color:var(--ink)}
.tri-r.on{background:#fff;border-color:rgba(255,181,71,.6);box-shadow:0 30px 60px -40px rgba(10,16,34,.45),inset 4px 0 0 var(--dot);margin-bottom:6px}
.tri-r.on p{color:var(--ink)}
.tri-r.on .tri-t em{background:var(--dot)}
.tri-why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 44px;margin-top:28px;padding:26px 24px 0;border-top:1px solid var(--line)}
.tri-why p{margin:0;font-size:16px;line-height:1.6;color:var(--muted)}
.tri-why b{color:var(--ink)}
.tri-why .fx-c{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
@media (max-width:900px){
  .tri-f{padding:20px 14px 24px}
  .tri-hd{display:none}
  .tri-r{grid-template-columns:minmax(0,1fr);gap:10px;padding:16px}
  .tri-r p[data-l]::before{content:attr(data-l);display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:2px}
  .tri-why{grid-template-columns:minmax(0,1fr);padding:22px 4px 0}
}
@media (max-width:760px){.tri{padding-top:112px}.tri-f{margin-top:40px}}

/* ---- the boundary: what the free check is and isn't (no longer on the checker page; kept for the gallery) ---- */
.bnd{padding-top:184px}
.bd-k{display:inline-flex;align-items:center;gap:10px;margin:0;padding:7px 15px;border-radius:999px;background:linear-gradient(180deg,#fff,var(--tint));
  border:1px solid var(--line2);font-weight:700;font-size:14.5px;color:var(--ink);box-shadow:var(--sh-1)}
.bd-k::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--dot)}
.bd-h{margin-top:24px;font:800 clamp(40px,6.2vw,92px)/.98 var(--display);letter-spacing:-.045em;max-width:1080px;text-wrap:balance}
.bd-h span{opacity:clamp(.14,calc((var(--p,1) - .2) * var(--n) * 1.7 - var(--i)),1)}
.bd-g{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:64px;margin-top:72px;align-items:start}
.bd-l{margin:0}
.bd-l div{display:grid;grid-template-columns:116px minmax(0,1fr);gap:12px;padding:16px 0;border-top:1px solid var(--line)}
.bd-l dt{font-weight:700;font-size:14.5px;color:var(--ink)}
.bd-l dd{margin:0;color:var(--muted);font-size:16px;line-height:1.5}
.bd-p{margin-top:22px;color:var(--muted);font-size:16px;line-height:1.6;padding-top:20px;border-top:1px solid var(--line)}
.bd-w .pchip{margin-top:22px}
.bd-s{transform:translateY(calc((1 - var(--p,1)) * 110px))}
.bd-t .crop{--pt:48px;--pl:48px;-webkit-mask:linear-gradient(90deg,#000 78%,transparent),linear-gradient(180deg,#000 74%,transparent);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,#000 78%,transparent) intersect,linear-gradient(180deg,#000 74%,transparent)}
.bd-t .crop img{width:var(--w);max-width:none}
@media (max-width:900px){.bd-g{grid-template-columns:minmax(0,1fr);gap:40px}}
@media (max-width:760px){.bnd{padding-top:112px}.bd-t .crop{--pt:28px;--pl:28px}.bd-t .crop img{width:calc(var(--w) * .85)}}

/* ---- shared bottom grid: next steps ---- */
.nxg .sbento{list-style:none;margin-top:56px}
.nxg .sb .bt-shot{height:300px}
.nxg .sb{transition:box-shadow .5s var(--ease)}
.nxg .sb[data-sx]{transform:translateY(calc((1 - var(--p,1)) * 70px));opacity:calc(.25 + .75 * var(--p,1))}
.nxg .sb:hover{box-shadow:0 40px 70px -50px rgba(10,16,34,.4)}
.nxg .bt-b{padding:20px 30px 28px;display:flex;flex-direction:column}
.nxg .bt-b h3{font:800 22px/1.15 var(--display);letter-spacing:-.02em;color:var(--ink)}
.nxg .bt-b .more{padding-top:16px;margin-top:0}

/* drawn glimpses of tool results: white cards like the board crops, bleeding off the tile and fading */
.gl{background:#fff;border-radius:14px 0 0 0;box-shadow:var(--sh-3),0 0 0 1px rgba(10,16,34,.06);padding:22px 24px 26px;color:var(--ink);font-size:14.5px;line-height:1.35;text-align:left}
.bt-shot .gl{margin:30px 0 0 30px;min-height:calc(100% - 30px)}
.gl-h{margin:0;font-weight:700;font-size:15px}
.gl ul{list-style:none;margin:12px 0 0;padding:0}
.gl-cl li{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-weight:600}
.gl-cl li i{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line3);flex:none}
.gl-cl li.d i{border:0;background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.gl-cl li em{margin-left:auto;font-style:normal;color:var(--muted);font-weight:500;font-size:13.5px}
.gl-f{display:flex;align-items:center;gap:8px;margin-top:16px;padding:5px 5px 5px 16px;border:1px solid var(--line2);border-radius:99px}
.gl-f span{flex:1;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gl-f b{background:var(--ink);color:#fff;font-weight:600;font-size:13.5px;border-radius:99px;padding:10px 14px;white-space:nowrap}
.gl-tl{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:13.5px;color:var(--muted);font-weight:600}
.gl-tl span{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.gl-tl span::before{content:"";width:10px;height:10px;border-radius:50%;border:2px solid var(--dot);box-sizing:border-box}
.gl-tl span.a{color:var(--ink)}.gl-tl span.a::before{background:var(--dot)}
.gl-tl i{flex:1;min-width:24px;height:2px;background:repeating-linear-gradient(90deg,var(--dot) 0 4px,transparent 4px 9px)}
.gl-n{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);color:var(--muted);font-size:13.5px}
.gl-ac li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.gl-ac li b{font:600 13.5px/1.2 var(--mono)}
.gl-ac li span{font-size:12.5px;font-weight:700;border-radius:99px;padding:4px 10px;white-space:nowrap}
.gl-ac li span.ok{color:var(--ok);background:var(--ok-t)}.gl-ac li span.no{color:var(--bad);background:var(--bad-t)}
.gl-q{margin:0 0 14px;padding:10px 16px;border:1px solid var(--line2);border-radius:99px;font-weight:600;font-size:14px}
.gl-ao li{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-weight:500;font-size:14px}
.gl-ao li i{font-style:normal;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--tint);border:1px solid var(--line);font-size:11px;font-weight:800;color:var(--muted)}
.gl-sc pre{margin:0;font:500 13px/1.7 var(--mono);color:var(--ink);white-space:pre}
.gl-sc .k{font-style:normal;color:#9a5b00}.gl-sc .s{font-style:normal;color:#1d7a52}
@media (max-width:760px){.bt-shot .gl{margin:22px 0 0 22px}}

/* ---- shared: more free tools ---- */
.mt{padding-top:184px}
.mt-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.mt-head .more{padding-top:0;margin:0 0 8px}
.mt-g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px}
.mt-c{display:flex;flex-direction:column;border-radius:26px;background:var(--tint);border:1px solid rgba(10,16,34,.07);overflow:hidden;color:inherit;text-decoration:none;
  transition:box-shadow .5s var(--ease),border-color .3s}
.mt-c:hover{box-shadow:0 40px 70px -50px rgba(10,16,34,.4);border-color:var(--line2)}
.mt-g{display:block;height:228px;overflow:hidden;padding:26px 0 0 26px;-webkit-mask:linear-gradient(180deg,#000 66%,transparent);mask:linear-gradient(180deg,#000 66%,transparent)}
.mt-g .gl{min-height:100%;transition:transform .5s var(--ease)}
.mt-c:hover .gl{transform:translateY(-4px)}
.mt-b{display:flex;flex-direction:column;gap:8px;padding:6px 26px 26px}
.mt-b b{font:800 20px/1.2 var(--display);letter-spacing:-.02em}
.mt-b>span{color:var(--muted);font-size:15px;line-height:1.55}
.mt-b em{font-style:normal;font-weight:600;font-size:14.5px;display:inline-flex;align-items:center;gap:8px;margin-top:8px}
@media (max-width:900px){.mt-g3{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.mt,.nxg{padding-top:112px}}

/* Upgrade, 9 Oct 2026: what an AI engine reads on the page (website checker) */
.er{padding-top:184px}
.er-f0{margin-top:48px;border-radius:28px;background:var(--tint);padding:28px clamp(18px,3vw,36px) 32px}
.er-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.er-u{display:flex;align-items:center;gap:8px;margin:0;font-family:var(--mono);font-size:13px;color:var(--muted)}.er-u .ico{width:16px;height:16px}
.er-sw{display:inline-flex;padding:4px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line)}
.er-b{font:inherit;font-size:14px;font-weight:600;padding:8px 16px;border-radius:999px;border:0;background:none;color:var(--muted);cursor:pointer}
.er-b[aria-pressed="true"]{background:var(--ink);color:#fff}
.er-b:focus-visible{outline:2px solid var(--dot);outline-offset:2px}
.er-vs{display:grid;margin-top:22px}
.er-v{grid-area:1/1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr;gap:16px 20px;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility 0s .4s}
.er-v.on{opacity:1;visibility:visible;transition:opacity .4s var(--ease)}
.er-q,.er-fs{background:#fff;border-radius:20px;padding:24px 26px;box-shadow:0 24px 50px -38px rgba(10,16,34,.4),0 0 0 1px var(--line);min-width:0}
.er-h{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:700;color:var(--muted)}.er-h .ico{width:16px;height:16px}
.er-h span{margin-left:auto;font-family:var(--mono);font-weight:600;color:var(--ink)}
.er-o{margin:16px 0 0;font-size:21px;line-height:1.45;color:var(--ink);font-weight:500;text-wrap:pretty}
.er-o.bad{color:#7a8299;text-decoration:underline wavy rgba(224,90,71,.55);text-underline-offset:6px;text-decoration-thickness:1.5px}
.er-note{margin:14px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted)}
.er-fs ul{list-style:none;margin:12px 0 0;padding:0;display:grid}
.er-f{display:grid;grid-template-columns:24px minmax(0,8rem) minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line);font-size:14.5px}
.er-f:first-child{border-top:0}
.er-i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:13px}.er-i .ico{width:13px;height:13px}
.er-f.ok .er-i{background:#e3f4ea;color:#127a4f}.er-f.no .er-i{background:#fde7e3;color:#c2412d}.er-f.img .er-i{background:#fff1d6;color:#9a6a12}
.er-n{color:var(--muted)}.er-f b{font-weight:600}.er-f.no b{color:#c2412d;font-weight:500}
.er-f small{font-size:12.5px;color:var(--muted);text-align:right}
@media (max-width:900px){.er-v{grid-template-columns:minmax(0,1fr)}.er-f{grid-template-columns:24px minmax(0,1fr) auto}.er-f small{display:none}}
.er-v .er-u{grid-column:1/-1}
.er-top{justify-content:flex-start;gap:12px}
.er-top .er-sw+.er-sw{margin-left:auto}
@media (max-width:900px){.er-top .er-sw+.er-sw{margin-left:0}}

/* Founder, 9 Oct 2026: the tool sits open in the hero, with no window around it. The input is the hero's action: large,
   centred, floating over the wave; results run on the page below it. */
.tw-open{margin-top:-300px;position:relative;z-index:2}
.tw-open .hshot.wide.wck{background:none;border:0;box-shadow:none;border-radius:0;overflow:visible;max-width:1120px}
.tw-open .hshot.wide.wck::before{display:none}
.tw-open .ck-form{padding:0;max-width:900px;margin:0 auto}
.tw-open .ck-field{min-height:72px;border-radius:999px;background:#fff;box-shadow:0 30px 60px -30px rgba(10,16,34,.4),0 0 0 1px var(--line2),0 0 0 8px rgba(255,181,71,.12)}
.tw-open .ck-field input{font-size:19px}
.tw-open .ck-field .btn{font-size:16px;padding:16px 26px}
.tw-open .ck-try{justify-content:center}
.tw-open .ck-msg{justify-content:center}
.tw-open .ck-out{border-top:0;background:none;padding:48px 0 0;margin-top:20px;border-radius:0}
@media (max-width:760px){.tw-open{margin-top:-170px}.tw-open .ck-field{border-radius:22px}}
.tw-open .ck-out{background:radial-gradient(75% 85% at 50% 45%,#fff 62%,rgba(255,255,255,0));padding-inline:24px}

/* =========================================================
   Free tools, batches 1-2 and the hub (tools2.py). Same rules as tools.css: drawn in HTML, never a scaled or tilted
   screen (R-SHARP); motion is translation, opacity, clip and SVG strokes. Each page's middle sections are its own.
   ========================================================= */
.wck.loading .tres{opacity:0}
.tres{transition:opacity .35s}
.tk{display:inline-flex;align-items:center;gap:10px;margin:0;padding:7px 15px 7px 9px;border-radius:999px;background:linear-gradient(180deg,#fff,var(--tint));
  border:1px solid var(--line2);font-weight:700;font-size:14.5px;color:var(--ink);box-shadow:var(--sh-1);justify-self:start}
.tk .ico{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--dot);color:var(--ink)}
.sw .tk+h2{margin-top:22px}
.sw-c .tk{justify-self:center}
.chip-s{display:inline-flex;align-items:center;font-size:12.5px;font-weight:700;border-radius:99px;padding:4px 10px;white-space:nowrap}

/* ---- crawler access: the result ---- */
.ax-res{display:grid;gap:22px}
.ax-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:44px;align-items:center}
.ax-s{display:flex;align-items:center;gap:16px}
.ax-s b{font:800 66px/1 var(--display);letter-spacing:-.04em;color:var(--c)}
.ax-s span{display:grid;font-weight:700;font-size:17px;color:var(--ink)}
.ax-s small{font-weight:500;font-size:13px;color:var(--muted);margin-top:4px}
.ax-l p{margin:0 0 6px;font-weight:700;font-size:13.5px;color:var(--muted)}
.ax-l ul{list-style:none;margin:0;padding:0}
.ax-l li{display:flex;gap:12px;font-size:14.5px;line-height:1.45;padding:3px 0;color:var(--ink)}
.ax-l li b{color:var(--bad);min-width:30px;font-variant-numeric:tabular-nums}
.ax-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ax-col{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px 6px;box-shadow:0 12px 30px -24px rgba(10,16,34,.35)}
.ax-h{margin:0 0 4px;font-weight:700;font-size:13.5px;color:var(--ink)}
.ax-col ul{list-style:none;margin:0;padding:0}
.ax-r{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px;row-gap:3px;padding:9px 0;border-top:1px solid var(--line)}
.ax-n{display:flex;align-items:baseline;gap:6px;min-width:0}
.ax-n b{font-weight:600;font-size:14.5px;white-space:nowrap}
.ax-n small{font-size:12px;color:var(--muted)}
.ax-v{grid-row:1/3;grid-column:2;font-size:12.5px;font-weight:700;border-radius:99px;padding:4px 10px;white-space:nowrap;color:var(--ok);background:var(--ok-t)}
.v-cdn .ax-v,.v-part .ax-v{color:var(--bad);background:var(--bad-t)}
.v-opt .ax-v{color:var(--muted);background:var(--tint);border:1px solid var(--line)}
.v-unk .ax-v{color:var(--warn);background:rgba(201,130,0,.12)}
.ax-ms{grid-column:1;display:flex;flex-wrap:wrap;gap:4px 12px}
.ax-m{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
.ax-m i{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.ax-m i.m-no{background:var(--bad)}.ax-m i.m-unk{background:var(--warn)}
@media (max-width:1000px){.ax-cols{grid-template-columns:minmax(0,1fr)}.ax-top{grid-template-columns:minmax(0,1fr);gap:12px}}
@media (max-width:760px){.ax-s b{font-size:52px}}

/* ---- crawler access: robots.txt, read per crawler ---- */
.rr{padding-top:184px}
.rr-f{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;margin-top:64px;align-items:center}
.rr-file{border-radius:28px;background:linear-gradient(160deg,#fff 0%,var(--tint) 60%,#f1f4fa);border:1px solid rgba(10,16,34,.07);
  box-shadow:0 50px 90px -60px rgba(10,16,34,.45);padding:26px 30px 30px;transform:translateY(calc((1 - var(--p,1)) * 30px))}
.rr-t{display:flex;flex-wrap:wrap;gap:8px}
.rr-p{font:600 13.5px/1.2 var(--mono);color:var(--ink);background:#fff;border:1px solid var(--line2);border-radius:99px;padding:8px 14px;cursor:pointer;transition:border-color .2s,box-shadow .25s,background .2s}
.rr-p[aria-pressed=true]{border-color:var(--ink);background:linear-gradient(180deg,#fff,#fff8ec);box-shadow:0 0 0 3px rgba(255,181,71,.22)}
.rr-code{margin:22px 0 0;padding:18px 0;border-radius:16px;background:#fff;border:1px solid var(--line);font:500 15px/1.85 var(--mono);overflow-x:auto}
.rr-code .rl{display:block;padding:0 20px 0 0;opacity:.34;transition:opacity .35s,background .35s;white-space:pre}
.rr-code .rl em{display:inline-block;width:44px;padding-right:14px;text-align:right;font-style:normal;color:var(--muted);opacity:.7}
.rr-code .rl.c{opacity:.55;color:var(--muted)}
.rr-code[data-on="g0"] .g0,.rr-code[data-on="g1"] .g1,.rr-code[data-on="g2"] .g2{opacity:1;background:rgba(255,181,71,.16);box-shadow:inset 3px 0 0 var(--dot)}
.rr-notes{position:relative;min-height:240px;transform:translateY(calc((1 - var(--p,1)) * 80px))}
.rr-n{position:absolute;inset:0 0 auto 0;margin:0;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .4s var(--ease),transform .5s var(--ease),visibility .4s;
  font-size:19px;line-height:1.6;color:var(--muted)}
.rr-n.on{opacity:1;visibility:visible;transform:none}
.rr-n b{display:block;margin-bottom:12px;font:800 clamp(28px,2.6vw,38px)/1.05 var(--mono);letter-spacing:-.03em;color:var(--ink)}
@media (max-width:900px){.rr-f{grid-template-columns:minmax(0,1fr);gap:28px}.rr-notes{min-height:0}.rr-n{position:static;display:none}.rr-n.on{display:block}.rr-code{font-size:13px}}
@media (max-width:760px){.rr{padding-top:112px}.rr-file{padding:18px 16px}}

/* ---- crawler access: the live requests ---- */
.lnx{padding-top:184px}
.lnx-h{margin:0;font:800 clamp(40px,5.8vw,86px)/.98 var(--display);letter-spacing:-.045em;max-width:1100px;text-wrap:balance}
.lnx-h span{display:block}
.lnx-h span:first-child{color:var(--muted);opacity:.72}
.lnx-p{margin-top:26px;max-width:700px;color:var(--muted);font-size:18px;line-height:1.6}
.lnx-f{position:relative;margin-top:64px;border-radius:28px;background:linear-gradient(160deg,#fff 0%,var(--tint) 60%,#f1f4fa);border:1px solid rgba(10,16,34,.07);
  box-shadow:0 50px 90px -60px rgba(10,16,34,.45);padding:30px 40px 18px}
.lnx-site{margin:0;display:flex;justify-content:flex-end}
.lnx-site span{display:inline-flex;align-items:center;gap:8px;font:600 13.5px/1 var(--mono);color:var(--ink);background:#fff;border:1px solid var(--line2);border-radius:99px;padding:9px 14px}
.lnx-site .ico{width:16px;height:16px;color:var(--muted)}
.lns{list-style:none;margin:14px 0 0;padding:0}
.ln{--k:clamp(0,calc((var(--p,1) - .25 - var(--i) * .08) * 2.6),1);display:grid;grid-template-columns:230px minmax(0,1fr) 300px;gap:28px;align-items:center;padding:24px 0;border-top:1px solid var(--line)}
.ln-a{margin:0;display:grid}
.ln-a b{font-weight:700;font-size:16px}
.ln-a small{font-size:13.5px;color:var(--muted);margin-top:3px}
.ln-t{position:relative;height:14px;background:radial-gradient(circle,rgba(10,16,34,.22) 1.4px,transparent 1.6px) 0 50%/10px 10px repeat-x}
.ln-d{position:absolute;top:0;left:calc(var(--k) * (100% - 14px));width:14px;height:14px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 5px rgba(255,181,71,.35)}
.ln-no .ln-d{left:calc(var(--k) * (58% - 14px));background:var(--bad);box-shadow:0 0 0 5px var(--bad-t)}
.ln-w{position:absolute;left:58%;top:-22px;bottom:-22px;width:4px;border-radius:4px;background:repeating-linear-gradient(180deg,var(--bad) 0 6px,transparent 6px 10px)}
.ln-w{font-size:0}
.ln-w::after{content:"CDN bot rule";position:absolute;left:12px;top:-4px;white-space:nowrap;font:700 12px/1 var(--body);color:var(--bad)}
.ln-r{margin:0;display:flex;align-items:center;gap:12px;font-size:14.5px;line-height:1.4;color:var(--ink);opacity:clamp(.12,calc((var(--k) - .7) * 4),1)}
.ln-r .code{flex:none;font:700 13px/1 var(--mono);border-radius:8px;padding:6px 8px;color:var(--ok);background:var(--ok-t)}
.ln-no .ln-r .code{color:var(--bad);background:var(--bad-t)}
@media (max-width:900px){.ln{grid-template-columns:minmax(0,1fr);gap:12px}.lnx-f{padding:20px 18px 6px}}
@media (max-width:760px){.lnx{padding-top:112px}.lnx-p{font-size:16px}}

/* ---- crawler access: tiers, terraced ---- */
.trx{padding-top:184px}
.tr2s{list-style:none;margin:64px 0 0;padding:0;display:grid;gap:16px}
.tr2{--k:clamp(0,calc((var(--p,1) - .2 - var(--i) * .12) * 2.4),1);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,4fr);gap:32px;align-items:center;
  margin-left:calc(var(--i) * 56px);padding:28px 34px;border-radius:24px;background:linear-gradient(100deg,#fff,var(--tint));border:1px solid var(--line);
  box-shadow:0 30px 60px -48px rgba(10,16,34,.4);opacity:calc(.2 + .8 * var(--k));transform:translateX(calc((1 - var(--k)) * 90px))}
.tr2-h{display:grid;gap:6px}
.tr2-h b{font:800 26px/1.05 var(--display);letter-spacing:-.025em}
.tr2-h span{color:var(--muted);font-size:14.5px;line-height:1.5}
.tr2-c{display:flex;flex-wrap:wrap;gap:8px}
.tr2-c span{display:inline-flex;align-items:center;gap:8px;font:600 13.5px/1 var(--mono);background:#fff;border:1px solid var(--line2);border-radius:99px;padding:9px 13px}
.tr2-c span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
.tr2-index .tr2-c span::before{background:var(--ink)}
.tr2-train .tr2-c span::before{background:#d9c49e}
.tr2-p{margin:0;font-size:15.5px;line-height:1.55;color:var(--ink)}
.tr2-train{background:linear-gradient(100deg,#fff,#fbf7ef)}
@media (max-width:900px){.tr2{grid-template-columns:minmax(0,1fr);gap:14px;margin-left:0;padding:22px 20px}}
@media (max-width:760px){.trx{padding-top:112px}}

/* ---- AI Overview: the result ---- */
.ao-dom{display:flex;align-items:center;gap:6px;flex:0 0 230px;border-left:1px solid var(--line2);padding-left:14px;margin-left:6px}
.ao-dom input{flex:1;min-width:0;border:0;background:transparent;font:500 15px/1.2 var(--body);color:var(--ink);padding:12px 2px;outline:none}
.ao-res{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:start}
.ao-ov{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 24px 22px;box-shadow:0 14px 34px -26px rgba(10,16,34,.4);transition:box-shadow .4s,opacity .4s}
.ao-k{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 12px;font-weight:700;font-size:14.5px}
.ao-k .ico{width:18px;height:18px;color:var(--dot)}
.ao-k span{margin-left:auto;font-weight:500;font-size:12.5px;color:var(--muted)}
.ao-t p{margin:0;font-size:15.5px;line-height:1.65;color:var(--ink)}
.ao-t p+p{margin-top:10px}
.ao-t sup{font-size:11px;font-weight:700;color:var(--muted);background:var(--tint);border:1px solid var(--line);border-radius:6px;padding:1px 5px;margin-left:3px;vertical-align:2px;word-spacing:4px}
.ao-src{transition:opacity .4s}
.ao-m{margin:0;display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;border-radius:14px;padding:12px 16px;transition:box-shadow .4s}
.ao-m b{font-family:var(--mono);font-weight:600}
.ao-m.no{color:var(--bad);background:var(--bad-t)}
.ao-m.yes{color:var(--ok);background:var(--ok-t)}
.ao-m::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;background:currentColor url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M6.2 6.2l5.6 5.6M11.8 6.2l-5.6 5.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat}
.ao-m.yes::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ao-sh{margin:16px 0 6px;font-size:13px;font-weight:700;color:var(--muted)}
.ao-src ol{list-style:none;margin:0;padding:0;columns:2;column-gap:18px}
.ao-src li{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:10px;font:500 13.5px/1.3 var(--mono);color:var(--ink);break-inside:avoid;overflow-wrap:anywhere}
.ao-src li i{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--tint);border:1px solid var(--line);font:700 11px/1 var(--body);font-style:normal;color:var(--muted)}
.ao-src li.me{background:rgba(255,181,71,.18);box-shadow:inset 0 0 0 1px rgba(255,181,71,.6)}
@media (max-width:1000px){.ao-res{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.ao-dom{flex-basis:auto;border-left:0;margin:0;padding-left:0}.tw-aio .ck-field{flex-wrap:wrap}.ao-src ol{columns:1}}

/* ---- AI Overview: anatomy, the frame holds while three captions pass ---- */
.an{padding-top:184px}
.an-in{display:grid;grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr);gap:64px;align-items:start}
.an-head h2{margin-top:22px;font:800 clamp(32px,3.4vw,52px)/1.02 var(--display);letter-spacing:-.035em;text-wrap:balance}
.an-cs{list-style:none;margin:0;padding:0}
.an-c{min-height:52vh;display:flex;flex-direction:column;justify-content:center;opacity:.3;transition:opacity .45s}
.an-c.on{opacity:1}
.an-c h3{font:800 26px/1.1 var(--display);letter-spacing:-.025em}
.an-c p{margin-top:10px;color:var(--muted);font-size:17px;line-height:1.6;max-width:420px}
.an-s{position:sticky;top:max(110px,calc(46vh - 250px))}
.an-f{border-radius:28px;background:linear-gradient(160deg,#fff 0%,var(--tint) 60%,#f1f4fa);border:1px solid rgba(10,16,34,.07);box-shadow:0 50px 90px -60px rgba(10,16,34,.45);padding:28px}
.an-f .ao-res{grid-template-columns:minmax(0,1fr);gap:18px}
.an-f[data-a="ov"] .ao-src,.an-f[data-a="src"] .ao-ov,.an-f[data-a="me"] .ao-ov{opacity:.32}
.an-f[data-a="ov"] .ao-ov{box-shadow:0 0 0 2px var(--dot),0 24px 50px -30px rgba(255,181,71,.8)}
.an-f[data-a="src"] .ao-src ol{border-radius:14px;box-shadow:0 0 0 2px var(--dot)}
.an-f[data-a="src"] .ao-m{opacity:.4}
.an-f[data-a="me"] .ao-m{box-shadow:0 0 0 2px var(--dot)}
.an-f[data-a="me"] .ao-src ol li:not(.me){opacity:.4}
@media (max-width:1040px),(max-height:719px){.an-in{grid-template-columns:minmax(0,1fr);gap:32px}.an-s{position:static;order:2}.an-c{min-height:0;padding:14px 0;opacity:1}
  .an-f[data-a] .ao-src,.an-f[data-a] .ao-ov,.an-f[data-a] .ao-m,.an-f[data-a] li{opacity:1}}
@media (max-width:760px){.an{padding-top:112px}.an-f{padding:16px}}

/* ---- AI Overview: five phrasings, one matrix that fills in ---- */
.pmx{padding-top:184px}
.mx-g{display:grid;grid-template-columns:minmax(0,3.8fr) minmax(0,8.2fr);gap:48px;align-items:center}
.mx-w h2{margin-top:22px;font:800 clamp(32px,3.4vw,52px)/1.02 var(--display);letter-spacing:-.035em;text-wrap:balance}
.mx-w .fx-p{margin-top:20px;color:var(--muted);font-size:17px;line-height:1.65}
.mx-sum{margin:28px 0 0;font-size:16px;color:var(--muted)}
.mx-sum b{display:block;font:800 56px/1 var(--display);letter-spacing:-.04em;color:var(--ink);margin-bottom:6px}
.mx-f{min-width:0;border-radius:28px;background:linear-gradient(160deg,#fff 0%,var(--tint) 60%,#f1f4fa);border:1px solid rgba(10,16,34,.07);box-shadow:0 50px 90px -60px rgba(10,16,34,.45);padding:26px 26px 18px}
.mx-sc{overflow-x:auto}
.mx-t{border-collapse:separate;border-spacing:0;width:100%;min-width:560px}
.mx-t caption{caption-side:bottom;text-align:left;padding-top:14px;font-size:13px;color:var(--muted)}
.mx-t th,.mx-t td{padding:12px 8px;border-bottom:1px solid var(--line);text-align:center}
.mx-t thead th{font-size:12.5px;font-weight:700;color:var(--muted);vertical-align:bottom}
.mx-t thead th:first-child,.mx-t tbody th{text-align:left}
.mx-t tbody th{font-weight:600;font-size:14.5px;line-height:1.35;color:var(--ink);min-width:170px}
.mx-t thead th:last-child{color:var(--ink)}
.mx-t td.me,.mx-t thead th:last-child{background:rgba(255,181,71,.13)}
.mx-t tr:last-child td.me{border-radius:0 0 12px 12px}
.mx-t td i,.mx-t td s{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:middle}
.mx-t td i{background:var(--ink);box-shadow:0 0 0 4px rgba(10,16,34,.06)}
.mx-t td.me i{background:var(--dot);box-shadow:0 0 0 4px rgba(255,181,71,.3)}
.mx-t td s{width:8px;height:8px;border:1.5px solid var(--line3)}
.mx-t tbody tr{opacity:clamp(.12,calc((var(--p,1) - .25) * var(--n) * 2 - var(--i)),1);transition:opacity .25s}
@media (max-width:900px){.mx-g{grid-template-columns:minmax(0,1fr);gap:32px}.mx-f{padding:16px 12px 12px}}
@media (max-width:760px){.pmx{padding-top:112px}}

/* ---- scoping builder, in the hero window ---- */
.pb{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:0}
.pb-q{padding:28px 30px 32px 40px;border-right:1px solid var(--line)}
.pb-p{padding:28px 40px 32px 32px;background:linear-gradient(180deg,var(--tint),#fff 80%);border-radius:0 0 18px 0}
.pb-h{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;margin-bottom:14px}
.pb-h>p{margin:0;font:800 20px/1.1 var(--display);letter-spacing:-.02em}
.pb-h .ck-try{margin:0}
.pb-b{font-size:12.5px;color:var(--muted)}
.pqs{display:grid;gap:0}
.pq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:12px;align-items:center;padding:7px 0;border-top:1px solid var(--line)}
.pq>span{font-size:13.5px;color:var(--muted);line-height:1.3}
.pq select{appearance:none;-webkit-appearance:none;width:100%;font:600 13.5px/1.2 var(--body);color:var(--ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235a6482' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 12px center/11px no-repeat;
  border:1px solid var(--line2);border-radius:10px;padding:8px 30px 8px 11px;cursor:pointer;text-overflow:ellipsis}
.pq select:focus-visible{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,181,71,.3)}
.pl-list{list-style:none;margin:0;padding:0}
.pl-i{display:grid;grid-template-columns:150px minmax(0,1fr) 26px;gap:14px;align-items:start;padding:10px 0;border-top:1px solid var(--line);transition:background .4s}
.pl-i.flash{animation:plFlash 1s var(--ease)}
@keyframes plFlash{from{background:rgba(255,181,71,.25)}to{background:transparent}}
.pl-l{font-weight:700;font-size:14px;color:var(--ink);line-height:1.3}
.pl-l em{display:inline-block;margin-left:6px;font-style:normal;font-size:11px;font-weight:700;color:var(--muted);border:1px solid var(--line2);border-radius:6px;padding:1px 5px;vertical-align:1px}
.pl-x{font-size:14px;line-height:1.45;color:var(--ink)}
.pl-x b{display:inline-flex;margin-right:8px;font-size:11.5px;font-weight:800;border-radius:6px;padding:2px 7px;vertical-align:1px;background:var(--dot);color:var(--ink)}
.s-next .pl-x b{background:#e9edf6}
.s-skip .pl-x b{background:var(--ok-t);color:var(--ok)}
.s-skip .pl-x{color:var(--muted)}
.s-hold .pl-x b{background:var(--bad-t);color:var(--bad)}
.s-check .pl-x b{background:rgba(201,130,0,.14);color:var(--warn)}
.pl-e{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;border:1px solid var(--line2);font:700 12px/1 var(--body);color:var(--muted)}
.pl-e:empty{visibility:hidden}
.pl-note{display:flex;align-items:center;gap:8px;margin:14px 0 0;font-size:13.5px;color:var(--muted)}
.pl-note .ico{width:16px;height:16px}
@media (max-width:1000px){.pb{grid-template-columns:minmax(0,1fr)}.pb-q{border-right:0;border-bottom:1px solid var(--line)}.pb-p{border-radius:0 0 18px 18px}}
@media (max-width:760px){.pb-q,.pb-p{padding:20px 16px}.pq{grid-template-columns:minmax(0,1fr);gap:6px}.pl-i{grid-template-columns:1fr 26px}.pl-l{grid-column:1/-1}.pl-x{grid-column:1}}

/* ---- scoping builder: the stack settles, bottom layer first ---- */
.lstk{padding-top:184px}
.stk-g{display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,7.6fr);gap:64px;align-items:center}
.stk-w h2{margin-top:22px;font:800 clamp(32px,3.4vw,52px)/1.02 var(--display);letter-spacing:-.035em;text-wrap:balance}
.stk-w .fx-p{margin-top:20px;color:var(--muted);font-size:17px;line-height:1.65}
.stk-w .more{padding-top:22px}
.stk-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column-reverse;gap:10px}
.sl{--k:clamp(0,calc((var(--p,1) - .15) * var(--n) * 1.6 - var(--i)),1);position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;
  width:calc(100% - var(--i) * 34px);margin:0 auto;padding:16px 24px;border-radius:18px;background:linear-gradient(100deg,#fff,var(--tint));border:1px solid var(--line);
  box-shadow:0 22px 40px -30px rgba(10,16,34,.4);opacity:var(--k);transform:translateY(calc((1 - var(--k)) * -70px))}
.sl-n{font:800 20px/1.1 var(--display);letter-spacing:-.02em}
.sl em{font-style:normal;font-size:12px;font-weight:800;color:var(--ink);background:var(--dot);border-radius:99px;padding:4px 10px}
.sl p{grid-column:1/-1;margin:0;color:var(--muted);font-size:14.5px;line-height:1.5}
.sl:nth-child(-n+2){background:var(--ink);border-color:var(--ink)}
.sl:nth-child(-n+2) .sl-n{color:#fff}.sl:nth-child(-n+2) p{color:rgba(233,237,246,.72)}
@media (max-width:900px){.stk-g{grid-template-columns:minmax(0,1fr);gap:36px}.sl{width:100%}}
@media (max-width:760px){.lstk{padding-top:112px}.sl{padding:14px 16px}}

/* ---- scoping builder: two plans, drifting ---- */
.pp{padding-top:184px}
.pp-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:64px;align-items:start}
.pp-c{border-radius:28px;background:linear-gradient(160deg,#fff 0%,var(--tint) 60%,#f1f4fa);border:1px solid rgba(10,16,34,.07);box-shadow:0 50px 90px -60px rgba(10,16,34,.45);padding:26px 30px 24px}
.pp-a{transform:translateY(calc((1 - var(--p,1)) * 40px))}
.pp-b{margin-top:72px;transform:translateY(calc((1 - var(--p,1)) * 140px))}
.pp-h{margin:0 0 12px;display:grid;gap:4px}
.pp-h b{font:800 22px/1.1 var(--display);letter-spacing:-.02em}
.pp-h span{font-size:13.5px;color:var(--muted)}
.pl-sm .pl-i{grid-template-columns:132px minmax(0,1fr) 24px}
.pp-c .s-skip{background:linear-gradient(90deg,var(--ok-t),transparent 70%);border-radius:10px}
@media (max-width:900px){.pp-g{grid-template-columns:minmax(0,1fr)}.pp-b{margin-top:0}.pp-c{padding:18px}}
@media (max-width:760px){.pp{padding-top:112px}}

/* ---- more glimpses ---- */
.gl-ckr{display:flex;align-items:center;gap:14px;margin:14px 0 4px}
.gl-ckr b{font:800 44px/1 var(--display);color:var(--c);letter-spacing:-.03em}
.gl-ckr span{display:grid;font-weight:700;font-size:14.5px}
.gl-ckr small{font-weight:500;font-size:12.5px;color:var(--muted)}
.gl-ck li{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-weight:600;font-size:13.5px}
.gl-ck li i{height:7px;border-radius:9px;background:linear-gradient(90deg,var(--c) var(--w),var(--track) var(--w))}
.gl-pl li{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-weight:600;font-size:13.5px}
.gl-pl li b{flex:none;font-size:11px;font-weight:800;border-radius:6px;padding:3px 7px;background:var(--dot)}
.gl-pl li b.sk{background:var(--ok-t);color:var(--ok)}.gl-pl li b.next{background:#e9edf6}
.gl-fo li{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:9px 0;border-top:1px solid var(--line)}
.gl-fo li em{flex-basis:100%;font-style:normal;font-size:12px;font-weight:700;color:var(--muted)}
.gl-fo li span{font:500 12.5px/1.2 var(--mono);background:var(--tint);border:1px solid var(--line);border-radius:8px;padding:5px 8px}
.gl-ll pre,.gl-sc pre{margin:0;font:500 13px/1.7 var(--mono);color:var(--ink);white-space:pre}
.gl-ll b{color:var(--ink)}.gl-ll i{color:var(--muted)}
.gl-fn{display:inline-block;margin-bottom:6px;font-family:var(--body);font-size:13px;font-weight:700;color:var(--muted)}
.gl-gd ol{list-style:none;margin:12px 0 0;padding:0}
.gl-gd li{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line);font-weight:600;font-size:14px}
.gl-gd li span{font-size:11px;font-weight:800;border-radius:99px;padding:3px 9px;background:var(--ink);color:#fff}

/* ---- crawler access (revised 8 Oct 2026): the fix under each lost point ---- */
.ax-l li span{min-width:0}
.ax-l li em{display:block;margin-top:2px;font-style:normal;font-size:13px;font-weight:600;color:var(--muted)}

/* ---- crawler access: every verdict with its fix, then Kestrel's two blocks fixed in order (each step shown) ---- */
.vk{padding-top:184px}
.vk-l{list-style:none;margin:64px auto 0;padding:0;max-width:1080px}
.vk-r{--k:clamp(0,calc((var(--p,1) - .1 - var(--i) * .06) * 3),1);display:grid;grid-template-columns:220px minmax(0,1fr) minmax(0,1.15fr);gap:36px;align-items:center;
  padding:26px 0;border-top:1px solid var(--line);opacity:calc(.15 + .85 * var(--k));transform:translateX(calc((1 - var(--k)) * -60px))}
.vk-r:last-child{border-bottom:1px solid var(--line)}
.vk-v{justify-self:start;font:800 17px/1.1 var(--display);letter-spacing:-.01em;border-radius:99px;padding:10px 16px;color:var(--ok);background:var(--ok-t);white-space:nowrap}
.vk-robots .vk-v,.vk-cdn .vk-v{color:var(--bad);background:var(--bad-t)}
.vk-opt .vk-v{color:var(--muted);background:var(--tint);border:1px solid var(--line2)}
.vk-unk .vk-v{color:var(--warn);background:rgba(201,130,0,.12)}
.vk-m{margin:0;color:var(--muted);font-size:16px;line-height:1.55}
.vk-d{margin:0;display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.55;color:var(--ink);font-weight:500}
.vk-d .ico{flex:none;width:24px;height:24px;padding:5px;margin-top:0;border-radius:50%;background:var(--dot);color:var(--ink)}
.vk-ex{margin-top:120px}
.vk-eh{margin:0;font:800 clamp(28px,2.8vw,42px)/1.08 var(--display);letter-spacing:-.03em;max-width:860px;text-wrap:balance}
.vk-eh span{color:var(--muted);opacity:.78}
.vk-s{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.vk-st{--k:clamp(0,calc((var(--p,1) - .15 - var(--i) * .12) * 2.6),1);display:flex;flex-direction:column;opacity:calc(.2 + .8 * var(--k));transform:translateY(calc((1 - var(--k)) * 50px))}
.vk-a{min-height:156px;box-sizing:border-box;margin:0 0 22px;border-radius:22px;background:linear-gradient(160deg,#fff 0%,var(--tint) 70%,#f1f4fa);border:1px solid rgba(10,16,34,.07);
  box-shadow:0 40px 70px -50px rgba(10,16,34,.45);padding:22px 24px;display:grid;align-content:center;gap:10px}
.vk-a1 p{margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.1fr);gap:12px;align-items:center;font-size:14px;color:var(--muted)}
.vk-a1 p+p{padding-top:10px;border-top:1px dashed var(--line2);color:var(--ink)}
.vk-a1 b{font:600 13.5px/1.2 var(--mono);color:var(--ink)}
.vk-a .cd{font:700 13px/1 var(--mono);border-radius:8px;padding:6px 8px}
.vk-a .cd.ok{color:var(--ok);background:var(--ok-t)}.vk-a .cd.no{color:var(--bad);background:var(--bad-t)}
.vk-a2{font:500 14px/1.7 var(--code);color:var(--ink);white-space:pre;gap:0;overflow-x:auto}
.vk-a2 span{display:block}
.vk-a2 .x{color:var(--bad);text-decoration:line-through;text-decoration-thickness:2px;background:var(--bad-t);border-radius:6px;padding:0 6px;margin:0 -6px}
.vk-a3{grid-template-columns:auto minmax(20px,1fr) auto;align-items:center;gap:8px 16px}
.vk-a3 b{font:800 54px/1 var(--display);letter-spacing:-.04em;color:var(--c)}
.vk-a3 i{height:2px;background:repeating-linear-gradient(90deg,var(--line3) 0 5px,transparent 5px 10px)}
.vk-a3 small{grid-column:1/-1;font-size:13px;color:var(--muted);font-weight:600}
.vk-sk{margin:0;align-self:flex-start;font-size:12.5px;font-weight:800;color:var(--ink);background:var(--dot);border-radius:99px;padding:5px 11px}
.vk-st:nth-child(n+2) .vk-sk{background:#e9edf6}
.vk-st h4{margin:12px 0 0;font:800 23px/1.15 var(--display);letter-spacing:-.02em}
.vk-st>p:last-child{margin:10px 0 0;color:var(--muted);font-size:15.5px;line-height:1.6}
@media (max-width:900px){.vk-r{grid-template-columns:minmax(0,1fr);gap:10px;padding:20px 0;transform:none}.vk-s{grid-template-columns:minmax(0,1fr);gap:40px}.vk-ex{margin-top:88px}}
@media (max-width:760px){.vk{padding-top:112px}.vk-l{margin-top:40px}.vk-a{padding:18px}}

/* ---- AI Overview (revised 8 Oct 2026): the "no Overview" answer ---- */
.ao-m.na{color:var(--muted);background:var(--tint);border:1px solid var(--line)}
.ao-m.na::before{width:10px;height:10px;background:var(--line3);background-image:none}
.ao-none .ao-sh{font-weight:500;line-height:1.5}

/* ---- AI Overview: missing from the sources? the sources sorted by who wrote them, the text held beside them ---- */
.srt{padding-top:184px}
.srt-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
.srt-w{position:sticky;top:max(110px,calc(42vh - 300px))}
.srt-w h2{margin-top:22px;font:800 clamp(32px,3.4vw,52px)/1.02 var(--display);letter-spacing:-.035em;text-wrap:balance}
.srt-w .fx-p{margin-top:20px;color:var(--muted);font-size:17px;line-height:1.65}
.srt-pick{margin-top:30px;padding:22px 26px 24px;border-radius:22px;background:radial-gradient(120% 90% at 100% 0,#1c2850,var(--ink) 60%);color:rgba(233,237,246,.78);
  box-shadow:0 40px 70px -46px rgba(10,16,34,.6)}
.srt-pick p{margin:0;font-size:15.5px;line-height:1.6}
.srt-pick p+p{margin-top:10px}
.srt-pick .srt-pk{display:flex;align-items:center;gap:10px;margin-bottom:12px;color:#fff;font-weight:700;font-size:14.5px}
.srt-pk .ico{width:24px;height:24px;padding:5px;border-radius:50%;background:var(--dot);color:var(--ink)}
.srt-l{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.srt-k{--k:clamp(0,calc((var(--p,1) - .05 - var(--i) * .1) * 2.4),1);padding:26px 30px 28px;border-radius:26px;background:linear-gradient(160deg,#fff 0%,var(--tint) 70%,#f1f4fa);
  border:1px solid rgba(10,16,34,.07);box-shadow:0 40px 70px -54px rgba(10,16,34,.45);opacity:calc(.2 + .8 * var(--k));transform:translateX(calc((1 - var(--k)) * 70px))}
.srt-h{margin:0;display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.srt-h b{font:800 24px/1.1 var(--display);letter-spacing:-.025em}
.srt-h span{flex:none;font-size:13px;font-weight:700;color:var(--muted)}
.srt-c{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.srt-c span{font:500 13.5px/1.2 var(--mono);background:#fff;border:1px solid var(--line2);border-radius:10px;padding:8px 11px;box-shadow:var(--sh-1)}
.srt-d{margin:14px 0 0;color:var(--muted);font-size:16px;line-height:1.6}
.srt-k .more{padding-top:12px;margin:0}
@media (max-width:1000px){.srt-g{grid-template-columns:minmax(0,1fr);gap:40px}.srt-w{position:static}}
@media (max-width:760px){.srt{padding-top:112px}.srt-k{padding:20px 18px;transform:none}.srt-h b{font-size:21px}}

/* ---- scoping builder: the plan as a backlog, three columns of tickets drifting in at different speeds ---- */
.bkl{padding-top:184px}
.bkl-b{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:64px;align-items:start}
.bkl-c{--k:clamp(0,calc((var(--p,1) - .1 - var(--c) * .08) * 2.4),1);border-radius:26px;background:linear-gradient(180deg,rgba(255,255,255,.75),var(--tint));
  border:1px solid rgba(10,16,34,.07);padding:18px 16px 16px;transform:translateY(calc((1 - var(--k)) * (60px + var(--c) * 50px)))}
.bkl-h{margin:0 6px 14px;display:flex;align-items:center;gap:10px}
.bkl-h b{font:800 19px/1.1 var(--display);letter-spacing:-.015em}
.bkl-h small{font-size:13px;color:var(--muted)}
.bkl-h span{margin-left:auto;display:grid;place-items:center;min-width:26px;height:26px;border-radius:99px;font-size:12.5px;font-weight:800;background:#fff;border:1px solid var(--line2)}
.bkl-now .bkl-h span{background:var(--dot);border-color:var(--dot)}
.bkl-c ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tkt{background:#fff;border-radius:16px;border:1px solid var(--line);box-shadow:0 18px 34px -26px rgba(10,16,34,.45);padding:16px 18px}
.bkl-now .tkt{box-shadow:inset 3px 0 0 var(--dot),0 18px 34px -26px rgba(10,16,34,.45)}
.tkt-t{margin:0;font-weight:700;font-size:15px;line-height:1.4;color:var(--ink)}
.tkt-t s{display:block;font-weight:500;font-size:13px;color:var(--muted);margin-bottom:4px}
.tkt-m{margin:10px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.tkt-m span{font-size:12px;font-weight:700;border-radius:6px;padding:3px 8px;background:var(--tint);border:1px solid var(--line);color:var(--ink)}
.tkt-m .tkt-e{background:#e9edf6;border-color:transparent}
.tkt-m .tkt-l{color:var(--muted);font-weight:600}
.tkt-d{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:14px;line-height:1.5;color:var(--muted)}
.tkt-d b{display:block;font-size:12px;color:var(--ink);margin-bottom:2px}
.tkt-u{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:none}
.tkt-u .arr{width:15px!important;height:15px!important}
.tkt-u:hover{text-decoration:underline}
.bkl-skip .tkt{background:linear-gradient(180deg,#fff,#f4fbf7)}
.bkl-n{display:flex;align-items:center;gap:10px;margin:24px 0 0;font-size:15px;color:var(--muted)}
.bkl-n .ico{width:18px;height:18px;flex:none}
@media (max-width:1000px){.bkl-b{grid-template-columns:minmax(0,1fr);gap:16px}.bkl-c{transform:none}}
@media (max-width:760px){.bkl{padding-top:112px}.bkl-b{margin-top:40px}}

/* Upgrade, 9 Oct 2026: five phrasings at once (AI Overview checker) */
.mx-sum2{display:flex;gap:36px;margin-top:28px}.mx-sum2 p{margin:0;font-size:15px;color:var(--muted)}
.mx-sum2 b{display:block;font:800 44px/1 var(--display);letter-spacing:-.04em;color:var(--ink);margin-bottom:6px}
.mx-app{display:grid;gap:12px;margin-bottom:12px}
.mx-at{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:600;color:var(--muted)}.mx-at .ico{width:16px;height:16px}
.mx-pq{display:flex;flex-wrap:wrap;gap:6px}.mx-pq .mx-q{font-size:12.5px;padding:5px 11px;border-radius:999px;background:#fff;box-shadow:0 0 0 1px var(--line);color:var(--ink)}
.mx-pq .mx-q.add{color:var(--muted);box-shadow:inset 0 0 0 1px var(--line2);background:none;cursor:pointer}
.mx-t5 td.mx-ov span{font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px}
.mx-t5 td.mx-ov .yes{background:#e3f4ea;color:#127a4f}.mx-t5 td.mx-ov .none{background:var(--tint);color:var(--muted)}
.mx-t5 td.mx-you{background:rgba(255,181,71,.13);white-space:nowrap}.mx-t5 td.mx-you b{font:800 16px/1 var(--display)}.mx-t5 td.mx-you small{margin-left:4px;font-size:12px;color:var(--muted)}
.mx-t5 td.mx-you span{font-size:12.5px;color:var(--muted)}
.mx-k{margin:14px 0 0;font-size:14px;font-weight:600;color:var(--ink)}

.mx-t5{min-width:0}
.mx-t5 thead th:last-child{background:none;color:var(--muted)}
.ao-loc{min-width:0;flex:0 1 150px}

/* =========================================================
   Free tools, batch 2 and the hub (tools3.py): fan-out, schema, llms.txt, /tools. Same rules as tools.css.
   ========================================================= */

/* ---- fan-out: the result in the hero window ---- */
.fo-res{display:grid;gap:18px}
.fo-top{display:flex;align-items:center;flex-wrap:wrap;gap:10px 24px}
.fo-n{margin:0;font-weight:600;font-size:15px;color:var(--muted)}
.fo-n b{font:800 34px/1 var(--display);letter-spacing:-.03em;color:var(--ink);margin-right:4px}
.fo-cov{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:13.5px;color:var(--muted)}
.fo-cov .fq{margin-left:6px}
.fo-tag{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--warn);background:rgba(201,130,0,.12);border-radius:99px;padding:6px 12px}
.fo-g{position:relative;display:grid;grid-template-columns:220px 72px minmax(0,1fr);align-items:center}
.fo-seed{grid-column:1;grid-row:1;position:relative;z-index:1;display:grid;gap:6px;background:var(--ink);color:#fff;border-radius:16px;padding:16px 18px;font:700 16px/1.35 var(--body);
  box-shadow:0 24px 40px -24px rgba(10,16,34,.6)}
.fo-seed small{font-size:12px;font-weight:700;color:var(--dot)}
.fo-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.fo-svg path{fill:none;stroke:rgba(255,181,71,.85);stroke-width:1.6;stroke-dasharray:var(--len,400);stroke-dashoffset:0}
.fo-svg.draw path{animation:foDraw .9s var(--ease) both;animation-delay:calc(var(--i,0) * 60ms)}
@keyframes foDraw{from{stroke-dashoffset:var(--len,400)}to{stroke-dashoffset:0}}
.fo-rows{grid-column:3;grid-row:1;list-style:none;margin:0;padding:0;display:grid;gap:5px}
.fo-r{display:grid;grid-template-columns:172px minmax(0,1fr);gap:12px;align-items:center;padding:4px 0;animation:foIn .5s var(--ease) both;animation-delay:calc(var(--i) * 70ms)}
@keyframes foIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.fo-a{font-size:12.5px;font-weight:700;color:var(--ink);background:#fff;border:1px solid var(--line2);border-radius:99px;padding:5px 11px;justify-self:start;white-space:nowrap}
.fo-qs{display:flex;flex-wrap:wrap;gap:6px}
.fq{display:inline-flex;align-items:center;gap:7px;font:500 13px/1.2 var(--mono);background:#fff;border:1px solid var(--line);border-radius:8px;padding:5px 9px;color:var(--ink)}
.fq::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;border:1.5px solid var(--line3);box-sizing:border-box}
.fq.ok{border-color:rgba(23,138,92,.32);background:linear-gradient(180deg,#fff,#f2faf6)}
.fq.ok::before{border:0;background:var(--ok)}
@media (prefers-reduced-motion:reduce){.fo-r{animation:none}.fo-svg.draw path{animation:none}}
@media (max-width:1000px){.fo-g{grid-template-columns:minmax(0,1fr);gap:16px}.fo-svg{display:none}.fo-rows{grid-column:1;grid-row:2}.fo-tag{margin-left:0}}
@media (max-width:760px){.fo-r{grid-template-columns:minmax(0,1fr);gap:6px}.fq{font-size:12px}}

/* ---- fan-out: the axes as cards in two columns, one open at a time (horizontal text only) ---- */
.axs{padding-top:184px}
.axl{margin:64px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.axcol{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.axc{border-radius:20px;background:linear-gradient(180deg,#fff,var(--tint));border:1px solid var(--line);transition:background .4s,box-shadow .4s,border-color .4s}
.axc.on{background:radial-gradient(circle at 100% 100%,rgba(255,181,71,.2),rgba(255,181,71,0) 60%),linear-gradient(160deg,#fff,var(--tint));border-color:rgba(255,181,71,.55);
  box-shadow:0 34px 60px -44px rgba(10,16,34,.45)}
.axc-h{display:grid;grid-template-columns:auto minmax(0,1fr) 28px;align-items:center;gap:16px;width:100%;text-align:left;background:none;border:0;padding:18px 20px 18px 24px;cursor:pointer;
  font:inherit;color:var(--ink);border-radius:20px}
.axc-h:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(255,181,71,.6)}
.axc-n{font:800 19px/1.2 var(--display);letter-spacing:-.015em;white-space:nowrap}
.axc-1{min-width:0;font:500 13px/1.2 var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s}
.axc.on .axc-1{opacity:0}
.axc-pm{position:relative;width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid var(--line2)}
.axc-pm::before,.axc-pm::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.6px;margin:-.8px 0 0 -5px;background:var(--ink);border-radius:2px;transition:transform .35s var(--ease)}
.axc-pm::after{transform:rotate(90deg)}
.axc.on .axc-pm{background:var(--dot);border-color:var(--dot)}
.axc.on .axc-pm::after{transform:rotate(0)}
.axc-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.axc.on .axc-b{grid-template-rows:1fr}
.axc-b>div{overflow:hidden;min-height:0;padding:0 24px}
.axc-b p{margin:0;color:var(--muted);font-size:16px;line-height:1.6;max-width:520px}
.axc .ax-ex{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 22px}
.axc .ax-ex span{font:500 13.5px/1.2 var(--mono);background:#fff;border:1px solid var(--line2);border-radius:10px;padding:8px 11px;box-shadow:var(--sh-1)}
@media (prefers-reduced-motion:reduce){.axc-b{transition:none}}
@media (max-width:900px){.axl{grid-template-columns:minmax(0,1fr);gap:12px;margin-top:40px}.axc-h{grid-template-columns:minmax(0,1fr) 28px}.axc-1{display:none}.axc-n{white-space:normal}}
@media (max-width:760px){.axs{padding-top:112px}.axc-h{padding:16px 16px 16px 18px}.axc-b>div{padding:0 18px}}

/* ---- fan-out: modelled against measured, a divide you can drag ---- */
.sld{padding-top:184px}
.sld-run{position:relative;height:calc(560px + 120vh);margin-top:64px}
.sld-st{position:sticky;top:max(104px,calc(52vh - 280px))}
.sld-f{--x:92%;position:relative;height:560px;border-radius:28px;overflow:hidden;background:linear-gradient(160deg,#fff 0%,var(--tint) 60%,#f1f4fa);
  border:1px solid rgba(10,16,34,.07);box-shadow:0 50px 90px -60px rgba(10,16,34,.45)}
.sld-m .crop{--pt:72px;--pl:44px;-webkit-mask:linear-gradient(90deg,#000 80%,transparent),linear-gradient(180deg,#000 72%,transparent);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,#000 80%,transparent) intersect,linear-gradient(180deg,#000 72%,transparent)}
.sld-m .crop img{width:var(--w);max-width:none}
.sld-o{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0);background:linear-gradient(160deg,#fffdf9,#fff6e6);pointer-events:none}
.sld-card{position:absolute;left:44px;top:72px;width:min(560px,calc(100% - 88px));background:#fff;border-radius:14px;box-shadow:var(--sh-3),0 0 0 1px rgba(10,16,34,.06);padding:24px 28px 18px}
.sld-card .sld-h{margin:0 0 10px;display:grid;gap:4px}
.sld-card .sld-h b{font:800 22px/1.15 var(--display);letter-spacing:-.02em}
.sld-card .sld-h span{font-size:13.5px;color:var(--muted)}
.sld-card ol{list-style:none;margin:0;padding:0}
.sld-card li{display:grid;grid-template-columns:170px minmax(0,1fr);gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.sld-card li em{font-style:normal;font-size:12px;font-weight:700;color:var(--muted)}
.sld-card li span{font:500 14px/1.3 var(--mono);color:var(--ink)}
.sld-lb{position:absolute;top:22px;z-index:2;font-size:12.5px;font-weight:700;border-radius:99px;padding:6px 12px;pointer-events:none}
.sld-lm{left:24px;color:var(--warn);background:rgba(201,130,0,.12)}
.sld-lr{right:24px;color:var(--ink);background:#fff;border:1px solid var(--line2)}
.sld-h2{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:var(--ink);z-index:2;pointer-events:none}
.sld-h2 i{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 6px rgba(255,181,71,.35),var(--sh-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 46'%3E%3Cpath d='M18 17l-6 6 6 6M28 17l6 6-6 6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.sld-r{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.sld-r:focus-visible+.sld-h2 i{box-shadow:0 0 0 6px rgba(255,181,71,.8)}
.sld-t{margin-top:28px;overflow-x:auto}
.sld-t table{width:100%;border-collapse:collapse;min-width:620px}
.sld-t th,.sld-t td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5;vertical-align:top}
.sld-t thead th{font-size:13.5px;font-weight:700;color:var(--muted)}
.sld-t tbody th{font-weight:700;color:var(--ink);width:22%}
.sld-t td{color:var(--muted)}
.sld-t td:last-child{color:var(--ink)}
@media (max-width:1040px),(max-height:719px),(prefers-reduced-motion:reduce){.sld-run{height:auto;margin-top:48px}.sld-st{position:static}}
@media (max-width:760px){.sld{padding-top:112px}.sld-f{height:470px}.sld-card{left:16px;top:64px;width:calc(100% - 32px);padding:16px}.sld-card li{grid-template-columns:minmax(0,1fr);gap:2px}
  .sld-m .crop{--pt:64px;--pl:16px}}

/* ---- fan-out: gaps become H2s on a page you already have ---- */
.ol{padding-top:184px}
.ol-g{display:grid;grid-template-columns:minmax(0,4.6fr) minmax(0,7.4fr);gap:64px;align-items:center}
.ol-w h2{margin-top:22px;font:800 clamp(32px,3.4vw,52px)/1.02 var(--display);letter-spacing:-.035em;text-wrap:balance}
.ol-w .fx-p{margin-top:18px;color:var(--muted);font-size:17px;line-height:1.65}
.ol-w .fx-c{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.ol-f{border-radius:28px;background:linear-gradient(160deg,#fff 0%,var(--tint) 60%,#f1f4fa);border:1px solid rgba(10,16,34,.07);box-shadow:0 50px 90px -60px rgba(10,16,34,.45);padding:28px 32px 22px}
.ol-u{display:flex;align-items:center;gap:8px;margin:0 0 16px;font:600 13px/1 var(--mono);color:var(--muted)}
.ol-u .ico{width:16px;height:16px}
.ol-l{list-style:none;margin:0;padding:0;background:#fff;border-radius:16px;border:1px solid var(--line);padding:6px 20px}
.ol-l li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.ol-l li:first-child{border-top:0}
.ol-h1 .ol-t{font:800 22px/1.15 var(--display);letter-spacing:-.02em}
.ol-h2 .ol-t{font-weight:600;font-size:15.5px;color:var(--ink);padding-left:16px}
.ol-l small{grid-column:1/-1;padding-left:16px;font:500 12.5px/1.4 var(--mono);color:var(--muted)}
.ol-l b{font-size:11.5px;font-weight:800;border-radius:6px;padding:3px 8px;white-space:nowrap}
.ol-ok{color:var(--ok);background:var(--ok-t)}
.ol-new{color:var(--ink);background:var(--dot)}
.ol-l li.new{--k:clamp(0,calc((var(--p,1) - .3) * var(--n) * 2 - var(--j)),1);position:relative;margin:0 -20px;padding-left:20px;padding-right:20px;
  background:linear-gradient(90deg,rgba(255,181,71,calc(.16 * var(--k))),rgba(255,181,71,0));box-shadow:inset 3px 0 0 rgba(255,181,71,var(--k));
  opacity:calc(.15 + .85 * var(--k));transform:translateX(calc((1 - var(--k)) * -24px))}
@media (max-width:900px){.ol-g{grid-template-columns:minmax(0,1fr);gap:36px}.ol-f{padding:18px}}
@media (max-width:760px){.ol{padding-top:112px}}

/* ---- schema and llms.txt generators, in the hero window ---- */
.scg{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
.scg-l{padding:26px 30px 30px 40px;min-width:0}
.scg-r{padding:26px 34px 30px;min-width:0;border-radius:0 0 18px 0;background:radial-gradient(120% 80% at 100% 0,#1c2850,var(--ink) 60%);color:#e9edf6}
.sc-tabs{display:inline-flex;gap:2px;padding:4px;border-radius:12px;background:var(--tint);border:1px solid var(--line)}
.sc-tab{font:600 13.5px/1 var(--body);color:var(--muted);background:none;border:0;border-radius:9px;padding:9px 14px;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.sc-tab[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:var(--sh-1),0 0 0 1px var(--line)}
.sc-src{display:flex;align-items:center;gap:8px;margin:14px 0 12px;font-size:13px;font-weight:600;color:var(--ok)}
.sc-src .ico{width:16px;height:16px;padding:2px;border-radius:50%;background:var(--ok-t)}
.sf-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px}
.sf{display:block;min-width:0}
.sf.wide{grid-column:1/-1}
.sf span{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:5px}
.sf input,.sf textarea,.sf select{display:block;width:100%;box-sizing:border-box;font:500 14px/1.45 var(--body);color:var(--ink);background:#fff;border:1px solid var(--line2);border-radius:10px;padding:8px 11px;resize:none;outline:none}
.sf textarea{font-size:13.5px}
.sf input::placeholder{color:rgba(90,100,130,.6);font-style:italic}
.sf input:focus,.sf textarea:focus,.sf select:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(255,181,71,.3)}
.sc-oh{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 12px;color:rgba(233,237,246,.72);font-size:13px;font-weight:600}
.sc-copy{font:600 12.5px/1 var(--body);color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:7px 13px;cursor:pointer}
.sc-copy:hover{background:rgba(255,255,255,.16)}
.sc-out{margin:0;padding:18px 20px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font:500 13px/1.7 var(--mono);color:#e9edf6;white-space:pre;overflow:auto;max-height:360px}
.sc-out i{font-style:normal}
.sc-out .k{color:#ffcf8a}.sc-out .s{color:#9fdcbc}.sc-out .n{color:#a9c6ff}.sc-out .t{color:rgba(233,237,246,.5)}
.sc-out .h{color:#fff;font-weight:700}.sc-out .q{color:rgba(233,237,246,.62)}.sc-out .u{color:#a9c6ff}
.sc-warn{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px}
.sc-warn li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.45;color:rgba(233,237,246,.86)}
.sc-warn li::before{content:"";flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--dot)}
.sc-warn li.ok::before{background:#58c58f}
.llg .ck-try{margin:0}
.ll-out{max-height:420px;white-space:pre-wrap;overflow-wrap:anywhere}
@media (max-width:1000px){.scg{grid-template-columns:minmax(0,1fr)}.scg-r{border-radius:0 0 18px 18px}}
@media (max-width:760px){.scg-l,.scg-r{padding:20px 16px}.sf-g{grid-template-columns:minmax(0,1fr)}.sc-tabs{display:flex;flex-wrap:wrap}}

/* ---- schema: lines most generators write, struck as you scroll ---- */
.rf{padding-top:184px}
.rf-f{max-width:940px;margin:64px auto 0;border-radius:28px;background:linear-gradient(160deg,#fff 0%,var(--tint) 60%,#f1f4fa);border:1px solid rgba(10,16,34,.07);
  box-shadow:0 50px 90px -60px rgba(10,16,34,.45);padding:28px}
.rf-code{margin:0;padding:22px 0;border-radius:16px;background:#fff;border:1px solid var(--line);font:500 15px/1.9 var(--mono);color:var(--ink);overflow-x:auto}
.rf-ln{display:block;padding:0 24px;white-space:pre}
.rf-x{--k:clamp(0,calc((var(--p,1) - .3) * 6 - var(--i) * 1.1),1);display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;padding-top:6px;padding-bottom:6px;
  background:rgba(210,64,90,calc(var(--k) * .07))}
.rf-x s{text-decoration:none;white-space:pre;background:linear-gradient(var(--bad),var(--bad)) 0 55%/calc(var(--k) * 100%) 2px no-repeat;opacity:calc(1 - .45 * var(--k))}
.rf-x em{font:700 12.5px/1.3 var(--body);font-style:normal;color:var(--bad);background:#fff;border:1px solid rgba(210,64,90,.35);border-radius:99px;padding:5px 11px;white-space:normal;
  opacity:var(--k);transform:translateX(calc((1 - var(--k)) * -12px))}
@media (max-width:760px){.rf{padding-top:112px}.rf-f{padding:14px}.rf-code{font-size:12.5px}.rf-ln{padding:0 14px}}

/* ---- schema: one graph ---- */
.gr{padding-top:184px}
.gr-f{position:relative;margin-top:64px;border-radius:28px;background:radial-gradient(circle at 50% 50%,rgba(255,181,71,.14),rgba(255,181,71,0) 60%),linear-gradient(160deg,#fff 0%,var(--tint) 60%,#f1f4fa);
  border:1px solid rgba(10,16,34,.07);box-shadow:0 50px 90px -60px rgba(10,16,34,.45);padding:44px}
.gr-g{position:relative;z-index:1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(4,auto);gap:30px 22px}
.gn{align-self:center;justify-self:center;display:grid;gap:4px;min-width:200px;padding:14px 18px;border-radius:16px;background:#fff;border:1px solid var(--line2);box-shadow:0 18px 34px -24px rgba(10,16,34,.4);
  transition:transform .6s var(--ease),opacity .6s}
.gn b{font:800 17px/1.1 var(--display);letter-spacing:-.01em}
.gn span{font:500 12.5px/1.3 var(--mono);color:var(--muted)}
.gn-prod{border-color:var(--dot);box-shadow:0 0 0 4px rgba(255,181,71,.25),0 18px 34px -24px rgba(10,16,34,.4)}
.gr-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.gr-svg path{fill:none;stroke:var(--line3);stroke-width:1.6;stroke-dasharray:var(--len,300);stroke-dashoffset:0}
.gr-svg text{font:600 12px var(--mono);fill:var(--muted)}
.gr-f.play .gr-svg path{animation:foDraw 1s var(--ease) both;animation-delay:calc(var(--i,0) * 120ms + 200ms)}
.gr-f.play .gr-svg text{animation:grT .5s both;animation-delay:calc(var(--i,0) * 120ms + 700ms)}
.gr-f.play .gn{animation:foIn .5s var(--ease) both}
@keyframes grT{from{opacity:0}to{opacity:1}}
@media (max-width:900px){.gr-f{padding:20px}.gr-g{grid-template-columns:minmax(0,1fr);gap:10px}.gn{grid-column:auto!important;grid-row:auto!important;justify-self:stretch;min-width:0}.gr-svg{display:none}}
@media (max-width:760px){.gr{padding-top:112px}}

/* ---- llms.txt: the verdict, line by line ---- */
.vrd{padding-top:184px}
.vd-h{margin-top:24px;font:800 clamp(44px,6.4vw,96px)/.96 var(--display);letter-spacing:-.045em;max-width:1000px;text-wrap:balance}
.vd-l{list-style:none;margin:56px 0 0;padding:0;display:grid;gap:0}
.vd-l li{--k:clamp(0,calc((var(--p,1) - .25 - var(--i) * .1) * 2.6),1);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px;align-items:baseline;padding:28px 0;border-top:1px solid var(--line);
  opacity:calc(.12 + .88 * var(--k));transform:translateX(calc((1 - var(--k)) * 70px))}
.vd-l li:nth-child(2){transform:translateX(calc((1 - var(--k)) * -70px))}
.vd-l b{font:800 clamp(24px,2.6vw,36px)/1.1 var(--display);letter-spacing:-.025em}
.vd-l span{font-size:18px;line-height:1.55;color:var(--muted)}
.vd-p{margin-top:36px;max-width:720px;font-size:18px;line-height:1.6;color:var(--ink)}
@media (max-width:900px){.vd-l li{grid-template-columns:minmax(0,1fr);gap:8px;padding:20px 0}}
@media (max-width:760px){.vrd{padding-top:112px}.vd-l span,.vd-p{font-size:16px}}

/* ---- llms.txt: the site root, in priority order ---- */
.ft{padding-top:184px}
.ft-g{display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,7.6fr);gap:64px;align-items:center}
.ft-w h2{margin-top:22px;font:800 clamp(32px,3.4vw,52px)/1.02 var(--display);letter-spacing:-.035em;text-wrap:balance}
.ft-w .fx-p{margin-top:18px;color:var(--muted);font-size:17px;line-height:1.65}
.ft-f{border-radius:28px;background:linear-gradient(160deg,#fff 0%,var(--tint) 60%,#f1f4fa);border:1px solid rgba(10,16,34,.07);box-shadow:0 50px 90px -60px rgba(10,16,34,.45);padding:26px 30px}
.ft-root{display:flex;align-items:center;gap:8px;margin:0 0 10px;font:700 14px/1 var(--mono);color:var(--ink)}
.ft-root .ico{width:16px;height:16px;color:var(--muted)}
.ft-l{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--line)}
.ft-i{--k:clamp(0,calc((var(--p,1) - .25) * var(--n) * 1.6 - var(--i)),1);display:grid;grid-template-columns:190px minmax(0,1fr);gap:20px;align-items:start;padding:14px 0 14px 12px;
  opacity:calc(.15 + .85 * var(--k));transform:translateY(calc((1 - var(--k)) * 18px))}
.ft-i+.ft-i{border-top:1px solid var(--line)}

.ft-i .ft-file{display:flex;align-items:center;gap:8px;font:600 14.5px/1.2 var(--mono);color:var(--ink);background:none;border:0;box-shadow:none;padding:6px 0;border-radius:0}
.ft-i .ft-file .ico{width:16px;height:16px;color:var(--muted)}
.ft-n{display:grid;gap:4px}
.ft-n b{font-weight:700;font-size:15.5px}
.ft-n span{color:var(--muted);font-size:14.5px;line-height:1.5}
.ft-n .more{padding-top:6px;margin:0;font-size:14px}
.ft-i.me{margin-left:-12px;padding-left:24px;border-radius:12px;background:rgba(255,181,71,.14);box-shadow:inset 3px 0 0 var(--dot)}
@media (max-width:900px){.ft-g{grid-template-columns:minmax(0,1fr);gap:36px}.ft-i{grid-template-columns:minmax(0,1fr);gap:6px}.ft-f{padding:18px}}
@media (max-width:760px){.ft{padding-top:112px}}

/* ---- the hub: a tool switcher in the hero window ---- */
.hw{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:430px}
.hw-r{display:grid;align-content:start;gap:2px;padding:26px 18px 26px 22px;border-right:1px solid var(--line)}
.hw-g{margin:14px 0 6px 12px;font-size:12.5px;font-weight:700;color:var(--muted)}
.hw-g:first-child{margin-top:0}
.hw-b{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:600 14.5px/1.25 var(--body);color:var(--muted);background:none;border:0;border-radius:10px;padding:9px 12px;cursor:pointer;transition:background .2s,color .2s}
.hw-b::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--line3)}
.hw-b:hover{color:var(--ink)}
.hw-b[aria-pressed=true]{color:var(--ink);background:#fff;box-shadow:var(--sh-1),0 0 0 1px var(--line)}
.hw-b[aria-pressed=true]::before{background:var(--dot)}
.hw-s{position:relative;padding:34px 40px 30px;background:radial-gradient(circle at 100% 0,rgba(255,181,71,.16),rgba(255,181,71,0) 50%),linear-gradient(180deg,var(--tint),#fff 80%);border-radius:0 0 18px 0;overflow:hidden}
.hw-v{display:none}
.hw-v.on{display:grid;grid-template-rows:1fr auto;height:100%;gap:18px;animation:foIn .45s var(--ease) both}
.hw-gl{max-height:300px;overflow:hidden;-webkit-mask:linear-gradient(180deg,#000 78%,transparent);mask:linear-gradient(180deg,#000 78%,transparent)}
.hw-gl .gl{border-radius:14px;max-width:620px}
.hw-p{margin:0;display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:15.5px;line-height:1.5;color:var(--muted)}
.hw-p span{max-width:520px}
.hw-p .more{margin:0;padding:0}
@media (max-width:900px){.hw{grid-template-columns:minmax(0,1fr)}.hw-r{display:flex;flex-wrap:wrap;gap:6px;border-right:0;border-bottom:1px solid var(--line);padding:16px}.hw-g{display:none}
  .hw-b{width:auto;border:1px solid var(--line2);border-radius:99px;font-size:13px;padding:7px 12px}.hw-s{padding:20px 16px;border-radius:0 0 18px 18px}}

/* ---- the hub: groups in the homepage grid ---- */
.hbg .sbento{margin-top:48px}
.hbg .sb .bt-shot{height:260px}
.hbg .sb[data-sx]{transform:translateY(calc((1 - var(--p,1)) * 60px));opacity:calc(.3 + .7 * var(--p,1))}
.hbg .bt-b h3{font:800 22px/1.15 var(--display);letter-spacing:-.02em;color:var(--ink)}
.hbg .bt-b .more{padding-top:14px;margin-top:0}
.hbg .sb{transition:box-shadow .5s var(--ease)}
.hbg .sb:hover{box-shadow:0 40px 70px -50px rgba(10,16,34,.4)}
.hbg-g0 .sb:nth-child(3){grid-column:1/-1}
.hbg-1 .sb{grid-column:1/-1}
.hbg-g0 .sb:nth-child(3) .ov-a,.hbg-1 .sb .ov-a{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:center}
.hbg-g0 .sb:nth-child(3) .bt-shot,.hbg-1 .sb .bt-shot{height:300px}
.hbg-g0 .sb:nth-child(3) .bt-b,.hbg-1 .sb .bt-b{padding:30px 40px 30px 20px}
.hbg-g1 .sb:nth-child(n){grid-column:span 4}
.hbg-g1 .sb .bt-shot{height:300px}
@media (max-width:900px){.hbg .sbento .sb{grid-column:auto}.hbg .sb .ov-a{display:flex!important}.hbg .sb .bt-b{padding:20px 22px 24px!important}}

/* ---- fan-out (revised 8 Oct 2026): the gaps sorted into three pieces of work, three documents drifting into place ---- */
.fwk{padding-top:184px}
.wk-f{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:22px;margin-top:64px;align-items:start}
.doc{border-radius:26px;background:linear-gradient(160deg,#fff 0%,var(--tint) 60%,#f1f4fa);border:1px solid rgba(10,16,34,.07);box-shadow:0 50px 90px -60px rgba(10,16,34,.45);padding:24px 28px}
.doc-ol{grid-row:1 / span 2}
.doc-gd{transform:translateY(calc((1 - var(--p,1)) * 80px))}
.doc-br{transform:translateY(calc((1 - var(--p,1)) * 150px))}
.doc-h{margin:0 0 14px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px}
.doc-h b{font:800 20px/1.15 var(--display);letter-spacing:-.02em}
.doc-h span{display:inline-flex;align-items:center;gap:6px;font:600 12.5px/1.2 var(--mono);color:var(--muted);overflow-wrap:anywhere}
.doc-h .ico{width:14px;height:14px;flex:none}
.doc-t{margin:0 0 10px;display:flex;align-items:center;gap:10px;font-weight:700;font-size:15.5px;color:var(--ink)}
.doc-t b{flex:none;font-size:11.5px;font-weight:800;border-radius:6px;padding:3px 8px}
.doc-l{list-style:none;margin:0;padding:4px 16px;background:#fff;border:1px solid var(--line);border-radius:14px}
.doc-l li{padding:9px 0;border-top:1px solid var(--line);font:500 13px/1.35 var(--mono);color:var(--ink)}
.doc-l li:first-child{border-top:0}
.doc-q{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.doc-q li{display:flex;gap:10px;font-size:14.5px;line-height:1.45;color:var(--ink)}
.doc-q li::before{content:"";flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--dot)}
.doc-n{margin:12px 2px 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.doc-br .more{padding-top:14px;margin:0}
@media (max-width:1000px){.wk-f{grid-template-columns:minmax(0,1fr)}.doc-ol{grid-row:auto}.doc-gd,.doc-br{transform:none}}
@media (max-width:760px){.fwk{padding-top:112px}.wk-f{margin-top:40px}.doc{padding:18px 16px}}

/* ---- schema (revised 8 Oct 2026): the block in place on the page, what must match, and the check to run ---- */
.ad{padding-top:184px}
.ad-g{display:grid;grid-template-columns:minmax(0,7.2fr) minmax(0,4.8fr);gap:56px;margin-top:64px;align-items:center}
.ad-doc{min-width:0;border-radius:28px;background:linear-gradient(160deg,#fff 0%,var(--tint) 60%,#f1f4fa);border:1px solid rgba(10,16,34,.07);box-shadow:0 50px 90px -60px rgba(10,16,34,.45);
  padding:22px 24px 24px;transform:translateY(calc((1 - var(--p,1)) * 40px))}
.ad-u{display:flex;align-items:center;gap:8px;margin:0 0 14px;font:600 13px/1.3 var(--mono);color:var(--muted);overflow-wrap:anywhere}
.ad-u .ico{width:16px;height:16px;flex:none}
.ad-code{margin:0;padding:14px 12px 14px 0;border-radius:16px;background:#fff;border:1px solid var(--line);font:500 13.5px/1.85 var(--mono);color:var(--ink);overflow-x:auto}
.ad-code code{display:block;min-width:max-content}
.ad-ln{display:flex;align-items:center;padding:0 16px 0 0;white-space:pre}
.ad-ln i{flex:none;display:inline-block;width:40px;padding-right:12px;text-align:right;font-style:normal;color:var(--muted);opacity:.6}
.ad-ln em{margin-left:auto;padding:4px 10px;font:700 11.5px/1 var(--body);font-style:normal;white-space:nowrap;border-radius:99px;background:var(--dot);color:var(--ink)}
.ad-ln.g-p{background:rgba(255,181,71,.14);box-shadow:inset 3px 0 0 var(--dot)}
.ad-ln.g-m,.ad-ln.g-v{background:rgba(23,138,92,.07);box-shadow:inset 3px 0 0 var(--ok)}
.ad-ln.g-m em,.ad-ln.g-v em{background:var(--ok-t);color:var(--ok)}
.ad-l{list-style:none;margin:0;padding:0;display:grid;gap:30px}
.ad-s{--k:clamp(0,calc((var(--p,1) - .15 - var(--i) * .12) * 2.6),1);padding-left:22px;border-left:3px solid var(--ink);opacity:calc(.2 + .8 * var(--k));transform:translateX(calc((1 - var(--k)) * 40px))}
.ad-s.g-p{border-left-color:var(--dot)}.ad-s.g-m{border-left-color:var(--ok)}
.ad-s h3{margin:0;font:800 22px/1.15 var(--display);letter-spacing:-.02em}
.ad-s p{margin:8px 0 0;color:var(--muted);font-size:15.5px;line-height:1.6}
.ad-s .more{padding-top:12px;margin:0}
@media (max-width:1000px){.ad-g{grid-template-columns:minmax(0,1fr);gap:40px}.ad-doc{transform:none}}
@media (max-width:760px){.ad{padding-top:112px}.ad-g{margin-top:40px}.ad-doc{padding:14px}.ad-code{font-size:12px}.ad-ln em{display:none}.ad-s{transform:none}}

/* ---- llms.txt (revised 8 Oct 2026): from the sitemap to the file, the pages kept and grouped, the rest struck ---- */
.lpk{padding-top:184px}
.pk-g{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1.15fr);gap:20px;margin-top:64px;align-items:center}
.pk-s,.pk-f{min-width:0;border-radius:26px;border:1px solid rgba(10,16,34,.07);box-shadow:0 50px 90px -60px rgba(10,16,34,.45);padding:22px 24px 24px}
.pk-s{background:linear-gradient(160deg,#fff 0%,var(--tint) 60%,#f1f4fa)}
.pk-f{background:radial-gradient(120% 80% at 100% 0,#1c2850,var(--ink) 60%);color:#e9edf6;transform:translateX(calc((1 - var(--p,1)) * 60px))}
.pk-h{display:flex;align-items:center;gap:8px;margin:0 0 14px;font:700 13.5px/1.2 var(--mono);color:var(--ink)}
.pk-f .pk-h{color:#fff}
.pk-h .ico{width:16px;height:16px;flex:none;opacity:.7}
.pk-s ul{list-style:none;margin:0;padding:4px 16px;background:#fff;border:1px solid var(--line);border-radius:16px}
.pk-r{--k:clamp(0,calc((var(--p,1) - .15) * 10 - var(--i) * .5),1);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.pk-r:first-child{border-top:0}
.pk-u{min-width:0;font:500 13.5px/1.3 var(--mono);color:var(--ink);overflow-wrap:anywhere}
.pk-t{flex:none;font:700 12px/1 var(--mono);border-radius:6px;padding:4px 8px;background:rgba(255,181,71,calc(.08 + .22 * var(--k)));color:var(--ink)}
.pk-w{flex:none;font-size:12.5px;font-weight:600;color:var(--muted);opacity:var(--k)}
.pk-r.out .pk-u{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:rgba(210,64,90,calc(.75 * var(--k)))}
.pk-a{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--dot);color:var(--ink);box-shadow:0 0 0 8px rgba(255,181,71,.18)}
.pk-a .ico{width:22px;height:22px}
.pk-code{margin:0;padding:16px 18px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font:500 13px/1.75 var(--mono);color:#e9edf6;white-space:pre-wrap;overflow-wrap:anywhere}
.pk-code span{display:block}
.pk-code .h{color:#fff;font-weight:700}.pk-code .q{color:rgba(233,237,246,.62)}
.pk-tip{display:flex;align-items:center;justify-content:center;gap:10px;margin:30px auto 0;max-width:820px;font-size:16px;line-height:1.5;color:var(--ink);text-align:center}
.pk-tip .ico{width:24px;height:24px;padding:5px;border-radius:50%;background:var(--dot);flex:none}
@media (max-width:1000px){.pk-g{grid-template-columns:minmax(0,1fr)}.pk-a{justify-self:center;transform:rotate(90deg)}.pk-f{transform:none}}
@media (max-width:760px){.lpk{padding-top:112px}.pk-g{margin-top:40px}.pk-s,.pk-f{padding:16px}.pk-tip{justify-content:flex-start;text-align:left}}

/* ---- the hub (revised 8 Oct 2026): each tool as the question it answers, with what you enter and what you get ---- */
.hbg .st-head .sub{margin-top:14px}
.hbg .bt-b .hb-k{margin:0 0 6px;font-size:13px;font-weight:700;color:var(--muted)}
.hb-io{margin:12px 0 0;display:grid;gap:8px}
.hb-io div{display:grid;grid-template-columns:84px minmax(0,1fr);gap:12px;align-items:baseline}
.hb-io dt{font-size:12.5px;font-weight:700;color:var(--ink)}
.hb-io dd{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.hw-p b{color:var(--ink);font-weight:700;margin-right:4px}
@media (max-width:760px){.hb-io div{grid-template-columns:minmax(0,1fr);gap:2px}}

/* =========================================================
   Shared pages (shared.py): Platform overview, AI Agent & workflows, Integrations. The funnel hero, the worked-example
   grid (.ex) and the tail come from the product and Solutions styles; the middle sections below are new to these pages.
   Screens move only by sliding or a clip (R-SHARP); frames dissolve where their screen runs on (R-DISSOLVE).
   --p (0 entering, 1 settled) comes from the scroll engine in praised.js ([data-sx]).
   ========================================================= */
.pf-more{display:inline-flex;align-items:center;gap:6px;margin-left:6px;font-weight:600;font-size:14.5px;color:var(--ink)}

/* explorer: capabilities beside one app window */
.pf-xp{padding-top:184px}
.pf-xg{display:grid;grid-template-columns:minmax(0,4.1fr) minmax(0,7.9fr);gap:40px;margin-top:64px;align-items:start}
.pf-xl{list-style:none;margin:0;padding:0;display:grid;gap:10px;position:relative}
.pf-xi{position:relative;border-radius:20px;border:1px solid transparent;transition:background .4s var(--ease),border-color .4s,box-shadow .4s var(--ease),transform .6s var(--ease);
  transform:translateY(calc((1 - var(--p,1)) * (30px + var(--k,0) * 30px)))}
.pf-xi:nth-child(2){--k:1}.pf-xi:nth-child(3){--k:2}.pf-xi:nth-child(4){--k:3}
.pf-xi.on{background:linear-gradient(180deg,#fff,#fff 60%,var(--tint));border-color:var(--line2);box-shadow:0 30px 60px -40px rgba(10,16,34,.4),var(--sh-1)}
.pf-xb{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;row-gap:4px;align-items:center;width:100%;text-align:left;
  font:inherit;padding:18px 20px 16px;border:0;background:none;color:var(--ink);cursor:pointer;border-radius:20px;position:relative;overflow:hidden}
.pf-xb .ico{grid-row:1/3;width:40px;height:40px;padding:9px;border-radius:12px;background:var(--tint);border:1px solid var(--line);color:var(--muted);transition:background .3s,color .3s,border-color .3s}
.pf-xi.on .pf-xb .ico{background:var(--dot);border-color:transparent;color:var(--ink)}
.pf-xn{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em;line-height:1.15}
.pf-xd{grid-column:2;color:var(--muted);font-size:14.5px;line-height:1.45}
.pf-xb:hover .ico{border-color:var(--line3);color:var(--ink)}
.pf-xb:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.pf-xi:not(.on) .pf-xn{color:#2a3350}
.pf-xt{position:absolute;left:20px;right:20px;bottom:0;height:2px;border-radius:2px;background:var(--dot);transform-origin:left;transform:scaleX(0)}
.pf-xg.play .pf-xi.on .pf-xt{animation:pfbar var(--tt,5s) linear forwards}
@keyframes pfbar{to{transform:scaleX(1)}}
.pf-xa{display:none;align-items:center;gap:6px;margin:-4px 20px 0 74px;padding-bottom:18px;font-weight:600;font-size:14px;color:var(--ink)}
.pf-xi.on .pf-xa{display:inline-flex}
.pf-xa .arr{width:16px!important;height:16px!important}

.pf-xw{position:relative;border-radius:22px;overflow:hidden;background:#fff;border:1px solid rgba(10,16,34,.1);
  box-shadow:0 60px 100px -60px rgba(10,16,34,.5),0 18px 36px -28px rgba(10,16,34,.25);
  transform:translateY(calc((1 - var(--p,1)) * 90px));
  -webkit-mask:linear-gradient(90deg,#000 calc(100% - 90px),transparent);mask:linear-gradient(90deg,#000 calc(100% - 90px),transparent)}
.pf-xw::before{content:attr(data-bar);display:flex;align-items:center;height:42px;padding-left:76px;font:600 13px/1 var(--body);color:var(--muted);
  border-bottom:1px solid rgba(10,16,34,.08);background:radial-gradient(circle 5px at 24px 21px,#e4e7ee 98%,transparent),radial-gradient(circle 5px at 42px 21px,#e4e7ee 98%,transparent),radial-gradient(circle 5px at 60px 21px,#e4e7ee 98%,transparent),#fafbfd}
.pf-xw::after{content:"";position:absolute;inset:-30% -20% auto auto;width:60%;height:70%;z-index:-1;background:radial-gradient(closest-side,rgba(255,181,71,.25),transparent);filter:blur(10px)}
.pf-xs{display:grid;height:540px;-webkit-mask:linear-gradient(180deg,#000 calc(100% - 110px),transparent);mask:linear-gradient(180deg,#000 calc(100% - 110px),transparent)}
.pf-xv{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .55s var(--ease),transform .55s var(--ease),visibility 0s .55s}
.pf-xv.on{opacity:1;visibility:visible;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)}
.pf-xv .crop{margin:0;padding:30px 0 0 30px}
.pf-xv .crop img{display:block;width:var(--w);max-width:none;height:auto;border-radius:12px 0 0 0;box-shadow:0 0 0 1px rgba(10,16,34,.07),0 20px 40px -30px rgba(10,16,34,.4)}

/* carry: the finding and the work it became, with the context gliding across between them */
.pf-cy{padding-top:184px}
.pf-cg{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto;column-gap:28px;margin-top:72px}
.pf-cg::before{content:"";position:absolute;inset:10% 18% -6% 30%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,181,71,.22),rgba(255,181,71,0));filter:blur(24px)}
.pf-ca,.pf-cb{margin:0;min-width:0}
.pf-ca{grid-column:1;grid-row:1/3;transform:translateY(calc((1 - var(--p,1)) * 40px))}
.pf-cb{grid-column:2;grid-row:2;margin-top:28px;transform:translateY(calc((1 - var(--p,1)) * 140px))}
.pf-ca .sv-t{height:540px}
.pf-cb .sv-t{height:470px}
.pf-cl{margin:18px 0 0 6px;font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--ink)}
.pf-cc{grid-column:2;grid-row:1;align-self:end;padding:8px 0 0 4px}
.pf-cc-h{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--muted)}
.pf-cc ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pf-cc-i{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 9px;border-radius:999px;background:#fff;border:1px solid var(--line2);
  font-weight:600;font-size:14px;color:var(--ink);box-shadow:0 14px 26px -18px rgba(10,16,34,.45);
  transform:translateX(calc((1 - var(--p,1)) * (-220px - var(--k) * 60px)));opacity:calc(.2 + .8 * var(--p,1))}
.pf-cc-i .ico{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--glow);color:var(--ink);flex:none}

@media (max-width:1040px){
  .pf-xg{grid-template-columns:1fr;gap:24px}
  .pf-xl{grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);overflow-x:auto;padding-bottom:6px}
  .pf-xi{transform:none}
  .pf-xa{display:none!important}
  .pf-cg{grid-template-columns:1fr;row-gap:28px}
  .pf-ca,.pf-cb,.pf-cc{grid-column:1;grid-row:auto;transform:none}
  .pf-cb{margin-top:0}
  .pf-cc-i{transform:none;opacity:1}
}
@media (max-width:760px){
  .pf-xp,.pf-cy{padding-top:112px}
  .pf-xs{height:420px}
  .pf-xv .crop img{width:calc(var(--w) * .85)}
  .pf-xd{display:none}
  .pf-xl{grid-auto-columns:max-content;gap:8px}
  .pf-xi.on{box-shadow:var(--sh-1)}
  .pf-xb{grid-template-columns:28px auto;column-gap:10px;padding:10px 16px 10px 10px;border-radius:999px}
  .pf-xi{border-radius:999px}
  .pf-xb .ico{grid-row:auto;width:28px;height:28px;padding:5px;border-radius:50%}
  .pf-xn{font-size:15px;white-space:nowrap}
  .pf-xt{left:16px;right:16px}
  .pf-ca .sv-t,.pf-cb .sv-t{height:400px}
}
@media (prefers-reduced-motion:reduce){
  .pf-xi,.pf-xw,.pf-ca,.pf-cb,.pf-cc-i{transform:none;opacity:1}
}

/* overlay: the screen being worked on, with the Agent's panel sliding in over its right side (inside the frame) */
.pf-ov{padding-top:184px}
.pf-of{position:relative;margin-top:64px;height:640px;border-radius:28px;overflow:hidden;background:linear-gradient(160deg,#fff 0%,var(--tint) 55%,#f1f4fa 100%);
  border:1px solid rgba(10,16,34,.07);box-shadow:0 60px 100px -60px rgba(10,16,34,.45);
  -webkit-mask:linear-gradient(180deg,#000 calc(100% - 80px),transparent);mask:linear-gradient(180deg,#000 calc(100% - 80px),transparent)}
.pf-of::before{content:"";position:absolute;inset:auto -10% -30% 40%;height:70%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,181,71,.28),transparent);filter:blur(20px)}
.pf-ob,.pf-op{margin:0}
.pf-ob .crop{margin:0;padding:48px 0 0 48px}
.pf-ob .crop img{display:block;width:var(--w);max-width:none;height:auto;border-radius:14px 0 0 0;box-shadow:0 0 0 1px rgba(10,16,34,.07)}
.pf-op{position:absolute;top:28px;right:0;width:calc(var(--pw) + 28px);background:#fff;border-radius:18px 0 0 18px;
  box-shadow:-30px 40px 80px -30px rgba(10,16,34,.45),0 0 0 1px rgba(10,16,34,.08);
  transform:translateX(calc((1 - var(--p,1)) * 105%))}
.pf-op .crop{margin:0;padding:14px 0 0 14px}
.pf-op .crop img{display:block;width:var(--w);max-width:none;height:auto}
.pf-tag{position:absolute;z-index:2;font-size:12.5px;font-weight:700;color:var(--ink);background:rgba(255,255,255,.92);border:1px solid var(--line2);
  border-radius:999px;padding:6px 12px;box-shadow:var(--sh-1)}
.pf-ob .pf-tag{left:22px;top:12px}
.pf-op .pf-tag{left:16px;top:-15px;white-space:nowrap;background:var(--dot);border-color:transparent}

/* inflow: words held on the left; the sources' screens flow in on the right */
.pf-if{padding-top:184px;display:grid;grid-template-columns:minmax(0,4.2fr) minmax(0,7.8fr);gap:64px;align-items:start}
.pf-if-w{position:sticky;top:calc(50vh - 260px)}
.pf-if-s{display:grid;grid-template-columns:minmax(0,1fr);gap:56px}
.pf-if-f{margin:0;margin-left:var(--o,0);transform:translateX(calc((1 - var(--p,1)) * -70px));opacity:calc(.3 + .7 * var(--p,1))}
.pf-if-f .sv-t{max-height:520px}

@media (max-width:1040px){
  .pf-if{grid-template-columns:minmax(0,1fr);gap:36px}
  .pf-if-w{position:static}
  .pf-if-f{margin-left:0}
}
@media (max-width:760px){
  .pf-ov,.pf-if{padding-top:112px}
  .pf-of{height:460px}
  .pf-ob .crop{padding:28px 0 0 28px}
  .pf-ob .crop img,.pf-op .crop img{width:calc(var(--w) * .85)}
  .pf-op{width:calc(var(--pw) * .85 + 14px)}
}
@media (prefers-reduced-motion:reduce){.pf-op,.pf-if-f{transform:none;opacity:1}}

/* =========================================================
   Grid arrangements (R-GRID-VARY): every page keeps a homepage-style grid, each in its own arrangement.
   g-tallr  three stacked tiles, the payoff tall on the right       g-wide1  one wide tile, three across under it
   g-row4   four across, stepping down as they go                    g-3x1    three across, one wide under them
   g-n3r    5/7, then one wide                                       g-three  three equal, side by side
   ========================================================= */
.sbento.g-tallr{grid-template-rows:repeat(3,auto)}
.g-tallr .sb,.g-tallr .sb:nth-child(1){grid-column:1/6}
.g-tallr .sb:nth-child(4){grid-column:6/13;grid-row:1/4}
.g-tallr .sb .bt-shot{height:140px}
.g-tallr .sb:nth-child(4) .bt-shot{height:auto;flex:1;min-height:420px}
.g-wide1 .sb,.g-wide1 .sb:nth-child(4){grid-column:span 4}
.g-wide1 .sb:nth-child(1){grid-column:1/-1}
.g-wide1 .sb:nth-child(1) .bt-shot{height:340px}
.g-row4{align-items:start}
.g-row4 .sb,.g-row4 .sb:nth-child(1),.g-row4 .sb:nth-child(4){grid-column:span 3}
.g-row4 .sb:nth-child(2){margin-top:40px}.g-row4 .sb:nth-child(3){margin-top:80px}.g-row4 .sb:nth-child(4){margin-top:120px}
.g-row4 .sb .bt-shot{height:300px}
.g-row4 .bt-b{padding:18px 22px 22px}
.g-3x1 .sb,.g-3x1 .sb:nth-child(1){grid-column:span 4}
.g-3x1 .sb:nth-child(4){grid-column:1/-1}
.g-3x1 .sb:nth-child(4) .bt-shot{height:320px}
.g-n3r .sb:nth-child(1){grid-column:span 5}.g-n3r .sb:nth-child(2){grid-column:span 7}
.g-n3r .sb:nth-child(3){grid-column:1/-1}.g-n3r .sb:nth-child(3) .bt-shot{height:320px}
.g-three .sb,.g-three .sb:nth-child(1){grid-column:span 4}
@media (max-width:900px){
  .sbento[class*=" g-"] .sb,.sbento[class*=" g-"] .sb:nth-child(n){grid-column:1/-1;grid-row:auto;margin-top:0}
  .g-tallr .sb .bt-shot,.g-tallr .sb:nth-child(4) .bt-shot{height:230px;min-height:0;flex:none}
}

/* =========================================================
   Integrations directory (directory.py): every connection, drawn by hand. Frames and underlines are sketched by
   shared.js; monograms are hand-lettered; the operation chips filter the board.
   ========================================================= */
.pf-dir{padding-top:184px}
.pf-dir-f{margin-top:44px}
.pf-dir-b{margin-top:30px;columns:4 240px;column-gap:22px}
.pf-dg{position:relative;break-inside:avoid;margin:0 0 22px;padding:22px 20px 18px;display:inline-block;width:100%;transition:opacity .35s,transform .35s var(--ease)}
.pf-dg svg.sk{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.pf-dg svg.sk path{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pf-dg svg.sk path.u{stroke:var(--dot);stroke-width:5;opacity:.8}
.pf-dg-sends{background:linear-gradient(180deg,rgba(255,231,191,.35),rgba(255,231,191,0))}
.pf-dg-asks{background:linear-gradient(180deg,rgba(51,67,184,.06),rgba(51,67,184,0))}
.pf-dg-h{position:relative;margin:0;font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.pf-dg-u{margin:8px 0 0;color:var(--muted);font-size:13.5px;line-height:1.45}
.pf-dg ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.pf-dg li{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center}
/* a logo slot: production places each vendor's official mark here (founder, 8 Oct); the preview shows its initials */
.pf-mh{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#fff;border:1px solid rgba(10,16,34,.12);box-shadow:0 6px 14px -10px rgba(10,16,34,.5);font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:-.02em;color:var(--ink);line-height:1}
.pf-mh svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pf-mh svg path{fill:#fff;stroke:var(--ink);stroke-width:1.4}
.pf-mh span{position:relative}
.pf-dg li b{font-weight:600;font-size:15px}
.pf-dg li em{font-style:normal;font-size:11.5px;font-weight:700;color:#7a5a12;background:var(--glow);border-radius:999px;padding:2px 8px}
.pf-dg-p{margin:14px 0 0;padding-top:10px;border-top:1px dashed var(--line3);color:var(--muted);font-size:12.5px;line-height:1.4}
.pf-dir[data-f] .pf-dg{opacity:.22}
.pf-dir[data-f="reads"] .pf-dg-reads,.pf-dir[data-f="sends"] .pf-dg-sends,.pf-dir[data-f="asks"] .pf-dg-asks,.pf-dir[data-f="builds"] .pf-dg-builds{opacity:1;transform:translateY(-4px)}
.pf-dir-n{margin:8px 0 0;color:var(--muted);font-size:14.5px;display:flex;gap:16px;align-items:center;flex-wrap:wrap}
@media (max-width:760px){.pf-dir{padding-top:112px}.pf-dir-b{columns:1}}
@media (prefers-reduced-motion:reduce){.pf-dg{transition:none}}

/* The editorial section on phones and tablets: its one column took the frame's width and cut the paragraph off at the
   screen edge (found in the audit pass, 8 Oct 2026). minmax(0,1fr) keeps the column to the page. */
@media (max-width:1040px){.sed-g{grid-template-columns:minmax(0,1fr)}}

/* Founder, 9 Oct 2026: one action per hero; a second action is a text link, not an outlined pill. The link carries the
   brand's halftone as its underline: a row of amber dots that fills in on hover. */
.btn.link{background:none;border:0;box-shadow:none;color:var(--ink);padding-inline:6px;position:relative;font-weight:600}
.btn.link::after{content:"→";font-weight:700;transition:transform .3s var(--ease)}
.btn.link::before{content:"";position:absolute;left:6px;right:6px;bottom:8px;height:4px;
  background:radial-gradient(circle,var(--dot) 1.3px,transparent 1.8px) 0 50%/7px 4px repeat-x;opacity:.45;transition:opacity .3s,right .4s var(--ease)}
.btn.link:hover::before,.btn.link:focus-visible::before{opacity:1}
.btn.link:hover::after,.btn.link:focus-visible::after{transform:translateX(4px)}
.btn.link:hover{background:none;border:0}
.band .btn.link,.band .btn.link:hover{color:var(--frame)}
.cta .btn.link{flex:0 0 auto}

/* Founder, 9 Oct 2026: the page-name chip above the hero headline (product, solution and tool pages), and the current
   menu group marked in the header */
.ph-k{display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;padding:7px 15px 7px 9px;border-radius:999px;background:#fff;
  box-shadow:0 0 0 1px var(--line2),0 8px 20px -14px rgba(10,16,34,.3);font-size:14px;font-weight:600;color:var(--ink)}
.ph-k .ico{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--dot);color:var(--ink)}
.ph2 .ph-k{justify-self:center}
.ph-split .ph-k{grid-column:1/-1;justify-self:start}
.nl.cur{color:var(--ink);font-weight:600;position:relative}
.nl.cur::after{content:"";position:absolute;left:50%;bottom:2px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--dot)}

/* =========================================================
   Hub and company pages (hub.py): Resources, Pricing, About, Blog. Shared hero, grid tiles and tail come from the
   product, Solutions and shared styles; the sections below are these pages' own. Class names are prefixed pf-.
   ========================================================= */

/* chips: filters and tabs that look like controls (R-LOOKS-USABLE) */
.pf-lf{display:flex;flex-wrap:wrap;gap:8px}
.pf-chip{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:600;font-size:14px;color:var(--ink);background:#fff;border:1px solid var(--line2);
  border-radius:999px;padding:9px 15px;cursor:pointer;transition:background .25s,color .25s,border-color .25s,box-shadow .25s}
.pf-chip span{font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.pf-chip:hover{border-color:var(--line3);box-shadow:var(--sh-1)}
.pf-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.pf-chip[aria-pressed="true"] span{color:rgba(255,255,255,.7)}
.pf-chip:focus-visible{outline:2px solid var(--dot);outline-offset:2px}

/* resource tiles: a screen or the resource's own headings set as a page, the words inside the tile */
.pf-shf{padding-top:184px}
.pf-rg{margin-top:56px}
.pf-rt{transition:box-shadow .5s var(--ease)}
.pf-rt[data-sx]{transform:translateY(calc((1 - var(--p,1)) * 60px))}
.pf-rt:hover{box-shadow:0 40px 70px -50px rgba(10,16,34,.4)}
.pf-ra{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.pf-rt .bt-shot{height:300px}
.pf-rt .bt-b h3{font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-.02em;margin:0}
.pf-rt .bt-b p{margin-top:6px;color:var(--muted);font-size:15.5px;line-height:1.5}
.pf-rt .bt-b .more{display:inline-flex;margin-top:12px}
.pf-n3 .sb:nth-child(3){grid-column:1/-1}
.pf-n3 .sb:nth-child(3) .bt-shot{height:320px}
.pf-doc{margin:30px 0 0 30px;padding:28px 30px 30px;background:#fff;border-radius:14px 0 0 0;min-height:100%;
  box-shadow:0 0 0 1px rgba(10,16,34,.07),0 20px 40px -30px rgba(10,16,34,.35)}
.pf-doc-k{margin:0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pf-doc-t{margin:10px 0 0;font-family:var(--display);font-weight:800;font-size:26px;line-height:1.1;letter-spacing:-.025em;color:var(--ink)}
.pf-doc ol,.pf-doc ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:0}
.pf-doc li{padding:10px 0;border-top:1px solid var(--line);font-size:15px;color:#2a3350;display:flex;gap:12px}
.pf-doc ol{counter-reset:d}
.pf-doc ol li::before{counter-increment:d;content:counter(d,decimal-leading-zero);font-family:var(--mono);font-size:12px;color:var(--muted);padding-top:2px}
.pf-doc ul li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dot);margin-top:8px;flex:none}
.pf-doc-f{margin:14px 0 0;color:var(--muted);font-size:14px;line-height:1.5}
.pf-gl dl{margin:16px 0 0}
.pf-gl dt{font-weight:700;font-size:15px;color:var(--ink);padding-top:12px;border-top:1px solid var(--line)}
.pf-gl dd{margin:4px 0 12px;color:var(--muted);font-size:14.5px;line-height:1.5}

/* research: one destination, set wide */
.pf-rs{padding-top:184px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.pf-rs-w .more{display:inline-flex;margin-top:22px}
.pf-rs-t{display:block;height:400px;text-decoration:none;color:inherit;transform:translateY(calc((1 - var(--p,1)) * 50px));
  -webkit-mask:linear-gradient(180deg,#000 calc(100% - 90px),transparent);mask:linear-gradient(180deg,#000 calc(100% - 90px),transparent)}
.pf-rs-t .pf-doc{margin:44px 0 0 44px;border-radius:14px 0 0 0}
.pf-rs-t .pf-doc-t{font-size:32px}

/* the library: one list of everything, filtered */
.pf-lib{padding-top:184px}
.pf-lfs{display:grid;gap:12px;margin-top:44px}
.pf-lt .pf-chip{font-size:13.5px;padding:7px 13px}
.pf-lc{margin:28px 0 0;color:var(--muted);font-size:14px}
.pf-lc b{color:var(--ink);font-variant-numeric:tabular-nums}
.pf-ll{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--line2)}
.pf-ll li{border-bottom:1px solid var(--line)}
.pf-ll li[hidden]{display:none}
.pf-ll a{display:grid;grid-template-columns:110px minmax(0,1fr) minmax(0,auto) 20px;gap:20px;align-items:center;padding:16px 6px;color:var(--ink);text-decoration:none;border-radius:10px;transition:background .2s}
.pf-ll a:hover{background:var(--tint)}
.pf-ll a .arr{width:16px!important;height:16px!important;color:var(--muted);transition:transform .25s var(--ease)}
.pf-ll a:hover .arr{transform:translateX(3px);color:var(--ink)}
.pf-lk{justify-self:start;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);background:var(--glow);border-radius:999px;padding:4px 10px}
.pf-ll b{font-weight:600;font-size:16px}
.pf-lm{color:var(--muted);font-size:14px;text-align:right}
.pf-lmore{margin-top:24px}

/* pricing: the plans */
.pf-pls{padding-top:184px}
.pf-pls-h{display:flex;justify-content:space-between;align-items:end;gap:32px;flex-wrap:wrap}
.pf-bill{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:var(--tint);border:1px solid var(--line)}
.pf-bill button{font:inherit;font-weight:700;font-size:14.5px;border:0;background:none;color:var(--muted);padding:10px 18px;border-radius:999px;cursor:pointer;display:inline-flex;gap:8px;align-items:center;transition:background .25s,color .25s}
.pf-bill button span{font-weight:600;font-size:12px;color:#7a5a12;background:var(--glow);border-radius:999px;padding:2px 8px}
.pf-bill button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:var(--sh-1)}
.pf-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px;align-items:stretch}
.pf-plan{position:relative;display:flex;flex-direction:column;border-radius:26px;padding:30px 28px 28px;background:linear-gradient(170deg,#fff,var(--tint));
  border:1px solid rgba(10,16,34,.08);box-shadow:0 40px 80px -60px rgba(10,16,34,.4)}
.pf-plan header{display:flex;align-items:center;justify-content:space-between}
.pf-plan h3{margin:0;font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.02em}
.pf-plan header em{font-style:normal;font-size:12px;font-weight:700;color:var(--ink);background:var(--dot);border-radius:999px;padding:4px 10px}
.pf-pp{display:flex;align-items:baseline;gap:8px;margin-top:18px;flex-wrap:wrap}
.pf-pp b{font-family:var(--display);font-weight:800;font-size:46px;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.pf-pp small{color:var(--muted);font-size:14px}
.pf-pl{margin:14px 0 0;color:var(--muted);font-size:15px;line-height:1.5;min-height:3em}
.pf-pm{display:grid;gap:14px;margin-top:22px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pf-pm>span{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:12px;align-items:center}
.pf-pm b{font-weight:700;font-size:14.5px}
.pf-pm small{grid-column:2;color:var(--muted);font-size:13px}
.pf-eng{display:inline-flex;gap:5px}
.pf-eng i{width:11px;height:11px;border-radius:50%;border:1.5px solid var(--line3)}
.pf-eng i.f{background:var(--ink);border-color:var(--ink)}
.pf-qb{display:block;height:8px;border-radius:99px;background:rgba(10,16,34,.08);overflow:hidden}
.pf-qb i{display:block;height:100%;border-radius:99px;background:var(--dot)}
.pf-plan ul{list-style:none;margin:18px 0 24px;padding:0;display:grid;gap:9px;flex:1}
.pf-plan li{display:flex;gap:10px;font-size:14.5px;color:#2a3350;line-height:1.4}
.pf-plan li .ico{width:16px;height:16px;flex:none;margin-top:2px;color:#127a4f}
.pf-pc{justify-content:center}
.pf-feat{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 50px 90px -50px rgba(10,16,34,.7)}
.pf-feat .pf-pp small,.pf-feat .pf-pl,.pf-feat .pf-pm small{color:rgba(255,255,255,.66)}
.pf-feat .pf-pm{border-color:rgba(255,255,255,.14)}
.pf-feat li{color:rgba(255,255,255,.88)}
.pf-feat li .ico{color:var(--dot)}
.pf-feat .pf-eng i{border-color:rgba(255,255,255,.35)}
.pf-feat .pf-eng i.f{background:var(--dot);border-color:var(--dot)}
.pf-feat .pf-qb{background:rgba(255,255,255,.14)}
.pf-feat .btn.solid{background:var(--dot);color:var(--ink)}
.pf-feat .btn.solid .arr{color:var(--ink)}
.pf-rows{display:grid;gap:12px;margin-top:20px}
.pf-prow{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,3.6fr) minmax(0,2fr) auto;gap:28px;align-items:center;padding:22px 28px;border-radius:22px;
  background:#fff;border:1px solid var(--line2);color:var(--ink);text-decoration:none;transition:border-color .25s,box-shadow .35s var(--ease)}
.pf-prow:hover{border-color:var(--line3);box-shadow:var(--sh-2)}
.pf-prn b{display:block;font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em}
.pf-prn small,.pf-prm small{display:block;color:var(--muted);font-size:13.5px;line-height:1.45;margin-top:4px}
.pf-prm .pf-eng{margin-bottom:4px}
.pf-prow .pf-pp{margin:0}
.pf-prow .pf-pp b{font-size:30px}
.pf-prc{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14.5px;white-space:nowrap}
.pf-prc .arr{width:16px!important;height:16px!important}
.pf-tax{margin:22px 0 0;color:var(--muted);font-size:13.5px}

/* pricing: the comparison, four groups that open and close */
.pf-cmp{padding-top:184px}
.pf-tw{margin-top:44px;overflow-x:auto;border-radius:22px;border:1px solid var(--line2);background:#fff}
.pf-t{width:100%;border-collapse:collapse;min-width:860px;font-size:14.5px}
.pf-t thead th,.pf-t thead td{position:sticky;top:0;background:#fff;z-index:1;padding:20px 16px 14px;text-align:left;font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.015em;border-bottom:1px solid var(--line2)}
.pf-t th[scope="row"]{text-align:left;font-weight:600;color:#2a3350;padding:13px 16px 13px 24px;width:26%}
.pf-t th[scope="row"] small{display:block;margin-top:3px;font-weight:400;font-size:13px;line-height:1.4;color:var(--muted)}
.pf-t td{padding:13px 16px;color:var(--ink);font-variant-numeric:tabular-nums}
.pf-t td .ico{width:18px;height:18px;color:#127a4f}
.pf-no{color:var(--line3);font-weight:700}
.pf-t tbody tr:not(.pf-cg-h){border-top:1px solid var(--line)}
.pf-cg-b:not(.open) tr:not(.pf-cg-h){display:none}
.pf-cg-h th{padding:0}
.pf-cg-h button{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) 28px;gap:16px;align-items:center;width:100%;font:inherit;text-align:left;border:0;cursor:pointer;
  padding:18px 24px;background:var(--tint);border-top:1px solid var(--line2);color:var(--ink)}
.pf-cg-h button b{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.015em}
.pf-cg-h button span{color:var(--muted);font-weight:500;font-size:14px}
.pf-cg-h .pm{position:relative;width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid var(--line2)}
.pf-cg-h .pm::before,.pf-cg-h .pm::after{content:"";position:absolute;left:8px;right:8px;top:13px;height:1.6px;background:var(--ink);border-radius:2px;transition:transform .3s var(--ease)}
.pf-cg-h .pm::after{transform:rotate(90deg)}
.pf-cg-b.open .pf-cg-h .pm::after{transform:rotate(0)}
.pf-cg-h button:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}

/* pricing: two programme sizes in the grid, then the picker */
.pf-fit{padding-top:184px}
.pf-fit-g{margin-top:56px}
.pf-fit-t{display:flex;flex-direction:column;justify-content:space-between;min-width:0}
.pf-fit-t .bt-shot{height:320px}
.pf-fit-t .bt-b h3{font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0}
.pf-fit-t[data-sx]{transform:translateY(calc((1 - var(--p,1)) * 50px))}
.pf-pick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.4fr);gap:24px;align-items:center;margin-top:28px;padding:24px 28px;border-radius:22px;
  background:#fff;border:1px solid var(--line2);box-shadow:0 30px 60px -50px rgba(10,16,34,.4)}
.pf-ctl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center}
.pf-ctl label{font-weight:700;font-size:14px}
.pf-ctl output{font-family:var(--mono);font-size:14px;font-variant-numeric:tabular-nums;color:var(--ink);background:var(--tint);border-radius:8px;padding:3px 8px;min-width:44px;text-align:center}
.pf-ctl input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--ink);height:24px}
.pf-sw{grid-template-columns:auto minmax(0,1fr)}
.pf-sw input{width:20px;height:20px;accent-color:var(--ink)}
.pf-res{margin:0;display:grid;gap:4px;padding-left:24px;border-left:1px solid var(--line2);font-size:14px;color:var(--muted)}
.pf-res b{font-family:var(--display);font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--ink);transition:color .3s}
.pf-res .more{font-size:14px;margin-top:4px}
.pf-plan.pf-hit,.pf-prow.pf-hit{outline:3px solid var(--dot);outline-offset:3px}

/* about: the company ledger */
.pf-led{padding-top:184px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:center}
.pf-led-d{position:relative;padding:40px 44px 36px;border-radius:24px;background:#fff;border:1px solid var(--line2);box-shadow:0 50px 90px -60px rgba(10,16,34,.45);
  transform:translateY(calc((1 - var(--p,1)) * 50px))}
.pf-led-d::before{content:"";position:absolute;inset:-1px -1px auto auto;width:55%;height:60%;border-radius:0 24px 0 0;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(245,165,36,.45) 1.2px,transparent 1.7px) 0 0/11px 11px;-webkit-mask:radial-gradient(ellipse at 100% 0,#000,transparent 65%);mask:radial-gradient(ellipse at 100% 0,#000,transparent 65%)}
.pf-led-k{position:relative;display:inline-flex;align-items:center;gap:8px;margin:0;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.pf-led-k .ico{width:18px;height:18px}
.pf-led-n{position:relative;margin:10px 0 0;font-family:var(--display);font-weight:900;font-size:clamp(40px,4.6vw,64px);letter-spacing:-.04em;line-height:1}
.pf-led-d dl{position:relative;display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);margin:30px 0 0}
.pf-led-d dt,.pf-led-d dd{padding:13px 0;border-top:1px solid var(--line);margin:0;font-size:15.5px}
.pf-led-d dt{color:var(--muted)}
.pf-led-d dd{color:var(--ink);font-weight:600}
.pf-led-d dd a{color:inherit}
.pf-mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.pf-led-f{position:relative;margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:14.5px;line-height:1.55}

/* about: what we will not do (three tiles) and the address */
.pf-wont .sbento{margin-top:56px}
.pf-wont .sb .bt-shot{height:300px}
.pf-wont .pf-doc{min-height:0}
.pf-mail{padding-top:184px;text-align:center;display:grid;justify-items:center}
.pf-mail-k{display:inline-flex;align-items:center;gap:10px;margin:0;padding:7px 15px 7px 9px;border-radius:999px;background:linear-gradient(180deg,#fff,var(--tint));
  border:1px solid var(--line2);font-weight:700;font-size:14.5px;color:var(--ink);box-shadow:var(--sh-1)}
.pf-mail-k .ico{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--dot)}
.pf-mail-h{margin:26px 0 0;font-family:var(--display);font-weight:900;font-size:clamp(40px,7vw,104px);letter-spacing:-.045em;line-height:1;user-select:all;overflow-wrap:anywhere}
.pf-mail-p{margin:24px 0 0;max-width:620px;color:var(--muted);font-size:17px;line-height:1.65}
.pf-mail-r{margin:28px 0 0;color:var(--muted);font-size:14px;font-weight:500}
.pf-reads{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;margin-top:8px}
.pf-reads a{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:600;padding:6px 0}
.pf-reads a .ico{width:15px;height:15px;transition:transform .25s var(--ease)}
.pf-reads a:hover .ico{transform:translateX(3px)}
.pf-mail a{color:var(--ink)}

/* blog: the featured article in the hero window */
.pw2 .hshot.wide.pf-feat-w{background:#fff}
.pf-fa{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0;align-items:stretch;color:var(--ink);text-decoration:none}
.pw2 .hshot.wide .pf-fi img{width:100%;height:100%;max-height:none;object-fit:cover}
.pf-fi{display:block;min-height:420px;overflow:hidden}
.pf-fb{display:flex;flex-direction:column;justify-content:center;gap:16px;padding:44px 48px}
.pf-fb em{font-style:normal;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.pf-fb b{font-family:var(--display);font-weight:800;font-size:clamp(28px,2.6vw,38px);line-height:1.08;letter-spacing:-.03em}
.pf-fb>span:not(.more){color:var(--muted);font-size:16px;line-height:1.6}
.pf-fb .more{display:inline-flex;font-weight:700}

/* blog: jobs as tabs, three articles each; and the full grid */
.pf-jobs{padding-top:184px}
.pf-jt{margin-top:40px}
.pf-js{display:grid;margin-top:28px}
.pf-jv{grid-area:1/1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto;gap:20px;
  opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s .5s}
.pf-jv.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.pf-jv .pf-tall{grid-row:1/3}
.pf-pt{list-style:none;min-width:0}
.pf-pt a{display:flex;flex-direction:column;height:100%;border-radius:24px;overflow:hidden;background:var(--tint);border:1px solid rgba(10,16,34,.07);color:var(--ink);text-decoration:none;
  transition:box-shadow .45s var(--ease),border-color .3s}
.pf-pt a:hover{box-shadow:0 40px 70px -50px rgba(10,16,34,.45);border-color:rgba(10,16,34,.14)}
.pf-pi{display:block;aspect-ratio:1200/630;overflow:hidden;background:#e9edf5}
.pf-pi img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.pf-pt a:hover .pf-pi img{transform:translateY(-4px)}
.pf-tall .pf-pi{aspect-ratio:auto;flex:1;min-height:280px}
.pf-pb{display:grid;gap:8px;padding:20px 24px 24px}
.pf-pb em{font-style:normal;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.pf-pb b{font-family:var(--display);font-weight:800;font-size:20px;line-height:1.18;letter-spacing:-.02em;text-wrap:balance}
.pf-tall .pf-pb b{font-size:28px}
.pf-pb small{color:var(--muted);font-size:13.5px}
.pf-arts{padding-top:184px}
.pf-arts .pf-lf{margin-top:36px}
.pf-ag{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.pf-ag .pf-pt{grid-column:span 4}
.pf-ag .pf-pt.s7{grid-column:span 7}.pf-ag .pf-pt.s5{grid-column:span 5}.pf-ag .pf-pt.s12{grid-column:1/-1}
.pf-ag .pf-pt[hidden]{display:none}
.pf-amore{margin-top:28px}

@media (max-width:1040px){
  .pf-rs,.pf-led{grid-template-columns:minmax(0,1fr);gap:36px}
  .pf-cards{grid-template-columns:minmax(0,1fr)}
  .pf-prow{grid-template-columns:minmax(0,1fr);gap:12px}
  .pf-pick{grid-template-columns:minmax(0,1fr)}
  .pf-res{padding:16px 0 0;border-left:0;border-top:1px solid var(--line2)}
  .pf-fa{grid-template-columns:minmax(0,1fr)}
  .pf-fi{min-height:240px}
  .pf-ag .pf-pt,.pf-ag .pf-pt.s7,.pf-ag .pf-pt.s5,.pf-ag .pf-pt.s12{grid-column:span 6}
}
@media (max-width:760px){
  .pf-shf,.pf-rs,.pf-lib,.pf-pls,.pf-cmp,.pf-fit,.pf-led,.pf-mail,.pf-jobs,.pf-arts{padding-top:112px}
  .pf-rt .bt-shot,.pf-n3 .sb:nth-child(3) .bt-shot,.pf-fit-t .bt-shot,.pf-wont .sb .bt-shot{height:240px}
  .pf-doc{margin:20px 0 0 20px;padding:20px 22px}
  .pf-ll a{grid-template-columns:minmax(0,1fr) 16px;gap:6px 12px}
  .pf-lk{grid-column:1}.pf-ll b{grid-column:1}.pf-lm{grid-column:1;text-align:left}
  .pf-ll a .arr{grid-column:2;grid-row:1/4}
  .pf-led-d{padding:28px 24px}
  .pf-led-d dl{grid-template-columns:minmax(0,1fr)}
  .pf-led-d dt{padding-bottom:0;border-top:1px solid var(--line)}.pf-led-d dd{border-top:0;padding-top:4px}
  .pf-jv{grid-template-columns:minmax(0,1fr)}
  .pf-jv .pf-tall{grid-row:auto}
  .pf-ag .pf-pt,.pf-ag .pf-pt.s7,.pf-ag .pf-pt.s5,.pf-ag .pf-pt.s12{grid-column:1/-1}
  .pf-fb{padding:24px}
  .pf-bill button{padding:9px 14px}
}
@media (prefers-reduced-motion:reduce){.pf-rt,.pf-rs-t,.pf-fit-t,.pf-led-d{transform:none}}

/* about: the read-along beside a short screen; the frame fits the screen (R-FIT) */
.pf-short .rd-t{height:auto}
.pf-short .rd-p{font-size:clamp(20px,1.8vw,26px);line-height:1.36}

/* blog, round 4 (founder: "the blog looks completely out of the new theme"): covers drawn in the site's own language */
.pf-cov{position:relative;display:block;width:100%;height:100%;min-height:190px;overflow:hidden;background:linear-gradient(160deg,#fff,var(--tint) 60%,#eef2f9)}
.pf-cov canvas{position:absolute;inset:0;width:100%;height:100%}
.pf-cov-ink{background:radial-gradient(ellipse at 30% 20%,#18213f,var(--ink) 70%)}
.pf-cov-i{position:absolute;left:22px;top:20px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--dot);color:var(--ink);
  box-shadow:0 10px 24px -12px rgba(245,165,36,.9)}
.pf-cov-i .ico{width:22px;height:22px}
.pf-cov-k{position:absolute;left:22px;bottom:16px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);
  background:rgba(255,255,255,.86);border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.pf-cov-ink .pf-cov-k{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff}
.pf-pi{aspect-ratio:auto;height:200px;background:none}
.pf-tall .pf-pi{height:auto}
.pf-tall .pf-cov-i{width:60px;height:60px}.pf-tall .pf-cov-i .ico{width:28px;height:28px}
.pf-pt a{background:#fff;border-color:rgba(10,16,34,.09)}
.pf-pb{padding:20px 24px 24px}
.pf-pt a:hover .pf-cov canvas{transform:translateY(-4px)}
.pf-cov canvas{transition:transform .6s var(--ease)}
/* the featured article, as the hero element */
.hx-feat{border-radius:26px;background:#fff;border:1px solid rgba(10,16,34,.1);box-shadow:var(--sh-3);overflow:hidden}
.hx-feat .pf-fa{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);color:var(--ink);text-decoration:none}
.hx-feat .pf-fi{position:relative;display:block;min-height:420px}
.hx-feat .pf-fi .pf-cov{position:absolute;inset:0}
.hx-feat .pf-cov-i{left:32px;top:30px;width:72px;height:72px}.hx-feat .pf-cov-i .ico{width:34px;height:34px}
.hx-feat .pf-cov-k{left:32px;bottom:28px;font-size:13px}
.pf-fi-t{position:absolute;right:24px;top:28px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dot)}
@media (max-width:1040px){.hx-feat .pf-fa{grid-template-columns:minmax(0,1fr)}.hx-feat .pf-fi{min-height:240px}}
.pf-pt .pf-cov-k{display:none}

/* Audit, 8 Oct 2026: article summaries, where each Blog job path leads, and the Resources paths (three equal tiles) */
.pf-ps{color:var(--muted);font-size:14.5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pf-tall .pf-ps{font-size:15.5px;-webkit-line-clamp:3}
.pf-jv .pf-jn{grid-column:1/-1;list-style:none;margin:4px 0 0;font-size:15px;color:var(--muted)}
.pf-jv .pf-jn a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--line3);text-underline-offset:3px}
.pf-jv.pf-path{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto}
.pf-jv.pf-path > li{grid-column:auto;grid-row:auto;min-width:0}

@media (max-width:900px){.pf-jv.pf-path{grid-template-columns:1fr}}

/* =========================================================
   Hero elements (heroes.py, R-HERO-EL). The funnel is unchanged: words, buttons, the wave; the element below is the
   page's own. Each sits full width on the wave as one lifted object. Motion is slow and stops under reduced motion.
   ========================================================= */
.hx-wrap{position:relative;z-index:1}
.hx{max-width:1120px;margin:0 auto;position:relative}

/* loop: the capabilities in the order the work runs */
.hx-loop{border-radius:26px;background:#fff;border:1px solid rgba(10,16,34,.1);box-shadow:var(--sh-3),0 0 0 1px rgba(10,16,34,.03);overflow:hidden}
.hx-cols{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.hx-col{padding:30px 28px 26px;position:relative}
.hx-col+.hx-col{border-left:1px solid var(--line)}
.hx-col+.hx-col::before{content:"";position:absolute;left:-14px;top:34px;width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid var(--line2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a1022' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-size:14px;background-position:center;background-repeat:no-repeat;z-index:2}
.hx-k{display:inline-flex;align-items:center;gap:10px;margin:0;font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em;color:var(--ink)}
.hx-k .ico{width:30px;height:30px;padding:6px;border-radius:50%;background:var(--dot);color:var(--ink)}
.hx-col ul{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:4px}
.hx-col a{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;padding:12px;margin:0 -12px;border-radius:14px;color:var(--ink);text-decoration:none;
  transition:background .25s,box-shadow .3s}
.hx-col a:hover{background:var(--tint);box-shadow:inset 0 0 0 1px var(--line)}
.hx-col a .ico{width:34px;height:34px;padding:8px;border-radius:10px;background:var(--tint);border:1px solid var(--line);color:var(--muted)}
.hx-col a:hover .ico{color:var(--ink);border-color:var(--line3)}
.hx-col b{display:block;font-weight:700;font-size:15.5px;line-height:1.25}
.hx-col small{display:block;margin-top:3px;color:var(--muted);font-size:13.5px;line-height:1.45}
.hx-col{opacity:calc(.25 + .75 * var(--p,1));transform:translateY(calc((1 - var(--p,1)) * (16px + var(--k) * 14px)))}
/* the opportunity, travelling from measure to prove */
.hx-run{position:absolute;top:0;left:0;width:33.33%;height:3px;background:linear-gradient(90deg,transparent,var(--dot) 60%,transparent);animation:hxrun 6s cubic-bezier(.6,0,.4,1) infinite}
@keyframes hxrun{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
.hx-base{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:16px 28px;background:linear-gradient(180deg,var(--tint),#f1f4fa);border-top:1px solid var(--line)}
.hx-bk{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;color:var(--muted);margin-right:6px}
.hx-bk .ico,.hx-base a .ico{width:18px;height:18px}
.hx-base a{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;color:var(--ink);text-decoration:none;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--line2);transition:box-shadow .25s,border-color .25s}
.hx-base a:hover{border-color:var(--line3);box-shadow:var(--sh-1)}
.hx-base .hx-all{margin-left:auto;background:none;border:0;padding:8px 0}
.hx-base .hx-all .arr{width:16px!important;height:16px!important}

/* switch: reads from, Praised, sends to and ask it from */
.hx-switch{border-radius:26px;background:radial-gradient(ellipse at 50% 45%,#fff 0,#fff 30%,var(--tint) 100%);border:1px solid rgba(10,16,34,.1);box-shadow:var(--sh-3);padding:34px 34px 30px}
.hx-wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.hx-wires path{fill:none;stroke:rgba(10,16,34,.16);stroke-width:1.4}
.hx-wires path.f{stroke:var(--dot);stroke-width:2;stroke-dasharray:3 14;stroke-linecap:round;animation:hxflow 1.6s linear infinite}
@keyframes hxflow{to{stroke-dashoffset:-34}}
.hx-sg{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr) minmax(0,1fr);gap:40px;align-items:center}
.hx-side ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.hx-side .hx-k{font-size:17px}
.hx-side .hx-k .ico{width:26px;height:26px;padding:5px}
.hx-k2{margin-top:22px}
.hx-ch{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 14px;border-radius:12px;background:#fff;border:1px solid var(--line2);box-shadow:0 8px 18px -14px rgba(10,16,34,.4)}
.hx-ch b{font-weight:600;font-size:14.5px}
.hx-ch small{color:var(--muted);font-size:12.5px;white-space:nowrap}
.hx-out .hx-ch{flex-direction:row-reverse}
.hx-out .hx-k{float:none}
.hx-hub{display:grid;justify-items:center;text-align:center;gap:8px}
.hx-node{display:grid;place-items:center;width:112px;height:112px;border-radius:50%;background:var(--ink);color:#fff;box-shadow:0 0 0 12px rgba(255,181,71,.16),0 0 0 26px rgba(255,181,71,.07),0 30px 60px -24px rgba(10,16,34,.6)}
.hx-node svg{width:58px;height:58px}
.hx-hub b{margin-top:10px;font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.02em}
.hx-hub small{max-width:220px;color:var(--muted);font-size:13.5px;line-height:1.45}

/* shelf: the resources themselves, as covers */
.hx-shelf{padding:8px 0 30px}
.hx-row{display:flex;justify-content:center}
.hx-cv{position:relative;flex:0 0 196px;height:290px;margin-left:-12px;display:flex;flex-direction:column;gap:12px;padding:24px 22px 20px;border-radius:18px;background:#fff;
  border:1px solid rgba(10,16,34,.1);box-shadow:0 30px 60px -36px rgba(10,16,34,.5);color:var(--ink);text-decoration:none;z-index:calc(10 - var(--k));
  transform:translateY(calc(var(--k) * 6px));transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.hx-cv:first-child{margin-left:0}
.hx-cv:hover,.hx-cv:focus-visible{transform:translateY(-14px);z-index:20;box-shadow:0 44px 70px -36px rgba(10,16,34,.55)}
.hx-cv:focus-visible{outline:3px solid var(--dot);outline-offset:3px}
.hx-cvk{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hx-cv b{font-family:var(--display);font-weight:800;font-size:22px;line-height:1.1;letter-spacing:-.02em}
.hx-cvl{display:grid;margin-top:auto}
.hx-cvl i{font-style:normal;font-size:13px;color:#2a3350;padding:7px 0;border-top:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-cv em{font-style:normal;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px}
.hx-cv em .arr{width:15px!important;height:15px!important}

/* sum: one figure adding up, engine by engine */
.hx-sum{border-radius:26px;background:#fff;border:1px solid rgba(10,16,34,.1);box-shadow:var(--sh-3);padding:30px 34px 28px}
.hx-cap{margin:0;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.hx-eqn{display:flex;align-items:stretch;gap:10px;margin-top:20px}
.hx-term,.hx-tot{flex:1;min-width:0;display:grid;align-content:start;gap:2px;padding:16px 14px 14px;border-radius:16px;background:var(--tint);border:1px solid var(--line);
  animation:hxin .6s var(--ease) both;animation-delay:calc(.3s + var(--k,6) * .12s)}
@keyframes hxin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hx-e{font-size:12.5px;font-weight:700;color:#2a3350;line-height:1.25;min-height:2.5em}
.hx-term b,.hx-tot b{font-family:var(--display);font-weight:800;font-size:34px;letter-spacing:-.03em;line-height:1.05;font-variant-numeric:tabular-nums;margin-top:6px}
.hx-term small,.hx-tot small{color:var(--muted);font-size:13px;font-variant-numeric:tabular-nums}
.hx-term i{display:block;height:6px;border-radius:99px;margin-top:10px;background:linear-gradient(90deg,#3343b8 0 var(--v),rgba(10,16,34,.08) var(--v) 100%)}
.hx-r{font-size:12.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:4px}
.hx-op{align-self:center;font-family:var(--display);font-weight:800;font-size:22px;color:var(--muted)}
.hx-eq{color:var(--ink)}
.hx-tot{flex:1.35;background:var(--ink);border-color:var(--ink);color:#fff;--k:7}
.hx-tot .hx-e{color:var(--dot)}
.hx-tot b{font-size:44px}
.hx-tot small{color:rgba(255,255,255,.7)}
.hx-note{margin:16px 0 0;color:var(--muted);font-size:14px;line-height:1.5}

/* pricing: the plans are the hero element */
.hx-plans{max-width:1120px;margin:0 auto}
.hx-plans .pf-pls-h{align-items:center;padding:14px 18px 14px 22px;border-radius:20px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);box-shadow:var(--sh-1)}
.hx-plans .pf-pls-h h2{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(24px,2.2vw,30px);letter-spacing:-.025em}
.hx-plans .pf-pls-h p{margin:6px 0 0;color:var(--muted);font-size:15.5px}
.hx-plans .pf-cards{margin-top:22px}

@media (max-width:1040px){
  .hx-cols{grid-template-columns:minmax(0,1fr)}
  .hx-col+.hx-col{border-left:0;border-top:1px solid var(--line)}
  .hx-col+.hx-col::before{left:28px;top:-14px;transform:rotate(90deg)}
  .hx-run{display:none}
  .hx-sg{grid-template-columns:minmax(0,1fr);gap:26px}
  .hx-wires{display:none}
  .hx-hub{order:-1}
  .hx-out .hx-ch{flex-direction:row}
  .hx-row{justify-content:flex-start;overflow-x:auto;padding:20px 4px 12px;scroll-snap-type:x mandatory}
  .hx-cv{scroll-snap-align:start;margin-left:-14px}
  .hx-eqn{flex-wrap:wrap}
  .hx-term{flex:1 1 calc(33% - 30px)}
  .hx-op:not(.hx-eq){display:none}
  .hx-eq{flex:0 0 100%;text-align:center}
}
@media (max-width:760px){
  .hx-col{padding:22px 20px}
  .hx-switch,.hx-sum{padding:22px 18px}
  .hx-base{padding:14px 18px}.hx-base .hx-all{margin-left:0}
  .hx-term{flex:1 1 calc(50% - 10px)}
  .hx-cv{flex-basis:190px;height:270px}
}
@media (prefers-reduced-motion:reduce){
  .hx-run{display:none}
  .hx-wires path.f{animation:none}
  .hx-term,.hx-tot{animation:none}
  .hx-col{opacity:1;transform:none}
}

/* =========================================================
   Round 5 (founder: "quite flat ... be bold and stay high tech and creative"; the Blog's "boring grey in boxes").
   Covers and panels in the brand's colourways (ink, indigo, amber, glow, white), dot fields in each one's own colour,
   layered glows and lit edges. Translate only, never scaled or tilted (R-SHARP).
   ========================================================= */
.hx-shelf{padding:20px 0 40px}
.hx-row{gap:0;align-items:flex-start}
.hx-cv{flex:0 0 190px;height:330px;margin-left:-8px;padding:22px 20px 18px;border-radius:22px;overflow:hidden;isolation:isolate;
  transform:translateY(calc(var(--k) * 14px - (var(--k) - 2.5) * (var(--k) - 2.5) * 4px));
  box-shadow:0 40px 70px -40px rgba(10,16,34,.6),0 0 0 1px rgba(255,255,255,.06) inset}
.hx-cv canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.hx-cv::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 38%);mix-blend-mode:soft-light}
.hx-cv:hover,.hx-cv:focus-visible{transform:translateY(-18px)}
.hx-cv-ink{background:radial-gradient(ellipse at 20% 0,#1d2750,#0a1022 70%);color:#fff;border-color:#0a1022}
.hx-cv-indigo{background:radial-gradient(ellipse at 80% 0,#4a58d6,#27318f 75%);color:#fff;border-color:#27318f}
.hx-cv-amber{background:radial-gradient(ellipse at 30% 0,#ffd27e,#ffb547 70%);color:#0a1022;border-color:#f2a63a}
.hx-cv-glow{background:linear-gradient(170deg,#fff6e6,#ffe7bf);color:#0a1022;border-color:#f6d9a6}
.hx-cv-white{background:#fff;color:#0a1022}
.hx-cv-ink .hx-cvk,.hx-cv-indigo .hx-cvk{color:rgba(255,255,255,.62)}
.hx-cv-amber .hx-cvk{color:rgba(10,16,34,.62)}
.hx-cv-ink:hover{box-shadow:0 50px 80px -40px rgba(10,16,34,.75),0 0 0 1px rgba(255,181,71,.6) inset,0 0 40px -6px rgba(255,181,71,.45)}
.hx-cv-indigo:hover{box-shadow:0 50px 80px -40px rgba(39,49,143,.7),0 0 0 1px rgba(255,255,255,.35) inset,0 0 40px -6px rgba(74,88,214,.55)}
.hx-cv-amber:hover,.hx-cv-glow:hover,.hx-cv-white:hover{box-shadow:0 50px 80px -40px rgba(10,16,34,.5),0 0 0 1.5px rgba(10,16,34,.5) inset,0 0 40px -6px rgba(255,181,71,.6)}
.hx-cv b{font-size:21px}
.hx-sig{display:grid;place-items:center;flex:1;margin:6px -4px 0}
.hx-sig svg{width:100%;max-width:150px;height:auto;overflow:visible}
.hx-sig circle,.hx-sig rect{fill:currentColor;opacity:.85}
.hx-sig .h{fill:#ffb547;opacity:1;filter:drop-shadow(0 0 6px rgba(255,181,71,.8))}
.hx-cv-amber .hx-sig .h{fill:#0a1022;filter:none}
.hx-sig .ln{stroke:currentColor;stroke-width:2;opacity:.35;fill:none}
.hx-sig .f{fill:#ffb547;stroke:none;opacity:1}
.hx-sig .o{fill:none;stroke:currentColor;stroke-width:2;opacity:.6}
.hx-sig path.f,.hx-sig path.o{fill:none;stroke-width:9;stroke-linecap:round}
.hx-sig path.f{stroke:#ffb547;opacity:1}
.hx-cv-glow .hx-sig path.f{stroke:#e8952a}
.hx-sig text{font-family:var(--display);font-weight:800;font-size:26px;fill:currentColor}
.hx-code{margin:0;padding:12px 14px;border-radius:12px;background:rgba(10,16,34,.35);border:1px solid rgba(255,255,255,.14);
  font:500 12.5px/1.6 var(--mono);color:rgba(255,255,255,.85);white-space:pre;width:100%;box-shadow:0 0 30px -10px rgba(140,152,255,.6) inset}
.hx-code i{font-style:normal;color:#ffc45e}
.hx-cv em{margin-top:auto}
@media (prefers-reduced-motion:no-preference){
  .hx-cv .hx-sig .h{animation:hxpulse 2.6s ease-in-out infinite}
  .hx-cv:hover .hx-sig circle:not(.h),.hx-cv:hover .hx-sig rect:not(.h){animation:hxblink 1.2s ease-in-out infinite;animation-delay:calc(var(--k) * .1s)}
}
@keyframes hxpulse{50%{opacity:.55}}
@keyframes hxblink{50%{opacity:.4}}

/* About: the figure adding up, as an instrument panel on ink */
.hx-sum{background:radial-gradient(ellipse at 10% 0,#1d2750,#0a1022 62%);border-color:#0a1022;color:#fff;overflow:hidden;isolation:isolate;padding:34px 36px 30px;
  box-shadow:0 60px 110px -50px rgba(10,16,34,.75),0 0 0 1px rgba(255,255,255,.06) inset}
.hx-sum>canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.hx-sum .hx-cap{color:rgba(255,255,255,.6)}
.hx-sum .hx-eqn{align-items:flex-end;margin-top:24px}
.hx-sum .hx-term{position:relative;overflow:hidden;min-height:210px;align-content:end;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:16px 14px 14px}
.hx-col-f{position:absolute;left:0;right:0;bottom:0;height:100%;pointer-events:none}
.hx-col-f i{position:absolute;left:0;right:0;bottom:0;height:var(--h);background:linear-gradient(180deg,rgba(91,108,255,.55),rgba(51,67,184,.15));
  border-top:2px solid #8e98ff;box-shadow:0 -10px 30px -10px rgba(142,152,255,.7);animation:hxgrow 1.1s var(--ease) both;animation-delay:calc(.4s + var(--k) * .12s)}
@keyframes hxgrow{from{height:0}}
.hx-sum .hx-term>*:not(.hx-col-f){position:relative}
.hx-sum .hx-e{color:rgba(255,255,255,.75);min-height:0}
.hx-sum .hx-term b{color:#fff;font-size:38px}
.hx-sum .hx-term small{color:rgba(255,255,255,.6)}
.hx-sum .hx-r{color:#c9cfff}
.hx-sum .hx-term i:not(.hx-col-f i){display:none}
.hx-sum .hx-op{color:#ffb547;font-size:26px;align-self:center}
.hx-sum .hx-eq{color:#fff}
.hx-sum .hx-tot{background:linear-gradient(170deg,#ffd27e,#ffb547);color:#0a1022;border:0;min-height:210px;align-content:end;
  box-shadow:0 0 0 1px rgba(255,255,255,.3) inset,0 0 60px -10px rgba(255,181,71,.75)}
.hx-sum .hx-tot .hx-e{color:#0a1022}
.hx-sum .hx-tot b{font-size:58px}
.hx-sum .hx-tot small{color:rgba(10,16,34,.7)}
.hx-sum .hx-note{color:rgba(255,255,255,.62)}
@media (max-width:1040px){.hx-sum .hx-term,.hx-sum .hx-tot{min-height:150px}}
@media (prefers-reduced-motion:reduce){.hx-col-f i{animation:none}}

/* Blog: topic colourways in place of grey */
.pf-cov{background:#fff}
.pf-cov-ink{background:radial-gradient(ellipse at 20% 0,#1d2750,#0a1022 70%)}
.pf-cov-indigo{background:radial-gradient(ellipse at 80% 0,#4a58d6,#27318f 75%)}
.pf-cov-amber{background:radial-gradient(ellipse at 30% 0,#ffd27e,#ffb547 70%)}
.pf-cov-glow{background:linear-gradient(170deg,#fff6e6,#ffe7bf)}
.pf-cov-white{background:#fff;box-shadow:inset 0 -1px 0 var(--line)}
.pf-cov-amber .pf-cov-i{background:#0a1022;color:#ffb547;box-shadow:none}
.pf-cov-indigo .pf-cov-k,.pf-cov-ink .pf-cov-k{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.pf-pt a{border:0;box-shadow:0 1px 0 rgba(10,16,34,.04),0 24px 50px -36px rgba(10,16,34,.45),0 0 0 1px rgba(10,16,34,.07)}
.pf-pt a:hover{box-shadow:0 40px 70px -40px rgba(10,16,34,.5),0 0 0 1.5px rgba(10,16,34,.35)}
.pf-pb{gap:10px}
.pf-pb b{font-size:21px}
.pf-pb em{color:#7a5a12}

/* =========================================================
   Round 6 (founder: "the dots are quite noisy"; "always contained within flat grey box is a bit boring, preferred designs
   to be fluid"). Hero objects float on the page with no container; tiles that keep a frame take a warm or indigo wash and
   a soft glow instead of flat grey.
   ========================================================= */
/* switch: no box; the wires, chips and node float over a soft glow */
.hx-switch{background:none;border:0;box-shadow:none;padding:20px 0 10px;overflow:visible}
.hx-switch::before{content:"";position:absolute;left:50%;top:50%;width:520px;height:520px;transform:translate(-50%,-50%);border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(255,181,71,.22),rgba(255,181,71,.08) 55%,transparent);pointer-events:none}
.hx-switch .hx-ch{background:#fff;border-color:rgba(10,16,34,.1);box-shadow:0 14px 30px -18px rgba(10,16,34,.45)}
.hx-switch .hx-ch:hover{border-color:rgba(10,16,34,.3)}
.hx-switch .hx-wires path{stroke:rgba(10,16,34,.13)}
.hx-switch .hx-node{box-shadow:0 0 0 14px rgba(255,181,71,.18),0 0 0 32px rgba(255,181,71,.08),0 0 80px 10px rgba(255,181,71,.35),0 30px 60px -24px rgba(10,16,34,.6)}

/* loop: no box; three columns float, each capability a light card, the opportunity travels across the top */
.hx-loop{background:none;border:0;box-shadow:none;overflow:visible}
.hx-loop .hx-cols{gap:26px}
.hx-loop .hx-col{padding:0}
.hx-loop .hx-col+.hx-col{border-left:0}
.hx-loop .hx-col+.hx-col::before{left:-27px;top:6px}
.hx-loop .hx-col ul{gap:10px}
.hx-loop .hx-col a{margin:0;padding:14px;background:#fff;border-radius:16px;box-shadow:0 1px 0 rgba(10,16,34,.04),0 18px 36px -24px rgba(10,16,34,.4),0 0 0 1px rgba(10,16,34,.07)}
.hx-loop .hx-col a:hover{box-shadow:0 28px 50px -26px rgba(10,16,34,.5),0 0 0 1.5px rgba(10,16,34,.3);background:#fff}
.hx-loop .hx-run{top:-14px;height:2px}
.hx-loop .hx-base{background:none;border:0;padding:22px 0 0;justify-content:center}
.hx-loop .hx-base .hx-all{margin-left:12px}

/* resource tiles: warm and indigo washes, never flat grey */
.pf-rg .pf-rt:nth-child(4n+1){background:radial-gradient(ellipse at 100% 0,#ffe7bf,#fff6e8 55%,#fffaf2)}
.pf-rg .pf-rt:nth-child(4n+2){background:radial-gradient(ellipse at 0 0,#dfe3ff,#f1f3ff 55%,#f8f9ff)}
.pf-rg .pf-rt:nth-child(4n+3){background:radial-gradient(ellipse at 100% 100%,#ffe7bf,#fff6e8 55%,#fffaf2)}
.pf-rg .pf-rt:nth-child(4n){background:radial-gradient(ellipse at 0 100%,#dfe3ff,#f1f3ff 55%,#f8f9ff)}
.pf-rg .pf-rt{border-color:transparent;box-shadow:0 30px 60px -48px rgba(10,16,34,.4)}
.pf-rg .pf-rt::before{opacity:.45}
.hx-loop{padding-top:56px}
.hx-switch{padding-top:64px}
@media (max-width:1040px){.hx-loop .hx-col+.hx-col::before{display:none}.hx-loop .hx-col+.hx-col{border-top:0;padding-top:8px}}

/* About: the method, as the document it is; calm white sheet, one amber accent */
.hx-method{border-radius:24px;background:#fff;border:1px solid rgba(10,16,34,.1);box-shadow:var(--sh-3);overflow:hidden}
.hx-mh{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 28px;border-bottom:1px solid var(--line)}
.hx-mh-t{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:-.015em}
.hx-mh-t .ico{width:20px;height:20px}
.hx-mh-s{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#127a4f;display:inline-flex;align-items:center;gap:8px}
.hx-mh-s::before{content:"";width:8px;height:8px;border-radius:50%;background:#1f9d63;box-shadow:0 0 0 4px rgba(31,157,99,.15)}
.hx-mc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.hx-mp{padding:26px 26px 24px;display:grid;align-content:start;gap:10px;animation:hxin .6s var(--ease) both;animation-delay:calc(.25s + var(--k) * .1s)}
.hx-mp+.hx-mp{border-left:1px solid var(--line)}
.hx-mp-h{margin:0;font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em}
.hx-mp-t{margin:0;color:var(--muted);font-size:14.5px;line-height:1.5;min-height:4.5em}
.hx-mp-e{justify-self:start;margin-top:4px;font:600 12.5px/1.3 var(--mono);color:var(--ink);background:var(--tint);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-variant-numeric:tabular-nums}
.hx-mp-e.w{background:var(--glow);border-color:#f3d39c;color:#6a4a0c}
.hx-mf{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:14px 28px;background:var(--tint);border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.hx-mf span{display:inline-flex;align-items:center;gap:8px}.hx-mf .ico{width:16px;height:16px}
.hx-mf b{font-family:var(--mono);font-weight:600;color:var(--ink)}
.hx-mf a{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--ink)}.hx-mf a .arr{width:16px!important;height:16px!important}
@media (max-width:1040px){.hx-mc{grid-template-columns:repeat(2,minmax(0,1fr))}.hx-mp:nth-child(3){border-left:0}.hx-mp:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:640px){.hx-mc{grid-template-columns:minmax(0,1fr)}.hx-mp+.hx-mp{border-left:0;border-top:1px solid var(--line)}.hx-mp-t{min-height:0}.hx-mh{flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){.hx-mp{animation:none}}
/* Blog: calm grey covers again */
.pf-cov-tint{background:linear-gradient(160deg,#fff,var(--tint) 60%,#eef2f9)}
@media (max-width:640px){.hx-mf span{display:block}.hx-mf .ico{vertical-align:-3px;margin-right:6px}}

.hx-node .hx-pm{width:58px;height:58px;color:#fff}

/* Two brand fonts (8 Oct): code blocks keep a monospace so their lines align; nothing else does */
.gl-sc pre,.gl-ll pre,.rr-code,.rf-code,.ad-code,.pk-code,.ln-r .code{font-family:var(--code)}

/* the resources hero: the documents' real first pages, fanned on the dot wave (owner, 14 Oct 2026) */
.hx-papers{padding:28px 0 56px}
.hx-prow{display:flex;justify-content:center;align-items:flex-start}
.hx-pp{position:relative;flex:0 0 200px;margin-left:-26px;z-index:var(--z);transform:translateY(var(--y)) rotate(var(--r));transform-origin:50% 100%;transition:transform .45s var(--ease),z-index 0s}
.hx-pp:first-child{margin-left:0}
.hx-pp img{display:block;width:100%;height:auto;border-radius:8px;background:#fff;box-shadow:0 1px 0 rgba(10,16,34,.06),0 30px 60px -30px rgba(10,16,34,.45),0 10px 20px -14px rgba(10,16,34,.25)}
.hx-ppl{position:absolute;left:50%;bottom:-38px;transform:translateX(-50%);white-space:nowrap;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px;opacity:0;transition:opacity .25s}
.hx-ppl .arr{width:15px!important;height:15px!important}
.hx-pp:hover,.hx-pp:focus-visible{transform:translateY(calc(var(--y) - 22px)) rotate(0deg);z-index:30}
.hx-pp:hover .hx-ppl,.hx-pp:focus-visible .hx-ppl{opacity:1}
.hx-pp:focus-visible{outline:none}
.hx-pp:focus-visible img{outline:3px solid var(--dot);outline-offset:3px}
@media (max-width:1040px){.hx-pp{flex-basis:160px;margin-left:-30px}}
@media (max-width:700px){
  .hx-papers{padding:8px 0 24px}
  .hx-prow{justify-content:flex-start;overflow-x:auto;padding:12px 20px 48px;scroll-snap-type:x mandatory}
  .hx-pp{flex-basis:150px;margin-left:12px;scroll-snap-align:center;transform:none}
  .hx-pp:hover,.hx-pp:focus-visible{transform:none}
  .hx-ppl{opacity:1;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){.hx-pp{transition:none}}

/* an article's cover is its own link card (build/og_thumbs.py) */
.pf-cov-card{display:block;width:100%;height:100%;background:#f7f9fc}
.pf-cov-card img{display:block;width:100%;height:100%;object-fit:contain}
.bt-shot .pf-cov-card{position:absolute;inset:0}
/* =========================================================
   Logo motion. The mark is drawn from geometry (build/logo.py) so the dots travel the orbit
   with their cut-outs and every motion ends on the exact static logo.
   Load: .ld-orbit | .ld-named | .ld-gather, playing while .go is set (script removes it after).
   Hover (on the parent .logo): .hv-ping | .hv-lap | .hv-nudge | .hv-comet | .hv-tilt | .hv-look (pointer, praised.js).
   ========================================================= */
.pm .pm-or{fill:none;stroke:currentColor;stroke-width:3.4}
.pm .pm-ir{fill:none;stroke:currentColor;stroke-width:2.4}
.pm .dt{fill:#f5a524}
.pm .pm-a,.pm .pm-n,.pm .pm-ir{transform-box:view-box;transform-origin:24px 24px}
.pm .dt,.pm .pm-ping{transform-box:fill-box;transform-origin:center}
.pm .pm-ping{fill:none;stroke:#f5a524;stroke-width:1.5;stroke-linecap:round;stroke-dasharray:0 2.5;opacity:0}
.pm .pm-p{fill:#f5a524;opacity:0}
@keyframes pm-fade{from{opacity:0}}
@keyframes pm-pop{from{transform:scale(0)}}
@keyframes pm-in{from{opacity:0;transform:scale(.55)}}
@keyframes pm-draw{from{stroke-dashoffset:106.82}to{stroke-dashoffset:0}}
@keyframes pm-orb{from{transform:rotate(-360deg)}to{transform:rotate(0)}}
@keyframes pm-drop{from{opacity:0;transform:translateY(-7px) scale(.3)}}
@keyframes pm-gath{0%{opacity:0;transform:translate(var(--x),var(--y))}35%{opacity:1}100%{opacity:0;transform:translate(0,0)}}
@keyframes pm-lap{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes pm-ping{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
@keyframes pm-beat{0%,100%{transform:scale(1)}35%{transform:scale(.84)}}

/* Load · Orbit in: the amber dot draws the orbit, the competitor joins, the answer (inner ring) settles */
.pm.ld-orbit.go .pm-or{stroke-dasharray:106.82;animation:pm-draw 1.15s cubic-bezier(.65,0,.35,1) both}
.pm.ld-orbit.go .pm-a{animation:pm-orb 1.15s cubic-bezier(.65,0,.35,1) both}
.pm.ld-orbit.go .dt{animation:pm-pop .3s cubic-bezier(.34,1.56,.64,1) both}
.pm.ld-orbit.go .pm-n{animation:pm-orb 1.15s cubic-bezier(.65,0,.35,1) both,pm-fade .3s .6s both}
.pm.ld-orbit.go .pm-ir{animation:pm-in .55s .55s cubic-bezier(.34,1.56,.64,1) both}

/* Load · Named: the answer appears, then the brand drops into it */
.pm.ld-named.go .pm-or{animation:pm-fade .4s both}
.pm.ld-named.go .pm-ir{animation:pm-in .5s .08s cubic-bezier(.22,1,.36,1) both}
.pm.ld-named.go .pm-n{animation:pm-fade .3s .25s both}
.pm.ld-named.go .pm-a{animation:pm-fade .01s .5s both}
.pm.ld-named.go .dt{animation:pm-drop .6s .5s cubic-bezier(.34,1.56,.64,1) both}

/* Load · Gather: halftone dots converge and become the brand */
.pm.ld-gather.go .pm-or,.pm.ld-gather.go .pm-ir{animation:pm-fade .5s both}
.pm.ld-gather.go .pm-n{animation:pm-fade .3s .2s both}
.pm.ld-gather.go .pm-p{animation:pm-gath .75s var(--d) cubic-bezier(.2,.7,.2,1) both}
.pm.ld-gather.go .pm-a{animation:pm-fade .01s .72s both}
.pm.ld-gather.go .dt{animation:pm-pop .45s .72s cubic-bezier(.34,1.56,.64,1) both}

/* Hover · Halftone ping: the brand sends out a halftone pulse (pairs with the Halftone button) */
.logo:hover .pm.hv-ping:not(.go) .pm-ping,.logo:focus-visible .pm.hv-ping:not(.go) .pm-ping{animation:pm-ping .9s cubic-bezier(.2,.7,.2,1)}
.logo:hover .pm.hv-ping:not(.go) .pm-ping.b,.logo:focus-visible .pm.hv-ping:not(.go) .pm-ping.b{animation-delay:.18s;animation-fill-mode:backwards}
.logo:hover .pm.hv-ping:not(.go) .dt,.logo:focus-visible .pm.hv-ping:not(.go) .dt{animation:pm-beat .5s cubic-bezier(.34,1.56,.64,1)}
/* Hover · One lap: the brand runs one lap of the orbit, its cut-out travelling with it */
.logo:hover .pm.hv-lap:not(.go) .pm-a,.logo:focus-visible .pm.hv-lap:not(.go) .pm-a{animation:pm-lap .95s cubic-bezier(.65,0,.35,1)}
/* Hover · Nudge: the pair glides a little way round the orbit and back */
.pm.hv-nudge:not(.go) .pm-a,.pm.hv-nudge:not(.go) .pm-n{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.logo:hover .pm.hv-nudge:not(.go) .pm-a,.logo:hover .pm.hv-nudge:not(.go) .pm-n,.logo:focus-visible .pm.hv-nudge:not(.go) .pm-a,.logo:focus-visible .pm.hv-nudge:not(.go) .pm-n{transform:rotate(38deg)}

.logo svg.pm .dt{transform-box:fill-box;transform-origin:center;transition:none}
.logo:hover svg.pm .dt{transform:none}
@media (prefers-reduced-motion:reduce){.pm *{animation:none!important;transition:none!important}}

/* Hover · Comet: one lap of the orbit with a halftone trail behind the dot */
.pm .pm-tail{fill:none;stroke:#f5a524;stroke-width:1.9;stroke-linecap:round;stroke-dasharray:0 2.7;opacity:0}
@keyframes pm-tail{0%{opacity:0}18%{opacity:.95}70%{opacity:.6}100%{opacity:0}}
.logo:hover .pm.hv-comet:not(.go) .pm-a,.logo:focus-visible .pm.hv-comet:not(.go) .pm-a{animation:pm-lap 1.1s cubic-bezier(.55,0,.3,1)}
.logo:hover .pm.hv-comet:not(.go) .pm-tail,.logo:focus-visible .pm.hv-comet:not(.go) .pm-tail{animation:pm-tail 1.1s ease-out}
/* Hover · Tilt: the orbit tips like a planet ring, then settles */
@keyframes pm-tilt{0%{transform:perspective(70px) rotateX(0) rotateY(0)}38%{transform:perspective(70px) rotateX(34deg) rotateY(-22deg)}70%{transform:perspective(70px) rotateX(-8deg) rotateY(6deg)}100%{transform:perspective(70px) rotateX(0) rotateY(0)}}
.logo:hover .pm.hv-tilt:not(.go),.logo:focus-visible .pm.hv-tilt:not(.go){animation:pm-tilt .95s cubic-bezier(.3,.7,.2,1)}
/* Hover · Follow: the amber dot slides round toward the pointer (angle set by praised.js) */
.pm.hv-look:not(.go) .pm-a{transform:rotate(var(--look,0deg));transition:transform .5s cubic-bezier(.22,1,.36,1)}

/* ---------- extra.py: Why AI visibility, Why Praised, Research & benchmarks (W1 step 2). Classes prefixed x-. ---------- */
/* Why AI visibility hero: an AI answer, read three ways (recommended, named, cited) */
.xa{display:grid;gap:18px;padding:0 40px}
.xa-q{justify-self:end;max-width:640px;margin:0;display:grid;gap:8px;background:var(--ink);color:#fff;border-radius:24px 24px 6px 24px;padding:20px 26px;font-size:19px;line-height:1.45;font-weight:500;box-shadow:var(--sh-2);animation:hxin .6s var(--ease) both}
.xa-who{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--dot)}
.xa-who .ico{width:16px;height:16px}
.xa-a{background:#fff;border:1px solid rgba(10,16,34,.1);border-radius:24px 24px 24px 6px;box-shadow:var(--sh-3);padding:22px 26px 14px;max-width:760px;animation:hxin .6s .2s var(--ease) both}
.xa-h{margin:0 0 8px;display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.01em}
.xa-h .ico{width:18px;height:18px}
.xa-a ul{display:grid}
.xa-r{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-top:1px solid var(--line);animation:hxin .55s var(--ease) both;animation-delay:calc(.45s + var(--k) * .14s)}
.xa-r:first-child{border-top:0}
.xa-n{font-weight:600;font-size:16.5px}
.xa-cit .xa-n{font-weight:500;color:var(--muted)}
.xa-t{flex:none;font-size:13px;font-weight:700;border-radius:var(--r-pill);padding:6px 12px;border:1px solid var(--line2);color:var(--ink)}
.xa-rec .xa-t{background:var(--ink);border-color:var(--ink);color:#fff}
.xa-nam .xa-t{background:var(--glow);border-color:#f3d39c;color:#6a4a0c}
.xa-cit .xa-t{background:var(--tint)}
@media (max-width:640px){.xa-q{font-size:16.5px;padding:16px 18px}.xa-a{padding:18px 18px 10px}.xa-r{flex-wrap:wrap;gap:8px}.xa-n{font-size:15px}}

/* Why Praised hero: one opportunity, from finding to result, as one row */
.xc{border-radius:24px;background:#fff;border:1px solid rgba(10,16,34,.1);box-shadow:var(--sh-3);overflow:hidden}
.xc-bar{margin:0;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 26px;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}
.xc-ws{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--ink)}
.xc-ws i{font-style:normal;width:22px;height:22px;border-radius:7px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800}
.xc-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));counter-reset:none}
.xc-c{position:relative;padding:24px 26px 26px;display:grid;align-content:start;gap:8px;animation:hxin .6s var(--ease) both;animation-delay:calc(.25s + var(--k) * .12s)}
.xc-c+.xc-c{border-left:1px solid var(--line)}
.xc-c+.xc-c::before{content:"";position:absolute;left:-7px;top:34px;width:12px;height:12px;border-radius:50%;background:var(--dot);box-shadow:0 0 0 4px #fff}
.xc-k{margin:0;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.xc-k .ico{width:16px;height:16px}
.xc-c b{font-family:var(--display);font-weight:800;font-size:20px;letter-spacing:-.02em;line-height:1.2}
.xc-c span{justify-self:start;font-size:13.5px;font-weight:600;line-height:1.35;background:var(--tint);border:1px solid var(--line);border-radius:8px;padding:7px 10px;font-variant-numeric:tabular-nums}
.xc-c:last-child span{background:var(--glow);border-color:#f3d39c;color:#6a4a0c}
@media (max-width:900px){.xc-row{grid-template-columns:repeat(2,minmax(0,1fr))}.xc-c:nth-child(3){border-left:0}.xc-c:nth-child(n+3){border-top:1px solid var(--line)}.xc-c:nth-child(3)::before{display:none}}
@media (max-width:560px){.xc-row{grid-template-columns:1fr}.xc-c+.xc-c{border-left:0;border-top:1px solid var(--line)}.xc-c+.xc-c::before{left:26px;top:-7px}}

/* Research & benchmarks: the published collection */
.xr .sw{margin-bottom:28px}
.xr-m{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.xr-m span{font-size:12.5px;font-weight:600;color:var(--ink-70);background:var(--tint);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 10px}
.xr-method{margin:28px 0 0}
.xr-rep-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.xr-rep-g h2{font-family:var(--display);font-weight:800;font-size:clamp(30px,3.4vw,44px);letter-spacing:-.025em;line-height:1.08}
.xr-none{margin:22px 0 0;display:flex;gap:12px;align-items:flex-start;padding:18px 20px;border-radius:16px;background:var(--tint);border:1px solid var(--line);font-weight:600;line-height:1.5}
.xr-none .ico{width:20px;height:20px;margin-top:2px}
.xr-links{margin:18px 0 0;display:flex;gap:24px;flex-wrap:wrap}
@media (max-width:900px){.xr-rep-g{grid-template-columns:1fr;gap:20px}}
/* The ribbon (sol.py stage_ribbon) had not been used on a page before: its sticky grid sized to the track's max-content
   width, so on phones the words ran off the screen. One column that can shrink fixes it at every width. */
.rb-st{grid-template-columns:minmax(0,1fr)}
@media (max-width:640px){.xa{padding:0}}

/* a screen much narrower than its stage: centred on the dot wave (build/templates.py center_narrow; owner, 14 Oct 2026) */
@media (min-width:761px){
  .tile.tile-n .crop{padding-left:0!important;padding-right:0!important;display:flex!important;justify-content:center!important;width:100%!important;-webkit-mask:linear-gradient(180deg,#000 74%,transparent);mask:linear-gradient(180deg,#000 74%,transparent)}
  .tile.tile-n .crop img{border-radius:14px;box-shadow:0 1px 0 rgba(10,16,34,.05),0 34px 70px -34px rgba(10,16,34,.45),0 10px 24px -16px rgba(10,16,34,.22)}
  .tile-wave{position:absolute;left:-4%;right:-4%;bottom:-4%;height:78%;opacity:.9;z-index:-1;pointer-events:none;-webkit-mask:linear-gradient(180deg,transparent,#000 45%);mask:linear-gradient(180deg,transparent,#000 45%)}
  .tile-wave canvas{position:absolute;inset:0;width:100%;height:100%}
}
@media (max-width:760px){.tile-wave{display:none!important}}

/* the example result under a free tool's empty inputs (owner, 14 Oct 2026) */
.tool-sample{display:inline-flex;align-items:center;margin:6px 0 10px;padding:5px 12px;border-radius:var(--r-pill);background:#fff4e0;color:#8a4f00;font:600 12.5px/1 var(--body);letter-spacing:.02em}
[data-live] .tool-sample{display:none}

/* phones: the halftone edge around a screen crowds into a dotted border at the narrow padding (owner, 14 Oct 2026) */
@media (max-width:760px){canvas.ht{display:none!important}}

/* the integrations directory: a vendor's real mark where one is stored (build/directory.py MARK) */
.pf-mh.pf-mk img,.pf-mh.pf-mk svg{display:block;width:20px;height:20px;object-fit:contain}
.pf-mh.pf-mk svg{position:static;color:#0a1022}
/* the hand-drawn tile style (.pf-mh svg path: white fill, ink stroke) must not reach a real mark: it drew Claude and ChatGPT as outlines */
.pf-mh.pf-mk svg path{fill:currentColor;stroke:none}
.pf-mh.pf-e-claude svg{color:#d97757}

/* R-STORY-SIZE (owner, 16 Oct 2026): a workflow story's box keeps one size across its steps, the tallest step's.
   Unpinned (flat), every view and caption shares one grid cell and the hidden ones keep their space; a shorter screen
   sits centred in the box. Phones (.swipe, mobile.css) keep their own swipe layout. */
.story.flat .st-views{display:grid}
.story.flat .st-v{grid-area:1/1}
.story.flat .st-v:not(.on){display:block;visibility:hidden}
.story.flat.tiles2 .st-v .tile{height:100%;display:flex;align-items:safe center}
/* pinned: a shorter screen sits centred in the held box; a taller one stays anchored at the top and bleeds (safe) */
.story.tiles2.bleed:not(.flat) .st-v .tile{display:flex;align-items:safe center}
.story.flat .st-caps{display:grid}
.story.flat .st-c{grid-area:1/1}
.story.flat .st-c:not(.on){display:flex;visibility:hidden}

/* ---------- live.js: a real run of a free tool, the panel under its window (W1 step 6). Classes prefixed lt-. ---------- */
.lt{max-width:1120px;margin:28px auto 0;padding:34px 44px 38px;background:#fff;border:1px solid rgba(10,16,34,.1);border-radius:24px;box-shadow:var(--sh-2);text-align:left;display:grid;gap:28px}
.lt[hidden]{display:none}
.lt-k{margin:0 0 10px;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.lt-fine{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.lt-err{margin:0;padding:16px 20px;border-radius:14px;background:var(--glow);border:1px solid #f3d39c;color:#6a4a0c;font-weight:600;line-height:1.5}
.lt-g{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:44px;align-items:start}
.lt-f{list-style:none;margin:0;padding:0;display:grid;gap:0}
.lt-f li{padding:16px 0;border-top:1px solid var(--line);display:grid;gap:6px}
.lt-f li:first-child{border-top:0;padding-top:4px}
.lt-f b{font-weight:700;font-size:16px;line-height:1.35}
.lt-f p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-70)}
.lt-fix{display:flex;gap:10px;align-items:baseline}
.lt-fix span{flex:none;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--tint);border:1px solid var(--line);border-radius:6px;padding:2px 7px;color:var(--ink)}
.lt-sev{justify-self:start;font-size:12px;font-weight:700;text-transform:capitalize;border-radius:var(--r-pill);padding:3px 10px;background:var(--tint);border:1px solid var(--line2);color:var(--ink)}
.lt-sev.critical{background:#fde8e6;border-color:#f3bdb7;color:#8f2418}
.lt-sev.important{background:var(--glow);border-color:#f3d39c;color:#6a4a0c}
.lt-lock{margin-top:18px;padding:18px 20px;border-radius:16px;background:var(--tint);border:1px solid var(--line)}
.lt-lock p{margin:0 0 10px}
.lt-lock ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.lt-lock li{display:flex;gap:10px;align-items:center;font-size:14.5px;color:var(--ink-70);filter:blur(.2px)}
.lt-sh{display:flex;gap:8px}
.lt-sh input{flex:1;min-width:0;font:500 14px/1 var(--body);padding:11px 14px;border:1px solid var(--line2);border-radius:var(--r-pill);background:var(--tint);color:var(--ink)}
.lt-copy{border:1px solid var(--line2);background:#fff;color:var(--ink)}
.lt-next{display:flex;justify-content:space-between;align-items:center;gap:28px;padding-top:26px;border-top:1px solid var(--line)}
.lt-next p{margin:0;max-width:560px;line-height:1.5;color:var(--ink-70)}
.lt-next .lt-k{color:var(--ink)}
.lt-view{display:grid;gap:18px}
.lt-view[hidden]{display:none}
.lt-head{display:flex;gap:22px;align-items:center}
.lt-head .ck-t{margin:0}
.lt-head .ck-s{margin:6px 0 0}
.lt-score{flex:none;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:30px;border:6px solid var(--line2)}
.lt-score.ok{border-color:#1f9d63}.lt-score.warn{border-color:var(--dot)}.lt-score.bad{border-color:#d9483b}
.lt-verdict{flex:none;width:22px;height:22px;border-radius:50%;background:var(--line2);box-shadow:0 0 0 6px var(--tint)}
.lt-verdict.ok{background:#1f9d63}.lt-verdict.bad{background:#d9483b}
.lt-bots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 44px}
.lt-bg ul{list-style:none;margin:12px 0 0;padding:0}
.lt-bg li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;padding:10px 0;border-top:1px solid var(--line);align-items:center}
.lt-bn b{display:block;font-size:15px}.lt-bn small{color:var(--muted);font-size:13px}
.lt-v{font-size:12.5px;font-weight:700;border-radius:var(--r-pill);padding:3px 10px;background:#e6f5ee;color:#0e6b49}
.lt-v.disallowed,.lt-v.edge-blocked{background:#fde8e6;color:#8f2418}
.lt-ev{grid-column:1/-1;color:var(--muted);font-size:13px;line-height:1.45}
.lt-c{list-style:none;margin:0;padding:0;counter-reset:c}
.lt-c li{counter-increment:c;display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-weight:600}
.lt-c li::before{content:counter(c);width:26px;height:26px;border-radius:50%;background:var(--tint);border:1px solid var(--line);display:grid;place-items:center;font-size:12.5px;flex:none}
.lt-c li.you{color:var(--ink)}.lt-c li.you b{margin-left:auto;font-size:12.5px;background:var(--glow);border:1px solid #f3d39c;border-radius:var(--r-pill);padding:3px 10px;color:#6a4a0c}
.lt-ans p:last-child{margin:0;padding:18px 20px;border-radius:16px;background:var(--tint);border:1px solid var(--line);line-height:1.6;white-space:pre-line}
@media (max-width:900px){.lt{padding:24px 20px 28px;border-radius:20px}.lt-g,.lt-bots{grid-template-columns:minmax(0,1fr);gap:28px}.lt-next{flex-direction:column;align-items:stretch}.lt-head{align-items:flex-start}}

/* ---------- the website checker's live result (checker RUBRIC_VERSION 2026-10-14) ---------- */
/* Once a real result is on screen, the example around it steps aside: the "Try" presets and the worked-example
   findings section, which read as part of the result when they sat under it. */
body.ck-live .ck-try,body.ck-live section.fd,body.ck-live .ck-ex{display:none}
.ck-ex{display:inline-block;margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#6a4a0c;background:var(--glow);border:1px solid #f3d39c;border-radius:var(--r-pill);padding:3px 10px}
[data-live] .ck-ex{display:none}
.ck-rbar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 26px;padding:0 0 18px;border-bottom:1px solid var(--line)}
.ck-rbar p{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font-size:15px}
.ck-rbar b{font-size:16px;word-break:break-all}
.ck-rk{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#0e6b49;background:#e6f5ee;border-radius:var(--r-pill);padding:3px 10px;align-self:center}
.ck-rd{color:var(--muted);font-size:13.5px}
.ck-again{display:inline-flex;align-items:center;gap:6px;font:600 14px/1 var(--body);color:var(--ink);background:none;border:1px solid var(--line2);border-radius:var(--r-pill);padding:9px 14px;cursor:pointer}
.ck-again:hover{background:var(--tint)}
.ck-again .ico{transform:rotate(-90deg)}
body.ck-live .ck-z{display:block}
.ck-z b{color:var(--ink)}
/* Can AI reach this page? pass or fail, apart from the score */
.lt-reach{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:10px 44px;padding:0 0 26px;border-bottom:1px solid var(--line)}
.lt-rh .lt-k{color:var(--ink)}
.lt-rv{margin:0;font-size:15px;line-height:1.5;color:var(--ink-70)}
.lt-reach.has-no .lt-rv{color:#8f2418;font-weight:600}
.lt-rl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}
.lt-rl li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:2px 10px;align-items:baseline}
.lt-rl i{width:18px;height:18px;border-radius:50%;align-self:start;margin-top:1px;background:#1f9d63 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat}
.lt-rl li.no i{background:#d9483b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E") center/11px no-repeat}
.lt-rl b{font-size:15px;font-weight:600}
.lt-rl small{grid-column:2;font-size:13.5px;line-height:1.45;color:var(--muted)}
.lt-bc{grid-column:2;list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.lt-bc li{font-size:12.5px;font-weight:600;border-radius:var(--r-pill);padding:3px 10px;background:var(--tint);border:1px solid var(--line);color:var(--muted)}
.lt-bc li.ok{background:#e6f5ee;border-color:#bfe5d2;color:#0e6b49}
.lt-bc li.no{background:#fde8e6;border-color:#f3bdb7;color:#8f2418}
/* paste-ready code under a finding */
.lt-paste{margin-top:8px;border:1px solid var(--line2);border-radius:14px;overflow:hidden;background:#0d1326}
.lt-ph{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 8px 8px 14px;background:#151c33;color:#c9d1e6;font-size:12.5px;font-weight:600}
.lt-ph .lt-copy{padding:7px 12px;font-size:13px;background:#fff;border-color:#fff}
.lt-paste pre{margin:0;padding:14px 16px;max-height:260px;overflow:auto;font:500 12.5px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#e6ebf7;white-space:pre-wrap;word-break:break-word}
.lt-paste .lt-fine{margin:0;padding:10px 14px;background:#fff;border-top:1px solid var(--line2)}
.lt-tips{margin-top:22px}
.lt-tips ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lt-tips li{display:grid;gap:2px;font-size:14px;line-height:1.5;color:var(--muted)}
.lt-tips b{color:var(--ink);font-weight:600}
/* the waitlist, joined in the result */
.lt-join{align-items:flex-start}
.lt-jf{flex:none;width:min(420px,100%)}
.wl-row{display:flex;gap:8px}
.wl-row input{flex:1;min-width:0;font:500 15px/1 var(--body);padding:13px 16px;border:1px solid var(--line2);border-radius:var(--r-pill);background:#fff;color:var(--ink)}
.wl-row input:focus{outline:2px solid var(--ink);outline-offset:1px}
.wl-msg{margin:8px 0 0;min-height:1em;font-size:13.5px;color:#8f2418}
.wl-done{margin:0;padding:14px 16px;border-radius:14px;background:#e6f5ee;color:#0e6b49;line-height:1.5}
.wl-done[hidden]{display:none}
@media (max-width:900px){.lt-reach{grid-template-columns:minmax(0,1fr)}.lt-rl{grid-template-columns:minmax(0,1fr)}.lt-bc{grid-column:1/-1}.lt-jf{width:100%}.wl-row{flex-direction:column}}
/* the hero window's sample-data tag (common.HERO_SHOT): example data says so, quietly, in the title bar */
.app-top .app-sample{margin-left:auto;padding:3px 9px;border-radius:999px;background:#fff4e0;color:#8a5a00;font-size:12px;font-weight:600;white-space:nowrap}
@media (max-width:560px){.app-shot .win{display:none}.app-shot .crumbs .ws{white-space:nowrap}}
/* the full-app hero (common.HERO_SHOT, owner 15 Oct 2026): the 1440px board at its real size, never scaled; on
   screens narrower than the board it runs off the window's right edge and dissolves there, the menu always in view */
.panel-wrap .app.app-full{max-width:1442px;max-height:none;-webkit-mask-image:none;mask-image:none;border-bottom-color:var(--line)}
.panel-wrap .app-full .app-top{padding:9px 14px}
.panel-wrap .app-full picture{display:block;overflow:hidden}
.panel-wrap .app-full img{display:block;width:1440px;max-width:none;height:auto}
@media (max-width:1520px) and (min-width:761px){.panel-wrap .app-full picture{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 120px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 120px),transparent)}}
/* phones (owner 15 Oct: "squeezed more to be smaller"): a narrow phone-sized window, centred; the 2x capture stays sharp at this size */
@media (max-width:760px){.panel-wrap .app.app-full{max-width:300px;-webkit-mask-image:linear-gradient(#000 calc(100% - 160px),transparent);mask-image:linear-gradient(#000 calc(100% - 160px),transparent);border-bottom-color:transparent}.panel-wrap .app-full img{width:100%}.panel-wrap .app-full .app-top{padding:7px 10px}.app-full .app-sample{font-size:12px;padding:2px 8px}}

/* ===== Cards, owner corrections 2026-10-10 (loads last) =====
   1. Cards are plain cool grey, not amber or lavender tints.
   2. No dot grid in the page body: the halftone corner of every tile goes (the canvases are stripped in build.py's
      finish()); the hero's own field stays.
   3. Every card that is a link answers the pointer and the keyboard: it lifts, its edge darkens, its arrow moves. */
:root{--card:#f3f5f8;--card-line:rgba(10,16,34,.07);--card-line-h:rgba(10,16,34,.24)}

.tile{background:var(--card)}
.tile::before{content:none}
.pf-rg .pf-rt,.pf-rg .pf-rt:nth-child(n){background:var(--card);border-color:var(--card-line)}
.pf-cov-tint,.pf-cov-glow{background:var(--card)}

.tile:has(> a[href]),.hx-feat:has(a[href]),.pv .mk-card-lift,.pv a.mk-card{
  transition:translate .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.tile:has(> a[href]):hover,.tile:has(> a[href]:focus-visible),
.hx-feat:has(a[href]):hover,.hx-feat:has(a[href]:focus-visible),
.pv .mk-card-lift:hover,.pv a.mk-card:hover{
  translate:0 -4px;border-color:var(--card-line-h);box-shadow:0 26px 50px -30px rgba(10,16,34,.38)}
.tile > a[href]:focus-visible,.hx-feat a[href]:focus-visible{outline:none}
.tile:has(> a[href]:focus-visible),.hx-feat:has(a[href]:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
.tile:has(> a[href]) .arr,.hx-feat .arr,.pv .mk-card-lift .mk-arrow{transition:transform .3s var(--ease)}
.tile:has(> a[href]):hover .arr,.tile:has(> a[href]:focus-visible) .arr,.hx-feat:hover .arr,
.pv .mk-card-lift:hover .mk-arrow{transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){
  .tile:has(> a[href]):hover,.tile:has(> a[href]:focus-visible),.hx-feat:has(a[href]):hover,
  .pv .mk-card-lift:hover,.pv a.mk-card:hover{translate:none}
  .tile:has(> a[href]):hover .arr,.hx-feat:hover .arr,.pv .mk-card-lift:hover .mk-arrow{transform:none}}

/* Owner, 2026-10-10 (second pass): "get rid of all colors in the cards, use grey only"; then "grey or white, whichever
   more suitable ... this is about the cards, not the screenshots". Card surfaces and the panel a card's picture sits on are
   grey or white; the screenshots and mock-ups inside keep their own colours. A card palette may come later. */
:is(.tile,.sb) .bt-shot{background:transparent!important}
/* a card that is a link carries no dotted link underline along its bottom edge */
:is(.mb-art,.tp-body,.pv) a:is(.mk-card,.mk-card-lift){background-image:none}

/* ===== Mobile pass, founder review 11 October 2026 (shared by the home page and every built page) =====
   R-TRIM: one copy in the HTML; the parts marked .desk drop at phone width. Crawlers and Google read the full text.
   R-FIELD-LINE: a text input is a light underline, and its button stands on its own beside or below it.
   R-MNAV: the phone menu carries the desktop menu's icons, descriptions and groups.
   R-TOTOP: every page has a back-to-top button once the reader is a screen down. */

@media (max-width:760px){ .desk{display:none!important} }

/* ---- R-FIELD-LINE ---- */
/* Each input is a white strip with a light underline (white keeps it readable where it sits over the wave);
   the button stands apart from it. */
form .field,.field.ck-field,.tw-open .field.ck-field{background:none;border:0;box-shadow:none;border-radius:0;min-height:0;padding:0;gap:14px 16px;align-items:center;position:relative;flex-wrap:nowrap}
form .field:focus-within,form .field.err{box-shadow:none}
.field>.ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);margin:0;width:18px;height:18px;color:var(--muted);pointer-events:none;z-index:1}
.field>input,.field .ao-dom{background:var(--frame);border-radius:12px 12px 0 0;border-bottom:1.5px solid var(--line3,rgba(10,16,34,.18));transition:border-color .2s,background .2s}
.field>input{flex:1 1 auto;min-width:0;padding:15px 12px 14px 42px;font-size:17px}
.field .ao-dom{flex:0 0 220px;margin:0;padding:0 12px;border-left:0;gap:8px}
.field .ao-dom input{padding:15px 0 14px}
.field .ao-loc{flex:0 0 172px}
@media (min-width:761px){.tw-open .ck-form:has(.ao-dom){max-width:1060px}.field>input:has(~ .ao-dom){flex-basis:260px}}
.field>input:focus,.field .ao-dom:focus-within{border-bottom-color:var(--ink)}
.field.err>input{border-bottom-color:var(--dot)}
.field>.btn{flex:none;padding:15px 24px}
@media (max-width:760px){
  form .field,.field.ck-field,.tw-open .field.ck-field{flex-wrap:wrap;gap:10px}
  .field>.ico{top:26px}
  .field>input,.field .ao-dom{flex:1 1 100%}
  .field>.btn{flex:1 1 100%;margin-top:8px;padding:16px}
}

/* ---- R-MNAV ---- */
.mnav{padding:6px 8px 0}
.mnav summary{font-size:19px;padding:16px 12px}
.mnav details[open]>summary{padding-bottom:8px}
.mnav .mgrp{padding:0 0 14px}
.mnav details[open] .mgrp{animation:mnIn .32s var(--ease) both}
@keyframes mnIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mnav .mgrp h4{font-family:var(--body);font-weight:600;font-size:12.5px;color:var(--muted);padding:12px 12px 4px;margin:0}
.mnav .mgrp a.mi{display:flex;justify-content:flex-start;align-items:center;gap:12px;padding:8px 10px;border-radius:14px}
.mnav .mi .mi-i{width:36px;height:36px;border-radius:11px;background:var(--tint);color:var(--ink);display:grid;place-items:center;flex:none}
.mnav .mi .ico{width:18px;height:18px}
.mnav .mi b{display:block;font-size:15px;font-weight:600;line-height:1.25}
.mnav .mgrp a.mi small{display:block;text-align:left;font-size:13px;color:var(--muted);line-height:1.35;margin-top:1px}
.mnav .mi:active .mi-i,.mnav .mi:hover .mi-i{background:var(--ink);color:var(--glow)}
.mnav .m-more{display:flex;flex-wrap:wrap;gap:6px 18px;margin:6px 10px 0;padding:12px 2px 2px;border-top:1px solid var(--line)}
.mnav .mgrp .m-more a{display:inline-flex;align-items:center;gap:7px;padding:4px 0;font-size:14px;font-weight:600;color:var(--ink);justify-content:flex-start}
.mnav .m-more a .ico{width:16px;height:16px;color:var(--muted)}
.mnav .m-more a.all .ico{order:2;color:var(--ink)}
.mnav .mlink{display:flex;align-items:center;justify-content:space-between;font-size:19px;padding:16px 12px}
.mnav .mlink .ico{width:16px;height:16px;transform:rotate(-90deg);color:var(--muted)}
.mnav .macts{position:sticky;bottom:0;background:var(--frame);margin:0 -8px;padding:12px 10px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.mnav .macts{grid-template-columns:auto minmax(0,1fr)}
.mnav .macts .btn{white-space:nowrap;padding-inline:20px;justify-content:center}
html.menu-open{overflow:hidden}
/* body has overflow-x:hidden; once html is hidden that stops passing to the page and makes body a scroll box, which
   drops the sticky header off screen. clip keeps the clipping without making a scroll box. */
html.menu-open body{overflow:clip}

/* ---- R-TOTOP ---- */
.totop{position:fixed;z-index:40;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:46px;height:46px;border-radius:50%;border:0;background:var(--ink);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 30px -12px rgba(10,16,34,.55),0 0 0 1px rgba(255,255,255,.08);opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .3s,transform .35s var(--ease),background .2s}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop .ico{width:19px;height:19px;transform:rotate(-90deg);transition:transform .3s var(--ease)}
.totop:hover .ico{transform:rotate(-90deg) translateX(2px)}
.totop:focus-visible{outline:3px solid var(--dot);outline-offset:3px}
html.menu-open .totop{opacity:0;pointer-events:none}
@media (min-width:761px){.totop{width:52px;height:52px;right:28px;bottom:28px}}

/* ---- R-SWIPE on every page: the workflow story is a swipe row on phones, each step its own screen and words ---- */
@media (max-width:760px){
  .story.swipe .st-steps{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--gut));padding:2px var(--gut) 4px;gap:6px}
  .story.swipe .st-steps::-webkit-scrollbar{display:none}
  .story.swipe .st-b{white-space:nowrap}
  .story.swipe .st-bar,.story.swipe .st-soft,.story.swipe .st-caps{display:none}
  .story.swipe .st-stage{padding:0;background:none;height:auto;min-height:0;box-shadow:none;border:0}
  .story.swipe .st-views{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:14px calc(-1 * var(--gut)) 0;padding:4px var(--gut) 8px;height:auto}
  .story.swipe .st-views::-webkit-scrollbar{display:none}
  .story.swipe .st-v{display:block!important;position:relative;inset:auto;flex:0 0 86%;scroll-snap-align:center;opacity:1!important;transform:none!important;filter:none!important;visibility:visible!important}
  .story.swipe .st-v .tile{position:relative;height:270px!important;max-height:none!important;overflow:hidden;border-radius:20px;background:var(--tint);display:block}
  .story.swipe .st-v .tile .crop{display:block;padding:18px 0 0 18px!important;height:auto!important;width:auto!important}
  .story.swipe .st-v .tile .crop img{width:var(--w)!important;max-width:none!important;max-height:none!important;border-radius:12px 0 0 0!important;filter:none!important;opacity:1!important;box-shadow:0 14px 34px -22px rgba(10,16,34,.45)}
  /* screens captured with a drawer open: start the phone view at the drawer, not the dimmed page behind it */
  .story.swipe .crop img[src$="shots/i-st2.webp"],.story.swipe .crop img[src$="shots/i-st3.webp"]{margin-left:calc(var(--w) * -.402 - 18px)}
  /* a screen captured at large type: shown at half its width on a phone, in step with the screens beside it (owner, 14 Oct 2026) */
  .story.swipe .st-v .tile .crop img[src$="shots/st1.webp"]{width:600px!important}
  .story.swipe .st-v .tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(rgba(247,249,252,0),var(--tint));pointer-events:none}
  .story.swipe .st-v .st-c{display:flex!important;position:static;opacity:1;transform:none;margin:14px 2px 0;font-size:15px;line-height:1.55}
}

/* ---- R-TRIM for body copy: a long paragraph keeps its first sentence on a phone, the rest opens with More ---- */
.mmore{display:none}
@media (max-width:760px){
  p:not(.open)>.mtrim{display:none}
  .mmore{display:inline;border:0;background:none;padding:0 0 0 6px;margin:0;font:inherit;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line3,rgba(10,16,34,.25));text-underline-offset:3px;cursor:pointer}
}

/* closing band on a phone: the main button full width, the second action under it (its label was cut off side by side) */
@media (max-width:760px){
  .band .cta{flex-direction:column;align-items:stretch;gap:14px}
  .band .cta .btn{flex:none;width:100%;justify-content:center;white-space:nowrap}
  .band .cta .btn.link{align-self:center;width:auto}
}

/* ---- R-SWIPE, general (pricing plans and any [data-mswipe] row) ---- */
.mswipe-tabs[hidden]{display:none}
@media (max-width:760px){
  .mswipe-tabs{display:flex;gap:4px;padding:4px;margin:24px 0 0;border-radius:999px;background:var(--tint);width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
  .mswipe-tabs button{border:0;background:none;font:600 15px/1 var(--body);color:var(--muted);padding:11px 18px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background .25s,color .25s,box-shadow .25s}
  .mswipe-tabs button[aria-selected="true"]{background:var(--frame);color:var(--ink);box-shadow:0 6px 16px -10px rgba(10,16,34,.45)}
  .mswipe{display:flex!important;grid-template-columns:none!important;gap:14px!important;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1 * var(--gut));padding:6px var(--gut) 18px;align-items:stretch}
  .mswipe::-webkit-scrollbar{display:none}
  .mswipe>*{flex:0 0 86%;min-width:0;scroll-snap-align:center;margin:0!important}
}

/* section headings that slide in sideways on desktop rise instead on a phone, at a phone size (R-PHONE-FIT) */
@media (max-width:760px){
  .sed-h{transform:translateY(calc((1 - var(--p,1)) * 24px));font-size:clamp(34px,10vw,44px)}
}
@media (max-width:760px){
  /* text never slides in sideways on a phone; screens may, clipped at their section's edge */
  .vd-l li{transform:none!important}
  main>section,main>header,main>div{overflow-x:clip}
}