/* Sumi — shared styles for the marketing, privacy and support pages.
   One stylesheet, no build step, no external requests.

   Ink and paper, the same two materials as the icon: a white sheet, black
   ink, and vermilion — the colour of the seal a brush painting is signed with
   — for the few marks that have to carry further than the text. The blue this
   page used to be built on was the blue of the old icon, and the icon is not
   blue any more.

   The paper is white rather than cream. Warm paper is the right ground for an
   icon, which is an object; a page is read, and on a screen a tinted sheet
   reads as a colour choice rather than as paper. */

:root {
  --ink:        #0e0e10;
  --ink-soft:   #45454a;
  --ink-faint:  #7c7c82;
  --paper:      #ffffff;
  /* Cards sit on white, so they are separated by a rule rather than by a
     shade — a second near-white would only be visible as a smudge. */
  --card:       #ffffff;
  --line:       #e4e4e2;
  /* Shu, the seal red. Used the way a seal is: once or twice a page, never
     as a field of colour. */
  --accent:     #b3422a;
  --accent-ink: #fffdf9;
  --mark:       #f7ded2;
  --mark-ink:   #55200f;
  --code-bg:    #f3f3f1;
  --shadow:     0 1px 2px rgba(0, 0, 0, .05), 0 12px 32px rgba(0, 0, 0, .08);
  --radius:     14px;
  --measure:    34rem;

  /* Paper for the prose, and the interface's own face for the parts that are
     controls rather than reading: navigation, buttons, table headings,
     captions. A serif everywhere would set the nav like a footnote; a sans
     everywhere would make the page a product tour rather than a page. */
  --serif: ui-serif, "New York", "Iowan Old Style", Charter, "Palatino Linotype",
           Palatino, "Book Antiqua", Georgia, serif;
  /* One line on the site is set in a brush, for the same reason the icon is
     drawn with one. SignPainter is the only script on Apple's systems with a
     brush's stroke modulation — thick on the pull, thin on the lift; Snell and
     Savoye are pens, and Brush Script MT is the closest thing Windows has. It
     is display type and nothing else: everything that has to be *read* stays
     in the serif above. */
  --brush: "SignPainter", "Brush Script MT", "Snell Roundhand", "Segoe Script",
           cursive;
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;

  color-scheme: light dark;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* The night side of the same two materials: the ink is the paper now, and the
   sheet is the ink. Nothing is inverted mechanically — pure black under pure
   white is a screen, not a page.

   The values are named once here and assigned twice below: once for a reader
   whose system says dark and who has not chosen otherwise, and once for a
   reader who pressed the button in the header. Two assignments are unavoidable
   in plain CSS; two copies of the colours are not, and it is the colours that
   would drift. */
:root {
  --night-ink:        #f2f2f0;
  --night-ink-soft:   #b2b2b0;
  --night-ink-faint:  #83837f;
  --night-paper:      #121214;
  --night-card:       #1a1a1d;
  --night-line:       #2b2b2f;
  --night-accent:     #e0755c;
  --night-accent-ink: #17130f;
  --night-mark:       #4b2417;
  --night-mark-ink:   #ffd8c9;
  --night-code-bg:    #232128;
  --night-shadow:     0 1px 2px rgba(0, 0, 0, .34), 0 12px 32px rgba(0, 0, 0, .4);
}

@media (prefers-color-scheme: dark) {
  /* `:not([data-theme="light"])` is what lets the button win over the system:
     without it, a reader on a dark system who asks for the light page is
     handed the dark one anyway. */
  :root:not([data-theme="light"]) {
    --ink:        var(--night-ink);
    --ink-soft:   var(--night-ink-soft);
    --ink-faint:  var(--night-ink-faint);
    --paper:      var(--night-paper);
    --card:       var(--night-card);
    --line:       var(--night-line);
    --accent:     var(--night-accent);
    --accent-ink: var(--night-accent-ink);
    --mark:       var(--night-mark);
    --mark-ink:   var(--night-mark-ink);
    --code-bg:    var(--night-code-bg);
    --shadow:     var(--night-shadow);
  }
}

:root[data-theme="dark"] {
  --ink:        var(--night-ink);
  --ink-soft:   var(--night-ink-soft);
  --ink-faint:  var(--night-ink-faint);
  --paper:      var(--night-paper);
  --card:       var(--night-card);
  --line:       var(--night-line);
  --accent:     var(--night-accent);
  --accent-ink: var(--night-accent-ink);
  --mark:       var(--night-mark);
  --mark-ink:   var(--night-mark-ink);
  --code-bg:    var(--night-code-bg);
  --shadow:     var(--night-shadow);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  /* Flat white. The wash that used to be here was doing the work of paper
     grain, and on a sheet this clean it only showed up as a cloud. */
  background: var(--paper);
  color: var(--ink);
  font: 1.0625rem/1.68 var(--serif);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

/* A serif carries its own weight, so the headings are set lighter and tracked
   less tightly than the sans ones they replace — the old -.02em was correcting
   for a face that no longer sets this page. */
h1, h2, h3 { line-height: 1.18; letter-spacing: -.011em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.2rem, 6vw, 3.5rem); font-weight: 600; }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.05rem); font-weight: 600; }
h3 { font-size: 1.1rem; font-weight: 600; }
p  { margin: 0 0 1em; }

code, kbd, .mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .9em;
}
code {
  background: var(--code-bg);
  padding: .12em .38em;
  border-radius: 5px;
}

.wrap { width: min(64rem, 100% - 2.5rem); margin-inline: auto; }
.prose { width: min(42rem, 100% - 2.5rem); margin-inline: auto; }
.prose h2 { margin-top: 2.4em; }
.prose h3 { margin-top: 2em; }
.prose ul { padding-left: 1.15em; margin: 0 0 1em; }
.prose li { margin-bottom: .4em; }

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

.site-head {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
/* Wrapping, both here and on the nav below. Neither did, so seven links in a
   single unbreakable row made the header 450px wide inside a 375px phone and
   the whole page scrolled sideways under it. */
.site-head .wrap {
  display: flex; align-items: center; gap: 1.25rem;
  flex-wrap: wrap; row-gap: .3rem;
  min-height: 58px;
  padding-block: .35rem;
}
/* The name in the header is the name, so it is written the same way the
   headline is — with the brush, not with the interface's own face. Larger than
   the text beside it because a script's letters are a fraction of their point
   size and would otherwise read as a whisper next to the navigation. */
.brand {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--brush);
  font-size: 1.6rem; font-weight: 400; line-height: 1;
  color: var(--ink); text-decoration: none;
  letter-spacing: .005em;
}
.site-head nav {
  margin-left: auto; display: flex; gap: 1.15rem;
  flex-wrap: wrap; row-gap: .3rem; align-items: center;
  font-family: var(--ui); font-size: .88rem;
}
.site-head nav a { color: var(--ink-soft); text-decoration: none; }
.site-head nav a:hover, .site-head nav a[aria-current] { color: var(--ink); }

/* ---------- hero ---------- */

.hero { padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 4rem); }
.hero-grid {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 62rem) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; }
}
.eyebrow {
  font-family: var(--ui);
  font-size: .76rem; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 1rem;
}
/* The one brushed line. Set larger than the serif it replaces, because a
   script's letters are smaller than their point size suggests, and left at its
   own weight — SignPainter has one, and asking for a bolder one only gets a
   browser to smear the strokes. */
.hero h1 {
  font-family: var(--brush);
  font-weight: 400;
  font-size: clamp(2.9rem, 8.2vw, 5.6rem);
  line-height: 1.08;
  letter-spacing: 0;
  /* Evens the lines rather than filling each one to the edge and leaving
     "it." alone on a third. Ignored by browsers that do not know it, which
     get the same line breaks as before. */
  text-wrap: balance;
}

.lede { font-size: clamp(1.05rem, 2.2vw, 1.2rem); color: var(--ink-soft); max-width: 34rem; }

/* The encryption line in the hero. Present, plainly stated, and deliberately
   not competing with the sentence above it — it is what the app is, not the
   reason to use it. */
.lede-quiet {
  font-size: .98rem;
  color: var(--ink-faint);
  margin-top: .9rem;
}

.cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.7rem; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.15rem; border-radius: 10px;
  font-family: var(--ui);
  font-weight: 600; font-size: .92rem; text-decoration: none;
  border: 1px solid transparent;
}
/* The seal: the one filled shape on the page, in the one colour that is not
   ink or paper. */
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-quiet { border-color: var(--line); color: var(--ink); background: var(--card); }
.btn-quiet:hover { border-color: var(--ink-faint); }
.cta-note { font-family: var(--ui); font-size: .84rem; color: var(--ink-faint); }

/* ---------- the search mock ---------- */

/* Screenshots and the search recording. Real captures, so they get a
   phone-ish frame rather than sitting flat on the page.
   The `.device` block below is the hand-drawn mock these replaced in the
   hero; it is kept because the other pages may yet want it. */
.shot { margin: 0; }
.shot img, .shot video {
  display: block;
  width: 100%; height: auto;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  background: var(--card);
}
.shot figcaption {
  margin-top: .7rem;
  font-family: var(--ui);
  font-size: .83rem; line-height: 1.45;
  color: var(--ink-soft);
  text-align: center;
}
.shot-hero { max-width: 22rem; margin-inline: auto; }

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2rem 1.6rem;
  align-items: start;
}

.device {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 14px;
  max-width: 25rem;
  margin-inline: auto;
}
.device-field {
  display: flex; align-items: center; gap: .55rem;
  background: var(--code-bg);
  border-radius: 11px; padding: .6rem .8rem;
  color: var(--ink); font-family: var(--ui); font-size: .95rem;
}
.device-field svg { flex: none; opacity: .55; }
.caret {
  display: inline-block; width: 2px; height: 1.05em; background: var(--accent);
  vertical-align: -2px; margin-left: 1px;
  animation: blink 1.1s steps(1, end) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }

.result {
  display: block; padding: .8rem .2rem; border-bottom: 1px solid var(--line);
}
.result:last-of-type { border-bottom: 0; }
.result-title { font-weight: 600; font-size: .98rem; margin-bottom: .15rem; }
.result-snip { font-size: .89rem; color: var(--ink-soft); line-height: 1.45; }
.result-meta { font-family: var(--ui); font-size: .74rem; color: var(--ink-faint); margin-top: .3rem; }
mark { background: var(--mark); color: var(--mark-ink); border-radius: 3px; padding: 0 .12em; }

.keybar {
  display: flex; gap: .4rem; margin-top: .6rem; overflow: hidden;
  border-top: 1px solid var(--line); padding-top: .7rem;
}
.key {
  font-family: var(--ui);
  font-size: .78rem; padding: .3rem .6rem; border-radius: 7px;
  background: var(--code-bg); color: var(--ink-soft); white-space: nowrap;
}
.key.is-lit { background: var(--accent); color: var(--accent-ink); }

/* ---------- sections ---------- */

section { padding: clamp(2.6rem, 6vw, 4.5rem) 0; }
section + section { border-top: 1px solid var(--line); }
.section-head { max-width: 40rem; margin-bottom: 2.2rem; }
.section-head p { color: var(--ink-soft); margin: 0; }

.cards { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.3rem 1.35rem;
}
.card h3 { margin-bottom: .35rem; }
.card p { margin: 0; color: var(--ink-soft); font-size: .96rem; }
.card-icon {
  width: 30px; height: 30px; margin-bottom: .8rem;
  color: var(--accent);
}

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line); }
th {
  font-family: var(--ui);
  font-weight: 600; font-size: .74rem; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-faint);
}
tbody td:first-child { white-space: nowrap; }

.split { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 54rem) { .split { grid-template-columns: 1fr 1fr; } }
.split p:last-child { margin-bottom: 0; }

.facts { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.facts li { display: flex; gap: .7rem; align-items: flex-start; color: var(--ink-soft); }
.facts svg { flex: none; margin-top: .28em; color: var(--accent); }
.facts strong { color: var(--ink); font-weight: 620; }

/* ---------- the second-brain section ---------- */

/* Longer than the others and in three movements — the idea, the method, the
   app — so it gets subheadings of its own between the cards, set like the
   section heads but smaller, and a running measure for the prose between. */
.brain-why { margin-bottom: 2.6rem; }
.brain-why h3 { margin-bottom: .5rem; }
.brain-why p { color: var(--ink-soft); }
.brain-sub {
  font-size: clamp(1.2rem, 2.4vw, 1.45rem);
  margin: 2.8rem 0 .3rem;
}
.brain-lede, .brain-note {
  color: var(--ink-soft);
  max-width: var(--measure);
}
.brain-lede { margin-bottom: 1.4rem; }
.brain-note { margin-top: 1.2rem; }
.brain-sumi { margin-top: 3.4rem; }
.brain-honest {
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  max-width: 44rem;
}

/* The four letters of CODE, set as the one big glyph on each card in the
   place the icon would be — the seal red, like the icons, so the word reads
   down the row. */
.code-letter {
  display: block;
  font-family: var(--brush);
  font-size: 2.3rem; line-height: 1;
  color: var(--accent);
  margin-bottom: .55rem;
}

.para-table td:first-child { white-space: nowrap; }
.para-table td { vertical-align: top; }
.para-table td:last-child { color: var(--ink-soft); }

/* The eight steps, numbered in the seal red rather than the browser's default
   digits, so the list reads as part of the page and not as a bulletin. */
.steps {
  list-style: none; padding: 0; margin: 0;
  counter-reset: step;
  display: grid; gap: .9rem;
  max-width: 44rem;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.8rem;
  color: var(--ink-soft);
}
/* Absolutely placed rather than a grid column: a grid would make the bold
   lead and the sentence after it two separate items, and the sentence would
   drop into the number's column, one word to a line. */
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: .2rem;
  font-family: var(--ui);
  font-weight: 600; font-size: .82rem;
  color: var(--accent);
  border: 1px solid var(--line); border-radius: 999px;
  width: 1.8rem; height: 1.8rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.steps strong { color: var(--ink); font-weight: 620; }

/* ---------- support/privacy pages ---------- */

.page-head { padding: clamp(2.5rem, 6vw, 4rem) 0 1rem; }
.page-head .updated { color: var(--ink-faint); font-size: .9rem; margin: 0; }

.callout {
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius); padding: 1.1rem 1.25rem; margin: 1.6rem 0;
}
.callout p:last-child { margin-bottom: 0; }
.callout h3 { margin-top: 0; }

details {
  border-bottom: 1px solid var(--line); padding: .2rem 0;
}
summary {
  cursor: pointer; padding: .85rem .2rem; font-weight: 600;
  list-style: none; display: flex; justify-content: space-between; gap: 1rem;
}
summary:hover { color: var(--accent); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--ink-faint); font-weight: 400; }
details[open] summary::after { content: "\2212"; }
details > :not(summary) { color: var(--ink-soft); }
details > p { margin: 0 .2rem 1rem; }
details > ul { margin: 0 .2rem 1rem; }

/* ---------- the download page ---------- */

/* Two cards side by side, each ending in its button, so the two ways of
   getting the app read as the same size of decision. The prose sections
   below them use the same split as the front page. */
.dl-section { padding-top: 0; }
.dl-lede { color: var(--ink-soft); max-width: var(--measure); margin-bottom: 2rem; }
.dl-grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .dl-grid { grid-template-columns: minmax(0, 32rem); } }
.dl-card { display: flex; flex-direction: column; }
.dl-card h2 { font-size: 1.35rem; margin-bottom: .35rem; }
.dl-card p { margin-bottom: .9rem; }
.dl-meta {
  list-style: none; padding: 0; margin: 0 0 1.3rem;
  font-family: var(--ui); font-size: .84rem; color: var(--ink-faint);
  display: grid; gap: .3rem;
}
.dl-meta li { padding-left: 1rem; position: relative; }
.dl-meta li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}
.dl-card .btn { margin-top: auto; align-self: flex-start; }

/* ---------- footer ---------- */

.site-foot {
  border-top: 1px solid var(--line);
  padding: 2.2rem 0 3rem;
  font-family: var(--ui);
  color: var(--ink-faint); font-size: .86rem;
}
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; }
.site-foot nav { margin-left: auto; display: flex; gap: 1.2rem; flex-wrap: wrap; }
.site-foot a { color: var(--ink-soft); text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; }

.skip {
  position: absolute; left: -9999px;
}
.skip:focus {
  left: 1rem; top: .5rem; z-index: 20; background: var(--card); color: var(--ink);
  padding: .5rem .8rem; border-radius: 8px; border: 1px solid var(--line);
}

/* The second line under the buttons: the details that matter but should not
   compete with the price on the line above it. */
.cta-note-quiet {
  color: var(--ink-faint);
  margin-top: .35rem;
}


/* ---------- the mark itself ---------- */

/* The ensō in the header: two images, one shown at a time.

   It was a CSS mask filled with `currentColor`, which was tidier and did not
   survive contact with a real browser — Safari will not load an SVG mask from
   a `file://` page, and a mark that is invisible for a whole class of readers
   is not tidier at all. Two `<img>`s always draw.

   Which one shows is a CSS rule rather than a `<picture>` media query,
   because `prefers-color-scheme` follows the system and cannot be told that
   somebody pressed the switch in this header. */
.brand-mark { width: 26px; height: 26px; flex: none; border-radius: 7px; display: block; }
.brand-mark-dark { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-mark-light { display: none; }
  :root:not([data-theme="light"]) .brand-mark-dark { display: block; }
}

:root[data-theme="dark"] .brand-mark-light { display: none; }
:root[data-theme="dark"] .brand-mark-dark { display: block; }
:root[data-theme="light"] .brand-mark-light { display: block; }
:root[data-theme="light"] .brand-mark-dark { display: none; }

/* Ink on paper reads best a little wider than a UI does. The prose measure is
   the one number that changes with the face, and a serif at this size wants
   roughly 66 characters rather than the 72 the sans was giving. */
.prose { width: min(40rem, 100% - 2.5rem); }

/* ---------- the light/dark switch ---------- */

/* A page about ink and paper should let you say which one you are reading on.
   It follows the system until it is pressed, and remembers the answer
   afterwards; without JavaScript it is simply not there, and the system keeps
   deciding. */
.theme-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  margin-left: .35rem;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--ink-soft);
  cursor: pointer;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-faint); }
.theme-toggle svg { width: 17px; height: 17px; display: block; }
/* Shown only once the script that makes it work has run. */
.js .theme-toggle { display: inline-flex; }