/* A warmer, more expressive layer for the Flamify landing page. */
@font-face {
  font-family: 'Instrument Serif';
  src: url('assets/instrument-serif-italic.ttf') format('truetype');
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

:root {
  --cream: #faf6ef;
  --ink: #30243d;
  --coral: #ac462f;
  --peach: #ffc6a8;
  --mint: #eaf3e8;
  --forest: #2e6954;
  --serif: 'Instrument Serif', Georgia, serif;
}

.enhanced-control { display: none; }
.js .enhanced-control { display: flex; }
.site-header, .hero { color: var(--ink); background: var(--cream); color-scheme: light; }
body { overflow-x: clip; }
.code-window { max-width: 100%; }
.site-header { border-color: #30243d18; }
.site-header .brand-dot { color: var(--coral); }
.nav-links a, .docs-link { color: #625569; font-size: 13px; }
.nav-links a:hover, .docs-link:hover { color: var(--coral); }
.site-header .button-primary, .hero .button-primary { color: #fff8f0; background: #413051; }
.site-header .button-primary:hover, .hero .button-primary:hover { background: #623f73; }
.site-header :focus-visible, .hero :focus-visible { outline-color: #99512f; }
.hero { padding-top: 66px; }
.hero-grid { gap: 56px; align-items: center; padding-bottom: 60px; }
.hero-atmosphere { background: radial-gradient(ellipse at 64% 60%, #ffc49e66, transparent 61%); inset: -40% -20% -30% 18%; }
.hero-copy { padding-bottom: 0; }
.hero-label { color: #725265; background: #f2e5df; border: 0; font-size: 11px; padding: 7px 12px; margin-bottom: 24px; }
.tiny-flame { background: #bd5136; height: 10px; width: 7px; }
.hero h1 { font-size: clamp(52px, 5.2vw, 76px); font-weight: 550; line-height: 1.06; margin-bottom: 29px; }
.hero h1 span { display: inline-block; color: var(--coral); font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 1.27em; letter-spacing: -.035em; }
.hero-description { color: #766577; font-size: 16px; line-height: 1.85; }
.hero .button-secondary { color: #47344d; background: #fff8; box-shadow: inset 0 0 0 1px #5c3f612c; }
.hero .button-secondary:hover { background: #fff; }
.hero-note { color: #766272; font-size: 10px; }
.hero-visual { padding-top: 0; max-width: 100%; overflow: hidden; }
.hero-grid { min-width: 0; }
.orbital-lines { stroke: #c7774830; width: 135%; top: -13%; }
.orbital-lines ellipse:nth-child(2) { stroke: #9076b02a; }
.orbital-lines ellipse:nth-child(3) { stroke-dasharray: 2 9; }
.mood-picker { align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 17px; }
.mood-picker > span { font-size: 10px; color: #806270; }
.mood-picker > div { display: flex; gap: 6px; }
.mood-picker button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #72526122; border-radius: 5px; padding: 7px 9px; font-size: 10px; background: #fff7; color: #77566a; transition: background .2s, border-color .2s; }
.mood-picker button:hover { background: #fff; border-color: #72526166; }
.mood-picker button[aria-pressed=true] { background: #f8ddcd; border-color: #be6d443e; color: #74391f; }
.mood-picker button[data-mood=excited][aria-pressed=true] { background: #dcebd6; color: #315c32; border-color: #87a476; }
.mood-picker button[data-mood=curious][aria-pressed=true] { background: #e9e2f5; color: #654679; border-color: #c8b0dd; }
.mood-picker i { width: 5px; height: 5px; border-radius: 50%; background: #ba714d; }
[data-mood=excited] i { background: #65865b; }
[data-mood=curious] i { background: #9873b7; }
.code-window { background: #2d2339; outline: none; box-shadow: 0 24px 54px -25px #61475c66; border-radius: 13px; color: #f3eef8; }
.window-title { background: #35283f; height: 43px; }
.window-dots i { background: #f79582; }
.window-dots i:nth-child(2) { background: #e6c67d; }
.window-dots i:nth-child(3) { background: #92b68b; }
.window-title > span { font-size: 10px; }
.code-tabs { gap: 18px; }
.code-tabs button { font-size: 11px; }
.code-tab-label { position: relative; display: block; padding: 14px 0 12px; color: #dfc6ff; font-size: 11px; font-weight: 500; }
.code-tab-label::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: #c5a3ef; content: ''; }
.code-actions { display: flex; align-items: center; gap: 8px; }
.run-example { align-items: center; gap: 5px; font-size: 9px; padding: 6px 9px; color: #f9d2b9; background: #8050353d; border-radius: 4px; }
.run-spinner { display: none; width: 11px; height: 11px; flex: 0 0 auto; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: flamify-spin .6s linear infinite; }
.run-example.is-loading .run-spinner { display: block; }
.run-example.is-loading .icon { display: none; }
@keyframes flamify-spin { to { transform: rotate(360deg); } }
.run-example .icon { width: 12px; height: 12px; }
.run-example:hover { background: #80503570; }
.code-content { min-height: 296px; }
.code-content pre { font-size: 11px; }
.c-keyword { color: #e4b0ec; }
.c-string { color: #bfd9a9; }
.code-result { border: 0; background: #423148; padding: 15px; min-height: 84px; }
.result-label { color: #ffd0ab; font-size: 10px; }
.result-spark { color: #ffc2a0; background: #bb805c22; }
.code-result p { font-size: 12px; }
.code-result.is-running p { opacity: .35; }
.code-result p { transition: opacity .25s; }
.code-caption { font-size: 9px; }
.code-caption .status-dot { background: #a8c690; }
.runtime-flow { margin-top: 20px; max-width: 100%; box-sizing: border-box; }
.flow-pause { right: 0; }
.runtime-step { color: #796078; font-size: 11px; }
.step-icon { background: #f9eee9; border-color: #ab879039; }
.runtime-step.is-active { color: #864328; }
.runtime-step.is-active .step-icon { background: #f9ddca; border-color: #c07e5566; box-shadow: 0 0 15px #bd805026; }
.flow-connector { background: #99708755; }
.flow-connector:after { border-color: #99708788; }
.flow-pause { color: #8f7185; }
.flow-pause:hover { color: #4b3046; background: #4b304610; }
.compatibility { border-top-color: #533c511e; color: #5d4861; }
.compatibility > span:first-child, .compatibility .compatibility-note { color: #796271; }
.js-mark { background: #785b89; color: #fff; }
.flutter-mark { fill: #785b89; }

/* Alternating fields give every chapter a distinct place in the scroll. */
.runtime-section { background: #33243d; padding-block: 82px; }
.runtime-section .eyebrow { color: #fac8a3; }
.runtime-section .feature-icon { color: #f0bca0; width: 27px; height: 27px; }
.runtime-features article:nth-child(2) .feature-icon { color: #b3cfaa; }
.runtime-features article:nth-child(3) .feature-icon { color: #d6bafa; }
.runtime-features h3 { font-size: 16px; }
.runtime-features p { font-size: 13px; }
.runtime-features .text-link { color: #ffd0b2; font-size: 12px; }
.section-heading > p:not(.eyebrow), .section-description { font-size: 15px; }
.emotion-section { background: var(--cream); color: var(--ink); color-scheme: light; }
.emotion-section .eyebrow { color: var(--coral); }
.emotion-section h2 { font-size: 48px; }
.emotion-section h2 span { font-family: var(--serif); font-size: 1.3em; font-style: italic; font-weight: 400; color: var(--coral); }
.emotion-section .section-heading > p:not(.eyebrow) { color: #766577; }
.emotion-demo { border-color: #66465126; background: #fffdfa; }
.demo-topline { color: #664751; border-color: #51324516; background: #f3e7de; font-size: 12px; }
.demo-example { color: #795a68; font-size: 10px; }
.emotion-scenarios { align-items: center; justify-content: space-between; gap: 15px; padding: 22px 32px 0; }
.emotion-scenarios > span { color: #79646f; font-size: 11px; }
.emotion-scenarios > div { display: flex; flex-wrap: wrap; gap: 7px; }
.emotion-scenarios button { padding: 8px 11px; border: 1px solid #70526330; border-radius: 5px; font-size: 11px; color: #795967; transition: background .2s; }
.emotion-scenarios button[aria-pressed=true] { background: #fbe4d6; color: #863c27; border-color: #c6876552; }
.emotion-scenarios button:hover { background: #f3e7de; }
.conversation-grid { padding: 37px 33px; grid-template-columns: 1fr 80px 1fr; }
.message-label { color: #8b6d7d; }
.message-label h3 { font-size: 12px; }
.conversation-grid blockquote { color: #4d3d4c; font-size: 21px; min-height: 108px; }
.message-note { color: #7d6374; font-size: 11px; }
.flamify-response .message-label { color: #a44a33; }
.flamify-response blockquote { color: #833d2c; }


.tags span { color: #8a513a; background: #fbe8db; border: 0; font-size: 10px; padding: 5px 9px; }
.analysis-strip { background: #f9f1ea; border-color: #65485115; padding-inline: 33px; }
.analysis-strip > div { font-size: 11px; }
.analysis-strip > div > span { color: #7d6374; }
.analysis-strip strong { color: #684957; font-size: 11px; }
.analysis-strip .text-link { color: #8f452f; font-size: 11px; }
.emotion-controls { padding: 21px 33px; justify-content: space-between; align-items: center; gap: 30px; border-top: 1px solid #65485115; }
.warmth-control { width: 290px; }
.warmth-control label { display: flex; justify-content: space-between; font-size: 11px; color: #685263; margin-bottom: 12px; }
.warmth-control output { color: #a44a33; font-weight: 650; }
.warmth-control > div { display: flex; gap: 12px; align-items: center; font-size: 9px; color: #7d6374; }
.warmth-control input { width: 100%; margin: 0; height: 18px; accent-color: #ac543c; cursor: pointer; }
.compare-response { display: flex; align-items: center; gap: 9px; font-size: 11px; color: #6d5365; padding: 9px 0; }
.mini-switch { width: 30px; height: 18px; border-radius: 20px; background: #c3b6c3; padding: 3px; display: block; transition: background .25s; flex-shrink: 0; }
.mini-switch:after { content: ''; display: block; background: #fff; width: 12px; height: 12px; border-radius: 50%; transition: transform .25s; }
[aria-pressed=true] > .mini-switch, [aria-checked=true] > .mini-switch { background: #916072; }
[aria-pressed=true] > .mini-switch:after, [aria-checked=true] > .mini-switch:after { transform: translateX(12px); }
.playground-disclaimer { font-size: 10px; color: #7d6374; text-align: center; padding: 0 20px 17px; }
.emotion-section :focus-visible { outline-color: #a44a33; }
.emotion-demo[data-comparing=true] .flamify-response blockquote { color: #6b5c70; }
.emotion-demo[data-comparing=true] .tags span { background: #ece6ec; color: #68526c; }

.memory-section { background: var(--mint); border: 0; color: #293e35; color-scheme: light; }
.memory-section .eyebrow { color: #4a765c; }
.memory-copy .section-description { color: #526957; font-size: 15px; }
.memory-copy .text-link { color: #386d53; font-size: 12px; }
.memory-demo { padding: 26px 26px 47px; background: #f9fcf5; border: 1px solid #719b7330; border-radius: 13px; }
.memory-demo-controls { justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 24px; }
.memory-users { display: flex; gap: 7px; }
.memory-users button { display: inline-flex; gap: 6px; align-items: center; font-size: 11px; color: #576b57; padding: 4px 8px 4px 4px; border: 1px solid transparent; border-radius: 5px; }
.memory-users button > span { border-radius: 50%; width: 23px; height: 23px; display: grid; place-items: center; font-size: 9px; background: #e3e6d8; color: #53653f; }
.memory-users button[aria-pressed=true] { background: #edf3e6; border-color: #9fb99055; color: #375f43; }
.memory-users button[data-memory-user=sam] > span { background: #eee0d9; color: #7b4d3e; }
.memory-toggle { display: flex; align-items: center; gap: 7px; font-size: 10px; color: #406747; padding: 5px 0; }
.memory-toggle[aria-checked=true] > .mini-switch { background: #598267; }
.memory-timeline { border-color: #9cb399; margin-left: 5px; }
.timeline-point { background: #91a98a; outline-color: #f9fcf5; }
.timeline-label { color: #587153; font-size: 9px; }
.memory-entry blockquote { color: #3d5943; font-size: 20px; }
.memory-tag { background: #e5efda; color: #4d7045; border: 0; font-size: 10px; }
.memory-bridge { border-color: #719b7330; color: #607657; font-size: 10px; }
.next-session .timeline-point { background: #54805b; box-shadow: 0 0 12px #719b7322; }
.next-session blockquote { color: #365f3e; }
.memory-caption { color: #587153; font-size: 10px; }
.memory-example { color: #607657; right: 26px; bottom: 15px; font-size: 9px; }
.memory-features { border-color: #719b7330; }
.memory-features .icon { color: #628665; }
.memory-features h3 { font-size: 14px; }
.memory-features p { color: #526957; font-size: 12px; }
.memory-section :focus-visible { outline-color: #497651; }
.memory-demo[data-memory=off] .memory-timeline { border-left-style: dashed; }
.memory-demo[data-memory=off] .next-session blockquote { color: #726a61; }
.memory-demo[data-memory=off] .memory-tag { background: #eeebe6; color: #70624e; }

.developers-section { background: #33243d; }
.developer-copy .eyebrow { color: #ffc9a7; }
.developer-copy .section-description { font-size: 14px; color: #c9b9d2; }
.plain-checks { font-size: 12px; }
.plain-checks .icon { color: #c1d4a5; }









.use-cases-section { background: var(--cream); color: var(--ink); padding-block: 93px; color-scheme: light; }
.use-cases-section .eyebrow { color: #815f39; }
.use-cases-section h2 { font-size: 43px; }
.use-cases-section .centered h2 span { color: #795386; }
.use-cases-section .section-heading > p:not(.eyebrow) { color: #7a6c7a; font-size: 14px; }
.use-case-grid article { position: relative; background: #eee5f5; border-color: #806c921f; padding: 27px 24px 21px; transition: background .2s, transform .25s, border-color .2s; display: flex; flex-direction: column; }
.use-case-grid article:nth-child(2) { background: #e8eedb; }
.use-case-grid article:nth-child(3) { background: #f9e5d3; }
.use-case-grid article:nth-child(4) { background: #f7edca; }
.use-case-grid article:hover { transform: translateY(-4px); }
.use-case-grid article.is-selected { border-color: #806c9299; }
.use-case-grid .case-icon { color: #806390; width: 27px; height: 27px; }
.use-case-grid article:nth-child(2) .case-icon { color: #5f7b48; }
.use-case-grid article:nth-child(3) .case-icon { color: #ae744a; }
.use-case-grid article:nth-child(4) .case-icon { color: #9b7b2d; }
.use-case-grid h3 { font-size: 16px; }
.use-case-grid p { font-size: 12px; color: #6a596a; margin-bottom: 24px; }
.case-select { color: #695271; font-size: 9px; justify-content: space-between; text-align: left; gap: 8px; margin-top: auto; padding: 0; }
.case-select:after { content: ''; position: absolute; inset: 0; border-radius: 10px; }
.case-select .icon { width: 15px; height: 15px; }
.case-select:focus-visible { outline: none; }
.case-select:focus-visible:after { outline: 2px solid #70577f; outline-offset: 4px; }
.case-preview { display: grid; grid-template-columns: 1fr 1.4fr; gap: 70px; padding: 39px 35px 0; }
.case-preview-heading { align-self: center; }
.case-preview-label { font-size: 9px; letter-spacing: .1em; color: #77617d; }
.case-preview h3 { font-size: 28px; font-weight: 500; letter-spacing: -.03em; margin: 12px 0; }
.case-preview-note { color: #796878; font-size: 10px; }
.case-conversation { display: flex; flex-direction: column; align-items: flex-end; gap: 13px; justify-content: center; }
.case-user { background: #eee6f0; border-radius: 10px 10px 0 10px; color: #785d82; padding: 11px 18px; font-size: 12px; }
.case-response { display: flex; align-items: flex-start; gap: 10px; padding: 18px 0 0; font-size: 15px; color: #5d4268; }
.case-response .icon { color: #a575b1; margin-top: 4px; }

.pricing-section { background: #eae2f1; color: #3f2d4d; color-scheme: light; border-color: #b9a4c620; overflow: hidden; }
.pricing-section::before { position: absolute; inset: 34% -10% 0; background: radial-gradient(ellipse 52% 58% at 50% 46%, #f7d6c461 0%, #f3e3ea42 46%, transparent 72%); content: ''; pointer-events: none; }
.pricing-section > .container { position: relative; }
.pricing-section .eyebrow { color: #715080; }
.pricing-section .section-heading { margin-bottom: 26px; }
.pricing-section .section-heading > p:not(.eyebrow) { color: #63506b; font-size: 15px; }
.billing-selector { gap: 4px; margin-bottom: 28px; padding: 5px; border-color: #b194bf44; border-radius: 14px; background: #dfd1e8; }
.billing-selector button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 118px; min-height: 44px; padding: 0 18px; border-radius: 10px; color: #5e4369; font-size: 14px; font-weight: 650; transition: background-color .2s, color .2s, box-shadow .25s var(--ease); }
.billing-selector button[aria-selected=true] { background: #fffcf8; color: #3a2547; font-weight: 750; box-shadow: 0 8px 18px -12px #4a2f5a99; }
.billing-selector button:not([aria-selected=true]):hover { color: #3a2547; background: #ffffff70; }
.billing-tag { padding: 3px 8px; border-radius: 999px; background: #d9eadb; color: #245540; font-size: 10px; font-weight: 750; letter-spacing: .04em; white-space: nowrap; }

.pricing-panel { max-width: 920px; grid-template-columns: 1.08fr .92fr; border-color: #cdb7d84d; border-radius: 24px; background: #fffcf7; box-shadow: 0 42px 90px -62px #4a2f5aa6; }
.price-summary { display: flex; flex-direction: column; padding: 36px 40px 32px; background: #f8f0ed; }
.plan-kicker { margin-bottom: 18px; color: #87505c; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.price-summary h3 { color: #2c1d36; font-size: 28px; }
.plan-description { margin-top: 4px; color: #6f5563; font-size: 14px; }
.price-details { min-height: 0; margin: 26px 0 24px; padding-top: 22px; border-top: 1px solid #6b416e24; }
.price-details .offer-label { margin: 0 0 6px; color: #66496f; font-size: 11px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.offer-due { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 14px; margin: 0; }
#price-value { display: inline-flex; align-items: flex-start; gap: 6px; color: #241628; font-family: var(--sans); font-size: 58px; font-style: normal; font-weight: 700; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.price-currency { margin-top: .32em; color: #6b4f74; font-size: 15px; font-weight: 750; letter-spacing: .02em; }
#price-unit { padding-bottom: 7px; color: #4a3756; font-size: 15px; font-weight: 650; }
.offer-renew { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 0; padding: 12px 14px; border: 1px solid #6b416e1f; border-radius: 12px; background: #fffaf7; color: #4f3c58; font-size: 14px; line-height: 1.5; }
.offer-renew .icon { flex: none; width: 17px; height: 17px; margin-top: 1px; color: #87505c; }
#billing-description { color: #2c1d36; font-family: var(--sans); font-size: inherit; font-style: normal; font-weight: 750; line-height: inherit; letter-spacing: 0; font-variant-numeric: tabular-nums; }
#renewal-unit { color: inherit; font-size: inherit; font-weight: 650; }
.pricing-cta { min-height: 54px; margin-top: 0; padding-inline: 22px; border-radius: 12px; background: #4f345d; color: #fff4ee; font-size: 15px; }
.pricing-cta:hover { background: #694774; }
.pricing-cta .icon { transition: transform .25s var(--ease); }
.pricing-cta:hover .icon { transform: translateX(3px); }
.pricing-availability { display: flex; align-items: flex-start; justify-content: flex-start; gap: 8px; min-height: 0; margin-top: 12px; color: #4a3756; font-size: 13px; font-weight: 600; line-height: 1.5; text-align: left; }
.pricing-availability .icon { flex: none; width: 15px; height: 15px; margin-top: 2px; color: #2e6954; stroke-width: 2.2; }

.plan-includes { display: flex; flex-direction: column; justify-content: center; padding: 36px 40px; border-left-color: #85669420; background: #fffdf9; }
.plan-includes h4 { margin-bottom: 20px; color: #34253d; font-size: 15px; font-weight: 750; }
.plan-includes ul { gap: 14px; }
.plan-includes li { gap: 12px; color: #3f3148; font-size: 15px; }
.plan-includes li .icon { flex: none; width: 22px; height: 22px; padding: 5px; border-radius: 50%; background: #e1eedf; color: #2e6954; stroke-width: 2.4; }

.plan-steps { grid-column: 1 / -1; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: start; padding: 22px 40px 24px; border-top: 1px solid #85669424; background: #f5edf2; }
.plan-steps h4 { margin: 3px 0 0; color: #34253d; font-size: 14px; font-weight: 750; }
.plan-steps ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; counter-reset: plan-step; }
.plan-steps li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 11px; row-gap: 2px; align-items: start; counter-increment: plan-step; }
.plan-steps li::before { grid-row: 1 / span 2; display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid #5d3f6e45; border-radius: 50%; background: #fff; color: #5d3f6e; content: counter(plan-step); font: 750 12px var(--sans); }
.plan-steps strong { grid-column: 2; color: #34253d; font-size: 14px; font-weight: 750; line-height: 1.6; }
.plan-steps span { grid-column: 2; color: #5f5066; font-size: 13px; line-height: 1.5; }

.pricing-legal { max-width: 720px; margin-top: 26px; color: #3d2d48; font-size: 14px; line-height: 1.7; }
.pricing-legal > div { flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; }
.pricing-legal a { color: #4d2f62; font-weight: 700; white-space: nowrap; text-underline-offset: 3px; }
.pricing-legal a:hover { color: var(--coral); }
.pricing-section :focus-visible { outline-color: #79568a; }

@media (max-width: 800px) {
  .price-summary, .plan-includes { padding: 30px 26px; }
  #price-value { font-size: 52px; }
  .plan-steps { grid-template-columns: 1fr; gap: 14px; padding: 22px 26px; }
}

@media (max-width: 560px) {
  .billing-selector { width: 100%; max-width: 420px; margin-bottom: 30px; overflow: visible; }
  .billing-selector button { min-width: 0; flex: 1 1 0; padding: 0 8px; font-size: 13px; }
  .billing-tag { position: absolute; top: -11px; left: 50%; padding: 2px 7px; font-size: 9px; transform: translateX(-50%); box-shadow: 0 4px 10px -6px #24554099; }
  .pricing-panel { grid-template-columns: 1fr; max-width: 440px; border-radius: 20px; }
  .price-summary { padding: 26px 22px 24px; }
  .plan-kicker { font-size: 9px; }
  .price-summary h3 { font-size: 26px; }
  .price-details { margin: 22px 0 22px; padding-top: 20px; }
  #price-value { font-size: 50px; }
  .offer-renew { font-size: 13.5px; }
  .pricing-cta { font-size: 15px; }
  .plan-includes { padding: 26px 22px; border-left: 0; border-top: 1px solid #85669426; }
  .plan-includes li { font-size: 14px; }
  .plan-steps { padding: 22px; }
  .plan-steps ol { grid-template-columns: 1fr; gap: 14px; }
  .pricing-legal { max-width: 440px; font-size: 13px; }
  .pricing-legal > div span[aria-hidden] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-cta:hover .icon { transform: none; }
}

.faq-section { background: var(--cream); color: #49384f; color-scheme: light; }
.faq-section .eyebrow { color: #7d5f70; }
.faq-section .section-description { color: #755f76; }
.faq-section .text-link { color: #935d74; }
.faq-list, .faq-list details { border-color: #785f7426; }
.faq-list summary { color: #664c6b; font-size: 14px; }
.faq-list summary:hover { color: #a35052; }
.faq-list details > p { color: #725d73; font-size: 13px; }
.faq-list details a { color: #9d5368; }
.faq-plus:before, .faq-plus:after { background: #8d6c91; }
.faq-section :focus-visible { outline-color: #79568a; }
.closing-section { background: #f3b896; border: 0; color: #4c2f40; padding-block: 74px; }
.closing-inner h2 { font-size: 57px; }
.closing-inner h2 span { font-family: var(--serif); font-style: italic; font-size: 1.2em; font-weight: 400; color: #843d35; }
.closing-inner p { color: #754437; font-size: 13px; }
.closing-inner .button { background: #4d304b; color: #fff2e8; }
.closing-inner .button:hover { background: #75485f; }
.closing-section :focus-visible { outline-color: #843d35; }
.site-footer { background: #302039; }
.footer-brand > p { font-size: 12px; }
.footer-column h3, .footer-column a { font-size: 12px; }
.footer-bottom { font-size: 13px; color: #f4eef8; }
.footer-operator, #operator-info { color: #f7f2fb; font-size: 14px; line-height: 1.6; }
.footer-operator a, #operator-info a { color: #ffffff; }
.card-brands { display: flex; align-items: center; gap: 8px; }
.card-brands img { display: block; height: 24px; width: auto; border-radius: 3px; }

@media (max-width: 1100px) {
  .hero-grid { gap: 35px; }
  .hero h1 { font-size: 56px; }
  .hero-description { font-size: 14px; }
  .mood-picker { flex-wrap: wrap; gap: 9px; }
  .mood-picker > span { width: 100%; }
  .mood-picker button { font-size: 9px; }
  .code-content pre { font-size: 9.5px; }
  .code-content { min-height: 270px; }
  .code-tabs { gap: 12px; }
  .code-tabs button { font-size: 10px; }
  .run-example { font-size: 8px; padding: 6px; }
  .code-actions { gap: 2px; }
  .runtime-step { font-size: 10px; }
  .emotion-scenarios { padding-inline: 27px; }
  .emotion-scenarios > span { font-size: 10px; }
  .conversation-grid blockquote { font-size: 19px; }
  .memory-layout { column-gap: 45px; }
  .memory-demo { padding-inline: 21px; }
  .memory-demo-controls { flex-wrap: wrap; }
  .memory-entry blockquote { font-size: 18px; }
}

@media (max-width: 800px) {
  .hero { padding-top: 55px; }
  .hero h1 { font-size: 72px; }
  .hero-visual { max-width: 530px; }
  .mood-picker { flex-wrap: nowrap; text-align: left; }
  .mood-picker > span { width: auto; }
  .mood-picker button { font-size: 10px; }
  .code-content pre { font-size: 11px; }
  .code-content { min-height: 294px; }
  .code-tabs { gap: 18px; }
  .run-example { font-size: 9px; }
  .emotion-section h2 { font-size: 39px; }
  .emotion-scenarios { flex-wrap: wrap; justify-content: center; gap: 12px; }
  .conversation-grid { grid-template-columns: 1fr; padding: 30px; gap: 24px; }
  .conversation-grid blockquote { min-height: 0; font-size: 21px; }
  .analysis-strip { gap: 23px; padding-inline: 26px; }
  .analysis-strip > div, .analysis-strip strong, .analysis-strip .text-link { font-size: 10px; }
  .emotion-controls { padding-inline: 26px; gap: 24px; }
  .compare-response { font-size: 10px; }
  .warmth-control { width: 245px; }
  .memory-layout { column-gap: 28px; }
  .memory-copy h2 { font-size: 30px; }
  .memory-copy .section-description { font-size: 13px; }
  .memory-entry blockquote { font-size: 16px; }
  .memory-features p { font-size: 11px; }
  .memory-features h3 { font-size: 12px; }
  .memory-bridge { font-size: 9px; }
  .memory-example { font-size: 8px; right: 20px; }
  .use-cases-section { padding-block: 72px; }
  .use-cases-section h2 { font-size: 36px; }
  .use-case-grid article { padding: 25px; }
  .case-select { font-size: 10px; }
  .case-preview { gap: 32px; padding-inline: 10px; }
  .case-preview h3 { font-size: 25px; }
  .case-response { font-size: 13px; }
  .plain-checks { font-size: 10px; }
  
}

@media (max-width: 560px) {
  .header-inner { min-height: 72px; }
  .menu-toggle { border-color: #785e7133; }
  .menu-toggle span { background: #614367; }
  .main-nav { background: var(--cream); border-bottom-color: #78608033; }
  .nav-links a, .nav-links a:nth-child(2) { color: #634c6d; font-size: 14px; }
  .hero { padding-top: 43px; }
  .hero h1 { font-size: clamp(45px, 12vw, 63px); }
  .hero h1 span { font-size: 1.25em; }
  .hero-label { font-size: 9px; }
  .hero-description { font-size: 13px; }
  .hero-note { font-size: 9px; }
  .hero-actions .button { font-size: 12px; }
  .orbital-lines { width: 100%; left: 0; top: 0; }
  .hero-visual, .hero-grid, .code-window { max-width: 100%; }
  .mood-picker { flex-direction: column; gap: 10px; margin-bottom: 15px; }
  .mood-picker button { font-size: 10px; padding: 8px 10px; }
  .window-title > span { font-size: 8px; }
  .code-tabs { gap: 13px; }
  .code-tabs button { font-size: 9px; }
  .code-actions { gap: 0; }
  .run-example { font-size: 8px; gap: 4px; padding: 6px; }
  .run-example .icon { width: 10px; height: 10px; }
  .code-content pre { font-size: clamp(8px, 2.4vw, 10px); }
  .code-content { min-height: 272px; }
  .code-result { padding: 12px; min-height: 82px; }
  .code-result p { font-size: 11px; }
  .result-label { font-size: 9px; }
  .code-caption { font-size: 8px; }
  .runtime-flow { gap: 8px; padding-right: 0; }
  .flow-pause { position: static; }
  .mood-picker > div { flex-wrap: wrap; }
  .footer-bottom, .footer-operator, #operator-info { font-size: 13px; }
  .compatibility { gap: 19px; }
  .runtime-section { padding-block: 61px; }
  .runtime-features h3 { font-size: 16px; }
  .runtime-features p { font-size: 13px; }
  .runtime-features .text-link { font-size: 11px; }
  .section-heading > p:not(.eyebrow), .section-description { font-size: 13px; }
  .emotion-section h2 { font-size: 32px; }
  .emotion-section h2 span { font-size: 1.23em; }
  .demo-topline { font-size: 11px; }
  .emotion-scenarios { padding: 21px 15px 0; }
  .emotion-scenarios > div { justify-content: center; gap: 5px; }
  .emotion-scenarios button { font-size: 9px; padding: 7px 9px; }
  .conversation-grid { padding: 25px 23px; gap: 20px; }
  .conversation-grid blockquote { font-size: 19px; }
  .message-label h3 { font-size: 11px; }
  .message-note { font-size: 10px; }
  .tags { gap: 5px; }
  .tags span { font-size: 9px; padding: 5px 7px; }
  .analysis-strip { padding-inline: 23px; gap: 13px; }
  .analysis-strip > div, .analysis-strip strong { font-size: 10px; }
  .emotion-controls { flex-direction: column; align-items: stretch; padding: 22px 23px 15px; gap: 19px; }
  .warmth-control { width: 100%; }
  .compare-response { font-size: 11px; }
  .playground-disclaimer { font-size: 9px; }
  .memory-copy h2 { font-size: 35px; }
  .memory-copy .section-description { font-size: 13px; }
  .memory-demo { margin: 0; padding: 23px 20px 42px; }
  .memory-demo-controls { padding-bottom: 26px; flex-wrap: nowrap; }
  .memory-users { gap: 2px; }
  .memory-users button { font-size: 10px; padding-right: 5px; }
  .memory-toggle { font-size: 9px; gap: 6px; }
  .memory-entry blockquote { font-size: 19px; }
  .memory-example { font-size: 8px; }
  .memory-features { padding-top: 25px; }
  .memory-features h3 { font-size: 14px; }
  .memory-features p { font-size: 12px; }
  .developer-copy .section-description { font-size: 13px; }
  .plain-checks { font-size: 11px; }
  .use-cases-section { padding-block: 63px; }
  .use-cases-section h2 { font-size: 33px; }
  .use-case-grid article { padding: 23px 15px 18px; }
  .use-case-grid h3 { font-size: 14px; }
  .use-case-grid p { font-size: 11px; margin-bottom: 19px; }
  .case-select { font-size: 9px; gap: 5px; }
  .case-preview { grid-template-columns: 1fr; padding: 30px 0 0; gap: 24px; }
  .case-preview h3 { font-size: 29px; margin-block: 9px; }
  .case-preview h3 br { display: none; }
  .case-preview-note { font-size: 9px; }
  .case-user { font-size: 11px; }
  .case-response { font-size: 14px; padding-top: 5px; }
  .pricing-section h2 { font-size: 34px; }
  .faq-list summary { font-size: 13px; }
  .faq-list details > p { font-size: 12px; }
  .closing-section { padding-block: 61px; }
  .closing-inner h2 { font-size: 45px; }
  .closing-inner p { font-size: 12px; }
  .footer-column a, .footer-column h3 { font-size: 13px; }
  .footer-bottom, .footer-operator, #operator-info { font-size: 13px; color: #f7f2fb; }
}

@media (prefers-reduced-motion: reduce) {
  .use-case-grid article:hover { transform: none; }
  .run-spinner { animation: none; }
}