/* Wealthier website stylesheet, shared by every page (index, checkup, disclosures, privacy, terms, 404).
   Version 4 (22 October 2026): the benchmark look of the carousel version (git commit 1f3ec3a) restored verbatim, its
   tokens, glows, tiles, widgets, spacing and motion, with the changes of docs/research/14-home-v4-plan.md only:
   Poppins Light with one SemiBold phrase for display and section headlines, Inter for everything else; no costs
   section; and the added home sections (inside the app, three bento tiles, the SIP calculator, The Wealthier Daily,
   questions), each written in the benchmark's own components.
   Sections: 1 Fonts, 2 Tokens, 3 Base, 4 Type, 5 Buttons and links, 6 Navigation, 7 Hero, 8 Web dashboard window,
   9 Sections and tiles, 10 App cards, 11 Dark tile, 12 Large figure, 13 Closing tile, 14 Footer, 15 Motion,
   16 Responsive, 17 Hero theme card, 18 Pointer spotlight, 19 Soft accents, 20 Inner pages, 21 Responsive (17 to 19),
   22 Touch, 23 Legal pages and the 404 page, 24 Ways to invest: the ideas carousel, 25 Early access list,
   26 Bento additions, 27 Inside the app (pinned tour), 28 SIP calculator, 29 The Wealthier Daily, 30 Questions,
   31 Touch for the additions. */
/* ===================== 1. Fonts (self hosted woff2, relative to this file; licences beside them) ===================== */
/* Poppins 300 and 600 set the display and section headlines only (the latin-ext files carry the rupee sign);
   Inter 4 (variable weight and optical size) sets everything else, with its own small rupee file. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/poppins-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/poppins-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/poppins-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-opsz-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/inter-opsz-rupee.woff2) format('woff2');unicode-range:U+20B9}
@font-face{font-family:'Poppins Fallback';src:local('Arial'),local('ArialMT');size-adjust:113.26%;ascent-override:92.71%;descent-override:30.90%;line-gap-override:8.83%}
@font-face{font-family:'Inter Fallback';src:local('Arial'),local('ArialMT'),local('Liberation Sans');size-adjust:107.48%;ascent-override:90.14%;descent-override:22.44%;line-gap-override:0%}

/* ===================== 2. Tokens ===================== */
:root{
  color-scheme:light;
  --w-red:#E31E24; --w-red-deep:#B8161B; --w-coral:#F28C78; --w-blush:#F7C9B8;
  --w-white:#FFFFFF; --w-ground:#F5F5F3; --w-quiet:#FAFAF8; --w-paper:#FAF7F3; --w-sand:#F0E7DE; --w-blush-tile:#FBEEE8;
  --w-line:#E9E8E5; --w-line-warm:#E4DFD8; --w-line-soft:#EFEAE3;
  --w-ink:#151515; --w-text:#1A1A1A;
  --w-grey-1:#5F5A54; --w-grey-2:#6B645C; --w-grey-3:#8A847D; --w-grey-4:#9A9289;
  --w-on-dark:#F5F1EC; --w-on-dark-2:rgb(255 255 255 / .62); --w-on-dark-line:rgb(255 255 255 / .12); --w-dark-warm:#221E1A;
  --w-d1:#151515; --w-d2:#6B645C; --w-d3:#9A9289; --w-d4:#D6CFC6; --w-d5:#EFEAE3;
  --w-umber:38 28 20;
  --w-font-head:'Poppins','Poppins Fallback',ui-sans-serif,system-ui,sans-serif;
  --w-font-text:'Inter','Inter Fallback',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --w-fs-display:clamp(44px, 27.66px + 4.19vw, 88px);
  --w-fs-title:clamp(32px, 24.57px + 1.905vw, 52px);
  --w-fs-heading:clamp(21px, 19.14px + 0.476vw, 26px);
  --w-fs-subheading:clamp(17px, 15.89px + 0.286vw, 20px);
  --w-fs-lead:clamp(17px, 16.26px + 0.19vw, 19px);
  --w-fs-body:16px; --w-fs-ui:15px; --w-fs-label:14px; --w-fs-fine:13px;
  --w-tr-display:-0.04em; --w-tr-title:-0.035em; --w-tr-heading:-0.02em; --w-tr-subheading:-0.012em;
  --w-tr-lead:-0.015em; --w-tr-body:-0.011em; --w-tr-ui:-0.009em; --w-tr-label:-0.006em; --w-tr-fine:-0.003em;
  --w-lh-display:1.04; --w-lh-title:1.1; --w-lh-heading:1.2; --w-lh-subheading:1.35;
  --w-lh-lead:1.55; --w-lh-body:1.6; --w-lh-label:1.4; --w-lh-fine:1.55;
  --w-maxw:1200px; --w-gutter:40px; --w-gap:20px; --w-nav-h:72px; --w-fade:160px;
  --w-section:clamp(80px, 56.23px + 6.095vw, 144px);
  --w-head-gap:clamp(32px, 23.09px + 2.286vw, 56px);
  --w-tile-pad:clamp(24px, 15.09px + 2.286vw, 48px);
  --w-hero-top:clamp(48px, 30.17px + 4.571vw, 96px);
  --w-r-tile:28px; --w-r-inner:18px; --w-r-card:20px; --w-r-window:14px; --w-r-control:12px; --w-r-pill:999px;
  --w-shadow-tile:0 0 0 1px rgb(var(--w-umber) / .035), 0 1px 2px rgb(var(--w-umber) / .03);
  --w-shadow-tile-hover:0 0 0 1px rgb(var(--w-umber) / .04), 0 1px 2px rgb(var(--w-umber) / .04), 0 24px 48px -32px rgb(var(--w-umber) / .28);
  --w-shadow-float:0 0 0 1px rgb(var(--w-umber) / .05), 0 2px 4px rgb(var(--w-umber) / .04), 0 30px 60px -30px rgb(21 21 21 / .22), 0 50px 100px -20px rgb(var(--w-umber) / .16);
  --w-shadow-window:0 0 0 1px rgb(var(--w-umber) / .07), 0 2px 6px rgb(var(--w-umber) / .04), 0 36px 72px -36px rgb(21 21 21 / .24), 0 60px 120px -30px rgb(var(--w-umber) / .18);
  --w-drop-device:drop-shadow(0 32px 48px rgb(var(--w-umber) / .16)) drop-shadow(0 8px 12px rgb(var(--w-umber) / .08));
  --w-drop-device-dark:drop-shadow(0 32px 64px rgb(0 0 0 / .45));
  --w-ease-out:cubic-bezier(.16,1,.3,1); --w-ease-hover:cubic-bezier(.215,.61,.355,1); --w-ease-std:cubic-bezier(.4,0,.2,1);
  --w-dur-1:150ms; --w-dur-2:240ms; --w-dur-3:600ms; --w-dur-4:900ms;
  --logo:url(../img/wealthier-logo.png);
}
@media (max-width:1023px){:root{--w-gutter:24px;--w-gap:16px;--w-nav-h:64px;--w-tr-display:-0.035em;--w-tr-title:-0.03em}}
@media (max-width:767px){:root{--w-gutter:16px;--w-gap:12px;--w-r-tile:20px;--w-r-inner:14px;--w-r-card:16px;--w-r-window:10px;
  --w-tr-display:-0.03em;--w-tr-title:-0.025em;--w-tr-heading:-0.015em}}

/* ===================== 3. Base ===================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--w-nav-h) + 24px)}
body{margin:0;background:var(--w-white);color:var(--w-text);
  font:400 var(--w-fs-body)/var(--w-lh-body) var(--w-font-text);letter-spacing:var(--w-tr-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--w-ink);color:#fff}
:focus-visible{outline:2px solid var(--w-red);outline-offset:3px;border-radius:4px}
[tabindex="-1"]:focus{outline:none}
.w-wrap{max-width:calc(var(--w-maxw) + 2 * var(--w-gutter));margin-inline:auto;padding-inline:var(--w-gutter)}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.w-skip{position:fixed;left:16px;top:12px;z-index:200;padding:10px 16px;border-radius:var(--w-r-pill);background:var(--w-ink);color:#fff;
  font:500 var(--w-fs-label)/1 var(--w-font-text);transform:translateY(-200%);transition:transform var(--w-dur-2) var(--w-ease-out)}
.w-skip:focus{transform:none}
.w-logo{display:block;width:113px;height:22px;background:var(--logo) no-repeat 0 50%/contain}

/* ===================== 4. Type ===================== */
.w-display{font-family:var(--w-font-head);font-weight:300;font-size:var(--w-fs-display);line-height:var(--w-lh-display);
  letter-spacing:var(--w-tr-display);color:var(--w-text);margin:0}
.w-title{font-family:var(--w-font-head);font-weight:300;font-size:var(--w-fs-title);line-height:var(--w-lh-title);
  letter-spacing:var(--w-tr-title);color:var(--w-text);text-wrap:balance;max-width:16em;margin:0}
.w-display strong,.w-title strong{font-weight:600}
.w-heading{font-family:var(--w-font-text);font-weight:500;font-size:var(--w-fs-heading);line-height:var(--w-lh-heading);
  letter-spacing:var(--w-tr-heading);color:var(--w-text);text-wrap:balance;margin:0}
.w-subheading{font-family:var(--w-font-text);font-weight:500;font-size:var(--w-fs-subheading);line-height:var(--w-lh-subheading);
  letter-spacing:var(--w-tr-subheading);color:var(--w-text);margin:0}
.w-lead{font-size:var(--w-fs-lead);line-height:var(--w-lh-lead);letter-spacing:var(--w-tr-lead);color:var(--w-grey-1);max-width:36rem;text-wrap:pretty;margin:0}
.w-body{font-size:var(--w-fs-body);line-height:var(--w-lh-body);letter-spacing:var(--w-tr-body);color:var(--w-grey-1);max-width:64ch;text-wrap:pretty;margin:0}
.w-label{font-weight:500;font-size:var(--w-fs-label);line-height:var(--w-lh-label);letter-spacing:var(--w-tr-label);color:var(--w-grey-1);margin:0}
.w-fine{font-size:var(--w-fs-fine);line-height:var(--w-lh-fine);letter-spacing:var(--w-tr-fine);color:var(--w-grey-2);max-width:76ch;text-wrap:pretty;margin:0}
.w-num{font-variant-numeric:tabular-nums}

/* ===================== 5. Buttons and links ===================== */
.w-btn{--h:44px;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--h);
  padding:0 20px 0 22px;border:0;border-radius:var(--w-r-pill);font:500 var(--w-fs-ui)/1 var(--w-font-text);
  letter-spacing:var(--w-tr-ui);white-space:nowrap;cursor:pointer;
  transition:background-color var(--w-dur-2) var(--w-ease-hover),color var(--w-dur-2) var(--w-ease-hover),box-shadow var(--w-dur-2) var(--w-ease-hover)}
.w-btn--lg{--h:52px;padding:0 24px 0 28px;font-size:var(--w-fs-body)}
.w-btn--sm{--h:36px;padding:0 14px 0 16px;font-size:var(--w-fs-label);gap:8px}
.w-btn--primary{background:var(--w-ink);color:#fff}
.w-btn--primary:hover{background:var(--w-red)}
.w-btn--primary:active{background:var(--w-red-deep)}
.w-btn--secondary{background:var(--w-white);color:var(--w-text);box-shadow:inset 0 0 0 1px var(--w-line-warm)}
.w-btn--secondary:hover{box-shadow:inset 0 0 0 1px var(--w-text)}
.w-btn--on-dark{background:var(--w-white);color:var(--w-ink)}
.w-btn--on-dark:hover{background:var(--w-red);color:#fff}
.w-link{display:inline-flex;align-items:center;gap:8px;font:500 var(--w-fs-ui)/1.4 var(--w-font-text);
  letter-spacing:var(--w-tr-ui);color:var(--w-text);transition:color var(--w-dur-1) var(--w-ease-hover)}
.w-link:hover{color:var(--w-red-deep)}
.w-on-dark .w-link{color:var(--w-on-dark)}
.w-on-dark .w-link:hover{color:#fff;opacity:.72}
.w-inline{color:var(--w-text);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--w-line-warm);text-underline-offset:3px;
  transition:color var(--w-dur-1) var(--w-ease-hover),text-decoration-color var(--w-dur-1) var(--w-ease-hover)}
.w-inline:hover{color:var(--w-red-deep);text-decoration-color:currentColor}
.w-arrow{width:10px;height:10px;flex:none;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.w-arrow__stem{opacity:0;transition:opacity var(--w-dur-1) var(--w-ease-hover)}
.w-arrow__tip{transition:transform var(--w-dur-1) var(--w-ease-hover)}
a:hover > .w-arrow .w-arrow__stem,a:focus-visible > .w-arrow .w-arrow__stem{opacity:1}
a:hover > .w-arrow .w-arrow__tip,a:focus-visible > .w-arrow .w-arrow__tip{transform:translateX(3px)}
.w-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}

/* ===================== 6. Navigation ===================== */
.w-nav{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--w-nav-h);background:rgb(255 255 255 / 0);
  transition:background-color var(--w-dur-2) var(--w-ease-std),box-shadow var(--w-dur-2) var(--w-ease-std)}
.w-nav.is-scrolled,.w-nav.is-open{background:rgb(255 255 255 / .86);-webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);box-shadow:0 1px 0 rgb(var(--w-umber) / .07)}
.w-nav.is-open{background:var(--w-white)}
.w-nav.is-open .w-nav__end .w-btn{visibility:hidden}
.w-nav__in{height:100%;display:flex;align-items:center;gap:48px}
.w-nav__logo{display:block;padding:6px 0;border-radius:6px}
.w-nav__links{display:flex;gap:32px}
.w-nav__links a{font:450 var(--w-fs-ui)/1 var(--w-font-text);letter-spacing:var(--w-tr-ui);color:var(--w-grey-1);
  padding:10px 0;transition:color var(--w-dur-1) var(--w-ease-hover)}
.w-nav__links a:hover{color:var(--w-text)}
.w-nav__end{margin-left:auto;display:flex;align-items:center;gap:24px}
.w-nav__login{font:450 var(--w-fs-ui)/1 var(--w-font-text);letter-spacing:var(--w-tr-ui);color:var(--w-text);padding:10px 0;transition:color var(--w-dur-1) var(--w-ease-hover)}
.w-nav__login:hover{color:var(--w-red-deep)}
.w-burger{display:none;position:relative;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:none;cursor:pointer;border-radius:10px}
.w-burger i{position:absolute;left:13px;width:18px;height:1.5px;border-radius:1px;background:var(--w-text);
  transition:transform var(--w-dur-2) var(--w-ease-out)}
.w-burger i:first-of-type{top:18px}.w-burger i:last-of-type{top:24.5px}
.w-burger[aria-expanded="true"] i:first-of-type{transform:translateY(3.25px) rotate(45deg)}
.w-burger[aria-expanded="true"] i:last-of-type{transform:translateY(-3.25px) rotate(-45deg)}
.w-menu{display:none;position:fixed;inset:var(--w-nav-h) 0 0 0;z-index:99;background:var(--w-white);overflow-y:auto;
  padding:16px var(--w-gutter) 32px}
.w-menu.is-open{display:flex;flex-direction:column}
.w-menu__links a{display:block;padding:12px 0;border-bottom:1px solid var(--w-line-soft);
  font-family:var(--w-font-head);font-weight:300;font-size:var(--w-fs-title);line-height:var(--w-lh-title);letter-spacing:var(--w-tr-title);color:var(--w-text)}
.w-menu__sub{display:flex;flex-direction:column;gap:4px;margin-top:24px}
.w-menu__sub a{font:500 var(--w-fs-ui)/1.4 var(--w-font-text);color:var(--w-grey-1);padding:8px 0}
.w-menu__end{margin-top:auto;padding-top:32px;display:grid;gap:12px}
.w-menu__end .w-btn{--h:52px;width:100%;font-size:var(--w-fs-body)}
.w-menu__end .w-fine{margin-top:4px}
.w-menu.is-open .w-menu__links a{animation:w-menu-in var(--w-dur-3) var(--w-ease-out) both;animation-delay:calc(var(--i) * 40ms)}
@keyframes w-menu-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:1023px){.w-nav__links,.w-nav__login{display:none}.w-burger{display:block}.w-nav__end{gap:8px}.w-nav__in{gap:16px}}
@media (max-width:359px){.w-nav__in{gap:12px}.w-nav__cta{padding:0 14px}.w-nav__cta .w-arrow{display:none}}
@media (min-width:1024px){.w-menu{display:none!important}}
body.is-locked{overflow:hidden}

/* ===================== 7. Hero, concept A: the product stage ===================== */
.w-hero{position:relative;isolation:isolate;overflow-x:clip;
  padding-top:calc(var(--w-nav-h) + var(--w-hero-top));padding-bottom:96px;background:var(--w-white)}
.w-hero .w-display + .w-lead{margin-top:32px}
.w-hero .w-lead{max-width:32rem}
.w-hero-a__copy .w-lead{text-wrap:balance}
.w-hero .w-actions{margin-top:40px}
.w-hero .w-fee{margin-top:16px;max-width:46ch}
.w-caption{font-size:var(--w-fs-fine);line-height:var(--w-lh-fine);letter-spacing:var(--w-tr-fine);color:var(--w-grey-2)}
.w-hero h1 .ln{display:block;overflow:clip;padding-bottom:.06em;margin-bottom:-.06em}
.w-hero h1 .ln > span{display:block}

.w-hero-a{position:relative}
.w-hero-a__copy{position:relative;z-index:2}
.w-hero-a__stage{position:relative}
.w-hero-a__in{position:absolute;left:0;top:0;transform-origin:0 0}
.w-hero-a__window{position:absolute}
.w-hero-a__phone{position:absolute;z-index:2}

/* The warm wash, behind the product only */
.w-hero__bg{position:absolute;inset:0;z-index:-1;overflow:clip;pointer-events:none}
.w-wash{position:absolute;pointer-events:none;isolation:isolate;
  top:-120px;right:-200px;width:1180px;height:1040px;
  -webkit-mask-image:radial-gradient(closest-side,#000 60%,transparent);mask-image:radial-gradient(closest-side,#000 60%,transparent)}
.w-wash i{position:absolute;inset:0;border-radius:50%;will-change:transform}
.w-wash i:nth-child(1){background:radial-gradient(closest-side,rgb(240 231 222 / .85),rgb(240 231 222 / 0));animation:w-drift-a 53s var(--w-ease-std) infinite alternate}
.w-wash i:nth-child(2){inset:8% 4% 18% 20%;background:radial-gradient(closest-side,rgb(240 231 222 / .225),rgb(240 231 222 / 0));animation:w-drift-b 47s var(--w-ease-std) infinite alternate}
.w-wash i:nth-child(3){inset:22% 18% 8% 6%;background:radial-gradient(closest-side,rgb(240 231 222 / .108),rgb(240 231 222 / 0));mix-blend-mode:multiply;animation:w-drift-c 41s var(--w-ease-std) infinite alternate}
.w-wash i:nth-child(4){inset:14% 6% 38% 40%;background:radial-gradient(closest-side,rgb(227 30 36 / .016),rgb(227 30 36 / 0));mix-blend-mode:multiply;animation:w-drift-a 59s var(--w-ease-std) infinite alternate-reverse}
@keyframes w-drift-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-4%,3%,0) scale(1.06)}}
@keyframes w-drift-b{from{transform:translate3d(0,0,0) rotate(0deg)}to{transform:translate3d(5%,-3%,0) rotate(12deg)}}
@keyframes w-drift-c{from{transform:translate3d(0,0,0) scale(1.04)}to{transform:translate3d(-6%,-4%,0) scale(.96)}}
.w-wash.is-paused i{animation-play-state:paused}
/* Anchored 180 px left of the stage (the container edge plus 520 + 340 - 520), so the wash keeps the spec position
   of 1440 (left 460, right -200) at every split hero width */
@media (min-width:1200px){.w-wash{right:auto;left:calc(max(var(--w-gutter), 50% - 600px) + 340px)}}

/* Home hero, v5: with the navigation, the hero fills the first screen exactly (100svh) and the next section starts at the
   fold. The approved composition (the browser window, the phone and the floating card) keeps its proportions and is
   scaled by --k to the height available; the copy and the stage are centred in the space below the navigation.
     split    1024 px and wider in landscape: the copy beside the stage, --k from the viewport height (0.6 to 1)
     stacked  768 to 1023 px, and 1024 px and wider in portrait: the copy above, the stage scaled to the height below it
     phone    below 768 px: the copy above, the phone alone rises from the bottom edge, cropped by the fold behind a soft fade
   The stage glow may run past the fold, so it never ends in a hard line. The checkup page's hero keeps the base rules.
   tan(atan2(a, b)) is a / b as a number; browsers without it use the fallback scale. */
.w-hero--screen{--vh:100vh;--k:.8;display:flex;flex-direction:column;min-height:var(--vh);padding-top:var(--w-nav-h)}
.w-hero.w-hero--screen{padding-bottom:0}
@supports (height:100svh){.w-hero--screen{--vh:100svh}}
.w-hero--screen .w-hero__bg{overflow-x:clip;overflow-y:visible}
.w-hero--screen .w-hero-a{flex:1 0 auto;width:100%}
.w-hero--screen .w-hero-a__in{transform:scale(var(--k))}
/* The hero phone image carries its drop shadow baked in (app-phone-discover-hero.webp: the 640 x 1315 phone on a
   720 x 1435 canvas, padded 40 px left and right, 24 px top and 96 px bottom), so no filter is redrawn as it moves. The
   image is 1.125 times the phone width and is pulled up and left by its padding, so the phone sits where it always did. */
.w-hero--screen .w-hero-a__phone{filter:none;width:calc(var(--phone-w) * 1.125);margin:calc(var(--phone-w) * -.0375) 0 0 calc(var(--phone-w) * -.0625)}
/* The parallax layers become compositor layers while the hero is near the viewport (is-near, set by wealthier.js from
   the same observer that pauses the glow), so the first scroll frame does not have to create them; once the hero has
   gone they are released. The slow glow holds still while the hero is leaving (is-leaving). The stage fades as one
   group, so no layer shows through another. */
.w-motion .w-hero--screen.is-near :is(.w-hero-a__copy,.w-hero-a__stage,.w-hero-a__window,.w-hero-a__phone,.w-hero-a__theme){will-change:transform,opacity}
.w-hero--screen.is-leaving .w-wash i{animation-play-state:paused}

@media (min-width:1024px) and (min-aspect-ratio:1/1){
  .w-hero--screen{--hm:clamp(24px, 5.5vh, 72px);--cw:min(520px, 40vw)}
  @supports (height:100svh){.w-hero--screen{--hm:clamp(24px, 5.5svh, 72px)}}
  @supports (width:calc(1px * tan(atan2(1px, 1px)))){
    .w-hero--screen{--k:clamp(.6, tan(atan2(var(--vh) - var(--w-nav-h) - 2 * var(--hm), 760px)), 1)}
  }
  .w-hero--screen .w-hero-a{display:grid;grid-template-columns:var(--cw) minmax(0,1fr);align-content:center;align-items:start;padding-block:var(--hm)}
  .w-hero--screen .w-hero-a__copy{padding-top:calc(48px * var(--k))}
  .w-hero--screen .w-hero-a__stage{height:calc(760px * var(--k))}
  .w-hero--screen .w-hero-a__in{width:1000px;height:760px}
  /* The window shrinks less than the phone (--kw), so it still runs past the right edge on short screens, and the card
     keeps its overlap with the window's lower edge */
  .w-hero--screen{--kw:calc(var(--k) + (1 - var(--k)) * .4)}
  .w-hero--screen .w-hero-a__window{left:120px;top:0;--s:calc(.786 * var(--kw) / var(--k))}
  .w-hero--screen .w-hero-a__phone{left:40px;top:145px;--phone-w:300px}
  .w-hero--screen .w-hero-a__theme{left:314px;top:calc(550px * var(--kw) / var(--k) - 32px);--card-w:256px}
  .w-hero--screen .w-wash{top:calc(var(--w-nav-h) + var(--hm) - 288px * var(--k));right:auto;
    left:calc(max(var(--w-gutter), 50% - 600px) + var(--cw) - 180px * var(--k));width:calc(1180px * var(--k));height:calc(1040px * var(--k))}
}

@media (min-width:768px) and (max-width:1023px),(min-width:1024px) and (max-aspect-ratio:999/1000){
  .w-hero--screen{--hm:clamp(24px, 4vh, 56px)}
  @supports (height:100svh){.w-hero--screen{--hm:clamp(24px, 4svh, 56px)}}
  .w-hero--screen .w-hero-a{display:flex;flex-direction:column;justify-content:center;padding-block:var(--hm)}
  .w-hero--screen .w-hero-a__copy{flex:none;max-width:640px}
  .w-hero--screen .w-hero-a__stage{flex:1 1 0;min-height:240px;max-height:var(--sh);margin-top:clamp(24px, 4.5vh, 56px);container-type:size}
  .w-hero--screen .w-hero-a__in{width:var(--sw);height:var(--sh)}
  @supports (width:calc(1px * tan(atan2(1px, 1px)))) and (width:1cqh){
    .w-hero--screen .w-hero-a__in{--k:clamp(.4, min(tan(atan2(100cqh, var(--sh))), tan(atan2(100cqw, var(--sw)))), 1)}
  }
  .w-hero--screen .w-wash{top:auto;bottom:calc(var(--hm) - 120px);right:-300px;left:auto;width:820px;height:740px;opacity:.7}
}
@media (min-width:768px) and (max-width:1023px){
  .w-hero--screen{--sw:720px;--sh:552px}
  /* When the height sets the scale, the composition is centred in the width it leaves */
  .w-hero--screen .w-hero-a__in{left:calc(50% - var(--sw) * var(--k) / 2)}
  .w-hero--screen .w-hero-a__window{left:48px;top:0;--s:.6}
  .w-hero--screen .w-hero-a__phone{left:0;top:100px;--phone-w:220px}
  .w-hero--screen .w-hero-a__theme{left:206px;top:396px;--card-w:224px;padding:14px 16px}
  .w-hero--screen .w-hero-a__theme .th{gap:14px}
  .w-hero--screen .w-hero-a__theme .th__ic{width:64px;height:64px;border-radius:17px}
  .w-hero--screen .w-hero-a__theme .th__ic svg{width:29px;height:29px}
  .w-hero--screen .w-hero-a__theme .th__ttl{font-size:13px}
  .w-hero--screen .w-hero-a__theme .th__chip{margin-top:8px}
}
@media (min-width:1024px) and (max-aspect-ratio:999/1000){
  .w-hero--screen{--sw:944px;--sh:654px}
  .w-hero--screen .w-hero-a__window{left:64px;top:0;--s:.786}
  .w-hero--screen .w-hero-a__phone{left:0;top:120px;--phone-w:260px}
  .w-hero--screen .w-hero-a__theme{left:240px;top:518px;--card-w:256px}
  .w-hero--screen .w-wash{width:1000px;height:900px;opacity:.8}
}

@media (max-width:767px){
  .w-hero--screen .w-hero-a{display:flex;flex-direction:column;padding-top:var(--w-hero-top)}
  .w-hero--screen .w-hero-a__copy{flex:none}
  /* The stage sets where the phone starts. Its inner layer reaches up to the top of the screen and is masked only at
     the bottom, where the phone fades out at the fold; so the phone can rise over the fading copy as the hero leaves,
     and its shadow never meets a clip edge. The layer takes no pointer events. */
  .w-hero--screen .w-hero-a__stage{flex:1 1 0;min-height:160px;margin:clamp(24px, 5vh, 44px) calc(-1 * var(--w-gutter)) 0;z-index:3;pointer-events:none}
  .w-hero--screen .w-hero-a__in{top:calc(-1 * var(--vh));right:0;bottom:0;left:0;transform:none;overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 64px),rgb(0 0 0 / 0));mask-image:linear-gradient(180deg,#000 calc(100% - 64px),rgb(0 0 0 / 0))}
  .w-hero--screen .w-hero-a__window{display:none}
  .w-hero--screen .w-hero-a__phone{--phone-w:clamp(240px, 68vw, 280px);left:50%;top:var(--vh);margin-left:calc(var(--phone-w) * -.5625)}
  /* On phones the phone alone rises from the fold; the floating card would cover the part of the screen that shows */
  .w-hero--screen .w-hero-a__theme{display:none}
  .w-hero--screen .w-wash{top:auto;bottom:-200px;right:50%;margin-right:-300px;width:600px;height:640px;opacity:.8}
}
/* Short phones (667 px and less, such as the iPhone SE): tighter spacing keeps the first screen whole */
@media (max-width:767px) and (max-height:700px){
  .w-hero--screen .w-hero-a{padding-top:28px}
  .w-hero--screen .w-display + .w-lead{margin-top:18px}
  .w-hero--screen .w-actions{margin-top:24px;gap:12px}
  .w-hero--screen .w-fee{margin-top:12px}
  .w-hero--screen .w-hero-a__stage{min-height:128px;margin-top:20px}
}
/* The smallest phones (600 px tall and less, such as a 320 by 568 screen): the copy alone fills the first screen, centred
   below the header, because no useful part of the phone would fit above the fold */
@media (max-width:767px) and (max-height:600px){
  .w-hero--screen .w-hero-a{justify-content:center;padding-block:16px 24px}
  .w-hero--screen .w-hero-a__stage{display:none}
}
/* Landscape phones: too short for the composition, so the hero shows its copy alone */
@media (max-height:500px) and (orientation:landscape){.w-hero--screen .w-hero-a__stage{display:none}}

/* Phone frames (images from the app kit) */
.w-phone{display:block;width:var(--phone-w,300px);max-width:none;height:auto;flex:none;filter:var(--w-drop-device)}
.w-tile--ink .w-phone{filter:var(--w-drop-device-dark)}
.w-phone--lg{--phone-w:320px}
.w-phone--md{--phone-w:280px}

/* ===================== 8. Web dashboard window (HTML product depiction) ===================== */
.w-window-box{width:calc(1120px * var(--s,1));height:calc(700px * var(--s,1));border-radius:var(--w-r-window);box-shadow:var(--w-shadow-window);background:var(--w-white)}
.w-window{width:1120px;height:700px;transform:scale(var(--s,1));transform-origin:0 0;
  border-radius:calc(var(--w-r-window) / var(--s,1));background:var(--w-white);overflow:hidden;
  font-family:var(--w-font-text);color:var(--w-text);letter-spacing:0}
.w-window__bar{position:relative;height:40px;display:flex;align-items:center;gap:8px;padding:0 16px;background:var(--w-quiet);border-bottom:1px solid var(--w-line-soft)}
.w-window__bar > i{width:11px;height:11px;border-radius:50%;background:var(--w-line-warm)}
.w-window__url{position:absolute;left:50%;top:8px;transform:translateX(-50%);height:24px;display:flex;align-items:center;gap:6px;padding:0 16px;border-radius:7px;
  background:var(--w-ground);font:400 12px/24px var(--w-font-text);color:var(--w-grey-2);white-space:nowrap}
.w-window__url svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.6}
.dw{display:grid;grid-template-columns:260px minmax(0,1fr);height:660px}
.dw svg.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dw__side{display:flex;flex-direction:column;padding:23px 16px 18px;border-right:1px solid var(--w-line-soft)}
/* The logo is centred on the page title. Its bottom margin places the phone top between two sidebar items at each
   breakpoint: Holdings (active) stays whole above the phone, and the next item is either whole or fully hidden. */
.dw__logo{width:98px;height:19px;margin:4px 12px 18px;background:var(--logo) no-repeat 0 50%/contain}
@media (max-width:1199px){.dw__logo{margin-bottom:23px}}
@media (max-width:1023px){.dw__logo{margin-bottom:37px}}
.dw__nav{display:grid;gap:4px}
.dw__nav span{display:flex;align-items:center;gap:12px;height:36px;padding:0 12px;border-radius:10px;font:500 14px/1 var(--w-font-text);color:var(--w-grey-2)}
.dw__nav .is-on{background:var(--w-ground);color:var(--w-text)}
.dw__nav .is-on svg{color:var(--w-red)}
.dw__acct{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--w-line)}
.dw__acct b{display:block;font:500 13px/1.25 var(--w-font-text)}
.dw__acct small{display:block;font:400 11px/1.3 var(--w-font-text);color:var(--w-grey-2)}
.av{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--w-sand);font:600 12px/1 var(--w-font-text);color:var(--w-text);flex:none}
.dw__main{padding:24px 40px 28px;min-width:0;display:flex;flex-direction:column}
.dw__head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.dw__head h4{font:600 22px/1.15 var(--w-font-text);letter-spacing:-0.02em}
.dw__head p{margin-top:4px;font:400 12px/1.3 var(--w-font-text);color:var(--w-grey-2)}
.dw__tools{display:flex;align-items:center;gap:10px}
.dw__search{display:flex;align-items:center;gap:8px;width:220px;height:36px;padding:0 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--w-line);font:400 12px/1 var(--w-font-text);color:var(--w-grey-3)}
.dw__search svg{width:14px;height:14px}
.dw__bell{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--w-line)}
.dw__bell svg{width:16px;height:16px}
.dw__grid{flex:1;min-height:0;margin-top:20px;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px}
.dw__col{display:flex;flex-direction:column;gap:16px;min-height:0}
.dc{border-radius:18px;background:var(--w-white);box-shadow:inset 0 0 0 1px var(--w-line);padding:20px 22px}
.dc__row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dc__lbl{font:400 12px/1.3 var(--w-font-text);color:var(--w-grey-2)}
.dc__ttl{font:600 15px/1.2 var(--w-font-text);letter-spacing:0}
.dc__cap{font:400 11px/1.3 var(--w-font-text);color:var(--w-grey-3)}
.dv__fig{margin-top:6px;font:600 36px/1.1 var(--w-font-text);letter-spacing:-0.02em}
.dv__fig small{font-size:22px;color:var(--w-grey-4);letter-spacing:-0.01em}

.dv__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px}
.dv__stats > div{padding:0 16px;border-left:1px solid var(--w-line-soft)}
.dv__stats > div:first-child{padding-left:0;border-left:0}
.dv__stats b{display:block;margin-top:4px;font:500 16px/1.2 var(--w-font-text);letter-spacing:-0.01em}
.dt{flex:1;min-height:0;padding:16px 22px 10px}
.dt__head,.dt__row{display:grid;grid-template-columns:minmax(0,1fr) 92px 76px;align-items:center;gap:16px}
.dt__head{padding-bottom:10px;border-bottom:1px solid var(--w-line-soft);font:400 11px/1 var(--w-font-text);color:var(--w-grey-2)}
.dt__head span:not(:first-child),.dt__row > span:not(:first-child){text-align:right}
.dt__row{height:50px;border-bottom:1px solid var(--w-line-soft);font:400 12.5px/1 var(--w-font-text);font-variant-numeric:tabular-nums}
.dt__row:last-child{border-bottom:0}
.dt__fund{display:flex;align-items:center;gap:10px;min-width:0}
.dt__fund b{display:block;font:500 13px/1.2 var(--w-font-text);white-space:nowrap}
.dt__fund small{display:block;margin-top:2px;font:400 11px/1.2 var(--w-font-text);color:var(--w-grey-2);white-space:nowrap}
.mono{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--w-ink);color:#fff;font:600 10.5px/1 var(--w-font-text);flex:none;letter-spacing:.02em}
.mono--2{background:var(--w-d2)}.mono--3{background:var(--w-d3)}.mono--4{background:var(--w-d4);color:var(--w-text)}
.alloc{display:flex;gap:3px;height:8px;margin-top:16px}
.alloc i{display:block;border-radius:4px}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:9px 18px;margin-top:16px}
.legend span{display:flex;align-items:center;gap:7px;font:400 11.5px/1 var(--w-font-text);color:var(--w-grey-1)}
.legend span b{margin-left:auto;font:500 11.5px/1 var(--w-font-text);color:var(--w-text);font-variant-numeric:tabular-nums}
.legend i{width:7px;height:7px;border-radius:2px}

.app-btn{display:flex;align-items:center;justify-content:center;height:32px;padding:0 16px;border-radius:999px;background:var(--w-red);color:var(--w-white);font:600 12.5px/1 var(--w-font-text);letter-spacing:-0.005em;flex:none}

.bar{position:relative;height:6px;margin-top:14px;border-radius:3px;background:var(--w-d5);overflow:hidden}
.bar i{position:absolute;inset:0 auto 0 0;border-radius:3px;background:var(--w-ink)}

/* ===================== 9. Sections, heads, bento tiles ===================== */
.w-ground{background:linear-gradient(180deg,var(--w-white) 0,var(--w-ground) var(--w-fade));padding-bottom:var(--w-section)}
.w-section{padding-top:var(--w-section)}
/* In page links land on the section content, not on its top padding (with the html scroll-padding for the navigation) */
.w-section[id]{scroll-margin-top:calc(32px - var(--w-section))}
.w-head{max-width:46rem;margin-bottom:var(--w-head-gap)}
.w-head .w-label + .w-title{margin-top:16px}
.w-head .w-title + .w-lead{margin-top:20px}
.w-head .w-lead--wide{max-width:40rem}
.w-head .w-lead + .w-link,.w-head .w-lead + .w-actions,.w-head .w-title + .w-link{margin-top:24px}
.w-head .w-actions + .w-fine{margin-top:16px}
.w-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--w-gap)}
.w-span-5{grid-column:span 5}.w-span-7{grid-column:span 7}.w-span-12{grid-column:1 / -1}
.w-tile{position:relative;isolation:isolate;overflow:clip;display:flex;flex-direction:column;min-width:0;
  padding:var(--w-tile-pad);border-radius:var(--w-r-tile);background:var(--w-white);color:var(--w-text);box-shadow:var(--w-shadow-tile)}
a.w-tile{transition:translate var(--w-dur-2) var(--w-ease-hover),box-shadow var(--w-dur-2) var(--w-ease-hover)}
a.w-tile:focus-visible{outline-offset:4px;border-radius:var(--w-r-tile)}
@media (hover:hover){a.w-tile:hover{translate:0 -2px;box-shadow:var(--w-shadow-tile-hover)}}
.w-tile--tall{height:600px}
.w-tile--short{min-height:440px}
.w-tile__copy{position:relative;z-index:1;max-width:26rem}
.w-tile__copy .w-label + .w-heading,.w-tile__copy .w-label + .w-title{margin-top:12px}
.w-tile__copy .w-heading + .w-body,.w-tile__copy .w-title + .w-body{margin-top:12px}
.w-tile > .w-phone{margin-top:40px;align-self:center}
.w-tile > .w-phone--end{align-self:flex-end}
.w-tile__card{margin-top:auto;padding-top:40px;display:flex;justify-content:center}
.w-tile--row{flex-direction:row;align-items:stretch;gap:40px}
.w-tile--row .w-tile__copy{flex:1 1 0;max-width:18rem}
.w-tile--row .w-tile__card{margin:0;padding:0;flex:none;align-self:flex-end}
.w-note{margin-top:24px}
.w-note + .w-note{margin-top:8px}
.w-note .w-link{font-size:var(--w-fs-fine)}
.w-tile .w-soon{color:var(--w-grey-2)}

/* ===================== 10. App cards (HTML product depictions, kit scale) ===================== */
.ac{width:100%;max-width:var(--card-w,100%);padding:20px;border-radius:var(--w-r-card);background:var(--w-white);
  box-shadow:0 0 0 1px var(--w-line);font-family:var(--w-font-text);color:var(--w-text);letter-spacing:0}

.ac__row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ac__ttl{font:600 16px/1.2 var(--w-font-text);letter-spacing:-0.01em}
.ac__cap{font:400 12px/1.35 var(--w-font-text);color:var(--w-grey-2)}
.ac__soon{display:inline-flex;align-items:center;font:500 12px/1 var(--w-font-text);color:var(--w-grey-2)}
.ac__list{margin-top:6px}
.ac__li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--w-line-soft)}
.ac__li:last-child{border-bottom:0;padding-bottom:0}
.ac__li b{display:block;font:500 14px/1.25 var(--w-font-text);letter-spacing:0}
.ac__li small{display:block;margin-top:3px;font:400 12px/1.25 var(--w-font-text);color:var(--w-grey-2)}
.ac__li > span:nth-child(2){flex:1 1 auto;min-width:0}
.ac__li small{white-space:nowrap}
.ac__li .end{margin-left:auto;flex:none;text-align:right;font:400 12.5px/1.3 var(--w-font-text);color:var(--w-grey-2)}
.mk .end{display:grid;justify-items:end;gap:3px}
.mk .end .mk__st{font:500 13px/1.25 var(--w-font-text);color:var(--w-grey-1)}
.mk .end small{margin:0}
.ac{container-type:inline-size}
@container (max-width:340px){.usd .cc{display:none}.usd .ac__li{gap:10px}}
.usd__head{flex-wrap:wrap;row-gap:8px}
.usd__head > *{white-space:nowrap}
.usd .ac__li b{white-space:nowrap}
@container (max-width:250px){.mk .ac__li small{white-space:normal}}
.ac__li .end b{font:500 14px/1.2 var(--w-font-text);color:var(--w-text)}
.cc{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--w-ground);font:600 11px/1 var(--w-font-text);color:var(--w-text);flex:none;letter-spacing:.02em}
.mk__st{display:inline-flex;align-items:center;gap:6px}
.mk .end .mk__st.is-open{color:var(--w-text)}
.mk__st.is-open::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--w-ink)}
/* Fixed deposit card */

.fd__strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:18px;padding:4px;border-radius:14px;background:var(--w-ground)}
.fd__strip span{display:grid;gap:4px;justify-items:center;padding:9px 0 10px;border-radius:10px;font:400 11px/1 var(--w-font-text);color:var(--w-grey-2)}
.fd__strip b{font:500 13px/1 var(--w-font-text);color:var(--w-text)}
.fd__strip .on{background:var(--w-white);box-shadow:0 1px 2px rgb(var(--w-umber) / .08),0 0 0 1px var(--w-line)}
.fd__strip .on b{font-weight:600}

/* Goals panel */
.gp{--card-w:760px}
.gp__stats{display:grid;grid-template-columns:1fr 1fr;margin-top:16px;padding:14px 16px;border-radius:14px;background:var(--w-ground)}
.gp__stats > div + div{padding-left:16px;border-left:1px solid var(--w-line-warm)}
.gp__stats b{display:block;margin-top:4px;font:600 20px/1.1 var(--w-font-text);letter-spacing:-0.01em}

/* Renowned investor card */
.ri__head{display:flex;align-items:center;gap:12px}
.ri__bars{display:grid;gap:11px;margin-top:18px}
.ri__bar{display:grid;grid-template-columns:80px minmax(0,1fr) 30px;align-items:center;gap:10px;font:400 12px/1 var(--w-font-text);color:var(--w-grey-1)}
.ri__bar b{font:500 12px/1 var(--w-font-text);color:var(--w-text);text-align:right;font-variant-numeric:tabular-nums}
.ri__bar .bar{margin:0}
/* US dollar card */
.usd__fig{margin-top:10px;font:600 30px/1.05 var(--w-font-text);letter-spacing:-0.02em}
.usd__fig small{font-size:18px;color:var(--w-grey-4)}

/* ===================== 11. Signature dark tile: the Wealth Health Checkup ===================== */
.w-tile.w-tile--ink{color:var(--w-on-dark);box-shadow:none;background:
  radial-gradient(85% 75% at var(--glow-x,100%) 100%, rgb(227 30 36 / .041) 0%, rgb(227 30 36 / 0) 62%),
  radial-gradient(130% 110% at 100% 0%, var(--w-dark-warm) 0%, rgb(34 30 26 / 0) 62%),
  var(--w-ink)}
.w-tile--ink .w-label,.w-tile--ink .w-body,.w-tile--ink .w-lead,.w-tile--ink .w-fine{color:var(--w-on-dark-2)}
.w-tile--ink .w-heading,.w-tile--ink .w-title,.w-tile--ink .w-display{color:var(--w-on-dark)}
.w-check{height:600px;justify-content:center;--glow-x:100%}
.w-check .w-tile__copy{max-width:30rem}
.w-check .w-tile__copy .w-title{max-width:11em}
.w-check .w-tile__copy .w-title + .w-body{margin-top:20px}
.w-check .w-actions{margin-top:32px}
.w-check .w-fine{margin-top:16px}
.w-check > .w-phone{position:absolute;right:120px;top:120px;margin:0}

/* ===================== 12. Large figure (the ₹100 tile) ===================== */

/* ===================== 13. Closing tile ===================== */
.w-tile.w-tile--quiet{background:
  radial-gradient(70% 60% at 100% 0%, rgb(227 30 36 / .01) 0%, rgb(227 30 36 / 0) 70%),
  linear-gradient(180deg, var(--w-white) 38%, var(--w-quiet) 100%)}
.w-close{min-height:600px}
.w-close .w-tile__copy{max-width:640px}
.w-close .w-lead{max-width:none}
.w-close .w-lead,.w-close .w-fine{text-wrap:balance}
.w-close .w-fine{max-width:46ch}
.w-close > .w-phone{position:absolute;top:120px;right:96px;margin:0}
.w-close .w-display + .w-lead{margin-top:24px}
.w-close .w-actions{margin-top:40px}
.w-close .w-fine{margin-top:16px}
.w-close .w-fine + .w-fine{margin-top:6px}

/* ===================== 14. Footer ===================== */
.w-footer{background:var(--w-ground);padding:0 0 40px}
.w-footer__top{display:grid;grid-template-columns:minmax(0,4fr) repeat(4,minmax(0,2fr));gap:40px var(--w-gap);padding-top:48px;border-top:1px solid var(--w-line-warm)}
.w-footer__brand .w-body{margin-top:16px;max-width:30ch;font-size:var(--w-fs-label);line-height:1.5}
.w-footer__brand .w-link{margin-top:16px;font-size:var(--w-fs-label)}
.w-footer h2{font:500 var(--w-fs-label)/1.4 var(--w-font-text);color:var(--w-text);margin:0 0 16px;letter-spacing:var(--w-tr-label)}
.w-footer li{margin:0 0 12px}
.w-footer li a{font:400 var(--w-fs-label)/1.5 var(--w-font-text);color:var(--w-grey-1);transition:color var(--w-dur-1) var(--w-ease-hover)}
.w-footer li a:hover{color:var(--w-text)}
.w-footer .w-soon{margin-left:6px;font-size:var(--w-fs-fine);color:var(--w-grey-2)}
.w-footer__legal{margin-top:64px;padding-top:32px;border-top:1px solid var(--w-line-warm);display:grid;gap:12px}
.w-footer__legal .w-fine{max-width:108ch}
.w-footer__legal .w-warn{font-size:var(--w-fs-label);line-height:1.5;color:var(--w-text);max-width:108ch}
.w-footer__legal .w-id{font-weight:500;color:var(--w-grey-1)}
.w-footer__bottom{margin-top:32px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;font-size:var(--w-fs-fine);color:var(--w-grey-2)}
.w-footer__bottom nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.w-footer__bottom a{transition:color var(--w-dur-1) var(--w-ease-hover)}
.w-footer__bottom a:hover{color:var(--w-text)}

/* ===================== 15. Motion ===================== */
.w-motion .w-hero h1 .ln > span{transform:translateY(105%);transition:transform var(--w-dur-4) var(--w-ease-out)}
.w-motion .w-hero h1 .ln + .ln > span{transition-delay:80ms}
.w-motion .w-hero [data-hero]{opacity:0;transform:translateY(16px);transition:opacity var(--w-dur-3) var(--w-ease-out),transform var(--w-dur-3) var(--w-ease-out);transition-delay:calc(200ms + var(--i,0) * 60ms)}
.w-motion .w-hero [data-hero-v]{opacity:0;transform:translateY(24px);transition:opacity var(--w-dur-4) var(--w-ease-out),transform var(--w-dur-4) var(--w-ease-out);transition-delay:calc(240ms + var(--i,0) * 120ms)}
.w-motion .w-hero.is-ready h1 .ln > span,.w-motion .w-hero.is-ready [data-hero],.w-motion .w-hero.is-ready [data-hero-v]{opacity:1;transform:none}
.w-motion [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity var(--w-dur-3) var(--w-ease-out),transform var(--w-dur-3) var(--w-ease-out),translate var(--w-dur-2) var(--w-ease-hover),box-shadow var(--w-dur-2) var(--w-ease-hover);transition-delay:calc(var(--i,0) * 60ms),calc(var(--i,0) * 60ms),0ms,0ms}
.w-motion [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .w-wash i{animation:none}
}

/* ===================== 16. Responsive ===================== */
@media (max-width:1279px){
  .w-tile--tall{height:540px}
  .w-phone--lg{--phone-w:300px}.w-phone--md{--phone-w:260px}
  .w-check{height:560px}
  .w-check > .w-phone{right:64px;top:112px;--phone-w:300px}
  .w-close{min-height:560px}.w-close .w-tile__copy{max-width:520px}.w-close > .w-phone{right:48px;top:160px;--phone-w:260px}
}
@media (max-width:1199px){
  .w-tile--row{flex-direction:column;gap:0}
  .w-tile--row .w-tile__copy{max-width:26rem;flex:none}
  .w-tile--row .w-tile__card{margin-top:auto;padding-top:40px;align-self:center;width:100%;display:flex;justify-content:center}
  
  .w-footer__top{grid-template-columns:repeat(4,minmax(0,1fr))}.w-footer__brand{grid-column:1 / -1}
}
@media (max-width:1023px){
  .w-span-5,.w-span-7{grid-column:span 6}
  .w-tile--tall{height:520px}
  .w-phone--lg,.w-phone--md{--phone-w:240px}
  .w-check{height:auto;justify-content:flex-start;--glow-x:50%}
  .w-check > .w-phone{position:static;align-self:center;--phone-w:260px;margin:48px auto calc(-1 * var(--w-tile-pad) - 160px)}
  .w-close{min-height:0}
  .w-close > .w-phone{position:static;align-self:center;--phone-w:240px;margin:48px auto calc(-1 * var(--w-tile-pad) - 148px)}
  .w-footer__top{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .w-hero{padding-bottom:64px}
  .w-hero .w-display + .w-lead{margin-top:24px}
  .w-hero .w-actions{margin-top:32px}
  /* One rule for every home page action row on phones: the button takes the full width, a text link centres under it */
  .w-hero .w-actions,.w-close .w-actions,.w-head .w-actions,.w-ideas__end .w-actions,.w-check .w-actions{flex-direction:column;align-items:stretch;gap:20px}
  .w-hero .w-actions .w-btn,.w-close .w-actions .w-btn,.w-head .w-actions .w-btn,.w-ideas__end .w-actions .w-btn,.w-check .w-actions .w-btn{width:100%}
  .w-hero .w-actions .w-link,.w-close .w-actions .w-link{justify-content:center}
  .w-hero .w-fee,.w-close .w-fine{text-align:center;margin-inline:auto}
  .w-bento > *{grid-column:1 / -1}
  .w-tile--tall,.w-tile--short{height:auto;min-height:0}
  .w-tile > .w-phone{margin-top:32px;margin-bottom:calc(-1 * var(--w-tile-pad) - 148px);align-self:center}
  .w-tile > .w-phone--end{align-self:center}
  .w-tile__card{padding-top:32px}
  .w-tile--row .w-tile__card{padding-top:32px}
  .w-check > .w-phone{--phone-w:240px;margin:40px auto calc(-1 * var(--w-tile-pad) - 148px)}
  .w-close .w-display{font-size:var(--w-fs-title);line-height:var(--w-lh-title);letter-spacing:var(--w-tr-title)}
  .w-footer__top{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 16px}
  .w-footer{padding-bottom:32px}
  .gp__stats b{font-size:18px}
}
/* ===================== 17. Hero theme card (floating, Stripe manner) and the score gauge ===================== */
/* A floating card overlaps the layer beneath it by about a quarter of its width and never covers a main figure.
   The home hero floats a theme collection card; the score gauge (.sc) below is used by the checkup page. */
.w-float{position:absolute;z-index:3;width:var(--card-w,256px);padding:16px 18px;border-radius:var(--w-r-card);
  background:var(--w-white);box-shadow:var(--w-shadow-float);font-family:var(--w-font-text);color:var(--w-text);letter-spacing:0}
.th{display:flex;align-items:center;gap:16px}
.th__ic{position:relative;display:grid;place-items:center;width:76px;height:76px;flex:none;border-radius:20px;color:var(--w-on-dark);
  background:radial-gradient(90% 90% at 100% 0%,#2A2520 0%,rgb(42 37 32 / 0) 70%),var(--w-ink)}
.th__ic svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.th__ttl{display:block;font:600 14px/1.25 var(--w-font-text);letter-spacing:0;max-width:9.5em}
.th__chip{display:inline-flex;margin-top:10px;padding:5px 10px;border-radius:var(--w-r-pill);background:var(--w-sand);font:500 11.5px/1 var(--w-font-text);color:var(--w-text)}
.th__cap{display:block;margin-top:8px;font:400 11px/1.2 var(--w-font-text);color:var(--w-grey-2)}
.sc{display:flex;align-items:center;gap:16px}
.sc__g{position:relative;width:84px;height:84px;flex:none}
.sc__g svg{display:block;width:100%;height:100%;overflow:visible}
.sc__track,.sc__arc{fill:none;stroke-width:7;stroke-linecap:round}
.sc__track{stroke:var(--w-d5)}
.sc__arc{stroke:var(--w-ink);stroke-dasharray:100;stroke-dashoffset:28}
.sc__knob{fill:var(--w-white);stroke:var(--w-ink);stroke-width:2.6}
.sc__fig{position:absolute;inset:0;display:grid;place-content:center;text-align:center;padding-top:2px}
.sc__fig b{display:block;font:600 26px/1 var(--w-font-text);letter-spacing:-0.02em}
.sc__fig small{display:block;margin-top:3px;font:400 9.5px/1 var(--w-font-text);color:var(--w-grey-2)}
.sc__ttl{display:block;font:600 14px/1.25 var(--w-font-text);letter-spacing:0}
.sc__chip{display:inline-flex;margin-top:10px;padding:5px 10px;border-radius:var(--w-r-pill);background:var(--w-sand);font:500 11.5px/1 var(--w-font-text);color:var(--w-text)}
.sc__cap{display:block;margin-top:8px;font:400 11px/1.2 var(--w-font-text);color:var(--w-grey-2)}
.w-motion .sc__arc{stroke-dashoffset:99.9;transition:stroke-dashoffset 1200ms var(--w-ease-out) 900ms}
.w-motion .w-hero.is-ready .sc__arc{stroke-dashoffset:28}
.w-motion .sc__knob{opacity:0;transition:opacity 300ms var(--w-ease-out) 1900ms}
.w-motion .w-hero.is-ready .sc__knob{opacity:1}

/* ===================== 18. Pointer spotlight on tiles ===================== */
/* A large, very soft radial light in Areion red and coral follows the pointer inside each tile and fades in on hover.
   It sits under the tile content (z-index -1 inside the isolated tile), only on fine pointers with hover (the w-spot
   class is set by wealthier.js), and is removed under reduced motion and on touch. */
.w-tile::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;opacity:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgb(227 30 36 / .01) 0%,rgb(240 231 222 / .023) 38%,rgb(240 231 222 / 0) 72%);
  transition:opacity 520ms var(--w-ease-hover)}
.w-tile--ink::before{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgb(240 231 222 / .059) 0%,rgb(227 30 36 / .011) 38%,rgb(227 30 36 / 0) 72%)}
@media (hover:hover) and (pointer:fine){.w-spot .w-tile:hover::before{opacity:1}}
@media (prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){.w-tile::before{content:none}}

/* ===================== 19. Soft accents (three places only) ===================== */
/* 1. A faint warm wash behind the Invest heading */
.w-accent-head{position:relative;isolation:isolate;overflow-x:clip}
.w-accent-head .w-head{position:relative}
.w-accent-head .w-head::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:-260px;top:-120px;width:940px;height:560px;
  background:radial-gradient(closest-side,rgb(240 231 222 / .78) 0%,rgb(240 229 220 / .6) 30%,rgb(240 231 222 / .192) 56%,rgb(240 231 222 / .072) 78%,rgb(240 231 222 / 0) 100%)}
/* 2. A soft red and sand glow behind the Wealth Health Checkup tile */
.w-accent-glow .w-check{box-shadow:40px 56px 120px -60px rgb(227 30 36 / .03),24px 32px 96px -40px rgb(240 231 222 / .063),-32px -16px 120px -44px rgb(240 226 210 / .95)}
/* 3. A gentle warm fade into the footer */
.w-footer{background:
  radial-gradient(70% 90% at 50% 100%,rgb(240 231 222 / .85) 0%,rgb(240 231 222 / 0) 70%),
  radial-gradient(34% 48% at 90% 100%,rgb(240 231 222 / .12) 0%,rgb(240 231 222 / 0) 70%),
  var(--w-ground)}

/* ===================== 20. Inner pages (shared by checkup, disclosures, privacy, terms, 404) ===================== */
.w-page{padding-top:calc(var(--w-nav-h) + var(--w-hero-top))}
.w-page-head{max-width:46rem}
.w-page-head .w-label + .w-display,.w-page-head .w-label + .w-title{margin-top:16px}
.w-page-head .w-display + .w-lead,.w-page-head .w-title + .w-lead{margin-top:24px}
.w-prose{max-width:72ch;color:var(--w-grey-1)}
.w-prose > * + *{margin-top:16px}
.w-prose h2{margin-top:56px;font:500 var(--w-fs-heading)/var(--w-lh-heading) var(--w-font-text);letter-spacing:var(--w-tr-heading);color:var(--w-text)}
.w-prose h3{margin-top:32px;font:500 var(--w-fs-subheading)/var(--w-lh-subheading) var(--w-font-text);letter-spacing:var(--w-tr-subheading);color:var(--w-text)}
.w-prose p,.w-prose li{font-size:var(--w-fs-body);line-height:var(--w-lh-body)}
.w-prose ul{padding-left:1.2em;list-style:disc}
.w-prose li + li{margin-top:8px}
.w-prose a{color:var(--w-text);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--w-line-warm);text-underline-offset:3px}
.w-prose a:hover{color:var(--w-red-deep);text-decoration-color:currentColor}

/* ===================== 21. Responsive for sections 17 to 19 ===================== */
@media (max-width:1023px){
  .w-accent-head .w-head::before{left:-200px;top:-140px;width:720px;height:480px}
  .w-accent-glow .w-check{box-shadow:0 48px 110px -56px rgb(227 30 36 / .035),0 -12px 110px -48px rgb(240 226 210 / .9)}
}
@media (max-width:767px){
  .w-accent-head .w-head::before{left:-120px;top:-110px;width:560px;height:440px}
  .w-accent-glow .w-check{box-shadow:0 44px 96px -56px rgb(227 30 36 / .035),0 -12px 96px -48px rgb(240 226 210 / .9)}
}

/* ===================== 22. Touch: 44 px targets on coarse pointers (last, so it wins the cascade) ===================== */
@media (pointer:coarse){
  .w-nav .w-btn--sm{--h:44px}.w-nav__links a{padding:14px 0}.w-nav__logo{padding:11px 0}
  .w-link{min-height:44px}
  .w-fine .w-link{min-height:0;vertical-align:baseline}
  .w-menu__sub{gap:0}.w-menu__sub a{display:flex;align-items:center;min-height:44px;padding:0}
  .w-footer li{margin:0}.w-footer li a,.w-footer__bottom a{display:inline-flex;align-items:center;min-height:44px}
}

/* ===================== 23. Legal pages (disclosures, privacy, terms) and the 404 page ===================== */
/* The page head sits on white and the document on the warm ground: the ground fade runs the height of the head. */
.w-page.w-ground{--w-fade:440px}
.w-page-head .w-title{max-width:15em}
.w-page-head .w-lead + .w-fine{margin-top:20px}
/* Document layout: a sticky section index (columns 1 to 3) beside a column of white section tiles (columns 5 to 12) */
.w-doc{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--w-gap);align-items:start;margin-top:var(--w-head-gap)}
.w-toc{grid-column:1 / span 3;position:sticky;top:calc(var(--w-nav-h) + 40px)}
.w-toc__label{margin:0 0 14px;font:500 var(--w-fs-label)/1.4 var(--w-font-text);letter-spacing:var(--w-tr-label);color:var(--w-text)}
.w-toc ol{margin:0;padding:0;list-style:none;border-left:1px solid var(--w-line-warm)}
.w-toc ol a{display:block;margin-left:-1px;padding:6px 0 6px 17px;border-left:1.5px solid transparent;
  font:400 var(--w-fs-label)/1.45 var(--w-font-text);letter-spacing:var(--w-tr-label);color:var(--w-grey-2);
  transition:color var(--w-dur-1) var(--w-ease-hover),border-color var(--w-dur-2) var(--w-ease-hover)}
.w-toc ol a:hover{color:var(--w-text)}
.w-toc ol a[aria-current="true"]{color:var(--w-text);border-left-color:var(--w-ink)}
.w-toc__note{margin-top:28px;max-width:26ch}
.w-doc__body{grid-column:5 / span 8;min-width:0;display:grid;gap:var(--w-gap);container-type:inline-size}
.w-doc__sec{position:relative;min-width:0;padding:var(--w-tile-pad);border-radius:var(--w-r-tile);background:var(--w-white);box-shadow:var(--w-shadow-tile)}
.w-doc__sec > h2{margin:0;font-family:var(--w-font-text);font-weight:500;font-size:var(--w-fs-heading);line-height:var(--w-lh-heading);
  letter-spacing:var(--w-tr-heading);color:var(--w-text);text-wrap:balance}
.w-doc__sec > * + *{margin-top:24px}
.w-doc__sec > h2 + *{margin-top:20px}
.w-doc__sec .w-prose{max-width:64ch}
.w-doc__sec .w-prose h3:first-child{margin-top:0}
.w-prose strong{font-weight:500;color:var(--w-text)}
.w-prose ul li::marker{color:var(--w-grey-4)}
.w-doc__sec .w-actions{gap:12px 32px}
/* Fact sheet rows (company information) */
.w-dl{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);margin-inline:0;margin-bottom:0;border-top:1px solid var(--w-line-soft)}
.w-dl dt,.w-dl dd{margin:0;padding:14px 0;border-bottom:1px solid var(--w-line-soft);line-height:1.5}
.w-dl dt{padding-right:24px;font-size:var(--w-fs-label);color:var(--w-grey-2)}
.w-dl dd{font-size:15px;color:var(--w-text);letter-spacing:var(--w-tr-ui)}
.w-dl dd a{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--w-line-warm);text-underline-offset:3px;transition:color var(--w-dur-1) var(--w-ease-hover)}
.w-dl dd a:hover{color:var(--w-red-deep);text-decoration-color:currentColor}
/* Prescribed statement set apart (the standard warning) */
.w-callout{padding:20px 24px;border-radius:var(--w-r-inner);background:var(--w-paper);box-shadow:inset 0 0 0 1px var(--w-line-soft);
  font:500 var(--w-fs-body)/1.55 var(--w-font-text);letter-spacing:var(--w-tr-body);color:var(--w-text)}
/* Inset panels: pillar weights and step lists */
.w-weights,.w-steps{padding:4px 24px;list-style:none;border-radius:var(--w-r-inner);background:var(--w-quiet);box-shadow:inset 0 0 0 1px var(--w-line-soft)}
.w-weights li{display:grid;grid-template-columns:minmax(0,14rem) minmax(0,1fr) 2.5rem;align-items:center;gap:20px;padding:13px 0;border-bottom:1px solid var(--w-line-soft)}
.w-weights li:last-child{border-bottom:0}
.w-weights__name{font:500 14px/1.3 var(--w-font-text);letter-spacing:0;color:var(--w-text)}
.w-weights__bar{height:6px;border-radius:3px;background:var(--w-d5);overflow:hidden}
.w-weights__bar i{display:block;width:var(--w);height:100%;border-radius:3px;background:var(--w-ink)}
.w-weights b{font:500 14px/1 var(--w-font-text);text-align:right;font-variant-numeric:tabular-nums;color:var(--w-text)}
.w-weights .w-weights__head{padding:14px 0 10px;font:400 12px/1.3 var(--w-font-text);color:var(--w-grey-2)}
.w-weights .w-weights__head span:last-child{text-align:right}
.w-weights .w-weights__total .w-weights__name,.w-weights .w-weights__total b{font-weight:600}
.w-weights .w-weights__head .w-weights__bar,.w-weights .w-weights__total .w-weights__bar{background:none}
.w-steps li{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:20px;padding:20px 0;border-bottom:1px solid var(--w-line-soft)}
.w-steps li:last-child{border-bottom:0}
.w-steps__when{margin:0;padding-top:2px;font:500 13px/1.45 var(--w-font-text);letter-spacing:var(--w-tr-fine);color:var(--w-grey-2)}
.w-steps h3{margin:0;font:500 var(--w-fs-subheading)/var(--w-lh-subheading) var(--w-font-text);letter-spacing:var(--w-tr-subheading);color:var(--w-text)}
.w-steps h3 + p{margin-top:6px}
.w-steps p:not(.w-steps__when){font-size:15px;line-height:1.55;color:var(--w-grey-1);max-width:60ch;text-wrap:pretty}
.w-steps a,.w-table a{color:var(--w-text);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--w-line-warm);text-underline-offset:3px}
/* Data and purposes table (privacy) */
.w-table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.w-table th{padding:0 20px 12px 0;text-align:left;vertical-align:bottom;font:500 13px/1.4 var(--w-font-text);color:var(--w-grey-2);border-bottom:1px solid var(--w-line-warm)}
.w-table td{padding:16px 20px 16px 0;vertical-align:top;color:var(--w-grey-1);border-bottom:1px solid var(--w-line-soft);text-wrap:pretty}
.w-table th:last-child,.w-table td:last-child{padding-right:0}
.w-table td:first-child{width:22%;font:500 15px/1.4 var(--w-font-text);letter-spacing:0;color:var(--w-text)}
.w-table td:nth-child(2){width:42%}
.w-table tr:last-child td{border-bottom:0}
/* Summary row (privacy, in short) */
.w-summary{display:grid;gap:24px}
.w-summary h3{margin:0;font:500 var(--w-fs-subheading)/var(--w-lh-subheading) var(--w-font-text);letter-spacing:var(--w-tr-subheading);color:var(--w-text);text-wrap:balance}
.w-summary p{margin-top:8px;font-size:var(--w-fs-label);line-height:1.5;color:var(--w-grey-1);text-wrap:pretty}
@container (min-width:640px){.w-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}}
@container (max-width:560px){
  .w-dl{grid-template-columns:1fr}
  .w-dl dt{padding:14px 0 2px;border-bottom:0}
  .w-dl dd{padding-top:0}
  .w-weights{padding:4px 18px}
  .w-weights li{grid-template-columns:minmax(0,1fr) 2.5rem;row-gap:10px}
  .w-weights__bar{grid-column:1 / -1;grid-row:2}
  .w-weights .w-weights__head .w-weights__bar,.w-weights .w-weights__total .w-weights__bar{display:none}
  .w-steps{padding:4px 18px}
  .w-steps li{grid-template-columns:1fr;gap:4px}
  .w-table thead{display:none}
  .w-table,.w-table tbody,.w-table tr,.w-table td{display:block;width:auto}
  .w-table tr{padding:16px 0;border-bottom:1px solid var(--w-line-soft)}
  .w-table tr:first-child{padding-top:0}
  .w-table tr:last-child{border-bottom:0;padding-bottom:0}
  .w-table td,.w-table td:first-child,.w-table td:nth-child(2){width:auto;padding:0;border:0}
  .w-table td + td{margin-top:8px}
  .w-table td[data-label]::before{content:attr(data-label);display:block;margin-bottom:2px;font:500 12px/1.4 var(--w-font-text);color:var(--w-grey-2)}
}
/* The 404 page */
.w-lost{min-height:clamp(420px, 58vh, 600px);display:flex;flex-direction:column;justify-content:center}
.w-lost .w-label + .w-display{margin-top:20px}
.w-lost .w-display{max-width:11.5em;text-wrap:balance}
.w-lost .w-display + .w-lead{margin-top:28px}
.w-lost .w-actions{margin-top:40px}
.w-lost__more{display:flex;flex-wrap:wrap;gap:8px 28px;max-width:46rem;margin-top:64px;padding-top:24px;border-top:1px solid var(--w-line-warm)}
.w-lost__more a{font:400 var(--w-fs-label)/1.5 var(--w-font-text);letter-spacing:var(--w-tr-label);color:var(--w-grey-1);transition:color var(--w-dur-1) var(--w-ease-hover)}
.w-lost__more a:hover{color:var(--w-text)}
/* Below 1024 the index becomes a card above the document */
@media (max-width:1023px){
  .w-doc{grid-template-columns:minmax(0,1fr)}
  .w-toc,.w-doc__body{grid-column:1 / -1}
  .w-toc{position:static;padding:20px 24px 12px;border-radius:var(--w-r-card);background:var(--w-white);box-shadow:var(--w-shadow-tile)}
  .w-toc ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;border-left:0}
  .w-toc ol a{margin:0;padding:10px 0;border-left:0;border-bottom:1px solid var(--w-line-soft);color:var(--w-grey-1)}
  .w-toc li:last-child a,.w-toc li:nth-last-child(2):nth-child(odd) a{border-bottom:0}
  .w-toc ol a[aria-current="true"]{color:var(--w-grey-1)}
  .w-toc__note{display:none}
}
@media (max-width:767px){
  .w-toc{padding:16px 20px 8px}
  .w-toc ol{grid-template-columns:minmax(0,1fr)}
  .w-toc li:nth-last-child(2):nth-child(odd) a{border-bottom:1px solid var(--w-line-soft)}
  .w-lost .w-actions{flex-direction:column;align-items:stretch;gap:20px}
  .w-lost .w-actions .w-link{justify-content:center}
  .w-lost__more{margin-top:48px}
}
@media (pointer:coarse){.w-toc ol a{display:flex;align-items:center;min-height:44px}.w-lost__more a{display:inline-flex;align-items:center;min-height:44px}}
@media print{
  .w-nav,.w-menu,.w-skip,.w-toc,.w-footer__top,.w-footer__bottom nav{display:none!important}
  .w-page{padding-top:0}.w-page.w-ground{background:none}
  .w-doc{display:block;margin-top:24px}
  .w-doc__sec{padding:0;margin-top:28px;box-shadow:none;break-inside:avoid-page}
}

/* ===================== 24. Ways to invest: the ideas carousel ===================== */
/* A horizontal card carousel in the manner of the apple.com galleries: the track starts at the page container's left
   edge and bleeds off the right edge, cards snap to that edge, and touch swipe, trackpads and the scroll wheel stay
   native. wealthier.js adds the previous and next buttons, the progress bar, arrow keys and mouse drag ([data-carousel]).
   Each card is an a.w-tile, so it lifts on hover and carries the pointer spotlight.
   Sizing: --n cards show in full and the next one peeks by --peek of its width. The carousel is a size container, so
   100cqw is its own width (the viewport without a classic scrollbar). Every card has the same copy area (--copy-h) and
   the same art box (--art-h) on its bottom edge, so all eight visuals start on one line: app screens rise from the card
   bottom and are cropped by it, and app cards (--art-w by --wid-h) end 28 px above it. */
.w-car{--n:3;--peek:.35;--card-pad:28px;--copy-h:240px;position:relative;container-type:inline-size;
  --car-pad:max(var(--w-gutter), calc((100cqw - var(--w-maxw)) / 2));
  --card-w:clamp(300px, calc((100cqw - var(--car-pad) - var(--n) * var(--w-gap)) / (var(--n) + var(--peek))), 440px);
  --art-w:clamp(236px, calc(var(--card-w) * .68), 276px);
  --wid-h:calc(var(--art-w) * 1.04);
  --art-h:calc(var(--wid-h) + 28px);
  --card-h:calc(var(--copy-h) + var(--art-h))}
.w-car__track{display:flex;gap:var(--w-gap);margin:-20px 0 -48px;padding:20px var(--car-pad) 48px;list-style:none;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--car-pad);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;position:relative}
.w-car__track::-webkit-scrollbar{display:none}
.w-car__item{flex:0 0 var(--card-w);display:flex;scroll-snap-align:start}
.w-car.is-free .w-car__track{scroll-snap-type:none}
.w-car.is-dragging .w-car__track{cursor:grabbing;-webkit-user-select:none;user-select:none}
.w-car.is-dragging .w-card{pointer-events:none}
.w-car img,.w-car svg{-webkit-user-drag:none}
@media (pointer:fine){.w-car__track a{-webkit-user-select:none;user-select:none}}

/* The card: label, title, one line and the action on top; the visual in the art box on the bottom edge */
.w-tile.w-card{width:100%;height:var(--card-h);padding:var(--card-pad) var(--card-pad) 0;-webkit-tap-highlight-color:transparent}
.w-card--sand{background:var(--w-sand)}
.w-card--blush{background:var(--w-blush-tile)}
/* On a card the dark tile's red corner glow is smaller and fainter than on a full tile, so it stays a warm hint */
.w-tile--ink.w-card{background:
  radial-gradient(75% 52% at 100% 100%, rgb(227 30 36 / .027) 0%, rgb(227 30 36 / 0) 64%),
  radial-gradient(120% 90% at 100% 0%, var(--w-dark-warm) 0%, rgb(34 30 26 / 0) 62%),
  var(--w-ink)}
/* On the dark card the spotlight is a faint warm white, so the card never browns */
.w-tile--ink.w-card::before{background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgb(255 238 228 / .07) 0%,rgb(255 238 228 / 0) 70%)}
.w-card__copy{position:relative;z-index:1}
.w-card__label{font:500 var(--w-fs-label)/1.4 var(--w-font-text);letter-spacing:var(--w-tr-label);color:var(--w-grey-2)}
.w-card__title{margin-top:10px;font:500 28px/1.12 var(--w-font-text);letter-spacing:-0.024em;color:var(--w-text);text-wrap:balance}
.w-card__line{margin-top:10px;font-size:var(--w-fs-ui);line-height:1.5;letter-spacing:var(--w-tr-ui);color:var(--w-grey-1);text-wrap:pretty}
.w-card__go{display:flex;align-items:center;gap:8px;margin-top:16px;font:500 var(--w-fs-ui)/1.4 var(--w-font-text);letter-spacing:var(--w-tr-ui);color:var(--w-text)}
.w-card:hover .w-arrow__stem,.w-card:focus-visible .w-arrow__stem{opacity:1}
.w-card:hover .w-arrow__tip,.w-card:focus-visible .w-arrow__tip{transform:translateX(3px)}
.w-tile--ink .w-card__label,.w-tile--ink .w-card__line{color:var(--w-on-dark-2)}
.w-tile--ink .w-card__title,.w-tile--ink .w-card__go{color:var(--w-on-dark)}
.w-card__art{position:relative;flex:none;height:var(--art-h);margin-top:auto;display:flex;justify-content:center;align-items:flex-start}
/* App screens rise from the card bottom, cropped by the card */
.w-card__phone{flex:none;width:var(--art-w);max-width:none;height:auto;filter:var(--w-drop-device)}
.w-tile--ink .w-card__phone{filter:var(--w-drop-device-dark)}
/* App cards are as wide as the phones and all the same height, with hairline depth only */
.w-sheet{flex:none;display:flex;flex-direction:column;justify-content:space-between;gap:8px;width:var(--art-w);max-width:none;height:var(--wid-h);padding:18px}

/* App depictions inside the cards: kit type at 15, 13 and 11.5 px only */
.w-sheet .ac__ttl{font-size:15px}
.w-sheet .ac__cap{font-size:11.5px}
/* Theme collection, from the app's theme cards: icon tile, fund count, name */
.tc__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.tc__ic{display:grid;place-items:center;width:68px;height:68px;flex:none;border-radius:20px;background:var(--w-ground);color:var(--w-ink)}
.tc__ic svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tc__n{padding-top:2px;font:400 13px/1.3 var(--w-font-text);color:var(--w-grey-2)}
/* The collection's mix of Indian and international funds: two labels over a two part bar, no swatches */
.tc__mix{margin-top:auto}
.tc__leg{display:flex;justify-content:space-between;gap:12px;font:400 11.5px/1.2 var(--w-font-text);color:var(--w-grey-2)}
.tc__leg b{margin-left:4px;font-weight:600;color:var(--w-text)}
.tc__bar{display:flex;gap:3px;height:6px;margin-top:8px}
.tc__bar i{display:block;border-radius:3px;background:var(--w-ink)}
.tc__bar i + i{background:var(--w-d4)}
.tc__foot{padding-top:14px;border-top:1px solid var(--w-line-soft)}
.tc__name{display:block;font:600 15px/1.25 var(--w-font-text);letter-spacing:0;color:var(--w-text)}
.tc__cap{margin-top:5px;font:400 11.5px/1.3 var(--w-font-text);color:var(--w-grey-2)}
/* Markets: four rows share the card height evenly */
.w-sheet.mk{justify-content:flex-start;gap:0}
.w-sheet.mk .ac__list{flex:1;display:flex;flex-direction:column;margin-top:6px}
.w-sheet.mk .ac__li{flex:1;gap:10px;padding:0}
.w-sheet.mk .ac__li b{font-size:13px}
.w-sheet.mk .ac__li small{margin-top:3px;font-size:11.5px}
.w-sheet.mk .end .mk__st{font-size:13px}
/* Investor portfolio */
.w-sheet .av--ic{width:36px;height:36px;color:var(--w-ink)}
.av--ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.w-sheet .ri__head .ac__ttl,.w-sheet .ri__head .ac__cap{display:block}
.w-sheet .ri__head .ac__cap{margin-top:3px}
.w-sheet .ri__bars{gap:9px;margin-top:0}
.w-sheet .ri__bar{grid-template-columns:74px minmax(0,1fr) 30px;font-size:11.5px}
.w-sheet .ri__bar b{font-size:11.5px}
.ri__foot{display:grid;gap:3px;padding:10px 12px;border-radius:12px;background:var(--w-ground)}
.ri__foot b{font:500 13px/1.25 var(--w-font-text);color:var(--w-text)}
.ri__foot small{font:400 11.5px/1.3 var(--w-font-text);color:var(--w-grey-2)}

/* Reveal: the carousel itself stays visible, and the first four cards slide in from the right, 70 ms apart. The motion
   is on the card, not on the list item, so the scroll snap positions never move while it runs. */
.w-car__item:nth-child(2){--d:70ms}.w-car__item:nth-child(3){--d:140ms}.w-car__item:nth-child(4){--d:210ms}
.w-motion .w-car[data-reveal]{opacity:1;transform:none}
.w-motion .w-car[data-reveal] .w-car__item:nth-child(-n+4) > .w-card{transition:opacity var(--w-dur-3) var(--w-ease-out) var(--d,0ms),transform var(--w-dur-4) var(--w-ease-out) var(--d,0ms),translate var(--w-dur-2) var(--w-ease-hover),box-shadow var(--w-dur-2) var(--w-ease-hover)}
.w-motion .w-car[data-reveal]:not(.is-in) .w-car__item:nth-child(-n+4) > .w-card{opacity:0;transform:translateX(32px)}
.w-motion .w-car[data-reveal] .w-car__ctl{transition:opacity var(--w-dur-3) var(--w-ease-out) 280ms}
.w-motion .w-car[data-reveal]:not(.is-in) .w-car__ctl{opacity:0}

/* Controls: a thin progress bar as wide as one card and two round icon buttons, under the track at the container's edges */
/* The track keeps 48 px of bottom padding for card shadows and is positioned, so the controls sit on their own layer
   above it; otherwise that padding covers the upper part of the buttons */
.w-car__ctl{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:28px;position:relative;z-index:1}
.w-car__ctl[hidden]{display:none}
.w-car__bar{position:relative;flex:0 1 var(--card-w);min-width:0;height:2px;border-radius:1px;background:var(--w-line-warm);overflow:hidden}
.w-car__bar i{position:absolute;inset:0 auto 0 0;width:var(--w,30%);border-radius:1px;background:var(--w-ink);transform:translateX(var(--x,0px))}
.w-car__btns{display:flex;gap:12px;flex:none}
.w-car__btn{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--w-white);color:var(--w-text);box-shadow:inset 0 0 0 1px var(--w-line-warm),0 1px 2px rgb(var(--w-umber) / .04);
  transition:background-color var(--w-dur-2) var(--w-ease-hover),color var(--w-dur-2) var(--w-ease-hover),box-shadow var(--w-dur-2) var(--w-ease-hover),opacity var(--w-dur-2) var(--w-ease-hover),transform var(--w-dur-1) var(--w-ease-hover)}
.w-car__btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover){.w-car__btn:hover{background:var(--w-ink);color:#fff;box-shadow:inset 0 0 0 1px var(--w-ink)}}
.w-car__btn:active{background:var(--w-ink);color:#fff;transform:scale(.96)}
.w-car__btn[aria-disabled="true"]{opacity:.4;cursor:default;background:var(--w-white);color:var(--w-text);box-shadow:inset 0 0 0 1px var(--w-line-warm);transform:none}
.w-car__btn:focus-visible{outline-offset:3px;border-radius:50%}

/* The action and fine print under the carousel */
.w-ideas__end{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:56px}
.w-ideas__end .w-fine{max-width:46ch}
.w-ideas .w-ideas__end + .w-note{margin-top:32px}
.w-ideas .w-note{max-width:none}

@media (max-width:1199px){.w-car{--n:2}}
@media (max-width:1023px){.w-car{--card-pad:24px}}
@media (max-width:767px){
  .w-car{--card-pad:24px;--copy-h:226px}
  .w-card__title{font-size:26px}
  .w-card__go{margin-top:14px}
  .w-sheet{padding:16px}
  .w-car__ctl{margin-top:24px}
  .w-ideas__end{margin-top:40px;flex-direction:column;align-items:stretch;gap:16px}
  .w-ideas__end .w-fine{text-align:center;margin-inline:auto}
}
@media (max-width:599px){.w-car{--n:1;--peek:.15}}

/* ===================== 25. Early access list (the tile of features without a tile of their own) ===================== */
.w-later__list{margin-top:auto;padding-top:32px;display:grid}
.w-later__list li{padding:20px 0;border-top:1px solid var(--w-line-soft)}
.w-later__list li:last-child{padding-bottom:0}
.w-later__list .w-body{margin-top:6px;font-size:15px;line-height:1.55;max-width:46ch}

/* ===================== 26. Bento additions (benchmark components and tokens only) ===================== */
/* The home navigation marks the link of the section in view (wealthier.js [data-spy]) */
.w-nav__links a[aria-current]{color:var(--w-text)}
/* Hero window: returns are hidden, so the chart card becomes an amount invested with a quiet chip, masked figures,
   the allocation bar and a one row legend; the right column opens with New Fund Offers */

.dv__mask{letter-spacing:.1em}
.alloc--lg{height:10px;margin-top:20px}
.alloc--lg i{border-radius:5px}
.legend--row{display:flex;flex-wrap:wrap;gap:9px 22px}
.legend--row span b{margin-left:6px}
.dw .av--ic{color:var(--w-ink)}
.dw .av--ic svg.ic{width:16px;height:16px}

/* Offer status chips: open offers in sand with a small red mark, upcoming ones on the ground */

/* Third columns in the bento: New Fund Offers, a SIP from ₹100, loans against mutual funds */

/* Segment strips that are controls (deposit tenures, SIP dates): the benchmark strip, as buttons */
.fd__strip button{display:grid;gap:4px;justify-items:center;padding:9px 0 10px;border:0;border-radius:10px;background:none;cursor:pointer;
  font:400 11px/1 var(--w-font-text);color:var(--w-grey-2);-webkit-tap-highlight-color:transparent;transition:background-color var(--w-dur-1) var(--w-ease-hover),box-shadow var(--w-dur-1) var(--w-ease-hover)}
.fd__strip button.on{background:var(--w-white);box-shadow:0 1px 2px rgb(var(--w-umber) / .08),0 0 0 1px var(--w-line)}
@media (hover:hover){.fd__strip button:not(.on):hover{background:rgb(255 255 255 / .6)}}
.fd__strip button:focus-visible{outline-offset:1px;border-radius:10px}

/* Loans against mutual funds */
.lamf .ac__li{padding:10px 0}
.lamf .ac__li:last-child{padding-bottom:10px}
.ac__li .lamf__p{display:inline-flex;align-items:center;gap:5px;font:500 12px/1 var(--w-font-text);color:var(--w-grey-1)}
.lamf__p svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

.lamf__cap{margin-top:10px}
/* Wide row tiles (the calculator and The Wealthier Daily) are built like the goals tile */
.w-wide .w-tile__copy{flex:none;width:20rem;max-width:20rem}
.w-wide .w-tile__card{flex:1 1 auto;justify-content:flex-end;min-width:0}
.w-tile__copy .w-body + .w-tile__link{margin-top:20px}
/* The checkup page's illustrative caption */
.ac__cap--ill{font-size:var(--w-fs-fine);line-height:1.3}
@media (max-width:1199px){
  
  .w-wide .w-tile__copy{width:auto}
  .w-wide .w-tile__card{justify-content:center}
}

/* v4.1: the Bonds heading wraps as in the benchmark and the Daily tile is built like the goals tile */
.w-later__ttl{max-width:13em}
.w-daily .w-tile__copy{width:25rem;max-width:25rem}
.w-bento > .w-calc{margin-top:0}
@media (max-width:1199px){.w-daily .w-tile__copy{width:auto;max-width:26rem}}

/* ===================== 27. Inside the app: the pinned tour ===================== */
/* On the ground, without a tile: the head, a rail of four screens and the step copy on the left, the phone on the
   right with a still sand and blush glow behind it and one floating card beside it per step.
   Pinned mode (wealthier.js sets data-mode="pin" from 1024 px wide and 700 px tall, without reduced motion): the
   section is a tall track and the stage sticks under the navigation while the scroll chooses the step. The screen and
   the copy cross fade at each step; the glow, the phone and the card drift at three depths (translate only).
   Tabs mode (data-mode="tabs"): the rail labels switch at once. Without the script all four steps are listed. */
.w-tour{position:relative;overflow-x:clip}
.w-tour__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 var(--w-gap);align-items:center}
.w-tour__copy{grid-column:1 / span 5;min-width:0;position:relative;z-index:2}
.w-tour__head{margin-bottom:0}
.w-tour__head .w-lead{max-width:28rem}
.w-tour__visual{grid-column:7 / span 6;position:relative;min-width:0;display:flex;justify-content:center;--tour-dev:320px;--shift:56px}
.w-tour__glow{position:absolute;z-index:0;left:calc(50% - var(--shift) - 380px);top:calc(50% - 380px);width:760px;height:760px;pointer-events:none;
  background:radial-gradient(40% 38% at 62% 46%,rgb(240 231 222 / .225) 0%,rgb(240 231 222 / 0) 100%),radial-gradient(closest-side,rgb(240 231 222 / .85) 0%,rgb(240 231 222 / 0) 100%)}
.w-tour__dev{position:relative;z-index:1;width:var(--tour-dev);margin-right:calc(2 * var(--shift))}
/* One frame for every screen: the screen sits under the transparent frame at the app kit's geometry (an 870 x 1788
   frame, the screen 786 x 1704 at 42 px in); the drop shadow is its own layer, so screens change without repainting it */
.w-dev{position:relative;width:100%;aspect-ratio:870 / 1788}
.w-dev::before{content:"";position:absolute;inset:.6% 1.4% .4%;z-index:-1;border-radius:calc(var(--tour-dev) * .15);
  box-shadow:0 32px 48px rgb(var(--w-umber) / .16),0 8px 12px rgb(var(--w-umber) / .08)}
.w-dev__glass{position:absolute;left:calc(41 / 870 * 100%);top:calc(41 / 1788 * 100%);width:calc(788 / 870 * 100%);height:calc(1706 / 1788 * 100%);
  overflow:hidden;border-radius:calc(var(--tour-dev) * 112 / 870);background:var(--w-white);isolation:isolate}
.w-dev__scr{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0}
.w-dev__scr.is-on{opacity:1;z-index:2}
.w-dev__frame{position:absolute;inset:0;z-index:3;width:100%;height:100%;max-width:none;pointer-events:none;-webkit-user-select:none;user-select:none}
/* The rail: four labels beside a hairline whose ink fill follows the progress */
.w-tour__rail{display:none;position:relative;margin-top:40px;padding-left:22px}
[data-mode] .w-tour__rail{display:block}
.w-tour__line{position:absolute;left:0;top:7px;bottom:7px;width:2px;border-radius:1px;background:var(--w-line-warm);overflow:hidden}
.w-tour__line i{position:absolute;inset:0;border-radius:1px;background:var(--w-ink);transform-origin:50% 0;transform:scaleY(.2)}
.w-tour__tabs{display:grid;justify-items:start}
.w-tour__tab{display:block;padding:7px 0;border:0;background:none;cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent;
  font:500 var(--w-fs-ui)/1.4 var(--w-font-text);letter-spacing:var(--w-tr-ui);color:var(--w-grey-2);transition:color var(--w-dur-1) var(--w-ease-hover)}
.w-tour__tab:hover,.w-tour__tab[aria-current="step"]{color:var(--w-text)}
.w-tour__tab:focus-visible{outline-offset:2px}
.w-tour__ts{display:none}
/* Steps: listed without the script; one at a time, cross fading in place, with it */
.w-tour__steps{display:grid;gap:28px;margin-top:40px}
.w-tour__step .w-body{margin-top:12px;max-width:30rem}
[data-mode] .w-tour__steps{gap:0;margin-top:32px}
[data-mode] .w-tour__step{grid-area:1 / 1;opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity 200ms var(--w-ease-std),transform 200ms var(--w-ease-std),visibility 0s linear 200ms}
[data-mode] .w-tour__step.is-on{opacity:1;visibility:visible;transform:none;
  transition:opacity 420ms var(--w-ease-out) 140ms,transform 420ms var(--w-ease-out) 140ms,visibility 0s}
.w-tour__end{margin-top:40px}
/* Screens: the incoming screen fades in over the outgoing one, which steps away once it is covered */
[data-mode] .w-dev__scr{transition:opacity 0s linear 440ms}
[data-mode] .w-dev__scr.is-on{transition:opacity 420ms var(--w-ease-out)}
/* Floating cards: one per step, overlapping the phone's right edge by about a quarter of their width */
.w-tour__calls{position:absolute;inset:0;z-index:4;pointer-events:none}
.w-tour__call{display:none;left:calc(100% - 20px);top:calc(var(--yf,.5) * 100%);--card-w:248px}
[data-mode] .w-tour__call{display:block;opacity:0;visibility:hidden;transform:translateY(16px);
  transition:opacity 200ms var(--w-ease-std),transform 200ms var(--w-ease-std),visibility 0s linear 200ms}
[data-mode] .w-tour__call.is-on{opacity:1;visibility:visible;transform:none;
  transition:opacity 420ms var(--w-ease-out) 180ms,transform 600ms var(--w-ease-out) 180ms,visibility 0s}
.w-tour.is-near .w-tour__glow,.w-tour.is-near [data-tour-dev],.w-tour.is-near .w-tour__call.is-on{will-change:translate}
.w-tour__call .ac__ttl{font-size:14px}
.w-tour__call > .ac__cap{margin-top:10px}

/* Pinned mode: a track of one viewport and three more steps of four fifths of a viewport each */
[data-mode="pin"] .w-tour__track{height:calc(100vh + 3 * 80vh)}
[data-mode="pin"] .w-tour__sticky{position:sticky;top:var(--w-nav-h);height:calc(100vh - var(--w-nav-h));display:flex;align-items:center}
[data-mode="pin"] .w-tour__sticky > .w-wrap{width:100%}
[data-mode="pin"] .w-tour__visual{--tour-dev:clamp(260px, (100vh - var(--w-nav-h) - 112px) * 870 / 1788, 320px)}
[data-mode="pin"] .w-tour__line i{transform:scaleY(0)}
@supports (height:100svh){
  [data-mode="pin"] .w-tour__sticky{height:calc(100svh - var(--w-nav-h))}
  [data-mode="pin"] .w-tour__visual{--tour-dev:clamp(260px, (100svh - var(--w-nav-h) - 112px) * 870 / 1788, 320px)}
}
@media (min-width:1024px) and (max-height:860px){
  .w-tour__rail{margin-top:28px}
  .w-tour__tab{padding:5px 0}
  [data-mode] .w-tour__steps{margin-top:24px}
  .w-tour__end{margin-top:28px}
}
@media (min-width:1024px) and (max-height:780px){[data-mode="pin"] .w-tour__head .w-lead{display:none}}
@media (max-width:1279px){.w-tour__visual{--shift:64px}.w-tour__call{--card-w:228px;padding:14px 16px}}
/* From 1024 px up the phone sits so that its floating card, which overlaps only the bezel, ends at the column edge
   and never runs into the page gutter (248 px cards from 1280 px, 212 px below) */
@media (min-width:1024px){
  .w-tour__visual{justify-content:flex-end;--call-w:248px}
  .w-tour__dev{margin-right:calc(var(--call-w) - 20px)}
  .w-tour__call{--card-w:var(--call-w)}
  .w-tour__glow{left:calc(100% - var(--call-w) + 20px - var(--tour-dev) / 2 - 380px)}
}
@media (min-width:1024px) and (max-width:1279px){
  .w-tour__visual{--call-w:212px}
  .w-tour__call{padding:14px}
  
}

/* ===================== 28. SIP calculator ===================== */
.w-calc__box{max-width:700px}
.w-calc__fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 28px}
.w-calc__top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.w-calc__top label{font:400 12px/1.3 var(--w-font-text);color:var(--w-grey-2)}
.w-calc__top output{font:600 15px/1.2 var(--w-font-text);color:var(--w-text);font-variant-numeric:tabular-nums;white-space:nowrap}
.w-calc__words{margin-top:-4px;font:400 11.5px/1.3 var(--w-font-text);color:var(--w-grey-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;padding:0;background:transparent;cursor:pointer;--p:50%;touch-action:pan-y}
.w-range::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--w-ink) 0 var(--p),var(--w-d5) var(--p) 100%)}
.w-range::-moz-range-track{height:6px;border-radius:3px;background:var(--w-d5)}
.w-range::-moz-range-progress{height:6px;border-radius:3px;background:var(--w-ink)}
.w-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin-top:-8px;border:0;border-radius:50%;background:var(--w-white);
  box-shadow:0 0 0 1.5px var(--w-ink),0 2px 6px rgb(var(--w-umber) / .18),0 10px 20px -10px rgb(21 21 21 / .3)}
.w-range::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:var(--w-white);
  box-shadow:0 0 0 1.5px var(--w-ink),0 2px 6px rgb(var(--w-umber) / .18),0 10px 20px -10px rgb(21 21 21 / .3)}
.w-range:focus{outline:none}
.w-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 1.5px var(--w-ink),0 0 0 4px var(--w-white),0 0 0 6px var(--w-red)}
.w-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 1.5px var(--w-ink),0 0 0 4px var(--w-white),0 0 0 6px var(--w-red)}
.w-calc__stats{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px}
.w-calc__stats > div + div{padding-left:16px;border-left:1px solid var(--w-line-warm)}
.w-calc__stats b{font-variant-numeric:tabular-nums;white-space:nowrap}
.w-calc__mix{display:block;margin-top:18px}
.w-calc__bar{margin-top:0}
.w-calc__mix .tc__leg{justify-content:flex-start;gap:20px;margin-top:10px}
.w-calc__key{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:2px;background:var(--w-ink);vertical-align:1px}
.w-calc__key--2{background:var(--w-d4)}
.w-calc__cap{margin-top:14px}

/* ===================== 29. The Wealthier Daily ===================== */
.story__tag{display:inline-flex;padding:5px 10px;border-radius:var(--w-r-pill);background:var(--w-sand);font:500 11.5px/1 var(--w-font-text);color:var(--w-text)}
.story__ttl{margin-top:20px;font:600 16px/1.3 var(--w-font-text);letter-spacing:-0.01em;color:var(--w-text);text-wrap:balance}
.story__line{margin-top:8px;font:400 13px/1.5 var(--w-font-text);color:var(--w-grey-1);text-wrap:pretty}
/* v5: the tile lists the latest three stories from the blog (wealthier.js reads them from the Ghost Content API); until
   then, and whenever they cannot be loaded, a static card invites the visitor to the blog. Neither shows a made up story. */
.w-daily [hidden]{display:none!important}
.w-daily__links{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;margin-top:20px}
.story--note{display:flex;align-items:center;gap:24px;width:100%;max-width:700px;padding:24px 28px 24px 24px;
  transition:box-shadow var(--w-dur-2) var(--w-ease-hover)}
.story__mark{display:grid;place-items:center;flex:none;width:76px;height:76px;border-radius:20px;color:var(--w-on-dark);
  background:radial-gradient(90% 90% at 100% 0%,#2A2520 0%,rgb(42 37 32 / 0) 70%),var(--w-ink)}
.story__mark svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.story__txt,.story__body{display:block;flex:1 1 auto;min-width:0}
.story--note .story__ttl,.story--note .story__line,.story__item .story__ttl,.story__item .story__line{display:block}
.story--note .story__ttl{margin-top:12px}
.story--note .story__ttl,.story__item .story__ttl{transition:color var(--w-dur-1) var(--w-ease-hover)}
.story--feed{width:100%;max-width:700px;padding:4px 24px}
.story__li + .story__li{border-top:1px solid var(--w-line-soft)}
.story__item{display:flex;align-items:center;gap:18px;padding:18px 0}
.story__item:focus-visible{outline-offset:-2px;border-radius:12px}
.story__img{flex:none;width:88px;height:88px;border-radius:14px;overflow:hidden;background:var(--w-sand)}
.story__img img{width:100%;height:100%;object-fit:cover}
/* A story with no feature image, or one that fails to load, keeps the image box and shows the document mark, so the
   titles in the list stay aligned */
.story__img--none{display:grid;place-items:center;background:var(--w-sand);color:var(--w-text)}
.story__img--none svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.story__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.story__item .story__ttl{margin-top:10px}
.story__item .story__line{margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Where the tile stacks (below 1200 px) the card spans the tile, in line with the copy above it */
@media (max-width:1199px){.w-daily .story--note,.w-daily .story--feed{max-width:none}}
@media (hover:hover){
  a.story--note:hover{box-shadow:0 0 0 1px var(--w-line-warm),0 24px 48px -32px rgb(var(--w-umber) / .28)}
  a.story--note:hover .story__ttl,.story__item:hover .story__ttl{color:var(--w-red-deep)}
}
@media (max-width:599px){
  .story--note{flex-direction:column;align-items:flex-start;gap:18px;padding:20px}
  .story__mark{width:56px;height:56px;border-radius:16px}
  .story__mark svg{width:26px;height:26px}
  .story--feed{padding:2px 18px}
  .story__item{gap:14px;padding:16px 0}
  .story__img{width:64px;height:64px;border-radius:12px}
  .story__item .story__line{display:none}
}

/* ===================== 30. Questions (home page and checkup page) ===================== */
.w-faqs__in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 var(--w-gap);align-items:start}
.w-faqs__head{grid-column:1 / span 5;margin-bottom:0}
.w-faqs .w-faq{grid-column:7 / span 6}
.w-faq{border-bottom:1px solid var(--w-line-warm)}
.w-faq details{border-top:1px solid var(--w-line-warm)}
.w-faq summary{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:20px 0;cursor:pointer;list-style:none;
  font:500 var(--w-fs-subheading)/var(--w-lh-subheading) var(--w-font-text);letter-spacing:var(--w-tr-subheading);color:var(--w-text);
  transition:color var(--w-dur-1) var(--w-ease-hover);-webkit-tap-highlight-color:transparent}
.w-faq summary::-webkit-details-marker{display:none}
.w-faq summary:hover{color:var(--w-red-deep)}
.w-faq summary:focus-visible{outline-offset:2px}
.w-plus{width:16px;height:16px;flex:none;margin-top:.3em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;transition:transform var(--w-dur-2) var(--w-ease-out)}
/* The checkup report accordion draws a single path plus, which turns into a cross */
details[open] > summary .w-plus:not(.w-plus--m){transform:rotate(45deg)}
.w-plus__v{transform-origin:50% 50%;transition:transform var(--w-dur-2) var(--w-ease-out)}
.w-faq details[open] .w-plus__v{transform:scaleY(0)}
.w-faq__a{padding:0 40px 24px 0}
.w-faq__a > * + *{margin-top:12px}
.w-faq__a .w-body{font-size:15px;line-height:1.6;max-width:60ch}
@supports (interpolate-size:allow-keywords){
  .w-faq{interpolate-size:allow-keywords}
  .w-faq details::details-content{block-size:0;overflow:clip;transition:block-size var(--w-dur-2) var(--w-ease-out),content-visibility var(--w-dur-2) allow-discrete}
  .w-faq details[open]::details-content{block-size:auto}
}

/* ===================== 31. Responsive and touch for the additions ===================== */
@media (max-width:1023px){
  .w-tour__grid{display:flex;flex-direction:column;align-items:stretch}
  .w-tour__copy{display:contents}
  .w-tour__head{order:1}
  .w-tour__rail{order:2;margin-top:32px;padding:0}
  .w-tour__visual{order:3;margin-top:48px;--tour-dev:280px;--shift:88px}
  .w-tour__steps{order:4;margin-top:48px}
  [data-mode] .w-tour__steps{margin-top:48px}
  .w-tour__end{order:5;margin-top:32px}
  .w-tour__line{display:none}
  .w-tour__tabs{display:flex;flex-wrap:wrap;gap:8px}
  .w-tour__tab{display:flex;align-items:center;height:40px;padding:0 16px;border-radius:var(--w-r-pill);background:var(--w-white);
    box-shadow:inset 0 0 0 1px var(--w-line-warm);color:var(--w-grey-1);font-size:var(--w-fs-label);white-space:nowrap}
  .w-tour__tab[aria-current="step"]{background:var(--w-ink);color:#fff;box-shadow:none}
  .w-tour__glow{width:600px;height:600px;left:calc(50% - var(--shift) - 300px);top:calc(50% - 300px)}
  .w-faqs__head,.w-faqs .w-faq{grid-column:1 / -1}
  .w-faqs__head{margin-bottom:var(--w-head-gap)}
}
@media (max-width:767px){
  .w-tour__visual{--tour-dev:260px;--shift:0px}
  .w-tour__calls{display:none}
  .w-tour__glow{width:520px;height:520px;left:calc(50% - 260px);top:calc(50% - 260px)}
  .w-tour__end{flex-direction:column;align-items:stretch}
  .w-tour__end .w-btn{width:100%}
  /* Phones: the chips use their short labels and stay on one row */
  .w-tour__tabs{flex-wrap:nowrap}
  .w-tour__tab{padding:0 14px}
  .w-tour__tl{display:none}
  .w-tour__ts{display:inline}
  .w-calc__fields{grid-template-columns:1fr;gap:22px}
  .w-calc__stats{grid-template-columns:1fr 1fr;row-gap:12px}
  .w-calc__stats > div:nth-child(3){grid-column:1 / -1;padding:12px 0 0;border-left:0;border-top:1px solid var(--w-line-warm)}
  .w-faq__a{padding-right:0}
  .w-faq summary{padding:18px 0}
}
@media (max-width:359px){
  .w-tour__tabs{gap:6px}
  .w-tour__tab{padding:0 11px}
}
@media (pointer:coarse){
  .w-tour__tab{min-height:44px}
  .w-faq summary{min-height:44px}
  .fd__strip button{min-height:44px}
}

/* ===================== 30. v4.3: each product once ===================== */
/* The hero window's right column lists the calculators library, as the Holdings tab of the app does; loans sit in a
   wide row tile beside the calculator; the tour has four steps, and each floating card adds what its screen does not
   show (the cart, an upcoming offer, the payout, a third goal) with no second illustrative tag */
.dcalc{flex:1;display:flex;flex-direction:column}
.dcalc__g{flex:1;display:flex;flex-direction:column;margin-top:6px}
.dcalc__g > span{flex:1;display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:12px;align-content:center;align-items:center;border-bottom:1px solid var(--w-line-soft)}
.dcalc__g > span:last-child{border-bottom:0}
.dcalc__ic{grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--w-sand)}
.dw .dcalc__ic svg.ic{width:16px;height:16px}
.dcalc__g b{display:block;font:500 13px/1.2 var(--w-font-text);white-space:nowrap}
.dcalc__g small{display:block;margin-top:2px;font:400 11px/1.2 var(--w-font-text);color:var(--w-grey-2);white-space:nowrap}
.w-lamf .lamf{max-width:700px}
.lamf__list{margin-top:8px}
.lamf__list .ac__li:last-child{padding-bottom:12px}

.w-tour__fine{margin-top:14px;max-width:30rem}
.w-tour__call .th{gap:14px}
.w-tour__call .th__ic{width:56px;height:56px;border-radius:16px}
.w-tour__call .th__ic svg{width:26px;height:26px}
.w-tour__call .th__ttl{max-width:none;text-wrap:balance}
.lamf__sum{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:6px;padding:14px 16px;border-radius:14px;background:var(--w-ground)}
.lamf__sum b{display:block;margin-top:4px;font:600 20px/1.1 var(--w-font-text);letter-spacing:-0.01em}
.lamf__sum .app-btn{height:34px;padding:0 18px}
.w-lamf .lamf__cap{margin-top:14px}
.lamf__sum .dc__lbl{white-space:nowrap}
@container (max-width:380px){.lamf__sum{flex-direction:column;align-items:flex-start;gap:12px}}