/* First-run onboarding page. Shares the 2.0.0 palette and type scale with v2.css;
   only the page-specific composition lives here. */
:root { color-scheme: dark; }

.welcome-main {
  padding-block: 152px 96px;
}

/* ---------- Hero: narrative left, setup panel right ---------- */
.w-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
  gap: 40px 52px;
  align-items: start;
}

/* Ambient light behind the hero.
   `closest-side` is the key: it inscribes each ellipse so it reaches 0 exactly at
   the nearest edge of this layer. The layer is also far larger than the hero, so
   the point where the gradient hits zero always falls outside the visible area —
   which is what previously produced a hard rectangular boundary on wide screens
   (the old fixed radii were still ~20-35% opaque where the box ended). */
.w-hero::before {
  content: '';
  position: absolute;
  inset: -240px -22% -180px -22%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 36% 44%, rgb(73 52 212 / .26), transparent),
    radial-gradient(closest-side at 62% 26%, rgb(22 217 255 / .05), transparent),
    radial-gradient(closest-side at 74% 76%, rgb(169 76 255 / .07), transparent);
}

.w-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 11px;
  border: 1px solid rgb(22 217 255 / .35);
  border-radius: 999px;
  background: rgb(18 24 68 / .72);
  box-shadow: 0 6px 22px rgb(0 0 0 / .35), 0 0 22px rgb(22 217 255 / .12);
  color: var(--ink);
  font: 600 11px/1.4 'JetBrains Mono', monospace;
  letter-spacing: .06em;
}
.w-badge svg { width: 16px; height: 16px; color: var(--cyan); flex-shrink: 0; }
.w-badge span { color: var(--muted); font-weight: 500; letter-spacing: .04em; }
.w-badge span::before { content: ''; display: inline-block; width: 1px; height: 10px; margin: 0 10px -1px 8px; background: var(--line); }

.w-hero h1 {
  margin-top: 24px;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -.05em;
}
.w-hero h1 > span {
  background: linear-gradient(110deg, #ffffff 0%, #d8d9ff 30%, #16d9ff 65%, #a94cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* The copy fills its column (no void before the panel); the paragraph itself is
   width-capped so the measure stays readable. */
.w-lead {
  max-width: 600px;
  margin-top: 20px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.85;
}
.w-lead strong { color: var(--ink); font-weight: 600; }
/* One quiet action only — the setup panel beside it is the primary next step,
   so a second CTA here would just compete with it. */
.w-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 24px;
}
.w-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 26px;
}
.w-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgb(18 24 68 / .5);
  color: var(--muted);
  font-size: 11px;
}
.w-trust svg { width: 14px; height: 14px; color: var(--cyan); flex-shrink: 0; }

/* ---------- Section shell ---------- */
.w-section { margin-top: 84px; scroll-margin-top: 120px; }
/* The hero already ends on the setup panel, so the first section needs far less
   air above it than the sections that follow. */
.w-hero + .w-section { margin-top: 54px; }
.w-section + .w-section { border-top: 1px solid var(--line); padding-top: 62px; }
.w-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; }
.w-head > div { max-width: 620px; }
.w-head h2 { margin-top: 14px; font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -.045em; line-height: 1.2; }
.w-head p { margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.w-section-body { margin-top: 30px; }

/* ---------- Setup panel (lives inside the hero) ---------- */
.w-setup-panel {
  scroll-margin-top: 120px;
  padding: 26px 24px 24px;
  border: 1px solid rgb(145 164 255 / .24);
  border-radius: 14px;
  background: linear-gradient(150deg, rgb(18 24 68 / .74), rgb(12 16 51 / .86));
  box-shadow: 0 18px 44px rgb(0 0 0 / .38), inset 0 1px 0 rgb(255 255 255 / .05);
}
.w-setup-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.w-setup-head .eyebrow { font-size: 9.5px; }
.w-setup-panel .w-progress-text { display: block; margin-bottom: 0; font-size: 9.5px; }
.w-setup-panel .w-progress-bar { margin-top: 14px; }
.w-progress-text {
  color: var(--muted);
  font: 10px/1.6 'JetBrains Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.w-progress-bar {
  height: 7px;
  border-radius: 999px;
  background: rgb(145 164 255 / .2);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / .3);
  overflow: hidden;
}
.w-progress-bar > i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--lavender));
  box-shadow: 0 0 10px rgb(22 217 255 / .45);
  transition: width .45s var(--ease);
}

/* Rows, not cards — the panel supports the headline rather than rivalling it. */
.w-tasks { display: grid; gap: 0; margin-top: 20px; }
.w-task {
  display: flex;
  gap: 12px;
  padding: 17px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
}
.w-task:first-child { border-top: 0; padding-top: 0; }
.w-task:last-child { padding-bottom: 0; }
.w-task:focus-within { border-top-color: var(--cyan); }
/* The step number carries the accent; the label stays quiet. */
.w-setup-panel .w-task-step { gap: 6px; font-size: 9.5px; letter-spacing: .16em; color: var(--steel); }
.w-task-step b { color: var(--cyan); font-weight: 700; }
.w-setup-panel .w-task-title { margin-top: 7px; font-size: 14px; }
.w-setup-panel .w-task-text { margin-top: 7px; font-size: 11.5px; line-height: 1.7; }
.w-setup-panel .w-browsers { margin-top: 11px; gap: 6px; }
.w-setup-panel .w-browser { min-height: 28px; padding: 4px 10px; font-size: 10px; }
.w-setup-panel .w-hints { margin-top: 10px; }
.w-setup-panel .w-hint { padding: 9px 11px; font-size: 11px; line-height: 1.7; }
.w-setup-panel .w-tablist { margin-top: 10px; gap: 5px; }
.w-setup-panel .w-tablist code { padding: 3px 7px; font-size: 9.5px; }
.w-task-input {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  border: 1px solid rgb(145 164 255 / .4);
  border-radius: 6px;
  background-color: #0a0e28;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color .25s, border-color .25s;
}
/* The tick is a background image rather than a pseudo-element: browsers do not
   render ::before/::after consistently on replaced elements such as <input>. */
.w-task-input:checked {
  border-color: var(--cyan);
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23081030' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.6 4.6 4.6L19 7'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--cyan), var(--blue));
  background-size: 14px 14px, auto;
}
.w-task-body { min-width: 0; flex: 1; }
.w-task-title {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.02em;
  cursor: pointer;
}
.w-task-text { margin-top: 9px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.w-task-text strong { color: var(--accent); font-weight: 600; }
.w-task-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cyan);
  font: 10px/1.6 'JetBrains Mono', monospace;
  letter-spacing: .12em;
}
.w-task.is-done { background: linear-gradient(140deg, #101640, #0a0e28); border-color: rgb(22 217 255 / .28); }
/* Inside the hero panel rows stay flat when done — only the separator picks up
   the accent. (Equal specificity to the rule above, so this must come after.) */
.w-setup-panel .w-task.is-done { background: none; border-top-color: rgb(22 217 255 / .3); }
.w-task.is-done .w-task-title { color: var(--muted); }
.w-task.is-done .w-task-step { color: var(--steel); }
.w-done-chip {
  margin-left: 10px;
  padding: 3px 8px;
  border: 1px solid rgb(22 217 255 / .35);
  border-radius: 999px;
  color: var(--cyan);
  font: 9px/1.5 'JetBrains Mono', monospace;
  letter-spacing: .1em;
  vertical-align: 2px;
}

/* Browser picker inside step 1 */
.w-browsers { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.w-browser {
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid rgb(145 164 255 / .28);
  border-radius: 8px;
  background: rgb(18 24 68 / .6);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  transition: background .25s, border-color .25s, color .25s;
}
.w-browser:hover { color: var(--ink); border-color: rgb(145 164 255 / .5); }
.w-browser[aria-pressed='true'] {
  background: rgb(22 217 255 / .14);
  border-color: var(--cyan);
  color: var(--ink);
}
.w-hints { margin-top: 13px; }
.w-hint {
  padding: 12px 15px;
  border-left: 2px solid var(--cyan);
  border-radius: 0 8px 8px 0;
  background: rgb(22 217 255 / .07);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.8;
}
.w-hint strong { color: var(--ink); font-weight: 600; }
.w-tablist { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.w-tablist code {
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgb(73 52 212 / .16);
  color: var(--accent);
  font: 11px/1.6 'JetBrains Mono', monospace;
}

/* ---------- Shield cards ---------- */
.w-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.w-card {
  padding: 22px 20px;
  border: 1px solid rgb(145 164 255 / .2);
  border-radius: 12px;
  background: linear-gradient(150deg, #121844, #0c1033);
  transition: border-color .3s, transform .3s var(--ease);
}
.w-card:hover { border-color: rgb(22 217 255 / .4); transform: translateY(-3px); }
.w-card-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgb(145 164 255 / .3);
  border-radius: 9px;
  background: linear-gradient(135deg, rgb(22 217 255 / .18), rgb(169 76 255 / .2));
  color: var(--cyan);
}
.w-card-icon svg { width: 18px; height: 18px; }
.w-card h3 { margin-top: 16px; font-size: 15px; letter-spacing: -.025em; }
.w-card p { margin-top: 9px; color: var(--muted); font-size: 12px; line-height: 1.8; }
.w-card-platform { display: block; margin-top: 14px; color: var(--steel); font: 9px/1.6 'JetBrains Mono', monospace; letter-spacing: .1em; }

/* ---------- Permissions ---------- */
.w-permissions { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 26px; }
.w-note {
  padding: 22px 24px;
  border: 1px solid rgb(145 164 255 / .22);
  border-left: 2px solid var(--cyan);
  border-radius: 0 12px 12px 0;
  background: linear-gradient(120deg, rgb(73 52 212 / .18), rgb(12 16 51 / .8));
}
.w-note h3 { font-size: 16px; letter-spacing: -.03em; }
.w-note p { margin-top: 12px; color: var(--muted); font-size: 12.5px; line-height: 1.85; }
.w-note p + p { margin-top: 11px; }
.w-note .text-link { margin-top: 16px; font-size: 11.5px; }
.w-perm-list { display: grid; gap: 10px; align-content: start; }
.w-perm {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 14px;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgb(12 16 51 / .7);
}
.w-perm dt { color: var(--cyan); font: 11px/1.7 'JetBrains Mono', monospace; white-space: nowrap; }
.w-perm dd { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.w-perm code, .w-note code { font: .9em 'JetBrains Mono', monospace; color: var(--accent); overflow-wrap: anywhere; }
@media (min-width: 700px) {
  .w-perm { grid-template-columns: 150px minmax(0, 1fr); align-items: baseline; }
}

/* ---------- Pro upgrade panel ----------
   One cohesive panel: narrative on the left, purchase block on the right, split by
   a hairline divider. Premium comes from composition, spacing and typography —
   not from extra decoration. Same palette, radius and icon language as the rest
   of the page; just allowed a slightly richer surface. */
.w-pro-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  border: 1px solid rgb(22 217 255 / .28);
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 0% 0%, rgb(73 52 212 / .3), transparent 58%),
    radial-gradient(ellipse at 100% 100%, rgb(22 217 255 / .09), transparent 55%),
    linear-gradient(140deg, #121844, #0a0e28);
  box-shadow: 0 20px 50px rgb(0 0 0 / .4), inset 0 1px 0 rgb(255 255 255 / .05), 0 0 32px rgb(73 52 212 / .14);
}

/* --- Left: identity, promise, benefits --- */
.w-pro-main { padding: 32px 34px; }
.w-pro-main .pro-tag { margin-bottom: 0; }
.w-pro-panel h2 { margin-top: 15px; font-size: clamp(24px, 2.6vw, 33px); font-weight: 700; letter-spacing: -.045em; line-height: 1.2; }
.w-pro-lede { margin-top: 13px; max-width: 530px; color: var(--muted); font-size: 13px; line-height: 1.85; }
.w-pro-lede strong { color: var(--ink); font-weight: 600; }
.w-pro-unlocks { margin-top: 26px; color: var(--steel); font: 9px/1.5 'JetBrains Mono', monospace; letter-spacing: .14em; text-transform: uppercase; }
.w-pro-benefits { display: grid; gap: 11px; margin-top: 14px; }
.w-pro-benefits li { display: flex; align-items: center; gap: 10px; color: var(--accent); font-size: 12.5px; line-height: 1.5; }
.w-pro-benefits svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--cyan); }

/* --- Right: the purchase block --- */
.w-pro-buy {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 0;
  padding: 32px 28px;
  border-left: 1px solid rgb(145 164 255 / .22);
  background: linear-gradient(165deg, rgb(22 217 255 / .07), rgb(73 52 212 / .12));
}
.w-pro-buy-label { color: var(--cyan); font: 9px/1.5 'JetBrains Mono', monospace; letter-spacing: .16em; text-transform: uppercase; }
.w-pro-buy-price { display: flex; align-items: baseline; gap: 2px; margin-top: 12px; }
.w-pro-currency { align-self: flex-start; margin-top: 9px; color: var(--muted); font-size: 21px; font-weight: 600; }
.w-pro-figure { font-size: 46px; font-weight: 800; letter-spacing: -.055em; line-height: 1; color: var(--ink); }
.w-pro-buy-note { margin-top: 9px; color: var(--muted); font-size: 10.5px; line-height: 1.6; }
.w-pro-buy-cta { width: 100%; gap: 10px; margin-top: 20px; }
.w-pro-buy-fine { margin-top: 16px; color: var(--muted); font: 9px/1.7 'JetBrains Mono', monospace; letter-spacing: .05em; }
.w-pro-buy-link { margin-top: 12px; font-size: 10.5px; }

/* ---------- Help ---------- */
.w-help { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.w-help a {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 118px;
  padding: 20px;
  border: 1px solid rgb(145 164 255 / .2);
  border-radius: 12px;
  background: linear-gradient(150deg, #121844, #0c1033);
  transition: transform .25s var(--ease), border-color .25s, background .25s;
}
.w-help a:hover {
  transform: translateY(-3px);
  border-color: rgb(22 217 255 / .45);
  background: linear-gradient(150deg, #16205a, #0c1033);
}
.w-help svg { width: 18px; height: 18px; color: var(--cyan); }
.w-help strong { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -.02em; }
.w-help span { color: var(--muted); font-size: 11.5px; line-height: 1.7; }
.w-help em {
  margin-top: auto;
  color: var(--cyan);
  font-size: 10px;
  font-style: normal;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: .1em;
}
.w-support {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.85;
}
.w-support a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Responsive ---------- */
@media (max-width: 1150px) {
  .welcome-main { padding-block: 146px 80px; }
  .w-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-help { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-permissions { grid-template-columns: 1fr; gap: 18px; }
  .w-hero { grid-template-columns: minmax(0, 1fr) minmax(330px, 404px); gap: 36px 40px; }
}
/* Tablet: the hero stacks and the setup panel moves under the copy, capped so it
   doesn't stretch into an over-wide band. Same breakpoint as the Pro panel. */
@media (max-width: 1000px) {
  .w-hero { grid-template-columns: 1fr; gap: 34px; }
  .w-setup-panel { max-width: 620px; }
  .w-pro-panel { grid-template-columns: 1fr; }
  .w-pro-buy { border-left: 0; border-top: 1px solid rgb(145 164 255 / .22); }
}
@media (max-width: 900px) {
  .w-section { margin-top: 62px; }
  .w-section + .w-section { padding-top: 46px; }
}
@media (max-width: 600px) {
  .welcome-main { padding-block: 122px 58px; }
  .w-hero { gap: 28px; }
  .w-hero h1 { font-size: clamp(32px, 9vw, 42px); }
  .w-lead { font-size: 14px; margin-top: 18px; }
  .w-actions { margin-top: 24px; gap: 10px 18px; }
  .w-actions .button { width: 100%; min-width: 0; }
  .w-trust { margin-top: 24px; }
  .w-setup-panel { padding: 18px 16px; }
  .w-head { align-items: flex-start; }
  .w-cards { grid-template-columns: 1fr; gap: 10px; }
  .w-help { grid-template-columns: 1fr; gap: 10px; }
  .w-help a { min-height: 0; }
  .w-perm { padding: 14px 16px; }
  .w-pro-main { padding: 24px 20px; }
  .w-pro-buy { padding: 24px 20px; }
  .w-pro-figure { font-size: 38px; }
  .w-pro-panel h2 br { display: none; }
}
@media (max-width: 360px) {
  .w-badge { font-size: 10px; padding: 7px 11px 7px 9px; }
  .w-card { padding: 16px; }
  .w-setup-panel { padding: 16px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .w-card:hover, .w-help a:hover { transform: none; }
  .w-progress-bar > i, .w-task-input { transition: none; }
}