/* Hallmark · shape: Narrative Workflow · genre: playful · theme: brand · draw: e6c5df · job: sign up
 * paper: oklch(97.8% 0.005 258) · accent: oklch(45.4% 0.166 258) · display: Space Mono · body: Archivo · hero: Stage · nav: slab · footer: colophon block · signature: a day at one outlet told by the product's own screens, pinned while the stages scroll
 * axes: light/mono/cool · posture: restrained · imagery: screenshots 6 (the product, captured locally) · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, the hero head could sit on any all-in-one POS; the day told in four real screens right under it is what only this product has */
/* tokens.css and base.css are linked directly from index.html (before this file) so they download in parallel */

:root { --display-weight: 700; --nav-h: 72px; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + var(--space-lg)); }
h1, h2, h3 { color: var(--color-accent); }
.display-s { font-size: var(--text-display-s); max-width: 16ch; line-height: 1.08; }
h2 { line-height: 1.1; }
h3 { letter-spacing: -0.01em; }
.lead { color: var(--color-ink); }
small { font-size: var(--text-sm); color: var(--color-muted); }

/* controls */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-accent); border-radius: var(--radius-card); background: var(--color-accent); color: var(--color-accent-ink); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--quiet { background: transparent; color: var(--color-accent); border-color: var(--color-muted); }
.btn--quiet:hover { background: var(--color-paper-2); border-color: var(--color-accent); }
@media (prefers-reduced-motion: reduce) { .btn { transition: background-color var(--dur-short) linear; } }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* product screens */
.shot { margin: 0; aspect-ratio: 3 / 2; border-radius: var(--radius-card); }
.shot > img { object-position: left top; outline: 1px solid color-mix(in oklab, var(--color-ink) 10%, transparent); outline-offset: -1px; border-radius: inherit; }

/* nav: a soft slab */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper-2); }
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: var(--nav-h); }
.nav__logo { display: block; border-radius: var(--radius-card); }
.nav__logo img { height: 26px; width: auto; }

/* hero: Stage */
.hero { min-height: calc(100dvh - var(--nav-h)); display: grid; align-items: center; padding-block: var(--space-2xl); }
.hero__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: center; }
.hero__text { display: grid; gap: var(--space-lg); justify-items: start; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }
.terms { font-size: var(--text-sm); color: var(--color-muted); }

/* the day: stages on the left, the screen pinned on the right */
.run { padding-block: var(--section-gap-s) var(--section-gap); border-top: var(--rule-hair) solid var(--color-rule); }
.run__grid { margin-top: var(--space-2xl); }
.run__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xl); counter-reset: stage; }
.run__steps > li { counter-increment: stage; display: grid; gap: var(--space-sm); align-content: start; }
.run__steps h3::before { content: counter(stage) ". "; }
.run__steps p { font-size: var(--text-lead); max-width: 34ch; }
.run__inline { margin-top: var(--space-md); }
.run__stage { display: none; }
@media (min-width: 60rem) {
  .js .run__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: start; }
  .js .run__steps { gap: 0; }
  .js .run__steps > li { min-height: 62dvh; align-content: center; opacity: 0.4; transition: opacity var(--dur-short) var(--ease-out); }
  .js .run__steps > li.is-on { opacity: 1; }
  .js .run__inline { display: none; }
  .js .run__stage { display: block; position: sticky; top: calc(var(--nav-h) + var(--space-xl)); }
}

/* rows: the kinds of business, and the questions */
.kinds { padding-block: var(--section-gap) var(--section-gap-l); border-top: var(--rule-hair) solid var(--color-rule); }
.kinds__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: start; }
.rows { margin: 0; display: grid; }
.rows > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-lg); align-items: baseline; padding-block: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.rows > div:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.rows dt { font: 700 var(--text-title)/1.2 var(--font-display); color: var(--color-accent); letter-spacing: -0.01em; }
.rows dd { margin: 0; font-size: var(--text-lead); line-height: 1.45; }
.rows--wide { margin-top: var(--space-2xl); }
.rows--wide > div { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

/* bands change the paper */
.band { background: var(--color-paper-2); }

/* price: a table with its period switch */
.price { padding-block: var(--section-gap-s); }
.price__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-lg); }
.seg { display: inline-flex; margin: 0; padding: 0; border: 0; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg label { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-muted); background: var(--color-paper); color: var(--color-accent); font-weight: 600; cursor: pointer; }
.seg label:first-of-type { border-radius: var(--radius-card) 0 0 var(--radius-card); }
.seg label:last-of-type { border-radius: 0 var(--radius-card) var(--radius-card) 0; border-left: 0; }
.seg input:checked + label { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.seg input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.plans { width: 100%; margin-top: var(--space-2xl); border-collapse: collapse; }
.plans th, .plans td { padding: var(--space-lg) var(--space-md) var(--space-lg) 0; text-align: left; vertical-align: baseline; border-bottom: var(--rule-hair) solid var(--color-rule); font-size: var(--text-lead); }
.plans thead th { font-size: var(--text-sm); font-weight: 400; color: var(--color-ink-2); padding-block: var(--space-sm); }
.plans thead th:not(:first-child) { font: 700 var(--text-title)/1.2 var(--font-display); color: var(--color-accent); }
.plans tbody th { font-weight: 600; width: 40%; }
.plans__price b { display: block; font: 700 var(--text-3xl)/1.1 var(--font-display); color: var(--color-accent); letter-spacing: -0.02em; white-space: nowrap; }
.plans__price span { font-size: var(--text-sm); color: var(--color-ink-2); }
.price__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-xl); }

/* moving from another POS: a split, the screen on the left */
.move { padding-block: var(--section-gap-l) var(--section-gap); }
.move__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: center; }
.move__text { display: grid; gap: var(--space-lg); }
.facts { list-style: none; margin: 0; padding: 0; display: grid; }
.facts li { padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); font-weight: 600; }
.facts li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }

.ask { padding-block: var(--section-gap-s) var(--section-gap-l); border-top: var(--rule-hair) solid var(--color-rule); }

/* close: the hero's action again */
.close { padding-block: var(--section-gap-s); }
.close__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xl); }

/* footer: a colophon block */
.foot { padding-block: var(--space-3xl) var(--space-2xl); }
.foot__in { display: grid; gap: var(--space-lg); justify-items: start; }
.foot img { height: 12px; width: auto; }
.foot a { color: var(--color-accent); font-weight: 600; }

@media (max-width: 60rem) {
  .hero { min-height: 0; padding-block: var(--space-xl) var(--space-2xl); }
  .hero__in, .kinds__in, .move__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .move__in .shot { order: 2; }
  .rows > div, .rows--wide > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .nav__logo img { height: 22px; }
}
@media (max-width: 40rem) {
  .plans th, .plans td { font-size: var(--text-md); padding-right: var(--space-xs); }
  .plans__price b { font-size: var(--text-lg); white-space: normal; }
  .plans tbody th { width: 30%; }
  .price__foot .btn, .close .btn { width: 100%; }
}
.legal { color: var(--color-ink-2); }
@media (max-width: 22.5rem) { .plans__price b { font-size: var(--text-md); } .plans tbody th { width: 28%; } }