:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-6:24px;
  --space-8:32px;
  --radius-control:8px;
  --radius-panel:12px;
  --text-small:12px;
  --text-meta:13px;
  --text-body:15px;
  --layer-dialog:100;
  --layer-toast:1000;
  --ink:#183c35;
  --muted:#52645b;
  --green:#123c35;
  --leaf:#dce9c9;
  --orange:#e89864;
  --paper:#f6f6ef;
  --line:#e0e5dd;
  --white:#fff;
  --danger:#a54538;
  --shadow:0 12px 38px #183c350a;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none}
*{
  box-sizing:border-box}
body{
  margin:0;
  font-size:var(--text-body)}
button,input,textarea,select{
  font:inherit}
button,a,input,textarea,select{
  outline-offset:4px}
a{
  color:inherit;
  text-decoration:none}
button{
  cursor:pointer;
  border:0}
button:disabled{
  cursor:wait;
  opacity:.55}
button.primary,.button.primary{
  background:var(--green);
  color:white}
button.secondary,.button.secondary{
  background:#e9eee5;
  color:var(--ink)}
button.danger{
  background:#f7e5df;
  color:var(--danger)}
button,.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border-radius:var(--radius-panel);
  padding:12px 19px;
  font-size:14px;
  font-weight:600;
  transition:background .15s,transform .15s}
button:hover,.button:hover{
  filter:brightness(.96)}
button.small{
  padding:8px 12px;
  font-size:var(--text-meta)}
button.ghost{
  background:none;
  color:var(--muted);
  padding:8px}
.brand{
  display:flex;
  align-items:center;
  gap:11px;
  font-size:20px;
  font-weight:750;
  letter-spacing:-.7px}
.brandmark{
  display:grid;
  place-items:center;
  width:35px;
  height:35px;
  border-radius:var(--radius-panel);
  background:var(--green);
  color:var(--leaf);
  font-size:17px;
  font-weight:700;
  letter-spacing:-2px;
  padding-right:2px}
.wordmark span{
  font-weight:400}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:var(--text-small);
  font-weight:700;
  color:var(--muted)}
.tag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border-radius:20px;
  background:#edf3e4;
  padding:7px 11px;
  font-size:var(--text-small);
  color:#456135}
.tag.warm{
  background:#fcf0e5;
  color:#9e6746}
.tag.alert{
  background:#f8e5df;
  color:var(--danger)}
.dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor}
h1,h2,h3,p{
  margin-top:0}
h1,h2,h3{
  font-weight:550;
  letter-spacing:-1.1px}
p{
  line-height:1.6}
small,.muted{
  color:var(--muted)}
.serif{
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400}
.site-nav{
  max-width:1180px;
  margin:auto;
  padding:28px 32px;
  display:flex;
  align-items:center;
  justify-content:space-between}
.site-nav nav{
  display:flex;
  align-items:center;
  gap:30px;
  font-size:14px}
.landing{
  max-width:1180px;
  margin:auto}
.hero{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  align-items:center;
  gap:68px;
  padding:70px 32px 100px}
.hero h1{
  font-size:64px;
  line-height:1.06;
  margin:26px 0;
  letter-spacing:-2.8px}
.hero h1 em{
  font-weight:400;
  color:#668253}
.hero p{
  color:var(--muted);
  font-size:17px;
  max-width:450px}
.hero .actions{
  margin:30px 0 16px}
.hero small{
  font-size:var(--text-meta)}
.hero-art{
  position:relative;
  min-height:450px;
  background:#e5ead8;
  border-radius:50% 50% 14px 14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:36px 25px;
  gap:16px}
.hero-card{
  background:var(--white);
  box-shadow:0 16px 40px #28472e0a;
  padding:var(--space-6);
  border-radius:var(--radius-panel);
  transform:rotate(-2deg)}
.hero-card.top{
  width:85%;
  align-self:flex-start;
  margin-left:-45px}
.hero-card.bottom{
  align-self:flex-end;
  width:85%;
  margin-right:-35px;
  transform:rotate(3deg)}
.hero-card h3{
  font-size:20px;
  margin:16px 0 10px}
.hero-card p{
  font-size:14px;
  margin:0}
.hero-card .divider{
  border-top:1px solid var(--line);
  padding-top:14px;
  margin-top:20px;
  display:flex;
  justify-content:space-between;
  font-size:var(--text-meta)}
.orbit{
  align-self:center;
  color:#6e845c;
  font-size:50px;
  font-weight:200}
.strip{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:27px 32px;
  display:flex;
  justify-content:space-between;
  font-size:var(--text-meta);
  gap:20px}
.landing-section{
  padding:80px 32px}
.section-intro{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:36px;
  margin-bottom:35px}
.section-intro h2{
  font-size:38px;
  margin:12px 0 0}
.section-intro p{
  font-size:14px;
  max-width:360px;
  color:var(--muted);
  margin:0}
.features{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-6)}
.feature{
  padding:30px;
  border:1px solid var(--line);
  border-radius:var(--radius-panel)}
.feature .number{
  font-family:Georgia,serif;
  font-size:35px;
  color:#879e75}
.feature h3{
  font-size:21px;
  margin:26px 0 12px}
.feature p{
  font-size:14px;
  color:var(--muted);
  margin:0}
.plans{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px}
.plan{
  background:var(--white);
  border:1px solid var(--line);
  padding:25px;
  border-radius:var(--radius-panel);
  display:flex;
  flex-direction:column;
  gap:14px}
.plan.featured{
  background:var(--green);
  color:white}
.plan.featured small,.plan.featured .muted{
  color:#b5c8bb}
.plan h3{
  font-size:20px;
  margin:8px 0}
.price{
  font-size:33px;
  letter-spacing:-1.5px}
.price small{
  font-size:var(--text-meta);
  letter-spacing:0}
.plan ul{
  padding-left:17px;
  font-size:var(--text-meta);
  line-height:2;
  margin:0 0 14px;
  flex:1}
.plan .button{
  border:1px solid var(--line)}
.plan.featured .button{
  background:var(--leaf);
  color:var(--green);
  border:0}
.waitlist{
  background:#e8eeda;
  border-radius:var(--radius-panel);
  padding:48px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center}
.waitlist h2{
  font-size:42px;
  line-height:1.1;
  margin:20px 0}
.waitlist p{
  color:var(--muted);
  font-size:14px}
.footer{
  display:flex;
  justify-content:space-between;
  padding:34px 32px;
  font-size:var(--text-meta);
  color:var(--muted)}
label{
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:var(--text-meta);
  font-weight:600;
  margin-bottom:16px}
input,textarea,select{
  background:var(--white);
  color:var(--ink);
  border:1px solid #dce2d8;
  border-radius:var(--radius-control);
  width:100%;
  padding:12px 13px;
  font-size:14px;
  min-width:0}
textarea{
  resize:vertical;
  min-height:85px;
  line-height:1.5}
input:focus,textarea:focus,select:focus{
  border-color:#6b9162;
  outline:2px solid #d6e5c9}
label.check{
  flex-direction:row;
  align-items:start;
  font-weight:400;
  line-height:1.5;
  color:var(--muted)}
input[type=checkbox]{
  width:15px;
  margin:2px 0;
  flex-shrink:0}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px}
.auth-page{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr}
.auth-story{
  background:var(--green);
  color:white;
  padding:50px 10%;
  display:flex;
  flex-direction:column;
  justify-content:space-between}
.auth-story .brandmark{
  background:var(--leaf);
  color:var(--green)}
.auth-story h1{
  font-size:52px;
  line-height:1.1}
.auth-story p{
  color:#bed0bf;
  font-size:16px}
.auth-form{
  align-self:center;
  max-width:450px;
  width:100%;
  margin:auto;
  padding:50px}
.auth-form h2{
  font-size:30px;
  margin-top:15px}
.auth-form>p{
  font-size:14px;
  color:var(--muted)}
.auth-form form{
  margin-top:30px}
.auth-form button{
  width:100%}
.shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:228px 1fr}
.sidebar{
  position:sticky;
  top:0;
  height:100vh;
  background:var(--green);
  color:#e7efe2;
  padding:31px 20px;
  display:flex;
  flex-direction:column;
  gap:30px}
.sidebar .brand{
  padding:0 9px}
.sidebar .brandmark{
  background:var(--leaf);
  color:var(--green)}
.sidebar .eyebrow{
  color:#88a293;
  padding:0 12px}
.sidebar nav{
  display:flex;
  flex-direction:column;
  gap:6px}
.sidebar .nav-item{
  text-align:left;
  justify-content:flex-start;
  color:#b8ccbd;
  padding:13px 14px;
  background:transparent;
  font-weight:400;
  font-size:14px}
.sidebar .nav-item.active{
  background:#ffffff13;
  color:#eef5e6}
.nav-icon{
  width:20px;
  font-size:15px}
.sidebar .bottom{
  margin-top:auto;
  font-size:var(--text-meta);
  color:#afc3b1}
.sidebar .bottom .box{
  border:1px solid #ffffff1e;
  padding:16px;
  border-radius:12px;
  line-height:1.6}
.sidebar .bottom .box strong{
  color:#e8f1e1;
  display:block;
  margin-bottom:6px}
.logout{
  color:#d3e0d4!important;
  margin-top:10px}
.workspace{
  min-width:0}
.topbar{
  height:83px;
  padding:0 42px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  background:#ffffff50}
.crumb{
  font-size:var(--text-meta);
  color:var(--muted)}
.topbar .right{
  display:flex;
  gap:15px;
  align-items:center}
.avatar{
  border-radius:50%;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  background:#dbe8c8;
  font-size:var(--text-small);
  font-weight:700}
.person{
  font-size:var(--text-meta)}
.page{
  padding:37px 42px;
  max-width:1480px;
  margin:0 auto}
.page-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:28px}
.page-heading h1{
  font-size:33px;
  margin:8px 0 10px}
.page-heading p{
  font-size:14px;
  color:var(--muted);
  margin:0}
.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  padding:var(--space-6);
  box-shadow:var(--shadow);
  min-width:0}
.card h2{
  font-size:20px;
  margin:0 0 8px}
.card h3{
  font-size:17px;
  margin:0 0 10px}
.card>p{
  font-size:14px;
  color:var(--muted)}
.grid{
  display:grid;
  gap:22px}
.grid.two{
  grid-template-columns:1.5fr 1fr}
.grid.equal{
  grid-template-columns:1fr 1fr}
.grid.three{
  grid-template-columns:repeat(3,1fr)}
.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-bottom:25px}
.stat{
  padding:20px 24px;
  background:white;
  border:1px solid var(--line);
  border-radius:12px}
.stat .caption{
  font-size:var(--text-small);
  color:var(--muted);
  display:flex;
  justify-content:space-between}
.stat strong{
  display:block;
  font-size:27px;
  letter-spacing:-1px;
  font-weight:500;
  margin:16px 0 10px}
.stat small{
  font-size:var(--text-small)}
.welcome-card{
  background:#e4ecd5;
  border:0;
  padding:30px;
  position:relative;
  overflow:hidden}
.welcome-card h2{
  font-size:29px;
  max-width:400px;
  line-height:1.15}
.welcome-card p{
  max-width:420px;
  font-size:14px}
.welcome-card .decor{
  position:absolute;
  right:35px;
  bottom:-35px;
  font-size:160px;
  font-family:Georgia,serif;
  color:#afc39755;
  pointer-events:none}
.welcome-card button{
  position:relative}
.row-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:17px 0;
  border-bottom:1px solid var(--line);
  gap:15px}
.row-link:last-child{
  border:0}
.row-link strong{
  font-size:14px;
  font-weight:550;
  display:block}
.row-link small{
  font-size:var(--text-small);
  display:block;
  margin-top:6px}
.round{
  width:35px;
  height:35px;
  border-radius:var(--radius-panel);
  display:grid;
  place-items:center;
  background:#edf2e5;
  flex-shrink:0}
.row-link .left{
  display:flex;
  gap:12px;
  align-items:center}
.empty{
  font-size:14px;
  color:var(--muted);
  padding:25px 0;
  text-align:center;
  line-height:1.7}
.section-space{
  margin-top:25px}
.card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:15px}
.card-header h2{
  margin:0}
progress{
  width:100%;
  height:6px;
  appearance:none;
  border:0;
  border-radius:20px;
  overflow:hidden;
  background:#e8ede4;
  margin:12px 0}
progress::-webkit-progress-bar{
  background:#e8ede4}
progress::-webkit-progress-value{
  background:#789a59}
progress::-moz-progress-bar{
  background:#789a59}
.usage-line{
  display:flex;
  justify-content:space-between;
  font-size:var(--text-small);
  color:var(--muted)}
.usage-box{
  padding:16px 0}
.usage-box+.usage-box{
  border-top:1px solid var(--line)}
.table-wrap{
  overflow:auto}
table{
  border-collapse:collapse;
  width:100%;
  font-size:var(--text-meta);
  white-space:nowrap}
th{
  text-align:left;
  font-size:var(--text-small);
  letter-spacing:.6px;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:600;
  padding:13px 12px;
  border-bottom:1px solid var(--line)}
td{
  padding:16px 12px;
  border-bottom:1px solid #edf0e9;
  vertical-align:top}
tr:last-child td{
  border:0}
td.wrap{
  white-space:normal;
  min-width:190px;
  max-width:420px}
td .tag{
  font-size:var(--text-small);
  padding:5px 8px}
dialog{
  border:0;
  border-radius:var(--radius-panel);
  max-width:680px;
  width:calc(100% - 36px);
  padding:30px;
  max-height:90vh;
  box-shadow:0 20px 100px #15332a30;
  color:var(--ink)}
dialog::backdrop{
  background:#0b2c2475;
  backdrop-filter:blur(3px)}
.modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:23px}
.modal-header h2{
  font-size:24px;
  margin:0}
.modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:20px}
.notice{
  background:#f0f3e9;
  border:1px solid #e2e7d9;
  border-radius:var(--radius-control);
  padding:13px 16px;
  font-size:var(--text-meta);
  line-height:1.6;
  margin:15px 0}
.notice.warm{
  background:#fff5ec;
  border-color:#ecdac8;
  color:#8b6046}
.chat-layout{
  display:grid;
  grid-template-columns:235px 1fr;
  gap:20px}
.conversation-list{
  padding:10px}
.conversation-choice{
  width:100%;
  padding:15px;
  text-align:left;
  display:block;
  background:transparent;
  color:var(--ink);
  border-radius:var(--radius-control)}
.conversation-choice.active{
  background:#edf2e4}
.conversation-choice strong{
  font-size:var(--text-meta);
  display:block;
  font-weight:600}
.conversation-choice small{
  font-size:var(--text-small);
  display:block;
  margin-top:7px}
.chat-panel{
  padding:0;
  display:flex;
  flex-direction:column;
  min-height:590px}
.chat-header{
  padding:20px 24px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px}
.chat-header h2{
  font-size:17px;
  margin:0}
.messages{
  padding:25px;
  flex:1;
  max-height:620px;
  overflow:auto;
  scroll-behavior:smooth}
.message{
  margin:0 0 22px;
  display:flex;
  gap:10px}
.message .bubble{
  border-radius:var(--radius-panel);
  padding:18px 20px;
  background:#f2f5ec;
  max-width:92%;
  font-size:14px;
  line-height:1.65;
  white-space:pre-wrap;
  overflow-wrap:anywhere}
.message.user{
  justify-content:flex-end}
.message.user .bubble{
  background:#e4edd7}
.message small{
  font-size:var(--text-small);
  display:block;
  margin-top:10px;
  color:var(--muted)}
.chat-composer{
  border-top:1px solid var(--line);
  padding:20px;
  display:flex;
  gap:12px;
  align-items:flex-end}
.chat-composer textarea{
  min-height:52px;
  max-height:160px}
.chat-composer button{
  height:47px}
.table-editor{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  padding:12px}
.table-editor label{
  min-width:130px;
  margin:0 0 12px}
.table-editor .record{
  display:flex;
  gap:10px;
  margin-bottom:15px}
.field-help{
  font-size:var(--text-small);
  color:var(--muted);
  line-height:1.5;
  margin:0 0 15px}
.procedure-steps{
  font-size:14px;
  line-height:1.7;
  padding-left:20px}
.commitment{
  border-left:3px solid #93ae71;
  padding-left:18px;
  margin:20px 0}
.commitment h3{
  margin-bottom:8px}
.commitment p{
  font-size:var(--text-meta);
  margin-bottom:10px}
.commitment .actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:13px}
.audit-hash{
  font-family:monospace;
  font-size:var(--text-small);
  max-width:100px;
  overflow:hidden;
  text-overflow:ellipsis}
.outbox-preview{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  background:#f3f6ee;
  padding:18px;
  border-radius:var(--radius-panel);
  font-size:14px;
  line-height:1.6}
.inline-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px}
.initial{
  padding:60px;
  text-align:center;
  color:var(--muted)}
#toast{
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  background:var(--green);
  color:white;
  padding:14px 21px;
  border-radius:12px;
  max-width:90%;
  font-size:14px;
  box-shadow:0 7px 35px #143b352b;
  z-index:100;
  display:none}
#toast.visible{
  display:block}
#toast.error{
  background:#933f34}
.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}
@media(min-width:1500px){
  .hero{
  padding-top:110px;
  padding-bottom:130px}
}
@media(max-width:1080px){
  .hero{
  gap:35px}
.hero h1{
  font-size:50px}
.hero-card.top{
  margin-left:-15px}
.hero-card.bottom{
  margin-right:-10px}
.shell{
  grid-template-columns:195px 1fr}
.sidebar{
  padding:25px 12px}
.page{
  padding:28px}
.topbar{
  padding:0 28px}
.plans{
  grid-template-columns:repeat(2,minmax(0,1fr))}
.chat-layout{
  grid-template-columns:190px 1fr}
.grid.two{
  grid-template-columns:1fr}
.waitlist{
  gap:30px}
.stats .stat{
  padding:18px}
.hero-art{
  min-height:410px}
}
@media(max-width:760px){
  .site-nav{
  padding:20px}
.site-nav nav>a:not(.button){
  display:none}
.hero{
  grid-template-columns:1fr;
  padding:35px 23px 55px;
  gap:45px}
.hero h1{
  font-size:48px}
.hero-art{
  margin:0 20px;
  min-height:340px;
  padding:20px}
.hero-card.top,.hero-card.bottom{
  margin:0;
  max-width:100%}
.strip{
  flex-direction:column;
  gap:13px;
  padding:25px}
.landing-section{
  padding:45px 23px}
.section-intro{
  display:block}
.section-intro h2{
  font-size:30px;
  margin-bottom:16px}
.features{
  grid-template-columns:1fr}
.waitlist{
  grid-template-columns:1fr;
  padding:30px;
  gap:20px}
.waitlist h2{
  font-size:34px}
.footer{
  display:block;
  line-height:2}
.auth-page{
  grid-template-columns:1fr}
.auth-story{
  padding:28px;
  min-height:250px}
.auth-story h1{
  font-size:32px;
  margin-top:40px}
.auth-story>small{
  display:none}
.auth-form{
  padding:32px}
.shell{
  display:block}
.sidebar{
  position:relative;
  height:auto;
  padding:17px;
  gap:15px}
.sidebar nav{
  flex-direction:row;
  overflow:auto}
.sidebar .nav-item{
  white-space:nowrap;
  padding:10px}
.sidebar .eyebrow,.sidebar .bottom{
  display:none}
.topbar{
  height:60px;
  padding:0 20px}
.person{
  display:none}
.page{
  padding:25px 18px}
.page-heading h1{
  font-size:27px}
.page-heading{
  align-items:start}
.stats{
  grid-template-columns:1fr}
.stat{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px}
.stat strong{
  margin:0;
  font-size:23px}
.stat small{
  max-width:115px}
.grid.equal,.grid.three{
  grid-template-columns:1fr}
.chat-layout{
  display:block}
.conversation-list{
  display:flex;
  overflow:auto;
  margin-bottom:15px}
.conversation-choice{
  min-width:180px}
.chat-panel{
  min-height:500px}
.chat-header{
  padding:17px}
.messages{
  padding:17px}
.message .bubble{
  max-width:100%;
  padding:15px}
.chat-composer{
  padding:13px}
.card{
  padding:20px}
.welcome-card .decor{
  right:10px}
.form-row{
  grid-template-columns:1fr}
.plans{
  gap:10px}
.plan{
  padding:19px}
.price{
  font-size:26px}
.plan ul{
  font-size:var(--text-small)}
.section-intro p{
  max-width:100%}
.page-heading>.tag{
  display:none}
}


/* Professional foundations: preserve green identity, show a concrete first step. */
label{
  font-size:14px}
.plan,.workspace,.hero>*,.waitlist>*{
  min-width:0}
.plan .button{
  text-align:center;
  white-space:normal;
  min-height:44px}
.plan h3,.price{
  overflow-wrap:anywhere}
.price,table,.usage-line,.stat strong{
  font-variant-numeric:tabular-nums}

.hero{
  gap:48px;
  padding-top:56px;
  padding-bottom:64px;
  align-items:start}
.hero h1{
  font-size:clamp(34px,4.5vw,54px);
  line-height:1.12;
  letter-spacing:-1.8px}
.hero h1 em{
  color:var(--green)}
.hero p{
  color:var(--muted);
  font-size:17px;
  max-width:490px}
.hero .actions{
  margin:24px 0 16px}

.hero-example{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-panel);
  padding:var(--space-8);
  box-shadow:var(--shadow)}
.example-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:24px}
.hero-example h2{
  font-size:25px;
  line-height:1.3;
  letter-spacing:-.5px}
.example-steps{
  list-style:none;
  padding:0;
  margin:24px 0}
.example-steps li{
  display:flex;
  gap:16px;
  padding:16px 0;
  border-top:1px solid var(--line)}
.example-index{
  display:grid;
  place-items:center;
  flex:0 0 28px;
  height:28px;
  border-radius:50%;
  background:var(--leaf);
  font-size:13px;
  color:var(--green)}
.example-steps strong{
  font-size:15px}
.example-steps p{
  margin:8px 0 0;
  font-size:14px;
  color:var(--muted)}
.hero-example .field-help{
  font-size:12px;
  line-height:1.6;
  margin:0}
.hero .hero-example p{
  font-size:14px}

.conversation-history{
  min-width:0}
.conversation-history>summary{
  display:none}
.chat-panel{
  height:clamp(420px,75dvh,760px);
  min-height:0}
.messages{
  min-height:0;
  max-height:none;
  flex:1;
  scroll-padding-bottom:16px}
.chat-composer{
  flex-shrink:0;
  padding-bottom:max(16px,env(safe-area-inset-bottom));
  background:var(--white)}
.chat-composer textarea{
  min-height:52px;
  max-height:120px;
  scroll-margin:16px}
.chat-header{
  flex-shrink:0}
.chat-header h2{
  overflow-wrap:anywhere;
  min-width:0}
.chat-composer button{
  min-width:82px;
  white-space:nowrap}
.page-heading>button{
  white-space:nowrap}
.page-heading{
  flex-wrap:wrap}

.account-actions{
  min-width:180px;
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  padding:0 12px}
.account-actions .inline-actions{
  display:grid;
  gap:8px;
  padding-bottom:12px}
.account-actions>summary{
  font-weight:600}
.account-actions .field-help{
  white-space:normal;
  max-width:240px}
.account-actions button{
  text-align:left;
  justify-content:flex-start;
  min-height:44px}
.table-wrap td .primary{
  margin-top:12px}

details>summary{
  min-height:44px;
  padding:10px 0;
  display:list-item}
.eyebrow{
  font-size:var(--text-small)}
.page-heading .eyebrow{
  display:none}
.notice,.field-help{
  font-size:14px}
.tag{
  font-size:var(--text-small)}
.audit-hash{
  font-size:var(--text-small)}
th{
  font-size:var(--text-small)}
table{
  font-size:14px}

@media(max-width:760px){
  .hero{
  gap:24px;
  padding:32px 20px 48px}
.hero-example{
  padding:24px}
.hero h1{
  font-size:38px}
.hero-example h2{
  font-size:23px}
.conversation-history>summary{
  display:list-item}
.conversation-history{
  margin-bottom:12px}
.conversation-list{
  margin-bottom:0}
.mentor-workspace .sidebar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  padding:12px 16px;
  gap:8px}
.mentor-workspace .mobile-menu{
  margin:0;
  width:auto;
  max-width:160px;
  padding:10px;
  font-size:13px}
.mentor-workspace .sidebar nav{
  grid-column:1/-1}
.mentor-workspace .sidebar .bottom{
  display:none!important}
.mentor-workspace .sidebar .brand{
  padding:0}
.mentor-workspace .topbar{
  height:48px}
.mentor-workspace .page{
  padding:16px}
.mentor-workspace .page-heading{
  margin-bottom:12px;
  gap:8px}
.mentor-workspace .page-heading h1{
  font-size:25px;
  margin:0 0 8px}
.mentor-workspace .page-heading p{
  font-size:14px}
.mentor-workspace .page-heading>button{
  padding:10px 12px;
  min-height:44px}
.chat-panel{
  height:clamp(280px,calc(100dvh - 330px),680px)}
.chat-header{
  padding:12px;
  gap:8px}
.chat-header button{
  white-space:normal;
  max-width:150px;
  min-height:44px}
.chat-composer{
  padding:12px;
  padding-bottom:max(12px,env(safe-area-inset-bottom));
  gap:8px}
.chat-composer textarea{
  font-size:16px}
.messages{
  padding:16px}
.account-actions{
  min-width:0;
  width:100%;
  margin-top:8px}
.account-actions .field-help{
  max-width:none}
.account-actions .inline-actions{
  grid-template-columns:1fr}
.hero-example .example-heading{
  flex-wrap:wrap}
}

@media(max-width:600px){
  .plans{
  grid-template-columns:minmax(0,1fr);
  gap:16px}
.plan{
  padding:24px}
.price{
  font-size:32px}
.plan ul{
  font-size:14px}
.waitlist{
  padding:24px}
.hero h1{
  font-size:clamp(32px,9vw,38px)}
.landing-section{
  padding:40px 20px}
.site-nav{
  padding:16px}
.site-nav nav{
  gap:8px}
.site-nav .button{
  padding:12px}
.hero-example{
  padding:20px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
  scroll-behavior:auto!important;
  transition:none!important;
  animation:none!important}
}

/* Restored draft status occupies its own row, never the message input column. */
.chat-composer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end}
.chat-composer .draft-note{grid-column:1/-1;padding:0;font-size:var(--text-small);line-height:1.5}
.chat-composer textarea{grid-column:1;min-width:0;width:100%}
.chat-composer>button{grid-column:2}
.landing-section[id]{scroll-margin-top:24px}
h1,h2{text-wrap:balance}
dialog,.messages{overscroll-behavior:contain}
button,.button,summary{touch-action:manipulation}
.plan.featured .eyebrow{color:#b9d1c1}

.chat-panel.card{padding:0}