/* Product-brief layout. Text and surface colors inherit the checked night tokens. */
.section-end-link { text-align: center; margin-top: 1.7rem; }
.night-demo-copy > .text-link { margin-top: 1.8rem; }
.story-preview { justify-self: center; min-width: 0; }
.phone-shell { width: 19.21875rem; height: 41.6125rem; position: relative; filter: drop-shadow(0 20px 45px #08091f88); }
.phone { display: flex; flex-direction: column; width: 23.4375rem; height: 50.75rem; transform: scale(.82); transform-origin: top left; overflow: hidden; background: var(--surface); border: .45rem solid #3a3854; border-radius: 3.2rem; box-shadow: inset 0 0 0 1px #676080, 0 0 0 1px #625b7c; }
.phone-status { display: flex; justify-content: space-between; flex-shrink: 0; height: 3.2rem; align-items: center; padding: .4rem 1.6rem 0; font-size: .73rem; font-weight: 600; }
.phone-status > span:last-child { font-size: .61rem; }
.preview-tab-hint { flex-shrink: 0; padding: .7rem .9rem .65rem; text-align: center; color: var(--ink-2); font-size: .72rem; }
.preview-tabs { display: flex; gap: .45rem; padding: .2rem .9rem 1rem; flex-shrink: 0; }
/* The phone scales to .72 on small screens: keep rendered tap targets above 44px. */
.preview-tabs button { flex: 1; min-width: 0; min-height: 3.85rem; padding: .7rem .35rem; font-size: .8rem; font-weight: 500; border: 1px solid var(--purple-brand); border-radius: 1rem; background: var(--surface-raised); color: var(--ink); box-shadow: 0 3px 0 var(--line); }
.preview-tabs button.is-active { background: var(--button-fill); border-color: var(--button-fill); color: var(--ink-on-light); box-shadow: 0 3px 0 var(--moonlight); }
.preview-tabs button:focus-visible { outline-offset: 3px; }
@media (hover: hover) {
  .preview-tabs button:hover:not(.is-active) { background: var(--surface-soft-hover); }
}
@media (prefers-reduced-motion: no-preference) {
  .preview-tabs button { transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
}
.phone-content { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.preview-panel { height: 100%; overflow-y: auto; scrollbar-width: thin; padding: 1.1rem 1.3rem 1rem; animation: preview-in .35s ease; outline-offset: -4px!important; }
.preview-panel[hidden] { display: none; }
.preview-kicker { font-size: .61rem; letter-spacing: .1rem; color: var(--purple-brand); margin-bottom: .9rem; font-weight: 600; }
.preview-panel h3 { font-family: var(--font-display); font-size: 1.95rem; line-height: 1.2; font-weight: var(--font-heading-weight); letter-spacing: -.04rem; }
.example-prompt { background: var(--surface-raised); border: 1px solid var(--line); border-radius: 1rem; padding: 1.2rem; margin-top: 1.4rem; }
.example-prompt > span { font-size: .65rem; color: var(--ink-2); }
.example-prompt > p { font-family: var(--font-display); font-size: 1.17rem; line-height: 1.7; margin-top: .7rem; }
.preview-mascot { width: 10rem; height: 10rem; margin: .7rem auto; }
.preview-description { font-size: .78rem; line-height: 1.9; color: var(--ink-2); }
.preview-note { font-size: .62rem; line-height: 1.85; color: var(--ink-3); margin-top: 1.1rem; }
.story-paper { background: #eee9dc; color: var(--ink-on-light); border-radius: 1rem; margin-top: 1.5rem; padding: 1.4rem 1.2rem; }
.story-paper .paper-eyebrow { font-size: .57rem; letter-spacing: .065rem; line-height: 1.7; margin-bottom: 1rem; }
.story-paper > p:not(.paper-eyebrow) { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.85; }
.story-paper > p + p { margin-top: .7rem; }
.review-status { font-family: var(--font-body); font-size: .63rem; margin-top: 1.2rem; padding-top: .8rem; border-top: 1px solid #1e16542a; }
.locked-media { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem .15rem; border-bottom: 1px solid var(--line); font-size: .7rem; }
.locked-media strong { font-weight: 500; color: var(--moonlight); font-size: .63rem; }
.preview-story-art { width: 16rem; height: 16rem; margin: .4rem auto; }
.story-outcome { background: var(--surface-raised); border: 1px solid var(--line); border-radius: 1rem; padding: 1rem; }
.story-outcome h4 { margin: 0 0 .6rem; font-weight: 600; font-size: .78rem; }
.story-outcome p { font-size: .72rem; color: var(--ink-2); line-height: 1.85; }
.phone-home-indicator { width: 7rem; height: .23rem; border-radius: 1rem; background: var(--ink); opacity: .5; flex-shrink: 0; align-self: center; margin: .8rem 0 .6rem; }
.language-list { display: flex; flex-wrap: wrap; justify-content: center; list-style: none; gap: .55rem; padding: 0; margin: 2.5rem auto 0; max-width: 57rem; }
.language-list li { border: 1px solid var(--line); border-radius: 3rem; padding: .5rem .85rem; font-size: .67rem; color: var(--ink-2); }
.privacy-section { padding-block: 5.5rem; background: var(--surface); }
.privacy-section h2,.pricing-section h2 { font-family: var(--font-display); font-size: 2.8rem; font-weight: var(--font-heading-weight); line-height: 1.2; letter-spacing: -.07rem; margin: .75rem 0 1rem; }
.notification-example { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; background: var(--surface-raised); border: 1px solid var(--line); border-radius: 1rem; margin-bottom: 1.2rem; }
.notification-example img { width: 2.7rem; height: 2.7rem; }
.notification-example span { display: block; font-size: .62rem; color: var(--ink-2); margin-bottom: .35rem; }
.notification-example strong { display: block; font-size: .79rem; font-weight: 500; }
.availability-section { padding-bottom: 5.5rem; }
.availability-card { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 3rem; padding: 3rem 3.5rem; border: 1px solid var(--line); border-radius: 2rem; background: var(--surface); }
.availability-copy { max-width: 34rem; }
.availability-copy h2 { font-family: var(--font-display); font-size: 2.5rem; font-weight: var(--font-heading-weight); line-height: 1.2; letter-spacing: -.065rem; margin: .8rem 0 1rem; }
.availability-copy > p:last-child { color: var(--ink-2); font-size: .875rem; line-height: 1.9; }
.platform-list { display: flex; gap: .8rem; list-style: none; padding: 0; margin: 0; }
.platform-list li { display: flex; flex-direction: column; gap: 1rem; width: 9rem; padding: 1.4rem; border: 1px solid var(--line); border-radius: 1.4rem; background: var(--cream); }
/* A tile is a plain label until its store listing exists and `main.js` gives it an href. */
.platform-list a { display: flex; flex-direction: column; gap: 1rem; color: inherit; }
.platform-list a[href]:hover svg, .platform-list a[href]:hover strong { color: var(--purple-brand); }
.platform-list svg { width: 2rem; height: 2rem; color: var(--purple-brand); }
.platform-list span { display: grid; gap: .35rem; }
.platform-list small { font-size: .65rem; color: var(--ink-3); }
.platform-list strong { font-size: 1.05rem; font-weight: 500; }
.pricing-section { background: var(--surface); padding-block: 5.5rem; border-block: 1px solid var(--line); }
.pricing-heading { max-width: 42rem; margin: 0 auto 2rem; text-align: center; }
.pricing-heading .eyebrow { justify-content: center; }
/* The billing period switch. The currency is the language's, so there is no second switch. */
.pricing-controls { display: flex; justify-content: center; }
.pricing-switch { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: .3rem; gap: .3rem; border: 1px solid var(--line); border-radius: 3rem; background: var(--cream); }
.pricing-switch::before { content: ''; position: absolute; z-index: -1; inset-block: .3rem; inset-inline-start: .3rem; width: calc((100% - .9rem) / 2); border-radius: inherit; background: var(--button-fill); transform: translateX(0); }
.billing-control[data-billing-period="annual"]::before { transform: translateX(calc(100% + .3rem)); }
.pricing-switch button { min-width: 0; font-size: .79rem; min-height: 2.8rem; padding: .7rem .9rem; border-radius: 3rem; color: var(--ink-2); }
.pricing-switch .is-active { color: var(--ink-on-light); }
.pricing-switch button:focus-visible { outline-offset: 2px; }
.pricing-switch button:hover:not(.is-active) { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .pricing-switch::before { transition: transform .36s cubic-bezier(.22,.68,.25,1), background-color .2s ease; }
  .pricing-switch button { transition: color .2s ease; }
}
.billing-control { width: min(100%, 25rem); }
.billing-control button span { font-size: .62rem; margin-left: .4rem; }
.billing-note { text-align: center; color: var(--ink-2); font-size: .69rem; line-height: 1.8; min-height: 2rem; margin: .9rem 0 2rem; }
.plan-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .9rem; }
.plan-card { display: flex; flex-direction: column; border: 1px solid var(--line); padding: 1.8rem 1.25rem; border-radius: 1.5rem; background: var(--cream); }
.plan-card-featured { border-color: var(--purple-brand); box-shadow: 0 0 0 1px var(--purple-brand); }
/* The free plan is the one a visitor can take today: the raised surface sets it apart from the
   four "coming soon" cards without competing with the featured plan's brand outline. */
.plan-card-free { background: var(--surface-raised); }
/* The free card's "Start free" and its "Coming soon" pill swap by the `hidden` attribute, which
   the display rules above would otherwise override. */
.plan-card [hidden] { display: none; }
.plan-fine-print { margin-top: .9rem; color: var(--ink-3); font-size: .62rem; line-height: 1.7; }
.plan-card h3 { font-size: 1.1rem; font-weight: 500; }
.plan-description { min-height: 2.6rem; margin-top: .65rem; color: var(--ink-2); font-size: .75rem; line-height: 1.7; }
.plan-price { margin: 1.4rem 0 1rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem; }
.plan-price > span:first-child { font-family: var(--font-display); font-size: 2.2rem; letter-spacing: -.05rem; }
.plan-price > span:last-child { color: var(--ink-2); font-size: .68rem; }
.plan-credits { display: flex; align-items: baseline; gap: .35rem; margin-bottom: 1.3rem; font-size: .75rem; color: var(--purple-brand); }
.plan-credits strong { font-size: 1.35rem; font-weight: 500; }
.allowance-label { font-size: .68rem; line-height: 1.7; color: var(--ink-2); }
.plan-card ul { list-style: none; padding: 0; margin: .8rem 0 .9rem; font-size: .76rem; line-height: 1.9; }
/* The same month's credits spent another way, under the complete stories: quieter, no rules, and
   the part of the card that stretches so every "Coming soon" lines up. */
.plan-card .plan-alternatives { flex: 1; margin: 0 0 1.5rem; font-size: .68rem; line-height: 1.6; color: var(--ink-2); }
.plan-card .plan-alternatives li { border-bottom: 0; padding-block: .12rem; }
.plan-card .plan-alternatives strong { color: var(--ink); }
.plan-card li { padding-block: .45rem; border-bottom: 1px solid var(--line); }
.plan-card li strong { font-weight: 600; }
.plan-card li span { color: var(--ink-2); font-size: .66rem; margin-left: .2rem; }
.plan-card .tier-unavailable { color: var(--ink-3); font-size: .68rem; }
.plan-card .button { width: 100%; gap: .6rem; font-size: .71rem; padding-inline: .6rem; min-height: 2.9rem; }
/* Plans are not on sale yet: where a button will go, a quiet "Coming soon" — text, not a control,
   so nothing looks pressable. The dashed edge says "not yet" without shouting it. */
.plan-soon { display: grid; place-items: center; width: 100%; min-height: 2.9rem; border: 1px dashed var(--line); border-radius: 5rem; color: var(--ink-2); font-size: .71rem; font-weight: 600; letter-spacing: .02em; }
.credit-explainer { max-width: 49rem; font-size: .76rem; color: var(--ink-2); line-height: 1.95; margin: 1.5rem auto 0; text-align: center; }
/* What a story costs and the top-ups, side by side under the plans; stacked on narrow screens. */
.pricing-details { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: 2.5rem; }
.pricing-details > section { border: 1px solid var(--line); border-radius: 1.5rem; background: var(--cream); padding: 1.6rem 1.5rem; }
.pricing-details h3 { font-size: 1.1rem; font-weight: 500; }
.details-intro { margin-top: .45rem; color: var(--ink-2); font-size: .74rem; line-height: 1.7; }
.cost-table-wrap { margin-top: 1rem; overflow-x: auto; }
.cost-table { width: 100%; border-collapse: collapse; font-size: .74rem; line-height: 1.5; }
.cost-table th, .cost-table td { padding: .55rem .45rem; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.cost-table th:first-child { padding-inline-start: 0; }
.cost-table thead th { font-size: .66rem; font-weight: 600; color: var(--ink-2); }
.cost-table tbody th { font-weight: 500; }
.cost-table td { font-variant-numeric: tabular-nums; }
.cost-table .cost-length th, .cost-table .cost-length td { border-bottom: 0; color: var(--ink-2); font-size: .68rem; }
.details-note { margin-top: .9rem; color: var(--ink-3); font-size: .66rem; line-height: 1.7; }
.topup-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.topup-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name price" "credits price"; column-gap: 1rem; padding-block: .75rem; border-bottom: 1px solid var(--line); }
.topup-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.topup-name { grid-area: name; font-size: .8rem; font-weight: 500; }
.topup-credits { grid-area: credits; font-size: .7rem; color: var(--purple-brand); }
.topup-price { grid-area: price; align-self: center; font-family: var(--font-display); font-size: 1.2rem; letter-spacing: -.02rem; }
.closing-section h2 { font-size: 3rem; }
.closing-secondary { display: block; width: max-content; margin: 1rem auto 0; font-size: .76rem; text-decoration: underline; text-underline-offset: .2rem; }
/* Wraps: six links in German or French are wider than a phone. */
.site-footer nav { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; font-size: .7rem; }
.site-footer nav a { color: var(--ink-2); }
/* The page's music credit is a credit, not a place to go: a small chip with a note, apart from
   the footer's links. */
.site-footer .music-credit { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem .3rem .55rem; border: 1px solid var(--line); border-radius: 2rem; background: var(--surface-raised); font-style: italic; }
.site-footer .music-credit:hover { background: var(--surface-soft); color: var(--ink); }
.music-credit svg { width: .8rem; height: .8rem; flex: none; color: var(--purple-brand); }
/* Once the footer stacks, the credit takes a centred line of its own rather than trailing the
   last link: a zero-height break that only exists below 54em. */
.footer-break { display: none; }
@keyframes preview-in { from { opacity: .3; transform: translateY(.5rem); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 70em) {
  .availability-card { gap: 2rem; padding: 2.5rem; }
  .plan-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
  .plan-card { padding: 1.5rem; }
  /* Five cards in two columns: the free card takes the first row alone, its copy on the left and
     its short allowance list on the right, so nothing hangs under a wide header. */
  .plan-card-free { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 2rem; align-content: start; }
  .plan-card-free > * { grid-column: 1; }
  .plan-card-free .allowance-label { grid-column: 2; grid-row: 1; }
  /* Two lists on the right, each in its own rows: the complete stories, then "or N as text only". */
  .plan-card-free ul { grid-column: 2; grid-row: 2 / span 2; margin-top: 0; }
  .plan-card-free ul.plan-alternatives { grid-row: 4; margin-bottom: 0; }
  .plan-card-free .button, .plan-card-free .plan-fine-print { grid-column: 1 / -1; }
}
@media (max-width: 54em) {
  .availability-card { grid-template-columns: minmax(0,1fr); justify-items: center; text-align: center; }
  .availability-copy .eyebrow { justify-content: center; }
  .platform-list li, .platform-list a { align-items: center; }
  .notification-example { max-width: 25rem; }
  .privacy-section h2,.pricing-section h2 { font-size: 2.5rem; }
  .pricing-details { grid-template-columns: minmax(0, 1fr); }
  .site-footer nav { width: 100%; justify-content: center; }
  .site-footer .footer-break { display: block; flex-basis: 100%; height: 0; }
}
@media (max-width: 37em) {
  .availability-section { padding-bottom: 3.5rem; }
  .availability-card { padding: 2rem 1.25rem; border-radius: 1.5rem; }
  .availability-copy h2 { font-size: 2.1rem; }
  .availability-copy > p:last-child { font-size: .8rem; }
  .platform-list { width: 100%; max-width: 24rem; gap: .65rem; }
  .platform-list li { flex: 1; min-width: 0; width: auto; padding: 1.2rem .6rem; }
  .night-demo-copy h2 { font-size: 2.6rem; }
  .phone-shell { width: 18.28125rem; height: 39.585rem; }
  .phone { transform: scale(.78); }
  .privacy-section,.pricing-section { padding-block: 3.5rem; }
  .privacy-section h2,.pricing-section h2 { font-size: 2.1rem; }
  .plan-grid { grid-template-columns: minmax(0,1fr); }
  .plan-card { padding: 1.6rem; }
  .plan-card-free { display: flex; }
  .plan-description { min-height: 0; }
  .plan-price { margin-block: 1rem; }
  .plan-price > span:first-child { font-size: 2.5rem; }
  .plan-card ul { margin-bottom: 1rem; }
  .plan-card .button { font-size: .8rem; }
  .billing-control button { font-size: .72rem; padding-inline: 1rem; }
  .billing-control button span { display: block; margin: .15rem 0 0; font-size: .56rem; }
  .billing-note { min-height: 3rem; }
  .credit-explainer { font-size: .71rem; text-align: left; }
  /* Four columns do not fit a phone: each format becomes a block, its three tiers side by side, each
     value under its tier's name (the column headers move into the cells, so the header row hides). */
  .pricing-details > section { padding: 1.35rem 1.1rem; }
  .cost-table-wrap { overflow-x: visible; }
  .cost-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cost-table, .cost-table tbody, .cost-table tr { display: block; }
  .cost-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: .6rem; padding-block: .7rem; border-bottom: 1px solid var(--line); }
  .cost-table tr.cost-length { border-bottom: 0; }
  .cost-table tbody th { grid-column: 1 / -1; padding: 0 0 .3rem; border: 0; }
  .cost-table td { padding: 0; border: 0; hyphens: auto; overflow-wrap: anywhere; }
  .cost-table td::before { content: attr(data-tier); display: block; font-size: .6rem; line-height: 1.5; color: var(--ink-3); }
  .closing-section h2 { font-size: 2.4rem; }
  .site-footer { flex-direction: column; text-align: center; }
  .site-footer p { font-size: .65rem; text-align: center; }
}
@media (max-width: 23em) {
  .phone-shell { width: 16.875rem; height: 36.54rem; }
  .phone { transform: scale(.72); }
  .billing-control button { padding-inline: .9rem; }
}
@media (prefers-reduced-motion: reduce) { .preview-panel { animation: none; } }