/* ==========================================================================
   THE TOOLS+ PAGE (work order H2)

   The approved rendering is docs/design/plus-page-reference-v8.html and
   this sheet reproduces its geometry from tokens. Every color is a
   token; every size is a token, a calc() of a token, or a rem value
   where the reference's hand-set size has no token (the T1 and H1
   precedent). The reference's raw hexes and stand-in sans are not
   carried over.

   Size notes, the reference's hand-set values at the 16-per-rem base:
   640 = 40rem, 24 = --space-lg, 26 = 1.625rem, 56 = 3.5rem, 36 = 2.25rem,
   22 = 1.375rem, 14 = .875rem, 30 = 1.875rem, 34 = 2.125rem,
   44 = 2.75rem, 28 = 1.75rem, 18 = 1.125rem, 13 = .8125rem,
   12 = --space-sm, 8 = --space-xs.

   CENTERING GOES THROUGH THE SANCTIONED UTILITY. The reference sets
   text-align on five blocks directly. Under the alignment ruling that
   is ad-hoc styling: centering is deliberate and named, so those blocks
   carry .u-center in the markup and this sheet declares no centering at
   all. The alignment gate enforces exactly that.
   ========================================================================== */

body {
  margin: 0;
  background: var(--color-ground);
  color: var(--color-ink-body);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-variant-numeric: var(--font-numeric-figures);
}

.wrap {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  /* Longhands ON PURPOSE, the H1 lesson: a vertical-padding shorthand
     once zeroed a wrap's side padding where no overflow check could see
     it. The gate measures these margins per section at phone width. */
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

/* ---- masthead ---------------------------------------------------------- */

.top { padding-top: 1.625rem; }

.wordmark {
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: 1.1875rem;
  letter-spacing: 0.34em;
  color: var(--color-gold-base);
  text-decoration: none;
}

/* ---- hero -------------------------------------------------------------- */

.hero { padding-top: 3.5rem; padding-bottom: 2.25rem; }

h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--weight-medium);
  font-size: clamp(2rem, 7vw, 2.75rem);
  line-height: var(--leading-tight);
  color: var(--color-headline);
}

.hero .sub {
  margin: var(--space-md) 0 0;
  font-size: 1.09375rem;
  max-width: 46ch;
}

/* ---- the show: the trend card ------------------------------------------ */

.showcard {
  background: var(--color-surface-card);
  border: var(--border-hairline) solid var(--color-hairline);
  border-radius: var(--radius-lg);
  padding: 1.375rem 1.375rem 1.125rem;
}

.showcard .cap {
  font-size: var(--text-caption);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

.showcard .metric {
  margin-top: 0.25rem;
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: 1.5625rem;
  line-height: var(--leading-snug);
}

.chartbox { margin-top: 0.875rem; }

/* The chart, drawn to the Ziva chart language: tint fill with a
   same-family outline, values labeled, the out-of-range month carrying
   the attention pair rather than a colour of its own. */
.v-band      { fill: var(--color-chart-good-fill); opacity: 0.55; }
.v-bandlabel { font-size: 0.625rem; fill: var(--color-chart-good-outline); }
.v-baseline  { stroke: var(--color-hairline); stroke-width: var(--border-data); }
.v-good      { fill: var(--color-chart-good-fill);
               stroke: var(--color-chart-good-outline);
               stroke-width: var(--border-data); }
.v-attention { fill: var(--color-chart-attention-fill);
               stroke: var(--color-chart-attention-outline);
               stroke-width: var(--border-data); }
.v-value     { font-size: 0.75rem; font-weight: var(--weight-semibold);
               fill: var(--color-chart-label-primary); }
.v-value-attention { font-weight: var(--weight-bold);
                     fill: var(--color-chart-attention-outline); }
.v-month     { font-size: 0.65625rem; fill: var(--color-ink-muted); }

/* Trend bars grow even when reduce zeros the interface durations. */
.motion-ok .trend-grow {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  transition: transform var(--duration-build) var(--ease-out);
}
.motion-ok .trend-grow.is-drawn { transform: scaleY(1); }
.motion-ok .trend-value {
  opacity: 0;
  transition: opacity var(--duration-build-fade) var(--ease-out);
}
.motion-ok .trend-value.is-shown { opacity: 1; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: 0.875rem;
  background: var(--color-status-action-fill);
  border: var(--border-chip) solid var(--color-status-action-outline);
  color: var(--color-status-action-ink);
  font-size: 0.78125rem;
  font-weight: var(--weight-semibold);
  padding: 0.25rem 0.6875rem;
  border-radius: var(--radius-pill);
}

/* The examples marking. It is load-bearing copy, not decoration:
   nothing on this page is anyone's real result. */
.example {
  margin: 0.75rem 0 0;
  font-size: 0.78125rem;
  color: var(--color-ink-muted);
}

.showline { padding-top: 1.875rem; padding-bottom: 0.625rem; }

.showline p {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--weight-semibold);
  font-size: 1.9375rem;
  line-height: var(--leading-snug);
  color: var(--color-headline);
  max-width: 22ch;
}

/* ---- features ---------------------------------------------------------- */

.feats { padding-top: 2.125rem; }

.feat {
  display: flex;
  gap: 0.875rem;
  padding-top: 0.8125rem;
  padding-bottom: 0.8125rem;
  border-bottom: var(--border-hairline) solid var(--color-hairline);
}
.feat:last-child { border-bottom: none; }

.dot {
  width: var(--space-xs);
  height: var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--color-gold-base);
  flex-shrink: 0;
  margin-top: 0.5625rem;
}

.feat p { margin: 0; font-size: 1.0625rem; line-height: 1.55; }
.feat b { font-weight: var(--weight-semibold); font-size: 1.09375rem; }

/* ---- the monthly reminder ---------------------------------------------- */

.remind {
  margin-top: 1.875rem;
  background: var(--color-surface-card);
  border: var(--border-hairline) solid var(--color-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-md) 1.125rem;
  display: flex;
  gap: 0.8125rem;
  align-items: flex-start;
}

.bell {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-band);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9375rem;
}

.remind .from { font-size: 0.78125rem; color: var(--color-ink-muted); }
.remind .msg  { font-weight: var(--weight-semibold); font-size: 0.9375rem;
                margin-top: 0.0625rem; }
.remind .body { font-size: 0.84375rem; color: var(--color-ink-muted);
                margin-top: 0.125rem; }
.remcap { margin: 0.625rem 0 0; font-size: 0.84375rem;
          color: var(--color-ink-muted); }

/* ---- price ------------------------------------------------------------- */

.price {
  margin-top: 2.75rem;
  background: var(--color-surface-band);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.625rem;
}

.opts { display: flex; gap: var(--space-sm); }

.opt {
  flex: 1;
  background: var(--color-surface-card);
  border: var(--border-hairline) solid var(--color-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-md) 0.875rem 0.875rem;
  position: relative;
}
.opt.annual { border: var(--border-chip) solid var(--color-gold-base); }

.badge {
  position: absolute;
  top: -0.6875rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-gold-base);
  color: var(--color-ground);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0.03em;
  padding: 0.1875rem 0.625rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.olabel { font-size: 0.75rem; letter-spacing: 0.06em;
          text-transform: uppercase; color: var(--color-ink-muted); }
.onum   { font-family: var(--font-serif); font-weight: var(--weight-semibold);
          font-size: 1.875rem; color: var(--color-ink-body);
          margin-top: 0.125rem; }
.oper   { font-size: var(--text-caption); color: var(--color-ink-muted); }

.price .lock { margin: var(--space-sm) 0 0; font-size: 0.9375rem;
               font-weight: var(--weight-medium); }

/* display:contents made form.submit silent. The form is a real box. */
.waitlist-form {
  margin: 1.125rem 0 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
}
.waitlist-form input[type="email"] {
  font: inherit;
  font-size: 0.96875rem;
  padding: 0.8125rem 1rem;
  border: var(--border-hairline) solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-surface-card);
  color: var(--color-ink-body);
  width: 100%;
}

.btn {
  display: inline-block;
  margin-top: 1.125rem;
  background: var(--color-gold-base);
  color: var(--color-ground);
  text-decoration: none;
  font-size: 0.96875rem;
  font-weight: var(--weight-medium);
  padding: 0.8125rem 1.75rem;
  border-radius: var(--radius-md);
}
.waitlist-form .btn {
  appearance: none;
  -webkit-appearance: none;
  margin-top: 0;
  border: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}

.price .after { margin: 0.625rem 0 0; font-size: 0.84375rem;
                color: var(--color-ink-muted); }

/* ---- trust and the ladder ---------------------------------------------- */

.trust { padding-top: 1.875rem; }
.trust p { margin: 0; font-size: 0.90625rem; color: var(--color-ink-muted);
           max-width: 48ch; }

.ladder { padding-top: 2.25rem; padding-bottom: 3.5rem; }
.ladder p {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-ink-muted);
  max-width: 48ch;
  border-top: var(--border-hairline) solid var(--color-hairline);
  padding-top: 1.125rem;
}
.ladder a { color: var(--color-gold-base); text-decoration: none; }