/* ============================================================
   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;
}
.logo{
  margin-right:auto;
  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);
}

/* The one line that is the whole reason Max exists, so it carries the colour
   the ticks only hint at. */
.ticks li.tick-hero{color:var(--good);font-weight:600}
.ticks li.tick-hero::before{border-color:var(--good);border-width:2.5px}

/* And the case for it, under the three cards rather than crammed into one. */
.seo-pitch{
  margin-top:34px;padding:clamp(26px,4vw,38px);border-radius:var(--radius-lg);
  background:var(--good-soft);border:1px solid rgba(26,127,55,.18);
}
/* Qualified: .seo-pitch p below is more specific than a lone class and was
   painting this grey. */
.seo-pitch p.seo-pitch-tag{
  margin:0 0 12px;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--good);
}
.seo-pitch h3{
  margin:0 0 16px;font-size:clamp(22px,3.4vw,27px);font-weight:600;
  letter-spacing:-.025em;line-height:1.2;max-width:22ch;text-wrap:balance;
}
.seo-pitch p{margin:0 0 14px;font-size:16px;line-height:1.6;color:var(--ink-2);max-width:62ch}
.seo-pitch-close{color:var(--ink)!important;font-weight:500}
.seo-pitch .btn{margin-top:8px;flex:0 0 auto}
.seo-pitch-copy > :last-child{margin-bottom:0}

/* Wide enough for two columns, the button moves beside the copy rather than
   leaving half the card empty under it. */
@media (min-width:900px){
  .seo-pitch{display:flex;align-items:center;gap:clamp(28px,5vw,64px)}
  .seo-pitch .btn{margin-top:0}
}

/* ---------- 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 .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;
  /* The stacked layout centres .app-grid; the phone is a screen, not copy. */
  text-align:left;
}
/* The phone shows a store listing. Kept abstract - grey blocks where the
   screenshots would be - so it reads as a mockup of what you would get
   rather than a photograph of something that already exists. */
.phone-screen.listing{gap:0;padding:34px 14px 0;align-items:stretch}

.ph-nav{display:flex;align-items:center;justify-content:space-between;height:22px}
.ph-chev{font-size:20px;line-height:1;color:var(--blue)}
.ph-share{width:13px;height:13px;border:1.5px solid var(--blue);border-radius:3px}

.ph-head{display:flex;gap:11px;margin-top:12px}
.ph-icon{
  flex:0 0 auto;width:62px;height:62px;border-radius:14px;background:var(--ink);
  color:#fff;display:grid;place-items:center;
  font-size:19px;font-weight:600;letter-spacing:-.045em;
}
.ph-headtext{min-width:0;display:flex;flex-direction:column;gap:2px}
.ph-name{margin:0;font-size:16px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.ph-sub{margin:0;font-size:11px;line-height:1.3;color:var(--ink-3)}
.ph-get{margin:5px 0 0}
.ph-get span{
  display:inline-block;padding:4px 17px;border-radius:980px;background:var(--blue);
  color:#fff;font-size:12px;font-weight:700;letter-spacing:.02em;
}

/* Age, category and developer - the cells of a real listing that are facts
   about the app rather than a verdict on it. No rating: that would be an
   invented review. */
.ph-meta{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:15px;padding:11px 0;
  border-top:1px solid #e8e8ed;border-bottom:1px solid #e8e8ed;text-align:center;
}
.ph-meta div{display:flex;flex-direction:column;gap:3px}
.ph-meta div + div{border-left:1px solid #e8e8ed}
.ph-meta b{font-size:7.5px;font-weight:600;letter-spacing:.07em;color:var(--ink-3)}
.ph-meta span{font-size:12px;font-weight:600;color:var(--ink-2)}

.ph-section{margin:14px 0 9px;font-size:14px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}

/* Runs off the right edge the way a store's screenshot rail does, so it
   reads as scrollable rather than as three things that happen to fit. */
.ph-shots{display:flex;gap:9px;overflow:hidden;margin:0 -14px 0 0;padding-bottom:14px}
.ph-shot{
  flex:0 0 96px;height:172px;border-radius:13px;background:#f5f5f7;
  padding:10px 8px;display:flex;flex-direction:column;gap:6px;
}
.ph-shot-hero{height:52px;border-radius:8px;background:linear-gradient(135deg,#0071e3,#7d4dd3)}
.ph-shot-bar{height:14px;border-radius:5px;background:#e2e2e8}
.ph-shot i{height:9px;border-radius:4px;background:#e6e6ec;display:block}
.ph-shot i.w{width:70%}
.ph-copy{margin:0;font-size:11.5px;line-height:1.55;color:var(--ink-2)}

/* ---------- Cookie consent ---------- */
/* A pill, not a bar: it sits above the page rather than blocking it, and
   both answers are the same size and weight, because under PECR refusing
   has to be as easy as accepting. */
.consent{
  position:fixed;z-index:60;left:50%;transform:translate(-50%,14px);
  bottom:calc(16px + env(safe-area-inset-bottom));
  width:max-content;max-width:min(560px,calc(100vw - 24px));
  display:flex;align-items:center;gap:14px;
  padding:9px 10px 9px 18px;border-radius:980px;
  background:rgba(28,28,30,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 34px rgba(0,0,0,.28);
  opacity:0;transition:opacity .38s var(--ease),transform .38s var(--ease);
}
.consent.in{opacity:1;transform:translate(-50%,0)}
.consent-text{margin:0;font-size:13px;line-height:1.35;color:rgba(255,255,255,.82);white-space:nowrap}
.consent-text a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.consent-actions{display:flex;gap:7px;flex:0 0 auto}
.consent-btn{
  font-family:var(--font);font-size:13px;font-weight:500;letter-spacing:-.01em;
  padding:8px 15px;border-radius:980px;cursor:pointer;white-space:nowrap;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);color:#fff;
  transition:background .2s var(--ease);
}
.consent-btn:hover{background:rgba(255,255,255,.26)}
.consent-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Accept is styled identically to refuse on purpose. Making the yes button
   brighter is the nudge the ICO has written to sites about: refusing has to
   be as easy as accepting, and "as easy" covers how it looks, not just how
   many clicks it takes. */
.consent-btn-yes{background:rgba(255,255,255,.14)}

/* Narrow screens cannot hold the pill on one line, so it becomes a rounded
   card with the text above the two buttons - still not a full-width bar. */
@media (max-width:560px){
  .consent{
    flex-direction:column;align-items:stretch;gap:11px;
    width:auto;left:12px;right:12px;transform:translateY(14px);
    padding:15px 17px;border-radius:22px;
  }
  .consent.in{transform:translateY(0)}
  .consent-text{white-space:normal;font-size:13.5px}
  .consent-actions{gap:8px}
  .consent-btn{flex:1 1 0;padding:10px 12px}
}

@media (prefers-reduced-motion:reduce){
  .consent{transition:none;opacity:1;transform:translate(-50%,0)}
  .consent.in{transform:translate(-50%,0)}
}

/* ---------- Legal / prose pages ---------- */
/* Terms, privacy and cookies are read to find one clause, not read through,
   so the headings carry ids and the measure stays narrow. */
.legal{max-width:72ch;margin:0 auto;padding-bottom:8px}
.legal-meta{margin:0 0 clamp(28px,4vw,38px);font-size:13.5px;color:var(--ink-3)}
.legal h2{
  margin:clamp(34px,4.5vw,46px) 0 14px;font-size:clamp(20px,2.6vw,24px);
  font-weight:600;letter-spacing:-.022em;scroll-margin-top:calc(var(--nav-h) + 18px);
}
.legal h2:first-of-type{margin-top:0}
.legal h3{margin:26px 0 10px;font-size:16.5px;font-weight:600;letter-spacing:-.015em}
.legal p{margin:0 0 15px;font-size:16px;line-height:1.62;color:var(--ink-2)}
.legal ul{margin:0 0 15px;padding-left:20px}
.legal li{margin:0 0 9px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.legal li:last-child{margin-bottom:0}
.legal strong{color:var(--ink);font-weight:600}
.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.legal a:hover{color:var(--blue)}
.legal dl{margin:0 0 15px}
.legal dt{margin:16px 0 4px;font-size:15.5px;font-weight:600;color:var(--ink)}
.legal dd{margin:0;font-size:16px;line-height:1.62;color:var(--ink-2)}

/* Contents list at the top of a long policy. */
.legal-toc{
  margin:0 0 clamp(30px,4vw,40px);padding:20px 22px;border:1px solid var(--line-soft);
  border-radius:var(--radius);background:var(--bg-grey);
}
.legal-toc p{margin:0 0 11px;font-size:13px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3)}
.legal-toc ol{margin:0;padding-left:19px}
.legal-toc li{margin:0 0 7px;font-size:15px;line-height:1.45}
.legal-toc a{color:var(--ink-2);text-decoration:none}
.legal-toc a:hover{color:var(--ink);text-decoration:underline}

/* A pulled-out clause: the thing people came to the page to check. */
.legal-key{
  margin:0 0 15px;padding:18px 20px;border:1px solid var(--line);
  border-radius:var(--radius);background:#fff;
}
.legal-key p:last-child{margin-bottom:0}

/* Placeholders the site owner still has to fill in. Deliberately loud, so a
   blank company number cannot ship quietly. */
.todo{
  background:#fff4cf;border-bottom:1.5px solid #d9a400;
  padding:1px 5px;border-radius:4px;color:#6b4e00;font-weight:600;
}

/* ---------- 404 ---------- */
.notfound{max-width:520px;margin:0 auto;text-align:center;padding:clamp(50px,10vw,90px) 0}
.notfound h1{margin:0 0 14px}
.notfound p{margin:0 auto 26px;font-size:17px;line-height:1.55;color:var(--ink-2);max-width:44ch}
.notfound-links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

/* ---------- 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 calc(68px + env(safe-area-inset-bottom));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 14px}
.foot-links a{font-size:14px;color:var(--ink-2)}
.foot-links a:hover{color:var(--ink);text-decoration:none}
/* Legal sits under the main links, quieter but never hidden. */
.foot-legal-links{display:flex;flex-wrap:wrap;gap:18px;margin:0 0 26px}
.foot-legal-links a{font-size:13px;color:var(--ink-3)}
.foot-legal-links a:hover{color:var(--ink-2);text-decoration:none}
/* Reopening the cookie choice is a button, not a link - it changes state
   rather than going anywhere - but it has to sit in the row like one. */
.linkish-foot{
  font-family:var(--font);font-size:13px;color:var(--ink-3);
  background:none;border:0;padding:0;cursor:pointer;
}
.linkish-foot:hover{color:var(--ink-2)}
.mini-legal .linkish-foot{font-size:12.5px}
/* Terms and privacy at the point the account is created. */
.legal-consent{margin-top:12px}
.legal-consent a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.legal-consent a:hover{color:var(--ink)}
.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:14px;font-size:14px}

.auth-wrap{max-width:440px;margin:0 auto;padding:clamp(40px,9vw,80px) 22px calc(80px + env(safe-area-inset-bottom))}
.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}
/* The tabs' margin is the only thing holding a form off the subtitle above
   it. Both auth cards can be without them - login.html hides them to reset a
   password, reset.html never has them - and then the first label sits on top
   of the subtitle. */
.seg[hidden] + form,
.auth-sub + form{margin-top:26px}
.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,.bc-form label,.pw-fields label{font-size:13.5px;font-weight:500;color:var(--ink-2)}
/* .pw-fields sits outside .acct-grid, so it was getting no styling at all -
   which meant the browser default, and any field under 16px makes iOS Safari
   zoom the whole page the moment it is focused. */
.auth-card input,.acct-grid input,.acct-grid textarea,.pw-fields input,
.bc-form input:not([type="file"]),.bc-form select,.bc-form 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,.bc-form textarea{resize:vertical;line-height:1.45}
.auth-card input:focus,.acct-grid input:focus,.acct-grid textarea:focus,.pw-fields input:focus,
.bc-form input:focus,.bc-form select:focus,.bc-form 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)}
/* Defined after .hint so the consent line keeps its own spacing when it is
   also a .hint on the login form. */
.hint.legal-consent{margin-top:13px;line-height:1.5}
/* A hint under a field is a caption and belongs tight to it. Two hints in a
   row are separate points and were running together as one grey block. */
.hint + .hint{margin-top:9px}
.mail-pref + .hint{margin-top:8px}
/* Two preferences stacked need air between them, or they read as one. */
.mail-pref + .mail-pref{margin-top:13px}

.note{margin:12px 0 0;font-size:14px;line-height:1.45;min-height:20px;color:var(--ink-2)}
/* min-height keeps the layout still when a message appears - but an empty one
   holds 32px open whether or not there is ever anything to say, and the
   account page has nine. Collapsed rather than display:none so the live region
   stays in the accessibility tree and still announces when it fills. */
.note:empty{margin:0;min-height:0}
.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 ---- */
/* viewport-fit=cover is set on every page, so content runs underneath the
   home indicator and Safari's floating address pill. Nothing accounted for it,
   and the last line of the account page - the address you are signed in with -
   sat behind that pill on a phone. */
.acct-wrap{max-width:760px;margin:0 auto;padding:clamp(36px,7vw,64px) 22px calc(90px + env(safe-area-inset-bottom))}
.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-foot{margin-top:26px;text-align:center}
/* account, admin, login, reset and the wizard have no site footer, so the
   legal links ride along at the bottom of the page instead. */
.mini-legal{
  margin:34px 0 calc(10px + env(safe-area-inset-bottom));text-align:center;
  display:flex;flex-wrap:wrap;gap:16px;justify-content:center;
}
.mini-legal a{font-size:12.5px;color:var(--ink-3)}
.mini-legal a:hover{color:var(--ink-2);text-decoration:none}
.acct-email{margin:0;font-size:13px;color:var(--ink-3)}

@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 */
/* overflow clips the total row's square corners to the card's own radius, so
   the grey reaches the corners exactly instead of the row guessing at a
   radius that has to be kept in step with this one. */
.sumbox{border:1px solid var(--line-soft);border-radius:16px;padding:6px 18px;margin-bottom:20px;overflow:hidden}
.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{
  /* Negative margins on all three sides pull the fill out through the card's
     padding and onto its inside edge - without the bottom one the grey
     stopped 6px short and left a white strip under it. */
  border-bottom:0;margin:0 -18px -6px;padding-left:18px;padding-right:18px;
  background:var(--bg-grey);
}
.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:14px;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}

.admin-wrap{max-width:900px;margin:0 auto;padding:clamp(36px,7vw,64px) 22px calc(90px + env(safe-area-inset-bottom))}

.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-attachments{margin:6px 0 0;font-size:13px}
.queue-attachments a{color:var(--blue);font-weight:600}
.queue-actions{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.admin-charge{height:38px;padding:0 16px;font-size:13.5px}
.queue-billed{margin:0;font-size:12.5px;color:var(--ink-3);text-align:right}
.queue-reclass{margin-top:0;font-size:12.5px}

/* Edit/feature sub-headings inside the open-requests queue — same title
   style as the customer's own request history, spaced from whatever came
   before it. */
#queue .req-list-title{margin-top:24px}
#queue .req-list-title:first-child{margin-top:0}
.req-group + .req-group{margin-top:22px}

.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-reach{margin:8px 0 0;font-size:13.5px;color:var(--ink-3)}
.cust-reach a{color:var(--ink);font-weight:500}
.contact-search{width:100%;margin-bottom:20px}
.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}

/* The admin home is a menu, not a tab row - one full-width row per area,
   icon left, count badge and chevron right, hairline separators. Opening a
   row swaps the whole menu for that section's page; ← Menu comes back. */
.admin-menu{
  background:#fff;border-radius:var(--radius-lg);border:1px solid var(--line-soft);
  padding:6px clamp(20px,4vw,28px);margin-top:26px;
}
.menu-row{
  display:flex;align-items:center;gap:15px;width:100%;
  padding:18px 0;border:0;border-bottom:1px solid var(--line-soft);background:none;
  font-family:inherit;font-size:16.5px;font-weight:500;letter-spacing:-.01em;color:var(--ink);
  cursor:pointer;text-align:left;transition:opacity .15s var(--ease);
}
.menu-row:last-child{border-bottom:0}
.menu-row:hover{opacity:.65}
.menu-icon{display:flex;flex:0 0 auto;color:var(--ink-2)}
.menu-icon svg{width:21px;height:21px}
.menu-label{flex:1;min-width:0}
.menu-chevron{flex:0 0 auto;font-size:20px;line-height:1;color:var(--ink-3)}
.admin-back{margin:0 0 4px;font-size:15px}
.nav-dot{
  display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;
  padding:0 6px;border-radius:980px;background:#d93025;color:#fff;font-size:11.5px;font-weight:700;
}

.cust-clickable{cursor:pointer;transition:opacity .15s var(--ease)}
.cust-clickable:hover{opacity:.7}
.cust-clickable:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.cust-detail > .linkish:first-child{margin-top:0}
.cust-detail .cust-head{margin-top:22px}
.cust-detail > .cust-head:first-of-type{margin-top:18px}
.cust-detail h3.req-list-title{margin-top:26px}

.feature-list{list-style:none;margin:0 0 12px;padding:0}
.feature-item{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:14.5px;color:var(--ink);
}
.feature-item:last-child{border-bottom:0}
.feature-item-main{display:flex;align-items:center;gap:9px;min-width:0}
.feature-item-actions{display:flex;gap:14px;flex:0 0 auto}
.feature-item-actions .linkish{margin:0;font-size:12.5px}
.feature-new{
  display:inline-flex;align-items:center;flex:0 0 auto;padding:3px 9px;border-radius:980px;
  background:var(--good-soft);color:var(--good);font-size:10.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
}
.feature-add{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}

/* Where a feature stands, on the customer's own page: one pill, no prices. */
.feature-pill{
  flex:0 0 auto;padding:4px 11px;border-radius:980px;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;
}
.feature-pill.is-live{background:var(--bg-grey);color:var(--ink-2)}
.feature-pill.is-new{background:var(--good-soft);color:var(--good)}
.feature-pill.is-pending{background:#eef2ff;color:#3730a3}

/* The pencil under the logo - the way into everything about the business. */
.acct-id-side{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 auto}
.id-edit{
  display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:980px;
  border:1px solid var(--line);background:#fff;font-family:inherit;font-size:12.5px;
  font-weight:500;color:var(--ink-2);cursor:pointer;transition:border-color .18s var(--ease)
}
.id-edit:hover{border-color:var(--ink-3)}
.id-edit svg{width:13px;height:13px}

.biz-title{font-size:28px;font-weight:600;letter-spacing:-.03em;margin:14px 0 0}
#bizView .lede.left{margin-bottom:4px}
.biz-heading{margin-top:32px}

/* Writing a broadcast: the same two-column field grid the account page uses,
   with the long fields spanning both. */
.bc-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.bc-form .field.full{grid-column:1 / -1}
.bc-form .notes-textarea{margin-bottom:0}
.bc-form input[type="file"]{font-size:13.5px;color:var(--ink-2)}
.bc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.bc-preview{margin-top:24px}
/* Its own frame, so the email's styles cannot leak into the admin page and
   flatter a layout that will not survive an inbox. */
.bc-preview iframe{
  width:100%;height:620px;border:1px solid var(--line-soft);border-radius:14px;background:#f5f5f7;
}
@media (max-width:640px){
  .bc-form{grid-template-columns:1fr}
}

/* One preference, so it reads as a sentence rather than a form field. */
.mail-pref{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:var(--ink);cursor:pointer}
.mail-pref input{width:17px;height:17px;margin:1px 0 0;flex:0 0 auto;accent-color:var(--ink);cursor:pointer}
.mail-pref span{line-height:1.5}
.pw-block{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-soft)}
.pw-block .req-list-title{margin-bottom:10px}
.pw-block .linkish{margin-top:0}
.pw-fields{margin-top:14px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.pw-fields .field{width:100%}

.notes-textarea{width:100%;min-width:0;resize:vertical;margin-bottom:12px}

.seo-panel .queue{margin-top:16px}

/* Payments, laid out like a statement: a summary strip, then rows grouped
   under a date with the amount and status set hard right. */
.pay-stats{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.pay-stat{
  flex:1 1 140px;min-width:0;padding:15px 17px;
  background:var(--bg-grey);border-radius:16px;display:flex;flex-direction:column;gap:5px;
}
.pay-stat-label{font-size:12.5px;color:var(--ink-3);letter-spacing:.01em}
.pay-stat-value{font-size:23px;font-weight:600;letter-spacing:-.03em;color:var(--ink)}

#paymentsBody .req-list-title{margin-top:28px}
/* Over-allowance is the one thing in the queue that costs money, so it gets
   a pill of its own rather than a clause at the end of the meta line. */
.over-pill{
  display:inline-flex;margin-top:7px;padding:4px 11px;border-radius:980px;
  background:#fdecea;color:#b3261e;font-size:11.5px;font-weight:600;letter-spacing:.02em;
}
/* Day headings inside the completed list, same as the payments ledger. */
#doneList .pay-day:first-child{margin-top:0}
.pay-day{
  margin:26px 0 2px;font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);
}
.pay-list{list-style:none;margin:0;padding:0}
.pay-row{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:16px 0;border-bottom:1px solid var(--line-soft);
}
.pay-row:last-child{border-bottom:0}
.pay-main{flex:1;min-width:0}
.pay-who{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.pay-what{margin:3px 0 0;font-size:14px;line-height:1.4;color:var(--ink-2);overflow-wrap:anywhere}
.pay-meta{margin:4px 0 0;font-size:12.5px;color:var(--ink-3)}
.pay-side{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.pay-amount{margin:0;font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.pay-pill{
  padding:4px 11px;border-radius:980px;background:var(--good-soft);color:var(--good);
  font-size:11.5px;font-weight:600;letter-spacing:.02em;
}

/* The template editor on the admin page - customer-facing copy and the
   build notes that stay ours, in one form. */
.tpl-form{margin-top:16px;padding-top:16px;border-top:1px solid var(--line-soft)}
.tpl-form .field{margin-bottom:14px}
.tpl-form label{font-size:13px;font-weight:500;color:var(--ink-2);display:block;margin-bottom:6px}
.tpl-form .admin-input{width:100%;min-width:0}
.tpl-shots{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.tpl-shot{display:block;width:64px;height:64px;border-radius:12px;overflow:hidden;border:1px solid var(--line-soft)}
.tpl-shot img{width:100%;height:100%;object-fit:cover;display:block}

.payments-panel{margin:10px 0}
.payments-body{margin-top:14px}
.payments-body .queue{margin-top:14px}

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

/* ---- 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}
.acct-id-site{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 0}
.acct-id-site .site-url{font-size:14.5px}
.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-launch{margin-top:24px;padding-top:22px;border-top:1px solid var(--line-soft)}
.req-picker{margin-top:24px;padding-top:22px;border-top:1px solid var(--line-soft)}
.req-tpl-group{margin-bottom:18px}
/* Each saved feature opens to say what it does, so nobody has to guess from
   the name alone before asking for it. */
.req-tpl-list{display:flex;flex-direction:column;gap:0}
.tpl-row{border-bottom:1px solid var(--line-soft)}
.tpl-row:last-child{border-bottom:0}
.tpl-head{display:flex;align-items:center;gap:8px;width:100%}
/* The name is the shortcut: tap it and the request is already filled in. */
.tpl-name{
  flex:1;min-width:0;padding:14px 0;border:0;background:none;font-family:inherit;
  font-size:15.5px;font-weight:500;color:var(--ink);cursor:pointer;text-align:left;
}
.tpl-name:hover{color:var(--ink-2)}
/* The arrow only ever opens the description - it never picks anything. */
.tpl-toggle{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border:0;border-radius:50%;background:none;cursor:pointer;
  transition:background .18s var(--ease);
}
.tpl-toggle:hover{background:var(--bg-grey)}
.tpl-chevron{font-size:19px;line-height:1;color:var(--ink-3);transition:transform .2s var(--ease)}
.tpl-toggle.is-open .tpl-chevron{transform:rotate(90deg)}
.tpl-name:focus-visible,.tpl-toggle:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tpl-body{padding:0 0 16px}
.tpl-desc{margin:0 0 14px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.tpl-pick{height:40px;padding:0 18px;font-size:14px}

.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-price{margin:0 0 16px;font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.req-price.is-charge{color:var(--ink);font-weight:600}

.req-list{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-soft)}
#completedPanel .req-list{margin-top:0;padding-top:0;border-top:0}
.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-confirm{display:inline-block;margin-top:5px;font-size:12.5px;font-weight:600;color:var(--blue)}
.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{text-align:center}

@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}
}