/* ByteSweep v5, "Sorting Bays" (13 November 2026). Loaded after styles.css on every page
   (scripts/apply-v5.js puts it there; the homepage links it itself). The world: the sorting yard.
   White sign boards with heavy ink rules, three flat painted bays (safe to clear, review first,
   keep) that own whole regions, Overpass set heavy like road signs. Square corners, no glass,
   no gradients, no glow. Notes in DESIGN.md §v5-bays. */

@font-face { font-family: "Overpass"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/overpass-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00B6,U+00B8-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; }
@font-face { font-family: "Overpass"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/overpass-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Overpass"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/overpass-cyrillic-wght-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

/* ---- 1. tokens ----------------------------------------------------------------------------- */
:root {
  --bay1: #1f7a4a;      /* safe to clear: white on it 5.5:1 */
  --bay1-deep: #17613a; /* pressed, links on paper (7.4:1) */
  --bay2: #e39b22;      /* review first: ink on it 8.9:1 */
  --bay3: #5b6770;      /* keep: white on it 5.8:1 */
  --sign: #ffffff;      /* sign board */
  --yard: #ecebe6;      /* the yard's concrete, alternate bands */
  --inkk: #141414;      /* sign ink */
  --rule: 6px;          /* the heavy sign rule */
  --rule-thin: 2px;

  --bg: var(--sign); --subtle: var(--yard); --surface: #ffffff; --raised: #ffffff;
  --line: #d4d3cc; --line-2: #141414;
  --ink: var(--inkk); --text: #2b2b2b; --muted: #595a55;
  --band: var(--inkk); --band-2: #1f1f1f; --band-line: rgba(255,255,255,.18); --band-text: #e6e6e1; --band-muted: #b5b5ae;
  --accent: var(--bay1-deep); --accent-ink: #ffffff; --action: var(--inkk); --action-hover: var(--bay1); --accent-weak: #e2efe7;
  --ok: var(--bay1); --warn: #9a5b00; --danger: #b4371f;
  --frost: var(--yard);
  --p-mac: #e2efe7; --p-win: #f7e6c6; --p-ios: #dfe3e6; --p-linux: #f7e6c6;
  --r-xs: 0; --r-sm: 0; --r: 0; --r-lg: 0; --r-xl: 0;
  --shadow: none; --shadow-lg: 0 18px 40px -24px rgba(20,20,20,.45); --shadow-pop: 0 14px 30px -12px rgba(20,20,20,.35);
  --display: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "PingFang SC", "Microsoft YaHei", "Malgun Gothic", Roboto, sans-serif;
  --font: "Overpass", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "PingFang SC", "Microsoft YaHei", "Malgun Gothic", Roboto, sans-serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
/* Night shift in the yard: asphalt ground, the bays keep their paint, slightly deeper. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bay1: #1f7a4a; --bay1-deep: #6fd29b; --bay2: #e39b22; --bay3: #5b6770;
    --sign: #161616; --yard: #0f0f0f; --inkk: #f2f2ee;
    --bg: #161616; --subtle: #0f0f0f; --surface: #1d1d1d; --raised: #232323;
    --line: #34342f; --line-2: #f2f2ee; --ink: #f2f2ee; --text: #d9d9d3; --muted: #a8a8a0;
    --band: #0b0b0b; --band-2: #1a1a1a;
    --accent: #6fd29b; --action: #f2f2ee; --action-hover: #1f7a4a; --accent-ink: #141414; --accent-weak: #18301f;
    --p-mac: #18301f; --p-win: #3a2c12; --p-ios: #252a2e; --p-linux: #3a2c12;
  }
}
:root[data-theme="dark"] {
  --bay1: #1f7a4a; --bay1-deep: #6fd29b; --bay2: #e39b22; --bay3: #5b6770;
  --sign: #161616; --yard: #0f0f0f; --inkk: #f2f2ee;
  --bg: #161616; --subtle: #0f0f0f; --surface: #1d1d1d; --raised: #232323;
  --line: #34342f; --line-2: #f2f2ee; --ink: #f2f2ee; --text: #d9d9d3; --muted: #a8a8a0;
  --band: #0b0b0b; --band-2: #1a1a1a;
  --accent: #6fd29b; --action: #f2f2ee; --action-hover: #1f7a4a; --accent-ink: #141414; --accent-weak: #18301f;
  --p-mac: #18301f; --p-win: #3a2c12; --p-ios: #252a2e; --p-linux: #3a2c12;
}

/* ---- 2. base -------------------------------------------------------------------------------- */
body.v5 { font-family: var(--font); font-size: 17px; line-height: 1.55; background: var(--bg); color: var(--text); }
.v5 ::selection { background: var(--bay2); color: #141414; }
.v5 :focus-visible { outline: 3px solid var(--bay2); outline-offset: 2px; border-radius: 0; }
.v5 .top :focus-visible { outline-color: var(--bay2); }
.v5 { scrollbar-color: var(--bay3) var(--yard); }
.v5 h1, .v5 h2, .v5 h3, .v5 h4 { font-family: var(--display); color: var(--ink); font-weight: 800; letter-spacing: -.02em; }
.v5 h1 { font-weight: 900; letter-spacing: -.035em; line-height: .98; }
.v5 h2 { line-height: 1.02; letter-spacing: -.03em; }
.v5 h3 { font-weight: 750; letter-spacing: -.01em; }
.v5 main :where(a:not(.btn)) { color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.v5 main :where(a:not(.btn)):hover { text-decoration-color: currentColor; }
.v5 code, .v5 kbd { font-variant-numeric: tabular-nums; }
.v5 .fine, .v5 small { color: var(--muted); }
.v5 section.alt { background: var(--yard); }
.v5 b, .v5 strong { color: inherit; }

/* Buttons: sign plates. Ink plate, square, heavy; hover paints it bay green. */
.v5 .btn { border-radius: 0; border: var(--rule-thin) solid var(--line-2); background: transparent; color: var(--ink); font-family: var(--display); font-weight: 750; letter-spacing: 0; box-shadow: none; transition: background-color .18s var(--ease-out), color .18s var(--ease-out), border-color .18s var(--ease-out); }
.v5 .btn:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.v5 .btn.primary { background: var(--action); border-color: var(--action); color: var(--accent-ink); }
.v5 .btn.primary:hover { background: var(--action-hover); border-color: var(--action-hover); color: #fff; }
.v5 .btn.big { border-radius: 0; min-height: 54px; font-size: 17px; }
.v5 .pill { border-radius: 0; font-weight: 700; }

/* ---- 3. header: the yard's sign gantry ----------------------------------------------------- */
.v5 .announce { background: var(--bay2); color: #141414; border-bottom: 0; font-weight: 600; }
.v5 .announce a, .v5 .announce .sale-now { color: #141414; }
.v5 .announce .pill { background: #141414; color: var(--bay2); border-color: #141414; }
.v5 .top { background: var(--sign); color: var(--ink); border-bottom: var(--rule) solid var(--inkk); backdrop-filter: none; -webkit-backdrop-filter: none; }
.v5 .top .brand { color: var(--ink); font-weight: 900; font-size: 20px; letter-spacing: -.03em; }
.v5 .brand img { border-radius: 0; }
.v5 #nav-menu > li > a, .v5 .dd-btn { color: var(--ink); font-weight: 700; border-radius: 0; font-size: 15.5px; }
.v5 #nav-menu > li > a:hover, .v5 .dd-btn:hover, .v5 .dd-btn[aria-expanded="true"] { background: var(--yard); color: var(--ink); }
.v5 #nav-menu > li > a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -4px 0 var(--bay1); }
.v5 .top .icon-btn { color: var(--ink); border-radius: 0; }
.v5 .top .icon-btn:hover { background: var(--yard); color: var(--ink); }
.v5 .top .btn.primary { background: var(--inkk); border-color: var(--inkk); color: var(--sign); }
.v5 .top .btn.primary:hover { background: var(--bay1); border-color: var(--bay1); color: #fff; }
.v5 .lang-btn { color: var(--ink); border-radius: 0; }
.v5 .dd, .v5 .lang-menu { border-radius: 0; border: var(--rule-thin) solid var(--line-2); box-shadow: var(--shadow-pop); }
.v5 .dd-item, .v5 .dd-foot a { border-radius: 0; }
.v5 .dd-item .mark { border-radius: 0; }
.v5 .dd-foot { border-radius: 0; background: var(--yard); }
@media (max-width: 960px) {
  .v5 .nav-main { background: var(--sign); border-bottom: var(--rule) solid var(--inkk); }
  .v5 #nav-menu > li { border-bottom: 1px solid var(--line); }
}

/* ---- 4. footer: the site office board ------------------------------------------------------ */
.v5 footer { background: #141414; color: #b5b5ae; border-top: var(--rule) solid var(--bay1); }
.v5 footer .brand { color: #f2f2ee; font-weight: 900; }
.v5 footer a { color: #d9d9d3; }
.v5 footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.v5 .foot-h { color: #f2f2ee; text-transform: uppercase; letter-spacing: .08em; font-size: 13px; font-weight: 800; border-bottom: var(--rule-thin) solid #3a3a36; padding-bottom: 8px; }
.v5 footer .btn.primary { background: var(--bay1); border-color: var(--bay1); color: #fff; }
.v5 footer .btn.primary:hover { background: #fff; border-color: #fff; color: #141414; }
.v5 .langbar { border-top-color: #3a3a36; }
.v5 .langbar a { color: #d9d9d3; }
.v5 .langbar a[aria-current] { color: #fff; box-shadow: inset 0 -3px 0 var(--bay2); }
.v5 .foot-badges img { transition: filter .2s, opacity .2s; }
.v5 .foot-badges a:hover img { filter: none; opacity: 1; }

/* ---- 5. shared page furniture on every page ------------------------------------------------ */
.v5 main :is(.card, .tile, .plan, .price-card, .faq-item, .callout, .note, .stage, .feature-row, .promises li, .plats li, .edition, .replace-card, details) { border-radius: 0; }
.v5 main :is(.card, .tile, .plan, .price-card, .callout, .note, .edition, .replace-card) { border: var(--rule-thin) solid var(--line-2); box-shadow: none; }
.v5 main img { border-radius: 0; }
.v5 main :is(pre, code) { border-radius: 0; }
.v5 main table { border-collapse: collapse; }
.v5 main th { text-align: left; border-bottom: var(--rule-thin) solid var(--line-2); font-weight: 800; color: var(--ink); }
.v5 main td { border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.v5 .price { font-family: var(--display); font-weight: 900; }
/* Page heads on inner pages: the first heading sits on a sign board ruled underneath. */
.v5:not(.home5) main > section:first-child, .v5:not(.home5) main > header:first-child { border-bottom: var(--rule) solid var(--inkk); }
.v5:not(.home5) main > section:first-child h1, .v5:not(.home5) main > header:first-child h1 { font-size: clamp(40px, 6vw, 80px); }
/* The v6 product pages: the aurora and tinted stages become yard and bay paint. */
.v5 .aurora { display: none; }
.v5.v6 .simple-hero, .v5.v6 .phone-hero { background: var(--sign); color: var(--ink); }
.v5.v6 .simple-hero :is(h1, .say, p) { color: var(--ink); }
.v5.v6 .feature-row, .v5.v6 .feature .wrap { border-radius: 0; }
.v5.v6 .device { border-radius: 0; }
.v5 .cta-end { background: var(--bay1); color: #fff; }
.v5 .cta-end :is(h2, p, a:not(.btn)) { color: #fff; }
.v5 .cta-end .btn.primary { background: #fff; border-color: #fff; color: #141414; }
.v5 .cta-end .btn.primary:hover { background: #141414; border-color: #141414; color: #fff; }


/* Inner page heads (.hero, a dark band in v6): a white sign board, ruled underneath. */
.v5 .hero, .v5 .hero.stage-cut { background: var(--sign); color: var(--text); border-bottom: var(--rule) solid var(--inkk); }
.v5 .hero :is(h1, h2, h3, b, strong), .v5 .hero .spec td, .v5 .hero .platforms b { color: var(--ink); }
.v5 .hero :is(p, .lead) { color: var(--text); }
.v5 .hero :is(.fine, .platforms, .updated, .crumbs, .crumbs a, .eyebrow), .v5 .hero .spec th { color: var(--muted); }
.v5 .hero a:not(.btn):not(.appstore-badge) { color: var(--accent); }
.v5 .hero .btn:not(.primary) { background: transparent; color: var(--ink); border-color: var(--line-2); }
.v5 .hero .btn:not(.primary):hover { background: var(--inkk); color: var(--sign); }
.v5 .hero .btn.primary { background: var(--action); border-color: var(--action); color: var(--accent-ink); }
.v5 .hero .btn.primary:hover { background: var(--bay1); border-color: var(--bay1); color: #fff; }
.v5 .hero :is(code, .pill) { background: var(--yard); color: var(--ink); border-color: var(--line); }
.v5 .hero .spec :is(th, td) { border-color: var(--line); }
.v5 .hero :is(.window, .shot) { border-color: var(--inkk); box-shadow: var(--shadow-lg); }
.v5 .hero h1 { font-size: clamp(40px, 6vw, 84px); }

/* v6 product pages: no gradient lettering, no pills, no violet. */
.v5.v6 .simple-hero h1 { background: none; -webkit-text-fill-color: currentColor; color: var(--ink); }
.v5.v6 .top .btn.small, .v5.v6 main .tag, .v5.v6 .simple-hero .ver, .v5.v6 main .jump a, .v5.v6 .ask-try button, .v5.v6 main .tools .tool-on, .v5 .chip { border-radius: 0; }
.v5.v6 main .btn.primary.big, .v5.v6 main .simple-hero .btn.primary.big { background: var(--action); border-color: var(--action); color: var(--accent-ink); box-shadow: none; }
.v5.v6 main .btn.primary.big:hover { background: var(--bay1); border-color: var(--bay1); color: #fff; }
.v5.v6 .btn.big::after { display: none; }
.v5.v6 .simple-hero .ver { background: var(--yard); border-color: var(--line-2); color: var(--ink); }
.v5 .v6-progress { background: var(--bay1); }

/* Pricing: the buy plate and the quantity chooser in sign ink. */
.v5 :is(.buy-form button, .qty button, .qty-btn, [data-qty]) { border-radius: 0; }
.v5 .buy-form button[type="submit"], .v5 .buy-form .btn.primary { background: var(--action); border-color: var(--action); color: var(--accent-ink); }
.v5 .buy-form button[type="submit"]:hover { background: var(--bay1); border-color: var(--bay1); color: #fff; }
.v5 main input, .v5 main select, .v5 main textarea { border-radius: 0; }

.v5 .plan.lead-plan { border-color: var(--inkk); }
.v5 .plan.lead-plan .btn.primary, .v5 .lead-plan .qty-chip input:checked + span { background: var(--bay1); border-color: var(--bay1); color: #fff; }
.v5 .plan.lead-plan .btn.primary:hover { background: #fff; border-color: #fff; color: #141414; }
.v5 .lead-plan .qty-chip span { border-radius: 0; }
.v5 .plan.lead-plan .checks li::before, .v5 .lead-plan .qty-chip:hover span { border-color: var(--bay2); }
.v5 .plan.lead-plan a:not(.btn), .v5 .byline a { color: var(--bay2); }
.v5 :is(.lead-plan, .hero) :focus-visible, .v5 .lead-plan .qty-chip input:focus-visible + span { outline-color: var(--bay2); }
.v5 .hero-meta .ic, .v5 .hero .trust-item .ic { color: var(--bay1); }
.v5 .hero .trust-item { color: var(--muted); }

/* v6 stage tints become the yard's concrete and pale bay paint; badges lose their pill. */
body.v5.v6 { --t1: #e2efe7; --t2: var(--yard); --t3: #e2efe7; --t4: #f7e6c6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.v5.v6 { --t1: #18301f; --t2: #1d1d1d; --t3: #18301f; --t4: #3a2c12; } }
:root[data-theme="dark"] body.v5.v6 { --t1: #18301f; --t2: #1d1d1d; --t3: #18301f; --t4: #3a2c12; }
.v5 .notarised { border-radius: 0; border-color: var(--line-2); }
.v5 .notarised .ic { color: var(--bay1); }
.v5 .hero .notarised b { color: var(--ink); }

/* The student and NGO note: an amber sign plate, readable on paper and on the ink band alike. */
.v5 .discount-ask, .v5 .plan.lead-plan > p.discount-ask { background: var(--bay2); border: 0; border-radius: 0; color: #141414; font-weight: 600; }
.v5 .discount-ask .ic { color: #141414; }
.v5 .discount-ask a, .v5 .discount-ask a:hover { color: #141414; text-decoration-color: #141414; }

/* ---- 6. homepage: the yard ----------------------------------------------------------------- */
.v5 main { --gap: clamp(20px, 2.4vw, 32px); }
.home5 .wrap, .page5 .wrap { max-width: 1280px; }
.home5 main section, .v5 main section.y-hero { padding: 0; }

/* 6.1 the sign board */
.y-sign { background: var(--sign); border-bottom: var(--rule) solid var(--inkk); }
.y-sign-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0 clamp(32px, 5vw, 80px); align-items: start; padding-top: clamp(22px, 2.6vw, 36px); padding-bottom: clamp(20px, 2.4vw, 32px); }
.y-sign h1 { grid-column: 1 / -1; font-size: clamp(42px, 5.2vw, 76px); margin: 0 0 .3em; max-width: 20ch; }
.y-l2 { display: block; }
.y-sign .say { font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; color: var(--text); max-width: 46ch; margin: 0; }
.y-gates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--rule-thin) solid var(--line-2); }
.y-gates li { border-right: var(--rule-thin) solid var(--line-2); border-bottom: var(--rule-thin) solid var(--line-2); }
.y-gates li:nth-child(3n) { border-right: 0; }
.y-gates li:nth-last-child(-n+3) { border-bottom: 0; }
.y-gates a { text-decoration: none; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 12px 16px; font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--ink); text-decoration: none; background: var(--sign); transition: background-color .16s var(--ease-out), color .16s var(--ease-out); }
.y-gates a .ic { width: 22px; height: 22px; flex: none; }
.y-gates a:hover { background: var(--inkk); color: var(--sign); text-decoration: none; }
.y-gates a:active { background: var(--bay1); color: #fff; }
.y-get-note { margin: 12px 0 0; font-size: 15px; color: var(--muted); }

/* 6.2 the three bays */
.y-bays { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); position: relative; }
.y-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: space-between; gap: 16px; padding: 10px clamp(16px, 2.4vw, 32px); font-size: 13.5px; font-weight: 600; color: #fff; pointer-events: none; }
.y-bay { position: relative; padding: clamp(20px, 2.2vw, 32px) clamp(20px, 2.4vw, 36px) clamp(52px, 4.6vw, 64px); min-height: 0; color: #fff; display: flex; flex-direction: column; }
.y-bay + .y-bay { border-left: var(--rule) solid var(--inkk); }
.y-bay.b1 { background: var(--bay1); }
.y-bay.b2 { background: var(--bay2); color: #141414; }
.y-bay.b3 { background: var(--bay3); }
.y-bay h2 { color: inherit; font-size: clamp(24px, 2.3vw, 36px); margin: 0; padding-bottom: .04em; }
.y-bay-head { display: flex; align-items: flex-end; gap: clamp(12px, 1.4vw, 20px); margin-bottom: 12px; }
.y-num { font-family: var(--display); font-weight: 900; font-size: clamp(56px, 5vw, 80px); line-height: .78; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.y-pict { width: clamp(30px, 2.6vw, 42px); height: auto; align-self: flex-start; flex: none; margin-left: auto; }
.y-rule { margin: 0 0 12px; font-size: 15px; line-height: 1.4; max-width: 40ch; color: inherit; }
.y-rows { list-style: none; margin: 0 0 18px; padding: 0; border-top: var(--rule-thin) solid currentColor; }
.y-rows li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 40%, transparent); font-size: 17px; font-weight: 600; max-height: 4em; overflow: hidden; transition: transform .5s var(--ease-out), opacity .35s var(--ease-out), max-height .5s var(--ease-out) .12s, padding .5s var(--ease-out) .12s, border-color .3s; }
.y-rows li b { font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; }
.y-rows li.gone { transform: translateY(-28px); opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-color: transparent; }
.y-bay.b1.cleared .y-rows { border-top-style: dashed; }
.y-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.y-btn { font: 800 16px/1 var(--display); padding: 13px 14px; min-height: 48px; border: var(--rule-thin) solid #fff; background: #fff; color: #10391f; cursor: pointer; border-radius: 0; transition: background-color .16s var(--ease-out), color .16s var(--ease-out), opacity .16s; }
.y-btn:hover:not(:disabled) { background: #141414; border-color: #141414; color: #fff; }
.y-btn.ghost { background: transparent; color: #fff; }
.y-btn:disabled { opacity: .45; cursor: default; }
.y-free { margin: 0 0 0 auto; display: flex; align-items: baseline; gap: 6px; font-family: var(--display); font-weight: 700; font-size: 15px; white-space: nowrap; }
.y-free b { font-size: clamp(26px, 2.1vw, 32px); font-weight: 900; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.y-bay.b1.cleared { background: #155c37; transition: background-color .6s var(--ease-out); }

/* 6.3 sections below */
.v5 .y-section { padding: clamp(72px, 9vw, 128px) 0; border-bottom: var(--rule) solid var(--inkk); }
.y-h { font-size: clamp(36px, 5vw, 72px); max-width: 16ch; margin: 0 0 .5em; }
.y-lede { font-size: clamp(17px, 1.4vw, 21px); max-width: 52ch; margin: 0 0 clamp(32px, 4vw, 56px); }
.y-more { margin: 32px 0 0; font-weight: 700; }
.y-fine { margin: 24px 0 0; font-size: 14.5px; color: var(--muted); max-width: 80ch; }
.y-slate .y-fine { color: #fff; }

.y-board { list-style: none; margin: 0; padding: 0; counter-reset: rule; border-top: var(--rule) solid var(--inkk); }
.y-board li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px clamp(24px, 4vw, 64px); padding: clamp(22px, 2.6vw, 36px) 0; border-bottom: var(--rule-thin) solid var(--line-2); align-items: baseline; }
.y-board h3 { font-size: clamp(26px, 3vw, 44px); margin: 0; }
.y-board p { margin: 0; font-size: 18px; max-width: 54ch; }

.y-slate { background: var(--bay3); color: #fff; }
.y-slate .y-h, .y-slate .y-lede, .y-slate a { color: #fff; }
.y-shot { margin: 0; }
.y-shot img { display: block; width: 100%; height: auto; background: #fff; box-shadow: 0 30px 60px -30px rgba(0,0,0,.55); outline: var(--rule) solid #141414; }
.y-shot figcaption { margin-top: 14px; font-size: 15px; color: #fff; max-width: 70ch; }
.y-shot figcaption b { display: inline-block; background: #141414; color: #fff; padding: 2px 8px; margin-right: 8px; font-weight: 800; }
.y-shot-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); margin-top: clamp(40px, 5vw, 64px); }

.y-dir { list-style: none; margin: 0; padding: 0; border-top: var(--rule) solid var(--inkk); }
.y-dir li { border-bottom: var(--rule-thin) solid var(--line-2); }
.y-dir a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr) 28px; gap: 8px clamp(20px, 3vw, 40px); align-items: baseline; padding: 22px 8px; color: var(--ink); text-decoration: none; transition: background-color .16s var(--ease-out), padding .3s var(--ease-out); }
.y-dir a::after { content: ""; width: 20px; height: 20px; align-self: center; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M4 12h15M13 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='square'%3E%3Cpath d='M4 12h15M13 5l7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; }
.y-dir a:hover { background: var(--inkk); color: var(--sign); padding-left: 20px; text-decoration: none; }
.y-dir a:hover .y-dir-req, .y-dir a:hover .y-dir-what { color: inherit; }
.y-dir-name { font-family: var(--display); font-weight: 850; font-size: clamp(20px, 1.9vw, 26px); letter-spacing: -.02em; }
.y-dir-what { font-size: 16.5px; color: var(--text); }
.y-dir-req { font-size: 14.5px; color: var(--muted); }
.y-dir code { font-size: .92em; background: var(--yard); padding: 1px 6px; color: var(--ink); }
.y-dir a:hover code { background: #333; color: #fff; }

/* 6.4 the kept sections, refitted to the yard */
.home5 #replaces, .home5 #mac-editions, .home5 #cleans, .home5 #pricing, .home5 #safety, .home5 #faq { padding: clamp(72px, 9vw, 128px) 0; border-bottom: var(--rule) solid var(--inkk); background: var(--sign); }
.home5 #replaces, .home5 #pricing { background: var(--yard); }
.home5 :is(#replaces, #mac-editions, #cleans, #pricing, #safety, #faq) h2 { font-size: clamp(36px, 5vw, 72px); max-width: 16ch; margin: 0 0 .4em; }
.home5 :is(#replaces, #mac-editions, #cleans) .intro { font-size: clamp(17px, 1.4vw, 21px); max-width: 56ch; margin: 0 0 clamp(32px, 4vw, 56px); }
.home5 .more { font-weight: 700; margin-top: 28px; }

.home5 .replace-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: var(--rule-thin) solid var(--line-2); background: var(--sign); }
.home5 .replace-card { padding: clamp(24px, 3vw, 40px); border: 0; display: flex; flex-direction: column; }
.home5 .replace-card .replace-total { margin-top: auto; }
.home5 .replace-card + .replace-card { border-left: var(--rule-thin) solid var(--line-2); }
.home5 .replace-card h3 { font-size: 26px; margin: 0 0 16px; }
.home5 .replace-list { list-style: none; margin: 0; padding: 0; border-top: var(--rule-thin) solid var(--line-2); }
.home5 .replace-list li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.home5 .replace-list small { display: block; color: var(--muted); font-size: 13.5px; }
.home5 .replace-list b { font-weight: 700; white-space: nowrap; }
.home5 .replace-free { font-size: 14.5px; color: var(--muted); margin: 14px 0 0; }
.home5 .replace-total, .home5 .replace-ours { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding: 14px 0; font-weight: 700; }
.home5 .replace-total { border-bottom: var(--rule-thin) solid var(--line-2); color: var(--muted); }
.home5 .replace-ours { background: var(--bay1); color: #fff; margin: 16px calc(-1 * clamp(24px, 3vw, 40px)) calc(-1 * clamp(24px, 3vw, 40px)); padding: 18px clamp(24px, 3vw, 40px); font-size: 19px; }
.home5 .replace-ours b { font-size: 26px; font-weight: 900; }
.home5 .replace-note { font-size: 13.5px; color: var(--muted); margin: 14px 0 0; max-width: 90ch; }

.home5 .editions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: var(--rule-thin) solid var(--line-2); }
.home5 .edition { padding: clamp(24px, 3vw, 40px); border: 0; display: flex; flex-direction: column; gap: 8px; }
.home5 .edition + .edition { border-left: var(--rule-thin) solid var(--line-2); }
.home5 .edition.is-pro { background: var(--inkk); color: var(--sign); }
.home5 .edition.is-pro :is(h3, p, li, b) { color: var(--sign); }
.home5 .ed-where { margin: 0; font-weight: 800; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.home5 .edition h3 { font-size: 30px; margin: 0; }
.home5 .edition h3 a { color: inherit; }
.home5 .ed-list { margin: 12px 0; padding-left: 1.1em; }
.home5 .ed-list li { margin: 6px 0; }
.home5 .ed-price { margin: auto 0 12px; }
.home5 .edition .btn { align-self: flex-start; }
.home5 .edition.is-pro .btn.primary { background: var(--bay1); border-color: var(--bay1); color: #fff; }
.home5 .edition.is-pro .btn.primary:hover { background: var(--sign); color: var(--inkk); border-color: var(--sign); }
.home5 #mac-editions .fine { margin-top: 16px; }

.home5 .cleans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--rule) solid var(--inkk); }
.home5 .clean-col { padding: 24px 24px 8px 0; }
.home5 .clean-col + .clean-col { padding-left: 24px; border-left: var(--rule-thin) solid var(--line-2); }
.home5 .clean-col h3 { font-size: 22px; margin: 0 0 12px; }
.home5 .clean-col ul { margin: 0; padding: 0; list-style: none; }
.home5 .clean-col li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }

.home5 #pricing .wrap { text-align: left; }
.home5 #pricing .price { font-size: clamp(80px, 13vw, 200px); letter-spacing: -.06em; line-height: .9; margin: 12px 0 24px; justify-content: flex-start; color: var(--ink); }
.home5 #pricing .price small { font-size: clamp(18px, 1.6vw, 24px); color: var(--text); letter-spacing: 0; font-weight: 700; }
.home5 #pricing p { max-width: 60ch; font-size: 17px; }

.home5 .safe-list { list-style: none; margin: 0; padding: 0; border-top: var(--rule) solid var(--inkk); }
.home5 .safe-list li { display: flex; gap: 14px; align-items: flex-start; padding: 20px 0; border-bottom: var(--rule-thin) solid var(--line-2); font-size: 19px; position: relative; max-width: 80ch; }

.home5 .qa { max-width: none; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); border-top: var(--rule) solid var(--inkk); }
.home5 .qa > div, .home5 .qa > div:last-child { padding: 22px 0; border-top: 0; border-bottom: var(--rule-thin) solid var(--line-2); }
.home5 .qa h3 { font-size: 21px; margin: 0 0 8px; }
.home5 .qa p { margin: 0; max-width: 60ch; }

.v5 .y-close { background: var(--bay1); color: #fff; padding: clamp(72px, 9vw, 128px) 0; }
.v5 .y-close h2 { color: #fff; font-size: clamp(48px, 8vw, 120px); margin: 0 0 .25em; }
.v5 .y-close p { font-size: 19px; max-width: 56ch; color: #fff; }
.v5 .y-close .y-gates { margin: 32px 0 0; grid-template-columns: repeat(6, minmax(0, 1fr)); border-color: #fff; max-width: 1100px; }
.v5 .y-close .y-gates li { border-color: #fff; border-bottom: 0; }
.v5 .y-close .y-gates li:nth-child(3n) { border-right: var(--rule-thin) solid #fff; }
.v5 .y-close .y-gates li:last-child { border-right: 0; }
.v5 .y-close .y-gates a { background: transparent; color: #fff; justify-content: center; font-size: 19px; min-height: 72px; }
.v5 .y-close .y-gates a:hover { background: #fff; color: #10391f; }
.v5 .y-close-note { font-size: 15px !important; margin-top: 18px; color: rgba(255,255,255,.88) !important; }
.v5 .y-close-note a { color: #fff !important; }

/* ---- 7. narrower screens ------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .y-sign-grid { grid-template-columns: 1fr; align-items: start; }
  .y-sign .say { margin-bottom: 24px; }
  .home5 .cleans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home5 .clean-col:nth-child(3) { padding-left: 0; border-left: 0; }
  .y-dir a { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 28px; }
  .y-dir-req { grid-column: 2; }
  .y-dir a::after { grid-row: 1; grid-column: 3; }
}
@media (max-width: 820px) {
  .y-bays { grid-template-columns: 1fr; }
  .y-bay { min-height: 0; padding-bottom: 32px; }
  .y-bay + .y-bay { border-left: 0; border-top: var(--rule) solid var(--inkk); }
  .y-bay-head { margin-bottom: 4px; }
  .y-num { font-size: 76px; }
  .y-cap { position: static; background: var(--inkk); color: var(--sign); flex-direction: column; gap: 2px; }
  .y-bays { display: flex; flex-direction: column; }
  .y-cap { order: 4; }
  .y-board li { grid-template-columns: 1fr; }
  .y-shot-pair, .home5 .replace-duo, .home5 .editions, .home5 .qa { grid-template-columns: 1fr; }
  .home5 .replace-card + .replace-card, .home5 .edition + .edition { border-left: 0; border-top: var(--rule-thin) solid var(--line-2); }
  .y-dir a { grid-template-columns: minmax(0, 1fr) 24px; }
  .y-dir-what, .y-dir-req { grid-column: 1; }
  .y-dir a::after { grid-row: 1; grid-column: 2; }
  .v5 .y-close .y-gates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v5 .y-close .y-gates li:nth-child(3n) { border-right: 0; }
  .v5 .y-close .y-gates li:nth-child(-n+3) { border-bottom: var(--rule-thin) solid #fff; }
}
@media (max-width: 560px) {
  .v5 .top .brand { font-size: 18px; }
  .v5 .nav-tools { gap: 2px; }
  .y-gates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .y-gates li:nth-child(3n) { border-right: var(--rule-thin) solid var(--line-2); }
  .y-gates li:nth-child(2n) { border-right: 0; }
  .y-gates li:nth-last-child(3) { border-bottom: var(--rule-thin) solid var(--line-2); }
  .v5 .y-close .y-gates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v5 .y-close .y-gates li { border-bottom: var(--rule-thin) solid #fff !important; border-right: var(--rule-thin) solid #fff !important; }
  .v5 .y-close .y-gates li:nth-child(2n) { border-right: 0 !important; }
  .v5 .y-close .y-gates li:nth-last-child(-n+2) { border-bottom: 0 !important; }
  .home5 .cleans { grid-template-columns: 1fr; }
  .home5 .clean-col + .clean-col { padding-left: 0; border-left: 0; }
  .home5 .replace-list li, .home5 .replace-total, .home5 .replace-ours { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .y-rows li, .y-bay.b1.cleared, .y-dir a, .y-gates a, .v5 .btn { transition: none; }
}

/* Skip link: a bay-green plate in both themes. */
.v5 .skip, .v5 .skip:focus { background: var(--bay1); color: #fff; border-radius: 0; }

/* Inner pages, after review: no halo behind the phone, square icon tiles, ruled v6 heads. */
.v5.v6 .phone-hero .swipe-demo::before, .v5.v6 .phone-hero .hero-shot::before { display: none; }
.v5 :is(.os-ic, .dl .ic-tile, .feat-ic, .ico, .mark) { border-radius: 0; }
.v5.v6 .simple-hero, .v5.v6 .phone-hero { border-bottom: var(--rule) solid var(--inkk); }

/* ---- fixes 2026-11-13 ------------------------------------------------------------------------ */
/* Pages that keep body.v6 for its tour and notch scripts (mac, mac-app-store): v6's link colour lost to v5's */
.v5.v6 main a:not(.btn):where(:not(.y-slate *, .y-close *, .y-bay *, .m-ed.is-pro *)) { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
/* footer language bar: same edges as the footer columns, and a label that shows on the dark ground */
.v5 .langbar { max-width: none; width: min(1232px, calc(100% - 48px)); padding-left: 0; padding-right: 0; border-top-color: #3a3a36; }
.v5 .langbar-label { color: #f2f2ee; }
.v5 .langbar-note { color: #8f8f88; }
/* partner badges are drawn for a light page: give each a light plate so the dark ones show */
.v5 .foot-badges .badges > a, :root[data-theme="dark"] .v5 .foot-badges .badges > a { opacity: 1; filter: grayscale(1); background: #ecebe6; padding: 4px 6px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .v5 .foot-badges .badges > a { opacity: 1; filter: grayscale(1); background: #ecebe6; padding: 4px 6px; } }
.v5 .foot-badges .badges > a:hover, .v5 .foot-badges .badges > a:focus-visible { filter: none; }
.v5 .foot-badges .badges > a:has(img[src*="badge-dark"]) { background: #2e2e2b; }
/* the old sheet hides the word on small phones and drops the gap; v5 shows the word, so it needs the gap back */
@media (max-width: 430px) { .v5 .top .brand { gap: 6px; } }
@media (max-width: 389px) { .v5 .top .brand { font-size: 0; gap: 0; } }
@media (max-width: 430px) { .v5 .nav-tools { gap: 2px; } .v5 .lang-btn { gap: 5px; padding: 0 7px; } .v5 .lang-btn .chev { display: none; } .v5 .nav-tools .btn { margin-left: 4px; } }
/* mac and mac-app-store keep body.v6: v6.js marks the header .is-stuck on scroll and v6 paints it navy,
   and it draws a violet scroll hairline; neither belongs to v5 */
.v5 .top.is-stuck { background: var(--sign); border-bottom-color: var(--inkk); }
.v5 .v6-progress { display: none; }
@media (max-width: 460px) { .v5.v6 #theme-toggle { display: grid; } }
/* bay captions: each half stays inside its own bay instead of running into the next one */
.y-cap > span { max-width: calc(33.333% - 32px); }
.y-cap > span + span { text-align: right; }
@media (max-width: 820px) { .y-cap > span { max-width: none; } .y-cap > span + span { text-align: left; } }
/* links in a heading read as the heading */
.v5.v6 main :is(h2, h3) a:not(.btn) { color: inherit; }
.v5.v6 main :is(h2, h3) a:not(.btn) { text-decoration-color: currentColor; }
/* v6's larger header buttons (44px, pill) leak onto the body.v6 pages; use the v5 sizes so the header fits phones */
.v5.v6 .top .btn.small { min-height: 34px; padding: 6px 12px; font-size: 14px; font-weight: 750; border-radius: 0; }
.v5.v6 .top .icon-btn { width: 36px; height: 36px; }
.v5.v6 .top .lang-btn { font-size: 14.5px; }
/* a long product name in a big headline wraps instead of widening the page on small phones */
.v5 main :is(h1, h2, h3) { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 359px) { .v5 .top .btn.small { padding: 6px 8px; font-size: 13px; } .v5 .top .nav-tools .btn { margin-left: 2px; } }
@media (max-width: 480px) { .v5 main :is(h1, h2, h3) { overflow-wrap: anywhere; } }
/* languages whose header Download label is long: logo without the word on phones so the header fits */
@media (max-width: 440px) { html:is([lang="fr"], [lang="ja"], [lang="pl"]) .v5 .top .brand { font-size: 0; gap: 0; } }

/* ---- device plates (Mac Pro, Mac Lite, Windows, Linux, iPhone, Android, CLI): any count tiles ----
   The list draws its top and left rule, each plate its right and bottom, so 4, 6 or 7 plates
   fill whatever columns fit without per-count nth-child rules. Windows/Linux download rows (.w-dl) keep theirs. */
.v5 ul.y-gates:not(.w-dl) { --gl: var(--line-2); border: 0; border-top: var(--rule-thin) solid var(--gl); border-left: var(--rule-thin) solid var(--gl); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.v5 ul.y-gates:not(.w-dl) > li { border: 0 !important; border-right: var(--rule-thin) solid var(--gl) !important; border-bottom: var(--rule-thin) solid var(--gl) !important; min-width: 0; }
.v5 .y-close ul.y-gates:not(.w-dl), .v5.guide5 .guide-close ul.y-gates { --gl: #fff; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); max-width: 1180px; }
.v5.guide5 .guide-close ul.y-gates { max-width: 760px; }
@media (max-width: 760px) { .v5 ul.y-gates:not(.w-dl), .v5 .y-close ul.y-gates:not(.w-dl), .v5.guide5 .guide-close ul.y-gates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* outrank the older per-count !important rules in the green bands and guide closes */
html .v5 ul.y-gates:not(.w-dl) > li:nth-child(n), html .v5 .y-close ul.y-gates:not(.w-dl) > li:nth-child(n), html .v5.guide5 .guide-close ul.y-gates > li:nth-child(n) { border: 0 !important; border-right: var(--rule-thin) solid var(--gl) !important; border-bottom: var(--rule-thin) solid var(--gl) !important; }
/* long compound words (German "Wiederherstellungspartitionen") in icon rows wrap instead of widening the page */
.v5 main li > span { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
/* the Mac pages keep body.v6, whose header button rule outranks the small-phone one */
@media (max-width: 359px) { .v5.v6 .top .btn.small { padding: 6px 8px; font-size: 13px; } }