/* Someone with no site yet: the plan chooser and the order (client-order.js). Uses the client page's own tokens and sheets. */

.onboard[hidden], .ob-form[hidden] { display: none; }
.ob-form { padding-top: clamp(1.4rem, 3vw, 2.4rem); padding-bottom: 1rem; }
.ob-set { border: 0; padding: 0; margin: 0 0 clamp(1.8rem, 3.5vw, 2.8rem); min-width: 0; }
.ob-set legend { display: flex; align-items: center; gap: 0.7rem; padding: 0; margin-bottom: 1rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; }
.ob-n { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 2px solid var(--ink-3); border-radius: 50%; font-size: 0.9375rem; font-weight: 650; line-height: 1; }

.ob-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; align-items: stretch; }
.ob-card { position: relative; display: block; margin: 0; cursor: pointer; }
.ob-card input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.ob-card-in { display: grid; gap: 0.5rem; align-content: start; height: 100%; padding: 1.3rem 1.3rem 1.2rem; background: var(--card-bg), var(--card-solid); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); transition: border-color 0.15s, box-shadow 0.15s; }
.ob-card:hover .ob-card-in { border-color: var(--line-2); }
.ob-card input:checked + .ob-card-in { border-color: var(--blue-lit); box-shadow: inset 0 0 0 1px var(--blue-lit), 0 0 28px rgba(59, 100, 232, 0.35), var(--shadow-card); }
.ob-card input:focus-visible + .ob-card-in { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 38%, transparent); }
.ob-card-name { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; }
.ob-card-price { color: var(--ink-2); font-size: 1rem; }
.ob-card-price b { color: var(--ink); font-family: var(--mono); font-size: 1.5rem; font-weight: 400; letter-spacing: -0.04em; }
.ob-card-save { margin-top: -0.25rem; color: var(--ink-2); font-size: 0.875rem; font-weight: 560; }
.ob-card-save[hidden] { display: none; }
.ob-card-term { margin-top: -0.25rem; color: var(--ink-3); font-size: 0.875rem; }
.ob-card-desc { color: var(--ink-2); text-wrap: pretty; }
.ob-card-inc { display: grid; gap: 0.3rem; margin-top: 0.3rem; padding-top: 0.8rem; border-top: 1px solid var(--line); font-size: 0.9375rem; }
.ob-card-inc li { position: relative; padding-left: 1.4rem; }
.ob-card-inc li::before { content: ""; position: absolute; left: 0.1rem; top: 0.3em; width: 0.55rem; height: 0.28rem; border-left: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(-48deg); }
/* what a plan adds to the one before: a lamp-washed block, "+" instead of a tick; the rest stays, quieter */
.ob-card-new { display: grid; gap: 0.4rem; margin-top: 0.3rem; padding: 0.75rem 0.9rem 0.8rem; background: var(--lamp-wash); border: 1px solid color-mix(in srgb, var(--lamp) 38%, transparent); border-radius: 0.8rem; }
.ob-card-new .ob-card-inc, .ob-card-same .ob-card-inc { margin: 0; padding: 0; border: 0; }
.ob-card-new .ob-card-inc li { font-weight: 560; }
.ob-card-new .ob-card-inc li::before { content: "+"; top: -0.04em; left: 0.1rem; width: auto; height: auto; border: 0; transform: none; color: var(--lamp); font-size: 1.3em; font-weight: 700; line-height: 1.2; }
.ob-card-lead { color: var(--lamp); font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.01em; }
.ob-card-same { display: grid; gap: 0.4rem; margin-top: 0.1rem; }
.ob-card-same .ob-card-lead { color: var(--ink-3); font-weight: 560; }
.ob-card-same .ob-card-inc { color: var(--ink-2); }
.ob-card-same .ob-card-inc li::before { border-color: var(--ink-3); }
.ob-card-quota { margin-top: 0.2rem; color: var(--ink-3); font-size: 0.875rem; }

.ob-kinds { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.2rem; }
.ob-pill { position: relative; display: block; margin: 0; }
.ob-pill input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.ob-pill span { display: grid; place-items: center; min-height: 2.9rem; padding: 0.35rem 1.2rem; background: var(--card-solid); border: 1px solid var(--line-2); border-radius: 999px; font-weight: 400; color: var(--ink-2); }
.ob-pill input:checked + span { border-color: var(--blue); background: var(--blue); color: var(--on-blue); font-weight: 600; box-shadow: 0 6px 18px rgba(59, 100, 232, 0.3); }
.ob-pill input:focus-visible + span { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 38%, transparent); }

.ob-addr { max-width: 34rem; }
.ob-addr label { display: block; margin-bottom: 0.45rem; font-size: 0.9375rem; font-weight: 500; color: var(--ink-2); }
.ob-addr[hidden] { display: none; }
.ob-input { width: 100%; height: 3.4rem; padding: 0 1rem; background: var(--sheet-2); border: 1px solid var(--line-2); border-radius: 14px; font-size: 1.0625rem; }
.ob-input:focus-visible { outline: 0; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 38%, transparent); }
.ob-input[aria-invalid="true"] { border-color: var(--ember); }
.ob-suffixed { display: flex; align-items: stretch; }
.ob-suffixed .ob-input { border-radius: 14px 0 0 14px; min-width: 0; }
.ob-suffix { display: grid; place-items: center; padding: 0 1rem; background: var(--card-solid); border: 1px solid var(--line-2); border-left: 0; border-radius: 0 14px 14px 0; color: var(--ink-2); font-size: 1.0625rem; white-space: nowrap; }
.ob-hint { margin-top: 0.45rem; color: var(--ink-3); font-size: 0.875rem; line-height: 1.4; max-width: 46ch; text-wrap: pretty; }
.ob-err, .ob-error { margin-top: 0.5rem; color: var(--ember); font-size: 0.9375rem; line-height: 1.4; max-width: 52ch; }
.ob-err[hidden], .ob-error[hidden] { display: none; }
.ob-live { margin-top: 1rem; color: var(--ink-2); overflow-wrap: anywhere; }
.ob-live[hidden] { display: none; }
.ob-live-url { color: var(--ink); font-weight: 600; }
.ob-none { color: var(--ink-2); }

.ob-foot { max-width: 40rem; padding-top: 1.4rem; border-top: 1px solid var(--line-3); }
.ob-go { display: block; width: 100%; max-width: 26rem; min-height: 3.4rem; padding: 0.6rem 1rem; margin-top: 1rem; background: var(--go); color: var(--on-go); border: 0; border-radius: 999px; font-size: 1.0625rem; font-weight: 600; line-height: 1.2; box-shadow: 0 0 0 3px rgba(61, 220, 151, 0.2), 0 8px 24px rgba(61, 220, 151, 0.3); transition: transform 0.12s ease-out; }
@media (hover: hover) and (pointer: fine) { .ob-go:hover:not(:disabled) { filter: brightness(1.08); } }
.ob-go:active:not(:disabled) { transform: scale(0.98); }
.ob-go[aria-busy="true"] { filter: saturate(0.5); cursor: progress; }
.ob-go:disabled { background: var(--sheet-hi); color: var(--ink-2); box-shadow: none; cursor: not-allowed; }
.ob-gate { margin-top: 0.7rem; color: var(--ink-2); font-size: 0.9375rem; max-width: 46ch; text-wrap: pretty; }
.ob-gate[hidden] { display: none; }
.ob-fine { margin-top: 0.9rem; color: var(--ink-3); font-size: 0.9375rem; max-width: 46ch; text-wrap: pretty; }

/* who is ordering */
.ob-field + .ob-field { margin-top: 1rem; }
.ob-kinds + .ob-hint { margin: -0.6rem 0 1rem; }
.ob-kinds + .ob-hint[hidden], .ob-pre-pick[hidden] { display: none; }
.ob-kinds ~ .ob-err { margin: -0.6rem 0 1rem; }
.ob-comp { margin-top: 1.1rem; }

/* the information before the contract: short rows, every required fact in view; the fold only works an example */
.ob-pre { max-width: 40rem; padding: 1.1rem 1.2rem 0.4rem; background: var(--card-bg), var(--card-solid); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.ob-pre-h { margin-bottom: 0.2rem; font-size: 1.0625rem; font-weight: 620; letter-spacing: -0.005em; }
.ob-pre-pick { margin: 0.4rem 0 0.6rem; max-width: none; }
.ob-pre-l { margin-top: 0.4rem; }
.ob-pre-r { display: grid; gap: 0.15rem; padding: 0.75rem 0; border-top: 1px solid var(--line); }
.ob-pre-r:first-child { border-top: 0; }
.ob-pre-r dt { color: var(--ink-3); font-size: 0.875rem; font-weight: 560; letter-spacing: 0.01em; }
.ob-pre-r dd { line-height: 1.45; text-wrap: pretty; overflow-wrap: anywhere; }
.ob-pre-r dd b { font-weight: 620; }
.ob-pre-ln { display: block; color: var(--ink-2); }
.ob-pre-ln a, .ob-pre-r dd a { color: var(--ink); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
.ob-more { border-top: 1px solid var(--line); }
.ob-more summary { display: flex; align-items: center; min-height: 2.9rem; color: var(--ink); font-weight: 560; }
.ob-more-b { display: grid; gap: 0.6rem; padding: 0.1rem 0 0.9rem 1.05rem; color: var(--ink-2); font-size: 0.9375rem; text-wrap: pretty; }
.ob-pre-terms { border-top: 1px solid var(--line); }
.ob-pre-terms a { display: flex; align-items: center; min-height: 3rem; color: var(--ink); font-weight: 600; text-underline-offset: 0.2em; }
@media (min-width: 640px) {
  .ob-pre { padding-inline: 1.5rem; }
  .ob-pre-r { grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0.2rem 1.2rem; }
  .ob-pre-r dt { padding-top: 0.12rem; }
}

/* the two boxes: real checkboxes, unticked, the whole row the target */
.ob-checks { display: grid; gap: 0.5rem; max-width: 40rem; margin-top: 1.1rem; }
.ob-chk { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.85rem; align-items: start; min-height: 3rem; padding: 0.55rem 0; margin: 0; cursor: pointer; }
.ob-chk input { appearance: none; -webkit-appearance: none; position: relative; width: 1.6rem; height: 1.6rem; margin: 0.05rem 0 0; background: var(--sheet-2); border: 2px solid var(--ink-3); border-radius: 0.4rem; cursor: pointer; transition: background-color 0.12s ease-out, border-color 0.12s ease-out; }
.ob-chk input::after { content: ""; position: absolute; left: 0.34rem; top: 0.2rem; width: 0.7rem; height: 0.38rem; border-left: 2.5px solid var(--on-blue); border-bottom: 2.5px solid var(--on-blue); transform: rotate(-48deg) scale(0); transition: transform 0.12s ease-out; }
.ob-chk input:checked { background: var(--blue); border-color: var(--blue-lit); }
.ob-chk input:checked::after { transform: rotate(-48deg) scale(1); }
.ob-chk input:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 0.4rem; }
.ob-chk-t { line-height: 1.45; text-wrap: pretty; }
.ob-chk-t a { color: var(--ink); text-underline-offset: 0.2em; font-weight: 600; }
.ob-early { display: grid; }
.ob-early[hidden] { display: none; }
.ob-chk-h { margin: -0.2rem 0 0.4rem 2.45rem; }
@media (prefers-reduced-motion: reduce) { .ob-chk input, .ob-chk input::after, .ob-go { transition: none; } }

/* directly before the button: the service, the price, how long it runs and how it ends, once more */
.ob-last { display: grid; gap: 0.2rem; padding: 0.95rem 1.1rem 1rem; background: var(--lamp-wash); border: 1px solid color-mix(in srgb, var(--lamp) 38%, transparent); border-radius: 1rem; }
.ob-last p { color: var(--ink-2); text-wrap: pretty; }
.ob-last .ob-last-h { color: var(--lamp); font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.01em; }
.ob-last .ob-last-main { color: var(--ink); font-size: 1.125rem; }
.ob-last-main b { font-weight: 620; }

/* the order, in the account grid */
#order[hidden] { display: none; }
.ob-plan { font-size: 1.15rem; }
.ob-addr-line { margin-top: 0.3rem; color: var(--ink-2); overflow-wrap: anywhere; }
.ob-addr-line .ob-v { color: var(--ink); }
.ob-inv { margin-top: 0.5rem; color: var(--ink-2); font-size: 0.9375rem; }
.ob-inv-state[data-state="issued"] { color: var(--ink); font-weight: 600; }
.ob-lead { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); max-width: 34rem; text-wrap: pretty; }
.ob-withdraw-wrap { margin-top: 1rem; }
.ob-withdraw { min-height: 2.75rem; padding: 0 1.2rem; background: transparent; color: var(--ink); border: 1px solid var(--line-2); border-radius: 999px; font-weight: 600; }
.ob-withdraw:hover, .ob-withdraw:focus-visible { border-color: var(--blue-lit); }
.ob-reason { margin: 0.8rem 0 0; padding: 0.2rem 0 0.2rem 1rem; border-left: 2px solid var(--line-2); color: var(--ink-2); font-style: normal; text-wrap: pretty; max-width: 34rem; }
.ob-site { font-weight: 650; text-underline-offset: 0.2em; }

.ob-steps { display: grid; gap: 0.2rem; margin-top: 1rem; }
.ob-step { display: flex; gap: 0.8rem; align-items: baseline; padding: 0.45rem 0; }
.ob-step-mk { flex: none; position: relative; top: 0.12em; width: 0.95rem; height: 0.95rem; border-radius: 50%; border: 2px solid var(--ink-3); }
.ob-step[data-state="done"] .ob-step-mk { border-color: var(--lamp); background: var(--lamp); }
.ob-step[data-state="done"] .ob-step-mk::after { content: ""; position: absolute; left: 0.14rem; top: 0.1rem; width: 0.38rem; height: 0.2rem; border-left: 2px solid var(--on-state); border-bottom: 2px solid var(--on-state); transform: rotate(-48deg); }
.ob-step[data-state="now"] .ob-step-mk { border-color: var(--lamp); animation: ob-pulse 1.8s ease-out infinite; }
.ob-step[data-state="stuck"] .ob-step-mk { border-color: var(--amber); }
.ob-step[data-state="todo"] { color: var(--ink-3); }
.ob-step-t b { font-weight: 600; color: inherit; }
.ob-step[data-state="done"] .ob-step-t, .ob-step[data-state="now"] .ob-step-t, .ob-step[data-state="stuck"] .ob-step-t { color: var(--ink); }
.ob-step-t span { color: var(--ink-2); }
.ob-step[data-state="todo"] .ob-step-t span { color: var(--ink-3); }
@keyframes ob-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lamp) 60%, transparent); } 70%, 100% { box-shadow: 0 0 0 0.6rem transparent; } }
@media (prefers-reduced-motion: reduce) { .ob-step[data-state="now"] .ob-step-mk { animation: none; background: color-mix(in srgb, var(--lamp) 40%, transparent); } }
.ob-prob { margin-top: 0.8rem; padding: 0.7rem 0.9rem; background: var(--amber-wash); border: 1px solid color-mix(in srgb, var(--amber) 50%, transparent); border-radius: 0.8rem; max-width: 34rem; text-wrap: pretty; }
.ob-dns { margin-top: 1rem; padding: 0.9rem 1rem; background: var(--sheet-2); border: 1px solid var(--line-2); border-radius: 14px; max-width: 34rem; }
.ob-dns-h { font-weight: 600; text-wrap: pretty; }
.ob-dns-l { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.25rem 1rem; margin-top: 0.6rem; }
.ob-dns-l dt { color: var(--ink-3); font-weight: 600; }
.ob-dns-l code { font-family: var(--mono); font-size: 0.875rem; overflow-wrap: anywhere; user-select: all; }

@media (max-width: 559px) {
  .ob-pre-r dd { font-size: 1rem; }
  .ob-suffixed { flex-direction: column; }
  .ob-suffixed .ob-input { border-radius: 14px 14px 0 0; }
  .ob-suffix { border-left: 1px solid var(--line-2); border-top: 0; border-radius: 0 0 14px 14px; justify-content: start; min-height: 2.6rem; }
  .ob-go { max-width: none; }
}

/* the order is the first card of the account grid; the others move down one row */
@media (min-width: 840px) {
  .account-grid:has(#order:not([hidden])) #order { grid-column: 1; grid-row: 1; }
  .account-grid:has(#order:not([hidden])) #plan { grid-row: 2; }
  .account-grid:has(#order:not([hidden])) #twofa { grid-row: auto; }
  .account-grid:has(#order:not([hidden])) #contact { grid-row: 1 / span 3; }
}
/* month / year above the plan cards: two equal halves, the year's saving said quietly under its name */
.ob-period { max-width: 28rem; flex-wrap: nowrap; }
.ob-period .ob-pill { flex: 1 1 0; min-width: 0; }
.ob-period .ob-pill span { height: 100%; gap: 0.05rem; padding: 0.35rem 0.8rem; text-align: center; border-radius: 1.5rem; }
.ob-period .ob-pill small { color: var(--ink-3); font-size: 0.8125rem; font-weight: 500; line-height: 1.25; }
.ob-period .ob-pill input:checked + span small { color: var(--on-blue); }
.ob-pill.is-off { cursor: not-allowed; }
.ob-pill.is-off input { cursor: not-allowed; }
.ob-pill.is-off span { border-style: dashed; color: var(--ink-3); background: transparent; }
.ob-note { margin: -0.6rem 0 1rem; padding: 0.7rem 0.9rem; max-width: 40rem; background: var(--amber-wash); border: 1px solid color-mix(in srgb, var(--amber) 50%, transparent); border-radius: 0.8rem; font-size: 0.9375rem; text-wrap: pretty; }
.ob-note[hidden] { display: none; }
.ob-q-hint { margin: -0.45rem 0 1rem; }
.ob-pre-r dd > .ob-pre-ln:first-child { color: var(--ink); }
.ob-cl { color: var(--ink); font-weight: 600; text-underline-offset: 0.2em; white-space: nowrap; }
.ob-chk-h .ob-cl { color: var(--ink-2); }
.ob-pre-c2 { border-top: 0; }
.ob-pre-c2 a { min-height: 2.75rem; font-weight: 500; color: var(--ink-2); }
.ob-pre-r dd .ob-pre-ln b { color: var(--ink); }