/* v2: "Lagoon at night". Dark teal and deep green (the colours Nazim prefers), with the v2 build kept:
   Three layers:
   1. .sky   one fixed, static painting: teal glow, sea green, deep night, a little sky blue and gold, grain.
   2. .glass frosted panels: tinted, grained, catch-light top edge, deep shadows.
   3. .lq / .dock / .xtabs  liquid-glass controls, gold primary buttons.
   Type: Fraunces (soft, a little wonky) for headlines, a size up from v1.
   Speed: blur only where it shows (over photos, the dock, projector panels);
   18px max on the projector, 10px on phones; nothing blurred animates. */

html.v2 {
  --ink: #F1FAF9;
  --ink-2: rgb(241 250 249 / .74);
  --ink-3: rgb(241 250 249 / .5);
  --lagoon-ink: #5FD6C8;       /* bright teal for icons and small text on dark */
  --gold-btn: #F2B441;
  --gold-ink: #F6C96A;
  --warm-shadow: 0 10 12;      /* shadows: near-black with a teal cast */
  --text: var(--ink);
  --muted: var(--ink-2);
  --faint: rgb(241 250 249 / .14);
  --lagoon: #19B3A6;
  --gold: #F6C343;
  --serif: "Fraunces", "Instrument Serif", Georgia, serif;
  --grain-dark: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  .16 0 0 0 -.05'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --grain-light: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  .3 0 0 0 -.1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --frost: linear-gradient(165deg, rgb(28 92 98 / .62), rgb(8 44 50 / .5));
  --frost-solid: linear-gradient(165deg, rgb(20 74 80 / .9), rgb(7 36 42 / .86));
  background: #04161B;
  color-scheme: dark;
}
.v2 body { color: var(--ink); }
.v2 :focus-visible { outline-color: var(--lagoon-ink); }
.v2 ::selection { background: rgb(25 179 166 / .45); color: #fff; }

/* ---------- Headlines: Fraunces, a size up, more character ---------- */
.v2 .h2, .v2 .title, .v2 .bhero-card h1, .v2 .rot, .v2 .acc-row b {
  font-variation-settings: "SOFT" 60, "WONK" 1; font-optical-sizing: auto;
}
.v2 .h2 { font-size: clamp(3rem, 13vw, 4.9rem); letter-spacing: -0.025em; line-height: .96; }
.v2 .title { letter-spacing: -0.035em; }
.v2 .bhero-card h1 { letter-spacing: -0.03em; }

/* ---------- Layer 1: the lagoon at night, painted once ---------- */
.v2 .aurora, .v2 .grain { display: none; }
.v2 .sky {
  position: fixed; left: 0; right: 0; top: 0; height: 100lvh; z-index: -3; pointer-events: none;
  background:
    var(--grain-dark) 0 0 / 160px,
    radial-gradient(60% 46% at 8% 4%, rgb(25 179 166 / .5), rgb(25 179 166 / 0) 100%),     /* teal glow, top left */
    radial-gradient(46% 40% at 96% 34%, rgb(95 201 243 / .2), rgb(95 201 243 / 0) 100%),   /* sky blue, right */
    radial-gradient(52% 34% at 26% 104%, rgb(246 195 67 / .16), rgb(246 195 67 / 0) 100%), /* gold, low left */
    radial-gradient(40% 28% at 88% 100%, rgb(255 138 91 / .12), rgb(255 138 91 / 0) 100%), /* sunset, low right */
    linear-gradient(180deg, #0D4045 0%, #093238 34%, #062328 66%, #04161B 100%);
}

/* ---------- Layer 2: frosted panels ---------- */
.v2 .glass {
  color: var(--ink);
  background: var(--grain-light) 0 0 / 140px, var(--frost-solid);
  border: 1px solid rgb(255 255 255 / .14);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .2),
    inset 0 -1px 0 rgb(255 255 255 / .04),
    0 1px 2px rgb(var(--warm-shadow) / .3),
    0 26px 54px -26px rgb(var(--warm-shadow) / .8);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.v2 .glass::after { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, -30%), rgb(95 214 200 / .14), transparent 62%); }

/* Real blur only where there is something behind to blur: over photos, and the toast */
.v2 .hero-end, .v2 .acc-info, .v2 .toast {
  background: var(--grain-light) 0 0 / 140px, var(--frost);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
}

/* ---------- Layer 3: liquid glass controls ---------- */
.v2 .lq, .v2 .dock, .v2 .xtabs {
  color: var(--ink);
  background: linear-gradient(180deg, rgb(255 255 255 / .17), rgb(255 255 255 / .06)), rgb(8 44 50 / .55);
  border: 1px solid rgb(255 255 255 / .2);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .34),
    inset 0 -1px 1px rgb(255 255 255 / .08),
    inset 0 -10px 18px -14px rgb(95 214 200 / .5),
    0 14px 30px -18px rgb(var(--warm-shadow) / .85);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.v2 .lq.gold {
  color: #2A1A00;
  background: linear-gradient(180deg, #F8CD6E, #EDA737);
  border-color: rgb(255 240 200 / .9);
  box-shadow:
    inset 0 1px 0 rgb(255 248 225 / .95),
    inset 0 -8px 16px -10px rgb(176 98 20 / .45),
    0 14px 30px -16px rgb(176 98 20 / .55);
}
.v2 .chip { color: var(--ink); }
.v2 .chip.sample { background: rgb(246 195 67 / .16); border-color: rgb(246 195 67 / .4); color: #F6D27A; }

/* the dock floats over everything, so it keeps a real (small) blur */
.v2 .dock {
  background: linear-gradient(180deg, rgb(255 255 255 / .14), rgb(255 255 255 / .05)), rgb(6 34 40 / .55);
  -webkit-backdrop-filter: blur(10px) saturate(1.5); backdrop-filter: blur(10px) saturate(1.5);
}
.v2 .dock a { color: var(--ink-2); }
.v2 .dock a.on, .v2 .xtabs button[aria-selected="true"] {
  color: var(--ink);
  background: linear-gradient(180deg, rgb(255 255 255 / .24), rgb(255 255 255 / .1));
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .4), inset 0 -2px 6px rgb(95 214 200 / .25), 0 6px 14px -6px rgb(var(--warm-shadow) / .7);
}
.v2 .dock a.on .ic, .v2 .xtabs button[aria-selected="true"] .ic { color: var(--lagoon-ink); }
.v2 .xtabs button { color: var(--ink-2); }

/* ---------- Hero ---------- */
.v2 .title { color: var(--ink); }
.v2 .rot { color: var(--ink); }
.v2 .hero-media::after { background: linear-gradient(0deg, rgb(4 22 27 / .82), rgb(4 22 27 / 0) 55%); }
.v2 .hint { color: #fff; }
.v2 .hint i { background: linear-gradient(#fff, transparent); }
.v2 .by .dot { color: #fff; background: linear-gradient(135deg, #19B3A6, #5FC9F3); }

/* ---------- Photos: frosted frames, dark scrims stay under white text ---------- */
.v2 .acc-item {
  color: #fff; border: 1px solid rgb(255 255 255 / .22);
  box-shadow: 0 0 0 4px rgb(255 255 255 / .07), 0 18px 40px -24px rgb(var(--warm-shadow) / .9);
}
.v2 .acc-item::after { background: linear-gradient(0deg, rgb(4 22 27 / .82), rgb(4 22 27 / 0) 60%); }
.v2 .acc-info { color: var(--ink); }

/* ---------- Panels ---------- */
.v2 .ib { background: linear-gradient(180deg, rgb(255 255 255 / .16), rgb(255 255 255 / .05)); border-color: rgb(255 255 255 / .2); color: var(--lagoon-ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 4px 10px -6px rgb(var(--warm-shadow) / .6); }
.v2 .did .ib { display: grid; } /* .talk .did span {display:block} was knocking the icon out of its box */
.v2 .now { border-color: rgb(246 195 67 / .5); }
.v2 .now::before { background: radial-gradient(closest-side, rgb(246 195 67 / .22), transparent); }
.v2 .w .bar { background: rgb(255 255 255 / .1); }
.v2 .w .bar i { background: linear-gradient(90deg, #19B3A6, #5FC9F3); }
.v2 .w .ring .t, .v2 .score .t { stroke: rgb(255 255 255 / .1); }
.v2 .w .ring .v { stroke: #F6C343; }
.v2 .xpanel .step-n { color: var(--lagoon-ink); }
.v2 .rows .ic { color: var(--lagoon-ink); }
.v2 .aibox .rows .ic { color: var(--gold-ink); }
.v2 .vs .vs-b { border-color: rgb(246 195 67 / .55); }
.v2 .vs .vs-b b { color: var(--lagoon-ink); }
.v2 .ask { border-color: rgb(246 195 67 / .5); }
.v2 .ask input {
  color: var(--ink); background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .2);
  box-shadow: inset 0 1px 2px rgb(var(--warm-shadow) / .3);
}
.v2 .ask input::placeholder { color: var(--ink-3); }
.v2 .ask input:focus { border-color: var(--lagoon-ink); background: rgb(255 255 255 / .12); }
.v2 .sw { background: rgb(255 255 255 / .18); }
.v2 .sw[aria-checked="true"] { background: var(--lagoon); }
.v2 .sw i { box-shadow: 0 2px 6px rgb(var(--warm-shadow) / .5); }
.v2 footer { color: var(--ink-2); }

/* ---------- Projector (1024px and up) ---------- */
@media (min-width: 1024px) {
  /* the big panels get real frost on the projector: 18px, never animated */
  .v2 .glass {
    background: var(--grain-light) 0 0 / 140px, var(--frost);
    -webkit-backdrop-filter: blur(18px) saturate(1.35); backdrop-filter: blur(18px) saturate(1.35);
  }
  .v2 .hero-end, .v2 .acc-info, .v2 .toast {
    -webkit-backdrop-filter: blur(16px) saturate(1.35); backdrop-filter: blur(16px) saturate(1.35);
  }
  .v2 .lq, .v2 .xtabs {
    -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5);
  }
  .v2 .lq.gold { background: linear-gradient(180deg, #F8CD6E, #EDA737); }
  /* rows in the story list are small: no blur needed under them */
  .v2.talk .hero-media::after { background: linear-gradient(0deg, rgb(4 22 27 / .45), rgb(4 22 27 / 0) 28%); }
  .v2.talk .hero-media { filter: none; }
  .v2.talk .prog { background: rgb(255 255 255 / .08); }
  .v2.talk .prog i { background: linear-gradient(90deg, #19B3A6, #5FC9F3, #F6C343); box-shadow: none; }
  .v2.talk .slide-n { color: var(--ink-2); }
  .v2 .acc-item { box-shadow: 0 0 0 .35rem rgb(255 255 255 / .07), 0 1.4rem 3rem -1.6rem rgb(var(--warm-shadow) / .9); }
  .v2.talk .stack .lq .ic { color: var(--lagoon-ink); }
  .v2.talk .stack .lq.gold .ic { color: #2A1A00; }
  /* headlines a size up on the big screen */
  .v2.talk .h2 { font-size: 5.9rem; line-height: .9; }
  .v2.talk :is(#story, #map, #aeo) .h2 { font-size: 5rem; } /* the three fullest slides keep the old size so they still fit */
  .v2.talk #story .h2 { font-size: 4.7rem; }
  .v2.talk .title { font-size: 9.6rem; }
  .v2.talk #share .h2 { font-size: 7.2rem; }
  .v2.bizpage .h2 { font-size: 5.2rem; }
  .v2.bizpage .bhero-card h1 { font-size: 8rem; }
}

/* ---------- Phones: at most 3 blurred items on screen (dock, plus hero card or open business card) ---------- */
@media (max-width: 1023px) {
  .v2 .xtabs { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .v2 .acc { gap: 12px; padding-top: 4px; }
}

/* Old browsers with no backdrop-filter: just make the glass solid */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .v2 .glass, .v2 .dock, .v2 .lq:not(.gold) { background: rgb(8 40 46 / .96); }
}

/* Glass inside glass: the panel behind is already frosted, so skip the second blur */
.v2 .glass .glass { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ================= Round 3 (Nazim 03-11-2026): depth, contrast, colour accents, glow + shimmer, link pills, slide buttons ================= */

/* More contrast: secondary text a step brighter */
html.v2 { --ink-2: rgb(241 250 249 / .82); --faint: rgb(241 250 249 / .16); }

/* More depth: a second, wider shadow under panels, controls and photos */
.v2 .glass {
  border-color: rgb(255 255 255 / .16);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .24),
    inset 0 -1px 0 rgb(255 255 255 / .05),
    0 2px 4px rgb(var(--warm-shadow) / .35),
    0 18px 36px -18px rgb(var(--warm-shadow) / .7),
    0 54px 90px -44px rgb(var(--warm-shadow) / .8);
}
.v2 .lq:not(.gold), .v2 .dock { box-shadow: inset 0 1px 0 rgb(255 255 255 / .34), inset 0 -1px 1px rgb(255 255 255 / .08), inset 0 -10px 18px -14px rgb(95 214 200 / .5), 0 4px 8px -2px rgb(var(--warm-shadow) / .45), 0 22px 40px -20px rgb(var(--warm-shadow) / .9); }
.v2 .lq.gold { box-shadow: inset 0 1px 0 rgb(255 248 225 / .95), inset 0 -8px 16px -10px rgb(176 98 20 / .45), 0 4px 10px -2px rgb(176 98 20 / .35), 0 18px 36px -14px rgb(176 98 20 / .6); }
.v2 .acc-item { box-shadow: 0 0 0 4px rgb(255 255 255 / .06), 0 6px 14px -4px rgb(var(--warm-shadow) / .5), 0 36px 70px -30px rgb(var(--warm-shadow) / .95); }

/* A little colour in small text, used sparingly: pale teal for chips and links, pale gold for the AEO side */
.v2 .chip { color: #A8EDE4; border-color: rgb(168 237 228 / .3); }
.v2 .vs-a small { color: #A8EDE4; }
.v2 .vs-b small { color: #F6D27A; }

/* Headlines: soft teal glow (no moving shimmer: Nazim took it out 03-11-2026) */
.v2 .h2, .v2 .title .get, .v2 .bhero-card h1 {
  text-shadow: 0 0 .5em rgb(95 214 200 / .26), 0 0 .06em rgb(255 255 255 / .3);
}

/* Business photos: a short glowing link name at the bottom of each photo (names stay vertical on the projector) */
.acc-go { display: none; }
.slide-ctl { display: none; }
@media (min-width: 1024px) {
  .talk .acc-go {
    display: inline-flex; align-items: center; gap: .3rem; position: absolute; z-index: 4; left: 50%; bottom: 1.3rem; transform: translateX(-50%);
    white-space: nowrap; font: 600 1.02rem/1 var(--sans); letter-spacing: .01em; color: #D4FAF4;
    text-decoration: underline; text-decoration-thickness: 1.5px; text-decoration-color: rgb(168 237 228 / .7); text-underline-offset: .3em;
    text-shadow: 0 0 .25em rgb(95 214 200 / .7), 0 0 .9em rgb(95 214 200 / .55);
    transition: opacity .3s, color .25s, text-shadow .25s;
  }
  .talk .acc-go .ic { width: .95em; height: .95em; transform: rotate(-45deg); }
  .talk .acc-item.on .acc-go { opacity: 0; }
  .talk .acc-item:hover .acc-go { color: #fff; text-shadow: 0 0 .25em rgb(95 214 200 / .9), 0 0 1.2em rgb(95 214 200 / .8); }

  /* Mouse: previous / next buttons beside the slide counter */
  .talk .slide-ctl { display: flex; align-items: center; gap: .5rem; position: fixed; z-index: 60; right: 2vw; bottom: 3vh; }
  .talk .slide-ctl .slide-n { position: static; display: block; min-width: 3.8rem; text-align: center; }
  /* true circles, arrow in the middle (.lq is a flex row with space-between, so reset it) */
  .talk .sn-btn { flex: none; width: 2.8rem; height: 2.8rem; min-width: 0; min-height: 0; padding: 0; border-radius: 50%; display: grid; place-items: center; place-content: center; cursor: pointer; color: var(--ink); }
  .talk .sn-btn .ic { width: 1.1rem; height: 1.1rem; margin: 0; transform: rotate(var(--rot, 90deg)); }
  .talk .sn-btn:hover { color: #A8EDE4; }
}
@media (min-width: 1024px) {
  /* the vertical name is rotated 180deg, so its top padding is the visual bottom: leave room for the link */
  .talk .acc-row { padding-top: 4.4rem; }
}

/* Projector: no bounce and no two-finger "back" swipe; the page only moves by whole slides */
@media (min-width: 1024px) { html.talk { overscroll-behavior: none; } }

/* Big QR (Nazim 04-11-2026): the "Follow along" card grows a little on hover; click (or Q) fills the screen with the QR */
.v2.talk .hero-qr { cursor: zoom-in; }
.v2.talk .hero-qr .qr { transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.v2.talk .hero-qr:hover .qr, .v2.talk .hero-qr:focus-visible .qr { transform: scale(1.08); }
.v2.talk .hero-qr:focus-visible { outline: 2px solid #A8EDE4; outline-offset: 4px; }
.qr-big { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgb(3 18 22 / .96); opacity: 0; transition: opacity .25s; cursor: zoom-out; }
.qr-big[hidden] { display: none; }
.qr-big.on { opacity: 1; }
.qr-big-card { display: flex; flex-direction: column; align-items: center; text-align: center; transform: scale(.9); transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
.qr-big.on .qr-big-card { transform: none; }
.qr-big .qr { width: min(62vh, 36rem); height: min(62vh, 36rem); padding: 1.4rem; border-radius: 1.6rem; box-shadow: 0 2rem 5rem rgb(0 0 0 / .55), 0 0 0 1px rgb(255 255 255 / .25), 0 0 4rem rgb(95 214 200 / .18); }
.qr-big p { margin: 3.2vh 0 0; font: 500 3.4rem/1 var(--serif); color: var(--ink); text-shadow: 0 0 .5em rgb(95 214 200 / .26); }
.qr-big span { margin-top: 1.2vh; font: 500 1.6rem var(--sans); color: #A8EDE4; letter-spacing: .01em; }
.qr-big small { margin-top: 2.6vh; font: 400 1rem var(--sans); color: var(--ink-2); opacity: .7; }
@media (prefers-reduced-motion: reduce) { .qr-big, .qr-big-card, .v2.talk .hero-qr .qr { transition: none; } }

/* ================= Round 5 (Nazim 04-11-2026) ================= */
/* Clear frosted glass: see-through, real blur, bright rim, no grain. Use it on buttons and some text boxes;
   keep the textured .glass on others, for balance. Nothing with this class may animate (blur is costly). */
.v2 .frost-clear {
  color: var(--ink);
  background: linear-gradient(160deg, rgb(255 255 255 / .16), rgb(255 255 255 / .04) 55%, rgb(95 214 200 / .06)), rgb(10 52 58 / .22);
  border: 1px solid rgb(255 255 255 / .22);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .38), inset 0 -1px 0 rgb(255 255 255 / .06), inset 0 0 22px rgb(255 255 255 / .04), 0 18px 40px -22px rgb(0 10 12 / .8);
  -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6);
}
@media (max-width: 1023px) { .v2 .frost-clear { -webkit-backdrop-filter: blur(10px) saturate(1.5); backdrop-filter: blur(10px) saturate(1.5); } }
.v2 .glass .frost-clear, .v2 .frost-clear .frost-clear { -webkit-backdrop-filter: none; backdrop-filter: none; } /* no glass-in-glass blur */

/* Buttons and the dock: clear frosted glass you can see through (Nazim: "much more transparent") */
.v2 .lq:not(.gold), .v2 .dock {
  background: linear-gradient(170deg, rgb(255 255 255 / .2), rgb(255 255 255 / .05) 60%, rgb(95 214 200 / .07)), rgb(10 52 58 / .18);
  border-color: rgb(255 255 255 / .24);
  -webkit-backdrop-filter: blur(16px) saturate(1.7); backdrop-filter: blur(16px) saturate(1.7);
}
.v2 .lq.gold { /* frosted gold: the colour stays, the frame behind shows through */
  color: #1E1300;
  background: linear-gradient(180deg, rgb(255 222 140 / .78), rgb(240 170 52 / .62));
  border-color: rgb(255 240 200 / .75);
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
}
.v2 .glass .lq, .v2 .frost-clear .lq { -webkit-backdrop-filter: none; backdrop-filter: none; } /* no glass-in-glass blur */
@media (max-width: 1023px) {
  .v2 .lq:not(.gold), .v2 .dock, .v2 .lq.gold { -webkit-backdrop-filter: blur(10px) saturate(1.5); backdrop-filter: blur(10px) saturate(1.5); }
}

/* Business photos: a soft band of light drifts across each one in turn; the open one glints brighter and slowly zooms */
.v2 .acc-item::before {
  content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / .1) 47%, rgb(255 255 255 / .16) 50%, rgb(255 255 255 / .1) 53%, transparent 62%);
  transform: translateX(-130%); animation: gf-sheen 10s cubic-bezier(.45, 0, .25, 1) infinite;
}
.v2 .acc-item:nth-child(2)::before { animation-delay: 1.4s; }
.v2 .acc-item:nth-child(3)::before { animation-delay: 2.8s; }
.v2 .acc-item:nth-child(4)::before { animation-delay: 4.2s; }
.v2 .acc-item:nth-child(5)::before { animation-delay: 5.6s; }
.v2 .acc-item:nth-child(6)::before { animation-delay: 7s; }
.v2 .acc-item.on::before {
  background: linear-gradient(105deg, transparent 34%, rgb(255 255 255 / .14) 45%, rgb(255 246 220 / .28) 50%, rgb(255 255 255 / .14) 55%, transparent 66%);
  animation-duration: 6s; animation-delay: .8s;
}
@keyframes gf-sheen { 0% { transform: translateX(-130%); } 22%, 100% { transform: translateX(130%); } }
.v2 .acc-item.on img { animation: gf-drift 16s ease-in-out 1.2s infinite alternate; }
@keyframes gf-drift { from { transform: scale(1); } to { transform: scale(1.07) translate(-1.2%, -.8%); } }

/* Circle charts on the map slide: the number sits inside its circle, the words beside it */
.v2 .w:has(> .ring) { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: 1rem; align-items: center; }
.v2 .w:has(> .ring) > small { grid-column: 1 / -1; align-self: start; }
.v2 .w:has(> .ring) .ring { position: static; grid-row: 2; grid-column: 1; }
.v2 .w:has(> .ring) .big { display: contents; }
.v2 .w:has(> .ring) .big span { grid-row: 2; grid-column: 1; justify-self: center; font-size: 1.5rem; }
.v2 .w:has(> .ring) .big span::after { content: "%"; font-size: .5em; margin-left: .04em; }
.v2 .w:has(> .ring) .big em { grid-row: 2; grid-column: 2; margin: 0; font: 500 1rem/1.25 var(--sans); color: var(--ink-2); }
@media (min-width: 1024px) {
  .talk .w:has(> .ring) .ring { width: min(8.4rem, 16vh); height: min(8.4rem, 16vh); }
  .talk .w:has(> .ring) .big span { font-size: min(3.2rem, 6vh); }
  .talk .w:has(> .ring) .big em { font-size: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) { .v2 .acc-item::before, .v2 .acc-item.on img { animation: none; } }