/* Ultra Fast Cloud product page (Views/Home/Cloud.cshtml). Namespace cl-; reads the account design tokens
   (account-ui.css) and adds brochure components: hero with a framed screenshot, numbers strip, feature grid,
   split sections, steps, comparison table, pricing cards, FAQ accordion, final call to action. */

.cl-page { padding-bottom: var(--au-s8); }
.cl-h1 { font: 700 40px/46px var(--au-font-display); letter-spacing: -0.01em; margin: var(--au-s3) 0 var(--au-s4); }
.cl-h2 { font: 700 28px/34px var(--au-font-display); letter-spacing: -0.01em; margin: var(--au-s2) 0 0; }
.cl-lead { color: var(--au-text-2); font-size: 17px; line-height: 26px; margin: 0 0 var(--au-s4); max-width: 46ch; }
.cl-sub { color: var(--au-text-2); font-size: 15px; line-height: 22px; margin: var(--au-s3) 0 0; max-width: 60ch; }
.cl-fineprint { color: var(--au-text-3); font-size: 13px; margin: var(--au-s3) 0 0; }
.cl-note { color: var(--au-text-3); font-size: 13px; line-height: 19px; margin: var(--au-s3) 0 0; }
.cl-section { margin-top: var(--au-s8); }
.cl-section-head { max-width: 720px; margin-bottom: var(--au-s5); }
.cl-actions { margin-top: var(--au-s5); }
.cl-actions-center { justify-content: center; }

/* ---- hero */
.cl-hero {
    position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--au-s6); align-items: center;
    margin-top: var(--au-s7); padding: var(--au-s6); border: 1px solid var(--au-border); border-radius: var(--au-r-lg);
    background: linear-gradient(135deg, rgba(90, 226, 113, 0.08), rgba(109, 147, 255, 0.10)), var(--au-surface);
    overflow: hidden;
}
.cl-hero::before { content: ""; position: absolute; inset: -40% -20% auto auto; width: 60%; height: 120%; background: radial-gradient(closest-side, rgba(109, 147, 255, 0.22), transparent 70%); pointer-events: none; }
.cl-hero > * { position: relative; }
.cl-chips { list-style: none; margin: 0 0 var(--au-s2); padding: 0; display: flex; flex-wrap: wrap; gap: var(--au-s2); }
.cl-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--au-border); font-size: 13px; color: var(--au-text); }
.cl-chips svg { width: 14px; height: 14px; fill: var(--au-accent); }

/* ---- framed screenshots */
.cl-shot { margin: 0; border: 1px solid var(--au-border-strong); border-radius: var(--au-r); background: #0E1529; box-shadow: var(--au-shadow); overflow: hidden; }
.cl-shot img { display: block; width: 100%; height: auto; }
.cl-shot figcaption { color: var(--au-text-3); font-size: 13px; line-height: 18px; padding: var(--au-s3) var(--au-s4); border-top: 1px solid var(--au-border); }
.cl-browser { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--au-surface-2); border-bottom: 1px solid var(--au-border); }
.cl-browser span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.cl-browser em { flex: 1; margin-left: 8px; font: 500 12px/16px var(--au-font); font-style: normal; color: var(--au-text-3); background: rgba(0, 0, 0, 0.25); border-radius: 6px; padding: 3px 10px; text-align: center; }
.cl-live { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/14px var(--au-font); color: var(--au-accent); }
.cl-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--au-accent); box-shadow: 0 0 0 0 rgba(90, 226, 113, 0.6); animation: cl-pulse 1.8s infinite; }
@keyframes cl-pulse { 0% { box-shadow: 0 0 0 0 rgba(90, 226, 113, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(90, 226, 113, 0); } 100% { box-shadow: 0 0 0 0 rgba(90, 226, 113, 0); } }
.cl-shot-hero { transform: rotate(-1deg) translateY(4px); }
.cl-shot-phone { max-width: 360px; justify-self: center; }

/* ---- numbers strip */
.cl-numbers { list-style: none; margin: var(--au-s5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--au-s3); }
.cl-numbers li { background: var(--au-surface); border: 1px solid var(--au-border); border-radius: var(--au-r); padding: var(--au-s4) var(--au-s5); }
.cl-numbers strong { display: block; font: 700 26px/30px var(--au-font-display); color: var(--au-accent); }
.cl-numbers span { display: block; color: var(--au-text-2); font-size: 13px; line-height: 18px; margin-top: 4px; }

/* ---- feature grid */
.cl-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--au-s4); }
.cl-features li { background: var(--au-surface); border: 1px solid var(--au-border); border-radius: var(--au-r); padding: var(--au-s5); transition: transform var(--au-ease), border-color var(--au-ease); }
.cl-features li:hover { transform: translateY(-2px); border-color: var(--au-border-strong); }
.cl-features h3 { font: 600 16px/22px var(--au-font); margin: var(--au-s3) 0 var(--au-s2); }
.cl-features p { color: var(--au-text-2); font-size: 14px; line-height: 20px; margin: 0; }
.cl-ico { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 10px; background: var(--au-accent-soft); }
.cl-ico svg { width: 22px; height: 22px; fill: var(--au-accent); }
.cl-ico-farm { background: rgba(255, 196, 92, 0.16); } .cl-ico-farm svg { fill: var(--au-warn); }
.cl-ico-boss { background: rgba(255, 122, 122, 0.16); } .cl-ico-boss svg { fill: var(--au-danger); }
.cl-ico-daily, .cl-ico-live { background: var(--au-blue-soft); } .cl-ico-daily svg, .cl-ico-live svg { fill: var(--au-blue); }
.cl-ico-market { background: rgba(124, 58, 237, 0.2); } .cl-ico-market svg { fill: #B794F6; }
.cl-ico-phone { background: rgba(255, 255, 255, 0.08); } .cl-ico-phone svg { fill: var(--au-text); }

/* ---- split sections */
.cl-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--au-s6); align-items: center; margin-top: var(--au-s6); }
.cl-split-flip .cl-shot { order: 2; }
.cl-split-copy h3 { font: 600 20px/26px var(--au-font); margin: 0 0 var(--au-s3); }
.cl-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--au-s2); }
.cl-ticks li { position: relative; padding-left: 26px; color: var(--au-text-2); font-size: 15px; line-height: 22px; }
.cl-ticks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--au-accent-soft); }
.cl-ticks li::after { content: ""; position: absolute; left: 5px; top: 7px; width: 6px; height: 4px; border-left: 2px solid var(--au-accent); border-bottom: 2px solid var(--au-accent); transform: rotate(-45deg); }
.cl-ticks-sm li { font-size: 14px; line-height: 20px; }

/* ---- steps */
.cl-how { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--au-s6); align-items: center; }
.cl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--au-s4); counter-reset: step; }
.cl-steps li { display: grid; grid-template-columns: 44px 1fr; gap: var(--au-s4); align-items: start; background: var(--au-surface); border: 1px solid var(--au-border); border-radius: var(--au-r); padding: var(--au-s5); }
.cl-steps b { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; background: var(--au-accent); color: var(--au-accent-ink); font: 700 18px/1 var(--au-font-display); }
.cl-steps h3 { font: 600 17px/22px var(--au-font); margin: 6px 0 var(--au-s2); }
.cl-steps p { color: var(--au-text-2); font-size: 14px; line-height: 20px; margin: 0; }

/* ---- comparison */
.cl-table-wrap { overflow-x: auto; border: 1px solid var(--au-border); border-radius: var(--au-r); background: var(--au-surface); }
.cl-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cl-table th, .cl-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--au-border); vertical-align: top; }
.cl-table thead th { font: 600 12px/16px var(--au-font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--au-text-3); }
.cl-table tbody th { font-weight: 600; color: var(--au-text); width: 24%; }
.cl-table td { color: var(--au-text-2); }
.cl-table tr:last-child th, .cl-table tr:last-child td { border-bottom: 0; }
.cl-table .cl-table-cloud, .cl-table td:last-child { background: rgba(90, 226, 113, 0.06); color: var(--au-text); }
.cl-table thead .cl-table-cloud { color: var(--au-accent); }

/* ---- pricing */
.cl-prices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--au-s4); align-items: stretch; }
.cl-prices > li { position: relative; background: var(--au-surface); border: 1px solid var(--au-border); border-radius: var(--au-r-lg); padding: var(--au-s5) var(--au-s5) var(--au-s6); }
.cl-prices > li.cl-price-featured { border-color: rgba(90, 226, 113, 0.5); background: linear-gradient(180deg, rgba(90, 226, 113, 0.10), transparent 60%), var(--au-surface); box-shadow: 0 0 0 1px rgba(90, 226, 113, 0.2), var(--au-shadow); }
.cl-price-name { font: 600 14px/18px var(--au-font); letter-spacing: 0.04em; text-transform: uppercase; color: var(--au-text-2); margin: 0; display: flex; align-items: center; gap: var(--au-s2); }
.cl-price { margin: var(--au-s3) 0 0; display: flex; align-items: baseline; gap: 4px; }
.cl-price strong { font: 700 40px/44px var(--au-font-display); }
.cl-price span { color: var(--au-text-3); font-size: 14px; }
.cl-price-slots { margin: 4px 0 var(--au-s4); color: var(--au-text); font-weight: 600; }
.cl-price-slots small { color: var(--au-text-3); font-weight: 500; }

/* ---- faq */
.cl-faq { display: grid; gap: var(--au-s2); }
.cl-faq details { background: var(--au-surface); border: 1px solid var(--au-border); border-radius: var(--au-r); padding: 0 var(--au-s5); }
.cl-faq summary { cursor: pointer; list-style: none; padding: var(--au-s4) 0; font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: var(--au-s3); }
.cl-faq summary::-webkit-details-marker { display: none; }
.cl-faq summary::after { content: "+"; color: var(--au-text-3); font: 500 20px/1 var(--au-font); transition: transform var(--au-ease); }
.cl-faq details[open] summary::after { transform: rotate(45deg); }
.cl-faq details p { margin: 0 0 var(--au-s4); color: var(--au-text-2); font-size: 15px; line-height: 22px; }

/* ---- final cta */
.cl-cta { margin-top: var(--au-s8); padding: var(--au-s7) var(--au-s5); text-align: center; border-radius: var(--au-r-lg); border: 1px solid var(--au-border); background: linear-gradient(135deg, rgba(90, 226, 113, 0.12), rgba(109, 147, 255, 0.12)), var(--au-surface); }
.cl-cta .cl-sub { margin: var(--au-s3) auto 0; }

/* ---- responsive */
@media (max-width: 1024px) {
    .cl-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cl-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .cl-hero { grid-template-columns: 1fr; padding: var(--au-s5); margin-top: var(--au-s5); }
    .cl-shot-hero { transform: none; }
    .cl-h1 { font-size: 30px; line-height: 36px; }
    .cl-h2 { font-size: 24px; line-height: 30px; }
    .cl-split, .cl-split-flip, .cl-how { grid-template-columns: 1fr; }
    .cl-split-flip .cl-shot { order: 0; }
    .cl-prices { grid-template-columns: 1fr; }
    .cl-shot-phone { max-width: 320px; }
}
@media (max-width: 480px) {
    .cl-features, .cl-numbers { grid-template-columns: 1fr; }
    .cl-steps li { grid-template-columns: 36px 1fr; padding: var(--au-s4); }
    .cl-steps b { width: 36px; height: 36px; font-size: 15px; }
    .cl-section { margin-top: var(--au-s7); }
}

.cl-price-examples { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
.cl-price-examples th, .cl-price-examples td { padding: 6px 0; border-bottom: 1px solid var(--au-border); text-align: left; }
.cl-price-examples td:last-child, .cl-price-examples th:last-child { text-align: right; font-weight: 700; color: var(--au-text); }
.cl-price-examples tr:last-child td { border-bottom: 0; }
.cl-price-plus { font: 600 16px/22px var(--au-font); color: var(--au-text-2); margin: 2px 0 0; }
.cl-price-plus strong { font: 700 22px/26px var(--au-font-display); color: var(--au-text); }

/* ---- devices section (three cards) and FAQ questions as headings */
.cl-features-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cl-faq-q { margin: 0; font: inherit; font-weight: 600; }
@media (max-width: 1024px) { .cl-features-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cl-features-3 { grid-template-columns: 1fr; } }


/* ---- showcase: one slide per built-in, each with its own SVG animation (Views/Home/_CloudShowcase.cshtml) */
.cl-show { margin-top: var(--au-s7); }
.cl-show-head { margin-bottom: var(--au-s4); }
.cl-show-frame { position: relative; border: 1px solid var(--au-border); border-radius: var(--au-r-lg); background: linear-gradient(135deg, rgba(109, 147, 255, 0.08), rgba(90, 226, 113, 0.06)), var(--au-surface); overflow: hidden; }
.cl-show-track { position: relative; min-height: 300px; }
.cl-show-slide { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--au-s6); align-items: center; padding: var(--au-s6) var(--au-s6) var(--au-s7); opacity: 0; visibility: hidden; transform: translateX(24px); transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s; }
.cl-show-slide.is-active { position: relative; opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .45s ease, visibility 0s; }
.cl-show-art { margin: 0; }
.cl-show-art svg { display: block; width: 100%; height: auto; max-height: 260px; }
.cl-show-copy h3 { font: 700 24px/30px var(--au-font-display); margin: var(--au-s3) 0 var(--au-s2); letter-spacing: -0.01em; }
.cl-show-copy p { margin: 0; color: var(--au-text-2); font-size: 15px; line-height: 23px; max-width: 46ch; }
.cl-show-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--au-accent-soft); color: var(--au-accent); font: 600 12px/16px var(--au-font); }
.cl-show-controls { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; align-items: center; justify-content: center; gap: var(--au-s3); }
.cl-show-arrow { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--au-border); background: rgba(255, 255, 255, 0.06); color: var(--au-text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background var(--au-ease), border-color var(--au-ease); }
.cl-show-arrow svg { width: 18px; height: 18px; }
.cl-show-arrow:hover, .cl-show-arrow:focus-visible { background: rgba(255, 255, 255, 0.14); border-color: var(--au-border-strong); outline: none; }
.cl-show-dots { display: flex; gap: 8px; }
.cl-show-dots button { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.22); cursor: pointer; transition: transform var(--au-ease), background var(--au-ease); }
.cl-show-dots button[aria-selected="true"] { background: var(--au-accent); transform: scale(1.25); }
.cl-show-dots button:focus-visible { outline: 2px solid var(--au-accent); outline-offset: 3px; }

/* every drawing animates only while its slide is active; the class toggle restarts the keyframes */
.cl-anim * { transform-box: fill-box; transform-origin: center; }

/* 1. map: tiles reveal left to right behind a light band, pins drop, badges fade in */
.cl-anim-map .cl-tile, .cl-anim-map .cl-tile-res, .cl-anim-map .cl-tile-boss, .cl-anim-map .cl-tile-keep { fill: #1C2742; stroke: #2A3550; opacity: .35; }
.is-active .cl-anim-map .cl-tile { animation: cl-tile-in .5s ease-out forwards; animation-delay: calc(.35s + var(--col) * .22s); }
.is-active .cl-anim-map .cl-tile-res { animation: cl-tile-res .5s ease-out forwards; animation-delay: calc(.35s + var(--col) * .22s); }
.is-active .cl-anim-map .cl-tile-boss { animation: cl-tile-boss .5s ease-out forwards; animation-delay: calc(.35s + var(--col) * .22s); }
.is-active .cl-anim-map .cl-tile-keep { animation: cl-tile-keep .5s ease-out forwards; animation-delay: calc(.35s + var(--col) * .22s); }
@keyframes cl-tile-in { to { opacity: 1; fill: #1F2B4A; } }
@keyframes cl-tile-res { to { opacity: 1; fill: #1F4A33; stroke: #5AE271; } }
@keyframes cl-tile-boss { to { opacity: 1; fill: #4A2432; stroke: #FF7A7A; } }
@keyframes cl-tile-keep { to { opacity: 1; fill: #24305A; stroke: #6D93FF; } }
.cl-anim-map .cl-map-sweep { opacity: 0; }
.is-active .cl-anim-map .cl-map-sweep { animation: cl-sweep 2s ease-in-out .3s forwards; }
@keyframes cl-sweep { 0% { transform: translateX(0); opacity: 1; } 100% { transform: translateX(360px); opacity: 0; } }
.cl-anim-map .cl-pin { opacity: 0; transform: translateY(-18px); }
.is-active .cl-anim-map .cl-pin { animation: cl-pin-drop .55s cubic-bezier(.3, 1.6, .5, 1) forwards; animation-delay: var(--d); }
@keyframes cl-pin-drop { to { opacity: 1; transform: translateY(0); } }
.cl-anim .cl-badge { opacity: 0; transform: translateY(6px); }
.is-active .cl-anim .cl-badge { animation: cl-fade-up .4s ease-out forwards; animation-delay: var(--d); }
@keyframes cl-fade-up { to { opacity: 1; transform: none; } }

/* 2. proxies: lanes draw themselves, a packet rides each lane, the IP tag and the server light up */
.cl-anim-proxy .cl-lane { stroke-dasharray: 300; stroke-dashoffset: 300; }
.is-active .cl-anim-proxy .cl-lane { animation: cl-draw 1.1s ease-out forwards; animation-delay: var(--d); }
@keyframes cl-draw { to { stroke-dashoffset: 0; } }
.cl-anim-proxy .cl-packet { opacity: 0; offset-distance: 0%; }
.is-active .cl-anim-proxy .cl-packet { animation: cl-ride 2.4s linear infinite; animation-delay: calc(1.2s + var(--d)); }
@keyframes cl-ride { 0% { opacity: 0; offset-distance: 0%; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; offset-distance: 100%; } }
.cl-anim-proxy .cl-iptag { opacity: 0; }
.is-active .cl-anim-proxy .cl-iptag { animation: cl-fade-up .4s ease-out forwards; animation-delay: calc(.9s + var(--d)); }
.is-active .cl-anim-proxy .cl-server-led { animation: cl-blink 1.2s ease-in-out 1.6s infinite; }
@keyframes cl-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* 3. dailies: rows slide in, ticks draw, the ring fills */
.cl-anim-daily .cl-row { opacity: 0; transform: translateX(-10px); }
.is-active .cl-anim-daily .cl-row { animation: cl-row-in .35s ease-out forwards; animation-delay: var(--d); }
@keyframes cl-row-in { to { opacity: 1; transform: none; } }
.cl-anim-daily .cl-row-tick { stroke-dasharray: 16; stroke-dashoffset: 16; }
.is-active .cl-anim-daily .cl-row-tick { animation: cl-tick .35s ease-out forwards; animation-delay: calc(var(--d) + .45s); }
@keyframes cl-tick { to { stroke-dashoffset: 0; } }
.cl-anim-daily .cl-ring-fill { stroke-dasharray: 276.5; stroke-dashoffset: 276.5; }
.is-active .cl-anim-daily .cl-ring-fill { animation: cl-ring 2.6s cubic-bezier(.2, .7, .2, 1) .4s forwards; }
@keyframes cl-ring { to { stroke-dashoffset: 0; } }
.is-active .cl-anim-daily .cl-moon { animation: cl-fade-up .5s ease-out 2.8s both; }

/* 4. rally: marches ride their paths to the boss, the impact ring pulses */
.cl-anim-rally .cl-march { opacity: 0; offset-distance: 0%; offset-rotate: auto; }
.is-active .cl-anim-rally .cl-march { animation: cl-march 2.6s ease-in infinite; animation-delay: var(--d); }
@keyframes cl-march { 0% { opacity: 0; offset-distance: 0%; } 8% { opacity: 1; } 62% { opacity: 1; offset-distance: 92%; } 70% { opacity: 0; offset-distance: 92%; } 100% { opacity: 0; offset-distance: 92%; } }
.cl-anim-rally .cl-boss-ring { opacity: 0; }
.is-active .cl-anim-rally .cl-boss-ring { animation: cl-impact 2.6s ease-out 1.7s infinite; }
@keyframes cl-impact { 0% { opacity: .9; transform: scale(.8); } 40% { opacity: 0; transform: scale(1.8); } 100% { opacity: 0; transform: scale(1.8); } }

/* 5. 24/7: the sun and moon turn around the dial, the log keeps scrolling */
.is-active .cl-anim-day .cl-dial-spin { animation: cl-spin 9s linear infinite; }
@keyframes cl-spin { to { transform: rotate(360deg); } }
.is-active .cl-anim-day .cl-log { animation: cl-log 6s linear infinite; }
@keyframes cl-log { to { transform: translateY(-96px); } }

@media (max-width: 860px) {
    .cl-show-slide { grid-template-columns: 1fr; gap: var(--au-s4); padding: var(--au-s5) var(--au-s4) var(--au-s8); }
    .cl-show-art svg { max-height: 200px; }
    .cl-show-copy h3 { font-size: 21px; line-height: 27px; }
    .cl-show-track { min-height: 440px; }
}
@media (prefers-reduced-motion: reduce) {
    .is-active .cl-anim * { animation: none !important; }
    .cl-anim-map .cl-tile, .cl-anim-map .cl-tile-res, .cl-anim-map .cl-tile-boss, .cl-anim-map .cl-tile-keep, .cl-anim-map .cl-pin, .cl-anim .cl-badge, .cl-anim-proxy .cl-iptag, .cl-anim-daily .cl-row { opacity: 1; transform: none; }
    .cl-anim-proxy .cl-lane, .cl-anim-daily .cl-row-tick { stroke-dashoffset: 0; }
    .cl-anim-daily .cl-ring-fill { stroke-dashoffset: 0; }
    .cl-anim-proxy .cl-packet, .cl-anim-rally .cl-march { opacity: 1; offset-distance: 60%; }
    .cl-show-slide { transition: none; }
}

.au-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }