/* =========================================================
   Alture Funds — faithful brand recreation (scoped)
   Real tokens pulled from alturefunds.com:
   green #0A5840 · gold #C4AF84 · cream #FAF6EA · ink #013830
   type: Metropolis (sans) + Gambetta (serif display)
   Scoped under .alture so it never leaks into the DS site.
   ========================================================= */

.alture {
  --al-green:    #0A5840;
  --al-green-d:  #013830;
  --al-green-d2: #004238;
  --al-green-m:  #2B8677;
  --al-gold:     #C4AF84;
  --al-gold-d:   #B89F6B;
  --al-gold-l:   #E2D8C2;
  --al-gold-50:  #F8F5F0;
  --al-cream:    #FAF6EA;
  --al-mint:     #E6EEEC;
  --al-white:    #FFFFFF;
  --al-ink:      #111111;
  --al-gray:     #717171;
  --al-gray-l:   #C8C8C8;
  --al-pos:      #0A5840;
  --al-neg:      #B71B1C;

  --al-serif: 'Gambetta', Georgia, 'Times New Roman', serif;
  --al-sans:  'Metropolis', -apple-system, 'Segoe UI', sans-serif;

  font-family: var(--al-sans);
}

/* ---- shared frame chrome (browser bar) ---- */
.al-mock {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--al-cream);
  color: var(--al-ink);
  overflow: hidden;
}
.al-chrome {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  background: var(--al-white);
  border-bottom: 1px solid #ededed;
}
.al-chrome__dots { display: flex; gap: 5px; }
.al-chrome__dots i { width: 9px; height: 9px; border-radius: 50%; background: #d6d6d6; display: block; }
.al-chrome__url {
  flex: 1;
  margin-left: 8px;
  background: var(--al-cream);
  border-radius: 6px;
  padding: 5px 12px;
  font: 500 10px/1 var(--al-sans);
  letter-spacing: 0.02em;
  color: var(--al-gray);
}

/* ================= MARKETING SITE ================= */
.al-site { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.al-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 26px;
  background: var(--al-cream);
}
.al-wordmark {
  font: 500 17px/1 var(--al-serif);
  letter-spacing: 0.01em;
  color: var(--al-green-d);
}
.al-nav__links {
  display: flex; gap: 22px;
  font: 500 11px/1 var(--al-sans);
  letter-spacing: 0.02em;
  color: var(--al-green-d);
}
.al-nav__cta {
  font: 600 11px/1 var(--al-sans);
  letter-spacing: 0.02em;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--al-green);
  color: var(--al-white);
}

.al-hero {
  padding: 30px 36px 22px;
  display: grid; gap: 14px;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--al-mint), transparent 55%),
    var(--al-cream);
}
.al-hero__eyebrow {
  font: 600 10px/1 var(--al-sans);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--al-gold-d);
}
.al-hero__title {
  font: 400 clamp(26px, 4.4vw, 46px)/1.02 var(--al-serif);
  letter-spacing: -0.01em;
  color: var(--al-green-d);
  max-width: 18ch;
}
.al-hero__title em { font-style: italic; color: var(--al-gold-d); }
.al-hero__sub {
  font: 400 13px/1.5 var(--al-sans);
  color: var(--al-gray);
  max-width: 46ch;
}
.al-hero__cta {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: start;
  font: 600 12px/1 var(--al-sans);
  letter-spacing: 0.02em;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--al-green);
  color: var(--al-white);
  margin-top: 4px;
}

.al-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #e7e3d6;
  border-top: 1px solid #e7e3d6;
}
.al-pillar {
  background: var(--al-white);
  padding: 18px 18px 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.al-pillar__name {
  font: 500 13px/1 var(--al-sans);
  letter-spacing: 0.01em;
  color: var(--al-green-d);
}
.al-pillar__return {
  font: 400 30px/1 var(--al-serif);
  letter-spacing: -0.01em;
  color: var(--al-green);
}
.al-pillar__return small {
  display: block;
  font: 600 8px/1.4 var(--al-sans);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--al-gold-d);
  margin-top: 4px;
}
.al-pillar__desc {
  font: 400 10px/1.45 var(--al-sans);
  color: var(--al-gray);
  margin-top: auto;
}
.al-pillar__soon {
  align-self: flex-start;
  font: 600 7px/1 var(--al-sans);
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 999px;
  background: var(--al-gold-l); color: var(--al-green-d);
}

/* ================= DASHBOARD ================= */
.al-dash {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 168px 1fr;
  background: var(--al-cream);
  color: var(--al-ink);
  overflow: hidden;
  font-family: var(--al-sans);
}
.al-side {
  background: var(--al-green-d);
  color: var(--al-cream);
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.al-side__brand {
  font: 500 16px/1 var(--al-serif);
  color: var(--al-white);
  margin-bottom: 18px;
}
.al-side__brand b { color: var(--al-gold); }
.al-side__link {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px;
  border-radius: 7px;
  font: 500 11px/1 var(--al-sans);
  letter-spacing: 0.02em;
  color: rgba(250, 246, 234, 0.66);
}
.al-side__link::before {
  content: ''; width: 13px; height: 13px; border-radius: 3px;
  border: 1.4px solid currentColor; flex-shrink: 0;
}
.al-side__link--active {
  background: rgba(196, 175, 132, 0.16);
  color: var(--al-white);
}
.al-side__link--active::before { background: var(--al-gold); border-color: var(--al-gold); }
.al-side__concierge {
  margin-top: auto;
  padding: 12px;
  border-radius: 9px;
  background: rgba(196, 175, 132, 0.14);
  border: 1px solid rgba(196, 175, 132, 0.3);
}
.al-side__concierge h6 {
  margin: 0 0 4px;
  font: 600 8px/1 var(--al-sans);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--al-gold);
}
.al-side__concierge p {
  margin: 0; font: 400 10px/1.4 var(--al-sans);
  color: rgba(250, 246, 234, 0.78);
}

.al-main { padding: 20px 26px; display: flex; flex-direction: column; gap: 16px; min-width: 0; overflow: hidden; }
.al-main__top { display: flex; align-items: flex-start; justify-content: space-between; }
.al-main__hello { font: 400 13px/1 var(--al-serif); color: var(--al-gray); margin-bottom: 8px; }
.al-main__value { font: 400 clamp(34px, 5vw, 48px)/0.95 var(--al-serif); letter-spacing: -0.015em; color: var(--al-green-d); }
.al-main__delta { font: 600 11px/1 var(--al-sans); letter-spacing: 0.02em; color: var(--al-green); margin-top: 6px; }
.al-invest-btn {
  font: 600 11px/1 var(--al-sans); letter-spacing: 0.02em;
  padding: 11px 18px; border-radius: 999px;
  background: var(--al-green); color: var(--al-white);
}

.al-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; min-height: 0; }

/* allocation card (donut) */
.al-card {
  background: var(--al-white);
  border: 1px solid #eceae1;
  border-radius: 12px;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.al-card__title {
  font: 600 9px/1 var(--al-sans);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--al-gray);
}
.al-alloc-row { display: flex; align-items: center; gap: 16px; }
.al-donut { width: 92px; height: 92px; flex-shrink: 0; }
.al-legend { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.al-legend__item { display: grid; grid-template-columns: 9px 1fr auto; gap: 8px; align-items: center; font: 500 11px/1 var(--al-sans); color: var(--al-ink); }
.al-legend__item i { width: 9px; height: 9px; border-radius: 2px; }
.al-legend__pct { color: var(--al-gray); font-variant-numeric: tabular-nums; }

/* holdings list */
.al-holding {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 12px; align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid #f0ede4;
  font: 500 11px/1.2 var(--al-sans);
}
.al-holding:last-child { border-bottom: 0; }
.al-holding__name { color: var(--al-ink); }
.al-holding__name small { display: block; color: var(--al-gray); font-weight: 400; font-size: 9px; margin-top: 2px; }
.al-holding__v { color: var(--al-green-d); font-variant-numeric: tabular-nums; }
.al-holding__ret { color: var(--al-green); font-size: 10px; font-variant-numeric: tabular-nums; }

/* recurring schedule strip */
.al-recurring {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--al-mint);
  border: 1px solid #d8e4e0;
  border-radius: 12px;
  padding: 14px 18px;
}
.al-recurring__l { display: flex; flex-direction: column; gap: 3px; }
.al-recurring__label { font: 600 9px/1 var(--al-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--al-green-m); }
.al-recurring__main { font: 400 16px/1 var(--al-serif); color: var(--al-green-d); }
.al-recurring__sub { font: 400 10px/1 var(--al-sans); color: var(--al-gray); }
.al-recurring__pill {
  font: 600 9px/1 var(--al-sans); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px; background: var(--al-green); color: var(--al-white);
}

/* ================= iOS APP (Webapp v2.0) ================= */
/* Light Alture-branded mobile screens. Pair with .phone frame. */
.al-phones {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(16px, 3vw, 40px);
  padding: 24px;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--al-mint), transparent 60%),
    var(--al-cream);
  overflow: hidden;
}
.al-screen { background: var(--al-cream) !important; }
.al-app {
  flex: 1; display: flex; flex-direction: column;
  padding: 26px 14px 0; min-height: 0; overflow: hidden;
  font-family: var(--al-sans); color: var(--al-ink);
}
.al-app__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.al-app__hi { font: 500 14px/1 var(--al-serif); color: var(--al-green-d); }
.al-app__av { width: 22px; height: 22px; border-radius: 50%; background: var(--al-green); }
.al-app__label { font: 600 8px/1 var(--al-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--al-gray); margin-bottom: 5px; }
.al-app__balance { font: 400 38px/0.95 var(--al-serif); letter-spacing: -0.01em; color: var(--al-green-d); }
.al-app__delta { font: 600 10px/1 var(--al-sans); color: var(--al-green); margin-top: 5px; }
.al-app__chart { width: 100%; height: 44px; margin: 12px 0; display: block; }
.al-app__divi {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--al-mint); border-radius: 10px; padding: 10px 13px; margin-bottom: 12px;
  font: 500 10px/1.3 var(--al-sans); color: var(--al-gray);
}
.al-app__divi b { color: var(--al-green-d); font-weight: 600; }
.al-hold2 { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #ece9df; }
.al-hold2:last-child { border-bottom: 0; }
.al-hold2__n { font: 600 11px/1.3 var(--al-sans); color: var(--al-ink); }
.al-hold2__n small { display: block; color: var(--al-gray); font-weight: 400; font-size: 9px; margin-top: 1px; }
.al-hold2__v { text-align: right; }
.al-hold2__v b { display: block; font: 600 12px/1 var(--al-sans); color: var(--al-green-d); }
.al-hold2__v span { font: 500 9px/1 var(--al-sans); color: var(--al-green); }
.al-tabs {
  margin-top: auto; display: flex; justify-content: space-around;
  padding: 10px 6px 14px; border-top: 1px solid #ece9df; background: var(--al-white); flex-shrink: 0;
}
.al-tab { font: 600 7px/1 var(--al-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--al-gray-l); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.al-tab::before { content: ''; width: 13px; height: 13px; border-radius: 4px; border: 1.4px solid currentColor; }
.al-tab--on { color: var(--al-green); }

.al-prod { border: 1px solid #e7e3d6; border-radius: 11px; padding: 13px; margin-bottom: 10px; background: var(--al-white); }
.al-prod__tag { font: 600 8px/1 var(--al-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--al-gold-d); }
.al-prod__name { font: 500 14px/1.1 var(--al-serif); color: var(--al-green-d); margin: 4px 0 8px; }
.al-prod__rate { font: 400 26px/1 var(--al-serif); color: var(--al-green); }
.al-prod__rate small { font: 600 8px/1.3 var(--al-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--al-gray); display: block; margin-top: 3px; }
.al-prod__meta { font: 500 9px/1.5 var(--al-sans); color: var(--al-gray); margin-top: 8px; }
.al-prod__cta { display: block; text-align: center; margin-top: 11px; font: 600 10px/1 var(--al-sans); letter-spacing: 0.04em; padding: 10px; border-radius: 999px; background: var(--al-green); color: var(--al-white); }

.al-app__cta { margin: auto 0 14px; text-align: center; font: 600 11px/1 var(--al-sans); letter-spacing: 0.04em; padding: 13px; border-radius: 999px; background: var(--al-green); color: var(--al-white); }
.al-amt { display: flex; gap: 8px; margin: 10px 0; }
.al-amt span { flex: 1; text-align: center; padding: 12px 0; border: 1px solid #e7e3d6; border-radius: 8px; font: 500 12px/1 var(--al-sans); color: var(--al-green-d); }
.al-amt span.on { background: var(--al-green); color: var(--al-white); border-color: var(--al-green); }
.al-opt { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #ece9df; font: 500 12px/1 var(--al-sans); color: var(--al-ink); }
.al-opt__sw { width: 30px; height: 18px; border-radius: 999px; background: var(--al-green); position: relative; }
.al-opt__sw::after { content: ''; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }

/* =========================================================
   Realistic iPhone frame for real exported screens.
   Sized by HEIGHT so the screen keeps true aspect (no skew);
   lives in a stage that grows to fit (not a fixed 16:9 box).
   ========================================================= */
.al-screens-stage {
  background:
    radial-gradient(120% 90% at 50% 0%, #073f34, transparent 60%),
    #02231E;
  border: 1px solid #0a3a30;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  gap: clamp(24px, 5vw, 72px);
  padding: clamp(36px, 6vw, 72px) clamp(20px, 4vw, 48px);
  flex-wrap: wrap;
  position: relative;
}

/* The SCREEN drives sizing: exactly a 375 x 812 viewport (the size of
   the provided 750x1624 @2x exports). Width is definite, height from
   aspect-ratio — robust in every browser. The frame wraps it. The
   exports already include the iOS status bar + Dynamic Island + nav,
   so the frame adds only the bezel — no synthetic overlays. */
.iphone {
  --bez: 9px;
  flex: 0 0 auto;
  position: relative;
  display: inline-block;
  background: linear-gradient(155deg, #34343a 0%, #141417 42%, #0a0a0c 100%);
  padding: var(--bez);
  border-radius: 56px;
  box-shadow:
    0 34px 70px -24px rgba(0,0,0,0.72),
    0 0 0 2px #050506,
    inset 0 0 0 1px rgba(255,255,255,0.07);
}
/* side buttons */
.iphone::before {
  content: ''; position: absolute; left: -2px; top: 19%;
  width: 2px; height: 5%; background: #16161a; border-radius: 2px 0 0 2px;
  box-shadow: 0 8% 0 #16161a, 0 17% 0 #16161a;
}
.iphone::after {
  content: ''; position: absolute; right: -2px; top: 28%;
  width: 2px; height: 10%; background: #16161a; border-radius: 0 2px 2px 0;
}
.iphone__screen {
  position: relative;
  width: clamp(248px, 28vw, 318px);   /* the 375pt screen, scaled */
  aspect-ratio: 375 / 812;
  border-radius: 47px;
  overflow: hidden;
  background: var(--al-cream);
}
.iphone__scroll {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.iphone__scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.iphone__scroll > img {
  display: block;
  width: 100%;
  height: auto;          /* never force height — preserves true aspect */
}
.iphone__cap {
  position: absolute; left: 0; right: 0; bottom: -26px;
  text-align: center;
  font: 600 8px/1 var(--al-sans);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--al-gold-d);
}
.iphone__cap span { color: var(--al-green-m); }
@media (max-width: 700px) {
  .iphone { --bez: 7px; border-radius: 46px; }
  .iphone__screen { width: clamp(210px, 64vw, 280px); border-radius: 38px; }
  .al-screens-stage { gap: 28px; }
}

/* Scrollable iPhone container holding a tall exported screen design */
.phone--scroll .phone__screen {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--al-gold) transparent;
  background: var(--al-cream);
}
.phone--scroll .phone__screen::-webkit-scrollbar { width: 4px; }
.phone--scroll .phone__screen::-webkit-scrollbar-track { background: transparent; }
.phone--scroll .phone__screen::-webkit-scrollbar-thumb { background: var(--al-gold); border-radius: 999px; }
.phone__longshot { width: 100%; height: auto; display: block; background: var(--al-cream); }
.phone__scrollhint {
  position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%);
  font: 600 8px/1 var(--al-sans); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--al-gold-d); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.phone__scrollhint::after { content: '↕'; font-size: 11px; }

/* =========================================================
   Desktop browser window for the 1440x810 web-app exports.
   Screen is exactly a 1440:810 viewport; taller exports scroll.
   ========================================================= */
.al-desk-stage {
  display: flex; flex-direction: column;
  gap: clamp(28px, 4vw, 56px);
  max-width: 1120px; margin: 0 auto;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--al-mint), transparent 60%),
    var(--al-cream);
  border: 1px solid #e7e3d6;
  border-radius: 6px;
  padding: clamp(32px, 5vw, 64px) clamp(20px, 4vw, 56px);
}
.browser {
  width: 100%;
  border-radius: 11px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e0dccf;
  box-shadow: 0 30px 64px -30px rgba(0,0,0,0.45);
  position: relative;
}
.browser__bar {
  height: 42px;
  background: #efeadf;
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid #e0dccf;
}
.browser__dots { display: flex; gap: 7px; flex-shrink: 0; }
.browser__dots i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.browser__dots i:nth-child(1) { background: #ec6a5e; }
.browser__dots i:nth-child(2) { background: #f3bf4f; }
.browser__dots i:nth-child(3) { background: #61c554; }
.browser__url {
  flex: 1; max-width: 440px; margin: 0 auto;
  background: #fff; border: 1px solid #e0dccf; border-radius: 7px;
  padding: 6px 14px;
  font: 500 11px/1 var(--al-sans);
  letter-spacing: 0.02em;
  color: var(--al-gray);
  text-align: center;
}
.browser__screen {
  aspect-ratio: 1440 / 810;     /* the desktop viewport */
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none;
  background: var(--al-cream);
}
.browser__screen::-webkit-scrollbar { display: none; width: 0; height: 0; }
.browser__screen > img { display: block; width: 100%; height: auto; }
.browser__cap {
  position: absolute; left: 0; right: 0; bottom: -24px;
  text-align: center;
  font: 600 8px/1 var(--al-sans);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--al-gold-d);
}
.browser__cap span { color: var(--al-green-m); }
.al-desk-2up { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 44px); }
@media (max-width: 760px) { .al-desk-2up { grid-template-columns: 1fr; gap: 44px; } }

/* Real screenshot inside a phone frame (exported from the Figma) */
.phone__shot {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  background: var(--al-cream);
}
.phone__tag {
  position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%);
  font: 600 8px/1 var(--al-sans);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--al-gold-d);
  white-space: nowrap;
}

/* ---- home thumb scaling ---- */
.thumb-fit .al-dash { grid-template-columns: 120px 1fr; }
.thumb-fit .al-main { padding: 14px 16px; gap: 10px; }
.thumb-fit .al-side { padding: 12px 10px; }
.thumb-fit .al-grid { display: none; }