@font-face { font-family: 'PPCharlevoix'; src: url('/public/fonts/pp-charlevoix/PPCharlevoix-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'PPCharlevoix'; src: url('/public/fonts/pp-charlevoix/PPCharlevoix-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
:root {
  --font-charlevoix: 'PPCharlevoix';
  /* Landing-specific geometry; the application tokens remain in tokens.css. */
  --lp-width: 1120px;
  --lp-hero-type: 400 clamp(36px, 5vw, 64px)/1.25 var(--cb-font-sans);
  --lp-heading-type: 400 clamp(24px, 3vw, 32px)/1.4 var(--cb-font-sans);
  --lp-brand-width: 40px;
  --lp-wordmark-width: 110px;
  --lp-section-space: calc(var(--cb-space-12) + var(--cb-space-4));
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--cb-text); background: var(--cb-canvas); font: var(--cb-text-body); -webkit-font-smoothing: antialiased; }
button, input { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, p, figure { margin: 0; }
h1 { font: var(--lp-hero-type); text-wrap: balance; }
h2 { font: var(--lp-heading-type); text-wrap: balance; }
h3 { font: var(--cb-text-section); }
img { display: block; max-width: 100%; }
button:focus-visible, a:focus-visible { outline: var(--cb-focus-ring-width) solid var(--cb-focus); outline-offset: var(--cb-focus-ring-offset); }
.skip-link { position: absolute; top: var(--cb-space-4); left: var(--cb-space-4); padding: var(--cb-space-3) var(--cb-space-4); background: var(--cb-canvas); transform: translateY(-200%); z-index: var(--cb-z-modal); }
.skip-link:focus { transform: none; }
.site-header { max-width: var(--lp-width); margin: auto; padding: var(--cb-space-6) var(--cb-space-8); display: flex; align-items: center; justify-content: space-between; gap: var(--cb-space-6); }
.brand { display: flex; align-items: center; gap: var(--cb-space-3); text-decoration: none; }
.brand-mark { width: var(--lp-brand-width); height: auto; --cb-mark-motion: 0.7; }
.wordmark-lockup { display: flex; align-items: flex-start; gap: var(--cb-space-2); }
.logotype { width: var(--lp-wordmark-width); height: auto; flex-shrink: 0; }
.brand-beta { font: var(--cb-text-meta); color: var(--cb-text-secondary); padding-top: var(--cb-space-1); flex-shrink: 0; }
nav { display: flex; align-items: center; gap: var(--cb-space-6); }
.language-toggle, .text-link { font: var(--cb-text-control); background: none; border: 0; padding: var(--cb-space-2) 0; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.language-toggle:hover, .text-link:hover { text-decoration: underline; text-underline-offset: var(--cb-space-1); }
main, footer { max-width: var(--lp-width); margin: auto; padding: 0 var(--cb-space-8); }
.hero { display: flex; flex-direction: column; align-items: center; gap: var(--cb-space-6); padding: var(--lp-section-space) 0; text-align: center; }
.hero .lead { max-width: 42em; }
.lead { font: var(--cb-text-body); color: var(--cb-text-secondary); line-height: 1.7; text-wrap: pretty; }
.note { font: var(--cb-text-meta); color: var(--cb-text-secondary); line-height: 1.7; }
.actions { display: flex; align-items: center; justify-content: center; gap: var(--cb-space-3); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: calc(var(--cb-space-12) - var(--cb-space-1)); padding: var(--cb-space-3) var(--cb-space-6); border: var(--cb-border-width) solid var(--cb-border-control); border-radius: var(--cb-radius-control); font: var(--cb-text-control); text-decoration: none; transition: background var(--cb-duration-fast) var(--cb-easing); }
.primary { background: var(--cb-action); color: var(--cb-action-text); border-color: var(--cb-action); }
.primary:hover { background: var(--cb-action-hover); }
.primary:active { background: var(--cb-action-pressed); }
.secondary { background: var(--cb-canvas); color: var(--cb-text); }
.secondary:hover { background: var(--cb-surface); }
.secondary:active { background: var(--cb-surface-pressed); }
.section { border-top: var(--cb-border-width) solid var(--cb-border); padding: var(--lp-section-space) 0; }
.section-heading { display: flex; flex-direction: column; gap: var(--cb-space-4); text-align: center; align-items: center; }
.case-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--cb-space-2); margin: var(--cb-space-8) 0; }
.case-button { border: 0; border-radius: var(--cb-radius-nav); background: transparent; padding: var(--cb-space-2) var(--cb-space-3); font: var(--cb-text-control-sm); min-height: calc(var(--cb-space-12) - var(--cb-space-1)); }
.case-button:hover { background: var(--cb-surface); }
.case-button[aria-pressed='true'] { background: var(--cb-action); color: var(--cb-action-text); }
.triptych { display: grid; grid-template-columns: minmax(0, 1fr) var(--cb-space-6) minmax(0, 1fr) var(--cb-space-6) minmax(0, 1fr); gap: var(--cb-space-3); align-items: start; }
.triptych figure { min-width: 0; display: flex; flex-direction: column; gap: var(--cb-space-3); }
.image-label { font: var(--cb-text-control); }
.media-frame { aspect-ratio: 4 / 5; background: var(--cb-surface); border: var(--cb-border-width) solid var(--cb-border); border-radius: var(--cb-radius-card); overflow: hidden; }
.media-frame img { height: 100%; width: 100%; object-fit: contain; }
.triptych figcaption { font: var(--cb-text-control-sm); color: var(--cb-text-secondary); line-height: 1.7; }
.connector { align-self: center; text-align: center; font: var(--cb-text-section); color: var(--cb-text-secondary); }
.showcase > .note { margin-top: var(--cb-space-6); text-align: center; }
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cb-space-4); margin-top: var(--cb-space-8); }
.principles article { display: flex; flex-direction: column; gap: var(--cb-space-3); padding: var(--cb-space-6); background: var(--cb-surface); border-radius: var(--cb-radius-card); }
.principles h3 { font: var(--cb-text-control); }
.description { font: var(--cb-text-control-sm); color: var(--cb-text-secondary); line-height: 1.8; text-wrap: pretty; }
.flow-controls { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cb-space-3); margin: var(--cb-space-8) 0; }
.step-button { display: flex; flex-direction: column; align-items: center; gap: var(--cb-space-3); background: transparent; border: 0; border-radius: var(--cb-radius-nav); padding: var(--cb-space-3); font: var(--cb-text-control-sm); }
.step-button:hover { background: var(--cb-surface); }
.step-number { display: flex; align-items: center; justify-content: center; width: var(--cb-space-8); height: var(--cb-space-8); border: var(--cb-border-width) solid var(--cb-border-control); border-radius: var(--cb-radius-pill); background: var(--cb-canvas); }
.step-button[aria-pressed='true'] .step-number { background: var(--cb-action); border-color: var(--cb-action); color: var(--cb-action-text); }
.screenshot-frame { display: flex; align-items: center; justify-content: center; background: var(--cb-surface); border: var(--cb-border-width) solid var(--cb-border); border-radius: var(--cb-radius-card); overflow: hidden; aspect-ratio: 16 / 10; padding: var(--cb-space-6); }
.screenshot-frame img { height: 100%; width: 100%; object-fit: contain; }
.flow-preview figcaption { display: flex; flex-direction: column; align-items: center; gap: var(--cb-space-3); text-align: center; margin-top: var(--cb-space-6); }
.flow-preview .description { max-width: 44em; }
.flow > .note { text-align: center; margin-top: var(--cb-space-3); }
.start { display: flex; flex-direction: column; align-items: center; gap: var(--cb-space-6); text-align: center; }
.hero-copy { display: flex; flex-direction: column; align-items: center; gap: var(--cb-space-3); }
.hero-copy .lead { max-width: 42em; }
@media (min-width: 641px) { .hero-copy .lead { text-wrap: balance; } }
.trial-notes { display: flex; flex-direction: column; align-items: center; gap: var(--cb-space-2); max-width: 42em; }
.trial-notes h3 { font: var(--cb-text-control-sm); color: var(--cb-text); margin: 0; }
.trial-notes ul { list-style: none; margin: 0; padding: 0; font: var(--cb-text-meta); color: var(--cb-text-secondary); line-height: 1.7; }
.trial-notes .contact { white-space: nowrap; }
.trial-notes a { color: var(--cb-text); text-underline-offset: var(--cb-space-1); }
footer { border-top: var(--cb-border-width) solid var(--cb-border); padding-top: var(--cb-space-6); padding-bottom: var(--cb-space-6); text-align: center; }
@media (max-width: 640px) {
  :root { --lp-section-space: var(--cb-space-12); --lp-brand-width: 36px; --lp-wordmark-width: 100px; }
  .site-header { padding: var(--cb-space-4) var(--cb-space-6); }
  main, footer { padding-left: var(--cb-space-6); padding-right: var(--cb-space-6); }
  nav { gap: var(--cb-space-4); }
  .brand { gap: var(--cb-space-2); }
  .hero { padding-top: var(--cb-space-12); }
  .triptych { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cb-space-6) var(--cb-space-3); }
  .connector { display: none; }
  .triptych figure:last-child { grid-column: 1 / -1; }
  .triptych figure:last-child .media-frame { aspect-ratio: 1 / 1; }
  .principles { grid-template-columns: 1fr; gap: var(--cb-space-4); margin-top: var(--cb-space-8); }
  .flow-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step-button { flex-direction: row; align-items: center; text-align: left; }
  .step-number { flex-shrink: 0; }
  .screenshot-frame { padding: var(--cb-space-2); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media (max-width: 360px) { .site-header { padding-inline: var(--cb-space-2); gap: var(--cb-space-2); } .brand, .wordmark-lockup { gap: var(--cb-space-1); } nav { gap: var(--cb-space-2); } }