/* ShootScheduler marketing site - one shared stylesheet, no build step */
/* Film Counter brand system per BRAND.md (D52). Ink text on photo paper,
   charcoal reserved for the header and footer bands, marigold as the one
   accent (fills and underlines only on light backgrounds, never text). */

:root {
  --ink: #211D18;
  --ink-soft: #4d4335;
  --paper: #FAF5EA;
  --card: #ffffff;
  --kraft: #E9DCC5;
  --line: #DBCDAF;
  --charcoal: #2A2521;
  --charcoal-text: #FAF5EA;
  --charcoal-dim: #CBC0AE;
  --marigold: #E0A21B;
  --marigold-press: #C98E0F;
  --radius: 4px;
  --serif: "IBM Plex Serif", Georgia, serif;
  --sans: "IBM Plex Sans", Arial, sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; }

a {
  color: var(--ink);
  text-decoration-color: var(--marigold);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 3px; }

/* prices, dates, times, and counts read like a receipt */
.num { font-family: var(--mono); }

.skip-link {
  position: absolute;
  left: -999px;
  top: 8px;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 14px;
  border-radius: var(--radius);
  z-index: 50;
}
.skip-link:focus { left: 8px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 780px; margin: 0 auto; padding: 0 24px; }

/* ---------- header (charcoal band) ---------- */

.site-head {
  background: var(--charcoal);
}
.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 12px 28px;
  flex-wrap: wrap;
  padding-top: 16px;
  padding-bottom: 16px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--charcoal-text);
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-right: auto;
  white-space: nowrap;
}
.brand svg { width: 30px; height: 30px; flex: none; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px 20px;
  flex-wrap: wrap;
}
.site-nav a {
  text-decoration: none;
  color: var(--charcoal-dim);
  font-size: 0.97rem;
  font-weight: 500;
  padding: 4px 2px;
}
.site-nav a:hover { color: var(--charcoal-text); }
.site-nav a[aria-current="page"] {
  color: var(--charcoal-text);
  box-shadow: inset 0 -2px 0 var(--marigold);
}
.site-nav .nav-signin { color: var(--charcoal-text); }

.btn {
  display: inline-block;
  background: var(--marigold);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.97rem;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: var(--radius);
  border: 1px solid rgba(33, 29, 24, 0.25);
}
.btn:hover { background: var(--marigold-press); color: var(--ink); }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.site-nav .btn { padding: 8px 16px; font-size: 0.94rem; }
/* .site-nav a outranks .btn; without these the nav button would render
   pale text on marigold, which BRAND.md forbids */
.site-nav a.btn { color: var(--ink); font-weight: 600; }
.site-nav a.btn:hover { color: var(--ink); }

/* ---------- hero (home) - photo paper, ink text ---------- */

.hero {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 88px 0 96px;
}
.hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5.2vw, 3.4rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 22px;
  max-width: 17ch;
  color: var(--ink);
}
.hero .lede {
  font-size: 1.17rem;
  max-width: 56ch;
  color: var(--ink-soft);
  margin: 0 0 34px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.hero-note {
  margin-top: 18px;
  font-size: 0.92rem;
  color: var(--ink-soft);
  max-width: 52ch;
}

/* ---------- interior page hero ---------- */

.page-hero { padding: 64px 0 8px; }
.kicker {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 10px;
}
.page-hero h1, h1.plain {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.4vw, 2.8rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
}
.page-hero .lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 62ch; margin: 0; }

/* ---------- sections ---------- */

section { padding: 56px 0; }
section.tight { padding: 34px 0; }

h2 {
  font-family: var(--serif);
  font-size: clamp(1.55rem, 3vw, 2rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
}
h3 {
  font-family: var(--serif);
  font-size: 1.28rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 8px;
}
p { margin: 0 0 14px; }
.muted { color: var(--ink-soft); }

.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

/* ---------- cards / grids ---------- */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 34px;
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 26px 20px;
}
.card .glyph {
  width: 40px;
  height: 40px;
  margin-bottom: 14px;
  color: var(--ink);
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--ink-soft); font-size: 1rem; margin-bottom: 0; }

.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 44px;
  align-items: center;
}

/* two side-by-side text columns whose kicker, heading, and paragraph all
   sit on the same lines (subgrid keeps the rows shared across columns) */
.split-even {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 44px;
  align-items: start;
}
.split-even > div {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  align-content: start;
}

/* ---------- steps ---------- */

.step {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 26px;
  padding: 34px 0;
  border-top: 1px solid var(--line);
}
.step:first-of-type { border-top: 0; }
.step-num {
  font-family: var(--mono);
  font-size: 3rem;
  font-weight: 600;
  line-height: 0.9;
  color: var(--ink);
}
.step h2 { font-size: 1.5rem; margin-bottom: 10px; }
.step p { color: var(--ink-soft); max-width: 64ch; }
.step p:last-child { margin-bottom: 0; }

/* ---------- pricing ---------- */

.price-cards.single { grid-template-columns: minmax(0, 620px); justify-content: center; }
.price-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 38px;
  align-items: start;
}
.price-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
}
.price-card.featured { border-color: var(--marigold); border-width: 2px; }
.price-card .plan-name {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.price {
  font-family: var(--mono);
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0;
}
.price .per { font-family: var(--sans); font-size: 1rem; font-weight: 400; color: var(--ink-soft); letter-spacing: 0; }
.price-sub { color: var(--ink-soft); font-size: 0.98rem; margin: 8px 0 0; }
.price-card ul {
  list-style: none;
  padding: 0;
  margin: 22px 0 26px;
}
.price-card li {
  padding: 7px 0 7px 30px;
  position: relative;
  font-size: 1rem;
}
.price-card li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 13px;
  width: 16px;
  height: 9px;
  border-left: 2.5px solid var(--ink);
  border-bottom: 2.5px solid var(--ink);
  transform: rotate(-48deg);
}
.price-card .btn { width: 100%; text-align: center; }

/* ---------- FAQ ---------- */

.faq-item { border-top: 1px solid var(--line); padding: 26px 0; }
.faq-item:first-of-type { border-top: 0; }
.faq-item h2 { font-size: 1.3rem; margin-bottom: 8px; }
.faq-item p { color: var(--ink-soft); max-width: 68ch; margin-bottom: 0; }
.faq-item p + p { margin-top: 10px; }

/* ---------- real screenshots and photography ---------- */

.photo {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.photo-caption {
  margin: 14px 0 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
  max-width: 70ch;
}

/* ---------- placeholders for future photography ---------- */

.placeholder {
  border: 2px dashed #c9b98f;
  border-radius: var(--radius);
  background: var(--kraft);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--ink-soft);
  text-align: center;
  padding: 24px;
}

/* ---------- prose pages (about, privacy, contact) ---------- */

.prose { padding: 24px 0 72px; }
.prose h2 { font-size: 1.45rem; margin-top: 36px; }
.prose p { max-width: 68ch; }
.prose ul { max-width: 68ch; }

/* ---------- contact form ---------- */

.contact-form {
  max-width: 560px;
  margin-top: 10px;
}
.contact-form label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  margin: 18px 0 6px;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 11px 12px;
}
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: 2px solid var(--marigold);
  outline-offset: 1px;
  border-color: var(--marigold);
}
.contact-form .btn { margin-top: 22px; border: 1px solid rgba(33, 29, 24, 0.25); cursor: pointer; font-family: var(--sans); }
.form-hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.form-note { font-size: 0.92rem; color: var(--ink-soft); margin-top: 14px; }

/* ---------- CTA band (charcoal panel) ---------- */

.cta-band {
  background: var(--charcoal);
  color: var(--charcoal-dim);
  border-radius: var(--radius);
  padding: 44px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-band h2 { color: var(--charcoal-text); margin: 0 0 6px; font-size: 1.6rem; }
.cta-band p { margin: 0; color: var(--charcoal-dim); }
.cta-band a:not(.btn) { color: var(--charcoal-text); }

/* ---------- footer (charcoal band) ---------- */

.site-foot {
  background: var(--charcoal);
  color: var(--charcoal-dim);
  margin-top: 72px;
  padding: 48px 0 40px;
  font-size: 0.95rem;
}
.site-foot .wrap {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 32px;
}
.site-foot .brand { color: var(--charcoal-text); font-size: 1.15rem; margin: 0 0 10px; }
.site-foot p { max-width: 40ch; }
.site-foot h2 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--marigold);
  margin: 0 0 12px;
}
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: 8px; }
.site-foot a { color: var(--charcoal-dim); text-decoration: none; }
.site-foot a:hover { color: var(--charcoal-text); }
.foot-legal {
  border-top: 1px solid rgba(250, 245, 234, 0.15);
  margin-top: 36px;
  padding-top: 20px;
  font-size: 0.88rem;
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .lede, .hero-actions, .hero-note {
    animation: rise 0.7s ease-out both;
  }
  .hero .lede { animation-delay: 0.08s; }
  .hero-actions { animation-delay: 0.16s; }
  .hero-note { animation-delay: 0.22s; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
}

/* ---------- responsive ---------- */

@media (max-width: 880px) {
  .grid-3 { grid-template-columns: 1fr; }
  .price-cards { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 28px; }
  .split-even { grid-template-columns: 1fr; gap: 28px; }
  .split-even > div { grid-template-rows: auto; grid-row: auto; }
  .site-foot .wrap { grid-template-columns: 1fr; gap: 26px; }
  .hero { padding: 60px 0 68px; }
  .step { grid-template-columns: 56px 1fr; gap: 18px; }
  .step-num { font-size: 2.2rem; }
}