/* -----------------------------------------------------------------------
   SvarKlar - /services page stylesheet (v3, rebuilt 2026-05-13).

   Section order (locked):
     1. Hero            (.t-svc-hero-b)
     2. Lead hub        (#hub      -> arc-1, cream)
     3. Channels        (#channels -> arc-2, warm cream) + Plus pill
     4. Your control    (#modes    -> arc-3, deeper warm) merge of modes, send-as, urgent
     5. Setup           (#setup    -> arc-4, tan) shrunk strip + closer
     6. Promises        (#promises -> arc-6, espresso) three numeral cards
     7. FAQ             (.t-faq    -> ink-warm, shared from site.css)
     8. Final CTA       (.t-final  -> photo bg, shared)

   Depends on: tokens.css, components.css, site.css (.t-hero, .t-final,
   .t-hub-app, .t-cta and the palette arc tokens --arc-1..--arc-6).
   ----------------------------------------------------------------------- */


/* ====================================================
   0. SHARED SECTION HEAD + UTILITIES
   ==================================================== */

.t-svc-head { text-align: center; margin: 0 auto 56px; max-width: 720px; }
.t-svc-head.is-left { text-align: left; margin-left: 0; max-width: 760px; }
.t-svc-head h2 {
  font-family: var(--heading-font);
  font-size: var(--h2-size-d);
  font-weight: var(--h2-weight);
  line-height: var(--h2-lh);
  letter-spacing: var(--h2-ls);
  color: var(--ink);
  margin: 0 0 14px;
  text-wrap: balance;
}
/* Token-driven step-down at canon bands (1100, 640). Channels + FAQ ride the
   shared section-H2 tokens, single source of truth in tokens.css. */
@media (max-width: 1100px) {
  .t-svc-head h2 { font-size: var(--h2-size-t); }
}
@media (max-width: 640px) {
  .t-svc-head h2 { font-size: var(--h2-size-m); }
}
.t-svc-head h2 em { line-height: 1.05; white-space: nowrap; }
.t-svc-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 16px;
  position: relative;
}
.t-svc-eyebrow::before {
  content: "";
  display: inline-block;
  width: 24px; height: 2px;
  background: var(--gold-deep);
  vertical-align: middle;
  margin-right: 10px;
  margin-bottom: 2px;
  border-radius: 1px;
}
.t-svc-sub {
  font-size: 1.05rem;
  color: var(--ink);
  line-height: 1.6;
  margin: 0;
  text-wrap: pretty;
}
.t-svc-note {
  text-align: center;
  margin: 32px auto 0;
  max-width: 580px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.55;
}

/* In-section CTA at the bottom of #channels. Sits on arc-2 cream. Centered
   button below the closing customizable note, no extra micro line. */
.t-svc-cc-cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
@media (max-width: 1100px) { .t-svc-cc-cta { margin-top: 32px; } }
@media (max-width: 640px) { .t-svc-cc-cta { margin-top: 24px; } }


/* ====================================================
   PALETTE ARC, section backgrounds.
   No two adjacent sections share a surface.
   ==================================================== */

#hub               { background: var(--arc-1); }
#channels          { background: var(--arc-2); }
#modes             { background: var(--arc-3); }
#setup             { background: var(--arc-4); }
#promises          { background: var(--arc-6); color: #f5f0e6; }


/* ====================================================
   1. HERO  (centered photo, stat pill, CTA)
   ==================================================== */

/* Hero fits the 695 fold cleanly. The global .t-hero min-height 720
   would push the trust strip below the viewport. Scope-override to 0
   so the 100vh + 880px max-height rule from site.css drives the
   height alone. */
.t-svc-hero-b { min-height: 0; }
.t-svc-hero-b .t-h1-line { white-space: normal; }

.t-svc-hero-b .t-hero-overlay {
  background:
    radial-gradient(ellipse 75% 60% at 50% 50%,
      rgba(10, 11, 13, 0.62) 0%,
      rgba(10, 11, 13, 0.55) 35%,
      rgba(10, 11, 13, 0.42) 65%,
      rgba(10, 11, 13, 0.32) 100%),
    linear-gradient(180deg,
      rgba(10, 11, 13, 0.35) 0%,
      rgba(10, 11, 13, 0.28) 40%,
      rgba(10, 11, 13, 0.32) 70%,
      rgba(10, 11, 13, 0.48) 100%);
}

.t-svc-hero-b .t-hero-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 60vh;
}
.t-svc-hero-b .t-hero-copy {
  max-width: 920px;
  text-align: center;
  margin: 0 auto;
}
.t-svc-hero-b .t-hero-cta-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 36px;
}
.t-svc-hero-b .t-hero-trust { justify-content: center; }

.t-svc-hero-b-stats {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 36px auto 40px;
  max-width: 720px;
  width: 100%;
}
.t-svc-hero-b-stat {
  flex: 1;
  padding: 8px 24px;
  text-align: center;
  position: relative;
}
.t-svc-hero-b-stat + .t-svc-hero-b-stat {
  border-left: 1px solid rgba(245, 240, 230, 0.22);
}
.t-svc-hero-b-stat-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1;
  color: #f5f0e6;
  letter-spacing: 0.005em;
  margin-bottom: 6px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.t-svc-hero-b-stat-num em {
  font-style: normal;
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: inherit;
}
.t-svc-hero-b-stat-l {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--body-on-dark);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}


/* ====================================================
   2. LEAD HUB  (reuses .t-hub-app primitives from site.css)
   ==================================================== */

.t-svc-hub {
  padding: 120px 0;
  position: relative;
}
/* U1: soft fade at the top of the hub so the hero-to-cream transition
   isn't a hard horizontal line. ~64px ink wash bleeds into the cream. */
.t-svc-hub::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 64px;
  background: linear-gradient(180deg,
    rgba(10, 11, 13, 0.10) 0%,
    rgba(10, 11, 13, 0.04) 50%,
    rgba(10, 11, 13, 0) 100%);
  pointer-events: none;
}
.t-svc-hub-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: center;
}
/* Right column wrapper: sub + features list together. */
.t-svc-hub-col { min-width: 0; }

/* Bullet list with a gold hairline rail down the left side. */
.t-svc-hub-features {
  list-style: none;
  margin: 0;
  padding: 0 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: relative;
}
.t-svc-hub-features::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 1.5px;
  background: rgba(201, 168, 76, 0.38);
  border-radius: 1px;
  pointer-events: none;
}

/* Each bullet: 48px chip column + text. Tick floats outside via absolute. */
.t-svc-hub-features li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 18px;
  align-items: center;
  border-top: 0;
  padding: 0;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
  position: relative;
}

/* Short horizontal tick from the rail to the chip. */
.t-svc-hub-tick {
  position: absolute;
  left: -28px;
  top: 50%;
  width: 18px;
  height: 1.5px;
  background: rgba(201, 168, 76, 0.55);
  transform: translateY(-50%);
  border-radius: 1px;
  pointer-events: none;
}

/* Icon chip: 40px dark square with gold line-glyph. */
.t-svc-hub-features .ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: var(--ink);
  color: var(--gold);
  border: 1px solid var(--ink);
  border-radius: var(--r-md);
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(28, 24, 12, 0.18);
}
.t-svc-hub-features .ic svg {
  width: 20px;
  height: 20px;
  display: block;
  stroke-width: 2.2;
}



/* ====================================================
   3. CHANNELS  (2-col paper-chip grid + Plus pill strip)
   ==================================================== */

.t-svc-channels {
  padding: 120px 0;
}
.t-svc-cc {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 0;
  max-width: 1120px;
  margin: 0 auto;
  padding: 8px 0;
  align-items: start;
}
.t-svc-cc-group {
  padding: 0 36px;
  position: relative;
}
.t-svc-cc-group:first-child { padding-left: 8px; }
.t-svc-cc-group:last-child  { padding-right: 8px; }
.t-svc-cc-group + .t-svc-cc-group::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 4px;
  width: 1.5px;
  background: rgba(28, 24, 12, 0.28);
}
.t-svc-cc-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f5f0e6;
  background: var(--ink);
  padding: 7px 14px 7px 12px;
  border-radius: var(--r-pill);
  margin: 0 0 22px;
  box-shadow: 0 2px 6px rgba(28, 24, 12, 0.18);
}
.t-svc-cc-label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--gold);
  flex-shrink: 0;
  margin: 0;
}
.t-svc-cc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
}
.t-svc-cc-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 12px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.002em;
  color: var(--ink);
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
  transition: background-color var(--dur-default) var(--ease-standard),
              border-color var(--dur-default) var(--ease-standard),
              box-shadow var(--dur-default) var(--ease-standard);
}
.t-svc-cc-chip:hover {
  background: var(--cream);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.t-svc-cc-chip svg {
  width: 22px;
  height: 22px;
  color: var(--gold-deep);
  flex-shrink: 0;
}
.t-svc-cc-chip.is-email svg        { color: #2563EB; }
.t-svc-cc-chip.is-webform svg      { color: #6366F1; }
.t-svc-cc-chip.is-webchat svg      { color: #0EA5E9; }
.t-svc-cc-chip.is-sms svg          { color: #34C759; }
.t-svc-cc-chip.is-whatsapp svg     { color: #25D366; }
.t-svc-cc-chip.is-fb svg           { color: #0866ff; }
.t-svc-cc-chip.is-instagram svg    { color: #E4405F; }
.t-svc-cc-chip.is-google svg       { color: #4285f4; }
.t-svc-cc-chip.is-angi svg         { color: #FF6153; }
.t-svc-cc-chip.is-homeadvisor svg  { color: #F77B23; }
.t-svc-cc-chip.is-thumbtack svg    { color: #009FD9; }
.t-svc-cc-chip.is-yelp svg         { color: #C41200; }
.t-svc-cc-chip.is-nextdoor svg     { color: #00B246; }
.t-svc-cc-chip.is-servicetitan svg { color: #006BB6; }
.t-svc-cc-chip.is-housecallpro svg { color: #2C2E83; }
.t-svc-cc-chip.is-jobber svg       { color: #00C875; }
.t-svc-cc-chip.is-fieldedge svg    { color: #59b654; }

/* After-the-job row, sits below the 2-col chip grid, matches chip pattern */
.t-svc-cc-after {
  max-width: 1120px;
  margin: 48px auto 0;
  padding: 0 8px;
}
.t-svc-cc-after .t-svc-cc-label { margin-bottom: 14px; }
.t-svc-cc-after-body {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 14px 0 0;
}
.t-svc-cc-bottom {
  max-width: 1120px;
  margin: 48px auto 0;
  padding: 0 8px;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 0;
}
.t-svc-cc-bottom .t-svc-cc-after {
  max-width: none;
  margin: 0;
  padding: 0 36px;
  position: relative;
}
.t-svc-cc-bottom .t-svc-cc-after:first-child { padding-left: 8px; }
.t-svc-cc-bottom .t-svc-cc-after:last-child  { padding-right: 8px; }
.t-svc-cc-bottom .t-svc-cc-after + .t-svc-cc-after::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 4px;
  width: 1.5px;
  background: rgba(28, 24, 12, 0.28);
}
.t-svc-cc-chip.is-payments svg { color: #2c8a4d; }


/* ====================================================
   4. YOUR CONTROL  (#modes; V3 split: left controls + right email preview)
   Left sub-panels are TRANSPARENT on arc-3 (no paper bg, no shadow,
   no per-panel border). Hairline dividers group them as 3 blocks.
   Right preview stays a card (it represents an email window).
   ==================================================== */

.t-svc-control {
  padding: 120px 0;
}

/* Section head (left-aligned, eyebrow + H2 + sub) */
#modes .v3-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 28px;
  padding: 6px 12px 6px 8px;
  background: rgba(232, 196, 89, 0.18);
  border: 1px solid rgba(201, 168, 76, 0.30);
  border-radius: var(--r-pill);
}
#modes .v3-eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--gold-deep);
  border-radius: 999px;
  vertical-align: middle;
  margin-right: 8px;
  margin-bottom: 2px;
}
#modes .v3-head {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}
#modes .v3-h2 {
  font-family: var(--heading-font);
  font-size: var(--h2-size-d);
  font-weight: var(--h2-weight);
  line-height: var(--h2-lh);
  letter-spacing: var(--h2-ls);
  color: var(--ink);
  margin: 0 0 14px;
  text-wrap: balance;
}
#modes .v3-h2 em { line-height: 1.05; white-space: nowrap; }
@media (max-width: 1100px) {
  #modes .v3-h2 { font-size: var(--h2-size-t); }
}
@media (max-width: 640px) {
  #modes .v3-h2 { font-size: var(--h2-size-m); }
}
#modes .v3-sub {
  font-size: 1.08rem;
  color: var(--ink);
  line-height: 1.55;
  margin: 0 auto;
  max-width: 580px;
  text-wrap: pretty;
}

/* Single controls column, centered */
#modes .v3-split {
  display: block;
  max-width: 760px;
  margin: 0 auto;
}
#modes .v3-controls {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Sub-panels: transparent. Hairline divider between blocks. Centered content. */
#modes .v3-panel {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  text-align: center;
}
#modes .v3-panel + .v3-panel {
  padding-top: 32px;
  border-top: 1px solid rgba(28, 24, 12, 0.14);
}

/* Panel eyebrow: dark ink stamp pill with gold dot, matches Channels labels */
#modes .v3-panel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f5f0e6;
  background: var(--ink);
  padding: 7px 14px 7px 12px;
  border-radius: var(--r-pill);
  margin: 0 0 22px;
  box-shadow: 0 2px 6px rgba(28, 24, 12, 0.18);
}
#modes .v3-panel-eyebrow::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--gold);
  flex-shrink: 0;
}

#modes .v3-panel-foot {
  margin: 14px auto 0;
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.55;
  text-wrap: pretty;
  max-width: 480px;
}
#modes .v3-panel-tagline {
  display: inline;
  font-family: var(--heading-font);
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-right: 6px;
}

/* MODE: two-up explainers under the segmented visual (one per mode) */
#modes .v3-mode-explainers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 760px;
  margin: 20px auto 0;
  text-align: center;
}
#modes .v3-mode-explainer {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.55;
  text-wrap: pretty;
}

/* MODE: segmented toggle, narrower so it doesn't feel washed out */
#modes .v3-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
  text-align: left;
}
#modes .v3-seg-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink);
  min-width: 0;
}
#modes .v3-seg-opt.is-active {
  background: var(--paper);
  border-color: var(--border-strong);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(28, 24, 12, 0.06);
}
#modes .v3-seg-ic {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  flex-shrink: 0;
  border: 1px solid var(--border);
}
#modes .v3-seg-opt.is-active .v3-seg-ic {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--gold-deep);
}
#modes .v3-seg-lbl {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  line-height: 1.1;
}
#modes .v3-seg-name {
  font-family: var(--font-sans);
  font-size: 0.93rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#modes .v3-seg-meta {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* M9: kill gold-vs-gray meta color drift; both halves use base ink-soft */

/* SEND-AS: 2 boxes side-by-side */
#modes .v3-radio-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 12px;
  text-align: center;
}
#modes .v3-radio {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-items: stretch;
  padding: 14px 14px;
  background: var(--cream-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  position: relative;
}
#modes .v3-radio.is-active {
  background: var(--paper);
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 2px var(--gold-wash);
}
#modes .v3-radio-dot {
  width: 16px; height: 16px;
  border-radius: 999px;
  background: var(--paper);
  border: 1.5px solid var(--border-strong);
  margin-top: 3px;
  flex-shrink: 0;
  position: relative;
}
#modes .v3-radio.is-active .v3-radio-dot {
  border-color: var(--gold-deep);
  background: var(--paper);
}
#modes .v3-radio.is-active .v3-radio-dot::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 999px;
  background: var(--gold-deep);
}
#modes .v3-radio-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
}
#modes .v3-radio-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
#modes .v3-radio-name {
  font-family: var(--font-sans);
  font-size: 0.96rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}
#modes .v3-radio-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--gold-deep);
  flex-shrink: 0;
}
#modes .v3-radio-icon svg { width: 100%; height: 100%; }
#modes .v3-radio-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  padding: 3px 8px 3px 6px;
  border-radius: var(--r-pill);
}
#modes .v3-radio-pill svg { color: var(--ink); flex-shrink: 0; }
#modes .v3-radio-desc {
  font-size: 0.84rem;
  color: var(--ink);
  line-height: 1.45;
  text-wrap: pretty;
}
#modes .v3-radio-addr {
  display: inline-block;
  width: max-content;
  max-width: 100%;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 4px 8px;
  margin-top: 6px;
  letter-spacing: 0.005em;
  white-space: nowrap;
}
#modes .v3-radio.is-active .v3-radio-addr {
  background: var(--gold-wash);
  border-color: var(--gold-deep);
}

/* URGENT: callout card on cream paper, gold top rail, gold bell disc */
#modes .v3-urgent-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 24px 36px 30px;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  overflow: hidden;
}
#modes .v3-urgent-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-deep) 100%);
}
#modes .v3-urgent-bell {
  width: 52px; height: 52px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0;
  box-shadow: 0 2px 8px rgba(28, 24, 12, 0.18);
}
#modes .v3-urgent-bell svg { width: 24px; height: 24px; }

#modes .v3-urgent-h {
  font-family: var(--heading-font);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 4px 0 0;
  line-height: 1.3;
  text-wrap: balance;
}

#modes .v3-urgent-desc {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.55;
  text-wrap: pretty;
  max-width: 440px;
}

/* RIGHT: Email preview card */
#modes .v3-preview {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
#modes .v3-mail {
  background: var(--paper);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Mail chrome (window bar) */
#modes .v3-mail-chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: var(--cream-3);
  border-bottom: 1px solid var(--border-strong);
}
#modes .v3-mail-dots {
  display: inline-flex;
  gap: 6px;
}
#modes .v3-mail-dots span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(28, 24, 12, 0.22);
}
#modes .v3-mail-tab {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.003em;
  text-align: center;
  background: var(--paper);
  padding: 4px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#modes .v3-mail-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
#modes .v3-mail-live-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: #2c8a4d;
  box-shadow: 0 0 0 2px rgba(44, 138, 77, 0.22);
}

/* Urgent banner inside mail */
#modes .v3-mail-urgent {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: #6b1d1d;
  color: #ffe7c4;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
#modes .v3-mail-urgent-ic {
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--gold);
  color: #6b1d1d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
#modes .v3-mail-urgent-meta {
  margin-left: auto;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(255, 231, 196, 0.78);
  font-size: 0.76rem;
}

/* Mail header rows (From / To / Subject) */
#modes .v3-mail-head {
  padding: 18px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  background: var(--paper);
}
#modes .v3-mail-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: center;
}
#modes .v3-mail-k {
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
#modes .v3-mail-v {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
#modes .v3-mail-avatar {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--cream-3);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
#modes .v3-mail-avatar-brand {
  background: var(--ink);
  border-color: var(--ink);
  padding: 4px;
}
#modes .v3-mail-vmain {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
#modes .v3-mail-vmain b {
  font-family: var(--font-sans);
  font-size: 0.94rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.005em;
}
#modes .v3-mail-vsub {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink);
  letter-spacing: 0.003em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#modes .v3-mail-subj {
  font-family: var(--font-sans);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.012em;
  line-height: 1.3;
  text-wrap: balance;
}

/* Mail body */
#modes .v3-mail-body {
  padding: 22px 24px 8px;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  color: var(--ink);
  line-height: 1.6;
}
#modes .v3-mail-body p { margin: 0 0 14px; text-wrap: pretty; }
#modes .v3-mail-body p:last-child { margin-bottom: 0; }
#modes .v3-mail-sig-line {
  margin-top: 22px !important;
  color: var(--ink);
}
#modes .v3-mail-sig {
  margin-top: 4px !important;
  font-size: 0.86rem;
  color: var(--ink);
  line-height: 1.45;
}

/* Mail footer stamp */
#modes .v3-mail-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 24px 18px;
  margin-top: 8px;
  border-top: 1px dashed var(--border);
  flex-wrap: wrap;
}
#modes .v3-mail-stamp {
  display: inline-flex;
  align-items: stretch;
  border-radius: 4px;
  overflow: hidden;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#modes .v3-mail-stamp-l {
  background: var(--ink);
  color: #fff;
  padding: 5px 10px;
}
#modes .v3-mail-stamp-r {
  background: var(--gold);
  color: var(--ink);
  padding: 5px 11px;
  font-family: var(--font-mono);
}
#modes .v3-mail-foot-meta {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--ink);
  line-height: 1.4;
}

#modes .v3-preview-caption {
  margin: 0;
  padding: 0 4px;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--ink);
  line-height: 1.45;
  text-align: right;
  font-style: italic;
}


/* ====================================================
   5. SETUP  (storyboard: 3 frames + 2 gold connector arrows + closer)
   Section background set in palette arc above: #setup -> var(--arc-4).
   Desktop grid: 1fr 80px 1fr 80px 1fr; rotates to vertical column at
   <= 900px, with arrows pivoted to down-pointing.
   ==================================================== */

.t-svc-setup {
  padding: 120px 0;
}

/* Setup section H2 rides the shared tokens (no clamp override). */
#setup .t-svc-head h2 {
  line-height: 1.08;
  letter-spacing: -0.020em;
}
/* Caveat accent uses the deeper bronze for legibility on the tan arc-4 bg,
   same token as the /about Why-I-built head. */
#setup .t-svc-head h2 em { color: var(--gold-ink); }

/* Storyboard board: 3 frames + 2 connectors on desktop. */
.t-svc-setup-board {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 80px 1fr 80px 1fr;
  gap: 0;
  align-items: stretch;
  max-width: 1136px;
}

/* One storyboard frame. */
.t-svc-setup-frame {
  background: var(--paper);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
/* Thin gold rail across the top of each frame. */
.t-svc-setup-frame::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-deep) 100%);
  opacity: 0.85;
}

/* Stage: edge-to-edge image, fills the top of the frame card. */
.t-svc-setup-frame-stage {
  background: var(--cream-2);
  padding: 0;
  display: block;
  overflow: hidden;
}
.t-svc-setup-frame-scene {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  display: block;
  object-fit: cover;
}

/* Body: tape sticker + caption + heading + paragraph. */
.t-svc-setup-frame-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
  position: relative;
}

/* Tape sticker eyebrow, faux-physical detail. */
.t-svc-setup-frame-tape {
  position: absolute;
  top: -10px;
  left: 22px;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  padding: 4px 10px 4px 10px;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(28, 24, 12, 0.16);
}

.t-svc-setup-frame-h {
  font-family: var(--heading-font);
  font-size: 1.22rem;
  font-weight: 600;
  letter-spacing: -0.010em;
  color: var(--ink);
  margin: 0 0 10px;
  line-height: 1.25;
  text-wrap: balance;
}

.t-svc-setup-frame-p {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.55;
  margin: 0;
  text-wrap: pretty;
}

/* Connector arrow between frames. */
.t-svc-setup-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  padding: 0 8px;
  /* Vertically center to the frame body region, not the top stage. */
  margin-top: 24px;
}

.t-svc-setup-arrow-caption {
  font-family: var(--font-accent);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gold-deep);
  line-height: 1;
  letter-spacing: 0.005em;
}

.t-svc-setup-arrow-svg {
  width: 64px;
  height: 24px;
  display: block;
  transition: transform var(--dur-default) var(--ease-standard);
}

/* Storyboard responsive: rotate to vertical column at the canon tablet band
   (<=1100), arrows pivot to down-pointing. Section padding stays in lockstep
   with sibling sections via the 1100/640 breakpoints further down. */
@media (max-width: 1100px) {
  .t-svc-setup-board {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 520px;
  }
  .t-svc-setup-frame { width: 100%; }
  .t-svc-setup-arrow {
    margin: 14px 0;
    padding: 6px 0 4px;
    flex-direction: column;
    gap: 4px;
  }
  .t-svc-setup-arrow-caption { margin-bottom: 2px; }
  .t-svc-setup-arrow-svg {
    transform: rotate(90deg);
    width: 48px;
    height: 22px;
  }
}

@media (max-width: 640px) {
  .t-svc-setup-arrow { display: none; }
  .t-svc-setup-board { gap: 32px; }
  .t-svc-setup-frame-body  { padding: 22px 22px 24px; }
  .t-svc-setup-board { max-width: 460px; }
  .t-svc-setup-frame-body { padding: 22px 20px 22px; }
  .t-svc-setup-frame-tape { font-size: 0.6rem; padding: 3px 9px; left: 18px; }
  .t-svc-setup-frame-h { font-size: 1.12rem; }
  .t-svc-setup-frame-p { font-size: 0.92rem; }
}

@media (max-width: 420px) {
  .t-svc-setup-board { max-width: 100%; }
}


/* ====================================================
   6. PROMISES  (espresso; four numeral cards + CTA at end)
   ==================================================== */

.t-svc-promises {
  padding: 120px 0;
  position: relative;
}
.t-svc-promises .t-svc-head h2 { color: #f5f0e6; }
.t-svc-promises em {
  color: var(--gold);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.t-svc-promises-numerals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 1120px;
  margin: 0 auto;
  position: relative;
}
.t-svc-promise-num-col {
  padding: 12px 32px;
  text-align: center;
  position: relative;
}
.t-svc-promise-num-col:first-child { padding-left: 12px; }
.t-svc-promise-num-col:last-child  { padding-right: 12px; }
/* vertical hairlines between cards */
.t-svc-promise-num-col + .t-svc-promise-num-col::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(245, 240, 230, 0.42) 14%,
    rgba(245, 240, 230, 0.42) 86%,
    transparent 100%);
}

.t-svc-promise-num-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  padding: 5px 12px 5px 10px;
  border-radius: var(--r-pill);
  margin: 0 0 24px;
}
.t-svc-promise-num-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ink);
  flex-shrink: 0;
}
.t-svc-promise-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.8rem, 4.6vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.005em;
  color: #f5f0e6;
  margin: 0 0 12px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.t-svc-promise-num-unit {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 0.4em;
  color: var(--body-on-dark);
  margin-left: 2px;
  letter-spacing: 0;
  text-shadow: none;
}
.t-svc-promise-num-claim {
  font-family: var(--heading-font);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: #f5f0e6;
  line-height: 1.35;
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(245, 240, 230, 0.14);
  text-wrap: pretty;
}
.t-svc-promise-num-body {
  font-size: 0.92rem;
  color: var(--body-on-dark);
  line-height: 1.55;
  margin: 0;
  text-wrap: pretty;
  max-width: 32ch;
}

/* In-section CTA at the bottom of #promises. Sits on arc-6 espresso. Centered
   button below the three numeral cards, with a small micro line under it. */
.t-svc-promises-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 56px;
  text-align: center;
}
.t-svc-promises-cta-micro {
  font-family: var(--font-sans);
  font-size: 0.92rem;
  color: #f5f0e6;
  margin: 0;
  text-wrap: pretty;
}
@media (max-width: 1100px) { .t-svc-promises-cta { margin-top: 40px; } }
@media (max-width: 640px) { .t-svc-promises-cta { margin-top: 32px; } }


/* ====================================================
   7. RESPONSIVE
   ==================================================== */

@media (max-width: 1100px) {
  /* Hero at iPad widths (760-1100): anchor content near top so the
     trust strip has visible breathing room below it (was centered and
     sitting too close to the hub edge). */
  .t-svc-hero-b { align-items: flex-start; }
  .t-svc-hero-b .t-hero-inner { padding-top: 168px; padding-bottom: 88px; }

  .t-svc-hub-grid { grid-template-columns: 1fr; gap: 48px; }
  .t-svc-hub-col { max-width: 560px; margin: 0 auto; width: 100%; }
  .t-svc-cc {
    grid-template-columns: 1fr;
    padding: 32px 28px;
  }
  .t-svc-cc-group { padding: 28px 0; }
  .t-svc-cc-group + .t-svc-cc-group::before {
    left: 0; right: 0;
    top: 0; bottom: auto;
    width: auto; height: 1.5px;
  }
  .t-svc-cc-bottom {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 0;
  }
  .t-svc-cc-bottom .t-svc-cc-after { padding: 28px 0; }
  .t-svc-cc-bottom .t-svc-cc-after:first-child { padding-top: 0; }
  .t-svc-cc-bottom .t-svc-cc-after + .t-svc-cc-after::before {
    left: 0; right: 0;
    top: 0; bottom: auto;
    width: auto; height: 1.5px;
  }

  /* YOUR CONTROL: stack left and right columns; drop sticky */
  #modes .v3-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  #modes .v3-controls {
    position: static;
    top: auto;
    gap: 28px;
  }
  #modes .v3-panel + .v3-panel { padding-top: 28px; }
  #modes .v3-preview-caption { text-align: left; }

  /* Send-as: 2-up grid collapses to single column from iPad down */
  #modes .v3-radio-list {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  #modes .v3-radio-head { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
  #modes .v3-radio-addr { font-size: 0.82rem; margin-top: 2px; }

  /* M7: Mode toggle + explainers both collapse to single column at iPad */
  #modes .v3-seg { grid-template-columns: 1fr; }
  #modes .v3-mode-explainers {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 520px;
  }

  /* Promises: 3-up to single column at iPad and below */
  .t-svc-promises-numerals {
    grid-template-columns: 1fr;
    row-gap: 36px;
    max-width: 560px;
  }
  .t-svc-promise-num-col { padding: 12px 24px; }
  .t-svc-promise-num-col:first-child { padding-left: 12px; }
  .t-svc-promise-num-col:nth-child(2) { padding-right: 12px; }
  .t-svc-promise-num-col:nth-child(3) { padding-left: 12px; }
  .t-svc-promise-num-col + .t-svc-promise-num-col::before { display: none; }
  .t-svc-promise-num-col:nth-child(2)::before,
  .t-svc-promise-num-col:nth-child(4)::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 1px;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(245, 240, 230, 0.20) 14%,
      rgba(245, 240, 230, 0.20) 86%,
      transparent 100%);
  }

  .t-svc-hub,
  .t-svc-setup,
  .t-svc-channels,
  .t-svc-control,
  .t-svc-promises {
    padding: 88px 0;
  }
}

@media (max-width: 640px) {
  /* Hero at mobile: align to the canon 120/64 standard. The <=1100 rule
     above sets 168/96 for iPad photo-hero breathing room, but on phone
     that's too tall. */
  .t-svc-hero-b .t-hero-inner { padding-top: 120px; padding-bottom: 64px; }

  .t-svc-head { margin-bottom: 36px; }
  .t-svc-sub { font-size: 0.98rem; }

  .t-svc-promise-num-col { padding: 12px 16px; }

  .t-svc-cc-chip {
    font-size: 0.85rem;
    padding: 9px 14px 9px 12px;
    gap: 8px;
  }
  .t-svc-cc-chip svg {
    width: 20px;
    height: 20px;
  }

  /* Plus pill becomes its own line on phones */
  .t-svc-cc-plus {
    flex-direction: column;
    gap: 8px;
    text-align: center;
    padding: 16px 18px;
  }

  /* Stat pill stays one row at mobile, shrunk to fit 390w/360w cleanly.
     Tighter letter-spacing on the label so it doesn't wrap. */
  .t-svc-hero-b-stats { flex-direction: row; gap: 0; }
  .t-svc-hero-b-stats.is-pill .t-svc-hero-b-stat { padding: 10px 4px; }
  .t-svc-hero-b-stats.is-pill .t-svc-hero-b-stat-num { font-size: 1.1rem; margin-bottom: 3px; white-space: nowrap; }
  .t-svc-hero-b-stats.is-pill .t-svc-hero-b-stat-l { font-size: 0.54rem; letter-spacing: 0.04em; white-space: nowrap; }

  /* Promises: 2-up to 1-up on phone */
  .t-svc-promises-numerals {
    grid-template-columns: 1fr;
    row-gap: 40px;
    max-width: 460px;
  }
  .t-svc-promise-num-col {
    padding: 18px 8px 0;
    border-top: 1px solid rgba(245, 240, 230, 0.16);
  }
  .t-svc-promise-num-col:first-child { padding-top: 0; border-top: 0; }
  .t-svc-promise-num-col::before,
  .t-svc-promise-num-col:nth-child(2)::before,
  .t-svc-promise-num-col:nth-child(4)::before { display: none; }
  .t-svc-promise-num-body { max-width: 100%; }

  /* YOUR CONTROL on phone: tighter spacing, segmented toggle stacks */
  #modes .v3-eyebrow { margin-bottom: 20px; font-size: 0.66rem; }
  #modes .v3-head { margin-bottom: 32px; }
  #modes .v3-sub { font-size: 1rem; }

  #modes .v3-split { gap: 24px; }
  #modes .v3-controls { gap: 22px; }
  #modes .v3-panel + .v3-panel { padding-top: 22px; }

  #modes .v3-seg { grid-template-columns: 1fr; gap: 4px; }
  #modes .v3-seg-opt { padding: 9px 11px; }

  #modes .v3-radio { padding: 12px 14px; gap: 10px; }
  #modes .v3-radio-name { font-size: 0.92rem; }
  #modes .v3-radio-desc { font-size: 0.82rem; }
  #modes .v3-radio-addr { font-size: 0.78rem; }

  #modes .v3-urgent-card { padding: 28px 24px 26px; max-width: 100%; }
  #modes .v3-urgent-bell { width: 46px; height: 46px; }
  #modes .v3-urgent-bell svg { width: 20px; height: 20px; }
  #modes .v3-urgent-h { font-size: 1.1rem; }
  #modes .v3-urgent-desc { font-size: 0.9rem; }

  #modes .v3-mail-chrome { padding: 10px 14px; gap: 10px; }
  #modes .v3-mail-tab { font-size: 0.72rem; padding: 3px 10px; }
  #modes .v3-mail-live { font-size: 0.64rem; }

  #modes .v3-mail-urgent { padding: 9px 14px; font-size: 0.7rem; gap: 8px; }
  #modes .v3-mail-urgent-meta { font-size: 0.68rem; }

  #modes .v3-mail-head { padding: 14px 16px; gap: 10px; }
  #modes .v3-mail-row { grid-template-columns: 56px 1fr; gap: 8px; }
  #modes .v3-mail-k { font-size: 0.6rem; }
  #modes .v3-mail-avatar { width: 28px; height: 28px; font-size: 0.68rem; }
  #modes .v3-mail-vmain b { font-size: 0.88rem; }
  #modes .v3-mail-vsub { font-size: 0.72rem; }
  #modes .v3-mail-subj { font-size: 0.98rem; }

  #modes .v3-mail-body { padding: 18px 18px 4px; font-size: 0.94rem; }
  #modes .v3-mail-foot { padding: 12px 18px 14px; gap: 10px; }
  #modes .v3-mail-stamp { font-size: 0.66rem; }
  #modes .v3-mail-foot-meta { font-size: 0.76rem; }

  #modes .v3-preview-caption { font-size: 0.78rem; }

  .t-svc-hub,
  .t-svc-setup,
  .t-svc-channels,
  .t-svc-control,
  .t-svc-promises {
    padding: 64px 0;
  }
}

/* Canon mobile band (<=640): chips stay wrapped at natural width (not full-width),
   so multiple chips fit per row. Channels H2 locked to character measure. */
@media (max-width: 640px) {
  .t-svc-cc-chips { gap: 8px; }
  #channels .t-svc-head h2 { max-width: 17ch; margin-left: auto; margin-right: auto; }
  .t-faq-q { max-width: 26ch; }
}

/* Mobile narrow (390 specifically): hide urgent-meta text, allow vsub wrap. */
@media (max-width: 420px) {
  #modes .v3-mail-vsub { font-size: 0.68rem; }
  #modes .v3-mail-urgent-meta { display: none; }
}


/* ====================================================
   HERO STAT PILL  (locked treatment, frosted-glass on photo)
   ==================================================== */
.t-svc-hero-b-stats.is-pill {
  border: 1px solid rgba(245, 240, 230, 0.18);
  border-radius: var(--r-pill);
  background: rgba(245, 240, 230, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
  gap: 0;
  padding: 4px;
}
.t-svc-hero-b-stats.is-pill .t-svc-hero-b-stat {
  text-align: center;
  padding: 14px 22px;
}
.t-svc-hero-b-stats.is-pill .t-svc-hero-b-stat + .t-svc-hero-b-stat {
  border-left: 1px solid rgba(245, 240, 230, 0.18);
}
.t-svc-hero-b-stats.is-pill .t-svc-hero-b-stat-num {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--gold);
  margin-bottom: 4px;
}
.t-svc-hero-b-stats.is-pill .t-svc-hero-b-stat-num em { color: var(--gold); }
.t-svc-hero-b-stats.is-pill .t-svc-hero-b-stat-l {
  font-size: 0.72rem;
}


/* Final CTA micro line under button */
.t-final-micro {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--body-on-dark-mute);
  margin: 12px 0 0;
  text-align: center;
}

/* Desktop-only line break helper (per skills/website/copy.md line break rule) */
.desktop-break { display: inline; }
@media (max-width: 640px) {
  .desktop-break { display: none; }
}

/* Hero subhead: keep 2 sentences on separate lines on desktop+tablet; let mobile wrap naturally */
@media (max-width: 640px) {
  .t-hero-sub-br { display: none; }
}