/* ==========================================================================
   Sebenza Static: the order, the brief, the review and payments
   (/start, /welcome, /review, /pay), on top of home.css and service.css.
   The client's own pages, so no menu: the logo notch takes them home, and
   nothing else pulls them away from the one thing the page is for.
   ========================================================================== */

.co{padding-top:calc(var(--nav-h) + clamp(48px,7vw,104px));padding-bottom:clamp(96px,10vw,160px)}
/* the head: what you're buying on the left, the product on the right (sites
   we've built, in turn), the way Apple's buy pages lead with the thing itself */
.co__head{max-width:none}
.co__intro > .label{display:inline-flex;align-items:center;gap:12px}
.co__shot{margin:clamp(32px,8vw,48px) 0 0}
@media (min-width:1000px){.co__shot{margin:0}}
.co__frames{position:relative;aspect-ratio:16/10;border-radius:clamp(14px,1.6vw,24px);overflow:hidden;background:var(--ivory)}
.co__frames img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s var(--ease)}
.co__frames img.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){.co__frames img{transition:none}}
.co__shot figcaption{display:block;margin-top:14px;opacity:.62;line-height:1.45;transition:opacity .4s var(--ease)}
.co__shot figcaption.is-swap{opacity:0}
.co__head .label{display:inline-flex;align-items:center;gap:12px}
.co__title{max-width:14ch;margin-top:22px;font-size:clamp(44px,6.4vw,96px);font-weight:700;letter-spacing:-.045em;line-height:.95;text-wrap:balance}
.co__lede{margin-top:clamp(18px,2vw,28px);max-width:32ch;font-size:clamp(22px,2.2vw,32px);font-weight:300;line-height:1.28;letter-spacing:-.03em;text-wrap:pretty}
.co__lede mark{background:var(--green);color:#0A0A0C;padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

.co__grid{display:grid;gap:clamp(40px,5vw,72px);margin-top:clamp(48px,6vw,88px);align-items:start}
@media (min-width:1000px){.co__grid{grid-template-columns:minmax(0,1fr) minmax(320px,400px)}}
.co__main{display:grid;gap:clamp(48px,5vw,72px);min-width:0}

/* a numbered block: 01 How many pages? */
.co__block{margin:0;padding:0;border:0;min-width:0}
.co__q{float:left;width:100%;display:flex;align-items:baseline;gap:16px;padding:0 0 22px;font-size:clamp(24px,2.4vw,34px);font-weight:400;letter-spacing:-.03em;line-height:1.15}   /* space, not a rule: fewer lines on the order (2026-10-14) */
.co__q .label{opacity:.5;flex:none}
.co__q + *{clear:both}
.co__hint{margin-top:18px;font-size:var(--fs-body);opacity:.62;max-width:56ch}

/* ---------- the packages: one card per page count ---------- */
.co__packs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}   /* two a row on a phone: four stacked made the price a long scroll */
@media (min-width:640px){.co__packs{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}}
.buy__form .co__packs{grid-template-columns:repeat(2,minmax(0,1fr))}   /* on the order: two, then the five-page card across */
.buy__form .co__packs > .pack:last-child:nth-child(odd){grid-column:1 / -1}
@media (min-width:640px){.buy__form .co__packs{grid-template-columns:repeat(3,minmax(0,1fr))}.buy__form .co__packs > .pack:last-child:nth-child(odd){grid-column:auto}}
.buy__form .co__packs > .pack:nth-child(4):last-child{grid-column:auto}
.pack{position:relative;display:block;cursor:pointer}
.pack input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pack__card{
  position:relative;display:flex;flex-direction:column;gap:6px;height:100%;
  padding:22px 22px 20px;border-radius:clamp(14px,1.4vw,20px);
  background:var(--ivory);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
.pack:hover .pack__card{transform:translateY(-2px)}
.pack__n{font-size:clamp(40px,4vw,56px);font-weight:300;letter-spacing:-.05em;line-height:.95}
.pack__unit{font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;opacity:.62}
.pack__price{margin-top:auto;padding-top:16px;font-size:20px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pack__for{display:block;margin-top:10px;font-size:14px;line-height:1.4;opacity:.7;max-width:26ch;text-wrap:pretty}
.pack input:checked + .pack__card .pack__for{opacity:.8}
/* "Not sure?": the free call, as one of the choices, drawn as an outline so it
   doesn't read as something to buy */
.pack--help .pack__card{background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong);transition:background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.pack--help:hover .pack__card,.pack--help:focus-visible .pack__card{background:var(--ivory);box-shadow:inset 0 0 0 1px var(--ink)}
.pack--help:focus-visible{outline:none}
.pack--help .pack__n{font-size:clamp(24px,2.2vw,30px);letter-spacing:-.03em;line-height:1.1}
.pack--help .pack__price{font-size:16px}
.pack__price small{display:table;margin-top:6px;padding:2px 6px;border-radius:4px;background:var(--green);color:#0A0A0C;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}   /* the saving, as a green mark: readable on any card, either theme */
.sum__line--save span:last-child{background:var(--green);color:#0A0A0C;padding:0 6px;border-radius:4px}   /* the saving, marked the way the site marks a highlight: readable on the card in either theme */
.pack__tag{
  position:absolute;top:14px;right:14px;
  padding:5px 9px;border-radius:999px;background:var(--green);color:#0A0A0C;
  font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}
.pack input:checked + .pack__card{background:var(--ink);color:var(--paper)}
.pack input:checked + .pack__card .pack__unit{opacity:.72}
.pack input:focus-visible + .pack__card{outline:2px solid var(--ink);outline-offset:3px}
.co__more{margin-top:18px;font-size:var(--fs-body);opacity:.72}
.co__more a,.co__fine a,.co__terms a{text-decoration:underline;text-underline-offset:.14em;text-decoration-thickness:1px}
.co__more button{appearance:none;border:0;padding:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:.14em;text-decoration-thickness:1px;cursor:pointer}

/* ---------- add-ons: a ruled list, a stepper or a tick on each ---------- */
.addons{margin-top:12px}
.addon{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 20px;padding:18px 0;border-bottom:var(--hair)}
.addon__name{font-size:clamp(18px,1.5vw,21px);letter-spacing:-.02em}
.addon__detail{display:block;margin-top:3px;font-size:14px;opacity:.62}
.addon__price{display:block;margin-top:3px;font-size:15px;font-variant-numeric:tabular-nums;opacity:.82}
/* the (i) beside an extra's name: hover or focus shows what it is, a tap
   toggles it; the bubble is the order card's colours, so it turns with the theme */
.addon__main{position:relative}
.tip{position:relative;display:inline-grid;place-items:center;width:19px;height:19px;margin-left:8px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,currentColor 38%,transparent);font-family:inherit;font-size:11.5px;font-weight:600;line-height:1;vertical-align:2px;cursor:help;opacity:.78;transition:background .15s,color .15s,opacity .15s}
.tip::after{content:"";position:absolute;inset:-12px}
.tip:hover,.tip[aria-expanded="true"]{opacity:1;background:var(--ink);color:var(--paper);box-shadow:none}
.tip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tip__say{display:none;position:absolute;z-index:5;left:0;top:calc(100% + 8px);width:min(320px,calc(100vw - 40px));padding:14px 16px;border-radius:14px;background:var(--ink);color:var(--paper);font-size:14px;line-height:1.45;letter-spacing:0;box-shadow:0 14px 34px rgba(0,0,0,.2)}
.tip[aria-expanded="true"] + .tip__say,.tip:focus-visible + .tip__say{display:block;animation:tip-in .16s ease-out}
@media (hover:hover){.tip:hover + .tip__say{display:block;animation:tip-in .16s ease-out}}
@keyframes tip-in{from{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.tip__say{animation:none!important}}
.step3{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-strong)}
.step3 button{
  appearance:none;border:0;width:38px;height:38px;border-radius:50%;
  background:transparent;color:inherit;font:inherit;font-size:20px;line-height:1;cursor:pointer;
  transition:background var(--t-fast) var(--ease);
}
.step3 button:hover:not(:disabled){background:rgba(var(--ink-rgb),.08)}
.step3 button:disabled{opacity:.3;cursor:default}
.step3 button:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.step3 output{min-width:2ch;text-align:center;font-variant-numeric:tabular-nums;font-size:17px}
.tick{position:relative;display:inline-flex;cursor:pointer}
.tick input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.tick span{
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--line-strong);font-size:15px;
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease);
}
.tick span::before{content:"+";font-size:17px;line-height:1}
.tick input:checked + span{background:var(--ink);color:var(--paper);box-shadow:none}
.tick input:checked + span::before{content:"\2713"}
.tick input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}

/* the page count, drawn: one sheet for each page, fanned */


/* beside the pay button: the way to a person, for anyone who wants one first */
.co__talk{margin:16px 6px 0;font-size:15px;line-height:1.5}
.co__talk button{appearance:none;border:0;padding:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:1px;cursor:pointer}

/* ---------- your details ---------- */
.co__fields{display:grid;gap:22px}
.co__fields--check{margin-top:clamp(24px,3vw,32px)}
.co__fields--check .ob__hint{margin:0 0 -8px;font-size:15px}
.co__terms{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;cursor:pointer}
.co__terms input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--ink)}
.co__check{min-height:0}
/* the bot check: nothing on the page until Cloudflare needs a tap, then a card in our own surface (never display:none, or the widget won't run) */
.check{max-width:640px;max-height:0;overflow:hidden;opacity:0;transition:opacity var(--t-med) var(--ease)}
.check--on{max-height:none;overflow:visible;opacity:1;margin-top:14px;padding:16px 18px;border-radius:16px;background:var(--ivory)}
.check__say{margin:0 0 12px;font-size:15px;line-height:1.45;opacity:.78}

/* ---------- the summary: sticky beside the form on a wide screen ---------- */
.sum{
  position:relative;padding:clamp(24px,2.4vw,32px);border-radius:clamp(16px,1.6vw,24px);
  background:var(--ink);color:var(--paper);--line:rgba(var(--paper-rgb),.2);
}
/* the summary and a client's words travel together beside the form, where the
   screen is tall enough to hold them */
@media (min-width:1000px) and (min-height:760px){.co__side{position:sticky;top:calc(var(--nav-h) + 24px)}}
.co__quote{margin:22px 6px 0}
.co__stars{letter-spacing:.12em;font-size:14px}   /* in the ink, not the reviews' purple: green is the one colour beside the pay button */
.co__quote blockquote{margin:8px 0 0;font-size:16px;line-height:1.5;letter-spacing:-.01em;text-wrap:pretty}
.co__quote figcaption{margin-top:10px;font-size:14px}
.co__quote figcaption span{opacity:.62;margin-left:6px}
.sum .label{opacity:.62}
.sum__lines{margin-top:18px;border-top:1px solid var(--line)}
.sum__line{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;font-variant-numeric:tabular-nums}
.sum__line span:first-child{opacity:.82}
.sum__line--total{font-weight:500}
.sum__now{margin-top:22px}
.sum__now .label{display:block}
.sum__big{display:block;margin-top:8px;font-size:clamp(44px,4.4vw,60px);font-weight:300;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.sum__then{margin-top:14px;font-size:14px;line-height:1.55;opacity:.72}
.sum__then b{font-weight:500;opacity:1}
.sum .consult__btn{width:100%;justify-content:center;margin-top:24px;background:var(--green);color:#0A0A0C;border:0;cursor:pointer;font-family:inherit}
.sum .consult__btn:disabled{opacity:.6;cursor:progress;transform:none}
.sum .consult__btn:focus-visible{outline-color:var(--paper)}
.sum__safe{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:13px;line-height:1.5;opacity:.62}
.sum__safe svg{flex:none;width:16px;height:16px;margin-top:2px}
.sum__status{margin-top:12px;font-size:14px;line-height:1.45;color:#FF9A9A}
.sum__status:empty{display:none}


.co__fine{margin-top:clamp(40px,4vw,56px);max-width:72ch;font-size:13px;line-height:1.6;opacity:.62}

/* ---------- the brief: one question at a time (Aston, 2026-10-14) ----------
   /welcome as an onboarding: a screen per question, the type of /start, a
   thin bar for how far along. A skipped logo or page of words gets a note in
   the order card's colours, so it turns with the theme. */
.ob{padding-top:calc(var(--nav-h) + clamp(28px,4vw,56px));padding-bottom:clamp(64px,7vw,110px)}
.ob__head[hidden],.ob__top[hidden],.ob__flow[hidden],.state[hidden],.ob__s[hidden],.ob__warn[hidden],.ob__reveal[hidden],.ob__field[hidden],.ob__choice[hidden],.ob__hint[hidden],.ob__key[hidden]{display:none}
.ob__head{max-width:760px;margin-inline:auto}
.ob .state{max-width:760px;margin:clamp(36px,4vw,56px) auto 0}
.ob__top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px 20px;max-width:760px;margin:0 auto}
.ob__back{appearance:none;border:0;background:none;padding:6px 0;color:inherit;font:inherit;font-size:15px;cursor:pointer;opacity:.62;transition:opacity var(--t-fast) var(--ease)}
.ob__back:hover{opacity:1}
.ob__ref{display:inline-flex;align-items:center;gap:12px;justify-self:start;opacity:.62}
.ob__saved{font-size:13px;opacity:0;transition:opacity .3s var(--ease)}
.ob__saved.is-on{opacity:.55}
.ob__bar{grid-column:1 / -1;height:2px;border-radius:2px;background:rgba(var(--ink-rgb),.12);overflow:hidden}
.ob__bar i{display:block;height:100%;width:0;background:var(--ink);transition:width var(--t-med) var(--ease)}
.ob__flow{max-width:760px;margin:0 auto}
.ob__s{display:flex;flex-direction:column;justify-content:center;min-height:min(620px,calc(100svh - var(--nav-h) - 170px));padding:clamp(36px,6vw,72px) 0}
.ob__s.is-on{animation:buy-in .45s var(--ease) both}
@media (prefers-reduced-motion:reduce){.ob__s.is-on{animation:none}}
.ob__n{display:inline-flex;align-items:center;gap:6px;margin-bottom:16px;font-size:15px;font-variant-numeric:tabular-nums;opacity:.55}
.ob__n svg{width:14px;height:14px}
.ob__q{margin:0;font-size:clamp(30px,3.5vw,48px);font-weight:700;letter-spacing:-.035em;line-height:1.06;text-wrap:balance;outline:none}
.ob__q label{cursor:text}
.ob__q--big{font-size:clamp(40px,5.4vw,76px);letter-spacing:-.045em;line-height:.98}
.ob__say{margin-top:clamp(18px,2vw,26px);max-width:36ch;font-size:clamp(20px,2vw,26px);font-weight:300;line-height:1.35;letter-spacing:-.02em;text-wrap:pretty}
.ob__say mark{background:var(--green);color:#0A0A0C;padding:0 .08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ob__hint{margin-top:14px;max-width:52ch;font-size:17px;line-height:1.5;opacity:.62}
.ob__opt{opacity:.62;text-transform:none;letter-spacing:0;font-weight:400}

/* the answer: big, on a line, like writing on the page */
.ob__in{display:block;width:100%;margin-top:clamp(26px,3vw,40px);padding:8px 0 12px;border:0;border-bottom:1.5px solid rgba(var(--ink-rgb),.25);border-radius:0;background:transparent;color:inherit;font:inherit;font-size:clamp(22px,2.2vw,30px);letter-spacing:-.02em;line-height:1.3;outline:none;transition:border-color var(--t-fast) var(--ease)}
.ob__in:focus{border-bottom-color:var(--ink)}
.ob__in::placeholder{color:inherit;opacity:.32}
textarea.ob__in{min-height:2.8em;resize:vertical}
.ob__in--words{min-height:8em;font-size:clamp(18px,1.6vw,21px);line-height:1.5}
.ob__in--sm{font-size:clamp(19px,1.7vw,23px)}
.ob__fields{display:grid;gap:clamp(18px,2vw,26px);margin-top:clamp(22px,2.6vw,34px)}
.ob__fields .ob__in{margin-top:0}
.ob__field label{display:block;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;opacity:.62}
.ob__field .ob__in{margin-top:4px}
.ob__names{display:grid;gap:6px;margin-top:clamp(22px,2.6vw,34px)}
.ob__name{display:grid;grid-template-columns:2em minmax(0,1fr);align-items:baseline;gap:8px}
.ob__name span{font-size:15px;font-variant-numeric:tabular-nums;opacity:.5}
.ob__name .ob__in{margin-top:0}

/* choices, with a letter to press */
.ob__choices{display:grid;gap:10px;max-width:560px;margin-top:clamp(24px,3vw,36px)}
.ob__choice{position:relative;display:flex;cursor:pointer}
.ob__choice input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.ob__choice > span{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.22);font-size:18px;line-height:1.3;letter-spacing:-.01em;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.ob__choice small{display:block;margin-top:3px;font-size:14px;opacity:.66;letter-spacing:0}
.ob__choice kbd{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:7px;box-shadow:inset 0 0 0 1px currentColor;font:inherit;font-size:12px;font-weight:600;opacity:.62}
.ob__choice:hover > span{box-shadow:inset 0 0 0 1px var(--ink)}
.ob__choice input:checked + span{background:var(--ink);color:var(--paper);box-shadow:none}
.ob__choice input:checked + span kbd{opacity:1}
.ob__choice input:focus-visible + span{outline:2px solid var(--ink);outline-offset:3px}
.ob__chips{margin-top:clamp(24px,3vw,36px)}
.ob__chips + .ob__in{margin-top:28px}
.ob__reveal{margin-top:22px;max-width:560px}
.ob__reveal .ob__in{margin-top:6px}
.ob__reveal > .ob__hint{margin-top:0}
.ob__nudge{min-height:1.4em;margin-top:12px;font-size:15px;opacity:.72}
.ob__nudge:empty{display:none}

/* uploads: a drop zone for the one thing the question asks for */
.upl.ob__drop{margin-top:clamp(24px,3vw,36px);padding:0;background:none}
.ob__pick{position:relative;display:flex;align-items:center;justify-content:center;min-height:150px;padding:28px 20px;border:1.5px dashed rgba(var(--ink-rgb),.3);border-radius:clamp(14px,1.4vw,20px);text-align:center;font-size:17px;line-height:1.45;cursor:pointer;transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.ob__pick:hover,.ob__drop.is-over .ob__pick{border-color:var(--ink);background:rgba(var(--ink-rgb),.03)}
.ob__drop.is-over{box-shadow:none}
.ob__pick input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.ob__pick:focus-within{outline:2px solid var(--ink);outline-offset:3px}
.ob__pick b{font-weight:500;text-decoration:underline;text-underline-offset:.18em}
.ob__pick small{display:block;margin-top:4px;font-size:14px;opacity:.6}
.ob__drop.has-files .ob__pick{min-height:84px}
.ob__drop .upl__file{background:var(--ivory)}
.ob__more{margin-top:28px}

/* moving on: the answer, a skip, the key that does it */
.ob__nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:clamp(28px,3vw,40px)}
.ob__nav .consult__btn{margin-top:0;border:0;cursor:pointer;font-family:inherit}
.ob__nav .consult__btn span{margin-left:.45em}
.ob__back--nav{order:-1;padding:8px 0;font-size:16px}
.ob__back--nav[hidden]{display:none}
.ob__skip{appearance:none;border:0;background:none;padding:8px 0;color:inherit;font:inherit;font-size:16px;text-decoration:underline;text-underline-offset:.2em;cursor:pointer;opacity:.62;transition:opacity var(--t-fast) var(--ease)}
.ob__skip:hover{opacity:1}
.ob__key{font-size:13px;opacity:.5}
.ob__key b{font-weight:500}
.ob__s.is-warned > .ob__nav{display:none}

/* "we can go ahead without it": in the order card's colours */
.ob__warn{max-width:560px;margin-top:clamp(24px,3vw,34px);padding:20px 22px;border-radius:16px;background:var(--ink);color:var(--paper);font-size:17px;line-height:1.5;animation:tip-in .2s ease-out}
.ob__warn b{font-weight:600}
.ob__warn .ob__nav{margin-top:16px}
.ob__warn .consult__btn{background:var(--paper);color:var(--ink)}
.ob__warn .ob__skip{color:var(--paper)}
@media (prefers-reduced-motion:reduce){.ob__warn{animation:none}}

/* the summary: a row per answer, each one a way back to it */
.ob__sum{margin:clamp(22px,3vw,32px) 0 0;padding:0;list-style:none;border-top:var(--hair)}
.ob__row{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr) auto;align-items:baseline;gap:6px 20px;width:100%;padding:14px 0;border:0;border-bottom:var(--hair);background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.ob__row-k{font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;opacity:.62}
.ob__row-v{font-size:17px;line-height:1.4;overflow-wrap:anywhere}
.ob__row-go{font-size:14px;opacity:0;text-decoration:underline;text-underline-offset:.2em;transition:opacity var(--t-fast) var(--ease)}
.ob__row:hover .ob__row-go,.ob__row:focus-visible .ob__row-go{opacity:.62}
.ob__row:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.ob__row.is-later .ob__row-v::before{content:"";display:inline-block;width:8px;height:8px;margin-right:9px;border-radius:50%;background:var(--ink);vertical-align:2px}
@media (max-width:639px){
  .ob__row{grid-template-columns:minmax(0,1fr) auto}
  .ob__row-k{grid-column:1 / -1}
  .ob__row-go{opacity:.5}
}
.ob__send{background:var(--green);color:#0A0A0C}
.ob__send:disabled{opacity:.6;cursor:progress;transform:none}
.ob__status{margin-top:14px}

.lead__row[hidden],.lead__field[hidden]{display:none}   /* .lead__row is a grid, which would otherwise win over [hidden] */

/* the review: the logo or words the brief left for later, in the order card's colours */
.later{margin-top:22px;padding:18px 20px;border-radius:16px;background:var(--ink);color:var(--paper);font-size:16px;line-height:1.5}
.later[hidden],.later [hidden]{display:none}
.later b{font-weight:600}
.later__add{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.later .upl__add{background:var(--paper);color:var(--ink)}
.later .upl__add:focus-within{outline-color:var(--paper)}
.later .upl__add.is-busy{opacity:.6;pointer-events:none}
.later__status{margin-top:10px;font-size:14px;opacity:.8}
.later__status:empty{display:none}

/* uploads (the brief and the review) */
.upl{
  display:grid;gap:12px;padding:22px;border-radius:clamp(14px,1.4vw,20px);
  background:var(--ivory);transition:box-shadow var(--t-fast) var(--ease);
}
.upl.is-over{box-shadow:inset 0 0 0 2px var(--ink)}
.upl__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.upl__name{font-size:18px;letter-spacing:-.02em}
.upl__name small{display:block;margin-top:3px;font-size:14px;opacity:.62;letter-spacing:0}
.upl__add{
  position:relative;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;
  background:var(--ink);color:var(--paper);font-size:15px;font-weight:500;cursor:pointer;overflow:hidden;
}
.upl__add input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0}
.upl__add:focus-within{outline:2px solid var(--ink);outline-offset:3px}
.upl__list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.upl__list:empty{display:none}
.upl__file{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;background:var(--paper);font-size:14px}
.upl__file span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.upl__file .upl__size{opacity:.62;font-variant-numeric:tabular-nums}
.upl__file button{appearance:none;border:0;width:28px;height:28px;border-radius:50%;background:transparent;color:inherit;font-size:18px;line-height:1;cursor:pointer;opacity:.62}
.upl__file button:hover{opacity:1;background:rgba(var(--ink-rgb),.08)}
.upl__file.is-busy{opacity:.62}
.upl__file.is-bad{color:var(--bad)}
.upl__bar{grid-column:1 / -1;height:2px;border-radius:2px;background:rgba(var(--ink-rgb),.12);overflow:hidden}
.upl__bar i{display:block;height:100%;width:0;background:var(--ink);transition:width .2s linear}


/* ---------- a status card: payment confirming, received, nothing due ---------- */
.state{margin-top:clamp(36px,4vw,56px);max-width:620px;padding:clamp(24px,2.6vw,36px);border-radius:clamp(16px,1.6vw,24px);background:var(--ivory)}
.state__say{font-size:clamp(22px,2vw,28px);font-weight:300;letter-spacing:-.025em;line-height:1.3;text-wrap:pretty}
.state__say mark{background:var(--green);color:#0A0A0C;padding:0 .08em}
.state__more{margin-top:14px;font-size:var(--fs-body);opacity:.72;line-height:1.55}
.state .consult__btn{border:0;cursor:pointer;font-family:inherit}
.state .consult__btn:disabled{opacity:.6;cursor:progress;transform:none}
.spin{display:inline-block;width:16px;height:16px;margin-right:10px;vertical-align:-2px;border-radius:50%;border:2px solid rgba(var(--ink-rgb),.2);border-top-color:var(--ink);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:3s}}

.dues{margin-top:20px;border-top:var(--hair)}
.dues div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:var(--hair);font-variant-numeric:tabular-nums}
.dues div:last-child{font-weight:500}

/* the review's two answers */
.answer{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:28px}
.answer .consult__btn{margin-top:0}
.changes{margin-top:28px}
.changes[hidden]{display:none}

/* the private pages have no menu: just the notch, and a quiet line at the foot */
.co-foot{padding-block:28px 40px;border-top:var(--hair)}
.co-foot .label{opacity:.62;line-height:1.6}
.co-foot a{text-decoration:underline;text-underline-offset:.14em}

/* ---------- /static-sites: the four, the steps, the two examples ---------- */
.ss-act{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:clamp(28px,3vw,44px)}
.ss-act .consult__btn{margin-top:0}
.ss-shot{margin-top:clamp(48px,6vw,96px)}
.ss-shot img{display:block;width:100%;height:auto;border-radius:clamp(14px,1.6vw,24px)}
.ss-shot figcaption{margin-top:14px}
.ss-shot figcaption .label{opacity:.62}
.ss-packs{margin-top:clamp(44px,5vw,80px)}
.price__in > .ss-packs{grid-column:1 / -1}   /* the whole width under the two sentences, as the four ways to build are on /web-design-and-development */
.ss-list{display:grid;gap:clamp(32px,4vw,64px);margin-top:clamp(36px,4vw,56px)}
@media (min-width:900px){.ss-list{grid-template-columns:1fr 1fr}}
.ss-list ul{margin:14px 0 0;padding:0;list-style:none;border-top:var(--hair)}
.ss-list li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:var(--hair);font-size:var(--fs-body);font-variant-numeric:tabular-nums}
.ss-list li b{font-weight:400;white-space:nowrap}
.ss-examples{display:grid;gap:clamp(24px,3vw,40px);margin-top:clamp(36px,4vw,56px)}
@media (min-width:800px){.ss-examples{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ss-examples a{display:block}
.ss-examples img{display:block;width:100%;height:auto;border-radius:clamp(12px,1.4vw,20px);transition:transform var(--t-med) var(--ease)}
.ss-examples a:hover img{transform:translateY(-4px)}
.ss-examples span{display:flex;justify-content:space-between;margin-top:14px;font-size:var(--fs-body)}
.ss-examples small{display:block;margin-top:4px;font-size:14px;opacity:.62}

/* the price band's cards link to /start with the pages picked */
.price .pack__card{background:rgba(var(--paper-rgb),.08);color:var(--paper)}
.price a.pack:hover .pack__card,.price a.pack:focus-visible .pack__card{background:var(--paper);color:var(--ink)}
.price a.pack:focus-visible{outline:2px solid var(--paper);outline-offset:3px;border-radius:20px}
.price a.pack--call .pack__n{font-size:clamp(26px,2.6vw,34px);letter-spacing:-.03em;line-height:1.1}
@media (max-width:639px){
  .pack__card{padding:16px 16px 14px}
  .pack__n{font-size:40px}
  .pack__price{margin-top:10px;font-size:18px}
  .pack__tag{top:10px;right:10px;padding:4px 7px;font-size:9px}
  .price a.pack--call .pack__n{font-size:21px}
}

/* ==========================================================================
   /start, one choice at a time (Aston, 2026-10-14: "Typeform-style … like
   checking out on Vistaprint"): pages, extras, details, then Pay. The steps
   and a bar along the top; on a wide screen our sites beside the first step,
   then the order as it's built.
   ========================================================================== */
.buy{padding-top:calc(var(--nav-h) + clamp(28px,4vw,56px));padding-bottom:clamp(80px,8vw,120px)}
.buy__top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px clamp(14px,2.4vw,32px);margin-bottom:clamp(36px,5vw,72px)}
.buy__top .ob__back{display:none}   /* Back sits with Continue on every screen, so the steps start flush left (Aston, 2026-10-19) */
.buy__steps{display:flex;gap:clamp(14px,2.6vw,40px);margin:0;padding:0;list-style:none}
.buy__steps li{display:flex;align-items:center;gap:10px;font-size:15px;letter-spacing:-.01em;opacity:.42;transition:opacity var(--t-med) var(--ease)}
.buy__steps li b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 1px currentColor;font-size:12px;font-weight:500;transition:background var(--t-med) var(--ease),color var(--t-med) var(--ease)}
.buy__steps li.is-done{opacity:.72}
.buy__steps li.is-on{opacity:1}
.buy__steps li.is-on b{background:var(--ink);color:var(--paper);box-shadow:none}
.buy__total{margin:0;display:flex;align-items:baseline;gap:10px}
.buy__total span{font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;opacity:.62}
.buy__total b{font-size:clamp(20px,1.8vw,24px);font-weight:400;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.buy__bar{grid-column:1 / -1;height:2px;border-radius:2px;background:rgba(var(--ink-rgb),.12);overflow:hidden}
.buy__bar i{display:block;height:100%;width:33.34%;background:var(--ink);transition:width var(--t-med) var(--ease)}
@media (max-width:639px){
  .buy__steps li span{display:none}
  .buy__steps li.is-on span{display:inline;white-space:nowrap}
  .buy__top{grid-template-columns:minmax(0,1fr) auto}
  .buy__steps{gap:10px}
  .buy__total span{display:none}       /* the amount alone: the steps need the room */
}

.buy__grid{display:grid;gap:clamp(40px,5vw,80px);align-items:start}
@media (min-width:1000px){.buy__grid{grid-template-columns:minmax(0,1fr) minmax(320px,420px)}}
.buy__stage{min-width:0}
.buy__step[hidden]{display:none}
.buy__step.is-on{animation:buy-in .45s var(--ease) both}
@keyframes buy-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.buy__step.is-on{animation:none}}
.buy__step > .label{display:inline-flex;align-items:center;gap:12px}
.buy__q{margin:16px 0 clamp(26px,3vw,40px);font-size:clamp(34px,4.2vw,60px);font-weight:700;letter-spacing:-.04em;line-height:1.02;text-wrap:balance;outline:none}
.buy__mini{margin:0 0 20px;font-size:15px;line-height:1.45;opacity:.72}
.buy__mini b{font-weight:500;opacity:1}
@media (min-width:1000px){.buy__mini{display:none}}   /* the order is beside the steps there */
.buy__nav{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:clamp(28px,3vw,40px)}
.buy__nav .consult__btn{margin-top:0;border:0;cursor:pointer;font-family:inherit}
.buy__nav .consult__btn span{margin-left:.45em}
.buy__pay{background:var(--green);color:#0A0A0C}
.buy__pay:disabled{opacity:.6;cursor:progress;transform:none}
.buy__status{margin-top:14px;color:#C8323A}
:root[data-theme="dark"] .buy__status{color:#FF7A7A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .buy__status{color:#FF7A7A}}
.buy__safe{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:13px;line-height:1.5;opacity:.62;max-width:52ch}
.buy__safe svg{flex:none;width:16px;height:16px;margin-top:2px}

/* beside the steps on a wide screen: our sites while choosing pages, then the order */
.buy__side{display:none}
@media (min-width:1000px){
  .buy__side{display:block;position:sticky;top:calc(var(--nav-h) + 24px)}
}
/* the cart before anything's chosen: an example, said so, and faint */
.sum__eg{margin:10px 0 2px;font-size:13px;line-height:1.45;opacity:.72}
.sum__lines--eg,.sum__now--eg{opacity:.42}
.sum__tag{display:inline-block;margin-left:8px;padding:2px 7px;border-radius:999px;background:var(--green);color:#0A0A0C;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;vertical-align:2px}
.buy__side .sum{margin:0}
.buy__side .co__quote{margin-top:24px}

/* ---------- /start: how they'd like to start, and the plan (Aston, 2026-10-14) ---------- */
.buy__step[data-step="0"] .label{display:inline-flex;align-items:center;gap:12px}
.ways{display:grid;gap:12px;max-width:640px}
.way{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 18px;width:100%;padding:clamp(18px,2vw,24px) clamp(18px,2vw,26px);border:0;border-radius:clamp(16px,1.6vw,22px);background:var(--ivory);color:inherit;font:inherit;text-align:left;cursor:pointer;transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.way:hover{background:var(--ink);color:var(--paper)}
.way:active{transform:scale(.995)}
.way:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.way__name{font-size:clamp(21px,2vw,26px);font-weight:500;letter-spacing:-.025em;line-height:1.15}
.way__say{grid-column:1;font-size:15px;line-height:1.45;opacity:.68;max-width:46ch}
.way__go{grid-column:2;grid-row:1 / span 2;font-size:22px;transition:transform var(--t-fast) var(--ease)}
.way:hover .way__go{transform:translateX(4px)}
.way--talk{background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong)}
.way--talk:hover{background:var(--ink);box-shadow:none}
.buy__hint{margin:-12px 0 clamp(20px,2.4vw,30px);max-width:52ch;font-size:17px;line-height:1.5;opacity:.62}
.buy__alt{margin-top:22px;font-size:15px;opacity:.72}
.buy__alt button{appearance:none;border:0;background:none;padding:0;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.buy__alt button:hover{opacity:.8}
.upl.plan__drop{margin-top:6px}
.plan__drop .ob__pick{min-height:96px}
.plan__swap{text-decoration:underline;text-underline-offset:.18em;opacity:.72}
.plan__reading{display:flex;align-items:center;gap:4px;font-size:clamp(19px,1.8vw,23px);font-weight:300;letter-spacing:-.02em}
.plan__why{max-width:52ch;font-size:clamp(19px,1.7vw,22px);font-weight:300;line-height:1.45;letter-spacing:-.015em}
.plan__note{margin-bottom:14px;font-size:15px;opacity:.72}
.plan__names{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none;counter-reset:pg}
.plan__names li{counter-increment:pg;display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;background:var(--ivory);font-size:16px}
.plan__names li::before{content:counter(pg);font-size:12px;font-variant-numeric:tabular-nums;opacity:.5}
.plan__revamp{margin-top:20px;max-width:56ch;font-size:16px;line-height:1.5;opacity:.86}
.plan__revamp b{font-weight:500}
/* the plan as one order card: pages, the discount, the extras as switches, the total, the hosting */
.plan__order{max-width:600px;margin-top:28px;padding:6px 20px;border-radius:16px;background:var(--ivory)}
.plan__row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 18px;padding:12px 0;border-top:var(--hair);font-size:15px;font-variant-numeric:tabular-nums}
.plan__row:first-child{border-top:0}
.plan__row--head{display:block;padding:14px 0 6px;font-size:var(--fs-label);font-weight:500;letter-spacing:var(--track-label);text-transform:uppercase;opacity:.62}
.plan__row--x{grid-template-columns:minmax(0,1fr) auto auto}
.plan__row small{display:block;margin-top:2px;font-size:13px;line-height:1.4;opacity:.62}
.plan__row--save span:last-child{padding:0 7px;border-radius:6px;background:var(--green);color:#0A0A0C}
.plan__row--total{font-size:17px;font-weight:500}
.plan__row--later{padding-top:8px;border-top:0;font-size:14px;opacity:.72}
.plan__out{max-width:600px;margin-top:22px;padding-left:16px;border-left:2px solid var(--line-strong);font-size:15px;line-height:1.5;opacity:.86}
.plan__out b{font-weight:600}
.plan__call{appearance:none;border:0;background:none;padding:0;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}

/* ---------- /start: the questions beside the order (Aston, 2026-10-14) ----------
   the same screens as /welcome, in the order's column: no centring, no
   question numbers (the four steps along the top say where they are) */
.buy__stage .ob__s{display:block;min-height:0;padding:0}
.buy__stage .ob__s[hidden]{display:none}
.buy__stage .ob__s > .label{display:inline-flex;align-items:center;gap:12px}
.buy__stage .ob__q{margin-top:16px;font-size:clamp(32px,3.8vw,54px);letter-spacing:-.04em;line-height:1.03}
.buy__stage .ob__s > .label + .ob__q{margin-top:16px}
.buy__stage .ob__q + .ways,.buy__stage .ob__q + .co__packs,.buy__stage .ob__q + .addons,.buy__stage .ob__q + .lead,.buy__stage .ob__q + div{margin-top:clamp(24px,3vw,36px)}
.buy__stage .ob__n{display:none}
.buy__stage .ob__hint + .lead{margin-top:clamp(20px,2.4vw,30px)}
.buy__then{margin-top:22px;font-size:15px;opacity:.62}
.buy__later{margin-top:clamp(36px,4vw,56px);padding-top:18px;border-top:var(--hair);font-size:13px;line-height:1.6;opacity:.55}
.buy__later[hidden]{display:none}
.buy__later button{appearance:none;border:0;background:none;padding:0;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:.2em;cursor:pointer}
.buy__mini[hidden]{display:none}
.plan__drop--small{margin-top:22px}
.plan__drop--small .ob__pick{min-height:64px;padding:16px 18px;font-size:15px}
.plan__drop--small small{display:inline;margin-left:6px}
#docNotes{margin-top:22px}
.buy__stage .co__terms{margin-top:26px}

/* the order card: pay now, and the hosting before launch, both plain to see */
.sum__what{display:block;margin-top:4px;font-size:13px;line-height:1.45;opacity:.66}
.sum__later{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.sum__later b{display:block;margin-top:4px;font-size:clamp(22px,2vw,26px);font-weight:400;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sum--check{margin-top:26px}
@media (min-width:1000px){.sum--check{display:none}}   /* the card beside the steps shows it there */

/* the sticky bar on phones: the total, and the screen's button when it's out of view */
.buy__sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;align-items:center;justify-content:space-between;gap:14px;padding:12px max(16px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-bottom));background:var(--paper);box-shadow:0 -1px 0 var(--line),0 -12px 30px rgba(0,0,0,.18)}
.buy__sticky-sum{display:flex;flex-direction:column;min-width:0}
.buy__sticky-sum b{font-size:20px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.buy__sticky-sum span{font-size:12px;opacity:.62;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buy__sticky .consult__btn{margin:0;border:0;flex:none;cursor:pointer;font-family:inherit}
.buy__sticky.is-call .buy__sticky-sum{display:none}
.buy__sticky.is-call .consult__btn{flex:1}
.sum__tag[hidden]{display:none}
@media (max-width:999px){
  .buy__sticky{display:flex}
  .buy__sticky[hidden],.buy__sticky.is-off{display:none}
  .buy{padding-bottom:calc(clamp(80px,8vw,120px) + 72px)}
}
.ob__row--later{cursor:default}
.ob__row--later .ob__row-v{opacity:.72}

/* restored 2026-10-15: lost in the plan-card edit */
.ob__nav[hidden]{display:none}
/* the page cards on /start: a row to swipe, a card for every count */
.packs{position:relative}
.buy__form .co__packs.packs--row{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin:0 -4px;padding:4px 4px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.packs--row::-webkit-scrollbar{display:none}
.packs--row .pack{display:flex;flex:0 0 clamp(160px,44%,200px);scroll-snap-align:start}
.packs--row .pack__card{flex:1;padding-top:48px}   /* room for a tag above the number */
.packs__arrow{position:absolute;top:50%;z-index:2;display:none;width:36px;height:36px;margin-top:-18px;border:0;border-radius:50%;background:var(--ink);color:var(--paper);font-size:16px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.18);transition:opacity var(--t-fast) var(--ease)}
.packs__arrow--prev{left:-16px}
.packs__arrow--next{right:-16px}
.packs__arrow:disabled{opacity:0;pointer-events:none}
.packs__arrow:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (hover:hover){.packs__arrow{display:grid;place-items:center}}

/* the found screen: what we'd change, folded away; a recommended extra on the extras screen */
.plan__more{max-width:600px;margin-top:22px;font-size:15px}
.plan__more summary{cursor:pointer;opacity:.72;text-decoration:underline;text-underline-offset:.2em;list-style:none}
.plan__more summary::-webkit-details-marker{display:none}
.plan__more[open] summary{opacity:1;text-decoration:none}
.plan__more p{margin-top:10px;line-height:1.5;opacity:.86}
/* not a fit: the pitch for a custom build (Aston, 2026-10-15) */
.ob__q em{font-style:normal;color:var(--green)}
.plan__build{max-width:600px;margin:26px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.plan__build li{display:grid;align-content:start;gap:4px;padding:16px 18px;border-radius:14px;background:var(--ivory);font-size:14px;line-height:1.4}
.plan__build b{font-size:16px;font-weight:500;letter-spacing:-.01em}
.plan__build span{opacity:.7}
@media (min-width:720px){.plan__build{grid-template-columns:repeat(3,minmax(0,1fr))}}
.plan__proof{max-width:56ch;margin-top:20px;font-size:15px;line-height:1.5;opacity:.86}
.plan__proof a{color:inherit;text-decoration:underline;text-underline-offset:.2em}
.ob__with{position:relative;display:inline-flex;align-items:center}
.plan__else{margin-top:22px;font-size:15px;opacity:.8}
.plan__else .ob__skip{display:block;padding:0;font-size:inherit;text-align:left;line-height:1.45;opacity:1}
.addon .sum__tag{margin-left:10px}
.addon__why{opacity:.72}
.buy__stage .ob__choices{max-width:600px}