/* Hallmark · shape: Map / Diagram · genre: modern-minimal · theme: Coral (deal 2/3, seed marketing-eaasycount-very-easy-906c·7ae4bd3d·2026-11-04·r0), recoloured to the eaasycount brand · job: sign up · draw: 5f177f
 * hero: Stage, centred over a full-width capture standing across the navy-to-white line (the FooodPOS site posture, by request) · nav: edge-aligned, the mark and wordmark against Log in and one action · footer: colophon block · imagery: screenshots 4 (capture.mjs on the dev app, demo company Contoh Trading) · signature: the real invoice list and till slip laid on the desk as stationery, the sale's path drawn as cards beneath
 * axes: light/grotesk-sans/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: P, a calm product page argues little; the map makes the one claim a reader can test: key a sale once and it lands in stock, ledger, MyInvois and reports */
/* Hallmark · waive 44c · hero ends at 1001px at 1440x900, the headline, sentence and both actions sit above 360px · the owner asked for a bigger hero capture, so it stands full width across the navy-to-white line and runs past the fold, as the FooodPOS site does */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- type and texture ---------- */
.fig { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; }
.stock-card, .stock-sheet { background-color: var(--color-cotton); color: var(--color-print); box-shadow: var(--edge-stock), var(--cast-stock); border-radius: var(--radius-stock); }
.press-shade { flood-color: var(--color-ink); flood-opacity: 0.35; }

/* ---------- controls: letterpress cards ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-stock); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.btn--white { background: var(--color-on-navy); color: var(--color-navy); box-shadow: var(--cast-stock); }
.btn--white:hover { background: var(--color-navy-tint); }
.btn--white-line { background: transparent; color: var(--color-on-navy); box-shadow: inset 0 0 0 1.5px var(--color-on-navy); }
.btn--white-line:hover { background: var(--color-on-navy-line); box-shadow: inset 0 0 0 1.5px var(--color-on-navy); }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.hero :focus-visible, .nav :focus-visible, .board :focus-visible { outline-color: var(--color-on-navy); }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
a:hover { text-decoration-color: var(--color-accent-2); }

.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); }

/* ---------- nav ---------- */
.nav { position: absolute; inset-inline: 0; top: 0; z-index: var(--z-raised); }
.nav__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 76px; }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-ink); font: 600 1.375rem/1 var(--font-display); letter-spacing: -0.03em; text-decoration: none; }
.wordmark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-input); }
.wordmark__mark { flex-shrink: 0; }
.mk-key { fill: var(--color-ink); } .mk-eq { fill: var(--color-accent); } .mk-glyph { stroke: var(--color-cotton); }
.nav__actions { display: flex; align-items: center; gap: var(--space-lg); }
.nav .wordmark, .nav__link { color: var(--color-on-navy); }
.nav .mk-key { fill: var(--color-on-navy); } .nav .mk-eq { fill: var(--color-light-blue); } .nav .mk-glyph { stroke: var(--color-navy); }
.nav__link { font-weight: 500; text-decoration: none; white-space: nowrap; }
.nav__link:hover { text-decoration: underline; }
.nav__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }

/* ---------- hero: navy above, white below, the capture standing across the line ---------- */
.hero { background: var(--color-navy); color: var(--color-on-navy); padding-top: calc(76px + var(--space-xl)); }
.hero__text { display: grid; justify-items: center; gap: var(--space-md); text-align: center; }
.hero h1 { font-size: clamp(2.5rem, 2.6vw + 1.25rem, 4rem); line-height: 1.04; max-width: none; color: var(--color-on-navy); }
.hero .lead { color: var(--color-on-navy-muted); }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin-top: var(--space-xs); }
.terms { font-size: var(--text-sm); color: var(--color-on-navy-muted); }
.hero__stage { position: relative; margin-top: var(--space-2xl); }
.hero__stage::before { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; background: var(--color-paper); }
.hero__desk { position: relative; max-width: calc(1240px + 2 * var(--gutter)); }
.sheet { margin: 0; border-radius: var(--radius-stock); box-shadow: var(--cast-stock-lift); background: var(--color-cotton); }
.sheet > img { outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.sheet--main { position: relative; aspect-ratio: 2362 / 1152; }
.sheet--slip { position: absolute; z-index: 2; left: calc(var(--gutter) - 2%); bottom: -7%; width: 24%; aspect-ratio: 850 / 524; transform: rotate(-1.5deg); }
[data-kind="product"] > img { filter: none; }

/* ---------- sections ---------- */
.flow { padding-block: calc(var(--section-gap-s) + var(--space-xl)) var(--section-gap-s); }
.head-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.head-split .lead { color: var(--color-ink-2); }

/* the map */
.map { position: relative; }
.map__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.map__lines path { fill: none; stroke: var(--color-rule-2); stroke-width: 1.5; stroke-dasharray: 5 6; }
.map__lines .to-ledger { stroke: var(--color-ink-2); stroke-dasharray: none; }
.map__nodes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3xl) var(--space-4xl); position: relative; }
.card { position: relative; display: grid; align-content: start; gap: var(--space-sm); padding: var(--space-lg) var(--space-lg) var(--space-xl); min-height: 220px; }
.card h3 { font-size: var(--text-title); }
.card .rec { padding-block: var(--space-sm); border-block: 1px solid var(--color-rule); font-size: var(--text-sm); line-height: 1.6; color: var(--color-ink-2); }
.card p:last-of-type { color: var(--color-ink-2); }
.card--ledger { transform: rotate(0.6deg); }
.pressed { position: absolute; right: var(--space-lg); top: var(--space-lg); color: var(--color-paid); font: 600 var(--text-xl)/1 var(--font-display); letter-spacing: -0.02em; transform: rotate(-6deg); filter: url(#press); }

/* the till */
.till { padding-block: var(--section-gap-s) var(--section-gap); background: var(--color-paper-2); }
.till h2 { margin-bottom: var(--space-md); }
.till .lead { margin-bottom: var(--space-2xl); color: var(--color-ink-2); }
.shot { position: relative; margin: 0; overflow: hidden; }
.till .shot { aspect-ratio: 2509 / 721; }
.shot > img { outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }

/* modules */
.modules { padding-block: var(--section-gap); }
.modules h2 { margin-bottom: var(--space-2xl); }
.mod-table { width: 100%; border-collapse: collapse; }
.mod-table thead th { padding-bottom: var(--space-sm); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); text-align: left; border-bottom: 1px solid var(--color-ink); }
.mod-table tbody th, .mod-table td { padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); vertical-align: baseline; text-align: left; }
.mod-table tbody th { width: 33%; font: 600 var(--text-title)/1.2 var(--font-display); letter-spacing: -0.02em; }
.mod-table td { font-size: var(--text-lead); color: var(--color-ink-2); }

/* payroll: the run across, three notes beneath */
.payroll { padding-block: var(--section-gap-s) var(--section-gap-l); background: var(--color-paper-2); }
.pay-shot { aspect-ratio: 2178 / 840; }
.notes { list-style: none; margin: var(--space-2xl) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.notes li { display: grid; align-content: start; gap: var(--space-xs); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-2); }
.notes li p { color: var(--color-ink-2); }

/* questions */
.faq { padding-block: var(--section-gap-l) var(--section-gap); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.rows { margin: 0; }
.rows > div { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr); gap: var(--gap-columns); padding-block: var(--space-xl); border-top: 1px solid var(--color-rule); }
.rows > div:last-child { border-bottom: 1px solid var(--color-rule); }
.rows dt { font: 600 var(--text-title)/1.2 var(--font-display); letter-spacing: -0.02em; }
.rows dd { margin: 0; font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); }

/* the board: the offer */
.board { padding-block: var(--section-gap-s); background: var(--color-board); color: var(--color-board-type); }
.board__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--gap-columns); align-items: center; }
.board__figure { display: flex; align-items: baseline; gap: var(--space-md); font: 600 clamp(8rem, 15vw, 15rem)/0.85 var(--font-display); letter-spacing: -0.05em; color: var(--color-board-type); }
.board__figure span { font-size: var(--text-title); font-weight: 500; letter-spacing: 0; }
.board__body { display: grid; gap: var(--space-lg); }
.board h2 { color: var(--color-board-type); }
h1, h2, h3, .mod-table tbody th, .rows dt { color: var(--color-head); }
.hero h1, .board h2 { color: var(--color-on-navy); }
.board__list { list-style: none; margin: 0; padding: 0; }
.board__list li { padding-block: var(--space-sm); border-top: 1px solid var(--color-board-rule); color: var(--color-board-muted); font-size: var(--text-lead); }
.board__list li:last-child { border-bottom: 1px solid var(--color-board-rule); }
.board__card { justify-self: start; margin-top: var(--space-xs); }

/* footer: colophon block */
.footer { padding-block: var(--space-3xl) var(--space-2xl); background: var(--color-paper); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); gap: var(--space-lg) var(--gap-columns); align-items: start; }
.footer__colophon { max-width: 46ch; color: var(--color-ink-2); }
.footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.footer a { color: var(--color-ink); }
.footer a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.footer__legal { grid-column: 1 / -1; padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- smaller screens ---------- */
@media (max-width: 75rem) {
  .map__nodes { gap: var(--space-2xl) var(--space-3xl); }
}
@media (max-width: 60rem) {
  .head-split, .payroll__grid, .faq__grid, .board__grid, .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__stage { margin-top: var(--space-xl); }
  .sheet--slip { width: 34%; bottom: -10%; }
  .map__lines { display: none; }
  .map__nodes { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .card { min-height: 0; }
  .notes { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .rows > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .mod-table tbody th { width: 40%; }
}
@media (max-width: 40rem) {
  .nav__link { display: none; }
  .nav .btn { padding: 0 var(--space-md); }
  .sheet--slip { display: none; }
  .mod-table, .mod-table tbody, .mod-table tr, .mod-table th, .mod-table td { display: block; width: 100%; }
  .mod-table thead { display: none; }
  .mod-table tbody th { padding-bottom: 0; border-bottom: 0; width: 100%; }
  .mod-table td { padding-top: var(--space-xs); }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover, .btn:active { transform: none; }
}
@media (max-width: 22rem) { .wordmark span { font-size: var(--text-lg); } .nav__row { gap: var(--space-xs); } }