/* synctake.com — the marketing page.
 *
 * Same clothes as the rest of the site: the ink/amber/tally palette from
 * UIComponents, Big Shoulders Display for signage, IBM Plex Mono for anything
 * a camera would print, IBM Plex Sans for anything a person reads at length.
 *
 * The organising idea is that the whole page is one continuous take. A SMPTE
 * clock runs in the corner from the moment the page loads, and the monitor
 * wall's four tiles read from that same clock — so they tick together and
 * never drift, which is the thing the product is named after, demonstrated
 * rather than claimed.
 */

:root {
  --bg: #0b0b0d;
  --surface: #121216;
  --raised: #17171b;
  --line: #26262c;
  --ink: #f2f0ea;
  --ink-dim: #8e8d95;
  --ink-faint: #6f6e76;
  --amber: #ffb100;
  --tally: #ff3b30;
  --ok: #4cb782;
  --display: "Big Shoulders Display", sans-serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --wrap: 1080px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

::selection { background: var(--amber); color: var(--bg); }

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ---- atmosphere ---------------------------------------------------------- */

.grain {
  position: fixed; inset: -100px; z-index: 60; pointer-events: none;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* The running clock. It is the page's spine: the hero, the monitor wall and
   this HUD are all reading the same counter. */
.hud {
  position: fixed; z-index: 50;
  top: 18px; right: 20px;
  display: flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  color: var(--ink-dim);
  background: rgba(11,11,13,.72);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 7px 12px;
  backdrop-filter: blur(8px);
}
.hud b {
  width: 7px; height: 7px; border-radius: 50%;
  background: #3a3a42;
}
.hud .tc { color: var(--ink-faint); }
@keyframes blink { 50% { opacity: .2; box-shadow: none; } }

/* Nothing on this page is running until the sticks hit. Until then the tally
   lights are dark, the HUD reads STBY and every counter sits on 00:00:00:00 —
   which is the honest state of a set that has not been marked yet. */
body.rolling .hud b {
  background: var(--tally); box-shadow: 0 0 10px 1px rgba(255,59,48,.65);
  animation: blink 1.2s steps(1) infinite;
}
body.rolling .hud .tc { color: var(--amber); }

/* ---- shared section rhythm ---------------------------------------------- */

section { padding: clamp(72px, 11vw, 132px) 24px; }
.wrap { max-width: var(--wrap); margin: 0 auto; }

.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--amber);
}

h2 {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(40px, 6.4vw, 72px); line-height: .96; letter-spacing: -.005em;
  margin: 16px 0 20px; max-width: 16ch;
}

.lede { font-size: clamp(17px, 2vw, 20px); color: var(--ink-dim); max-width: 60ch; }

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

/* ---- hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(52px, 11vh, 110px) 24px clamp(48px, 7vh, 72px);
  overflow: hidden;
}

/* Viewfinder corners — only here, not fixed over the whole page. */
.hero .frame { position: absolute; inset: clamp(12px, 2.4vmin, 26px); pointer-events: none; }
.hero .frame i { position: absolute; width: 26px; height: 26px; border: 2px solid rgba(242,240,234,.32); }
.hero .frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.hero .frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.hero .frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.hero .frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 52%, rgba(0,0,0,.6) 100%);
}

.hero-inner { position: relative; z-index: 2; max-width: var(--wrap); margin: 0 auto; width: 100%; }

/* ---- the slate ----------------------------------------------------------- */

/* The clap is the page's one big move, and it is not decoration. On a set the
   clap is the sync point: the single frame where picture and sound are married,
   which is the whole of what this product does. So the page stages it properly.
   The sticks lift, hold the beat they are held for while sound calls speed, and
   snap — and on the frame they hit, the clock starts, the tally lights come up
   and the take is running. The timing lives in the script because the open
   angle has to be measured: a 760px stick swinging 24° needs 300px of headroom
   that a laptop does not have, so the page opens the sticks as far as the frame
   allows and no further. */

.slate {
  --stick-h: clamp(30px, 5vw, 48px);
  position: relative;
  width: min(760px, 100%);
}

/* What a lifted stick opens onto: unlit air behind it. Without this the gap
   fills with the hero's own glow and the stick reads as painted on. */
.slate::before {
  content: ""; position: absolute; z-index: 0;
  left: 0; right: 0; top: 0; height: var(--stick-h);
  background: #07070a;
  border-radius: 6px 6px 0 0;
}

/* The board's top rail, which the closed sticks sit flush against. It is the
   lit line the gap opens above, and it is what lets a small swing still read
   as hinged. */
.slate .rail {
  position: absolute; z-index: 1;
  left: 0; right: 0; top: calc(var(--stick-h) - 3px); height: 3px;
  background: linear-gradient(rgba(242,240,234,.28), rgba(0,0,0,.55));
}

.sticks {
  position: relative;
  width: 100%;
  height: var(--stick-h);
  /* Two layers on one axis, so the amber stick sits in the stripe rhythm
     rather than beside it. The stops are percentages near the far end because
     a -55deg gradient line starts at the bottom-RIGHT corner — small values
     put the amber bar on the right, which is the opposite of where a
     clapper's coloured stick lives. */
  background:
    linear-gradient(-55deg,
      transparent 80%, var(--amber) 80%, var(--amber) 85.5%, transparent 85.5%),
    repeating-linear-gradient(-55deg,
      var(--bg) 0 34px, var(--raised) 34px 68px);
  border-radius: 6px 6px 0 0;
  /* A lit top edge and a dark underside. Without them the stick is a painted
     stripe, and a painted stripe cannot look hinged however far it rotates. */
  box-shadow:
    inset 0 2px 0 rgba(242,240,234,.13),
    inset 0 -2px 0 rgba(0,0,0,.55),
    0 2px 6px rgba(0,0,0,.5);
  transform-origin: 0% 100%;
  will-change: transform;
  z-index: 3;
}

/* The hinge pin sits on the pivot, so it is the one part of the stick that
   does not move. */
.sticks .hinge {
  position: absolute; z-index: 4; left: -4px; bottom: -6px;
  width: 13px; height: 13px; border-radius: 50%;
  background: #34343d; border: 1px solid #474751;
  box-shadow: inset 0 1px 0 rgba(242,240,234,.28), 0 1px 3px rgba(0,0,0,.6);
}

/* Light gets under a lifted stick, so the board picks up a shadow that deepens
   with the angle. The script drives the opacity. */
.slate .shade {
  position: absolute; z-index: 2; left: 0; right: 0; top: var(--stick-h);
  height: 74px; pointer-events: none; opacity: 0;
  background: linear-gradient(rgba(0,0,0,.62), transparent);
  border-radius: 0 0 8px 8px;
}

/* The hit. One flash along the seam, gone in a third of a second. */
.slate .spark {
  position: absolute; z-index: 5; left: 0; right: 0; top: var(--stick-h);
  height: 2px; margin-top: -1px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, #fff 22%, #fff 78%, transparent);
  box-shadow: 0 0 9px 0 rgba(255,255,255,.45), 0 0 20px 2px rgba(255,177,0,.2);
}

/* Second sticks: when the first clap is no good you call for another, and the
   take number goes up. The control is the number it changes. */
.second-sticks {
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0;
  font: inherit; letter-spacing: inherit; color: var(--amber);
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
}
.second-sticks i {
  font-style: normal; font-size: 12px; line-height: 1;
  color: var(--ink-faint); opacity: .55;
  transition: opacity .15s ease, color .15s ease, transform .3s ease;
}
.second-sticks:hover i,
.second-sticks:focus-visible i { opacity: 1; color: var(--amber); }
.second-sticks:hover i { transform: rotate(-150deg); }

.board {
  position: relative; z-index: 1;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line); border-top: 0;
  border-radius: 0 0 10px 10px;
  padding: clamp(22px, 4vw, 40px) clamp(20px, 4vw, 44px) clamp(24px, 4vw, 40px);
}

.fields {
  display: grid; grid-template-columns: 1.15fr 1fr .78fr .78fr .8fr;
  border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  margin-bottom: clamp(20px, 3vw, 30px);
}
.fields div { padding: 9px 12px; border-right: 1px solid var(--line); }
.fields div:last-child { border-right: 0; }
.fields dt {
  font-family: var(--mono); font-size: 9px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px;
}
.fields dd { font-family: var(--mono); font-size: 14px; font-weight: 500; }
.fields dd.take { color: var(--amber); }
.fields dd.status { color: var(--amber); display: flex; align-items: center; gap: 7px; }
.fields dd.status s { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); flex: none; }

h1 {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(52px, 9.5vw, 108px); line-height: .9; letter-spacing: -.01em;
}
h1 .dim { color: var(--ink-dim); display: block; }

.hero p.pitch {
  margin-top: clamp(18px, 2.6vw, 26px);
  font-size: clamp(16px, 1.9vw, 19px); color: var(--ink-dim); max-width: 52ch;
}
.hero p.pitch b { color: var(--ink); font-weight: 600; }

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3.4vw, 34px); }

.btn {
  font-family: var(--display); font-weight: 700; font-size: 16px;
  letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 26px; border-radius: 7px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer;
  transition: filter .15s ease, transform .1s ease, border-color .15s ease;
}
.btn-primary { background: var(--amber); color: var(--bg); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-ghost { border-color: var(--line); color: var(--ink); background: var(--raised); }
.btn-ghost:hover { border-color: rgba(255,177,0,.45); }
.btn:active { transform: scale(.98); }

/* ---- the monitor wall ---------------------------------------------------- */

.wall {
  display: grid; gap: 14px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: clamp(34px, 5vw, 52px);
}
.tile {
  position: relative; overflow: hidden;
  background: #000; border: 1px solid var(--line); border-radius: 8px;
  aspect-ratio: 16 / 9;
}
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile .bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,.82) 55%);
  font-family: var(--mono); font-size: clamp(9px, 1.1vw, 11px); letter-spacing: .08em;
}
.tile .name { color: var(--ink); }
.tile .tc { color: var(--amber); }
.tile .rec {
  position: absolute; top: 9px; right: 10px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #3a3a42;
}
body.rolling .tile .rec {
  background: var(--tally); box-shadow: 0 0 9px 1px rgba(255,59,48,.7);
  animation: blink 1.2s steps(1) infinite;
}

/* The sound tile has no picture — it has a meter, because that is what a
   sound recordist is looking at, and it is on the same clock. */
.tile.sound { display: grid; place-items: center; background: var(--surface); }
.meter { display: flex; align-items: flex-end; gap: 5px; height: 40%; }
.meter i {
  width: clamp(5px, 1vw, 8px); background: var(--ok); border-radius: 1px;
  transform-origin: bottom;
  animation: vu 1.1s ease-in-out infinite alternate;
}
.meter i:nth-child(1) { height: 52%; animation-delay: -.20s; }
.meter i:nth-child(2) { height: 78%; animation-delay: -.55s; }
.meter i:nth-child(3) { height: 96%; animation-delay: -.35s; background: var(--amber); }
.meter i:nth-child(4) { height: 64%; animation-delay: -.75s; }
.meter i:nth-child(5) { height: 40%; animation-delay: -.10s; }
.meter i:nth-child(6) { height: 70%; animation-delay: -.45s; }
@keyframes vu { from { transform: scaleY(.35); } to { transform: scaleY(1); } }

.wall-note {
  margin-top: 16px; font-family: var(--mono); font-size: 12px;
  color: var(--ink-faint); letter-spacing: .04em;
}

/* ---- stations ------------------------------------------------------------ */

.stations {
  display: grid; gap: 12px; margin-top: clamp(34px, 5vw, 52px);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.station {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 9px; padding: 22px 20px 20px;
  transition: border-color .16s ease, transform .16s ease;
}
.station:hover { border-color: rgba(255,177,0,.32); transform: translateY(-2px); }
.station svg { width: 30px; height: 30px; color: var(--amber); margin-bottom: 14px; }
.station h3 {
  font-family: var(--display); font-weight: 700; font-size: 21px;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px;
}
.station p { font-size: 14.5px; color: var(--ink-dim); line-height: 1.55; }
.station .tag {
  display: inline-block; margin-top: 12px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 3px; padding: 3px 7px;
}
.station .tag.free { color: var(--ok); border-color: rgba(76,183,130,.32); }

/* ---- workflow ------------------------------------------------------------ */

.steps { margin-top: clamp(34px, 5vw, 52px); border-top: 1px solid var(--line); }
.step {
  display: grid; grid-template-columns: 132px 1fr; gap: 28px;
  padding: 30px 0; border-bottom: 1px solid var(--line);
}
.step .where {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--amber); padding-top: 6px;
}
.step h3 {
  font-family: var(--display); font-weight: 700; font-size: 27px;
  line-height: 1.12; margin-bottom: 8px;
}
.step p { color: var(--ink-dim); font-size: 16px; max-width: 58ch; }

/* ---- what it does, what to plan around ----------------------------------- */

/* Deliberately the plainest block on the page. It used to be three cards —
   working now / still being sharpened / not built yet — with green, amber and
   grey headings, which is a project board; a project board shown to a customer
   reads as a backlog rather than as candour, and it spent a third of the
   section on things that do not exist. Two ruled columns instead, in the same
   hand as the workflow rows above: set paperwork, not a roadmap. No status
   colours, because a status colour is the tell. */

.report {
  display: grid; gap: clamp(26px, 4vw, 54px);
  grid-template-columns: 1.06fr .94fr;
  margin-top: clamp(30px, 4.4vw, 46px);
}
.report h3 {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-faint);
  padding-bottom: 13px; border-bottom: 1px solid var(--line);
}
.report ul { list-style: none; }
.report li {
  padding: 13px 0; border-bottom: 1px solid var(--line);
  font-size: 15.5px; color: var(--ink-dim); line-height: 1.55;
}
.report li b { color: var(--ink); font-weight: 600; }

/* The right column is doing a different job — three explanations rather than a
   list of facts — so it is set as prose under one rule instead of ruled rows.
   Two ruled lists either side of a gutter never line up, and a rule that
   nearly aligns reads as a mistake. */
.report .notes li { border-bottom: 0; padding: 21px 0 0; }

/* ---- signup -------------------------------------------------------------- */

.signup { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.signup-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.signup h2 { margin-left: auto; margin-right: auto; max-width: 14ch; }
.signup .lede { margin: 0 auto; }

form.subscribe {
  display: flex; gap: 10px; margin-top: 30px; flex-wrap: wrap;
  justify-content: center;
}
form.subscribe input[type="email"] {
  flex: 1 1 300px; min-width: 0;
  background: var(--bg); border: 1px solid var(--line); border-radius: 7px;
  color: var(--ink); font-family: var(--sans); font-size: 16px;
  padding: 14px 16px;
}
form.subscribe input::placeholder { color: var(--ink-faint); }
form.subscribe input:focus { border-color: rgba(255,177,0,.5); }
/* The honeypot. Off-screen rather than display:none — some bots skip hidden
   fields but fill positioned ones. */
form.subscribe .trap {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}
/* A real label for the real field, hidden from sight but not from a screen
   reader. Same geometry as the trap, different job — sharing one class for
   both made the markup read as though the email field were also bait. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.form-note { margin-top: 14px; font-size: 13.5px; color: var(--ink-faint); }
.form-msg {
  margin-top: 16px; font-family: var(--mono); font-size: 13px;
  letter-spacing: .04em; min-height: 1.4em;
}
.form-msg.ok { color: var(--ok); }
.form-msg.bad { color: var(--tally); }

/* ---- footer -------------------------------------------------------------- */

footer { padding: 54px 24px 64px; }
.foot {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 22px; justify-content: space-between;
  align-items: center;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .08em;
  color: var(--ink-faint);
}
.foot nav { display: flex; flex-wrap: wrap; gap: 18px; }
.foot a { color: var(--ink-dim); text-decoration: none; }
.foot a:hover { color: var(--amber); }
.foot .byline { display: flex; align-items: center; gap: 10px; }
.foot .byline img { width: 34px; height: auto; opacity: .8; }

/* The wordmark lockup: SYNC rides the stick, TAKE is the board. */
.wm { display: inline-flex; align-items: baseline; gap: .12em; text-decoration: none; color: var(--ink); }
.wm span { font-family: var(--display); font-weight: 500; letter-spacing: .34em; font-size: 14px; }
.wm b { font-family: var(--display); font-weight: 900; letter-spacing: .02em; font-size: 20px; }
.wm i {
  display: inline-block; width: 24px; height: 10px; margin-left: .5em;
  background: repeating-linear-gradient(-55deg, var(--ink) 0 5px, transparent 5px 10px);
}

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

@media (max-width: 720px) {
  .wall { grid-template-columns: 1fr; }
  .report { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: 8px; }
  .step .where { padding-top: 0; }
  .fields { grid-template-columns: repeat(2, 1fr); }
  .fields div { border-bottom: 1px solid var(--line); }
  .fields div:first-child { grid-column: 1 / -1; }
  .fields div:nth-child(even) { border-right: 1px solid var(--line); }
  .fields div:nth-child(odd) { border-right: 0; }
  .fields div:nth-child(4), .fields div:nth-child(5) { border-bottom: 0; }
  .hud { top: 12px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* The script does not clap under this setting, so the slate is simply shut
     and the take is simply marked — the page's resting state, reached without
     anyone having to watch it get there. */
  .sticks { transform: none; }
}