/* ==========================================================================
   swiss.css — the PlansFlow Swiss page layer (v1, 2026-09-17)
   --------------------------------------------------------------------------
   Shared by every page set in the Swiss-Flow language (index.html,
   pricing.html, …). Loaded after styles.css and before the page's own file
   (home.css, pricing.css). Holds what repeats from page to page: the
   self-hosted faces, the .sw tokens, the editorial type rules, the page
   chrome (top meta row, hero top padding, bottom rule with a link, section
   labels and headings, the one button) and the footer re-housing.
   Nothing in here knows about a particular page.
   Standard: references/swiss-flow-design/ (identity, typography, canvas).
   ========================================================================== */

/* ---------- 0. Faces ------------------------------------------------------- */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 300; font-display: block; src: url("assets/fonts/plex/IBMPlexSans-300.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: block; src: url("assets/fonts/plex/IBMPlexSans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: block; src: url("assets/fonts/plex/IBMPlexSans-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: block; src: url("assets/fonts/plex/IBMPlexMono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: block; src: url("assets/fonts/plex/IBMPlexMono-500.woff2") format("woff2"); }

/* ---------- 1. Tokens ------------------------------------------------------ */
.sw {
  --sw-pad: clamp(24px, 4.45vw, 80px);
  --sw-ink: var(--ink);
  --sw-paper: var(--page-a);
  --sw-muted: var(--zinc-400);
  --sw-line: rgb(var(--tint-rgb) / 0.18);
  --sw-accent: var(--flow);
  --sw-on-accent: #17140F;
  --sw-surface: var(--surface);
  --sw-sans: "IBM Plex Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  --sw-mono: "IBM Plex Mono", "Roboto Mono", ui-monospace, monospace;
  --sw-ease: cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
  font-family: var(--sw-sans);
  color: var(--sw-ink);
  -webkit-font-smoothing: antialiased;
}
.sw-shell { max-width: 1600px; margin-inline: auto; padding-inline: var(--sw-pad); }

.sw p { margin: 0; font-size: 18px; line-height: 1.55; max-width: 60ch; text-wrap: pretty; }
.sw h1, .sw h2, .sw h3, .sw h4 { margin: 0; font-weight: 400; letter-spacing: -0.055em; text-wrap: balance; color: inherit; }
.sw .eyebrow {
  font-family: var(--sw-mono);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.sw a { color: inherit; text-decoration: none; }
.sw a:focus-visible, .sw button:focus-visible, .sw [tabindex]:focus-visible { outline: 2px solid var(--sw-accent); outline-offset: 5px; }
.sw ::selection { background: var(--sw-accent); color: var(--sw-on-accent); }

/* The highlight. line-height .9 pulls the box in above the ascenders; the
   .2em of bottom padding carries the descender; the negative margin gives
   that space back to the line. Measured against the face's real metrics
   (see the verification notes in the README). */
.sw mark {
  display: inline-block;
  background: var(--sw-accent);
  color: var(--sw-on-accent);
  line-height: 0.9;
  padding: 0.02em 0.08em 0.24em;
  margin: -0.02em 0 -0.24em;
  vertical-align: baseline;
}

/* ---------- 2. Page chrome --------------------------------------------------- */
/* Room under the fixed header, then the meta row: page name left, the
   page's three words right. The foot is a rule with a sentence and a link. */
.sw-hero { padding-top: 120px; }
@media (min-width: 1600px) { .sw-hero { padding-top: 136px; } }

.hero-meta { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 40px; color: var(--sw-muted); }
.hero-meta > span:first-child { color: var(--sw-ink); }

.hero-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 40px;
  padding: 16px 0;
  border-top: 1px solid var(--sw-line);
  color: var(--sw-muted);
}
.hero-foot a { display: flex; align-items: center; gap: 40px; min-height: 44px; color: var(--sw-ink); }
.hero-foot a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ---------- 3. Sections ------------------------------------------------------ */
.section { padding-block: 96px; }
.section-label { display: flex; justify-content: space-between; gap: 24px; padding-top: 16px; border-top: 1px solid var(--sw-line); color: var(--sw-muted); }
.section-label > span:first-child { color: var(--sw-ink); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin: 40px 0 48px; }
.section-heading h2 { font-size: clamp(44px, 5vw, 76px); line-height: 1.02; }
.section-heading p { font-size: 16px; padding-right: 40px; color: var(--sw-muted); }

/* ---------- 4. The button ---------------------------------------------------- */
.button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  min-width: 280px;
  min-height: 44px;
  padding: 24px;
  background: var(--sw-accent);
  color: var(--sw-on-accent);
  font-size: 16px;
}
.button span { font-family: var(--sw-mono); font-size: 24px; line-height: 1; transition: transform 200ms var(--sw-ease); }
.button:hover span { transform: translate(3px, -3px); }

/* ---------- 4b. The orange plane — a page's one full-colour section ---------- */
/* Dark ink on the accent in both themes; the button inverts to ink. Used by
   the Pricing and About closings (`section.sw-plane`). */
.sw-plane { background: var(--sw-accent); color: var(--sw-on-accent); --sw-ink: #17140F; --sw-line: rgb(23 20 15 / 0.3); --sw-muted: rgb(23 20 15 / 0.72); }
.sw-plane .button { background: var(--sw-ink); color: #F4F3F0; }

/* ---------- 5. Footer (shared block, re-housed) ------------------------------ */
.sw-footer-wrap { padding-block: 0 8px; }
.sw .pf-footer { margin: 0; padding: 32px 0 24px; max-width: none; }

/* ---------- 6. Responsive ---------------------------------------------------- */
@media (max-width: 1000px) {
  .hero-meta > span:last-child { display: none; }
  .section { padding-block: 72px; }
}

@media (max-width: 700px) {
  .sw-hero { padding-top: 104px; }
  .hero-meta { margin-bottom: 24px; font-size: 9px; }
  .hero-foot { margin-top: 24px; padding: 8px 0; }
  .hero-foot > span { display: none; }
  .hero-foot a { width: 100%; justify-content: space-between; }
  .section { padding-block: 64px; }
  .section-label { font-size: 9px; }
  .section-label > span:nth-child(2) { display: none; }
  .section-heading { display: block; margin: 32px 0; }
  .section-heading h2 { font-size: 44px; }
  .section-heading p { margin-top: 24px; padding-right: 0; font-size: 15px; }
  .button { min-width: 0; padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .button span { transition: none; }
}