/* ==========================================================================
   HOME HERO — question bar + service slider.
   Loaded after public.css (so it overrides the old .deck / .card-stack / .pass rules, which are now unused).
   Tokens come from studentflow.css. Every animation is CSS (transform / opacity, plus one tiny stroke draw) and
   stops for prefers-reduced-motion, the "Pause motion" checkbox (#calm-toggle) and when the slider is off-screen.
   ========================================================================== */

/* ---------- headline: two lines on wide screens so the bar and slider stay close to the fold ---------- */
.hero--home .hero-pad { padding-block: clamp(1.75rem, 4vw, 3.25rem) clamp(2.25rem, 4vw, 3.5rem); }
.hero--home .hero__top { margin-bottom: clamp(1rem, 2.5vw, 1.75rem); }
.hero--home .display { font-size: clamp(2.35rem, 1rem + 8.4vw, 5.6rem); line-height: .98; margin-bottom: .28em; }
@media (min-width: 720px) {
  .hero--home .display__line:nth-child(-n+2) { display: inline; }
}
.hero--home .hero__lead { max-width: 68ch; font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); }

/* decorative stickers (aria-hidden SVGs from partials/svg), wide screens only */
.hero--home .hero__body { position: relative; }
.hd { display: none; }
@media (min-width: 1100px) {
  .hd { display: block; position: absolute; height: auto; pointer-events: none; z-index: 0; }
  .hd--1 { width: 60px; left: -1%; top: 4%; --rot: -10deg; }
  .hd--2 { width: 64px; right: -2%; top: 30%; --rot: 0deg; }
  .hd--3 { width: 78px; left: -5%; top: 58%; --rot: 10deg; opacity: .9; }
}

/* ---------- question bar ---------- */
.ask { width: min(100%, 900px); margin: 1.5rem auto 0; text-align: left; }
.ask__label { display: block; margin: 0 0 .5rem .35rem; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); }

/* wide: one white pill holds icon + input + button */
.ask__row { display: flex; align-items: center; gap: .5rem; padding: .4rem .4rem .4rem 1.1rem; background: var(--white); color: var(--ink); border: var(--bw) solid var(--ink); border-radius: var(--r-pill); box-shadow: 6px 6px 0 var(--violet); }
.ask__row:focus-within { outline: 3px solid var(--lime); outline-offset: 3px; }
.ask__field { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .65rem; }
.ask__icon { flex: none; width: 1.5rem; height: 1.5rem; color: var(--ink); }
.ask__input {
  flex: 1 1 auto; min-width: 0; width: 100%; min-height: 52px; padding: .5rem .25rem; border: 0; background: transparent; color: var(--ink);
  font-size: clamp(1.02rem, .95rem + .4vw, 1.25rem); font-weight: 600; border-radius: 0;
}
.ask__input:focus, .ask__input:focus-visible { outline: none; }
.ask__input::placeholder { color: #55556a; opacity: 1; transition: opacity .22s; text-overflow: ellipsis; }
.ask__input.is-swap::placeholder { opacity: 0; }
.ask .ask__go { flex: none; min-height: 56px; padding-inline: 1.5rem; box-shadow: 3px 3px 0 var(--ink); white-space: nowrap; }
.ask .ask__go:hover { box-shadow: 1px 1px 0 var(--ink); }

/* narrow: the white pill is the input; the button sits under it, full width */
@media (max-width: 639px) {
  .ask__row { display: grid; gap: .75rem; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
  .ask__row:focus-within { outline: none; }
  .ask__field { padding: .2rem 1rem; background: var(--white); color: var(--ink); border: var(--bw) solid var(--ink); border-radius: var(--r-pill); box-shadow: 4px 4px 0 var(--violet); }
  .ask__field:focus-within { outline: 3px solid var(--lime); outline-offset: 3px; }
  .ask .ask__go { width: 100%; box-shadow: 4px 4px 0 var(--white); }
}

.ask__meta { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem 1rem; margin-top: .9rem; }
.ask__help { margin: 0; padding-top: .6rem; font-size: var(--fs-sm); font-weight: 700; color: #dedeea; }
.ask__steps { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.ask__steps[open] { flex: 1 1 100%; }
.ask__steps summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .4rem 1rem;
  border: var(--bw) solid rgba(255, 255, 255, .6); border-radius: var(--r-pill); font-weight: 800; font-size: var(--fs-sm); color: var(--white);
}
.ask__steps summary::-webkit-details-marker { display: none; }
.ask__steps summary::after { content: ""; width: .5rem; height: .5rem; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease); }
.ask__steps[open] summary::after { transform: rotate(-135deg) translateY(-1px); }
.ask__steps summary:hover { border-color: var(--lime); color: var(--lime); }

.ask__try { margin: 1.1rem 0 .55rem; text-align: center; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #c9c9d8; }
.ask__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem .6rem; justify-content: center; }
.ask__chip {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .4rem 1rem; border: var(--bw) solid rgba(255, 255, 255, .55); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .07); color: var(--white); font-weight: 700; font-size: var(--fs-sm); line-height: 1.25; text-decoration: none;
  transition: background .15s, color .15s, border-color .15s, transform .15s var(--ease);
}
.ask__chip:hover, .ask__chip:focus-visible { background: var(--lime); color: var(--ink); border-color: var(--ink); }
.ask__chip:hover { transform: translateY(-2px); }

/* sentence builder ("I'm a student heading to the UK to study a Masters starting Sep 2027 from Hyderabad.") */
.mad { min-width: 0; margin-top: .75rem; padding: clamp(1rem, 2.4vw, 1.4rem); border: var(--bw) solid rgba(255, 255, 255, .55); border-radius: var(--r-lg); background: rgba(255, 255, 255, .06); }
.mad__set { margin: 0; padding: 0; border: 0; min-width: 0; }
.mad__flow { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .65rem; font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem); font-weight: 700; line-height: 1.3; color: var(--white); }
.mad__pair[hidden] { display: none; }
.mad__pair { display: inline-flex; align-items: center; gap: .6rem; max-width: 100%; min-width: 0; }
.mad__w { color: var(--white); flex: none; }
.mad__ctl {
  min-height: 46px; min-width: 0; max-width: 100%; padding: .4rem 2.2rem .4rem .9rem; text-overflow: ellipsis; border: var(--bw) solid var(--ink); border-radius: 14px;
  background: var(--lime); color: var(--ink); font-size: .95em; font-weight: 800; cursor: pointer; box-shadow: 3px 3px 0 var(--white);
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d0d14' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .65rem center; background-size: 1rem;
}
.mad__ctl--text { width: min(100%, 13rem); padding-right: .9rem; background: var(--white); background-image: none; cursor: text; font-weight: 700; }
.mad__ctl--text::placeholder { color: #55556a; opacity: 1; }
.mad__ctl:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.mad__go { margin-top: 1.1rem; }

/* demoted primary CTA + text link */
.hero__cta2 { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: .75rem 1.75rem; margin-top: 1.6rem; }
.hero__cta2-main { display: grid; justify-items: center; gap: .4rem; }
.hero__cta2-main .btn { min-height: 52px; font-size: var(--fs-sm); }
.hero__cta2-note { font-size: var(--fs-xs); font-weight: 700; color: #cfcfe0; }
.hero__how { display: inline-flex; align-items: center; min-height: 52px; font-weight: 800; color: var(--white); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.hero__how:hover { color: var(--lime); }
.hero--home .hero__other { margin-inline: auto; }
.hero--home .hero__proof { margin-top: 1.1rem; }

/* ---------- service slider ---------- */
.slider { position: relative; margin-top: clamp(1.75rem, 4vw, 3rem); text-align: left; --slide-w: clamp(260px, 80vw, 340px); --slide-gap: clamp(.75rem, 2vw, 1.25rem); }
.slider__head { text-align: center; max-width: 60ch; margin: 0 auto .35rem; }
.slider__title { font-size: clamp(1.35rem, 1.05rem + 1.2vw, 2rem); margin: 0 0 .3em; color: var(--white); }
.slider__sub { margin: 0; color: #dedeea; font-size: var(--fs-sm); }

/* the track bleeds to the screen edge on phones; the first and last card can still centre */
.slider__view { margin-inline: calc(var(--gutter) * -1); }
.slider__track {
  position: relative; display: flex; align-items: stretch; gap: var(--slide-gap); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding: 1.6rem calc(50% - var(--slide-w) / 2) 2rem;
}
.slider__track::-webkit-scrollbar { display: none; }
.slider__track:focus-visible { outline: 3px solid var(--lime); outline-offset: -3px; border-radius: var(--r-lg); }
.slide { flex: 0 0 var(--slide-w); display: flex; scroll-snap-align: center; --tilt: -1.4deg; }
.slide:nth-child(even) { --tilt: 1.3deg; }

.scard {
  --card: var(--lime); --fg: var(--ink); --a: var(--violet); --b: #fff; --c: var(--pink);
  position: relative; flex: 1 1 auto; display: flex; flex-direction: column; gap: .5rem; min-height: 22rem; padding: 1rem 1.1rem 1.15rem;
  background: var(--card); color: var(--fg); border: var(--bw) solid var(--ink); border-radius: 24px; box-shadow: 6px 6px 0 rgba(255, 255, 255, .92);
  text-decoration: none; transform: rotate(var(--tilt)) scale(.95);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.scard--violet { --card: var(--violet); --fg: #fff; --a: #fff; --b: var(--lime); --c: var(--yellow); }
.scard--lime { --card: var(--lime); --a: var(--violet); --b: #fff; --c: var(--pink); }
.scard--pink { --card: var(--pink); --a: var(--lime); --b: #fff; --c: var(--yellow); }
.scard--cyan { --card: var(--cyan); --a: #fff; --b: var(--yellow); --c: var(--pink); }
.scard--orange { --card: var(--orange); --a: var(--yellow); --b: #fff; --c: var(--violet-soft); }
.scard--yellow { --card: var(--yellow); --a: var(--pink); --b: #fff; --c: var(--cyan); }
.slide[data-active="true"] .scard { transform: rotate(0deg) scale(1.03) translateY(-6px); box-shadow: 9px 9px 0 rgba(255, 255, 255, .95); }
.scard:hover, .scard:focus-visible { transform: rotate(0deg) scale(1.02) translateY(-8px); box-shadow: 10px 10px 0 var(--lime); text-decoration: none; }
.scard:focus-visible { outline: 3px solid var(--lime); outline-offset: 5px; border-radius: 24px; }

.scard__n { position: absolute; left: 1rem; top: .95rem; z-index: 2; padding: .1rem .55rem; border: var(--bw) solid var(--ink); border-radius: var(--r-pill); background: #fff; color: var(--ink); font-family: var(--font-display); font-weight: 900; font-size: .75rem; letter-spacing: .04em; }
.scard__go { position: absolute; right: .9rem; top: .8rem; z-index: 2; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: #fff; transition: transform .25s var(--ease), background .2s, color .2s; }
.scard__go .icon { width: 1.1rem; height: 1.1rem; }
.scard:hover .scard__go, .scard:focus-visible .scard__go { transform: rotate(45deg); background: var(--lime); color: var(--ink); }
.scard__art { display: block; margin-top: .25rem; }
.scard__title { margin: .2rem 0 0; font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); line-height: 1.12; }
.scard__benefit { margin: 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.45; }
.scard__status {
  margin-top: auto; align-self: flex-start; display: inline-flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; max-width: 100%; padding: .4rem .85rem;
  background: #fff; color: var(--ink); border: var(--bw) solid var(--ink); border-radius: 16px; box-shadow: 2px 2px 0 var(--ink); font-size: var(--fs-xs); font-weight: 800; line-height: 1.25;
}
.scard__dot { flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--green); animation: sc-pulse 2s ease-in-out infinite; }
.scard__bar { flex: 1 0 100%; display: block; height: 10px; border: 2px solid var(--ink); border-radius: var(--r-pill); background: #fff; overflow: hidden; }
.scard__bar > span { display: block; height: 100%; background: var(--ink); }
@keyframes sc-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .55; } }

/* controls (hidden until the script runs; space is reserved so nothing jumps) */
.slider__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .75rem; min-height: 56px; margin-top: .1rem; visibility: hidden; }
.slider.is-ready .slider__bar { visibility: visible; }
/* no JavaScript (this was a <noscript><style> block): drop the empty controls row and keep a visible scrollbar so the row of cards can still be scrolled */
@media (scripting: none) {
  .slider__bar { display: none; }
  .slider__track { scrollbar-width: thin; scrollbar-color: var(--lime) transparent; }
}
.sbtn {
  display: inline-grid; place-items: center; min-width: 48px; height: 48px; padding: 0; border: var(--bw) solid var(--white); border-radius: 50%;
  background: transparent; color: var(--white); cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.sbtn:hover { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.sbtn:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.sbtn .icon { width: 1.35rem; height: 1.35rem; }
.sbtn--pill { display: inline-flex; align-items: center; gap: .5rem; padding: 0 1.1rem 0 .9rem; border-radius: var(--r-pill); font-weight: 800; font-size: var(--fs-sm); }
.sbtn--pill .icon { fill: currentColor; width: 1.1rem; height: 1.1rem; }
.sbtn[hidden] { display: none; }
.sdots { display: flex; flex-wrap: wrap; justify-content: center; }
.sdot { display: grid; place-items: center; width: 30px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.sdot::before { content: ""; width: 11px; height: 11px; border: 2px solid var(--white); border-radius: 50%; background: transparent; transition: width .25s var(--ease), background .2s, border-color .2s; }
.sdot:hover::before { background: var(--white); }
.sdot[aria-current="true"]::before { width: 26px; border-radius: var(--r-pill); background: var(--lime); border-color: var(--lime); }
.sdot:focus-visible { outline: 3px solid var(--lime); outline-offset: -2px; border-radius: 8px; }
.slider__note { margin: .25rem 0 0; text-align: center; font-size: var(--fs-xs); font-weight: 600; color: #c9c9d8; }
@media (max-width: 679px) { .sdots { flex-basis: 100%; order: 5; } }
@media (max-width: 439px) {
  .sdot { width: 24px; }
  .sdot[aria-current="true"]::before { width: 18px; }
}

/* ---------- animated icons (decorative) ---------- */
.art { display: block; width: 100%; height: auto; max-height: 128px; overflow: hidden; }
.art .stage { fill: rgba(255, 255, 255, .5); stroke: var(--ink); stroke-width: 3; }
.art path { fill: none; }
.art .s { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.art .fa { fill: var(--a); } .art .fb { fill: var(--b); } .art .fc { fill: var(--c); }
.art .fw { fill: #fff; } .art .fi { fill: var(--ink); } .art .fl { fill: var(--lime); } .art .fy { fill: var(--yellow); }
.art .trail { fill: none; stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: .1 9; }
.art [class^="a-"], .art [class*=" a-"] { transform-box: fill-box; transform-origin: center; will-change: transform; }

@keyframes a-fly { 0% { transform: translate(-58px, 33px); opacity: 0; } 16% { opacity: 1; } 84% { opacity: 1; } 100% { transform: translate(58px, -33px); opacity: 0; } }
@keyframes a-drift { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(9px); } }
.art--flights .a-plane { animation: a-fly 4.8s ease-in-out infinite; }
.art--flights .a-cloud--1 { animation: a-drift 6s ease-in-out infinite; }
.art--flights .a-cloud--2 { animation: a-drift 7.5s ease-in-out -2s infinite reverse; }

@keyframes a-road { to { transform: translateX(-28px); } }
@keyframes a-spin { to { transform: rotate(360deg); } }
@keyframes a-bob { 50% { transform: translateY(-1.6px); } }
@keyframes a-pinbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.art--transfer .a-road { transform-box: view-box; animation: a-road .7s linear infinite; }
.art--transfer .a-wheel { animation: a-spin .6s linear infinite; }
.art--transfer .a-car { animation: a-bob .5s ease-in-out infinite; }
.art--transfer .a-pin { animation: a-pinbob 1.6s ease-in-out infinite; }

@keyframes a-pop { 0%, 10% { transform: scale(0); opacity: 0; } 22% { transform: scale(1.2); opacity: 1; } 30%, 80% { transform: scale(1); opacity: 1; } 92%, 100% { transform: scale(.4); opacity: 0; } }
@keyframes a-glow { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
.art--stays .a-tick { animation: a-pop 4s ease-in-out infinite; }
.art--stays .a-win { animation: a-glow 2.6s ease-in-out infinite; }

@keyframes a-rise { 0% { transform: scaleY(.18); } 30%, 78% { transform: scaleY(1); } 100% { transform: scaleY(.18); } }
@keyframes a-sim { 50% { transform: translateY(-3px) rotate(-2deg); } }
.art--esim .a-bar { transform-origin: 50% 100%; animation: a-rise 2.8s ease-in-out infinite; }
.art--esim .a-bar:nth-child(2) { animation-delay: .14s; }
.art--esim .a-bar:nth-child(3) { animation-delay: .28s; }
.art--esim .a-bar:nth-child(4) { animation-delay: .42s; }
.art--esim .a-sim { animation: a-sim 3.2s ease-in-out infinite; }

@keyframes a-draw { 0%, 6% { stroke-dashoffset: 100; opacity: 1; } 36%, 86% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes a-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes a-twink { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .25; transform: scale(.7); } }
.art--insurance .a-check { stroke-dasharray: 100; animation: a-draw 3.6s ease-in-out infinite; }
.art--insurance .a-shield { animation: a-beat 3.6s ease-in-out infinite; }
.art--insurance .a-spark1 { animation: a-twink 2.4s ease-in-out infinite; }
.art--insurance .a-spark2 { animation: a-twink 2.4s ease-in-out -1.2s infinite; }

@keyframes a-flip { 0%, 36% { transform: scaleX(1); } 43% { transform: scaleX(.05); } 50%, 86% { transform: scaleX(1); } 93% { transform: scaleX(.05); } 100% { transform: scaleX(1); } }
@keyframes a-face-a { 0%, 42% { opacity: 1; } 43%, 92% { opacity: 0; } 93%, 100% { opacity: 1; } }
@keyframes a-face-b { 0%, 42% { opacity: 0; } 43%, 92% { opacity: 1; } 93%, 100% { opacity: 0; } }
@keyframes a-slide-r { 0%, 100% { transform: translateX(-5px); } 50% { transform: translateX(6px); } }
@keyframes a-slide-l { 0%, 100% { transform: translateX(5px); } 50% { transform: translateX(-6px); } }
.art--forex .a-coin { animation: a-flip 6s ease-in-out infinite; }
.art--forex .a-face--a { animation: a-face-a 6s step-end infinite; }
.art--forex .a-face--b { opacity: 0; animation: a-face-b 6s step-end infinite; }
.art--forex .a-arr--r { animation: a-slide-r 2.2s ease-in-out infinite; }
.art--forex .a-arr--l { animation: a-slide-l 2.2s ease-in-out infinite; }

@keyframes a-capbob { 50% { transform: translateY(-3px); } }
@keyframes a-sway { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }
@keyframes a-drop { 0%, 8% { transform: translateY(-26px); opacity: 0; } 30% { transform: translateY(0); opacity: 1; } 38% { transform: translateY(-4px); } 46%, 88% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
.art--loans .a-cap { animation: a-capbob 3s ease-in-out infinite; }
.art--loans .a-tassel { transform-origin: 50% 0; animation: a-sway 2.4s ease-in-out infinite; }
.art--loans .a-drop { animation: a-drop 3.4s ease-in infinite; }

@keyframes a-card { 0% { transform: translate(70px, 8px) rotate(8deg); opacity: 0; } 18% { transform: translate(0, 0) rotate(-5deg); opacity: 1; } 76% { transform: translate(0, 0) rotate(-5deg); opacity: 1; } 94%, 100% { transform: translate(70px, 8px) rotate(8deg); opacity: 0; } }
.art--bank .a-card { animation: a-card 4.2s ease-in-out infinite; }

@keyframes a-hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 45% { transform: translateY(-9px) scale(.98, 1.03); } 60% { transform: translateY(-9px); } 85% { transform: translateY(0) scale(1.03, .96); } }
@keyframes a-shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 45%, 60% { transform: scaleX(.78); opacity: .6; } }
@keyframes a-lines { 0%, 100% { transform: translateX(-5px); opacity: .35; } 50% { transform: translateX(3px); opacity: 1; } }
.art--moving .a-box { transform-origin: 50% 100%; animation: a-hop 2.6s ease-in-out infinite; }
.art--moving .a-shadow { animation: a-shadow 2.6s ease-in-out infinite; }
.art--moving .a-lines { animation: a-lines 1.3s ease-in-out infinite; }

@keyframes a-lock { 0%, 20% { transform: translateY(-7px); } 34%, 100% { transform: translateY(0); } }
@keyframes a-line { 0%, 10% { opacity: .2; } 30%, 100% { opacity: 1; } }
.art--vault .a-shackle { animation: a-lock 3.4s ease-in-out infinite; }
.art--vault .a-ln:nth-child(1) { animation: a-line 3.4s ease-in-out infinite; }
.art--vault .a-ln:nth-child(2) { animation: a-line 3.4s ease-in-out .25s infinite; }
.art--vault .a-ln:nth-child(3) { animation: a-line 3.4s ease-in-out .5s infinite; }

@keyframes a-ring { 0% { transform: rotate(0); } 8% { transform: rotate(-16deg); } 16% { transform: rotate(14deg); } 24% { transform: rotate(-10deg); } 32% { transform: rotate(7deg); } 40%, 100% { transform: rotate(0); } }
@keyframes a-ping { 0%, 4% { transform: scale(.45); opacity: .9; } 55%, 100% { transform: scale(1.5); opacity: 0; } }
@keyframes a-date { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.art--deadlines .a-bell { transform-origin: 50% 0; animation: a-ring 3.2s ease-in-out infinite; }
.art--deadlines .a-ping { animation: a-ping 3.2s ease-out infinite; }
.art--deadlines .a-date { animation: a-date 1.6s ease-in-out infinite; }

@keyframes a-dot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-7px); } }
@keyframes a-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.22) rotate(18deg); } }
.art--assistant .a-dot { animation: a-dot 1.3s ease-in-out infinite; }
.art--assistant .a-dot--2 { animation-delay: .16s; }
.art--assistant .a-dot--3 { animation-delay: .32s; }
.art--assistant .a-twinkle { animation: a-twinkle 2.4s ease-in-out infinite; }
.art--assistant .a-twinkle--2 { animation-delay: -1.2s; }

/* animate only what is on screen: off-screen slider, or slides scrolled out of the track */
.slider.is-off .art *, .slider.is-off .scard__dot,
.slider.is-ready .slide:not(.is-in-view) .art *, .slider.is-ready .slide:not(.is-in-view) .scard__dot { animation-play-state: paused; }

/* ---------- motion preferences: icons rest in their finished pose, nothing auto-advances ---------- */
@media (prefers-reduced-motion: reduce) {
  .art *, .scard__dot { animation: none !important; transition: none !important; }
  .art--forex .a-face--b { opacity: 0; }
  .slider__track { scroll-behavior: auto; }
  .scard, .scard__go, .sdot::before, .ask__chip { transition: none; }
  .ask__input::placeholder { transition: none; }
}
body:has(#calm-toggle:checked) .art *, body:has(#calm-toggle:checked) .scard__dot,
.slider.is-calm .art *, .slider.is-calm .scard__dot { animation: none !important; }
body:has(#calm-toggle:checked) .art--forex .a-face--b { opacity: 0; }

/* wide screens: the row is cut at the container edge, so fade the cut instead of chopping the cards */
@media (min-width: 900px) {
  .slider__view { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
}

/* ---------- small screens: keep everything inside the viewport ---------- */
@media (max-width: 639px) {
  .hero--home .hero__top { justify-content: center; }
  .ask__meta { justify-content: center; }
  .ask__help { text-align: center; padding-top: 0; flex-basis: 100%; }
  .hero__cta2 { gap: .5rem 1.25rem; }
  .scard { min-height: 21rem; }
}
@media (max-width: 639px) {
  .ask__chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding: .45rem var(--gutter) .65rem; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); }
  .ask__chips::-webkit-scrollbar { display: none; }
  .ask__chips li { flex: none; scroll-snap-align: start; }
  .ask__chip { white-space: nowrap; }
  .ask__try { text-align: left; margin-left: .35rem; }
}