/*
Theme Name:   Verintra
Theme URI:    https://verintra.com/
Description:  Verintra's own header, footer and page design, as an Astra child theme. The parent's header and footer markup are swapped out through Astra's own hooks rather than by overriding template files, so a parent update cannot silently break the layout.
Author:       Verintra
Template:     astra
Version:      1.0.0
Text Domain:  verintra-child
*/


/* ===========================================================
   Tokens, lifted from verintra-next/design-system/tokens
   Light is committed deliberately: colors.css names it the
   "marketing-site north star", and the client rejected dark.
   =========================================================== */
:root{
  color-scheme:light;

  --white:#ffffff;
  --light:#F4F7F9;          /* cyan-biased neutral, not a flat grey */
  --hair:#E4E9EE;
  --navy:#0B1C2C;
  --ink:#1C1C1C;
  --muted:#5B6573;
  --turq:#00C2CB;
  --turq-d:#01808A;         /* accessible turquoise for text on white */
  --teal:#01577E;
  --cyan:#3DB3D1;
  --charcoal:#1D1E20;
  --ai:#7C4DEF;

  --gA:#00A651; --gB:#65A30D; --gC:#FF8C00; --gD:#EA580C; --gF:#E74C3C;

  --sans:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  --r:10px; --r-card:16px; --r-slab:34px; --r-pill:9999px;
  --wrap:1280px;

  --sh:0 1px 3px rgba(11,28,44,.08),0 1px 2px -1px rgba(11,28,44,.06);
  --sh-md:0 6px 18px -4px rgba(11,28,44,.12);
  --sh-lg:0 18px 44px -12px rgba(11,28,44,.20);
  --sh-xl:0 34px 80px -22px rgba(11,28,44,.30);
  --glow:0 10px 30px -8px rgba(0,194,203,.5);

  --ease:cubic-bezier(.22,1,.36,1);
  --t1:150ms; --t2:200ms; --t3:300ms;
  --track:-.02em; --track-meta:.12em;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--white);color:var(--ink);
  font-family:var(--sans);font-size:1rem;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
::selection{background:rgba(0,194,203,.24)}


:focus-visible{outline:2.5px solid var(--turq);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}

/* ---------- slab architecture: each section slides under the next ---------- */
.slab{border-radius:var(--r-slab);position:relative;padding:104px 0}
.slab + .slab{margin-top:calc(-1 * var(--r-slab))}   /* slabs slide under each other */
.slab--w{background:var(--white);z-index:2}
.slab--l{background:var(--light);z-index:1}
.slab--tint{background:linear-gradient(172deg,#E9F7F8 0%,#F4F9FA 52%,var(--white) 100%);z-index:1}
.slab--dark{background:var(--charcoal);color:#fff;z-index:3}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:80;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--hair);
  transition:padding var(--t3) var(--ease),box-shadow var(--t3) var(--ease);
}
.hdr.small{box-shadow:var(--sh-md)}
.hrow{display:flex;align-items:center;gap:30px;max-width:var(--wrap);margin:0 auto;
  padding:18px 28px;transition:padding var(--t3) var(--ease)}
.hdr.small .hrow{padding-top:11px;padding-bottom:11px}
.mark{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.125rem;
  letter-spacing:-.025em;color:var(--navy);text-decoration:none}
.mk{width:28px;height:28px;flex:none}
.nav{margin-left:auto;display:flex;gap:28px}
.nav a{color:var(--navy);text-decoration:none;font-size:.9375rem;font-weight:600;opacity:.74;
  position:relative;padding:5px 0;transition:opacity var(--t2) var(--ease)}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--turq);transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--t3) var(--ease)}
.nav a:hover{opacity:1}.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a[aria-current="page"]{opacity:1;color:var(--turq-d)}

/* ---------- type ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:.75rem;font-weight:600;letter-spacing:var(--track-meta);text-transform:uppercase;
  color:var(--turq-d);margin:0 0 22px}
.eyebrow b{width:7px;height:7px;border-radius:2px;background:var(--turq);flex:none}
h1{font-size:clamp(2.1rem,3.9vw,3.35rem);line-height:1.06;letter-spacing:-.032em;
  font-weight:800;margin:0 0 24px;color:var(--navy);text-wrap:balance}
h2{font-size:clamp(1.9rem,4vw,2.95rem);line-height:1.09;letter-spacing:-.032em;
  font-weight:800;margin:0 0 18px;color:var(--navy);text-wrap:balance}
h3{font-size:1.0625rem;line-height:1.38;font-weight:700;margin:0 0 9px;color:var(--navy)}
.lead{font-size:clamp(1.0625rem,1.35vw,1.1875rem);line-height:1.64;color:var(--muted);
  max-width:62ch;margin:0 0 32px}
.slab--dark h2,.slab--dark h3{color:#fff}
.slab--dark .lead{color:rgba(255,255,255,.76)}
.note{font-family:var(--mono);font-size:.8125rem;color:var(--muted)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:var(--r-pill);font-weight:700;font-size:1rem;text-decoration:none;
  padding:16px 30px;border:0;cursor:pointer;font-family:var(--sans);
  text-transform:none;letter-spacing:normal;
  transition:transform var(--t2) var(--ease),box-shadow var(--t2) var(--ease),
             background var(--t2) var(--ease),color var(--t2) var(--ease)}
/* Every state names its own colour. Leaving :hover without one let the theme's
   link-hover colour take over, and #01808A text on a turquoise button reads as
   no text at all. */
.btn--p{background:var(--turq);color:#04222A;box-shadow:var(--glow)}
.btn--p:hover,.btn--p:focus-visible,.btn--p:active{background:var(--turq);color:#04222A;
  transform:translateY(-2px);box-shadow:0 15px 36px -8px rgba(0,194,203,.66)}
.btn--n{background:var(--navy);color:#fff}
.btn--n:hover,.btn--n:focus-visible,.btn--n:active{background:var(--navy);color:#fff;
  transform:translateY(-2px);box-shadow:var(--sh-lg)}
.btn--o{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34)}
.btn--o:hover,.btn--o:focus-visible,.btn--o:active{background:transparent;color:var(--cyan);
  box-shadow:inset 0 0 0 1.5px var(--cyan)}
.btn--sm{padding:11px 21px;font-size:.9375rem}
.cta{display:flex;gap:15px;align-items:center;flex-wrap:wrap}
.tl{color:var(--turq-d);font-weight:600;text-decoration:none;display:inline-flex;gap:7px;
  align-items:center}
.tl i{font-style:normal;transition:transform var(--t2) var(--ease)}
.tl:hover,.tl:focus-visible{color:var(--turq-d)}
.tl:hover i{transform:translateX(5px)}

/* ---------- entrance ---------------------------------------------------------
   Deliberately empty. [data-rv] is only a hook for anime.js, which writes its
   own start values at run time. Putting an opacity or transform start state
   here is what made the page render blank in a background tab, twice. */

/* ---------- hero ---------- */
.hero{padding-top:92px}
.hgrid{display:grid;grid-template-columns:1.04fr .96fr;gap:58px;align-items:center}
.hgrid--wide{grid-template-columns:.86fr 1.14fr;gap:46px}
.hero-shot{will-change:transform}


/* ---------- live product UI (vector sharp, replaces bitmap screenshots) ---------- */
.ui{background:#fff;border:1px solid var(--hair);border-radius:18px;box-shadow:var(--sh-xl);
  overflow:hidden}
.ui-pad{padding:22px 24px}
.ui-card{background:#fff;border:1px solid var(--hair);border-radius:14px;padding:20px 22px}
.ui-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.ui-t{font-size:1.0625rem;font-weight:700;color:var(--navy);margin:0}
.ui-s{font-size:.8125rem;color:var(--muted);margin:3px 0 0}
.ui-link{font-size:.8125rem;font-weight:600;color:var(--turq-d);text-decoration:none;white-space:nowrap}
.ui-bar{display:flex;height:11px;border-radius:6px;overflow:hidden;margin:16px 0 10px}
.ui-legend{display:flex;flex-wrap:nowrap;gap:11px;justify-content:space-between}
.ui-legend span{display:inline-flex;align-items:center;gap:5px;font-size:.71875rem;
  color:var(--muted);white-space:nowrap}
.ui-legend i{width:8px;height:8px;border-radius:50%;flex:none}
.ui-legend b{color:var(--navy);font-weight:600;font-variant-numeric:tabular-nums}
.ui-eye{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.1em;text-transform:uppercase;color:#B4761E;margin:18px 0 12px;font-weight:600}
.ui-fix{margin-bottom:13px}
.ui-fix-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:6px}
.ui-fix-n{font-size:.875rem;font-weight:600;color:var(--navy);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ui-fix-m{font-family:var(--mono);font-size:.75rem;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.ui-track{height:7px;border-radius:4px;background:#EEF2F5;overflow:hidden}
.ui-fill{height:100%;border-radius:4px;
  background:linear-gradient(90deg,var(--turq),#2FA8D8)}
.ui-kpis{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.ui-kpi{background:#fff;border:1px solid var(--hair);border-radius:14px;padding:16px 18px}
.ui-kpi-h{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
  min-height:34px;margin-bottom:6px}
.ui-kpi-l{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.ui-chip{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none}
.ui-kpi-v{font-size:1.75rem;font-weight:800;color:var(--navy);letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums}
.ui-kpi-v small{font-size:.9375rem;font-weight:600;color:var(--muted);letter-spacing:0}
.ui-kpi-f{display:flex;align-items:flex-end;justify-content:space-between;margin-top:10px}
.ui-delta{font-size:.6875rem;color:var(--muted)}
.ui-delta b{display:block;color:#00A651;font-family:var(--mono);font-size:.8125rem}
.ui-spark{display:flex;align-items:flex-end;gap:2px;height:22px}
.ui-spark i{width:4px;border-radius:1px;background:#9EDCE2}
.ui-spark i:last-child{background:var(--turq)}
.ui-foot{font-family:var(--mono);font-size:.6875rem;letter-spacing:var(--track-meta);
  text-transform:uppercase;color:var(--muted);padding:12px 24px;border-top:1px solid var(--hair);
  background:var(--light)}

/* ---------- metric row ---------- */
.mets{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;
  border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--sh-md)}
.met{padding:28px 24px;border-left:1px solid var(--hair)}
.met:first-child{border-left:0}
.met b{display:block;font-size:clamp(1.6rem,2.5vw,2.1rem);font-weight:800;
  letter-spacing:var(--track);color:var(--navy);font-variant-numeric:tabular-nums}
.met > span{display:block;font-size:.875rem;color:var(--muted);margin-top:5px}
.met b .cnt{display:inline}

/* ---------- card grids (Klarna's core device) ---------- */
.grid{display:grid;gap:20px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.card{background:#fff;border:1px solid var(--hair);border-radius:20px;padding:28px 26px;
  transition:transform var(--t3) var(--ease),box-shadow var(--t3) var(--ease),
             border-color var(--t2) var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:#CFDCE4}
.card p{color:var(--muted);margin:0}
/* standalone, not .card .tag: the pill is used outside cards too, and scoping it
   made the score rings' labels render as bare text with no padding or radius */
.tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:.6875rem;letter-spacing:var(--track-meta);text-transform:uppercase;
  padding:5px 10px;border-radius:var(--r-pill)}
.card .tag{margin-bottom:14px}
.tag--t{background:rgba(0,194,203,.13);color:var(--teal)}
.tag--ai{background:rgba(124,77,239,.12);color:#5B31C4}
.tag--g{background:rgba(0,166,81,.12);color:#017A3C}
.tag--c{background:rgba(61,179,209,.16);color:#1D6E86}
.step-n{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:rgba(0,194,203,.12);color:var(--teal);font-family:var(--mono);
  font-weight:700;font-size:.9375rem;margin-bottom:16px}

/* ---------- format deck: stacked, and big enough to hover ---------- */
.deckwrap{display:grid;place-items:start center;min-height:430px;padding:6px 0 24px}
.deck{display:grid;grid-template-areas:'stack';place-items:center}
.dcard{
  grid-area:stack;
  width:min(474px,100%);min-height:150px;
  display:flex;flex-direction:column;justify-content:space-between;gap:10px;
  padding:22px 26px;border-radius:20px;background:#fff;
  border:1px solid var(--hair);box-shadow:var(--sh-md);
  transform:skewY(-7deg) translate(var(--tx),var(--ty));
  filter:grayscale(.9);
  transition:transform var(--t3) var(--ease),filter var(--t3) var(--ease),
             box-shadow var(--t3) var(--ease),border-color var(--t2) var(--ease);
}
/* deck hover: colour returns and the stack fans wider so every card is reachable */
.deck:hover .dcard{filter:none}
.deck:hover .dcard:nth-child(1){transform:skewY(-7deg) translate(var(--tx),calc(var(--ty) - 40px))}
.deck:hover .dcard:nth-child(2){transform:skewY(-7deg) translate(var(--tx),calc(var(--ty) - 18px))}
.deck:hover .dcard:nth-child(3){transform:skewY(-7deg) translate(var(--tx),var(--ty))}
.deck:hover .dcard:nth-child(4){transform:skewY(-7deg) translate(var(--tx),calc(var(--ty) + 18px))}
.deck:hover .dcard:nth-child(5){transform:skewY(-7deg) translate(var(--tx),calc(var(--ty) + 40px))}
/* single card hover wins over the fan */
.dcard:hover{
  z-index:9;filter:none !important;border-color:var(--turq) !important;
  box-shadow:var(--sh-xl),0 0 0 4px rgba(0,194,203,.16) !important;
  transform:skewY(-7deg) translate(var(--tx),calc(var(--ty) - 64px)) !important;
}
.dc-top{display:flex;align-items:center;gap:12px}
.dc-badge{display:grid;place-items:center;width:36px;height:36px;border-radius:11px;
  background:rgba(0,194,203,.12);flex:none}
.dc-badge svg{width:18px;height:18px}
.dc-title{font-size:1.1875rem;font-weight:700;color:var(--navy);letter-spacing:-.015em}
.dc-desc{font-size:.9375rem;color:var(--muted);margin:0}
.dc-meta{font-family:var(--mono);font-size:.75rem;letter-spacing:var(--track-meta);
  text-transform:uppercase;color:var(--muted);opacity:.72;margin:0}

/* ---------- screen tour: one window, three views, built in HTML so it stays sharp ----------
   Tabs are radio inputs, so switching views needs no JS and survives it failing. */
.tin{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
.tabs{display:flex;gap:8px;padding:0 0 15px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tab{display:inline-flex;align-items:center;gap:9px;flex:none;cursor:pointer;
  padding:11px 18px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--hair);
  font-size:.9375rem;font-weight:600;color:var(--muted);
  transition:background var(--t2) var(--ease),color var(--t2) var(--ease),
             border-color var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
.tab:hover{color:var(--navy);border-color:#CFDCE4}
.tab i{width:7px;height:7px;border-radius:50%;background:#CBD5DD;flex:none;
  transition:background var(--t2) var(--ease)}
#scr1:checked ~ .tabs [for=scr1],
#scr2:checked ~ .tabs [for=scr2],
#scr3:checked ~ .tabs [for=scr3]{background:var(--navy);color:#fff;border-color:var(--navy);
  box-shadow:var(--sh-md)}
#scr1:checked ~ .tabs [for=scr1] i,
#scr2:checked ~ .tabs [for=scr2] i,
#scr3:checked ~ .tabs [for=scr3] i{background:var(--turq)}
#scr1:focus-visible ~ .tabs [for=scr1],
#scr2:focus-visible ~ .tabs [for=scr2],
#scr3:focus-visible ~ .tabs [for=scr3]{outline:2.5px solid var(--turq);outline-offset:3px}

.win{background:#fff;border:1px solid var(--hair);border-radius:22px;overflow:hidden;
  box-shadow:var(--sh-xl)}
.win-bar{display:flex;align-items:center;gap:13px;padding:13px 18px;background:var(--light);
  border-bottom:1px solid var(--hair)}
.win-dots{display:flex;gap:6px;flex:none}
.win-dots i{width:10px;height:10px;border-radius:50%;background:#D6DEE5}
.win-url{font-family:var(--mono);font-size:.75rem;color:var(--muted);background:#fff;
  border:1px solid var(--hair);border-radius:var(--r-pill);padding:5px 14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pane{display:none;padding:24px}
#scr1:checked ~ .win .pane--a,
#scr2:checked ~ .win .pane--b,
#scr3:checked ~ .win .pane--c{display:block}
.pane-h{margin-bottom:20px}

/* products table: scrolls inside its own box, never the page */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -24px;padding:0 24px}
.tbl{width:100%;min-width:640px;border-collapse:collapse;font-size:.875rem}
.tbl th{font-family:var(--mono);font-size:.6875rem;letter-spacing:var(--track-meta);
  text-transform:uppercase;color:var(--muted);font-weight:600;text-align:left;
  padding:0 16px 11px 0;border-bottom:1px solid var(--hair);white-space:nowrap}
.tbl td{padding:13px 16px 13px 0;border-bottom:1px solid #EFF3F6;color:var(--navy)}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .iss{color:var(--muted)}
.gchip{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;color:#fff;
  font-family:var(--mono);font-weight:700;font-size:.8125rem}
.pill{display:inline-flex;align-items:center;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-pill);
  white-space:nowrap}
.pill--ai{background:rgba(124,77,239,.12);color:#5B31C4}
.pill--x{background:rgba(231,76,60,.12);color:#C0392B}
.pill--t{background:rgba(0,194,203,.13);color:var(--teal)}
.pill--o{background:var(--light);color:var(--muted);box-shadow:inset 0 0 0 1px var(--hair)}
.tshint{display:none;margin:12px 0 0}   /* shown only where the table has to scroll */

/* AI-Readiness pane */
.aig{display:grid;grid-template-columns:198px 1fr;gap:30px;align-items:start}
.ring{width:170px;height:170px;border-radius:50%;display:grid;place-items:center;margin:0 auto}
.ring > span{background:#fff;border-radius:50%;display:grid;place-items:center;text-align:center;
  width:126px;height:126px;line-height:1.15}
.ring b{display:block;font-size:1.875rem;font-weight:800;color:var(--navy);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.ring em{font-style:normal;font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.dims{display:grid;gap:15px}
.dim-h{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:7px}
.dim-n{font-size:.875rem;font-weight:600;color:var(--navy)}
.dim-v{font-family:var(--mono);font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.dim .ui-fill{background:linear-gradient(90deg,var(--ai),#A98BF5)}

/* Merchant Center pane */
.mcstat{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.71875rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.mcstat i{width:8px;height:8px;border-radius:50%;background:var(--gA);flex:none}
.rej{display:grid;gap:12px}
.rejr{display:flex;align-items:center;gap:15px;flex-wrap:wrap;background:#fff;
  border:1px solid var(--hair);border-radius:14px;padding:15px 18px;
  transition:border-color var(--t2) var(--ease)}
.rejr:hover{border-color:#CFDCE4}
.rej-w{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;
  background:rgba(234,88,12,.12)}
.rej-w svg{width:17px;height:17px}
.rej-t{font-size:.9375rem;font-weight:600;color:var(--navy);margin:0}
.rej-s{font-size:.8125rem;color:var(--muted);margin:2px 0 0}
.rej-c{margin-left:auto;font-family:var(--mono);font-size:.8125rem;color:var(--navy);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.rej-f{font-family:var(--mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--turq-d);background:rgba(0,194,203,.12);border-radius:var(--r-pill);padding:5px 10px}

/* mobile row: a vector phone, not a screenshot */
.mob{display:grid;grid-template-columns:246px 1fr;gap:44px;align-items:center;background:#fff;
  border:1px solid var(--hair);border-radius:24px;padding:32px;box-shadow:var(--sh);margin-top:22px}
.phone{width:214px;margin:0 auto;padding:9px;border-radius:36px;background:var(--navy);
  box-shadow:var(--sh-lg)}
.ph{background:#fff;border-radius:28px;overflow:hidden}
.ph-top{height:27px;display:grid;place-items:center;background:var(--light)}
.ph-top i{width:54px;height:5px;border-radius:3px;background:#CBD5DD}
.ph-b{padding:15px 14px 10px}
.ph-home{height:22px;display:grid;place-items:center}
.ph-home i{width:74px;height:4px;border-radius:2px;background:#DAE1E7}
.ph-l{font-family:var(--mono);font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 9px}
.ph-r{display:flex;align-items:center;gap:9px;padding:8px 0;border-top:1px solid #EFF3F6}
.ph-n{font-size:.6875rem;color:var(--navy);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:0}
.ph-s{margin-left:auto;font-family:var(--mono);font-size:.6875rem;color:var(--muted);
  font-variant-numeric:tabular-nums}
.gchip--s{width:20px;height:20px;border-radius:7px;font-size:.625rem}

/* ---------- consultancy ---------- */
.slab--dark .card{background:#26282B;border-color:#34373B}
.slab--dark .card:hover{border-color:#4A4E54}
.slab--dark .card p{color:rgba(255,255,255,.68)}
.slab--dark .eyebrow{color:var(--cyan)}
.slab--dark .eyebrow b{background:var(--cyan)}
.slab--dark .step-n{background:rgba(61,179,209,.16);color:var(--cyan)}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.tools span{font-family:var(--mono);font-size:.75rem;padding:5px 10px;border-radius:6px;
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.76)}

/* ---------- footer ---------- */
.ft{background:var(--navy);color:rgba(255,255,255,.66);padding:68px 0 30px;font-size:.875rem}
.ft a{color:rgba(255,255,255,.7);text-decoration:none;transition:color var(--t2) var(--ease)}
.ft .ftl a:hover{color:#fff}
.ft a:hover{color:var(--turq)}
.ftg{display:grid;grid-template-columns:1.4fr 1fr 1.15fr .9fr;gap:46px}
.fmark{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:1.125rem;
  letter-spacing:-.025em;color:#fff;text-decoration:none}
.ftp{max-width:32ch;margin:14px 0 20px;color:rgba(255,255,255,.6)}
.ft a.ftcta{display:inline-flex;align-items:center;gap:9px;font-weight:700;color:var(--turq);
  text-decoration:none}
.ft a.ftcta:hover,.ft a.ftcta:focus-visible{color:#5FE3E9}
.ftcta i{font-style:normal;transition:transform var(--t2) var(--ease)}
.ft a.ftcta:hover i{transform:translateX(5px)}
/* Sans, bright, sentence case. It was mono uppercase at .12em tracking in 45%
   white, which on navy read as washed out and, worse, made the heading less
   prominent than the 82% white links beneath it: the hierarchy was inverted.
   Weight and brightness carry the heading now, so it does not need to be big. */
.fth{font-family:var(--sans);font-size:.875rem;font-weight:700;letter-spacing:-.01em;
  text-transform:none;color:#fff;margin:0 0 16px}
.ftl{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:.875rem}
.ftbot{display:flex;gap:14px 32px;flex-wrap:wrap;align-items:baseline;margin-top:52px;
  padding-top:24px;border-top:1px solid rgba(255,255,255,.13);color:rgba(255,255,255,.5)}
.ftbot .ftreach{display:flex;gap:10px 20px;flex-wrap:wrap}
.ftbot .note{color:rgba(255,255,255,.38);margin-left:auto}
@media (max-width:980px){.ftg{grid-template-columns:1fr 1fr;gap:38px}}
@media (max-width:600px){
  .ftg{grid-template-columns:1fr;gap:30px}
  .ft{padding:52px 0 28px}
  .ftbot{margin-top:38px}
  .ftbot .note{margin-left:0;flex-basis:100%}
}

/* ---------- field-level before / after, the product page's hero device ---------- */
.diff{width:100%;border-collapse:collapse;font-size:.8125rem;table-layout:fixed}
.diff th{font-family:var(--mono);font-size:.625rem;letter-spacing:var(--track-meta);
  text-transform:uppercase;color:var(--muted);font-weight:600;text-align:left;
  padding:0 12px 9px 0;border-bottom:1px solid var(--hair)}
.diff td{padding:11px 12px 11px 0;border-bottom:1px solid #EFF3F6;vertical-align:top;
  color:var(--navy);line-height:1.45}
.diff tr:last-child td{border-bottom:0}
.diff .f{font-family:var(--mono);font-size:.71875rem;color:var(--muted);overflow-wrap:anywhere}
.diff .was{color:#C0392B}
.diff .was em{font-style:normal;opacity:.62}
.diff .now{color:#017A3C}
.diff col.c1{width:25%}.diff col.c2{width:24%}

/* ---------- chip lists: dimensions, channels, tools ---------- */
.chips{display:flex;flex-wrap:wrap;gap:9px;margin:0;padding:0;list-style:none}
.chips li{display:inline-flex;align-items:center;gap:8px;font-size:.875rem;color:var(--navy);
  background:#fff;border:1px solid var(--hair);border-radius:var(--r-pill);padding:8px 15px;
  transition:border-color var(--t2) var(--ease),transform var(--t2) var(--ease)}
.chips li:hover{border-color:var(--turq);transform:translateY(-1px)}
.chips b{font-family:var(--mono);font-size:.6875rem;color:var(--muted);font-weight:600}
.slab--l .chips li{background:#fff}

/* ---------- IF then rule block ---------- */
.rule{display:grid;gap:12px;font-size:.875rem}
.rline{display:flex;align-items:center;gap:11px;flex-wrap:wrap;background:#fff;
  border:1px solid var(--hair);border-radius:12px;padding:13px 16px}
.rkw{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;color:var(--turq-d);background:rgba(0,194,203,.12);border-radius:6px;
  padding:4px 9px;flex:none}
.rkw--t{color:#5B31C4;background:rgba(124,77,239,.12)}
.rfield{font-family:var(--mono);font-size:.8125rem;color:var(--navy);background:var(--light);
  border:1px solid var(--hair);border-radius:7px;padding:4px 9px}
.rop{color:var(--muted)}
.rval{font-weight:600;color:var(--navy);flex:1 1 0;min-width:10ch}
.rmeta{display:flex;gap:18px;flex-wrap:wrap;margin-top:4px}
.rmeta span{font-family:var(--mono);font-size:.75rem;color:var(--muted)}
.rmeta b{color:var(--navy)}

/* ---------- split section: copy one side, device the other ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split--n{grid-template-columns:.9fr 1.1fr}
/* flip only at desktop; on mobile the copy must still come first */
.split--flip > *:first-child{order:2}
.vbar{display:inline-block;width:74px;height:19px;border-radius:6px;background:#EDF1F4;
  vertical-align:-2px}
@media (max-width:980px){
  .split,.split--n{grid-template-columns:1fr;gap:34px}
  .split--flip > *:first-child{order:0}
}

/* ---------- scan timeline: what happens, with the clock running ---------- */
.tline{list-style:none;margin:0;padding:0;position:relative}
.tline::before{content:"";position:absolute;left:59px;top:14px;bottom:22px;width:2px;
  background:linear-gradient(180deg,var(--turq),#CFE7EB)}
.tline li{display:grid;grid-template-columns:48px 1fr;gap:26px;align-items:start;
  padding:0 0 26px}
.tline li:last-child{padding-bottom:0}
.tclock{font-family:var(--mono);font-size:.75rem;font-weight:600;color:var(--muted);
  text-align:right;padding-top:13px;font-variant-numeric:tabular-nums}
.tbody{position:relative;background:#fff;border:1px solid var(--hair);border-radius:14px;
  padding:15px 20px;transition:border-color var(--t2) var(--ease)}
.tbody:hover{border-color:#CFDCE4}
.tbody::before{content:"";position:absolute;left:-19px;top:19px;width:10px;height:10px;
  border-radius:50%;background:var(--turq);box-shadow:0 0 0 4px #fff}
.tline li:last-child .tbody::before{background:var(--gA)}
.tbody h3{margin:0 0 3px}
.tbody p{margin:0;color:var(--muted);font-size:.9375rem}
.tb-h{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.tb-n{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);flex:none}
.tb-tech{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.tb-tech span{font-family:var(--mono);font-size:.6875rem;color:var(--turq-d);
  background:rgba(0,194,203,.1);border-radius:6px;padding:4px 9px;white-space:nowrap}
.tb-tech span.n{color:var(--muted);background:var(--light)}
@media (max-width:600px){
  .tline::before{left:11px}
  .tline li{grid-template-columns:1fr;gap:0;padding-left:32px}
  .tclock{text-align:left;padding:0 0 6px}
  .tbody::before{left:-25px}
}

/* ---------- FAQ: <details>, so it works with no JS at all ---------- */
.faq{display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--hair);border-radius:14px;
  transition:border-color var(--t2) var(--ease)}
.faq details[open]{border-color:#CFDCE4}
.faq summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:600;color:var(--navy);
  display:flex;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";margin-left:auto;flex:none;width:9px;height:9px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translateY(-2px);transition:transform var(--t2) var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.faq .fa{padding:0 22px 20px;color:var(--muted);margin:0;max-width:74ch}

/* ---------- contact form: labels above, bottom rule only ---------- */
.form{display:grid;gap:22px;max-width:560px}
.frow{display:grid;gap:7px}
.frow label{font-family:var(--mono);font-size:.6875rem;letter-spacing:var(--track-meta);
  text-transform:uppercase;color:var(--muted);font-weight:600}
.form input,.form textarea,.form select{font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:13px 15px;width:100%;
  transition:border-color var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
.form textarea{min-height:132px;resize:vertical;line-height:1.55}
.form input:focus,.form textarea:focus,.form select:focus{outline:0;border-color:var(--turq);
  box-shadow:0 0 0 3px rgba(0,194,203,.16)}
.fhint{font-size:.8125rem;color:var(--muted);margin:0}

/* ---------- contact cards ---------- */
.reach{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.reachc{display:block;background:#fff;border:1px solid var(--hair);border-radius:20px;
  padding:26px;text-decoration:none;
  transition:transform var(--t3) var(--ease),box-shadow var(--t3) var(--ease),
             border-color var(--t2) var(--ease)}
aa.reachc:hover .reachv{color:var(--turq-d)}
.reachc:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--turq)}
.reachi{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:rgba(0,194,203,.12);margin-bottom:16px}
.reachi svg{width:20px;height:20px}
.reachc h3{margin:0 0 5px}
.reachv{font-size:1.0625rem;font-weight:700;color:var(--turq-d);margin:0 0 4px;word-break:break-word}
.reachc p{color:var(--muted);margin:0;font-size:.875rem}
@media (max-width:768px){.reach{grid-template-columns:1fr}}

/* ---------- editorial column, for the about page ---------- */
.prose{max-width:68ch}
.prose p{color:var(--muted);margin:0 0 20px;font-size:1.0625rem;line-height:1.72}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--navy);font-weight:600}
.prose h3{font-size:1.375rem;margin:38px 0 12px;letter-spacing:-.02em}
.pull{border-left:3px solid var(--turq);padding:4px 0 4px 22px;margin:30px 0;
  font-size:1.1875rem;line-height:1.55;color:var(--navy);font-weight:600;max-width:52ch}

/* ---------- dark slab variants used by the consultancy page ---------- */
.slab--dark .chips li{background:#26282B;border-color:#34373B;color:rgba(255,255,255,.86)}
.slab--dark .chips li:hover{border-color:var(--cyan)}
.slab--dark .chips b{color:rgba(255,255,255,.5)}
.slab--dark .note{color:rgba(255,255,255,.5)}
.slab--dark .tl{color:var(--cyan)}
.slab--dark h1{color:#fff}
.slab--dark .prose p{color:rgba(255,255,255,.72)}
.slab--dark .prose strong{color:#fff}

/* ---------- key/value card ---------- */
.mono-card{background:#fff;border:1px solid var(--hair);border-radius:20px;overflow:hidden}
.mono-row{display:flex;gap:18px;padding:16px 22px;border-top:1px solid #EFF3F6;
  align-items:baseline;flex-wrap:wrap}
.mono-row:first-child{border-top:0}
.mono-k{font-family:var(--mono);font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);flex:none;width:104px;font-weight:600;padding-top:2px}
.mono-v{flex:1 1 0;min-width:14ch;color:var(--navy);font-size:.9375rem;line-height:1.5}
.mono-v small{display:block;color:var(--muted);font-size:.8125rem;margin-top:2px}
@media (max-width:600px){.mono-k{width:auto;flex-basis:100%}}

/* ---------- looping work ticker: ambient motion, transform only ----------
   The list is duplicated in the markup so translateY(-50%) is seamless. */
.loopwrap{position:relative;height:352px;overflow:hidden;background:#fff;
  border:1px solid var(--hair);border-radius:20px;box-shadow:var(--sh-lg)}
.loopwrap::before,.loopwrap::after{content:"";position:absolute;left:0;right:0;height:56px;
  pointer-events:none;z-index:2}
.loopwrap::before{top:0;background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.72) 55%,transparent 100%)}
.loopwrap::after{bottom:0;background:linear-gradient(0deg,#fff 0%,rgba(255,255,255,.72) 55%,transparent 100%)}
.loop{display:flex;flex-direction:column;will-change:transform;animation:vrloop 30s linear infinite}
.vr-live .loopwrap:hover .loop,.loopwrap:focus-within .loop{animation-play-state:paused}
@keyframes vrloop{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.loopr{display:flex;align-items:center;gap:14px;padding:15px 20px;border-bottom:1px solid #EFF3F6}
.loopi{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:rgba(0,194,203,.12)}
.loopi svg{width:18px;height:18px}
.loopi--ai{background:rgba(124,77,239,.12)}
.loopi--c{background:rgba(61,179,209,.16)}
.loopb{flex:1 1 0;min-width:0}
.loopt{font-size:.875rem;font-weight:600;color:var(--navy);margin:0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.loops{font-size:.75rem;color:var(--muted);margin:2px 0 0;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.loopk{font-family:var(--mono);font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);flex:none}

/* two-tone lede: the claim in navy, the explanation in muted at the same size */
.h-lede{font-size:clamp(1.25rem,1.9vw,1.625rem);line-height:1.5;font-weight:700;
  letter-spacing:-.02em;color:var(--navy);margin:0 0 26px;max-width:46ch}
.h-lede span{font-weight:400;color:var(--muted)}
/* on mobile the heading has to lead, or the list arrives with no explanation */
.split--mflip > *:first-child{order:0}
@media (max-width:980px){
  .loopwrap{height:318px}
    .split--mflip > *:first-child{order:2}
}
@media (max-width:600px){
  .loopt,.loops{white-space:normal}   /* room is tighter than the ellipsis is worth */
  .loops{line-height:1.35}
}

/* ---------- book a call ----------------------------------------------------
   The month grid is drawn by JS from today's date, so it is never a stale
   hardcoded month, and it carries NO availability: real slots come from
   Google inside the modal. Showing invented slots here would send people to
   a time that does not exist on the other side. */
.bkwrap{display:grid;grid-template-columns:1.05fr .95fr;gap:0;background:#fff;
  border:1px solid var(--hair);border-radius:22px;overflow:hidden;box-shadow:var(--sh-lg)}
.bk-l{padding:32px 34px}
.bk-r{padding:32px 34px;background:var(--light);border-left:1px solid var(--hair)}
.bk-t{font-size:1.375rem;font-weight:800;letter-spacing:-.025em;color:var(--navy);margin:0 0 6px}
.bk-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.bk-meta span{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--turq-d);
  background:rgba(0,194,203,.12);border-radius:var(--r-pill);padding:5px 11px}
.bk-list{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.bk-list li{display:flex;gap:11px;font-size:.9375rem;color:var(--muted);line-height:1.5}
.bk-list svg{width:17px;height:17px;flex:none;margin-top:3px}

/* month affordance */
.bk-cal{display:none}
.vr-live .bk-cal{display:block}
.bk-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 14px}
.bk-month{font-size:.9375rem;font-weight:700;color:var(--navy)}
.bk-tz{font-family:var(--mono);font-size:.6875rem;color:var(--muted)}
.bk-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.bk-dow{font-family:var(--mono);font-size:.625rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);text-align:center;padding-bottom:5px}
.bk-day{aspect-ratio:1;display:grid;place-items:center;border-radius:9px;font-size:.8125rem;
  font-variant-numeric:tabular-nums;color:var(--navy);background:#fff;
  border:1px solid var(--hair);cursor:pointer;padding:0;font-family:var(--sans);
  transition:border-color var(--t2) var(--ease),background var(--t2) var(--ease),
             color var(--t2) var(--ease)}
.bk-day:hover{border-color:var(--turq);background:rgba(0,194,203,.08)}
.bk-day[disabled]{color:#B4BEC7;background:transparent;border-color:transparent;cursor:default}
.bk-day[data-today]{border-color:var(--turq);font-weight:700;color:var(--turq-d)}
.bk-empty{aspect-ratio:1}
.bk-note{font-family:var(--mono);font-size:.6875rem;line-height:1.5;color:var(--muted);
  margin:16px 0 0}
.bk-cta{margin-top:16px;width:100%}
@media (max-width:980px){
  .bkwrap{grid-template-columns:1fr}
  .bk-r{border-left:0;border-top:1px solid var(--hair)}
}
@media (max-width:600px){.bk-l,.bk-r{padding:24px 22px}}

/* ---------- modal holding Google's own booking screen ---------- */
.bk-modal{position:fixed;inset:0;z-index:200;display:none;padding:22px}
.bk-modal[open],.bk-modal.on{display:grid;place-items:center}
.bk-back{position:absolute;inset:0;background:rgba(11,28,44,.52);
  backdrop-filter:blur(3px);border:0;padding:0;cursor:pointer}
.bk-panel{position:relative;width:100%;max-width:860px;height:min(88vh,760px);background:#fff;
  border-radius:20px;overflow:hidden;box-shadow:var(--sh-xl);display:flex;flex-direction:column}
.bk-bar{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--hair);
  background:var(--light);flex:none}
.bk-bar p{margin:0;font-weight:700;color:var(--navy);font-size:.9375rem}
.bk-bar .note{margin-left:auto}
.bk-x{width:34px;height:34px;flex:none;border-radius:10px;border:1px solid var(--hair);
  background:#fff;cursor:pointer;display:grid;place-items:center;padding:0;
  transition:border-color var(--t2) var(--ease)}
.bk-x:hover{border-color:var(--navy)}
.bk-x svg{width:15px;height:15px}
.bk-frame{flex:1 1 auto;border:0;width:100%;background:#fff}
.bk-fallback{padding:26px;text-align:center;color:var(--muted);font-size:.9375rem}
@media (max-width:600px){
  .bk-modal{padding:0}
  .bk-panel{max-width:none;height:100vh;border-radius:0}
  .bk-bar .note{display:none}
}

/* ---------- bento: breaks the uniform three-across card rhythm ---------- */
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.bento > .card{margin:0}
.bento > .card:first-child{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column}
.bento > .card:first-child > .tag{align-self:flex-start}
.bento > .card:first-child h3{font-size:1.375rem;letter-spacing:-.02em;margin-bottom:12px}
.bento > .card:first-child > p{font-size:1.0625rem;line-height:1.62}
.bento-sp{margin-top:auto;padding-top:24px}
@media (max-width:980px){
  .bento{grid-template-columns:1fr 1fr}
  .bento > .card:first-child{grid-column:span 2;grid-row:auto}
}
@media (max-width:600px){.bento{grid-template-columns:1fr}.bento > .card:first-child{grid-column:auto}}

/* a pipeline, drawn rather than described */
.flow{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.flow span{font-family:var(--mono);font-size:.75rem;color:var(--navy);background:var(--light);
  border:1px solid var(--hair);border-radius:8px;padding:7px 11px;white-space:nowrap}
.flow i{font-style:normal;color:var(--turq);font-weight:700;flex:none}
.flow span:last-of-type{border-color:var(--turq);background:rgba(0,194,203,.1);color:var(--turq-d)}

/* ---------- what a retainer is, and is not ---------- */
.vs{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid var(--hair);
  border-radius:22px;overflow:hidden;box-shadow:var(--sh)}
.vs-col{padding:28px 30px}
.vs-col + .vs-col{border-left:1px solid var(--hair);background:var(--light)}
.vs-h{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.6875rem;
  letter-spacing:var(--track-meta);text-transform:uppercase;font-weight:600;margin:0 0 18px}
.vs-h--y{color:#017A3C}
.vs-h--n{color:#C0392B}
.vs-col ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.vs-col li{display:flex;gap:11px;font-size:.9375rem;line-height:1.52;color:var(--navy)}
.vs-col li b{display:block;font-weight:600}
.vs-col li span{color:var(--muted);font-size:.875rem}
.vs-col svg{width:16px;height:16px;flex:none;margin-top:3px}
@media (max-width:768px){
  .vs{grid-template-columns:1fr}
  .vs-col + .vs-col{border-left:0;border-top:1px solid var(--hair)}
}
@media (max-width:600px){.vs-col{padding:22px}}

/* ---------- horizontal tool marquee -------------------------------------
   Three rows, middle one reversed, each duplicated in the markup so the
   -50% translate is seamless. No brand logos: we do not have licensed marks,
   and approximating another company's mark is worse than setting its name in
   our own type. */
.mq{position:relative;overflow:hidden;margin:0 -28px;padding:2px 0}
.mq::before,.mq::after{content:"";position:absolute;top:0;bottom:0;width:110px;z-index:2;
  pointer-events:none}
.mq::before{left:0;background:linear-gradient(90deg,var(--light) 0%,rgba(244,247,249,.75) 55%,transparent 100%)}
.mq::after{right:0;background:linear-gradient(270deg,var(--light) 0%,rgba(244,247,249,.75) 55%,transparent 100%)}
.slab--w .mq::before{background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.75) 55%,transparent 100%)}
.slab--w .mq::after{background:linear-gradient(270deg,#fff 0%,rgba(255,255,255,.75) 55%,transparent 100%)}
.mqrow{display:flex;gap:12px;width:max-content;padding:7px 0;will-change:transform;
  animation:mqrun 44s linear infinite}
.mqrow--b{animation-duration:56s;animation-direction:reverse}
.mqrow--c{animation-duration:50s}
.vr-live .mq:hover .mqrow{animation-play-state:paused}
@keyframes mqrun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mqp{display:inline-flex;align-items:center;gap:10px;flex:none;background:#fff;
  border:1px solid var(--hair);border-radius:var(--r-pill);padding:11px 19px;
  font-size:.9375rem;font-weight:600;color:var(--navy);white-space:nowrap;
  transition:border-color var(--t2) var(--ease),transform var(--t2) var(--ease)}
.mqp:hover{border-color:var(--turq);transform:translateY(-2px)}
.mqp i{width:7px;height:7px;border-radius:50%;flex:none}
.mq-legend{display:flex;flex-wrap:wrap;gap:9px 22px;margin:0 0 22px;padding:0;list-style:none}
.mq-legend li{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);
  font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mq-legend i{width:8px;height:8px;border-radius:50%;flex:none}
.mqhint{font-family:var(--mono);font-size:.6875rem;letter-spacing:var(--track-meta);
  text-transform:uppercase;color:var(--muted);margin:20px 0 0}
@media (max-width:600px){
  .mq{margin:0 -20px}
  .mq::before,.mq::after{width:52px}
  .mqp{padding:9px 15px;font-size:.875rem}
  .mqhint{display:none}
}

/* ---------- platform line: a label, not a component ----------------------
   Replaces three near-identical chip rows. Repeating a quiet typographic
   treatment reads as a convention; repeating a card device reads as filler. */
.plat{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px 14px;margin:24px 0 0;
  padding-top:17px;border-top:1px solid var(--hair);font-family:var(--mono);
  font-size:.71875rem;letter-spacing:.09em;text-transform:uppercase;line-height:1.6}
.plat > b{color:var(--turq-d);font-weight:600;flex:none}
.plat > span{color:var(--navy)}
.plat > i{color:#C3CDD5;font-style:normal;flex:none}
.slab--dark .plat{border-top-color:rgba(255,255,255,.16)}
.slab--dark .plat > span{color:rgba(255,255,255,.84)}
.slab--dark .plat > b{color:var(--cyan)}
@media (max-width:600px){.plat{gap:6px 11px;font-size:.6875rem}}

/* ---------- RFM segment map -----------------------------------------------
   The technique the copy actually names, drawn rather than described. Cells
   are a structure, not a client's distribution, and the caption says so. */
.rfm{background:#fff;border:1px solid var(--hair);border-radius:20px;overflow:hidden;
  box-shadow:var(--sh-md)}
.rfm-top{padding:22px 24px 6px}
.rfm-t{font-size:1.0625rem;font-weight:700;color:var(--navy);margin:0 0 3px}
.rfm-s{font-size:.8125rem;color:var(--muted);margin:0}
.rfm-body{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:18px 24px 4px}
.rfm-yax{display:grid;align-content:stretch;font-family:var(--mono);font-size:.5625rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:right;gap:5px}
.rfm-yax span{display:grid;align-items:center}
.rfm-main{display:grid;gap:5px}
.rfm-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.rfm-c{aspect-ratio:1.35;border-radius:7px;display:grid;place-items:center;
  font-family:var(--mono);font-size:.625rem;font-weight:600;color:#fff;
  transition:transform var(--t2) var(--ease)}
.rfm-c:hover{transform:scale(1.07)}
.rfm-xax{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;font-family:var(--mono);
  font-size:.5625rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  text-align:center;padding-top:2px}
.rfm-axl{font-family:var(--mono);font-size:.5625rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:0 24px 14px;display:flex;justify-content:space-between}
.rfm-keys{list-style:none;margin:0;padding:16px 24px 20px;border-top:1px solid var(--hair);
  background:var(--light);display:grid;gap:10px}
.rfm-keys li{display:grid;grid-template-columns:10px 92px 1fr;gap:12px;align-items:baseline;
  font-size:.8125rem;line-height:1.45}
.rfm-keys i{width:9px;height:9px;border-radius:3px;align-self:center}
.rfm-keys b{color:var(--navy);font-weight:600;white-space:nowrap}
.rfm-keys span{color:var(--muted)}
@media (max-width:600px){
  .rfm-keys li{grid-template-columns:10px 1fr;gap:8px}
  .rfm-keys b{grid-column:2}
  .rfm-keys span{grid-column:2}
}
.rfm-foot{font-family:var(--mono);font-size:.6875rem;letter-spacing:var(--track-meta);
  text-transform:uppercase;color:var(--muted);padding:11px 24px;border-top:1px solid var(--hair)}
@media (max-width:600px){
  .rfm-body{padding:16px 18px 4px}
  .rfm-keys,.rfm-foot,.rfm-axl{padding-left:18px;padding-right:18px}
  .rfm-c{font-size:0}
}

/* ---------- closing panel ------------------------------------------------
   Replaces the centred headline + two pills that used to sit above the footer
   on all six pages. Each route gets its own row and its own reason, so the
   last thing on the page is a choice rather than a slogan. */
.close{display:grid;grid-template-columns:1.06fr .94fr;border:1px solid var(--hair);
  border-radius:24px;overflow:hidden;background:#fff;box-shadow:var(--sh-lg)}
.close-l{padding:44px 46px;display:flex;flex-direction:column;justify-content:center}
.close-l h2{margin:0 0 14px}
.close-l .lead{margin:0}
.close-r{border-left:1px solid var(--hair);background:var(--light);display:flex;
  flex-direction:column;justify-content:center}
.crow{display:flex;align-items:center;gap:18px;padding:24px 30px;text-decoration:none;
  border-top:1px solid var(--hair);
  transition:background var(--t2) var(--ease),padding-left var(--t2) var(--ease)}
.crow:first-child{border-top:0}
.crow:hover{background:#fff;padding-left:36px}
.crow:hover .crow-t{color:var(--navy)}
.crow-i{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:rgba(0,194,203,.13)}
.crow-i svg{width:19px;height:19px}
.crow-i--n{background:rgba(11,28,44,.07)}
.crow-b{flex:1 1 0;min-width:0}
.crow-t{font-size:1rem;font-weight:700;color:var(--navy);margin:0 0 3px}
.crow-s{font-size:.8125rem;color:var(--muted);margin:0;line-height:1.45}
.crow-a{font-style:normal;color:var(--turq-d);font-weight:700;flex:none;
  transition:transform var(--t2) var(--ease)}
.crow:hover .crow-a{transform:translateX(5px)}
.close-note{font-family:var(--mono);font-size:.6875rem;letter-spacing:var(--track-meta);
  text-transform:uppercase;color:var(--muted);padding:14px 30px;border-top:1px solid var(--hair)}

/* on the charcoal slab the same panel inverts */
.slab--dark .close{background:#26282B;border-color:#34373B;box-shadow:none}
.slab--dark .close-r{background:#212326;border-left-color:#34373B}
.slab--dark .crow{border-top-color:#34373B}
.slab--dark .crow:hover{background:#2C2F33}
.slab--dark .crow-t{color:#fff}
.slab--dark .crow-s{color:rgba(255,255,255,.62)}
.slab--dark .crow-a{color:var(--cyan)}
.slab--dark .crow-i{background:rgba(0,194,203,.18)}
.slab--dark .crow-i--n{background:rgba(255,255,255,.09)}
.slab--dark .crow-i svg{stroke:var(--turq)}
.slab--dark .crow-i--n svg{stroke:#fff}
.slab--dark .close-note{color:rgba(255,255,255,.5);border-top-color:#34373B}

@media (max-width:980px){
  .close{grid-template-columns:1fr}
  .close-l{padding:32px 30px}
  .close-r{border-left:0;border-top:1px solid var(--hair)}
  .slab--dark .close-r{border-top-color:#34373B}
}
@media (max-width:600px){
  .close-l{padding:26px 22px}
  .crow{padding:20px 22px;gap:14px}
  .crow:hover{padding-left:22px}
  .close-note{padding:13px 22px}
}

/* ---------- score rings, side by side --------------------------------------
   The two scores are the product's central idea, so they get a shape each
   rather than two more progress bars. */
.rings{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ringc{background:#fff;border:1px solid var(--hair);border-radius:20px;padding:26px;
  display:flex;flex-direction:column;align-items:center;text-align:center}
.ringc .tag{margin-bottom:18px}
.ringw{width:148px;height:148px;border-radius:50%;display:grid;place-items:center;flex:none}
.ringw > span{background:#fff;border-radius:50%;display:grid;place-items:center;
  width:110px;height:110px;line-height:1.1}
.ringw b{display:block;font-size:1.75rem;font-weight:800;color:var(--navy);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.ringw b small{font-size:.875rem;font-weight:600;color:var(--muted);letter-spacing:0}
.ringw em{font-style:normal;font-family:var(--mono);font-size:.5625rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.ringc h3{margin:18px 0 6px}
.ringc p{color:var(--muted);font-size:.875rem;margin:0}
@media (max-width:600px){.rings{grid-template-columns:1fr}}

/* ---------- narrowing funnel ------------------------------------------------
   Category matching, drawn. The point is that the shortlist is built before the
   model is asked, so a wrong answer is not available to it. */
.funnel{display:grid;gap:12px;margin-top:6px}
/* the bar lives in a fixed track: a percentage width on a flex item squeezed
   the note beside it, so the three notes started at three different x values */
.fstep{display:grid;grid-template-columns:minmax(0,54%) 1fr;gap:20px;align-items:center}
.ftrack{display:flex}
.fbar{height:46px;border-radius:11px;display:flex;align-items:center;padding:0 16px;
  min-width:max-content;
  font-family:var(--mono);font-size:.8125rem;font-weight:600;white-space:nowrap;
  transition:transform var(--t2) var(--ease)}
.fstep:hover .fbar{transform:translateX(4px)}
.fbar--1{width:100%;background:var(--light);color:var(--muted);border:1px solid var(--hair)}
.fbar--2{width:62%;background:rgba(124,77,239,.12);color:#5B31C4;border:1px solid rgba(124,77,239,.3)}
.fbar--3{width:34%;background:var(--turq);color:#04222A;box-shadow:var(--glow)}
.fnote{font-size:.8125rem;color:var(--muted);line-height:1.45}
.fnote b{display:block;color:var(--navy);font-weight:600;margin-bottom:2px}
@media (max-width:768px){
  .fstep{grid-template-columns:1fr;gap:7px}
  .fbar--2{width:72%}.fbar--3{width:46%}
}

/* ---------- cookie notice ---------------------------------------------------
   The markup is a Code Snippets snippet whose consent logic we do not touch; it
   shows the banner with display:block, hides it with display:none and animates
   through .fade-out, so those three are honoured here. It used to be a
   full-width dark bar with a gradient button and an emoji, styled entirely
   inline, which meant CSS could not touch it and it fought the light design. */
#cookie-banner{position:fixed;left:22px;right:22px;bottom:22px;z-index:150;display:none;
  transition:opacity var(--t3) var(--ease),transform var(--t3) var(--ease)}
#cookie-banner.fade-out{opacity:0;transform:translateY(14px)}
.vrck-card{position:relative;max-width:452px;background:#fff;border:1px solid var(--hair);
  border-radius:18px;box-shadow:var(--sh-xl);padding:22px 24px 20px}
.vrck-t{font-size:.9375rem;font-weight:700;color:var(--navy);margin:0 0 7px}
.vrck-b{font-size:.8125rem;line-height:1.55;color:var(--muted);margin:0 0 16px;max-width:44ch}
.vrck-b a{color:var(--turq-d);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.vrck-a{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vrck-no{background:none;border:0;padding:8px 4px;cursor:pointer;font-family:var(--sans);
  font-size:.8125rem;font-weight:600;color:var(--muted);
  text-transform:none;letter-spacing:normal;
  transition:color var(--t2) var(--ease)}
.vrck-no:hover{color:var(--navy)}
.vrck-x{position:absolute;top:12px;right:12px;width:28px;height:28px;border:0;background:none;
  cursor:pointer;color:#9AA6B2;display:grid;place-items:center;padding:0;border-radius:8px;
  transition:color var(--t2) var(--ease),background var(--t2) var(--ease)}
.vrck-x:hover{color:var(--navy);background:var(--light)}
.vrck-x svg{width:14px;height:14px}
@media (max-width:600px){
  #cookie-banner{left:14px;right:14px;bottom:14px}
  .vrck-card{max-width:none;padding:20px}
  .vrck-a .btn{width:auto}
}

/* ---------- mobile nav toggle: a real button, so the state is announced ------
   Gated on .vr-live, which the script adds only when it runs. Without the script
   the nav stays a plain wrapped list rather than a burger that does nothing. */
.burger{display:none;flex-direction:column;align-items:center;justify-content:center;
  width:42px;height:42px;flex:none;border:1px solid var(--hair);border-radius:12px;
  background:#fff;cursor:pointer;padding:0;transition:border-color var(--t2) var(--ease)}
.burger:hover{border-color:#CFDCE4}
.burger span{display:block;width:17px;height:2px;border-radius:2px;background:var(--navy);
  position:relative;transition:transform var(--t2) var(--ease),opacity var(--t2) var(--ease)}
.burger span + span{margin-top:4px}
.hdr.open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hdr.open .burger span:nth-child(2){opacity:0}
.hdr.open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- responsive: the base layout at three widths ----------------------
   Last in the sheet on purpose: every rule here overrides a component above it,
   and being last removes any doubt about which one wins. */
@media (max-width:980px){
  .slab{padding:76px 0;border-radius:26px}
  .slab + .slab{margin-top:-26px}
  .hrow{flex-wrap:wrap;gap:14px}
  .vr-live .burger{display:inline-flex}
  .nav{order:3;flex-basis:100%;margin-left:0;flex-direction:column;gap:0;
    border-top:1px solid var(--hair);padding-top:6px;margin-top:4px}
  .vr-live .nav{display:none}
  .vr-live .hdr.open .nav{display:flex}
  .nav a{padding:12px 2px;font-size:1rem;opacity:1}
  .nav a::after{display:none}
  .hgrid,.hgrid--wide{grid-template-columns:1fr;gap:34px}
  .g3{grid-template-columns:repeat(2,1fr)}
  .aig,.mob{grid-template-columns:1fr;gap:28px}
}
@media (max-width:768px){
  .mets{grid-template-columns:repeat(2,1fr)}
  .met:nth-child(3){border-left:0}
  .met:nth-child(n+3){border-top:1px solid var(--hair)}
  h1{font-size:clamp(2.3rem,8.6vw,3rem)}
  .tshint{display:block}
}
@media (max-width:600px){
  .wrap,.hrow{padding-left:20px;padding-right:20px}
  .slab{padding:60px 0;border-radius:22px}
  .slab + .slab{margin-top:-22px}
  .g3,.g2{grid-template-columns:1fr}
  .mets{grid-template-columns:1fr}
  .met{border-left:0;border-top:1px solid var(--hair)}
  .met:first-child{border-top:0}
  .cta .btn{width:100%}
  .cta{gap:12px}
  .pane,.mob{padding:18px}
  .tscroll{margin:0 -18px;padding:0 18px}
  .tab{padding:10px 15px;font-size:.875rem}
  .rej-c{margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;
    scroll-behavior:auto !important}
  /* .01ms on an INFINITE animation flickers instead of stopping, so the two
     marquees are switched off outright */
  .loop,.mqrow{animation:none !important}
}

/* ---------- mobile pass -------------------------------------------------------
   Written against measurements, not guesses. Each rule here fixes something that
   was actually overflowing its container at 375px:
     .ui-legend   the grade legend could not wrap, so it pushed its card wider
     .deck        the format cards were a hard 474px and no phone is that wide,
                  and a hover-to-fan stack is meaningless on a touch screen
     .hdr         logo + CTA + burger did not fit on one row under 420px
   -------------------------------------------------------------------------- */
@media (max-width:600px){
  .ui-legend{flex-wrap:wrap;gap:8px 12px;justify-content:flex-start}
  .ui-kpis{grid-template-columns:1fr}
  .ui-fix-n{white-space:normal}

  /* the deck becomes an ordinary list: no overlap, no skew, nothing to hover */
  .deckwrap{min-height:0;padding:0}
  .deck{grid-template-areas:none;display:grid;gap:12px;place-items:stretch}
  .dcard{grid-area:auto;transform:none !important;filter:none;width:100%;min-height:0}
  .deck:hover .dcard{transform:none !important}

  .mob{overflow:hidden}
  .mob > div{min-width:0}
  .close-r,.close{overflow:hidden}
  .crow{padding:18px;gap:12px;min-width:0}
  .crow:hover{padding-left:18px}
  .crow-t,.crow-s{overflow-wrap:anywhere}
  .close-l{padding:24px 20px}
  .close-note{padding:12px 18px}
  .rfm-c{font-size:.5rem}
  .diff{font-size:.75rem}
  .win-bar{padding:11px 14px}
  .bk-meta span{font-size:.625rem}
}
@media (max-width:420px){
  /* the header row was 277px of content in a 375px viewport before padding */
  .mark{font-size:1rem}
  .mk{width:24px;height:24px}
  .hdr .btn--sm{padding:9px 14px;font-size:.8125rem}
  .burger{width:38px;height:38px}
  .wrap,.hrow{padding-left:16px;padding-right:16px}
  .note{font-size:.75rem}
}

/* ---------- root font size ---------------------------------------------------
   Astra derives html{font-size} from its body-size setting: 15px becomes
   93.75%, and it drops to 85.5% below 921px. Every measurement in this design is
   in rem, so the whole page rendered 6% to 14% smaller than it was drawn, which
   reads as the browser being permanently zoomed out. The design assumes a 16px
   root, so take it back. */
html{font-size:100%}
@media (max-width:921px){html{font-size:100%}}
/* ===========================================================
   Astra reconciliation. Every rule here exists because the
   theme fought the design, not for decoration.
   =========================================================== */

/* Astra constrains <section> and .entry-content children to 1200px, which put a
   dead strip down the left of every full-bleed slab. */
.vr .slab,.vr-page .slab{max-width:none !important;margin-inline:0 !important;width:100%}
.vr-page .site-content .ast-container{max-width:none;padding-left:0;padding-right:0}
.vr-page .entry-content > *{margin-block:0}
.vr-page .entry-content{margin-top:0}

/* Astra's h1 is 100px on desktop and wrapped the hero headline onto six lines. */
/* Scoped to .entry-content, NOT the whole page. These carry !important to beat
   Astra's 100px h1 and 45px h2, and while they were page-wide they also hit the
   footer's <h2 class="fth"> column headings, which rendered at 30px instead of
   14px. That is what made the footer look wrong: the size, not the styling. */
.vr-page .entry-content h1{font-size:clamp(2.1rem,3.9vw,3.35rem) !important;line-height:1.06 !important}
.vr-page .entry-content h2{font-size:clamp(1.9rem,4vw,2.95rem) !important;line-height:1.09 !important}
.vr-page .entry-content h3{font-size:1.0625rem !important;line-height:1.38 !important}
.vr-page .entry-content .bento > .card:first-child h3{font-size:1.375rem !important}
.vr-page .entry-content .prose h3{font-size:1.375rem !important}
.vr-page .entry-content .rfm-t{font-size:1.0625rem !important}
.vr-page .entry-content .bk-t{font-size:1.375rem !important}

/* the footer and header are outside .entry-content, so they set their own sizes
   and must not be reachable by the overrides above */
.ft .fth{font-size:.875rem;font-weight:700;line-height:1.4}
.ft .fmark,.hdr .mark{font-size:1.125rem}

/* the theme's own page title and post meta have no place on a designed page */
.vr-page .entry-header,.vr-page .ast-single-post-order,.vr-page .entry-meta{display:none}

/* Scoped to .vr-page, NOT .vr. The .vr class is on every page including the
   blog, and these two rules stripped the underlines from blog links and the
   bullets from every list in a post. A reset that broad has to be confined to
   the pages it was written for. */
.vr-page a{text-decoration:none}
.vr-page .prose a{text-decoration:underline;text-underline-offset:2px}
.vr-page ul{list-style:none;margin:0;padding:0}
.vr-page .prose p{margin:0 0 20px}

/* the header and footer are site-wide, so their own resets have to be too */
.hdr a,.ft a,.close a{text-decoration:none}
.ftl,.nav{list-style:none}

/* Astra draws a full grid on .entry-content tables. Our tables use horizontal
   hairlines only, and the header/label rows carry their own rules. */
.vr-page .entry-content table,
.vr-page .entry-content th,
.vr-page .entry-content td{border:0;background:transparent}
.vr-page .entry-content table{margin:0}
.vr-page .diff th,.vr-page .tbl th{border-bottom:1px solid var(--hair)}
.vr-page .diff td{border-bottom:1px solid #EFF3F6}
.vr-page .tbl td{border-bottom:1px solid #EFF3F6}
.vr-page .diff tr:last-child td,.vr-page .tbl tr:last-child td{border-bottom:0}
.vr-page .entry-content table thead th{background:transparent}

/* ===========================================================
   BLOG
   Scoped to .vr-blog, which functions.php adds to the posts
   page, single posts and the term archives. The six designed
   pages carry .vr-page and are untouched by everything below.

   The old .page-id-472 block that used to sit here is gone
   with the page it patched: 472 was a Spectra hero from the
   dark round and is now the posts page, whose content
   WordPress never renders.
   =========================================================== */

/* ---------- archive header ------------------------------------------------
   The archive had no <h1> at all, so it opened straight onto the card grid.  */
.vr-blog .bh{max-width:var(--wrap);margin:0 auto;padding:56px 24px 40px}
.bh-eyebrow{font-family:var(--mono);font-size:.75rem;font-weight:600;
  letter-spacing:var(--track-meta);text-transform:uppercase;color:var(--turq-d);margin:0 0 14px}
.bh-t{font-family:var(--sans);font-size:clamp(2rem,4.2vw,3rem);line-height:1.06;
  letter-spacing:-.03em;font-weight:800;color:var(--navy);margin:0 0 16px;
  text-wrap:balance;max-width:24ch}
.bh-lead{font-size:1.0625rem;line-height:1.65;color:var(--muted);margin:0;max-width:62ch}

/* The category row is the archive's only means of narrowing, and every term in
   it has posts, so the counts are read from the terms rather than written. */
.bh-cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.bh-cats a{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;
  border:1px solid var(--hair);border-radius:var(--r-pill);background:#fff;
  font-size:.8125rem;font-weight:600;color:var(--navy);text-decoration:none;
  transition:border-color var(--t2) var(--ease),background var(--t2) var(--ease),
    transform var(--t2) var(--ease)}
.bh-cats a:hover{border-color:var(--turq);background:var(--light);transform:translateY(-1px)}
.bh-cats a[aria-current]{background:var(--navy);border-color:var(--navy);color:#fff}
.bh-cats i{font-style:normal;font-family:var(--mono);font-size:.6875rem;
  color:var(--muted);font-weight:400}
.bh-cats a[aria-current] i{color:rgba(255,255,255,.62)}

/* ---------- the card grid ------------------------------------------------
   Astra Addon's blog-layout-1 markup, restyled. The layout was previously
   layout 6, which paints the featured image as the card BACKGROUND: white
   titles landed on a pale photograph and were unreadable.                   */
.vr-blog .site-main > .ast-row,
.vr-blog .ast-row{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  max-width:var(--wrap);margin:0 auto;padding:0 24px 8px}
.vr-blog .ast-article-post{margin:0;padding:0;border:0;background:none}
/* Astra Addon sizes the columns itself, emitting `width:33.33%` on the article
   through its dynamic stylesheet. Inside a grid track that is 33% OF THE TRACK,
   so every card rendered 126px wide inside a 377px column. The grid owns the
   column widths here, so the article must simply fill the one it is in. */
.vr-blog .ast-article-post{width:100% !important;max-width:none !important}

/* height:100% on both the article and the inner wrapper, then a column flex,
   is what makes a row of cards line up: the excerpts differ in length and
   without it each card was as tall as its own text. */
.vr-blog .ast-article-post,
.vr-blog .ast-article-post > .ast-article-inner{height:100%}
.vr-blog .ast-article-inner{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--hair);border-radius:var(--r-card);overflow:hidden;
  box-shadow:var(--sh);
  transition:transform var(--t3) var(--ease),box-shadow var(--t3) var(--ease),
    border-color var(--t3) var(--ease)}
.vr-blog .ast-article-inner:hover{transform:translateY(-3px);
  box-shadow:var(--sh-lg);border-color:#CFD9E2}
.vr-blog .ast-article-inner > .post-content{display:flex;flex-direction:column;
  flex:1 1 auto;padding:0}

.vr-blog .ast-blog-featured-section{margin:0}
.vr-blog .post-thumb-img-content{margin:0;overflow:hidden}
.vr-blog .post-thumb-img-content a{display:block}
.vr-blog .post-thumb-img-content img{width:100%;aspect-ratio:16/9;object-fit:cover;
  border-radius:0;transition:transform 400ms var(--ease)}
.vr-blog .ast-article-inner:hover .post-thumb-img-content img{transform:scale(1.03)}

/* Astra prints the title before the meta, so the category chips are pulled
   above it with order rather than by moving markup. */
.vr-blog .ast-article-post .entry-title{order:2;margin:0;padding:0 22px;
  font-size:1.0625rem !important;line-height:1.36;letter-spacing:-.015em;
  font-weight:700}
.vr-blog .ast-article-post .entry-title a{color:var(--navy);text-decoration:none;
  transition:color var(--t2) var(--ease)}
.vr-blog .ast-article-inner:hover .entry-title a{color:var(--turq-d)}
.vr-blog .ast-article-post .entry-header{order:1;margin:0;padding:20px 22px 10px;
  border:0}
.vr-blog .ast-article-post .entry-meta{font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);line-height:1.5}
.vr-blog .ast-article-post .entry-meta a{color:var(--turq-d);text-decoration:none;
  font-weight:600}
.vr-blog .ast-article-post .entry-meta a:hover{text-decoration:underline;
  text-underline-offset:2px}

.vr-blog .ast-excerpt-container{order:3;padding:10px 22px 0;flex:1 1 auto}
.vr-blog .ast-excerpt-container p{margin:0;font-size:.9375rem;line-height:1.62;
  color:var(--muted)}

/* margin-top:auto pins the action to the bottom of whatever height the card
   ends up at, which is the other half of making a row look aligned. */
.vr-blog .ast-read-more-container{order:4;margin:auto 0 0;padding:18px 22px 22px}
.vr-blog .ast-read-more-container a{display:inline-flex;align-items:center;gap:8px;
  font-size:.8125rem;font-weight:700;color:var(--turq-d);text-decoration:none}
.vr-blog .ast-read-more-container a::after{content:"\2192";
  transition:transform var(--t2) var(--ease)}
.vr-blog .ast-article-inner:hover .ast-read-more-container a::after{transform:translateX(4px)}
.vr-blog .ast-article-post .entry-content{display:none}

/* ---------- pagination --------------------------------------------------- */
.vr-blog .ast-pagination,.vr-blog .navigation.pagination{max-width:var(--wrap);
  margin:0 auto;padding:40px 24px 8px}
.vr-blog .navigation.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;
  align-items:center;justify-content:center}
.vr-blog .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 14px;border:1px solid var(--hair);
  border-radius:var(--r-pill);background:#fff;font-size:.875rem;font-weight:600;
  color:var(--navy);text-decoration:none;
  transition:border-color var(--t2) var(--ease),background var(--t2) var(--ease)}
.vr-blog a.page-numbers:hover{border-color:var(--turq);background:var(--light)}
.vr-blog .page-numbers.current{background:var(--navy);border-color:var(--navy);color:#fff}
.vr-blog .page-numbers .ast-right-arrow,.vr-blog .page-numbers .ast-left-arrow{
  margin:0 0 0 6px}

/* ---------- single post: one reading column ------------------------------
   Astra was told per post to hide the title and the featured image, so two
   posts had no <h1> at all. Both switches are cleared; this styles what the
   theme now prints.                                                          */
.vr-blog.single .ast-article-single{padding:0;border:0;background:none}
.vr-blog.single .site-main > article > .single-layout-1{max-width:840px;margin:0 auto;
  padding:0 24px}
.vr-blog.single .entry-header{margin:0;padding:44px 0 0;border:0;text-align:left}
.vr-blog.single .entry-header .entry-meta{font-family:var(--mono);font-size:.75rem;
  letter-spacing:var(--track-meta);text-transform:uppercase;color:var(--muted);
  margin:0 0 14px}
.vr-blog.single .entry-header .entry-meta a{color:var(--turq-d);font-weight:600;
  text-decoration:none}
.vr-blog.single .entry-title{font-size:clamp(1.9rem,3.6vw,2.7rem) !important;
  line-height:1.09;letter-spacing:-.03em;font-weight:800;color:var(--navy);
  margin:0 0 18px;text-wrap:balance}
/* The source images are square or portrait, so at full column width the hero
   filled an entire screen before a single line of the article. Cropping to 16:9
   with a ceiling keeps it an illustration rather than a landing page. */
.vr-blog.single .post-thumb img{border-radius:var(--r-card);border:1px solid var(--hair);
  width:100%;aspect-ratio:16/9;max-height:400px;object-fit:cover}
.vr-blog.single .ast-single-post-featured-section{margin:6px 0 30px}
.vr-blog.single .ast-single-post-order{margin:0 0 26px}

/* breadcrumb */
.vr-blog .ast-breadcrumbs-wrapper{margin:0 0 22px}
.vr-blog .trail-items{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;
  list-style:none;font-size:.8125rem;color:var(--muted)}
.vr-blog .trail-items li::after{content:"/";margin-left:8px;color:#B9C4CF}
.vr-blog .trail-items li:last-child::after{content:none}
.vr-blog .trail-items a{color:var(--muted);text-decoration:none}
.vr-blog .trail-items a:hover{color:var(--turq-d);text-decoration:underline;
  text-underline-offset:2px}

/* ---------- prose ---------------------------------------------------------
   One measure for the whole article. 72ch keeps a line at a readable length
   while the code blocks and tables below are allowed to break out of it.     */
.vr-blog .entry-content{font-size:1.0625rem;line-height:1.75;color:var(--ink)}
.vr-blog .entry-content > p,
.vr-blog .entry-content > ul,
.vr-blog .entry-content > ol,
.vr-blog .entry-content > h2,
.vr-blog .entry-content > h3,
.vr-blog .entry-content > h4,
.vr-blog .entry-content > blockquote{max-width:72ch}
.vr-blog .entry-content p{margin:0 0 22px}
.vr-blog .entry-content h2{font-size:clamp(1.5rem,2.4vw,1.875rem) !important;
  line-height:1.18;letter-spacing:-.02em;font-weight:750;color:var(--navy);
  margin:52px 0 16px;text-wrap:balance}
.vr-blog .entry-content h3{font-size:1.1875rem !important;line-height:1.3;
  font-weight:700;color:var(--navy);margin:36px 0 12px}
.vr-blog .entry-content h4{font-size:1.0625rem !important;font-weight:700;
  color:var(--navy);margin:28px 0 10px}
.vr-blog .entry-content a{color:var(--turq-d);text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}
.vr-blog .entry-content a:hover{text-decoration-thickness:2px}
.vr-blog .entry-content ul,.vr-blog .entry-content ol{margin:0 0 22px;padding-left:24px}
.vr-blog .entry-content li{margin:0 0 8px}
.vr-blog .entry-content strong{font-weight:700;color:var(--navy)}
.vr-blog .entry-content img{border-radius:var(--r-card);border:1px solid var(--hair);
  margin:8px 0 26px}
.vr-blog .entry-content hr{border:0;border-top:1px solid var(--hair);margin:44px 0}
.vr-blog .entry-content blockquote{margin:0 0 26px;padding:4px 0 4px 22px;
  border-left:3px solid var(--turq);font-size:1.125rem;line-height:1.6;
  color:var(--navy);font-style:normal}
.vr-blog .entry-content blockquote p:last-child{margin:0}

/* Wide content scrolls inside its own box so the page body never scrolls
   sideways. This is the rule the mobile pass keeps needing. */
.vr-blog .entry-content pre,.vr-blog .entry-content .code-block{overflow-x:auto}
.vr-blog .entry-content pre{background:var(--light);border:1px solid var(--hair);
  border-radius:var(--r);padding:18px 20px;margin:0 0 26px;
  font-family:var(--mono);font-size:.8125rem;line-height:1.6;color:var(--navy)}
.vr-blog .entry-content code{font-family:var(--mono);font-size:.875em;
  background:var(--light);border:1px solid var(--hair);border-radius:6px;
  padding:2px 6px;color:var(--teal)}
.vr-blog .entry-content pre code{background:none;border:0;padding:0;color:inherit}

/* Astra draws a full grid on .entry-content tables; the design uses horizontal
   hairlines. The wrapper is what stops a wide table widening the page. */
.vr-blog .entry-content table{width:100%;margin:0 0 26px;border-collapse:collapse;
  font-size:.9375rem;display:block;overflow-x:auto}
.vr-blog .entry-content th,.vr-blog .entry-content td{border:0;
  border-bottom:1px solid var(--hair);padding:11px 14px;text-align:left;
  background:transparent;vertical-align:top}
.vr-blog .entry-content thead th{font-family:var(--mono);font-size:.6875rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid #CFD9E2;white-space:nowrap}
.vr-blog .entry-content tr:last-child td{border-bottom:0}

/* ---------- the one article that was pasted as a whole HTML page ----------
   Post 1983 arrived as a complete document with its own 11 KB dark stylesheet.
   blog-unwrap.php strips the document chrome and that stylesheet but keeps the
   author's layout classes, which are styled here in the light palette so the
   structure survives without repainting the site.
   -------------------------------------------------------------------------- */
.vr-blog .lead-text{font-size:1.1875rem;line-height:1.68;color:var(--muted);
  max-width:68ch;margin:0 0 32px}
.vr-blog .content-section{margin:0 0 8px}
.vr-blog .section-title{font-size:clamp(1.5rem,2.4vw,1.875rem) !important;
  line-height:1.18;letter-spacing:-.02em;font-weight:750;color:var(--navy);
  margin:52px 0 16px}
.vr-blog .content-text{max-width:72ch}
.vr-blog .highlight-list li,.vr-blog .highlight-list{max-width:72ch}
.vr-blog .highlight-list{margin:0;padding-left:22px}
.vr-blog .highlight-list li{margin:0 0 10px}
.vr-blog .field-name{font-family:var(--mono);font-size:.875em;color:var(--teal)}
.vr-blog .code-inline{font-family:var(--mono);font-size:.875em;background:var(--light);
  border:1px solid var(--hair);border-radius:6px;padding:2px 6px;color:var(--teal)}

/* code block with its own label row */
.vr-blog .code-block{background:var(--light);border:1px solid var(--hair);
  border-radius:var(--r);margin:0 0 26px;overflow:hidden}
.vr-blog .code-header{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 16px;background:#EDF2F6;border-bottom:1px solid var(--hair)}
.vr-blog .code-title{font-family:var(--mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.vr-blog .code-block pre{background:none;border:0;border-radius:0;margin:0}

/* callouts. Each keeps the meaning its emoji used to carry, in the border. */
.vr-blog .highlight-box,.vr-blog .info-box,.vr-blog .tip-box{
  border:1px solid var(--hair);border-left:3px solid var(--cyan);
  border-radius:var(--r);background:var(--light);padding:18px 20px;
  margin:0 0 26px;max-width:72ch}
.vr-blog .tip-box{border-left-color:var(--turq)}
.vr-blog .highlight-box{border-left-color:var(--ai)}
.vr-blog .info-text,.vr-blog .tip-text,.vr-blog .warning-text{margin:0;
  font-size:.9375rem;line-height:1.65}
.vr-blog .warning-text{color:#8A3A12}
.vr-blog .info-box:has(.warning-text){border-left-color:var(--gD)}

/* stats: a real figure and its label, so the tiles read as data */
.vr-blog .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:14px;margin:0 0 30px}
.vr-blog .stats-card{background:#fff;border:1px solid var(--hair);
  border-radius:var(--r-card);padding:18px 20px}
.vr-blog .stats-title{font-family:var(--mono);font-size:.6875rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.vr-blog .stats-value{font-size:1.0625rem;line-height:1.5;font-weight:700;
  color:var(--navy);margin:0;font-variant-numeric:tabular-nums}
.vr-blog .stats-item{margin:0 0 6px;font-size:.9375rem;line-height:1.55}

/* numbered steps: the number is the structure, so it stays visible */
.vr-blog .steps-list{list-style:none;margin:0 0 30px;padding:0;counter-reset:none}
.vr-blog .steps-list li{display:grid;grid-template-columns:32px 1fr;gap:14px;
  margin:0 0 16px;max-width:72ch}
.vr-blog .step-number{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:var(--r-pill);background:var(--navy);
  color:#fff;font-family:var(--mono);font-size:.8125rem;font-weight:700}

.vr-blog .action-card{background:#fff;border:1px solid var(--hair);
  border-radius:var(--r-card);padding:18px 20px;margin:0 0 14px}
.vr-blog .action-card-title{font-size:1rem !important;font-weight:700;
  color:var(--navy);margin:0 0 6px}
.vr-blog .action-card-text{margin:0;font-size:.9375rem;color:var(--muted)}
.vr-blog .action-icon{display:none}

/* the article's own table of contents */
.vr-blog .toc-box{background:var(--light);border:1px solid var(--hair);
  border-radius:var(--r-card);padding:22px 24px;margin:0 0 36px;max-width:72ch}
.vr-blog .toc-title{font-family:var(--mono);font-size:.75rem !important;font-weight:600;
  letter-spacing:var(--track-meta);text-transform:uppercase;color:var(--muted);
  margin:0 0 14px}
.vr-blog .toc-list{list-style:none;margin:0;padding:0;
  columns:2;column-gap:28px}
.vr-blog .toc-list li{margin:0 0 8px;break-inside:avoid}
/* Each entry used to carry a typed bullet character inside its link, which
   blog-unwrap.php removes; the marker is drawn here instead so it can be
   coloured and aligned. */
.vr-blog .toc-list a{display:inline-flex;gap:9px;font-size:.9375rem;color:var(--navy);
  text-decoration:none}
.vr-blog .toc-list a::before{content:"";flex:0 0 auto;width:5px;height:5px;margin-top:.55em;
  border-radius:50%;background:var(--turq)}
.vr-blog .toc-list a:hover{color:var(--turq-d);text-decoration:underline;
  text-underline-offset:2px}
.vr-blog .data-table{width:100%}

/* ---------- previous/next and related ------------------------------------ */
.vr-blog .post-navigation{max-width:840px;margin:48px auto 0;padding:24px 24px 0;
  border-top:1px solid var(--hair)}
.vr-blog .post-navigation .nav-links{display:flex;flex-wrap:wrap;gap:14px;
  justify-content:space-between}
.vr-blog .post-navigation a{font-size:.875rem;font-weight:600;color:var(--turq-d);
  text-decoration:none}
.vr-blog .post-navigation a:hover{text-decoration:underline;text-underline-offset:2px}

.vr-blog .ast-related-posts-wrapper{max-width:var(--wrap);margin:56px auto 0;
  padding:44px 24px 0;border-top:1px solid var(--hair)}
.vr-blog .ast-related-posts-title{font-size:1.375rem !important;font-weight:750;
  letter-spacing:-.02em;color:var(--navy);margin:0 0 24px}
.vr-blog .ast-related-post-content{padding:18px 20px}
.vr-blog .ast-related-posts-inner{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.vr-blog .ast-related-post{background:#fff;border:1px solid var(--hair);
  border-radius:var(--r-card);overflow:hidden;
  transition:transform var(--t3) var(--ease),box-shadow var(--t3) var(--ease)}
.vr-blog .ast-related-post:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.vr-blog .ast-related-post-featured-section img{width:100%;aspect-ratio:16/9;
  object-fit:cover}
.vr-blog .ast-related-post-title{font-size:1rem !important;line-height:1.36;
  font-weight:700;margin:0}
.vr-blog .ast-related-post-title a{color:var(--navy);text-decoration:none}

/* ---------- blog responsive ---------------------------------------------- */
@media (max-width:1000px){
  .vr-blog .ast-row{grid-template-columns:repeat(2,1fr);gap:22px}
  .vr-blog .toc-list{columns:1}
}
@media (max-width:680px){
  .vr-blog .ast-row{grid-template-columns:1fr;gap:18px}
  .vr-blog .bh{padding:36px 20px 28px}
  .vr-blog .ast-row,.vr-blog .navigation.pagination{padding-left:20px;padding-right:20px}
  .vr-blog.single .site-main > article > .single-layout-1{padding:0 20px}
  .vr-blog .entry-content{font-size:1rem}
  .vr-blog .stats-grid{grid-template-columns:1fr}
  .vr-blog .steps-list li{grid-template-columns:26px 1fr;gap:11px}
  .vr-blog .toc-box,.vr-blog .highlight-box,.vr-blog .info-box,
  .vr-blog .tip-box{padding:16px 18px}
}