/* PrimeStart - page styles: about
   Loaded on /about/ only.

   The hero (a photograph of the work with the promise overlapping its
   corner, the business changing every few seconds) is frozen by the owner;
   its rules are the first block below and are unchanged. Everything from
   "1. Why PrimeStart exists" onwards was rebuilt on 4 September 2026 and is
   prefixed ab-. The phone layout (<=640px) sits at the end of this file:
   the About page is composed for a phone rather than stacked. */

/* ---------- hero ----------
   The About page took the standard page hero on 9 September 2026
   (template-parts/layout/page-hero.php; .hero-std in primestart.css), so it
   has no hero rules of its own any more, and must not grow any: the whole
   point of that component is that no page decides its own hero size.

   What stood here was the promise as a statement panel with the Client
   Platform on a phone breaking its edge - 29 rules across four breakpoints,
   removed with the markup they styled. The .ab-phone and .ab-dash rules
   below stay, because the page uses that dashboard again further down. */
.ab-dash-stage-live{background:#E6F4EA;color:#1F7A4D}
.ab-dash-steps li.done.now::before{background:var(--orange);border-color:var(--orange);box-shadow:0 0 0 3px var(--wash)}
@media (max-width:1040px){
}
@media (max-width:820px){
}
@media (max-width:640px){
}
/* ---------- shared pieces ---------- */
.ab-n{
  display:inline-block;font-family:var(--fh);font-size:13px;font-weight:800;letter-spacing:.08em;
  color:var(--orange);font-variant-numeric:tabular-nums;
}
.ab-ticks{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ab-ticks li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.ab-ticks .tick{margin-top:3px}

/* ---------- 1. why PrimeStart exists ---------- */
.ab-story{padding-bottom:104px}
.ab-story-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:72px;align-items:start}
.ab-statement{
  font-size:clamp(40px,5.2vw,68px);font-weight:800;line-height:1;letter-spacing:-0.05em;max-width:9ch;
  margin-top:6px;
}
.ab-story-copy{padding-top:58px}
.ab-big{font-family:var(--fh);font-size:clamp(20px,1.9vw,24px);font-weight:600;line-height:1.35;letter-spacing:-0.03em;color:var(--ink);max-width:26ch;margin-bottom:22px}
.ab-story-copy > p:not(.ab-big):not(.ab-never-k){font-size:17px;line-height:1.65;color:var(--muted);max-width:52ch;margin-bottom:16px}
.ab-never-k{margin-top:34px;font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.ab-never{list-style:none;margin:12px 0 0;padding:0;max-width:52ch}
.ab-never li{
  display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line);
  font-family:var(--fh);font-size:16px;font-weight:600;letter-spacing:-0.02em;color:var(--ink);
}
.ab-never li:last-child{border-bottom:1px solid var(--line)}
.ab-never li::before{
  content:"";width:18px;height:18px;flex:none;border-radius:50%;
  background:var(--wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.5 5.5l7 7M12.5 5.5l-7 7' stroke='%23B44E08' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/18px no-repeat;
}

/* ---------- 2. the usual experience ---------- */
.ab-problem-head{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:end;margin-bottom:56px}
.ab-problem-head .eyebrow{grid-column:1/-1;margin-bottom:0}
.ab-problem-head h2{max-width:18ch}
.ab-problem-head .lede{padding-bottom:6px}
.ab-ledger{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 64px}
.ab-ledger li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:26px 0;border-top:1px solid var(--line)}
.ab-ledger li:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
.ab-ledger .ab-n{padding-top:6px}
.ab-ledger h3{font-size:19px;letter-spacing:-0.025em}
.ab-ledger p{margin-top:8px;font-size:15.5px;line-height:1.55;color:var(--muted);max-width:40ch}

/* ---------- 3. the approach ---------- */
.ab-approach{padding:112px 0}
.ab-approach-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.ab-approach-words{position:sticky;top:120px}
.ab-line{
  font-family:var(--fh);font-size:clamp(36px,4.5vw,62px);font-weight:800;line-height:1.04;letter-spacing:-0.048em;
  color:#fff;margin:0;
}
.ab-line + .ab-line{margin-top:4px}
.ab-line-you{color:var(--amber);margin-top:26px}
.ab-approach-copy h2{color:#fff;max-width:14ch}
.ab-approach-copy > p:not(.ab-approach-terms){margin-top:20px;font-size:17px;line-height:1.65;color:var(--on-dark-muted);max-width:50ch}
.ab-combined{margin:36px 0 0;display:grid}
.ab-combined > div{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:14px 0;border-top:1px solid rgba(255,255,255,.13)}
.ab-combined > div:last-child{border-bottom:1px solid rgba(255,255,255,.13)}
.ab-combined dt{font-family:var(--fh);font-size:16px;font-weight:700;letter-spacing:-0.025em;color:#fff;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.ab-combined dt em{font-style:normal;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);font-weight:700}
.ab-combined dd{margin:0;font-size:15px;line-height:1.5;color:var(--on-dark-muted)}
.ab-approach-terms{margin-top:30px;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;font-size:15px;color:var(--on-dark-muted)}
.ab-approach-terms b{font-family:var(--fh);font-size:20px;font-weight:800;letter-spacing:-0.035em;color:#fff}
.ab-approach-terms .link-u{color:var(--amber);border-bottom-color:rgba(240,160,60,.4);font-size:15px}

/* ---------- 4. the Client Platform ---------- */
.ab-platform-grid{display:grid;grid-template-columns:1fr .92fr;gap:80px;align-items:center}
.ab-platform-copy h2{max-width:16ch}
.ab-platform-copy .lede{margin-top:20px}
.ab-platform-lists{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:36px}
.ab-list-h{font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}

.ab-platform-art{position:relative;min-height:600px;display:flex;justify-content:flex-end;padding-right:16px}
.ab-phone{
  width:300px;padding:12px;border-radius:40px;background:var(--ink);
  box-shadow:0 40px 80px -40px rgba(18,33,47,.6),inset 0 0 0 2px rgba(255,255,255,.08);
  position:relative;z-index:2;
}
.ab-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}
.ab-dash{background:var(--paper);border-radius:30px;padding:44px 16px 18px;font-family:var(--fb);color:var(--ink);overflow:hidden;min-height:560px}
.ab-dash-top{display:flex;align-items:center;justify-content:space-between;font-size:12px}
.ab-dash-logo{display:flex;align-items:center;gap:6px;font-family:var(--fh);font-weight:800;font-size:13px;letter-spacing:-0.04em}
.ab-dash-logo i{width:16px;height:16px;border-radius:5px;background:var(--orange);display:inline-block;position:relative}
.ab-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}
.ab-dash-acct{color:var(--muted);font-size:11.5px}
.ab-dash-hello{margin-top:18px;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ab-dash-hello b{font-family:var(--fh);font-size:18px;font-weight:800;letter-spacing:-0.035em}
.ab-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}
.ab-dash-steps{list-style:none;margin:16px 0 0;padding:0;position:relative}
.ab-dash-steps::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;background:var(--line)}
.ab-dash-steps li{position:relative;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0 8px 26px;font-size:13px;font-weight:500;color:var(--muted)}
.ab-dash-steps li::before{content:"";position:absolute;left:2px;top:50%;width:12px;height:12px;border-radius:50%;background:var(--white);border:2px solid var(--line);transform:translateY(-50%)}
.ab-dash-steps li.done{color:var(--ink)}
.ab-dash-steps li.done::before{background:var(--orange);border-color:var(--orange)}
.ab-dash-steps li.now{color:var(--ink);font-weight:600}
.ab-dash-steps li.now::before{border-color:var(--orange);box-shadow:0 0 0 3px var(--wash)}
.ab-dash-steps em{font-style:normal;font-size:11px;color:var(--muted)}
.ab-dash-steps li.done em{color:var(--orange-dk)}
.ab-dash-msg{margin-top:16px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.ab-dash-k{display:block;font-family:var(--fh);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ab-dash-msg p{font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.ab-dash-actions{margin-top:14px;display:flex;gap:6px;flex-wrap:wrap}
.ab-dash-actions span{font-family:var(--fh);font-size:11.5px;font-weight:700;letter-spacing:-0.01em;padding:8px 11px;border-radius:100px;background:var(--white);border:1px solid var(--line);color:var(--ink)}
.ab-dash-actions span:first-child{background:var(--orange);border-color:var(--orange);color:#fff}
.ab-report{
  position:absolute;left:-28px;bottom:40px;width:236px;z-index:3;
  background:var(--white);border:1px solid var(--line);border-radius:16px;padding:16px 18px;
  box-shadow:0 30px 60px -34px rgba(18,33,47,.45);
}
.ab-report-rows{display:grid}
.ab-report-rows > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--muted)}
.ab-report-rows b{font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:-0.02em;color:var(--ink);text-align:right}

/* ---------- 5. what we believe ---------- */
/* the head takes the first cell of a two-column grid and the five beliefs
   flow after it, so the page reads head, 01 / 02, 03 / 04, 05 */
.ab-beliefs .wrap{display:grid;grid-template-columns:1fr 1fr;gap:0 72px;align-items:start}
.ab-beliefs-head{padding:30px 0 34px;padding-right:40px}
.ab-beliefs-head h2{max-width:14ch}
.ab-belief-list{list-style:none;margin:0;padding:0;display:contents}
.ab-belief-list li{padding:30px 0 34px;border-top:1px solid var(--line)}
.ab-belief-list h3{margin-top:14px;font-size:clamp(24px,2.4vw,30px);letter-spacing:-0.035em;max-width:16ch}
.ab-belief-list p{margin-top:14px;font-size:16.5px;line-height:1.6;color:var(--muted);max-width:44ch}

/* ---------- 6. how PrimeStart works ---------- */
.ab-how-head{margin-bottom:56px}
.ab-how-head h2{max-width:22ch}
.ab-spine{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:48px 32px}
.ab-spine li{position:relative;padding-top:22px;border-top:2px solid var(--line)}
.ab-spine li::before{content:"";position:absolute;left:0;top:-2px;width:44px;height:2px;background:var(--orange)}
.ab-spine .ab-n{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:#FBEBDD;border:1px solid rgba(217,98,14,.28);color:var(--orange-dk);font-size:14px;letter-spacing:0;
}
.ab-spine h3{margin-top:16px;font-size:18.5px;letter-spacing:-0.025em}
.ab-spine p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--muted)}
.ab-how-link{margin-top:48px}

/* ---------- 7. who it is for ---------- */
.ab-for .eyebrow{margin-bottom:28px}
.ab-for-line{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  font-family:var(--fh);font-size:clamp(24px,3vw,40px);font-weight:700;letter-spacing:-0.04em;line-height:1.15;color:var(--ink);
}
.ab-for-line i{width:8px;height:8px;border-radius:50%;background:var(--orange);flex:none}
.ab-for-note{margin-top:28px;font-size:17px;line-height:1.65;color:var(--muted);max-width:66ch}

/* ---------- 8. technology and service ---------- */
.ab-tech-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.ab-tech-a,.ab-tech-b{font-family:var(--fh);font-size:clamp(30px,3.4vw,46px);font-weight:800;line-height:1.08;letter-spacing:-0.045em;max-width:15ch;text-wrap:balance}
.ab-tech-a{color:var(--ink)}
.ab-tech-b{color:var(--orange-dk);margin-top:12px}
.ab-tech-copy p{font-size:17px;line-height:1.65;color:var(--muted);max-width:50ch}
.ab-tech-copy p + p{margin-top:16px}
.ab-hold{list-style:none;margin:26px 0 0;padding:0;display:grid}
.ab-hold li{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--line);font-family:var(--fh);font-size:16px;font-weight:600;letter-spacing:-0.02em;color:var(--ink);line-height:1.4}
.ab-hold li:last-child{border-bottom:1px solid var(--line)}
.ab-hold .tick{margin-top:3px}

/* ---------- 9. final ---------- */
.ab-final h2{max-width:17ch;text-wrap:balance}

/* ============================================================
   Responsive: tablet
   ============================================================ */
@media (max-width:1040px){
  .ab-story-grid,.ab-approach-grid,.ab-platform-grid,.ab-tech-grid{grid-template-columns:1fr;gap:44px}
  .ab-story-copy{padding-top:0}
  .ab-statement{max-width:12ch}
  .ab-approach-words{position:static}
  .ab-problem-head{grid-template-columns:1fr;gap:16px;margin-bottom:40px}
  .ab-spine{grid-template-columns:1fr 1fr;gap:36px 32px}
  .ab-platform-art{min-height:0;justify-content:flex-start;padding-left:0;padding-bottom:0}
  .ab-report{left:auto;right:0;bottom:24px}
  .ab-beliefs .wrap{grid-template-columns:1fr;gap:0}
  .ab-beliefs-head{padding:0 0 28px}
}

/* 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){
  .ab-problem-head{grid-template-columns:1.1fr .9fr;gap:40px;align-items:end;margin-bottom:40px}
}
@media (max-width:900px){
  .ab-problem-head{grid-template-columns:1fr;gap:14px;align-items:start;margin-bottom:40px}
}
@media (max-width:820px){
  .ab-ledger{grid-template-columns:1fr;gap:0}
  .ab-ledger li:nth-last-child(2){border-bottom:0}
  .ab-approach{padding:88px 0}
}

/* ============================================================
   Phone composition (<=640px): the same page, composed for a phone.
   Story, the problem, the approach, the Client Platform, beliefs, the
   eight steps, who it is for, technology and service, CTA. Nothing is
   removed; statements are sized to hold two or three lines, ledgers
   become single columns, the phone illustration is centred with the
   report card beneath it, and section rhythm is tightened.
   ============================================================ */
@media (max-width:640px){
  .ab-story{padding:64px 0 60px}
  .ab-story-grid{gap:28px}
  .ab-statement{font-size:clamp(34px,10vw,42px);letter-spacing:-0.045em;max-width:none}
  .ab-big{font-size:19px;max-width:none;margin-bottom:16px}
  .ab-story-copy > p:not(.ab-big):not(.ab-never-k){font-size:16px;margin-bottom:14px}
  .ab-never-k{margin-top:26px}
  .ab-never li{padding:11px 0;font-size:15px}

  .ab-problem{padding:60px 0}
  .ab-problem-head{margin-bottom:26px}
  .ab-problem-head h2{font-size:clamp(27px,7.4vw,30px);max-width:none}
  .ab-problem-head .lede{font-size:16.5px}
  .ab-ledger li{grid-template-columns:34px 1fr;gap:12px;padding:16px 0}
  .ab-ledger h3{font-size:17px}
  .ab-ledger p{font-size:14.5px;margin-top:5px}

  .ab-approach{padding:64px 0}
  .ab-approach-grid{gap:34px}
  .ab-line{font-size:clamp(32px,9.2vw,40px)}
  .ab-line-you{margin-top:18px}
  .ab-approach-copy h2{font-size:clamp(27px,7.4vw,30px);max-width:none}
  .ab-approach-copy > p:not(.ab-approach-terms){font-size:16px}
  .ab-combined{margin-top:26px}
  .ab-combined > div{grid-template-columns:104px 1fr;gap:12px;padding:11px 0}
  .ab-combined dt{font-size:14.5px}
  .ab-combined dd{font-size:14px;line-height:1.45}
  .ab-approach-terms{margin-top:24px;gap:6px 14px}

  .ab-platform{padding:60px 0}
  .ab-platform-grid{gap:36px}
  .ab-platform-copy h2{font-size:clamp(27px,7.4vw,30px);max-width:none}
  .ab-platform-copy .lede{font-size:16.5px;margin-top:14px}
  .ab-platform-lists{grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
  .ab-ticks li{font-size:14.5px;gap:8px}
  .ab-platform-art{flex-direction:column;align-items:center;gap:16px;min-height:0}
  .ab-phone{width:min(280px,100%)}
  .ab-dash{min-height:0;padding:40px 14px 16px}
  .ab-report{position:static;width:min(280px,100%)}

  .ab-beliefs{padding:60px 0}
  .ab-beliefs-head{padding:0 0 22px}
  .ab-beliefs-head h2{font-size:clamp(27px,7.4vw,30px)}
  .ab-belief-list li{padding:20px 0 22px}
  .ab-belief-list h3{margin-top:8px;font-size:21px;max-width:none}
  .ab-belief-list p{font-size:15px;margin-top:8px}

  .ab-how{padding:60px 0}
  .ab-how-head{margin-bottom:28px}
  .ab-how-head h2{font-size:clamp(27px,7.4vw,30px);max-width:none}
  .ab-spine{grid-template-columns:1fr;gap:0;position:relative;padding-left:0}
  .ab-spine li{display:grid;grid-template-columns:34px 1fr;column-gap:14px;padding:18px 0;border-top:1px solid var(--line)}
  .ab-spine li::before{display:none}
  .ab-spine .ab-n{grid-row:1/3;width:30px;height:30px;font-size:13px}
  .ab-spine h3{margin-top:4px;font-size:17px}
  .ab-spine p{grid-column:2;margin-top:6px;font-size:14.5px}
  .ab-how-link{margin-top:22px}
  .ab-how-link .link-u,.ab-approach-terms .link-u{display:inline-block;padding:10px 0;min-height:44px;line-height:24px}

  .ab-for{padding:52px 0}
  .ab-for .eyebrow{margin-bottom:18px}
  .ab-for-line{font-size:22px;gap:8px 12px}
  .ab-for-line i{width:6px;height:6px}
  .ab-for-note{margin-top:20px;font-size:16px}

  .ab-tech{padding:60px 0}
  .ab-tech-grid{gap:26px}
  .ab-tech-a,.ab-tech-b{font-size:clamp(28px,7.8vw,34px);max-width:none}
  .ab-tech-b{margin-top:8px}
  .ab-tech-copy p{font-size:16px}
  .ab-hold{margin-top:20px}
  .ab-hold li{font-size:15px;padding:11px 0}

  .ab-final{padding:72px 0}
  .ab-final h2{font-size:clamp(28px,8vw,34px)}
  .ab-final p{font-size:17px}
  .ab-final .btns .btn{width:100%}
}
/* ============================================================
   Phone, second pass (5 September 2026)

   Measured at 390px the page ran 11,917px over ten sections, with four
   of them past 1,200px - fifteen phone screens for a page a reader is
   meant to finish. Nothing here removes copy: the four tall sections
   change SHAPE instead.

     the usual experience  six named problems become a hairline
                           accordion (data-m-acc in about.php)
     the approach          the seven things combined become a swipe rail
                           on the dark ground
     the Client Platform   the dashboard phone is cropped with a mask and
                           the SEO report card sits over its faded
                           edge, the way the desktop composition reads
     what we believe       five beliefs become an accordion, first open
     how PrimeStart works  eight steps become a swipe rail of numbered
                           cards, so the sequence reads as a rail

   Supporting text that fell below the 14.5px floor is raised: the hero
   ledger, the plan ledger's descriptions, the "optional" tag and the
   section numerals. The tracked uppercase eyebrows and group labels stay
   at their design-system sizes (11.5-12.5px).
   ============================================================ */
@media (max-width:640px){
  /* --- hero (composition frozen): tighter rhythm, readable ledger --- */

  /* --- shared --- */
  .ab-n{font-size:14.5px}

  /* --- 1. why PrimeStart exists --- */
  .ab-story{padding:46px 0 44px}
  .ab-story-grid{gap:22px}
  .ab-statement{font-size:clamp(31px,8.8vw,37px)}
  .ab-big{font-size:18px;line-height:1.32;margin-bottom:14px}
  .ab-story-copy > p:not(.ab-big):not(.ab-never-k){line-height:1.55;margin-bottom:12px}
  .ab-never-k{margin-top:20px}
  .ab-never{margin-top:8px}
  .ab-never li{padding:8px 0;font-size:15px;line-height:1.3;gap:11px}
  .ab-never li::before{width:16px;height:16px;background-size:16px}

  /* --- 2. the usual experience: a hairline accordion of six problems --- */
  .ab-problem{padding:46px 0}
  .ab-problem-head{margin-bottom:14px}
  .ab-problem-head .lede{font-size:16px;line-height:1.5}
  .ab-ledger.m-acc{border-top:1px solid var(--ink)}
  .ab-ledger.m-acc > .m-acc-item{grid-template-columns:30px 1fr;gap:0 10px;align-items:start}
  .ab-ledger .m-acc-btn{min-height:50px;padding:13px 0;font-size:16.5px}
  .ab-ledger .m-acc-item .ab-n{padding-top:19px}
  .ab-ledger .m-acc-item > .m-acc-panel{grid-column:2;padding-bottom:14px}
  .ab-ledger .m-acc-panel p{margin-top:0;font-size:14.5px;line-height:1.5;max-width:none}

  /* --- 3. the approach: the plan ledger becomes a swipe rail --- */
  .ab-approach{padding:46px 0}
  .ab-approach-grid{gap:26px}
  /* a 1fr grid track sizes to min-content, so without this the swipe rail
     below stretches the column and the whole page scrolls sideways */
  .ab-approach-grid > *,.ab-platform-grid > *,.ab-story-grid > *,.ab-tech-grid > *{min-width:0}
  .ab-line{font-size:clamp(27px,7.6vw,32px)}
  .ab-line-you{margin-top:14px}
  .ab-approach-copy > p:not(.ab-approach-terms){margin-top:14px;font-size:15.5px;line-height:1.55}
  .ab-combined{
    display:flex;flex-wrap:nowrap;overflow-x:auto;gap:10px;
    margin:20px calc(var(--pad) * -1) 0;padding:2px var(--pad) 12px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .ab-combined::-webkit-scrollbar{display:none}
  .ab-combined > div{
    flex:0 0 64%;max-width:236px;scroll-snap-align:start;display:block;
    padding:13px 15px 15px;border:1px solid rgba(255,255,255,.16);border-radius:12px;
    background:rgba(255,255,255,.05);
  }
  .ab-combined > div:last-child{border-bottom-color:rgba(255,255,255,.16)}
  .ab-combined dt{font-size:15px}
  .ab-combined dt em{font-size:11.5px}
  .ab-combined dd{margin-top:6px;font-size:14.5px;line-height:1.45}
  .ab-approach-terms{margin-top:20px}

  /* --- 4. the Client Platform: crop the phone, keep the report over it ---
     Rendered whole, the dashboard phone and the report card below it were
     809px of a 1,563px section and still small. Cropped with a mask, the
     phone shows exactly what matters (the project stages and the latest
     update) and the SEO report sits over its faded edge. */
  .ab-platform{padding:44px 0}
  .ab-platform-grid{gap:20px}
  .ab-platform-copy h2{font-size:clamp(26px,7.2vw,29px)}
  .ab-platform-copy .lede{font-size:15.5px;line-height:1.45;margin-top:10px}
  .ab-platform-lists{gap:14px;margin-top:18px}
  .ab-list-h{margin-bottom:7px;padding-bottom:7px}
  .ab-ticks{gap:6px}
  .ab-ticks li{font-size:14.5px;line-height:1.28;gap:7px}
  .ab-ticks .tick{width:14px;height:14px;margin-top:2px}
  .ab-platform-art{
    position:relative;display:flex;flex-direction:column;align-items:center;gap:0;
    height:auto;min-height:0;padding:0;
  }
  .ab-platform-art .ab-phone{
    position:relative;width:252px;height:306px;overflow:hidden;flex:none;
    padding:10px 10px 0;border-radius:34px 34px 0 0;
    -webkit-mask-image:linear-gradient(#000 84%,rgba(0,0,0,0));
    mask-image:linear-gradient(#000 84%,rgba(0,0,0,0));
  }
  .ab-platform-art .ab-phone::before{top:10px}
  .ab-platform-art .ab-dash{min-height:0;padding:36px 13px 0;border-radius:26px 26px 0 0}
  /* the SEO report tucks under the phone's faded edge rather than
     sitting across it: on a 375px screen a side-by-side card covered
     half the dashboard it is meant to sit beside */
  .ab-platform-art .ab-report{
    position:relative;left:auto;bottom:auto;z-index:3;
    width:min(268px,100%);margin-top:-26px;padding:13px 15px;
    box-shadow:0 20px 40px -26px rgba(18,33,47,.45);
  }
  .ab-platform-art .ab-report-rows > div{padding:7px 0}

  /* --- 5. what we believe: an accordion, first belief open --- */
  .ab-beliefs{padding:46px 0}
  .ab-beliefs-head{padding:0 0 14px}
  .ab-belief-list.m-acc{border-top:1px solid var(--ink)}
  .ab-belief-list.m-acc > .m-acc-item{display:grid;grid-template-columns:30px 1fr;column-gap:10px;align-items:start}
  .ab-belief-list .m-acc-btn{min-height:52px;padding:14px 0;font-size:17px}
  .ab-belief-list .m-acc-item .ab-n{padding-top:20px}
  .ab-belief-list .m-acc-item > .m-acc-panel{grid-column:2;padding-bottom:16px}
  .ab-belief-list .m-acc-panel p{margin-top:0;font-size:14.5px;line-height:1.5;max-width:none}

  /* --- 6. how PrimeStart works: eight steps as a numbered swipe rail --- */
  .ab-how{padding:46px 0}
  .ab-how-head{margin-bottom:18px}
  .ab-spine{
    display:flex;flex-wrap:nowrap;overflow-x:auto;gap:12px;
    margin:0 calc(var(--pad) * -1);padding:2px var(--pad) 14px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .ab-spine::-webkit-scrollbar{display:none}
  .ab-spine li{
    flex:0 0 69%;max-width:248px;scroll-snap-align:start;display:block;
    padding:16px 16px 18px;background:var(--white);
    border:1px solid var(--line);border-top:3px solid var(--orange);border-radius:0 0 14px 14px;
  }
  .ab-spine .ab-n{width:30px;height:30px;font-size:14.5px}
  .ab-spine h3{margin-top:12px;font-size:17px}
  .ab-spine p{margin-top:7px;font-size:14.5px;line-height:1.45}
  .ab-how-link{margin-top:18px}

  /* --- 7. who it is for --- */
  .ab-for{padding:42px 0}
  .ab-for-note{margin-top:16px;line-height:1.55}

  /* --- 8. technology and service --- */
  .ab-tech{padding:46px 0}
  .ab-tech-grid{gap:20px}
  .ab-tech-a,.ab-tech-b{font-size:clamp(26px,7.4vw,32px)}
  .ab-tech-copy p{line-height:1.55}
  .ab-hold{margin-top:18px}
  .ab-hold li{padding:10px 0;font-size:15px;line-height:1.35}

  /* --- 9. final --- */
  .ab-final{padding:56px 0}
}
@media (max-width:360px){
  .ab-platform-lists{grid-template-columns:1fr}
  .ab-statement{font-size:31px}
  .ab-line{font-size:27px}
  .ab-for-line{font-size:20px}
  .ab-platform-art .ab-phone{width:232px}
  .ab-platform-art .ab-report{width:min(248px,100%)}
  .ab-combined > div{flex-basis:72%}
  .ab-spine li{flex-basis:76%}
}

/* ============================================================
   1. "You never have to" as a two-column ledger (MASTER SPECIFICATION,
   screenshot 10 RED): crossed on the left, ticked on the right.
   ============================================================ */
.ab-never-ledger{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:8px}
.ab-never-col .ab-never-k{margin:0 0 6px;padding-bottom:12px;border-bottom:1px solid var(--ink)}
.ab-never-col--we .ab-never-k{color:var(--orange-dk)}
.ab-never-ledger .ab-never{list-style:none;margin:0;padding:0;max-width:none}
.ab-never-ledger .ab-never li{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-bottom:1px solid var(--line);font-family:var(--fh);font-size:16px;font-weight:600;letter-spacing:-0.02em;color:var(--ink);line-height:1.4}
.ab-never-ledger .ab-never li::before{content:none}
.ab-never-ledger .ab-never .cross,.ab-never-ledger .ab-never .tick{margin-top:3px}
.ab-never-ledger .ab-never .cross{color:#B9B0A2}
.ab-never-col--you li{color:var(--muted);font-weight:500}
@media (max-width:820px){.ab-never-ledger{grid-template-columns:1fr;gap:28px}}