/* PrimeStart - page styles: websites
   Loaded on /pay-monthly-websites/ only.

   The hero is the standard one every live page now takes; this file sets
   nothing about it. What remains of the old "kept" hero is the browser
   window (still in the hero frame) and the timeline, which moved to its own
   section. Everything from "1. What you get" onwards was rebuilt on
   4 September 2026 to the About-page standard and is prefixed ws-. */

/* ---------- shared pieces this page still uses ---------- */
details.q summary{list-style:none;cursor:pointer;padding:23px 46px 23px 0;position:relative;font-family:var(--fh);font-size:19px;font-weight:700;letter-spacing:-0.03em;line-height:1.35}
details.q summary::after{content:"";position:absolute;right:6px;top:31px;width:12px;height:12px;border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);transform:rotate(45deg);transition:transform .18s ease}
.final p{color:#A3B5C4;font-size:19px;max-width:50ch;margin:0 auto 34px}

/* ---------- hero, and the "kept" line beneath it ----------
   The page took the standard hero on 9 September 2026, so it sets no hero
   size, padding, ground or type here and must not start again. What is left
   is this page's own illustration:

   - the "kept" scene (.kp, .kp-frame, .kp-line), which moved out of the
     hero into its own section (#kept) at full page width. It moved WHOLE:
     hero-websites.js drives the window and the line together, so splitting
     them would have left a scene animating half of itself. A horizontal
     five-node line also stopped being a timeline at 520px and became a
     list. The hero takes a photograph instead.

   Still driven by motion.js + hero-websites.js, unchanged. */
/* the fourth area pill is the change the customer asked for */
  position:absolute;right:14px;top:-13px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:100px;background:var(--white);border:1px solid var(--line);
  font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:-0.01em;color:var(--ink);
  box-shadow:0 12px 26px -16px rgba(18,33,47,.45);
  opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .5s var(--ease-out);
}

  list-style:none;margin:28px 0 0;padding:20px 0 0;position:relative;
  display:grid;grid-template-columns:repeat(5,1fr);gap:0 12px;
}
  position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;
  background:var(--white);border:2px solid var(--line);
  transition:background .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease);
}

@media (max-width:1180px){
}
@media (max-width:1040px){
}
@media (max-width:640px){
  /* the line becomes a hairline list */
}
@media (max-width:360px){
}

/* ============================================================
   Below the hero: the Website product page (ws-)
   ============================================================ */

/* ---------- shared pieces ---------- */
.ws-n{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--wash);color:var(--orange-dk);font-family:var(--fh);font-size:14px;font-weight:800;
  font-variant-numeric:tabular-nums;
}
.ws-ticks{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ws-ticks li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.ws-ticks .tick{margin-top:3px}
.ws-hair{list-style:none;margin:0;padding:0}

/* ---------- 1. what you get: build, host, look after ---------- */
.ws-gets{padding-bottom:104px}
.ws-gets-head{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:end;margin-bottom:64px}
.ws-gets-head .eyebrow{grid-column:1/-1;margin-bottom:0}
.ws-statement{font-size:clamp(34px,4vw,52px);font-weight:800;line-height:1.04;letter-spacing:-0.045em;max-width:16ch}
.ws-gets-head .lede{padding-bottom:6px;max-width:44ch}
.ws-three{display:grid;grid-template-columns:repeat(3,1fr);gap:0 48px;border-top:1px solid var(--ink)}
.ws-col{padding:30px 0 8px}
.ws-col-line{font-family:var(--fh);font-size:clamp(26px,2.5vw,32px);font-weight:800;letter-spacing:-0.04em;line-height:1.05;color:var(--ink);margin:0 0 22px}
.ws-col:nth-child(3) .ws-col-line{color:var(--orange-dk)}
.ws-col-list{list-style:none;margin:0;padding:0}
.ws-col-list li{
  padding:12px 0 12px 26px;border-top:1px solid var(--line);font-size:15.5px;line-height:1.5;color:var(--ink-2);position:relative;
}
.ws-col-list li::before{content:"";position:absolute;left:2px;top:22px;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.ws-col-list li:last-child{border-bottom:1px solid var(--line)}

/* ---------- 2. the five pages ---------- */
.ws-pages-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:center}
.ws-pages-copy h2{max-width:15ch}
.ws-pages-copy > p:not(.eyebrow){margin-top:18px;font-size:17px;line-height:1.65;color:var(--muted);max-width:48ch}
.ws-pages-copy > p.ws-pages-note{padding-top:18px;border-top:1px solid var(--line);font-size:15px;line-height:1.6}
/* links that sit inside a running sentence keep the sentence's type */
.ws-pages-note .link-u,.ws-col-list .link-u{font:inherit;letter-spacing:inherit;font-weight:600;white-space:nowrap}

.ws-plan{display:flex;flex-direction:column;align-items:center;padding:8px 0}
.ws-plan-root{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.ws-plan-root em,.ws-plan-leaf em{font-style:normal;font-size:12.5px;line-height:1.4;color:var(--muted);max-width:22ch;display:block}
.ws-plan-stem{width:2px;height:34px;background:var(--line);position:relative}
.ws-plan-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;width:100%;position:relative;padding-top:22px}
.ws-plan-row::before{content:"";position:absolute;left:12.5%;right:12.5%;top:0;height:2px;background:var(--line)}
.ws-plan-leaf{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;position:relative}
.ws-plan-leaf::before{content:"";position:absolute;left:50%;top:-22px;width:2px;height:22px;background:var(--line);transform:translateX(-50%)}
.ws-sheet{
  position:relative;width:118px;aspect-ratio:3/4;background:var(--white);border:1px solid var(--line);border-radius:8px;
  padding:9px 9px 26px;display:flex;flex-direction:column;gap:6px;box-shadow:0 18px 34px -26px rgba(18,33,47,.45);
}
.ws-sheet-home{width:150px;aspect-ratio:4/3;padding:10px 10px 28px}
.ws-sheet b{position:absolute;left:0;right:0;bottom:8px;text-align:center;font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:-0.02em;color:var(--ink)}
.ws-sheet-bar{height:5px;border-radius:3px;background:var(--ink);width:38%}
.ws-sheet-hero{height:34px;border-radius:4px;background:linear-gradient(135deg,#E9E2D6,#D9CFBF)}
.ws-sheet-row{height:5px;border-radius:3px;background:var(--line);width:88%}
.ws-sheet-row.short{width:56%}
.ws-sheet-photo{height:30px;border-radius:4px;background:#E9E2D6}
.ws-sheet-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.ws-sheet-grid i{display:block;height:18px;border-radius:3px;background:#E9E2D6}
.ws-sheet-field{height:12px;border-radius:3px;border:1px solid var(--line);background:var(--paper)}
.ws-sheet-btn{height:12px;border-radius:3px;background:var(--orange);width:60%}
.ws-sheet-home .ws-sheet-hero{height:44px}

/* ---------- 3. built around the industry ---------- */
.ws-industry-head{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:52px}
.ws-industry-head .eyebrow{grid-column:1/-1;margin-bottom:0}
.ws-industry-head h2{max-width:12ch}
.ws-industry-head .lede{padding-bottom:6px;max-width:46ch}
/* the switch: one frame, two trades (5 September 2026, replacing two photographs) */
  appearance:none;border:0;background:none;cursor:pointer;border-radius:100px;padding:9px 18px;min-height:40px;
  font-family:var(--fh);font-size:14.5px;font-weight:700;letter-spacing:-0.02em;color:var(--muted);
  transition:background-color .2s var(--ease),color .2s var(--ease);
}
@media (prefers-reduced-motion:reduce){
}
/* a page sheet changing into another kind of page */
.ws-plan-leaf{transition:opacity .22s var(--ease),transform .3s var(--ease-out)}
.ws-plan-leaf.swap{opacity:0;transform:translateY(6px)}
@media (max-width:1040px){
}
@media (max-width:640px){
}
.ws-industry-note{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);font-size:16px;line-height:1.6;color:var(--muted);max-width:70ch}

/* ---------- 4. nothing to learn (dark) ---------- */
.ws-managed{padding:112px 0}
.ws-managed-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.ws-managed-words{position:sticky;top:120px}
.ws-managed-line{font-family:var(--fh);font-size:clamp(36px,4.4vw,60px);font-weight:800;line-height:1.02;letter-spacing:-0.048em;color:#fff;margin:0;max-width:11ch}
.ws-managed-sub{margin:22px 0 0;font-family:var(--fh);font-size:clamp(19px,1.8vw,23px);font-weight:600;letter-spacing:-0.03em;line-height:1.3;color:var(--amber);max-width:24ch}
.ws-managed-copy h2{color:#fff;max-width:15ch}
.ws-managed-copy > p:not(.eyebrow){margin-top:20px;font-size:17px;line-height:1.65;color:var(--on-dark-muted);max-width:50ch}
.ws-parts{margin-top:34px;display:grid;grid-template-columns:.85fr 1.15fr;gap:40px}
.ws-parts-k{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin:0 0 6px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.2)}
.ws-parts ul{list-style:none;margin:0;padding:0}
.ws-parts li{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.12);font-family:var(--fh);font-size:15.5px;font-weight:600;letter-spacing:-0.02em;color:#fff;line-height:1.35}
.ws-parts > div:last-child li{font-weight:500;color:var(--on-dark)}

/* ---------- 5. the Client Platform ---------- */
.ws-platform-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;align-items:center}
.ws-platform-copy h2{max-width:15ch}
.ws-platform-copy .lede{margin-top:20px;max-width:44ch}
.ws-platform-copy .ws-ticks{margin-top:30px}
.ws-platform-more{margin-top:26px}
.ws-platform-art{display:flex;justify-content:center}
.ws-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);
}
.ws-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}
.ws-dash{background:var(--paper);border-radius:30px;padding:44px 16px 16px;color:var(--ink);overflow:hidden;min-height:560px;display:flex;flex-direction:column}
.ws-dash-top{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;color:var(--muted)}
.ws-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)}
.ws-dash-logo i{width:16px;height:16px;border-radius:5px;background:var(--orange);display:inline-block;position:relative}
.ws-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}
.ws-dash-k{font-family:var(--fh);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:18px 0 0}
.ws-dash-h{margin:6px 0 0;font-family:var(--fh);font-size:18px;font-weight:800;letter-spacing:-0.035em;line-height:1.2;color:var(--ink)}
/* the project stages inside the dashboard: the customer's view at the review stage */
.ws-dash-stages{list-style:none;margin:14px 0 0;padding:12px 12px 10px;background:var(--white);border:1px solid var(--line);border-radius:10px;position:relative}
.ws-dash-stages li{position:relative;display:grid;grid-template-columns:14px 1fr auto;gap:10px;align-items:center;padding:6px 0;font-size:12.5px;line-height:1.3}
.ws-dash-stages li i{width:10px;height:10px;border-radius:50%;border:2px solid var(--line);background:var(--white);justify-self:center;position:relative;z-index:1}
.ws-dash-stages li + li::before{content:"";position:absolute;left:6px;top:-9px;width:2px;height:12px;background:var(--line-2)}
.ws-dash-stages li span{font-family:var(--fh);font-weight:700;letter-spacing:-0.02em;color:var(--ink)}
.ws-dash-stages li em{font-style:normal;font-size:11px;color:var(--muted)}
.ws-dash-stages li.done i{background:var(--orange);border-color:var(--orange)}
.ws-dash-stages li.done em{color:var(--muted)}
.ws-dash-stages li.now i{border-color:var(--orange);background:var(--white);box-shadow:inset 0 0 0 2px var(--white),inset 0 0 0 5px var(--orange)}
.ws-dash-stages li.now span,.ws-dash-stages li.now em{color:var(--orange-dk)}
.ws-dash-stages li.now em{font-family:var(--fh);font-weight:700}
.ws-dash-stages li:not(.done):not(.now) span{color:var(--muted);font-weight:600}
.ws-dash-actions{margin-top:12px;display:flex;gap:6px;flex-wrap:wrap}
.ws-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)}
.ws-dash-actions span.pri{background:var(--orange);border-color:var(--orange);color:#fff}
.ws-dash-thread{margin-top:14px;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.ws-dash-thread .ws-dash-k{margin:0 0 5px}
.ws-dash-thread p:not(.ws-dash-k){font-size:12.5px;line-height:1.5;color:var(--ink-2);margin:0}
.ws-dash-nav{margin-top:auto;padding-top:14px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;border-top:1px solid var(--line)}
.ws-dash-nav span{text-align:center;font-family:var(--fh);font-size:10.5px;font-weight:700;color:var(--muted);padding:6px 0}
.ws-dash-nav span.on{color:var(--orange-dk)}

/* ---------- 6. before launch ---------- */
.ws-launch-head{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:end;margin-bottom:56px}
.ws-launch-head h2{max-width:16ch}
.ws-launch-head .lede{padding-bottom:6px;max-width:44ch}
.ws-rail{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);gap:0 20px;position:relative}
.ws-rail::before{content:"";position:absolute;left:17px;right:17px;top:17px;height:2px;background:var(--line)}
.ws-rail li{position:relative;min-width:0}
.ws-rail .ws-n{position:relative;z-index:1;background:var(--paper);border:2px solid var(--wash);box-shadow:0 0 0 4px var(--white)}
.ws-rail li.is-key .ws-n{background:var(--orange);color:#fff;border-color:var(--orange)}
.ws-rail b{display:block;margin-top:16px;font-family:var(--fh);font-size:15px;font-weight:700;letter-spacing:-0.024em;color:var(--ink);line-height:1.3}
.ws-rail li.is-key b{color:var(--orange-dk)}
.ws-rail em{display:block;font-style:normal;font-size:13px;color:var(--muted);line-height:1.5;margin-top:5px}
.ws-launch-note{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:15px;line-height:1.6;color:var(--muted);max-width:72ch}

/* ---------- 7. the price, once ---------- */
.ws-price-grid{display:grid;grid-template-columns:1fr .95fr;gap:80px;align-items:start}
.ws-price-copy h2{max-width:15ch}
.ws-price-copy > p:not(.eyebrow):not(.ws-price-terms){margin-top:20px;font-size:17px;line-height:1.65;color:var(--muted);max-width:48ch}
.ws-price-terms{margin-top:26px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;line-height:1.6;color:var(--muted);max-width:48ch}
.ws-sum{border-top:2px solid var(--ink);padding-top:26px}
.ws-sum-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ws-sum-k{font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-dk)}
.ws-sum-price{display:flex;align-items:baseline;gap:10px;margin:0}
.ws-sum-price b{font-family:var(--fh);font-size:clamp(48px,5vw,64px);font-weight:800;letter-spacing:-0.055em;line-height:.95;color:var(--ink)}
.ws-sum-price span{font-size:15px;color:var(--muted)}
.ws-sum-rows{margin:26px 0 0;display:grid}
.ws-sum-rows > div{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:baseline;padding:13px 0;border-top:1px solid var(--line)}
.ws-sum-rows dt{font-size:15px;color:var(--muted)}
.ws-sum-rows dd{margin:0;font-family:var(--fh);font-size:15.5px;font-weight:700;letter-spacing:-0.02em;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.ws-sum-rows > div.is-key dd{color:var(--orange-dk)}
.ws-sum-rows > div:last-child{border-bottom:1px solid var(--line)}
.ws-sum-ctas{margin-top:26px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}

/* ---------- 8. growth, when ready ---------- */
.ws-growth-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:center}
.ws-growth-grid h2{max-width:16ch}
.ws-growth-grid > div:first-child > p:not(.eyebrow):not(.ws-growth-terms){margin-top:18px;font-size:16.5px;line-height:1.65;color:var(--muted);max-width:50ch}
.ws-growth-terms{margin-top:22px;font-family:var(--fh);font-size:16px;font-weight:700;letter-spacing:-0.02em;color:var(--ink);display:flex;gap:16px;flex-wrap:wrap;align-items:baseline}
.ws-growth-terms .link-u{font-weight:600}
.ws-searches{border-top:1px solid var(--ink);padding-top:18px}
.ws-searches-k{font-family:var(--fh);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.ws-searches > span{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-family:var(--fh);font-size:17px;font-weight:600;letter-spacing:-0.025em;color:var(--ink)}
.ws-searches > span svg{color:var(--orange);flex:none}
.ws-searches-note{margin:16px 0 0;font-size:14px;line-height:1.55;color:var(--muted)}

/* ---------- 9. questions ---------- */
.ws-faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:start}
.ws-faq-head{position:sticky;top:110px}
.ws-faq-head h2{max-width:13ch}
.ws-faq-head .lede{margin-top:18px;max-width:34ch}
.ws-faq-more{margin-top:22px}
.ws-faq .faq-list{border-top:1px solid var(--line)}

/* ---------- 10. final ---------- */
.ws-final h2{max-width:18ch;text-wrap:balance}
.ws-statement,.ws-pages-copy h2,.ws-industry-head h2,.ws-managed-copy h2,.ws-platform-copy h2,.ws-launch-head h2,.ws-price-copy h2,.ws-growth-grid h2,.ws-faq-head h2{text-wrap:balance}

/* ============================================================
   Responsive: laptop and tablet
   ============================================================ */
@media (max-width:1180px){
  .ws-three{gap:0 32px}
  .ws-rail{gap:0 14px}
}
@media (max-width:1040px){
  .ws-gets-head,.ws-industry-head,.ws-launch-head{grid-template-columns:1fr;gap:14px;margin-bottom:40px}
  .ws-pages-grid,.ws-managed-grid,.ws-platform-grid,.ws-price-grid,.ws-growth-grid,.ws-faq-grid{grid-template-columns:1fr;gap:44px}
  .ws-managed-words,.ws-faq-head{position:static}
  .ws-platform-art{order:2}
  .ws-rail{grid-template-columns:repeat(4,1fr);gap:32px 20px}
  .ws-rail::before{display:none}
  .ws-rail .ws-n{box-shadow:none}
  .ws-three{grid-template-columns:1fr;gap:0}
  .ws-col{padding:26px 0 0}
  .ws-col-list li:last-child{border-bottom:0}
  .ws-three .ws-col:last-child .ws-col-list li:last-child{border-bottom:1px solid var(--line)}
}

/* 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){
  .ws-gets-head,.ws-industry-head,.ws-launch-head{grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:40px}
}
@media (max-width:900px){
  .ws-gets-head,.ws-industry-head,.ws-launch-head{grid-template-columns:1fr;gap:14px;align-items:start;margin-bottom:40px}
}
@media (max-width:820px){
  .ws-parts{grid-template-columns:1fr;gap:26px}
  .ws-managed{padding:88px 0}
  .ws-plan-row{gap:10px}
  .ws-sheet{width:100px}
  .ws-sheet-home{width:132px}
}

/* ============================================================
   Phone composition (<=640px): the same page, composed for a phone.
   Statements hold two or three lines, the three columns become one
   hairline ledger, the site plan and the phone are centred, the rail
   becomes a numbered list, the sum keeps its two-column rows, the FAQ
   stays an accordion. Nothing is removed.
   ============================================================ */
@media (max-width:640px){
  .ws-gets{padding:60px 0 56px}
  .ws-gets-head{margin-bottom:26px}
  .ws-statement{font-size:clamp(27px,7.4vw,32px);max-width:none;letter-spacing:-0.04em}
  .ws-gets-head .lede{font-size:16.5px;max-width:none}
  .ws-col{padding:20px 0 0}
  .ws-col-line{font-size:24px;margin-bottom:12px}
  .ws-col-list li{padding:10px 0 10px 22px;font-size:15px}
  .ws-col-list li::before{top:19px;width:7px;height:7px}

  .ws-pages{padding:60px 0}
  .ws-pages-grid{gap:34px}
  .ws-pages-copy h2{font-size:clamp(27px,7.4vw,30px);max-width:none}
  .ws-pages-copy > p:not(.eyebrow){font-size:16px;margin-top:14px}
  .ws-plan{padding:0}
  .ws-plan-row{grid-template-columns:repeat(2,1fr);gap:22px 12px;padding-top:0}
  .ws-plan-row::before,.ws-plan-leaf::before{display:none}
  .ws-plan-stem{height:22px}
  .ws-sheet{width:104px}
  .ws-sheet-home{width:140px}
  .ws-plan-root em,.ws-plan-leaf em{font-size:12px}

  .ws-industry{padding:60px 0}
  .ws-industry-head{margin-bottom:26px}
  .ws-industry-head h2{font-size:clamp(27px,7.4vw,30px);max-width:none}
  .ws-industry-head .lede{font-size:16.5px}
  .ws-industry-note{margin-top:30px;font-size:15px}

  .ws-managed{padding:64px 0}
  .ws-managed-grid{gap:30px}
  .ws-managed-line{font-size:clamp(31px,8.8vw,38px);max-width:none}
  .ws-managed-sub{font-size:18px;margin-top:14px}
  .ws-managed-copy h2{font-size:clamp(27px,7.4vw,30px);max-width:none}
  .ws-managed-copy > p:not(.eyebrow):not(.ws-managed-note){font-size:16px}
  .ws-parts{margin-top:26px;grid-template-columns:1fr 1fr;gap:18px}
  .ws-parts li{font-size:14.5px;padding:9px 0}

  .ws-platform{padding:60px 0}
  .ws-platform-grid{gap:30px}
  .ws-platform-art{order:2}
  .ws-platform-copy h2{font-size:clamp(27px,7.4vw,30px);max-width:none}
  .ws-platform-copy .lede{font-size:16.5px;margin-top:14px}
  .ws-platform-copy .ws-ticks{margin-top:22px}
  .ws-ticks li{font-size:15px}
  .ws-phone{width:min(280px,100%)}
  .ws-dash{min-height:0;padding:40px 14px 14px}

  .ws-launch{padding:60px 0}
  .ws-launch-head{margin-bottom:24px}
  .ws-launch-head h2{font-size:clamp(27px,7.4vw,30px);max-width:none}
  .ws-launch-head .lede{font-size:16.5px}
  .ws-rail{grid-template-columns:1fr;gap:0}
  .ws-rail li{display:grid;grid-template-columns:32px 1fr;column-gap:14px;padding:14px 0;border-top:1px solid var(--line)}
  .ws-rail .ws-n{grid-row:1/3;width:30px;height:30px;font-size:13px;border:0;box-shadow:none}
  .ws-rail b{margin-top:4px;font-size:16px}
  .ws-rail em{grid-column:2;margin-top:4px;font-size:14px}
  .ws-launch-note{margin-top:22px;font-size:14.5px}

  .ws-price{padding:60px 0}
  .ws-price-grid{gap:34px}
  .ws-price-copy h2{font-size:clamp(27px,7.4vw,30px);max-width:none}
  .ws-price-copy > p:not(.eyebrow):not(.ws-price-terms){font-size:16px;margin-top:14px}
  .ws-sum{padding-top:20px}
  .ws-sum-price b{font-size:46px}
  .ws-sum-rows{margin-top:18px}
  .ws-sum-rows > div{grid-template-columns:1fr;gap:3px;padding:11px 0}
  .ws-sum-rows dd{text-align:left}
  .ws-sum-ctas{margin-top:22px;gap:14px}
  .ws-sum-ctas .btn{width:100%}

  .ws-growth{padding:52px 0}
  .ws-growth-grid{gap:28px}
  .ws-growth-grid h2{font-size:clamp(26px,7vw,29px);max-width:none}
  .ws-growth-grid > div:first-child > p:not(.eyebrow):not(.ws-growth-terms){font-size:16px}
  .ws-searches > span{font-size:16px;padding:11px 0}

  .ws-faq{padding:60px 0}
  .ws-faq-grid{gap:20px}
  .ws-faq-head h2{font-size:clamp(27px,7.4vw,30px);max-width:none}
  .ws-faq-head .lede{font-size:16px;margin-top:12px;max-width:none}
  .ws-faq-more{margin-top:14px}
  details.q summary{font-size:17px;padding:18px 40px 18px 0}
  details.q summary::after{top:25px}

  .ws-final{padding:72px 0}
  .ws-final h2{font-size:clamp(28px,8vw,34px)}
  .ws-final p{font-size:17px}
  .ws-final .btns .btn{width:100%}
  .ws-platform-more .link-u,.ws-faq-more .link-u,.ws-vs-side .link-u,.ws-sum-ctas .link-u,.ws-growth-terms .link-u{display:inline-block;padding:10px 0;min-height:44px;line-height:24px}
}
@media (max-width:360px){
  .ws-statement{font-size:24px}
  .ws-managed-line{font-size:30px}
  .ws-parts{grid-template-columns:1fr}
  .ws-sheet{width:92px}
  .ws-sheet-home{width:124px}
}

/* ============================================================
   Phone composition - 5 September 2026

   Measured, not asserted. At 390px the page ran 13,873px: seventeen
   phone screens, because desktop stacking and desktop spacing survived
   into the phone layout. Nothing below removes a sentence. Sections
   change SHAPE instead, the way the mobile system sets out:

     hero          three headline lines, the finished website cropped
                   rather than shrunk, and the five things PrimeStart
                   keeps doing as a two-across ledger
     what you get  three named groups as an accordion, the first open
                   (site.js module 5) - every line stays in the document
     five pages    one row of five sheets, so the sheet swap still reads
     industry      the example website cropped the way a browser crops
     platform      the Client Platform phone cropped, not scaled down
                   until the dashboard inside it is unreadable
     before launch the seven-column rail becomes a numbered ledger
     the price     the label beside its figure rather than above it
     questions     shorter summaries that keep their 44px targets

   Applies at <=640px only, so desktop, laptop and tablet cannot move.
   ============================================================ */
@media (max-width:640px){

  /* ---- rhythm: a section is a screen and a half, not four ---- */
  .page-template-websites .sec{padding:30px 0}
  .page-template-websites .sec-sm{padding:28px 0}
  .page-template-websites .eyebrow{margin-bottom:9px}
  .page-template-websites .lede{line-height:1.5}

  /* ---- hero ---- */
  /* the finished website is cropped for the phone rather than scaled until
     the screen inside is unreadable: the header, the hero and the areas band
     (where the change the customer asked for appears) stay full size */
  .hero-ws .kp-sm .sm-services{display:none}
  .hero-ws .kp-sm .sm-hero{height:98px}
  .hero-ws .kp-sm .sm-foot{padding-top:10px;padding-bottom:10px}
  /* what PrimeStart keeps doing: five steps, two across, the payoff last */
  .hero-ws .kp-line{grid-template-columns:1fr 1fr;column-gap:16px;margin-top:14px}
  .hero-ws .kp-node{grid-template-columns:12px 1fr;column-gap:9px;padding:7px 0;align-items:center}
  .hero-ws .kp-node:last-child{grid-column:1/-1;border-bottom:1px solid var(--line)}
  .hero-ws .kp-dot{width:12px;height:12px}
  .hero-ws .kp-node b{font-size:13.6px}
  .hero-ws .kp-node em{font-size:11.8px;margin-top:0;line-height:1.32}

  /* ---- 1. what you get: three named groups ---- */
  .ws-gets-head{margin-bottom:14px}
  .ws-statement{font-size:clamp(24px,6.6vw,27px);line-height:1.08;letter-spacing:-0.04em}
  .ws-gets-head .lede{font-size:15px}
  .ws-three.m-acc{border-top:1px solid var(--ink)}
  .ws-three .m-acc-btn{font-family:var(--fh);font-size:19px;font-weight:800;letter-spacing:-0.038em;min-height:50px;padding:12px 0;color:var(--ink)}
  .ws-three > .ws-col:nth-child(3) .m-acc-btn{color:var(--orange-dk)}
  .ws-three .m-acc-chev{width:9px;height:9px}
  .ws-three .m-acc-panel{padding:0 0 10px}
  .ws-three .ws-col-list li{padding:6px 0 6px 18px;border-top:1px solid var(--line-2);font-size:14.6px;line-height:1.42}
  .ws-three .ws-col-list li:first-child{border-top:0}
  .ws-three .ws-col-list li:last-child{border-bottom:0}
  .ws-three .ws-col-list li::before{top:14px;width:5px;height:5px}

  /* ---- 2. the five pages: one row, so the sheet swap is seen ---- */
  .ws-pages-grid{gap:20px}
  .ws-pages-copy h2{font-size:clamp(24px,6.6vw,27px)}
  .ws-pages-copy > p:not(.eyebrow){font-size:15.2px;line-height:1.55;margin-top:10px}
  .ws-pages-copy > p.ws-pages-note{margin-top:14px;padding-top:12px;font-size:14px}
  .ws-plan-root{gap:6px}
  .ws-plan-stem{height:13px}
  .ws-plan-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 7px;padding-top:0}
  .ws-plan-leaf{gap:5px}
  .ws-sheet{width:100%;padding:6px 6px 16px;gap:4px;border-radius:6px}
  .ws-sheet b{bottom:4px;font-size:9.5px}
  .ws-sheet-bar{height:4px}
  .ws-sheet-row{height:4px}
  .ws-sheet-hero{height:20px}
  .ws-sheet-photo{height:16px}
  .ws-sheet-grid{gap:3px}
  .ws-sheet-grid i{height:10px}
  .ws-sheet-field,.ws-sheet-btn{height:8px}
  .ws-sheet-home{width:120px;padding:7px 7px 19px}
  .ws-sheet-home b{bottom:5px;font-size:10.5px}
  .ws-sheet-home .ws-sheet-hero{height:30px}
  .ws-plan-root em{font-size:11.5px;max-width:28ch}
  .ws-plan-leaf em{font-size:10px;line-height:1.28;max-width:none}

  /* ---- 3. built around the industry ---- */
  .ws-industry-head{margin-bottom:14px}
  .ws-industry-head h2{font-size:clamp(24px,6.6vw,27px)}
  .ws-industry-head .lede{font-size:15px}
  /* the example website is cropped the way a browser crops a page */
  .ws-industry-note{margin-top:16px;padding-top:13px;font-size:13.8px}

  /* ---- 4. nothing to learn ---- */
  .sec.ws-managed{padding:38px 0}
  .ws-managed-grid{gap:18px}
  .ws-managed-line{font-size:clamp(27px,7.6vw,31px)}
  .ws-managed-sub{font-size:16px;margin-top:9px}
  .ws-managed-copy h2{font-size:clamp(24px,6.6vw,27px)}
  .ws-managed-copy > p:not(.eyebrow):not(.ws-managed-note){font-size:15.2px;margin-top:11px;line-height:1.55}
  .ws-parts{margin-top:16px;gap:12px}
  .ws-parts-k{font-size:11.5px;padding-bottom:7px}
  .ws-parts li{font-size:13.4px;padding:6px 0;line-height:1.3}

  /* ---- 5. the Client Platform ---- */
  .ws-platform-grid{gap:18px}
  .ws-platform-copy h2{font-size:clamp(24px,6.6vw,27px)}
  .ws-platform-copy .lede{font-size:15.4px;margin-top:10px}
  .ws-platform-copy .ws-ticks{margin-top:14px;gap:0}
  .ws-platform .ws-ticks li{font-size:14.6px;line-height:1.42;padding:6px 0;border-top:1px solid var(--line)}
  .ws-platform .ws-ticks li:first-child{border-top:0}
  .ws-platform-more{margin-top:6px}
  /* the dashboard is cropped, not scaled: the screen stays readable and the
     phone runs on past the fold, the way a phone screen does */
  .ws-platform-art{max-height:304px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 86%,rgba(0,0,0,0));mask-image:linear-gradient(180deg,#000 86%,rgba(0,0,0,0))}
  .ws-phone{width:min(272px,100%)}

  /* ---- 6. before launch: a numbered ledger ---- */
  .ws-launch-head{margin-bottom:14px}
  .ws-launch-head h2{font-size:clamp(24px,6.6vw,27px)}
  .ws-launch-head .lede{font-size:15px}
  .ws-rail li{grid-template-columns:25px 1fr;column-gap:10px;padding:6px 0}
  .ws-rail .ws-n{width:23px;height:23px;font-size:11.5px}
  .ws-rail b{margin-top:0;font-size:15px}
  .ws-rail em{margin-top:1px;font-size:13.2px;line-height:1.38}
  .ws-launch-note{margin-top:14px;padding-top:13px;font-size:13.8px}

  /* ---- 7. the price ---- */
  .ws-price-grid{gap:20px}
  .ws-price-copy h2{font-size:clamp(24px,6.6vw,27px)}
  .ws-price-copy > p:not(.eyebrow):not(.ws-price-terms){font-size:15.2px;margin-top:10px;line-height:1.55}
  .ws-price-terms{margin-top:16px;padding-top:13px;font-size:13.2px}
  .ws-sum{padding-top:14px}
  .ws-sum-top{gap:8px}
  .ws-sum-price b{font-size:40px}
  .ws-sum-rows{margin-top:12px}
  .ws-sum-rows > div{grid-template-columns:1fr auto;gap:3px 14px;padding:7px 0;align-items:baseline}
  .ws-sum-rows dt{font-size:13.2px;line-height:1.38}
  .ws-sum-rows dd{text-align:right;font-size:14.2px;line-height:1.38;max-width:66%}
  .ws-sum-ctas{margin-top:14px;gap:6px}

  /* ---- 8. growth, when ready ---- */
  .ws-growth-grid{gap:18px}
  .ws-growth-grid h2{font-size:clamp(23px,6.3vw,26px)}
  .ws-growth-grid > div:first-child > p:not(.eyebrow):not(.ws-growth-terms){font-size:15.2px;line-height:1.55;margin-top:10px}
  .ws-growth-terms{margin-top:12px;font-size:15px;gap:8px}
  .ws-searches{padding-top:12px}
  .ws-searches-k{margin-bottom:8px}
  .ws-searches > span{font-size:15px;padding:8px 0;gap:10px}
  .ws-searches-note{margin-top:10px;font-size:13.2px}

  /* ---- 9. questions ---- */
  .ws-faq-grid{gap:12px}
  .ws-faq-head h2{font-size:clamp(24px,6.6vw,27px)}
  .ws-faq-head .lede{font-size:15px;margin-top:8px}
  .ws-faq-more{margin-top:6px}
  .page-template-websites details.q summary{font-size:15.5px;line-height:1.32;padding:10px 34px 10px 0}
  .page-template-websites details.q summary::after{top:17px;width:9px;height:9px}
  .page-template-websites .faq-list .a,.page-template-websites .faq-list .a p{font-size:14.5px;line-height:1.55}

  /* ---- 10. final ---- */
  .ws-final{padding:34px 0}
  .ws-final h2{font-size:clamp(25px,7vw,28px)}
  .ws-final p{font-size:15.6px;margin-bottom:20px}
}
@media (max-width:360px){
  /* the five sheets still fit across a 320px screen */
  .ws-plan-row{gap:0 5px}
  .ws-sheet{width:100%;padding:5px 5px 14px}
  .ws-sheet b{font-size:9px}
  .ws-sheet-home{width:112px}
  .ws-plan-leaf em{font-size:9.5px}
  .hero-ws .kp-line{column-gap:12px}
  .hero-ws .kp-node b{font-size:13px}
  .hero-ws .kp-node em{font-size:11.4px}
  .ws-sum-rows dd{max-width:70%}
  /* the example website's navigation drops its last links rather than
     running past the edge of the browser frame on a 320px screen */
}


/* Reading floor, checked after the phone rebuild (5 September 2026).
   The managed-service list, the hero key-points line, the step notes
   and the terms ledger were all landing between 11.8 and 14.2px on a
   phone. These carry what the plan is and what it costs, so they go to
   the system's 14.5px. The five page sheets keep their small type:
   they are a picture of a website, not copy to read. */
@media (max-width:640px){
  #managed ul li{font-size:14.5px;line-height:1.55}
  #how li em{font-size:14.5px;line-height:1.5}
  #pricing .ws-sum-rows dt,#pricing .ws-sum-rows dd,
  #pricing dl > div > dt,#pricing dl > div > dd{font-size:14.5px;line-height:1.45}
}

/* ---------- 1b. the standard, in the browser (9 September 2026) ----------
   Three websites shown large straight after the promise, so the standard
   is seen before it is described. Same frame treatment as the homepage's
   "The websites"; the frames scroll on hover (site.js 3b). */
.ws-work-head{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:40px}
.ws-work-head h2{max-width:16ch;margin:0}
.ws-work-head .lede{margin:0 0 6px}
.ws-work-more{margin:36px 0 0;padding-top:22px;border-top:1px solid var(--line)}
@media (max-width:1040px){
  .ws-work-head{grid-template-columns:1fr;gap:12px}
}
@media (max-width:640px){
  .ws-work-head{margin-bottom:24px}
}
/* the three facts everyone asks next, under the hero figures (9 September 2026) */
.hero-ws-trust{margin:16px 0 0;font-size:14px;line-height:1.6;color:var(--muted);max-width:46ch}
@media (max-width:640px){
  .hero-ws-trust{font-size:13.5px;text-align:center;max-width:none}
}

/* ============================================================
   MASTER SPECIFICATION v1.0 (9 September 2026) - three sections rebuilt
   from screenshot 09's RED marks. The vocabulary is the site's own: a
   statement beside a hairline ledger, the real site mock, and hairline
   lists. No scene, no script.
   ============================================================ */

/* ---------- 1b. once it is live: the statement and the ledger ---------- */
.ws-kept{padding-bottom:104px}
.ws-kept-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:start}
.ws-kept-copy h2{max-width:14ch;text-wrap:balance}
.ws-kept-copy .lede{margin-top:18px;max-width:44ch}
.ws-kept-ledger{margin:0;border-top:1px solid var(--ink)}
.ws-kept-ledger > div{display:grid;grid-template-columns:196px 1fr;gap:24px;padding:18px 0;border-bottom:1px solid var(--line)}
.ws-kept-ledger dt{display:flex;align-items:baseline;gap:12px;font-family:var(--fh);font-size:17px;font-weight:700;letter-spacing:-0.025em;color:var(--ink)}
.ws-kept-ledger dt::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);flex:none;transform:translateY(-1px)}
.ws-kept-ledger dd{margin:0;font-size:15.5px;line-height:1.55;color:var(--muted)}
.ws-kept-ledger .is-key dt{color:var(--orange-dk)}
.ws-kept-ledger .is-key dt::before{background:var(--orange-dk)}

/* ---------- 1b. the standard: one website, desktop and phone ----------
   The desktop and the phone share one grid cell, the phone pinned to the
   cell's bottom-right corner and breaking the window's edge - the same
   device the homepage hero uses, so the two read as one language. */
.ws-std{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:22px 64px;align-items:center;margin-top:8px}
.ws-std-desk{grid-area:1/1;padding:0 72px 36px 0}
.ws-std-sm .sm-hero{height:176px}
.ws-std-phone{grid-area:1/1;justify-self:end;align-self:end;z-index:2}
.ws-std-smp{width:176px}
.ws-std-cap{grid-area:2/1;margin:0;font-size:13px;line-height:1.45;color:var(--muted)}
.ws-std-facts{grid-area:1/2;list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.ws-std-facts li{padding:18px 0;border-bottom:1px solid var(--line)}
.ws-std-facts b{display:block;font-family:var(--fh);font-size:17px;font-weight:700;letter-spacing:-0.025em;color:var(--ink)}
.ws-std-facts span{display:block;margin-top:5px;font-size:15px;line-height:1.55;color:var(--muted)}

/* ---------- 3. built around the business: three trades, three websites ---------- */
.ws-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:8px}
.ws-trio-frame{margin-bottom:18px}
.ws-trio-sm .sm-hero{height:118px}
.ws-trio-sm .sm-hero-copy p,.ws-trio-sm .sm-areas{display:none}
.ws-trio-k{margin:0;font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-dk)}
.ws-trio-line{margin:8px 0 0;font-size:15.5px;line-height:1.55;color:var(--muted)}

@media (max-width:1040px){
  .ws-kept-grid{grid-template-columns:1fr;gap:40px}
  .ws-std{grid-template-columns:minmax(0,1fr);gap:34px}
  .ws-std-facts{grid-area:auto}
  .ws-std-cap{grid-area:auto}
  .ws-std-desk,.ws-std-phone{grid-area:1/1}
}
@media (max-width:820px){
  .ws-trio{grid-template-columns:minmax(0,1fr);gap:34px}
}
@media (max-width:640px){
  .ws-kept{padding-bottom:56px}
  .ws-kept-ledger > div{grid-template-columns:1fr;gap:6px;padding:14px 0}
  .ws-kept-ledger dt{font-size:16px}
  .ws-kept-ledger dd{font-size:15px}
  /* the phone keeps its place on the window's corner, smaller, because
     "great on phones" is the claim and the phone is the proof */
  .ws-std-desk{padding:0 46px 30px 0}
  .ws-std-sm .sm-hero{height:128px}
  .ws-std-sm .sm-services{display:none}
  .ws-std-smp{width:124px}
  /* two nav links are enough at 300px; the mock clips the rest otherwise */
  .ws-std-sm .sm-nav > span:nth-child(n+4),.ws-trio-sm .sm-nav > span:nth-child(n+4){display:none}
  .ws-std-facts li{padding:14px 0}
  .ws-std-facts b{font-size:16px}
}