/* Hallmark · shape: Product showcase with a plans table · genre: modern-minimal · theme: custom · job: try · idea: "Savelyy keeps every purchase findable and the original receipt as proof; the visitor opens the web app." · vibe: "calm, exact, private, green on paper"
 * paper: oklch(97% 0.004 170) · accent: oklch(52% 0.09 175) · display: system grotesk · body: system sans · hero: text left on columns 1 to 5, a real app screenshot on 6 to 12 · nav: wordmark left, links and one action right · footer: wordmark over two link groups · imagery: the product, real screenshots with sample data · signature: the receipts table beside the open receipt, shown as the app draws it
 * axes: light/grotesk-sans/chromatic-green · posture: wide product frame · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, one screenshot pair carries the page, so the plans table and privacy list do the rest of the work in plain type */
/* Hallmark · dismissed F24 · the hairline is the picture edge on paper and the shadow lifts it off the tinted showcase band; the same frame appears twice */

.skip { position: absolute; left: var(--space-md); top: -80px; z-index: var(--z-modal); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-pill); }
.skip:focus { top: var(--space-md); }

.site-header { padding-block: var(--space-md); }
.site-header .container { display: flex; align-items: center; gap: var(--space-lg); }
.brand { display: inline-flex; align-items: center; gap: var(--space-xs); font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); letter-spacing: var(--tracking-display); text-decoration: none; color: var(--color-ink); }
.brand img { width: 32px; height: 32px; border-radius: 9px; }
.nav { display: flex; align-items: center; gap: var(--space-lg); margin-left: auto; }
.nav a:not(.button) { text-decoration: none; color: var(--color-ink-2); font-size: var(--text-sm); padding-block: var(--space-xs); transition: color var(--dur-micro) var(--ease-out); }
.nav a:not(.button):hover { color: var(--color-accent); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-inline: var(--space-lg); border-radius: var(--radius-pill); font-weight: 600; font-size: var(--text-sm); text-decoration: none; border: var(--rule-hair) solid var(--color-accent); transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.button.primary { background: var(--color-accent); color: var(--color-accent-ink); }
.button.primary:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.button.quiet { background: transparent; color: var(--color-accent); }
.button.quiet:hover { background: var(--color-paper-2); }
.button:active { transform: translateY(1px); }
.button { white-space: nowrap; }
.nav a:not(.button):active, .site-footer a:active { color: var(--color-ink); }

.hero { padding-block: var(--space-xl) var(--section-gap-s); }
.hero .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: center; }
.hero h1 { font-size: clamp(2.25rem, 3vw + 0.75rem, 3.25rem); hyphens: auto; line-height: 1.04; letter-spacing: var(--tracking-display); font-weight: 700; }
.hero .lead { margin-top: var(--space-lg); font-size: var(--text-lead); color: var(--color-ink-2); max-width: 30ch; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.frame { margin: 0; }
.frame img { width: 100%; border-radius: var(--radius-card); border: var(--rule-hair) solid var(--color-rule); box-shadow: var(--shadow-card); background: var(--color-paper-2); }
.frame figcaption { margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); }

.section { padding-block: var(--section-gap-s); }
.section h2 { font-size: var(--text-section); line-height: 1.1; letter-spacing: var(--tracking-display); font-weight: 700; max-width: 18ch; }
.section .intro { margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-lead); max-width: 40ch; }

.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); margin-top: var(--space-xl); }
.feature { border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-md); }
.feature h3 { font-size: var(--text-title); line-height: 1.2; font-weight: 650; letter-spacing: -0.01em; }
.feature p { margin-top: var(--space-xs); color: var(--color-ink-2); }

.showcase { background: var(--color-paper-2); }
.showcase .container { display: grid; gap: var(--space-xl); }
.showcase .copy { display: grid; gap: var(--space-md); }

.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); align-items: start; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.facts li { padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-ink-2); }
.facts li:last-child { border-bottom: var(--rule-hair) solid var(--color-rule); }
.facts strong { color: var(--color-ink); font-weight: 650; }
.facts a { color: var(--color-accent); }

.plans { margin-top: var(--space-xl); overflow-x: auto; }
.plans table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--text-sm); }
.plans caption { text-align: left; color: var(--color-muted); font-size: var(--text-xs); padding-bottom: var(--space-xs); }
.plans th, .plans td { padding: var(--space-sm) var(--space-md); text-align: left; border-top: var(--rule-hair) solid var(--color-rule); vertical-align: top; }
.plans thead th { font-weight: 650; color: var(--color-ink); border-top: 0; border-bottom: var(--rule-hair) solid var(--color-ink); }
.plans tbody th { font-weight: 500; color: var(--color-ink-2); }
.plans td { font-variant-numeric: tabular-nums; color: var(--color-ink); }
.note { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 60ch; }

.closing { padding-block: var(--section-gap); text-align: left; }
.closing h2 { font-size: var(--text-section); line-height: 1.1; letter-spacing: var(--tracking-display); font-weight: 700; max-width: 16ch; }

.site-footer { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-xl); color: var(--color-ink-2); font-size: var(--text-sm); }
.site-footer .container { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--gap-columns); align-items: start; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); max-width: 56ch; }
.site-footer a { color: var(--color-ink-2); text-decoration: none; padding-block: var(--space-2xs); }
.site-footer a:hover { color: var(--color-accent); text-decoration: underline; }
.site-footer .legal { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); }

.not-found { padding-block: var(--section-gap); }
.not-found h1 { font-size: var(--text-section); line-height: 1.1; font-weight: 700; letter-spacing: var(--tracking-display); }

@media (max-width: 60rem) {
  .hero .container, .split { grid-template-columns: minmax(0, 1fr); }
  .hero .lead { max-width: 40ch; }
  .features { grid-template-columns: minmax(0, 1fr); }
  .nav a.hide-narrow { display: none; }
  .site-footer .container { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .hero { padding-block: var(--space-lg) var(--section-gap-s); }
  .nav { gap: var(--space-sm); }
  .actions .button { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .frame img { animation: rise var(--dur-long) var(--ease-out) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}