/* cygtree.com — product site.
   Same design tokens as cygnuscrane.com on purpose: one company, one look. */

:root {
  --bg: #0a0a0d;
  --bg-elev: #14141a;
  --bg-card: #1a1a22;
  --border: #2a2a35;
  --text: #e8e8ea;
  --text-muted: #8b8b94;
  --text-dim: #5a5a63;
  --accent-gold: #d4af37;
  --accent-cyan: #4a9eff;
  --accent-warn: #ffb84d;
  --mono: "JetBrains Mono", "Fira Code", "Cascadia Mono", Consolas, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --maxw: 1080px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- top bar ---------------------------------------------------------- */

nav.top {
  position: sticky; top: 0; z-index: 10;
  background: rgba(10, 10, 13, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
nav.top .inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0.75rem 1.5rem;
  display: flex; align-items: center; gap: 1rem;
}
nav.top .brand {
  display: flex; align-items: center; gap: 0.55rem;
  color: var(--accent-gold); font-weight: 700;
  font-family: var(--mono); font-size: 0.95rem;
  letter-spacing: 0.06em; text-decoration: none;
}
/* No border-radius: the mark is transparent line art, not a rounded app tile.
   A radius on a transparent PNG clips nothing and only invites confusion later. */
nav.top .brand img { width: 30px; height: 30px; }
nav.top .links { margin-left: auto; display: flex; gap: 1.25rem; align-items: center; }
nav.top .links a { color: var(--text-muted); font-size: 0.9rem; }
nav.top .links a:hover { color: var(--text); text-decoration: none; }

/* ---- layout ----------------------------------------------------------- */

main { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; }

section { padding: 4rem 0; border-bottom: 1px solid var(--border); }
section:last-of-type { border-bottom: 0; }

h1, h2, h3 { line-height: 1.25; margin: 0 0 0.75rem; }
h2 { font-size: 1.6rem; letter-spacing: -0.01em; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1rem; }
p.lead { font-size: 1.15rem; color: var(--text-muted); max-width: 62ch; }

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

.hero { text-align: center; padding: 5rem 0 3.5rem; }
/* Bigger than the old icon (96px) and with no tile radius. The old mark was a
   filled rounded square that read fine small; this one is fine gold line work
   whose branches disappear if you shrink it. */
.hero img.mark {
  width: 150px; height: 150px;
  margin: 0 auto 1.25rem; display: block;
}
.hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  letter-spacing: -0.02em; margin-bottom: 0.5rem;
}
/* 58ch, not 46ch: the tagline is one sentence and wants to land on ONE line on a
   desktop. At 46ch it broke after "you and your" and read as two half-thoughts. */
.hero .tag {
  font-size: 1.25rem; color: var(--text-muted);
  max-width: 58ch; margin: 0 auto 2rem;
}

/* ---- buttons ---------------------------------------------------------- */

.cta { display: flex; gap: 0.85rem; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.4rem; border-radius: 8px;
  font-weight: 600; font-size: 0.98rem;
  border: 1px solid var(--border); text-decoration: none;
  color: var(--text); background: var(--bg-card);
}
.btn:hover { text-decoration: none; border-color: var(--text-dim); }
.btn.primary {
  background: var(--accent-gold); color: #14140d;
  border-color: var(--accent-gold);
}
.btn.primary:hover { filter: brightness(1.08); }
.btn .sub { font-weight: 400; opacity: 0.75; font-size: 0.85rem; }

/* ⚠ A SPAN, NOT AN <a> OR A <button>. These are announcements, not controls:
   there is nothing to click and nothing to tab to, so they must not be
   focusable or hoverable. An <a> with no href, or a disabled <button>, both
   invite a keyboard user to land on something that cannot do anything.
   The grey says "not available"; the word says WHEN — neither alone is enough,
   so both are here. */
.btn.disabled {
  background: transparent;
  color: var(--text-dim);
  border-color: var(--border);
  border-style: dashed;
  cursor: default;
}
.btn.disabled:hover { border-color: var(--border); }
.btn.disabled .sub { opacity: 1; color: var(--text-dim); }

.note { font-size: 0.85rem; color: var(--text-dim); margin-top: 0.9rem; }

/* ---- media slots -----------------------------------------------------
   Deliberately loud. These are Leo's screenshots and video to drop in, and a
   slot that looks finished is a slot that ships empty. */

.slot {
  border: 2px dashed var(--border);
  border-radius: 10px;
  background: var(--bg-elev);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 2rem 1.5rem;
  color: var(--text-dim);
  font-family: var(--mono); font-size: 0.85rem;
}
/* ⚠ HEIGHTS, NOT ASPECT RATIOS. `aspect-ratio` plus a max-height makes the box
   shrink its WIDTH to keep the ratio, so three slots came out 992, 818 and 1032
   wide — ragged, for placeholders whose only job is to be obvious and uniform.
   The intended aspect is stated in each slot's own text instead, which is where
   the person filling it will actually read it. */
.slot.wide { min-height: 420px; }
.slot.tall { min-height: 340px; }
.slot .what { color: var(--accent-warn, #ffb84d); font-weight: 600; margin-bottom: 0.35rem; }
.slot .how { max-width: 46ch; line-height: 1.5; }

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

.grid { display: grid; gap: 1.25rem; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem;
}
.card h3 { color: var(--text); }
.card p { color: var(--text-muted); margin-bottom: 0; }
.card .kicker {
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent-gold); margin-bottom: 0.6rem;
}

/* ---- feature list ----------------------------------------------------- */

ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li {
  padding: 0.55rem 0 0.55rem 1.5rem; position: relative;
  color: var(--text-muted); border-bottom: 1px solid var(--border);
}
ul.plain li:last-child { border-bottom: 0; }
ul.plain li::before {
  content: ""; position: absolute; left: 0; top: 1.15rem;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-gold);
}
ul.plain li strong { color: var(--text); font-weight: 600; }

/* ---- price ------------------------------------------------------------ */

.price-wrap { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.price {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; padding: 1.75rem; text-align: center;
}
.price.hero-price { border-color: var(--accent-gold); }
.price .amount {
  font-size: 2.6rem; font-weight: 700; letter-spacing: -0.02em;
  display: block; line-height: 1.1;
}
.price .per { color: var(--text-dim); font-size: 0.9rem; display: block; margin-bottom: 1rem; }
.price ul.plain { text-align: left; margin: 1.25rem 0; }

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

footer {
  border-top: 1px solid var(--border);
  margin-top: 2rem; padding: 2.5rem 1.5rem;
  color: var(--text-dim); font-size: 0.85rem;
}
footer .inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
}
footer .links { margin-left: auto; display: flex; gap: 1.1rem; flex-wrap: wrap; }
footer a { color: var(--text-muted); }

@media (max-width: 640px) {
  section { padding: 3rem 0; }
  .hero { padding: 3rem 0 2.5rem; }
  footer .links { margin-left: 0; }
}

/* ---------------------------------------------------------------------------
   THE EMAIL GATE
   A native <dialog>, so focus trapping, Escape and the backdrop are the
   browser's job rather than three more things to get wrong.
   --------------------------------------------------------------------------- */
#gate {
  border: 1px solid var(--line, #2a3242);
  border-radius: 12px;
  background: var(--surface, #0f1520);
  color: inherit;
  padding: 0;
  max-width: 30rem;
  width: calc(100% - 2rem);
}

#gate::backdrop { background: rgb(0 0 0 / 62%); }

.gate-form { padding: 1.5rem; display: grid; gap: 0.75rem; }
.gate-form h2 { margin: 0; font-size: 1.15rem; }
.gate-lead { margin: 0; opacity: 0.78; font-size: 0.92rem; line-height: 1.5; }
.gate-label { font-size: 0.85rem; opacity: 0.78; }

#gate-email {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--line, #2a3242);
  background: rgb(0 0 0 / 35%);
  color: inherit;
  font: inherit;
}

#gate-email:focus-visible { outline: 2px solid var(--accent, #f5b642); outline-offset: 1px; }

/* ⚠ NOT RED. A rejected address is usually a typo, not a failure — the tone
   that gets it corrected is "here is what is wrong", not an alarm. */
.gate-error {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--accent, #f5b642);
}

.gate-fix {
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.gate-actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 0.25rem; }
.gate-actions .btn { cursor: pointer; }
.gate-actions .btn[disabled] { opacity: 0.6; cursor: default; }

/* The two page buttons are <button> now, not <a> — see gate.js for why. */
button.btn { font: inherit; cursor: pointer; }

/* ---------------------------------------------------------------------------
   /thanks — the moment after paying
   --------------------------------------------------------------------------- */
.keybox {
  margin: 1.25rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--accent, #f5b642);
  border-radius: 10px;
  background: rgb(245 182 66 / 7%);
}

.keybox-label { display: block; font-size: 0.82rem; opacity: 0.8; margin-bottom: 0.5rem; }

.keybox-row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }

/* ⚠ SELECTABLE AND WRAPPING. A key somebody cannot select is a key they must
   retype, and a key that overflows its box on a phone is one they cannot read. */
.keybox-row code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  user-select: all;
  word-break: break-all;
  flex: 1 1 16rem;
}

.steps { line-height: 1.7; padding-left: 1.2rem; }
.steps li { margin-bottom: 0.4rem; }

/* ---------------------------------------------------------------------------
   The hero board
   --------------------------------------------------------------------------- */
.hero-shot {
  margin: 2rem 0 0;
  border: 1px solid var(--line, #2a3242);
  border-radius: 10px;
  overflow: hidden;
  /* The capture's own background, so the frame does not show a seam against the
     page while the image is still decoding. */
  background: #2a1330;
}

/* ⚠ `display:block` MATTERS. An inline <img> sits on the text baseline and
   leaves a few pixels of background under it, which reads as a misaligned frame
   rather than as the descender space it actually is. */
.hero-shot img { display: block; width: 100%; height: auto; }