/* PrimeStart - page styles: Client Platform
   Loaded on /client-platform/ only.

   Built 5 September 2026 to the About / Websites standard. The hero shows
   the platform as it is (a genuine overview screen in a browser window, the
   same screen on a phone breaking the window's corner); below it: why it
   exists, the journey as one window with five moments, one dark band, the
   every-customer ledger, what SEO customers also see, the phone section,
   six questions and one CTA. Everything is prefixed cp-. The phone layout
   (<=640px) sits at the end of this file. */

/* ---------- shared pieces: the browser window, the phone, the caption ---------- */
.cp-frame{
  border-radius:12px;overflow:hidden;background:var(--white);border:1px solid rgba(18,33,47,.1);
  box-shadow:0 30px 60px -36px rgba(18,33,47,.5);
}
.cp-chrome{height:34px;background:#E8E3DA;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid #D8D2C7}
.cp-chrome i{width:9px;height:9px;border-radius:50%;background:#C5BEB2;flex:none}
.cp-url{
  margin-left:10px;background:#F8F6F2;border:1px solid #DCD6CB;border-radius:4px;
  font-family:var(--fb);font-size:11px;color:#7A736C;padding:3px 11px;flex:1;max-width:300px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cp-shot{position:relative;aspect-ratio:1200/574;background:var(--paper);overflow:hidden}
.cp-shot-hero{aspect-ratio:1440/689}
.cp-shot picture{display:contents}
.cp-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left}

.cp-phone{
  position:relative;width:236px;padding:8px;border-radius:32px;background:var(--ink);
  box-shadow:0 34px 64px -34px rgba(18,33,47,.62),inset 0 0 0 2px rgba(255,255,255,.08);
}
.cp-phone::before{content:"";position:absolute;left:50%;top:8px;width:66px;height:18px;border-radius:0 0 12px 12px;background:var(--ink);transform:translateX(-50%);z-index:3}
.cp-phone-screen{position:relative;aspect-ratio:478/913;border-radius:24px;overflow:hidden;background:var(--paper)}
.cp-phone-screen picture{display:contents}
.cp-phone-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top}

.cp-cap{font-size:12.5px;line-height:1.5;color:var(--muted);margin:0}
.dark .cp-cap{color:var(--on-dark-dim)}

/* ---------- hero: the platform as it is ----------
   Copy on the left: statement, one line, two buttons, three facts on a
   hairline. On the right the overview screen in a refined browser window
   and the same screen on a phone breaking the window's corner. The window
   rises with the copy, then the phone settles into place: once, on load.
   Reduced motion shows it settled.

   The ground, the vertical padding and the light type come from .hero-dark
   in primestart.css (9 September 2026), so nothing here may set a
   background, a border-bottom or its own padding - see the note above the
   markup in the template for why this page in particular wanted ink. */
.hero-cp{overflow:clip}
.hero-cp .wrap{display:grid;grid-template-columns:.92fr 1.08fr;gap:64px;align-items:center}
.hero-cp h1{margin-bottom:20px;max-width:19ch;font-size:clamp(38px,3.6vw,48px);line-height:1.05;letter-spacing:-0.045em;text-wrap:balance}
.hero-cp .hero-sub{font-size:18.5px;max-width:44ch;line-height:1.58;text-wrap:pretty}
.hero-cp .hero-ctas{margin:30px 0 0}
.hero-cp .eyebrow,.hero-cp h1,.hero-cp .hero-sub,.hero-cp .hero-ctas,.hero-cp .dk-facts{animation:rise .6s cubic-bezier(.2,.7,.3,1) both}
.hero-cp h1{animation-delay:.05s}
.hero-cp .hero-sub{animation-delay:.1s}
.hero-cp .hero-ctas{animation-delay:.15s}
.hero-cp .dk-facts{animation-delay:.2s}

/* On ink the window needs its own edge back. The hairline that reads as a
   border on paper disappears against the dark, and the drop shadow alone
   leaves the top of the window melting into the ground. */
.hero-cp .cp-frame{border-color:rgba(255,255,255,.16);box-shadow:0 3px 10px rgba(0,0,0,.34),0 50px 90px -40px rgba(0,0,0,.85)}
.hero-cp .cp-phone{box-shadow:0 4px 12px rgba(0,0,0,.42),0 44px 80px -34px rgba(0,0,0,.9),inset 0 0 0 2px rgba(255,255,255,.10)}
.hero-cp .cp-cap{color:var(--on-dark-faint)}

.cp-hero-art{min-width:0}
.cp-hero-scene{margin:0;position:relative;padding:0 16px 96px 0}
.cp-hero-frame{animation:rise .7s cubic-bezier(.2,.7,.3,1) .15s both}
.cp-hero-phone{position:absolute;right:0;bottom:0;width:160px;padding:6px;border-radius:26px;z-index:2;animation:cpSettle .8s var(--ease-out) .5s both}
.cp-hero-phone::before{width:52px;height:14px;top:6px}
.cp-hero-phone .cp-phone-screen{border-radius:20px}
.cp-hero-scene > .cp-cap{position:absolute;left:0;bottom:8px;max-width:60%;animation:rise .6s cubic-bezier(.2,.7,.3,1) .7s both}
@keyframes cpSettle{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- 1. why it exists ---------- */
.cp-why{padding-bottom:104px}
.cp-why-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:72px;align-items:start}
.cp-statement{
  font-size:clamp(38px,4.6vw,60px);font-weight:800;line-height:1.02;letter-spacing:-0.048em;max-width:13ch;
  margin-top:6px;text-wrap:balance;
}
.cp-why-copy{padding-top:58px}
.cp-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:28ch;margin-bottom:22px}
.cp-why-copy > p:not(.cp-big):not(.cp-asks-k){font-size:17px;line-height:1.65;color:var(--muted);max-width:52ch}
.cp-asks-k{margin-top:34px;font-family:var(--fh);font-size:12.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.cp-asks{list-style:none;margin:12px 0 0;padding:0;max-width:52ch}
.cp-asks 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);
}
.cp-asks li:last-child{border-bottom:1px solid var(--line)}
.cp-asks li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);flex:none}

/* ---------- 2. the journey: one window, five moments ----------
   Without JavaScript, on tablets and on phones each numbered step carries
   its own window. On a desktop with JavaScript the five windows gather into
   one sticky window on the right that changes as the reader moves down the
   steps (client-platform.js adds .is-stage). */
.cp-journey-head{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:end;margin-bottom:56px}
.cp-journey-head h2{max-width:16ch;text-wrap:balance}
.cp-journey-head .lede{padding-bottom:6px;max-width:44ch}
.cp-journey-grid{display:grid;grid-template-columns:1fr;align-items:start}
.cp-journey-grid.is-stage{grid-template-columns:.8fr 1.2fr;gap:64px}
.cp-steps{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.cp-step{display:grid;grid-template-columns:44px minmax(0,.72fr) minmax(0,1.28fr);gap:16px 40px;align-items:start;padding:30px 0;border-bottom:1px solid var(--line)}
.cp-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;padding-top:6px;
}
.cp-step h3{font-size:21px;letter-spacing:-0.028em}
.cp-step-copy p{margin-top:10px;font-size:15.5px;line-height:1.55;color:var(--muted);max-width:38ch}
.cp-step-fig{margin:0;min-width:0}
.cp-step-fig .cp-cap{margin-top:10px}

.is-stage .cp-step{grid-template-columns:44px 1fr;gap:16px;padding:26px 0;transition:opacity .35s var(--ease)}
.is-stage .cp-step:not(.is-active){opacity:.5}
.is-stage .cp-step-fig{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cp-stage{position:sticky;top:110px;min-width:0}
.cp-stage .cp-cap{margin-top:12px}
.cp-stage-frame .cp-shot picture{display:block;position:absolute;inset:0;opacity:0;transition:opacity .55s var(--ease)}
.cp-stage-frame .cp-shot picture.is-on{opacity:1}

/* ---------- 3. without asking (dark) ---------- */
.cp-know{padding:112px 0}
.cp-know-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.cp-know-words{position:sticky;top:120px}
.cp-line{ /* RETIRED 9 Sept 2026: the stacked display lines, replaced by .cp-feed below. */
  font-family:var(--fh);font-size:clamp(34px,4.2vw,56px);font-weight:800;line-height:1.04;letter-spacing:-0.048em;
  color:#fff;margin:0;
}
.cp-line + .cp-line{margin-top:4px}
.cp-line-you{color:var(--amber);margin-top:26px}
.cp-know-copy h2{color:#fff;max-width:16ch;text-wrap:balance}
.cp-know-copy > p:not(.eyebrow){margin-top:20px;font-size:17px;line-height:1.65;color:var(--on-dark-muted);max-width:50ch}
.cp-know-ledger{margin:36px 0 0;display:grid}
.cp-know-ledger > div{display:grid;grid-template-columns:176px 1fr;gap:20px;padding:14px 0;border-top:1px solid rgba(255,255,255,.13)}
.cp-know-ledger > div:last-child{border-bottom:1px solid rgba(255,255,255,.13)}
.cp-know-ledger dt{font-family:var(--fh);font-size:16px;font-weight:700;letter-spacing:-0.025em;color:#fff}
.cp-know-ledger dd{margin:0;font-size:15px;line-height:1.5;color:var(--on-dark-muted)}

/* ---------- 4. every customer ---------- */
.cp-every-head{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:end;margin-bottom:56px}
.cp-every-head h2{max-width:14ch}
.cp-every-head .lede{padding-bottom:6px;max-width:44ch}
.cp-ledger{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 64px;border-top:1px solid var(--ink)}
.cp-ledger > div{display:grid;grid-template-columns:184px 1fr;gap:20px;padding:20px 0;border-bottom:1px solid var(--line)}
.cp-ledger dt{font-family:var(--fh);font-size:17px;font-weight:700;letter-spacing:-0.025em;color:var(--ink);line-height:1.3}
.cp-ledger dd{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.cp-every-note{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);font-size:16px;line-height:1.6;color:var(--muted);max-width:72ch}

/* ---------- 5. SEO customers also see ---------- */
.cp-growth-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:center}
.cp-growth-copy h2{max-width:14ch}
.cp-growth-copy .lede{margin-top:20px;max-width:40ch}
.cp-growth-list{list-style:none;margin:30px 0 0;padding:0}
.cp-growth-list li{display:grid;gap:4px;padding:13px 0;border-top:1px solid var(--line)}
.cp-growth-list li:last-child{border-bottom:1px solid var(--line)}
.cp-growth-list b{font-family:var(--fh);font-size:16.5px;font-weight:700;letter-spacing:-0.025em;color:var(--ink)}
.cp-growth-list span{font-size:15px;line-height:1.5;color:var(--muted)}
.cp-growth-terms{margin-top:22px;font-size:15px;line-height:1.6;color:var(--muted)}
.cp-growth-terms .link-u{font-size:15px}
.cp-growth-art{margin:0;position:relative;padding:0 0 128px}
.cp-growth-main{position:relative;z-index:1}
.cp-growth-second{position:absolute;left:-28px;bottom:34px;width:62%;z-index:2;box-shadow:0 40px 70px -36px rgba(18,33,47,.6)}
.cp-growth-art > .cp-cap{position:absolute;right:0;bottom:0;max-width:44%;text-align:right}

/* ---------- 6. on your phone ---------- */
.cp-mobile-grid{display:grid;grid-template-columns:1fr .95fr;gap:80px;align-items:center}
.cp-mobile-copy h2{max-width:14ch}
.cp-mobile-copy > p:not(.eyebrow){margin-top:20px;font-size:17px;line-height:1.65;color:var(--muted);max-width:48ch}
.cp-mobile-list{list-style:none;margin:28px 0 0;padding:0;max-width:48ch}
.cp-mobile-list li{position:relative;padding:12px 0 12px 24px;border-top:1px solid var(--line);font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.cp-mobile-list li::before{content:"";position:absolute;left:2px;top:21px;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.cp-mobile-list li:last-child{border-bottom:1px solid var(--line)}
.cp-phones{margin:0;position:relative;display:flex;justify-content:center;align-items:flex-start;gap:28px;padding:0 0 44px}
.cp-phone-b{margin-top:64px}
.cp-phones > .cp-cap{position:absolute;left:0;right:0;bottom:0;text-align:center}

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

/* ---------- 8. final ---------- */
.cp-final h2{max-width:18ch;text-wrap:balance}
.cp-every-head h2,.cp-growth-copy h2,.cp-mobile-copy h2,.cp-faq-head h2{text-wrap:balance}

/* ============================================================
   Responsive: laptop and tablet
   ============================================================ */
@media (max-width:1180px){
  .hero-cp .wrap{gap:48px;grid-template-columns:1fr 1fr}
  .cp-hero-phone{width:148px}
  .cp-ledger{gap:0 40px}
  .cp-ledger > div{grid-template-columns:160px 1fr;gap:16px}
}
@media (max-width:1040px){
  .hero-cp .wrap{grid-template-columns:minmax(0,1fr);gap:48px}
  .hero-cp h1{max-width:20ch}
  .cp-hero-art{max-width:680px}
  .cp-hero-phone{width:156px}
  .cp-why-grid,.cp-know-grid,.cp-growth-grid,.cp-mobile-grid,.cp-faq-grid{grid-template-columns:1fr;gap:44px}
  .cp-why-copy{padding-top:0}
  .cp-statement{max-width:16ch}
  .cp-know-words,.cp-faq-head{position:static}
  .cp-journey-head,.cp-every-head{grid-template-columns:1fr;gap:14px;margin-bottom:40px}
  .cp-growth-art{max-width:680px}
  .cp-growth-second{left:-16px}
}
@media (max-width:820px){
  .cp-step{grid-template-columns:44px 1fr;gap:14px 16px}
  .cp-step-fig{grid-column:2}
  .cp-step-copy p{max-width:52ch}
  .cp-ledger{grid-template-columns:1fr;gap:0}
  .cp-know{padding:88px 0}
  .cp-know-ledger > div{grid-template-columns:150px 1fr}
  .cp-phone{width:200px}
  .cp-phone-b{margin-top:48px}
  .cp-growth-art{padding-bottom:110px}
  .cp-growth-second{width:64%;bottom:30px}
}

/* ============================================================
   Phone composition (<=640px): the same page, composed for a phone.
   The hero window keeps its phone (smaller, tucked into the corner);
   statements hold two or three lines; the journey becomes a numbered
   list with a window under each step; ledgers become single columns;
   the SEO windows stack; the two phones sit side by side at a
   smaller size; the FAQ stays an accordion. Nothing is removed.
   ============================================================ */
@media (max-width:640px){
  .hero-cp .dk-facts{margin-top:24px;padding-top:16px}
  .hero-cp h1{max-width:none;font-size:clamp(30px,8.2vw,36px);letter-spacing:-0.038em;margin-bottom:16px}
  .hero-cp .hero-sub{font-size:16.5px;max-width:none}
  .hero-cp .hero-ctas{margin-top:24px;gap:10px}
  .hero-cp .hero-ctas .btn{width:100%}
  .cp-hero-art{max-width:none}
  .cp-hero-scene{padding:0 0 76px}
  .cp-hero-phone{width:112px;right:-6px;padding:5px;border-radius:20px}
  .cp-hero-phone::before{width:40px;height:11px;top:5px}
  .cp-hero-phone .cp-phone-screen{border-radius:15px}
  .cp-hero-scene > .cp-cap{bottom:0;max-width:62%;font-size:12px}
  .cp-chrome{height:28px;padding:0 10px;gap:5px}
  .cp-chrome i{width:7px;height:7px}
  .cp-url{font-size:10px;padding:2px 8px;margin-left:6px}

  .cp-why{padding:60px 0 56px}
  .cp-why-grid{gap:26px}
  .cp-statement{font-size:clamp(32px,9.4vw,40px);letter-spacing:-0.045em;max-width:none}
  .cp-big{font-size:19px;max-width:none;margin-bottom:16px}
  .cp-why-copy > p:not(.cp-big):not(.cp-asks-k){font-size:16px}
  .cp-asks-k{margin-top:26px}
  .cp-asks li{padding:11px 0;font-size:15px}

  .cp-journey{padding:60px 0}
  .cp-journey-head{margin-bottom:24px}
  .cp-journey-head h2{font-size:clamp(27px,7.4vw,30px);max-width:none}
  .cp-journey-head .lede{font-size:16.5px}
  .cp-step{grid-template-columns:34px 1fr;gap:12px;padding:20px 0}
  .cp-n{padding-top:4px;font-size:12px}
  .cp-step h3{font-size:18px}
  .cp-step-copy p{margin-top:6px;font-size:15px}
  .cp-step-fig .cp-cap{margin-top:8px;font-size:12px}

  .cp-know{padding:64px 0}
  .cp-know-grid{gap:32px}
  .cp-line{font-size:clamp(30px,8.6vw,38px)}
  .cp-line-you{margin-top:18px}
  .cp-know-copy h2{font-size:clamp(27px,7.4vw,30px);max-width:none}
  .cp-know-copy > p:not(.eyebrow){font-size:16px}
  .cp-know-ledger{margin-top:26px}
  .cp-know-ledger > div{grid-template-columns:1fr;gap:4px;padding:12px 0}
  .cp-know-ledger dt{font-size:15.5px}
  .cp-know-ledger dd{font-size:14.5px}

  .cp-every{padding:60px 0}
  .cp-every-head{margin-bottom:22px}
  .cp-every-head h2{font-size:clamp(27px,7.4vw,30px);max-width:none}
  .cp-every-head .lede{font-size:16.5px}
  .cp-ledger > div{grid-template-columns:1fr;gap:4px;padding:14px 0}
  .cp-ledger dt{font-size:16px}
  .cp-ledger dd{font-size:14.5px}
  .cp-every-note{margin-top:26px;padding-top:18px;font-size:15px}

  .cp-growth{padding:60px 0}
  .cp-growth-grid{gap:30px}
  .cp-growth-copy h2{font-size:clamp(27px,7.4vw,30px);max-width:none}
  .cp-growth-copy .lede{font-size:16.5px;margin-top:14px;max-width:none}
  .cp-growth-list{margin-top:22px}
  .cp-growth-list li{padding:11px 0}
  .cp-growth-list b{font-size:15.5px}
  .cp-growth-list span{font-size:14.5px}
  .cp-growth-terms{margin-top:18px;font-size:14.5px}
  .cp-growth-art{max-width:none;padding:0}
  .cp-growth-second{position:static;width:auto;margin-top:16px;box-shadow:0 30px 60px -36px rgba(18,33,47,.5)}
  .cp-growth-art > .cp-cap{position:static;max-width:none;text-align:left;margin-top:12px}

  .cp-mobile{padding:60px 0}
  .cp-mobile-grid{gap:30px}
  .cp-mobile-copy h2{font-size:clamp(27px,7.4vw,30px);max-width:none}
  .cp-mobile-copy > p:not(.eyebrow){font-size:16px;margin-top:14px}
  .cp-mobile-list{margin-top:22px;max-width:none}
  .cp-mobile-list li{font-size:15px;padding:11px 0 11px 22px}
  .cp-mobile-list li::before{top:19px;width:7px;height:7px}
  .cp-phones{gap:14px;padding-bottom:36px}
  .cp-phone{width:calc(50% - 7px);max-width:200px;padding:6px;border-radius:24px}
  .cp-phone::before{width:48px;height:13px;top:6px}
  .cp-phone-screen{border-radius:18px}
  .cp-phone-b{margin-top:36px}
  .cp-phones > .cp-cap{font-size:12px}

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

  .cp-final{padding:72px 0}
  .cp-final h2{font-size:clamp(28px,8vw,34px)}
  .cp-final p{font-size:17px}
  .cp-final .btns .btn{width:100%}
  .cp-faq-more .link-u,.cp-growth-terms .link-u{display:inline-block;padding:10px 0;min-height:44px;line-height:24px}
}
@media (max-width:360px){
  .cp-hero-phone{width:96px}
  .cp-statement{font-size:30px}
  .cp-line{font-size:28px}
  .cp-phones{flex-direction:column;align-items:center}
  .cp-phone{width:min(220px,100%);max-width:none}
  .cp-phone-b{margin-top:0}
}

/* ============================================================
   WHY IT EXISTS and WITHOUT ASKING, rebuilt 9 September 2026
   (owner review). Appended rather than edited in place so the two new
   blocks read together and the rules they replace are visibly retired
   above them.
   ============================================================ */

/* The head is a head: the statement and the copy end together, and the
   left column no longer runs empty for two hundred pixels. */
.cp-why-head{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(40px,5vw,72px);align-items:start}
.cp-why-head .cp-why-copy{padding-top:0}
.cp-why-head .cp-statement{max-width:14ch}

/* The five questions get the width, and each one a card of its own. They
   are the most useful thing in the section and were the smallest. */
.cp-asks-block{margin-top:clamp(48px,5vw,72px);padding-top:34px;border-top:1px solid var(--line)}
.cp-asks-block .cp-asks-k{margin:0 0 20px}
.cp-why .cp-asks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;list-style:none;margin:0;padding:0;max-width:none}
.cp-why .cp-asks li{
  display:block;padding:18px 18px 20px;border:1px solid var(--line);border-bottom:1px solid var(--line);
  border-radius:14px;background:var(--white);font-size:15.5px;line-height:1.45;color:var(--ink);
}
.cp-why .cp-asks li::before{
  content:"?";display:grid;place-items:center;width:26px;height:26px;margin-bottom:12px;border-radius:50%;
  background:rgba(217,98,14,.12);color:var(--orange-dk);
  font-family:var(--fh);font-size:14px;font-weight:800;line-height:1;
}
@media (max-width:1100px){.cp-why .cp-asks{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1040px){.cp-why-head{grid-template-columns:1fr;gap:32px}.cp-why-head .cp-statement{max-width:16ch}}
@media (max-width:720px){.cp-why .cp-asks{grid-template-columns:1fr;gap:10px}.cp-why .cp-asks li{padding:15px 16px 16px;font-size:15px}.cp-asks-block{padding-top:26px}}

/* The four moments, drawn as the notes they are rather than as a wall of
   display type, and the point they make standing apart beneath them. */
.cp-know-words{position:sticky;top:120px}
.cp-feed{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.cp-note{
  display:flex;align-items:center;gap:14px;padding:17px 20px;border-radius:14px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  font-family:var(--fh);font-size:clamp(17px,1.5vw,20px);font-weight:700;letter-spacing:-0.03em;color:#fff;
  animation:rise .6s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(.1s + var(--i,0) * .12s);
}
.cp-note i{
  display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;
  background:rgba(240,160,60,.16);color:var(--amber);
}
.cp-note i svg{width:16px;height:16px}
.cp-note--live{background:rgba(240,160,60,.12);border-color:rgba(240,160,60,.42)}
.cp-note--live i{background:var(--amber);color:var(--ink)}
.cp-line-you{
  margin:26px 0 0;font-family:var(--fh);font-size:clamp(26px,2.6vw,36px);font-weight:800;
  letter-spacing:-0.04em;line-height:1.1;color:var(--amber);
}
@media (max-width:1040px){.cp-know-words{position:static}}
@media (max-width:640px){
  .cp-note{padding:14px 16px;gap:12px;font-size:16.5px}
  .cp-note i{width:25px;height:25px}
  .cp-line-you{margin-top:20px;font-size:clamp(24px,7vw,30px)}
}
@media (prefers-reduced-motion:reduce){.cp-note{animation:none}}