/* Brositivity recognition draft. Existing brand tokens and Manrope retained. */
html { scroll-padding-top: 94px; }
.site-header .brand-mark, .site-footer .brand-mark { display: none; }
.site-header .brand-word, .site-footer .brand-word { font-size: 1.24rem; letter-spacing: -.045em; }
.recognition-hero { padding-block: clamp(58px,7vw,104px) 80px; }
.recognition-hero-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,.85fr); align-items: center; gap: clamp(35px,7vw,104px); }
.recognition-hero-copy .display { font-size: clamp(3.8rem,7.9vw,7.4rem); line-height: .97; letter-spacing: -.065em; max-width: 680px; }
.recognition-hero-copy .lede { max-width: 580px; margin-block: 28px; font-size: clamp(1.08rem,1.5vw,1.28rem); }
.recognition-hero-copy .button-row { align-items: center; margin-top: 34px; gap: 20px; }
.button.recognition-primary { color: #111315; background: #D8FF59; border-color: #D8FF59; }
.button.recognition-primary:hover { color: #111315; background: #e5ff8c; border-color: #e5ff8c; }
.recognition-secondary { font-size: .91rem; font-weight: 750; text-underline-offset: 5px; }
.recognition-microcopy { margin: 18px 0 0; font-size: .83rem; color: var(--muted); }
.recognition-example { width: 100%; margin: 0; }
.recognition-example figcaption { margin-top: 16px; color: var(--muted); text-align: center; font-size: .77rem; line-height: 1.5; }
.bro-award-face { padding: clamp(25px,3vw,42px); color: #111315; background: #E8DFCA; border: 1px solid rgba(17,19,21,.2); border-radius: 2px; box-shadow: 0 16px 34px rgba(0,0,0,.08); }
.bro-award-kicker { margin: 0 0 28px; font-size: .63rem; font-weight: 850; text-transform: uppercase; letter-spacing: .13em; }
.bro-award-face h2, .bro-award-face h3 { margin: 0 0 20px; font-size: clamp(2.7rem,4.4vw,4.8rem); line-height: .96; letter-spacing: -.06em; font-weight: 850; overflow-wrap: anywhere; }
.award-dot { color: #D8FF59; text-shadow: 0 0 1px #718628; }
.bro-award-citation { max-width: 320px; margin: 0; font-size: .94rem; line-height: 1.6; color: #47473f; }
.bro-award-recipient { margin-top: 27px; padding-top: 22px; border-top: 1px solid rgba(17,19,21,.2); }
.bro-award-face span:not(.award-dot) { display: block; margin-bottom: 7px; font-size: .6rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.bro-award-recipient strong { display: block; font-size: 1.9rem; line-height: 1.15; letter-spacing: -.03em; overflow-wrap: anywhere; }
.bro-award-reason { margin-top: 23px; }
.bro-award-reason p { margin: 0; color: #292b27; font-size: 1rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.bro-award-bottom { display: flex; justify-content: space-between; align-items: end; gap: 18px; padding-top: 32px; }
.bro-award-bottom > div { min-width: 0; max-width: 58%; }
.bro-award-bottom > div strong { font-size: .86rem; overflow-wrap: anywhere; }
.bro-award-wordmark { font-size: 1.06rem; letter-spacing: -.04em; white-space: nowrap; }
.bro-award-wordmark .award-dot { display: inline; }
.bro-award-bottom small { display: block; margin-top: 6px; font-size: .71rem; color: #47473f; }
.recognition-behaviours { padding-block: 78px; color: var(--panel-text); background: var(--panel); }
.recognition-section-head { margin-bottom: 40px; }
.recognition-section-head .eyebrow { margin-bottom: 20px; }
.recognition-section-head h2, .recognition-show-up h2 { margin: 0; font-size: clamp(2.6rem,5vw,4.8rem); line-height: 1.03; letter-spacing: -.055em; }
.recognition-section-head > p:last-child:not(.eyebrow) { max-width: 600px; margin: 20px 0 0; color: var(--muted); font-size: 1.05rem; line-height: 1.6; }
.recognition-pillar-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 34px; }
.recognition-pillar-grid article { display: flex; flex-direction: column; align-items: start; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.24); }
.recognition-pillar-label { margin: 0 0 20px; color: var(--panel-muted); font-size: .75rem; font-weight: 700; }
.recognition-pillar-grid h3 { margin: 0; font-size: clamp(1.65rem,3vw,2.9rem); letter-spacing: -.05em; line-height: 1.15; }
.recognition-pillar-grid h3 span { color: #D8FF59; }
.recognition-pillar-grid article > p:last-of-type { max-width: 280px; margin: 20px 0 30px; color: var(--panel-muted); font-size: .98rem; line-height: 1.7; }
.recognition-pillar-grid a { margin-top: auto; color: var(--panel-text); font-size: .86rem; font-weight: 750; text-underline-offset: 5px; }
.recognition-chooser { padding-block: 92px; }
.recognition-award-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.recognition-award-choice { display: flex; flex-direction: column; min-width: 0; padding: 28px; border: 1px solid var(--line); border-radius: 2px; color: var(--ink); background: var(--surface); text-decoration: none; transition: background-color .2s; }
.recognition-award-choice:hover { background: var(--surface-soft); }
.recognition-free-label { font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.recognition-award-choice h3 { max-width: 240px; margin: 28px 0 18px; font-size: clamp(1.7rem,2.4vw,2.5rem); line-height: 1; letter-spacing: -.04em; }
.recognition-award-choice p { margin: 0 0 26px; color: var(--muted); line-height: 1.6; }
.recognition-choice-link { margin-top: auto; font-weight: 800; font-size: .82rem; }
.recognition-maker-section { padding-block: 85px; background: var(--surface-soft); }
.recognition-maker-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: clamp(30px,6vw,80px); align-items: start; }
.recognition-form { padding: 30px; border: 1px solid var(--line); background: var(--surface); border-radius: 12px; }
.recognition-form .field { margin-bottom: 22px; }
.recognition-form label { line-height: 1.5; }
.recognition-form select, .recognition-form input[type=date] { width: 100%; min-height: 52px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--surface); font: inherit; }
.recognition-form input, .recognition-form select, .recognition-form textarea { font-size: 16px; }
.recognition-form textarea { min-height: 130px; }
.recognition-field-hint { margin: -3px 0 10px; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.recognition-form-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.recognition-optional { font-size: .74rem; font-weight: 550; color: var(--muted); }
.recognition-preview-label { margin: 0 0 12px; color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.bro-award-preview h3 { font-size: clamp(2.3rem,4vw,4rem); }
.recognition-downloads { margin-top: 28px; }
.recognition-downloads[hidden] { display: none; }
.recognition-downloads h3 { margin: 0 0 18px; font-size: 1.1rem; }
.recognition-download-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.recognition-download-buttons .button { min-height: 46px; padding-inline: 15px; font-size: .81rem; }
.recognition-download-buttons .text-link { margin-block: 10px; }
.recognition-status { margin: 14px 0 0; color: var(--ink); font-size: .86rem; line-height: 1.6; }
.recognition-show-up { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 50px; align-items: center; padding-block: 88px; }
.recognition-show-up h2 { font-size: clamp(2rem,4vw,3.5rem); }
.recognition-show-up > div:last-child > p { margin: 0 0 26px; color: var(--muted); line-height: 1.7; }
.recognition-show-up .text-link { line-height: 1.7; }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
@media(max-width:980px) { .recognition-hero-grid { gap: 35px; } .recognition-hero-copy .display { font-size: clamp(3.4rem,7vw,5.5rem); } .recognition-pillar-grid { gap: 20px; } }
@media(max-width:760px) {
 .recognition-hero-grid, .recognition-maker-grid, .recognition-show-up { grid-template-columns: minmax(0,1fr); }
 .recognition-hero { padding-block: 55px 55px; }
 .recognition-hero-copy .display { max-width: 560px; font-size: clamp(3.3rem,12vw,5.7rem); }
 .recognition-example { max-width: 420px; margin: 14px auto 0; }
 .bro-award-face { padding: 30px; }
 .bro-award-face h2, .bro-award-face h3 { font-size: clamp(2.6rem,10vw,4.5rem); }
 .recognition-pillar-grid { grid-template-columns: minmax(0,1fr); gap: 30px; }
 .recognition-pillar-grid article > p:last-of-type { max-width: 500px; margin-block: 15px 20px; }
 .recognition-pillar-grid h3 { font-size: 2.4rem; }
 .recognition-behaviours, .recognition-chooser, .recognition-maker-section { padding-block: 58px; }
 .recognition-award-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .recognition-preview-column { max-width: 540px; width: 100%; margin: 0 auto; }
 .recognition-show-up { padding-block: 60px; gap: 28px; }
}
@media(max-width:440px) {
 .recognition-award-grid { grid-template-columns: minmax(0,1fr); }
 .recognition-form { padding: 21px; }
 .recognition-form-row { grid-template-columns: minmax(0,1fr); gap: 0; }
 .recognition-hero-copy .button-row { align-items: start; flex-direction: column; }
 .recognition-hero-copy .recognition-primary { width: 100%; }
 .bro-award-face { padding: 25px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } .recognition-award-choice { transition: none; } }

/* Edition two: curated occasions, exact certificate previews and the 100. */
.bro-hero-hundred { max-width: 490px; margin: 29px 0 0; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: .87rem; line-height: 1.6; }
.bro-hero-hundred a { display: block; margin-top: 7px; color: var(--ink); font-weight: 750; text-underline-offset: 4px; }
.bro-category-filters { display: flex; flex-wrap: wrap; gap: 9px; }
.bro-category-filters button { min-height: 44px; padding: 11px 15px; border: 1px solid var(--line); border-radius: 3px; background: var(--surface); color: var(--ink); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.bro-category-filters button[aria-pressed=true] { background: var(--panel); color: var(--panel-text); border-color: var(--panel); }
.bro-catalogue-count { min-height: 38px; margin: 20px 0 22px; font-size: .82rem; line-height: 1.6; color: var(--muted); }
.recognition-award-choice[hidden] { display: none; }
.recognition-award-choice h3 { font-size: clamp(1.55rem,2.15vw,2.2rem); }
.recognition-maker-grid { grid-template-columns: minmax(0,1fr) minmax(0,.94fr); gap: clamp(28px,5vw,65px); }
.bro-editions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin: 0 0 27px; padding: 0; border: 0; }
.bro-editions legend { margin-bottom: 13px; font-weight: 800; font-size: .92rem; }
.bro-edition-option { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 7px; cursor: pointer; }
.bro-edition-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.bro-edition-swatch { position: relative; display: block; width: 100%; min-height: 155px; padding: 18px 12px 32px; border: 2px solid transparent; border-radius: 2px; overflow: hidden; }
.bro-edition-swatch.signature { background: #F0E9DA; color: #111315; }
.bro-edition-swatch.contrast { background: #111315; color: #D8FF59; }
.bro-edition-swatch.formal { background: #FFF; color: #111315; box-shadow: inset 0 0 0 1px #B9BDB0; }
.bro-edition-swatch i { display: block; margin-bottom: 19px; font-size: .57rem; font-style: normal; font-weight: 800; letter-spacing: -.035em; }
.bro-edition-swatch b { display: block; font-size: clamp(.95rem,1.6vw,1.25rem); line-height: 1.05; letter-spacing: -.035em; }
.bro-edition-swatch.formal b { font-family: Georgia,serif; font-weight: 400; font-size: clamp(.9rem,1.5vw,1.12rem); }
.bro-edition-option input:checked + .bro-edition-swatch { border-color: var(--ink); }
.bro-edition-option input:checked + .bro-edition-swatch::after { content: 'Selected'; position: absolute; bottom: 9px; left: 12px; padding: 2px 6px; color: #111315; background: #D8FF59; font-size: .6rem; font-weight: 800; }
.bro-edition-option input:focus-visible + .bro-edition-swatch { outline: 3px solid var(--blue); outline-offset: 3px; }
.bro-edition-option > strong { font-size: .79rem; }
.bro-edition-option small { font-size: .69rem; color: var(--muted); line-height: 1.55; font-weight: 450; }
.bro-writing-note { margin: 9px 0 0; color: var(--muted); font-size: .76rem; }
.bro-preview-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-bottom: 13px; }
.bro-preview-heading p { margin: 0; }
.bro-preview-heading > span { color: var(--muted); font-size: .75rem; }
.bro-certificate-stage { width: 100%; min-height: 100px; overflow: hidden; border: 1px solid var(--line); border-radius: 2px; box-shadow: 0 18px 40px rgba(0,0,0,.09); background: #F0E9DA; }
.bro-certificate-image { display: block; width: 100%; height: auto; aspect-ratio: 4/5; }
.bro-preview-loading { padding: 45px 25px; color: #111315; font-size: .85rem; }
.bro-preview-note { margin: 14px 0 0; font-size: .75rem; line-height: 1.6; color: var(--muted); }
.bro-share-intro { font-size: .9rem; line-height: 1.6; color: var(--muted); margin: 0 0 20px; }
.bro-share-guide { margin: 18px 0 24px; color: var(--muted); font-size: .78rem; line-height: 1.7; }
.bro-print-row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding-block: 18px; border-top: 1px solid var(--line); }
.bro-print-row > span { margin-right: auto; color: var(--muted); font-size: .7rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.bro-print-row button { font-size: .82rem; }
.recognition-form button:disabled { opacity: .6; cursor: wait; }
.bro100-section { padding-block: 86px; background: #111315; color: #F5F1E7; }
.bro100-section .eyebrow { color: #B9BDAF; }
.bro100-intro { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); align-items: center; gap: 65px; }
.bro100-intro h2 { margin: 0; font-size: clamp(2.7rem,5.5vw,5.6rem); line-height: 1.02; letter-spacing: -.06em; }
.bro100-intro h2 span { color: #D8FF59; }
.bro100-intro-copy p { color: #C4C7BA; font-size: .98rem; line-height: 1.75; }
.bro100-intro-copy .bro100-lede { color: #F5F1E7; font-size: 1.3rem; line-height: 1.45; letter-spacing: -.025em; }
.bro100-intro-copy .button-row { margin-top: 28px; }
.bro100-self-link { color: #F5F1E7; font-size: .85rem; font-weight: 700; text-underline-offset: 5px; }
.bro100-reasons { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 27px; margin-block: 65px 80px; }
.bro100-reasons article { padding-top: 21px; border-top: 1px solid #44483E; }
.bro100-reasons h3 { margin: 0 0 14px; font-size: 1.15rem; letter-spacing: -.03em; }
.bro100-reasons p { margin: 0; color: #C4C7BA; font-size: .88rem; line-height: 1.7; }
.bro100-submission-grid { display: grid; grid-template-columns: minmax(0,.84fr) minmax(0,1.16fr); gap: clamp(35px,7vw,96px); }
.bro100-form-intro h3 { margin: 0 0 25px; font-size: clamp(2.2rem,4vw,3.7rem); line-height: 1.04; letter-spacing: -.05em; }
.bro100-form-intro > p:not(.eyebrow) { font-size: .95rem; line-height: 1.8; color: #C4C7BA; }
.bro100-form-intro ol { margin: 32px 0; padding-left: 21px; }
.bro100-form-intro li { padding-left: 9px; margin-bottom: 22px; }
.bro100-form-intro li::marker { color: #D8FF59; font-size: .8rem; font-weight: 750; }
.bro100-form-intro li strong { display: block; margin-bottom: 7px; font-size: .9rem; }
.bro100-form-intro li span { display: block; color: #C4C7BA; font-size: .84rem; line-height: 1.7; }
.bro100-form-intro .bro100-contact-note { font-size: .8rem; }
.bro100-contact-note a { color: #F5F1E7; text-underline-offset: 4px; }
.bro100-form { color: var(--ink); border-color: #555B49; }
.bro100-consent { display: flex; align-items: start; gap: 11px; margin: 0 0 20px; font-size: .78rem; line-height: 1.65; font-weight: 450; }
.bro100-consent input { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 3px; accent-color: #6B7E34; }
.bro100-honeypot { position: absolute; width: 1px; height: 1px; clip-path: inset(100%); overflow: hidden; white-space: nowrap; }
.bro100-form [hidden] { display: none; }
@media(max-width:980px) { .bro100-intro { gap: 35px; } .bro100-reasons { gap: 18px; } .bro100-submission-grid { gap: 35px; } }
@media(max-width:760px) {
 .recognition-maker-grid, .bro100-intro, .bro100-submission-grid { grid-template-columns: minmax(0,1fr); }
 .bro100-section { padding-block: 60px; }
 .bro100-intro h2 { font-size: clamp(2.7rem,8.5vw,4.4rem); }
 .bro100-reasons { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px; margin-block: 42px 52px; }
 .bro100-form-intro h3 br { display: none; }
 .bro100-submission-grid { gap: 30px; }
 .bro-edition-swatch b { font-size: 1.15rem; }
 .bro-edition-swatch.formal b { font-size: 1.05rem; }
 .bro-category-filters button { font-size: .76rem; padding-inline: 12px; }
}
@media(max-width:440px) {
 .bro-editions { gap: 8px; }
 .bro-edition-swatch { min-height: 136px; padding: 13px 8px 32px; }
 .bro-edition-swatch i { font-size: .52rem; margin-bottom: 16px; }
 .bro-edition-swatch b { font-size: 1rem; }
 .bro-edition-swatch.formal b { font-size: .9rem; }
 .bro-edition-option input:checked + .bro-edition-swatch::after { left: 8px; padding-inline: 3px; }
 .bro100-reasons { gap: 23px; }
 .bro100-intro-copy .button-row { align-items: start; flex-direction: column; }
 .bro100-intro-copy .recognition-primary { width: 100%; }
}


/* Personal photo studio: six real previews, shared by every award. */
.bro-studio-editions { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px 12px; }
.bro-studio-option { gap: 6px; }
.bro-studio-thumbnail { position: relative; display: block; width: 100%; aspect-ratio: 4/5; border: 2px solid transparent; outline: 1px solid var(--line); background: #eee6d6; overflow: hidden; }
.bro-studio-thumbnail.contrast, .bro-studio-thumbnail.fullstop { background: #171918; }
.bro-studio-thumbnail.keepsake { background: #314749; }
.bro-studio-thumbnail img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bro-studio-thumbnail img:not([src]) { visibility: hidden; }
.bro-studio-option input:checked + .bro-studio-thumbnail { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: 2px; }
.bro-studio-option input:checked + .bro-studio-thumbnail::after { content: 'Selected'; position: absolute; left: 5px; bottom: 5px; padding: 3px 6px; background: #D8FF59; color: #111315; font-size: .62rem; font-weight: 850; }
.bro-studio-option input:focus-visible + .bro-studio-thumbnail { outline: 3px solid var(--blue); outline-offset: 3px; }
.bro-studio-option > strong { font-size: .86rem; }
.bro-studio-option > small { font-size: .7rem; line-height: 1.4; }
.bro-photo-section { padding: 22px 0; margin-bottom: 24px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bro-photo-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.bro-photo-heading h3 { margin: 0; font-size: 1.15rem; letter-spacing: -.02em; }
.bro-photo-heading > span { color: var(--muted); font-size: .78rem; }
.bro-photo-section > p { color: var(--muted); font-size: .87rem; line-height: 1.6; }
.bro-photo-picker { display: block; padding: 16px; border: 1px dashed var(--muted); border-radius: 9px; background: var(--surface-soft); cursor: pointer; }
.bro-photo-picker > span { display: block; margin-bottom: 10px; font-weight: 800; }
.bro-photo-picker input { display: block; width: 100%; max-width: 100%; color: var(--ink); font-size: .76rem; }
.bro-photo-picker input::file-selector-button { margin-right: 12px; padding: 10px 13px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
.bro-photo-section .bro-photo-status { margin: 12px 0 0; color: var(--ink); font-size: .81rem; }
.bro-photo-controls { border: 0; padding: 0; margin: 22px 0 0; min-width: 0; }
.bro-photo-controls[hidden] { display: none; }
.bro-photo-controls legend { padding: 0; margin-bottom: 17px; font-size: .93rem; font-weight: 800; }
.bro-photo-sliders { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 22px; }
.bro-photo-range { min-width: 0; }
.bro-photo-range label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: .8rem; font-weight: 750; }
.bro-photo-range output { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .75rem; font-weight: 500; }
.bro-photo-range input[type=range] { display: block; width: 100%; min-height: 32px; margin: 0; padding: 0; border: 0; background: none; accent-color: #7E9750; box-shadow: none; }
.bro-photo-range small { display: block; margin-top: 6px; color: var(--muted); font-size: .7rem; line-height: 1.45; }
.bro-photo-range[hidden] { display: none; }
.bro-photo-actions { display: flex; justify-content: space-between; gap: 18px; margin-top: 22px; }
.bro-photo-actions button { color: var(--ink); font-size: .8rem; }
@media(min-width:761px) {
 .recognition-preview-column { position: sticky; top: 98px; }
}
@media(max-width:440px) {
 .bro-studio-editions { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 12px; }
 .bro-photo-sliders { grid-template-columns: minmax(0,1fr); gap: 16px; }
 .bro-photo-heading { flex-wrap: wrap; gap: 4px; }
}

/* The chosen writing style applies to the certificate, while the interface stays Manrope. */
.bro-writing-style { margin-top: 6px; }
.bro-font-sample { padding: 20px 17px; margin-top: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); color: var(--ink); min-height: 92px; display: flex; align-items: center; }
.bro-font-sample span { font-size: clamp(1.55rem,3.5vw,2rem); line-height: 1.45; font-synthesis: none; overflow-wrap: anywhere; }
.bro-font-description { color: var(--ink); font-size: .85rem; line-height: 1.5; margin: 10px 0 5px; }
.bro-font-status { color: var(--ink); font-size: .8rem; line-height: 1.5; min-height: 1.5em; margin: 5px 0 0; }
.bro-font-status:empty { visibility: hidden; }

/* Message placement uses the same coordinates in the preview and every export. */
.bro-message-controls { min-width: 0; border: 0; border-top: 1px solid var(--line); padding: 18px 0 0; margin: 24px 0 0; }
.bro-message-controls legend { padding: 0 12px 0 0; font-size: .94rem; font-weight: 800; }
.bro-message-help { margin: 0 0 18px; font-size: .76rem; line-height: 1.6; color: var(--muted); }
.bro-message-controls .field { margin: 0; }
.bro-message-controls .field label { font-size: .8rem; }
.bro-message-controls .field select { min-height: 44px; padding-block: 10px; }
.bro-message-controls output { min-width: 3.5em; text-align: right; }
.bro-message-controls input:disabled { opacity: .45; cursor: not-allowed; }
.bro-message-controls > button { margin-top: 17px; color: var(--ink); font-size: .8rem; }
.bro-message-colours { display: grid; grid-template-columns: minmax(0,1fr) 108px; gap: 16px; align-items: end; margin-top: 20px; }
.bro-message-colours input[type=color] { display: block; width: 100%; height: 44px; min-height: 44px; padding: 5px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); cursor: pointer; }
.bro-message-controls .bro-message-colour-help { margin: 12px 0 0; }