/* /start, the WebMade checkout (Owner 20:27 UTC 2026-10-26, renders checkout-desktop-B and checkout-mobile-B in
   brand/exact-art-20261026/checkout-renders): obsidian surfaces, white display type, one cyan accent and one cyan
   button. Desktop is measured at the render's 1586 px, phones at its 467 px (934 px at 2x). Everything sits in one
   grid: the steps on the left, "Your order" sticky on the right; on phones one column with the order after the plans. */
.co-page {
  --c: #37d7ff; --c2: #46e1f6; --ob: #05080f; --surf: rgba(8, 12, 22, .78); --surf2: rgba(255, 255, 255, .025);
  --edge: rgba(255, 255, 255, .15); --edge2: rgba(255, 255, 255, .09); --t1: #fff; --t2: #c3cad8; --t3: #9ba5b7;
  --ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--ob); color: var(--t1); font-family: var(--ui); interpolate-size: allow-keywords;
}
.co-page .keyart::after { background: radial-gradient(120% 90% at 55% 40%, rgba(5,8,15,.35) 0%, rgba(5,8,15,.7) 70%), linear-gradient(180deg, rgba(5,8,15,.6), rgba(5,8,15,.2) 25%, rgba(5,8,15,.82)); }
.co-page h1, .co-page h2 { font-family: var(--ui); }

/* Header: logo and name, "Checkout" with its lock in the middle, Back on the right. */
.co-page .co-bar { position: relative; inset: auto; z-index: 40; display: flex; align-items: center; gap: 19px; min-height: 76px; margin: 0; padding: 0 clamp(16px, 4.6vw, 74px) 0 clamp(16px, 4.3vw, 68px); border: 0; border-bottom: 1px solid var(--edge2); border-radius: 0; background: linear-gradient(180deg, rgba(5,8,15,.72), rgba(5,8,15,.35)); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.co-page .co-bar .mark { width: 46px; height: 46px; filter: drop-shadow(0 0 12px rgba(55,215,255,.45)); }
.co-page .co-bar b { font: 700 26px/1 var(--ui); letter-spacing: -.02em; }
.co-lock { position: absolute; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 12px; margin: 0; font: 500 19px/1 var(--ui); color: var(--t1); }
.co-lock svg { width: 17px; height: 17px; color: var(--t2); }
.co-page .co-bar .wm-back { order: 3; margin-left: auto; min-height: 44px; padding: 0 2px; gap: 18px; border: 0; background: none; font: 400 18px/1 var(--ui); color: var(--t1); }
.co-page .co-bar .wm-back span { font-size: 30px; font-weight: 300; margin-top: -3px; color: var(--t2); }
.co-page .co-bar .wm-back:hover { background: none; color: var(--c); }
.co-page .co-bar .wm-back:hover span { color: var(--c); }

/* The grid */
.co-page .co { min-height: 0; padding: 22px clamp(16px, 4.5vw, 71px) 40px; }
.co-grid { max-width: 1444px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 523px; column-gap: 46px; align-items: start; }
.co-grid > * { grid-column: 1; min-width: 0; }
.co-grid > .co-order { grid-column: 2; grid-row: 1 / span 6; position: sticky; top: 22px; }

/* Hero: the steps, the title, the film, and the device plinth behind them. */
.co-hero { position: relative; min-height: 593px; padding-top: 8px; }
.co-hero > :not(.plinth) { position: relative; z-index: 1; }
.co-progress { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.co-steps { display: flex; align-items: center; gap: 0; max-width: none; margin: 0; }
.co-steps i { height: auto; background: none; display: inline-flex; align-items: center; gap: 17px; font: 400 17px/1 var(--ui); font-style: normal; color: var(--t2); counter-increment: cos; }
.co-steps { counter-reset: cos; }
.co-steps i::before { content: counter(cos); flex: none; width: 32px; height: 32px; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center; font: 500 16px/1 var(--ui); border: 2px solid var(--c); color: var(--t1); }
.co-steps i:not(:last-child)::after { content: ""; width: 36px; height: 2px; margin: 0 18px 0 5px; border-radius: 2px; background: var(--c); opacity: .85; }
.co-steps i.done { background: none; }
.co-steps i.done::before { content: ""; background: no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.2 8.4 3 3 6.6-6.8' fill='none' stroke='%2337d7ff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.co-steps i.now { background: none; color: var(--t1); font-weight: 600; }
.co-steps i.now::before { box-shadow: 0 0 14px rgba(55,215,255,.45); }
.co-hero h1 { margin: 38px 0 0; max-width: none; font: 700 70px/1 var(--ui); letter-spacing: -.035em; color: var(--t1); }
.co-sub { margin: 6px 0 0; font: 300 41px/1.1 var(--ui); letter-spacing: -.02em; color: #b9c2d3; }
.co-hero .why { margin: 16px 0 0; max-width: 34em; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--edge); background: var(--surf); color: var(--t1); font-size: 15px; }
.rail { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.film { margin: 0; }
.film button { all: unset; cursor: pointer; display: inline-flex; border-radius: 999px; }
.film button:focus-visible { outline: 2px solid var(--c); outline-offset: 4px; }
.film .play { display: inline-flex; align-items: center; gap: 15px; padding-right: 20px; border-radius: 999px; background: rgba(4,9,18,.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: 400 18px/1 var(--ui); color: #59dcf2; transition: color .2s; }
.film .play i { flex: none; width: 50px; height: 50px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--c); display: grid; place-items: center; color: var(--c); font-style: normal; transition: background .2s, transform .15s, box-shadow .2s; }
.film .play i svg { width: 18px; height: 18px; margin-left: 3px; }
.film button:hover .play { color: #9aefff; }
.film button:hover .play i { background: rgba(55,215,255,.12); box-shadow: 0 0 22px rgba(55,215,255,.45); }
.film button:active .play i { transform: scale(.94); }
.film video { display: block; width: min(100%, 560px); border-radius: 18px; border: 1px solid var(--edge); }
.rail .wm-tut-thumb { justify-self: start; }

/* The device plinth: the render's own devices, their screens a "Your Business" demo, as a living still. */
.plinth { position: absolute; z-index: 0; left: 24.8%; top: 182px; width: 81.1%; aspect-ratio: 1420 / 850; pointer-events: none; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 16%, #000 94%, transparent), linear-gradient(180deg, transparent, #000 14%, #000 90%, transparent); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 16%, #000 94%, transparent) intersect, linear-gradient(180deg, transparent, #000 14%, #000 90%, transparent); }
.plinth img { display: block; width: 100%; height: 100%; }
.plinth::after { content: ""; position: absolute; inset: -20%; background: linear-gradient(105deg, transparent 38%, rgba(140,230,255,.10) 46%, rgba(255,255,255,.16) 50%, rgba(140,230,255,.10) 54%, transparent 62%); mix-blend-mode: screen; transform: translateX(-60%); animation: plinth-sheen 9s ease-in-out 1.2s infinite; }
.plinth::before { content: ""; position: absolute; z-index: 1; left: 71.5%; top: 49%; width: 20%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(70,200,255,.35), transparent 65%); mix-blend-mode: screen; animation: plinth-glow 4.8s ease-in-out infinite; }
@keyframes plinth-sheen { 0% { transform: translateX(-60%); } 55%, 100% { transform: translateX(60%); } }
@keyframes plinth-glow { 0%, 100% { opacity: .35; transform: scale(.92); } 50% { opacity: .9; transform: scale(1.06); } }

/* Cards on the left: profile, plans, review. */
.co-page .co-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.co-page .ob-step { border: 0; border-radius: 0; background: none; box-shadow: none; }
.co-page .ob-step.now { border: 0; background: none; box-shadow: none; }
.co-page .ob-step > .ob-row { min-height: 0; padding: 0; gap: 0; }
.co-page .ob-step .ob-name b { font: 600 18px/1.25 var(--ui); letter-spacing: -.005em; }
.co-page .ob-step .ob-name small { margin-top: 2px; font-size: 15px; color: var(--t2); }
.co-page .ob-step .ob-state { font-size: 14px; font-weight: 500; color: var(--t3); }
.co-page .ob-step.done .ob-state { color: var(--c); }
.co-page .ob-step > .ob-body { padding: 0; }
.co-link { all: unset; cursor: pointer; flex: none; display: inline-flex; align-items: center; gap: 12px; min-height: 40px; font: 400 15px/1 var(--ui); color: var(--c); }
.co-link:not([hidden]) { display: inline-flex; }
.co-link[hidden] { display: none; }
.co-link { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.co-link span { text-decoration: none; font-size: 18px; }
.co-link:hover { color: #9aefff; }
.co-link:active { opacity: .7; }
.co-link:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; border-radius: 4px; }
.tile { flex: none; display: grid; place-items: center; width: 47px; height: 47px; box-sizing: border-box; border-radius: 14px; border: 1px solid var(--edge2); background: rgba(55,215,255,.07); color: var(--c); }
.tile svg { width: 24px; height: 24px; }

.co-profile { position: relative; z-index: 2; border-radius: 16px !important; border: 1px solid var(--edge) !important; background: var(--surf) !important; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.co-page .co-profile > .ob-row { min-height: 61px; padding: 0 43px 0 40px !important; gap: 17px !important; }
.co-profile .ob-name b { font-size: 18px; font-weight: 500; }
.co-profile .ob-name small { font-size: 15px; margin-top: 0; }
.co-profile.done .ob-name small::before { content: ""; display: inline-block; width: 13px; height: 13px; margin: 0 7px -1px 0; border-radius: 50%; background: var(--c) no-repeat center / 9px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.2 8.4 3 3 6.6-6.8' fill='none' stroke='%2305080f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.co-profile .ob-state:empty { display: none; }
.co-profile > .ob-body { padding: 0 40px 22px 104px !important; }
.co-profile .phone-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.co-profile label { color: var(--t2); font-weight: 500; }
.co-page input, .co-page select { min-height: 50px; border-radius: 12px; border-color: var(--edge); background: rgba(255,255,255,.04); font-family: var(--ui); }
.co-page .consent { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--t3); cursor: pointer; }
.co-page .consent input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 1px 0 0; accent-color: var(--c); }
.co-page .consent span { color: var(--t2); }

/* Buttons: one cyan family, with real hover and press states. */
.co-page .glow { background: var(--wm-bubble); color: #04202a; font: 600 16px/1 var(--ui); box-shadow: var(--wm-bubble-edge), var(--wm-glow-cta); transition: transform .15s, box-shadow .2s, filter .2s; }
.co-page .glow:is(:hover, :focus-visible):not([disabled]) { transform: translateY(-1px); filter: brightness(1.06); box-shadow: var(--wm-bubble-edge), var(--wm-glow-cta-hover); }
.co-page .glow:active:not([disabled]) { transform: translateY(1px) scale(.985); filter: brightness(.96); box-shadow: inset 0 1px 3px rgba(0,60,90,.4), var(--wm-glow-press); }
.co-page .glow:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.co-page .glow[disabled] { opacity: .5; cursor: not-allowed; box-shadow: var(--wm-glow-off); }
.co-page .phone-row .glow { min-height: 50px; padding: 0 22px; }

/* Plans: three compact cards in one row; the picked one lifts and a cyan edge sweeps across it. */
.co-plans { margin-top: 16px; }
.co-plans > .ob-row { padding: 0 16px 0 19px !important; align-items: flex-end !important; }
.co-plans .ob-name b { font: 600 21px/1.25 var(--ui); }
.co-plans .ob-name small { font-size: 14.5px; color: var(--t2); margin-top: 4px; }
.co-plans .co-link { min-height: 30px; margin-bottom: 14px; }
.plans { list-style: none; margin: 11px 2px 0 5px; padding: 0; display: grid; grid-template-columns: 278fr 278fr 284fr; gap: 14px; }
li.plan { position: relative; border-radius: 14px; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
li.plan:hover { transform: translateY(-2px); }
li.plan:has(input:checked) { transform: translateY(-3px); box-shadow: 0 16px 40px -18px rgba(55,215,255,.55); }
li.plan::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none; background: linear-gradient(100deg, transparent 0 35%, #b8f6ff 48%, #37d7ff 52%, transparent 65% 100%) 120% 0 / 260% 100% no-repeat; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: 0; }
li.plan.sweep::after { animation: plan-sweep .9s cubic-bezier(.3,.6,.2,1) both; }
@keyframes plan-sweep { 0% { opacity: 1; background-position: 120% 0; } 85% { opacity: 1; } 100% { opacity: 0; background-position: -20% 0; } }
label.plan { position: relative; display: block; height: 110px; box-sizing: border-box; border-radius: 14px; border: 1px solid rgba(255,255,255,.2); background: rgba(6,10,20,.66); cursor: pointer; transition: border-color .2s, background .2s; }
label.plan:hover { border-color: rgba(55,215,255,.5); }
li.plan:active label.plan { transform: scale(.99); }
li.plan:has(input:checked) label.plan { border: 2px solid var(--c); background: linear-gradient(180deg, rgba(18,52,74,.55), rgba(8,22,36,.72)); }
.plan input { position: absolute; opacity: 0; pointer-events: none; }
.plan .ob-row { display: flex; align-items: center; gap: 0; height: 100%; padding: 0 12px 0 21px; }
li.plan:has(input:checked) .plan .ob-row { padding-left: 20px; }
.plan input:focus-visible + .ob-row { outline: 2px solid var(--c); outline-offset: 3px; border-radius: 14px; }
.plan .dot { flex: none; width: 30px; height: 30px; box-sizing: border-box; margin-right: 18px; border-radius: 50%; border: 2px solid #8f99ab; display: grid; place-items: center; transition: border-color .2s, background .2s; }
.plan input:checked + .ob-row .dot { border: 0; background: var(--c); box-shadow: 0 0 14px rgba(55,215,255,.5); }
.plan input:checked + .ob-row .dot::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 4px solid #062130; box-sizing: border-box; background: var(--c); }
.plan .ob-name { flex: 1; min-width: 0; display: grid; gap: 3px; }
.plan .ob-name b { display: block; font: 600 17px/1.2 var(--ui); color: #fff; }
.plan .ob-name .tagline { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 13px; line-height: 1.2; color: #aab3c3; overflow: hidden; }
.plan .ob-name .crew { display: none; }
.plan .price { display: block; margin-top: 3px; font: 500 21px/1.2 var(--ui); color: #fff; white-space: nowrap; letter-spacing: -.01em; }
.plan .price small { display: inline; margin: 0; font-size: 17px; font-weight: 300; color: #e2e7ef; }
.plan .rec { position: absolute; top: -10px; right: 12px; padding: 3px 9px; border-radius: 999px; font: 600 11px/1.2 var(--ui); letter-spacing: .02em; color: #04202a; background: var(--c); }
.plan .side .wm-tut-thumb { display: none; }

/* What you get with the picked plan, opening and changing with a smooth height. */
.plan-more { margin: 14px 2px 0 5px; border-radius: 14px; border: 1px solid var(--edge2); background: rgba(6,10,20,.6); }
.plan-more summary, .co-fold summary, .co-page .compare summary, .co-page .faq summary, .ref-more summary { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; font: 500 15px/1.3 var(--ui); color: var(--t1); cursor: pointer; list-style: none; border-radius: 14px; transition: background .2s; }
.plan-more summary::-webkit-details-marker, .co-fold summary::-webkit-details-marker, .ref-more summary::-webkit-details-marker { display: none; }
.plan-more summary::after, .co-fold summary::after, .ref-more summary::after { content: ""; margin-left: auto; width: 9px; height: 9px; border: solid var(--c); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s; }
.plan-more[open] > summary::after, .co-fold[open] > summary::after, .ref-more[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.plan-more summary:hover, .co-fold summary:hover, .co-page .compare summary:hover, .ref-more summary:hover { background: rgba(55,215,255,.06); }
.plan-more summary:focus-visible, .co-fold summary:focus-visible, .ref-more summary:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
.plan-more::details-content, .co-fold::details-content, .co-page .compare::details-content, .ref-more::details-content, .co-weby::details-content { height: 0; overflow: clip; transition: height .35s cubic-bezier(.2,.8,.2,1), content-visibility .35s allow-discrete; }
.plan-more[open]::details-content, .co-fold[open]::details-content, .co-page .compare[open]::details-content, .ref-more[open]::details-content, .co-weby[open]::details-content { height: auto; }
.more-in { padding: 0 18px 16px; transition: height .35s cubic-bezier(.2,.8,.2,1); overflow: hidden; }
.more-in .crew { margin: 0; font: 600 13px/1.3 var(--ui); letter-spacing: .02em; color: var(--c); }
.more-in .lead { margin: 4px 0 10px; font: 600 15px/1.35 var(--ui); color: #fff; }
.more-in ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 7px 18px; }
.more-in li { position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.4; color: var(--t2); }
.more-in li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--c); }
.more-in.swap { animation: more-in .35s ease both; }
@keyframes more-in { from { opacity: .2; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.co-page .compare, .co-page .faq-all { margin: 10px 2px 0 5px; border-radius: 14px; border: 1px solid var(--edge2); background: rgba(6,10,20,.6); }
.co-page .compare summary::before { color: var(--c); }
.co-page .faq-all .faq { padding: 0 8px 8px; }
.co-page .faq details { margin: 6px 0 0; border-color: var(--edge2); background: rgba(255,255,255,.02); }

/* Review: who referred them, then the two boxes beside the pay step. */
.co-review { margin-top: 16px; gap: 10px !important; }
.co-review > .ob-step:not([hidden]) { border-radius: 16px; border: 1px solid var(--edge); background: var(--surf); padding: 16px 20px; }
.co-review > .ob-step > .ob-row { gap: 14px; }
.co-review .ob-chip { width: 30px; height: 30px; font: 500 14px/1 var(--ui); border: 2px solid var(--c); color: #fff; }
.co-review .ob-step.done .ob-chip { background: var(--c); color: #04202a; }
.co-review .ob-body { padding: 10px 0 0 44px !important; }
.ref-q { margin: 0; font-size: 15px; color: var(--t2); }
.ref-more { margin: 10px 0 0; border-radius: 12px; border: 1px solid var(--edge2); }
.ref-more summary { min-height: 42px; padding: 0 14px; font-size: 14.5px; color: var(--c); }
.ref-more .phone-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 0 12px 12px; }
.co-page .ob-step.attn .ref-box { animation: refpulse 1.2s ease-in-out 2; border-radius: 12px; }
@keyframes refpulse { 50% { box-shadow: 0 0 40px rgba(55, 215, 255, .5); } }
.co-page .terms-fine { background: rgba(255,255,255,.025); border-color: var(--edge2); color: var(--t3); }
.co-page .terms .agree input { accent-color: var(--c); }

/* Single-line disclosures: what happens after paying, how to spot a real WebMade payment. */
.co-more { margin-top: 16px; display: grid; gap: 10px; }
.co-fold { border-radius: 14px; border: 1px solid var(--edge2); background: rgba(6,10,20,.6); }
.co-fold > ol { margin: 0; padding: 0 18px 16px 40px; display: grid; gap: 8px; font-size: 14.5px; line-height: 1.45; color: var(--t2); }
.co-fold > ol b { color: #fff; font-weight: 600; }
.co-fold .pay-only { margin: 0; padding: 0 18px 16px; font-size: 13px; line-height: 1.5; color: var(--t3); }

/* Ask WEBY: the pill; WEBY's line for this step opens under it. */
.co-weby { margin-top: 18px; justify-self: start; }
.co-weby > summary { display: inline-flex; align-items: center; gap: 22px; height: 42px; padding: 0 22px 0 0; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(8,12,22,.7); font: 400 17px/1 var(--ui); color: var(--t1); cursor: pointer; list-style: none; transition: border-color .2s, background .2s, transform .15s; }
.co-weby > summary::-webkit-details-marker { display: none; }
.co-weby > summary img { width: 50px; height: 50px; margin: -4px 0 -4px -1px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(55,215,255,.55), 0 0 18px rgba(55,215,255,.35); background: #0c1a4d; }
.co-weby > summary span { font-size: 20px; margin-left: -6px; }
.co-weby > summary:hover { border-color: rgba(55,215,255,.6); background: rgba(55,215,255,.08); }
.co-weby > summary:active { transform: scale(.98); }
.co-weby > summary:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.co-page .co-weby .ob-weby { position: static; width: auto; max-width: 520px; max-height: none; margin: 10px 0 0; border-radius: 16px; border-color: var(--edge); background: var(--surf); }

/* Your order */
.co-order { box-sizing: border-box; padding: 31px 42px 28px; border-radius: 22px; border: 1px solid rgba(255,255,255,.17); background: linear-gradient(180deg, rgba(14,19,30,.86), rgba(7,10,18,.9)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 80px rgba(0,0,0,.5); }
.co-sum { margin: 0; }
.co-sum h2 { margin: 0 0 16px; font: 600 26px/1.3 var(--ui); letter-spacing: -.01em; color: #fff; }
.co-item { display: flex; gap: 20px; align-items: center; margin: 0; padding: 2px 0 15px; border-top: 1px solid var(--edge2); border-bottom: 1px solid var(--edge2); }
.co-item .tile { width: 82px; height: 80px; margin-left: -4px; border-radius: 10px; border-color: rgba(255,255,255,.2); background: #0a101c; }
.co-item .tile img { width: 58px; height: 58px; filter: drop-shadow(0 0 10px rgba(55,215,255,.5)); }
.co-item b { display: block; font: 500 19px/1.3 var(--ui); color: #fff; }
.co-item small { display: block; margin-top: 3px; font-size: 15.5px; color: var(--t2); }
.co-item .wm-tut-link, .co-item a { font-size: 14px; }
.build { padding: 22px 0 0; }
.build ul { list-style: none; margin: 0; padding: 0 0 20px; display: grid; gap: 9px; border-bottom: 1px solid var(--edge2); }
.build li { display: flex; justify-content: space-between; gap: 12px; font: 400 17px/1.3 var(--ui); color: #dfe4ec; }
.build li b { color: #fff; font-weight: 500; white-space: nowrap; }
.build li.off b { color: #3fd5e6; }
.co-total { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 16px 0 0; color: #fff; }
.co-total > span:first-child { font: 500 19px/1.2 var(--ui); padding-top: 4px; }
.co-total .was { margin-right: 6px; color: var(--t3); font-size: 15px; }
.co-total .now-price { font: 700 52px/1 var(--ui); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.build .note, .co-plan .note { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: #aab3c3; }
.build .hint { margin: 4px 0 0; font-size: 13.5px; color: var(--t3); }
.co-plan { position: relative; margin: 22px -7px 0 -6px; padding: 16px 16px 14px 86px; min-height: 112px; box-sizing: border-box; border-radius: 14px; border: 1px solid var(--edge); background: rgba(255,255,255,.02); }
.co-plan .ic { position: absolute; left: 16px; top: 17px; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.06); border: 1px solid var(--edge2); }
.co-plan .ic svg { width: 24px; height: 24px; }
.co-plan p.row { display: flex; justify-content: space-between; gap: 12px; margin: 0; font: 500 19px/1.3 var(--ui); color: #fff; }
.co-plan p.row b { white-space: nowrap; font-weight: 500; font-variant-numeric: tabular-nums; }
.co-plan p.row b small { font-size: 19px; font-weight: 300; }
.co-plan .note { margin-top: 4px; line-height: 1.6; }
.co-order .paybar { position: static; display: block; margin: 22px -5px 0 -3px; padding: 0; border: 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
.co-order .paybar .glow { width: 100%; min-height: 65px; border-radius: 33px; font: 600 21px/1 var(--ui); gap: 14px; }
.co-order .paybar .glow span { font-size: 24px; }
.co-order #foot { margin: 10px 0 0; text-align: center; font-size: 14px; color: var(--t2); }
.co-order #foot.bad { color: #ffb4c0; }
.trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
#trust-pay { display: grid; justify-items: center; gap: 22px; padding: 22px 0 22px; font-size: 15px; color: var(--t2); }
#trust-pay svg { display: none; }
#trust-pay b { display: inline-flex; align-items: center; gap: 10px; font-weight: 400; color: #c9d0dc; }
#trust-pay b::before { content: ""; width: 14px; height: 16px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23aab3c3' d='M4.5 7V5a3.5 3.5 0 0 1 7 0v2h.5A1.5 1.5 0 0 1 13.5 8.5v5A1.5 1.5 0 0 1 12 15H4a1.5 1.5 0 0 1-1.5-1.5v-5A1.5 1.5 0 0 1 4 7h.5Zm1.5 0h4V5a2 2 0 0 0-4 0v2Z'/%3E%3C/svg%3E"); }
#trust-pay > span { display: grid; justify-items: center; gap: 20px; color: #d5dbe6; letter-spacing: .01em; }
#trust-refund, #trust-cancel { display: flex; gap: 22px; align-items: center; padding: 18px 0 0 8px; border-top: 1px solid var(--edge2); font-size: 15px; line-height: 1.5; color: #aab3c3; }
#trust-cancel { padding-top: 12px; border-top: 0; }
#trust-cancel > i { display: none; }
.trust .shield { flex: none; width: 34px; height: 36px; color: #e6ebf2; }
.trust b { display: block; font: 400 16.5px/1.4 var(--ui); color: #fff; }
.trust a { color: var(--c); text-underline-offset: 3px; }
.trust a:hover { color: #9aefff; }

/* The pinned pay bar on phones, shown only while the order's own button is off screen. */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--edge); background: rgba(5,8,15,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transform: translateY(0); transition: transform .25s; }
.dock[hidden] { display: flex; transform: translateY(110%); visibility: hidden; }
.dock .paybar-sum { flex: 1; min-width: 0; margin: 0; font-size: 13px; color: var(--t2); }
.dock .paybar-sum b { color: #fff; font: 700 17px/1.2 var(--ui); }
.dock .glow { flex: none; min-height: 46px; padding: 0 20px; border-radius: 23px; }

.co-page .legal-foot { display: flex; justify-content: flex-end; gap: 0; max-width: 1444px; margin: 0 auto; padding: 8px clamp(16px, 4.5vw, 71px) calc(28px + env(safe-area-inset-bottom)); font-size: 15px; opacity: 1; }
.co-page .legal-foot a { padding: 0 20px; color: #c9d0dc; text-decoration: none; border-left: 1px solid rgba(255,255,255,.3); line-height: 1; }
.co-page .legal-foot a:first-child { border-left: 0; }
.co-page .legal-foot a:last-child { padding-right: 0; }
.co-page .legal-foot a:hover { color: var(--c); }

/* Non-build items: the item row is a card of its own. */
#step-item:not([hidden]), #step-build:not([hidden]) { margin: 0 0 12px; padding: 14px 20px; border-radius: 16px; border: 1px solid var(--edge); background: var(--surf); }
#step-build { display: none; }
#step-item .side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
#step-item .ob-row { gap: 14px; }
.item-price { font: 600 20px/1.2 var(--ui); color: #fff; white-space: nowrap; }

@media (max-width: 1240px) {
  .co-grid { grid-template-columns: minmax(0, 1fr) 420px; column-gap: 28px; }
  .co-order { padding: 26px 30px 24px; }
  .co-total .now-price { font-size: 44px; }
  .co-hero h1 { font-size: 60px; }
  .co-sub { font-size: 34px; }
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .plan .dot { margin-right: 16px; }
  .plan .ob-row { padding-left: 14px; }
}
@media (max-width: 999px) and (min-width: 760px) {
  .co-grid { grid-template-columns: minmax(0, 1fr) 360px; }
  .plan .dot { display: none; }
}

/* Phones and small tablets: the 467 px render, one column. */
@media (max-width: 759px) {
  .co-page .co-bar { width: auto; min-height: 43px; margin: 0 clamp(14px, 11vw, 52px); padding: 0; gap: 9px; background: none; }
  .co-page .co-bar .mark { width: 30px; height: 30px; }
  .co-page .co-bar b { font-size: 18.5px; }
  .co-page .co-bar .wm-back { order: -1; margin: 0 6px 0 -8px; min-height: 40px; padding: 0 6px; font-size: 0; }
  .co-page .co-bar .wm-back span { font-size: 28px; color: var(--c); margin: -4px 0 0; }
  .co-page .co-lock { position: static; transform: none; margin-left: auto; gap: 8px; font-size: 15px; font-weight: 400; color: #dfe4ec; }
  .co-page .co-lock svg { width: 13px; height: 13px; }
  .co-page .co { padding: 0 clamp(12px, 9vw, 42px) 24px; }
  .co-page .co-grid { display: flex; flex-direction: column; }
  .co-page .co-grid > * { align-self: stretch; }
  .co-page .co-grid > .co-weby { align-self: flex-start; }
  .co-page .co-hero { order: 1; min-height: 221px; padding-top: 6px; }
  .co-page .co-first { order: 2; }
  .co-page .co-review { order: 5; }
  .co-page .co-grid > .co-order { order: 4; position: relative; top: auto; }
  .co-page .co-more { order: 6; }
  .co-page .co-weby { order: 7; }
  .co-page .co-steps { justify-content: space-between; margin: 0 6% 0 6.5%; }
  .co-page .co-steps i { gap: 8px; font-size: 13px; flex: none; }
  .co-page .co-steps i:not(:last-child) { flex: 1; }
  .co-page .co-steps i:not(:last-child)::after { flex: 1; width: auto; height: 1px; margin: 0 8px 0 3px; }
  .co-page .co-steps i::before { width: 18px; height: 18px; font-size: 10.5px; border-width: 1px; }
  .co-page .co-steps i.done::before { background: var(--c) no-repeat center / 11px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.2 8.4 3 3 6.6-6.8' fill='none' stroke='%2305080f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
  .co-page .co-hero h1 { margin: 12px 0 0 11px; font-size: 36.5px; letter-spacing: -.03em; }
  .co-page .co-sub { margin: 4px 0 0 11px; max-width: 60%; font-size: 13.5px; font-weight: 400; letter-spacing: -.005em; color: #e8ecf2; }
  .co-page .rail { margin: 6px 0 0 12px; }
  .co-page .film .play { gap: 9px; padding: 3px 12px 3px 3px; font-size: 13.5px; }
  .co-page .film .play i { width: 19px; height: 19px; border-width: 1.5px; }
  .co-page .film .play i svg { width: 8px; height: 8px; margin-left: 1px; }
  .co-page .plinth { left: auto; right: calc(-1 * clamp(12px, 9vw, 42px)); top: 52px; width: 80.7vw; aspect-ratio: 1500 / 686; -webkit-mask: linear-gradient(90deg, transparent, #000 14%), linear-gradient(0deg, transparent, #000 10%); -webkit-mask-composite: source-in; mask: linear-gradient(90deg, transparent, #000 14%) intersect, linear-gradient(0deg, transparent 0, #000 10%); }
  .co-page .plinth::before { left: 25.6%; top: 51%; width: 16%; }
  .co-page .co-profile { border-radius: 12px !important; }
  .co-page .co-profile > .ob-row { min-height: 47px; padding: 0 12px !important; gap: 10px !important; }
  .co-page .co-profile .tile { width: 32px; height: 32px; border-radius: 6px; background: rgba(255,255,255,.04); border-color: var(--edge); color: #e6ebf2; }
  .co-page .co-profile .tile svg { width: 17px; height: 17px; }
  .co-page .co-profile .ob-name b { font-size: 15px; font-weight: 600; }
  .co-page .co-profile .ob-name small { font-size: 13px; }
  .co-page .co-profile .co-link { font-size: 14px; text-decoration: none; gap: 10px; min-height: 36px; }
  .co-page .co-profile > .ob-body { padding: 0 12px 14px !important; }
  .co-page .co-profile .phone-row { grid-template-columns: 1fr; }
  .co-page .tel-row { grid-template-columns: minmax(0, 6.6em) 1fr; }
  .co-page .co-plans { margin-top: 7px; padding: 8px 12px 10px; border-radius: 14px; border: 1px solid var(--edge); background: var(--surf); }
  .co-page .co-plans > .ob-row { padding: 0 1px 0 2px !important; align-items: flex-start !important; }
  .co-page .co-plans .ob-name b { font-size: 17px; }
  .co-page .co-plans .ob-name small { font-size: 13px; margin-top: 2px; }
  .co-page .co-plans .co-link { font-size: 13.5px; text-decoration: none; gap: 8px; margin: 2px 0 0; min-height: 24px; }
  .co-page .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; margin: 10px 1px 0; }
  .co-page label.plan { height: 45px; border-radius: 7px; }
  .co-page li.plan, .co-page li.plan:has(input:checked) label.plan { border-radius: 7px; }
  .co-page li.plan:has(input:checked) { transform: translateY(-1px); }
  .co-page .plan .ob-row, .co-page li.plan:has(input:checked) .plan .ob-row { padding: 0 6px 0 11px; }
  .co-page .plan .dot { width: 17px; height: 17px; margin-right: 12px; border-width: 1.5px; }
  .co-page .plan input:checked + .ob-row .dot::after { width: 9px; height: 5px; border: solid #05080f; border-width: 0 0 2px 2px; border-radius: 0; background: none; transform: translateY(-1px) rotate(-45deg); }
  .co-page .plan .ob-name { gap: 0; }
  .co-page .plan .ob-name b { font-size: 13px; }
  .co-page .plan .ob-name .tagline { display: none; }
  .co-page .plan .price { margin: 0; font-size: 17px; font-weight: 400; letter-spacing: -.02em; }
  .co-page .plan .price small { font-size: 17px; font-weight: 300; }
  .co-page .plan .rec { top: -8px; right: 6px; font-size: 9.5px; padding: 2px 6px; }
  .co-page .plan-more, .co-page .compare, .co-page .faq-all { margin: 8px 0 0; border-radius: 10px; }
  .co-page .more-in ul { grid-template-columns: 1fr; }
  .co-page .co-review { margin-top: 8px; }
  .co-page .co-review > .ob-step:not([hidden]) { padding: 12px 14px; border-radius: 14px; }
  .co-page .co-review .ob-body { padding: 10px 0 0 !important; }
  .co-page .co-grid > .co-order { margin-top: 8px; padding: 9px 12px 12px; border-radius: 14px; }
  .co-page .co-sum h2 { margin: 0 0 6px 3px; font-size: 17px; line-height: 1.3; }
  .co-page .co-item { gap: 10px; padding: 4px 10px; border: 0; border-radius: 6px; background: rgba(255,255,255,.035); }
  .co-page .co-item .tile { width: 36px; height: 36px; margin: 0; border-radius: 6px; }
  .co-page .co-item .tile img { width: 28px; height: 28px; }
  .co-page .co-item b { font-size: 16px; }
  .co-page .co-item small { margin-top: 0; font-size: 14px; }
  .co-page .build { padding: 6px 3px 0; }
  .co-page .build ul { gap: 2px; padding-bottom: 8px; }
  .co-page .build li { font-size: 15px; }
  .co-page .co-total { margin-top: 8px; }
  .co-page .co-total > span:first-child { font-size: 15.5px; font-weight: 600; padding-top: 2px; }
  .co-page .co-total .now-price { font-size: 34px; }
  .co-page .build .note, .co-page .co-plan .note { margin-top: 0; font-size: 13px; line-height: 1.45; }
  .co-page .co-plan { margin: 9px -1px 0 -4px; min-height: 53px; padding: 6px 8px 6px 58px; border-radius: 7px; }
  .co-page .co-plan .ic { left: 10px; top: 8px; width: 36px; height: 36px; }
  .co-page .co-plan .ic svg { width: 17px; height: 17px; }
  .co-page .co-plan p.row { font-size: 15px; font-weight: 600; }
  .co-page .co-plan p.row b, .co-page .co-plan p.row b small { font-size: 15px; font-weight: 400; }
  .co-page .co-plan .note { line-height: 1.3; font-size: 12.5px; }
  .co-page .trust { display: flex; flex-direction: column; }
  .co-page #trust-refund { order: 1; padding: 8px 0 0 6px; border-top: 0; gap: 10px; font-size: 13px; }
  .co-page #trust-cancel { order: 2; font-size: 13px; }
  .co-page #trust-pay { order: 3; gap: 6px; padding: 12px 0 0; font-size: 13px; }
  .co-page #trust-pay > span { gap: 6px; }
  .co-page .trust .shield { width: 22px; height: 24px; }
  .co-page .trust b { font-size: 14.5px; font-weight: 600; }
  .co-page .co-order .paybar { margin: 0 3px; order: 0; }
  .co-page .co-order { display: flex; flex-direction: column; }
  .co-page .co-order .co-sum { order: -2; }
  .co-page .co-order .trust { order: -1; display: contents; }
  .co-page .co-order #trust-refund { order: -1; margin-bottom: 14px; }
  .co-page .co-order .paybar { order: 1; }
  .co-page .co-order #foot { order: 2; }
  .co-page .co-order #trust-pay { order: 3; }
  .co-page .co-order .paybar .glow { min-height: 39px; border-radius: 20px; font-size: 17px; gap: 10px; }
  .co-page .co-order .paybar .glow span { font-size: 18px; }
  .co-page .co-weby { margin-top: 8px; }
  .co-page .co-weby > summary { height: 38px; gap: 10px; padding-right: 14px; font-size: 14px; font-weight: 600; }
  .co-page .co-weby > summary img { width: 34px; height: 34px; margin: -2px 0 -2px 2px; }
  .co-page .co-weby > summary span { font-size: 16px; margin-left: 0; }
  .co-page .co-more { margin-top: 8px; gap: 8px; }
  .co-page .legal-foot { margin-top: -38px; padding: 0 clamp(12px, 9vw, 42px) calc(84px + env(safe-area-inset-bottom)); font-size: 12.5px; pointer-events: none; }
  .co-page .legal-foot a { pointer-events: auto; padding: 4px 11px; }
  .co-page .legal-foot a:nth-child(n+3) { display: none; }
}
@media (min-width: 760px) { .dock { display: none !important; } }
/* The pinned bar never covers the last lines of the page (Ask WEBY, the legal links). */
@media (max-width: 759px) { body.co-page { padding-bottom: calc(80px + env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) {
  .plinth::after, .plinth::before, li.plan.sweep::after, .co-page .ob-step.attn .ref-box, .more-in.swap { animation: none; }
  .plinth::after { display: none; }
  li.plan, label.plan, .co-page .glow, .plan-more::details-content, .co-fold::details-content, .co-page .compare::details-content, .ref-more::details-content, .co-weby::details-content, .more-in, .dock { transition: none; }
}
/* The fallback player (no tutorials.js): the film takes the plinth's place. */
.plinth.playing { pointer-events: auto; -webkit-mask: none; mask: none; }
.plinth.playing::before, .plinth.playing::after { display: none; }
.plinth video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; background: #000; }

/* The header and the legal line run the full width (the page body centres its children). */
.co-page .co-bar, .co-page .legal-foot { align-self: stretch; width: 100%; box-sizing: border-box; }
.co-page .legal-foot { max-width: none; padding-left: max(clamp(16px, 4.5vw, 71px), calc((100% - 1444px) / 2)); padding-right: max(clamp(16px, 4.5vw, 71px), calc((100% - 1444px) / 2)); }
/* The step label is for screen readers; the numbered steps show it. */
.co-progress { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Glass (Owner 20:48 UTC 2026-10-26; the material system of brand/glass-kit-20261026, in this page's own CSS).
   Three materials tuned to obsidian and cyan: clear for the header, pills and quiet controls; frosted for the order
   card; solid for dense rows, forms and payment detail, and for any panel inside another panel. The material is drawn
   on each panel's ::before (tint plus blur behind it); the panel's own content stays sharp above it. No shell ancestor
   carries a filter, opacity or mask. The world poster (.keyart) is the fixed sibling behind everything, its ::after the
   readability shade. */
.co-page {
  --g-clear: rgb(6 10 20 / 42%); --g-frosted: rgb(9 14 26 / 74%); --g-solid: #0a101c;
  --g-hi: rgb(229 248 255 / 9%); --g-blur: 18px;
}
.co-page .keyart::after { background: radial-gradient(120% 90% at 40% 35%, rgba(5,8,15,.5) 0%, rgba(5,8,15,.78) 70%), linear-gradient(180deg, rgba(5,8,15,.55), rgba(5,8,15,.35) 30%, rgba(5,8,15,.86)); }
.co-page :is(.co-bar, .co-weby > summary, label.plan, .co-order, .co-profile, .co-plans, .co-review > .ob-step, .plan-more, .compare, .co-fold, .ob-weby, .dock, #step-item, #step-build, .why, .co-plan, .co-item .tile, .ref-more) {
  isolation: isolate; background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.co-page :is(.co-weby > summary, label.plan, .co-profile, .co-plans, .co-review > .ob-step, .plan-more, .compare, .co-fold, .ob-weby, #step-item, #step-build, .why, .co-plan, .co-item .tile, .ref-more) { position: relative; }
.co-page :is(.co-bar, .co-weby > summary, label.plan, .co-order, .co-profile, .co-plans, .co-review > .ob-step, .plan-more, .compare, .co-fold, .ob-weby, .dock, #step-item, #step-build, .why, .co-plan, .co-item .tile, .ref-more)::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--g-solid); box-shadow: inset 0 1px 0 var(--g-hi);
}
/* The picked plan keeps its cyan wash over the material. */
.co-page li.plan:has(input:checked) label.plan::before { background: linear-gradient(180deg, rgba(18,52,74,.62), rgba(8,22,36,.8)), var(--g-solid); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .co-page :is(.co-bar, .co-weby > summary, label.plan)::before { background: var(--g-clear); -webkit-backdrop-filter: blur(var(--g-blur)) saturate(115%); backdrop-filter: blur(var(--g-blur)) saturate(115%); }
  .co-page .co-order::before { background: linear-gradient(180deg, rgb(14 19 30 / 70%), rgb(7 10 18 / 80%)); -webkit-backdrop-filter: blur(var(--g-blur)) saturate(110%); backdrop-filter: blur(var(--g-blur)) saturate(110%); }
  .co-page li.plan:has(input:checked) label.plan::before { background: linear-gradient(180deg, rgba(18,52,74,.55), rgba(8,22,36,.72)); }
  /* Nested panels are always solid: nothing blurs twice. */
  .co-page .co-order :is(.co-plan, .co-item .tile)::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .co-page :is(.co-bar, .co-weby > summary, label.plan, .co-order)::before { background: var(--g-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .co-page li.plan:has(input:checked) label.plan::before { background: #10283a; }
}
@media (forced-colors: active) {
  .co-page :is(.co-bar, .co-weby > summary, label.plan, .co-order, .co-profile, .co-plans, .co-review > .ob-step, .plan-more, .compare, .co-fold, .ob-weby, .dock, .co-plan, .why)::before { background: Canvas; -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid CanvasText; }
}
@media (max-width: 759px) {
  /* Phones: the plan picker is one card (frosted), its plan cards inside it solid. */
  .co-page .co-bar::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: none; box-shadow: inset 0 -1px 0 var(--edge2); }
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .co-page .co-plans::before { background: var(--g-frosted); -webkit-backdrop-filter: blur(var(--g-blur)) saturate(110%); backdrop-filter: blur(var(--g-blur)) saturate(110%); }
    .co-page .co-plans label.plan::before { background: var(--g-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .co-page .co-plans li.plan:has(input:checked) label.plan::before { background: linear-gradient(180deg, rgba(18,52,74,.62), rgba(8,22,36,.8)), var(--g-solid); }
  }
}

/* Arrival (Owner 20:51 UTC 2026-10-26): the cards come in as one staggered wave, 260 ms each, 40 ms apart for the
   first eight, the rest together. Only the content layer moves (opacity and transform); the glass behind it does not. */
@keyframes co-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.co-page :is(.co-profile, label.plan, .co-order, .co-review > .ob-step, .co-fold, .co-weby > summary, .plan-more) > :not(input) { animation: co-in 260ms cubic-bezier(.2,.7,.3,1) both; animation-delay: var(--co-d, 320ms); }
.co-page .co-profile > * { --co-d: 0ms; }
.co-page .co-weby > summary > *, .co-page .plan-more > * { --co-d: 320ms; }
.co-page li.plan:nth-child(1) label.plan > * { --co-d: 40ms; }
.co-page li.plan:nth-child(2) label.plan > * { --co-d: 80ms; }
.co-page li.plan:nth-child(3) label.plan > * { --co-d: 120ms; }
.co-page .co-order > * { --co-d: 160ms; }
.co-page .co-review > .ob-step:nth-child(1) > * { --co-d: 200ms; }
.co-page .co-review > .ob-step:nth-child(2) > * { --co-d: 240ms; }
.co-page .co-fold:first-child > * { --co-d: 280ms; }
/* One cyan figure per card: the build subtotal on the order, the price on each plan. */
.co-page .co-total .now-price, .co-page .plan .price { color: var(--c); }
.co-page .plan .price small { color: #c3cad8; }
.co-page .build li.off b { color: #dfe4ec; }
@media (prefers-reduced-motion: reduce) {
  .co-page :is(.co-profile, label.plan, .co-order, .co-review > .ob-step, .co-fold, .co-weby > summary, .plan-more) > * { animation: none; }
}
/* Who referred them, once answered "No one referred me": one line until Change. */
.co-page #step-ref.done:not(.open):has(#ref-change:not([hidden])) > .ob-body { display: none; }
.co-page #step-ref .co-link { min-height: 30px; font-size: 14px; }

/* Phones, the render's type scale at its 467 px frame (with an 11 px floor), and the header inside its margins. */
@media (max-width: 759px) {
  body.co-page .co-bar { width: calc(100% - 2 * clamp(14px, 11vw, 52px)); }
  body.co-page .plans { margin-top: 6px; }
  body.co-page .co-review { margin-top: 8px; }
  body.co-page .co-bar .mark { width: 28px; height: 28px; }
  body.co-page .co-bar b { font-size: 15.5px; }
  body.co-page .co-lock { font-size: 12px; }
  body.co-page .co-steps i { font-size: 11px; }
  body.co-page .co-sub { margin-top: 4px; font-size: 12.5px; }
  body.co-page .film .play { gap: 9px; font-size: 12px; }
  body.co-page .film .play i { width: 22px; height: 22px; border-width: 1.5px; }
  body.co-page .film .play i svg { width: 9px; height: 9px; margin-left: 2px; }
  body.co-page .co-profile .ob-name b { font-size: 12.5px; }
  body.co-page .co-profile .ob-name small { font-size: 11px; }
  body.co-page .co-profile .co-link, body.co-page #compare-open { font-size: 11.5px; }
  body.co-page .co-plans > .ob-row .ob-name b { font-size: 14px; }
  body.co-page .co-plans > .ob-row .ob-name small { font-size: 11px; }
  body.co-page .plan .ob-name b { font-size: 11.5px; }
  body.co-page .plan .price, body.co-page .plan .price small { font-size: 14px; }
  body.co-page .plan .rec { font-size: 8.5px; padding: 1px 5px; top: -7px; }
  body.co-page :is(.plan-more, .compare, .co-fold, .ref-more) summary { min-height: 38px; font-size: 12.5px; }
  body.co-page .co-review .ob-name b { font-size: 13px; }
  body.co-page .co-review .ob-name small, body.co-page .co-review .ob-state, body.co-page .co-review .co-link { font-size: 11px; }
  body.co-page .co-review .ob-chip { width: 22px; height: 22px; font-size: 11px; }
  body.co-page .co-sum h2 { font-size: 14.5px; }
  body.co-page .co-item b { font-size: 13.5px; }
  body.co-page .co-item small { font-size: 11.5px; }
  body.co-page .build li { font-size: 12.5px; }
  body.co-page .co-total > span:first-child { font-size: 13px; }
  body.co-page .co-total .now-price { font-size: 25px; }
  body.co-page .build .note, body.co-page .co-plan .note { font-size: 11px; }
  body.co-page .co-plan p.row, body.co-page .co-plan p.row b, body.co-page .co-plan p.row b small { font-size: 12.5px; }
  body.co-page .trust b { font-size: 12px; }
  body.co-page #trust-refund, body.co-page #trust-pay { font-size: 11px; }
  body.co-page .co-order .paybar .glow { font-size: 13px; }
  body.co-page .co-weby > summary { font-size: 12px; }
}
/* The compare table opens from "Compare plans" beside the plan heading; closed, it takes no row of its own. */
.co-page #compare:not([open]) { display: none; }
@media (max-width: 759px) {
  body.co-page .co-sub { margin-top: 0; }
  body.co-page .rail { margin-top: 2px; }
  body.co-page .co-bar .mark { width: 30px; height: 30px; }
  body.co-page .co-bar .wm-back { margin-right: -4px; }
}
@media (min-width: 760px) { .co-page .co-profile .tel-row { grid-template-columns: minmax(0, 13.5em) 1fr; } }
@media (max-width: 759px) {
  body.co-page .co-profile label { font-size: 12px; }
  body.co-page .co-profile .consent { font-size: 11.5px; }
  body.co-page .co-profile .phone-row .glow { min-height: 44px; font-size: 14px; }
  body.co-page .co-profile input, body.co-page .co-profile select { min-height: 44px; font-size: 16px; }
}
/* Narrow phones: the three plan cards keep their figure on one line. */
@media (max-width: 440px) {
  body.co-page .plan .ob-row, body.co-page li.plan:has(input:checked) .plan .ob-row { padding: 0 4px 0 8px; }
  body.co-page .plan .dot { width: 14px; height: 14px; margin-right: 7px; }
  body.co-page .plan .ob-name b { font-size: 11px; }
  body.co-page .plan .price { font-size: 13px; }
  body.co-page .plan .price small { font-size: 10.5px; }
  body.co-page .plan .rec { right: 4px; font-size: 8px; }
}

/* Signature glow (Owner 21:21 UTC 2026-10-26; tokens in app.css). The cyan buttons above glow in full. Here: the film
   button's ring, Ask WEBY and Back at the rim, and the picked plan card. Compare plans, the fold rows and the legal
   links are text, not buttons, and stay quiet. */
/* Compare plans, Change and Edit are underlined text links, so they stay plain. */
.co-page .co-link, .co-page .co-link:is(:hover, :active, :focus-visible) { box-shadow: none; }
.film .play i { box-shadow: var(--wm-glow); }
.film button:is(:hover, :focus-visible) .play i { box-shadow: var(--wm-glow-hover); }
.film button:active .play i { box-shadow: var(--wm-glow-press); }
.co-weby > summary, .co-page .co-bar .wm-back { box-shadow: var(--wm-glow-rim); }
.co-weby > summary:is(:hover, :focus-visible), .co-page .co-bar .wm-back:is(:hover, :focus-visible) { box-shadow: var(--wm-glow-rim-hover); }
.co-page .co-bar .wm-back { padding: 0 18px 0 14px; gap: 12px; border-radius: 999px; }
label.plan:hover { box-shadow: var(--wm-glow-rim); }
li.plan:has(input:checked) label.plan { box-shadow: var(--wm-glow); }
@media (max-width: 759px) { .co-page .co-bar .wm-back { width: 40px; padding: 0; justify-content: center; } .co-page .co-bar .wm-back span { margin: -3px 0 0; } }
@media (prefers-reduced-motion: reduce) { .co-weby > summary, .co-page .co-bar .wm-back, label.plan { transition: none; } }
@media (forced-colors: active) { .co-page .glow, .film .play i, .co-weby > summary, .co-page .co-bar .wm-back, label.plan { box-shadow: none !important; } }

/* The searchable country field inside the phone and email rows: the list is wider than the narrow country column. */
.co-page .tel-row .cp-list { right: auto; width: max(100%, min(340px, calc(100vw - 32px))); }
@media (max-width: 759px) {
  .co-page .tel-row .cp input[role=combobox] { padding-left: 12px; padding-right: 28px; }
  .co-page .tel-row .cp-caret { right: 2px; width: 26px; }
}