/*
 * The Hobby Workshop — built to the Apple product-page reference.
 *
 * The whole system is three ideas:
 *
 *   1. Type carries everything. Display headlines at 56–96px, weight 600, with
 *      negative tracking that tightens as the size grows. Body is 17px at
 *      -0.022em. There is no decorative anything.
 *   2. Rhythm comes from alternating #ffffff and #f5f5f7 bands. No dividers,
 *      no borders between sections, no shadows anywhere.
 *   3. Colour is reserved. Three of them: Supernova, black and white. The
 *      accent appears inside a filled action and nowhere else on a light
 *      ground, because yellow text on white is unreadable. On black bands it
 *      is finally legible and carries the numerals.
 *
 * Corner radii are non-negotiable: 28px on cards and images, 980px on buttons.
 */

:root {
  /* Ink */
  --ink:        #0a0a0a;
  --mid-gray:   #6e6e73;
  --deep-gray:  #474747;
  --hairline:   #d6d6d6;
  --quiet-dot:  #777779;

  /* Surfaces */
  --paper:      #ffffff;
  --black:      #000000;
  --canvas:     #f5f5f7;
  --cool-wash:  #e8e8ed;
  --faded:      #fafafc;

  /*
   * Three colours: Supernova, black, white. The reference reserves a single
   * chromatic accent for filled actions and nothing else — that rule is kept,
   * the hue is not.
   *
   * Yellow text on white measures under 2:1, so no text is ever set in
   * Supernova on a light ground. On the filled pill the ink goes black
   * (about 12:1); on black bands the yellow becomes legible and is allowed to
   * carry numerals and hover states.
   */
  --nova:       #FFC901;
  --nova-hover: #FFD84A;

  /* Apple's rhythm needs two surfaces to alternate between. With three colours
     the second surface is black rather than a grey — which also gives the
     accent somewhere it can finally be used as text. */
  --ink-invert: #ffffff;

  --r-card:   28px;
  --r-link:   10px;
  --r-badge:  36px;
  --r-btn:    980px;

  --max: 1200px;
  /* Longest comfortable line for the two body sizes, used to stop copy
     stretching when the shell grows on a large display. */
  --measure: 640px;

  --display-font: 'Inter', 'SF Pro Display', ui-sans-serif, system-ui,
                  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --text-font:    'Inter', 'SF Pro Text', ui-sans-serif, system-ui,
                  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text-font);
  font-size: 17px;
  line-height: 1.4706;
  letter-spacing: -0.022em;
  font-feature-settings: "tnum";
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--nova); color: #000; }
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}
/* On the filled pill the ink outline disappears into the button, so focus
   there is drawn as a ring outside the yellow instead. */
.btn--fill:focus-visible { outline-color: var(--ink); outline-offset: 4px; }

/* ── Type scale ────────────────────────────────────────────────────────────
   Tracking tightens as size grows — that inversion is what makes a 96px line
   read as architecture rather than as a shout. */

h1, h2, h3, h4 { margin: 0; font-family: var(--display-font); }

.display {
  font-size: clamp(40px, 7vw, 96px);
  line-height: 1.0417;
  letter-spacing: -0.015em;
  font-weight: 600;
}
.heading-lg { text-wrap: balance;
  font-size: clamp(36px, 5.6vw, 80px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 600;
}
.heading {
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.0714;
  letter-spacing: -0.005em;
  font-weight: 600;
}
/* Mid sizes take slightly POSITIVE tracking — it reads warmer, and is the
   counterweight to the tight display sizes above. */
.body-lg { text-wrap: balance; font-size: clamp(21px, 2vw, 28px); line-height: 1.1429; letter-spacing: 0.007em; font-weight: 600; }
.body    { font-size: 21px; line-height: 1.381; letter-spacing: 0.011em; font-weight: 400; }
.body-sm { font-size: 17px; line-height: 1.4706; letter-spacing: -0.022em; }
.caption { font-size: 14px; line-height: 1.2857; letter-spacing: -0.016em; color: var(--mid-gray); }

.muted { color: var(--mid-gray); }

/* ── Layout ────────────────────────────────────────────────────────────────
   Rhythm is alternating bands. There are no dividers in this stylesheet on
   purpose — if two sections need separating, change the canvas colour. */

/*
 * Every band is white.
 *
 * The reference builds its rhythm by alternating white and #f5f5f7, so
 * removing the second surface removes the mechanism. Whitespace does the work
 * instead: sections carry more vertical room than the reference specifies, and
 * where a boundary genuinely has to be felt there is a single hairline. That
 * is the only honest substitute — a border on every section would be louder
 * than the grey band ever was.
 */
/*
 * 136px top and bottom put 272px of nothing between every section, and with
 * no tone bands to fill it that measured out at a quarter of the whole page
 * being empty. The reference can afford those numbers because full-bleed
 * product imagery sits inside them; this page is a 1200px text column, so the
 * same padding reads as a page that stopped loading.
 */
.band { padding-block: clamp(44px, 4.6vw, 76px); background: var(--paper); }

.wrap { max-width: var(--max); margin: 0 auto; padding-inline: clamp(22px, 5vw, 40px); }

/* Large displays. At 1710px a 1200px column fills 70% of the screen and looks
   right; by 2600px it fills 45% and the page reads as a strip floating in
   white. The shell widens in steps rather than fluidly so the common sizes
   keep the proportions they were designed at. */
@media (min-width: 1800px) { :root { --max: 1400px; } }
@media (min-width: 2200px) { :root { --max: 1640px; } }
@media (min-width: 2800px) { :root { --max: 1880px; } }

/* Copy never stretches with the shell — only the layout does. */
@media (min-width: 1800px) {
  .lede__body > *, .feature .body-sm, .feature .body { max-width: var(--measure); }
  .narrow { max-width: 780px; }
}
.center { text-align: center; }
.narrow { max-width: 690px; }
.narrow.center { margin-inline: auto; }

/* ── Buttons ───────────────────────────────────────────────────────────────
   Pills only. The filled one is the single chromatic control in the system and
   should appear at most once per band. */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--text-font); font-size: 17px; font-weight: 400;
  letter-spacing: -0.022em; line-height: 1.1765;
  padding: 12px 22px; border-radius: var(--r-btn);
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--fill { background: var(--nova); color: #000; border-color: var(--nova); }
.btn--fill:hover { background: var(--nova-hover); border-color: var(--nova-hover); }
/* The filled pill appears once per band, so a second audience needs equal
   weight without a second block of colour. */
.btn--line { border-color: var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--ink); color: #fff; }

/* An arrow link, not a button. No box, no fill — colour and a chevron. */
/* Apple sets inline links in blue. There is no legible yellow equivalent on
   white, so the link is ink with a chevron and takes the accent on hover. */
.arrow {
  color: var(--ink); font-size: 17px; letter-spacing: -0.022em;
  display: inline-flex; align-items: baseline; gap: 4px;
  transition: color .2s ease;
}
.arrow:hover { color: #8a6a00; }
.arrow:hover { text-decoration: underline; }
.arrow::after { content: "\203A"; font-size: 1.25em; line-height: 1; }


/* ── Promo ribbon + navigation ─────────────────────────────────────────── */

.ribbon {
  background: var(--canvas); color: var(--ink);
  font-size: 14px; letter-spacing: -0.016em;
  text-align: center; padding: 10px 22px;
}
.ribbon a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ribbon a:hover { text-decoration: underline; }

.nav {
  position: sticky; top: 0; z-index: 50;
  height: 44px; background: rgba(250,250,252,.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.nav__inner {
  max-width: var(--max); margin: 0 auto; height: 100%;
  padding-inline: clamp(22px, 5vw, 40px);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.nav__logo { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.nav__links { display: none; gap: 8px; }
@media (min-width: 900px) { .nav__links { display: flex; } }
.nav__links a {
  font-size: 12px; letter-spacing: -0.01em; color: var(--ink);
  padding: 0 10px; opacity: .88; transition: opacity .2s ease;
}
.nav__links a:hover { opacity: 1; }
.nav__end { display: flex; align-items: center; gap: 14px; }
.nav__end a { font-size: 12px; letter-spacing: -0.01em; }
.nav__toggle {
  display: grid; place-items: center; width: 28px; height: 28px;
  background: none; border: 0; color: var(--ink); cursor: pointer; padding: 0;
}
@media (min-width: 900px) { .nav__toggle { display: none; } }

.drawer {
  position: fixed; inset: 44px 0 0; z-index: 45;
  background: var(--faded); padding: 12px clamp(22px, 5vw, 40px);
  overflow: auto;
}
.drawer[hidden] { display: none; }
.drawer a {
  display: block; font-size: 24px; font-weight: 600; letter-spacing: -0.02em;
  padding: 14px 0; border-bottom: 1px solid var(--hairline);
}

/* ── Hero ──────────────────────────────────────────────────────────────────
   A centred stack — eyebrow, oversized headline, one CTA, a price line — and
   then the photograph filling the lower half. */

.hero { padding-top: clamp(36px, 5vw, 56px); padding-bottom: 0; }
.hero__eyebrow { font-size: 17px; letter-spacing: -0.022em; margin-bottom: 6px; }
.hero__cta { display: flex; gap: 26px; justify-content: center; align-items: center;
             flex-wrap: wrap; margin-top: 22px; }

/* ── Cards ─────────────────────────────────────────────────────────────────
   No border, no shadow. A card is a radius and a background colour. */

/* On an all-white page a white card is invisible, so a card is the one place
   the pale surface survives — as a filled shape, not as a band. */
.card {
  background: var(--canvas); border-radius: var(--r-card);
  padding: clamp(28px, 4vw, 40px); overflow: hidden;
}
.card.plain { background: var(--paper); padding: 0; }
.grid { display: grid; gap: 20px; }
@media (min-width: 700px)  { .grid.two   { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .grid.three { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px)  { .grid.four  { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid.four  { grid-template-columns: repeat(4, 1fr); } }

/* A tile whose background is the content — the finish-swatch idea applied to
   bays. The rate sits on the colour; nothing else competes with it. */

/* ── Price comparison ────────────────────────────────────────────────────
   Two rows sharing a baseline, so the eye lands on the difference rather than
   reading two separate facts and doing the subtraction itself. */
.vs { display: grid; gap: 0; }
.vs__row, .spec__row {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--hairline);
}

/* Same row, quieter type: these are facts about the product rather than a
   number the reader is meant to react to. */
.spec__row { padding: 15px 0; }
.spec__row:last-child { border-bottom: 0; padding-bottom: 0; }
.spec__k { font-size: 15px; color: var(--mid-gray); letter-spacing: -0.018em; }
.spec__v { font-size: 19px; font-weight: 600; letter-spacing: -0.022em; }
@media (max-width: 560px) { .spec__row { grid-template-columns: 1fr; gap: 4px; } }
.vs__row:last-of-type { border-bottom: 0; }
.vs__k { font-size: 17px; font-weight: 600; letter-spacing: -0.022em; }
.vs__s { font-size: 14px; color: var(--mid-gray); margin-top: 2px; letter-spacing: -0.016em; }
.vs__v { font-size: 40px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; white-space: nowrap; }
.vs__row.muted-row .vs__k, .vs__row.muted-row .vs__v { color: var(--mid-gray); }
.vs__row.muted-row .vs__v { text-decoration: line-through; text-decoration-thickness: 2px; }
.vs__delta {
  margin-top: 20px; padding: 16px 18px; border-radius: 14px;
  background: var(--nova); color: #000;
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
}
.vs__delta b { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; }
.vs__delta span { font-size: 15px; font-weight: 500; letter-spacing: -0.018em; }

@media (max-width: 560px) {
  .vs__row { grid-template-columns: 1fr; gap: 6px; }
  .vs__delta { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ── Device ────────────────────────────────────────────────────────────────
   The reference lets product imagery carry every bit of colour while the
   interface stays monochrome. That rule is what makes an all-white page still
   feel like it has an accent: Supernova lives inside the screen. */
.devices {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(10px, 1.6vw, 22px);
}
.devices .device--side { display: none; }
@media (min-width: 1000px) {
  .devices .device--side { display: block; width: 288px; }
  .devices .device--side .device__screen { padding-top: 18px; }
  .devices .device--side .scrn { gap: 6px; }
}
.device--side { opacity: .96; }

.device {
  width: min(310px, calc(100vw - 48px)); margin-inline: auto;
  background: #0a0a0a; border-radius: 44px; padding: 10px;
  position: relative;
}
.device__notch {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 92px; height: 24px; background: #0a0a0a; border-radius: 999px; z-index: 2;
}
.device__screen {
  background: var(--paper); border-radius: 35px; overflow: hidden;
  aspect-ratio: 9 / 19.2; padding: 34px 16px 18px;
  display: flex; flex-direction: column; gap: 10px;
}

/* A pill inside a screen — status, not chrome. */

/* Two audiences, side by side. */
.who { display: grid; gap: 20px; }
@media (min-width: 900px) { .who { grid-template-columns: 1fr 1fr; gap: 24px; } }
.who > .card { display: flex; flex-direction: column; }
.who > .card > p:last-child { margin-top: auto; padding-top: 28px; }
.who__head { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }
.who__tag {
  font-size: 11px; font-weight: 600; letter-spacing: 0; padding: 5px 12px;
  border-radius: 999px; background: var(--ink); color: #fff;
}
.who__tag.alt { background: var(--nova); color: #000; }
.who ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.who li {
  display: grid; grid-template-columns: 26px 1fr; gap: 14px;
  padding: 18px 0; border-bottom: 1px solid var(--hairline); align-items: start;
}
.who li:last-child { border-bottom: 0; padding-bottom: 4px; }
/*
 * The tick, the heading and the description are three grid items in a
 * two-column track, so auto-placement drops the description into row two,
 * column one — squeezed into the 26px tick column, 40px left of its own
 * heading. Pinning both text nodes to column two is what keeps them on one
 * left edge with the mark hanging outside.
 */
.who li > b, .who li > span { grid-column: 2; }

.who li::before {
  content: "\2713"; font-size: 15px; font-weight: 600; line-height: 1.6;
  color: var(--ink); grid-column: 1; grid-row: 1;
}
.who li b {
  display: block; font-size: 17px; font-weight: 600; line-height: 1.5;
  letter-spacing: -0.022em;
}
.who li span {
  display: block; font-size: 15px; line-height: 1.47; color: var(--mid-gray);
  margin-top: 4px; letter-spacing: -0.018em;
}

/* ── App screens ─────────────────────────────────────────────────────────
   Real interface, rebuilt in markup. It stays sharp at any size, follows the
   page's own type, and cannot drift out of date the way a screenshot does. */

.device__screen { padding: 0; background: #f2f2f4; }
.sb {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 4px; font-size: 12px; font-weight: 600; letter-spacing: -0.01em;
}
.sb__r { display: flex; align-items: center; gap: 4px; }
.scrn {
  padding: 2px 13px 12px; display: flex; flex-direction: column; gap: 8px;
  overflow: hidden; flex: 1;
}
/* Screen content is taller than the device on purpose — a phone screen that
   fits everything is not a real screen. Without this the flex container
   squashes the tallest child to nothing rather than letting the frame clip it. */
.scrn > * { flex: none; }

/* These labels are spans so they can nest inside interactive rows, which means
   they need telling to stack. */
.shead__t, .shead__s,
.bid__n, .bid__m,
.greet__k, .greet__n,
.row__t, .row__s,
.portal__t, .portal__s,
.carcard__sub,
.tab { display: block; }
.bid__id, .row__c, .shead__c, .portal, .carcard__foot > div { display: block; }
.tab { display: grid; }

/* Header row with a back control */
.shead { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0 2px; }
.sback {
  width: 30px; height: 30px; flex: none; border-radius: 999px;
  background: #fff; display: grid; place-items: center; font-size: 13px; color: var(--ink);
}
.shead__c { flex: 1; text-align: center; padding-right: 30px; }
.shead__t { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; }
.shead__s { font-size: 10.5px; color: var(--mid-gray); margin-top: 1px; }

/* Sort row */
.sorts { display: flex; align-items: center; gap: 6px; }
.sorts__k { font-size: 9.5px; font-weight: 600; color: var(--mid-gray); letter-spacing: .02em; }
.spill {
  font-size: 10.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--hairline); background: #fff; color: var(--ink);
}
.spill.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* A bid */
.bid { background: #fff; border-radius: 13px; padding: 11px; display: grid; gap: 8px; }
.bid.lead { border: 1.5px solid var(--ink); }
.bid.faded { opacity: .42; }
.bid__top { display: flex; align-items: flex-start; gap: 9px; }
.av { width: 34px; height: 34px; border-radius: 999px; background: #e6e6e8;
      display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #6e6e73; flex: none; }
.bid__id { flex: 1; min-width: 0; }
.bid__n { font-size: 13px; font-weight: 700; letter-spacing: -0.02em; }
.bid__m { font-size: 10px; color: var(--mid-gray); margin-top: 1px; }
.badge {
  font-size: 9.5px; font-weight: 700; padding: 4px 9px; border-radius: 6px;
  letter-spacing: .01em; flex: none;
}
.badge.gold   { background: var(--nova); color: #4a3a00; }
.badge.bronze { background: #8a6a4a; color: #fff; }
.bid__stars { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; }
.bid__stars b { font-weight: 700; }
.bid__stars .n { color: var(--mid-gray); }
.ok { color: #1a8a3c; font-weight: 600; font-size: 10.5px; }
.tags { display: flex; gap: 5px; flex-wrap: wrap; }
.tags span {
  font-size: 9.5px; padding: 4px 8px; border-radius: 999px;
  border: 1px solid var(--hairline); color: var(--ink);
}
.bid__rule { height: 1px; background: var(--hairline); }
.bid__price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.bid__price b { font-size: 19px; font-weight: 700; letter-spacing: -0.03em; }
.bid__price span { font-size: 10px; color: var(--mid-gray); }
.bid__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sbtn {
  text-align: center; font-size: 11.5px; font-weight: 700; padding: 9px;
  border-radius: 10px; border: 1px solid var(--hairline); background: #fff; color: var(--ink);
}
.sbtn.fill { background: var(--ink); color: #fff; border-color: var(--ink); }

.dashed {
  border: 1px dashed var(--ash); border-radius: 10px; padding: 10px 11px;
  font-size: 10px; line-height: 1.45; color: var(--mid-gray);
}
.dashed b { color: var(--ink); font-weight: 700; }

/* Home screen */
.greet__k { font-size: 9.5px; font-weight: 700; color: var(--mid-gray); letter-spacing: .04em; }
.greet__n { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; }
.carcard { background: #fff; border-radius: 14px; overflow: hidden; }
.carcard__art { background: #ededf0; padding: 7px 12px; }
.carcard__b { padding: 10px 12px; }
.carcard__t { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.carcard__t b { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; }
.carcard__sub { font-size: 10.5px; color: var(--mid-gray); margin-top: 2px; }
.carcard__foot { display: flex; justify-content: space-between; gap: 10px;
                 margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.carcard__foot .k { font-size: 9.5px; color: var(--mid-gray); }
.carcard__foot .v { font-size: 11.5px; font-weight: 700; margin-top: 1px; }
.bigbtn {
  background: var(--ink); color: #fff; border-radius: 12px; text-align: center;
  padding: 14px; font-size: 13px; font-weight: 700; letter-spacing: -0.02em;
}
.rows { background: #fff; border-radius: 13px; padding: 0 11px; }
.row {
  display: flex; align-items: center; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}
.row:last-child { border-bottom: 0; }
.row__i { width: 30px; height: 30px; border-radius: 8px; background: #f0f0f2;
          display: grid; place-items: center; flex: none; }
.row__c { flex: 1; min-width: 0; }
.row__t { font-size: 12px; font-weight: 700; letter-spacing: -0.02em; }
.row__s { font-size: 10px; color: var(--mid-gray); margin-top: 1px; }
.row__x { font-size: 11px; color: var(--ash); }
.ypill { font-size: 9.5px; font-weight: 700; padding: 4px 8px; border-radius: 999px;
         background: #fff3c4; color: #6b5200; }
.tabs {
  margin-top: auto; background: #fff; display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 9px 0 12px; border-top: 1px solid var(--hairline);
}
.tab { display: grid; justify-items: center; gap: 3px; font-size: 8.5px; color: var(--ash); }
.tab.on { color: var(--ink); font-weight: 700; }

/* Onboarding */
.greenpill {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  font-size: 10.5px; font-weight: 700; padding: 6px 11px; border-radius: 999px;
  background: #e6f6ea; color: #1a8a3c;
}
.ask { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.16; }
.asksub { font-size: 11px; color: var(--mid-gray); line-height: 1.45; }
.portal { background: #fff; border-radius: 14px; padding: 10px 11px; display: grid; gap: 6px; }
.portal.lead { border: 1.5px solid var(--ink); }
.portal__i { width: 28px; height: 28px; border-radius: 9px; background: #f0f0f2;
             display: grid; place-items: center; }
.portal__t { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; }
.portal__s { font-size: 10.5px; color: var(--mid-gray); line-height: 1.45; }
.portal__b {
  justify-self: start; font-size: 11px; font-weight: 700; padding: 8px 14px;
  border-radius: 999px; border: 1px solid var(--hairline); background: #fff; color: var(--ink);
}
.portal__b.fill { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ── Section header ───────────────────────────────────────────────────────
   A headline alone in a 690px column leaves the right half of a 1200px grid
   empty. On a wide display that does not read as restraint, it reads as a page
   that failed to finish — and it repeated on every section.

   Splitting the headline from its standfirst uses the whole measure. The two
   columns are bottom-aligned so the supporting copy settles onto the headline's
   last baseline; that shared floor is what makes them read as one header
   rather than as two unrelated blocks. */
.lede { display: grid; gap: 20px; }
/* The browser's own paragraph margin is 1em, which pushed the copy 21px below
   the headline it is supposed to start level with, and compounded with the
   spacing set between paragraphs. Spacing here is declared, not inherited. */
.lede__body > * { margin: 0; }
.lede__body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.lede__body > * + * { margin-top: 20px; }
@media (min-width: 900px) {
  .lede {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(40px, 5vw, 88px);
    align-items: start;
  }
  /* Both columns start on the same line. Bottom-aligning them looked right
     when the headline was the taller of the two and wrong the moment the copy
     ran longer — the paragraph floated above the headline with nothing beside
     it. The offset is the eyebrow rule the headline sits under, so the copy
     starts level with the headline's first line rather than with its rule. */
  .lede__body { padding-top: 25px; }
}
/* Half the grid is half the measure. An 80px headline set into a 590px column
   breaks after three or four words and stacks into a tower that dwarfs the
   copy beside it, so the display size steps down to suit the column it is
   actually being set in. */
.lede .heading-lg { font-size: clamp(32px, 3.6vw, 54px); line-height: 1.08; }
@media (min-width: 900px) {
}

/* ── Feature row ───────────────────────────────────────────────────────── */

.feature { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) {
  .feature { grid-template-columns: 1fr 1fr; }
  .feature--flip > *:last-child { order: -1; }
}

/* A wide detail band — the tight crop of the same subject the hero showed
   whole. Apple pairs a wide product shot with a close crop of it constantly. */
.strip {
  margin-top: clamp(34px, 4vw, 52px);
  border-radius: var(--r-card); overflow: hidden; background: var(--canvas);
  aspect-ratio: 37 / 14;
}
.strip img { width: 100%; height: 100%; object-fit: cover; }

/* A rule under a section eyebrow, in place of the band change that used to
   mark a new section. One hairline, not a box. */
.tick { display: block; width: 40px; height: 3px; background: var(--nova); margin-bottom: 22px; }

/* ── Compare table ─────────────────────────────────────────────────────── */


/* ── Contact ─────────────────────────────────────────────────────────────
   A physical business needs its address somewhere findable, not buried in the
   third column of a feature row. */
.visit {
  display: grid; gap: 28px; padding: 32px 0 0; border-top: 1px solid var(--hairline);
}
@media (min-width: 760px) { .visit { grid-template-columns: repeat(3, 1fr); } }
.visit__k { font-size: 14px; color: var(--mid-gray); margin-bottom: 8px; letter-spacing: -0.016em; }
.visit__v { font-size: 21px; font-weight: 600; letter-spacing: -0.022em; line-height: 1.3; }

/* The closing headline needs a measure its own size can actually break in
   two; the section's 690px column stranded two words on a line of their own.
   Only the display line takes the extra room — the copy under it stays at a
   readable measure rather than stretching to match. */
#get .wrap { max-width: 900px; }
#get .body, #get .body-sm { max-width: 640px; margin-inline: auto; }

/* ── FAQ ──────────────────────────────────────────────────────────────────
   Built on <details>, so it opens without JavaScript, is keyboard operable for
   free, and — the part that matters here — its text is in the DOM whether or
   not it is expanded, which is what lets a crawler and an assistant read every
   answer. A div-and-script accordion would hide the answers from both. */
.faq { margin-top: 44px; border-top: 1px solid var(--hairline); }
.faq__item { border-bottom: 1px solid var(--hairline); }

.faq__item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 24px 0;
  transition: color .2s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--deep-gray); }
.faq__item summary:focus-visible { outline-offset: -3px; }

/* The question is a real heading so the document outline survives, but it must
   not carry heading margins inside a flex row. */
.faq__item summary h3 {
  margin: 0; font-size: clamp(19px, 1.6vw, 23px); font-weight: 600;
  letter-spacing: -0.021em; line-height: 1.3; text-wrap: balance;
}

/* A plus that becomes a minus. Two rules rather than an icon font or an SVG
   per row — it is the only piece of chrome in the component. */
.faq__item summary::after {
  content: ""; flex: none; position: relative; top: 7px;
  width: 15px; height: 15px;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 15px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2px 15px no-repeat;
  transition: transform .25s ease;
}
.faq__item[open] summary::after { transform: rotate(90deg); background-size: 0 0, 2px 15px; }

.faq__a { padding: 0 0 26px; max-width: 74ch; }
.faq__a p { margin: 0; font-size: 17px; line-height: 1.5294; letter-spacing: -0.022em; color: var(--mid-gray); }
.faq__a p + p { margin-top: 14px; }
.faq__a a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .faq__item summary::after { transition: none; }
}

/* ── Signup form ──────────────────────────────────────────────────────── */

.signup { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.signup input[type="email"], .signup select {
  font-family: inherit; font-size: 17px; letter-spacing: -0.022em;
  padding: 12px 22px; border: 1px solid var(--hairline); border-radius: var(--r-btn);
  background: var(--paper); color: var(--ink);
}
.signup input[type="email"] { min-width: min(300px, 78vw); }
.signup select { cursor: pointer; padding-right: 18px; }
.signup input[type="email"]:focus-visible, .signup select:focus-visible { border-color: var(--ink); }
/* Invalid only once the field has been touched — colouring an empty required
   field red before anyone has typed is a scolding, not a hint. */
.signup input[type="email"]:user-invalid { border-color: #b3261e; }
.signup .btn { cursor: pointer; }
.signup[aria-busy="true"] .btn { opacity: .6; pointer-events: none; }

/* The bot trap. Off-screen rather than display:none, because some bots skip
   anything that is not rendered. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Skip link — first thing in the tab order, invisible until focused. */
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 8px;
  font-size: 15px; transition: top .15s ease;
}
.skip:focus { top: 12px; }

/* ── Touch targets ────────────────────────────────────────────────────────
   A 15px-tall footer link is a 15px-tall target, and WCAG 2.5.8 asks for 24px
   minimum — Google's mobile report flags it too. The type stays the size it
   was; the hit area grows around it, so nothing about the layout changes
   except how easy the link is to actually press with a thumb. */
@media (pointer: coarse) {
  /* The menu button is the primary navigation control on a phone and was a
     28px target. Everything here clears the 44px Apple and Google both ask
     for; the type stays put and only the hit area grows. */
  .nav__toggle { min-width: 44px; min-height: 44px; }
  .hero__actions .arrow, .feature .arrow, .lede__body a { min-height: 44px; display: inline-flex; align-items: center; }

  .footer li a,
  .footer__cols li a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .footer li { margin: 0; }

  .nav__logo, .nav__end .arrow, .ribbon a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .visit .arrow, .faq__a a, .doc a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  /* The FAQ row is already a large target, but the summary padding makes the
     whole row pressable rather than just the words. */
  .faq__item summary { padding: 20px 0; min-height: 56px; }
}

/* A pill label at 11px is below the size anything should be set at on a
   phone. */
.who__tag { font-size: 12px; }

/* ── Document pages ───────────────────────────────────────────────────────
   Privacy, terms, deletion and the 404. These are read, not scanned, so the
   measure is tight and the type is plain — none of the display sizes the
   marketing page uses would help someone checking what happens to their data. */
.doc { max-width: 72ch; }
.doc h1 { margin-bottom: 8px; }
.doc h2 {
  font-size: clamp(21px, 2vw, 26px); font-weight: 600; letter-spacing: -0.021em;
  line-height: 1.25; margin: 44px 0 12px;
}
.doc p, .doc li { font-size: 17px; line-height: 1.5882; letter-spacing: -0.022em; color: var(--deep-gray); }
.doc p { margin: 0 0 14px; }
.doc ul { margin: 0 0 14px; padding-left: 22px; }
.doc li { margin-bottom: 6px; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.doc__meta { font-size: 14px; color: var(--mid-gray); margin-bottom: 36px !important; }

/* ── Footer ────────────────────────────────────────────────────────────── */

.footer { background: var(--canvas); padding-block: 40px; }
.footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 18px; padding-block: 18px 30px;
                border-bottom: 1px solid var(--hairline); }
@media (min-width: 760px) { .footer__cols { grid-template-columns: repeat(4, 1fr); } }
.footer .footer__h { font-size: 12px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 10px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer li a { font-size: 12px; letter-spacing: -0.01em; color: var(--mid-gray); }
.footer li a:hover { color: var(--ink); text-decoration: underline; }
.footer__legal { padding-top: 18px; font-size: 12px; line-height: 1.3333; color: var(--mid-gray); }
.footer__legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer__legal p { margin: 0 0 10px; }

/* ── Motion ────────────────────────────────────────────────────────────────
   One effect only: content rises a short distance as it arrives. Apple's pages
   are quiet; anything more would be the wrong register. */

.rise { opacity: 0; transform: translateY(22px); }
.rise.in {
  opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.28,.11,.32,1) var(--d, 0ms),
              transform .8s cubic-bezier(.28,.11,.32,1) var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .rise.in { opacity: 1 !important; transform: none !important; transition: none !important; }
}