/* The Isobel page. Values are the design handoff's, except where the site's shell and hero type win:
   the .wrap column (1080px, so the story rows meet at a 40px gap), the kicker, headline, lede and CTA. */
.isobel { font-size: 15px; line-height: 1.6; overflow-x: clip; }
.isb-mono { font-family: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; }

/* Header: the Isobel lockup in place of the company logo: the mark, then the wordmark at 0.72 of its
   height, a gap of 0.3. */
.logo-isobel { gap: 9px; align-items: center; }
.logo-isobel img { height: 22px; width: auto; display: block; }
.logo-isobel .mark { height: 30px; width: 30px; }

/* Phones: the picture comes right after the headline, then the sentence and the pill, a size down.
   The copy wrapper dissolves so its lines and the orbit are ordered as one column. */
@media (max-width: 639px) {
  .isb-hero .hero-copy { display: contents; }
  .isobel .isb-hero { row-gap: 0; }
  .isb-hero .kicker { order: 1; }
  .isb-hero h1 { order: 2; }
  .isb-hero .isb-orbit { order: 3; margin: 48px auto 40px; }
  .isb-hero .lede { order: 4; margin-top: 0; }
  .isb-hero .cta { order: 5; }
  /* On phones the early-access call is the company site's underlined link, not a block. */
  .isb-hero .cta {
    width: auto; height: auto; justify-self: start; margin-top: 32px; padding: 0 0 6px; border-radius: 0;
    background: none; box-shadow: none; color: #0D5964; font-size: 15px; font-weight: 700;
    border-bottom: 1px solid rgba(13, 89, 100, 0.28);
  }
  .isb-hero .cta:hover { background: none; color: #0A4750; border-bottom-color: #0D5964; }
  /* The closing band at phone proportions: closer padding, softer corner, a tighter statement, no reserved blank line. */
  .isobel .isb-band { padding: 24px; border-radius: 20px; gap: 24px; }
  .isobel .isb-band > p { font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; }
}

/* The header's early-access pill: the hero pill at nav size. Phones hide it; the hero's own is a thumb away. */
.cta-nav { margin-top: 0; height: 36px; padding: 0 16px; font-size: 14px; box-shadow: none; }
@media (max-width: 639px) { .cta-nav { display: none; } }

/* Hero */
.isb-hero {
  padding-top: clamp(48px, 7vw, 80px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 56px clamp(32px, 4vw, 72px);
  align-items: start;
}
.isb-hero-copy { min-width: 0; }
.isobel h1 .isb-h1-ink { display: block; color: #14303A; }
.isobel h1 .isb-h1-teal { display: inline-flex; align-items: baseline; color: #0D5964; }
.isobel h1 .isb-h1-teal i { width: 0.16em; height: 0.16em; border-radius: 50%; background: #0D5964; display: block; margin-left: 0.04em; }

/* The orbit: a figure of six accounts around everything they add up to. */
/* The drawing is cropped to its figure, so it fills its column and ends on the header's right edge. */
.isb-orbit { min-width: 0; width: 100%; max-width: 560px; justify-self: end; }
.orb { display: block; width: 100%; height: auto; overflow: visible; }
.orb .ring { fill: none; stroke: #C9D6D4; stroke-width: 1; stroke-dasharray: 1.5 3; stroke-linecap: round; }
.orb .link { fill: none; stroke: #157B8C; stroke-opacity: 0.6; stroke-width: 1; stroke-dasharray: 1; }
.orb .dot { fill: #157B8C; }
.orb .hub { transform-origin: 260px 220px; }
.orb .hub text { font-family: 'Satoshi', sans-serif; font-size: 13px; font-weight: 500; fill: #FFFFFF; text-anchor: middle; }
.orb .acc text {
  font-family: 'Satoshi', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  fill: #5A6D75;
  text-anchor: middle;
}
/* Before it plays (scripted pages only): the centre small, the accounts 80px out along their radial line, the links undrawn. */
.js .orb:not(.on) .hub, .js .orb:not(.on) .glow, .js .orb:not(.on) .acc, .js .orb:not(.on) .dot { opacity: 0; }
.js .orb:not(.on) .hub { transform: scale(0.6); }
.js .orb:not(.on) .acc-0 { transform: translate(-61.3px, -51.4px); }
.js .orb:not(.on) .acc-1 { transform: translate(61.3px, -51.4px); }
.js .orb:not(.on) .acc-2 { transform: translate(-77.3px, 20.7px); }
.js .orb:not(.on) .acc-3 { transform: translate(-13.9px, 78.8px); }
.js .orb:not(.on) .acc-4 { transform: translate(78.8px, 13.9px); }
.js .orb:not(.on) .acc-5 { transform: translate(45.9px, 65.5px); }
.js .orb:not(.on) .link { stroke-dashoffset: 1; }
/* The play: centre, then the accounts 80ms apart, then the links with their midpoint dots. */
.orb .hub, .orb .glow { transition: opacity 0.3s ease-out, transform 0.3s ease-out; }
.orb .acc { transition: opacity 0.4s ease-out, transform 0.4s ease-out; }
.orb .acc-0 { transition-delay: 0.3s; }
.orb .acc-1 { transition-delay: 0.38s; }
.orb .acc-2 { transition-delay: 0.46s; }
.orb .acc-3 { transition-delay: 0.54s; }
.orb .acc-4 { transition-delay: 0.62s; }
.orb .acc-5 { transition-delay: 0.7s; }
.orb .link { transition: stroke-dashoffset 0.3s ease-out; }
.orb .link-0 { transition-delay: 1.1s; }
.orb .link-1 { transition-delay: 1.14s; }
.orb .link-2 { transition-delay: 1.18s; }
.orb .link-3 { transition-delay: 1.22s; }
.orb .link-4 { transition-delay: 1.26s; }
.orb .link-5 { transition-delay: 1.3s; }
.orb .dot { transition: opacity 0.12s ease-out; }
.orb .dot-0 { transition-delay: 1.4s; }
.orb .dot-1 { transition-delay: 1.44s; }
.orb .dot-2 { transition-delay: 1.48s; }
.orb .dot-3 { transition-delay: 1.52s; }
.orb .dot-4 { transition-delay: 1.56s; }
.orb .dot-5 { transition-delay: 1.6s; }
/* Finished: hovering a circle lifts it and lights its links and partners, slowly; the rest mutes a
   beat later, and everything eases back on the way out. The shadow starts at zero so it can tween. */
.orb.done .acc { transition: opacity 0.5s ease 0.08s, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.orb.done .acc circle { filter: drop-shadow(0 0 0 rgba(16, 47, 54, 0)); transition: filter 0.45s ease; }
.orb.done .acc.near { transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.orb.done .link { transition: stroke-opacity 0.5s ease 0.08s; }
.orb.done .link.lit { transition: stroke-opacity 0.35s ease; }
.orb.done .dot { transition: opacity 0.5s ease 0.08s; }
.orb.done .dot.lit { transition: opacity 0.35s ease; }
.orb.hover .acc { opacity: 0.45; }
.orb.hover .acc.near { opacity: 1; }
.orb.hover .acc.hot { transform: translateY(-2px); }
.orb.hover .acc.hot circle { filter: drop-shadow(0 6px 12px rgba(16, 47, 54, 0.18)); }
.orb.hover .link { stroke-opacity: 0.35; }
.orb.hover .link.lit { stroke-opacity: 1; }
.orb.hover .dot { opacity: 0.35; }
.orb.hover .dot.lit { opacity: 1; }
.orb.no *, .isb-r2.no * { transition: none !important; }

/* What Isobel does */
.isb-story { padding-top: clamp(56px, 12vw, 96px); }
.isb-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #157B8C; }
.isobel .isb-h2 { margin-top: 14px; font-size: clamp(27px, 7.2vw, 46px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.1; color: #172D36; text-wrap: balance; }
.isb-h2 span { color: #157B8C; }
.isb-rows { margin-top: 40px; display: flex; flex-direction: column; gap: 24px; }
.isb-row { display: grid; grid-template-columns: 400px 640px; gap: 40px; align-items: center; }
.isb-row.rev { grid-template-columns: 640px 400px; }
.isb-row.rev > .isb-text { order: 2; }
.isb-row.r3 { margin-top: 106px; }
.isb-text { min-width: 0; }
.isb-num { font-size: 12px; color: #157B8C; }
.isobel .isb-text h3 { margin-top: 12px; font-size: clamp(22px, 5.9vw, 32px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; color: #172D36; }
.isb-text h3 + p { margin-top: 12px; max-width: 360px; font-size: 16px; line-height: 1.5; color: #5A6D75; text-wrap: pretty; }
.isb-viz { width: 640px; height: 360px; }

/* Row 1: the accounts and their total. */
.isb-r1 { display: flex; flex-direction: column; justify-content: center; }
.isb-accounts { display: grid; grid-template-columns: 296px 296px; gap: 20px 48px; }
.isb-accounts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 16px; line-height: 22px; color: #172D36; }
.isb-accounts > div span:last-child { font-variant-numeric: tabular-nums; }
.isb-rule { margin-top: 24px; height: 1px; background: #D9E3E1; }
.isb-total { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.isb-total strong { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #172D36; }
.isb-total span { font-size: 14px; color: #5A6D75; }

/* Row 2: the week's filings, and the three about what you own. */
.isb-r2 { position: relative; }
.isb-r2-list { position: absolute; left: 0; top: 45px; width: 240px; }
.isb-r2-head { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; line-height: 16px; color: #5A6D75; }
.isb-r2-list ul { list-style: none; margin-top: 14px; }
.isb-r2-list li { position: relative; height: 24px; line-height: 24px; padding-left: 16px; font-size: 13px; color: #9FB3C8; opacity: 0.7; white-space: nowrap; }
.isb-r2-list li.held { color: #172D36; opacity: 1; transition: color 0.2s ease-out, opacity 0.2s ease-out; }
.isb-r2-list li.held i { position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: #157B8C; transition: background-color 0.2s ease-out; }
.isb-r2-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
/* Phones stack the list over the cards, so the connectors run down the left margin instead, each in its own lane. */
.isb-r2-svg-phone { display: none; position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.isb-r2-svg-phone path { fill: none; stroke: #157B8C; stroke-opacity: 0.6; stroke-width: 1; stroke-linejoin: round; }
.isb-r2-svg path { fill: none; stroke: #157B8C; stroke-opacity: 0.6; stroke-width: 1; stroke-dasharray: 1; transition: stroke-dashoffset 0.3s ease-out; }
.isb-r2-cards { position: absolute; left: 280px; top: 22px; width: 360px; display: flex; flex-direction: column; gap: 20px; }
.isb-card {
  height: 92px;
  padding: 14px 16px;
  border-radius: 16px;
  background: #FFFFFF;
  border: 1px solid #D9E3E1;
  box-shadow: 0 6px 20px rgba(23, 45, 54, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.isb-r2-svg path:nth-child(1), .isb-card:nth-child(1) { transition-delay: 0.2s; }
.isb-r2-svg path:nth-child(2), .isb-card:nth-child(2) { transition-delay: 0.35s; }
.isb-r2-svg path:nth-child(3), .isb-card:nth-child(3) { transition-delay: 0.5s; }
.js .isb-r2:not(.on) li.held { color: #9FB3C8; opacity: 0.7; }
.js .isb-r2:not(.on) li.held i { background: #9FB3C8; }
.js .isb-r2:not(.on) .isb-r2-svg path { stroke-dashoffset: 1; }
.js .isb-r2:not(.on) .isb-card { opacity: 0; transform: translateX(-12px); }
.isb-card-top { display: flex; align-items: center; gap: 8px; line-height: 18px; white-space: nowrap; }
.isb-card-top b { font-size: 13px; font-weight: 600; color: #172D36; }
.isb-card-top span { font-size: 13px; color: #5A6D75; }
.isb-card-top .isb-tag { margin-left: auto; font-size: 11px; line-height: 14px; border: 1px solid #D9E3E1; border-radius: 999px; padding: 2px 8px; }
.isb-card-top .isb-date { font-size: 12px; }
.isb-card-label { font-size: 14px; line-height: 18px; color: #172D36; }
.isb-card-in { font-size: 12px; line-height: 16px; color: #157B8C; }
.isb-r2-cap { position: absolute; left: 0; bottom: 0; font-size: 12px; color: #5A6D75; }

/* Row 3: a question, the answer, the source. */
.isb-r3 { height: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.isb-ask { width: 100%; max-width: 560px; }
.isb-field {
  min-height: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 12px 20px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1px solid #D9E3E1;
}
.isb-field img { display: block; flex: none; }
.isb-field b { font-size: 13px; font-weight: 600; color: #0D5964; white-space: nowrap; }
.isb-field i { width: 1px; height: 18px; background: #D9E3E1; flex: none; }
.isb-field span { min-width: 0; font-size: 13px; color: #5A6D75; }
.isb-answer { margin-top: 16px; font-size: 17px; line-height: 1.5; color: #172D36; text-wrap: pretty; }
.isb-source { margin-top: 10px; font-size: 11px; color: #5A6D75; }
.isb-story-cap { margin-top: clamp(40px, 8vw, 68px); text-align: center; font-size: 13px; color: #5A6D75; }

/* How Isobel knows */
.isb-trust { margin-top: clamp(64px, 14vw, 120px); }
.isb-trust-eyebrow { font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: #157B8C; margin-bottom: 18px; }
.isobel .isb-trust-h2 { font-size: clamp(27px, 7.2vw, 46px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.1; color: #0B4852; text-wrap: balance; }
.isb-trust-h2 span { color: #157B8C; }
.isb-trust-sub { font-size: 15px; line-height: 1.6; color: #3E5862; max-width: 30em; margin-top: 18px; text-wrap: pretty; }
.isb-spec { margin-top: 48px; border-top: 1px solid #D9E3E1; }
.isb-spec > div { display: flex; flex-wrap: wrap; gap: 6px 0; padding: 20px 0; border-bottom: 1px solid #D9E3E1; }
.isb-spec dt { flex: 0 0 220px; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #157B8C; padding-top: 4px; }
.isb-spec dd { flex: 1 1 320px; min-width: 0; }
.isb-spec dd p { font-size: 16px; line-height: 1.5; color: #172D36; }
.isb-spec dd .isb-mono { margin-top: 6px; font-size: 11px; color: #5A6D75; }

/* The closing band and the waitlist */
.isb-close { margin-top: clamp(48px, 7vw, 104px); }
.isb-band { border-radius: 28px; background: #0F3A44; color: #FFFFFF; padding: clamp(36px, 5vw, 64px); display: flex; flex-direction: column; gap: 36px; }
.isb-band > p { font-size: clamp(24px, 7vw, 32px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.2; color: #FFFFFF; text-wrap: balance; }
.isb-form { max-width: 560px; }
/* A small label names the form; the submit is a teal arrow inside the field's right end. */
.isb-form-label { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #9ACBD2; }
.isb-form-row { position: relative; }
.isb-input {
  display: block;
  width: 100%;
  height: 50px;
  background: #FFFFFF;
  border: 1px solid #C9DDE0;
  color: #172D36;
  font-size: 15px;
  padding: 0 60px 0 20px;
  border-radius: 999px;
  outline: none;
}
.isb-input:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35); }
.isb-input[aria-invalid="true"] { border-color: #C15D68; }
.isb-join {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 999px;
  border: 0;
  background: #0D5964;
  color: #FFFFFF;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s;
}
.isb-join:hover { background: #0A4750; }
.isb-join[aria-disabled="true"] { opacity: 0.5; cursor: default; }
.isb-join:focus-visible { outline-color: #FFFFFF; }
/* The status line takes room only when it has something to say, so the band stays balanced. */
.isb-msg { font-size: 14px; color: #FFFFFF; }
.isb-msg:not(:empty) { margin-top: 12px; }
.isb-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Footer: the disclaimer, then the site's facts row and footer. */
.isb-disclaimer { margin-top: clamp(64px, 7vw, 104px); font-size: 13px; line-height: 1.6; color: #647A83; max-width: 60em; }
.isb-facts { margin-top: 28px; }
.foot-home a { color: #0D5964; font-weight: 500; }
.foot-home a:hover { color: #0A4750; }

@media (max-width: 1159px) {
  .isb-row { grid-template-columns: minmax(0, 1fr) 640px; gap: 48px; }
  .isb-row.rev { grid-template-columns: 640px minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .isb-rows { gap: 40px; }
  .isb-row, .isb-row.rev { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .isb-row.rev > .isb-text { order: 0; }
  .isb-row.r3 { margin-top: 0; }
  .isb-viz { justify-self: start; width: 100%; max-width: 640px; height: auto; }
  .isb-r2 { width: 640px; height: 360px; }
}
/* Phones keep row 2's shape: a narrow list, squeezed cards beside it, short connectors between. */
@media (max-width: 699px) {
  .isb-viz, .isb-r2 { width: 100%; height: auto; }
  /* Row 1 on phones: six tiles, two across, named like the orbit's labels, with the value beneath. */
  .isb-accounts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
  .isb-accounts > div { flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.2; }
  .isb-accounts > div span:first-child { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: #5A6D75; }
  .isb-accounts > div span:last-child { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
  .isb-rule { margin-top: 16px; }
  .isb-total { margin-top: 12px; }
  .isb-row { gap: 24px; }
  .isb-r2 { display: grid; grid-template-columns: 124px minmax(0, 1fr); column-gap: 28px; align-items: start; }
  .isb-r2-list, .isb-r2-cards, .isb-r2-cap { position: static; width: auto; }
  .isb-r2-list li { font-size: 12px; }
  .isb-r2-cards { gap: 16px; }
  .isb-card { height: 80px; padding: 12px; }
  .isb-card-top span:not(.isb-tag) { display: none; }
  .isb-card-label { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .isb-r2-cap { grid-column: 1 / -1; margin-top: 16px; }
  .isb-r2-svg { display: none; }
  .isb-r2-svg-phone { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .isobel *, .isobel *::before, .isobel *::after { animation: none !important; transition: none !important; }
}