/* AutoAssures.com, second-design ("Learn center") pages, redesign 2026-10 (inner-page pass; ART-DIRECTION.md section 5).
   The second design never shipped a stylesheet; this file styles its ~200 classes in the same system as the first design
   (v1-pages.css): mist dot-grid heads, spec cards, the two-part button, DM Mono figures and labels, panels straddling
   a section edge. Hooks kept as the code map lists them: .rv is never hidden; .fq-item open state comes from
   aria-expanded; .af-loading/.af-done are hidden until .aa-form/.aa-cform gets .loading/.done; the inert slider
   buttons, dots, pager and reading bar are hidden; .toc-bar stays a static rule. Scoped to body.aa-v2 (V2Page). */

.aa-v2 main{overflow-x:clip}
.aa-v2 .rv{opacity:1!important;transform:none!important}
.aa-v2 .hl{background:none;color:inherit;font:inherit;padding:0}
.aa-v2 .sec{padding-block:var(--ip-gap)}
.aa-v2 .sec.tight{padding-block:clamp(44px,5vw,72px)}
.aa-v2 .sec.sky{background:var(--aa-mist) var(--aa-dots)}
.aa-v2 .sec.sky:has(> .container > .article-wrap),.aa-v2 .sec.sky:has(.aa-faq){background:#fff}
.aa-v2 :is(.col-lg-5,.col-lg-4,.sticky-aside,.ask-card>div)>h2.mt-3{margin-top:0!important}
.aa-v2 .lede{font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.6;color:var(--aa-ink);max-width:56ch}
.aa-v2 .small.mute,.aa-v2 .mute{color:var(--aa-muted)}
.aa-v2 [id]{scroll-margin-top:var(--ip-stick)}

/* section heads */
.aa-sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 40px;flex-wrap:wrap;margin-bottom:36px}
.aa-sec-head h2{margin:0;max-width:20ch}
.aa-sec-head .sub{margin:12px 0 0;color:var(--aa-ink);max-width:60ch}
.aa-sec-head .btn.aa-btn{flex:none}
/* the decorative labels that remain in shared components (form head, featured article) are DM Mono labels */
.aa-v2 .aa-eyebrow{display:inline-flex;align-items:center;gap:8px;font:500 12.5px/1.3 var(--aa-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--aa-petrol)}
.aa-v2 .aa-eyebrow svg.ic{width:16px;height:16px}

/* crumbs */
.aa-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;margin:0 0 22px;font:500 13px/1.45 var(--aa-mono);color:var(--aa-muted)}
.aa-crumbs a{color:var(--aa-petrol);text-decoration:none}
.aa-crumbs a:hover{color:var(--aa-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.aa-crumbs i{font-style:normal;color:#7C9196}
.aa-crumbs span[aria-current]{color:var(--aa-muted)}

/* =====================================================================================================================
   BANNER (.aa-banner): the mist dot-grid head; its photo in a white spec frame straddles the foot
   (the full-bleed background photo, its shade and line pattern are not part of this design)
   ===================================================================================================================== */
.aa-banner{position:relative;background:var(--aa-mist) var(--aa-dots)}
.aa-banner .bn-card{position:relative}
.aa-banner .bn-card>.bn-bg,.aa-banner .bn-shade,.aa-banner .bn-lines{display:none}
.aa-banner .bn-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;padding-block:clamp(40px,4.6vw,64px) clamp(48px,5vw,72px)}
/* content banners read photo first (photo left, words right): never MyHomeZilla's text-left / photo-right split */
.aa-banner .bn-txt{grid-column:8/13;grid-row:1;align-self:start}
.aa-banner:not(.has-photo) .bn-txt{grid-column:1/-1;max-width:62rem}
.aa-banner h1{font-size:clamp(2.125rem,1.45rem + 2.1vw,3rem);line-height:1.04;letter-spacing:-.018em;margin:0 0 .42em;max-width:19ch}
.aa-banner .lede{margin:0}
.bn-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 30px;margin-top:30px}
/* one action in the opening: the second one is a text link */
.bn-actions .btn.aa-btn:is(.ghost-light,.ghost),.bn-actions .btn.aa-btn:is(.ghost-light,.ghost):hover{min-height:0;gap:8px;align-items:center;color:var(--aa-petrol)}
.bn-actions .btn.aa-btn:is(.ghost-light,.ghost)>span{padding:0;background:none;color:var(--aa-petrol);font:600 17px var(--aa-sans);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.bn-actions .btn.aa-btn:is(.ghost-light,.ghost)>i{width:auto;background:none;color:var(--aa-petrol)}
.bn-actions .btn.aa-btn:is(.ghost-light,.ghost)>i svg{width:20px;height:20px;transition:transform .2s}
.bn-actions .btn.aa-btn:is(.ghost-light,.ghost):hover>span{color:var(--aa-deep)}
.bn-actions .btn.aa-btn:is(.ghost-light,.ghost):hover>i{background:none;color:var(--aa-deep)}
.bn-actions .btn.aa-btn:is(.ghost-light,.ghost):hover>i svg{transform:translateX(3px)}
.bn-photo{position:relative;z-index:2;grid-column:1/7;grid-row:1;align-self:stretch;display:flex;flex-direction:column;margin:0 0 calc(-1 * (var(--ph-over) + clamp(48px,5vw,72px)));padding:46px 10px 10px;background:#fff;border:1px solid var(--aa-line-soft);border-radius:10px;box-shadow:var(--aa-drop)}
.bn-photo .arch{position:relative;flex:1 1 auto;min-height:280px;border-radius:6px;overflow:hidden;background:var(--aa-mist)}
.bn-photo .arch img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
/* the banner's own road or car photo is the main photo of the spec card; the second photo is a smaller print clipped
   over the card's lower outer corner, like a note clipped into the manual */
.bn-photo>.bn-bg{display:block;flex:1 1 0;width:100%;min-height:280px;height:auto;object-fit:cover;border-radius:6px;background:var(--aa-mist)}
.bn-photo>.bn-bg + .arch{position:absolute;z-index:3;left:-26px;bottom:-34px;flex:none;width:clamp(150px,38%,236px);min-height:0;aspect-ratio:3/2;padding:7px;background:#fff;border-radius:8px;box-shadow:0 1px 0 rgba(15,76,92,.14),var(--aa-drop);overflow:visible}
.bn-photo>.bn-bg + .arch img{position:static;width:100%;height:100%;border-radius:4px;object-fit:cover}
.bn-tag{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:space-between;gap:12px;height:36px;padding:0 14px;background:var(--aa-mist);border-radius:9px 9px 0 0;font:500 12.5px/1 var(--aa-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--aa-petrol)}
.bn-tag b{font-weight:500}
.bn-tag i{font-style:normal;color:var(--aa-muted);letter-spacing:.04em;font-variant-numeric:tabular-nums}
/* the second design's note "Free to use / Not an insurer" (protected text, restored 2026-10-14): a two-line caption at the
   foot of the white photo frame, on the side away from the clipped print (right on desktop, left on phones) */
.bn-badge{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:12px 6px 2px;color:var(--aa-petrol)}
.bn-badge svg.ic{width:22px;height:22px;flex:none}
.bn-badge>span{display:grid;gap:3px}
.bn-badge b{font:600 14px/1.2 var(--aa-sans);color:var(--aa-ink)}
.bn-badge small{font:500 12px/1.2 var(--aa-mono);letter-spacing:.02em;color:var(--aa-muted)}
/* the legal pages' own label between the crumbs and the h1 ("Legal", "Do Not Sell or Share My Personal Information"),
   restored word for word in its original capitalisation */
.aa-banner .bn-txt .bn-kick{display:flex;align-items:flex-start;gap:8px;width:max-content;max-width:100%;margin:-6px 0 16px;font:500 13px/1.4 var(--aa-mono);letter-spacing:.02em;text-transform:none;color:var(--aa-petrol)}
.aa-banner .bn-txt .bn-kick svg.ic{width:17px;height:17px;flex:none;margin-top:1px}
.aa-banner .bn-txt .bn-kick>span{text-wrap:balance}
/* what follows a photo banner leaves room for the overhang */
.aa-banner.has-photo + .sec{padding-top:calc(var(--ph-over) + clamp(40px,4.5vw,64px))}
/* a section that opens with its own heading continues the banner's right-hand column beside the photo */
@media (min-width:992px){
  .aa-banner.has-photo + .sec:has(> .container > .aa-sec-head:first-child){padding-top:clamp(40px,4vw,56px)}
  .aa-banner.has-photo + .sec > .container > .aa-sec-head:first-child{margin-left:calc((100% * 7 + 168px) / 12);min-height:calc(var(--ph-over) - clamp(40px,4vw,56px) + 40px);align-items:flex-start}
}
/* list (blog) and form (get started) banners keep their photo inside the band: the feature / the form straddles */
.aa-banner.has-photo:is(:has(+ .sec [data-post-grid]),.slim) .bn-grid{align-items:center;padding-bottom:clamp(120px,11vw,152px)}
.aa-banner.has-photo:is(:has(+ .sec [data-post-grid]),.slim) .bn-txt{grid-column:1/9}
.aa-banner.has-photo:is(:has(+ .sec [data-post-grid]),.slim) .bn-photo{grid-column:9/13;align-self:center;margin:0;box-shadow:none}
.aa-banner.has-photo:is(:has(+ .sec [data-post-grid]),.slim) .bn-photo>.bn-bg{flex:none;min-height:0;aspect-ratio:16/10}
.aa-banner.has-photo:is(:has(+ .sec [data-post-grid]),.slim) .bn-photo>.bn-bg + .arch{bottom:-22px;width:34%}
.aa-banner.has-photo:is(:has(+ .sec [data-post-grid]),.slim) + .sec{padding-top:0}
/* slim banner without a photo (legal pages): the document sheet straddles it */
.aa-banner:not(.has-photo) .bn-grid{padding-bottom:clamp(104px,9vw,136px)}
.aa-banner:not(.has-photo) h1{max-width:22ch}

@media (max-width:991.98px){
  .aa-banner .bn-txt,.aa-banner.has-photo:is(:has(+ .sec [data-post-grid]),.slim) .bn-txt{grid-column:1/-1;grid-row:1}
  .aa-banner .bn-grid{align-items:start}
  .aa-banner .bn-photo{grid-column:2/12;grid-row:2;margin-top:32px;align-self:start}
  .aa-banner .bn-photo>.bn-bg{flex:none;min-height:0;aspect-ratio:3/2}
  .aa-banner.has-photo:is(:has(+ .sec [data-post-grid]),.slim) .bn-photo{grid-column:1/8;grid-row:2;margin-top:28px}
}
@media (max-width:767.98px){
  .aa-banner .bn-grid{column-gap:0;padding-top:28px}
  .aa-crumbs{margin-bottom:16px;font-size:12.5px}
  .aa-banner .bn-photo{grid-column:1/-1;margin-top:26px;padding:42px 8px 8px}
  .aa-banner.has-photo:is(:has(+ .sec [data-post-grid]),.slim) .bn-photo{grid-column:1/-1}
  .aa-banner.has-photo:is(:has(+ .sec [data-post-grid]),.slim) .bn-grid{padding-bottom:96px}
  .bn-tag{padding:0 12px;font-size:11.5px}
  .bn-photo>.bn-bg + .arch,.aa-banner.has-photo:is(:has(+ .sec [data-post-grid]),.slim) .bn-photo>.bn-bg + .arch{left:auto;right:12px;bottom:-24px;width:42%;padding:5px}
  .bn-actions{gap:14px 24px}
  .bn-actions .btn.aa-btn.coral{width:100%}
  .bn-badge{justify-content:flex-start;margin:12px 4px 2px}
  .aa-banner .bn-txt .bn-kick{margin:-4px 0 14px;font-size:12.5px}
  .aa-banner:not(.has-photo) .bn-grid{padding-bottom:88px}
}

/* =====================================================================================================================
   GUIDES (10 pages, one template): fact cards, real-life moments, article + contents, questions, FAQ, form, related
   ===================================================================================================================== */
/* the four facts: spec cards in a 2 x 2 block that interlocks with the banner photo's overhang */
.snap{padding:40px 0 0}
.snap-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:calc(50% - 12px);margin-left:auto;counter-reset:snap}
.snap-c{position:relative;display:flex;flex-direction:column;padding:50px 20px 20px;background:#fff;border:1px solid var(--aa-line-soft);border-radius:10px;counter-increment:snap}
.snap-c small{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;height:36px;padding:0 44px 0 14px;background:var(--aa-mist);border-radius:9px 9px 0 0;font:500 12.5px/1 var(--aa-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--aa-petrol)}
.snap-c svg.ic{position:absolute;right:12px;top:8px;z-index:1;width:20px;height:20px;color:var(--aa-petrol)}
.snap-c b{font:700 18px/1.4 var(--aa-sans);color:var(--aa-ink)}
.snap + .sec{padding-top:clamp(64px,6vw,88px)}
@media (max-width:991.98px){
  .snap{padding-top:calc(var(--ph-over) + 32px)}
  .snap-row{width:auto;margin-left:0}
}
@media (max-width:575.98px){
  .snap-row{grid-template-columns:1fr;gap:12px}
  .snap-c{padding:48px 16px 16px}
  .snap-c b{font-size:17px}
}

/* real-life moments: DM Mono numbered rows beside the photo */
.moments{display:block;border-top:2px solid var(--aa-petrol)}
.moment{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:8px;padding:24px 0 26px;border-bottom:1px solid var(--aa-line-soft)}
.moment .num{font:500 30px/1 var(--aa-mono);letter-spacing:-.03em;color:var(--aa-petrol);padding-top:2px;font-variant-numeric:tabular-nums}
.moment h3{margin:0 0 6px;font-size:21px}
.moment p{margin:0;color:var(--aa-ink);max-width:62ch}
.aa-v2 .sec:has(.moments){padding-bottom:clamp(40px,4vw,56px)}
.aa-v2 .sec:has(.moments) + .sec{padding-top:clamp(48px,4.5vw,64px)}
.cov-photo{border-radius:10px;overflow:hidden;background:var(--aa-mist)}
.cov-photo img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.aa-v2 .row.g-5.align-items-center:has(.moments){align-items:start!important}
@media (max-width:575.98px){
  .moment{grid-template-columns:52px minmax(0,1fr);padding:20px 0 22px}
  .moment .num{font-size:24px}
}

/* =====================================================================================================================
   READING: the guides' article and the Learn article share one reading column + a sticky contents card
   ===================================================================================================================== */
.aa-v2 .article-wrap{display:grid;grid-template-columns:minmax(0,41rem) 320px;column-gap:clamp(48px,6vw,104px);justify-content:space-between;align-items:start;max-width:none;margin:0}
.aa-v2 .article-wrap>*{min-width:0}
.aa-article{max-width:66ch;font-size:18px;line-height:1.7;color:var(--aa-ink)}
.aa-article p{margin:0 0 1.15em}
.aa-article h2{position:relative;margin:2.3em 0 .65em;padding-top:22px;border-top:1px solid var(--aa-line-soft);font-size:clamp(1.625rem,1.4rem + .7vw,1.9375rem);line-height:1.14}
.aa-article h2::before{content:"";position:absolute;left:0;top:-2px;width:48px;height:3px;background:var(--aa-petrol)}
.aa-article>h2:first-child{margin-top:0}
.aa-article h3{margin:1.7em 0 .45em;font-size:21px;line-height:1.25}
.aa-article h2 + h3{margin-top:.6em}
.aa-article a{font-weight:600}
.aa-article strong{font-weight:700}
.aa-article ul,.aa-article ol{margin:0 0 1.25em;padding-left:0}
.aa-article ul{list-style:none}
.aa-article ul>li{position:relative;padding-left:26px}
.aa-article ul>li::before{content:"";position:absolute;left:3px;top:.7em;width:7px;height:7px;border-radius:1.5px;background:var(--aa-petrol)}
.aa-article ol{list-style:none;counter-reset:aol}
.aa-article ol>li{position:relative;padding-left:40px;counter-increment:aol}
.aa-article ol>li::before{content:counter(aol,decimal-leading-zero);position:absolute;left:0;top:.22em;font:500 14px/1.5 var(--aa-mono);color:var(--aa-petrol)}
.aa-article li{margin-bottom:.5em}
.aa-article img{max-width:100%;height:auto;border-radius:10px}
.aa-article table{width:100%;margin:28px 0;border-collapse:separate;border-spacing:0;border:1px solid var(--aa-line-soft);border-radius:10px;overflow:hidden;font-size:16px;font-variant-numeric:tabular-nums}
.aa-article th{padding:12px 16px;background:var(--aa-mist);font:500 12px/1.35 var(--aa-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--aa-petrol);text-align:left}
.aa-article td{padding:13px 16px;border-top:1px solid #E3EEED;vertical-align:top}
.aa-article tbody tr:nth-child(even) td{background:#F3F8F7}
.aa-article blockquote{margin:28px 0;padding:4px 0 4px 22px;border-left:3px solid var(--aa-petrol);font-size:20px;line-height:1.55}
/* callout: a spec card with the icon in its strip */
.aa-callout{position:relative;margin:30px 0 32px;padding:52px 24px 6px;background:#fff;border:1px solid var(--aa-line-soft);border-radius:10px}
.aa-callout::before{content:"Note";content:"Note" / "";position:absolute;left:0;right:0;top:0;display:flex;align-items:center;height:36px;padding:0 16px;background:var(--aa-mist);border-radius:9px 9px 0 0;font:500 12.5px/1 var(--aa-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--aa-petrol)}
.aa-callout>svg.ic{position:absolute;right:14px;top:8px;z-index:1;width:20px;height:20px;color:var(--aa-petrol)}
.aa-callout p{margin:0 0 1em;font-size:18px}
/* figures: foreground photo radius 10, the caption in DM Mono */
.art-fig{margin:36px 0 38px}
.art-fig .fig-img{border-radius:10px;overflow:hidden;background:var(--aa-mist)}
.art-fig .fig-img img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:0}
.art-fig figcaption{display:flex;gap:10px;align-items:baseline;margin-top:12px;font:500 12.5px/1.5 var(--aa-mono);color:var(--aa-muted)}
.art-fig figcaption::before{content:"";flex:none;width:24px;height:2px;background:var(--aa-petrol);transform:translateY(-4px)}
/* key takeaways: a spec card, the heading is its strip */
.takeaways{margin:0 0 40px;background:#fff;border:1px solid var(--aa-line-soft);border-radius:10px;overflow:hidden}
.aa-article .takeaways h2{display:flex;align-items:center;gap:10px;min-height:42px;margin:0;padding:0 18px;border:0;background:var(--aa-petrol);color:var(--aa-mist);font:500 13px/1.2 var(--aa-mono);letter-spacing:.08em;text-transform:uppercase}
.aa-article .takeaways h2::before{display:none}
.takeaways h2 svg.ic{width:18px;height:18px}
.aa-article .takeaways ul{display:grid;gap:12px;margin:0;padding:20px 22px 22px}
.aa-article .takeaways li{margin:0;padding-left:34px;font-weight:600;line-height:1.5}
.aa-article .takeaways li::before{left:0;top:3px;width:20px;height:20px;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F4C5C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center/20px no-repeat}
/* the disclaimer note, the byline, the two actions, older / newer */
.art-note{position:relative;margin:44px 0 0;padding:16px 20px;background:var(--aa-mist);border-left:3px solid var(--aa-petrol);border-radius:0 6px 6px 0;font-size:15px;line-height:1.6}
.art-author{display:flex;align-items:center;gap:16px;margin:28px 0 0;padding:20px 0;border-top:1px solid var(--aa-line-soft);border-bottom:1px solid var(--aa-line-soft)}
.art-author img{width:48px;height:48px;flex:none;border-radius:0}
.art-author strong{display:block;font-size:17px}
.art-author span{display:block;font-size:15px;color:var(--aa-muted);line-height:1.5}
.art-actions{display:flex;flex-wrap:wrap;gap:12px 14px;margin:24px 0 0}
.art-actions .aa-btn:not(.btn){min-height:44px;font-size:15.5px}
.art-actions .aa-btn:not(.btn)>span{padding:.55rem 1rem}
.art-actions .aa-btn:not(.btn)>i{width:44px}
.art-actions .aa-btn.ghost>span{background:var(--aa-mist);color:var(--aa-petrol)}
.art-actions .aa-btn.ghost>i{background:var(--aa-line-soft);color:var(--aa-petrol)}
.art-actions .aa-btn.ghost:hover>i{background:var(--aa-petrol);color:var(--aa-mist)}
.art-actions .aa-btn svg.ic,.side-cta .aa-btn svg.ic,.af-main .aa-btn svg.ic,.aa-v2 .btn.aa-btn>i svg.ic{width:20px;height:20px}
.pn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:36px 0 0}
.pn>a{position:relative;display:block;padding:50px 20px 20px;background:#fff;border:1px solid var(--aa-line-soft);border-radius:10px;color:var(--aa-ink);font:700 17px/1.35 var(--aa-sans);text-decoration:none;transition:border-color .15s}
.pn>a small{position:absolute;left:0;right:0;top:0;display:flex;align-items:center;gap:8px;height:36px;padding:0 16px;background:var(--aa-mist);border-radius:9px 9px 0 0;font:500 12.5px/1 var(--aa-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--aa-petrol);transition:background-color .15s,color .15s}
.pn>a small svg.ic{width:16px;height:16px}
.pn>a.next{text-align:right}
.pn>a.next small{justify-content:flex-end}
.pn>a:hover{border-color:var(--aa-petrol)}
.pn>a:hover small{background:var(--aa-petrol);color:var(--aa-mist)}
/* the contents card: dot grid, a hairline with a petrol head (static: no script moves it) */
.art-side .side-stick,.doc-wrap .side-stick{position:sticky;top:var(--ip-stick);display:grid;gap:16px}
.aa-toc{background:var(--aa-mist) var(--aa-dots);border:1px solid rgba(15,76,92,.16);border-radius:10px;overflow:hidden}
.toc-top{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:0 16px;font:500 12.5px/1.2 var(--aa-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--aa-petrol)}
.toc-top small{font:inherit;font-size:12px;letter-spacing:.04em;color:var(--aa-muted)}
.toc-bar{position:relative;height:1px;margin:0 16px;background:rgba(15,76,92,.22)}
.toc-bar i{position:absolute;left:0;top:-1px;display:block;width:48px;max-width:100%;height:3px;background:var(--aa-petrol);transition:width .25s}
.aa-toc li a.active{background:rgba(255,255,255,.75);color:var(--aa-petrol)}
.aa-toc li a.active .n{color:var(--aa-petrol)}
.aa-toc ol{list-style:none;margin:0;padding:8px 0 10px}
.aa-toc li a{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:6px;padding:8px 16px;color:var(--aa-ink);font:600 15px/1.4 var(--aa-sans);text-decoration:none;transition:background-color .15s,color .15s}
.aa-toc li a .n{padding-top:2px;font:500 12px/1.4 var(--aa-mono);color:var(--aa-muted);font-variant-numeric:tabular-nums}
.aa-toc li a:hover{background:rgba(255,255,255,.7);color:var(--aa-petrol)}
.aa-toc li a:hover .n{color:var(--aa-petrol)}
.aa-toc li a:focus-visible{outline-offset:-3px}
/* the side call to action: a petrol card */
.side-cta{padding:22px 22px 24px;background:var(--aa-petrol);border-radius:10px;color:var(--aa-mist)}
.side-cta strong{display:block;margin-bottom:6px;color:#fff;font:800 21px/1.15 var(--aa-sans);letter-spacing:-.01em}
.side-cta p{margin:0 0 16px;font-size:15.5px;line-height:1.5;color:var(--aa-mist)}
.side-cta .btn.aa-btn>span{background:var(--aa-mist);color:var(--aa-petrol)}
.side-cta .btn.aa-btn>i{background:#fff;color:var(--aa-petrol)}
.side-cta .btn.aa-btn:hover>i{background:var(--aa-deep);color:var(--aa-mist)}
@media (max-width:1199.98px){.aa-v2 .article-wrap{grid-template-columns:minmax(0,41rem) 280px}}
@media (max-width:991.98px){
  .aa-v2 .article-wrap{grid-template-columns:minmax(0,1fr)}
  .aa-article{max-width:none}
  .art-side,.art-side .side-stick{display:contents}
  .art-side .aa-toc{order:-1;margin-bottom:32px}
  .art-side .side-cta{order:2;display:block;margin-top:40px}
}
@media (max-width:575.98px){
  .aa-article{font-size:17px}
  .pn{grid-template-columns:1fr}
  .pn>a.next{text-align:left}
  .pn>a.next small{justify-content:flex-start}
  .art-actions .aa-btn{flex:1 1 100%}
}

/* questions to ask: a ruled sheet on the mist board */
.aa-v2 .sec#ask{background:var(--aa-mist) var(--aa-dots)}
.ask-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px clamp(40px,5vw,80px);align-items:start}
.ask-card>div:first-child h2{max-width:14ch}
.ask-card>div:first-child p{max-width:44ch}
.ask-list{list-style:none;margin:0;padding:6px 26px 6px;background:#fff;border:1px solid var(--aa-line-soft);border-radius:10px;box-shadow:var(--aa-drop);counter-reset:ask}
.ask-list li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);padding:16px 0 16px;border-bottom:1px solid #E3EEED;font-weight:600;line-height:1.45;counter-increment:ask}
.ask-list li:last-child{border-bottom:0}
.ask-list li::before{content:counter(ask,decimal-leading-zero);content:counter(ask,decimal-leading-zero) / "";padding-top:3px;font:500 13px/1.3 var(--aa-mono);color:var(--aa-petrol)}
.tip-strip{display:flex;gap:14px;align-items:flex-start;margin-top:16px;padding:14px 18px;background:#fff;border:1px solid rgba(15,76,92,.2);border-left:3px solid var(--aa-petrol);border-radius:6px;font-size:15.5px;line-height:1.55}
.tip-strip b{flex:none;display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:4px;background:var(--aa-petrol);color:var(--aa-mist);font:500 11.5px/1 var(--aa-mono);letter-spacing:.08em;text-transform:uppercase}
.ask-card[style] .ask-list{box-shadow:none}
@media (max-width:991.98px){.ask-card{grid-template-columns:1fr}}
@media (max-width:575.98px){.ask-list{padding:2px 16px}.ask-list li{grid-template-columns:36px minmax(0,1fr)}}

/* FAQ: a sticky note left, ruled rows in a white sheet right; the toggle is the button's square arrow cell */
.sticky-aside{position:sticky;top:var(--ip-stick)}
.sticky-aside h2{max-width:13ch}
.sticky-aside .small.mute{position:relative;margin-top:22px!important;padding:14px 16px;background:var(--aa-mist);border-left:3px solid var(--aa-petrol);border-radius:0 6px 6px 0;font-size:14.5px;line-height:1.55;color:var(--aa-ink)}
.aa-faq{background:#fff;border:1px solid var(--aa-line-soft);border-radius:10px;overflow:hidden}
.fq-item + .fq-item{border-top:1px solid var(--aa-line-soft)}
.fq-item h3{margin:0;font-size:inherit}
.fq-q{display:flex;justify-content:space-between;align-items:center;gap:24px;width:100%;min-height:68px;padding:14px 16px 14px 24px;background:none;border:0;color:var(--aa-ink);font:700 18px/1.35 var(--aa-sans);text-align:left;cursor:pointer;transition:background-color .15s}
.fq-q i{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:4px;background:var(--aa-mist);color:var(--aa-petrol);transition:background-color .15s}
.fq-q i svg.ic{width:18px;height:18px}
.fq-q:hover{background:#F6FAF9}
.fq-q:hover i{background:var(--aa-line-soft)}
.fq-q:focus-visible{outline:3px solid var(--aa-ink);outline-offset:-3px}
.fq-q[aria-expanded="true"]{background:#F6FAF9}
.fq-q i svg.ic{transition:transform .2s}
.fq-q[aria-expanded="true"] i{background:var(--aa-deep);color:var(--aa-mist)}
.fq-q[aria-expanded="true"] i svg.ic{transform:rotate(45deg)}
.fq-a{padding:2px 72px 22px 24px;background:#F6FAF9}
.fq-a p{margin:0;max-width:66ch}
@media (max-width:991.98px){.sticky-aside{position:static}}
@media (max-width:575.98px){.fq-q{padding:12px 12px 12px 16px;gap:14px;font-size:17px}.fq-a{padding:2px 16px 18px}}

/* related: post cards in a grid (the inert slider buttons and dots are hidden), then compact guide tiles */
.sl-nav,.sl-dots,.pager:empty{display:none!important}
.aa-slider .sl-view{overflow:visible}
.aa-slider .sl-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;transform:none!important}
#postSl .sl-track{grid-template-columns:repeat(3,minmax(0,1fr))}
.aa-slide{min-width:0}
.rel-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.rel-tile{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr) 24px;align-items:center;gap:16px;padding:10px 16px 10px 10px;background:#fff;border:1px solid var(--aa-line-soft);border-radius:10px;color:var(--aa-ink);text-decoration:none;transition:border-color .15s}
.rel-tile::after{content:"";width:22px;height:22px;background:currentColor;color:var(--aa-petrol);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l14 0M13 18l6 -6M13 6l6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l14 0M13 18l6 -6M13 6l6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s}
.rel-tile .rt-img{display:block;border-radius:6px;overflow:hidden;background:var(--aa-mist)}
.rel-tile .rt-img img{display:block;width:96px;height:68px;object-fit:cover}
.rel-tile strong{display:block;font:700 17px/1.25 var(--aa-sans)}
.rel-tile small{display:block;margin-top:3px;font-size:14px;line-height:1.4;color:var(--aa-muted)}
.rel-tile:hover{border-color:var(--aa-petrol);color:var(--aa-ink)}
.rel-tile:hover::after{transform:translateX(3px)}
.rel-tile:focus-visible{outline:3px solid var(--aa-ink);outline-offset:3px}
@media (max-width:1199.98px){.aa-slider .sl-track{grid-template-columns:repeat(2,minmax(0,1fr))}#postSl .sl-track{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:575.98px){
  .aa-slider .sl-track,#postSl .sl-track{grid-template-columns:1fr}
  .rel-tile{grid-template-columns:80px minmax(0,1fr) 20px;gap:12px}
  .rel-tile .rt-img img{width:80px;height:60px}
}

/* =====================================================================================================================
   THE POST CARD (blog grid, related lists): a spec card; the topic chip is its strip
   ===================================================================================================================== */
.aa-card{position:relative;display:flex;flex-direction:column;height:100%;padding-top:36px;background:#fff;border:1px solid #B9CFCC;border-radius:10px;overflow:hidden;transition:border-color .15s,box-shadow .2s,transform .2s}
.aa-card::before{content:"";position:absolute;left:0;right:0;top:0;height:36px;background:var(--aa-line-soft);transition:background-color .15s}
.aa-card .ac-chip{position:absolute;left:0;right:0;top:0;z-index:1;display:flex;align-items:center;gap:8px;height:36px;padding:0 14px;font:500 12.5px/1 var(--aa-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--aa-petrol);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s}
.aa-card .ac-chip svg.ic{width:16px;height:16px}
.aa-card .ac-img{display:block;margin:10px 10px 0;border-radius:6px;overflow:hidden;background:var(--aa-mist)}
.aa-card .ac-img img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.ac-body{display:flex;flex-direction:column;gap:8px;flex:1;padding:16px 18px 18px}
.ac-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font:500 12.5px/1.4 var(--aa-mono);color:var(--aa-muted)}
.ac-meta>*+*::before{content:"/";content:"/" / "";margin-right:12px;color:#7C9196}
.aa-card h3{margin:0;font-size:20px;line-height:1.25}
.aa-card h3 a{color:var(--aa-ink);text-decoration:none}
.aa-card h3 a::after{content:"";position:absolute;inset:0;z-index:2}
.aa-card p{margin:0;font-size:15.5px;line-height:1.55;color:var(--aa-muted)}
.ac-more{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:6px;font:600 15.5px var(--aa-sans);color:var(--aa-petrol)}
.ac-more svg.ic{width:18px;height:18px;transition:transform .2s}
.aa-card:hover{border-color:var(--aa-petrol);box-shadow:var(--aa-drop);transform:translateY(-3px)}
.aa-card:hover::before{background:var(--aa-petrol)}
.aa-card:hover .ac-chip{color:var(--aa-mist)}
.aa-card:hover .ac-img img{transform:scale(1.04)}
.aa-card:hover .ac-more svg{transform:translateX(3px)}
.aa-card:has(h3 a:focus-visible){outline:3px solid var(--aa-ink);outline-offset:3px}
.aa-card h3 a:focus-visible{outline:0}
/* phones: the card becomes an index row (square thumbnail beside the text), so a list of 35 stays scannable */
@media (max-width:575.98px){
  .aa-card{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:start}
  .aa-card .ac-img{margin:12px 0 12px 12px}
  .aa-card .ac-img img{aspect-ratio:1/1}
  .aa-card .ac-body{padding:12px 14px 14px;gap:6px}
  .aa-card h3{font-size:17px;line-height:1.28}
  .aa-card p{font-size:14.5px;line-height:1.5}
  .ac-meta{font-size:11.5px;gap:2px 8px}
  .ac-meta>*+*::before{margin-right:8px}
  .ac-more{font-size:14.5px}
}

/* =====================================================================================================================
   COVERAGE HUB (/coverage): six photo spec cards, the comparison table, situation tiles
   ===================================================================================================================== */
.cov-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;counter-reset:cov}
.cov-card{position:relative;display:flex;flex-direction:column;padding-top:40px;background:#fff;border:1px solid #B9CFCC;border-radius:10px;overflow:hidden;color:var(--aa-ink);text-decoration:none;counter-increment:cov;transition:border-color .15s,box-shadow .2s,transform .2s}
.cov-card::before{content:"Coverage";content:"Coverage" / "";position:absolute;left:0;right:0;top:0;display:flex;align-items:center;height:40px;padding:0 14px 0 48px;background:var(--aa-line-soft);font:500 12.5px/1 var(--aa-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--aa-petrol);transition:background-color .15s,color .15s}
.cov-card::after{content:counter(cov,decimal-leading-zero) " / 06";content:counter(cov,decimal-leading-zero) " / 06" / "";position:absolute;right:14px;top:0;display:flex;align-items:center;height:40px;font:500 12.5px/1 var(--aa-mono);letter-spacing:.04em;color:var(--aa-muted);transition:color .15s}
.cov-card .mi-ic{position:absolute;left:14px;top:10px;z-index:1;color:var(--aa-petrol);transition:color .15s}
.cov-card .mi-ic svg.ic{width:20px;height:20px;display:block}
.cov-card .cc-img{display:block;margin:10px 10px 0;border-radius:6px;overflow:hidden;background:var(--aa-mist)}
.cov-card .cc-img img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.cov-card .cc-b{display:flex;flex-direction:column;gap:8px;flex:1;padding:18px 20px 20px}
.cov-card h3{margin:0;font-size:23px}
.cov-card p{margin:0;font-size:15.5px;line-height:1.55;color:var(--aa-muted)}
.cov-card .ac-more{margin-top:auto;padding-top:8px}
.cov-card:hover{border-color:var(--aa-petrol);box-shadow:var(--aa-drop);transform:translateY(-3px);color:var(--aa-ink)}
.cov-card:hover::before{background:var(--aa-petrol);color:var(--aa-mist)}
.cov-card:hover::after,.cov-card:hover .mi-ic{color:var(--aa-mist)}
.cov-card:hover .cc-img img{transform:scale(1.04)}
.cov-card:focus-visible{outline:3px solid var(--aa-ink);outline-offset:3px}
@media (max-width:991.98px){.cov-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:575.98px){.cov-cards{grid-template-columns:1fr}}
/* who each coverage protects: DM Mono cells, yes/no as square marks */
.cmp-wrap{overflow-x:auto;background:#fff;border:1px solid var(--aa-line-soft);border-radius:10px;-webkit-overflow-scrolling:touch}
table.cmp{width:100%;min-width:780px;border-collapse:separate;border-spacing:0;font-size:16px}
.cmp thead th{padding:14px 16px;background:var(--aa-mist);border-bottom:1px solid var(--aa-line-soft);font:500 12px/1.35 var(--aa-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--aa-petrol);text-align:left;vertical-align:bottom}
.cmp tbody th,.cmp tbody td{padding:15px 16px;border-bottom:1px solid #E3EEED;text-align:left;vertical-align:middle}
.cmp tbody tr:last-child>*{border-bottom:0}
.cmp tbody tr:nth-child(even)>*{background:#F3F8F7}
.cmp tbody th{font:700 16.5px/1.3 var(--aa-sans);color:var(--aa-ink)}
.cmp .y,.cmp .n{display:inline-flex;align-items:center;gap:10px;font:500 13px/1 var(--aa-mono);letter-spacing:.06em;text-transform:uppercase}
.cmp .y svg.ic,.cmp .n svg.ic{width:24px;height:24px;padding:4px;border-radius:4px}
.cmp .y{color:var(--aa-petrol)}
.cmp .y svg.ic{background:var(--aa-petrol);color:var(--aa-mist)}
.cmp .n{color:var(--aa-muted)}
.cmp .n svg.ic{background:#fff;color:#7C9196;box-shadow:inset 0 0 0 1px #7C9196}
.cmp .y::after,.cmp .n::after{content:attr(title);content:attr(title) / ""}
.cmp .s{font:500 13px/1.3 var(--aa-mono);letter-spacing:.02em;color:var(--aa-ink)}
.cmp-note{margin:16px 0 0;max-width:80ch;font-size:15px;color:var(--aa-ink)}

/* =====================================================================================================================
   HOW IT WORKS: the three steps as ruled rows (the home's scenario rows, on white): DM Mono step | title | text and ticks
   | a small photo print
   ===================================================================================================================== */
.hw-row{display:grid;grid-template-columns:120px minmax(0,4fr) minmax(0,5fr) 208px;grid-template-rows:auto 1fr;column-gap:clamp(24px,3vw,48px);align-items:start;padding:34px 0 38px;border-top:1px solid var(--aa-line-soft)}
.hw-row:first-child{border-top:2px solid var(--aa-petrol)}
.hw-row:last-child{border-bottom:1px solid var(--aa-line-soft)}
.hw-txt{display:contents}
.hw-txt>.aa-eyebrow{grid-column:1;grid-row:1/3;display:block;padding-top:10px;font:500 13px/1.3 var(--aa-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--aa-petrol)}
.hw-txt>.aa-eyebrow svg{display:none}
.hw-txt>h2{grid-column:2;grid-row:1/3;max-width:13ch;margin:0;font-size:clamp(1.625rem,1.35rem + .8vw,2.125rem);line-height:1.1}
.hw-txt>p{grid-column:3;grid-row:1;max-width:none;margin:0 0 14px}
.hw-txt>.hw-points{grid-column:3;grid-row:2;margin:0}
.hw-ph{grid-column:4;grid-row:1/3}
.hw-ph .ph{padding:6px;background:#fff;border:1px solid var(--aa-line-soft);border-radius:8px;box-shadow:var(--aa-drop)}
.hw-ph .ph img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:4px}
.hw-ph .big{display:none}
.hw-points{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:10px}
.hw-points li{display:flex;gap:14px;align-items:flex-start;font-weight:600;line-height:1.45}
.hw-points li svg.ic{width:20px;height:20px;margin-top:2px;color:var(--aa-petrol);flex:none;stroke-width:2.5}
/* the head of How It Works drops its photo less: the steps run the full width under it */
@media (min-width:992px){.aa-banner.has-photo:has(+ .sec .hw-row),.aa-banner.has-photo + .sec:has(.hw-row){--ph-over:72px}}
@media (max-width:1199.98px){.hw-row{grid-template-columns:96px minmax(0,1fr) minmax(0,1.25fr) 176px}}
@media (max-width:991.98px){
  .hw-row{grid-template-columns:96px minmax(0,1fr) 180px;grid-template-rows:auto auto 1fr}
  .hw-txt>h2{grid-column:2;grid-row:1}
  .hw-txt>p{grid-column:2;grid-row:2;margin-top:12px}
  .hw-txt>.hw-points{grid-column:2;grid-row:3}
  .hw-ph{grid-column:3;grid-row:1/4}
  .hw-txt>.aa-eyebrow{grid-row:1/4}
}
@media (max-width:575.98px){
  .hw-row{grid-template-columns:72px minmax(0,1fr);grid-template-rows:auto;padding:26px 0 28px}
  .hw-txt>.aa-eyebrow{grid-row:1;padding-top:6px;font-size:12px}
  .hw-txt>h2{grid-column:2;grid-row:1;font-size:24px}
  .hw-txt>p{grid-column:2;grid-row:2}
  .hw-txt>.hw-points{grid-column:2;grid-row:3}
  .hw-ph{grid-column:2;grid-row:4;max-width:260px;margin-top:20px}
}
/* choices (how it works, get started): spec cards with an index strip */
.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;counter-reset:ch}
.choice{position:relative;padding:54px 24px 24px;background:#fff;border:1px solid var(--aa-line-soft);border-radius:10px;counter-increment:ch}
.choice>svg.ic{position:absolute;left:16px;top:8px;z-index:1;width:20px;height:20px;color:var(--aa-petrol)}
.choice::before{content:counter(ch,decimal-leading-zero) " / 03";content:counter(ch,decimal-leading-zero) " / 03" / "";position:absolute;left:0;right:0;top:0;display:flex;align-items:center;justify-content:flex-end;height:36px;padding:0 16px;background:var(--aa-mist);border-radius:9px 9px 0 0;font:500 12.5px/1 var(--aa-mono);letter-spacing:.04em;color:var(--aa-muted)}
.choice h3{margin:0 0 8px;font-size:21px}
.choice p{margin:0;color:var(--aa-ink);font-size:16px;line-height:1.6}
@media (max-width:991.98px){.choices{grid-template-columns:1fr;max-width:640px}}

/* =====================================================================================================================
   THE REQUEST FORM (SmartForm, 13 pages) and the privacy request form: the worksheet (fill-in lines on the dot grid)
   ===================================================================================================================== */
.aa-v2 .sec.form-sec{background:var(--aa-mist) var(--aa-dots)}
.form-sec>.container>.aa-sec-head{margin-bottom:28px}
.aa-form{position:relative}
.af-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px clamp(32px,4.5vw,72px);align-items:start}
.af-main{min-width:0;padding:0 clamp(22px,3.4vw,44px) clamp(26px,3vw,36px);background:transparent;border-top:2px solid var(--aa-petrol)}
.af-head{display:grid;gap:6px;padding:22px 0 26px}
.af-head .aa-eyebrow{display:flex;align-items:center;gap:8px;color:var(--aa-petrol)}
.af-head h3{margin:4px 0 2px;font-size:clamp(1.625rem,1.4rem + .7vw,2rem);font-weight:800;letter-spacing:-.015em;line-height:1.1}
.af-head p{margin:0;max-width:60ch;color:var(--aa-ink)}
.af-main{padding-left:0;padding-right:0}
.af-sec{margin:0 0 34px;padding:0;border:0;min-width:0}
.af-sec legend{display:flex;align-items:center;gap:14px;width:100%;float:none;margin:0 0 20px;padding:0 0 12px;border-bottom:1px solid rgba(15,76,92,.26);font:800 21px/1.2 var(--aa-sans);letter-spacing:-.01em;color:var(--aa-ink)}
.af-sec legend .n{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:4px;background:var(--aa-petrol);color:var(--aa-mist);font:500 15px/1 var(--aa-mono)}
.af-sec .row{--bs-gutter-x:32px;--bs-gutter-y:24px}
.af-sec .form-label,.aa-cform .form-label{margin-bottom:6px}
.af-sec .form-label .opt,.aa-cform .form-label .opt{margin-left:6px;font:400 13px var(--aa-sans);letter-spacing:0;text-transform:none;color:var(--aa-muted)}
:is(.af-sec,.aa-cform) .form-control,:is(.af-sec,.aa-cform) .form-select{height:48px;min-height:48px;padding:0 2px;background-color:transparent;border:0;border-bottom:2px solid var(--aa-petrol);border-radius:0;font:400 17.5px var(--aa-sans);color:var(--aa-ink);box-shadow:none}
:is(.af-sec,.aa-cform) .form-select{padding-right:30px;background-position:right 2px center}
:is(.af-sec,.aa-cform) .form-control::placeholder{color:#6A7F84}
:is(.af-sec,.aa-cform) .form-control:focus,:is(.af-sec,.aa-cform) .form-select:focus{background-color:rgba(255,255,255,.65);border-bottom-color:var(--aa-ink);box-shadow:0 1px 0 0 var(--aa-ink);outline:0}
:is(.af-sec,.aa-cform) .form-control:focus-visible,:is(.af-sec,.aa-cform) .form-select:focus-visible{outline:3px solid var(--aa-ink);outline-offset:3px}
.aa-cform textarea.form-control{height:auto;min-height:120px;padding:6px 14px;border:1px solid var(--aa-petrol);border-radius:4px;line-height:28px;background:#fff repeating-linear-gradient(180deg,transparent 0,transparent 27px,rgba(15,76,92,.16) 27px,rgba(15,76,92,.16) 28px) 0 6px/100% 28px;background-attachment:local}
/* radio chips: DM Mono-free toggles, the radio stays focusable */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative;display:inline-flex;margin:0;cursor:pointer}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip>span{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px 0 14px;background:#fff;border:1px solid #6A7F84;border-radius:4px;font:600 16px/1.2 var(--aa-sans);color:var(--aa-ink);transition:background-color .15s,border-color .15s,color .15s}
.chip>span svg.ic{width:20px;height:20px;color:var(--aa-petrol)}
.chip:hover>span{border-color:var(--aa-petrol)}
.chip input:checked + span{background:var(--aa-petrol);border-color:var(--aa-petrol);color:#fff}
.chip input:checked + span svg.ic{color:var(--aa-mist)}
.chip input:focus-visible + span{outline:3px solid var(--aa-ink);outline-offset:3px}
.af-consent{margin-top:28px}
.af-consent .form-check,.aa-cform .form-check{position:relative;padding-left:36px;margin:0}
.af-consent .form-check-input,.aa-cform .form-check-input{width:22px;height:22px;margin:2px 0 0 -36px;background-color:#fff}
.af-consent .form-check-label,.aa-cform .form-check-label{font-size:14.5px;line-height:1.55;color:var(--aa-ink)}
.af-consent .form-check-label a,.aa-cform .form-check-label a{font-weight:600}
.af-main>button[type=submit]{margin-top:4px}
.btn.aa-btn.lg{min-height:56px}
.af-fine{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;font-size:14px;line-height:1.5;color:var(--aa-muted)}
.af-fine svg.ic{width:18px;height:18px;margin-top:1px;color:var(--aa-petrol)}
:is(.af-sec,.aa-cform,.af-consent) .invalid-feedback{margin-top:6px}
/* the summary: a white spec card, sticky */
.af-side .sum-stick{position:sticky;top:var(--ip-stick);background:#fff;border:1px solid var(--aa-line-soft);border-radius:10px;box-shadow:var(--aa-drop);overflow:hidden}
.sum-top{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--aa-petrol);color:var(--aa-mist)}
.sum-top .ring{width:48px;height:48px;flex:none;transform:rotate(-90deg)}
.sum-top .ring circle{fill:none;stroke:rgba(220,235,234,.28);stroke-width:4}
.sum-top .ring circle.val{stroke:var(--aa-mist)}
.sum-top .pct{position:absolute;width:48px;text-align:center;font:500 13px/48px var(--aa-mono);color:#fff;pointer-events:none}
.sum-top{position:relative}
.sum-top small{display:block;font:500 11.5px/1.3 var(--aa-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--aa-mist)}
.sum-top strong{display:block;margin-top:2px;color:#fff;font:700 17px/1.3 var(--aa-sans)}
.sum-list{list-style:none;margin:0;padding:6px 18px}
.sum-list li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid #E3EEED}
.sum-list li:last-child{border-bottom:0}
.sum-list li svg.ic{width:20px;height:20px;margin-top:2px;color:var(--aa-petrol)}
.sum-list small{display:block;font:500 11.5px/1.3 var(--aa-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--aa-muted)}
.sum-list b{display:block;margin-top:2px;font:600 15.5px/1.35 var(--aa-sans);color:var(--aa-ink)}
.sum-next{padding:16px 18px;background:#F6FAF9;border-top:1px solid var(--aa-line-soft)}
.sum-next h4{margin:0 0 10px;font:500 12px/1.3 var(--aa-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--aa-petrol)}
.sum-next ol{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:sn}
.sum-next li{position:relative;padding-left:30px;font-size:14.5px;line-height:1.5;counter-increment:sn}
.sum-next li::before{content:counter(sn,decimal-leading-zero);position:absolute;left:0;top:1px;font:500 12px/1.5 var(--aa-mono);color:var(--aa-petrol)}
.sum-note{margin:0;padding:12px 18px 16px;font-size:13.5px;line-height:1.5;color:var(--aa-muted);border-top:1px solid var(--aa-line-soft)}
/* states without a script: hidden until a script sets .loading / .done */
.af-loading,.af-done{display:none}
.aa-form.loading .af-loading,.aa-cform.loading .af-loading{display:flex}
.aa-form.done .af-done,.aa-cform.done .af-done{display:block}
.af-loading{align-items:center;gap:14px;padding:18px;background:#fff;border:1px solid var(--aa-line-soft);border-radius:10px}
.af-loading .spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--aa-mist);border-top-color:var(--aa-petrol);animation:aa-spin 1s linear infinite}
@keyframes aa-spin{to{transform:rotate(360deg)}}
.af-done{padding:28px;background:#fff;border:1px solid var(--aa-line-soft);border-left:4px solid var(--aa-petrol);border-radius:10px}
/* the form straddles the head on Get Started */
.aa-banner.slim + .form-sec{background:transparent;padding-top:0;padding-bottom:0}
.aa-banner.slim + .form-sec .aa-form{position:relative;z-index:2;margin-top:calc(-1 * clamp(88px,8vw,112px));padding:0 clamp(22px,3.4vw,44px) clamp(26px,3vw,40px);background:#fff;border:1px solid var(--aa-line-soft);border-radius:10px;box-shadow:var(--aa-drop)}
.aa-banner.slim + .form-sec .af-main{border-top:0}
.aa-banner.slim + .form-sec .af-side{padding-top:28px}
.aa-banner.slim + .form-sec + .sec{padding-top:clamp(56px,6vw,88px)}
@media (max-width:1199.98px){.af-grid{grid-template-columns:minmax(0,1fr) 300px}}
@media (max-width:991.98px){
  .af-grid{grid-template-columns:1fr}
  .af-side .sum-stick{position:static}
}
@media (max-width:575.98px){
  .af-sec legend{font-size:19px}
  .chip{flex:1 1 calc(50% - 5px)}
  .chip>span{width:100%;justify-content:flex-start}
  .aa-banner.slim + .form-sec .aa-form{margin-top:-64px;padding:0 18px 22px}
}

/* =====================================================================================================================
   LEARN: the article list (/blog) and the article page (/blog/<slug>, every new article from the admin)
   ===================================================================================================================== */
/* featured article: the home page's notebook page over a photo (final cross-site fix 2026-10-14; it was a wide card
   with a title bar, photo left and text right, the same opening as three other JDA blogs). The photo straddles the head's
   foot; the mist dot-grid page with the newest article overlaps its right end and drops below it; the topic is the
   page's petrol index tab */
a.blog-feature{position:relative;z-index:2;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:end;margin-top:calc(-1 * clamp(88px,8vw,112px));margin-bottom:40px;color:var(--aa-ink);text-decoration:none}
a.blog-feature .bf-img{grid-column:1/9;grid-row:1;display:block;height:clamp(360px,33vw,470px);border-radius:10px;overflow:hidden;background:var(--aa-mist);box-shadow:var(--aa-drop)}
a.blog-feature .bf-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
a.blog-feature .bf-b{grid-column:7/13;grid-row:1;position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;margin:0 0 -40px;padding:40px clamp(28px,3vw,48px) 36px;background:var(--aa-mist) var(--aa-dots);border-radius:10px;box-shadow:var(--aa-drop);transition:box-shadow .2s}
a.blog-feature .aa-eyebrow svg.ic{width:15px;height:15px}
a.blog-feature h2{margin:0;font-size:clamp(1.75rem,1.4rem + 1vw,2.375rem);line-height:1.1;letter-spacing:-.015em}
a.blog-feature p{margin:0;color:var(--aa-ink);max-width:48ch}
a.blog-feature .ac-meta{margin:4px 0 0!important}
a.blog-feature .ac-more{margin-top:8px}
a.blog-feature:hover{color:var(--aa-ink)}
a.blog-feature:hover .bf-b{box-shadow:0 26px 48px -22px rgba(15,76,92,.55)}
a.blog-feature:hover .bf-img img{transform:scale(1.03)}
a.blog-feature:hover .ac-more svg{transform:translateX(3px)}
a.blog-feature:focus-visible{outline:3px solid var(--aa-ink);outline-offset:3px}
/* topics and search; the grid; nothing here filters without the (never shipped) script */
.blog-tools{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 32px;margin:48px 0 28px;padding:0 0 20px;border-bottom:1px solid var(--aa-line-soft)}
.cat-tabs{display:flex;flex-wrap:wrap;gap:8px}
.cat-tabs button{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;background:#fff;border:1px solid var(--aa-line-soft);border-radius:4px;font:500 12.5px/1 var(--aa-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--aa-ink);cursor:pointer;transition:border-color .15s,background-color .15s}
.cat-tabs button:hover{border-color:var(--aa-petrol)}
.cat-tabs button.on{background:var(--aa-petrol);border-color:var(--aa-petrol);color:var(--aa-mist)}
.cat-tabs button:focus-visible{outline:3px solid var(--aa-ink);outline-offset:3px}
.blog-search{display:flex;align-items:center;gap:10px;width:min(340px,100%);height:48px;margin:0;border-bottom:2px solid var(--aa-petrol)}
.blog-search svg.ic{width:20px;height:20px;color:var(--aa-petrol)}
.blog-search input{flex:1;min-width:0;height:44px;border:0;background:transparent;font:400 17px var(--aa-sans);color:var(--aa-ink)}
.blog-search input::placeholder{color:#6A7F84}
.blog-search input:focus{outline:0}
.blog-search:focus-within{border-bottom-color:var(--aa-ink);box-shadow:0 1px 0 0 var(--aa-ink)}
[data-post-grid]{--bs-gutter-x:24px;--bs-gutter-y:24px}
.blog-empty{padding:18px 20px;background:var(--aa-mist);border-radius:6px}
@media (max-width:991.98px){
  a.blog-feature{grid-template-columns:minmax(0,1fr);margin-bottom:0}
  a.blog-feature .bf-img{grid-column:1;grid-row:1;height:auto;aspect-ratio:16/10}
  a.blog-feature .bf-b{grid-column:1;grid-row:2;margin:-40px 14px 0;padding:34px 24px 28px}
}
@media (max-width:767.98px){
  a.blog-feature{margin-top:-64px}
  a.blog-feature .bf-b{margin:-36px 10px 0;padding:30px 20px 24px}
  .blog-tools{margin-top:36px}
  .blog-search{width:100%}
  .cat-tabs{flex-wrap:nowrap;width:calc(100% + 16px);margin-right:-16px;padding:2px 16px 6px 0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .cat-tabs::-webkit-scrollbar{display:none}
  .cat-tabs button{flex:none}
}

/* the article page: a mist head with DM Mono meta; the hero photo straddles its foot */
.post-hero{background:var(--aa-mist) var(--aa-dots)}
.post-hero .ph-card{display:grid;padding-top:clamp(40px,4.6vw,64px)}
.post-hero h1{max-width:24ch;margin:0 0 .4em;font-size:clamp(2.125rem,1.6rem + 1.6vw,3rem);line-height:1.06;letter-spacing:-.018em}
.post-hero .lede{max-width:60ch;margin:0}
.ph-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin:22px 0 0;font:500 13px/1.4 var(--aa-mono);color:var(--aa-petrol)}
.ph-meta>span{display:inline-flex;align-items:center;gap:8px}
.ph-meta svg.ic{width:16px;height:16px}
.ph-meta .by img{width:24px;height:24px}
.ph-meta .by{color:var(--aa-ink)}
.ph-lead{position:relative;z-index:2;margin:40px 0 -200px;padding:10px;background:#fff;border:1px solid var(--aa-line-soft);border-radius:10px;box-shadow:var(--aa-drop)}
.ph-lead img{display:block;width:100%;height:auto;aspect-ratio:21/8;object-fit:cover;border-radius:6px}
.aa-v2 .post-hero + .sec.tight{padding-top:calc(200px + clamp(48px,5vw,72px))}
@media (max-width:767.98px){
  .post-hero .ph-card{padding-top:28px}
  .ph-meta{gap:6px 16px;font-size:12.5px}
  .ph-lead{margin:26px 0 -96px;padding:8px}
  .ph-lead img{aspect-ratio:3/2}
  .aa-v2 .post-hero + .sec.tight{padding-top:calc(96px + 40px)}
}

/* =====================================================================================================================
   LEGAL, second design (terms and conditions, disclosures, accessibility, do not sell): the admin's contents list as
   a dot-grid card, the document as a white sheet straddling the slim head, DM Mono meta strip and section numbers
   ===================================================================================================================== */
.aa-banner:not(.has-photo) + .sec{padding-top:0}
.doc-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:clamp(32px,4vw,64px);align-items:start}
.doc-wrap>aside{grid-column:2;grid-row:1;padding-top:24px}
.doc-wrap>.doc-card{grid-column:1;grid-row:1}
.doc-card{--dc-pad:clamp(24px,4.5vw,64px);position:relative;z-index:2;min-width:0;margin-top:calc(-1 * clamp(72px,7vw,96px));padding:0 var(--dc-pad) clamp(32px,4vw,56px);background:#fff;border:1px solid var(--aa-line-soft);border-radius:10px;box-shadow:var(--aa-drop)}
.doc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 22px;min-height:48px;margin:0 calc(-1 * var(--dc-pad)) 30px;padding:10px var(--dc-pad);background:var(--aa-mist);border-radius:9px 9px 0 0;font:500 12.5px/1.4 var(--aa-mono);letter-spacing:.02em;color:var(--aa-petrol)}
.doc-meta>span{display:inline-flex;align-items:center;gap:8px}
.doc-meta svg.ic{width:16px;height:16px}
.doc-meta a{color:var(--aa-petrol)}
.doc-body{max-width:68ch;font-size:17px;line-height:1.7}
.doc-body h2{position:relative;margin:2.2em 0 .6em;padding-top:20px;border-top:1px solid var(--aa-line-soft);font-size:clamp(1.375rem,1.25rem + .45vw,1.625rem);line-height:1.2}
.doc-body>h2:first-child{margin-top:0;padding-top:0;border-top:0}
.doc-body>h2:first-child::after{display:none}
.doc-body h2::after{content:"";position:absolute;left:0;top:-2px;width:40px;height:3px;background:var(--aa-petrol)}
.doc-body h3{margin:1.5em 0 .4em;font-size:19px}
.doc-body ul,.doc-body ol{padding-left:1.3rem}
.doc-body li{margin-bottom:.55em}
.doc-body li::marker{color:var(--aa-petrol)}
.doc-body a{font-weight:600}
.doc-wrap .aa-toc{max-height:calc(100vh - var(--ip-stick) - 32px);overflow:auto}
/* do not sell: the request form as a worksheet panel inside the sheet */
.aa-cform{margin-top:28px!important;padding:clamp(20px,3vw,32px);background:var(--aa-mist) var(--aa-dots);border-radius:10px;counter-reset:ws}
.aa-cform .row{--bs-gutter-x:28px;--bs-gutter-y:24px}
.aa-cform .form-label{counter-increment:ws}
.aa-cform .form-label::before{content:counter(ws,decimal-leading-zero);content:counter(ws,decimal-leading-zero) / "";display:inline-block;min-width:2.2em;color:var(--aa-muted)}
.aa-cform .form-check{margin-top:22px}
.aa-cform .form-check-label.small{font-size:14.5px}
.aa-cform .btn.aa-btn{margin-top:24px!important}
@media (max-width:991.98px){
  .doc-wrap{grid-template-columns:1fr}
  .doc-wrap>aside{grid-column:1;grid-row:1;position:relative;z-index:3;margin-top:calc(-1 * clamp(72px,7vw,96px));padding-top:0}
  .doc-wrap .aa-toc{background-color:#fff;box-shadow:var(--aa-drop)}
  .doc-wrap>.doc-card{grid-row:2;margin-top:24px}
  .doc-wrap .side-stick{position:static}
  .doc-wrap .aa-toc{max-height:none}
}
@media (max-width:767.98px){
  .doc-card{margin-top:24px}
  .doc-wrap>aside{margin-top:-56px}
  .doc-body{font-size:16.5px}
}

/* =====================================================================================================================
   INNER-PAGE REVIEW PASS (2026-10-14)
   ===================================================================================================================== */
/* How it works, "What partners may ask you": the list is a white notebook page (a petrol margin rule, ruled lines)
   hanging over the foot of the mist band */
.aa-v2 .sec.sky:has(.ask-card[style]){position:relative;z-index:1;padding-bottom:clamp(40px,4vw,56px)}
.aa-v2 .sec.sky:has(.ask-card[style]) .row{align-items:flex-start!important}
.aa-v2 .sec.sky:has(.ask-card[style]) .ask-card{margin-bottom:calc(-1 * (clamp(40px,4vw,56px) + 96px))}
.aa-v2 .sec.sky:has(.ask-card[style]) + .sec{padding-top:calc(var(--ip-gap) + 96px)}
.ask-card[style] .ask-list{position:relative;padding:12px 28px 14px 0;box-shadow:var(--aa-drop)}
.ask-card[style] .ask-list::before{content:"";position:absolute;top:0;bottom:0;left:58px;width:2px;background:rgba(15,76,92,.32)}
.ask-card[style] .ask-list li{grid-template-columns:76px minmax(0,1fr);padding:15px 0}
.ask-card[style] .ask-list li::before{padding-left:22px}
@media (max-width:991.98px){
  .aa-v2 .sec.sky:has(.ask-card[style]) .ask-card{margin-bottom:calc(-1 * (clamp(40px,4vw,56px) + 64px))}
  .aa-v2 .sec.sky:has(.ask-card[style]) + .sec{padding-top:calc(var(--ip-gap) + 64px)}
}
@media (max-width:575.98px){
  .ask-card[style] .ask-list{padding:6px 16px 8px 0}
  .ask-card[style] .ask-list::before{left:44px}
  .ask-card[style] .ask-list li{grid-template-columns:58px minmax(0,1fr)}
  .ask-card[style] .ask-list li::before{padding-left:12px}
}

/* guides, "Questions to ask every partner": a full-width petrol band; the questions run in two columns of ruled rows,
   the tip is a mist tag */
.aa-v2 .sec#ask{background:var(--aa-petrol);color:var(--aa-mist)}
#ask .ask-card{display:block}
#ask .ask-card>div:first-child{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:14px clamp(40px,5vw,80px);align-items:end;margin-bottom:34px}
#ask .ask-card>div:first-child h2{margin:0!important;max-width:16ch;color:#fff}
#ask .ask-card>div:first-child p{margin:0;max-width:56ch;color:var(--aa-mist)}
#ask .ask-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);grid-auto-flow:column;column-gap:clamp(40px,5vw,80px);padding:0;background:none;border:0;border-top:1px solid rgba(220,235,234,.4);border-radius:0;box-shadow:none}
#ask .ask-list li,#ask .ask-list li:last-child{padding:17px 0;border-bottom:1px solid rgba(220,235,234,.24);color:#fff}
#ask .ask-list li::before{color:var(--aa-mist)}
#ask .tip-strip{display:inline-flex;max-width:860px;margin-top:30px;padding:14px 18px;background:var(--aa-mist);border:0;border-radius:6px;color:var(--aa-ink)}
@media (max-width:991.98px){
  #ask .ask-card>div:first-child{grid-template-columns:1fr}
  #ask .ask-list{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
}

/* FAQ blocks (guides, How it works): one centred column; the heading above, the note as a mist tag, the list below */
.aa-v2 .sec:has(.aa-faq)>.container>.row{display:block;max-width:820px;margin:0 auto;--bs-gutter-x:0;--bs-gutter-y:0}
.aa-v2 .sec:has(.aa-faq)>.container>.row>[class*="col-"]{width:auto;max-width:none;margin:0;padding:0}
.aa-v2 .sec:has(.aa-faq) .sticky-aside{position:static;margin:0 0 28px}
.aa-v2 .sec:has(.aa-faq) .sticky-aside h2{max-width:none;margin:0!important}
.aa-v2 .sec:has(.aa-faq) .sticky-aside p{max-width:66ch;margin:14px 0 0}
.aa-v2 .sec:has(.aa-faq) .sticky-aside .small.mute{display:inline-block;margin-top:18px!important}

/* the article list (/blog): nine per page, the pager in DM Mono; on phones the topic row scrolls under a fade */
.pager{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:44px 0 0}
.pager button{display:grid;place-items:center;width:40px;height:40px;padding:0;background:#fff;border:1px solid var(--aa-line-soft);border-radius:4px;font:500 14px/1 var(--aa-mono);color:var(--aa-ink);font-variant-numeric:tabular-nums;cursor:pointer;transition:border-color .15s,background-color .15s}
.pager button:hover{border-color:var(--aa-petrol)}
.pager button.on{background:var(--aa-petrol);border-color:var(--aa-petrol);color:var(--aa-mist)}
.pager button:focus-visible{outline:3px solid var(--aa-ink);outline-offset:3px}
@media (max-width:767.98px){
  .cat-tabs{padding-right:48px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}
}

/* post cards (the article list, "More from ...", "Related guides and articles"): the home's garage-door lift card. The
   photo and the petrol title bar (with the square arrow cell) are the door; with a mouse the door lifts on hover or
   focus to show the date, the summary and "Read article". Touch screens and reduced motion: the card stands open
   (photo, bar, text). Phones keep the compact index rows above. */
@media (min-width:576px){
  .aa-card{padding-top:0;border-color:var(--aa-line-soft)}
  .aa-card::before{display:none}
  .aa-card .ac-img{position:relative;margin:0;border-radius:0}
  .aa-card .ac-img img{aspect-ratio:16/10}
  .aa-card .ac-chip{left:12px;right:auto;top:12px;height:28px;max-width:calc(100% - 24px);padding:0 10px;background:var(--aa-mist);border-radius:4px;font-size:12px}
  .aa-card .ac-body{padding:0 20px 20px;gap:10px}
  .aa-card h3{order:-1;min-height:96px;margin:0 -20px 6px;padding:16px 72px 18px 20px;background:var(--aa-petrol) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' rx='4' fill='%230B3B47'/%3E%3Cpath d='M12 20h16M22 14l6 6-6 6' fill='none' stroke='%23DCEBEA' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 16px top 16px/40px 40px no-repeat;color:#fff;font-size:19px;line-height:1.25}
  .aa-card h3 a,.aa-card h3 a:hover{color:#fff}
  .aa-card:hover h3,.aa-card:focus-within h3{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Crect width='40' height='40' rx='4' fill='%23DCEBEA'/%3E%3Cpath d='M12 20h16M22 14l6 6-6 6' fill='none' stroke='%230F4C5C' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
  .aa-card:hover .ac-chip{color:var(--aa-petrol)}
  /* four to a row (the guides' related articles): a smaller title */
  .aa-slider:not(#postSl) .aa-card h3{padding-right:64px;font-size:17px;background-position:right 12px top 14px;background-size:38px 38px}
}
@media (min-width:576px) and (hover:hover) and (prefers-reduced-motion:no-preference){
  .aa-card{display:block;height:440px;isolation:isolate}
  .aa-card:hover{transform:none}
  /* the photo link covers the card for a mouse (it is a duplicate of the title link, hidden from keyboards and
     screen readers); the title link stays the one to tab to */
  .aa-card .ac-img{position:absolute;inset:0;z-index:3;background:transparent;overflow:hidden}
  .aa-card .ac-img img{position:absolute;left:0;top:0;width:100%;height:calc(100% - 96px);aspect-ratio:auto;transition:transform .6s cubic-bezier(.66,0,.3,1)}
  .aa-card .ac-chip{transition:transform .6s cubic-bezier(.66,0,.3,1),color .15s}
  /* the text under the door sits below the photo link; the title bar sits above it and may grow upwards over the photo */
  .aa-card .ac-body{position:absolute;left:0;right:0;bottom:0;height:60%;padding:22px 22px 20px;background:#fff}
  .aa-card .ac-body>p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .aa-card h3{position:absolute;left:0;right:0;bottom:0;z-index:4;height:auto;min-height:96px;margin:0;transition:transform .6s cubic-bezier(.66,0,.3,1),background-image .15s}
  .aa-card:hover .ac-img img,.aa-card:focus-within .ac-img img,.aa-card:hover .ac-chip,.aa-card:focus-within .ac-chip,.aa-card:hover h3,.aa-card:focus-within h3{transform:translateY(-264px)}
}

/* the request form's live summary (v2.js): the ring fills, a finished row turns petrol */
.sum-top .ring circle.val{stroke-linecap:round;stroke-dasharray:119.4;stroke-dashoffset:119.4;transition:stroke-dashoffset .4s}
.sum-list li.done svg.ic{color:#fff;background:var(--aa-petrol);border-radius:4px}
.sum-list li.done b{color:var(--aa-petrol)}
/* sending and sent (v2.js): the form gives way to the thank-you panel */
.aa-form.loading .af-grid{opacity:.45;pointer-events:none;transition:opacity .2s}
.aa-form.loading .af-loading{margin-top:20px}
.aa-form.done .af-grid,.aa-cform.done>form,.aa-cform.loading>form{display:none}
.af-loading strong{font:700 17px var(--aa-sans);color:var(--aa-ink)}
.af-loading small{font-size:14.5px;color:var(--aa-muted)}
.af-done .done-ic{display:grid;place-items:center;width:52px;height:52px;margin-bottom:14px;border-radius:4px;background:var(--aa-petrol);color:var(--aa-mist)}
.af-done .done-ic svg.ic{width:28px;height:28px}
.af-done h3{margin:0 0 8px}
.af-done p{max-width:62ch}
.done-list{list-style:none;margin:16px 0 22px;padding:0;display:grid;gap:10px}
.done-list li{display:flex;gap:12px;align-items:flex-start;line-height:1.5}
.done-list li svg.ic{width:20px;height:20px;margin-top:2px;color:var(--aa-petrol)}
.af-done:focus{outline:none}
.af-done:focus-visible{outline:3px solid var(--aa-ink);outline-offset:3px}
/* a field that still needs an answer (v2.js marks it) */
:is(.af-sec,.aa-cform) .form-control.is-invalid,:is(.af-sec,.aa-cform) .form-select.is-invalid{border-bottom-color:var(--aa-warn-ink);box-shadow:0 1px 0 0 var(--aa-warn-ink)}
.aa-cform textarea.form-control.is-invalid{border-color:var(--aa-warn-ink)}
.chips.is-invalid .chip>span{border-color:var(--aa-warn-ink);box-shadow:inset 0 0 0 1px var(--aa-warn-ink)}
.chips.is-invalid~.invalid-feedback,.form-check.is-invalid .invalid-feedback{display:block}
.form-check.is-invalid .form-check-input{border-color:var(--aa-warn-ink)}

/* contents cards on phones and tablets (v2.js): folded to their strip, a chevron opens them */
.aa-toc .toc-top[role="button"]{cursor:pointer;user-select:none}
.aa-toc .toc-top[role="button"]::after{content:"";flex:none;width:20px;height:20px;margin-left:-4px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s}
.aa-toc:not(.toc-closed) .toc-top[role="button"]::after{transform:rotate(180deg)}
.aa-toc .toc-top[role="button"] small{margin-left:auto}
.aa-toc .toc-top[role="button"]:focus-visible{outline:3px solid var(--aa-ink);outline-offset:-3px}
.aa-toc.toc-closed ol,.aa-toc.toc-closed .toc-bar{display:none}

/* the reading bar (v2.js): a petrol line under the sticky header */
.aa-v2 .read-bar{position:fixed;left:0;top:97px;z-index:1029;width:0;height:3px;background:var(--aa-petrol);pointer-events:none;transition:width .1s linear}
@media (max-width:1199.98px){.aa-v2 .read-bar{top:73px}}
@media (max-width:767.98px){.aa-v2 .read-bar{top:65px}}

/* Learn articles: a figure's caption reads as an editorial caption (Fira italic), not as a machine label */
.art-fig figcaption{display:block;margin-top:10px;font:italic 400 15px/1.5 var(--aa-sans);color:var(--aa-muted)}
.art-fig figcaption::before{display:none}

/* phones and tablets: room under the banner photo's clipped print before the next section starts */
@media (max-width:991.98px){
  .aa-banner.has-photo + .sec{padding-top:calc(var(--ph-over) + 72px)}
  .snap{padding-top:calc(var(--ph-over) + 64px)}
}

/* =====================================================================================================================
   INDEX TABS, site-wide (final cross-site fix 2026-10-14). The cross-site check found the spec cards' full-width title
   bars almost everywhere (hero cards, guide tiles, page-head photos, "LEARN CENTER 36 ARTICLES", "LAST UPDATED", the
   contact widgets, the footer cards): with the DM Mono labels and the dot grid the site read like a settings screen.
   Every card label is now a small index tab sticking up from the card's top edge, like the tab of a divider page in a
   manual: DM Mono 11.5 px; mist on white cards, white where the card stands on a mist field, petrol on petrol cards;
   it turns petrol when its card is hovered. Each card keeps the room for its tab above its top edge. This block is
   loaded last, so it overrides the strips drawn in style.css, v1-pages.css, tools.css and above.
   ===================================================================================================================== */
:root{--tab-h:28px}
.sc-strip,
body:not(.page-index) .info-card .card-label,
body:not(.page-index) .callout::before,
.aside-card:not(.dark)>h2,
.legal>.updated:first-child,
.plan::before,
.library h2,
.ph-photo::before,
.bn-tag,
.snap-c small,
.aa-callout::before,
.aa-article .takeaways h2,
.pn>a small,
.cov-card::before,
.choice::before,
a.blog-feature .aa-eyebrow,
.tool-panel>:is(h2,h3):first-child,
.result-panel>:is(h2,h3):first-child{
  position:absolute;left:16px;right:auto;top:1px;bottom:auto;z-index:3;transform:translateY(-100%);
  display:inline-flex;align-items:center;justify-content:flex-start;gap:10px;
  width:auto;max-width:calc(100% - 32px);height:var(--tab-h);min-height:0;margin:0!important;padding:0 12px;
  background:var(--aa-mist);border:1px solid var(--aa-line-soft);border-bottom:0;border-radius:6px 6px 0 0;box-shadow:none;
  font:500 11.5px/1 var(--aa-mono)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--aa-petrol);
  white-space:nowrap;overflow:hidden;transition:background-color .15s,color .15s,border-color .15s
}
/* the cards give their tab room and no longer clip it */
.hm-feat,.hm-bento .info-card,body:not(.page-index) .info-card,.library>div,.takeaways{position:relative}
.hm-feat,.hm-page,.hm-bento .info-card,body:not(.page-index) .info-card,body:not(.page-index) .callout,.aside-card:not(.dark),.legal,.plan,
.library>div,.ph-photo,.bn-photo,.snap-c,.aa-callout,.takeaways,.pn>a,.cov-card,.choice,.tool-panel,.result-panel{overflow:visible}
.hm-bento .info-card,body:not(.page-index) .info-card,.aside-card:not(.dark),.plan,.library>div,.snap-c,.pn>a,.cov-card,.choice{margin-top:var(--tab-h)}
body:not(.page-index) .info-card{height:calc(100% - var(--tab-h))}
.sc-strip>*{overflow:hidden;text-overflow:ellipsis}

/* home: hero cards, the notebook page, the bento (white tabs on the mist field, petrol on the tool tile) */
.hm-feat.is-tool .sc-strip{background:var(--aa-petrol);border-color:var(--aa-petrol);color:var(--aa-mist)}
.hm-page .sc-strip{background:var(--aa-mist);border-color:transparent;padding:0 14px}
.hm-page-b{padding-top:44px}
.hm-bento .sc-strip{background:#fff;border-color:#B9CFCC}
.hm-bento .info-card:hover .sc-strip,.hm-bento .info-card:focus-visible .sc-strip{background:var(--aa-petrol);border-color:var(--aa-petrol);color:var(--aa-mist)}
.hm-bento .t-tool .sc-strip{background:var(--aa-petrol);border-color:var(--aa-petrol);color:var(--aa-mist)}
.hm-bento .t-tool:hover .sc-strip,.hm-bento .t-tool:focus-visible .sc-strip{background:var(--aa-deep);border-color:var(--aa-deep);color:var(--aa-mist)}

/* first-design cards, callouts, asides, plans, the library, page-head photos, legal sheets */
body:not(.page-index) .info-card .card-label{border-color:#B9CFCC}
body:not(.page-index) .info-card .card-label::after{padding-left:10px;border-left:1px solid rgba(15,76,92,.28)}
body:not(.page-index) .info-card:hover .card-label::after{border-left-color:rgba(220,235,234,.45)}
body:not(.page-index) .info-card:hover .card-label,body:not(.page-index) .info-card:focus-visible .card-label{background:var(--aa-petrol);border-color:var(--aa-petrol);color:var(--aa-mist)}
body:not(.page-index) .callout,.aa-callout{margin-top:calc(30px + var(--tab-h));padding-top:24px}
body:not(.page-index) .callout::after{display:none}
.aa-callout>svg.ic{top:16px}
.aside-card:not(.dark){padding-top:6px}
.plan{padding-top:28px}
.plan.popular{padding-top:27px}
.plan.popular::before{top:0;left:15px;right:auto;height:var(--tab-h);border-radius:6px 6px 0 0;background:var(--aa-petrol);border-color:var(--aa-petrol);color:var(--aa-mist)}
.library ul{padding-top:10px}
.ph-photo,.bn-photo{padding-top:10px}
.ph-photo::before{content:var(--ph-k,"AutoAssures") var(--ph-n,"");content:var(--ph-k,"AutoAssures") var(--ph-n,"") / "";background:#fff}
.ph-photo::after{display:none}
.page-insurance-types{--ph-n:"\00a0\00a0 01 / 09"}.page-coverage-levels{--ph-n:"\00a0\00a0 02 / 09"}.page-lower-your-premium{--ph-n:"\00a0\00a0 03 / 09"}
.page-compare-policies{--ph-n:"\00a0\00a0 04 / 09"}.page-after-an-accident{--ph-n:"\00a0\00a0 05 / 09"}.page-after-a-collision{--ph-n:"\00a0\00a0 06 / 09"}
.page-reporting-an-accident{--ph-n:"\00a0\00a0 07 / 09"}.page-filing-a-claim{--ph-n:"\00a0\00a0 08 / 09"}.page-discounts{--ph-n:"\00a0\00a0 09 / 09"}
.page-compare-quotes{--ph-n:"\00a0\00a0 01 / 06"}.page-rate-checklist{--ph-n:"\00a0\00a0 02 / 06"}.page-coverage-worksheet{--ph-n:"\00a0\00a0 03 / 06"}
.page-budget-calculator{--ph-n:"\00a0\00a0 04 / 06"}.page-deductible-calculator{--ph-n:"\00a0\00a0 05 / 06"}.page-coverage-calculator{--ph-n:"\00a0\00a0 06 / 06"}
.legal{padding-top:clamp(36px,4vw,52px)}
.legal>.updated:first-child{left:var(--lg-pad);max-width:calc(100% - 2 * var(--lg-pad));background:#fff}

/* second-design banners, fact cards, callouts, the short version, previous/next, post cards, coverage cards, choices */
.bn-tag{background:#fff}
.bn-tag i{color:var(--aa-muted)}
.snap-c{padding-top:22px}
.snap-c svg.ic{top:16px;right:14px}
.aa-article .takeaways{margin-top:calc(var(--tab-h) + 6px)}
.aa-article .takeaways h2{background:var(--aa-petrol);border-color:var(--aa-petrol);color:var(--aa-mist)}
.aa-article .takeaways h2 svg.ic{width:15px;height:15px}
.pn>a{padding-top:20px}
.pn>a.next small{left:auto;right:16px}
.pn>a:hover small{background:var(--aa-petrol);border-color:var(--aa-petrol);color:var(--aa-mist)}
.cov-card{padding-top:0}
.cov-card::before{content:"Coverage\00a0\00a0" counter(cov,decimal-leading-zero) " / 06";content:"Coverage\00a0\00a0" counter(cov,decimal-leading-zero) " / 06" / "";padding-left:36px;border-color:#B9CFCC}
.cov-card::after{display:none}
.cov-card .mi-ic{left:27px;top:calc(-1 * var(--tab-h) + 6px);z-index:4}
.cov-card .mi-ic svg.ic{width:16px;height:16px}
.cov-card:hover::before{background:var(--aa-petrol);border-color:var(--aa-petrol);color:var(--aa-mist)}
.choice{padding-top:24px}
.choice::before{padding-left:36px;color:var(--aa-petrol)}
.choice>svg.ic{left:27px;top:calc(-1 * var(--tab-h) + 6px);z-index:4;width:16px;height:16px}
a.blog-feature .aa-eyebrow{left:28px;background:var(--aa-petrol);border-color:var(--aa-petrol);color:var(--aa-mist)}
/* the legal meta line of the second design: no bar, a quiet ruled line */
.doc-card{padding-top:8px}
.doc-meta{margin:0 0 30px;padding:18px 0 14px;background:none;border-bottom:1px solid var(--aa-line-soft);border-radius:0}

/* tools: the inputs sheet carries a white tab into the head band, the result card a deep-petrol one */
.tool-panel,.result-panel{padding-top:clamp(22px,2.4vw,30px)}
.tool-panel>:is(h2,h3):first-child{background:#fff}
.result-panel>:is(h2,h3):first-child{background:var(--aa-deep);border-color:var(--aa-deep);color:var(--aa-mist)}
.result-panel{top:calc(var(--ip-stick,120px) + var(--tab-h))}
.tool-panel+.tool-panel{margin-top:calc(24px + var(--tab-h))}
/* post cards: from 576 px up the topic is a chip on the garage-door photo (no bar); the phones' compact rows had a
   strip, now a tab */
@media (max-width:575.98px){
  .sc-strip,body:not(.page-index) .info-card .card-label{max-width:calc(100% - 24px);left:12px;padding:0 10px;letter-spacing:.06em}
  .aa-card{overflow:visible;margin-top:var(--tab-h);height:calc(100% - var(--tab-h));padding-top:0}
  .aa-card::before{display:none}
  .aa-card .ac-chip{position:absolute;left:12px;right:auto;top:1px;z-index:3;transform:translateY(-100%);display:inline-flex;align-items:center;gap:8px;max-width:calc(100% - 24px);height:var(--tab-h);padding:0 10px;background:var(--aa-mist);border:1px solid #B9CFCC;border-bottom:0;border-radius:6px 6px 0 0;font:500 11.5px/1 var(--aa-mono);letter-spacing:.06em;color:var(--aa-petrol)}
  .aa-card .ac-chip svg.ic{width:14px;height:14px}
  .aa-card:hover .ac-chip{background:var(--aa-petrol);border-color:var(--aa-petrol);color:var(--aa-mist)}
  .sec.sky .aa-card .ac-chip{background:#fff}
}
/* tablets and phones: the photo cards under the page-head text keep room for their tab */
@media (max-width:991.98px){
  .aa-banner.has-photo:is(:has(+ .sec [data-post-grid]),.slim) .bn-photo{margin-top:calc(28px + var(--tab-h))}
}
@media (max-width:767.98px){
  .aa-banner .bn-photo,.page-head.has-photo .ph-photo{margin-top:calc(16px + var(--tab-h));padding-top:8px}
  .aa-banner.has-photo:is(:has(+ .sec [data-post-grid]),.slim) .bn-photo{margin-top:calc(16px + var(--tab-h))}
  .ph-photo::before,.bn-tag{padding:0 10px}
}
@media (max-width:575.98px){
  .page-head.has-photo:has(+ .section > .container > :is(.tool,.tool-panel):first-child) .ph-photo,
  .page-head.has-photo:has(+ .section > #cqTool) .ph-photo{margin-top:calc(14px + var(--tab-h));padding-top:8px}
  .page-head.has-photo:has(+ .section > .container > :is(.tool,.tool-panel):first-child) .ph-photo::before,
  .page-head.has-photo:has(+ .section > #cqTool) .ph-photo::before{height:var(--tab-h)}
}
/* cards standing on a mist section (first design .section-alt, second design .sec.sky): white tabs, as on the bento */
.section-alt .info-card .card-label,.sec.sky .info-card .card-label,.section-alt .aside-card:not(.dark)>h2,.sec.sky .aside-card:not(.dark)>h2,
.section-alt .library h2,.section-alt .snap-c small,.sec.sky .snap-c small,.section-alt .pn>a small,.sec.sky .pn>a small,
.section-alt .callout::before,.sec.sky .callout::before,.section-alt .aa-callout::before,.sec.sky .aa-callout::before,
.section-alt .plan:not(.popular)::before,.sec.sky .cov-card::before,.section-alt .choice::before,.sec.sky .choice::before{background:#fff}
body:not(.page-index) .section-alt .info-card:hover .card-label{background:var(--aa-petrol)}

/* =====================================================================================================================
   PHOTOS: no head cut off on any screen (photos + devices pass, 2026-10-15). Article photos come from the admin with an
   inline object-position of 50% 25% (top-weighted: the default for every new article); the rules below are per photo,
   keyed by its file name, and win over the inline value with !important. Each value keeps every head whole in every
   frame the photo is shown in (cards: phone row 3:2, tablet 16:10, mouse "door"; article hero 21:8 / 3:2).
   ===================================================================================================================== */
/* post cards (the article list, "More from ...", related sliders) */
.aa-card .ac-img img[src*="pexels-photo-6694558."]{object-position:75% 20%!important}
.aa-card .ac-img img[src*="pexels-photo-39506540."]{object-position:75% 25%!important}
.aa-card .ac-img img[src*="pexels-photo-8730964."]{object-position:60% 0%!important}
.aa-card .ac-img img[src*="pexels-photo-33605541."]{object-position:78% 25%!important}
.aa-card .ac-img img[src*="pexels-photo-5970300."]{object-position:90% 25%!important}
.aa-card .ac-img img[src*="pexels-photo-7006686."]{object-position:50% 0%!important}
.aa-card .ac-img img[src*="pexels-photo-6050147."]{object-position:82% 25%!important}
.aa-card .ac-img img[src*="pexels-photo-4345160."]{object-position:72% 6%!important}
.aa-card .ac-img img[src*="pexels-photo-15403161."]{object-position:49% 0%!important}
.aa-card .ac-img img[src*="pexels-photo-7688461."]{object-position:45% 0%!important}
.aa-card .ac-img img[src*="pexels-photo-8067939."]{object-position:0% 0%!important}
/* phones: the index row thumbnail shows the whole photo (3:2, as the photos are shot) instead of a square crop, so
   nobody at the side of a group photo is cut, today or in a future article */
@media (max-width:575.98px){
  .aa-card .ac-img img{aspect-ratio:3/2}
}
/* group photos (people spread across the whole width) and one close-up face in the mouse "door" card (a tall frame):
   the whole photo, standing on the title bar, on a mist dot-grid panel
   that carries the topic tab (the panel lifts with the photo) */
@media (min-width:576px) and (hover:hover) and (prefers-reduced-motion:no-preference){
  .aa-card .ac-img img:is([src*="pexels-photo-20752572."],[src*="pexels-photo-9301461."],[src*="pexels-photo-6340679."],[src*="pexels-photo-7876739."],[src*="pexels-photo-5324935."],[src*="pexels-photo-7876299."],[src*="pexels-photo-6172536."],[src*="pexels-photo-3285203."],[src*="pexels-photo-15403161."]){object-fit:contain;object-position:50% 100%!important;background:var(--aa-mist) var(--aa-dots)}
}
/* first-design article cards (Resource Library, topic pages): a top-weighted default for article photos, as above */
body:not(.page-index) .info-card .card-img img{object-position:50% 25%}
/* the featured article on /blog */
a.blog-feature .bf-img img[src*="pexels-photo-7129713."]{object-position:50% 3%!important}
/* the article hero (21:8 from 768 px, 3:2 below) */
.ph-lead img[src*="pexels-photo-30552490."]{object-position:50% 10%!important}
.ph-lead img:is([src*="pexels-photo-8067939."],[src*="pexels-photo-7129713."],[src*="pexels-photo-8730964."],[src*="pexels-photo-7006686."],[src*="pexels-photo-4345160."],[src*="pexels-photo-7688461."],[src*="pexels-photo-36712868."]){object-position:50% 0%!important}
.ph-lead img:is([src*="pexels-photo-6050147."],[src*="pexels-photo-39506540."]){object-position:50% 12%!important}
.ph-lead img[src*="pexels-photo-33605541."]{object-position:50% 10%!important}
.ph-lead img[src*="pexels-photo-15780885."]{object-position:50% 4%!important}
.ph-lead img[src*="pexels-photo-5970300."]{object-position:50% 29%!important}
.ph-lead img:is([src*="pexels-photo-6694558."],[src*="pexels-photo-6325979."]){object-position:50% 3%!important}
.ph-lead img:is([src*="pexels-photo-6077837."],[src*="pexels-photo-8388219."]){object-position:50% 8%!important}
/* heads too tall for the 21:8 strip: a taller hero on those articles (from 768 px; phones keep 3:2) */
@media (min-width:768px){
  .ph-lead img[src*="pexels-photo-6172536."]{aspect-ratio:2/1;object-position:50% 70%!important}
  .ph-lead img[src*="pexels-photo-8691822."]{aspect-ratio:2/1;object-position:50% 8%!important}
  .ph-lead img[src*="pexels-photo-3285203."]{aspect-ratio:2/1;object-position:50% 12%!important}
  .ph-lead img[src*="pexels-photo-15403161."]{aspect-ratio:16/9;object-position:50% 0%!important}
}
/* article figures whose photo is wider than 3:2: the frame follows the photo, so nobody at its sides is cut */
.art-fig .fig-img img:is([src*="pexels-photo-5716015."],[src*="pexels-photo-3183128."]){aspect-ratio:auto}
/* guide banners: the uninsured-motorist photo keeps the motorcyclist (right of the taxi) whole in the tall desktop frame */
.bn-photo>.bn-bg[src*="pexels-photo-20866950."]{object-position:80% 50%}

/* =====================================================================================================================
   TEXT THAT DID NOT FIT (photos + devices pass, 2026-10-15): labels and rows that were cut off or ran out of their box at
   some screen sizes. Wording unchanged; only wrapping, spacing and sizes.
   ===================================================================================================================== */
/* first-design article cards (Resource Library, topic pages): the "Topic · date" tab wraps onto a second line on cards
   too narrow for it and grows upwards; below 1400 px the cards keep room above them for a two-line tab */
body:not(.page-index) .card-grid .info-card .card-label{height:auto;min-height:var(--tab-h);padding-top:6px;padding-bottom:6px;white-space:normal;line-height:1.3!important;overflow:visible}
@media (max-width:1399.98px){
  body:not(.page-index) .card-grid>.info-card:has(.card-img):not(:first-child:is(.blog-feature *)){margin-top:calc(var(--tab-h) + 16px);height:calc(100% - var(--tab-h) - 16px)}
}
/* guides' fact cards on small laptops (two narrow cards in the right half): the tab label keeps to one line */
@media (min-width:992px) and (max-width:1199.98px){
  .snap-c small{left:10px;max-width:calc(100% - 20px);padding:0 9px;letter-spacing:.03em}
  /* related guide tiles: the phones' smaller thumbnail, so "Comprehensive" fits beside it */
  .rel-tile{grid-template-columns:80px minmax(0,1fr) 20px;gap:12px}
  .rel-tile .rt-img img{width:80px;height:60px}
}
/* small phones: the legal pages' date tab, the tool panels' tabs and the /blog "Latest" tab keep to one line */
@media (max-width:374.98px){
  .legal>.updated:first-child,.tool-panel>:is(h2,h3):first-child,.result-panel>:is(h2,h3):first-child,a.blog-feature .aa-eyebrow{left:12px;max-width:calc(100% - 24px);padding:0 8px;letter-spacing:.01em}
}
/* the worksheet's result rows on phones: the status moves under the coverage name when both do not fit on one line */
@media (max-width:575.98px){
  .result-rows div{flex-wrap:wrap;row-gap:2px}
  .result-rows dt{min-width:auto}
  .result-rows dd{margin-left:auto}
}
/* old posts on phones: the current crumb (it repeats the title) wraps instead of ending in an ellipsis, so no words
   are cut off */
@media (max-width:575.98px){
  .page-head:has(.meta) .breadcrumb-item.active{max-width:none;overflow:visible;white-space:normal;text-overflow:clip}
}
/* /blog topics on phones and small tablets: the row is a sideways scroller that runs to the screen edge; it now stops 1 px
   short of it, so the topics beyond the edge read as scrollable content (to people and to the layout checks) */
@media (max-width:767.98px){
  .cat-tabs{width:calc(100% + 15px);margin-right:-15px}
}
/* the worksheet's "why each coverage" cards: a long status badge ("Required by lender") moves under the coverage name when
   both do not fit on one line (on 320 px phones it ran past the card and widened the page to 332 px) */
#w-list .d-flex.justify-content-between{flex-wrap:wrap;row-gap:6px}

/* =====================================================================================================================
   POLISH (photos + devices pass, look step, 2026-10-15): the page reviews' must items and the quick should items, at
   every device size. Wording unchanged; only layout, spacing and wrapping.
   ===================================================================================================================== */
/* a two-part button whose label wraps keeps its lines together (the 52 px line-height set them 52 px apart); the arrow
   cell still fills the whole height */
.btn-brand:has(>svg:last-child){align-items:center;line-height:1.2}
/* the closing panel: its edges follow the page column (as the home's tool panel does) instead of standing 24-70 px
   wider; on small phones its button label keeps to one line */
@media (min-width:576px){.cta-band .container{max-width:calc(540px - var(--bs-gutter-x))}}
@media (min-width:768px){.cta-band .container{max-width:calc(720px - var(--bs-gutter-x))}}
@media (min-width:992px){.cta-band .container{max-width:calc(960px - var(--bs-gutter-x))}}
@media (min-width:1200px){.cta-band .container{max-width:calc(1140px - var(--bs-gutter-x))}}
@media (min-width:1400px){.cta-band .container{max-width:calc(1320px - var(--bs-gutter-x))}}
@media (max-width:374.98px){
  .cta-band .container{padding:24px 16px 20px}
  .cta-band .btn-brand:has(>svg:last-child){--bs-btn-padding-x:1rem}
}
/* tool pages below 992 px: the result card anchors its own index tab again (the tab was drawn over the inputs sheet's
   tab), and the stacked cards keep room for it */
@media (max-width:991.98px){
  .result-panel{position:relative;top:auto}
  .tool{row-gap:calc(24px + var(--tab-h))}
}
/* old posts on tablets (768-991 px): the hero photo stays in the article head's single column (it opened ten extra
   columns and squeezed the crumbs and the title into a 240 px strip) */
@media (max-width:991.98px){
  .page-head.has-photo:has(.meta) .ph-photo{grid-column:1/-1}
}
/* guides' fact cards and the Note callouts: the corner icon keeps its own room beside the first line of text (the
   text ran under it) */
.snap-c>b::before{content:"";float:right;width:24px;height:14px}
.aa-callout>svg.ic+p::before{content:"";float:right;width:22px;height:12px}

/* home: the bento on phones. The index tabs fit their tile (they ended in "MONEY-SAVI..."), the tool tile's arrow cell
   is never squeezed, and under 360 px the tiles stand in one column (two columns left ~105 px of text) */
@media (max-width:575.98px){
  .hm-bento .t-tool .card-more>i{flex:none}
  .hm-bento .t-tool .card-more>span{min-width:0;padding-block:6px;white-space:normal;line-height:1.2}
}
@media (max-width:399.98px){
  .hm-bento .sc-strip{left:8px;max-width:calc(100% - 16px);padding:0 8px;letter-spacing:.03em}
  .hm-bento .t-tool .card-more>span{padding-inline:7px;font-size:13px}
  .hm-bento .t-tool .card-more>i{width:32px}
}
@media (max-width:359.98px){
  .hm-bento{grid-template-columns:minmax(0,1fr)}
  .hm-bento>.info-card{grid-column:1;grid-row:auto}
  .hm-bento :is(.t-lower,.t-compare,.t-discounts,.t-senior,.t-tool) .card-img{flex:none;height:150px}
}
/* home: the notebook page over the house photo gives its text more line length on small phones */
@media (max-width:374.98px){
  .hm-page{margin-inline:6px}
  .hm-page-b{padding-inline:16px}
}
/* home, tablets: the three hero cards use the page column (they stopped at 560 px, leaving an empty band) */
@media (min-width:576px) and (max-width:991.98px){.hm-cluster{max-width:none}}
/* home, "Newest on the blog" with a mouse: the three photos keep one height, so the petrol title bars line up whatever
   the length of the topic and the title (a very long title still shrinks its own photo rather than being cut) */
@media (min-width:992px) and (hover:hover) and (prefers-reduced-motion:no-preference){
  .hm-lift-door img{flex:0 1 300px}
  .hm-lift-bar{flex:1 0 auto}
}

/* footer, 768-1199 px: Contact Info takes the two columns beside Useful Links (the third column stood empty) */
@media (min-width:768px) and (max-width:1199.98px){
  .ft-col.ft-contact{grid-column:span 2}
  .ft-contact .f-contact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px;align-items:start}
  .ft-contact .f-contact li:nth-child(2){padding-top:0}
}
/* phones: links big enough to tap (footer lists ~21 px, bottom line ~18 px, crumbs ~20 px tall) */
@media (max-width:767.98px){
  .ft-links{gap:0}
  .ft-links a{display:inline-block;padding:10px 0}
  .f-bl{gap:0 18px}
  .aa-ft .f-bl a{display:inline-block;padding:11px 0}
  .breadcrumb-item a,.aa-crumbs a{display:inline-block;padding-block:10px;margin-block:-10px}
}

/* /faq: the index tabs of "Question not answered here?" and of the side cards on tablets and phones keep clear of the
   block above them; on tablets the reading column uses the whole width like the side cards */
.page-faq .aside-card.faq-ask{margin-top:calc(44px + var(--tab-h))}
@media (max-width:991.98px){
  .page-faq .guide-layout>.guide-aside>.aside-card:not(.faq-toc){margin-top:calc(24px + var(--tab-h))}
  .page-faq .guide-layout>:first-child{max-width:none}
}
/* /about: the three mission columns stack on tablets (2-3 words a line at 768 px); the contact sheet, its link and "How
   We Make Money" stand on the page's left edge like every other section */
@media (min-width:768px) and (max-width:991.98px){
  .features{grid-template-columns:minmax(0,1fr)}
  .feature,.feature + .feature{padding:24px 0 26px;border-left:0}
  .feature + .feature{border-top:1px solid var(--aa-line-soft)}
  .feature::before{top:26px;right:0}
}
.page-about .contact-cards{margin-inline:0}
.page-about .contact-cards + p{text-align:left!important}
.page-about .article-wrap{margin-left:0}
/* How it works and Get started: the choice cards use the page column on tablets; on small phones the step rows read in
   one column (the step label above the title) */
@media (max-width:991.98px){.choices{max-width:none}}
@media (max-width:399.98px){
  .hw-row{grid-template-columns:minmax(0,1fr)}
  .hw-txt>.aa-eyebrow{grid-column:1;grid-row:1;padding-top:0;margin-bottom:10px}
  .hw-txt>h2{grid-column:1;grid-row:2}
  .hw-txt>p{grid-column:1;grid-row:3}
  .hw-txt>.hw-points{grid-column:1;grid-row:4}
  .hw-ph{grid-column:1;grid-row:5}
}
/* the request form: the head note breaks evenly, and in a row with an "optional" label every label of the row keeps two
   lines of room, so the fill-in lines stay level when one label wraps */
.af-head .aa-eyebrow>span{text-wrap:balance}
@media (min-width:576px){
  .af-sec .row:has(.form-label>.opt)>[class*="col-"]>.form-label{display:flex;flex-wrap:wrap;align-items:baseline;align-content:flex-end;min-height:calc(2.6em + 2px)}
}
/* /coverage, 576-991 px: the five columns of "Who each coverage protects" fit the page column (the last one was hidden
   behind the scroll fade) */
@media (min-width:576px) and (max-width:991.98px){
  table.cmp{min-width:0}
  .cmp thead th,.cmp tbody th,.cmp tbody td{padding:12px 10px}
  .cmp-wrap{-webkit-mask-image:none;mask-image:none}
}
/* /blog on phones: a long topic in the featured article's tab wraps onto a second line (growing up over the photo)
   instead of being cut */
@media (max-width:575.98px){
  a.blog-feature .aa-eyebrow{height:auto;min-height:var(--tab-h);padding-block:5px;white-space:normal;line-height:1.3!important}
}

/* =====================================================================================================================
   POLISH 2 (photos + devices pass, 2026-10-15): the page reviews' items left after the first polish. Wording unchanged;
   only layout, spacing and wrapping.
   ===================================================================================================================== */
/* /do-not-sell on phones: the request form uses the sheet's width (two paddings left ~198 px fields and a three-line
   button) and its button takes the full row like the other forms' buttons */
@media (max-width:575.98px){
  .doc-card .aa-cform{margin-inline:calc(-1 * var(--dc-pad) + 8px);padding:20px 14px}
  .aa-cform .btn.aa-btn{display:flex;width:100%}
  .aa-cform .btn.aa-btn>span{padding-inline:16px}
}
/* the request form's fields in one row share one fill-in line when a label wraps ("Email address you used with
   AutoAssures" took two lines beside "Full name") */
@media (min-width:576px){
  .aa-cform .row>.col-sm-6{display:flex;flex-direction:column}
  .aa-cform .row>.col-sm-6>.form-label{margin-top:auto}
}
/* "optional" after a label: the space before it separates it, so a wrapped "optional" starts at the label's edge
   (its 6 px margin indented the second line) */
.af-sec .form-label .opt,.aa-cform .form-label .opt{margin-left:0}
@media (min-width:576px){
  .af-sec .row:has(.form-label>.opt)>[class*="col-"]>.form-label{column-gap:6px}
}
/* the request form's choice chips: a label that wraps keeps room above and below (it touched the chip's border), and on
   small phones the two "insured right now" answers stand one per row ("Yes, insured now" broke into three lines) */
.chip>span{padding:8px 18px 8px 14px;line-height:1.25}
@media (max-width:359.98px){.chip.sm{flex-basis:100%}}
/* the 404 page: the photo frame's tab reads "Page not found  404" like the other pages' tabs */
.page-not-found{--ph-n:"\00a0\00a0 404"}
/* old posts: the crumbs run as one line of text that wraps where it must (the article title dropped to a line of its
   own that started with the "/" divider) */
.page-head:has(.meta) .breadcrumb{display:block}
.page-head:has(.meta) .breadcrumb-item{display:inline}
.page-head:has(.meta) .breadcrumb-item+.breadcrumb-item::before{float:none;display:inline}
.page-head:has(.meta) .breadcrumb-item.active a{display:inline;padding-block:0;margin-block:0}
/* Start Your Coverage on tablets (576-991 px): the three plans use the page column (they stopped at 560 px, leaving an
   empty strip) with name, line and price on the left and the list and button on the right */
@media (min-width:576px) and (max-width:991.98px){
  .plans{max-width:none}
  .plan{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;row-gap:14px;align-content:start}
  .plan>h2,.plan>.for,.plan>.price{grid-column:1}
  .plan>ul{grid-column:2;grid-row:1 / span 3;margin:0}
  .plan>.btn{grid-column:2;grid-row:4}
}
/* the "Plans are not insurance." note keeps a readable line length on wide screens (about 170 characters a line) */
@media (min-width:992px){.plans + .note{max-width:75ch}}
/* first-design legal pages (privacy, refund, disclaimer): the crumbs and the title stand on the sheet's left edge */
@media (min-width:992px){
  .page-head:not(.has-photo):has(+ .section .legal) .ph-text{justify-self:center;width:100%;max-width:880px}
}
/* second-design documents on short screens: the sticky contents list shows every entry without scrolling inside itself
   (on a 1280 x 720 screen the last entries were hidden) */
@media (min-width:992px) and (max-height:820px){
  .doc-wrap .aa-toc ol{padding-block:4px 6px}
  .doc-wrap .aa-toc li a{padding-block:5px;font-size:14px;line-height:1.3}
}
/* the documents' meta line breaks evenly (the year stood alone on the second line) */
.doc-meta>span{text-wrap:balance}
/* the mist strip under the header, 1200-1399 px: the phone line joins the first row, so the strip takes two rows
   instead of three */
@media (min-width:1200px) and (max-width:1399.98px){
  .as-tel{order:1}
  .as-notice{order:2}
  .as-line{order:3}
}
/* drop-downs keep the text clear of the arrow (the site's padding of .85rem let a long choice run under it, e.g. "Yes,
   low or moderate deductible" in the worksheet on phones); the forms with an underline style keep their own padding */
.form-select{padding-right:2.5rem}
/* post cards from 576 px (blog list, "More from ...", related sliders): the topic chip sits on a dot-grid strip above
   the photo instead of on it (on the photo it covered the top of people's heads and hair, e.g. "Rules of the road" on
   the No-Fault article's photo); the photo keeps its own frame below the strip */
@media (min-width:576px){
  .aa-card .ac-img img{box-sizing:content-box;padding-top:40px;background:var(--aa-mist) var(--aa-dots)}
  .aa-card .ac-chip{background:#fff;box-shadow:inset 0 0 0 1px #B9CFCC}
}
@media (min-width:576px) and (hover:hover) and (prefers-reduced-motion:no-preference){
  .aa-card .ac-img img{box-sizing:border-box}
}

/* =====================================================================================================================
   POLISH 3 (photos + devices pass, 2026-10-16): admin photos do not zoom on hover where the zoom trimmed a head. Post
   cards standing open (screens under 576 px, touch screens, a mouse with reduced motion) zoomed the photo 1.04x about
   its centre and trimmed heads at the photo's edges (up to 39 % of a head at a side edge, 7 % at the top); the /blog
   featured photo zoomed 1.03x and trimmed the top of the hair. The resting crops are unchanged; the mouse's garage-door
   lift and the design photos' zoom (coverage cards, home bento: no head trimmed) stay as they are.
   ===================================================================================================================== */
@media (max-width:575.98px),(hover:none),(prefers-reduced-motion:reduce){
  .aa-card:hover .ac-img img{transform:none}
}
a.blog-feature:hover .bf-img img{transform:none}

/* =====================================================================================================================
   FRESH-EYES FIXES (final fix, 2026-10-16): the findings of the independent re-check (a second head map drawn without
   the first, three fresh page reviews at 7 sizes). Wording unchanged; only crops, layout, spacing and wrapping. The few
   markup changes are layout only: <span class="nw"> around a date or a code, and inner spans in two notes.
   ===================================================================================================================== */
/* a date, a code such as "SR-22" or a part of a note keeps to one line */
.nw{white-space:nowrap}

/* ---- photos ---- */
/* post cards: the man reading papers (his hair starts 2 % below the photo's top) keeps the photo's top edge in every
   card frame (the standing tablet cards showed it from 1.5 %) */
.aa-card .ac-img img[src*="pexels-photo-7129713."]{object-position:50% 0%!important}
/* the article hero of college-students-car-insurance: the man in the car (hair at 13 %, chin at 66 % of the photo) did not
   fit the 21:8 strip with room to spare; from 768 px it gets the taller 2:1 hero, like the other heads too tall for it */
@media (min-width:768px){
  .ph-lead img[src*="pexels-photo-5970300."]{aspect-ratio:2/1;object-position:50% 20%!important}
}
/* leasing-vs-financing-insurance: the photo itself shows a suit from the neck down (no head to keep; replacing it is the
   owner's decision). Where a frame crops it, the crop leaves out the collar and throat: the hero shows the hands and
   the papers */
.aa-card .ac-img img[src*="pexels-photo-4963426."]{object-position:50% 100%!important}
@media (min-width:768px){.ph-lead img[src*="pexels-photo-4963426."]{object-position:50% 70%!important}}
/* a hotlinked photo that fails to load leaves the mist dot grid, not the browser's broken-image text */
.ph-lead img,.art-fig .fig-img img,a.blog-feature .bf-img img,.bn-photo>.bn-bg,.bn-photo .arch img{background:var(--aa-mist) var(--aa-dots)}
.ph-lead img,.art-fig .fig-img img,.aa-card .ac-img img,a.blog-feature .bf-img img,.bn-photo>.bn-bg,.bn-photo .arch img{color:transparent}

/* ---- home ---- */
/* tablets and phones: the stacked hero cards keep room for each card's index tab (the lower tabs stuck 11 px into the
   card above) */
@media (max-width:991.98px){.hm-cluster{row-gap:calc(16px + var(--tab-h))}}
/* small phones: the tool panel's "Start your coverage" keeps to one line beside its arrow cell */
@media (max-width:374.98px){.hm-panel .aa-btn>span{padding-inline:14px;font-size:16px}}
/* "Newest on the blog" on tablets (576-991 px): two cards side by side and the third across the row (three full-width
   cards stood one under the other, about 1,500 px of near-identical blocks) */
@media (min-width:576px) and (max-width:991.98px){
  .hm-lift-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-lift:nth-child(3):last-child{grid-column:1/-1}
}
/* ... standing cards (touch screens, reduced motion): each photo shows whole (3:2, as shot) and the title bars of the two
   cards in a row stand level (the rows of the grid are shared: photo, bar, excerpt); on the third card the photo stands
   beside the petrol title bar and the excerpt runs under both */
@media (min-width:576px) and (max-width:991.98px) and (hover:none),(min-width:576px) and (max-width:991.98px) and (prefers-reduced-motion:reduce){
  .hm-lift-grid{row-gap:0}
  .hm-lift-door img{height:auto;aspect-ratio:3/2}
  .hm-lift:not(:nth-child(3):last-child){display:grid;grid-row:span 3;grid-template-rows:subgrid}
  .hm-lift:not(:nth-child(3):last-child) .hm-lift-door{display:contents}
  .hm-lift:nth-child(3):last-child{margin-top:24px}
  .hm-lift:nth-child(3):last-child .hm-lift-door{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hm-lift:nth-child(3):last-child .hm-lift-bar{align-items:center}
}

/* ---- post cards and first-design article cards on small phones (under 400 px) ---- */
/* the index row keeps its thumbnail at the top left; the title and the excerpt run on under it at the card's full width
   (a 150 px text column gave 4-line titles and 8-line excerpts) */
@media (max-width:399.98px){
  .aa-card{display:flow-root}
  .aa-card .ac-img{float:left;width:96px;margin:12px 12px 6px 12px}
  .aa-card .ac-body{display:block;padding:12px 14px 14px}
  .aa-card .ac-body>*+*{margin-top:6px}
  .aa-card .ac-meta{flex-direction:column;gap:0}
  .aa-card .ac-meta>*+*::before{display:none}
  .aa-card .ac-more{display:flex;clear:both;padding-top:4px}
  body:not(.page-index) .card-grid .info-card:has(.card-img){display:flow-root}
  body:not(.page-index) .card-grid .info-card:has(.card-img) .card-img{float:left;width:88px;margin:12px 12px 6px 12px}
  body:not(.page-index) .card-grid .info-card:has(.card-img) h3{margin:12px 14px 6px}
  body:not(.page-index) .card-grid .info-card:has(.card-img) p{margin:0 14px}
  body:not(.page-index) .card-grid .info-card:has(.card-img) .card-more{display:flex;clear:both;margin:8px 14px 14px;padding-top:4px}
}
/* first-design article cards, 576-1399 px: the "Topic · date" tab breaks only after the "·" (the date keeps to one line)
   and every tab of a card grid is two lines tall with its text at the foot, so the tabs of a row stand level */
@media (min-width:576px) and (max-width:1399.98px){
  body:not(.page-index) .card-grid>.info-card:has(.card-img):not(:first-child:is(.blog-feature *)) .card-label{min-height:calc(2 * 1.3em + 12px);align-items:flex-end}
}
/* first-design card grids of three on tablets (576-991 px, two to a row): a lone last card takes the whole row, its
   photo beside the title and text ("Next on the blog" on the old posts) */
@media (min-width:576px) and (max-width:991.98px){
  body:not(.page-index) .card-grid.cols-3:not(.blog-feature *)>.info-card:has(.card-img):last-child:nth-child(odd){grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:8px;align-items:start}
  body:not(.page-index) .card-grid.cols-3:not(.blog-feature *)>.info-card:has(.card-img):last-child:nth-child(odd) .card-img{grid-column:1;grid-row:1/4;margin:10px 0 10px 10px}
  body:not(.page-index) .card-grid.cols-3:not(.blog-feature *)>.info-card:has(.card-img):last-child:nth-child(odd) h3{grid-column:2;grid-row:1}
  body:not(.page-index) .card-grid.cols-3:not(.blog-feature *)>.info-card:has(.card-img):last-child:nth-child(odd) p{grid-column:2;grid-row:2}
  body:not(.page-index) .card-grid.cols-3:not(.blog-feature *)>.info-card:has(.card-img):last-child:nth-child(odd) .card-more{grid-column:2;grid-row:3;align-self:end}
}

/* ---- guides, the Learn center, the request form ---- */
/* phones: the banner's second action ("How it works", the FAQ link) and "Send us a message" are tap-sized (24-26 px) */
@media (max-width:767.98px){
  .bn-actions .btn.aa-btn:is(.ghost-light,.ghost),.bn-actions .btn.aa-btn:is(.ghost-light,.ghost):hover,.link-more{min-height:44px;align-items:center}
}
/* related guide tiles on tablets (768-991 px, two to a row): a lone last tile takes the whole row */
@media (min-width:576px) and (max-width:991.98px){.rel-tiles>.rel-tile:last-child:nth-child(odd){grid-column:1/-1}}
/* /blog on phones: the featured article starts 32 px under the banner's clipped print (the two photo frames almost
   touched) */
@media (max-width:767.98px){a.blog-feature{margin-top:-40px}}
/* /blog on tablets (768-991 px, two cards to a row): a lone last card of the page (nine to a page, or a topic with an odd
   count) stands centred with a mouse; standing cards (touch, reduced motion) take the whole row, photo beside the text */
@media (min-width:768px) and (max-width:991.98px){
  [data-post-grid]>[data-post]:nth-child(odd of [data-post]:not([style*="none"])):nth-last-child(1 of [data-post]:not([style*="none"])){margin-inline:auto}
}
@media (min-width:768px) and (max-width:991.98px) and (hover:none),(min-width:768px) and (max-width:991.98px) and (prefers-reduced-motion:reduce){
  [data-post-grid]>[data-post]:nth-child(odd of [data-post]:not([style*="none"])):nth-last-child(1 of [data-post]:not([style*="none"])){width:100%}
  [data-post-grid]>[data-post]:nth-child(odd of [data-post]:not([style*="none"])):nth-last-child(1 of [data-post]:not([style*="none"]))>.aa-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
}
/* /blog and Get started on tablets (768-991 px): the banner's photo card uses the whole page column, the road photo (no
   people) in a wide 21:9 crop (the card filled 7 of 12 columns beside an empty dot grid) */
@media (min-width:768px) and (max-width:991.98px){
  .aa-banner.has-photo:is(:has(+ .sec [data-post-grid]),.slim) .bn-photo{grid-column:1/-1}
  .aa-banner.has-photo:is(:has(+ .sec [data-post-grid]),.slim) .bn-photo>.bn-bg{aspect-ratio:21/9}
  /* the larger clipped print keeps 24 px clear of the featured article or the form below */
  .aa-banner.has-photo:is(:has(+ .sec [data-post-grid]),.slim) .bn-grid{padding-bottom:136px}
}
/* ... and from 768 px the clipped print in those banners is 128-200 px wide (83-124 px at 1024-2560: the face read as a
   smudge); the print is 3:2 like its photo, so the photo shows whole */
@media (min-width:768px){
  .aa-banner.has-photo:is(:has(+ .sec [data-post-grid]),.slim) .bn-photo>.bn-bg + .arch{width:clamp(128px,40%,200px)}
}
/* Get started below 992 px: the summary card follows the form about 45 px lower, not 100 */
@media (max-width:991.98px){
  .aa-banner.slim + .form-sec .af-side{padding-top:0}
  .aa-banner.slim + .form-sec .af-grid{row-gap:20px}
}
/* the request form: the head note breaks between its three parts (layout spans), the step headings break evenly, and
   on phones under 420 px the two "insured right now" answers stand one per row ("Yes, insured / now") */
.af-sec legend{text-wrap:balance}
@media (max-width:419.98px){.chip.sm{flex-basis:100%}}
/* tool explainers on phones: the white sheet and its Note give the text more width (240 px of text, a 190 px formula) */
@media (max-width:575.98px){
  .section-alt>.container>.article-wrap.prose{padding:24px 16px}
  .section-alt>.container>.article-wrap.prose .callout{padding-inline:16px}
}

/* ---- first-design pages ---- */
/* tips, tools and company pages on phones: the "/" divider ends the line before it instead of opening the next one, so a
   long trail that wraps no longer starts its second line with an indented "/" (the old posts' crumbs run as text, above) */
@media (max-width:575.98px){
  .page-head:not(:has(.meta)) .breadcrumb-item+.breadcrumb-item{padding-left:0}
  .page-head:not(:has(.meta)) .breadcrumb-item+.breadcrumb-item::before{content:none}
  .page-head:not(:has(.meta)) .breadcrumb-item:not(:last-child)::after{content:var(--bs-breadcrumb-divider,"/");padding:0 var(--bs-breadcrumb-item-padding-x);color:var(--bs-breadcrumb-divider-color)}
}
/* /faq: "Question not answered here?" keeps its 26 px top padding (the index-tab rule had set 6 px under the petrol rule) */
.page-faq .aside-card.faq-ask{padding-top:26px}
/* /resources from 992 px: the head photo drops beside the whole intro (the second paragraph ran on under the photo and
   left the left 55 % of the page empty) */
@media (min-width:992px){.page-resources{--ph-over:clamp(380px,32vw + 60px,480px)}}
/* Contact and Start Your Coverage: the FAQ block stands on the page's left edge like every other block (it was centred
   in an 820 px column, 45-200 px right of the rest) */
.section>.container:has(> .center-head + .faq-list)>.center-head{margin:0 0 28px}
.section>.container:has(> .center-head + .faq-list)>.faq-list{margin:0}
/* Start Your Coverage on tablets (576-991 px): every plan's list keeps its 10 px rhythm (it stretched to the card's
   height: 33-48 px between rows) */
@media (min-width:576px) and (max-width:991.98px){.plan>ul{align-content:start}}
/* the 404 page, 576-1199 px: the three ways back stand as one even column (they wrapped two and one); its lede breaks
   evenly ("road." stood alone) */
@media (min-width:576px) and (max-width:1199.98px){
  .page-not-found .hero-actions{display:grid;grid-template-columns:minmax(0,340px);gap:12px}
  .page-not-found .hero-actions .btn{min-width:0;width:100%}
}
.page-not-found .page-head .lede{text-wrap:balance}
/* ... and on tablets (768-991 px) the road photo (no people) stands beside the text as on desktop (it was hidden below
   992 px, so the right half of the page stood empty) */
@media (min-width:768px) and (max-width:991.98px){
  .page-not-found .page-head.has-photo .container{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  .page-not-found .page-head.has-photo .ph-text{grid-column:1/8}
  .page-not-found .page-head.has-photo .ph-photo{display:flex;grid-column:8/13;grid-row:1;align-self:start;margin:0;box-shadow:var(--aa-drop)}
  .page-not-found .page-head.has-photo .ph-photo>img{flex:none;min-height:0;aspect-ratio:4/3;object-position:50% 60%}
}

/* ---- legal pages and documents ---- */
/* first-design legal sheets (privacy, refund, disclaimer): the sheet follows its 68-character reading measure (780 px),
   so the text no longer sits off-centre with an empty band on its right; the crumbs and the title follow the sheet */
.legal{max-width:780px}
@media (min-width:992px){.page-head:not(.has-photo):has(+ .section .legal) .ph-text{max-width:780px}}
/* second-design documents (terms, disclosures, accessibility, do not sell) from 1400 px: the sheet column stops at
   780 px, the contents card keeps the right edge (the 68-character text left ~190 px empty on the sheet's right) */
@media (min-width:1400px){.doc-wrap{grid-template-columns:minmax(0,780px) 300px;justify-content:space-between}}
/* small phones: the legal sheets and documents give their text 8 px more on each side (28-30 characters a line) */
@media (max-width:399.98px){.legal{--lg-pad:16px}.doc-card{--dc-pad:16px}}
/* phones: the e-mail link in the documents' meta line is tap-sized */
@media (max-width:767.98px){.doc-meta a{display:inline-block;padding-block:10px;margin-block:-10px}}
/* /do-not-sell on small phones: "Submit Privacy Request" keeps to one line in its two-part button */
@media (max-width:374.98px){
  .doc-card .aa-cform{padding-inline:10px}
  .aa-cform .btn.aa-btn>span{padding-inline:14px 8px;font-size:16px}
  .aa-cform .btn.aa-btn>i{width:44px}
}

/* ---- footer ---- */
/* 768-1199 px: the four link columns share the first row and Contact Info runs under them as three columns (Call, Email,
   Mail), so no empty block stands beside "Legal" */
@media (min-width:768px) and (max-width:1199.98px){
  .ft-cols{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:28px}
  .ft-col.ft-contact{grid-column:1/-1}
  .ft-contact .f-contact{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ft-contact .f-contact li,.ft-contact .f-contact li:nth-child(2){padding:0;border-bottom:0}
}
/* touch tablets up to 1199 px: the footer links and the bottom line get the phones' tap padding (18-22 px tall before) */
@media (max-width:1199.98px) and (pointer:coarse){
  .ft-links{gap:0}
  .ft-links a{display:inline-block;padding:10px 0}
  .f-bl{gap:0 18px}
  .aa-ft .f-bl a{display:inline-block;padding:11px 0}
}
/* phones: in the two-column footer the second headings of a column pair stand level ("Learn" beside "Legal"; the lists
   above them differ in length) */
@media (max-width:767.98px){
  .ft-cols{row-gap:0}
  .ft-col:nth-child(-n+2){margin-bottom:36px}
  .ft-col:nth-child(3),.ft-col:nth-child(4){display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start}
  .ft-col:nth-child(3)>*,.ft-col:nth-child(4)>*{align-self:start}
  .ft-col.ft-contact{margin-top:36px}
}
/* the ZIP note under "Get Started" breaks between its parts (layout spans) and evenly */
.pf-form small{text-wrap:balance}

/* ---- very wide screens ---- */
/* 2200 px and up: the whole layout scales up by a quarter (the 2048 px layout, magnified), so the 1320 px column and its
   17.5 px text fill about two thirds of a 2560 px screen instead of half; the design and every crop stay as at 1920 */
@media (min-width:2200px){html{zoom:1.25}}

/* ---- FAQ lists (continuation of the final fix, 2026-10-16) ---- */
/* the list no longer clips its answers: its rounded corners come from the first and last items instead (same look).
   A closed answer keeps the size it had before a window resize across the 2200 px step (zoom) until it is opened, and
   the clipping list made that hidden text count as "cut off" at 1920 px. flow-root keeps the list's own block context. */
.faq-list{overflow:visible;display:flow-root}
.faq-list>.faq-item:first-child>summary{border-top-left-radius:9px;border-top-right-radius:9px}
.faq-list>.faq-item:last-child:not([open])>summary{border-bottom-left-radius:9px;border-bottom-right-radius:9px}
.faq-list>.faq-item:last-child>.faq-a{border-bottom-left-radius:9px;border-bottom-right-radius:9px}

/* ---- topic pages (fix round, 2026-10-16) ---- */
/* /blog?category=rules: the two women at a desk (driving-across-borders) in the three-to-a-row door card at 992-1199 px
   (frame 286 x 302 px, 63 % of the photo's width): centred, the frame edge touched the back of the left woman's hair.
   43 % keeps both heads whole with room on each side in every card frame (both head maps: 38-49 %) */
.aa-card .ac-img img[src*="pexels-photo-7596908."]{object-position:43% 25%!important}

/* ==== extra look 1200/1536 (2026-10-16) ====
   The 404 page, 1200-1399 px (1140 px container): the three ways back (647 px) filled a row whose limit ran 7 columns
   AND the gutter before the road photo, so "Tools & resources" ended 4 px from the photo card, just under its corner.
   From 1200 px the row keeps to the text column (7 columns, 6 gutters); at 1200-1399 px the buttons' label parts get
   even 15 px insides (16.8-22 px before the text, 21.6 px after it) so the row (618 px) fits that column and ends a
   gutter-plus (33 px) before the card. Same two-part buttons: 52 px tall, square arrow cell, 17 px label. */
@media (min-width:1200px){.page-not-found .hero-actions{max-width:calc((100% * 7 - 120px) / 12)}}
@media (min-width:1200px) and (max-width:1399.98px){
  .page-not-found .hero-actions .btn{--bs-btn-padding-x:.95rem}
  .page-not-found .hero-actions .btn:has(>svg:last-child)>svg:last-child{margin-left:.35rem}
}
/* a phone number keeps to one line, like the codes and dates (".nw" above): /about "How We Make Money", /contact and
   /start-your-coverage split it after the hyphen ("(877) 252-" / "7926") or after the area code at most widths, and
   /accessibility after "(877)"; the plain numbers there carry <span class="nw"> (layout only, wording unchanged), and a
   phone link inside running text (/faq at 390 px, /privacy-policy at 414-430 px) does the same here */
p a[href^="tel:"]{white-space:nowrap}