/* PrimeStart - page styles: home
   The header and hero were rebuilt on 9 September 2026 (rules prefixed hx-,
   first block below): one dark composition carrying the navigation and the
   hero together, the statement on the left, and on the right one small
   business shown three ways - the photograph, the website PrimeStart built
   for it, and that website on a phone. It replaces the photograph wall of
   5 September (hw-), which is gone, and loads no script. Everything from
   "Below the hero" onwards was rebuilt on 4 September and is prefixed hm-.
   Shared rules live in primestart.css; only rules unique to this page here. */

/* ============================================================
   THE HEADER, ON THE HOMEPAGE

   The reference the owner supplied works partly because the navigation is
   not a strip sitting above the hero - it lives inside the same dark
   ground, so the first screen reads as one designed composition.

   The rules that do that moved to primestart.css later on 9 September 2026,
   scoped to body.ps-dark-top, when Pricing, Get Started and the Client
   Platform were given the same opening. The homepage carries that body
   class along with body.home, and nothing about its appearance changed in
   the move. Anything genuinely unique to this page's header would still
   belong here.
   ============================================================ */

/* ---------- the hero ----------
   Dark ground, two columns, and a rail of trades closing it. The ground,
   its two washes and the 3px diagonal grain come from .hero-dark in
   primestart.css; what is left below is only what the homepage does with
   them, starting with the full-screen height no other page takes. */
/* The hero fills the first screen at any window height (owner, 9 September
   2026: "no matter what screen size the client is on the hero takes up the
   screen"). It begins at the very top of the page - the negative margin puts
   it under the sticky header - so 100svh is exactly one screen. svh and not
   vh: on a phone vh is the TALL viewport, which would push the rail down
   behind the browser's own address bar; svh is the part actually visible.
   The statement and the picture absorb the spare height and stay centred in
   it, so the rail lands on the bottom edge whatever the screen. Where the
   content is taller than the screen (phones) min-height simply does nothing. */
.hero-home{
  display:flex;flex-direction:column;
  min-height:100vh;min-height:100svh;
  padding:calc(var(--hdr) + 40px) 0 0;
}
/* flex:1 - the two columns take whatever height is spare and stay centred in
   it, which is what holds the rail against the bottom of the screen */
.hx-top{display:grid;grid-template-columns:minmax(0,1fr) 588px;gap:40px 56px;align-items:center;align-content:center;flex:1 1 auto}

/* the statement. No eyebrow above it (owner, 9 September 2026) - the
   headline opens with the product and the rail below names the audience. */
.hx-h1{
  margin:0 0 20px;max-width:14ch;color:#fff;
  font-size:clamp(40px,4.15vw,58px);font-weight:800;line-height:1.03;letter-spacing:-0.045em;text-wrap:balance;
}
.hx-sub{margin:0 0 26px;max-width:46ch;font-size:18.5px;line-height:1.58;color:var(--on-dark-2);text-wrap:pretty}
.hx-ctas{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* the price, once, under the actions */
.hx-plan{margin:22px 0 0;font-size:15px;line-height:1.5;color:var(--on-dark-muted)}
.hx-plan b{font-family:var(--fh);font-weight:800;font-size:17px;letter-spacing:-0.025em;color:#fff}
.hx-plan i{font-style:normal;color:var(--amber);margin:0 9px}
.hx-plan a{color:var(--on-dark-2);border-bottom:1px solid rgba(255,255,255,.28);transition:color .15s ease,border-color .15s ease}
.hx-plan a:hover{color:#fff;border-bottom-color:var(--amber)}
/* three things that are true. The list itself is .dk-facts in primestart.css,
   shared with the other dark heroes; .hx-facts is kept alongside it purely to
   carry this hero's arrival delay below. */

/* ---- the stage: photograph, website, phone ----
   Three objects on a diagonal. Sizes are held in custom properties so every
   breakpoint moves the whole composition rather than each piece separately. */
.hx-stage{position:relative;min-width:0;height:var(--stage-h,508px);--shot-w:352px;--site-w:378px;--ph-s:1}
.hx-shot{
  position:absolute;right:0;top:0;z-index:1;margin:0;
  width:var(--shot-w);aspect-ratio:4/5;border-radius:20px;overflow:hidden;
  background:#16232F;box-shadow:0 2px 4px rgba(0,0,0,.3),0 40px 70px -34px rgba(0,0,0,.75);
}
.hx-shot::after{content:"";position:absolute;inset:0;border-radius:20px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.hx-shot img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.96) contrast(1.03)}
.hx-site{position:absolute;left:0;bottom:34px;z-index:2;width:var(--site-w)}
.hx-sm{box-shadow:0 3px 8px rgba(0,0,0,.34),0 48px 84px -34px rgba(0,0,0,.8)}
.hx-sm .sm-hero{height:132px}
.hx-sm .sm-hero-copy b{font-size:15px}
.hx-sm .sm-hero-copy p{display:none}
.hx-sm .sm-areas{display:none}
/* the mark sits on the browser's top-left corner rather than across the
   chrome, so the address bar stays readable - it is one of the details that
   makes the frame read as a real website */
.hx-mark{
  position:absolute;left:12px;top:-26px;z-index:3;
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px 7px 9px;border-radius:100px;
  background:var(--white);border:1px solid rgba(18,33,47,.1);
  font-family:var(--fh);font-size:11.5px;font-weight:700;letter-spacing:-0.01em;color:var(--ink);
  box-shadow:0 18px 34px -18px rgba(0,0,0,.7);
}
.hx-mark i{width:14px;height:14px;border-radius:4px;background:var(--orange);position:relative;flex:none}
.hx-mark i::after{content:"";position:absolute;left:5px;top:3px;border-left:5px solid #fff;border-top:4px solid transparent;border-bottom:4px solid transparent}
.hx-phone{position:absolute;right:78px;bottom:-8px;z-index:4;transform:scale(var(--ph-s));transform-origin:bottom right}
/* the mock's screen is a fixed 268px, which its own content overruns once the
   frame is scaled down - the call button was being clipped by overflow:hidden.
   Here it sizes to what is inside it. */
.hx-smp{border-color:#0B1721;box-shadow:0 4px 10px rgba(0,0,0,.4),0 40px 70px -30px rgba(0,0,0,.85)}
.hx-smp .smp-screen{height:auto}
/* The caption hangs below the stage box, not inside its bottom-left corner.
   It shared that corner with the website window, which has z-index 2 over
   it, and the window's footer bar covered the caption's first line -
   "Wrenfold Landscapes, Harrogate. An example business.", the one line on
   this page that has to stay readable, because it is what stops an example
   business being read as a customer. (Measured 9 September 2026: caption
   578-614 against a window ending at 586.)

   top:100% rather than a bigger bottom offset, because five breakpoints
   below set the window's own bottom to 24, 26, 28 or 30px - any figure
   chosen here would have been right at one width and wrong at four. Anchored
   to the stage's own bottom edge, the caption clears the window at every
   width without knowing anything about it. Phones take it out of position
   entirely (see the phone block at the foot of this file). */
.hx-cap{position:absolute;left:0;top:100%;margin:10px 0 0;font-size:12.5px;line-height:1.45;color:var(--on-dark-faint);max-width:30ch}

/* the copy and the three layers arrive once, then rest */
.hx-h1,.hx-sub,.hx-ctas,.hx-plan,.hx-facts{animation:rise .6s cubic-bezier(.2,.7,.3,1) both}
.hx-h1{animation-delay:.05s}
.hx-sub{animation-delay:.1s}
.hx-ctas{animation-delay:.15s}
.hx-plan{animation-delay:.2s}
.hx-facts{animation-delay:.25s}
.js .hx-shot,.js .hx-site,.js .hx-phone,.js .hx-cap{opacity:0;animation:hxLayer .8s var(--ease-out) forwards}
.js .hx-shot{animation-delay:.18s}
.js .hx-site{animation-delay:.36s}
.js .hx-phone{animation-delay:.54s}
.js .hx-cap{animation-delay:.7s}
@keyframes hxLayer{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* the phone carries its own scale, so it needs its own keyframes */
.js .hx-phone{animation-name:hxLayerPh}
@keyframes hxLayerPh{from{opacity:0;transform:scale(var(--ph-s)) translateY(22px)}to{opacity:1;transform:scale(var(--ph-s))}}

/* ---- the rail: who the websites are built for ----
   NOTE the horizontal padding must stay var(--pad): .hx-rail is also a .wrap,
   and writing `padding:20px 0 26px` here silently cancelled the page gutter,
   which put the rail 36px to the left of everything above it. */
.hx-rail{
  display:flex;align-items:center;gap:14px 28px;flex-wrap:wrap;
  margin-top:30px;padding:16px var(--pad) 22px;border-top:1px solid rgba(255,255,255,.13);
}
.hx-rail-t{margin:0;font-family:var(--fh);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-faint);flex:none}
.hx-rail-l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 26px;min-width:0}
.hx-rail-l a{
  font-family:var(--fh);font-size:15px;font-weight:600;letter-spacing:-0.018em;color:var(--on-dark-2);
  border-bottom:1px solid transparent;transition:color .15s ease,border-color .15s ease;
}
.hx-rail-l a:hover{color:#fff;border-bottom-color:var(--amber)}
.hx-all{margin-left:auto;font-size:14.5px;color:var(--on-dark-muted);white-space:nowrap;border-bottom:1px solid rgba(255,255,255,.2);transition:color .15s ease,border-color .15s ease}
.hx-all i{font-style:normal;color:var(--amber)}
.hx-all:hover{color:#fff;border-bottom-color:var(--amber)}

@media (prefers-reduced-motion:reduce){
  .hx-h1,.hx-sub,.hx-ctas,.hx-plan,.hx-facts,
  .js .hx-shot,.js .hx-site,.js .hx-phone,.js .hx-cap{opacity:1;animation:none}
  .js .hx-phone{transform:scale(var(--ph-s))}
}

/* ---- widths ---- */
@media (max-width:1300px){
  .hx-top{grid-template-columns:minmax(0,1fr) 540px;gap:40px 44px}
  .hx-stage{--stage-h:478px;--shot-w:322px;--site-w:352px;--ph-s:.94}
  .hx-phone{right:66px}
}
@media (max-width:1180px){
  .hero-home{padding-top:calc(var(--hdr) + 44px)}
  .hx-top{grid-template-columns:minmax(0,1fr) 476px;gap:36px 38px}
  .hx-h1{font-size:clamp(38px,4vw,50px)}
  .hx-sub{font-size:17.5px;margin-bottom:26px}
  .hx-stage{--stage-h:436px;--shot-w:284px;--site-w:314px;--ph-s:.84}
  .hx-site{bottom:30px}
  .hx-phone{right:52px}
  .hx-sm .sm-hero{height:114px}
}
/* laptops: the composition holds, everything one size down */
@media (min-width:901px) and (max-width:1100px){
  .hero-home{padding-top:calc(var(--hdr) + 34px)}
  .hx-top{grid-template-columns:minmax(0,1fr) 432px;gap:30px 34px}
  .hx-eyebrow{margin-bottom:16px}
  .hx-h1{font-size:clamp(34px,4.1vw,42px);margin-bottom:16px}
  .hx-sub{font-size:16.5px;margin-bottom:22px;max-width:42ch}
  .hx-plan{margin-top:20px;font-size:14.5px}
  .hx-facts{margin-top:18px;padding-top:14px;gap:7px;font-size:14px}
  .hx-stage{--stage-h:396px;--shot-w:256px;--site-w:288px;--ph-s:.76}
  .hx-site{bottom:26px}
  .hx-phone{right:44px}
  .hx-sm .sm-hero{height:100px}
  .hx-mark{left:8px;top:-23px;font-size:10.5px;padding:6px 11px 6px 8px}
  .hx-cap{font-size:12px}
  .hx-rail{margin-top:24px;padding:14px var(--pad) 18px}
  .hx-rail-l{gap:8px 20px}
  .hx-rail-l a{font-size:14px}
}
/* Short windows. min-height cannot shrink a hero below its own content, so on
   a laptop about 650-740px tall the rail was dropping below the fold - the one
   case where "the hero fills the screen" would otherwise fail. Everything
   compresses by a step so the whole composition, rail included, fits. */
@media (min-width:901px) and (max-height:740px){
  .hero-home{padding-top:calc(var(--hdr) + 22px)}
  .hx-h1{font-size:clamp(34px,3.3vw,46px);margin-bottom:14px}
  .hx-sub{font-size:17px;margin-bottom:20px;max-width:44ch}
  .hx-ctas .btn-lg{padding:14px 26px;font-size:16px}
  .hx-plan{margin-top:18px}
  .hx-facts{margin-top:18px;padding-top:14px;gap:7px}
  .hx-stage{--stage-h:392px;--shot-w:262px;--site-w:300px;--ph-s:.78}
  .hx-site{bottom:24px}
  .hx-phone{right:46px}
  .hx-sm .sm-hero{height:100px}
  .hx-sm .sm-areas{display:none}
  .hx-mark{top:-23px;font-size:10.5px;padding:6px 11px 6px 8px}
  .hx-rail{margin-top:20px;padding:13px var(--pad) 16px}
}
/* tablets: the statement sits over the stage, and the stage keeps all three layers */
@media (max-width:900px){
  .hero-home{padding-top:calc(var(--hdr) + 34px)}
  .hx-top{display:block}
  .hx-h1{max-width:16ch}
  .hx-sub{max-width:52ch}
  .hx-stage{margin-top:40px;--stage-h:434px;--shot-w:292px;--site-w:356px;--ph-s:.84}
  .hx-shot{right:4%}
  .hx-site{bottom:28px}
  .hx-phone{right:26%}
  .hx-sm .sm-hero{height:116px}
  .hx-rail{margin-top:34px}
}

/* ============================================================
   THE PHONE (<=640px) - its own composition, not the desktop stacked

   Order, deliberately: what it is, who it is for, the one action, the
   figure, then the picture. The desktop website mock is dropped - at 390px
   its own type would be four pixels tall and it would say nothing - and the
   phone mock takes its place, overlapping the photograph, because the phone
   IS the product a tradesperson's customers hold. The three facts follow
   the picture so the first screen stays uncluttered, and the rail closes
   the hero as a scrollable line of trades.
   ============================================================ */
@media (max-width:640px){
  .hero-home{padding:calc(var(--hdr) + 24px) 0 0}
  /* .hx-lead dissolves so its children become items of .hx-top, which lets
     the three facts sit AFTER the picture without moving them in the markup
     (where they belong beside the offer they qualify). */
  /* gap:0 matters: .hx-top is a grid with gap:40px 64px at every other width,
     and a flex column inherits that row gap onto EVERY child - it was adding
     40px between the headline, the copy, the buttons, the figure and the
     facts, and roughly 240px to the height of the phone hero. */
  .hx-top{display:flex;flex-direction:column;gap:0;text-align:center}
  .hx-lead{display:contents}
  .hx-stage{order:6}
  .hx-facts{order:7}
  .hx-h1{font-size:clamp(30px,8.2vw,36px);line-height:1.06;letter-spacing:-0.038em;max-width:none;margin:0 auto 14px}
  .hx-sub{font-size:16.5px;line-height:1.5;margin:0 auto 20px;max-width:36ch}
  .hx-ctas{flex-direction:column;gap:10px}
  .hx-ctas .btn{width:100%}
  .hx-plan{margin-top:16px;font-size:14.5px}
  .hx-plan i{margin:0 7px}
  .hx-plan b{font-size:16px}

  /* the picture: the photograph, with the site on a phone in front of it */
  .hx-stage{height:auto;margin:24px 0 0;padding-bottom:34px;--ph-s:1}
  .hx-shot{
    position:relative;right:auto;top:auto;width:100%;aspect-ratio:16/11;border-radius:16px;
    box-shadow:0 2px 4px rgba(0,0,0,.3),0 26px 46px -26px rgba(0,0,0,.75);
  }
  .hx-shot::after{border-radius:16px}
  .hx-site{display:none}
  .hx-phone{position:absolute;right:12px;bottom:0;z-index:4;transform:none}
  .hx-smp{width:126px}
  .hx-smp .smp-hero{min-height:88px}
  .hx-smp .smp-rows span:nth-child(3){display:none}
  .hx-cap{position:static;margin:14px 0 0;max-width:26ch;text-align:left;font-size:12.5px}

  /* the three facts come after the picture on a phone */
  .hx-facts{margin:22px 0 0;padding-top:18px;gap:9px;max-width:none;text-align:left}

  .hx-rail{
    margin-top:20px;padding:16px var(--pad) 20px;gap:10px 0;
    flex-direction:column;align-items:flex-start;
  }
  .hx-rail-t{font-size:11px}
  .hx-rail-l{
    display:flex;flex-wrap:nowrap;gap:0 20px;width:100%;
    margin:0 calc(var(--pad) * -1);padding:2px var(--pad) 6px;
    overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .hx-rail-l::-webkit-scrollbar{display:none}
  .hx-rail-l li{flex:none}
  .hx-rail-l a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
  .hx-all{margin-left:0;white-space:normal;display:inline-flex;align-items:center;min-height:44px;border-bottom:0;color:var(--on-dark-2)}
}
@media (max-width:359px){
  .hx-h1{font-size:29px}
  .hx-smp{width:112px}
}

/* ============================================================
   Below the hero: rebuilt 4 September 2026 to the About / Websites /
   SEO standard. Editorial statements, hairline ledgers, one
   dark band (SEO, about the work), a Client Platform composition,
   the two prices once. Everything is prefixed hm-. The phone
   composition (<=640px) sits at the end of this file.
   ============================================================ */

/* ---------- shared pieces ---------- */
.hm-statement{text-wrap:balance}
.hm-plans-head,.hm-ind-head,.hm-work-head,.hm-own-head,.hm-what-head{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:end;margin-bottom:56px}
.hm-plans-head h2,.hm-ind-head h2,.hm-work-head h2,.hm-own-head h2,.hm-what-head h2{max-width:20ch;text-wrap:balance}
.hm-plans-head .lede,.hm-ind-head .lede,.hm-work-head .lede,.hm-own-head .lede,.hm-what-head .lede{padding-bottom:6px;max-width:46ch}
.hm-n{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none;
  background:#FBEBDD;border:1px solid rgba(217,98,14,.28);color:var(--orange-dk);
  font-family:var(--fh);font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;
}
.hm-ticks{list-style:none;margin:0;padding:0;display:grid}
.hm-ticks li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line);font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.hm-ticks li:last-child{border-bottom:1px solid var(--line)}
.hm-ticks .tick{margin-top:3px}

/* ---------- 1. the two plans, once ---------- */
/* The two plans, row for row. Subgrid makes the price, the three lines,
   the facts and the actions sit on the same baselines in both columns, so
   the comparison reads as one object rather than two stacks (owner,
   5 September 2026: "i don't mind it side to side but it could be neater"). */
/* SIX rows, not five. Each column holds the label, the question, the price,
   the three lines, the facts and the actions - six children. The one-line
   question (.hm-sum-need) was added on 9 September 2026 without widening the
   track list, so the sixth child fell into an implicit row the parent grid
   knew nothing about and the buttons were drawn on top of the minimum-term
   line. If another row is ever added to a plan column, this count and the
   span below both have to move with it. */
.hm-sum{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto auto auto;gap:0 72px;border-top:2px solid var(--ink)}
.hm-sum-col{display:grid;grid-template-rows:subgrid;grid-row:1 / span 6;align-content:start;padding:28px 0 0;position:relative}
.hm-sum-col + .hm-sum-col::before{content:"";position:absolute;left:-36px;top:0;bottom:0;width:1px;background:var(--line)}
/* Three plans from 8 September 2026. The subgrid rows are what keep the price,
   the three lines, the facts and the actions on the same baselines whatever
   the cards contain, so a third column costs nothing structurally — only the
   gap and the figure size have to come in to make room. */
.hm-sum-3{grid-template-columns:repeat(3,1fr);gap:0 44px}
.hm-sum-3 .hm-sum-col + .hm-sum-col::before{left:-22px}
.hm-sum-3 .hm-sum-price b{font-size:clamp(34px,3.4vw,44px)}
.hm-sum-k{font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-dk);margin:0}
.hm-sum-price{display:flex;align-items:baseline;gap:10px;margin:14px 0 0}
.hm-sum-price b{font-family:var(--fh);font-size:clamp(44px,4.6vw,60px);font-weight:800;letter-spacing:-0.055em;line-height:.95;color:var(--ink)}
.hm-sum-price span{font-size:15px;color:var(--muted)}
.hm-sum-three{margin:26px 0 0;display:grid;align-content:start}
.hm-sum-three > div{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:15px 0;border-top:1px solid var(--line)}
.hm-sum-three dt{font-family:var(--fh);font-size:16.5px;font-weight:700;letter-spacing:-0.025em;color:var(--ink);line-height:1.3}
.hm-sum-three dd{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.hm-sum-facts{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);align-self:start}
.hm-sum-facts li{position:relative;padding:11px 0 11px 22px;border-bottom:1px solid var(--line);font-family:var(--fh);font-size:14.5px;font-weight:600;letter-spacing:-0.015em;line-height:1.45;color:var(--ink)}
.hm-sum-facts li::before{content:"";position:absolute;left:2px;top:19px;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.hm-sum-ctas{margin-top:26px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;align-self:end}
.hm-plans-foot{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);font-size:15px;line-height:1.6;color:var(--muted);max-width:70ch}

/* ---------- 1. what you get (5 September 2026) ----------
   The proposition is the design: three rows, one job each, the verb phrase
   large on the left and a single line beside it. It replaced a two-column
   ledger that read as a wall of text. */
.hm-what .eyebrow{margin-bottom:34px}
.hm-triple{list-style:none;margin:0;padding:0;counter-reset:hmt}
.hm-triple li{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:20px 56px;align-items:baseline;
  padding:34px 0;border-top:1px solid var(--line);
}
.hm-triple li:last-child{border-bottom:1px solid var(--line)}
.hm-triple b{
  font-family:var(--fh);font-size:clamp(30px,4vw,50px);font-weight:800;letter-spacing:-0.045em;
  line-height:1.03;color:var(--ink);position:relative;padding-left:52px;display:block;
}
.hm-triple b::before{
  counter-increment:hmt;content:counter(hmt);
  position:absolute;left:0;top:.22em;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;background:#FBEBDD;border:1px solid rgba(217,98,14,.28);
  font-size:13px;font-weight:800;letter-spacing:0;color:var(--orange-dk);font-variant-numeric:tabular-nums;
}
.hm-triple li:last-child b{color:var(--orange-dk)}
.hm-triple span{display:block;font-size:17px;line-height:1.65;color:var(--muted);max-width:46ch}
.hm-what-foot{
  margin:40px 0 0;font-family:var(--fh);font-size:17px;font-weight:700;
  letter-spacing:-0.025em;color:var(--ink);
}
.hm-what-foot .link-u{margin-left:14px;font-family:var(--fb);font-size:15.5px;font-weight:400;letter-spacing:0}
@media (max-width:900px){
  .hm-triple li{grid-template-columns:1fr;gap:14px;padding:26px 0}
  .hm-what-foot{margin-top:30px}
  .hm-what-foot .link-u{display:block;margin:12px 0 0}
}
@media (max-width:640px){
  .hm-what .eyebrow{margin-bottom:24px}
  .hm-triple li{padding:22px 0}
  .hm-triple b{padding-left:42px}
  .hm-triple b::before{width:26px;height:26px;font-size:12px}
  .hm-triple span{font-size:16px;max-width:none}
  .hm-what-foot{font-size:16px}
}
.hm-ind-head h2{max-width:15ch}
.hm-strip{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.hm-ind-foot{margin-top:36px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.hm-ind-foot p{color:var(--muted);font-size:15.5px;line-height:1.6;max-width:62ch;margin:0}

/* ---------- 3. the websites ---------- */
.hm-work-head h2{max-width:16ch}
.hm-work-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px 40px}
.hm-work-more{margin-top:40px;padding-top:22px;border-top:1px solid var(--line)}

/* ---------- 4. how it works ---------- */
.hm-how-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}
.hm-how-copy{position:sticky;top:110px}
.hm-how-copy h2{max-width:12ch}
.hm-how-copy > p:not(.eyebrow):not(.hm-how-promise):not(.hm-how-more){margin-top:20px;font-size:17px;line-height:1.65;color:var(--muted);max-width:44ch}
.hm-how-promise{margin-top:22px;padding:18px 0 0;border-top:1px solid var(--line);font-size:15.5px;line-height:1.6;color:var(--muted);max-width:44ch}
.hm-how-promise b{display:block;font-family:var(--fh);font-size:17px;font-weight:700;letter-spacing:-0.025em;color:var(--ink);margin-bottom:4px}
.hm-how-more{margin-top:22px}
.hm-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.hm-steps li{display:grid;grid-template-columns:34px 1fr auto;gap:22px;align-items:start;padding:24px 0;border-bottom:1px solid var(--line)}
.hm-steps b{display:block;font-family:var(--fh);font-size:20px;font-weight:700;letter-spacing:-0.03em;line-height:1.25;color:var(--ink)}
.hm-steps em{display:block;font-style:normal;margin-top:7px;font-size:15.5px;line-height:1.55;color:var(--muted);max-width:44ch}
.hm-who{font-style:normal;font-family:var(--fh);font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding-top:8px;white-space:nowrap}
.hm-steps li.is-key .hm-n{background:var(--orange);border-color:var(--orange);color:#fff}
.hm-steps li.is-key .hm-who{color:var(--orange-dk)}

/* ---------- 5. the Client Platform ---------- */
.hm-platform-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}
.hm-platform-copy h2{max-width:15ch;text-wrap:balance}
.hm-platform-copy .lede{margin-top:20px;max-width:46ch}
.hm-platform-copy .hm-ticks{margin-top:28px;max-width:46ch}
.hm-platform-more{margin-top:24px}
.hm-platform-art{display:flex;justify-content:center}
.hm-phone{
  width:300px;padding:12px;border-radius:40px;background:var(--ink);position:relative;
  box-shadow:0 40px 80px -40px rgba(18,33,47,.6),inset 0 0 0 2px rgba(255,255,255,.08);
}
.hm-phone::before{content:"";position:absolute;left:50%;top:12px;width:88px;height:24px;border-radius:0 0 14px 14px;background:var(--ink);transform:translateX(-50%);z-index:3}
.hm-dash{background:var(--paper);border-radius:30px;padding:44px 16px 16px;color:var(--ink);overflow:hidden;min-height:540px;display:flex;flex-direction:column}
.hm-dash-top{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--muted)}
.hm-dash-logo{display:flex;align-items:center;gap:6px;font-family:var(--fh);font-weight:800;font-size:13px;letter-spacing:-0.04em;color:var(--ink)}
.hm-dash-logo i{width:16px;height:16px;border-radius:5px;background:var(--orange);display:inline-block;position:relative}
.hm-dash-logo i::after{content:"";position:absolute;left:6px;top:4px;border-left:5px solid #fff;border-top:4px solid transparent;border-bottom:4px solid transparent}
.hm-dash-hello{margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.hm-dash-hello b{font-family:var(--fh);font-size:18px;font-weight:800;letter-spacing:-0.035em}
.hm-dash-stage{font-family:var(--fh);font-size:11px;font-weight:700;color:var(--orange-dk);background:var(--wash);border-radius:100px;padding:4px 9px;white-space:nowrap}
.hm-thread{margin-top:16px;display:grid;gap:8px}
.hm-msg{position:relative;padding:10px 12px 11px;border-radius:12px;max-width:88%;font-size:12.5px;line-height:1.45}
.hm-msg p{margin:0}
.hm-msg-who{display:block;font-family:var(--fh);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.hm-msg-ps{background:var(--white);border:1px solid var(--line);border-bottom-left-radius:4px;color:var(--ink-2)}
.hm-msg-you{background:var(--ink);color:#E7EDF3;justify-self:end;border-bottom-right-radius:4px}
.hm-msg-you .hm-msg-who{color:#9DB0BF}
.hm-dash-actions{margin-top:14px;display:flex;gap:6px;flex-wrap:wrap}
.hm-dash-actions span{font-family:var(--fh);font-size:11.5px;font-weight:700;padding:9px 12px;border-radius:100px;background:var(--white);border:1px solid var(--line);color:var(--ink)}
.hm-dash-actions span.pri{background:var(--orange);border-color:var(--orange);color:#fff}
.hm-dash-nav{margin-top:auto;padding-top:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;border-top:1px solid var(--line)}
.hm-dash-nav span{text-align:center;font-family:var(--fh);font-size:10.5px;font-weight:700;color:var(--muted);padding:6px 0}
.hm-dash-nav span.on{color:var(--orange-dk)}

/* ---------- 6. SEO: the work (dark) ---------- */
.hm-growth{padding:112px 0}
.hm-growth-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.hm-growth-copy h2{color:#fff;max-width:14ch;text-wrap:balance}
.hm-growth-copy > p:not(.eyebrow):not(.hm-searches-note){margin-top:20px;font-size:17px;line-height:1.65;color:var(--on-dark-muted);max-width:48ch}
.hm-searches{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.2);max-width:40ch}
.hm-searches li{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12);font-family:var(--fh);font-size:19px;font-weight:600;letter-spacing:-0.028em;line-height:1.2}
.hm-searches svg{color:var(--amber);flex:none;opacity:.9}
.hm-s{color:#fff}
.hm-p{color:var(--amber)}
.hm-searches-note{margin-top:16px;font-size:14px;line-height:1.55;color:var(--on-dark-muted);max-width:40ch}
.hm-growth-k{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin:6px 0 0;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.2)}
.hm-growth-ledger{margin:0;display:grid}
.hm-growth-ledger > div{display:grid;grid-template-columns:170px 1fr;gap:20px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.hm-growth-ledger dt{font-family:var(--fh);font-size:15.5px;font-weight:700;letter-spacing:-0.022em;color:#fff;line-height:1.3}
.hm-growth-ledger dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--on-dark-muted)}
.hm-growth-note{margin-top:18px;font-size:14.5px;line-height:1.6;color:var(--on-dark-muted);max-width:48ch}
.hm-growth-ctas{margin-top:26px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hm-more{font-family:var(--fh);font-size:15px;font-weight:700;letter-spacing:-0.02em;color:#fff}
.hm-more i{font-style:normal;color:var(--amber);display:inline-block;transition:transform .2s var(--ease)}
.hm-more:hover i{transform:translateX(4px)}

/* ---------- 7. ownership after the term ---------- */
.hm-own-head h2{max-width:16ch}
.hm-own-rail{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px;position:relative}
.hm-own-rail li{position:relative;padding-top:24px;border-top:2px solid var(--line)}
.hm-own-rail li::before{content:"";position:absolute;left:0;top:-2px;width:44px;height:2px;background:var(--orange)}
.hm-own-rail li.is-key{border-top-color:var(--orange)}
.hm-own-rail li.is-key::before{width:100%}
.hm-own-when{display:block;font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hm-own-rail li.is-key .hm-own-when{color:var(--orange-dk)}
.hm-own-rail b{display:block;margin-top:12px;font-family:var(--fh);font-size:20px;font-weight:700;letter-spacing:-0.03em;line-height:1.2;color:var(--ink)}
.hm-own-rail p{margin-top:10px;font-size:15px;line-height:1.55;color:var(--muted)}
.hm-own-note{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:14px;line-height:1.6;color:var(--muted);max-width:78ch}

/* ---------- 8. you run your business ---------- */
.hm-diy-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}
.hm-diy-copy h2{max-width:14ch;text-wrap:balance}
.hm-diy-copy > p:not(.eyebrow):not(.hm-diy-close){margin-top:20px;font-size:17px;line-height:1.65;color:var(--muted);max-width:40ch}
.hm-diy-close{margin-top:32px;padding-top:26px;border-top:1px solid var(--line);font-family:var(--fh);font-size:clamp(26px,2.6vw,34px);font-weight:800;letter-spacing:-0.04em;line-height:1.1;color:var(--ink);max-width:14ch}
.hm-diy-close span{color:var(--orange)}
.hm-diy-table{border-top:1px solid var(--ink)}
.hm-diy-row{display:grid;grid-template-columns:1fr 1fr;gap:32px;padding:18px 0;border-bottom:1px solid var(--line)}
.hm-diy-row span{font-size:15.5px;line-height:1.55}
.hm-diy-row span:first-child{color:var(--muted)}
.hm-diy-row span:last-child{color:var(--ink);font-family:var(--fh);font-weight:600;letter-spacing:-0.018em}
.hm-diy-th{padding:14px 0}
.hm-diy-th span{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.3}
.hm-diy-th span:first-child{color:var(--muted)}
.hm-diy-th span:last-child{color:var(--orange-dk)}

/* ---------- 9. wherever your business is ---------- */
.hm-locs-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:center}
.hm-locs-copy > p:not(.eyebrow):not(.hm-locs-links){margin-top:16px;color:var(--muted);font-size:16.5px;line-height:1.6;max-width:46ch}
.hm-locs-links{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap;align-items:baseline;font-family:var(--fh);font-weight:700;font-size:15.5px;letter-spacing:-0.02em}
.hm-locs-links span{color:var(--muted)}
.hm-postcards{grid-template-columns:repeat(2,1fr);gap:16px;width:100%;max-width:520px;justify-self:end}
.hm-postcards .loc-postcard:nth-child(2),.hm-postcards .loc-postcard:nth-child(4){transform:translateY(22px)}

/* ---------- 10. questions ---------- */
.hm-faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start}
.hm-faq-head{position:sticky;top:110px}
.hm-faq-head h2{max-width:12ch;text-wrap:balance}
.hm-faq-head .lede{margin-top:18px;max-width:34ch}
.hm-faq-more{margin-top:22px}
.hm-faq-talk{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);font-size:15px;line-height:1.6;color:var(--muted);max-width:34ch}
.hm-faq-talk a{font-family:var(--fh);font-weight:700;color:var(--ink);letter-spacing:-0.02em}
.hm-faq-talk a:hover{color:var(--orange-dk)}
.hm-faq .faq-list{border-top:1px solid var(--line)}

/* ---------- 11. final ---------- */
.hm-final h2{max-width:17ch;text-wrap:balance}
.hm-final p{color:#A3B5C4;font-size:19px;max-width:48ch;margin:0 auto 38px}

/* ============================================================
   Responsive: laptop and tablet
   ============================================================ */
@media (max-width:1180px){
  .hm-sum{gap:0 48px}
  .hm-sum-col + .hm-sum-col::before{left:-24px}
  .hm-own-rail{gap:0 24px}
}
@media (max-width:1040px){
  .hm-plans-head,.hm-ind-head,.hm-work-head,.hm-own-head,.hm-what-head{grid-template-columns:1fr;gap:14px;margin-bottom:40px}
  .hm-plans-head h2,.hm-ind-head h2,.hm-work-head h2,.hm-own-head h2,.hm-what-head h2{max-width:22ch}
  .hm-how-grid,.hm-platform-grid,.hm-growth-grid,.hm-diy-grid,.hm-locs-grid,.hm-faq-grid{grid-template-columns:1fr;gap:44px}
  .hm-how-copy,.hm-faq-head{position:static}
  .hm-platform-art{order:2}
  .hm-strip{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .hm-own-rail{grid-template-columns:1fr 1fr;gap:32px 28px}
  .hm-postcards{max-width:none;justify-self:stretch}
  .hm-postcards .loc-postcard:nth-child(2),.hm-postcards .loc-postcard:nth-child(4){transform:none}
  .hm-growth{padding:88px 0}
}

/* Tablet band (901-1040px): a heading stays beside its own lede.
   These splits are text next to text, so collapsing them at 1040 added
   height to every section for no gain. Restored to 900px, then genuinely
   stacked below. Placed here, not at the end of the file, so the phone
   rules further down still win at <=640px. Heroes are excluded: frozen. */
@media (max-width:1040px){
  .hm-plans-head,.hm-ind-head,.hm-work-head,.hm-own-head,.hm-what-head{grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:40px}
}
@media (max-width:900px){
  .hm-plans-head,.hm-ind-head,.hm-work-head,.hm-own-head,.hm-what-head{grid-template-columns:1fr;gap:14px;align-items:start;margin-bottom:40px}
}
@media (max-width:820px){
  .hm-sum{grid-template-columns:1fr;grid-template-rows:none;gap:0}
  /* the subgrid alignment is a desktop idea: on one column it would keep both
     plans inside the first row band and push the second off the screen. */
  .hm-sum-col{display:block;grid-row:auto}
  .hm-sum-col + .hm-sum-col{margin-top:40px;border-top:2px solid var(--ink)}
  .hm-sum-col + .hm-sum-col::before{display:none}
  .hm-work-grid{grid-template-columns:1fr;gap:40px}
  .hm-sum-three > div{grid-template-columns:130px 1fr;gap:16px}
  .hm-growth-ledger > div{grid-template-columns:140px 1fr;gap:16px}
}

/* ============================================================
   Phone composition (<=640px), rebuilt 5 September 2026.

   Measured, not guessed. The page ran 14,180px at 390px because desktop
   compositions had been stacked rather than reshaped: two full plans one
   under the other, a 628px device mock-up, two long ledgers. Every
   section below is given the shape that suits a phone, and not one
   sentence leaves the document.

     hero        its own composition: see the phone block of the hx- rules
     what        the three statements, tightened
     industries  the eight trades swiped
     work        the two websites swiped
     how         four compact steps
     platform    the dashboard cropped rather than shrunk
     growth      the five kinds of monthly work as named rows to open
     plans       two complete plan cards, one swipe apart, each with its
                 three lines as named rows to open
     ownership   the four stages of the term as named rows to open
     diy         label over value, one comparison per row
     locations   all four places, swiped
     faq         the six questions, tighter
     final       one action

   Every accordion here is a structured group whose heading is always
   visible, built by site.js module 5 at <=640px only. Without
   JavaScript each one renders as the plain hairline list it already was,
   so nothing depends on the script.
   ============================================================ */
@media (max-width:640px){

  /* ---------- one rhythm and one heading scale for the page ----------
     The compound selectors (.hm-what.sec) are deliberate: mobile.css is
     enqueued after this file, so a bare .sec would lose to it. */
  .hm-what.sec,.hm-ind.sec,.hm-work.sec,.hm-how.sec,.hm-platform.sec,
  .hm-plans.sec,.hm-own.sec,.hm-diy.sec,.hm-faq.sec{padding:40px 0}
  .hm-growth.sec{padding:44px 0}
  .hm-locs.sec-sm{padding:32px 0}
  .hm-final.final{padding:44px 0}

  .hm-plans-head h2,.hm-ind-head h2,.hm-work-head h2,.hm-own-head h2,
  .hm-how-copy h2,.hm-platform-copy h2,.hm-growth-copy h2,.hm-diy-copy h2,
  .hm-faq-head h2{font-size:clamp(23px,6.2vw,26px);line-height:1.14;letter-spacing:-0.032em;max-width:none}
  .hm-plans-head,.hm-ind-head,.hm-work-head,.hm-own-head{margin-bottom:18px;gap:8px}
  .hm-plans-head .lede,.hm-ind-head .lede,.hm-work-head .lede,
  .hm-own-head .lede{font-size:15.5px;line-height:1.5;max-width:none;padding-bottom:0}

  /* Every link that stands on its own line is a 44px target. Links that sit
     inside a sentence (the pricing-page link in the plans footnote, the terms
     link in the ownership note, the industry line on a project card) keep the
     line height of the prose around them: WCAG exempts a target that is part
     of a block of text, and padding them out would break the paragraph. */
  .hm-what-foot .link-u,.hm-work-more .link-u,.hm-how-more .link-u,
  .hm-platform-more .link-u,.hm-faq-more .link-u,
  .hm-sum-ctas .link-u,.hm-locs-links .link-u,
  .hm-ind-foot .link-u,.hm-more{display:inline-flex;align-items:center;min-height:44px}

  /* the three strips share their scrolling behaviour */
  .hm-strip,.hm-work-grid,.hm-sum,.hm-postcards{
    display:flex;flex-wrap:nowrap;overflow-x:auto;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    scroll-padding:0 var(--pad);scrollbar-width:none;
    margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);
  }
  .hm-strip::-webkit-scrollbar,.hm-work-grid::-webkit-scrollbar,
  .hm-sum::-webkit-scrollbar,.hm-postcards::-webkit-scrollbar{display:none}

  /* ---------- 1. what you get ---------- */
  .hm-what .eyebrow{margin-bottom:14px}
  .hm-triple li{padding:15px 0;gap:8px}
  .hm-triple b{font-size:28px;padding-left:38px;line-height:1.04}
  .hm-triple b::before{width:25px;height:25px;font-size:11.5px;top:.1em}
  .hm-triple span{font-size:15.5px;line-height:1.55;max-width:none}
  .hm-what-foot{margin-top:18px;font-size:15.5px}
  .hm-what-foot .link-u{margin:4px 0 0;font-size:15px}

  /* ---------- 2. built around your business ---------- */
  .hm-ind-head{margin-bottom:16px}
  .hm-strip{gap:10px;padding:2px var(--pad) 8px}
  .hm-strip .istrip-item{flex:0 0 56%;max-width:230px;scroll-snap-align:start}
  .hm-ind-foot{margin-top:14px;padding-top:12px;flex-direction:column;align-items:stretch;gap:10px}
  .hm-ind-foot p{font-size:14.5px;line-height:1.5}
  .hm-ind-foot .btn{width:100%}

  /* ---------- 3. the websites: both, one swipe apart ---------- */
  .hm-work-grid{gap:12px;padding:2px var(--pad) 8px}
  .hm-work-grid .project{flex:0 0 84%;max-width:340px;scroll-snap-align:start}
  .hm-work-grid .project-meta{margin-top:13px}
  .hm-work-grid .project-name{font-size:18px}
  .hm-work-grid .project-ind{margin-top:1px;font-size:14px}
  .hm-work-grid .project-sum{margin-top:7px;font-size:14.5px;line-height:1.45;max-width:none}
  .hm-work-grid .project-foot{margin-top:8px;gap:10px}
  .hm-work-more{margin-top:14px;padding-top:12px}

  /* ---------- 4. how it works ---------- */
  .hm-how-grid{gap:20px}
  .hm-how-copy > p:not(.eyebrow):not(.hm-how-promise):not(.hm-how-more){font-size:15.5px;line-height:1.55;margin-top:10px;max-width:none}
  .hm-how-promise{margin-top:12px;padding-top:12px;font-size:14.5px;line-height:1.5;max-width:none}
  .hm-how-promise b{font-size:16px;margin-bottom:2px}
  .hm-how-more{margin-top:8px}
  .hm-steps li{grid-template-columns:28px 1fr;gap:2px 12px;padding:11px 0}
  .hm-steps .hm-n{width:28px;height:28px;font-size:12.5px;grid-row:1/3}
  .hm-steps b{font-size:16.5px}
  .hm-steps em{font-size:14.5px;line-height:1.42;margin-top:3px;max-width:none}
  .hm-who{grid-column:2;padding-top:2px;font-size:11.5px}

  /* ---------- 5. the Client Platform ----------
     The dashboard is cropped rather than scaled down: the screen inside
     stays legible at its own size and the device runs off the bottom of
     its frame, the way the conversation carries on below. */
  .hm-platform-grid{gap:20px}
  .hm-platform-copy .lede{font-size:15.5px;line-height:1.5;margin-top:10px;max-width:none}
  .hm-platform-copy .hm-ticks{margin-top:16px;max-width:none}
  .hm-ticks li{font-size:15px;line-height:1.45;padding:7px 0;gap:10px}
  .hm-platform-more{margin-top:14px}
  .hm-platform-art{
    order:2;align-items:flex-start;height:300px;overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,#000 86%,rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(180deg,#000 86%,rgba(0,0,0,0) 100%);
  }
  .hm-phone{width:min(262px,82%);padding:10px;border-radius:34px}
  .hm-phone::before{width:76px;height:20px}
  .hm-dash{min-height:0;padding:26px 13px 13px;border-radius:26px}
  .hm-dash-hello{margin-top:14px}
  .hm-thread{margin-top:13px;gap:6px}
  .hm-msg{font-size:11.5px;padding:8px 10px 9px}

  /* ---------- 6. SEO: the work (dark) ---------- */
  .hm-growth-grid{gap:22px}
  .hm-growth-copy > p:not(.eyebrow):not(.hm-searches-note){font-size:15.5px;line-height:1.55;margin-top:10px;max-width:none}
  .hm-searches{margin-top:18px;max-width:none}
  .hm-searches li{font-size:16.5px;padding:8px 0}
  .hm-searches-note{margin-top:12px;font-size:14px;line-height:1.5;max-width:none}
  .hm-growth-k{margin-top:0;padding-bottom:10px}
  /* without the script: one sentence a row. With it: five named rows. */
  .hm-growth-ledger > div{display:block;padding:9px 0;font-size:14.5px;line-height:1.5}
  .hm-growth-ledger dt{display:inline;font-size:15px}
  .hm-growth-ledger dt::after{content:". "}
  .hm-growth-ledger dd{display:inline;font-size:14.5px}
  .hm-growth-ledger.m-acc{border-top:0}
  .hm-growth-ledger.m-acc > .m-acc-item{border-bottom-color:rgba(255,255,255,.12)!important}
  .hm-growth-ledger.m-acc dt{display:block;font-size:inherit}
  .hm-growth-ledger.m-acc dt::after{content:none}
  .hm-growth-ledger.m-acc dd{display:block;font-size:14.5px;line-height:1.5;color:var(--on-dark-muted)}
  .hm-growth-ledger .m-acc-btn{color:#fff;font-size:15.5px;min-height:46px;padding:11px 0}
  .hm-growth-ledger .m-acc-chev{border-right-color:var(--amber);border-bottom-color:var(--amber)}
  .hm-growth-ledger .m-acc-panel{padding:0 0 12px}
  .hm-growth-note{margin-top:14px;font-size:14px;line-height:1.55;max-width:none}
  .hm-growth-ctas{margin-top:18px;gap:12px}
  .hm-growth-ctas .btn{width:100%}

  /* ---------- 7. choose your plan ----------
     Two complete plans, one swipe apart, instead of two stacks nearly
     three screens long. Each card keeps its price, its three lines, its
     terms and its action; the second card's edge is always in view. */
  .hm-plans-head{margin-bottom:12px}
  /* the generic swipe instruction is replaced by .hm-sum-hint below */
  .hm-sum{gap:12px;padding:4px var(--pad) 10px;border-top:0}
  .hm-sum-col{
    flex:0 0 87%;max-width:340px;scroll-snap-align:start;
    display:block;padding:18px 17px 20px;margin:0;
    border:1px solid var(--line);border-top:3px solid var(--ink);border-radius:14px;
    background:var(--white);
  }
  /* Was `.hm-sum-col + .hm-sum-col`, which meant "every card after the first"
     — fine while there were two, but with three it gave the orange treatment
     to standalone SEO as well and the section stopped saying which card is the
     one with everything in it. Named explicitly instead. */
  .hm-sum-growth{margin-top:0;border-top:3px solid var(--orange);background:var(--wash)}
  .hm-sum-col + .hm-sum-col{margin-top:0}
  .hm-sum-k{font-size:12px}
  .hm-sum-price{margin-top:8px}
  .hm-sum-price b{font-size:38px}
  .hm-sum-price span{font-size:14px}
  .hm-sum-three{margin-top:14px}
  .hm-sum-three > div{display:block;padding:9px 0;font-size:14.5px;line-height:1.5}
  .hm-sum-three dt{display:inline;font-size:15px}
  .hm-sum-three dt::after{content:". "}
  .hm-sum-three dd{display:inline;font-size:14.5px}
  .hm-sum-three.m-acc dt{display:block;font-size:inherit}
  .hm-sum-three.m-acc dt::after{content:none}
  .hm-sum-three.m-acc dd{display:block;font-size:14.5px;line-height:1.5;color:var(--muted)}
  .hm-sum-three .m-acc-btn{font-size:15.5px;min-height:46px;padding:11px 0}
  .hm-sum-three .m-acc-panel{padding:0 0 12px}
  .hm-sum-col .hm-sum-facts li{font-size:14.5px;line-height:1.42;padding:9px 0 9px 19px}
  .hm-sum-col .hm-sum-facts li::before{top:16px;width:6px;height:6px}
  .hm-sum-ctas{margin-top:14px;gap:6px}
  .hm-sum-ctas .btn{width:100%}
  .hm-plans-foot{margin-top:16px;padding-top:14px;font-size:14.5px;line-height:1.55}

  /* ---------- 8. ownership after the term ----------
     Four named stages. The headings alone tell the whole story, and each
     one opens on to the detail. */
  .hm-own-head{margin-bottom:14px}
  .hm-own-rail{grid-template-columns:1fr;gap:0}
  .hm-own-rail li{display:grid;grid-template-columns:1fr;padding:12px 0;border-top:1px solid var(--line)}
  .hm-own-rail li::before{display:none}
  .hm-own-rail li.is-key{border-top:1px solid var(--line);background:var(--wash);margin:0 calc(var(--pad) * -1);padding:12px var(--pad)}
  .hm-own-when{font-size:11px;padding-top:0}
  .hm-own-rail b{margin-top:3px;font-size:16.5px}
  .hm-own-rail p{margin-top:5px;font-size:14.5px;line-height:1.5}
  .hm-own-rail.m-acc > li{display:block}
  .hm-own-rail.m-acc > li.is-key{background:var(--wash)!important;margin:0 calc(var(--pad) * -1)!important;padding:0 var(--pad)!important}
  .hm-own-rail.m-acc .hm-own-when{display:block;padding-top:10px}
  .hm-own-rail .m-acc-btn{align-items:flex-start;font-size:16px;min-height:44px;padding:0 0 8px}
  .hm-own-rail .m-acc-chev{margin-top:7px}
  .hm-own-rail .m-acc-panel{padding:0 0 12px}
  .hm-own-note{margin-top:16px;padding-top:13px;font-size:14px;line-height:1.55}

  /* ---------- 9. you run your business ---------- */
  .hm-diy-grid{gap:20px}
  .hm-diy-copy > p:not(.eyebrow):not(.hm-diy-close){font-size:15.5px;line-height:1.55;margin-top:10px;max-width:none}
  .hm-diy-close{margin-top:16px;padding-top:12px;font-size:clamp(23px,6.4vw,27px);max-width:none}
  .hm-diy-th{display:none}
  .hm-diy-row{grid-template-columns:1fr;gap:2px;padding:9px 0}
  .hm-diy-table .hm-diy-row span{font-size:14.8px;line-height:1.45}
  .hm-diy-table .hm-diy-row span:first-child{font-size:14.5px}
  .hm-diy-row span:first-child::before{content:"Yourself: ";font-family:var(--fh);font-weight:700;color:var(--muted)}
  .hm-diy-row span:last-child::before{content:"PrimeStart: ";font-weight:700;color:var(--orange-dk)}

  /* ---------- 10. wherever your business is ----------
     All four places stay on a phone now, as a strip. */
  .hm-locs-grid{gap:18px}
  .hm-locs-copy .as-h3{font-size:20px}
  .hm-locs-copy > p:not(.eyebrow):not(.hm-locs-links){font-size:15.5px;line-height:1.5;margin-top:10px;max-width:none}
  .hm-locs-links{margin-top:12px}
  .hm-postcards{gap:10px;padding:2px var(--pad) 8px;max-width:none;justify-self:stretch}
  .hm-postcards .loc-postcard{flex:0 0 46%;max-width:190px;scroll-snap-align:start;transform:none}

  /* ---------- 11. questions ---------- */
  .hm-faq-grid{gap:16px}
  .hm-faq-head .lede{font-size:15.5px;line-height:1.5;margin-top:10px;max-width:none}
  .hm-faq-more{margin-top:8px}
  .hm-faq-talk{margin-top:12px;padding-top:12px;font-size:14.5px;line-height:1.5;max-width:none}
  .hm-faq details.q summary{font-size:15.5px;line-height:1.35;padding:12px 30px 12px 0}
  .hm-faq details.q summary::after{top:18px;right:4px;width:10px;height:10px}
  .hm-faq details.q[open] summary::after{top:21px}
  .hm-faq details.q .a{padding:0 6px 16px 0;font-size:15px;line-height:1.55}

  /* ---------- 12. final ---------- */
  .hm-final h2{font-size:clamp(25px,6.8vw,29px)}
  .hm-final p{font-size:16px;line-height:1.55;margin-bottom:18px;max-width:none}
  .hm-final .btns .btn{width:100%}
}
@media (max-width:360px){
  .hm-sum-col{flex-basis:90%}
  .hm-sum-price b{font-size:34px}
  .hm-searches li{font-size:15.5px}
  .hm-triple b{font-size:25px;padding-left:34px}
  .hm-diy-close{font-size:22px}
}

/* the conversation arrives one message at a time (owner, 5 September 2026).
   Opacity and a small lift only: the bubbles keep their space so the stage,
   the actions and the navigation underneath never move. */
.hm-thread[data-scene] .hm-msg{opacity:0;transform:translateY(7px);transition:opacity .26s var(--ease),transform .34s var(--ease-out)}
.hm-thread[data-scene] .hm-msg.on,
.hm-thread.is-done .hm-msg,
html:not(.js) .hm-thread .hm-msg{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .hm-thread[data-scene] .hm-msg{transition:none}
}


/* ============================================================
   The plan chips, phone only (owner, 5 September 2026)

   The two plans sit in a swipe strip on a phone. That halved the
   section, but a customer who does not realise the strip moves could
   leave without ever seeing Website + SEO, which would be a
   real commercial loss. The brief asked for "simple tabs" or another
   obvious but restrained affordance.

   So: two chips above the strip, each naming a plan and its figure.
   They are the first appearance of each figure in this section, they
   make the second card reachable by tap rather than only by swipe,
   and the active one shows which card you are looking at. Nothing
   renders above 640px, where both cards are already side by side.
   ============================================================ */
.hm-sum-tabs{display:none}
@media (max-width:640px){
  .hm-sum-tabs{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;
    margin:0 0 14px;
  }
  /* Three chips on a phone. Stated inside the breakpoint rather than left to
     source order: .hm-sum-tabs-3 is a single class competing with a single
     class, so it would win on order alone, but the whole chip strip only
     exists below 640px and keeping the override here is what makes that
     obvious to whoever adds a fourth plan. */
  .hm-sum-tabs-3{grid-template-columns:repeat(3,1fr);gap:6px}
  .hm-sum-tabs-3 .hm-sum-tab{padding:8px 9px;font-size:11.5px;min-height:56px}
  .hm-sum-tabs-3 .hm-sum-tab b{font-size:14.5px}
  .hm-sum-tab{
    display:flex;flex-direction:column;align-items:flex-start;gap:2px;
    min-height:52px;padding:8px 12px;border:1px solid var(--line);border-radius:11px;
    background:transparent;color:var(--muted);text-align:left;cursor:pointer;
    font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:-0.01em;line-height:1.2;
    transition:border-color .18s ease,background-color .18s ease,color .18s ease;
  }
  .hm-sum-tab b{font-size:16px;font-weight:800;letter-spacing:-0.035em;color:var(--ink)}
  .hm-sum-tab.is-on{
    border-color:var(--orange);background:var(--wash);color:var(--orange-dk);
  }
  .hm-sum-tab.is-on b{color:var(--ink)}
  .hm-sum-tab:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
  .hm-sum-tab:active{transform:translateY(1px)}
}
@media (prefers-reduced-motion:reduce){
  .hm-sum-tab{transition:none}
  .hm-sum-tab:active{transform:none}
}

/* ============================================================
   9 September 2026 - the flagship pass. Three things changed on this
   page: who it is for sat above the statement (hero-kicker, since
   replaced by the high-street hero of the same day), the
   reason a tradesperson should care has its own section (hm-why), and
   the websites are shown large in the browser instead of as two small
   cards (hm-work-frames). The plan cards gained the one-line question
   that decides between them (hm-sum-need). Everything else on the page
   is the approved composition of 4 and 5 September.
   ============================================================ */


/* ---------- why it matters: the look-up before the call ---------- */
.hm-why-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,6vw,96px);align-items:center}
.hm-why h2{max-width:18ch}
.hm-why .lede{margin:18px 0 30px;max-width:50ch}   /* room between the heading and the paragraph (owner, 9 Sept) */
.hm-why-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:22px 32px;max-width:60ch}
.hm-why-list li{display:grid;gap:4px;padding-left:18px;border-left:2px solid var(--orange)}
.hm-why-list b{font-family:var(--fh);font-size:16.5px;font-weight:700;letter-spacing:-0.015em;color:var(--ink)}
.hm-why-list span{font-size:15px;line-height:1.5;color:var(--muted)}
.hm-why-close{margin:32px 0 0;font-family:var(--fh);font-size:18px;font-weight:600;letter-spacing:-0.02em;line-height:1.45;color:var(--ink);max-width:40ch;text-wrap:balance}
.hm-why-art{display:flex;flex-direction:column;align-items:center;gap:18px}
/* the phone is the shared mock at its own size, scaled up so it reads at
   this width; the wrapper reserves the scaled space so nothing overlaps */
.hm-why-phone{width:150px;height:280px;transform:scale(1.5);transform-origin:top center;margin-bottom:140px}
.hm-why-phone .smp{margin:0 auto}
.hm-why-cap{margin:0;font-size:13.5px;color:var(--muted);text-align:center;max-width:32ch}

/* ---------- the websites: three finished sites, side by side ----------
   9 September 2026. Three complete websites at the same size, each a real
   composition rather than a wireframe (primestart_site_mock, the same
   component the hero uses). Nothing about them is shared except the size:
   different colour, photography, services, areas and wording, which is the
   whole argument of the section. */
.hm-sites{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;align-items:start}
.hm-site{min-width:0;display:flex;flex-direction:column}
.hm-site-sm{box-shadow:0 30px 70px -36px rgba(18,33,47,.42),0 2px 6px rgba(18,33,47,.06);transition:transform .3s var(--ease-out),box-shadow .3s var(--ease)}
.hm-site:hover .hm-site-sm{transform:translateY(-4px);box-shadow:0 40px 84px -34px rgba(18,33,47,.5),0 3px 8px rgba(18,33,47,.07)}
.hm-site-sm .sm-hero{height:150px}
.hm-site-sm .sm-hero-copy b{font-size:16px}
.hm-site-sm .sm-hero-copy p{display:none}
/* a third of the page is narrower than the mock's navigation wants: the last
   two links go, so the call button is never clipped by a long business name */
.hm-site-sm .sm-nav .sm-link:nth-of-type(n+3){display:none}
.hm-site-cap{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:16px 0 0}
.hm-site-cap b{font-family:var(--fh);font-size:16.5px;font-weight:800;letter-spacing:-0.02em;color:var(--ink);width:100%}
.hm-site-cap a{font-family:var(--fh);font-size:13.5px;font-weight:700;letter-spacing:-0.01em;color:var(--orange-dk);border-bottom:1px solid rgba(217,98,14,.35);transition:border-color .15s ease}
.hm-site-cap a:hover{border-bottom-color:var(--orange)}
.hm-site-cap span{font-size:13.5px;color:var(--muted)}
.hm-site-cap span::before{content:"\00b7";margin-right:10px;color:var(--line)}
.hm-sites-note{margin:26px 0 0;font-size:14.5px;line-height:1.55;color:var(--muted);max-width:74ch}
.hm-work-foot{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.hm-work-foot .hm-work-more{margin:0;padding:0;border:0}

/* ---------- the question that decides between the plans ---------- */
.hm-sum-need{margin:10px 0 0;font-family:var(--fh);font-size:17px;font-weight:700;letter-spacing:-0.02em;line-height:1.35;color:var(--ink);max-width:24ch}

/* below about 1040px three full websites stop being legible: two, then a strip */
@media (max-width:1040px){
  .hm-sites{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .hm-site:nth-child(3){display:none}
  .hm-site-sm .sm-hero{height:132px}
}
@media (max-width:1040px){
  .hm-why-grid{grid-template-columns:1fr;gap:36px}
  .hm-why-art{align-items:flex-start}
  .hm-why-phone{transform-origin:top left}
  .hm-why-cap{text-align:left}
}
@media (max-width:640px){
  .hm-why-list{grid-template-columns:1fr;gap:16px}
  .hm-why-close{font-size:17px}
  .hm-why-art{display:none}   /* the reader is already holding the phone */
  /* the three websites become a swipe strip, each still complete */
  .hm-sites{
    display:flex;grid-template-columns:none;gap:14px;
    margin:0 calc(var(--pad) * -1);padding:2px var(--pad) 10px;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    scroll-padding-left:var(--pad);-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .hm-sites::-webkit-scrollbar{display:none}
  .hm-site{flex:0 0 82%;max-width:320px;scroll-snap-align:start}
  .hm-site-sm .sm-hero{height:124px}
  .hm-site-cap{margin-top:12px}
  .hm-site-cap a{display:inline-flex;align-items:center;min-height:44px}
  .hm-sites-note{margin-top:8px;font-size:14.5px}
  .hm-work-foot{flex-direction:column;align-items:stretch}
  .hm-work-foot .btn{text-align:center}
  .hm-sum-need{font-size:16px;max-width:none}
}