/* erpnext.exarlabs.com — site styles
 *
 * Theme tokens + base components come from theme/tokens.css and theme/components.css.
 * Everything below is section-specific and follows docs/design-system.md:
 *   lane = "written offer": numbered rail, hairlines, figure-forward, generous air
 *   clay = data-ink, capped at 7 uses per page
 *   motion register = minimal-static
 */

@import url("theme/tokens.css");
@import url("theme/components.css");

/* ===========================================================
 * Shared primitives
 * ========================================================== */

/* [hidden] must beat class rules that set display (e.g. .btn { display:inline-flex }) */
[hidden] { display: none !important; }

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

/* Figures: tabular everywhere a number can change or be compared */
.fig, .calc-fig, .pack-price, .quiz-score, .stage-time, .symptom-count,
.obligations td, .spec td {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* The numbered section rail — the site's structural signature */
.rail {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  margin: 0 0 0.4rem;
}
.rail-onnavy { color: var(--on-navy-muted); }

.lede {
  font-size: var(--text-lg);
  color: var(--ink-muted);
  max-width: 62ch;
  margin-bottom: 2.2rem;
}

/* Band rhythm (docs/design-system.md § 5) */
.symptoms, .packages, .compliance, .industries, .reference, .ownership { background: var(--bg); }
.quiz, .licence, .migration, .local, .faq { background: var(--surface); }
.timeline { background: var(--navy-100); }

/* Tables that must not push the page wide */
.table-scroll { overflow-x: auto; margin: 0 0 1.6rem; }

/* Datasheet primitives keep the small radius */
.quiz-panel, .calc-panel, .callout, .pack, .ind-card, .ref-offer,
.obligations, .spec { border-radius: var(--radius-sm); }

/* ===========================================================
 * Header additions
 * ========================================================== */

.logo-sub {
  font-weight: 500;
  color: var(--ink-muted);
}
.site-nav { display: none; gap: 1.4rem; }
.site-nav a {
  text-decoration: none; color: var(--ink-muted);
  font-size: var(--text-sm); font-weight: 600;
}
.site-nav a:hover { color: var(--ink); }
@media (min-width: 900px) { .site-nav { display: flex; } }

.header-end { display: flex; align-items: center; gap: 0.9rem; }
.lang-switch { display: flex; gap: 0.4rem; font-size: var(--text-xs); font-weight: 600; }
.lang-switch a { text-decoration: none; color: var(--ink-muted); padding: 0.2rem 0.3rem; }
.lang-switch a:hover { color: var(--ink); }
/* Clay use 6/7 — current language */
.lang-switch a[aria-current="true"] { color: var(--clay-600); text-decoration: underline; }

.header-contact {
  text-decoration: none; font-weight: 600; font-size: var(--text-sm);
  color: var(--navy-700); border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 0.5rem 0.9rem;
  transition: border-color var(--t), background var(--t);
}
.header-contact:hover { border-color: var(--navy-700); background: var(--navy-100); }

/* ===========================================================
 * 01 Hero (navy band)
 * ========================================================== */

.hero { background: var(--navy-700); color: var(--on-navy); }
.hero h1 { color: var(--on-navy); max-width: 18ch; }
.hero-inner { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 900px) { .hero-inner { grid-template-columns: 1.05fr 0.95fr; } }

.hero-sub { color: var(--on-navy-muted); font-size: var(--text-lg); max-width: 56ch; margin-top: 1.2rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.8rem 0 1.4rem; }

.btn-onnavy {
  background: transparent; color: var(--on-navy);
  border-color: oklch(0.84 0.035 256 / 0.5);
}
.btn-onnavy:hover { border-color: var(--on-navy); background: oklch(0.97 0.01 250 / 0.08); color: var(--on-navy); }

.hero-trust {
  display: flex; align-items: baseline; gap: 0.6rem;
  font-size: var(--text-sm); color: var(--on-navy-muted); max-width: 60ch;
}
/* Clay use 2/7 — hero trust marker (a square, never a stripe) */
.trust-mark {
  flex: 0 0 auto; width: 8px; height: 8px;
  background: var(--clay-500); transform: translateY(-1px);
}

.hero-figure { display: none; }
@media (min-width: 900px) { .hero-figure { display: block; } }
.viz-truths { width: 100%; height: auto; }
.viz-line circle { fill: var(--on-navy-muted); }
.viz-line path { fill: none; stroke: var(--on-navy-muted); stroke-width: 1; }
.viz-line rect { fill: none; stroke: var(--on-navy-muted); stroke-width: 1; }
.viz-rule { stroke: oklch(0.84 0.035 256 / 0.35); stroke-width: 1; }
/* Clay use 3/7 — the converged, single-truth path */
.viz-signal circle { fill: var(--clay-500); }
.viz-signal path { fill: none; stroke: var(--clay-500); stroke-width: 1.5; }
.viz-signal rect { fill: none; stroke: var(--clay-500); stroke-width: 1.5; }
.viz-signal .viz-val { fill: var(--clay-400); }
.viz-label { font-family: var(--font-body); font-size: 11px; fill: var(--on-navy-muted); letter-spacing: 0.04em; }
.viz-val { font-family: var(--font-body); font-size: 14px; font-weight: 600; fill: var(--on-navy); font-variant-numeric: tabular-nums; }

/* ===========================================================
 * 02 Symptoms
 * ========================================================== */

.symptom-list { list-style: none; margin: 0 0 1.4rem; padding: 0; max-width: 70ch; border-top: 1px solid var(--line); }
.symptom-list li { border-bottom: 1px solid var(--line); }
.symptom-list label {
  display: flex; gap: 0.9rem; align-items: flex-start;
  padding: 0.9rem 0.2rem; cursor: pointer;
}
.symptom-list input { margin-top: 0.35rem; width: 1.05rem; height: 1.05rem; accent-color: var(--navy-700); flex: 0 0 auto; }
.symptom-list label:hover span { color: var(--navy-800); }

.symptom-count { font-size: var(--text-xl); font-family: var(--font-display); font-weight: 600; margin-bottom: 1rem; }
.symptom-close { max-width: 66ch; color: var(--ink-muted); }

/* ===========================================================
 * 03 Quiz
 * ========================================================== */

.quiz-panel {
  border: 1px solid var(--line-strong);
  background: var(--bg);
  padding: clamp(1.4rem, 3.5vw, 2.2rem);
  max-width: 46rem;
}
.quiz-progress { height: 2px; background: var(--line); margin-bottom: 1.2rem; }
.quiz-progress-fill { display: block; height: 2px; width: 16.6%; background: var(--navy-600); transition: width var(--t); }
.quiz-step { font-size: var(--text-sm); color: var(--ink-muted); margin-bottom: 1.2rem; }

.quiz-q { border: 0; margin: 0; padding: 0; }
.quiz-q legend {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-xl); line-height: 1.2; margin-bottom: 1rem; padding: 0;
}
.quiz-q label {
  display: flex; gap: 0.8rem; align-items: flex-start;
  padding: 0.75rem 0.9rem; margin-bottom: 0.5rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; transition: border-color var(--t), background var(--t);
}
.quiz-q label:hover { border-color: var(--line-strong); background: var(--surface); }
.quiz-q input { margin-top: 0.3rem; accent-color: var(--navy-700); flex: 0 0 auto; }

.quiz-nav { margin-top: 1rem; }

.quiz-result { border-top: 1px solid var(--line); padding-top: 1.4rem; }
/* Clay use 4/7 — the score figure */
.quiz-score {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-4xl); line-height: 1; color: var(--clay-600);
  margin-bottom: 0.4rem;
}
.quiz-score-unit { font-size: var(--text-lg); font-weight: 500; color: var(--ink-muted); }
.quiz-result h3 { margin-bottom: 0.8rem; }
.quiz-pack {
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem; font-weight: 600; display: inline-block;
}
.quiz-actions { margin: 1.2rem 0; display: flex; flex-wrap: wrap; gap: 0.7rem; }
.quiz-result ul { padding-left: 1.1rem; }
.quiz-note { font-size: var(--text-sm); color: var(--ink-muted); margin-top: 1rem; }

/* ===========================================================
 * 04 Packages
 * ========================================================== */

.pack {
  border: 1px solid var(--line);
  background: var(--bg);
  padding: clamp(1.3rem, 3vw, 1.9rem);
  margin-bottom: 1.2rem;
}
.pack-audit { border-color: var(--line-strong); }
.pack-base { border-color: var(--line-strong); }

.pack-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.pack-head h3 { margin: 0; }
.pack-price { margin: 0; color: var(--ink-muted); font-size: var(--text-base); }
.pack-price .fig {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-2xl); color: var(--ink); margin-right: 0.25rem;
}
.pack-for { margin-top: 0.7rem; }
.pack-prefix { font-size: var(--text-sm); font-weight: 600; color: var(--ink-muted); margin: 0 0 0.3rem; }
.pack-scope { margin: 0.9rem 0; padding-left: 1.1rem; color: var(--ink-muted); }
.pack-scope li { margin-bottom: 0.3rem; }
.pack-monthly { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; font-style: italic; }

/* The "one base, three layers" stem — hairline, desktop only */
.pack-stem { display: none; }
@media (min-width: 780px) {
  .pack-stem { display: block; width: 1px; height: 2rem; background: var(--line-strong); margin: -0.4rem auto 0.6rem; }
}

.pack-layers { display: grid; gap: 1.2rem; }
@media (min-width: 780px) { .pack-layers { grid-template-columns: repeat(3, 1fr); } }
.pack-layers .pack { margin-bottom: 0; display: flex; flex-direction: column; }
.pack-layers .pack-monthly { margin-top: auto; padding-top: 0.8rem; }

/* Clay use 5/7 — recommended package, only after the quiz has run */
.pack.is-recommended { border-color: var(--clay-500); box-shadow: inset 0 3px 0 0 var(--clay-500); }

.pack-notes { margin-top: 2rem; max-width: 68ch; }
.pack-notes p { color: var(--ink-muted); }

/* ===========================================================
 * 05 Licence calculator
 * ========================================================== */

.calc-panel { border: 1px solid var(--line-strong); background: var(--bg); padding: clamp(1.4rem, 3.5vw, 2.2rem); }

.calc-input { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; margin-bottom: 1.8rem; }
.calc-input label { font-weight: 600; flex: 0 0 auto; }
.calc-input input[type="range"] { flex: 1 1 14rem; accent-color: var(--navy-700); min-width: 10rem; }
.calc-input input[type="number"] { width: 5.5rem; font-variant-numeric: tabular-nums; }

.calc-row { margin-bottom: 1.4rem; }
.calc-name { font-size: var(--text-sm); color: var(--ink-muted); margin: 0 0 0.4rem; }
.calc-track { background: var(--surface-2); height: 2.1rem; border: 1px solid var(--line); }
.calc-bar { height: 100%; transition: width var(--t); }
.calc-bar-a { background: var(--navy-600); width: 100%; }
/* Clay use 7/7 — the answer bar (zero-width, so it reads as a marker, not a broken track) */
.calc-bar-b { background: var(--clay-500); width: 4px; }
.calc-fig {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-2xl); margin: 0.4rem 0 0;
}
.calc-fig-zero { color: var(--clay-600); }

.calc-assume { border-top: 1px solid var(--line); margin-top: 1.6rem; padding-top: 1.2rem; }
.calc-assume p { color: var(--ink-muted); margin-bottom: 0.8rem; }
.calc-assume .calc-exclusion { color: var(--ink); }

/* ===========================================================
 * 06 Compliance
 * ========================================================== */

.obligations, .spec { border-collapse: collapse; width: 100%; border: 1px solid var(--line-strong); }
.obligations th, .obligations td, .spec th, .spec td {
  text-align: left; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.obligations thead th { font-size: var(--text-sm); text-transform: none; color: var(--ink-muted); font-weight: 600; }
.obligations tbody th, .spec th { font-weight: 600; }
.obligations tr:last-child th, .obligations tr:last-child td,
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }
.spec td { text-align: right; font-weight: 600; white-space: nowrap; }

.callout {
  border: 1px solid var(--line-strong);
  padding: 1.1rem 1.3rem;
  margin: 0 0 1.6rem;
  max-width: 70ch;
}
.callout p { margin: 0; font-weight: 600; }

.steps { list-style: none; counter-reset: none; padding: 0; margin: 0 0 1.4rem; max-width: 70ch; }
.steps li {
  display: grid; grid-template-columns: 2rem 1fr; gap: 0.9rem;
  padding: 0.9rem 0; border-bottom: 1px solid var(--line);
}
.step-n {
  font-variant-numeric: tabular-nums; font-weight: 700;
  color: var(--ink-muted); font-family: var(--font-display);
}
/* The body must be ONE grid item: bare text nodes inside a grid container become
   anonymous items and break word by word. */
.step-text { margin: 0; }

/* ===========================================================
 * 07 Timeline
 * ========================================================== */

.stages { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 1.4rem; }
@media (min-width: 900px) { .stages { grid-template-columns: repeat(4, 1fr); gap: 1.6rem; } }
.stage { border-top: 1px solid var(--line-strong); padding-top: 1rem; }
.stage-n {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-2xl);
  font-variant-numeric: tabular-nums; color: var(--ink-muted); margin: 0 0 0.3rem; line-height: 1;
}
.stage h3 { margin-bottom: 0.3rem; }
.stage-time { font-weight: 600; margin-bottom: 0.7rem; }
.stage p { font-size: var(--text-sm); }
.stage-exit { color: var(--ink-muted); font-style: italic; }
.timeline-close {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--text-2xl); line-height: 1.2; max-width: 26ch; margin: 0;
}

/* ===========================================================
 * 08 Industries
 * ========================================================== */

.ind-grid { display: grid; gap: 1.2rem; }
@media (min-width: 700px) { .ind-grid { grid-template-columns: repeat(2, 1fr); } }
.ind-card { border: 1px solid var(--line); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.8rem; background: var(--bg); }
.ind-quote {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--text-xl); line-height: 1.25; margin: 0;
}
.ind-pack { font-size: var(--text-sm); color: var(--ink-muted); margin: 0; }
.ind-link { margin-top: auto; font-weight: 600; }

/* ===========================================================
 * 09 Migration
 * ========================================================== */

.mig-cols { display: grid; gap: 2rem; }
@media (min-width: 800px) { .mig-cols { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.mig-col ul { padding-left: 1.1rem; }
.mig-col li { margin-bottom: 0.35rem; }
.mig-src { font-size: var(--text-sm); color: var(--ink-muted); }
.mig-dl dt { font-weight: 600; margin-top: 1rem; }
.mig-dl dd { margin: 0.3rem 0 0; color: var(--ink-muted); }

/* ===========================================================
 * 10 Reference
 * ========================================================== */

.ref-lead {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.2;
  max-width: 30ch; margin: 2rem 0 2rem;
  padding-left: 1rem; border-left: 1px solid var(--line-strong);
}
.status-line { margin: 1.2rem 0; }
.status-pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 0.3rem 0.8rem; font-size: var(--text-sm); font-weight: 600;
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--zone-yellow); }
.ref-offer { border: 1px solid var(--line-strong); padding: 1.3rem; margin-top: 1.8rem; max-width: 70ch; }
.ref-offer h3 { margin-bottom: 0.5rem; }
.ref-offer p { margin: 0; }

/* ===========================================================
 * 12 Ownership
 * ========================================================== */

.own-grid { display: grid; gap: 1.6rem 2.5rem; }
@media (min-width: 760px) { .own-grid { grid-template-columns: 1fr 1fr; } }
.own-item h3 { font-size: var(--text-lg); margin-bottom: 0.35rem; }
.own-item p { color: var(--ink-muted); margin: 0; }

/* ===========================================================
 * 13 FAQ
 * ========================================================== */

.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 1rem 0.2rem;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg);
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--ink-muted); font-weight: 500; }
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--navy-800); }
.faq details p { padding: 0 0.2rem 1rem; margin: 0; color: var(--ink-muted); }

/* ===========================================================
 * 14 Final CTA (navy band)
 * ========================================================== */

.final-cta { background: var(--navy-700); color: var(--on-navy); }
.final-cta h2 { color: var(--on-navy); }
.final-cta p { color: var(--on-navy-muted); }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.6rem 0 1.2rem; }
.cta-note { font-size: var(--text-sm); }
.final-cta a:not(.btn) { color: var(--on-navy); }

/* ===========================================================
 * Footer additions
 * ========================================================== */

.footer-top { display: grid; gap: 1.8rem; margin-bottom: 2rem; }
@media (min-width: 800px) { .footer-top { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--on-navy); }
.footer-tagline { margin: 0.4rem 0 0.6rem; max-width: 34ch; }
.footer-links { display: flex; flex-direction: column; gap: 0.45rem; font-size: var(--text-sm); }
.footer-bottom {
  border-top: 1px solid oklch(0.84 0.035 256 / 0.2); padding-top: 1.2rem;
  display: flex; flex-wrap: wrap; gap: 0.8rem 1.6rem; align-items: center; justify-content: space-between;
  font-size: var(--text-sm);
}
.footer-company { margin: 0; }
.footer-legal { display: flex; gap: 1rem; }
.footer-lang { display: flex; gap: 0.5rem; }
.footer-lang a[aria-current="true"] { color: var(--clay-400); }

/* ===========================================================
 * Industry sub-pages
 * ========================================================== */

.sub-hero { background: var(--navy-700); color: var(--on-navy); }
.sub-hero h1 { color: var(--on-navy); max-width: 20ch; font-size: clamp(2rem, 4.2vw, 3.2rem); }
.sub-hero .lede { color: var(--on-navy-muted); max-width: 58ch; }
.breadcrumb { font-size: var(--text-sm); margin: 0 0 1.2rem; color: var(--on-navy-muted); }
.breadcrumb a { color: var(--on-navy-muted); }
.breadcrumb a:hover { color: var(--on-navy); }
.sub-quote {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.3;
  color: var(--on-navy); max-width: 44ch;
  padding-left: 1rem; border-left: 1px solid oklch(0.84 0.035 256 / 0.45);
  margin: 0 0 1.6rem;
}

.pain-list { list-style: none; margin: 0; padding: 0; max-width: 70ch; border-top: 1px solid var(--line); }
.pain-list li { border-bottom: 1px solid var(--line); padding: 0.9rem 0; }

.does-dl { max-width: 72ch; margin: 0; }
.does-dl dt { font-weight: 600; margin-top: 1.1rem; }
.does-dl dd { margin: 0.25rem 0 0; color: var(--ink-muted); }

.walk { background: var(--navy-100); }
.walk-note { color: var(--ink-muted); max-width: 66ch; }

.sub-pack { background: var(--surface); }
.sub-pack .pack { max-width: 44rem; }

/* ===========================================================
 * Legal pages
 * ========================================================== */

.legal-block { padding: clamp(2.5rem, 6vw, 4rem) 0; }
.legal-block h1 { margin-bottom: 1.6rem; }
.legal-block h2 { font-size: var(--text-xl); margin-top: 2rem; margin-bottom: 0.5rem; }
.legal-block dl { display: grid; grid-template-columns: 1fr; gap: 0.2rem 1.5rem; margin: 0; }
@media (min-width: 620px) { .legal-block dl { grid-template-columns: 12rem 1fr; } }
.legal-block dt { font-weight: 600; }
.legal-block dd { margin: 0 0 0.9rem; color: var(--ink-muted); }

/* 404 */
.notfound-help { margin-top: 1.6rem; }
.legal-block .footer-links { gap: 0.6rem; margin-top: 1.4rem; }
.legal-block .footer-links a { color: var(--navy-700); }

/* ===========================================================
 * Print — the page is a written offer; it gets forwarded and printed
 * ========================================================== */

@media print {
  .partner-bar, .site-header, .skip-to-content,
  .hero-cta, .cta-row, .quiz-nav, .quiz-actions, #quiz-reset,
  .footer-links, .footer-lang, .calc-input input[type="range"] { display: none !important; }

  body { background: #fff; color: #000; font-size: 10.5pt; }
  .hero, .final-cta, .site-footer { background: #fff !important; color: #000 !important; }
  .hero h1, .final-cta h2, .footer-name { color: #000 !important; }
  .hero-sub, .hero-trust, .final-cta p, .rail-onnavy { color: #333 !important; }
  .hero-figure { display: none !important; }

  section { padding: 1.2rem 0; break-inside: avoid; }
  .pack, .stage, .ind-card, .callout, .ref-offer, .quiz-panel, .calc-panel { break-inside: avoid; }

  /* The accordion prints open, so nothing is hidden from a reader on paper */
  .faq details { display: block; }
  .faq details > p { display: block !important; padding-bottom: 0.6rem; }
  .faq summary::after { content: ""; }

  /* Bars keep their figures; colour is not the carrier */
  .calc-bar-a { background: #666 !important; }
  .calc-bar-b { background: #000 !important; }
  .calc-fig-zero { color: #000 !important; }

  a { text-decoration: underline; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}