/* =========================================================
   styles.css — shared styles for the full
   Candidate B "Product Showcase" mockup site.
   Every page links to this single file.
   ========================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #000; }
body { font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }

/* ---------- Theme wrappers ---------- */
.theme { padding: 64px 48px; min-height: 100vh; }
.theme-dark  { --bg:#000000; --surface:#0B0B0B; --surface2:#141414; --border:#1F1F1F; --text:#FFFFFF; --text2:#777777; --text3:#444444; --accent:#FF2D2D; background:#000000; color:#FFFFFF; }
.theme-light { --bg:#F7F7F7; --surface:#FFFFFF; --surface2:#F0F0F0; --border:#E0E0E0; --text:#111111; --text2:#666666; --text3:#AAAAAA; --accent:#E80000; background:#F7F7F7; color:#111111; }

.mode-tag { font-family:'Space Mono', monospace; font-weight:700; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text2); padding:8px 12px; border:1px solid var(--border); display:inline-block; margin-bottom:24px; border-radius:4px; }

.wrap { max-width: 1200px; margin: 0 auto; }

/* ---------- Nav ---------- */
.nav { display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--border); gap:24px; flex-wrap:wrap; }
.brand { font-family:'Space Mono', monospace; font-weight:700; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text); text-decoration:none; }
.nav-left { display:flex; align-items:center; gap:32px; flex-wrap:wrap; }
.nav-items { display:flex; gap:24px; }
.nav-items a { font-family:'Space Mono', monospace; font-weight:700; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text2); text-decoration:none; }
.nav-items a:hover, .nav-items a.active { color:var(--text); }
.nav-items a.active { color:var(--accent); }
.nav-cta { font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:0.08em; color:#FFF; background:var(--accent); padding:10px 16px; border-radius:4px; text-decoration:none; }
.nav-right { display:flex; align-items:center; gap:20px; }
.nav-login { font-family:'Space Mono', monospace; font-weight:700; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text2); text-decoration:none; }
.nav-login:hover { color:var(--text); }
.nav-theme { font-family:'Space Mono', monospace; font-weight:700; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text2); background:transparent; border:1px solid var(--border); padding:7px 11px; border-radius:4px; cursor:pointer; }
.nav-theme:hover { color:var(--text); border-color:var(--text2); }

/* Theme-toggle: show one .theme section at a time, hide the side-by-side artifacts */
body[data-theme="dark"] .theme-light { display:none; }
body[data-theme="light"] .theme-dark { display:none; }
.mode-tag, hr.mode-sep, div.mode-sep { display:none; }

/* ---------- Meet Dani block (home hero) ---------- */
.meet-dani { padding: 80px 0 80px; display:grid; grid-template-columns: 360px 1fr; gap:64px; align-items:center; border-bottom:1px solid var(--border); }
.md-portrait { aspect-ratio:1/1; background:var(--surface); border:1px solid var(--border); border-radius:4px; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.md-corner { position:absolute; top:12px; left:12px; font-family:'Space Mono', monospace; font-weight:700; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text3); }
.md-glyph { font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:240px; color:var(--text); line-height:1; letter-spacing:-0.02em; }
.md-tag { font-family:'Space Mono', monospace; font-weight:700; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin-bottom:20px; display:inline-flex; align-items:center; gap:8px; }
.md-tag::before { content:''; width:8px; height:8px; background:var(--accent); border-radius:4px; }
.md-hi { font-size:88px; line-height:0.96; font-weight:600; letter-spacing:-0.02em; color:var(--text); margin-bottom:24px; }
.md-pitch { font-size:22px; line-height:1.55; color:var(--text2); max-width:560px; margin-bottom:36px; font-weight:500; }
.md-pitch strong { color:var(--text); font-weight:600; }

/* ---------- Dani badge (internal pages, compact) ---------- */
.dani-badge { display:flex; align-items:center; gap:16px; padding:16px; border:1px solid var(--border); border-radius:4px; background:var(--surface); margin:24px 0 48px; }
.db-avatar { width:56px; height:56px; border:1px solid var(--border); border-radius:4px; display:flex; align-items:center; justify-content:center; background:var(--surface2); font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:32px; color:var(--text); line-height:1; flex-shrink:0; }
.db-text { flex:1; }
.db-tag { font-family:'Space Mono', monospace; font-weight:700; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin-bottom:4px; display:inline-flex; align-items:center; gap:6px; }
.db-tag::before { content:''; width:6px; height:6px; background:var(--accent); border-radius:50%; }
.db-line { font-size:16px; color:var(--text); font-weight:500; }
.db-line em { color:var(--text2); font-style:normal; }

/* ---------- Page headers (internal pages) ---------- */
.page-head { padding: 80px 0 64px; border-bottom:1px solid var(--border); }
.page-label { font-family:'Space Mono', monospace; font-weight:700; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
.page-title { font-size: 80px; line-height: 0.96; font-weight:600; letter-spacing:-0.025em; color:var(--text); margin-bottom: 24px; }
.page-sub { font-size: 22px; line-height:1.5; color:var(--text2); max-width:720px; font-weight:500; }

/* ---------- Home hero (value-prop band under Meet dani) ---------- */
.hero { padding: 140px 0 120px; max-width: 920px; }
.hero h1 { font-size: 104px; line-height: 0.94; font-weight:600; letter-spacing:-0.025em; color:var(--text); margin-bottom: 40px; }
.hero-sub { font-size:22px; line-height:1.5; color:var(--text2); max-width:620px; margin-bottom:48px; font-weight:500; }
.cta-row { display:flex; gap:12px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:8px; font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:0.06em; padding:14px 20px; border-radius:4px; border:1px solid transparent; text-decoration:none; cursor:pointer; }
.btn-primary { background:var(--accent); color:#FFFFFF; border-color:var(--accent); }
.btn-secondary { background:transparent; color:var(--text); border-color:var(--border); }
.btn-secondary:hover { border-color:var(--text); }
.btn-lg { padding:18px 28px; font-size:15px; }

/* ---------- Feature bands (home + product) ---------- */
.feature { padding: 120px 0; border-top:1px solid var(--border); display:grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: center; }
.feature.reverse { grid-template-columns: 1fr 1.05fr; }
.feature.reverse .f-copy { order:2; }
.feature.reverse .f-shot { order:1; }
.f-number { font-family:'Space Mono', monospace; font-weight:700; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); margin-bottom:24px; }
.f-title { font-size:56px; line-height:1.02; font-weight:600; letter-spacing:-0.02em; color:var(--text); margin-bottom:24px; }
.f-body { font-size:19px; line-height:1.55; color:var(--text2); margin-bottom:32px; font-weight:500; }
.f-meta { font-family:'Space Mono', monospace; font-weight:700; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text2); border-top:1px solid var(--border); padding-top:16px; }
.f-meta div { padding:6px 0; }
.f-meta strong { color:var(--text); }

.shot { background:var(--surface); border:1px solid var(--border); border-radius:4px; aspect-ratio:4/3; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.shot.phone { aspect-ratio:390/844; max-width:380px; margin: 0 auto; }
.shot-label { font-family:'Space Mono', monospace; font-weight:700; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text3); }
.shot-corner { position:absolute; top:12px; left:12px; font-family:'Space Mono', monospace; font-weight:700; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text3); }
.shot-grid { position:absolute; inset:0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 32px 32px; opacity:0.4; }

/* ---------- Extras grid (home) ---------- */
.extras { padding: 96px 0; border-top:1px solid var(--border); }
.extras-label { font-family:'Space Mono', monospace; font-weight:700; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text2); margin-bottom:24px; }
.extras-lede { font-size:28px; line-height:1.25; color:var(--text); font-weight:500; max-width:760px; margin-bottom:48px; }
.extras-lede em { color:var(--text2); font-style:normal; }
.extras-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; }
.extra-card { padding:24px; border:1px solid var(--border); border-radius:4px; background:var(--surface); }
.extra-label { font-family:'Space Mono', monospace; font-weight:700; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.extra-title { font-size:18px; font-weight:600; color:var(--text); margin-bottom:8px; }
.extra-body { font-size:15px; line-height:1.5; color:var(--text2); }

/* ---------- Difference band (home) ---------- */
.diff-band { padding: 96px 0; border-top:1px solid var(--border); }
.diff-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; margin-top:32px; }
.diff-item { padding:32px; border:1px solid var(--border); border-radius:4px; }
.diff-num { font-family:'Space Mono', monospace; font-weight:700; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
.diff-title { font-size:22px; line-height:1.25; font-weight:600; color:var(--text); margin-bottom:12px; }
.diff-body { font-size:16px; line-height:1.55; color:var(--text2); }

/* ---------- Platforms strip ---------- */
.platforms { padding: 80px 0; border-top:1px solid var(--border); text-align:center; }
.platforms-label { font-family:'Space Mono', monospace; font-weight:700; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text2); margin-bottom:24px; }
.platforms-list { font-family:'Space Mono', monospace; font-weight:700; font-size:20px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text); }

/* ---------- Generic section ---------- */
.section { padding: 96px 0; border-top:1px solid var(--border); }
.section-label { font-family:'Space Mono', monospace; font-weight:700; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text2); margin-bottom:40px; }

/* ---------- Pricing cards ---------- */
.pricing { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
.price-card { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:32px; }
.price-card.plus { border:2px solid var(--accent); }
.price-tier { font-family:'Space Mono', monospace; font-weight:700; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--text2); margin-bottom:12px; }
.price-amount { font-family:'Space Mono', monospace; font-weight:700; font-size:36px; color:var(--text); margin-bottom:12px; }
.price-amount .unit { font-size:13px; color:var(--text2); margin-left:4px; }
.price-desc { font-size:16px; color:var(--text2); line-height:1.5; margin-bottom:24px; min-height:48px; }
.price-list { list-style:none; margin-bottom:24px; }
.price-list li { font-size:12px; color:var(--text); padding:8px 0; border-bottom:1px solid var(--border); font-family:'Space Mono', monospace; font-weight:700; letter-spacing:0.06em; }
.price-list li:last-child { border-bottom:none; }

/* ---------- Pricing table (pricing page) ---------- */
.price-table { width:100%; border-collapse:collapse; font-family:'Space Mono', monospace; font-weight:700; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; }
.price-table th, .price-table td { text-align:left; padding:16px 20px; border:1px solid var(--border); }
.price-table th { color:var(--text2); font-size:10px; letter-spacing:0.12em; background:var(--surface); }
.price-table th.col-plus { color:var(--accent); }
.price-table td.val-none { color:var(--text3); }
.price-table td strong { color:var(--text); font-weight:700; }
.price-table td .dot-incl { color:var(--accent); }
.price-table td .val-none { color:var(--text3); }

/* Compare table — category rows separate groups visually */
.compare-table tr.cat-row td { background:var(--surface); padding:20px; border-left:1px solid var(--border); border-right:1px solid var(--border); }
.compare-table tr.cat-row .cat-label { font-family:'Space Mono', monospace; font-weight:700; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); }

/* Roles / capabilities table (used inside FAQ answers) */
.roles-table { width:100%; border-collapse:collapse; margin:20px 0 8px; font-family:'Space Mono', monospace; font-weight:700; font-size:11px; letter-spacing:0.06em; }
.roles-table th, .roles-table td { padding:10px 12px; border:1px solid var(--border); text-align:left; text-transform:uppercase; }
.roles-table th { color:var(--text2); font-size:9px; letter-spacing:0.12em; background:var(--surface); }
.roles-table th.role-owner, .roles-table th.role-admin { color:var(--accent); }
.roles-table td.label { color:var(--text); text-align:left; }
.roles-table td.yes { color:var(--accent); text-align:center; font-size:14px; }
.roles-table td.no { color:var(--text3); text-align:center; }
.roles-table td.paid { color:var(--accent); text-align:center; }
.roles-table td.free { color:var(--text); text-align:center; }

.faq-row.wide-row { align-items:start; }
.faq-row.wide-row .faq-a { grid-column: 2 / -1; }

/* ---------- FAQ block (used on FAQ + pricing + about) ---------- */
.faq-group { margin-bottom:48px; }
.faq-group-label { font-family:'Space Mono', monospace; font-weight:700; font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; padding-bottom:8px; border-bottom:1px solid var(--border); }
.faq-row { display:grid; grid-template-columns: 24px 1.3fr 2.5fr; gap:16px; padding:20px 0; border-bottom:1px solid var(--border); align-items:baseline; }
.faq-row:last-child { border-bottom:none; }
.faq-bullet { width:10px; height:10px; background:var(--accent); display:inline-block; margin-top:6px; }
.faq-q { font-family:'Space Mono', monospace; font-weight:700; font-size:15px; letter-spacing:0.06em; text-transform:uppercase; color:var(--text); }
.faq-a { font-size:16px; line-height:1.55; color:var(--text2); }

/* ---------- Policy / Terms — long-form text ---------- */
.policy { max-width: 760px; padding:48px 0; }
.policy h2 { font-size:28px; font-weight:600; letter-spacing:-0.01em; color:var(--text); margin:48px 0 16px; }
.policy h2:first-child { margin-top:0; }
.policy p { font-size:17px; line-height:1.65; color:var(--text2); margin-bottom:16px; }
.policy p strong { color:var(--text); font-weight:600; }
.policy ul { margin: 8px 0 16px 20px; }
.policy li { font-size:17px; line-height:1.65; color:var(--text2); margin-bottom:6px; }
.policy .updated { font-family:'Space Mono', monospace; font-weight:700; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); margin-bottom:32px; }

/* ---------- Principles grid (about) ---------- */
.principles { display:grid; grid-template-columns: repeat(2, 1fr); gap:8px; margin-top:32px; }
.principle { padding:32px; border:1px solid var(--border); border-radius:4px; background:var(--surface); }
.p-num { font-family:'Space Mono', monospace; font-weight:700; font-size:11px; letter-spacing:0.08em; color:var(--accent); margin-bottom:16px; }
.p-title { font-size:24px; line-height:1.2; font-weight:600; color:var(--text); margin-bottom:12px; letter-spacing:-0.01em; }
.p-body { font-size:16px; line-height:1.55; color:var(--text2); }

/* ---------- Download platform grid ---------- */
.plat-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; margin-top:32px; }
.plat-card { padding:28px; border:1px solid var(--border); border-radius:4px; background:var(--surface); display:flex; flex-direction:column; }
.plat-label { font-family:'Space Mono', monospace; font-weight:700; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent); margin-bottom:16px; }
.plat-name { font-size:28px; font-weight:600; color:var(--text); margin-bottom:8px; letter-spacing:-0.015em; }
.plat-desc { font-size:15px; line-height:1.55; color:var(--text2); margin-bottom:24px; flex:1; }
.plat-meta { font-family:'Space Mono', monospace; font-weight:700; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text2); padding-top:16px; border-top:1px solid var(--border); margin-bottom:16px; }
.plat-meta div { padding:3px 0; }
.plat-meta strong { color:var(--text); }

/* ---------- Closer / CTA band ---------- */
.closer { padding: 120px 0 48px; text-align:center; }
.closer h2 { font-size:72px; line-height:1; font-weight:600; letter-spacing:-0.025em; color:var(--text); margin-bottom:24px; }
.closer p { font-size:20px; color:var(--text2); max-width:560px; margin:0 auto 40px; }
.closer .cta-row { justify-content:center; }
.closer-footer { font-family:'Space Mono', monospace; font-weight:700; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text2); margin-top:80px; padding-top:16px; border-top:1px solid var(--border); display:flex; justify-content:space-between; }

/* ---------- Small closer (internal pages) ---------- */
.page-closer { padding: 96px 0 48px; text-align:center; border-top:1px solid var(--border); }
.page-closer h3 { font-size:40px; font-weight:600; letter-spacing:-0.02em; color:var(--text); margin-bottom:16px; line-height:1.1; }
.page-closer p { font-size:18px; color:var(--text2); max-width:520px; margin:0 auto 32px; }
.page-closer .cta-row { justify-content:center; }

/* ---------- Footer (every page) ---------- */
.page-footer { padding:32px 0; margin-top:48px; border-top:1px solid var(--border); display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; font-family:'Space Mono', monospace; font-weight:700; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text2); }
.page-footer a { color:var(--text2); text-decoration:none; margin-left:16px; }
.page-footer a:hover { color:var(--text); }
.page-footer .foot-right { display:flex; gap:0; }

/* ---------- Mode separator ---------- */
.mode-sep { height:64px; background:#333; display:flex; align-items:center; justify-content:center; font-family:'Space Mono', monospace; font-weight:700; font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:#AAA; border:none; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .meet-dani { grid-template-columns: 1fr; gap:32px; padding: 40px 0; }
  .md-portrait { max-width:280px; }
  .md-glyph { font-size:160px; }
  .md-hi { font-size:48px; }
  .md-pitch { font-size:18px; }
  .hero h1 { font-size: 56px; }
  .page-title { font-size: 48px; }
  .f-title { font-size: 36px; }
  .closer h2 { font-size: 40px; }
  .feature, .feature.reverse { grid-template-columns: 1fr; gap: 32px; }
  .feature.reverse .f-copy { order:1; }
  .feature.reverse .f-shot { order:2; }
  .pricing, .extras-grid, .diff-grid, .principles, .plat-grid { grid-template-columns: 1fr; }
  .price-table { font-size:10px; }
  .price-table th, .price-table td { padding:10px 12px; }
  .faq-row { grid-template-columns: 24px 1fr; }
  .faq-a { grid-column: 2 / span 1; padding-left:0; }
  .theme { padding: 32px 20px; }
  .extras-lede { font-size:22px; }
}