/* The Isobel page. Values are the design handoff's. The one shared change: the content column
   is the site's .wrap (1080px), so the story rows meet at a 40px gap instead of 80px. */
.isobel { font-size: 15px; line-height: 1.6; overflow-x: clip; }
.isobel h1, .isobel h2, .isobel h3 { margin: 0; }
.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: 11px; align-items: center; }
.logo-isobel img { height: 26px; width: auto; display: block; }
.logo-isobel .mark { height: 36px; width: 36px; }

/* Hero */
.isb-hero {
  padding-top: clamp(40px, 5vw, 80px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 48px clamp(32px, 4vw, 72px);
  align-items: center;
}
.isb-hero-copy { min-width: 0; }
.isb-kicker { font-size: 16px; font-weight: 500; color: #0D5964; }
.isobel h1 {
  font-size: clamp(44px, 4.8vw, 74px);
  font-weight: 600;
  letter-spacing: -0.055em;
  line-height: 1;
  margin-top: clamp(24px, 2.6vw, 40px);
  color: #14303A;
}
.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; }
.isb-lede { font-size: 15px; line-height: 1.6; color: #4B6670; margin-top: clamp(24px, 2.6vw, 36px); max-width: 23em; text-wrap: pretty; }
.isb-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(28px, 3vw, 44px);
  height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  background: #0D5964;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(10, 48, 58, 0.14), 0 12px 24px -14px rgba(10, 64, 76, 0.6);
  transition: background 0.15s;
}
.isb-cta:hover { background: #0A4750; color: #FFFFFF; }

/* The orbit: a figure of six accounts around everything they add up to. */
.isb-orbit { min-width: 0; width: 100%; max-width: 520px; 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: 600; fill: #FFFFFF; text-anchor: middle; }
.orb .acc text {
  font-family: 'Satoshi', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  fill: #5A6D75;
  text-anchor: middle;
  paint-order: stroke;
  stroke: #FBFCFC;
  stroke-width: 5px;
  stroke-linejoin: round;
}
/* 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.24s 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 .dot { transition: opacity 0.12s ease-out; }
.orb .dot-0 { transition-delay: 1.34s; }
.orb .dot-1 { transition-delay: 1.38s; }
.orb .dot-2 { transition-delay: 1.42s; }
.orb .dot-3 { transition-delay: 1.46s; }
.orb .dot-4 { transition-delay: 1.5s; }
/* Finished: hovering a circle lifts it and lights its links and partners; the rest drops to 40%. */
.orb.done .acc { transition: opacity 0.15s ease-out, transform 0.15s ease-out; transition-delay: 0s; }
.orb.done .link { transition: stroke-opacity 0.15s ease-out; transition-delay: 0s; }
.orb.done .dot { transition: opacity 0.15s ease-out; transition-delay: 0s; }
.orb.hover .acc { opacity: 0.4; }
.orb.hover .acc.near { opacity: 1; }
.orb.hover .acc.hot { transform: translateY(-1px); }
.orb.hover .link { stroke-opacity: 0.4; }
.orb.hover .link.lit { stroke-opacity: 1; }
.orb.hover .dot { opacity: 0.4; }
.orb.hover .dot.lit { opacity: 1; }
.orb.no *, .isb-r2.no * { transition: none !important; }

/* What Isobel does */
.isb-story { padding-top: 120px; }
.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: 44px; 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: 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; }
.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: #172D36; 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: 68px; text-align: center; font-size: 13px; color: #5A6D75; }

/* How Isobel knows */
.isb-trust { margin-top: 160px; }
.isb-trust-eyebrow { font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: #167F90; margin-bottom: 18px; }
.isobel .isb-trust-h2 { font-size: clamp(34px, 4.6vw, 64px); font-weight: 500; letter-spacing: -0.055em; line-height: 1; color: #0B4852; text-wrap: balance; }
.isb-trust-h2 span { color: #167F90; }
.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(64px, 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: 32px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.2; color: #FFFFFF; max-width: 24em; text-wrap: balance; }
.isb-form { max-width: 560px; }
.isb-form-row { display: flex; gap: 10px; flex-wrap: wrap; }
.isb-input {
  flex: 1 1 220px;
  min-width: 0;
  height: 50px;
  background: #FFFFFF;
  border: 1px solid #C9DDE0;
  color: #172D36;
  font-size: 15px;
  padding: 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 {
  display: inline-flex;
  align-items: center;
  height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  border: 0;
  background: #FFFFFF;
  color: #0F3A44;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s;
}
.isb-join:hover { background: #E4F0F2; }
.isb-join:focus-visible { outline-color: #FFFFFF; }
.isb-msg { min-height: 1.6em; margin-top: 12px; font-size: 14px; color: #FFFFFF; }
.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; }
}
@media (max-width: 699px) {
  .isb-viz, .isb-r2 { width: 100%; height: auto; }
  .isb-accounts { grid-template-columns: minmax(0, 1fr); }
  .isb-r2-list, .isb-r2-cards, .isb-r2-cap { position: static; width: auto; }
  .isb-r2-cards { margin-top: 24px; }
  .isb-r2-cap { margin-top: 16px; }
  .isb-r2-svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .isobel *, .isobel *::before, .isobel *::after { animation: none !important; transition: none !important; }
}