/* Product pages (Fact find, Ask, Suitability reports). The hero shows the whole app (app-ui.css) on the sky; three cards below each
   play one task on a piece of the same app, in the sky crops the homepage tiles use. */

/* Hero: name, one line, two actions, then the app rising out of the sky. */
.fp-page .an-hero{padding-bottom:0}
.fp-page .an-hero h1{max-width:none}
.fp-status{display:inline-block;margin:0 0 20px;padding:5px 11px;border-radius:99px;background:#fff;color:var(--sky-ink);font-size:13px;line-height:18px}
.fp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.fp-actions a{display:inline-flex;align-items:center;min-height:52px;padding:0 24px;border-radius:12px;font-size:16px;text-decoration:none;transition:background-color 160ms,box-shadow 160ms}
.fp-primary{background:var(--sky-pill);color:var(--sky-ink)}
.fp-primary:hover{background:#fff}
.fp-secondary{color:#fff;box-shadow:inset 0 0 0 1px #ffffff66}
.fp-secondary:hover{box-shadow:inset 0 0 0 1px #fff}
.fp-hero-app{max-width:1180px;margin:clamp(48px,6vw,80px) auto 0}
/* Wide screens: the words on the left, the whole app on the right, both in the first view. */
@media (min-width:1100px){
  .fp-page .an-hero-copy{display:grid;grid-template-columns:400px minmax(0,1fr);column-gap:56px;align-items:center;padding-top:clamp(48px,6vw,88px);padding-bottom:88px}
  .fp-page .an-hero h1{font-size:clamp(64px,6vw,88px)}
  .fp-hero-app{margin:0;--cb-vis:700px}
  .fp-hero-app .cb-app{border-radius:14px}
  .fp-hero-app .cb-work{margin-bottom:8px;border-radius:10px}
}

/* Three cards, each a crop of the sky with a printed cloud, copy on one side and the product on the other. */
.fp-sections{display:grid;gap:24px;max-width:1328px;margin:0 auto;padding:clamp(72px,8vw,120px) 56px 0}
.fp-card{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;min-height:540px;overflow:hidden;border-radius:28px;color:#fff;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-middle) 64%,#8fb6d6 100%)}
.fp-card-flip{color:var(--sky-ink);background:linear-gradient(180deg,#c8dcdf 0%,#dfe9ea 100%)}
.fp-card:nth-child(3){background:linear-gradient(170deg,var(--sky-middle) 0%,#9cc0d8 70%,var(--sky-low) 100%)}
.fp-sky{position:absolute;inset:0;pointer-events:none}
.fp-sky img{position:absolute;right:-16%;bottom:-26%;width:72%;height:auto;opacity:.5}
.fp-card-flip .fp-sky img{right:auto;left:-16%;opacity:.45}
.fp-copy{position:relative;padding:56px}
.fp-copy h2{max-width:13ch;margin:0;font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-weight:400;font-size:clamp(32px,3.4vw,48px);line-height:1.05;letter-spacing:-.03em}
.fp-copy p{max-width:420px;margin:18px 0 0;font-size:17px;line-height:27px;opacity:.92}
.fp-card-flip .fp-copy{order:2}
.fp-stage{position:relative;padding:56px 56px 56px 0}
/* On the cards the cursor's label sits above it, so it never covers the rows it is filling in. */
.fp-stage .cb-cur .tag{top:auto;bottom:20px;left:6px}
.fp-card-flip .fp-stage{padding:56px 0 56px 56px}

/* The product surface: white, opaque, readable at its real size. */
.fp-surface{position:relative;padding:20px 22px 22px;border-radius:16px;background:#fff;color:#37352f;font-family:Geist,'Geist Fallback',sans-serif;font-size:15px;line-height:22px;box-shadow:0 1px 2px #0d2c4d14,0 24px 60px #0d2c4d33;text-align:left}
.fp-surface-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;color:#66645e;font-size:13px;line-height:18px}
.fp-count{padding:2px 9px;border-radius:99px;background:#fff0d7;color:#875607;white-space:nowrap}
.fp-count.done{background:#f3f3f1;color:#66645e}

/* Card 1: the side list and two people. */
.fp-split{display:grid;grid-template-columns:168px minmax(0,1fr);gap:18px;min-height:250px}
.fp-rail.fact-nav{width:auto;padding:0;font-size:14px}
.fp-rail.fact-nav>span{min-height:0;padding:8px 10px;border-radius:8px;display:flex;justify-content:space-between;gap:8px;white-space:nowrap;transition:background-color .2s}
.fp-rail.fact-nav>.on{background:#f3f3f1;font-weight:500}
.fp-rail i{font-style:normal;color:#875607;font-size:13px}
.fp-views .cb-cols{gap:20px}

/* Card 2: the quote, the fact, and the choices Priya makes in turn. */
.fp-quote small{display:block;color:#66645e;font-size:13px;line-height:18px;transition:color .2s}
.fp-quote small.named{color:#37352f;font-weight:500}
.fp-quote blockquote{margin:6px 0 16px;font-size:20px;line-height:28px;color:#37352f}
.fp-fact{margin:0 0 16px;border-top:1px solid #e8e7e4}
.fp-fact .cb-row{grid-template-columns:1fr auto;gap:12px}
.fp-buttons,.fp-menu{display:flex;flex-wrap:wrap;gap:8px}
.fp-menu,.fp-accept{display:none}
.fp-menu.show,.fp-accept.show{display:flex}
.fp-buttons.hide{display:none}
.fp-ok{background:#37352f;color:#fff;border-color:#37352f}

/* Card 3: what it reads today, one honest list. */
.fp-line{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #e8e7e4}
.fp-pill{flex-shrink:0;padding:2px 9px;border-radius:99px;background:#e3ecf8;color:var(--sky-ink);font-size:12px;line-height:16px;white-space:nowrap}
.fp-pill.soon{background:transparent;color:#46607f;box-shadow:inset 0 0 0 1px #15396240}

.fp-page .closing .rd-kicker{margin:0 0 20px;font-size:14px;line-height:20px;color:#46607f}

@media (max-width:900px){
  .fp-sections{padding-left:16px;padding-right:16px}
  .fp-card{grid-template-columns:1fr;min-height:0;border-radius:22px}
  .fp-card-flip .fp-copy{order:0}
  .fp-copy{padding:32px 24px 8px}
  .fp-stage,.fp-card-flip .fp-stage{padding:20px 16px 20px}
  .fp-split{grid-template-columns:1fr;gap:10px;min-height:0}
  .fp-rail.fact-nav{flex-direction:row;flex-wrap:wrap;gap:4px}
  .fp-rail.fact-nav>.fact-group{display:none}
  .fp-hero-app{margin-top:40px}
  .fp-sky img{width:120%;right:-50%;bottom:-12%}
  .fp-card-flip .fp-sky img{left:-50%}
}
@media (max-width:520px){
  .fp-views .cb-cols{grid-template-columns:1fr;gap:12px}
  .fp-quote blockquote{font-size:18px;line-height:26px}
}

/* Ask cards: a short thread above the composer. */
.fp-ask{display:flex;flex-direction:column;gap:12px;min-height:320px;font-size:14px;line-height:21px}
.fp-ask .cb-q{align-self:flex-end;max-width:86%;margin:0;padding:10px 14px;border-radius:14px 14px 4px 14px;background:#1f5eff;color:#fff}
.fp-thread{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:12px}
.fp-composer{margin:0}
.fp-wave{display:none;align-items:center;gap:3px;margin-left:auto}
.fp-wave i{width:3px;height:10px;border-radius:2px;background:#37352f;animation:fp-wave .9s ease-in-out infinite}
.fp-wave i:nth-child(2){animation-delay:.12s}.fp-wave i:nth-child(3){animation-delay:.24s}.fp-wave i:nth-child(4){animation-delay:.36s}.fp-wave i:nth-child(5){animation-delay:.48s}
@keyframes fp-wave{50%{height:18px}}
.listening .fp-wave{display:flex}
.fp-open{display:none;padding:12px 14px;border-radius:10px;background:#f7f6f2}
.fp-open.show{display:block;animation:cb-in .28s cubic-bezier(.23,1,.32,1)}
.fp-open blockquote{margin:6px 0 0;font-size:17px;line-height:25px}
@media (prefers-reduced-motion:reduce){.fp-wave i{animation:none}}

/* Suitability report cards. */
.fp-state{flex-shrink:0;font-size:12px;line-height:16px;padding:2px 9px;border-radius:99px;background:#f3f3f1;color:#66645e;white-space:nowrap}
.fp-state.open{background:#fff0d7;color:#875607}
[data-sec],[data-need]{opacity:.25;transition:opacity .25s}
[data-sec].on,[data-need].on{opacity:1}
.fp-lede{margin:0 0 6px;font-weight:500}
.fp-need{display:flex;flex-direction:column;padding:10px 12px;margin-top:8px;border-radius:8px;background:#fff8ea}
.fp-need b{font-weight:500;color:#5b3608}
.fp-need span{color:#66645e;font-size:14px}
.fp-send{margin-top:16px}
.fp-disabled{opacity:.45}
.fp-paper{background:#fffdf8;font-family:Georgia,'Times New Roman',serif;font-size:17px;line-height:27px;color:#2b2a27}
.fp-paper p{margin:0 0 12px}
.fp-paper .fp-paper-h{font-weight:700;font-size:16px}
.fp-paper .fig{background:#fff0d7;border-radius:3px;padding:0 3px}
.fp-paper .src-mark{font-family:Geist,'Geist Fallback',sans-serif;vertical-align:2px;margin-left:4px}
.fp-paper .fp-open{font-family:Geist,'Geist Fallback',sans-serif}
.cb-page .open b{display:block;font-weight:600}
@media (prefers-reduced-motion:reduce){[data-sec],[data-need]{opacity:1}}
.fp-status-line{margin:14px 0 0;font-size:13px;line-height:18px;color:#66645e}

/* Ask page: a bento of tasks, each tile a crop of the sky holding one Ask pane. */
.fp-bento-wrap{max-width:1328px;margin:0 auto;padding:clamp(72px,8vw,120px) 56px 0}
.fp-bento-head{max-width:640px;margin:0 0 32px;color:var(--sky-ink)}
.fp-bento-head h2{margin:0;font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-weight:400;font-size:clamp(36px,4vw,56px);line-height:1.04;letter-spacing:-.035em}
.fp-bento-head p{margin:14px 0 0;font-size:17px;line-height:27px;color:#2c4a6e}
.fp-bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.fp-tile{position:relative;grid-column:span 2;display:flex;flex-direction:column;gap:22px;min-height:560px;padding:28px;overflow:hidden;border-radius:24px;color:#fff;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-middle) 70%,#8fb6d6 100%)}
.fp-tile-wide{grid-column:span 3}
.fp-tile:nth-child(4n+2),.fp-tile:nth-child(4n+3){color:var(--sky-ink);background:linear-gradient(180deg,#c8dcdf 0%,#e3ecee 100%)}
.fp-tile .fp-sky img{width:110%;right:-40%;bottom:-30%;opacity:.45}
.fp-tile-copy{position:relative}
.fp-tile-copy h3{margin:14px 0 0;font-family:'Inter Tight','Inter Tight Fallback',sans-serif;font-weight:400;font-size:28px;line-height:32px;letter-spacing:-.02em}
.fp-tile-copy p{max-width:420px;margin:8px 0 0;font-size:15px;line-height:23px;opacity:.92}
.fp-tile-stage{position:relative;flex:1;display:flex;min-height:380px}
.fp-tile .cb-askpane{width:100%;border-radius:14px;background:#fff;box-shadow:0 0 0 1px #ecedef,0 24px 60px #0d2c4d33}
.fp-tile .cb-thread{min-height:300px}
.fp-tile .cb-composer{margin:0 14px 14px}
.fp-tile .cb-thread{padding:16px 14px}
@media (max-width:1100px){.fp-bento{grid-template-columns:repeat(2,minmax(0,1fr))}.fp-tile,.fp-tile-wide{grid-column:span 1}}
@media (max-width:720px){.fp-bento-wrap{padding-left:16px;padding-right:16px}.fp-bento{grid-template-columns:1fr}.fp-tile{min-height:0;padding:22px 18px;border-radius:20px}}
.fp-tile .cb-askpane{color:#1f2124}
.fp-tile .cb-thread{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24px);mask-image:linear-gradient(180deg,transparent 0,#000 24px)}
.fp-tile:not(:nth-child(4n+2)):not(:nth-child(4n+3)) .fp-pill.soon{color:#fff;box-shadow:inset 0 0 0 1px #ffffff8c}
.fp-paper{position:relative}
.fp-note{width:min(340px,100%)}
.fp-stage[data-loop=edit] .fp-paper{padding-bottom:130px}
/* The hero shows the whole app, so Ask closes at the bottom like the case beside it. */
.fp-hero-app .cb-ask{margin-bottom:8px;border-radius:10px}
/* Bento: every pane is one fixed height, so a tile never grows while its conversation plays.
   Each conversation is written to fit, so nothing is cut off at the top. */
.fp-tile{min-height:0}
.fp-tile-stage{min-height:0;flex:none}
.fp-tile .cb-askpane{height:540px}
.fp-tile .cb-thread{min-height:0;padding:14px 16px;-webkit-mask-image:none;mask-image:none}
.fp-tile .cb-composer{margin:0 16px 16px}
.fp-tile-stage{margin-top:auto}
@media (max-width:900px){.fp-stage .cb-cur .tag{top:18px;bottom:auto}}