* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
::selection { background: var(--accent); color: var(--text); }
a { color: inherit; text-underline-offset: 4px; }
button,input,textarea,select { font: inherit; }
button,a,input,textarea,summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 4px; }
h1,h2,h3,h4 { font-family: var(--font-heading); line-height: 1.12; letter-spacing: -.035em; margin: 0 0 var(--space-4); }
h1 { font-size: clamp(2.25rem,4.2vw,3.75rem); font-weight: 600; } h2 { font-size: 1.65rem; } h3 { font-size: 1.2rem; }
p { margin: 0 0 var(--space-4); } small,.hint { font-size: .85rem; color: var(--muted); }
svg { display: block; } .icon { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: fixed; top: -100px; left: var(--space-4); background: var(--nav); color: var(--nav-ink); padding: var(--space-3); z-index: 100; } .skip-link:focus { top: var(--space-3); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.masthead { width: min(calc(100% - 48px),var(--content-max)); margin: var(--space-5) auto var(--space-7); }
.nav-pill { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-2); background: var(--nav); color: var(--nav-ink); border-radius: var(--radius-pill); box-shadow: var(--shadow); }
.brand { display: inline-flex; flex-direction: column; align-items: flex-start; text-decoration: none; gap: 0; padding: .45rem 1.35rem .65rem; background: var(--bg); border-radius: var(--radius-pill); flex-shrink: 0; }
.wordmark { font: 700 2.2rem/.98 var(--font-heading); color: var(--key-number); letter-spacing: -.07em; }
.brand-subtitle { color: var(--text); font-size: .66rem; line-height: 1.5; height: 1.5em; min-width: 17ch; margin-top: var(--space-1); }
.nav-links { display: flex; align-items: center; gap: var(--space-5); margin-left: auto; padding-right: var(--space-3); }
.nav-links a { text-decoration: none; font-weight: 600; font-size: .9rem; }
.nav-links .nav-note { color: var(--nav-ink); opacity: .7; font-size: .8rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); background: var(--button-bg); color: var(--button-text); border: 1px solid transparent; border-radius: var(--radius-pill); padding: .85rem 1.45rem; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1.35; transition: transform var(--motion-fast) var(--ease),background var(--motion-fast); }
.button:hover { background: var(--button-hover); transform: translateY(-2px); }
.button.secondary { background: var(--surface-raised); color: var(--text); border-color: var(--line); } .button.accent { background: var(--accent); color: var(--text); } .button.accent:hover { background: var(--accent-hover); }
.button.compact { font-size: .83rem; padding: .65rem 1.1rem; }
.button:disabled { cursor: not-allowed; opacity: .6; transform: none; }
main { width: min(calc(100% - 48px),var(--content-max)); margin: 0 auto; min-height: 65vh; }
footer { width: min(calc(100% - 48px),var(--content-max)); margin: var(--space-8) auto var(--space-5); color: var(--muted); font-size: .78rem; display: flex; justify-content: space-between; gap: var(--space-4); }
.eyebrow { display: flex; align-items: center; gap: var(--space-2); color: var(--accent-soft); font-weight: 600; font-size: .85rem; margin-bottom: var(--space-4); }
.intro { color: var(--muted); font-size: 1.05rem; max-width: 65ch; margin-bottom: var(--space-6); }
.card,.ledger { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-6); }
.interactive-card { transition: transform var(--motion-lift) var(--ease),box-shadow var(--motion-lift),border-color var(--motion-lift); }
.interactive-card:hover,.interactive-card:focus-within { transform: translateY(-4px); box-shadow: var(--hover-glow); border-color: var(--accent); }
.notice,.error { padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); background: var(--accent-tint); border-left: 3px solid var(--accent-soft); color: var(--text); margin: var(--space-4) 0; }
.error { font-size: .9rem; } .field .error { padding: .5rem .75rem; }
.badge { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; background: var(--accent-tint); color: var(--accent-soft); border-radius: var(--radius-pill); font-size: .73rem; font-weight: 600; }
.field { margin-bottom: var(--space-5); }
label { display: block; margin-bottom: var(--space-2); font-size: .85rem; font-weight: 600; }
input:not([type=hidden]):not([type=checkbox]):not([type=submit]),textarea,select { width: 100%; background: var(--surface-inset); color: var(--text); padding: .95rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); transition: border-color var(--motion-fast); }
input:hover,textarea:hover { border-color: var(--accent-soft); } input:disabled { opacity: .5; }
input[type=checkbox] { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }
.check-field { display: flex; align-items: flex-start; gap: var(--space-3); } .check-field label { font-weight: 400; }
textarea { min-height: 140px; resize: vertical; }
.field .hint { margin: var(--space-2) 0 0; }
.number,.limits dd,td { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.positive { color: var(--gain); } .negative { color: var(--loss); } .key-number { color: var(--key-number); }
.rules { white-space: pre-wrap; overflow-wrap: anywhere; } .signed-in { overflow-wrap: anywhere; }
.auth-layout { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-6); align-items: stretch; }
.brand-story { background: var(--accent-tint); border-radius: var(--radius-xl); min-height: 650px; padding: var(--space-7); display: flex; flex-direction: column; position: relative; overflow: hidden; }
.brand--hero { background: transparent; padding: 0; border-radius: 0; margin-bottom: var(--space-8); } .brand--hero .wordmark { font-size: clamp(5rem,8.5vw,8rem); } .brand--hero .brand-subtitle { font-size: .85rem; }
.brand-story h2 { font-size: clamp(2.4rem,4vw,3.6rem); max-width: 10ch; position: relative; z-index: 1; }
.brand-story p { max-width: 34ch; position: relative; z-index: 1; }
.story-rings { position: absolute; width: 380px; height: 380px; border: 1px solid #FFFFFF24; border-radius: 50%; bottom: -155px; right: -140px; box-shadow: 0 0 0 45px #FFFFFF0A,0 0 0 90px #FFFFFF08; pointer-events: none; }
.story-footer { display: flex; gap: var(--space-3); align-items: center; margin-top: auto; padding-top: var(--space-7); font-size: .78rem; }
.auth-panel { padding: var(--space-7) clamp(1.5rem,4vw,4rem); background: var(--surface); border-radius: var(--radius-xl); display: flex; flex-direction: column; justify-content: center; }
.auth-panel h1 { font-size: clamp(2rem,3vw,2.8rem); } .auth-panel .button[type=submit],.auth-panel input[type=submit] { width: 100%; }
.switch { text-align: center; margin: var(--space-5) 0 0; font-size: .9rem; color: var(--muted); } .switch a { color: var(--text); font-weight: 600; }
.welcome-hero { padding: var(--space-7); border-radius: var(--radius-xl); background: var(--surface); display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-7); }
.welcome-copy h1 { font-size: clamp(2.6rem,5vw,4.5rem); max-width: 13ch; } .welcome-copy .button { margin-top: var(--space-4); }
.step-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }
.step-list li { display: flex; gap: var(--space-4); padding: var(--space-5); background: var(--surface-raised); border-radius: var(--radius-md); }
.step-number { background: var(--accent); min-width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius-sm); font: 500 .85rem var(--font-data); }
.step-list h2 { font-size: 1.1rem; margin-bottom: var(--space-2); } .step-list p { font-size: .9rem; margin: 0; color: var(--muted); }
.account-nav { display: flex; justify-content: space-between; margin-bottom: var(--space-6); }
.limits { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } dt { color: var(--muted); font-size: .9rem; } dd { margin: 0 0 var(--space-3); }
.ledger { margin-bottom: var(--space-5); } form { margin: 0; }
.table-scroll { overflow-x: auto; } table { width: 100%; border-collapse: separate; border-spacing: 0 .5rem; text-align: left; } th { color: var(--muted); font-size: .72rem; font-weight: 500; padding: .5rem 1rem; } td { font-size: .78rem; padding: 1rem; background: var(--surface-inset); } td:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); } td:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.equity-chart,.outcome-chart { width: 100%; height: auto; } svg text { fill: var(--muted); font: 13px var(--font-body); } .chart-line { fill: none; stroke: var(--accent-soft); stroke-width: 3; } .chart-axis { stroke: var(--line); } .chart-positive { fill: var(--accent); } .chart-negative { fill: var(--accent-soft); } .chart-neutral { fill: var(--line); }
summary { cursor: pointer; color: var(--muted); margin: var(--space-4) 0; } .behavior-flag { padding: var(--space-5); border-radius: var(--radius-md); border: 1px solid var(--accent); margin-bottom: var(--space-4); } .viewed-flag { border-color: var(--line); } blockquote { margin: 0; }
@media(max-width:900px) { .auth-layout { grid-template-columns: 1fr 1fr; gap: var(--space-4); } .brand-story { padding: var(--space-6); } .auth-panel { padding: var(--space-6); } .welcome-hero { grid-template-columns: 1fr; } .nav-note { display: none; } }
@media(max-width:640px) { .masthead,main,footer { width: calc(100% - 28px); } .masthead { margin-top: var(--space-4); margin-bottom: var(--space-5); } .nav-pill { gap: var(--space-2); } .nav-links { gap: var(--space-3); padding-right: 0; } .nav-links .nav-secondary { display: none; } .brand { padding: .4rem 1rem .55rem; } .wordmark { font-size: 1.8rem; } .nav-links .button { font-size: .75rem; padding: .7rem 1rem; } .auth-layout { grid-template-columns: 1fr; } .brand-story { min-height: 0; padding: var(--space-6); } .brand--hero { margin-bottom: var(--space-5); } .brand--hero .wordmark { font-size: 4rem; } .brand-story h2 { max-width: 16ch; font-size: 2rem; } .brand-story>p,.story-footer { display: none; } .auth-panel { border-radius: var(--radius-lg); } .welcome-hero { padding: var(--space-6); } footer { flex-direction: column; gap: var(--space-1); } .limits { grid-template-columns: 1fr; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation: none!important; transition: none!important; scroll-behavior: auto!important; } .interactive-card:hover,.button:hover { transform: none; } }
/* Account workspace */
.app-layout { display:grid; grid-template-columns:205px minmax(0,1fr); gap:var(--space-7); align-items:start; }
.sidebar { position:sticky; top:24px; padding:var(--space-5) 0; min-height:600px; display:flex; flex-direction:column; }
.sidebar-label { color:var(--muted); font-size:.75rem; padding:0 var(--space-4); }
.sidebar nav { display:grid; gap:var(--space-2); }
.sidebar nav a { display:flex; align-items:center; gap:var(--space-3); padding:.85rem 1rem; text-decoration:none; color:var(--muted); font-size:.85rem; border-radius:var(--radius-sm); }
.sidebar nav a.active { background:var(--accent); color:var(--text); } .sidebar nav a:hover { background:var(--accent-tint); color:var(--text); }
.sidebar-bottom { margin-top:auto; padding:var(--space-6) var(--space-4) 0; } .sidebar-bottom .hint { margin:var(--space-4) 0; }
.sidebar-logout { display:flex; align-items:center; gap:var(--space-3); border:0; background:none; color:var(--muted); padding:0; cursor:pointer; }
.workspace { min-width:0; } .workspace h1 { font-size:clamp(2rem,3.4vw,3rem); overflow-wrap:anywhere; }
.account-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-5); margin-bottom:var(--space-6); }
.account-card h2 a { text-decoration:none; } .account-card .number { font-size:1.6rem; display:block; margin:var(--space-2) 0; }
.account-symbol,.feature-icon { display:inline-flex; align-items:center; justify-content:center; background:var(--accent-tint); color:var(--accent-soft); width:48px; height:48px; border-radius:var(--radius-md); margin-bottom:var(--space-5); }
.setup-layout { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(190px,1fr); gap:var(--space-6); } .setup-form h1 { font-size:2.25rem; } .setup-aside { padding:var(--space-6) var(--space-3); color:var(--muted); } .setup-aside h2 { color:var(--text); font-size:1.5rem; }
.overview-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-5); } .balance-value { font-size:2rem; } .balance-value .hint { display:block; }
.upgrade-panel { padding:var(--space-7); max-width:850px; background:radial-gradient(ellipse at top right,var(--accent-tint),var(--surface) 70%); }
.upgrade-panel h1 { max-width:15ch; } .upgrade-panel .feature-icon { background:var(--accent); color:var(--text); width:64px; height:64px; border-radius:var(--radius-lg); }
.upgrade-benefits { list-style:none; padding:var(--space-4) 0; margin:0; } .upgrade-benefits li { display:flex; gap:var(--space-3); margin-bottom:var(--space-4); } .upgrade-benefits .icon { color:var(--accent-soft); }
@media(max-width:1100px) { .app-layout { grid-template-columns:175px minmax(0,1fr); gap:var(--space-5); } .setup-layout { grid-template-columns:1fr; } .setup-aside { display:none; } }
@media(max-width:800px) { .app-layout { grid-template-columns:1fr; } .sidebar { position:static; min-height:0; padding:0; } .sidebar-label { display:none; } .sidebar nav { display:flex; overflow-x:auto; padding:4px; } .sidebar nav a { white-space:nowrap; } .sidebar-bottom { display:flex; align-items:center; justify-content:space-between; padding:var(--space-3) var(--space-2); } .sidebar-bottom .hint { display:none; } }
@media(max-width:640px) { .account-grid,.overview-grid { grid-template-columns:1fr; } .card,.ledger { padding:var(--space-5); } .upgrade-panel { padding:var(--space-6); } }
.sidebar { min-width:0; } .sidebar nav { max-width:100%; }
.glow-cta:hover { background:linear-gradient(var(--button-hover),var(--button-hover)) padding-box,linear-gradient(115deg,var(--accent),var(--accent-soft),var(--accent)) border-box; background-size:100% 100%,250% 250%; }
/* Analytics */
.stat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-4); margin:var(--space-6) 0 var(--space-4); }
.stat-card { padding:var(--space-5); border-radius:var(--radius-md); min-width:0; } .stat-card dt { font-size:.75rem; min-height:2.5em; }
.stat-value { font-size:clamp(1.15rem,1.7vw,1.75rem); font-weight:500; white-space:nowrap; margin:var(--space-3) 0 var(--space-4); letter-spacing:-.055em; }
.sparkline { width:100%; height:42px; } .sparkline polyline { fill:none; stroke:var(--accent-soft); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.spark-empty { color:var(--muted); font-size:.7rem; min-height:42px; margin:0; padding-top:var(--space-3); }
.metric-notes { margin-bottom:var(--space-6); } .metric-notes summary { font-size:.8rem; }
.dashboard-grid { display:grid; grid-template-columns:minmax(260px,1fr) minmax(0,1.65fr); gap:var(--space-5); margin-bottom:var(--space-5); align-items:stretch; } .dashboard-grid .ledger { margin:0; }
.streak-card { background:var(--accent-tint); border:1px solid var(--accent); } .streak-card h2 { font-size:1.65rem; } .streak-card>p { font-size:.85rem; } .streak-card a { font-size:.85rem; }
.streak-values { display:flex; gap:var(--space-6); margin:var(--space-6) 0; } .streak-values strong { display:block; font-size:3.2rem; line-height:1.1; color:var(--key-number); font-weight:500; } .streak-values span { display:block; color:var(--muted); font-size:.8rem; margin-top:var(--space-2); }
.trade-row { transition:transform var(--motion-lift) var(--ease),filter var(--motion-lift); } .trade-row:hover,.trade-row:focus-visible { transform:translateY(-3px); filter:drop-shadow(0 3px 7px #6E855838); } .trade-row:hover td,.trade-row:focus-visible td { background:var(--accent-tint); }
@media(max-width:1200px) { .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .dashboard-grid { grid-template-columns:1fr; } .stat-value { font-size:1.5rem; } }
@media(max-width:420px) { .stat-grid { gap:var(--space-3); } .stat-card { padding:var(--space-4); } .stat-value { font-size:1.05rem; } }
@media(prefers-reduced-motion:reduce) { .trade-row:hover,.trade-row:focus-visible,.interactive-card:focus-within { transform:none; } }

.outcome-legend { display:flex; flex-wrap:wrap; gap:var(--space-5); color:var(--muted); font-size:.85rem; } .outcome-legend b { color:var(--text); }
/* Public products and journal pricing */
.public-menu { display:flex; gap:var(--space-5); align-items:center; margin:auto; } .public-menu a { color:var(--nav-ink); text-decoration:none; font-size:.85rem; font-weight:600; white-space:nowrap; } .public-menu a[aria-current=page] { text-decoration:underline; text-underline-offset:6px; }
.public-nav .nav-links { margin-left:0; } .public-nav .nav-note { display:none; } .footer-links { display:flex; flex-wrap:wrap; gap:var(--space-5); }
.page-intro { max-width:850px; padding:var(--space-7) 0 var(--space-6); } .page-intro h1 { font-size:clamp(2.8rem,5.6vw,5.2rem); max-width:17ch; } .page-intro .intro { max-width:52ch; }
.action-row { display:flex; flex-wrap:wrap; gap:var(--space-3); } .marketing-section { margin-top:var(--space-9); } .section-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); } .section-heading h2 { font-size:clamp(2rem,3.5vw,3rem); } .section-copy { max-width:70ch; color:var(--muted); margin-bottom:var(--space-6); }
.promotion { background:var(--accent); color:var(--text); font-size:1rem; padding:.6rem 1rem; }
.plans-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-4); margin-bottom:var(--space-5); } .plan-card { padding:var(--space-5); display:flex; flex-direction:column; } .plan-card h3 { font-size:1.5rem; } .plan-price { display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:baseline; margin:var(--space-4) 0 var(--space-2); } .plan-price .number { font-size:clamp(2rem,3.5vw,3.5rem); line-height:1.2; letter-spacing:-.06em; } .plan-price s { color:var(--muted); font-family:var(--font-data); } .plan-card .button { margin-top:auto; font-size:.85rem; }
.feature-list { list-style:none; padding:0; margin:var(--space-5) 0 var(--space-6); display:grid; gap:var(--space-3); } .feature-list li { display:flex; gap:var(--space-3); align-items:flex-start; font-size:.9rem; } .feature-list .icon { width:19px; height:23px; color:var(--accent-soft); }
.bundle-note { display:flex; align-items:center; gap:var(--space-5); background:var(--accent-tint); border-radius:var(--radius-lg); padding:var(--space-6); margin-top:var(--space-6); } .bundle-note>p { margin:0; flex:1; } .bundle-note>a { flex-shrink:0; font-size:.85rem; } .bundle-note .feature-icon { margin:0; }
.course-panel { display:grid; grid-template-columns:1fr 1.15fr; border-radius:var(--radius-xl); overflow:hidden; background:var(--surface); } .course-art { background:var(--accent-tint); padding:var(--space-7); display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:var(--space-7); } .course-edition { font-size:.75rem; } .course-book { width:min(100%,320px); min-height:430px; display:flex; flex-direction:column; justify-content:space-between; gap:var(--space-7); padding:var(--space-6); background:var(--bg); border-radius:3px var(--radius-md) var(--radius-md) 3px; border-left:10px solid var(--surface-raised); box-shadow:var(--shadow); transform:rotate(-6deg); } .course-book>span:first-child { color:var(--key-number); font-family:var(--font-heading); font-weight:700; } .course-book small { font-family:var(--font-body); font-weight:400; font-size:.65rem; } .course-book strong { font-family:var(--font-body); font-size:2.65rem; line-height:1; letter-spacing:-.06em; } .course-book>span:last-child { color:var(--muted); font-size:.8rem; }
.course-copy { padding:var(--space-7); } .course-copy h2 { font-size:clamp(2.2rem,3.3vw,3.3rem); } .course-copy .feature-list { display:grid; grid-template-columns:1fr 1fr; } .course-cta { text-align:center; font-size:.87rem; margin-bottom:var(--space-4); }
.journal-plans { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); max-width:1050px; } .journal-plan { display:flex; flex-direction:column; padding:var(--space-7); } .journal-plan .button { margin-top:auto; align-self:flex-start; } .journal-plan h2 { font-size:2rem; } .journal-plan .badge { align-self:flex-start; margin-bottom:var(--space-5); } .pro-plan { background:var(--accent-tint); border-color:var(--accent); } .subscription-step { max-width:850px; margin:var(--space-8) auto; padding:var(--space-7); }
@media(max-width:1100px) { .plans-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .public-menu { gap:var(--space-4); } .public-nav .nav-secondary { display:none; } .course-copy { padding:var(--space-6); } .course-copy .feature-list { grid-template-columns:1fr; } .bundle-note { flex-wrap:wrap; } }
@media(max-width:800px) { .public-nav { flex-wrap:wrap; border-radius:var(--radius-lg); gap:var(--space-3); } .public-nav .nav-links { margin-left:auto; } .public-menu { order:3; flex-basis:100%; justify-content:space-around; border-top:1px solid #20212A20; padding:var(--space-3) var(--space-2) var(--space-2); } .course-panel { grid-template-columns:1fr; } .course-art { min-height:480px; } .course-book { min-height:320px; width:270px; } .course-art .course-edition:last-child { display:none; } .journal-plan { padding:var(--space-6); } }
@media(max-width:600px) { .plans-grid,.journal-plans { grid-template-columns:1fr; } .marketing-section { margin-top:var(--space-8); } .page-intro { padding-top:var(--space-5); } .bundle-note { padding:var(--space-5); } .course-art { padding:var(--space-6); } .course-copy { padding:var(--space-5); } .public-menu a { font-size:.78rem; } .subscription-step { padding:var(--space-6); } .plan-card .button { align-self:flex-start; } }
/* Landing page: journal, signals, learning, founder */
.home-hero { display:grid; grid-template-columns:1.2fr 1fr; gap:var(--space-7); align-items:center; padding:var(--space-7) 0; }
.hero-copy h1 { font-size:clamp(3rem,5.4vw,5.3rem); line-height:1.02; max-width:13ch; } .hero-copy h1>span { color:var(--accent-soft); font-style:italic; font-weight:500; } .hero-copy .intro { max-width:43ch; } .hero-availability { margin:var(--space-5) 0 0; max-width:52ch; font-size:.77rem; }
.hero-visual { background:var(--accent-tint); border-radius:var(--radius-xl); padding:var(--space-6); min-width:0; position:relative; } .preview-label { display:inline-block; border:1px solid #FFFFFF66; padding:.4rem .8rem; border-radius:var(--radius-pill); font-size:.7rem; margin-bottom:var(--space-6); } .journal-preview { background:var(--bg); padding:var(--space-6); border-radius:var(--radius-lg); transform:rotate(-3deg); box-shadow:var(--shadow); } .preview-heading { display:flex; justify-content:space-between; margin-bottom:var(--space-6); } .preview-heading>span { color:var(--key-number); font-family:var(--font-heading); font-weight:700; font-size:1.5rem; letter-spacing:-.07em; } .preview-heading .icon { color:var(--muted); } .preview-balance>span { display:block; } .preview-balance strong { font-size:clamp(1.7rem,3vw,2.6rem); font-weight:500; } .preview-balance strong span { font-size:.7em; } .preview-chart { width:100%; margin:var(--space-5) 0; overflow:visible; } .preview-chart polyline { stroke:var(--accent-soft); stroke-width:3; fill:none; stroke-linejoin:round; } .preview-grid { stroke:var(--line); fill:none; } .preview-small-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); } .preview-small-grid span,.preview-small-grid strong { display:block; } .preview-small-grid strong { font-size:1.7rem; font-weight:500; } .preview-small-grid small { font-size:.65rem; font-weight:400; } .preview-rule { display:flex; gap:var(--space-3); font-size:.72rem; padding:var(--space-4); border-radius:var(--radius-sm); background:var(--accent-tint); margin-top:var(--space-5); } .preview-caption { font-size:.75rem; margin:var(--space-6) 0 0; text-align:center; }
.product-strip { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:var(--space-7); padding:var(--space-6) 0; gap:var(--space-5); } .product-strip a { display:grid; grid-template-columns:28px 1fr; gap:0 var(--space-3); text-decoration:none; font-weight:500; } .product-strip a .icon { grid-row:span 2; color:var(--accent-soft); margin-top:.2rem; } .product-strip span { font-size:.75rem; color:var(--muted); font-weight:400; }
.section-heading>a { display:flex; align-items:center; gap:var(--space-3); font-size:.85rem; } .how-grid { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); padding:0; margin:0; } .how-grid .step-number { display:inline-grid; margin-bottom:var(--space-6); } .how-grid h3 { font-size:1.4rem; } .how-grid p { color:var(--muted); font-size:.9rem; margin:0; } .how-grid .hint { margin-top:var(--space-4); font-size:.75rem; }
.performance-layout { display:grid; grid-template-columns:1.4fr 1fr; gap:var(--space-6); align-items:center; } .sample-performance { padding:var(--space-7); } .sample-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); margin:var(--space-6) 0; } .sample-stats .number { font-size:clamp(1.7rem,3.2vw,2.7rem); } .sample-stats p { font-size:.75rem; color:var(--muted); margin-top:var(--space-2); } .sample-outcomes { display:flex; gap:4px; height:14px; border-radius:var(--radius-pill); overflow:hidden; } .sample-outcomes span:first-child { background:var(--accent); width:62.5%; } .sample-outcomes span:last-child { background:var(--line); flex:1; } .sample-legend { display:flex; justify-content:space-between; font-size:.75rem; margin:var(--space-3) 0 var(--space-6); color:var(--muted); } .signals-pitch { padding:var(--space-5); } .signals-pitch h3 { font-size:1.8rem; } .signals-pitch>p { color:var(--muted); } .signals-pitch .hint { margin-top:var(--space-4); }
.testimonial-heading { margin:var(--space-7) 0 var(--space-4); } .testimonials { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); } .testimonials figure { margin:0; display:flex; flex-direction:column; } .quote-mark { color:var(--accent-soft); font:700 3.5rem/1 var(--font-heading); } .testimonials blockquote { font-size:1.02rem; margin-bottom:var(--space-6); } .testimonials figcaption { display:flex; gap:var(--space-3); align-items:center; margin-top:auto; font-size:.8rem; } .testimonials small { display:block; font-size:.67rem; } .sample-avatar { width:32px; height:32px; background:var(--accent-tint); color:var(--accent-soft); border-radius:var(--radius-pill); display:grid; place-items:center; flex-shrink:0; }
.home-course { display:grid; grid-template-columns:1.4fr 1fr; gap:var(--space-8); padding:var(--space-8); border-radius:var(--radius-xl); background:var(--surface); align-items:center; } .home-course h2,.about-section h2 { font-size:clamp(2rem,3.7vw,3.5rem); } .course-summary { background:var(--accent-tint); border:1px solid var(--accent); padding:var(--space-6); border-radius:var(--radius-lg); } .course-summary .feature-icon { margin-bottom:var(--space-2); } .course-summary .plan-price>span:last-child { color:var(--muted); font-size:.8rem; }
.about-section { display:grid; grid-template-columns:1fr 1.4fr; gap:var(--space-8); align-items:center; } .about-monogram { display:flex; flex-direction:column; justify-content:center; background:var(--accent-tint); border-radius:var(--radius-xl); padding:var(--space-7); min-height:380px; overflow:hidden; } .about-monogram>span { color:var(--muted); font-size:1.3rem; } .about-monogram strong { font-size:clamp(3.2rem,6vw,5.5rem); font-family:var(--font-heading); letter-spacing:-.07em; line-height:1; } .about-monogram strong span { color:var(--accent-soft); } .about-monogram p { font-size:.85rem; color:var(--muted); margin-top:var(--space-5); } .about-section .badge { margin-bottom:var(--space-5); }
.final-cta { padding:var(--space-8); background:var(--accent-tint); border-radius:var(--radius-xl); } .final-cta h2 { font-size:clamp(2.6rem,5vw,4.5rem); max-width:17ch; } .final-cta .eyebrow,.final-cta .hint { color:var(--text); } .final-cta .hint { margin:var(--space-5) 0 0; }
@media(max-width:1050px) { .home-hero { gap:var(--space-5); } .hero-visual { padding:var(--space-5); } .journal-preview { padding:var(--space-5); } .preview-small-grid { grid-template-columns:1fr; } .performance-layout,.home-course { gap:var(--space-5); } .sample-performance { padding:var(--space-5); } .home-course { padding:var(--space-7); } .about-section { gap:var(--space-7); } }
@media(max-width:800px) { .home-hero,.performance-layout,.home-course,.about-section { grid-template-columns:1fr; } .hero-copy h1 { font-size:clamp(3.1rem,8.5vw,5rem); max-width:16ch; } .hero-visual { max-width:620px; width:100%; margin-top:var(--space-5); padding:var(--space-6); } .preview-small-grid { grid-template-columns:1fr 1fr; } .how-grid,.testimonials { grid-template-columns:1fr; } .home-course { padding:var(--space-6); } .about-monogram { min-height:260px; } .testimonials blockquote { max-width:55ch; } .section-heading { flex-wrap:wrap; } }
@media(max-width:600px) { .home-hero { padding-top:var(--space-5); } .product-strip { grid-template-columns:1fr; gap:var(--space-5); } .sample-stats { gap:var(--space-2); } .sample-stats .number { font-size:1.6rem; } .sample-stats p { font-size:.7rem; } .preview-balance strong { font-size:2rem; } .preview-small-grid strong { font-size:1.4rem; } .hero-visual { padding:var(--space-5); } .preview-rule { padding:var(--space-3); } .final-cta { padding:var(--space-6); } .hero-copy h1 { font-size:3rem; } .about-monogram { padding:var(--space-6); } }

/* Rule editing stays compact even when the general note textarea is tall. */
[data-rules-list] { white-space: normal; padding-left: 1.5rem; }
[data-rules-list] li { margin-bottom: 1rem; padding-left: .25rem; }
[data-rules-list] textarea { min-height: 4.5rem; display: block; margin-bottom: .6rem; }
.profile-management { display: grid; gap: 1.5rem; }
.account-settings-links { margin-bottom: 1.5rem; }