/* ==========================================================================
   AppyJax site v2 — shared styles for all pages
   Every measurement derives from assets/tokens.css (spacing --s*, type --t-*,
   radii, grid). Spec: dispatch/prompts/appyjax/05-company-site-v2.md
   ========================================================================== */

/* ---- Base ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); }
::selection { background: rgba(234, 88, 12, 0.22); }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
section { scroll-margin-top: var(--s6); }

.container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---- 12-column grid ---- */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
}
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-12 { grid-column: span 12; }

/* ---- Type ---- */
h1 {
  font-size: var(--t-3xl);
  line-height: var(--lh-head);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
h2 {
  font-size: var(--t-2xl);
  line-height: var(--lh-head);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
h3 {
  font-size: var(--t-lg);
  line-height: var(--lh-sub);
  font-weight: 600;
  color: var(--ink);
}
.on-dark h1, .on-dark h2 { color: #FFFFFF; }

.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cta);
  margin-bottom: var(--s2);
}
.on-dark .eyebrow { color: var(--eyebrow); }

.section-sub {
  margin-top: var(--s2);
  font-size: var(--t-lg);
  line-height: var(--lh-sub);
  color: var(--muted);
  max-width: var(--measure);
}
.center { text-align: center; }
.center .section-sub { margin-left: auto; margin-right: auto; }

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  border-radius: var(--radius-btn);
  padding: var(--s2) var(--s4);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  font-weight: 600;
  line-height: var(--lh-sub);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--cta); color: #FFFFFF; }
.btn-primary:hover { background: var(--cta-hover); }
.btn-outline-light { border-color: rgba(255, 255, 255, 0.45); color: #FFFFFF; }
.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.75);
}
.btn-sm { padding: var(--s1) var(--s2); font-size: var(--t-sm); }
.text-link {
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
}
.text-link:hover { text-decoration: underline; }

/* ---- Nav ---- */
.nav { background: var(--charcoal); position: sticky; top: 0; z-index: 50; }
.nav-inner {
  min-height: var(--s6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  flex-wrap: wrap;
  padding-top: var(--s1);
  padding-bottom: var(--s1);
}
.lockup { display: inline-flex; align-items: center; gap: var(--s1); text-decoration: none; }
.wordmark {
  font-size: var(--t-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}
.nav-links { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.nav-links > a:not(.btn) {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  font-size: var(--t-sm);
  font-weight: 600;
}
.nav-links > a:not(.btn):hover { color: #FFFFFF; }
.nav-links > a.active {
  color: #FFFFFF;
  text-decoration: underline;
  text-decoration-color: var(--brand-orange);
  text-decoration-thickness: 2px;
  text-underline-offset: var(--s1);
}

/* ---- Sections ---- */
.section { padding: var(--s7) 0; }
.section-white { background: var(--card); }
.section-alt { background: var(--bg-alt); }
.section-dark { background: var(--charcoal); }
.head-gap { margin-bottom: var(--s4); }

/* ---- Hero (charcoal, 7/5 golden split) ---- */
.hero { background: var(--charcoal); }
.hero-grid {
  align-items: center;
  padding-top: var(--s6);
  padding-bottom: var(--s7);
}
.hero-sub {
  margin-top: var(--s3);
  font-size: var(--t-lg);
  line-height: var(--lh-sub);
  color: var(--charcoal-sub);
  max-width: var(--measure);
}
.hero-note {
  margin-top: var(--s2);
  font-size: var(--t-sm);
  color: var(--charcoal-sub);
  opacity: 0.82;
  max-width: var(--measure);
}
.hero-flagship {
  margin-top: var(--s3);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: var(--lh-sub);
  color: var(--charcoal-sub);
  max-width: var(--measure);
}
.hero-flagship a { color: var(--link-on-dark); }

/* Home hero variant: true golden split (58/42), visual top-aligned to H1 cap */
.home-hero {
  grid-template-columns: 58fr 42fr;
  align-items: start;
  padding-top: var(--s7);
  padding-bottom: var(--s7);
}
.home-hero > .col-7 { grid-column: 1; }
.home-hero > .col-5 { grid-column: 2; padding-top: var(--s5); }
.hero-actions { margin-top: var(--s4); display: flex; gap: var(--s2); flex-wrap: wrap; }
.breadcrumb {
  font-size: var(--t-sm);
  color: var(--charcoal-sub);
  margin-bottom: var(--s2);
}
.breadcrumb strong { color: #FFFFFF; font-weight: 600; }

/* Product shot in browser chrome; may overlap section boundaries */
.hero-shot { transform: translateY(var(--s8)); }
.browser-card {
  background: var(--card);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 var(--s3) var(--s6) rgba(0, 0, 0, 0.4);
}
.browser-top {
  display: flex;
  align-items: center;
  gap: var(--s1);
  padding: var(--s1) var(--s2);
  background: #F1F0ED;
  border-bottom: 1px solid var(--border);
}
.browser-dot { width: 8px; height: 8px; border-radius: 50%; background: #D8D5CF; }
.browser-title {
  margin-left: var(--s1);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-chip);
  padding: 0 var(--s2);
  font-size: var(--t-sm);
  color: var(--muted);
}
/* clearance below an overlapping hero shot: overlap + one section pad */
.section.after-hero, .stats.after-hero { padding-top: calc(var(--s8) + var(--s5)); }
.v-center { align-items: center; }

/* ---- Cards ---- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: 0 2px var(--s1) rgba(27, 31, 35, 0.05);
  padding: var(--s4);
}
.icon-chip {
  width: var(--s5);
  height: var(--s5);
  border-radius: var(--radius-btn);
  background: rgba(194, 65, 12, 0.12);
  color: var(--cta);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--s3);
}
.card h3 { margin-bottom: var(--s1); }
.card p { font-size: var(--t-base); }

/* ---- Products: large horizontal card ---- */
.product-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: 0 2px var(--s1) rgba(27, 31, 35, 0.05);
  padding: var(--s4);
  align-items: center;
}
.check-list { list-style: none; margin-top: var(--s3); }
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s1);
  margin-bottom: var(--s1);
  font-size: var(--t-base);
}
.check-list svg { flex: none; color: var(--cta); margin-top: 2px; }
.product-actions {
  margin-top: var(--s3);
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}
.roadmap { margin-top: var(--s4); }
.chip-row { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s2); }
.chip {
  display: inline-block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-chip);
  padding: var(--s1) var(--s2);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--body);
}

/* ---- Why columns ---- */
.why-col .icon-chip { margin-bottom: var(--s2); }
.why-col h3 { margin-bottom: var(--s1); }

/* ---- Stat strip ---- */
.stats { padding-bottom: var(--s6); }
.stat { text-align: center; padding: var(--s1) var(--s3); }
.stat + .stat { border-left: 1px solid var(--border); }
.stat-value {
  font-family: var(--font-mono);
  font-size: var(--t-2xl);
  line-height: var(--lh-head);
  letter-spacing: -0.02em;
  color: var(--cta);
}
.stat-label {
  margin-top: var(--s1);
  font-size: var(--t-sm);
  color: var(--muted);
  max-width: 28ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---- Editorial ---- */
.editorial { max-width: var(--measure); margin: 0 auto; }
.editorial h2 { margin-bottom: var(--s3); }
.editorial p { margin-top: var(--s2); font-size: var(--t-base); }
.editorial strong { font-weight: 600; color: var(--ink); }

/* ---- Steps (01/02/03) ---- */
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--s4);
  padding: 0 var(--s2);
  border-radius: var(--radius-btn);
  background: rgba(194, 65, 12, 0.12);
  color: var(--cta);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.08em;
  margin-bottom: var(--s3);
}

/* ---- Accordion ---- */
.accordion { margin-top: var(--s4); display: grid; gap: var(--s2); }
.accordion details {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: 0 2px var(--s1) rgba(27, 31, 35, 0.04);
}
.accordion summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  font-size: var(--t-base);
  font-weight: 600;
  color: var(--ink);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: var(--t-lg);
  color: var(--cta);
  flex: none;
}
.accordion details[open] summary::after { content: "\2013"; }
.accordion details p { padding: 0 var(--s3) var(--s3); font-size: var(--t-base); }

.feature-shot {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: 0 var(--s2) var(--s5) rgba(27, 31, 35, 0.12);
  overflow: hidden;
}
.feature-shot .crop { aspect-ratio: 4 / 3.4; }
.feature-shot img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }

/* ---- Icon list (demo page) ---- */
.icon-list { list-style: none; margin-top: var(--s4); }
.icon-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  margin-bottom: var(--s3);
  font-size: var(--t-base);
}
.icon-list .icon-chip { width: var(--s5); height: var(--s5); flex: none; margin: 0; }

/* ---- Launch block ---- */
.launch { text-align: center; }
.btn-launch { font-size: var(--t-lg); padding: var(--s3) var(--s5); }
.launch-caption { margin-top: var(--s2); font-size: var(--t-sm); color: var(--muted); }

/* ---- Charcoal inset cards (CTA band + conversion line) ---- */
.cta-card {
  background: var(--charcoal);
  border-radius: var(--radius-card);
  padding: var(--s6) var(--s5);
  text-align: center;
}
.cta-card h2 { color: #FFFFFF; }
.cta-card p {
  margin-top: var(--s2);
  color: var(--charcoal-sub);
  font-size: var(--t-lg);
  line-height: var(--lh-sub);
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}
.cta-actions {
  margin-top: var(--s4);
  display: flex;
  justify-content: center;
  gap: var(--s2);
  flex-wrap: wrap;
}
.convert-card {
  background: var(--charcoal);
  border-radius: var(--radius-card);
  padding: var(--s4) var(--s5);
  color: var(--charcoal-sub);
  font-size: var(--t-lg);
  line-height: var(--lh-sub);
  text-align: center;
}
.convert-card strong { color: #FFFFFF; }
.convert-card a {
  color: var(--eyebrow);
  font-weight: 600;
  text-decoration: none;
}
.convert-card a:hover { text-decoration: underline; }

/* ---- Two-tone statement ---- */
.statement {
  font-size: var(--t-lg);
  line-height: var(--lh-sub);
  letter-spacing: -0.01em;
  max-width: var(--measure);
  margin: 0 auto;
  text-align: center;
}
.statement strong { color: var(--ink); font-weight: 700; }
.statement span { color: var(--muted); }

/* ---- Placeholder (photo-class slots) ---- */
.placeholder-block { border-radius: var(--radius-card); overflow: hidden; }
.placeholder-block svg { display: block; width: 100%; height: auto; }

/* Screenshot-slot placeholder: fixed 16:10 so the real asset (1600x1000)
   drops in with zero layout shift */
.img-placeholder {
  aspect-ratio: 16 / 10;
  background:
    repeating-linear-gradient(45deg,
      rgba(194, 65, 12, 0.28) 0,
      rgba(194, 65, 12, 0.28) 2px,
      transparent 2px,
      transparent 14px),
    var(--charcoal);
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-placeholder span {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--eyebrow);
  text-align: center;
  padding: 0 var(--s2);
}

/* ---- Contact card ---- */
.contact-card {
  max-width: var(--measure);
  margin: 0 auto;
  text-align: center;
}
.contact-card .btn { margin-top: var(--s3); }
.contact-email {
  margin-top: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--t-sm);
}
.contact-email a { color: var(--link); text-decoration: none; }
.contact-email a:hover { text-decoration: underline; }

/* ---- Footer ---- */
.footer {
  background: var(--charcoal);
  margin-top: var(--s7);
  padding: var(--s6) 0 var(--s4);
  color: var(--charcoal-sub);
}
.footer-tagline { margin-top: var(--s2); font-size: var(--t-sm); max-width: 30ch; }
.footer h4 {
  font-size: var(--t-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #FFFFFF;
  margin-bottom: var(--s2);
}
.footer ul { list-style: none; }
.footer li { margin-bottom: var(--s1); }
.footer a { color: var(--charcoal-sub); text-decoration: none; font-size: var(--t-sm); }
.footer a:hover { color: #FFFFFF; }
.footer-bottom {
  margin-top: var(--s5);
  padding-top: var(--s3);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--t-sm);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .hero-grid .col-7, .hero-grid .col-5,
  .demo-grid .col-7, .demo-grid .col-5,
  .product-card .col-7, .product-card .col-5,
  .features-grid .col-7, .features-grid .col-5,
  .why-grid .col-4,
  #how-it-works .col-4 { grid-column: 1 / -1; }
  .hero-shot { transform: none; }
  .hero-grid { padding-bottom: var(--s5); }
  .home-hero { grid-template-columns: 1fr; padding-bottom: var(--s5); }
  .home-hero > .col-5 { padding-top: 0; }
  .section.after-hero, .stats.after-hero { padding-top: var(--s7); }
}

@media (max-width: 600px) {
  h1 { font-size: var(--t-2xl); }
  h2 { font-size: var(--t-xl); }
  .section { padding: var(--s5) 0; }
  .grid-12 > [class^="col-"] { grid-column: 1 / -1; }
  .stat + .stat { border-left: 0; }
  .cta-card { padding: var(--s5) var(--s3); }
  .btn-launch { font-size: var(--t-base); padding: var(--s2) var(--s4); }
  .footer .grid-12 > [class^="col-"] { grid-column: span 6; }
  .footer .footer-brand { grid-column: span 12; }
}