/* ─────────────────────────────────────────────────────────────────────────
   Live studio — the desktop app's theme carried onto the web.

   Paper ground, graphite ink, hairline rules doing the work that borders and
   cards usually do, and one teal accent that only ever marks something live
   or actionable. Mono is not decoration here: device paths, frame rates and
   licence keys are the product's native vocabulary.
   ───────────────────────────────────────────────────────────────────────── */

:root {
    --paper:      #F7F6F3;
    --paper-deep: #EFEDE8;
    --surface:    #FFFFFF;
    --ink:        #17171A;
    --ink-soft:   #5E5C63;
    --ink-faint:  #8A8884;
    --rule:       #E2DFD8;
    --rule-soft:  #EDEAE4;
    --accent:     #0F6C63;
    --accent-hi:  #12857A;
    --accent-wash:#E8F1EF;
    --alert:      #B23A2E;

    --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --body: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --gutter: clamp(20px, 5vw, 64px);
    --measure: 1180px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-hi); }

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

img { max-width: 100%; display: block; }

/* ── shell ───────────────────────────────────────────────────────────── */

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

.band { border-top: 1px solid var(--rule); }
.band-pad { padding-block: clamp(56px, 8vw, 104px); }

/* ── nav ─────────────────────────────────────────────────────────────── */

.nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--rule);
}
.nav-in {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 62px;
}
.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
    font-size: 1.0625rem;
}
.brand img { width: 24px; height: 24px; border-radius: 6px; }
.nav-spacer { flex: 1; }
.nav-link {
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    text-decoration: none;
}
.nav-link:hover { color: var(--ink); }

/* ── type ────────────────────────────────────────────────────────────── */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0 0 22px;
}
/* The status dot is lifted straight from the app's rail, where it means the
   virtual camera is live. Here it marks a section the same way. */
.dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    flex: none;
}
.dot-off { background: #C3BFB6; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; margin: 0; }

.display {
    font-size: clamp(2.6rem, 6.4vw, 4.6rem);
    line-height: 0.98;
    letter-spacing: -0.04em;
}
.h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.06; }
.h3 { font-size: 1.1875rem; line-height: 1.25; letter-spacing: -0.015em; }

.lede {
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 46ch;
    margin: 20px 0 0;
}
.note { color: var(--ink-soft); font-size: 0.9375rem; }
.mono { font-family: var(--mono); }

/* ── buttons ─────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 13px 22px;
    font-family: var(--body);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hi); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: #D9D5CD; }
.btn-ghost:hover { background: var(--surface); border-color: #C2BCB1; color: var(--ink); }
.btn-sm { padding: 9px 15px; font-size: 0.875rem; border-radius: 7px; }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ── hero ────────────────────────────────────────────────────────────── */

.hero { padding-block: clamp(52px, 8vw, 96px) clamp(48px, 7vw, 88px); }
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
.hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 34px;
}
.hero-price {
    font-family: var(--mono);
    font-size: 0.8125rem;
    color: var(--ink-faint);
}

/* The signature: the camera menu of a calling app, with the product sitting
   in it. That list is the whole promise, so it is the hero object. */
.picker {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(23,23,26,.04), 0 18px 44px -24px rgba(23,23,26,.22);
    padding: 8px;
    max-width: 420px;
    margin-inline: auto;
    width: 100%;
}
.picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px 12px;
    border-bottom: 1px solid var(--rule-soft);
    margin-bottom: 6px;
}
.picker-title {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.picker-app { font-size: 0.8125rem; color: var(--ink-soft); }
.picker-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 12px;
    border-radius: 9px;
    font-size: 0.9375rem;
    color: var(--ink-soft);
}
.picker-item .tick { width: 14px; color: transparent; flex: none; }
.picker-item.is-live {
    background: var(--accent-wash);
    color: var(--ink);
    font-weight: 600;
}
.picker-item.is-live .tick { color: var(--accent); }
.picker-dev {
    margin-left: auto;
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--ink-faint);
}
.picker-foot {
    padding: 12px;
    margin-top: 4px;
    border-top: 1px solid var(--rule-soft);
    font-family: var(--mono);
    font-size: 0.6875rem;
    color: var(--ink-faint);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* One orchestrated moment: the camera is in the list from the first paint,
   then becomes the selected one. Animating the row into existence would
   leave a hole in the hero on a slow load or in a screenshot. */
@media (prefers-reduced-motion: no-preference) {
    .picker-item.is-live { animation: pick .7s cubic-bezier(.2,.75,.3,1) .5s both; }
    .picker-item.is-live .tick { animation: tick-in .28s ease 1s both; }
    @keyframes pick {
        from { background: transparent; color: var(--ink-soft); font-weight: 400; }
        to   { background: var(--accent-wash); color: var(--ink); font-weight: 600; }
    }
    @keyframes tick-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
}

/* ── screenshots ─────────────────────────────────────────────────────── */

.shots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-top: 36px;
}
.shot { border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--surface); }
.shot img { width: 100%; height: auto; }
.shot figcaption {
    padding: 12px 14px;
    border-top: 1px solid var(--rule-soft);
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* ── steps ───────────────────────────────────────────────────────────── */

/* Setup genuinely is a sequence — you cannot pick the camera before the app
   is running — so the numbers carry information rather than decoration. */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0;
    margin-top: 12px;
    border-top: 1px solid var(--rule);
}
.step {
    padding: 26px 22px 26px 0;
    border-right: 1px solid var(--rule-soft);
}
.step:last-child { border-right: none; }
.step-n {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    color: var(--accent);
    display: block;
    margin-bottom: 12px;
}
.step p { margin: 8px 0 0; color: var(--ink-soft); font-size: 0.9375rem; }

/* ── feature rows ────────────────────────────────────────────────────── */

.rows { margin-top: 12px; border-top: 1px solid var(--rule); }
.row {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
    gap: clamp(16px, 4vw, 56px);
    padding: 28px 0;
    border-bottom: 1px solid var(--rule-soft);
}
.row p { margin: 0; color: var(--ink-soft); }

/* ── pricing ─────────────────────────────────────────────────────────── */

/* Two offers at four figures each: give them room and let the reader compare
   line by line rather than skim a price table. */
.offers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0;
    margin-top: 32px;
    border-top: 1px solid var(--rule);
}
.offer {
    padding: 32px 36px 34px 0;
    border-right: 1px solid var(--rule-soft);
    display: flex;
    flex-direction: column;
}
.offer:last-child { border-right: none; padding-right: 0; padding-left: 36px; }
.offer-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.offer-note {
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.offer.is-lead .offer-note { color: var(--accent); }
.offer-price {
    font-family: var(--display);
    font-size: clamp(2.4rem, 4.6vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    margin: 22px 0 0;
}
.offer-period {
    display: block;
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-top: 10px;
}
.offer-list {
    list-style: none;
    margin: 26px 0 30px;
    padding: 0;
    flex: 1;
}
.offer-list li {
    position: relative;
    padding: 0 0 0 22px;
    margin-bottom: 11px;
    font-size: 0.9375rem;
    color: var(--ink-soft);
}
.offer-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.58em;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--accent);
}
.offer-list li.is-out { color: var(--ink-faint); }
.offer-list li.is-out::before { background: transparent; border: 1px solid #C3BFB6; }
.offer form .btn { width: 100%; }

.buy-note {
    margin-top: 26px;
    font-size: 0.9375rem;
    color: var(--ink-soft);
    max-width: 62ch;
}

/* ── forms ───────────────────────────────────────────────────────────── */

.field { display: block; margin-bottom: 16px; }
.field > span {
    display: block;
    font-family: var(--mono);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 7px;
}
.input {
    width: 100%;
    background: var(--surface);
    border: 1px solid #DCD8D0;
    border-radius: 8px;
    padding: 12px 14px;
    font-family: var(--body);
    font-size: 0.9375rem;
    color: var(--ink);
}
.input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-wash); }
.input.mono { font-family: var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.field-hint { font-size: 0.8125rem; color: var(--ink-faint); margin-top: 7px; }

.panel {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: clamp(22px, 4vw, 34px);
}

/* ── faq ─────────────────────────────────────────────────────────────── */

.faq { margin-top: 12px; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule-soft); }
.faq summary {
    cursor: pointer;
    padding: 20px 0;
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--ink-faint); }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 0 0 20px; color: var(--ink-soft); max-width: 72ch; }

/* ── order page ──────────────────────────────────────────────────────── */

.centered { max-width: 640px; margin-inline: auto; }
.status-line {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.keybox {
    margin-top: 10px;
    background: var(--paper-deep);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 18px;
    font-family: var(--mono);
    font-size: clamp(1.0625rem, 2.6vw, 1.5rem);
    letter-spacing: 0.1em;
    text-align: center;
    user-select: all;
    word-break: break-all;
}
.facts { margin: 26px 0 0; border-top: 1px solid var(--rule-soft); }
.fact {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 0;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 0.9375rem;
}
.fact dt { color: var(--ink-faint); margin: 0; }
.fact dd { margin: 0; font-family: var(--mono); font-size: 0.875rem; text-align: right; }

/* ── footer ──────────────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--rule); padding-block: 40px 56px; }
.foot-in { display: flex; flex-wrap: wrap; gap: 22px 40px; align-items: flex-start; }
.foot p { margin: 0; font-size: 0.875rem; color: var(--ink-faint); max-width: 56ch; }
.foot-legal { font-size: 0.8125rem; }

/* ── responsive ──────────────────────────────────────────────────────── */

@media (max-width: 860px) {
    .hero-grid { grid-template-columns: 1fr; }
    .row { grid-template-columns: 1fr; gap: 10px; }
    .step { border-right: none; border-bottom: 1px solid var(--rule-soft); padding-right: 0; }
    .step:last-child { border-bottom: none; }
    .offer { border-right: none; border-bottom: 1px solid var(--rule-soft); padding-right: 0; }
    .offer:last-child { border-bottom: none; padding-left: 0; }
}
@media (max-width: 560px) {
    .nav-link.hide-sm { display: none; }
}