/* Angel Squad sub-pages (Investments, Story, Wall of Love) in the homepage's visual language.
   Load after style.css and experience.css, which supply the tokens, type, buttons, header, mobile menu and footer.
   Everything here is scoped to body.sp so it can never affect the homepage; each page adds its own <slug>.css. */

.sp-page{scroll-padding-top:24px}
@media (prefers-reduced-motion:no-preference){.sp-page{scroll-behavior:smooth}}
.sp [hidden]{display:none!important}
.sp .ui-arrow{width:1em;height:1em}

/* Header: the homepage bar in normal flow, with the current page underlined in both navs. */
.sp .site-header{position:relative}
.sp .site-header nav a[aria-current=page]:after{transform:scaleX(1)}
.sp .menu-links a[aria-current=page]>span:nth-child(2){text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.18em}

/* Buttons: the homepage pill, plus its yellow and outline variants. */
.sp .button.sp-yellow{background:var(--yellow);color:var(--ink)}
.sp .button.sp-outline{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
@media (hover:hover){
  .sp .button.sp-yellow:hover{background:#ffda83}
  .sp .button.sp-outline:hover{background:var(--ink);color:var(--paper)}
}
.sp-pill{display:inline-flex;align-items:center;align-self:flex-start;border:1px solid #1e1b1a55;border-radius:100px;padding:7px 11px;letter-spacing:.02em}
.sp-eyebrow{display:inline-flex;align-items:center;gap:10px}
.sp-chevron{width:10px;height:14px;flex:none}

/* Page hero: a full-bleed colour band with the homepage's display headline.
   Set --hero to a brand colour on the section; add .sp-hero--dark for light text on ink. */
.sp-hero{--hero:var(--violet);position:relative;overflow:hidden;padding:clamp(64px,8vw,128px) var(--gutter) clamp(64px,7.5vw,116px);background:var(--hero);color:var(--ink)}
.sp-hero--dark{--hero:var(--ink);color:var(--paper)}
.sp-hero h1{max-width:13em;font-size:clamp(58px,8.4vw,150px);font-weight:700;line-height:.94;letter-spacing:-.065em}
.sp-hero h1 .serif-word{font-weight:400;letter-spacing:-.06em}
.sp-hero--dark h1 .serif-word{color:var(--yellow)}
.sp-line{display:block;overflow:hidden;padding-right:.08em;padding-bottom:.12em;margin-bottom:-.12em}
.sp-line>span{display:block;animation:hero-line 1.3s var(--ease) both}
.sp-line:nth-child(2)>span{animation-delay:.15s}
.sp-line:nth-child(3)>span{animation-delay:.3s}
.sp-hero-lede{max-width:620px;margin-top:34px;font-size:clamp(18px,1.4vw,22px);line-height:1.5;color:#1e1b1ad0;text-wrap:pretty}
.sp-hero--dark .sp-hero-lede{color:#ffffffb3}
.sp-hero .mono{display:block;margin-bottom:26px}
.sp-hero--dark .mono{color:var(--yellow)}

/* Section openers: mono label over a heading, copy to the right, as on the homepage. */
.sp-intro{display:grid;grid-template-columns:1.15fr 1fr;gap:8vw;align-items:end;margin-bottom:60px}
.sp-intro .mono{display:block;margin-bottom:25px}
.sp-intro .sp-eyebrow{display:flex}
.sp-intro-copy{max-width:440px;padding-bottom:6px}
.sp-intro-copy p{font-size:18px;line-height:1.5;color:#635c59;text-wrap:pretty}
.sp-intro-copy p+p{margin-top:12px}
.sp-h2{font-size:clamp(40px,4.8vw,80px);font-weight:650;line-height:1.02;letter-spacing:-.06em;text-wrap:balance}
.sp-dark{background:var(--ink);color:var(--paper)}
.sp-dark .sp-intro .mono{color:var(--yellow)}
.sp-dark .sp-intro-copy p{color:#ffffff9a}
.sp-dark .serif-word{color:var(--yellow)}

/* Quote card: a member's words with their photo, name and role. Used for member voices and tweets, usually on <figure>. */
.sp-quote{margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:clamp(24px,2.4vw,34px);border:1px solid #1e1b1a33;border-radius:12px;background:#ffffff4d}
.sp-quote blockquote{margin:0;font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:clamp(19px,1.5vw,23px);line-height:1.38;letter-spacing:-.015em}
.sp-quote blockquote p+p{margin-top:.8em}
.sp-quote blockquote a{text-decoration:underline;text-decoration-color:#1e1b1a66;text-underline-offset:3px}
.sp-quote blockquote a:hover{text-decoration-color:currentColor}
.sp-quote figcaption{display:flex;align-items:center;gap:14px}
.sp-quote figcaption img{width:52px;height:52px;border-radius:50%;flex:none}
.sp-quote figcaption strong{display:block;font-size:16px;font-weight:650;letter-spacing:-.02em}
.sp-quote figcaption .mono{display:block;margin-top:3px;color:#635c59;text-transform:none;letter-spacing:.02em}

/* Closing band: the old footer's two calls to action, on the yellow of "Try it for 14 days." */
.sp-closing{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--yellow)}
.sp-closing-cell{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:34px;padding:clamp(56px,7vw,104px) var(--gutter)}
.sp-closing-cell+.sp-closing-cell{border-left:1px solid #1e1b1a35}
.sp-closing h2{font-size:clamp(44px,6.2vw,108px);font-weight:600;line-height:1;letter-spacing:-.07em}
.sp-closing .reveal:nth-child(2){transition-delay:.09s}
/* The site's focus ring is the button's own text colour, which is paper on the ink pill and would vanish on yellow. */
.sp-closing .button:focus-visible{outline-color:var(--ink)}

/* The hero headline eases from 92px at 1100 to 84px at 900 and holds there, so it never jumps at the 760 breakpoint. */
@media (max-width:1100px){
  .sp-hero h1{font-size:calc(84px + (100vw - 900px) * .042)}
  .sp-intro{gap:5vw}
}
@media (max-width:900px){
  .sp-hero h1{font-size:min(84px,10.4vw)}
}
@media (max-width:760px){
  .sp-hero{padding-top:48px;padding-bottom:60px}
  .sp-hero h1{font-size:clamp(48px,13vw,84px)}
  .sp-hero-lede{margin-top:24px;font-size:17px}
  .sp-intro{grid-template-columns:1fr;gap:22px;margin-bottom:40px}
  .sp-intro .mono{margin-bottom:20px}
  .sp-intro-copy{max-width:none}
  .sp-intro-copy p{font-size:16px}
  .sp-h2{font-size:clamp(36px,9.5vw,52px)}
  .sp-closing{grid-template-columns:1fr}
  .sp-closing-cell+.sp-closing-cell{border-left:0;border-top:1px solid #1e1b1a35}
  .sp-closing-cell{padding-top:48px;padding-bottom:52px;gap:26px}
  .sp-closing h2{font-size:clamp(40px,13vw,72px)}
  .sp-closing .reveal{transition-delay:0s}
}
@media (max-width:600px){
  .sp-closing .button{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .sp-line>span{animation:none}
}