@import url("/beta-data-notice.css");

/* The purchase page (2.17.0): a hero, two network lanes, one Free/Pro table with a yearly/monthly switch, relay packs
   bought right here, questions folded away. The success page below shares the buttons and the status line. */
body { padding-block: 28px 48px; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); }
.pro-top { max-width: 1040px; margin: 0 auto 28px; }
.pro-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text); font-family: var(--font-display); font-weight: 700; font-size: 19px; text-decoration: none; }
main { max-width: 1040px; }
main:has(.plans) { display: grid; gap: 44px; }
main:has(.plans) h2 { margin: 0; }
.hero { display: grid; gap: 10px; max-width: 660px; }
.hero > * { margin: 0; }
.eyebrow { color: var(--color-accent); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hero h1 { font-family: var(--font-display); font-size: clamp(32px, 5.4vw, 48px); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.lead { max-width: 62ch; font-size: 18px; color: var(--color-text-muted); }
.notice { margin: 0; }

/* When Pro matters: the same network goes direct and is always free; otherwise the relay, where Pro adds more. */
.lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lane { display: grid; gap: 8px; align-content: start; padding: 16px 18px; border-radius: 16px; background: var(--color-surface); border: 1px solid var(--color-line); }
.lane.relay { border-color: var(--color-accent); background: var(--color-accent-soft); }
.lane h2 { font-size: 16px; }
.lane p { margin: 0; font-size: 15px; }
.tag { justify-self: start; padding: 2px 9px; border-radius: 99px; background: var(--color-positive-soft); color: var(--color-positive); font-size: 12px; font-weight: 700; }
.lane.relay .tag { background: var(--color-accent); color: var(--color-on-accent); }
.lane-art { width: 100%; height: 56px; color: var(--color-text-muted); }
.lane-art .device { fill: none; stroke: currentColor; stroke-width: 2; }
.lane-art .link { fill: none; stroke-width: 2.5; }
.lane-art .link.direct { stroke: var(--color-positive); }
.lane-art .link.relay { stroke: var(--color-accent); stroke-dasharray: 6 5; }
.lane-art .badge { fill: var(--color-accent); }
.lane-art .badge-text { fill: var(--color-on-accent); font-size: 10px; font-weight: 700; }
.lane-art .direct-text { fill: var(--color-positive); font-size: 11px; font-weight: 600; }

/* Plans: one table, Free beside Pro, the same row comparing the same thing. */
.plans { display: grid; gap: 14px; scroll-margin-top: 16px; }
.plans-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.plans-head h2, .packs-head h2, .faq h2 { font-family: var(--font-display); font-size: 24px; letter-spacing: -.01em; }
.seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--color-field); border: 1px solid var(--color-line); }
.seg button { appearance: none; border: 0; background: none; padding: 6px 14px; border-radius: 9px; color: var(--color-text-muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--color-surface-raised); color: var(--color-text); box-shadow: 0 1px 3px rgba(16, 34, 46, .14); }
.table { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr); background: var(--color-surface); border: 1px solid var(--color-line); border-radius: 18px; overflow: hidden; }
.row { display: contents; }
.cell { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 13px 18px; border-top: 1px solid var(--color-line); font-variant-numeric: tabular-nums; min-width: 0; }
.cell.head { border-top: 0; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px; padding: 18px; }
.cell.pro-col { background: var(--color-accent-soft); }
.cell.label-col { color: var(--color-text-muted); font-size: 15px; }
.plan-name { color: var(--color-text); font-weight: 700; }
.price { color: var(--color-text); font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.price small { font-family: var(--font-sans); font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--color-text-muted); }
.sub { min-height: 1.5em; color: var(--color-text-faint); font-size: 13px; }
.save { color: var(--color-positive); font-weight: 700; }
.renew { color: var(--color-text-faint); font-size: 12px; }
.pro-price { display: flex; flex-direction: column; gap: 4px; }
.head .btn { margin-top: 8px; }
.val { color: var(--color-text); font-weight: 650; }
.dim { color: var(--color-text-faint); }
.check { color: var(--color-positive); }
.fine { margin: 0; color: var(--color-text-faint); font-size: 13px; }
.btn { appearance: none; display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 11px; border: 1px solid var(--color-line-strong); background: var(--color-surface-raised); color: var(--color-text); font: inherit; font-size: 15px; font-weight: 650; text-decoration: none; cursor: pointer; text-align: center; }
.btn.primary { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-accent); }
.btn:disabled { opacity: .5; cursor: default; }
.status { min-height: 1.65em; margin: 0; }
.status:empty { min-height: 0; }

/* Relay packs: bought here by a browser that has Pro, or with a license code typed in. */
.packs { display: grid; gap: 14px; scroll-margin-top: 16px; }
.packs-head p { margin: 4px 0 0; }
.pack-state { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border-radius: 12px; font-size: 15px; }
.pack-state.on { background: var(--color-positive-soft); color: var(--color-positive); }
.pack-state.off { background: var(--color-field); color: var(--color-text-muted); display: block; }
.pack-state a, .link { padding: 0; border: 0; background: none; color: var(--color-brand-light); font: inherit; font-weight: 650; text-decoration: underline; cursor: pointer; }
.code-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.code-form input { flex: 1 1 220px; min-width: 0; min-height: 44px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--color-line-strong); background: var(--color-surface-raised); color: var(--color-text); font: inherit; letter-spacing: .04em; text-transform: uppercase; }
.code-bad { flex-basis: 100%; color: var(--color-danger); font-size: 14px; }
.pack-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pack { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--color-line); border-radius: 16px; background: var(--color-surface); }
.pack.best { border-color: var(--color-accent); }
.pack .size { color: var(--color-text); font-family: var(--font-display); font-size: 24px; font-weight: 700; }
.pack .cost { color: var(--color-text); font-weight: 650; }
.pack .per { color: var(--color-text-faint); font-size: 13px; }
.pack .btn { margin-top: 10px; }
.packs .when-on, .packs.is-on .when-off { display: none; }
.packs.is-on .when-on { display: inline; }
.packs.is-on .pack .btn { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-on-accent); }

/* Questions, folded until asked. */
.faq details { border-top: 1px solid var(--color-line); }
.faq details:last-child { border-bottom: 1px solid var(--color-line); }
.faq h2 { margin-bottom: 8px; }
.faq summary { display: flex; justify-content: space-between; gap: 12px; padding: 14px 2px; color: var(--color-text); font-weight: 650; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--color-text-faint); font-size: 20px; font-weight: 400; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { max-width: 70ch; margin: 0 2px 14px; }
.foot { margin: 0; padding-top: 0; border-top: 0; font-size: 14px; }
.foot p { margin: 0 0 4px; color: var(--color-text-faint); }
:is(.btn, .seg button, summary, .link, .pack-state a):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

@media (max-width: 680px) {
  main:has(.plans) { gap: 34px; }
  .lanes, .pack-grid { grid-template-columns: minmax(0, 1fr); }
  .lane-art { height: 46px; }
  .table { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cell.label-col { grid-column: 1 / -1; padding: 10px 14px 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
  .cell.label-col.blank { display: none; }
  .cell:not(.label-col):not(.head) { border-top: 0; padding: 4px 14px 12px; }
  .cell.head { padding: 14px; }
  .price { font-size: 24px; }
  .pack { grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 0 12px; padding: 12px 14px; }
  .pack .size { grid-column: 1; grid-row: 1 / 3; font-size: 20px; }
  .pack .cost { grid-column: 2; grid-row: 1; }
  .pack .per { grid-column: 2; grid-row: 2; }
  .pack .btn { grid-column: 3; grid-row: 1 / 3; margin: 0; min-height: 40px; }
}

/* The success page: the code, one tap to turn it on here. */
h3 { margin: 22px 0 4px; font-size: 17px; }
button.primary, button.secondary { min-height: 46px; padding: 0 18px; border-radius: 12px; font: inherit; font-weight: 650; cursor: pointer; }
.code { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0; }
.code output { padding: 10px 14px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); color: var(--color-text); font-size: 22px; font-weight: 700; letter-spacing: .06em; overflow-wrap: anywhere; }
.code button { min-height: 44px; padding: 0 16px; border: 1px solid var(--color-border); border-radius: 10px; background: transparent; color: var(--color-text); font: inherit; cursor: pointer; }
/* After paying: one tap opens PairOnce here with the code turned on (2.14.1). */
.activate { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 12px; background: var(--color-accent); color: var(--color-on-accent); font-weight: 650; text-decoration: none; }
.activate:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
[hidden] { display: none !important; }
.languages { margin-top: 0; padding-top: 16px; border-top: 1px solid var(--color-line); font-size: 14px; line-height: 2; }
main:not(:has(.plans)) .languages { margin-top: 40px; }