/* Mise brand layer for the landing site. Load order: app.css (the app's tokens and components), ds.css (the Mise design
   system tokens from site/ds), site.css (layout), then this file. It maps the app's token names onto the design system,
   so the app components the site reuses take the Mise look, and adds the logo, tape labels and the five stations. */
:root {
  --bg: var(--surface-page); --panel: var(--surface-sunken); --panel-2: var(--surface-placeholder); --raised: var(--surface-raised);
  --hairline: var(--border-subtle);
  --ink: var(--text-strong); --ink-2: var(--text-muted); --ink-3: var(--text-faint);
  --accent-press: var(--accent-hover); --accent-ink: var(--text-accent); --on-accent: #FFFFFF;
  --surface-inverse: var(--action-primary);
  /* The app's --focus-ring is a whole box-shadow and the design system's is a colour: keep the app's shape, use the
     design system's ring (3px paprika at 35%). */
  --focus-ring: 0 0 0 3px rgba(200, 64, 13, .35);
  --shadow-focus: var(--focus-ring);
  --shadow-popover: var(--shadow-md);
}
[data-theme="dark"] {
  --bg: var(--surface-page); --panel: var(--surface-sunken); --panel-2: var(--surface-placeholder); --raised: var(--surface-raised);
  --hairline: var(--border-subtle);
  --ink: var(--text-strong); --ink-2: var(--text-muted); --ink-3: var(--text-faint);
  --accent-press: var(--accent-hover); --accent-ink: var(--text-accent); --on-accent: #FFFFFF;
  --focus-ring: 0 0 0 3px rgba(229, 98, 47, .45);
  --shadow-popover: 0 8px 24px rgb(0 0 0 / .5);
}

/* Type: Bricolage Grotesque for headings (display 700 / 1.02 / -0.035em, H2 700 / 1.1, H3 500), Inter for text. */
.tp-display { font-weight: 700; letter-spacing: var(--tracking-display); line-height: 1.02; font-size: clamp(36px, 5vw, 64px); font-variation-settings: "opsz" 96; }
.tp-h1, .tp-h2 { font-weight: 700; letter-spacing: var(--tracking-display); line-height: 1.1; }
.tp-h3, .tp-faq-item summary { font-weight: 500; }
.tp-proof-value, .tp-price-value { font-weight: 700; }
.tp-lead { line-height: 1.6; max-width: 66ch; }

/* Logo lockup: mark at 0.75x the word size, gap 0.3x, MISE +0.06em, BY MODUS in Plex Mono underneath. */
.mise-logo { --size: 24px; display: inline-flex; flex-direction: column; gap: calc(var(--size) * 0.18); text-decoration: none; color: var(--text-strong); }
.mise-logo:hover { text-decoration: none; color: var(--text-strong); }
.mise-row { display: inline-flex; align-items: center; gap: calc(var(--size) * 0.3); }
.mise-mark { width: calc(var(--size) * 0.75); height: calc(var(--size) * 0.75); flex: none; display: block; }
.mise-ink { stroke: currentColor; }
.mise-fill { fill: var(--paprika); }
.mise-word { font: 700 var(--size)/1 var(--font-wordmark); letter-spacing: var(--tracking-wordmark); margin-right: -0.06em; font-variation-settings: "opsz" 96; }
.mise-by { font: 500 max(9px, calc(var(--size) * 0.3))/1 var(--font-mono); letter-spacing: 0.14em; color: var(--text-muted); padding-left: calc(var(--size) * 1.05); }
.tp-footer .mise-logo { --size: 26px; }

/* Tape: aged, translucent paprika with denser edges and torn ends, only for numbered labels, slightly crooked. */
.tp-kicker, .mise-tape, .tp-step-no {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: auto; white-space: nowrap;
  padding: 4px 9px 3px; border-radius: 0;
  background: linear-gradient(90deg, var(--tape-edge), var(--tape) 18%, var(--tape) 82%, var(--tape-edge)); color: var(--tape-ink);
  clip-path: polygon(0 0, 100% 0, 98.5% 30%, 100% 55%, 98.8% 80%, 100% 100%, 0 100%, 1.4% 72%, 0 48%, 1.2% 22%);
  font: 500 11px/1.2 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; transform: rotate(-1.8deg);
}
/* The long line above the headline: nearly straight, turning from its left end, and it may wrap on a phone. */
.tp-hero .mise-tape { transform: rotate(-0.5deg); transform-origin: left center; white-space: normal; max-width: 100%; line-height: 1.5; }
.tp-kicker .vt-icon { width: 12px; height: 12px; }
.tp-steps li:nth-child(even) .tp-step-no, .mise-stations li:nth-child(even) .mise-tape { transform: rotate(1.4deg); }

/* Cards: raised is the default (white, seam border, small shadow, 12px). */
.vt-card { background: var(--surface-raised); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); border-radius: var(--radius-lg); }
.tp-plan[data-popular="true"] { background: var(--surface-raised); box-shadow: 0 0 0 2px var(--accent), var(--shadow-sm); }
.tp-cta { border-radius: var(--radius-2xl); background: var(--action-primary); color: var(--text-inverse); }
.tp-cta .tp-lead { color: color-mix(in oklab, var(--text-inverse) 78%, var(--action-primary)); }
.tp-shot { box-shadow: var(--shadow-md); }

/* Site sections are 96px apart. */
.tp-section { padding: 96px 0; }
.tp-section.tp-tight { padding: 32px 0; }
@media (max-width: 640px) { .tp-section { padding: 64px 0; } }

/* The five mises */
.mise-stations { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.mise-station { padding: 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mise-term { font: 500 21px/1.15 var(--font-heading); letter-spacing: var(--tracking-heading); color: var(--text-accent); }
.mise-station p { color: var(--text-muted); font-size: 14px; line-height: 1.5; }
@media (max-width: 1020px) { .mise-stations { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mise-stations { grid-template-columns: 1fr; } }

/* ── Website kit (design system ui_kits/website): wider page, hero on a linen board, linen band, segments, cast iron close ── */
.tp-wrap { max-width: calc(var(--site-max) + 80px); padding: 0 40px; }
.tp-narrow { max-width: 900px; }
@media (max-width: 960px) { .tp-wrap { padding: 0 24px; } }
@media (max-width: 640px) { .tp-wrap { padding: 0 16px; } }
.tp-header .mise-logo { --size: 30px; }
.tp-header-row { height: 72px; }
.tp-nav[data-open="true"] { top: 72px; }

/* Prep grid: containers with a seam outline, one filled paprika. */
.mise-prep { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 14%; width: 100%; }
.mise-prep span { aspect-ratio: 1; border-radius: 20%; border: 2px solid var(--seam-strong); }
.mise-prep span.on { border: 0; background: var(--paprika); }
[data-theme="dark"] .mise-prep span { border-color: var(--border-default); }

/* Hero */
.tp-hero { padding: 72px 0 56px; }
.tp-hero-grid { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: 56px; }
.tp-hero-text { display: flex; flex-direction: column; gap: 22px; }
.tp-hero-text .tp-lead, .tp-hero-text .tp-actions, .tp-hero-text .tp-note { margin-top: 0; }
.mise-hero-title { margin: 0; font-size: clamp(38px, 4.2vw, 60px); text-wrap: balance; }
.mise-say { font-size: 13px; color: var(--text-faint); }
.mise-board { background: var(--surface-sunken); border-radius: var(--radius-2xl); padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.mise-board .tp-hero-shot { transform: none; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); }
.mise-board-grid { width: 46%; gap: 10%; }
@media (min-width: 1021px) { .mise-board { margin-right: -28px; } }

/* Linen band for how it works */
.mise-band { background: var(--surface-sunken); }
.mise-big { font-size: clamp(30px, 4vw, 48px); line-height: 1.05; max-width: 720px; }
.mise-band .vt-card { border-color: transparent; box-shadow: none; border-radius: var(--radius-xl); }
.mise-step { padding: 28px; gap: 14px; min-height: 260px; }
.mise-step-grid { width: 40px; gap: 4px; margin-bottom: auto; }
.mise-step-grid span { border-width: 2px; border-radius: 4px; }
.mise-step .mise-tape { margin-top: 16px; }
.mise-step-title { margin: 0; font: 600 22px/1.2 var(--font-heading); letter-spacing: var(--tracking-heading); }
.mise-step p { font-size: 15px; }

/* Segments */
.mise-seg { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mise-seg-photo { aspect-ratio: 4 / 3; border-radius: var(--radius-xl); background: var(--surface-placeholder); display: flex; align-items: flex-end; padding: 14px; }
.mise-seg-photo span { font: 400 11px/1.2 var(--font-mono); color: var(--text-muted); }
.mise-seg-title { margin: 0; font: 600 20px/1.25 var(--font-heading); letter-spacing: -0.015em; }
.mise-seg p { color: var(--text-muted); font-size: 15px; line-height: 1.55; }

/* Closing call to action on cast iron, then the footer on cast iron */
.mise-close { background: var(--cast-iron); color: var(--linen); padding: 96px 0; }
.mise-close-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: center; }
.mise-close-grid > div:first-child { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.mise-close-title { margin: 0; font: 700 clamp(36px, 5vw, 56px)/1.02 var(--font-heading); letter-spacing: var(--tracking-display); text-wrap: balance; }
.mise-close .mise-prep span { border-color: #4A4946; }
.tp-footer.mise-foot { background: var(--cast-iron); color: var(--linen); border-top: 1px solid #2A2A28; margin-top: 0; padding: 56px 0 0; }
.mise-foot .mise-logo { color: var(--linen); }
.mise-foot .mise-by { color: #A3A19B; }
.mise-foot-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding-bottom: 48px; }
.mise-foot-brand { display: flex; flex-direction: column; gap: 14px; }
.mise-foot-brand > span { font-size: 13px; color: #A3A19B; }
.mise-foot-col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.mise-foot-col span { color: #A3A19B; font-size: 13px; }
.mise-foot-col a { color: var(--linen); text-decoration: none; }
.mise-foot-col a:hover { text-decoration: underline; text-underline-offset: 2px; }
.mise-foot-small { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid #2A2A28; padding-top: 18px; padding-bottom: 28px; font-size: 12px; color: #8C8A84; }
@media (max-width: 960px) {
  .mise-close-grid, .mise-foot-grid { grid-template-columns: minmax(0, 1fr); }
  .mise-close-grid .mise-prep { max-width: 320px; }
}
@media (max-width: 1020px) {
  .tp-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 640px) {
  .tp-header .mise-logo { --size: 24px; }
  .tp-header-row { height: 64px; }
  .tp-nav[data-open="true"] { top: 64px; }
  .tp-header-end > .vt-btn[data-variant="primary"] { display: none; }
  .tp-hero { padding: 40px 0 32px; }
  .mise-board { padding: 16px 16px 14px; border-radius: var(--radius-xl); }
  .mise-step { min-height: 0; }
}

/* Who it's for: four example audiences, as cards with an icon (they overlap, so no photos per segment). */
.mise-aud { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1020px) { .mise-aud { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .mise-aud { grid-template-columns: 1fr; } }

/* Examples: what you give, what Mise makes */
.mise-example { margin: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.mise-example img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.mise-example figcaption { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.mise-example p { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.55; }
.mise-example-lang { display: block; font: 500 11px/1.2 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.mise-example dl { margin: 4px 0 0; display: flex; flex-direction: column; gap: 4px; }
.mise-example dt { font: 500 11px/1.2 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); margin-top: 8px; }
.mise-example dd { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.55; }

/* The team as one compact block */
.mise-team { display: flex; gap: 24px; align-items: center; padding: 24px 28px; flex-wrap: wrap; }
.mise-team > div:last-child { flex: 1 1 360px; display: flex; flex-direction: column; gap: 6px; }
.mise-team p { color: var(--text-muted); font-size: 15px; line-height: 1.55; max-width: 72ch; }
.mise-team-faces { display: flex; }
.mise-team-faces .vt-avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--surface-raised); }
.mise-team-faces .vt-avatar:first-child { margin-left: 0; }