/* ─────────────────────────────────────────────────────────────
   Booking Buddy — mockup in the Orbit layout language.
   Palette is taken from the logo, not the current live site:
   the palette is sampled from hubstaff.com's stylesheet (see :root).
   ───────────────────────────────────────────────────────────── */
:root{
  /* Palette sampled from hubstaff.com's own stylesheet. The page ground is a
     COOL blue-white (#F8FBFF) rather than the warm cream this design started
     with — that swap is what makes the whole site read as Hubstaff-branded,
     more than the blue does. */
  --blue:#294DFF;          /* Hubstaff primary */
  --blue-d:#021FA9;        /* pressed/hover */
  --blue-tint:#EBF1FF;     /* icon chips, soft fills */
  --blue-tint-2:#CCD5FF;   /* stronger tint, gradient washes */
  --teal:#08BA98;          /* Hubstaff's secondary accent */
  --navy:#253053;          /* headlines, dark cards */
  --ink-soft:#636B83;      /* body copy */
  --cream:#F8FBFF;         /* page ground */
  --white:#FFFFFF;
  --line:#E0E0EE;          /* hairlines on the ground */
  --line-w:#E4E6EA;        /* hairlines on white */
  --grad:linear-gradient(95deg,#A31CF0 0%,#6C2BF6 42%,#1B46FF 100%);      /* purple → blue, every primary button */
  --grad-h:linear-gradient(95deg,#8F14D6 0%,#5A21DE 42%,#0E36E6 100%);   /* its hover */
  --grad-v:linear-gradient(180deg,#A31CF0 0%,#6C2BF6 45%,#1B46FF 100%);  /* vertical, for bars */
  --radius:16px;
  --radius-lg:24px;
  --shell:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--cream); color:var(--navy);
  -webkit-font-smoothing:antialiased;
}
.shell{max-width:var(--shell); margin:0 auto; padding:0 28px}

/* ── type ── */
h1,h2,h3{margin:0; letter-spacing:-1.4px; font-weight:800; line-height:1.1}
h1{font-size:52px; letter-spacing:-2.2px}
h2{font-size:40px}
h3{font-size:17px; letter-spacing:-.4px; font-weight:700}
p{margin:0; color:var(--ink-soft); line-height:1.65; font-size:15.5px}
.lead{font-size:17px}
.eyebrow{
  display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:1.9px;
  text-transform:uppercase; color:var(--blue); margin-bottom:16px;
}
.centered{text-align:center}
.centered p{max-width:620px; margin:14px auto 0}

/* ── buttons ── */
.btn{
  display:inline-flex; align-items:center; gap:8px; border-radius:999px;
  padding:13px 24px; font-size:14.5px; font-weight:700; text-decoration:none;
  border:1.5px solid transparent; cursor:pointer; transition:.15s ease;
  background-clip:padding-box;
  white-space:nowrap;
}
/* Primary = brand blue. (The class name is kept so every call site does not
   have to change; the navy fill it used to carry is gone.) */
.btn--dark{background:var(--grad); color:#fff; border:0}
.btn--dark:hover{background:var(--grad-h)}
/* Secondary on a dark ground: an outline, so a pair of buttons still reads as
   primary + secondary now that both would otherwise be the same blue. */
.btn--onDark{background:transparent; color:#fff; border-color:rgba(255,255,255,.34)}
.btn--onDark:hover{background:rgba(255,255,255,.10)}
.btn--blue{background:var(--grad); color:#fff; border:0}
.btn--blue:hover{background:var(--grad-h)}
.btn--ghost{
  color:var(--navy); border:1.5px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box, var(--grad) border-box;
  background-clip:padding-box, border-box;
}
.btn--ghost:hover{
  background:linear-gradient(#F6F8FF,#F6F8FF) padding-box, var(--grad-h) border-box;
  background-clip:padding-box, border-box;
}
.btn--sm{padding:10px 20px; font-size:13.5px}

/* ── nav ── */
.nav{
  position:sticky; top:0; z-index:50; background:rgba(248,251,255,.86);
  backdrop-filter:blur(12px); border-bottom:1px solid rgba(224,224,238,.8);
}
.nav__in{display:flex; align-items:center; gap:34px; height:88px}
/* Logo lockup: the mark is inline SVG and the wordmark is live text, so the
   type renders in the page's own webfont at any size and stays crisp on
   retina without a 2x asset. Rebuilt from the supplied artwork. */
.nav__logo{display:inline-flex; align-items:center; gap:11px; text-decoration:none}
.bb-mark{height:40px; width:auto; flex:0 0 auto; display:block}
.bb-word{
  position:relative; font-weight:800; font-style:italic; font-size:31px;
  letter-spacing:-1.5px; line-height:1; color:var(--navy); white-space:nowrap;
}
.bb-word > span{color:var(--blue)}
/* the small tick that floats over the wordmark in the artwork */
.bb-tick{position:absolute; top:-7px; left:47%; width:15px; height:15px}
.bb-tick svg{width:100%; height:100%; display:block}
.nav__links{display:flex; gap:26px; margin:0 auto}
.nav__links a{
  color:var(--navy); text-decoration:none; font-size:14.5px; font-weight:600; opacity:.85;
}
.nav__links a:hover{opacity:1; color:var(--blue)}
.nav__right{display:flex; align-items:center; gap:16px}
.nav__signin{color:var(--navy); text-decoration:none; font-size:14.5px; font-weight:600}

/* ── hero ── */
/* Hero wash, as Orbit does it: a warm cream base with two large blurred
   colour fields bleeding in from the top corners — lavender on the left, mint
   on the right — fading out before the fold. They sit BEHIND the content
   (z-index) and are pointer-transparent so they never intercept a click. */
.hero{
  position:relative; overflow:hidden; padding:74px 0 84px;
  background:linear-gradient(180deg,#EEF3FF 0%,#F8FBFF 46%,var(--cream) 100%);
}
.hero::before,.hero::after{
  content:''; position:absolute; border-radius:50%; z-index:0;
  filter:blur(120px); pointer-events:none;
}
.hero::before{
  width:820px; height:620px; top:-300px; left:-240px;
  background:#CCD5FF; opacity:.75;
}
.hero::after{
  width:880px; height:640px; top:-320px; right:-260px;
  background:#CFFCF0; opacity:.62;
}
/* a third, warmer field low on the right stops the wash ending in a hard line */
.hero__glow{
  position:absolute; z-index:0; pointer-events:none; border-radius:50%;
  width:700px; height:420px; right:-160px; bottom:-260px;
  background:#E9F5FF; opacity:.55; filter:blur(120px);
}
.hero__grid{z-index:1}
.hero__grid{
  position:relative; display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:52px; align-items:center;
}
.pill{
  display:inline-flex; align-items:center; gap:8px; background:var(--white);
  border:1px solid var(--line); border-radius:999px; padding:6px 14px 6px 8px;
  font-size:12.5px; font-weight:600; color:var(--navy); margin-bottom:22px;
}
.pill span{
  display:inline-flex; width:19px; height:19px; border-radius:50%;
  background:var(--blue-tint); color:var(--blue); align-items:center; justify-content:center;
}
.hero p{max-width:430px; margin-top:18px}
.hero__cta{display:flex; gap:11px; margin-top:28px}
.hero__note{font-size:12.5px; color:#9E9EBF; margin-top:18px}

/* ── shot: product screenshots framed as Orbit frames them ── */
/* Screenshot frame, matching Orbit's treatment: a generously padded cream
   panel with a big radius, NO border, and a wide soft drop shadow doing all
   the separation. Two stacked shadows — a large diffuse one for the lift and a
   tighter one just under the card so it doesn't look like it's floating away. */
.shot{
  background:#FBFCFF; border:0; border-radius:26px;
  padding:20px;
  box-shadow:
    0 44px 80px -30px rgba(18,24,58,.24),
    0 18px 34px -20px rgba(18,24,58,.12);
  overflow:hidden;
}
.shot img{display:block; width:100%; height:auto; border-radius:14px}
/* Full-bleed-within-shell shot: the widest the layout allows, so a dense app
   screenshot is only ~2.6x down from its retina source and stays readable. */
/* The full-width shot carries a slightly deeper shadow — a wider card needs
   more spread to read as lifted rather than flat. */
.shot--full{
  padding:22px;
  box-shadow:
    0 56px 100px -34px rgba(18,24,58,.26),
    0 22px 42px -24px rgba(18,24,58,.13);
}
.shot--full img{border-radius:14px}

/* ── sections ── */
section{padding:88px 0}
.sec-head{margin-bottom:44px}

/* ── card grid ── */
.grid{display:grid; gap:18px}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{
  background:var(--white); border:1px solid var(--line-w); border-radius:var(--radius);
  padding:22px 20px 24px;
}
.card__ico{
  width:36px; height:36px; border-radius:10px; background:var(--blue-tint);
  color:var(--blue); display:flex; align-items:center; justify-content:center;
  margin-bottom:16px;
}
.card h3{margin-bottom:7px}
.card p{font-size:13.5px; line-height:1.6}

/* ── tinted band ── */
.tinted{position:relative; overflow:hidden}
.tinted::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 70% at 12% 0%,  rgba(204,213,255,.45) 0%, transparent 62%),
    radial-gradient(55% 65% at 88% 8%,  rgba(207,252,240,.36) 0%, transparent 60%);
}
.tinted > *{position:relative; z-index:1}

/* ── stats ── */
.stats{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:8px 0 46px}
.stat{text-align:center}
.stat b{display:block; font-size:44px; font-weight:800; color:var(--blue); letter-spacing:-2px}
.stat span{font-size:13.5px; color:var(--ink-soft)}

/* ── testimonials ── */
.quote{background:var(--white); border:1px solid var(--line-w); border-radius:var(--radius); padding:20px}
.quote__who{font-size:13.5px; font-weight:700}
.quote__role{font-size:12px; color:#9E9EBF; margin-bottom:11px}
.quote p{font-size:13.5px; line-height:1.62}

/* ── split feature ── */
/* The image column is deliberately the larger half — these are UI screenshots,
   not decoration, and they have to be read. */
.split{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:48px; align-items:center}
.split--flip{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.split--flip .split__copy{order:2}
.split__copy p{margin-top:16px; max-width:440px}
.checks{list-style:none; margin:22px 0 0; padding:0; display:grid; gap:11px}
.checks li{display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:600}
.checks svg{flex:0 0 auto; color:var(--blue)}
.checks--row{
  grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:32px;
}
.checks--row li{font-size:13.5px; align-items:flex-start}
.morelink{
  display:inline-flex; align-items:center; gap:7px; margin-top:24px; color:var(--blue);
  font-size:14px; font-weight:700; text-decoration:none;
}
/* The "the rest is on its own page" link under a home-page teaser section. */
.sec-link{margin-top:10px}
.sec-link .morelink{font-size:15px}

/* ── inset bands: Orbit's signature — a rounded card, not a full-bleed band ── */
.band{
  border-radius:var(--radius-lg); padding:64px 56px; text-align:center;
}
/* The measure and the gap under the headline belong to every band, not just
   the navy one. They were declared only on .band--dark, so on the wash and
   light variants the body paragraph sat flush against the heading. */
.band p{max-width:560px; margin:16px auto 0}
.band--dark{background:var(--navy); color:#fff}
.band--dark h2{color:#fff}
.band--dark p{color:#C6C6DD}
.band--dark .eyebrow{color:#8FA5FF}
.band--light{background:var(--white); border:1px solid var(--line-w)}
/* Brand blue graded into a deep blue across the diagonal, white copy. The
   eyebrow and body text drop to translucent white rather than a second hue, so
   the headline still leads. */
/* The hero's wash, clipped to the card: the same vertical gradient base and
   the same two large blurred colour fields in the top corners. The warm glow
   the hero hangs low-right on .hero__glow is a radial gradient here, because
   bb_band() emits no spare element to carry it. The two stacked shadows are
   the .shot pair, lifting the card off the cream. */
.band--wash{
  position:relative; overflow:hidden; border:1px solid var(--line-w);
  background:
    radial-gradient(700px 420px at calc(100% + 60px) calc(100% + 130px),
      rgba(255,230,214,.55), rgba(255,230,214,0) 70%),
    linear-gradient(180deg,#EEF3FF 0%,#F8FBFF 46%,var(--cream) 100%);
  box-shadow:
    0 44px 80px -32px rgba(18,24,58,.22),
    0 18px 34px -22px rgba(18,24,58,.12);
}
.band--wash::before,.band--wash::after{
  content:''; position:absolute; border-radius:50%; z-index:0;
  filter:blur(110px); pointer-events:none;
}
.band--wash::before{width:560px; height:400px; top:-210px; left:-160px; background:#CCD5FF; opacity:.72}
.band--wash::after{width:600px; height:420px; top:-230px; right:-180px; background:#CFFCF0; opacity:.68}
.band--wash > *{position:relative; z-index:1}
/* Copy keeps the page's default navy/ink — a light ground needs no overrides,
   and the hero pairs a solid blue primary with the white ghost secondary. */
.band__cta{display:flex; gap:11px; justify-content:center; margin-top:30px}

/* ── pricing ── */
.toggle{
  display:inline-flex; background:var(--white); border:1px solid var(--line);
  border-radius:999px; padding:4px; gap:4px; margin:24px auto 40px;
}
.toggle button{
  border:0; background:transparent; border-radius:999px; padding:8px 20px;
  font:inherit; font-size:13.5px; font-weight:700; color:var(--ink-soft); cursor:pointer;
}
.toggle button[aria-pressed="true"]{background:var(--grad); color:#fff}
.plans{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; align-items:start}
.plan{
  background:var(--white); border:1px solid var(--line-w); border-radius:var(--radius);
  padding:24px 20px; position:relative;
}
.plan--pop{border:2px solid var(--blue); box-shadow:0 18px 40px -26px rgba(41,77,255,.45)}
.plan--dark{background:var(--navy); color:#fff; border-color:var(--navy)}
.plan--dark p, .plan--dark .plan__feat li{color:#C6C6DD}
.plan__badge{
  position:absolute; top:-11px; left:20px; background:var(--grad); color:#fff;
  font-size:10.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase;
  padding:4px 11px; border-radius:999px;
}
.plan__name{font-size:14px; font-weight:700; margin-bottom:10px}
.plan__price{font-size:36px; font-weight:800; letter-spacing:-1.6px; line-height:1}
.plan__price small{font-size:13px; font-weight:600; color:#9E9EBF; letter-spacing:0}
.plan p{font-size:12.5px; margin:10px 0 18px; line-height:1.55}
.plan__feat{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:9px}
.plan__feat li{display:flex; gap:8px; font-size:12.5px; color:var(--ink-soft); align-items:flex-start}
.plan__feat svg{flex:0 0 auto; margin-top:2px; color:var(--blue)}
.plan--dark .plan__feat svg{color:#8FA5FF}
.plan .btn{width:100%; justify-content:center; margin-top:20px}

/* ── One plan ───────────────────────────────────────────────
   Replaces the four-column .plans grid. The price panel keeps the weight of a
   plan card; the contents sit beside it in two columns rather than under it,
   so twelve included features do not read as a wall. */
.oneplan{
  display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:0;
  background:#fff; border:1px solid var(--line-w); border-radius:var(--radius-lg);
  overflow:hidden; max-width:1000px; margin:0 auto;
  box-shadow:0 30px 66px -34px rgba(30,38,74,.24);
}
.oneplan__head{
  position:relative; padding:38px 34px 34px;
  background:linear-gradient(180deg,#FBFCFF 0%,#F4F7FE 100%);
  border-right:1px solid var(--line-w);
}
.oneplan__head .plan__badge{position:static; display:inline-block; margin-bottom:18px}
.oneplan__price b{font-size:56px; font-weight:800; letter-spacing:-2.6px; color:var(--navy); line-height:1}
.oneplan__price em{font-style:normal; font-size:14px; font-weight:700; color:var(--ink-soft)}
.oneplan__head p{font-size:13px; color:var(--ink-soft); margin:12px 0 22px; line-height:1.6}
.oneplan__head .btn{width:100%; justify-content:center}
.oneplan__note{display:block; font-size:11.5px; color:#8A8FA8; margin-top:11px; text-align:center}
.oneplan__feat{padding:38px 34px}
.oneplan__feat h3{font-size:14px; font-weight:700; color:var(--navy); margin:0 0 18px}
/* Columns, not a grid: a two-column grid aligns rows to the tallest cell, so
   one wrapped item left a gap beside every short one. Multi-column packs each
   side tightly and only needs the items kept whole. */
.oneplan__feat ul{
  list-style:none; margin:0; padding:0;
  column-count:2; column-gap:26px;
}
.oneplan__feat li{
  display:flex; gap:9px; align-items:flex-start;
  font-size:13px; color:var(--ink-soft); line-height:1.45;
  break-inside:avoid; -webkit-column-break-inside:avoid; margin-bottom:12px;
}
.oneplan__feat svg{flex:0 0 auto; margin-top:1px; color:var(--blue)}
.oneplan__multi{
  max-width:640px; margin:24px auto 0; text-align:center;
  font-size:13px; color:var(--ink-soft); line-height:1.65;
}
@media (max-width:860px){
  .oneplan{grid-template-columns:1fr}
  .oneplan__head{border-right:0; border-bottom:1px solid var(--line-w)}
  .oneplan__feat ul{column-count:1}
}

/* ── footer ──────────────────────────────────────────────────
   The full multi-column footer, but in the mockup's own language rather than
   the navy one on the live site: cream ground, navy headings, hairline rules.
   It is deliberately LIGHT — the section immediately above it is a dark inset
   CTA card, and stacking a dark footer under that reads as one heavy slab. */
/* Hubstaff's wash, used once — on the footer, so the page closes on colour
   instead of trailing off. Stacked radial gradients rather than one linear
   ramp: a linear gradient runs along a single axis, and this needs periwinkle
   pooling bottom-left and pink bottom-right while the top stays near-white so
   the link columns keep their contrast. */
.foot{
  border-top:1px solid var(--line); padding:64px 0 0;
  background:
    radial-gradient(115% 95% at  2% 108%, #C3CFF7 0%, rgba(195,207,247,0) 58%),
    radial-gradient(110% 92% at 99% 106%, #EFCBEC 0%, rgba(239,203,236,0) 60%),
    radial-gradient( 85% 65% at 88%  -6%, #FAE3F4 0%, rgba(250,227,244,0) 62%),
    radial-gradient( 80% 60% at  6%  -8%, #DFE7FD 0%, rgba(223,231,253,0) 58%),
    linear-gradient(180deg, #FFFFFF 0%, #F6F4FD 100%);
}
/* The newsletter field sits on the wash and must stay opaque white. */
.foot .bb-news, .foot .news{background:#fff}
.foot__in{
  display:grid; grid-template-columns:minmax(0,1.72fr) minmax(300px,.9fr); gap:56px;
}
.foot__links{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:46px 30px}
/* Features carries three sub-groups; the others carry one, so it spans three
   tracks and its groups sit side by side instead of wrapping. */
.foot__col--wide{grid-column:span 3}
.foot__title{font-size:15px; font-weight:700; letter-spacing:-.3px; margin:0 0 18px; color:var(--navy)}
.foot__groups{display:flex; gap:34px; flex-wrap:wrap}
.foot__group{min-width:126px}
.foot__label{font-size:12px; color:#6E6E90; margin:0 0 12px; font-weight:600}
.foot__group ul{list-style:none; margin:0; padding:0}
.foot__group li{margin:0 0 10px}
.foot__group a{color:var(--ink-soft); text-decoration:none; font-size:13.5px}
.foot__group a:hover{color:var(--blue)}

.foot__lead{font-size:17px; font-weight:700; letter-spacing:-.5px; line-height:1.4; margin:0 0 18px}
.news{display:flex; align-items:stretch; background:var(--white);
  border:1px solid var(--line); border-radius:12px; overflow:hidden}
.news input{flex:1; min-width:0; border:0; padding:14px 15px; font:inherit;
  font-size:14px; color:var(--navy); background:transparent}
.news input:focus{outline:none}
.news input::placeholder{color:#9E9EBF}
.news button{border:0; background:var(--grad); color:#fff; padding:14px 22px;
  font:inherit; font-size:12px; font-weight:800; letter-spacing:1.1px;
  text-transform:uppercase; cursor:pointer}
.news button:hover{background:var(--grad-h)}
.foot__fine{font-size:12px; color:#6E6E90; margin-top:12px; line-height:1.55}
.foot__fine a{color:var(--ink-soft)}

.foot__social{display:flex; gap:18px; margin-top:24px}
.foot__social a{color:#6E6E90}
.foot__social a:hover{color:var(--blue)}
.foot__social svg{display:block}

.foot__trust{display:flex; gap:30px; flex-wrap:wrap; margin-top:16px}
.foot__trustitem{display:flex; flex-direction:column; gap:4px}
.foot__trustitem svg{color:#6E6E90; margin-bottom:5px}
.foot__trusttop{font-size:11px; color:#6E6E90; letter-spacing:.3px}
.foot__trustbottom{font-size:11px; font-weight:800; letter-spacing:.9px; color:var(--navy)}

.foot__bar{
  margin-top:56px; padding:22px 0 30px; border-top:1px solid rgba(37,48,83,.13);
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
}
.foot__bar, .foot__bar a{font-size:12.5px; color:#6E6E90; text-decoration:none}
.foot__bar a:hover{color:var(--blue)}
.foot__barlinks{display:flex; gap:22px}

@media (max-width:1080px){
  .foot__in{grid-template-columns:1fr; gap:44px}
  .foot__links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot__col--wide{grid-column:span 2}
}
@media (max-width:640px){
  .foot__links{grid-template-columns:1fr}
  .foot__col--wide{grid-column:span 1}
  .foot__bar{flex-direction:column; align-items:flex-start}
}

@media (max-width:980px){
  .hero__grid,.split{grid-template-columns:1fr; gap:36px}
  .split--flip .split__copy{order:0}
  .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* --3 was missing this and held three ~95px columns on a phone. */
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav__links{display:none}
  h1{font-size:38px} h2{font-size:30px}
}

/* ── FAQ (pricing) ──────────────────────────────────────────
   <details> rather than scripted accordions: it opens without JS, is
   keyboard-operable for free, and screen readers already understand it. */
.faq{max-width:800px; margin:0 auto}
.faq__item{
  background:var(--white); border:1px solid var(--line-w); border-radius:14px;
  padding:2px 20px; margin-bottom:10px;
}
.faq__item summary{
  list-style:none; cursor:pointer; padding:16px 0; font-weight:700;
  font-size:15.5px; letter-spacing:-.3px; display:flex; align-items:center;
  justify-content:space-between; gap:16px;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:'+'; color:var(--blue); font-size:20px; font-weight:700; line-height:1;
}
.faq__item[open] summary::after{content:'–'}
.faq__item p{padding:0 0 18px; font-size:14.5px; max-width:660px}

/* ── Contact Form 7 ─────────────────────────────────────────
   CF7 wraps every control in a <p> and a <span class="wpcf7-form-control-wrap">,
   and appends a spinner after the submit. Left alone that turns the newsletter
   into a stacked column with a dead strip beside the button, so the wrappers are
   flattened with display:contents and the spinner taken out of the row. */
.foot .wpcf7{margin:0}
.foot .wpcf7 form > p, .foot .bb-news > p{display:contents; margin:0}
.foot .bb-news{
  display:flex; align-items:stretch; background:var(--white);
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
.foot .bb-news .wpcf7-form-control-wrap{flex:1 1 auto; min-width:0; display:flex}
.foot .bb-news .wpcf7-spinner{display:none}
.foot .bb-news input[type=email]{
  flex:1 1 auto; width:100%; min-width:0; margin:0; border:0; border-radius:0;
  padding:14px 15px; font:inherit; font-size:14px; color:var(--navy); background:transparent;
}
.foot .bb-news input[type=email]:focus{outline:none; box-shadow:none}
.foot .bb-news input[type=email]::placeholder{color:#9E9EBF}
.foot .bb-news input[type=submit]{
  flex:0 0 auto; width:auto; margin:0; border:0; border-radius:0;
  background:var(--grad); color:#fff; padding:14px 22px; cursor:pointer; border:0;
  font:inherit; font-size:12px; font-weight:800; letter-spacing:1.1px; text-transform:uppercase;
}
.foot .bb-news input[type=submit]:hover{background:var(--grad-h)}
.foot .screen-reader-text{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.foot .wpcf7-response-output{border-radius:10px; font-size:13px; margin:14px 0 0; padding:10px 14px}
.foot .wpcf7-not-valid-tip{color:#D93B2B; font-size:12.5px; margin-top:5px}

/* The demo form sits in a white card on the demo page. */
.bb-page--demo .card .wpcf7 .bb-field{margin-bottom:15px}
.bb-page--demo .card .wpcf7 label{display:block; font-weight:600; font-size:13.5px; color:var(--navy)}
.bb-page--demo .card .wpcf7 input[type=text],
.bb-page--demo .card .wpcf7 input[type=email],
.bb-page--demo .card .wpcf7 input[type=tel],
.bb-page--demo .card .wpcf7 select,
.bb-page--demo .card .wpcf7 textarea{
  width:100%; margin-top:6px; padding:12px 14px; border:1.5px solid var(--line);
  border-radius:11px; font:inherit; font-size:14.5px; color:var(--navy); background:#fff;
}
.bb-page--demo .card .wpcf7 :is(input,select,textarea):focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 4px rgba(41,77,255,.14);
}
.bb-page--demo .card .wpcf7 input[type=submit]{
  width:100%; margin-top:8px; padding:15px 26px; border:0; border-radius:999px;
  background:var(--grad); color:#fff; font:inherit; font-size:15px; font-weight:700; cursor:pointer;
}
.bb-page--demo .card .wpcf7 input[type=submit]:hover{background:var(--grad-h)}
.bb-page--demo .card .wpcf7-spinner{display:none}
.bb-page--demo .card .wpcf7-not-valid-tip{color:#D93B2B; font-size:12.5px; margin-top:4px}

/* ── Typography ─────────────────────────────────────────────
   Matching the reference: it sets body copy in Inter (Google Fonts) and
   headings in Averta. Averta is a COMMERCIAL typeface that the reference
   self-hosts — its .woff2 files are licensed software, so they cannot be
   copied here. Figtree is the closest free geometric sans on Google Fonts and
   stands in for it; if an Averta licence is bought, add the @font-face block
   and change --font-display to 'Averta' and nothing else needs touching. */
:root{
  --font-display:"Figtree";                 /* stands in for Averta */
  --font-body:"Inter";
}
body{font-family:var(--font-body),system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3,
.stat b, .plan__price, .foot__title, .foot__lead,
.opt__name, .bb-word, .wm{
  font-family:var(--font-display),var(--font-body),system-ui,sans-serif;
}

/* ── Hero animation ─────────────────────────────────────────
   The product's loop, drawn in CSS: appointments land in a day column, one is
   confirmed, the takings tick up, and it repeats. Chosen over a video or a
   Lottie file because it is a couple of KB, stays sharp at any size, needs no
   library, and can be switched off wholesale for reduced-motion. */
.viz{position:relative; padding:6px 10px 40px 0}
.viz__frame{
  background:#fff; border-radius:20px; overflow:hidden;
  border:1px solid rgba(37,48,83,.07);
  box-shadow:0 30px 60px -30px rgba(30,38,74,.24), 0 10px 22px -14px rgba(30,38,74,.10);
}
.viz__bar{
  display:flex; align-items:center; gap:7px; padding:13px 16px;
  background:linear-gradient(#FBFCFF,#F2F5FB); border-bottom:1px solid rgba(37,48,83,.07);
}
.viz__bar i{width:9px; height:9px; border-radius:50%; background:#E0E0EE}
.viz__bar i:first-child{background:#FF9B8F}
.viz__bar i:nth-child(2){background:#FFD48A}
.viz__bar i:nth-child(3){background:#8FE0B4}
.viz__bar span{
  margin-left:12px; font-size:12px; font-weight:700; color:var(--ink-soft);
  letter-spacing:-.1px;
}
.viz__body{display:grid; grid-template-columns:52px 1fr; min-height:268px}
.viz__times{
  display:grid; padding:14px 0; border-right:1px solid rgba(37,48,83,.06);
}
.viz__times span{
  font-size:10.5px; color:#9E9EBF; text-align:right; padding-right:10px; line-height:1;
}
.viz__col{position:relative; padding:14px 16px; display:grid; gap:9px; align-content:start}

/* Each chip drops in, holds, then the set clears and the loop restarts. */
.viz__apt{
  border-radius:11px; padding:9px 12px; border-left:3px solid var(--blue);
  background:var(--blue-tint); opacity:0;
  animation:vizIn 9s cubic-bezier(.22,1,.36,1) infinite;
}
.viz__apt b{display:block; font-size:12.5px; font-weight:700; color:var(--navy)}
.viz__apt span{font-size:11px; color:var(--ink-soft)}
.viz__apt--a{animation-delay:.3s}
.viz__apt--b{animation-delay:1.5s}
.viz__apt--c{
  animation-delay:2.7s;
  border-left-color:#08BA98; background:#E6FAF4;
}
@keyframes vizIn{
   0%   {opacity:0; transform:translateY(14px) scale(.97)}
   6%   {opacity:1; transform:none}
  78%   {opacity:1; transform:none}
  88%,100%{opacity:0; transform:translateY(-8px) scale(.98)}
}

/* Floating confirmation, and the takings pill that follows it. */
.viz__toast,.viz__pay{
  position:absolute; background:#fff; border-radius:14px; opacity:0;
  box-shadow:0 18px 38px -18px rgba(30,38,74,.30), 0 0 0 1px rgba(37,48,83,.05);
}
.viz__toast{
  left:-30px; bottom:-14px; display:flex; align-items:center; gap:11px;
  padding:12px 16px 12px 13px;
  animation:vizPop 9s cubic-bezier(.22,1,.36,1) infinite; animation-delay:3.9s;
}
.viz__toast > div b{display:block; font-size:12.5px; color:var(--navy)}
.viz__toast > div span{font-size:11px; color:var(--ink-soft)}
.viz__tick{
  width:26px; height:26px; border-radius:50%; background:var(--blue); color:#fff;
  display:grid; place-items:center; flex:0 0 auto;
}
.viz__tick svg{width:14px; height:14px}
.viz__pay{
  right:-18px; top:56px; padding:11px 15px; text-align:right;
  animation:vizPop 9s cubic-bezier(.22,1,.36,1) infinite; animation-delay:5.1s;
}
.viz__pay b{display:block; font-size:15px; color:#08BA98; letter-spacing:-.4px}
.viz__pay span{font-size:10.5px; color:var(--ink-soft)}
@keyframes vizPop{
   0%   {opacity:0; transform:translateY(10px) scale(.94)}
   5%   {opacity:1; transform:none}
  72%   {opacity:1; transform:none}
  82%,100%{opacity:0; transform:translateY(-6px) scale(.97)}
}

/* Anyone who has asked their OS for less motion gets the finished state, not
   a frozen first frame — the composition still reads as a full day. */
@media (prefers-reduced-motion:reduce){
  .viz__apt,.viz__toast,.viz__pay{animation:none; opacity:1; transform:none}
}
@media (max-width:980px){
  .viz__toast{left:0}
  .viz__pay{right:0}
}

/* ── Reporting animation ────────────────────────────────────
   A month assembling itself: the sparkline draws, the utilisation bar fills,
   and the appointment bars rise in sequence. Same 9s cycle as the hero so the
   two visuals on one page stay in step rather than fighting each other. */
.rviz{position:relative; padding:6px 18px 44px 0}
.rviz__frame{
  background:#fff; border-radius:20px; overflow:hidden;
  border:1px solid rgba(37,48,83,.07);
  box-shadow:0 30px 60px -30px rgba(30,38,74,.24), 0 10px 22px -14px rgba(30,38,74,.10);
}
.rviz__bar{
  display:flex; align-items:center; gap:7px; padding:13px 16px;
  background:linear-gradient(#FBFCFF,#F2F5FB); border-bottom:1px solid rgba(37,48,83,.07);
}
.rviz__bar i{width:9px; height:9px; border-radius:50%; background:#E0E0EE}
.rviz__bar i:first-child{background:#FF9B8F}
.rviz__bar i:nth-child(2){background:#FFD48A}
.rviz__bar i:nth-child(3){background:#8FE0B4}
.rviz__bar span{margin-left:12px; font-size:12px; font-weight:700; color:var(--ink-soft)}

.rviz__tiles{display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:16px 16px 4px}
.rviz__tile{
  border:1px solid rgba(37,48,83,.07); border-radius:13px; padding:12px 13px 13px;
  min-height:118px; display:flex; flex-direction:column;
}
.rviz__tile p{font-size:11px; color:var(--ink-soft); margin:0 0 5px}
.rviz__tile b{font-size:21px; letter-spacing:-.8px; color:var(--navy); line-height:1}
.rviz__tile em{
  font-style:normal; font-size:10px; font-weight:700; color:#0E9E7E;
  background:#E6FAF4; border-radius:999px; padding:2px 7px; vertical-align:3px;
}
.rviz__tile small{font-size:10px; color:#9E9EBF; margin-top:7px}

/* The sparkline draws itself by retracting its own dash offset. */
.rviz__spark{width:100%; height:44px; margin-top:auto}
.rviz__spark path{
  stroke-dasharray:220; stroke-dashoffset:220;
  animation:rvizDraw 9s ease-out infinite; animation-delay:.4s;
}
@keyframes rvizDraw{
   0%   {stroke-dashoffset:220}
  22%   {stroke-dashoffset:0}
  80%   {stroke-dashoffset:0}
  92%,100%{stroke-dashoffset:220}
}

.rviz__track{
  display:block; height:7px; border-radius:999px; background:#EEF1F8;
  margin-top:auto; overflow:hidden;
}
.rviz__track i{
  display:block; height:100%; width:68%; border-radius:999px;
  background:linear-gradient(90deg,var(--blue),#5B8DFF);
  transform-origin:left; transform:scaleX(0);
  animation:rvizFill 9s cubic-bezier(.22,1,.36,1) infinite; animation-delay:.9s;
}
@keyframes rvizFill{
   0%   {transform:scaleX(0)}
  20%   {transform:scaleX(1)}
  80%   {transform:scaleX(1)}
  92%,100%{transform:scaleX(0)}
}

.rviz__chart{padding:6px 16px 22px}
.rviz__chart p{font-size:11px; color:var(--ink-soft); margin:0 0 9px}
.rviz__bars{display:flex; align-items:flex-end; gap:9px; height:80px}
.rviz__bars i{
  flex:1; border-radius:6px 6px 3px 3px; height:var(--h);
  background:linear-gradient(180deg,#5B8DFF,var(--blue));
  transform-origin:bottom; transform:scaleY(0);
  animation:rvizGrow 9s cubic-bezier(.22,1,.36,1) infinite;
  animation-delay:var(--d);
}
.rviz__bars i:last-child{background:var(--grad-v)}
@keyframes rvizGrow{
   0%   {transform:scaleY(0)}
  14%   {transform:scaleY(1)}
  80%   {transform:scaleY(1)}
  92%,100%{transform:scaleY(0)}
}

.rviz__badge{
  position:absolute; right:-18px; bottom:-16px; background:#fff; border-radius:13px;
  padding:10px 15px; text-align:right; opacity:0;
  box-shadow:0 18px 38px -18px rgba(30,38,74,.30), 0 0 0 1px rgba(37,48,83,.05);
  animation:rvizPop 9s cubic-bezier(.22,1,.36,1) infinite; animation-delay:4.4s;
}
.rviz__badge b{display:block; font-size:12.5px; color:var(--navy)}
.rviz__badge span{font-size:10.5px; color:var(--ink-soft)}
@keyframes rvizPop{
   0%   {opacity:0; transform:translateY(10px) scale(.94)}
   5%   {opacity:1; transform:none}
  74%   {opacity:1; transform:none}
  84%,100%{opacity:0; transform:translateY(-6px) scale(.97)}
}

@media (prefers-reduced-motion:reduce){
  .rviz__spark path{animation:none; stroke-dashoffset:0}
  .rviz__track i,.rviz__bars i{animation:none; transform:none}
  .rviz__badge{animation:none; opacity:1; transform:none}
}
@media (max-width:980px){ .rviz__badge{right:0} }

/* ── Band photo background ──────────────────────────────────
   A photograph behind the band, tinted to the brand navy and scrimmed so the
   white copy keeps its contrast whatever is in the picture. Three layers:
   the photo, a navy multiply tint that pulls it into the palette, then a
   radial scrim that is dense under the type and clears at the edges. */
.band--photo{position:relative; overflow:hidden}
.band__photo{
  position:absolute; inset:0; pointer-events:none;
  background-size:cover; background-position:center 62%;
  /* The tint is what stops it reading as a stock photo dropped on a brand. */
  filter:grayscale(.34) contrast(1.05);
}
.band--photo::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:var(--navy); mix-blend-mode:multiply; opacity:.72;
}
.band--photo::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(72% 108% at 50% 50%,
    rgba(37,48,83,.90) 0%, rgba(37,48,83,.80) 46%, rgba(37,48,83,.52) 100%);
}
.band--photo .band__inner{position:relative; z-index:2}

/* The photo is the largest asset on the page; on a phone the band is short and
   the picture is mostly cropped away, so it is not worth the download. */
@media (max-width:700px){
  .band__photo{display:none}
  .band--photo::before,.band--photo::after{background:var(--navy); opacity:1; mix-blend-mode:normal}
}

/* ══ Home v2 ════════════════════════════════════════════════
   A second arrangement of the same brand. Nothing here redefines a colour,
   font or button — it reuses the tokens and adds only layout. */

.hero--v2{padding-bottom:44px}
.hero__grid--v2{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:44px}
.grad-text{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.flag{
  display:inline-flex; align-items:center; gap:9px; background:#fff;
  border:1px solid var(--line); border-radius:999px; padding:5px 14px 5px 9px;
  font-size:12px; font-weight:700; color:var(--navy); margin-bottom:20px;
}
.flag i{font-style:normal; font-size:14px}
.flag em{
  font-style:normal; font-weight:500; color:var(--ink-soft);
  border-left:1px solid var(--line); padding-left:10px; margin-left:2px;
}
.ticks{list-style:none; display:flex; flex-wrap:wrap; gap:18px; margin:22px 0 0; padding:0}
.ticks li{
  display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--ink-soft);
}
.ticks li::before{
  content:''; width:15px; height:15px; border-radius:50%; flex:0 0 auto;
  background:var(--grad) center/contain;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ── Devices: desktop window with a phone overlapping it ──── */
.devices{position:relative; padding:4px 0 10px}
.dv{
  margin-right:112px;
  background:#fff; border-radius:18px; overflow:hidden;
  border:1px solid rgba(37,48,83,.07);
  box-shadow:0 34px 66px -32px rgba(30,38,74,.28), 0 10px 22px -14px rgba(30,38,74,.10);
}
.dv__bar{
  display:flex; align-items:center; gap:7px; padding:11px 15px;
  background:linear-gradient(#FBFCFF,#F2F5FB); border-bottom:1px solid rgba(37,48,83,.07);
}
.dv__bar i{width:8px; height:8px; border-radius:50%; background:#E0E0EE}
.dv__bar i:first-child{background:#FF9B8F}
.dv__bar i:nth-child(2){background:#FFD48A}
.dv__bar i:nth-child(3){background:#8FE0B4}
.dv__bar span{margin-left:10px; font-size:11px; font-weight:700; color:var(--ink-soft)}
.dv__body{display:grid; grid-template-columns:96px minmax(0,1fr); min-height:250px}
.dv__side{
  display:flex; flex-direction:column; gap:3px; padding:12px 8px;
  border-right:1px solid rgba(37,48,83,.06);
}
.dv__side span{
  font-size:10.5px; color:var(--ink-soft); padding:5px 8px; border-radius:6px;
}
.dv__side .is-on{background:var(--blue-tint); color:var(--blue); font-weight:700}
.dv__grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:12px 12px 16px}
.dv__who{
  font-size:10px; font-weight:700; color:var(--ink-soft); margin:0 0 7px; text-align:center;
}
.dv__apt{
  border-radius:8px; padding:7px 8px; margin-bottom:7px; border-left:3px solid var(--blue);
  background:var(--blue-tint); opacity:0;
  animation:vizIn 9s cubic-bezier(.22,1,.36,1) infinite; animation-delay:var(--d);
}
.dv__apt b{display:block; font-size:10.5px; color:var(--navy)}
.dv__apt span{font-size:9.5px; color:var(--ink-soft)}
.dv__apt--b,.dv__apt--e{border-left-color:#9B4DFF; background:#F3ECFF}
.dv__apt--c,.dv__apt--f{border-left-color:#08BA98; background:#E6FAF4}

/* The phone. Bezel, screen and Dynamic Island are all CSS — no PNG mockup, so
   it stays sharp and its screen can animate. */
.ph{
  position:absolute; right:-4px; bottom:-34px; width:196px; height:400px;
  background:linear-gradient(160deg,#2B3350,#141B2E); border-radius:38px; padding:9px;
  box-shadow:0 40px 70px -28px rgba(20,27,46,.55), 0 0 0 1px rgba(255,255,255,.06);
}
.ph__screen{
  position:relative; height:100%; background:#fff; border-radius:30px; overflow:hidden;
  padding:26px 13px 13px;
}
.ph__island{
  position:absolute; top:9px; left:50%; transform:translateX(-50%);
  width:66px; height:17px; border-radius:999px; background:#141B2E;
}
.ph__head b{display:block; font-size:12px; color:var(--navy); letter-spacing:-.2px}
.ph__head span{font-size:9.5px; color:var(--ink-soft)}
.ph__tabs{display:flex; gap:5px; margin:10px 0 9px}
.ph__tabs i{
  font-style:normal; font-size:9px; font-weight:600; color:var(--ink-soft);
  padding:4px 9px; border-radius:999px; background:#F1F4FA;
}
.ph__tabs .is-on{background:var(--grad); color:#fff}
.ph__list{display:grid; gap:6px}
.ph__row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  border:1px solid rgba(37,48,83,.08); border-radius:9px; padding:7px 9px; opacity:0;
  animation:vizIn 9s cubic-bezier(.22,1,.36,1) infinite; animation-delay:var(--d);
}
.ph__row b{display:block; font-size:10px; color:var(--navy)}
.ph__row span{font-size:8.5px; color:var(--ink-soft)}
.ph__row em{font-style:normal; font-size:10px; font-weight:700; color:var(--navy)}
.ph__cta{
  margin-top:10px; text-align:center; background:var(--grad); color:#fff;
  border-radius:999px; padding:9px; font-size:11px; font-weight:700; opacity:0;
  animation:vizIn 9s cubic-bezier(.22,1,.36,1) infinite; animation-delay:2.1s;
}
/* The confirmation covers the screen at the end of the cycle. */
.ph__done{
  position:absolute; inset:0; background:#fff; display:grid; place-content:center;
  justify-items:center; gap:4px; opacity:0;
  animation:phDone 9s cubic-bezier(.22,1,.36,1) infinite; animation-delay:3.1s;
}
.ph__done b{font-size:14px; color:var(--navy)}
.ph__done span{font-size:10px; color:var(--ink-soft)}
.ph__tick{
  width:46px; height:46px; border-radius:50%; background:var(--grad);
  display:grid; place-items:center; margin-bottom:6px;
}
.ph__tick svg{width:22px; height:22px}
@keyframes phDone{
   0%,2%{opacity:0; transform:scale(.98)}
   8%   {opacity:1; transform:none}
  46%   {opacity:1; transform:none}
  54%,100%{opacity:0; transform:scale(.99)}
}

/* ── Trust row ─────────────────────────────────────────────── */
.trust{padding:54px 0 62px}
.trust__row{
  display:grid; grid-template-columns:repeat(5,1fr); gap:20px; margin-top:26px;
}
.trust__item{display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center}
.trust__item svg{color:var(--blue)}
.trust__item span{font-size:12.5px; font-weight:600; color:var(--ink-soft)}

/* ── Store badges ──────────────────────────────────────────── */
.stores{display:flex; gap:11px; margin-top:24px; flex-wrap:wrap}
.store{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  background:var(--navy); color:#fff; border-radius:12px; padding:9px 16px 9px 13px;
}
.store:hover{background:#1B2440}
.store__txt i{display:block; font-style:normal; font-size:9px; opacity:.75; line-height:1.3}
.store__txt b{display:block; font-size:14px; letter-spacing:-.3px; line-height:1.2}

/* ── Device-section photo with its pull quote ──────────────── */
.shopshot{position:relative; border-radius:20px; overflow:visible}
.shopshot img{
  display:block; width:100%; height:auto; border-radius:20px;
  box-shadow:0 30px 60px -30px rgba(30,38,74,.30);
}
.shopshot__quote{
  position:absolute; right:-18px; bottom:26px; max-width:236px; background:#fff;
  border-radius:14px; padding:14px 16px;
  box-shadow:0 20px 42px -20px rgba(30,38,74,.32), 0 0 0 1px rgba(37,48,83,.05);
}
.shopshot__quote i{font-style:normal; font-size:15px}
.shopshot__quote p{font-size:12.5px; color:var(--navy); font-weight:600; margin:5px 0 6px; line-height:1.5}
.shopshot__quote span{font-size:11px; color:var(--ink-soft)}

/* ── One-price card ────────────────────────────────────────── */
.oneprice{
  display:flex; align-items:center; gap:22px; flex-wrap:wrap; justify-content:center;
  background:#fff; border:1px solid var(--line-w); border-radius:20px;
  padding:22px 26px; max-width:760px; margin:0 auto;
  box-shadow:0 24px 50px -30px rgba(30,38,74,.20);
}
.oneprice__ico{
  width:52px; height:52px; border-radius:14px; background:var(--grad); color:#fff;
  display:grid; place-items:center; flex:0 0 auto;
}
.oneprice__fig{flex:1 1 220px}
.oneprice__fig b{font-size:38px; letter-spacing:-1.8px; color:var(--navy)}
.oneprice__fig em{font-style:normal; font-size:13px; color:var(--ink-soft); font-weight:600}
.oneprice__fig span{display:block; font-size:12.5px; color:var(--ink-soft); margin-top:2px}
.oneprice__cta{display:flex; flex-direction:column; align-items:center; gap:6px}
.oneprice__cta span{font-size:11px; color:#9E9EBF}

@media (max-width:980px){
  .hero__grid--v2{grid-template-columns:1fr}
  .dv{margin-right:0}
  .ph{position:relative; right:auto; bottom:auto; margin:22px auto 0}
  .shopshot__quote{right:0; bottom:-10px}
}

/* ══ Home v2 — large hero composition ═══════════════════════
   The copy holds the left column and the devices fill the right, oversized so
   they run past the shell's edge. A centred hero over a full-width composition
   left dead space either side of the text; this fills the band. */
.hero__grid--v2{align-items:center; padding-bottom:16px}
.hero__copy h1{font-size:47px; letter-spacing:-1.9px}
.hero__copy .lead{max-width:none}

/* ── Centred hero variant (/features/, /pricing/) ───────────
   `.centered` only sets text-align, which does nothing for the button row or
   the tick list — both are flex containers, so their items stayed packed to
   the left while the headline above them was centred. These three rules are
   what actually centres the block, and the widths stop the lead running the
   full content width, which read as a loose paragraph rather than a hero. */
.hero__copy.centered{max-width:900px; margin:0 auto}
.hero__copy.centered .lead{max-width:720px; margin-left:auto; margin-right:auto}
.hero__copy.centered .hero__cta{justify-content:center; margin-top:30px}
.hero__copy.centered .flag{margin-left:auto; margin-right:auto}
.ticks--centre{justify-content:center}

/* The composition is wider than its column on purpose — it bleeds toward the
   viewport edge, which is what makes it read as large rather than as a
   thumbnail sitting politely inside a grid cell. */
.hero--v2 .devices{
  width:calc(100% + 96px); padding:8px 0 26px;
}
.hero--v2 .dv{
  margin-right:240px;
  box-shadow:0 60px 110px -46px rgba(30,38,74,.40), 0 18px 40px -22px rgba(30,38,74,.16);
}
.hero--v2 .dv__body{grid-template-columns:132px 1fr; min-height:376px}
.hero--v2 .dv__side{padding:16px 11px; gap:5px}
.hero--v2 .dv__side span{font-size:12px; padding:7px 11px; border-radius:8px}
.hero--v2 .dv__bar{padding:14px 18px}
.hero--v2 .dv__bar i{width:10px; height:10px}
.hero--v2 .dv__bar span{font-size:12px}
.hero--v2 .dv__grid{gap:12px; padding:16px 18px 22px}
.hero--v2 .dv__who{font-size:12px; margin-bottom:11px}
.hero--v2 .dv__apt{padding:11px 12px; margin-bottom:10px; border-radius:11px; border-left-width:4px}
.hero--v2 .dv__apt b{font-size:13px}
.hero--v2 .dv__apt span{font-size:11px}

.hero--v2 .ph{
  right:0; bottom:-30px; width:252px; height:512px; border-radius:46px; padding:11px;
  box-shadow:0 60px 100px -38px rgba(20,27,46,.60), 0 0 0 1px rgba(255,255,255,.07);
}
.hero--v2 .ph__screen{border-radius:37px; padding:34px 18px 18px}
.hero--v2 .ph__island{top:12px; width:84px; height:22px}
.hero--v2 .ph__head b{font-size:15.5px}
.hero--v2 .ph__head span{font-size:12px}
.hero--v2 .ph__tabs{margin:14px 0 12px; gap:6px}
.hero--v2 .ph__tabs i{font-size:11px; padding:5px 12px}
.hero--v2 .ph__list{gap:8px}
.hero--v2 .ph__row{padding:10px 12px; border-radius:11px}
.hero--v2 .ph__row b{font-size:12.5px}
.hero--v2 .ph__row span{font-size:10.5px}
.hero--v2 .ph__row em{font-size:12.5px}
.hero--v2 .ph__cta{margin-top:14px; padding:12px; font-size:13px}
.hero--v2 .ph__done b{font-size:18px}
.hero--v2 .ph__done span{font-size:12.5px}
.hero--v2 .ph__tick{width:60px; height:60px}
.hero--v2 .ph__tick svg{width:28px; height:28px}

/* ── Hero photograph (/features/) ───────────────────────────
   Sits where the animated composition sits on the home page and is sized the
   same way: wider than its column so it runs toward the viewport edge, which
   is what stops a hero image reading as an illustration in a box. */
.heroshot{width:calc(100% + 96px); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 50px 96px -44px rgba(30,38,74,.42), 0 16px 36px -22px rgba(30,38,74,.16);
}
.heroshot img{display:block; width:100%; height:auto; aspect-ratio:1024/672; object-fit:cover}
@media (max-width:1100px){ .heroshot{width:100%} }

/* ── Floating cards ─────────────────────────────────────────
   The three moments a shop actually notices — a booking arriving, money taken,
   reminders going out — arriving on the same cycle as the screens behind them. */
.fl{
  position:absolute; z-index:3; display:flex; align-items:center; gap:11px;
  background:#fff; border-radius:15px; padding:13px 17px; opacity:0;
  box-shadow:0 24px 48px -22px rgba(30,38,74,.34), 0 0 0 1px rgba(37,48,83,.05);
  animation:vizPop 9s cubic-bezier(.22,1,.36,1) infinite;
}
.fl b{display:block; font-size:13.5px; color:var(--navy); letter-spacing:-.2px}
.fl i{font-style:normal; font-size:11.5px; color:var(--ink-soft)}
.fl__ico{
  width:34px; height:34px; border-radius:11px; flex:0 0 auto;
  display:grid; place-items:center; background:var(--blue-tint); color:var(--blue);
}
.fl__ico svg{width:18px; height:18px}
.fl__ico--grad{background:var(--grad); color:#fff}
.fl--book{left:-56px;  top:104px;   animation-delay:1.1s}
.fl--pay {left:-30px;  bottom:44px; animation-delay:2.6s}
.fl--pay b{color:#08BA98; font-size:17px; letter-spacing:-.4px}
.fl--rem {right:286px; top:-22px;   animation-delay:4.0s}

@media (max-width:1100px){
  .hero__copy h1{font-size:40px; letter-spacing:-1.5px}
  .hero--v2 .devices{width:100%}
  .hero--v2 .dv{margin-right:150px}
  /* Scaled, not resized: shrinking the frame while its screen keeps the
     desktop type sizes pushed the service list and the Book now button off
     the bottom of the phone. A transform takes the contents with it. */
  .hero--v2 .ph{transform:scale(.78); transform-origin:100% 100%}
  .fl--rem{display:none}
  /* At this width the booking card landed on the first appointment column;
     the empty half of the calendar below it is the only clear space left. */
  .fl--book{left:-24px; top:auto; bottom:124px}
  .fl--pay{left:-10px; bottom:40px}
}
@media (max-width:900px){
  /* Below this the composition cannot hold both devices and the cards without
     them landing on each other, so it reduces to the desktop window alone. */
  .hero--v2 .dv{margin-right:0}
  .hero--v2 .ph,.fl{display:none}
}

/* ══ Appointment calendar, animated ═════════════════════════
   A rebuild of the product's Calendar screen, replacing the flat screenshot
   that used to sit in this section. One 15s cycle: the day fills, a booking is
   dragged from one stylist to another, it gets checked in and paid, and a new
   booking lands. Row height and column count are the only magic numbers — the
   cards are positioned off them with calc() so the two cannot drift apart. */
.cal{
  --row:46px;            /* one hour */
  --time:78px;           /* time gutter — must hold "10:00 AM" on one line */
  --cyc:15s;             /* the whole loop */
  display:grid; grid-template-columns:186px 1fr;
  background:#fff; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid rgba(37,48,83,.07);
  box-shadow:0 40px 80px -40px rgba(30,38,74,.34), 0 12px 28px -18px rgba(30,38,74,.12);
}
.cal svg{width:15px; height:15px; flex:0 0 auto}

/* ── Rail ─────────────────────────────────────────────────── */
.cal__side{background:#fff; border-right:1px solid var(--line-w); padding:18px 12px 20px}
.cal__brand{padding:0 10px 16px}
.cal__brand b{display:block; font-family:var(--font-display); font-size:16px; color:var(--blue); letter-spacing:-.4px}
.cal__brand span{font-size:10.5px; color:var(--ink-soft)}
.cal__rail{display:grid; gap:1px}
.cal__nv{
  display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:8px;
  font-size:12px; font-weight:500; color:var(--ink-soft);
}
.cal__nv svg{color:#9AA1B6}
.cal__nv.is-on{background:var(--blue-tint); color:var(--blue); font-weight:700}
.cal__nv.is-on svg{color:var(--blue)}

/* ── Chrome ───────────────────────────────────────────────── */
.cal__main{display:flex; flex-direction:column; min-width:0}
.cal__top{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px; border-bottom:1px solid var(--line-w);
}
.cal__top>b{font-size:13px; color:var(--navy)}
.cal__topr{display:flex; align-items:center; gap:10px; color:var(--ink-soft)}
.cal__loc{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
  border:1px solid var(--line-w); border-radius:8px; padding:5px 9px; color:var(--navy);
}
.cal__ic{position:relative; display:grid; place-items:center; width:26px; height:26px; color:#8A90A6}
.cal__badge{
  position:absolute; top:-2px; right:-2px; background:#E5484D; color:#fff;
  font-style:normal; font-size:8px; font-weight:700; border-radius:999px; padding:1px 4px;
}
.cal__me{
  width:26px; height:26px; border-radius:50%; background:var(--grad); color:#fff;
  display:grid; place-items:center; font-size:10px; font-weight:700;
}

.cal__head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 18px 12px;
}
.cal__head>span:first-child b{display:block; font-family:var(--font-display); font-size:19px; color:var(--navy); letter-spacing:-.7px}
.cal__head>span:first-child em{font-style:normal; font-size:11.5px; color:var(--ink-soft)}
.cal__acts{display:flex; align-items:center; gap:9px}
.cal__cnt{
  background:var(--blue-tint); color:var(--blue); border-radius:999px;
  padding:5px 11px; font-size:11px; font-weight:700;
}
.cal__btn{
  display:inline-flex; align-items:center; gap:6px; background:var(--grad); color:#fff;
  border-radius:8px; padding:7px 12px; font-size:11.5px; font-weight:700;
}
.cal__btn--g{background:#fff; color:var(--ink-soft); border:1px solid var(--line-w)}
.cal__bar{
  display:flex; align-items:center; gap:9px; padding:0 18px 14px; color:var(--ink-soft);
}
.cal__bar b{font-size:13.5px; color:var(--navy); margin-left:4px}
.cal__today{border:1px solid var(--line-w); border-radius:7px; padding:5px 11px; font-size:11.5px; font-weight:600; color:var(--navy)}
.cal__step{
  display:grid; place-items:center; width:24px; height:24px;
  border:1px solid var(--line-w); border-radius:7px; color:var(--ink-soft);
}
.cal__open{
  background:#E6FAF4; color:#07886F; border-radius:999px;
  padding:4px 10px; font-size:10.5px; font-weight:700;
}

/* ── Grid ─────────────────────────────────────────────────── */
.cal__grid{border-top:1px solid var(--line-w)}
.cal__gh{display:grid; grid-template-columns:var(--time) repeat(3,1fr); border-bottom:1px solid var(--line-w)}
.cal__th{
  font-size:10.5px; font-weight:700; color:var(--ink-soft);
  padding:10px 0 10px 14px; border-right:1px solid var(--line-w);
}
.cal__st{display:flex; align-items:center; gap:8px; padding:9px 12px; border-right:1px solid var(--line-w)}
.cal__st:last-child{border-right:0}
.cal__st b{display:block; font-size:12px; color:var(--navy); letter-spacing:-.2px}
.cal__st em{font-style:normal; font-size:9.5px; color:var(--ink-soft)}
.cal__av{
  width:26px; height:26px; border-radius:50%; color:#fff; font-style:normal;
  display:grid; place-items:center; font-size:9.5px; font-weight:700; flex:0 0 auto;
}
.cal__av--p{background:#7C3AED} .cal__av--b{background:#2563EB} .cal__av--g{background:#0E9F6E}

/* The two counts sit on top of each other and swap when the card lands. */
.cal__n,.cal__cnt u{position:relative; display:inline-block; text-decoration:none; min-width:.7em}
.cal__n s,.cal__cnt u s{text-decoration:none}
.cal__n s:last-child,.cal__cnt u s:last-child{position:absolute; left:0; top:0; white-space:nowrap; opacity:0}
.cal__n s:first-child,.cal__cnt u s:first-child{opacity:1}

.cal__body{display:grid; grid-template-columns:var(--time) 1fr; position:relative}
.cal__times{border-right:1px solid var(--line-w)}
.cal__t{
  display:block; height:var(--row); padding-left:14px; position:relative;
  font-size:10.5px; color:var(--navy); font-weight:600;
}
.cal__t i{position:absolute; top:calc(var(--row)/2); left:14px; font-style:normal; font-size:9px; color:#AEB4C6; font-weight:500}
.cal__plane{position:relative}
.cal__cols{display:grid; grid-template-columns:repeat(3,1fr); height:calc(var(--row) * 8)}
.cal__col{
  border-right:1px solid var(--line-w);
  background:
    repeating-linear-gradient(180deg,
      rgba(37,48,83,.08) 0 1px, transparent 1px calc(var(--row)/2),
      rgba(37,48,83,.04) calc(var(--row)/2) calc(var(--row)/2 + 1px), transparent calc(var(--row)/2 + 1px) var(--row));
}
.cal__col:last-child{border-right:0}

/* ── Booking cards ────────────────────────────────────────── */
/* `--c` is the stylist column, `--h` the hour offset from 9am. Positions come
   off the same --row the grid lines do, so a card cannot land between lines. */
.cal__bk{
  position:absolute; left:calc(var(--c) * (100% / 3) + 5px); width:calc(100% / 3 - 10px);
  top:calc(var(--h) * var(--row) + 3px); height:calc(var(--row) - 6px);
  background:#E9FBF3; border-radius:7px; padding:5px 8px 5px 11px; overflow:hidden;
  box-shadow:0 1px 2px rgba(30,38,74,.10); opacity:0;
}
.cal__bkbar{position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--blue); border-radius:7px 0 0 7px}
.cal__bk b{display:block; font-size:10.5px; color:var(--navy); letter-spacing:-.2px; line-height:1.35}
.cal__bk em{font-style:normal; font-size:9px; color:#5C7F73}

.cal__bk--a{--c:2; --h:4; animation:calIn var(--cyc) ease-out infinite .6s, calDrag var(--cyc) cubic-bezier(.3,.9,.3,1) infinite}
.cal__bk--b{--c:2; --h:2; animation:calIn var(--cyc) ease-out infinite 1.2s}
.cal__bk--c{--c:2; --h:7; animation:calIn var(--cyc) ease-out infinite 1.8s}
.cal__bk--d{--c:1; --h:5.5; animation:calIn var(--cyc) ease-out infinite 10.6s}

/* The badges that appear once the booking has been moved and served. */
.cal__chk,.cal__pay{
  position:absolute; top:6px; font-size:8px; font-weight:700; border-radius:5px;
  padding:2px 5px; opacity:0;
}
.cal__chk{right:44px; background:#DCE9FF; color:#1D4ED8; animation:calPop var(--cyc) ease-out infinite 8.4s}
.cal__pay{right:7px;  background:#0E9F6E; color:#fff;    animation:calPop var(--cyc) ease-out infinite 9.2s}

/* Where the card is going: a dashed target that shows up as the drag starts. */
.cal__drop{
  position:absolute; left:5px; width:calc(100% / 3 - 10px);
  top:calc(4 * var(--row) + 3px); height:calc(var(--row) - 6px);
  border:1.5px dashed var(--blue); border-radius:7px; background:rgba(41,77,255,.05);
  opacity:0; animation:calDrop var(--cyc) ease-out infinite 5.1s;
}
.cal__cur{
  position:absolute; width:17px; height:17px; color:var(--navy); opacity:0; z-index:4;
  filter:drop-shadow(0 2px 3px rgba(30,38,74,.35));
  animation:calCur var(--cyc) cubic-bezier(.3,.9,.3,1) infinite;
}
.cal__cur svg{width:17px; height:17px}

@keyframes calIn{
   0%,3%{opacity:0; transform:translateY(-5px) scale(.97)}
   7%,92%{opacity:1; transform:none}
  97%,100%{opacity:0; transform:none}
}
/* The drag itself: lift at 5.4s, cross to column 0, settle at 7.4s. */
@keyframes calDrag{
   0%,34%{left:calc(2 * (100% / 3) + 5px); box-shadow:0 1px 2px rgba(30,38,74,.10); transform:none; z-index:3}
  38%    {left:calc(2 * (100% / 3) + 5px); box-shadow:0 14px 26px -10px rgba(30,38,74,.40); transform:scale(1.035) rotate(-.6deg)}
  49%    {left:calc(0 * (100% / 3) + 5px); box-shadow:0 14px 26px -10px rgba(30,38,74,.40); transform:scale(1.035) rotate(-.6deg)}
  53%,100%{left:calc(0 * (100% / 3) + 5px); box-shadow:0 1px 2px rgba(30,38,74,.10); transform:none; z-index:3}
}
@keyframes calDrop{ 0%,2%{opacity:0} 8%,14%{opacity:1} 20%,100%{opacity:0} }
@keyframes calPop{ 0%,2%{opacity:0; transform:scale(.9)} 6%,84%{opacity:1; transform:none} 90%,100%{opacity:0} }
@keyframes calCur{
   0%,33%{opacity:0; left:calc(2 * (100% / 3) + 60px); top:calc(4 * var(--row) + 30px)}
  35%,37%{opacity:1; left:calc(2 * (100% / 3) + 60px); top:calc(4 * var(--row) + 30px)}
  49%    {opacity:1; left:60px; top:calc(4 * var(--row) + 30px)}
  55%    {opacity:1; left:60px; top:calc(4 * var(--row) + 30px)}
  60%,100%{opacity:0; left:60px; top:calc(4 * var(--row) + 30px)}
}
/* Counts swap on the drop, and the day total ticks when the late booking lands. */
.cal__n--0 s:first-child,.cal__n--2 s:first-child{animation:calNumOut var(--cyc) steps(1) infinite 7.4s}
.cal__n--0 s:last-child, .cal__n--2 s:last-child {animation:calNumIn  var(--cyc) steps(1) infinite 7.4s}
.cal__n--1 s:first-child{animation:calNumOut var(--cyc) steps(1) infinite 11.0s}
.cal__n--1 s:last-child {animation:calNumIn  var(--cyc) steps(1) infinite 11.0s}
.cal__cnt u s:first-child{animation:calNumOut var(--cyc) steps(1) infinite 11.0s}
.cal__cnt u s:last-child {animation:calNumIn  var(--cyc) steps(1) infinite 11.0s}
@keyframes calNumOut{ 0%{opacity:1} 0.1%,92%{opacity:0} 96%,100%{opacity:1} }
@keyframes calNumIn { 0%{opacity:0} 0.1%,92%{opacity:1} 96%,100%{opacity:0} }

/* Below this the eleven-item rail and three columns stop being readable, so
   the rail goes and the type steps down rather than the whole thing scaling. */
@media (max-width:900px){
  .cal{grid-template-columns:1fr; --row:42px; --time:70px}
  .cal__side{display:none}
  .cal__head{flex-wrap:wrap; gap:10px}
  .cal__bar{flex-wrap:wrap}
  .cal__st b{font-size:11px}
  .cal__st em{display:none}
}

/* ══ Small screens ══════════════════════════════════════════
   The header used to be the widest thing on every page: logo, Sign in and
   Start free would not fit under about 426px, and because nothing was allowed
   to shrink, that became a floor the whole document had to honour — every page
   scrolled sideways on a phone. Below 980px the inline links were also just
   display:none, with nothing put in their place. */

.navmenu{display:none; position:relative}
.navmenu > summary{
  list-style:none; cursor:pointer; width:38px; height:38px; flex:0 0 auto;
  display:grid; place-items:center; background:#fff;
  border:1px solid var(--line-w); border-radius:10px;
}
.navmenu > summary::-webkit-details-marker{display:none}
.navmenu > summary::marker{content:''}
.navmenu__bars{display:grid; gap:4px}
.navmenu__bars i{display:block; width:17px; height:2px; border-radius:2px; background:var(--navy)}
.navmenu[open] > summary{border-color:var(--blue); background:var(--blue-tint)}
.navmenu__panel{
  position:absolute; right:0; top:calc(100% + 12px); z-index:60; display:grid;
  min-width:190px; background:#fff; padding:8px;
  border:1px solid var(--line-w); border-radius:14px;
  box-shadow:0 26px 52px -22px rgba(30,38,74,.34);
}
.navmenu__panel a{
  text-decoration:none; color:var(--navy); font-size:14.5px; font-weight:600;
  padding:10px 12px; border-radius:9px; white-space:nowrap;
}
.navmenu__panel a:hover{background:var(--blue-tint); color:var(--blue)}

@media (max-width:980px){
  .navmenu{display:block}
  .nav__signin{display:none}
  .nav__in{gap:14px}
  .nav__logo{margin-right:auto; min-width:0}
  .nav__logo img{max-width:100%}
}

/* ── Vertical rhythm ────────────────────────────────────────
   `section{padding:88px 0}` is right at 1440 and indefensible at 414, where it
   put 176px of nothing between one block and the next — roughly half a phone
   screen of scrolling past empty page. The scale below keeps the same
   proportions at each size instead of the same pixels. */
.sec--tight{padding-top:48px}

/* The plan card is the point of this page; the footnote under it does not need
   the full gap before the questions start. Declared here, above the media
   queries — after them it would outrank its own narrower values. */
#pricing{padding-bottom:64px}

@media (max-width:980px){
  section{padding:64px 0}
  .band{padding:48px 34px}
  .sec--tight{padding-top:34px}
  #pricing{padding-bottom:52px}
  .hero{padding:58px 0 62px}
  .sec-head{margin-bottom:32px}
  .foot{padding-top:52px}
}
@media (max-width:600px){
  section{padding:46px 0}
  .sec--tight{padding-top:24px}
  #pricing{padding-bottom:38px}
  .hero{padding:40px 0 46px}
  .sec-head{margin-bottom:24px}
  .foot{padding-top:40px}
}

/* Five trust items never divide evenly into a fixed column count: a two-column
   grid left one orphan in the last row with a hole beside it, and three left
   two. Centred wrapping puts whatever remains in the middle of its own row,
   which is right at every width. */
@media (max-width:980px){
  .trust__row{display:flex; flex-wrap:wrap; justify-content:center; gap:30px 22px}
  .trust__item{flex:0 1 150px}
}

/* Once the hero stacks, the photograph spans the whole content width — at its
   native 3:2 that put a 470px-tall band of decoration above the copy on a
   tablet. Cropping is better than scrolling past it. */
@media (max-width:980px){
  .heroshot img{aspect-ratio:2/1; object-fit:cover}
}
@media (max-width:600px){
  .heroshot img{aspect-ratio:3/2}
}

/* The calendar cannot shrink to phone width and stay readable: eleven rail
   items and three stylist columns need the space. The rail is already gone at
   900; below 760 the grid keeps a usable minimum and scrolls inside its own
   box rather than widening the page. */
.calwrap{max-width:100%}
.calhint{display:none}
@media (max-width:760px){
  .calscroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius-lg)}
  .cal{min-width:600px}
  /* Without this the grid just looks cropped: nothing on a touch screen says
     the box scrolls. The hint sits outside the aria-hidden artwork because it
     is a real instruction, not part of the picture. */
  .calhint{display:block; margin-top:12px; text-align:center;
    font-size:12px; font-weight:600; color:var(--ink-soft)}
}

/* Dense app screenshots on a phone.
   A 3200px-wide dashboard scaled into a 350px column is texture, not a
   screenshot — nothing in it can be read. Below 700px the frame keeps the
   image at a legible width and scrolls sideways inside itself, the same
   bargain the calendar makes. */
@media (max-width:700px){
  .shot{padding:12px; border-radius:18px; overflow-x:auto; -webkit-overflow-scrolling:touch}
  .shot img{min-width:600px; border-radius:10px}
  .shot::after{content:''}
}

@media (max-width:600px){
  .nav{--logo-h:34px}
  .nav__in{height:70px}
  .shell,.shell--wide{padding:0 18px}

  h1{font-size:31px; letter-spacing:-1.1px}
  h2{font-size:25px; letter-spacing:-.9px}
  .hero__copy h1{font-size:31px; letter-spacing:-1.1px}
  .sec-head p,.lead{font-size:15px}

  /* Decorative, and 700px wide — on its own it pushed the page sideways. */
  .hero__glow{width:100%; right:-30px; height:280px; filter:blur(90px)}

  /* Buttons sat in a nowrap row and ran off the edge; full-width stacked
     buttons are also a larger tap target. */
  .hero__cta,.band__cta{flex-wrap:wrap}
  .hero__cta .btn,.band__cta .btn{flex:1 1 180px; justify-content:center}

  .grid--3,.grid--4,.plans{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr; gap:16px}
  .ticks{gap:9px 16px}
  .ticks li{font-size:12.5px}
  .flag{flex-wrap:wrap; row-gap:2px}

  .band{padding:38px 22px}
  .oneplan__head,.oneplan__feat{padding:28px 22px}
  .oneplan__price b{font-size:44px}
  .stores{gap:9px}
  .shopshot__quote{position:static; max-width:none; margin-top:12px; box-shadow:none;
    border:1px solid var(--line-w)}
}

@media (max-width:600px){
  /* Every selector here is scoped to .hero--v2 deliberately. The desktop
     sizing lives on `.hero--v2 .dv__…` rules, and a bare `.dv__…` override
     loses to them on specificity — which silently dropped the appointment
     grid into the hidden rail's 132px track instead of widening it. */
  .hero--v2 .dv__side{display:none}
  .hero--v2 .dv__body{grid-template-columns:minmax(0,1fr); min-height:200px}
  .hero--v2 .dv__grid{gap:6px; padding:10px 10px 14px}
  .hero--v2 .dv__who{font-size:9.5px; margin-bottom:6px}
  .hero--v2 .dv__apt{padding:6px 7px; margin-bottom:6px; border-left-width:3px; border-radius:7px}
  .hero--v2 .dv__apt b{font-size:9.5px; line-height:1.3}
  .hero--v2 .dv__apt span{font-size:8.5px}
  .hero--v2 .dv__bar{padding:9px 12px}
  .hero--v2 .dv__bar span{font-size:10px}
  .hero--v2 .dv__bar i{width:8px; height:8px}
}

@media (max-width:400px){
  /* Two 180px buttons no longer fit beside each other; let them stack. */
  .hero__cta .btn,.band__cta .btn{flex:1 1 100%}
}


/* Last in the file on purpose: these have to outrank the .fl/.dv__apt rules
   above, which start the elements at opacity:0 and animate them in. Placed any
   earlier they lose on equal specificity and the composition renders blank for
   anyone who has asked their system to stop animation. */
@media (prefers-reduced-motion:reduce){
  .dv__apt,.ph__row,.ph__cta,.fl,.cal__bk,.cal__chk,.cal__pay{animation:none; opacity:1}
  .cal__drop,.cal__cur{animation:none; opacity:0}
  .cal__bk--a{left:calc(0 * (100% / 3) + 5px)}
  .cal__n s:last-child,.cal__cnt u s:last-child{opacity:1}
  .cal__n s:first-child,.cal__cnt u s:first-child{opacity:0}
  .ph__done{animation:none; opacity:0}
}