/* ==========================================================================
   Socyva — marketing site
   --------------------------------------------------------------------------
   Deliberately near-monochrome. The product screenshots and generated posters
   are the only saturated colour on the page, so nothing on the site competes
   with the work it is showing. One warm bronze accent, used sparingly.
   ========================================================================== */

:root {
  /* --- surface ------------------------------------------------------ */
  --bone:        #FBF9F6;   /* page canvas — warm, never clinical white   */
  --bone-deep:   #F4F0EA;   /* alternating band                            */
  --surface:     #FFFFFF;
  --ink:         #16130F;   /* warm near-black                             */
  --ink-soft:    #46403A;
  /* Darkened from #7A736A, which measured 4.45:1 on the bone canvas — just
     under the 4.5:1 AA minimum for the 12–14px labels that use it. */
  --ink-muted:   #6B6459;
  --line:        #E6E0D7;
  --line-soft:   #EFEAE2;

  /* --- accent: used for small marks only, never large fills ---------- */
  --accent:      #9C5A2C;

  /* --- night band (the approval chapter) ---------------------------- */
  --night:       #14120F;
  --night-soft:  #23201B;
  --night-text:  #EDE8E1;   /* body copy on the dark band          */
  --night-head:  #F6F2EC;   /* headings on the dark band           */
  --night-mute:  #A8A099;   /* labels and secondary copy           */
  --night-body:  #C4BDB4;
  --night-accent:#C98A56;   /* the accent, lifted to clear the dark */
  --night-line:  rgba(255,255,255,.10);

  /* --- type --------------------------------------------------------- */
  --display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* --- rhythm: spacious, per the brief ------------------------------ */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px;
  --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 144px;

  --measure: 62ch;
  --shell: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ==========================================================================
   base
   ========================================================================== */
*, *::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(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

::selection { background: var(--ink); color: var(--bone); }

/* One visible focus treatment, for keyboard users only. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 3px;
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: 24px;
}

/* Visible only to screen readers. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 24px; top: -60px;
  background: var(--ink); color: var(--bone);
  padding: 10px 16px; border-radius: 6px; z-index: 100;
  text-decoration: none; font-size: 14px;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* ==========================================================================
   type scale
   ========================================================================== */
.display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.02;
  margin: 0;
  /* Fluid, so it never needs a breakpoint to stay proportionate. */
  font-size: clamp(2.75rem, 7.2vw, 5.75rem);
}

.display-sm {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.1;
  margin: 0;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
}

.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 var(--s-3);
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Small rule before the label — a quiet editorial marker. */
.eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--accent);
  flex: none;
}

.lede {
  font-size: clamp(1.0625rem, 1.9vw, 1.375rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: var(--s-3) 0 0;
}

.body   { color: var(--ink-soft); max-width: var(--measure); margin: 0; }
.body + .body { margin-top: var(--s-2); }

.italic-note {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.375rem, 3vw, 2rem);
  line-height: 1.4;
  color: var(--ink);
  max-width: 46ch;
  margin: 0;
}

/* ==========================================================================
   buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .25s var(--ease), background-color .25s var(--ease),
              color .25s var(--ease), border-color .25s var(--ease);
  min-height: 48px;              /* comfortable touch target */
}

.btn-primary { background: var(--ink); color: var(--bone); }
.btn-primary:hover { transform: translateY(-2px); background: #241f19; }

.btn-ghost { border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); transform: translateY(-2px); }

.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ==========================================================================
   header
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bone) 82%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.site-header[data-scrolled='true'] { border-bottom-color: var(--line); }

.site-header .shell {
  display: flex; align-items: center; justify-content: space-between;
  height: 76px;
}

.wordmark {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; font-weight: 600; font-size: 18px;
  letter-spacing: -0.02em;
}
.wordmark .glyph {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--ink); color: var(--bone);
  display: grid; place-items: center; flex: none;
}

/* ==========================================================================
   sections
   ========================================================================== */
section { padding-block: var(--s-8); }
.band-deep { background: var(--bone-deep); }

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

/* ==========================================================================
   hero
   ========================================================================== */
.hero { padding-top: var(--s-7); padding-bottom: var(--s-7); }

/* Phone order is headline → poster → buttons, so the artwork (the actual hook)
   is seen before the reader has to work through the supporting copy. On a wide
   screen the poster moves to its own column and spans both rows. */
.hero-grid {
  display: grid;
  gap: var(--s-5);
  align-items: center;
}
@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: 1fr 1.12fr;
    grid-template-rows: auto auto;
    column-gap: var(--s-7);
    row-gap: var(--s-5);
    align-items: start;
  }
  .hero-copy   { grid-column: 1; grid-row: 1; }
  .hero-cta    { grid-column: 1; grid-row: 2; }
  .hero-figure { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* The grid row gap already separates this from the poster, so no extra margin —
   stacking both left a dead band on phones. */
.hero-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
}

.hero-foot {
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-muted);
  max-width: 46ch;
}

/* --- the poster, presented like a framed print ---------------------- */
/* margin:0 matters — a bare <figure> carries a browser default of 1em 40px,
   which was insetting the poster and opening a gap under it on phones. */
.hero-figure { position: relative; margin: 0; }

.frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  box-shadow:
    0 1px 1px rgba(22,19,15,.04),
    0 12px 28px -12px rgba(22,19,15,.16),
    0 40px 70px -40px rgba(22,19,15,.3);
}
.frame img { width: 100%; }

/* Floating caption chip — states a fact, not a boast. */
.chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 10px 24px -12px rgba(22,19,15,.28);
  white-space: nowrap;
}
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
/* Sit just outside the frame corners: the poster stays fully visible (including
   its brand lockup) and the labels read as annotations on the print. */
.chip-a { right: -16px; bottom: -16px; }
.chip-b { left: -16px;  top: -16px; }

/* On a phone the poster fills the column, so a floating pill would sit on top of
   the artwork and hide the brand lockup. Drop the badge and let the remaining
   label sit underneath as a caption instead. */
@media (max-width: 620px) {
  .chip-b { display: none; }
  .chip-a {
    position: static;
    display: inline-flex;
    margin-top: 14px;
    font-size: 12px;
    padding: 8px 14px;
    box-shadow: none;
    background: transparent;
    border-color: var(--line);
  }
}

/* ==========================================================================
   steps
   ========================================================================== */
.steps { display: grid; gap: var(--s-5); margin-top: var(--s-7); }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }

.step { padding-top: var(--s-3); border-top: 1px solid var(--line); }

.step-no {
  font-family: var(--display);
  font-size: 30px;
  color: var(--accent);
  line-height: 1;
  display: block;
  margin-bottom: var(--s-2);
}
.step h3 { font-size: 20px; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.01em; }
.step p  { margin: 0; color: var(--ink-soft); font-size: 16px; }

/* ==========================================================================
   gallery — real output at real sizes
   ========================================================================== */
.gallery { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
@media (min-width: 780px) { .gallery { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); } }

.plate { margin: 0; }
.plate .frame { border-radius: 10px; }
.plate figcaption {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-2);
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-muted);
  border-top: 1px solid var(--line-soft);
  padding-top: 10px;
}
.plate .dims { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ==========================================================================
   night band — the approval chapter
   ========================================================================== */
.night {
  background: var(--night);
  color: var(--night-text);
  position: relative;
  overflow: hidden;
}
/* A single soft light, so the band has depth without any gradient cliché. */
.night::before {
  content: '';
  position: absolute; inset: -30% -10% auto -10%;
  height: 70%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(156,90,44,.20), transparent 70%);
  pointer-events: none;
}
.night .eyebrow { color: var(--night-mute); }
.night .eyebrow::before { background: var(--night-accent); }
.night .lede, .night .body { color: var(--night-body); }
.night .display-sm { color: var(--night-head); }

.gate {
  display: grid; gap: 1px;
  background: var(--night-line);
  border: 1px solid var(--night-line);
  border-radius: 12px;
  overflow: hidden;
  margin-top: var(--s-6);
}
@media (min-width: 620px) and (max-width: 899px) { .gate { grid-template-columns: repeat(2, 1fr); } }

.gate-cell { background: var(--night-soft); padding: var(--s-4); }
.gate-cell h3 {
  font-size: 15px; font-weight: 600; margin: 0 0 6px;
  color: var(--night-head); letter-spacing: -0.005em;
}
.gate-cell p { margin: 0; font-size: 15px; color: var(--night-mute); }


/* ==========================================================================
   split — copy beside a screenshot
   --------------------------------------------------------------------------
   One column of prose and one figure. Below 900px the figure drops under the
   copy, because a screenshot at half a phone's width is unreadable.
   ========================================================================== */
.split {
  display: grid;
  gap: var(--s-5);
  margin-top: var(--s-6);
  align-items: start;
}
@media (min-width: 900px) {
  .split       { grid-template-columns: 1fr 1fr; gap: var(--s-6); align-items: center; }
  .split-even  { align-items: start; }
  /* The approval email is portrait, so it gets the narrower column. */
  .split-tight { grid-template-columns: 0.72fr 1fr; align-items: start; }
}

.split-copy > .body + .body { margin-top: var(--s-3); }

/* --- a product screenshot, framed like the posters ------------------- */
.shot { margin: 0; }
.shot .frame { border-radius: 10px; }
.shot figcaption {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: 52ch;
}
/* A full-width plate for the wide screens (editor, post list). */
.shot-wide { margin-top: var(--s-6); }
.shot-wide figcaption { max-width: 62ch; }

.night .shot figcaption { color: var(--night-mute); border-top-color: var(--night-line); }

/* ==========================================================================
   clocks — the signature
   --------------------------------------------------------------------------
   One absolute instant, four times. The last cell is the reader's own zone,
   filled in by script; it starts hidden so nothing flashes an empty column.
   ========================================================================== */
.clocks {
  margin-top: var(--s-6);
  padding: var(--s-4) var(--s-4) var(--s-3);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 1px rgba(22,19,15,.03), 0 18px 40px -30px rgba(22,19,15,.25);
}

.clocks-label,
.clocks-foot {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.clocks-foot {
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
  letter-spacing: 0;
  text-transform: none;
  font-size: 14px;
  line-height: 1.6;
}

.clock-row {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
}
@media (min-width: 640px) { .clock-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .clock-row { grid-template-columns: repeat(4, 1fr); gap: var(--s-2); } }

.clock {
  display: grid;
  gap: 3px;
  padding-left: 14px;
  border-left: 2px solid var(--line);
}
.clock-place {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
/* Tabular figures so the four times sit on the same optical grid. */
.clock-time {
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.clock-date { font-size: 13px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* The reader's own clock is the point of the section, so it is the one cell
   the accent is spent on. */
.clock-you { border-left-color: var(--accent); }
.clock-you .clock-place { color: var(--accent); }

/* ==========================================================================
   guards — the three unattended-publishing guarantees
   ========================================================================== */
.guards { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
@media (min-width: 820px) { .guards { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }

.guard { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.guard h3 { font-size: 17px; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.01em; }
.guard p  { margin: 0; color: var(--ink-soft); font-size: 16px; }

/* ==========================================================================
   ladder — the fallback cascade
   --------------------------------------------------------------------------
   Numbered because it genuinely is an order: each rung only matters because
   the one above it failed.
   ========================================================================== */
.ladder {
  list-style: none;
  margin: var(--s-6) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.ladder li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 4px var(--s-3);
  align-items: baseline;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 720px) {
  .ladder li { grid-template-columns: 28px 190px 1fr; align-items: baseline; }
}

.rung {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: lining-nums;
}
.rung-when { font-weight: 600; font-size: 16px; letter-spacing: -0.005em; }
.rung-what { color: var(--ink-soft); font-size: 16px; }
@media (max-width: 719px) {
  .rung      { grid-row: 1 / span 2; }
  .rung-what { grid-column: 2; }
}

/* The last rung is the one that never fails, so it is the one that is lit. */
.ladder li:last-child { border-bottom: 0; }
.ladder li:last-child .rung-when { color: var(--accent); }

/* ==========================================================================
   bands — the brand score
   ========================================================================== */
.bands {
  margin: 0;
  border-top: 1px solid var(--line);
  max-width: 34ch;
}
@media (max-width: 899px) { .bands { margin-top: var(--s-2); } }
.band-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.band-row dt {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--ink-muted);
}
.band-row dd { margin: 0; font-size: 15px; font-weight: 500; }
/* Top band only — the one you are aiming for. */
.band-row:first-child dd { color: var(--accent); }

/* Inline literals: a stored "09:00", a zone name. Not code, but not prose. */
.mono {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: 0.92em;
  background: var(--bone-deep);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}

/* ==========================================================================
   facts
   ========================================================================== */
.facts { display: grid; gap: 0; margin-top: var(--s-6); border-top: 1px solid var(--line); }
.fact {
  display: grid; gap: 6px;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 780px) {
  .fact { grid-template-columns: 260px 1fr; gap: var(--s-5); align-items: baseline; }
}
.fact dt { font-weight: 600; font-size: 16px; letter-spacing: -0.005em; }
.fact dd { margin: 0; color: var(--ink-soft); font-size: 16px; }

/* ==========================================================================
   closing call to action
   ========================================================================== */
.close { text-align: center; }
.close .display-sm { margin-inline: auto; max-width: 18ch; }
.close .lede { margin-inline: auto; text-align: center; }
.close .hero-actions { justify-content: center; }

/* ==========================================================================
   footer
   ========================================================================== */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--s-5);
  font-size: 14px;
  color: var(--ink-muted);
}
.site-footer .shell {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  align-items: center; justify-content: space-between;
}

/* ==========================================================================
   scroll reveal
   --------------------------------------------------------------------------
   Elements start slightly low and transparent, then settle. Handled with a
   single IntersectionObserver; no animation library.
   ========================================================================== */
/* Scoped to .has-js, which the page sets on <html> before first paint. With
   JavaScript off — or blocked — the rule never applies and the page is simply
   visible, rather than a screen of invisible text. */
.has-js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay: var(--d, 0ms);
}
.has-js .reveal.is-in { opacity: 1; transform: none; }

/* Anyone who has not opted into motion sees the finished state immediately,
   and nothing moves or scroll-jumps. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .has-js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .btn:hover, .btn:hover .arrow, .btn:hover .arrow-down { transform: none; }
}

/* ==========================================================================
   manual — the handbook offered as a download
   ========================================================================== */

/* A white sheet on the bone canvas: the section reads as a document sitting on
   the page rather than another band of copy. */
.manual {
  display: grid;
  gap: var(--s-5);
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: var(--s-5);
  box-shadow:
    0 1px 1px rgba(22, 19, 15, .04),
    0 18px 44px -26px rgba(22, 19, 15, .24);
}

/* The cover only earns a column once there is room for it to be legible. */
@media (min-width: 880px) {
  .manual {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--s-7);
    padding: var(--s-6) var(--s-7);
  }
}

.manual-text { min-width: 0; }
.manual .display-sm { margin-bottom: var(--s-3); }
.manual .body { margin-bottom: var(--s-4); }

.manual-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.manual-meta {
  margin: 0;
  font-size: 13px;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

/* The arrow falls rather than advances — the one place on the site where the
   motion points down, because that is what the control does. */
.arrow-down { transition: transform .25s var(--ease); }
.btn:hover .arrow-down { transform: translateY(3px); }

.manual-cover { margin: 0; width: 216px; }
.manual-cover .frame { border-radius: 8px; }
.manual-cover img { width: 100%; }