/*
 * Business landing pages (/{market}/advertise and /{market}/advertise/{segment}).
 * Brand: purple #180054, pink #FB698E. Never white text on pink (2.79:1):
 * buttons are purple on pink (6.4:1); light text sits on purple only.
 * Linked with ?v=<file time>, so a change here is never served from cache.
 */
.adv { background: #fff; color: #1c1530; }
.adv main { font-family: 'Open Sans', Arial, sans-serif; font-size: 17px; line-height: 1.6; }
.adv main h1, .adv main h2, .adv main h3 { font-family: 'Raleway', Arial, sans-serif; font-weight: 700; color: #180054; text-wrap: balance; }
.adv main h2 { font-size: 30px; margin: 0 0 24px; }
.adv main h3 { font-size: 19px; margin: 0 0 6px; }
.adv main a { color: #180054; text-decoration: underline; }
.adv main a:focus-visible, .adv summary:focus-visible, .adv-skip:focus-visible, .adv main input:focus-visible, .adv main select:focus-visible {
    outline: 3px solid #FB698E; outline-offset: 3px; box-shadow: 0 0 0 6px #180054;
}
.adv-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.adv-skip { position: absolute; left: -9999px; top: 0; z-index: 1000; background: #180054; color: #fff; padding: 12px 16px; }
.adv-skip:focus { left: 16px; top: 16px; color: #fff; }

/* Hero. Top padding clears the fixed site header (about 96px), as .uko_hero does. */
.adv-hero { background: #180054; color: #fff; padding: 136px 0 64px; }
.adv-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; }
.adv-hero-copy { min-width: 0; }
.adv main .adv-hero h1 { color: #fff; font-size: 44px; line-height: 1.15; margin: 0 0 18px; }
.adv-lead { font-size: 20px; max-width: 640px; margin-bottom: 28px; }
.adv main .adv-hero a:not(.adv-cta) { color: #fff; }
.adv-hero-figure { margin: 0; justify-self: end; width: min(100%, 420px); padding: 10px; border: 3px solid #FB698E; border-radius: 30px; }
.adv-hero-figure img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 11; object-fit: cover; border-radius: 20px; }
.adv-hero-index .adv-lead { max-width: 760px; }
.adv-under-cta { font-size: 15px; margin-top: 12px; }

.adv main .adv-cta {
    display: inline-block; background: #FB698E; color: #180054; font-weight: 700; font-size: 18px;
    text-decoration: none; border-radius: 999px; padding: 14px 32px; border: 2px solid #FB698E;
}
.adv main .adv-cta:hover { background: #fff; color: #180054; border-color: #fff; }

.adv-promo { background: #FB698E; color: #180054; padding: 16px 0; }
.adv-promo p { margin: 0; font-size: 18px; }
.adv-code { letter-spacing: .06em; border: 2px dashed #180054; padding: 0 8px; border-radius: 4px; }

.adv-section { padding: 56px 0; }
.adv-alt { background: #f4f1fa; }

.adv-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.adv-card { border: 1px solid #d9d2ea; border-left: 6px solid #180054; border-radius: 8px; padding: 20px; background: #fff; }
.adv-card p { margin: 0; }
.adv-note { margin-top: 24px; font-weight: 600; }

.adv-steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.adv-steps li { counter-increment: step; background: #fff; border-radius: 8px; padding: 20px 20px 20px 72px; position: relative; }
.adv-steps li::before {
    content: counter(step); position: absolute; left: 20px; top: 20px; width: 38px; height: 38px; border-radius: 50%;
    background: #180054; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.adv-steps p { margin: 0; }

/* What it costs: price chips, the calculator, footnotes. */
.adv-costs { background: #f4f1fa; }
.adv-costs-head { max-width: 70ch; margin-bottom: 22px; }
.adv-costs-head p { margin: 0; color: #5b5470; }
.adv-rates { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.adv-rates li { background: #fff; border: 1px solid #d9d2ea; border-radius: 999px; padding: 6px 16px; font-size: 15px; }
.adv-rates b { font-family: 'Raleway', Arial, sans-serif; font-size: 18px; color: #180054; margin-right: 4px; font-variant-numeric: tabular-nums; }

.adv-calc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(24, 0, 84, .10); }
.adv-calc-in { padding: 28px 30px; display: grid; gap: 22px; align-content: start; min-width: 0; }
.adv-kind { border: 0; padding: 0; margin: 0; min-width: 0; }
.adv-kind legend { font-weight: 700; color: #180054; margin-bottom: 10px; font-size: 17px; border: 0; width: auto; }
.adv-seg { display: inline-flex; flex-wrap: wrap; border: 2px solid #180054; border-radius: 999px; padding: 3px; gap: 3px; }
.adv-seg input { position: absolute; opacity: 0; pointer-events: none; }
.adv-seg label { cursor: pointer; padding: 8px 18px; border-radius: 999px; font-weight: 600; color: #180054; margin: 0; }
.adv-seg input:checked + label { background: #180054; color: #fff; }
.adv-seg input:focus-visible + label { outline: 3px solid #FB698E; outline-offset: 2px; }
.adv-calc-example { background: #f4f1fa; border-radius: 10px; padding: 12px 16px; font-size: 15px; margin: 0; }
.adv-calc-example strong { color: #180054; }
.adv-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.adv-fields[hidden] { display: none; }
.adv-field { display: grid; gap: 6px; min-width: 0; }
.adv-field label { font-weight: 700; color: #180054; font-size: 15px; margin: 0; }
.adv-hint { font-size: 14px; color: #5b5470; }
.adv-field input, .adv-field select { font: 600 18px 'Open Sans', Arial, sans-serif; color: #1c1530; padding: 10px 12px; border: 2px solid #d9d2ea; border-radius: 10px; width: 100%; background: #fff; font-variant-numeric: tabular-nums; }
.adv-field input:focus, .adv-field select:focus { border-color: #180054; }
.adv-dur { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }

.adv-calc-out { background: #180054; color: #fff; padding: 28px 30px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.adv-out-label { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.adv-total { margin: 0; font: 800 46px/1.05 'Raleway', Arial, sans-serif; font-variant-numeric: tabular-nums; }
.adv-total small { font: 600 16px 'Open Sans', Arial, sans-serif; opacity: .85; }
.adv-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.adv-lines li { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(255, 255, 255, .25); padding-top: 8px; font-size: 15px; font-variant-numeric: tabular-nums; }
.adv-lines li span:first-child { min-width: 0; }
.adv-lines li span:last-child { font-weight: 700; white-space: nowrap; }
.adv-out-note { font-size: 14px; margin: 0; opacity: .9; }
.adv main .adv-calc-out .adv-cta { justify-self: start; }
.adv-footnotes { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 14px; color: #5b5470; max-width: 80ch; }

.adv-ticks { list-style: none; padding: 0; margin: 0; columns: 2 280px; }
.adv-ticks li { padding-left: 34px; position: relative; margin-bottom: 12px; break-inside: avoid; }
.adv-ticks li::before { content: ""; position: absolute; left: 4px; top: 5px; width: 18px; height: 10px; border-left: 3px solid #180054; border-bottom: 3px solid #180054; transform: rotate(-45deg); }

.adv-faq { max-width: 860px; }
.adv-faq details { border-bottom: 1px solid #d9d2ea; padding: 14px 0; }
.adv-faq summary { cursor: pointer; font-weight: 700; color: #180054; font-size: 18px; }
.adv-faq details p { margin: 10px 0 0; }

.adv-final { background: #180054; color: #fff; padding: 56px 0; text-align: center; }
.adv main .adv-final h2 { color: #fff; }
.adv main .adv-final a:not(.adv-cta) { color: #fff; }

.adv-others ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.adv main .adv-others h2 { font-size: 22px; }

/* Index page: one card per type of business. */
.adv-type-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.adv main .adv-type a { display: grid; gap: 8px; text-decoration: none; color: #180054; background: #fff; border: 1px solid #d9d2ea; border-radius: 16px; padding: 10px 10px 16px; height: 100%; }
.adv main .adv-type a:hover { border-color: #180054; }
.adv-type img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.adv-type-name { font: 700 19px 'Raleway', Arial, sans-serif; padding: 0 6px; }
.adv-type-line { font-size: 15px; color: #5b5470; padding: 0 6px; }

@media (max-width: 860px) {
    .adv-hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .adv-hero-figure { justify-self: start; width: min(100%, 360px); }
    .adv-calc { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .adv-hero { padding: 120px 0 40px; }
    .adv main .adv-hero h1 { font-size: 32px; }
    .adv-lead { font-size: 18px; }
    .adv main h2 { font-size: 25px; }
    .adv-section, .adv-final { padding: 40px 0; }
    .adv-calc-in, .adv-calc-out { padding: 22px 18px; }
    .adv-total { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) { .adv * { transition: none !important; } }