/* TinyTasks marketing site — single stylesheet, no framework.
   Colors match the iPad app: purple primary, green for "done", gray-100 surfaces. */

@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/dm-sans-latin.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 {
  --purple-50: #faf5ff;
  --purple-100: #f3e8ff;
  --purple-200: #e9d5ff;
  --purple-500: #a855f7;
  --purple-600: #9333ea;
  --purple-700: #7e22ce;
  --purple-900: #581c87;
  --green-100: #dcfce7;
  --green-500: #22c55e;
  --green-700: #15803d;
  --amber-100: #fef3c7;
  --pink-100: #fce7f3;
  --blue-100: #dbeafe;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-900: #111827;
  --white: #ffffff;

  --font: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --measure: 40rem;
  --wrap: 68rem;
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 10px 40px rgba(17, 24, 39, 0.10), 0 1px 0 rgba(17, 24, 39, 0.04);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 1rem;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--gray-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--purple-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--purple-900);
}

:focus-visible {
  outline: 3px solid var(--purple-500);
  outline-offset: 3px;
  border-radius: 4px;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.75rem, 8vw, 5.25rem);
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(2.1rem, 4.5vw, 3rem);
}

h3 {
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}

p,
ul,
ol,
dl {
  margin: 0 0 1.1em;
}

.measure {
  max-width: var(--measure);
}

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

.small {
  font-size: 0.9rem;
}

strong {
  font-weight: 700;
}

hr {
  border: 0;
  height: 1px;
  background: var(--gray-200);
  margin: 2rem 0;
}

/* Skip link */
.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: var(--gray-900);
  color: var(--white);
  padding: 0.6rem 1rem;
  border-radius: 8px;
  z-index: 100;
  text-decoration: none;
}

.skip:focus {
  top: 1rem;
  color: var(--white);
}

.skip:hover {
  color: var(--white);
}

/* Layout */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.25rem;
}

section {
  padding: 3rem 0;
}

@media (min-width: 900px) {
  section {
    padding: 4.5rem 0;
  }
}

.band {
  background: var(--gray-50);
}

.band-purple {
  background: var(--purple-700);
  color: var(--white);
}

.band-purple a {
  color: var(--white);
}

.band-purple .btn-light {
  color: var(--purple-700);
}

.band-purple .btn-light:hover {
  color: var(--purple-900);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--purple-600);
  color: var(--white);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  padding: 0.95rem 1.5rem;
  border-radius: 999px;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

/* A real button on a real device gives way when pressed. This is the one
   press-feedback rule for every button variant on the site — consistent,
   not a per-component decision. */
.btn:active {
  transform: scale(0.97);
}

.btn:hover {
  background: var(--purple-700);
  color: var(--white);
}

.btn svg {
  width: 1.1em;
  height: 1.1em;
  fill: currentColor;
  flex-shrink: 0;
}

.btn-light {
  background: var(--white);
  color: var(--purple-700);
}

.btn-light:hover {
  background: var(--purple-50);
  color: var(--purple-900);
}

.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.75rem;
}

/* Nav */
.nav {
  border-bottom: 1px solid var(--gray-200);
  background: var(--white);
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--gray-900);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.brand img {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  color: var(--gray-700);
  text-decoration: none;
  font-weight: 400;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--purple-700);
}

/* "Compare" covers two different pages (a named head-to-head and a broader
   roundup) that used to only be reachable from one another's body copy —
   never from primary nav. A dropdown keeps the single "Compare" nav slot
   but gives both a real entry point, using the same disclosure mechanism
   as the mobile menu below rather than a second UI pattern. */
.nav-dropdown {
  position: relative;
}

.nav-dropdown summary {
  color: var(--gray-700);
  cursor: pointer;
  list-style: none;
}

.nav-dropdown summary::-webkit-details-marker {
  display: none;
}

.nav-dropdown summary:hover,
.nav-dropdown details[open] summary {
  color: var(--purple-700);
}

.nav-dropdown ul {
  position: absolute;
  left: 0;
  top: calc(100% + 0.5rem);
  z-index: 50;
  min-width: 12rem;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.nav-dropdown ul a {
  display: block;
  padding: 0.6rem 0.65rem;
  color: var(--gray-700);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.nav-dropdown ul a:hover,
.nav-dropdown ul a[aria-current="page"] {
  color: var(--purple-700);
  background: var(--purple-50);
}

.nav-links .btn {
  padding: 0.65rem 1.1rem;
  font-size: 0.92rem;
  color: var(--white);
  text-decoration: none;
}

.nav-links .btn:hover {
  color: var(--white);
  text-decoration: none;
}

@media (max-width: 480px) {
  .nav .wrap {
    gap: 0.4rem;
  }

  .brand {
    font-size: 0.95rem;
    gap: 0.35rem;
  }

  .nav-links {
    gap: 0.4rem;
  }

  .nav-menu summary {
    width: 2.1rem;
    height: 2.1rem;
  }

  /* Scoped to .nav-cta (the navbar's own Download button), not .nav-links
     as a whole: .nav-menu-cta's copy of the same button lives inside the
     hamburger dropdown and should stay full-size there, not shrink to
     match a cramped top bar it isn't part of. */
  .nav-cta .btn {
    white-space: nowrap;
    font-size: 0.72rem;
    padding: 0.5rem 0.65rem;
  }

  .nav-cta .btn svg {
    display: none;
  }
}

/* Mobile wayfinding menu: a native <details>/<summary> disclosure, so Compare/
   FAQ/About stay reachable below the breakpoint where the text links hide,
   without any JavaScript. Hidden above 680px, where the text links already
   cover the same links directly in the nav bar. This unconditional rule must
   stay ABOVE the max-width:680px block below: equal specificity means source
   order decides, and a rule declared after a media query beats it even when
   the query matches — the same cascade trap noted on .feature.flip above. */
.nav-menu {
  display: none;
  position: relative;
}

@media (max-width: 680px) {
  .nav-links li.text {
    display: none;
  }

  .nav-menu {
    display: block;
  }

  /* The Download button moves into the mobile menu (.nav-menu-cta, below)
     instead of sitting in the bar itself — at this width the bar only has
     room for the brand and the hamburger before it crowds or wraps. */
  .nav-cta {
    display: none;
  }
}

.nav-menu summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid var(--gray-200);
  color: var(--gray-700);
  cursor: pointer;
  list-style: none;
}

.nav-menu summary::marker {
  content: "";
}

.nav-menu summary::-webkit-details-marker {
  display: none;
}

.nav-menu summary svg {
  width: 1.15em;
  height: 1.15em;
}

.nav-menu details[open] summary {
  border-color: var(--purple-500);
  color: var(--purple-700);
}

.nav-menu ul {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 50;
  min-width: 10rem;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.nav-menu li {
  margin: 0;
}

.nav-menu a {
  display: block;
  padding: 0.6rem 0.65rem;
  color: var(--gray-700);
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.nav-menu a:hover,
.nav-menu a[aria-current="page"] {
  color: var(--purple-700);
  background: var(--purple-50);
}

/* The Download button's stand-in inside the mobile menu (see .nav-cta,
   above): a divider sets it apart from the wayfinding links it follows,
   and .nav-menu a.btn (two classes + type) outranks the plain .nav-menu a
   rule above it so the button keeps its own pill shape and color instead
   of the flat gray-700 link treatment. */
.nav-menu-cta {
  margin-top: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--gray-200);
}

.nav-menu a.btn {
  display: flex;
  justify-content: center;
  padding: 0.6rem 0.8rem;
  font-size: 0.92rem;
  color: var(--white);
}

.nav-menu a.btn:hover {
  color: var(--white);
  background: var(--purple-700);
}

/* Hero */
.hero {
  padding: 3.5rem 0 3rem;
}

.hero-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 900px) {
  .hero {
    padding: 5rem 0 4rem;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 3.5rem;
  }
}

.hero p.lead {
  font-size: 1.2rem;
  color: var(--gray-700);
  max-width: 34rem;
}

.shot {
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow);
  background: var(--white);
}

/* Hero task chips: a flat (no rotation), multi-color alternative to a boxed
   device screenshot. Each chip pairs a real icon illustration with its task
   name; the illustrations already carry color, so the row reads as playful
   without needing a tilted "bento" card or a second accent hue in the CSS
   itself — the color comes from the art, not from decoration. */
.task-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 0.7rem;
}

.task-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1.1rem 0.5rem 0.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--gray-900);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.15s ease;
}

/* The one interaction on the page that demonstrates the product's actual
   mechanism instead of just describing it: tap a chip and it goes "done",
   using the same green the rest of the site already reserves exclusively
   for completion (the board's .done outline, the switch's checked state)
   — not a new color invented for this moment. Tap again to try another. */
.task-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(17, 24, 39, 0.10);
}

.task-chip:active {
  transform: translateY(0) scale(0.97);
}

.task-chip.is-done {
  box-shadow: 0 0 0 2px var(--green-500);
}

.task-chip::after {
  content: "";
  position: absolute;
  top: -0.3rem;
  right: -0.3rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  /* green-700, not green-500: white on green-500 is 2.28:1, under the 3:1
     floor for a graphical UI element like this checkmark. green-700 clears
     it at 5:1. The ring below stays green-500 to match the "done" language
     used elsewhere on the site (.board li.done); only the small icon fill
     needed the darker shade. */
  background: var(--green-700);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.8rem;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1), transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.task-chip.is-done::after {
  opacity: 1;
  transform: scale(1);
}

.task-chip:focus-visible {
  outline: 3px solid var(--purple-500);
  outline-offset: 3px;
}

.task-chip img {
  width: 2.25rem;
  height: 2.25rem;
  object-fit: contain;
}

.task-chip:nth-child(6n + 1) {
  background: var(--purple-100);
}

.task-chip:nth-child(6n + 2) {
  background: var(--amber-100);
}

.task-chip:nth-child(6n + 3) {
  background: var(--pink-100);
}

.task-chip:nth-child(6n + 4) {
  background: var(--green-100);
}

.task-chip:nth-child(6n + 5) {
  background: var(--blue-100);
}

.task-chip:nth-child(6n + 6) {
  background: var(--purple-100);
}

.task-chip:nth-child(even) {
  margin-top: 0.6rem;
}

/* Every feature screenshot sits in a bordered, shadowed frame that hugs the
   image's own cropped proportions exactly (they differ — the kiosk board is
   a wide ~2:1 capture, the parent-facing screens are ~4:3) rather than a
   fixed aspect-ratio box. A shared fixed ratio across differently-shaped
   captures forces a matte to fill the leftover space on whichever images
   don't match it; sizing the frame to each image instead means there's
   never a matte to see. */
.shot-frame {
  display: block;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow);
  overflow: hidden;
  line-height: 0;
}

.shot-plain {
  display: block;
  width: 100%;
  height: auto;
}

/* Cost strip */
.cost-strip {
  display: grid;
  gap: 1.5rem;
  padding: 0;
  margin: 0 0 1.25rem;
  list-style: none;
}

@media (min-width: 480px) {
  .cost-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    max-width: 32rem;
  }
}

.cost-strip li {
  border-top: 3px solid var(--gray-200);
  padding-top: 1rem;
}

.cost-strip li.us {
  border-top-color: var(--purple-500);
}

.cost-strip .who {
  font-weight: 700;
  margin: 0 0 0.2rem;
}

.cost-strip .figure {
  font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0;
}

.cost-strip .figure span {
  display: block;
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--gray-600);
  margin-top: 0.15rem;
}

.cost-strip .how {
  margin: 0.5rem 0 0;
  color: var(--gray-600);
  font-size: 0.95rem;
}

.cost-strip li.us .figure {
  color: var(--purple-700);
}

.footnote {
  font-size: 0.85rem;
  color: var(--gray-500);
  max-width: 46rem;
}

.callout {
  font-size: 1.15rem;
  max-width: var(--measure);
  border-left: 4px solid var(--green-500);
  padding-left: 1rem;
  margin-top: 1.5rem;
}

/* Feature rows */
.feature {
  display: grid;
  gap: 1.5rem;
  align-items: center;
  padding: 2.5rem 0;
}

@media (min-width: 820px) {
  .feature {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 3.5rem;
  }

  /* `order` reorders CSS Grid auto-placement itself, not just paint order: with
     the text pushed to order 2, the image becomes the first item in placement
     order and lands in track 1. Track 1 is the narrow 5fr column, so every
     "flip" row was squeezing its screenshot into the column meant for text,
     rendering it visibly smaller than the non-flip rows. Flipping the track
     widths to match keeps the image in the wide track regardless of which
     visual side it's ordered onto. */
  .feature.flip {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .feature.flip > :first-child {
    order: 2;
  }
}

.feature h3 {
  font-size: 1.45rem;
}

.feature p {
  color: var(--gray-700);
  max-width: 32rem;
}

/* Icon showcase: a full-width subsection rather than another split
   text/visual feature row. The neighboring rows all follow the same
   text-beside-visual pattern; repeating it a fourth time for a 12-icon
   sampler left the visual half looking sparse against its text half. Full
   width gives the grid room to read as a real sampler, and the style
   switch gives the section something to do beyond display. */
.icon-showcase {
  padding: 2.5rem 0;
}

.icon-showcase h3 {
  font-size: 1.45rem;
}

.icon-showcase > .measure {
  color: var(--gray-700);
  margin-bottom: 1.75rem;
}

/* A segmented control modeled on iPadOS's own — this is a real setting in
   the app, so the switcher should read like the app's own UI, not like a
   generic pill toggle invented for the marketing page. */
.icon-style-switch {
  display: inline-flex;
  gap: 0.2rem;
  padding: 0.25rem;
  background: var(--gray-100);
  border-radius: 999px;
  margin-bottom: 2rem;
}

.icon-style-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.icon-style-switch label {
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--gray-600);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.icon-style-switch input:checked + label {
  background: var(--white);
  color: var(--purple-700);
  box-shadow: 0 1px 3px rgba(17, 24, 39, 0.15);
}

.icon-style-switch input:focus-visible + label {
  outline: 3px solid var(--purple-500);
  outline-offset: 2px;
}

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

.icon-grid li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gray-700);
}

/* Every icon sits on an identical round badge. The source art isn't drawn at
   a consistent scale within its canvas (a toothbrush fills far less of its
   square than a t-shirt does), so rendering the raw image at a fixed size
   makes some icons read as tiny and off-balance next to their neighbors.
   White + a soft shadow (rather than a flat tint) so the badge reads as a
   raised sticker-on-a-card, matching the sticker icons' own die-cut look.
   A Chip Tint disc peeks out from behind, off-center, like a bit of color
   showing behind a sticker someone's pressed onto the page — the same
   five tints the hero chips use, so it reads as one system, not a second
   decorative palette. */
.icon-badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 4px 14px rgba(17, 24, 39, 0.10), 0 1px 2px rgba(17, 24, 39, 0.06);
  flex-shrink: 0;
}

.icon-badge::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--chip-color, var(--purple-100));
  transform: translate(6px, 7px);
  z-index: -1;
}

.icon-grid li:nth-child(5n + 1) .icon-badge {
  --chip-color: var(--purple-100);
}

.icon-grid li:nth-child(5n + 2) .icon-badge {
  --chip-color: var(--amber-100);
}

.icon-grid li:nth-child(5n + 3) .icon-badge {
  --chip-color: var(--pink-100);
}

.icon-grid li:nth-child(5n + 4) .icon-badge {
  --chip-color: var(--green-100);
}

.icon-grid li:nth-child(5n + 5) .icon-badge {
  --chip-color: var(--blue-100);
}

.icon-grid img {
  width: 2.35rem;
  height: 2.35rem;
  object-fit: contain;
  position: relative;
}

/* Style-switch delight: swapping icon style is a real setting people will
   actually use, and stickers are the product's own material — so swapping
   them plays like pressing a new sticker down, not a file reloading. The
   animation targets the <img> only, never .icon-badge itself — the white
   circle and its color halo must stay fully opaque and static throughout,
   or a mid-fade badge lets the color halo bleed through the white front. */
.icon-pop {
  animation: icon-pop 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes icon-pop {
  0% {
    transform: scale(0.55);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
/* Disabled globally under prefers-reduced-motion by the site-wide rule at
   the bottom of this file (animation: none !important on *). */

@media (min-width: 480px) {
  .icon-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 700px) {
  .icon-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .icon-grid {
    grid-template-columns: repeat(9, minmax(0, 1fr));
  }
}

/* Simple point list */
.points {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0.9rem;
  max-width: var(--measure);
}

.points li {
  padding-left: 1.6rem;
  position: relative;
}

.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background: var(--green-500);
}

.points strong {
  display: block;
}

/* How it works */
.steps {
  display: grid;
  gap: 2rem;
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  counter-reset: step;
}

@media (min-width: 760px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

.steps li {
  border-top: 3px solid var(--purple-200);
  padding-top: 1rem;
}

.steps .num {
  display: block;
  font-weight: 700;
  color: var(--purple-700);
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
}

.steps h3 {
  margin-bottom: 0.4rem;
}

.steps p {
  color: var(--gray-700);
  margin: 0;
}

/* Pricing */
.plans {
  display: grid;
  gap: 1.75rem;
  list-style: none;
  margin: 2rem 0 1.5rem;
  padding: 0;
}

@media (min-width: 720px) {
  .plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

.plans li {
  border-top: 3px solid var(--gray-200);
  padding-top: 1rem;
}

.plans li.featured {
  border-top-color: var(--purple-500);
}

.plans .plan-name {
  font-weight: 700;
  margin: 0 0 0.2rem;
}

.badge {
  display: inline-block;
  background: var(--purple-50);
  color: var(--purple-700);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-sm);
  vertical-align: middle;
}

.plans .price {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 0 0 0.5rem;
}

.plans .price span {
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--gray-600);
}

.plans p {
  color: var(--gray-700);
  margin: 0;
}

/* Comparison table */
.table-wrap {
  overflow-x: auto;
  margin: 1.5rem 0;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 36rem;
  font-size: 0.98rem;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 0.85rem 1rem 0.85rem 0;
  border-bottom: 1px solid var(--gray-200);
}

th {
  font-weight: 700;
}

thead th {
  border-bottom: 2px solid var(--gray-300);
}

tbody th {
  color: var(--gray-700);
  font-weight: 400;
  width: 22%;
}

td.us {
  font-weight: 700;
}

/* FAQ */
.faq h2 {
  margin-top: 2.5rem;
}

.faq h3 {
  margin-top: 1.75rem;
  margin-bottom: 0.35rem;
}

.faq p,
.faq ul,
.faq ol {
  color: var(--gray-700);
  max-width: var(--measure);
}

.faq .note {
  background: var(--purple-50);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
}

.faq-list h3 {
  font-size: 1.1rem;
}

/* Sample board (long-tail pages) */
.board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
  list-style: none;
  margin: 1.5rem 0;
  padding: 1rem;
  background: var(--gray-100);
  border-radius: var(--radius-lg);
}

@media (min-width: 600px) {
  .board {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.board li {
  background: var(--white);
  border-radius: var(--radius);
  padding: 1rem 0.75rem 0.85rem;
  text-align: center;
  font-weight: 700;
  font-size: 0.95rem;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.06);
}

.board li.done {
  outline: 2px solid var(--green-500);
  outline-offset: -2px;
  color: var(--green-700);
}

.board img {
  width: 96px;
  height: 96px;
  margin: 0 auto 0.5rem;
}

/* Prose (legal, about) */
.prose {
  max-width: var(--measure);
}

.prose ol > li {
  margin-bottom: 1.25rem;
}

.prose ol > li > p:first-child {
  margin-bottom: 0.25rem;
}

.prose ul ul {
  margin-top: 0.25rem;
}

.prose .aside {
  background: var(--purple-50);
  border-left: 4px solid var(--purple-200);
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  font-size: 0.95rem;
  font-style: italic;
}

/* Two-column about */
.about-grid {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 820px) {
  .about-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3.5rem;
  }
}

blockquote {
  margin: 1.5rem 0;
  padding-left: 1.25rem;
  border-left: 4px solid var(--purple-500);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Forms */
.form {
  max-width: 34rem;
}

.field {
  margin-bottom: 1.1rem;
}

.field label {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}

.field input,
.field textarea {
  width: 100%;
  font: inherit;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  background: var(--white);
  color: var(--gray-900);
}

.field input:focus,
.field textarea:focus {
  outline: 3px solid var(--purple-200);
  outline-offset: 0;
  border-color: var(--purple-500);
}

.field textarea {
  min-height: 9rem;
  resize: vertical;
}

.form-row {
  display: grid;
  gap: 0 1rem;
}

@media (min-width: 520px) {
  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

.rating {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.rating label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--gray-300);
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
  margin: 0;
}

.rating input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.rating input:checked + span {
  background: var(--purple-600);
  color: var(--white);
  border-radius: 999px;
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.rating input:focus-visible + span {
  outline: 3px solid var(--purple-500);
  outline-offset: 3px;
}

.status {
  padding: 0.85rem 1rem;
  border-radius: 10px;
  margin-top: 1rem;
  max-width: 34rem;
}

.status-ok {
  background: var(--green-100);
  color: var(--green-700);
}

.status-err {
  background: #fee2e2;
  color: #991b1b;
}

/* Switch (email preferences) */
.pref {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  align-items: flex-start;
  padding: 1.1rem 0;
  border-top: 1px solid var(--gray-200);
}

.pref:last-of-type {
  border-bottom: 1px solid var(--gray-200);
}

.pref p {
  margin: 0;
}

.pref .desc {
  color: var(--gray-600);
  font-size: 0.92rem;
}

.switch {
  appearance: none;
  -webkit-appearance: none;
  width: 3rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--gray-300);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
  border: 0;
}

.switch::after {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
}

.switch:checked {
  background: var(--green-500);
}

.switch:checked::after {
  transform: translateX(1.25rem);
}

.switch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.centered {
  text-align: center;
  max-width: 30rem;
  margin: 0 auto;
}

/* Closing CTA */
.cta h2 {
  max-width: 46rem;
}

.cta .small {
  opacity: 0.85;
}

/* Footer */
.footer {
  border-top: 1px solid var(--gray-200);
  padding: 2.5rem 0;
  font-size: 0.92rem;
  color: var(--gray-600);
}

.footer ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

.footer a {
  color: var(--gray-700);
}

.footer p {
  margin: 0;
}

/* Utilities */
.mt-0 {
  margin-top: 0;
}

.mt-1 {
  margin-top: 1rem;
}

.mt-2 {
  margin-top: 2rem;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}