/* ATX Headshots design tweak layer, 27 Oct 2026.
   Decisions: atx-headshots-brain/site-rebuild-2026-10-26/TWEAK-LAYER-2026-10-27.md (fixes 1-18, 11 gated).
   Source of each rule: atx-headshots-brain/research/2026-10-27-fable-design-read.md section 3.
   Linked last on every page (after sqs.css, shell.css, rows-fix.css), so it overrides each page's own
   code-block CSS; most rules need !important because those blocks use id selectors.
   CSS only: no text, href, iframe src or class a script hooks is touched here. Shell-level fixes 5 and 10
   are in shell.css (tools/port/shell.mjs); markup fixes 7 and 12 are in tools/port/port.mjs.
   Page hooks set by the pipeline on <body>: atx-p-<slug> (home = atx-p-home) and atx-g-<group>.
   The blog keeps its own design (atx-blog-design): every sitewide rule below skips body.atx-g-blog.
   Where the read's selector did not match the built markup, the matching selector is used and noted. */

/* ---------- Fix 1. No grey (or italic) second half of headlines. <em> stays in the markup. ---------- */
/* Extended past the read's h1-h3: four heading-styled <p>/<div> carry the same grey second half
   (.atx-gb-v13__value-intro on the 13 booking-system pages, .comp-pricing-title, .proc-available-title, .atxcal-h). */
body:not(.atx-g-blog) #page :is(h1, h2, h3, [role="heading"], .atx-gb-v13__value-intro, .comp-pricing-title, .proc-available-title) em {
  color: inherit !important; font-style: normal !important; font-weight: inherit !important;
}

/* ---------- Fix 2. Eyebrow labels: 12px minimum, 0.08em tracking, 600, no dash rules. ----------
   The read's wildcard ([class*="eyebrow"], [class*="-tag"], [class*="-label"]) also matched labels that are not
   eyebrows (list labels, figure captions), so size and colour use explicit lists taken from a computed-style
   crawl of all 56 pages on 27 Oct (uppercase, under 13.5px, tracked). No text-transform is set: every label in
   the lists is already uppercase, so no visible text changes case. */
body:not(.atx-g-blog) #page :is(
  .s3-eyebrow,.s3-tag,.atx-reviews-svc__eyebrow,.s6-eyebrow,.s7-eyebrow,.s4-eyebrow,.s5-eyebrow,.s9-eyebrow,
  .s10-eyebrow,.s11-eyebrow,.s12-eyebrow,.s14-eyebrow,.s15-eyebrow,.s15-seo-eyebrow,.atx-gb-v13__eyebrow,
  .atx-gb-v13__cal-head,.atx-gb-v13__value-eyebrow,.atx-gb-v13__next-eyebrow,.al-eyebrow,.al-col-label,
  .corp-eyebrow,.trust-eyebrow,.pg-eyebrow,.pg-role,.rv-eyebrow,.tiers-eyebrow,.tier-marker-label,.pr-eyebrow,
  .pr-band-size,.comp-eyebrow,.comp-block-eyebrow,.comp-pricing-eyebrow,.comp-price-name,.comp-updates-label,
  .proc-eyebrow,.proc-marker-label,.proc-available-eyebrow,.cap-eyebrow,.cap-block-eyebrow,.bg-eyebrow,
  .bg-block-eyebrow,.faq-eyebrow,.final-eyebrow,.ih-eyebrow,.w-eyebrow,.wh-eyebrow,.h-eyebrow,.c-eyebrow,
  .f-eyebrow,.fn-eyebrow,.fn-geo-eyebrow,.co-eyebrow,.logos__label,.why__eyebrow,.session__eyebrow,.tier-eyebrow,
  .hiw-section__eyebrow,.portfolio__eyebrow,.reviews-section__eyebrow,.direct-bill__eyebrow,.faq-section__eyebrow,
  .conv-eyebrow,.chip-label,.process-eyebrow,.built-eyebrow,.sxsw-eyebrow,.events-eyebrow,.ind-eyebrow,
  .work-eyebrow,.conv-reviews-eyebrow,.hero-testimonial-eyebrow,.form-label,.hero__eyebrow,.bg__eyebrow,
  .ip-eyebrow,.ip-card-eyebrow,.ip-retouch-eyebrow,.work__eyebrow,.work__caption,.how__eyebrow,.use__eyebrow,
  .faq__eyebrow,.close__seo-eyebrow,.close__eyebrow,.close__trust-label,.bg-match__eyebrow,.recent-work__eyebrow,
  .reviews__eyebrow,.session-runs__eyebrow,.strong-headshot__eyebrow,.closing__eyebrow,.comp__eyebrow,.m__eyebrow,
  .book__eyebrow,.strong__eyebrow,.spec__eyebrow,.req__eyebrow,.hero-eyebrow,.cred-label,.about-eyebrow,
  .owners-eyebrow,.role-label,.cta-eyebrow,.ty-eyebrow,.tn-eyebrow,.tp-logos-label,.aqh-eyebrow,.aqb__eyebrow,
  .aqb__panellabel,.ih-cred-label,.atxb-eyebrow,.atxb-pg-role,.atxb-logos-label,.atxb-work-label,.atxic-eyebrow,
  .atxic-next-eyebrow,.atxb-stat-l,.atxb-stage-k
) { font-size: 12px !important; }
body:not(.atx-g-blog) #page :is([class*="eyebrow"], .s3-tag, .s11-tag, .al-col-label, .role-label, .cred-label,
  .tier-marker-label, .proc-marker-label, .pr-band-size, .comp-price-name, .close__trust-label, .logos__label) {
  letter-spacing: 0.08em !important; font-weight: 600 !important;
}
/* colour: #8B8B87 at 11px failed contrast; light sections get #686763, dark sections #A8A6A1 (crawl-sorted) */
body:not(.atx-g-blog) #page :is(
  .s3-eyebrow,.s3-tag,.s6-eyebrow,.s5-eyebrow,.s10-eyebrow,.s12-eyebrow,.s14-eyebrow,.atx-gb-v13__eyebrow,.al-eyebrow,
  .trust-eyebrow,.pg-eyebrow,.pg-role,.rv-eyebrow,.cap-eyebrow,.cap-block-eyebrow,.faq-eyebrow,.w-eyebrow,.wh-eyebrow,
  .c-eyebrow,.fn-eyebrow,.fn-geo-eyebrow,.logos__label,.why__eyebrow,.session__eyebrow,.tier-eyebrow,
  .direct-bill__eyebrow,.form-label,.ip-eyebrow,.ip-card-eyebrow,.work__eyebrow,.work__caption,.use__eyebrow,
  .faq__eyebrow,.req__eyebrow,.about-eyebrow,.cta-eyebrow,.acf-eyebrow,.acl-eyebrow,.acl-detail-label,.aff-eyebrow,
  .tn-eyebrow,.tp-logos-label,.aqb__panellabel,.atxic-eyebrow,.aec-eyebrow,.aei-eyebrow
) { color: #686763 !important; }
body:not(.atx-g-blog) #page :is(
  .s7-eyebrow,.s4-eyebrow,.s9-eyebrow,.s11-eyebrow,.s15-eyebrow,.s15-seo-eyebrow,.atx-gb-v13__next-eyebrow,
  .tier-marker-label,.pr-eyebrow,.pr-band-size,.proc-proof-caption,.proc-marker-label,.proc-available-eyebrow,
  .bg-proof-caption,.bg-block-eyebrow,.h-eyebrow,.f-eyebrow,.chip__label,.hiw-section__eyebrow,.portfolio__eyebrow,
  .chip-label,.hero-testimonial-eyebrow,.bg__eyebrow,.ip-retouch-eyebrow,.how__eyebrow,.close__seo-eyebrow,
  .close__eyebrow,.close__trust-label,.bg-match__eyebrow,.session-runs__eyebrow,.closing__eyebrow,.comp__eyebrow,
  .m__eyebrow,.spec__eyebrow,.hero-eyebrow,.cred-label,.owners-eyebrow,.role-label,.afh-jump-label,.ty-eyebrow,
  .atxic-next-eyebrow,.atxb-stage-k
) { color: #A8A6A1 !important; }
/* the 28-32px dash drawn before (and after, on centred ones) every eyebrow; centred eyebrows stay centred */
body:not(.atx-g-blog) #page :is([class*="eyebrow"], .role-label)::before,
body:not(.atx-g-blog) #page :is([class*="eyebrow"], .role-label)::after { content: none !important; display: none !important; }
/* eyebrow over the home hero photo (read: 13px, #DDD9D2) */
.atx-p-home #page #atxHomeHero .eyebrow { font-size: 13px !important; color: #DDD9D2 !important; letter-spacing: 0.08em !important; font-weight: 600 !important; }
/* shared footer labels. Read: ".atx-footer h4"; built markup: .atx-footer h3 and .atx-areas-footer h2 */
#footer-sections .atx-footer h3, .atx-areas-footer h2 {
  font-size: 12px !important; letter-spacing: 0.08em !important; font-weight: 600 !important; color: #A8A6A1 !important;
}

/* ---------- Fix 3. One button kit: the booking system's (.atxB__btn / .atxH__btn: 17px, 700, sentence case,
   15px 24px, 6px radius). The read's numbers (16px, 4px) approximate that kit; the kit's own values are used so the
   booking buttons themselves (the reference, must-not-change) are untouched. Colours stay as each page set them.
   Read's list is per page; built markup is matched by class prefix (every a.btn*, plus the named ones below). ---- */
body:not(.atx-g-blog) #page :is(a[class^="btn"], a[class*=" btn"], .s9-btn, .s15-cta-btn, .ip-cta, .ip-team-link__btn,
  .ih-btn, .co-btn, .fn-btn, .afc-btn-primary, .afc-btn-secondary, .aect-btn-primary, .aect-btn-secondary, .atxb-btn,
  .aqb__cta, .aqh-cta, .atx-s7 > div > a) {
  font-size: 17px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important;
  padding: 15px 24px !important; border-radius: 6px !important; line-height: 1.2 !important;
}
body:not(.atx-g-blog) #page :is(a[class^="btn"], a[class*=" btn"], .s9-btn, .s15-cta-btn, .ip-cta, .ip-team-link__btn,
  .ih-btn, .co-btn, .fn-btn, .afc-btn-primary, .afc-btn-secondary, .aect-btn-primary, .aect-btn-secondary, .atxb-btn,
  .aqb__cta, .aqh-cta, .atx-s7 > div > a, .s3-link)::after { content: none !important; display: none !important; }
/* the pricing-card buttons are 247px wide: with 24px side padding "Book LinkedIn Headshot" wrapped to a 2-line
   button (the read's "90px tall" tell); 16px side padding keeps it on one line. Critic pass, 27 Oct. */
body:not(.atx-g-blog) #page .ip-cta { padding: 15px 16px !important; white-space: nowrap; }
/* card text links: sentence case 15px/600 with their existing 1px underline, no arrow glyph */
body:not(.atx-g-blog) #page :is(.s3-link, .atxTD a) {
  font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important;
}
/* FAQ topic chips stay chips: 4px radius, 14px */
#page #atx-faq-hero .afh-jump-chip { border-radius: 4px !important; font-size: 14px !important; }

/* ---------- Fix 4. Buttons never run off a phone screen (content-box + width:100% + padding). Buttons only. ---------- */
#page :is(.btn, [class*="-btn"], a.atx-book-btn, a[class^="btn"], a[class*=" btn"], .ip-cta, .aqb__cta, .aqh-cta) { box-sizing: border-box !important; }

/* ---------- Fix 6 (home). Column-and-void: heading left, the lede (or the long fact paragraph) right.
   Read's selector .atx-s3 .s3-head does not exist: eyebrow, h2 and intros are direct children of .atx-sN,
   so the section itself becomes the grid. Read's ".atx-s9 What separates" is .atx-s5 in the markup.
   Nothing moves out of its section; DOM order is unchanged. Below 900px: as before. ---------- */
@media (min-width: 900px) {
  .atx-p-home #page :is(.atx-s3, .atx-s4, .atx-s5, .atx-s6, .atx-s7, .atx-s9, .atx-s10) {
    display: grid !important; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; align-items: start;
  }
  .atx-p-home #page :is(.atx-s3, .atx-s4, .atx-s5, .atx-s6, .atx-s7, .atx-s9, .atx-s10) > * { grid-column: 1 / -1; }
  .atx-p-home #page :is(.atx-s3, .atx-s4, .atx-s5, .atx-s6, .atx-s7, .atx-s9, .atx-s10) > [class$="-eyebrow"] { grid-column: 1; grid-row: 1; }
  .atx-p-home #page :is(.atx-s3, .atx-s4, .atx-s5, .atx-s6, .atx-s7, .atx-s9, .atx-s10) > h2 { grid-column: 1; grid-row: 2; margin-bottom: 0 !important; }
  /* single-intro sections: the lede sits right of the heading */
  .atx-p-home #page :is(.atx-s4, .atx-s5, .atx-s6, .atx-s7, .atx-s9, .atx-s10) > h2 + p[class$="-intro"] {
    grid-column: 2; grid-row: 1 / span 2; align-self: end; max-width: 56ch !important; margin: 0 !important;
  }
  .atx-p-home #page :is(.atx-s4, .atx-s5, .atx-s6, .atx-s7, .atx-s9, .atx-s10) > h2 + p[class$="-intro"] + * { margin-top: 56px !important; }
  /* Services: heading and short lede left, the Ryan Dunbar fact paragraph right */
  .atx-p-home #page .atx-s3 { grid-template-rows: auto auto 1fr; }
  .atx-p-home #page .atx-s3 > .s3-intro:nth-of-type(2) { grid-column: 1; grid-row: 3; margin: 20px 0 0 !important; }
  .atx-p-home #page .atx-s3 > .s3-intro:nth-of-type(3) { grid-column: 2; grid-row: 1 / span 3; align-self: end; max-width: 56ch !important; margin: 0 !important; }
  .atx-p-home #page .atx-s3 > .s3-grid { margin-top: 56px; }
}

/* ---------- Fix 8. Decorative numerals. Feature grids (Why ATX .s4, What separates .s5, Four signs .s10): hidden.
   Ordered process (.s7, dark section): kept as a 13px label, #A8A6A1 because the section is dark (read's
   #686763 is for light sections). Corporate process markers likewise. Blog numerals untouched. ---------- */
.atx-p-home #page :is(.s4-cred-num, .s5-num, .s10-num) { display: none !important; }
.atx-p-home #page .atx-s7 .s7-num { font-size: 13px !important; font-weight: 600 !important; color: #A8A6A1 !important; letter-spacing: 0.04em !important; line-height: 1.4 !important; margin: 0 0 10px !important; }
#page #atxCorpProcess .proc-marker { font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.04em !important; line-height: 1.4 !important; }

/* ---------- Fix 9. Review grids: no per-card "GOOGLE REVIEW" label, one star colour, flush quote cards. ---------- */
#page :is(.atx-reviews-svc__source, .tp-src) { display: none !important; }
#page .atx-reviews-svc__stars { color: #1C1916 !important; font-size: 14px !important; }
#page .atx-reviews-svc__card { border: 0 !important; box-shadow: none !important; background: #fff !important; }
#page .atxB__q i { color: #1C1916 !important; font-size: 14px !important; }

/* ---------- Fix 12. "Reserve your session." is now an H2 (port.mjs, class atx-gb-v13__title) on every page but
   /austin-headshot-photographer: the H1 rules it had, so it looks exactly as before. ---------- */
.atx-gb-v13 .atx-gb-v13__header > h2.atx-gb-v13__title {
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif !important; font-weight: 700 !important;
  font-size: clamp(2.2rem, 3.4vw + 0.8rem, 3.6rem) !important; line-height: 1.05 !important; letter-spacing: -0.03em !important;
  color: #1C1916 !important; margin: 0 0 18px !important; max-width: 20ch !important; text-transform: none !important;
  white-space: normal !important; text-align: start !important; padding: 0 !important;
}
@media (max-width: 600px) {
  .atx-gb-v13 .atx-gb-v13__header > h2.atx-gb-v13__title { font-size: 1.7rem !important; margin: 0 0 8px !important; }
}

/* ---------- Fix 13. Phone heroes: a scrim so the copy is readable over the face. Elements and order unchanged.
   Read's .hero-bg is the Squarespace section background image of the first section (.atx-first). ---------- */
@media (max-width: 767px) {
  .atx-p-home #page .atx-first .section-background::after, .atx-p-group-corporate-team-headshots-austin #page .atx-first:not(.atx-hero) .section-background::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: linear-gradient(to top, rgba(29,26,22,.94) 0, rgba(29,26,22,.94) 48%, rgba(29,26,22,.45) 72%, rgba(29,26,22,.15) 100%);
  }
  .atx-p-group-corporate-team-headshots-austin #page .atx-first:not(.atx-hero) .section-background img { object-position: 70% 8% !important; } /* ruling 90: home's 390 photo back to live's focal point */
  /* Conversion pass (27 Oct): the home scrim was too dark on the face. The copy block starts at the face, so the
     scrim now stays light down through the eyes and mouth (the top half of the section) and only closes in behind
     the body copy and buttons; the headline and lede are held legible by a soft shadow instead of a dark wash. */
  .atx-p-home #page .atx-first .section-background::after {
    background: linear-gradient(to top, rgba(29,26,22,.92) 0, rgba(29,26,22,.86) 34%, rgba(29,26,22,.5) 52%, rgba(29,26,22,.22) 70%, rgba(29,26,22,.12) 100%);
  }
  .atx-p-home #page #atxHomeHero :is(.eyebrow, h1, .atx-home-rating, .subhead) { text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 2px 18px rgba(0,0,0,.6); }
  .atx-p-lawyer-headshots-austin-texas #page .atx-first:not(.atx-hero) .section-background::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: linear-gradient(to top, rgba(236,236,234,.94) 0, rgba(236,236,234,.94) 48%, rgba(236,236,234,.45) 72%, rgba(236,236,234,.1) 100%);
  }
}

/* ---------- Fix 14. Lawyer hero at desktop: the text column no longer runs over the portrait's shoulder.
   Read's .lawyer-hero .hero-text is #lawHero .hero__text in the markup. ---------- */
@media (min-width: 1024px) {
  .atx-p-lawyer-headshots-austin-texas #page .atx-first:not(.atx-hero) #lawHero .hero__text { padding-left: calc(56px + 8%) !important; }
  /* the photo fades into its own grey backdrop (sampled rgb 201,201,203) behind the text column; full-height
     overlay on the section background, so there is no panel edge */
  .atx-p-lawyer-headshots-austin-texas #page .atx-first:not(.atx-hero) .section-background::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: linear-gradient(to right, rgba(201,201,203,0) 0, rgba(201,201,203,0) 50%, rgba(201,201,203,.92) 61%);
  }
}

/* ---------- Fix 15. Focus ring everywhere, 36px+ tap targets in the footers. ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid currentColor !important; outline-offset: 3px !important; }
#footer-sections .atx-footer a, .atx-areas-footer a { display: inline-block; padding: 6px 0; }

/* ---------- Fix 16. Shared footer: the logo column aligns left with the three link columns; on phones the
   sticky "Text us / See open times" bar no longer covers the last footer links. Read's ".atx-footer .brand" is
   the footer's logo and text blocks; read's "body.has-sticky" is any page that carries a sticky booking bar. ---------- */
@media (min-width: 768px) {
  #footer-sections .footer-logo { display: block; text-align: left; }
  #footer-sections .footer-logo img { margin-left: 0 !important; margin-right: auto !important; }
  #footer-sections .sqs-block-html .sqs-html-content p { text-align: left !important; }
}
@media (max-width: 899px) {
  body:has(#atxSticky, #corpSticky, .atx-v31-sticky, .atx-cbar) .atx-areas-footer { padding-bottom: 96px !important; }
}

/* ---------- Fix 17 (home). Services cards: individuals first, as a wide card; teams and conventions as a pair.
   Copy and order unchanged. Below 900px: one column, as before. ---------- */
@media (min-width: 900px) {
  .atx-p-home #page .atx-s3 .s3-grid { grid-template-columns: 1fr 1fr !important; grid-template-areas: "ind ind" "team conv"; }
  .atx-p-home #page .atx-s3 .s3-card:nth-child(1) { grid-area: ind; flex-direction: row !important; }
  .atx-p-home #page .atx-s3 .s3-card:nth-child(1) .s3-img { flex: 0 0 44%; width: 44% !important; }
  .atx-p-home #page .atx-s3 .s3-card:nth-child(1) .s3-body { justify-content: center; padding: 48px 56px !important; }
  .atx-p-home #page .atx-s3 .s3-card:nth-child(2) { grid-area: team; }
  .atx-p-home #page .atx-s3 .s3-card:nth-child(3) { grid-area: conv; }
}

/* ---------- Fix 18. Stat rows at 40px, not 56px. ("5+" on /aboutus waits for Ryan.) ---------- */
#page .atxB__nums b { font-size: clamp(30px, 4vw, 40px) !important; }
#page #atxCorpTrust .stat-number { font-size: clamp(30px, 3vw, 40px) !important; }

/* =====================================================================================================
   Conversion pass, 27 Oct 2026 (CONVERSION-PASS-2026-10-27.md; BOOKING-COLLAPSE-DIAGNOSIS 4a, rulings 82 and 83).
   Every element styled here was added by tools/port/conversion.mjs and carries data-atx-add.
   ===================================================================================================== */
/* R3: " + tax" after a price. In running text it reads as part of the sentence; after a price figure it is the
   small grey note the price cards already use (14px, 600). */
.atx-tax { white-space: nowrap; }
.atx-tax--fig { font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0 !important; opacity: .72; }
.atx-gb-v13__tier-fig .atx-tax--fig, .atxic-tier-fig .atx-tax--fig { font-size: 11px !important; }
/* B: the deposit line, directly above every calendar */
.atx-deposit { font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif !important; font-size: 15px !important; line-height: 1.45 !important; font-weight: 600 !important; color: #1C1916 !important; margin: 4px 0 12px !important; padding: 0 !important; text-align: left; }
#aBook .atx-deposit { text-align: center; }
/* A: the home rating line, under the H1 (the booking page's rating line: 15px, 600, white) */
.atx-p-home #page #atxHomeHero .atx-home-rating { font-size: 15px !important; font-weight: 600 !important; line-height: 1.4 !important; color: #fff !important; margin: 0 0 16px !important; letter-spacing: 0 !important; }
/* R1 / T6: on phones the booking module orders its panel with flex order (calendar 3, hold text 4); the
   instruction and phone lines moved under the calendar sit after the hold text there
   and read as the same fine print (13px, grey, centred), after the hold text on every width. */
.atx-gb-v13__cal-panel > .atx-gb-v13__sub, .atx-gb-v13__cal-panel > .atx-gb-v13__header-phone { order: 5; font-size: 13px !important; line-height: 1.5 !important; color: #686763 !important; text-align: center; max-width: none !important; margin: 10px 0 0 !important; }
.atx-gb-v13__cal-panel > .atx-gb-v13__sub strong { color: #1C1916; }
.atx-gb-v13__cal-panel > .atx-gb-v13__sub + .atx-gb-v13__header-phone { margin-top: 2px !important; }
/* T3: booking anchors jump instantly on phones (smooth scroll stays on larger screens) */
@media (max-width: 767px) { html { scroll-behavior: auto !important; } }
/* T7 for the plain calendar iframe (actor page): a wordless grey placeholder until the iframe has loaded */
iframe[data-atx-lazy]:not([data-atx-loaded]) { background: #EEEEEC; }
/* T5: the sticky bar on pages that had none (same look as the booking pages' bar), phones only */
.atx-cbar { display: none; }
@media (max-width: 767px) {
  .atx-cbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; gap: 10px; background: #1d1a16; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); transform: translateY(110%); transition: transform .25s; }
  .atx-cbar.on { transform: none; }
  .atx-cbar a { flex: 1; display: inline-flex; justify-content: center; align-items: center; font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 700; font-size: 15px; line-height: 1.2; padding: 12px; border-radius: 6px; text-decoration: none !important; }
  .atx-cbar .atx-cbar__book { background: #fff; color: #1d1a16 !important; border: 1.5px solid #fff; }
  .atx-cbar .atx-cbar__text { background: transparent; color: #fff !important; border: 1.5px solid #9e9b97; }
}