/* Home (design frame jl5l9). Layout first, then the motion sheet at the end,
   which only ever runs under `.js` and prefers-reduced-motion: no-preference.
   Without either, every element sits in its final place. */

/* ------------------------------------------------------------ shared */

.h2 { font-size: clamp(32px, 3.75vw, 54px); letter-spacing: -0.03em; line-height: 1.08; }

.tile--72 { --s: 72px; border-radius: 22px; }
.tile--72 svg { width: 32px; height: 32px; }
.tile--64 { --s: 64px; border-radius: 20px; }
.tile--64 svg { width: 30px; height: 30px; }
.tile--neutral.tile--72 { border-radius: 19px; }
.tile--neutral svg { width: 28px; height: 28px; }

.hero, .spot, .bento-sec, .principles, .next { position: relative; }
.spot, .bento-sec, .principles { padding: clamp(64px, 7.6vw, 110px) 0; }
.next { padding: clamp(64px, 7.2vw, 104px) 0 clamp(40px, 7.2vw, 104px); }

/* ------------------------------------------------------- 2.1 hero */

/* The constellation is laid out on a 1000x300 grid (the design's 1440 frame
   minus 220px each side). Positions are percentages so it squeezes with the
   column; tile sizes step down with --k instead, so they stay tappable-looking
   rather than shrinking to specks. */
.orbit {
  --k: 1;
  position: relative;
  width: 100%; max-width: 1000px; margin-inline: auto;
  aspect-ratio: 1000 / 300;
}
.orbit-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit-lines line { stroke: #D7DAE0; stroke-width: 1; fill: none; }

.orbit-dot, .orb {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
}
.orbit-dot {
  width: calc(6px * var(--k) + 1px); height: calc(6px * var(--k) + 1px);
  border-radius: 50%; background: var(--sun);
}
.orb-tile { transform: rotate(var(--r, 0deg)); }
.orb-tile.tile {
  --s: calc(60px * var(--k));
  border-radius: calc(18px * var(--k));
  box-shadow: 0 8px 22px rgba(13, 15, 18, .125);
}
.orb-tile.tile svg { width: calc(25px * var(--k)); height: calc(25px * var(--k)); }
.orb--receipt { background: linear-gradient(135deg, #FFD479, #FFB020); }
.orb--users { background: linear-gradient(135deg, #7FD4FA, #2FA8E8); }
.orb--calendar { background: linear-gradient(135deg, #B39BFA, #7C4DEC); }
.orb--piggy { background: linear-gradient(135deg, #6EE7B7, #16B981); }
.orb-tile.orb--phone {
  --s: calc(76px * var(--k));
  border-radius: calc(20px * var(--k));
  background: var(--surface); color: var(--ink);
  box-shadow: 0 8px 22px rgba(13, 15, 18, .125), inset 0 0 0 1px var(--line);
}
.orb-tile.orb--phone svg { width: calc(32px * var(--k)); height: calc(32px * var(--k)); }
.orb-tile--pooled .pooled-icon {
  width: calc(72px * var(--k)); height: calc(72px * var(--k));
  filter: drop-shadow(0 8px 22px rgba(13, 15, 18, .2));
}
.orb-sun {
  width: calc(112px * var(--k)); height: calc(112px * var(--k));
  display: grid; place-items: center;
  border-radius: calc(30px * var(--k));
  background: linear-gradient(135deg, #FFC24B, #FF6B35);
  box-shadow: 0 16px 40px rgba(255, 107, 53, .25);
  color: #fff;
}
.orb-sun svg { width: calc(52px * var(--k)); height: calc(52px * var(--k)); }

.hero-copy {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  text-align: center;
  padding: 36px 0 clamp(24px, 6vw, 88px);
}
.hero-title {
  max-width: 820px;
  font-size: clamp(42px, 5.3vw, 76px); letter-spacing: -0.034em; line-height: 1.02;
}
.hero-line { display: block; }
.hero-sub { max-width: 540px; text-wrap: pretty; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.hero-cta { justify-content: center; gap: 14px; padding-top: 10px; }
.hero-cta .btn--light { padding-inline: 26px; }

/* -------------------------------------------- 2.2 Pooled spotlight */

.spot-panel {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px);
  overflow: hidden;
}
.spot-copy {
  display: flex; flex-direction: column; justify-content: center;
  padding: 64px 56px;
}
.spot-id { display: flex; align-items: center; gap: 22px; }
.spot-id .eyebrow { margin-bottom: 10px; }
.spot-name { font-family: var(--display); font-size: 23px; font-weight: 700; letter-spacing: -0.6px; line-height: 1.2; }
.spot-title { margin-top: 30px; font-size: clamp(34px, 3.75vw, 54px); line-height: 1.05; letter-spacing: -0.037em; }
.spot-text { margin-top: 22px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.spot-cta { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; }
.text-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding-bottom: 5px; border-bottom: 1.5px solid var(--ink);
  font-size: 15px; font-weight: 700; text-decoration: none; color: var(--ink);
}
.text-link:hover { color: var(--sun); border-color: var(--sun); }

/* Two phones as separate layers in a clipped stage; site.js moves the back
   one at 0.85 of scroll speed. Offsets are from the stage's centre so the
   composition holds when the stage gets narrower. */
.spot-stage { --ps: 1; position: relative; min-height: 620px; overflow: hidden; }
.phone { position: absolute; }
.phone img { width: 100%; height: auto; }
.phone--front { left: calc(50% - 266px * var(--ps)); top: calc(108px * var(--ps)); width: calc(406px * var(--ps)); }
.phone--back { left: calc(50% - 137px * var(--ps)); top: calc(-96px * var(--ps)); width: calc(524px * var(--ps)); }

.benefits {
  margin-top: 56px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px;
}
.benefits li { display: flex; flex-direction: column; gap: 20px; }
.b-title { font-family: var(--display); font-size: 22px; letter-spacing: -1px; line-height: 1.2; }
.benefits p { font-size: 16px; line-height: 1.6; }

/* ------------------------------------------------------- 2.3 bento */

.center-head {
  display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center;
}
.center-head .lede { max-width: 640px; font-size: 17px; line-height: 1.6; }

.bento { margin-top: 56px; display: flex; flex-direction: column; gap: 24px; }
.bento-row { display: grid; gap: 24px; }
.bento-row--top { grid-template-columns: minmax(0, 738fr) minmax(0, 358fr); }
.bento-row--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.bento-card { position: relative; overflow: hidden; }
.bc-title { font-family: var(--display); font-size: 24px; letter-spacing: -1px; line-height: 1.25; }
.bento-card p { font-size: 16px; line-height: 1.6; }
.bc-copy { display: flex; flex-direction: column; gap: 18px; }
.bc-bottom { display: flex; flex-direction: column; gap: 18px; margin-top: auto; }

.bento-card--stack { display: flex; flex-direction: column; gap: 18px; min-height: 320px; }
.bento-row--top .bento-card--stack { min-height: 420px; }

.bento-card--phone {
  display: flex; gap: 24px; min-height: 420px;
  padding: 36px 0 0 36px;
}
.bento-card--phone .bc-copy { width: 310px; flex: none; }
.bc-phone { position: relative; flex: 1; min-width: 0; align-self: stretch; }
.bc-phone img { position: absolute; left: 0; bottom: 0; width: 368px; max-width: none; }

.bento-card--wide {
  display: flex; align-items: center; gap: 40px;
  padding: 40px; min-height: 340px;
}
.bento-card--wide .bc-copy { width: 420px; flex: none; }
.bc-widgets { flex: 1; min-width: 0; }
.bc-widgets img { width: 100%; max-width: 580px; margin-left: auto; border-radius: 22px; }

/* -------------------------------------------------- 2.4 principles */

.principles-panel {
  margin-top: 52px;
  display: flex; gap: 28px; padding: 48px;
}
.pr-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pr-divider { flex: none; width: 1px; align-self: stretch; background: var(--line); }
.pr-num { font-family: var(--display); font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -1px; color: var(--sun); }
.pr-title { font-family: var(--display); font-size: 22px; line-height: 1.25; letter-spacing: -0.8px; }
.pr-body { font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* ----------------------------------------------- 2.5 what is next */

.next-head { display: flex; flex-direction: column; gap: 18px; }
.next-head .h2 { max-width: 720px; }
.next-head .lede { max-width: 640px; font-size: 17px; line-height: 1.6; }

.app-cards {
  margin-top: 52px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;
}
.app-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 22px;
  min-height: 376px; padding: 32px; border-radius: 30px;
}
.app-card-text { display: flex; flex-direction: column; gap: 8px; }
.ac-title { font-family: var(--display); font-size: 24px; letter-spacing: -0.6px; line-height: 1.2; }
.app-card-text p { font-size: 16px; line-height: 1.6; }
.app-card .status { font-size: 13px; padding: 7px 14px; }
.ac-link {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 700; color: var(--sun); text-decoration: none;
}
.ac-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.app-card--later { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.app-card--later .ac-title { color: var(--ink-2); }
.app-card--later .app-card-text p { color: var(--ink-3); }
.app-card--later .status { background: var(--line); color: var(--ink-2); }

.cta-panel {
  position: relative; margin-top: 80px;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
  padding: 86px 64px; text-align: center;
}
.cta-title {
  max-width: 700px;
  font-family: var(--display); font-size: clamp(30px, 3.35vw, 48px);
  line-height: 1.12; letter-spacing: -0.033em; color: #F6F7F9;
}
.cta-text { max-width: 640px; font-size: 17px; line-height: 1.6; color: #A3A9B3; }
.cta-btns { justify-content: center; gap: 14px; }
.btn--white { background: #fff; color: var(--ink); }
.btn--white:hover { background: #F1F2F4; }

.cta-accent { position: absolute; transform: rotate(var(--r)); }
.cta-accent .tile { border-radius: 22px; }
.cta-accent--sun { --r: 14deg; left: -34px; top: 86px; }
.cta-accent--sun .tile { --s: 76px; }
.cta-accent--sun .tile svg { width: 29px; height: 29px; }
.cta-accent--violet { --r: -11deg; right: -16px; top: 40px; }
.cta-accent--violet .tile { --s: 64px; }
.cta-accent--violet .tile svg { width: 24px; height: 24px; }
.cta-accent--mint { --r: 9deg; right: 56px; top: 242px; }
.cta-accent--mint .tile { --s: 54px; border-radius: 18px; }
.cta-accent--mint .tile svg { width: 21px; height: 21px; }

/* ----------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .orbit { --k: .9; }
  .spot-copy { padding: 52px 40px; }
  .bento-card--phone .bc-copy { width: 270px; }
  .bento-card--wide { flex-direction: column; align-items: stretch; }
  .bento-card--wide .bc-copy { width: auto; max-width: 560px; }
  .bc-widgets img { margin-left: 0; }
}

@media (max-width: 860px) {
  .orbit { --k: .78; aspect-ratio: 1000 / 400; }
  .orbit-lines line { stroke-width: 1.5; }
  .spot-panel { grid-template-columns: 1fr; }
  .spot-copy { padding: 40px 32px 8px; }
  .spot-stage { --ps: .85; min-height: 470px; }
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; }
  .bento-row--top, .bento-row--three { grid-template-columns: 1fr; }
  .bento-card--stack, .bento-row--top .bento-card--stack { min-height: 0; }
  .bc-bottom { margin-top: 12px; }
  .bento-card--phone { flex-direction: column; padding: 32px 32px 0; }
  .bento-card--phone .bc-copy { width: auto; }
  .bc-phone { height: 300px; flex: none; }
  .bc-phone img { left: -16px; width: 320px; }
  .principles-panel { flex-direction: column; gap: 24px; padding: 36px 32px; }
  .pr-divider { width: auto; height: 1px; }
  .app-cards { grid-template-columns: 1fr; }
  .app-card { min-height: 0; }
  .ac-link { margin-top: 4px; }
  .cta-panel { padding: 72px 36px; }
  .cta-accent--sun { left: -18px; top: 28px; }
  .cta-accent--sun .tile { --s: 60px; }
  .cta-accent--violet { right: -12px; top: auto; bottom: 34px; }
  .cta-accent--violet .tile { --s: 52px; }
  .cta-accent--mint { display: none; }
}

@media (max-width: 560px) {
  .orbit { --k: .6; aspect-ratio: 1000 / 580; }
  .orbit-lines line { stroke-width: 1.8; }
  .hero-copy { padding-top: 28px; }
  .hero-sub, .spot-text, .center-head .lede, .next-head .lede, .cta-text { font-size: 16px; }
  .spot-copy { padding: 28px 24px 4px; }
  .spot-id { gap: 16px; }
  .spot-id .pooled-icon { width: 84px; height: 84px; }
  .spot-name { font-size: 20px; }
  .spot-title { margin-top: 24px; }
  .spot-cta { margin-top: 28px; }
  .spot-stage { --ps: .72; min-height: 380px; }
  .benefits { grid-template-columns: 1fr; gap: 32px; }
  .benefits li { gap: 16px; }
  .bento-card--phone { padding: 24px 24px 0; }
  .bc-phone { height: 260px; }
  .bc-phone img { width: 280px; left: -12px; }
  .bento-card--wide { padding: 24px; gap: 28px; }
  .bc-widgets img { border-radius: 16px; }
  .principles-panel { padding: 28px 24px; border-radius: 24px; }
  .app-card { padding: 24px; border-radius: 24px; }
  .cta-panel { padding: 64px 22px 72px; border-radius: 28px; }
  .cta-accent--sun { left: -10px; top: 18px; }
  .cta-accent--sun .tile { --s: 48px; border-radius: 16px; }
  .cta-accent--sun .tile svg { width: 20px; height: 20px; }
  .cta-accent--violet { right: -8px; bottom: 20px; }
  .cta-accent--violet .tile { --s: 42px; border-radius: 14px; }
  .cta-accent--violet .tile svg { width: 18px; height: 18px; }
}

/* ---------------------------------------------------------- motion */
/* From the design's motion sheet (Y1sRJ). Hero plays on load; the rest is
   driven by site.js adding .is-in at about 15% visibility. */

@media (prefers-reduced-motion: no-preference) {

  /* Hero: the sun lands first, tiles pop outward from it 80ms apart, lines
     draw from the centre after the sun, dots appear when their line ends,
     then every tile drifts ±6px on a 6s loop, each at its own offset. */
  .js .orb-tile {
    animation: home-orb-in .6s var(--ease) both;
    animation-delay: calc(120ms + var(--o) * 80ms);
  }
  .js .orb--sun .orb-tile { animation-delay: 0ms; }
  .js .orb-float { animation: home-float 6s ease-in-out var(--f, 0s) infinite; }
  .js .orbit-lines line {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: home-draw .7s var(--ease) forwards;
    animation-delay: calc(380ms + var(--o) * 80ms);
  }
  .js .orbit-dot {
    animation: home-fade .35s ease both;
    animation-delay: calc(1080ms + var(--o) * 80ms);
  }

  .js .hero-line {
    animation: home-rise .8s var(--ease) both;
    animation-delay: calc(280ms + var(--n) * 90ms);
  }

  @keyframes home-orb-in {
    from { opacity: 0; transform: rotate(var(--r, 0deg)) scale(.9); }
    to { opacity: 1; transform: rotate(var(--r, 0deg)); }
  }
  @keyframes home-float {
    0%, 100% { transform: translateY(-6px); }
    50% { transform: translateY(6px); }
  }
  @keyframes home-draw { to { stroke-dashoffset: 0; } }
  @keyframes home-fade { from { opacity: 0; } to { opacity: 1; } }
  @keyframes home-rise {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: none; }
  }

  /* Spotlight panel rises 40px rather than the default 32. */
  .js .spot-panel[data-reveal]:not(.is-in) { transform: translateY(40px); }

  /* Bento: cards rise and scale in reading order (data-stagger); the accent
     tile pops 0.8 to 1 about 120ms after its card. --i is inherited from
     the card. */
  .js .bento-card > .tile, .js .bento-card .bc-copy > .tile {
    opacity: 0; transform: scale(.8);
    transition: opacity .5s var(--ease), transform .6s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms + 120ms);
  }
  .js .bento-card.is-in > .tile, .js .bento-card.is-in .bc-copy > .tile { opacity: 1; transform: none; }

  /* Principles: numbers first, then titles and bodies; the hairlines grow
     to full height (full width once they turn horizontal on narrow screens). */
  .js .principles-panel .pr-num {
    opacity: 0;
    transition: opacity .5s ease;
    transition-delay: calc(150ms + var(--c) * 70ms);
  }
  .js .principles-panel .pr-title, .js .principles-panel .pr-body {
    opacity: 0; transform: translateY(16px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
    transition-delay: calc(360ms + var(--c) * 70ms);
  }
  .js .principles-panel .pr-divider {
    transform: scaleY(0); transform-origin: top;
    transition: transform .8s var(--ease);
    transition-delay: calc(250ms + var(--c) * 70ms);
  }
  .js .principles-panel.is-in .pr-num,
  .js .principles-panel.is-in .pr-title,
  .js .principles-panel.is-in .pr-body,
  .js .principles-panel.is-in .pr-divider { opacity: 1; transform: none; }

  /* App cards: Pooled leads; the placeholders follow a little later and
     travel less. Status pills pop 0.85 to 1 once their card settles. */
  .js .app-card--later[data-reveal] { transition-delay: calc(var(--i, 0) * 70ms + 90ms); }
  .js .app-card--later[data-reveal]:not(.is-in) { transform: translateY(18px) scale(.985); }
  .js .app-card .status {
    opacity: 0; transform: scale(.85);
    transition: opacity .4s ease, transform .5s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms + 450ms);
  }
  .js .app-card.is-in .status { opacity: 1; transform: none; }

  /* Dark panel scales 0.98 to 1; the accent tiles drift in from just
     outside its edges (never more than 24px sideways). */
  .js .cta-panel[data-reveal]:not(.is-in) { transform: scale(.98); }
  .js .cta-accent .tile {
    opacity: 0;
    transition: opacity .6s var(--ease), transform .9s var(--ease);
    transition-delay: 200ms;
  }
  .js .cta-accent--sun .tile { transform: translate(-24px, 8px); }
  .js .cta-accent--violet .tile { transform: translate(24px, -8px); transition-delay: 280ms; }
  .js .cta-accent--mint .tile { transform: translate(18px, 12px); transition-delay: 360ms; }
  .js .cta-panel.is-in .cta-accent .tile { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 860px) {
  .js .principles-panel .pr-divider { transform: scaleX(0); transform-origin: left; }
}

/* ------------------------------------------------------ mobile pass */
/* .hero-line is display:block so its lines can animate one by one, but on
   the button row that cancelled the flex gap and the two buttons touched. */
.hero-cta.hero-line { display: flex; }

@media (max-width: 560px) {
  /* Each section padded 64px top and bottom stacked into ~130px of empty
     space between sections on a phone. */
  .spot, .bento-sec, .principles { padding: 44px 0; }
  .next { padding: 44px 0 28px; }
  /* The outermost orbit tiles sit at 4% and 96% of the row; on a 390px
     screen that put half of each one off the edge. Inset the whole
     constellation so they land inside the gutter. */
  .orbit { width: calc(100% - 44px); }
}