/* Onboarding after checkout (design kit 6): one glass column (max 760 px) on the key art, eyebrow
   progress, steps as glass rows with a ✓ chip, one primary Continue plus a ghost "Do this later",
   and WEBY's card bottom-left with the step's explainer. */
body.ob-page { display: block; padding: 0; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 10px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.ob { min-height: 100svh; padding: 104px 16px 48px; outline: none; }
.ob-col { position: relative; width: 100%; max-width: 760px; margin: 0 auto; padding: clamp(26px, 4.5vw, 46px); text-align: left; }
.ob-col > h1 { margin: 16px 0 10px; font-size: clamp(32px, 4.6vw, 52px); max-width: 15ch; }
.ob-col > .lede { margin: 0 0 6px; max-width: 34ch; }
.ob-col.has-node > h1, .ob-col.has-node > .lede { max-width: calc(100% - 170px); }
.ob-node { position: absolute; top: 18px; right: 18px; width: 150px; height: 190px; object-fit: contain; pointer-events: none; filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(95,227,216,.18)); }
.ob-bar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 14px 0 0; max-width: 260px; }
.ob-bar i { height: 4px; border-radius: 4px; background: rgba(255,255,255,.12); }
.ob-bar i.done { background: var(--cyan); }
.ob-bar i.now { background: var(--grad); }

/* steps: glass rows with a ✓ chip; the current one is open */
.ob-steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; counter-reset: obs; }
.ob-step { border-radius: 18px; border: 1px solid var(--glassline); background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02)); }
.ob-step > .ob-row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 18px; }
.ob-step .ob-name { flex: 1; min-width: 0; }
.ob-step .ob-name b { display: block; font: 600 18px/1.2 var(--display); letter-spacing: -.01em; color: #fff; }
.ob-step .ob-name small { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
.ob-chip { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 15px/1 var(--display); color: var(--label); border: 1.5px solid rgba(140,185,255,.35); }
.ob-step.done .ob-chip { background: var(--cyan); border-color: var(--cyan); color: #04121a; }
.ob-step.now { border-color: rgba(127,240,255,.5); background: linear-gradient(180deg, rgba(20,34,90,.55), rgba(8,14,44,.6)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 18px 48px rgba(0,0,0,.45); }
.ob-step.now .ob-chip { color: #fff; border-color: var(--hi); box-shadow: 0 0 14px rgba(127,240,255,.55); }
.ob-step .ob-state { flex: none; font-size: 13px; font-weight: 600; color: var(--label); }
.ob-step.done .ob-state { color: var(--good); }
.ob-step > .ob-body { padding: 0 18px 18px; }

/* "We found this — is it correct?" items */
.ob-ask { margin: 0 0 12px; font: 600 15px/1.4 var(--body); color: var(--soft); }
.ob-items + .ob-ask, .ob-items + .ob-group + .ob-ask { margin-top: 20px; }
.ob-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ob-item { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: rgba(5,9,30,.55); border: 1px solid rgba(140,185,255,.14); }
.ob-item .k { font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--label); }
.ob-item .v { grid-column: 1 / -1; color: #fff; font-size: 17px; overflow-wrap: anywhere; } /* the value under its label, full width */
.ob-item .src { grid-column: 1 / -1; font-size: 13px; color: #9aa6d6; overflow-wrap: anywhere; }
.ob-item .acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ob-item .acts input { flex: 1 1 220px; }
.ob-item .acts .button, .ob-item .acts button { flex: none; }
.ob-item .tag { justify-self: end; align-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.tag.found { color: #ffe08a; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.45); }
.tag.missing { color: #ffc2cc; background: rgba(251,113,133,.1); border: 1px solid rgba(251,113,133,.45); }
.tag.ok { color: #052014; background: var(--good); }
.ob-item.ok { border-color: rgba(74,222,128,.28); }
.ob-tools label { display: block; margin: 0 0 6px; }
.ob-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 0; }

/* the one action per screen, then the ghost */
.ob-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 26px 0 0; }
.ob-actions .glow { min-width: 200px; }
.ob-status { min-height: 1.5em; margin: 14px 0 0; color: var(--hi); font-size: 15px; }
/* An empty status line takes no room, so a card never ends in a blank band; it opens when there is something to say. */
.ob-status:empty { min-height: 0; margin: 0; }
.ob-status.bad { color: #ffb4c0; }
.ob-status .link { display: inline; min-height: 0; margin: 0; } /* links inside a sentence stay on its lines (Owner 08:38 UTC 2026-10-16) */
.ob-form { margin-top: 18px; }
.ob-form .ob-actions { margin-top: 14px; }

/* WEBY's explainer: a glass card bottom-left on wide screens, inline under the column on smaller ones */
.ob-weby { width: 300px; border-radius: 18px 18px 18px 6px; color: #e9f0ff; background: linear-gradient(180deg, rgba(10,16,44,.82) 0%, rgba(5,9,30,.94) 100%); border: 1px solid rgba(255,255,255,.13); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 0 0 1px rgba(95,227,216,.22), 0 18px 48px rgba(0,0,0,.55); overflow: hidden; }
.ob-weby .wc-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 4px; }
.ob-weby .wc-av { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px rgba(95,227,216,.6); background: #0c1a4d; }
.ob-weby .wc-head b { display: block; font: 600 15px/1.2 var(--display); color: #fff; }
.ob-weby .wc-head small { display: block; font-size: 12px; color: var(--label); letter-spacing: .08em; text-transform: uppercase; }
.ob-weby p { margin: 6px 14px 14px; color: #d6e2ff; font-size: 15px; line-height: 1.5; }
/* Docked bottom-left only in the gutter beside the 760 px column, sized to the gutter (like the start page's film
   tile) so it never covers the column; 40 px = the 24 px edge + a 16 px gap. Narrower screens get it in the flow. */
@media (min-width: 1280px) { .ob-weby { position: fixed; left: 24px; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 30; width: min(300px, calc((100vw - 760px) / 2 - 40px)); max-height: calc(100vh - 440px); overflow-y: auto; } }
@media (max-width: 1279px) { .ob-weby { width: auto; max-width: 760px; margin: 16px auto 0; } }

@media (max-width: 640px) {
  .ob { padding: 86px 16px 32px; }
  .ob-col { padding: 24px 18px; }
  .ob-col > h1 { font-size: 32px; }
  .ob-col.has-node > h1, .ob-col.has-node > .lede { max-width: none; }
  .ob-col.has-node > .eyebrow { max-width: calc(100% - 80px); }
  /* Small enough to end above the heading's first line, so the island never sits over the words. */
  .ob-node { width: 60px; height: 76px; top: 8px; right: 10px; }
  .ob-step > .ob-row { padding: 10px 14px; gap: 12px; }
  .ob-step > .ob-body { padding: 0 12px 14px; }
  .ob-item { padding: 12px; }
  .ob-actions > * { flex: 1 1 100%; }
  .ob-actions .glow { min-width: 0; }
}

/* the payment page keeps the same glass column while it checks with Square */
.paid-col { text-align: left; }
.paid-col .weby-hero { display: block; width: 76px; height: 76px; }
.ob-group.top { margin: 0 0 12px; }
.ob-jump { color: #fff; text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; } .ob-jump:hover, .ob-jump:focus-visible { color: var(--hi); text-decoration: underline; }

/* The terms beside the pay button (public/terms.js; /start, /accept and the thank-you page's plan step): a bold one-line
   summary, the full renewal terms in readable small type under it, and unticked boxes with 24 px targets. */
.terms { display: grid; gap: 10px; margin: 4px 0 0; }
.terms-lines { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 6px; }
.terms-lines li { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; color: #d6e2ff; }
.terms-lines li b { white-space: nowrap; color: #fff; }
.terms-lines .terms-total { padding-top: 8px; border-top: 1px solid rgba(255,255,255,.12); font: 700 18px/1.2 var(--display); color: #fff; }
.terms-head { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: #e9f0ff; }
.terms-head b { color: #fff; }
.terms-fine { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(5,9,30,.5); border: 1px solid rgba(140,185,255,.16); font-size: 13.5px; line-height: 1.5; color: #b9c6e6; }
.terms .agree { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: #e9f0ff; cursor: pointer; }
.terms .agree input { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--cyan); }
.terms .agree a { color: var(--hi); }
/* Reassurance right beside the pay button. */
.pay-trust { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; line-height: 1.4; color: #b9c6e6; }
.pay-trust li { display: flex; gap: 6px; align-items: baseline; }
.pay-trust i { font-style: normal; font-weight: 800; color: var(--cyan); }
.pay-trust b { color: #e9f0ff; font-weight: 600; }
@media (max-width: 640px) { .pay-trust { display: grid; gap: 6px; } }
/* The pay button and today's total stay on screen at the foot of the column while the buyer reads, at every width
   (/start's actions and /accept's pay row). */
.paybar { position: sticky; bottom: 0; z-index: 20; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-radius: 18px; background: linear-gradient(180deg, rgba(5,7,22,.88), rgba(5,7,22,.97)); border: 1px solid rgba(140,185,255,.18); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.paybar .paybar-sum:not(:empty) { display: block; flex: 1 1 auto; margin: 0; font-size: 14px; color: #d6e2ff; }
.paybar .paybar-sum b { color: #fff; font: 700 18px/1.2 var(--display); }
@media (max-width: 640px) {
  .paybar { margin-left: -18px; margin-right: -18px; border-radius: 0; border-width: 1px 0 0; }
  .paybar .paybar-sum:not(:empty) { flex: 1 1 100%; }
}
/* /start: the plan compare table and FAQ under the plan cards, closed until opened (native <details>: keyboard and
   screen readers get the toggle for free). */
.compare, .faq details { margin: 12px 0 0; border-radius: 14px; border: 1px solid rgba(140,185,255,.16); background: rgba(5,9,30,.5); }
.compare summary, .faq summary { padding: 12px 14px; font-size: 15px; font-weight: 600; color: #e9f0ff; cursor: pointer; list-style: none; }
.compare summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.compare summary::before, .faq summary::before { content: "+"; display: inline-block; width: 18px; color: var(--cyan); font-weight: 800; }
.compare[open] summary::before, .faq details[open] summary::before { content: "\2212"; }
.compare summary:focus-visible, .faq summary:focus-visible { outline: 2px solid var(--hi); outline-offset: 2px; border-radius: 14px; }
.compare-scroll { overflow-x: auto; padding: 0 14px 12px; }
.compare table { width: 100%; min-width: 320px; border-collapse: collapse; font-size: 14px; color: #d6e2ff; }
.compare th, .compare td { padding: 8px 6px; text-align: center; border-top: 1px solid rgba(255,255,255,.08); }
.compare th { font-weight: 600; color: #fff; }
.compare th[scope="row"] { text-align: left; font-weight: 500; color: #d6e2ff; }
.compare td i { font-style: normal; font-weight: 800; color: var(--cyan); }
.compare td .no { color: #8a97b8; }
.faq { display: grid; gap: 0; }
.faq p { margin: 0; padding: 0 14px 12px; font-size: 14px; line-height: 1.5; color: #b9c6e6; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* /start: the country first, then the number as it is written at home (the eight countries WebMade texts). */
.tel-row { display: grid; grid-template-columns: minmax(0, 11em) 1fr; gap: 8px; }
@media (max-width: 380px) { .tel-row { grid-template-columns: 1fr; } }
/* /start's emailed-code form: the country above the address on phones, so the address has the full width. */
@media (max-width: 520px) { #email-row { grid-template-columns: 1fr; } }