/* page.css: layout glue for the sales page, from the approved mockup
 * systems/mockup-studio/pages/home-tracker-sales (design-system landing template + device frames).
 * tokens.css and components.css are synced in at deploy (deploy.sh). Light only (ADR 0006). */
.nav__brand { white-space: nowrap; }
.nav .btn { flex-shrink: 0; }

.page-hero { padding-block: var(--s-space-3xl) var(--s-space-section-y); overflow: hidden; }
.page-hero .hero__headline { max-width: 15ch; margin-inline: auto; }
.page-hero .hero__sub { max-width: 600px; }
.page-hero .hero__cta { margin-top: var(--s-space-3xl); }

/* devices: the finished dashboard on a laptop and a phone */
.devices { position: relative; max-width: 980px; margin: var(--s-space-2xl) auto 0; padding-right: 13%; text-align: left; }
.laptop__screen {
  background: var(--p-ink-900);
  border-radius: var(--s-radius-panel) var(--s-radius-panel) 0 0;
  padding: 1.8% 1.8% 0;
  box-shadow: var(--s-shadow-lg);
}
.laptop__view { position: relative; overflow: hidden; aspect-ratio: 16 / 10; background: var(--p-cream-50); border-radius: 4px 4px 0 0; }
.laptop__base {
  height: 14px; margin: 0 -5%;
  background: linear-gradient(var(--p-cream-300), var(--p-ink-300));
  border-radius: 0 0 var(--s-radius-panel) var(--s-radius-panel);
}
.phone {
  position: absolute; right: 0; bottom: -32px; width: 24%; min-width: 128px; max-width: 236px;
  aspect-ratio: 9 / 19.5; background: var(--p-ink-900); padding: 3.2%;
  border-radius: var(--s-radius-card); box-shadow: var(--s-shadow-lg);
}
.phone__view { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--p-cream-50); border-radius: 20px; }
.scaler { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: var(--p-cream-50); }
.laptop .scaler { width: 1360px; }
.phone .scaler { width: 390px; }

/* the Google Sheet inside the frames (a picture of the product, drawn with system tokens) */
.sheet-ui { font: 13px/1.3 var(--p-font-body); color: var(--s-text-primary); }
.sheet-ui__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 16px; background: var(--p-cream-50); }
.sheet-ui__fbar { display: flex; height: 26px; align-items: center; border-block: 1px solid var(--s-border-strong); font-size: 13px; }
.sheet-ui__fbar span { padding: 0 10px; border-right: 1px solid var(--s-border-strong); height: 100%; display: flex; align-items: center; }
.sheet-ui__tabs { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 4px; padding: 6px 10px 10px; background: var(--p-cream-100); border-top: 1px solid var(--s-border-strong); font-size: 13px; white-space: nowrap; }
.sheet-ui__tabs span { padding: 4px 10px; border-radius: 6px; }
.sheet-ui__tabs .on { background: var(--p-olive-100); color: var(--s-text-brand); font-weight: var(--p-weight-semibold); }
.phone .sheet-ui__bar { padding: 30px 14px 10px; font-size: 15px; }
.phone .sheet-ui__tabs { padding-bottom: 22px; }

.g { border-collapse: collapse; table-layout: fixed; width: 100%; background: var(--p-cream-50); }
.g td, .g th { border: 1px solid var(--s-border-muted); padding: 0 6px; white-space: nowrap; overflow: hidden; vertical-align: middle; }
.g thead th, .g th.rn { background: var(--p-cream-100); color: var(--s-text-muted); font: 500 11px/1 var(--p-font-body); text-align: center; }
.g thead th { height: 20px; }
.g td.a { padding: 0; }
.g .title { font: 600 22px/1.1 var(--p-font-display); color: var(--s-text-brand); }
.g .maker { font-size: 11.5px; color: var(--s-text-muted); text-align: right; white-space: normal; line-height: 1.2; }
.g .muted { color: var(--s-text-muted); font-size: 12px; }
.g .r, .g .num { text-align: right; font-variant-numeric: tabular-nums; }
.g .b { font-weight: 700; }
.g .fine { color: var(--s-text-muted); font-size: 11.5px; }
.g .hero-band { background: var(--s-action-primary-bg); color: var(--s-action-primary-fg); font-weight: 700; letter-spacing: .04em; font-size: 13px; border-color: var(--s-action-primary-bg); }
.g .hero-band.stampw { font-size: 12px; font-weight: 500; letter-spacing: 0; }
.g .band { background: var(--p-olive-50); color: var(--s-text-brand); font-weight: 700; letter-spacing: .04em; font-size: 12px; }
.g .band .bsub { font-weight: 400; letter-spacing: 0; color: var(--s-text-muted); margin-left: 6px; }
.g .band.stamp { text-align: right; font-weight: 500; letter-spacing: 0; color: var(--s-text-muted); font-size: 11.5px; }
.g .rangecell { vertical-align: bottom; padding-bottom: 4px; }
.g .rng { font: 600 28px/1 var(--p-font-display); letter-spacing: -.01em; }
.g .lab { color: var(--s-text-secondary); font-size: 14px; }
.g .chg { font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.g .chg.up::before { content: "\25B2 "; font-size: 11px; }
.g .chg.down::before { content: "\25BC "; font-size: 11px; }
.g .pct { font-size: 12.5px; color: var(--s-text-muted); }
.g .up { color: var(--s-feedback-success); }
.g .down { color: var(--s-feedback-error); }
.g .flat { color: var(--s-text-secondary); }
.g .chartcell { padding: 6px 4px; vertical-align: top; }
.g .total { border-top: 2px solid var(--s-text-primary); }
.g .walk { font: 600 20px/1 var(--p-font-display); color: var(--s-text-brand); }
.g .tile { background: var(--p-olive-50); white-space: normal; }
.g .tl { font-size: 11.5px; color: var(--s-text-muted); font-weight: 600; vertical-align: bottom; }
.g .tv { font: 600 26px/1 var(--p-font-display); }
.g .tu { font: 500 13px var(--p-font-body); color: var(--s-text-muted); }
.g .tc { font-weight: 600; font-size: 12.5px; }
.g .ts { font-size: 11.5px; color: var(--s-text-muted); line-height: 1.2; vertical-align: top; }
svg.chart { width: 100%; height: auto; display: block; }
svg.chart .grid { stroke: var(--s-border-strong); stroke-width: 1; }
svg.chart .ax { fill: var(--s-text-muted); font: 11px var(--p-font-body); }
svg.chart .band { fill: var(--p-olive-100); stroke: none; }
svg.chart .line { fill: none; stroke: var(--s-text-brand); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
svg.chart .dot { fill: var(--s-text-brand); stroke: var(--p-cream-50); stroke-width: 2; }
svg.chart .lbl { fill: var(--s-text-primary); font: 700 13px var(--p-font-body); }

/* 3-card grid (templates/page.css .svc-grid) */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-space-lg); }
.card__icon { font-size: var(--p-text-20); }

/* the difference: two cards side by side */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-space-lg); }
.compare dl { margin: var(--s-space-md) 0 0; }
.compare dt { font-size: var(--p-text-13); font-weight: var(--p-weight-semibold); color: var(--s-text-muted); margin-top: var(--s-space-md); }
.compare dd { margin: 2px 0 0; }
.compare .card--ours { border: 2px solid var(--s-action-primary-bg); }

/* what's inside */
.inside-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-space-lg); }
.inside-grid .card { padding: var(--s-space-xl); }
.inside-grid .chip { align-self: flex-start; margin-bottom: var(--s-space-md); }

/* the two ways to start */
.offers { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s-space-lg); align-items: start; }
.offers .card { padding: var(--s-space-2xl) var(--s-space-xl); }
.offers .chip { align-self: flex-start; margin-bottom: var(--s-space-md); }
.offers .card > p { flex: none; }
.offers .card > .offer__price { color: var(--s-text-primary); }
.offer__price { display: flex; align-items: baseline; gap: var(--s-space-sm); margin: 0; color: var(--s-text-primary); }
.offer__price .t-caption { font-size: var(--p-text-16); }
.offers .card > .offer__renew { color: var(--s-text-secondary); margin: var(--s-space-sm) 0 0; font-size: var(--p-text-16); }
.offer__list { margin: var(--s-space-lg) 0; padding-left: 20px; color: var(--s-text-secondary); }
.offer__list li { margin: 6px 0; }
.offers .card > .offer__escape { font-size: var(--p-text-16); }
.offer__seen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-space-md); margin: 0 0 var(--s-space-lg); }
.offer__seen-item { background: var(--s-surface-sunken); border-radius: var(--s-radius-panel); padding: var(--s-space-md) var(--s-space-lg); }
.offer__seen-label { margin: 0 0 var(--s-space-xs); font-size: var(--p-text-13); font-weight: var(--p-weight-semibold); letter-spacing: var(--p-ls-wider); text-transform: uppercase; color: var(--s-text-brand); }
.offer__seen-item p { margin: 0; font-size: var(--p-text-15); line-height: var(--p-lh-body); color: var(--s-text-secondary); }
@media (max-width: 640px) { .offer__seen { grid-template-columns: 1fr; } }
.offers .card > .offer__cap { flex: none; margin: 0 0 var(--s-space-lg); font-size: var(--p-text-16); font-weight: var(--p-weight-semibold); color: var(--s-text-primary); }

.offer__addon { border: 1px solid var(--s-border-muted); background: var(--s-surface-sunken); border-radius: var(--s-radius-panel); padding: var(--s-space-lg); margin: 0 0 var(--s-space-lg); }
.offer__addon .offer__addon-price { margin: 0; font-size: var(--p-text-16); font-weight: var(--p-weight-semibold); color: var(--s-text-primary); }
.offer__addon .offer__list { margin: var(--s-space-md) 0; }
.offer__addon .offer__cap { margin: 0 0 var(--s-space-xs); font-size: var(--p-text-16); font-weight: var(--p-weight-semibold); color: var(--s-text-primary); }
.offer__addon .offer__addon-terms { margin: 0; font-size: var(--p-text-13); color: var(--s-text-muted); }
.offer__escape { border-left: 3px solid var(--p-olive-100); padding-left: var(--s-space-md); margin: 0 0 var(--s-space-xl); color: var(--s-text-secondary); }
.offer__cta { display: flex; flex-direction: column; align-items: stretch; gap: var(--s-space-sm); text-align: center; }
.offer__cta .t-caption { margin: 0; }
.snapshot { display: grid; gap: var(--s-space-md); margin-top: var(--s-space-lg); }
.snapshot .btn { width: 100%; }
.snapshot__status { margin: 0; min-height: 1.5em; }

@media (max-width: 900px) {
  .svc-grid, .inside-grid, .compare, .offers { grid-template-columns: 1fr; }
  .devices { padding-right: 16%; }
  .phone { width: 34%; bottom: -24px; }
}
@media (max-width: 640px) {
  .page-hero { padding-top: var(--s-space-2xl); }
  .page-hero .hero__cta { margin-top: var(--s-space-2xl); }
  .offers .card { padding: var(--s-space-xl) var(--s-space-lg); }
  .footer__top { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .devices { display: flex; align-items: flex-end; gap: var(--s-space-sm); padding-right: 0; }
  .laptop { flex: 1 1 auto; min-width: 0; }
  .phone { position: static; flex: 0 0 31%; width: auto; min-width: 0; padding: 2.4%; border-radius: var(--s-radius-panel); }
  .phone__view { border-radius: 10px; }
}
@media (max-width: 440px) {
  .nav__brand-name { display: none; }
  .nav .btn { font-size: var(--p-text-14); padding-inline: var(--s-space-md); }
}
  .g td.trec { font-size: 16px; line-height: 1.3; color: #57534e; white-space: normal !important; overflow: visible; vertical-align: top; padding-top: 2px; }

/* the free snapshot form's bot trap: off-screen, never seen or tabbed to */
.snapshot__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }