/* ═══════════════════════════════════════════════════
   SAMRO STUDIOS · landing pages
   One stylesheet for every page emitted by scripts/build-pages.mjs.
   Tokens are copied from src/styles/index.css so a generated page and the
   home page are visibly the same product. The legacy static pages
   (public/terms.html and friends) carry an older, different palette: never
   copy from those.
   Zero em dashes.
   ═══════════════════════════════════════════════════ */

:root {
  --bone: #F5F3EE;
  --bone-card: #FBFAF6;
  --ink: #17181C;
  --secondary: #54565C;
  --muted: #6D6F74;
  --hair: #E3E0D8;
  --hair-soft: #ECE9E1;
  --gold: #A07E33;
  --gold-soft: rgba(160, 126, 51, 0.14);
  --gold-text: #7E601E;
  --cta: #0A6FE8;
  --cta-hover: #0961CC;
  --cta-ink: #0961CC;
  --cta-soft: rgba(10, 111, 232, 0.14);
  --font-body: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --container-max: 1140px;
  --gutter: clamp(20px, 5vw, 56px);
  --radius: 14px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --shadow-card: 0 18px 44px rgba(37, 33, 22, 0.10);
  --shadow-float: 0 24px 60px rgba(37, 33, 22, 0.16);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--cta-ink); }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(56px, 8vw, 96px); }
.section--tight { padding-block: clamp(36px, 5vw, 56px); }
.section--ink { background: var(--ink); color: var(--bone); }
.section--ink a { color: #9CCBFF; }

.section-h {
  font-size: clamp(1.65rem, 3.4vw, 2.4rem);
  line-height: 1.16;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  font-weight: 600;
}

.section-sub {
  margin: 0 0 32px;
  color: var(--muted);
  max-width: 62ch;
  font-size: 1.03rem;
}

.section--ink .section-sub { color: #C9C6BD; }

/* ── Skip link ── */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--bone);
  padding: 10px 16px;
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 200;
}
.skip:focus { left: 0; }

/* ── Nav ── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(245, 243, 238, 0.88);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--hair-soft);
}

.nav-in {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 64px;
}

.logo {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
  flex-shrink: 0;
}
.logo i { font-style: normal; font-weight: 500; color: var(--gold-text); }

.nav-links {
  display: flex;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }

.nav-links a {
  color: var(--secondary);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 500;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current='page'] { color: var(--gold-text); }

.nav-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  background: var(--cta);
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.93rem;
  white-space: nowrap;
  border: 1.5px solid transparent;
}
.nav-cta:hover { background: var(--cta-hover); }
.nav-cta:focus-visible { outline: 2px solid var(--cta-ink); outline-offset: 3px; }

@media (max-width: 720px) {
  .nav-in { flex-wrap: wrap; min-height: 0; padding-block: 12px; gap: 12px; }
  .nav-links { order: 3; width: 100%; flex: none; gap: 18px; }
  .nav-cta { margin-left: auto; }
}

/* ── Hero ── */
.hero { padding-block: clamp(48px, 7vw, 88px) clamp(28px, 4vw, 44px); }

.hero h1 {
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin: 0 0 18px;
  max-width: 19ch;
}

.hero .lede {
  font-size: clamp(1.05rem, 1.9vw, 1.24rem);
  color: var(--secondary);
  max-width: 58ch;
  margin: 0 0 26px;
}

.hero-kicker {
  display: inline-block;
  margin: 0 0 14px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-text);
}

/* ── Prose ── */
.prose { max-width: 68ch; }
.prose h2 {
  font-size: clamp(1.4rem, 2.7vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 40px 0 12px;
  font-weight: 600;
}
.prose h3 { font-size: 1.15rem; margin: 28px 0 8px; font-weight: 600; }
.prose p { margin: 0 0 16px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose strong { font-weight: 600; }

/* ── Price card ── */
.pcard {
  background: var(--bone-card);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: clamp(26px, 4vw, 38px);
  max-width: 460px;
}

.pcard__pill {
  display: inline-block;
  background: var(--gold-soft);
  color: var(--gold-text);
  border-radius: var(--radius-pill);
  padding: 5px 13px;
  font-size: 0.82rem;
  font-weight: 600;
  margin: 0 0 16px;
}

.pcard__price {
  font-size: clamp(2.6rem, 6vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin: 0;
}

.pcard__unit { margin: 6px 0 20px; color: var(--secondary); font-weight: 500; }

.pcard__bullets { list-style: none; margin: 0 0 24px; padding: 0; }

.pcard__bullets li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: 0.98rem;
}

.pcard__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 12px;
  height: 6px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

.pcard__cta {
  display: inline-flex;
  justify-content: center;
  width: 100%;
  padding: 13px 22px;
  border-radius: var(--radius-pill);
  background: var(--cta);
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
}
.pcard__cta:hover { background: var(--cta-hover); }
.pcard__cta:focus-visible { outline: 2px solid var(--cta-ink); outline-offset: 3px; }

.pcard__micro {
  margin: 14px 0 0;
  font-size: 0.86rem;
  color: var(--muted);
  line-height: 1.5;
}

.pcard__terms { margin: 10px 0 0; font-size: 0.86rem; }

.signup-wrap { display: flex; justify-content: flex-start; }

/* ── Demo line: the big "call and try to trip it up" block ── */
.demoline {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.demoline__num {
  display: inline-block;
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.32);
  padding-bottom: 2px;
}
.demoline__num:hover { border-bottom-color: #FFFFFF; }
.demoline__num:focus-visible { outline: 2px solid var(--bone); outline-offset: 4px; }

@media (max-width: 860px) {
  .demoline { grid-template-columns: 1fr; }
}

/* Wide screens only. The 62ch cap on .section-sub left a dead strip between
   the copy and a 320px orb column, so at 1440 the band read as half empty.
   The copy is allowed a longer measure inside the ink band and the orb column
   is centred, which puts the "Talk in the browser" button under the number
   rather than off in the corner. The single-column phone layout is untouched. */
@media (min-width: 861px) {
  .demoline { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
  .demoline > div:first-child { max-width: 76ch; }
  .demoline .section-sub { max-width: 76ch; }
  .demoline .demo-stage { justify-self: center; }
}

/* ── Demo gallery ── */
.demogrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 22px;
}

.democard {
  background: var(--bone-card);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.democard__name { margin: 0; font-weight: 600; font-size: 1.06rem; }
.democard__kind {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-text);
  font-weight: 600;
}
.democard__line { margin: 0; color: var(--secondary); font-size: 0.94rem; }

.demo-num {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 2px solid var(--gold-soft);
}
.demo-num:hover { border-bottom-color: var(--gold); }
.demo-num:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.demo-num small { display: block; font-weight: 500; font-size: 0.78rem; color: var(--muted); border: 0; }

/* ── Orb stage: shared by the demo line and every gallery card ── */
.demo-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
}

.demo-canvas {
  width: 100%;
  max-width: 190px;
  aspect-ratio: 1 / 1;
  display: block;
  transition: transform 0.5s var(--ease-out);
}

.demo-stage--lg .demo-canvas { max-width: 300px; }

.demo-stage[data-state='active'] .demo-canvas,
.demo-stage[data-state='connecting'] .demo-canvas { transform: scale(1.06); }

.demo-start {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: var(--cta);
  color: #FFFFFF;
  border: 1.5px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
}
.demo-start:hover { background: var(--cta-hover); }
.demo-start:focus-visible { outline: 2px solid var(--cta-ink); outline-offset: 3px; }

.demo-stage[data-state='connecting'] .demo-start,
.demo-stage[data-state='active'] .demo-start { display: none; }

.demo-status { margin: 0; font-size: 0.84rem; color: var(--muted); min-height: 1.3em; text-align: center; }
.section--ink .demo-status { color: #C9C6BD; }

.demo-caps { min-height: 2.6em; width: 100%; text-align: center; position: relative; }
.demo-cap {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.35;
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
}
.demo-cap--user { color: var(--muted); }
.section--ink .demo-cap--user { color: #A9A69E; }
.demo-cap--enter { opacity: 0; transform: translateY(10px); }
.demo-cap--out { position: absolute; inset: 0; opacity: 0; transform: translateY(-10px); }

.demo-end {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--hair);
  background: var(--bone-card);
  color: var(--secondary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: none;
}
.section--ink .demo-end { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); color: var(--bone); }
.demo-stage[data-state='active'] .demo-end,
.demo-stage[data-state='connecting'] .demo-end { display: block; }
.demo-end:focus-visible { outline: 2px solid var(--cta-ink); outline-offset: 3px; }

/* ── Before and after ── */
.ba { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 72px); }

.ba-row { margin: 0; }

.ba-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 3.4vw, 44px);
  align-items: start;
}

.ba-frame {
  position: relative;
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bone-card);
  border: 1px solid var(--hair);
  box-shadow: var(--shadow-card);
  transform: translateY(6px) rotate(-0.4deg);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

.ba-frame--after { transform: translateY(-6px) rotate(0.4deg); box-shadow: var(--shadow-float); }

.ba-frame:hover,
.ba-frame:focus-within { transform: translateY(-10px) rotate(0deg); box-shadow: var(--shadow-float); }

/* A 1200x699 before and a 1440x900 after are different shapes, and side by side
   they used to sit at different heights. One aspect ratio on the frame with a
   top-anchored crop lines the pair up: the top of a homepage is what the row is
   about, so cropping the bottom is the right thing to lose. The width and
   height attributes stay on the img for CLS. */
.ba-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
}

.ba-chip {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(23, 24, 28, 0.86);
  color: var(--bone);
  border-radius: var(--radius-pill);
  padding: 5px 13px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ba-frame--after .ba-chip { background: var(--cta); }

.ba-cap {
  margin: 16px 0 0;
  color: var(--secondary);
  font-size: 0.96rem;
  max-width: 70ch;
}

.ba-cap b { color: var(--ink); font-weight: 600; }

@media (max-width: 760px) {
  .ba-pair { grid-template-columns: 1fr; }
  .ba-frame, .ba-frame--after { transform: none; }
}

/* ── How it works ── */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
}

.step { counter-increment: step; }

.step::before {
  content: counter(step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold-text);
  font-weight: 600;
  margin-bottom: 14px;
}

.step h3 { margin: 0 0 6px; font-size: 1.1rem; font-weight: 600; }
.step p { margin: 0; color: var(--secondary); font-size: 0.97rem; }

/* ── Pricing cards ── */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 24px;
  max-width: 840px;
}

.plan {
  background: var(--bone-card);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  padding: 30px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-card);
}

.plan__name { margin: 0 0 4px; font-size: 1.1rem; font-weight: 600; }
.plan__for { margin: 0 0 18px; color: var(--muted); font-size: 0.9rem; }
.plan__price { margin: 0; font-size: 2.2rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.plan__unit { margin: 6px 0 20px; color: var(--secondary); font-size: 0.92rem; }
.plan__bullets { list-style: none; margin: 0 0 24px; padding: 0; }
.plan__bullets li { position: relative; padding-left: 22px; margin-bottom: 9px; font-size: 0.95rem; }
.plan__bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg);
}

.plan__cta {
  margin-top: auto;
  display: inline-flex;
  justify-content: center;
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: 600;
  border: 1.5px solid var(--cta);
  background: var(--bone-card);
  color: var(--cta-ink);
}
.plan__cta:hover { background: var(--cta); color: #FFFFFF; }
.plan__cta--fill { background: var(--cta); color: #FFFFFF; }
.plan__cta--fill:hover { background: var(--cta-hover); }
.plan__cta:focus-visible { outline: 2px solid var(--cta-ink); outline-offset: 3px; }

/* ── FAQ ── */
.faq { max-width: 800px; border-top: 1px solid var(--hair); }

.faq-item { border-bottom: 1px solid var(--hair); }

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 44px 20px 0;
  font-weight: 600;
  font-size: 1.04rem;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 28px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(-135deg); top: 32px; }

.faq-item summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.faq-item .faq-a { padding: 0 0 22px; color: var(--secondary); max-width: 72ch; }
.faq-item .faq-a p { margin: 0 0 12px; }
.faq-item .faq-a p:last-child { margin-bottom: 0; }

/* ── Footer ── */
.foot {
  background: var(--ink);
  color: #C9C6BD;
  padding-block: clamp(44px, 6vw, 72px) 28px;
  font-size: 0.94rem;
}

.foot a { color: #E8E5DE; text-decoration: none; }
.foot a:hover { color: #FFFFFF; text-decoration: underline; }

.foot-h {
  margin: 0 0 16px;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8E8B84;
  font-weight: 600;
}

.foot-products {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-bottom: 34px;
}
.foot-products a { font-weight: 600; font-size: 1.02rem; }

.foot-local { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 30px; }
.foot-local a { font-size: 0.86rem; color: #9C9992; }

.foot-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  font-size: 0.85rem;
  color: #8E8B84;
}

/* ── Motion ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}