/* A full sentence, rather than a compressed all-caps label, introduces the idea. */
html { scrollbar-gutter: stable; }
.hero .hero-tagline {
  max-width: 500px; padding: 9px 13px; border-radius: 12px;
  font-size: 12px; line-height: 1.5; font-weight: 650;
  letter-spacing: 0; text-transform: none; margin-bottom: 17px;
  color: #0957d5; background: linear-gradient(110deg, #deefff, #e6ecff);
}
.hero #hero-title {
  font-size: clamp(39px, 3.7vw, 53px); line-height: 1.055;
  letter-spacing: -2px; font-weight: 800; text-wrap: pretty;
}
.hero .hero-description { font-size: 15px; line-height: 1.5; max-width: 490px; margin-top: 17px; }
.workspace-nav-item.is-pending { background: #edf3ff; border-color: #d3e2ff; }
.workspace-nav-item.is-pending > .icon { opacity: .55; }
.workspace-window[data-pending-changes]:not([data-pending-changes="0"]) .playback-dot { background: #eeae30; }
@media (max-width: 1220px) {
  .hero #hero-title { font-size: clamp(36px, 3.95vw, 48px); letter-spacing: -1.65px; }
  .hero .hero-tagline { font-size: 11px; padding: 8px 12px; }
  .hero .hero-description { font-size: 14px; }
}
@media (max-width: 1050px) {
  .hero #hero-title { font-size: clamp(33px, 4.1vw, 42px); letter-spacing: -1.45px; }
  .hero .hero-tagline { font-size: 10px; }
  .hero .hero-description { font-size: 13px; }
}
@media (max-width: 800px) {
  .hero .hero-tagline { font-size: 12px; margin-inline: auto; max-width: 485px; }
  .hero #hero-title { font-size: clamp(39px, 6.4vw, 52px); letter-spacing: -1.8px; max-width: 650px; margin-inline: auto; }
  .hero .hero-description { font-size: 15px; max-width: 520px; }
}
@media (max-width: 540px) {
  .hero .hero-tagline { max-width: 380px; font-size: 11px; line-height: 1.5; padding: 8px 11px; margin-bottom: 16px; }
  .hero #hero-title { font-size: clamp(32px, 8.5vw, 43px); line-height: 1.09; letter-spacing: -1.2px; }
  .hero .hero-description { font-size: 13px; line-height: 1.6; }
}
@media (max-width: 370px) {
  .hero #hero-title { font-size: 31px; letter-spacing: -1.1px; }
  .hero .hero-tagline { font-size: 10px; }
}


/* Vertical rhythm: each section owns the space below it (owner, 24 October 2026),
   so the gaps stay even. The owner opened it all up on 1 November 2026, so the page
   keeps the room the story at the top gives. Glass panels keep balanced inner padding and the same
   gap after them. */
main { --section-gap: 148px; }
.product-showcase, .brainstorm-showcase { gap: 56px; }
.product-showcase { margin-top: 0; padding-top: 0; padding-bottom: var(--section-gap); }
.benefits { padding-block: 48px; padding-inline: 44px; gap: 44px; margin-bottom: var(--section-gap); }
.hero { padding-top: 0; padding-bottom: var(--section-gap); }
.testimonials { padding-top: 0; padding-bottom: var(--section-gap); }
.pricing { padding-top: 0; padding-bottom: var(--section-gap); }
.closing-cta { padding-block: 48px; padding-inline: 44px; gap: 36px; margin-top: 0; margin-bottom: 0; }

.hero .eyebrow { margin-bottom: 24px; }
.hero .hero-tagline { margin-bottom: 28px; }
.hero .hero-description { margin-top: 32px; }
.hero-actions { margin-top: 40px; }
.benefit p { margin-top: 10px; }
.section-heading { margin-bottom: 44px; }
.section-heading h2 { margin-top: 14px; }
.testimonial-grid { gap: 32px; }
.testimonial-card { padding-top: 34px; padding-bottom: 32px; }
.testimonial-card figcaption { margin-top: 24px; }
.showcase-copy { align-self: start; }
.showcase-copy h2 { margin-top: 26px; }
.showcase-copy > p { margin-top: 30px; }
.showcase-copy .showcase-note { margin-top: 48px; }
.pricing-heading { min-height: 48px; margin-bottom: 36px; }
.pricing-grid { padding-top: 28px; gap: 32px; }
.pricing-card { padding-top: 36px; padding-bottom: 32px; }
.plan-features { gap: 12px; margin-block: 24px 32px; }
.pricing-rounding-note { margin-top: 40px; }
.pricing-terms-note { margin-top: 18px; }
.closing-copy p { margin-top: 10px; }
.site-footer { padding-block: 72px 30px; }
.site-dialog { padding: 42px; }
.dialog-intro { margin-top: 16px; }
.use-case-list { gap: 26px; margin-top: 30px; }
.dialog-cta { margin-top: 30px; }
.faq-list { margin-top: 28px; }
.faq-list details { padding-block: 20px; }

@media (max-width: 1220px) {
  main { --section-gap: 120px; }
  .product-showcase, .brainstorm-showcase { gap: 40px; }
  .site-header { height: 102px; }
  .benefits { padding-block: 40px; padding-inline: 36px; gap: 36px; }
  .hero .hero-tagline { margin-bottom: 26px; }
  .hero .hero-description { margin-top: 28px; }
  .hero-actions { margin-top: 36px; }
  .testimonial-grid { gap: 26px; }
  .testimonial-card { padding-top: 30px; padding-bottom: 28px; }
  .pricing-grid { gap: 24px; }
  .closing-cta { padding-block: 40px; padding-inline: 36px; gap: 30px; }
}
@media (max-width: 1050px) {
  main { --section-gap: 104px; }
  .product-showcase, .brainstorm-showcase { gap: 40px; }
  .benefits { padding-block: 36px; padding-inline: 28px; gap: 32px; }
  .showcase-copy .showcase-note { margin-top: 40px; }
  .testimonial-grid { gap: 22px; }
  .testimonial-card { padding-top: 28px; padding-bottom: 26px; }
  .pricing-grid { gap: 20px; }
  .closing-cta { padding-inline: 28px; gap: 24px; }
}
@media (max-width: 800px) {
  main { --section-gap: 92px; }
  .site-header { height: 92px; }
  .hero .hero-tagline { margin-bottom: 24px; }
  .hero .hero-description { margin-top: 26px; }
  .hero-actions { margin-top: 32px; }
  .benefits { padding-block: 40px; padding-inline: 28px; gap: 40px; }
  .testimonial-grid { gap: 22px; }
  .product-showcase { margin-top: 0; padding-top: 0; }
  .pricing-heading { gap: 22px; margin-bottom: 32px; }
  .pricing-grid { gap: 22px; }
  .pricing-card { padding-top: 32px; padding-bottom: 28px; }
  .plan-features { gap: 12px; margin-block: 24px 30px; }
  .closing-cta { padding-block: 40px; padding-inline: 28px; }
  .site-footer { padding-block: 56px 30px; gap: 24px; }
}
@media (max-width: 540px) {
  main { --section-gap: 76px; }
  .site-header { height: 84px; }
  .hero .eyebrow { margin-bottom: 20px; }
  .hero .hero-tagline { margin-bottom: 22px; }
  .hero .hero-description { margin-top: 24px; }
  .hero-actions { margin-top: 30px; }
  .benefits { padding-block: 36px; padding-inline: 22px; gap: 36px 20px; }
  .section-heading { margin-bottom: 30px; }
  .testimonial-grid { gap: 22px; }
  .testimonial-card { padding-top: 28px; padding-bottom: 26px; }
  .testimonial-card figcaption { margin-top: 20px; }
  .product-showcase, .brainstorm-showcase { gap: 36px; }
  .product-showcase { margin-top: 0; padding-top: 0; }
  .showcase-copy h2 { margin-top: 20px; }
  .showcase-copy > p { margin-top: 24px; }
  .showcase-copy .showcase-note { margin-top: 36px; }
  .pricing-heading { margin-bottom: 30px; gap: 22px; }
  .pricing-grid { gap: 36px; }
  .pricing-card { padding-top: 30px; padding-bottom: 28px; }
  .plan-features { gap: 12px; margin-block: 24px 30px; }
  .closing-cta { padding-block: 40px 36px; padding-inline: 22px; gap: 30px; }
  .site-footer { padding-block: 48px 30px; gap: 32px; }
  .site-dialog { padding: 34px 23px 30px; }
}

/* Centred page title above the workspace demo (owner, 24 October 2026). */
.page-hero { padding: 0 0 54px; text-align: center; }
.page-hero h1 {
  max-width: none;
  margin: 0 auto;
  font-size: clamp(40px, 4.6vw, 66px);
  line-height: 1.04;
  letter-spacing: -2.4px;
  font-weight: 800;
  text-wrap: balance;
  color: var(--ink);
}
#page-title { text-align: center; padding-top: 10px; }
.title-underline { position: relative; display: inline-block; white-space: nowrap; }
.pencil-line { position: absolute; left: -1.5%; bottom: -.13em; width: 103%; height: .24em; color: var(--blue); overflow: visible; pointer-events: none; }
.page-hero-lead { max-width: 840px; margin: 48px auto 0; color: var(--body); font-size: clamp(17px, 1.6vw, 22px); line-height: 1.45; letter-spacing: -.2px; text-wrap: balance; }
.page-hero strong { font-weight: 900; }
.page-hero-lead strong { font-weight: 700; color: var(--ink); }
#hero { padding-top: 32px; } /* It is the top of the page once the story has been replaced, or without the story at all. */

@media (max-width: 800px) {
  .page-hero h1 { font-size: clamp(34px, 6.4vw, 54px); letter-spacing: -1.7px; }
}
@media (max-width: 540px) {
  .page-hero h1 { font-size: clamp(30px, 8.8vw, 42px); line-height: 1.08; letter-spacing: -1.2px; }
}

/* Testimonial carousel: six cards, a window of four (two on tablets, one on phones) that scrolls continuously (script.js moves the track every frame). */
.testimonial-carousel { --per: 4; --tgap: 32px; overflow: hidden; padding: 12px 0 18px; margin: -12px 0 -18px; }
.testimonial-carousel .testimonial-grid { display: flex; gap: var(--tgap); will-change: transform; }
.testimonial-carousel .testimonial-card { flex: 0 0 calc((100% - (var(--per) - 1) * var(--tgap)) / var(--per)); min-width: 0; }
.testimonial-carousel .testimonial-card { display: grid; grid-template-columns: 56px 1fr; grid-template-areas: "avatar who" "quote quote"; column-gap: 14px; row-gap: 14px; align-content: start; justify-content: stretch; }
.testimonial-carousel .quote-content { display: contents; }
.testimonial-carousel .avatar { grid-area: avatar; width: 56px; height: 56px; align-self: center; }
.testimonial-carousel blockquote { grid-area: quote; padding-top: 0; }
.testimonial-carousel .testimonial-card figcaption { grid-area: who; flex-direction: column; align-items: flex-start; justify-content: center; gap: 7px; margin-top: 0; }
@media (max-width: 1050px) { .testimonial-carousel { --per: 2; --tgap: 22px; } }
@media (max-width: 540px) { .testimonial-carousel { --per: 1; --tgap: 22px; } }
@media (prefers-reduced-motion: reduce) {
  .testimonial-carousel .testimonial-grid { flex-wrap: wrap; transform: none; transition: none; }
}
/* The carousel runs the width of the window, so the cards at its edges are cut off by the window, not by the page's column
   (owner, 28 October 2026). The cards keep the column's size (the section is the size container); script.js places the track
   so the first whole card starts at the column's edge, with the cards before it cropped at the window's left edge. */
@media (prefers-reduced-motion: no-preference) {
  html { overflow-x: clip; }
  .testimonials { container-type: inline-size; }
  .testimonial-carousel { width: 100vw; margin-left: calc(50% - 50vw); touch-action: pan-y; }
  .testimonial-carousel .testimonial-grid { margin-left: calc((100% - 100cqw) / 2); }
  .testimonial-carousel .testimonial-card { flex-basis: calc((100cqw - (var(--per) - 1) * var(--tgap)) / var(--per)); }
}
.stars .star-off { color: var(--muted); opacity: .4; }
.stars .star-half { display: grid; }
.stars .star-half > svg { grid-area: 1 / 1; }
.stars .star-half .star-clip { clip-path: inset(0 50% 0 0); }

/* Pricing: while the three plans sit side by side, their rows share one set of tracks (subgrid), so each feature
   starts on the same line in every card and the eye can scan straight across. Rows: heading, price, two billing
   lines, seven features, button (12 rows). Stacked layouts keep their own flow. */
@media (min-width: 651px) {
  .pricing-card { display: grid; grid-template-rows: subgrid; grid-row: span 12; row-gap: 0; }
  .plan-features { display: grid; grid-template-rows: subgrid; grid-row: span 7; }
}

/* Pricing: a faint rule after "Kayden" (what every plan shares | what differs) and after the initiatives (what you
   can run | how much room you get). It sits on the same row in every card. The two-column middle layout skips it. */
@media (min-width: 651px), (max-width: 540px) {
  .plan-features li:nth-child(3), .plan-features li:nth-child(6) { margin-top: 3px; padding-top: 10px; border-top: 1px solid var(--border, #e0e8f7); }
}

/* The opening section: a story. These first rules are the pieces and the plain, top-to-bottom reading of it, which is
   what a visitor with reduced motion or no script gets. The pinned version is the @media block below. */
.story { padding: 30px 0 72px; text-align: center; }
.story-stage { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.story-line { margin: 34px 0 0; color: var(--ink); font-size: clamp(30px, 4.1vw, 54px); line-height: 1.06; letter-spacing: -.035em; font-weight: 800; text-wrap: balance; }
.story-hint { display: none; }
.story-files { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; }

.mess-file, .mess-sticky { display: flex; align-items: center; gap: 8px; width: max-content; }
.mess-file { padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); color: var(--muted); font-size: 13px; }
.mess-file i { flex: none; width: 13px; height: 16px; border-radius: 2px; clip-path: polygon(0 0, 68% 0, 100% 28%, 100% 100%, 0 100%); background: #1fa463; }
.mess-mail i { height: 11px; width: 16px; clip-path: none; background: #8a97b5; }
.mess-doc i { background: #2f7bf0; }
.mess-pdf i { background: #e0435c; }
.mess-sticky { max-width: 132px; padding: 10px 12px; background: #fff0a6; border-radius: 3px; box-shadow: 0 8px 16px -8px rgb(20 30 70 / 45%); color: #3b3413; font: italic 600 14px/1.25 "Comic Sans MS", "Bradley Hand", "Segoe Print", cursive; text-align: left; }

.team-app { position: relative; display: grid; gap: 12px; min-height: 176px; padding: 20px 22px 22px; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gradient) border-box; border: 2px solid transparent; border-radius: 18px; box-shadow: 0 22px 44px -18px rgb(23 87 255 / 45%); text-align: left; }
.team-app { gap: 14px; width: min(100%, 520px); align-content: start; }
.team-app strong { color: var(--ink); font-size: 18px; font-weight: 700; letter-spacing: -.3px; }
.story-sub { display: block; margin-top: .7em; color: var(--body); font-size: clamp(15px, 1.5vw, 20px); font-weight: 500; letter-spacing: 0; }
.app-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.app-live { display: inline-flex; align-items: center; gap: 6px; color: #12a150; font-size: 13px; font-weight: 700; }
.app-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.app-body { display: grid; grid-template-columns: auto 1fr; gap: 14px; }
.app-rail { display: grid; align-content: start; gap: 8px; padding-right: 12px; border-right: 1px solid color-mix(in srgb, var(--body) 18%, transparent); }
.app-rail-item { display: block; padding: 4px; border-radius: 12px; }
.app-rail-item.is-active { background: color-mix(in srgb, var(--body) 14%, transparent); }
.app-rail-item i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: linear-gradient(150deg, var(--from), var(--to)); color: white; }
.app-rail-item .icon { width: 19px; height: 19px; }
.app-pane { position: relative; display: grid; gap: 10px; min-width: 0; }
.app-spot { position: relative; z-index: 1; display: grid; padding: 12px 13px; border: 1px solid color-mix(in srgb, var(--body) 18%, transparent); border-radius: 14px; }
.app-big { grid-area: 1 / 1; display: grid; align-content: start; gap: 8px; min-width: 0; margin: -12px -13px; padding: 12px 13px; border-radius: 14px; background: var(--surface); }
.team-app .app-big strong { font-size: 15px; letter-spacing: 0; }
/* Read without the story, the card simply shows the finished app. */
.app-empty, .app-big:not([data-big="4"]) { display: none; }
/* A request line grows from its own edge, so its words stay inside the card. */
.approval dt { transform-origin: left center; }
.approval dd { transform-origin: right center; }
.app-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--body) 16%, transparent); font-size: 14px; }
.app-line b, .app-tile b { color: var(--ink); font-weight: 600; }
.app-line em, .app-tile em { color: var(--body); font-size: 12.5px; font-style: normal; white-space: nowrap; }
.app-line-end { border-bottom: 0; }
.app-chat { display: grid; gap: 7px; }
.app-msg { display: flex; align-items: flex-end; gap: 8px; }
.app-msg-me { flex-direction: row-reverse; }
.app-msg > i { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--who); color: white; font-size: 12px; font-style: normal; font-weight: 700; }
.app-bubble { max-width: 78%; padding: 6px 11px; border-radius: 14px 14px 14px 4px; background: color-mix(in srgb, var(--body) 15%, transparent); color: var(--ink); font-size: 13.5px; line-height: 1.3; }
.app-msg-me .app-bubble { border-radius: 14px 14px 4px 14px; background: #1757ff; color: white; }
.app-doc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--body); font-size: 12.5px; }
.app-doc-tools { display: flex; align-items: center; gap: 9px; padding: 3px 11px; border-radius: 999px; background: color-mix(in srgb, var(--body) 13%, transparent); color: var(--body); font-size: 12px; font-weight: 700; line-height: 1.3; }
.app-doc-tools i { font-family: Georgia, serif; }
.app-doc-rule { width: 1px; height: 12px; background: color-mix(in srgb, var(--body) 40%, transparent); }
.app-doc-align { width: 14px; height: 9px; background: repeating-linear-gradient(currentColor 0 1.5px, transparent 1.5px 3.75px); }
/* A sheet of paper is white in either theme, as it is in any document editor. */
.app-page { display: grid; gap: 7px; padding: 9px 14px 13px; border-radius: 4px; background: #fff; box-shadow: 0 1px 5px rgb(0 0 0 / 22%); }
.app-page > b { color: #1f2a44; font-size: 13.5px; font-weight: 700; }
.app-page-line { position: relative; display: block; height: 5px; border-radius: 3px; background: #d6dbe6; }
.app-cursor { position: absolute; left: 100%; top: -5px; width: 2px; height: 15px; background: #c2540a; }
.app-cursor b { position: absolute; left: 0; bottom: 100%; padding: 0 4px; border-radius: 3px 3px 3px 0; background: #c2540a; color: white; font-size: 9.5px; font-weight: 700; line-height: 13px; }
.app-bars { display: flex; align-items: flex-end; gap: 8px; height: 76px; }
.app-bars i { flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #21c0ff, #0b7fe0); }
.app-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; color: var(--body); font-size: 12.5px; font-weight: 700; }
.app-cols > span { padding-bottom: 5px; border-bottom: 2px solid color-mix(in srgb, var(--body) 22%, transparent); }
.app-cols .app-col-done { border-color: #12a150; color: #12a150; }
.app-lanes { position: relative; display: block; height: 90px; }
.app-pill { position: absolute; left: calc((100% + 8px) * 2 / 3); display: flex; align-items: center; width: calc((100% - 16px) / 3); height: 26px; padding: 0 8px; border-radius: 8px; background: color-mix(in srgb, #12a150 22%, var(--surface)); box-sizing: border-box; color: var(--ink); font-size: 12px; font-weight: 600; white-space: nowrap; }
.app-pill:nth-child(2) { top: 32px; }
.app-pill:nth-child(3) { top: 64px; }
.app-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* An empty slot shows the app has room to grow; a tile lands on top of it. */
.app-slot { display: grid; min-height: 56px; border: 1px dashed color-mix(in srgb, var(--body) 22%, transparent); border-radius: 12px; }
.app-tile { grid-area: 1 / 1; display: grid; grid-template-columns: auto 1fr; align-items: center; align-content: center; column-gap: 7px; row-gap: 1px; margin: -1px; padding: 8px 11px; border: 1px solid color-mix(in srgb, var(--body) 18%, transparent); border-radius: 12px; background: var(--surface); font-size: 13.5px; }
.app-tile i { width: 8px; height: 8px; border-radius: 50%; background: var(--dot); }
.app-tile em { grid-column: 1 / -1; }

.approval { position: relative; width: min(100%, 420px); padding: 22px 26px 18px; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--gradient) border-box; border: 2px solid transparent; border-radius: 18px; box-shadow: 0 22px 44px -18px rgb(23 87 255 / 45%); text-align: left; }
.approval-title { color: var(--ink); font-size: 18px; font-weight: 700; letter-spacing: -.3px; }
.approval dl { display: grid; gap: 10px; margin: 14px 0 0; }
.approval dl div { display: flex; justify-content: space-between; gap: 16px; }
.approval dt { color: var(--muted); font-size: 14px; }
.approval dd { margin: 0; color: var(--ink); font-size: 14px; font-weight: 600; text-align: right; }
.approval-total { margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--border); align-items: baseline; }
.approval-total dd { display: flex; align-items: baseline; gap: 10px; color: var(--blue-icon); font-size: 24px; font-weight: 800; letter-spacing: -.6px; }
.approval dl > div:not(.approval-total) dd { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.approval-value, .approval-now { display: inline-block; transform-origin: right center; white-space: nowrap; }
.approval-tick { flex: none; width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #12a150; color: white; stroke-width: 3.5; }
.approval-was { position: relative; display: inline-block; white-space: nowrap; }
.approval-total .approval-was { color: var(--muted); font-size: 16px; font-weight: 700; letter-spacing: -.2px; transform-origin: right center; }
.approval-strike { position: absolute; top: 50%; right: -3px; left: -3px; height: 2px; margin-top: -1px; border-radius: 2px; background: #e5484d; transform-origin: left center; }
.approval-stamp { position: absolute; top: 14px; right: 18px; padding: 4px 11px; border: 3px solid #12a150; border-radius: 8px; color: #12a150; font-size: 17px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; rotate: -9deg; }
.approval-note { margin: 12px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.story-request { display: grid; justify-items: center; width: min(100%, 460px); }

.story-apps { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin: 0; padding: 0; list-style: none; }
.story-app { display: grid; justify-items: center; gap: 3px; }
.story-app strong { color: var(--ink); font-size: 14px; font-weight: 700; white-space: nowrap; }
.app-icon { display: grid; place-items: center; width: 88px; height: 88px; margin-bottom: 9px; border-radius: 23px; background: linear-gradient(150deg, var(--from), var(--to)); color: white; box-shadow: 0 12px 26px -8px var(--to), inset 0 1px 0 rgb(255 255 255 / 35%); }
.app-icon .icon { width: 40px; height: 40px; }
.story-action { position: relative; display: grid; justify-items: center; gap: 16px; }
.story-lead { margin: 0; color: var(--ink); font-size: clamp(20px, 2.3vw, 30px); line-height: 1.15; letter-spacing: -.02em; font-weight: 700; text-align: center; }
.story-line-own { display: block; width: fit-content; margin-inline: auto; } /* Fitted, so the gradient runs across the words and not the whole line. */
.story-action .showcase-note { margin: 0; }
.story-action .showcase-note svg { display: none; }

@media (max-width: 860px) {
  .app-icon { width: 68px; height: 68px; border-radius: 18px; margin-bottom: 7px; }
  .app-icon .icon { width: 30px; height: 30px; }
}
@media (max-width: 480px) {
  .approval { padding-inline: 20px; }
  .approval-stamp { top: 12px; right: 10px; padding: 2px 7px; border-width: 2px; font-size: 12px; letter-spacing: 1px; }
}
@media (max-width: 400px) { /* The plain page on a phone: two tiles side by side do not fit its narrow card. Pinned mode sizes them itself. */
  html:not(.story-on) .app-tiles { grid-template-columns: 1fr; }
}
@media (max-width: 360px) { /* The smallest phones: the longest row and the two prices must still fit, or the card grows off centre. */
  .approval { padding-inline: 14px; }
  .approval dl div { gap: 8px; }
  .approval dt, .approval dd { font-size: 13px; }
  .approval dl > div:not(.approval-total) dd { gap: 6px; }
  .approval-tick { width: 16px; height: 16px; }
  .approval-total dd { gap: 8px; font-size: 20px; }
  .approval-total .approval-was { font-size: 14px; }
}

/* The pinned story. The section is as tall as the scroll it plays over; the stage stays put and starts under the page
   header, so nothing shifts before the first beat. script.js places every [data-cast] piece from the scroll position;
   each starts hidden, and the first beat is placed here too so the first paint is already right. All of it needs html.story-on, set in the page's
   head and taken away if script.js does not start the story: pinned with nothing to move it, the section would be blank screens. */
@media screen and (prefers-reduced-motion: no-preference) {
  /* Taller than the other beats need: the app beat gets more scroll, and script.js keeps every other beat at its old pace. */
  html.story-on .story { height: calc(1441vh + var(--story-rise, 0px)); margin-top: calc(-1 * var(--story-header, 101px)); padding: 0; pointer-events: none; }
  /* Inside the story a finger drives the scroll driver in script.js rather than the page; pinching to zoom stays with the browser. */
  html.story-on.is-story-driven { touch-action: none; touch-action: pinch-zoom; }
  /* The header's return for the story's close and its stay through the pricing section (placeHeader in script.js).
     Off screen, not hidden, so a keyboard visitor can still reach it. */
  html.story-on .site-header.is-story-held { position: sticky; top: 0; }
  html.story-on .site-header.is-story-slides { transition: transform .35s ease; }
  html.story-on .site-header.is-story-away { transform: translateY(-100%); }
  html.story-on .site-header.is-story-away:has(:focus-visible) { transform: none; } /* A keyboard visitor's; a clicked link keeps focus and must not leave the header on screen. */
  /* Content passes beneath it, so it needs a backing. Edge to edge by a clipped shadow: a 100vw box would widen the page by the scrollbar's width. */
  html.story-on .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--surface); box-shadow: 0 0 0 100vmax var(--surface); clip-path: inset(0 -100vmax); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
  html.story-on .site-header.is-story-over::before { opacity: 1; }
  /* Whatever is scrolled or tabbed to while the header is held must land below it, not under it. */
  html.story-on :is(#hero, .story-action, .pricing), html.story-on :is(#hero, .story-action, .pricing) :is(a, button, [tabindex]) { scroll-margin-top: 90px; }
  html.story-on .story-stage { position: sticky; top: 0; display: block; height: 100vh; height: 100svh; container-type: size; overflow-x: clip; pointer-events: none; } /* A piece starting oversized or off to one side must never widen the page. */
  html.story-on .story-line, html.story-on .story-card, html.story-on .story-action, html.story-on .story-hint { position: absolute; left: 50%; top: 50%; opacity: 0; translate: -50% -50%; }
  html.story-on .story-line { width: min(100%, 980px); margin: 0; font-size: clamp(30px, min(4.8vw, 8vh), 66px); will-change: transform, opacity; }
  html.story-on [data-cast="line1"] { opacity: 1; }
  html.story-on [data-cast="line2"] { font-size: clamp(28px, min(3.9vw, 6.6vh), 54px); }
  html.story-on .story-card, html.story-on .story-action { will-change: transform, opacity; }
  /* Small, out of the story's way, and its own: the stage takes no pointer events. Above the app icons. */
  html.story-on .story-controls { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 6; display: flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--glass-border); border-radius: 999px; background: var(--panel-a); color: var(--ui-ink); box-shadow: 0 6px 20px rgb(9 12 50 / 12%); backdrop-filter: blur(10px); pointer-events: auto; animation: story-controls-in 300ms ease both; }
  html.story-on .story-controls[hidden] { display: none; }
  @keyframes story-controls-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  html.story-on .story-control { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background-color 150ms ease, opacity 150ms ease; }
  html.story-on .story-control:hover:not(:disabled) { background: var(--surface-subtle); }
  html.story-on .story-control:disabled { opacity: 0.35; cursor: default; }
  html.story-on .story-control:focus-visible, html.story-on .story-speed input:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
  html.story-on .story-speed { display: flex; align-items: center; gap: 6px; padding: 0 6px; color: var(--ui-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
  html.story-on .story-speed input { width: 72px; margin: 0; accent-color: var(--link); cursor: pointer; }
  html.story-on .story-speed output { min-width: 4ch; }
  @media (pointer: coarse) { html.story-on .story-control { width: 40px; height: 40px; } html.story-on .story-speed input { width: 96px; } }
  html.story-on .story-apps { position: absolute; inset: 0; z-index: 4; display: block; pointer-events: none; } /* Above the purchase request, which they drop into. */
  html.story-on .story-apps li { position: absolute; left: 50%; top: 50%; translate: -50% -50%; opacity: 0; visibility: hidden; will-change: transform, opacity; }
  /* Each app has its own path, pace and starting point, so no two ever move as a group, even on the first frame. */
  html.story-on .story-app { animation: story-drift var(--drift-time) ease-in-out var(--drift-from) infinite alternate; }
  html.story-on .story-apps li:nth-child(1) .story-app { --dx: 10px; --dy: -7px; --dr: 4deg; --drift-time: 5s; --drift-from: -1.3s; }
  html.story-on .story-apps li:nth-child(2) .story-app { --dx: -6px; --dy: 10px; --dr: -3deg; --drift-time: 6.7s; --drift-from: -4.1s; }
  html.story-on .story-apps li:nth-child(3) .story-app { --dx: 11px; --dy: 5px; --dr: -5deg; --drift-time: 4.3s; --drift-from: -2.6s; }
  html.story-on .story-apps li:nth-child(4) .story-app { --dx: -9px; --dy: -8px; --dr: 3deg; --drift-time: 7.9s; --drift-from: -6.2s; }
  html.story-on .story-apps li:nth-child(5) .story-app { --dx: 5px; --dy: 10px; --dr: 5deg; --drift-time: 5.6s; --drift-from: -0.4s; }
  html.story-on .story-apps li:nth-child(6) .story-app { --dx: -11px; --dy: 6px; --dr: -4deg; --drift-time: 4.8s; --drift-from: -3.5s; }
  html.story-on .story-apps li:nth-child(7) .story-app { --dx: 8px; --dy: 9px; --dr: 3deg; --drift-time: 7.1s; --drift-from: -5.3s; }
  html.story-on .story-hint { display: flex; align-items: center; gap: 6px; top: 92%; margin: 0; color: var(--muted); font-size: 13px; font-weight: 600; opacity: 1; }
  html.story-on .story-hint svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; animation: story-bob 1.6s ease-in-out infinite alternate; }
  /* Above the app card, so each file is seen landing on the sidebar. */
  html.story-on .story-files { position: absolute; inset: 0; z-index: 3; display: block; pointer-events: none; }
  html.story-on .app-empty { grid-area: 1 / 1; display: block; place-self: center; color: var(--body); font-size: 13.5px; }
  html.story-on .app-big:not([data-big="4"]) { display: grid; }
  html.story-on .app-pill { left: 0; background: color-mix(in srgb, var(--blue-icon) 16%, var(--surface)); }
  html.story-on .app-pill.is-done { background: color-mix(in srgb, #12a150 22%, var(--surface)); }
  html.story-on .story-file { position: absolute; left: 50%; top: 50%; translate: -50% -50%; transform: translate(calc(var(--x) * 1cqw), calc(var(--y) * 1cqh)) rotate(calc(var(--r) * 1deg)); will-change: transform, opacity; }
  html.story-on .mess-file { padding: .62em .95em; font-size: clamp(13px, 1.2vw, 17px); border-radius: .8em; }
  html.story-on .mess-sticky { max-width: 11em; font-size: clamp(14px, 1.25vw, 18px); }
  html.story-on .story-file > span { animation: story-float 6s ease-in-out infinite alternate; }
  html.story-on .story-file:nth-child(2n) > span { animation-duration: 7.5s; animation-delay: -2s; }
  html.story-on .story-file:nth-child(3n) > span { animation-duration: 5s; animation-delay: -4s; animation-direction: alternate-reverse; }
  html.story-on .story.is-away .story-file > span, html.story-on .story.is-away .story-app, html.story-on .story.is-away .story-hint svg { animation-play-state: paused; }
  /* While the apps are on stage they are the only thing moving: the files hold exactly where they are, then carry on from there. */
  html.story-on .story.is-still .story-file > span { animation-play-state: paused; }
  html.story-on .story-action { display: block; width: max-content; pointer-events: auto; }
  /* Above the button and out of the action's own box: script.js and the note both measure from the button. */
  html.story-on .story-lead { position: absolute; left: 50%; bottom: calc(100% + 14px); translate: -50% 0; width: max-content; max-width: calc(100vw - 32px); }
  html.story-on .story-action .showcase-note { position: absolute; left: calc(100% + 22px); top: -6px; display: flex; align-items: center; gap: 8px; width: max-content; }
  html.story-on .story-action .showcase-note svg { display: block; transform: scaleX(-1); }
  /* Once the visitor is past the close, the story is done for this visit (settleStory in script.js): the welcome section takes its place at the top,
     and the stage is cropped to the close, so the close and everything below it stay exactly where they were. */
  html.story-on:not(.story-settled) #hero { display: none; }
  /* Waits unseen above the close, then fades in once, when scrolling back up first brings it into view. */
  html.story-on.story-settled #hero { padding-bottom: var(--close-gap); opacity: 0; }
  html.story-on.story-settled #hero.is-welcomed { opacity: 1; transition: opacity 2s ease; }
  html.story-on.story-settled .story { display: flow-root; height: auto; margin-top: 0; overflow: clip; }
  html.story-on.story-settled .story-stage { position: relative; margin-top: calc(-1 * var(--story-cut, 0px)); }
  html.story-on.story-settled .story-stage > :not([data-cast="line6"], [data-cast="action"]) { display: none; }
  html.story-on main { --close-gap: min(var(--section-gap), 15vh); } /* The same room above and below the close; a short window keeps the top of the pricing cards in view at the story's rest. */
  html.story-on .story + .pricing { margin-top: calc(-1 * var(--story-rise, 0px)); padding-top: var(--close-gap); } /* It rises over the stage's empty lower half to meet the close (placeClose in script.js). */
  @keyframes story-float { from { translate: -5px -7px; rotate: -1.4deg; } to { translate: 6px 8px; rotate: 1.4deg; } }
  @keyframes story-drift {
    from { translate: calc(var(--dx) * -1) calc(var(--dy) * -1); rotate: calc(var(--dr) * -1); }
    50% { translate: calc(var(--dy) * 0.6) calc(var(--dx) * -0.6); }
    to { translate: var(--dx) var(--dy); rotate: var(--dr); }
  }
  @keyframes story-bob { from { translate: 0 -2px; } to { translate: 0 3px; } }
  @media (max-width: 1240px) {
    html.story-on .story-action .showcase-note { position: static; justify-content: center; width: auto; margin-top: 14px; }
    html.story-on .story-action .showcase-note svg { display: none; }
  }
  @media (max-width: 620px) {
    html.story-on .story { margin-top: calc(-1 * var(--story-header, 84px)); }
    html.story-on .story-file:nth-child(3), html.story-on .story-file:nth-child(7) { display: none; }
    html.story-on .story-card { width: min(100%, 340px); }
    html.story-on .team-app { width: min(100%, 330px); padding-inline: 16px; }
    html.story-on .app-body { gap: 10px; }
    html.story-on .app-rail { gap: 5px; padding-right: 8px; }
    html.story-on .app-rail-item { padding: 2px; }
    html.story-on .app-rail-item i { width: 30px; height: 30px; border-radius: 9px; }
    html.story-on .app-rail-item .icon { width: 15px; height: 15px; }
    html.story-on .app-spot { padding: 10px; }
    html.story-on .app-big { margin: -10px; padding: 10px; }
    html.story-on .app-line { padding: 7px 0; font-size: 12.5px; }
    html.story-on .app-line em { font-size: 11px; }
    html.story-on .app-msg { gap: 6px; }
    html.story-on .app-msg > i { width: 24px; height: 24px; font-size: 11px; }
    html.story-on .app-bubble { max-width: 80%; padding: 5px 9px; font-size: 12.5px; }
    html.story-on .app-chat { gap: 5px; }
    html.story-on .app-pill { padding: 0 5px; font-size: 10px; }
    html.story-on .app-cols { font-size: 11.5px; }
    html.story-on .app-tile { padding: 7px 8px; font-size: 12px; }
    html.story-on .app-tile em { font-size: 10.5px; }
  }
}