/* Simple Note Taker — "Highlighter"
   ===========================================================================
   Direction, and why.

   The product's defining gesture is marking something so you can find it
   again. So the site is monochrome — ink on paper — with exactly ONE colour,
   highlighter yellow, used only the way a highlighter is used: a swipe behind
   words that matter. Never as a button fill, never as a text colour, never as
   a gradient. One colour used with a rule reads as a decision; the same colour
   sprayed everywhere reads as a template.

   This is deliberately NOT the purple-gradient-on-white SaaS page the previous
   landing was, which is what every AI design tool produces when asked for a
   note-taking app. It was pleasant and it was anonymous.

   Light-first, because the product is used in daylight in a browser — and
   because the sibling product Med-Mind is dark-first for the opposite reason.
   The two should not look like the same page with the values inverted.

   TYPE CARRIES A RULE:
     Archivo (grotesque) = the product speaking. Headings, UI, prose.
     System mono         = a captured fragment. Used ONLY for text that stands
                           for something the user actually captured — a
                           clipping, a transcript, a URL.
   Mono is not decoration here: it marks the boundary between our words and
   theirs, which is the same boundary the app draws.

   Archivo is self-hosted (SIL OFL). The mono face is deliberately the
   reader's own system mono — no download, and a captured fragment looking
   native to the machine is the point.
   =========================================================================== */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/archivo-var.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paper:      #FAF7F0;   /* warm, not white — a page, not a screen */
  --paper-2:    #F2EDE2;
  --card:       #FFFFFF;
  --ink:        #16151A;
  --ink-quiet:  #5F5B54;
  --hair:       #E2DBCC;
  --mark:       #FFE04D;   /* the highlighter. The only colour on the page. */
  --mark-soft:  #FFF3BF;
  --ok:         #1F6B3E;
  --warn:       #8A4B12;
  --measure:    36rem;
  --sans: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
  --radius: 14px;
}

/* Dark is a real counterpart, not an inversion. A highlighter on a dark
   screen is a solid block with dark text through it — so that is what it
   becomes here, rather than a yellow tint that would vanish. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141317; --paper-2: #1C1B20; --card: #1C1B20;
    --ink: #F3F0E9; --ink-quiet: #A7A199; --hair: #302E36;
    --mark: #FFD83D; --mark-soft: #3A3316;
    --ok: #6FD39A; --warn: #E2A45C;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 64rem; margin: 0 auto; padding: 0 1.5rem; }
.prose { max-width: var(--measure); }
a { color: var(--ink); text-decoration-color: var(--hair); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 3px; }
img { max-width: 100%; height: auto; }

/* ── The highlighter ──────────────────────────────────────────────────────
   A swipe of marker behind the words. Slightly taller than the text, slightly
   off-square at the ends, and it sits BEHIND the glyphs so the ink stays
   black — which is what makes it read as a highlighter rather than a
   background-color. */
.mark {
  background-image: linear-gradient(to right, var(--mark), var(--mark));
  background-repeat: no-repeat;
  /* Measured in em against the inline content box, so the swipe covers the
     x-height band at every size — from the 17px scrap text to the 4rem
     heading. Offsetting from the *bottom* was the earlier mistake: at a large
     font size the band fell past the baseline and read as an underline. */
  background-size: 100% 0.68em;
  background-position: 0 0.18em;
  padding: 0 0.08em;
  /* A real marker overlaps the letterforms; multiply keeps the ink readable
     through it. In dark mode the block is dark, so multiply would erase it —
     hence the override below. */
  mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) {
  /* On dark, the swipe has to cover the WHOLE glyph, not just the x-height
     band: the text is inverted to ink, so any part of a letter outside the
     band would be dark-on-dark and disappear. A partial band shipped once and
     made the headline unreadable — which is also what a marker looks like on
     a dark page, so it is the honest form as well as the legible one. */
  .mark {
    mix-blend-mode: normal; color: #16151A;
    background-size: 100% 1.06em;
    background-position: 0 -0.03em;
    border-radius: 2px;
  }
}

/* ── Header ─────────────────────────────────────────────────────────────── */
header { border-bottom: 1px solid var(--hair); background: var(--paper); position: sticky; top: 0; z-index: 20; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; letter-spacing: -.02em; font-size: 1.02rem; text-decoration: none; }
.brand .mk { width: 28px; height: 28px; border-radius: 8px; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-size: .8rem; font-weight: 800; }
nav.top a { margin-left: 1.3rem; text-decoration: none; color: var(--ink-quiet); font-size: .93rem; }
nav.top a:hover { color: var(--ink); }
@media (max-width: 42rem) { nav.top a { margin: 0 .9rem 0 0; } }

/* ── Type ───────────────────────────────────────────────────────────────── */
h1 { font-size: clamp(2.4rem, 6.5vw, 4.2rem); line-height: 1.02; letter-spacing: -.04em; font-weight: 700; margin: 0 0 1.1rem; text-wrap: balance; }
h2 { font-size: clamp(1.55rem, 3.2vw, 2.2rem); line-height: 1.12; letter-spacing: -.028em; font-weight: 700; margin: 0 0 .9rem; text-wrap: balance; }
h3 { font-size: 1.04rem; font-weight: 650; letter-spacing: -.012em; margin: 0 0 .35rem; }
.lede { font-size: 1.18rem; color: var(--ink-quiet); max-width: var(--measure); margin: 0 0 1.8rem; }
.eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-quiet); margin: 0 0 .9rem; }
.small { font-size: .88rem; color: var(--ink-quiet); }

/* Mono appears ONLY on captured fragments. See the rule at the top. */
.frag { font-family: var(--mono); font-size: .87rem; line-height: 1.5; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .55rem; justify-content: center;
  padding: .78rem 1.35rem; border-radius: 999px; font-weight: 600; font-size: .95rem;
  text-decoration: none; border: 1.5px solid var(--ink); cursor: pointer;
  font-family: inherit; transition: transform .12s ease, box-shadow .12s ease;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 0 -2px var(--mark); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--mark-soft); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn-sm { padding: .5rem .95rem; font-size: .86rem; }
.btn-danger { border-color: #9B2C2C; color: #9B2C2C; background: transparent; }
@media (prefers-color-scheme: dark) { .btn-danger { border-color: #F08A8A; color: #F08A8A; } }

.cta { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center; padding: 5rem 0 4rem; }
@media (max-width: 58rem) { .hero { grid-template-columns: 1fr; gap: 2.5rem; padding: 3rem 0 2rem; } }

.pill { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 600; letter-spacing: .03em; border: 1px solid var(--hair); background: var(--card); padding: .35rem .8rem; border-radius: 999px; margin: 0 0 1.4rem; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mark); }

/* ── The pile ─────────────────────────────────────────────────────────────
   The hero illustration, and the honest one: notes arrive as unsorted scraps
   of four different kinds, slightly askew, overlapping. Every competitor
   shows a tidy grid of identical cards, which is a picture of the filing the
   product exists to avoid. */
.pile { position: relative; min-height: 24rem; }
.scrap {
  position: absolute; background: var(--card); border: 1px solid var(--hair);
  border-radius: 10px; padding: .85rem .95rem; width: 15.5rem;
  box-shadow: 0 8px 22px rgba(22,21,26,.09);
}
@media (prefers-color-scheme: dark) { .scrap { box-shadow: 0 8px 22px rgba(0,0,0,.4); } }
.scrap .kind { font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-quiet); margin: 0 0 .4rem; }
.scrap p { margin: 0; }
.s1 { top: 0;      left: 0;    transform: rotate(-2.4deg); }
.s2 { top: 5.4rem; left: 6rem; transform: rotate(1.8deg); }
.s3 { top: 11.6rem; left: .8rem; transform: rotate(-1.1deg); }
.s4 { top: 17.4rem; left: 7.2rem; transform: rotate(2.6deg); }
/* Below the two-column breakpoint the pile stops being absolutely positioned
   and becomes an ordinary stack. Fixed left offsets plus fixed widths kept
   pushing a scrap past the viewport and giving the whole page a horizontal
   scrollbar; letting flow layout do the work removes that class of bug
   entirely, and a gentle alternating tilt keeps the "unsorted" idea. */
@media (max-width: 58rem) {
  .pile { min-height: 0; max-width: 26rem; margin: 0 auto; display: grid; gap: .9rem; }
  .scrap { position: static; width: auto; }
  .s1 { transform: rotate(-1.6deg); }
  .s2 { transform: rotate(1.2deg); }
  .s3 { transform: rotate(-0.8deg); }
  .s4 { transform: rotate(1.8deg); }
}

/* A voice note is a waveform, not a play button. */
.wave { display: flex; align-items: flex-end; gap: 2px; height: 22px; margin-top: .2rem; }
.wave i { display: block; width: 3px; background: var(--ink); opacity: .55; border-radius: 1px; }

/* ── Sections ───────────────────────────────────────────────────────────── */
section { padding: 4rem 0; border-top: 1px solid var(--hair); }
section:first-of-type { border-top: 0; }
.section-head { max-width: var(--measure); margin-bottom: 2.4rem; }

.grid { display: grid; gap: 1.1rem; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.card { background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius); padding: 1.4rem; }
.card h3 { margin-bottom: .4rem; }
.card p { margin: 0; color: var(--ink-quiet); font-size: .94rem; }

/* Numbered steps. The number is set in the highlighter, because it is the
   one place a bare colour block is honest — it is marking a position. */
.step { display: flex; gap: 1rem; align-items: flex-start; }
.step .n { flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--mark); color: #16151A; display: grid; place-items: center; font-weight: 700; font-size: .9rem; }

/* ── Pricing ────────────────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); gap: 1.1rem; align-items: start; }
.plan { background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius); padding: 1.6rem; display: flex; flex-direction: column; }
.plan.pick { border: 2px solid var(--ink); }
.plan .pname { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-weight: 700; font-size: 1.05rem; }
.plan .tag { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: var(--mark); color: #16151A; padding: .2rem .5rem; border-radius: 4px; }
.plan .price { margin: 1rem 0 .2rem; font-size: 2.3rem; font-weight: 700; letter-spacing: -.04em; }
.plan .per { font-size: .9rem; color: var(--ink-quiet); font-weight: 500; letter-spacing: 0; }
.plan ul { list-style: none; padding: 0; margin: 1.2rem 0 1.6rem; font-size: .93rem; }
.plan li { padding-left: 1.5rem; position: relative; margin-bottom: .5rem; color: var(--ink-quiet); }
.plan li::before { content: "✓"; position: absolute; left: 0; color: var(--ink); font-weight: 700; }
.plan li.no { color: var(--ink-quiet); opacity: .65; }
.plan li.no::before { content: "—"; }
.plan .btn { margin-top: auto; }

.toggle { display: inline-flex; border: 1.5px solid var(--ink); border-radius: 999px; padding: 3px; margin-bottom: 2rem; }
.toggle button { border: 0; background: none; padding: .45rem 1.1rem; border-radius: 999px; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; color: var(--ink); }
.toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ── Download rows ──────────────────────────────────────────────────────── */
.dl { display: grid; grid-template-columns: 3rem 1fr auto; gap: 1.1rem; align-items: center; background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius); padding: 1.2rem 1.4rem; }
.dl + .dl { margin-top: .9rem; }
.dl .glyph { width: 3rem; height: 3rem; border-radius: 10px; background: var(--paper-2); display: grid; place-items: center; font-size: 1.4rem; }
.dl h3 { margin-bottom: .15rem; }
.dl p { margin: 0; font-size: .9rem; color: var(--ink-quiet); }
@media (max-width: 40rem) { .dl { grid-template-columns: 2.5rem 1fr; } .dl .btn { grid-column: 1 / -1; } }

.status { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .18rem .5rem; border-radius: 4px; border: 1px solid var(--hair); color: var(--ink-quiet); margin-left: .5rem; vertical-align: 2px; }
.status.live { background: var(--mark); color: #16151A; border-color: transparent; }

/* ── Forms + account ────────────────────────────────────────────────────── */
label { display: block; font-size: .84rem; font-weight: 600; margin-bottom: .3rem; }
input[type=email], input[type=password], input[type=text] {
  width: 100%; padding: .7rem .85rem; border-radius: 9px; border: 1.5px solid var(--hair);
  background: var(--card); color: var(--ink); font: inherit; font-size: .95rem;
}
input:focus { border-color: var(--ink); outline: none; }
.field { margin-bottom: 1rem; }
.panel { background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius); padding: 1.6rem; max-width: 30rem; }
.panel-wide { max-width: 46rem; }
.rows { list-style: none; padding: 0; margin: 0; }
.rows li { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--hair); font-size: .94rem; }
.rows li:last-child { border-bottom: 0; }
.rows .k { color: var(--ink-quiet); }
.msg { padding: .75rem .95rem; border-radius: 9px; font-size: .9rem; margin-bottom: 1rem; border: 1px solid var(--hair); background: var(--paper-2); }
.msg.err { border-color: #9B2C2C; color: #9B2C2C; background: transparent; }
.msg.good { border-color: var(--ok); color: var(--ok); background: transparent; }
[hidden] { display: none !important; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
details { border-bottom: 1px solid var(--hair); padding: 1rem 0; }
details summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
details summary::-webkit-details-marker { display: none; }
details summary::after { content: "+"; color: var(--ink-quiet); font-weight: 400; font-size: 1.3rem; line-height: 1; }
details[open] summary::after { content: "–"; }
details p { color: var(--ink-quiet); margin: .7rem 0 0; max-width: var(--measure); }

/* ── Legal pages ────────────────────────────────────────────────────────── */
.legal { padding: 3.5rem 0 4rem; }
.legal h2 { font-size: 1.25rem; margin-top: 2.4rem; }
.legal p, .legal li { color: var(--ink-quiet); max-width: var(--measure); }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: .4rem; }
.legal .updated { font-size: .85rem; color: var(--ink-quiet); }

table.data { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 1rem 0; }
table.data th, table.data td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--hair); vertical-align: top; }
table.data th { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-quiet); }
.scroll-x { overflow-x: auto; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer { border-top: 1px solid var(--hair); padding: 2.5rem 0 3.5rem; font-size: .9rem; color: var(--ink-quiet); }
footer nav { margin-bottom: 1rem; display: flex; gap: 1.3rem; flex-wrap: wrap; }
footer nav a { color: var(--ink-quiet); text-decoration: none; }
footer nav a:hover { color: var(--ink); text-decoration: underline; }
footer p { margin: .4rem 0; max-width: var(--measure); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: .6rem; position: fixed; z-index: 50; background: var(--ink); color: var(--paper); padding: .6rem 1rem; border-radius: 8px; }