/* Split Seconds: shared tokens, header, logo and buttons for the landing page, print maker and thanks page. */
/* Fonts are served from this site, not Google Fonts, so visitors' IP addresses don't go to Google.
   Same files Google serves (SIL Open Font License), one per script; browsers only fetch the ones a page uses.
   Manrope is a variable font: one file covers weights 500 to 800. */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-cyrillic-ext.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-vietnamese.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(/fonts/manrope-cyrillic-ext.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(/fonts/manrope-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(/fonts/manrope-greek.woff2) format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(/fonts/manrope-vietnamese.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(/fonts/manrope-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(/fonts/manrope-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --bg: #f6f5f1;
  --panel: #ffffff;
  --ink: #141414;
  --muted: #55534e;
  --line: #e3e0d8;
  --field-line: #cfcbc1;
  --well: #eceae4;
  --accent: #2338c7;
  --accent-hover: #18278f;
  --accent-ink: #f6f5f1;
  --accent-soft: #e3e7f9;
  --accent-pale: #c9d1f3;
  --accent-tint: #9daef0;
  --dark: #141414;
  --dark-muted: #c8c6c0;
  --paper: #fbfaf7;
  --frame: #1c1c1c;
  /* The three frame finishes, as the maker draws them. Product colours, not brand colours. */
  --frame-white: #efede7;
  --frame-wood: #cba070;
  --good: #1f7a4d;
  --warn: #8a5800;
  --bad: #b3261e;
  --font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: clamp(16px, 3vw, 32px);
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent-pale); color: var(--ink); }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Logo: three film frames with a ball mid-bounce. Sized by font-size; positions are in em. */
.mark { display: flex; gap: 0.1111em; }
.mark i { position: relative; width: 0.8333em; height: 0.6111em; border: 0.065em solid currentColor; border-radius: 0.0833em; }
.mark b { position: absolute; width: 0.1389em; height: 0.1389em; border-radius: 50%; background: currentColor; }
.mark b.squash { width: 0.1944em; height: 0.1111em; }
.mark.thin i { border-width: 0.0417em; }

.offer-bar { margin: 0; padding: 9px var(--gutter); background: var(--accent); color: var(--accent-ink); font-size: 15px; font-weight: 600; line-height: 1.35; text-align: center; }
.site-head { max-width: 1240px; margin: 0 auto; padding: 16px var(--gutter); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.logo { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--accent); text-decoration: none; }
.logo .mark { font-size: 26px; }
.logo-word { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.nav-link { color: var(--ink); font-weight: 600; font-size: 15px; padding: 11px 0; }
.nav-link:hover { color: var(--accent); }
.head-end { display: flex; align-items: center; gap: 8px 24px; }

/* Language menu at the right of the header: the current language's code, opening a list of all four
   (each in its own language). The footer has the same links in full. */
.lang-menu { position: relative; }
.lang-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px 0 11px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--field-line); color: var(--ink); font-size: 14px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; user-select: none; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary:hover, .lang-menu[open] > summary { color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.lang-menu .chev { transition: transform .15s; }
.lang-menu[open] .chev { transform: rotate(180deg); }
.lang-menu .menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 176px; margin: 0; padding: 6px; list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 12px 32px rgba(20, 20, 20, 0.16); }
.lang-menu .menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; }
.lang-menu .menu a:hover { background: var(--bg); color: var(--accent); }
.lang-menu .menu a[aria-current] { font-weight: 800; }
.lang-menu .menu a[aria-current]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
@media (prefers-reduced-motion: reduce) { .lang-menu .chev { transition: none; } }
/* Phones: logo and one action on a single row. */
@media (max-width: 420px) {
  .site-head { flex-wrap: nowrap; gap: 12px; }
  .logo { gap: 9px; }
  .logo .mark { font-size: 22px; }
  .logo-word { font-size: 18px; }
  .head-end { gap: 8px 14px; }
  .lang-menu .globe { display: none; }
  .lang-menu > summary { padding: 0 10px 0 12px; }
}

/* Pill buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 30px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 800; font-size: 17px; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn.small { min-height: 44px; padding: 0 20px; font-size: 15px; font-weight: 700; }
.btn.light { background: var(--bg); color: var(--accent); }
.btn.light:hover { background: #fff; color: var(--accent-hover); }
.btn.light:focus-visible { outline-color: var(--bg); }
.btn.outline { background: none; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--field-line); }
.btn.outline:hover { color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }

/* The maker's example print, as it lays out: a 30 × 40 sheet with ten stills of the clip in two columns, on the
   landing page and the maker's first screen. Sizes are shares of the sheet's width (cqw), so it keeps its proportions:
   4.6 cm at the sides and 0.24 cm between stills, as computeLayout in make.html gives for ten stills at Medium.
   All ten stills are one image (example/hero-frames.jpg, two across and five down). */
.sample-print { margin: 0; aspect-ratio: 3 / 4; background: var(--paper); border: 14px solid var(--frame); box-shadow: 0 3px 6px rgba(8, 14, 60, 0.3), 0 40px 80px rgba(8, 14, 60, 0.5); container-type: inline-size; display: flex; flex-direction: column; justify-content: center; }
.sample-print .sheet { padding: 35px 54px; padding: 10cqw 15.3cqw; display: flex; flex-direction: column; gap: 8px; gap: 2.4cqw; }
.sample-print .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; gap: 0.8cqw; }
.sample-print .cell { aspect-ratio: 16 / 9; background: #c5d3ea url(/example/hero-frames.jpg) no-repeat; background-size: 200% 500%; }
.sample-print figcaption { display: flex; flex-direction: column; gap: 2px; line-height: 1.15; }
.sample-print figcaption b { font-size: 15px; font-size: 4.2cqw; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.sample-print figcaption span { font-size: 10px; font-size: 2.7cqw; color: #74777d; }

/* Swatches of the frame finishes. */
.swatch { flex: none; width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.28); }
.swatch.black { background: var(--frame); }
.swatch.white { background: var(--frame-white); }
.swatch.wood { background: repeating-linear-gradient(100deg, rgba(90, 55, 20, 0.16) 0 1px, transparent 1px 4px), var(--frame-wood); }
.swatch.none { background: linear-gradient(to top right, transparent calc(50% - 1px), currentColor calc(50% - 1px), currentColor calc(50% + 1px), transparent calc(50% + 1px)); }

/* Footer: landing page, privacy and terms. */
.site-foot { max-width: 1200px; margin: 0 auto; padding: 28px clamp(20px, 4vw, 56px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; font-size: 14px; color: var(--muted); }
.site-foot .word { font-size: 17px; font-weight: 800; letter-spacing: -0.03em; color: var(--accent); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.site-foot nav a { color: var(--muted); padding: 12px 0; }
.site-foot nav a[aria-current] { color: var(--ink); text-decoration: none; }
.site-foot .langs a[aria-current] { font-weight: 700; }

/* Text pages: privacy and terms. One readable column; the short version first. */
/* Ligatures off: Manrope turns (c) into ©, which breaks citations like Article 6(1)(c). */
.doc { max-width: 720px; margin: 0 auto; padding: clamp(20px, 5vw, 48px) var(--gutter) 64px; font-size: 17px; line-height: 1.6; font-variant-ligatures: no-common-ligatures; }
.doc h1 { margin: 0; font-size: clamp(42px, 7vw, 68px); line-height: 1; letter-spacing: -0.045em; font-weight: 800; }
.doc .updated { margin: 14px 0 0; color: var(--muted); font-size: 15px; }
.doc h2 { margin: 52px 0 0; font-size: clamp(22px, 3vw, 26px); line-height: 1.2; letter-spacing: -0.025em; font-weight: 800; scroll-margin-top: 20px; }
.doc h2 .n { display: inline-block; min-width: 1.6em; color: var(--accent); font-family: var(--font-mono); font-size: 0.8em; font-weight: 500; letter-spacing: 0; }
.doc p, .doc ul, .doc ol { margin: 14px 0 0; }
.doc ul { padding-left: 1.25em; }
.doc li + li { margin-top: 8px; }
.doc li::marker { color: var(--accent); }
.doc .basis { color: var(--muted); font-size: 15px; }
.doc .short { margin-top: 32px; padding: 24px clamp(20px, 4vw, 28px) 26px; border-radius: 20px; background: var(--accent); color: var(--accent-ink); }
.doc .short h2 { margin: 0; font-size: 19px; letter-spacing: -0.01em; }
.doc .short ul { margin-top: 12px; }
.doc .short li::marker { color: var(--accent-tint); }
.doc .contents { margin-top: 28px; padding: 0; list-style: none; columns: 2 220px; column-gap: 32px; font-size: 15px; }
.doc .contents li { margin: 0; padding: 4px 0; break-inside: avoid; }
.doc .contents a { color: var(--ink); text-decoration: none; }
.doc .contents a:hover { color: var(--accent); text-decoration: underline; }
.doc .contents .n { display: inline-block; min-width: 1.8em; color: var(--accent); font-family: var(--font-mono); font-size: 13px; }
.doc address { font-style: normal; }