/* Content looks have their .ink/.pri/.sur background removed (the row paints it), and a dark row turns --pb-text light,
   so the library's "light button on ink" would be light on light. Keep the button light with dark text. */
body .sb-ctas.sb-dark .ink .btn { background: var(--pb-on-dark); color: var(--pb-ink); }

/* The arrow follows the text like the design's "Text →": the helper prints a no-break space and a span, and .tlink's flex gap made it wide.
   The arrow glyph is not in the Branding font's latin subset; the library page falls back to the system UI font. */
body .sb-ctas :is(.tlink, .big){gap:0}
body .sb-ctas :is(.tlink, .big) span[aria-hidden]{font-family:system-ui, sans-serif}
/* 14: the theme resets paragraph size; the quote is the h3 size. */

/* 03: the text half lines up with the framework's sections at every width (base.css --sb-side). */
body .sb-ctas .c3-text{padding-left:var(--sb-side)}
@media (max-width:900px){body .sb-ctas .c3-text{padding-inline:var(--sb-side)}}


/* Branding Sizes: role overrides kept outside the generated category CSS. */
body .sb-ctas .btn { font-size: var(--fs-buttons); }
body .sb-ctas .inp { font-size: var(--fs-copy) !important; }
body .sb-ctas .c5-door h3 { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)); }
body .sb-ctas .c6 h2.hd { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }
body .sb-ctas .c13-stats b { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)); }
body .sb-ctas .c14 blockquote p { font-size: var(--fs-quotes) !important; }
body .sb-ctas .c16-track span { font-size: clamp(calc(var(--fs-titles) * .65), 4.0625vw, var(--fs-titles)); }
body .sb-ctas .c19-steps .n { font-size: clamp(calc(var(--fs-huge) * .55), 9.375vw, var(--fs-huge)); }
body .sb-ctas .c20 .note { font-size: var(--fs-quotes) !important; }
body .sb-ctas .c20 .sig b { font-size: clamp(calc(var(--fs-medium) * .75), 2.1875vw, var(--fs-medium)) !important; }

/* 3.6.10: brand-color looks (.pri) are designed for Background = Main Color; the row paints that color, so on a light
   row their white text vanished (CTA-02/14). On a light row the look paints its own brand panel. */
body:not(.cc-look-pre-3-6-10) .sb-ctas:not(.sb-dark):not(.sb-edge) > .blk.pri { background: var(--pb-primary) !important; color: var(--color-on-main); border-radius: var(--st-photo-r); padding: clamp(40px, 6vw, 88px) clamp(24px, 5vw, 72px) !important; }
/* A fill button on its own brand panel is the panel's color; the library puts a light button there (CTA-03). */
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-blk.sb-blk.sb-ctas .pri .btn:not(.ghost) { background: var(--color-on-main); color: var(--color-main); border-color: var(--color-on-main); }
/* 04: the card is Branding Secondary; its words follow it (dark on a light card, light on a dark one). */
body:not(.cc-look-pre-3-6-10) .sb-ctas .c4-card { --c4-on: oklch(from var(--pb-secondary) clamp(0, (0.62 - l) * 1000, 1) 0 0); color: var(--c4-on); }
body:not(.cc-look-pre-3-6-10) .sb-blk.sb-blk.sb-blk.sb-ctas .c4-card :is(.hd, .lead, .tlink) { color: var(--c4-on); }
/* 3.6.10: 14's quote fills half the band; at the full Quotes size it ran seven lines of three words. */
body:not(.cc-look-pre-3-6-10) .sb-ctas .c14 blockquote p { font-size: min(var(--fs-quotes), max(26px, 2.5vw)) !important; }

/* 3.6.10: CTA-20's note is a personal note in the design (lead size, about 20-26px), not a pull quote; the Branding Sizes
   pass printed it at the full Quotes size (a nine-line wall on desktop, three words a line on a phone) and the signature
   name at Medium. Both go back to the design's proportions: note at Lead (scaled up a little on wide screens), name at Copy. */
body:not(.cc-look-pre-3-6-10) .sb-ctas .c20 .note { font-size: clamp(var(--fs-lead), 1.8vw, calc(var(--fs-lead) * 1.3)) !important; }
body:not(.cc-look-pre-3-6-10) .sb-ctas .c20 .sig b { font-size: var(--fs-copy) !important; }

/* 3.6.10: a Secondary row is not one of the dark rows the bridge marks (.sb-dark), so on a dark Secondary color the
   look's sentence, checklist and links kept the dark body and link colors (CTA-08 on the Luma test: 2.2:1). Looks that sit
   on the row follow that color's lightness; panels painted in the text color (.ink), brand panels (.pri) and photo
   panels keep their own colors. Edge looks paint their own band (CTA-10, CTA-12) and keep their light-row colors. */
body:not(.cc-look-pre-3-6-10) .bg-sec .sb-blk.sb-blk.sb-ctas:not(.sb-dark):not(.sb-edge) { --sb-on-sec: oklch(from var(--color-sec) clamp(0, (0.62 - l) * 1000, 1) 0 0); --pb-text: var(--sb-on-sec); --pb-muted: color-mix(in srgb, var(--sb-on-sec) 88%, var(--color-sec)); --pb-border: color-mix(in srgb, var(--sb-on-sec) 22%, transparent); color: var(--pb-text); }
body:not(.cc-look-pre-3-6-10) .bg-sec .sb-blk.sb-blk.sb-ctas:not(.sb-dark):not(.sb-edge) :is(.ink, .pri, .photo) { --pb-text: var(--color-body, var(--pb-ink)); }
body:not(.cc-look-pre-3-6-10) .bg-sec .sb-blk.sb-blk.sb-blk.sb-ctas:not(.sb-dark):not(.sb-edge) .tlink:not(:is(.ink, .pri, .photo, .ov) *) { color: var(--sb-on-sec); }
/* On a Secondary row the brand panel's button label (Main) printed in the button's own color (CTA-02/14); it takes the
   panel's brand color, which the panel itself paints. */
body:not(.cc-look-pre-3-6-10) .bg-sec .sb-blk.sb-blk.sb-blk.sb-blk.sb-ctas .pri .btn:not(.ghost) { color: var(--pb-primary); }

/* 3.6.10: a dark Secondary row now counts as dark (.sb-dark). CTA-10 and CTA-12 paint their own light band there, so
   they keep their light-row colors, as they did before (white words on their light band otherwise). CTA-12's top line
   stays light: it sits on the look's own brand strip (the measure reads the block's white behind it as 1.0:1). */
body:not(.cc-look-pre-3-6-10) .bg-sec .sb-blk.sb-blk.sb-blk.sb-ctas.sb-edge.sb-dark:is(.sb-look-10, .sb-look-12) { --pb-text: var(--color-body, var(--color-headings)); --pb-muted: var(--color-muted); --pb-border: var(--color-line); --pb-surface: var(--color-surface, var(--color-fourth)); --form-label-color: inherit; color: var(--pb-text); }
body:not(.cc-look-pre-3-6-10) .bg-sec .sb-blk.sb-blk.sb-blk.sb-blk.sb-ctas.sb-edge.sb-dark:is(.sb-look-10, .sb-look-12) .btn:not(.ghost) { background: var(--btn-fill); color: var(--btn-color); border-color: var(--btn-border); }
body:not(.cc-look-pre-3-6-10) .bg-sec .sb-blk.sb-blk.sb-blk.sb-blk.sb-ctas.sb-edge.sb-dark:is(.sb-look-10, .sb-look-12) .btn.ghost { background: transparent; color: var(--btn-outline); border-color: var(--btn-outline); }
body:not(.cc-look-pre-3-6-10) .bg-sec .sb-blk.sb-blk.sb-blk.sb-blk.sb-ctas.sb-edge.sb-dark:is(.sb-look-10, .sb-look-12) .tlink { color: var(--color-link); }