/* Hallmark · shape: Ledger pages · genre: modern-minimal · theme: Cobalt (deal 3/3, seed missed-call-text-back-service-texts-f250·33c3e521·2026-11-06·r0; anchor: the old Avyo palette, navy bands, hi-vis amber, warm paper, from the user) · redesign: full
 * hero: Stage, headline and the live text thread side by side · nav: wordmark left, links and one key right · footer: one ruled line · imagery: the product (the text thread, built live) · signature: the missed call turning into a booked job, typed out in the hero
 * axes: light/grotesk-sans/cool · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E3 S4 R4 V3 · weakest: E, the plans stay ruled rows instead of cards so the featured plan reads by wash alone */
@import url("./tokens.css");
@import url("./base.css");

.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.label { font: 500 var(--text-sm)/1.3 var(--font-display); color: var(--color-muted); }
.muted { color: var(--color-muted); }

/* nav */
.nav { border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 72px; flex-wrap: wrap; }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); font: 600 var(--text-xl)/1 var(--font-display); letter-spacing: var(--tracking-display); text-decoration: none; }
.nav ul { display: flex; align-items: center; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav a:not(.key) { font: 500 var(--text-sm)/1 var(--font-display); color: var(--color-ink-2); text-decoration: none; padding-block: var(--space-xs); }
.nav a:not(.key):hover { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent-deep); text-underline-offset: 0.3em; }
.nav a[aria-current="page"] { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent-deep); text-underline-offset: 0.3em; }

/* keys */
.key { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-input); background: var(--color-key-face); color: var(--color-ink); font: 500 var(--text-md)/1 var(--font-display); text-decoration: none; cursor: pointer; box-shadow: var(--shadow-key); transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.key:hover { transform: translateY(-1px); }
.key:active { transform: translateY(3px); box-shadow: var(--shadow-key-press); }
.key--primary { background: var(--color-accent); border-color: var(--color-accent-edge); color: var(--color-accent-ink); box-shadow: var(--shadow-key-accent); }
.key--sm { min-height: 40px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.key:disabled { background: var(--color-paper-3); color: var(--color-muted); box-shadow: none; cursor: not-allowed; }
.actions { display: flex; gap: var(--space-md); flex-wrap: wrap; align-items: center; }

/* hero */
.hero { padding-block: var(--space-2xl) var(--space-3xl); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--gap-columns); align-items: center; }
.hero h1 { margin-bottom: var(--space-md); }
.hero .lead { margin-bottom: var(--space-lg); }
.hero ul { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: var(--space-2xs); color: var(--color-ink-2); }
.hero li::before { content: ""; display: inline-block; width: 12px; height: 2px; margin-right: var(--space-xs); vertical-align: middle; background: none; border-top: 2px solid var(--color-accent-deep); }

/* text thread panel (the product) */
.thread-panel { background: var(--color-graphite); color: var(--color-graphite-ink); border: var(--rule-hair) solid var(--color-graphite-2); border-radius: var(--radius-card); box-shadow: var(--shadow-card); overflow: hidden; }
@supports (corner-shape: bevel) { .thread-panel { border-radius: var(--cut-l) 4px var(--cut-l) 4px; corner-shape: bevel round bevel round; } }
.thread-head { display: flex; justify-content: space-between; padding: var(--space-md) var(--space-lg); background: var(--color-graphite-2); font: 500 var(--text-sm)/1.3 var(--font-display); color: var(--color-graphite-muted); }
.thread-head b { color: var(--color-graphite-ink); font-weight: 600; }
.thread { display: grid; gap: var(--space-xs); padding: var(--space-lg); min-height: 380px; align-content: start; }
.thread .ts, .thread .call, .thread .booked { font: 500 var(--text-sm)/1.3 var(--font-display); text-align: center; color: var(--color-graphite-muted); }
.thread .call { color: var(--color-error-on-dark); }
.thread .booked { color: var(--color-accent-2); }
.bub { max-width: 86%; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); font-size: var(--text-sm); line-height: 1.45; }
.bub.out { justify-self: end; background: var(--color-accent); color: var(--color-accent-ink); }
.bub.in { justify-self: start; background: var(--color-graphite-2); color: var(--color-graphite-ink); }
.step-in { animation: rise var(--dur-long) var(--ease-out) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.thread-foot { display: flex; justify-content: space-between; align-items: center; padding: var(--space-sm) var(--space-lg); border-top: var(--rule-hair) solid var(--color-graphite-2); font: 500 var(--text-sm)/1 var(--font-display); color: var(--color-graphite-muted); }
.replay { background: none; border: 0; color: var(--color-accent-2); cursor: pointer; font: 500 var(--text-sm)/1 var(--font-display); padding: var(--space-xs); }
.replay:hover { text-decoration: underline; }

/* sections */
.sec { padding-block: var(--space-3xl); border-top: var(--rule-hair) solid var(--color-rule-2); }
.sec h2 { margin-bottom: var(--space-md); }
.sec .intro { margin-bottom: var(--space-xl); max-width: 56ch; color: var(--color-ink-2); }
.page-top { padding-block: var(--space-2xl) 0; }
.trades { padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-2); }
.trades ul { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); list-style: none; margin: 0; padding: 0; color: var(--color-ink-2); font: 500 var(--text-sm)/1.4 var(--font-display); }

/* plans, as ruled rows */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--rule-hair) solid var(--color-rule-2); background: var(--color-paper-2); border-radius: var(--radius-card); overflow: hidden; }
.plan { padding: var(--space-lg); display: grid; gap: var(--space-sm); align-content: start; border-left: var(--rule-hair) solid var(--color-rule-2); }
.plan:first-child { border-left: 0; }
.plan.featured { background: var(--color-accent-wash); }
.plan h3 { font-size: var(--text-xl); }
.plan .who { color: var(--color-ink-2); }
.plan .price { font: 600 var(--text-3xl)/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.plan .price small { font: 500 var(--text-md)/1 var(--font-display); color: var(--color-muted); }
.plan .setup { color: var(--color-muted); font-size: var(--text-sm); }
.plan ul { list-style: none; margin: var(--space-xs) 0 var(--space-sm); padding: 0; display: grid; gap: var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-md); }
.plan .tag { font: 600 var(--text-sm)/1 var(--font-display); color: var(--color-accent-deep); }
.notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-xl); }
.notes > div { display: grid; gap: var(--space-sm); align-content: start; }

/* ledgers (services, add-ons, demos) */
.ledger { border-top: var(--rule-hair) solid var(--color-rule-2); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: var(--space-lg); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule-2); align-items: baseline; }
.row h3, .row h2, .steps h2 { font-size: var(--text-xl); max-width: none; }
.linkbtn { background: none; border: 0; padding: var(--space-xs); color: var(--color-accent-deep); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; font: 500 var(--text-md)/1 var(--font-display); }
.row .fit { display: block; margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }
.row .p { font: 600 var(--text-lg)/1.2 var(--font-display); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* calculator */
.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: start; }
.field { display: grid; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.field label { display: flex; justify-content: space-between; font: 500 var(--text-md)/1.3 var(--font-display); }
.field output { font-variant-numeric: tabular-nums; font-weight: 600; }
input[type="range"] { width: 100%; accent-color: var(--color-accent-deep); min-height: 32px; }
.result { background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card); padding: var(--space-xl); display: grid; gap: var(--space-md); }
@supports (corner-shape: bevel) { .result { border-radius: var(--cut-l) 4px var(--cut-l) 4px; corner-shape: bevel round bevel round; } }
.big { font: 600 var(--text-display-s)/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.note { color: var(--color-muted); font-size: var(--text-sm); }

/* columns of different widths */
.cols { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: var(--gap-columns); }
.cols > div { border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-md); display: grid; gap: var(--space-xs); align-content: start; }
.cols h3 { font-size: var(--text-lg); }
.checklist { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-rule-2); }
.checklist li { padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.closing { margin-top: var(--space-lg); font: 600 var(--text-xl)/1.3 var(--font-display); max-width: 36ch; }

/* steps and faq */
.steps { list-style: none; margin: 0; padding: 0; border-top: var(--rule-hair) solid var(--color-rule-2); counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-lg); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule-2); align-items: baseline; }
.steps li::before { content: counter(s); font: 600 var(--text-3xl)/1 var(--font-display); color: var(--color-accent-deep); }
.faq details { border-bottom: var(--rule-hair) solid var(--color-rule-2); padding-block: var(--space-md); }
.faq details:first-child { border-top: var(--rule-hair) solid var(--color-rule-2); }
.faq summary { cursor: pointer; font: 500 var(--text-lg)/1.3 var(--font-display); }
.faq details p { margin-top: var(--space-sm); color: var(--color-ink-2); }

/* form */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--gap-columns); align-items: start; }
form { display: grid; gap: var(--space-md); }
.formrow { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.f { display: grid; gap: var(--space-2xs); font: 500 var(--text-sm)/1.3 var(--font-display); }
.f input, .f select { min-height: 48px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-input); background: var(--color-paper-2); color: var(--color-ink); font: 400 var(--text-md)/1.2 var(--font-body); }
.f input:focus-visible, .f select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.copyrow { display: flex; gap: var(--space-sm); align-items: center; flex-wrap: wrap; margin-top: var(--space-md); font-weight: 500; }
.formfine { color: var(--color-muted); font-size: var(--text-sm); }
.done { color: var(--color-accent-deep); font-weight: 500; }

/* footer and sticky */
.foot { border-top: var(--rule-hair) solid var(--color-rule-2); padding-block: var(--space-xl); color: var(--color-muted); font-size: var(--text-sm); }
.foot .wrap { display: flex; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.stickycta { display: none; }

@media (max-width: 60rem) {
  .hero .wrap, .calc, .form-grid, .notes, .cols { grid-template-columns: minmax(0, 1fr); }
  .plans { grid-template-columns: minmax(0, 1fr); }
  .plan { border-left: 0; border-top: var(--rule-hair) solid var(--color-rule-2); }
  .plan:first-child { border-top: 0; }
  .row, .steps li { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .row .p { text-align: left; }
  .steps li::before { font-size: var(--text-2xl); }
  .nav ul { gap: var(--space-md); }
  .thread { min-height: 0; }
  .stickycta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); gap: var(--space-sm); align-items: center; justify-content: flex-start; padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); border-top: var(--rule-hair) solid var(--color-rule-2); transition: transform var(--dur-short) var(--ease-out); }
  .stickycta.hide { transform: translateY(110%); }
  .foot { padding-bottom: 88px; }
}
@media (max-width: 40rem) { .formrow { grid-template-columns: 1fr; } }

/* dark band: nav and hero, as on the old site */
.nav { background: var(--color-graphite); color: var(--color-graphite-ink); border-bottom: var(--rule-hair) solid var(--color-graphite-2); }
.nav a:not(.key) { color: var(--color-graphite-muted); }
.nav a:not(.key):hover, .nav a[aria-current="page"] { color: var(--color-graphite-ink); text-decoration-color: var(--color-accent); }
.hero { background: var(--color-graphite); color: var(--color-graphite-ink); }
.hero ul { color: var(--color-graphite-muted); }
.hero li::before { border-top: 2px solid var(--color-accent); background: none; }
.hero .lead { color: var(--color-graphite-muted); }
.hero :focus-visible, .nav :focus-visible { outline-color: var(--color-accent); }
.thread-panel { background: var(--color-graphite-2); border-color: var(--color-thread-in); }
.thread-head { background: var(--color-graphite); }
.thread-foot { border-top-color: var(--color-thread-in); }
.bub.out { background: var(--color-sms); color: var(--color-sms-ink); }
.bub.in { background: var(--color-thread-in); }

.mark { width: 28px; height: 28px; flex: none; }