/* Magic Scraper — site styles.
 *
 * Fonts are self-hosted rather than pulled from Google. A product whose whole
 * claim is "nothing leaves your machine" should not make the visitor's browser
 * phone a third party to render a headline.
 */

@font-face {
  font-family: 'Fraunces';
  src: url('assets/fonts/fraunces-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('assets/fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Warm paper rather than blue-white: less screenshot-of-a-dashboard. */
  --paper:   #faf8f4;
  --ink:     #17150f;
  --ink-2:   #5d574a;
  --rule:    #e0dbd0;
  --card:    #fffefb;
  --accent:  #4b3bd0;   /* the extension's violet, used sparingly */
  --warm:    #b4491f;   /* one warm note, for price and emphasis */
  --shadow:  24px 24px 0 -12px rgba(23,21,15,.06);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14130f; --ink: #f2efe6; --ink-2: #a8a091; --rule: #302c24;
    --card: #1b1914; --accent: #a695ff; --warm: #e08355;
    --shadow: 24px 24px 0 -12px rgba(0,0,0,.3);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Archivo', system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-synthesis-weight: none;
}

a { color: var(--accent); text-underline-offset: 3px; }

.wrap { max-width: 1000px; margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 680px; }

/* Off-screen until focused: the first Tab on any page jumps past the nav. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; border-radius: 0 0 9px 0; text-decoration: none;
}
.skip:focus { left: 0; }

/* ---------- masthead ---------- */

.masthead {
  display: flex; align-items: center; gap: 12px;
  padding: 26px 0; border-bottom: 1px solid var(--rule);
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.glyph {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink);
}
.wordmark { font-family: 'Fraunces'; font-weight: 600; font-size: 19px; letter-spacing: -.2px; }
.masthead nav { margin-left: auto; display: flex; gap: 22px; }
.masthead nav a {
  font-size: 14px; color: var(--ink-2); text-decoration: none;
  font-variation-settings: 'wght' 500;
}
.masthead nav a:hover { color: var(--ink); }

/* ---------- the burger ---------- */
/* Seven links at 14px plus the wordmark need about 760px. Below 820 the row
   stops fitting and flex shrinks each link past its own word widths, so
   "What it does" stacks into three lines. Collapse it instead. */

.burger {
  display: none; margin-left: auto; padding: 0;
  width: 44px; height: 44px; flex: none;
  align-items: center; justify-content: center;
  background: none; color: var(--ink);
  border: 1px solid var(--rule); border-radius: 9px; cursor: pointer;
}
.burger:hover { border-color: var(--ink-2); }
.burger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.burger .bars { position: relative; }
.burger .bars,
.burger .bars::before,
.burger .bars::after {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: currentColor; transition: transform .18s ease, background .18s ease;
}
.burger .bars::before, .burger .bars::after { content: ''; position: absolute; left: 0; }
.burger .bars::before { top: -6px; }
.burger .bars::after  { top: 6px; }
.burger[aria-expanded="true"] .bars { background: transparent; }
.burger[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .bars::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 820px) {
  /* Without JS the panel could never be opened, so leave the nav in the flow
     and let it wrap. Only the .js path hides it behind the button. */
  .masthead nav { flex-wrap: wrap; row-gap: 8px; }
  .wordmark { white-space: nowrap; }

  .js .burger { display: flex; }
  .js .masthead { position: relative; flex-wrap: nowrap; }
  .js .masthead nav {
    display: none; margin: 0; padding: 4px 0 8px;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
    flex-direction: column; gap: 0;
    background: var(--paper);
    /* No hard bottom rule: the panel overlays body copy, and a hairline
       slices straight through whatever glyphs sit behind it. A shadow fades
       instead of cutting. */
    box-shadow: 0 14px 28px -10px rgba(23, 21, 15, .30);
  }
  .js .masthead.open nav { display: flex; }
  .js .masthead nav a {
    font-size: 17px; padding: 13px 2px; color: var(--ink);
    border-bottom: 1px dotted var(--rule);
  }
  .js .masthead nav a:last-child { border-bottom: 0; }
}

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

.hero { padding: 76px 0 12px; }
.eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-2); margin: 0 0 22px;
}
h1 {
  font-family: 'Fraunces'; font-weight: 600;
  font-size: clamp(40px, 6.2vw, 68px); line-height: 1.02;
  letter-spacing: -1.6px; margin: 0 0 22px; max-width: 15ch;
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 100;
}
h1 i { font-style: italic; color: var(--warm); }
.standfirst {
  font-size: 20px; line-height: 1.55; color: var(--ink-2);
  max-width: 54ch; margin: 0 0 32px;
}
.standfirst b { color: var(--ink); font-variation-settings: 'wght' 600; }

.actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.btn {
  display: inline-block; text-decoration: none; font-size: 15px;
  padding: 12px 22px; border-radius: 2px;
  font-variation-settings: 'wght' 600;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
}
.btn:hover { background: transparent; color: var(--ink); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-quiet:hover { border-color: var(--ink); background: transparent; }
.aside { font-size: 14px; color: var(--ink-2); }

/* ---------- the demo ---------- */

.stage { margin: 54px 0 0; }
.stage video, .stage img {
  width: 100%; display: block; border: 1px solid var(--rule); box-shadow: var(--shadow);
}
/* Sits under the video: play when the poster is showing, pause once it runs.
   Present in both states, because a moving thing needs a stop. */
/* The availability notice sits with the buy button, not three screens below
   it in the pricing table. It has to break the .actions flex row to do that. */
.actions .notyet {
  flex-basis: 100%; margin: 4px 0 0; max-width: 56ch;
  font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
}
.actions .notyet b { color: var(--ink); font-variation-settings: 'wght' 600; }

.vtoggle {
  margin-top: 12px; min-height: 44px; padding: 0 16px;
  font: inherit; font-size: 14px; color: var(--ink);
  background: none; border: 1px solid var(--ink); border-radius: 9px;
  cursor: pointer;
}
.vtoggle:hover { background: var(--ink); color: var(--paper); }
.vtoggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.caption {
  display: flex; gap: 10px; align-items: baseline;
  margin-top: 14px; font-size: 14px; color: var(--ink-2);
}
.caption b { font-family: var(--mono); font-size: 12px; color: var(--warm); font-weight: 400; }

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

section { padding: 88px 0; border-top: 1px solid var(--rule); }
section:first-of-type { border-top: 0; }
h2 {
  font-family: 'Fraunces'; font-weight: 600; font-size: 30px;
  letter-spacing: -.6px; margin: 0 0 10px;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
}
.deck { color: var(--ink-2); margin: 0 0 44px; max-width: 52ch; }

/* Numbered editorial rows, not a grid of identical cards. */
.steps { border-top: 1px solid var(--rule); }
.step {
  display: grid; grid-template-columns: 64px 1fr 1.15fr; gap: 28px;
  padding: 26px 0; border-bottom: 1px solid var(--rule); align-items: baseline;
}
.step .n {
  font-family: var(--mono); font-size: 12px; color: var(--ink-2);
  letter-spacing: .1em; padding-top: 4px;
}
.step h3 {
  margin: 0; font-family: 'Fraunces'; font-weight: 600; font-size: 21px;
  letter-spacing: -.3px; font-variation-settings: 'SOFT' 0;
}
.step p { margin: 0; color: var(--ink-2); }
.step code {
  font-family: var(--mono); font-size: .86em; background: var(--card);
  border: 1px solid var(--rule); padding: 1px 5px;
}
@media (max-width: 720px) {
  .step { grid-template-columns: 34px 1fr; }
  .step p { grid-column: 2; }
}

/* ---------- pricing ---------- */

.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--ink); }
.plan { padding: 30px 28px; }
.plan + .plan { border-left: 1px solid var(--ink); background: var(--card); }
.plan .kind {
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-2);
}
.plan .amount {
  font-family: 'Fraunces'; font-weight: 600; font-size: 44px; letter-spacing: -1.4px;
  margin: 10px 0 2px; display: flex; align-items: baseline; gap: 10px;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
}
.plan .amount s { font-size: 22px; color: var(--ink-2); font-variation-settings: 'wght' 400; }
.plan .terms { color: var(--ink-2); font-size: 14px; margin: 0 0 20px; }
.plan ul { list-style: none; margin: 0 0 24px; padding: 0; }
.plan li { padding: 7px 0; border-bottom: 1px dotted var(--rule); font-size: 15px; }
.plan li:last-child { border-bottom: 0; }
.plan li b { font-variation-settings: 'wght' 600; }
.founding {
  display: inline-block; font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--warm); border: 1px solid var(--warm); padding: 3px 8px; margin-bottom: 14px;
}
@media (max-width: 720px) {
  .plans { grid-template-columns: 1fr; }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--ink); }
}

/* ---------- the privacy note ---------- */

.claim { border-left: 2px solid var(--warm); padding: 4px 0 4px 26px; margin: 0 0 34px; }
.claim p { margin: 0 0 14px; font-size: 19px; line-height: 1.5; max-width: 50ch; }
.claim p:last-child { margin-bottom: 0; }
.claim b { font-variation-settings: 'wght' 600; }

/* ---------- questions ---------- */

.qa { border-top: 1px solid var(--rule); }
.qa details { border-bottom: 1px solid var(--rule); padding: 20px 0; }
.qa summary {
  cursor: pointer; list-style: none; font-size: 18px;
  font-family: 'Fraunces'; font-weight: 600; letter-spacing: -.2px;
  font-variation-settings: 'SOFT' 0;
  display: flex; justify-content: space-between; gap: 20px;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; color: var(--ink-2); font-family: var(--mono); font-weight: 400; }
.qa details[open] summary::after { content: "\2212"; }
.qa p { color: var(--ink-2); margin: 14px 0 0; max-width: 62ch; }

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

footer {
  border-top: 1px solid var(--rule); padding: 34px 0 60px;
  color: var(--ink-2); font-size: 14px;
  display: flex; gap: 18px; flex-wrap: wrap; align-items: baseline;
}
footer a { color: var(--ink-2); }
footer .sep { margin-left: auto; }

/* ---------- long-form pages (privacy, terms) ---------- */

.doc { padding: 60px 0 40px; }
.doc h1 { font-size: clamp(30px, 4.6vw, 42px); margin-bottom: 8px; max-width: 22ch; }
.doc .dateline { font-family: var(--mono); font-size: 12px; color: var(--ink-2);
                 letter-spacing: .06em; margin: 0 0 34px; }
.doc h2 { font-size: 21px; margin: 42px 0 10px; }
.doc p { max-width: 66ch; margin: 0 0 16px; }
.doc table { width: 100%; border-collapse: collapse; margin: 18px 0 26px; max-width: 66ch; }
.doc th, .doc td { text-align: left; padding: 11px 12px 11px 0; border-bottom: 1px solid var(--rule);
                   vertical-align: top; font-size: 15px; }
.doc th { font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
          text-transform: uppercase; color: var(--ink-2); font-weight: 400; }
.doc code { font-family: var(--mono); font-size: .86em; background: var(--card);
            border: 1px solid var(--rule); padding: 1px 5px; }

/* ---------- the bespoke brief ---------- */

ul.brief { list-style: none; margin: 0 0 26px; padding: 0; max-width: 62ch; }
ul.brief li {
  padding: 11px 0 11px 28px; border-bottom: 1px dotted var(--rule);
  color: var(--ink-2); position: relative;
}
ul.brief li:last-child { border-bottom: 0; }
ul.brief li::before {
  content: "\2192"; position: absolute; left: 0; color: var(--warm);
}
ul.brief b { color: var(--ink); font-variation-settings: 'wght' 600; }

/* ---------- comparison table ---------- */

table.compare { width: 100%; border-collapse: collapse; margin: 8px 0 0; font-size: 15px; }
table.compare th, table.compare td {
  text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
table.compare thead th {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 400; border-bottom: 1px solid var(--ink);
}
table.compare tbody td:first-child { color: var(--ink); width: 42%; }
table.compare tbody td b { font-variation-settings: 'wght' 600; }
table.compare td.y, table.compare td.n, table.compare td.q { color: var(--ink-2); }
table.compare td.y::before { content: "\2713\00a0\00a0"; color: #1d7a4f; font-weight: 700; }
table.compare td.n::before { content: "\2014\00a0\00a0"; color: var(--ink-2); }
table.compare td.q::before { content: "\00b7\00a0\00a0"; color: var(--warm); }
@media (max-width: 640px) {
  table.compare { font-size: 14px; }
  table.compare tbody td:first-child { width: 40%; }
}

/* ---------- mobile pass ----------
   Everything below 620px. The site is otherwise fluid, so these are the
   places where a desktop-shaped control does not survive a phone: rows that
   assume horizontal room, tap targets sized for a cursor, and type set small
   enough to read on a 27" display but not in a hand. */

@media (max-width: 620px) {

  /* Side gutters: 28px of the 390 is a lot to give away. */
  .wrap { padding-left: 20px; padding-right: 20px; }

  /* Footer links were a 22px-tall wrapped row -- legible, but a coin-toss to
     hit. Stack them into full-width rows instead. */
  footer {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 26px 0 44px;
  }
  footer > span {
    font-variation-settings: 'wght' 600; color: var(--ink);
    padding-bottom: 10px;
  }
  footer a {
    display: block; padding: 12px 0; min-height: 44px;
    border-top: 1px dotted var(--rule); box-sizing: border-box;
  }
  footer .sep { margin-left: 0; }

  /* The wordmark is a link and was 30px tall. */
  .logo { min-height: 44px; }

  /* Two-column reference tables (privacy's what/why, support's symptom/fix)
     run edge to edge and past the wrap padding at this width. Stack each row
     into a labelled block -- the pairing survives, the horizontal squeeze
     does not. */
  .doc table, .doc tbody, .doc tr, .doc th, .doc td {
    display: block; width: auto;
  }
  .doc tr { padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .doc tr:last-child { border-bottom: 0; }
  .doc th {
    padding: 0 0 6px; text-align: left; width: auto;
    border: 0;
  }
  .doc td { padding: 0; border: 0; }
  table.symptoms th { width: auto; padding-right: 0; }

  /* Stacked, a two-word header row is just a pair of orphan labels above the
     data. Drop it -- the pairs below are self-describing. Not .symptoms,
     whose every row opens with a th that is the label, not a heading. */
  .doc table:not(.compare):not(.symptoms) tr:first-child { display: none; }

  /* And give the pair some hierarchy, or the label runs straight into its
     explanation with nothing to separate them. */
  .doc td:first-child {
    font-variation-settings: 'wght' 600; color: var(--ink);
  }
  .doc td + td { color: var(--ink-2); padding-top: 5px; }

  /* The comparison table is three columns of short verdicts -- stacking it
     would destroy the comparison, so let it scroll instead. */
  .compare-scroll, table.compare {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }

  /* 11px is fine on a desktop monitor and squinting on a phone. */
  /* .doc th and table.compare thead th each set 11px with a class in the
     selector, so a bare `th` here loses on specificity. Name them. */
  .founding, .doc th, table.compare thead th { font-size: 12px; }
  /* A grid track of 1fr will not shrink below its content's min-width,
     so a long word in a card pushes the whole row past the screen. */
  .steps, .plans, .grid { grid-template-columns: minmax(0, 1fr); }

  /* Heading links are the only route to the sandbox from here, and a
     26px line is a small thing to hit with a thumb. */
  .step h3 a { display: inline-block; padding: 9px 0; }
}