/* The landing page of Sunday. One file, no build step. The page has a light theme only. */

:root {
  color-scheme: light;
  --bg: #fff;
  --fg: #111;
  --sub: #444;
  --mut: #666;
  --line: #0000001f;
  --pan: #eee;
  --win-shadow: 0 0 0 1px #0000002b, 0 40px 90px #0000004d, 0 8px 24px #00000026;
  --sans: "Schibsted Grotesk", system-ui, sans-serif;
  --serif: "Young Serif", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --pad: clamp(20px, 3.3vw, 40px);
  --gut: clamp(10px, 1.7vw, 20px);
  --r: clamp(18px, 2.5vw, 30px);
  --max: 1440px;
  --gap: clamp(52px, 6.2vw, 88px);
  /* Lets a closed answer animate to its own height, where the browser can do that. */
  interpolate-size: allow-keywords;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, pre, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img, canvas { display: block; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 4px; }

/* `clip` and not `hidden`: a hidden box becomes a scroll container, and then the sticky header and the scroll animations stop. */
.page { max-width: var(--max); margin: 0 auto; overflow-x: clip; }

/* Wordmark. The paint blot is the period. */
.wm { display: inline-flex; align-items: flex-end; font: 400 38px/1 var(--serif); letter-spacing: -.02em; }
.wm img { height: .36em; width: auto; margin: 0 0 .05em .04em; }

/* Header: links on the left, the wordmark in the center, actions on the right.
   It stays at the top. Its height never changes, so the page under it does not move when its state changes.
   After the page scrolls, it gets a ground that lets a part of the page show through. */
.nav { position: sticky; top: 0; z-index: 20; transition: background-color .3s, box-shadow .3s; }
.nav-in { max-width: var(--max); height: 72px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--pad); font-size: 15px; font-weight: 500; }
.nav .wm { transform-origin: 50% 60%; transition: scale .35s var(--ease); }
.nav.is-scrolled { background: #ffffffd4; -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: 0 1px 0 var(--line); }
.nav.is-scrolled .wm { scale: .84; }
.nav-links { display: flex; gap: 28px; }
.nav-acts { display: flex; gap: 22px; justify-content: flex-end; align-items: center; }
.nav-links a, .nav-signin { transition: opacity .15s; }
.nav-links a:hover, .nav-signin:hover { opacity: .6; }

.btn { display: inline-block; background: var(--fg); color: var(--bg); padding: 9px 17px; border: 0; border-radius: 99px; font: 600 15px/1.35 var(--sans); cursor: pointer; white-space: nowrap; transition: scale .15s var(--ease), opacity .15s; }
.btn:hover { opacity: .82; }
.btn:active { scale: .97; }
.btn.big { padding: 14px 26px; font-size: 17px; }
.btn.ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg); }
.btn.ghost:hover { opacity: 1; background: var(--line); }

/* Hero */
.hero { text-align: center; padding: clamp(28px, 3.6vw, 48px) var(--pad) clamp(32px, 3.8vw, 48px); }
h1 { font-weight: 500; font-size: clamp(48px, 8.4vw, 120px); line-height: .98; letter-spacing: -.05em; }
h1 span { display: inline-block; }
.hero p { font-size: clamp(18px, 1.7vw, 22px); line-height: 1.4; max-width: 24em; margin: clamp(18px, 2.1vw, 26px) auto clamp(22px, 2.4vw, 30px); color: var(--sub); text-wrap: balance; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; }

/* The early access form: one field and one button in one frame. The line under it is also the place for the result. */
.ea { max-width: 470px; }
.hero .ea { margin: 0 auto; }
.ea-row { display: flex; padding: 5px; border-radius: 99px; background: #eff0f0; transition: box-shadow .15s, background-color .15s; }
.ea-row:hover { background: #e8e9e9; }
.ea-row:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--fg); }
.ea input[type=email] { flex: 1; min-width: 0; height: 46px; border: 0; border-radius: 99px; background: none; padding: 0 12px 0 20px; font: 500 17px/1.3 var(--sans); letter-spacing: -.01em; color: var(--fg); outline: 0; }
.ea input::placeholder { color: #767676; }
.ea .btn.big { height: 46px; padding: 0 22px; font-size: 16px; }
.ea-note { font-size: 14.5px; line-height: 1.4; color: var(--mut); margin: 10px 0 0 20px; }
.hero .ea-note { margin: 10px auto 0; max-width: none; font-size: 14.5px; line-height: 1.4; color: var(--mut); text-wrap: wrap; }
.ea.is-done .ea-row { display: none; }
.ea.is-done .ea-note { font-size: 18px; font-weight: 500; color: var(--fg); margin: 0; }
.ea.is-error .ea-note { color: #b3261e; }

/* A panel of living paint. A window of the product sits on it. */
.pan { position: relative; margin: 0 var(--gut); border-radius: var(--r); overflow: clip; background: var(--pan); view-timeline-name: --pan; }
.paint { position: absolute; inset: 0; width: 100%; height: 100%; }
img.paint { object-fit: cover; scale: 2.6; }
.win { position: absolute; border-radius: 14px; overflow: hidden; background: #fff; color: #111; box-shadow: var(--win-shadow); }

/* The hero window is a live page. Its sizes are in em, and one em is a fixed part of the width of the window,
   so the window keeps its proportions at each width. site.js plays the steps. */
.stage { padding: clamp(18px, 3.8vw, 52px) 0; }
.doc { position: relative; width: min(1140px, 90%); margin: 0 auto; aspect-ratio: 1140 / 600; container-type: inline-size; }
.doc-in { height: 100%; display: grid; grid-template-rows: auto 1fr; font-size: calc(100cqw / 62); line-height: 1.3; transition: opacity .35s; }
.doc.is-reset .doc-main { opacity: 0; }
.doc-main { display: grid; grid-template-columns: 1fr 18.5em; min-height: 0; transition: opacity .35s; }
.doc-bar { display: flex; justify-content: space-between; align-items: center; padding: .85em 1.3em; border-bottom: 1px solid #00000017; font-size: .9em; color: #777; }
.doc-path i { font-style: normal; margin: 0 .5em; opacity: .5; }
.doc-path b { color: #111; font-weight: 600; }
.who { display: flex; gap: 1.2em; }
.who li { display: flex; align-items: center; gap: .42em; font-weight: 600; color: #111; opacity: .28; transition: opacity .4s; }
.who li.is-on { opacity: 1; }
.who li::before, .note b::before { content: ""; width: .72em; height: .72em; border-radius: 50%; background: var(--c); }
.sheet { padding: 2.4em 3em 0; }
.sheet-h { font-size: 2.55em; font-weight: 600; line-height: 1.05; letter-spacing: -.04em; max-width: 13em; }
.sheet-p { font-size: 1.14em; line-height: 1.5; color: #333; margin-top: 1.05em; max-width: 34em; min-height: 4.5em; }
.tag { position: absolute; left: -2px; bottom: 100%; margin-bottom: 2px; font: 600 .78em/1 var(--sans); font-style: normal; color: #fff; background: var(--c); padding: .4em .6em .45em; border-radius: .4em .4em .4em 0; white-space: nowrap; opacity: 0; transition: opacity .25s; }
.caret { position: relative; display: inline-block; width: 2px; height: 1.15em; margin-left: 1px; vertical-align: -.2em; background: var(--c); animation: blink 1.1s steps(1) infinite; }
.caret .tag { opacity: 1; left: 0; bottom: auto; top: 100%; margin: 2px 0 0; border-radius: 0 .4em .4em .4em; font-size: .68em; }
.chart { position: relative; margin-top: 1.5em; padding: .7em 1em; border-radius: .3em; max-width: 39em; opacity: 0; transition: opacity .3s, box-shadow .3s; }
.chart.is-on { opacity: 1; }
.is-sel { box-shadow: 0 0 0 2px var(--c); }
.is-sel > .tag { opacity: 1; }
.row { display: grid; grid-template-columns: 7.6em 1fr 3.4em 3em; align-items: center; gap: 1em; height: 2.7em; font-size: 1.02em; opacity: 0; transition: opacity .4s; }
.row.is-on { opacity: 1; }
.row > span:nth-child(n+3) { font-variant-numeric: tabular-nums; text-align: right; }
.row > span:last-child { color: #777; }
.row.hot { font-weight: 650; }
.bar { height: 1.45em; width: 0; border-radius: .22em; background: #d9e2ee; transition: width 1s var(--ease); }
.row.is-on .bar { width: var(--w); }
.row.hot .bar { background: #1f5fae; }
.fix { position: relative; border-radius: .2em; padding: .15em .25em; margin: -.15em -.25em; transition: box-shadow .3s; }
.fix .tag { left: auto; right: -2px; border-radius: .4em .4em 0 .4em; font-weight: 600; }
.notes { border-left: 1px solid #00000017; background: #f7f7f6; padding: 1.5em 1.3em; }
.notes-h { font-size: .9em; font-weight: 600; color: #777; }
.note { margin-top: 1.25em; opacity: 0; translate: 0 .5em; transition: opacity .4s, translate .5s var(--ease); }
.note.is-on { opacity: 1; translate: 0 0; }
.note b { display: flex; align-items: center; gap: .42em; font-size: .9em; font-weight: 700; }
.note p { font-size: 1em; line-height: 1.38; color: #333; margin-top: .25em; }
@keyframes blink { 50% { background: transparent; } }

/* The hero panel: the library behind, and one open page in front. The sizes follow the width of the panel. */
.two { aspect-ratio: 1400 / 860; container-type: inline-size; }
.lib2 { left: 4.2%; top: 6.5%; width: 71%; aspect-ratio: 1186 / 742; background: #fcfbf8; border-radius: 1cqw; }
.lib2 iframe { display: block; border: 0; width: 1186px; height: 742px; transform-origin: 0 0; transform: scale(var(--s, .8)); pointer-events: none; }
.two .doc { position: absolute; right: 4.2%; bottom: 6.5%; width: 66%; margin: 0; border-radius: 1cqw; box-shadow: 0 0 0 1px #0000002b, 0 40px 90px #00000061, 0 8px 24px #00000033; }

/* Section headings: the heading on the left, and its text on the right, on one base line. */
.pt { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(20px, 4vw, 60px); align-items: end; padding: var(--gap) var(--pad) clamp(24px, 2.8vw, 36px); }
h2 { font-weight: 500; font-size: clamp(36px, 5.2vw, 72px); line-height: 1.02; letter-spacing: -.045em; max-width: 14em; }
.pt p { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.42; color: var(--sub); max-width: 26em; padding-bottom: .35em; }

/* Why Sunday: three reasons. Each reason is one row: its name with a blot of paint, what other products do, and what Sunday does.
   The page has no grid of products and marks. A reader compares two columns only. */
.why { padding: var(--gap) var(--pad) 0; }
.why table { width: 100%; table-layout: fixed; border-collapse: collapse; margin-top: clamp(20px, 2.4vw, 32px); }
.why th, .why td { text-align: left; vertical-align: middle; padding: clamp(12px, 1.25vw, 18px) clamp(18px, 3vw, 44px) clamp(12px, 1.25vw, 18px) 0; }
.why thead td { width: 33%; }
.why thead th, .why thead td { padding-top: 0; padding-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--mut); }
.why thead th:last-child { color: var(--fg); }
.why tbody tr { border-top: 1px solid var(--line); }
.why tbody tr:first-child { border-top: 2px solid var(--fg); }
.why tbody th { display: flex; align-items: center; gap: clamp(10px, 1.2vw, 16px); font-weight: 500; font-size: clamp(21px, 2vw, 28px); line-height: 1.1; letter-spacing: -.035em; }
.why tbody th span { max-width: 13em; text-wrap: balance; }
.why tbody img { flex: none; width: clamp(44px, 4.4vw, 62px); height: auto; margin-left: clamp(-8px, -.5vw, -4px); mix-blend-mode: multiply; }
.why tbody td { font-size: clamp(14px, 1.05vw, 15px); line-height: 1.42; color: var(--mut); }
/* The Elsewhere cell: a cross, the limit in a few words, and then the types of products. A fast reader gets the cross and the limit. */
.why tbody td b { position: relative; display: block; padding-left: 1.45em; font-weight: 600; font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.2; letter-spacing: -.02em; color: #4f4f4f; margin-bottom: 5px; }
.why tbody td b::before, .why tbody td b::after { content: ""; position: absolute; left: .08em; top: .56em; width: .86em; height: 2.5px; border-radius: 2px; background: #c2452f; rotate: 45deg; }
.why tbody td b::after { rotate: -45deg; }
/* The products that have the limit: a row of logos with names. */
.why tbody td ul { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-left: 1.72em; }
.why tbody td li { display: flex; align-items: center; gap: 6px; font-weight: 500; color: #555; white-space: nowrap; }
.why tbody td li img { flex: none; width: 16px; height: 16px; margin: 0; border-radius: 3px; mix-blend-mode: normal; }
.why tbody td:last-child { font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.36; font-weight: 500; letter-spacing: -.015em; color: var(--fg); padding-right: 0; }

/* Formats: one panel of paint with the same page three times. */
.fmt { padding: clamp(22px, 4.4vw, 62px) clamp(14px, 3.4vw, 48px) clamp(16px, 2.6vw, 34px); }
.fmt-row { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.8vw, 26px); align-items: start; }
.fmt figure { margin: 0; }
.fmt figure:nth-child(2) { margin-top: clamp(14px, 3vw, 44px); }
.fmt .win { position: static; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0; border-radius: 10px; }
.fmt figcaption { font-size: clamp(15px, 1.5vw, 19px); font-weight: 600; letter-spacing: -.02em; color: #fff; text-shadow: 0 1px 14px #00000080; margin-top: clamp(12px, 1.5vw, 20px); }

/* The drive: its functions as a list, and the real library code in a frame. site.js sets the scale of the frame. */
.drive { display: grid; grid-template-columns: .74fr 1.5fr; gap: clamp(22px, 3.4vw, 48px); align-items: center; margin: var(--gap) var(--gut) 0; padding: clamp(24px, 4.2vw, 60px) clamp(18px, 3.4vw, 48px); border-radius: var(--r); background: #f0f1f1; }
.drive h2 { font-size: clamp(34px, 4.1vw, 58px); max-width: 7em; }
.drive dl { margin: clamp(22px, 2.6vw, 36px) 0 0; display: grid; gap: 15px; }
.drive dt { font-size: 17px; font-weight: 650; letter-spacing: -.015em; }
.drive dd { margin: 2px 0 0; font-size: 16px; line-height: 1.42; color: var(--sub); max-width: 22em; }
.lib { position: relative; width: 100%; aspect-ratio: 1186 / 742; background: #fcfbf8; box-shadow: 0 0 0 1px #00000024, 0 24px 60px #00000026; }
.lib iframe { display: block; border: 0; width: 1186px; height: 742px; transform-origin: 0 0; transform: scale(var(--s, .7)); }
/* The pointer of the demo. site.js moves it. It shows only while the demo plays. */
.demo-cur { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; opacity: 0; translate: 420px 320px; filter: drop-shadow(0 2px 3px #0000004d); transition: translate .7s var(--ease), opacity .3s, scale .15s var(--ease); }
.demo-cur.is-on { opacity: 1; }
.demo-cur.is-down { scale: .86; }

/* Connect an agent: one window on a full panel of paint. The text and the logos are on the left of the window, and the prompt is on the right.
   The window has one state, so nothing in the section moves. */
.con { margin-top: var(--gap); padding: clamp(20px, 4.6vw, 64px) 0; }
.setup { position: relative; width: min(1120px, 90%); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(20px, 3.4vw, 48px); align-items: center; padding: clamp(20px, 3.2vw, 44px); border-radius: 18px; }
.setup h2 { font-size: clamp(30px, 3.5vw, 48px); }
.setup-text p { font-size: clamp(16px, 1.35vw, 18px); line-height: 1.45; color: #444; max-width: 25em; margin-top: 18px; }
/* Ten logos in one row. The tiles get smaller when the column is narrow, so the row never wraps. */
.dock { display: grid; grid-template-columns: repeat(10, minmax(0, 36px)); gap: 6px; margin-top: 26px; }
.dock img { width: 56%; height: auto; }
.dock li { display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px #0000001f, 0 2px 5px #0000001a; }
.prompt { background: #f3f3f1; border-radius: 12px; padding: clamp(16px, 2vw, 24px); }
.prompt pre { font: 500 clamp(15px, 1.25vw, 17px)/1.45 var(--sans); letter-spacing: -.012em; white-space: pre-wrap; overflow-wrap: anywhere; }
.prompt .btn { margin-top: 20px; min-width: 8.4em; text-align: center; }

/* Questions: a closed list. One answer is open at a time. A living blot sits under the heading. */
.faq { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(20px, 3.4vw, 44px); padding: var(--gap) var(--pad) 0; }
.faq-head { position: sticky; top: 96px; align-self: start; }
.faq-blot { width: min(440px, 96%); aspect-ratio: 1; margin: -14px 0 0 -9%; mix-blend-mode: multiply; }
.faq-list { border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 66px; padding: 14px 0; font-size: clamp(18px, 1.75vw, 21px); font-weight: 500; letter-spacing: -.02em; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline-offset: -2px; }
/* The plus. Its upright bar turns flat when the answer opens. */
.faq summary i { position: relative; flex: none; width: 14px; height: 14px; opacity: .45; transition: opacity .15s; }
.faq summary:hover i { opacity: 1; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 1px; background: currentColor; transition: rotate .36s var(--ease), opacity .36s; }
.faq summary i::after { rotate: 90deg; }
.faq details[open] summary i::after { rotate: 0deg; opacity: 0; }
.faq details p { font-size: clamp(16px, 1.45vw, 17.5px); line-height: 1.5; color: var(--sub); max-width: 32em; padding: 0 40px 24px 0; }
@supports (interpolate-size: allow-keywords) {
  .faq details::details-content { block-size: 0; overflow: clip; opacity: 0; transition: block-size .36s var(--ease), opacity .3s .06s, content-visibility .36s allow-discrete; }
  .faq details[open]::details-content { block-size: auto; opacity: 1; }
}

/* The footer is the close of the page: the last line and its button, the links, and the wordmark as wide as the page.
   The period of the wordmark is a living blot. The wordmark shows one time here. */
.end { margin-top: var(--gap); padding: clamp(36px, 4.4vw, 60px) var(--pad) 26px; border-top: 1px solid var(--line); overflow: clip; }
.end-top { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(30px, 6vw, 96px); align-items: start; font-size: 15px; color: var(--mut); }
.end-cta > p { font-weight: 500; font-size: clamp(28px, 3.3vw, 46px); line-height: 1.05; letter-spacing: -.04em; color: var(--fg); max-width: 12em; margin-bottom: 26px; }
/* Each group of links is one column. A new group, for example Compare, gets its own column with no change here. */
.end-navs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 24px; padding-top: 8px; }
.end b { display: block; color: var(--fg); font-weight: 600; margin-bottom: 13px; }
.end nav a { display: block; margin-bottom: 9px; transition: opacity .15s; }
.end nav a:hover { opacity: .6; }
/* The blot is the period of the wordmark: it sits on the base line, after the last letter. */
.mark { font: 400 clamp(72px, 21vw, 306px)/1.16 var(--serif); letter-spacing: -.035em; margin: clamp(8px, 1.6vw, 24px) 0 0 -.02em; white-space: nowrap; }
.mark canvas, .mark .living-blot-still { display: inline-block; vertical-align: baseline; width: .46em; height: .46em; margin: 0 0 -.08em 0; mix-blend-mode: multiply; }
.end-base { font-size: 14px; color: var(--mut); }

/* Motion. Three moments, and no fade on each section:
   1. The words of the headline arrive when the page loads.
   2. A panel opens and its window settles in the first 460 px after the panel comes into view. The scroll position is the clock.
   3. The demo in the hero window (site.js). */
@media (prefers-reduced-motion: no-preference) {
  h1 span { animation: word .8s cubic-bezier(.25, .46, .45, .94) both; animation-delay: calc(var(--i) * 80ms + 60ms); }
  @keyframes word { from { opacity: 0; translate: 0 8px; filter: blur(8px); } }

  @supports (animation-timeline: view()) {
    .pan { animation: pan-open linear both; animation-timeline: view(); animation-range: entry 0px entry 340px; }
    .pan > .win, .fmt-row { animation: win-settle linear both; animation-timeline: --pan; animation-range: entry 60px entry 460px; }
    @keyframes pan-open { from { clip-path: inset(5% 3.5% round 44px); } to { clip-path: inset(0 round var(--r)); } }
    @keyframes win-settle { from { scale: .93; translate: 0 40px; } to { scale: 1; translate: 0 0; } }
  }
}

/* The hero on a wide screen: the text and the form are one row, and the row has the width of the headline.
   Each size follows the width of the screen, as the headline does, so the block keeps its proportions. */
@media (min-width: 1240px) {
  .hero { display: grid; grid-template-columns: 1fr auto; column-gap: min(2.8vw, 40px); align-items: start; width: fit-content; margin: 0 auto; text-align: left; }
  h1 { grid-column: 1 / -1; white-space: nowrap; }
  /* A width of 0 keeps the text out of the width of the block, so the headline alone sets that width. */
  .hero p { margin: min(2.1vw, 30px) 0 0; width: 0; min-width: 100%; max-width: none; font-size: min(1.45vw, 21px); text-wrap: balance; }
  .hero .ea { margin: min(2.1vw, 30px) 0 0; width: min(30.5vw, 440px); }
  .hero .ea-note { margin: 10px 0 0 min(1.4vw, 20px); font-size: min(1.02vw, 14.5px); white-space: nowrap; }
}

@media (max-width: 860px) {
  .nav-in { grid-template-columns: auto 1fr; }
  .nav-links { display: none; }
  .wm { font-size: 30px; }
  .pt, .faq, .setup, .drive { grid-template-columns: 1fr; }
  .pt { gap: 14px; }
  .drive dl { grid-template-columns: 1fr 1fr; gap: 18px 22px; }
  .drive h2 { max-width: none; }
  .setup { width: 92%; }
  .end-top { grid-template-columns: 1fr; }
  .faq-head { position: static; display: flex; align-items: flex-end; justify-content: space-between; }
  .faq-blot { width: 150px; margin: 0 0 -20px; }
}

@media (max-width: 560px) {
  .nav .btn { padding: 8px 13px; font-size: 14px; }
  /* The window gets a larger em and loses the comments, so the page stays readable. */
  .doc { width: 94%; aspect-ratio: 10 / 8.3; }
  .two { aspect-ratio: 10 / 11.6; }
  .lib2 { left: 3%; top: 3.5%; width: 86%; }
  .two .doc { right: 3%; bottom: 3.5%; width: 88%; }
  .doc-in { font-size: calc(100cqw / 31); }
  .doc-main { grid-template-columns: 1fr; }
  .notes, .who li:first-child { display: none; }
  /* The name tag of the caret opens to the left, so the edge of the window does not cut it. */
  .caret .tag { left: auto; right: 0; border-radius: .4em 0 .4em .4em; }
  .who { gap: .8em; }
  .doc-path { display: none; }
  .sheet { padding: 1.6em 1.4em 0; }
  .sheet-h { font-size: 1.9em; }
  .row { grid-template-columns: 6.6em 1fr 3em 2.8em; gap: .6em; font-size: .92em; }
  .chart { padding: .5em .6em; }
  /* The reasons on a phone: each row becomes a block, and each text gets its column name. */
  .why thead { display: none; }
  .why table, .why tbody, .why tr, .why tbody th, .why td { display: block; }
  .why tbody th { display: flex; padding: 16px 0 4px; font-size: 22px; }
  .why tbody td, .why tbody td:last-child { padding: 6px 0; font-size: 16px; }
  .why tbody td:last-child { padding-bottom: 18px; font-size: 17px; }
  .why tbody td ul { padding-left: 0; }
  .why tbody td::before { content: "Elsewhere"; display: block; font-size: 13px; font-weight: 600; color: var(--mut); margin-bottom: 2px; letter-spacing: 0; }
  .why tbody td:last-child::before { content: "In Sunday"; color: var(--fg); }
  .ea .btn.big { padding: 0 16px; font-size: 15px; }
  .ea input[type=email] { padding-left: 16px; font-size: 16px; }
  .fmt-row { grid-template-columns: 1fr; gap: 22px; }
  .fmt figure:nth-child(2) { margin-top: 0; }
  .drive dl { grid-template-columns: 1fr; }
  .faq details p { padding-right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
    .caret { animation: none; }
  .btn, .nav, .nav .wm, .demo-cur, .bar, .note, .row, .chart, .who li, .faq summary i::before, .faq summary i::after { transition: none; }
  .faq details::details-content { transition: none; }
}