/* PWE Tools — the same tokens the app and the printed guides use. */
:root {
  --navy: #0E1729; --navy-lift: #22355A; --paper: #F7F5F2; --paper-warm: #EFEAE2;
  --ink: #0C0A09; --ink-2: #3F3C39; --rule: #E3DFD8; --card: #FFFFFF;
  /* Darkened 2026-10-14 so small grey text and amber links pass WCAG AA on both paper grounds:
     muted 5.31 on paper, 4.83 on paper-warm; deep amber 5.08 and 4.62. Same hues as before. */
  --muted: #5F6673;
  --amber: #F5B335;        /* dark grounds only — fails AA on paper */
  --deep-amber: #965B06;   /* the accent that is legal on paper */
  --on-dark: #F3F1EE; --on-dark-2: rgba(243,241,238,0.66);
  --good: #1E7A46;
  /* The system face, as on pwestudio.online. No web font: nothing to download, nothing sent to a
     third party, and each platform's own optical sizes. The wordmarks are outlines (wordmarks.py). */
  --font: system-ui, -apple-system, "SF Pro Text", "Segoe UI Variable", "Segoe UI", Roboto,
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  /* Type: each size with its own leading and tracking — large type tighter in both, small type looser
     in leading; caps labels carry their tracking where they are used. A heading is never smaller than
     the text under it: h3 is body size in semibold (apple.com's pattern), h2 one clear step above. */
  --t-title: clamp(26px, 3vw, 32px);   /* section h2    1.15  -0.016em */
  --t-h3: 17px;                        /*               1.4    0       */
  --t-body: 17px;                      /*               1.53   0       (Apple's body size; 2026-10-21) */
  --t-small: 14px;                     /*               1.55   0       */
  --t-caption: 13px;                   /*               1.5    0       */
  /* Space: multiples of four. */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  /* The section step: the space between one part of a page and the next. */
  --section: clamp(56px, 8vw, 88px);
  /* Corners: 13 for a card, 21 for a tile that holds a picture — pwestudio.online's two radii. */
  --r: 13px; --r-lg: 21px;
  /* A line of prose stops at about 70 characters; pictures, tables and grids use the full width. */
  --measure: 38em;
  --foot: #EFEAE2;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper); color: var(--ink); line-height: 1.53;
  font-family: var(--font);
  font-size: var(--t-body); -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 980px; margin: 0 auto; padding: 0 24px; }
/* Every page shares one left edge — the bar, the hero, the product bar and the text all start on it,
   as on pwestudio.online. Reading pages used to sit in a narrower, centred column whose edge fell
   110px inside the header's; their prose is now held to --measure instead. */

/* ── header ── */
header.band { background: linear-gradient(135deg, var(--navy-lift), var(--navy)); color: var(--on-dark); }
/* The band ends where the page begins. The 3px amber rule that underlined it was ornament, and
   amber is a signal in the brand (08) — pwestudio.online's night hero meets its paper the same way. */
header.band > .wrap { padding-bottom: clamp(48px, 7vw, 80px); }
/* The first layer (chrome.py writes it): the line's wordmark, For brokers · Mac & PC · Help, the
   language switch. The same on every page. Below 720px the links fold behind a Menu button; the
   panel opens from under the bar and closes the same way, and nothing behind it dims (doc 35 §3.7). */
/* 44px — apple.com's global bar, a step quieter than the 52px product bar under it. */
header.band .bar { position: relative; display: flex; align-items: center; gap: 12px 28px; height: 44px;
  margin-bottom: clamp(32px, 6vw, 64px); }
.lockup { display: flex; align-items: center; flex: none; margin-right: auto; text-decoration: none; border-radius: 4px; }
.lockup img { display: block; height: 20px; width: auto; }
header.band nav { display: flex; gap: 28px; }
nav a { color: rgba(243,241,238,0.8); text-decoration: none; font-size: 13px; letter-spacing: -0.005em;
  white-space: nowrap; padding: 6px 0; transition: color 320ms cubic-bezier(.4,0,.6,1); }
:lang(zh) nav a, nav a:lang(zh) { letter-spacing: 0; }
nav a:hover, nav a[aria-current="page"] { color: var(--on-dark); }
nav a[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--amber); }
/* The language switch and the phone's menu button are one shape: a 26px capsule with a hairline, as
   on pwestudio.online. The switch shows only the language you can go to; the current one stays in
   the page, pressed and hidden. Each grows a 44px target without growing the bar. */
.menubtn, .langs button { position: relative; display: inline-flex; align-items: center; height: 26px;
  padding: 0 11px; border: 1px solid rgba(243,241,238,0.34); border-radius: 980px; background: none;
  color: rgba(243,241,238,0.84); font: inherit; font-size: 11px; font-weight: 500; letter-spacing: 0.04em;
  cursor: pointer; }
.menubtn::before, .langs button::before { content: ""; position: absolute; inset: -9px -4px; }
.menubtn:hover, .langs button:hover { border-color: var(--amber); color: var(--amber); }
.menubtn { display: none; }
.langs { display: inline-flex; flex: none; }
.langs button[aria-pressed="true"] { display: none; }
@media (max-width: 720px) {
  .menubtn { display: inline-flex; }
  header.band .gnav { position: absolute; z-index: 60; top: calc(100% - 8px); left: -12px; right: -12px;
    flex-direction: column; gap: 0; padding: 8px 12px; border-radius: 12px;
    background: var(--navy-lift); box-shadow: 0 16px 40px rgba(0,0,0,0.35);
    opacity: 0; transform: translateY(-8px); visibility: hidden; pointer-events: none;
    transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 0s linear 200ms; }
  header.band .gnav.open { opacity: 1; transform: none; visibility: visible; pointer-events: auto;
    transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 0s; }
  /* Links come in language pairs, so the first two children are the first visible item. */
  header.band .gnav a { font-size: 17px; padding: 12px 4px; border-top: 1px solid rgba(243,241,238,0.08); }
  header.band .gnav a:nth-child(-n+2) { border-top: 0; }
  header.band .gnav a[aria-current="page"] { box-shadow: none; color: var(--amber); }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  header.band .gnav, header.band .gnav.open { transform: none; }
}

/* The second layer, on a product's pages: icon and name, the product's pages, its one main action.
   It sticks to the top so the action is always one click away. A material, not a slab: paper at
   72% with a blur, and an edge only while content runs under it (.stuck, set by ui.js). */
.subnav { position: sticky; top: 0; z-index: 50; height: 52px; background: transparent;
  transition: background-color 240ms cubic-bezier(.28,.11,.32,1); }
/* At rest the bar is the page; stuck, it becomes a material over what scrolls beneath, with a
   hairline edge — no shadow (apple.com's local nav, measured 2026-10-21). */
.subnav-in { height: 52px; display: flex; align-items: center; gap: 24px; position: relative; }
.subnav-in::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0; height: 1px;
  background: rgba(12,10,9,0.16); }
.subnav.stuck { background: rgba(247,245,242,0.8); -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px); box-shadow: inset 0 -1px 0 rgba(12,10,9,0.16); }
.subnav.stuck .subnav-in::after { display: none; }
.subname { display: flex; align-items: center; gap: 10px; flex: none; text-decoration: none;
  color: var(--ink); font-weight: 600; font-size: 21px; letter-spacing: 0.006em; }
@media (max-width: 833px) { .subname { font-size: 19px; } }
.subname img { border-radius: 22.37%; }
.subnav nav { display: flex; gap: 24px; margin-right: auto; min-width: 0; overflow-x: auto; scrollbar-width: none;
  align-self: stretch; align-items: center; }
.subnav nav::-webkit-scrollbar { display: none; }
.subnav nav a { position: relative; align-self: stretch; display: flex; align-items: center;
  color: var(--ink-2); font-size: 13px; letter-spacing: -0.005em; padding: 0; }
.subnav nav a:hover, .subnav nav a[aria-current="page"] { color: var(--ink); }
/* The page you are on: full ink and a keyline on the bar's own bottom edge. */
.subnav nav a[aria-current="page"] { box-shadow: inset 0 -1px 0 var(--ink); cursor: default; }
.cta.subcta { position: relative; flex: none; min-height: 28px; margin: 0; padding: 0 12px; font-size: 13px;
  font-weight: 400; letter-spacing: -0.005em; }
.cta.subcta::before { content: ""; position: absolute; inset: -8px -2px; }   /* a 44px target in a 28px capsule */
.subcta.soon { display: inline-block; flex: none; color: var(--muted); font-size: 13px; font-weight: 500; }
@media (max-width: 600px) {
  .subname span { display: none; }
  .subnav-in { gap: 16px; }
  .subnav nav { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 20px), transparent); }
}
@media (prefers-color-scheme: dark) {
  .subnav-in::after { background: rgba(255,255,255,0.14); }
  .subnav.stuck { background: rgba(18,22,28,0.8); box-shadow: inset 0 -1px 0 rgba(255,255,255,0.14); }
}
@media (prefers-reduced-transparency: reduce) {
  .subnav.stuck { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .subnav, .subnav.stuck { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: inset 0 -1px 0 var(--ink-2); }
  .card, .tier { border-color: var(--ink-2); }
  footer, footer a, .muted, .figcap { color: var(--ink-2); }
}

/* The brand signature. Small-label spec from brand-identity.html: Semibold 600,
   letter-spacing +0.18em, caps. Amber is legal here because the ground is navy. */
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 2px; }
footer .sig { font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--deep-amber); font-size: 11px; }

header.band h1 { font-weight: 600; letter-spacing: -0.025em;
  font-size: clamp(36px, 6.4vw, 64px); line-height: 1.06; padding-top: 10px; max-width: 18ch;
  /* Short headlines are the ones that strand a word on their own line — "So we made / it."
     Balance splits them evenly instead, and is ignored where unsupported. */
  text-wrap: balance; }
/* The home page's row of every tool, under its headline — apple.com's chapter nav: the icon and the
   short name, nothing else. A hairline ring keeps a navy icon from dissolving into the navy band. */
.chapters { display: flex; flex-wrap: wrap; gap: 24px 40px; margin-top: 44px; }
/* Grouped by door, so a phone visitor sees who each tool is for without opening the menu. */
.chgroup { display: flex; flex-direction: column; gap: 12px; }
.chlabel { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(243,241,238,0.66); }
.chlabel span:lang(zh) { letter-spacing: 0.04em; }
.chrow { display: flex; flex-wrap: wrap; gap: 16px 12px; }
.chapters a { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 92px;
  color: rgba(243,241,238,0.8); text-decoration: none; font-size: 12px; line-height: 1.3; text-align: center;
  transition: color 320ms cubic-bezier(.4,0,.6,1); }
.chapters a:hover { color: var(--on-dark); }
.chapters img { display: block; width: 56px; height: 56px; border-radius: 22.37%;
  box-shadow: 0 0 0 1px rgba(243,241,238,0.14); transition: transform 100ms ease-out; }
.chapters a:active img { transform: scale(0.95); }
@media (max-width: 600px) { .chapters { gap: 20px; flex-direction: column; } .chapters a { width: 80px; } }
.prodhero .icon { box-shadow: 0 0 0 1px rgba(243,241,238,0.14); }
header.band .dek { color: var(--on-dark-2); font-size: 19px; line-height: 1.5; letter-spacing: -0.004em;
  margin-top: 20px; max-width: 34em; }
html[lang="zh"] header.band .dek { line-height: 1.7; letter-spacing: 0; }

/* Download sits in the hero, not below the fold — it is what most visitors came for.
   Amber on navy is the brand's signature pairing and the one place it is legal. */
.hero-cta { padding-top: 26px; }
.cta.amber { background: var(--amber); color: var(--navy); }
.cta.amber:hover { background: #FFC65A; }
.cta.light { background: none; color: var(--on-dark); border-color: rgba(243,241,238,0.42); }
.cta.light:hover { border-color: var(--on-dark); background: rgba(243,241,238,0.08); }
.hero-note { color: var(--on-dark-2); font-size: var(--t-caption); line-height: 1.5; margin: 14px 0 0; }
header.band.slim h1 { font-size: clamp(30px, 4.6vw, 44px); line-height: 1.1; letter-spacing: -0.02em; }
header.band.slim > .wrap { padding-bottom: clamp(40px, 5vw, 56px); }
header.band.slim .bar { margin-bottom: clamp(24px, 4vw, 40px); }
header.band.slim .dek { margin-bottom: 0; }

/* ── content ── */
/* .wrap's side padding used to reset main's vertical padding to zero, so pages began anywhere
   from flush against the band to 40px below it. Every page now starts 48px below; whatever is
   first in main (in either language) gives up its own top margin. */
main.wrap { padding-top: var(--section); padding-bottom: var(--s-7); }
main > :first-child, main > [data-lang]:first-child + [data-lang] { margin-top: 0; }
/* A heading opens a part of the page, so the space above it is the section step and the space below
   it is small: a heading belongs to what follows, and the gap says so. */
h2 { font-size: var(--t-title); line-height: 1.15; letter-spacing: -0.016em; font-weight: 600;
  margin: var(--section) 0 16px; }
/* …except where it opens a box: there the box's own padding is the space above it. A heading that
   opens a wrapper (#specs, #open) keeps the step — the wrapper is the section. */
:is(.card, .tier, .panel, .winnote, .midcta, .latest, .thing-copy, .featurecopy) > h2:first-child,
:is(.card, .tier, .panel, .winnote, .midcta, .latest, .thing-copy, .featurecopy) > h2[data-lang]:first-child + h2[data-lang] {
  margin-top: 0; }
h3 { font-size: var(--t-h3); line-height: 1.4; font-weight: 600; margin: 28px 0 8px; }
p { margin-bottom: 14px; color: var(--ink-2); }
p.lede { font-size: 19px; line-height: 1.5; color: var(--ink); }
html[lang="zh"] p.lede { line-height: 1.7; }
/* Prose keeps to a reading measure inside the full-width page. */
main :is(p, ul, ol, h2, h3, pre, .panel, .latest) { max-width: var(--measure); }
ul { margin: 0 0 16px 20px; color: var(--ink-2); }
li { margin-bottom: 7px; }
a { color: var(--deep-amber); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875em;
  overflow-wrap: anywhere; }  /* a long path in a sentence may break rather than widen a phone page */
.label, .en-tab { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--deep-amber); margin-bottom: 10px; }

.card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 24px; margin-bottom: 16px; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 700px) { .grid { grid-template-columns: 1fr; } }
.grid .card { margin-bottom: 0; }
.card h3 { margin-top: 0; }
.card .en-tab { font-size: 11px; letter-spacing: 0.12em; }
.card li { font-size: var(--t-small); line-height: 1.55; }

.panel { background: var(--paper-warm); border-radius: var(--r); padding: 22px 24px; margin: 22px 0; }
/* .good once drew a 4px green stripe down the panel's edge; the panel's own label says what it is. */
pre { background: var(--navy); color: var(--on-dark); border-radius: 10px; padding: 16px 18px;
  overflow-x: auto; font-size: 13px; line-height: 1.6; margin-bottom: 16px; }
pre .k { color: var(--amber); }

table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
th { text-align: left; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); border-bottom: 2px solid var(--navy); padding-bottom: 8px; }
td { padding: 10px 0; border-bottom: 1px solid var(--rule); font-size: 15px; color: var(--ink-2);
  vertical-align: top; }
td:first-child { font-weight: 600; color: var(--ink); width: 34%; padding-right: 16px; }

/* Actions, in pwestudio.online's three levels: a filled capsule, the same capsule in outline, and a
   text link with a chevron (.more). 44px tall, the touch minimum; no lift, no shadow — hover only
   moves the ground a step. */
.cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  padding: 0 22px; border: 1px solid transparent; border-radius: 980px; background: var(--navy);
  color: var(--on-dark); text-decoration: none; font-size: 17px; font-weight: 500; letter-spacing: -0.01em;
  margin: 4px 8px 4px 0; }
.cta:hover { background: var(--navy-lift); }
.cta.ghost { background: none; color: var(--ink); border-color: rgba(12,10,9,0.32); }
.cta.ghost:hover { border-color: var(--ink); background: rgba(12,10,9,0.04); }
.more { color: var(--deep-amber); text-decoration: none; font-weight: 500; white-space: nowrap; }
.more::after { content: "\00a0\203A"; font-weight: 600; }
.more:hover { text-decoration: underline; text-underline-offset: 4px; }

.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.tier { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); padding: 24px; }
.tier.hero { border: 2px solid rgba(161,98,7,0.55); }
.tier .top { display: flex; justify-content: space-between; align-items: baseline; }
.tier .name { font-size: 18px; font-weight: 600; }
.tier .price { font-size: 26px; font-weight: 600; }
.tier.hero .price { color: var(--deep-amber); }
/* Under the two tiers: what every licence includes, then the one way to buy — on the page's left edge. */
.tiernote { margin-top: 20px; }
.tierbuy { margin: 28px 0 8px; }
.buysteps { margin: 12px 0 8px 20px; max-width: var(--measure); }
.buysteps li { margin-bottom: 10px; }
.tier .who { color: var(--muted); font-size: var(--t-small); margin: 4px 0 12px; }
.tier li { font-size: var(--t-small); line-height: 1.55; }

/* The foot: a warmer ground than the page, one line about whose software this is, a hairline, the
   small print. 13px and grey throughout — the page has finished speaking. */
footer.foot { background: var(--foot); margin-top: var(--section); padding: 32px 0 40px; }
footer.foot p { max-width: none; margin: 0; }
footer, footer a { color: var(--muted); font-size: 12px; line-height: 1.5; }
html[lang="zh"] footer, html[lang="zh"] footer a { font-size: 13px; }
footer a { text-decoration: none; }
footer a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
footer .foot-house { color: var(--ink-2); max-width: var(--measure); }
footer .foot-house .more { color: var(--deep-amber); font-size: inherit; }
footer .foot-btm { display: flex; justify-content: space-between; align-items: center; gap: 8px 24px;
  flex-wrap: wrap; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); }
footer .foot-links, footer .credit { color: var(--muted); }
footer .foot-links a[aria-current="page"] { color: var(--ink); }
footer .credit { display: flex; align-items: center; gap: 8px; letter-spacing: 0.16em; font-size: 11px; }
/* Han has no small caps: the Latin tracking would space 天域出品 into four words. */
footer .credit .han { letter-spacing: 0.06em; }

/* Language switching hides the OTHER language rather than hiding everything and
   reverting the active one. `display: revert` returns the browser default, which loses
   any author display (a flex row silently became a block), and the low specificity of
   `[data-lang]` let any later rule with a display property win — showing both languages
   at once. Hiding the inactive side leaves the active side's own styling untouched. */
html[lang="en"] [data-lang="zh"] { display: none; }
html[lang="zh"] [data-lang="en"] { display: none; }

@media (prefers-color-scheme: dark) {
  :root { --paper: #12161C; --paper-warm: #1A1F27; --ink: #F2F4F6; --ink-2: #C6CCD5; --rule: #2A3240;
          --muted: #97A1B0; --card: #171C24; --deep-amber: #F5B335; --foot: #0E1218; }
  body { background: var(--paper); color: var(--ink); }
  td:first-child { color: var(--ink); }
  /* A navy capsule disappears on a dark ground; in the dark the filled action is the light one, as
     pwestudio.online's is on its night sections. The amber and outline kinds keep their own rules. */
  .cta { background: var(--ink); color: var(--navy); }
  .cta:hover { background: #FFFFFF; }
  .cta.ghost { color: var(--ink); border-color: rgba(242,244,246,0.4); }
  .cta.ghost:hover { border-color: var(--ink); background: rgba(242,244,246,0.06); }
}

/* The footer mark ships as navy artwork; on a dark ground invert it rather than
   shipping a third copy of the same wing. */
footer .credit img { opacity: 0.75; }
@media (prefers-color-scheme: dark) {
  footer .credit img { filter: invert(1); opacity: 0.6; }
}

/* ── feature bullets: the amber tick the printed guides use ── */
.card ul, .tier ul { list-style: none; margin-left: 0; }
.card li, .tier li { padding-left: 20px; position: relative; }
.card li::before, .tier li::before { content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--deep-amber); font-weight: 700; font-size: 13px; }

/* ── the macOS menu bar, drawn ── */
.macbar { background: linear-gradient(180deg, #2B2F36, #1E2228); border-radius: 8px 8px 0 0;
  padding: 8px 16px; display: flex; align-items: center; gap: 16px; justify-content: flex-end; }
.macbar .glyph { color: rgba(255,255,255,0.5); font-size: 13px; }
.macbar .clock { color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 500; }
.macbar .wingslot { display: flex; align-items: center; padding: 4px 8px; border-radius: 5px;
  background: rgba(245,179,53,0.18); outline: 2px solid var(--amber); }
.macbar .wingslot img { height: 15px; width: auto; display: block; }
.macbar-desktop { background: linear-gradient(180deg, #F2EFEA, #E7E2DA); height: 44px;
  border-radius: 0 0 8px 8px; display: flex; align-items: center; justify-content: center;
  font-size: var(--t-caption); color: var(--muted); text-align: center; padding: 0 16px; }
.pointer { color: var(--deep-amber); font-weight: 600; margin-top: 12px; font-size: 15px; }

/* ── the Settings → License panel, drawn ── */
.uipanel { max-width: 340px; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden;
  background: var(--card); box-shadow: 0 4px 18px rgba(14,23,41,0.12); }
.uipanel .tabs { display: flex; background: linear-gradient(135deg, var(--navy-lift), var(--navy));
  border-bottom: 2px solid var(--amber); }
.uipanel .tab { flex: 1; text-align: center; padding: 11px 0 9px; font-size: 12px;
  color: rgba(243,241,238,0.55); }
.uipanel .tab.on { color: var(--amber); font-weight: 600; }
.uipanel .pbody { padding: 14px 16px 16px; background: var(--paper); }
.uipanel .box { border: 1px dashed var(--rule); border-radius: 7px; background: var(--card); padding: 10px;
  font-size: 11px; color: var(--muted); font-family: ui-monospace, monospace; line-height: 1.6;
  min-height: 74px; }
.uipanel .btn { margin-top: 12px; display: inline-block; background: var(--navy); color: var(--on-dark);
  font-size: 13px; font-weight: 600; padding: 8px 22px; border-radius: 6px; }
.figcap { font-size: var(--t-caption); line-height: 1.5; color: var(--muted); text-align: center; margin-top: 10px; }

.twocol { display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 720px) { .twocol { grid-template-columns: 1fr; } }

.steps { counter-reset: step; margin-top: 8px; }
.stepblock { display: grid; grid-template-columns: 34px 1fr; gap: 16px; margin-bottom: 30px; }
.stepblock .n { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 24px;
  color: var(--deep-amber); line-height: 1.1; }
.stepblock h3 { margin: 0 0 8px; }
kbd { font-family: inherit; font-weight: 600; font-size: 13px; border: 1px solid var(--rule);
  border-bottom-width: 2px; border-radius: 4px; padding: 1px 6px; background: var(--card); color: var(--ink);
  white-space: nowrap; }
@media (prefers-color-scheme: dark) { kbd, .uipanel, .uipanel .box { background: var(--card); } }

.winnote { background: linear-gradient(135deg, var(--navy-lift), var(--navy)); color: var(--on-dark);
  border-radius: 12px; padding: 24px 26px; margin: 26px 0; }
.winnote h3 { color: var(--on-dark); margin: 0 0 8px; }
.winnote p { color: var(--on-dark-2); margin-bottom: 12px; }
.winnote a.cta { margin: 0; }
.winnote .winrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.winnote .winmeta { font-size: 13px; color: var(--on-dark-2); margin: 14px 0 0; line-height: 1.6; }
.winnote .winmeta b { color: var(--on-dark); font-weight: 600; }
.winnote .winmeta i { font-style: normal; color: var(--on-dark); }

/* ── hero: copy left, the exported card right ── */
.hero-split { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .hero-split { grid-template-columns: 1fr; }
  .hero-split .shot { display: none; } }
.shot .cap { text-align: center; font-size: 13px; color: var(--on-dark-2); margin-top: 12px; }
/* The recorded loop. It carries its own navy ground, so it gets the same corner and shadow as the
   drawn card it replaced and reads as one object on the page. It sits in the body of the page, on
   paper in the light scheme and on navy in the dark one, so its caption and its button use the one
   grey that is legible on both; .shot .cap above is the hero's and assumes a dark ground. */
.loopshot video.loop { display: block; width: 100%; height: auto; border-radius: 10px; cursor: pointer;
  background: #0E1729; box-shadow: 0 10px 40px rgba(0,0,0,0.35); }
.loopshot .cap { color: var(--muted); }
.loopshot .looptoggle { display: block; margin: 12px auto 0; padding: 4px 14px; border-radius: 999px;
  border: 1px solid rgba(107,114,128,0.45); background: transparent; color: var(--muted);
  font: inherit; font-size: 12px; cursor: pointer; }
.loopshot .looptoggle:hover, .loopshot .looptoggle:focus-visible { border-color: rgba(107,114,128,0.9); }
.loopshot .looptoggle[hidden] { display: none; }
.loopshot { margin-left: auto; margin-right: auto; }
/* The language switch has to win over the display rule above, which is as specific and comes later. */
html[lang="en"] .loopshot video.loop[data-lang="zh"], html[lang="zh"] .loopshot video.loop[data-lang="en"] { display: none; }
/* A block may carry the still picture the recording replaced. It is what anyone who asked for less
   motion sees, in place of the recording and its button. */
.loopshot .still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .loopshot .still { display: block; }
  .loopshot .still ~ .looptoggle, .loopshot:has(.still) video.loop { display: none; }
}

/* ── press feedback ──────────────────────────────────────────────────────────
   On pointer-down, at once: a control that waits for the release feels dead. 100ms out, no
   bounce — a press is not a throw. With reduced motion the press darkens instead of shrinking. */
.cta, .looptoggle, .card.jump, .langs button { transition: transform 100ms ease-out, filter 100ms ease-out,
  background-color 100ms ease-out, border-color 100ms ease-out; }
.cta:active, .looptoggle:active { transform: scale(0.97); }
.card.jump:active { transform: scale(0.99); }
.langs button:active { filter: brightness(0.88); }
nav a:active, footer a:active { opacity: 0.7; }
@media (prefers-reduced-motion: reduce) {
  .cta:active, .looptoggle:active, .card.jump:active { transform: none; filter: brightness(0.9); }
}

/* ── keyboard focus ──────────────────────────────────────────────────────────
   There was no focus style at all: a keyboard user could tab the whole page and
   never see where they were. :focus-visible rather than :focus, so a mouse click
   does not leave a ring behind — the reason the default was removed everywhere in
   the first place. Amber on navy, deep amber on paper: the same rule as the type. */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--deep-amber);
  outline-offset: 3px;
  border-radius: 4px;
}
header.band :where(a, button):focus-visible,
.winnote :where(a, button):focus-visible {
  outline-color: var(--amber);
}
@media (prefers-color-scheme: dark) {
  :where(a, button, [tabindex]):focus-visible { outline-color: var(--amber); }
}

/* Skip link — the header carries a lockup, six nav links and a language toggle
   before the first word of the page. */
.skip {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--amber); color: var(--navy);
  font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: 6px;
  text-decoration: none; transition: top 120ms ease;
}
.skip:focus { top: 8px; }

/* ── reduced motion ──────────────────────────────────────────────────────────
   html { scroll-behavior: smooth } is a motion effect, and an in-page anchor that
   glides is exactly what this setting exists to stop. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── product shots ───────────────────────────────────────────────────────────
   Rendered from the app itself by `PWE Loan Bar --shots` (see MarketingShots.swift),
   at the window's own 470x700, so the page cannot advertise an interface that has
   moved on. width/height are declared on every <img> to reserve the box before the
   file arrives — otherwise each one shoves the section below it down on load. */
.appshot { margin: 0; }
.appshot img {
  display: block; width: 100%; height: auto;
  border-radius: 12px; background: var(--navy);
  box-shadow: 0 12px 40px rgba(14, 23, 41, 0.30);
}
.appshot figcaption { font-size: var(--t-caption); line-height: 1.5; color: var(--muted); margin-top: 10px; }
.featurerow { display: grid; grid-template-columns: 1fr 0.72fr; gap: 34px; align-items: center;
  margin: 34px 0; }
.featurerow.flip { grid-template-columns: 0.72fr 1fr; }
.featurerow.flip .featurecopy { order: 2; }
@media (max-width: 760px) {
  .featurerow, .featurerow.flip { grid-template-columns: 1fr; gap: 21px; }
  .featurerow.flip .featurecopy { order: 0; }
}

/* A conversion path in the middle of the page. The hero and the pricing block were
   160 lines apart with nothing between them. */
.midcta { border: 1px solid var(--rule); border-radius: 12px; padding: 26px 28px;
  margin: 34px 0; display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between; background: var(--paper-warm); }
.midcta p { margin: 0; max-width: 46ch; }
.midcta .cta { margin: 0; }
@media (prefers-color-scheme: dark) { .midcta { background: var(--card); } }

/* ── the app, drawn ──────────────────────────────────────────────────────────
   A vector replica of the window rather than a screen capture: it stays sharp at
   any size, follows the page into dark mode, carries its labels in both languages
   and weighs nothing. It is a replica, so it can drift — when a tab changes shape,
   this changes with it. Scale is set by --u so the whole window can be resized from
   one number; everything inside is expressed in it. */
.appwin {
  --u: 1px;
  width: 100%; max-width: calc(470 * var(--u));
  background: #101B31; border-radius: calc(11 * var(--u));
  box-shadow: 0 calc(18 * var(--u)) calc(52 * var(--u)) rgba(0,0,0,.42);
  overflow: hidden; font-size: calc(11 * var(--u)); line-height: 1.35;
  color: var(--on-dark); border: 1px solid rgba(255,255,255,.07);
}
.appwin * { box-sizing: border-box; }
.appwin .tbar { display: flex; gap: calc(6 * var(--u)); padding: calc(11 * var(--u)) calc(13 * var(--u)); }
.appwin .tbar i { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%;
  background: rgba(255,255,255,.16); display: block; }
.appwin .head { padding: 0 calc(16 * var(--u)) calc(11 * var(--u)); }
.appwin .idrow { display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u));
  position: relative; }
.appwin .idrow img { height: calc(13 * var(--u)); width: auto; }
/* The app draws its wordmark in Playfair; the outlined one keeps that without a web font. */
.appwin .idrow img.wordmark { height: calc(19 * var(--u)); width: auto; }
.appwin .au { border: 1px solid rgba(245,179,53,.5); color: var(--amber); border-radius: 999px;
  font-size: calc(7.5 * var(--u)); font-weight: 600; padding: calc(1.5 * var(--u)) calc(6 * var(--u)); }
.appwin .tools { position: absolute; right: 0; display: flex; gap: calc(9 * var(--u));
  color: rgba(243,241,238,.45); font-size: calc(10 * var(--u)); }
.appwin .tools svg { width: calc(11 * var(--u)); height: calc(11 * var(--u)); display: block;
  fill: none; stroke: currentColor; stroke-width: .9; stroke-linejoin: round; }
.appwin .tools .on { color: var(--amber); }
/* Frequency carries three words; Extra /mth carries a number. Splitting them evenly
   ran the segmented control's labels together. */
.appwin .freqrow { display: grid; grid-template-columns: 1.75fr 1fr; gap: calc(8 * var(--u)); }
.appwin .freqrow .seg span { font-size: calc(8.5 * var(--u)); padding: calc(6.5 * var(--u)) calc(2 * var(--u)); }
.appwin .tabs { display: flex; margin: calc(10 * var(--u)) 0 0;
  border: 1px solid rgba(255,255,255,.08); border-radius: calc(8 * var(--u)); overflow: hidden; }
.appwin .tabs span { flex: 1; text-align: center; padding: calc(7 * var(--u)) 0;
  font-size: calc(9.5 * var(--u)); color: rgba(243,241,238,.5); }
.appwin .tabs span.on { color: var(--on-dark); font-weight: 600; background: rgba(255,255,255,.05); }
.appwin .rule { height: calc(2 * var(--u)); background: var(--amber); }
.appwin .body { padding: calc(13 * var(--u)); display: grid; gap: calc(10 * var(--u)); }
.appwin .panel { background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06);
  border-radius: calc(9 * var(--u)); padding: calc(12 * var(--u)); }
.appwin .plabel { font-size: calc(7.5 * var(--u)); font-weight: 600; letter-spacing: .17em;
  color: var(--amber); }
.appwin .plabel.dim { color: rgba(243,241,238,.45); }
.appwin .big { font-weight: 600; font-variant-numeric: tabular-nums; font-size: calc(30 * var(--u));
  letter-spacing: -.015em; margin: calc(3 * var(--u)) 0 calc(9 * var(--u)); }
.appwin .big u { text-decoration: none; font-size: calc(11 * var(--u)); font-weight: 500;
  color: rgba(243,241,238,.55); }
.appwin .split2 { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--u)); }
.appwin .chip { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07);
  border-radius: calc(6 * var(--u)); padding: calc(7 * var(--u)) calc(9 * var(--u)); }
.appwin .chip small { display: block; font-size: calc(8 * var(--u)); color: rgba(243,241,238,.5); }
.appwin .chip b { font-size: calc(11.5 * var(--u)); font-weight: 600; }
.appwin .field small { display: block; font-size: calc(8.5 * var(--u)); color: rgba(243,241,238,.5);
  margin-bottom: calc(3 * var(--u)); }
.appwin .field div { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  border-radius: calc(6 * var(--u)); padding: calc(7 * var(--u)) calc(9 * var(--u));
  font-size: calc(11 * var(--u)); font-weight: 500; display: flex; justify-content: space-between; }
.appwin .field div em { font-style: normal; color: rgba(243,241,238,.4); }
.appwin .seg { display: flex; border: 1px solid rgba(255,255,255,.09); border-radius: calc(6 * var(--u));
  overflow: hidden; font-size: calc(9.5 * var(--u)); }
.appwin .seg span { flex: 1; text-align: center; padding: calc(6 * var(--u)) 0;
  color: rgba(243,241,238,.5); }
.appwin .seg span.on { background: rgba(255,255,255,.09); color: var(--on-dark); font-weight: 600; }
.appwin .toggle { width: calc(26 * var(--u)); height: calc(15 * var(--u)); border-radius: 999px;
  background: rgba(255,255,255,.14); position: relative; }
.appwin .toggle::after { content: ""; position: absolute; top: calc(2 * var(--u)); left: calc(2 * var(--u));
  width: calc(11 * var(--u)); height: calc(11 * var(--u)); border-radius: 50%; background: #fff; }
.appwin .row { display: flex; align-items: center; justify-content: space-between; }
.appwin .sum { display: flex; align-items: center; gap: calc(14 * var(--u)); margin-top: calc(9 * var(--u)); }
.appwin .donut { width: calc(62 * var(--u)); height: calc(62 * var(--u)); border-radius: 50%; flex: none;
  background: conic-gradient(var(--amber) 0 53%, #8FA6C9 53% 100%);
  display: grid; place-items: center; }
.appwin .donut::after { content: ""; width: calc(42 * var(--u)); height: calc(42 * var(--u));
  border-radius: 50%; background: #101B31; grid-area: 1/1; }
.appwin .donut b { grid-area: 1/1; z-index: 1; font-size: calc(13 * var(--u)); font-weight: 600; }
.appwin .sumrows { flex: 1; display: grid; gap: calc(5 * var(--u)); font-size: calc(10 * var(--u)); }
.appwin .sumrows div { display: flex; justify-content: space-between; align-items: center; }
.appwin .sumrows i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%;
  display: inline-block; margin-right: calc(6 * var(--u)); }
.appwin .sumrows span { color: rgba(243,241,238,.62); }
.appwin .sumrows b { font-weight: 600; }

/* ── readout fragments ───────────────────────────────────────────────────────
   A whole window beside every feature would be four near-identical pictures. Each
   section gets the part of the app that section is about instead — the number that
   tab exists to produce, and the two or three lines under it that explain the number. */
.frag { --u: 1px; background: #101B31; border: 1px solid rgba(255,255,255,.07);
  border-radius: calc(10 * var(--u)); padding: calc(15 * var(--u)) calc(16 * var(--u));
  color: var(--on-dark); font-size: calc(11 * var(--u)); }
.frag .plabel { font-size: calc(7.5 * var(--u)); font-weight: 600; letter-spacing: .17em;
  color: var(--amber); }
.frag .big { font-weight: 600; font-size: calc(27 * var(--u)); letter-spacing: -.015em;
  margin: calc(4 * var(--u)) 0 calc(10 * var(--u)); }
.frag .big u { text-decoration: none; font-size: calc(11 * var(--u)); font-weight: 500;
  color: rgba(243,241,238,.55); }
.frag dl { display: grid; grid-template-columns: 1fr auto; gap: calc(6 * var(--u)) calc(12 * var(--u));
  margin: 0; font-size: calc(10.5 * var(--u)); }
.frag dt { color: rgba(243,241,238,.58); }
.frag dd { margin: 0; font-weight: 600; text-align: right; }
.frag dd.amber { color: var(--amber); }
.frag hr { border: 0; border-top: 1px solid rgba(255,255,255,.09); margin: calc(10 * var(--u)) 0; }
.frag .bar { height: calc(6 * var(--u)); border-radius: 999px; background: rgba(255,255,255,.10);
  overflow: hidden; margin: calc(9 * var(--u)) 0 calc(6 * var(--u)); }
.frag .bar i { display: block; height: 100%; background: var(--amber); border-radius: 999px; }
.frag .note { font-size: calc(9.5 * var(--u)); color: rgba(243,241,238,.5); margin: 0; }
.frag .cmp { display: grid; grid-template-columns: 1fr 1fr; gap: calc(9 * var(--u));
  margin-top: calc(4 * var(--u)); }
.frag .cmp div { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07);
  border-radius: calc(6 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)); }
.frag .cmp small { display: block; font-size: calc(8.5 * var(--u)); color: rgba(243,241,238,.5); }
.frag .cmp b { font-size: calc(14 * var(--u)); font-weight: 600; }
.frag .cmp .win b { color: var(--amber); }

/* The tab's English name now sits above the heading. In a card it was a sub-label; in a
   feature row it was a second title in caps, competing with the real one. */
.featurecopy .en-tab { margin-bottom: calc(2px); }
.featurecopy h3 { margin-top: 4px; }

/* ── guide figures ───────────────────────────────────────────────────────────
   Drawn, like the window on /app, for the same reasons: sharp at any size, follows
   the theme, and no screenshot to go stale. */

/* The disk image, as it opens. */
.dmg { --u: 1px; max-width: calc(300 * var(--u)); background: var(--paper-warm);
  border: 1px solid var(--rule); border-radius: calc(9 * var(--u)); overflow: hidden;
  box-shadow: 0 calc(8 * var(--u)) calc(26 * var(--u)) rgba(14,23,41,.16); }
.dmg .bar { display: flex; gap: calc(5 * var(--u)); padding: calc(9 * var(--u)) calc(11 * var(--u));
  background: linear-gradient(180deg, #FBFAF8, #EFEAE2); border-bottom: 1px solid var(--rule); }
.dmg .bar i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%;
  background: rgba(14,23,41,.16); }
.dmg .floor { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: calc(6 * var(--u)); padding: calc(22 * var(--u)) calc(16 * var(--u)) calc(18 * var(--u)); }
.dmg .icon { text-align: center; font-size: calc(10 * var(--u)); color: var(--ink); }
.dmg .icon .tile { width: calc(52 * var(--u)); height: calc(52 * var(--u)); margin: 0 auto calc(7 * var(--u));
  border-radius: calc(12 * var(--u)); display: grid; place-items: center;
  background: linear-gradient(150deg, #22355A, #0E1729); box-shadow: 0 calc(3 * var(--u)) calc(9 * var(--u)) rgba(14,23,41,.28); }
.dmg .icon .tile img { width: calc(30 * var(--u)); height: auto; }
.dmg .icon .tile.folder { background: linear-gradient(150deg, #9DB4D8, #6E88B4); }
.dmg .icon .tile.folder svg { width: calc(28 * var(--u)); height: auto; fill: rgba(255,255,255,.92); }
.dmg .arrow { color: var(--deep-amber); font-size: calc(20 * var(--u)); line-height: 1; }
@media (prefers-color-scheme: dark) {
  .dmg { background: #1A2233; border-color: rgba(255,255,255,.09); }
  .dmg .bar { background: linear-gradient(180deg, #222C40, #1A2233); border-bottom-color: rgba(255,255,255,.07); }
  .dmg .icon { color: var(--on-dark); }
}

/* Settings, with the fields that end up on an exported card. */
.uipanel .frow { display: grid; grid-template-columns: 84px 1fr; gap: 8px 10px;
  align-items: center; font-size: 11.5px; }
.uipanel .frow span { color: var(--muted); }
.uipanel .frow b { font-weight: 500; background: var(--card); border: 1px solid var(--rule);
  border-radius: 5px; padding: 5px 8px; color: var(--ink); }
.uipanel .frow b.ghost { color: var(--muted); font-weight: 400; }
@media (prefers-color-scheme: dark) { .uipanel .frow b { background: #101722; border-color: rgba(255,255,255,.1); } }

/* A callout number that ties a picture to a row in the table beside it. */
.callout { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  background: var(--deep-amber); color: #fff; font-size: 10.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; flex: none; }
@media (prefers-color-scheme: dark) { .callout { background: var(--amber); color: var(--navy); } }
/* Inline, in front of the label it numbers — an absolutely positioned variant was
   written first and put every number on top of the word beside it. */
.frag dt .callout, .frag .note .callout { margin-right: 7px; vertical-align: -3px; }
.frag .plabel .callout { margin-right: 7px; vertical-align: -4px; }
.labeltable td:first-child { white-space: nowrap; }
@media (max-width: 480px) { .labeltable td:first-child { white-space: normal; } }   /* three columns in 327px */
.labeltable .callout { margin-right: 7px; vertical-align: middle; }

/* /support. The help note answers the visitor who came for help, not to give it. Tool cards carry a
   platform line, what to attach to a report, and two links. The command block is the site's usual
   navy one, made to wrap rather than scroll sideways on a phone. */
.helpnote p { margin-bottom: 0; }
.tools .card h3 a { color: inherit; text-decoration: none; }
.tools .card h3 a:hover { color: var(--deep-amber); }
.tools .meta { color: var(--muted); font-size: var(--t-small); margin: -4px 0 12px; }
/* A file shown as it is (Receipts' CSV): one line per row, scrolled sideways rather than wrapped. */
pre.csv { max-width: none; font-size: 12px; line-height: 1.6; white-space: pre; }
.tools pre { padding: 12px 14px; margin: 0 0 14px; white-space: pre-wrap; overflow-wrap: break-word; }
.tools pre code { font-size: 12px; line-height: 1.55; }
.tools .links { margin: 0; font-size: var(--t-small); }
.after-grid { margin-top: 24px; }

/* A whole card as one link (the 404 page). */
.card.jump { display: block; text-decoration: none; color: inherit; }
.card.jump:hover { border-color: var(--deep-amber); }
.card.jump p { margin-bottom: 0; color: var(--muted); font-size: var(--t-small); }

/* A tall app panel in a hero band, capped and faded into the band (/macmonitor, /aibar). */
.heroshot { position: relative; margin: 0; max-height: 430px; overflow: hidden; border-radius: 12px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.42); }
.heroshot img { display: block; width: 100%; height: auto; }
.heroshot::after { content: ""; position: absolute; inset: auto 0 0 0; height: 110px;
  background: linear-gradient(180deg, rgba(14,23,41,0), rgba(14,23,41,0.92)); pointer-events: none; }
/* Pictures of a dark interface on a navy ground, with their caption and the loop's button. */
.navystrip { background: var(--navy); border-radius: 12px; padding: 20px 22px; margin: 22px 0; }
.navystrip img { display: block; width: 100%; height: auto; border-radius: 8px; }
.navystrip .figcap, .navystrip .cap { color: var(--on-dark-2); margin-top: 14px; }
.navystrip .looptoggle { color: var(--on-dark-2); border-color: rgba(243,241,238,0.35); }

/* Small helpers for what used to be inline styles. */
.flush { margin: 0; }
.flush-b { margin-bottom: 0; }
.muted { color: var(--muted); }
.accent { color: var(--deep-amber); }
.center { text-align: center; }
.small { font-size: var(--t-small); line-height: 1.55; }
.caption { font-size: var(--t-caption); line-height: 1.5; }

/* ── a product page (doc 35 §3.4): first screen, then three things, data, specs, help ── */
.prodhero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.prodhero .icon { width: 96px; height: 96px; border-radius: 22.37%; display: block; margin: 0 0 20px; }
/* The product's name is the page's h1, set small; its promise is the headline (apple.com's order:
   name, then the line, then what to do). */
header.band .prodhero h1 { font-size: clamp(21px, 2.6vw, 28px); line-height: 1.15; letter-spacing: 0.004em;
  padding-top: 2px; max-width: none; }
.prodhero .line { color: var(--on-dark); font-size: clamp(32px, 3.9vw, 46px); line-height: 1.08; letter-spacing: -0.018em;
  font-weight: 600; margin-top: 8px; max-width: 13em; text-wrap: balance; }
html[lang="zh"] .prodhero .line { line-height: 1.22; letter-spacing: 0; }
/* Chinese headlines break at their punctuation, not inside a word: 五个计算器。/ 数据不离开手机。
   rather than 五个计算器。数 / 据不离开手机。 A run too long for the line may still break anywhere. */
html[lang="zh"] :is(h1, h2, .prodhero .line) { word-break: keep-all; overflow-wrap: anywhere; }
.prodhero .dek { font-size: 17px; }
.prodhero .specline { color: var(--on-dark-2); font-size: var(--t-caption); margin-top: 18px; }
.prodhero .actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 4px 24px; align-items: center; }
.prodhero .actions .cta { margin: 0; }
/* The second action in a hero is a text link, as on pwestudio.online and apple.com: one capsule, then
   "Read this first ›" beside it — two capsules side by side ask the eye to choose. */
.actions .more { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; }
header.band .more { color: var(--amber); }
.winnote .more { color: var(--amber); margin-left: 8px; }

/* ── the tour: a film over the page (ui.js) ─────────────────────────────────────────────────────
   Night at 97% behind it — a modal task, so the page is dimmed, not blurred. The film is 16:9 at up to
   1100px, its own corners at 13. Close is a 44px circle in the corner, always on top. It appears in
   200ms and leaves at once; with reduced motion it simply appears. */
dialog.tour { width: min(1100px, calc(100vw - 48px)); max-width: none; max-height: none; padding: 0; border: 0;
  background: transparent; overflow: visible; margin: auto; }
dialog.tour::backdrop { background: rgba(14,23,41,0.97); }
dialog.tour[open] { animation: tour-in 200ms ease-out; }
@keyframes tour-in { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }
dialog.tour video { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - 120px);
  border-radius: var(--r); background: #000; }
.tour-close { position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 0;
  display: grid; place-items: center; background: rgba(243,241,238,0.14); color: var(--on-dark); cursor: pointer;
  transition: background-color 100ms ease-out; }
.tour-close:hover { background: rgba(243,241,238,0.24); }
.tour-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tour-close:focus-visible { outline-color: var(--amber); }
.tour-alt { margin: 16px 0 0; text-align: center; max-width: none; }
.tour-alt .more { color: var(--amber); font-size: 15px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* "Coming late October" is a status, not a control: no border, no button shape. */
.prodhero .soon { display: inline-flex; align-items: center; gap: 10px; color: var(--amber); font-weight: 600; }
.prodhero .soon::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
/* The drawn app window is a picture of the app; the page's .panel spacing must not leak into it. */
.appwin .panel { margin: 0; }
/* On a phone the first screen keeps its words and its one action; the big picture follows in the page. */
@media (max-width: 860px) { .prodhero .shot { display: none; } }
.prodhero figure { margin: 0; justify-self: center; width: 100%; max-width: 380px; }
.prodhero figure img { display: block; width: 100%; height: auto; }
@media (max-width: 860px) { .prodhero { grid-template-columns: 1fr; gap: 28px; } }

/* A section of the page is one of the product's three things. */
.thing { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; margin: var(--section) 0; }
.thing.flip .thing-copy { order: 2; }
.thing h2 { margin-top: 0; }
@media (max-width: 760px) { .thing, .thing.flip { grid-template-columns: 1fr; gap: 20px; }
  .thing.flip .thing-copy { order: 0; } }

/* Specs: one table, the same rows on every product page. */
/* Specs: one table, the same rows on every product page. Label left at a quarter of the width, the
   answer beside it at reading size; a hairline above every row, none below the last. */
.specs { width: 100%; border-collapse: collapse; margin: 8px 0 32px; }
.specs th { width: 25%; text-align: left; font-size: var(--t-small); font-weight: 600; color: var(--ink);
  letter-spacing: 0; text-transform: none; border-top: 1px solid var(--rule); border-bottom: 0;
  padding: 16px 24px 16px 0; vertical-align: top; }
.specs td { border-top: 1px solid var(--rule); border-bottom: 0; padding: 16px 0; font-size: 17px; line-height: 1.47; }
.specs th { font-size: 17px; line-height: 1.47; }
.specs td:first-child { width: auto; font-weight: 400; color: var(--ink-2); }
/* A table with a header row (Screen Encore's iMacs by year): the header reads as labels, not data. */
.specs thead th, .specs thead td { font-size: 13px; font-weight: 600; color: var(--muted); border-top: 0; padding-bottom: 8px; }
.se-years th { width: 18%; }

/* Latest: what the app itself says when it updates (chrome.py, from functions/_release.js). */
.latest { background: var(--paper-warm); border-radius: var(--r); padding: 22px 24px; margin: 8px 0 24px; }
.latest h3 { margin: 0 0 4px; }
.latest .latest-ver { color: var(--muted); font-size: var(--t-caption); margin-bottom: 6px; }
.latest p:last-child { margin-bottom: 0; }

/* Help, at the foot of a product page: where to read, where to report, who to write to. */
.helprow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 8px 0 24px; }
.helprow a { display: block; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 20px 22px; text-decoration: none; color: var(--ink); font-weight: 600;
  transition: border-color 100ms ease-out, transform 100ms ease-out; }
.helprow a:active { transform: scale(0.99); }
.helprow a span { display: block; font-weight: 400; color: var(--muted); font-size: var(--t-small); margin-top: 2px; }
.helprow a:hover { border-color: var(--deep-amber); }
@media (max-width: 700px) { .helprow { grid-template-columns: 1fr; } }

/* The note a download button leaves behind: the file is coming, and what to do with it. */
.dlnote { margin: 10px 0 0; font-size: var(--t-small); line-height: 1.45; color: var(--ink-2);
  animation: dlnote-in 150ms ease-out; }
header.band .dlnote { color: var(--on-dark); }
.dlnote:empty { display: none; }
.subnav .dlnote { position: absolute; right: max(24px, calc((100% - 980px) / 2 + 24px)); top: 58px; max-width: 340px;
  margin: 0; padding: 10px 14px; background: var(--card); border: 1px solid var(--rule); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(12,10,9,0.14); }
@keyframes dlnote-in { from { opacity: 0; } to { opacity: 1; } }
.helprow a .h { display: block; color: var(--ink); font-weight: 600; margin-top: 0; font-size: var(--t-body); }
/* .h's display would beat the language switch's [data-lang] rule; restate it at the same weight. */
html[lang="en"] .helprow [data-lang="zh"], html[lang="zh"] .helprow [data-lang="en"] { display: none; }