/* MemoryProof website — one stylesheet for every page.
   The idea: "the record". The page looks like a personal record kept with an instrument: a measured line, a band,
   tick marks, large plain numbers, hairlines instead of boxes. Navy carries everything; the logo's gold gradient is
   on the button, the logo mark, the score line of the charts and the one hairline around the membership — nowhere
   else. Words are set in the display typeface, data in the system font with tabular figures.
   Two designed layouts: phone (up to 767 px) and desktop (from 1024 px); tablets take the desktop grids with the
   phone's type sizes. No inline styles anywhere (the Content-Security-Policy forbids them), nothing from other sites. */

/* The headline typeface: our own cut of Newsreader (fonts/README.txt), served from this address. To set the headlines
   in the system font instead, change the three --display values in :root to the ones in the comment there. */
@font-face {
  font-family: "MP Display"; src: url(/fonts/mp-display.woff2) format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
}
/* what stands in until the typeface has arrived: Georgia, set to the same width and height, so nothing jumps */
@font-face {
  font-family: "MP Display Fallback"; src: local("Georgia");
  size-adjust: 103%; ascent-override: 71%; descent-override: 26%; line-gap-override: 0%;
}

:root {
  --bg: #12242e;
  --deep: #0e1c24;         /* the three full-width bands */
  --lift: #162b36;         /* the few real panels */
  --lift-2: #1c3441;
  --input: #0f1f28;
  --line: rgba(241, 225, 191, .10);
  --hair: rgba(241, 225, 191, .18);
  --ink-head: #ffffff;
  --ink: #f2ede4;          /* body: a warm off-white */
  --ink-soft: #c9d5db;     /* the first line of the headline */
  --ink-2: #afc1ca;        /* secondary: 7:1 on the panels */
  --ink-3: #96abb6;        /* tertiary: 5.4:1 on the panels */
  --field-line: #6a8593;   /* a field's outline: 3.3:1 (WCAG 1.4.11) */
  --gold-a: #f1e1bf;
  --gold-b: #b6a172;
  --gold: linear-gradient(180deg, var(--gold-a) 0%, var(--gold-b) 100%);
  --gold-mid: #d2bf97;
  --steel: #a6c3d3;        /* labels, tag marks, focus rings */
  --link: #a8cde1;
  --danger: #e69994;
  --sleep: #9fd98a;        /* the app's own sleep line */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "MP Display", "MP Display Fallback", Georgia, "Times New Roman", serif;
  --display-weight: 500;
  --display-track: -.012em;
  /* the system font instead:  --font-display: var(--font);  --display-weight: 650;  --display-track: -.028em; */
  --wrap: 1200px;
  --gutter: 16px;
  --head-h: 56px;
  --ease: cubic-bezier(.2, .7, .2, 1);       /* entrances: a fast start that settles */
  --ease-sheet: cubic-bezier(.3, .9, .3, 1);
}
@media (min-width: 768px) { :root { --gutter: 32px; --head-h: 64px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 16px); -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  margin: 0; min-width: 320px; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 1.0625rem; line-height: 1.55; font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { color: var(--ink-head); margin: 0; }
h1, h2, .display {
  font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-track);
  font-variant-numeric: normal; text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 9.6vw, 2.75rem); line-height: 1.05; }
h2 { font-size: clamp(1.875rem, 7.6vw, 2.125rem); line-height: 1.1; }
h3 { font-size: 1.25rem; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
h4 { font-size: 1.25rem; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
b, strong { color: var(--ink-head); font-weight: 650; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: #cfe3ee; }
:focus-visible { outline: 3px solid var(--steel); outline-offset: 3px; border-radius: 6px; }
main:focus { outline: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 18px; border-radius: 12px;
  background: var(--ink-head); color: var(--bg); font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }
.wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--ink-3); }
.center { text-align: center; }
/* German: only words of 10 letters or more are broken, with at least 4 letters on each side. Where a browser can't
   keep to that, only the headlines are broken. */
:lang(de) h1, :lang(de) h2, :lang(de) .step-t, :lang(de) .lines li, :lang(de) .check > span {
  hyphens: auto; hyphenate-limit-chars: 10 4 4; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4;
}
@supports not (hyphenate-limit-chars: 10 4 4) { :lang(de) .step-t, :lang(de) .lines li, :lang(de) .check > span { hyphens: manual; } }
/* a text that a phone shows shorter: class="more" is what only a computer shows, class="less" the phone's shorter
   wording of the same text (the phone's rules, near the end of this file, swap the two). In the pages a text node is
   never split for this: a split moves a computer's letters by a fraction of a pixel. */
.less { display: none; }

/* a time marker above a headline ("After a few weeks"): the display typeface, the gold's flat midpoint, sentence case */
.marker, .eyebrow { margin: 0 0 10px; font-family: var(--font-display); font-weight: 500; font-size: 1rem; line-height: 1.3; color: var(--gold-mid); font-variant-numeric: normal; }
.lead { font-size: 1.125rem; line-height: 1.5; color: var(--ink); }
/* "Example data": on every app picture and every graphic that mirrors the app */
.cap { margin: 14px 0 0; color: var(--ink-2); font-size: .875rem; line-height: 1.45; text-wrap: pretty; }
.ex { display: inline-block; margin-right: 6px; padding: 1px 8px 2px; border: 1px solid rgba(166, 195, 211, .55); border-radius: 6px; color: var(--steel); font-size: .78rem; font-weight: 650; white-space: nowrap; }
/* part of the membership */
.mem { display: inline-block; margin-left: 6px; vertical-align: .12em; color: var(--ink-2); font-size: .78rem; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.mem::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--steel); vertical-align: .08em; }
/* the app's labels */
.pill { display: inline-block; padding: 3px 10px; border-radius: 10px; background: var(--steel); color: #10212a; font-size: .78rem; font-weight: 700; line-height: 1.35; white-space: nowrap; }
.pill-none { background: #213a47; color: var(--ink-soft); }
.pill-wait { background: none; border: 1.5px dashed var(--ink-3); color: var(--ink-2); padding: 2px 9px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px;
  border-radius: 14px; border: 1px solid var(--hair); background: var(--lift-2); color: var(--ink-head);
  font: inherit; font-weight: 650; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
  transition: filter .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:hover { border-color: var(--steel); color: var(--ink-head); }
.btn.primary { background: var(--gold); color: #12242e; border: 0; box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 14px 30px -18px rgba(241, 225, 191, .6); }
.btn.primary:hover { filter: brightness(1.06); color: #12242e; }
.btn.primary:active { filter: brightness(.97); transform: translateY(1px); }
.btn:disabled { cursor: progress; filter: saturate(.6) brightness(.9); }
.btn-lg { min-height: 56px; padding: 14px 30px; font-size: 1.0625rem; border-radius: 16px; }
.btn-sm { min-height: 40px; padding: 8px 16px; font-size: .9375rem; border-radius: 12px; }
.btn.block { display: flex; width: 100%; }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50; background: rgba(18, 36, 46, 0); border-bottom: 1px solid transparent;
  transition: background-color .2s ease, border-color .2s ease, transform .25s ease;
}
.site-head.scrolled, .site-head.sub-head, .site-head.menu-open { background: var(--bg); border-bottom-color: var(--line); }
.site-head.away { transform: translateY(-100%); }           /* phones: slides away on the way down, returns on the way up */
.head-row { display: flex; align-items: center; gap: 8px; min-height: var(--head-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; flex: none; color: var(--ink-head); text-decoration: none; }
.brand-mark { width: 28px; height: 28px; flex: none; }
.brand-word {
  display: inline-block; width: 128px; height: 22px; flex: none; background: currentColor;
  -webkit-mask: url(/img/wordmark.svg) left center / contain no-repeat; mask: url(/img/wordmark.svg) left center / contain no-repeat;
}
.brand-tag { display: none; margin-left: 6px; padding-left: 14px; border-left: 1px solid var(--hair); color: var(--ink-3); font-size: .875rem; line-height: 1.2; white-space: nowrap; }
.head-nav { display: none; align-items: center; gap: 2px; margin: 0 auto; }
.head-nav a, .nav-login {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: 10px;
  color: var(--ink-2); font-size: .9375rem; font-weight: 550; text-decoration: none; white-space: nowrap;
}
.head-nav a:hover, .nav-login:hover { color: var(--ink-head); }
.nav-login { display: none; }
.head-cta { display: none; white-space: nowrap; }
.lang { display: flex; align-items: center; flex: none; margin-left: auto; }
.lang a, .lang-now {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 44px;
  padding: 0 7px; font-size: .875rem; font-weight: 650; letter-spacing: .04em; line-height: 1; text-decoration: none;
}
.lang a { color: var(--ink-2); border-radius: 10px; }
.lang a:hover { color: var(--ink-head); }
.lang-now { color: var(--ink-head); }
.lang > * + *::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 14px; margin-top: -7px; background: var(--field-line); }
/* The menu of the home pages wherever the bar has no room for the four links: the browser's own open-and-close
   element, so it works without JavaScript; js/site.js only closes it again after a choice. */
.menu { position: relative; flex: none; }
.menu summary {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 4px 0 12px; color: var(--ink-head);
  font-size: .9375rem; font-weight: 650; white-space: nowrap; list-style: none; cursor: pointer; -webkit-user-select: none; user-select: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; width: 18px; height: 8px; border-top: 2px solid var(--ink-head); border-bottom: 2px solid var(--ink-head); transition: height .2s ease; }
.menu[open] summary::after { height: 2px; border-bottom-width: 0; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; display: grid; width: min(280px, calc(100vw - 2 * var(--gutter)));
  padding: 8px; border-radius: 16px; border: 1px solid var(--hair); background: var(--lift-2); box-shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 30px 60px -22px rgba(0, 0, 0, .9);
}
.menu-panel > a { display: flex; align-items: center; min-height: 48px; padding: 8px 14px; border-radius: 10px; color: var(--ink-head); font-weight: 600; text-decoration: none; }
.menu-panel > a:hover { background: rgba(241, 225, 191, .06); }
.menu-panel > .menu-login { margin-top: 6px; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; color: var(--ink-2); }
.sub-head .head-cta { display: inline-flex; margin-left: 4px; }
@media (max-width: 359px) { .home-head .brand-word { display: none; } }
@media (max-width: 519px) { .sub-head .brand-word { display: none; } }
@media (min-width: 768px) {
  .head-row { gap: 12px; }
  .head-cta, .nav-login { display: inline-flex; }
  .lang { margin-left: auto; }
  .home-head .menu { order: 9; }
  .menu-panel > .menu-login { display: none; }
  .site-head.away { transform: none; }
}
@media (min-width: 1100px) {
  .head-nav { display: flex; }
  .home-head .lang { margin-left: 0; }
  .menu { display: none; }
}
@media (min-width: 1280px) { .brand-tag { display: block; } .home-head .brand-tag:lang(de) { display: none; } }
@media (min-width: 1560px) { .home-head .brand-tag:lang(de) { display: block; } }
@media (min-width: 1100px) and (max-width: 1239px) { .head-nav a.nav-dl { display: none; } }

/* phones: the button in a bar at the bottom of the screen, from the moment the hero's own button has scrolled away */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--deep); border-top: 1px solid var(--line); transition: transform .25s ease, opacity .25s ease;
}
.bar-btn { display: flex; width: 100%; min-height: 52px; font-size: 1.0625rem; border-radius: 15px; }
.js .bar:not(.show) { transform: translateY(110%); opacity: 0; pointer-events: none; }
@media (max-width: 767px) { body.home { padding-bottom: 88px; } }
@media (min-width: 768px) { .bar { display: none; } }
/* Sign-up closed (config.js SIGNUP_OPEN false; js/site.js and the sync tool put "signup-closed" on the page): every
   "Start your free month" button is grey and can't be pressed, the phone's button bar is gone, and "Sign-up opens
   soon." stands under the big buttons. */
.soon { display: none; }
.signup-closed a[data-sheet], .signup-closed a.head-cta { opacity: .42; filter: grayscale(1); box-shadow: none; pointer-events: none; cursor: default; }
.signup-closed .soon { display: block; margin: 12px 0 0; color: var(--ink-2); font-size: .9375rem; }
.signup-closed .bar { display: none; }
@media (max-width: 767px) { .signup-closed body.home { padding-bottom: 0; } }   /* no bar: no room kept for it */

/* ---------- pictures of the app ---------- */
/* one phone frame: a dark metal edge, a lighter rim at the top left, always upright */
.phone {
  position: relative; padding: 10px; border-radius: 44px; background: linear-gradient(150deg, #33505f 0%, #1a303b 30%, #0b171d 100%);
  box-shadow: inset 0 0 0 1px rgba(241, 225, 191, .14), 0 2px 3px rgba(0, 0, 0, .5), 0 50px 90px -40px rgba(0, 0, 0, .85);
}
.phone img { width: 100%; height: auto; border-radius: 34px; background: #172c37; }
.phone.cut { border-radius: 44px 44px 0 0; padding-bottom: 0; }
.phone.cut img { border-radius: 34px 34px 0 0; }
.snip { border-radius: 18px; overflow: hidden; border: 1px solid var(--hair); background: #172c37; box-shadow: 0 2px 3px rgba(0, 0, 0, .4), 0 40px 70px -40px rgba(0, 0, 0, .85); }
.snip img { width: 100%; height: auto; }
/* a part of a screen, without a frame: only its rounded corners */
.screen { position: relative; border-radius: 22px; overflow: hidden; background: #132630; box-shadow: 0 0 0 1px var(--line); }
.screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* pictures that take turns: the first shows; js/motion.js gives the turn to the next */
.fade-set { display: grid; }
.fade-set > * { grid-area: 1 / 1; }
.js .fade-set > * { opacity: 0; transition: opacity .3s ease; }
.js .fade-set > .on { opacity: 1; }
html:not(.js) .fade-set > * + * { display: none; }

/* ---------- charts drawn into the page (tools/make-graphics.mjs) ---------- */
.chart { position: relative; }
.chart-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 14px; }
.chart-title { margin: 0 0 2px; color: var(--ink-2); font-size: .875rem; font-weight: 600; }
.chart-status { margin: 0; color: var(--ink-head); font-size: 1rem; font-weight: 650; line-height: 1.3; }
.plot { position: relative; padding: 0 0 24px 34px; }
.plot-box { position: relative; height: 220px; border-radius: 10px; background: rgba(241, 225, 191, .014); box-shadow: 0 0 0 1px rgba(241, 225, 191, .06); }
/* the three numbers of the value axis sit at the app's own heights: the highest and lowest value have 16% of air */
.plot-y { position: absolute; left: 0; top: 0; width: 26px; height: 220px; color: var(--ink-3); font-size: .75rem; line-height: 1; text-align: right; }
.plot-y span { position: absolute; right: 0; transform: translateY(-50%); }
.plot-y span:nth-child(1) { top: 12.12%; }
.plot-y span:nth-child(2) { top: 50%; }
.plot-y span:nth-child(3) { top: 87.88%; }
.plot-x { position: absolute; left: 34px; right: 0; bottom: 0; display: flex; justify-content: space-between; color: var(--ink-3); font-size: .75rem; line-height: 1; }
.lay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lay path, .tags-svg path, .scale-svg path { fill: none; vector-effect: non-scaling-stroke; }
.p-grid { stroke: rgba(241, 225, 191, .06); stroke-width: 1; }
.p-band { fill: var(--steel); fill-opacity: .13; }
.p-line { stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.p-dots { stroke-width: 4.5; stroke-linecap: round; }
/* the long-term line lies over the score line: long white dashes on a navy casing, thicker than every other line of
   the chart, so it can't be taken for a grid line */
.p-lt { stroke: #fff; stroke-width: 3; stroke-dasharray: 13 7; }
.p-lt-case { stroke: var(--lift); stroke-width: 8; }
.chart-sleep .p-lt-case { stroke: var(--deep); }
.chart-stage .p-line { stroke-width: 1.5; }              /* 26 weeks: a thin line and no dots, or the days merge */
.chart-months .p-line { stroke-width: 1; stroke-opacity: .5; }   /* … or one small dot per day on a faint line */
.chart-months .p-dots { stroke-width: 3; }
.p-halo { stroke: var(--gold-mid); stroke-opacity: .2; stroke-width: 17; stroke-linecap: round; }
.p-ring { stroke: var(--bg); stroke-width: 12; stroke-linecap: round; }
.p-last { stroke: var(--gold-a); stroke-width: 8; stroke-linecap: round; }
/* a layer that is drawn from left to right when its chart comes into view (motion, at the end of this file): a plain
   box, a little larger than the plot, so a dot on the plot's edge is whole. Nothing in it moves. */
.draw { position: absolute; inset: -8px; }
.draw > .lay { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
/* the sleep chart: the mornings after the four shortest nights — a faint column, and a ring around the day's score */
.p-col { fill: var(--steel); fill-opacity: .11; }
.p-mark { stroke: var(--steel); stroke-opacity: .5; stroke-width: 18; stroke-linecap: round; }
.p-mark-dot { stroke: #fff; stroke-width: 7; stroke-linecap: round; }
/* the tagged days: one mark per day under the axis */
.plot-tags { position: relative; height: 14px; margin-top: 2px; }
.tags-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.p-tag { stroke: var(--steel); stroke-width: 3.2; stroke-linecap: round; }
.tag-tip {
  position: absolute; bottom: calc(100% + 8px); z-index: 3; padding: 7px 10px; border-radius: 9px; background: var(--lift-2); border: 1px solid var(--hair);
  color: var(--ink-head); font-size: .8125rem; line-height: 1.35; white-space: nowrap; pointer-events: none; transform: translateX(-50%);
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .8); transition: opacity .15s ease;
}
.tag-tip b { display: block; color: var(--ink-2); font-weight: 600; font-size: .75rem; }
.tag-tip[hidden] { display: block !important; opacity: 0; }
/* what the marks of a chart are */
.chart-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0 34px; color: var(--ink); font-size: .875rem; line-height: 1.3; }
.chart-key li { display: inline-flex; align-items: center; gap: 8px; }
.chart-key li::before { content: ""; flex: none; }
.k-band::before { width: 14px; height: 10px; border-radius: 2px; background: var(--steel); opacity: .38; }
.k-lt::before { width: 26px; height: 0; border-top: 3px dashed #fff; }
.k-short::before { width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(166, 195, 211, .5); margin: 0 4px; }
.k-tag::before { width: 6px; height: 6px; border-radius: 50%; background: var(--steel); }
.k-line::before { width: 18px; height: 2px; border-radius: 2px; background: var(--gold); }
.k-sleep::before { width: 18px; height: 2px; border-radius: 2px; background: var(--sleep); }

/* ---------- 1 · hero: the design of the last call — the mark, the headline, one line, the button, one small line,
   centred, with the Speed test's line running faint behind them (the line itself: "the last call", below). On a
   computer its height follows the screen's, so the top of the band under it is on the first screen. ---------- */
.hero { position: relative; overflow: hidden; padding: 72px 0 32px; background: var(--deep); border-bottom: 1px solid var(--line); text-align: center; }
.hero-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.hero-in > img { width: 48px; height: 48px; margin-bottom: 16px; }
.h1-a { color: var(--ink-soft); display: block; }
.h1-b { display: block; }
.hero .lead { margin: 14px 0 22px; color: var(--ink-soft); font-size: 1.0625rem; }
.hero-small { margin: 14px 0 0; max-width: 46em; color: var(--ink-2); font-size: .875rem; text-wrap: balance; }
@media (min-width: 768px) {
  .hero { padding: 64px 0 52px; }
  .hero .lead { font-size: 1.125rem; }
  .hero .final-line { opacity: .14; }                      /* fainter than the last call's: here it runs behind the words */
}
@media (min-width: 1024px) {
  h1 { font-size: clamp(2.75rem, 3.4vw, 3.0625rem); line-height: 1.04; }
  h2 { font-size: clamp(2.25rem, 3.2vw, 3rem); line-height: 1.08; }
  h3 { font-size: 1.375rem; }
  body { font-size: 1.125rem; }
  .lead { font-size: 1.25rem; }
  .marker { font-size: 1.125rem; }
  .cap { font-size: .9375rem; }
  .hero { padding: clamp(32px, 9vh, 96px) 0 clamp(32px, 8.4vh, 88px); }
  .hero-in > img { width: 56px; height: 56px; margin-bottom: clamp(12px, 2.4vh, 22px); }
  .hero h1 { font-size: clamp(2.5rem, min(4.6vw, 7.4vh), 4rem); line-height: 1.03; }
  .hero h1:lang(de) { font-size: clamp(2.375rem, min(4.1vw, 7vh), 3.625rem); }   /* the German sentences are longer: each stays on its line */
  .hero .lead { margin: clamp(12px, 2vh, 18px) 0 clamp(16px, 2.9vh, 26px); font-size: 1.25rem; }
  .hero-small { margin-top: clamp(12px, 2vh, 18px); font-size: .9375rem; }
}

/* ---------- 2 · the app, directly under the hero: the Speed test's chart, "Your results" in the phone and two rows of
   Tags compared, under the one sentence that says what they show ---------- */
.show { position: relative; padding: 26px 0 0; }
.show-line {
  margin: 0 0 18px; max-width: 25em; color: var(--ink-head); font-family: var(--font-display); font-weight: var(--display-weight);
  letter-spacing: var(--display-track); font-size: 1.375rem; line-height: 1.22; font-variant-numeric: normal; text-wrap: balance;
}
.stage { position: relative; }
.stage-chart {
  position: relative; padding: 14px 12px 12px 8px; border-radius: 20px; border: 1px solid var(--line);
  background-color: var(--lift);
  background-image: linear-gradient(rgba(241, 225, 191, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(241, 225, 191, .04) 1px, transparent 1px);
  background-size: 48px 48px; background-position: -1px -1px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, .35), 0 50px 90px -50px rgba(0, 0, 0, .9);
}
.stage-chart .chart-head { margin-left: 4px; }
.chart-stage .plot-box, .chart-stage .plot-y { height: 164px; }
/* the app's own row of Tags compared: a tag, the test, the amount with its percent, the label */
.tagcard { display: grid; }
.tc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; align-content: start; gap: 2px 12px; margin: 0; padding: 12px 0; }
.tc-row + .tc-row { border-top: 1px solid var(--line); }
.tc-name { grid-column: 1 / -1; color: var(--ink-head); font-weight: 650; font-size: 1rem; line-height: 1.3; }
.tc-test { grid-column: 1; grid-row: 2; color: var(--ink-2); font-size: .875rem; }
.tc-row .pill { grid-column: 2; grid-row: 2; }
.tc-amt { grid-column: 1 / -1; margin-top: 4px; color: var(--ink-head); font-size: 1.5rem; font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.pct { white-space: nowrap; }                             /* an amount's percent, "(7% better)": never broken in two */
@media (min-width: 768px) {
  .show { padding: 44px 0 56px; }
  .stage { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr; gap: 0 24px; align-items: start; }
  .stage-phone { grid-column: 1 / 4; grid-row: 1 / span 4; }
  .show-line { grid-column: 4 / 9; grid-row: 1; margin-bottom: 22px; font-size: 1.5rem; }
  .stage-chart { grid-column: 4 / 9; grid-row: 2; padding: 20px 20px 18px 14px; }
  .stage-tag { grid-column: 4 / 9; grid-row: 3; margin-top: 18px; padding: 4px 20px; border: 1px solid var(--hair); border-radius: 16px; background: var(--lift-2); box-shadow: 0 2px 3px rgba(0, 0, 0, .35), 0 34px 60px -34px rgba(0, 0, 0, .9); }
  .stage > .cap { grid-column: 4 / 9; grid-row: 4; }
  .chart-stage .plot-box, .chart-stage .plot-y { height: 210px; }
}
@media (min-width: 1024px) {
  .show { padding: 48px 0 64px; }
  .stage { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .show-line { grid-column: 4 / 13; font-size: 1.75rem; line-height: 1.18; margin-bottom: 26px; }
  .stage-chart { grid-column: 4 / 13; }
  .stage-tag { grid-column: 4 / 13; padding: 6px 24px; }
  .stage > .cap { grid-column: 4 / 13; }
  .chart-stage .plot-box, .chart-stage .plot-y { height: 236px; }
  /* the two rows side by side, a hairline between them */
  .tagcard { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .tc-row + .tc-row { border-top: 0; margin: 12px 0; padding: 0 0 0 28px; border-left: 1px solid var(--line); }
}

/* ---------- 2 · the offer line and four facts ---------- */
.offer { position: relative; background: var(--deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 44px 0 40px; }
.offer-line { position: relative; display: grid; gap: 0; }
.offer-line > li { position: relative; padding: 0 0 26px 30px; }
.offer-line > li::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: -8px; width: 1px; background: rgba(241, 225, 191, .3); }
.offer-line > li:last-child { padding-bottom: 0; }
.offer-line > li:last-child::before { display: none; }
.o-stop::after, .o-outs::after { content: ""; position: absolute; left: 0; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--deep); border: 2px solid var(--gold-mid); }
.o-outs::after { display: none; }
.offer-line b { display: block; color: var(--ink-head); font-size: 1.0625rem; font-weight: 650; line-height: 1.35; }
.offer-line span { display: block; color: var(--ink-2); font-size: 1rem; line-height: 1.4; text-wrap: balance; }
/* the 30 days: the page's band, with a tick for each day */
.o-stretch { padding-top: 2px !important; }
.offer-line .o-ticks { display: grid; grid-template-columns: repeat(30, 1fr); gap: 0; width: 100%; max-width: 420px; height: 26px; margin: 2px 0 8px; padding: 0 3px; border-radius: 4px; background: rgba(166, 195, 211, .13); }
.o-ticks i { justify-self: center; align-self: center; width: 2px; height: 12px; border-radius: 1px; background: var(--steel); }
.o-outs { padding-left: 30px; }
.o-outs ul { display: grid; gap: 14px; }
.o-outs ul li { position: relative; }
.o-outs ul li::before { content: ""; position: absolute; left: -25px; top: 11px; width: 17px; height: 1px; background: rgba(241, 225, 191, .3); }
.o-outs ul li::after { content: ""; position: absolute; left: -25px; top: -22px; width: 1px; height: 34px; background: rgba(241, 225, 191, .3); }
.offer-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font-weight: 600; }
.offer-link::after { content: "↓"; margin-left: 8px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 20px; margin-top: 32px; padding-top: 30px; border-top: 1px solid var(--line); }
.facts li { display: grid; gap: 6px; align-content: start; }
.fact-n { color: var(--ink-head); font-size: 2.75rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.facts li > span { color: var(--ink-2); font-size: .9375rem; line-height: 1.4; text-wrap: balance; }
.facts li > span b { font-weight: 650; }
.count { display: inline-block; }
.count .sr-only { -webkit-user-select: none; user-select: none; }   /* a copied amount carries its number once */
@media (min-width: 1024px) {
  .offer { padding: 36px 0 32px; }
  .offer-line { grid-template-columns: minmax(0, 2.5fr) minmax(0, 3.6fr) minmax(0, 1.9fr) minmax(0, 4fr); }
  .offer-line > li { padding: 34px 28px 0 0; }
  .offer-line > li::before { left: 0; right: 0; top: 13px; bottom: auto; width: auto; height: 1px; }
  .offer-line > li:last-child::before { display: block; right: auto; width: 26px; }
  .o-stop::after { top: 7px; }
  .o-stretch { padding-top: 34px !important; }
  .o-ticks { position: absolute; left: 0; right: 28px; top: 0; width: auto; max-width: none; margin: 0; }
  .o-stretch::before { display: none; }
  .o-outs { padding-left: 46px !important; padding-right: 0 !important; padding-top: 0 !important; }
  .o-outs ul { gap: 18px; }
  .o-outs ul li::before { left: -20px; top: 13px; width: 12px; }
  .o-outs ul li::after { left: -20px; top: 13px; height: calc(100% + 18px); }
  .o-outs ul li:last-child::after { display: none; }
  .o-outs ul li:first-child::after { top: 13px; }
  .o-outs ul li:first-child { margin-top: 0; }
  .offer-link { position: absolute; right: 0; top: -4px; margin: 0; min-height: 32px; font-size: 1rem; }
  .o-outs ul { padding-right: 150px; }
  .facts { grid-template-columns: 2.3fr 3.4fr 3.1fr 3.2fr; gap: 0 40px; margin-top: 30px; padding-top: 30px; }
  .facts li { grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; }
  .fact-n { font-size: 3.5rem; }
  .facts li > span { max-width: 15em; }
}

/* ---------- 3 · how it works ---------- */
.how { padding: 72px 0 64px; }
.how-head .lead { margin: 14px 0 0; max-width: 28em; color: var(--ink-2); }
.steps { display: grid; gap: 44px; margin-top: 40px; }
.step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 14px; align-items: baseline; }
.step-n { margin: 0; color: var(--gold-mid); font-family: var(--font-display); font-size: 1.75rem; font-weight: 500; line-height: 1; font-variant-numeric: normal; }
.step-t { grid-column: 1 / -1; margin: 10px 0 0; color: var(--ink); }
.step-shot { grid-column: 1 / -1; margin-top: 18px; }
.step .screen { aspect-ratio: 16 / 10; }
.chart-months { padding: 14px 12px 12px 8px; border-radius: 16px; border: 1px solid var(--line); background: var(--lift); }
.chart-months .plot-box, .chart-months .plot-y { height: 164px; }
.chart-months .chart-head { margin: 0 0 10px 4px; }
.chart-months .chart-status { font-size: .9375rem; }
@media (min-width: 768px) {
  .how { padding: 112px 0 104px; }
  .how-head { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0 24px; align-items: end; }
  .how-head > div { grid-column: 1 / 6; }
  .how-head .lead { grid-column: 6 / 9; margin: 0 0 6px; }
  /* one thin axis with three ticks; the steps hang from the ticks */
  .steps { grid-template-columns: 5fr 4fr 3fr; grid-template-rows: repeat(4, auto); gap: 0 32px; margin-top: 56px; padding-top: 34px; border-top: 1px solid var(--hair); }
  .step { position: relative; grid-row: span 4; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; gap: 0; align-items: start; }
  .step::before { content: ""; position: absolute; left: 0; top: -41px; width: 1px; height: 14px; background: var(--gold-mid); }
  .step h3 { margin-top: 10px; }
  .step-shot { margin-top: 22px; }
  .step .screen { aspect-ratio: auto; }
  .step-1 .screen { width: min(100%, 280px); aspect-ratio: 600 / 985; }   /* a test's whole screen: nothing of it is cut */
  .step-3 .screen { aspect-ratio: 600 / 469; }
  .chart-months { padding: 16px 14px 14px 10px; }
  .chart-months .plot-box, .chart-months .plot-y { height: 200px; }
}
@media (min-width: 1024px) {
  .how { padding: 84px 0 72px; }
  .how-head { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .how-head > div { grid-column: 1 / 8; }
  .how-head .lead { grid-column: 8 / 13; }
  .steps { gap: 0 48px; margin-top: 46px; }
  .step-t { font-size: 1.0625rem; }
}

/* ---------- 4 · after a few weeks ---------- */
.after { padding: 0 0 72px; }
.after-head { position: relative; padding: 72px 0 8px; }
.after-head h2 { max-width: 16em; }
.after-head .lead { margin: 16px 0 0; max-width: 40em; }
.ab { display: grid; gap: 0; margin-top: 36px; }
.a-title, .b-title h3 { font-size: 1.5rem; }
.a-res, .b-res { margin-top: 18px; }
.a-text, .b-text { margin: 22px 0 0; max-width: 34em; }
.b-title { margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--line); }
/* the results of Tags compared, large: the amount or the label, then the tag and the test */
.results { border-top: 1px solid var(--hair); }
.res { padding: 22px 0 22px; border-bottom: 1px solid var(--hair); }
.res-big { margin: 0; color: var(--ink-head); font-size: clamp(2.25rem, 10.5vw, 3rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.res-what { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 12px 0 0; color: var(--ink-2); font-size: 1rem; line-height: 1.3; }
.res-what b { color: var(--ink-head); font-size: 1.0625rem; }
.res-what span:not(.pill, .res-days) + span:not(.pill, .res-days)::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 10px 0 -2px; border-radius: 50%; background: var(--ink-3); vertical-align: middle; }
.res-what::after { content: ""; flex-basis: 100%; order: 1; margin-top: -6px; }   /* the line breaks here */
.res-what :is(.res-days, .pill) { order: 2; }
.res-days { color: var(--ink-3); font-size: .875rem; }
.res-bars { width: 100%; max-width: 420px; height: 9px; margin-top: 16px; overflow: visible; }
.bar-with { fill: var(--steel); }
.bar-without { fill: #3a5565; }
/* the two app pictures beside the chapters: a computer's layout only */
.ab-phone { display: none; }
.cap-b { display: none; }
/* the experiment's result: its title, the first test with its bar, the other two with their labels */
.exp { border-top: 1px solid var(--hair); padding-top: 22px; }
.exp-title { margin: 0 0 22px; color: var(--ink-2); font-size: 1rem; }
.exp-test { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0; font-size: 1.125rem; }
.exp-sent { margin: 12px 0 0; color: var(--ink-head); font-size: clamp(1.5rem, 6.4vw, 2rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.scale { margin-top: 26px; }
.scale-svg { width: 100%; height: 22px; overflow: visible; }
.s-track { stroke: #2b4655; stroke-width: 6; stroke-linecap: round; }
.s-rng { fill: var(--steel); fill-opacity: .55; }
.s-zero { stroke: var(--ink-2); stroke-width: 1.5; }
.s-span { fill: none; }
.s-dot { stroke: var(--gold-a); stroke-width: 15; stroke-linecap: round; }
.scale-axis { display: flex; justify-content: space-between; margin-top: 8px; color: var(--ink-3); font-size: .8125rem; }
.exp-likely { margin: 12px 0 0; color: var(--ink-2); font-size: .9375rem; }
.exp-rest { margin-top: 24px; border-top: 1px solid var(--line); }
.exp-rest li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
.exp-rest p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; color: var(--ink-2); }
.exp-rest b { font-weight: 600; }
.exp-rest p span { color: var(--ink-head); font-weight: 600; }
@media (min-width: 768px) {
  .after-head { padding-top: 112px; }
  /* each chapter: its title in a row of its own, then its text beside its result (no row is stretched to another's height) */
  .ab { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0 24px; margin-top: 64px; }
  .a-title { grid-column: 1 / 4; grid-row: 1; }
  .a-text { grid-column: 1 / 4; grid-row: 2; margin-top: 14px; align-self: start; }
  .a-res { grid-column: 4 / 9; grid-row: 2; margin-top: 14px; }
  .b-title { grid-column: 1 / 4; grid-row: 4; margin-top: 96px; padding-top: 0; border-top: 0; }
  .b-text { grid-column: 1 / 4; grid-row: 5; margin-top: 14px; align-self: start; }
  .b-res { grid-column: 4 / 9; grid-row: 5; margin-top: 14px; }
  .res { padding: 20px 0; }
  .res-big { font-size: clamp(2.5rem, 4.4vw, 3.5rem); }
  .res-bars { max-width: 380px; }
}
@media (min-width: 1024px) {
  .after { padding-bottom: 68px; }
  .after-head { padding-top: 72px; }
  .ab { grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: 48px; }
  .a-title { grid-column: 1 / 5; }
  .a-text { grid-column: 1 / 5; }
  .a-res { grid-column: 5 / 10; }
  .b-title { grid-column: 1 / 5; margin-top: 64px; }
  .b-text { grid-column: 1 / 5; }
  .b-res { grid-column: 5 / 10; }
  /* the phone stays in place while the two chapters pass, and changes its screen */
  .ab-phone { display: block; grid-column: 10 / 13; grid-row: 1 / span 5; margin: 0; align-self: start; position: sticky; top: calc(var(--head-h) + 32px); }
  .ab-phone .swap { display: grid; width: 100%; }
  .ab-phone .phone { grid-area: 1 / 1; transition: opacity .35s ease; }
  .js .ab-phone .phone:not(.on) { opacity: 0; }
  html:not(.js) .ab-phone { position: static; }
  html:not(.js) .ab-phone .swap { gap: 24px; }
  html:not(.js) .ab-phone .phone { grid-area: auto; }
  .ab-phone.b .cap-a { display: none; }
  .ab-phone.b .cap-b { display: inline; }
  .exp-sent { font-size: 2rem; }
}

/* 4c · sleep next to your scores: a band from edge to edge */
.sleep { margin-top: 72px; padding: 64px 0 56px; background: var(--deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sleep-title { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: clamp(1.75rem, 7vw, 2rem); line-height: 1.1; font-variant-numeric: normal; text-wrap: balance; }
.sleep-title span { display: block; }
.sleep-fig { margin-top: 32px; }
.chart-sleep .plot-box, .chart-sleep .plot-y { height: 240px; }
.chart-sleep .chart-head { align-items: flex-start; }
/* the sleep line stays the quieter one: thinner and softer than the gold score line */
.s-line { stroke: var(--sleep); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-opacity: .8; opacity: 0; transition: opacity .25s ease; }
.s-line.on { opacity: 1; }
/* the five measures: real buttons (they need JavaScript, so without it they are not shown) */
.measures { display: none; gap: 6px; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter); overflow-x: auto; scrollbar-width: none; max-width: calc(100% + 2 * var(--gutter)); }
.measures::-webkit-scrollbar { display: none; }
.js .measures { display: flex; }
.measure {
  flex: none; min-height: 44px; padding: 8px 14px; border-radius: 22px; border: 1px solid var(--hair); background: none; color: var(--ink-2);
  font: inherit; font-size: .875rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.measure:hover { color: var(--ink-head); border-color: var(--steel); }
.measure[aria-pressed="true"] { color: var(--sleep); border-color: var(--sleep); background: rgba(159, 217, 138, .07); }
.ways { display: grid; margin-top: 36px; border-top: 1px solid var(--hair); }
.ways li { padding: 22px 0; border-bottom: 1px solid var(--hair); }
.ways h4 { font-size: 1.375rem; }
.ways .where { display: block; margin: 4px 0 10px; color: var(--steel); font-size: .9375rem; font-weight: 600; }
.ways p { margin: 0; color: var(--ink); font-size: 1rem; }
/* a row that opens on a tap on a phone (the browser's own open-and-close element; js/site.js closes it there at the
   start). On a computer it is always open. A row with "fold-label" is folded only on a phone: its summary is the
   phone's label for it, and a computer doesn't show it. */
.fold > summary { display: block; list-style: none; }
.fold > summary::-webkit-details-marker { display: none; }
@media (min-width: 768px) {
  .fold > summary { pointer-events: none; }
  .fold-label > summary, .terms-fold { display: none; }
}
.ways-note { margin: 20px 0 0; color: var(--ink-head); font-size: 1rem; font-weight: 600; }
.sleep-facts { display: grid; gap: 12px; margin-top: 24px; color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }
@media (min-width: 768px) {
  .sleep { margin-top: 112px; padding: 96px 0 84px; }
  .sleep-title { max-width: 15em; font-size: clamp(2rem, 3.6vw, 2.75rem); line-height: 1.06; }
  .sleep-fig { margin-top: 44px; }
  .chart-sleep .plot-box, .chart-sleep .plot-y { height: 320px; }
  .measures { margin: 0; padding: 0; overflow: visible; flex-wrap: wrap; justify-content: flex-end; max-width: none; }
  .measure { min-height: 40px; }
  .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin-top: 52px; border-top: 0; }
  .ways .fold > summary { min-height: 68px; }             /* a name with no line under it: its text starts level with its neighbour's */
  .ways li { padding: 22px 0 0; border-bottom: 0; border-top: 1px solid var(--hair); }
  .ways-note { margin-top: 28px; }
  .sleep-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); }
}
@media (min-width: 1024px) {
  .sleep { margin-top: 72px; padding: 72px 0 56px; }
  .chart-sleep .plot-box, .chart-sleep .plot-y { height: 260px; }
  .sleep-title { max-width: none; }
  .ways { margin-top: 32px; }
  .sleep-facts { margin-top: 28px; padding-top: 20px; }
  .ways p { font-size: 1.0625rem; }
}
/* 4d · lab values, and the note */
.labs { display: grid; gap: 28px; margin-top: 64px; }
.labs-text h3 { font-size: 1.5rem; }
.labs-text p { margin: 14px 0 0; max-width: 34em; }
.after-foot { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.note { margin: 0 0 24px; max-width: 40em; color: var(--ink-2); }
@media (min-width: 768px) {
  .labs { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: center; margin-top: 60px; }
  .labs-text { grid-column: 1 / 6; }
  .labs-shot { grid-column: 7 / 11; }
  .after-foot { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 44px; }
  .after-foot .note { margin: 0; }
  .after-foot .btn { flex: none; }
}

/* ---------- 5 · pricing ---------- */
.pricing { padding: 72px 0; border-top: 1px solid var(--line); }
.price-grid { display: grid; gap: 32px; }
.price-head .lead { margin: 16px 0 0; color: var(--ink-2); max-width: 26em; }
.plan-name { color: var(--ink-2); font-size: 1.0625rem; font-weight: 650; letter-spacing: 0; }
.plan-flag { margin: 0 0 6px; color: var(--steel); font-size: .875rem; font-weight: 650; }
/* the membership: the one raised panel, with the one gold hairline of the page */
.plan-mem {
  position: relative; padding: 28px 22px 24px; border-radius: 22px; background: linear-gradient(180deg, var(--lift-2), var(--lift));
  box-shadow: 0 2px 3px rgba(0, 0, 0, .4), 0 50px 90px -50px rgba(0, 0, 0, .9);
}
.plan-mem::before {
  content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; background: linear-gradient(160deg, var(--gold-a), rgba(182, 161, 114, .25) 45%, var(--gold-b)); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.price { margin: 10px 0 2px; color: var(--ink-head); }
.price-big { font-size: 4.5rem; font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.price-per { color: var(--ink-2); font-size: 1.125rem; }
.price-sub { margin: 0 0 14px; color: var(--ink-2); font-size: 1rem; }
.price-alt { margin: 6px 0 14px; font-size: 1rem; }
.price-alt b { white-space: nowrap; }
/* the app's sentence about Stripe's conversion: shown by js/site.js where a visitor pays in another currency */
.price-own { margin: 10px 0 0; color: var(--ink-2); font-size: .875rem; line-height: 1.5; }
.price-guarantee { margin: 18px 0 0; padding: 12px 14px; border: 1px solid rgba(166, 195, 211, .6); border-radius: 12px; color: var(--ink-head); font-size: 1rem; line-height: 1.4; }
.plan-lead { margin: 24px 0 0; color: var(--ink-2); font-size: 1rem; }
/* lists are ruled with hairlines, not ticked */
.lines { margin-top: 10px; border-top: 1px solid var(--line); }
.lines li { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 1rem; line-height: 1.4; }
.free-fold { margin-top: 10px; }                          /* the free version's list (a row that opens on a tap on a phone) */
.free-fold > .lines { margin-top: 0; }
.plan-foot { margin: 16px 0 0; color: var(--ink-2); font-size: .9375rem; }
.plan-free { padding: 4px 0 0; }
.plan-free .price-big { font-size: 3rem; }
.plan-cta { display: flex; margin-top: 22px; }
.price-pay { display: flex; align-items: flex-start; gap: 10px; max-width: 46em; margin: 0; color: var(--ink-head); font-size: 1rem; font-weight: 600; line-height: 1.45; }
.price-pay svg { width: 22px; height: 22px; flex: none; margin-top: 1px; fill: none; stroke: var(--steel); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.price-terms { max-width: 62em; margin: 14px 0 0; color: var(--ink-2); font-size: .875rem; line-height: 1.55; }
@media (min-width: 768px) {
  .pricing { padding: 104px 0; }
  .price-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 40px 24px; }
  .price-head { grid-column: 1 / 9; }
  .plan-mem { grid-column: 1 / 6; padding: 36px 36px 30px; }
  .plan-free { grid-column: 6 / 9; padding-top: 36px; }
  .price-foot { grid-column: 1 / 9; }
  .price-big { font-size: 5.5rem; }
}
@media (min-width: 1024px) {
  .pricing { padding: 128px 0; }
  .price-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 56px 24px; }
  .price-head { grid-column: 1 / 5; padding-top: 36px; }
  .plan-mem { grid-column: 5 / 10; }
  .plan-free { grid-column: 10 / 13; padding: 36px 0 0 8px; }
  .price-foot { grid-column: 5 / 13; }
}

/* ---------- 6 · the library ---------- */
.library { padding: 72px 0 0; border-top: 1px solid var(--line); overflow: hidden; }
.lib-text > p { margin: 18px 0 0; max-width: 36em; }
/* the library's two numbers, plain */
.lib-nums { display: grid; grid-template-columns: repeat(2, max-content); gap: 14px 44px; margin: 26px 0 6px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lib-nums div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; }
.lib-nums dt { color: var(--ink-2); font-size: .8125rem; line-height: 1.3; }
.lib-nums dd { margin: 0; color: var(--ink-head); font-size: 2.25rem; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.library { padding-bottom: 44px; }
.lib-shot, .data-shot { display: none; }
.lib-shot .cap { margin: 0 0 18px; }
@media (min-width: 768px) {
  .library { padding: 112px 0 0; }
  .lib-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; }
  .lib-text { grid-column: 1 / 8; padding-bottom: 104px; }
  .lib-nums dd { font-size: 3rem; }
  .lib-nums dt { font-size: .9375rem; }
  .lib-shot { display: block; grid-column: 8 / 13; align-self: end; }
  .lib-shot .phone { width: min(300px, 100%); margin: 0 0 0 auto; height: 500px; overflow: hidden; }
  .lib-shot .cap { text-align: right; }
}
@media (min-width: 1024px) {
  .library { padding-top: 136px; }
  .lib-text { grid-column: 1 / 7; padding-bottom: 128px; }
}

/* ---------- 7 · the tests: quiet, like the references of a paper ---------- */
.tests { padding: 64px 0; background: var(--deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.tests-text .lead { margin: 16px 0 0; }
.tests-text p:last-child { margin: 14px 0 0; color: var(--ink-2); font-size: 1rem; }
.sources { margin: 32px 0 0; border-top: 1px solid var(--hair); }
.sources div { padding: 18px 0; border-bottom: 1px solid var(--hair); }
.sources dt { color: var(--ink-head); font-weight: 650; }
.sources dd { margin: 4px 0 0; color: var(--ink-2); font-size: 1rem; line-height: 1.5; }
@media (min-width: 768px) {
  .tests { padding: 96px 0; }
  .tests-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: start; }
  .tests-text { grid-column: 1 / 6; }
  .src-fold { grid-column: 7 / 13; }
  .sources { margin-top: 8px; }
  .sources div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 0 20px; padding: 20px 0; }
  .sources dd { margin: 0; }
}

/* ---------- 8 · your data ---------- */
.data { padding: 72px 0; border-top: 1px solid var(--line); }
.statements { margin-top: 28px; border-top: 1px solid var(--hair); }
.statements li { padding: 18px 0; border-bottom: 1px solid var(--hair); color: var(--ink-soft); font-size: 1.125rem; line-height: 1.4; }
.statements b { display: block; }
.fine { margin: 22px 0 0; color: var(--ink-2); font-size: .9375rem; max-width: 44em; }
.fine + .fine { margin-top: 10px; }
@media (min-width: 768px) {
  .data { padding: 112px 0; }
  .data-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: center; }
  .data-text { grid-column: 1 / 8; }
  .data-shot { display: block; grid-column: 9 / 13; }
  .data-shot .phone { width: 100%; max-width: 292px; margin: 0 0 0 auto; }
  .data-shot .cap { text-align: right; }
  .statements li { font-size: 1.375rem; line-height: 1.35; padding: 20px 0; }
  .statements b { display: inline; }
}
@media (min-width: 1024px) { .data { padding: 136px 0; } }

/* ---------- 9 · short answers: the browser's own open-and-close element ---------- */
.faqs { padding: 64px 0 72px; border-top: 1px solid var(--line); }
.faq { margin-top: 24px; border-top: 1px solid var(--hair); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary { position: relative; display: block; min-height: 44px; padding: 20px 44px 20px 0; cursor: pointer; list-style: none; color: var(--ink-head); font-weight: 650; font-size: 1.125rem; line-height: 1.4; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; margin-top: -8px; border-right: 2px solid var(--steel); border-bottom: 2px solid var(--steel); transform: rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq summary:focus-visible { outline-offset: 0; }
.faq-a p { margin: 0 0 22px; max-width: 62ch; color: var(--ink); }
@media (min-width: 768px) {
  .faqs { padding: 104px 0 112px; }
  .faq-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: start; }
  .faq-grid h2 { grid-column: 1 / 5; }
  .faq { grid-column: 5 / 13; margin-top: 6px; }
}

/* ---------- 10 · the last call: the only centred section ---------- */
.final { position: relative; overflow: hidden; padding: 88px 0 96px; background: var(--deep); border-top: 1px solid var(--line); text-align: center; }
.final-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.final-in img { width: 56px; height: 56px; margin-bottom: 22px; }
.final h2 { max-width: 13em; font-size: clamp(2.125rem, 9.6vw, 2.375rem); line-height: 1.06; }
.final .lead { margin: 18px 0 26px; color: var(--ink-soft); }
.final-small { margin: 18px 0 0; max-width: 30em; color: var(--ink-2); font-size: .9375rem; }
/* the Speed test's line runs behind the text, faint, and ends at the right in one dot (the hero has the same line) */
.final-line { position: absolute; left: 0; right: 0; top: 16%; height: 60%; opacity: .3; pointer-events: none; }
.final-line .p-line { stroke-width: 1.6; }
.p-end { stroke: var(--gold-a); stroke-width: 9; stroke-linecap: round; }
@media (min-width: 1024px) {
  .final { padding: 152px 0 160px; }
  .final h2 { font-size: 4rem; line-height: 1.03; }
  .final-line { right: 6%; top: 12%; height: 66%; }
}

/* ---------- 11 · footer ---------- */
.site-foot { border-top: 1px solid var(--line); padding: 44px 0 calc(44px + env(safe-area-inset-bottom, 0px)); color: var(--ink-2); font-size: .9375rem; }
.site-foot .brand-word { width: 118px; height: 20px; }
.foot-nav { display: grid; gap: 0 32px; margin: 14px 0 22px; }
.foot-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.foot-nav a:hover { color: var(--ink-head); text-decoration: underline; }
.disclaimer { max-width: 46em; margin: 0 0 14px; color: var(--ink-2); }
.foot-small { max-width: 62em; color: var(--ink-3); font-size: .8125rem; line-height: 1.55; margin: 0 0 10px; }
.foot-small a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 640px) { .foot-nav { grid-template-columns: repeat(2, max-content); } }
@media (min-width: 1024px) {
  .foot-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; align-items: start; }
  .foot-grid > .brand { grid-column: 1 / 4; }
  .foot-grid > .foot-nav { grid-column: 4 / 13; margin-top: 0; }
  .foot-text { grid-column: 4 / 13; }
  .page-foot .foot-nav { grid-column: 1 / 13; }
  .page-foot .foot-text { grid-column: 1 / 13; }
}

/* ---------- 12 · the sign-up sheet: the browser's own dialog ---------- */
.sheet {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--lift); color: var(--ink); overflow-y: auto; overscroll-behavior: contain;
}
.sheet::backdrop { background: rgba(5, 12, 16, .66); }
.sheet-in { position: relative; padding: 26px var(--gutter) calc(40px + env(safe-area-inset-bottom, 0px)); }
.sheet-close {
  position: absolute; right: 10px; top: 12px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--ink-head); cursor: pointer;
}
.sheet-close:hover { background: rgba(241, 225, 191, .08); }
.sheet-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sheet-head { padding-right: 44px; margin-bottom: 26px; }
.sheet-head h2, .done h2 { font-size: 1.875rem; line-height: 1.1; }
.sheet-lead { margin: 10px 0 0; color: var(--ink-2); font-size: 1.0625rem; }
html.sheet-open { overflow: hidden; background: var(--lift); }
@media (min-width: 768px) {
  .sheet { inset: 0 0 0 auto; width: 480px; border-left: 1px solid var(--hair); box-shadow: -40px 0 80px -30px rgba(0, 0, 0, .8); }
  .sheet-in { padding: 34px 36px 48px; }
  .sheet-close { right: 20px; top: 22px; }
}
/* the form (the sign-up sheet; the cancel and withdraw pages) */
.field { margin: 0 0 20px; }
.field label, .field-lab { display: block; margin: 0 0 8px; padding: 0; color: var(--ink-head); font-weight: 650; font-size: 1rem; }
.field input, .field textarea {
  display: block; width: 100%; min-height: 54px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--field-line);
  background: var(--input); color: var(--ink-head); font: inherit; font-size: 1.0625rem;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--steel); }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--steel); outline-offset: 1px; border-color: var(--steel); border-radius: 12px; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--danger); }
.field input[type="date"] { color-scheme: dark; }
.page .field-value { margin: 0; color: var(--ink-head); }
.choice { margin: 0 0 20px; padding: 0; border: 0; min-width: 0; }
.choice .check { padding: 8px 0; }
.sub-field { margin: 4px 0 0 36px; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 88px; }
:lang(de) .pw-wrap input { padding-right: 116px; }
.pw-toggle { position: absolute; right: 5px; top: 5px; bottom: 5px; min-width: 72px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--line); background: #1f3a48; color: var(--ink-head); font: inherit; font-size: .9375rem; font-weight: 600; cursor: pointer; }
.pw-toggle:hover { border-color: var(--steel); }
.hint { margin: 8px 0 0; color: var(--ink-2); font-size: .9375rem; }
.field-err { margin: 8px 0 0; color: var(--danger); font-size: .9375rem; font-weight: 600; }
.consents { margin: 6px 0 0; padding: 0; border: 0; min-width: 0; }
.consents .field-err, .age-q + .field-err, .terms-row + .field-err { margin: -2px 0 8px 36px; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 12px 0; cursor: pointer; font-size: .9375rem; line-height: 1.5; color: var(--ink); }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--steel); cursor: pointer; }
.check .muted { color: var(--ink-3); }
.check > span { overflow-wrap: anywhere; }
.age-q { margin: 0 0 4px; }
#nomail-row { margin-top: 18px; }
.form-small { margin: 10px 0 0; color: var(--ink-2); font-size: .9375rem; }
.form-small.center { margin-top: 18px; }
.form-err { margin: 18px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(230, 153, 148, .45); background: rgba(230, 153, 148, .08); color: var(--ink-head); font-size: 1rem; }
#su-submit, .contract-card #f-submit { margin-top: 20px; }
.nojs-note { margin: 0; color: var(--ink); font-size: 1.0625rem; }
.done h2:focus { outline: none; }
.done { padding-right: 0; }
.done h2 { padding-right: 44px; }
.done-started { margin: 12px 0 0; color: var(--ink-head); font-weight: 600; }
.choices, .get-choices { display: grid; gap: 12px; margin: 24px 0; }
.get-choices { max-width: 460px; }
.store { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 8px 18px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .32); background: #0a151b; color: #fff; text-decoration: none; }
.store:hover { border-color: #fff; color: #fff; }
.store-text { display: flex; flex-direction: column; line-height: 1.15; }
.store small { font-size: .75rem; letter-spacing: .02em; color: #e6ecef; }
.store strong { color: #fff; font-size: 1.2rem; font-weight: 650; }
.done-ios { color: var(--ink-head); font-weight: 600; }
.done-login, .done-code { color: var(--ink); }
.done-code { margin-bottom: 4px; }
.done-spam { color: var(--ink-head); font-weight: 600; }
.done-phone { color: var(--ink-2); }

/* ---------- parts that are in the page only while their switch is on (tools/parts/) ---------- */
.section { padding: 72px 0; }
.section-head { max-width: 760px; margin-bottom: 32px; }
.video-note { margin: 16px 0 0; color: var(--ink-2); }
.video-frame video { width: 100%; height: auto; border-radius: 20px; background: #0c1920; }
.founder { display: grid; gap: 24px; padding: 28px 24px; }
.founder-photo { display: grid; place-items: center; width: 132px; height: 132px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #213b49, #152a35); border: 2px dashed var(--gold-mid); }
.founder-photo span { color: var(--ink-2); font-size: .9rem; font-weight: 600; }
.sign { font-weight: 600; }
.ph { display: inline; padding: 1px 6px; border: 1.5px dashed var(--gold-mid); border-radius: 8px; background: rgba(210, 191, 151, .08); color: var(--ink-head); }
@media (min-width: 800px) { .section { padding: 112px 0; } .founder { grid-template-columns: 150px 1fr; gap: 36px; padding: 40px; } }

/* ---------- the other pages (privacy, terms, values, roadmap, legal notice, cancel, withdraw, get, 404) ---------- */
.page { max-width: 820px; margin: 0 auto; padding: 44px var(--gutter) 88px; overflow-wrap: break-word; }
.page h1 { font-size: clamp(2.125rem, 6vw, 3rem); line-height: 1.06; margin-bottom: 14px; overflow-wrap: anywhere; }
.page h2 { font-family: var(--font); font-size: 1.3125rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.25; margin: 0 0 .5em; font-variant-numeric: tabular-nums; }
.page h3 { font-size: 1.0625rem; margin: 1.3em 0 .4em; }
.page p { color: var(--ink); }
.page .muted { color: var(--ink-2); }
/* a panel of a page: a lifted navy with a hairline */
.card { position: relative; background: var(--lift); border: 1px solid var(--line); border-radius: 18px; padding: 24px; }
.page .card { margin: 0 0 18px; }
.page .card > :last-child { margin-bottom: 0; }
.page-list { margin: 0; padding-left: 1.2em; list-style: disc; }
.page ol.page-list, .dl-device ol { list-style: decimal; }
.page-list li { margin: 0 0 10px; }
.page-list li:last-child { margin-bottom: 0; }
.page .card ul:not([class]) { padding-left: 1.2em; list-style: disc; }
.page .card ol:not([class]) { padding-left: 1.3em; list-style: decimal; }
.page .card li { margin: 0 0 8px; }
.card-note { border-color: rgba(166, 195, 211, .6); }
.m-0 { margin: 0 !important; }
.mt-8 { margin: 8px 0 0 !important; }
#notice p { font-size: 1rem; }
#notice h3:first-of-type { margin-top: 0; }
#notice .muted { font-size: .875rem; }
.see-also { color: var(--ink-2); font-size: .9375rem; }
.draft-banner { margin: 0 0 22px; padding: 14px 18px; border-radius: 14px; border: 2px dashed var(--gold-mid); background: rgba(210, 191, 151, .08); color: var(--ink-head); font-weight: 700; letter-spacing: .02em; }
.legal-list { margin: 0; }
.legal-list dt { color: var(--ink-2); font-size: .9375rem; margin-top: 14px; }
.legal-list dt:first-child { margin-top: 0; }
.legal-list dd { margin: 2px 0 0; color: var(--ink-head); font-weight: 600; }
.form-card { padding: 26px 22px; }
.contract-card { max-width: 620px; }
.contract-card .done .page-list { margin: 0 0 16px; }
.contract-card .done h2 { padding-right: 0; font-family: var(--font-display); font-weight: var(--display-weight); }
@media (min-width: 768px) { .page { padding-top: 64px; } .form-card { padding: 34px; } }

/* ---------- the Windows app's download page (/download/, /de/download/; config.js DESKTOP_DOWNLOADS) ---------- */
.dl-hero { padding: 40px 0 8px; }
.dl-hero h1 { margin: 0 0 16px; }
.dl-hero .lede { max-width: 38em; font-size: 1.125rem; }
.dl-win { margin-top: 24px; gap: 12px; }
.dl-win svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dl-win.off { background: #0a151b; color: #d5dde1; border: 1px dashed rgba(255, 255, 255, .28); box-shadow: none; cursor: not-allowed; filter: none; }
.dl-how { padding: 40px 0 64px; }
.dl-grid { display: grid; gap: 32px; align-items: center; }
.dl-how h2 { margin-bottom: 26px; }
.dl-how h2:focus { outline: none; }
.dl-steps { margin: 0 0 22px; counter-reset: dl; }
.dl-steps li { counter-increment: dl; position: relative; margin: 0 0 14px; padding-left: 46px; color: var(--ink-head); font-size: 1.2rem; line-height: 1.45; }
.dl-steps b { white-space: nowrap; }
.dl-steps li::before { content: counter(dl); position: absolute; left: 0; top: 0; color: var(--gold-mid); font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; }
.dl-again { margin: 18px 0 0; font-size: 1.05rem; }
.dl-art { margin: 0; padding: 16px 12px; border-radius: 24px; border: 1px solid var(--line); background: var(--lift); }
.dl-art svg { width: 100%; height: auto; }
.dl-art text { font-family: var(--font); }
.dl-art .t-url { font-size: 12px; fill: #96abb6; }
.dl-art .t-file { font-size: 15.5px; font-weight: 700; fill: #fff; }
.dl-art .t-ready { font-size: 17px; font-weight: 700; fill: #fff; }
.dl-notes { margin-top: 36px; }
.dl-note { border-color: rgba(166, 195, 211, .6); }
.dl-note h3 { font-size: 1.125rem; margin-bottom: 6px; }
.dl-note p { margin: 0; }
.dl-small { margin: 18px 0 0; color: var(--ink-2); font-size: .9375rem; }
.dl-started .dl-hero { display: none; }
.dl-started .dl-how { padding-top: 48px; }
.dl-others { display: grid; gap: 16px; margin-top: 28px; }
.dl-device h3 { font-size: 1.2rem; margin-bottom: 8px; }
.dl-device p { margin: 0 0 12px; }
.dl-device ol { margin: 0 0 14px; padding-left: 1.3em; }
.dl-device li { margin: 0 0 8px; }
.dl-later { margin: 0; color: var(--ink-2); font-weight: 600; }
@media (min-width: 800px) {
  .dl-hero { padding-top: 64px; }
  .dl-how { padding: 56px 0 88px; }
  .dl-others { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
@media (min-width: 960px) { .dl-grid { grid-template-columns: 1fr 1fr; gap: 56px; } }

/* ---------- phones and tablets: the offer as one strip — today at the left, after 30 days at the right, the 30 days
   between them; then the two ways on a line each, and the facts as rows (a phone: two by two) ---------- */
@media (max-width: 1023px) {
  .offer { padding: 22px 0 20px; }
  .offer-line { grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .offer-line > li { padding: 0 0 10px; }
  .offer-line > li::before, .o-stop::after, .o-outs ul li::before, .o-outs ul li::after { display: none; }
  .o-today { grid-column: 1; grid-row: 1; }
  .o-after { grid-column: 2; grid-row: 1; text-align: right; }
  .o-today span, .o-after span { display: none; }
  .o-stretch { grid-column: 1 / -1; grid-row: 2; padding-top: 0 !important; text-align: center; }
  .o-ticks { max-width: none; margin: 0 0 6px; }
  .o-outs { grid-column: 1 / -1; padding-left: 0; }
  .o-outs ul { gap: 6px; }
  .o-outs ul li b { display: inline; }
  .o-outs ul li b::after { content: " · "; font-weight: 400; color: var(--ink-3); }
  .o-outs ul li span { display: inline; font-size: .9375rem; }
  .offer-link { margin-top: 2px; }
  .facts { gap: 10px 32px; margin-top: 14px; padding-top: 16px; }
  .facts li { grid-template-columns: 64px 1fr; align-items: center; gap: 12px; }
  .fact-n { font-size: 2rem; }
  .facts li > span { font-size: .875rem; }
}
/* ---------- tablets: the computer's grids, with its distances (the pictures beside the chapters are a computer's) ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .how { padding: 76px 0 64px; }
  .after { padding-bottom: 56px; }
  .after-head { padding-top: 64px; }
  .ab { margin-top: 44px; }
  .b-title { margin-top: 56px; }
  .sleep { margin-top: 64px; padding: 64px 0 52px; }
  .chart-sleep .plot-box, .chart-sleep .plot-y { height: 260px; }
  .labs { margin-top: 48px; }
  .after-foot { margin-top: 36px; }
}

/* ---------- phones (up to 767 px): the calm layout ----------
   One idea per screen. Every section has the same air above and below (--sec) and one side margin (--gutter); running
   text is 16 px or larger with a line height of about 1.5. A phone shows the same sections in the same order with
   less in each: the parts of a text marked class="more" are a computer's, some rows open on a tap (class="fold";
   js/site.js closes them here at the start), and a few pictures and parts of a graphic are left out.
   Nothing in this block applies from 768 px. */
@media (min-width: 375px) and (max-width: 767px) { body.home { --gutter: 20px; } }
@media (max-width: 767px) {
  body.home { --sec: 52px; }
  .more { display: none; }
  .less { display: inline; }
  h2 { font-size: 1.875rem; }
  h1:lang(de) { font-size: 2.125rem; }
  .hero .btn { width: 100%; }
  .lang a::after { content: ""; position: absolute; inset: 0 -4px; }   /* the language link: 44 px to tap */

  /* a row that opens on a tap: its name at the left, a chevron at the right */
  .fold > summary { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 13px 26px 13px 0; cursor: pointer; }
  .fold > summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; margin-top: -7px; border-right: 2px solid var(--steel); border-bottom: 2px solid var(--steel); transform: rotate(45deg); transition: transform .2s ease; }
  .fold[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
  .fold > summary:focus-visible { outline-offset: 0; }
  .fold > p { margin: 0; padding: 0 0 16px; font-size: 1rem; line-height: 1.5; }
  .fold-label { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
  .fold-label > summary { color: var(--ink-head); font-size: 1.0625rem; font-weight: 650; line-height: 1.3; }

  /* the band under the hero: the sentence, the chart, the two tag rows (the visitor holds a phone: no picture of one) */
  .show { padding: var(--sec) 0; }
  .show-line { margin-bottom: 20px; }
  .stage-phone { display: none; }
  .stage-chart { padding: 16px 14px 14px 10px; }
  .chart-stage .chart-head { margin-bottom: 10px; }
  .chart-stage .chart-title { display: none; }
  .stage-tag { margin-top: 8px; }
  .tc-row { padding: 16px 0; }
  .stage > .cap { margin-top: 4px; }
  .stage > .cap .cap-t, .a-res .cap-t { display: none; }   /* these two captions name what only a computer shows */

  /* the offer: the strip, then the four facts as two by two — a number and a few words each */
  .offer { padding: var(--sec) 0; }
  .offer-line > li { padding-bottom: 12px; }
  .offer-line .o-ticks { max-width: none; }                /* the 30 days span the strip on a wide phone too */
  .o-outs ul { grid-template-columns: 1fr 1fr; gap: 6px 20px; }   /* the two ways side by side: its name, then its price */
  .o-outs ul li b { display: block; font-size: 1rem; }
  .o-outs ul li b::after { content: none; }
  .o-outs ul li span { display: block; font-size: 1rem; }
  .offer-link { margin-top: 6px; }
  .facts { grid-template-columns: 1fr 1fr; gap: 26px 20px; margin-top: 20px; padding-top: 30px; }
  .facts li { grid-template-columns: 1fr; gap: 6px; align-items: start; }
  .fact-n { font-size: 2.25rem; }
  .facts li > span { font-size: .9375rem; }

  /* how it works: each step is its number and title, one sentence, then one picture — whole, never cut */
  .how { padding: var(--sec) 0; }
  .how-head .lead { display: none; }
  .steps { gap: 44px; margin-top: 30px; }
  .step-t { margin-top: 8px; }
  .step-shot { margin-top: 16px; }
  .step-1 .screen { width: 176px; aspect-ratio: 600 / 985; border-radius: 16px; }   /* one test at a time; they take turns, as on a computer */
  .step-3 .screen { max-width: 300px; aspect-ratio: 600 / 469; border-radius: 14px; }   /* the tag buttons whole: no button is cut */
  .chart-months .chart-head { display: none; }
  .chart-months .plot-box, .chart-months .plot-y { height: 150px; }

  /* built on the research: the headline and its lead; the four sources in one row that opens */
  .tests { padding: var(--sec) 0; }
  .tests-text .lead { margin-top: 14px; font-size: 1.0625rem; }
  .tests-text p:last-child { display: none; }
  .src-fold { margin-top: 26px; }
  .sources { margin: 0; border-top: 0; }
  .sources div { padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 0; font-size: 1rem; line-height: 1.5; }
  .sources dt, .sources dd { display: inline; margin: 0; font-size: inherit; line-height: inherit; }   /* the name and its source on one line */
  .sources dt::after { content: " — "; font-weight: 400; color: var(--ink-3); }

  /* after a few weeks: two results of Tags compared (the amount, the tag, its label), then the experiment's purpose
     and its main result */
  .after { padding-bottom: var(--sec); }
  .after-head { padding-top: var(--sec); }
  .after-head .lead { margin-top: 14px; font-size: 1.0625rem; }
  .ab { margin-top: 36px; }
  .a-title, .b-title h3, .labs-text h3 { font-size: 1.25rem; }
  .a-res { margin-top: 16px; }
  .a-text { display: none; }
  .res { padding: 20px 0; }
  .res:nth-child(n + 3), .res-days, .res-bars { display: none; }
  .res-big { font-size: 1.875rem; line-height: 1.1; }
  .res-what { margin-top: 10px; }
  .res-what b { flex-basis: 100%; }                        /* the tag on a line of its own; under it the test and the label */
  .res-what::after { display: none; }
  .b-title { margin-top: 44px; padding-top: 0; border-top: 0; }
  .b-text { margin-top: 10px; }
  .b-res { order: 1; margin-top: 20px; }                   /* the purpose first, then the result */
  .exp { padding-top: 18px; }
  .exp-title { margin-bottom: 14px; }
  .exp-sent { font-size: 1.5rem; }
  .scale { margin-top: 20px; }
  .exp-tail, .exp-likely, .exp-rest { display: none; }

  /* sleep next to your scores: the chart alone (no row of buttons), the two ways to connect as rows that open */
  .sleep { margin-top: var(--sec); padding: var(--sec) 0; }
  .sleep-title { font-size: 1.5rem; line-height: 1.15; }
  .sleep-fig { margin-top: 24px; }
  .chart-sleep .chart-head { display: none; }
  .chart-sleep .plot-box, .chart-sleep .plot-y { height: 190px; }
  .ways { margin-top: 28px; }
  .ways li { padding: 0; }
  .ways h4 { font-size: 1.0625rem; }
  .ways .where { margin: 0; font-size: .875rem; white-space: nowrap; }
  .ways-note { margin-top: 18px; }
  .sleep-facts { gap: 10px; margin-top: 12px; font-size: 1rem; }
  .sleep-facts li:nth-child(2) { display: none; }

  /* lab values: one row that opens; then the note */
  .labs { gap: 0; margin-top: 36px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
  .labs-shot { display: none; }
  .after-foot { margin-top: 22px; padding-top: 0; border-top: 0; }
  .after-foot .btn, .plan-cta { display: none; }           /* the button is in the bar at the bottom of the screen */
  .signup-closed .after-foot .soon { display: none; }      /* … and without a button here, no line about it */
  .note { margin: 0; font-size: 1rem; }

  /* pricing: the membership's panel; the free version's list and the small print in rows that open */
  .pricing { padding: var(--sec) 0; }
  .price-grid { gap: 26px; }
  .price-head .lead { margin-top: 14px; font-size: 1.0625rem; }
  .plan-mem { padding: 22px 18px 20px; }
  .price-big { font-size: 4rem; }
  .price-guarantee { margin-top: 14px; padding: 10px 12px; }
  .plan-lead { margin-top: 18px; }
  .lines li { padding: 9px 0; font-size: .9375rem; }
  .plan-free .price-big { font-size: 2.5rem; }
  .free-fold { margin-top: 16px; }
  .free-fold .lines li { padding: 11px 0; font-size: 1rem; }
  .free-fold .lines li:last-child { border-bottom: 0; }
  /* the small print: the sentence about VAT stays; the rest opens under "Terms in short" (the row has nothing inside:
     it opens the text that follows it, so a computer keeps the whole small print as one paragraph) */
  .price-terms { margin-top: 16px; font-size: .9375rem; line-height: 1.5; }
  .terms-vat { display: block; }
  .terms-fold { margin-top: 12px; }
  .terms-rest { display: block; padding: 14px 0 0; }
  .terms-rest a { display: block; padding: 11px 0; }
  .price-terms:has(.terms-fold:not([open])) .terms-rest { display: none; }
  @supports not selector(:has(a)) { .terms-fold { display: none; } }   /* a browser that can't tell: the whole small print, no row */

  /* the library and your data */
  .library { padding: var(--sec) 0; }
  .lib-text > p { margin-top: 16px; }
  .lib-nums { grid-template-columns: repeat(2, minmax(0, max-content)); margin: 22px 0 6px; padding: 16px 0; }   /* a long label breaks; it never leaves the column */
  .lib-nums dd { font-size: 2rem; }
  .data { padding: var(--sec) 0; }
  .statements { margin-top: 22px; }
  .statements li { padding: 15px 0; font-size: 1.0625rem; }
  .fine { margin-top: 18px; font-size: 1rem; }
  .fine + .fine { margin-top: 6px; }
  .fine a { display: block; padding: 10px 0; }             /* a link on a line of its own: 44 px to tap */

  .faqs { padding: var(--sec) 0; }
  .faq { margin-top: 18px; }
  .faq summary { padding: 14px 40px 14px 0; font-size: 1.0625rem; }
  /* the last call: the line runs above the mark, clear of the words */
  .final { padding: 76px 0 44px; }
  .final-line { top: 18px; height: 46px; opacity: .5; }
  .final-in img { width: 48px; height: 48px; margin-bottom: 16px; }
  .site-foot { padding-top: 28px; padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); font-size: .875rem; }
  .foot-nav { grid-template-columns: 1fr 1fr; gap: 0 16px; margin: 8px 0 14px; }
  .foot-nav a { display: flex; line-height: 1.25; padding: 4px 0; }
  .disclaimer { margin-bottom: 10px; }
  .foot-small { font-size: .75rem; line-height: 1.5; margin-bottom: 6px; }
}

/* ---------- motion ----------
   Text never moves, and nothing travels across the page. A chart's line is drawn inside its own plot, from left to
   right, once; what belongs to it (the long-term line, the tagged days, the latest dot) then appears in place. Numbers
   count, bars are filled in place, pictures take turns by fading. Everything below applies only while the page's root
   element has the class "anim" (js/first.js sets it unless the device asks for reduced motion): without it, and without
   JavaScript, every graphic simply stands in its finished state. An entrance waits (paused, in its first frame) until
   js/motion.js marks its graphic "in". Only what every browser animates the same way is used: a clip of a plain box
   and opacity — never a part of a stretched drawing made larger or smaller (Firefox shows that with a jump). The one
   slide is the experiment's dot along its own scale. tools/motion-frames.mjs photographs every entrance in Firefox and
   Chromium. */
@keyframes mp-fade { from { opacity: 0; } }
@keyframes mp-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes mp-go-r { from { transform: translateX(-100%); } }
@keyframes mp-go-l { from { transform: translateX(100%); } }
.s-go { transform-box: fill-box; }

/* a chart: the score line is drawn; then the long-term line, the tagged days, the marked days and the latest dot appear */
.anim .gfx .draw-line { animation: mp-draw 1.1s both cubic-bezier(.4, 0, .2, 1); }
.anim .gfx :is(.lay-lt, .lay-last, .lay-marks, .lay-cols, .tags-svg) { animation: mp-fade .4s 1.1s both; }
/* sleep next to your scores: the sleep line is drawn right behind the score line, in the same plot */
.anim .gfx .draw-sleep { animation: mp-draw 1.1s .45s both cubic-bezier(.4, 0, .2, 1); }
.anim .chart-sleep :is(.lay-lt, .lay-last, .lay-marks, .lay-cols) { animation-delay: 1.55s; }
/* the offer: the 30 ticks of the 30 days fill one after another (js/motion.js gives each its turn) */
.anim .offer .o-ticks i { animation: mp-fade .15s both; }
/* the experiment: the dot slides along its own scale from "same" to its place; then its likely range appears */
.anim .exp .go-right { animation: mp-go-r .6s .1s both var(--ease); }
.anim .exp .go-left { animation: mp-go-l .6s .1s both var(--ease); }
.anim .exp .s-rng { animation: mp-fade .4s .5s both; }
.anim .gfx:not(.in) :is(.draw, .lay-lt, .lay-last, .lay-marks, .lay-cols, .tags-svg, .o-ticks i, .s-go, .s-rng) { animation-play-state: paused; }
/* the three results: each row waits, whole, until it comes into view itself (js/motion.js marks the row "in"); then
   its amount and its label line appear together and the two bars are filled from the left — a label never stands
   without its amount */
.anim .results :is(.res-big, .res-what) { animation: mp-fade .3s both; }
.anim .results .res-bars { animation: mp-draw .6s .1s both var(--ease); }
.anim .results .res:not(.in) :is(.res-big, .res-what, .res-bars) { animation-play-state: paused; }
/* the sheet slides in: from the right on a computer, from the bottom on a phone */
@keyframes mp-sheet-r { from { transform: translateX(100%); } }
@keyframes mp-sheet-u { from { transform: translateY(100%); } }
@keyframes mp-dim { from { opacity: 0; } }
.anim .sheet[open] { animation: mp-sheet-u .3s both var(--ease-sheet); }
.anim .sheet[open]::backdrop { animation: mp-dim .3s both ease; }
@media (min-width: 768px) { .anim .sheet[open] { animation-name: mp-sheet-r; } }

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