/* Inner pages: questions, pricing, install, contact, sign in.
   Every size is a token from site.css (SPACING.md sections 3, 4, 7). */

/* The FAQ's soft pill sits under the rows (no ink layer needed). */
.slider.soft { z-index: 0; background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-2); }

/* ---------- Questions (section 7.5) ---------- */
.qa { position: relative; display: grid; gap: var(--sp-4); align-content: start; border-top: 1px solid var(--line); padding-top: var(--sp-8); }
.qa details { position: relative; z-index: 1; border-radius: var(--r-md); }
.qa summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16);
  padding: var(--in-s); font: var(--type-subtitle); letter-spacing: var(--track-subtitle);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary .pm {
  width: var(--h-xs); height: var(--h-xs); flex: none; border-radius: 50%;
  border: 1px solid var(--line-2); display: grid; place-items: center;
  transition: rotate var(--dur-move) var(--spring);
}
.qa details[open] summary .pm { rotate: 45deg; background: var(--pill); border-color: transparent; color: var(--pill-ink); }
/* 16 + 24 + 16: the answer clears the icon column; 648 of text plus that padding */
.qa .ans {
  padding: 0 calc(2 * var(--in-s) + var(--h-xs)) var(--in-s) var(--in-s);
  max-width: calc(var(--measure) + 3 * var(--in-s) + var(--h-xs));
  color: var(--text-2); font: var(--type-body);
}
.qa details[open] .ans { animation: ansIn var(--dur-move) var(--spring) both; }
@media (max-width: 767.98px) { .qa .ans { padding: 0 var(--in-s) var(--in-s); } }

/* Aside | content: side on columns 1-3, column 4 empty, questions on 5-12 */
.two { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); }
.two > .side { grid-column: 1 / span 3; }
.two > .qa { grid-column: 5 / span 8; }
.two .side { display: grid; gap: var(--row); align-content: start; align-self: start; }
.two .side .h2 { font: var(--type-title); letter-spacing: var(--track-title); }
@media (min-width: 1024px) { .two .side { position: sticky; top: calc(var(--h-bar) + var(--cta)); } }
@media (max-width: 1023.98px) {
  .two { grid-template-columns: minmax(0, 1fr); row-gap: var(--group); }
  .two > .side, .two > .qa { grid-column: 1; }
}

/* ---------- Fine print: joined cells ---------- */
.fine { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
@media (max-width: 767.98px) { .fine { grid-template-columns: minmax(0, 1fr); } }
.fine li { display: flex; gap: var(--sp-8); padding: var(--in-m); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--text-2); font: var(--type-body); }
.fine li svg { flex: none; width: 14px; height: 24px; }

/* ---------- Band ---------- */
.band {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-24); flex-wrap: wrap;
  padding: var(--in-l); border-radius: var(--r-xl); border: 1px solid var(--line-2);
  background: linear-gradient(120deg, rgba(42,91,224,.16), rgba(15,16,17,.4) 55%), var(--panel);
}
.band h2 { font: var(--type-title); letter-spacing: var(--track-title); }
@media (max-width: 767.98px) { .band { flex-direction: column; align-items: start; } }

/* ---------- Pricing (section 7.4) ---------- */
.tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
@media (max-width: 1199.98px) { .tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .tiers { grid-template-columns: minmax(0, 1fr); } }
.tier {
  position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 0;
  padding: var(--in-m); border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line);
  transition: translate var(--dur-move) var(--spring);
}
.tier::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--line-2); opacity: 0; transition: opacity var(--dur-fade) var(--ease-fade);
}
.tier:hover { translate: 0 calc(-1 * var(--sp-4)); }
.tier:hover::after { opacity: 1; }
.tier h3 { font: var(--type-subtitle); letter-spacing: var(--track-subtitle); }
.tier .price { margin-top: var(--row); font: var(--type-price); letter-spacing: var(--track-price); font-variant-numeric: tabular-nums; }
/* Every tier spans four rows of .tiers and shares them (subgrid): cards side by side keep their
   name, price, list and button on the same lines, so the four buttons sit in one row.
   A card alone in its row (S) is sized by its own content. */
@supports (grid-template-rows: subgrid) {
  .tier { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .tier .go { align-content: start; }
}
.tier .price small { margin-left: var(--sp-4); font: var(--type-small); font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.tier ul {
  list-style: none; margin: var(--split) 0 0; padding: var(--split) 0 0; border-top: 1px solid var(--line);
  display: grid; gap: var(--row); align-content: start; font: var(--type-small);
}
.tier li { display: flex; gap: var(--sp-8); }
.tier li svg { flex: none; width: 14px; height: 20px; }
.tier .go { margin-top: var(--block); display: grid; gap: var(--stack); }
.tier .go .btn { width: 100%; }
.tier.lead { border-color: rgba(157,184,255,.35); background: linear-gradient(180deg, rgba(42,91,224,.14), var(--panel) 40%); }

.ent {
  margin-top: var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-24); align-items: center;
  padding: var(--in-m); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel);
}
@media (max-width: 767.98px) { .ent { grid-template-columns: minmax(0, 1fr); justify-items: start; } }
.ent .price { margin-top: var(--row); font: var(--type-price); letter-spacing: var(--track-price); }
.ent p { margin-top: var(--row); max-width: var(--measure); color: var(--text-2); font: var(--type-body); }

.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
/* Separate borders keep every hairline inside its own cell, so the head is 41 (12 + 16 + 12 + 1) and every
   row 53 (16 + 20 + 16 + 1), on whole pixels. Fixed layout gives the four plan columns one width:
   the first column is span 4 minus the wrapper's two hairlines, so plan columns are whole pixels
   (XL 1126 - 382 = 4 x 186; L 934 - 318 = 4 x 154). M and S keep the automatic layout. */
table.cmp { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font: var(--type-small); font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) { table.cmp { table-layout: fixed; } .cmp thead th:first-child { width: 382px; } }
@media (min-width: 1024px) and (max-width: 1199.98px) { .cmp thead th:first-child { width: 318px; } }
.cmp th, .cmp td { padding: var(--sp-16) var(--in-m); text-align: left; border-bottom: 1px solid var(--line); }
.cmp thead th {
  position: sticky; top: 0; padding-block: var(--sp-12); background: var(--panel);
  font: var(--type-micro); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--text-3);
}
.cmp tbody th { font-weight: 500; color: var(--text-2); white-space: nowrap; }
.cmp tbody tr:last-child > * { border-bottom: 0; }
.cmp tbody tr:hover { background: rgba(255,255,255,.02); }
.cmp .no { color: var(--text-3); }

.addons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); }
@media (max-width: 767.98px) { .addons { grid-template-columns: minmax(0, 1fr); } }
.addon {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--sp-12) var(--sp-16);
  padding: var(--in-m); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel);
}
.addon b { display: block; font: var(--type-body); font-weight: 600; }
.addon > div > span { display: block; margin-top: var(--pair); color: var(--text-2); font: var(--type-small); }
.addon .p { font: var(--type-subtitle); letter-spacing: var(--track-subtitle); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Below XL the title and price no longer fit one line in every card, so both cards stack the price
   under the description (--stack) instead of one wrapping and one not. */
@media (max-width: 1199.98px) { .addon { flex-direction: column; align-items: start; } }

/* ---------- Install (section 7.7) ----------
   All four panels share one grid cell, so the block keeps the tallest panel's height and
   nothing below it moves. The old panel fades out; the new one enters with ansIn.
   align-content: start keeps a shorter panel's rows at their content height, so the steps -> code
   gap is --in-l on every tab and the spare height sits at the bottom of the panel. */
.inst { display: grid; gap: var(--block); padding-bottom: var(--sec); }
.inst > .panel { grid-row: 2; grid-column: 1; }
.panel {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--in-l); align-content: start;
  padding: var(--in-l); border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--panel);
}
.panel:not(.off) { animation: ansIn var(--dur-move) var(--spring) both; }
.panel.off { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity var(--dur-fade) var(--ease-fade), visibility 0s linear var(--dur-fade); }
@media (max-width: 1023.98px) { .panel { grid-template-columns: minmax(0, 1fr); } }
.howto { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: var(--block); align-content: start; }
.howto li { counter-increment: s; display: grid; grid-template-columns: var(--h-xs) minmax(0, 1fr); column-gap: var(--sp-16); }
.howto li::before {
  content: counter(s); width: var(--h-xs); height: var(--h-xs); border-radius: 50%; border: 1px solid var(--line-2);
  display: grid; place-items: center; color: var(--text-2);
  font: var(--type-micro); font-family: var(--display); font-weight: 600; font-variant-numeric: tabular-nums;
}
.howto b { display: block; font: var(--type-body); font-weight: 600; }
.howto span { display: block; margin-top: var(--pair); color: var(--text-2); font: var(--type-small); }
.code { position: relative; min-width: 0; align-self: start; border-radius: var(--r-md); background: var(--ground); border: 1px solid var(--line-2); }
.code pre { margin: 0; padding: var(--in-s); overflow-x: auto; font: var(--type-caption); font-family: var(--mono); color: var(--cobalt-2); }
/* From M up the code wraps at its spaces instead of hiding the end of a line behind an inner scroll
   (at L the box is narrower than the line). On phones a single URL is wider than the box, so the
   snippet keeps the usual sideways scroll there; the Copy button copies it whole. */
@media (min-width: 768px) { .code pre { white-space: pre-wrap; } }
/* The bar is the button plus 8 above and below, and the button sits 8 from the right edge:
   48 tall with the 32 button, 56 where --h-sm is 40 (S, touch). */
.code .cap2 {
  display: flex; justify-content: space-between; align-items: center; height: calc(var(--h-sm) + 2 * var(--sp-8));
  padding: 0 var(--sp-8) 0 var(--sp-16); box-shadow: inset 0 -1px 0 var(--line);
  font: var(--type-caption); color: var(--text-3);
}
.code .btn, .linkbox + .btn { height: var(--h-sm); padding: 0 var(--sp-12); }
.linkbox {
  display: flex; align-items: center; gap: var(--sp-8); height: var(--h-lg); padding: 0 var(--in-s);
  border-radius: var(--r-md); background: var(--ground); border: 1px solid var(--line-2);
  font: var(--type-caption); font-family: var(--mono); color: var(--text); overflow-x: auto; white-space: nowrap;
}

/* ---------- Contact (section 7.7): aside on columns 1-5, form on 7-12 ---------- */
.contact { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; padding-bottom: var(--sec); }
.contact > .aside { grid-column: 1 / span 5; }
.contact > .form { grid-column: 7 / span 6; }
@media (max-width: 1023.98px) {
  .contact { grid-template-columns: minmax(0, 1fr); row-gap: var(--group); }
  .contact > .aside, .contact > .form { grid-column: 1; }
}
.form { display: grid; gap: var(--stack); padding: var(--in-l); border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--panel); }
.form .row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--stack); }
@media (max-width: 767.98px) { .form .row2 { grid-template-columns: minmax(0, 1fr); } }
.form .actions { display: flex; align-items: center; flex-wrap: wrap; column-gap: var(--split); row-gap: var(--stack); }
.form .actions .dim { font: var(--type-caption); }
.notice {
  display: flex; gap: var(--sp-8); align-items: flex-start; padding: var(--sp-12) var(--in-s); border-radius: var(--r-md);
  background: rgba(76,195,138,.08); border: 1px solid rgba(76,195,138,.3); color: var(--text); font: var(--type-small);
  animation: ansIn var(--dur-move) var(--spring) both;
}
.aside { display: grid; gap: var(--block); }
.aside .item { display: grid; gap: var(--pair); padding-bottom: var(--block); border-bottom: 1px solid var(--line); }
.aside .item:last-child { padding-bottom: 0; border-bottom: 0; }
.aside .item b { font: var(--type-body); font-weight: 600; }
.aside .item span { color: var(--text-2); font: var(--type-small); }
/* text -> its own button is --stack: the item's 4 plus 8 */
.aside .item .btn { justify-self: start; margin-top: calc(var(--stack) - var(--pair)); }

/* ---------- Sign in (section 7.7) ---------- */
.auth { position: relative; overflow: hidden; display: grid; grid-template-rows: auto 1fr; min-height: 100vh; min-height: 100dvh; padding-inline: var(--margin); }
.auth::before { content: ""; position: absolute; inset: -30% -20% auto; height: 700px; background: radial-gradient(50% 50% at 50% 0%, rgba(42,91,224,.2), rgba(42,91,224,0) 70%); pointer-events: none; }
.auth .bar { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: var(--container); height: var(--h-bar); margin-inline: auto; }
.auth .back { display: inline-flex; align-items: center; gap: var(--sp-8); height: var(--h-md); color: var(--text-2); font: var(--type-small); }
.auth .back:hover { color: var(--text); }
/* 424 = 360 of content (span 4 at XL) + 2 x 32. The three steps share one grid cell (like the
   install panels), so the card keeps the tallest step's height and its bottom edge never jumps. */
.card {
  position: relative; overflow: hidden; align-self: start; justify-self: center; width: 100%; max-width: 424px;
  display: grid; grid-template-columns: minmax(0, 1fr);
  margin-block: var(--head-top) var(--sec); padding: var(--in-l); border-radius: var(--r-xl);
  background: var(--panel); border: 1px solid var(--line-2); box-shadow: 0 40px 120px -40px rgba(0,0,0,.9);
}
.card .stepv { grid-row: 2; grid-column: 1; display: grid; gap: 0; align-content: start; }
.card .stepv[hidden] { display: none; }
.card .stepv:not([hidden]):not(.off) { animation: stepIn var(--dur-move) var(--spring) both; }
.card .stepv.off { visibility: hidden; opacity: 0; pointer-events: none; transition: opacity var(--dur-fade) var(--ease-fade), visibility 0s linear var(--dur-fade); }
@keyframes stepIn { from { opacity: 0; transform: translateX(var(--sp-16)); } to { opacity: 1; transform: none; } }
.card h1 { font: var(--type-title); letter-spacing: var(--track-title); }
.card p.sub { margin-top: var(--row); color: var(--text-2); font: var(--type-body); }
.card .field, .card .otp { margin-top: var(--block); }
.card .btn { width: 100%; height: var(--h-lg); margin-top: var(--stack); padding: 0 var(--sp-24); font: var(--type-body); font-weight: 600; }
.card .notice { margin-top: var(--stack); }
.card .otp + p.sub { margin-top: var(--stack); font: var(--type-small); }
.otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-8); }
/* OTP digits: Sora 600 24/28 at every width, because the input is 56 at every width */
.otp input {
  width: 100%; height: var(--h-xl); padding: 0; text-align: center; border-radius: var(--r-md);
  background: var(--ground); border: 1px solid var(--line-2); color: var(--text);
  font: 600 24px/28px var(--display); font-variant-numeric: tabular-nums;
  transition: scale var(--dur-press) var(--spring);
}
.otp input:focus { outline: none; border-color: var(--cobalt-2); scale: 1.04; }
.prog { display: flex; gap: var(--sp-8); margin-bottom: var(--block); }
.prog i { position: relative; overflow: hidden; flex: 1; height: var(--sp-4); border-radius: 2px; background: var(--line-2); }
.prog i::after { content: ""; position: absolute; inset: 0; background: var(--pill); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-move) var(--spring); }
.prog i.on::after { transform: scaleX(1); }
.link { position: relative; color: var(--cobalt-2); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
/* hit area: the 20px line grows to --h-md (40) and 8 each side, without moving anything */
.link::after { content: ""; position: absolute; inset: calc((var(--h-md) - 100%) / -2) calc(-1 * var(--sp-8)); }
.link:hover { text-decoration: underline; }
.preview-note { color: var(--text-3); font: var(--type-caption); text-align: center; }