/* Hallmark · shape: keyboard stage, app switcher, comparison ledger · genre: modern-minimal · theme: custom (brand kept from ribbonbridge.com) · job: try · idea: "the page is a keyboard you can play: the letters you learned on Windows, working on a Mac" · vibe: "dark keycap green, quiet, exact, playable"
 * paper: oklch(14% 0.01 160) · accent: oklch(79% 0.19 152) · display: system (SF Pro Display) · body: system (SF Pro Text) · hero: head, one line and the trial on the left, a playable ribbon and keyboard on the right · nav: wordmark, three links, one action · footer: the action again over plain links · imagery: the product (a playable demo built at full size, the real DCF recording, two recording slots) · signature: the keyboard you click out yourself
 * axes: dark/grotesk-heavy/chromatic-green · posture: brand · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E3 S4 R4 V4 · weakest: E (the PowerPoint and Word clips are slots until the letter tables ship), the playable demo carries all three apps meanwhile
 * waive 1: the display face is the brand's existing system face (SF Pro), kept from ribbonbridge.com on purpose */
@import url("./tokens.css");
@import url("./base.css");

/* Nav */
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-lg); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-sm); font-weight: 700; font-size: var(--text-lg); text-decoration: none; letter-spacing: -0.01em; }
.mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--color-cap-top); color: var(--color-accent); box-shadow: 0 3px 0 var(--color-cap-side), inset 0 0 0 1px var(--color-cap-edge); font-size: var(--text-md); }
.nav nav { display: flex; align-items: center; gap: var(--space-lg); }
.nav nav a:not(.btn) { color: var(--color-ink-2); text-decoration: none; font-size: var(--text-sm); }
.nav nav a:not(.btn):hover { color: var(--color-ink); }
@media (max-width: 52rem) { .nav nav a:not(.btn) { display: none; } }

/* Buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 var(--space-lg); border: 0; border-radius: 12px; background: var(--color-accent); color: var(--color-accent-ink); font: 650 var(--text-md)/1 var(--font-body); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-focus); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"], .cap:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn--small { min-height: 40px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.link { color: var(--color-ink); font-weight: 600; }
.link:hover { color: var(--color-accent); }
.link:focus-visible, .nav a:focus-visible, .foot a:focus-visible, .note a:focus-visible, .terms a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 3px; }
kbd, .caption kbd { display: inline-block; min-width: 1.7em; padding: 0.05em 0.45em; border-radius: 6px; background: var(--color-cap-top); color: var(--color-ink); box-shadow: 0 2px 0 var(--color-cap-side), inset 0 0 0 1px var(--color-cap-edge); font: 600 0.88em/1.5 var(--font-body); text-align: center; white-space: nowrap; }

/* Sections */
main > section { padding-block: calc(var(--section-gap) / 2); }
h2 { font-size: var(--text-section); line-height: 1.05; letter-spacing: var(--tracking-display); font-weight: 750; margin-bottom: var(--space-xl); }
.caption { margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-sm); }
.note, .terms { color: var(--color-muted); font-size: var(--text-sm); }
.note { margin-top: var(--space-md); }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-2xl); align-items: center; padding-block: var(--space-xl) var(--space-3xl); min-height: calc(100svh - 88px); }
.hero h1 { font-size: var(--text-display); line-height: 1.02; letter-spacing: var(--tracking-display); font-weight: 800; }
.lead { margin-top: var(--space-lg); font-size: var(--text-lead); color: var(--color-ink-2); max-width: 32ch; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); }
.hero .terms { flex-basis: 100%; }
@media (max-width: 60rem) { .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: var(--space-xl); padding-top: var(--space-lg); } }

/* The playable demo */
.demo { background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-lg); }
.demo-app { border-radius: 12px; overflow: hidden; background: var(--color-sheet); color: var(--color-sheet-ink); font-size: var(--text-xs); }
.ribbon { position: relative; background: var(--color-ribbon); border-bottom: 1px solid var(--color-sheet-rule); padding: var(--space-sm); }
.ribbon-tabs, .ribbon-buttons { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); }
.ribbon-buttons { margin-top: var(--space-sm); gap: var(--space-xs); }
.rtab, .rbtn { position: relative; padding: var(--space-2xs) var(--space-xs); border-radius: 6px; }
.rtab.is-active { background: var(--color-sheet); font-weight: 600; }
.rbtn { background: var(--color-sheet); border: 1px solid var(--color-sheet-rule); min-width: 64px; text-align: center; }
.tip { position: absolute; left: 50%; top: -8px; translate: -50% 0; padding: 0 var(--space-2xs); border-radius: 4px; background: var(--color-tip); color: var(--color-sheet); font: 700 10px/1.4 var(--font-body); opacity: 0; transition: opacity var(--dur-micro) var(--ease-out); pointer-events: none; }
.show-tips .tip { opacity: 1; }
.menu { position: absolute; z-index: var(--z-dropdown); top: calc(100% - 4px); width: 220px; margin: 0; padding: var(--space-xs); list-style: none; border-radius: 10px; background: var(--color-sheet); box-shadow: 0 18px 40px -12px var(--color-shadow); color: var(--color-sheet-ink); }
.menu li { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs); border-radius: 6px; }
.menu li b { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: var(--color-accent); color: var(--color-accent-ink); font-size: 10px; }
.menu li.on { background: var(--color-pick); }
.canvas { min-height: 190px; padding: var(--space-md); display: grid; place-items: center; }
.demo-hint { margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-sm); min-height: 1.6em; }
.demo-hint.is-done { color: var(--color-accent); }
.keys { display: grid; gap: var(--space-xs); margin-top: var(--space-md); }
.krow { display: flex; justify-content: center; gap: var(--space-xs); }
.cap { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: var(--radius-key); background: var(--color-cap-top); color: var(--color-ink-2); box-shadow: 0 4px 0 var(--color-cap-side), inset 0 0 0 1px var(--color-cap-edge); font: 600 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.cap:hover { background: var(--color-cap-hover); color: var(--color-ink); }
.cap:active, .cap.is-pressed { transform: translateY(3px); box-shadow: 0 1px 0 var(--color-cap-side), inset 0 0 0 1px var(--color-cap-edge); }
.cap:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.cap--wide { width: 72px; }
.cap--accent, .cap.is-next { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 4px 0 var(--color-accent-deep); }
.cap--accent:hover, .cap.is-next:hover { background: var(--color-focus); }
.demo-apps { display: flex; gap: var(--space-xs); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.demo-apps button, .seg button { min-height: 40px; padding: 0 var(--space-md); border: 1px solid var(--color-rule); border-radius: var(--radius-pill); background: transparent; color: var(--color-ink-2); font: 500 var(--text-sm)/1 var(--font-body); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.demo-apps button:hover, .seg button:hover { color: var(--color-ink); }
.demo-apps button[aria-pressed="true"], .seg button[aria-selected="true"] { color: var(--color-ink); border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.demo-apps button:focus-visible, .seg button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 40rem) { .krow .cap { flex: 0 1 40px; width: auto; min-width: 0; height: 38px; font-size: var(--text-xs); } .krow .cap--wide { flex-basis: 64px; } .krow { gap: var(--space-2xs); } .demo { padding: var(--space-md); } }

/* Demo results */
.cells { display: grid; grid-template-columns: auto auto; border: 1px solid var(--color-sheet-rule); font-variant-numeric: tabular-nums; }
.cells span { padding: var(--space-2xs) var(--space-sm); border-bottom: 1px solid var(--color-sheet-rule); }
.cells span:nth-child(odd) { border-right: 1px solid var(--color-sheet-rule); }
.cells .num { width: 46px; overflow: hidden; text-align: right; white-space: nowrap; }
.fit .cells .num { width: 96px; }
.slide { position: relative; width: 240px; aspect-ratio: 16 / 9; border: 1px solid var(--color-sheet-rule); background: var(--color-sheet); }
.slide i { position: absolute; top: 30%; left: 6%; width: 38%; height: 40%; border-radius: 6px; background: var(--color-shape); transition: translate var(--dur-long) var(--ease-out); }
.centred .slide i { translate: 81% 0; }
.para { max-width: 260px; padding: var(--space-sm); line-height: 1.5; box-shadow: 0 0 0 1.5px transparent; transition: box-shadow var(--dur-short) var(--ease-out); }
.bordered .para { box-shadow: 0 0 0 1.5px var(--color-sheet-ink); }

/* Apps switcher */
.switch .seg { display: flex; gap: var(--space-xs); margin-bottom: var(--space-lg); border: 0; padding: 0; }
.clip { width: 100%; aspect-ratio: 16 / 9; margin: 0; border-radius: var(--radius-card); border: 1px solid var(--color-rule); background: var(--color-paper-2); }
video.clip { object-fit: cover; }
.slot-note { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-lg); color: var(--color-muted); text-align: center; }

/* F-keys */
.fkeys { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: center; }
.fkeys-text p { color: var(--color-ink-2); font-size: var(--text-lead); max-width: 38ch; }
.fkeys h2 { margin-bottom: var(--space-lg); }
.formula { background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-xl); }
.formula-bar { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-radius: 12px; background: var(--color-sheet); color: var(--color-sheet-ink); }
.formula-bar .fx { color: var(--color-muted); font-style: italic; }
.formula-bar code, .formula code { font: 600 var(--text-xl)/1.2 var(--font-outlier); }
.formula .caption code { font-size: 1em; }
.fkey-row { display: flex; gap: var(--space-md); margin-top: var(--space-xl); }
.fkey-row .cap { width: 64px; height: 56px; font-size: var(--text-md); }
@media (max-width: 60rem) { .fkeys { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }

/* Before and after */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.menu-shot { margin: 0; padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); border: 1px solid var(--color-rule); }
.menu--static { position: static; width: auto; max-width: 300px; font-size: var(--text-sm); }
.menu-shot figcaption { margin-top: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-sm); }
@media (max-width: 44rem) { .pair { grid-template-columns: minmax(0, 1fr); } }

/* Comparison */
.table-wrap { overflow-x: auto; border-radius: var(--radius-card); border: 1px solid var(--color-rule); background: var(--color-paper-2); }
.table-wrap:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
table { width: 100%; min-width: 640px; border-collapse: collapse; }
th, td { padding: var(--space-md) var(--space-lg); text-align: left; border-bottom: 1px solid var(--color-rule); font-size: var(--text-sm); }
tr:last-child th, tr:last-child td { border-bottom: 0; }
thead th { color: var(--color-muted); font-weight: 500; }
tbody th { color: var(--color-ink-2); font-weight: 500; }
.us { background: color-mix(in oklab, var(--color-accent) 10%, transparent); color: var(--color-ink); font-weight: 600; }
thead .us { color: var(--color-accent); }

/* Price */
.price { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-2xl); align-items: center; }
.price-figure { display: flex; align-items: baseline; gap: var(--space-md); }
.amount { font: 800 clamp(6rem, 14vw, 12rem)/0.9 var(--font-display); letter-spacing: -0.05em; color: var(--color-accent); }
.per { font-size: var(--text-xl); color: var(--color-ink-2); }
.price h2 { margin-bottom: var(--space-lg); }
.price-text > p:not(.terms) { color: var(--color-ink-2); font-size: var(--text-lead); max-width: 44ch; }
.price .terms { margin-top: var(--space-lg); }
@media (max-width: 60rem) { .price { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); } }

/* Questions */
.faq { max-width: 860px; }
details { border-bottom: 1px solid var(--color-rule); }
summary { padding: var(--space-lg) 0; font-size: var(--text-lg); font-weight: 600; cursor: pointer; }
summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }
details p { padding-bottom: var(--space-lg); color: var(--color-ink-2); }

/* Footer */
.foot { padding-block: var(--space-3xl) var(--space-xl); border-top: 1px solid var(--color-rule); margin-top: var(--space-2xl); }
.foot-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.foot-line { font: 750 var(--text-2xl)/1.15 var(--font-display); letter-spacing: var(--tracking-display); max-width: 22ch; }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-2xl); }
.foot-links a { color: var(--color-ink-2); font-size: var(--text-sm); text-decoration: none; }
.foot-links a:hover { color: var(--color-ink); }
.foot-small { margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-xs); }

@media (prefers-reduced-motion: reduce) { .slide i, .para, .tip { transition: none; } }