/* ShipPress landing — no external fonts, no build step. */
:root {
  --ink: #222828;
  --ink-soft: #4a5252;
  --muted: #5d6464;
  --yellow: #ffdc73;
  --yellow-soft: #fff4d1;
  --paper: #faf8f3;
  --paper-2: #f2efe7;
  --line: #e2ded3;
  --white: #fffefb;
  --radius: 14px;
  --wrap: 1160px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif", Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--yellow);
  border-radius: 4px;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 8px;
}
.skip-link:focus { top: 16px; }

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

/* Header */
.site-header { border-bottom: 1px solid var(--line); background: var(--paper); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; font-size: 1.05rem; letter-spacing: 0.01em; }
.brand img { width: 28px; height: 28px; }
.nav { display: flex; gap: 28px; font-size: 0.95rem; }
.nav a { text-decoration: none; color: var(--ink-soft); }
.nav a:hover { color: var(--ink); text-decoration: underline; }
.hdr-end { display: flex; align-items: center; gap: 12px; }

/* Header menu (menu.js). The nav needs ~1010px in French and German, so at 1080px and below it moves into a panel behind a
   menu button. Without JS the button stays hidden and the links wrap under the logo instead. */
.menu-panel { display: contents; }
.menu-btn { display: none; }
@media (max-width: 1080px) {
  .site-header { position: relative; z-index: 70; }
  .site-header .wrap { height: auto; min-height: 68px; flex-wrap: wrap; row-gap: 0; }
  .menu-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; width: 100%; padding-bottom: 14px; }
  .menu-panel .nav { flex-wrap: wrap; gap: 4px 18px; }
  .js .site-header .wrap { height: 68px; flex-wrap: nowrap; }
  .js .site-header .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; }
  .js .site-header .menu-btn:hover, .site-header.menu-open .menu-btn { border-color: var(--ink); background: var(--white); }
  .menu-btn path { transform-origin: 12px 12px; transition: transform .2s ease, opacity .2s ease; }
  .menu-open .menu-btn .l1 { transform: rotate(45deg) translate(0, 5px); }
  .menu-open .menu-btn .l2 { opacity: 0; }
  .menu-open .menu-btn .l3 { transform: rotate(-45deg) translate(0, -5px); }
  .js .site-header .menu-panel { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; max-height: calc(100vh - 68px); overflow-y: auto; padding: 4px 24px 22px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 22px 40px -24px rgba(34,40,40,.4); }
  .site-header.menu-open .menu-panel { display: flex; }
  .js .site-header .nav { flex-direction: column; gap: 0; font-size: 1.05rem; }
  .js .site-header .nav a { padding: 12px 4px; border-bottom: 1px solid var(--line); color: var(--ink); overflow-wrap: anywhere; }
  .js .site-header .hdr-end { flex-wrap: wrap; align-items: flex-start; padding-top: 18px; }
  .js .site-header .lang-menu ul { position: static; margin-top: 8px; box-shadow: none; }
  .js .site-header .dl { flex-wrap: wrap; }
  .js .site-header .dl-menu { position: static; flex-basis: 100%; margin-top: 8px; box-shadow: none; }
}

/* Language menu: a plain <details> with links, works without JS */
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-soft); font-size: 0.9rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary:hover, .lang-menu[open] summary { color: var(--ink); border-color: var(--ink); background: var(--white); }
.lang-menu ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 168px; margin: 0; padding: 6px; list-style: none; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 34px -14px rgba(34,40,40,.35); }
.lang-menu a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 0.95rem; line-height: 1.3; }
.lang-menu a:hover { background: var(--paper-2); }
.lang-menu a[aria-current] { font-weight: 600; background: var(--yellow-soft); }

/* Language suggestion (langhint.js): a slim fixed bar along the bottom edge, so it never shifts the layout, and it slides away after a few seconds. */
.lang-hint { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 5px 10px 5px 16px; padding-bottom: max(5px, env(safe-area-inset-bottom)); background: var(--ink); color: var(--paper); font-size: 0.88rem; line-height: 1.35; transition: transform .35s ease; }
.lang-hint.out { transform: translateY(105%); }
.lang-hint p { margin: 0; min-width: 0; }
.lang-hint a { color: var(--yellow); font-weight: 600; margin-left: 4px; white-space: nowrap; }
.lang-hint button { flex: none; width: 34px; height: 34px; border: 0; border-radius: 999px; background: transparent; color: var(--paper); font: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.lang-hint button:hover { background: rgba(250,248,243,.14); }
.lang-hint :focus-visible { outline-color: var(--yellow); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .lang-hint, .menu-btn path { transition: none; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px; font-weight: 600; font-size: 1rem;
  text-decoration: none; border: 1.5px solid var(--ink); line-height: 1.2;
  transition: background-color .2s ease, transform .2s ease;
}
button.btn { font-family: inherit; cursor: pointer; }
button.btn:disabled { opacity: .6; cursor: progress; transform: none; }
.btn-primary { background: var(--yellow); color: var(--ink); }
.btn-primary:hover { background: #ffd24d; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--white); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* Split download button (build-i18n.py dl(), dlmenu.js): the yellow main link plus an arrow, split by a hairline, opening a
   small menu with both builds. Without JS the arrow is a <details>. The menu hangs from the left edge (the right one in the
   header); dlmenu.js swaps edges (.start / .end) when the menu would leave the screen. */
.dl { position: relative; display: inline-flex; align-items: stretch; max-width: 100%; }
.dl .dl-main { min-width: 0; border-right: 0; border-radius: 999px 0 0 999px; }
.dl .dl-main:hover { transform: none; }
.dl-more { display: flex; }
.dl-toggle { display: flex; align-items: center; justify-content: center; width: 50px; min-height: 44px; padding: 0 4px 0 0; border: 1.5px solid var(--ink); border-left: 1px solid rgba(34,40,40,.32); border-radius: 0 999px 999px 0; background: var(--yellow); color: var(--ink); font: inherit; cursor: pointer; list-style: none; }
.dl-toggle::-webkit-details-marker { display: none; }
.dl-toggle:hover, .dl.open .dl-toggle, .dl-more[open] .dl-toggle { background: #ffd24d; }
.dl-toggle svg { width: 18px; height: 18px; transition: transform .2s ease; }
.dl.open .dl-toggle svg, .dl-more[open] .dl-toggle svg { transform: rotate(180deg); }
.dl-menu { position: absolute; left: 0; top: calc(100% + 8px); z-index: 60; min-width: 100%; margin: 0; padding: 6px; list-style: none; text-align: left; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 36px -16px rgba(34,40,40,.35); }
.site-header .dl-menu, .dl.end .dl-menu { left: auto; right: 0; }
.dl.start .dl-menu { left: 0; right: auto; }
.dl-menu[hidden] { display: none; }
.dl-menu a { display: flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 0.97rem; font-weight: 600; line-height: 1.3; white-space: nowrap; }
.dl-menu a:hover, .dl-menu a:focus { background: var(--yellow-soft); }

/* Sections */
section { padding: 112px 0; }
.eyebrow {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 18px; display: flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--yellow); box-shadow: 0 0 0 0.5px var(--ink); }
.section-head { max-width: 640px; margin-bottom: 56px; }
.section-head p { color: var(--ink-soft); font-size: 1.1rem; margin-top: 18px; }
.alt { background: var(--paper-2); }

/* Hero */
.hero { padding: 72px 0 80px; }
.hero h1 { max-width: 20ch; text-wrap: balance; }
.hero .lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--ink-soft); max-width: 38em; margin: 28px 0 36px; }
.note { font-size: 0.92rem; color: var(--muted); margin-top: 18px; }
.hero-shot { margin: 72px 0 0; }

.frame {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(34,40,40,.04), 0 24px 60px -28px rgba(34,40,40,.28);
  overflow: hidden;
}
.frame-bar { display: flex; gap: 7px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--paper); }
.frame-bar span { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.caption { font-size: 0.9rem; color: var(--muted); margin-top: 14px; }

/* Steps */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; counter-reset: step; }
.steps li { border-top: 1px solid var(--ink); padding-top: 28px; counter-increment: step; }
.steps li::before {
  content: "0" counter(step); display: block; font-family: var(--mono); font-size: 0.85rem;
  color: var(--ink); margin-bottom: 20px; letter-spacing: 0.08em;
}
.steps h3 { margin-bottom: 12px; }
.steps p { color: var(--ink-soft); }

/* Motion demos: same 16:10 frame as the screenshots, so nothing shifts when they load. */
.clip-frame { position: relative; }
.frame video.clip { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--paper); cursor: pointer; }
.clip-note { position: absolute; right: 12px; bottom: 12px; font-size: 0.78rem; line-height: 1; padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--muted); border: 1px solid var(--line); pointer-events: none; }
.example-grid.has-clip { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.example-grid.has-clip .steps { grid-template-columns: 1fr; gap: 28px; }
#example { padding: 56px 0; }
#example .section-head { margin-bottom: 32px; }
.example-grid .frame { aspect-ratio: 16 / 10; }

/* Themes */
.themes { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 32px; }
.themes li { display: flex; flex-direction: column; min-width: 0; }
.themes .shot { position: relative; border-radius: 10px; transition: transform .4s cubic-bezier(.2,.7,.2,1); }
/* Static top crop of the screenshot: it never pans or scrolls. */
.themes img {
  width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 0;
  border-radius: 10px; background: var(--white);
  box-shadow: 0 0 0 1px rgba(34,40,40,.09), 0 1px 2px rgba(34,40,40,.05), 0 14px 30px -20px rgba(34,40,40,.32);
  transition: box-shadow .4s ease;
}
.themes .hint {
  position: absolute; left: 50%; bottom: 12px; transform: translate(-50%, 4px); opacity: 0; pointer-events: none; white-space: nowrap;
  padding: 5px 12px; border-radius: 999px; background: rgba(255,254,251,.94); box-shadow: 0 0 0 1px rgba(34,40,40,.08), 0 4px 14px -6px rgba(34,40,40,.3);
  font-size: 0.74rem; letter-spacing: 0.02em; color: var(--ink);
  transition: opacity .35s ease, transform .35s ease;
}
.themes .hint::after { content: " \2192"; }
.themes li:hover .shot, .themes li:has(:focus-visible) .shot { transform: translateY(-3px); }
.themes li:hover img, .themes li:has(:focus-visible) img { box-shadow: 0 0 0 1px rgba(34,40,40,.12), 0 2px 4px rgba(34,40,40,.05), 0 22px 40px -22px rgba(34,40,40,.4); }
.themes li:hover .hint, .themes li:has(:focus-visible) .hint { opacity: 1; transform: translate(-50%, 0); }
.themes img:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; box-shadow: 0 0 0 1px rgba(34,40,40,.12), 0 0 0 7px var(--yellow); }
.themes .meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.themes .kind { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.themes .dots { display: inline-flex; gap: 4px; flex: none; }
.themes .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(34,40,40,.14); }
.themes .name { font-family: var(--serif); font-size: 1.12rem; line-height: 1.3; margin-top: 6px; display: block; color: var(--ink); }
.more { margin-top: 48px; }

/* Features */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.feature { padding: 36px 32px 40px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.feature-icon {
  width: 40px; height: 40px; border-radius: 10px; background: var(--yellow-soft); border: 1px solid var(--ink);
  display: grid; place-items: center; margin-bottom: 22px;
}
.feature-icon svg { width: 20px; height: 20px; }
.feature h3 { font-size: 1.18rem; margin-bottom: 10px; }
.feature p { color: var(--ink-soft); font-size: 0.98rem; margin: 0; }

/* FAQ */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 26px 48px 26px 0; position: relative;
  font-family: var(--serif); font-size: 1.25rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: var(--sans); font-size: 1.5rem; font-weight: 300;
}
.faq details[open] summary::after { content: "–"; }
.faq .answer { padding: 0 0 30px; color: var(--ink-soft); max-width: 46em; }
.faq ol, .faq ul { padding-left: 1.3em; margin: 0 0 1em; }
.faq li { margin-bottom: 8px; }
.faq kbd, .path {
  font-family: var(--mono); font-size: 0.86em; background: var(--white); border: 1px solid var(--line);
  border-radius: 6px; padding: 1px 7px; white-space: nowrap;
}

/* Windows notify */
.notify-form { max-width: 620px; }
.notify-form label { font-weight: 600; font-size: 0.95rem; }
.field-row { display: flex; gap: 12px; margin-top: 8px; }
.field-row input {
  flex: 1; min-width: 0; font: inherit; color: var(--ink); background: var(--white);
  border: 1.5px solid var(--ink); border-radius: 999px; padding: 12px 20px;
}
.field-row input::placeholder { color: #8a908e; }
.check { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; cursor: pointer; }
.notify-form .check { font-weight: 400; color: var(--ink-soft); font-size: 0.98rem; }
.check input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--ink); flex: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notify-status:empty { display: none; }
.notify-status, .notify-msg { margin: 22px 0 0; padding: 12px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--white); }
.notify-msg { display: none; }
.notify-msg:target { display: block; }
.is-ok { border-color: #2f6b4f; background: #eef6f0; }
.is-err { border-color: #9b2c2c; background: #fbeeee; }
.is-busy { color: var(--muted); }
.fine { font-size: 0.88rem; color: var(--muted); margin: 22px 0 0; }

/* Download band */
.band { background: var(--ink); color: var(--paper); text-align: center; padding: 104px 0; }
.band h2 { color: var(--paper); }
.band p { color: #d5d9d6; margin: 18px auto 34px; max-width: 34em; }
.band .note { margin: 22px auto 0; text-align: center; }
.band .btn-primary, .band .dl-toggle { border-color: var(--yellow); }
.band .dl-toggle { border-left-color: rgba(34,40,40,.32); }
.band .note { color: #c3c8c5; }
.band a:not(.btn) { color: var(--paper); }
.band .dl-menu a { color: var(--ink); }
.band :focus-visible { outline-color: var(--yellow); box-shadow: 0 0 0 6px var(--ink); }

/* Footer */
.site-footer { padding: 48px 0 56px; font-size: 0.93rem; color: var(--ink-soft); border-top: 1px solid var(--line); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; align-items: center; }
.site-footer .copy { margin: 0; }
.site-footer ul { list-style: none; display: flex; flex-wrap: wrap; gap: 24px; margin: 0; padding: 0; }

/* Legal pages */
.legal { padding: 80px 0 112px; }
.legal h1 { font-size: clamp(2.2rem, 4vw, 3rem); margin-bottom: 12px; hyphens: auto; overflow-wrap: break-word; }
.legal h2 { font-size: 1.5rem; margin: 48px 0 14px; }
.legal .updated { color: var(--muted); font-size: 0.93rem; margin-bottom: 40px; }
.legal .legal-note { margin: -16px 0 40px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); font-size: 0.93rem; }
.legal p, .legal li { color: var(--ink-soft); }
.legal ul { padding-left: 1.3em; }

/* Responsive */
.features.two { grid-template-columns: repeat(2, 1fr); }
.feature .points { list-style: none; margin: 0; padding: 0; color: var(--ink-soft); font-size: 0.98rem; }
.feature .points li + li { margin-top: 14px; }
.feature .points strong { color: var(--ink); }
@media (max-width: 960px) {
  .features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  section { padding: 80px 0; }
  .hero { padding: 64px 0 56px; }
  .hero-shot { margin-top: 48px; }
  .steps { grid-template-columns: 1fr; gap: 36px; }
  .example-grid.has-clip { grid-template-columns: 1fr; gap: 36px; }
  .features, .features.two { grid-template-columns: 1fr; }
  .feature { padding: 28px 24px 32px; }
  .section-head { margin-bottom: 40px; }
  .band { padding: 80px 0; }
  .btn { width: 100%; justify-content: center; }
  .dl { display: flex; width: 100%; }
  .dl .dl-main { flex: 1; width: auto; }
  .site-header .dl { display: inline-flex; width: auto; }
  .site-header .dl-toggle { width: 44px; }
  .site-header .btn { width: auto; padding: 10px 16px; font-size: 0.9rem; white-space: nowrap; }
  .site-header .wrap { gap: 12px; }
  .hdr-end { gap: 8px; }
  .lang-menu summary { min-height: 40px; padding: 0 10px; }
  .field-row { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.hosts .tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; vertical-align: middle; background: #e6f0e4; color: #2f5a2a; }
.hosts a { text-decoration: underline; }
.host-logo { display: block; height: 28px; width: auto; max-width: 160px; margin: 0 0 20px; object-fit: contain; object-position: left center; }
.host-logo-icon { display: flex; align-items: center; width: 28px; color: var(--ink-soft); }
.host-logo-icon svg { width: 28px; height: 28px; }
.hosts .aff-mark { display: inline-block; margin-left: 4px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.72rem; color: var(--ink-soft); text-decoration: none; white-space: nowrap; vertical-align: 1px; }
.hosts .aff-mark:hover { text-decoration: underline; }
.hosts-note { margin-top: 14px; font-size: 0.9rem; color: var(--ink-soft); }

/* Theme filter (#11, compact #13) */
.tf { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 28px; }
.tf input[type=search] { flex: 1 1 260px; min-width: 0; padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: 0.92rem; background: var(--white); }
.tf .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tf-sel { display: flex; }
.tf select, .tf-dd summary { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: 0.9rem; color: var(--ink-soft, inherit); background: var(--white); max-width: 190px; cursor: pointer; }
.tf-dd { position: relative; }
.tf-dd summary { list-style: none; display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.tf-dd summary::-webkit-details-marker { display: none; }
.tf-dd summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); margin-left: 4px; opacity: .6; }
.tf-dd.on summary { border-color: #222828; }
.tf-n { font-weight: 500; }
.tf-toggle { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.9rem; color: var(--ink-soft, inherit); background: var(--white); cursor: pointer; white-space: nowrap; }
.tf-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tf-toggle:has(input:checked) { border-color: #222828; color: #222828; font-weight: 500; }
.tf-toggle:has(input:focus-visible) { outline: 2px solid #222828; outline-offset: 2px; }
.tf-pop { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: 300px; max-height: 300px; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; padding: 12px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.08); }
.tf-dd:last-of-type .tf-pop { left: auto; right: 0; }
.tf-pop label { display: flex; gap: 8px; align-items: center; font-size: 0.88rem; padding: 4px 2px; cursor: pointer; }
.tf-pop input { accent-color: #222828; }
.tf-status { flex-basis: 100%; margin: 0; font-size: 0.85rem; color: var(--muted); }
#tf-active::before { content: " · "; }
.tf-clear { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }
@media (max-width: 640px) { .tf-toggle { grid-column: 1 / -1; justify-content: center; } .tf { position: relative; display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.85fr) minmax(0,1fr) minmax(0,.9fr); gap: 8px 6px; } .tf input[type=search] { grid-column: 1 / -1; } .tf-status { grid-column: 1 / -1; } .tf-dd { position: static; } .tf-sel select { flex: 1; min-width: 0; } .tf select, .tf-dd summary { width: 100%; max-width: none; padding: 7px 8px; font-size: 0.82rem; } .tf-dd summary { justify-content: center; gap: 3px; } .tf-dd summary::after { display: none; } .tf-pop, .tf-dd:last-of-type .tf-pop { left: 0; right: 0; width: auto; } }
.themes .sum { font-size: 0.84rem; line-height: 1.55; color: var(--muted); display: block; margin-top: 6px; }
.themes li[hidden] { display: none; }
.tf-empty { margin-top: 24px; }

/* Theme pager: quiet, text-like; the current page gets a hairline ring. */
.tf-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.tf-pager[hidden] { display: none; }
.tf-pager button { min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--muted); font: inherit; font-family: var(--serif); font-size: 0.98rem; cursor: pointer; transition: color .2s ease, border-color .2s ease; }
.tf-pager .pg-step { font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.02em; }
.tf-pager .pg-step:first-child { margin-right: 10px; }
.tf-pager .pg-step:last-child { margin-left: 10px; }
.tf-pager button:hover:not(:disabled) { color: var(--ink); }
.tf-pager button[aria-current="page"] { color: var(--ink); border-color: var(--ink-soft); background: var(--white); cursor: default; }
.tf-pager button:disabled { opacity: 0.35; cursor: default; }
#themes { scroll-margin-top: 16px; }
@media (max-width: 900px) { .themes { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; } }
@media (max-width: 560px) { .themes { grid-template-columns: 1fr; gap: 36px; } }

/* Warm illustrations: decorative only, never interactive. */
/* Hero: the demo video leads. Desktop: copy in a narrow left column (title above, buttons below), the video ~65% wide on the right.
   Narrower screens stack title → video → buttons. */
.hero-wrap { max-width: 1360px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 35fr) minmax(0, 65fr); grid-template-areas: "head video" "act video"; column-gap: 56px; row-gap: 0; align-items: center; }
.hero-head { grid-area: head; align-self: end; }
.hero-video { grid-area: video; }
.hero-actions { grid-area: act; align-self: start; }
.hero h1 { font-size: clamp(2.2rem, 3.4vw, 3.4rem); hyphens: auto; overflow-wrap: break-word; }
.hero .lede { font-size: clamp(1.05rem, 1.25vw, 1.18rem); margin: 22px 0 30px; }
.hero-video { padding: 10px; background: var(--white); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 2px 0 rgba(34,40,40,.04), 0 40px 80px -36px rgba(34,40,40,.45); }
.hero-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #111; border-radius: 14px; }
.hero-actions .dl-main { padding: 13px 22px; }
/* Raster hero: multiply drops its off-white backdrop into the page; the radial mask feathers the remaining edge. */
.hero-illus {
  width: 100%; height: auto; pointer-events: none; user-select: none;
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 58%, transparent 100%);
          mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 58%, transparent 100%);
}
.steps .spot { width: 100%; max-width: 168px; height: auto; margin: -4px 0 18px -8px; pointer-events: none; }
.divider { display: block; width: min(560px, 80%); height: auto; margin: -56px auto 56px; opacity: .6; pointer-events: none; }
.faq { position: relative; overflow: hidden; }
.faq .wrap { position: relative; }
.corner { position: absolute; top: -24px; right: -36px; width: 260px; height: auto; opacity: .35; pointer-events: none; user-select: none; }
@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "video" "act"; row-gap: 32px; }
  .hero-head, .hero-actions { align-self: auto; }
  .hero .lede { margin-bottom: 0; }
  .hero-video { padding: 6px; border-radius: 16px; }
  .hero-video video { border-radius: 11px; }
}
@media (max-width: 760px) {
  .divider { margin: -32px auto 40px; }
  .corner { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .themes li:hover .shot, .themes li:has(:focus-visible) .shot { transform: none; }
  .themes .hint { transform: translate(-50%, 0); }
}

/* Per-language system fonts. Scoped by lang so Chinese pages never pick Japanese glyphs and vice versa
   (also for the language names in the menu, which carry their own lang attribute). */
:root:lang(zh-TW), .lang-menu [lang="zh-TW"], .lang-hint:lang(zh-TW) {
  --sans: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}
:root:lang(ja), .lang-menu [lang="ja"], .lang-hint:lang(ja) {
  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Hiragino Mincho ProN", "Yu Mincho", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, serif;
}
.lang-menu [lang], .lang-hint { font-family: var(--sans); }
:root:lang(zh-TW) body, :root:lang(ja) body { line-height: 1.8; }
:root:lang(zh-TW) .eyebrow, :root:lang(ja) .eyebrow { letter-spacing: 0.08em; }

/* Example section on desktop: the video column is the wide one and sticks, vertically centred, while the three steps scroll by at normal speed.
   No sticky below 1024px. Nothing up the tree may set overflow, or sticky stops working. clips.js marks the step at mid-screen (.on); purely cosmetic. */
@media (min-width: 1024px) {
  #example .wrap { max-width: 1360px; }
  .example-grid.has-clip { grid-template-columns: minmax(0, 1fr) minmax(0, 2.15fr); gap: 48px; align-items: start; }
  .example-grid.has-clip .steps { gap: 0; }
  .example-grid.has-clip .steps li { min-height: 50vh; min-height: 50svh; padding-bottom: 40px; }
  .example-grid.has-clip .steps li:last-child { min-height: 50vh; min-height: 50svh; }
  .js .example-grid.has-clip .steps li { opacity: .42; transition: opacity .3s ease; }
  .js .example-grid.has-clip .steps li.on { opacity: 1; }
  /* --fh is the frame height (16:10, column width, capped to the screen); the top offset centres it while it sticks. */
  .example-grid.has-clip .example-stage {
    --fh: min(calc((min(100vw, 1360px) - 96px) * 2.15 / 3.15 / 1.6), calc(100svh - 48px));
    position: sticky; top: max(24px, calc((100svh - var(--fh)) / 2));
  }
  .example-grid.has-clip .example-stage .frame { width: 100%; max-width: calc((100svh - 48px) * 1.6); margin: 0 auto; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .js .example-grid.has-clip .steps li { transition: none; }
}

/* Screens: six views behind tabs, one visible (and playing) at a time. Without JS the tab list hides and the panels stack. */
.tabs { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 40px; align-items: start; }
.tablist { display: flex; flex-direction: column; gap: 4px; padding-top: 4px; }
html:not(.js) .tablist { display: none; }
html:not(.js) .tabs { grid-template-columns: minmax(0, 1fr); gap: 56px; }
html:not(.js) .tabpanels { display: grid; gap: 56px; }
.tablist [role=tab] { display: flex; align-items: baseline; gap: 14px; width: 100%; padding: 14px 16px; border: 0; border-left: 3px solid var(--line); border-radius: 0 10px 10px 0; background: none; color: var(--ink-soft); font: inherit; font-family: var(--serif); font-size: 1.15rem; line-height: 1.3; text-align: left; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.tablist [role=tab] .lbl { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.tablist [role=tab] .num { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--muted); }
.tablist [role=tab]:hover { color: var(--ink); background: var(--paper-2); }
.tablist [role=tab][aria-selected=true] { color: var(--ink); border-left-color: var(--ink); background: var(--yellow-soft); }
.tablist [role=tab]:focus-visible { outline-offset: -3px; }
.tablist [role=tab] { position: relative; overflow: hidden; }
/* Progress of the open tab (tabs.js sets scaleX from the clip's time, or a timer on stills). */
.tab-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ink); transform: scaleX(0); transform-origin: left center; pointer-events: none; }
[dir=rtl] .tab-bar { transform-origin: right center; }
.tabpanel { margin: 0; }
.tabpanel .frame { aspect-ratio: 16 / 10; }
.tabpanel .frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.tabpanel figcaption { margin-top: 18px; max-width: 46em; }
.tabpanel figcaption strong { display: block; font-family: var(--serif); font-weight: 500; font-size: 1.35rem; }
.tabpanel figcaption span { color: var(--ink-soft); }
@media (max-width: 900px) {
  .tabs { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tablist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; }
  .tablist [role=tab] { padding: 10px 12px; gap: 8px; border: 1.5px solid var(--line); border-radius: 12px; font-size: 1rem; }
  .tablist [role=tab][aria-selected=true] { border-color: var(--ink); }
}
@media (min-width: 640px) and (max-width: 900px) { .tablist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Hand-drawn illustrations (640x480, transparent, drawing centred and small): shown in a 16:10 box and enlarged, so the drawing fills it. */
.illus { overflow: hidden; aspect-ratio: 16 / 10; display: grid; place-items: center; pointer-events: none; user-select: none; }
.illus img { width: 100%; height: auto; transform: scale(var(--z, 1.45)); }

/* Supports: illustrated cards, 3 / 2 / 1 columns. */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.card { display: flex; flex-direction: column; padding: 8px 28px 32px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; min-width: 0; }
.card .illus { margin: 0 -20px 8px; }
.card h3 { font-size: 1.18rem; margin-bottom: 10px; overflow-wrap: break-word; hyphens: auto; }
.card p { color: var(--ink-soft); font-size: 0.98rem; margin: 0; }
@media (max-width: 960px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phones: a small picture beside the heading and the text full width under both, so six cards don't make one very long column. */
@media (max-width: 600px) {
  .cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .card { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 10px 18px 18px 8px; }
  .card .illus { margin: 0; }
  .card h3 { font-size: 1.08rem; margin: 0; }
  .card p { grid-column: 1 / -1; padding-left: 10px; margin-top: 8px; font-size: 0.93rem; line-height: 1.6; }
}
}

/* Trust: numbered rows, picture and text swap sides row by row. */
.rows { list-style: none; margin: 0; padding: 0; counter-reset: row; }
.rows li { counter-increment: row; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; padding: 28px 0; border-top: 1px solid var(--line); }
.rows li:last-child { border-bottom: 1px solid var(--line); }
.rows li:nth-child(even) .illus { order: 2; }
.rows .illus { max-width: 400px; width: 100%; justify-self: center; }
.rows .row-text { max-width: 36em; }
.rows .row-text::before { content: counter(row, decimal-leading-zero); display: block; font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 10px; }
.rows h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); margin-bottom: 10px; overflow-wrap: break-word; hyphens: auto; }
.rows p { color: var(--ink-soft); margin: 0; }
@media (max-width: 760px) {
  .rows li { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 24px 0 28px; }
  .rows li:nth-child(even) .illus { order: 0; }
  .rows .illus { max-width: 300px; }
}

/* Why ShipPress: how it works leads (dark block, big numbers); the core principles follow as small illustrated cards. */
.how { background: var(--ink); color: var(--paper); border-radius: 24px; padding: 56px 56px 40px; }
.how > h3 { color: var(--yellow); font-family: var(--mono); font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 12px; }
.how-list { list-style: none; margin: 0; padding: 0; counter-reset: how; }
.how-list li { counter-increment: how; position: relative; padding: 26px 0 26px 120px; min-height: 104px; border-top: 1px solid rgba(250,248,243,.16); color: #c9cecb; font-size: 1.02rem; }
.how-list li:first-child { border-top: 0; }
.how-list li::before { content: counter(how, decimal-leading-zero); position: absolute; left: 0; top: 24px; font-family: var(--serif); font-size: clamp(2.6rem, 4.4vw, 3.6rem); line-height: 1; color: var(--yellow); }
.how-list strong { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(1.35rem, 2.2vw, 1.85rem); line-height: 1.25; color: var(--paper); margin-bottom: 8px; overflow-wrap: break-word; hyphens: auto; }
.principles { margin-top: 56px; }
.principles > h3 { font-size: 1.3rem; margin-bottom: 20px; }
.principles-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.principles-list li { padding: 0 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); min-width: 0; }
.principles-list .illus { margin: 0 -14px 4px; }
.principles-list p { margin: 0; font-size: 0.93rem; color: var(--ink-soft); }
.principles-list strong { display: block; color: var(--ink); font-family: var(--serif); font-weight: 500; font-size: 1.08rem; margin-bottom: 4px; overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 960px) { .principles-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .how { padding: 36px 22px 20px; border-radius: 18px; }
  .how-list li { padding: 22px 0; min-height: 0; }
  .how-list li::before { position: static; display: block; margin-bottom: 10px; }
  .principles-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .principles-list li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 16px 12px 4px; }
  .principles-list .illus { margin: 0; }
}
.illus img[src$="trust-page.webp"] { --z: 2.1; }
.illus img[src$="supports-host-direct.webp"] { --z: 1.3; }
.illus img[src$="supports-no-host.webp"], .illus img[src$="principle-hosting.webp"], .illus img[src$="trust-local.webp"] { --z: 1.65; }
.cards + .hosts-note { margin-top: 28px; }