/* Steady Private Wealth: the marketing site and the online application.
   Tokens and measurements come from website/design (desktop 1440, mobile
   390). One switch: the mobile layout below 760 px; the desktop layout
   scales between 760 and 1600. */

:root {
  --ground: #0A0A0A;
  --surface: #151515;
  --line: #2A2A2A;
  --line-button: #3A3A3A;
  --line-strong: #4A4A4A;
  --ink-quiet: #9A9A9A;
  --ink-soft: #D9D9D9;
  --ink: #FFFFFF;
  --ivory: #F2F0EA;
  --ivory-muted: #6A6A6A;
  --ivory-line: #D9D5CC;

  /* Side padding: 112 at 1440, never under 32 on the desktop layout. */
  --gutter: clamp(32px, 7.78vw, 112px);
  --section-y: 120px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: Manrope, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, p { margin: 0; }
button { font: inherit; color: inherit; }

/* Copy that differs between the two layouts: .d desktop, .m mobile. */
@media (min-width: 760px) { .m { display: none !important; } }
@media (max-width: 759px) { .d { display: none !important; } }

.k {
  font-size: 11px;
  letter-spacing: 2.5px;
  color: var(--ink-quiet);
  text-transform: uppercase;
}
.wm { letter-spacing: 0.42em; }
.quiet { color: var(--ink-quiet); }
.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 10;
  background: var(--ink); color: var(--ground); padding: 10px 16px; border-radius: 999px;
}
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---- Buttons: pills, 48 px. One primary per section. ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 14px 28px; border-radius: 999px;
  font-size: 14px; line-height: normal; cursor: pointer; text-align: center;
  border: 1px solid var(--line-button); background: transparent; color: var(--ink);
}
.btn-primary {
  background: var(--ink); color: var(--ground); border-color: var(--ink);
  padding: 15px 28px; font-weight: 500; letter-spacing: 0.3px;
}
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.btn-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
@media (max-width: 759px) {
  .btn-row { flex-direction: column; align-items: stretch; gap: 16px; }
  .btn-row .btn, .btn-block-m { width: 100%; }
}

/* ---- Header: floats over the hero. ---- */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: space-between; align-items: center;
  padding: 30px var(--gutter);
}
.brand { display: flex; align-items: center; gap: 14px; }
.brand img { width: 28px; height: auto; }
.brand-words { display: flex; flex-direction: column; gap: 3px; }
.brand-words .wm { font-size: 12px; }
.brand-words .desc { font-size: 9px; letter-spacing: 3px; color: var(--ink-quiet); }
.site-nav { display: flex; gap: 36px; font-size: 13px; color: var(--ink-quiet); }
.site-nav a[aria-current="page"], .site-nav a:hover { color: var(--ink); }
.header-m { display: none; }
@media (max-width: 759px) {
  .site-header { padding: 22px 24px; }
  .brand { gap: 10px; }
  .brand img { width: 22px; }
  .brand-words .desc, .site-nav, .site-header > .btn { display: none; }
  .brand-words .wm { font-size: 11px; }
  .header-m { display: flex; gap: 16px; align-items: center; font-size: 12px; color: var(--ink-soft); }
  .header-m a, .header-m button { padding: 8px 0; margin: -8px 0; }
  .header-m button { background: none; border: 0; cursor: pointer; font-size: 12px; color: var(--ink-soft); }
}

/* Mobile menu */
.menu {
  position: fixed; inset: 0; z-index: 20; background: var(--ground);
  display: flex; flex-direction: column; padding: 22px 24px 36px; gap: 40px;
}
.menu[hidden] { display: none; }
.menu-top { display: flex; justify-content: space-between; align-items: center; }
.menu-top button { background: none; border: 0; padding: 8px 0; color: var(--ink-soft); font-size: 12px; cursor: pointer; }
.menu nav { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.menu nav a {
  padding: 18px 0; border-bottom: 1px solid var(--line);
  font-size: 26px; font-weight: 200; letter-spacing: -0.5px;
}
.menu nav a[aria-current="page"] { color: var(--ink); }
.menu nav a:not([aria-current="page"]) { color: var(--ink-quiet); }

/* ---- Heroes: the photograph full-bleed, nav over it. ---- */
.hero {
  position: relative; overflow: hidden; display: flex; align-items: flex-end;
  min-height: 860px;
}
.hero.short { min-height: 620px; }
.hero picture, .hero picture img, .closing picture, .closing picture img {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.hero picture img, .closing picture img { object-fit: cover; }
.hero .shade, .closing .shade { position: absolute; inset: 0; }
.hero-home .shade { background: linear-gradient(180deg, rgba(10,10,10,1) 0%, rgba(10,10,10,0.55) 28%, rgba(10,10,10,0.1) 60%, rgba(10,10,10,0.95) 100%); }
.hero.short .shade { background: linear-gradient(180deg, rgba(10,10,10,1) 0%, rgba(10,10,10,0.5) 30%, rgba(10,10,10,0.15) 60%, rgba(10,10,10,0.97) 100%); }
.hero-copy {
  position: relative; z-index: 1; padding: 0 var(--gutter) 120px;
  display: flex; flex-direction: column; gap: 28px;
  max-width: calc(920px + 2 * var(--gutter));
}
.hero.short .hero-copy { padding-bottom: 96px; gap: 24px; max-width: calc(900px + 2 * var(--gutter)); }
.hero-copy .k { color: var(--ink); }
.hero h1 {
  font-weight: 200; font-size: clamp(56px, 5.83334vw, 84px);
  letter-spacing: -0.041667em; line-height: 0.98;
}
.hero.short h1 { font-size: clamp(52px, 5.27778vw, 76px); letter-spacing: -0.039474em; line-height: 1.0; }
.hero-copy p { font-size: 20px; line-height: 1.6; color: var(--ink-soft); max-width: 600px; }
.hero.short .hero-copy p { font-size: 19px; }
.hero-copy .btn-row { padding-top: 6px; }
.hero-aside {
  position: absolute; right: var(--gutter); bottom: 120px; z-index: 1;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-end; text-align: right;
}
.hero-aside .line { font-size: 26px; font-weight: 300; letter-spacing: -0.5px; }
.hero-aside .sub { font-size: 13px; color: var(--ink-soft); max-width: 300px; line-height: 1.6; }
@media (max-width: 1100px) { .hero-aside { display: none; } }
@media (max-width: 759px) {
  .hero, .hero.short { min-height: 760px; }
  .hero.short { min-height: 700px; }
  .hero-home .shade, .hero.short .shade { background: linear-gradient(180deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.3) 35%, rgba(10,10,10,0.1) 58%, rgba(10,10,10,0.97) 100%); }
  .hero-copy, .hero.short .hero-copy { padding: 0 24px 40px; gap: 16px; }
  .hero h1, .hero.short h1 { font-size: 42px; letter-spacing: -2px; line-height: 1.0; }
  .hero-copy p, .hero.short .hero-copy p { font-size: 15.5px; }
  .hero-copy .btn-row { padding-top: 0; }
}

/* ---- Strips under the hero ---- */
.strip {
  padding: 48px var(--gutter); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px;
}
.strip > div { display: flex; flex-direction: column; gap: 10px; }
.strip .t { font-size: 24px; font-weight: 300; letter-spacing: -0.5px; line-height: 1.2; }
.strip .s { font-size: 14px; color: var(--ink-quiet); line-height: 1.6; }
.stats {
  padding: 36px var(--gutter); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px;
}
.stats > div { display: flex; flex-direction: column; gap: 6px; }
.stats .n { font-size: 30px; font-weight: 200; letter-spacing: -1px; }
/* The hero's aside, as its own band where the hero is too narrow for it. */
.motto { display: none; }
@media (max-width: 1100px) and (min-width: 760px) {
  .motto { display: flex; flex-direction: column; gap: 8px; padding: 48px var(--gutter); border-bottom: 1px solid var(--line); }
  .motto .line { font-size: 26px; font-weight: 200; letter-spacing: -0.5px; }
  .motto .sub { font-size: 14px; color: var(--ink-quiet); line-height: 1.6; }
}
@media (max-width: 759px) {
  .strip { padding: 32px 24px; grid-template-columns: 1fr; gap: 22px; }
  .strip > div { gap: 6px; }
  .strip .t { font-size: 20px; letter-spacing: 0; line-height: 1.25; }
  .strip .s { font-size: 13.5px; }
  .stats { padding: 28px 24px; grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .stats > div { gap: 4px; }
  .stats .n { font-size: 24px; letter-spacing: 0; }
  .stats .k { font-size: 10px; }
  .motto { display: flex; flex-direction: column; gap: 8px; padding: 40px 24px; }
  .motto .line { font-size: 26px; font-weight: 200; letter-spacing: -0.5px; }
  .motto .sub { font-size: 13.5px; color: var(--ink-quiet); line-height: 1.6; }
}

/* ---- Sections: a label on the left, a big light headline on the right. ---- */
.sec {
  padding: var(--section-y) var(--gutter);
  display: flex; flex-direction: column; gap: 56px;
}
.sec.ivory { background: var(--ivory); color: var(--ground); }
.sec-head {
  display: grid; grid-template-columns: 0.9fr 1.4fr; gap: 48px; align-items: end;
}
.sec-head > div:last-child { display: flex; flex-direction: column; gap: 16px; }
.sec h2 {
  font-weight: 200; font-size: clamp(40px, 3.61112vw, 52px);
  letter-spacing: -0.038462em; line-height: 1.06; max-width: 760px;
}
.sec-head p { font-size: 18px; line-height: 1.6; color: var(--ink-quiet); max-width: 640px; }
.ivory .k, .ivory .sec-head p, .ivory .lead, .ivory .note { color: var(--ivory-muted); }

.two {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; max-width: 1100px; align-items: start;
}
.lead { font-size: 17px; line-height: 1.75; color: var(--ink-quiet); }
.lead.l18 { font-size: 18px; line-height: 1.7; }
.lead.l16 { font-size: 16px; }

/* Hairline-divided rows */
.rows { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.ivory .rows, .ivory .rows > * { border-color: var(--ivory-line); }
.rows > * { border-bottom: 1px solid var(--line); }

.row-num { display: flex; gap: 20px; padding: 18px 0; }
.row-num .k { padding-top: 6px; }
.row-num .t { font-size: 18px; font-weight: 300; }
.row-num .s { font-size: 13.5px; color: var(--ink-quiet); line-height: 1.55; }
.ivory .row-num .s { color: var(--ivory-muted); }
.row-num > div { display: flex; flex-direction: column; gap: 4px; }
.row-num.big { font-size: 20px; font-weight: 300; align-items: flex-start; }
.row-num.big .k { padding-top: 7px; }
.row-num.mid { font-size: 18px; font-weight: 300; }
.row-num.mid17 { font-size: 17px; font-weight: 300; }
.row-num.mid17 .k { padding-top: 5px; }

.row-kv { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; font-size: 15px; }
.row-kv > span:last-child { color: var(--ink-quiet); text-align: right; }
.ivory .row-kv > span:last-child { color: var(--ivory-muted); }
.row-kv.strong { padding: 18px 0; font-size: 16px; }
.row-kv.strong > span:first-child { color: var(--ink-quiet); }
.ivory .row-kv.strong > span:first-child { color: var(--ivory-muted); }
.row-kv.strong > span:last-child { color: inherit; font-weight: 500; }

.qa { padding: 24px 0; display: flex; flex-direction: column; gap: 10px; }
.qa .q { font-size: 18px; font-weight: 300; }
.qa .a { font-size: 14px; line-height: 1.65; color: var(--ink-quiet); }
.qa-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px;
  border-top: 1px solid var(--line); max-width: 1100px;
}
.qa-grid .qa { border-bottom: 1px solid var(--line); }

.price { display: flex; align-items: baseline; gap: 14px; }
.price .n { font-size: 64px; font-weight: 200; letter-spacing: -2.5px; }
.stack22 { display: flex; flex-direction: column; gap: 22px; }

/* Columns: numbered, hairline between */
.cols {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line);
}
.cols.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cols > div {
  padding: 32px 28px 8px; border-left: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 14px;
}
.cols.four > div:nth-child(4n+1), .cols.three > div:nth-child(3n+1) { padding-left: 0; border-left: none; }
.cols.four > div:nth-child(4n), .cols.three > div:nth-child(3n) { padding-right: 0; }
.cols.three > div { padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.cols .t { font-size: 22px; font-weight: 300; letter-spacing: -0.3px; line-height: 1.25; }
.cols .s { font-size: 14.5px; line-height: 1.65; color: var(--ink-quiet); }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.cards > div {
  border: 1px solid var(--line); border-radius: 20px; padding: 28px;
  display: flex; flex-direction: column; gap: 12px; min-height: 256px;
}
.cards .t { font-size: 22px; font-weight: 300; line-height: 1.25; }
.cards .s { font-size: 14.5px; line-height: 1.65; color: var(--ink-quiet); }

@media (max-width: 1100px) and (min-width: 760px) {
  .cols.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols.four > div:nth-child(n) { padding: 32px 28px 28px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .cols.four > div:nth-child(2n+1) { padding-left: 0; border-left: none; }
  .cols.four > div:nth-child(2n) { padding-right: 0; }
  .cols.three, .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols.three > div:nth-child(n) { padding: 32px 28px 28px; border-left: 1px solid var(--line); }
  .cols.three > div:nth-child(2n+1) { padding-left: 0; border-left: none; }
  .cols.three > div:nth-child(2n) { padding-right: 0; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strip { gap: 32px; }
}
@media (max-width: 900px) and (min-width: 760px) {
  .two, .qa-grid { grid-template-columns: 1fr; gap: 40px; }
  .sec-head { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 759px) {
  .sec { padding: 64px 24px; gap: 24px; }
  .sec-head { display: contents; }
  .sec-head > div:last-child { display: contents; }
  .sec h2 { font-size: 34px; letter-spacing: -1.3px; line-height: 1.08; }
  .sec-head p { font-size: 15px; }
  .two { display: contents; }
  .lead, .lead.l18, .lead.l16 { font-size: 15px; line-height: 1.7; }
  .rows > .row-num { gap: 16px; padding: 14px 0; }
  .row-num .k { padding-top: 5px; }
  /* A numbered row with a title and a line under it: the number on top. */
  .rows > .row-num.two-line { flex-direction: column; gap: 8px; padding: 22px 0; }
  .row-num.two-line .k { padding-top: 0; }
  .row-num.two-line > div { gap: 8px; }
  .row-num.two-line .t { font-size: 20px; line-height: 1.25; }
  .row-num.two-line .s { font-size: 14px; line-height: 1.6; }
  .row-num.big, .row-num.mid, .row-num.mid17 { font-size: 17px; }
  .row-num.big .k { padding-top: 5px; }
  .row-kv, .row-kv.strong { gap: 16px; padding: 13px 0; font-size: 14px; }
  .row-kv.strong > span:last-child { font-weight: 400; }
  .price { gap: 12px; }
  .price .n { font-size: 48px; letter-spacing: -2px; }
  .stack22 { display: contents; }
  /* Columns, cards and numbered rows become one list of divided rows. */
  .cols, .cols.three, .cards, .qa-grid {
    display: flex; flex-direction: column; border-top: 1px solid var(--line); gap: 0;
  }
  .ivory .cols, .ivory .cols > div { border-color: var(--ivory-line); }
  .cols > div, .cols.three > div, .cols.four > div:nth-child(n), .cards > div {
    padding: 22px 0; border: none; border-bottom: 1px solid var(--line); border-radius: 0;
    gap: 8px; min-height: 0;
  }
  .ivory .cols > div { border-bottom-color: var(--ivory-line); }
  .cols .t, .cards .t { font-size: 20px; letter-spacing: 0; }
  .cols .s, .cards .s { font-size: 14px; line-height: 1.6; }
  .ivory .cols .s { color: var(--ivory-muted); }
  .qa { padding: 16px 0; gap: 6px; }
  .qa .q { font-size: 16px; }
  .qa .a { font-size: 13.5px; line-height: 1.6; }
}

/* ---- Closing call to action over the sky ---- */
.closing {
  position: relative; overflow: hidden; min-height: 520px;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.closing.tall { min-height: 620px; }
.closing picture img { object-position: center 30%; }
.closing .shade { background: linear-gradient(180deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.35) 50%, rgba(10,10,10,0.95) 100%); }
.closing-copy {
  position: relative; z-index: 1; padding: 0 var(--gutter);
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  max-width: calc(760px + 2 * var(--gutter));
}
.closing.wide .closing-copy { max-width: calc(800px + 2 * var(--gutter)); }
.closing.narrow p { max-width: 520px; }
.closing.tall .closing-copy { gap: 24px; }
.closing-copy img { width: 40px; height: auto; }
.closing h2 { font-weight: 200; font-size: clamp(44px, 4.16667vw, 60px); letter-spacing: -0.041667em; line-height: 1.02; }
.closing.tall h2 { font-size: clamp(48px, 4.44445vw, 64px); letter-spacing: -0.039063em; }
.closing p { font-size: 17px; color: var(--ink-soft); max-width: 540px; line-height: 1.65; }
@media (max-width: 759px) {
  .closing, .closing.tall { min-height: 520px; }
  .closing .shade { background: linear-gradient(180deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.4) 50%, rgba(10,10,10,0.97) 100%); }
  .closing-copy, .closing.tall .closing-copy { padding: 0 24px; gap: 18px; width: 100%; }
  .closing-copy img { width: 32px; }
  .closing h2, .closing.tall h2 { font-size: 38px; letter-spacing: -1.5px; line-height: 1.04; }
  .closing p { font-size: 14px; }
  .closing .btn { width: 100%; }
}

/* ---- Footer: the legal lines on every page ---- */
.site-footer {
  padding: 40px var(--gutter) 48px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px;
  font-size: 12px; color: var(--ink-quiet); line-height: 1.7;
}
.site-footer > div { display: flex; flex-direction: column; gap: 8px; }
.site-footer > div:first-child { gap: 10px; }
.foot-brand { display: flex; align-items: center; gap: 10px; }
.foot-brand img { width: 18px; height: auto; }
.foot-brand .wm { font-size: 11px; color: var(--ink); }
.site-footer a:hover { color: var(--ink); }
.foot-links-m { display: none; }
@media (max-width: 759px) {
  .site-footer { padding: 32px 24px 36px; display: flex; flex-direction: column; gap: 12px; font-size: 11.5px; }
  .site-footer > div:not(:first-child) { display: none; }
  .foot-brand { gap: 8px; }
  .foot-brand img { width: 16px; }
  .foot-brand .wm { font-size: 10px; }
  .foot-links-m { display: flex; gap: 18px; flex-wrap: wrap; }
}

/* ---- Legal pages: the privacy notice and the membership terms ---- */
.legal-head { padding: 168px var(--gutter) 56px; display: flex; flex-direction: column; gap: 20px; border-bottom: 1px solid var(--line); }
.legal-head h1 { font-weight: 200; font-size: clamp(44px, 4.44445vw, 64px); letter-spacing: -0.039063em; line-height: 1.02; }
.legal-head p { font-size: 17px; line-height: 1.65; color: var(--ink-quiet); max-width: 640px; }
.legal { padding: 64px var(--gutter) 120px; max-width: calc(760px + 2 * var(--gutter)); display: flex; flex-direction: column; gap: 16px; }
.legal h2 { font-weight: 300; font-size: 26px; letter-spacing: -0.5px; line-height: 1.25; margin: 40px 0 4px; }
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); }
.legal strong { color: var(--ink); font-weight: 500; }
.legal ul, .legal ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--line); font-size: 14.5px; }
.legal th { text-align: left; font-weight: 400; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ink-quiet); padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); }
.legal td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-soft); line-height: 1.55; }
.legal td:first-child { color: var(--ink); }
.legal .updated { margin-top: 32px; font-size: 13px; color: var(--ink-quiet); }
@media (max-width: 759px) {
  .legal-head { padding: 120px 24px 40px; gap: 14px; }
  .legal-head h1 { font-size: 38px; letter-spacing: -1.5px; line-height: 1.04; }
  .legal-head p { font-size: 15px; }
  .legal { padding: 40px 24px 64px; }
  .legal h2 { font-size: 22px; margin-top: 32px; }
  .legal p, .legal li { font-size: 15px; }
  .legal table, .legal thead, .legal tbody, .legal tr, .legal td { display: block; }
  .legal thead { display: none; }
  .legal tr { border-bottom: 1px solid var(--line); padding: 12px 0; }
  .legal td { border: 0; padding: 2px 0; }
}