style.css

/* connect.openab.dev — light theme derived from the shipping icon:
   deep navy fabric (#182838) and warm peach jellyfish (#F8C090). */
:root {
  --accent: #F0A06E;
  --accent-deep: #884521;
  --accent-tint: #FCE7D6;
  --brush: rgba(248, 192, 144, 0.72);
  --blue: #6B86A0;
  --pink: #E17A55;
  --ink: #17283A;
  --muted: #617185;
  --bg: #FFF8F1;
  --card: #FFF0E3;
  --border: rgba(24, 40, 56, 0.16);
  --shadow: 0 24px 80px rgba(24, 40, 56, 0.16);
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #F8C090;
    --accent-deep: #FFD8B5;
    --accent-tint: #2B211C;
    --brush: rgba(248, 192, 144, 0.42);
    --ink: #FFF5E9;
    --muted: #B9AA9C;
    --bg: #0E1824;
    --card: #172637;
    --border: rgba(248, 192, 144, 0.22);
    --shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-deep); }

/* CJK typography, per language rather than one stack for all three.
   Two things differ from Latin and both need saying:
   - A Han glyph fills its em box, so at the same pixel size it reads smaller and
     denser than Latin. The headings are therefore larger, not merely translated.
   - The Latin heading uses negative tracking, which closes up Han strokes and
     makes them muddy. CJK gets tracking back to zero or slightly positive. */
html[data-lang="zh"] body {
  font-family: "PingFang TC", "Heiti TC", "Noto Sans TC", -apple-system,
               BlinkMacSystemFont, system-ui, sans-serif;
}
html[data-lang="ja"] body {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP",
               -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
html[data-lang="ko"] body {
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", -apple-system,
               BlinkMacSystemFont, system-ui, sans-serif;
}

nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  max-width: 940px; margin: 0 auto; padding: 20px 24px;
}
nav .brand {
  display: flex; align-items: center; gap: 6px;
  font-weight: 700; text-decoration: none; color: var(--ink); font-size: 1rem;
  letter-spacing: -0.015em;
  /* Pinned, and not inherited. The per-language stacks are set on body, and
     "OpenAB Connect" is Latin — so the wordmark was being drawn with whichever CJK
     face the page happened to use for its Latin glyphs, and visibly changed shape on
     every language switch. A wordmark has to be one shape. Apple SD Gothic Neo is
     first because that is the rendering picked as the reference, on the Korean page. */
  font-family: "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont, "Segoe UI",
               system-ui, sans-serif;
}
/* The mark is set smaller than its intrinsic 28px box and given a slight negative
   offset so it optically aligns with the cap height of the wordmark rather than
   its line box, which is what made the pair look loose. */
nav .brand img { width: 24px; height: 24px; margin-top: -1px; }
nav .links { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; font-size: 0.95rem; }
nav .links a { text-decoration: none; color: var(--muted); }
nav .links a:hover { color: var(--ink); }
nav .lang { margin-left: 0.6rem; font-size: 0.9rem; color: var(--muted); }
nav .lang a { margin: 0 0.15rem; text-decoration: none; color: var(--muted); }
nav .lang a.active { color: var(--ink); font-weight: 700; }
@media (max-width: 620px) { nav .lang { margin-left: 0; } }

.wrap { max-width: 780px; margin: 0 auto; padding: 0 24px 72px; }
/* Every top-level section carries its own width now that .wrap is no longer in
   these pages. text-align alone centred the text but left the measure to the
   viewport, so a wide monitor stretched the headline and a phone let it touch
   the edges. */
header { max-width: 1040px; margin: 0 auto; padding: 48px 24px 8px; text-align: center; }
header img.appicon { width: 104px; height: 104px; }
/* clamp rather than a fixed size plus a breakpoint: the hero is two lines fixed by a
   <br>, so its width is driven entirely by font-size, and a single desktop value is
   either timid on a large display or overflowing on a small one. */
h1 {
  font-size: clamp(1.2rem, 5.4vw, 3.4rem); font-weight: 800;
  margin: 22px 0 10px; letter-spacing: -0.022em; line-height: 1.2;
}
.tag { color: var(--muted); font-size: 1.16rem; margin: 0 auto; max-width: 34em; }

/* The explicit <br> in each hero fixes the break at a clause boundary, but a narrow
   viewport wraps again below it, and CJK breaks between any two characters — which
   is how 「它們繼續跑。」 ended up with 「跑。」 alone on a line. balance evens the
   line lengths instead of filling greedily, so the last line is never one glyph. */
h1, .tag { text-wrap: balance; }
/* Keep the second half whole rather than letting it split mid-clause. inline-block
   moves the whole run down instead of breaking inside it; it can still wrap
   internally if the viewport is genuinely narrower than the run, so nothing
   overflows. */
.tag strong { display: inline-block; }

/* The CJK hero is deliberately bigger and heavier than the Latin one. Han glyphs
   carry more ink per character, so a headline that is merely translated ends up
   looking timid beside the English. Weight 800 lands on PingFang TC Semibold and
   Hiragino Sans W6, which are the heaviest faces reliably present on macOS —
   synthetic bold on Han strokes smears them, so this asks for a real weight. */
html[data-lang="zh"] h1,
html[data-lang="ja"] h1,
html[data-lang="ko"] h1 {
  /* 6.2vw is derived, not picked: the longest authored line is 14 units wide, and a
     390px viewport leaves about 342px of measure, so 342/14 gives the largest size at
     which the line the author wrote is still the line the reader sees. The floor holds
     the authored breaks down to 360px; below that it wraps on purpose, because the size
     needed to avoid wrapping at 320px is body-text size and a wrapped headline is the
     better trade. text-wrap: balance keeps that wrap from leaving an orphan. */
  font-size: clamp(1.4rem, 6.2vw, 3rem);
  letter-spacing: 0.01em;
  line-height: 1.28;
}
html[data-lang="zh"] .tag,
html[data-lang="ja"] .tag,
html[data-lang="ko"] .tag {
  font-size: 1.2rem;
  line-height: 1.75;
  max-width: 26em;
}
html[data-lang="zh"] h2,
html[data-lang="ja"] h2,
html[data-lang="ko"] h2 { font-size: 1.35rem; font-weight: 700; }

h2 { font-size: 1.15rem; margin: 40px 0 12px; }
h3 { font-size: 1rem; margin: 22px 0 6px; }
.grad {
  background: linear-gradient(90deg, var(--accent), var(--blue), var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.panel {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px 22px; margin: 20px 0;
}
.note { border-left: 3px solid var(--accent); padding-left: 14px; color: var(--muted); }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }
pre {
  background: var(--accent-tint); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px; overflow-x: auto; color: var(--accent-deep);
}
ul { padding-left: 1.2em; } li { margin: 7px 0; }
.dim { color: var(--muted); }
figure { margin: 30px 0 8px; }
/* The window in the capture has its own light chrome — a white title bar and an
   #F3F3F3 sidebar — so setting it directly on the warm page put two unrelated light
   tones against each other, with a dark 1px border drawn between them for good
   measure. Instead the figure is a white card and the image is inset in it: the card's
   gutter meets the window's own chrome, so that boundary disappears, and the card
   against the warm page is a deliberate edge rather than a near-miss.
   The card stays light under prefers-color-scheme: dark, because the screenshot itself
   is light and a dark card would reintroduce the mismatch it exists to remove. */
/* No radius here. The capture is masked to the window's own 71px corner with the card
   colour outside it, so the curve is already in the pixels; a CSS radius on top would
   clip that curve a second time at a different value. */
figure img { width: 100%; height: auto; display: block; }
.shotwrap figure {
  margin: 0; background: #FFFFFF;
  padding: 10px; border-radius: 16px;
  box-shadow: 0 18px 60px rgba(24, 40, 56, 0.16), 0 1px 0 rgba(24, 40, 56, 0.07);
}
figcaption { color: var(--muted); font-size: 0.9rem; margin-top: 12px; }
footer {
  max-width: 1080px; margin: 56px auto 0; padding: 26px 24px 48px;
  border-top: 1px solid var(--border);
  color: var(--muted); font-size: 0.9rem;
  display: flex; gap: 20px; flex-wrap: wrap;
  justify-content: center; align-items: center;
}
.date { color: var(--muted); margin: 0 0 30px; }

/* Brush highlight on the phrase the headline turns on. The band stops at 94% so it
   reads as a marker stroke rather than a filled background, and starts at 58% so
   it clears the x-height of Latin and the body of Han glyphs alike. */
.mark {
  background: linear-gradient(transparent 58%, var(--brush) 58%,
                              var(--brush) 94%, transparent 94%);
  padding: 0 0.08em;
}

/* Critics' strip under the hero. Poster grammar: an oversized opening quote, one line
   of praise set large, attribution in spaced caps. All quotes are in the markup; the
   script stacks them in one grid cell and fades between them, so the block's height is
   the tallest quote and the screenshot below never jumps. With JS off the grid is not
   stacked and the three stand side by side. */
section.acclaim { max-width: 900px; margin: 0 auto; padding: 2.4rem 24px 0; text-align: center; }
.acclaim-kicker {
  margin: 0 0 0.6rem; color: var(--accent-deep);
  font-size: 0.76rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}
.acclaim-stage {
  position: relative; display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.acclaim-quote { margin: 0; padding: 0.4rem 0.6rem 0; }
.acclaim-quote blockquote {
  margin: 0 auto; max-width: 30em;
  font-size: 1.32rem; font-weight: 600; line-height: 1.5; letter-spacing: -0.012em;
  text-wrap: balance;
}
.acclaim-quote.long blockquote {
  max-width: 40em; font-size: 1rem; font-weight: 500; line-height: 1.7; text-wrap: pretty;
}
/* Each review reads as a quotation: inline “…” around the whole text, in every language. */
.acclaim-quote blockquote::before { content: "\201C"; }
.acclaim-quote blockquote::after { content: "\201D"; }
html[data-lang="zh"] .acclaim-quote blockquote,
html[data-lang="ja"] .acclaim-quote blockquote,
html[data-lang="ko"] .acclaim-quote blockquote { letter-spacing: 0; font-weight: 600; }
.acclaim-quote figcaption {
  margin-top: 1rem; color: var(--muted);
  font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase;
}
.acclaim-name { color: var(--ink); font-weight: 700; }
.acclaim-name::after { content: " · "; color: var(--muted); font-weight: 400; }
/* The asterisk is a footnote, not a URL: a poster carries the line and the name, and
   the receipt lives in the FAQ. Raised like a superscript, hit area padded. */
.acclaim-foot {
  display: inline-block; margin-left: 0.15em; padding: 0 0.3em;
  color: var(--accent-deep); text-decoration: none;
  font-size: 1.1rem; font-weight: 700; line-height: 1; vertical-align: 0.2em;
  letter-spacing: 0;
}
.acclaim-foot:hover { text-decoration: underline; text-underline-offset: 3px; }
.acclaim-note { margin: 0.8rem 0 0; color: var(--muted); font-size: 0.78rem; }

.acclaim.is-live .acclaim-stage { grid-template-columns: 1fr; gap: 0; }
.acclaim.is-live .acclaim-quote {
  grid-area: 1 / 1; align-self: center;
  opacity: 0; visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.acclaim.is-live .acclaim-quote.is-active {
  opacity: 1; visibility: visible;
  transition: opacity 0.6s ease;
}
/* Dots are 28px hit targets drawing an 8px mark, so they can be tapped. */
.acclaim-dots { display: flex; justify-content: center; gap: 2px; margin-top: 0.5rem; }
.acclaim-dots button {
  width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
}
.acclaim-dots button::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--border); transition: background 0.3s, transform 0.3s;
}
.acclaim-dots button[aria-pressed="true"]::before { background: var(--accent-deep); transform: scale(1.3); }
.acclaim-dots button:focus-visible { outline: 2px solid var(--brush); outline-offset: -4px; border-radius: 50%; }
@media (max-width: 620px) {
  section.acclaim { padding-top: 1.8rem; }
  .acclaim-quote blockquote { font-size: 1.15rem; }
  .acclaim-quote.long blockquote { font-size: 0.94rem; }
}
@media (prefers-reduced-motion: reduce) {
  .acclaim.is-live .acclaim-quote, .acclaim-dots button::before { transition: none; }
}

/* Feature blocks. Same grammar as foldic.app: auto-fit grid, card background, a
   tinted icon tile. The icons are inline SVG rather than an icon font or emoji so
   they inherit --accent-deep and stay crisp at any scale. */
section.features { max-width: 1080px; margin: 0 auto; padding: 3rem 24px 0; }
.features-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 1.1rem;
}
.feature {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 18px; padding: 1.5rem 1.6rem;
}
.feature .icon {
  width: 42px; height: 42px; border-radius: 11px; background: var(--accent-tint);
  display: flex; align-items: center; justify-content: center; margin-bottom: 0.9rem;
}
.feature .icon svg {
  width: 22px; height: 22px; stroke: var(--accent-deep); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.feature h3 { margin: 0 0 0.4rem; font-size: 1.02rem; }
.feature p { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.65; }
html[data-lang="zh"] .feature h3,
html[data-lang="ja"] .feature h3,
html[data-lang="ko"] .feature h3 { font-size: 1.12rem; font-weight: 700; }

/* The screenshot earns more width than the reading column: it is the only place
   the product is actually visible. */

/* A terminal product's screenshot is mostly dark, and it always will be — the agent
   CLIs draw ANSI colour tuned for a dark background. So rather than fighting it, the
   showcase band tints toward the icon colour and fades out, which makes the dark
   window read as deliberately inset instead of pasted onto the page. */
/* No background here. A tint on this element is 1080px wide and centred, so it ends
   in a hard vertical edge against the page on both sides — which is exactly the
   stray colour block it looked like. The card and its shadow already seat the
   screenshot; the band was doing that job twice and badly. */
.shotwrap { max-width: 1080px; margin: 0 auto; padding: 24px 24px 8px; }
/* The capture is cropped to the window itself, with the macOS drop shadow removed.
   That shadow is dark and desaturated, so compositing it onto the warm page produced
   a grey ring that read as a mismatched frame — and CSS was drawing a second shadow
   underneath it. One shadow, from CSS, which then tints correctly in both schemes. */

/* Ribbon on an unreleased card. A corner pill rather than a diagonal banner: the
   point is to be unmissable while reading as part of the card, because an unmarked
   roadmap item would put every other card's credibility on the footing of a plan. */
.feature { position: relative; }
.feature.soon { border-style: dashed; }
.feature .ribbon {
  position: absolute; top: 12px; right: 12px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent-deep); background: var(--accent-tint);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px;
}
.feature.soon h3, .feature.soon p { opacity: 0.78; }

/* iPhone companion. Separate from the six runtime features because it is a
   second app, with its own icon and release status. */
section.companion { max-width: 1080px; margin: 0 auto; padding: 1.25rem 24px 0; }
.companion-card {
  display: grid; grid-template-columns: 116px 1fr; align-items: center; gap: 1.5rem;
  background: linear-gradient(135deg, var(--card), var(--accent-tint));
  border: 1px solid var(--border); border-radius: 22px; padding: 1.35rem 1.6rem;
  box-shadow: 0 14px 42px rgba(24, 40, 56, 0.10);
}
.companion-icon {
  width: 116px; height: 116px; object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(24, 40, 56, 0.22));
}
.companion-copy h2 { margin: 0.25rem 0 0.35rem; font-size: 1.3rem; }
.companion-copy p { margin: 0; color: var(--muted); line-height: 1.65; }
.companion-meta { display: block; margin-top: 0.55rem; color: var(--muted); font-size: 0.86rem; }
.companion-badge {
  display: inline-block; color: var(--accent-deep); background: var(--bg);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
@media (max-width: 620px) {
  .companion-card { grid-template-columns: 82px 1fr; gap: 1rem; padding: 1.1rem; }
  .companion-icon { width: 82px; height: 82px; }
}

/* Architecture landscape. The HTML cards carry translated copy; the inline SVG only
   carries connective tissue, so labels wrap naturally in all four languages. */
section.landscape { max-width: 1080px; margin: 0 auto; padding: 4rem 24px 0; }
.landscape-heading { max-width: 720px; margin: 0 auto 1.7rem; text-align: center; }
.landscape-kicker {
  margin: 0 0 0.25rem; color: var(--accent-deep); font-size: 0.76rem;
  font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
}
.landscape-heading h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.35rem); line-height: 1.25; text-wrap: balance; }
.landscape-heading > p:last-child { margin: 0.75rem auto 0; color: var(--muted); text-wrap: balance; }
.landscape-stage {
  position: relative; min-height: 610px; overflow: hidden;
  border: 1px solid var(--border); border-radius: 26px;
  background:
    radial-gradient(circle at 50% 16%, var(--accent-tint), transparent 36%),
    linear-gradient(160deg, color-mix(in srgb, var(--card) 76%, transparent), var(--bg));
  box-shadow: 0 18px 56px rgba(24, 40, 56, 0.11);
}
.landscape-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.landscape-wire, .landscape-flow { fill: none; stroke-linecap: round; }
.landscape-wire { stroke: var(--border); stroke-width: 3; }
.landscape-wire.planned { stroke: var(--muted); stroke-dasharray: 8 10; opacity: 0.48; }
.landscape-wires marker path { fill: var(--muted); }
.landscape-flow {
  stroke: var(--accent); stroke-width: 4; stroke-dasharray: 3 19;
  stroke-dashoffset: 0; opacity: 0.7;
}
.landscape-flow.flow-ab { opacity: 0.38; }
.landscape.is-visible .landscape-flow { animation: landscape-packets 1.25s linear infinite; }
.landscape.is-visible .flow-bc { animation-direction: reverse; animation-duration: 1.05s; }
.landscape.is-visible .flow-ab { animation-duration: 1.7s; }
@keyframes landscape-packets { to { stroke-dashoffset: -44; } }

.landscape-node {
  position: absolute; z-index: 2; width: 270px; min-height: 146px;
  padding: 1.15rem 1.25rem 1.05rem 1.35rem;
  background: color-mix(in srgb, var(--card) 92%, var(--bg));
  border: 1px solid var(--border); border-radius: 19px;
  box-shadow: 0 12px 32px rgba(24, 40, 56, 0.12);
}
.landscape-node.node-c { top: 26px; left: 50%; transform: translateX(-50%); width: 326px; }
.landscape-node.node-a { bottom: 116px; left: 44px; }
.landscape-node.node-b { bottom: 116px; right: 44px; }
/* Two quiet cards behind B say “this can be many Macs” without another label. */
.landscape-node.node-b::before, .landscape-node.node-b::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border: 1px solid var(--border); border-radius: inherit; background: var(--card);
}
.landscape-node.node-b::before { transform: translate(8px, 8px); opacity: 0.62; }
.landscape-node.node-b::after { transform: translate(16px, 16px); opacity: 0.3; }
.landscape-letter {
  position: absolute; top: 13px; right: 13px; width: 28px; height: 28px;
  display: grid; place-items: center; border-radius: 9px;
  color: var(--accent-deep); background: var(--accent-tint);
  font: 800 0.82rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.landscape-role {
  display: block; padding-right: 34px; color: var(--accent-deep);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
}
.landscape-node h3 { margin: 0.25rem 0 0.28rem; font-size: 1.16rem; line-height: 1.25; }
.landscape-node p { margin: 0; color: var(--muted); font-size: 0.84rem; line-height: 1.55; }

.landscape-edge {
  position: absolute; z-index: 3; display: flex; flex-direction: column;
  align-items: center; gap: 5px; max-width: 230px; text-align: center;
  font-size: 0.72rem; font-weight: 750; color: var(--ink);
}
.edge-ac { left: 24%; top: 44%; transform: rotate(-2deg); }
.edge-bc { right: 17%; top: 39%; }
.edge-ab { left: 50%; bottom: 126px; transform: translateX(-50%); }
.landscape-edge > span {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg); box-shadow: 0 3px 10px rgba(24, 40, 56, 0.08);
}
.landscape-edge .landscape-auth { color: var(--accent-deep); }
.landscape-auth svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; }
.landscape.is-visible .landscape-auth svg { animation: landscape-lock 1.8s ease-in-out 2; }
@keyframes landscape-lock { 50% { transform: scale(1.18); filter: drop-shadow(0 0 5px var(--accent)); } }
.landscape-edge .landscape-dev {
  border-style: dashed; color: var(--muted); background: var(--card);
  font-size: 0.63rem; font-weight: 800; letter-spacing: 0.035em; text-transform: uppercase;
}
.landscape-band {
  position: absolute; z-index: 2; left: 38px; right: 38px; bottom: 22px;
  min-height: 64px; display: flex; align-items: center; justify-content: center;
  gap: 0.65rem; padding: 0.75rem 1.1rem; overflow: hidden;
  border: 1px solid var(--border); border-radius: 16px;
  color: var(--ink); background: color-mix(in srgb, var(--blue) 16%, var(--card));
}
.landscape-band strong { color: var(--accent-deep); letter-spacing: 0.02em; }
.landscape-band > span:last-child { color: var(--muted); font-size: 0.82rem; }
.tailscale-dot-grid {
  width: 26px; height: 26px; flex: 0 0 auto; opacity: 0.72;
  background: radial-gradient(circle, var(--ink) 2.2px, transparent 2.6px) 0 0 / 9px 9px;
}
.landscape-benefits {
  list-style: none; display: flex; justify-content: center; flex-wrap: wrap;
  gap: 0.65rem; margin: 1rem 0 0; padding: 0;
}
.landscape-benefits li {
  padding: 5px 12px; border-radius: 999px; color: var(--muted);
  border: 1px solid var(--border); background: var(--card); font-size: 0.79rem;
}
.landscape-benefits li::before { content: "✓"; margin-right: 0.42rem; color: var(--accent-deep); font-weight: 800; }

@media (max-width: 700px) {
  section.landscape { padding: 3rem 14px 0; }
  .landscape-heading { padding: 0 10px; }
  .landscape-heading h2 { font-size: 1.65rem; }
  .landscape-stage {
    min-height: 0; padding: 18px; display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "c c" "ac bc" "a b" "ab ab" "band band";
    gap: 12px 10px; overflow: visible;
  }
  .landscape-wires { display: none; }
  .landscape-node { position: relative; inset: auto; width: auto; min-height: 0; transform: none; padding: 1rem; }
  .landscape-node.node-c { grid-area: c; width: min(100%, 340px); justify-self: center; inset: auto; transform: none; }
  .landscape-node.node-a { grid-area: a; inset: auto; }
  .landscape-node.node-b { grid-area: b; inset: auto; }
  .landscape-node h3 { font-size: 0.98rem; overflow-wrap: anywhere; }
  .landscape-node p { font-size: 0.75rem; }
  .landscape-role { font-size: 0.63rem; }
  .landscape-edge { position: static; transform: none; max-width: none; font-size: 0.65rem; justify-self: stretch; }
  .landscape-edge::before { content: "↓"; display: block; color: var(--accent-deep); line-height: 1; }
  .edge-ac { grid-area: ac; }
  .edge-bc { grid-area: bc; }
  .edge-ab { grid-area: ab; }
  .landscape-edge > span { justify-content: center; padding: 3px 6px; }
  .landscape-edge .landscape-dev { font-size: 0.56rem; }
  .landscape-auth { font-size: 0.58rem; }
  .landscape-band { grid-area: band; position: static; flex-wrap: wrap; text-align: center; gap: 0.35rem 0.55rem; }
  .landscape-band > span:last-child { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .landscape-flow, .landscape-auth svg { animation: none !important; }
}

/* FAQ. Same grammar as foldic.app: a bottom-ruled details list with +/- and a
   copyable anchor per question. */
section.faq { max-width: 760px; margin: 0 auto; padding: 3.5rem 24px 1rem; }
section.faq h2 { text-align: center; margin-bottom: 1.6rem; }
.faq details { border-bottom: 1px solid var(--border); padding: 1rem 0.2rem; }
/* The question text is wrapped in one span deliberately. summary is a flex
   container, so every inline element inside it — and these questions contain
   <code> — would otherwise become its own flex item and be pushed apart by
   space-between, scattering one sentence across the full width. */
.faq summary {
  cursor: pointer; font-weight: 600; font-size: 1rem; list-style: none;
  display: flex; align-items: baseline; gap: 0.1rem;
}
.faq summary .q { flex: 1 1 auto; }
.faq summary code { font-size: 0.92em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; color: var(--accent-deep); font-size: 1.3rem; font-weight: 400;
  flex: 0 0 auto; margin-left: 0.6rem; line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq summary .faq-anchor {
  margin-left: 0.4rem; color: var(--accent-deep); flex: 0 0 auto;
  opacity: 0.3; text-decoration: none; font-weight: 400; transition: opacity 0.15s;
}
.faq summary .faq-anchor:hover, .faq summary .faq-anchor:focus { opacity: 1; }
.faq details .a { padding-top: 0.6rem; }
.faq details p { color: var(--muted); font-size: 0.95rem; margin: 0 0 0.7rem; }
.faq details p:last-child { margin-bottom: 0; }
/* A two-sided comparison is a list, so it is marked up as one. The markers are
   suppressed and replaced by indentation because the two items are peers being
   contrasted, not steps or a tally. */
.faq details ul { list-style: none; margin: 0 0 0.8rem; padding: 0; }
.faq details ul li {
  color: var(--muted); font-size: 0.95rem; margin: 0 0 0.55rem;
  padding-left: 0.95rem; border-left: 2px solid var(--border);
}
.faq details ul li:last-child { margin-bottom: 0; }
.faq details ul li strong { color: var(--ink); }
html[data-lang="zh"] .faq summary,
html[data-lang="ja"] .faq summary,
html[data-lang="ko"] .faq summary { font-size: 1.06rem; font-weight: 700; }
html[data-lang="zh"] .faq details p,
html[data-lang="ja"] .faq details p,
html[data-lang="ko"] .faq details p,
html[data-lang="zh"] .faq details ul li,
html[data-lang="ja"] .faq details ul li,
html[data-lang="ko"] .faq details ul li { font-size: 1rem; line-height: 1.85; }

/* The same badge as the unreleased card, set inline so it can sit in a question.
   A reader scanning closed summaries has to be able to tell a roadmap answer from a
   feature without opening it. */
.ribbon.inline {
  position: static; display: inline-block; vertical-align: 0.12em;
  margin-left: 0.45rem; font-size: 0.62rem;
}
.faq summary .q .ribbon.inline { font-weight: 700; }
.faq details a { color: var(--accent-deep); }

/* Narrow screens. The nav is a row that wraps, and wrapping left-aligned it into three
   stacked blocks — brand, links, switcher — which read as three separate things rather
   than one bar. Centred and tightened, it reads as one. */
@media (max-width: 620px) {
  nav {
    flex-direction: column; align-items: center; gap: 9px;
    padding: 13px 18px;
  }
  nav .links { justify-content: center; gap: 0.85rem; font-size: 0.9rem; }
  header { padding: 26px 18px 4px; }
  header img.appicon { width: 78px; height: 78px; }
  .tag { font-size: 1.02rem; }
  html[data-lang="zh"] .tag,
  html[data-lang="ja"] .tag,
  html[data-lang="ko"] .tag { font-size: 1.04rem; line-height: 1.7; }
  .shotwrap { padding: 16px 14px 6px; }
  .shotwrap figure { padding: 6px; border-radius: 12px; }
  section.features { padding: 2rem 18px 0; }
  section.faq { padding: 2.4rem 18px 1rem; }
  footer { padding: 22px 18px 36px; gap: 14px; }
}

/* Availability under the hero. Locales not yet switched over remain truthful status
   badges; an approved locale renders the same badge as an App Store link. */
.cta {
  margin: 22px 0 0; display: flex; flex-direction: column;
  align-items: center; gap: 7px;
}
.cta .badge {
  display: inline-block; font-weight: 700; font-size: 0.97rem;
  color: var(--accent-deep); background: var(--accent-tint);
  border: 1px solid var(--border); border-radius: 999px; padding: 8px 18px;
}
.cta a.badge {
  text-decoration: none;
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.cta a.badge:hover {
  transform: translateY(-1px); border-color: var(--accent);
  box-shadow: 0 5px 14px rgba(24, 40, 56, 0.12);
}
.cta a.badge:focus-visible { outline: 3px solid var(--brush); outline-offset: 3px; }
.cta .dim { font-size: 0.86rem; }
html[data-lang="zh"] .cta .badge,
html[data-lang="ja"] .cta .badge,
html[data-lang="ko"] .cta .badge { font-size: 1.02rem; }

/* Document pages (privacy, support). They share the site's chrome, so only the prose
   rhythm is set here. `.wrap` is narrower than the feature grid on purpose: this is
   text to be read, not scanned. */
.doc { padding-top: 44px; }
.doc h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin: 0 0 6px; letter-spacing: -0.02em; }
.doc .date { margin: 0 0 30px; font-size: 0.92rem; }
.doc h2 { font-size: 1.12rem; margin: 34px 0 10px; }
.doc h3 { font-size: 1rem; margin: 24px 0 6px; }
.doc p { margin: 0 0 14px; }
.doc ul { padding-left: 1.15em; margin: 0 0 14px; }
.doc li { margin: 8px 0; }
.doc pre {
  background: var(--card); border: 1px solid var(--border); border-radius: 9px;
  padding: 13px 15px; overflow-x: auto; color: var(--accent-deep);
  font: 0.85rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
}
html[data-lang="zh"] .doc h2,
html[data-lang="ja"] .doc h2,
html[data-lang="ko"] .doc h2 { font-size: 1.2rem; font-weight: 700; }
html[data-lang="zh"] .doc,
html[data-lang="ja"] .doc,
html[data-lang="ko"] .doc { line-height: 1.85; }


/* ---- Dev notes ------------------------------------------------------------
   Article pages under /notes/. Appended after the landing rules on purpose:
   the per-language h1 clamps above target the hero and tie on specificity, so
   source order is what lets these win on note pages. */
.note, .notes-index { padding-top: 24px; }
.note h1, .notes-index h1 {
  font-size: clamp(1.5rem, 4.6vw, 2.2rem);
  text-align: left; line-height: 1.35; margin: 8px 0 6px;
  letter-spacing: 0;
}
.note .crumbs { margin: 0; font-size: 0.9rem; }
.note .crumbs a { color: var(--muted); text-decoration: none; }
.note .crumbs a:hover { color: var(--ink); }
.note .byline { color: var(--muted); font-size: 0.95rem; margin: 0 0 28px; }
.note .lede, .notes-index .lede {
  font-size: 1.12rem; color: var(--ink); line-height: 1.8; margin: 0 0 8px;
}
.note h2 {
  font-size: 1.3rem; margin: 40px 0 8px; line-height: 1.4; letter-spacing: 0;
}
.note p { line-height: 1.85; margin: 14px 0; }
.note code {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 5px; font-size: 0.9em;
}

/* The comparison table: four columns is wider than a phone, so the wrapper
   scrolls rather than the cells crushing to one word per line. */
.tablewrap { overflow-x: auto; margin: 28px -24px; padding: 0 24px; }
table.cmp {
  border-collapse: collapse; font-size: 0.88rem; line-height: 1.55;
  min-width: 720px; width: 100%;
}
table.cmp th, table.cmp td {
  border: 1px solid var(--border); padding: 9px 12px;
  text-align: left; vertical-align: top;
}
table.cmp thead th {
  background: var(--card); font-size: 0.92rem;
  /* Latin product names: pin the wordmark stack so they render one shape on
     every language page, same reasoning as the nav brand. */
  font-family: "Apple SD Gothic Neo", -apple-system, BlinkMacSystemFont,
               "Segoe UI", system-ui, sans-serif;
}
table.cmp tbody th {
  background: var(--card); font-weight: 700; white-space: nowrap;
}
/* The verdict rows read as a conclusion, so they look like one. */
table.cmp tbody tr:nth-last-child(-n+2) td { font-weight: 700; }
/* A profile table is a list of equals, not a comparison ending in a verdict:
   no verdict bolding, and three short columns fit a phone without scrolling. */
table.cmp.profiles { min-width: 0; }
table.cmp.profiles tbody tr td { font-weight: 400; }
table.cmp.profiles td strong { font-weight: 700; }

/* The zh note carries the comparison as a designed graphic instead of the HTML
   table. The source is 2560px against a ~730px column, so it only ever scales
   down; width/height attributes reserve the box before the image arrives. */
.cmp-shot { margin: 28px 0; }
.cmp-shot img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--border); border-radius: 12px;
}

/* Notes index entries. */
.note-entry {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px 20px; margin: 20px 0;
}
.note-entry .when { color: var(--muted); font-size: 0.85rem; }
.note-entry .ntitle { font-weight: 700; font-size: 1.08rem; margin: 4px 0 6px; }
.note-entry p { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.7; }

/* Releases — newest first; a version under review is listed before it ships,
   with a distinct badge so a plan is never dressed as a fact. */
.rel { border-bottom: 1px solid var(--border); padding: 22px 0; }
.relgroup .rel:last-of-type { border-bottom: 0; }
/* App switch, ported from deepsrt.com's releases page: a pill segmented
   control, one segment per app, because stacking both histories buried
   Remote below five Connect rows. */
.app-switch {
  display: inline-flex; gap: 0.25rem; margin: 1.6rem 0 0;
  padding: 0.25rem; border-radius: 999px;
  background: var(--card); border: 1px solid var(--border);
}
.app-switch button {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font: inherit; font-size: 0.92rem; font-weight: 600; color: var(--muted);
  background: none; border: 0; cursor: pointer;
  padding: 0.42rem 1.05rem; border-radius: 999px;
}
.app-switch button[aria-selected="true"] {
  background: var(--bg); color: var(--ink);
  box-shadow: 0 1px 3px rgba(29, 94, 140, 0.14);
}
.app-switch svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8;
}
/* The attribute is set by script, never in the markup: with JS off no rule
   matches and BOTH sections stay visible, rather than one app's history
   being permanently hidden. */
body[data-app="connect"] .relgroup[data-app="remote"],
body[data-app="remote"] .relgroup[data-app="connect"] { display: none; }
/* Each app is its own section with a heading that carries its own store link. */
.relgroup { margin-top: 2.2rem; }
.relgroup-h {
  font-size: 1.05rem; font-weight: 800; margin: 0 0 4px;
  padding-bottom: 10px; border-bottom: 2px solid var(--border);
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.relgroup-h a {
  font-size: 0.85rem; font-weight: 600; margin-left: auto;
  white-space: nowrap;
}
.rel .rhead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rel .ver { font-size: 1.3rem; font-weight: 800; }
.rel .when { color: var(--muted); font-size: 0.85rem; margin-left: auto; }
.rel .plat { color: var(--muted); font-size: 0.85rem; }
.rel p { margin: 10px 0 0; }
.rel ul { margin: 10px 0 0; padding-left: 1.2em; }
.rel li { margin: 4px 0; }
.relbadge {
  font-size: 0.72rem; font-weight: 700; padding: 2px 9px; border-radius: 99px;
  letter-spacing: 0.02em; white-space: nowrap;
}
.relbadge.latest { background: var(--accent-tint); color: var(--accent-deep); }
.relbadge.review {
  background: transparent; color: var(--accent-deep);
  border: 1px solid var(--accent-deep);
}

/* The companion badge as a live App Store link (OpenAB Remote shipped). */
.companion-badge--link {
  text-decoration: none; margin-top: 10px; cursor: pointer;
  background: var(--accent-deep); color: var(--bg); border-color: var(--accent-deep);
}
.companion-badge--link:hover { filter: brightness(1.08); }
.companion-badge--link:focus-visible { outline: 3px solid var(--brush); outline-offset: 3px; }