/* ============================================================================
   Byte marketing site — page chrome.
   The device itself lives in device.css. This file styles everything around it.

   The one deliberate difference from the earlier design bundle: the primary
   button is the app's ACTION gradient (COLORS.ctaFrom -> ctaTo, ink onCta), not
   mint. In Byte, mint means "correct answer". Using it for buttons taught the
   wrong colour language before a visitor even installed.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Belt and braces against the classic mobile sideways-scroll bug. `clip`
     rather than `hidden` so it does not silently become a scroll container and
     break position: sticky on the nav. */
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg0);
  color: var(--text-hi);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* the app's backdrop, at page scale */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: var(--dot-grid);
  background-size: var(--dot-grid-size);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

body > * { position: relative; z-index: 1; }

h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; letter-spacing: -0.6px; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
/* height:auto is load-bearing, not cosmetic. Every <img> carries width and
   height ATTRIBUTES so the browser can reserve the right box before the file
   arrives. Those attributes also act as presentational hints, so any element
   whose width we set in CSS while leaving height alone renders at the
   attribute's height: the koala came out 104 wide by 384 tall. Setting height:auto
   here lets the attributes do their job (aspect ratio) without dictating the
   rendered height. */
img { max-width: 100%; display: block; height: auto; }

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

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Keyboard users get past the nav in one tab. Visible only when focused. */
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--bg2);
  border: 1px solid var(--stroke-bright);
  color: var(--text-hi);
  font-weight: 600;
  font-size: 14px;
  transition: top 0.15s ease;
}

.skip:focus { top: 12px; color: var(--text-hi); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: var(--wrap-narrow); }

.eyebrow {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent);
}

.lede {
  font-size: 16.5px;
  line-height: 1.58;
  font-weight: 400;
  color: var(--text-mid);
}

/* --------------------------------------------------------------------- nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 62px;
  background: rgba(15, 23, 51, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--stroke-soft);
}

.nav-in { height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text-hi); }

.brand-mark {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--accent-bright), var(--accent));
  color: var(--bg0);
  font-weight: 700;
  font-size: 14px;
}

.brand span:last-child {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 5px;
  color: var(--accent-bright);
}

.nav-links { display: flex; align-items: center; gap: 26px; }

.nav-links a:not(.btn) {
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-mid);
}

.nav-links a:not(.btn):hover { color: var(--text-hi); }

/* ---- mobile menu (native <details>, no JavaScript) --------------------- */

.nav-menu { display: none; position: relative; }

.nav-menu > summary {
  list-style: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--bg2);
  border: 1px solid var(--stroke-soft);
  display: grid;
  place-items: center;
}

.nav-menu > summary::-webkit-details-marker { display: none; }

.burger { display: grid; gap: 4px; width: 17px; }
.burger i { display: block; height: 2px; border-radius: 1px; background: var(--text-hi); }

/* Open state: swap the top and bottom bars for a cross. */
.nav-menu[open] > summary .burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-menu[open] > summary .burger i:nth-child(2) { opacity: 0; }
.nav-menu[open] > summary .burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 12px);
  width: max-content;
  min-width: 208px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--stroke-soft);
  background: var(--bg1);
  box-shadow: 0 24px 46px -18px rgba(0, 0, 0, 0.8);
}

.nav-menu-panel a:not(.btn) {
  padding: 11px 12px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-mid);
}

.nav-menu-panel a:not(.btn):hover { background: var(--bg2); color: var(--text-hi); }
.nav-menu-panel .btn { margin-top: 6px; justify-content: center; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 26px;
  border-radius: 16px;
  border: 0;
  background: linear-gradient(150deg, var(--cta-to), var(--cta-from));
  color: var(--on-cta);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.2px;
  cursor: pointer;
  box-shadow: 0 12px 30px -10px var(--cta-from);
}

.btn:hover { color: var(--on-cta); filter: brightness(1.06); }

.btn-sm { padding: 9px 16px; font-size: 13px; border-radius: 11px; box-shadow: none; }

.btn-ghost {
  background: var(--bg2);
  border: 1px solid var(--stroke-soft);
  color: var(--text-hi);
  box-shadow: none;
}

.btn-ghost:hover { background: var(--bg3); color: var(--text-hi); filter: none; }

/* ------------------------------------------------------------------- stage */

.stage-sec {
  padding: 58px 0 90px;
  background: radial-gradient(110% 44% at 50% -4%, rgba(30, 42, 92, 0.9) 0%, rgba(15, 23, 51, 0) 68%);
}

.head { max-width: 640px; margin: 0 auto; text-align: center; }

.head h1 {
  margin-top: 14px;
  font-size: clamp(30px, 4.2vw, 44px);
  line-height: 1.1;
}

.head h1 em { font-style: normal; color: var(--accent-bright); }

.head .lede { margin: 16px auto 0; max-width: 470px; }

.head-cta { margin-top: 26px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 48px;
}

/* Absolutely positioned inside a flex container, so it needs an explicit
   centre: without left/transform it would resolve to the flex start edge.
   max-width keeps it from pushing a horizontal scrollbar on narrow screens. */
.stage-glow {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 640px;
  max-width: 100%;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(143, 168, 255, 0.16) 0%, rgba(143, 168, 255, 0.04) 52%, transparent 72%);
  pointer-events: none;
}

/* callouts flanking the phone */
.calls { display: contents; }

.call {
  position: absolute;
  width: 280px;
  z-index: 3;
}

.call.l { right: 50%; margin-right: 238px; text-align: right; }
.call.r { left: 50%; margin-left: 238px; }

.call b {
  display: block;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--accent);
}

.call h3 { margin-top: 5px; font-size: 17px; line-height: 1.28; }
.call p { margin-top: 7px; font-size: 14px; line-height: 1.5; color: var(--text-mid); }

.call .lead {
  position: absolute;
  top: 13px;
  width: 46px;
  height: 1px;
}

.call.l .lead { right: -54px; background: linear-gradient(90deg, rgba(140, 165, 240, 0.1), var(--stroke-bright)); }
.call.r .lead { left: -54px; background: linear-gradient(90deg, var(--stroke-bright), rgba(140, 165, 240, 0.1)); }

.call .lead::after {
  content: '';
  position: absolute;
  top: -2.5px;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--accent);
}

.call.l .lead::after { right: -3px; }
.call.r .lead::after { left: -3px; }

/* Callout positions, PER SET. The leader line sits 13px below a card's top,
   so each top is its target's centre minus 13, in stage coordinates (device
   top = 0, bezel 10, so stage y = screen y + 10).

   Targets, at the INITIAL state (scroll 0, Home showing), measured from the
   device stack: status bar 0..47, top bar ..113, current-module card 119..253
   (centre 186), path rows 110px tall from y 350, so the Arrays & Hashing node
   centres at 405 and the Sliding Window node at 625. On the question screen
   the XP counter centres at ~77 and the prompt block at ~150; on the lesson
   screen the Next button centres at ~702. */

.call-set[data-for="home"] .c1 { top: 183px; }   /* centre of the current-module card */
.call-set[data-for="home"] .c2 { top: 402px; }   /* centre of the Arrays & Hashing box */
.call-set[data-for="home"] .c3 { top: 622px; }   /* centre of the Sliding Window box */

.call-set[data-for="lesson"] .c1 { top: 150px; }
.call-set[data-for="lesson"] .c2 { top: 696px; } /* the Next button */

.call-set[data-for="question"] .c1 { top: 74px; }  /* the XP counter */
.call-set[data-for="question"] .c2 { top: 147px; } /* the question prompt */
.call-set[data-for="question"] .c3 { top: 420px; } /* the Here's why header */

/* Only the set belonging to the visible screen is rendered. display:contents
   keeps each .call positioned against .stage rather than against the set. */
.call-set { display: none; }
.call-set[data-active] { display: contents; }

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

.sec { padding: 84px 0; border-top: 1px solid var(--stroke-soft); }

.sec-head { max-width: 700px; }
.sec-head h2 { font-size: clamp(24px, 3.1vw, 34px); line-height: 1.16; }
.sec-head p { margin-top: 12px; font-size: 15.5px; color: var(--text-mid); }

/* feature grid */
.grid3 { margin-top: 34px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

.feat {
  border-radius: 18px;
  border: 1px solid var(--stroke-soft);
  background: linear-gradient(160deg, var(--bg2), var(--bg1));
  padding: 22px;
}

.feat-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--bg3);
  border: 1px solid var(--stroke-soft);
  margin-bottom: 14px;
}

.feat h3 { font-size: 17px; }
.feat p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--text-mid); }

/* rank ladder */
.ranks { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 8px; }

.rank-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tone) 34%, transparent);
  background: color-mix(in srgb, var(--tone) 10%, var(--bg1));
  font-weight: 600;
  font-size: 13px;
  color: var(--text-hi);
}

.rank-chip i { width: 8px; height: 8px; border-radius: 4px; background: var(--tone); }

.rank-chip.first { border-style: dashed; }

/* --------------------------------------------------------------------- doc */
/* Shared shell for the FAQ and, later, the privacy and terms pages. */

/* padding-BLOCK only. The shorthand `padding: 56px 0 84px` here set the
   horizontal padding to 0, overriding .wrap's gutter (same specificity, later
   in the file), so every doc page ran flush to the screen edges. On desktop
   .narrow's max-width hid it; on a phone it was the whole bug. */
.doc { padding-block: 56px 84px; }
.doc h1 { margin-top: 14px; font-size: clamp(28px, 4.2vw, 42px); line-height: 1.12; }
.doc > .lede { margin-top: 16px; max-width: 62ch; }

.faq-group {
  margin: 44px 0 10px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent);
}

.doc details {
  border-radius: 16px;
  border: 1px solid var(--stroke-soft);
  background: linear-gradient(160deg, var(--bg2), var(--bg1));
  margin-bottom: 8px;
}

.doc details[open] { border-color: var(--stroke-bright); }

.doc summary {
  list-style: none;
  cursor: pointer;
  padding: 17px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 600;
  font-size: 16px;
  color: var(--text-hi);
}

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

.doc summary::after {
  content: '+';
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1;
  color: var(--accent);
}

.doc details[open] summary::after { content: '\2013'; }

.doc details > p {
  padding: 0 22px 20px;
  max-width: 70ch;
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-mid);
}

/* ---- legal documents (privacy, terms) --------------------------------- */

.updated {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.4px;
  color: var(--text-mid);
}

.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 30px 0 8px;
}

.toc a {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--bg1);
  border: 1px solid var(--stroke-soft);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text-mid);
}

.toc a:hover { background: var(--bg3); color: var(--text-hi); }

.legal h2 {
  margin-top: 20px;
  padding-top: 30px;
  border-top: 1px solid var(--stroke-soft);
  font-size: 21px;
  scroll-margin-top: 78px;
}

.legal h3 {
  margin-top: 24px;
  font-size: 16px;
  color: var(--accent-bright);
}

.legal p,
.legal li {
  margin-top: 12px;
  max-width: 72ch;
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--text-mid);
}

.legal ul { margin-top: 6px; padding-left: 22px; list-style: disc; }
.legal li { padding-left: 4px; }
.legal li::marker { color: var(--accent); }
.legal strong { color: var(--text-hi); font-weight: 600; }

.legal table {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.legal th,
.legal td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px;
  border: 1px solid var(--stroke-soft);
  color: var(--text-mid);
  line-height: 1.55;
}

.legal th { background: var(--bg1); color: var(--text-hi); font-weight: 600; }

.table-scroll { overflow-x: auto; }

/* On narrow screens a three-column table crushes into single-word columns.
   A floor makes it scroll sideways inside its own box instead, which is what
   .table-scroll exists for. */
.table-scroll table { min-width: 540px; }

.callout {
  margin-top: 34px;
  border-radius: 16px;
  border: 1px solid var(--stroke-soft);
  background: var(--bg1);
  padding: 20px 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-mid);
}

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

.foot { border-top: 1px solid var(--stroke-soft); background: var(--bg0); }

.foot-cta {
  padding: 76px 0 66px;
  text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, rgba(30, 42, 92, 0.85) 0%, rgba(15, 23, 51, 0) 66%);
}

.foot-cta h2 { margin-top: 14px; font-size: clamp(24px, 3vw, 32px); max-width: 22ch; margin-inline: auto; line-height: 1.16; }
.foot-cta .btn { margin-top: 26px; min-width: 288px; }

.foot-in {
  padding: 26px 0 34px;
  border-top: 1px solid var(--stroke-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.foot-in small { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--text-mid); }

.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }

.foot-links a {
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-mid);
}

.foot-links a:hover { color: var(--text-hi); }

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

@media (max-width: 1240px) {
  .call { width: 232px; }
  .call.l { margin-right: 222px; }
  .call.r { margin-left: 222px; }
  .call p { font-size: 13.5px; }
}

/* Below this the callouts cannot flank the phone without colliding with it, so
   they become stacked cards underneath. */
@media (max-width: 1100px) {
  .stage { flex-direction: column; align-items: center; }

  /* Mobile shows the FULL feature list: all eight cards under the phone, in
     three labelled groups, always visible and never swapping. The phone above
     still runs its tour; the list below is the stable reference. The
     [data-active] toggling still fires for desktop; these rules outrank it
     (equal specificity, later in the file). */
  .calls { display: flex; flex-direction: column; gap: 40px; margin-top: 44px; width: 100%; max-width: 480px; }
  .calls .call-set,
  .calls .call-set[data-active] { display: flex; flex-direction: column; gap: 12px; width: 100%; }

  .call-set::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 2px;
  }

  .call { position: static; width: 100%; text-align: left; margin: 0; border-radius: 16px; border: 1px solid var(--stroke-soft); background: linear-gradient(160deg, var(--bg2), var(--bg1)); padding: 18px 20px; }
  /* position: static neutralises left/right but NOT margins, and the desktop
     side rules (.call.l / .call.r) carry 238px margins at higher specificity
     than the plain .call reset above. Without this, every card is shoved
     sideways and nothing is centred. */
  .call.l { text-align: left; margin: 0; }
  .call.r { margin: 0; }
  .call p { font-size: 14px; }
  .call .lead { display: none; }
  .grid3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .grid3 { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .nav-links { display: none; }
  .doc { padding-block: 40px 64px; }
  .doc h1 { font-size: clamp(26px, 7vw, 34px); }
  .legal h2 { font-size: 19px; }
  .legal p, .legal li { font-size: 15px; }
  .toc a { padding: 7px 12px; font-size: 12px; }
  .nav-menu { display: block; }
  .stage-sec { padding: 44px 0 70px; }
  .sec { padding: 62px 0; }
  .head-cta .btn { width: 100%; }
  .head-cta { flex-direction: column; }
  .foot-cta { padding: 62px 0 54px; }
  .foot-cta .btn { min-width: 0; width: 100%; }
  .foot-in { flex-direction: column; align-items: flex-start; gap: 22px; }
}

/* Small phones: tighten the gutter so the device keeps as much room as
   possible before it has to scale down (see device.css). */
@media (max-width: 430px) {
  :root { --gutter: 18px; }
  .head h1 { font-size: 28px; }
  .stage { margin-top: 34px; }
  .ranks { gap: 6px; }
  .rank-chip { font-size: 12px; padding: 7px 12px; }
}

@media (max-width: 375px) {
  :root { --gutter: 16px; }
}

@media (max-width: 340px) {
  :root { --gutter: 14px; }
}