/* OD-LAYOUT-PRIMITIVES v1 — structure only: display, flex/grid, overflow, wrapping, ratio, geometry.
   Put this @layer first; product CSS outside the layer wins ordinary layout rules.
   Native hidden and closed-dialog states take precedence over component display rules. */
@layer od-layout {
  [hidden]:not([hidden="until-found" i]) { display: none !important; }
  dialog:not([open]) { display: none !important; }

  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }

  /* containers */
  .od-stack   { display: flex; flex-direction: column; gap: var(--od-gap, 8px); }
  .od-row     { display: flex; align-items: center; gap: var(--od-gap, 8px); }
  .od-row-top { display: flex; align-items: flex-start; gap: var(--od-gap, 8px); }
  .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, 8px); }
  .od-fill    { flex: 1 1 0; min-width: 0; }
  .od-fixed   { flex: none; }
  .od-grid    { display: grid; gap: var(--od-gap, 12px); grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr)); }

  /* stacked information: each piece is its own line — never sibling inline spans */
  .od-stat, .od-field, .od-cell { display: grid; gap: var(--od-gap, 2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display: block; }
  .od-tile { display: grid; grid-template-rows: auto 1fr; }
  :where(.od-tile) > :where(*) { display: block; }

  /* media keeps its intrinsic ratio by default; never a distorted or cropped
     cover by accident. height:auto lets the ratio win over an <img height="…">
     attribute. Cropping to a uniform box is an explicit opt-in: set --od-ratio
     AND add .od-media-cover together (per the core rule, only where a crop is
     deliberate — tile thumbs, decorative fills — never on full-frame content). */
  .od-media { display: block; width: 100%; height: auto; aspect-ratio: var(--od-ratio, auto); }
  .od-media-cover { object-fit: cover; }

  /* functional inline SVG icons opt into bounded geometry; content SVGs keep their own */
  .od-icon { display: inline-block; inline-size: var(--od-icon-size, 1em); block-size: var(--od-icon-size, 1em); flex: none; }

  /* data text only — authored copy is rewritten to its budget instead */
  .od-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .od-clamp-2, .od-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .od-clamp-2 { -webkit-line-clamp: 2; }
  .od-clamp-3 { -webkit-line-clamp: 3; }
  .od-lines-2 { min-height: calc(2 * 1.4em); }   /* block-level reservation for a shared baseline */
  .od-nowrap  { white-space: nowrap; }           /* 数字+单位 · 价格+起 · 日期+星期 */
  .od-keep    { word-break: keep-all; overflow-wrap: anywhere; } /* CJK labels break at spaces / <wbr> first */

  /* screen skeleton (optional): bars take their own space, the middle scrolls — no padding guessed for chrome */
  .od-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
  .od-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }

  /* horizontal rail: the next item peeks at the edge; trailing room survives overflow */
  .od-rail { display: flex; gap: var(--od-gap, 8px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
             padding-inline: var(--od-rail-pad, 16px); scroll-padding-inline: var(--od-rail-pad, 16px); }
  .od-rail::-webkit-scrollbar { display: none; }
  :where(.od-rail) > :where(*) { flex: none; scroll-snap-align: start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end: var(--od-rail-pad, 16px); }

  .od-spacer { flex: none; visibility: hidden; pointer-events: none; }
  .od-touch  { min-width: 44px; min-height: 44px; }
}
:root [hidden]:where(:not([hidden="until-found" i])) { display: none; }
/* /OD-LAYOUT-PRIMITIVES v1 */

:root {
  --navy:#171717; --blue:#171717; --blue-hover:#000000; --ink:#171717;
  --muted:#616161; --line:#e2e2e2; --paper:#ffffff; --mist:#f7f7f7;
  --tint:#f1f1f1; --teal:#616161; --disabled:#eeeeee;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --small:14px; --body:16px; --lead:18px; --h2:clamp(30px,3.2vw,40px); --h1:clamp(40px,5.4vw,72px);
  --radius:8px; --pill:999px; --speed:180ms;
  --on-action:#ffffff; color-scheme:light;
}
:root[data-theme="dark"] {
  --navy:#ededed; --blue:#ededed; --blue-hover:#ffffff; --ink:#ededed;
  --muted:#ababab; --line:#383838; --paper:#0b0b0b; --mist:#141414;
  --tint:#242424; --teal:#ababab; --disabled:#232323;
  --on-action:#111111; color-scheme:dark;
}
@media(prefers-color-scheme:dark) {
  :root:not([data-theme]) {
  --navy:#ededed; --blue:#ededed; --blue-hover:#ffffff; --ink:#ededed;
  --muted:#ababab; --line:#383838; --paper:#0b0b0b; --mist:#141414;
  --tint:#242424; --teal:#ababab; --disabled:#232323;
  --on-action:#111111; color-scheme:dark;
  }
}
* { box-sizing:border-box; }
html { scroll-padding-top:112px; }
body { margin:0; color:var(--ink); background:var(--paper); font:var(--body)/1.65 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3,.brand-title { font-family:'Avenir Next','Trebuchet MS',sans-serif; }
h1,h2,h3 { line-height:1.18; letter-spacing:-.035em; }
h1 { font-size:var(--h1); font-weight:500; max-width:18ch; margin-inline:auto; line-height:1.08; letter-spacing:-.055em; text-wrap:balance; }
h2 { font-size:var(--h2); font-weight:500; text-wrap:balance; }
h3 { font-size:20px; font-weight:600; letter-spacing:-.02em; }
p { max-width:70ch; }
a { color:var(--blue); text-underline-offset:4px; }
button,a,summary { -webkit-tap-highlight-color:transparent; }
a,summary { cursor:pointer; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--blue); outline-offset:5px; }
button { font:inherit; }
.wrap { width:min(1184px,calc(100% - 96px)); margin-inline:auto; }
.skip { position:fixed; top:8px; left:8px; padding:12px 20px; background:var(--paper); z-index:10; transform:translateY(-180%); }
.skip:focus { transform:translateY(0); }
.site-header { position:sticky; top:0; z-index:5; background:var(--paper); border-bottom:1px solid var(--line); }
.header-row { display:flex; align-items:center; justify-content:space-between; gap:var(--s6); min-height:88px; }
.brand { color:var(--navy); text-decoration:none; flex-shrink:0; }
.brand-title { font-size:20px; font-weight:650; letter-spacing:-.04em; }
.brand-sub { font-size:var(--small); color:var(--muted); }
nav { display:flex; align-items:center; gap:var(--s5); }
nav a { text-decoration:none; color:var(--ink); font-size:var(--small); padding-block:var(--s3); }
.header-webmail { flex-shrink:0; }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; flex:none; width:44px; height:44px; padding:0; border:1px solid var(--line); border-radius:var(--pill); background:var(--paper); color:var(--ink); cursor:pointer; }
.theme-toggle[aria-pressed="true"] { background:var(--tint); }
@media(hover:hover) { .theme-toggle:hover { background:var(--tint); } }
.btn { display:inline-flex; justify-content:center; align-items:center; gap:var(--s3); min-height:48px; padding:12px 24px; border:1px solid var(--blue); border-radius:var(--pill); color:var(--on-action); background:var(--blue); text-decoration:none; font-size:var(--body); font-weight:600; line-height:1.5; transition:background var(--speed) ease-out; }
.btn-outline { background:var(--paper); color:var(--navy); border-color:var(--line); }
.btn:disabled { color:var(--muted); background:var(--disabled); border-color:var(--line); cursor:not-allowed; }
.od-icon { --od-icon-size:20px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
@media(hover:hover) { a:hover { color:var(--blue-hover); } nav a:hover { text-decoration:underline; } .btn:hover { background:var(--blue-hover); color:var(--on-action); } .btn-outline:hover { background:var(--tint); color:var(--navy); } .btn:disabled:hover { background:var(--disabled); color:var(--muted); } summary:hover { color:var(--blue-hover); } }
.hero { padding-top:var(--s9); padding-bottom:var(--s8); display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s8); align-items:center; }
.hero-copy { text-align:center; min-width:0; }
.eyebrow { display:table; max-width:100%; margin:0 auto var(--s5); padding:4px 16px; border:1px solid var(--line); border-radius:var(--pill); color:var(--muted); font-size:12px; font-weight:500; letter-spacing:.02em; }
.hero-description { color:var(--muted); font-size:var(--lead); margin:var(--s5) auto 0; max-width:56ch; text-wrap:pretty; }
.hero-description strong { color:var(--ink); font-weight:500; }
.hero-actions { --od-gap:24px; margin-top:var(--s6); justify-content:center; }
.text-link { display:inline-flex; align-items:center; gap:var(--s2); font-weight:600; min-height:48px; }
.hero-note { font-size:var(--small); color:var(--muted); margin:var(--s5) auto 0; }
.mobile-note { display:none; }
.app-stage { width:min(100%,960px); margin-inline:auto; }
.window { background:var(--mist); border:1px solid var(--line); border-radius:12px; }
.window-top { min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:var(--s4); padding:var(--s3) var(--s5); border-bottom:1px solid var(--line); }
.window-name { font-size:var(--small); font-weight:600; color:var(--navy); }
.window-mark { font-size:12px; color:var(--muted); letter-spacing:.12em; }
.screen-placeholder { min-height:336px; padding:var(--s6); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:var(--s4); }
.placeholder-icon { --od-icon-size:56px; color:var(--muted); stroke-width:1; }
.placeholder-title { font-size:var(--lead); font-weight:600; color:var(--navy); }
.placeholder-copy { font-size:var(--small); max-width:40ch; color:var(--muted); }
.app-stage figcaption { display:flex; align-items:center; justify-content:space-between; gap:var(--s4); font-size:12px; color:var(--muted); padding-top:var(--s4); }
figcaption span { display:block; }
.webmail-strip { display:flex; align-items:center; justify-content:space-between; gap:var(--s5); padding:var(--s6) 0; border-top:1px solid var(--line); margin-bottom:var(--s6); }
.webmail-strip strong { font-weight:600; }
.webmail-strip p { color:var(--muted); font-size:var(--small); margin-top:var(--s1); }
.webmail-strip a { flex-shrink:0; }
.section { padding-block:var(--s9); border-top:1px solid var(--line); }
.section-kicker { display:block; color:var(--muted); font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:500; margin-bottom:var(--s5); }
.intro-grid { display:grid; grid-template-columns:1fr 1.25fr; gap:var(--s8); }
.section-lead { font-size:var(--lead); color:var(--muted); margin-top:var(--s5); }
.benefits { display:grid; gap:var(--s6); }
.benefit { display:grid; grid-template-columns:40px 1fr; gap:var(--s4); }
.benefit-number { color:var(--teal); font-size:var(--small); padding-top:var(--s1); }
.benefit p { color:var(--muted); margin-top:var(--s2); }
.download-section { background:var(--paper); }
.section-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s6); margin-bottom:var(--s6); }
.section-heading p { color:var(--muted); margin-top:var(--s4); }
.badge { display:inline-flex; align-items:center; gap:var(--s2); background:var(--paper); border:1px solid var(--line); border-radius:4px; font-size:12px; font-weight:600; padding:8px 12px; color:var(--muted); flex-shrink:0; }
.download-grid { display:grid; grid-template-columns:1.6fr 1fr; gap:var(--s8); align-items:start; }
.download-card { padding-block:var(--s6); border-top:1px solid var(--line); }
.recommendation { display:flex; justify-content:space-between; align-items:flex-start; gap:var(--s5); }
.recommendation .od-icon { --od-icon-size:40px; color:var(--blue); }
.recommendation h3 { font-size:24px; margin-block:var(--s3); }
.overline { font-size:12px; letter-spacing:.1em; color:var(--teal); font-weight:700; text-transform:uppercase; }
.recommendation p { font-size:var(--small); color:var(--muted); }
.download-card .download-action { margin-top:var(--s5); }
.release-fields { display:grid; gap:var(--s3); margin:var(--s5) 0 0; padding:var(--s5) 0 0; border-top:1px solid var(--line); }
.release-fields div { display:grid; grid-template-columns:100px 1fr; gap:var(--s4); font-size:var(--small); }
.release-fields dt { color:var(--ink); }
.release-fields dd { margin:0; color:var(--muted); }
.mockup-note { font-size:var(--small); color:var(--muted); margin-top:var(--s4); }
.help-card { padding-block:var(--s6); border-top:1px solid var(--line); }
.help-card h3 { margin-bottom:var(--s4); }
.help-card p { font-size:var(--body); color:var(--muted); }
.help-card .text-link { margin-top:var(--s4); }
.platforms { margin-top:var(--s6); border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper); }
.platforms summary { padding:var(--s5) 0; color:var(--ink); font-weight:600; }
.platforms[open] summary { border-bottom:1px solid var(--line); }
.platform-list { padding:0; }
.platform-row { display:flex; justify-content:space-between; align-items:center; gap:var(--s5); padding-block:var(--s5); border-bottom:1px solid var(--line); }
.platform-row:last-child { border:0; }
.platform-row strong { font-weight:600; }
.platform-row .platform-detail { color:var(--muted); font-size:var(--small); }
.platform-row .btn { font-size:var(--small); min-width:176px; }
.match { color:var(--teal); font-size:12px; font-weight:600; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s7); margin-top:var(--s7); }
.step-number { display:flex; width:40px; height:40px; align-items:center; color:var(--muted); font-size:var(--small); margin-bottom:var(--s4); }
.step p { color:var(--muted); margin-top:var(--s3); }
.install-notes { margin-top:var(--s6); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.install-notes summary { padding-block:var(--s5); font-weight:600; }
.install-notes p { color:var(--muted); padding-bottom:var(--s5); }
.support { color:var(--ink); padding-block:var(--s8); border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr; gap:var(--s8); margin-bottom:var(--s6); }
.support .section-kicker { color:var(--muted); }
.support p { color:var(--muted); margin-top:var(--s4); }
.support a { color:var(--ink); }
.support-contact { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:var(--s4); }
.support .btn { color:var(--ink); background:var(--paper); border-color:var(--line); }
@media(hover:hover) { .support .btn:hover { color:var(--ink); background:var(--tint); } }
.support .contact-address { font-size:var(--lead); overflow-wrap:anywhere; }
.support-contact p { margin:0; font-size:var(--small); }
footer { border-top:1px solid var(--line); padding-block:var(--s6); }
.footer-row { display:flex; justify-content:space-between; align-items:center; gap:var(--s5); }
.footer-row strong { font-size:var(--body); font-weight:600; }
.footer-row p { font-size:var(--small); color:var(--muted); }
.footer-links { display:flex; gap:var(--s5); }
.footer-links a { font-size:var(--small); min-height:44px; display:flex; align-items:center; }
.pending-message { margin-top:var(--s4); color:var(--muted); }
.pending-status { display:inline-flex; align-items:center; gap:var(--s2); font-size:var(--small); color:var(--muted); padding:12px 16px; background:var(--mist); border:1px solid var(--line); border-radius:var(--pill); }
@media(max-width:1023px) {
  .wrap { width:calc(100% - 64px); }
  .header-row { gap:var(--s4); flex-wrap:wrap; padding-block:var(--s4); }
  nav { order:3; width:100%; justify-content:center; }
  .header-webmail { margin-left:auto; }
  .hero { padding-top:var(--s8); }
  .intro-grid,.download-grid,.support { gap:var(--s7); }
  html { scroll-padding-top:176px; }
}
@media(max-width:767px) {
  .wrap { width:calc(100% - 40px); }
  .header-row { column-gap:var(--s2); row-gap:var(--s3); min-height:auto; padding:var(--s4) 0 0; }
  .brand-title { font-size:17px; }
  .brand-sub { font-size:12px; }
  .header-webmail { min-height:44px; padding:8px 12px; font-size:12px; gap:var(--s2); }
  .header-webmail .od-icon { --od-icon-size:16px; }
  nav { gap:var(--s2); justify-content:space-between; flex-wrap:wrap; }
  nav a { font-size:13px; min-height:48px; }
  .hero { padding-top:var(--s8); padding-bottom:var(--s7); gap:var(--s7); }
  h1 { max-width:16ch; }
  .hero-description { font-size:var(--body); }
  .hero-actions { margin-top:var(--s5); gap:var(--s3); }
  .hero-note { font-size:13px; }
  .mobile-note { display:block; }
  .desktop-note { display:none; }
  .screen-placeholder { min-height:240px; padding:var(--s5); }
  .app-stage figcaption { font-size:12px; flex-wrap:wrap; gap:var(--s1); }
  .webmail-strip { padding-block:var(--s5); flex-direction:column; align-items:flex-start; gap:var(--s2); margin-bottom:var(--s5); }
  .section { padding-block:var(--s7); }
  .intro-grid,.download-grid,.support { grid-template-columns:minmax(0,1fr); }
  .intro-grid { gap:var(--s6); }
  .section-heading { flex-direction:column; gap:var(--s4); }
  .download-grid { gap:var(--s3); }
  .download-card,.help-card { padding-block:var(--s5); }
  .platform-row { flex-wrap:wrap; gap:var(--s4); }
  .platform-row .btn { width:100%; }
  .steps { grid-template-columns:1fr; gap:var(--s6); margin-top:var(--s6); }
  .step { display:grid; grid-template-columns:24px 1fr; column-gap:var(--s4); }
  .step-number { grid-row:1/3; width:auto; margin:0; }
  .step h3 { align-self:center; }
  .step p { grid-column:2; }
  .support { padding-block:var(--s7); gap:var(--s6); margin-bottom:0; }
  .support-contact .contact-address { font-size:var(--body); }
  .footer-row { align-items:flex-start; flex-direction:column; }
  .footer-links { flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important; scroll-behavior:auto!important; } }

#recommended-download { margin-block:24px; gap:12px; }
.installation-copy p { margin-bottom:16px; }
.platform-links { display:flex; flex-wrap:wrap; gap:12px; }