/* ============================================================
   MZ Adnova Tech - mzadnova.com
   Soft light-glass system: pale blue-gray wash, frosted white
   panels, dark ink chips, gold reserved for the brand mark.
   Single committed light theme.
   Radius system: panels 24px, cards 20px, ui elements 12px.
   ============================================================ */

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-var.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --wash-a: #eef2f6;
  --wash-b: #dde5ec;
  --surface: rgba(252, 254, 255, 0.78);
  --surface-solid: #f8fafc;
  --well: rgba(240, 245, 249, 0.75);
  --ink: #171b26;
  --ink-hover: #232837;
  --text: #1e2432;
  --text-dim: #566274;
  --text-faint: #8a94a4;
  --line: rgba(23, 32, 51, 0.08);
  --line-strong: rgba(23, 32, 51, 0.14);
  --edge: rgba(255, 255, 255, 0.85);
  --gold: #a9741f;
  --gold-bright: #e8a33d;
  --gold-soft: rgba(232, 163, 61, 0.14);
  --shadow-card: 0 1px 2px rgba(23, 32, 51, 0.05), 0 10px 30px rgba(23, 32, 51, 0.08);
  --shadow-deep: 0 2px 4px rgba(23, 32, 51, 0.06), 0 18px 44px rgba(23, 32, 51, 0.12);
  --radius-panel: 24px;
  --radius-card: 20px;
  --radius-ui: 12px;
  --font: "Inter", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* The hidden attribute must beat display classes like .cta-row */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font);
  background: linear-gradient(168deg, var(--wash-a) 0%, var(--wash-b) 70%, #d5dfe8 100%) fixed;
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

.container {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: 24px;
}

h1, h2 { letter-spacing: -0.025em; text-wrap: balance; }
:root[lang^="zh"] h1,
:root[lang^="zh"] h2 { letter-spacing: 0; }

h1 {
  font-size: clamp(2rem, 3.9vw, 2.8rem);
  font-weight: 750;
  line-height: 1.12;
}

h2 {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 700;
  line-height: 1.18;
}

h3 { font-size: 1.06rem; font-weight: 650; line-height: 1.35; }

p { color: var(--text-dim); }

a { color: inherit; text-decoration: none; }

.text-link {
  color: var(--gold);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.text-link:hover { border-bottom-color: var(--gold); }

/* ---------------- Reveal on scroll (JS + motion-safe only) --- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--d, 0s);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}

/* ---------------- Nav ---------------------------------------- */
/* Solid brand-ink bar. Every page's <meta name="theme-color"> uses the
   same color, so iOS Safari paints the status bar (clock, Wi-Fi, battery)
   with it and the header appears to run to the top edge of the phone. */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-inner {
  height: 68px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand img { width: 32px; height: auto; }
.brand-word { font-size: 1rem; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; color: var(--ink); }
.brand-word .dim { color: var(--text-faint); font-weight: 500; }
.nav .brand-word { color: #ffffff; }
.nav .brand-word .dim { color: rgba(255, 255, 255, 0.58); }
.brand-word.small { font-size: 0.92rem; }

.nav-links { display: flex; gap: 24px; margin-left: auto; }
.nav-links a {
  font-size: 0.94rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.2s;
  white-space: nowrap;
}
.nav-links a:hover { color: #ffffff; }

.nav-actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }

.nav-phone {
  font-size: 0.94rem;
  font-weight: 650;
  color: #ffffff;
  white-space: nowrap;
}
.nav-phone:hover { color: var(--gold-bright); }

.lang-toggle {
  font-family: var(--font);
  font-size: 0.84rem;
  font-weight: 600;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-ui);
  padding: 6px 13px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.lang-toggle:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.18); }

.menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius-ui);
  cursor: pointer;
}
.menu-btn span {
  display: block;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 0.25s;
}
.nav-open .menu-btn span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-open .menu-btn span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* ---------------- Buttons ------------------------------------ */
.btn {
  display: inline-block;
  font-size: 0.96rem;
  font-weight: 600;
  padding: 13px 24px;
  border-radius: var(--radius-ui);
  white-space: nowrap;
  transition: transform 0.15s, background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}
.btn:active { transform: translateY(1px) scale(0.98); }

.btn-primary {
  background: var(--ink);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(23, 32, 51, 0.25);
}
.btn-primary:hover { background: var(--ink-hover); box-shadow: 0 4px 14px rgba(23, 32, 51, 0.3); }

.btn-ghost {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--line);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(23, 32, 51, 0.04);
}
.btn-ghost:hover { border-color: var(--line-strong); background: #ffffff; }

/* On the dark ink panel */
.btn-on-ink {
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
}
.btn-on-ink:hover { background: #ffffff; }

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.cta-center { justify-content: center; }

/* ---------------- Hero --------------------------------------- */
.hero { padding-block: 64px 80px; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 56px;
  align-items: center;
}

.hero-copy .lead {
  margin-top: 20px;
  font-size: 1.1rem;
  max-width: 34rem;
}
.hero-copy .cta-row { margin-top: 32px; }

.hero-media {
  position: relative;
  border-radius: var(--radius-panel);
  border: 1px solid var(--edge);
  overflow: hidden;
  box-shadow: var(--shadow-deep);
  background: var(--surface-solid);
  padding: 10px;
}
.hero-media img { width: 100%; height: auto; border-radius: 16px; }

/* Product-page hero variant */
.hero-sub {
  margin-top: 14px;
  font-size: 1.14rem;
  font-weight: 600;
  color: var(--ink);
  max-width: 44rem;
}
.hero-intro { margin-top: 16px; max-width: 44rem; }

/* ---------------- Works with --------------------------------- */
.workswith { border-block: 1px solid var(--line); background: rgba(255, 255, 255, 0.35); }
.workswith-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  padding-block: 24px;
}
.workswith-label { font-size: 0.9rem; color: var(--text-faint); }
.workswith-logos { display: flex; align-items: center; gap: 40px; list-style: none; flex-wrap: wrap; }
.workswith-logos img { opacity: 0.75; transition: opacity 0.2s; }
.workswith-logos li:hover img { opacity: 1; }

/* ---------------- Sections & panels --------------------------- */
.section { padding-block: 72px; }

.section-head { max-width: 42rem; margin-bottom: 44px; }
.section-head p { margin-top: 14px; }

.panel {
  background: var(--surface);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--edge);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-card);
  padding: 44px;
}

/* ---------------- Service cards (home) ------------------------ */
.svc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.svc {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 2px rgba(23, 32, 51, 0.04);
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
.svc:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); border-color: var(--line-strong); }
@media (prefers-reduced-motion: reduce) {
  .svc:hover, .cell:hover, .plan:hover { transform: none; }
}
.svc p { font-size: 0.96rem; }

.chip {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-ui);
  display: grid;
  place-items: center;
  background: var(--ink);
  color: #ffffff;
  margin-bottom: 6px;
  box-shadow: 0 2px 6px rgba(23, 32, 51, 0.22);
}

/* ---------------- Flagship split (home) ----------------------- */
.flagship-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 56px;
  align-items: center;
}
.flagship-copy h2 { margin-bottom: 16px; }
.flagship-copy .cta-row { margin-top: 28px; }

.shot-card {
  background: var(--surface-solid);
  border: 1px solid var(--edge);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-deep);
  padding: 10px;
  overflow: hidden;
}
.shot-card img { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line); }
.shot-wide { max-width: 880px; margin-inline: auto; }

/* ---------------- Ink band (Bar Order Caller teaser) ---------- */
.ink-band {
  background: linear-gradient(160deg, #1b2030, #14171f 70%);
  border-radius: var(--radius-panel);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: var(--shadow-deep);
  padding: 48px;
  display: flex;
  align-items: center;
  gap: 40px;
  color: #eef1f5;
}
.ink-band h2 { color: #ffffff; }
.ink-band p { color: #aab2c0; max-width: 44rem; }
.ink-band-icon {
  flex-shrink: 0;
  width: 76px;
  height: 76px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--gold-soft);
  color: var(--gold-bright);
}
.ink-band-copy { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.ink-band .btn { margin-top: 10px; }

/* ---------------- Plans --------------------------------------- */
/* Four support plans: a 2x2 grid keeps the feature lists readable. */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.plan {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}
.plan:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); border-color: var(--line-strong); }

.plan-price { display: flex; align-items: baseline; gap: 8px; }
.plan-price strong {
  font-size: 2.1rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.plan-price span { color: var(--text-faint); font-size: 0.95rem; }

.plan ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.plan li {
  position: relative;
  padding-left: 24px;
  color: var(--text-dim);
  font-size: 0.95rem;
}
.plan li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-bright);
}
.plan-note { font-size: 0.86rem; color: var(--text-faint); }
.plan .btn { align-self: flex-start; margin-top: 4px; }

/* ---------------- Feature list (product pages) ---------------- */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.feature {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.feature p, .feature li { font-size: 0.95rem; color: var(--text-dim); }
.feature ul { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }
.feature li { position: relative; padding-left: 20px; }
.feature li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-bright);
}

.num {
  display: inline-grid;
  place-items: center;
  align-self: flex-start;
  min-width: 30px;
  height: 30px;
  padding-inline: 8px;
  border-radius: 10px;
  background: var(--ink);
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}

/* Problems-solved list */
.solve-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; }
.solve {
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.solve h3 { margin-bottom: 6px; }
.solve p { font-size: 0.95rem; }

/* ---------------- Steps --------------------------------------- */
.steps { list-style: none; max-width: 46rem; position: relative; }
.step { position: relative; padding: 0 0 36px 40px; }
.step:last-child { padding-bottom: 0; }
.step::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 22px;
  bottom: -2px;
  width: 1px;
  background: rgba(23, 32, 51, 0.15);
}
.step:last-child::before { display: none; }
.step::after {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 0 4px var(--gold-soft);
}
.step h3 { margin-bottom: 6px; }
.step p { font-size: 0.96rem; }
.steps-after { margin-top: 28px; max-width: 46rem; font-size: 0.96rem; }

/* ---------------- Checklist (requirements) --------------------- */
.checklist { list-style: none; display: flex; flex-direction: column; gap: 12px; max-width: 46rem; }
.checklist li {
  position: relative;
  padding-left: 34px;
  color: var(--text-dim);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.24em;
  width: 20px;
  height: 20px;
  border-radius: 7px;
  background: var(--ink);
}
.checklist li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: calc(0.24em + 5px);
  width: 9px;
  height: 5px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg);
}

/* ---------------- Contact ------------------------------------- */
.contact { padding-block: 72px 88px; }
.contact-panel {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 44px;
}
.contact-panel > p { margin-top: 14px; max-width: 38rem; }

.contact-phone {
  margin-top: 30px;
  font-size: clamp(1.8rem, 4.6vw, 2.9rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  transition: color 0.2s;
}
.contact-phone:hover { color: var(--gold); }

.contact-email {
  margin-top: 8px;
  font-size: 1.04rem;
  color: var(--text-dim);
  transition: color 0.2s;
}
.contact-email:hover { color: var(--ink); }

.contact-panel .cta-row { margin-top: 30px; }
.contact-note { margin-top: 20px; font-size: 0.92rem; color: var(--text-faint); }

/* ---------------- Footer -------------------------------------- */
.footer { border-top: 1px solid var(--line); background: rgba(255, 255, 255, 0.35); }
.footer-inner {
  padding-block: 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.footer .brand img { width: 24px; }
.footer-links { display: flex; gap: 22px; margin-inline: auto; flex-wrap: wrap; }
.footer-links a { font-size: 0.9rem; color: var(--text-faint); transition: color 0.2s; }
.footer-links a:hover { color: var(--ink); }
.footer-copy { font-size: 0.88rem; color: var(--text-faint); }
/* Second row: the legal pages */
.footer-legal {
  flex-basis: 100%;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.footer-legal a { font-size: 0.85rem; color: var(--text-faint); transition: color 0.2s; }
.footer-legal a:hover { color: var(--ink); }

/* ---------------- Auth & member area -------------------------- */
.auth-wrap { max-width: 480px; margin-inline: auto; padding: 56px 24px 88px; }
.auth-card { padding: 40px 36px; }
.auth-sub { margin: 12px 0 26px; font-size: 0.98rem; }

.tabs {
  display: flex;
  gap: 6px;
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 5px;
  margin-bottom: 24px;
}
.tab {
  flex: 1;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  font-family: var(--font);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.tab[aria-selected="true"] {
  background: #ffffff;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(23, 32, 51, 0.12);
}

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.field input {
  font-family: var(--font);
  font-size: 1rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-ui);
  padding: 11px 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(23, 32, 51, 0.12);
}
.field .hint { font-size: 0.82rem; color: var(--text-faint); }
.field .optional { font-weight: 400; color: var(--text-faint); }

/* Text-message consent: a box that is never ticked in advance, with the
   full disclosure right under it (account and member pages). */
.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 6px;
  align-items: start;
  margin: 2px 0 20px;
}
.consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--ink);
  cursor: pointer;
}
.consent label { font-size: 0.92rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.consent-text { grid-column: 2; font-size: 0.8rem; line-height: 1.55; color: var(--text-dim); }
.consent-text .text-link { white-space: nowrap; }

.form-err {
  display: none;
  margin: 0 0 16px;
  padding: 11px 14px;
  border-radius: var(--radius-ui);
  background: rgba(180, 35, 24, 0.08);
  border: 1px solid rgba(180, 35, 24, 0.25);
  color: #8f1d13;
  font-size: 0.92rem;
}
.form-err.show { display: block; }
/* Views without the tabs (forgot password, text code): keep the message off the heading. */
.tabs[hidden] + .form-err.show { margin-top: 16px; }

.form-ok {
  display: none;
  margin: 0 0 16px;
  padding: 11px 14px;
  border-radius: var(--radius-ui);
  background: rgba(31, 122, 78, 0.08);
  border: 1px solid rgba(31, 122, 78, 0.3);
  color: #1b5e3b;
  font-size: 0.92rem;
  line-height: 1.5;
}
.form-ok.show { display: block; }

.forgot-row { margin: -6px 0 16px; text-align: right; font-size: 0.88rem; }
.auth-h2 { margin: 14px 0 0; font-size: 1.2rem; }
.auth-back { margin-top: 16px; text-align: center; font-size: 0.9rem; }
.auth-alt { margin-top: 14px; text-align: center; font-size: 0.9rem; }
.code-note { margin-top: 14px; text-align: center; }
.field input.code-input {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.auth-submit { width: 100%; text-align: center; margin-top: 6px; }
.auth-note { margin-top: 18px; font-size: 0.88rem; color: var(--text-faint); text-align: center; }

.member-loading { color: var(--text-faint); }
.member-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.member-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.member-span2 { grid-column: span 2; }

.kv-list { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.kv dt { font-size: 0.85rem; color: var(--text-faint); }
.kv dd { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }

.member-links { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }

.phone-actions { margin-top: 18px; }
.phone-form { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }

/* ---------------- Legal pages --------------------------------- */
.legal { max-width: 46rem; }
.legal h1 { margin-bottom: 10px; }
.legal .legal-meta { color: var(--text-faint); margin-bottom: 36px; }
.legal h2 { font-size: 1.35rem; margin: 40px 0 12px; scroll-margin-top: 90px; }
.legal h3 { font-size: 1.05rem; margin: 26px 0 8px; }
.legal p, .legal li { color: var(--text-dim); line-height: 1.7; }
.legal p { margin-bottom: 14px; }
.legal ul { margin: 0 0 14px 1.25rem; list-style: disc; }
.legal li { margin-bottom: 8px; }
.legal strong { color: var(--text); }
.legal .legal-box {
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: var(--radius-ui);
  padding: 18px 20px;
  margin: 0 0 18px;
}
.legal .legal-box p:last-child { margin-bottom: 0; }
.legal .sms-sample {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line-strong);
  border-radius: 14px 14px 14px 4px;
  padding: 12px 16px;
  margin: 0 0 10px;
  max-width: 34rem;
}
.legal figure { margin: 8px 0 22px; }
.legal figure img {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-ui);
  box-shadow: var(--shadow-card);
}
.legal figcaption { margin-top: 10px; font-size: 0.88rem; color: var(--text-faint); }

/* ---------------- Subscriptions ------------------------------- */
.sub-price-row { margin: 10px 0 6px; }
.sub-features { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 14px 0 24px; }
.sub-features li {
  position: relative;
  padding-left: 22px;
  color: var(--text-dim);
  font-size: 0.94rem;
}
.sub-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-bright);
}

.sub-notice {
  background: var(--well);
  border: 1px solid var(--line);
  border-radius: var(--radius-ui);
  padding: 18px;
  margin-bottom: 8px;
}
.sub-notice p { font-size: 0.95rem; }
.sub-notice-contact { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; }

.sub-testmode {
  font-size: 0.88rem;
  color: #7a5a12;
  background: rgba(232, 163, 61, 0.14);
  border: 1px solid rgba(232, 163, 61, 0.35);
  border-radius: var(--radius-ui);
  padding: 9px 13px;
  margin-bottom: 14px;
}

#card-container { min-height: 44px; }

.member-banner {
  background: rgba(22, 101, 52, 0.1);
  border: 1px solid rgba(22, 101, 52, 0.28);
  color: #14532d;
  border-radius: var(--radius-ui);
  padding: 12px 16px;
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding: 14px 0;
}
.sub-row:first-child { border-top: 0; padding-top: 6px; }
.sub-row-main { display: flex; flex-direction: column; gap: 2px; }
.sub-row-main strong { color: var(--ink); }
.sub-row-price { font-size: 0.9rem; color: var(--text-faint); }
.sub-row-side { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sub-row-dates { font-size: 0.88rem; color: var(--text-faint); }

.sub-code-wrap { margin-top: 10px; }
.sub-code-label { display: block; font-size: 0.82rem; color: var(--text-faint); margin-bottom: 4px; }
.sub-code {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
  background: var(--well);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 6px 12px;
}
.sub-code-hint { margin-top: 6px; font-size: 0.84rem; color: var(--text-faint); max-width: 34rem; }

.chip-status {
  font-size: 0.82rem;
  font-weight: 650;
  padding: 4px 11px;
  border-radius: 999px;
  white-space: nowrap;
}
.chip-status.is-active { background: rgba(22, 101, 52, 0.12); color: #166534; }
.chip-status.is-pending { background: rgba(146, 96, 10, 0.12); color: #92600a; }
.chip-status.is-canceled { background: rgba(23, 32, 51, 0.08); color: var(--text-faint); }

.btn-small { padding: 8px 14px; font-size: 0.88rem; }

/* ---------------- Responsive ---------------------------------- */
/* Seven nav links need about 1260px with the phone number and about 1130px
   without it, so the phone number drops first and the menu button takes
   over next. Bump both when a nav link is added or removed. */
@media (max-width: 1289px) {
  .nav-phone { display: none; }
}

@media (max-width: 1159px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--ink);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 18px 36px rgba(23, 32, 51, 0.25);
    padding: 10px 24px 18px;
  }
  .nav-open .nav-links { display: flex; }
  .nav-links a { padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 1.02rem; }
  .nav-links a:last-child { border-bottom: 0; }
  .menu-btn { display: flex; }
  /* the link list is out of the flow here, so push the buttons to the right edge */
  .nav-actions { margin-left: auto; }
}

@media (max-width: 860px) {
  .hero { padding-block: 44px 56px; }
  .hero-grid, .flagship-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-copy .lead { font-size: 1.04rem; }

  .section { padding-block: 56px; }
  .panel { padding: 28px 22px; }

  .svc-grid, .plans-grid, .feature-grid, .solve-grid, .member-grid { grid-template-columns: 1fr; }
  .member-span2 { grid-column: span 1; }
  .auth-card { padding: 30px 22px; }

  .ink-band { flex-direction: column; align-items: flex-start; padding: 32px 26px; gap: 24px; }

  .contact-panel { padding: 40px 22px; }

  .footer-inner { flex-direction: column; text-align: center; }
  .footer-links { margin-inline: 0; justify-content: center; }
}

@media (max-width: 480px) {
  .container { padding-inline: 16px; }
  .cta-row .btn { flex: 1; text-align: center; }
}

/* ---------------- Buffet Bar Caller in-app checkout ----------------- */
/* js/main.js adds .in-app on <html> when the page runs inside the iPad
   app's checkout sheet: hide the site chrome so only the content shows. */
.in-app .nav,
.in-app .footer { display: none; }
.in-app .auth-wrap { padding: 28px 24px 48px; }

/* ---------------- AIO POS System ------------------------------ */
/* The product page opens on a dark ink card with a gold rule, echoing the
   AIO POS brief; the homepage and pricing panels share a two-column grid. */
.eyebrow {
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.ink-hero {
  background: linear-gradient(160deg, #1b2030, #14171f 70%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 4px solid var(--gold-bright);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-deep);
  padding: 56px 52px;
  color: #eef1f5;
}
.ink-hero .eyebrow { color: var(--gold-bright); }
.ink-hero h1 { color: #ffffff; margin-top: 14px; }
.ink-hero .hero-sub { color: #ffffff; }
.ink-hero .hero-intro { color: #aab2c0; max-width: 52rem; }
.ink-hero .cta-row { margin-top: 30px; }

.btn-ghost-ink {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
}
.btn-ghost-ink:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.5); }

.callout {
  margin-top: 22px;
  padding: 18px 22px;
  border-left: 4px solid var(--gold-bright);
  border-radius: 0 var(--radius-ui) var(--radius-ui) 0;
  background: var(--gold-soft);
  color: var(--ink);
  font-weight: 600;
}

.num-gold { background: var(--gold-bright); color: #1b2030; }

.feature ul.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 20px; }
/* an odd final card spans the row instead of leaving an empty cell */
.feature-grid > .feature:last-child:nth-child(odd) { grid-column: 1 / -1; }
.feature ol.steps-inline { padding-left: 22px; display: flex; flex-direction: column; gap: 5px; }
.feature ol.steps-inline li { font-size: 0.95rem; color: var(--text-dim); }
.adv-head { margin-top: 44px; }
.ink-close h2 { color: #ffffff; }
.ink-close .hero-intro { max-width: 60rem; }
.kw-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 6px; }
.kw-chip {
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 600;
}

.aio-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 44px;
  align-items: center;
}
.aio-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.aio-copy .cta-row { margin-top: 6px; }

/* Compact product band (Time Control Pro on the homepage) */
.section-tight { padding-top: 0; }
.mini-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 26px 32px;
}
.mini-band h2 { font-size: 1.25rem; letter-spacing: -0.01em; }
.mini-band-copy p { margin-top: 8px; font-size: 0.96rem; max-width: 44rem; }
.mini-band-side { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }

.aio-hero-shot { margin-top: 22px; }
.aio-home-shot { grid-column: 1 / -1; margin-top: 8px; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.gallery-item { margin: 0; }
.gallery-item figcaption { padding: 12px 8px 4px; font-size: 0.92rem; color: var(--text-dim); line-height: 1.5; }

@media (max-width: 860px) {
  .ink-hero { padding: 36px 24px; }
  .gallery { grid-template-columns: 1fr; }
  .mini-band { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 22px; }
  .aio-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 480px) {
  .feature ul.cols2 { grid-template-columns: 1fr; }
}