/* Aristoqle marketing site. Colours, fonts and radii come from /brand/tokens.css, loaded before this file.

   The look (24 September 2026): editorial. A warm paper canvas, a near-black hero and closing band,
   a sand panel and one gold panel; Montserrat, the face of the wordmark, for every heading, with
   the last words of the big ones set in italic gold (the "accent"); Manrope for everything else;
   small tracked capitals for labels, links and buttons; hairlines instead of shadows and rounded
   corners. Section labels on the home page are numbered by a CSS counter (.eyebrow--n), so the
   copy files carry no numbers. (Instrument Serif and Instrument Sans were tried the same day: the
   serif read as a museum, the sans matched nothing; the logo's own face settled it.)

   Contrast notes (WCAG 2.2 AA, measured):
   - gold as text on the paper canvas: --brand-gold-ink (3.9:1) is used only at display sizes (the
     italic accents, 40px and up). Small gold text on light surfaces is --brand-gold-ink-2 (5.0:1).
   - white or cream on --brand-gold-soft fails (2.3:1), so the gold panel and the gold buttons carry
     charcoal text (6.5:1), and the accent there uses --gold-deep (3.7:1, display size only).
   - on --brand-sand small gold text fails (3.6:1), so eyebrows there are --ink-label (6.2:1) and
     only the large numerals are gold.
   - on --brand-night, cream text is 13:1 and --brand-gold-soft is 7.4:1. */

:root {
    --maxw: 1180px;
    --gutter: clamp(16px, 4vw, 40px);
    --section: clamp(64px, 9vw, 128px);
    --canvas: #F3EFE6;                          /* a shade lighter than the token: closer to paper */
    --cell: rgba(255, 255, 255, .55);           /* cards and grid cells, a touch lighter than whatever is behind them */
    --line: var(--hairline-strong);
    --line-on-dark: rgba(233, 224, 203, .22);
    --line-on-sand: rgba(44, 38, 30, .24);
    --btn: var(--brand-night);
    --btn-hover: #3A3229;
    --link: var(--brand-gold-ink-2);
    --accent: var(--brand-gold-ink);            /* the italic words in a heading, on light surfaces */
    --gold-deep: #5E4A24;                       /* large-text AA on gold, normal-text AA on sand */
    --radius-ctrl: 2px;                         /* the tokens say 8 and 10: this site is squarer */
    --radius-card: 2px;
    --shadow: none;
    /* The small arrow after buttons and links. A mask, so it takes the colour of the text and needs
       no glyph that Manrope does not have. */
    --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 9.5 9.5 2.5M4 2.5h5.5V8' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font);
    font-size: 1.04rem;
    line-height: 1.6;
    overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* Montserrat is a wide face: the sizes are a step under what a narrower sans would take, the
   weight is 500 rather than the wordmark's 600, and the tracking is tightened at display sizes,
   all so the headings keep the logo's shapes without its bulk. */
h1, h2, h3, .h3 { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.6rem); line-height: 1.05; letter-spacing: -.045em; }
h2 { font-size: clamp(1.7rem, 1.15rem + 2vw, 2.7rem); line-height: 1.08; letter-spacing: -.04em; }
h3, .h3 { font-size: 1.2rem; line-height: 1.25; letter-spacing: -.02em; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
address { font-style: normal; }
strong { font-weight: 700; }

/* The last words of a big heading: italic, gold, a step lighter, and always on a line of their own.
   Templates write them as <em class="accent">, from the "title_accent" key next to "title" in the
   copy files. */
.accent { display: block; font-style: italic; font-weight: 400; color: var(--accent); }

/* Chinese and Japanese: neither font has CJK glyphs, so name good system fonts per script (the same
   code points are drawn differently in the two languages). Latin text and digits still use the
   site's fonts. Also applies to the single "中文" / "日本語" links in the language bar of the other
   languages. Headings use the same system sans, bold; italic does not exist there, so the accent
   keeps its colour and drops the slant. */
:lang(zh) { font-family: 'Manrope', 'PingFang SC', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', system-ui, sans-serif; }
:lang(ja) { font-family: 'Manrope', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', system-ui, sans-serif; }
/* .accent and .tier-prefix are inline elements inside a heading: the :lang rule above matches them
   as elements of their own, so they are named here or they would fall back to the body font. */
html:lang(zh) :is(h1, h2, h3, .h3, .statement, .num, .beats-n, .tier-price, .accent, .tier-prefix) { font-family: 'Montserrat', 'PingFang SC', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', system-ui, sans-serif; }
html:lang(ja) :is(h1, h2, h3, .h3, .statement, .num, .beats-n, .tier-price, .accent, .tier-prefix) { font-family: 'Montserrat', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', system-ui, sans-serif; }
html:lang(zh) .accent, html:lang(ja) .accent { font-style: normal; }
html:lang(zh) body, html:lang(ja) body { line-height: 1.85; line-break: strict; }
html:lang(zh) :is(h1, h2, h3, .statement), html:lang(ja) :is(h1, h2, h3, .statement) { letter-spacing: 0; line-height: 1.3; }
html:lang(zh) h1, html:lang(ja) h1 { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.2rem); }
html:lang(zh) h2, html:lang(ja) h2 { font-size: clamp(1.7rem, 1.15rem + 1.8vw, 2.6rem); }
html:lang(zh) .eyebrow, html:lang(ja) .eyebrow { letter-spacing: .12em; }
html:lang(zh) :is(.btn, .label, .more a, .more-link, .area-go, .compare summary, .menu-lang-label, .menu-group-label, .nav-mobile summary, .site-footer h2, .footer-top, .hero-caption, .solution h3),
html:lang(ja) :is(.btn, .label, .more a, .more-link, .area-go, .compare summary, .menu-lang-label, .menu-group-label, .nav-mobile summary, .site-footer h2, .footer-top, .hero-caption, .solution h3) { letter-spacing: .04em; }
/* Windows CJK fonts only have regular and bold, so 600 turns into bold. Keep running text and menus calm. */
html:lang(zh) :is(.nav-desktop a, .nav-group summary, .nav-mobile li a, .reassure, .beats li, .hero-caption),
html:lang(ja) :is(.nav-desktop a, .nav-group summary, .nav-mobile li a, .reassure, .beats li, .hero-caption) { font-weight: 500; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--brand-charcoal); outline-offset: 3px; border-radius: 2px; }
.section--dark :focus-visible, .hero :focus-visible, .site-footer :focus-visible { outline-color: #fff; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: 16px; top: -100px; z-index: 100;
    padding: 12px 18px; background: var(--brand-charcoal); color: #fff; border-radius: var(--radius-ctrl); font-weight: 700;
}
.skip-link:focus { top: 12px; outline-color: #fff; }

.draft-bar { padding: 6px var(--gutter); background: var(--brand-charcoal); color: #fff; font-size: .85rem; text-align: center; }

/* ---------- layout helpers ---------- */

.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: calc(820px + 2 * var(--gutter)); }

/* A grid that reaches the window's edges on both sides while its middle two tracks line up with
   .wrap: the outer tracks are never narrower than the gutter and share whatever is left once the
   middle has its 1180px. Used where a photograph or a panel has to bleed to the edge on one side. */
.bleed {
    display: grid;
    grid-template-columns:
        [full-start] minmax(var(--gutter), 1fr)
        [content-start] minmax(0, calc(var(--maxw) / 2))
        [mid] minmax(0, calc(var(--maxw) / 2))
        [content-end] minmax(var(--gutter), 1fr)
        [full-end];
}

.section { padding-block: var(--section); }
.section--surface { background: #FAF8F3; }
.section--paper { background: var(--brand-cream); }
.section--sand { background: var(--brand-sand); --line: var(--line-on-sand); }
.section--dark { background: var(--brand-night); color: var(--brand-cream); --accent: var(--brand-gold-soft); --link: var(--brand-cream); --line: var(--line-on-dark); }
.section--dark a { color: var(--brand-cream); }
.section--dark .lead { color: rgba(233, 224, 203, .85); }
.section--dark .note { color: rgba(233, 224, 203, .7); }
.section--gold { background: var(--brand-gold-soft); color: var(--brand-charcoal); --accent: var(--gold-deep); --link: var(--brand-charcoal); --line: var(--line-on-sand); }
.section--gold .lead, .section--gold .fineprint { color: rgba(44, 38, 30, .85); }
.section--gold .fineprint a { color: var(--brand-charcoal); }
.section--tight { padding-top: clamp(36px, 4.5vw, 60px); }

.section h2 + p, .section h2 + .lead { margin-top: 20px; }
.section h2 + ul, .section h2 + ol, .section h2 + div, .section .lead + ul, .section .lead + ol { margin-top: clamp(28px, 4vw, 48px); }
/* A heading that exists only for screen readers occupies no height, but the space that follows a
   heading was still being added, leaving a gap with nothing above it (48px of it on Pricing). */
.section h2.visually-hidden + ul, .section h2.visually-hidden + ol, .section h2.visually-hidden + div { margin-top: 0; }
.narrow p + p { margin-top: 1em; }

/* The head of a section: heading on the left, a short paragraph or a list on the right. On the
   home page the right column sits on the heading's baseline; .head--top hangs it from the top. */
.head { display: grid; gap: 28px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.head--top { align-items: start; }
/* Less room under the head, for a section that should start close to the strip above it. */
.head--tight { margin-bottom: clamp(24px, 3vw, 40px); }
.head:last-child { margin-bottom: 0; }
.head > h2 + * { margin-top: 0; }
.head .lead { max-width: 40ch; }
@media (min-width: 900px) { .head { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }

/* The small tracked label above a heading, with a short rule before it. On the home page it also
   carries the section's number, counted by CSS: nothing in the copy files knows the order. */
main { counter-reset: sec; }
.eyebrow {
    margin-bottom: clamp(22px, 3vw, 36px); line-height: 1.7;
    font-family: var(--font); font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--brand-gold-ink-2);
}
/* The rule and the number are inline, so a long label wraps like any text and the number stays
   right after its last word. */
.eyebrow::before { content: ""; display: inline-block; width: 26px; height: 1px; margin: 0 14px 4px 0; vertical-align: middle; background: currentColor; }
.eyebrow--n::after { counter-increment: sec; content: "/ " counter(sec, decimal-leading-zero); margin-left: 12px; letter-spacing: .14em; color: var(--ink-2); white-space: nowrap; }
.section--dark .eyebrow, .hero .eyebrow { color: var(--brand-gold-soft); }
.section--dark .eyebrow--n::after, .hero .eyebrow--n::after { color: rgba(233, 224, 203, .55); }
.section--sand .eyebrow { color: var(--ink-label); }
.section--sand .eyebrow--n::after { color: var(--ink-label); }
.section--gold .eyebrow { color: var(--brand-charcoal); }
.section--gold .eyebrow--n::after { color: rgba(44, 38, 30, .85); }

.lead { font-size: clamp(1.05rem, .95rem + .4vw, 1.2rem); line-height: 1.6; color: var(--ink-label); max-width: 60ch; }
/* One sentence set large, in the display face. The plain paragraph that follows it is the note. */
.statement { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.2rem, 1.02rem + .75vw, 1.5rem); line-height: 1.4; letter-spacing: -.02em; }
.note { margin-top: 20px; font-size: .97rem; line-height: 1.65; color: var(--ink-soft); max-width: 52ch; }
.note + .note { margin-top: .5em; }
.fineprint { margin-top: 24px; font-size: .92rem; color: var(--ink-soft); }
.label { font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }

/* The "read more" link under a block: small capitals with an arrow and a rule beneath. */
.more { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: clamp(28px, 4vw, 48px); }
.more > span { display: none; }         /* the "·" between two links: the gap does its job now */
.more--tight { margin-top: 12px; }      /* links that finish the line of fine print just above them */
.more a, .more-link {
    display: inline-flex; align-items: center; gap: 26px; padding: 12px 0 10px;
    border-bottom: 1px solid currentColor; color: var(--ink);
    font-family: var(--font); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
    transition: gap .15s ease;
}
.more a::after, .more-link::after, .btn::after {
    content: ""; width: 11px; height: 11px; flex: none; background: currentColor;
    -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat;
}
.more a:hover, .more-link:hover { gap: 34px; }
.section--dark .more a, .section--dark .more-link, .hero .more-link { color: var(--brand-cream); }
.section--gold .more a { color: var(--brand-charcoal); }

.grid-2, .grid-3, .feature-grid { display: grid; gap: clamp(16px, 2.4vw, 28px); }
.split { display: grid; gap: clamp(32px, 5vw, 72px); align-items: center; }
@media (min-width: 760px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) { .split { grid-template-columns: 1.1fr .9fr; } }
@media (min-width: 1080px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }

.card { padding: clamp(22px, 2.8vw, 34px); background: var(--cell); border: 1px solid var(--line); border-radius: var(--radius-card); }
.card--sunk { background: rgba(255, 255, 255, .3); }
.card h3 + p, .card .h3 + * { margin-top: 12px; }
.card p { color: var(--ink-label); }

/* ---------- buttons ---------- */

.btn {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 28px;
    min-height: 54px; padding: 12px 24px;
    border: 1px solid transparent; border-radius: var(--radius-ctrl);
    font: inherit; font-size: .76rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2;
    text-align: left; text-decoration: none; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn--small { min-height: 42px; padding: 8px 16px; gap: 18px; font-size: .7rem; white-space: nowrap; }
.btn--primary { background: var(--btn); color: var(--brand-cream); }
.btn--primary:hover { background: var(--btn-hover); }
.btn--ghost { border-color: var(--brand-charcoal); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: rgba(44, 38, 30, .07); }
.btn--on-dark { background: var(--brand-gold-soft); color: var(--brand-charcoal); }
.btn--on-dark:hover { background: #D8BB6C; }
.btn--ghost-on-dark { border-color: rgba(233, 224, 203, .55); color: var(--brand-cream); }
.btn--ghost-on-dark:hover { background: rgba(233, 224, 203, .1); border-color: var(--brand-cream); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 36px; }

/* ---------- header ---------- */

/* The header stays at the top of the window while the page scrolls. scroll-padding-top on <html>
   keeps in-page targets (the skip link, #video) and keyboard focus from landing underneath it. */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--canvas); border-bottom: 1px solid var(--line); }
/* Phones: a two-column grid (logo | buttons) that cannot wrap. From 680px: one flex row. */
.header-row { position: relative; display: grid; grid-template-columns: minmax(80px, 1fr) auto; align-items: center; column-gap: 12px; }
.brand { flex: none; display: block; padding-block: 22px; }
.brand img { width: 150px; }
.header-actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
@media (min-width: 680px) {
    .header-row { display: flex; gap: 20px; }
    /* flex: none so the sign-in link and the "try it free" button are never squeezed by a long menu. */
    .header-actions { flex: none; margin-left: auto; gap: 14px; }
}
.header-sign-in { display: inline-flex; align-items: center; min-height: 42px; padding: 6px 10px; color: var(--ink); font-size: .92rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.header-sign-in:hover { text-decoration: underline; text-underline-offset: .3em; }

/* Language drop-down in the header (from 680px). A <details> element, so it needs no script: the
   summary shows the current language, the list below has every language with the current one ticked.
   On phones the same list sits inside the menu panel instead (.menu-lang). */
.lang { display: none; position: relative; }
.lang summary {
    display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px 6px 12px; list-style: none; cursor: pointer;
    border-radius: var(--radius-ctrl); font-size: .92rem; font-weight: 600; white-space: nowrap;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after { content: ""; width: 7px; height: 7px; margin-top: -4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.lang summary:hover, .lang[open] summary { background: rgba(44, 38, 30, .06); }
.lang ul {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 190px; padding: 6px;
    max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow-y: auto; overscroll-behavior: contain;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: 0 12px 32px rgba(44, 38, 30, .1);
}
.lang li a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 12px; border-radius: 2px; color: var(--ink); font-size: .95rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.lang li a:hover { background: rgba(44, 38, 30, .06); }
.lang li a[aria-current] { background: var(--paper); }
.lang li a[aria-current]::after { content: ""; width: 10px; height: 6px; margin-top: -3px; border-left: 2px solid var(--brand-gold-ink-2); border-bottom: 2px solid var(--brand-gold-ink-2); transform: rotate(-45deg); }
.lang-code { display: none; }
/* 760, not 680: at 680 the language drop-down and the "try it free" button both appear while the
   menu button is still there, and in Croatian and German those four controls plus the logo are
   wider than the row. Below 760 the language pills and the button live in the menu panel. */
@media (min-width: 760px) { .lang { display: block; } }
@media (min-width: 1280px) { .lang-full { display: none; } .lang-code { display: inline; } }

/* Languages inside the phone menu: a row of pills under the menu links. Hidden once the header
   drop-down is available. */
.menu-lang-label { margin: 16px 12px 6px; font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.menu-lang { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 4px 4px; }
.nav-mobile .menu-lang li a { display: block; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--radius-ctrl); font-size: .9rem; }
.nav-mobile .menu-lang li a[aria-current] { background: var(--brand-charcoal); border-color: var(--brand-charcoal); color: #fff; box-shadow: none; }
@media (min-width: 760px) { .menu-lang, .menu-lang-label { display: none; } }

/* The menu holds five entries and must stay on one line: the header is capped at --maxw (1180px), so
   there is room for about five. Two of them are drop-downs (site.json "menu"): "Platform" and "Who it
   is for", each a <details> element like the language list, so no script is needed. */
.nav-desktop { display: none; margin-inline: auto; }
.nav-desktop > ul { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.nav-desktop a, .nav-mobile li a {
    display: block; padding: 8px 12px; color: var(--ink); font-size: .92rem; font-weight: 500; text-decoration: none;
}
.nav-desktop a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .4em; }
.nav-desktop a[aria-current="page"], .nav-group summary.nav-ancestor { text-decoration: underline; text-decoration-color: var(--brand-gold); text-decoration-thickness: 2px; text-underline-offset: .4em; }
.nav-mobile li a:hover { background: rgba(44, 38, 30, .06); }
.nav-mobile li a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--brand-gold); }

.nav-group { position: relative; }
.nav-group summary {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; list-style: none; cursor: pointer;
    border-radius: var(--radius-ctrl); font-size: .92rem; font-weight: 500;
}
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after { content: ""; width: 6px; height: 6px; margin-top: -4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.nav-group summary:hover, .nav-group[open] summary { background: rgba(44, 38, 30, .06); }
.nav-group ul {
    position: absolute; left: 0; top: calc(100% + 6px); z-index: 50; min-width: 230px; padding: 6px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: 0 12px 32px rgba(44, 38, 30, .1);
}
.nav-group li a { padding: 9px 12px; border-radius: 2px; }
.nav-group li a:hover { background: rgba(44, 38, 30, .06); text-decoration: none; }
.nav-group li a[aria-current="page"] { background: var(--paper); text-decoration: none; box-shadow: inset 3px 0 0 var(--brand-gold); }
/* On a phone the drop-downs open up: the group's name as a small label, its links under it. */
.menu-group-label { margin: 12px 12px 2px; font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.menu-group:first-child .menu-group-label { margin-top: 4px; }

.nav-mobile summary {
    display: inline-flex; align-items: center; min-height: 42px; padding: 6px 16px; list-style: none; cursor: pointer;
    border: 1px solid var(--brand-charcoal); border-radius: var(--radius-ctrl); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.nav-mobile summary::-webkit-details-marker { display: none; }
.nav-mobile[open] summary { background: var(--brand-charcoal); color: #fff; }
.nav-mobile nav {
    position: absolute; right: var(--gutter); top: calc(100% + 8px); z-index: 50; width: min(340px, calc(100vw - 2 * var(--gutter)));
    max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px); overflow-y: auto; overscroll-behavior: contain; /* the header is sticky, so the panel must fit under it */
    padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: 0 12px 32px rgba(44, 38, 30, .1);
}
.nav-mobile li a { padding: 12px; font-size: 1rem; }
.nav-mobile .btn { width: 100%; margin-top: 8px; }

.header-cta { display: none; }
/* The narrowest phones (down to 280px): the logo is already at its 80px floor, so the sign-in
   link has to give way. It moves into the menu panel, which is why .menu-sign-in exists. */
.menu-sign-in { display: none; }
@media (max-width: 399px) {
    .brand img { width: 124px; }
    .header-sign-in { display: none; }
    .menu-sign-in { display: block; }
}
@media (min-width: 760px) { .header-cta { display: inline-flex; } }
@media (min-width: 1280px) {
    .nav-desktop { display: block; }
    .nav-mobile { display: none; }
}

/* ---------- home: hero ---------- */

/* Night-dark, edge to edge. The words sit in the left half of the 1180px measure; the photographs
   fill the right half and run on to the window's edge. Under 980px the words come first and the
   photographs follow as a full-width band. */
.hero { background: var(--brand-night); color: var(--brand-cream); --accent: var(--brand-gold-soft); }
.hero-copy { grid-column: content-start / content-end; padding-block: clamp(48px, 7vw, 112px) clamp(44px, 6vw, 88px); }
.hero-show { grid-column: full-start / full-end; }
@media (min-width: 980px) {
    .hero-copy { grid-column: content-start / mid; padding-right: clamp(32px, 5vw, 80px); }
    .hero-show { grid-column: mid / full-end; min-height: 560px; }
}
/* The words. These stay above the variants below (gold, mirrored, stacked), which override them
   with selectors of the same specificity: the later rule wins. */
.hero h1 { font-size: clamp(2.3rem, 1.3rem + 3.4vw, 4.1rem); line-height: 1.05; color: #FBF8F2; }
.hero .lead { margin-top: 30px; max-width: 46ch; color: rgba(233, 224, 203, .85); }
.hero .actions { margin-top: 40px; }
/* Inner pages open the same way with one still picture instead of the carousel. */
.hero-photo img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 980px) { .hero-photo img { aspect-ratio: auto; } }
/* A drawing rather than a photograph (Activities: one source, three experiences): never cropped, on the
   drawing's own paper colour so the margins around it do not show. */
.hero-photo--plate { background: #F7F0E6; }
.hero-photo--plate img { object-fit: contain; aspect-ratio: auto; }
/* The walkthrough video in the hero (How it works): the right half holds the player, its label,
   the subtitle note and the transcript. It ends at the content edge, not the window's, so the
   player lines up with the header. */
.hero-video { grid-column: full-start / full-end; padding: 0 var(--gutter) clamp(40px, 6vw, 80px); }
@media (min-width: 980px) {
    .hero--video .hero-show { grid-column: mid / content-end; align-self: center; }
    .hero-video { padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 6vw, 80px) clamp(32px, 5vw, 80px); }
}
.hero-video-title { margin-bottom: 18px; color: var(--brand-gold-soft); }
.hero-video .video { margin-top: 0; border: 1px solid rgba(233, 224, 203, .18); }
.hero-video .video-note { color: rgba(233, 224, 203, .7); }
.hero-video .transcript summary { color: var(--brand-cream); }
.hero-video .transcript p { color: rgba(233, 224, 203, .75); }
/* A gold hero instead of a dark one (Activities): the gold panel's scheme, charcoal on gold with
   the accent in the deeper gold, and the dark button, since a gold one would vanish. These come
   after the .hero rules on purpose: same specificity, so the later one wins. */
.hero--gold { background: var(--brand-gold-soft); color: var(--brand-charcoal); --accent: var(--gold-deep); }
.hero--gold h1 { color: var(--brand-charcoal); }
.hero--gold .lead { color: rgba(44, 38, 30, .85); }
.hero--gold .eyebrow { color: var(--brand-charcoal); }
.hero--gold .eyebrow--n::after { color: rgba(44, 38, 30, .85); }
.hero--gold .more-link { color: var(--brand-charcoal); }
.hero--gold :focus-visible { outline-color: var(--brand-charcoal); }
/* The beats strip after a gold hero goes dark, giving the opening a firm lower edge. */
.hero--gold + .beats-band { background: var(--brand-night); }
.hero--gold + .beats-band li { border-color: var(--line-on-dark); color: var(--brand-cream); }
.hero--gold + .beats-band .beats-n { color: var(--brand-gold-soft); }
/* Compact: a shorter opening for a page whose real content is a list (Activities), so the first
   cells of the library show above the fold. The words lose a size step and some air, and the
   picture no longer sets the height: on a desktop it is pinned inside a box of fixed height and
   shown whole within it, whatever its own proportions. Under 980px nothing changes, the picture
   is a band under the words there. Same specificity as the .hero rules above, so these win by
   coming later. */
.hero--compact .hero-copy { padding-block: clamp(36px, 4.5vw, 64px) clamp(32px, 4vw, 56px); }
.hero--compact h1 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3.3rem); }
.hero--compact .lead { margin-top: 22px; }
.hero--compact .actions { margin-top: 30px; }
@media (min-width: 980px) {
    .hero--compact .hero-show { position: relative; min-height: 380px; }
    .hero--compact .hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
    .hero--compact .hero-photo--plate img { padding: clamp(12px, 2vw, 28px); }
}
/* On a phone the same drawing would be a square as wide as the screen: cap its height, and let
   object-fit: contain letterbox it on the plate's own paper colour. */
@media (max-width: 979px) {
    .hero--compact .hero-photo--plate img { max-height: 64vw; padding: 12px; }
}
/* Mirrored: the picture on the left, the words on the right. The words stay first in the page,
   so on a phone and for a screen reader the order does not change. */
@media (min-width: 980px) {
    /* grid-row: 1 on both, or auto-placement would drop the picture to a second row because it
       starts left of where the words, placed first, ended. */
    .hero--flip .hero-copy { grid-row: 1; grid-column: mid / content-end; padding-right: 0; padding-left: clamp(32px, 5vw, 80px); }
    .hero--flip .hero-show { grid-row: 1; grid-column: full-start / mid; }
}
/* Stacked: the words in a head row (heading left, paragraph and buttons right, on one baseline),
   then one wide picture under them, edge to edge and shown whole. Not in use at the moment: it
   pushed the page's content a whole screen down. Kept for a page with a picture that earns it. */
.hero--stack { padding-top: clamp(48px, 7vw, 104px); }
.hero--stack .head { margin-bottom: clamp(40px, 6vw, 88px); }
.hero--stack .lead { margin-top: 0; }
.hero--stack .actions { margin-top: 32px; }
.hero-band img { display: block; width: 100%; height: auto; }
.reassure { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 44px; font-size: .74rem; font-weight: 600; letter-spacing: .05em; color: rgba(233, 224, 203, .62); }
/* On a phone the three lines stack. */
@media (max-width: 599px) {
    .reassure { display: grid; gap: 6px; }
}

/* The right half of the hero: seven photographs of the places the product is used, cross-fading one
   into the next. No script anywhere on this site, so the fade is a single @keyframes that every
   picture runs with a different delay, and the pause button is a checkbox the CSS reads.

   The timing is worked out for SEVEN pictures. If you add or remove one in site.json (hero_carousel),
   change --cycle to (number x --slide), add or drop an --i line below, reset the percentages in
   @keyframes hero-fade to (--fade / --cycle), (--slide / --cycle) and ((--slide + --fade) / --cycle),
   and the one in @keyframes hero-dot (further down, with the dots) to (--slide / --cycle). */

.carousel {
    --slide: 5.5s;              /* how long one picture is held */
    --fade: .9s;                /* how long one picture takes to dissolve into the next */
    --cycle: 38.5s;             /* seven pictures x --slide */
    position: relative; width: 100%; height: 100%; overflow: hidden; background: #2A241D;
}

/* All seven sit in the same grid cell, so the box is one picture tall and nothing moves as they
   change. On a phone the pictures set the height (4:3); beside the words they take the height of
   the words and are cropped to it. */
.carousel-track { display: grid; grid-template-rows: minmax(0, 1fr); height: 100%; }
.carousel-track > li { grid-area: 1 / 1; min-height: 0; }
.carousel-track img {
    width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    opacity: 0; animation: hero-fade var(--cycle) linear infinite;
    animation-delay: calc(var(--i) * var(--slide) - var(--fade));
}
@media (min-width: 980px) { .carousel-track img { aspect-ratio: auto; } }
/* The first picture starts at full opacity (its delay is negative), so the hero is never blank. */
@keyframes hero-fade {
    0%      { opacity: 0; }
    2.34%   { opacity: 1; }     /* --fade / --cycle */
    14.29%  { opacity: 1; }     /* --slide / --cycle */
    16.62%  { opacity: 0; }     /* (--slide + --fade) / --cycle */
    100%    { opacity: 0; }
}

.carousel-track > :nth-child(1), .carousel-dots > :nth-child(1) { --i: 0; }
.carousel-track > :nth-child(2), .carousel-dots > :nth-child(2) { --i: 1; }
.carousel-track > :nth-child(3), .carousel-dots > :nth-child(3) { --i: 2; }
.carousel-track > :nth-child(4), .carousel-dots > :nth-child(4) { --i: 3; }
.carousel-track > :nth-child(5), .carousel-dots > :nth-child(5) { --i: 4; }
.carousel-track > :nth-child(6), .carousel-dots > :nth-child(6) { --i: 5; }
.carousel-track > :nth-child(7), .carousel-dots > :nth-child(7) { --i: 6; }

/* A dark scrim along the bottom edge, so the caption and the control read over any photograph. */
.carousel::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: 1; pointer-events: none;
    background: linear-gradient(to top, rgba(31, 27, 22, .88), rgba(31, 27, 22, 0));
}
.hero-caption {
    position: absolute; left: clamp(20px, 3vw, 36px); bottom: 22px; z-index: 2; max-width: calc(100% - 160px);
    font-size: .68rem; font-weight: 700; letter-spacing: .16em; line-height: 1.6; text-transform: uppercase; color: var(--brand-cream);
}

/* The control. WCAG 2.2 SC 2.2.2 asks for a way to stop anything that moves by itself for longer
   than five seconds, and without script a checkbox is the only thing that can hold that state. The
   input is hidden from sight but still focusable and still announced; the label is what is seen. */
.carousel-switch { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.carousel-pause {
    position: absolute; right: clamp(16px, 3vw, 36px); bottom: 16px; z-index: 2;
    display: inline-flex; align-items: center; gap: 12px; min-height: 34px; padding: 6px 10px;
    border: 1px solid transparent; border-radius: var(--radius-ctrl); color: var(--brand-cream); cursor: pointer; user-select: none;
}
.carousel-pause:hover { border-color: rgba(233, 224, 203, .45); }
.carousel-switch:focus-visible + .carousel-track + .carousel-pause { outline: 3px solid #fff; outline-offset: 3px; }

.carousel-dots { display: flex; gap: 6px; }
.carousel-dots > span {
    width: 5px; height: 5px; border-radius: 50%; background: rgba(233, 224, 203, .35);
    animation: hero-dot var(--cycle) step-end infinite; animation-delay: calc(var(--i) * var(--slide));
}
@keyframes hero-dot {
    0%, 14.28%   { background: var(--brand-gold-soft); }     /* --slide / --cycle */
    14.29%, 100% { background: rgba(233, 224, 203, .35); }
}

/* Two bars while it is running, a triangle once it is paused. The icon is the whole of what is seen:
   the two words are the button's name for anyone who cannot see it, so they stay in the page and
   out of sight rather than being deleted. A control with no name is a failure of WCAG 2.2, 4.1.2. */
.carousel-pause-icon { width: 9px; height: 11px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.carousel-pause-text, .carousel-play-text {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}
.carousel-play-text { display: none; }
.carousel-switch:checked ~ .carousel-pause .carousel-pause-text { display: none; }
.carousel-switch:checked ~ .carousel-pause .carousel-play-text { display: block; }
.carousel-switch:checked ~ .carousel-pause .carousel-pause-icon {
    width: 0; height: 0; border-left: 9px solid currentColor; border-right: 0;
    border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent;
}

/* Paused by the button, and while the pointer rests on the picture. Not on :focus-within: the only
   focusable thing in here is the button itself, so that would leave it stuck after one click. */
.carousel-switch:checked ~ .carousel-track img,
.carousel-switch:checked ~ .carousel-pause .carousel-dots > span,
.carousel:hover .carousel-track img,
.carousel:hover .carousel-dots > span { animation-play-state: paused; }

/* Asked for no motion: the first picture, no fading, and no button because nothing moves. The
   stylesheet's own reduced-motion rule at the end already switches the animation off; this is what
   has to be true once it has. */
@media (prefers-reduced-motion: reduce) {
    .carousel-track > :not(:first-child) { display: none; }
    .carousel-track img { opacity: 1; }
    .carousel-pause, .carousel-switch { display: none; }
}

/* ---------- home: the three beats under the hero ---------- */

.beats-band { background: var(--brand-sand); }
.beats { display: grid; counter-reset: item; }
.beats li {
    counter-increment: item; display: flex; align-items: baseline; gap: 22px; padding: 20px 0;
    border-top: 1px solid var(--line-on-sand); font-size: .95rem; font-weight: 600; color: var(--brand-charcoal);
}
.beats li:first-child { border-top: 0; }
.beats-n { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; line-height: 1; letter-spacing: -.03em; color: var(--brand-gold-ink-2); }
.beats-band .beats-n { color: var(--gold-deep); }
.beats-n::before { content: counter(item, decimal-leading-zero); }
@media (min-width: 760px) {
    .beats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .beats li { padding: 30px 24px; border-top: 0; border-left: 1px solid var(--line-on-sand); }
    .beats li:first-child { padding-left: 0; border-left: 0; }
}

/* ---------- numbered lists (home steps and trust, the six steps, the six principles) ---------- */

/* A serif "01" counted by CSS. The <ol> numbers the items for a screen reader; the span is hidden
   from it and only drawn. */
.num { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1; letter-spacing: -.03em; color: var(--brand-gold-ink-2); }
.section--sand .num { color: var(--gold-deep); }
.steps-row, .step-list, .principle-list, .trust-list, .ways { counter-reset: item; }
.steps-row > li, .step-list > li, .principle-list > li, .trust-list > li, .ways > li { counter-increment: item; }
.num::before { content: counter(item, decimal-leading-zero); }

.steps-row { display: grid; gap: 36px clamp(20px, 3vw, 28px); }
.steps-row li { padding-top: 22px; border-top: 1px solid var(--line-on-sand); }
.steps-row h3 { margin-top: 24px; font-size: 1.3rem; }
.steps-row p { margin-top: 10px; font-size: .95rem; line-height: 1.55; color: var(--ink-label); }
@media (min-width: 640px) { .steps-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .steps-row { grid-template-columns: repeat(4, 1fr); } }
/* Three items (the three ways to deliver a unit): one column until all three fit side by side,
   so the row never breaks into two plus one. */
@media (min-width: 640px) { .steps-row--3 { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 900px) { .steps-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Two ways to start (home and How it works): two columns of equal weight, numbered by CSS, and the
   one line that holds for both under them, set in the display face. */
.ways { display: grid; gap: 36px clamp(28px, 5vw, 72px); }
@media (min-width: 760px) { .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ways > li { padding-top: 22px; border-top: 1px solid var(--line); }
.ways h3 { margin-top: 22px; font-size: clamp(1.35rem, 1.2rem + .5vw, 1.65rem); }
.ways p { margin-top: 12px; color: var(--ink-label); max-width: 54ch; }
.ways-note {
    margin-top: clamp(32px, 4.5vw, 52px); max-width: 46ch;
    font-family: var(--font-display); font-weight: 400; font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); line-height: 1.4; letter-spacing: -.02em;
}
html:lang(zh) .ways-note, html:lang(ja) .ways-note { letter-spacing: 0; }

/* ---------- home: the audience doors ---------- */

/* The three audience pages, each a box with its picture over its words; the whole box is the link.
   Under them, one wide box for work instructions and the other kinds of place. */
.door-list { display: grid; gap: clamp(16px, 2.4vw, 28px); }
@media (min-width: 860px) { .door-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.door-list > li { min-width: 0; }
.door {
    display: flex; flex-direction: column; height: 100%; overflow: hidden;
    background: var(--cell); border: 1px solid var(--line); border-radius: var(--radius-card);
    color: var(--ink); text-decoration: none; transition: background-color .15s ease;
}
.door img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.door-text { display: flex; flex-direction: column; flex: 1; padding: clamp(22px, 2.6vw, 30px); }
.door h3 { font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem); }
.door h3 + p { margin-top: 12px; color: var(--ink-label); }
a.door:hover { background: var(--paper); }
a.door:hover .area-go { gap: 34px; }
.door-more { margin-top: clamp(16px, 2.4vw, 28px); padding: clamp(24px, 3vw, 36px); background: rgba(255, 255, 255, .3); border: 1px solid var(--line); border-radius: var(--radius-card); }
.door-more h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); }
.door-more h3 + p { margin-top: 12px; color: var(--ink-label); }
.door-more .more { margin-top: 28px; }

/* ---------- home: the activity cells ---------- */

/* Six of the activity types (those flagged "home": true in the copy files), in a table of
   hairlines. The lines are a 1px ring around each cell; where two rings meet they overlap into one
   line, and an unfilled cell on the last row draws nothing at all. */
.make-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; padding: 1px; counter-reset: item; }
@media (min-width: 640px) { .make-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .make-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 960px) { .make-grid--library > :last-child:nth-child(3n + 1) { grid-column: 2; } }
.make-cell {
    position: relative; counter-increment: item;
    padding: clamp(26px, 3vw, 38px) clamp(22px, 3vw, 34px) clamp(28px, 3.4vw, 42px);
    background: var(--cell); box-shadow: 0 0 0 1px var(--line);
}
.make-n { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .18em; color: var(--brand-gold-ink-2); }
.make-n::before { content: counter(item, decimal-leading-zero); }
.make-cell h3 { margin-top: 36px; font-size: clamp(1.35rem, 1.2rem + .5vw, 1.65rem); }
/* The library's cells carry the activity's icon where the number would be, larger. The PNG has 10 px
   of transparent room per 128 (5 px at 64), so the negative margin lines the drawing up with the text. */
.make-grid--library .make-cell img { display: block; width: 64px; height: 64px; margin: -5px 0 0 -5px; }
.make-grid--library .make-cell img + h3 { margin-top: 18px; }
.make-cell p { margin-top: 10px; font-size: .95rem; line-height: 1.55; color: var(--ink-label); max-width: 30ch; }
/* Cells that carry a paragraph rather than a line (the nine "more than games" points). */
.make-grid--text .make-cell h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); }
.make-grid--text .make-cell p { max-width: none; }

/* ---------- home: the photograph and the gold panel ---------- */

.lives-photo { grid-column: full-start / full-end; }
.lives-photo img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* A drawing rather than a photograph: shown whole on its own paper colour, never cropped. Not in
   use at the moment (the drawing moved into the Activities hero); kept for the next one. */
.lives-photo--plate { background: #F7F0E6; }
.lives-photo--plate img { object-fit: contain; }
.lives-panel { grid-column: full-start / full-end; display: grid; grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--maxw)) minmax(var(--gutter), 1fr); }
.lives-copy { grid-column: 2; padding-block: clamp(48px, 7vw, 96px); }
.lives-copy h2 + .lead { margin-top: 24px; }
.lives-copy .lead { color: rgba(44, 38, 30, .85); }
@media (min-width: 900px) {
    .lives-photo { grid-column: full-start / mid; }
    .lives-photo img { aspect-ratio: auto; min-height: 540px; }
    .lives-panel { grid-column: mid / full-end; display: block; }
    .lives-copy { max-width: calc(var(--maxw) / 2); padding: clamp(56px, 8vw, 120px) var(--gutter) clamp(56px, 8vw, 120px) clamp(36px, 6vw, 88px); }
}

/* ---------- home: trust ---------- */

.trust-list { border-top: 1px solid var(--line); }
.trust-list li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 8px 12px; padding: 26px 0 28px; border-bottom: 1px solid var(--line); }
.trust-list .num { font-size: 1.3rem; padding-top: 4px; }
.trust-list h3 { font-size: 1.35rem; }
.trust-list p { margin-top: 8px; font-size: .95rem; line-height: 1.55; color: var(--ink-label); max-width: 46ch; }
.trust-note { margin-top: 26px; font-size: .9rem; line-height: 1.55; color: var(--ink-soft); max-width: 52ch; }
.trust-note strong { display: block; margin-bottom: 4px; color: var(--ink); }

/* ---------- inner pages: hero ---------- */

.page-hero { padding-block: clamp(56px, 8vw, 112px) clamp(40px, 6vw, 80px); }
.page-hero .lead { margin-top: 26px; }
/* Pricing and About: heading and the line under it are each written to fall on one line, so the hero needs
   none of the depth of a hero carrying a paragraph. The plans are what the reader came for, so they
   come up to meet them. The lead drops its 60ch measure, which at this length would break one line
   into two, and the hero drops the narrow column, which would do the same to the heading. */
.page-hero--slim { padding-block: clamp(40px, 5vw, 72px) clamp(22px, 2.8vw, 34px); }
.page-hero--slim .lead { max-width: none; margin-top: 16px; }
/* The bottom only, for a hero that already has its height from a picture and is followed by a
   section on the same canvas colour, where the full measure reads as a hole rather than a break. */
.page-hero--tight { padding-bottom: clamp(18px, 2.4vw, 30px); }
.page-hero--tall { min-height: 56vh; display: grid; align-items: center; }

/* ---------- the six steps (how it works) ---------- */

.step-list { display: grid; gap: clamp(20px, 3vw, 32px); }
.step { display: grid; gap: clamp(20px, 3vw, 48px); align-items: center; padding: clamp(22px, 3vw, 40px); border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--cell); }
.step--highlight { background: var(--paper); border-color: var(--paper-border); box-shadow: inset 3px 0 0 var(--brand-gold); }
.step-text h3 { margin-top: 18px; font-size: 1.45rem; }
.step-text h3 + p { margin-top: 12px; color: var(--ink-label); max-width: 64ch; }
.step-note { margin-top: 14px; font-weight: 600; max-width: 64ch; }
@media (min-width: 900px) { .step:has(.screen, .placeholder) { grid-template-columns: 1fr 1fr; } }

.screen { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--surface); }
.screen a { display: block; height: 100%; cursor: zoom-in; }
.screen a:focus-visible { outline-offset: -4px; }
.screen img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
/* Walkthrough video (in the hero of How it works, see .hero-video above). */
.video-note { margin-top: 10px; font-size: .95rem; color: var(--ink-soft); }
.video { display: block; width: 100%; height: auto; margin-top: 24px; aspect-ratio: 16 / 9; border-radius: var(--radius-card); background: var(--brand-night); }
.transcript { margin-top: 18px; }
.transcript summary { display: inline-block; padding: 8px 2px; cursor: pointer; font-weight: 700; color: var(--link); text-decoration: underline; text-underline-offset: .18em; }
.transcript p { margin-top: .8em; color: var(--ink-label); }

/* ---------- activities ---------- */

/* The whole list of activity types uses the home page's hairline cells (.make-grid, above). The
   count will change and nothing here assumes it: an unfilled cell on the last row draws nothing. */

/* "Explanation first, practice second": the info card and the game that follows it, two rows in
   the gold panel, with the activity's icon where the number would be. */
.beat { margin-top: clamp(28px, 4vw, 44px); }
.beat li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 18px; padding: 22px 0; border-top: 1px solid var(--line); }
.beat li:last-child { border-bottom: 1px solid var(--line); }
.beat img { grid-row: span 2; width: 44px; height: 44px; }
/* The activity icons are gold line art (#B38B33), which vanishes on the gold panel: darkened to about --gold-deep. */
.section--gold .beat img { filter: brightness(.52); }
.beat h3 { font-size: 1.25rem; }
.beat p { font-size: .95rem; line-height: 1.55; color: rgba(44, 38, 30, .85); }

/* ---------- lists ---------- */

.ticks { display: grid; gap: 10px; margin-top: 24px; }
.ticks li { position: relative; padding-left: 30px; }
.ticks li::before { content: ""; position: absolute; left: 4px; top: .48em; width: 12px; height: 7px; border-left: 2px solid var(--brand-gold-ink-2); border-bottom: 2px solid var(--brand-gold-ink-2); transform: rotate(-45deg); }
.section--gold .ticks li::before { border-color: var(--gold-deep); }
.ticks--card { margin-top: 0; padding: clamp(22px, 3vw, 34px); background: var(--cell); border: 1px solid var(--paper-border); border-radius: var(--radius-card); font-weight: 600; }

.principle-list { display: grid; gap: clamp(20px, 3vw, 36px) clamp(24px, 4vw, 64px); }
.principle-list li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.principle-list .num { font-size: 1.3rem; padding-top: 4px; }
.principle-list p { margin-top: 6px; color: var(--ink-label); }
@media (min-width: 820px) { .principle-list { grid-template-columns: repeat(2, 1fr); } }

.qa h3 { font-size: 1.2rem; }

/* ---------- audience pages ---------- */

.example-list { display: grid; gap: 16px; }
.example { display: grid; border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; }
.example > div { padding: clamp(18px, 2.4vw, 28px); }
.example .label { margin-bottom: 10px; }
.example-from { background: var(--cell); }
.example-to { background: var(--paper); font-weight: 500; }
@media (min-width: 760px) { .example { grid-template-columns: 2fr 3fr; } }

/* Optional blocks of an audience page (hotels, design proposal of 19 October 2026). The benefits:
   rows divided by hairlines, a drawn symbol, a short claim and the sentence that backs it. On a
   phone the sentence goes under the claim; from 900px the three stand side by side. */
.benefit-list > li {
    display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 8px 20px; align-items: start;
    padding-block: 26px; border-top: 1px solid var(--line);
}
.benefit-list > li:first-child { padding-top: 0; border-top: 0; }
.benefit-list > li:last-child { padding-bottom: 0; }
.benefit-list img { grid-row: span 2; width: 48px; height: 48px; }
.benefit-list h3 { font-size: 1.12rem; line-height: 1.35; }
.benefit-list p { font-size: .97rem; line-height: 1.6; color: var(--ink-label); max-width: 64ch; }
@media (min-width: 900px) {
    .benefit-list > li { grid-template-columns: 48px minmax(0, 17rem) minmax(0, 1fr); column-gap: clamp(24px, 3vw, 44px); }
    .benefit-list img { grid-row: auto; }
}

/* The solutions: a card each, the picture on the left and the words beside it on the paper
   colour, edged in gold. The picture takes the height of the words and is cropped to it; on a
   phone it is a 16:9 band over them. */
.solution-list { display: grid; gap: 16px; }
.solution { display: grid; overflow: hidden; background: var(--paper); border: 1px solid var(--brand-gold); border-radius: var(--radius-card); }
.solution img { width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.solution-text { align-self: center; padding: clamp(22px, 3vw, 36px) clamp(22px, 4.5vw, 56px); }
.solution h3 {
    font-family: var(--font); font-size: .74rem; font-weight: 700; line-height: 1.6; letter-spacing: .14em; text-transform: uppercase;
    color: var(--brand-gold-ink-2);
}
.solution h3 + p { margin-top: 14px; font-size: .95rem; line-height: 1.6; color: var(--ink-label); max-width: 76ch; }
@media (min-width: 760px) {
    .solution { grid-template-columns: minmax(0, 29%) minmax(0, 1fr); }
    .solution img { min-height: 180px; aspect-ratio: auto; }
}

/* The "see more" label at the foot of a box that is a link as a whole (the audience doors on the home
   page): it looks like the "read more" links, but it is part of the box's link, not a link itself. */
.area-go {
    display: inline-flex; align-items: center; gap: 26px; margin-top: auto; padding-top: 26px;
    font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); text-decoration: none; transition: gap .15s ease;
}
.area-go::after { content: ""; width: 11px; height: 11px; flex: none; background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; }
a.area-go:hover { gap: 34px; }

/* The kinds of place in the wide box under the doors: possibilities, never clients. */
.area-more-list { margin-top: 20px; display: grid; gap: 10px 28px; }
@media (min-width: 620px) { .area-more-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .area-more-list { grid-template-columns: repeat(3, 1fr); } }
.area-more-list li { position: relative; padding-left: 20px; color: var(--ink-label); }
.area-more-list li::before {
    content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 1px;
    background: var(--brand-gold-ink-2);
}

/* ---------- example units: the home grid and one per audience page ---------- */

/* Five cards: one row on a wide screen, three plus two on a laptop, two or one below. */
.demo-grid { display: grid; gap: clamp(16px, 2.4vw, 28px); }
@media (min-width: 560px) { .demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 860px) { .demo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1120px) { .demo-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.demo {
    display: flex; flex-direction: column; gap: 10px; padding: 22px;
    background: var(--cell); border: 1px solid var(--line); border-radius: var(--radius-card);
}
.demo h3 { font-size: 1.15rem; }
.demo p:not(.label) { font-size: .92rem; line-height: 1.5; color: var(--ink-label); }
.demo .btn { margin-top: auto; align-self: flex-start; }

/* The QR code is shown only where a phone can scan it: on a computer screen. On a phone or a tablet
   nobody can scan their own screen, so there the button alone opens the unit. */
.demo-qr { display: none; border-radius: 6px; }
@media (min-width: 860px) and (hover: hover) and (pointer: fine) {
    .demo-qr { display: block; }
    .demo .demo-qr { width: 148px; height: 148px; margin-top: auto; }
    .demo .demo-qr + .btn { margin-top: 0; }
}

/* ---------- home: games from the visitor's own page (the public demo, W10) ---------- */

/* The three steps above say what will happen; the form under them sends the address to the app's demo
   page. The field and the button share one row from tablet width up, and stack on a phone. */
.try-form { margin-top: clamp(32px, 4vw, 48px); max-width: 720px; }
.try-form .label { display: block; margin-bottom: 10px; color: var(--ink-label); }
.try-row { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 640px) { .try-row { flex-direction: row; } }
.try-input {
    flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 12px 16px;
    border: 1px solid var(--brand-charcoal); border-radius: var(--radius-ctrl);
    background: #fff; color: var(--ink); font: inherit; font-size: 1rem;
}
.try-input::placeholder { color: var(--ink-soft); opacity: 1; }
.try-row .btn { flex: 0 0 auto; }
.demo-single { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.demo-single .lead { margin-top: 14px; max-width: 62ch; }
.demo-single .lead + p { margin-top: 12px; max-width: 62ch; color: var(--ink-label); }
.demo-single .actions { margin-top: 22px; }
@media (min-width: 860px) { .demo-single { grid-template-columns: minmax(0, 1fr) auto; } }
.demo-single .demo-qr { width: 200px; height: 200px; }

/* ---------- pricing ---------- */

/* Plan cards: a price and four numbers each. Everything else lives in the comparison below, which is
   closed until the reader asks for it. */
.tier-grid { display: grid; gap: clamp(14px, 1.6vw, 20px); align-items: stretch; }
@media (min-width: 640px) { .tier-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .tier-grid { grid-template-columns: repeat(4, 1fr); } }
.tier { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.2vw, 28px); background: var(--cell); border: 1px solid var(--line); border-radius: var(--radius-card); }
.tier--featured { background: var(--paper); border-color: var(--brand-gold); }
.tier h3 { font-size: 1.5rem; }
.tier-for { font-size: .95rem; line-height: 1.45; color: var(--ink-label); }
.tier-price-block { padding-block: 10px 14px; border-bottom: 1px solid var(--line); }
.tier-price { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.8rem, 1rem + 1.1vw, 2.2rem); line-height: 1.1; letter-spacing: -.04em; }
.tier-price span { font-family: var(--font); font-size: .9rem; font-weight: 600; letter-spacing: 0; color: var(--ink-soft); white-space: nowrap; }
.tier-billing { margin-top: 6px; font-size: .9rem; line-height: 1.4; color: var(--ink-label); }
.tier-billing--alt { margin-top: 2px; color: var(--ink-soft); }
.tier .ticks { margin-top: 4px; gap: 8px; font-size: .97rem; line-height: 1.45; font-weight: 600; }
.tier-extras { font-size: .93rem; line-height: 1.45; color: var(--ink-label); }
.tier-extras .label { margin-bottom: 8px; }
.tier-extras ul { display: grid; gap: 5px; }
.tier-extras li { position: relative; padding-left: 16px; }
.tier-extras li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 1px; background: var(--brand-gold-ink-2); }
.tier .btn { margin-top: auto; }
/* Institution: "Request a quote" (the app's quote form, no account needed) and, under it, "Talk to us" as a link. */
.tier-actions { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.tier-actions .btn { margin-top: 0; }
.tier-actions .more-link { align-self: flex-start; }
.tier > :nth-last-child(2) { margin-bottom: 10px; }
/* A plan not on sale yet ("soon" in the copy files): drawn as disabled by colour, not by opacity, so
   every word keeps AA contrast. No card ground and a dashed edge, the text and the ticks in the
   softer ink, "Coming soon" in the small-text gold where the price goes, and a button that is
   really disabled, without its arrow. */
.tier--soon { background: transparent; border-style: dashed; color: var(--ink-soft); }
.tier--soon h3, .tier--soon .tier-for, .tier--soon .tier-extras { color: var(--ink-soft); }
.tier--soon .ticks { font-weight: 400; }
.tier--soon .ticks li::before { border-color: var(--line); }
.tier--soon .tier-extras li::before { background: var(--line); }
.tier-price--soon { font-size: clamp(1.4rem, 1rem + .6vw, 1.65rem); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--brand-gold-ink-2); }
html:lang(zh) .tier-price--soon, html:lang(ja) .tier-price--soon { font-style: normal; }
.tier .btn:disabled { border-color: var(--line); background: transparent; color: var(--ink-soft); cursor: default; }
.tier .btn:disabled::after { display: none; }

/* Screens under 400px (the narrowest folding phones): a German compound such as
   "Besucherattraktionen" is wider than the screen, and a grid item cannot be narrower than its
   longest word, so the card pushed the whole page sideways. Let the track shrink and the words break. */
@media (max-width: 400px) {
    .tier-grid > li, .door, .tier { min-width: 0; }
    .door, .door-more, .tier { hyphens: auto; overflow-wrap: anywhere; }
}
/* Same heights across the four cards, so prices and lists line up in one row. */
@media (min-width: 1120px) { .tier-for { min-height: 4.35em; } .tier-price-block { min-height: 7.6em; } }

.every-plan { margin-top: clamp(28px, 4vw, 44px); padding: clamp(20px, 2.6vw, 28px); background: var(--paper); border: 1px solid var(--paper-border); border-radius: var(--radius-card); }
.every-plan .ticks { margin-top: 12px; }
@media (min-width: 900px) { .every-plan .ticks { grid-template-columns: repeat(3, 1fr); gap: 10px 28px; } }

.compare { margin-top: clamp(24px, 3vw, 36px); }
.compare summary {
    display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 22px; cursor: pointer; list-style: none;
    border: 1px solid var(--brand-charcoal); border-radius: var(--radius-ctrl); font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.compare summary::-webkit-details-marker { display: none; }
.compare summary::after { content: ""; width: 8px; height: 8px; margin-top: -4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.compare[open] summary::after { margin-top: 4px; transform: rotate(-135deg); }
.compare summary:hover { background: rgba(44, 38, 30, .07); }
.compare table { width: 100%; margin-top: 28px; border-collapse: collapse; font-size: .95rem; line-height: 1.45; table-layout: fixed; }
.compare caption { padding-bottom: 10px; text-align: left; font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; letter-spacing: -.02em; }
.compare th, .compare td { padding: 11px 12px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.compare thead th { border-top: 0; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.compare thead th:first-child, .compare tbody th { width: 26%; }
.compare tbody th { font-weight: 600; }
.compare td { color: var(--ink-label); }
.compare td:nth-child(4), .compare thead th:nth-child(4) { background: var(--paper); }

/* Compact screens: no dense five-column table. Each feature becomes a block that lists the plans. */
@media (max-width: 959px) {
    .compare table, .compare tbody, .compare tr, .compare th, .compare td, .compare caption { display: block; width: auto; }
    .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .compare tbody th { width: auto; padding: 16px 0 4px; border-top: 1px solid var(--line); }
    .compare td { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; border-top: 0; text-align: right; }
    .compare td:nth-child(4) { background: none; }
    .compare td::before { content: attr(data-plan); flex: none; font-weight: 600; color: var(--ink-soft); text-align: left; }
    .compare tr { padding-bottom: 10px; }
}

/* ---------- prose (about, legal) ---------- */

.prose h2 { margin-top: 1.6em; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: .9em; color: var(--ink-label); }
.company-card { display: grid; gap: 12px; align-content: start; }
.company-card img { width: 48px; }
/* About: the team drawn in one line, as wide as the text. The file is the line alone on transparency,
   cropped so the line it stands on is its bottom edge, so it needs no box and no colour of its own.
   The text and the company card start together under it (split--top). On a phone all seven figures
   would be too small to read: the middle of the drawing is shown instead, cut to 5:2. */
.team-line { display: block; width: 100%; height: auto; margin-bottom: clamp(28px, 4vw, 48px); }
@media (max-width: 599px) { .team-line { aspect-ratio: 5 / 2; object-fit: cover; object-position: 50% 100%; } }
.split--top { align-items: start; }
.split--top .prose > p:first-child { margin-top: 0; }

/* ---------- placeholders: visible only in draft builds, except legal stubs ---------- */

.placeholder {
    margin-block: 20px; padding: 16px 18px; border: 2px dashed var(--danger); border-radius: var(--radius-card);
    background: repeating-linear-gradient(135deg, #fff, #fff 12px, #FBF3F1 12px, #FBF3F1 24px);
    color: var(--ink); font-size: .95rem;
}
.placeholder strong { color: var(--danger); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.placeholder code { font-size: .88rem; }
.placeholder--screen { display: grid; place-content: center; gap: 6px; aspect-ratio: 16 / 10; margin-block: 0; text-align: center; }
.placeholder--stub { border-color: var(--brand-gold-ink-2); background: var(--paper); margin-top: 0; margin-bottom: 32px; }
.placeholder--stub strong { color: var(--brand-gold-ink-2); }
.flag { display: inline-block; margin-left: 6px; padding: 1px 8px; border: 1px dashed currentColor; border-radius: var(--radius-pill); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- closing band and footer ---------- */

.cta-band .head { margin-bottom: 0; }
.cta-band .statement { max-width: 30ch; }
.cta-band .actions { margin-top: 32px; }

.site-footer { background: var(--brand-night); color: var(--brand-cream); border-top: 1px solid rgba(233, 224, 203, .16); font-size: .95rem; }
.site-footer a { color: var(--brand-cream); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: .2em; }
/* minmax(0, 1fr), not 1fr: a plain 1fr track cannot shrink below its longest word, and German has
   words like "Datenschutzerklärung" that are wider than half a 320px screen. That pushed the whole
   page wider than the window. One column below 400px, so those words are not broken mid-word. */
.footer-grid { display: grid; gap: 40px 28px; padding-block: clamp(56px, 7vw, 96px) 48px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 399px) { .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; } }
.footer-brand { grid-column: 1 / -1; }
.footer-brand img { width: 150px; }
.footer-brand p { margin-top: 18px; max-width: 34ch; color: rgba(233, 224, 203, .7); }
.site-footer h2 { margin-bottom: 16px; font-family: var(--font); font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--brand-gold-soft); }
/* overflow-wrap: anywhere, not break-word: only "anywhere" shrinks the minimum width, which is what
   an inline-block inside a narrow grid track is sized from. Without it "Nutzungsbedingungen" keeps
   the link 165px wide in a 125px column and pushes the page sideways. hyphens does the breaking
   properly where the browser has the language; anywhere is the guarantee. */
.site-footer li a { display: inline-block; padding-block: 5px; overflow-wrap: anywhere; hyphens: auto; color: rgba(233, 224, 203, .85); }
.footer-base {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 28px;
    padding-block: 22px 30px; border-top: 1px solid var(--line-on-dark); font-size: .82rem; color: rgba(233, 224, 203, .62);
}
.footer-base a { color: rgba(233, 224, 203, .85); }
.footer-top { margin-left: auto; white-space: nowrap; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
/* 1150, not 900: five columns only leave about 125px each at 900px, which is narrower than
   "Datenschutzerklärung" and "Nutzungsbedingungen", so German broke them mid-word. At 1150 a column
   is wide enough for them to stand whole. Between 400 and 1150 the footer stays two columns. */
@media (min-width: 1150px) {
    .footer-grid { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); }
    .footer-brand { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
    .site-header, .site-footer, .cta-band, .draft-bar, .skip-link { display: none; }
    html { scroll-behavior: auto; }
    body { background: #fff; color: #000; }
    main { --accent: #000; --link: #000; --cell: #fff; --line: #999; }
    main, main *, main *::before, main *::after { color: #000 !important; text-shadow: none !important; box-shadow: none !important; }
    :is(.hero, .hero--gold, .section--surface, .section--paper, .section--sand, .section--dark, .section--gold, .beats-band, .lives-panel) { background: #fff !important; }
    :is(.card, .make-cell, .door, .door-more, .step, .tier, .every-plan, .ticks--card, .example-from, .example-to, .solution) { background: #fff !important; }
    a { text-decoration: underline; }
}