/* Shared subpage styling: compact page hero, and the extra mockups and
   download controls used on features.html and download.html. */

/* Page hero (subpages) -------------------------------------------------- */
.page-hero { padding-top: clamp(3rem, 5vw, 4.5rem); padding-bottom: clamp(2rem, 4vw, 3rem); position: relative; }
.page-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(55% 60% at 80% 0, var(--lane-blue-soft), transparent 60%);
}
.page-hero h1 { font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4rem); margin-bottom: 1rem; }
.page-hero .lead { max-width: 40rem; }

/* Feature split sections ------------------------------------------------ */
.features-list { display: grid; gap: clamp(3.5rem, 7vw, 6rem); }

/* Split-view mockup (two panes) ---------------------------------------- */
.split2 { display: flex; gap: 6px; padding: 0.6rem; background: var(--sunken); }
.split2 .pane { flex: 1; background: var(--surface); border-radius: var(--r-md); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.split2 .pane-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.65rem; border-bottom: 1px solid var(--line); font-size: 0.75rem; font-weight: 600; color: var(--ink-2); }
.split2 .pane-bar .d { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.split2 .pane-body { padding: 0.7rem; display: grid; gap: 0.5rem; }
.skel { height: 9px; border-radius: 5px; background: var(--sunken); }
.skel.w70 { width: 70%; } .skel.w50 { width: 50%; } .skel.w90 { width: 90%; }
.skel.tall { height: 46px; }

/* Command palette mockup ----------------------------------------------- */
.palette { padding: 1.4rem; background: var(--sunken); }
.palette-box { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-md), 0 0 0 1px var(--line); overflow: hidden; max-width: 420px; margin-inline: auto; }
.palette-input { display: flex; align-items: center; gap: 0.6rem; padding: 0.9rem 1rem; border-bottom: 1px solid var(--line); font-size: 0.95rem; color: var(--ink-2); }
.palette-input svg { width: 17px; height: 17px; color: var(--ink-3); }
.palette-input .cursor { width: 2px; height: 16px; background: var(--accent); border-radius: 2px; animation: blink 1.1s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .palette-input .cursor { animation: none; } }
.palette-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 1rem; font-size: 0.9rem; }
.palette-row.sel { background: var(--lane-blue-soft); }
.palette-row .pk { margin-left: auto; font-size: 0.7rem; color: var(--ink-2); font-weight: 600; }
.palette-row .pi { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: var(--on-fill, #fff); font-size: 0.72rem; font-weight: 700; flex: none; }
.palette-cat { padding: 0.5rem 1rem 0.3rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }

/* Workspace list mockup ------------------------------------------------- */
.ws { padding: 1rem; display: grid; gap: 0.55rem; }
.ws-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.8rem; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.ws-item.on { box-shadow: inset 0 0 0 1.5px var(--accent); background: var(--lane-blue-soft); }
.ws-item .ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--on-fill, #fff); flex: none; }
.ws-item .ic svg { width: 16px; height: 16px; }
.ws-item b { font-size: 0.9rem; font-weight: 600; }
.ws-item small { display: block; font-size: 0.74rem; color: var(--ink-2); }
.ws-item .now { margin-left: auto; font-size: 0.68rem; font-weight: 700; color: var(--accent); }

/* Tab strip mockup ------------------------------------------------------ */
.tabs-mock { background: var(--sunken); padding: 0.5rem 0.5rem 0; }
.tabs-row { display: flex; gap: 4px; }
.tab-mock { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.75rem; border-radius: 9px 9px 0 0; font-size: 0.78rem; color: var(--ink-3); background: transparent; white-space: nowrap; }
.tab-mock .fav { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.tab-mock.on { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: 0 -1px 0 var(--line), -1px 0 0 var(--line), 1px 0 0 var(--line); }
.tabs-body { background: var(--surface); border-top: 1px solid var(--line); padding: 1.1rem; display: grid; gap: 0.55rem; }

/* Download page --------------------------------------------------------- */
.os-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
.os-card {
  position: relative; padding: 1.8rem 1.6rem; border-radius: var(--r-lg);
  background: var(--surface); box-shadow: 0 0 0 1px var(--line);
  display: flex; flex-direction: column; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.os-card.is-yours { box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-md); transform: translateY(-3px); }
.os-card .os-ico { width: 46px; height: 46px; margin-bottom: 1.1rem; color: var(--ink); }
.os-card .os-ico svg { width: 100%; height: 100%; }
/* h2, not h3: these sit directly under the page h1, and an h1 -> h3 jump breaks
   the outline for screen-reader navigation. Styling stays at the old h3 scale. */
.os-card h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.12; margin-bottom: 0.25rem; }
.os-card .os-meta { font-size: 1rem; color: var(--ink-3); margin-bottom: 1.3rem; }
.os-card .btn { margin-top: auto; width: 100%; }
.os-card .badge-you { position: absolute; top: 1rem; right: 1rem; font-size: 1rem; font-weight: 700; color: var(--accent); background: var(--lane-blue-soft); padding: 0.25rem 0.6rem; border-radius: var(--r-pill); opacity: 0; }
.os-card.is-yours .badge-you { opacity: 1; }
/* The platforms that are not built. Was .soon, renamed when the copy stopped
   promising them: nothing about these cards should read as scheduled. */
.os-card.alt { background: var(--sunken); box-shadow: 0 0 0 1px var(--line); }
.os-card.alt .os-ico { color: var(--ink-3); }
.os-card.alt h2, .os-card.alt .os-meta { color: var(--ink-3); }
.btn-disabled { background: var(--surface); color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); cursor: default; pointer-events: none; }

/* Register-interest form on the mac/linux cards. margin-top:auto sits on the form
   rather than the button (the .os-card .btn rule above), so the input and button
   travel together to the bottom of the card and all three cards align. */
.os-card .interest { margin-top: auto; display: grid; gap: 0.6rem; }
.os-card .interest .btn { margin-top: 0; }
.interest-input {
  width: 100%; padding: 0.75rem 0.9rem; border: 0; border-radius: var(--r-md);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem;
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.interest-input::placeholder { color: var(--ink-3); }
.interest-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.interest-input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--danger); }
/* Empty until there is something to say, so it holds no space in the layout. */
.interest-msg:empty { display: none; }
.interest-msg { font-size: 0.95rem; color: var(--ink-3); }
.interest-msg.ok { color: var(--accent); }
.interest-msg.err { color: var(--danger); }
/* Submitted: the form is replaced by its own message, so it stops asking for
   something it has already been given. Deliberately NOT scoped to .os-card: the
   same form is used on /pro-access/, and a rule that only fires inside an OS
   card leaves that one showing an empty input under its own success message. */
.interest.done .interest-input, .interest.done .btn { display: none; }
.os-card .interest.done { margin-top: auto; }

@media (max-width: 800px) { .os-cards { grid-template-columns: 1fr; } }
.switch-note { margin-top: 1.4rem; font-size: 1rem; color: var(--ink-3); }

/* Spec + steps ---------------------------------------------------------- */
.specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--line); margin-top: 1.5rem; }
@media (max-width: 700px) { .specs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .specs { grid-template-columns: 1fr; } }
.spec { background: var(--surface); padding: 1.3rem; }
.spec dt { font-size: 1rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 0.35rem; }
.spec dd { font-size: 1.02rem; font-weight: 600; color: var(--ink); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; counter-reset: step; }
.step { position: relative; padding-top: 2.6rem; }
.step::before { counter-increment: step; content: counter(step); position: absolute; top: 0; left: 0; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; color: var(--bg); background: var(--ink); font-size: 1rem; }
.step h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.step p { font-size: 1rem; color: var(--ink-2); }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; gap: 1.75rem; } }

/* Comparison pages ------------------------------------------------------ */
.cmp-intro { max-width: 46rem; }
.cmp-wrap { max-width: 62rem; margin: 2.5rem auto 0; overflow-x: auto; border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line); }
.cmp-table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; background: var(--surface); }
.cmp-table.cols-3 { min-width: 760px; }
.cmp-table.cols-3 .row-label { width: 28%; }
.cmp-table th, .cmp-table td { padding: 0.95rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 1rem; }
.cmp-table tr:last-child th, .cmp-table tr:last-child td { border-bottom: none; }
.cmp-table thead th { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; border-bottom: 2px solid var(--line-2); white-space: nowrap; }
.cmp-table thead th:first-child { font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.03em; }
.cmp-table .row-label { font-weight: 600; color: var(--ink); width: 34%; }
.cmp-table td { color: var(--ink-2); }
.cmp-table .col-us { background: var(--lane-blue-soft); color: var(--ink); font-weight: 600; }
.cmp-table thead .col-us { color: var(--accent); }
.cmp-table .col-us .brandmark { display: inline-flex; align-items: center; gap: 0.45rem; }
.cmp-table .col-us .brandmark img { width: 20px; height: 20px; }
.cmp-yes { display: inline-flex; align-items: center; gap: 0.45rem; }
.cmp-yes svg { width: 17px; height: 17px; color: var(--lane-green); flex: none; }
.cmp-no { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ink-3); }
.cmp-no svg { width: 16px; height: 16px; flex: none; }
.cmp-who { max-width: 46rem; margin: 3rem auto 0; }
.cmp-who h2 { font-size: var(--step-h3); margin-bottom: 0.5rem; }
.cmp-who .lead { color: var(--ink-2); }
.cmp-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.5rem; }
.cmp-fit .card { padding: 1.6rem; border-radius: var(--r-lg); background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.cmp-fit .card.us { box-shadow: 0 0 0 1.5px var(--accent); background: linear-gradient(180deg, var(--lane-blue-soft), transparent 45%), var(--surface); }
.cmp-fit h3 { font-size: 1.15rem; margin-bottom: 0.7rem; }
.cmp-fit p { color: var(--ink-2); font-size: 1rem; }
.cmp-fit p + p { margin-top: 0.7rem; }
.cmp-note { max-width: 46rem; margin-top: 2rem; font-size: 1rem; color: var(--ink-3); }
@media (max-width: 720px) { .cmp-fit { grid-template-columns: 1fr; } }

/* Legal (privacy / terms) ---------------------------------------------- */
.section-tight:has(.legal) { padding-top: clamp(1.25rem, 3vw, 2.25rem); }
.legal { max-width: 44rem; }
.legal .lead { margin-bottom: 2.5rem; }
.legal h2 { font-size: var(--step-h3); margin: 2.5rem 0 0.8rem; }
.legal h2:first-of-type { margin-top: 0; }
.legal p { color: var(--ink-2); margin-bottom: 1rem; }
.legal ul { color: var(--ink-2); margin: 0 0 1rem 1.1rem; display: grid; gap: 0.5rem; }
.legal .updated { font-size: 1rem; color: var(--ink-3); margin-bottom: 2.5rem; }
.legal .callout { padding: 1.2rem 1.4rem; border-radius: var(--r-md); background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: 1rem; }

/* Pricing ---------------------------------------------------------------
   Two plans side by side. Built on the same surface + hairline shadow as
   .os-card so the pages read as one system, with the highlight borrowed from
   .os-card.is-yours rather than a second, slightly different emphasis. */
.plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-top: 2.5rem; align-items: start; }
.plan {
  position: relative; padding: 2rem 1.8rem; border-radius: var(--r-lg);
  background: var(--surface); box-shadow: 0 0 0 1px var(--line);
  display: flex; flex-direction: column; height: 100%;
}
.plan.is-featured { box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-md); }
.plan h2 { font-size: var(--step-h3); margin-bottom: 0.3rem; }
.plan .plan-sub { color: var(--ink-3); font-size: 1rem; margin-bottom: 1.4rem; }
/* The price and its unit sit on one baseline, so the unit must not inherit the
   display face's size or it competes with the number it qualifies. */
.plan-price { display: flex; align-items: baseline; gap: 0.4rem; margin-bottom: 0.2rem; }
.plan-price b { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--ink); }
.plan-price span { color: var(--ink-3); font-size: 1rem; }
.plan-alt { color: var(--ink-3); font-size: 0.95rem; min-height: 1.4em; margin-bottom: 1.6rem; }
.plan ul { list-style: none; display: grid; gap: 0.7rem; margin: 0 0 1.8rem; color: var(--ink-2); }
.plan ul li { display: flex; gap: 0.6rem; align-items: flex-start; line-height: 1.5; }
.plan ul li .i { width: 20px; height: 20px; flex-shrink: 0; margin-top: 0.15rem; color: var(--accent); }
/* Pushes the button to the bottom edge so both cards' buttons align even when
   one feature list is longer than the other. */
.plan .plan-cta { margin-top: auto; }
.plan .plan-cta .btn { width: 100%; justify-content: center; }
/* Sits ABOVE the button: the billing terms are what someone wants answered
   before they commit to the click, not after it. margin-bottom rather than
   margin-top for the same reason. */
.plan-note { color: var(--ink-3); font-size: 0.95rem; margin-bottom: 1.5rem; text-align: center; }
@media (max-width: 720px) { .plans { grid-template-columns: 1fr; } }

/* Pro access (temporary) ------------------------------------------------
   The holding page every "Get Pro" button leads to until the shop opens.
   Deleted at go-live along with the page, so it is kept here at the bottom
   rather than threaded through the file. */
.pro-status {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.4rem 0.85rem; border-radius: var(--r-pill);
  background: var(--lane-amber-soft); color: var(--ink);
  font-size: 0.95rem; font-weight: 600; margin-bottom: 1.4rem;
}
.pro-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lane-amber); flex-shrink: 0; }
.notify-card {
  margin-top: 2.5rem; padding: 2rem 1.8rem; border-radius: var(--r-lg);
  background: var(--surface); box-shadow: 0 0 0 1px var(--line);
}
.notify-card h2 { font-size: var(--step-h3); margin-bottom: 0.6rem; }
.notify-card > p { color: var(--ink-2); margin-bottom: 1.4rem; }
/* Input and button on one line. The OS cards stack theirs because each card is a
   third of the row; this card is full measure, so a stacked layout leaves a
   stretched input with an orphaned button under it. The message line is a third
   grid item spanning both columns, so it appears under the pair rather than
   pushing the button sideways. */
.notify-card .interest {
  display: grid; grid-template-columns: 1fr auto; gap: 0.7rem; align-items: start;
}
.notify-card .interest .interest-msg { grid-column: 1 / -1; }
.notify-card .interest.done { display: block; }
@media (max-width: 560px) { .notify-card .interest { grid-template-columns: 1fr; } }

/* Two consecutive leads in a hero need the gap between paragraphs that .lead
   alone does not carry, or they read as one block with a stray line break. */
.page-hero .lead + .lead { margin-top: 1rem; }

/* The pricing hero's h1 breaks after "Free to start." and the second line has to
   stay whole. .measure's 40rem is too narrow for it, so this block opts out of
   that width; the lead keeps its own 40rem from .page-hero .lead, so only the
   heading gets the extra room. Below ~52rem it wraps naturally, which is fine. */
.pricing-hero { max-width: 52rem; }
/* Inline code inside a plan bullet: match the body size rather than the browser
   default monospace, which renders noticeably smaller and drops the line off the
   baseline of the text around it. */
.plan ul li code { font-family: var(--font-mono); font-size: 0.92em; }