/* Brand Bold (B) — public site: home, apply, privacy, data deletion. Loaded last on budget-home.html and budget-apply.html (which no longer load budget-public.css or studio.css) and on privacy.html / data-deletion.html. Every rule is scoped to html[data-experience=brand]; colours come from tokens.css and are always paired (background and foreground in the same rule) for the colour-pair audit. No @layer, no nesting, no light-dark(). */ /* ===================== Base (home + apply) ===================== */ html[data-experience=brand] body.bs-site, html[data-experience=brand] body.bs-site *, html[data-experience=brand] body.bs-site *::before, html[data-experience=brand] body.bs-site *::after{box-sizing:border-box} html[data-experience=brand] body.bs-site{margin:0;min-width:0;background:var(--b-page);color:var(--b-ink);font:400 16px/1.5 var(--b-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} html[data-experience=brand] :where(.bs-site) :where(h1,h2,h3,h4,p,ul,ol,figure,fieldset){margin:0} html[data-experience=brand] .bs-site img{max-width:100%} html[data-experience=brand] .bs-site main:focus{outline:0} html[data-experience=brand] .bs-site a{background:transparent;color:var(--b-brand)} html[data-experience=brand] .bs-site a:hover{background:transparent;color:var(--b-brand-hover)} html[data-experience=brand] .bs-site :focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px} html[data-experience=brand] .bs-site .bs-i{flex:none;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} html[data-experience=brand] .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} html[data-experience=brand] .bs-site .studio-skip{position:absolute;left:16px;top:-100px;z-index:200;display:inline-flex;align-items:center;min-height:44px;padding:10px 20px;border-radius:999px;background:var(--b-ink);color:var(--b-page);font:700 15px/1.2 var(--b-body);text-decoration:none} html[data-experience=brand] .bs-site .studio-skip:focus{top:12px} html[data-experience=brand] .bs-wrap{width:100%;max-width:1248px;margin-inline:auto;padding-inline:24px} /* Buttons and pills */ html[data-experience=brand] .bs-site :is(.bs-btn,.bs-pill){display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border:0;border-radius:var(--b-r-pill);font:700 16px/1.2 var(--b-body);text-decoration:none;white-space:nowrap;cursor:pointer} html[data-experience=brand] .bs-site .bs-btn-lime{background:var(--b-lime);color:var(--b-on-lime);font-size:17px} html[data-experience=brand] .bs-site .bs-btn-lime:hover{background:var(--b-leaf-mist);color:var(--b-on-lime)} html[data-experience=brand][data-theme=dark] .bs-site .bs-btn-lime:hover{background:var(--b-on-navy-2);color:var(--b-on-lime)} html[data-experience=brand] .bs-site :is(.bs-btn-brand,.bs-pill-brand){background:var(--b-brand);color:var(--b-on-brand)} html[data-experience=brand] .bs-site :is(.bs-btn-brand,.bs-pill-brand):hover{background:var(--b-brand-hover);color:var(--b-on-brand)} html[data-experience=brand] .bs-site .bs-pill-mist{padding:0 22px;gap:8px;background:var(--b-mist);color:var(--b-ink);font-weight:600} html[data-experience=brand] .bs-site .bs-pill-mist:hover{background:var(--b-line);color:var(--b-ink)} /* ===================== Header ===================== */ html[data-experience=brand] .bs-site .bs-header{position:relative;z-index:30;background:var(--b-page);color:var(--b-ink)} html[data-experience=brand] .bs-header-in{display:flex;align-items:center;gap:16px;max-width:1248px;height:104px;margin-inline:auto;padding-inline:24px} html[data-experience=brand] .bs-logo{display:flex;align-items:center;flex:none;border-radius:12px} html[data-experience=brand] .bs-logo img{display:block;width:114px;height:60px;object-fit:contain} html[data-experience=brand] .bs-menu{display:flex;align-items:center;gap:40px;margin-left:auto} html[data-experience=brand] .bs-nav{display:flex;align-items:center;gap:36px} html[data-experience=brand] .bs-site .bs-nav a{background:transparent;color:var(--b-ink-2);font-weight:600;font-size:16px;line-height:1.5;text-decoration:none;white-space:nowrap} html[data-experience=brand] .bs-site .bs-nav a:hover{background:transparent;color:var(--b-brand);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px} html[data-experience=brand] .bs-menu-actions{display:flex;align-items:center;gap:12px} html[data-experience=brand] .bs-header .theme-slot{display:flex;flex:none} html[data-experience=brand] .bs-header .theme-switch.in-slot{min-height:52px;min-width:52px;padding:0 18px;gap:8px;border:1.5px solid var(--b-line-strong);border-radius:var(--b-r-pill);background:var(--b-page);color:var(--b-ink);font:600 15px/1 var(--b-body);cursor:pointer} html[data-experience=brand] .bs-header .theme-switch.in-slot:hover{border-color:var(--b-brand);background:var(--b-mist);color:var(--b-ink)} html[data-experience=brand] .bs-header .theme-switch.in-slot svg{width:18px;height:18px} html[data-experience=brand] .bs-site .bs-menu-toggle{display:none;align-items:center;justify-content:center;flex:none;width:52px;height:52px;padding:0;border:1.5px solid var(--b-line-strong);border-radius:var(--b-r-pill);background:var(--b-page);color:var(--b-ink);cursor:pointer} html[data-experience=brand] .bs-site .bs-menu-toggle[aria-expanded=true]{border-color:var(--b-brand);background:var(--b-mist);color:var(--b-ink)} /* ===================== Home · hero ===================== */ html[data-experience=brand] .bs-hero-wrap{position:relative;max-width:1440px;margin-inline:auto;padding-inline:24px;overflow-x:clip} html[data-experience=brand] .bs-site .bs-hero{position:relative;display:flex;align-items:center;min-height:640px;padding:88px 96px;border-radius:32px;background:var(--b-navy);color:var(--b-on-navy)} html[data-experience=brand] .bs-hero-art{position:absolute;inset:0;overflow:clip;border-radius:inherit;pointer-events:none} html[data-experience=brand] .bs-swoosh{position:absolute;top:0;right:0;display:block;width:auto;height:100%} html[data-experience=brand] .bs-site .bs-swoosh-leaf{fill:var(--b-leaf)} html[data-experience=brand] .bs-site .bs-swoosh-sky{fill:var(--b-bright)} html[data-experience=brand] .bs-hero-copy{position:relative;display:flex;flex-direction:column;gap:24px;max-width:760px} html[data-experience=brand] .bs-site .bs-hero-eyebrow{display:flex;align-items:center;gap:12px;background:transparent;color:var(--b-on-navy-2);font-size:14px;line-height:20px;font-weight:700;letter-spacing:.08em;text-transform:uppercase} html[data-experience=brand] .bs-site .bs-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--b-leaf);color:var(--b-on-navy)} html[data-experience=brand] .bs-site .bs-hero h1{background:transparent;color:var(--b-on-navy);font:800 76px/78px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] .bs-site .bs-hero-lead{max-width:560px;background:transparent;color:var(--b-on-navy-2);font-size:20px;line-height:30px} html[data-experience=brand] .bs-hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;margin-top:16px} html[data-experience=brand] .bs-site .bs-hero-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;background:transparent;color:var(--b-on-navy);font-size:17px;font-weight:600;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px} html[data-experience=brand] .bs-site .bs-hero-link:hover{background:transparent;color:var(--b-lime)} html[data-experience=brand] .bs-site .bs-hero-member{margin-top:4px;background:transparent;color:var(--b-on-navy-2);font-size:16px;line-height:24px} html[data-experience=brand] .bs-site .bs-hero-member a{background:transparent;color:var(--b-on-navy);font-weight:700;text-underline-offset:4px} html[data-experience=brand] .bs-site .bs-hero-member a:hover{background:transparent;color:var(--b-lime)} html[data-experience=brand] .bs-site :is(.bs-hero,.bs-app,.bs-apply-hero) :focus-visible{outline-color:var(--b-lime)} /* The member card preview (an illustration: placeholders, never a person) */ html[data-experience=brand] .bs-site .bs-card-preview{position:absolute;right:64px;bottom:-36px;z-index:2;width:400px;height:252px;overflow:clip;border:1px solid transparent;border-radius:24px;background:var(--b-surface);color:var(--b-ink);box-shadow:0 30px 60px rgba(10,27,46,.4);transform:rotate(-3deg)} html[data-experience=brand] .bs-card-swoosh{position:absolute;inset:0 auto auto 0;display:block;width:100%;height:100%} html[data-experience=brand] .bs-card-in{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:24px 28px} html[data-experience=brand] .bs-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px} html[data-experience=brand] .bs-card-brand{display:flex;align-items:center;gap:12px;min-width:0} html[data-experience=brand] .bs-site .bs-card-mark{display:flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border:1px solid var(--b-line);border-radius:12px;background:var(--b-on-navy);color:var(--b-navy)} html[data-experience=brand] .bs-card-mark img{display:block;width:40px;height:40px} html[data-experience=brand] .bs-card-names{display:flex;flex-direction:column;gap:2px;min-width:0} html[data-experience=brand] .bs-site .bs-card-fund{background:transparent;color:var(--b-ink);font:700 18px/22px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] .bs-site .bs-card-society{background:transparent;color:var(--b-muted);font-size:13px;line-height:18px} html[data-experience=brand] .bs-site .bs-card-tag{display:inline-flex;align-items:center;flex:none;height:28px;padding:0 12px;border-radius:999px;background:var(--b-mist);color:var(--deep);font-size:12px;font-weight:700} html[data-experience=brand] .bs-card-member{display:flex;flex-direction:column;gap:4px} html[data-experience=brand] .bs-site .bs-card-label{background:transparent;color:var(--b-muted);font-size:12px;line-height:16px;font-weight:700;letter-spacing:.08em;text-transform:uppercase} html[data-experience=brand] .bs-site .bs-card-name{background:transparent;color:var(--b-ink);font:800 30px/34px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] .bs-card-facts{display:flex;gap:32px} html[data-experience=brand] .bs-card-facts>span{display:flex;flex-direction:column;gap:2px} html[data-experience=brand] .bs-site .bs-card-small{background:transparent;color:var(--b-muted);font-size:12px;line-height:16px} html[data-experience=brand] .bs-site .bs-card-value{background:transparent;color:var(--b-ink);font-size:15px;line-height:20px;font-weight:700} /* ===================== Home · sections ===================== */ html[data-experience=brand] .bs-section{padding-block:80px} html[data-experience=brand] .bs-paths{padding-top:120px} html[data-experience=brand] .bs-band{padding-block:80px} html[data-experience=brand] .bs-site .bs-band-mist{background:var(--b-mist);color:var(--b-ink)} html[data-experience=brand] .bs-site .bs-band-leaf{background:var(--b-leaf-mist);color:var(--b-ink)} html[data-experience=brand] .bs-section-head{display:flex;flex-direction:column;gap:16px;max-width:640px;margin-bottom:40px} html[data-experience=brand] .bs-section-head-split{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:24px 48px;max-width:none;flex-wrap:wrap} html[data-experience=brand] .bs-section-head-split>div:first-child{display:flex;flex-direction:column;gap:16px;flex:1 1 420px;max-width:640px} html[data-experience=brand] .bs-site .bs-section-head h2{background:transparent;color:var(--b-ink);font:800 48px/52px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] .bs-site .bs-section-head p{background:transparent;color:var(--b-ink-2);font-size:18px;line-height:28px} /* Who's joining? — tabs (brand-site.js) with every panel shown when there is no script */ html[data-experience=brand] .bs-tablist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px} html[data-experience=brand] .bs-site .bs-tablist [role=tab]{display:flex;align-items:center;gap:12px;min-width:0;min-height:72px;padding:10px 20px 10px 10px;border:2px solid var(--b-line);border-radius:var(--b-r-pill);background:var(--b-surface);color:var(--b-ink);font:700 16px/1.25 var(--b-body);text-align:left;cursor:pointer} html[data-experience=brand] .bs-site .bs-tablist [role=tab]:hover{border-color:var(--b-brand);background:var(--b-surface);color:var(--b-ink)} html[data-experience=brand] .bs-site .bs-tablist [role=tab][aria-selected=true]{border-color:var(--b-navy);background:var(--b-navy);color:var(--b-on-navy);box-shadow:var(--b-shadow)} html[data-experience=brand][data-theme=dark] .bs-site .bs-tablist [role=tab][aria-selected=true]{border-color:var(--b-brand);background:var(--b-brand);color:var(--b-on-brand)} html[data-experience=brand] .bs-site .bs-tab-icon{display:flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border-radius:50%;background:var(--b-mist);color:var(--b-brand)} html[data-experience=brand] .bs-site [aria-selected=true] .bs-tab-icon{background:var(--b-lime);color:var(--b-on-lime)} html[data-experience=brand] .bs-site .bs-panel{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,.8fr);gap:48px;padding:40px;border:1px solid transparent;border-radius:var(--b-r-card);background:var(--b-surface);color:var(--b-ink);box-shadow:var(--b-shadow)} html[data-experience=brand] .bs-tabs:not(.is-tabbed) .bs-panel+.bs-panel{margin-top:24px} html[data-experience=brand] .bs-panel-main{display:flex;flex-direction:column;gap:20px} html[data-experience=brand] .bs-site .bs-panel h3{background:transparent;color:var(--b-ink);font:800 32px/36px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] .bs-site .bs-panel-main>p:not(.bs-panel-cta):not(.bs-quote-line){background:transparent;color:var(--b-ink-2);font-size:17px;line-height:28px} html[data-experience=brand] .bs-from{display:flex;flex-direction:column;gap:4px} html[data-experience=brand] .bs-site .bs-from p:first-child{background:transparent;color:var(--b-ink-2);font-size:16px;line-height:36px} html[data-experience=brand] .bs-site .bs-from strong{background:transparent;color:var(--b-ink);font:800 28px/1 var(--b-display);letter-spacing:-.02em;white-space:nowrap} html[data-experience=brand] .bs-nowrap{white-space:nowrap} html[data-experience=brand] .bs-site .bs-from-note{background:transparent;color:var(--b-muted);font-size:14px;line-height:22px} html[data-experience=brand] .bs-site .bs-quote-line{padding:14px 18px;border-radius:var(--b-r-card-sm);background:var(--b-mist);color:var(--b-ink-2);font-size:16px;line-height:24px} html[data-experience=brand] .bs-site .bs-quote-line strong{background:transparent;color:var(--b-ink)} html[data-experience=brand] .bs-panel-cta{display:flex;margin-top:4px} html[data-experience=brand] .bs-panel-needs{display:flex;flex-direction:column;gap:20px} html[data-experience=brand] .bs-site .bs-panel-needs h4{background:transparent;color:var(--b-ink-2);font-size:14px;line-height:20px;font-weight:700;letter-spacing:.06em;text-transform:uppercase} html[data-experience=brand] .bs-checks{display:flex;flex-direction:column;gap:16px;padding:0;list-style:none} html[data-experience=brand] .bs-site .bs-checks li{display:flex;align-items:flex-start;gap:12px;background:transparent;color:var(--b-ink);font-size:16px;line-height:24px} html[data-experience=brand] .bs-site .bs-checks .bs-i{margin-top:1px;background:transparent;color:var(--b-leaf-ink)} html[data-experience=brand] .bs-site .bs-panel-side{display:flex;flex-direction:column;gap:8px;align-self:start;padding:24px;border-radius:var(--b-r-card-sm);background:var(--b-mist);color:var(--b-ink-2)} html[data-experience=brand] .bs-site .bs-side-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin-bottom:8px;border-radius:50%;background:var(--b-surface);color:var(--b-brand)} html[data-experience=brand] .bs-site .bs-side-label{background:transparent;color:var(--b-ink-2);font-size:13px;line-height:18px;font-weight:700;letter-spacing:.06em;text-transform:uppercase} html[data-experience=brand] .bs-site .bs-side-value{background:transparent;color:var(--b-ink);font:800 22px/28px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] .bs-site .bs-panel-side p:last-child{background:transparent;color:var(--b-ink-2);font-size:15px;line-height:24px} /* Our packages */ html[data-experience=brand] .bs-basis{display:flex;flex:0 1 auto;flex-direction:column;align-items:flex-end;gap:10px;max-width:100%} html[data-experience=brand] .bs-site .bs-segmented{display:flex;gap:4px;padding:6px;border:1px solid transparent;border-radius:var(--b-r-pill);background:var(--b-surface);color:var(--b-ink);box-shadow:var(--b-shadow)} html[data-experience=brand] .bs-site .bs-segmented button{min-height:44px;padding:0 24px;border:0;border-radius:var(--b-r-pill);background:transparent;color:var(--b-ink-2);font:600 16px/1 var(--b-body);cursor:pointer} html[data-experience=brand] .bs-site .bs-segmented button:hover{background:var(--b-mist);color:var(--b-ink)} html[data-experience=brand] .bs-site .bs-segmented button[aria-pressed=true]{background:var(--b-navy);color:var(--b-on-navy);font-weight:700} html[data-experience=brand][data-theme=dark] .bs-site .bs-segmented button[aria-pressed=true]{background:var(--b-brand);color:var(--b-on-brand)} html[data-experience=brand] .bs-site .bs-section-head .bs-basis-note{background:transparent;color:var(--b-muted);font-size:14px;line-height:20px;text-align:right} html[data-experience=brand] .bs-packages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} html[data-experience=brand] .bs-site .bs-packages:not(:has(article)){display:block;padding:32px;border-radius:var(--b-r-card);background:var(--b-surface);color:var(--b-ink-2);font-size:17px;line-height:1.6} html[data-experience=brand] .bs-site .pkg{display:flex;flex-direction:column;min-width:0;padding:32px;border:1px solid transparent;border-radius:var(--b-r-card);background:var(--b-surface);color:var(--b-ink);box-shadow:var(--b-shadow)} html[data-experience=brand] .pkg-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px} html[data-experience=brand] .bs-site .pkg-tier{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:var(--b-mist);color:var(--deep);font-size:13px;font-weight:700} html[data-experience=brand] .pkg-meter{display:flex;gap:4px} html[data-experience=brand] .bs-site .pkg-meter i{display:block;width:14px;height:6px;border-radius:999px;background:var(--b-line);color:var(--b-ink)} html[data-experience=brand] .bs-site .pkg-meter i.on{background:var(--b-bright);color:var(--b-ink)} html[data-experience=brand] .bs-site .pkg h3{margin-bottom:4px;background:transparent;color:var(--b-ink);font:800 28px/32px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] .bs-site .pkg-tagline{background:transparent;color:var(--b-muted);font-size:16px;line-height:24px} html[data-experience=brand] .pkg-price{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 16px;margin-top:24px} html[data-experience=brand] .pkg-adult{display:flex;flex-direction:column;gap:4px} html[data-experience=brand] .pkg-child{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right} html[data-experience=brand] .pkg-adult-figure,html[data-experience=brand] .pkg-child-figure{display:flex;align-items:baseline;gap:6px} html[data-experience=brand] .bs-site .pkg-cur{background:transparent;color:var(--b-ink-2);font-size:18px;font-weight:700} html[data-experience=brand] .bs-site .pkg-amount{background:transparent;color:var(--b-ink);font:800 56px/56px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] .bs-site .pkg-child-label{background:transparent;color:var(--b-muted);font-size:14px;font-weight:600} html[data-experience=brand] .bs-site .pkg-child b{background:transparent;color:var(--b-ink);font:800 24px/28px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] .bs-site .pkg-per{background:transparent;color:var(--b-muted);font-size:15px;line-height:22px} html[data-experience=brand] .pkg-limit{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-top:24px} html[data-experience=brand] .bs-site .pkg-limit span{background:transparent;color:var(--b-ink-2);font-size:14px;font-weight:600} html[data-experience=brand] .bs-site .pkg-limit b{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:999px;background:var(--b-lime);color:var(--b-on-lime);font-size:15px;font-weight:700} html[data-experience=brand] .bs-site .pkg-apply{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;margin-top:auto;padding:8px 20px;border:2px solid var(--b-brand);border-radius:var(--b-r-pill);background:var(--b-surface);color:var(--b-brand);font-size:16px;font-weight:700;line-height:1.2;text-align:center;text-decoration:none} html[data-experience=brand] .pkg-limit+.pkg-apply,html[data-experience=brand] .pkg-price+.pkg-apply,html[data-experience=brand] .pkg-note+.pkg-apply{margin-top:24px} html[data-experience=brand] .bs-site .pkg-note{margin-top:12px;font-size:14px;line-height:20px;background:transparent;color:var(--b-muted)} html[data-experience=brand] .bs-site .pkg-apply:hover{background:var(--b-brand);color:var(--b-on-brand)} html[data-experience=brand] .pkg-arrow{flex:none} html[data-experience=brand] .bs-packages-foot{display:flex;align-items:center;justify-content:space-between;gap:24px 48px;margin-top:40px} html[data-experience=brand] .bs-site .bs-disclaimer{display:flex;align-items:flex-start;gap:12px;max-width:680px;background:transparent;color:var(--b-ink-2);font-size:15px;line-height:24px} html[data-experience=brand] .bs-site .bs-disclaimer .bs-i{background:transparent;color:var(--b-brand)} html[data-experience=brand] .bs-site .bs-pill-card{flex:none;padding:8px 24px;border:1px solid transparent;background:var(--b-surface);color:var(--b-ink);font-weight:600;white-space:normal;text-align:left;box-shadow:var(--b-shadow)} html[data-experience=brand] .bs-site .bs-pill-card:hover{background:var(--b-surface);color:var(--b-brand)} /* How to join */ html[data-experience=brand] .bs-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;padding:0;list-style:none} html[data-experience=brand] .bs-steps li{display:flex;flex-direction:column;gap:8px} html[data-experience=brand] .bs-site .bs-step-no{margin-bottom:12px;background:transparent;color:var(--b-brand);font:800 80px/80px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] .bs-site .bs-steps h3{background:transparent;color:var(--b-ink);font:800 32px/36px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] .bs-site .bs-steps .bs-step-sub{background:transparent;color:var(--b-ink-2);font-size:18px;line-height:26px;font-weight:700} html[data-experience=brand] .bs-site .bs-steps p:not(.bs-step-sub){background:transparent;color:var(--b-muted);font-size:16px;line-height:26px} html[data-experience=brand] .bs-how-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:48px} html[data-experience=brand] .bs-site .bs-how-actions p{background:transparent;color:var(--b-ink-2);font-size:16px;line-height:24px} html[data-experience=brand] .bs-site .bs-how-actions p a{font-weight:700;text-underline-offset:4px} /* Pay your way */ html[data-experience=brand] .bs-pay{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding:0;list-style:none} html[data-experience=brand] .bs-site .bs-pay>li{display:flex;flex-direction:column;justify-content:space-between;gap:20px;min-width:0;padding:28px;border:1px solid transparent;border-radius:var(--b-r-card);background:var(--b-surface);color:var(--b-ink);box-shadow:var(--b-shadow)} html[data-experience=brand] .bs-pay>li>div{display:flex;flex-direction:column;gap:8px} html[data-experience=brand] .bs-site .bs-pay-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin-bottom:8px;border-radius:50%;background:var(--b-leaf-mist);color:var(--b-leaf-ink)} html[data-experience=brand] .bs-site .bs-pay h3{background:transparent;color:var(--b-ink);font:800 24px/28px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] .bs-site .bs-pay>li>div>p{background:transparent;color:var(--b-ink-2);font-size:16px;line-height:24px} html[data-experience=brand] .bs-site .bs-pay-chip{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:80px;padding:14px 16px;border-radius:var(--b-r-card-sm);background:var(--b-leaf-mist);color:var(--b-ink)} html[data-experience=brand] .bs-site .bs-pay-chip span{background:transparent;color:var(--b-leaf-ink);font-size:13px;line-height:18px;font-weight:600} html[data-experience=brand] .bs-site .bs-pay-chip strong{background:transparent;color:var(--b-ink);font-size:17px;line-height:28px;font-weight:700} html[data-experience=brand] .bs-site .bs-pay-chip .bs-pay-code{font:800 28px/32px var(--b-display);letter-spacing:-.01em} html[data-experience=brand] .bs-site .bs-after{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;margin-top:40px;padding:16px 16px 16px 32px;border:1px solid transparent;border-radius:var(--b-r-pill);background:var(--b-surface);color:var(--b-ink);box-shadow:var(--b-shadow)} html[data-experience=brand] .bs-site .bs-after>p{background:transparent;color:var(--b-ink);font-size:16px;line-height:24px;font-weight:700} html[data-experience=brand] .bs-after ol{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:0;list-style:none} html[data-experience=brand] .bs-site .bs-after li{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 20px 0 8px;border-radius:var(--b-r-pill);background:var(--b-leaf-mist);color:var(--b-leaf-ink);font-size:15px;font-weight:600} html[data-experience=brand] .bs-site .bs-after li span{display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--b-surface);color:var(--b-leaf-ink);font-size:14px;font-weight:700} /* Member app band */ html[data-experience=brand] .bs-app-wrap{max-width:1440px;margin-inline:auto;padding:24px 24px 0;overflow-x:clip} html[data-experience=brand] .bs-site .bs-app{display:grid;grid-template-columns:320px minmax(0,1fr);gap:96px;align-items:center;padding:56px 96px;border-radius:32px;background:var(--b-navy);color:var(--b-on-navy)} html[data-experience=brand] .bs-phone-figure{display:flex;flex-direction:column;align-items:center;gap:16px} html[data-experience=brand] .bs-site .bs-phone-figure figcaption{background:transparent;color:var(--b-on-navy-2);font-size:14px;line-height:20px} html[data-experience=brand] .bs-site .bs-phone{width:320px;height:600px;padding:10px;border:2px solid var(--b-navy-2);border-radius:48px;background:rgba(3,10,20,.55);color:var(--b-on-navy);box-shadow:0 30px 60px rgba(3,10,20,.4)} html[data-experience=brand] .bs-site .bs-phone-screen{position:relative;display:flex;flex-direction:column;gap:10px;height:100%;padding:18px 18px 0;overflow:hidden;border-radius:38px;background:var(--b-surface);color:var(--b-ink)} html[data-experience=brand] .bs-site .bs-phone-screen::before{content:"";position:absolute;inset:0 0 auto;height:142px;border-radius:0 0 24px 24px;background:var(--b-navy);color:var(--b-on-navy)} html[data-experience=brand] .bs-phone-top{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:8px} html[data-experience=brand] .bs-phone-top-copy{display:flex;flex-direction:column;gap:6px;min-width:0} html[data-experience=brand] .bs-site .bs-phone-mark{display:flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:12px;background:var(--b-on-navy);color:var(--b-navy)} html[data-experience=brand] .bs-phone-mark img{display:block;width:26px;height:26px} html[data-experience=brand] .bs-site .bs-phone-caption{position:relative;margin-top:-4px;background:transparent;color:var(--b-ink-2);font-size:10px;line-height:14px} html[data-experience=brand] .bs-site .bs-phone-hello{background:transparent;color:var(--b-on-navy);font:800 22px/26px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] .bs-site .bs-phone-status{display:flex;align-items:center;gap:6px;background:transparent;color:var(--b-on-navy-2);font-size:11px} html[data-experience=brand] .bs-site .bs-phone-pill{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:var(--b-lime);color:var(--b-on-lime);font-size:11px;font-weight:700} html[data-experience=brand] .bs-site .bs-phone-card{position:relative;display:flex;flex-direction:column;justify-content:space-between;height:124px;padding:14px 16px;overflow:hidden;border:1px solid transparent;border-radius:16px;background:var(--b-surface);color:var(--b-ink);box-shadow:var(--b-shadow)} html[data-experience=brand] .bs-site .bs-phone-card-brand{position:relative;display:flex;align-items:center;gap:8px;background:transparent;color:var(--b-ink);font:700 13px/1 var(--b-display)} html[data-experience=brand] .bs-phone-card-brand img{display:block;width:24px;height:24px;border-radius:6px} html[data-experience=brand] .bs-site .bs-phone-card-name{position:relative;margin-top:auto;background:transparent;color:var(--b-ink);font:800 18px/22px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] .bs-site .bs-phone-card-meta{position:relative;background:transparent;color:var(--b-muted);font-size:11px;line-height:16px} html[data-experience=brand] .bs-site .bs-phone-due{display:flex;flex-direction:column;gap:2px;padding:14px;border-radius:16px;background:var(--b-mist);color:var(--b-ink)} html[data-experience=brand] .bs-site .bs-phone-small{background:transparent;color:var(--b-ink-2);font-size:11px;line-height:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase} html[data-experience=brand] .bs-site .bs-phone-amount{background:transparent;color:var(--b-ink);font:800 18px/24px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] .bs-phone-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:8px} html[data-experience=brand] .bs-site .bs-phone-btn{display:flex;align-items:center;justify-content:center;height:40px;border:2px solid var(--b-brand);border-radius:999px;background:var(--b-brand);color:var(--b-on-brand);font-size:13px;font-weight:700} html[data-experience=brand] .bs-site .bs-phone-btn-outline{background:var(--b-surface);color:var(--b-brand)} html[data-experience=brand] .bs-phone-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} html[data-experience=brand] .bs-site .bs-phone-shortcuts>span{display:flex;flex-direction:column;align-items:center;gap:4px;background:transparent;color:var(--b-ink-2);font-size:10px;line-height:12px;text-align:center} html[data-experience=brand] .bs-site .bs-phone-sc{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--b-mist);color:var(--b-brand)} html[data-experience=brand] .bs-site .bs-phone-sc-leaf{background:var(--b-leaf-mist);color:var(--b-leaf-ink)} html[data-experience=brand] .bs-site .bs-phone-proof{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:16px;background:var(--b-mist);color:var(--b-ink)} html[data-experience=brand] .bs-phone-proof>span:first-child{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0} html[data-experience=brand] .bs-site .bs-phone-proof strong{background:transparent;color:var(--b-ink);font-size:12px;line-height:16px} html[data-experience=brand] .bs-site .bs-phone-warn{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:var(--b-warn-bg);color:var(--b-warn-ink);font-size:10px;font-weight:600;white-space:nowrap} html[data-experience=brand] .bs-site .bs-phone-proof>span:last-child{flex:none;background:transparent;color:var(--b-ink-2);font-size:11px} html[data-experience=brand] .bs-site .bs-phone-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;height:60px;margin:auto -18px 0;padding:0 8px 4px;border-top:1px solid var(--b-line);background:var(--b-surface);color:var(--b-muted);font-size:10px;font-weight:600;text-align:center} html[data-experience=brand] .bs-phone-tabs>span{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0} html[data-experience=brand] .bs-site .bs-phone-tabs .is-on{background:transparent;color:var(--b-brand);font-weight:700} html[data-experience=brand] .bs-app-copy{display:flex;flex-direction:column;gap:40px;min-width:0} html[data-experience=brand] .bs-app-head{display:flex;flex-direction:column;gap:16px} html[data-experience=brand] .bs-site .bs-app-eyebrow{background:transparent;color:var(--b-lime);font-size:14px;line-height:20px;font-weight:700;letter-spacing:.08em;text-transform:uppercase} html[data-experience=brand] .bs-site .bs-app h2{background:transparent;color:var(--b-on-navy);font:800 48px/52px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] .bs-site .bs-app-lead{max-width:620px;background:transparent;color:var(--b-on-navy-2);font-size:18px;line-height:28px} html[data-experience=brand] .bs-app-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;padding:0;list-style:none} html[data-experience=brand] .bs-app-features li{display:flex;align-items:flex-start;gap:16px} html[data-experience=brand] .bs-site .bs-feature-icon{display:flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border-radius:12px;background:var(--b-navy-2);color:var(--b-leaf)} html[data-experience=brand] .bs-app-features li>div{display:flex;flex-direction:column;gap:4px} html[data-experience=brand] .bs-site .bs-app-features h3{background:transparent;color:var(--b-on-navy);font-size:19px;line-height:26px;font-weight:700} html[data-experience=brand] .bs-site .bs-app-features p{background:transparent;color:var(--b-on-navy-2);font-size:16px;line-height:24px} html[data-experience=brand] .bs-app-actions{display:flex;flex-direction:column;gap:14px} html[data-experience=brand] .bs-app-buttons{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px} html[data-experience=brand] .bs-site .bs-app-signin{display:inline-flex;align-items:center;min-height:44px;background:transparent;color:var(--b-on-navy);font-size:16px;font-weight:700;text-underline-offset:4px} html[data-experience=brand] .bs-site .bs-app-signin:hover{background:transparent;color:var(--b-lime)} html[data-experience=brand] .bs-site .bs-app-help{max-width:620px;background:transparent;color:var(--b-on-navy-2);font-size:15px;line-height:24px} html[data-experience=brand] .bs-site .bs-chip-navy{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:var(--b-navy-2);color:var(--b-on-navy-2);font-size:13px;font-weight:600} /* Footer */ html[data-experience=brand] .bs-site .bs-footer{padding:64px 0 40px;background:var(--b-page);color:var(--b-ink)} html[data-experience=brand] .bs-footer-grid{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr));gap:40px 48px} html[data-experience=brand] .bs-footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:16px} html[data-experience=brand] .bs-site .bs-footer-logo{display:flex;border-radius:12px} html[data-experience=brand] .bs-footer-logo img{display:block;width:114px;height:60px;object-fit:contain} html[data-experience=brand] .bs-site .bs-footer-tag{background:transparent;color:var(--b-ink);font:800 22px/28px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] .bs-site .bs-footer-brand p:last-child{max-width:380px;background:transparent;color:var(--b-muted);font-size:14px;line-height:22px} html[data-experience=brand] .bs-footer nav{display:flex;flex-direction:column;gap:16px} html[data-experience=brand] .bs-site .bs-footer nav h2{margin:0;background:transparent;color:var(--b-ink-2);font-size:14px;line-height:20px;font-weight:700;letter-spacing:.06em;text-transform:uppercase} html[data-experience=brand] .bs-footer ul{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none} html[data-experience=brand] .bs-site .bs-footer nav a{background:transparent;color:var(--b-ink);font-size:16px;line-height:24px;text-decoration:none} html[data-experience=brand] .bs-site .bs-footer nav a:hover{background:transparent;color:var(--b-brand);text-decoration:underline;text-underline-offset:4px} html[data-experience=brand] .bs-site .bs-footer-note{display:flex;align-items:center;justify-content:space-between;gap:16px 48px;margin-top:40px;padding:24px 28px;border-radius:var(--b-r-card);background:var(--b-mist);color:var(--b-ink-2)} html[data-experience=brand] .bs-site .bs-footer-note .fine{max-width:760px;background:transparent;color:var(--b-ink-2);font-size:14px;line-height:22px} html[data-experience=brand] .bs-site .bs-footer-copy{flex:none;background:transparent;color:var(--b-muted);font-size:14px;line-height:22px} /* The footer carries its own privacy link; the injected one would repeat it (studio.css:292's rule). */ html[data-experience=brand] .studio-public-footer~.privacy-footer{display:none} /* ===================== Apply ===================== */ html[data-experience=brand] body.bs-apply{background:var(--b-sunken);color:var(--b-ink)} html[data-experience=brand] .bs-apply-hero-wrap{max-width:1440px;margin-inline:auto;padding-inline:24px} html[data-experience=brand] .bs-site .bs-apply-hero{position:relative;overflow:clip;padding:56px 0 144px;border-radius:32px;background:var(--b-navy);color:var(--b-on-navy)} html[data-experience=brand] .bs-apply-hero .bs-swoosh{top:auto;bottom:0;height:120%} html[data-experience=brand] .bs-apply-hero-in{position:relative;display:flex;flex-direction:column;gap:16px;max-width:1248px;margin-inline:auto;padding-inline:24px} html[data-experience=brand] .bs-site .bs-back{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:44px;margin:-10px 0 -3px;background:transparent;color:var(--b-on-navy);font-size:15px;font-weight:600;text-underline-offset:4px} html[data-experience=brand] .bs-site .bs-back:hover{background:transparent;color:var(--b-lime)} html[data-experience=brand] .bs-back .bs-i{transform:scaleX(-1)} html[data-experience=brand] .bs-site .bs-apply-hero h1{max-width:760px;background:transparent;color:var(--b-on-navy);font:800 60px/64px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] .bs-site .bs-apply-hero .bs-hero-lead{max-width:620px;font-size:19px;line-height:29px} html[data-experience=brand] .bs-site .bs-apply-note{display:flex;align-items:flex-start;gap:10px;align-self:flex-start;max-width:620px;margin-top:8px;padding:12px 18px;border-radius:var(--b-r-card-sm);background:var(--b-navy-2);color:var(--b-on-navy);font-size:15px;line-height:22px;font-weight:600} html[data-experience=brand] .bs-site .bs-apply-note .bs-i{background:transparent;color:var(--b-lime)} html[data-experience=brand] .bs-apply-layout{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start;max-width:1248px;margin:-96px auto 0;padding:0 24px 80px} html[data-experience=brand] .bs-site .bs-apply-card{min-width:0;padding:40px;border:1px solid transparent;border-radius:var(--b-r-card);background:var(--b-surface);color:var(--b-ink);box-shadow:var(--b-shadow)} html[data-experience=brand] .bs-apply-aside{position:sticky;top:24px;display:flex;flex-direction:column;gap:16px;min-width:0} html[data-experience=brand] .bs-site .bs-aside-card{display:flex;flex-direction:column;gap:16px;padding:28px;border:1px solid transparent;border-radius:var(--b-r-card);background:var(--b-surface);color:var(--b-ink);box-shadow:var(--b-shadow)} html[data-experience=brand] .bs-site .bs-aside-card h2{background:transparent;color:var(--b-ink);font:800 22px/28px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] .bs-site .bs-aside-card p{background:transparent;color:var(--b-ink-2);font-size:15px;line-height:24px} html[data-experience=brand] .bs-site .bs-aside-card .bs-checks li{font-size:15px;line-height:22px} html[data-experience=brand] .bs-site .bs-aside-card a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-underline-offset:4px} /* The form. #application-form out-specifies experience.css's dark .button/.notice/label rules. */ html[data-experience=brand] #application-form{display:block;margin:0;background:transparent;color:var(--b-ink)} html[data-experience=brand] #application-form .step-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0 0 32px;padding:6px;border-radius:var(--b-r-pill);background:var(--b-sunken);color:var(--b-ink-2)} html[data-experience=brand] #application-form .step-progress span{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:44px;padding:8px 12px;border:0;border-radius:var(--b-r-pill);background:transparent;color:var(--b-muted);font:600 15px/1.25 var(--b-body);text-align:center} html[data-experience=brand] #application-form .step-progress span.done{background:var(--b-good-bg);color:var(--b-good-ink)} html[data-experience=brand] #application-form .step-progress span.active{background:var(--b-navy);color:var(--b-on-navy);font-weight:700} html[data-experience=brand][data-theme=dark] #application-form .step-progress span.active{background:var(--b-brand);color:var(--b-on-brand)} html[data-experience=brand] #application-form .step-progress .tick{margin:0;background:transparent;color:inherit;font-weight:800} html[data-experience=brand] #application-form .application-step{margin:0} html[data-experience=brand] #application-form .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px;margin:0;padding:0;border:0;background:transparent;color:var(--b-ink)} html[data-experience=brand] #application-form :is(.form-grid,.family-section)>label, html[data-experience=brand] #application-form .family-section label{display:block;min-width:0;margin:0;background:transparent;color:var(--b-ink);font:600 15px/1.4 var(--b-body)} html[data-experience=brand] #application-form .form-grid>label.full{grid-column:1/-1} html[data-experience=brand] #application-form :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),select,textarea){display:block;width:100%;min-height:52px;margin:8px 0 0;padding:12px 16px;border:1.5px solid var(--b-line-strong);border-radius:var(--b-r-control);background:var(--b-surface);color:var(--b-ink);font:400 16px/1.4 var(--b-body);box-shadow:none} html[data-experience=brand][data-theme=dark] #application-form :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),select,textarea){background:var(--b-page);color:var(--b-ink)} html[data-experience=brand] #application-form textarea{min-height:96px;resize:vertical} html[data-experience=brand] #application-form :is(input,select,textarea):hover{border-color:var(--b-brand)} html[data-experience=brand] #application-form :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea):focus,html[data-experience=brand] #application-form input[type=date]:focus-within,html[data-experience=brand] #application-form input:is([type=checkbox],[type=radio],[type=file]):focus-visible{border-color:var(--b-brand);outline:3px solid var(--focus-ring);outline-offset:2px} html[data-experience=brand] #application-form :is(input,select,textarea)[readonly]{background:var(--b-sunken);color:var(--b-ink-2)} html[data-experience=brand] #application-form ::placeholder{color:var(--b-muted);opacity:1;background:transparent} html[data-experience=brand] #application-form input[type=checkbox]{width:22px;height:22px;margin:0;accent-color:var(--b-brand);cursor:pointer} html[data-experience=brand] #application-form .req{background:transparent;color:var(--b-bad-ink);font-weight:700} html[data-experience=brand] #application-form :is(.hint,.id-hint){display:block;margin-top:6px;background:transparent;color:var(--b-muted);font:400 13px/1.5 var(--b-body)} html[data-experience=brand] #application-form .field-error{display:block;margin-top:6px;background:transparent;color:var(--b-bad-ink);font:600 13px/1.5 var(--b-body)} html[data-experience=brand] #application-form .has-error :is(input,select,textarea){border-color:var(--b-bad-ink)} html[data-experience=brand] #application-form .id-confirm{display:flex;align-items:flex-start;gap:10px;grid-column:1/-1;padding:14px 16px;border-radius:var(--b-r-control);background:var(--b-warn-bg);color:var(--b-warn-ink);font:500 14px/1.5 var(--b-body)} html[data-experience=brand] #application-form .pw-wrap{position:relative;display:block;margin-top:8px} html[data-experience=brand] #application-form .pw-wrap>input{margin-top:0} html[data-experience=brand] #application-form .pw-eye{width:44px;height:44px;border-radius:12px;background:transparent;color:var(--b-brand)} html[data-experience=brand] #application-form .pw-eye:hover{background:var(--b-mist);color:var(--b-brand)} html[data-experience=brand] #application-form .notice{margin:0 0 24px;padding:16px 20px;border:1.5px solid var(--b-info-edge);border-radius:var(--b-r-card-sm);background:var(--b-info-bg);color:var(--b-ink);font:500 15px/1.6 var(--b-body)} html[data-experience=brand] #application-form .notice strong{background:transparent;color:var(--b-ink)} html[data-experience=brand] #application-form #application-account a{font-weight:700} /* Package panel (package-info.js) */ html[data-experience=brand] #application-form #package-info{grid-column:1/-1;margin:0;padding:24px;border:0;border-radius:20px;background:var(--b-mist);color:var(--b-ink);font-weight:400} html[data-experience=brand] #application-form #package-info h3{margin:0 0 4px;background:transparent;color:var(--b-ink);font:800 24px/30px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] #application-form :is(.package-lead,.package-empty,.package-loading){margin:0;background:transparent;color:var(--b-ink-2);font-size:15px;line-height:1.6} html[data-experience=brand] #application-form .package-price{margin-top:16px;padding:16px 20px;border-radius:var(--b-r-card-sm);background:var(--b-surface);color:var(--b-ink);font-size:15px;line-height:1.65} html[data-experience=brand] #application-form .package-price strong{background:transparent;color:var(--b-ink)} html[data-experience=brand] #application-form .package-price p{margin:8px 0 0} html[data-experience=brand] #application-form .package-price .fine{background:transparent;color:var(--b-muted);font-size:13px;line-height:1.6} html[data-experience=brand] #application-form .package-compare{margin-top:16px;font-size:14px} html[data-experience=brand] #application-form .package-compare summary{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:2px solid var(--b-brand);border-radius:var(--b-r-pill);background:var(--b-surface);color:var(--b-brand);font-weight:700;cursor:pointer} html[data-experience=brand] #application-form .package-compare summary:hover{background:var(--b-brand);color:var(--b-on-brand)} html[data-experience=brand] #application-form .package-basis-note{margin:12px 0;background:transparent;color:var(--b-ink-2);font-size:13px;line-height:1.6} html[data-experience=brand] #application-form .package-table-scroll{max-width:100%;overflow-x:auto;border-radius:var(--b-r-card-sm)} html[data-experience=brand] #application-form .package-compare table{width:100%;min-width:560px;border-collapse:collapse;background:var(--b-surface);color:var(--b-ink);font-size:14px} html[data-experience=brand] #application-form .package-compare :is(th,td){padding:10px 12px;border:1px solid var(--b-line);text-align:left} html[data-experience=brand] #application-form .package-compare thead th{background:var(--b-sunken);color:var(--b-ink-2);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase} html[data-experience=brand] #application-form .package-compare tbody tr.is-selected{background:var(--b-good-bg);color:var(--b-good-ink);font-weight:700} /* Family section (dependants-ui.js) */ html[data-experience=brand] #application-form .family-section{margin:28px 0 0;padding:28px;border:1.5px solid var(--b-line);border-radius:20px;background:var(--b-sunken);color:var(--b-ink)} html[data-experience=brand] #application-form .family-section h3{margin:0 0 6px;background:transparent;color:var(--b-ink);font:800 24px/30px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] #application-form .family-section>p{margin:0 0 20px;background:transparent;color:var(--b-ink-2);font-size:14px;line-height:1.6} html[data-experience=brand] #application-form :is(.family-top,.dependant-row){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} html[data-experience=brand] #application-form .derived-label{display:block;background:transparent;color:var(--b-ink);font:600 15px/1.4 var(--b-body)} html[data-experience=brand] #application-form .family-section .derived-value{display:flex;align-items:center;min-height:52px;margin-top:8px;padding:12px 16px;border:1.5px solid var(--b-good-edge);border-radius:var(--b-r-control);background:var(--b-good-bg);color:var(--b-good-ink);font:700 15px/1.4 var(--b-body)} html[data-experience=brand] #application-form .family-section .derived-value[data-category='']{border-color:var(--b-neutral-edge);background:var(--b-neutral-bg);color:var(--b-neutral-ink);font-weight:500} html[data-experience=brand] #application-form .family-section .dependant-row{position:relative;min-width:0;margin:20px 0 0;padding:56px 20px 20px;border:1.5px solid var(--b-line);border-radius:var(--b-r-card-sm);background:var(--b-surface);color:var(--b-ink)} html[data-experience=brand] #application-form .dependant-row legend{position:absolute;top:18px;left:20px;padding:0;background:transparent;color:var(--b-ink);font:800 17px/1.3 var(--b-display)} html[data-experience=brand] #application-form .family-section .dependant-remove{position:absolute;top:12px;right:14px;min-height:36px;padding:0 14px;border:1.5px solid var(--b-bad-edge);border-radius:var(--b-r-pill);background:var(--b-surface);color:var(--b-bad-ink);font:700 13px/1 var(--b-body);cursor:pointer} html[data-experience=brand] #application-form .family-section .dependant-remove:hover{border-color:var(--b-bad-ink);background:var(--b-bad-bg);color:var(--b-bad-ink)} html[data-experience=brand] #application-form .family-add{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:20px;padding:0;border:0;background:transparent;color:var(--b-ink)} html[data-experience=brand] #application-form .family-add small{background:transparent;color:var(--b-muted);font-size:13px;line-height:1.6} html[data-experience=brand] #application-form :is(.family-section,#application-account) .secondary-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:2px solid var(--b-brand);border-radius:var(--b-r-pill);background:var(--b-surface);color:var(--b-brand);font:700 15px/1 var(--b-body);cursor:pointer} html[data-experience=brand] #application-form :is(.family-section,#application-account) .secondary-button:hover{background:var(--b-brand);color:var(--b-on-brand)} html[data-experience=brand] #application-form .secondary-button:disabled{opacity:.55;cursor:not-allowed} html[data-experience=brand] #application-form .family-estimate{margin-top:20px;padding:20px;border-radius:var(--b-r-card-sm);background:var(--b-good-bg);color:var(--b-ink)} html[data-experience=brand] #application-form .family-estimate:not(:has(strong)){border:1.5px dashed var(--b-line-strong);background:var(--b-surface);color:var(--b-ink-2);font-size:15px;line-height:1.6} html[data-experience=brand] #application-form .family-estimate>strong{display:block;margin-bottom:8px;background:transparent;color:var(--b-ink);font:800 17px/1.3 var(--b-display)} html[data-experience=brand] #application-form .family-estimate p{margin:0;padding:10px 0;border-bottom:1px solid var(--b-good-edge);background:transparent;color:var(--b-ink-2);font-size:14px;line-height:1.6} html[data-experience=brand] #application-form .family-estimate p b{display:block;margin:2px 0;background:transparent;color:var(--b-ink);font-size:16px} html[data-experience=brand] #application-form .family-estimate small{display:block;margin-top:8px;background:transparent;color:var(--b-muted);font-size:12px;line-height:1.6} html[data-experience=brand] #application-form .family-estimate .family-total{border-bottom:0;background:transparent;color:var(--b-ink);font-weight:700;font-size:15px} html[data-experience=brand] #application-form .family-estimate .family-total b{font:800 22px/1.2 var(--b-display);letter-spacing:-.01em} html[data-experience=brand] #application-form .family-section .student-check{display:flex;align-items:flex-start;gap:10px;grid-column:1/-1;background:transparent;color:var(--b-ink-2);font-weight:400;font-size:14px;line-height:1.6} html[data-experience=brand] #application-form :is(.student-caveat,.principal-category small){display:block;margin-top:8px;background:transparent;color:var(--b-muted);font-size:12px;line-height:1.6} /* Documents, declarations and submit */ html[data-experience=brand] #application-form .upload{display:block;margin:24px 0 0;padding:22px;border:2px dashed var(--b-line-strong);border-radius:20px;background:var(--b-sunken);color:var(--b-ink);font:700 16px/1.4 var(--b-body)} html[data-experience=brand] #application-form .upload input[type=file]{display:block;width:100%;max-width:100%;margin:14px 0 10px;border-radius:var(--b-r-pill);background:transparent;color:var(--b-ink-2);font:400 14px/1.4 var(--b-body)} html[data-experience=brand] #application-form .upload input[type=file]::file-selector-button{margin-right:14px;min-height:44px;padding:0 20px;border:0;border-radius:var(--b-r-pill);background:var(--b-brand);color:var(--b-on-brand);font:700 14px/1 var(--b-body);cursor:pointer} html[data-experience=brand] #application-form .upload small{display:block;background:transparent;color:var(--b-ink-2);font:400 13px/1.6 var(--b-body)} html[data-experience=brand] #application-form .upload small b{background:transparent;color:var(--b-ink)} html[data-experience=brand] #application-form .upload small.field-error{margin-top:8px;background:transparent;color:var(--b-bad-ink);font:600 13px/1.5 var(--b-body)} html[data-experience=brand] #application-form :is(.upload,label.consent).has-error{border-color:var(--b-bad-ink)} html[data-experience=brand] #application-form .privacy-upload-notice{margin:10px 4px 0;background:transparent;color:var(--b-muted);font:400 13px/1.5 var(--b-body)} html[data-experience=brand] #application-form label.consent{position:relative;display:block;margin:16px 0 0;padding:18px 20px 18px 58px;border:1.5px solid var(--b-line);border-radius:var(--b-r-card-sm);background:var(--b-surface);color:var(--b-ink-2);font:400 15px/1.6 var(--b-body);cursor:pointer} html[data-experience=brand] #application-form label.consent:first-of-type{margin-top:24px} html[data-experience=brand] #application-form label.consent:has(input:checked){border-color:var(--b-brand);background:var(--b-mist);color:var(--b-ink)} html[data-experience=brand] #application-form label.consent input{position:absolute;top:20px;left:20px} html[data-experience=brand] #application-form label.consent strong{background:transparent;color:var(--b-ink)} html[data-experience=brand] #application-form .fine{margin:20px 0 0;background:transparent;color:var(--b-muted);font-size:13px;line-height:1.6} html[data-experience=brand] #application-form #form-error{margin:16px 0 0;background:transparent;color:var(--b-bad-ink);font:600 15px/1.6 var(--b-body)} html[data-experience=brand] #application-form #form-error:not(:empty){padding:14px 18px;border:1.5px solid var(--b-bad-edge);border-radius:var(--b-r-card-sm);background:var(--b-bad-bg);color:var(--b-bad-ink)} html[data-experience=brand] #application-form #form-error a{background:transparent;color:var(--b-bad-ink);font-weight:700} html[data-experience=brand] #application-form :is(button.button,.step-actions .button){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 28px;border:2px solid var(--b-brand);border-radius:var(--b-r-pill);background:var(--b-brand);color:var(--b-on-brand);font:700 16px/1.2 var(--b-body);cursor:pointer} html[data-experience=brand] #application-form :is(button.button,.step-actions .button):hover{border-color:var(--b-brand-hover);background:var(--b-brand-hover);color:var(--b-on-brand)} html[data-experience=brand] #application-form button[type=submit]{margin-top:24px;min-height:56px;font-size:17px} html[data-experience=brand] #application-form button:disabled{opacity:.55;cursor:not-allowed} html[data-experience=brand] #application-form .step-actions{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin:32px 0 0;padding-top:24px;border-top:1px solid var(--b-line)} html[data-experience=brand] #application-form .step-actions [data-step=back]{border-color:var(--b-line-strong);background:var(--b-surface);color:var(--b-ink)} html[data-experience=brand] #application-form .step-actions [data-step=back]:hover{border-color:var(--b-brand);background:var(--b-mist);color:var(--b-ink)} html[data-experience=brand] #application-form .step-actions [data-step=next]{margin-left:auto} html[data-experience=brand] #application-form>p:last-of-type, html[data-experience=brand] #application-form .application-step>p:not([class]):not([id]){margin:16px 0 0;background:transparent;color:var(--b-ink-2);font-size:15px;line-height:1.6} html[data-experience=brand] #application-form :is(.fine,.notice,.upload,.privacy-upload-notice,.consent,.application-step>p) a{background:transparent;color:var(--b-brand);font-weight:600;text-underline-offset:3px} /* Success */ html[data-experience=brand] #application-success{display:flex;flex-direction:column;align-items:flex-start;gap:16px;background:transparent;color:var(--b-ink)} html[data-experience=brand] #application-success h2{background:transparent;color:var(--b-ink);font:800 40px/44px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] #application-success #application-reference:not(:empty){display:inline-flex;padding:10px 18px;text-wrap:balance;border-radius:var(--b-r-pill);background:var(--b-lime);color:var(--b-on-lime);font-weight:700} html[data-experience=brand] #application-success :is(#upload-status,p){background:transparent;color:var(--b-ink-2);font-size:16px;line-height:1.6} html[data-experience=brand] #application-success h3{margin-top:8px;background:transparent;color:var(--b-ink);font:800 24px/30px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] #application-success .next-steps{display:flex;flex-direction:column;gap:16px;margin:0;padding:0;list-style:none;counter-reset:bs-step} html[data-experience=brand] #application-success .next-steps li{position:relative;padding-left:52px;background:transparent;color:var(--b-ink-2);font-size:16px;line-height:1.6;counter-increment:bs-step} html[data-experience=brand] #application-success .next-steps li::before{content:counter(bs-step);position:absolute;top:-2px;left:0;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--b-mist);color:var(--b-brand);font:800 16px/1 var(--b-display)} html[data-experience=brand] #application-success .next-steps b{background:transparent;color:var(--b-ink)} html[data-experience=brand] #application-success .fine{background:transparent;color:var(--b-muted);font-size:14px} html[data-experience=brand] #application-success a.button{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 28px;border-radius:var(--b-r-pill);background:var(--b-brand);color:var(--b-on-brand);font:700 16px/1.2 var(--b-body);text-decoration:none} html[data-experience=brand] #application-success a.button:hover{background:var(--b-brand-hover);color:var(--b-on-brand)} /* Apply footer: the injected privacy link stays visible here (privacy-e2e) */ html[data-experience=brand] .bs-site .bs-footer-compact{padding:40px 0 24px;background:var(--b-sunken);color:var(--b-ink)} html[data-experience=brand] .bs-footer-row{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px 48px;padding-top:32px;border-top:1px solid var(--b-line)} html[data-experience=brand] .bs-site .bs-footer-row strong{display:block;background:transparent;color:var(--b-ink);font:800 20px/26px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] .bs-site .bs-footer-row p{background:transparent;color:var(--b-muted);font-size:14px;line-height:22px} html[data-experience=brand] .bs-footer-compact nav{flex-direction:row;flex-wrap:wrap;gap:12px 24px} html[data-experience=brand] .bs-site .bs-footer-compact>.bs-wrap>.fine{margin-top:20px;background:transparent;color:var(--b-muted);font-size:13px;line-height:1.6} html[data-experience=brand] .bs-site.bs-apply .privacy-footer{padding:0 24px 40px;background:var(--b-sunken);color:var(--b-ink-2);font:500 14px/1.5 var(--b-body);text-align:center} html[data-experience=brand] .bs-site.bs-apply .privacy-footer a{display:inline-flex;align-items:center;min-height:44px;background:transparent;color:var(--b-brand);font-weight:700} /* ===================== Privacy + data deletion (every fund: tokens only, no fund art) ===================== */ html[data-experience=brand] body.privacy-page{margin:0;background:var(--b-page);color:var(--b-ink);font:400 17px/1.7 var(--b-body);-webkit-font-smoothing:antialiased} html[data-experience=brand] body.privacy-page .privacy-document{max-width:calc(68ch + 48px);margin:0 auto;padding:40px 24px 56px;background:transparent;color:var(--b-ink)} html[data-experience=brand] .privacy-page .privacy-document>nav{margin:0 0 32px} html[data-experience=brand] body.privacy-page .privacy-document>nav a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:var(--b-r-pill);background:var(--b-mist);color:var(--b-ink);font-size:15px;font-weight:600;text-decoration:none} html[data-experience=brand] body.privacy-page .privacy-document>nav a::before{content:"\2190";background:transparent;color:var(--b-brand)} html[data-experience=brand] body.privacy-page .privacy-document>nav a:hover{background:var(--b-line);color:var(--b-ink)} html[data-experience=brand] body.privacy-page .privacy-document h1{margin:0 0 16px;background:transparent;color:var(--b-ink);font:800 48px/1.08 var(--b-display);letter-spacing:-.02em} html[data-experience=brand] body.privacy-page .privacy-document h2{margin:44px 0 12px;background:transparent;color:var(--b-ink);font:800 26px/1.2 var(--b-display);letter-spacing:-.015em} html[data-experience=brand] body.privacy-page .privacy-document h3{margin:28px 0 8px;background:transparent;color:var(--b-ink);font:700 19px/1.3 var(--b-body)} html[data-experience=brand] body.privacy-page .privacy-document :is(p,li){background:transparent;color:var(--b-ink-2)} html[data-experience=brand] body.privacy-page .privacy-document>p:first-of-type{background:transparent;color:var(--b-muted);font-size:15px} html[data-experience=brand] body.privacy-page .privacy-document p{margin:0 0 16px} html[data-experience=brand] body.privacy-page .privacy-document :is(ul,ol){margin:0 0 16px;padding-left:24px} html[data-experience=brand] body.privacy-page .privacy-document li{margin-bottom:6px} html[data-experience=brand] body.privacy-page .privacy-document strong{background:transparent;color:var(--b-ink)} html[data-experience=brand] body.privacy-page .privacy-document a:not(nav a){background:transparent;color:var(--b-brand);text-decoration:underline;text-underline-offset:3px} html[data-experience=brand] body.privacy-page .privacy-document a:not(nav a):hover{background:transparent;color:var(--b-brand-hover)} html[data-experience=brand] body.privacy-page .privacy-document .fine{background:transparent;color:var(--b-muted);font-size:15px} /* The SMS stop page (sms.html) opens with what the alerts are, not a date line: a lead, not the muted meta line above. */ html[data-experience=brand] body.privacy-page.sms-page .privacy-document>p:first-of-type{background:transparent;color:var(--b-ink-2);font-size:19px;line-height:1.6} html[data-experience=brand] body.privacy-page .privacy-document :focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px} html[data-experience=brand] body.privacy-page .privacy-footer{padding:0 24px 48px;background:var(--b-page);color:var(--b-ink-2);font:500 14px/1.5 var(--b-body);text-align:center} html[data-experience=brand] body.privacy-page .privacy-footer a{display:inline-flex;align-items:center;min-height:44px;background:transparent;color:var(--b-brand)} html[data-experience=brand] body.privacy-page .privacy-footer a:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px} html[data-experience=brand] body.privacy-page .theme-switch.is-floating{top:16px;right:16px;min-height:44px;padding:0 16px;gap:8px;border:1.5px solid var(--b-line-strong);border-radius:var(--b-r-pill);background:var(--b-surface);color:var(--b-ink);font:600 14px/1 var(--b-body);box-shadow:var(--b-shadow-sm);cursor:pointer} html[data-experience=brand] body.privacy-page .theme-switch.is-floating:hover{border-color:var(--b-brand);background:var(--b-mist);color:var(--b-ink)} html[data-experience=brand] body.privacy-page .theme-switch.is-floating:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px} /* ===================== Dark theme (tokens do most of it) ===================== */ html[data-experience=brand][data-theme=dark] .bs-site :is(.pkg,.bs-panel,.bs-pay>li,.bs-after,.bs-pill-card,.bs-segmented,.bs-apply-card,.bs-aside-card,.bs-phone-card){border-color:var(--b-line)} html[data-experience=brand][data-theme=dark] .bs-site .bs-card-preview{border-color:var(--b-line-strong)} html[data-experience=brand][data-theme=dark] .bs-site :is(.bs-hero,.bs-app,.bs-apply-hero){box-shadow:inset 0 0 0 1px var(--b-line)} /* The only logo is a white-background JPEG: it sits on a white plate in the dark theme. */ html[data-experience=brand][data-theme=dark] .bs-site :is(.bs-logo,.bs-footer-logo){padding:4px 10px;background:var(--b-on-navy);color:var(--b-navy)} html[data-experience=brand][data-theme=dark] .bs-site .bs-logo img{width:98px;height:52px} /* ===================== Responsive ===================== */ @media (max-width:1199px){ html[data-experience=brand] .bs-header .theme-switch.in-slot{padding:0} html[data-experience=brand] .bs-header .theme-switch-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} html[data-experience=brand] .bs-menu{gap:28px} html[data-experience=brand] .bs-nav{gap:24px} } @media (max-width:1100px){ html[data-experience=brand] .bs-site .bs-hero{flex-direction:column;align-items:stretch;min-height:0;padding:64px 56px 48px} html[data-experience=brand] .bs-swoosh{top:auto;bottom:0;height:460px} html[data-experience=brand] .bs-site .bs-hero h1{font-size:60px;line-height:62px} html[data-experience=brand] .bs-site .bs-card-preview{position:relative;right:auto;bottom:auto;align-self:flex-end;width:min(400px,100%);margin-top:48px;transform:rotate(-2deg)} html[data-experience=brand] .bs-paths{padding-top:80px} html[data-experience=brand] .bs-tablist{grid-template-columns:repeat(2,minmax(0,1fr))} html[data-experience=brand] .bs-site .bs-panel{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 40px} html[data-experience=brand] .bs-site .bs-panel-side{grid-column:1/-1} html[data-experience=brand] .bs-packages{grid-template-columns:repeat(2,minmax(0,1fr))} html[data-experience=brand] .bs-pay{grid-template-columns:repeat(2,minmax(0,1fr))} html[data-experience=brand] .bs-site .bs-after{flex-direction:column;align-items:flex-start;padding:20px 24px;border-radius:var(--b-r-card)} html[data-experience=brand] .bs-site .bs-app{grid-template-columns:minmax(0,1fr);padding:56px} html[data-experience=brand] .bs-phone-figure{display:none} html[data-experience=brand] .bs-apply-layout{grid-template-columns:minmax(0,1fr)} html[data-experience=brand] .bs-apply-hero .bs-swoosh{height:220px} html[data-experience=brand] .bs-apply-aside{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start} } @media (max-width:1080px){ html[data-experience=brand] .bs-header-in{height:88px} html[data-experience=brand] .bs-site .bs-menu-toggle{display:inline-flex} html[data-experience=brand] .bs-header .theme-slot{margin-left:auto} html[data-experience=brand] .bs-menu{display:none} html[data-experience=brand] .bs-site .bs-header.is-open .bs-menu{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;align-items:stretch;gap:16px;margin:0;padding:8px 24px 24px;border-bottom:1px solid var(--b-line);background:var(--b-page);color:var(--b-ink);box-shadow:var(--b-shadow)} html[data-experience=brand] .bs-header.is-open .bs-nav{flex-direction:column;align-items:stretch;gap:0} html[data-experience=brand] .bs-site .bs-header.is-open .bs-nav a{display:flex;align-items:center;min-height:56px;border-bottom:1px solid var(--b-line);font-size:18px} html[data-experience=brand] .bs-header.is-open .bs-menu-actions{flex-direction:column;align-items:stretch;gap:10px} } @media (max-width:900px){ html[data-experience=brand] .bs-steps{grid-template-columns:minmax(0,1fr);gap:32px} html[data-experience=brand] .bs-site .bs-step-no{margin-bottom:4px;font-size:56px;line-height:56px} html[data-experience=brand] .bs-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))} html[data-experience=brand] .bs-footer-brand{grid-column:1/-1} html[data-experience=brand] .bs-site .bs-footer-note{flex-direction:column;align-items:flex-start} html[data-experience=brand] .bs-packages-foot{flex-direction:column;align-items:flex-start} html[data-experience=brand] .bs-basis{align-items:flex-start} html[data-experience=brand] .bs-site .bs-section-head .bs-basis-note{text-align:left} } @media (max-width:900px){ html[data-experience=brand] .bs-footer ul{gap:0} html[data-experience=brand] .bs-footer nav{gap:8px} html[data-experience=brand] .bs-footer-compact nav{gap:0 24px} html[data-experience=brand] .bs-site .bs-footer nav a{display:inline-flex;align-items:center;min-height:44px} html[data-experience=brand] #application-form .family-section .dependant-remove{top:8px;right:10px;min-height:44px;padding:0 16px} } @media (min-width:701px) and (max-width:900px){ html[data-experience=brand] .pkg-price{flex-direction:column;align-items:flex-start} html[data-experience=brand] .pkg-child{align-items:flex-start;text-align:left} html[data-experience=brand] .pkg-limit{flex-direction:column;align-items:flex-start} } @media (max-width:700px){ html[data-experience=brand] .bs-site .bs-panel{grid-template-columns:minmax(0,1fr);gap:28px;padding:28px 24px} html[data-experience=brand] .bs-app-features{grid-template-columns:minmax(0,1fr);gap:24px} html[data-experience=brand] .bs-packages{grid-template-columns:minmax(0,1fr)} html[data-experience=brand] #application-form :is(.form-grid,.family-top,.dependant-row){grid-template-columns:minmax(0,1fr)} html[data-experience=brand] .bs-apply-aside{grid-template-columns:minmax(0,1fr)} } @media (max-width:600px){ html[data-experience=brand] .bs-wrap,html[data-experience=brand] .bs-header-in{padding-inline:16px} html[data-experience=brand] .bs-header-in{height:72px;gap:10px} html[data-experience=brand] .bs-logo img{width:84px;height:44px} html[data-experience=brand][data-theme=dark] .bs-site .bs-logo img{width:76px;height:40px} html[data-experience=brand] .bs-header .theme-switch.in-slot,html[data-experience=brand] .bs-site .bs-menu-toggle{width:48px;min-width:48px;height:48px;min-height:48px} html[data-experience=brand] .bs-site .bs-header.is-open .bs-menu{padding-inline:16px} html[data-experience=brand] .bs-hero-wrap,html[data-experience=brand] .bs-apply-hero-wrap{padding-inline:8px} html[data-experience=brand] .bs-app-wrap{padding:16px 8px 0} html[data-experience=brand] .bs-site .bs-hero{padding:44px 20px 32px;border-radius:24px} html[data-experience=brand] .bs-hero .bs-swoosh{height:250px} html[data-experience=brand] .bs-site .bs-card-mark{width:40px;height:40px;border-radius:10px} html[data-experience=brand] .bs-card-mark img{width:32px;height:32px} html[data-experience=brand] .bs-card-brand{gap:10px} html[data-experience=brand] .bs-site .bs-card-fund{font-size:16px;line-height:20px;white-space:nowrap} html[data-experience=brand] .bs-site .bs-card-tag{height:24px;padding:0 10px;font-size:11px} html[data-experience=brand] .bs-site .bs-from p:first-child{line-height:30px} html[data-experience=brand] .bs-site .bs-from strong{font-size:24px} html[data-experience=brand] .bs-hero-copy{gap:20px} html[data-experience=brand] .bs-site .bs-hero-eyebrow{font-size:12px;line-height:18px;letter-spacing:.06em} html[data-experience=brand] .bs-site .bs-hero h1{font-size:44px;line-height:46px} html[data-experience=brand] .bs-site .bs-hero-lead{font-size:18px;line-height:28px} html[data-experience=brand] .bs-hero-actions{flex-direction:column;align-items:flex-start;gap:18px;margin-top:8px} html[data-experience=brand] .bs-site .bs-card-preview{align-self:center;height:228px;margin-top:40px} html[data-experience=brand] .bs-card-in{padding:20px 22px} html[data-experience=brand] .bs-site .bs-card-name{font-size:26px;line-height:30px} html[data-experience=brand] .bs-card-facts{gap:20px} html[data-experience=brand] .bs-section,html[data-experience=brand] .bs-band{padding-block:56px} html[data-experience=brand] .bs-paths{padding-top:56px} html[data-experience=brand] .bs-section-head{margin-bottom:28px} html[data-experience=brand] .bs-site .bs-section-head h2{font-size:36px;line-height:40px} html[data-experience=brand] .bs-site .bs-section-head p{font-size:17px;line-height:26px} html[data-experience=brand] .bs-tablist{gap:10px} html[data-experience=brand] .bs-site .bs-tablist [role=tab]{flex-direction:column;align-items:flex-start;gap:10px;min-height:112px;padding:14px;border-radius:20px;font-size:15px} html[data-experience=brand] .bs-site .bs-tab-icon{width:40px;height:40px} html[data-experience=brand] .bs-site .bs-panel h3{font-size:28px;line-height:32px} html[data-experience=brand] .bs-panel-cta .bs-btn{width:100%;padding-inline:22px;white-space:normal;text-align:center;text-wrap:balance} html[data-experience=brand] .bs-site .pkg{padding:24px} html[data-experience=brand] .bs-site .pkg-amount{font-size:48px;line-height:48px} html[data-experience=brand] .bs-pay{grid-template-columns:minmax(0,1fr);gap:16px} html[data-experience=brand] .bs-site .bs-pay>li{padding:24px} html[data-experience=brand] .bs-site .bs-pill-card{width:100%} html[data-experience=brand] .bs-how-actions .bs-btn{width:100%} html[data-experience=brand] .bs-site .bs-app{gap:32px;padding:40px 20px;border-radius:24px} html[data-experience=brand] .bs-site .bs-app h2{font-size:36px;line-height:40px} html[data-experience=brand] .bs-app-buttons .bs-btn{width:100%} html[data-experience=brand] .bs-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px} html[data-experience=brand] .bs-site .bs-footer-note{padding:20px} html[data-experience=brand] .bs-site .bs-apply-hero{padding:40px 0 112px;border-radius:24px} html[data-experience=brand] .bs-apply-hero-in{padding-inline:20px} html[data-experience=brand] .bs-site .bs-apply-hero h1{font-size:40px;line-height:44px} html[data-experience=brand] .bs-site .bs-apply-hero .bs-hero-lead{font-size:17px;line-height:26px} html[data-experience=brand] .bs-apply-hero .bs-swoosh{height:170px} html[data-experience=brand] .bs-apply-layout{margin-top:-72px;padding:0 16px 56px;gap:16px} html[data-experience=brand] .bs-site .bs-apply-card{padding:24px 20px} html[data-experience=brand] .bs-site .bs-aside-card{padding:24px 20px} html[data-experience=brand] #application-form .step-progress{border-radius:20px} html[data-experience=brand] #application-form .step-progress span{padding:8px 6px;border-radius:14px;font-size:13px} html[data-experience=brand] #application-form .family-section{padding:20px 16px} html[data-experience=brand] #application-form .family-section .dependant-row{padding:56px 16px 16px} html[data-experience=brand] #application-form .dependant-row legend{left:16px} html[data-experience=brand] #application-form #package-info{padding:20px 16px} html[data-experience=brand] #application-form button[type=submit]{width:100%} html[data-experience=brand] #application-form label.consent{padding:16px 16px 16px 50px} html[data-experience=brand] #application-form label.consent input{top:18px;left:16px} html[data-experience=brand] #application-form .step-actions .button{flex:1 1 0;padding:0 16px} html[data-experience=brand] #application-success h2{font-size:32px;line-height:36px} html[data-experience=brand] #application-success #application-reference:not(:empty){border-radius:var(--b-r-card-sm)} html[data-experience=brand] body.privacy-page .privacy-document{padding:80px 16px 48px} html[data-experience=brand] body.privacy-page .privacy-document h1{font-size:36px} html[data-experience=brand] body.privacy-page .privacy-document h2{margin-top:36px;font-size:23px} html[data-experience=brand] body.privacy-page.sms-page .privacy-document>p:first-of-type{font-size:17px} } @media (max-width:380px){ html[data-experience=brand] .bs-site .bs-hero h1{font-size:38px;line-height:40px} html[data-experience=brand] .bs-site .bs-tablist [role=tab]{font-size:14px} html[data-experience=brand] .bs-footer-grid{grid-template-columns:minmax(0,1fr)} html[data-experience=brand] .bs-site .bs-card-tag{display:none} } @media (prefers-reduced-motion:reduce){ html[data-experience=brand] .bs-site *{scroll-behavior:auto} } @media print{ html[data-experience=brand] .bs-site :is(.bs-header,.bs-hero-art,.bs-card-preview,.bs-phone-figure,.bs-menu-toggle,.theme-switch){display:none} html[data-experience=brand] .bs-site :is(.bs-hero,.bs-app,.bs-apply-hero){box-shadow:none} } /* ===================== Phase 1 additions (26 Sep): contact, own branches, social links, health tools ===================== budget-home.html: #facilities, #tools, #contact and the footer's "Follow us" (brand-info.js fills the [data-info] parts from /api/public-info and leaves them hidden when the fund has not filled them). health-tools.html: body.bs-tools (health-tools.js). */ html[data-experience=brand] .bs-site .bs-nav a[aria-current=page]{background:transparent;color:var(--b-brand);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px} /* Shared: small facts list and call / WhatsApp / directions pills */ html[data-experience=brand] .bs-info-facts{display:flex;flex-direction:column;gap:14px;margin:0} html[data-experience=brand] .bs-info-facts>div{display:flex;flex-direction:column;gap:4px;min-width:0} html[data-experience=brand] .bs-site .bs-info-facts dt{display:flex;align-items:center;gap:8px;background:transparent;color:var(--b-ink-2);font-size:13px;line-height:18px;font-weight:700;letter-spacing:.06em;text-transform:uppercase} html[data-experience=brand] .bs-site .bs-info-facts dt .bs-i{background:transparent;color:var(--b-leaf-ink)} html[data-experience=brand] .bs-site .bs-info-facts dd{margin:0;padding-left:26px;background:transparent;color:var(--b-ink);font-size:16px;line-height:24px;overflow-wrap:anywhere} html[data-experience=brand] .bs-info-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px} html[data-experience=brand] .bs-info-actions .bs-pill{min-height:48px;padding:0 20px;font-size:15px;white-space:normal;text-align:left} html[data-experience=brand] .bs-site .bs-info-actions .bs-pill-card{border:1.5px solid var(--b-line-strong);box-shadow:none;background:var(--b-surface);color:var(--b-ink)} html[data-experience=brand] .bs-site .bs-info-actions .bs-pill-card:hover{border-color:var(--b-brand);background:var(--b-surface);color:var(--b-brand)} html[data-experience=brand] .bs-site .bs-info-note{margin-top:14px;background:transparent;color:var(--b-muted);font-size:14px;line-height:22px} /* Our medical centre and pharmacy */ html[data-experience=brand] .bs-branches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none} html[data-experience=brand] .bs-site .bs-branch{display:flex;flex-direction:column;min-width:0;padding:28px;border:1px solid var(--b-line);border-radius:var(--b-r-card);background:var(--b-surface);color:var(--b-ink)} html[data-experience=brand] .bs-site .bs-branch-kind{align-self:flex-start;display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:var(--b-r-pill);background:var(--b-leaf-mist);color:var(--b-leaf-ink);font-size:13px;font-weight:700} html[data-experience=brand] .bs-site .bs-branch h3{margin:14px 0 18px;background:transparent;color:var(--b-ink);font:800 24px/28px var(--b-display);letter-spacing:-.02em;overflow-wrap:anywhere} html[data-experience=brand] .bs-branch .bs-info-actions{margin-top:auto;padding-top:20px} /* Simple health tools (home teaser) */ html[data-experience=brand] .bs-tool-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none} html[data-experience=brand] .bs-tool-cards>li{display:flex;min-width:0} html[data-experience=brand] .bs-site .bs-tool-card{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%;padding:28px;border:1px solid var(--b-line);border-radius:var(--b-r-card);background:var(--b-surface);color:var(--b-ink);text-decoration:none;transition:transform .15s ease} html[data-experience=brand] .bs-site .bs-tool-card:hover{border-color:var(--b-brand);background:var(--b-surface);color:var(--b-ink);transform:translateY(-2px)} html[data-experience=brand] .bs-site .bs-tool-icon{display:flex;align-items:center;justify-content:center;flex:none;width:48px;height:48px;border-radius:50%;background:var(--b-mist);color:var(--b-brand)} html[data-experience=brand] .bs-site :is(.bs-tool-cards>li:nth-child(2) .bs-tool-icon,.bs-tool-icon-leaf){background:var(--b-leaf-mist);color:var(--b-leaf-ink)} html[data-experience=brand] .bs-site .bs-tool-name{margin-top:6px;background:transparent;color:var(--b-ink);font:800 24px/28px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] .bs-site .bs-tool-text{background:transparent;color:var(--b-ink-2);font-size:16px;line-height:24px} html[data-experience=brand] .bs-site .bs-tool-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:12px;background:transparent;color:var(--b-brand);font-size:16px;font-weight:700} /* Contact and visit us */ html[data-experience=brand] .bs-contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px} html[data-experience=brand] .bs-site .bs-info-card{display:flex;flex-direction:column;min-width:0;padding:32px;border:1px solid transparent;border-radius:var(--b-r-card);background:var(--b-surface);color:var(--b-ink);box-shadow:var(--b-shadow)} html[data-experience=brand] .bs-site .bs-info-card h3{margin-bottom:18px;background:transparent;color:var(--b-ink);font:800 24px/28px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] .bs-info-card h3+.bs-info-actions{margin-top:0} html[data-experience=brand] .bs-social{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none} html[data-experience=brand] .bs-site .bs-social a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--b-r-pill);background:var(--b-mist);color:var(--b-ink);font-weight:700;text-decoration:none} html[data-experience=brand] .bs-site .bs-social a:hover{background:var(--b-line);color:var(--b-ink)} html[data-experience=brand] .bs-footer-grid:has(>[data-info=social]:not([hidden])){grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))} html[data-experience=brand] .bs-site .bs-footer nav a .bs-i{display:inline-block;margin-left:6px;vertical-align:-2px;background:transparent;color:var(--b-muted)} /* ===================== Health tools page ===================== */ html[data-experience=brand] body.bs-tools{background:var(--b-sunken);color:var(--b-ink)} html[data-experience=brand] .bs-site .bs-tools-hero{padding-bottom:120px} html[data-experience=brand] .bs-tools-layout{position:relative;display:flex;flex-direction:column;gap:24px;max-width:960px;margin:-72px auto 0;padding:0 24px 80px} html[data-experience=brand] .bs-site .bs-tools-jump{display:flex;flex-wrap:wrap;gap:8px;padding:8px;border:1px solid transparent;border-radius:var(--b-r-pill);background:var(--b-surface);color:var(--b-ink);box-shadow:var(--b-shadow)} html[data-experience=brand] .bs-site .bs-tools-jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:var(--b-r-pill);background:transparent;color:var(--b-ink-2);font-weight:700;text-decoration:none} html[data-experience=brand] .bs-site .bs-tools-jump a:hover{background:var(--b-mist);color:var(--b-ink)} html[data-experience=brand] .bs-site .bs-tool{scroll-margin-top:16px;padding:40px;border:1px solid transparent;border-radius:var(--b-r-card);background:var(--b-surface);color:var(--b-ink);box-shadow:var(--b-shadow)} html[data-experience=brand] .bs-tool-head{display:flex;align-items:flex-start;gap:20px;margin-bottom:28px} html[data-experience=brand] .bs-tool-head>div{display:flex;flex-direction:column;gap:8px;min-width:0} html[data-experience=brand] .bs-site .bs-tool h2{background:transparent;color:var(--b-ink);font:800 32px/36px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] .bs-site .bs-tool-head p{max-width:62ch;background:transparent;color:var(--b-ink-2);font-size:17px;line-height:27px} html[data-experience=brand] .bs-tool-form{display:flex;flex-direction:column;align-items:flex-start;gap:20px} html[data-experience=brand] .bs-tool-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px;width:100%} html[data-experience=brand] .bs-tool-fields-4{grid-template-columns:repeat(2,minmax(0,1fr))} html[data-experience=brand] .bs-field{display:flex;flex-direction:column;gap:8px;min-width:0} html[data-experience=brand] .bs-site .bs-field label{background:transparent;color:var(--b-ink);font:600 15px/1.4 var(--b-body)} html[data-experience=brand] .bs-site .bs-field :is(input,select){width:100%;min-width:0;min-height:52px;margin:0;padding:12px 16px;border:1.5px solid var(--b-line-strong);border-radius:var(--b-r-control);background:var(--b-surface);color:var(--b-ink);font:500 16px/1.3 var(--b-body)} html[data-experience=brand][data-theme=dark] .bs-site .bs-field :is(input,select){background:var(--b-page);color:var(--b-ink)} html[data-experience=brand] .bs-site .bs-field :is(input,select):hover{border-color:var(--b-brand)} html[data-experience=brand] .bs-site .bs-field :is(input,select):focus{border-color:var(--b-brand);outline:3px solid var(--focus-ring);outline-offset:1px} html[data-experience=brand] .bs-site .bs-field [aria-invalid=true]{border-color:var(--b-bad-ink)} html[data-experience=brand] .bs-site .bs-field small{background:transparent;color:var(--b-muted);font-size:13px;line-height:1.5} html[data-experience=brand] .bs-site .bs-tool-error{background:transparent;color:var(--b-bad-ink);font-size:15px;line-height:1.5;font-weight:600} html[data-experience=brand] .bs-tool-error:empty{display:none} html[data-experience=brand] .bs-site .bs-tool-status{padding:16px 20px;border-radius:var(--b-r-card-sm);background:var(--b-mist);color:var(--b-ink-2);font-size:15px;line-height:1.5} html[data-experience=brand] .bs-site .bs-tool-result{margin-top:28px;padding:28px;border:1px solid transparent;border-radius:var(--b-r-card-sm);background:var(--b-mist);color:var(--b-ink)} html[data-experience=brand] .bs-site .bs-tool-result>p{margin-top:12px;background:transparent;color:var(--b-ink-2);font-size:16px;line-height:25px} html[data-experience=brand] .bs-site .bs-tool-result h3{margin-top:24px;background:transparent;color:var(--b-ink);font:800 22px/28px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] .bs-site .bs-result-figure{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0} html[data-experience=brand] .bs-site .bs-tool-result>p.bs-result-figure{margin:0} html[data-experience=brand] .bs-site .bs-result-figure span{flex-basis:100%;background:transparent;color:var(--b-ink-2);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase} html[data-experience=brand] .bs-site .bs-result-figure strong{background:transparent;color:var(--b-ink);font:800 44px/48px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] .bs-site .bs-result-figure small{background:transparent;color:var(--b-ink-2);font-size:16px} html[data-experience=brand] .bs-site .bs-tool-result>p.bs-result-lead{background:transparent;color:var(--b-ink);font-size:18px;line-height:27px;font-weight:600} html[data-experience=brand] .bs-bmi-scale{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:20px 0 0;padding:0;list-style:none} html[data-experience=brand] .bs-site .bs-bmi-scale li{display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px 12px;border:2px solid transparent;border-radius:14px;background:var(--b-surface);color:var(--b-ink-2);font-size:13px;line-height:1.35} html[data-experience=brand] .bs-site .bs-bmi-scale li strong{background:transparent;color:var(--b-ink);font-size:14px} html[data-experience=brand] .bs-site .bs-bmi-scale li.is-on{border-color:var(--b-navy);background:var(--b-navy);color:var(--b-on-navy-2)} html[data-experience=brand] .bs-site .bs-bmi-scale li.is-on strong{background:transparent;color:var(--b-on-navy)} html[data-experience=brand][data-theme=dark] .bs-site .bs-bmi-scale li.is-on{border-color:var(--b-brand);background:var(--b-brand);color:var(--b-on-brand)} html[data-experience=brand][data-theme=dark] .bs-site .bs-bmi-scale li.is-on strong{background:transparent;color:var(--b-on-brand)} html[data-experience=brand] .bs-timeline{display:flex;flex-direction:column;gap:0;margin:16px 0 0;padding:0;list-style:none} html[data-experience=brand] .bs-timeline li{position:relative;display:flex;gap:14px;padding:0 0 16px} html[data-experience=brand] .bs-site .bs-timeline li::before{content:"";position:absolute;left:8px;top:22px;bottom:0;width:2px;background:var(--b-line-strong);color:var(--b-ink)} html[data-experience=brand] .bs-timeline li:last-child{padding-bottom:0} html[data-experience=brand] .bs-timeline li:last-child::before{display:none} html[data-experience=brand] .bs-site .bs-tl-mark{position:relative;flex:none;width:18px;height:18px;margin-top:3px;border:2px solid var(--b-line-strong);border-radius:50%;background:var(--b-surface);color:var(--b-ink)} html[data-experience=brand] .bs-site .bs-timeline li.is-past .bs-tl-mark{border-color:var(--b-leaf-ink);background:var(--b-leaf-ink);color:var(--b-surface)} html[data-experience=brand] .bs-site .bs-timeline li.is-next .bs-tl-mark{border-color:var(--b-brand);background:var(--b-brand);color:var(--b-on-brand)} html[data-experience=brand] .bs-tl-body{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0} html[data-experience=brand] .bs-site .bs-tl-body strong{background:transparent;color:var(--b-ink);font-size:16px} html[data-experience=brand] .bs-site .bs-tl-body>span{flex-basis:100%;background:transparent;color:var(--b-ink-2);font-size:15px;line-height:22px} html[data-experience=brand] .bs-site .bs-tl-body em{order:1;display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:var(--b-r-pill);background:var(--b-brand);color:var(--b-on-brand);font-size:12px;font-style:normal;font-weight:700} html[data-experience=brand] .bs-est-lines{display:flex;flex-direction:column;gap:8px;margin:18px 0 0;padding:0;list-style:none} html[data-experience=brand] .bs-site .bs-est-lines li{display:flex;justify-content:space-between;gap:16px;padding:12px 16px;border-radius:12px;background:var(--b-surface);color:var(--b-ink-2);font-size:15px} html[data-experience=brand] .bs-site .bs-est-lines b{flex:none;background:transparent;color:var(--b-ink)} html[data-experience=brand] .bs-site .bs-tool-result>p.bs-result-cta{margin-top:20px} html[data-experience=brand] .bs-site .bs-tool-note{margin-top:20px;background:transparent;color:var(--b-muted);font-size:14px;line-height:22px} html[data-experience=brand] .bs-site .bs-tool-note a{font-weight:700;text-underline-offset:3px} html[data-experience=brand] .bs-site .bs-tool-warning{display:flex;align-items:flex-start;gap:12px;margin-top:24px;padding:16px 20px;border:1px solid var(--b-warn-edge);border-radius:var(--b-r-card-sm);background:var(--b-warn-bg);color:var(--b-warn-ink)} html[data-experience=brand] .bs-site .bs-tool-warning p{background:transparent;color:var(--b-warn-ink);font-size:15px;line-height:23px} html[data-experience=brand] .bs-site .bs-tool-warning strong{background:transparent;color:var(--b-warn-ink)} html[data-experience=brand] .bs-site.bs-tools .privacy-footer{padding:0 24px 40px;background:var(--b-sunken);color:var(--b-ink-2);font:500 14px/1.5 var(--b-body);text-align:center} html[data-experience=brand] .bs-site.bs-tools .privacy-footer a{display:inline-flex;align-items:center;min-height:44px;background:transparent;color:var(--b-brand);font-weight:700} @media (max-width:1100px){ html[data-experience=brand] .bs-branches,html[data-experience=brand] .bs-tool-cards{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:900px){ html[data-experience=brand] .bs-footer-grid:has(>[data-info=social]:not([hidden])){grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:700px){ html[data-experience=brand] .bs-branches,html[data-experience=brand] .bs-tool-cards,html[data-experience=brand] .bs-tool-fields,html[data-experience=brand] .bs-tool-fields-4{grid-template-columns:minmax(0,1fr)} html[data-experience=brand] .bs-bmi-scale{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:600px){ html[data-experience=brand] .bs-site .bs-branch,html[data-experience=brand] .bs-site .bs-tool-card,html[data-experience=brand] .bs-site .bs-info-card{padding:24px 20px} html[data-experience=brand] .bs-info-actions .bs-pill{width:100%;justify-content:flex-start} html[data-experience=brand] .bs-tools-layout{margin-top:-80px;padding:0 8px 56px;gap:16px} html[data-experience=brand] .bs-site .bs-tools-jump{border-radius:24px} html[data-experience=brand] .bs-site .bs-tools-jump a{flex:1 1 auto;justify-content:center;padding:0 14px} html[data-experience=brand] .bs-site .bs-tool{padding:28px 20px} html[data-experience=brand] .bs-tool-head{flex-direction:column;gap:14px;margin-bottom:22px} html[data-experience=brand] .bs-site .bs-tool h2{font-size:28px;line-height:32px} html[data-experience=brand] .bs-site .bs-tool-head p{font-size:16px;line-height:25px} html[data-experience=brand] .bs-tool-form .bs-btn{width:100%} html[data-experience=brand] .bs-site .bs-tool-result{padding:22px 18px} html[data-experience=brand] .bs-site .bs-result-figure strong{font-size:36px;line-height:40px} html[data-experience=brand] .bs-result-cta .bs-btn{width:100%;white-space:normal;text-align:center} } @media (prefers-reduced-motion:reduce){ html[data-experience=brand] .bs-site .bs-tool-card{transition:none} html[data-experience=brand] .bs-site .bs-tool-card:hover{transform:none} } @media print{ html[data-experience=brand] .bs-site :is(.bs-tools-jump,.bs-tool-form){display:none} } /* ───────── 26 Sep meeting, phase 1 on /apply: the 4-digit PIN, the phone country picker, ID documents per person ───────── phone-input.css and id-uploads.css give layout only; this paints them in B, both themes. */ /* A field the browser or form-validation.js has refused shows it on the box as well as in words. The painted-input rule above is (1,5,2) and its dark twin (1,6,2), so the plain .has-error rule never reached the border. */ html[data-experience=brand] #application-form :is(.has-error :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),select:not(.phone-country),textarea),:is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]),select,textarea)[aria-invalid=true]){border-color:var(--b-bad-ink)} /* The PIN: four digits, spaced like a PIN pad's display, in a box sized for four. The eye stays inside it. */ html[data-experience=brand] #application-form input[data-pin-input]{letter-spacing:.42em;font-variant-numeric:tabular-nums;font-weight:700} html[data-experience=brand] #application-form input[data-pin-input]::placeholder{letter-spacing:normal;font-weight:400} html[data-experience=brand] #application-form label:has(>.pw-wrap>input[data-pin-input]) .pw-wrap{max-width:15rem} /* Phone: the country list and the number share one row; the line under them shows the full number once it reads. */ html[data-experience=brand] #application-form .phone-row{margin-top:8px} html[data-experience=brand] #application-form .phone-row>:is(select,input){margin-top:0} html[data-experience=brand] #application-form .phone-row>select.phone-country{width:11rem;max-width:48%} html[data-experience=brand] #application-form small.phone-preview.phone-preview-ok{background:transparent;color:var(--b-good-ink);font-weight:600} /* Identity documents: one card per person, like the dependant cards on step 2. A card with a file carries a tick. */ html[data-experience=brand] #application-form .id-uploads .id-uploads-title{margin:0 0 6px;background:transparent;color:var(--b-ink);font:800 18px/1.3 var(--b-display);letter-spacing:-.01em} html[data-experience=brand] #application-form .id-uploads .id-uploads-title b{font-weight:inherit} html[data-experience=brand] #application-form .id-people{gap:14px;margin-top:18px} html[data-experience=brand] #application-form .id-person{position:relative;margin:0;padding:16px 18px 18px;border:1.5px solid var(--b-line);border-radius:var(--b-r-card-sm);background:var(--b-surface);color:var(--b-ink)} html[data-experience=brand] #application-form .id-person:has(.id-files>li){border-color:var(--b-good-edge)} html[data-experience=brand] #application-form .id-person legend{position:relative;float:left;display:flex;align-items:center;gap:10px;width:100%;margin:0 0 12px;padding:0;background:transparent;color:var(--b-ink);font:800 16px/1.3 var(--b-display)} html[data-experience=brand] #application-form .id-person legend::before{content:"";flex:none;width:22px;height:22px;border:2px solid var(--b-line-strong);border-radius:50%;background:transparent;color:var(--b-ink)} html[data-experience=brand] #application-form .id-person:has(.id-files>li) legend::before{border-color:var(--b-good-ink);background:var(--b-good-bg);color:var(--b-good-ink)} html[data-experience=brand] #application-form .id-person:has(.id-files>li) legend::after{content:"";position:absolute;top:50%;left:4px;width:14px;height:14px;margin-top:-7px;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px 14px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px 14px no-repeat;background:var(--b-good-ink);color:var(--b-good-ink)} html[data-experience=brand] #application-form .id-person>legend~*{clear:both} html[data-experience=brand] #application-form .id-files{gap:8px} html[data-experience=brand] #application-form .id-file{gap:10px 12px;padding:8px 8px 8px 16px;border:1.5px solid var(--b-good-edge);border-radius:14px;background:var(--b-good-bg);color:var(--b-good-ink)} html[data-experience=brand] #application-form .id-file>span{background:transparent;color:var(--b-good-ink);font:700 14px/1.4 var(--b-body)} html[data-experience=brand] #application-form .id-pick{background:transparent;color:var(--b-ink-2);font:600 14px/1.4 var(--b-body)} html[data-experience=brand] #application-form .id-pick input[type=file]{margin:10px 0 0} html[data-experience=brand] #application-form .id-person button.button.id-add{min-height:44px;margin-top:12px;padding:0 20px;border:2px solid var(--b-brand);background:var(--b-surface);color:var(--b-brand);font-size:15px} html[data-experience=brand] #application-form .id-person button.button.id-add:hover{border-color:var(--b-brand);background:var(--b-brand);color:var(--b-on-brand)} html[data-experience=brand] #application-form .id-person button.button.id-file-remove{min-height:40px;margin:0;padding:0 16px;border:1.5px solid var(--b-bad-edge);background:var(--b-surface);color:var(--b-bad-ink);font-size:13px} html[data-experience=brand] #application-form .id-person button.button.id-file-remove:hover{border-color:var(--b-bad-ink);background:var(--b-bad-bg);color:var(--b-bad-ink)} html[data-experience=brand] #application-form .id-owed:not([hidden]){display:block;margin:14px 0 0;padding:12px 16px;border:1.5px solid var(--b-warn-edge);border-radius:14px;background:var(--b-warn-bg);color:var(--b-warn-ink);font:600 14px/1.5 var(--b-body)} html[data-experience=brand] #application-form .id-uploads .privacy-upload-notice{margin:14px 2px 0} /* After sending: what arrived and who is still owed an ID reads as its own box, not as one more paragraph. */ html[data-experience=brand] #application-success #upload-status:not(:empty){padding:16px 20px;border:1.5px solid var(--b-info-edge);border-radius:var(--b-r-card-sm);background:var(--b-info-bg);color:var(--b-ink);font:500 15px/1.6 var(--b-body)} @media (max-width:600px){ html[data-experience=brand] #application-form .phone-row>select.phone-country{width:8.5rem} html[data-experience=brand] #application-form .id-person{padding:14px} html[data-experience=brand] #application-form .id-file{padding-left:12px} html[data-experience=brand] #application-form .id-person button.button.id-add{width:100%} } /* ===================== Paper application form (26 Sep, decision 24) ===================== budget-home.html: "Prefer paper?" under How to join, and two footer links. budget-apply.html: one line in the hero. budget-paper.html (/apply/paper): #paper-form, sending a completed paper form (paper-form.js, server.js /api/apply/paper). */ html[data-experience=brand] .bs-site .bs-paper-route{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px 24px;margin-top:40px;padding:24px 28px;border:1.5px dashed var(--b-line-strong);border-radius:var(--b-r-card);background:var(--b-sunken);color:var(--b-ink)} html[data-experience=brand] .bs-site .bs-paper-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--b-leaf-mist);color:var(--b-leaf-ink)} html[data-experience=brand] .bs-site .bs-paper-copy h3{margin:0 0 4px;background:transparent;color:var(--b-ink);font:800 24px/28px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] .bs-site .bs-paper-copy p{max-width:640px;background:transparent;color:var(--b-ink-2);font-size:16px;line-height:24px} html[data-experience=brand] .bs-paper-actions{display:flex;flex-direction:column;align-items:flex-start;gap:8px} html[data-experience=brand] .bs-site .bs-paper-route .bs-paper-download{min-height:48px;padding:8px 20px;border:1.5px solid var(--b-line-strong);box-shadow:none;background:var(--b-surface);color:var(--b-ink);font-size:15px} html[data-experience=brand] .bs-site .bs-paper-route .bs-paper-download:hover{border-color:var(--b-brand);background:var(--b-surface);color:var(--b-brand)} html[data-experience=brand] .bs-site .bs-paper-send{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;background:transparent;color:var(--b-link);font-size:15px;font-weight:700;text-underline-offset:4px} html[data-experience=brand] .bs-site .bs-paper-send:hover{background:transparent;color:var(--b-brand)} html[data-experience=brand] .bs-site .bs-apply-paper{max-width:620px;background:transparent;color:var(--b-on-navy-2);font-size:15px;line-height:24px} html[data-experience=brand] .bs-site .bs-apply-paper a{background:transparent;color:var(--b-on-navy);font-weight:700;text-underline-offset:4px} html[data-experience=brand] .bs-site .bs-apply-paper a:hover{background:transparent;color:var(--b-lime)} /* /apply/paper: the same form language as #application-form */ html[data-experience=brand] #paper-form{display:block;margin:0;background:transparent;color:var(--b-ink)} html[data-experience=brand] #paper-form .paper-intro{margin:0 0 24px;padding:16px 20px;border:1.5px solid var(--b-info-edge);border-radius:var(--b-r-card-sm);background:var(--b-info-bg);color:var(--b-ink);font:500 15px/1.6 var(--b-body)} html[data-experience=brand] #paper-form .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px;margin:0;padding:0;border:0;background:transparent;color:var(--b-ink)} html[data-experience=brand] #paper-form .form-grid>label{display:block;min-width:0;margin:0;background:transparent;color:var(--b-ink);font:600 15px/1.4 var(--b-body)} html[data-experience=brand] #paper-form .form-grid>label.full{grid-column:1/-1} html[data-experience=brand] #paper-form :is(input:not([type=checkbox]):not([type=file]),select){display:block;width:100%;min-height:52px;margin:8px 0 0;padding:12px 16px;border:1.5px solid var(--b-line-strong);border-radius:var(--b-r-control);background:var(--b-surface);color:var(--b-ink);font:400 16px/1.4 var(--b-body);box-shadow:none} html[data-experience=brand][data-theme=dark] #paper-form :is(input:not([type=checkbox]):not([type=file]),select){background:var(--b-page);color:var(--b-ink)} html[data-experience=brand] #paper-form :is(input,select):hover{border-color:var(--b-brand)} html[data-experience=brand] #paper-form :is(input:not([type=checkbox]):not([type=file]),select):focus,html[data-experience=brand] #paper-form input:is([type=checkbox],[type=file]):focus-visible{border-color:var(--b-brand);outline:3px solid var(--focus-ring);outline-offset:2px} html[data-experience=brand] #paper-form input[type=checkbox]{width:22px;height:22px;margin:0;accent-color:var(--b-brand);cursor:pointer} html[data-experience=brand] #paper-form .req{background:transparent;color:var(--b-bad-ink);font-weight:700} html[data-experience=brand] #paper-form .hint{display:block;margin-top:6px;background:transparent;color:var(--b-muted);font:400 13px/1.5 var(--b-body)} html[data-experience=brand] #paper-form .field-error{display:block;margin-top:6px;background:transparent;color:var(--b-bad-ink);font:600 13px/1.5 var(--b-body)} html[data-experience=brand] #paper-form :is(.has-error input:not([type=checkbox]):not([type=file]),input[aria-invalid=true]:not([type=checkbox])){border-color:var(--b-bad-ink)} html[data-experience=brand] #paper-form .phone-row{margin-top:8px} html[data-experience=brand] #paper-form .phone-row>:is(select,input){margin-top:0} html[data-experience=brand] #paper-form .phone-row>select.phone-country{width:11rem;max-width:48%} html[data-experience=brand] #paper-form small.phone-preview{display:block;margin-top:6px;background:transparent;color:var(--b-muted);font:400 13px/1.5 var(--b-body)} html[data-experience=brand] #paper-form small.phone-preview.phone-preview-ok{background:transparent;color:var(--b-good-ink);font-weight:600} html[data-experience=brand] #paper-form .paper-files{min-width:0;margin:24px 0 0;padding:22px;border:2px dashed var(--b-line-strong);border-radius:20px;background:var(--b-sunken);color:var(--b-ink)} html[data-experience=brand] #paper-form .paper-files.has-files{border-style:solid;border-color:var(--b-good-edge)} html[data-experience=brand] #paper-form .paper-files.has-error{border-color:var(--b-bad-ink)} html[data-experience=brand] #paper-form .paper-files>legend{float:left;width:100%;margin:0 0 6px;padding:0;background:transparent;color:var(--b-ink);font:800 18px/1.3 var(--b-display);letter-spacing:-.01em} html[data-experience=brand] #paper-form .paper-files>legend~*{clear:both} html[data-experience=brand] #paper-form .paper-files-help{margin:0;background:transparent;color:var(--b-ink-2);font:400 14px/1.6 var(--b-body)} html[data-experience=brand] #paper-form .paper-file-list{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none} html[data-experience=brand] #paper-form .paper-file-list:not(:empty){margin-top:14px} html[data-experience=brand] #paper-form .paper-file{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;padding:8px 8px 8px 16px;border:1.5px solid var(--b-good-edge);border-radius:14px;background:var(--b-good-bg);color:var(--b-good-ink)} html[data-experience=brand] #paper-form .paper-file>span{min-width:0;overflow-wrap:anywhere;background:transparent;color:var(--b-good-ink);font:700 14px/1.4 var(--b-body)} html[data-experience=brand] #paper-form .paper-pick{display:block;margin-top:14px;background:transparent;color:var(--b-ink-2);font:600 14px/1.4 var(--b-body)} html[data-experience=brand] #paper-form .paper-pick input[type=file]{display:block;width:100%;max-width:100%;margin:10px 0 0;border-radius:var(--b-r-pill);background:transparent;color:var(--b-ink-2);font:400 14px/1.4 var(--b-body)} html[data-experience=brand] #paper-form .paper-pick input[type=file]::file-selector-button{margin-right:14px;min-height:44px;padding:0 20px;border:0;border-radius:var(--b-r-pill);background:var(--b-brand);color:var(--b-on-brand);font:700 14px/1 var(--b-body);cursor:pointer} html[data-experience=brand] #paper-form button.paper-add{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-top:14px;padding:0 20px;border:2px solid var(--b-brand);border-radius:var(--b-r-pill);background:var(--b-surface);color:var(--b-brand);font:700 15px/1 var(--b-body);cursor:pointer} html[data-experience=brand] #paper-form button.paper-add:hover{background:var(--b-brand);color:var(--b-on-brand)} html[data-experience=brand] #paper-form button.paper-remove{min-height:40px;margin:0;padding:0 16px;border:1.5px solid var(--b-bad-edge);border-radius:var(--b-r-pill);background:var(--b-surface);color:var(--b-bad-ink);font:700 13px/1 var(--b-body);cursor:pointer} html[data-experience=brand] #paper-form button.paper-remove:hover{border-color:var(--b-bad-ink);background:var(--b-bad-bg);color:var(--b-bad-ink)} html[data-experience=brand] #paper-form .paper-files-error:not(:empty){margin:12px 0 0;background:transparent;color:var(--b-bad-ink);font:600 14px/1.5 var(--b-body)} html[data-experience=brand] #paper-form .privacy-upload-notice{margin:14px 4px 0;background:transparent;color:var(--b-muted);font:400 13px/1.5 var(--b-body)} html[data-experience=brand] #paper-form label.consent{position:relative;display:block;margin:24px 0 0;padding:18px 20px 18px 58px;border:1.5px solid var(--b-line);border-radius:var(--b-r-card-sm);background:var(--b-surface);color:var(--b-ink-2);font:400 15px/1.6 var(--b-body);cursor:pointer} html[data-experience=brand] #paper-form label.consent:has(input:checked){border-color:var(--b-brand);background:var(--b-mist);color:var(--b-ink)} html[data-experience=brand] #paper-form label.consent.has-error{border-color:var(--b-bad-ink)} html[data-experience=brand] #paper-form label.consent input{position:absolute;top:20px;left:20px} html[data-experience=brand] #paper-form .fine{margin:20px 0 0;background:transparent;color:var(--b-muted);font-size:13px;line-height:1.6} html[data-experience=brand] #paper-form #paper-error{margin:16px 0 0;background:transparent;color:var(--b-bad-ink);font:600 15px/1.6 var(--b-body)} html[data-experience=brand] #paper-form #paper-error:not(:empty){padding:14px 18px;border:1.5px solid var(--b-bad-edge);border-radius:var(--b-r-card-sm);background:var(--b-bad-bg);color:var(--b-bad-ink)} html[data-experience=brand] #paper-form button[type=submit]{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;margin-top:24px;padding:0 28px;border:2px solid var(--b-brand);border-radius:var(--b-r-pill);background:var(--b-brand);color:var(--b-on-brand);font:700 17px/1.2 var(--b-body);cursor:pointer} html[data-experience=brand] #paper-form button[type=submit]:hover{border-color:var(--b-brand-hover);background:var(--b-brand-hover);color:var(--b-on-brand)} html[data-experience=brand] #paper-form button:disabled{opacity:.55;cursor:not-allowed} html[data-experience=brand] #paper-form .paper-online{margin:16px 0 0;background:transparent;color:var(--b-ink-2);font-size:15px;line-height:1.6} html[data-experience=brand] #paper-form :is(.paper-intro,.fine,.privacy-upload-notice,.consent,.paper-online) a{background:transparent;color:var(--b-brand);font-weight:600;text-underline-offset:3px} html[data-experience=brand] #paper-success{display:flex;flex-direction:column;align-items:flex-start;gap:16px;background:transparent;color:var(--b-ink)} html[data-experience=brand] #paper-success:focus{outline:none} html[data-experience=brand] #paper-success h2{background:transparent;color:var(--b-ink);font:800 40px/44px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] #paper-success #paper-reference:not(:empty){display:inline-flex;padding:10px 18px;border-radius:var(--b-r-pill);background:var(--b-lime);color:var(--b-on-lime);font-weight:700} html[data-experience=brand] #paper-success p{background:transparent;color:var(--b-ink-2);font-size:16px;line-height:1.6} html[data-experience=brand] #paper-success #paper-files-status:not(:empty){padding:16px 20px;border:1.5px solid var(--b-info-edge);border-radius:var(--b-r-card-sm);background:var(--b-info-bg);color:var(--b-ink);font:500 15px/1.6 var(--b-body)} html[data-experience=brand] #paper-success h3{margin-top:8px;background:transparent;color:var(--b-ink);font:800 24px/30px var(--b-display);letter-spacing:-.02em} html[data-experience=brand] #paper-success .next-steps{display:flex;flex-direction:column;gap:16px;margin:0;padding:0;list-style:none;counter-reset:bs-step} html[data-experience=brand] #paper-success .next-steps li{position:relative;padding-left:52px;background:transparent;color:var(--b-ink-2);font-size:16px;line-height:1.6;counter-increment:bs-step} html[data-experience=brand] #paper-success .next-steps li::before{content:counter(bs-step);position:absolute;top:-2px;left:0;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--b-mist);color:var(--b-brand);font:800 16px/1 var(--b-display)} html[data-experience=brand] #paper-success .next-steps b{background:transparent;color:var(--b-ink)} html[data-experience=brand] #paper-success a.button{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 28px;border-radius:var(--b-r-pill);background:var(--b-brand);color:var(--b-on-brand);font:700 16px/1.2 var(--b-body);text-decoration:none} html[data-experience=brand] #paper-success a.button:hover{background:var(--b-brand-hover);color:var(--b-on-brand)} html[data-experience=brand] .bs-site .bs-aside-card .paper-download{display:inline-flex;align-items:center;gap:8px;min-height:44px;background:transparent;color:var(--b-link);font-weight:700;text-underline-offset:4px} html[data-experience=brand] .bs-site .bs-aside-card .paper-download:hover{background:transparent;color:var(--b-brand)} @media (max-width:900px){ html[data-experience=brand] .bs-site .bs-paper-route{grid-template-columns:auto minmax(0,1fr)} html[data-experience=brand] .bs-paper-actions{grid-column:1/-1} } @media (max-width:700px){ html[data-experience=brand] #paper-form .form-grid{grid-template-columns:minmax(0,1fr)} } @media (max-width:600px){ html[data-experience=brand] .bs-site .bs-paper-route{grid-template-columns:minmax(0,1fr);padding:20px} html[data-experience=brand] .bs-site .bs-paper-route .bs-paper-download{width:100%;white-space:normal;text-align:left} html[data-experience=brand] .bs-paper-actions{align-items:stretch} html[data-experience=brand] #paper-form .phone-row>select.phone-country{width:8.5rem} html[data-experience=brand] #paper-form .paper-files{padding:18px 16px} html[data-experience=brand] #paper-form .paper-file{padding-left:12px} html[data-experience=brand] #paper-form button.paper-add{width:100%} html[data-experience=brand] #paper-form button.paper-remove{min-height:44px} html[data-experience=brand] #paper-form button[type=submit]{width:100%} html[data-experience=brand] #paper-form label.consent{padding:16px 16px 16px 50px} html[data-experience=brand] #paper-form label.consent input{top:18px;left:16px} html[data-experience=brand] #paper-success h2{font-size:32px;line-height:36px} html[data-experience=brand] #paper-success #paper-reference:not(:empty){border-radius:var(--b-r-card-sm)} }