/* ============================================================================
   ChronoSet — promo site styles
   Single stylesheet. Light/dark via CSS custom properties on <html data-theme>.
   No external fonts; optimised local image assets only. System font stack.
   ============================================================================ */

/* ---- Design tokens -------------------------------------------------------- */

:root {
  /* Light theme (default). Warm paper + deep navy/teal ink — echoes a navy dial. */
  --bg:            #f4f3ef;
  --bg-elev:       #ffffff;
  --surface:       #ffffff;
  --surface-2:     #efeee9;
  --text:          #171a21;
  --text-muted:    #565d6d;
  --text-faint:    #5f6676;   /* 4.95:1 on the darkest light surface — was #8a909e, 2.8:1 */
  --border:        rgba(23, 26, 33, 0.10);
  --border-strong: rgba(23, 26, 33, 0.18);
  --toggle-bg:     #6b6d6a;   /* the theme button, as in the app: a grey disc with a white glyph — sampled from the app capture */
  --toggle-fg:     #ffffff;   /* 5.2:1 on the disc */
  --accent:        #0c5c73;   /* deep teal-navy */
  --accent-ink:    #ffffff;   /* text on accent */
  --lume:          #b7a86a;   /* warm cream lume, light mode */
  --second:        #c8641e;   /* orange second-hand tail */
  --shadow:        0 1px 2px rgba(23,26,33,.06), 0 8px 30px rgba(23,26,33,.08);
  --shadow-lift:   0 2px 6px rgba(23,26,33,.10), 0 20px 50px rgba(23,26,33,.14);
  --dial-bg:       #1c2740;   /* navy dial in light mode */
  --dial-ink:      #eef1f6;
  --case:          #d9d7cf;   /* steel case ring */
  --case-2:        #b6b3a8;
  --glow:          transparent;
  color-scheme: light;

  --maxw: 1120px;
  --radius: 16px;
  --radius-lg: 26px;
  --ease: cubic-bezier(.2,.7,.2,1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
          Helvetica, Arial, sans-serif;
}

html[data-theme="dark"] {
  /* Dark theme — near-black with glowing cyan lume + orange accent. The signature look. */
  --bg:            #07080a;
  --bg-elev:       #0e1014;
  --surface:       #101319;
  --surface-2:     #171b22;
  --text:          #e9ebef;
  --text-muted:    #a2a9b7;
  --text-faint:    #868d9c;   /* 5.2:1 on the lightest dark surface — was #6b7280, 3.6:1 */
  --border:        rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --toggle-bg:     #8f8f8f;   /* the app's dark-mode theme button: a lighter grey disc with a near-black glyph */
  --toggle-fg:     #010101;   /* 6.5:1 on the disc */
  --accent:        #00e5cc;   /* cyan lume */
  --accent-ink:    #05201d;
  --lume:          #00e5cc;
  --second:        #f5a623;
  --shadow:        0 1px 2px rgba(0,0,0,.5), 0 8px 30px rgba(0,0,0,.55);
  --shadow-lift:   0 2px 8px rgba(0,0,0,.6), 0 24px 60px rgba(0,0,0,.7);
  --dial-bg:       #050607;   /* black dial */
  --dial-ink:      #d7dbe2;
  --case:          #2a2f38;
  --case-2:        #1a1e25;
  --glow:          0 0 14px rgba(0,229,204,.55);
  color-scheme: dark;
}

/* ---- Reset-ish ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
/* Smooth scrolling only once the visitor has interacted (a click on an in-page link puts focus inside
   <html>). Set unconditionally it broke deep links: loading /#contact stayed at the top, because the
   browser's smooth jump to the fragment is abandoned when lazy-loaded images shift the layout. */
@media (prefers-reduced-motion: no-preference) { html:focus-within { scroll-behavior: smooth; } }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 1.0625rem;   /* 17px at the default size, but follows the user's setting */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .4s var(--ease), color .4s var(--ease);
}

h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; font-weight: 650; margin: 0; }
h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h3 { font-size: 1.15rem; letter-spacing: -0.01em; }
p  { margin: 0 0 1rem; }
a  { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* Skip link: first thing in the tab order, visible only while it has focus. */
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 2000; padding: .7rem 1.1rem;
  background: var(--accent); color: var(--accent-ink); font-weight: 600; border-radius: 10px;
}
.skip-link:focus { top: 1rem; text-decoration: none; }
img, svg { max-width: 100%; display: block; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--accent);
}

/* ---- Layout --------------------------------------------------------------- */

.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.section-head { max-width: 46ch; margin-bottom: 2.75rem; }
/* Even line lengths: no one-word last line ("…light and / dark."). Ignored where unsupported. */
.section-head h2 { text-wrap: balance; }
.section-head p { color: var(--text-muted); font-size: 1.08rem; margin: .6rem 0 0; }

/* ---- Header / nav --------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid var(--border);
}
.nav { display: flex; align-items: center; gap: 1.5rem; height: 62px; }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 700;
  letter-spacing: -.01em; color: var(--text); font-size: 1.06rem; }
.brand:hover { text-decoration: none; }
.brand-mark { height: 22px; width: auto; display: block; }
.brand-mark-dark { display: none; }
html[data-theme="dark"] .brand-mark-light { display: none; }
html[data-theme="dark"] .brand-mark-dark  { display: block; }
.nav-links { display: flex; gap: 1.4rem; margin-left: auto; }
.nav-links a { color: var(--text-muted); font-size: .95rem; font-weight: 500; }
.nav-links a:hover { color: var(--text); text-decoration: none; }

.theme-toggle {
  appearance: none; border: 1px solid transparent; background: var(--toggle-bg);
  color: var(--toggle-fg); width: 40px; height: 40px; border-radius: 999px; cursor: pointer;
  display: grid; place-items: center; transition: transform .3s var(--ease), background-color .3s;
}
.theme-toggle:hover { transform: rotate(-12deg); }
.theme-toggle svg { width: 20px; height: 20px; }
/* The button matches the app's own toggle: a solid grey disc (--toggle-bg) with a filled moon / sun (moon.fill / sun.max.fill).
   The SVGs are drawn as strokes (fill="none") so the
   sun's rays keep their round caps; the moon and the sun's disc are filled here, and the moon's outline is thinned so the
   crescent does not swell. */
.theme-toggle .i-moon { fill: currentColor; stroke-width: 1.5; }
.theme-toggle .i-sun circle { fill: currentColor; }
.theme-toggle, .lang-menu { flex: none; }
.theme-toggle .i-sun { display: none; }
html[data-theme="dark"] .theme-toggle .i-sun  { display: block; }
html[data-theme="dark"] .theme-toggle .i-moon { display: none; }

.lang-menu { position: relative; }
.lang-menu summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .45rem;
  height: 40px; padding: 0 .8rem 0 .9rem; border-radius: 999px; user-select: none;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font-size: .85rem; font-weight: 600; transition: border-color .3s;
}
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px; flex: none;
  border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg); transition: transform .2s var(--ease);
}
.lang-menu[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
.lang-menu summary:hover { border-color: var(--accent); }
.lang-menu ul {
  list-style: none; margin: 0; padding: .35rem; position: absolute; right: 0; top: calc(100% + .5rem);
  min-width: 10rem; z-index: 60; background: var(--bg-elev); border: 1px solid var(--border-strong);
  border-radius: 14px; box-shadow: var(--shadow-lift);
}
.lang-menu li a {
  display: block; padding: .6rem .8rem; border-radius: 9px; color: var(--text);
  font-size: .95rem; font-weight: 500;
}
.lang-menu li a:hover { background: var(--surface-2); text-decoration: none; }
.lang-menu li a[aria-current="true"] { color: var(--accent); font-weight: 700; }

@media (max-width: 620px) { .nav-links { display: none; } }

/* ---- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 600;
  padding: .8rem 1.35rem; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s, background-color .2s;
  font-size: .98rem;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); }
.btn-primary:hover { box-shadow: var(--shadow-lift); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); }

/* "Coming soon" placeholder — plain text, not a store badge, until there is a real listing to
   point at. Not a link either: a <span>, so there is no dead control to tab to or tap. */
.coming-soon-badge {
  display: inline-flex; align-items: center; padding: .7rem 1.2rem;
  border-radius: 14px; background: var(--text); color: var(--bg);
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .82rem;
  opacity: .78; cursor: default;
}

/* ---- Hero ----------------------------------------------------------------- */

.hero { padding-top: clamp(3rem, 7vw, 5rem); padding-bottom: clamp(1rem, 3vw, 2rem); }
/* Tightens just this one boundary — the section immediately after the hero has its own
   generous top padding by default (the base `section` rule), which is right for every other
   section-to-section gap on the page but left too much dead air directly under the hero. */
.hero + section { padding-top: clamp(1rem, 3vw, 2rem); }
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero h1 { margin-bottom: 1.1rem; }
.hero .lede { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--text-muted); max-width: 34ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; margin-top: 1.8rem; }
.hero-art { display: grid; place-items: center; position: relative; }
.hero-art .glow-bg {
  /* inset 0, not a negative bleed past hero-art's own box — it used to spill -10% on three
     sides, which was the reason `.hero` needed `overflow: hidden` to avoid a horizontal-scroll
     risk on narrow viewports. That clipping caught the phone's own drop-shadow filter too
     (filter output isn't layout content, but overflow:hidden clips it all the same), flattening
     it against the hero's edges. The blur(20px) already softens this glow enough that a same-box
     inset reads the same. */
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(60% 55% at 60% 40%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
  filter: blur(20px); opacity: .8; pointer-events: none;
}
.hero-art .phone { position: relative; z-index: 1; }

@media (max-width: 820px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero .lede { margin-inline: auto; }
  .hero-cta { justify-content: center; }
  .hero-art { order: -1; }
}

/* ---- App screenshots ------------------------------------------------------ */

.theme-shot { display: block; }
.theme-shot-dark { display: none; }
html[data-theme="dark"] .theme-shot-light { display: none; }
html[data-theme="dark"] .theme-shot-dark { display: block; }

.hero-device {
  width: min(320px, 72vw); position: relative; z-index: 1;
  filter: drop-shadow(0 24px 45px rgba(23,26,33,.18));
}
html[data-theme="dark"] .hero-device { filter: drop-shadow(0 28px 55px rgba(0,0,0,.65)); }
.hero-device img { width: 100%; height: auto; }

/* Gallery cards */
.gallery {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1.4rem;
}
.face-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.6rem 1rem 1.2rem; text-align: center; box-shadow: var(--shadow);
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.face-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--border-strong); }
.face-card .watch { width: 150px; margin: 0 auto .9rem; }
.face-shot { width: 170px; aspect-ratio: 1; margin: 0 auto .9rem; }
.face-shot img { width: 100%; height: 100%; object-fit: contain; }
.face-card h3 { margin-bottom: .15rem; }
.face-card p { color: var(--text-muted); font-size: .9rem; margin: 0; }

/* ---- Features ------------------------------------------------------------- */

.features-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.2rem;
}
.feature {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.5rem; transition: border-color .3s, transform .3s var(--ease);
}
.feature:hover { border-color: var(--border-strong); transform: translateY(-3px); }
.feature .ficon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent);
  margin-bottom: 1rem;
}
.feature .ficon svg { width: 24px; height: 24px; }
.feature h3 { margin-bottom: .4rem; }
.feature p { color: var(--text-muted); font-size: .95rem; margin: 0; }

/* ---- Premium showcase ------------------------------------------------------ */

.premium-showcase { padding-top: clamp(3rem, 7vw, 5.5rem); }
.premium-gallery { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.premium-card { padding-top: 1.35rem; }
.premium-visual {
  width: 150px; aspect-ratio: 1; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center;
  color: var(--accent);
  background:
    radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface) 82%, var(--bg-elev));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
}
.premium-visual svg { width: 106px; height: 106px; }

/* ---- Display time: StandBy vs Desk Stand Mode ------------------------------------ */

.display-time { padding-top: clamp(3rem, 7vw, 5.5rem); }
.compare-wrap { max-width: 820px; overflow-x: auto; }
.compare {
  width: 100%; border-collapse: separate; border-spacing: 0; font-size: 1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden;
}
.compare th, .compare td { padding: 1rem 1.2rem; text-align: center; vertical-align: middle; }
.compare thead th {
  font-size: .95rem; font-weight: 700; color: var(--text); background: var(--surface-2);
  border-bottom: 1px solid var(--border-strong);
}
.compare tbody th { text-align: left; font-weight: 600; color: var(--text); }
.compare tbody td { color: var(--text-muted); }
.compare tbody tr + tr > * { border-top: 1px solid var(--border); }
.compare thead th:first-child { text-align: left; }
/* Short cells wrap evenly. (word-break: auto-phrase was tried for Japanese and made the table overflow.) */
.compare th, .compare td { text-wrap: balance; }
:lang(ja) .compare tbody th { white-space: nowrap; }   /* short labels; never split a word like セキュリティ */
@media (max-width: 520px) {
  .compare th, .compare td { padding: .8rem .65rem; font-size: .92rem; }
}

/* ---- Signature Collection -------------------------------------------------- */

.signature-section { background: var(--bg-elev); border-block: 1px solid var(--border); }
.signature-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.2rem;
}
.signature-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.5rem 1.25rem; text-align: center; box-shadow: var(--shadow);
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.signature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--border-strong); }
.signature-lockup {
  min-height: 112px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .7rem;
  margin-bottom: .8rem;
}
.signature-mark { width: 54px; height: 54px; object-fit: contain; }
.signature-word { width: min(145px, 86%); height: 34px; object-fit: contain; }
.signature-card p { color: var(--text-muted); font-size: .9rem; margin: 0; }
.signature-note { text-align: center; color: var(--text-faint); font-size: .96rem; margin: 1.6rem auto 0; }

/* ---- Accessibility strip --------------------------------------------------- */

.accessibility-strip { text-align: center; padding-block: 1.4rem; }
.accessibility-strip p { color: var(--text-muted); font-size: 1rem; max-width: 62ch; margin-inline: auto; }

/* ---- Packs ---------------------------------------------------------------- */

.packs { background: var(--bg-elev); border-block: 1px solid var(--border); }
.packs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.4rem; }
.pack {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.8rem; display: flex; flex-direction: column;
  box-shadow: var(--shadow);
}
.pack.featured { border-color: var(--accent); box-shadow: var(--shadow-lift); }
.pack-badge {
  position: absolute; top: -.7rem; right: 1.4rem;
  background: var(--accent); color: var(--accent-ink); font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; padding: .28rem .7rem; border-radius: 999px;
}
.pack .pack-icon {
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent);
  margin-bottom: 1rem;
}
.pack .pack-icon svg { width: 26px; height: 26px; }
.pack h3 { font-size: 1.3rem; }
.pack .price { font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; margin: .4rem 0 .8rem; }
.pack .price small { font-size: .8rem; font-weight: 500; color: var(--text-faint); letter-spacing: 0; }
.pack p { color: var(--text-muted); font-size: .95rem; }
.pack ul { list-style: none; padding: 0; margin: .4rem 0 0; }
.pack li { display: flex; gap: .55rem; align-items: flex-start; font-size: .92rem;
  color: var(--text-muted); padding: .3rem 0; }
.pack li svg { width: 17px; height: 17px; color: var(--accent); flex: none; margin-top: .22rem; }
.packs-note { text-align: center; color: var(--text-faint); font-size: .93rem; margin-top: 1.6rem; }

/* ---- Privacy summary ------------------------------------------------------ */

.privacy-cta {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.5rem; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.8rem 2rem; box-shadow: var(--shadow);
}
.privacy-cta .shield {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); flex: none;
}
.privacy-cta .shield svg { width: 28px; height: 28px; }
.privacy-cta h2 { font-size: 1.15rem; letter-spacing: -0.01em; margin-bottom: .3rem; }
.privacy-cta p { margin: 0; color: var(--text-muted); font-size: .96rem; }
@media (max-width: 680px) {
  .privacy-cta { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}

/* ---- Contact -------------------------------------------------------------- */

.contact { text-align: center; }
.contact .section-head { margin-inline: auto; }
.contact-email {
  display: inline-block; font-size: clamp(1.2rem, 3vw, 1.7rem); font-weight: 650;
  letter-spacing: -.02em; margin-top: .4rem;
}

/* ---- Footer --------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border); padding: 2.5rem 0; color: var(--text-faint);
  font-size: .88rem;
}
.footer-row { display: flex; flex-wrap: wrap; gap: 1rem 1.6rem; align-items: center; }
.footer-row .brand { color: var(--text); font-size: 1rem; }
.footer-links { margin-left: auto; display: flex; gap: 1.4rem; }
.footer-links a, .footer-lang a { color: var(--text-faint); display: inline-block; padding: .35rem 0; }
.footer-links a:hover, .footer-lang a:hover { color: var(--text); text-decoration: none; }
.footer-lang { display: flex; flex-wrap: wrap; gap: 0 1.1rem; }
.footer-lang a[aria-current="true"] { color: var(--text); font-weight: 600; }

/* ---- Legal / privacy page ------------------------------------------------- */

.legal { padding-top: clamp(2.5rem, 6vw, 4rem); }
.legal .wrap { max-width: 760px; }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: .5rem; }
.legal .updated { color: var(--text-faint); font-size: .9rem; margin-bottom: 2.5rem; }
.legal h2 { font-size: 1.5rem; margin: 2.5rem 0 .8rem; }
.legal h3 { margin: 1.6rem 0 .5rem; }
.legal p, .legal li { color: var(--text-muted); }
.legal ul { padding-left: 1.2rem; }
.legal li { margin: .35rem 0; }
.legal strong { color: var(--text); }
.legal .callout {
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 12px; padding: 1.1rem 1.3rem; margin: 1.4rem 0;
}
.legal .callout p:last-child { margin-bottom: 0; }
.legal table {
  width: 100%; border-collapse: collapse; font-size: .92rem;
}
.legal .table-scroll { overflow-x: auto; margin: 1.2rem 0; }
.legal .table-scroll:focus-visible { outline-offset: 2px; }
.legal th, .legal td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.legal th { color: var(--text); font-weight: 600; white-space: nowrap; }
.legal td { color: var(--text-muted); }
.legal code { background: var(--surface-2); padding: .1rem .4rem; border-radius: 6px;
  font-size: .88em; }

/* ---- Footer legal lines, support page, 404 ------------------------------------------- */

.footer-legal { padding-top: 1.2rem; display: grid; gap: .25rem; }
.footer-legal p { margin: 0; font-size: .82rem; color: var(--text-faint); }
.contact-support { margin: 1rem 0 0; font-size: 1.02rem; }

.support .faq-group { margin-top: 2.2rem; padding: 0; }   /* a <section>: cancel the page-section padding */
.support .faq-group h2 { margin: 0 0 .4rem; }
.support .faq-group h3 { font-size: 1.05rem; margin: 1.5rem 0 .35rem; letter-spacing: -0.01em; }
.support .faq-group p { margin: 0 0 .6rem; }
.support .callout a, .legal p a { text-decoration: underline; text-underline-offset: .15em; }

.notfound { text-align: center; padding-block: clamp(3rem, 9vw, 6rem); }
.notfound-code {
  font-size: clamp(5rem, 22vw, 11rem); font-weight: 700; letter-spacing: -.05em; line-height: 1;
  margin: 0 0 1rem; color: var(--accent); opacity: .9;
}
.notfound-main h1 { margin-bottom: .6rem; }
.notfound-main p { color: var(--text-muted); font-size: 1.1rem; }
.notfound-alt {
  display: inline-block; margin: 1.6rem 1rem 0; vertical-align: top; max-width: 16rem; text-align: center;
}
.notfound-alt h2 { font-size: 1.05rem; margin-bottom: .25rem; }
.notfound-alt p { color: var(--text-muted); font-size: .92rem; margin: 0 0 .6rem; }

/* ---- Utility -------------------------------------------------------------- */

.center { text-align: center; }
.mt-2 { margin-top: 1.5rem; }

/* ---- Clickable face previews / device lightbox --------------------------- */
.lightbox-card { position: relative; cursor: pointer; }
.card-hit {
  position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%;
  border: 0; border-radius: inherit; background: transparent; cursor: pointer;
}
.card-hit:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.lightbox-card:hover .face-shot img { transform: scale(1.025); }
.face-shot img { transition: transform .3s var(--ease); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.device-lightbox[hidden] { display: none; }
.device-lightbox {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.device-lightbox-backdrop {
  position: absolute; inset: 0; background: rgba(5, 8, 14, .76);
  backdrop-filter: blur(12px) saturate(.85); -webkit-backdrop-filter: blur(12px) saturate(.85);
}
.device-lightbox-panel {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: min(92vw, 520px); max-height: 92vh;
}
.device-lightbox-image {
  display: block; width: auto; max-width: 100%; max-height: 88vh; object-fit: contain;
  filter: drop-shadow(0 34px 44px rgba(0,0,0,.48)) drop-shadow(0 8px 14px rgba(0,0,0,.28));
}
.device-lightbox-close {
  position: absolute; z-index: 2; top: -.25rem; right: -.25rem;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.24);
  background: rgba(18,22,30,.78); color: #fff; font: 300 2rem/1 system-ui, sans-serif;
  display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,.28);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.device-lightbox-close:hover { background: rgba(30,36,48,.92); }
.device-lightbox-close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.device-lightbox-fallback {
  width: min(86vw, 430px); min-height: 520px; border-radius: 38px; padding: 3rem 2rem;
  background: color-mix(in srgb, var(--surface) 94%, #111827); color: var(--text);
  border: 1px solid var(--border-strong); box-shadow: 0 34px 70px rgba(0,0,0,.42);
  text-align: center; place-items: center; align-content: center; gap: .8rem;
}
.device-lightbox-fallback:not([hidden]) { display: grid; }
.device-lightbox-fallback-face {
  width: 112px; height: 112px; border-radius: 50%; display: grid; place-items: center;
  border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
  font-weight: 650; margin-bottom: .6rem;
}
.device-lightbox-fallback p { color: var(--text-muted); margin: 0; max-width: 30ch; }
/* Scroll lock. `overflow: hidden` alone does not stop touch scrolling in iOS Safari, so the body is pinned instead;
   gallery.js stores the scroll offset in --lock-top and restores it on close. */
body.lightbox-open { position: fixed; top: var(--lock-top, 0); left: 0; right: 0; overflow: hidden; }
.device-lightbox { overscroll-behavior: contain; }

@media (max-width: 600px) {
  .device-lightbox { padding: .75rem; }
  .device-lightbox-panel { width: 96vw; }
  .device-lightbox-image { max-height: 84vh; }
  .device-lightbox-close { top: .25rem; right: .25rem; }
  .device-lightbox-fallback { min-height: 420px; border-radius: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
  .face-card:hover, .feature:hover, .signature-card:hover, .theme-toggle:hover, .btn:hover { transform: none; }
  .lightbox-card:hover .face-shot img { transform: none; }
}

/* "Increase contrast": drop the translucent greys, strengthen the edges. */
@media (prefers-contrast: more) {
  :root, html[data-theme="dark"] { --text-muted: var(--text); --text-faint: var(--text); --border: var(--text); --border-strong: var(--text); }
}

@media (forced-colors: active) {
  .theme-toggle, .lang-menu summary { border: 1px solid ButtonText; }
  .pack-badge, .coming-soon-badge { border: 1px solid CanvasText; }
}