/* Class Alpha's client-site standard: one palette, two complementary locally hosted faces,
   three type steps, one section shell and restrained section boundaries. */
:root{
  --font-display:'Geist',sans-serif;--font-body:'Geist',sans-serif;
  --ca-navy:#021a3e;--ca-red:#e01933;--ca-gold:#fbbc04;--ca-paper:#e9f0fa;
  --ca-ink:#0e2240;--ca-muted:#4a5a72;
  --navy:var(--ca-navy);--paper:var(--ca-paper);--ink:var(--ca-ink);--muted:var(--ca-muted);
  --fs-h1:38px;--fs-h2:30px;--fs-h3:24px;--fs-body:16px;--fs-small:14px;
  --shell-y:48px;--shell-x:25.5px;--content-max:1320px;
}
@media(min-width:768px){:root{--fs-h1:52px;--fs-h2:42px;--fs-h3:25px;--fs-body:17px;--shell-y:64px;--shell-x:48px}}
@media(min-width:1025px){:root{--fs-h1:56px;--fs-h2:44px;--fs-h3:26px;--shell-y:68px;--shell-x:51px}}
body{font-family:var(--font-body);font-size:var(--fs-body);line-height:1.8;font-weight:400;font-synthesis:none;letter-spacing:normal}
button,input,textarea,select{font-family:var(--font-body);font-size:16px}
h1,h2,h3{font-family:var(--font-display);font-weight:600;text-transform:none;margin:0}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h3{font-size:var(--fs-h3)}
p,li,blockquote{font-family:var(--font-body);font-size:var(--fs-body);line-height:1.8}
.ca-home h1,.ca-home h2,.ca-home h3,.ca-showcase h1,.ca-showcase h2,.ca-showcase h3,.ca-offer-page h1,.ca-offer-page h2,.ca-offer-page h3{font-weight:600;text-transform:none}
.ca-home h1,.ca-showcase h1,.ca-offer-page h1{font-size:var(--fs-h1)}
.ca-home h2,.ca-showcase h2,.ca-offer-page h2{font-size:var(--fs-h2)}
.ca-home h3,.ca-showcase h3,.ca-offer-page h3{font-size:var(--fs-h3)}
.ca-home .wrap,.ca-showcase .wrap,.offer-wrap,.ca-nav-inner{max-width:calc(var(--content-max) + 2 * var(--shell-x));padding-inline:var(--shell-x);margin-inline:auto}
.ca-home main>:is(section,header)[class],.ca-offer-page main>section[class],.ca-showcase .sc-hero,.ca-showcase-close{padding-block:var(--shell-y)}
.ca-home section,.ca-offer-page section{scroll-margin-top:90px}
.ca-home .ca-hero:after{display:none}
.ca-home .ca-hero h1{line-height:1.06;letter-spacing:-.022em;max-width:620px}
.ca-home .ca-hero h1 em:after{height:4px;bottom:0}
.ca-hero-grid{gap:50px}
.ca-hero-lede,.offer-lede{font-size:var(--fs-body);line-height:1.8;margin-block:20px!important;max-width:540px}
.ca-hero-actions{gap:20px}
.ca-preview-link{font-size:14px;line-height:1.6;margin-top:20px}
.ca-hero-proof{margin-top:20px;padding-top:20px;font-size:16px}
/* Hero evidence line (Mike, Sept 10): one direct client's live-bound count under the
   actions, no stars, linking to the checkable scoreboard. Distinct from the removed
   .ca-hero-proof stat line, which stays on the design-gate collage list. */
.ca-hero-evidence{margin-top:22px;padding-top:18px;border-top:1px solid #d9e2ef;font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--ca-muted)}
.ca-hero-evidence b{color:var(--ca-navy)}
.ca-hero-evidence a{color:var(--ca-blue,#07599e);white-space:nowrap}
.ca-hero-proof small{font-size:14px;line-height:1.6}
.ca-kicker,.eyebrow,.ca-live,.ca-art-heading,.ca-swipe-note{font-family:var(--font-body);letter-spacing:normal;font-size:14px;font-weight:600;line-height:1.6}
.ca-kicker,.eyebrow{margin-bottom:20px}
.ca-art-heading{font-size:12px}
.ca-brand>span{font-family:var(--font-display);font-size:24px;font-weight:600;line-height:1.05}
.ca-brand>span>span{font-family:var(--font-body);letter-spacing:normal;font-size:12px;font-weight:600;margin-top:4px}
.ca-desktop-links>a{font-size:17px;font-weight:500}
.ca-nav-inner{min-height:84px}
.ca-desktop-links{gap:30px}
.ca-home .btn,.ca-solid-button,.ca-offer-page .ca-solid-button,.sc-cta,.ca-nav-action{font-family:var(--font-display);font-size:16px;font-weight:600;line-height:1.2;letter-spacing:normal;text-transform:none;min-height:50px;display:inline-flex;align-items:center;justify-content:center;padding:15px 24px;border-radius:3px;box-shadow:none}
@media (hover:hover) and (pointer:fine){
.ca-home .btn-gold:hover,.ca-solid-button:hover{background:var(--ca-navy);color:#fff;box-shadow:inset 0 0 0 1px #ffffff70}
.ca-home .btn-ghost:hover{background:var(--ca-gold);color:var(--ca-navy);border-color:var(--ca-gold)}
}
.ca-home .ca-hero-actions .btn{white-space:nowrap}
.ca-text-link,.ca-offer-strip a,.board-link{font-family:var(--font-display);font-weight:500;font-size:16px;letter-spacing:normal}
.ca-browser,.ca-request{transform:none}
.ca-request{margin:-35px 0 0 -16px;max-width:390px;gap:20px}
.ca-request strong{font-family:var(--font-display);font-size:24px;font-weight:600;line-height:1.2}
.ca-request p{font-size:14px;line-height:1.6}
.ca-request .ca-kicker{font-size:12px}
.ca-hero-art figcaption{font-family:var(--font-body);font-size:14px;line-height:1.6}
.ca-browser-bar{font-family:var(--font-body);font-size:12px}
.ca-seam{height:48px;width:100%;background:var(--seam-from);line-height:0;position:relative;overflow:hidden;margin:0;padding:0}
.ca-seam svg{display:block;width:100%;height:100%}
.ca-seam-fill{fill:var(--seam-to)}
.ca-seam-line{fill:none;stroke:var(--ca-red);stroke-width:4;vector-effect:non-scaling-stroke}
.ca-home .statband{background:var(--ca-paper);color:var(--ca-ink)}
.ca-home .stat .num{font-family:var(--font-display);font-size:44px;font-weight:700;color:var(--ca-navy);line-height:1.2}
.ca-home .stat .lbl{font-family:var(--font-body);font-size:14px;line-height:1.6;letter-spacing:normal;color:var(--ca-muted)}
.ca-home .statnote{font-family:var(--font-body);font-size:var(--fs-body);line-height:1.8;color:var(--ca-muted);margin:20px auto 0}
.ca-home .grw{margin-top:40px;max-width:calc(var(--content-max) + 2 * var(--shell-x));padding-inline:var(--shell-x)}
.grw-title,.grw-scoreline b{color:var(--ca-navy)}
.grw-count,.grw-count:hover{font-family:var(--font-body);font-size:14px;color:var(--ca-muted)}
.grw-card{border:1px solid #c8d4e3;box-shadow:none;border-radius:5px;padding:24px;gap:12px}
.grw-who b{font-family:var(--font-body);font-size:16px;font-weight:600}
.grw-who span,.grw-src{font-family:var(--font-body);font-size:14px;line-height:1.6;color:var(--ca-muted)}
.grw-card blockquote{font-family:var(--font-body);font-size:var(--fs-body);line-height:1.8;color:var(--ca-ink);-webkit-line-clamp:5}
.grw-avatar{display:none}
.grw-nav{font-family:var(--font-display);box-shadow:none;border:1px solid #b0bed0;min-width:44px;min-height:44px}
.grw-dots button{background:#6e8098;background-clip:content-box;width:44px;height:44px;padding:17px}
.grw-dots button.on{background:var(--ca-navy);background-clip:content-box;transform:none}
.ca-home .ca-websites{background:#fff}
.ca-section-heading{gap:40px;margin-bottom:20px;align-items:end}
.ca-section-heading p{font-size:var(--fs-body);line-height:1.8;max-width:440px}
.ca-section-heading .ca-kicker{font-size:14px;margin-bottom:20px}
.ca-work-grid{gap:30px}
.ca-work-info{margin-top:20px;align-items:start;flex-direction:column;gap:8px}
.ca-work-info h3{font-size:var(--fs-h3);font-weight:600;line-height:1.2}
.ca-live{font-size:14px}
.ca-work p{font-size:16px;margin-top:8px;line-height:1.8}
.ca-websites-bottom{margin-top:20px;gap:20px}
.ca-offer-strip{margin-top:30px;padding:24px;gap:20px}
.ca-offer-strip strong{font-family:var(--font-display);font-size:24px;font-weight:600;line-height:1.2}
.ca-offer-strip p{font-size:16px;line-height:1.8;margin-top:8px}
.ca-home .proof .lede,.ca-home .demo .lede,.ca-home .pricing .lede{font-size:var(--fs-body);line-height:1.8;margin-top:20px}
.ca-home .proof .cards{gap:30px;margin-top:30px}
.ca-home .card .biz{font-family:var(--font-display);font-size:20px;line-height:1.3;text-transform:none;letter-spacing:normal}
.ca-home .card .loc,.ca-home .card .range{font-family:var(--font-body);font-size:14px;line-height:1.6}
.ca-home .card .gain{font-family:var(--font-display);font-size:40px;font-weight:600}
.ca-home .board-link{margin-top:20px;font-size:16px}
.ca-home .ca-more-examples{background:transparent;margin:30px auto 0;max-width:1320px;border-top:1px solid #ffffff44;border-bottom:1px solid #ffffff44}
.ca-home .ca-more-examples>summary{font-family:var(--font-display);font-size:20px;font-weight:500;color:#fff;padding:20px 28px;line-height:1.4;text-align:center}
.ca-home .ca-more-examples .demo{background:transparent;color:#fff;padding-block:24px}
.ca-home .ca-more-examples .demo h2{font-size:var(--fs-h2)}
.ca-home .ca-more-examples .demo .lede,.ca-home .ca-more-examples .kicker{color:#c4d2e5}
.ca-home .ca-more-examples .eyebrow{color:var(--ca-gold)}
.ca-home .ca-more-examples .wrap{padding-inline:0}
.ca-home .vs h2{max-width:1000px;margin-inline:auto}
.ca-home .vs h2 .tagchip{font-size:inherit;line-height:inherit;vertical-align:baseline;padding:0 8px}
.ca-home .vs .vs-grid{margin-top:30px}
.ca-home .steps{gap:30px;margin-top:30px}
.ca-home .step h3{margin-top:20px}
.ca-home .step p{font-size:var(--fs-body);line-height:1.8;margin-top:20px}
.ca-home .step .n{font-family:var(--font-body);font-size:14px;letter-spacing:normal}
.ca-home .works-with{padding:24px;margin-top:30px}
.ca-home .works-with .lbl,.ca-home .works-with .apps span{font-family:var(--font-body);font-size:14px;letter-spacing:normal}
.ca-home .founder-grid{gap:50px}
.ca-home .founder p{font-size:var(--fs-body);line-height:1.8;margin-top:20px}
.ca-home .fact .fk{font-family:var(--font-display);font-size:18px;line-height:1.3;text-transform:none;letter-spacing:normal}
.ca-home .fact .fd{font-size:16px;line-height:1.8}
.ca-home .fphoto .fc-n{font-size:16px;line-height:1.3;text-transform:none;white-space:nowrap}
.ca-proof-label{white-space:nowrap}
.ca-home .fphoto .fc-n,.ca-home .fphoto .fc-r{font-family:var(--font-body);letter-spacing:normal}
.ca-home .pricing .includes{font-size:var(--fs-body);line-height:1.8}
.ca-home .ca-shared-includes{margin-block:30px;padding:24px}
.ca-home .ca-shared-includes h3{font-size:var(--fs-h3);margin-bottom:20px}
.ca-shared-includes li{font-size:16px;line-height:1.8}
.ca-home .pricing .plan .price{font-family:var(--font-display);font-size:48px;line-height:1.2;margin-block:20px}
.ca-home .pricing .plan .cap,.ca-home .pricing .plan .risk,.ca-home .plans-over{font-size:14px;line-height:1.6}
.ca-home .plans .pop-tag{font-family:var(--font-display);font-size:16px;line-height:1.2}
.ca-home .plan .btn{display:flex}
.ca-home .faq .faq-list{margin-top:30px;gap:40px}
.ca-home .faq summary,.offer-questions summary{font-family:var(--font-display);font-size:20px;font-weight:500;line-height:1.4;padding:20px 30px 20px 0}
.ca-home .faq .a{font-size:16px;line-height:1.8}
.ca-home .final h2{max-width:820px}
.ca-home .final>.wrap>p{font-size:var(--fs-body);line-height:1.8;margin:20px auto}
.ca-home .final .contact{font-size:16px}
.ca-proof-detail>summary{font-family:var(--font-display);font-size:20px;line-height:1.4}
footer,.offer-footer{font-family:var(--font-body);font-size:14px;line-height:1.6}
footer a,.offer-footer .ca-footer-nav{font-family:var(--font-body);font-size:14px;line-height:1.6}
.ca-footer-links{display:flex;flex-wrap:wrap;gap:0 18px}
.offer-hero{border:0}
.offer-hero-grid,.offer-split{gap:50px}
.offer-fees b{font-family:var(--font-display);font-weight:600;font-size:56px;letter-spacing:normal}
.offer-fees span,.offer-person,.offer-price .offer-price-note{font-size:14px!important;line-height:1.6}
.offer-price .ca-solid-button{display:flex}
.offer-section-head{margin-bottom:20px}
.offer-includes-title>p:not(.ca-kicker),.offer-feature-list p,.offer-process-grid p{font-size:var(--fs-body);line-height:1.8;margin-top:20px}
.offer-feature-list article>span,.offer-process-grid article>span{font-family:var(--font-body);font-size:14px}
.offer-process-grid{margin-block:30px;gap:30px}
.offer-plain-terms strong{font-family:var(--font-display);font-size:var(--fs-h3);line-height:1.2}
.offer-questions details{padding:0}
.offer-close .offer-new-visitor{font-size:14px}
.ca-showcase .sc-hero{padding-bottom:40px}
.ca-showcase .sc-lede{font-size:var(--fs-body);line-height:1.8}
.ca-showcase .sc-grid{gap:35px 30px}
.ca-showcase .sc-info h3{font-size:var(--fs-h3)}
.ca-showcase .sc-desc{font-size:16px;line-height:1.8}
.ca-showcase .sc-hero .lede{font-size:var(--fs-body);line-height:1.8}
.ca-showcase .sc-biz{font-size:var(--fs-h3);font-weight:600;line-height:1.2;text-transform:none}
.ca-showcase .sc-loc{font-size:14px;line-height:1.6;text-transform:none}
.ca-showcase .sc-view{font-size:16px;text-transform:none}
.ca-showcase .ca-showcase-close .ca-kicker{font-size:14px;line-height:1.6}
.ca-showcase .chip,.ca-showcase .sc-pill{font-family:var(--font-body);font-size:14px;letter-spacing:normal}
.ca-showcase .sc-hero,.ca-showcase main{background:var(--ca-navy)}
.ca-showcase-close{background:var(--ca-paper)}
.ca-signup{font-family:var(--font-body);font-size:16px;line-height:1.8}
.ca-signup h1{font-size:var(--fs-h1)}.ca-signup h2{font-size:var(--fs-h2)}.ca-signup h3{font-size:var(--fs-h3)}
.ca-signup input,.ca-signup textarea,.ca-signup label,.ca-signup select{font-family:var(--font-body)}
@media(max-width:767px){
 .ca-link-separator{display:none}
  .ca-seam{height:32px}.ca-nav-inner{min-height:72px;padding-inline:22px;gap:12px}
  .ca-brand>span{font-size:21px}.ca-brand>span>span{font-size:11px}
  .ca-hero-grid{gap:30px}.ca-home .ca-hero-art{max-width:none}
  .ca-hero-actions{gap:12px;grid-template-columns:1fr}.ca-home .ca-hero-actions .btn{padding:15px 10px;font-size:16px;white-space:nowrap;gap:10px}
  .ca-home .ca-hero h1 em{white-space:normal}
  .ca-home .ca-hero h1 em:after{display:none}
  /* hero h1 <br> kept on phones (Sept 10): hiding it let text-wrap:balance strand "I" at a line end */
  .ca-hero-proof{gap:10px}.ca-hero-proof small{font-size:12px}
  .ca-art-heading{font-size:12px}.ca-request{margin:-20px 0 0;width:100%;max-width:340px;gap:14px;grid-template-columns:88px 1fr;padding:12px}
  .ca-request strong{font-size:20px}.ca-request p{font-size:14px}.ca-hero-art figcaption{font-size:12px;text-align:left}
  .ca-home .stat .num{font-size:28px}.ca-home .stat .lbl{font-size:12px}
  .ca-home .statnote{font-size:14px}.ca-home .grw{margin-top:30px}
  .grw-card{padding:20px}.grw-card blockquote{-webkit-line-clamp:6}.grw-card{flex-basis:86%}
  .grw-title{font-size:18px}.grw-src{font-size:12px}.grw-nav{display:none}
  .ca-home .ca-work-grid,.ca-home .cards{gap:20px;margin-right:calc(-1 * var(--shell-x))}
  .ca-home .ca-work,.ca-home .cards .card{flex-basis:90%}
  .ca-home .cards .card:last-child,.ca-home .ca-work:last-child{margin-right:var(--shell-x)}
  .ca-section-heading{display:block}.ca-section-heading p{margin-top:20px}.ca-section-heading .ca-kicker{margin-top:0}
  .ca-offer-strip strong{font-size:22px}.ca-offer-strip a{white-space:normal}
  .ca-home .card .gain{font-size:36px}.ca-home .ca-more-examples>summary{padding-inline:0}
  .ca-home .gallery .shot{flex-basis:80%}.ca-home .proof .cards{gap:20px}
  .ca-home .founder-grid{gap:30px}.ca-home .founder .fphoto{max-width:190px}
  .ca-home .facts{gap:20px}.ca-home .fact .fd{font-size:16px}
  .ca-home .step p{margin-top:12px}.ca-home .step h3{margin-top:12px}
  .ca-home .pricing .plan{display:grid;padding:20px;column-gap:16px}
  .ca-home .pricing .plan .price{margin:0;font-size:38px}
  .ca-home .pricing .plan .cap{font-size:14px}.ca-home .pricing .plan .risk{font-size:14px}
  .ca-home .pricing .plan>.btn{margin-top:20px;grid-column:1/-1}
  .ca-home .faq details{padding:0}.ca-home .faq .faq-list{gap:0}
  .ca-home .ca-shared-includes{padding:20px}.ca-home .ca-shared-includes h3{font-size:24px}
  .ca-home .final h2 br{display:none}.ca-home .final .btn-row{gap:20px}
  .ca-mobile-actions{gap:0;box-shadow:none}
  .ca-mobile-actions a{font-family:var(--font-display);font-size:16px;font-weight:500;line-height:1.2;display:flex;align-items:center;justify-content:center;min-height:52px;padding:12px 8px}
  .ca-home,.ca-offer-page,.ca-showcase{padding-bottom:calc(52px + env(safe-area-inset-bottom))}
  .offer-hero-grid,.offer-split{gap:30px}.offer-fees b{font-size:42px}.offer-fees b small{font-size:18px}
  .offer-price{padding:22px}.offer-price .ca-solid-button{font-size:16px}
  .offer-person{font-size:14px}.offer-feature-list article{gap:15px}
  .offer-section-head h2,.offer-process h2{font-size:30px}
  .offer-footer>.offer-wrap{gap:20px}.ca-showcase-close>.wrap{gap:20px}
}

/* The comparison is an illustration of Messages; its device text keeps native typography. */
.vs .phone{font-family:-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;font-synthesis:weight}
.vs .phone p,.vs .phone span,.vs .phone div{font-family:inherit}
.ca-home .step{background:none;border-radius:0;padding:20px 0 0}
.ca-home .faq details{background:transparent;border:0;border-top:1px solid #bdccdf;border-radius:0;margin:0;padding:0}
.ca-home .faq .faq-col{gap:0}
.ca-home .ca-shared-includes>summary{font-family:var(--font-display);font-size:24px;font-weight:600;line-height:1.2;cursor:pointer;color:var(--ca-navy)}
.ca-home .ca-shared-includes[open]>summary{margin-bottom:20px}
.ca-home .ca-shared-includes>summary:after{position:static;margin-left:16px;color:var(--ca-red)}
@media(max-width:767px){
 .ca-hero-proof small{display:none}
 .ca-home .ca-hero-art{max-width:none}
 .ca-home .ca-shared-includes>summary{font-size:20px}
 .ca-home .faq summary{font-size:18px;padding-block:18px}
 .ca-home .pricing .includes{margin:20px auto}
}
.ca-home .ba2__thennum{font-size:40px}.ca-home .ba2__nownum{font-size:56px}
@media(max-width:767px){.grw-dots{max-width:220px;margin-inline:auto;flex-wrap:wrap;gap:0}.grw-dots button{flex:0 0 44px}.ca-home .ba2__thennum{font-size:32px}.ca-home .ba2__nownum{font-size:42px}}

/* >>> rating-badge component: generated by .skills/client-website/components/rbadge-css.js. Do not edit inside the markers. <<< */
.rbadges {
  display: flex;
  flex-wrap: nowrap;              /* THE FIX. It physically cannot stack. */
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  width: 100%;
  max-width: 520px;
  margin: 0 0 20px;
  padding: 0;
  background: none;               /* no panel, no pill, no card behind the row */
  border: 0;
}
.rbadges[data-count="3"] { gap: 12px; }
.rbadges[data-count="4"] { gap: 10px; }
.rbadges__item {
  flex: 1 1 0;
  min-width: 0;                   /* REQUIRED. Without it the row breaks. */
  max-width: 193px;
  display: block;
  line-height: 0;
  /* The item is an <a>, so without this it inherits the site's link colour. Nothing inside the
     badge is painted with that colour, but a contrast sweep reading currentColor would measure a
     colour the badge never paints. Pin it to the same token the artwork uses so the two agree. */
  color: var(--rbadge-ink, #fff);
}
.rbadges__item:focus-visible { outline: 3px solid var(--rbadge-focus, currentColor); outline-offset: 4px; border-radius: 2px; }
.rbadge { display: block; width: 100%; height: auto; aspect-ratio: 193 / 60; color: var(--rbadge-ink, #fff); }
.rbadge text { fill: currentColor; font-family: var(--font-body, inherit); }
.rbadge path[fill="#F6AB26"] { fill: var(--rbadge-star, #F6AB26); }
@media (max-width: 768px) { .rbadges { max-width: none; gap: 12px; } }
@media (max-width: 400px)  { .rbadges { gap: 8px; } }
/* A light section flips ONLY the ink. The Google G keeps Google's colours on any ground. */
.rbadges--dark .rbadge { color: #0E1A2B; }
/* <<< end rating-badge component >>> */
.rbadge text{font-weight:700;letter-spacing:normal}
/* Hierarchy: white space, readable evidence, one primary action. */
:root{--ca-blue:#07599e;--ca-blue-deep:#073f73}
.ca-nav{border-bottom:1px solid #ffffff24;box-shadow:none}
.ca-brand img{width:42px;height:48px}.ca-brand>span{font-weight:700}
.ca-desktop-links .ca-nav-action{background:transparent;color:#fff;border:1px solid #ffffff70}
.ca-home .btn,.ca-solid-button,.sc-cta,.ca-nav-action,.ca-signup .btn{clip-path:none;border-radius:4px;box-shadow:none;font-weight:600;gap:10px}
.ca-home .btn-gold,.ca-solid-button{background:var(--ca-gold);color:var(--ca-navy);border:1px solid var(--ca-gold)}
.ca-home .btn-ghost{background:transparent;color:var(--ca-blue-deep);border:1px solid var(--ca-blue-deep)}
@media (hover:hover) and (pointer:fine){
.ca-home .btn-gold:hover,.ca-solid-button:hover{background:var(--ca-blue-deep);border-color:var(--ca-blue-deep);color:#fff}
.ca-home .btn-ghost:hover{background:var(--ca-paper);color:var(--ca-navy);border-color:var(--ca-navy)}
}
.ca-home .final .btn-ghost{color:#fff;border-color:#ffffff70}
.ca-kicker:before{display:none}
.ca-kicker,.eyebrow{color:var(--ca-muted);font-size:12px;font-weight:600}
.ca-home .ca-hero,.offer-hero,.ca-showcase .sc-hero{background:#fff;color:var(--ca-navy);--rbadge-ink:var(--ca-navy);border:0}
.ca-home .ca-hero:before,.ca-home .ca-hero:after,.offer-hero:before,.offer-hero:after,.ca-showcase .sc-hero:before,.ca-showcase .sc-hero:after{display:none}
.ca-home .ca-hero h1,.offer-hero h1,.ca-showcase .sc-hero h1{color:var(--ca-navy)}
.ca-home .ca-hero h1 em,.offer-hero h1 em{color:var(--ca-blue);font-style:normal}
.ca-home .ca-hero h1 em:after{display:none}
.ca-home .ca-hero-lede,.offer-hero .offer-lede,.ca-showcase .sc-hero .lede{color:var(--ca-muted)}
.ca-preview-link,.ca-home .ca-hero .ca-preview-link,.ca-showcase .sc-hero .ca-preview-link{color:var(--ca-muted)}
.ca-preview-link a,.ca-home .ca-hero .ca-preview-link a,.ca-showcase .sc-hero .ca-preview-link a{color:var(--ca-blue-deep)}
/* The showcase asset already carries its own browser chrome and phone, so the
   hero adds no second frame around it: a frame inside a frame shrank the real
   client work and pushed the columns apart. The art fills its column instead. */
.ca-hero-grid{grid-template-columns:1fr 1.12fr;gap:44px;align-items:center}
.ca-home .ca-brand-stage{height:auto;max-width:none;width:100%;margin:0}
.ca-brand-stage .ca-browser{position:static;width:100%;transform:none;border:0;border-radius:0;box-shadow:none}
.ca-brand-stage figcaption{position:static;margin-top:12px;text-align:left;font-size:13px;color:var(--ca-muted)}
.ca-home .ca-websites{background:var(--ca-paper)}
.ca-work-image{border:1px solid #c8d4e3;box-shadow:none;border-radius:4px}
.ca-work img{transition:none}.ca-work:hover img{transform:none}
.ca-work-info{gap:8px}.ca-work-info h3{color:var(--ca-navy)}
.ca-websites-bottom{justify-content:flex-start}.ca-websites-bottom>p{display:none}
.ca-home .statband{background:#fff}
.ca-home .stat{padding:0 16px;background:none;clip-path:none;border:0;box-shadow:none}
.ca-home .stat+.stat{border-left:1px solid #c8d4e3}
.ca-home .stat .num{color:var(--ca-navy)}.ca-home .stat .lbl{color:var(--ca-muted);text-transform:none}
.grw-card{border:1px solid #d3dce8;border-radius:4px;box-shadow:none;background:#fff}
.grw-title{font-weight:600}.grw-head{justify-content:center}
.ca-home .proof{background:var(--ca-navy)}
.ca-home .proof:before{display:none}
.ca-home .proof .card{border:1px solid #ffffff30;border-radius:4px;background:#ffffff06;box-shadow:none}
.ca-home .proof .card .biz{color:#fff}.ca-home .proof .card .loc,.ca-home .proof .card .range{color:#d6e2ef}
.ca-home .proof .card .gain{color:var(--ca-gold)}
.ca-home .proof .card:hover{transform:none;box-shadow:none}
.ca-home .ca-more-examples{border-block:1px solid #ffffff30}
.ca-home .vs{background:var(--ca-paper)}
.ca-home .vs h2{max-width:820px;text-wrap:balance}
.ca-home .vs .vs-badge{display:none}
.ca-home .how .step{background:none;border:0;border-top:1px solid #bacbdf;box-shadow:none;padding:24px 0 0;border-radius:0}
.ca-home .how .step .n{padding:0;background:none;color:var(--ca-muted);font-size:13px;font-weight:500;clip-path:none}
.ca-home .how .works-with{background:none;border:0;padding:0}
.ca-home .how .works-with .apps span{border:0;background:none;padding:0 10px;box-shadow:none;border-radius:0;color:var(--ca-muted)}
.ca-home .founder{background:var(--ca-paper)}
.ca-home .founder:before,.ca-home .fphoto:before{display:none}
.ca-home .fphoto img{border:0;border-radius:4px;box-shadow:none}
.ca-home .fphoto figcaption{position:static;background:none;color:var(--ca-navy);padding:12px 0 0;box-shadow:none;border:0;text-align:left}
.ca-home .fphoto .fc-n{color:var(--ca-navy)}.ca-home .fphoto .fc-r{color:var(--ca-muted)}
.ca-home .fact{border:0;padding:0}
.ca-home .pricing .plan{border:1px solid #b9c9dc;border-radius:5px;background:#fff;box-shadow:none;padding:28px 24px}
.ca-home .pricing .plan.pop{background:var(--ca-navy);border-color:var(--ca-navy);box-shadow:none}
.ca-home .pricing .plan:not(.pop) .btn{background:transparent;border:1px solid var(--ca-blue-deep);color:var(--ca-blue-deep)}
@media (hover:hover) and (pointer:fine){.ca-home .pricing .plan:not(.pop) .btn:hover{background:var(--ca-paper)}}
.ca-home .plans .pop-tag{background:var(--ca-navy);color:#fff;font-size:13px;border-radius:4px;padding:6px 12px;box-shadow:none}
.ca-home .ca-shared-includes{background:none;border:0;padding:0;margin-block:26px}
.ca-home .ca-shared-includes>summary{font-size:18px}
.ca-home .ca-shared-includes[open]>summary{margin-bottom:16px}
.ca-home .ca-price-note{background:none;padding:0;margin-top:12px;font-size:14px}
.ca-home .pricing .includes{margin-bottom:0}
.ca-plan-terms{font-size:14px;color:var(--ca-muted);text-align:center;margin:24px auto 0}
.ca-home .plans-over{margin-top:12px}
.ca-home .faq{background:var(--ca-paper)}
.ca-home .faq summary:after{color:var(--ca-blue)}
.ca-home .final,.offer-close{background:var(--ca-navy)}
.offer-close .ca-kicker{color:#c7d5e5}
.ca-home .final:before,.ca-home .final:after,.offer-close:before,.offer-close:after{display:none}
.ca-home .final h2 em{color:#fff;font-style:normal}
.ca-home footer{background:var(--ca-navy);color:#c7d5e5;border-top:1px solid #ffffff24;padding-block:32px}
.ca-home footer .fb{display:flex;align-items:center;gap:12px}.ca-home footer .fb img{width:38px;height:44px}
.ca-home footer a{color:#c7d5e5}
.offer-hero-grid{align-items:center}
.offer-price{background:var(--ca-paper);color:var(--ca-navy);border:1px solid #c8d4e3;border-radius:6px;box-shadow:none;padding:32px}
.offer-price .ca-kicker,.offer-price .offer-fees span,.offer-price .offer-price-note{color:var(--ca-muted)}
.offer-price .offer-fees b{color:var(--ca-navy)}.offer-price .offer-fees>div+div{border-color:#bdcce0}
.offer-price .offer-price-note a{color:var(--ca-blue-deep)}
.ca-offer-owner{margin-top:24px}.offer-hero .offer-person,.offer-hero .offer-person strong{color:var(--ca-muted)}
.offer-person img{border:0;border-radius:50%;box-shadow:none;width:40px;height:40px}
.offer-process-grid article{border-top:1px solid #b9c9dc;padding-top:20px}
.offer-process-grid article>span,.offer-feature-list article>span{color:var(--ca-muted)}
.offer-plain-terms{border:1px solid #bdcce0;border-radius:4px;background:#fff}
.ca-showcase main,.ca-showcase .sc-grid-sec{background:var(--ca-paper)}
.ca-showcase .sc-card{border:1px solid #c8d4e3;background:#fff;box-shadow:none;border-radius:4px;color:var(--ca-navy)}
.ca-showcase .sc-card:hover{transform:none;border-color:var(--ca-blue);box-shadow:none}
.ca-showcase .sc-biz{color:var(--ca-navy)}.ca-showcase .sc-loc{color:var(--ca-muted)}
.ca-showcase .sc-view{color:var(--ca-blue-deep)}.ca-showcase .sc-shot{background:#eef2f7;border-radius:0}
.ca-showcase .sc-pill.is-live{background:#e9f3ed;color:#20553a}
.ca-showcase .sc-pill.is-demo{background:#f0f3f8;color:var(--ca-muted);border-color:#c8d4e3}
.ca-showcase .sc-hero .eyebrow,.ca-showcase .sc-count{color:var(--ca-muted)}
.ca-showcase .chip{background:#fff;color:var(--ca-muted);border:1px solid #b8c8dc;border-radius:4px;clip-path:none;font-weight:500;padding:10px 14px}
.ca-showcase .chip[aria-pressed="true"]{background:var(--ca-navy);color:#fff;border-color:var(--ca-navy)}
.ca-showcase-close{background:#fff}
.ca-signup .step{border-top:0;border-radius:5px}
.ca-signup .step[data-step="1"] .step__sub{margin-bottom:22px}
.ca-signup .step__kicker{color:#c4d2e5}
.ca-signup .step__price{line-height:1.65}
@media(max-width:1000px){
 .ca-hero-grid{grid-template-columns:1fr;gap:32px}
 .ca-home .ca-brand-stage{max-width:580px;margin:0}
 .ca-desktop-links{display:none}.ca-mobile-menu{display:block;position:static}
 .ca-mobile-menu summary{list-style:none;display:flex;gap:14px;align-items:center;padding:10px 14px;border:1px solid #ffffff66;font-size:16px;cursor:pointer}
 .ca-mobile-menu summary::-webkit-details-marker{display:none}
 .ca-mobile-menu>div{position:absolute;left:0;right:0;top:100%;background:var(--ca-navy);padding:12px var(--shell-x) 18px;box-shadow:0 10px 20px #0002}
 .ca-mobile-menu a{display:block;padding:12px 6px;border-bottom:1px solid #ffffff1a;color:#fff;text-decoration:none;font-size:18px}
}
@media(max-width:767px){
 .ca-brand img{width:34px;height:40px}
 .ca-home .ca-hero-art{max-width:100%}
 .ca-home .ca-hero-actions{display:flex;flex-wrap:wrap;gap:10px}
 .ca-home .ca-hero-actions .btn{flex:1 1 auto;padding-inline:12px}
 .ca-brand-stage figcaption{font-size:12px}
 .ca-home .stat{padding:0 8px}.ca-home .stat .num{font-size:28px}.ca-home .stat .lbl{font-size:12px;line-height:1.45}
 .ca-home .founder-grid{text-align:left}.ca-home .founder .fphoto{margin:0;max-width:190px}
 .ca-home .how .step{padding-top:20px}
 .ca-home .pricing .plan{padding:22px 20px}
 .ca-home .pricing .plan .cap{font-size:14px;line-height:1.5}
 .ca-home .pricing .plan>.btn{margin-top:20px}
 .ca-home .vs .vs-grid{gap:30px}
 .offer-price{padding:24px}.offer-fees b{font-size:42px}
 .offer-hero-grid{gap:24px}.ca-offer-owner{margin-top:20px}
 .ca-showcase .sc-hero{padding-block:40px}.ca-showcase .sc-hero h1{max-width:500px}
 .ca-showcase .chip{font-size:13px;min-height:44px;padding:8px 10px}
 .ca-actions-managed .ca-mobile-actions{visibility:hidden;transform:translateY(100%);pointer-events:none}
 .ca-actions-managed .ca-mobile-actions.is-active{visibility:visible;transform:none;pointer-events:auto}
 .ca-mobile-actions a:first-child{background:#fff;color:var(--ca-navy)}
 .ca-offer-page .ca-mobile-actions a:first-child{color:var(--ca-navy)}
 .ca-mobile-actions{border-top:1px solid #b8c8dc}
}

.ca-proof-date{font-size:14px;color:#c7d5e5;padding:0 0 20px;line-height:1.6}

/* Ordinary content is visible on arrival; live data updates without count-up theater. */
.ca-home .rv,.ca-showcase .rv{opacity:1;transform:none;transition:none;animation:none}
.ca-home .pricing .plan:hover{transform:none;box-shadow:none}
.ca-home .ca-proof-detail{width:calc(100% - 2 * var(--shell-x));max-width:820px}
.ca-home .fphoto .fc-t{font-family:var(--font-body);font-size:12px;line-height:1.5;color:var(--ca-muted);letter-spacing:normal;text-transform:none}
.ca-signup .repnav-name{font-size:20px}

/* Keep the characterful face on headings, identity and large figures. */
.ca-desktop-links a,.ca-mobile-menu,.ca-mobile-panel a,.ca-mobile-actions a,
.ca-home .btn,.ca-solid-button,.ca-offer-page .ca-solid-button,.sc-cta,.ca-nav-action,
.ca-text-link,.board-link,.ca-home .faq summary,.offer-questions summary,
.ca-home .ca-shared-includes>summary,.ca-proof-detail>summary,
.ca-home .ca-more-examples>summary,.ca-home .plans .pop-tag{font-family:var(--font-body)}

.ca-showcase .sc-hero h1{text-wrap:balance}

/* Apple: feedback on pointer-down, never only at the end (Response, and the
   Quick Reference feedback row). Verified 2026-09-10: this sheet and conversion.css
   had zero :active rules, so a tap on any control showed nothing. Hover cannot
   stand in for it: hover does not fire on touch. Reduced motion already zeroes
   transitions in conversion.css, so the press snaps for those users. */
.ca-home .btn:active,
.ca-solid-button:active,
.ca-offer-page .ca-solid-button:active,
.sc-cta:active,
.ca-nav-action:active,
.ca-signup .btn:active,
.ca-mobile-actions a:active{transform:scale(.97);transition:transform 100ms ease-out}

/* ===== Apple design pass, 2026-09-10 =====
   Findings verified in the browser against apple-fluid-motion sections 15 and 16
   and the apple-design audit steps. Appended last on purpose: brand-system.css is
   the final sheet, so these win without disturbing the existing cascade.
   Every rule here is a defect or a one-system consistency fix. Taste calls that
   change emphasis, case or content are NOT here; they go to Mike with screenshots. */

/* 1. BUG, contrast 1.00. The opened "See more personalized review examples" panel
      painted a 44px H2 and two bold phrases in navy on a navy ground, so the
      heading was invisible and the sentence had holes. Apple: Craft, and the
      4.5:1 floor. */
.ca-home .ca-more-examples .demo h2{color:#fff}
.ca-home .ca-more-examples .demo .lede b,
.ca-home .ca-more-examples .kicker b{color:#fff;background:none;font-weight:600}

/* 2. BUG, inverted emphasis. The phone bottom bar gave gold to "See my websites"
      while the hero gives gold to "Get more reviews". Apple: Familiarity, things
      that look the same behave the same. The contract already requires the bar to
      match the hero labels and destinations. */
.ca-mobile-actions a:first-child{background:var(--ca-gold);color:var(--ca-navy)}
.ca-mobile-actions a+a{background:#fff;color:var(--ca-navy)}
.ca-offer-page .ca-mobile-actions a:first-child{color:var(--ca-navy)}

/* 3. One display weight. The figures Mike wants trusted were the only Archivo 700
      on the page while every heading is 600. Apple section 15: hierarchy is weight
      plus size plus leading as a set, not a heavier weight in one place. */
.ca-home .stat .num,
.ca-home .pricing .plan .price,
.grw-scoreline b,
.ca-home .ba2__nownum,
.offer-plain-terms strong{font-weight:600}

/* 4. The phone menu was the only place the display face painted at regular weight.
      Navigation is Public Sans per the contract. */
.ca-mobile-menu a,
.ca-mobile-menu summary{font-family:var(--font-body);font-weight:500;line-height:1.3}

/* 5. Five inline links painted red while every other inline link is suit blue.
      Red is this site's warning accent; an underlined red word reads as an error. */
.ca-home .plans-over a,
.ca-home .faq .a a,
.ca-home .talk a{color:var(--ca-blue-deep)}

/* 6. Small text below Apple's 11pt floor or cramped. */
.ca-home .ba2__flow span{font-size:12px}
.ca-home .stat .lbl{font-size:13px;line-height:1.4}

/* 7. UI text inherited the 1.8 body leading, which is a 30px line box on a 17px
      nav link. Apple section 15: leading tightens as the text gets denser. */
.ca-desktop-links a{line-height:1.3}
.ca-text-link,.board-link,.sc-view{line-height:1.4}
.skiplink,.ca-skip{font-family:var(--font-body);font-weight:600}

/* 8. Desktop paragraphs ran 85 to 145 characters per line. Comfortable is 45 to 75. */
.ca-home .proof .lede,
.ca-home .pricing .lede,
.ca-home .ca-more-examples .demo .lede{max-width:62ch;margin-inline:auto}
.ca-home .statnote{max-width:60ch;margin-inline:auto}
.offer-plain-terms p{max-width:70ch}

/* 9. Press feedback for the controls that are not buttons. Apple section 1:
      respond on pointer-down, not on release. conversion.css also clears the
      browser tap flash, so without these a thumb on a menu row, a FAQ question
      or a filter chip shows nothing at all. */
.ca-mobile-menu summary:active,
.ca-mobile-menu a:active,
.ca-mobile-panel a:active{background:#ffffff14}
.ca-home .faq summary:active,
.offer-questions summary:active,
.ca-home .ca-more-examples>summary:active,
.ca-proof-detail>summary:active,
.ca-home .ca-shared-includes>summary:active{opacity:.7}
.ca-showcase .chip:active{background:#ffffff1f}
.ca-work:active img{opacity:.85}
.grw-dots button:active{transform:scale(.9)}
.ca-text-link:active,.board-link:active{opacity:.7}

/* ================= APPLE PASS, Mike's own site only, 2026-09-10 =================
   Mike: "my website is different than client websites and prospect websites.
   I want my website to be Apple design-approved." Everything the audit logged as
   a CONFLICT with the Relentless anatomy is applied here, on classalphasolutions.com
   only. Client and prospect sites keep the trade anatomy and the font ban.
   Source: apple-fluid-motion sections 12, 15 and 16, plus the apple-design audit. */

/* Optical sizing. Archivo and Public Sans are variable faces, so let them adapt. */
html,body{font-optical-sizing:auto}

/* Apple 15: tracking is size-specific, never one value for everything.
   Large display text tightens as it grows, body sits at zero, small labels open. */
.ca-home h1,.ca-showcase h1,.ca-offer-page h1{letter-spacing:-.022em}
.ca-home h2,.ca-showcase h2,.ca-offer-page h2{letter-spacing:-.018em}
.ca-home h3,.ca-showcase h3,.ca-offer-page h3{letter-spacing:-.012em}
.ca-home .stat .num,.ca-home .pricing .plan .price,.ca-home .ba2__nownum,
.offer-fees b,.grw-scoreline b,.ca-home .gain{letter-spacing:-.02em}
.ca-kicker,.eyebrow,.phone-label,.ba2__stamp,.ba2__ringtag,.sc-count,
.ca-showcase .chip,.sc-pill,.ca-home .stat .lbl,.ca-home .ba2__flow span{letter-spacing:.012em}

/* Apple 15: leading tracks size inversely. Tight on display, comfortable on body.
   The review cards keep their looser setting because they are quoted speech. */
.ca-home h1,.ca-showcase h1,.ca-offer-page h1{line-height:1.06}
.ca-home h2,.ca-showcase h2,.ca-offer-page h2{line-height:1.1}
.ca-home h3,.ca-showcase h3,.ca-offer-page h3{line-height:1.2}
body,p,li,blockquote{line-height:1.55}
.ca-home .lede,.ca-showcase .lede,.offer-lede{line-height:1.5}
.grw-card blockquote{line-height:1.7}

/* Apple content guidance: sentence case, not ALLCAPS. Every one of these strings
   is already written in natural case in the HTML; only CSS was shouting. */
.ca-home .btn,.ca-solid-button,.sc-cta,.ca-nav-action,.ca-signup .btn,
.ca-kicker,.eyebrow,.nav-link,.nav-cta,.nav-brand span,.phone-label,
.proof-chip .pc-lbl,.ca-home .stat .lbl,.card .biz,.fphoto .fc-n,.fphoto .fc-t,
.fact .fk,.an-k,.an-vs,.mini-form .mf-k,.mini-form .mf-btn,.plan.pop .pop-tag,
.ba2__stamp,.ba2__flow span,.ba2__ringtag,.sc-count,.ca-showcase .chip,
.sc-pill,.sc-biz,.sc-loc,.verdict{text-transform:none}

/* Apple 12: chrome is a translucent layer the content scrolls under, not a slab.
   Solid navy stays as the fallback for anything without the filter. */
.ca-nav{background:var(--ca-navy)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ca-nav{background:rgba(2,26,62,.78);-webkit-backdrop-filter:saturate(180%) blur(20px);
          backdrop-filter:saturate(180%) blur(20px);border-bottom:0}
}

/* Apple 12: depth means something. The only raised things are the ones you can
   touch or that genuinely float. A heavy shadow on a static mockup or a logo is
   a false affordance, so those come down to a hairline. */
.grw-glogo{box-shadow:0 1px 3px rgba(2,26,62,.14)}
.ca-home .vs .phone,.ca-home .vs .phone-shell{box-shadow:0 1px 3px rgba(2,26,62,.12)}

/* Apple 16 wayfinding: name a nav item for its contents, never a vague umbrella.
   The nav here already does that (Google reviews, Websites, Our work). */

/* ---- Apple 16 hierarchy: one focal point per section, proximity implies
        relationship, alignment communicates organization. Every value below
        comes from a measured defect in the layout audit. ---- */

/* Pricing header: four text rows in four different widths before the cards, and
   the closest pair was the least related. One measure, one gap ladder. */
.ca-home .pricing .lede{margin:20px auto 12px;max-width:40em}
.ca-home .pricing .includes{max-width:40em}
.ca-home .pricing .ca-price-note{margin-top:24px}

/* Reviews tail: three secondary actions in three widths and three alignments.
   One width, one alignment, matching the proof disclosure above them. */
.ca-home .ca-more-examples{max-width:820px;margin-inline:0}
.ca-home .ca-more-examples>summary{text-align:left}

/* The offer page is the money page. The price was painting at H1 size, so on a
   phone the number outranked the headline. Drop it one step. */
.offer-fees b{font-size:var(--fs-h2)}

/* Hero: the supporting image aligned with neither the kicker nor the cap line,
   leaving 91px of dead column under it. Anchor the row to the top. */
.ca-home .ca-hero-grid{align-items:start}

/* The hero carried the only divider inside itself. Content, not rules. */
.ca-home .ca-hero-evidence{margin-top:16px;padding-top:0;border-top:0}

/* Section alternation so neighbouring bands stop reading as one long band. */
.ca-home .founder{background:#fff}

/* Frame within a frame: a bordered pale plane around a screenshot that already
   has its own chrome, with a dead band underneath. Let the image be the object. */
.ca-work-image{border:0;background:none;border-radius:0}
.ca-showcase .sc-shot{background:none}

/* Founder block on a phone centred the photo while the text stayed left. */
.ca-home .founder-grid{justify-items:start}

/* Two closing paragraphs on the offer page painted at lede size after the
   decision had already been asked for. */
.offer-close .offer-close-help,.offer-close .offer-new-visitor{font-size:15px}
.ca-home .final .contact{margin-bottom:0}

/* ---- Hero hierarchy, Mike 2026-09-10: "the hero image doesn't pair well with
        the headline. The subheadline is way too long, and the Google badge is
        way too big. The visual hierarchy is off." ---- */

/* The badge stretched to the full 520px row because a single item is flex:1.
   At that size it outranked the H1. Give one badge a badge-sized box. */
.rbadges[data-count="1"]{max-width:196px;margin-bottom:16px}
@media (max-width:768px){.rbadges[data-count="1"]{max-width:180px}}

/* The hero picture is now the review request itself, so it is a portrait phone
   photo rather than a landscape browser shot. Keep it from towering over the
   copy column. */
.ca-request-shot{display:block;width:100%;max-width:360px;height:auto;border-radius:10px;
  border:1px solid #d3dce8;box-shadow:0 1px 3px rgba(2,26,62,.12)}
@media (min-width:1001px){.ca-request-shot{margin-left:auto;margin-right:auto}}
.ca-home .ca-brand-stage figcaption{max-width:360px;margin-inline:auto;text-align:center}
@media (max-width:1000px){.ca-request-shot,.ca-home .ca-brand-stage figcaption{margin-inline:0;text-align:left}}

/* ---- Hero gap, Mike 2026-09-10: "way too much space between the left and right
        side copy and the image. Is that Apple's design approved?" No. Apple spends
        whitespace on purpose; this was a dead gap from a column mismatch. The copy
        column ran 602px, the picture was capped at 360px and centred in a 1.12fr
        column, so roughly 200px of empty middle appeared between them. Size the
        columns to the content and let the picture carry its side. ---- */
@media (min-width:1001px){
  /* Narrow the hero shell to exactly what the two columns need, so the gap is a
     chosen 56px rather than whatever was left over inside a 1320px container.
     The picture is capped at 300px because the source file is 600x800: at 300 CSS
     pixels it lands on exactly 2x and stays sharp. It was painting at 420, which
     asked for 840 device pixels on a retina screen and upscaled, hence the blur. */
  .ca-home .ca-hero>.wrap{max-width:1000px}
  .ca-home .ca-hero-grid{grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
  .ca-request-shot{max-width:300px;margin-inline:0}
  .ca-home .ca-brand-stage figcaption{max-width:300px;margin-inline:0;text-align:left}
}
/* Phone: the source tops out at 600px wide, so hold the picture at 300 CSS px
   instead of letting it fill a 339px column and soften. */
@media (max-width:1000px){.ca-request-shot{max-width:300px}}

/* ================= TYPE-LED HERO, 2026-09-10 =================
   Mike ran out of patience with menus, and he was right to. Nothing in the
   personalized-image pipeline renders above 600x800 (api/sms-image.js pins the
   canvas), so a hero photograph was always going to be upscaled or shrunk to
   hide it. Apple would do neither. The hero is now type on white: one column,
   one idea, one primary action, and the proof band immediately under it. Whole
   site is one face, Geist, the way Apple runs on one face. */
.ca-home .ca-hero>.wrap{max-width:900px}
.ca-home .ca-hero-grid{display:block;max-width:none}
.ca-home .ca-hero-copy{max-width:none;text-align:center}
.ca-home .ca-hero .ca-kicker{margin:0 0 20px}
.ca-home .ca-hero .rbadges{margin-inline:auto;justify-content:center}
.ca-home .ca-hero h1{max-width:15em;margin-inline:auto;text-wrap:balance}
.ca-home .ca-hero-lede{max-width:34em;margin-inline:auto}
.ca-home .ca-hero-actions{justify-content:center}
@media (min-width:768px){
  .ca-home .ca-hero>.wrap{padding-block:20px}
  .ca-home .ca-hero-actions{display:flex;gap:16px}
}
@media (max-width:767px){
  /* Centred on the phone too. Mike caught the split: the desktop hero centred
     while the phone stayed left, so the same page read as two designs. */
  .ca-home .ca-hero-copy{text-align:center}
  .ca-home .ca-hero .rbadges{margin-inline:auto;justify-content:center}
  .ca-home .ca-hero h1,.ca-home .ca-hero-lede{margin-inline:auto}
  .ca-home .ca-hero h1{max-width:none}
  .ca-home .ca-hero-actions{justify-content:stretch}
}

/* ---- One axis for the whole page, 2026-09-10. Mike: "There's no hero image,
        and all the other stuff is left-aligned." The hero centred while nine
        sections under it stayed left, so the page read as two designs stitched
        together. Apple keeps section headers on one axis and lets the content
        inside cards and grids stay left, which is what this does. ---- */
.ca-home .proof>.wrap>h2,
.ca-home .how>.wrap>h2,
.ca-home .ca-websites .ca-section-heading h2,
.ca-home .demo h2{text-align:center;margin-inline:auto}

/* The founder band is a portrait beside text, so a heading centred inside the
   right-hand column would read as centred on nothing. Stack the band instead:
   heading and intro centred across the full width, then the portrait and the
   three facts in a row underneath. Now it sits on the same axis as every other
   section without pretending a two-up column is the page. */
.ca-home .founder-grid{display:block;text-align:center;max-width:940px;margin-inline:auto}
.ca-home .founder-grid>div{width:100%;max-width:none;margin-inline:auto}
.ca-home .founder-grid>div>h2{text-align:center;margin-inline:auto;max-width:22em}
.ca-home .founder-grid>div>p{text-align:center;margin-inline:auto;max-width:62ch}
.ca-home .founder-grid .fphoto{margin:28px auto 0;max-width:180px}
.ca-home .founder-grid .fphoto figcaption{text-align:center}
.ca-home .founder-grid .facts{margin-top:28px;text-align:left}

/* The paragraph that introduces a section rides with its heading. */
.ca-home .proof>.wrap>.lede,
.ca-home .how>.wrap>.lede,
.ca-home .vs>.wrap>.lede,
.ca-home .demo>.wrap>.lede,
.ca-home .founder>.wrap>p:first-of-type{text-align:center;margin-inline:auto;max-width:62ch}

/* The websites band put its heading in a two-up flex with a link on the right.
   Stack it and centre it so it joins the same axis. */
.ca-home .ca-websites .ca-section-heading{display:block;text-align:center}
.ca-home .ca-websites .ca-section-heading>div{margin-inline:auto}
.ca-home .ca-websites .ca-section-heading p{margin-inline:auto;max-width:62ch}
.ca-home .ca-websites .ca-section-heading .ca-kicker{text-align:center}

/* Kickers sit above centred headings, so they centre too. */
.ca-home main .ca-kicker{text-align:center}

/* Card, list and form content stays left. Centred body copy inside a box is
   harder to read and Apple does not do it either. */
.ca-home .card,.ca-home .svc,.ca-home .plan,.ca-home .fact,.ca-home .faq .a,
.ca-home .ca-work-info,.ca-home .grw-card,.ca-home blockquote,
.ca-home .ca-shared-includes{text-align:left}

/* ---- Ground alternation, 2026-09-10. Mike: "There are some sections stacked on
        one another... it's like one run-on section instead of having a color or
        divider to break up the different stuff." Measured: the hero and the stats
        band were both white with 136px of white between them, and the founder
        band and pricing were both white too, so the ground never changed and the
        page read as one column of text. The contract bans decorative seams, and
        Apple separates with the ground rather than a rule, so this alternates
        white, paper and the two navy anchors with no two neighbours matching:
        hero W, stats P, proof N, comparison P, how W, websites P, founder W,
        pricing P, faq W, final N. ---- */
.ca-home .statband{background:var(--ca-paper)}
.ca-home .pricing{background:var(--ca-paper)}
.ca-home .faq{background:#fff}

/* ================= ONE TYPE LADDER, 2026-09-10 =================
   The Apple audit failed the typography lens with a line worth quoting: "There
   is no type scale, only an inventory." Measured on this build: 18 distinct
   sizes on desktop, 19 on the phone, 54 size/leading/weight/tracking
   combinations, sizes nobody chose (18.4, 16.8, 15.2, 14.08, 12.48) because the
   legacy inline CSS in index.html sizes everything in arbitrary rem fractions,
   and 17px paragraphs painting four different leadings.

   Eight rungs, nothing between them. This block is the design-system layer and
   it carries !important on purpose: the legacy inline stylesheet holds dozens of
   higher-specificity one-offs (.ca-home .card .gain, .ca-home .how .step .n and
   so on) that a later rule of equal specificity cannot beat. Forcing the ladder
   here is the smaller change; the real repair is deleting the font-size
   declarations from that inline stylesheet, which is recorded as debt in
   docs/website-marketing-design.md.

   The iMessage mockup is excluded by selector, not by exception: a screenshot of
   a phone should look like a phone. */
:root{
  --fs-lead:18px; --fs-fig:28px; --fs-small:14px; --fs-micro:12px;
  --fs-xs:var(--fs-micro); --fs-sm:var(--fs-small); --fs-md:var(--fs-small);
  --fs-base:var(--fs-body); --fs-lede:var(--fs-lead); --fs-h4:var(--fs-lead);
  --fs-num:var(--fs-fig); --fs-price:var(--fs-fig);
}
@media (min-width:768px){:root{--fs-lead:20px; --fs-fig:32px}}

/* Rung: lead. A lede differs from body copy by SIZE, never by leading at the
   same size, which was the actual defect. */
.ca-home .lede,.ca-home .ca-hero-lede,.ca-home .includes,.ca-home .contact,
.ca-home .statnote,.ca-showcase .lede,.offer-lede,
.ca-home .proof>.wrap>p,.ca-home .how>.wrap>p{font-size:var(--fs-lead)!important;line-height:1.45!important}

/* Rung: body. One rule owns it. */
.ca-home p:not(.lede):not(.ca-hero-lede):not(.includes):not(.contact):not(.statnote):not(.ca-kicker),
.ca-home li,.ca-home blockquote,.grw-card blockquote,
.ca-showcase p:not(.lede),.ca-offer-page p:not(.offer-lede){line-height:1.55!important}

/* Rung: figure. One step below the heading above it, so a number never outranks
   the sentence that explains it. */
.ca-home .stat .num,.ca-home .pricing .plan .price,.ca-home .plans .price,
.ca-home .ba2__nownum,.ca-home .ba2__thennum,.ca-home .card .gain,.ca-home .gain,
.offer-fees b,.ca-home .proof-chip .pc-n,.grw-scoreline b{font-size:var(--fs-fig)!important;line-height:1.05!important}

/* Rung: small. */
.ca-home .fact .fd,.ca-home .faq .a,.ca-home .ca-work p,.ca-home .sc-desc,
.grw-who b,.grw-cardstars,.grw-card blockquote,
.ca-home .proof-chip .st,.ca-home .vs-badge{font-size:var(--fs-small)!important}

/* Rung: micro. Nothing on this site paints below 12px except the mockup. */
.ca-home .stat .lbl,.ca-home .how .step .n,.ca-home .step .n,
.ca-home .plans .pop-tag,.ca-home .plan .pop-tag,.ca-home .ba2__flow span,
.ca-home .ba2__stamp,.ca-home .ca-proof-date,
.grw-who span,.grw-src,.grw-count{font-size:var(--fs-micro)!important;line-height:1.4!important}

/* Rung: body for the review card chrome. */
.grw-title,.grw-avatar,.grw-stars{font-size:var(--fs-body)!important}
.grw-nav{font-size:var(--fs-lead)!important}

/* Rung: ui. Controls and inline links have their own size and never shrink,
   which is why 16px shows up on desktop alongside 17px body copy. Declaring it
   makes it a rung instead of a stray. */
:root{--fs-ui:16px}
.ca-home .btn,.ca-solid-button,.sc-cta,.ca-nav-action,.ca-signup .btn,
.ca-text-link,.board-link,.ca-home .fc-n{font-size:var(--fs-ui)!important}

/* The last four strays: fact keys and the plan disclosure sat between rungs,
   the kicker painted 12px in one band and 14px in another, and the fact
   descriptions still carried the old 1.8 leading. */
.ca-home .fact .fk,.ca-home .ca-shared-includes>summary{font-size:var(--fs-body)!important}
.ca-home .ca-kicker,.ca-home .eyebrow{font-size:var(--fs-micro)!important;line-height:1.4!important}
.ca-home .fact .fd{line-height:1.55!important}

/* ================= THE HERO OWNS THE FIRST SCREEN, 2026-09-10 =================
   The Apple audit's whole-page lens failed the page and named this first: the
   hero was 557px in a 900px window, the FOURTH smallest of ten bands on desktop
   and second smallest on the phone, with the stats row already showing at the
   fold. The stats band was taller than the hero. A page whose opening statement
   is smaller than the band under it cannot read as one designed thing.

   The hero now owns the first screen and nothing else peeks into it. Padding is
   untouched at 48/64/68 so the shell rhythm the gate asserts still holds; the
   height comes from min-height and the content centres inside it. */
.ca-home .ca-hero{min-height:calc(100svh - 84px);display:flex;flex-direction:column;justify-content:center}
@media (max-width:760px){.ca-home .ca-hero{min-height:calc(100svh - 72px)}}
@supports not (height:100svh){
  .ca-home .ca-hero{min-height:calc(100vh - 84px)}
  @media (max-width:760px){.ca-home .ca-hero{min-height:calc(100vh - 72px)}}
}