/* PackFlat OS marketing site — plain CSS, no build step. Tokens mirror the app's dark theme (src/index.css). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
}

:root {
  --stage: #0a0a0a;
  --panel: #141415;
  --panel-2: #1c1c1e;
  --hair: rgba(255, 255, 255, 0.08);
  --hair-strong: rgba(255, 255, 255, 0.16);
  --ink: #f3ede7;
  --ink-dim: #a1a1aa;
  --silver-top: #e9ebec;
  --silver-bottom: #9ba1a6;
  --teal: #7fbccb;
  --teal-dim: #5fa3b4;
  --emerald: #6fbfa0;
  --amber: #d99a5b;
  /* Bolder, more saturated versions of the same three hues, used ONLY for the big lighting effects (glows, the
     headline gradient). The calmer tones above stay the ones used for links, icons and small text — this pair
     exists because a color strong enough to read as 'lighting' on a huge dark page is too loud for a link.
  */
  --glow-teal: #2dd4e8;
  --glow-emerald: #34e0a1;
  --glow-amber: #ffb648;
  --on-silver: #1c140a;
  --radius: 14px;
  --wrap: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--stage);
  color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.15; margin: 0; text-wrap: balance; }
p { margin: 0; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 720px; }
.center { text-align: center; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 10; background: var(--ink); color: var(--stage); padding: 8px 12px; border-radius: 8px; }
.skip:focus { left: 8px; }

:focus-visible { outline: 2px solid var(--silver-top); outline-offset: 3px; border-radius: 6px; }

/* Top bar */
.topbar { position: sticky; top: 0; z-index: 5; background: rgba(10, 10, 10, 0.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand img { height: 22px; width: auto; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border-radius: 12px;
  font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
}
.btn-small { min-height: 40px; padding: 0 16px; font-size: 0.875rem; }
.btn-primary { background: linear-gradient(to bottom, var(--silver-top), var(--silver-bottom)); color: var(--on-silver); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-quiet {
  background: none; border: none; padding: 0; min-height: auto;
  color: var(--teal); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-quiet:hover { color: var(--teal-dim); }
.btn-quiet::after { content: '→'; font-weight: 400; }

/* Typography */
h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); font-weight: 700; letter-spacing: -0.02em; }
.grad-word {
  background: linear-gradient(100deg, var(--glow-teal) 0%, var(--glow-emerald) 55%, var(--glow-amber) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
h2 { font-size: clamp(1.625rem, 4vw, 2.25rem); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: 1.125rem; font-weight: 650; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8125rem; font-weight: 600; color: var(--silver-bottom); margin-bottom: 16px; }
.eyebrow--amber { color: var(--glow-amber); }
.lede { font-size: clamp(1.0625rem, 2.4vw, 1.25rem); color: var(--ink-dim); max-width: 34em; }
.fine { font-size: 0.875rem; color: var(--ink-dim); margin-top: 16px; }

/* Hero */
.hero { overflow-x: clip; display: grid; gap: 40px; padding-top: 48px; padding-bottom: 72px; align-items: center; }
.hero-copy .lede { margin-top: 20px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-shot { display: flex; justify-content: center; }

/* Phone frame */
.phone { position: relative; margin: 0; width: 100%; max-width: 300px; padding: 9px; background: #000; border: 1px solid var(--hair-strong); border-radius: 38px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03); z-index: 1; }
.phone::before {
  /* the tight halo, right against the frame */
  content: ""; position: absolute; inset: -50px -40px; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow, var(--glow-teal)), transparent 70%);
  filter: blur(38px); opacity: 0.95; pointer-events: none;
}
.phone::after {
  /* the big ambient wash — colors the space around the whole phone, not just its edge */
  content: ""; position: absolute; inset: -220px; z-index: -2; border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow, var(--glow-teal)), transparent 68%);
  filter: blur(90px); opacity: 0.55; pointer-events: none;
}
.phone--emerald { --glow: var(--glow-emerald); }
.phone--amber { --glow: var(--glow-amber); }
.phone img { border-radius: 30px; width: 100%; }

/* Sections */
.section { padding: 72px 0; overflow-x: clip; }
.section-alt { background: var(--panel); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.section h2 { margin-bottom: 40px; }

/* Steps */
.steps { display: grid; gap: 56px; }
.step { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.step p:not(.step-num) { color: var(--ink-dim); }
.step .phone { margin-top: 20px; }
.step-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #0a0a0a; background: var(--sn, var(--glow-teal)); }
.step--emerald .step-num { --sn: var(--glow-emerald); }
.step--amber .step-num { --sn: var(--glow-amber); }

/* Split (daylight) */
.split { display: grid; gap: 40px; align-items: center; }
.split .phone { justify-self: center; }
.split-copy { display: grid; gap: 16px; }
.split-copy h2 { margin-bottom: 0; }
.split-copy p { color: var(--ink-dim); }

/* Features */
.features { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.feature-icon {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 14px;
  color: var(--fi, var(--teal)); background: color-mix(in srgb, var(--fi, var(--teal)) 16%, transparent);
}
.feature-icon svg { width: 20px; height: 20px; }
.feature-icon--emerald { --fi: var(--emerald); }
.feature-icon--amber { --fi: var(--amber); }
.features li { padding: 24px; background: var(--panel); border: 1px solid var(--hair); border-radius: var(--radius); }
.features p { margin-top: 8px; color: var(--ink-dim); }
.callout { margin-top: 24px; padding: 28px; border-radius: var(--radius); border: 1px solid var(--hair-strong); background: var(--panel-2); }
.callout p { margin-top: 8px; color: var(--ink-dim); max-width: 46em; }

/* FAQ */
.section-alt .narrow h2 { margin-bottom: 24px; }
details { border-top: 1px solid var(--hair-strong); padding: 4px 0; }
details:last-of-type { border-bottom: 1px solid var(--hair-strong); }
summary { cursor: pointer; list-style: none; padding: 16px 32px 16px 0; font-weight: 600; position: relative; min-height: 48px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; position: absolute; right: 4px; top: 12px; font-size: 1.5rem; font-weight: 400; color: var(--teal); }
details[open] summary::after { content: '\2212'; }
details p { padding: 0 0 18px; color: var(--ink-dim); max-width: 40em; }

/* 404 */
.notfound-logo { margin: 0 auto 32px; }
.notfound-lede { margin: 16px auto 32px; }

/* Access */
.access .lede { margin: 16px auto 32px; }
.access .lede a, .footer a { color: var(--teal); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
.access .lede a:hover, .footer a:hover { color: var(--teal-dim); }

/* Footer */
.footer { border-top: 1px solid var(--hair); padding: 32px 0 48px; color: var(--ink-dim); font-size: 0.875rem; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* Wider screens */
@media (min-width: 880px) {
  .hero { grid-template-columns: 1.1fr 0.9fr; padding-top: 72px; padding-bottom: 96px; gap: 64px; }
  .hero-shot .phone { max-width: 320px; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  .split { grid-template-columns: 340px 1fr; gap: 72px; }
  .features { grid-template-columns: repeat(3, 1fr); }
  .section { padding: 96px 0; }
}
@media (min-width: 560px) and (max-width: 879px) {
  .features { grid-template-columns: repeat(2, 1fr); }
}

/* Beta tester guide (/start) — Oct 2026. Same look as the home page; a few pieces it needs that the home page doesn't. */
.guide-hero { padding-bottom: 56px; position: relative; isolation: isolate; }
/* The same soft lighting as the home page's phones: a teal wash behind the welcome, kept faint. */
.guide-hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%;
  top: -160px; right: -140px; width: 520px; height: 520px;
  background: radial-gradient(closest-side, var(--glow-teal), transparent 70%); filter: blur(70px); opacity: 0.32;
}
.guide-hero h1 { font-size: clamp(2rem, 5.5vw, 3rem); }
.guide-hero .lede { margin-top: 20px; }
.guide h2 { margin-bottom: 24px; }
.guide .section h3 { margin-bottom: 8px; }
.guide-intro { margin-bottom: 56px; }
.guide-intro h2 { margin-bottom: 0; }
@media (max-width: 879px) { .guide-intro .split-copy { order: -1; } }
.note { padding: 24px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--amber) 55%, transparent); background: color-mix(in srgb, var(--amber) 8%, var(--panel-2)); }
.note p + p { margin-top: 12px; }
.note p, .guide-block p, .platform p, .guide-list { color: var(--ink-dim); }
.note strong, .guide-list strong, .platform strong, .step strong { color: var(--ink); font-weight: 600; }
.guide-example { padding: 10px 14px; border-left: 3px solid var(--amber); background: var(--stage); border-radius: 6px; color: var(--ink) !important; font-style: italic; }
.guide-block { margin-top: 32px; }
.guide-list { margin: 0; padding-left: 1.25em; display: grid; gap: 10px; }
.guide-numbered { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 14px; counter-reset: gn; color: var(--ink-dim); }
.guide-numbered li { counter-increment: gn; position: relative; padding-left: 42px; min-height: 28px; padding-top: 1px; }
.guide-numbered li::before {
  content: counter(gn); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 0.875rem; color: #0a0a0a; background: var(--glow-teal);
}
.guide-numbered li:nth-child(2)::before { background: var(--glow-emerald); }
.guide-numbered li:nth-child(3)::before { background: var(--glow-amber); }
.guide-numbered strong { color: var(--ink); font-weight: 600; }
.guide-codes { margin-top: 12px; }
.guide-codes h3 { font-size: 1rem; }
/* Icons sit beside their titles here (Justin, 2026-10-20: less scrolling, and the icon reads as the title's label). */
.icon-title { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.icon-title .feature-icon { width: 34px; height: 34px; margin: 0; flex-shrink: 0; }
.icon-title .feature-icon svg { width: 18px; height: 18px; }
.guide .section .icon-title h3 { margin: 0; }
.platforms { display: grid; gap: 12px; margin-bottom: 20px; }
.platform { padding: 20px; background: var(--panel); border: 1px solid var(--hair); border-radius: var(--radius); }
.guide details summary { font-weight: 600; }
@media (min-width: 560px) { .platforms, .guide-codes { grid-template-columns: 1fr 1fr; } }

/* Print — a light, box-insert version of the guide. */
@media print {
  .guide { background: #fff; color: #111; font-size: 11pt; }
  .guide .topbar { position: static; background: none; border-bottom: 1px solid #ccc; backdrop-filter: none; }
  .guide .skip, .guide .phone, .guide .btn, .guide .feature-icon, .guide-hero::before { display: none; }
  .guide .grad-word { color: #111; background: none; }
  .guide .guide-codes li { background: none; border: 1px solid #999; }
  .guide .guide-numbered li::before { background: none; border: 1px solid #111; color: #111; }
  .guide .section, .guide .section-alt { padding: 18px 0; background: none; border: 0; }
  .guide .lede, .guide .fine, .guide .note p, .guide .guide-list, .guide .platform p, .guide .split-copy p, .guide .step p:not(.step-num), .guide details p { color: #333; }
  .guide .note, .guide .platform { background: none; border: 1px solid #999; }
  .guide .guide-example { background: #f3f3f3; color: #111 !important; }
  .guide .eyebrow { color: #555; }
  .guide summary::after { display: none; }
  .guide h2, .guide h3 { break-after: avoid; }
  .guide strong { color: #111 !important; }
  .guide details { break-inside: avoid; }
  .guide details::details-content { content-visibility: visible; display: block; }
  .guide .steps { gap: 16px; }
  .guide .step-num { border: 1px solid #111; background: none; color: #111; }
  .guide .footer { color: #555; }
}