/*
 * Shared page chrome for all family templates.
 *
 * Loaded BEFORE the family-specific stylesheet (/shared/usecase.css,
 * /vs/style.css) on every page that uses it. Defines design tokens,
 * the box-sizing reset, the site header / nav, the page container
 * widths, the body typography defaults, .tldr / .bullets / .faq-list,
 * the CTA block, and the site footer.
 *
 * Design tokens follow the project CLAUDE.md design system.
 */

:root {
  --bg:           #FAF7F2;
  --bg-alt:       #F3EDE5;
  --paper:        #FFFFFF;
  --ink:          #1B1A26;
  --ink-mid:      #4A4956;
  --ink-soft:     #6E6C7C;
  --ink-faint:    #9B98A8;
  --line:         #E6E1D6;
  --line-soft:    #EFEAE0;
  --accent:       #975415;
  --accent-glow:  #D08536;
  --accent-tint:  #F2E8DA;
  --font-sans:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  padding-top: 72px;
}
a { color: inherit; text-decoration: none; }

.skip-link { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { position: fixed; left: 1rem; top: 1rem; width: auto; height: auto; padding: 0.75rem 1rem; background: var(--ink); color: var(--bg); z-index: 1000; border-radius: 6px; font-weight: 600; }

/* Site header / nav */
header.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(250, 247, 242, 0.85); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--line-soft); }
nav.site-nav { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; }
@media (max-width: 640px) { nav.site-nav { padding: 0.85rem 1.25rem; } }
.logo { display: inline-flex; align-items: center; font-family: 'Sora', system-ui, sans-serif; font-weight: 700; font-size: 1.4rem; color: var(--ink); letter-spacing: -0.015em; min-height: 44px; text-decoration: none; }
.logo .slash { color: var(--ink-soft); font-weight: 400; margin: 0 0.2em; }
.nav-right { display: flex; align-items: center; gap: 1.4rem; }
.lang-toggle { display: inline-flex; gap: 0.4rem; align-items: center; font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-soft); letter-spacing: 0.04em; min-height: 44px; }
.lang-toggle a, .lang-toggle .active { color: var(--ink-soft); padding: 0.5rem 0.25rem; text-decoration: none; transition: color 200ms ease; }
.lang-toggle a.active, .lang-toggle .active { color: var(--ink); font-weight: 600; }
.lang-sep { color: var(--ink-soft); }
.nav-cta { padding: 0.65rem 1.15rem; min-height: 44px; background: #0A0A0A; color: var(--bg); border-radius: 999px; font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: background 200ms ease; display: inline-flex; align-items: center; gap: 0.4rem; }
.nav-cta:hover { background: var(--accent); }
@media (max-width: 480px) { .lang-toggle { display: none; } }

/* Page containers. .page is the default narrow column for use-case,
   /vs/ index, and /ai-info/. .page-wide is the wider container used
   by the /vs/ comparison subpages where the table needs more room. */
.page { max-width: 820px; margin: 0 auto; padding: 4rem 2rem 6rem; }
.page-wide { max-width: 980px; margin: 0 auto; padding: 4rem 2rem 6rem; }

/* Body typography */
.eyebrow { font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.25rem; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 1.25rem; max-width: 820px; }
.lede { font-size: 1.15rem; color: var(--ink-mid); line-height: 1.6; max-width: 720px; margin-bottom: 2.5rem; }
.byline { color: var(--ink-soft); font-size: .9rem; margin-bottom: 3rem; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.byline strong { color: var(--ink); font-weight: 600; }

/* TLDR card */
.tldr { background: var(--accent-tint); border-left: 3px solid var(--accent); padding: 1.5rem 1.75rem; border-radius: 4px; margin-bottom: 3rem; }
.tldr-label { font-family: var(--font-mono); font-size: .7rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: .75rem; }
.tldr ul { list-style: none; }
.tldr li { padding: .35rem 0; color: var(--ink); font-size: .98rem; }
.tldr li strong { font-weight: 700; }

/* Sections, body type defaults */
section { margin-bottom: 3rem; }
h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; margin-bottom: 1.25rem; }
h3 { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.005em; margin: 1.5rem 0 .5rem; }
p { margin-bottom: 1rem; }
.section-lede { color: var(--ink-mid); margin-bottom: 1.5rem; font-size: 1rem; max-width: 720px; }

/* Bullet list */
ul.bullets { list-style: none; padding-left: 0; margin: 0; }
ul.bullets li { padding: .5rem 0 .5rem 1.5rem; position: relative; font-size: .98rem; color: var(--ink-mid); }
ul.bullets li::before { content: "\2022"; position: absolute; left: .25rem; top: .5rem; color: var(--accent); font-weight: 700; }
ul.bullets li strong { color: var(--ink); font-weight: 600; }

/* FAQ */
.faq-list { border-top: 1px solid var(--line); margin-top: 1rem; }
.faq-item { border-bottom: 1px solid var(--line); padding: 1.25rem 0; }
.faq-item h3 { font-size: 1.02rem; margin: 0 0 .5rem; }
.faq-item p { margin: 0; color: var(--ink-mid); font-size: .98rem; }

/* CTA block */
.cta-block { background: linear-gradient(135deg, var(--ink) 0%, #2a2935 100%); color: var(--bg); border-radius: 16px; padding: 2.5rem; margin-top: 3.5rem; }
.cta-eyebrow { font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-glow); margin-bottom: 1rem; }
.cta-block h2 { color: var(--bg); margin-bottom: 1rem; font-size: 1.6rem; }
.cta-block p { color: rgba(250, 247, 242, 0.8); margin-bottom: 1.75rem; font-size: 1rem; }
.cta-btn { display: inline-block; background: var(--bg); color: var(--ink); padding: .85rem 1.75rem; border-radius: 999px; font-weight: 700; font-size: .95rem; transition: background 200ms ease, transform 200ms ease; }
.cta-btn:hover { background: var(--accent-tint); transform: translateY(-1px); }
.cta-sub { margin-top: 1rem; font-size: .82rem; color: rgba(250, 247, 242, 0.6); }
.cta-sub a { color: var(--accent-glow); text-decoration: underline; }

/* Site footer */
footer.site-footer { background: var(--bg-alt); color: var(--ink); padding: 4.5rem 0 2rem; border-top: 1px solid var(--line); margin-top: 4rem; }
footer.site-footer .container { max-width: 1180px; margin: 0 auto; padding: 0 2rem; }
footer.site-footer .columns { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem 2rem; padding-bottom: 3rem; border-bottom: 1px solid var(--line); }
footer.site-footer .col h3 { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--ink-soft); text-transform: uppercase; margin: 0 0 1.1rem; font-weight: 500; }
footer.site-footer .col ul { list-style: none; }
footer.site-footer .col li { margin-bottom: 0.7rem; }
footer.site-footer .col a { color: var(--ink-mid); font-size: 0.95rem; transition: color 200ms ease; }
footer.site-footer .col a:hover { color: var(--ink); }
footer.site-footer .col.brand p { color: var(--ink-soft); font-size: 0.95rem; max-width: 36ch; }
footer.site-footer .col.brand .logo { color: var(--ink); margin-bottom: 1.1rem; }
footer.site-footer .copyright { padding-top: 1.5rem; font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-soft); letter-spacing: 0.08em; }

/* Mobile breakpoint */
@media (max-width: 720px) {
  footer.site-footer .columns { grid-template-columns: 1fr; gap: 2rem; }
  .page, .page-wide { padding: 3rem 1.5rem 5rem; }
  h1 { font-size: clamp(1.7rem, 1.4rem + 2vw, 2.4rem); }
  .lede { font-size: 1rem; }
  .cta-block { padding: 2rem 1.5rem; }
}