/* The whole site's styles (home, privacy, delete, licences): the "Calm" look from the website canvas
   (Pace & Plate · Website). Light is the main look; dark follows the browser.
   Sizes: the base rules are the desktop and laptop sizes (1024 px and wider). Narrower windows use the larger sizes
   in the first block below (the design's original board sizes), then the tablet and phone rules. */
:root {
  color-scheme: light dark;
  --page: #F6F7F4; --card: #FFFFFF; --soft: #F4F5F2; --line: #E2E5E0; --ink: #14181D; --text: #2B3138; --muted: #5B6470;
  --label: #9A5B00; --accent: #3346C8; --btn: #3346C8; --or: #F5A524; --bad: #C2362C; --bad-btn: #C2362C;
  --warn-bg: #FDE8E6; --warn-fg: #8C1D18; --good-bg: #E3F4E8; --good: #1E7A3C; --off: #E2E5E0; --off-fg: #7A828C;
  --field: #9AA2AC; --check: #77818F; --pill-on: #E2E5E0; --ic: #EEF0FF; --track: #E7E9EC; --runcard: #14181D;
  --runcard-edge: #14181D; --run-rest: #3A424D; --tl-top: #B8BEC6; --play: #14181D; --play-fg: #FFFFFF; --play-tag: #2B3138;
  --step-fg: #FFFFFF; --shadow: 0 0.75px 1.5px rgba(20, 24, 29, .06);
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #0B0F14; --card: #141A22; --soft: #12171E; --line: #232B36; --ink: #E9EDF2; --text: #C5CCD5; --muted: #8E98A6;
    --label: #F5A524; --accent: #93A2FF; --btn: #5868E8; --bad: #F0857C; --bad-btn: #C2362C;
    --warn-bg: #3A1C1A; --warn-fg: #F7B4AD; --good-bg: #16301F; --good: #7FD49B; --off: #232B36; --off-fg: #6C7684;
    --field: #4A5361; --check: #77818F; --pill-on: #232B36; --ic: #1E2632; --track: #2A313B; --runcard: #141A22;
    --runcard-edge: #232B36; --run-rest: #2A313B; --tl-top: #4A5361; --play: #FFFFFF; --play-fg: #0B0F14; --play-tag: #E9EDF2;
    --step-fg: #0B0F14; --shadow: none;
  }
}

*, ::before, ::after { box-sizing: border-box; }
html { background: var(--page); scroll-padding-top: 18px; }
body { margin: 0; min-height: 100vh; font-size: 12px; display: flex; flex-direction: column; background: var(--page); color: var(--ink);
  font-family: 'Archivo', system-ui, sans-serif; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
main { flex: 1; }
a { color: inherit; }
:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 1.5px; border-radius: 3px; }
[tabindex='-1']:focus { outline: none; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-weight: 800; font-stretch: 75%; line-height: 1; }
p { margin: 0; }
.wrap { width: min(996px, 100% - 84px); margin-inline: auto; }
.eyebrow { font: 600 9.75px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--label); }
.mono-label { display: block; font: 600 9px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.title { font-size: 78px; line-height: .92; font-stretch: 70%; letter-spacing: -.01em; }
.lead { font-size: 15px; line-height: 1.6; color: var(--text); }
.hint { font-size: 10.5px; line-height: 1.6; color: var(--muted); }
.card { background: var(--card); border: 0.75px solid var(--line); border-radius: 21px; box-shadow: var(--shadow); }
.skip { position: absolute; left: 12px; top: -100px; z-index: 20; padding: 9px 12px; border-radius: 9px; background: var(--ink);
  color: var(--page); font-weight: 700; text-decoration: none; }
.skip:focus { top: 9px; }

/* Header: logo, plain links (current page underlined in orange), Play button; on phones a round menu button opens a card
   with the links and the Play button. Delete account is in the footer, not the header. */
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 27px; padding: 15px 0; position: relative; }
.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; font-size: 16.5px; font-weight: 800; font-stretch: 75%; }
.tile { width: 25.5px; height: 25.5px; border-radius: 6.75px; padding: 6px; background: #14181D; display: flex; align-items: flex-end; gap: 1.5px; flex: none; }
@media (prefers-color-scheme: dark) { .tile { background: #1A212B; } }
.tile i { flex: 1; border-radius: 0.75px; background: #4A5361; }
.tile i:nth-child(1) { height: 40%; } .tile i:nth-child(2) { height: 100%; background: #F5A524; }
.tile i:nth-child(3) { height: 60%; } .tile i:nth-child(4) { height: 85%; background: #F5A524; }
.site-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.site-nav a { text-decoration: none; color: var(--muted); padding: 6px 0; font-size: 12px; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--or); }
.site-nav .menu-play { display: none; }
.play { display: inline-flex; align-items: center; gap: 6px; background: var(--play); color: var(--play-fg); border-radius: 74.25px;
  padding: 8.25px 13.5px; font-size: 11.25px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.play small { font: 600 7.5px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase;
  background: var(--play-tag); color: var(--play-fg); padding: 2.25px 4.5px; border-radius: 4.5px; }
.play.big { background: var(--or); color: #14181D; font-size: 12.75px; padding: 11.25px 18px; }
.play.big small { background: rgba(20, 24, 29, .14); color: #14181D; }
.menu-btn { display: none; }

/* Footer: one line */
.site-foot { border-top: 0.75px solid var(--line); margin-top: 72px; }
.site-foot .wrap { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 27px 0 33px; color: var(--muted); font-size: 11.25px; }
.site-foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.site-foot a { text-decoration: none; color: var(--text); }
.site-foot a:hover { text-decoration: underline; }
.site-foot .home { color: inherit; }

/* Home: copy left, run + protein cards right, then the three features */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 54px; align-items: center; padding-top: 54px; }
.hero-copy { display: flex; flex-direction: column; gap: 19.5px; }
.cta { display: flex; gap: 10.5px; align-items: center; flex-wrap: wrap; }
.cta span { color: var(--muted); font-size: 11.25px; }
.cards { display: flex; flex-direction: column; gap: 12px; }
.run { background: var(--runcard); border-color: var(--runcard-edge); padding: 21px 24px; display: flex; flex-direction: column; gap: 13.5px; }
.run .eyebrow { color: #F5A524; }
.intervals { display: flex; gap: 3px; height: 33px; }
.intervals i { background: var(--run-rest); border-radius: 3px; } .intervals i:nth-child(even) { background: #F5A524; }
.protein { padding: 19.5px 24px; display: flex; flex-direction: column; gap: 12px; }
.protein .row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14.25px; color: var(--text); }
.protein .eyebrow { color: var(--accent); }
.track { height: 9px; border-radius: 74.25px; background: var(--track); }
.track i { display: block; width: 67%; height: 100%; border-radius: 74.25px; background: var(--accent); }
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; padding-top: 48px; }
.features .card { padding: 21px; display: flex; flex-direction: column; gap: 10.5px; }
.features h2 { font-size: 21px; }
.features p { color: var(--muted); font-size: 12.75px; line-height: 1.55; }
.ic { width: 33px; height: 33px; border-radius: 9px; background: var(--ic); color: var(--accent); display: flex; align-items: center; justify-content: center; }

/* Privacy: "in short" card, then the sections as stops on a thin grey-to-orange timeline; same width as the header */
.doc { width: min(996px, 100% - 84px); margin-inline: auto; padding-top: 42px; display: flex; flex-direction: column; gap: 30px; }
.doc-head { display: flex; flex-direction: column; gap: 13.5px; }
.short { padding: 16.5px 18px; font-size: 13.5px; line-height: 1.6; color: var(--text); }
.stops { list-style: none; margin: 0; padding: 0; position: relative; }
.stops::before { content: ''; position: absolute; left: 11.25px; top: 12px; bottom: 12px; width: 1.5px; background: linear-gradient(var(--tl-top), var(--or)); }
.stops > li { position: relative; padding: 0 0 36px 48px; }
.stops > li:last-child { padding-bottom: 0; }
.stops > li::before { content: ''; position: absolute; left: 4.5px; top: 7.5px; width: 15px; height: 15px; border-radius: 50%; background: var(--page); border: 2.25px solid var(--or); }
.stops .mono-label { margin-bottom: 4.5px; }
.stops h2 { font-size: 27px; margin-bottom: 10.5px; }
.stops p, .stops li li { font-size: 13.5px; line-height: 1.65; color: var(--text); }
.stops p + p, .stops ul + p, .stops p + ul, .stops p + .data { margin-top: 10.5px; }
.stops ul { margin: 0; padding-left: 15px; }
.stops a { color: var(--ink); }
.data { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 9px; }
.data > div { border-radius: 13.5px; padding: 12px 13.5px; font-size: 11.25px; line-height: 1.5; color: var(--muted); }
.data b { display: block; margin-bottom: 3px; font-size: 12px; color: var(--ink); }
.data .why { display: block; margin-top: 7.5px; padding-top: 7.5px; border-top: 0.75px solid var(--line); }
.data .why i { display: block; margin-bottom: 1.5px; font: 600 8.25px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; font-style: normal; }

/* Delete: one centred column; step route, then one card with the form */
.del { width: min(510px, 100% - 84px); margin-inline: auto; padding-top: 48px; display: flex; flex-direction: column; align-items: center; gap: 27px; }
.del-head { display: flex; flex-direction: column; gap: 13.5px; text-align: center; align-items: center; }
.del-head .title { font-size: 66px; }
.del > .hint { text-align: center; }
main.done > .hint { display: none; }
.del > * { width: 100%; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 10.5px; }
.steps li { display: flex; align-items: center; gap: 7.5px; flex: 1; font-size: 11.25px; color: var(--muted); white-space: nowrap; }
.steps li:last-child { flex: none; }
.steps li:not(:last-child)::after { content: ''; flex: 1; min-width: 12px; height: 1.5px; background: repeating-linear-gradient(90deg, var(--check) 0 6px, transparent 6px 10.5px); opacity: .6; }
.steps .n { width: 22.5px; height: 22.5px; border-radius: 50%; border: 1.5px solid var(--check); display: flex; align-items: center; justify-content: center;
  font: 600 9.75px 'IBM Plex Mono', ui-monospace, monospace; flex: none; }
.steps [aria-current] { color: var(--ink); font-weight: 700; }
.steps [aria-current] .n { border: 0; background: var(--or); color: var(--step-fg); box-shadow: 0 0 0 4.5px rgba(245, 165, 36, .18); }
.steps .done { color: var(--ink); }
.steps .done .n { border: 0; background: var(--accent); color: var(--step-fg); font-size: 0; }
.steps .done .n::before { content: '✓'; font-size: 10.5px; }
.steps li.done::after { background: var(--accent); opacity: 1; }
.panel { overflow: hidden; }
.panel section { padding: 24px 27px; display: flex; flex-direction: column; gap: 13.5px; }
.panel form { display: contents; }
.panel h2 { font-size: 22.5px; }
.lead2 { font-size: 12.75px; line-height: 1.55; color: var(--text); }
.lead2 b { color: var(--ink); }
.box { border-radius: 12px; padding: 12px 13.5px; font-size: 12px; line-height: 1.55; background: var(--soft); border: 0.75px solid var(--line); color: var(--text); }
.warn { background: var(--warn-bg); border-color: transparent; color: var(--warn-fg); }
.done-icon { width: 45px; height: 45px; border-radius: 50%; background: var(--good-bg); color: var(--good); display: flex; align-items: center; justify-content: center; }
.btn { height: 42px; border-radius: 74.25px; border: 0; width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
  font: 700 12.75px 'Archivo', system-ui, sans-serif; background: var(--btn); color: #FFFFFF; cursor: pointer; }
.btn.outline { background: transparent; border: 1.125px solid var(--field); color: var(--ink); }
.btn.danger { background: var(--bad-btn); }
.btn:disabled { background: var(--off); color: var(--off-fg); cursor: default; }
.or { display: flex; align-items: center; gap: 10.5px; font-size: 10.5px; color: var(--muted); }
.or::before, .or::after { content: ''; flex: 1; height: 0.75px; background: var(--line); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 11.25px; font-weight: 600; color: var(--muted); }
.field input { height: 42px; border-radius: 10.5px; border: 1.125px solid var(--field); padding: 0 13.125px; background: transparent; color: var(--ink);
  font: 500 13.5px 'Archivo', system-ui, sans-serif; }
.field input[aria-invalid='true'] { border: 1.5px solid var(--bad); padding: 0 12.75px; }
.field input:focus { border: 1.5px solid var(--accent); padding: 0 12.75px; outline: none; }
.alert { font-size: 11.25px; line-height: 1.45; color: var(--bad); }
.resend { align-self: flex-start; background: none; border: 0; padding: 0; font: 600 11.25px 'Archivo', system-ui, sans-serif; color: var(--accent); cursor: pointer; }
.resend:disabled { color: var(--muted); cursor: default; }
.tick { display: flex; gap: 9px; align-items: flex-start; font-size: 12px; line-height: 1.45; cursor: pointer; }
.tick input { appearance: none; -webkit-appearance: none; margin: 0; width: 16.5px; height: 16.5px; border-radius: 4.5px; border: 1.5px solid var(--check); flex: none; cursor: pointer; }
.tick input:checked { border: 0; background: var(--bad-btn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16.5px no-repeat; }

/* Licences: count tiles are the filters, then search and the table; same width as the header */
.lic { width: min(996px, 100% - 84px); margin-inline: auto; padding-top: 42px; display: flex; flex-direction: column; gap: 24px; }
.lic-head { display: flex; flex-direction: column; gap: 13.5px; }
.lic-head .lead { max-width: 570px; }
.filters { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; }
.filters button { padding: 13.5px; text-align: left; color: var(--ink); cursor: pointer; border-radius: 15px; font: inherit; }
.filters button[aria-pressed='true'] { border-color: var(--or); box-shadow: 0 0 0 0.75px var(--or); }
.filters b { display: block; font-size: 48px; font-weight: 800; font-stretch: 70%; line-height: 1; }
.filters span { display: block; margin-top: 4.5px; font: 600 9px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .12em; color: var(--muted); }
.search { height: 40.5px; width: 100%; border-radius: 74.25px; border: 1.125px solid var(--field); background: var(--card); color: var(--ink); padding: 0 16.5px;
  font: 500 12px 'Archivo', system-ui, sans-serif; }
.count { font-size: 11.25px; color: var(--muted); }
.count:empty { display: none; }
.group { display: flex; flex-direction: column; gap: 10.5px; }
.group h2 { font-size: 22.5px; }
.list { overflow: hidden; }
.list table { border-collapse: collapse; width: 100%; font-size: 12px; line-height: 1.45; }
.list th { text-align: left; padding: 10.5px 13.5px; font: 600 9px 'IBM Plex Mono', ui-monospace, monospace; letter-spacing: .12em; color: var(--muted); }
.list td { padding: 10.5px 13.5px; border-top: 0.75px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.list td + td { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.25px; color: var(--muted); white-space: nowrap; overflow-wrap: normal; }
.list td:nth-child(3) { white-space: normal; overflow-wrap: anywhere; }
.list th:nth-child(2) { width: 150px; } .list th:nth-child(3) { width: 150px; }
.list a { color: var(--accent); text-decoration: none; }
.list a:hover { text-decoration: underline; }


/* Icons sized in the HTML (22, 20 and 32 px there, used as is under 1024 px) */
.ic svg { width: 16.5px; height: 16.5px; }
#google svg { width: 15px; height: 15px; }
.done-icon svg { width: 24px; height: 24px; }

/* Narrower windows: the larger original sizes (the desktop rules above are these at 75%). Change a size in both
   places. Rules that share a property with a resized one are repeated here so they keep their order. */
@media (max-width: 1023px) {
  body { font-size: 16px; }
  :root { --shadow: 0 1px 2px rgba(20, 24, 29, .06); }
  html { scroll-padding-top: 24px; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
  [tabindex='-1']:focus { outline: none; }
  .wrap { width: min(1328px, 100% - 112px); }
  .eyebrow { font: 600 13px 'IBM Plex Mono', ui-monospace, monospace; }
  .mono-label { font: 600 12px 'IBM Plex Mono', ui-monospace, monospace; }
  .title { font-size: 104px; font-stretch: 70%; }
  .lead { font-size: 20px; }
  .hint { font-size: 14px; }
  .card { border: 1px solid var(--line); border-radius: 28px; }
  .skip { left: 16px; top: -100px; padding: 12px 16px; border-radius: 12px; font-weight: 700; }
  .skip:focus { top: 12px; }
  .site-head .wrap { gap: 36px; padding: 20px 0; }
  .brand { gap: 12px; font-size: 22px; font-weight: 800; font-stretch: 75%; }
  .tile { width: 34px; height: 34px; border-radius: 9px; padding: 8px; gap: 2px; }
  .tile i { border-radius: 1px; }
  .tile i:nth-child(1) { height: 40%; }
  .tile i:nth-child(2) { height: 100%; }
  .tile i:nth-child(3) { height: 60%; }
  .tile i:nth-child(4) { height: 85%; }
  .site-nav { gap: 32px; }
  .site-nav a { padding: 8px 0; font-size: 16px; }
  .site-nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--or); }
  .play { gap: 8px; border-radius: 99px; padding: 11px 18px; font-size: 15px; font-weight: 700; }
  .play small { font: 600 10px 'IBM Plex Mono', ui-monospace, monospace; padding: 3px 6px; border-radius: 6px; }
  .play.big { font-size: 17px; padding: 15px 24px; }
  .site-foot { border-top: 1px solid var(--line); margin-top: 96px; }
  .site-foot .wrap { gap: 24px; padding: 36px 0 44px; font-size: 15px; }
  .site-foot nav { gap: 24px; }
  .hero { grid-template-columns: minmax(0, 1fr) 560px; gap: 72px; padding-top: 72px; }
  .hero-copy { gap: 26px; }
  .cta { gap: 14px; }
  .cta span { font-size: 15px; }
  .cards { gap: 16px; }
  .run { border-color: var(--runcard-edge); padding: 28px 32px; gap: 18px; }
  .intervals { gap: 4px; height: 44px; }
  .intervals i { border-radius: 4px; }
  .protein { padding: 26px 32px; gap: 16px; }
  .protein .row { font-size: 19px; }
  .track { height: 12px; border-radius: 99px; }
  .track i { width: 67%; height: 100%; border-radius: 99px; }
  .features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding-top: 64px; }
  .features .card { padding: 28px; gap: 14px; }
  .features h2 { font-size: 28px; }
  .features p { font-size: 17px; }
  .ic { width: 44px; height: 44px; border-radius: 12px; }
  .doc { width: min(1328px, 100% - 112px); margin-inline: auto; padding-top: 56px; gap: 40px; }
  .doc-head { gap: 18px; }
  .short { padding: 22px 24px; font-size: 18px; }
  .stops { margin: 0; padding: 0; }
  .stops::before { left: 15px; top: 16px; bottom: 16px; width: 2px; }
  .stops > li { padding: 0 0 48px 64px; }
  .stops > li:last-child { padding-bottom: 0; }
  .stops > li::before { left: 6px; top: 10px; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--or); }
  .stops .mono-label { margin-bottom: 6px; }
  .stops h2 { font-size: 36px; margin-bottom: 14px; }
  .stops p, .stops li li { font-size: 18px; }
  .stops p + p, .stops ul + p, .stops p + ul, .stops p + .data { margin-top: 14px; }
  .stops ul { margin: 0; padding-left: 20px; }
  .data { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
  .data > div { border-radius: 18px; padding: 16px 18px; font-size: 15px; }
  .data b { margin-bottom: 4px; font-size: 16px; }
  .data .why { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
  .data .why i { margin-bottom: 2px; font: 600 11px 'IBM Plex Mono', ui-monospace, monospace; font-style: normal; }
  .del { width: min(680px, 100% - 112px); margin-inline: auto; padding-top: 64px; gap: 36px; }
  .del-head { gap: 18px; }
  .del-head .title { font-size: 88px; }
  .del > * { width: 100%; }
  .steps { margin: 0; padding: 0; gap: 14px; }
  .steps li { gap: 10px; font-size: 15px; }
  .steps li:not(:last-child)::after { min-width: 16px; height: 2px; background: repeating-linear-gradient(90deg, var(--check) 0 8px, transparent 8px 14px); }
  .steps .n { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--check); font: 600 13px 'IBM Plex Mono', ui-monospace, monospace; }
  .steps [aria-current] { font-weight: 700; }
  .steps [aria-current] .n { border: 0; background: var(--or); box-shadow: 0 0 0 6px rgba(245, 165, 36, .18); }
  .steps .done .n { border: 0; background: var(--accent); font-size: 0; }
  .steps .done .n::before { font-size: 14px; }
  .steps li.done::after { background: var(--accent); }
  .panel section { padding: 32px 36px; gap: 18px; }
  .panel h2 { font-size: 30px; }
  .lead2 { font-size: 17px; }
  .box { border-radius: 16px; padding: 16px 18px; font-size: 16px; background: var(--soft); border: 1px solid var(--line); }
  .warn { background: var(--warn-bg); border-color: transparent; }
  .done-icon { width: 60px; height: 60px; border-radius: 50%; background: var(--good-bg); }
  .btn { height: 56px; border-radius: 99px; border: 0; width: 100%; gap: 12px; font: 700 17px 'Archivo', system-ui, sans-serif; background: var(--btn); }
  .btn.outline { background: transparent; border: 1.5px solid var(--field); }
  .btn.danger { background: var(--bad-btn); }
  .btn:disabled { background: var(--off); }
  .or { gap: 14px; font-size: 14px; }
  .or::before, .or::after { height: 1px; background: var(--line); }
  .field { gap: 8px; }
  .field label { font-size: 15px; font-weight: 600; }
  .field input { height: 56px; border-radius: 14px; border: 1.5px solid var(--field); padding: 0 17.5px; background: transparent; font: 500 18px 'Archivo', system-ui, sans-serif; }
  .field input[aria-invalid='true'] { border: 2px solid var(--bad); padding: 0 17px; }
  .field input:focus { border: 2px solid var(--accent); padding: 0 17px; outline: none; }
  .alert { font-size: 15px; }
  .resend { background: none; border: 0; padding: 0; font: 600 15px 'Archivo', system-ui, sans-serif; }
  .tick { gap: 12px; font-size: 16px; }
  .tick input { margin: 0; width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--check); }
  .tick input:checked { border: 0; background: var(--bad-btn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; }
  .lic { width: min(1328px, 100% - 112px); margin-inline: auto; padding-top: 56px; gap: 32px; }
  .lic-head { gap: 18px; }
  .lic-head .lead { max-width: 760px; }
  .filters { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
  .filters button { padding: 18px; border-radius: 20px; font: inherit; }
  .filters button[aria-pressed='true'] { border-color: var(--or); box-shadow: 0 0 0 1px var(--or); }
  .filters b { font-size: 64px; font-weight: 800; font-stretch: 70%; }
  .filters span { margin-top: 6px; font: 600 12px 'IBM Plex Mono', ui-monospace, monospace; }
  .search { height: 54px; width: 100%; border-radius: 99px; border: 1.5px solid var(--field); background: var(--card); padding: 0 22px; font: 500 16px 'Archivo', system-ui, sans-serif; }
  .count { font-size: 15px; }
  .group { gap: 14px; }
  .group h2 { font-size: 30px; }
  .list table { border-collapse: collapse; width: 100%; font-size: 16px; }
  .list th { padding: 14px 18px; font: 600 12px 'IBM Plex Mono', ui-monospace, monospace; }
  .list td { padding: 14px 18px; border-top: 1px solid var(--line); }
  .list td + td { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 15px; }
  .list th:nth-child(2) { width: 200px; }
  .list th:nth-child(3) { width: 200px; }
  .ic svg { width: 22px; height: 22px; } #google svg { width: 20px; height: 20px; } .done-icon svg { width: 32px; height: 32px; }
}

/* Narrow windows: the tab bar becomes a menu button; the home hero stacks */
@media (max-width: 1023px) {
  .wrap, .doc, .del, .lic { width: calc(100% - 40px); }
  .site-head .wrap { padding: 16px 0; }
  .site-head .play { display: none; }
  .js .menu-btn { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 44px; height: 44px;
    border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
  .menu-btn i { width: 16px; height: 2px; border-radius: 1px; background: currentColor; }
  .js .site-nav { display: none; }
  .js .site-head.open .site-nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: absolute; z-index: 10; top: 68px; right: 0; left: 0;
    background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 8px; box-shadow: 0 12px 32px rgba(20, 24, 29, .14); }
  .js .site-head.open .site-nav a { padding: 14px 16px; border-radius: 16px; font-size: 17px; color: var(--ink); box-shadow: none; }
  .js .site-head.open .site-nav a[aria-current] { background: var(--pill-on); }
  .js .site-head.open .site-nav .menu-play { display: flex; justify-content: center; margin-top: 6px; border-radius: 99px; background: var(--play); color: var(--play-fg); }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 24px; }
  .features { grid-template-columns: minmax(0, 1fr); padding-top: 24px; }
  .site-foot { margin-top: 56px; }
  .site-foot .wrap { flex-direction: column; padding: 28px 0 32px; }
}
/* Phones */
@media (max-width: 700px) {
  .title, .del-head .title { font-size: 52px; }
  .lead { font-size: 17px; }
  .doc, .del, .lic { padding-top: 28px; gap: 28px; }
  .play.big small { white-space: nowrap; }
  .stops > li { padding-left: 48px; }
  .stops h2 { font-size: 30px; }
  .stops p, .stops li li { font-size: 17px; }
  .data { grid-template-columns: minmax(0, 1fr); }
  .steps { gap: 8px; }
  .steps li:not([aria-current]) .t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .panel section { padding: 24px 20px; }
  .btn { height: 52px; font-size: 16px; }
  .field input { height: 52px; font-size: 16px; }
  .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filters b { font-size: 40px; }
  .list th, .list td { padding: 12px 10px; }
  .list td + td { font-size: 14px; }
  .list table { table-layout: fixed; }
  .list th:nth-child(1) { width: 46%; } .list th:nth-child(2) { width: 26%; } .list th:nth-child(3) { width: 28%; }
}