/* =====================================================================
   Sidesuites: the guides (the Florida guide, ADU cost / financing / laws /
   rental income, the city pages, FAQ and resources). v5.

   Load order: /css/site.css first (tokens, type, the label style, links,
   buttons, logo, nav, footer, focus, dark mode, .on-walnut), then this
   file. This file only dresses the content, with site.css's tokens.

   Each guide is a page from the same mid-century monograph as the home:
   - The title block: on the white ground, the label (.eyebrow: the price note's type, sentence case) over
     a Newsreader h1 on columns 1-7, the lede and the two buttons from
     column 8 (the home's statement split), closed by a hairline. Two pillar
     guides carry one of the owner's photographs in a 24px frame under it.
   - Facts: a schedule on hairlines (label, the figure in Newsreader, a line),
     as the home's facts under its photograph.
   - Sections on the 12-column grid: the label and h2 on columns 1-4 (they
     stay in view while the body is read), the body from column 6 (the home's
     FAQ split). A section that holds a card row or a wide table stacks: the
     head above, the body across all 12 columns.
   - Grounds: white, and the concrete band (.section-alt-wrap). Panels are
     concrete on white and white on concrete (--panel); a fill or a hairline,
     never both.
   - The closing card is walnut (.on-walnut): the offer and the call to act,
     as on the home, with the owner's orange circle out of the bottom-left
     corner and the yellow quarter-circle in the top-right corner.
   - Clickable tiles (cards, related tiles, FAQ rows) act like buttons: the
     fill shifts on hover, a press scales to .97, nothing lifts. Words lift
     2px and change colour (site.css). Nothing is ever underlined.
   - The door's yellow stays the one accent: the primary button only.

   Markup the pages share is documented next to each block.
   ===================================================================== */

:root{
  --panel:var(--paper-2);   /* a panel on the white ground: concrete */
  --ground:var(--paper);    /* the ground under a block (the wide tables' scroll covers match it) */
  --g-gap:24px;             /* the grid gutter: 24px, 12px on phones */
}
@media (max-width:639.98px){:root{--g-gap:12px}}
/* the concrete band: panels on it turn white */
.section-alt-wrap{background:var(--paper-2);--panel:var(--card);--ground:var(--paper-2)}

/* ============ TITLE BLOCK ============
   <header class="header"><div class="page-hero">
     p.eyebrow · h1 · p.lede · .page-hero-ctas( a.btn.btn-primary.btn-lg + a.btn.btn-secondary.btn-lg )
     [ figure.page-photo.page-photo--front|--aerial > picture > source(webp) + img ]   (adu-cost: the door close-up; adu-florida and adu-miami: the aerial, the Suite behind a main home)
   </div></header> */
.header{background:var(--paper)}
.page-hero{max-width:var(--max);margin-inline:auto;padding:var(--title-top) var(--gut-r) 0 var(--gut-l);display:grid;grid-template-columns:minmax(0,1fr)}
.page-hero > .eyebrow{margin-bottom:clamp(1.25rem,2.4vw,1.75rem);text-wrap:balance}   /* a long label wraps in two even lines, never a lone "· 2026" */
.page-hero h1{margin:0;font-size:var(--t-h1-article);line-height:1.02;color:var(--ink);max-width:16ch;text-wrap:pretty}
.page-hero .lede{margin:1.5rem 0 0;font-size:clamp(1.125rem,1.06rem + .25vw,1.22rem);line-height:1.6;color:var(--text-2);max-width:36rem}
.page-hero .lede a{overflow-wrap:anywhere}
.page-hero-ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
/* the block closes on a hairline at the content edges; a photograph or the facts schedule closes it instead */
.page-hero::after{content:"";display:block;height:1px;background:var(--line-2);margin-top:clamp(3rem,6vw,5.5rem)}
.page-hero:has(.page-photo)::after,.header:has(+ .fact-chip-wrap) .page-hero::after{display:none}
@media (min-width:1024px){
  .page-hero{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g-gap);align-items:start}
  .page-hero > .eyebrow,.page-hero::after,.page-photo{grid-column:1/-1}
  .page-hero h1{grid-column:1/span 7;grid-row:2/span 2;padding-right:1rem;max-width:none}
  .page-hero .lede{grid-column:8/-1;grid-row:2;margin-top:.55rem}
  .page-hero-ctas{grid-column:8/-1;grid-row:3;align-self:start}
  /* the pair fills the column: side by side when both fit, otherwise two equal full-width pills */
  .page-hero-ctas .btn{flex:1 1 auto}
}
@media (max-width:519.98px){
  /* two full-width buttons stack: the primary on top, same size (buttons.md: style, not size) */
  .page-hero-ctas .btn{flex:1 1 100%}
}

/* the owner's photograph, on the content lines in a 24px frame; it settles once on load, as the home's hero does */
.page-photo{margin:clamp(2.5rem,5vw,4.5rem) 0 0;border-radius:var(--r-lg);overflow:hidden;background:var(--paper-2);aspect-ratio:16/7}
.page-photo picture,.page-photo img{display:block;width:100%;height:100%}
.page-photo img{object-fit:cover}
.page-photo--front{aspect-ratio:15/8}
.page-photo--front img{object-position:50% 46%}
.page-photo--aerial img{object-position:50% 70%}   /* tablets and phones: both houses in frame; the dusk sky is what gives way */
/* laptops and up: a 3:1 band closer to the buttons, cropped to the lit house and the Suite (the ridge just under the frame's
   top, the Suite above its foot), so the Suite is on the first screen at 1440 x 900 and its roof is at 1280 x 800 and 1024 x 768 */
@media (min-width:1024px){.page-photo.page-photo--aerial{aspect-ratio:3/1;margin-top:2.5rem}.page-photo--aerial img{object-position:50% 88%}}
@media (max-width:1023.98px){.page-photo,.page-photo--front{aspect-ratio:16/9}}
@media (max-width:639.98px){.page-photo,.page-photo--front{aspect-ratio:4/3}.page-photo--aerial img{object-position:70% 70%}}
@media (prefers-reduced-motion:no-preference){
  .page-photo img{animation:page-photo-settle 1.1s var(--ease-enter) both}
}
@keyframes page-photo-settle{from{transform:scale(1.04)}to{transform:none}}

/* ============ FACTS: a schedule on hairlines ============
   <div class="fact-chip-wrap"><div class="fact-chip"> 3 × div( .label · .value · .sub ) </div></div>
   .label is site.css's label (the price note's type, sentence case, no tracking); the figure is Newsreader, as the home's facts. */
.fact-chip-wrap{max-width:var(--max);margin-inline:auto;padding:clamp(2.75rem,5vw,4.5rem) var(--gut-r) 0 var(--gut-l)}
.fact-chip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g-gap)}
.fact-chip > div{border-top:1px solid var(--line-2);padding-top:1.25rem;display:grid;gap:.45rem;align-content:start;min-width:0}
.fact-chip .value{margin-top:.2rem;font-family:var(--font-display);font-weight:400;font-optical-sizing:auto;font-size:clamp(2rem,1.45rem + 1.5vw,2.75rem);letter-spacing:var(--track-display);line-height:1.04;color:var(--ink);font-variant-numeric:lining-nums;font-synthesis:none}
.fact-chip .sub{font-size:1rem;line-height:1.5;color:var(--text-2)}
/* three across down to 700px: the figure steps down so a range ($13,800–$26,400) holds one line in a third of a tablet */
@media (max-width:899.98px){.fact-chip .value{font-size:clamp(1.65rem,.6rem + 2.4vw,1.95rem)}}
@media (max-width:699.98px){
  .fact-chip{grid-template-columns:minmax(0,1fr);gap:1.75rem}
  .fact-chip .value{font-size:2.125rem}
}
.fact-chip-wrap + .section{padding-top:clamp(4rem,2.5rem + 5vw,7rem)}

/* ============ ARTICLE SECTIONS ============
   <section class="section"> .sec-head( .eyebrow · h2 ) · .sec-body( p, ul, ol, h3, tables, cards, FAQ, callouts ) </section>
   Wrapped in <div class="section-alt-wrap"> for the concrete band. */
.section{max-width:var(--max);margin-inline:auto;padding:var(--pad) var(--gut-r) var(--pad) var(--gut-l)}
/* two white sections in a row: a hairline at the content edges instead of double padding */
.section + .section{padding-top:0}
.section + .section::before{content:"";display:block;grid-column:1/-1;border-top:1px solid var(--line);margin-bottom:var(--pad)}
/* a linked section (/adu-financing/#monthly): the html scroll-padding already clears the sticky bar; this also skips
   the section's top padding, so its label lands where the wide layout's sticky head sits */
.section[id]{scroll-margin-top:calc(1rem - var(--pad))}
.sec-head{margin-bottom:clamp(1.75rem,4vw,2.5rem)}
.sec-head .eyebrow{margin-bottom:1.1rem}
.section h2{margin:0;font-size:var(--t-h2-article);line-height:1.04;color:var(--ink);max-width:18ch;text-wrap:pretty}
.sec-body{color:var(--text-2)}
.sec-body > :first-child{margin-top:0}
.sec-body > p:first-child{font-size:1.125rem;line-height:1.6}
.section h3{margin:2.75rem 0 .8rem;font:400 var(--t-h3)/1.15 var(--font-display);letter-spacing:-.015em;font-optical-sizing:auto;font-synthesis:none;color:var(--ink);max-width:24ch;text-wrap:balance}
.section p{margin:0 0 1.15rem;max-width:var(--measure)}
.section ul{margin:0 0 1.5rem;padding-left:1.25rem;max-width:var(--measure)}
.section ul > li{margin-bottom:.65rem;padding-left:.35rem}
.section ul > li::marker{color:var(--muted)}
.sec-body strong{color:var(--ink)}
/* a real sequence (the permit steps): numbered rows on hairlines, the numerals in Newsreader.
   The zero-width marker keeps the list a list for VoiceOver (list-style:none would drop it in Safari). */
.section ol{list-style-type:"\200B";counter-reset:step;margin:0 0 1.75rem;padding:0;max-width:calc(var(--measure) + 3.5rem);border-top:1px solid var(--line-2)}
.section ol > li{counter-increment:step;position:relative;margin:0;padding:1.1rem 0 1.15rem 3.5rem;border-bottom:1px solid var(--line)}
.section ol > li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:1.02rem;font:400 1.375rem/1.25 var(--font-display);letter-spacing:-.01em;font-variant-numeric:lining-nums tabular-nums;color:var(--muted)}
@media (min-width:1024px){
  .section{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g-gap);align-items:start}
  .sec-head{grid-column:1/span 4;margin-bottom:0;position:sticky;top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 2rem)}
  .sec-body{grid-column:6/-1}
  /* wide content (a card row, a wide table): the head above, the body across the full width */
  .section:has(> .sec-body > :is(.card-grid,.table-scroll)) .sec-head{grid-column:1/span 8;position:static;margin-bottom:clamp(2.25rem,4vw,3.25rem)}
  .section:has(> .sec-body > :is(.card-grid,.table-scroll)) .sec-body{grid-column:1/-1}
  .section:has(> .sec-body > :is(.card-grid,.table-scroll)) h2{max-width:22ch}
}
/* standalone text links (a list item that starts with a link, a table cell that is only a link): at every width and
   for every pointer the inline padding makes a 44px-tall target without moving the text, and link list items sit far
   enough apart that the targets do not overlap. Links inside a sentence are unchanged. */
.section li > a:first-child{padding-block:11px}
.section li:has(> a:first-child){margin-bottom:1.15rem}
.data-table td > a:only-child{display:inline-block;padding-block:12.25px;margin-block:-12.25px;min-width:44px}   /* the margin keeps the row height */

/* ============ CARDS ============
   <div class="card-grid"> div.card( h3 · p · a "… <span class=arr>→</span>" ) </div>
   A panel (concrete on white, white on concrete). The link stretches over the whole card, so the card is the
   target and acts like a button: the fill shifts on hover, a press scales it to .97. */
.card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--g-gap);margin-top:2rem}
.sec-body > .card-grid:first-child{margin-top:0}
.card{position:relative;display:flex;flex-direction:column;gap:.65rem;min-width:0;background-color:var(--panel);border-radius:var(--r);padding:1.6rem 1.6rem 1.15rem;
  transition:background-color .15s var(--ease-apple),transform .12s var(--ease-apple)}
.section .card h3{margin:0;font-size:clamp(1.4rem,1.25rem + .45vw,1.65rem);line-height:1.15;max-width:none}
.section .card p{margin:0 0 .35rem;font-size:1rem;line-height:1.55;color:var(--text-2);max-width:none}
.card a{position:static;top:0;margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;min-height:44px;font-size:1rem}
.card a::after{content:"";position:absolute;inset:0;border-radius:inherit}
@media (hover:hover){
  .card:has(a:hover){background-color:color-mix(in srgb,var(--panel) 93%,var(--ink))}
}
.card:has(a:active){background-color:color-mix(in srgb,var(--panel) 88%,var(--ink));transform:scale(.97);transition-duration:.09s}
/* keyboard focus rings the whole card, since the whole card is the target */
@supports selector(:has(*)){
  .card a:focus-visible{outline:none}
  .card:has(a:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
}
/* a stacked section: the card row runs across the grid, 4 + 4 + 4 */
@media (min-width:1024px){
  .section:has(> .sec-body > .card-grid) .card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .section:has(> .sec-body > .card-grid) .sec-body > p{font-size:1.125rem}
}
/* exactly three cards on a tablet: three across, never two plus an orphan */
@media (min-width:768px) and (max-width:1023.98px){
  .card-grid:has(> .card:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
  .card-grid:has(> .card:nth-child(3):last-child) .card{padding-inline:1.25rem}
}
@media (max-width:767.98px){.card-grid:has(> .card:nth-child(3):last-child){grid-template-columns:minmax(0,1fr)}}
@media (max-width:639.98px){.card-grid{grid-template-columns:minmax(0,1fr)}}

/* ============ TABLES ============
   Open tables on hairlines: a firmer rule on top, the heads in the label's face at 600 (sentence case, no tracking), hairline rows.
   Wide tables: <div class="table-scroll" role="region" aria-label="…" tabindex="0"><table class="data-table wide">.
   Ledger tables (label | amount, no thead) set the amount in Newsreader, right-aligned; a row with <strong> is the total. */
.data-table{width:100%;border-collapse:collapse;margin:1.75rem 0 2.25rem;font-size:1rem;line-height:1.5;font-variant-numeric:lining-nums tabular-nums;border-top:1px solid var(--line-2)}
.data-table:not(.wide){max-width:46rem}
.data-table th,.data-table td{text-align:left;padding:.9rem 1.5rem .9rem 0;border-bottom:1px solid var(--line);vertical-align:top}
.data-table :is(th,td):last-child{padding-right:0}
.data-table thead th{font:600 1rem/1.35 var(--font);letter-spacing:0;color:var(--ink);vertical-align:bottom;padding-block:1rem .85rem}
.data-table td{color:var(--text-2)}
.data-table tbody th,.data-table td strong{color:var(--ink);font-weight:600}
.data-table tbody tr:last-child > *{border-bottom:0}
.data-table:not(:has(thead)){border-bottom:0}
.data-table:not(:has(thead)) td:last-child{text-align:right;white-space:nowrap;font-family:var(--font-display);font-size:1.1875rem;line-height:1.3;letter-spacing:-.01em;color:var(--ink);font-synthesis:none}
.data-table:not(:has(thead)) td:last-child strong{font-weight:500}
.data-table tr:has(strong) > td{border-top:1px solid var(--line-2);color:var(--ink)}
.data-table .num{text-align:right;white-space:nowrap}
.table-scroll{margin:1.75rem 0 2.5rem;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;border-radius:2px;
  /* scroll covers in the ground's colour: a soft edge shows only where more of the table hides */
  --edge:rgba(20,40,62,.16);
  background:
    linear-gradient(to right,var(--ground) 35%,transparent) left center/48px 100% no-repeat local,
    linear-gradient(to left,var(--ground) 35%,transparent) right center/48px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,var(--edge),transparent) left center/14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,var(--edge),transparent) right center/14px 100% no-repeat scroll,
    var(--ground)}
@media (prefers-color-scheme:dark){.table-scroll{--edge:rgba(0,0,0,.55)}}
.table-scroll .data-table{margin:0}
.table-scroll .data-table.wide :is(th,td){min-width:8.5rem}
.table-scroll .data-table.wide :is(th,td):first-child{min-width:10rem}
.table-scroll:focus-visible{outline-offset:4px}
@media (max-width:699.98px){
  :not(.table-scroll) > .data-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .data-table th,.data-table td{padding-right:1rem}
  .data-table:not(.wide):has(thead) td:last-child{white-space:normal}
}

/* ============ CALLOUT ============
   <div class="callout"><strong>Lead.</strong> Text…</div>: a panel, the lead in ink. */
.callout{margin:2rem 0;max-width:var(--measure);padding:1.5rem 1.75rem 1.55rem;background:var(--panel);border-radius:var(--r);font-size:1rem;line-height:1.6;color:var(--text-2)}
.callout strong{color:var(--ink)}

/* ============ FAQ (details / summary) ============
   <details class="faq-item"><summary>Question</summary><div class="faq-body"><p>…</p></div></details>
   The home's FAQ: open rows on hairlines, a 34px + disc that fills navy and turns 45° when the answer is open.
   The row is a button: hover recolours it and fills the disc, a press scales it to .97. */
.faq-item{border-bottom:1px solid var(--line)}
.faq-item:not(.faq-item + .faq-item){border-top:1px solid var(--line-2)}
.faq-item summary{--plus:var(--ink);--disc:transparent;--ring:var(--line-2);
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;min-height:72px;padding:1rem .25rem 1rem 0;cursor:pointer;list-style:none;
  font:500 1.125rem/1.4 var(--font);color:var(--ink);border-radius:var(--r-sm);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:color .15s var(--ease-apple),transform .12s var(--ease-apple)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-item summary::after{content:"";flex:none;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ring);
  background:linear-gradient(var(--plus),var(--plus)) center/13px 1.75px no-repeat,linear-gradient(var(--plus),var(--plus)) center/1.75px 13px no-repeat,var(--disc);
  transition:transform .35s var(--spring),background-color .15s var(--ease-apple)}
.faq-item[open] summary{--plus:var(--paper);--disc:var(--ink);--ring:transparent}
.faq-item[open] summary::after{transform:rotate(45deg)}
@media (hover:hover){
  .faq-item summary:hover{color:var(--link);--plus:var(--paper);--disc:var(--ink);--ring:transparent}
}
.faq-item summary:active{transform:scale(.97);transition-duration:.09s}
.faq-item summary:focus-visible{outline-offset:2px}
.faq-item .faq-body{padding:0 3.5rem 1.6rem 0;font-size:1rem;line-height:1.65;color:var(--text-2);max-width:46rem}
.faq-item .faq-body p{margin:0 0 .75rem;max-width:var(--measure)}
.faq-item .faq-body p:last-child{margin-bottom:0}
.faq-item .faq-body strong{color:var(--ink)}
.faq-item .faq-body a{overflow-wrap:anywhere}
@media (max-width:699.98px){.faq-item .faq-body{padding-right:0}.faq-item summary{font-size:1.0625rem}}

/* ============ CLOSING CARD ============
   <div class="cta-strip close-card on-walnut"> .close-copy( h2 · p ) · .close-ctas( buttons ) </div>
   The offer once more, on walnut, between the owner's two shapes: the card, its shapes, their motion and its
   narrow-screen layout are the shared recipe in site.css (CLOSING CARD, BRAND CIRCLES; /js/circles.js runs the
   motion). .cta-strip only places it: the card sits on the content lines (it is not inside a .wrap), its heading
   breaks as the guides' headings do, and its line takes the guides' spacing. --c-drift leaves 12px more for the
   heading's line than the home's card. */
.cta-strip{width:min(calc(100% - var(--gut-l) - var(--gut-r)),calc(var(--max) - 160px));margin:var(--pad) auto;
  --c-drift:52px;--c-p-gap:1.4rem;--c-p-max:34rem}
/* a white section right above already brings its bottom padding */
.section + .cta-strip{margin-top:0}
.cta-strip h2{text-wrap:pretty}

/* ============ RELATED ============
   <div class="related-links"><div class="related-links-inner"> h2 · .related-grid( a "Label <span class=arrow>→</span>" ) </div></div>
   The concrete band before the footer: the heading in the label style (an index, not a chapter), white
   tiles with the title in Newsreader and an arrow disc that fills navy. Tiles act like buttons (no lift). */
.related-links{background:var(--paper-2);padding:clamp(3.5rem,2.5rem + 3.5vw,5.5rem) 0}
.related-links-inner{max-width:var(--max);margin-inline:auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
.related-links h2{display:flex;align-items:center;gap:.85rem;margin:0 0 1.5rem;font:400 var(--t-label)/1.45 var(--font);letter-spacing:0;color:var(--text-2)}
.related-links h2::before{content:"";width:28px;height:1px;background:currentColor;flex:none;opacity:.7}
@media (forced-colors:active){.related-links h2::before{forced-color-adjust:none;background:CanvasText}}
.related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px var(--g-gap)}
.related-grid a{position:relative;top:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:76px;padding:.9rem 1.1rem .9rem 1.5rem;
  background-color:var(--card);border-radius:var(--r);color:var(--ink);font:400 1.3125rem/1.2 var(--font-display);letter-spacing:-.012em;font-synthesis:none;
  transition:background-color .15s var(--ease-apple),color .15s var(--ease-apple),transform .12s var(--ease-apple)}
.related-grid .arrow{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--ink);font:500 15px/1 var(--font);
  transition:transform .15s var(--ease),background-color .15s var(--ease-apple),color .15s var(--ease-apple),box-shadow .15s var(--ease-apple)}
@media (hover:hover){
  .related-grid a:hover{top:0;color:var(--link);background-color:color-mix(in srgb,var(--card) 95%,var(--ink))}
  .related-grid a:hover .arrow{transform:translateX(3px);background:var(--ink);color:var(--paper);box-shadow:none}
}
.related-grid a:active{top:0;color:var(--link);background-color:color-mix(in srgb,var(--card) 90%,var(--ink));transform:scale(.97);transition-duration:.09s}
@media (max-width:899.98px){.related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599.98px){.related-grid{grid-template-columns:minmax(0,1fr)}.related-grid a{min-height:64px;font-size:1.25rem}}

/* ============ PRINT ============ */
@media print{
  .related-links,.page-photo{display:none!important}
  .header,.section-alt-wrap{background:none}
  .page-hero h1,.page-hero .lede{color:#000}
  .sec-head{position:static}
  .faq-item .faq-body{display:block}
}

/* ============ REDUCED MOTION ============
   Last, so it follows every :active rule above. Keep the colour and fill changes; drop the press scale, the
   arrow nudge, the + rotation's motion and the photograph's settle. */
@media (prefers-reduced-motion:reduce){
  .card,.related-grid a,.related-grid .arrow,.faq-item summary,.faq-item summary::after{transition-property:background-color,color,border-color,box-shadow}
  .card:has(a:active),.related-grid a:active,.faq-item summary:active,.related-grid a:hover .arrow{transform:none}
  .page-photo img{animation:none}
}