/* ==========================================================================
   cards.css: one spacing scale + strict alignment for every card group.
   PREVIEW BUILD 2026-10-25. Loaded after cp.css / styles.css / ai-seo.css.
   Rules: equal tracks, equal heights (grid-auto-rows:1fr), 1-line titles
   (font-size from container width), fixed header rows, bottom-pinned CTAs.
   ========================================================================== */
:root{
  --s-1:.5rem;   /* 8  */
  --s-2:.75rem;  /* 12 */
  --s-3:1rem;    /* 16 */
  --s-4:1.5rem;  /* 24 */
  --s-5:2rem;    /* 32 */
  --card-pad:clamp(1.5rem,1.1rem + 1vw,2rem);      /* 24 -> 32 */
  --card-gap:clamp(1.5rem,1.3rem + .5vw,2rem);     /* 24 -> 32 between cards (Corey: >=24) */
  --card-pad-compact:clamp(1.5rem,1.4rem + .3vw,1.75rem); /* 24 -> 28, small tiles */
  --card-stack:var(--s-3);                          /* 16 between elements in a card */
  --card-radius:clamp(1.125rem,.95rem + .6vw,1.625rem);
  --card-frame:var(--s-1);                          /* image-framed cards */
  --icon-box:2.5rem; --icon-box-lg:3rem;           /* 40 / 48 */
  --icon-glyph:1.25rem; --icon-glyph-lg:1.5rem;
  --head-row:3rem;                                  /* fixed header row height */
  --chip-pad:.5rem .875rem; --chip-h:2rem;
}

/* ---- card groups: equal tracks, equal heights at every breakpoint ---- */
html body :is(.cpw-stats,.svc-grid,#process .cp-steps,#pricing .plan-grid,#websites .plan-grid,#seo .plan-grid,.opt-grid,.cp-steps.grid-cols-4,.work-grid,.rel-grid,#how ol.grid,#ai .grid.grid-cols-3,.cost-sec .col-span-5.flex-col,#research .col-span-5.space-y-4){display:grid!important;grid-template-columns:repeat(var(--cg-c,var(--cg-sm,1)),minmax(0,1fr))!important;grid-auto-rows:1fr;align-items:stretch;justify-items:stretch;gap:var(--card-gap)!important;margin-block:0}
html body :is(.cpw-stats,.svc-grid,#process .cp-steps,#pricing .plan-grid,#websites .plan-grid,#seo .plan-grid,.opt-grid,.cp-steps.grid-cols-4,.work-grid,.rel-grid,#how ol.grid,#ai .grid.grid-cols-3,.cost-sec .col-span-5.flex-col,#research .col-span-5.space-y-4)>*{margin:0!important;min-width:0;height:auto}
@media (min-width:48rem){html body :is(.cpw-stats,.svc-grid,#process .cp-steps,#pricing .plan-grid,#websites .plan-grid,#seo .plan-grid,.opt-grid,.cp-steps.grid-cols-4,.work-grid,.rel-grid,#how ol.grid,#ai .grid.grid-cols-3,.cost-sec .col-span-5.flex-col,#research .col-span-5.space-y-4){--cg-c:var(--cg-md,1)}}
@media (min-width:64rem){html body :is(.cpw-stats,.svc-grid,#process .cp-steps,#pricing .plan-grid,#websites .plan-grid,#seo .plan-grid,.opt-grid,.cp-steps.grid-cols-4,.work-grid,.rel-grid,#how ol.grid,#ai .grid.grid-cols-3,.cost-sec .col-span-5.flex-col,#research .col-span-5.space-y-4){--cg-c:var(--cg-lg,1)}}
@media (min-width:80rem){html body :is(.cpw-stats,.svc-grid,#process .cp-steps,#pricing .plan-grid,#websites .plan-grid,#seo .plan-grid,.opt-grid,.cp-steps.grid-cols-4,.work-grid,.rel-grid,#how ol.grid,#ai .grid.grid-cols-3,.cost-sec .col-span-5.flex-col,#research .col-span-5.space-y-4){--cg-c:var(--cg-xl,1)}}

/* ---- shared card box: padding, radius, internal rhythm ---- */
html body :is(.cpw-stats>li,.svc-grid>.svc-card,#process .cp-steps>li,#pricing .plan-grid>.plan-card,#websites .plan-grid>.plan-card,#seo .plan-grid>.plan-card,.opt-grid>.opt-card,.cp-steps.grid-cols-4>li,.work-grid>.work-card,.rel-grid>.rel-card,#how ol.grid>li,#ai .grid.grid-cols-3>.ai-card,.cost-sec .col-span-5.flex-col>.month-card,#research .col-span-5.space-y-4>.surface){container-type:inline-size;display:flex!important;flex-direction:column;gap:var(--card-stack)!important;padding:var(--card-pad)!important;border-radius:var(--card-radius)!important;height:100%;box-sizing:border-box}
html body :is(.cpw-stats>li,.svc-grid>.svc-card,#process .cp-steps>li,#pricing .plan-grid>.plan-card,#websites .plan-grid>.plan-card,#seo .plan-grid>.plan-card,.opt-grid>.opt-card,.cp-steps.grid-cols-4>li,.work-grid>.work-card,.rel-grid>.rel-card,#how ol.grid>li,#ai .grid.grid-cols-3>.ai-card,.cost-sec .col-span-5.flex-col>.month-card,#research .col-span-5.space-y-4>.surface)>*{margin-block:0!important}
/* the last element (list, divider, CTA, chip) is pinned to the card bottom */
html body :is(.cpw-stats>li,.svc-grid>.svc-card,#process .cp-steps>li,#pricing .plan-grid>.plan-card,#websites .plan-grid>.plan-card,#seo .plan-grid>.plan-card,.opt-grid>.opt-card,.cp-steps.grid-cols-4>li,.work-grid>.work-card,.rel-grid>.rel-card,#how ol.grid>li,#ai .grid.grid-cols-3>.ai-card,.cost-sec .col-span-5.flex-col>.month-card,#research .col-span-5.space-y-4>.surface)>*:last-child:not(:first-child){margin-top:auto!important}
html body :is(.cpw-stats>li,.svc-grid>.svc-card,#process .cp-steps>li,#pricing .plan-grid>.plan-card,#websites .plan-grid>.plan-card,#seo .plan-grid>.plan-card,.opt-grid>.opt-card,.cp-steps.grid-cols-4>li,.work-grid>.work-card,.rel-grid>.rel-card,#how ol.grid>li,#ai .grid.grid-cols-3>.ai-card,.cost-sec .col-span-5.flex-col>.month-card,#research .col-span-5.space-y-4>.surface):is(.cpw-stats>li,.opt-card)>*:last-child:not(:first-child){margin-top:0!important}

/* titles: always one line; font-size is set per group from the card width (see bottom) */
html body :is(.cpw-stats>li b,.svc-grid>.svc-card .svc-card__t,#process .cp-steps>li .v6-h3,#pricing .plan-grid>.plan-card .plan-card__name,#websites .plan-grid>.plan-card .plan-card__name,#seo .plan-grid>.plan-card .plan-card__name,.opt-grid>.opt-card .v6-h3,.cp-steps.grid-cols-4>li .v6-h3,.work-grid>.work-card .work-card__t,.rel-grid>.rel-card .rel-card__t,#how ol.grid>li .v6-h3,.cost-sec .col-span-5.flex-col>.month-card .eyebrow,#research .col-span-5.space-y-4>.surface h3,.proof-card .proof-card__t){white-space:nowrap!important;overflow:visible;line-height:1.1!important;margin:0!important;flex:none}

/* ---- header rows get a fixed height so the title line starts at the same y ---- */
html body .svc-card__top,
html body .opt-card>div:first-child{min-height:var(--head-row);height:var(--head-row);display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);flex:none}
html body .cp-steps>li>div:first-child,
html body #how ol.grid>li>div:first-child{height:clamp(3rem,2.4rem + 2.4vw,4.5rem);display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);flex:none}
html body .cp-steps .step-n,html body #how .step-n{line-height:1;font-size:clamp(3rem,2.4rem + 2.4vw,4.5rem)}
html body .plan-card__head{min-height:var(--chip-h);display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);flex:none}
html body .plan-card__head .chip{flex:none}
html body .work-card__meta{min-height:var(--chip-h);gap:var(--s-1);display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important}

/* ---- icon chips, arrows, badges, buttons: one scale ---- */
html body .icon-chip{width:var(--icon-box);height:var(--icon-box);padding:0;display:inline-grid;place-items:center;flex:none;border-radius:.75rem}
html body .icon-chip svg,html body .icon-chip i{width:var(--icon-glyph);height:var(--icon-glyph);font-size:var(--icon-glyph);line-height:1;display:block}
html body .icon-chip--lg{width:var(--icon-box-lg);height:var(--icon-box-lg);border-radius:.875rem}
html body .icon-chip--lg svg,html body .icon-chip--lg i{width:var(--icon-glyph-lg);height:var(--icon-glyph-lg);font-size:var(--icon-glyph-lg)}
html body .svc-card__go{width:var(--icon-box);height:var(--icon-box);display:grid;place-items:center;flex:none}
html body .svc-card__go svg{width:1rem;height:1rem}
html body .chip{padding:var(--chip-pad);min-height:var(--chip-h);line-height:1;align-items:center;gap:var(--s-1);box-sizing:border-box}
html body .chip svg,html body .chip i{width:.875rem;height:.875rem;flex:none}
html body .plan-btn,html body .plan__cta{min-height:3.25rem;padding:.875rem 1.5rem;gap:var(--s-2);align-items:center}
html body .plan-btn svg,html body .plan__cta svg{width:1rem;height:1rem;flex:none}

/* ---- bottom alignment: lists / dividers / CTAs pinned to the card bottom ---- */
html body .svc-card .plan-list{margin-top:auto!important;padding-top:var(--s-3);border-top:1px solid var(--line)}
html body .plan-card .plan-btn,html body .plan-card .plan__cta{margin-top:auto!important}
html body .cp-steps>li>.chip,html body #how ol.grid>li>.chip{margin-top:auto!important}
html body .work-card__link,html body .rel-card .work-card__link{margin-top:auto!important;padding-top:0}
html body .plan-list{gap:var(--s-2)}
html body :is(.plan-list,.tiers,.ai-names){align-content:start!important;justify-content:flex-start!important}
html body .plan-list li{gap:var(--s-2);align-items:flex-start}
html body .plan-list li svg{flex:none;width:1rem;height:1rem;margin-top:.3em}
html body .tier{padding-block:var(--s-3)}

/* ---- image-framed cards (work) ---- */
html body :is(.cpw-stats,.svc-grid,#process .cp-steps,#pricing .plan-grid,#websites .plan-grid,#seo .plan-grid,.opt-grid,.cp-steps.grid-cols-4,.work-grid,.rel-grid,#how ol.grid,#ai .grid.grid-cols-3,.cost-sec .col-span-5.flex-col,#research .col-span-5.space-y-4).work-grid>.work-card{padding:var(--card-frame)!important;gap:0!important}
html body .work-card__art{aspect-ratio:16/10;border-radius:calc(var(--card-radius) - var(--card-frame))}
html body .work-card__body{container-type:inline-size;display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-3) calc(var(--card-pad) - var(--card-frame)) calc(var(--card-pad) - var(--card-frame));flex:1}
html body .work-card__body>*{margin:0}
html body .work-card__body>*:last-child:not(:first-child){margin-top:auto}

/* work grid: 7 equal cards; a lone last card is centred instead of stretched */
@media (min-width:48rem){
  html body :is(.cpw-stats,.svc-grid,#process .cp-steps,#pricing .plan-grid,#websites .plan-grid,#seo .plan-grid,.opt-grid,.cp-steps.grid-cols-4,.work-grid,.rel-grid,#how ol.grid,#ai .grid.grid-cols-3,.cost-sec .col-span-5.flex-col,#research .col-span-5.space-y-4).work-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  html body :is(.cpw-stats,.svc-grid,#process .cp-steps,#pricing .plan-grid,#websites .plan-grid,#seo .plan-grid,.opt-grid,.cp-steps.grid-cols-4,.work-grid,.rel-grid,#how ol.grid,#ai .grid.grid-cols-3,.cost-sec .col-span-5.flex-col,#research .col-span-5.space-y-4).work-grid>.work-card{grid-column:span 2!important}
  html body :is(.cpw-stats,.svc-grid,#process .cp-steps,#pricing .plan-grid,#websites .plan-grid,#seo .plan-grid,.opt-grid,.cp-steps.grid-cols-4,.work-grid,.rel-grid,#how ol.grid,#ai .grid.grid-cols-3,.cost-sec .col-span-5.flex-col,#research .col-span-5.space-y-4).work-grid>.work-card:last-child:nth-child(odd){grid-column:2 / span 2!important}
}
@media (min-width:64rem){
  html body :is(.cpw-stats,.svc-grid,#process .cp-steps,#pricing .plan-grid,#websites .plan-grid,#seo .plan-grid,.opt-grid,.cp-steps.grid-cols-4,.work-grid,.rel-grid,#how ol.grid,#ai .grid.grid-cols-3,.cost-sec .col-span-5.flex-col,#research .col-span-5.space-y-4).work-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  html body :is(.cpw-stats,.svc-grid,#process .cp-steps,#pricing .plan-grid,#websites .plan-grid,#seo .plan-grid,.opt-grid,.cp-steps.grid-cols-4,.work-grid,.rel-grid,#how ol.grid,#ai .grid.grid-cols-3,.cost-sec .col-span-5.flex-col,#research .col-span-5.space-y-4).work-grid>.work-card,html body :is(.cpw-stats,.svc-grid,#process .cp-steps,#pricing .plan-grid,#websites .plan-grid,#seo .plan-grid,.opt-grid,.cp-steps.grid-cols-4,.work-grid,.rel-grid,#how ol.grid,#ai .grid.grid-cols-3,.cost-sec .col-span-5.flex-col,#research .col-span-5.space-y-4).work-grid>.work-card:last-child:nth-child(odd){grid-column:span 2!important}
  html body :is(.cpw-stats,.svc-grid,#process .cp-steps,#pricing .plan-grid,#websites .plan-grid,#seo .plan-grid,.opt-grid,.cp-steps.grid-cols-4,.work-grid,.rel-grid,#how ol.grid,#ai .grid.grid-cols-3,.cost-sec .col-span-5.flex-col,#research .col-span-5.space-y-4).work-grid>.work-card:last-child:nth-child(3n+1){grid-column:3 / span 2!important}
  html body :is(.cpw-stats,.svc-grid,#process .cp-steps,#pricing .plan-grid,#websites .plan-grid,#seo .plan-grid,.opt-grid,.cp-steps.grid-cols-4,.work-grid,.rel-grid,#how ol.grid,#ai .grid.grid-cols-3,.cost-sec .col-span-5.flex-col,#research .col-span-5.space-y-4).work-grid>.work-card:nth-last-child(2):nth-child(3n+1){grid-column:2 / span 2!important}
}

/* ---- stats strip: equal tiles, numbers on one baseline, labels start level ---- */
html body :is(.cpw-stats>li,.svc-grid>.svc-card,#process .cp-steps>li,#pricing .plan-grid>.plan-card,#websites .plan-grid>.plan-card,#seo .plan-grid>.plan-card,.opt-grid>.opt-card,.cp-steps.grid-cols-4>li,.work-grid>.work-card,.rel-grid>.rel-card,#how ol.grid>li,#ai .grid.grid-cols-3>.ai-card,.cost-sec .col-span-5.flex-col>.month-card,#research .col-span-5.space-y-4>.surface):is(.cpw-stats>li){padding:var(--card-pad-compact)!important;justify-content:flex-start!important;gap:var(--s-2)!important}
html body .cpw-stats b{display:block;line-height:1!important;font-size:var(--stat-f,2.75rem)!important;word-break:normal!important}
html body .cpw-stats li.cpw-confirm b{font-size:var(--stat-f,2.75rem)!important}

/* ---- single cards elsewhere: same padding / radius / rhythm tokens ---- */
html body .blog-card,html body .scope-card,html body .receipt-card,html body .launch-card,
html body .aud-card,html body .about-card,html body .chart-card,html body .nap-card,html body .cpw-author,
html body .month-card,html body .ai-card{padding:var(--card-pad)!important;border-radius:var(--card-radius)!important}
html body .blog-card,html body .rel-card{gap:var(--card-stack)!important}
html body .proof-card{padding:var(--card-frame)!important;border-radius:var(--card-radius)!important;gap:var(--s-3)!important}
html body .proof-card>*:not(.browser):not(:first-child){padding-inline:calc(var(--card-pad) - var(--card-frame))}
html body .proof-card>*:last-child{padding-bottom:calc(var(--card-pad) - var(--card-frame))}
html body .cpw-author{gap:var(--s-4)!important}
html body .cpw-author__photo{display:block;width:100%;max-width:14rem;aspect-ratio:1;border-radius:50%;overflow:hidden;padding:0!important;background:none!important;border:0!important}
html body .cpw-author__photo img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
html body .cpw-author--inline{display:grid!important;grid-template-columns:5rem minmax(0,1fr);align-items:center}
html body .cpw-author__photo--sm{max-width:5rem}
@media (max-width:40rem){html body .cpw-author__photo{max-width:8rem}html body .cpw-author--inline{grid-template-columns:4rem minmax(0,1fr)}html body .cpw-author__photo--sm{max-width:4rem}}
html body .cpw-links a{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-1);min-height:2.75rem;padding:var(--s-1) var(--s-3)}
html body .cpw-links a{white-space:nowrap}
@media (max-width:40rem){
  html body .cpw-author:has(.cpw-author__photo--sm){display:flex!important;flex-direction:column;align-items:flex-start;gap:var(--s-3)!important}
}
/* stat source line (e.g. client + data source) */
html body .cpw-stats .cpw-stat-src{display:block;margin-top:var(--s-1);font-size:.75rem;line-height:1.35;opacity:.8;overflow-wrap:anywhere}


/* ---- per-group columns (sm <48rem, md 48-64rem, lg 64-80rem, xl >=80rem) ---- */
html body .cpw-stats{--cg-sm:2;--cg-md:3;--cg-lg:3;--cg-xl:6}
html body .svc-grid{--cg-sm:1;--cg-md:1;--cg-lg:1;--cg-xl:3}
html body #process .cp-steps{--cg-sm:1;--cg-md:1;--cg-lg:3;--cg-xl:3}
html body #pricing .plan-grid{--cg-sm:1;--cg-md:1;--cg-lg:1;--cg-xl:3}
html body #websites .plan-grid{--cg-sm:1;--cg-md:1;--cg-lg:3;--cg-xl:3}
html body #seo .plan-grid{--cg-sm:1;--cg-md:1;--cg-lg:3;--cg-xl:3}
html body .opt-grid{--cg-sm:1;--cg-md:2;--cg-lg:2;--cg-xl:4}
html body .cp-steps.grid-cols-4{--cg-sm:1;--cg-md:2;--cg-lg:2;--cg-xl:4}
html body .work-grid{--cg-sm:1;--cg-md:2;--cg-lg:3;--cg-xl:3}
html body .rel-grid{--cg-sm:1;--cg-md:1;--cg-lg:1;--cg-xl:3}
html body #how ol.grid{--cg-sm:1;--cg-md:1;--cg-lg:3;--cg-xl:3}
html body #ai .grid.grid-cols-3{--cg-sm:1;--cg-md:1;--cg-lg:1;--cg-xl:3}
html body .cost-sec .col-span-5.flex-col{--cg-sm:1;--cg-md:1;--cg-lg:1;--cg-xl:1}
html body #research .col-span-5.space-y-4{--cg-sm:1;--cg-md:1;--cg-lg:1;--cg-xl:1}

/* ---- one-line titles: font-size = the largest size at which the longest title in the group still fits on one line
   (measured text widths; 100cqi = card content width). Same size for every card in a group. ---- */
/* stats: longest number '~3 weeks' ratio 3.859 */
html body .cpw-stats>li{--stat-f:min(2.75rem,24.874cqi)}
/* svc: longest 'Websites that get the phone to ring' */
html body .svc-grid>.svc-card .svc-card__t{font-size:min(2.125rem,6.732cqi)!important}
/* home-steps: longest 'Hand over the keys' */
html body #process .cp-steps>li .v6-h3{font-size:min(1.75rem,12.598cqi)!important}
/* home-pricing: longest 'Custom software' */
html body #pricing .plan-grid>.plan-card .plan-card__name{font-size:min(2.125rem,calc((100cqi - 108.6px - .75rem) * 0.1355),calc((100cqi - 108.6px - .75rem) * 0.3100),calc((100cqi - 165.7px - .75rem) * 0.7062))!important}
/* svc-websites: longest 'Foundation' */
html body #websites .plan-grid>.plan-card .plan-card__name{font-size:min(2.125rem,calc((100cqi - 122.8px - .75rem) * 0.2167),calc((100cqi - 122.8px - .75rem) * 0.2771),calc((100cqi - 122.8px - .75rem) * 0.3143))!important}
/* svc-seo: longest 'Corner Post' */
html body #seo .plan-grid>.plan-card .plan-card__name{font-size:min(2.125rem,calc((100cqi - 122.8px - .75rem) * 0.1970),calc((100cqi - 72.9px - .75rem) * 0.2194),calc((100cqi - 72.9px - .75rem) * 0.2679))!important}
/* svc-options: longest 'Internal dashboards' */
html body .opt-grid>.opt-card .v6-h3{font-size:min(1.75rem,11.369cqi)!important}
/* about-rules: longest 'Your name on everything' */
html body .cp-steps.grid-cols-4>li .v6-h3{font-size:min(1.75rem,9.571cqi)!important}
/* work: longest 'Sidewall reader and inventory' */
html body .work-grid>.work-card .work-card__t{font-size:min(2.125rem,7.733cqi)!important}
/* blog-related: longest 'Three services, priced before I start.' */
html body .rel-grid>.rel-card .rel-card__t{font-size:min(1.75rem,6.456cqi)!important}
/* lseo-how: longest 'Make details clear' */
html body #how ol.grid>li .v6-h3{font-size:min(1.75rem,12.488cqi)!important}
/* proof: longest 'Pathway Permit Expediting' */
html body .proof-card .proof-card__meta{container-type:inline-size}
html body .proof-card .proof-card__t{font-size:min(1.875rem,8.945cqi)!important}

/* ==========================================================================
   SPACING FLOOR (pt78u, 2026-10-26). Corey: >= 24px between any two elements
   and >= 24px between content and a card/figure edge. Checked by cards/spacing.py.
   ========================================================================== */
:root{--el-gap:var(--s-4);        /* 24: floor between elements */
  --head-gap:var(--sec-gap,clamp(2.5rem,5vw,4rem));  /* 40 -> 64: section head/intro -> cards */
  --frame-pad:var(--s-4)}       /* 24: inner padding of figures, players, frames */
/* a card group that follows a heading / intro gets the section rhythm (was zeroed by margin-block:0) */
html body * + :is(.cpw-stats,.svc-grid,#process .cp-steps,#pricing .plan-grid,#websites .plan-grid,#seo .plan-grid,.opt-grid,.cp-steps.grid-cols-4,.work-grid,.rel-grid,#how ol.grid,#ai .grid.grid-cols-3,.cost-sec .col-span-5.flex-col,#research .col-span-5.space-y-4){margin-top:var(--head-gap)!important}
html body :is(.sec__head,.cp-head) + *{margin-top:var(--head-gap)!important}
html body :is(.sec__head,.cp-head).\!mb-0{margin-bottom:0!important}
/* figures / browser frames (graph card, hero shots) */
html body .hero-shot{padding:var(--frame-pad)!important}
html body .hero-shot > figcaption{padding:var(--frame-pad) var(--s-1) 0!important}
html body .hero-shot.hero-shot--illus > figcaption{padding-bottom:0!important}
/* charts are shown whole: no crop, own background, 24px air on every side */
html body .browser__img--chart{aspect-ratio:auto!important;background:#F3F6F0;padding:var(--frame-pad)}
html body .browser__img--chart img{height:auto!important;object-fit:contain!important;aspect-ratio:1448/1086}
html body .js .hero-shot .browser__img--chart img{animation:none!important}
/* town map frame */
html body .surface-white.p-2{padding:var(--s-3)!important}
html body .hero-map__list{padding:var(--s-3) var(--s-3) var(--s-2)!important}
/* players */
html body .player{padding:max(var(--frame-pad),clamp(20px,2.4vw,32px))!important;gap:var(--el-gap)!important}
html body .cpw-audit-screen{padding:max(var(--frame-pad),clamp(16px,2.4vw,30px))!important}
html body .cpw-audit-controls{padding:var(--s-3) var(--frame-pad) var(--frame-pad)!important}
html body .cpw-audit-tab{padding:var(--s-3) var(--frame-pad) var(--frame-pad)!important}
/* stats tiles */
html body .cpw-stats{gap:var(--card-gap)!important}
html body .cpw-stats li{padding:var(--card-pad-compact)!important}
html body .work-fig{padding:var(--frame-pad)!important}
html body .work-fig > figcaption{padding-inline:var(--s-1)!important}
html body .m-static{margin-top:var(--el-gap)!important}
html body .cpw-audit-fine + .cpw-audit-cta,html body .cpw-audit-fine ~ .cpw-audit-cta{margin-top:var(--el-gap)!important}
/* labels and captions keep 24px from the thing they label */
html body .listen__label{margin-bottom:var(--el-gap)!important}
html body .listen .player + .listen__label,html body .player ~ * .listen__label{margin-top:var(--el-gap)}
html body .vshare__t{margin-bottom:var(--el-gap)!important}
html body .vp__cap{margin-top:var(--el-gap)!important}
html body .cp-case__screen-label{margin-bottom:var(--el-gap)!important}
html body .cp-case__screen figcaption{margin-top:var(--el-gap)!important}
/* about: full-size headshot (uncropped square original, no circle) */
html body .about-photo{margin:0;display:flex;flex-direction:column;gap:var(--s-3);padding:var(--frame-pad);border-radius:var(--card-radius);background:var(--c-tint,#ECEFE8)}
html body .about-photo__pic{display:block;width:100%}
html body .about-photo__pic img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;border-radius:calc(var(--card-radius) - var(--s-2))}
html body .about-photo__cap{font-size:.875rem;color:var(--muted,#55645e);padding-inline:var(--s-1)}
/* about: dog gallery */
html body .dog-grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--card-gap);grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr))}
html body .dog-card{margin:0;height:100%;display:flex;flex-direction:column;gap:var(--s-4);padding:var(--frame-pad);border-radius:var(--card-radius);background:#fff;border:1px solid var(--line,#dfe4dc)}
html body .dog-card__pic img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:calc(var(--card-radius) - var(--s-2))}
html body .dog-card__cap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--s-1) var(--s-3);font-size:.9375rem;margin-top:auto}
html body .dog-card__cap span{font-weight:700}
html body .dog-card__cap a{text-decoration:underline;text-underline-offset:.2em}
/* pt78u pass 2: callouts, tables, contact card */
html body .price-pill{padding:var(--card-pad-compact)!important;gap:var(--s-2)}
html body :is(p,ul,ol,div,h2,h3) + .price-pill,html body .price-pill + *{margin-top:var(--el-gap)!important}
html body .cp-stack > .eyebrow.cp-subhead{margin-bottom:0!important}
html body .cp-stack > .eyebrow.cp-subhead + *{margin-top:var(--el-gap)!important}
html body .table-wrap{margin-block:var(--el-gap)!important}
html body .nap-card{padding:var(--frame-pad)!important;margin-block:var(--el-gap)!important}
html body .nap-card > * + *,html body .nap-rows,html body .nap-note{margin-top:var(--el-gap)!important}
html body .receipt-card + *{margin-top:var(--el-gap)!important}
html body .closer__copy > .closer__direct,html body .closer__copy > .closer__lead + *{margin-top:var(--el-gap)!important}
@media (max-width:1023px){html body .cp-closer .contact-grid{gap:var(--el-gap)}}
html body .dog-grid:has(> li:only-child){grid-template-columns:minmax(0,min(100%,32rem))}