/*
 * snoocare.com - the marketing site, wearing the app's own desk.
 *
 * Every token below is the literal the Swift side holds
 * (Packages/BrandKit/Sources/BrandKit/BrandColor.swift) and the portal's own stylesheet repeats
 * (Cloud/portal/src/styles.css). This file is a standalone copy on purpose: the preview site is
 * plain static HTML served from public/, not a page of the Vite bundle, so it may not import the
 * portal's CSS. Nothing here is re-derived; where a value differs from the portal it is because
 * a marketing page has objects the portal does not (a hero, a device stage, a price plate).
 *
 * Two kinds of object, kept apart, exactly as the app keeps them:
 *   A PANEL or PLATE is recessed or floating, and REPORTS. It never presses.
 *   A KEY is raised, and DOES something. It drops 3 px when pressed.
 */

:root {
  color-scheme: dark;

  /* ---- palette (BrandColor.swift) ---- */
  --room: #080d14;
  --desk: #161f2d;
  --plate: #0e141c;
  --plate-lit: #131b25;
  --accent: #4fd1ff;
  --lamp-red: #ff5a4e;
  --secondary: #a9b6c7;
  --cloth: #142a22;
  /* The cloth of the hero table, deepened until a blue-black room can sit over it. */
  --cloth-deep: #0d1f18;
  --cloth-deeper: #091510;
  --chalk-white: #e6edf5;
  --dim: #7f8da0;
  --disabled: #4a5768;
  --go: #3ddc84;
  --amber: #f2b24a;
  --logo-green: #079037;

  /* ---- faces and recesses (DeskShade.swift) ---- */
  --panel-top: rgba(34, 46, 62, 0.9);
  --panel-bottom: rgba(24, 33, 46, 0.9);
  --key-top: #26313f;
  --key-bottom: #1a2330;
  --primary-top: #1c3442;
  --primary-bottom: #132633;
  --sub-plate: rgba(14, 20, 28, 0.7);
  --trough: #060a10;
  --lamp-ne: rgba(38, 104, 150, 0.38);
  --lamp-sw: rgba(24, 72, 110, 0.32);

  /* ---- keylines (DeskPlate.Keyline) ---- */
  --keyline: rgba(230, 237, 245, 0.08);
  --keyline-soft: rgba(230, 237, 245, 0.12);
  --keyline-faint: rgba(230, 237, 245, 0.06);
  --row-rule: rgba(230, 237, 245, 0.05);

  /* ---- shadows ---- */
  --panel-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  --panel-lip: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --key-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
  --key-shadow-pressed: 0 2px 4px rgba(0, 0, 0, 0.5);
  --plate-inset: inset 0 2px 8px rgba(0, 0, 0, 0.7);
  --trough-inset: inset 0 2px 8px rgba(0, 0, 0, 0.8);

  /* ---- type (DeskType.swift) ---- */
  --font-label: 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --font-numeral: 'Barlow Condensed', 'Barlow', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --gutter: 28px;
  --measure: 1160px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Belt and braces with the rule on `body`: nothing may ever push the page sideways. */
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/*
 * The room: blue-black, with the two lamps `RoomBackground` draws - an ellipse in the upper right
 * and one in the lower left, each fading out at 70 % of its radius.
 */
body {
  margin: 0;
  min-height: 100vh;
  /* The hero's layers are moved with transforms; nothing may leak sideways out of the page. */
  overflow-x: hidden;
  background-color: var(--room);
  background-image:
    radial-gradient(ellipse 55% 45% at 78% 6%, var(--lamp-ne), transparent 70%),
    radial-gradient(ellipse 45% 55% at 8% 72%, var(--lamp-sw), transparent 70%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--secondary);
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

img {
  display: block;
  height: auto;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--chalk-white);
}

a:focus-visible,
button:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* Present to a screen reader, gone from the page. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- type ---- */

h1,
h2,
h3 {
  font-family: var(--font-numeral);
  font-weight: 600;
  color: var(--chalk-white);
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(34px, 5.4vw, 66px);
  line-height: 1.04;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

h2 {
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.06;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

h3 {
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

p {
  margin: 0 0 14px;
}

/* An engraved caption: mono, uppercase, tracked. The app's own readout face. */
.caption {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
}

.caption-accent {
  color: var(--accent);
}

/* ---- keys ---- */

.key,
.button {
  font-family: var(--font-label);
  font-weight: 600;
  text-transform: uppercase;
  border-style: solid;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, border-color 0.12s ease-out;
}

.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 18px;
  border-radius: 6px;
  border-width: 1px;
  border-color: var(--keyline);
  background: linear-gradient(180deg, var(--key-top), var(--key-bottom));
  box-shadow: var(--key-shadow);
  color: var(--chalk-white);
  font-size: 11px;
  letter-spacing: 0.16em;
}

.key:hover {
  border-color: rgba(230, 237, 245, 0.2);
  color: var(--chalk-white);
}

.key:active,
.button:active {
  transform: translateY(3px);
  box-shadow: var(--key-shadow-pressed);
}

/* The one wanted key on a row: a cyan edge on a face darkened toward it, with the schema's glow. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  padding: 0 24px;
  border-radius: 8px;
  border-width: 1.5px;
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--primary-top), var(--primary-bottom));
  box-shadow: var(--key-shadow), 0 0 20px rgba(79, 209, 255, 0.3);
  color: var(--chalk-white);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-shadow: 0 0 12px rgba(79, 209, 255, 0.6);
}

.button:hover {
  color: var(--chalk-white);
  box-shadow: var(--key-shadow), 0 0 28px rgba(79, 209, 255, 0.45);
}

.key-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

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

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(8, 13, 20, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--keyline-soft);
}

.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
}

.brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.brand img {
  height: 24px;
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav a {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}

.nav a:hover {
  color: var(--accent);
}

@media (max-width: 720px) {
  .nav .nav-link {
    display: none;
  }
}

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

/*
 * The copy on the left, the real app on the right, in the same iPad frame the lineup draws. Under
 * 900px the two stack and the app sits under the copy at full width.
 */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: 76px 92px;
  overflow: hidden;
}

/* The one lamp over the app, the way the desk lights a table. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 46% 60% at 74% 52%, rgba(79, 209, 255, 0.1), transparent 70%);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 52px;
}

.hero-eyebrow {
  margin: 0 0 18px;
  letter-spacing: 0.16em;
}

.hero h1 {
  margin: 0;
  font-size: clamp(34px, 4.3vw, 56px);
  text-wrap: wrap;
}

.hero h1 .glow {
  color: var(--accent);
  text-shadow: 0 0 28px rgba(79, 209, 255, 0.5);
}

.hero-lede {
  margin: 22px 0 30px;
  max-width: 44ch;
  font-size: 18px;
  color: var(--secondary);
}

.hero-keys {
  margin-bottom: 28px;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}

.hero-stats .caption::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 9px;
  vertical-align: 2px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(79, 209, 255, 0.7);
}

.hero-device {
  will-change: transform;
}

.hero-device .ipad-body {
  border-radius: 22px;
  box-shadow: var(--panel-shadow), 0 0 60px rgba(79, 209, 255, 0.12);
}

@media (max-width: 900px) {
  .hero {
    padding-block: 56px 68px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }

  .hero::before {
    background: radial-gradient(ellipse 80% 40% at 50% 78%, rgba(79, 209, 255, 0.1), transparent 70%);
  }
}

@media (max-width: 520px) {
  .hero-device .ipad-body {
    border-radius: 14px;
  }

  .hero-device .ipad-body .device-screen {
    border-radius: 7px;
  }
}

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

.section {
  padding-block: 96px;
  position: relative;
  /* Clear the sticky masthead when a nav link lands on the section. */
  scroll-margin-top: 62px;
}

.section-head {
  max-width: 62ch;
  margin-bottom: 44px;
}

.section-head h2 {
  margin: 14px 0 0;
}

.section-lede {
  margin: 16px 0 0;
  max-width: 56ch;
  text-wrap: pretty;
}

.rule {
  border: 0;
  border-top: 1px solid var(--keyline-faint);
  margin: 0;
}

/* ---- the lineup ---- */

/*
 * One composed family, not five slots: a fixed 16:7 stage, every device placed on it with
 * percentage left/top/width, so the overlaps hold at every width. Heights come from each frame's
 * own aspect-ratio and from paddings given in percent - a percentage padding resolves against the
 * element's own containing block width, so the whole assembly is one scalable drawing.
 */

.family {
  position: relative;
  aspect-ratio: 16 / 7;
}

.family .device {
  position: absolute;
  will-change: transform;
  min-width: 0;
}

/* The one pool of shade the family stands in. */
.family-floor {
  position: absolute;
  left: -2%;
  right: -2%;
  top: 52%;
  bottom: -6%;
  pointer-events: none;
  background: radial-gradient(
    58% 52% at 55% 74%,
    rgba(0, 0, 0, 0.82),
    rgba(0, 0, 0, 0.44) 42%,
    rgba(0, 0, 0, 0) 76%
  );
  filter: blur(14px);
}

.fam-tv {
  left: 2.2%;
  top: 26.89%;
  width: 38%;
  z-index: 1;
}

.fam-mac {
  left: 28.5%;
  top: 4%;
  width: 49%;
  z-index: 2;
}

.fam-ipad {
  left: 56%;
  top: 35.2%;
  width: 32%;
  z-index: 3;
}

.fam-iphone {
  left: 83%;
  top: 32.1%;
  width: 13.5%;
  z-index: 4;
}

.fam-watch {
  left: 77.3%;
  top: 72.6%;
  width: 9.8%;
  z-index: 5;
}

/* Under 700px the family stops being a photograph and becomes a stack: same devices, full width,
 * nothing overlapping, still no captions. */
@media (max-width: 700px) {
  .family {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 34px;
  }

  .family .device {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    transform: none !important;
  }

  .family-floor {
    display: none;
  }

  /* The TV leads the stage so it sits behind everything; in the stack the desk comes first. */
  .fam-mac {
    order: 1;
  }

  .fam-tv {
    order: 2;
  }

  .fam-ipad {
    order: 3;
  }

  .fam-iphone {
    order: 4;
    width: 62%;
    align-self: center;
  }

  .fam-watch {
    order: 5;
    width: 42%;
    align-self: center;
  }
}

/* ---- the device frames ----
 *
 * Drawn here, in CSS: dark rounded bodies with the one detail each needs - a notch, a crown, a
 * stand, a foot. They are stand-ins for the hardware, never a copy of it.
 */

.device {
  position: relative;
}

.device-screen {
  overflow: hidden;
  background: var(--room);
  display: block;
}

.device-screen img {
  width: 100%;
  min-width: 0;
  display: block;
}

/* Every metric below is a percentage of the frame's own width, so one set of rules draws the
 * family at any stage width and draws the phone-width stack too. */

/* MacBook Pro: a lid, a hinge rail, a tapered base. */
.mac-lid {
  border: 1px solid rgba(230, 237, 245, 0.14);
  border-radius: 12px 12px 4px 4px;
  background: linear-gradient(180deg, #232c38, #141b25);
  padding: 1.5% 1.5% 2.2%;
  box-shadow: var(--panel-shadow);
}

.mac-lid .device-screen {
  border-radius: 4px;
  aspect-ratio: 16 / 10;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.9);
}

.mac-lid .device-screen img {
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.mac-camera {
  width: 0.9%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #2b3644;
  margin: 0 auto 1.1%;
}

.mac-base {
  height: 0;
  padding-bottom: 2.1%;
  width: 106%;
  max-width: 106%;
  margin-left: -3%;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, #1d2532, #0d131b);
  border: 1px solid rgba(230, 237, 245, 0.1);
  border-top: none;
  box-sizing: border-box;
  position: relative;
}

.mac-base::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 16%;
  aspect-ratio: 16 / 0.9;
  border-radius: 0 0 4px 4px;
  background: rgba(8, 13, 20, 0.9);
}

/* Television: a flat panel on a thin neck and a wide foot. */
.tv-panel {
  border: 1px solid rgba(230, 237, 245, 0.14);
  border-radius: 8px;
  background: #0b0f16;
  padding: 1.6%;
  box-shadow: var(--panel-shadow);
}

.tv-panel .device-screen {
  border-radius: 3px;
  aspect-ratio: 16 / 9;
}

.tv-panel .device-screen img {
  height: 100%;
  object-fit: cover;
}

.tv-neck {
  width: 14%;
  aspect-ratio: 14 / 3;
  margin: 0 auto;
  background: linear-gradient(180deg, #1d2532, #141b25);
}

.tv-foot {
  width: 30%;
  aspect-ratio: 30 / 1.2;
  margin: 0 auto;
  border-radius: 4px;
  background: linear-gradient(180deg, #232c38, #10161f);
}

/* iPad: an even bezel and nothing else. */
.ipad-body {
  border: 1px solid rgba(230, 237, 245, 0.14);
  border-radius: 20px;
  background: linear-gradient(180deg, #202834, #10161f);
  padding: 2.7%;
  box-shadow: var(--panel-shadow);
}

.ipad-body .device-screen {
  border-radius: 10px;
  aspect-ratio: 4 / 3;
}

.ipad-body .device-screen img {
  height: 100%;
  object-fit: cover;
}

/* iPhone: a tall body with the pill cut out of the top of the screen. */
.iphone-body {
  border: 1px solid rgba(230, 237, 245, 0.16);
  border-radius: 14%;
  background: linear-gradient(180deg, #212936, #0f151e);
  padding: 3.4%;
  box-shadow: var(--panel-shadow);
}

.iphone-body .device-screen {
  border-radius: 12%;
  aspect-ratio: 9 / 19.5;
  position: relative;
  padding: 0;
}

.iphone-body .device-screen img {
  height: 100%;
  object-fit: cover;
}

.iphone-pill {
  position: absolute;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  width: 45%;
  aspect-ratio: 45 / 11;
  border-radius: 8px;
  background: #05080d;
}

/* Apple Watch: the case alone, a crown on its right edge, no bands. */
.watch-body {
  position: relative;
  border: 1px solid rgba(230, 237, 245, 0.16);
  border-radius: 24%;
  background: linear-gradient(180deg, #222a37, #0f151e);
  padding: 9%;
  box-shadow: var(--panel-shadow);
}

.watch-crown {
  position: absolute;
  right: -3%;
  top: 34%;
  width: 6%;
  aspect-ratio: 6 / 26;
  border-radius: 3px;
  background: linear-gradient(180deg, #313c4c, #1a222e);
}

.watch-body .device-screen {
  border-radius: 18%;
  aspect-ratio: 41 / 50;
  padding: 0;
  background: #04070b;
}

.watch-body .device-screen img {
  height: 100%;
  object-fit: cover;
}

/* ---- how it works ---- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.step-top .plate-glyph {
  margin: 0;
}

.step-num {
  font-family: var(--font-numeral);
  font-weight: 600;
  font-size: 44px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--accent);
  text-shadow: 0 0 20px rgba(79, 209, 255, 0.35);
  font-variant-numeric: tabular-nums;
}

.plate .step-text {
  font-size: 17px;
  line-height: 1.5;
  color: var(--chalk-white);
}

@media (max-width: 820px) {
  .steps {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- video ---- */

.video-plate {
  max-width: 980px;
  margin: 0 auto;
  padding: 10px;
}

.video-plate video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: 6px;
  background: var(--trough);
  object-fit: cover;
}

/* ---- who it's for ---- */

.who-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.who {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.who h3 {
  font-size: 22px;
}

.plate.who p {
  font-size: 15.5px;
  margin-bottom: 18px;
}

/* A small outlined tag, the tier flag's shape, that takes the reader to the plans. */
.plan-tag {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 4px;
  border: 1px solid rgba(79, 209, 255, 0.4);
  box-shadow: var(--plate-inset);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.plan-tag:hover {
  border-color: var(--accent);
}

@media (max-width: 820px) {
  .who-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- features ---- */

/* Four big rows, the screenshot and the copy trading sides; stacked, screenshot first, on phones. */
.feature-rows {
  display: grid;
  gap: 72px;
}

.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
}

.feature-row:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}

.feature-row:nth-child(even) .shot {
  order: 2;
}

.shot {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--keyline-soft);
  border-radius: 12px;
  background: var(--plate);
  box-shadow: var(--panel-lip), var(--panel-shadow);
}

.shot img,
.shot-video {
  display: block;
  width: 100%;
  height: auto;
}

.feature-copy h3 {
  margin: 12px 0 14px;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.08;
  letter-spacing: 0.06em;
}

.feature-copy p:last-child {
  margin: 0;
  text-wrap: pretty;
  font-size: 18px;
  max-width: 30ch;
}

@media (max-width: 820px) {
  .feature-rows {
    gap: 52px;
  }

  .feature-row,
  .feature-row:nth-child(even) {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .feature-row:nth-child(even) .shot {
    order: 0;
  }
}

.also-head {
  margin: 96px 0 22px;
  font-size: 22px;
}

/* Ten small plates: five across on a wide window, two across below that, one on a narrow phone. */
.grid-also {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.also {
  padding: 18px 18px 20px;
}

.also .plate-glyph {
  width: 26px;
  height: 26px;
  margin-bottom: 12px;
}

.also h4 {
  margin: 0 0 6px;
  font-family: var(--font-numeral);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chalk-white);
}

.plate.also p {
  font-size: 13.5px;
  line-height: 1.5;
}

.plate.also .tier-note {
  display: block;
  margin-top: 10px;
  font-size: 9.5px;
  line-height: 1.5;
}

@media (max-width: 1099px) {
  .grid-also {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .also {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }

  .also .plate-glyph {
    margin: 0;
  }
}

@media (max-width: 560px) {
  .grid-also {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- plates ---- */

.plate {
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
  border: 1px solid var(--keyline);
  border-radius: 10px;
  padding: 22px 22px 24px;
  box-shadow: var(--panel-lip), var(--panel-shadow);
}

.plate-glyph {
  width: 34px;
  height: 34px;
  margin-bottom: 16px;
  color: var(--accent);
  display: block;
}

.plate h3 {
  margin-bottom: 10px;
}

.plate p {
  margin: 0;
  font-size: 14px;
  color: var(--secondary);
}

.plate .tier-note {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--disabled);
}

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

/*
 * The plan comparison. One table in the desk's own look: a recessed container, a raised label rail
 * down the left, and the one recommended column carrying the cyan keyline that a primary key
 * carries everywhere else.
 *
 * The container is the only thing on the page allowed to scroll sideways. Below the width at which
 * six columns fit, it scrolls inside its own frame and the label rail stays put; the page itself
 * never moves.
 */
.compare-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--keyline);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
  box-shadow: var(--panel-lip), var(--panel-shadow);
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--disabled) transparent;
}

.compare-scroll:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.compare {
  width: 100%;
  min-width: 880px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 13.5px;
}

.compare th,
.compare td {
  padding: 9px 12px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid var(--row-rule);
}

/* The label rail: the first column, opaque so the columns slide under it, and pinned to the left. */
.compare th[scope='row'],
.compare .compare-corner {
  position: sticky;
  left: 0;
  z-index: 2;
  width: 250px;
  padding-left: 20px;
  text-align: left;
  font-family: var(--font-label);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--secondary);
  background: var(--plate);
  box-shadow: 1px 0 0 var(--keyline);
}

.compare .compare-corner {
  width: 250px;
}

/* ---- the header row ---- */

.compare thead th {
  position: relative;
  /* Room above the name for the one flag, which is taken out of the flow so all five names sit on
     the same line whether or not their column carries it. */
  padding: 46px 12px 16px;
  vertical-align: bottom;
  background: var(--plate-lit);
  border-bottom: 1px solid var(--keyline-soft);
}

.compare thead .compare-corner {
  z-index: 3;
  background: var(--plate-lit);
}

.tier-head-name {
  display: block;
  font-family: var(--font-numeral);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chalk-white);
}

/* Amount on its own line, the period under it: the five prices are different widths and only a
   stacked pair keeps their baselines together. */
.tier-head-price {
  display: block;
  margin-top: 8px;
  font-family: var(--font-numeral);
  font-weight: 600;
  color: var(--chalk-white);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.tier-head-price .amount {
  display: block;
  font-size: 30px;
  letter-spacing: 0.01em;
}

.tier-head-price .per,
.tier-head-note {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tier-head-price .per {
  display: block;
  margin-top: 7px;
  color: var(--dim);
}

/* The second price line wraps rather than running under its neighbor when the columns are narrow. */
.tier-head-note {
  display: block;
  margin-top: 8px;
  min-height: 2.6em;
  white-space: normal;
  color: var(--disabled);
}

@media (max-width: 640px) {
  .compare th[scope='row'],
  .compare .compare-corner {
    width: 180px;
    padding-left: 16px;
  }

  .compare-section th[scope='row'] span {
    left: 16px;
  }
}

.tier-head .tier-flag {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}

/* ---- the section captions ---- */

.compare-section th,
.compare-section td {
  padding-top: 26px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--keyline-soft);
}

.compare-section th[scope='row'] {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dim);
}

/* Pinned inside the pinned rail, so the caption is still readable when the table is scrolled. */
.compare-section th[scope='row'] span {
  position: sticky;
  left: 20px;
}

/* ---- the cells ---- */

.is-yes::before,
.is-no::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
}

.is-yes::before {
  width: 6px;
  height: 11px;
  margin-top: -3px;
  border: solid var(--go);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.is-no::before {
  width: 12px;
  height: 2px;
  border-radius: 1px;
  background: var(--disabled);
}

.is-val {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--chalk-white);
}

.is-val.is-soft {
  color: var(--dim);
}

/*
 * The recommended column is the one cyan edge in the table, held down every row including the
 * section captions, which is why those rows carry five empty cells rather than one colspan.
 */
.compare thead th:nth-child(4),
.compare tbody td:nth-child(4) {
  background: rgba(79, 209, 255, 0.05);
  border-left: 1px solid rgba(79, 209, 255, 0.45);
  border-right: 1px solid rgba(79, 209, 255, 0.45);
}

.compare thead th:nth-child(4) {
  border-top: 1px solid rgba(79, 209, 255, 0.45);
  border-radius: 8px 8px 0 0;
}


.tier-flag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 0 9px;
  height: 22px;
  line-height: 20px;
  border-radius: 4px;
  border: 1px solid rgba(79, 209, 255, 0.5);
  background: var(--sub-plate);
  box-shadow: var(--plate-inset);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.addons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 26px;
}

.addon {
  padding: 18px 20px;
  margin: 0;
}

.addon h3 {
  font-size: 15px;
  margin-bottom: 8px;
}

.addon p {
  margin: 0;
  font-size: 13.5px;
}

.addon .price span {
  white-space: nowrap;
}

.addon .price {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.trial-line {
  margin-top: 26px;
  text-align: center;
}

/* Apple's own badge, unaltered, at the size its guidelines ask for. */
.store-badge {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 18px 0 0;
}
.store-badge a {
  display: inline-flex;
}
.store-badge img {
  height: 60px;
  width: auto;
}

/* ---- FAQ ---- */

.faq {
  max-width: 820px;
  display: grid;
  gap: 10px;
}

.faq-item {
  border: 1px solid var(--keyline);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--panel-top), var(--panel-bottom));
  box-shadow: var(--panel-lip);
}

.faq-item summary {
  position: relative;
  padding: 17px 56px 17px 22px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-numeral);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chalk-white);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

/* A plus that turns into a minus: two bars, and the upright one lies down when open. */
.faq-item summary::before,
.faq-item summary::after {
  content: '';
  position: absolute;
  right: 24px;
  top: 50%;
  width: 12px;
  height: 1.5px;
  margin-top: -0.75px;
  background: var(--accent);
  transition: transform 0.12s ease-out;
}

.faq-item summary::after {
  transform: rotate(90deg);
}

.faq-item[open] summary::after {
  transform: rotate(0deg);
}

.faq-item summary:hover {
  color: var(--accent);
}

.faq-item summary:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: -1px;
  border-radius: 10px;
}

.faq-item p {
  margin: 0;
  padding: 0 22px 20px;
  font-size: 15.5px;
}

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

.footer {
  border-top: 1px solid var(--keyline-soft);
  padding-block: 40px 56px;
}

.footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 28px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer-links a {
  color: var(--dim);
}

.footer-links a:hover {
  color: var(--accent);
}

.footer img {
  height: 20px;
  width: auto;
}

/* ---- the document page (privacy) ---- */

.doc {
  max-width: 74ch;
  margin: 0 auto;
  padding-block: 56px 88px;
}

.doc h1 {
  font-size: clamp(32px, 6vw, 52px);
}

.doc h2 {
  font-size: 22px;
  letter-spacing: 0.1em;
  margin: 40px 0 12px;
}

.doc p,
.doc li {
  color: var(--secondary);
  font-size: 15.5px;
}

.doc ul {
  margin: 0 0 14px;
  padding-left: 20px;
}

.doc li {
  margin-bottom: 8px;
}

.doc .dateline {
  margin-top: 14px;
}

.doc .summary {
  margin: 34px 0 10px;
}

.doc .summary h2 {
  margin-top: 0;
}

.doc footer {
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--keyline-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

@media (max-width: 480px) {
  :root {
    --gutter: 18px;
  }

  .section {
    padding-block: 68px;
  }
}