/* ============================================================
   one — by Kanvas
   ============================================================ */

:root{
  --ink:#1d1d1f;
  --ink-2:#6e6e73;
  --ink-3:#86868b;
  --bg:#ffffff;
  --bg-grey:#f5f5f7;
  --line:#d2d2d7;
  --line-soft:#e8e8ed;
  /* Green means one thing only: included, or free. Never decoration. */
  --good:#1a7f37;
  --good-soft:#e7f6ec;
  --good-dark:#5fd18f;   /* on the black app section */
  --blue:#1d1d1f;
  --blue-dark:#000000;
  --radius:18px;
  --radius-lg:28px;
  --wrap:1040px;
  --nav-h:48px;
  --ease:cubic-bezier(.25,.1,.25,1);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
/* A display rule on a class beats the hidden attribute, which had left the
   Google badge and the signup-only fields on screen while marked hidden. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  letter-spacing:-.01em;
}

img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

.skip{position:absolute;left:-9999px;top:0;background:#fff;padding:12px 18px;z-index:200;border-radius:0 0 12px 0}
.skip:focus{left:0}

:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px;width:100%}
.center{text-align:center}

/* ---------- Type ---------- */
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.025em;line-height:1.06}
h2{font-size:clamp(32px,5.2vw,48px);letter-spacing:-.03em;text-wrap:balance}
h3{font-size:21px;letter-spacing:-.02em}

.lede{
  margin:14px auto 0;max-width:38ch;text-wrap:pretty;
  font-size:clamp(17px,2.2vw,21px);line-height:1.42;color:var(--ink-2);font-weight:400;
}
.lede.left{margin-left:0;text-align:left}
.eyebrow{margin:0 0 10px;font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--blue);text-transform:none}
.micro{margin-top:34px;font-size:13px;line-height:1.5;color:var(--ink-3);max-width:52ch;margin-left:auto;margin-right:auto}

.section{padding:clamp(78px,11vw,130px) 0}
.section.grey{background:var(--bg-grey)}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:100;height:var(--nav-h);
  background:rgba(255,255,255,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.nav-inner{
  max-width:var(--wrap);margin:0 auto;padding:0 22px;height:100%;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{
  font-size:22px;font-weight:600;letter-spacing:-.045em;color:var(--ink);
  text-transform:lowercase;line-height:1;
}
.logo:hover{text-decoration:none;opacity:.7}

.burger{
  width:34px;height:34px;border:0;background:none;padding:0;cursor:pointer;
  display:grid;place-content:center;gap:5px;
}
.burger span{
  display:block;width:17px;height:1.5px;background:var(--ink);border-radius:2px;
  transition:transform .34s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

.menu{
  position:fixed;inset:var(--nav-h) 0 auto 0;z-index:99;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
}
.menu[hidden]{display:none}
.menu-inner{max-width:var(--wrap);margin:0 auto;padding:14px 22px 34px;display:flex;flex-direction:column}
.menu-link{
  appearance:none;-webkit-appearance:none;background:none;border:0;border-radius:0;
  font-family:inherit;color:var(--ink);font-size:26px;font-weight:600;letter-spacing:-.02em;
  text-align:left;width:100%;padding:13px 0;border-bottom:1px solid var(--line-soft);cursor:pointer;
  transition:opacity .2s var(--ease);
}
.menu-link:hover{opacity:.55}
.menu-actions{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.menu-actions .btn{flex:1 1 140px}
.menu-inner > *{opacity:0;transform:translateY(-8px)}
.menu.open .menu-inner > *{animation:menuIn .42s var(--ease) forwards}
.menu.open .menu-inner > *:nth-child(1){animation-delay:.02s}
.menu.open .menu-inner > *:nth-child(2){animation-delay:.05s}
.menu.open .menu-inner > *:nth-child(3){animation-delay:.08s}
.menu.open .menu-inner > *:nth-child(4){animation-delay:.11s}
.menu.open .menu-inner > *:nth-child(5){animation-delay:.14s}
.menu.open .menu-inner > *:nth-child(6){animation-delay:.17s}
@keyframes menuIn{to{opacity:1;transform:none}}

.scrim{position:fixed;inset:0;z-index:98;background:rgba(0,0,0,.18);animation:fade .3s var(--ease)}
.scrim[hidden]{display:none}
@keyframes fade{from{opacity:0}}
body.locked{overflow:hidden}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:46px;padding:0 26px;border-radius:980px;
  font-size:16px;font-weight:500;letter-spacing:-.01em;
  border:1px solid transparent;cursor:pointer;
  transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),transform .15s var(--ease);
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-dark)}
.btn-ghost{border-color:var(--blue);color:var(--blue);background:#fff}
.btn-ghost:hover{background:var(--blue);color:#fff}
.btn.full{width:100%}

.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* ---------- Hero ---------- */
.hero{
  padding:clamp(64px,10vw,104px) 0 0;
  text-align:center;
  background:linear-gradient(180deg,#fbfbfd 0%,#ffffff 62%);
  overflow:hidden;
}
.hero-pill{
  display:inline-flex;align-items:center;gap:6px;margin:0 0 clamp(18px,3vw,26px);
  padding:8px 16px;border-radius:980px;background:var(--good-soft);color:var(--good);
  font-size:13.5px;font-weight:600;letter-spacing:.01em;
}
.hero h1{
  font-size:clamp(76px,17vw,168px);
  letter-spacing:-.055em;line-height:.9;
}
.hero-by{margin:12px 0 0;font-size:12px;font-weight:600;color:var(--ink-3)}
/* Tracking sits on the name only; stretching "by" as well reads as a typo.
   The negative margin cancels the trailing space letter-spacing adds after
   the last letter, which would otherwise push the line off centre. */
.hero-by span{text-transform:uppercase;letter-spacing:.2em;margin-right:-.2em}
.hero .sub{
  margin:22px auto 0;max-width:30ch;text-wrap:balance;
  font-size:clamp(20px,3.4vw,28px);line-height:1.28;font-weight:500;
  letter-spacing:-.02em;color:var(--ink);
}
.fineprint{margin:20px 0 0;font-size:14px;color:var(--ink-3)}

.hero-art{margin-top:clamp(44px,7vw,72px);display:flex;justify-content:center;padding:0 22px}
.device{
  width:min(820px,100%);border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  background:#fff;border:1px solid var(--line-soft);border-bottom:0;
  box-shadow:0 -2px 60px rgba(0,0,0,.09);overflow:hidden;
}
.device-bar{display:flex;gap:7px;padding:14px 18px;background:#fbfbfd;border-bottom:1px solid var(--line-soft)}
.device-bar span{width:10px;height:10px;border-radius:50%;background:#e3e3e8}

/* Screenshots of real sites inside the hero frame. Two sets, and only one is
   ever shown: desktop shots on a wide frame, phone shots on a narrow one. A
   phone screenshot stretched across a wide frame is mostly empty space, and a
   desktop screenshot squeezed into a narrow one is unreadable.

   The frame now always carries a real site, so the grey skeleton it used to
   show has gone along with its markup. */
.device-shots{
  position:relative;display:block;width:100%;
  aspect-ratio:2/1;                 /* the desktop shots are all near 2:1 */
  background:var(--bg-grey);overflow:hidden;
}
.shots{position:absolute;inset:0}
.shots img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top center;
}
.shots-phone{display:none}

/* Four seconds a site whichever set is running: 0.3s in, two seconds held,
   0.3s out, then the build beat fills the rest before the next arrives. Sites
   never overlap each other, which would ghost one page's text through
   another's. Holding the slot at four seconds for both sets is what lets the
   beat and the wording below run on one clock regardless of how many sites a
   set has. */
.shots-wide img{animation:shotCycle4 16s linear infinite both}
.shots-wide img:nth-child(2){animation-delay:4s}
.shots-wide img:nth-child(3){animation-delay:8s}
.shots-wide img:nth-child(4){animation-delay:12s}

/* The beat between previews. One element on a four-second loop, so it lands in
   the gap after every site rather than needing one copy per site - which also
   means it needs no changing for a set of three or a set of four. */
.device-build{
  position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;gap:10px;
  background:var(--bg-grey);
  animation:buildCycle 4s linear infinite both;
}
.build-star{
  width:34px;height:34px;fill:var(--ink);
  animation:buildSpin 2.2s linear infinite;
}
/* The three words stack in one grid cell and swap while the beat is faded out,
   so a word never changes on screen. Their twelve-second cycle is three of the
   beat's four-second ones, so each beat gets the next word in turn whether the
   set has three sites or four.

   A grid rather than absolute positioning: the cell sizes itself to the longest
   word, so the block still has a width sitting beside the star. Absolute
   children would have collapsed it to nothing. Left-aligned inside that cell,
   so the gap after the star stays put whichever word is up. */
.build-word{display:grid;font-size:16px;line-height:1.2;color:var(--ink-2)}
.build-word b{
  grid-area:1/1;justify-self:start;font-weight:500;opacity:0;
  animation:buildWord 12s linear infinite;
}
.build-word b:nth-of-type(2){animation-delay:4s}
.build-word b:nth-of-type(3){animation-delay:8s}
.build-word i{font-style:normal;animation:buildDot 1.2s linear infinite}
.build-word i:nth-of-type(2){animation-delay:.2s}
.build-word i:nth-of-type(3){animation-delay:.4s}

@media (max-width:600px){
  .device-shots{aspect-ratio:4/5}   /* the phone shots are tall */
  .shots-wide{display:none}
  .shots-phone{display:block}
  /* The frame is a third the width here, so the beat comes back down with it. */
  .build-star{width:25px;height:25px}
  .build-word{font-size:14px}
  .shots-phone img{animation:shotCycle3 12s linear infinite both}
  .shots-phone img:nth-child(2){animation-delay:4s}
  .shots-phone img:nth-child(3){animation-delay:8s}
}

/* Same four-second slot in both, expressed against a different total: three
   sites over twelve seconds, four over sixteen. */
@keyframes shotCycle3{
  0%,21.67%,100%{opacity:0}
  2.5%,19.17%{opacity:1}
}
@keyframes shotCycle4{
  0%,16.25%,100%{opacity:0}
  1.875%,14.375%{opacity:1}
}
@keyframes buildCycle{
  0%,65%,100%{opacity:0}
  70%,95%{opacity:1}
}
@keyframes buildSpin{to{transform:rotate(360deg)}}
@keyframes buildWord{0%,33.32%{opacity:1}33.33%,100%{opacity:0}}
@keyframes buildDot{0%,100%{opacity:.2}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .shots img{animation:none;opacity:0}
  .shots img:first-child{opacity:1}
  .device-build{display:none}
}

/* ---------- Feature grid ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:clamp(42px,6vw,64px)}
.card{
  background:var(--bg-grey);border-radius:var(--radius-lg);padding:26px 26px 28px;
  display:flex;gap:16px;align-items:flex-start;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.card-text{flex:1;min-width:0}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.08)}
.card h3{margin-bottom:7px;font-size:18px;line-height:1.25}
.card p{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.ico{width:42px;height:42px;flex:0 0 42px;border-radius:12px;display:grid;place-items:center;color:#fff}
.ico svg{width:21px;height:21px}
.ico-blue{background:#0071e3}
.ico-green{background:#30a14e}
.ico-purple{background:#7d4dd3}
.ico-orange{background:#e8730c}
.ico-pink{background:#d63384}
.ico-grey{background:#4a4a4f}

/* ---------- Showcase marquee ---------- */
.showcase{padding:clamp(72px,10vw,116px) 0;background:linear-gradient(180deg,#fff 0%,#fbfbfd 100%);overflow:hidden}

.mq{margin-top:clamp(34px,5vw,48px);display:flex;flex-direction:column;gap:12px}
.mq-row{
  overflow:hidden;
  /* fade the ends so items enter and leave rather than being chopped off */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
/* The spacing is a margin on each item rather than a flex gap. A gap sits only
   between items, so a track of N copies carries 4N-1 of them and translating by
   half the width lands half a gap short of a copy boundary, jolting on every
   loop. A trailing margin gives every item its own, making the track exactly N
   whole copies wide. */
.mq-track{
  display:flex;width:max-content;list-style:none;margin:0;padding:0;
  animation:mqScroll 60s linear infinite;will-change:transform;
}
.mq-row:nth-child(even) .mq-track{animation-direction:reverse}
@keyframes mqScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.mq-track li{
  flex:0 0 auto;white-space:nowrap;margin-right:12px;
  padding:11px 20px;border-radius:980px;background:#fff;border:1px solid var(--line);
  font-size:15px;color:var(--ink);
}

/* Until the script has duplicated a row, keep it from looking half-empty. */
.mq-track:not(.is-running){animation:none}

@media (prefers-reduced-motion:reduce){
  .mq-row{overflow:visible;-webkit-mask-image:none;mask-image:none}
  /* Nothing is looping here, so the spacing goes back to a gap: a trailing
     margin on each wrapped line would sit it half a gap left of centre. */
  .mq-track{animation:none!important;width:auto;flex-wrap:wrap;justify-content:center;gap:12px}
  .mq-track li{margin-right:0}
}

/* ---------- Reviews ---------- */
.rail{
  display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:clamp(38px,5vw,54px) max(22px,calc((100vw - var(--wrap))/2)) 12px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{display:none}
.quote{
  flex:0 0 min(360px,82vw);scroll-snap-align:center;
  background:#fff;border-radius:var(--radius-lg);padding:32px 30px;
  display:flex;flex-direction:column;
  box-shadow:0 2px 18px rgba(0,0,0,.05);
}
.stars{color:#f5a623;font-size:15px;letter-spacing:2px;margin-bottom:14px}
.quote blockquote{margin:0 0 24px;font-size:18px;line-height:1.48;letter-spacing:-.015em;flex:1}
.quote footer{display:flex;align-items:center;gap:13px}
.quote footer strong{display:block;font-size:15px;font-weight:600}
.quote footer span:not(.avatar){display:block;font-size:13.5px;color:var(--ink-3)}
.avatar{
  width:42px;height:42px;border-radius:50%;flex:0 0 42px;display:grid;place-items:center;
  color:#fff;font-size:14px;font-weight:600;letter-spacing:.01em;
}
.av1{background:#0071e3}.av2{background:#30a14e}.av3{background:#7d4dd3}.av4{background:#e8730c}.av5{background:#d63384}

.rail-nav{display:flex;gap:10px;justify-content:center;margin-top:20px}
.rail-btn{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;
  color:var(--ink);font-size:19px;line-height:1;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}
.rail-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---------- Plans ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:clamp(42px,6vw,62px);align-items:start}
.plan{
  border:1px solid var(--line-soft);border-radius:var(--radius-lg);padding:36px 30px 34px;background:#fff;
  position:relative;transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.plan:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(0,0,0,.08)}
.plan.featured{border-color:var(--ink);box-shadow:0 12px 40px rgba(0,0,0,.09);padding-top:60px}
.badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:#fff;font-size:12px;font-weight:600;letter-spacing:.02em;
  padding:6px 15px;border-radius:980px;white-space:nowrap;
}
.plan-tag{
  margin:0 0 10px;font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);
}
.price{margin:16px 0 0;font-size:52px;font-weight:600;letter-spacing:-.04em;line-height:1}
.cur{font-size:.62em;vertical-align:.16em;margin-right:1px}
.per{font-size:15px;font-weight:400;color:var(--ink-3);letter-spacing:-.01em;margin-left:4px}
.plan-note{margin:12px 0 24px;font-size:15px;line-height:1.45;color:var(--ink-2);min-height:44px}
.plan-free{
  display:inline-flex;align-items:center;gap:6px;margin:0 0 16px;
  padding:5px 11px;border-radius:980px;background:var(--good-soft);color:var(--good);
  font-size:12.5px;font-weight:600;letter-spacing:.01em;
}
.ticks{list-style:none;margin:26px 0 0;padding:0}
.ticks li{
  position:relative;padding:0 0 0 27px;margin-bottom:13px;
  font-size:15.5px;line-height:1.45;color:var(--ink-2);
}
.ticks li strong{color:var(--ink);font-weight:600}
.ticks li::before{
  content:"";position:absolute;left:2px;top:6px;width:12px;height:7px;
  border-left:2px solid var(--good);border-bottom:2px solid var(--good);
  transform:rotate(-45deg);
}

/* ---------- App ---------- */
.app{background:var(--ink);color:#f5f5f7;overflow:hidden}
.app h2{color:#fff}
.app .lede{color:#a1a1a6}
.app .eyebrow{color:#f5f5f7}
.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,72px);align-items:center}
.app-price{margin:30px 0 6px;font-size:52px;font-weight:600;letter-spacing:-.04em;line-height:1;color:#fff}
.app .per{color:#86868b}
.app .ticks li{color:#a1a1a6}
.app .ticks li::before{border-color:var(--good-dark)}
.stores{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 12px}
.store{
  display:inline-flex;align-items:center;gap:9px;padding:10px 17px;border-radius:13px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:#fff;
}
.store svg{width:19px;height:19px;flex:0 0 auto}
.store b{font-size:14px;font-weight:500;letter-spacing:-.01em}
.stores-note{margin:0;font-size:13px;line-height:1.5;color:#86868b}
.app .btn-primary{background:#fff;color:#1d1d1f;margin-top:28px}
.app .btn-primary:hover{background:#e8e8ed;color:#1d1d1f}

.app-art{display:flex;justify-content:center}
.phone{
  width:min(272px,72vw);aspect-ratio:9/18.5;border-radius:42px;
  background:#000;border:1px solid #38383c;padding:9px;position:relative;
  box-shadow:0 34px 80px rgba(0,0,0,.55);
}
.notch{
  position:absolute;top:16px;left:50%;transform:translateX(-50%);
  width:76px;height:20px;border-radius:980px;background:#000;z-index:2;
}
.phone-screen{
  height:100%;border-radius:34px;background:#fff;overflow:hidden;
  padding:38px 15px 15px;display:flex;flex-direction:column;gap:11px;
}
.ph-top{display:flex;justify-content:center}
.ph-logo{font-size:17px;font-weight:600;letter-spacing:-.045em;color:var(--ink)}
.ph-hero{height:104px;border-radius:16px;background:linear-gradient(135deg,#0071e3,#7d4dd3)}
.ph-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ph-row i{height:44px;border-radius:12px;background:#f0f0f4;display:block}
.ph-card{height:46px;border-radius:12px;background:#f5f5f7}
.ph-card.short{height:34px}
.ph-btn{
  margin-top:auto;height:42px;border-radius:980px;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-size:14px;font-weight:500;
}

/* ---------- FAQ ---------- */
.faq{max-width:760px;margin-top:clamp(36px,5vw,52px)}
.faq details{border-bottom:1px solid var(--line);background:none}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative;
  font-size:17.5px;font-weight:500;letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;
  border-right:1.8px solid var(--ink-3);border-bottom:1.8px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq summary:hover{color:var(--blue)}
.ans{padding:0 30px 24px 0;animation:ansIn .32s var(--ease)}
.ans p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-2)}
@keyframes ansIn{from{opacity:0;transform:translateY(-5px)}}

/* ---------- CTA form ---------- */
.cta{background:linear-gradient(180deg,#fff 0%,#f5f5f7 100%)}
.lead{
  max-width:620px;margin:clamp(36px,5vw,50px) auto 0;text-align:left;
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.lead label{font-size:13.5px;font-weight:500;color:var(--ink-2)}
.lead input[type=text],.lead input[type=email],.lead select,.lead textarea{
  font-family:var(--font);font-size:16px;color:var(--ink);
  padding:13px 15px;border:1px solid var(--line);border-radius:13px;background:#fff;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);width:100%;
}
.lead textarea{resize:vertical;line-height:1.45}
.lead input:focus,.lead select:focus,.lead textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,29,31,.13);
}
.lead input.err,.lead select.err{border-color:#d93025;box-shadow:0 0 0 3px rgba(217,48,37,.12)}
.check{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--ink);cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--blue)}
.lead .btn{grid-column:1/-1;margin-top:6px}
.formnote{grid-column:1/-1;margin:2px 0 0;font-size:14px;min-height:20px;color:var(--ink-2)}
.formnote.ok{color:#1a7f37}
.formnote.bad{color:#d93025}

/* ---------- Footer ---------- */
.foot{background:var(--bg-grey);padding:56px 0 68px;border-top:1px solid var(--line-soft)}
.foot-logo{margin:0;font-size:24px;font-weight:600;letter-spacing:-.045em}
.foot-by{margin:2px 0 0;font-size:13px;color:var(--ink-3)}
.foot-links{display:flex;flex-wrap:wrap;gap:22px;margin:26px 0 28px}
.foot-links a{font-size:14px;color:var(--ink-2)}
.foot-links a:hover{color:var(--ink);text-decoration:none}
.foot-legal{margin:0;font-size:12px;line-height:1.6;color:var(--ink-3);max-width:70ch}
.foot-copy{margin:20px 0 0;font-size:12px;color:var(--ink-3)}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.card:hover,.plan:hover{transform:none}
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .plans{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}
  .app-grid{grid-template-columns:1fr;text-align:center}
  .app .lede.left{margin-left:auto;margin-right:auto;text-align:center}
  .app .ticks{display:inline-block;text-align:left;margin-left:auto;margin-right:auto}
  .stores{justify-content:center}
  .app-art{order:-1}
}
@media (max-width:600px){
  .grid{grid-template-columns:1fr}
  .lead{grid-template-columns:1fr}
  .plan-note{min-height:0}
  .section{padding:70px 0}
  .card{padding:22px 20px 24px;gap:14px}
  .menu-link{font-size:22px}
}

/* ============================================================
   Account pages (login.html, account.html)
   ============================================================ */
.auth-body{background:var(--bg-grey);min-height:100vh}
.nav-out{margin-left:auto;font-size:14px}

.auth-wrap{max-width:440px;margin:0 auto;padding:clamp(40px,9vw,80px) 22px 80px}
.auth-card{background:#fff;border-radius:var(--radius-lg);padding:clamp(28px,5vw,40px);box-shadow:0 2px 24px rgba(0,0,0,.06)}
.auth-title{margin:0;font-size:28px;font-weight:600;letter-spacing:-.03em}
.auth-sub{margin:8px 0 0;font-size:15px;color:var(--ink-2)}
.auth-foot{margin:26px 0 0;text-align:center;font-size:14px;color:var(--ink-2)}
.auth-foot a{color:var(--ink);text-decoration:underline}

.seg{display:flex;gap:4px;margin:26px 0 22px;padding:4px;background:var(--bg-grey);border-radius:980px}
.seg-btn{
  flex:1;border:0;background:none;font-family:inherit;font-size:14px;font-weight:500;
  color:var(--ink-2);padding:9px 10px;border-radius:980px;cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.seg-btn.is-on{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.08)}

.auth-card .field,.acct-grid .field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.auth-card label,.acct-grid label{font-size:13.5px;font-weight:500;color:var(--ink-2)}
.auth-card input,.acct-grid input,.acct-grid textarea{
  font-family:var(--font);font-size:16px;color:var(--ink);width:100%;
  padding:13px 15px;border:1px solid var(--line);border-radius:13px;background:#fff;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.acct-grid textarea{resize:vertical;line-height:1.45}
.auth-card input:focus,.acct-grid input:focus,.acct-grid textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,29,31,.13);
}
.hint{margin:0;font-size:12.5px;color:var(--ink-3)}

.note{margin:12px 0 0;font-size:14px;line-height:1.45;min-height:20px;color:var(--ink-2)}
.note.ok{color:#1a7f37}
.note.bad{color:#d93025}

.linkish{
  display:inline-block;margin-top:16px;background:none;border:0;padding:0;
  font-family:inherit;font-size:14px;color:var(--ink-2);text-decoration:underline;cursor:pointer;
}
.linkish:hover{color:var(--ink)}

/* ---- account ---- */
.acct-wrap{max-width:760px;margin:0 auto;padding:clamp(36px,7vw,64px) 22px 90px}
.acct-head h1{font-size:clamp(30px,5vw,40px);font-weight:600;letter-spacing:-.03em}
.acct-head .lede{margin-top:12px;max-width:52ch}
.acct-loading{display:grid;place-items:center;min-height:60vh;color:var(--ink-2);font-size:15px;padding:0 22px;text-align:center}

.panel{background:#fff;border-radius:var(--radius-lg);padding:clamp(24px,4vw,32px);margin-top:26px;border:1px solid var(--line-soft)}
.panel-title{margin:0 0 22px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}

.avatar-row{display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
.avatar-box{
  width:88px;height:88px;flex:0 0 88px;border-radius:22px;overflow:hidden;
  background:var(--bg-grey);border:1px solid var(--line-soft);
  display:grid;place-items:center;color:var(--ink-3);font-size:24px;font-weight:600;
}
.avatar-box img{width:100%;height:100%;object-fit:cover}
.avatar-actions{flex:1;min-width:200px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.avatar-actions .btn{height:42px;padding:0 20px}
.avatar-actions .linkish{margin-top:0}

.acct-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.acct-grid .full{grid-column:1/-1}
.acct-save{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:8px}
.acct-save .note{margin:0}
.acct-email{margin:26px 0 0;font-size:13px;color:var(--ink-3);text-align:center}

@media (max-width:600px){
  .acct-grid{grid-template-columns:1fr}
  .auth-wrap{padding-top:34px}
}

/* ============================================================
   Get started wizard
   ============================================================ */
.wiz{max-width:520px;margin:0 auto;padding:clamp(28px,6vw,52px) 22px 90px}

.wiz-top{margin-bottom:26px}
.wiz-count{margin:0 0 10px;font-size:12.5px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.wiz-bar{height:3px;border-radius:3px;background:var(--line-soft);overflow:hidden}
.wiz-bar i{display:block;height:100%;width:25%;background:var(--ink);border-radius:3px;transition:width .45s var(--ease)}

.wiz-view{overflow:hidden}
.wiz-track.slide{animation:wizIn .42s var(--ease)}
@keyframes wizIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}

.wiz-step{background:#fff;border-radius:var(--radius-lg);padding:clamp(26px,5vw,38px);box-shadow:0 2px 24px rgba(0,0,0,.06)}
.wiz-step h1{font-size:clamp(25px,4.6vw,31px);font-weight:600;letter-spacing:-.03em;line-height:1.1}
.wiz-sub{margin:10px 0 26px;font-size:15.5px;line-height:1.45;color:var(--ink-2)}
.wiz-label{margin:26px 0 12px;font-size:13.5px;font-weight:600;color:var(--ink)}
.wiz-step .field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.wiz-step label{font-size:13.5px;font-weight:500;color:var(--ink-2)}
.wiz-step input[type=text],.wiz-step input[type=email],.wiz-step input[type=password]{
  font-family:var(--font);font-size:16px;color:var(--ink);width:100%;
  padding:13px 15px;border:1px solid var(--line);border-radius:13px;background:#fff;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.wiz-step input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,29,31,.13)}
.wiz-next{margin-top:8px}
/* Secondary actions stack and centre; inline they run together and read as
   one broken link. */
.wiz-step .linkish{display:block;margin:14px auto 0}
.wiz-back{display:block;margin:14px auto 0}
.wiz-foot{margin:20px 0 0;text-align:center;font-size:13.5px;color:var(--ink-2)}
.wiz-foot a{color:var(--ink);text-decoration:underline}

/* plan picker */
.pick{margin-bottom:14px}
.pick-row{
  display:flex;gap:13px;align-items:flex-start;cursor:pointer;
  border:1px solid var(--line);border-radius:16px;padding:16px 17px;margin-bottom:8px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.pick-row.is-on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.pick-row input{margin-top:3px;width:18px;height:18px;accent-color:var(--ink);flex:0 0 18px}
.pick-main{flex:1;min-width:0}
.pick-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pick-head b{font-size:16.5px;font-weight:600}
.pick-head em{font-style:normal;font-size:19px;font-weight:600;letter-spacing:-.02em}
.pick-head em span{font-size:12.5px;font-weight:400;color:var(--ink-3)}
.pick-note{display:block;margin-top:4px;font-size:13.5px;line-height:1.4;color:var(--ink-2)}

.pick-more{margin:-2px 0 16px}
.pick-more summary{
  list-style:none;cursor:pointer;padding:2px 0 0 31px;
  font-size:13px;color:var(--ink-2);text-decoration:underline;
}
.pick-more summary::-webkit-details-marker{display:none}
.pick-more summary:hover{color:var(--ink)}
.pick-more .ticks{margin:12px 0 0 31px}
.pick-more .ticks li{font-size:14px;margin-bottom:9px}

/* The confirmation ask, sitting under the payment button rather than in front
   of it. */
.pay-then{
  margin:14px 0 0;text-align:center;
  font-size:13.5px;line-height:1.5;color:var(--ink-2);
}

/* A browser bar showing the address they picked, on the payment step. */
.urlbar{
  display:flex;align-items:center;gap:12px;
  padding:9px 12px;margin-bottom:10px;
  border:1px solid var(--line-soft);border-radius:14px;background:#fbfbfd;
}
.urlbar-lights{display:flex;gap:5px;flex:0 0 auto}
.urlbar-lights i{width:8px;height:8px;border-radius:50%;background:#e3e3e8}
.urlbar-pill{
  flex:1;min-width:0;display:flex;align-items:center;gap:7px;
  padding:7px 12px;border-radius:980px;background:#fff;border:1px solid var(--line-soft);
  font-size:14px;color:var(--ink-3);
}
.urlbar-lock{width:14px;height:14px;flex:0 0 auto;color:var(--ink-3)}
.urlbar-pill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Once there is a real address the padlock earns its green and the name its
   weight; before that it is a placeholder and should look like one. */
.urlbar.is-set .urlbar-pill{color:var(--ink);font-weight:500}
.urlbar.is-set .urlbar-lock{color:var(--good)}
.urlbar-note{margin:0 0 22px;text-align:center;font-size:13px;color:var(--ink-3);min-height:18px}
.urlbar-note b{color:var(--good);font-weight:600}

/* Qualified because .sumrow b outranks a lone class - the reason this stayed
   black. Green is only ever "included or free" on this site, and £0 setup is
   exactly that. */
.sumrow b.sum-free{
  display:inline-flex;align-items:center;gap:7px;color:var(--good);
}
.sumrow b.sum-free::before{
  content:"";width:11px;height:6px;flex:0 0 auto;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg) translateY(-1px);
}

/* The reassurances under a step's button: whatever someone hesitates over at
   that point, answered on the way past. Green ticks, grey words - the colour
   marks what is free or included without shouting over the content. */
.assure{
  list-style:none;margin:18px 0 20px;padding:0;
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;
}
.assure li{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;color:var(--ink-2);
}
.assure li::before{
  content:"";width:10px;height:5px;flex:0 0 auto;
  border-left:2px solid var(--good);border-bottom:2px solid var(--good);
  transform:rotate(-45deg) translateY(-1px);
}

/* Marks the plan we would put someone on, so choosing is not work. */
.pick-flag{
  display:inline-block;margin-right:7px;padding:2px 9px;border-radius:980px;
  background:var(--good-soft);color:var(--good);
  font-size:11.5px;font-weight:600;letter-spacing:.02em;
}

/* web address step */
.dom-state{margin:0 0 14px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.dom-own{display:flex;gap:10px}
.dom-own input{flex:1;min-width:0}
.dom-own .btn{flex:0 0 auto;height:48px;padding:0 20px}
/* .pick-head em is the big plan price and outranks a lone class, so the
   domain badge has to be qualified to win. */
.pick-head em.dom-free{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--good)}
.pick-row .pick-head b{font-size:15.5px;overflow-wrap:anywhere}
#domOwnNote{min-height:18px}

/* Placeholder rows while the registries are being asked. */
.pick-row.is-waiting{
  display:flex;align-items:center;gap:14px;cursor:default;
  border-color:var(--line-soft);
}
.dom-bar{
  flex:1;height:13px;border-radius:7px;
  background:linear-gradient(90deg,#f0f0f4,#e6e6ec,#f0f0f4);
  background-size:200% 100%;animation:domWait 1.6s linear infinite;
}
.pick-row.is-waiting:nth-of-type(2) .dom-bar{max-width:78%}
.pick-row.is-waiting:nth-of-type(3) .dom-bar{max-width:60%}
.dom-searching{flex:0 0 auto;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--ink-3)}
@keyframes domWait{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.dom-bar{animation:none}}

.dom-have{margin:-4px 0 18px}
.dom-have summary{
  list-style:none;cursor:pointer;font-size:14px;color:var(--ink-2);text-decoration:underline;
}
.dom-have summary::-webkit-details-marker{display:none}
.dom-have summary:hover{color:var(--ink)}
.dom-have .field{margin-top:14px}

/* summary + payment */
.sumbox{border:1px solid var(--line-soft);border-radius:16px;padding:6px 18px;margin-bottom:20px}
.sumrow{display:flex;justify-content:space-between;align-items:baseline;padding:13px 0;font-size:15px;color:var(--ink-2);border-bottom:1px solid var(--line-soft)}
.sumrow b{color:var(--ink);font-weight:600}
.sumrow.total{
  border-bottom:0;margin:0 -18px;padding-left:18px;padding-right:18px;
  background:var(--bg-grey);border-radius:0 0 15px 15px;
}
.sumrow.total b{font-size:20px;letter-spacing:-.02em}
.paynote{background:var(--bg-grey);border-radius:16px;padding:18px 20px;margin-bottom:20px}
.paynote p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.paynote p + p{margin-top:9px}
.paynote strong{color:var(--ink)}

/* done */
.done-tick{
  width:52px;height:52px;border-radius:50%;
  background:var(--good-soft);color:var(--good);
  display:grid;place-items:center;margin-bottom:22px;
}
.done-tick svg{width:26px;height:26px}
.next-list{margin:26px 0 28px;padding:0 0 0 20px}
.next-list li{margin-bottom:14px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.next-list b{color:var(--ink);font-weight:600}

@media (prefers-reduced-motion:reduce){
  .wiz-track.slide{animation:none}
  .wiz-bar i{transition:none}
}

/* Landing back from Stripe without a session yet. */
.acct-land{max-width:460px;text-align:center}
.acct-land h1{font-size:26px;font-weight:600;letter-spacing:-.03em;margin-bottom:14px}
.acct-land p{margin:0 0 12px;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.acct-land .btn{margin-top:10px}

/* ---- admin ---- */
.admin-pill{
  margin-left:auto;margin-right:16px;flex:0 0 auto;
  padding:5px 12px;border-radius:980px;
  background:var(--ink);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.02em;
}
.admin-pill:hover{text-decoration:none;opacity:.82}
/* The account and login headers put a link where the burger sits, so the pill
   needs a gap rather than pushing itself all the way right. */
.nav-inner .admin-pill + .nav-out{margin-left:0}

.admin-wrap{max-width:900px;margin:0 auto;padding:clamp(36px,7vw,64px) 22px 90px}

.queue{list-style:none;margin:0;padding:0}
.queue-item{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:16px 0;border-bottom:1px solid var(--line-soft);
}
.queue-item:last-child{border-bottom:0}
.queue-main{flex:1;min-width:0}
.queue-who{margin:0;font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--ink-3)}
.queue-what{margin:4px 0 0;font-size:15.5px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.queue-meta{margin:5px 0 0;font-size:13px;color:var(--ink-3)}
.queue-actions{flex:0 0 auto}

.cust{padding:20px 0;border-bottom:1px solid var(--line-soft)}
.cust:first-child{padding-top:0}
.cust:last-child{border-bottom:0;padding-bottom:0}
.cust-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.cust-names{min-width:0}
.cust-names h3{font-size:17px;font-weight:600;letter-spacing:-.02em;overflow-wrap:anywhere}
.cust-sub{margin:4px 0 0;font-size:13.5px;color:var(--ink-3)}
.cust-points{margin:10px 0 0;font-size:13.5px;color:var(--ink-2)}
.cust-want{margin:8px 0 0;font-size:13.5px;color:var(--ink-2)}
.cust-want strong{color:var(--ink);font-weight:600}
.cust-points.is-over{color:#b3261e;font-weight:600}
.cust-site{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}

.admin-input,.admin-select{
  font-family:var(--font);font-size:15px;color:var(--ink);
  padding:10px 13px;border:1px solid var(--line);border-radius:12px;background:#fff;
}
.admin-input{flex:1;min-width:190px}
.admin-input:focus,.admin-select:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,29,31,.13);
}
.admin-save{height:42px;padding:0 20px;flex:0 0 auto}

@media (max-width:600px){
  .queue-item{flex-direction:column;gap:10px}
  .admin-pill{margin-right:12px}
}

/* ---- account identity, site, points ---- */
.acct-id{display:flex;align-items:center;gap:18px;margin-bottom:6px}
.acct-id-badge{
  width:64px;height:64px;flex:0 0 64px;border-radius:18px;overflow:hidden;
  background:#fff;border:1px solid var(--line-soft);
  display:grid;place-items:center;color:var(--ink-3);font-size:20px;font-weight:600;
}
.acct-id-badge img{width:100%;height:100%;object-fit:cover}
.acct-id-text{min-width:0}
.acct-id h1{font-size:clamp(26px,4.6vw,34px);font-weight:600;letter-spacing:-.03em;line-height:1.1;overflow-wrap:anywhere}
.acct-id-plan{margin:8px 0 0}
.plan-chip{
  display:inline-block;padding:5px 12px;border-radius:980px;
  background:var(--ink);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:.02em;
}
.plan-chip.is-none{background:var(--bg-grey);color:var(--ink-2)}

.site-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.site-main{min-width:0}
.site-url{font-size:17px;font-weight:500;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.site-url:hover{text-decoration:underline}
.site-none{margin:0;font-size:15px;color:var(--ink-2)}
.site-pill{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:980px;background:var(--good-soft);color:var(--good);
  font-size:12.5px;font-weight:600;letter-spacing:.02em;
}
.site-pill i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:sitePulse 2.4s ease-in-out infinite}
@keyframes sitePulse{0%,100%{opacity:1}50%{opacity:.35}}
.site-pill.is-building{background:var(--bg-grey);color:var(--ink-2)}
.site-pill.is-building i{animation:none}

.points-row{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.points-big{margin:0;font-size:46px;font-weight:600;letter-spacing:-.04em;line-height:1}
.points-of{display:block;margin-top:6px;font-size:13.5px;font-weight:400;letter-spacing:-.01em;color:var(--ink-3)}
.points-side{flex:1;min-width:180px}
.points-bar{height:6px;border-radius:6px;background:var(--bg-grey);overflow:hidden}
.points-bar i{display:block;height:100%;background:var(--good);border-radius:6px;transition:width .4s var(--ease)}
.points-note{margin:10px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.points-upsell{margin-top:20px;padding:18px 20px;border-radius:16px;background:var(--bg-grey)}
.points-upsell p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.points-upsell strong{color:var(--ink);font-weight:600}
.points-upsell-more{margin-top:9px!important}

.req-form{margin-top:24px;padding-top:22px;border-top:1px solid var(--line-soft)}
.req-kinds{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.req-kind{display:block;cursor:pointer}
.req-kind input{position:absolute;opacity:0;width:0;height:0}
.req-kind span{
  display:block;padding:15px 16px;border:1px solid var(--line);border-radius:16px;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.req-kind input:checked + span{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.req-kind input:focus-visible + span{outline:2px solid var(--blue);outline-offset:3px}
.req-kind b{display:block;font-size:15.5px;font-weight:600}
.req-kind em{display:block;margin-top:3px;font-style:normal;font-size:13px;font-weight:600;color:var(--good)}
.req-kind small{display:block;margin-top:6px;font-size:13px;line-height:1.4;color:var(--ink-3)}
/* The details box sits outside .acct-grid, so it needs the same treatment the
   other inputs get rather than the browser's monospace default. */
.req-form textarea{
  font-family:var(--font);font-size:16px;color:var(--ink);width:100%;line-height:1.45;resize:vertical;
  padding:13px 15px;border:1px solid var(--line);border-radius:13px;background:#fff;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.req-form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,29,31,.13)}
.req-form .field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.req-form label{font-size:13.5px;font-weight:500;color:var(--ink-2)}
.req-send{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.req-send .note{margin:0}

.req-list{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-soft)}
.req-list-title{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.req-list ul{list-style:none;margin:0;padding:0}
.req-list li{display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.req-list li:last-child{border-bottom:0}
.req-what{flex:1;min-width:0;font-size:14.5px;line-height:1.45;color:var(--ink);overflow-wrap:anywhere}
.req-when{display:block;margin-top:3px;font-size:12.5px;color:var(--ink-3)}
.req-state{
  flex:0 0 auto;font-size:11.5px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  padding:5px 10px;border-radius:980px;background:var(--bg-grey);color:var(--ink-2);
}
.req-state.is-done{background:var(--good-soft);color:var(--good)}
.req-cost{flex:0 0 auto;font-size:12.5px;font-weight:600;color:var(--ink-3)}

.bill-move{margin:14px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.bill-manage{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-soft)}
.bill-manage .linkish{margin-top:0}
.bill-manage .hint{margin-top:6px}

@media (max-width:600px){
  .req-kinds{grid-template-columns:1fr}
  .acct-id{gap:14px}
  .acct-id-badge{width:54px;height:54px;flex:0 0 54px;border-radius:15px}
}
@media (prefers-reduced-motion:reduce){
  .site-pill i{animation:none}
  .points-bar i{transition:none}
}

/* ---- billing panel ---- */
.bill-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.bill-plan{margin:0;font-size:17px;font-weight:600;letter-spacing:-.02em}
.bill-state{margin:5px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.bill-badge{
  flex:0 0 auto;font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  padding:6px 12px;border-radius:980px;background:var(--bg-grey);color:var(--ink-2);
}
.bill-badge.is-live{background:#e7f6ec;color:#1a7f37}
.bill-badge.is-warn{background:#fdecea;color:#b3261e}
.bill-actions{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.bill-pick{flex:1;min-width:190px;margin-bottom:0}
.bill-pick > span{display:block;margin-bottom:7px;font-size:13.5px;font-weight:500;color:var(--ink-2)}
.bill-pick select{
  font-family:var(--font);font-size:16px;color:var(--ink);width:100%;
  padding:13px 15px;border:1px solid var(--line);border-radius:13px;background:#fff;
}
.bill-pick select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,29,31,.13)}
.bill-actions .btn{height:48px}
#billNote{margin-top:14px}

/* ============================================================
   How it works page
   ============================================================ */
.page-hero{padding:clamp(56px,9vw,96px) 0 clamp(30px,4vw,44px);text-align:center}
.page-hero h1{font-size:clamp(38px,6.4vw,60px);font-weight:600;letter-spacing:-.035em;line-height:1.04}
.section.pt0{padding-top:0}

/* steps with illustrations, alternating sides */
.steps{max-width:900px}
.stepx{
  display:flex;gap:clamp(26px,5vw,60px);align-items:center;
  padding:clamp(42px,6vw,64px) 0;border-bottom:1px solid var(--line-soft);
}
.stepx:last-child{border-bottom:0}
.stepx:nth-child(odd){flex-direction:row-reverse}
.stepx-body{flex:1;min-width:0}
.stepx-day{
  margin:0 0 10px;font-size:12.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);
}
.stepx h2{font-size:clamp(21px,3vw,26px);font-weight:600;letter-spacing:-.025em;line-height:1.18;margin-bottom:10px}
.stepx p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-2)}

.stepx-art{flex:0 0 130px;display:flex;justify-content:center}
.ill{width:100%;max-width:130px;height:auto;display:block}
.il-line{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.il-fill{fill:#e4e4ea}
.il-soft{fill:#c9c9d1}
.il-solid{fill:var(--ink)}
.il-knock{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.il-tick{fill:none;stroke:#c9c9d1;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* what you get */
.gets{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin-top:clamp(34px,5vw,46px)}
.gets .ticks{margin:0}
.gets .ticks li{margin-bottom:16px;font-size:16px}

/* cost */
.costbox{
  max-width:640px;background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-lg);
  padding:clamp(30px,5vw,44px);margin-top:clamp(30px,4vw,42px);text-align:center;
  box-shadow:0 12px 40px rgba(0,0,0,.06);
}
.cost-big{margin:0;font-size:clamp(52px,9vw,72px);font-weight:600;letter-spacing:-.045em;line-height:1}
.cost-big .per{display:block;margin-top:8px;font-size:15px;font-weight:400;color:var(--ink-3);letter-spacing:-.01em}
.cost-line{margin:14px 0 0;font-size:17px;font-weight:500;color:var(--ink)}
.cost-when{margin:8px 0 0;font-size:14.5px;color:var(--ink-2)}
.cost-nots{
  list-style:none;margin:28px 0 0;padding:24px 0 0;border-top:1px solid var(--line-soft);
  display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;text-align:left;
}
.cost-nots li{font-size:15.5px;color:var(--ink-2);line-height:1.4}
.cost-nots b{display:inline-block;min-width:34px;color:var(--good);font-weight:600}
.cost-only{margin-top:30px;padding-top:26px;border-top:1px solid var(--line-soft);text-align:left}
.cost-only h3{font-size:18px;font-weight:600;letter-spacing:-.02em;margin-bottom:12px}
.cost-only p{margin:0 0 12px;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.cost-only strong{color:var(--ink);font-weight:600}
.cost-foot{
  margin:18px 0 0!important;padding-top:16px;border-top:1px solid var(--line-soft);
  font-size:14px!important;color:var(--ink-3)!important;
}

.cta-end .micro{margin-top:24px}

@media (max-width:760px){
  .gets{grid-template-columns:1fr;gap:0}
  .gets .ticks:last-child{margin-top:16px}
  .cost-nots{grid-template-columns:1fr;gap:12px}
  .stepx{flex-direction:column;gap:18px;text-align:center;padding:34px 0}
  .stepx:nth-child(odd){flex-direction:column}
  .stepx-art{flex:0 0 auto}
  .ill{max-width:100px}
}

/* ============================================================
   Inner pages
   ============================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.grid-3{grid-template-columns:repeat(3,1fr)}
.rail-more{margin-top:6px;font-size:14.5px}
.rail-more a{color:var(--ink);text-decoration:underline}

/* ---- reviews ---- */
.rv-summary{margin-top:clamp(28px,4vw,40px)}
.rv-score{margin:0;font-size:clamp(46px,8vw,64px);font-weight:600;letter-spacing:-.04em;line-height:1}
.rv-stars{margin:6px 0 0;color:#f5a623;font-size:20px;letter-spacing:3px}
.rv-total{margin:10px 0 0;font-size:14.5px;color:var(--ink-2)}
.rv-google{display:inline-flex;align-items:center;gap:7px;margin:14px 0 0;font-size:13px;color:var(--ink-3)}
.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:clamp(30px,4vw,44px);align-items:start}
.rv-grid .quote{flex:none;background:#fff;border:1px solid var(--line-soft);box-shadow:none}

/* ---- what's included ---- */
.inc{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,44px) clamp(30px,5vw,60px)}
.inc-block{padding-top:26px;border-top:2px solid var(--ink)}
.inc-head h2{font-size:21px;font-weight:600;letter-spacing:-.025em;margin-bottom:5px}
.inc-head p{margin:0 0 20px;font-size:14.5px;color:var(--ink-3)}
.inc-block .ticks{margin:0}
.inc-block .ticks li{font-size:15.5px;margin-bottom:13px}

.nots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:clamp(30px,4vw,42px)}
.nots p{
  margin:0;padding:15px 18px;background:#fff;border:1px solid var(--line-soft);border-radius:14px;
  font-size:15px;color:var(--ink-3);
  text-decoration:line-through;text-decoration-color:var(--ink);text-decoration-thickness:2px;
}

.excl{max-width:760px;margin-top:clamp(28px,4vw,40px)}
.excl-row{display:grid;grid-template-columns:250px 1fr;gap:20px;padding:18px 0;border-bottom:1px solid var(--line-soft)}
.excl-row:last-child{border-bottom:0}
.excl-row b{font-size:15.5px;font-weight:600}
.excl-row span{font-size:15.5px;line-height:1.5;color:var(--ink-2)}

/* ---- features ---- */
.mini-list{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:7px 18px}
.mini-list li{position:relative;padding-left:18px;font-size:14.5px;line-height:1.45;color:var(--ink-3)}
.mini-list li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--line)}
.trades .card{background:#fff;border:1px solid var(--line-soft)}

/* ---- plans comparison ---- */
.cmp-wrap{overflow-x:auto;margin-top:clamp(30px,4vw,42px);-webkit-overflow-scrolling:touch}
.cmp{width:100%;min-width:620px;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden}
.cmp th,.cmp td{padding:14px 16px;text-align:center;font-size:14.5px;border-bottom:1px solid var(--line-soft)}
.cmp thead th{font-size:16px;font-weight:600;letter-spacing:-.02em;padding-top:20px;padding-bottom:18px;background:var(--bg-grey)}
.cmp thead th span{display:block;margin-top:3px;font-size:13px;font-weight:400;color:var(--ink-3)}
.cmp thead td{background:var(--bg-grey);border-bottom:1px solid var(--line-soft)}
.cmp tbody th{text-align:left;font-weight:400;color:var(--ink-2);min-width:230px}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.tick-y{color:var(--good);font-size:16px;font-weight:600}
.cmp .free{color:var(--good);font-weight:600}
.tick-n{color:var(--line)}

.app .eyebrow,.app .app-price{text-align:center}
.app .app-price{margin-left:auto;margin-right:auto}

@media (max-width:900px){
  .rv-grid{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .nots{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .inc{grid-template-columns:1fr}
  .excl-row{grid-template-columns:1fr;gap:5px}
  .mini-list{grid-template-columns:1fr}
}
@media (max-width:640px){
  .rv-grid,.grid-3,.nots{grid-template-columns:1fr}
}