/* Organic light / ambient dark surfaces. Layout and form components stay in app.css. */
html { scroll-padding-top:150px; }
body { background:radial-gradient(ellipse at 85% 0%,var(--ambient),transparent 55%),var(--bg); font-size:17px; }
body::before { content:''; position:fixed; inset:0; pointer-events:none; background:url('../images/grain.svg') repeat; opacity:var(--grain-opacity); z-index:30; }
body::after { content:''; position:fixed; width:65vw; height:65vh; top:15vh; left:-35vw; border-radius:50%; background:radial-gradient(ellipse,var(--ambient),transparent 68%); pointer-events:none; z-index:-1; }
h1,h2,h3 { font-weight:500; letter-spacing:-.045em; } h1 { line-height:1.09; } h3 { line-height:1.22; }
.eyebrow { font-family:var(--font-body); font-weight:600; letter-spacing:.035em; font-size:.76rem; }
.card,.ledger,.auth-panel,.welcome-hero { box-shadow:var(--shadow); border:1px solid var(--line); }
.number { letter-spacing:-.035em; } .stat-value { font-weight:600; } .button { min-height:46px; font-weight:600; }
.button.accent { background:var(--button-bg); color:var(--button-text); } .button.accent:hover { background:var(--button-hover); }
.glow-cta,.glow-cta:hover { background:var(--button-bg); color:var(--button-text); border:1px solid var(--line); box-shadow:0 1px 0 #FFFFFF26 inset,0 5px 18px var(--ambient); animation:none; }
.glow-cta:hover { background:var(--button-hover); } .glow-cta::after { display:none; }
.step-number,.promotion,.sidebar nav a.active { background:var(--button-bg); color:var(--button-text); }
.card.interactive-card:hover { border-color:var(--accent); }
/* A sticky, translucent surface that expands while scrolling down. */
.masthead { position:sticky; top:16px; z-index:50; width:min(calc(100% - 80px),860px); margin:20px auto 48px; transition:width 550ms var(--ease),top 550ms var(--ease); }
.masthead[data-nav-shape=wide] { width:min(calc(100% - 48px),980px); top:8px; }
.nav-pill { min-height:66px; padding:8px 16px; gap:16px; border:1px solid var(--glass-border); background:var(--nav); color:var(--nav-ink); backdrop-filter:blur(24px) saturate(140%); -webkit-backdrop-filter:blur(24px) saturate(140%); box-shadow:0 1px 0 #FFFFFF28 inset,0 8px 28px #101B1312; border-radius:50px; transition:border-radius 550ms var(--ease),background 350ms; }
.masthead[data-nav-shape=wide] .nav-pill { border-radius:24px; }
.brand { padding:0 6px; background:none; border-radius:0; min-width:108px; color:var(--text); }
.wordmark { font:italic 600 2rem/1 var(--font-brand); letter-spacing:-.05em; color:var(--text); }
.brand-subtitle { font:400 .48rem/1.5 var(--font-subtitle); height:auto; min-width:0; color:var(--muted); letter-spacing:.005em; margin-top:4px; }
.brand--hero { padding:0; margin-bottom:3.5rem; } .brand--hero .wordmark { font-size:4.5rem; } .brand--hero .brand-subtitle { font:400 .72rem/1.8 var(--font-subtitle); }
.nav-links { gap:20px; padding:0; } .nav-links a,.public-menu a { font-size:.84rem; font-family:var(--font-body); font-weight:600; } .public-menu { gap:24px; } .public-nav .nav-note { display:none; }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid var(--line); color:var(--text); background:var(--surface); min-width:36px; min-height:36px; border-radius:50%; cursor:pointer; padding:8px; flex-shrink:0; }
.theme-symbol { font:400 20px/1 var(--font-body); } .theme-label { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
[hidden] { display:none!important; }
.sidebar { top:140px; } .sidebar nav a.active { box-shadow:0 1px 0 #FFFFFF20 inset; }
/* Branding and large surfaces: quieter color, stronger typography. */
.brand-story { background:linear-gradient(150deg,var(--accent-tint),var(--surface)); border:1px solid var(--line); border-radius:100px 40px 40px 40px; }
.brand-story h2 { font-weight:500; } .story-rings { border-color:var(--line); box-shadow:0 0 0 45px var(--ambient),0 0 0 90px var(--ambient); }
.hero-copy h1 { font-size:clamp(3.1rem,5.6vw,5.5rem); font-weight:500; max-width:14ch; letter-spacing:-.06em; } .hero-copy h1>span { color:var(--accent-soft); font-style:italic; }
.hero-visual { background:radial-gradient(ellipse at top,var(--ambient),transparent),var(--accent-tint); border:1px solid var(--line); border-radius:48px; padding:24px; width:100%; max-width:500px; justify-self:end; }
.preview-label { color:var(--muted); border-color:var(--line); margin-left:0; } .journal-preview { border:1px solid var(--line); background:var(--surface); transform:none; min-width:0; padding:24px; }
.preview-heading .mini-wordmark { color:var(--text); font:italic 600 1.7rem/1 var(--font-brand); letter-spacing:0; }
.preview-rule { color:var(--text); } .preview-caption { color:var(--muted); } .preview-balance strong { color:var(--text); font-weight:500; }
.home-course,.final-cta,.upgrade-panel { background:linear-gradient(125deg,var(--accent-tint),var(--surface)); border:1px solid var(--line); }
.final-cta .eyebrow,.final-cta .hint { color:var(--muted); }
.course-art { background:radial-gradient(ellipse,var(--ambient),transparent),var(--accent-tint); } .course-book { background:var(--surface); color:var(--text); border-left-color:var(--line); }
.course-book>span:first-child { color:var(--text); } .about-monogram { border-radius:150px 150px 36px 36px; border:1px solid var(--line); background:linear-gradient(160deg,var(--accent-tint),var(--surface)); }
.about-monogram strong { font:400 clamp(4rem,8vw,7rem)/1 var(--font-brand); letter-spacing:0; } .about-monogram strong span { color:var(--accent-soft); }
[data-theme=dark] .card,[data-theme=dark] .ledger { background:linear-gradient(150deg,#FFFFFF05,transparent 70%),var(--surface); }
[data-theme=dark] .streak-card,[data-theme=dark] .pro-plan { background:linear-gradient(150deg,var(--accent-tint),var(--surface)); }
[data-theme=dark] .hero-visual { background:radial-gradient(ellipse at top,#778B5A24,transparent 75%),var(--surface-inset); }
[data-theme=dark] .home-hero::before { content:''; position:absolute; z-index:-1; width:65vw; height:70vh; top:100px; right:0; background:radial-gradient(ellipse,var(--ambient),transparent 70%); pointer-events:none; animation:ambient-drift 14s ease-in-out infinite alternate; }
@keyframes ambient-drift { to { transform:translate(-20px,20px); } }
/* Right-moving, seamless marquees; controls and non-moving fallbacks stay accessible. */
.marquee { min-width:0; margin-top:var(--space-7); } .marquee-controls { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.marquee-viewport { overflow:hidden; padding:10px 0; } .marquee-track { display:flex; width:max-content; }
.marquee-group { flex-shrink:0; display:flex; gap:32px; width:max(1360px,100vw); padding:0 32px 0 0; margin:0; }
.marquee[data-ready=true] .marquee-track { animation:marquee-right 42s linear infinite; will-change:transform; }
.testimonial-marquee[data-ready=true] .marquee-track { animation-duration:65s; }
@keyframes marquee-right { from { transform:translateX(-50%); } to { transform:translateX(0); } }
/* Pointer hover keeps a steady pace; keyboard focus below still makes links reachable. */
/* Keyboard focus restores original items in place, never an off-screen moving link. */
.marquee:has(.marquee-group:focus-within) .marquee-track { animation:none; transform:none; } .marquee:has(.marquee-group:focus-within) .marquee-viewport { overflow-x:auto; }
.product-strip.marquee-group { border:0; padding-top:22px; padding-bottom:22px; grid-template-columns:none; }
.product-strip a { flex:1; min-width:0; padding:18px 26px; font-size:1.2rem; } .product-strip a span { font-size:.85rem; } .feature-marquee .marquee-viewport { border-block:1px solid var(--line); }
.testimonials.marquee-group figure { flex:1; min-width:0; padding:32px; } .testimonials blockquote { font:500 1.35rem/1.5 var(--font-heading); } .testimonials small { font-family:var(--font-body); } .quote-mark { color:var(--accent-soft); }
.marquee:not([data-ready=true]) .marquee-track { width:100%; } .marquee:not([data-ready=true]) .marquee-group { width:100%; padding-right:0; }
/* Footer uses the same static mark and verified social links on every page. */
.site-footer { border-top:1px solid var(--line); padding-top:48px; margin-top:96px; display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:40px; align-items:start; }
.footer-brand .brand { padding:0; margin-bottom:22px; } .footer-brand p { font-size:.88rem; line-height:1.7; } .site-footer .footer-links { display:grid; gap:16px; padding-top:8px; font-size:.9rem; }
.footer-community>p { color:var(--text); font-size:.9rem; } .social-links { display:flex; align-items:center; gap:8px; } .social-links a,.social-pending { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:0; border-radius:8px; text-decoration:none; color:var(--muted); } .social-links a:hover { color:var(--text); background:var(--accent-tint); } .social-links .icon { width:19px; height:19px; } .social-pending { opacity:.65; }

@supports not (backdrop-filter:blur(1px)) { .nav-pill { background:var(--surface); } }
.nav-pill .button { min-height:36px; padding:.55rem .9rem; }
.home-hero { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
.hero-copy { min-width:0; }
.preview-chart { max-width:100%; height:auto; overflow:hidden; }
.preview-small-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.preview-label { margin-bottom:20px; }
.preview-heading { margin-bottom:20px; }
.preview-caption { margin-top:20px; }
.preview-rule { overflow-wrap:anywhere; }
a.account-card { display:block; text-decoration:none; }
.account-card h2 { overflow-wrap:anywhere; }
.account-card .account-open { display:flex; align-items:center; gap:8px; color:var(--accent-soft); font-size:.85rem; margin:24px 0 0; }
@media(max-width:1100px) { .public-menu { gap:16px; } .nav-pill { gap:12px; padding:8px 14px; } .public-nav .nav-secondary { display:none; } .hero-visual { padding:24px; } }
@media(max-width:800px) { .masthead { width:calc(100% - 36px); top:10px; margin-bottom:40px; } .masthead[data-nav-shape=wide] { width:calc(100% - 20px); top:6px; } .public-nav { border-radius:32px; flex-wrap:wrap; } .public-menu { order:4; flex-basis:100%; border-top:1px solid var(--line); padding:8px 0 0; justify-content:space-around; } .public-nav .nav-links { margin-left:auto; } .nav-links { margin-left:auto; } .theme-toggle { width:36px; } .brand { min-width:96px; padding:0 4px; } .wordmark { font-size:1.8rem; } .brand-subtitle { font-size:.46rem; } .sidebar { top:auto; } .site-footer { grid-template-columns:1fr 1fr; } .footer-community { grid-column:1/-1; } .home-hero { grid-template-columns:1fr; } .hero-visual { max-width:500px; justify-self:center; } }
@media(max-width:600px) { .nav-pill { gap:8px; padding:8px 12px; min-height:60px; } .nav-links .button { padding:.55rem .8rem; font-size:.75rem; min-height:36px; } .theme-toggle { min-width:36px; width:36px; min-height:36px; } .nav-links { gap:8px; } .masthead .nav-secondary { display:none; } .public-menu a { font-size:.8rem; } .hero-copy h1 { font-size:3.2rem; } .hero-visual { padding:18px; border-radius:32px; } .preview-label { font-size:.65rem; margin-left:0; } .brand-story { border-radius:50px 24px 24px 24px; } .brand--hero .wordmark { font-size:3.5rem; } .marquee-group { width:1080px; gap:20px; padding-right:20px; } .testimonials.marquee-group figure { padding:24px; } .product-strip a { padding:16px; font-size:1.1rem; } .site-footer { grid-template-columns:1fr; } .footer-community { grid-column:auto; } .marquee-controls .hint { max-width:23ch; } .marquee:not([data-ready=true]) .marquee-group { flex-direction:column; } }
@media(prefers-reduced-motion:reduce) { .masthead,.nav-pill { transition:none; } .marquee .marquee-track { animation:none!important; transform:none!important; width:100%; } .marquee-group { width:100%; flex-wrap:wrap; padding-right:0; } .marquee-group[data-copy] { display:none!important; } .product-strip a,.testimonials.marquee-group figure { flex:1 1 280px; } }
/* Journal forms: readable fields, explicit state and one clear next action. */
.journal-form { max-width:820px; } .form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 24px; }
.tag-fieldset { border:0; padding:0; margin:32px 0 24px; min-width:0; } .tag-fieldset legend { font-weight:600; margin-bottom:16px; } .tag-fieldset legend .hint { display:block; font-weight:400; }
.tag-options,.trade-tags { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:20px; } .tag-choice { display:flex; align-items:center; gap:8px; background:var(--surface-inset); border:1px solid var(--line); border-radius:24px; padding:10px 14px; margin:0; cursor:pointer; font-weight:400; } .tag-choice:has(input:checked) { border-color:var(--accent); background:var(--accent-tint); } .trade-tags .badge { overflow-wrap:anywhere; max-width:100%; }
.closing-fields { padding:24px; background:var(--surface-inset); border-radius:24px; margin-bottom:32px; } .closing-fields input { background:var(--surface)!important; }
.journal-tabs { display:flex; gap:8px; margin:24px 0; border-bottom:1px solid var(--line); padding-bottom:12px; } .journal-tabs a { border-radius:20px; padding:8px 18px; text-decoration:none; } .journal-tabs a.active { background:var(--accent-tint); color:var(--accent-soft); }
.trade-list { display:grid; gap:16px; } .trade-entry { display:flex; justify-content:space-between; align-items:center; gap:24px; } .trade-entry h2 { font-size:1.4rem; margin:8px 0; } .trade-entry h2 a { text-decoration:none; } .trade-actions { display:flex; flex-direction:column; align-items:flex-end; gap:16px; flex-shrink:0; } .trade-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:0 0 32px; } .trade-facts dt { color:var(--muted); font-size:.85rem; } .trade-facts dd { margin:6px 0 0; overflow-wrap:anywhere; } .workspace>.action-row { margin-top:24px; }
@media(max-width:600px) { .form-grid,.trade-facts { grid-template-columns:1fr; } .closing-fields { padding:16px; } .trade-entry { flex-direction:column; align-items:stretch; } .trade-actions { flex-direction:row; justify-content:space-between; align-items:center; } .tag-choice { font-size:.8rem; } }
.period-form { display:flex; flex-wrap:wrap; align-items:flex-start; gap:16px; margin-bottom:24px; } .period-form .button { margin-top:29px; } .period-form .field { margin:0; } .adherence-summary { margin-bottom:24px; } .adherence-summary h2 { font-size:clamp(1.6rem,3vw,2.3rem); max-width:32ch; } .adherence-summary .number { color:var(--accent-soft); } .reflection-card { display:block; text-decoration:none; } .reflection-card h2 { margin-top:16px; } .reflection-card p { display:flex; align-items:center; gap:12px; } .reflection-prompts { margin-bottom:24px; } .reflection-prompts>p:not(.hint) { font:500 1.35rem/1.5 var(--font-heading); } .review-nudge { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; margin-bottom:24px; }
@media(min-width:801px) { .sidebar { top:108px; min-height:0; max-height:calc(100dvh - 124px); overflow-y:auto; padding:12px 0; } .sidebar nav { gap:4px; } .sidebar nav a { padding:.65rem 1rem; } .sidebar-bottom { padding-top:20px; } .sidebar-bottom .hint { margin:12px 0; } }

/* Account actions stay centered and leave breathing room before the next panel. */
.action-row { align-items:center; }
.account-actions { margin-bottom:var(--space-6); row-gap:var(--space-4); }
.account-actions > a:not(.button) { display:inline-flex; align-items:center; min-height:46px; padding:.55rem 0; line-height:1.35; }
.source-guidance { margin-bottom:var(--space-6); }
.source-guidance h2 { font-size:1.5rem; }
.source-guidance .action-row { margin:var(--space-4) 0; }
.mt5-connection-actions { display:grid; gap:var(--space-4); justify-items:start; margin-top:var(--space-5); }
.mt5-connection-actions form { margin:0; min-width:0; max-width:100%; }
.mt5-connection-actions .button { white-space:normal; }
.mt5-continue { margin-top:var(--space-5); }
@media(max-width:600px) { .account-actions { align-items:flex-start; flex-direction:column; gap:var(--space-2); } }

/* Flexible content must be allowed to shrink inside grids and action rows. */
.button { max-width:100%; text-align:center; overflow-wrap:anywhere; }
.button .icon { flex:0 0 20px; width:20px; height:20px; }
.check-field input[type=checkbox],.tag-choice input[type=checkbox] { flex:0 0 18px; margin-top:3px; }
.nav-pill { min-width:0; }
.nav-links { flex-shrink:0; }
.feature-list li { min-width:0; line-height:1.5; }
.course-panel { grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); }
.course-art,.course-copy,.home-course>div,.about-section>div,.journal-plan { min-width:0; }
.home-course { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); padding:clamp(24px,4vw,56px); }
.home-course h2 { font-size:clamp(1.85rem,3.1vw,2.8rem); line-height:1.18; letter-spacing:-.035em; }
.home-course .intro { font-size:1rem; line-height:1.7; max-width:44ch; }
.course-summary { padding:clamp(22px,2.5vw,36px); border-color:var(--line); border-radius:24px; }
.course-summary .feature-icon { width:36px; height:36px; background:none; margin-bottom:8px; }
.course-summary .plan-price { margin:12px 0 8px; gap:8px 12px; }
.course-summary .plan-price .number,.course-copy .plan-price .number { font-size:clamp(2rem,3vw,2.7rem); font-weight:600; letter-spacing:-.035em; }
.course-summary .plan-price>span:last-child { font-size:.9rem; }
.course-summary .feature-list { gap:12px; margin:24px 0; }
.course-summary .feature-list li { font-size:.95rem; }
.course-enrollment-note { font-size:.9rem; line-height:1.6; color:var(--muted); margin:20px 0 0; padding-top:20px; border-top:1px solid var(--line); }
.course-copy .course-enrollment-note { max-width:46ch; }
.course-cta { margin-bottom:0; font-size:.95rem; }
.course-book { transform:none; max-width:100%; }
.about-monogram strong { font-size:clamp(2.7rem,5.5vw,4.75rem); letter-spacing:-.04em; }
.signals-record h3 { font-size:1.7rem; }
.signals-record>p { color:var(--muted); }
.testimonials.marquee-group .habit-card { flex:1; min-width:0; padding:28px; }
.habit-card .feature-icon { margin-bottom:16px; }
.habit-card h3 { font-size:1.35rem; }
.habit-card p { font-size:1rem; color:var(--muted); margin:0; }
@media(max-width:800px) {
  .course-panel,.home-course { grid-template-columns:minmax(0,1fr); }
  .course-art { min-height:0; padding:28px; gap:20px; }
  .course-book { width:min(100%,270px); min-height:320px; }
  .home-course h2 { max-width:24ch; }
}
@media(max-width:420px) {
  .masthead,.masthead[data-nav-shape=wide] { width:calc(100% - 24px); }
  .nav-pill { gap:6px; padding:8px 10px; }
  .brand { min-width:76px; }
  .nav-links .button { padding:.5rem .65rem; }
  .public-menu { gap:8px; justify-content:space-between; }
  .public-menu a { font-size:.75rem; }
  .home-course { padding:22px; }
  .course-copy { padding:24px; }
  .course-copy h2 { font-size:2rem; }
  .course-book strong { font-size:2.2rem; }
  .about-monogram { padding:24px; }
  .about-monogram strong { font-size:2.6rem; }
  .trade-actions { flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) {
  .testimonials.marquee-group .habit-card { flex:1 1 280px; }
}
/* The supplied founder artwork fades into the page in either theme. */
.founder-portrait { position:relative; isolation:isolate; margin:0; min-width:0; width:100%; max-width:480px; aspect-ratio:4/5; justify-self:center; }
.founder-portrait img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 35%; border-radius:46% 46% 0 0; -webkit-mask-image:linear-gradient(#000 65%,transparent 98%); mask-image:linear-gradient(#000 65%,transparent 98%); }
.founder-portrait figcaption { position:absolute; bottom:4%; left:8%; display:grid; gap:4px; }
.founder-portrait figcaption strong { font:500 clamp(1.8rem,3vw,2.6rem)/1.15 var(--font-heading); letter-spacing:-.035em; }
.founder-portrait figcaption span { color:var(--muted); font-size:.9rem; }
.founder-copy { max-width:56ch; }
.founder-copy>p:not(.eyebrow):not(.intro) { color:var(--muted); line-height:1.75; }
.founder-copy>a { display:inline-flex; align-items:center; gap:8px; margin-top:8px; }
@media(max-width:800px) { .founder-portrait { max-width:400px; } }