/* =====================================================================
   Order flow. Everything general (tokens, .btn, .plan, .plan__feats) comes
   from the site's own stylesheet; this file is only the two column shell,
   the step rail and the few pieces the checkout needs.
   ===================================================================== */

.ord-body{margin:0;background:#fff}

.ord{
  display:grid;
  grid-template-columns:minmax(0,420px) minmax(0,1fr);
  min-height:100vh;
}

/* ---------------- left rail ----------------
   Same background family as the blog heroes and the social cards, with the
   rotated nested squares behind it. Only # is escaped in the data URI so the
   shapes stay readable. */
.ord__aside{
  position:relative;
  display:flex;flex-direction:column;
  padding:38px 38px 32px;
  color:#e7e4f5;
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400' width='400' height='400'><g transform='rotate(-12 240 150)' fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='2'><rect x='150' y='60' width='180' height='180' rx='20'/><rect x='120' y='30' width='240' height='240' rx='26'/><rect x='86' y='-4' width='308' height='308' rx='32'/></g><g stroke='%23ffffff' stroke-opacity='0.3' stroke-width='1.4' stroke-linecap='round'><line x1='286' y1='26' x2='366' y2='10'/><line x1='316' y1='52' x2='376' y2='40'/></g></svg>")
      right -60px top -40px / 420px 420px no-repeat,
    linear-gradient(160deg,#14102b 0%,#1c1740 42%,#262055 78%,#2e2766 100%);
}
/* the mark is 36px, so the link needs a little padding to clear 44 */
.ord__logo{display:inline-block;margin-bottom:44px;padding:5px 0}
.ord__logo img{display:block;width:148px;height:auto}

.ord__lede{
  margin:0 0 34px;
  font-family:var(--font-display);
  font-size:1.6rem;font-weight:700;line-height:1.2;letter-spacing:-.03em;
  color:#fff;
}
.ord__lede em{font-style:normal;color:var(--orange-lit)}

/* the step rail: a number, a label, and a line joining them */
.ord__steps{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ord__step{
  position:relative;
  font-size:0.95rem;color:#9d97c4;
  transition:color .2s ease;
}
/* The row itself. A finished step renders this as a <button>, so it needs the
   button defaults stripped back to the plain row the other steps show. */
.ord__step-in{
  display:grid;grid-template-columns:34px 1fr;align-items:center;gap:14px;
  width:100%;
  padding:11px 0;
  border:0;background:none;
  font:inherit;color:inherit;text-align:left;
}
button.ord__step-in{cursor:pointer}
button.ord__step-in:hover .ord__step-edit{opacity:1}
button.ord__step-in:hover{color:#fff}
button.ord__step-in:focus-visible{
  outline:2px solid var(--orange-lit);outline-offset:3px;border-radius:8px;
}
/* "Change" only shows on a step you can actually go back to */
.ord__step-edit{
  margin-left:9px;
  font-size:0.78rem;font-weight:700;color:var(--orange-lit);
  opacity:0;transition:opacity .15s ease;
}
@media (hover:none){
  .ord__step-edit{opacity:.9}
}
.ord__step + .ord__step::before{
  content:"";
  position:absolute;left:17px;top:-13px;height:26px;width:2px;
  background:rgba(255,255,255,.14);
}
.ord__step.is-done + .ord__step::before,
.ord__step.is-on::before{background:var(--orange)}
.ord__num{
  display:grid;place-items:center;
  width:34px;height:34px;border-radius:50%;
  border:2px solid rgba(255,255,255,.2);
  font-size:0.9rem;font-weight:700;
  background:rgba(255,255,255,.05);
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.ord__num svg{width:16px;height:16px}
.ord__step.is-on{color:#fff}
.ord__step.is-on .ord__num{
  border-color:var(--orange);background:var(--orange);color:#1a1005;
}
.ord__step.is-done{color:#cfc9ea}
.ord__step.is-done .ord__num{
  border-color:var(--orange);background:rgba(243,91,5,.18);color:var(--orange-lit);
}

/* testimonial, pinned to the bottom of the rail */
.ord__quote{
  margin-top:auto;padding-top:26px;
  border-top:1px solid rgba(255,255,255,.12);
}
.ord__stars{display:flex;gap:3px;margin-bottom:10px}
.ord__stars svg{width:15px;height:15px;fill:#00b67a}
.ord__quote blockquote{
  margin:0 0 9px;font-size:0.94rem;line-height:1.55;color:#e7e4f5;
}
.ord__quote cite{font-style:normal;font-size:0.85rem;color:#9d97c4}
/* A minimum height so the rail does not jump as a shorter review comes in.
   Sized to the longest of them at this width. */
.ord__quote blockquote{min-height:4.7em}
/* Cross fade between reviews. mode="out-in" means one leaves before the next
   arrives, so the two never overlap mid transition. */
.ordq-enter-active,.ordq-leave-active{transition:opacity .45s ease,transform .45s ease}
.ordq-enter-from{opacity:0;transform:translateY(6px)}
.ordq-leave-to{opacity:0;transform:translateY(-6px)}
@media (prefers-reduced-motion:reduce){
  .ordq-enter-active,.ordq-leave-active{transition:none}
}

/* ---------------- right side ---------------- */
.ord__main{
  display:flex;flex-direction:column;justify-content:center;
  /* 45px at the foot rather than 56, so the copyright line finishes level
     with the testimonial in the rail opposite. The rail carries 32px of its
     own padding and the cite sits a little above that; 45 is what lands the
     two baselines together. Both blocks are bottom-anchored, so the match
     holds at any viewport height. */
  padding:56px 40px 45px;
  background:#fff;
}
/* margin:auto on all four sides, not just the horizontal pair. In a flex
   column the vertical autos soak up the free space and split it evenly, which
   centres the step AND pushes .ord__bar to the foot. Doing that job with
   margin-top:auto on the bar instead looks equivalent but is not: the bar's
   auto eats the space first and the step ends up pinned to the top. */
.ord__inner{width:100%;max-width:560px;margin:auto}
.ord__inner--wide{max-width:1180px}

.ord__eyebrow{
  margin:0 0 10px;
  font-size:0.8rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--orange-dark);
}
.ord__title{
  margin:0 0 10px;
  font-family:var(--font-display);
  font-size:clamp(1.7rem,3.4vw,2.3rem);
  font-weight:700;line-height:1.14;letter-spacing:-.03em;
  color:var(--ink);
}
.ord__sub{margin:0 0 26px;font-size:1rem;line-height:1.6;color:var(--slate);max-width:52ch}

/* domain field: the scheme is a fixed label, not a control, because it was
   only ever https and a select implied a choice that changed nothing */
.ord__field{display:block;margin-bottom:8px}
.ord__label{
  display:block;margin-bottom:7px;
  font-size:0.86rem;font-weight:700;color:var(--ink);
}
.ord__domain{
  display:flex;align-items:stretch;
  border:1px solid var(--line);border-radius:10px;
  background:#fff;overflow:hidden;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.ord__domain:focus-within{
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(243,91,5,.14);
}
.ord__scheme{
  display:grid;place-items:center;
  padding:0 14px;
  background:#f7f7fb;
  border-right:1px solid var(--line);
  font-size:0.92rem;color:var(--slate);
  white-space:nowrap;
}
.ord__domain input{
  flex:1;min-width:0;
  padding:15px 14px;
  border:0;outline:0;
  font:inherit;font-size:1rem;color:var(--ink);
  background:transparent;
}
.ord__note{margin:0;font-size:0.86rem;color:var(--slate)}

.ord__area{
  width:100%;
  padding:14px;
  border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:0.98rem;line-height:1.6;color:var(--ink);
  resize:vertical;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.ord__area:focus{
  outline:0;border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(243,91,5,.14);
}

/* Optional contact details, set apart from the note so it is obvious they
   are a separate, voluntary thing rather than more of the same question. */
.ord__reach{
  margin-top:22px;padding:18px;
  border:1px solid var(--line);border-radius:12px;
  background:#faf9fd;
}
.ord__reach-head{
  display:flex;align-items:baseline;gap:9px;
  margin:0 0 14px;
  font-size:0.92rem;font-weight:700;color:var(--ink);
}
.ord__reach-head span{
  padding:3px 8px;border-radius:6px;
  background:#eceef5;
  font-size:0.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--slate);
}
.ord__pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ord__input{
  width:100%;
  padding:12px 13px;
  border:1px solid var(--line);border-radius:9px;
  font:inherit;font-size:0.96rem;color:var(--ink);
  background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.ord__input:focus{
  outline:0;border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(243,91,5,.14);
}
.ord__reach-note{margin:12px 0 0;font-size:0.82rem;line-height:1.5;color:var(--slate)}
@media (max-width:560px){
  .ord__pair{grid-template-columns:1fr}
}

.ord__err{
  display:flex;align-items:center;gap:8px;
  margin:10px 0 0;
  font-size:0.88rem;font-weight:600;color:#b3261e;
}
.ord__err svg{flex:none;width:16px;height:16px}

.ord__actions{display:flex;align-items:center;gap:12px;margin-top:26px}
.ord__back{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 4px;
  border:0;background:none;cursor:pointer;
  font:inherit;font-size:0.94rem;font-weight:600;color:var(--slate);
}
.ord__back:hover{color:var(--ink)}
.ord__back svg{width:15px;height:15px}
.ord__skip{margin-left:auto;font-size:0.9rem;color:var(--slate)}
.ord__skip button{
  border:0;background:none;padding:0;cursor:pointer;
  font:inherit;font-weight:700;color:var(--orange-dark);
}

/* ---------------- plan step ---------------- */
.ord__switches{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;
  margin-bottom:26px;
}
.ord__cur{
  padding:9px 12px;
  border:1px solid var(--line);border-radius:9px;
  font:inherit;font-size:0.92rem;font-weight:600;color:var(--ink);
  background:#fff;
}
/* the billing toggle, same shape as the one on the pricing page */
.ord__bill{display:inline-flex;padding:4px;border-radius:10px;background:#f2f2f7}
.ord__bill button{
  border:0;background:none;cursor:pointer;
  padding:8px 14px;border-radius:7px;
  font:inherit;font-size:0.9rem;font-weight:700;color:var(--slate);
}
.ord__bill button.is-on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(13,21,38,.12)}
.ord__save{
  padding:5px 10px;border-radius:7px;
  background:#fff1e6;color:var(--orange-on-peach);
  font-size:0.8rem;font-weight:700;
}

.ord__plans{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;align-items:stretch;
}
.ord__plan{
  position:relative;
  display:flex;flex-direction:column;
  padding:24px 18px 20px;
  border:1px solid var(--line);border-radius:14px;
  background:#fff;
  text-align:left;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease;
}
.ord__plan:hover{
  border-color:#d7cff0;
  box-shadow:0 12px 30px rgba(20,16,43,.1);
  transform:translateY(-3px);
}
/* the popular one: a warmer ground and a ring, rather than only a flag */
.ord__plan--best{
  border-color:transparent;
  background:linear-gradient(180deg,#fff7f2 0%,#fff 62%);
  box-shadow:inset 0 0 0 1.5px rgba(243,91,5,.45);
}
.ord__plan--best:hover{
  border-color:transparent;
  box-shadow:inset 0 0 0 1.5px rgba(243,91,5,.6), 0 12px 30px rgba(243,91,5,.16);
}
.ord__flag{
  position:absolute;top:-11px;left:18px;
  padding:4px 10px;border-radius:6px;
  background:var(--orange);color:#1a1005;
  font-size:0.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.ord__plan h3{
  margin:0;
  font-family:var(--font-display);
  font-size:1.02rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);
}
.ord__price{
  margin:12px 0 0;
  font-family:var(--font-display);
  font-size:2rem;font-weight:700;letter-spacing:-.04em;line-height:1;
  color:var(--ink);
}
.ord__per{
  display:block;margin-top:6px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:0.8rem;font-weight:400;letter-spacing:0;color:var(--slate);
}

/* the promise that matters most in a checkout, so it sits above the detail */
.ord__sla{
  display:flex;align-items:center;gap:6px;
  margin:16px 0 0;padding:6px 9px;
  border-radius:7px;
  background:#fff1e6;
  font-size:0.78rem;font-weight:700;color:var(--orange-on-peach);
  white-space:nowrap;
}
.ord__sla svg{flex:none;width:13px;height:13px}
.ord__plan--best .ord__sla{background:rgba(243,91,5,.12)}

.ord__points{
  list-style:none;
  margin:16px 0 0;padding:16px 0 0;
  border-top:1px solid var(--line);
  display:grid;gap:9px;align-content:start;
  flex-grow:1;
}
.ord__plan--best .ord__points{border-top-color:rgba(243,91,5,.2)}
.ord__points li{
  display:flex;gap:8px;align-items:flex-start;
  font-size:0.84rem;line-height:1.45;color:var(--slate);
}
.ord__points svg{flex:none;width:15px;height:15px;margin-top:2px;color:var(--orange-dark)}

.ord__plan .btn{width:100%;margin-top:18px;justify-content:center}

.ord__foot{
  margin:26px 0 0;
  font-size:0.86rem;line-height:1.6;color:var(--slate);
}
.ord__foot a{color:var(--orange-dark);font-weight:700}

.ord__fallback{max-width:44ch;margin:80px auto;padding:0 24px;font-size:1rem;line-height:1.6}

/* ---------------- responsive ---------------- */
@media (max-width:1240px){
  .ord__plans{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1080px){
  .ord{grid-template-columns:minmax(0,340px) minmax(0,1fr)}
  .ord__main{padding:44px 28px}
}
@media (max-width:880px){
  .ord{grid-template-columns:minmax(0,1fr)}
  .ord__aside{padding:24px 24px 26px}
  .ord__logo{margin-bottom:26px}
  .ord__lede{font-size:1.3rem;margin-bottom:22px}
  /* the rail turns into a row of numbers, and the quote is dropped rather
     than pushed above the fold it is meant to reassure below */
  .ord__steps{grid-auto-flow:column;gap:0}
  /* These target .ord__step-in, not .ord__step: the grid and the label both
     moved onto the inner element when finished steps became buttons. Left on
     the <li> the label stopped being hidden here and the row pushed the page
     3px wider than the screen. */
  .ord__step-in{grid-template-columns:34px;justify-items:center;gap:0;padding:0}
  /* direct child only: the number itself is a last-child span inside
     .ord__num, so an unscoped rule emptied every circle */
  .ord__step-in > span:last-child{display:none}
  .ord__step + .ord__step::before{
    left:auto;right:calc(50% + 22px);top:16px;width:calc(100% - 44px);height:2px;
  }
  .ord__quote{display:none}
  .ord__plans{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .ord__main{padding:34px 20px}
  .ord__plans{grid-template-columns:minmax(0,1fr)}
  .ord__switches{gap:10px}
}

/* ---------------------------------------------------------------------
   Footer bar

   The flow deliberately has no site nav, so a visitor who lands here by
   mistake had only the logo to get out. This gives them a labelled way
   back, and carries the company details that appear in the footer on
   every other page.

   .ord__main centres its content vertically, so the bar is pushed to the
   bottom with margin-top:auto rather than being centred with the form.
   --------------------------------------------------------------------- */
.ord__bar{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:14px;
  margin:48px auto 0;
  padding-top:22px;
  width:100%;max-width:760px;
  border-top:1px solid var(--line);
}
.ord__home{
  display:inline-flex;align-items:center;gap:7px;
  /* 44px tall: at 8px padding it came out 39px, under the comfortable
     minimum for a thumb. */
  min-height:44px;
  padding:10px 16px 10px 13px;
  border-radius:8px;
  background:#fdece2;
  font-size:0.9rem;font-weight:700;
  color:var(--orange-on-peach);
  white-space:nowrap;
}
.ord__home:hover{background:#fbdfd0}
/* the shared back icon points left already; no flip needed */
.ord__home svg{width:15px;height:15px}

.ord__copy{
  margin:0;
  font-size:0.78rem;line-height:1.5;color:var(--slate);
  text-align:right;
}
/* 3.72:1 on white, and this is 12px. #6b7688 clears AA at 4.59. */
.ord__copy span{display:block;color:#6b7688}

@media (max-width:760px){
  .ord__bar{
    justify-content:flex-start;
    margin-top:36px;
  }
  .ord__copy{text-align:left}
}


/* The arrow and the back chevron are injected as `<span v-html>`, so the span
   is the flex child the button centres, and the <svg> inside it is an inline
   box sitting on that span's text baseline - which left it 2.4px above centre.
   Making the span a flex container takes the svg off the baseline. */
.ord .btn > span,
.ord__back > span{
  display:inline-flex;
  align-items:center;
}
.ord .btn > span > svg,
.ord__back > span > svg{display:block}


/* Step 1 is one field and a button, where the later steps carry a form or five
   plan cards. At the shared scale it read as an afterthought floating in a lot
   of white, so the opening step alone runs a size up. */
.ord__inner--intro{max-width:620px}
.ord__inner--intro .ord__title{font-size:clamp(1.95rem,3.9vw,2.7rem)}
.ord__inner--intro .ord__sub{font-size:1.06rem;margin-bottom:30px}
.ord__inner--intro .ord__label{font-size:0.92rem}
.ord__inner--intro .ord__domain input{padding:17px 16px;font-size:1.06rem}
.ord__inner--intro .ord__scheme{padding:0 16px;font-size:1rem}
.ord__inner--intro .ord__note{font-size:0.9rem}
.ord__inner--intro .ord__actions .btn{padding:14px 28px;font-size:1.02rem}