/* The site's one stylesheet. The look is the designer's handoff ("Light
   Studio" and "Dark Studio", 2026-09-24): its tokens, type scale and
   components, rebuilt here because the CSP's style-src 'self' refuses every
   inline style (review L11). One file serves both appearances: the dark
   handoff is a token swap, so it is a media query, not a second page.

   Rules this file keeps, and Web/validate.test.mjs checks:
   - it adds no text and hides no content, so the page reads the same with
     CSS off: no `content` but "", no display:none but the FAQ marker;
   - system fonts only, and nothing loaded from anywhere (no @import, no
     @font-face, no url()). */

:root {
  color-scheme: light dark;
  --paper: #F1F4F9;
  --ground: radial-gradient(1100px 760px at 42% 110%, rgba(116, 178, 232, .26), rgba(116, 178, 232, 0) 62%),
            linear-gradient(168deg, #E3EDF8 0%, #F1F4F9 50%, #F7F9FC 100%);
  --card: #FFFFFF;
  --ink: #4A5666;
  --ink2: #5B6675;
  /* The handoff's #626D7B measured 4.13–4.39:1 over the ground's fixed glow,
     at the bottom of the screen (review B1); this passes there. */
  --ink3: #576270;
  --line: rgba(74, 86, 102, .22);
  --line2: rgba(74, 86, 102, .38);
  --accent: #0F5DBD;
  --wordmark: #2C3542;
  --mark: #74B2E8;
  --mark-fold: #4A8FCE;
  /* The handoff's #A66A00 measured 3.8–4.5:1 for 10px text, under AA's 4.5
     (review L17); this passes on every ground. */
  --pro: #8A5800;
  /* The handoff's #1E8E34 measured 3.4–4.2:1 for 10px text, under AA's 4.5,
     as --pro did; this passes on every ground, the glow included. */
  --shipped: #187530;
  --slot: rgba(74, 86, 102, .06);
  --btn: #1D2228;
  --on-btn: #FFFFFF;
  --btn-line: rgba(255, 255, 255, .1);
  --heading-fill: linear-gradient(168deg, #2C3542 4%, #1B5490 54%, #2F7FE4 96%);
  --heading-glow: none;
  --card-shadow: 0 1px 2px rgba(74, 86, 102, .05), 0 10px 26px rgba(74, 86, 102, .06);
  /* The mock depicts Finder in light mode, so it stays light on the dark page. */
  --mock: #F6F6F7;
  --mock-ink: rgba(0, 0, 0, .85);
  --mock-dim: rgba(0, 0, 0, .38);
  --mock-line: rgba(0, 0, 0, .12);
  --mock-select: #007AFF;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Screen only: a dark page printed on white paper would be pale text. */
@media screen and (prefers-color-scheme: dark) {
  :root {
    --paper: #232427;
    --ground: radial-gradient(1000px 700px at 40% 110%, rgba(116, 178, 232, .17), rgba(116, 178, 232, 0) 60%),
              linear-gradient(168deg, #2A3341 0%, #232427 52%, #1F2023 100%);
    --card: #2C2E32;
    --ink: #E6EAF0;
    --ink2: rgba(230, 234, 240, .74);
    --ink3: rgba(230, 234, 240, .62);
    --line: rgba(255, 255, 255, .15);
    --line2: rgba(255, 255, 255, .28);
    --accent: #7FBBFF;
    --wordmark: #F2F4F7;
    --mark: #5E93C4;
    --mark-fold: #39678E;
    --pro: #E0A339;
    --shipped: #35C759;
    --slot: rgba(255, 255, 255, .06);
    --btn: #F2F4F7;
    --on-btn: #1B2027;
    --btn-line: rgba(0, 0, 0, .12);
    --heading-fill: linear-gradient(168deg, #FFFFFF 6%, #DCEAF8 38%, #74B2E8 96%);
    --heading-glow: 0 0 34px rgba(116, 178, 232, .2);
    --card-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(0, 0, 0, .35);
  }
}

/* ── Base ── */

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

html { background: var(--paper); }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  background-image: var(--ground);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, p, ul { margin: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.022em; line-height: 1.2; text-wrap: balance; }
h2 { text-shadow: var(--heading-glow); }
p { text-wrap: pretty; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* A link inside a sentence is underlined: colour alone does not set it apart
   from the text around it (WCAG 1.4.1). */
p a { text-decoration: underline; text-underline-offset: 2px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

img { max-width: 100%; height: auto; }

/* Every band shares one measure and one gutter. */
.masthead, main, .site-footer {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* ── Masthead and footer, on every page ── */

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  padding-block: 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--wordmark);
}
.brand:hover { text-decoration: none; }
.mark-body { fill: var(--mark); }
.mark-fold { fill: var(--mark-fold); }

.masthead-note { font-size: 12px; color: var(--ink3); }

.site-footer {
  padding-block: 72px 40px;
  font-size: 13px;
  color: var(--ink3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.site-footer p a { text-decoration: none; }
.site-footer p a:hover { text-decoration: underline; }

/* ── Home: the hero ── */

.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 44px;
  padding-top: 28px;
}

.hero-text {
  flex: 1.2 1 380px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* The text is painted by the background, and the background stops at the
   padding box. At this line height the last line's descenders hang below it,
   so the "g" of "right" lost its tail. The padding reaches them, and a margin
   short by the same amount keeps the layout where it was: here, and in .prose. */
h1 {
  --descender-room: .2em;
  font-size: clamp(36px, 5.6vw, 60px);
  line-height: 1.04;
  padding-bottom: var(--descender-room);
  margin-bottom: calc(-1 * var(--descender-room));
  background-image: var(--heading-fill);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* A hyphenated word stays on one line: "right-" ending a line of the heading
   reads as a break in the word. */
.nowrap { white-space: nowrap; }

.lede { max-width: 46ch; font-size: 16px; line-height: 1.6; color: var(--ink2); }

.store {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 6px 22px;
  border-radius: 12px;
  border: 1px solid var(--btn-line);
  background: var(--btn);
  color: var(--on-btn);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.store:hover { text-decoration: none; filter: brightness(1.12); }

/* Not a link, so it is a line of text, not a box shaped like a button: a
   thing that looks pressable and does nothing is the defect this product
   avoids everywhere else (review O9). */
.soon { font-size: 15px; font-weight: 600; color: var(--ink); }

.meta { font-size: 12.5px; line-height: 1.5; color: var(--ink3); }

/* The mock of the Finder menu: a picture drawn in HTML, after the handoff's. */
.shot {
  flex: 1 1 400px;
  container-type: inline-size;
  min-width: 0;
  /* No aspect ratio: the frame is as tall as the menu it holds. A 16:10 one
     held the height while the seven-row submenu ran out of the bottom. */
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--slot);
  display: flex;
}

.window {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 9px;
  background: var(--mock);
  color: var(--mock-ink);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .24), 0 0 0 .5px rgba(0, 0, 0, .2);
}

.titlebar {
  flex: 0 0 26px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding-inline: 10px 46px;
  border-bottom: .5px solid var(--mock-line);
  font-size: 10.5px;
  line-height: 1;
  color: var(--mock-dim);
}
.titlebar i { flex: 0 0 8px; height: 8px; border-radius: 50%; background: #FF5F57; }
.titlebar i + i { background: #FEBC2E; }
.titlebar i + i + i { background: #28C840; }
.titlebar span { flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Sized in em from the picture's own width, so the menu fills the window at
   any size rather than sitting small in a corner of a large one. The floor is
   low enough, and the minimum height tall enough, that the whole submenu
   still shows at 320 px (review B2). The height is the submenu's: its top,
   seven rows (six templates and Open Foldkin…), and a margin as wide as the
   root menu's above it. */
.desk {
  position: relative;
  flex: 1;
  min-height: 19.6em;
  font-size: clamp(9px, 3.6cqi, 15px);
}

.menu {
  width: 12.5em;
  padding: .27em;
  border-radius: .64em;
  background: var(--mock);
  color: var(--mock-ink);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .3), 0 0 0 .5px rgba(0, 0, 0, .2);
  line-height: 1.82em;
}
.desk .menu { position: absolute; }
.menu-root { left: 8%; top: 1.1em; }
/* Opens level with New File, the root menu's last row. */
.menu-sub { left: calc(8% + 12.2em); top: 5.2em; width: 11.6em; }

.row {
  display: flex;
  align-items: center;
  gap: .45em;
  height: 1.82em;
  padding-inline: .82em;
  border-radius: .36em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row svg { flex: 0 0 auto; }
/* Finder draws a menu image in a 16-point square beside 13-point text. */
.menu-icon { width: 1.2em; height: 1.2em; }
.row .chevron { margin-left: auto; }
.row-on { background: var(--mock-select); color: #FFFFFF; font-weight: 500; }
/* A caption: Finder draws it as a disabled row. */
.row-dim { color: var(--mock-dim); }
.menu hr { height: 1px; margin: .36em 1px; border: 0; background: var(--mock-line); }

/* ── Home: the sections below the hero ── */

.section { padding-top: 84px; }

/* The heading, with a line of small print on its baseline. */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding-bottom: 6px;
}
.section-head .section-title { margin-bottom: 0; }
.section-meta { font-size: 12px; color: var(--ink3); }

/* ── Home: what it does, one row per feature after the handoff ── */

.feature {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  padding-block: 28px;
  border-top: 1px solid var(--line);
}
.feature-text {
  flex: 1 1 330px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
}
.feature-text h3 { font-size: clamp(20px, 2.4vw, 25px); line-height: 1.2; }
.feature-text p { max-width: 52ch; font-size: 15px; line-height: 1.6; color: var(--ink2); }
.feature-text p + p { font-size: 14px; }
.feature-text .status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--shipped);
}
.feature-text .status-pro { color: var(--pro); }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.feature-picture { flex: 1 1 300px; min-width: 0; max-width: 430px; }
.feature-picture img { display: block; border-radius: 10px; border: 1px solid var(--line); }

/* The frame each drawing sits in. Its ratio is a floor: with no overflow
   rule, a drawing taller than 16:10 makes the frame taller instead of being
   cut, which a ratio alone did to the hero. Text runs in em from the frame's
   width, so a drawing keeps its proportions from 320 px up. */
.slot {
  container-type: inline-size;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--slot);
}
.slot > * { font-size: clamp(8px, 3.2cqi, 13px); }
.slot .menu { width: 11.6em; }

/* A window drawn inside a frame: Finder's, or the app's. */
.slot > .app { align-self: stretch; font-size: clamp(7px, 2.6cqi, 11px); }
.app {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: .75em;
  background: var(--mock);
  color: var(--mock-ink);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .24), 0 0 0 .5px rgba(0, 0, 0, .2);
  line-height: 1.3;
}
.app-bar {
  flex: 0 0 2.4em;
  display: flex;
  align-items: center;
  gap: .55em;
  padding-inline: .9em;
  border-bottom: .5px solid var(--mock-line);
}
.app-bar i { flex: 0 0 .75em; height: .75em; border-radius: 50%; background: #FF5F57; }
.app-bar i + i { background: #FEBC2E; }
.app-bar i + i + i { background: #28C840; }
.app-title { flex: 1; min-width: 0; padding-right: 2.6em; text-align: center; font-weight: 600; white-space: nowrap; }
.tool {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 1.75em;
  margin-left: -2.5em;
  border-radius: .45em;
}
.tool-on { background: rgba(0, 0, 0, .1); }
.app-desk { position: relative; flex: 1; }
.menu-drop { position: absolute; top: .25em; right: .5em; width: 11.6em; font-size: 1.1em; }

.files { padding: .45em .6em; }
.file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  height: 2em;
  padding-inline: .6em;
  border-radius: .4em;
  white-space: nowrap;
}
.file span { display: inline-flex; align-items: center; gap: .45em; min-width: 0; overflow: hidden; }
.file span + span { flex: 0 0 auto; color: var(--mock-dim); }
.file-head { border-bottom: .5px solid var(--mock-line); border-radius: 0; font-size: .9em; font-weight: 600; color: var(--mock-dim); }
.file-on { background: var(--mock-select); color: #FFFFFF; }
.file-on span + span { color: rgba(255, 255, 255, .85); }

.app-split { flex: 1; display: flex; min-height: 0; }
.side {
  flex: 0 0 38%;
  min-width: 0;
  padding: .45em .4em;
  border-right: .5px solid var(--mock-line);
  background: rgba(0, 0, 0, .035);
}
.side-row {
  display: flex;
  align-items: center;
  gap: .45em;
  height: 1.9em;
  padding-inline: .5em;
  border-radius: .4em;
  white-space: nowrap;
}
.side-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.side-row .side-ext { margin-left: auto; flex: 0 0 auto; font-size: .9em; color: var(--mock-dim); }
.side-on { background: var(--mock-select); color: #FFFFFF; }
.side-on .side-ext { color: rgba(255, 255, 255, .8); }
.side-head { margin: .6em .5em .2em; font-size: .85em; font-weight: 700; color: var(--mock-dim); }
.pane { flex: 1; min-width: 0; padding: .3em .9em .6em; background: #FFFFFF; }
.pane-title { margin: .5em 0 .3em; font-size: .9em; font-weight: 600; }
.pane-box { padding-inline: .6em; border-radius: .5em; background: var(--mock); }
.pane-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8em;
  height: 1.95em;
  white-space: nowrap;
}
.pane-row + .pane-row { border-top: .5px solid var(--mock-line); }
.pane-row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pane-row span:first-child { flex: 0 0 auto; color: var(--mock-dim); }
.pane-text { padding-block: .4em; font: .9em/1.6 var(--mono); }
/* The Show in New File menu switch, on: a knob at the trailing end. */
.switch {
  flex: 0 0 auto;
  display: inline-flex;
  justify-content: flex-end;
  width: 2.1em;
  padding: .14em;
  border-radius: 999px;
  background: var(--mock-select);
}
.switch span { width: .92em; height: .92em; border-radius: 50%; background: #FFFFFF; box-shadow: 0 .05em .15em rgba(0, 0, 0, .25); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 14px;
}
.cards-three { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--card-shadow);
}
.card h2 { font-size: clamp(19px, 2.2vw, 22px); line-height: 1.25; }
.card p { max-width: 60ch; font-size: 15px; line-height: 1.6; color: var(--ink2); }
.card p + p { font-size: 14px; }

.chip {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding-inline: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--slot);
  font: 11.5px/1 var(--mono);
  color: var(--ink2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--slot);
  color: var(--accent);
}
.card-trust h2 { font-size: 17px; }
.card-trust p { font-size: 14px; }

/* ── Home: the built-in templates ── */

.section-lede { max-width: 66ch; margin-bottom: 22px; font-size: 15px; color: var(--ink2); }

.card-group h3 { font-size: 17px; }

/* The menu title, then the file it makes, right-aligned on the same row. One
   line height for both cells brings the 15 px and 12.5 px text close to one
   baseline; the grid puts both cells' rules at the row's top. */
.template-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0;
  line-height: 24px;
}
.template-list dt, .template-list dd { padding-block: 6px; border-top: 1px solid var(--line); }
.template-list dt:first-of-type, .template-list dd:first-of-type { padding-top: 0; border-top: 0; }
.template-list dt { font-size: 15px; color: var(--ink); }
.template-list dd { margin: 0; padding-left: 14px; font-family: var(--mono); font-size: 12.5px; color: var(--ink3); text-align: right; }

/* Drawn as an open slot rather than a filled card: the one box that is the
   visitor's to fill. */
.card-own { border-style: dashed; background: var(--slot); box-shadow: none; }

.later ul { padding-left: 1.2em; color: var(--ink2); }
.later li + li { margin-top: 8px; }
.later strong { color: var(--ink); }

/* ── Questions, on the home and support pages ── */

.section-title { margin-bottom: 20px; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.08; }

details { border-top: 1px solid var(--line); }
details:last-of-type { border-bottom: 1px solid var(--line); }

summary {
  position: relative;
  padding: 16px 30px 16px 0;
  font-size: 15.5px;
  line-height: 1.45;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary:hover { color: var(--accent); }

/* A plus that becomes a minus: two bars, the upright one fading out. */
summary::before, summary::after {
  content: "";
  position: absolute;
  right: 0;
  background: var(--ink3);
}
summary::before { top: 27px; width: 14px; height: 1.6px; }
summary::after { top: 20.2px; right: 6.2px; width: 1.6px; height: 14px; }
details[open] summary::after { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  summary::after { transition: opacity .15s ease; }
}

details p { max-width: 66ch; padding-bottom: 18px; font-size: 14.5px; line-height: 1.65; color: var(--ink2); }

/* ── Privacy, support and the 404: one readable column ── */

.prose { padding-top: 28px; }
.prose > * { max-width: 66ch; }
.prose h1 { font-size: clamp(34px, 5vw, 52px); margin-bottom: calc(24px - var(--descender-room)); }
.prose h2 { margin: 36px 0 10px; font-size: clamp(20px, 2.4vw, 25px); }
.prose p { color: var(--ink2); }
.prose p + p { margin-top: 14px; }
.prose .faq { padding-top: 48px; }
.prose .section-title { margin-top: 0; }

/* ── Print ── */

/* Browsers print no backgrounds by default, and the heading's text is painted
   by its background, so on paper it would vanish (review B3). */
@media print {
  h1 { background: none; color: var(--ink); -webkit-text-fill-color: currentColor; }
  /* Shadows print as grey slabs, and the selected row's white text would sit
     on a background that is not printed. */
  .shot, .window, .menu, .card, .app { box-shadow: none; }
  .row-on, .file-on, .side-on, .file-on span + span, .side-on .side-ext { color: inherit; font-weight: 600; }
}