/* ============================================================
   PrimeStart — Checkout

   Shared by /checkout/website/ and /checkout/google-growth/. One
   composition, two data sets: nothing here is plan-specific except
   the SEO list's accent.

   The page is a two-column editorial split, not a shop. Left: what
   the customer is buying, set in hairline blocks with no card chrome.
   Right: one white card, an orange top rule, holding the order
   summary and the form, sticky beside the reading column. The
   welcome state replaces the form inside that same card.

   Reduced chrome (template-parts/checkout/*) is styled at the top.
   Phone rules (≤640px) are at the end; mobile.css carries nothing
   for this page.
   ============================================================ */

/* ============================================================
   1. REDUCED HEADER + FOOTER
   ============================================================ */
header.site.co-head .wrap{gap:20px}
.co-head-secure{
  display:flex;align-items:center;gap:7px;
  font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
  padding-left:20px;border-left:1px solid var(--line);
}
.co-head-secure svg{color:var(--orange);flex:none}
.co-head-end{margin-left:auto;display:flex;align-items:center;gap:18px;flex:none}
.co-head-help{display:flex;align-items:center;gap:10px;white-space:nowrap}
.co-head-ico{color:var(--muted);flex:none;transition:color .15s ease}
.co-head-help .t{display:block;font-size:12px;color:var(--muted);line-height:1.2;letter-spacing:0}
.co-head-help .n{
  display:block;font-family:var(--fh);font-size:15.5px;font-weight:700;
  letter-spacing:-0.025em;color:var(--ink);line-height:1.25;
}
.co-head-help:hover .n{color:var(--orange)}
.co-head-help:hover .co-head-ico{color:var(--orange)}
.co-head-div{width:1px;height:30px;background:var(--line);flex:none}
.co-head-signin{font-size:14px;color:var(--muted);white-space:nowrap}
.co-head-signin a{
  font-family:var(--fh);font-weight:700;font-size:14.5px;letter-spacing:-0.02em;color:var(--ink);
  border-bottom:1px solid var(--line);padding-bottom:1px;margin-left:5px;
}
.co-head-signin a:hover{color:var(--orange-dk);border-bottom-color:var(--orange)}

footer.site.co-foot{background:var(--paper);border-top:1px solid var(--line);padding:26px 0 34px;color:var(--muted)}
.co-foot-in{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 28px}
.co-foot-copy{font-size:13.5px}
.co-foot-legal{display:flex;flex-wrap:wrap;gap:8px 22px}
.co-foot-legal a{font-size:13.5px;color:var(--muted)}
.co-foot-legal a:hover{color:var(--orange-dk)}

/* ============================================================
   2. THE PAGE
   ============================================================ */
.co{padding:56px 0 104px}
.co-in{display:grid;grid-template-columns:minmax(0,1fr) 456px;gap:72px;align-items:start}

/* ---------- left: what you are buying ---------- */
.co-copy{min-width:0;max-width:620px}
.co-copy h1{font-size:clamp(34px,3.8vw,50px);max-width:15ch;margin:0 0 18px}
.co-support{font-size:18.5px;line-height:1.6;color:var(--muted);max-width:52ch}

/* the tagline. Once per page, given room, hairline above and below */
.co-say{
  margin:34px 0 30px;padding:22px 0 24px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:var(--fh);font-size:clamp(21px,2.15vw,27px);font-weight:700;
  letter-spacing:-0.035em;line-height:1.22;color:var(--ink);
}
.co-say span{display:block;color:var(--orange-dk)}

.co-assure{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:9px 28px}
.co-assure li{display:flex;align-items:center;gap:9px;font-family:var(--fh);font-size:14.5px;font-weight:600;letter-spacing:-0.018em;color:var(--ink-2)}
.co-assure .tick{width:16px;height:16px;color:var(--orange)}

.co-block{margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.co-k{
  font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 18px;
}
.co-k-2{margin-top:28px;color:var(--orange-dk)}

.co-inc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:11px 30px}
.co-inc li{display:flex;align-items:flex-start;gap:10px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.co-inc .tick{width:16px;height:16px;margin-top:4px;flex:none;color:var(--orange)}
.co-inc-growth li{color:var(--ink)}

/* The exclusions list on the standalone SEO checkout. Same grid, but a muted
   dash where the tick goes: a green tick beside "we do not host your website"
   reads as a feature to anyone scanning rather than reading. The dash is
   aria-hidden, so the list is heard as plain items under the heading that
   already says these are not included. */
.co-inc-not li{color:var(--muted)}
.co-not{width:16px;height:16px;margin-top:4px;flex:none;position:relative}
.co-not::before{content:"";position:absolute;left:2px;right:2px;top:7px;height:1.5px;border-radius:1px;background:var(--line)}

.co-note{margin:18px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted);max-width:56ch}

/* how PrimeStart works: three numbered lines, no cards */
.co-how{list-style:none;margin:0;padding:0;counter-reset:coh}
.co-how li{counter-increment:coh;display:grid;grid-template-columns:32px 1fr;gap:14px;padding:14px 0;border-top:1px solid var(--line-2)}
.co-how li:first-child{border-top:0;padding-top:0}
.co-how li::before{content:counter(coh,decimal-leading-zero);font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--orange);padding-top:4px}
.co-how b{display:block;font-family:var(--fh);font-size:17.5px;font-weight:700;letter-spacing:-0.028em;color:var(--ink);line-height:1.3}
.co-how span{display:block;grid-column:2;margin-top:5px;font-size:15px;line-height:1.55;color:var(--muted)}

/* what happens next: the same numbering, longer bodies */
.co-next{list-style:none;margin:0;padding:0;counter-reset:con}
.co-next li{counter-increment:con;display:grid;grid-template-columns:32px 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--line-2)}
.co-next li:first-child{border-top:0;padding-top:0}
.co-next li::before{content:counter(con,decimal-leading-zero);font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--orange);padding-top:4px}
.co-next b{display:block;font-family:var(--fh);font-size:17px;font-weight:700;letter-spacing:-0.026em;color:var(--ink);line-height:1.3}
.co-next span{display:block;grid-column:2;margin-top:5px;font-size:15px;line-height:1.55;color:var(--muted)}

.co-other{margin:36px 0 0;padding-top:24px;border-top:1px solid var(--line);font-size:15.5px;color:var(--muted)}
.co-other .link-u{font-size:15.5px;margin-left:4px}

/* ============================================================
   3. THE CARD
   ============================================================ */
/* The column stretches to the row so the card has somewhere to stick.
   --co-top is the sticky offset: below the header when the card fits the
   viewport, and a negative offset when it does not, so a tall card settles
   with its BOTTOM (the submit button) on screen rather than pinning its top
   and pushing the button out of reach. assets/js/checkout.js keeps it in
   step with the viewport; the fallback below is the header offset. */
.co-card-col{min-width:0;align-self:stretch}
.co-card{
  position:sticky;top:var(--co-top,calc(var(--hdr) + 24px));
  background:var(--white);border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:0 1px 2px rgba(18,33,47,.04),0 44px 84px -46px rgba(18,33,47,.42);
}
.co-card::before{content:"";display:block;height:4px;background:var(--orange)}

/* ---------- order summary ---------- */
.co-sum{background:var(--paper);border-bottom:1px solid var(--line)}
.co-sum-bar{display:none}
.co-sum-body{padding:26px 32px 24px}
.co-sum-k{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.co-sum-price{display:flex;align-items:baseline;gap:9px;margin:0 0 18px}
.co-sum-price b{font-family:var(--fh);font-size:38px;font-weight:800;letter-spacing:-0.045em;line-height:1;color:var(--ink)}
.co-sum-price span{font-family:var(--fh);font-size:14.5px;font-weight:600;letter-spacing:-0.02em;color:var(--muted)}

.co-sum-list{margin:0;padding:0}
.co-sum-list > div{display:grid;grid-template-columns:1fr auto;gap:8px 18px;padding:9px 0;border-top:1px solid var(--line)}
.co-sum-list > div:first-child{border-top:0;padding-top:0}
.co-sum-list dt{font-size:14px;line-height:1.45;color:var(--muted)}
.co-sum-list dd{margin:0;font-family:var(--fh);font-size:14px;font-weight:600;letter-spacing:-0.015em;line-height:1.45;color:var(--ink);text-align:right}
.co-sum-list .is-key dd{font-size:15px;font-weight:700}

.co-sum-today{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin:14px 0 0;padding:14px 0 0;border-top:2px solid var(--ink);
}
.co-sum-today span{font-family:var(--fh);font-size:14.5px;font-weight:700;letter-spacing:-0.02em;color:var(--ink)}
.co-sum-today b{font-family:var(--fh);font-size:22px;font-weight:800;letter-spacing:-0.04em;color:var(--ink)}
.co-sum-after{margin:12px 0 0;font-size:13px;line-height:1.55;color:var(--muted)}

/* ---------- form ---------- */
.co-form-wrap{padding:28px 32px 30px}
.co-form-h{font-family:var(--fh);font-size:22px;font-weight:700;letter-spacing:-0.032em;line-height:1.2;color:var(--ink);margin:0 0 7px}
.co-form-p{font-size:14.5px;line-height:1.55;color:var(--muted);margin:0 0 22px;max-width:44ch}

.co-alert{border-radius:12px;padding:15px 17px;margin:0 0 20px;font-size:14.5px;line-height:1.55;background:#FEF7F6;border:1px solid #F0CFCC;color:#8C1D18}
.co-alert b{display:block;font-family:var(--fh);font-size:15.5px;font-weight:700;letter-spacing:-0.02em;margin-bottom:4px}
.co-alert a{color:inherit;border-bottom:1px solid currentColor}
.co-alert-info{background:var(--wash);border-color:#F2DFC6;color:#7A4A12}

.co-grid{gap:16px 14px}
.co-form .ps-label{font-size:14px;margin-bottom:6px}
.co-form input[type=text],.co-form input[type=email],.co-form input[type=tel],.co-form input[type=password]{
  width:100%;min-height:52px;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;
  background:var(--white);font-family:var(--fb);font-size:16px;color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease;
}
.co-form input:focus{outline:0;border-color:var(--orange);box-shadow:0 0 0 3px rgba(217,98,14,.12)}
.co-form .ps-field-err input{border-color:#B3261E;background:#FEF7F6}
.co-form .ps-field-err input:focus{box-shadow:0 0 0 3px rgba(179,38,30,.12)}
.co-form .ps-field-ok input{border-color:#CBE0CB}
.ps-hint{display:block;margin-top:6px;font-size:12.5px;line-height:1.45;color:var(--muted)}

.co-pass-in{position:relative;display:block}
.co-pass-in input{padding-right:52px}
.co-pass-eye{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);
  width:40px;height:40px;display:grid;place-items:center;
  background:none;border:0;border-radius:8px;cursor:pointer;color:var(--muted);
}
.co-pass-eye:hover{color:var(--orange-dk)}
.co-pass-eye:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.co-pass-eye[aria-pressed="true"]{color:var(--orange-dk)}

/* payment step */
.co-pay{margin:22px 0 0;padding:16px 18px;background:var(--paper);border:1px solid var(--line);border-radius:12px}
.co-pay-k{display:flex;align-items:center;gap:9px;font-family:var(--fh);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin:0 0 7px}
.co-pay-p{font-size:13.5px;line-height:1.6;color:var(--muted)}
.co-pay-test{background:var(--wash);border-color:#F2DFC6}
.co-pay-test .co-pay-p{color:#7A4A12}
.co-pay-tag{
  display:inline-block;padding:3px 8px;border-radius:5px;background:var(--ink);color:#fff;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}

.co-terms{margin:18px 0 20px}
.co-terms p{font-size:12.5px;line-height:1.6;color:var(--muted)}
.co-terms a{color:var(--orange-dk);border-bottom:1px solid rgba(180,78,8,.35)}

.co-submit{position:relative;width:100%;min-height:56px;display:inline-flex;align-items:center;justify-content:center;gap:10px}
.co-submit .co-spin{display:none;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:co-spin .7s linear infinite}
.co-submit.is-busy{pointer-events:none}
.co-submit.is-busy .co-spin{display:block}
@keyframes co-spin{to{transform:rotate(360deg)}}
.co-submit-note{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted);text-align:center}
.co-noscript{margin-top:14px;font-size:14px;line-height:1.55;color:#8C1D18}
.co-noscript a{color:var(--orange-dk);border-bottom:1px solid rgba(180,78,8,.35)}

.co-help{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line-2);font-size:14px;color:var(--muted);text-align:center}
.co-help .link-u{font-size:14px;margin-left:4px}

/* ============================================================
   THE WELCOME — a full-screen takeover, not a card state

   The customer has just stopped shopping and started being a customer.
   That deserves the whole screen: the header, the price, the order summary
   and every line of sales copy go, and what is left is their name and one
   thing to do next. It used to render inside the right-hand card, under a
   price, where it read as a form validating rather than as something
   having happened.

   Presentation only — the overlay's inert/aria-hidden behaviour and the
   focus trap are in assets/js/checkout.js.
   ============================================================ */
.co-win{
  position:fixed;inset:0;z-index:200;
  background:var(--paper);
  display:grid;place-items:center;
  padding:32px 24px;
  overflow-y:auto;
  opacity:0;
  transition:opacity .34s var(--ease);
}
/*
 * The overlay ships with the `hidden` attribute and is only revealed on a
 * successful signup. But `hidden` is just `display:none` from the browser's
 * own stylesheet, and the rule above sets `display:grid`, which beats it.
 * The result was an invisible, full-screen, z-index 200 panel sitting over
 * both checkout pages from the moment they loaded: the page looked
 * completely normal and nothing on it could be clicked - not the form
 * fields, not the logo, nothing (owner, 5 September 2026).
 *
 * Any element that is toggled with `hidden` and given a display value in
 * CSS needs this. The same trap caught the footer's town list earlier the
 * same day.
 */
.co-win[hidden]{display:none}
.co-win.is-in{opacity:1}
body.co-won{overflow:hidden}

.co-win-in{
  width:100%;max-width:560px;text-align:center;
  transform:translateY(10px);
  transition:transform .42s var(--ease);
}
.co-win.is-in .co-win-in{transform:none}

/* the PrimeStart mark, echoing the one in the header */
.co-win-mark{
  display:block;width:38px;height:38px;margin:0 auto 30px;
  border-radius:11px;background:var(--ink);
  position:relative;
}
.co-win-mark-dot{
  position:absolute;left:50%;top:50%;
  width:13px;height:13px;margin:-6.5px 0 0 -6.5px;
  border-radius:50%;background:var(--orange);
}

/* the success mark: a ring that draws, then a tick */
.co-win-tick{
  display:block;width:64px;height:64px;margin:0 auto 22px;
  border-radius:50%;
  background:rgba(217,98,14,.09);
  color:var(--orange);
  display:grid;place-items:center;
}
.co-win-tick-ring{opacity:.42}
.co-win-tick-path{
  stroke-dasharray:26;stroke-dashoffset:26;
}
.co-win.is-in .co-win-tick-path{
  animation:co-win-draw .5s var(--ease) .12s forwards;
}
@keyframes co-win-draw{to{stroke-dashoffset:0}}

.co-win-k{
  font-family:var(--fh);font-size:12.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--orange-dk);margin:0 0 14px;
}
.co-win-h{
  font-family:var(--fh);font-size:clamp(30px,4.6vw,44px);font-weight:800;
  letter-spacing:-.035em;line-height:1.08;color:var(--ink);
  margin:0;text-wrap:balance;
}
.co-win-ready{
  font-family:var(--fb);font-size:18px;line-height:1.5;
  color:var(--ink-2);margin:16px 0 0;
}
.co-win-p{
  font-family:var(--fb);font-size:17px;line-height:1.55;
  color:var(--muted);margin:6px auto 0;max-width:34ch;
}
.co-win-cta{
  margin-top:32px;min-width:260px;gap:9px;
}
.co-win-arrow{transition:transform .18s var(--ease)}
.co-win-cta:hover .co-win-arrow{transform:translateX(3px)}
.co-win-note{
  font-family:var(--fb);font-size:13.5px;line-height:1.6;
  color:var(--muted);margin:18px auto 0;max-width:40ch;
}
.co-win-test{
  font-family:var(--fb);font-size:12.5px;line-height:1.65;
  color:var(--muted);margin:22px auto 0;max-width:46ch;
  padding-top:18px;border-top:1px solid var(--line);
}
/* "You won't get a confirmation email." Sits with the reassurance rather than
   the small print, because a customer expecting a receipt and getting silence
   assumes the form failed — so this has to be read, not skimmed past. */
.co-win-mail{
  font-family:var(--fb);font-size:13.5px;line-height:1.6;
  color:var(--ink-2);margin:14px auto 0;max-width:44ch;
}
.co-win-say{
  font-family:var(--fh);font-size:15px;font-weight:700;
  letter-spacing:-.012em;line-height:1.4;color:var(--ink);
  margin:38px auto 0;
}
.co-win-say span{display:block;color:var(--orange)}

@media (max-width:640px){
  .co-win{padding:28px 20px;place-items:start center}
  .co-win-in{padding-top:24px}
  .co-win-mark{margin-bottom:22px}
  .co-win-tick{width:56px;height:56px;margin-bottom:18px}
  .co-win-ready{font-size:17px}
  .co-win-p{font-size:16px}
  .co-win-cta{width:100%;min-width:0}
}

@media (prefers-reduced-motion:reduce){
  .co-win,.co-win-in,.co-win-arrow{transition:none}
  .co-win-in{transform:none}
  .co-win-tick-path{stroke-dashoffset:0;animation:none}
  .co-win-cta:hover .co-win-arrow{transform:none}
}

/* ============================================================
   4. RESPONSIVE
   ============================================================ */
@media (max-width:1180px){
  .co-in{grid-template-columns:minmax(0,1fr) 408px;gap:48px}
  .co-sum-body{padding:22px 26px 20px}
  .co-form-wrap{padding:24px 26px 26px}
}
@media (max-width:1040px){
  .co{padding:40px 0 80px}
  .co-in{grid-template-columns:1fr;gap:0}
  .co-copy{max-width:none;order:2}
  .co-card-col{order:1;margin-bottom:48px;align-self:auto}
  .co-card{position:static;max-width:560px}
  .co-copy h1{max-width:20ch}
  .co-head-secure{display:none}
}
@media (max-width:860px){
  .co-inc{grid-template-columns:1fr}
  .co-head-help .t{display:none}
}
@media (max-width:760px){
  .co-say{font-size:22px}
}

/* ---------- phone (≤640px) ----------
   The card goes edge to edge and the order summary collapses into
   one compact bar that expands. Nothing is removed from the DOM:
   every figure, every included line and every step stays. */
@media (max-width:640px){
  header.site.co-head .wrap{gap:12px}
  .co-head-end{gap:10px}
  .co-head-div{display:none}
  .co-head-help .n{font-size:14px}
  .co-head-signin{display:none}

  .co{padding:26px 0 56px}
  .co-card-col{margin-bottom:34px}
  .co-card{border-radius:0;margin:0 calc(-1 * var(--pad));border-left:0;border-right:0;max-width:none;box-shadow:0 26px 52px -44px rgba(18,33,47,.4)}

  /* the summary becomes an expandable bar */
  .co-sum-bar{
    display:flex;align-items:center;gap:12px;width:100%;
    padding:15px 20px;background:none;border:0;cursor:pointer;text-align:left;
  }
  .co-sum-bar-l{flex:1;min-width:0}
  .co-sum-bar-l b{display:block;font-family:var(--fh);font-size:15px;font-weight:700;letter-spacing:-0.025em;color:var(--ink);line-height:1.25}
  .co-sum-bar-l em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:2px}
  .co-sum-bar-r{flex:none;text-align:right}
  .co-sum-bar-r b{display:block;font-family:var(--fh);font-size:19px;font-weight:800;letter-spacing:-0.04em;color:var(--ink);line-height:1.1}
  .co-sum-bar-r em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:2px}
  .co-sum-chev{flex:none;color:var(--muted);transition:transform .2s var(--ease)}
  .co-sum-bar[aria-expanded="true"] .co-sum-chev{transform:rotate(180deg)}
  .co-sum-bar:focus-visible{outline:2px solid var(--orange);outline-offset:-3px}
  .co-sum-bar + .co-sum-body{border-top:1px solid var(--line)}
  .js .co-sum-bar[aria-expanded="false"] + .co-sum-body{display:none}
  .co-sum-body{padding:18px 20px 20px}
  .co-sum-k,.co-sum-price{display:none}
  .co-sum-list dt{font-size:13.5px}
  .co-sum-list dd{font-size:13.5px}

  .co-form-wrap{padding:22px 20px 24px}
  .co-form-h{font-size:20px}
  .co-form-p{font-size:14px;margin-bottom:18px}
  .co-grid{grid-template-columns:1fr}
  .co-submit{min-height:54px}

  .co-copy h1{font-size:clamp(29px,8.2vw,36px);max-width:none;margin-bottom:14px}
  .co-support{font-size:16px}
  .co-say{margin:24px 0 22px;padding:18px 0 20px;font-size:20px}
  .co-assure{gap:7px 18px}
  .co-assure li{font-size:13.5px}
  .co-block{margin-top:32px;padding-top:22px}
  .co-inc li{font-size:14.5px}
  .co-how li,.co-next li{grid-template-columns:26px 1fr;gap:10px}
  .co-how b{font-size:16px}
  .co-next b{font-size:16px}
  .co-how span,.co-next span{font-size:14.5px}
  .co-other{margin-top:28px;padding-top:20px;font-size:14.5px}
  .co-other .link-u{font-size:14.5px}

  .co-foot-in{flex-direction:column;align-items:flex-start;gap:10px}
  .co-foot-legal{gap:6px 16px}
}
@media (max-width:380px){
  .co-sum-bar-r b{font-size:17px}
  .co-copy h1{font-size:28px}
  .co-say{font-size:19px}
}

@media (prefers-reduced-motion:reduce){
  .co-sum-chev,.co-form input,.co-head-ico,.co-head-help .n{transition:none}
  .co-submit .co-spin{animation:none;border-top-color:rgba(255,255,255,.4)}
}