/* Public pages: quiet, rounded navigation and a more spacious first impression. */
.marketing { background: #fafbf8; }
.marketing .site-header { height: 88px; padding: 14px 20px 8px; border: 0; background: #fafbf8e8; }
.marketing .site-header-inner { width: min(1320px,100%); height: 66px; padding: 10px 14px 10px 23px; border: 1px solid #e7eae3; border-radius: 40px; background: #fff; box-shadow: 0 4px 20px #24332605; gap: 20px; }
.marketing .site-header .logo { font-size: 23px; letter-spacing: -.8px; }
.marketing .site-header .brand-mark { background: #242823; color: #fff; border-radius: 11px; width: 33px; height: 33px; font-size: 24px; }
.marketing .site-header nav { gap: 26px; }
.marketing .site-header nav a { color: #4f554e; }
.marketing .site-header nav a:hover,.marketing .site-header nav a[aria-current] { color: #182014; text-decoration: underline; text-underline-offset: 6px; }
.marketing .site-nav-actions { gap: 20px; }
.marketing .btn-primary { background: #252b24; color: white; border-color: #252b24; border-radius: 30px; }
.marketing .btn { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
.marketing .btn:hover { transform: translateY(-2px); box-shadow: 0 5px 14px #26342116; }
.marketing .btn:active { transform: translateY(0); }
.marketing .landing-hero { padding: 85px 0 78px; gap: 72px; }
.marketing .hero-copy h1 { font-size: clamp(48px,5.3vw,76px); line-height: 1.04; letter-spacing: -.065em; margin: 22px 0 28px; }
.marketing .hero-copy h1>span { color: #698253; }
.marketing .hero-copy>p { font-size: 16px; line-height: 1.8; max-width: 430px; }
.marketing .hero-eyebrow { font-size: 10px; letter-spacing: .1em; }
.marketing .hero-preview:before { inset: -25px -20px 28px; background: radial-gradient(ellipse at 30% 30%,#eff3e6,#e5ebdd); border-radius: 36px; transform: rotate(-3deg); }
.marketing .sample-panel { box-shadow: 0 16px 40px #34452812; }
.marketing .note-tag { transform: rotate(-2deg); }
.marketing main>section,.story-card { transition: opacity .6s ease, translate .6s ease; }
.marketing .reveal-pending { opacity: 0; translate: 0 22px; }
.mobile-site-menu { display: none; position: relative; }
.story-heading { padding: 80px 0 54px; max-width: 750px; }
.story-heading h1 { font-size: clamp(40px,5vw,68px); line-height: 1.08; letter-spacing: -.055em; margin: 22px 0; }
.story-heading h1 em { font-family: Georgia,serif; font-weight: 400; color: #698253; }
.story-heading>p { font-size: 17px; line-height: 1.8; max-width: 570px; color: #647060; }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.story-card { padding: 34px; background: white; border: 1px solid #e2e7dc; border-radius: 24px; display: flex; flex-direction: column; min-width: 0; }
.story-card-top { display: flex; gap: 14px; align-items: center; }
.story-number { border: 1px solid #dce4d2; background: #f0f4e9; color: #657b50; border-radius: 50%; width: 42px; height: 42px; display: grid; place-items: center; flex-shrink: 0; font-size: 13px; }
.story-tag { font-size: 11px; color: #66725c; line-height: 1.5; }
.story-card h2 { font-size: 27px; letter-spacing: -.8px; line-height: 1.25; margin: 24px 0 12px; }
.story-card>p,.story-steps p { color: #657060; line-height: 1.7; font-size: 14px; }
.story-steps { list-style: none; counter-reset: story; margin: 28px 0; padding: 0; flex: 1; }
.story-steps li { position: relative; padding: 0 0 25px 43px; counter-increment: story; }
.story-steps li:before { content: counter(story); position: absolute; left: 0; top: 0; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; background: #f1f4ee; color: #5a6e4b; font-size: 12px; }
.story-steps li:not(:last-child):after { content: ''; position: absolute; left: 13px; top: 32px; bottom: 6px; width: 1px; background: #e0e6d9; }
.story-steps h3 { font-size: 15px; margin: 0 0 8px; padding-top: 3px; }
.story-steps p { margin: 0; }
.story-card>.btn { align-self: flex-start; }
.story-outro { text-align: center; max-width: 650px; margin: 90px auto; }
.story-outro .nam-face { margin: auto; }
.story-outro h2 { font-size: 30px; letter-spacing: -.8px; }
.story-outro p { line-height: 1.8; color: #647060; }
@media(max-width:1000px) { .marketing .site-header nav { gap: 16px; } .marketing .site-header-inner { padding-left: 16px; gap: 14px; } .marketing .landing-hero { gap: 35px; } }
@media(max-width:820px) {
 .marketing .site-header { height: 82px; padding: 10px 12px; }
 .marketing .site-header-inner { height: 62px; padding: 8px 10px 8px 16px; }
 .marketing .site-header-inner>nav { display: none; }
 .marketing .site-nav-actions { gap: 12px; }
 .mobile-site-menu { display: block; }
 .mobile-site-menu summary { list-style: none; cursor: pointer; width: 34px; height: 36px; display: grid; place-items: center; border-radius: 50%; font-size: 19px; }
 .mobile-site-menu summary::-webkit-details-marker { display:none; }
 .marketing .mobile-site-menu nav { position: absolute; top: 48px; right: 0; min-width: 210px; display: flex; flex-direction: column; align-items: stretch; padding: 14px; gap: 0; border-radius: 18px; background: white; border: 1px solid #e1e6db; box-shadow: 0 12px 30px #26342118; }
 .marketing .mobile-site-menu nav a { padding: 13px; }
 .marketing .site-login { display: none; }
}
@media(max-width:760px) {
 .marketing .landing-hero { padding: 44px 0 48px; gap: 52px; }
 .marketing .hero-copy h1 { font-size: clamp(46px,10.2vw,65px); }
 .marketing .hero-preview:before { inset: -16px 0 30px; border-radius: 25px; }
 .story-heading { padding: 44px 0 32px; }
 .story-grid { grid-template-columns: 1fr; gap: 20px; }
 .story-card { padding: 24px; }
 .story-outro { margin: 60px auto; }
 .marketing .site-header .logo { font-size: 20px; }
 .marketing .site-header .btn { padding: 10px 14px; font-size: 12px; }
 .marketing .site-header .brand-mark { width: 28px; height: 28px; }
}
@media(prefers-reduced-motion:reduce) {
 .marketing *, .marketing *:before { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
 .marketing .reveal-pending { opacity: 1; translate: none; }
 .marketing .btn:hover { transform: none; }
}

/* Shared motion: short feedback on interaction, with no layout movement. */
:root { --motion-ease: cubic-bezier(.22,.68,0,1); --motion-fast: 180ms; }
:where(button, .btn, .text-btn, .nav a, .site-header a, .site-footer a, summary) {
  transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease,
    border-color var(--motion-fast) ease, box-shadow 220ms ease,
    transform 220ms var(--motion-ease);
}
:where(input:not([type=range]), textarea, select) {
  transition: border-color 180ms ease, box-shadow 220ms ease, background-color 180ms ease;
}
:where(.deck-card, .recent-item, .room-card, .public-price, .feature-block, .story-card) {
  transition: opacity .6s ease, translate .6s ease, border-color 220ms ease,
    box-shadow 240ms ease, transform 260ms var(--motion-ease);
}
:where(.nam-float, .sample-flashcard, .flashcard) {
  transition: transform 260ms var(--motion-ease), background-color 200ms ease, box-shadow 240ms ease;
}
:where(.btn, .text-btn, .icon-button, .sample-bottom button)>svg,
.marketing .btn>span[aria-hidden] { transition: transform 220ms var(--motion-ease); }
button:disabled, .btn[aria-disabled=true] { transform: none !important; box-shadow: none !important; }
@media(hover:hover) and (pointer:fine) {
  :where(.btn, .icon-button, .nam-float):not(:disabled):hover { transform: translateY(-2px); }
  :where(.deck-card, .room-card):hover { transform: translateY(-3px); box-shadow: 0 8px 22px #2434210d; }
  :where(.public-price, .feature-block, .story-card):hover { transform: translateY(-3px); border-color: #cbd8bf; box-shadow: 0 10px 26px #24342109; }
  :where(.recent-item, .nav button, .source-tabs button, .deck-tabs button, .sample-tabs button, .minutes-choices button):not(:disabled):hover { background-color: #edf2e8; }
  :where(.sample-flashcard, .flashcard):hover { box-shadow: 0 8px 24px #2434210a; }
  .marketing .btn:hover>span[aria-hidden] { transform: translate(2px,-2px); }
  :where(.text-btn, .site-footer a):hover { color: #47673a; }
}
:where(.btn, .icon-button, .nam-float, .option, .sample-options button, .subject-choices button, .minutes-choices button):not(:disabled):active {
  transform: scale(.98); transition-duration: 90ms;
}
:where(button, a, summary):focus-visible { outline: 2px solid #718b58; outline-offset: 4px; }
:where(.chat-panel, .toast) { animation: ui-panel-in 240ms var(--motion-ease) both; }
:where(.feedback, .sample-feedback, .sample-explanation, .code-review, .auth-error) { animation: ui-content-in 200ms ease-out both; }
.faq-list details[open]>p, .mobile-site-menu[open]>nav { animation: ui-content-in 220ms var(--motion-ease) both; }
.plan-progress>span { transition: width 350ms var(--motion-ease); }
@keyframes ui-panel-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes ui-content-in { from { opacity: .35; translate: 0 4px; } to { opacity: 1; translate: 0 0; } }
@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  :where(.btn,.icon-button,.nam-float,.deck-card,.room-card,.public-price,.feature-block,.story-card):hover,
  :where(button,.btn):active { transform: none !important; }
}
/* Keep the workspace grid inside narrow phone viewports. */
.dashboard-grid > * { min-width: 0; }
.side-column > * { min-width: 0; }
@media(max-width:760px) { .side-column { grid-template-columns: minmax(0,1fr); } }
/* Tiny, self-contained demonstrations; no model requests. */
.promo-code pre { min-height: 100px; }
.promo-code code { white-space: pre-wrap; overflow-wrap: anywhere; }
.promo-code.preview-running code::after { content: '▍'; color: #d0e4ae; animation: preview-caret .8s steps(1) infinite; }
.preview-controls { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:11px; line-height:1.5; min-height:36px; }
.preview-controls button { color:inherit; border:1px solid currentColor; background:transparent; border-radius:16px; padding:5px 9px; font-size:10px; flex-shrink:0; }
.preview-controls button[hidden] { display:none; }
.promo-code .preview-controls { color:#c9d9bc; }
.promo-graph { flex-direction:column; padding:20px; }
.graph-preview-label { font-size:10px; color:#596c48; align-self:flex-start; letter-spacing:.05em; }
.promo-graph svg { min-height:0; width:100%; max-height:155px; }
.promo-graph text { font:10px system-ui,sans-serif; fill:#657955; }
.promo-graph .preview-controls { width:100%; color:#516746; }
.nam-story-guide { padding:32px; border:1px solid #dce5d2; border-radius:28px; background:#eff4e6; margin:0 0 40px; }
.nam-guide-top { display:flex; gap:30px; align-items:center; }
.nam-guide-top h2 { font-size:26px; letter-spacing:-.8px; margin:10px 0; }
.nam-guide-top p { font-size:12px; color:#67775b; }
.story-nam { position:relative; display:block; width:120px; height:115px; flex-shrink:0; transform-origin:bottom center; }
.story-nam .nam-avatar { position:absolute; left:5px; top:10px; right:auto; bottom:auto; }
.story-nam-hand { position:absolute; right:0; top:0; font-size:28px; color:#809f59; }
.nam-story-choices { display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 20px; }
.nam-story-choices button { border:1px solid #d4dfc7; padding:10px 16px; border-radius:22px; background:#fff9; color:#536647; font-size:12px; }
.nam-story-choices button[aria-pressed=true] { background:#293c27; color:white; border-color:#293c27; }
.nam-story-bubble { border:1px solid #dce5d2; border-radius:18px; background:white; padding:24px; min-height:185px; }
.nam-story-bubble>span { font-size:11px; color:#76856a; }
.nam-story-bubble h3 { font-size:23px; margin:14px 0 10px; letter-spacing:-.5px; }
.nam-story-bubble p { font-size:15px; line-height:1.8; color:#586b4d; max-width:720px; margin:0; }
.nam-story-progress { display:flex; gap:10px; justify-content:center; margin:20px 0; }
.nam-story-progress button { width:30px; height:30px; border-radius:50%; border:1px solid #cbd9bc; background:transparent; font-size:11px; color:#657955; }
.nam-story-progress button[aria-current=step] { background:#758e5b; color:white; }
.nam-story-controls { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
@keyframes preview-caret { 50% { opacity:0; } }
@media(max-width:760px) {
 .nam-story-guide { padding:20px; }
 .nam-guide-top { gap:12px; align-items:flex-start; }
 .story-nam { width:80px; height:100px; }
 .story-nam .nam-avatar { transform:scale(.7); transform-origin:top left; }
 .story-nam-hand { font-size:20px; }
 .nam-guide-top h2 { font-size:21px; }
 .nam-story-bubble { padding:18px; min-height:240px; }
 .nam-story-controls .btn { padding:10px 12px; font-size:11px; }
 .preview-controls { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { .promo-code.preview-running code::after { display:none; } }
.promo-code,.promo-graph { height:240px; }
.promo-graph { display:flex; justify-content:space-between; align-items:center; }
.promo-code pre { margin:12px 0; }
.legal-heading { max-width:760px; padding:75px 0 35px; }
.legal-heading h1 { font-size:clamp(40px,5vw,64px); line-height:1.1; letter-spacing:-.055em; margin:15px 0; }
.legal-heading>p { font-size:17px; color:#657060; }
.legal-content { max-width:840px; padding-bottom:80px; }
.legal-content section { border-top:1px solid #dde5d7; padding:28px 0; }
.legal-content h2 { font-size:22px; margin:0 0 10px; letter-spacing:-.025em; }
.legal-content p { color:#526151; line-height:1.8; font-size:15px; margin:0; }
.legal-content a { color:#365c35; text-decoration:underline; text-underline-offset:3px; }
.legal-report-form { display:grid; gap:15px; margin-top:20px; }
.legal-report-form .btn { justify-self:start; }
.legal-report-form textarea { min-height:135px; }
#copyright-report-result { margin-top:16px; font-size:14px; }
@media(max-width:760px) { .legal-heading { padding:45px 0 25px; } .legal-content section { padding:23px 0; } }
.plan-renewal-note { color:#596b50; font-size:11px; line-height:1.5; margin:11px 0 13px; }
.app-legal-links { display:flex; gap:16px; flex-wrap:wrap; padding:30px 24px; font-size:12px; }
.app-legal-links a { color:#637659; }
.legal-age-check { margin:12px 0; }
.legal-age-check span { display:flex; gap:8px; align-items:flex-start; line-height:1.45; }
.legal-age-check input { width:auto; margin-top:2px; }
.legal-signup-note { font-size:11px; line-height:1.6; color:#697b61; }
.copyright-admin { padding:22px; margin-bottom:22px; }
.copyright-admin .table-wrap { margin-top:15px; }

/* Nam: keep the composer visible while the conversation scrolls. */
.chat-panel{width:min(430px,calc(100vw - 24px));height:min(690px,calc(100dvh - 110px));display:flex;flex-direction:column;border-radius:22px;box-shadow:0 24px 80px #23382726;z-index:40}
.chat-head,.chat-context,.chat-footer{flex-shrink:0}.chat-head{padding:18px 20px}.chat-head .nam-face{width:34px;height:34px}.chat-head strong{font-size:17px}.chat-head .icon-button{min-width:36px;min-height:36px}
.chat-context{padding:12px 18px;border-bottom:1px solid #e8eee5;background:#fafcf8}.chat-context label{display:block;font-size:11px;font-weight:700;margin-bottom:6px}.chat-context select{width:100%;min-width:0;padding:9px;border:1px solid #dce5d8;border-radius:9px;background:white;color:#35513b;font:inherit;font-size:12px}.chat-context small{display:block;font-size:10px;color:#71806f;margin-top:7px}
.chat-body{min-height:0;overscroll-behavior:contain;padding:18px;gap:14px}.chat-welcome{text-align:center;padding:12px 10px;color:#71816e}.chat-welcome .nam-face{margin:0 auto 13px}.chat-welcome h3{font-size:17px;color:#314d38;margin-bottom:8px}.chat-welcome p{font-size:12px;line-height:1.6;margin:0}.chat-bubble{flex-shrink:0;overflow-wrap:anywhere;font-size:13px;line-height:1.7;padding:12px 15px}.chat-bubble small{display:block;font-size:10px;font-weight:700;opacity:.7;margin-bottom:4px}
.chat-footer{background:white;padding:12px 14px max(12px,env(safe-area-inset-bottom));border-top:1px solid #e7ece3}.chat-compose{padding:0;border:1px solid #d5e0cf;border-radius:13px;align-items:flex-end;background:#fbfcf9;gap:8px}.chat-compose:focus-within{outline:2px solid #91ad7b;outline-offset:1px}.chat-compose textarea{flex:1;min-width:0;min-height:64px;max-height:120px;resize:vertical;border:0;outline:none;background:transparent;padding:13px;font-size:16px;line-height:1.5}.chat-compose button{margin:6px;min-height:40px;min-width:40px}.chat-tools{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:12px;font-size:11px}.chat-tools label{display:flex;align-items:center;gap:5px}.chat-tools input{width:16px;height:16px;accent-color:#456a3d}.chat-tools button{font-size:11px}.chat-footnote{display:block;font-size:10px;color:#7e8a78;margin-top:9px}.chat-error{font-size:12px;color:#a34d3c;line-height:1.5;margin:0 0 10px}
@media(max-width:600px){.chat-panel{right:8px;bottom:8px;width:calc(100vw - 16px);height:calc(100dvh - 16px);max-height:760px}.chat-context{padding:10px 14px}.chat-head{padding:12px 16px}}