/* ==========================================================================
   SILNS — marketing.css

   Loaded after global.css on the public pages: home, privacy, terms and 404.
   Nav, hero, feature rows, pricing, FAQ, footer, and the prose layout the
   long-form pages use.

   The public site is dark, always. Not as a style choice — as an honest one.
   SILNS is used in rooms with the lights down, and the page you decide on it
   from should look like the room you will use it in.

   One accent (--accent). One serif line (the tagline). Sections divided by
   hairlines rather than boxed into cards. The hero is a working timer.

   Mobile first. The rules below describe a phone; every width query lives in
   the Breakpoints section at the foot of the file, in ascending order.
   ========================================================================== */

.marketing {
  --bg: var(--void);
  --surface: #121110;
  --surface-raised: #191715;
  background: var(--bg);
}

/* --- Nav ---------------------------------------------------------------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) 0;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ui-transition);
}

.site-nav[data-scrolled="true"] { border-bottom-color: var(--line); }

.site-nav .brand--compact { --lock: 0.9375rem; }

.nav-actions { display: flex; align-items: center; gap: var(--space-2); }

/* On a narrow phone the bar has to choose between the name and the button.
   The button wins, so the nav starts as the mark alone with only the primary
   action beside it. Both come back at the breakpoints below. */
.site-nav .brand-text { display: none; }
.nav-actions .btn:not(.btn--primary) { display: none; }

/* --- Section rhythm ----------------------------------------------------- */

.section {
  padding-block: var(--space-9);
  border-top: 1px solid var(--line);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--measure);
  margin-bottom: var(--space-8);
}

.section-head h2 {
  font-size: var(--text-2xl);
  font-weight: 200;
  letter-spacing: -0.03em;
}

/* --- Hero --------------------------------------------------------------- */

.hero {
  padding-block: clamp(3rem, 2rem + 6vw, 7rem) var(--space-9);
  display: grid;
  gap: clamp(var(--space-7), 5vw, var(--space-9));
  align-items: center;
  grid-template-columns: 1fr;
}

.hero-copy { display: flex; flex-direction: column; gap: var(--space-5); }

.hero h1 {
  font-size: var(--text-3xl);
  font-weight: 200;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.hero-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hero-brand .wordmark {
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  font-weight: 200;
  letter-spacing: 0.42em;
  margin-inline-end: -0.42em;
  align-self: start;
}

.hero .tagline { font-size: var(--text-lg); }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.hero-note {
  font-size: var(--text-sm);
  color: var(--ink-faint);
}

/* --- The hero demo: a live SILNS screen --------------------------------- */

/* This is the one element the page is remembered by. It is not a screenshot;
   it is the product, running, counting real seconds while you read about it. */

.demo {
  display: grid;
  gap: clamp(var(--space-4), 3vw, var(--space-6));
  align-items: stretch;
}

.demo-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-height: clamp(17rem, 34vw, 24rem);
  padding: var(--space-7) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
  transition: background-color var(--calm-transition), border-color var(--calm-transition);
}

.demo-screen[data-complete="true"] {
  background-color: var(--surface-raised);
  border-color: var(--line-strong);
}

.demo-label {
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color var(--calm-transition);
}

.demo-time {
  font-family: var(--font-display);
  font-size: clamp(3.75rem, 12vw, 6.5rem);
  font-weight: 200;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--ink);
  transition: color var(--calm-transition);
}

.demo-caption {
  grid-column: 1 / -1;
  font-size: var(--text-xs);
  color: var(--ink-faint);
  text-align: center;
  letter-spacing: 0.04em;
}

/* --- Audience list ------------------------------------------------------ */

/* Who it is for, set as a plain run of names. A grid of icon cards would say
   "SaaS"; a list of people says "this was built for you". */
/* Separator dots were tried here and removed: on a wrapping list they leave a
   dot dangling at the end of every line, which reads as a mistake. Space does
   the same job and never dangles. */
.audience {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  max-width: 52rem;
  list-style: none;
  padding: 0;
  font-size: var(--text-lg);
  color: var(--ink-muted);
}

/* --- Feature rows ------------------------------------------------------- */

.features { display: flex; flex-direction: column; }

.feature {
  display: grid;
  gap: var(--space-4) var(--space-7);
  padding-block: var(--space-7);
  border-top: 1px solid var(--line);
  align-items: start;
}

.feature:first-child { border-top: 0; padding-top: 0; }

.feature h3 {
  font-size: var(--text-lg);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
}

.feature p { color: var(--ink-muted); max-width: var(--measure); }

.feature-detail {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink-faint);
}

/* --- Preset examples ---------------------------------------------------- */

/* Hairlines are drawn on the cells, not by a coloured container showing
   through a 1px gap. With five presets and a four-column row, that technique
   would paint the empty sixth cell as a solid block. */
.presets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.preset-example {
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.preset-example h3 {
  font-size: var(--text-base);
  font-weight: 400;
  letter-spacing: 0;
}

.preset-duration {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 200;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--ink);
}

/* --- Devices ------------------------------------------------------------ */

.devices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
}

.devices li {
  padding: 0.45em 1em;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

/* --- Price -------------------------------------------------------------- */

.price-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
  padding: var(--space-8) var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.price-panel .price-figure {
  font-size: clamp(3rem, 2rem + 5vw, 5rem);
  font-weight: 200;
}

.price-panel .price-term { font-size: var(--text-base); }

.price-terms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  padding: 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.price-terms li { display: flex; align-items: center; gap: var(--space-3); }

.price-terms li:not(:last-child)::after {
  content: "";
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--line-strong);
}

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

.faq { display: flex; flex-direction: column; max-width: 46rem; }

.faq details {
  border-top: 1px solid var(--line);
  padding: var(--space-5) 0;
}

.faq details:last-of-type { border-bottom: 1px solid var(--line); }

.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-lg);
  color: var(--ink);
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--ink-faint);
  flex: none;
  transition: transform var(--ui-transition);
}

.faq details[open] summary::after { content: "−"; }

.faq p {
  margin-top: var(--space-4);
  color: var(--ink-muted);
  max-width: var(--measure);
}

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  padding-block: var(--space-8) var(--space-7);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--ink-faint);
}

.site-footer .brand--full { --lock: 1.25rem; }

.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.footer-links a { text-decoration: none; color: var(--ink-muted); }
.footer-links a:hover { color: var(--ink); }

/* --- Page-load sequence ------------------------------------------------- */

@keyframes rise {
  to { opacity: 1; transform: none; }
}

/* --- Legal / long-form pages -------------------------------------------- */

.prose {
  max-width: var(--measure);
  padding-block: var(--space-8);
  color: var(--ink-muted);
}

.prose h1 { margin-bottom: var(--space-6); color: var(--ink); }
.prose h2 {
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
  font-size: var(--text-lg);
  color: var(--ink);
}
.prose p + p { margin-top: var(--space-4); }
.prose ul { margin-top: var(--space-3); padding-left: var(--space-5); }
.prose li { margin-bottom: var(--space-2); }

/* ==========================================================================
   Breakpoints — mobile first, ascending
   ========================================================================== */

/* --- 26rem · past the narrowest phones ---------------------------------- */

@media (min-width: 26rem) {
  /* Room for the wordmark beside the mark again. */
  .site-nav .brand-text { display: flex; }
}

/* --- 34rem · large phones and up ---------------------------------------- */

@media (min-width: 34rem) {
  /* Room for the secondary nav actions beside the primary one. */
  .nav-actions .btn:not(.btn--primary) { display: inline-flex; }
}

/* --- 48rem · tablets and up --------------------------------------------- */

@media (min-width: 48rem) {
  /* Feature rows go from stacked to label-beside-body. */
  .feature { grid-template-columns: 14rem minmax(0, 1fr); }
}

/* --- 62rem · desktop and up --------------------------------------------- */

@media (min-width: 62rem) {
  /* The hero splits: copy on the left, the live timer on the right. */
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
}

/* ==========================================================================
   Preferences
   ========================================================================== */

/* One orchestrated entrance, once, on the hero only. Nothing else on the page
   animates in on scroll. */
@media (prefers-reduced-motion: no-preference) {
  .rise {
    opacity: 0;
    transform: translateY(12px);
    animation: rise 900ms var(--ease) forwards;
    animation-delay: var(--rise-delay, 0ms);
  }
}