/* ============================================================================
   HEAD — landing page styles
   Layered on top of HEAD/brand/tokens.css and HEAD/brand/ui_kits/website/site.css.
   The Aalto-derived UI kit covers most of the page; this file adds only:
   - rail TOC (single landing, sticky, scrollspy-active)
   - section anchor offsets so sticky topbar doesn't cover the heading
   - pricing / methodology / patterns numerics
   - mobile rail-collapse
   - btn-primary normalized to navy (DESIGN.md note — site.css drift to ink)

   Brand rule reminders honored here:
   - One accent moment per non-hero section (navy at hero, callout, btn-primary).
   - Inter for body, Helvena for h1/h2/h3 (loaded by tokens.css).
   - Sentence case. Max three type sizes per surface.
   - Flat surfaces. Radius 0 / 2px / 999px. Nothing in between.
   ========================================================================= */

/* ----- normalize btn-primary to navy (Aalto canonical) on light surfaces - */
.btn-primary {
  background: var(--navy);
  border-color: var(--navy);
}
.btn-primary:hover { background: var(--navy-deep); }

/* ----- inverse btn-primary inside navy contexts (hero, callout) ---------- */
.hero-band .btn-primary,
.cta-band .btn-primary {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}
.hero-band .btn-primary:hover,
.cta-band .btn-primary:hover {
  background: var(--paper);
  color: var(--ink);
}

/* ----- topbar: add a CTA pill on the right ------------------------------- */
.topbar .right .cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600;
  padding: 8px 16px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-pill);
  text-decoration: none;
  color: var(--ink);
  transition: background var(--motion-fast), color var(--motion-fast);
}
.topbar .right .cta:hover { background: var(--ink); color: var(--white); }
.topbar .right .lang { display: inline-flex; gap: 8px; }
.topbar .right .lang a {
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color var(--motion-fast);
}
.topbar .right .lang a.active { color: var(--ink); font-weight: 600; }
.topbar .right .lang a:hover { color: var(--ink); }

/* ----- hero band: dual CTA + meta line ----------------------------------- */
.hero-band .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}
.hero-band .hero-ctas .btn-primary,
.hero-band .hero-ctas .btn-ghost.inverse {
  font-size: 15px;
}
.hero-band .hero-meta {
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  letter-spacing: 0;
}

/* ----- rail: single-page TOC variant ------------------------------------- */
.rail .rail-eyebrow {
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--ink-muted);
  margin: 0 0 16px;
  padding: 0 10px;
}
.rail .rail-toc { display: flex; flex-direction: column; }
.rail .rail-toc a {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 10px;
  margin: 0 -10px;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  transition: background var(--motion-fast);
}
.rail .rail-toc a .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  font-weight: 400;
  letter-spacing: 0.04em;
  width: 18px;
  flex-shrink: 0;
}
.rail .rail-toc a:hover { background: #fafafa; }
.rail .rail-toc a.active {
  background: var(--surface);
  font-weight: 700;
}
.rail .rail-toc a.active .num { color: var(--ink); }

.rail-sticky {
  position: sticky;
  top: 96px; /* below topbar */
  align-self: start;
}

/* ----- well: section anchoring + eyebrows -------------------------------- */
.well .section { scroll-margin-top: 96px; }
.well .section .s-eyebrow {
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--ink-muted);
  margin: 0 0 12px;
}
.well .section h2 { max-width: 22ch; }
.well .section .lede {
  font-size: 22px;
  line-height: 32px;
  margin-bottom: 32px;
  max-width: 60ch;
}

/* ----- pain agitation: 3-column gcard grid (override .card-grid 2-col) --- */
.pain-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 32px;
}
.pain-grid .gcard h3 { font-size: 22px; line-height: 28px; }
.pain-grid .gcard .pain-a {
  font-size: 14px; line-height: 20px;
  color: var(--ink-muted);
  margin: 0;
}

/* ----- the shift: pull-quote on paper ------------------------------------ */
.shift-pull {
  background: var(--paper);
  padding: 32px 36px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin: 0 0 24px;
}
.shift-pull p {
  font-size: 22px;
  line-height: 32px;
  margin: 0;
  max-width: 56ch;
  color: var(--ink);
}

/* ----- patterns / methodology / pricing: spec tables --------------------- */
table.spec td .num-cell {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
}
table.spec td.title {
  font-weight: 700;
  font-size: 16px;
  width: 28%;
}
table.spec td.desc {
  font-size: 15px;
  line-height: 22px;
  color: var(--ink);
}
table.spec td.anchor {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  width: 24%;
  text-align: right;
}
table.spec th.num,
table.spec td.num {
  width: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-muted);
  letter-spacing: 0.04em;
  font-weight: 400;
  text-align: left;
}

/* ----- selected work: same gcard grid as services ------------------------ */
.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 32px; }
.case-grid .gcard .case-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
  letter-spacing: 0.02em;
}
.case-grid .gcard .case-meta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* ----- founder card ------------------------------------------------------ */
.founder-card {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 40px;
  align-items: start;
  padding: 32px 36px;
  background: var(--surface);
  margin-bottom: 24px;
}
.founder-photo {
  width: 240px; height: 240px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
}
.founder-bio h3 { margin: 0 0 12px; font-size: 24px; line-height: 30px; }
.founder-bio p { margin: 0 0 12px; font-size: 16px; line-height: 24px; max-width: 52ch; }
.founder-bio ul { list-style: none; padding: 0; margin: 12px 0 0; }
.founder-bio ul li {
  padding: 8px 0;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
  line-height: 20px;
}
.founder-bio ul li:last-child { border-bottom: 1px solid var(--hairline); }

/* ----- FAQ accordion ----------------------------------------------------- */
.faq-list {
  border-top: 1px solid var(--hairline);
  margin-bottom: 32px;
}
.faq-list details {
  border-bottom: 1px solid var(--hairline);
  padding: 20px 0;
}
.faq-list summary {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.5px;
  color: var(--ink);
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 24px;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 22px;
  color: var(--ink-muted);
  flex-shrink: 0;
}
.faq-list details[open] summary::after { content: "−"; }
.faq-list details > p {
  margin: 12px 0 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--ink);
  max-width: 64ch;
}
.faq-list details > p strong { font-weight: 700; }

/* ----- read-next bar customizations -------------------------------------- */
.read-next .label-pre { letter-spacing: 0.06em; }

/* ----- final CTA band: dual buttons ------------------------------------- */
.cta-band .cta-inner-buttons { display: flex; gap: 12px; flex-wrap: wrap; }

/* ============================================================================
   Smooth scroll (suppressed under reduced motion)
   ========================================================================= */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* ============================================================================
   Responsive
   ========================================================================= */

@media (max-width: 1023px) {
  .hero-band { padding: 56px 32px 64px; }
  .hero-band h1 { font-size: 56px; line-height: 60px; letter-spacing: -2px; }

  /* Rail collapses to a horizontal chip bar above the well */
  .body-layout {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 32px 64px;
  }
  .rail {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
    padding: 0 0 16px;
  }
  .rail-sticky { position: static; }
  .rail .rail-eyebrow { padding: 0; }
  .rail .rail-toc { flex-direction: row; flex-wrap: wrap; gap: 0; }
  .rail .rail-toc a {
    margin: 0;
    padding: 8px 14px;
    border: 1px solid var(--hairline);
    margin-right: -1px;
    margin-bottom: -1px;
  }
  .rail .rail-toc a .num { display: none; }

  .pain-grid { grid-template-columns: 1fr 1fr; }
  .case-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .topbar { padding: 0 16px; height: 56px; }
  .topbar nav { display: none; }
  .topbar .right .lang { display: none; }
  .topbar .mk img,
  .topbar .mk svg { height: 24px; }
  .topbar .right .cta { padding: 6px 12px; font-size: 13px; }

  .hero-band { padding: 40px 20px 48px; }
  .hero-band .breadcrumb { font-size: 12px; gap: 6px; flex-wrap: wrap; }
  .hero-band .breadcrumb svg { width: 14px; height: 14px; }
  .hero-band h1 { font-size: 36px; line-height: 40px; letter-spacing: -1.25px; }
  .hero-band .dek { font-size: 16px; line-height: 24px; }
  .hero-band .hero-meta { font-size: 11px; line-height: 16px; }

  .body-layout { padding: 24px 20px 48px; }
  .rail { display: none; }

  .well .section { margin-bottom: 48px; }
  .well .section h2 { font-size: 28px; line-height: 32px; letter-spacing: -0.5px; max-width: none; }
  .well .section .lede { font-size: 17px; line-height: 25px; margin-bottom: 24px; }

  .pain-grid { grid-template-columns: 1fr; gap: 1px; }
  .pain-grid .gcard { padding: 24px 22px; }
  .pain-grid .gcard h3 { font-size: 19px; line-height: 25px; }

  .card-grid { grid-template-columns: 1fr; gap: 1px; }
  .gcard { padding: 24px 22px 26px; }
  .gcard h3 { font-size: 22px; line-height: 28px; }
  .gcard p { font-size: 15px; line-height: 22px; }

  .shift-pull { padding: 24px 22px; }
  .shift-pull p { font-size: 18px; line-height: 26px; }

  /* Spec tables: collapse to stacked card rows on mobile.
     Tables look great on desktop, disastrous when tr cells squeeze
     into 50px columns. Drop the table layout entirely below 720px. */
  table.spec { display: block; border-top: 1px solid var(--hairline); }
  table.spec thead { display: none; }
  table.spec tbody { display: block; }
  table.spec tr {
    display: block;
    padding: 16px 0;
    border-bottom: 1px solid var(--hairline);
  }
  table.spec td {
    display: block;
    border: 0;
    padding: 0;
    width: auto !important;
    text-align: left !important;
    white-space: normal;
  }
  table.spec td.num {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--ink-muted);
    letter-spacing: 0.06em;
    margin-bottom: 4px;
  }
  table.spec td.title {
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    margin-bottom: 6px;
  }
  table.spec td.desc {
    font-size: 14px;
    line-height: 20px;
    color: var(--ink);
    margin-bottom: 6px;
  }
  table.spec td.anchor {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ink);
    margin-bottom: 6px;
  }

  .case-grid .gcard .case-meta { font-size: 11px; }

  .founder-card { grid-template-columns: 1fr; gap: 20px; padding: 24px 22px; }
  .founder-photo { width: 100%; max-width: none; height: 180px; }
  .founder-bio h3 { font-size: 20px; line-height: 26px; }
  .founder-bio p { font-size: 15px; line-height: 22px; }

  .faq-list summary { font-size: 17px; line-height: 24px; gap: 16px; letter-spacing: -0.25px; }
  .faq-list summary::after { font-size: 20px; }
  .faq-list details > p { font-size: 14px; line-height: 21px; }

  .read-next { font-size: 17px; padding: 20px 0; }
  .read-next .label-pre { font-size: 11px; }

  .cta-band { padding: 48px 20px; }
  .cta-band .cta-inner { flex-direction: column; align-items: flex-start; }
  .cta-band h2 { font-size: 28px; line-height: 32px; letter-spacing: -0.5px; max-width: none; }
  .cta-band .cta-inner-buttons { width: 100%; }
  .cta-band .btn-primary,
  .cta-band .btn-ghost { font-size: 14px; }

  .footer { padding: 40px 20px 32px; }
  .footer .mk img,
  .footer .mk svg { height: 64px; }
  .footer-inner { grid-template-columns: 1fr; gap: 28px; }
  .footer h5 { font-size: 12px; }
  .footer a, .footer p { font-size: 14px; line-height: 22px; }
  .footer .bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
}

@media (max-width: 380px) {
  .topbar .right .cta { padding: 6px 10px; font-size: 12px; }
  .hero-band h1 { font-size: 32px; line-height: 36px; letter-spacing: -1px; }
}