/* Feature detail pages (/features/<name>): one template for all six; /features/domain is the reference page.
   Tokens and base components (.btn, .prompt-line, .copy-btn, .faq, .cta-band) live in /styles.css.
   Section order (rewritten pages, audit 2026-10-21): hero (the chat and what it made), "Works in the AI you already
   use" strip, how it works, what you get, instead of, good for, plans (one line and a fold), questions, more features.
   Older pages: hero, what you can do, how it works, good for, plans, questions, more features, closing CTA.
   One picture style, the same as the home "Why Page Lemon" tiles: a dotted cream stage (.ft-stage) inside a white
   frame (.ft-frame), white product cards (.ft-card) with a hairline and a soft shadow, DM Sans labels, cobalt for
   actions, navy for people, green only for "live". Pictures are
   aria-hidden; their words are still translated. No motion. Class prefix: ft-. */

.ft { padding-top: clamp(24px, 4vw, 40px); }
.ft .crumbs { margin-bottom: 20px; }
.ft-sec { margin-top: var(--section); scroll-margin-top: 88px; }
.ft-sec-head { max-width: 46em; margin: 0 0 32px; }
.ft-sec-head h2 { margin: 0 0 8px; }
.ft-sec-head p { margin: 0; font-size: var(--fs-lede); line-height: 1.5; color: var(--muted); }
html:lang(ja) :is(.ft p, .ft h1, .ft h2, .ft h3) { word-break: auto-phrase; }

/* ---------- Hero: stacked, like notion.com (owner 2026-10-23): the shared .hero-stack in /styles.css (crumbs, eyebrow
   pill, headline, lede, prompt and buttons centred), then the picture full width under it at every width. Below:
   only what the feature pages add to it. The picture puts the chat beside what it made from 760px (.hero-stack-visual
   grid below). ---------- */
.ft .hero-stack { padding-top: clamp(4px, 1.5vw, 16px); }
.ft-hero h1 { hyphens: manual; }
.ft-lede { margin: 0 0 28px; max-width: 30em; font-size: var(--fs-lede); line-height: 1.5; color: var(--ink); }
.hero-stack .ft-lede { max-width: 36em; }
.ft-plan { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font: 600 var(--fs-ui)/1.3 var(--body); color: var(--brand); }
.ft-plan::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--field); box-shadow: 0 0 0 1.5px var(--brand); }
.hero-stack .ft-plan { margin-bottom: var(--s-4); text-align: left; }
.hero-stack .hero-stack-actions { margin-top: 0; }
.hero-stack .fp-try, .hero-stack .ai-act { width: 100%; max-width: 560px; margin: 0 0 20px; }
.hero-stack .ai-act { margin-bottom: 0; }
.hero-stack .lp-trust { justify-content: center; }
.ft-hero-note { margin: 16px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.hero-stack .feature-demo-controls { justify-content: center; }
/* Chat-and-result pictures without the .ft-frame (.fp-demo) get the same white frame and dotted stage in the hero. */
.fp-demo.hero-stack-visual { max-width: 1040px; margin: clamp(36px, 5vw, 64px) auto 0; }
.page > .hero-stack { padding-top: 0; }
.hero-stack-visual.fp-demo, .hero-stack-visual > .fp-demo { padding: 12px; box-sizing: border-box; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.hero-stack-visual.fp-demo > div, .hero-stack-visual > .fp-demo > div { padding: clamp(14px, 3vw, 36px); border-radius: 16px; background: radial-gradient(var(--line) 1px, transparent 1.2px) 0 0 / 14px 14px, var(--bg); }
.hero-stack-visual .fp-demo { max-width: none; }
@media (max-width: 419px) { .hero-stack-visual.fp-demo, .hero-stack-visual > .fp-demo { padding: 8px; border-radius: 18px; } }
/* From 760px: two columns, the first part (the chat, or the form on /features/forms) on the left, the rest on the right,
   hugging the middle. Works for two or three parts. */
@media (min-width: 760px) {
  .hero-stack-visual .ft-stage-lg:not(.ai-pic), .hero-stack-visual.fp-demo > div, .hero-stack-visual > .fp-demo > div {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: center; align-items: start; gap: 14px clamp(20px, 3vw, 36px);
  }
  :is(.hero-stack-visual .ft-stage-lg:not(.ai-pic), .hero-stack-visual.fp-demo > div, .hero-stack-visual > .fp-demo > div) > * { grid-column: 2; width: auto; max-width: none; margin-top: 0; margin-bottom: 0; }
  :is(.hero-stack-visual .ft-stage-lg:not(.ai-pic), .hero-stack-visual.fp-demo > div, .hero-stack-visual > .fp-demo > div) > :first-child { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  :is(.hero-stack-visual .ft-stage-lg:not(.ai-pic), .hero-stack-visual.fp-demo > div, .hero-stack-visual > .fp-demo > div) > :first-child:nth-last-child(2) { grid-row: 1; }
  :is(.hero-stack-visual .ft-stage-lg:not(.ai-pic), .hero-stack-visual.fp-demo > div, .hero-stack-visual > .fp-demo > div) > :nth-child(2):not(:last-child) { align-self: end; }
}
/* From 960px the frame is the shared 2:1 box (.hero-stack-media, at most 520px tall): the stage fills it, so every picture
   is landscape and the headline and picture meet near the fold. Keep a hero picture's parts short enough to fit it. */
@media (min-width: 960px) {
  .hero-stack-media.ft-frame, .hero-stack-media.fp-demo { display: flex; flex-direction: column; box-sizing: border-box; }
  .hero-stack-media > .ft-stage, .hero-stack-media.fp-demo > div { flex: 1 1 auto; min-height: 0; padding: clamp(12px, 2.6vw - 12px, 36px) clamp(20px, 3vw, 36px); }
}

/* ---------- The picture frame and stage (shared by every picture) ---------- */
.ft-frame { margin: 0; padding: 12px; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.ft-stage {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: 12px; min-width: 0; min-height: 200px;
  padding: 20px; overflow: hidden; border-radius: 16px; font-size: var(--fs-ui); line-height: 1.4; color: var(--ink);
  background: radial-gradient(var(--line) 1px, transparent 1.2px) 0 0 / 14px 14px, var(--bg);
}
.ft-stage-lg { min-height: 340px; padding: clamp(20px, 3vw, 36px); gap: 14px; }
.ft-card { margin: 0; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(30, 29, 25, .06), 0 6px 16px rgba(14, 20, 64, .07); }
.ft-ic { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ft-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--live); }

/* Chat: the person (cobalt, right) and their AI (white, left). */
.ft-chat { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.ft-bubble { max-width: 88%; margin: 0; padding: 9px 13px; border-radius: 16px; font-size: var(--fs-ui); line-height: 1.4; }
.ft-bubble.me { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px; }
.ft-bubble.ai { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.ft-mono { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }

/* Browser: a site on its address, with a padlock. */
.ft-browser { overflow: hidden; }
.ft-url { display: flex; align-items: center; gap: 6px; margin: 10px; padding: 7px 12px; border-radius: 999px; background: #F5F4EF; font: 500 13px/1.2 var(--mono); color: var(--ink); }
.ft-url .ft-ic { color: var(--ok); }
.ft-url span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-url mark { padding: 2px 6px; margin: -2px 0; border-radius: 6px; background: var(--field); color: var(--brand); font-weight: 600; }

/* Small labels on a picture. */
.ft-tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: var(--brand); color: #fff; font: 600 12px/1.3 var(--body); white-space: nowrap; }
.ft-live { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font: 600 12px/1.3 var(--body); white-space: nowrap; }
.ft-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--live); }
.ft-btn { display: inline-flex; align-items: center; justify-content: center; padding: 7px 14px; border-radius: 999px; background: var(--primary); color: #fff; font: 600 13px/1.2 var(--body); white-space: nowrap; }
.ft-btn-quiet { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.ft-note { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; font-size: var(--fs-xs); line-height: 1.4; }
.ft-note .ft-dot { margin-top: 5px; }
.ft-note p { margin: 0; min-width: 0; }
.ft-note b { font-weight: 600; }
.ft-small { color: var(--muted); }
.ft-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }

/* A dialog-like panel (a confirm screen, a settings panel). */
.ft-panel { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.ft-panel-top { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 12px/1.3 var(--body); color: var(--muted); }
.ft-panel-top i { width: 18px; height: 18px; border-radius: 5px; background: var(--sky-line); }
.ft-panel-title { margin: 0; font: 600 15px/1.35 var(--body); color: var(--ink); }
.ft-panel .ft-row { justify-content: flex-end; margin-top: 2px; }

/* ---------- Hero picture for /features/domain ---------- */
.ft-pic-domain > * { align-self: center; width: 100%; max-width: 440px; }
.ft-pic-domain .ft-chat { padding: 0 0 6px; }

/* ---------- Hero picture for /features/forms ---------- */
/* .ft-form: a small form on a picture (a title, label + .ft-input boxes, a .ft-btn); any page may reuse it. */
.ft-form { display: flex; flex-direction: column; gap: 10px; padding: 16px; }
.ft-form-title { margin: 0; font: 600 15px/1.35 var(--body); color: var(--brand); }
.ft-field { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; font: 600 12px/1.3 var(--body); color: var(--muted); }
.ft-input { display: block; min-width: 0; padding: 7px 10px; border: 1px solid rgba(30, 29, 25, .18); border-radius: 8px; background: var(--surface); font: 400 var(--fs-xs)/1.4 var(--body); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-input.ft-mono { font: 400 13px/1.4 var(--mono); }
.ft-input.is-tall { min-height: 56px; white-space: normal; }
.ft-form .ft-row { justify-content: flex-start; }
.ft-msg { margin: 0; padding: 9px 11px; border-radius: 8px; background: var(--bg); font-size: var(--fs-xs); line-height: 1.45; overflow-wrap: anywhere; }
/* A list item in a picture (Lists): name on the left, price on the right */
.ft-item { display: flex; justify-content: space-between; gap: 12px; }
.ft-item b { flex: none; font-weight: 600; }

/* ---------- Hero picture for /features/bookings ---------- */
/* A booking widget (.ft-book): day chips (.ft-days), time chips (.ft-slots), .is-on = the one picked. */
.ft-book { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.ft-book p { margin: 0; }
.ft-book-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.ft-book-top b { font: 600 15px/1.35 var(--body); color: var(--ink); }
.ft-days, .ft-slots { display: grid; gap: 6px; }
.ft-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ft-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ft-days span, .ft-slots span { min-width: 0; padding: 6px 4px; border: 1px solid var(--line); border-radius: 10px; text-align: center; font: 500 var(--fs-xs)/1.25 var(--body); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-days b { display: block; font: 700 16px/1.2 var(--body); color: var(--ink); }
.ft-slots span { border-radius: 999px; color: var(--ink); font-variant-numeric: tabular-nums; }
.ft-book .is-on, .ft-book .is-on b { background: var(--primary); border-color: var(--primary); color: #fff; }
.ft-book .ft-row { padding-top: 12px; border-top: 1px solid var(--line); }

/* ---------- Hero picture for /features/protect ---------- */
/* .ft-gate: a site's passcode screen inside a .ft-browser; .ft-code: the code boxes (i.is-set = a typed digit). */
.ft-gate { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 22px 16px 24px; text-align: center; background: var(--bg); }
.ft-gate p { margin: 0; }
.ft-gate-lock { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 12px; background: var(--field); color: var(--brand); }
.ft-gate-title { font: 600 16px/1.3 var(--body); color: var(--ink); }
.ft-gate .ft-btn { margin-top: 6px; min-width: 120px; }
.ft-code { display: flex; justify-content: center; gap: 6px; margin: 6px 0 0; }
.ft-code i { width: 26px; height: 32px; border-radius: 7px; background: var(--surface); border: 1.5px solid rgba(30, 29, 25, .22); }
.ft-code i:first-child:not(.is-set) { border-color: var(--primary); }
.ft-code i.is-set { background: radial-gradient(circle, var(--ink) 3.5px, transparent 4px), var(--surface); }
.ft-code i.is-set + i:not(.is-set) { border-color: var(--primary); }
.ft-panel .ft-code { justify-content: flex-start; }
@media (max-width: 419px) { .ft-code { gap: 4px; } .ft-code i { width: 22px; height: 28px; } }

/* ---------- What you can do ---------- */
.ft-values { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ft-values li { margin: 0; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); min-width: 0; }
.ft-values h3 { margin: 0 0 8px; font-size: var(--fs-h3); line-height: 1.3; hyphens: manual; }
.ft-values p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.ft-icon { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 0 16px; border-radius: 12px; background: var(--field); color: var(--brand); }
.ft-icon svg { width: 22px; height: 22px; }
@media (min-width: 640px) { .ft-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .ft-values.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ft-values.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- How it works: three steps, each with its own small picture ---------- */
.ft-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; counter-reset: ft-step; }
.ft-steps > li { counter-increment: ft-step; display: flex; flex-direction: column; gap: 16px; margin: 0; min-width: 0; }
.ft-step-text h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-size: var(--fs-h3); }
.ft-step-text h3::before {
  content: counter(ft-step); flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--field); border: 2px solid var(--brand); font: 700 16px/1 var(--body); color: var(--brand);
}
.ft-step-text p { margin: 0; color: var(--muted); }
.ft-steps .ft-frame { margin-top: auto; }
.ft-steps .ft-stage { min-height: 236px; }
@media (min-width: 900px) { .ft-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

/* The copyable "say to your AI" line (the .prompt-line / .copy-btn pattern from /styles.css). */
.ft-ask { margin: 32px 0 0; max-width: 720px; }
.ft-ask-label { margin: 0 0 10px; font: 600 16px/1.35 var(--body); }
.ft-ask .prompt-line { background: var(--surface); }
.ft-more-link { margin: 20px 0 0; font-size: var(--fs-sm); color: var(--muted); max-width: 46em; }

/* ---------- Good for: use cases ---------- */
.ft-uses { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ft-uses li { margin: 0; min-width: 0; }
.ft-uses a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; transition: border-color var(--ease), transform var(--ease); }
.ft-uses a:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.ft-uses b { font: 600 var(--fs-h3)/1.3 var(--body); color: var(--ink); }
.ft-uses span { color: var(--muted); font-size: 16px; line-height: 1.5; }
.ft-uses .ft-go { margin-top: auto; padding-top: 8px; color: var(--primary); font-weight: 600; font-size: var(--fs-sm); }
.ft-uses .ft-go::after { content: " \2192"; }
@media (min-width: 640px) { .ft-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .ft-uses { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Plans: one cell per plan, then the plain rules ---------- */
.ft-plans { display: grid; gap: 24px; padding: clamp(20px, 3vw, 32px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.ft-tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ft-tiers li { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; padding: 14px 16px; border-radius: 14px; background: var(--bg); border: 1px solid var(--line); }
.ft-tiers .is-off { background: var(--surface); }
.ft-tiers .ft-tier { font: 600 var(--fs-ui)/1.3 var(--body); color: var(--muted); }
.ft-tiers .ft-num { font: 700 26px/1.15 var(--body); letter-spacing: -0.02em; color: var(--brand); overflow-wrap: anywhere; }
.ft-tiers .is-off .ft-num, .ft-tiers .ft-num-text { font-size: 17px; line-height: 1.3; padding-top: 4px; }
.ft-tiers .ft-unit { font-size: var(--fs-ui); color: var(--muted); }
@media (min-width: 640px) { .ft-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .ft-tiers { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.ft-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px 32px; }
.ft-rules li { position: relative; margin: 0; padding: 10px 0 10px 30px; border-top: 1px solid var(--line); color: var(--ink); font-size: 16px; line-height: 1.5; }
.ft-rules li::before { content: ""; position: absolute; left: 4px; top: 1.05em; width: 12px; height: 6px; border-left: 2.5px solid var(--primary); border-bottom: 2.5px solid var(--primary); transform: rotate(-45deg); }
@media (min-width: 760px) { .ft-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ft-plans .btn-row { margin: 0; }

/* ---------- Questions: heading left, answers right from 960px ---------- */
.ft-faq { display: grid; gap: 24px; }
.ft-faq .faq { max-width: none; }
.ft-faq .ft-sec-head { margin: 0; }
@media (min-width: 960px) { .ft-faq { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; align-items: start; } }

/* ---------- More features: the other five ---------- */
.ft-related { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ft-related li { margin: 0; min-width: 0; }
.ft-related a { display: flex; align-items: flex-start; gap: 14px; height: 100%; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: border-color var(--ease), transform var(--ease); }
.ft-related a:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.ft-related .ft-icon { width: 40px; height: 40px; margin: 0; }
.ft-related .ft-icon svg { width: 20px; height: 20px; }
.ft-related b { display: block; font-weight: 600; }
.ft-related span:not(.ft-icon) { display: block; min-width: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; }
@media (min-width: 640px) { .ft-related { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .ft-related { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Narrow phones ---------- */
@media (max-width: 419px) {
  .ft-frame { padding: 8px; border-radius: 18px; }
  .ft-stage { padding: 14px; }
  .ft-values li, .ft-uses a { padding: 20px; }
  .ft-bubble { max-width: 92%; }
  .ft-tiers li { padding: 12px; }
}


.ft-tiers .ft-unit + .ft-unit { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }

/* ---------- Pictures for /features/analytics ---------- */
/* A small numbers card (.ft-dash): big numbers (.ft-stats) and a bar list (.ft-bars); bar widths by class, no inline styles. */
.ft-dash { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.ft-stats { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 22px; }
.ft-stat { display: flex; flex-direction: column; gap: 2px; margin: 0; min-width: 0; font-size: 13px; }
.ft-stat-up { margin-left: auto; align-self: center; }
.ft-n { font: 700 24px/1.1 var(--body); letter-spacing: -0.02em; color: var(--brand); }
.ft-up { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font: 600 12px/1.3 var(--body); white-space: nowrap; }
.ft-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ft-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; margin: 0; font-size: var(--fs-xs); line-height: 1.3; }
.ft-bars li > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-bars .ft-mono { overflow-wrap: normal; }
.ft-bar { grid-column: 1 / -1; display: block; height: 8px; border-radius: 4px; background: var(--primary); }
.ft-w20 { width: 20%; } .ft-w30 { width: 30%; } .ft-w40 { width: 40%; } .ft-w50 { width: 50%; } .ft-w60 { width: 60%; }
.ft-w70 { width: 70%; } .ft-w80 { width: 80%; } .ft-w90 { width: 90%; } .ft-w100 { width: 100%; }
.ft-dash .ft-row .ft-small { font-size: 13px; }

/* ---------- Real screenshots (a template's own pages), /features/blog ---------- */
.ft-shots { display: grid; gap: 16px; }
.ft-shots figure { margin: 0; }
.ft-shots img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.ft-shots figcaption { margin: 12px 4px 2px; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); }
.ft-shots figcaption b { color: var(--ink); font-weight: 600; }
.ft-shots + .ft-ask { margin-top: 24px; }
@media (min-width: 760px) { .ft-shots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }


/* Loyalty (features/loyalty.html): the scan strip and the phone screens. The phones reuse the home page's .dv-body and
   .dv-screen, and the cards reuse .ill-card and .ill-stamps (styles.css), so they match the home page's pictures. */
.lp-strip { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; counter-reset: lp; }
.lp-strip > li { counter-increment: lp; display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr); gap: 16px; align-items: center; margin: 0; min-width: 0; }
.lp-strip h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 17px; line-height: 1.3; }
.lp-strip h3::before { content: counter(lp); flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--field); border: 2px solid var(--brand); font: 700 15px/1 var(--body); color: var(--brand); }
.lp-strip p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
@media (min-width: 600px) and (max-width: 959px) { .lp-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; } }
@media (min-width: 960px) {
  .lp-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
  .lp-strip > li { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; }
  .lp-strip .lp-phone { width: min(100%, 176px); justify-self: center; }
}
.lp-phone { container-type: inline-size; width: 100%; min-width: 0; }
.lp-phone .dv-body { rotate: none; box-shadow: 0 10px 22px rgba(30, 29, 25, 0.24); }
.lp-phone .dv-page { gap: 0.55em; padding-inline: 0.8em; }
.lp-phone .dv-page > * { max-width: 100%; }
.lp-phone .ill-stamps { justify-self: stretch; gap: 3px; }
.lp-phone .ill-stamps i { border-width: 1px; }
.lp-phone .ill-stamps i.is-new { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ok); }
.lp-qr { display: block; width: 66%; height: auto; border-radius: 4px; }
.lp-qr path { fill: #1E1D19; }
.lp-sm { font-size: 0.86em; color: var(--muted); }
.lp-big { font: 700 1.5em/1.1 var(--body); letter-spacing: -0.01em; }
.lp-ready { justify-self: stretch; padding: 0.5em; border-radius: 0.7em; background: var(--field); color: var(--ink); border: 1.5px solid var(--line-strong); font-weight: 700; }
.lp-done { display: flex; align-items: center; gap: 0.4em; font-weight: 600; }
.lp-done .live-dot { width: 0.7em; height: 0.7em; }
/* The staff confirm screen: a big Confirm and a big Cancel, full width (docs/contract/member-app.md "The confirm screen") */
.lp-ok, .lp-no { justify-self: stretch; display: grid; place-items: center; min-height: 2.6em; border-radius: 0.7em; font: 700 1.1em/1.1 var(--body); box-sizing: border-box; }
.lp-ok { background: var(--ok); color: var(--paper); }
.lp-no { border: 1.5px solid var(--line-strong); color: var(--ink); background: var(--surface); }
.lp-act { justify-self: stretch; padding: 0.45em 0.5em; border-radius: 0.7em; background: var(--surface); border: 1.5px solid var(--line); }
.lp-act b { display: block; font-size: 1.12em; }
.lp-field { justify-self: stretch; display: grid; gap: 1px; text-align: left; }
.lp-field small { font-size: 0.8em; font-weight: 600; color: var(--muted); }
.lp-field span { padding: 0.3em 0.45em; border: 1.5px solid var(--line); border-radius: 0.45em; background: var(--surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The phone's own camera: always dark, a yellow link chip at the foot, as phones show a scanned code */
.lp-cam { position: absolute; inset: 0; display: grid; place-items: center; background: #15161A radial-gradient(circle at 50% 38%, #3A3B42, #15161A 70%); }
.lp-cam .lp-view { position: relative; width: 70%; aspect-ratio: 1; display: grid; place-items: center; }
.lp-cam .lp-view::before { content: ""; position: absolute; inset: -8%; border: 2px solid #FFE45C; border-radius: 10px; -webkit-mask: conic-gradient(at 22% 22%, #0000 75%, #000 0) 0 0 / 78% 78%; mask: conic-gradient(at 22% 22%, #0000 75%, #000 0) 0 0 / 78% 78%; }
.lp-cam .lp-qr { width: 100%; }
.lp-chip { position: absolute; left: 6%; right: 6%; bottom: 9%; padding: 0.45em 0.4em; font-size: 0.74em; border-radius: 999px; background: #FFE45C; color: #1E1D19; font-weight: 600; line-height: 1.2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-cam-top { position: absolute; top: 7%; left: 0; right: 0; text-align: center; color: #FFFFFF; font-weight: 600; font-size: 0.86em; opacity: 0.85; }
/* A bigger phone beside text (the staff section) */
.lp-duo { display: grid; gap: 28px; align-items: center; }
.lp-duo .lp-phone { width: min(100%, 220px); justify-self: center; }
.lp-duo .ill-note { justify-self: center; margin-top: 18px; }
.lp-duo .ill-note::before { display: none; }
.lp-shot { display: grid; justify-items: center; }
@media (min-width: 760px) { .lp-duo { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; } }
/* The customer's card, three moments */
.lp-states { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.lp-states > li { display: grid; gap: 12px; margin: 0; min-width: 0; }
.lp-states .ill { min-height: 0; padding: 20px 16px; }
.lp-states p.lp-cap { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
.lp-states p.lp-cap b { color: var(--ink); }
@media (min-width: 760px) { .lp-states { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.lp-trust { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 16px 0 0; padding: 0; font-size: var(--fs-ui); color: var(--muted); }
.lp-trust li { display: flex; align-items: center; gap: 6px; margin: 0; }
.lp-trust li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
.lp-ai { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; padding: clamp(18px, 3vw, 28px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.lp-ai p { margin: 0; }
.lp-ai .msg { max-width: 34em; }

/* ---------- Feature pages B rewrite (marketing audit 2026-10-21): shared by bookings, forms, blog, analytics, domain,
   protect; any feature page may reuse them. ---------- */

/* Hero proof: the AI chat (.ft-chat with a .ft-chat-bar title) above what it made. */
.ft-pic-demo > * { align-self: center; width: 100%; max-width: 460px; }
.ft-chat-bar { display: flex; align-items: center; gap: 8px; margin: -14px -14px 2px; padding: 9px 14px; border-bottom: 1px solid var(--line); font: 600 12px/1.3 var(--body); color: var(--muted); }
.ft-chat-bar::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.ft-bubble p { margin: 0; }
.ft-done { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; }
.ft-done li { position: relative; margin: 0; padding-left: 20px; font-size: var(--fs-xs); line-height: 1.4; color: var(--muted); }
.ft-done li::before { content: ""; position: absolute; left: 2px; top: .38em; width: 9px; height: 5px; border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg); }

/* How it works, text only: three steps with how long each takes (.ft-time). */
.ft-steps.is-text .ft-step-text { display: flex; flex-direction: column; align-items: flex-start; padding: 22px; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.ft-steps.is-text .ft-step-text > p:not(.ft-time) { margin-bottom: 14px; }
.ft-time { display: inline-flex; align-items: center; gap: 6px; margin: auto 0 0; padding: 3px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font: 600 12px/1.3 var(--body); color: var(--brand); }
.ft-steps .ft-step-text p.ft-time { color: var(--brand); }

/* Instead of: what this replaces, then one honest line about what it doesn't do. */
.ft-instead { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ft-instead li { display: flex; flex-direction: column; gap: 8px; margin: 0; min-width: 0; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.ft-was { display: flex; align-items: flex-start; gap: 8px; font: 600 16px/1.4 var(--body); color: var(--muted); }
.ft-was::before { content: "\00d7"; flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; border: 1.5px solid currentColor; font: 700 14px/1 var(--body); }
.ft-now { position: relative; padding-left: 28px; color: var(--ink); font-size: 16px; line-height: 1.5; }
.ft-now::before { content: ""; position: absolute; left: 5px; top: .45em; width: 11px; height: 6px; border-left: 2.5px solid var(--ok); border-bottom: 2.5px solid var(--ok); transform: rotate(-45deg); }
.ft-honest { margin: 16px 0 0; max-width: 52em; padding: 14px 18px; border-left: 3px solid var(--brand); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--ink); }
@media (min-width: 760px) { .ft-instead { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Good for: the exact sentence that made it (.ft-say) and the plan it needs (.ft-needs). */
.ft-uses .ft-say { display: block; padding: 9px 12px; border-radius: 10px; background: var(--bg); color: var(--ink); font-size: var(--fs-xs); line-height: 1.45; }
.ft-uses .ft-needs { align-self: flex-start; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--brand); font: 600 12px/1.4 var(--body); }

/* Plans: one line and a fold with the limits (the full table lives on /pricing). */
.ft-plan-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.ft-plan-line h2 { margin: 0; }
.ft-plan-line p { flex: 1 1 22em; min-width: 0; margin: 0; font-size: var(--fs-lede); line-height: 1.5; color: var(--muted); }
.ft-fold { margin-top: 12px; }
.ft-fold > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font: 600 16px/1.3 var(--body); color: var(--primary); }
.ft-fold > summary::-webkit-details-marker { display: none; }
.ft-fold > summary::after { content: "+"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid currentColor; font: 700 15px/1 var(--body); }
.ft-fold[open] > summary::after { content: "\2212"; }
.ft-fold > .ft-plans { margin-top: 8px; }
.lp-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- The shared 8-part feature page (marketing audit A, 2026-10-21) ----------
   1 hero (headline, lede, prompt to copy, CTA) beside a chat → result picture (.fp-demo); 2 the USP strip (.fp-usp,
   same words on every page); 3 how it works, 3 steps (.fp-steps); 4 what you gain: one lead card, a short list and one
   honest limit (.fp-gains); 5 proof (.fp-proof); 6 plans (.ft-plans); 7 questions, 5 at most (.ft-faq); 8 closing CTA
   (.cta-band), nothing after it but the footer. The picture copies the home "How it works" chat (bordered chat, ink
   bubbles for you, outlined bubbles for the AI) and its result cards (.ill-card in styles.css). Tokens only, no motion. */
.fp-hero .ft-lede { margin-bottom: 20px; }
.fp-try { max-width: 34em; margin: 0 0 20px; }
.fp-try .prompt-line { background: var(--surface); }
.fp-try-label { margin: 0 0 8px; font: 600 var(--fs-sm)/1.35 var(--body); color: var(--muted); }

.fp-demo { position: relative; margin: 0; min-width: 0; }
.fp-demo > div { display: grid; gap: 12px; min-width: 0; }
.fp-chat { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 2px solid var(--line-strong); border-radius: 20px; overflow: hidden; }
.fp-chat-bar { margin: 0; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--paper); font: 500 var(--fs-xs)/1.2 var(--mono); color: var(--muted); }
.fp-log { display: flex; flex-direction: column; gap: 10px; padding: 14px 12px 16px; }
.fp-b { margin: 0; max-width: 90%; padding: 9px 13px; border-radius: 16px; font-size: 15px; line-height: 1.42; overflow-wrap: break-word; }
.fp-b.me { align-self: flex-end; background: var(--ink); color: var(--paper); border-bottom-right-radius: 6px; }
.fp-b.ai { align-self: flex-start; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.fp-b p { margin: 0; }
.fp-b p + p, .fp-b p + ul, .fp-b p + ol { margin-top: 6px; }
.fp-b ul, .fp-b ol { margin: 0; padding: 0 0 0 1.2em; font-size: 14px; line-height: 1.4; }
.fp-b li + li { margin-top: 2px; }
.fp-b b { font-weight: 600; }
.fp-link { color: var(--cta); font-family: var(--mono); font-size: 0.9em; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.fp-b.me .fp-link { color: inherit; }
.fp-then { display: flex; align-items: center; gap: 8px; margin: 0; padding-left: 18px; font: 600 var(--fs-xs)/1.3 var(--body); color: var(--muted); }
.fp-then::before { content: ""; width: 2px; height: 18px; border-radius: 2px; background: var(--line-strong); }
.fp-demo .ill-card { max-width: none; }
.fp-demo .ill-body { font-size: 14px; }
.fp-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--field); color: var(--brand); font: 600 12px/1.3 var(--body); white-space: nowrap; }
.fp-pill.is-ok { background: var(--ok-bg); color: var(--ok); }
.fp-pill.is-soon { background: var(--paper); color: var(--muted); border: 1px solid var(--line); }
.fp-btn { justify-self: start; display: inline-flex; padding: 7px 14px; border-radius: 999px; background: var(--primary); color: var(--on-primary); font: 700 13px/1.2 var(--body); }
.fp-btn.is-quiet { background: var(--surface); color: var(--ink); border: 1.5px solid var(--line-strong); }
@media (min-width: 560px) and (max-width: 959px) { .fp-demo { max-width: 560px; } }

/* 2. The USP strip "Works in the AI chat you already use" (every feature page and /features, the same words): four
   short promises, then the AI apps as plain chips (never logos) and a link to how to connect. */
.fp-usp { margin-top: clamp(40px, 6vw, 72px); padding: clamp(20px, 3vw, 28px); background: var(--field); border-radius: var(--radius-lg); }
.fp-usp h2 { margin: 0 0 16px; font: 700 var(--fs-h3)/1.3 var(--body); letter-spacing: -0.01em; }
.fp-usp ul { list-style: none; margin: 0; padding: 0; }
.fp-usp-points { display: grid; gap: 14px 24px; }
.fp-usp-points li { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-content: start; gap: 2px 10px; margin: 0; min-width: 0; }
.fp-usp-points li::before { content: ""; grid-row: 1 / span 2; width: 14px; height: 7px; margin: 6px 0 0 3px; border-left: 2.5px solid var(--brand); border-bottom: 2.5px solid var(--brand); transform: rotate(-45deg); }
.fp-usp-points b { font-weight: 700; }
.fp-usp-points span { font-size: var(--fs-sm); line-height: 1.45; color: var(--ink); opacity: .82; }
.fp-usp-apps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fp-usp .fp-usp-apps { margin-top: 18px; }
.fp-usp-apps li { margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font: 600 13px/1.3 var(--body); color: var(--ink); white-space: nowrap; }
.fp-usp-apps li.fp-usp-more { padding: 0 4px; background: none; border: 0; }
.fp-usp-apps a { display: inline-flex; align-items: center; min-height: 32px; font: 600 var(--fs-ui)/1.3 var(--body); color: var(--primary); }
.fp-usp-apps a::after { content: " \2192"; white-space: pre; }
@media (min-width: 600px) { .fp-usp-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .fp-usp-points { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 3. How it works: three numbered steps */
.fp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: fp-step; }
.fp-steps > li { counter-increment: fp-step; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 14px; margin: 0; min-width: 0; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.fp-steps > li::before { content: counter(fp-step); grid-row: 1 / span 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--field); border: 2px solid var(--brand); font: 700 16px/1 var(--body); color: var(--brand); }
.fp-steps h3 { margin: 4px 0 4px; font-size: var(--fs-h3); line-height: 1.3; }
.fp-steps p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.fp-steps .prompt-line { margin-top: 10px; }
@media (min-width: 900px) { .fp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .fp-steps > li { grid-template-columns: minmax(0, 1fr); padding: 22px; } .fp-steps > li::before { grid-row: auto; margin-bottom: 8px; } }

/* 4. What you gain: one lead card with weight, a short list beside it, one honest limit under them */
.fp-gains { display: grid; gap: 20px; }
.fp-lead { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: clamp(22px, 3vw, 32px); background: var(--surface); border: 2px solid var(--line-strong); border-radius: var(--radius-lg); }
.fp-lead h3 { margin: 0; font: 700 clamp(22px, 1.6vw + 14px, 30px)/1.2 var(--body); letter-spacing: -0.02em; }
.fp-lead > p { margin: 0; font-size: var(--fs-lede); line-height: 1.5; color: var(--ink); }
.fp-lead .ill-card { max-width: 420px; }
.fp-list { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; }
.fp-list li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 2px 14px; margin: 0; min-width: 0; padding: 16px 0; border-top: 1px solid var(--line); }
.fp-list li:first-child { border-top: 0; padding-top: 4px; }
.fp-list .ft-icon { grid-row: 1 / span 2; width: 40px; height: 40px; margin: 0; }
.fp-list .ft-icon svg { width: 20px; height: 20px; }
.fp-list h3 { margin: 0; font-size: 18px; line-height: 1.35; }
.fp-list p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.fp-limit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; padding: 14px 18px; border-radius: var(--radius); background: var(--paper); border: 1px dashed var(--line-strong); font-size: 16px; line-height: 1.5; }
.fp-limit b { flex: none; font-weight: 700; }
.fp-limit span { min-width: 0; flex: 1 1 18em; }
@media (min-width: 960px) { .fp-gains { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px 40px; align-items: start; } }

/* 5. Proof: a live example to open, or the prompt that makes it */
.fp-proof { display: grid; gap: 18px; align-items: center; padding: clamp(20px, 3vw, 32px); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.fp-proof h2 { margin: 0 0 8px; font-size: var(--fs-h3); }
.fp-proof p { margin: 0; color: var(--muted); }
.fp-proof .btn-row { margin: 0; }
@media (min-width: 900px) { .fp-proof { grid-template-columns: minmax(0, 1.4fr) auto; gap: 32px; } }
.fp-related { margin: 18px 0 0; font-size: var(--fs-sm); color: var(--muted); }
.fp-related a { margin-right: 14px; white-space: nowrap; }
.lp-phone .dv-screen { font-size: clamp(10px, 8.6cqi, 14px); }
.lp-phone .ill-stamps i { min-width: 0; }
.lp-phone .dv-bar { font-size: 0.74em; }
.lp-phone .dv-screen p { margin: 0; font-size: inherit; line-height: 1.25; color: inherit; }
.lp-phone .dv-screen .lp-sm { font-size: 0.86em; color: var(--muted); }
.lp-phone .dv-screen .lp-big { font-size: 1.5em; }
.lp-phone .dv-screen .lp-ok { color: var(--paper); font-size: 1.1em; }
.lp-phone .dv-screen .lp-no { color: var(--ink); font-size: 1.1em; }
.lp-phone .dv-screen .dv-go { color: var(--on-primary); justify-self: stretch; }
.lp-phone .dv-screen .lp-chip { color: #1E1D19; font-size: 0.74em; }
.lp-phone .dv-screen .lp-cam-top { color: #FFFFFF; font-size: 0.86em; }
.lp-phone .dv-screen .dv-bar { font-size: 0.74em; }
.lp-phone .ill-stamps i { flex: 1 1 0; width: 0; }

/* ---------- AI in your app (features/ai-in-apps.html, audit 2026-10-21) ---------- */
/* Hero: the stacked hero; the prompt and buttons (.ai-act) sit in the text, the member's chat under it as one app window
   (not a chat beside a result), its note pinned to the window's lower right from 960px. Colours from tokens only, so a data-theme="dark" page keeps its contrast. */
.ai-act { min-width: 0; }
.ai-act .prompt-line { background: var(--surface); margin-bottom: 16px; }
.ai-soon { margin: 16px 0 0; padding: 12px 14px; max-width: 34em; border: 1.5px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface); font-size: var(--fs-sm); line-height: 1.5; color: var(--ink); }
@media (min-width: 960px) { .ai-hero .ai-pic > * { max-width: 600px; } .ai-hero .ai-meter { position: absolute; right: clamp(24px, 4vw, 56px); bottom: clamp(24px, 4vw, 48px); margin: 0; } }
/* The member's chat in a branded app: a .ft-browser card, .ai-dots for an answer still streaming. */
.ai-pic > * { align-self: center; width: 100%; max-width: 440px; }
.ai-app .ft-url { margin: 10px 10px 0; background: var(--bg); }
.ai-app-top { display: flex; align-items: center; gap: 8px; margin: 0; padding: 12px 14px; border-bottom: 1px solid var(--line); font: 600 15px/1.3 var(--body); color: var(--ink); }
.ai-logo { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--primary); color: var(--on-primary); font: 700 14px/1 var(--body); }
.ai-plan { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: var(--field); color: var(--brand); font: 600 12px/1.3 var(--body); white-space: nowrap; }
.ai-app .ft-bubble.me { background: var(--primary); color: var(--on-primary); }
.ai-app .ft-bubble.ai { background: var(--bg); }
.ai-app .ft-bubble p { margin: 0; }
.ai-label { display: flex; align-items: center; gap: 8px; margin-top: 6px !important; font: 500 12px/1.3 var(--body); color: var(--muted); }
.ai-label span { margin-right: auto; }
.ai-dots { display: inline-flex; gap: 5px; padding: 13px 15px; }
.ai-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: ai-dot 1.2s ease-in-out infinite; }
.ai-dots i:nth-child(2) { animation-delay: .15s; }
.ai-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ai-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .ai-dots i { animation: none; opacity: .6; } }
.ai-compose { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px 14px; }
.ai-compose .ft-input { flex: 1 1 auto; color: var(--muted); }
.ai-meter { align-self: flex-end !important; max-width: 300px !important; }
@media (min-width: 480px) { .ai-meter { position: relative; margin-top: -26px; margin-right: -6px; } }
/* Example AI apps: one card each, the prompt at the bottom. */
.ai-ideas { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.ai-ideas > li { display: flex; flex-direction: column; gap: 10px; margin: 0; min-width: 0; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.ai-ideas h3 { margin: 0; font-size: var(--fs-h3); line-height: 1.3; hyphens: manual; }
.ai-ideas p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.ai-ideas .ai-who { font: 600 var(--fs-xs)/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--primary); }
.ai-ideas .ai-pay { color: var(--ink); font-size: var(--fs-sm); }
.ai-ideas .ai-pay b { font-weight: 600; }
.ai-ideas .prompt-line { margin-top: auto; }
.ai-ideas .prompt-line code { font-size: var(--fs-ui); }
@media (min-width: 760px) { .ai-ideas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Paid plans get more AI: text left, the allowance picture right. */
.ai-split { display: grid; gap: 28px; align-items: center; }
.ai-split .ft-sec-head { margin-bottom: 20px; }
.ai-split .ft-rules { grid-template-columns: 1fr; }
@media (min-width: 960px) { .ai-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; } }
.ai-tiers { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 20px; align-items: center; font-size: var(--fs-ui); color: var(--ink); }
.ai-tiers > span:not(.ft-small) { font: 700 20px/1.2 var(--body); color: var(--brand); text-align: right; font-variant-numeric: tabular-nums; }
.ai-tiers .ft-small { font-size: 12px; text-align: right; }
.ai-tiers b { font-weight: 600; }
/* Four steps: two columns, then four. */
@media (min-width: 640px) { .ai-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .ai-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ai-steps > li { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
@media (min-width: 1080px) { .ft-tiers.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Dark theme: text on filled (yellow) chips and bubbles uses the dark ink, not white. */
:root[data-theme="dark"] :is(.ft-bubble.me, .ft-btn:not(.ft-btn-quiet), .ft-book .is-on, .ft-book .is-on b, .ft-tag) { color: var(--on-primary); }
:root[data-theme="dark"] .ft-url { background: var(--bg); }
:root[data-theme="dark"] .ft-input { border-color: var(--line-strong); }

/* ---------- Try it live (js/try-live.js): a demo site in a phone or browser frame ---------- */
/* Without JavaScript only the note and the "Open in a new tab" link show. The phone is at most 360px wide and shrinks
   with the column; the browser frame takes the full width. Tokens only, so data-theme="dark" keeps its contrast. */
.try-live { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; justify-items: center; min-width: 0; }
.try-live-frame { box-sizing: border-box; width: 100%; min-width: 0; background: var(--surface); border: 1.5px solid var(--line-strong); box-shadow: var(--pop); overflow: hidden; }
.try-live-phone { max-width: 360px; padding: 10px; border-radius: 36px; background: var(--brand); }
.try-live-phone .try-live-screen { aspect-ratio: 9 / 18; max-height: 720px; border-radius: 26px; }
.try-live-browser { border-radius: var(--radius); }
.try-live-browser .try-live-screen { height: clamp(440px, 72vh, 760px); }
.try-live-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--bg); border-bottom: 1px solid var(--line); }
.try-live-dots { flex: none; width: 42px; height: 10px; background: radial-gradient(circle 5px at 5px 5px, var(--line-strong) 98%, transparent) 0 0 / 16px 10px repeat-x; opacity: 0.35; }
.try-live-addr { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font: 500 var(--fs-xs)/1.3 var(--mono); color: var(--muted); }
.try-live-screen { position: relative; display: grid; place-items: center; background: var(--paper); overflow: hidden; }
.try-live-screen::before { content: ""; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--primary); }
.try-live.is-loading .try-live-screen::before { animation: try-live-spin 0.9s linear infinite; }
.try-live.is-loaded .try-live-screen::before, .try-live.is-failed .try-live-screen::before { content: none; }
.try-live-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--surface); }
.try-live.is-loading .try-live-iframe { opacity: 0; }
.try-live-fallback { display: grid; gap: 12px; justify-items: center; max-width: 22em; padding: 24px; text-align: center; font-size: var(--fs-sm); line-height: 1.5; color: var(--ink); }
.try-live-fallback p { margin: 0; }
.try-live-fallback-link { font-weight: 600; color: var(--primary); }
.try-live-note { margin: 0; max-width: 34em; text-align: center; font-size: var(--fs-sm); line-height: 1.5; color: var(--muted); }
.try-live-open { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); font: 600 var(--fs-ui)/1.3 var(--body); color: var(--ink); text-decoration: none; }
.try-live-open::after { content: "↗"; color: var(--primary); }
.try-live-open:hover { background: var(--bg); }
.try-live.is-js .try-live-note { order: 2; }
.try-live.is-js .try-live-open { order: 1; }
.try-live.is-js .try-live-frame { order: 0; }
/* The "Try it live" section: the text beside the demo from 960px; the phone a little smaller than on its own. A launch
   block (.is-launch: a demo that opens in a new tab, like member sign-in) has its steps, the link and the note only. */
.ft-try { display: grid; gap: 24px; align-items: center; }
.ft-try .ft-sec-head { margin-bottom: 0; }
.ft-try .try-live-phone { max-width: 300px; }
.ft-try.is-launch .try-live-open { order: -1; }
.ft-try .ft-sec-head .ft-honest { margin-top: 16px; font-size: var(--fs-sm); }
.ft-try-steps { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: ft-try; }
.ft-try-steps li { display: flex; align-items: baseline; gap: 12px; counter-increment: ft-try; }
.ft-try-steps li::before { content: counter(ft-try); flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: var(--on-primary, #fff); font: 700 var(--fs-sm)/1 var(--body); }
.ft-try-sub { margin: 24px 0 8px; font-size: var(--fs-md, 18px); }
.ft-try-list { display: grid; gap: 8px; margin: 0; padding-left: 1.1em; font-size: var(--fs-sm); line-height: 1.55; color: var(--ink); }
@media (min-width: 960px) {
  .ft-try { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  .ft-try.is-launch { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
@keyframes try-live-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .try-live.is-loading .try-live-screen::before { animation: none; } }

/* Charge your way: example plan cards (apps and payments pages) */
.fp-pay-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .fp-pay-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fp-pay-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fp-pay-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin: 0; padding: 18px; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); }
.fp-pay-card .ill-card { max-width: none; }
.fp-pay-card .ill-plan span { font-size: 13px; }
.fp-pay-who { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; }
.fp-pay-who b { font-size: 18px; line-height: 1.3; }
.fp-pay-who span { font-size: var(--fs-sm); color: var(--muted); }
.fp-pay-kind { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; font-weight: 700; font-size: 15px; }
.fp-pay-label { margin: 6px 0 0; font: 600 var(--fs-sm)/1.35 var(--body); color: var(--muted); }
.fp-pay-say { flex: 1; margin: 0; padding: 10px 12px; border-radius: 14px 14px 4px 14px; background: var(--sky); border: 1px solid var(--sky-line); font-size: var(--fs-sm); line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.fp-pay-card .copy-btn { align-self: flex-start; min-height: 44px; padding: 6px 16px; font-size: var(--fs-sm); }
.fp-pay-also { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .fp-pay-also { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fp-pay-also li { display: grid; align-content: start; gap: 2px; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line); }
.fp-pay-also b { font-size: 16px; }
.fp-pay-also span { font-size: var(--fs-sm); color: var(--muted); line-height: 1.45; }
#charge .fp-limit { margin-top: 20px; }