:root {
  color-scheme: light;
  --v3-blue: #00bfff;
  --v3-ink: #10202c;
  --v3-muted: #6b7781;
  --v3-line: #e6ebee;
  --v3-soft: #f7f9fa;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--v3-ink);
  background: #fff;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  background: #fff;
}

a {
  color: inherit;
}

.v3-shell {
  width: min(100% - 64px, 1440px);
  margin-inline: auto;
}

.v3-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid #f0f2f3;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}

.v3-header.is-scrolled {
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 3px 12px rgba(30, 50, 62, 0.045);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.v3-nav {
  position: relative;
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.v3-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--v3-ink);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.045em;
  text-decoration: none;
  white-space: nowrap;
}

.v3-brand img {
  display: block;
  width: 31px;
  height: 28px;
  object-fit: contain;
}

.v3-nav-links {
  display: flex;
  align-items: center;
  gap: clamp(22px, 3vw, 42px);
}

.v3-nav-links a {
  color: #4a5660;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color 160ms ease;
}

.v3-nav-links a:hover {
  color: var(--v3-ink);
}

.v3-nav-links a[aria-current="page"] {
  color: #087fa8;
}

.v3-nav-links a:focus-visible,
.v3-brand:focus-visible {
  border-radius: 3px;
  outline: 2px solid var(--v3-blue);
  outline-offset: 5px;
}

.v3-menu-toggle {
  display: none;
}

.v3-scroll-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.v3-main {
  overflow: clip;
}

.v3-footer {
  padding-block: 48px;
  border-top: 1px solid var(--v3-line);
  background: var(--v3-soft);
  color: var(--v3-muted);
}

.v3-footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 48px;
  align-items: start;
}

.v3-footer-note {
  margin: 16px 0 12px;
  font-size: 14px;
  line-height: 1.6;
}

.v3-footer small {
  font-size: 12px;
}

.v3-footer nav {
  display: grid;
  gap: 14px;
}

.v3-footer h2 {
  margin: 0 0 4px;
  color: var(--v3-ink);
  font-size: 13px;
  font-weight: 650;
}

.v3-footer nav a {
  min-height: 24px;
  font-size: 13px;
  text-decoration: none;
}

.v3-footer nav a:hover {
  color: var(--v3-ink);
}

.v3-footer nav a:focus-visible {
  outline: 2px solid var(--v3-blue);
  outline-offset: 4px;
}

.v3-brand-hero {
  --v3-closing-blue: #1674ce;
  border-bottom: 1px solid #f0f2f3;
  background: #fdfefe;
}

.v3-brand-hero-layout {
  display: grid;
  width: min(100% - 64px, 1240px);
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 44px);
  padding-block: clamp(32px, 4.5vh, 52px) clamp(40px, 5.5vh, 64px);
}

.v3-brand-hero-copy {
  position: relative;
  z-index: 1;
}

.v3-brand-hero-eyebrow {
  margin: 0 0 28px;
  color: #087fa8;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.16em;
}

.v3-brand-hero h1 {
  margin: 0;
  font-size: clamp(3rem, 5vw, 4.4rem);
  font-weight: 560;
  letter-spacing: -0.078em;
  line-height: 1.02;
}

.v3-brand-hero-lead {
  max-width: 490px;
  margin: 30px 0 34px;
  color: #53616b;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
}

.v3-brand-visual {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 600 / 560;
  justify-self: end;
  isolation: isolate;
  pointer-events: none;
}

.v3-investing-world {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.v3-world-data,
.v3-world-positive {
  fill: #476c88;
  font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: -0.02em;
}

.v3-world-positive { fill: #348d7d; }
.v3-world-ticker { fill: #244f70; font-weight: 650; }
.v3-world-balance { fill: #1f4867; font: 600 27px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: -0.04em; }
.v3-world-gain { font-size: 13px; }

.v3-world-market-position { transform: translate(4px, 40px); }
.v3-world-property-position { transform: translate(10px, 10px); }
.v3-world-editorial-position { transform: translate(6px, 36px); }
.v3-world-portfolio-position { transform: translate(8px, -38px); }
.v3-world-people-position { transform: translate(-22px, -30px); }

/* Depth: far layer barely moves, the investor is calm, upright modules circle gently. */
.v3-world-far { animation: v3-world-far 27s ease-in-out infinite; }
.v3-world-investor-figure { animation: v3-world-breathe 21s ease-in-out -6s infinite; }
.v3-world-market { animation: v3-world-module-orbit 17s linear -5s infinite; }
.v3-world-property { animation: v3-world-module-orbit 21s linear -8s infinite; }
.v3-world-portfolio { animation: v3-world-module-orbit 13s linear -4s infinite; }
.v3-world-editorial { animation: v3-world-module-orbit 17s linear -9s infinite; }
.v3-world-mates { animation: v3-world-module-orbit 27s linear -11s infinite; }
.v3-world-market-trace { stroke-dasharray: 12 88; animation: v3-world-trace 9s linear infinite; }
.v3-world-market-point { animation: v3-world-point 9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.v3-world-property-note { animation: v3-world-note 21s ease-in-out -8s infinite; }
.v3-world-editorial-lines { animation: v3-world-ink 11s ease-in-out -3s infinite; }

/* Organic connections that surface, carry a pulse toward the investor, then dissolve. */
.v3-world-link { stroke: #79acd0; stroke-width: 1.6; opacity: 0; animation: v3-world-link 13s ease-in-out infinite; }
.v3-world-pulse { stroke: #1674ce; stroke-width: 3; stroke-dasharray: 0.1 99.9; stroke-dashoffset: 0; opacity: 0; animation: v3-world-pulse 13s ease-in-out infinite; }
.v3-world-link--property, .v3-world-pulse--property { animation-duration: 13s; animation-delay: -2s; }
.v3-world-link--market, .v3-world-pulse--market { animation-duration: 9s; animation-delay: -1s; }
.v3-world-link--news, .v3-world-pulse--news { animation-duration: 27s; animation-delay: -15s; }
.v3-world-link--mates, .v3-world-pulse--mates { animation-duration: 17s; animation-delay: -6s; }
.v3-world-link--portfolio, .v3-world-pulse--portfolio { animation-duration: 21s; animation-delay: -12s; }
.v3-world-pulse--mates { stroke: #309982; }

/* Two matched half-orbits carry one spark behind and then in front of the investor. */
.v3-world-orbit-trail,
.v3-world-orbit-spark { animation: v3-world-orbit-flow 12s linear infinite; }
.v3-world-orbit-trail { stroke: #7fbbe6; stroke-width: 3; stroke-dasharray: 7 193; opacity: .55; }
.v3-world-orbit-spark { stroke: #1674ce; stroke-width: 5; stroke-dasharray: .1 199.9; }
.v3-world-orbit--back { opacity: .45; }
.v3-world-orbit--back .v3-world-orbit-trail,
.v3-world-orbit--back .v3-world-orbit-spark { animation-delay: -6s; }

.v3-world-person { transform-box: fill-box; transform-origin: center; }
.v3-world-person--one { animation: v3-world-person 13s ease-in-out -2s infinite; }
.v3-world-person--two { animation: v3-world-person 13s ease-in-out -6s infinite; }
.v3-world-person--three { animation: v3-world-person 13s ease-in-out -10s infinite; }
.v3-world-person-ring { animation: v3-world-ring 17s ease-in-out -6s infinite; transform-box: fill-box; transform-origin: center; }
.v3-world-reaction { animation: v3-world-reaction 17s ease-in-out -6s infinite; }

@keyframes v3-world-far {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-3px, 2px); }
}

@keyframes v3-world-breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes v3-world-module-orbit {
  0%, 100% { transform: translate(28px, 0); }
  12.5% { transform: translate(20px, 13px); }
  25% { transform: translate(0, 18px); }
  37.5% { transform: translate(-20px, 13px); }
  50% { transform: translate(-28px, 0); }
  62.5% { transform: translate(-20px, -13px); }
  75% { transform: translate(0, -18px); }
  87.5% { transform: translate(20px, -13px); }
}

@keyframes v3-world-orbit-flow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -200; }
}

@keyframes v3-world-trace {
  from { stroke-dashoffset: 12; }
  to { stroke-dashoffset: -88; }
}

@keyframes v3-world-point {
  0%, 100% { transform: scale(1); opacity: .8; }
  50% { transform: scale(1.4); opacity: 1; }
}

@keyframes v3-world-note {
  0%, 15%, 85%, 100% { opacity: .2; }
  30%, 65% { opacity: 1; }
}

@keyframes v3-world-ink {
  0%, 100% { opacity: .55; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

@keyframes v3-world-link {
  0%, 12%, 88%, 100% { opacity: .35; }
  35%, 65% { opacity: .8; }
}

@keyframes v3-world-pulse {
  0%, 20% { stroke-dashoffset: 0; opacity: 0; }
  28% { opacity: .9; }
  72% { opacity: .9; }
  80%, 100% { stroke-dashoffset: -99.9; opacity: 0; }
}

@keyframes v3-world-person {
  0%, 40%, 100% { transform: translateY(0); }
  55%, 70% { transform: translateY(-4px); }
}

@keyframes v3-world-ring {
  0%, 60%, 100% { opacity: .1; transform: scale(1); }
  76% { opacity: .65; transform: scale(1.08); }
  90% { opacity: 0; transform: scale(1.2); }
}

@keyframes v3-world-reaction {
  0%, 74%, 100% { opacity: 0; transform: translateY(4px); }
  80%, 94% { opacity: 1; transform: translateY(0); }
}

.v3-brand-hero.is-paused .v3-brand-visual *,
.v3-brand-hero.is-paused .v3-brand-visual *::before,
.v3-brand-hero.is-paused .v3-brand-visual *::after {
  animation-play-state: paused;
}

.v3-product-heading {
  margin-bottom: 65px;
}

.v3-product-heading h2 {
  max-width: 820px;
  margin: 16px 0 0;
  font-size: clamp(2.6rem, 5vw, 4.5rem);
  font-weight: 560;
  letter-spacing: -0.075em;
  line-height: 1.03;
}

@media (max-width: 900px) {
  .v3-brand-hero-layout {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding-block: 52px 56px;
  }

  .v3-brand-hero h1 {
    font-size: clamp(3rem, 11vw, 3.625rem);
  }

  .v3-brand-hero-lead {
    max-width: 440px;
    margin-block: 23px 12px;
    font-size: 16px;
  }

  .v3-brand-visual {
    max-width: 560px;
    justify-self: center;
  }

  .v3-product-heading {
    margin-bottom: 40px;
  }
}

@media (max-width: 600px) {
  .v3-brand-hero-layout {
    padding-block: 48px 28px;
  }

  .v3-footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
  }

  .v3-footer-inner > div {
    grid-column: 1 / -1;
  }

  .v3-footer nav a {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
  }

  .v3-brand-visual {
    width: calc(100vw - 24px);
    max-width: 440px;
    aspect-ratio: 600 / 560;
  }

  .v3-world-secondary { display: none; }
  .v3-world-data, .v3-world-positive { font-size: 16px; }
  .v3-world-balance { font-size: 32px; }
  .v3-world-gain { font-size: 16px; }
  .v3-world-market-position { transform: translate(-18px, 40px) scale(1.06); transform-origin: 400px 128px; }
  .v3-world-property-position { transform: translate(14px, 10px) scale(1.14); transform-origin: 112px 220px; }
  .v3-world-editorial-position { transform: translate(-2px, 34px) scale(1.04); transform-origin: 440px 320px; }
  .v3-world-portfolio-position { transform: translate(8px, -38px) scale(1.04); transform-origin: 128px 476px; }
  .v3-world-people-position { transform: translate(-40px, -40px) scale(1.18); transform-origin: 500px 456px; }
}

@media (prefers-reduced-motion: reduce) {
  .v3-brand-hero.is-playing .v3-brand-hero-copy,
  .v3-brand-visual *,
  .v3-brand-visual *::before,
  .v3-brand-visual *::after {
    animation: none !important;
    transition: none !important;
  }

  .v3-world-market-trace,
  .v3-world-pulse,
  .v3-world-orbit-trail,
  .v3-world-orbit-spark {
    display: none;
  }

  .v3-world-link { opacity: .55; }
  .v3-world-reaction { opacity: 0; }
}

.v3-hero {
  padding-top: clamp(76px, 8.5vw, 124px);
  padding-bottom: 88px;
}

.v3-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.34fr);
  align-items: end;
  gap: 36px;
  margin-bottom: clamp(76px, 8vw, 116px);
}

.v3-intro h1 {
  max-width: 1000px;
  margin: 0;
  color: var(--v3-ink);
  font-size: clamp(4.4rem, 7.25vw, 6.8rem);
  font-weight: 560;
  letter-spacing: -0.083em;
  line-height: 0.96;
}

.v3-intro h1 span {
  display: block;
}

.v3-intro h1 em {
  color: #0093cc;
  font-style: normal;
}

.v3-supporting-copy {
  max-width: 330px;
  margin: 0 0 7px;
  color: #53616b;
  font-size: 17px;
  line-height: 1.55;
}

.v3-ecosystem {
  display: grid;
  grid-template-columns: minmax(0, 2.5fr) minmax(235px, 0.9fr);
  grid-template-areas: "stage social";
  align-items: center;
  gap: clamp(38px, 4.2vw, 60px);
}

.v3-stage {
  position: relative;
  min-width: 0;
  padding: 24px 0;
  isolation: isolate;
}

.v3-section-label,
.v3-overline {
  margin: 0;
  color: #7c8992;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.13em;
}

.v3-information > .v3-section-label {
  margin-bottom: 12px;
}

.v3-portfolio-sub {
  margin: 5px 0 0;
  color: #8d989e;
  font-size: 11.5px;
  letter-spacing: -0.005em;
}

.v3-connection-lines {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: #cbd8de;
  stroke-linecap: round;
  stroke-width: 1.5;
}

.v3-connection-link circle {
  fill: #9ab4c0;
  stroke: none;
}

.v3-connection-link {
  opacity: 0.72;
  transition: opacity 220ms ease;
}

.v3-connection-link path {
  transition: stroke 220ms ease, stroke-width 220ms ease;
}

.v3-connection-link circle {
  transition: fill 220ms ease;
}

.v3-connection-link.is-active {
  opacity: 1;
}

.v3-connection-link.is-active path {
  stroke: #55aeca;
  stroke-width: 2.3;
}

.v3-connection-link.is-active circle {
  fill: #168bb4;
}

.v3-connections {
  position: absolute;
  inset: 24px 0;
  z-index: 2;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v3-broker-item {
  position: absolute;
  width: clamp(132px, 10.75vw, 155px);
}

.v3-broker-item:nth-child(1) {
  top: 8%;
  left: 0;
}

.v3-broker-item:nth-child(2) {
  top: 38%;
  left: 0;
  transform: translateY(-50%);
}

.v3-broker-item:nth-child(3) {
  top: 62%;
  left: 0;
  transform: translateY(-50%);
}

.v3-broker-item:nth-child(4) {
  top: 92%;
  left: 0;
  transform: translateY(-100%);
}

.v3-broker {
  position: relative;
  display: flex;
  width: 100%;
  height: clamp(46px, 3.6vw, 52px);
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid #e9eef0;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(30, 50, 62, 0.045);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.v3-broker:hover {
  border-color: #dbe7eb;
}

.v3-broker:focus-visible,
.v3-source-selectors button:focus-visible {
  outline: 2px solid #0089b9;
  outline-offset: 3px;
}

.v3-broker[aria-pressed="true"] {
  border-color: #b9dfeb;
  background: #fbfeff;
  box-shadow: 0 5px 16px rgba(30, 92, 115, 0.09);
}

.v3-broker-logo {
  display: flex;
  width: 100%;
  height: 100%;
  max-width: 132px;
  align-items: center;
  justify-content: center;
}

.v3-broker-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

.v3-broker[data-broker="commsec"] .v3-broker-logo img {
  max-width: 122px;
  max-height: 95%;
}

.v3-broker[data-broker="stake"] .v3-broker-logo img {
  max-width: 102px;
  max-height: 90%;
}

.v3-broker[data-broker="etoro"] .v3-broker-logo img {
  max-width: 104px;
  max-height: 82%;
}

/* Interactive Brokers: size by the visible wordmark rather than the padded PNG. */
.v3-broker[data-broker="ibkr"] {
  padding-inline: 6px;
}

.v3-broker[data-broker="ibkr"] .v3-logo-crop {
  --logo-max-w: 118px;
}

/*
 * Logo crop box: the brand PNGs share a 320x120 canvas with uneven transparent
 * padding. The box takes the aspect ratio of the visible artwork (--crop-*),
 * so sizing and centring are based on what the user actually sees.
 */
.v3-logo-crop {
  --src-w: 320;
  position: relative;
  display: block;
  flex: none;
  width: min(100%, var(--logo-max-w, 100%));
  aspect-ratio: var(--crop-w) / var(--crop-h);
}

.v3-logo-crop img,
.v3-broker-logo .v3-logo-crop img {
  position: absolute;
  top: calc(var(--crop-y) / var(--crop-h) * -100%);
  left: calc(var(--crop-x) / var(--crop-w) * -100%);
  display: block;
  width: calc(var(--src-w) / var(--crop-w) * 100%);
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: contain;
  pointer-events: none;
}

.v3-logo-crop--ibkr {
  --crop-x: 54;
  --crop-y: 44;
  --crop-w: 212;
  --crop-h: 32;
}

.v3-broker-status {
  position: absolute;
  top: calc(100% + 6px);
  left: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #647984;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 320ms ease, transform 320ms ease, color 320ms ease;
  pointer-events: none;
}

.v3-broker.is-connected .v3-broker-status {
  opacity: 0.86;
  transform: translateY(0);
}

.v3-broker.is-connecting .v3-broker-status {
  color: #0b83ad;
  opacity: 1;
  transform: translateY(0);
}

.v3-broker.is-connecting {
  border-color: #a9d8e8;
  background: #fbfeff;
  box-shadow: 0 8px 22px rgba(30, 92, 115, 0.1);
}

.v3-broker.is-connected {
  border-color: #dfeef4;
}

.v3-broker.is-connected .v3-broker-endpoint {
  background: #6fbdd6;
}

.v3-broker.is-connecting .v3-broker-endpoint {
  background: #0b83ad;
}

.v3-broker-logo img {
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 320ms ease;
}

.v3-broker.is-connecting .v3-broker-logo img {
  transform: scale(1.04);
}

.v3-broker-endpoint {
  position: absolute;
  top: 50%;
  right: -8px;
  width: 6px;
  height: 6px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #9ab4c0;
  transform: translateY(-50%);
}

.v3-portfolio {
  position: relative;
  z-index: 1;
  width: 83%;
  margin-left: 17%;
  min-width: 0;
  padding: clamp(28px, 3vw, 44px);
  border: 1px solid #e8edef;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(30, 50, 62, 0.055), 0 2px 7px rgba(30, 50, 62, 0.025);
  transition: box-shadow 900ms ease, transform 900ms ease;
}

.v3-portfolio-head,
.v3-balance-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.v3-balance-row {
  align-items: baseline;
  margin-top: 20px;
}

.v3-balance {
  margin: 0;
  color: #172b36;
  font-size: clamp(2.25rem, 3.7vw, 3.25rem);
  font-weight: 560;
  letter-spacing: -0.07em;
  line-height: 1;
  white-space: nowrap;
}

.v3-return {
  margin: 0;
  color: #487c6b;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
}

.v3-period {
  display: flex;
  justify-content: space-between;
  margin: 12px 0 14px;
  color: #77848c;
  font-size: 12px;
}

.v3-period span {
  color: #8d989e;
}

.v3-chart {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.v3-chart-grid {
  fill: none;
  stroke: #edf1f2;
  stroke-width: 1;
}

.v3-chart-area {
  fill: rgba(0, 191, 255, 0.08);
}

.v3-chart-line {
  fill: none;
  stroke: #0093cc;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.v3-chart-point {
  fill: #0093cc;
  stroke: #fff;
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: center;
}

.v3-portfolio.is-broker-selected {
  box-shadow: 0 20px 54px rgba(30, 50, 62, 0.075), 0 3px 10px rgba(30, 50, 62, 0.035);
}

.v3-portfolio.is-broker-selected .v3-chart-line {
  stroke-width: 2.8;
}

.v3-holdings {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 21px;
  padding-top: 20px;
  border-top: 1px solid #edf0f1;
}

.v3-holdings div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 4px 5px;
  border-radius: 7px;
  transition: background-color 200ms ease, color 200ms ease;
}

.v3-holdings div.is-highlighted {
  background: #eff9fc;
}

.v3-holdings strong {
  color: #2a3a44;
  font-size: 14px;
  font-weight: 650;
}

.v3-holdings span {
  overflow: hidden;
  color: #8b969d;
  font-size: 11px;
  text-overflow: ellipsis;
}

.v3-holdings div.is-highlighted strong {
  color: #087ca4;
}

.v3-social {
  grid-area: social;
  display: grid;
  align-content: center;
  gap: clamp(22px, 2.2vw, 32px);
  min-width: 0;
}

.v3-information {
  min-width: 0;
}

.v3-source-selectors {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 9px;
  border-bottom: 1px solid #e8edef;
}

.v3-source-selectors::after {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: calc(100% / 3);
  height: 2px;
  border-radius: 2px;
  background: #1498be;
  content: "";
  transform: translateX(calc(var(--source-index, 0) * 100%));
  transition: transform 450ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.v3-source-selectors button {
  display: flex;
  min-width: 0;
  height: 58px;
  align-items: center;
  justify-content: center;
  padding: 2px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

/* Equal slots; per-logo modifiers tune optical weight, not raw image size. */
.v3-source-logo-slot {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 40px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding-inline: 10px;
  overflow: hidden;
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 250ms ease;
}

.v3-source-selectors button[aria-pressed="true"] .v3-source-logo-slot {
  opacity: 1;
}

.v3-source-logo--afr {
  --crop-x: 119;
  --crop-y: 15;
  --crop-w: 82;
  --crop-h: 90;
  --logo-max-w: 31px;
}

.v3-source-logo--domain {
  --crop-x: 35;
  --crop-y: 30;
  --crop-w: 250;
  --crop-h: 60;
  --logo-max-w: 64px;
}

/* The ASX PNG's lettering is truncated, so show its emblem with live "ASX" text. */
.v3-source-logo--asx {
  --crop-x: 127;
  --crop-y: 15;
  --crop-w: 66;
  --crop-h: 66;
  --logo-max-w: 25px;
  overflow: hidden;
}

.v3-source-wordmark {
  color: #1d4f86;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1;
  /* Optically centre tracked caps by offsetting trailing letter-spacing. */
  margin-right: -0.14em;
}

.v3-info-card {
  display: grid;
  align-content: start;
  min-height: 155px;
  padding: 18px 21px 16px;
  border: 1px solid #e8edef;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(30, 50, 62, 0.035);
}

.v3-info-panel {
  grid-area: 1 / 1;
  min-height: 100px;
}

.v3-info-panel[hidden] {
  display: none !important;
}

.v3-info-panel.is-entering {
  animation: v3-source-enter 400ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.v3-info-panel.is-leaving {
  animation: v3-source-leave 400ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.v3-info-logo {
  display: block;
  width: auto;
  height: 32px;
  max-width: 112px;
  margin-bottom: 12px;
  object-fit: contain;
  object-position: left center;
}

.v3-info-panel[data-source-panel="domain"] .v3-info-logo {
  height: 28px;
  max-width: 96px;
}

.v3-info-panel[data-source-panel="asx"] .v3-info-logo {
  height: 30px;
  max-width: 92px;
}

.v3-info-type,
.v3-info-title,
.v3-info-meta,
.v3-info-value,
.v3-info-change,
.v3-info-note {
  margin: 0;
}

.v3-info-type {
  color: #687b86;
  font-size: 11px;
  font-weight: 600;
}

.v3-info-title {
  margin-top: 6px;
  color: #283b46;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.025em;
}

.v3-info-meta {
  margin-top: 5px;
  color: #87939a;
  font-size: 11px;
}

.v3-info-value-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 7px;
}

.v3-info-value {
  color: #283b46;
  font-size: 22px;
  font-weight: 580;
  letter-spacing: -0.055em;
}

.v3-info-change {
  color: #487c6b;
  font-size: 12px;
  font-weight: 600;
}

.v3-info-note {
  grid-area: 2 / 1;
  margin-top: 11px;
  color: #a0a9ae;
  font-size: 10px;
}

.v3-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

.v3-activity {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #68767e;
  font-size: 13.5px;
  line-height: 1.55;
}

.v3-avatar {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: #eef1f2;
}

.v3-avatar > img {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
}

.v3-group-activity {
  min-width: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--v3-line);
}

.v3-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.v3-avatar-stack {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.v3-avatar-stack .v3-avatar,
.v3-member-count {
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  border: 2px solid #fff;
}

.v3-avatar-stack .v3-avatar + .v3-avatar,
.v3-member-count {
  margin-left: -9px;
}

.v3-member-count {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f1f4f5;
  color: #5e707a;
  font-size: 10px;
  font-weight: 650;
}

.v3-group-name,
.v3-members {
  margin: 0;
}

.v3-group-name {
  color: #33434d;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -0.015em;
}

.v3-members {
  margin-top: 4px;
  color: #87939a;
  font-size: 11px;
}

.v3-activity-comment {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid #edf0f1;
}

.v3-activity-comment .v3-avatar {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
}

.v3-activity p {
  margin: 0;
  color: #68767e;
  font-size: 13.5px;
  line-height: 1.55;
}

.v3-activity strong {
  color: #33434d;
  font-weight: 620;
}

@keyframes v3-source-enter {
  from {
    opacity: 0;
    transform: translateX(8px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes v3-source-leave {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(-8px);
  }
}

/* ---------- Continuous product-story states ---------- */

.v3-story-ready .v3-broker {
  transition: border-color 260ms ease, background-color 260ms ease, box-shadow 320ms ease, transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.v3-story-ready .v3-broker.is-connecting {
  transform: translateY(-2px);
}

.v3-story-lines .v3-connection-link {
  opacity: 0.3;
}

.v3-story-lines .v3-connection-link path {
  stroke-dasharray: var(--v3-line-length, 0);
  stroke-dashoffset: var(--v3-line-length, 0);
  transition: stroke-dashoffset 820ms cubic-bezier(0.3, 0.7, 0.25, 1), stroke 320ms ease, stroke-width 320ms ease;
}

.v3-story-lines .v3-connection-link circle {
  opacity: 0;
  transition: opacity 320ms ease 480ms, fill 320ms ease;
}

.v3-story-lines .v3-connection-link.is-drawn path {
  stroke-dashoffset: 0;
}

.v3-story-lines .v3-connection-link.is-drawn circle {
  opacity: 1;
}

.v3-story-lines .v3-connection-link.is-connected {
  opacity: 0.62;
}

.v3-story-lines .v3-connection-link.is-connecting {
  opacity: 1;
}

.v3-story-lines .v3-connection-link.is-connecting path {
  stroke: #2ba0c6;
  stroke-width: 2.4;
}

.v3-story-lines .v3-connection-link.is-connecting circle {
  fill: #0b83ad;
}

.v3-no-transition,
.v3-no-transition *,
.v3-no-transition *::before,
.v3-no-transition *::after {
  transition: none !important;
  animation: none !important;
}

.v3-story-ready .v3-chart-line {
  stroke-dasharray: var(--v3-chart-length, none);
  stroke-dashoffset: var(--v3-chart-length, 0);
  transition: stroke-dashoffset 2000ms cubic-bezier(0.25, 0.7, 0.25, 1);
}

.v3-story-ready .v3-chart-area {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 2000ms cubic-bezier(0.25, 0.7, 0.25, 1);
}

.v3-story-ready .v3-chart-point {
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 260ms ease 1960ms, transform 260ms ease 1960ms;
}

.v3-story-ready .v3-chart.is-drawn .v3-chart-line {
  stroke-dashoffset: 0;
}

.v3-story-ready .v3-chart.is-drawn .v3-chart-area {
  clip-path: inset(0);
}

.v3-story-ready .v3-chart.is-drawn .v3-chart-point {
  opacity: 1;
  transform: scale(1);
}

.v3-story-ready .v3-return {
  opacity: 0;
  transition: opacity 500ms ease;
}

.v3-story-ready .v3-portfolio.is-built .v3-return {
  opacity: 1;
}

.v3-story-ready .v3-portfolio .v3-balance {
  opacity: 0;
  transition: opacity 500ms ease;
}

.v3-story-ready .v3-portfolio.is-built .v3-balance {
  opacity: 1;
}

.v3-story-ready .v3-portfolio.is-built .v3-balance.is-resolving {
  opacity: 0.55;
}

.v3-holdings div.is-story-highlighted {
  background: #eff9fc;
}

.v3-holdings div.is-story-highlighted strong {
  color: #087ca4;
}

.v3-portfolio.is-story-responsive {
  border-color: #dceef4;
  box-shadow: 0 20px 54px rgba(30, 92, 115, 0.085), 0 3px 10px rgba(30, 50, 62, 0.03);
}

.v3-story-ready .v3-ecosystem[data-story-focus="insights"] .v3-connections,
.v3-story-ready .v3-ecosystem[data-story-focus="social"] .v3-connections {
  opacity: 0.72;
}

.v3-story-ready .v3-connections {
  transition: opacity 600ms ease;
}

.v3-story-ready .v3-information {
  transition: opacity 600ms ease;
}

.v3-story-ready .v3-ecosystem[data-story-focus="social"] .v3-information {
  opacity: 0.72;
}

.v3-story-ready .v3-people .v3-watching,
.v3-story-ready .v3-people .v3-group-head,
.v3-story-ready .v3-people .v3-activity-comment {
  transition: opacity 520ms ease;
}

.v3-story-ready .v3-people.is-story-active .v3-watching,
.v3-story-ready .v3-people.is-story-active .v3-group-head,
.v3-story-ready .v3-people.is-story-active .v3-activity-comment {
  opacity: 0.42;
  transition-delay: 0s;
}

.v3-story-ready .v3-people.is-story-active .v3-watching.is-story-emphasis,
.v3-story-ready .v3-people.is-story-active .v3-group-head.is-story-emphasis,
.v3-story-ready .v3-people.is-story-active .v3-activity-comment.is-story-emphasis {
  opacity: 1;
  transition-delay: 0s;
}

.v3-story-ready .v3-people .v3-avatar-stack > * {
  transition: opacity 450ms ease, transform 450ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.v3-story-ready .v3-people .is-story-emphasis .v3-avatar-stack > * {
  transform: translateX(0);
}

.v3-people {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.v3-motion-ready [data-v3-step] {
  opacity: 0;
  translate: 0 16px;
  scale: 0.99;
  transition: opacity 600ms ease, translate 700ms cubic-bezier(0.2, 0.7, 0.2, 1), scale 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.v3-motion-ready [data-v3-step].is-visible {
  opacity: 1;
  translate: 0;
  scale: 1;
}

#portfolio,
#about {
  scroll-margin-top: 90px;
}

@media (min-width: 1201px) {
  .v3-intro {
    margin-bottom: clamp(52px, 3.8vw, 56px);
  }

  .v3-ecosystem {
    gap: clamp(64px, 6vw, 84px);
  }

  .v3-portfolio {
    z-index: 0;
    padding-left: clamp(68px, 5vw, 72px);
    transform: scale(1.16);
    transform-origin: center;
  }

  .v3-connection-lines {
    z-index: 1;
    stroke-width: 1.7;
  }

  .v3-broker {
    padding-inline: 6px;
  }

  .v3-broker-logo {
    max-width: 138px;
  }

  .v3-broker[data-broker="commsec"] .v3-broker-logo img {
    max-width: 136px;
  }

  .v3-broker[data-broker="stake"] .v3-broker-logo img {
    max-width: 120px;
  }

  .v3-broker[data-broker="etoro"] .v3-broker-logo img {
    max-width: 114px;
  }

  .v3-broker[data-broker="ibkr"] .v3-logo-crop {
    --logo-max-w: 128px;
  }

  .v3-source-selectors {
    margin-bottom: 10px;
  }

  .v3-source-selectors button {
    height: 58px;
  }

  .v3-info-card {
    min-height: 178px;
    padding: 23px 24px 17px;
  }

  .v3-info-logo {
    height: 34px;
    margin-bottom: 12px;
  }

  .v3-info-type {
    font-size: 12.5px;
  }

  .v3-info-title {
    font-size: 17px;
  }

  .v3-info-meta {
    font-size: 12px;
  }

  .v3-info-value {
    font-size: 25px;
  }

  .v3-info-change {
    font-size: 13.5px;
  }

  .v3-info-note {
    font-size: 11px;
  }

  .v3-social {
    gap: clamp(26px, 2.5vw, 36px);
  }

  .v3-activity {
    gap: 14px;
    font-size: 15.5px;
  }

  .v3-group-activity {
    padding-top: 18px;
  }

  .v3-group-head {
    gap: 14px;
  }

  .v3-group-name {
    font-size: 14.5px;
  }

  .v3-members {
    font-size: 12px;
  }

  .v3-activity-comment {
    gap: 13px;
    margin-top: 18px;
    padding-top: 17px;
  }

  .v3-activity p {
    font-size: 15.5px;
  }
}

@media (min-width: 901px) and (max-width: 1200px) {
  .v3-ecosystem {
    grid-template-columns: minmax(0, 2.2fr) minmax(225px, 0.95fr);
    gap: clamp(30px, 3.4vw, 42px);
  }

  .v3-broker-item {
    width: clamp(116px, 12.8vw, 140px);
  }

  .v3-broker {
    height: 46px;
  }

  .v3-portfolio {
    width: 80%;
    margin-left: 20%;
    padding: clamp(25px, 2.8vw, 34px);
  }
}

@media (max-width: 900px) {
  .v3-shell {
    width: min(100% - 48px, 720px);
  }

  .v3-hero {
    padding-top: 72px;
  }

  .v3-intro {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 0.55fr);
    gap: 24px;
    margin-bottom: 76px;
  }

  .v3-intro h1 {
    font-size: clamp(4rem, 8.5vw, 5rem);
  }

  .v3-ecosystem {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "stage"
      "social";
    gap: 26px;
  }

  .v3-portfolio {
    width: 78%;
    max-width: 680px;
    margin-left: 22%;
    transform: none;
  }

  .v3-broker-item {
    width: clamp(100px, 16%, 120px);
  }

  .v3-broker {
    height: 44px;
  }

  .v3-social {
    width: min(100%, 420px);
    justify-self: end;
  }

  .v3-info-card {
    min-height: 148px;
  }
}

@media (max-width: 600px) {
  .v3-shell {
    width: min(100% - 40px, 440px);
  }

  .v3-nav {
    min-height: 68px;
    flex-wrap: nowrap;
    gap: 12px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .v3-brand {
    font-size: 16px;
  }

  .v3-brand img {
    width: 29px;
    height: 26px;
  }

  .v3-menu-toggle {
    display: flex;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--v3-ink);
    cursor: pointer;
  }

  .v3-menu-toggle span {
    display: block;
    width: 19px;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 180ms ease, opacity 180ms ease;
  }

  .v3-menu-toggle:focus-visible {
    outline: 2px solid var(--v3-blue);
    outline-offset: 2px;
  }

  .v3-nav.is-menu-open .v3-menu-toggle span:first-child {
    transform: translateY(6.5px) rotate(45deg);
  }

  .v3-nav.is-menu-open .v3-menu-toggle span:nth-child(2) {
    opacity: 0;
  }

  .v3-nav.is-menu-open .v3-menu-toggle span:last-child {
    transform: translateY(-6.5px) rotate(-45deg);
  }

  .v3-nav-links {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 2;
    display: none;
    width: 100vw;
    justify-content: stretch;
    gap: 0;
    padding: 8px 20px 14px;
    border-bottom: 1px solid #edf0f1;
    background: #fff;
    box-shadow: 0 8px 16px rgba(30, 50, 62, 0.035);
    transform: translateX(-50%);
  }

  .v3-nav.is-menu-open .v3-nav-links {
    display: grid;
    animation: v3-menu-appear 180ms ease both;
  }

  .v3-nav-links a {
    padding: 11px 0;
    font-size: 14px;
  }

  .v3-hero {
    padding-top: 24px;
    padding-bottom: 64px;
  }

  .v3-intro {
    display: block;
    margin-bottom: 40px;
  }

  .v3-intro h1 {
    max-width: 430px;
    font-size: clamp(3.15rem, 12.5vw, 4.3rem);
    letter-spacing: -0.085em;
    line-height: 0.98;
  }

  .v3-supporting-copy {
    max-width: 310px;
    margin: 22px 0 0;
    font-size: 15px;
  }

  .v3-ecosystem {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "stage"
      "social";
    gap: 32px;
  }

  .v3-stage {
    display: grid;
    grid-template-areas:
      "portfolio"
      "connections";
    gap: 24px;
    padding: 0;
  }

  .v3-connection-lines {
    display: none;
  }

  .v3-connections {
    position: relative;
    inset: auto;
    grid-area: connections;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 8px;
    row-gap: 26px;
    margin: 0;
  }

  .v3-broker-status {
    top: calc(100% + 5px);
    left: 3px;
    font-size: 9.5px;
  }

  .v3-broker-item,
  .v3-broker-item:nth-child(n) {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    transform: none;
  }

  .v3-broker,
  .v3-broker-item:nth-child(n) .v3-broker {
    height: 40px;
    justify-content: center;
    padding: 5px 8px;
    border-radius: 11px;
    box-shadow: none;
  }

  .v3-broker-logo {
    max-width: 100px;
  }

  .v3-broker[data-broker="commsec"] .v3-broker-logo img {
    max-width: 98px;
  }

  .v3-broker[data-broker="stake"] .v3-broker-logo img {
    max-width: 84px;
  }

  .v3-broker[data-broker="etoro"] .v3-broker-logo img {
    max-width: 78px;
  }

  .v3-broker[data-broker="ibkr"] .v3-broker-logo {
    max-width: 120px;
  }

  .v3-broker[data-broker="ibkr"] .v3-logo-crop {
    --logo-max-w: 112px;
  }

  .v3-broker-endpoint {
    top: auto;
    right: 50%;
    bottom: auto;
    left: 50%;
    display: none;
  }

  .v3-portfolio {
    grid-area: portfolio;
    width: 100%;
    max-width: none;
    margin-left: 0;
    padding: 24px 21px;
    border-radius: 19px;
  }

  .v3-balance {
    font-size: clamp(2rem, 9vw, 2.5rem);
  }

  .v3-holdings {
    gap: 6px;
  }

  .v3-social {
    width: 100%;
    justify-self: stretch;
    padding: 0 3px;
  }

  .v3-info-card {
    min-height: 155px;
  }

  #portfolio,
  #about {
    scroll-margin-top: 76px;
  }

  .v3-mobile-motion-ready .v3-portfolio {
    opacity: 0;
    translate: 0 12px;
    transition: opacity 320ms ease, translate 360ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .v3-mobile-motion-ready .v3-portfolio.is-mobile-revealed {
    opacity: 1;
    translate: 0;
  }

  .v3-mobile-motion-ready .v3-portfolio .v3-overline,
  .v3-mobile-motion-ready .v3-portfolio .v3-portfolio-sub,
  .v3-mobile-motion-ready .v3-portfolio .v3-period,
  .v3-mobile-motion-ready .v3-portfolio .v3-holdings > div {
    opacity: 0;
    translate: 0 7px;
    transition: opacity 260ms ease, translate 300ms ease;
  }

  .v3-mobile-motion-ready .v3-portfolio.is-mobile-revealed .v3-overline,
  .v3-mobile-motion-ready .v3-portfolio.is-mobile-revealed .v3-portfolio-sub {
    opacity: 1;
    translate: 0;
    transition-delay: 100ms;
  }

  .v3-mobile-motion-ready .v3-portfolio.is-mobile-revealed .v3-period {
    opacity: 1;
    translate: 0;
    transition-delay: 300ms;
  }

  .v3-mobile-motion-ready .v3-portfolio.is-mobile-revealed .v3-holdings > div {
    opacity: 1;
    translate: 0;
    transition-delay: calc(1250ms + var(--holding-delay, 0ms));
  }

  .v3-mobile-motion-ready .v3-portfolio:focus-within,
  .v3-mobile-motion-ready .v3-portfolio:focus-within .v3-overline,
  .v3-mobile-motion-ready .v3-portfolio:focus-within .v3-portfolio-sub,
  .v3-mobile-motion-ready .v3-portfolio:focus-within .v3-period,
  .v3-mobile-motion-ready .v3-portfolio:focus-within .v3-holdings > div {
    opacity: 1;
    translate: 0;
  }

  .v3-mobile-motion-ready .v3-broker-item {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
    transition: opacity 600ms ease, transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .v3-mobile-motion-ready .v3-connections.is-mobile-revealed .v3-broker-item {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: var(--broker-delay, 0ms);
  }

  .v3-mobile-motion-ready .v3-broker-item:focus-within {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition-delay: 0ms;
  }

  .v3-mobile-motion-ready .v3-activity,
  .v3-mobile-motion-ready .v3-group-head,
  .v3-mobile-motion-ready .v3-activity-comment {
    opacity: 0;
    translate: 0 9px;
    transition: opacity 450ms ease, translate 450ms ease;
  }

  .v3-mobile-motion-ready .v3-social.is-mobile-revealed .v3-watching,
  .v3-mobile-motion-ready .v3-social.is-mobile-revealed .v3-group-head,
  .v3-mobile-motion-ready .v3-social.is-mobile-revealed .v3-activity-comment {
    opacity: 1;
    translate: 0;
  }

  .v3-mobile-motion-ready .v3-watching .v3-avatar,
  .v3-mobile-motion-ready .v3-watching p {
    opacity: 0;
    translate: 0 7px;
    transition: opacity 450ms ease, translate 450ms ease;
  }

  .v3-mobile-motion-ready .v3-social.is-mobile-revealed .v3-watching .v3-avatar {
    opacity: 1;
    translate: 0;
  }

  .v3-mobile-motion-ready .v3-social.is-mobile-revealed .v3-watching p {
    opacity: 1;
    translate: 0;
    transition-delay: 180ms;
  }

  .v3-mobile-motion-ready .v3-avatar-stack > * {
    opacity: 0;
    translate: 0 6px;
    transition: opacity 450ms ease, translate 450ms ease;
  }

  .v3-mobile-motion-ready .v3-social.is-mobile-revealed .v3-avatar-stack > * {
    opacity: 1;
    translate: 0;
    transition-delay: var(--avatar-delay, 0ms);
  }

  .v3-mobile-motion-ready .v3-social.is-mobile-revealed .v3-group-head {
    transition-delay: 600ms;
  }

  .v3-mobile-motion-ready .v3-social.is-mobile-revealed .v3-activity-comment {
    transition-delay: 1200ms;
  }
}

@keyframes v3-menu-appear {
  from {
    opacity: 0;
    translate: 0 -4px;
  }

  to {
    opacity: 1;
    translate: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .v3-motion-ready [data-v3-step] {
    opacity: 1;
    translate: none;
    scale: none;
  }
}

/* Section 2: Discover, demonstrated inside the MatesInvest app. */
.v3-discover {
  --v3-discover-blue: #1674ce;
  --v3-discover-ink: #0f2331;
  --v3-discover-muted: #66757f;
  --v3-discover-dwell: 4000ms;
  overflow: hidden;
  padding: clamp(76px, 8vw, 120px) 0 clamp(96px, 9vw, 140px);
  border-top: 1px solid var(--v3-line);
  background: #fbfcfd;
}

.v3-discover-layout {
  display: grid;
  grid-template-columns: auto minmax(0, 520px);
  justify-content: center;
  align-items: center;
  gap: clamp(56px, 7vw, 124px);
}

.v3-discover-copy {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

.v3-discover-eyebrow {
  margin: 0 0 25px;
  color: #087fa8;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.16em;
}

.v3-discover-copy h2 {
  max-width: 10ch;
  margin: 0;
  font-size: clamp(3rem, 4.4vw, 4rem);
  font-weight: 560;
  letter-spacing: -0.07em;
  line-height: 1.04;
}

.v3-discover-lead {
  max-width: 450px;
  margin: 28px 0 40px;
  color: #53616b;
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.55;
}

.v3-discover-selectors {
  display: grid;
  max-width: 440px;
  border-top: 1px solid #e2e9ed;
}

.v3-discover-selectors button {
  position: relative;
  min-height: 57px;
  padding: 14px 18px 14px 21px;
  border: 0;
  border-bottom: 1px solid #e2e9ed;
  background: transparent;
  color: #64717a;
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  font-weight: 550;
  text-align: left;
  transition: color 350ms ease, background-color 350ms ease;
}

.v3-discover-selectors button::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--v3-discover-blue);
  content: "";
  opacity: 0;
  transform: scaleY(0.45);
  transition: opacity 350ms ease, transform 350ms ease;
}

/* A quiet timer line on the active row mirrors the phone's dwell time. */
.v3-discover-selectors button::after {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 1px;
  background: var(--v3-discover-blue);
  content: "";
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
}

.v3-discover.is-cycling .v3-discover-selectors button[aria-pressed="true"]::after {
  opacity: 0.55;
  animation: v3-discover-dwell var(--v3-discover-dwell) linear both;
}

.v3-discover-selectors button:hover {
  color: #23394a;
}

.v3-discover-selectors button[aria-pressed="true"] {
  background: #f1f7fa;
  color: #0c293b;
}

.v3-discover-selectors button[aria-pressed="true"]::before {
  opacity: 1;
  transform: scaleY(1);
}

.v3-discover-selectors button:focus-visible {
  z-index: 1;
  outline: 2px solid var(--v3-discover-blue);
  outline-offset: -3px;
}

.v3-discover-descriptions {
  min-height: 72px;
  max-width: 440px;
  margin-top: 24px;
}

.v3-discover-descriptions p {
  margin: 0;
  color: #62717b;
  font-size: 15px;
  line-height: 1.6;
  animation: v3-discover-fade 420ms ease both;
}

.v3-discover [hidden] {
  display: none !important;
}

/* The phone: a quiet frame, the screen does the work. */
.v3-discover-demo {
  --v3-phone-width: max(320px, min(390px, 27vw, calc((100svh - 110px) * 0.4875)));
  position: relative;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.v3-discover-demo::before {
  position: absolute;
  inset: 8% -18% 4%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(22, 116, 206, 0.075), rgba(22, 116, 206, 0));
  content: "";
  pointer-events: none;
}

.v3-discover-device {
  position: relative;
  z-index: 1;
  width: var(--v3-phone-width);
  aspect-ratio: 390 / 800;
  padding: 9px;
  border-radius: 54px;
  background: #1c242b;
  box-shadow: 0 0 0 1px #2f3a43 inset, 0 24px 60px rgba(17, 47, 68, 0.13), 0 4px 14px rgba(17, 47, 68, 0.06);
  container-type: inline-size;
}

.v3-discover-screen {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  border-radius: 45px;
  background: #eef5fb;
  color: var(--v3-discover-ink);
  font-size: 14px;
  font-size: clamp(12px, calc(100cqw / 24), 16px);
  isolation: isolate;
}

.v3-discover-status {
  display: grid;
  height: 3.35em;
  flex: none;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0.35em 1.9em 0;
  font-size: 1em;
  font-weight: 650;
}

.v3-discover-status > span:first-child {
  font-size: 0.98em;
}

.v3-discover-island {
  width: 6.4em;
  height: 1.75em;
  border-radius: 1em;
  background: #11171c;
}

.v3-discover-status-icons {
  display: flex;
  justify-content: flex-end;
  gap: 0.35em;
}

.v3-discover-status-icons svg {
  height: 0.8em;
  fill: currentColor;
}

.v3-discover-app-head {
  display: grid;
  flex: none;
  gap: 0.15em;
  padding: 0.75em 1.15em 0.8em;
}

.v3-discover-app-head strong {
  font-size: 2.05em;
  font-weight: 720;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.v3-discover-subtitles {
  min-height: 1.35em;
  color: var(--v3-discover-muted);
  font-size: 0.9em;
}

.v3-discover-subtitles span {
  display: block;
  animation: v3-discover-fade 420ms ease both;
}

.v3-discover-chips {
  display: flex;
  flex: none;
  gap: 0.45em;
  padding: 0.1em 1.15em 0.85em;
}

.v3-discover-chips span,
.v3-discover-chips button {
  padding: 0.5em 0.95em;
  border: 1px solid #d9e5ee;
  border-radius: 2em;
  background: #fff;
  color: #5b6e7b;
  font-size: 0.82em;
  font-weight: 600;
  transition: color 350ms ease, background-color 350ms ease, border-color 350ms ease;
}

.v3-discover-chips button {
  margin: 0;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.v3-discover-chips button:focus-visible {
  outline: 2px solid var(--v3-discover-blue);
  outline-offset: 2px;
}

.v3-discover-chips span.is-current,
.v3-discover-chips button.is-current {
  border-color: var(--v3-discover-blue);
  background: var(--v3-discover-blue);
  color: #fff;
}

.v3-discover-viewport {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.v3-discover-viewport::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2.2em;
  background: linear-gradient(rgba(238, 245, 251, 0), #eef5fb);
  content: "";
  pointer-events: none;
}

.v3-discover-panel {
  position: absolute;
  inset: 0;
  padding: 0 0.85em;
}

.v3-discover-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0.2em 0.3em 0.75em;
}

.v3-discover-panel-head h3 {
  margin: 0;
  font-size: 1.18em;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.v3-discover-panel-head span {
  color: var(--v3-discover-blue);
  font-size: 0.8em;
  font-weight: 600;
}

.v3-discover-story,
.v3-discover-announcement,
.v3-discover-map-card,
.v3-discover-suburb,
.v3-discover-group-list {
  border: 1px solid #e0e9f0;
  border-radius: 1.15em;
  background: #fff;
  box-shadow: 0 1px 4px rgba(20, 56, 80, 0.035);
}

/* Business News */
.v3-discover-story {
  overflow: hidden;
}

.v3-discover-editorial-art {
  position: relative;
  display: flex;
  height: 10em;
  align-items: flex-end;
  padding: 0.95em 1.05em;
  overflow: hidden;
  background: linear-gradient(135deg, #142c3d 0%, #24485e 58%, #b8874b 140%);
  color: #f3efe6;
}

.v3-discover-editorial-art span {
  position: relative;
  z-index: 1;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.05;
}

.v3-discover-editorial-art i {
  position: absolute;
  right: -2.2em;
  bottom: -3.6em;
  width: 10em;
  height: 10em;
  border: 1.4em solid rgba(214, 167, 98, 0.55);
  border-radius: 50%;
}

.v3-discover-story-body {
  padding: 0.85em 1em 1em;
}

.v3-discover-publisher {
  display: flex;
  align-items: center;
  gap: 0.55em;
  color: #3f5260;
  font-size: 0.8em;
  font-weight: 650;
}

.v3-discover-publisher img {
  width: 2.6em;
  height: 1.6em;
  padding: 0.2em;
  border: 1px solid #e6edf2;
  border-radius: 0.4em;
  background: #fff;
  object-fit: contain;
}

.v3-discover-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
  margin: 0.65em 0;
}

.v3-discover-tags span {
  padding: 0.35em 0.6em;
  border-radius: 0.35em;
  background: #edf4f9;
  color: #47677d;
  font-size: 0.64em;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.v3-discover-story h4,
.v3-discover-announcement h4 {
  margin: 0;
  font-size: 1.12em;
  font-weight: 680;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.v3-discover-story-meta {
  margin-top: 0.7em;
  color: #7a8892;
  font-size: 0.76em;
}

.v3-discover-story-next {
  margin-top: 0.7em;
}

/* ASX News */
.v3-discover-announcement {
  margin-bottom: 0.75em;
  padding: 1.05em 1.05em;
}

.v3-discover-announcement-top {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin-bottom: 0.7em;
}

.v3-discover-ticker {
  display: grid;
  width: 3.1em;
  height: 3.1em;
  flex: none;
  place-items: center;
  border-radius: 0.8em;
  background: #e8f1fa;
  color: var(--v3-discover-blue);
  font-size: 0.8em;
  font-weight: 760;
  letter-spacing: 0.02em;
}

.v3-discover-announcement-top strong,
.v3-discover-announcement-top small {
  display: block;
}

.v3-discover-announcement-top strong {
  overflow: hidden;
  font-size: 0.8em;
  font-weight: 720;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v3-discover-announcement-top > div {
  min-width: 0;
  flex: 1;
}

.v3-discover-announcement-top time {
  align-self: flex-start;
  color: #8b98a1;
  font-size: 0.7em;
  white-space: nowrap;
}

.v3-discover-announcement-top small {
  margin-top: 0.2em;
  color: #788792;
  font-size: 0.74em;
}

.v3-discover-announcement h4 {
  font-size: 1em;
}

.v3-discover-announcement .v3-discover-tags {
  margin-bottom: 0;
}

/* Property */
.v3-discover-map-card {
  padding: 0.85em 0.95em 0.8em;
}

.v3-discover-map-heading {
  display: grid;
  gap: 0.1em;
}

.v3-discover-map-heading span {
  color: #788792;
  font-size: 0.76em;
  font-weight: 600;
}

.v3-discover-map-heading strong {
  font-size: 1.08em;
  font-weight: 700;
}

.v3-discover-map {
  width: 100%;
  margin: 0.45em 0 0.3em;
}

.v3-discover-map svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.v3-discover-map .map-state {
  stroke: #f5f7f8;
  stroke-width: 1.15;
  stroke-linejoin: round;
}

.v3-discover-map .map-wa { fill: #c2dd8f; }
.v3-discover-map .map-nt { fill: #c5e8ba; }
.v3-discover-map .map-sa { fill: #a8d58e; }
.v3-discover-map .map-qld { fill: #e6e39c; }
.v3-discover-map .map-nsw { fill: #ebe2a0; }
.v3-discover-map .map-vic { fill: #f2ab98; }
.v3-discover-map .map-tas { fill: #dfe7ec; }

.v3-discover-map text {
  font-family: inherit;
  fill: #1c3442;
  paint-order: stroke;
  stroke: rgba(247, 249, 250, 0.82);
  stroke-width: 1.2px;
  stroke-linejoin: round;
  text-anchor: middle;
}

.v3-discover-map .map-label-state {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.v3-discover-map .map-label-value {
  fill: #2467bd;
  font-size: 9.5px;
  font-weight: 500;
}

.v3-discover-map .map-label-vic .map-label-value {
  fill: #b45f68;
}

.v3-discover-growth-scale {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 2fr;
  max-width: 13em;
  margin: 0 auto;
  padding-top: 0.6em;
  color: #6f7f89;
  font-size: 0.66em;
  font-weight: 650;
}

.v3-discover-growth-scale i {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 0.38em;
  border-radius: 1em;
  background: linear-gradient(90deg, #ec937f 0%, #f3dcb3 30%, #ebe2a0 34%, #a8d58e 68%, #5fb67a 100%);
}

.v3-discover-growth-scale span:nth-of-type(1) { grid-column: 1; grid-row: 1; }
.v3-discover-growth-scale span:nth-of-type(2) { grid-column: 2; grid-row: 1; transform: translateX(-50%); }
.v3-discover-growth-scale span:nth-of-type(3) { grid-column: 2; grid-row: 1; justify-self: end; }

.v3-discover-suburb {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin-top: 0.65em;
  padding: 0.85em 1em;
}

.v3-discover-suburb img {
  width: 3em;
  height: 2.2em;
  flex: none;
  padding: 0.25em;
  border: 1px solid #e6edf2;
  border-radius: 0.55em;
  object-fit: contain;
}

.v3-discover-suburb span,
.v3-discover-suburb strong {
  display: block;
}

.v3-discover-suburb span {
  color: #0c7c5a;
  font-size: 0.64em;
  font-weight: 750;
  letter-spacing: 0.08em;
}

.v3-discover-suburb strong {
  margin-top: 0.2em;
  font-size: 0.92em;
  font-weight: 650;
}

/* Groups */
.v3-discover-group-intro {
  margin: 0 0.3em 0.8em;
  color: #3d5160;
  font-size: 0.92em;
}

.v3-discover-group-list {
  overflow: hidden;
}

.v3-discover-group-create {
  display: block;
  margin-top: 0.8em;
  padding: 0.85em;
  border: 1px dashed #b9cfe0;
  border-radius: 1em;
  color: var(--v3-discover-blue);
  font-size: 0.86em;
  font-weight: 650;
  text-align: center;
}

.v3-discover-group-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8em;
  padding: 0.95em 1em;
  border-bottom: 1px solid #edf2f6;
}

.v3-discover-group-row:last-child {
  border-bottom: 0;
}

.v3-discover-group-avatar {
  display: block;
  width: 3.05em;
  height: 3.05em;
  overflow: hidden;
  border-radius: 50%;
  background: #e8f1fa;
}

.v3-discover-group-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v3-discover-group-avatar.community {
  display: grid;
  place-items: center;
  background: #e4f3fb;
}

.v3-discover-group-avatar.community img {
  width: 62%;
  height: auto;
}

.v3-discover-group-row strong,
.v3-discover-group-row div > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v3-discover-group-row strong {
  font-size: 0.98em;
  font-weight: 680;
}

.v3-discover-group-row div > span {
  margin-top: 0.2em;
  color: #6d7c86;
  font-size: 0.82em;
}

.v3-discover-group-row time {
  align-self: start;
  margin-top: 0.3em;
  color: #8b98a1;
  font-size: 0.72em;
}

.v3-discover-unread {
  position: absolute;
  right: 1em;
  bottom: 1em;
  display: grid;
  min-width: 1.55em;
  height: 1.55em;
  place-items: center;
  border-radius: 1em;
  background: var(--v3-discover-blue);
  color: #fff;
  font-size: 0.7em;
  font-style: normal;
  font-weight: 700;
}

.v3-discover-tabbar {
  display: grid;
  flex: none;
  grid-template-columns: repeat(4, 1fr);
  padding: 0.55em 0.8em 1.6em;
  border-top: 1px solid #e1e9ef;
  background: #fff;
}

.v3-discover-tabbar span {
  display: grid;
  justify-items: center;
  gap: 0.2em;
  color: #8796a1;
  font-size: 0.66em;
  font-weight: 600;
}

.v3-discover-tabbar svg {
  width: 2.1em;
  height: 2.1em;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.v3-discover-tabbar .is-current {
  color: var(--v3-discover-blue);
}

.v3-discover-home-indicator {
  position: absolute;
  bottom: 0.55em;
  left: 50%;
  z-index: 2;
  width: 9em;
  height: 0.32em;
  border-radius: 1em;
  background: #1a2630;
  transform: translateX(-50%);
}

.v3-discover-app-foot {
  position: relative;
  z-index: 1;
  margin: 16px 0 0;
  color: #8a979f;
  font-size: 11px;
  text-align: center;
}

/* The first reveal is held until the phone is actually seen. */
.v3-discover.is-awaiting .is-revealing,
.v3-discover.is-awaiting .is-revealing * {
  animation-play-state: paused !important;
}

/* In-app state change: the content moves, the device stays still. */
.v3-discover-panel.is-leaving {
  animation: v3-discover-out 260ms ease both;
}

.v3-discover-panel.is-entering {
  animation: v3-discover-in 420ms cubic-bezier(0.2, 0.7, 0.2, 1) 170ms both;
}

.v3-discover-panel.is-revealing .v3-discover-panel-head,
.v3-discover-news.is-revealing .v3-discover-story,
.v3-discover-asx.is-revealing .v3-discover-announcement,
.v3-discover-groups.is-revealing .v3-discover-group-row,
.v3-discover-property.is-revealing .v3-discover-suburb {
  animation: v3-discover-rise 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.v3-discover-panel.is-revealing .v3-discover-panel-head { animation-delay: 240ms; }

.v3-discover-news.is-revealing .v3-discover-story { animation-delay: 380ms; }
.v3-discover-news.is-revealing .v3-discover-story-next { animation-delay: 860ms; }
.v3-discover-news.is-revealing .v3-discover-story:not(.v3-discover-story-next) .v3-discover-publisher,
.v3-discover-news.is-revealing .v3-discover-story:not(.v3-discover-story-next) .v3-discover-tags,
.v3-discover-news.is-revealing .v3-discover-story:not(.v3-discover-story-next) h4 {
  animation: v3-discover-fade 420ms ease both;
}
.v3-discover-news.is-revealing .v3-discover-story:not(.v3-discover-story-next) .v3-discover-publisher { animation-delay: 520ms; }
.v3-discover-news.is-revealing .v3-discover-story:not(.v3-discover-story-next) .v3-discover-tags { animation-delay: 640ms; }
.v3-discover-news.is-revealing .v3-discover-story:not(.v3-discover-story-next) h4 { animation-delay: 760ms; }

.v3-discover-asx.is-revealing .v3-discover-announcement:nth-of-type(1) { animation-delay: 380ms; }
.v3-discover-asx.is-revealing .v3-discover-announcement:nth-of-type(2) { animation-delay: 540ms; }
.v3-discover-asx.is-revealing .v3-discover-announcement:nth-of-type(3) { animation-delay: 700ms; }

.v3-discover-property.is-revealing .v3-discover-map-card {
  animation: v3-discover-map-in 620ms cubic-bezier(0.2, 0.7, 0.2, 1) 360ms both;
}
.v3-discover-property.is-revealing .map-state {
  animation: v3-discover-state-in 700ms ease both;
  animation-delay: 560ms;
}
.v3-discover-property.is-revealing .map-label {
  animation: v3-discover-fade 420ms ease both;
}
.v3-discover-property.is-revealing .map-label-wa { animation-delay: 820ms; }
.v3-discover-property.is-revealing .map-label-nt { animation-delay: 940ms; }
.v3-discover-property.is-revealing .map-label-sa { animation-delay: 1060ms; }
.v3-discover-property.is-revealing .map-label-qld { animation-delay: 1180ms; }
.v3-discover-property.is-revealing .map-label-nsw { animation-delay: 1300ms; }
.v3-discover-property.is-revealing .map-label-vic { animation-delay: 1420ms; }
.v3-discover-property.is-revealing .v3-discover-suburb { animation-delay: 1250ms; }

.v3-discover-groups.is-revealing .v3-discover-group-intro,
.v3-discover-groups.is-revealing .v3-discover-group-create {
  animation: v3-discover-fade 420ms ease both;
}
.v3-discover-groups.is-revealing .v3-discover-group-intro { animation-delay: 300ms; }
.v3-discover-groups.is-revealing .v3-discover-group-create { animation-delay: 980ms; }
.v3-discover-groups.is-revealing .v3-discover-group-row:nth-child(1) { animation-delay: 360ms; }
.v3-discover-groups.is-revealing .v3-discover-group-row:nth-child(2) { animation-delay: 500ms; }
.v3-discover-groups.is-revealing .v3-discover-group-row:nth-child(3) { animation-delay: 640ms; }
.v3-discover-groups.is-revealing .v3-discover-group-row:nth-child(4) { animation-delay: 780ms; }
.v3-discover-groups.is-revealing .v3-discover-unread {
  animation: v3-discover-pop 360ms cubic-bezier(0.2, 0.8, 0.3, 1.2) 1150ms both;
}

@keyframes v3-discover-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-6px); }
}

@keyframes v3-discover-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes v3-discover-rise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes v3-discover-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes v3-discover-map-in {
  from { opacity: 0; transform: scale(0.985); }
  to { opacity: 1; transform: scale(1); }
}

/* Boundaries resolve and fills settle from neutral into their values. */
@keyframes v3-discover-state-in {
  from { fill: #e4ebf0; stroke-opacity: 0; }
}

@keyframes v3-discover-pop {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes v3-discover-dwell {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Laptop: keep the phone and copy side by side, slightly tighter. */
@media (max-width: 1180px) {
  .v3-discover-layout {
    grid-template-columns: auto minmax(0, 460px);
    gap: clamp(48px, 5vw, 72px);
  }

  .v3-discover-copy h2 {
    font-size: clamp(2.6rem, 4.3vw, 3.4rem);
  }

  .v3-discover-lead {
    margin: 22px 0 30px;
    font-size: 17px;
  }
}

/* Tablet: stack early so neither the phone nor the headline is squeezed. */
@media (max-width: 960px) {
  .v3-discover-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
  }

  .v3-discover-copy h2 {
    max-width: 12ch;
    font-size: clamp(2.8rem, 7vw, 4.2rem);
  }

  .v3-discover-lead {
    max-width: 560px;
    margin-bottom: 26px;
  }

  .v3-discover-selectors {
    display: flex;
    max-width: none;
    border-top: 0;
    border-bottom: 1px solid #e2e9ed;
  }

  .v3-discover-selectors button {
    min-height: 50px;
    flex: 1 1 auto;
    padding: 12px 10px;
    border-bottom: 0;
    background: transparent;
    font-size: 15px;
    text-align: center;
    white-space: nowrap;
  }

  .v3-discover-selectors button[aria-pressed="true"] {
    background: transparent;
  }

  .v3-discover-selectors button::before {
    top: auto;
    right: 8px;
    bottom: -1px;
    left: 8px;
    width: auto;
    height: 2px;
    transform: scaleX(0.4);
  }

  .v3-discover-selectors button::after {
    right: 8px;
    bottom: -1px;
    left: 8px;
    height: 2px;
  }

  .v3-discover-selectors button[aria-pressed="true"]::before {
    opacity: 0.25;
    transform: scaleX(1);
  }

  .v3-discover.is-cycling .v3-discover-selectors button[aria-pressed="true"]::after {
    opacity: 1;
  }

  .v3-discover-descriptions {
    min-height: 50px;
    max-width: 560px;
    margin-top: 16px;
  }

  .v3-discover-demo {
    --v3-phone-width: min(380px, 100%);
    align-self: stretch;
  }

  .v3-discover-device {
    margin-inline: auto;
  }
}

/* Mobile website: drop the hardware so it isn't a phone inside a phone. */
@media (max-width: 600px) {
  .v3-discover {
    padding: 62px 0 80px;
  }

  .v3-discover-layout {
    gap: 26px;
  }

  .v3-discover-copy h2 {
    font-size: clamp(2.5rem, 10.4vw, 3.3rem);
  }

  .v3-discover-lead {
    margin: 18px 0 20px;
    font-size: 15px;
  }

  .v3-discover-selectors button {
    min-height: 46px;
    padding: 10px 4px;
    font-size: 14px;
  }

  .v3-discover-descriptions {
    min-height: 62px;
    margin-top: 13px;
  }

  .v3-discover-descriptions p {
    font-size: 14px;
  }

  .v3-discover-demo {
    --v3-phone-width: auto;
    align-self: stretch;
    margin-inline: -8px;
  }

  .v3-discover-demo::before {
    display: none;
  }

  .v3-discover-device {
    width: auto;
    height: clamp(540px, 152vw, 640px);
    aspect-ratio: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .v3-discover-screen {
    border: 1px solid #dce7ee;
    border-radius: 22px;
    font-size: clamp(12.5px, calc(100cqw / 26), 15px);
    box-shadow: 0 12px 32px rgba(17, 47, 68, 0.07);
  }

  .v3-discover-status,
  .v3-discover-tabbar,
  .v3-discover-home-indicator {
    display: none;
  }

  .v3-discover-app-head {
    padding-top: 1.1em;
  }

  .v3-discover-app-foot {
    margin-top: 12px;
  }
}

@media (max-width: 360px) {
  .v3-discover-selectors button {
    padding-inline: 2px;
    font-size: 13px;
  }
}

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

/* Product preview: retain the phone hardware while bringing the UI closer to the app. */
.v3-discover-copy h2 { max-width: 12ch; letter-spacing: -0.055em; }
.v3-discover-demo::before { display: none; }
.v3-discover-screen { background: #fff; color: #171b20; }
.v3-discover-app-head {
  position: relative;
  padding: 0.55em 1.2em 1em;
  gap: 0.35em;
}
.v3-discover-app-head strong { font-size: 1.9em; color: #07090c; }
.v3-discover-subtitles { max-width: 82%; font-size: 0.85em; color: #73777b; }
.v3-discover-search {
  position: absolute;
  right: 1.15em;
  top: 0.3em;
  display: grid;
  width: 2.9em;
  height: 2.9em;
  place-items: center;
  border-radius: 50%;
  background: #eef1f3;
}
.v3-discover-search svg { width: 1.5em; fill: none; stroke: #797f82; stroke-width: 1.8; stroke-linecap: round; }
.v3-discover-chips { gap: 0.6em; padding: 0.2em 1.2em 1em; overflow: hidden; white-space: nowrap; }
.v3-discover-chips span,
.v3-discover-chips button {
  flex: none;
  padding: 0.72em 1.2em;
  border-color: #dce0e3;
  color: #1f252a;
  font-size: 0.88em;
  font-weight: 500;
}
.v3-discover-chips span.is-current,
.v3-discover-chips button.is-current { background: #2467e6; border-color: #2467e6; }
.v3-discover-demo[data-current="property"] .v3-discover-chips > :first-child { display: none; }
.v3-discover-viewport { background: #e9f3fa; }
.v3-discover-viewport::after { display: none; }
.v3-discover-panel { padding: 0.95em 0.85em 1em; overflow: hidden; }
.v3-discover-panel-head { align-items: center; margin: 0 0.25em 0.95em; }
.v3-discover-panel-head h3 { font-size: 1.06em; color: #656b71; }
.v3-discover-panel-head span { display: flex; align-items: center; gap: 0.35em; font-size: 0.83em; color: #656b71; }
.v3-discover-panel-head svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 1.5; }
.v3-discover-panel-head svg circle { fill: #e9f3fa; }
.v3-discover-story, .v3-discover-announcement, .v3-discover-suburb { border-color: #e8edf2; border-radius: 1.15em; box-shadow: 0 2px 6px #2245680d; }
.v3-discover-story-hero { position: relative; display: flex; justify-content: center; min-height: 10em; }
.v3-discover-editorial-art { width: 43%; height: 10em; }
.v3-discover-card-actions { display: flex; gap: 0.5em; margin-left: auto; }
.v3-discover-story-hero > .v3-discover-card-actions { position: absolute; top: 0.8em; right: 0.8em; }
.v3-discover-card-actions svg { width: 2.2em; height: 2.2em; padding: 0.45em; border-radius: 0.55em; background: #e9f1fe; fill: none; stroke: #2467bd; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v3-discover-story-body { padding: 0.9em 0.9em 1em; }
.v3-discover-publisher { gap: 0.6em; padding-bottom: 0.75em; border-bottom: 1px solid #e7ebef; font-size: 0.82em; font-weight: 600; color: #38424a; }
.v3-discover-publisher img { width: 2.35em; height: 2.35em; padding: 0; background: #1674ce; }
.v3-discover-afr-badge { display: inline-flex; align-items: center; justify-content: center; width: 2.2em; height: 2.2em; flex: none; border-radius: 0.45em; background: #0d5bbd; color: #fff; font-family: Inter, system-ui, -apple-system, sans-serif; font-size: 0.72em; font-weight: 850; letter-spacing: -0.01em; line-height: 1; user-select: none; }
.v3-discover-tags { gap: 0.35em; margin: 0.75em 0 0.55em; }
.v3-discover-tags span { padding: 0.4em 0.55em; background: #e8f0fd; color: #2465ad; font-size: 0.69em; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.v3-discover-story h4 { font-size: 1.08em; font-weight: 760; line-height: 1.28; color: #1d1e20; }
.v3-discover-excerpt { margin: 0.55em 0; font-size: 0.88em; line-height: 1.3; color: #71767c; }
.v3-discover-story-meta { overflow: hidden; margin-top: 0.65em; padding-top: 0.65em; border-top: 1px solid #edf0f3; font-size: 0.72em; white-space: nowrap; text-overflow: ellipsis; }
.v3-discover-story-next { margin-top: 0.7em; }
.v3-discover-story-next .v3-discover-publisher { font-size: 0.74em; }
.v3-discover-story-next .v3-discover-card-actions svg { width: 2.3em; height: 2.3em; }
.v3-discover-announcement { margin-bottom: 0.7em; padding: 0.9em; }
.v3-discover-announcement-top { margin-bottom: 0.5em; gap: 0.65em; }
.v3-discover-ticker { width: 2.9em; height: 2.9em; border-radius: 50%; background: #2372d0; color: white; font-size: 0.8em; }
.v3-discover-ticker.ngs { background: #e3f3e7; color: #137b53; }
.v3-discover-ticker.sho { background: #e6eefe; color: #2467bd; }
.v3-discover-announcement-top b { display: block; font-size: 0.92em; color: #202326; }
.v3-discover-announcement-top strong { font-size: 0.72em; font-weight: 530; color: #727980; }
.v3-discover-announcement-meta { margin: 0 0 0.65em; font-size: 0.72em; color: #777f85; }
.v3-discover-announcement h4 { padding: 0.75em 0; border-top: 1px solid #edf0f3; font-size: 0.94em; line-height: 1.28; }
.v3-discover-announcement .v3-discover-tags { margin: 0 0 0.6em; }
.v3-discover-announcement .v3-discover-tags span { font-size: 0.65em; }
.v3-discover-announcement-actions { display: flex; justify-content: space-around; padding-top: 0.6em; border-top: 1px solid #edf0f3; color: #2467bd; font-size: 0.78em; font-weight: 600; }
.v3-discover-announcement-actions span { display: inline-flex; align-items: center; gap: 0.4em; }
.v3-discover-announcement-actions svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.v3-discover-map-card { position: relative; overflow: hidden; min-height: 27em; padding: 0.7em 0.5em 2.9em; border: 0; border-radius: 0.8em; background: #3579df; box-shadow: none; }
.v3-discover-map-heading { position: relative; z-index: 1; width: 11em; gap: 0.5em; padding: 0.65em; border-radius: 0.6em; background: white; }
.v3-discover-map-heading strong { font-size: 0.7em; }
.v3-discover-map { width: 100%; margin: 0.35em auto 0; }
.v3-discover-map svg { max-height: 19.5em; }
.v3-discover-map .map-state { stroke-width: 1.15; }
.v3-discover-map .map-wa { fill: #f5e4a4; }
.v3-discover-map .map-nt { fill: #c5e8ba; }
.v3-discover-map .map-sa { fill: #f4e1ad; }
.v3-discover-map .map-qld { fill: #f7e9bd; }
.v3-discover-map .map-nsw { fill: #f6e8b9; }
.v3-discover-map .map-vic { fill: #e9a8af; }
.v3-discover-map .map-tas { fill: #f4ddba; }
.v3-discover-map .map-label-state { font-size: 10.5px; }
.v3-discover-map .map-label-value { font-size: 9.5px; }
.v3-discover-growth-scale { width: 100%; max-width: none; margin: 0; font-size: 0.55em; }
.v3-discover-map-controls { position: absolute; right: 0.5em; top: 39%; display: grid; gap: 0.3em; }
.v3-discover-map-controls span { display: grid; width: 1.75em; height: 1.75em; place-items: center; border-radius: 0.4em; background: white; font-size: 1.15em; color: #404d58; }
.v3-discover-map-tabs { position: absolute; bottom: 0.65em; left: 0.55em; right: 0.55em; display: flex; gap: 0.4em; }
.v3-discover-map-tabs span { padding: 0.42em 0.8em; border-radius: 2em; background: white; font-size: 0.73em; color: #3b516a; }
.v3-discover-map-tabs span:first-child { background: #1e61d4; color: white; }
.v3-discover-suburb { margin-top: 0.7em; padding: 0.6em; }
.v3-discover-suburb-photo { width: 4em; height: 3.4em; flex: none; border-radius: 0.5em; background: linear-gradient(155deg, #adbdba 0 40%, #ddd3bf 40% 62%, #889e88 62%); }
.v3-discover-suburb strong { font-size: 0.96em; }
.v3-discover-suburb span:not(.v3-discover-suburb-photo) { margin-top: 0.3em; color: #80878d; font-size: 0.72em; letter-spacing: 0; }
.v3-discover-demo[data-current="groups"] .v3-discover-app-head,
.v3-discover-demo[data-current="groups"] .v3-discover-chips { visibility: hidden; }
.v3-discover-demo[data-current="groups"] .v3-discover-viewport { margin-top: -9.7em; background: #fff; }
.v3-discover-groups { padding: 0; background: #fff; }
.v3-discover-groups-head { display: flex; align-items: center; gap: 0.5em; padding: 1.1em 0.9em 0.85em; border-bottom: 1px solid #edf0f3; }
.v3-discover-groups-head img { width: 2.2em; height: 2.2em; object-fit: contain; }
.v3-discover-groups-head strong { font-size: 1.25em; }
.v3-discover-groups-head > span { display: grid; width: 2em; height: 2em; place-items: center; margin-left: auto; border-radius: 50%; background: #ecf3fd; color: #236ae1; font-size: 1.3em; }
.v3-discover-group-list { border: 0; border-radius: 0; box-shadow: none; }
.v3-discover-group-row { gap: 0.55em; padding: 0.85em 0.75em; }
.v3-discover-group-row strong { font-size: 0.85em; color: #1b1e22; }
.v3-discover-group-row div > span { max-width: 19em; font-size: 0.7em; }
.v3-discover-group-row time { font-size: 0.61em; }
.v3-discover-group-avatar { display: grid; width: 2.8em; height: 2.8em; place-items: center; }
.v3-discover-group-avatar.initials { background: #dbecfb; color: #266ab0; font-weight: 700; }
.v3-discover-group-avatar.warm { background: #f8e9d7; color: #af602c; }
.v3-discover-group-avatar.violet { background: #ece4f8; color: #7955a4; }
.v3-discover-tabbar { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0.45em 0.15em 1.55em; box-shadow: 0 -2px 8px #284b6310; }
.v3-discover-tabbar span { gap: 0.2em; font-size: 0.57em; font-weight: 500; }
.v3-discover-tabbar svg { width: 2.5em; height: 2.5em; }
.v3-discover-panel.is-leaving { animation-duration: 480ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
.v3-discover-panel.is-entering { animation-duration: 540ms; animation-delay: 80ms; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
@media (max-width: 600px) {
  .v3-discover-demo { width: min(380px, 100%); margin-inline: 0; align-self: center; }
  .v3-discover-device { width: 100%; height: auto; aspect-ratio: 390 / 800; padding: 9px; border-radius: 54px; background: #1c242b; box-shadow: 0 24px 60px #112f4421; }
  .v3-discover-screen { border: 0; border-radius: 45px; font-size: clamp(12px, calc(100cqw / 24), 16px); box-shadow: none; }
  .v3-discover-status, .v3-discover-tabbar, .v3-discover-home-indicator { display: grid; }
  .v3-discover-home-indicator { display: block; }
  .v3-discover-app-head { padding-top: 0.55em; }
}
@media (prefers-reduced-motion: reduce) {
  .v3-discover *, .v3-discover *::before, .v3-discover *::after { animation: none !important; transition: none !important; }
}

/* Section 3: the social side of investing — an illustrative group conversation. */
.v3-mates {
  --v3-mates-blue: #1674ce;
  --v3-mates-ink: #0f2331;
  --v3-mates-muted: #66757f;
  --v3-mates-rise: 12px;
  padding: clamp(64px, 6vw, 88px) 0;
  border-top: 1px solid var(--v3-line);
  background: #f4f8fc;
}

.v3-mates-layout {
  display: grid;
  grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
  align-items: center;
  gap: clamp(32px, 3vw, 52px);
  min-height: 520px;
}

.v3-mates-copy {
  min-width: 0;
}

.v3-mates-eyebrow {
  margin: 0 0 25px;
  color: #087fa8;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.16em;
}

.v3-mates-copy h2 {
  margin: 0;
  font-size: clamp(2.6rem, 3.9vw, 3.5rem);
  font-weight: 560;
  letter-spacing: -0.07em;
  line-height: 1.04;
}

.v3-mates-lead {
  max-width: 455px;
  margin: 26px 0 28px;
  color: #53616b;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
}

.v3-mates-cta {
  position: relative;
  display: inline-block;
  color: var(--v3-mates-blue);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 200ms ease;
}

.v3-mates-cta::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px; /* ~5px below the 15px text baseline, within the 4-6px target gap */
  width: 100%;
  height: 1px;
  background: rgba(22, 116, 206, 0.35);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms ease;
}

.v3-mates-cta:hover {
  transform: translateX(1px); /* subtle premium nudge, kept within a 1px max */
}

.v3-mates-cta:hover::after {
  transform: scaleX(1);
}

.v3-mates-cta:focus-visible {
  border-radius: 3px;
  outline: 2px solid var(--v3-mates-blue);
  outline-offset: 5px;
}

.v3-mates-stage {
  display: flex;
  width: min(100%, 480px);
  min-width: 0;
  flex-direction: column;
  gap: 14px;
}

.v3-mates-group {
  display: flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  gap: 14px;
  padding: 12px 20px 12px 14px;
  border: 1px solid #dfe8f1;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(34, 69, 104, 0.05);
}

.v3-mates-group-avatars {
  display: flex;
  flex: none;
  align-items: center;
}

.v3-mates-group-avatars i {
  display: grid;
  width: 32px;
  height: 32px;
  flex: none;
  place-items: center;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #dbecfb;
  color: #266ab0;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

.v3-mates-group-avatars i + i {
  margin-left: -10px;
}

.v3-mates-group-avatars img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v3-mates-group-text {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.v3-mates-group-text strong {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.v3-mates-group-text > span {
  color: var(--v3-mates-muted);
  font-size: 11px;
}

.v3-mates-thread {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-left: 0;
}

.v3-mates-thread-line {
  position: absolute;
  top: -20px;
  bottom: 18px;
  left: 22px;
  width: 1.5px;
  background: rgba(22, 116, 206, 0.28);
}

.v3-mates-message {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.v3-mates-avatar {
  display: grid;
  width: 44px;
  height: 44px;
  flex: none;
  place-items: center;
  overflow: hidden;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #dbecfb;
  box-shadow: 0 1px 4px rgba(34, 69, 104, 0.08);
  color: #266ab0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.v3-mates-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v3-mates-avatar-initials {
  background: #e7ecf2;
  color: #4a5d70;
}

.v3-mates-bubble {
  width: 420px;
  min-width: 0;
  flex: 1;
  max-width: 420px;
  padding: 17px 20px 18px;
  border: 1px solid #e2eaf2;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(34, 69, 104, 0.07);
}

.v3-mates-message-plain .v3-mates-bubble {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: none;
}

.v3-mates-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 5px;
}

.v3-mates-meta strong {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.v3-mates-meta time {
  color: #93a0aa;
  font-size: 11px;
}

.v3-mates-text {
  margin: 0;
  color: #2c3a45;
  font-size: 14px;
  line-height: 1.45;
}

.v3-mates-share {
  margin-left: 60px;
  max-width: 420px;
}

.v3-mates-share-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  color: var(--v3-mates-muted);
  font-size: 12px;
}

.v3-mates-share-icon svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--v3-mates-blue);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.v3-mates-stock {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 20px 22px 16px;
  border: 1px solid #d9e5f1;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(34, 69, 104, 0.1);
}

.v3-mates-stock-ticker {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  background: #1674ce;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.v3-mates-stock-id {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.v3-mates-stock-id strong {
  font-size: 15px;
  font-weight: 700;
}

.v3-mates-stock-id span {
  overflow: hidden;
  color: var(--v3-mates-muted);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v3-mates-stock-spark {
  width: 88px;
  height: 32px;
}

.v3-mates-stock-spark svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #12855c;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.v3-mates-stock-price {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.v3-mates-stock-price strong {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.v3-mates-stock-move {
  color: #12855c;
  font-size: 12px;
  font-weight: 600;
}

.v3-mates-stock-footer {
  grid-column: 2 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.v3-mates-stock-tag {
  padding: 4px 10px;
  border-radius: 999px;
  background: #e8f0fd;
  color: #2465ad;
  font-size: 11px;
  font-weight: 600;
}

.v3-mates-stock-foot {
  margin: 0;
  color: #93a0aa;
  font-size: 9px;
}

.v3-mates-reaction {
  display: flex;
  align-items: center;
  gap: 16px;
}

.v3-mates-reaction p {
  margin: 0;
  color: var(--v3-mates-muted);
  font-size: 14px;
}

.v3-mates-reaction strong {
  color: var(--v3-mates-ink);
  font-weight: 650;
}

.v3-mates-reaction .v3-mates-avatar {
  width: 36px;
  height: 36px;
  font-size: 12px;
}

.v3-mates-emoji {
  font-size: 15px;
}

/* Looping story: steps are visible by default and only animate once JS arms the section. */
.v3-mates.is-ready [data-mates-step] {
  opacity: 0;
}

.v3-mates.is-playing [data-mates-step] {
  animation-duration: 12s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.v3-mates.is-playing [data-mates-step="1"] { animation-name: v3-mates-step-1; }
.v3-mates.is-playing [data-mates-step="2"] { animation-name: v3-mates-step-2; }
.v3-mates.is-playing [data-mates-step="3"] { animation-name: v3-mates-step-3; }
.v3-mates.is-playing [data-mates-step="4"] { animation-name: v3-mates-step-4; }
.v3-mates.is-playing [data-mates-step="5"] { animation-name: v3-mates-step-5; }

.v3-mates.is-playing .v3-mates-stock-spark path {
  stroke-dasharray: 160;
  animation: v3-mates-draw 12s linear infinite both;
}

.v3-mates.is-playing .v3-mates-emoji {
  animation: v3-mates-emoji 12s linear infinite both;
}

@keyframes v3-mates-step-1 {
  0%, 5% { opacity: 0; transform: translateY(var(--v3-mates-rise)); }
  10%, 86% { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; transform: translateY(0); }
}

@keyframes v3-mates-step-2 {
  0%, 12.5% { opacity: 0; transform: translateY(var(--v3-mates-rise)); }
  17.5%, 86% { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; transform: translateY(0); }
}

@keyframes v3-mates-step-3 {
  0%, 25% { opacity: 0; transform: translateY(var(--v3-mates-rise)); }
  30%, 86% { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; transform: translateY(0); }
}

@keyframes v3-mates-step-4 {
  0%, 37.5% { opacity: 0; transform: translateY(var(--v3-mates-rise)) scale(0.98); }
  42.5%, 86% { opacity: 1; transform: translateY(0) scale(1); }
  95%, 100% { opacity: 0; transform: translateY(0) scale(1); }
}

@keyframes v3-mates-step-5 {
  0%, 50% { opacity: 0; transform: translateY(6px); }
  54.5%, 86% { opacity: 1; transform: translateY(0); }
  95%, 100% { opacity: 0; transform: translateY(0); }
}

@keyframes v3-mates-draw {
  0%, 40% { stroke-dashoffset: 160; }
  52%, 100% { stroke-dashoffset: 0; }
}

@keyframes v3-mates-emoji {
  0%, 50% { transform: scale(0.92); }
  54.5%, 100% { transform: scale(1); }
}

@media (max-width: 1180px) {
  .v3-mates-layout {
    gap: clamp(36px, 4vw, 64px);
    min-height: 0;
  }

  .v3-mates-copy h2 {
    font-size: clamp(2.3rem, 4vw, 3rem);
  }

  .v3-mates-lead {
    margin: 22px 0 28px;
    font-size: 17px;
  }

  .v3-mates-bubble,
  .v3-mates-share {
    max-width: none;
  }
}

@media (max-width: 960px) {
  .v3-mates-layout {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 38px;
  }

  .v3-mates-copy h2 {
    font-size: clamp(2.6rem, 6.4vw, 3.6rem);
  }

  .v3-mates-lead {
    max-width: 560px;
  }
}

@media (max-width: 600px) {
  .v3-mates {
    --v3-mates-rise: 8px;
    padding: 62px 0 74px;
  }

  .v3-shell.v3-mates-layout {
    width: min(100% - 40px, 1440px);
    gap: 28px;
  }

  .v3-mates-copy h2 {
    font-size: clamp(2.3rem, 9.6vw, 3rem);
  }

  .v3-mates-lead {
    margin: 18px 0 22px;
    font-size: 15px;
  }

  .v3-mates-stage {
    gap: 14px;
  }

  .v3-mates-message {
    gap: 10px;
  }

  .v3-mates-avatar {
    width: 34px;
    height: 34px;
    font-size: 12px;
  }

  .v3-mates-thread-line {
    left: 17px;
  }

  .v3-mates-bubble {
    padding: 12px 14px 13px;
  }

  .v3-mates-text {
    font-size: 14px;
  }

  .v3-mates-share {
    margin-left: 44px;
  }

  .v3-mates-stock {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px 12px;
    padding: 14px;
  }

  .v3-mates-stock-spark {
    grid-column: 2 / -1;
    width: 100%;
    height: 28px;
  }
}

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

  .v3-mates [data-mates-step] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Closing CTA + newsletter */
.v3-closing {
  --v3-closing-blue: #1674ce;
  --v3-closing-ink: #0f2331;
  padding: clamp(88px, 9vw, 136px) 0 clamp(72px, 7vw, 104px);
  border-top: 1px solid var(--v3-line);
  background: #fff;
  color: var(--v3-closing-ink);
}

.v3-closing-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.v3-closing-main {
  max-width: 760px;
  text-align: center;
}

.v3-closing-eyebrow {
  margin: 0 0 26px;
  color: #087fa8;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.16em;
}

.v3-closing-main h2 {
  margin: 0;
  font-size: clamp(2.8rem, 5vw, 4.4rem);
  font-weight: 560;
  letter-spacing: -0.07em;
  line-height: 1.02;
}

.v3-closing-main h2 span {
  display: block;
}

.v3-closing-lead {
  max-width: 480px;
  margin: 28px auto 0;
  color: #53616b;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
}

.v3-closing-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 30px;
  margin-top: 38px;
}

.v3-closing-primary {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--v3-closing-blue);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background-color 180ms ease, transform 180ms ease;
}

.v3-closing-primary:hover {
  background: #1265b5;
  transform: translateY(-1px);
}

.v3-closing-primary:focus-visible,
.v3-newsletter-form button:focus-visible {
  outline: 2px solid var(--v3-closing-blue);
  outline-offset: 4px;
}

.v3-newsletter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: start;
  gap: 24px 56px;
  width: min(100%, 980px);
  margin-top: clamp(80px, 8vw, 112px);
  padding-top: 40px;
  border-top: 1px solid var(--v3-line);
}

.v3-newsletter-copy h3 {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.25;
}

.v3-newsletter-copy p {
  max-width: 380px;
  margin: 10px 0 0;
  color: var(--v3-muted);
  font-size: 15px;
  line-height: 1.55;
}

.v3-newsletter-form {
  margin: 0;
}

.v3-newsletter-row {
  display: flex;
  gap: 10px;
}

.v3-newsletter-form input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #d5dde2;
  border-radius: 10px;
  background: #fff;
  color: var(--v3-closing-ink);
  font: inherit;
  font-size: 16px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.v3-newsletter-form input::placeholder {
  color: #7d8991;
}

.v3-newsletter-form input:focus {
  outline: none;
  border-color: var(--v3-closing-blue);
  box-shadow: 0 0 0 3px rgba(22, 116, 206, 0.16);
}

.v3-newsletter-form input[aria-invalid="true"] {
  border-color: #c2412d;
}

.v3-newsletter-form button {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--v3-closing-ink);
  border-radius: 10px;
  background: #fff;
  color: var(--v3-closing-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.v3-newsletter-form button:hover:not(:disabled) {
  background: var(--v3-closing-ink);
  color: #fff;
}

.v3-newsletter-form button:disabled {
  border-color: #9aa6ae;
  color: #5d6a73;
  cursor: progress;
}

.v3-newsletter-note {
  margin: 10px 0 0;
  color: var(--v3-muted);
  font-size: 13px;
}

.v3-newsletter-status {
  margin: 8px 0 0;
  font-size: 14px;
}

.v3-newsletter-status:empty {
  display: none;
}

.v3-newsletter-status.is-error {
  color: #b42318;
}

.v3-newsletter-success {
  padding-top: 4px;
  outline: none;
}

.v3-newsletter-success p {
  margin: 0;
  color: var(--v3-muted);
  font-size: 15px;
  line-height: 1.5;
}

.v3-newsletter-success .v3-newsletter-success-title {
  margin-bottom: 4px;
  color: var(--v3-closing-ink);
  font-size: 17px;
  font-weight: 600;
}

.v3-newsletter [hidden] {
  display: none !important;
}

@media (max-width: 900px) {
  .v3-newsletter {
    grid-template-columns: 1fr;
    max-width: 560px;
  }
}

@media (max-width: 600px) {
  .v3-closing {
    padding: 72px 0 64px;
  }

  .v3-shell.v3-closing-inner {
    width: min(100% - 40px, 1440px);
  }

  .v3-closing-main h2 {
    font-size: clamp(2.4rem, 11vw, 3rem);
  }

  .v3-closing-lead {
    margin-top: 20px;
    font-size: 16px;
  }

  .v3-closing-actions {
    flex-direction: column;
    gap: 8px;
    margin-top: 30px;
  }

  .v3-closing-primary {
    width: 100%;
    max-width: 340px;
  }

  .v3-newsletter {
    margin-top: 56px;
    padding-top: 32px;
  }

  .v3-newsletter-copy h3 {
    font-size: 19px;
  }

  .v3-newsletter-row {
    flex-direction: column;
  }

  .v3-newsletter-form button {
    width: 100%;
  }
}

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