@font-face { font-family: "Clash Display"; src: url("../../../site/grinner.io/grinbot-build/art/fonts/ClashDisplay-Semibold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url("../../../site/grinner.io/grinbot-build/art/fonts/ClashDisplay-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* ---------- The review page itself (not part of any design) ---------- */
:root { --doc-bg: #e9e9ec; --doc-ink: #17171b; --doc-soft: #5b5b66; --doc-card: #ffffff; --doc-line: #d3d3da; --doc-pick: #d92d12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --doc-bg: #121215; --doc-ink: #ececf1; --doc-soft: #a0a0ad; --doc-card: #1c1c21; --doc-line: #2e2e36; --doc-pick: #ff6a4d; } }
:root[data-theme="dark"] { --doc-bg: #121215; --doc-ink: #ececf1; --doc-soft: #a0a0ad; --doc-card: #1c1c21; --doc-line: #2e2e36; --doc-pick: #ff6a4d; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--doc-bg); color: var(--doc-ink); font: 16px/1.55 "Instrument Sans", system-ui, sans-serif; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.doc { max-width: 1180px; margin: 0 auto; padding: 56px 16px 40px; }
.doc h1 { font: 700 clamp(2.4rem, 6vw, 4.6rem)/1 "Schibsted Grotesk", sans-serif; letter-spacing: -0.03em; margin: 0 0 18px; }
.doc h2 { font: 700 1.5rem/1.2 "Schibsted Grotesk", sans-serif; margin: 44px 0 12px; }
.doc h3 { font: 700 1.02rem/1.3 "Schibsted Grotesk", sans-serif; margin: 22px 0 6px; }
.doc p, .doc li { max-width: 58ch; }
.doc .lede { font-size: 1.15rem; max-width: 56ch; }
.doc p, .doc li { text-wrap: pretty; }
.doc .soft, .soft { color: var(--doc-soft); }
.inv { columns: 2 340px; column-gap: 40px; }
.inv section { break-inside: avoid; margin-bottom: 8px; }
.inv ul { margin: 4px 0 14px; padding-left: 18px; }
.inv li { margin: 3px 0; font-size: .95rem; }
.toc { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 18px; padding: 0; list-style: none; }
.toc a { text-decoration: none; display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--doc-line); }
.toc a b { font-variant-numeric: tabular-nums; min-width: 2.2em; }
.toc a.picked { color: var(--doc-pick); }
.picks-bar { position: sticky; top: 0; z-index: 90; background: var(--doc-card); border-bottom: 1px solid var(--doc-line); padding: 10px 16px; display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; font-size: .92rem; }
.picks-bar button { font: inherit; font-weight: 600; border: 1px solid var(--doc-ink); background: transparent; color: var(--doc-ink); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.picks-bar output { font-weight: 700; }
.tag { background: var(--doc-card); color: var(--doc-ink); border-top: 1px solid var(--doc-line); padding: 18px 16px 26px; }
.tag .in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 6px 24px; align-items: start; }
.tag h2 { font: 700 1.25rem/1.25 "Schibsted Grotesk", sans-serif; margin: 0; text-wrap: balance; }
.tag h2 span { color: var(--doc-soft); font-weight: 500; }
.tag p { margin: 2px 0; font-size: .93rem; max-width: 58ch; text-wrap: pretty; }
.tag p b { font-weight: 700; }
.tag .need { color: #b3261e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tag .need { color: #ff8a80; } }
.tag .in > :not(.pick) { grid-column: 1; }
.tag .pick { grid-row: 1 / span 4; grid-column: 2; font: 700 .95rem "Instrument Sans", sans-serif; border: 2px solid var(--doc-ink); color: var(--doc-ink); background: transparent; border-radius: 999px; padding: 9px 18px; cursor: pointer; white-space: nowrap; }
.tag .pick[aria-pressed="true"] { background: var(--doc-pick); border-color: var(--doc-pick); color: #fff; }
@media (max-width: 640px) { .tag .in { grid-template-columns: 1fr; } .tag .pick { grid-row: auto; grid-column: 1; justify-self: start; margin-top: 8px; } }
.credits { font-size: .9rem; width: 100%; border-collapse: collapse; }
.credits a { overflow-wrap: anywhere; }
.credits td, .credits th { text-align: left; padding: 4px 14px 4px 0; border-bottom: 1px solid var(--doc-line); vertical-align: top; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Shared design pieces: each one is a Grinner block or setting ---------- */
/* --p primary, --s secondary, --bg background, --sf surface, --tx text, --a1..--a4 accents, --fh heading font, --fb body font */
.btn { --bf: var(--tx); --bt: var(--bg); --hf: var(--p); --ht: var(--tx); position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font: 600 .95rem/1 var(--fb); padding: 13px 22px; border-radius: 999px; background: var(--bf); color: var(--bt); text-decoration: none; border: 2px solid var(--bf); cursor: pointer; white-space: nowrap; transition: color .35s, transform .35s cubic-bezier(.2,.7,.2,1), background .35s, border-color .35s; }
.btn.sq { border-radius: 4px; }
.btn.sm { padding: 10px 16px; font-size: .88rem; }
.btn.lg { padding: 18px 28px; font-size: 1.05rem; }
.btn.ghost { background: transparent; color: var(--bf); }
.btn svg { width: 18px; height: 18px; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .btn.slide::before { content: ""; position: absolute; inset: 0; background: var(--hf); transform: translateX(-101%); transition: transform .45s cubic-bezier(.2,.7,.2,1); z-index: -1; }
  .btn.slide:hover::before { transform: none; }
  .btn.slide:hover { color: var(--ht); }
  .btn.grow:hover { transform: scale(1.06); background: var(--hf); border-color: var(--hf); color: var(--ht); }
  .btn.circle::before { content: ""; position: absolute; left: var(--mx, 50%); top: var(--my, 50%); width: 10px; height: 10px; border-radius: 50%; background: var(--hf); transform: translate(-50%,-50%) scale(0); transition: transform .55s cubic-bezier(.2,.7,.2,1); z-index: -1; }
  .btn.circle:hover::before { transform: translate(-50%,-50%) scale(60); }
  .btn.circle:hover { color: var(--ht); }
  .btn.ghostfill:hover { background: var(--bf); color: var(--bt); }
}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* Phosphor-style line icons */
.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Navigation pills (Grinner Pill panel) */
.pl { --pc: currentColor; display: inline-block; font: 700 max(11px, .64em)/1 var(--fb); letter-spacing: .05em; text-transform: uppercase; padding: .34em .58em; border-radius: 999px; margin-left: .45em; vertical-align: .18em; color: var(--pc); background: color-mix(in srgb, var(--pc) 16%, transparent); border: 1px solid transparent; position: relative; white-space: nowrap; }
.pl.fill { background: var(--pc); color: var(--pt, #fff); }
.pl.line { background: transparent; border-color: var(--pc); }
.pl.pin { position: absolute; top: -.75em; right: -1.4em; margin: 0; }
.pl.pulse::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--pc); animation: pl-pulse 1.6s .6s ease-out 3; opacity: 0; }
@keyframes pl-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.9); opacity: 0; } }

/* Accent text looks */
.ac-serif { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.ac-marker { background: linear-gradient(transparent 58%, var(--mc, var(--a1)) 58% 92%, transparent 92%); padding: 0 .06em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ac-solid { background: var(--mc, var(--a1)); color: var(--mt, inherit); padding: 0 .1em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ac-outline { color: transparent; -webkit-text-stroke: var(--ow, 2px) var(--oc, currentColor); }
.ac-low { background: linear-gradient(transparent 80%, var(--mc, var(--a1)) 80% 96%, transparent 96%); }
.ac-draw { position: relative; display: inline-block; white-space: nowrap; }
.ac-draw > svg { position: absolute; overflow: visible; pointer-events: none; }
.ac-draw > svg path { fill: none; stroke: var(--lc, var(--a1)); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: ac-draw 1.3s .4s cubic-bezier(.6,0,.2,1) forwards; }
@keyframes ac-draw { to { stroke-dashoffset: 0; } }

/* Scrolling Text and Logo Marquee */
.ticker { overflow: hidden; white-space: nowrap; }
.ticker .track { display: inline-flex; animation: tk var(--sp, 40s) linear infinite; }
.ticker.rev .track { animation-direction: reverse; }
.ticker .track > span { display: inline-flex; align-items: center; gap: .7em; padding-right: .7em; }
.ticker i.st { width: .6em; height: .6em; background: var(--sc, currentColor); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); flex: none; }
.ticker i.dt { width: .32em; height: .32em; border-radius: 50%; background: var(--sc, currentColor); flex: none; }
@keyframes tk { to { transform: translateX(-50%); } }

/* Stickers (Image blocks): motions */
.stkr { position: absolute; z-index: 6; pointer-events: none; }
.m-spin { animation: m-spin var(--d, 16s) linear infinite; }
.m-rock { animation: m-rock var(--d, 3.2s) ease-in-out infinite alternate; }
.m-float { animation: m-float var(--d, 4s) ease-in-out infinite alternate; }
@keyframes m-spin { to { transform: rotate(360deg); } }
@keyframes m-rock { from { transform: rotate(calc(var(--a, 10deg) * -1)); } to { transform: rotate(var(--a, 10deg)); } }
@keyframes m-float { to { transform: translateY(var(--fy, -12px)); } }

/* Live dot */
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dc, #22c55e); box-shadow: 0 0 0 0 color-mix(in srgb, var(--dc, #22c55e) 60%, transparent); animation: live 2s ease-out infinite; display: inline-block; flex: none; }
@keyframes live { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Placeholder images: clearly marked */
.ph { position: relative; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--phc, #888) 18%, transparent) 0 2px, transparent 2px 14px), color-mix(in srgb, var(--phc, #888) 30%, var(--bg)); overflow: hidden; }
.ph::after { content: attr(data-ph); position: absolute; left: 10px; bottom: 10px; font: 600 12px/1.3 "Instrument Sans", sans-serif; padding: 5px 8px; border-radius: 6px; background: color-mix(in srgb, var(--bg) 85%, transparent); color: var(--tx); max-width: calc(100% - 20px); }

/* Off-screen pause (Grinner does the same) */
.unit:not(.live) *, .unit:not(.live) *::before, .unit:not(.live) *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .unit *, .unit *::before, .unit *::after { animation: none !important; transition: none !important; } }

/* Volume tag (calm sites study, section 8) */
.tag h2 .vol { display: inline-block; font: 700 .7rem/1 "Schibsted Grotesk", sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: .38em .7em .32em; border-radius: 99px; vertical-align: .22em; margin-right: .45em; color: #fff; }
.tag h2 .vol-loud { background: #C8102E; } .tag h2 .vol-medium { background: #9A5B00; } .tag h2 .vol-quiet { background: #2C7A4B; }
.tag p.wow b { color: #C8102E; } .tag p.calm b { color: #2C7A4B; }

/* ---------- The stage: a desktop frame and a phone frame for each design (review page only) ---------- */
.unit { scroll-margin-top: 46px; }
.stage { display: grid; grid-template-columns: minmax(0, 1fr) 392px; gap: 28px; max-width: 1680px; margin: 0 auto; padding: 26px clamp(12px, 2vw, 28px) 22px; align-items: start; }
.stage .col { min-width: 0; }
.cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .84rem; color: var(--doc-soft); margin: 0 4px 8px; }
.cap button { font: 600 .8rem "Instrument Sans", sans-serif; border: 1px solid var(--doc-line); background: var(--doc-card); color: var(--doc-ink); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.frame { position: relative; overflow: clip; container: fr / inline-size; background: var(--bg); color: var(--tx); font-family: var(--fb); border-radius: 14px; box-shadow: 0 0 0 1px var(--doc-line), 0 24px 50px -32px rgba(0, 0, 0, .45); --gut: clamp(16px, 3.4cqi, 44px); }
.frame.tall { height: 640px; }
.phone .frame { border-radius: 30px; box-shadow: 0 0 0 7px #16161a, 0 0 0 8px var(--doc-line), 0 24px 50px -30px rgba(0, 0, 0, .5); }
.phone .frame.tall { height: 720px; }
.vp { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; }
@media (max-width: 1099px) { .stage { grid-template-columns: minmax(0, 1fr); } .stage .phone { display: none; } }
@media (max-width: 640px) { .stage { padding-inline: 8px; } .frame.tall { height: 600px; } }

/* ---------- Header base: every header reads only these slots and classes ---------- */
.frame p, .frame h2, .frame h3, .frame h4, .frame ul, .frame ol { margin: 0; }
.frame ul.nl, .frame ul.plain { list-style: none; padding: 0; }
.frame a { text-decoration: none; }
.site { position: relative; z-index: 30; transition: background-color .35s, color .35s, box-shadow .35s, backdrop-filter .35s, transform .45s cubic-bezier(.2,.7,.2,1), padding .35s, height .35s; }
.site .in { display: flex; align-items: center; gap: clamp(14px, 2.4cqi, 30px); padding: 0 var(--gut); height: var(--hh, 76px); max-width: 1400px; margin: 0 auto; transition: height .35s; }
.site.sticky { position: sticky; top: 0; }
/* Sticky header: Glass on scroll, Shadow on scroll */
.frame.s8 .site.glass:not(.over) { background: color-mix(in srgb, var(--gc, var(--bg)) 74%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
.frame.s8 .site.shadow { box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .3); }
/* Over the first section: transparent over the hero; Glass starts after 120px (.g120) or once the hero has scrolled past */
.site.over { margin-bottom: calc(-1 * var(--hh, 76px) - var(--bh, 0px)); color: var(--oc, #fff); background: transparent; }
.frame.past .site.over, .frame.s120 .site.over.g120 { color: var(--tx); background: color-mix(in srgb, var(--gc, var(--bg)) 76%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); }
.frame.past .site.over.shadow { box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .3); }
.site .lg-d { display: none; }
.frame.past .site.over .lg-l, .frame.s120 .site.over.g120 .lg-l { display: none; }
.frame.past .site.over .lg-d, .frame.s120 .site.over.g120 .lg-d { display: inline; }
.site .logo { font-family: var(--fh); font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; }
.site .logo svg { width: 30px; height: 30px; flex: none; }
.site .push { margin-left: auto; }
.site .acts { display: flex; align-items: center; gap: 12px; }
.site .icb { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; position: relative; color: inherit; background: none; border: 0; cursor: pointer; }
.site .icb .ct { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; border-radius: 9px; font: 700 10px/18px var(--fb); text-align: center; background: var(--p); color: var(--bg); padding: 0 4px; }
/* Phone: the burger appears, the desktop nav hides (Grinner: Navigation overlay menu "Mobile") */
.burger { display: none; align-items: center; justify-content: center; gap: 8px; font: 600 .9rem var(--fb); background: none; color: inherit; border: 0; padding: 8px; cursor: pointer; }
.burger .bars { width: 24px; height: 14px; position: relative; display: inline-block; }
.burger .bars::before, .burger .bars::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; }
.burger .bars::before { top: 1px; } .burger .bars::after { bottom: 1px; }
@container fr (min-width: 761px) { .ph-only { display: none !important; } }
@container fr (max-width: 760px) {
  .burger { display: inline-flex; }
  .dk-only { display: none !important; }
  .site .in { height: var(--hhm, 64px); }
  .site.over { margin-bottom: calc(-1 * var(--hhm, 64px) - var(--bhm, var(--bh, 0px))); }
}

/* Navigation and its hover effects (Grinner Navigation effects) */
.nl { display: flex; align-items: center; gap: var(--ng, 6px); }
.nl > li { position: relative; }
.nl > li > a { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; color: inherit; isolation: isolate; white-space: nowrap; }
.nl > li > a .cv { width: 12px; height: 12px; transition: transform .3s; }
.nl > li:hover > a .cv, .nl > li:focus-within > a .cv, .nl > li.mo > a .cv { transform: rotate(180deg); }
/* Hover background: Box, Pill, Slide-fill, Fade */
.hb-box > li > a::before, .hb-pill > li > a::before, .hb-slide > li > a::before, .hb-fade > li > a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hbc, color-mix(in srgb, currentColor 12%, transparent)); border-radius: var(--hbr, 8px); transition: opacity .3s, transform .4s cubic-bezier(.2,.7,.2,1); }
.hb-pill > li > a::before { border-radius: 999px; }
.hb-box > li > a::before, .hb-pill > li > a::before, .hb-fade > li > a::before { opacity: 0; }
.hb-box > li > a:hover::before, .hb-pill > li > a:hover::before, .hb-fade > li > a:hover::before { opacity: 1; }
.hb-box > li > a::before { transform: scale(.86); } .hb-box > li > a:hover::before { transform: none; }
.hb-slide > li > a::before { transform: scaleY(0); transform-origin: bottom; }
.hb-slide.sl-l > li > a::before { transform: scaleX(0); transform-origin: left; }
.hb-slide > li > a:hover::before { transform: none; }
.hb-slide > li > a:hover { color: var(--hbt, inherit); }
/* Hover mark: Underline (Wipe, Center-out), Corner marks, Side brackets */
.mk-ul > li > a::after, .mk-uc > li > a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: var(--uh, 2px); background: var(--mkc, currentColor); transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.mk-uc > li > a::after { transform-origin: center; }
.mk-ul > li > a:hover::after, .mk-uc > li > a:hover::after, .mk-ul > li > a[aria-current]::after, .mk-uc > li > a[aria-current]::after { transform: none; }
.mk-co > li > a::before, .mk-co > li > a::after { content: ""; position: absolute; width: 8px; height: 8px; border: 2px solid var(--mkc, currentColor); opacity: 0; transition: opacity .3s, transform .35s cubic-bezier(.2,.7,.2,1); }
.mk-co > li > a::before { left: 0; top: 0; border-right: 0; border-bottom: 0; transform: translate(-6px, -6px); }
.mk-co > li > a::after { right: 0; bottom: 0; border-left: 0; border-top: 0; transform: translate(6px, 6px); }
.mk-co > li > a:hover::before, .mk-co > li > a:hover::after, .mk-co > li > a[aria-current]::before, .mk-co > li > a[aria-current]::after { opacity: 1; transform: none; }
.mk-br > li > a::before, .mk-br > li > a::after { position: absolute; top: 50%; color: var(--mkc, currentColor); opacity: 0; transition: opacity .3s, transform .35s cubic-bezier(.2,.7,.2,1); font-weight: 400; }
.mk-br > li > a::before { content: "["; left: 0; transform: translate(6px, -52%); }
.mk-br > li > a::after { content: "]"; right: 0; transform: translate(-6px, -52%); }
.mk-br > li > a:hover::before, .mk-br > li > a:hover::after, .mk-br > li > a[aria-current]::before, .mk-br > li > a[aria-current]::after { opacity: 1; transform: translate(0, -52%); }
/* Hover text: Rise (the label slides up and a copy rises in) */
.tx-rise > li > a > .tl { display: inline-block; overflow: hidden; height: 1.2em; line-height: 1.2; vertical-align: top; }
.tx-rise > li > a > .tl > span { display: block; transition: transform .4s cubic-bezier(.2,.7,.2,1); text-shadow: 0 1.2em currentColor; }
.tx-rise > li > a:hover > .tl > span { transform: translateY(-1.2em); }
/* Soft glow */
.glow > li > a:hover { text-shadow: 0 0 14px var(--glc, currentColor), 0 0 2px var(--glc, currentColor); }

/* Mega menu panel (Grinner does not have this yet: core submenus are plain lists) */
.has-mega { position: static !important; }
.mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s, transform .35s cubic-bezier(.2,.7,.2,1), visibility .3s; color: var(--tx); }
.has-mega:hover > .mega, .has-mega:focus-within > .mega, .has-mega.mo > .mega { opacity: 1; visibility: visible; transform: none; }
.sub { position: absolute; left: 0; top: 100%; z-index: 40; min-width: 220px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .3s, transform .35s, visibility .3s; }
li:hover > .sub, li:focus-within > .sub, li.mo > .sub { opacity: 1; visibility: visible; transform: none; }

/* Announcement bars */
.bar { position: relative; z-index: 31; font-size: .86rem; }
.bar .in { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 40px; padding: 6px var(--gut); max-width: 1400px; margin: 0 auto; text-align: center; }
.bar .x { position: absolute; right: calc(var(--gut) - 8px); top: 50%; transform: translateY(-50%); background: none; border: 0; color: inherit; cursor: pointer; padding: 8px; display: inline-grid; }
.bar[hidden] { display: none; }

/* Phone menu: the overlay sits in the frame, outside the scroller */
.ovl { position: absolute; inset: 0; z-index: 60; visibility: hidden; opacity: 0; transition: opacity .35s, visibility .35s; display: flex; flex-direction: column; background: var(--ob, var(--bg)); color: var(--ot, var(--tx)); overflow-y: auto; }
.frame.open .ovl { visibility: visible; opacity: 1; }
.ovl > .top { display: flex; align-items: center; justify-content: space-between; height: var(--hhm, 64px); padding: 0 var(--gut); flex: none; }
.ovl .close { background: none; border: 0; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font: 600 .9rem var(--fb); padding: 8px; }
.ovl .close .ic { width: 24px; height: 24px; }
.ovl.drawer { left: auto; width: min(86%, 380px); transform: translateX(100%); transition: transform .45s cubic-bezier(.2,.7,.2,1), visibility .45s; opacity: 1; box-shadow: -30px 0 60px -20px rgba(0, 0, 0, .4); }
.frame.open .ovl.drawer { transform: none; }
.ovl.sheet { top: auto; max-height: 82%; border-radius: 24px 24px 0 0; transform: translateY(100%); transition: transform .45s cubic-bezier(.2,.7,.2,1), visibility .45s; opacity: 1; }
.frame.open .ovl.sheet { transform: none; }
.scrim { position: absolute; inset: 0; z-index: 59; background: rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.frame.open .scrim { opacity: 1; visibility: visible; }

/* The page under the header: a first section (hero slice) and quiet sample content */
.hs { position: relative; isolation: isolate; overflow: hidden; min-height: 480px; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--hh, 76px) + 40px) var(--gut) 48px; }
.hs .bgi { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.hs .hx { font-family: var(--fh); font-size: clamp(2.2rem, 6.4cqi, 5rem); line-height: .98; letter-spacing: -.03em; max-width: 15ch; font-weight: 700; }
.hs .sub-t { margin-top: 14px; font-size: 1.05rem; max-width: 46ch; opacity: .85; }
.pgfill { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 48px var(--gut) 64px; max-width: 1400px; margin: 0 auto; }
.pgfill i { display: block; height: 200px; border-radius: 14px; background: color-mix(in srgb, var(--tx) 7%, var(--bg)); }
.pgfill b { display: block; height: 12px; border-radius: 6px; background: color-mix(in srgb, var(--tx) 10%, var(--bg)); grid-column: span 3; width: 40%; }
.pgfill b + b { width: 62%; }
@container fr (max-width: 760px) { .pgfill { grid-template-columns: 1fr; } .pgfill b { grid-column: auto; } .hs { min-height: 440px; padding-top: calc(var(--hhm, 64px) + 32px); } }

/* ---------- Footer base ---------- */
.pe { padding: 56px var(--gut) 64px; text-align: center; background: var(--pg, var(--bg)); color: var(--pt, var(--tx)); }
.pe p { max-width: 36ch; margin: 0 auto; font-size: .95rem; text-wrap: balance; }
.sf { position: relative; isolation: isolate; background: var(--fbg, var(--tx)); color: var(--ftx, var(--bg)); }
.sf .w { max-width: 1400px; margin: 0 auto; padding-inline: var(--gut); }
.sf a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }
.sf .soc { display: flex; gap: 8px; }
.sf .soc a { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); }
.sf .soc a:hover { text-decoration: none; background: color-mix(in srgb, currentColor 12%, transparent); }
.sf .soc .ic { width: 18px; height: 18px; }
.sf .legal { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between; font-size: .84rem; opacity: .8; }
.sf .legal nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
/* Illustration blend: core Cover block with the illustration as its image and a gradient overlay that runs from the
   page colour (top) through clear to the footer colour (bottom), so the picture melts into both */
.blend .art-wrap { position: relative; }
.blend .art { display: block; width: 100%; height: var(--ah, clamp(300px, 42cqi, 540px)); object-fit: cover; object-position: var(--pos, center); }
.blend .art-wrap::after { content: ""; position: absolute; inset: -1px 0; background: linear-gradient(var(--pg, var(--bg)), transparent var(--top, 18%), transparent var(--bot, 62%), var(--fbg)); pointer-events: none; }
.blend .over-art { position: relative; margin-top: var(--lift, -130px); }
@container fr (max-width: 760px) { .blend .art { height: var(--ahm, 260px); } .blend .over-art { margin-top: var(--liftm, -70px); } }
/* Phone footers: core Details blocks are closed on phones, open on desktop */
details.acc > summary { list-style: none; cursor: default; }
details.acc > summary::-webkit-details-marker { display: none; }
details.acc > summary .pm { display: none; }
@container fr (max-width: 760px) {
  details.acc { border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
  details.acc > summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 14px 0; }
  details.acc > summary .pm { display: inline-block; transition: transform .3s; }
  details.acc[open] > summary .pm { transform: rotate(45deg); }
}

/* ---------- Section base (features, testimonials): every section reads only these slots ---------- */
.sx { position: relative; isolation: isolate; overflow: clip; padding: clamp(56px, 8cqi, 112px) var(--gut); background: var(--bg); color: var(--tx); font-family: var(--fb); }
.sx .w { max-width: 1320px; margin: 0 auto; position: relative; }
.sx h2, .sx h3, .sx h4 { font-family: var(--fh); margin: 0; }
.sx p { margin: 0; }
.sx img { max-width: 100%; }
/* Tabs (Grinner and core have no Tabs block yet: FS needs list) */
[data-tabs] .tab { cursor: pointer; font: inherit; color: inherit; background: none; border: 0; }
[data-tabs] .panel:not(.on) { display: none; }
/* Grinner Content Slider (imitated: a snapping strip with arrows) */
.cs { position: relative; }
.cs-track { display: flex; gap: var(--csg, 20px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; scroll-behavior: smooth; }
.cs-track::-webkit-scrollbar { display: none; }
.cs-track > * { flex: 0 0 var(--csw, 100%); scroll-snap-align: start; min-width: 0; }
.cs-ctl { display: flex; gap: 10px; align-items: center; }
.cs-ctl button { width: 46px; height: 46px; border-radius: 50%; display: inline-grid; place-items: center; cursor: pointer; border: 1.5px solid currentColor; background: transparent; color: inherit; transition: background .3s, color .3s, opacity .3s; }
.cs-ctl button svg { width: 20px; height: 20px; }
.cs-ctl button:disabled { opacity: .35; cursor: default; }
/* Grinner Before / After (imitated: drag the line, or use the arrow keys on it) */
.ba { position: relative; overflow: hidden; --pos: 50%; }
.ba img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ba .after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); }
.ba .handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; margin-left: -1.5px; background: var(--bah, #fff); pointer-events: none; z-index: 2; }
.ba .handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; border-radius: 50%; background: var(--bah, #fff); transform: translate(-50%, -50%); box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.ba .handle::before { content: "\2194"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; font: 700 18px/1 system-ui, sans-serif; color: #111; }
.ba input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 3; }
.ba .lbl { position: absolute; top: 14px; z-index: 2; font: 700 .72rem/1 var(--fb); letter-spacing: .1em; text-transform: uppercase; padding: 7px 10px; border-radius: 999px; background: rgba(0, 0, 0, .7); color: #fff; }
.ba .lbl.b { left: 14px; } .ba .lbl.a { right: 14px; }
/* Grinner Video Embed (imitated: the poster and play button; the real block loads YouTube on click) */
.ve { position: relative; overflow: hidden; display: block; }
.ve > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ve .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .94); color: #111; display: grid; place-items: center; cursor: pointer; transition: transform .3s; z-index: 2; }
.ve .play svg { width: 26px; height: 26px; margin-left: 4px; }
.ve .play:hover { transform: translate(-50%, -50%) scale(1.08); }
.ve .note { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; padding: 8px 10px; border-radius: 8px; background: rgba(0, 0, 0, .8); color: #fff; font: 600 12px/1.35 "Instrument Sans", sans-serif; display: none; }
.ve.playing .note { display: block; }
/* Star rating (Grinner Icon blocks in a Row) */
.stars { display: inline-flex; gap: 2px; color: var(--stc, #E8A317); }
.stars svg { width: 1em; height: 1em; fill: currentColor; }

/* ---------- Grinner motion on the review page ----------
   Each rule imitates one Grinner setting. The names in comments are the Grinner panel and option.
   The page sets html.mo when its script runs (Grinner's "ilm-js" flag): hidden start states apply only then,
   so nothing waits on a script. --doc-top is the height of the review page's picks bar (our "sticky header"). */
:root { --doc-top: 52px; --rv-smooth: cubic-bezier(.22, .61, .36, 1); --rv-spring: cubic-bezier(.34, 1.56, .64, 1); --rv-snappy: cubic-bezier(.16, 1, .3, 1); }

/* Entrance Animation (Group, Columns), Entrance (Accordion), Animation (Table), Entrance & scroll (Image),
   Advanced Animations (Heading, Paragraph). The script marks each moving element .rv-t with data-fx. */
.mo .rv-t { animation-duration: var(--rv-d, .6s); animation-timing-function: var(--rv-e, var(--rv-smooth)); animation-delay: var(--rv-wait, 0s); animation-fill-mode: backwards; animation-play-state: paused; }
.mo .rv-t.rv-in { animation-play-state: running; }
.mo .rv-t[data-fx="fade-up"] { animation-name: rv-fade-up; }
.mo .rv-t[data-fx="slide-up"] { animation-name: rv-slide-up; }
.mo .rv-t[data-fx="slide-down"] { animation-name: rv-slide-down; }
.mo .rv-t[data-fx="slide-left"] { animation-name: rv-slide-left; }
.mo .rv-t[data-fx="slide-right"] { animation-name: rv-slide-right; }
.mo .rv-t[data-fx="soft-blur"] { animation-name: rv-soft-blur; }
.mo .rv-t[data-fx="scale"] { animation-name: rv-scale; }
.mo .rv-t[data-fx="fade"] { animation-name: rv-fade; }
.mo .rv-t[data-fx="drop"] { animation-name: rv-drop; animation-duration: calc(var(--rv-d, .6s) * 1.6); animation-timing-function: linear; }
.mo .rv-t[data-fx="swing"] { animation-name: rv-swing; animation-duration: calc(var(--rv-d, .6s) * 1.6); animation-timing-function: ease-out; transform-origin: 50% 0; }
@keyframes rv-fade-up { from { opacity: 0; translate: 0 var(--rv-dist, 18px); } }
@keyframes rv-slide-up { from { opacity: 0; translate: 0 var(--rv-dist, 24px); } }
@keyframes rv-slide-down { from { opacity: 0; translate: 0 calc(var(--rv-dist, 24px) * -1); } }
@keyframes rv-slide-left { from { opacity: 0; translate: var(--rv-dist, 24px) 0; } }
@keyframes rv-slide-right { from { opacity: 0; translate: calc(var(--rv-dist, 24px) * -1) 0; } }
@keyframes rv-soft-blur { from { opacity: 0; filter: blur(6px); } }
@keyframes rv-scale { from { opacity: 0; scale: .96; } }
@keyframes rv-fade { from { opacity: 0; } }
@keyframes rv-drop { 0% { translate: 0 -32px; animation-timing-function: cubic-bezier(.5, 0, .9, .5); } 55% { translate: 0 0; animation-timing-function: ease-out; } 72% { translate: 0 -9px; animation-timing-function: ease-in; } 86% { translate: 0 0; } 93% { translate: 0 -2px; } 100% { translate: 0 0; } }
@keyframes rv-swing { 0% { rotate: -11deg; } 40% { rotate: 6deg; } 65% { rotate: -3deg; } 85% { rotate: 1deg; } 100% { rotate: 0deg; } }

/* Text entrances (Advanced Animations). Word effects act on the .w spans the script makes. */
.wd { display: inline-block; white-space: pre; }
.mo .rv-t[data-fx="t-word"] { animation-name: rv-fade-up; --rv-dist: .5em; --rv-d: .5s; }
.mo .rv-t[data-fx="t-stagger"] { animation-name: rv-fade; --rv-d: .55s; }
.mo .rv-t[data-fx="t-assemble"] { animation-name: rv-assemble; --rv-d: .8s; --rv-e: var(--rv-snappy); }
.mo .rv-t[data-fx="t-blur"] { animation-name: rv-blur-in; --rv-d: .9s; }
.mo .rv-t[data-fx="t-clip"] { animation-name: rv-clip; --rv-d: .9s; --rv-e: var(--rv-snappy); }
.mo .rv-t[data-fx="t-fade-up"] { animation-name: rv-fade-up; --rv-dist: .6em; --rv-d: .8s; }
.mo .rv-t[data-fx="t-flip"] { animation-name: rv-flip; --rv-d: .8s; transform-origin: 50% 100%; }
.mo .rv-t[data-fx="t-glitch"] { animation-name: rv-glitch; --rv-d: .7s; --rv-e: steps(1, end); }
.mo .rv-t[data-fx="t-zoom"] { animation-name: rv-zoom-fade; --rv-d: .9s; }
@keyframes rv-assemble { from { opacity: 0; translate: var(--ax, 0) var(--ay, 0); rotate: var(--ar, 0deg); } }
@keyframes rv-blur-in { from { opacity: 0; filter: blur(14px); letter-spacing: .08em; } }
@keyframes rv-clip { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -2% 0 0); } }
@keyframes rv-flip { from { opacity: 0; transform: perspective(600px) rotateX(-80deg); } }
@keyframes rv-zoom-fade { from { opacity: 0; scale: 1.18; } }
@keyframes rv-glitch { 0% { opacity: 0; } 10% { opacity: 1; translate: -6px 0; clip-path: inset(10% 0 55% 0); } 25% { translate: 5px 0; clip-path: inset(60% 0 8% 0); } 40% { translate: -3px 0; clip-path: inset(30% 0 30% 0); } 55% { translate: 2px 0; clip-path: inset(0 0 70% 0); } 70% { translate: 0 0; clip-path: inset(0); } 100% { opacity: 1; } }
/* Script text effects: Typewriter (caret), Line Reveal (a cover lifts line by line), Pixel Reveal (cells dissolve) */
.tw-caret::after { content: ""; display: inline-block; width: .08em; height: .9em; margin-left: .06em; background: currentColor; vertical-align: -.08em; animation: tw-blink .9s steps(1) infinite; }
@keyframes tw-blink { 50% { opacity: 0; } }
.mo .lr-w { position: relative; }
.mo .lr-w::after { content: ""; position: absolute; inset: -.04em -.06em; background: var(--cover, var(--p, currentColor)); transform-origin: 50% 0; transition: transform .7s var(--rv-snappy) var(--lr-wait, 0s); }
.mo .lr-on .lr-w::after { transform: scaleY(0); }
.px-cover { position: absolute; inset: -2px; display: grid; pointer-events: none; z-index: 2; }
.px-cover i { background: var(--cover, var(--bg)); transition: opacity .18s var(--pd, 0s); }
.px-on .px-cover i { opacity: 0; }
/* Grey to Colour (on scroll): words go from a faded version of their colour to full, in reading order */
.gtc .wd { transition: opacity .25s; }
.mo .gtc .wd:not(.lit) { opacity: var(--gtc-from, .22); }

/* Text effect: Gradient / Animated gradient */
.tfx-grad { background: linear-gradient(var(--ga, 90deg), var(--g1, var(--p)), var(--g2, var(--a1)), var(--g3, var(--g1, var(--p)))); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
.tfx-grad.anim { animation: tfx-slide var(--gs, 6s) linear infinite; }
@keyframes tfx-slide { to { background-position: -200% 0; } }

/* Count up: Shuffle digits */
.cu-shuf { font-variant-numeric: tabular-nums; }

/* Scroll effects (Parallax) on Group and Columns: data-px on the block (Container) or data-px="children" (each child) */
@supports (animation-timeline: view()) {
  .mo [data-px]:not([data-px="children"]), .mo [data-px="children"] > * { animation: px-drift linear both; animation-timeline: view(); animation-range: cover; }
  @keyframes px-drift { from { translate: 0 calc(var(--pxi, 4) * 10px); } to { translate: 0 calc(var(--pxi, 4) * -10px); } }
  .mo [data-px="children"] > .px-still { animation: none; }
  /* Image Parallax (scroll): the picture drifts inside its frame */
  .mo [data-ipx] { animation: ipx-y linear both; animation-timeline: view(); animation-range: cover; scale: var(--ipz, 1.2); }
  .mo [data-ipx="up"] { animation-direction: reverse; }
  .mo [data-ipx="left"] { animation-name: ipx-x; }
  .mo [data-ipx="right"] { animation-name: ipx-x; animation-direction: reverse; }
  @keyframes ipx-y { from { translate: 0 -8%; } to { translate: 0 8%; } }
  @keyframes ipx-x { from { translate: -7% 0; } to { translate: 7% 0; } }
  /* Image Scroll effect: finishes as the image reaches the middle of the screen */
  .mo [data-isc] { animation: linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  .mo [data-isc="zoom"] { animation-name: isc-zoom; }
  .mo [data-isc="tilt"] { animation-name: isc-tilt; transform-origin: 50% 100%; }
  .mo [data-isc="grey"] { animation-name: isc-grey; }
  .mo [data-isc="expand"] { animation-name: isc-expand; }
  .mo [data-isc="wipe"] { animation-name: isc-wipe; }
  .mo [data-isc="roll-left"] { animation-name: isc-roll-l; }
  .mo [data-isc="roll-right"] { animation-name: isc-roll-r; }
  @keyframes isc-zoom { from { scale: 1.32; } to { scale: 1; } }
  @keyframes isc-tilt { from { transform: perspective(1000px) rotateX(24deg); opacity: .4; } to { transform: perspective(1000px) rotateX(0); opacity: 1; } }
  @keyframes isc-grey { from { filter: grayscale(1); } to { filter: grayscale(0); } }
  @keyframes isc-expand { from { clip-path: inset(0 12% round 28px); } to { clip-path: inset(0 0 round 0); } }
  @keyframes isc-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
  @keyframes isc-roll-l { from { translate: -45% 0; rotate: -14deg; opacity: 0; } to { translate: 0 0; rotate: 0deg; opacity: 1; } }
  @keyframes isc-roll-r { from { translate: 45% 0; rotate: 14deg; opacity: 0; } to { translate: 0 0; rotate: 0deg; opacity: 1; } }
  /* Sticker motion: Turn on scroll */
  .mo .m-turn { animation: m-turn linear both; animation-timeline: view(); animation-range: cover; }
  @keyframes m-turn { to { rotate: calc(var(--turns, .6) * 360deg); } }
  /* Progress Bar Draw-in: Scroll-linked (fills as it rises up the lower part of the window) */
  .mo .pb[data-draw="scroll"] .pb-fill { animation: pb-fill linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  .mo .pb[data-draw="scroll"] .pb-ring { animation: pb-ring linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
}
/* An image frame that clips its picture (Image: Crop) */
.clipbox { overflow: clip; display: block; }
.clipbox > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Image Entrance (Entrance & scroll) */
.mo .rv-t[data-fx="i-fade"] { animation-name: rv-fade; --rv-d: .8s; }
.mo .rv-t[data-fx="i-rise"] { animation-name: rv-fade-up; --rv-dist: 48px; --rv-d: .9s; }
.mo .rv-t[data-fx="i-settle"] { animation-name: rv-zoom-fade; --rv-d: 1.1s; }
.mo .rv-t[data-fx="i-wipe-left"] { animation-name: i-wipe-l; --rv-d: 1s; --rv-e: var(--rv-snappy); }
.mo .rv-t[data-fx="i-wipe-right"] { animation-name: i-wipe-r; --rv-d: 1s; --rv-e: var(--rv-snappy); }
.mo .rv-t[data-fx="i-wipe-top"] { animation-name: i-wipe-t; --rv-d: 1s; --rv-e: var(--rv-snappy); }
.mo .rv-t[data-fx="i-wipe-bottom"] { animation-name: i-wipe-b; --rv-d: 1s; --rv-e: var(--rv-snappy); }
.mo .rv-t[data-fx="i-blur"] { animation-name: rv-blur-in; --rv-d: 1s; }
.mo .rv-t[data-fx="i-slide-left"] { animation-name: rv-slide-right; --rv-dist: 90px; --rv-d: 1s; }
.mo .rv-t[data-fx="i-slide-right"] { animation-name: rv-slide-left; --rv-dist: 90px; --rv-d: 1s; }
.mo .rv-t[data-fx="i-roll-left"] { animation-name: i-roll-l; --rv-d: 1.1s; --rv-e: var(--rv-snappy); }
.mo .rv-t[data-fx="i-roll-right"] { animation-name: i-roll-r; --rv-d: 1.1s; --rv-e: var(--rv-snappy); }
@keyframes i-wipe-l { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes i-wipe-r { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
@keyframes i-wipe-t { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes i-wipe-b { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes i-roll-l { from { opacity: 0; translate: -70% 0; rotate: -24deg; } }
@keyframes i-roll-r { from { opacity: 0; translate: 70% 0; rotate: 24deg; } }

/* Card stacking (Group › Scroll effects): direct children pin into a deck. Sticky, no script. */
[data-stack] > * { position: sticky; top: calc(var(--doc-top) + var(--so, 24px) + var(--i, 0) * var(--peek, 16px)); }
@container fr (max-width: 760px) { [data-stack][data-stack-mob="off"] > * { position: static; } }

/* Sticky column (Group, Columns): one child pins while its siblings scroll past. Pin on: Desktop and tablet. */
@container fr (min-width: 768px) {
  .st-pin { position: sticky !important; top: calc(var(--doc-top) + var(--st-top, 24px)); align-self: start; }
}
[data-sticky-on="all"] > .st-pin { position: sticky !important; top: calc(var(--doc-top) + var(--st-top, 24px)); align-self: start; }

/* Grinner Card Pile: Straight stack, Recede, Dealt, Split (they stick as the page scrolls) and Fanned pile */
.cpile { list-style: none; margin: 0; padding: 0 0 var(--cp-hold, 96px); display: grid; gap: var(--cp-gap, 28px); justify-items: center; }
.cpile > .pcard { position: sticky; top: calc(var(--doc-top) + var(--cp-top, 28px) + var(--i, 0) * var(--cp-step, 22px)); width: min(100%, var(--cp-w, 1040px)); border-radius: var(--cp-r, 24px); background: var(--cp-bg, var(--sf)); color: var(--cp-tx, var(--tx)); border: 1px solid color-mix(in srgb, var(--tx) 12%, transparent); overflow: clip; box-shadow: 0 -18px 40px -30px rgba(0, 0, 0, .45); transform-origin: 50% 0; }
.cpile .pc-eyebrow { font: 700 .74rem/1 var(--fb); letter-spacing: .12em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; opacity: .78; }
.cpile .pc-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--p); }
.cpile[data-preset="straight"] > .pcard, .cpile[data-preset="recede"] > .pcard { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0 clamp(20px, 4cqi, 48px); padding: clamp(22px, 3.4cqi, 40px); }
.cpile[data-preset="recede"] { --cp-w: 880px; --cp-step: 16px; }
.cpile[data-preset="recede"] > .pcard { scale: calc(1 - .045 * var(--cov, 0)); transition: scale .25s linear; }
.cpile[data-preset="recede"] > .pcard::after { content: ""; position: absolute; inset: 0; background: var(--bg); opacity: calc(.17 * var(--cov, 0)); pointer-events: none; transition: opacity .25s linear; }
.cpile[data-preset="straight"] .pc-head, .cpile[data-preset="recede"] .pc-head { grid-column: 1; display: grid; gap: 12px; align-content: start; }
.cpile[data-preset="straight"] .pc-body, .cpile[data-preset="recede"] .pc-body { grid-column: 2; display: grid; gap: 14px; align-content: start; }
@container fr (max-width: 600px) { .cpile .pc-head, .cpile .pc-body { grid-column: 1 !important; } .cpile .pc-body { margin-top: 12px; } }
.cpile .pc-band { grid-column: 1 / -1; margin: calc(clamp(22px, 3.4cqi, 40px) * -1) calc(clamp(22px, 3.4cqi, 40px) * -1) 24px; height: 220px; }
.cpile .pc-band img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cpile[data-preset="dealt"] { --cp-w: 520px; --cp-step: 14px; }
.cpile[data-preset="dealt"] > .pcard { padding: 26px; background: var(--tint, var(--a1)); rotate: var(--tilt, 0deg); translate: var(--shift, 0px) 0; }
.cpile[data-preset="dealt"] > .pcard:nth-child(4n+1) { --tint: var(--a1); --tilt: -2.5deg; --shift: -10px; }
.cpile[data-preset="dealt"] > .pcard:nth-child(4n+2) { --tint: var(--a2); --tilt: 2deg; --shift: 12px; }
.cpile[data-preset="dealt"] > .pcard:nth-child(4n+3) { --tint: var(--a3); --tilt: -1.2deg; --shift: -6px; }
.cpile[data-preset="dealt"] > .pcard:nth-child(4n+4) { --tint: var(--a4); --tilt: 2.2deg; --shift: 8px; }
.cpile[data-preset="dealt"] .pc-tile { aspect-ratio: 16 / 9; border-radius: 14px; overflow: clip; margin-bottom: 18px; }
.cpile[data-preset="dealt"] .pc-tile img { width: 100%; height: 100%; object-fit: cover; }
.cpile[data-preset="split"] { --cp-w: 1120px; --cp-step: 28px; }
.cpile[data-preset="split"] > .pcard { display: grid; grid-template-columns: 1fr 1fr; min-height: 440px; }
.cpile[data-preset="split"] > .pcard:nth-child(even) .pc-img { order: 2; }
.cpile[data-preset="split"] .pc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cpile[data-preset="split"] .pc-txt { padding: clamp(24px, 4cqi, 52px); display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.cpile .pc-num { font: 700 clamp(2.6rem, 6cqi, 4.6rem)/.9 var(--fh); opacity: .9; }
@container fr (max-width: 600px) {
  .cpile > .pcard { top: calc(var(--doc-top) + var(--cp-top, 28px) - 14px + var(--i, 0) * var(--cp-step, 22px) * .55); }
  .cpile[data-preset="straight"] > .pcard, .cpile[data-preset="recede"] > .pcard, .cpile[data-preset="split"] > .pcard { grid-template-columns: 1fr; min-height: 0; }
  .cpile[data-preset="split"] .pc-img { order: 0 !important; height: 160px; }
  .cpile .pc-band { height: 150px; }
  .cpile[data-preset="dealt"] > .pcard { rotate: calc(var(--tilt, 0deg) * .45); translate: calc(var(--shift, 0px) * .45) 0; }
}
/* Fanned pile (1.8.1): nothing sticks; hover spreads it and brings the card under the pointer forward */
.cpile[data-preset="fanned"] { display: grid; place-items: center; padding: 24px 0 36px; gap: 0; --fs: 34px; --fa: 3deg; }
.cpile[data-preset="fanned"] > .pcard { position: relative; top: auto; grid-area: 1 / 1; width: var(--fw, 240px); padding: 10px 10px 16px; border-radius: 16px; z-index: calc(20 - var(--aslot, 0)); translate: calc(var(--slot, 0) * var(--fs)) calc(var(--aslot, 0) * 7px); rotate: calc(var(--slot, 0) * var(--fa) + var(--tilt, 0deg)); transition: translate .5s var(--rv-snappy), rotate .5s var(--rv-snappy), scale .5s var(--rv-snappy), box-shadow .35s; box-shadow: 0 18px 30px -22px rgba(0, 0, 0, .55); cursor: pointer; }
.cpile[data-preset="fanned"] .pc-sq { aspect-ratio: 1; border-radius: 9px; overflow: clip; margin-bottom: 12px; }
.cpile[data-preset="fanned"] .pc-sq img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
  .cpile[data-preset="fanned"]:hover, .cpile[data-preset="fanned"]:focus-within { --fs: var(--fs-h, 150px); --fa: 5deg; }
  .cpile[data-preset="fanned"] > .pcard:hover { translate: calc(var(--slot, 0) * var(--fs)) calc(var(--aslot, 0) * 7px - 22px); scale: 1.04; z-index: 40; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .6); }
}
.cpile[data-preset="fanned"] > .pcard:focus, .cpile[data-preset="fanned"] > .pcard:focus-within { z-index: 41; }
@container fr (max-width: 600px) { .cpile[data-preset="fanned"] { --fs: 26px !important; --fa: 2.5deg !important; } .cpile[data-preset="fanned"] > .pcard { width: 186px; } }

/* Grinner Content Slider additions: pager (Dots, Pills, Count), progress bar, autoplay with Pause, Centred */
.cs-pg { display: flex; gap: 8px; align-items: center; }
.cs-pg button { width: 9px; height: 9px; border-radius: 99px; border: 0; padding: 0; background: currentColor; opacity: .3; cursor: pointer; transition: width .35s, opacity .35s; }
.cs-pg button[aria-current="true"] { opacity: 1; }
.cs-pg.pills button { width: 18px; height: 5px; }
.cs-pg.pills button[aria-current="true"] { width: 38px; }
.cs-count { font: 700 .9rem/1 var(--fb); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.cs-bar { flex: 1; height: 3px; border-radius: 3px; background: color-mix(in srgb, currentColor 18%, transparent); overflow: clip; min-width: 80px; }
.cs-bar i { display: block; height: 100%; background: currentColor; transform-origin: 0 50%; scale: var(--prog, .1) 1; transition: scale .15s linear; }
.cs-pause { display: inline-flex; align-items: center; gap: 7px; font: 700 .8rem/1 var(--fb); border: 1.5px solid currentColor; background: transparent; color: inherit; border-radius: 99px; padding: 8px 13px 9px; position: relative; overflow: clip; cursor: pointer; }
.cs-ctl .cs-pause, .irot .ir-ctl .cs-pause { width: auto !important; height: auto !important; min-height: 40px; display: inline-flex !important; border-radius: 99px; padding: 8px 14px 9px; }
.cs-pause::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: currentColor; transform-origin: 0 50%; scale: var(--tick, 0) 1; }
.cs[data-layout="centred"] .cs-track { scroll-snap-type: x mandatory; padding-inline: calc((100% - var(--csw, 60%)) / 2); }
.cs[data-layout="centred"] .cs-track > * { scroll-snap-align: center; scale: var(--cz, 1); transition: scale .2s linear, opacity .2s linear; opacity: var(--co, 1); }
.cs.fading .cs-track { opacity: 0; transition: opacity .2s; }
.cs .cs-track { transition: opacity .2s; }

/* Grinner Image Rotator: the script places each image (layouts Row, Deck, Polaroid scatter, Mosaic,
   Stepped columns, Spotlight, Orbit) */
.irot { position: relative; }
.irot .ir-stage { position: relative; height: var(--ir-h, 400px); perspective: 1400px; }
.irot .ir-i { position: absolute; left: 50%; top: 50%; width: var(--ir-w, 320px); aspect-ratio: var(--ir-ar, 4 / 5); margin: 0; translate: -50% -50%; transition: transform var(--ir-t, .6s) var(--rv-snappy), opacity var(--ir-t, .6s), filter var(--ir-t, .6s); will-change: transform; }
.irot .ir-i img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--ir-r, 16px); }
.irot .ir-i.no-tr { transition: none !important; }
.irot[data-layout="scatter"] .ir-i { background: #f6f0e4; padding: 10px 10px 42px; border-radius: 4px; box-shadow: 0 18px 30px -18px rgba(0, 0, 0, .5); aspect-ratio: auto; }
.irot[data-layout="scatter"] .ir-i img { aspect-ratio: 1; height: auto; border-radius: 1px; }
.irot[data-layout="scatter"] .ir-i figcaption { position: absolute; left: 12px; right: 12px; bottom: 10px; font: 400 1.05rem/1.2 "Caveat", "Comic Sans MS", cursive; color: #3a3530; text-align: center; }
.irot .ir-ctl { display: flex; gap: 10px; align-items: center; justify-content: var(--ir-ctl-j, center); margin-top: 18px; }
.irot .ir-ctl button { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; color: inherit; display: inline-grid; place-items: center; cursor: pointer; }
.irot .ir-ctl button svg { width: 18px; height: 18px; }
.irot .ir-ctl .ir-pause { width: auto; border-radius: 99px; padding: 0 14px; font: 700 .78rem/1 var(--fb); }
/* Mosaic: the next image wipes up from the bottom, settling from 114% */
.irot[data-layout="mosaic"] .ir-grid { display: grid; gap: var(--ir-gap, 12px); height: var(--ir-h, 400px); grid-template-columns: 1.6fr 1fr; grid-template-rows: 1fr 1fr; }
.irot[data-layout="mosaic"] .ir-tile { position: relative; overflow: clip; border-radius: var(--ir-r, 16px); }
.irot[data-layout="mosaic"] .ir-tile:first-child { grid-row: span 2; }
.irot[data-layout="mosaic"] .ir-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.irot[data-layout="mosaic"] .ir-tile img.ir-new { animation: ir-wipe var(--ir-t, .9s) var(--rv-snappy) both; }
@keyframes ir-wipe { from { clip-path: inset(100% 0 0 0); scale: 1.14; } to { clip-path: inset(0); scale: 1; } }
/* Stepped columns: four columns move one image, alternate columns in opposite directions */
.irot[data-layout="columns"] .ir-cols { display: grid; grid-template-columns: repeat(var(--ir-cn, 4), 1fr); gap: var(--ir-gap, 14px); height: var(--ir-h, 460px); overflow: clip; mask: linear-gradient(transparent, #000 14%, #000 86%, transparent); -webkit-mask: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.irot[data-layout="columns"] .ir-col { display: grid; gap: var(--ir-gap, 14px); align-content: start; transition: translate .8s var(--rv-snappy); translate: 0 calc(var(--off, 0) * (var(--ir-ch, 200px) + var(--ir-gap, 14px)) * -1 - var(--ir-ch, 200px) * var(--lag, 0)); }
.irot[data-layout="columns"] .ir-col img { width: 100%; height: var(--ir-ch, 200px); object-fit: cover; border-radius: var(--ir-r, 14px); display: block; }
@container fr (max-width: 560px) { .irot[data-layout="columns"] { --ir-cn: 2; } .irot[data-layout="columns"] .ir-col:nth-child(n+3) { display: none; } }
/* Spotlight: one large image over a strip of thumbnails; a bar fills across the current one */
.irot[data-layout="spotlight"] .ir-big { position: relative; aspect-ratio: 16 / 10; border-radius: var(--ir-r, 16px); overflow: clip; }
.irot[data-layout="spotlight"] .ir-big img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--ir-t, .7s); }
.irot[data-layout="spotlight"] .ir-big img.on { opacity: 1; animation: ir-settle calc(var(--ir-t, .7s) * 2) ease-out; }
@keyframes ir-settle { from { scale: 1.045; } }
.irot[data-layout="spotlight"] .ir-thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.irot[data-layout="spotlight"] .ir-thumbs button { flex: 0 0 clamp(64px, 11cqi, 120px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 10px; overflow: clip; position: relative; opacity: .4; cursor: pointer; transition: opacity .3s; background: none; }
.irot[data-layout="spotlight"] .ir-thumbs button[aria-current="true"] { opacity: 1; outline: 2px solid currentColor; outline-offset: 2px; }
.irot[data-layout="spotlight"] .ir-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.irot[data-layout="spotlight"] .ir-thumbs button i { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: #fff; transform-origin: 0 50%; scale: 0 1; }
.irot[data-layout="spotlight"] .ir-thumbs button[aria-current="true"] i { animation: ir-prog var(--ir-dwell, 4s) linear forwards; }
.irot.paused .ir-thumbs button i { animation-play-state: paused !important; }
@keyframes ir-prog { to { scale: 1 1; } }

/* Grinner Image Slider (and Logo Marquee): a moving strip of images; curved tracks are placed by the script */
.islide { position: relative; overflow: clip; }
.islide .is-track { display: flex; gap: var(--is-gap, 18px); padding-right: var(--is-gap, 18px); width: max-content; animation: tk var(--sp, 50s) linear infinite; }
.islide.rev .is-track { animation-direction: reverse; }
.islide .is-track img { height: var(--is-h, 260px); width: auto; aspect-ratio: var(--is-ar, 4 / 5); object-fit: cover; border-radius: var(--is-r, 14px); flex: none; }
.islide[data-curve]:not([data-curve="none"]) { height: var(--is-box, 420px); perspective: 1600px; }
.islide[data-curve]:not([data-curve="none"]) .is-track { animation: none; position: absolute; inset: 0; width: auto; display: block; transform-style: preserve-3d; }
.islide[data-curve]:not([data-curve="none"]) .is-track img { position: absolute; left: 50%; top: 50%; translate: -50% -50%; will-change: transform; }
.islide.fade-edges { mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.islide.h-zoom .is-track img { transition: scale .4s; }
@media (hover: hover) and (pointer: fine) { .islide.h-zoom .is-track img:hover { scale: 1.06; } .islide.pause-h:hover .is-track { animation-play-state: paused; } }
/* Scrolling Text, Logo Marquee, Image Slider: Move the strip "As the page scrolls" */
.ticker[data-driver="scroll"] .track, .islide[data-driver="scroll"] .is-track { animation: none; }

/* Grinner Text Rotator: one line at a time; the box keeps the widest line's room */
.trot { display: inline-block; position: relative; vertical-align: bottom; }
.trot > span { display: none; white-space: nowrap; }
.trot > span.on { display: inline-block; }
.trot > span.out { display: inline-block; position: absolute; left: 0; top: 0; }
.trot.l-end > span.out { left: auto; right: 0; }
.trot.ready > span.on { animation: var(--tr-fx, tr-fade-up) var(--tr-t, .55s) var(--rv-snappy) both; }
.trot.ready > span.out { opacity: 1; animation: var(--tr-out, tr-out-up) var(--tr-t, .55s) var(--rv-snappy) both; }
.trot[data-tr="fade"] { --tr-fx: tr-fade; --tr-out: tr-out-fade; }
.trot[data-tr="fade-down"] { --tr-fx: tr-fade-down; --tr-out: tr-out-down; }
.trot[data-tr="blur"] { --tr-fx: tr-blur; --tr-out: tr-out-blur; }
.trot[data-tr="zoom"] { --tr-fx: tr-zoom; --tr-out: tr-out-fade; }
.trot[data-tr="clip"] { --tr-fx: tr-clip; --tr-out: tr-out-fade; }
.trot[data-tr="decrypt"] { --tr-fx: tr-fade; --tr-out: tr-out-fade; }
@keyframes tr-fade-up { from { opacity: 0; translate: 0 .45em; } to { opacity: 1; translate: 0 0; } }
@keyframes tr-fade-down { from { opacity: 0; translate: 0 -.45em; } to { opacity: 1; translate: 0 0; } }
@keyframes tr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tr-blur { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: blur(0); } }
@keyframes tr-zoom { from { opacity: 0; scale: .8; } to { opacity: 1; scale: 1; } }
@keyframes tr-clip { from { clip-path: inset(0 100% 0 0); opacity: 1; } to { clip-path: inset(0 -5% 0 0); opacity: 1; } }
@keyframes tr-out-up { to { opacity: 0; translate: 0 -.45em; } }
@keyframes tr-out-down { to { opacity: 0; translate: 0 .45em; } }
@keyframes tr-out-fade { to { opacity: 0; } }
@keyframes tr-out-blur { to { opacity: 0; filter: blur(10px); } }

/* Grinner Progress Bar (Thin, Thick, Segments, Rings). --v is the share filled, 0 to 1 */
.pb { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pb-gap, 18px); }
.pb .pb-line { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; margin-bottom: 8px; }
.pb .pb-track { height: var(--pb-h, 8px); border-radius: 99px; background: color-mix(in srgb, currentColor 14%, transparent); overflow: clip; }
.pb .pb-fill { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--pb-c, var(--p)); transform-origin: 0 50%; scale: var(--v, .5) 1; }
.pb .pb-segs { display: grid; grid-template-columns: repeat(var(--pb-n, 5), 1fr); gap: 5px; }
.pb .pb-segs i { height: var(--pb-h, 10px); border-radius: 3px; background: color-mix(in srgb, currentColor 14%, transparent); position: relative; overflow: clip; }
.pb .pb-segs i::after { content: ""; position: absolute; inset: 0; background: var(--pb-c, var(--p)); transform-origin: 0 50%; scale: var(--sv, 0) 1; transition: scale .26s var(--rv-smooth) var(--sd, 0s); }
.pb .pb-ring { --c: var(--pb-c, var(--p)); stroke: var(--c); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--v, .5) * 100); stroke-linecap: round; fill: none; transform: rotate(-90deg); transform-origin: 50% 50%; }
@keyframes pb-fill { from { scale: 0 1; } }
@keyframes pb-ring { from { stroke-dashoffset: 100; } }
.mo .pb[data-draw="once"] .pb-fill { transition: scale 1.1s var(--rv-smooth) calc(var(--bi, 0) * 90ms); }
.mo .pb[data-draw="once"] .pb-ring { transition: stroke-dashoffset 1.2s var(--rv-smooth) calc(var(--bi, 0) * 90ms); }
.mo .pb[data-draw="once"]:not(.rv-in) .pb-fill { scale: 0 1; }
.mo .pb[data-draw="once"]:not(.rv-in) .pb-ring { stroke-dashoffset: 100; }

/* Group and Columns Hover (Apply to: the block, or Each card) */
@media (hover: hover) and (pointer: fine) {
  [data-hv] , [data-hv-each] > * { transition: translate .4s var(--rv-snappy), scale .4s var(--rv-snappy), box-shadow .4s, border-color .3s, background-position .6s; }
  [data-hv="lift"]:hover, [data-hv-each="lift"] > :hover { translate: 0 calc(var(--hl, 8px) * -1); box-shadow: 0 26px 40px -26px rgba(0, 0, 0, .5); }
  [data-hv="scale"]:hover, [data-hv-each="scale"] > :hover { scale: var(--hs, 1.03); }
  [data-hv="glow"]:hover, [data-hv-each="glow"] > :hover { box-shadow: 0 0 0 1px var(--hg, var(--p)), 0 0 36px -6px var(--hg, var(--p)); }
  [data-hv="border"]:hover, [data-hv-each="border"] > :hover { box-shadow: inset 0 0 0 2px var(--hb, var(--p)); }
  [data-hv="sweep"], [data-hv-each="sweep"] > * { background-image: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--hsw, #fff) 40%, transparent) 50%, transparent 70%); background-size: 260% 100%; background-position: 120% 0; background-repeat: no-repeat; }
  [data-hv="sweep"]:hover, [data-hv-each="sweep"] > :hover { background-position: -40% 0; }
  [data-hv-each="zoom"] > * img, [data-hv="zoom"] img { transition: scale .6s var(--rv-snappy); }
  [data-hv-each="zoom"] > :hover img, [data-hv="zoom"]:hover img { scale: 1.07; }
}
/* Image Hover: Tilt (Follow the mouse) with Glare sheen; Grayscale to colour */
[data-tilt] { transition: transform .5s var(--rv-snappy); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); position: relative; }
[data-tilt].tilting { transition: transform .08s linear; }
[data-tilt][data-glare]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .45), transparent 55%); opacity: 0; transition: opacity .4s; pointer-events: none; }
[data-tilt][data-glare].tilting::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .i-grey { filter: grayscale(1); transition: filter .5s; } .i-grey:hover, :hover > .i-grey { filter: none; } }

/* Accordion: Open animation (the answer slides open and shut) */
details.acx::details-content { block-size: 0; overflow: clip; transition: block-size var(--acd, .35s) ease-out, content-visibility var(--acd, .35s) allow-discrete; }
details.acx[open]::details-content { block-size: auto; }
details.acx { interpolate-size: allow-keywords; }

/* Video Embed: Pulsate play button */
.ve .play.pulse::before, .ve .play.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--ring, rgba(255, 255, 255, .9)); animation: ve-pulse 2.2s ease-out infinite; }
.ve .play.pulse::after { animation-delay: 1.1s; }
.ve .play.pulse:hover::before, .ve .play.pulse:hover::after { animation: none; opacity: 0; }
@keyframes ve-pulse { from { scale: 1; opacity: .8; } to { scale: 1.9; opacity: 0; } }

/* Gradient border with Animate (Border & Corner Marks › Gradient border) */
@property --gb-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.gb { position: relative; }
/* A gradient-border card inside card stacking must still pin (found in steps w18, 2026-11-05). */
[data-stack] > .gb { position: sticky; }
@container fr (max-width: 760px) { [data-stack][data-stack-mob="off"] > .gb { position: relative; } }
.gb::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: var(--gbw, 2px); background: conic-gradient(from var(--gb-a), var(--gb1, var(--p)), var(--gb2, var(--a1)), var(--gb3, var(--a2)), var(--gb1, var(--p))); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.gb.anim::before { animation: gb-turn var(--gbs, 6s) linear infinite; }
@keyframes gb-turn { to { --gb-a: 360deg; } }

/* Animated background (Group, Cover): two layers moved with transform, behind the content */
.abg { position: absolute; inset: 0; z-index: -1; overflow: clip; pointer-events: none; }
.abg i { position: absolute; border-radius: 50%; filter: blur(var(--ab-blur, 60px)); opacity: var(--ab-o, .55); }
.abg[data-abg="blobs"] i:nth-child(1) { width: 46%; aspect-ratio: 1; left: -6%; top: -10%; background: var(--ab1, var(--a1)); animation: ab-drift-a 22s ease-in-out infinite alternate; }
.abg[data-abg="blobs"] i:nth-child(2) { width: 40%; aspect-ratio: 1; right: -4%; bottom: -14%; background: var(--ab2, var(--a2)); animation: ab-drift-b 26s ease-in-out infinite alternate; }
.abg[data-abg="aurora"] i:nth-child(1) { width: 140%; height: 70%; left: -20%; top: -20%; border-radius: 40%; background: linear-gradient(100deg, transparent 10%, var(--ab1, var(--a1)) 40%, var(--ab2, var(--a2)) 60%, transparent 90%); animation: ab-turn 30s linear infinite; }
.abg[data-abg="aurora"] i:nth-child(2) { width: 120%; height: 60%; right: -20%; bottom: -25%; border-radius: 40%; background: linear-gradient(80deg, transparent 10%, var(--ab2, var(--a2)) 45%, var(--ab1, var(--a3)) 65%, transparent 90%); animation: ab-turn 38s linear infinite reverse; }
.abg[data-abg="halo"] i:nth-child(1) { width: 70%; aspect-ratio: 1; left: 15%; top: 0; border-radius: 50%; background: conic-gradient(from 0deg, var(--ab1, var(--a1)), transparent 30%, var(--ab2, var(--a2)) 55%, transparent 80%, var(--ab1, var(--a1))); animation: ab-turn 24s linear infinite; }
.abg[data-abg="halo"] i:nth-child(2) { display: none; }
.abg[data-abg="grain"]::after { content: ""; position: absolute; inset: -50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); opacity: var(--ab-grain, .16); animation: ab-grain 1.2s steps(4) infinite; mix-blend-mode: multiply; }
.abg[data-abg="stripes"] i:nth-child(1) { inset: -50%; width: auto; border-radius: 0; filter: none; opacity: var(--ab-o, .18); background: repeating-linear-gradient(-45deg, var(--ab1, var(--a1)) 0 22px, transparent 22px 64px); animation: ab-stripes 18s linear infinite; }
.abg[data-abg="stripes"] i:nth-child(2) { display: none; }
@keyframes ab-drift-a { to { transform: translate(28%, 18%) scale(1.15); } }
@keyframes ab-drift-b { to { transform: translate(-24%, -16%) scale(.9); } }
@keyframes ab-turn { to { transform: rotate(360deg); } }
@keyframes ab-grain { 25% { transform: translate(-6%, 4%); } 50% { transform: translate(5%, -7%); } 75% { transform: translate(-3%, 8%); } }
@keyframes ab-stripes { to { transform: translate(90px, 0); } }

/* Grinner Hover List: Work index (the image follows the pointer) */
.hl-work { position: relative; }
.hl-work .hl-img { position: absolute; left: 0; top: 0; width: var(--hl-w, 300px); aspect-ratio: 4 / 3; border-radius: 14px; overflow: clip; pointer-events: none; opacity: 0; scale: .9; rotate: var(--hl-rot, 0deg); transition: opacity .3s, scale .4s var(--rv-snappy), rotate .4s; z-index: 5; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .6); translate: var(--hx, 0px) var(--hy, 0px); }
.hl-work .hl-img img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; opacity: 0; transition: opacity .25s; }
.hl-work .hl-img img.on { opacity: 1; }
.hl-work.hovering .hl-img { opacity: 1; scale: 1; }
@media (hover: none) { .hl-work .hl-img { display: none; } }

/* Before / After: Attract nudge (the handle drifts once when it first comes into view) */
.ba.nudging { transition: none; }

/* The review page: Replay button on each design that moves */
.cap .replay { display: inline-flex; align-items: center; gap: 6px; }
.cap .replay svg { width: 14px; height: 14px; }

/* Accent Draw in: "When scrolled into view" */
.mo .ac-draw:not(.rv-in) > svg path { animation-play-state: paused; }

/* ---------- The label under each design: every Grinner feature it uses ---------- */
.tag .uses { list-style: none; padding: 0; margin: 6px 0 4px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 4px 22px; font-size: .9rem; max-width: none; }
.tag .uses li { position: relative; padding: 5px 0 5px 18px; border-bottom: 1px solid var(--doc-line); max-width: none; }
.tag .uses li::before { content: ""; position: absolute; left: 2px; top: .85em; width: 7px; height: 7px; border-radius: 2px; background: var(--doc-soft); }
.tag .uses li.mo::before { border-radius: 50%; background: var(--doc-pick); }
.tag .uses li b { font-weight: 700; }
.tag .uses-h { margin-top: 8px; }
.tag .uses-h small { color: var(--doc-soft); font-size: .82rem; margin-left: 8px; }
.tag .uses-h small i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--doc-pick); margin: 0 4px 0 2px; vertical-align: 1px; }

/* Scrolling Text and Logo Marquee: Pause on Hover */
@media (hover: hover) and (pointer: fine) { .ticker.pause-h:hover .track { animation-play-state: paused; } }

/* Accent text lines, as Grinner draws them (Accent › Line and Text fill; Haider, 2026-11-05: emphasis uses these,
   a colour block behind words only rarely). --lc line colour, --lw thickness, --lo distance below the text.
   Straight, wavy, double, dotted and strike lines follow the text when it wraps. Hand-drawn, squiggle, zigzag and the
   circle are drawn shapes: they keep their words on one line (keep them to a word or two). None of them move. */
.ac-ul, .ac-wavy, .ac-dbl, .ac-dot, .ac-strike { text-decoration-line: underline; text-decoration-color: var(--lc, var(--a1)); text-decoration-thickness: var(--lw, .07em); text-underline-offset: var(--lo, .14em); text-decoration-skip-ink: none; }
.ac-wavy { text-decoration-style: wavy; --lw: .05em; text-underline-offset: var(--lo, .18em); }
.ac-dbl { text-decoration-style: double; --lw: .045em; }
.ac-dot { text-decoration-style: dotted; --lw: .08em; }
.ac-strike { text-decoration-line: line-through; }
.ac-color { color: var(--lc, var(--a1)); }
.ac-hand, .ac-squig, .ac-zig, .ac-circle { position: relative; display: inline-block; white-space: nowrap; }
.ac-hand::after, .ac-squig::after, .ac-zig::after, .ac-circle::after { content: ""; position: absolute; left: -.04em; right: -.04em; bottom: calc(var(--lo, .04em) * -1); height: .34em; background: var(--lc, var(--a1)); pointer-events: none; -webkit-mask: var(--lm) no-repeat center / 100% 100%; mask: var(--lm) no-repeat center / 100% 100%; }
.ac-hand { --lm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 16C52 7 124 5 196 10' fill='none' stroke='black' stroke-width='10' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ac-squig::after, .ac-zig::after { left: 0; right: 0; bottom: -.24em; height: .3em; -webkit-mask: var(--lm) repeat-x left center / auto 100%; mask: var(--lm) repeat-x left center / auto 100%; }
.ac-squig { --lm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10'%3E%3Cpath d='M0 5Q5 -1 10 5T20 5' fill='none' stroke='black' stroke-width='3'/%3E%3C/svg%3E"); }
.ac-zig { --lm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 8L4 2L8 8L12 2L16 8' fill='none' stroke='black' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ac-circle { margin-inline: .22em; }
.ac-circle::after { left: -.34em; right: -.34em; top: -.2em; bottom: -.2em; height: auto; rotate: var(--lt, -2deg); --lm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'%3E%3Cpath d='M112 7C52 3 8 18 8 41s46 35 98 33 88-14 86-36S150 4 84 9' fill='none' stroke='black' stroke-width='4.4' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* Wireframe views of the design library (Haider, 2026-11-06). One switch at the top: Colour / Wireframe / Wireframe on
   light. Nothing is copied: the wireframe is made live from the coloured design, so the two never drift apart.
   - Wireframe: every colour becomes the grey of the same lightness (contrast and the light/dark structure stay),
     pictures become grey boxes with a cross, stickers become grey outline shapes that keep their motion, and tags name
     each panel's colour role in Grinner's words.
   - Wireframe on light: the same, with the design moved onto a light ground (its colour slots flipped light for dark),
     to test whether it still works where the page plan wants a light section. */
.wf-switch { display: inline-flex; gap: 0; border: 1px solid var(--doc-ink); border-radius: 999px; overflow: hidden; }
.wf-switch button { border: 0 !important; border-radius: 0 !important; padding: 6px 12px !important; font-weight: 600; }
.wf-switch button[aria-pressed="true"] { background: var(--doc-ink) !important; color: var(--doc-card) !important; }
.wf-roles { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.wf-roles[hidden] { display: none; }

/* Grey: every colour, hard-coded ones too, becomes the grey of the same lightness */
body.wf-on .frame, body.wf-on section.hero { filter: grayscale(1); }

/* Pictures: a neutral box with a cross, same size and place */
body.wf-on :is(.frame, section.hero) img:not(.stkr) {
  object-position: -99999px 0 !important;
  background:
    linear-gradient(to top right, transparent calc(50% - .75px), #A9A9A7 calc(50% - .75px) calc(50% + .75px), transparent calc(50% + .75px)),
    linear-gradient(to bottom right, transparent calc(50% - .75px), #A9A9A7 calc(50% - .75px) calc(50% + .75px), transparent calc(50% + .75px)),
    #E3E3E1 !important;
  outline: 1px solid #B9B9B7; outline-offset: -1px;
}
body.wf-on :is(.frame, section.hero) img.stkr { filter: contrast(.5) brightness(1.25); }

/* Stickers: grey outline shapes; shape and motion stay */
body.wf-on :is(.frame, section.hero) svg.stkr :is(path, circle, ellipse, rect, polygon, polyline, line):not(defs *) {
  fill: #F1F1EF !important; stroke: #3A3A3A !important; stroke-width: 1.5px !important; vector-effect: non-scaling-stroke;
}
body.wf-on :is(.frame, section.hero) svg.stkr text, body.wf-on :is(.frame, section.hero) svg.stkr text * { fill: #2A2A2A !important; stroke: none !important; }

/* Role tags */
.wf-tag { display: none; position: absolute; z-index: 45; left: 8px; top: 8px; font: 600 12px/1 "Instrument Sans", system-ui, sans-serif;
  letter-spacing: .01em; padding: 5px 8px; border-radius: 99px; background: #FFFFFF; color: #111111; border: 1px solid #111111;
  pointer-events: none; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); text-transform: none; font-style: normal; }
.wf-tag.wf-sec { background: #111111; color: #FFFFFF; left: 10px; top: 10px; }
body.wf-on.wf-show-roles .wf-tag { display: inline-block; }

/* Ground test result, set by the page script in Wireframe on light */
body.wf-light section.hero[data-wf-light="breaks"], body.wf-light .unit[data-wf-light="breaks"] .desk .frame { box-shadow: 0 0 0 3px #C0362C, 0 24px 50px -32px rgba(0, 0, 0, .45); }
.wf-res { }


/* While the light test measures: no colour transitions, so it reads the final colours */
body.wf-measure .frame *, body.wf-measure section.hero * { transition: none !important; }

/* The colour strip under each design's title (colour_strip.py). */
.tag .cstrip { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 5px; width: max-content; max-width: 100%; margin: 6px 0 4px; padding: 8px 10px 7px; border: 1px solid var(--doc-line); border-radius: 10px; color: var(--doc-ink); text-decoration: none; background: var(--doc-card); }
.tag .cstrip:hover, .tag .cstrip:focus-visible { border-color: var(--doc-ink); }
.tag .cstrip:hover .cs-top b { text-decoration: underline; text-underline-offset: 2px; }
.tag .cs-top { font: 500 .8rem/1.2 "Schibsted Grotesk", sans-serif; color: var(--doc-soft); }
.tag .cs-top b { color: var(--doc-ink); font-weight: 700; }
.tag .cs-top em { font-style: normal; font-size: .7rem; letter-spacing: .04em; margin-left: .35em; }
.tag .cs-fill { font: 500 .74rem/1.2 "Schibsted Grotesk", sans-serif; color: var(--doc-soft); }
.tag .cs-fill b { color: var(--doc-ink); font-weight: 700; }
.tag .cs-row { display: flex; flex-wrap: wrap; gap: 4px; }
.tag .cs-sw { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 64px; }
.tag .cs-sw i { display: block; width: 100%; height: 24px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
.tag .cs-sw small { font: 500 .66rem/1.1 "Schibsted Grotesk", sans-serif; color: var(--doc-soft); white-space: nowrap; }
@media (max-width: 640px) { .tag .cs-sw { width: 52px; } }


/* library.grinner.io: one design per page */ .picks-bar,.pick,.tag,.doc,.toc,.col.phone,.cap{display:none!important} body{margin:0;background:#fff} main{padding:0!important;margin:0!important;max-width:none!important} .unit{margin:0!important;padding:0!important} .stage{display:block!important;padding:0!important;margin:0!important;gap:0!important} .col.desk{width:100%!important;max-width:none!important;margin:0!important} .frame{border-radius:0!important;box-shadow:none!important;border:0!important;margin:0!important}