/* ---------- Tokens ---------- */
:root{
  --brand:#9C1D26; --brand-hi:#C3303B; --brand-deep:#5E0F15; --night:#16070A;
  --ink:#0C0C0D; --ink-2:#4F4F55; --ink-3:#8A8A90;
  --bg:#FFFFFF; --bg-2:#F4F3F1; --line:rgba(12,12,13,.09);
  --pos:#1F9D55;
  --r-card:32px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --font-d:"Inter Tight",Inter,system-ui,sans-serif;
  --font:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(16px,4vw,56px);
}
@property --sweep{syntax:'<angle>';inherits:false;initial-value:360deg}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:var(--font);color:var(--ink);background:var(--bg);overflow-x:hidden;font-size:16px;line-height:1.5}
body.locked{overflow:hidden;height:100vh}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{flex:none}
.display{font-family:var(--font-d);font-weight:600;letter-spacing:-.035em;line-height:1}
.kicker{font-size:14px;font-weight:600;color:var(--brand);letter-spacing:.01em;margin-bottom:12px} /* 220:00 deposits audit: eyebrow bound tighter to its heading (measured ~24px gap read as detached); calc-head keeps its own air via override */
.lede{font-size:clamp(16px,1.25vw,19px);color:var(--ink-2);max-width:34em;margin-top:20px}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

/* ---------- Brand mark (placeholder) ---------- */
.mark{width:32px;height:32px}
.mark .mk-bg{fill:var(--brand)}
.mark rect:not(.mk-bg){fill:#fff}
.brand-logo{height:36px;width:auto;display:block}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:700;font-size:17px;letter-spacing:-.01em;white-space:nowrap}
.logo b{font-weight:500}

/* ---------- Buttons ---------- */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:600;transition:background .25s,color .25s,transform .25s var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--brand)}
.btn-ghost:hover{background:var(--bg-2)}
.btn-lg{height:52px;padding:0 26px;font-size:15px;margin-top:32px}

/* ---------- Shared "feature" composition (intro + centre card) ---------- */
.feature{position:relative;overflow:hidden;container-type:size;background:var(--night);color:#fff;isolation:isolate}
.f-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 18%}
.f-shade{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(22,7,10,.35) 0%,rgba(22,7,10,0) 28%,rgba(22,7,10,0) 48%,rgba(60,8,14,.88) 100%)}
.f-grain{position:absolute;inset:0;opacity:.14;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.f-fallback{display:none;position:absolute;inset:0;
  background:radial-gradient(70cqmax 60cqmax at 62% 42%,rgba(195,48,59,.55),transparent 62%),
             radial-gradient(60cqmax 50cqmax at 0% 100%,rgba(94,15,21,.9),transparent 70%),
             linear-gradient(180deg,#1c080b,#0f0405)}
.no-photo .f-fallback{display:block}
.f-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% 50%}
@container (orientation:portrait){.f-video{object-position:72% 40%}}
.orbits{position:absolute;left:62cqw;top:44cqh;width:0;height:0}
.orbits i{position:absolute;left:0;top:0;border:1px solid rgba(255,255,255,.09);border-radius:50%;transform:translate(-50%,-50%)}
.orbits i:nth-child(1){width:62cqmin;height:78cqmin}
.orbits i:nth-child(2){width:96cqmin;height:120cqmin;border-color:rgba(255,255,255,.06)}
.orbits i:nth-child(3){width:134cqmin;height:168cqmin;border-color:rgba(255,255,255,.04)}
.f-card{position:absolute;left:62cqw;top:44cqh;width:min(46cqmin,420px);transform:translate(-50%,-50%) rotate(-11deg)}
@container (orientation:portrait){
  .orbits,.f-card{left:50cqw;top:30cqh}
  .f-card{width:64cqw}
}

/* Credit card (horizontal) */
.cc{position:relative;container-type:inline-size;aspect-ratio:1.586;border-radius:6%/9.5%;overflow:hidden;
  background:
    repeating-linear-gradient(100deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),
    radial-gradient(120% 90% at 88% -10%,rgba(255,255,255,.28),transparent 45%),
    linear-gradient(135deg,#3b0c12 0%,#8d1a24 48%,#2a070b 100%);
  box-shadow:0 40px 80px -24px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.14)}
.cc-sheen{position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);animation:sheen 5s ease-in-out infinite}
@keyframes sheen{0%,60%{transform:translateX(-40%)}100%{transform:translateX(40%)}}
.cc-brand{position:absolute;left:7cqw;top:8cqw;font:700 5.4cqw/1 var(--font-d);letter-spacing:.02em}
.cc-chip{position:absolute;left:7cqw;top:26cqw;width:13cqw;aspect-ratio:1.3;border-radius:1.6cqw;
  background:linear-gradient(135deg,#e9d39a,#a8873e 60%,#e3cc8d);box-shadow:inset 0 0 0 .4cqw rgba(0,0,0,.15)}
.cc-tag{position:absolute;left:7cqw;bottom:8cqw;font:600 3.6cqw/1 var(--font);letter-spacing:.18em;opacity:.85}

/* ---------- Intro ---------- */
.intro{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:100;border-radius:0}
.intro-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(22,7,10,.78) 0%,rgba(22,7,10,.35) 45%,transparent 70%)}
.intro-brand{position:absolute;left:var(--gutter);top:28px;display:flex;align-items:center;gap:12px;z-index:2}
.intro-brand .brand-logo{height:44px}
.intro-brand .mk-bg{fill:#fff}
.intro-brand .mark rect:not(.mk-bg){fill:var(--brand)}
.iw{font:700 19px/1 var(--font-d);letter-spacing:-.01em}
.iw b{font-weight:500}
.intro-copy{position:absolute;left:var(--gutter);bottom:clamp(64px,12vh,140px);z-index:2;max-width:min(1100px,92vw)}
.il{display:block;overflow:hidden;padding-bottom:.06em}
.il>span{display:inline-block}
.il-eyebrow{font-size:14px;font-weight:600;letter-spacing:.02em;margin-bottom:18px;opacity:.85}
.intro-h{font-family:var(--font-d);font-weight:600;letter-spacing:-.045em;line-height:.98;font-size:clamp(46px,8.4vw,140px)}
.il-sub{margin-top:22px;font-size:clamp(16px,1.4vw,20px);opacity:.8}
.ring-slot{display:inline-block;width:.6em;height:.72em;vertical-align:-.015em;margin-right:.02em;position:relative}
.ring{position:absolute;inset:0;display:block;border:.1em solid #fff;border-radius:50%;
  -webkit-mask:conic-gradient(from 200deg,#000 var(--sweep),transparent 0);mask:conic-gradient(from 200deg,#000 var(--sweep),transparent 0)}
.ring.free{position:fixed;inset:auto;border-radius:var(--rx) / var(--ry);-webkit-mask:none;mask:none;z-index:130;pointer-events:none;box-sizing:border-box}
.intro-skip{position:fixed;right:var(--gutter);bottom:28px;z-index:160;color:#fff;display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:999px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.42);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:13px;font-weight:600}
.intro-skip:hover{background:rgba(255,255,255,.3)}
.intro-skip svg{width:14px;height:14px}
.intro-progress{position:absolute;left:var(--gutter);right:calc(var(--gutter) + 90px);bottom:45px;height:2px;background:rgba(255,255,255,.35);border-radius:2px;overflow:hidden;z-index:2}
.intro-progress i{display:block;height:100%;background:#fff;transform-origin:0 50%}
@media (max-width:767px){
  .intro-scrim{background:linear-gradient(0deg,rgba(22,7,10,.85) 0%,rgba(22,7,10,.4) 55%,transparent 80%)}
  .intro-copy{bottom:96px}
}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;height:72px;display:flex;align-items:center;gap:32px;padding:0 var(--gutter);
  transition:background .3s,box-shadow .3s}
.nav.scrolled{background:rgba(255,255,255,.82);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);box-shadow:0 1px 0 var(--line)}
.nav-links{display:flex;gap:4px}
.nav-links a{font-size:14px;font-weight:500;color:var(--ink-2);padding:8px 12px;border-radius:999px;transition:color .2s,background .2s}
.nav-links a:hover,.nav-links a.on{color:var(--ink)}
.nav-links a:hover{background:var(--bg-2)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.nav-search{display:flex;align-items:center;gap:10px;height:40px;padding:0 10px 0 14px;border-radius:999px;background:var(--bg-2);color:var(--ink-3);font-size:14px;
  width:44px;overflow:hidden;opacity:0;pointer-events:none;transform:translateY(-6px);
  transition:width .55s var(--ease-out),opacity .35s,transform .45s var(--ease-out),background .2s}
.nav-search svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.nav-search kbd{margin-left:auto;font:500 12px var(--font);border:1px solid var(--line);border-radius:6px;padding:1px 6px;background:#fff}
.nav-search:hover{background:#ecebe8}
.nav.docked .nav-search{width:260px;opacity:1;pointer-events:auto;transform:none}
@media (max-width:1100px){.nav-links{display:none}}
@media (max-width:767px){
  .nav{gap:12px}
  .nav .btn-ghost{display:none}
  .nav.docked .nav-search{width:40px;padding:0 11px}
  .nav-search span,.nav-search kbd{display:none}
  .logo span{font-size:15px}
  .nav .btn-ink{height:36px;padding:0 14px;font-size:13px}
  .s-kbd{display:none}
  .search{height:60px;padding-left:20px}
  .s-go{width:42px;height:42px}
  .tcard .tc-ui{bottom:84px}
}

/* ---------- Hero ---------- */
.hero{padding:76px 12px 0}
/* Campaign banner (Revolut-style full-bleed, HDFC-style search on its edge) */
.banner{position:relative;height:clamp(500px,calc(100vh - 250px),680px);border-radius:36px;overflow:hidden;color:#fff;isolation:isolate}
.b-bg{position:absolute;inset:0;background:
  radial-gradient(38% 60% at 72% 34%,rgba(214,64,76,.55),transparent 70%),
  radial-gradient(70% 90% at 100% 100%,rgba(120,18,28,.75),transparent 70%),
  linear-gradient(115deg,#0d0506 0%,#1d080b 45%,#3a0c12 100%)}
.b-bars{position:absolute;right:0;top:40%;width:52%;height:46%;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;z-index:0}
.b-bars i{display:block;height:20%;background:linear-gradient(90deg,#9C1D26,#B4232E);border-radius:6px 0 0 6px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 46%);mask-image:linear-gradient(90deg,transparent 0,#000 46%)} /* 182:00 bar left ends hard-cut mid-hero at desktop widths; dissolve into the background like the 177 chip fade */
.b-bars i:nth-child(1){width:78%}
.b-bars i:nth-child(2){width:100%}
.b-bars i:nth-child(3){width:62%}
.b-amitabh{position:absolute;bottom:0;right:clamp(40px,10vw,190px);height:96%;width:auto;z-index:1;
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,#000 82%,transparent 100%);
  filter:contrast(1.04) drop-shadow(0 30px 60px rgba(0,0,0,.45))}
.banner .f-grain{z-index:2;opacity:.1}
.b-copy{position:absolute;left:clamp(28px,5.5vw,96px);top:47%;transform:translateY(-50%);z-index:3;max-width:min(560px,46%)}
.b-h{font-size:clamp(56px,min(7.2vw,13vh),118px);line-height:.92;margin-top:24px}
.b-sub{margin-top:22px;font-size:clamp(16px,1.3vw,19px);color:rgba(255,255,255,.72);max-width:28em}
.b-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.b-ctas .btn-lg{margin-top:0}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{background:#f1e6e7}
.btn-glass{background:rgba(255,255,255,.05);color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.5)}
.btn-glass:hover{background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.announce.announce--dark{background:rgba(255,255,255,.1);color:#fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.announce.announce--dark:hover{background:rgba(255,255,255,.18)}
.w-card{position:absolute;z-index:4;left:37%;top:60%;display:flex;align-items:center;gap:14px;padding:12px 18px 12px 12px;border-radius:20px;
  background:rgba(20,6,9,.45);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 20px 40px -20px rgba(0,0,0,.6)}
.w-card img{width:86px;border-radius:7px;box-shadow:0 6px 14px rgba(0,0,0,.4)}
.w-card small{display:block;font-size:12px;color:rgba(255,255,255,.65)}
.w-card b{display:block;font-size:15px;font-weight:600;margin-top:2px}
.banner .w-toast{left:auto;right:clamp(24px,4vw,60px);bottom:14%;width:300px;z-index:4}
/* Search sits on the banner's bottom edge */
.search-dock{position:relative;z-index:5;margin:-34px auto 0;width:min(880px,calc(100% - 24px));display:flex;flex-direction:column;align-items:center}
.search-dock .search-wrap{width:100%;margin:0}
.chips-l{font-size:13px;font-weight:600;color:var(--ink-2);align-self:center;margin-right:4px}
.trip-sec{padding:clamp(72px,12vh,140px) var(--gutter) 0;overflow:hidden}
.trip-h{font-size:clamp(40px,4.8vw,72px);text-align:center}
@media (max-width:900px){
  .banner{height:clamp(470px,calc(100svh - 270px),600px);min-height:0;padding:40px 24px 0;display:flex;flex-direction:column}
  .b-copy{position:relative;left:auto;top:auto;transform:none;max-width:none}
  .b-h{font-size:clamp(52px,14vw,84px)}
  .b-copy{order:0}
  .banner{padding-top:28px}
  .b-h{margin-top:18px}
  .b-sub,.b-ctas .btn-glass{display:none}
  .b-ctas{margin-top:20px}
  .b-ctas .btn-lg{height:46px;font-size:14px}
  .b-amitabh{position:absolute;right:-6%;bottom:0;height:56%;width:auto;margin:0}
  .b-bars{top:auto;bottom:10%;height:22%;width:80%}
  .w-card{display:none}
  .banner .w-toast{right:16px;left:16px;width:auto;bottom:48px}
  .search-dock{margin-top:-30px}
  @media (max-width:767px){.search-dock{margin-top:-16px}.chips{margin-top:24px}} /* 196:00 rails-to-halo clearance: -22 left only ~3px between the slide rails and the halo top (196a capture); 6px lower dock gives the overlap breathing room; was 190:00 hero-to-search spacing read cramped at 390 (queued 188) */
  
  .chips-l{display:none}
}
.announce{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 12px 0 10px;border-radius:999px;background:var(--bg-2);font-size:13px;font-weight:600;transition:background .2s}
.announce:hover{background:#ecebe8}
.announce .dot{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px rgba(156,29,38,.15)}
.announce svg{width:14px;height:14px}
.hero-h{font-size:clamp(46px,7.2vw,108px);margin-top:22px}
.hero-sub{margin-top:16px;color:var(--ink-2);font-size:clamp(16px,1.3vw,19px)}

.search-wrap{width:min(720px,100%);margin-top:34px;position:relative}
.search{position:relative;display:flex;align-items:center;gap:14px;width:100%;height:68px;padding:0 10px 0 24px;border-radius:999px;background:#fff;text-align:left;
  border:1.5px solid rgba(12,12,13,.12);box-shadow:0 18px 50px -20px rgba(0,0,0,.28),0 2px 6px rgba(12,12,13,.04);
  transition:border-color .3s,box-shadow .3s,transform .4s var(--ease-out);overflow:hidden}
.search:hover{border-color:rgba(156,29,38,.45);box-shadow:0 22px 60px -20px rgba(0,0,0,.38),0 2px 6px rgba(12,12,13,.04)}
.s-ic{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round}
.s-ph{flex:1;font-size:17px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-ph .caret{display:inline-block;width:1.5px;height:1.1em;background:var(--brand);vertical-align:-.18em;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.s-kbd{font:500 12px var(--font);color:var(--ink-3);border:1px solid var(--line);border-radius:6px;padding:2px 8px}
.s-go{width:48px;height:48px;border-radius:50%;background:var(--brand);display:grid;place-items:center;transition:background .2s,transform .3s var(--ease-out)}
.s-go svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.search:hover .s-go{transform:translateX(2px)}
/* landing moment */
.search::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(156,29,38,.10) 50%,transparent 70%);transform:translateX(-100%);pointer-events:none}
.search.landed::after{animation:sweep 1.2s var(--ease-out) forwards}
.search.landed{animation:searchLand 1.6s var(--ease-out)}
@keyframes sweep{to{transform:translateX(100%)}}
@keyframes searchLand{0%{box-shadow:0 0 0 0 rgba(156,29,38,.35),0 18px 50px -20px rgba(94,15,21,.28)}100%{box-shadow:0 0 0 18px rgba(156,29,38,0),0 18px 50px -20px rgba(94,15,21,.28)}}

.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:18px}
.chips button{height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(12,12,13,.16);font-size:14px;font-weight:500;color:var(--ink);transition:all .2s}
.chips button:hover{border-color:var(--ink);color:var(--ink)}

/* Triptych */
.trip{display:flex;justify-content:center;align-items:flex-start;gap:24px;margin-top:clamp(40px,6vh,64px);padding-bottom:clamp(64px,10vh,120px)}
.tcard{position:relative;flex:none;width:clamp(300px,26vw,390px);aspect-ratio:.7;border-radius:var(--r-card);overflow:hidden;background:#ddd;color:#fff;container-type:size}
.tcard>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tc-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.55) 100%)}
.tc-ui{position:absolute;left:0;right:0;top:auto;bottom:96px;text-align:center;z-index:2} /* 161:00 side cards were top:38% while the feature card sat bottom:96px - three uncoordinated anchor points read as uneven internal rhythm; all three stacks now share the same bottom inset above their toasts */
.tc-label{font-size:13px;font-weight:500;opacity:1;text-shadow:0 1px 14px rgba(0,0,0,.38)} /* 216:00 trip-section audit: 13px label over busy photos sat near AA; solid + soft shadow keeps it legible without veiling the photo */
.tc-amt{font:600 clamp(40px,4.2vw,58px)/1.05 var(--font-d);letter-spacing:-.03em;margin-top:4px}
.tc-amt small{font-size:.5em;letter-spacing:0}
.tc-pill{display:inline-flex;margin-top:14px;height:34px;align-items:center;padding:0 16px;border-radius:999px;background:#fff;color:var(--ink);font-size:13px;font-weight:600} /* 216:00 audit: .92 alpha read as a disabled ghost pill on photo cards; solid white */
.toast{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:20px;background:#fff;color:var(--ink);box-shadow:0 10px 30px -10px rgba(0,0,0,.35)}
.t-ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(156,29,38,.1);color:var(--brand);font-size:16px;flex:none}
.t-ic--green{background:rgba(31,157,85,.12);color:var(--pos);font-weight:600}
.t-tx{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.t-tx b{font-size:14px;font-weight:600}
.t-tx small{font-size:12px;color:rgba(12,12,13,.66)} /* 216:00 audit: ink-3 secondary ran ~3:1 on the white toast, below AA small-text; .66 lands ~5:1 */
.t-amt{margin-left:auto;font-size:14px;font-weight:600;white-space:nowrap}
.pos{color:var(--pos)}
.tcard.center{z-index:2}
.tcard.center .tc-ui{top:auto;bottom:96px}
.tcard.center .f-shade{background:linear-gradient(180deg,rgba(22,7,10,.2) 0%,transparent 30%,rgba(60,8,14,.55) 62%,rgba(60,8,14,.92) 100%)}

@media (max-width:1023px){
  .trip{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;margin-left:calc(-1*var(--gutter));margin-right:calc(-1*var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter);scrollbar-width:none;gap:12px}
  .trip::-webkit-scrollbar{display:none}
  .trip-prog{display:flex;height:2px;width:120px;margin:18px auto 0;border-radius:2px;background:rgba(12,12,13,.10)} /* 190:00 scroll-affordance hint for the mobile trip row (queued 188) */
  .trip-prog span{display:block;height:100%;width:33%;border-radius:2px;background:rgba(12,12,13,.38);transition:width .15s linear}
  .tcard{width:min(78vw,360px);scroll-snap-align:center}
  .tcard.center{order:-1}
}

/* pre-intro hidden states */
.pre .nav,.pre [data-in],.pre .search,.pre .b-amitabh,.pre .b-bars i{opacity:0}

/* ---------- Cards (tray) ---------- */
.cards{background:radial-gradient(120% 70% at 50% 0%,#2a0d11 0%,#120708 45%,#0b0b0c 100%);color:#fff;overflow:hidden}
.cards-pin{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:120px var(--gutter) 64px;text-align:center}
.cards .kicker{color:#ff8b93}
.cards h2{font-size:clamp(40px,5.6vw,84px)}
.cards .lede{color:rgba(255,255,255,.72);margin-left:auto;margin-right:auto}
.tray{position:relative;width:min(1080px,100%);aspect-ratio:3;margin-top:clamp(36px,6vh,64px);perspective:1400px}
.tray-back{position:absolute;left:2%;right:2%;bottom:20%;height:42%;border-radius:22px 22px 0 0;background:linear-gradient(180deg,#26262a,#141416);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.tray-cards{position:absolute;left:5%;right:5%;top:0;bottom:13%;display:flex;justify-content:center;align-items:flex-end;gap:1.6%}
.vc{position:relative;width:28%;aspect-ratio:576/364;object-fit:cover;flex:none;margin-left:-13.6%;border-radius:4.5%/7%;
  box-shadow:0 -12px 40px -10px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);transform-origin:50% 100%;will-change:transform;
  transition:translate .7s var(--ease-out)}
.vc:first-child{margin-left:0}
.vc.lift{translate:0 -26%}
.tray-lip{position:absolute;left:0;right:0;bottom:0;height:25%;border-radius:20px 20px 30px 30px;z-index:3;
  background:linear-gradient(180deg,rgba(92,92,98,.38) 0%,rgba(30,30,33,.94) 34%,#0c0c0d 100%);
  backdrop-filter:blur(2.5px);-webkit-backdrop-filter:blur(2.5px);
  box-shadow:0 50px 90px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.28)}
.lip-edge{position:absolute;left:4%;right:4%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent)}
.seg{display:inline-flex;gap:4px;margin-top:32px;padding:4px;border-radius:999px;background:rgba(255,255,255,.14)}
.tray-dots{display:none} /* 178:00 mobile-only scroll affordance for the card tray */
.seg button{height:36px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:600;color:rgba(255,255,255,.62);transition:all .3s} /* 194:00 inactive labels dimmed so the filled active pill carries the state (revolut filled-vs-outlined takeaway) */
.seg button.on{background:#fff;color:var(--ink)}
@media (max-width:767px){
  .tray{aspect-ratio:1.25}
  .tray-cards{left:4%;right:4%}
  .tray{aspect-ratio:1.9}
  .vc{width:58%;margin-left:-24%!important}
  .vc:not(.show){display:none}
  .vc.show:first-of-type,.vc.show:not(.show + .show){margin-left:0!important}
  .vc.lift{translate:none}
  .tray-dots{display:flex;justify-content:center;gap:7px;margin-top:14px}
  .tray-dots span{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.6);transition:background .3s,width .3s} /* 214:00 queued-192 verified passing at 390; analyzer optional nudge .5->.6 for native-res legibility */ /* 194:00 inactive dots lifted .28->.5, were near-invisible at 390 */
  .tray-dots span.on{background:#fff;width:18px}
}

.calc-head{text-align:center;margin:0 auto 26px}.calc-head .kicker{margin-bottom:24px} /* 212:00 Revolut ref: kicker reads as a label with real air; H2-to-cards gap matches the section rhythm */
.calc-head .display{font-size:clamp(32px,3.6vw,54px);letter-spacing:-.02em}
.calc{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:1080px;margin:0 auto;padding:24px var(--gutter) clamp(80px,12vh,140px)}
.meter,.calc-box{border-radius:28px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);padding:clamp(24px,3vw,40px)}
.m-label,.calc-box label{font-size:14px;color:rgba(255,255,255,.6);font-weight:500}
.odo{display:inline-flex;align-items:flex-start}
.od{display:inline-block;height:1em;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.trip-prog{display:none}
.strip{display:flex;flex-direction:column;will-change:transform}
.strip span{display:block;height:1em;line-height:1}
.od-dot{display:inline-block;overflow:hidden;line-height:1}
.m-val{display:flex;align-items:flex-start;font:600 clamp(72px,9vw,140px)/1 var(--font-d);letter-spacing:-.05em;margin-top:10px;font-variant-numeric:tabular-nums}
.m-val .pct{align-self:flex-end;margin-bottom:.1em;font-size:.5em;margin-left:.04em;color:#ff8b93}
.m-track{height:6px;border-radius:6px;background:rgba(255,255,255,.3);margin-top:20px;overflow:hidden} /* 172:00 track 0.1 -> 0.22, was near-invisible on the dark calc panel */
.m-track i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--brand),#ff8b93);border-radius:6px}
.m-foot{margin-top:18px;font-size:14px;color:rgba(255,255,255,.72)} /* 212:00 body copy below AA at 13px/.64 */
.m-scale{display:flex;justify-content:space-between;margin-top:8px;padding:0 2px;font-size:11px;font-weight:500;color:rgba(255,255,255,.6)} /* 212:00 the bare fill track read as an unfinished slider; endpoints make it a before/after scale */ /* 106:00 meter fine print to ~7:1 (was .5) */
.calc-box output{display:block;font:600 clamp(36px,4vw,56px)/1.1 var(--font-d);letter-spacing:-.03em;margin:10px 0 18px;font-variant-numeric:tabular-nums}
.calc-box input[type=range]{width:100%;height:44px;appearance:none;background:transparent;-webkit-appearance:none} /* 106:00 44px touch target */
.calc-box input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:rgba(255,255,255,.3)}
.calc-box input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:#fff;margin-top:-8px;box-shadow:0 1px 4px rgba(0,0,0,.45)}
.calc-box input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:rgba(255,255,255,.3)}
.calc-box input[type=range]::-moz-range-thumb{width:22px;height:22px;border:none;border-radius:50%;background:#fff}
.calc-scale{display:flex;justify-content:space-between;margin-top:-16px;padding:0 11px;font-size:12px;font-weight:500;color:rgba(255,255,255,.86)} /* 109:00 min/max scale hints under the spend slider (106:00 queued); 112:00 labels inset by the 11px thumb radius so each label edge aligns with the thumb-center travel ends (the value extremes), not the bare container edges */
.calc-row{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-top:1px solid rgba(255,255,255,.08);font-size:15px;color:rgba(255,255,255,.82)} /* 106:00 "At 3.5% markup + 18% GST" row to ~8:1 */
.calc-row:first-of-type{margin-top:18px} /* 212:00 scale labels were touching the divider */
.calc-row b{font:600 20px var(--font-d);color:#fff;font-variant-numeric:tabular-nums}
.calc-row:not(.hi) b{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:rgba(255,139,147,1);color:rgba(255,255,255,.85)} /* 172:00 struck figure 0.6 -> 0.78, strike 2px solid */
.calc-row.hi b{font-size:28px;color:#7be3a6}
.calc-row.hi span::before{content:"\2713\00a0";color:#7be3a6;font-weight:700} /* 172:00 non-colour cue on the saved row, colour-blind safe */
@media (max-width:767px){.calc{grid-template-columns:1fr}}

/* ---------- Phone section ---------- */
.phone-sec{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:48px;padding:clamp(80px,14vh,160px) var(--gutter);
  background:linear-gradient(180deg,#e9e7e4,#f6f5f3 60%,#fff);max-width:none}
.ps-copy{justify-self:end;max-width:520px}
.ps-copy h2,.split-copy h2{font-size:clamp(40px,4.8vw,72px)}
.ps-phone{justify-self:start;padding-left:4vw}
.phone{position:relative;width:352px;aspect-ratio:.485; /* 161:00 330->352px: inner app UI was too small to read at demo distance */border-radius:54px;background:#0c0c0d;padding:12px;
  box-shadow:0 60px 120px -40px rgba(12,12,13,.45),inset 0 0 0 2px #2b2b2e}
.ph-notch{position:absolute;top:22px;left:50%;width:96px;height:28px;margin-left:-48px;border-radius:20px;background:#000;z-index:2}
.ph-screen{position:relative;height:100%;border-radius:43px;overflow:hidden;background:linear-gradient(180deg,#5b1219 0%,#2a0a0e 42%,#f4f3f1 42.1%);padding:58px 18px 18px;color:#fff}
.ph-top{position:absolute;top:18px;left:30px;right:30px;display:flex;justify-content:space-between;font-size:13px;font-weight:600}
.ph-bat{width:24px;height:11px;border-radius:3px;border:1.5px solid #fff;position:relative}
.ph-bat::after{content:"";position:absolute;inset:1.5px 5px 1.5px 1.5px;background:#fff;border-radius:1px}
.ph-label{text-align:center;font-size:12px;opacity:.75;margin-top:8px}
.ph-amt{text-align:center;font:600 40px/1.1 var(--font-d);letter-spacing:-.03em}
.ph-amt small{font-size:.5em}
.ph-actions{display:flex;justify-content:center;gap:8px;margin-top:14px}
.ph-actions span{font-size:12px;font-weight:600;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.14)}
.ph-chart{position:relative;display:flex;align-items:flex-end;gap:5px;height:92px;margin:22px 4px 0;padding:12px;border-radius:18px;background:#fff;box-shadow:0 8px 20px -10px rgba(0,0,0,.2)}
.ph-chart i{flex:1;height:var(--h);border-radius:4px;background:#e5d4d6;transform-origin:50% 100%}
.ph-chart i.now{background:var(--brand)}
.ph-val{font-size:11px;font-weight:600;color:var(--pos)} /* 210:00: value reads in the caption row, never over the bars */ /* 210:00: the highlighted bar carried no value; label reads against the interest rows below */
.ph-caption{font-size:11px;color:var(--ink-2);margin:0}
.ph-caprow{display:flex;align-items:baseline;justify-content:space-between;margin:8px 6px 0} /* 204:00 contrast pass, ink-3 read washed out on the off-white screen */
.ph-list{list-style:none;margin-top:10px;background:#fff;border-radius:18px;padding:4px 12px;color:var(--ink)}
.ph-list li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.ph-list li:last-child{border:0}
.ph-more{text-align:center;font-size:12.5px;font-weight:600;color:var(--ink-2);margin:7px 0 2px} /* 206:00 fill the mockup lower half with real app affordance */
.ph-list .t-ic{width:30px;height:30px;font-size:13px}
.ph-list .t-ic:not(.t-ic--green){background:rgba(12,12,13,.07);color:var(--ink-2)} /* 204:00 debit chip read as error state in red */
.ph-list span:nth-child(2){display:flex;flex-direction:column;line-height:1.25}
.ph-list b{font-size:13px;font-weight:600}
.ph-list small{font-size:11.5px;color:var(--ink-2)} /* 163:00 sublabels darkened, ink-3 read too faint on the white card */
.ph-list em{margin-left:auto;font-style:normal;font-size:12px;font-weight:600;white-space:nowrap} /* 206:00 mobile amount wrapped onto two lines */
.ph-list em.pos{color:#157A42} /* 204:00 green amounts below AA at 12px, deepened inside the mockup only */
@media (max-width:900px){
  .phone-sec{grid-template-columns:1fr}
  .ps-copy{justify-self:start}
  .ps-phone{justify-self:center;padding:0}
  .phone{width:min(322px,84vw)} /* 161:00 300->322px: mockup inner UI illegible at 390px */
  .ph-amt{font-size:44px}
  .ph-actions span{font-size:13px;padding:8px 13px}
  .ph-list b{font-size:14px}
  .ph-list small{font-size:13.5px;color:var(--ink-2)} /* 163:00 sublabel legibility, final step from the 161 queue (mobile floor reached at 13.5) */
}

/* ---------- Splits ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(32px,6vw,96px);max-width:1240px;margin:0 auto;padding:clamp(72px,12vh,140px) var(--gutter)}
.split.rev .media{order:2}
.media{position:relative;border-radius:var(--r-card);overflow:hidden;aspect-ratio:.86;max-width:520px;width:100%;justify-self:center;background:var(--bg-2)}
.media img{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;filter:saturate(.88) contrast(1.03) brightness(1.02)}
.media.js-fade img{opacity:1;transition:opacity .55s var(--ease-out)}
.media.js-fade img:not(.ld){opacity:0}
.m-ui{position:absolute;left:18px;right:18px;bottom:18px;padding:20px 22px;border-radius:24px;background:rgba(12,12,13,.78);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:#fff}
.mu-amt{font:600 38px/1.1 var(--font-d);letter-spacing:-.03em;margin-top:2px}
.mu-steps{display:flex;gap:6px;margin-top:14px}
.mu-steps span{flex:1;font-size:12px;font-weight:600;padding-top:10px;border-top:3px solid rgba(255,255,255,.2);color:rgba(255,255,255,.64)}
.mu-steps span.done{border-color:#7be3a6;color:#fff}
.mu-bar{height:4px;border-radius:6px;background:rgba(255,255,255,.15);margin-top:14px;overflow:hidden}
.mu-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#7be3a6,#4ec98a);transform-origin:0 50%} /* 220:00 mobile critique: a matured deposit read as a red warning bar; success green matches the loans widget done-steps */
.mu-note{font-size:12px;color:rgba(255,255,255,.78);margin-top:10px} /* 220:00: secondary line on dark glass bumped to ~78% white for AA on busy photos */
@media (max-width:900px){
  .split{grid-template-columns:1fr}
  .mu-steps span{font-size:13px}
  .split .btn-lg{display:block;width:100%;text-align:center}
  .split.rev .media{order:0}
}

section[id]{scroll-margin-top:84px} /* 222:00: anchored sections landed with their heading under the sticky nav */

/* ---------- All tiles ---------- */
.all{max-width:1240px;margin:0 auto;padding:clamp(72px,12vh,140px) var(--gutter)}
.all h2{font-size:clamp(40px,4.8vw,72px)}
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:28px} /* 222:00 tiles audit: 48px gap read as detached from its own grid; heading now binds to the tiles */
.tile{display:flex;flex-direction:column;gap:6px;padding:24px;border-radius:24px;background:var(--bg-2);min-height:140px;justify-content:flex-end;position:relative;transition:background .3s,transform .5s var(--ease-out)}
.tile::after{content:"";position:absolute;right:20px;top:20px;width:12px;height:12px;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);opacity:.8;transition:all .3s} /* 222:00: corner arrow was too faint against the tile */
.tile b{font:600 20px var(--font-d);letter-spacing:-.01em;min-height:52px;display:flex;align-items:flex-end} /* 222:00: titles wrap to 2 lines on narrow tiles, so subtitles started at different heights across a row; the reserved 2-line box bottom-aligns every title and lines the subtitles up */
.tile span{font-size:14px;color:var(--ink-2)}
.tile:hover{background:#ecebe8;transform:translateY(-3px)}
.tile:hover::after{opacity:1;color:var(--brand);right:18px}
@media (max-width:900px){.tiles{grid-template-columns:1fr 1fr}}

/* ---------- Manifesto ---------- */
.mani{padding:clamp(80px,16vh,200px) var(--gutter);max-width:1240px;margin:0 auto}
.mani-tx{font-size:clamp(32px,4.4vw,68px);line-height:1.12;letter-spacing:-.03em} /* 222:00 desktop audit: descenders of simple/always crowded the ascenders below at 1.08 */
.mani-tx .w{opacity:1}
.mani-tx .w.brand{color:var(--brand)}

/* ---------- Footer ---------- */
.foot{background:var(--bg-2);padding:64px var(--gutter) 40px}
.foot-top{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap;max-width:1240px;margin:0 auto}
.foot-cols{display:flex;gap:clamp(40px,7vw,96px)}
.foot-cols div{display:flex;flex-direction:column;gap:14px}
.foot-cols h6{font-size:13px;color:var(--ink-3);font-weight:600;margin-bottom:4px}
.foot-cols a{font-size:14px;color:var(--ink-2)}
.foot-cols a:hover{color:var(--ink)}
.foot-fine{max-width:1240px;margin:48px auto 0;padding-top:24px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3)}
.linkish{text-decoration:underline;color:var(--ink-2);font-size:12px}

/* ---------- Search overlay ---------- */
.so{position:fixed;inset:0;z-index:200;visibility:hidden;display:flex}
.so.open{visibility:visible}
.so-backdrop{position:absolute;inset:0;background:rgba(250,250,250,.92);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);opacity:0}
.so-bar{position:fixed;display:flex;align-items:center;gap:14px;padding:0 12px 0 24px;border-radius:999px;background:#fff;
  border:1.5px solid var(--brand);box-shadow:0 0 0 6px rgba(156,29,38,.08),0 24px 60px -24px rgba(94,15,21,.35)}
.so-bar input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font:400 18px var(--font);color:var(--ink)}
.so-bar input::placeholder{color:var(--ink-3)}
.so-esc{font:500 12px var(--font);color:var(--ink-3);border:1px solid var(--line);border-radius:8px;padding:5px 10px}
.so-panel{position:relative;left:auto;top:auto;margin:auto;transform:none;width:min(820px,calc(100vw - 32px));height:min(704px,calc(100vh - 8px));display:flex;flex-direction:column;overflow:visible;
  background:#fff;border-radius:28px;box-shadow:0 30px 80px -30px rgba(12,12,13,.25);padding:28px;opacity:0}
.so-group+.so-group{margin-top:28px}
.so-group h6{font-size:12px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.so-chips{display:flex;flex-wrap:wrap;gap:8px}
.so-chips button{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border-radius:999px;background:var(--bg-2);font-size:14px;font-weight:500;transition:background .2s}
.so-chips button:hover{background:#ecebe8}
.so-chips .new{font-size:11px;font-weight:700;color:#fff;background:var(--brand);border-radius:999px;padding:2px 7px}
.so-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.qa{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;font-size:14px;font-weight:500;transition:background .2s}
.qa:hover{background:var(--bg-2)}
.qa-ic{width:36px;height:36px;border-radius:12px;background:rgba(156,29,38,.08);color:var(--brand);display:grid;place-items:center;font-size:16px}
.so-results{display:flex;flex-direction:column}
.res{display:flex;align-items:center;gap:14px;padding:12px;border-radius:16px;cursor:pointer}
.res.on,.res:hover{background:var(--bg-2)}
.res-cat{font-size:11px;font-weight:600;color:var(--brand);background:rgba(156,29,38,.08);padding:3px 8px;border-radius:999px;flex:none;min-width:78px;text-align:center}
.res-tx{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.res-tx b{font-size:15px;font-weight:600}
.res-tx b mark{background:none;color:var(--brand)}
.res-tx small{font-size:13px;color:var(--ink-3)}
.res-go{margin-left:auto;opacity:0;transition:opacity .2s}
.res.on .res-go{opacity:1}
.res-empty{padding:16px 12px;color:var(--ink-2);font-size:15px}
@media (max-width:767px){
  .so-actions{grid-template-columns:1fr 1fr}
  .so-panel{padding:20px;height:min(704px,calc(100vh - 8px))}
  .tc-pill{height:40px;font-size:13.5px}
  /* 158:00 trending-chip tap target 34->40px mobile (44px ideal, 40 keeps the pill row on one line at 390) */
}

/* Oct 18 20:45 pass: fold-proof results footer (fixes Harsh's Oct 18 screenshot: the
   search card's bottom border and the See-all row spilled past the panel's bottom edge).
   The widget computes its own list height from window measurements; after a window
   resize that height can exceed the panel and push the See-all row and the hint footer
   past the panel edge. The panel's flex geometry now owns the list height: the list
   shrinks and scrolls, and the See-all row and hint footer stay fully inside the panel
   at every viewport size. */
#soEngine{position:relative;overflow:hidden}
#soEngine main{position:absolute;inset:0;display:flex;flex-direction:column;min-height:0}
#soEngine main > *{flex:0 0 auto}
/* the widget's card root and its inner wrappers must shrink with the panel; only the
   results list inside them gives up height, so the See-all row and hint footer stay
   fully inside the panel at every viewport size */
#soEngine main > :last-child{flex:1 1 auto;min-height:0}
/* v141: exempt the horizontal card rails (snap-x). v134's blanket .fo-scroll rule turned
   the product-card rails vertical, stacking cards in one narrow column (Harsh, Oct 18 22:14) */
#soEngine main .fo-scroll:not(.snap-x){flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
#soEngine main .fo-scroll > div:has(div[role="listbox"]){flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
#soEngine main .fo-scroll > div:has(div[role="listbox"]) > *{flex:0 0 auto}
#soEngine main div[role="listbox"]{flex:1 1 auto!important;min-height:0;max-height:none!important;overflow-y:auto}

/* Oct 18 20:45 pass: the scroll cue moves with the list. The fade now marks the list's
   own bottom edge (right above the pinned See-all row) via a mask, so the always-visible
   footer rows never sit under a white wash. app.js toggles .so-list-more on the list. */
#soEngine div[role="listbox"].so-list-more{mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),rgba(0,0,0,0) 100%);
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),rgba(0,0,0,0) 100%)}

/* Oct 18 19:35 pass: stable panel height (fixes Harsh's jitter report): the panel keeps ONE
   height while open, so results loading/typing can no longer re-center it mid-typing;
   #soEngine scrolls internally instead, the shell never moves */
#soEngine{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
#soEngine::-webkit-scrollbar{display:none}
.toast-msg{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:300;background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-size:14px;opacity:0;transition:all .4s var(--ease-out);pointer-events:none}
.toast-msg.show{opacity:1;transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

body:not(.pre) .intro-skip{display:none}

/* ---------- Intro: the banner itself is the stage ---------- */
/* Original intro ghost: a thin outline pill marking where the bar will land (restored verbatim Oct 19) */
.search-ghost{position:absolute;inset:0;border-radius:22px;border:1.5px solid rgba(255,255,255,.45);opacity:0;pointer-events:none}
body:not(.pre) .search-ghost{display:none}
@media (max-width:900px){.search-ghost{border-radius:18px}}
.pre .banner:not(.measure){position:fixed;left:0;top:0;width:100vw;height:100vh;border-radius:0;z-index:100}
.b-logo,.b-promo{display:none}
.pre .b-logo,.pre .b-promo{display:block}
.b-logo{position:absolute;left:clamp(20px,4vw,56px);top:26px;z-index:4}
.b-logo img{height:44px;display:block}
.b-promo{position:absolute;z-index:4;left:clamp(24px,6vw,110px);top:50%;transform:translateY(-50%);color:#fff}
.pl{overflow:hidden}
.pl>span{display:inline-block}
.pe{font-size:14px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.75);margin-bottom:6px}
.pnum{display:inline-flex;align-items:flex-start;font:600 clamp(112px,17vw,272px)/1 var(--font-d);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.pnum .pct{font-size:.42em;align-self:flex-end;margin:0 0 .12em .03em;color:#ff8b93;letter-spacing:0}
.pline{font:600 clamp(38px,5.2vw,86px)/1.02 var(--font-d);letter-spacing:-.035em}
.psub{margin-top:18px;font-size:clamp(15px,1.3vw,19px);color:rgba(255,255,255,.72)}
@media (max-width:900px){
  .b-promo{top:auto;bottom:53%;transform:none;left:24px;right:24px}
  .b-logo{left:20px;top:20px}
  .b-logo img{height:36px}
}

/* intro drives these frame by frame: no CSS easing in the way */
.pre .search,.pre .banner,.pre .search-dock{transition:none!important}


/* =====================================================================
   HERO v3 — campaign carousel + HDFC-shaped search with a travelling light
   ===================================================================== */
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
.banner{container-type:size}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;visibility:hidden;pointer-events:none}
.slide.is-on{visibility:visible;pointer-events:auto}
.s-visual{position:absolute;inset:0}
.s-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:78% 50%;background:#0b0405}
.s-scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,4,6,.9) 0%,rgba(11,4,6,.55) 36%,rgba(11,4,6,0) 62%)}
.s-copy{position:absolute;z-index:3;left:clamp(28px,5.5vw,96px);top:46%;transform:translateY(-50%);max-width:min(640px,50%);color:#fff}
.s-eyebrow{font-size:14px;font-weight:600;letter-spacing:.02em;color:rgba(255,255,255,.84)}
.s-h{margin-top:4px;font-family:var(--font-d);font-weight:600;letter-spacing:-.045em}
.s-big{display:flex;align-items:flex-start;font-size:clamp(72px,min(27cqh,30cqw),280px);line-height:1;letter-spacing:-.06em}
.s-big .odo{font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.s-big .pct{font-size:.42em;align-self:flex-end;margin:0 0 .12em .03em;color:#ff8b93;letter-spacing:0}
.s-line{display:block;font-size:clamp(28px,min(7.2cqh,8cqw),80px);line-height:1.02;letter-spacing:-.035em;margin-top:.02em}
.s-sub{margin-top:16px;font-size:clamp(15px,1.25vw,18px);color:rgba(255,255,255,.72);max-width:30em}
.s-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px} /* 165:00 CTA row breathes under the stat block (163 capture: sat tight) */
.s-ctas .btn-lg{margin-top:0}

/* labelled indicators that fill while a slide is on */
.s-nav{position:absolute;z-index:4;left:clamp(28px,5.5vw,96px);bottom:70px;display:flex;gap:10px}
.s-nav button{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:clamp(96px,9.5vw,152px);padding:6px 0;color:rgba(255,255,255,.64);font-size:12.5px;font-weight:600;text-align:left;transition:color .3s} /* 106:00 inactive hero-tab labels lifted to ~7:1 on the hero dark (was .5, ~5.4:1 nominal but rides a photo backdrop) */
.s-nav button.on,.s-nav button:hover{color:#fff}
.s-nav i{display:block;width:100%;height:3px;border-radius:3px;background:rgba(255,255,255,.45);overflow:hidden} /* 109:00 inactive-tab underline rail lifted .18->.3 so the 4 tab rails read as rails (106:00 queued delineation note) */
.s-nav b{display:block;width:100%;height:100%;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.pre .s-copy,.pre .s-nav{opacity:0}

/* search: HDFC's double-layer rounded rectangle, in IDFC maroon, with a light that travels the frame */
.search-dock{width:min(1080px,calc(100% - 48px));margin-top:-39px}
.search-wrap{width:100%}
.search{display:block;width:100%;height:auto;padding:0;border:10px solid transparent;border-radius:22px;overflow:hidden;
  background:linear-gradient(90deg,#f5dfe1,#fcf0f1) padding-box,
             conic-gradient(from var(--a),#f1d3d7 0deg,#f1d3d7 190deg,#d4505e 245deg,#9C1D26 285deg,#ffe3e7 312deg,#f1d3d7 345deg) border-box;
  box-shadow:0 26px 60px -26px rgba(94,15,21,.5),0 2px 8px rgba(12,12,13,.06);
  animation:travel 3.4s linear infinite}
@keyframes travel{to{--a:360deg}}
.search:hover{border-color:transparent;box-shadow:0 30px 70px -26px rgba(94,15,21,.6),0 2px 8px rgba(12,12,13,.06)}
.s-field{display:flex;align-items:center;gap:14px;height:58px;padding:0 8px 0 18px;border-radius:12px;background:#fff;box-shadow:0 3px 11px rgba(0,0,0,.05)}
.s-badge{display:flex;align-items:center;gap:8px;padding-right:14px;border-right:1px solid var(--line);font-size:14px;font-weight:700;color:var(--brand);white-space:nowrap}
.s-badge .s-ic{stroke:var(--brand);width:20px;height:20px}
.s-field .s-go{width:44px;height:44px;border-radius:10px}
.search.landed{animation:travel 3.4s linear infinite,searchLand 1.6s var(--ease-out)}
.so-bar{border-radius:20px;border:8px solid transparent;
  background:#fff padding-box,conic-gradient(from var(--a),#f1d3d7 0deg,#f1d3d7 190deg,#d4505e 245deg,#9C1D26 285deg,#ffe3e7 312deg,#f1d3d7 345deg) border-box;
  box-shadow:0 24px 60px -24px rgba(94,15,21,.4);animation:travel 3.4s linear infinite}

@media (max-width:900px){
  .s-copy{left:22px;right:22px;top:28px;transform:none;max-width:none}
  .s-sub{display:none} /* 158:00 ghost secondary CTA restored on mobile: capture showed a single-CTA hero reading as a missing button; Know more is the secondary of the 156 hierarchy fix */
  .s-ctas .btn-glass{display:inline-flex}
  .s-ctas{margin-top:18px}
  .s-ctas .btn-lg{height:44px;font-size:14px;padding:0 20px}
  .s-video{object-position:72% 80%}
  .s-scrim{background:linear-gradient(180deg,rgba(11,4,6,.9) 0%,rgba(11,4,6,.55) 42%,rgba(11,4,6,0) 70%)}
  .s-nav{left:22px;bottom:54px;gap:6px}
  .s-nav button{width:64px;font-size:0;gap:0;padding:10px 0} /* 158:00 rails widened 34->64px: unlabeled 34px rails read as progress dots on mobile, 64px reads as tab rails; padding restores a ~23px tap target (font-size:0 had collapsed button height to the 3px rail) */
  .s-nav i{height:5px;background:rgba(255,255,255,.6)} /* 158:00 rail weight 3->5px mobile + inactive alpha .6 (was .45 inherited): final bump after capture 2 flagged faint rails; desktop keeps the 156 values */
  .s-ctas .btn-glass{border-color:rgba(255,255,255,.65)} /* 158:00 ghost border .5->.65 mobile: capture flagged the boundary near-invisible on the red gradient (3:1 non-text contrast) */
  .search-dock{width:calc(100% - 24px);margin-top:-34px}
  .search{border-width:7px;border-radius:18px}
  .s-field{height:52px;padding-left:14px;border-radius:11px}
  .s-badge{font-size:0;gap:0;padding-right:10px}
  .s-kbd{display:none}
}
@media (max-width:900px){.pre .b-logo{display:none}}
/* Oct 18 pass (overall-UI audit): quiet resting search pill.
   The traveling maroon light frame + maroon shadow read as a pink glow,
   which breaks the no-glow rule. Solid warm-neutral frame, neutral shadow. */
@media (min-width:901px){
  .search{background:linear-gradient(90deg,#f5dfe1,#fcf0f1) padding-box,#f0eeeb border-box;
    box-shadow:0 26px 60px -26px rgba(0,0,0,.30),0 2px 8px rgba(12,12,13,.06);
    animation:none}
  .search:hover{border-color:transparent;
    box-shadow:0 30px 70px -26px rgba(0,0,0,.38),0 2px 8px rgba(12,12,13,.06)}
}

/* 174:00 mobile audit queue: chips become a horizontal scroller (no orphan wrap), 40px pills; placeholder shrinks so the example query never truncates; phone-mock captions legible */
@media (max-width:767px){
  .chips{flex-wrap:nowrap;width:100%;justify-content:flex-start;gap:8px;margin:18px 0 0;padding:2px 0 6px;overflow-x:auto /* 198:00 chips join the page grid: padding-left var(--gutter) put the first chip at x=40 while the search frame's outer edge sits at x=24 (hero 12px padding + 12px dock margin), the same line the banner's own content uses; 0 padding ties the chip row to that edge at every mobile width */;-webkit-overflow-scrolling:touch;scrollbar-width:none;
-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),rgba(0,0,0,0));mask-image:linear-gradient(90deg,#000 calc(100% - 36px),rgba(0,0,0,0))} /* 192:00 soft edge fade so the clipped last pill reads as an intentional scroll cue, not a cut */
  .chips.chips-end{-webkit-mask-image:none;mask-image:none} /* fade lifts once scrolled to the end so the last pill is never permanently hidden */
  .chips::-webkit-scrollbar{display:none}
  .chips button{flex:none;background:rgba(12,12,13,.05)}
}
@media (max-width:480px){
  .s-ph{font-size:15px}
}
@media (max-width:767px){
  .ph-label{font-size:13px;opacity:.88}
}@media (max-width:480px){.s-ph-long{font-size:13px}}

/* Oct 18 23:32 pass: rails slide + visual relief (Harsh Oct 18 23:20). The widget
   stylesheet's [cmdk-list],.fo-scroll{overflow-x:hidden} was killing the horizontal
   rail scroller; re-enable it here. Cards slim to 222px so exactly three fit with no
   cut card at rest, image drops 84 to 68 to return height to the results list, and
   soft edge fades mark scrollability (dropped at each end via app.js). */
#soEngine main .fo-scroll.snap-x{overflow-x:auto;cursor:grab}
#soEngine main .fo-scroll.snap-x.fo-rail-dragging{cursor:grabbing}
#soEngine main .fo-scroll.snap-x.fo-rail-nosnap{scroll-snap-type:none!important}
@media (min-width:640px){
  #soEngine main .fo-scroll.snap-x > div{width:222px}
}
#soEngine main .fo-scroll.snap-x img{height:68px}
#soEngine main section:has(.fo-scroll.snap-x){position:relative}
#soEngine main section:has(.fo-scroll.snap-x)::after{content:"";position:absolute;top:32px;right:0;bottom:0;width:40px;background:linear-gradient(to right,rgba(255,255,255,0),#fff 78%);pointer-events:none;opacity:0;transition:opacity .18s ease}
#soEngine main section:has(.fo-scroll.snap-x).fo-rail-right::after{opacity:1}
#soEngine main section:has(.fo-scroll.snap-x)::before{content:"";position:absolute;top:32px;left:0;bottom:0;width:40px;background:linear-gradient(to left,rgba(255,255,255,0),#fff 78%);pointer-events:none;opacity:0;transition:opacity .18s ease}
#soEngine main section:has(.fo-scroll.snap-x).fo-rail-left::before{opacity:1}

/* Oct 18 23:34 pass: hide the rail's raw scrollbar (drag + edge fades carry the
   affordance now) and give the squeezed results row real room: shorter thumb
   banners and tighter rail chrome return ~28px to the list. */
#soEngine main .fo-scroll.snap-x{scrollbar-width:none}
#soEngine main .fo-scroll.snap-x::-webkit-scrollbar{display:none}
#soEngine main .fo-scroll.snap-x img{height:56px}
#soEngine main .fo-scroll.snap-x{padding-bottom:2px}
#soEngine main section:has(.fo-scroll.snap-x) > p{padding-bottom:4px}
#soEngine main .fo-scroll.snap-x > div{padding:10px}

/* Oct 19 00:02 pass: search UI alignment to the Claude-design shell (Harsh 23:59:
   visual relief without breaking anything). CSS-only, scoped to the overlay:
   hairlines warm from cool zinc to the shell's rgba(12,12,13,.09), widget card
   radii step toward the shell's softer radii language, a whisper of elevation on
   bordered cards, warmer backdrop blur, more panel padding on desktop, and the
   panel shadow tuned to the banner's soft depth. */
#soEngine main .border-border{border-color:rgba(12,12,13,.09)!important}
#soEngine main .border,#soEngine main .border-t,#soEngine main .border-b,#soEngine main .border-l{border-color:rgba(12,12,13,.09)!important}
#soEngine main .rounded-xl{border-radius:16px}
#soEngine main .rounded-lg{border-radius:12px}
#soEngine main .rounded-md{border-radius:10px}
#soEngine main .rounded-sm{border-radius:8px}
#soEngine main .border-border{box-shadow:0 1px 2px rgba(12,12,13,.05)}
.so-backdrop{background:rgba(250,249,247,.92)}
@media (min-width:640px){
  .so-panel{padding:24px}
}
#soPanel.so-panel{box-shadow:0 32px 64px -28px rgba(12,12,13,.30)}

/* Oct 19 02:20 pass (Harsh: the Results section must scroll within the panel, and
   the See-all view was not scrollable at all). One scroll container per view:
   the results wrapper fills the panel's leftover height and scrolls on desktop
   like it already does on mobile; the engine's list height-cap is lifted on
   desktop so the wrapper is the only scroller; the helper bar pins to the
   wrapper's bottom edge while scrolling; in the See-all view the main column
   itself scrolls with the search bar pinned on top. */
#soEngine:not([hidden]){display:flex;flex-direction:column}
#soEngine:not([hidden]) main{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
#soEngine main .fo-scroll.overscroll-contain{flex:1 1 auto;min-height:0;overflow-y:auto}
@media (min-width:640px){
  #soEngine main [cmdk-list]{max-height:none!important}
  #soEngine main [data-stickybar]{position:sticky;bottom:0;z-index:20;background:#fff;box-shadow:0 -4px 14px rgba(0,0,0,.08)}
}
#soEngine main:has(> section[aria-label="All results"]){overflow:hidden;padding-bottom:0!important}
#soEngine main:has(> section[aria-label="All results"]) > section[aria-label="All results"]{flex:1 1 0%!important;min-height:0!important;height:auto!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;margin-bottom:0!important;padding-bottom:0!important}
#soEngine main:has(> section[aria-label="All results"]) > section[aria-label="All results"] > div:first-child{position:sticky;top:0;z-index:10;background:#fff}

/* ===== Oct 19 02:26 pass (v157, scoped desktop 02:46; see-all rework 12:50 v161; v162-164 12:55-12:59 results section fills panel (flex-basis 0, main pb zeroed), stale duplicate see-all rules removed): results scroll inside the panel + See-all view scrolls.
   Desktop only (min-width 640): on phones the widget's own max-sm scrolling handles it,
   and an extra nested scroll region there would double-scroll. ===== */
@media (min-width:640px){
#soEngine main{display:flex;flex-direction:column}
#soEngine main .fo-scroll.overscroll-contain{flex:1 1 auto;min-height:0;max-height:none!important;overflow-y:auto;overflow-x:hidden}
#soEngine main [cmdk-list]{max-height:none!important}
#soEngine main [data-stickybar]{position:sticky;bottom:0;z-index:20;background:#fff;box-shadow:0 -4px 14px rgba(0,0,0,.08)}
/* stale see-all rule removed 12:57 (contradicted the v161 rework) */
/* stale see-all header rule removed 12:57 (contradicted the v161 rework) */
}

/* TEMP PROBE removed Oct 19 02:42 IST (diagnosis complete: wheel was being swallowed by the smooth-scroll library while the overlay is open; fixed in app.js v123 via data-lenis-prevent on #so) */