/* DESIGN-3 motion and page-type blocks (M1 canvases, M2 pill nav, M3 reveal, M4 loop strip, M5 swipe row, M6 step cards,
   M7 tilted strip, M8 segmented toggle, M9 glass FAQ, M10 mega footer). Mobile first from 390, reduced motion respected. */
:root { --ez: cubic-bezier(.22, 1, .36, 1); }

/* M1 hourglass light band + pastel blob in every canvas */
.cv::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.34) 47%, transparent 50%, transparent 51%, rgba(255,255,255,.22) 54%, transparent 63%);
  clip-path: polygon(30% 0, 70% 0, 52% 50%, 70% 100%, 30% 100%, 48% 50%); }
.cv-ink::before { background: linear-gradient(115deg, transparent 40%, rgba(220,239,176,.06) 48%, transparent 52%, rgba(255,255,255,.04) 55%, transparent 62%); }
.cv::after { content: ''; position: absolute; z-index: -1; width: 46vw; max-width: 520px; aspect-ratio: 1; border-radius: 50%; left: -14%; bottom: -26%;
  background: radial-gradient(circle, rgba(243,236,200,.75), rgba(243,236,200,0) 70%); filter: blur(40px); pointer-events: none; }
.cv-butter::after, .cv-ink::after { background: radial-gradient(circle, rgba(221,237,228,.5), rgba(221,237,228,0) 70%); }
.mo .cv::after { animation: drift2 34s ease-in-out infinite alternate; }

/* M2 nav: full width bar, then a floating glass pill after 64px */
.hdr-in { transition: max-width .5s var(--ez), border-radius .5s var(--ez), background .4s, box-shadow .4s, margin .5s var(--ez); }
.hdr.is-pill .hdr-in { background: rgba(247,246,241,.72); color: var(--ink); border-radius: 999px; box-shadow: 0 18px 40px -22px rgba(14,20,32,.45), 0 0 0 1px rgba(255,255,255,.7) inset;
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.hdr.is-pill .hdr-cta { background: var(--ink); color: #fff; }
.hdr.is-pill .logo .pm rect { fill: var(--ink); }
@media (min-width: 1200px) { .hdr.is-pill .hdr-in { max-width: 1160px; margin-top: 6px; } .nav-d a { white-space: nowrap; } .hdr.is-pill .nav-d a { color: var(--ink); } .hdr.is-pill .nav-d a:hover, .hdr.is-pill .nav-d a[aria-current] { background: rgba(14,20,32,.07); } }

/* M3 reveal easing + hero stagger */
.mo .rv, .mo .stagger > * { transition-timing-function: var(--ez); transition-duration: .9s; }
.mo .hero-text > * { animation: rise .9s var(--ez) both; }
.mo .hero-text > :nth-child(2) { animation-delay: .08s; } .mo .hero-text > :nth-child(3) { animation-delay: .22s; }
.mo .hero-text > :nth-child(4) { animation-delay: .34s; } .mo .hero-text > :nth-child(5) { animation-delay: .46s; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* M9 glass FAQ, plus turns into a cross */
.faq-i { background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgba(255,255,255,.8) inset, var(--shadow-s); transition: background .3s; }
.faq-i[open] { background: rgba(255,255,255,.85); }
.faq-i summary::before, .faq-i summary::after { transition: transform .45s var(--ez); }
.faq-i[open] summary::before { transform: rotate(45deg); } .faq-i[open] summary::after { transform: rotate(-45deg); }

/* shared mini-UI bits */
.mu { margin-top: 14px; border-radius: 14px; background: rgba(255,255,255,.75); box-shadow: 0 0 0 1px var(--line) inset; padding: 10px 12px; font-size: 12.5px; }
.mu-list { display: grid; gap: 6px; } .mu-list span { display: flex; align-items: center; gap: 8px; } .mu-list span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--pist-d); }
.mu-doc { display: grid; gap: 6px; } .mu-doc i { display: block; height: 7px; border-radius: 4px; background: var(--sage-2); } .mu-doc i:nth-child(2) { width: 80%; } .mu-doc i:nth-child(3) { width: 60%; }
.mu-doc b { justify-self: end; font: 600 11px var(--sans); background: var(--ink); color: var(--lime); padding: 3px 10px; border-radius: 99px; }
.mu-bars { display: flex; align-items: flex-end; gap: 8px; height: 64px; } .mu-bars i { flex: 1; height: var(--h); border-radius: 6px 6px 3px 3px; background: linear-gradient(var(--pist-d), var(--lime)); transform-origin: bottom; }
.mo .in .mu-bars i { animation: grow 1.2s var(--ez) both; } .mo .in .mu-bars i:nth-child(2) { animation-delay: .1s; } .mo .in .mu-bars i:nth-child(3) { animation-delay: .2s; } .mo .in .mu-bars i:nth-child(4) { animation-delay: .3s; }
@keyframes grow { from { transform: scaleY(.1); } }
.mu-chat { display: grid; gap: 6px; } .mu-chat span { justify-self: end; background: var(--mint); padding: 5px 10px; border-radius: 12px 12px 2px 12px; } .mu-chat b { justify-self: start; background: var(--ink); color: #fff; font-weight: 600; padding: 5px 10px; border-radius: 12px 12px 12px 2px; }
.mu-week { display: flex; gap: 6px; } .mu-week i { flex: 1; height: 26px; border-radius: 8px; background: var(--sage-2); } .mu-week i.on { background: var(--ink); }
.mu-call { display: flex; align-items: center; gap: 10px; font-weight: 600; } .mu-call i { width: 26px; height: 26px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 6px rgba(220,239,176,.4); }
.mo .mu-call i { animation: ping 2.4s infinite; }

/* As seen in: two running logo rows (M4). Row 1 runs left, row 2 runs right, 60 s for the longer row on desktop, 35 s on phones;
   --k scales the shorter row so both travel at one speed. Hover or keyboard focus pauses both rows and lifts one logo. */
.press { margin: 8px; border-radius: var(--r-cv); background: var(--paper); padding: 22px 0 20px; box-shadow: 0 0 0 1px var(--line) inset; overflow: hidden; overflow: clip;
  --ps-d: 60s; --ps-gap: 44px; --ps-fade: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.ps-h { text-align: center; font: 600 14px/1.2 var(--sans); color: var(--muted); margin: 0 16px 14px; }
.ps-v { overflow: hidden; overflow: clip; -webkit-mask-image: var(--ps-fade); mask-image: var(--ps-fade); }
.ps-v + .ps-v { margin-top: 12px; }
.ps-t { display: flex; width: max-content; align-items: center; gap: var(--ps-gap); padding: 6px var(--ps-gap) 6px 0; list-style: none; margin: 0; }
.ps-t li { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 58px; }
.ps-c { display: block; font: 500 11px/1.2 var(--sans); color: var(--muted); white-space: nowrap; }
.ps-t a, .ps-t span { display: block; border-radius: 6px; line-height: 0; }
.ps-t img { display: block; max-width: none; opacity: .62; transition: opacity .3s cubic-bezier(.22, 1, .36, 1), transform .3s cubic-bezier(.22, 1, .36, 1); }
.mo .ps-t { animation: marquee calc(var(--ps-d) * var(--k, 1)) linear infinite; }
.mo .ps-rev { animation-direction: reverse; }
.press:hover .ps-t, .press:focus-within .ps-t { animation-play-state: paused; }
.ps-t a:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (hover: hover) {
  .press:hover .ps-t img { opacity: .28; }
  .press .ps-t li:hover img { opacity: 1; transform: translateY(-2px) scale(1.06); }
}
.ps-t a:focus-visible img { opacity: 1; }
.ps-n { text-align: center; font-size: 13px; line-height: 1.4; color: var(--muted); margin: 14px 16px 0; }
.ps-p { max-width: 74ch; margin: 8px auto 0; padding: 0 20px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: balance; }
@media (max-width: 767px) {
  /* phones: smaller marks and a long fade, so a logo dissolves at the edge instead of showing a hard-cut glyph */
  .press { --ps-d: 35s; --ps-gap: 34px; --ps-fade: linear-gradient(90deg, transparent 0, transparent 11%, rgba(0, 0, 0, .12) 19%, #000 34%, #000 66%, rgba(0, 0, 0, .12) 81%, transparent 89%, transparent 100%); padding: 18px 0 16px; }
  .ps-t { zoom: .8; }
  .ps-t li { height: 58px; }
  .ps-p { font-size: 13px; }
}
/* reduced motion: a still two-row grid, every logo whole, no copies */
@media (prefers-reduced-motion: reduce) {
  .ps-v { -webkit-mask-image: none; mask-image: none; }
  .ps-t, .mo .ps-t { animation: none; width: auto; flex-wrap: wrap; justify-content: center; gap: 14px 32px; padding: 4px 20px; }
  .ps-t li[aria-hidden="true"] { display: none; }
}

/* M4 looping card strip, neighbours blur on hover */
.loop { overflow: hidden; overflow: clip; margin-top: 26px; }
.loop-t { display: flex; width: max-content; gap: 14px; padding: 6px 0 12px; }
.mo .loop-t { animation: marquee 40s linear infinite; }
.loop:hover .loop-t { animation-play-state: paused; }
.lc { width: 200px; flex: none; border-radius: var(--r-card); background: rgba(255,255,255,.7); box-shadow: var(--shadow); padding: 16px 14px 18px; text-align: center; transition: filter .4s, opacity .4s, transform .5s var(--ez); }
.lc img { height: 120px; width: auto; margin: 0 auto 10px; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(14,20,32,.18)); }
.lc span { font: 700 15px var(--display); letter-spacing: -.02em; }
@media (hover: hover) { .loop-t:hover .lc { filter: blur(3px); opacity: .6; } .loop-t .lc:hover { filter: none; opacity: 1; transform: translateY(-6px) scale(1.04); } }

/* M6 step cards with giant faded numbers */
.scs { display: grid; gap: 12px; margin-top: 24px; }
.sc { position: relative; overflow: hidden; overflow: clip; border-radius: var(--r-card); background: rgba(255,255,255,.72); box-shadow: var(--shadow); padding: 22px 20px 20px; }
.sc-n { position: absolute; right: -6px; top: -22px; font: 800 118px/1 var(--display); letter-spacing: -.06em; color: rgba(14,20,32,.06); pointer-events: none; }
.sc .h3 { position: relative; } .sc p { position: relative; font-size: 15px; color: var(--muted); margin-top: 6px; }
@media (min-width: 768px) { .scs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .scs { grid-template-columns: repeat(4, 1fr); } }

/* M7 tilted 3D strip of daily digest cards */
.tilt-cv { padding-bottom: 8px; }
.t3 { perspective: 1100px; margin: 26px calc(-1 * var(--g)) 0; overflow: hidden; overflow: clip; }
.t3-t { display: flex; width: max-content; gap: 14px; padding: 30px 0 50px; transform: rotateZ(-3deg); transform-style: preserve-3d; }
.mo .t3-t { animation: marquee 46s linear infinite; }
@media (min-width: 768px) { .t3-t { transform: rotateX(16deg) rotateZ(-4deg); padding-bottom: 70px; } }
.dg { width: 250px; flex: none; border-radius: 20px; background: #F7F6F1; color: var(--ink); padding: 16px 16px 18px; box-shadow: 0 30px 50px -24px rgba(0,0,0,.6); transition: transform .5s var(--ez); }
.dg:hover { transform: translateY(-10px) rotateX(-12deg); }
.dg-d { display: flex; justify-content: space-between; align-items: center; font: 600 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dg-d .pill { letter-spacing: 0; text-transform: none; font-size: 11px; padding: 3px 9px; }
.dg-t { font: 700 16px/1.25 var(--display); letter-spacing: -.02em; margin: 12px 0 6px; } .dg-n { font-size: 13.5px; color: var(--muted); }
.dg-l { display: block; height: 6px; border-radius: 4px; background: var(--sage-2); margin-top: 10px; } .dg-l.s { width: 60%; margin-top: 6px; }

/* bento: what you get */
.bento { display: grid; gap: 12px; margin-top: 24px; }
.bt { border-radius: var(--r-card); background: rgba(255,255,255,.75); box-shadow: var(--shadow); padding: 20px; }
.bt .ic { width: 36px; height: 36px; padding: 8px; border-radius: 12px; background: var(--lime); margin-bottom: 12px; }
.bt p { font-size: 15px; color: var(--muted); margin-top: 6px; }
.bt-1 { background: var(--ink); color: #fff; } .bt-1 .h3 { color: #fff; } .bt-1 .ic { color: var(--ink); } .bt-1 p { color: var(--muted-l); } .bt-1 .mu { background: rgba(255,255,255,.08); } .bt-1 .mu-doc i { background: rgba(255,255,255,.18); }
@media (min-width: 768px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .bento { grid-template-columns: 1.3fr 1fr 1fr; } .bt-0 { grid-row: span 2; } .bt-3 { grid-column: span 2; } }

/* price next to the market strip */
.pvs { display: grid; gap: 10px; margin-top: 22px; }
.pvs li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; border-radius: 18px; background: rgba(255,255,255,.7); box-shadow: 0 0 0 1px var(--line) inset; padding: 16px 18px; }
.pvs span { font-size: 14.5px; color: var(--muted); } .pvs b { font: 700 18px var(--display); letter-spacing: -.02em; }
.pvs li.pvs-us { background: var(--ink); color: #fff; } .pvs-us span, .pvs-us em { color: var(--muted-l); } .pvs-us b { color: var(--lime); font-size: 22px; } .pvs em { width: 100%; font-style: normal; font-size: 13px; }
@media (min-width: 1200px) { .pvs { grid-template-columns: repeat(4, 1fr); } .pvs li { flex-direction: column; } }

/* market number tiles, outlet cloud, time zones */
.nts { display: grid; gap: 12px; margin-top: 22px; }
.nt { border-radius: var(--r-card); background: rgba(255,255,255,.75); box-shadow: var(--shadow); padding: 20px; display: grid; gap: 6px; }
.nt span { font: 600 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.nt b { font: 800 clamp(26px, 7.4vw, 52px)/1.05 var(--display); letter-spacing: -.035em; } .nt em { font-style: normal; font-size: 14px; color: var(--muted); }
.nt-us { background: var(--ink); color: #fff; } .nt-us b { color: var(--lime); } .nt-us span, .nt-us em { color: var(--muted-l); }
@media (min-width: 768px) { .nts { grid-template-columns: 3fr 2fr; } }
.oc { margin-top: 26px; } .oc-h, .toc-h { font: 600 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.oc-l .pill { background: rgba(255,255,255,.8); font-size: 14px; }
.tz { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 22px; }
.tz li { border-radius: 18px; background: rgba(255,255,255,.6); padding: 12px 10px; display: grid; gap: 4px; }
.tz b { font: 800 22px var(--display); } .tz span { font-size: 11.5px; line-height: 1.3; color: var(--muted); }
.tz li.on { background: var(--ink); color: #fff; } .tz li.on span { color: var(--muted-l); }

/* monitoring: number tiles, sources grid, weekly scan */
.nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 20px; }
.nums li { border-radius: 18px; background: var(--mint); padding: 14px 12px; display: grid; gap: 2px; }
.nums b { font: 800 clamp(17px, 4.6vw, 26px) var(--display); letter-spacing: -.03em; } .nums span { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.srcg { display: flex; flex-wrap: wrap; gap: 8px; }
.srcg .pill { display: inline-flex; align-items: center; gap: 8px; background: var(--pale); font-size: 14px; } .srcg .ic { width: 15px; height: 15px; }
.wk { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 18px; position: relative; }
.wk li { display: grid; gap: 6px; justify-items: center; text-align: center; font-size: 11.5px; line-height: 1.3; color: var(--muted); }
.wk b { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--sage-2); color: var(--ink); font: 700 12px var(--sans); }
.wk li.on b { background: var(--ink); color: var(--lime); }

/* home 90 day timeline */
.tl90 { display: grid; gap: 0; margin-top: 24px; position: relative; padding-left: 26px; }
.tl90::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--pist-d), var(--sage)); }
.tl90 li { position: relative; padding: 0 0 20px; display: grid; gap: 2px; }
.tl90 li::before { content: ''; position: absolute; left: -26px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 4px var(--lime) inset, 0 0 0 1px var(--line); }
.tl90 b { font: 700 18px var(--display); letter-spacing: -.02em; } .tl90 span { color: var(--muted); font-size: 15px; }
@media (min-width: 1200px) { .tl90 { grid-template-columns: repeat(5, 1fr); padding: 30px 0 0; }
  .tl90::before { left: 0; right: 0; top: 7px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--pist-d), var(--sage)); }
  .tl90 li { padding: 0 16px 0 0; } .tl90 li::before { left: 0; top: -30px; } }

/* case tiles */
.cts { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 22px calc(-1 * var(--g)) 0; padding: 4px var(--g) 12px; scrollbar-width: none; }
.cts::-webkit-scrollbar { display: none; }
.ct { position: relative; scroll-snap-align: start; border-radius: var(--r-card); overflow: hidden; overflow: clip; background: var(--ink); color: #fff; box-shadow: var(--shadow); }
.ct img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; opacity: .9; transition: transform .8s var(--ez); }
.ct:hover img { transform: scale(1.05); }
.ct-y { position: absolute; top: 12px; left: 12px; background: var(--lime); color: var(--ink); font-weight: 600; font-size: 12.5px; }
.ct p { padding: 12px 16px 16px; font-weight: 600; font-size: 15px; line-height: 1.35; }
@media (min-width: 768px) { .cts { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); overflow: visible; margin: 26px 0 0; padding: 0; } }
@media (min-width: 1200px) { .cts { grid-template-columns: repeat(4, 1fr); } .cts-3 { grid-template-columns: repeat(3, 1fr); } }
.irps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.irp { position: relative; border-radius: 18px; overflow: hidden; overflow: clip; } .irp img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.irp figcaption { position: absolute; left: 8px; right: 8px; bottom: 8px; font-size: 11px; line-height: 1.3; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.irp figcaption span { display: inline-block; margin-top: 4px; background: rgba(14,20,32,.72); padding: 2px 8px; border-radius: 99px; text-shadow: none; }
@media (min-width: 1200px) { .irps { grid-template-columns: repeat(4, 1fr); } }

/* about: career dots, press list, speaking strip */
.career .cr { position: relative; padding-top: 30px; }
.career .cr::before { content: ''; position: absolute; left: 18px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 5px var(--lime); }
.career .cr::after { content: ''; position: absolute; left: 32px; right: -12px; top: 14px; height: 2px; background: rgba(14,20,32,.15); }
.press .pill { background: var(--paper); box-shadow: var(--shadow-s); font-weight: 600; }
.talk-l li { position: relative; padding: 10px 0 10px 22px; border-top: 1px solid var(--line); } .talk-l li::before { content: ''; position: absolute; left: 0; top: 17px; width: 10px; height: 10px; border-radius: 50%; background: var(--pist-d); }

/* guides: sticky on-this-page nav, pull quote, template block, paper examples, swipe row */
.toc { margin: 8px; border-radius: var(--r-cv); background: var(--paper); padding: 16px var(--g); display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; align-items: center; }
.toc::-webkit-scrollbar { display: none; }
.toc-h { margin: 0 6px 0 0; white-space: nowrap; } .toc a { font-size: 13.5px; text-decoration: none; padding: 7px 12px; border-radius: 99px; background: var(--pale); }
.toc a.on { background: var(--ink); color: #fff; }
@media (min-width: 1440px) { .toc { position: fixed; z-index: 30; left: 14px; top: 50%; transform: translateY(-50%); width: 168px; margin: 0; flex-direction: column; align-items: stretch; white-space: normal; padding: 16px 12px;
  background: rgba(255,255,255,.66); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--shadow-s); opacity: 0; pointer-events: none; transition: opacity .4s; }
  .toc.show { opacity: 1; pointer-events: auto; } .toc a { font-size: 12.5px; line-height: 1.3; border-radius: 12px; background: none; } }
.pq-cv { padding-top: 44px; padding-bottom: 44px; }
.pq { max-width: 860px; margin: 0 auto; text-align: center; }
.pq p { font: 600 clamp(22px, 5.6vw, 38px)/1.28 var(--serif); letter-spacing: -.01em; text-wrap: balance; }
.pq p::before { content: ''; display: block; width: 48px; height: 6px; border-radius: 3px; background: var(--pist-d); margin: 0 auto 18px; }
.pq footer { margin-top: 14px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ex { position: relative; background: #FFFEFA; border-radius: 6px; transform: rotate(-.8deg); box-shadow: 0 1px 0 #fff inset, 0 24px 40px -20px rgba(14,20,32,.4), 0 0 0 10px rgba(220,239,176,.55), 0 0 0 11px rgba(14,20,32,.06); }
.dl { display: grid; gap: 22px; align-items: center; padding: 22px; border-radius: var(--r-card); background: rgba(255,255,255,.5); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 0 0 1px rgba(255,255,255,.8) inset, var(--shadow); }
.dl-paper { width: 150px; aspect-ratio: 3/4; border-radius: 8px; background: #FFFEFA; box-shadow: 0 20px 34px -16px rgba(14,20,32,.4); transform: rotate(-4deg); padding: 16px 14px; display: grid; align-content: start; gap: 8px; }
.dl-k { font: 700 12px var(--display); } .dl-paper i { display: block; height: 6px; border-radius: 3px; background: var(--sage-2); } .dl-paper i.s { width: 64%; }
@media (min-width: 768px) { .dl { grid-template-columns: 200px 1fr; padding: 36px; } .dl-paper { width: 180px; } }
.swipe { display: grid; grid-auto-flow: column; grid-auto-columns: 72%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 22px calc(-1 * var(--g)) 0; padding: 10px var(--g) 16px; scrollbar-width: none; }
.swipe::-webkit-scrollbar { display: none; }
.swipe li { scroll-snap-align: center; transition: transform .4s var(--ez), opacity .4s; }
.swipe li.far { transform: scale(.92); opacity: .75; }
.rg { display: block; text-decoration: none; overflow: hidden; overflow: clip; background: var(--paper); position: relative; }
.rg .im { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; } .rg .tag { position: absolute; top: 12px; left: 12px; } .rg .h3 { display: block; padding: 14px 16px 18px; font-size: 16px; }
@media (min-width: 1200px) { .swipe { grid-auto-columns: calc(25% - 9px); margin: 26px 0 0; padding: 10px 0 16px; } }

/* tools: plan-card form, example result */
.plan-card { position: relative; box-shadow: 0 0 0 1px rgba(255,255,255,.9) inset, 0 40px 70px -30px rgba(0,0,0,.6); }
.plan-card::before { content: 'Free, by email'; position: absolute; top: -12px; right: 18px; background: var(--lime); color: var(--ink); font: 600 12px var(--sans); padding: 5px 12px; border-radius: 99px; }
@media (min-width: 1200px) { .p-c-tool .cta-grid > .card { position: sticky; top: 110px; } }
.res { border-radius: var(--r-card); background: var(--paper); box-shadow: var(--shadow), 0 0 0 10px var(--mint); padding: 20px; }
.res-h { display: flex; justify-content: space-between; align-items: center; font: 700 17px var(--display); margin-bottom: 12px; }
.res li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 14.5px; } .res li span { color: var(--muted); } .res li b { text-align: right; }
.res-f { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: var(--muted); } .res-f .ic { width: 16px; height: 16px; }

/* M8 segmented pill toggle over the plans */
.seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); max-width: 420px; margin-top: 20px; padding: 5px; border-radius: 99px; background: var(--pale); box-shadow: 0 0 0 1px var(--line) inset; }
.seg button { position: relative; z-index: 1; border: 0; background: none; padding: 10px 6px; border-radius: 99px; font-weight: 600; font-size: 14.5px; cursor: pointer; transition: color .3s; }
.seg button[aria-pressed="true"] { color: var(--lime); }
.seg-k { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 3); border-radius: 99px; background: var(--ink); transform: translateX(calc(var(--k, 1) * 100%)); transition: transform .5s var(--ez); }
.tier.is-pick { outline: 3px solid var(--pist-d); outline-offset: 3px; }
.calc-side .plan { transition: transform .5s var(--ez); }

/* M10 mega footer: free guide and full-width wordmark */
.ftr-guide { display: grid; gap: 16px; margin-top: 34px; padding: 22px; border-radius: var(--r-card); background: rgba(255,255,255,.06); box-shadow: 0 0 0 1px rgba(255,255,255,.1) inset; }
.fg-t { font: 700 20px var(--display); letter-spacing: -.02em; color: #fff; margin-top: 6px; } .fg-p { color: var(--muted-l); font-size: 14.5px; margin-top: 4px; }
.fg-f .lf-step { display: grid; gap: 10px; } .fg-f .fld span { color: var(--muted-l); } .fg-f .lf-done { color: #fff; }
@media (min-width: 768px) { .ftr-guide { grid-template-columns: 1fr 1fr; align-items: center; } .fg-f .lf-step { grid-template-columns: 1fr auto; align-items: end; } }
.ftr-wm { margin: 30px 0 -8px; font: 400 clamp(44px, 13.6vw, 196px)/.9 var(--brand); letter-spacing: -.02em; text-align: center; white-space: nowrap; color: transparent;
  background: linear-gradient(180deg, rgba(220,239,176,.9), rgba(220,239,176,.08)); -webkit-background-clip: text; background-clip: text; user-select: none; }

@media (prefers-reduced-motion: reduce) { .loop-t, .t3-t { animation: none !important; } .cv::after { animation: none; } }

/* ================================================================ MOBILE-FIX (owner review 30.09): no pill clouds, no empty screens,
   objects inside their canvas, per-page data blocks as clean lists. Desktop keeps one-row pills where they already sit. */


/* how it works: who does the step, a plain line with a dot instead of a pill */
.step .who { display: flex; align-items: center; gap: 8px; min-height: 0; margin-top: 12px; padding: 10px 0 0; border-top: 1px solid var(--line); border-radius: 0;
  background: none; box-shadow: none; white-space: normal; font: 600 13.5px/1.35 var(--sans); color: var(--forest); }
.step .who::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pist-d); }
.cv-ink .step .who { color: var(--lime); border-color: rgba(255, 255, 255, .12); }

@media (max-width: 768px) {
  /* pricing terms: a 3-column mini strip */
  .terms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 18px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .terms .pill { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px; min-height: 0; padding: 12px 6px; border-radius: 0; background: none;
    box-shadow: none; white-space: normal; text-align: center; font: 600 12.5px/1.3 var(--sans); color: var(--ink); text-wrap: balance; }
  .terms .pill + .pill { border-left: 1px solid var(--line); }
  .terms .pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--forest); }

  /* pricing: the plan toggle only scrolled a stacked list; cards are the choice on phones */
  .seg { display: none; }
  .tier.is-pick { outline: 0; }

  /* calculator: full-width option rows, 56px, dividers; radio or check state on the right */
  .opts, .opts-col { display: block; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line) inset; overflow: hidden; overflow: clip; }
  .opt { display: block; }
  .opt + .opt { border-top: 1px solid var(--line); }
  .opt span, .opt-card span { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; width: 100%; min-height: 56px;
    padding: 9px 58px 9px 16px; border-radius: 0; background: none; box-shadow: none; font: 600 15.5px/1.3 var(--sans); color: var(--ink); white-space: normal; }
  .opt span::before, .opt-card span::before { content: ''; position: absolute; left: auto; right: 16px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 0 1.5px rgba(14, 20, 32, .28) inset; transition: box-shadow .2s var(--ease), background-color .2s; }
  .opt input:checked + span { background: var(--lime-3); color: var(--ink); box-shadow: none; }
  .opt input:checked + span::before { background: #fff; box-shadow: 0 0 0 7px var(--ink) inset; }
  .opt-card span::before { border-radius: 7px; }
  .opt-card input:checked + span::before { background: var(--ink); box-shadow: none; }
  .opt-card input:checked + span::after { left: auto; right: 24px; top: 50%; width: 6px; height: 11px; margin-top: -7px; border-color: var(--lime); }
  .opt-card b { font-size: 15.5px; }
  .opt-card small, .opt-card input:checked + span small { font-size: 13px; line-height: 1.3; color: var(--muted); }
  .opt-card .inc, .opt-card input:checked + span .inc { color: var(--forest); }
  .opt input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: -3px; }
  .cs legend { margin-top: 10px; }
}

/* floating objects on phones: small, inside the canvas corner, never past an edge */
@media (max-width: 480px) {
  .cv > .entities .ent-m { top: 14px; right: 14px; bottom: auto; left: auto; width: auto; max-width: min(26vw, 34vw); transform: rotate(clamp(-7deg, var(--r), 7deg)); }
  .cv > .entities .ent-m ~ .ent-m { display: none; } /* one object per canvas on phones */
  .cv > .entities .ent-m img, .cv > .entities .ent-m i { width: auto; max-width: 100%; max-height: 60px; margin: 0 0 0 auto; }
  .cv:not(.hero):has(> .entities .ent-m) { padding-top: 88px; }
  .hero > .entities { display: none; } /* would sit under the nav or over the H1 */
  .hero-media .ent-m { max-width: 34%; }
  .hero-media .ent-tr { top: 0; right: 0; }
  .hero-media .ent-tl { top: 0; left: 0; }
}

/* about: press list */
.prl { margin-top: 14px; border-top: 1px solid var(--line); }
.prl li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); }
.prl-o { font: 700 15px/1.3 var(--display); letter-spacing: -.02em; color: var(--forest); }
.prl-y { font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.prl-n { grid-column: 1 / -1; margin-top: 2px; font-size: 14px; line-height: 1.4; color: var(--muted); text-wrap: pretty; }

/* per-page data blocks (content/PAGE-DATA-SPEC.md) */
.fd .h2 { margin-bottom: 18px; }
.sts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sts li { display: grid; align-content: start; gap: 6px; padding: 16px 14px; border-radius: var(--r-card); background: rgba(255, 255, 255, .78); box-shadow: var(--shadow-s); min-width: 0; }
.sts b { font: 800 clamp(22px, 6.4vw, 42px)/1.02 var(--display); letter-spacing: -.035em; color: var(--forest); white-space: nowrap; overflow-wrap: normal; }
.sts span { font-size: 14px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.sts small { font-size: 11.5px; line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; }
.sts-3 li:last-child { grid-column: 1 / -1; }
@media (min-width: 1200px) { .sts { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sts-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sts-3 li:last-child { grid-column: auto; } .sts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sts li { padding: 24px; } }
.pln { display: grid; border-top: 1px solid var(--line); }
.pln li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.pln-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--lime); font: 700 16px/1 var(--display); }
.pln .h3 { font-size: 17px; margin: 8px 0 4px; }
.pln p { font-size: 15px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
@media (min-width: 1200px) { .pln { grid-template-columns: repeat(3, 1fr); gap: 28px; border: 0; } .pln li { grid-template-columns: 1fr; border: 0; border-top: 2px solid var(--ink); padding-top: 22px; } }
.exc { max-width: 760px; padding: 20px; border-radius: var(--r-card); background: var(--mint); box-shadow: var(--shadow-s); }
.exc .h3 { font-size: 18px; margin-bottom: 8px; }
.exc dl div { padding: 12px 0; border-top: 1px solid var(--line); }
.exc dt { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.exc dd { margin: 4px 0 0; font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.exc-s { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.facts { border-top: 1px solid var(--line); max-width: 860px; }
.facts div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4px 16px; padding: 13px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.facts dt { font-size: 14px; color: var(--muted); line-height: 1.35; }
.facts dd { margin: 0; font-weight: 600; font-size: 15px; line-height: 1.4; text-align: right; overflow-wrap: anywhere; text-wrap: balance; }
.rws { border-top: 1px solid var(--line); max-width: 860px; }
.rws li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.rw-t { font-weight: 700; font-size: 15.5px; line-height: 1.3; }
.rw-t a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rw-s { grid-column: 1; font-size: 14px; line-height: 1.4; color: var(--muted); margin-top: 2px; }
.rw-f { grid-column: 1 / -1; margin-top: 4px; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--forest); line-height: 1.35; overflow-wrap: anywhere; }
.rws li { grid-template-columns: minmax(0, 1fr); }
.evt { position: relative; display: grid; padding-left: 26px; }
.evt::before { content: ''; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(var(--pist-d), var(--sage)); }
.evt li { position: relative; padding: 0 0 18px; }
.evt li::before { content: ''; position: absolute; left: -26px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 4px var(--lime) inset, 0 0 0 1px var(--line); }
.evt-w { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.evt-t { font: 700 16.5px/1.3 var(--display); letter-spacing: -.02em; color: var(--forest); margin-top: 2px; }
.evt-p { font-size: 14.5px; line-height: 1.5; color: var(--muted); margin-top: 4px; text-wrap: pretty; }
.rls { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--g)); padding: 4px var(--g) 12px;
  scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.rls::-webkit-scrollbar { display: none; }
.rls li { scroll-snap-align: start; min-width: 0; }
.rl { display: grid; align-content: start; gap: 8px; height: 100%; padding: 18px; border-radius: var(--r-card); background: rgba(255, 255, 255, .8); box-shadow: var(--shadow-s); text-decoration: none; }
.rl-t { font: 700 16.5px/1.25 var(--display); letter-spacing: -.02em; color: var(--forest); }
.rl-p { font-size: 14px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
@media (min-width: 1200px) { .rls { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 0; padding: 0; -webkit-mask-image: none; mask-image: none; } }

/* hero_image that is an object or an infographic: whole, on a pastel shape */
.shape-obj { clip-path: none; -webkit-clip-path: none; border-radius: 46% 54% 42% 58% / 44% 40% 60% 56%; background: radial-gradient(circle at 40% 35%, #F4F9E4, var(--lime) 70%, var(--pist-d)); overflow: hidden; overflow: clip; }
.shape .im-obj { object-fit: contain; padding: 9%; filter: drop-shadow(0 18px 22px rgba(14, 20, 32, .2)); }

/* guides: on-this-page as a folded vertical list; a side rail from 1440 */
.toc { display: block; padding: 0 var(--g); overflow: visible; white-space: normal; }
.toc-d > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; margin: 0; }
.toc-d > summary::-webkit-details-marker { display: none; }
.toc-d > summary::after { content: ''; width: 9px; height: 9px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-top: -4px; transition: transform .3s var(--ease); }
.toc-d[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.toc-l { display: grid; padding-bottom: 12px; counter-reset: t; }
.toc-l li { counter-increment: t; border-top: 1px solid var(--line); }
.toc-l a { display: grid; grid-template-columns: 26px minmax(0, 1fr); min-height: 48px; align-items: center; padding: 8px 0; font-size: 15px; font-weight: 500; line-height: 1.35;
  text-decoration: none; white-space: normal; background: none; border-radius: 0; }
.toc-l a::before { content: counter(t, decimal-leading-zero); font: 700 12px/1 var(--display); color: var(--muted); }
.toc-l a.on { color: var(--forest); font-weight: 700; background: none; }
@media (min-width: 1440px) { .toc { padding: 16px 12px; } .toc-d > summary { min-height: 0; margin-bottom: 8px; pointer-events: none; } .toc-d > summary::after { content: none; }
  .toc-l a { grid-template-columns: 1fr; min-height: 0; font-size: 12.5px; padding: 7px 4px; } .toc-l a::before { content: none; } }

/* header dropdowns (content/nav.md), glass panels */
.nd { position: relative; }
.nd-b, .nd-a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 0; border-radius: var(--pill); background: none; font-size: 14.5px; font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer; color: inherit; transition: background-color .2s; }
.nd-b::after { content: ''; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); margin-top: -3px; transition: transform .25s var(--ease); }
.nd.open .nd-b::after { transform: rotate(-135deg); margin-top: 3px; }
.nd-b:hover, .nd.open .nd-b, .nd.is-cur .nd-b, .nd-a:hover, .nd-a[aria-current] { background: rgba(14, 20, 32, .06); }
.hdr.is-solid:not(.is-pill) .nd-b:hover, .hdr.is-solid:not(.is-pill) .nd.open .nd-b { background: rgba(255, 255, 255, .1); }
.nd-p { position: absolute; left: 50%; top: calc(100% + 12px); min-width: 260px; display: grid; gap: 2px; padding: 10px; border-radius: 22px; transform: translateX(-50%);
  background: rgba(247, 246, 241, .9); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .8) inset, 0 30px 60px -24px rgba(14, 20, 32, .45); }
.nd-p::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.nd-p.nd-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 520px; }
.nd-p a { display: block; padding: 10px 14px; border-radius: 14px; font-size: 14.5px; font-weight: 500; line-height: 1.3; text-decoration: none; white-space: normal; }
.nd-p a:hover, .nd-p a:focus-visible, .nd-p a[aria-current] { background: rgba(14, 20, 32, .06); }
.nd-p a[aria-current] { font-weight: 700; }
.mo .nd.open .nd-p { animation: fadeup .3s var(--ez); }
@media (min-width: 1200px) { .nav-d { align-items: center; } .nav-d .nd-a, .nav-d .nd-b { padding: 10px 12px; } }

/* mobile panel: six accordions, then the dark button */
.pa { border-bottom: 1px solid var(--line); }
.pa-b, .pa-a { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 0; border: 0; background: none; font-weight: 600; font-size: 16.5px;
  text-align: left; text-decoration: none; cursor: pointer; color: var(--ink); }
.pa-a { border-bottom: 1px solid var(--line); }
.pa-b::after { content: ''; width: 9px; height: 9px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); margin: -4px 4px 0 0; transition: transform .3s var(--ease); }
.pa-b[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 4px; }
.pa-l { display: grid; padding: 0 0 12px; }
.pa-l a { display: block; padding: 11px 0 11px 14px; border-left: 2px solid var(--line); font-size: 15px; font-weight: 500; line-height: 1.3; text-decoration: none; }
.pa-l a[aria-current] { border-left-color: var(--forest); font-weight: 700; color: var(--forest); }
.panel-nav .pa-a[aria-current] { color: var(--forest); }
.menu-open .panel-nav > * { animation: slidein .5s var(--ease) both; }

/* footer: groups fold on phones */
.fgp > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 48px; margin: 0; }
.fgp > summary::-webkit-details-marker { display: none; }
.fgp > summary::after { content: ''; width: 8px; height: 8px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); margin: -4px 4px 0 0; transition: transform .3s var(--ease); }
.fgp[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.fgp-l { padding-bottom: 12px; }
@media (max-width: 767px) {
  .ftr-cols { display: block; border-top: 1px solid rgba(255, 255, 255, .1); }
  .ftr-cols .fgp { border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .ftr-cols .fgp-l { columns: 2; column-gap: 18px; }
  .ftr-cols .fgp-l a { break-inside: avoid; padding: 7px 0; }
}
@media (min-width: 768px) {
  .fgp > summary { min-height: 0; pointer-events: none; margin-bottom: 8px; }
  .fgp > summary::after { content: none; }
  .ftr-cols { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1200px) { .ftr-cols { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 26px 20px; } .ftr-cols a { font-size: 13.5px; } }

@media (max-width: 480px) {
  /* home strips: no marquee, no copies */
  .trust { padding: 6px 0; }
  .trust-track, .mo .trust-track { display: block; width: auto; animation: none; }
  .trust-set { display: grid; }
  .trust-set[aria-hidden="true"] { display: none; }
  .badge { padding: 12px 20px; white-space: normal; }
  .badge + .badge { border-top: 1px solid rgba(255, 255, 255, .08); }
  .loop-t, .mo .loop-t { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: auto; gap: 10px; animation: none; }
  .loop { margin-top: 20px; }
  .lc { width: auto; padding: 12px 10px 14px; }
  .lc img { height: 76px; }
  .lc span { font-size: 14px; }
  .lc[aria-hidden="true"] { display: none; }
  .t3 { perspective: none; margin: 20px 0 0; overflow: visible; }
  .t3-t, .mo .t3-t { display: grid; width: auto; gap: 10px; padding: 0 0 8px; transform: none; animation: none; }
  .dg { width: auto; box-shadow: var(--shadow-s); }
  .dg[aria-hidden="true"], .dg:nth-child(n+4) { display: none; }
  .dg:hover { transform: none; }
  /* objects hold still on phones */
  .cv > .entities .ent img, .cv > .entities .ent i { animation: none; }
}

@media (max-width: 768px) {
  /* included items read as a spec list with dividers, not rows of stadiums */
  .checks { gap: 0; }
  .checks li, .cv-paper .cv-in > .checks li, .cv-paper .cv-in > div > .checks li { border-radius: 0; background: none; padding: 12px 4px 12px 34px; border-top: 1px solid var(--line); }
  .checks li:last-child { border-bottom: 1px solid var(--line); }
  .checks li::before { left: 4px; }
  .checks li::after { left: 10px; }
  .cv-ink .checks li, .card-ink .checks li, .tier-hot .checks li { background: none; border-color: rgba(255, 255, 255, .12); }
  .cv-ink .checks li:last-child, .card-ink .checks li:last-child, .tier-hot .checks li:last-child { border-color: rgba(255, 255, 255, .12); }
  /* calculator summary: two lines instead of an ellipsis */
  .cs-v { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
  .cs .mk select { font-weight: 600; }
}

/* headings on phones: the build splits them into whole lines that keep 24px (H2) and 30px (H1) at 390; each line stays one line */
.rw-t, .rw-s { overflow-wrap: anywhere; }
@media (max-width: 1199px) { .prl { margin-bottom: 24px; } }
.sts small a { color: inherit; text-underline-offset: 2px; }
@media (max-width: 480px) {
  .facts div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .facts dt { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
  .facts dd { text-align: left; text-wrap: pretty; }
}
.seo .rws { border-top: 0; }
@media (min-width: 1200px) { .rws { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; max-width: none; border-top: 0; } .rws li:nth-child(-n+2) { border-top: 1px solid var(--line); } }
.rls { scroll-padding-inline: var(--g); }
/* copyable templates (templates: frontmatter and fenced blocks): wrap, never scroll, at 390 */
.tpls { display: grid; gap: 16px; }
@media (min-width: 1200px) { .tpls { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.tpl { padding: 18px 20px; min-width: 0; }
.tpl + .tpl, .sec-b .tpl { margin-top: 12px; }
.tpls .tpl + .tpl { margin-top: 0; }
.tpl-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.tpl-h .h3 { margin: 0; }
.tpl-copy { display: none; flex: none; }
.js .tpl-copy { display: inline-flex; }
.tpl-t { margin: 0; white-space: break-spaces; overflow-wrap: anywhere; word-break: normal; overflow: visible; max-width: 100%;
  font: 400 14px/1.6 Inter, system-ui, sans-serif; color: var(--ink); background: none; }

/* generated scenes are labelled as illustrations (ASTRA audit 3, R7), small and out of the way */
.il-cap { position: relative; z-index: 2; margin: 6px 0 0; font-size: 11px; line-height: 1.3; letter-spacing: .02em; color: var(--muted, #5B6472); text-align: right; }
.ct-il { position: absolute; top: 12px; right: 12px; padding: 2px 8px; border-radius: 99px; background: rgba(14,20,32,.72); color: #fff; font-size: 11px; line-height: 1.4; }
/* long stat values ("$12,000 to $20,000", "4 to 6 months"): smaller, and they wrap between words instead of spilling */
.sts b.bk-num-l, .bk .sts .bk-num-l { white-space: normal; font-size: clamp(19px, 5.2vw, 28px); line-height: 1.1; text-wrap: balance; }