@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: hidden; 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); }
}

/* 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}