/* M7.2: Homepage B, retained prototype typography and palette; CSP-safe. */
:root{--paper:#f4f3ef;
--ink:#161b1d;
--border:#cdd0cb;
--sub:#566362;
--accent:#197f70;
--accent-text:#147567;
--mint:#a9f1d9;
--night:#101d20;
--font:system-ui,-apple-system,"Segoe UI",sans-serif}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;
background:var(--paper);
color:var(--ink);
font:16px/1.5 var(--font)}
a{color:inherit;
text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--accent);
outline-offset:4px}

.container{width:min(1360px,calc(100% - 94px));
margin:auto}

header{height:100px;
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid #aaaeb0}
.logo{font-size:22px;
font-weight:850;
letter-spacing:-.075em}
.logo b{font-weight:500;
color:var(--accent-text)}
nav{display:flex;
gap:40px;
font-size:13px}
nav a:hover{text-decoration:underline}
.button{display:inline-flex;
gap:20px;
align-items:center;
justify-content:center;
background:#172124;
color:#f1fff8;
border:1px solid #172124;
border-radius:4px;
padding:14px 22px;
font-weight:700;
font-size:13px}
.button:hover{background:var(--accent);
border-color:var(--accent)}
.button.light{background:transparent;
color:var(--ink);
border-color:#9fa9a6}
.button.light:hover{background:#e0e8e4}

.mast{padding:78px 0 70px}
.meta{display:flex;
justify-content:space-between;
font:700 11px ui-monospace,monospace;
letter-spacing:.15em;
color:var(--sub)}
.label{display:flex;
gap:12px;
align-items:center}
.label::before{content:"";
height:7px;
width:7px;
background:var(--accent);
border-radius:50%}
h1{font-size:clamp(39.04px,5.504vw,94.72px);
line-height:.91;
letter-spacing:-.075em;
font-weight:800;
margin:45px 0 46px;
max-width:1230px}
h1 em{font-style:normal;
color:var(--accent)}
.mastfooter{display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
border-top:1px solid #c3c8c2;
padding-top:26px;
align-items:end}
.mastfooter p{font-size:21px;
line-height:1.55;
max-width:560px;
margin:0;
color:#3b4745}
.cta{display:flex;
justify-content:flex-end;
align-items:center;
gap:12px;
flex-wrap:wrap}
.showcase{background:var(--night);
color:#eaf5ee;
padding:50px 0 85px;
border-top:1px solid #334343;
border-bottom:1px solid #334343}
.showcaseheader{display:flex;
justify-content:space-between;
align-items:start;
gap:24px;
margin-bottom:42px}
.showcaseheader h2{font-size:23.04px;
letter-spacing:-.05625em;
line-height:1.1;
margin:0}
.showcaseheader p{margin:0;
max-width:320px;
color:#a2bcb5;
font-size:13px}
.workarea{display:grid;
grid-template-columns:35% 65%;
min-height:430px;
border:1px solid #46625a;
border-radius:8px;
overflow:hidden;
box-shadow:0 35px 50px #0004}
.workstory{background:#15282a;
border-right:1px solid #3b5851;
padding:36px;
display:flex;
flex-direction:column;
justify-content:space-between}
.workstory .step{display:block;
color:#a9d7c8;
font:11px ui-monospace,monospace;
letter-spacing:.17em}
.workstory h3{font-size:clamp(23.68px,2.432vw,40.32px);
line-height:1.05;
letter-spacing:-.06375em;
margin:24px 0 18px}
.workstory p{font-size:15px;
line-height:1.8;
color:#9ebeb1;
max-width:280px}
.steps{display:flex;
flex-wrap:wrap;
gap:8px}
.stepbtn{border:1px solid #406057;
background:transparent;
color:#a1c6ba;
padding:8px 12px;
border-radius:4px;
font:11px ui-monospace,monospace}
.stepbtn[aria-pressed=true]{background:var(--mint);
color:#10332c;
border-color:var(--mint)}

.appwindow{background:#f7faf6;
color:#19302c;
display:flex;
flex-direction:column}
.toolbar{background:#eef3ed;
padding:15px 25px;
border-bottom:1px solid #c9d5ce;
display:flex;
justify-content:space-between;
align-items:center;
font:600 11px ui-monospace,monospace;
color:#526a60}
.lights{display:flex;
gap:7px}
.lights i{width:8px;
height:8px;
border:1px solid #95aca1;
border-radius:100%}
.appmain{padding:30px 36px}
.appupper{display:flex;
justify-content:space-between;
gap:30px;
align-items:center}
.appupper h3{font-size:17.92px;
letter-spacing:-.045em;
margin:0}
.sample{font:700 10px ui-monospace,monospace;
letter-spacing:.1em;
color:#247d69;
border:1px solid #8dbeb0;
border-radius:4px;
padding:5px 8px}
.searchbar{width:100%;
padding:15px 16px;
border:1px solid #c2ccc6;
background:white;
border-radius:6px;
margin:24px 0 16px;
color:#122520;
outline-color:var(--accent)}
.filters{display:flex;
gap:8px;
flex-wrap:wrap}
.tag{font:10px ui-monospace,monospace;
color:#57746b;
border:1px solid #d2ded5;
border-radius:4px;
padding:7px 10px}
.tag.active{background:#d4eee4;
border-color:#9dcdb8;
color:#0b5b49}
.records{margin-top:19px}
.record{border-top:1px solid #dae2dc;
padding:16px 6px;
display:flex;
justify-content:space-between;
gap:12px;
align-items:center}
.record strong{display:block;
font-size:15px;
letter-spacing:-.025em}
.record small{font:11px ui-monospace,monospace;
color:#526a60}
.record .arrow{font-size:20px;
color:#57907c}
.record[hidden]{display:none}

main section.white{padding:115px 0}
.sectioncap{font:700 11px ui-monospace,monospace;
letter-spacing:.19em;
color:var(--accent-text)}
.sectiontitle{font-size:clamp(28.8px,3.84vw,53.12px);
letter-spacing:-.0675em;
line-height:1.05;
margin:26px 0 55px;
max-width:850px}
.rows{border-top:1px solid var(--border)}
.row{display:grid;
grid-template-columns:110px 1fr 1fr;
gap:40px;
align-items:start;
padding:35px 0;
border-bottom:1px solid var(--border)}
.row b{font:700 13px ui-monospace,monospace;
color:var(--accent-text)}
.row h3{font-size:18.56px;
letter-spacing:-.04875em;
line-height:1.1;
margin:0}
.row p{max-width:445px;
color:var(--sub);
font-size:15px;
margin:2px 0}
#teams{background:#e4ece7;
padding:100px 0}
.twocol{display:grid;
grid-template-columns:1fr 1fr;
gap:30px}
.callout{padding:45px;
background:#f6f8f4;
border:1px solid #b5c7bb;
min-height:290px;
display:flex;
flex-direction:column;
justify-content:space-between}
.callout h3{font-size:23.68px;
line-height:1.05;
letter-spacing:-.06em;
margin:0}
.callout p{font-size:15px;
color:#54645b;
max-width:470px}
.callout a{font-size:13px;
font-weight:800;
color:var(--accent-text)}
footer{padding:35px 0;
border-top:1px solid #b6c2b9;
color:#626c65;
font:11px ui-monospace,monospace;
letter-spacing:.07em}
footer .container{display:flex;
justify-content:space-between;
gap:25px}

@media(max-width:950px){header>nav{display:none}
h1{font-size:clamp(36.48px,6.4vw,64px)}
.workarea{grid-template-columns:1fr}
.workstory{min-height:310px;
border-right:0;
border-bottom:1px solid #406057}
.workstory h3{font-size:25.6px}
.appmain{padding:30px}
.workstory p{max-width:700px}
.workstory h3{margin-top:15px}
.mastfooter{grid-template-columns:1fr;
gap:20px}
.cta{justify-content:flex-start}
}

@media(max-width:600px){.container{width:calc(100% - 36px)}
header{height:72px}
.logo{font-size:17px}
header .button{padding:10px 12px}
h1{font-size:clamp(33.92px,7.68vw,48px);
margin:38px 0}
.mast{padding:52px 0}
.meta{font-size:9px}
.meta span:last-child{display:none}
.mastfooter p{font-size:17px}
.cta{justify-content:flex-start}
.showcase{padding:50px 0}
.showcaseheader{display:block}
.showcaseheader p{margin-top:12px}
.workstory{padding:24px}
.appmain{padding:22px}
.appupper h3{font-size:13.44px}
.record{padding:14px 0}
.record strong{font-size:13px}
.record small{font-size:9px}
main section.white{padding:65px 0}
.sectiontitle{margin-bottom:35px}
.row{grid-template-columns:40px 1fr;
gap:12px}
.row p{grid-column:2}
#teams{padding:60px 0}
.twocol{grid-template-columns:1fr}
.callout{min-height:240px;
padding:28px}
footer .container{display:block}
}

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

/* Mobile-first resilience, progressive enhancement and trust sections. */
*{min-width:0}
html{overflow-x:clip}
img,svg{max-width:100%}

.skip-link{position:absolute;
top:-100px;
left:12px;
padding:12px 16px;
z-index:100;
background:#101d20;
color:white}

.skip-link:focus{top:12px}

.mobile-menu{display:none;
position:relative}

.mobile-menu summary{list-style:none;
cursor:pointer;
border:1px solid #9fa9a6;
border-radius:4px;
padding:10px 12px;
font-size:13px;
font-weight:700}

.mobile-menu summary::-webkit-details-marker{display:none}

.mobile-menu nav{display:grid!important;
position:absolute;
z-index:20;
right:0;
top:calc(100% + 5px);
min-width:190px;
background:var(--paper);
border:1px solid var(--border);
padding:8px;
border-radius:5px;
box-shadow:0 15px 38px #161b1d22}

.mobile-menu nav a{display:block;
padding:12px 9px}

.section-label{color:#a1dcc9;
font:11px ui-monospace,monospace;
letter-spacing:.15em;
margin-bottom:14px}

.preview-label{display:block;
font:11px ui-monospace,monospace;
color:#526a60;
margin-top:16px}

.appupper .dot{color:#5f806e}

.interactive-only{display:none}

.has-js .interactive-only{display:flex}

.has-js label.interactive-only,.has-js input.interactive-only{display:block}

.record[hidden],#empty[hidden]{display:none!important}

.empty-message{font-size:13px;
color:#526a60}

.trust{background:#f8f8f4;
padding:90px 0;
border-top:1px solid var(--border)}

.trust-grid{display:grid;
grid-template-columns:1.25fr 1fr;
gap:50px}

.trust h2,.final-cta h2{font-size:clamp(28.8px,3.84vw,53.12px);
letter-spacing:-.0675em;
line-height:1.05;
margin:20px 0 35px}

.trust p,.final-cta p{max-width:630px;
color:var(--sub)}

.trust-note{border-top:1px solid var(--border);
padding:18px 0}

.trust-note strong{display:block;
margin-bottom:8px}

.trust-note span{font-size:14px;
color:var(--sub)}

.final-cta{padding:115px 0}
.final-cta h2{max-width:850px}

.final-actions{display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:30px}

.footer-nav{display:flex;
flex-wrap:wrap;
gap:22px}

a:hover{text-underline-offset:3px}

@media(max-width:950px){.mobile-menu{display:block}
.trust-grid{grid-template-columns:1fr}
.trust{padding:65px 0}
}

@media(max-width:600px){header>.button{display:none}
.workarea{min-width:0}
.workstory,.appwindow,.appmain{min-width:0}
.toolbar{flex-wrap:wrap;
gap:10px}
.appupper{flex-wrap:wrap;
gap:8px}
.steps{gap:8px}
.trust,.final-cta{padding:65px 0}
.trust h2,.final-cta h2{font-size:28.8px}
.footer-nav{margin-top:14px}
.record{overflow-wrap:anywhere}
}


/* ==========================================================================
   M1 Additions: Catalog Views, Developer Docs & Workspace Entry (Variant B)
   ========================================================================== */

/* Badges & Pills */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 3px;
  font: 700 11px ui-monospace, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.2;
  background: #eef0ec;
  color: var(--ink);
}

.badge-accent { background: var(--accent); color: #ffffff; }
.badge-kind { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; }
.badge-channel { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.badge-version { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; }
.badge-license { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.badge-status { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.badge-get { background: #d7eef8; color: #0d5475; border: 1px solid #b2dbed; }
.badge-post { background: #d8f5e5; color: #0f6a39; border: 1px solid #aee4c5; }
.badge-mcp { background: #17292c; color: #a9f1d9; border: 1px solid #2b4247; }
.badge-billable { background: #fdf0d5; color: #875200; border: 1px solid #f6db9e; }
.badge-nonbillable { background: #e3f5eb; color: #147567; border: 1px solid #bce6cf; }
.badge-required { background: #fde8e8; color: #9b1c1c; border: 1px solid #f8b4b4; }
.badge-optional { background: #f0f0ec; color: #666e6b; border: 1px solid #dcdcd6; }

/* Catalog Browser & Cards */
.catalog-mast { padding: 60px 0 30px; }
.catalog-mast .mastfooter { grid-template-columns: 1fr; }
.catalog-mast .mastfooter p { max-width: 720px; }
.catalog-controls { margin: 24px 0 32px; display: flex; flex-direction: column; gap: 20px; }
.catalog-search-form { width: 100%; max-width: 640px; }
.search-input-wrap { display: flex; gap: 12px; align-items: stretch; }
.catalog-searchbar { flex: 1; margin: 0; height: 44px; padding: 10px 16px; border: 1px solid var(--border); border-radius: 6px; background: #ffffff; color: var(--ink); }
.search-submit-btn { height: 44px; padding: 0 22px; border-radius: 6px; }

.catalog-filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; padding: 6px 14px; border: 1px solid var(--border); border-radius: 20px; font-size: 13px; font-weight: 600; color: var(--sub); transition: all .15s ease; }
.pill:hover { color: var(--ink); border-color: var(--ink); text-decoration: none; }
.pill.active { background: var(--night); color: #ffffff; border-color: var(--night); }

.catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; margin-bottom: 40px; }
.catalog-card { background: #ffffff; border: 1px solid var(--border); border-radius: 6px; padding: 24px; display: flex; flex-direction: column; transition: border-color .15s ease; }
.catalog-card:hover { border-color: var(--accent); }
.catalog-card-header { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.catalog-card-title { font-size: 18px; font-weight: 700; margin: 0 0 10px; }
.catalog-card-title a { color: var(--ink); }
.catalog-card-title a:hover { color: var(--accent); }
.catalog-card-summary { font-size: 14px; color: var(--sub); line-height: 1.5; margin: 0 0 20px; flex: 1; }
.catalog-card-footer { display: flex; align-items: center; justify-content: space-between; font-size: 12px; border-top: 1px solid #f0f0ec; padding-top: 12px; gap: 10px; }
.catalog-card-license { font-family: ui-monospace, monospace; color: var(--sub); }
.catalog-card-verified { color: var(--accent-text); font-weight: 600; }
.catalog-card-arrow { font-size: 16px; font-weight: 700; color: var(--ink); }

.catalog-empty-state { text-align: center; padding: 64px 20px; border: 1px dashed var(--border); border-radius: 6px; margin: 24px 0; }
.empty-icon { font-size: 36px; color: var(--sub); margin-bottom: 12px; }
.catalog-empty-state h3 { font-size: 20px; margin: 0 0 8px; }
.catalog-empty-state p { color: var(--sub); margin: 0 0 20px; }

.catalog-pagination { display: flex; justify-content: center; gap: 12px; margin: 32px 0; }
.catalog-more { margin-top: 24px; text-align: center; }

/* Resource Detail View */
.breadcrumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--sub); margin: 24px 0 16px; }
.breadcrumbs a:hover { color: var(--ink); }
.breadcrumbs span[aria-current="page"] { color: var(--ink); font-weight: 600; }

.detail-container { padding: 20px 0 80px; }
.detail-hero { border-bottom: 1px solid var(--border); padding-bottom: 32px; margin-bottom: 40px; }
.detail-meta-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 16px; }
.detail-kicker { font: 700 11px ui-monospace, monospace; letter-spacing: .15em; color: var(--sub); }
.detail-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.detail-title { font-size: clamp(28px, 4vw, 48px); font-weight: 800; letter-spacing: -.05em; margin: 0 0 16px; line-height: 1.1; }
.detail-slug-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.detail-slug { font: 14px ui-monospace, monospace; background: #e8e8e2; padding: 4px 10px; border-radius: 4px; }
.detail-verified-tag { font-size: 13px; font-weight: 600; color: var(--accent-text); }

.detail-body { display: flex; flex-direction: column; gap: 40px; }
.detail-section { border-bottom: 1px solid var(--border); padding-bottom: 40px; }
.detail-section:last-of-type { border-bottom: none; }
.detail-section-title { font-size: 20px; font-weight: 700; margin: 0 0 16px; letter-spacing: -.03em; }
.detail-summary-card { background: #ffffff; border: 1px solid var(--border); border-radius: 6px; padding: 24px; font-size: 16px; line-height: 1.6; color: #3b4745; }
.detail-summary-card p { margin: 0; }

.detail-specs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin: 0; }
.spec-item { background: #ffffff; border: 1px solid var(--border); border-radius: 4px; padding: 16px; }
.spec-item dt { font-size: 12px; color: var(--sub); text-transform: uppercase; font-family: ui-monospace, monospace; margin-bottom: 6px; }
.spec-item dd { margin: 0; font-size: 15px; font-weight: 600; }

.section-title-wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.section-title-wrap .detail-section-title { margin: 0; }
.detail-section-desc { color: var(--sub); font-size: 14px; margin: 0 0 16px; }
.code-block { background: var(--night); color: #eaf5ee; border: 1px solid #233438; border-radius: 6px; padding: 18px 20px; overflow-x: auto; }
.copy-btn.copied { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.snippet-hint { margin-top: 12px; font-size: 13px; color: var(--sub); }
.snippet-hint p { margin: 0; }
.detail-provenance-box { background: #edf7f4; border: 1px solid #bce6cf; border-radius: 6px; padding: 20px; }
.provenance-badge { font-weight: 700; color: var(--accent-text); margin-bottom: 8px; }
.detail-provenance-box p { margin: 0; font-size: 14px; color: #243331; line-height: 1.5; }
.detail-actions { display: flex; gap: 12px; flex-wrap: wrap; padding-top: 16px; }

/* Developer Documentation Layout */
.docs-hero { padding: 60px 0 30px; border-bottom: 1px solid var(--border); }
.docs-hero h1 { margin: 20px 0 16px; max-width: 900px; }
.docs-hero .lead { font-size: 19px; line-height: 1.5; color: var(--sub); max-width: 780px; margin: 0; }

.docs-layout { display: grid; grid-template-columns: 260px 1fr; gap: 48px; padding: 40px 0 90px; align-items: start; }
.docs-sidebar { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; padding-right: 16px; border-right: 1px solid var(--border); }
.docs-toc { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.docs-toc-title { font: 700 11px ui-monospace, monospace; letter-spacing: .12em; color: var(--sub); text-transform: uppercase; margin-bottom: 10px; }
.docs-toc a { color: var(--sub); padding: 4px 8px; border-radius: 4px; transition: color .15s ease, background .15s ease; line-height: 1.4; }
.docs-toc a:hover { color: var(--ink); background: #e8e8e2; text-decoration: none; }
.docs-toc .toc-sub { padding-left: 18px; font-size: 12px; }

.docs-content section { padding-bottom: 56px; border-bottom: 1px solid var(--border); margin-bottom: 56px; }
.docs-content section:last-child { border-bottom: none; margin-bottom: 0; }
.docs-content h2 { font-size: clamp(24px, 3.2vw, 36px); letter-spacing: -.05em; margin: 0 0 16px; color: var(--ink); }
.docs-content h3 { font-size: 20px; letter-spacing: -.03em; margin: 36px 0 14px; color: var(--ink); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.docs-content h4 { font-size: 15px; letter-spacing: -.01em; margin: 24px 0 8px; color: var(--ink); text-transform: uppercase; font-family: ui-monospace, monospace; }
.docs-content p { color: #3b4745; line-height: 1.6; margin: 0 0 16px; }
.docs-content ul, .docs-content ol { color: #3b4745; line-height: 1.6; margin: 0 0 18px; padding-left: 24px; }
.docs-content li { margin-bottom: 6px; }

/* Code Blocks & Parameter Tables */
.code-box { background: var(--night); border: 1px solid #233438; border-radius: 6px; margin: 18px 0 26px; overflow: hidden; }
.code-header { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; background: #0b1416; border-bottom: 1px solid #1c2c30; font: 700 11px ui-monospace, monospace; color: #7b948d; letter-spacing: .08em; text-transform: uppercase; }
.btn-copy-code { display: inline-flex; align-items: center; gap: 6px; background: #17292c; color: #cce3dc; border: 1px solid #2b4247; border-radius: 4px; padding: 4px 10px; font: 600 11px ui-monospace, monospace; cursor: pointer; transition: background .15s ease, color .15s ease; }
.btn-copy-code:hover { background: var(--accent); border-color: var(--accent); color: #f1fff8; }
.btn-copy-code.copied { background: #12544a; border-color: var(--accent); color: #a9f1d9; }

pre { margin: 0; padding: 18px 20px; overflow-x: auto; background: transparent; color: #eaf5ee; font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
pre code { background: transparent; padding: 0; color: inherit; font: inherit; }
code { background: #e5e5df; padding: 2px 6px; border-radius: 3px; font: 13px ui-monospace, monospace; color: var(--ink); }

.param-table { width: 100%; border-collapse: collapse; margin: 16px 0 28px; font-size: 13px; background: #faf9f5; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; }
.param-table th { background: #eae8e1; text-align: left; padding: 10px 14px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--border); }
.param-table td { padding: 10px 14px; border-bottom: 1px solid #e2e4de; vertical-align: top; color: var(--ink); }
.param-table tr:last-child td { border-bottom: none; }
.param-table .param-name { font-family: ui-monospace, monospace; font-weight: 700; }
.param-table .param-type { font-family: ui-monospace, monospace; color: #4b615d; font-size: 12px; }

/* Documentation Callouts / Admonitions (scoped to avoid overriding #teams .callout) */
.docs-content .callout { display: block; min-height: 0; border: 1px solid #bce6cf; border-left: 4px solid var(--accent); background: #edf7f4; padding: 14px 18px; margin: 20px 0; border-radius: 0 6px 6px 0; font-size: 14px; line-height: 1.55; color: #243331; }
.docs-content .callout-warning { border-color: #fde68a; border-left-color: #d97706; background: #fffbeb; color: #452a05; }
.docs-content .callout-security { border-color: #bce6cf; border-left-color: #147567; background: #eaf7f3; color: #123832; }
.docs-content .callout strong { display: block; margin-bottom: 4px; color: var(--ink); }
.docs-content .callout strong:last-child { margin-bottom: 0; }

/* Workspace Entry Layout & ADR-043 Authentication Forms */
.entry-layout { padding: 48px 0 80px; max-width: 980px; }
.entry-header { margin-bottom: 40px; }
.entry-title { font-size: clamp(32px, 4vw, 54px); letter-spacing: -0.065em; line-height: 1.05; margin: 12px 0 16px; font-weight: 800; color: var(--ink); }
.entry-intro { font-size: 18px; line-height: 1.5; color: var(--sub); max-width: 720px; margin: 0; }
.entry-grid { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 28px; margin-bottom: 48px; align-items: start; }
.entry-card { background: #ffffff; border: 1px solid var(--border); padding: 32px 28px; display: flex; flex-direction: column; transition: border-color 0.2s ease; }
.entry-card-primary { border-color: var(--accent); background: linear-gradient(180deg, #ffffff 0%, #f9fbfb 100%); }
.entry-card-badge-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.badge-meta { font: 600 12px ui-monospace, monospace; color: var(--sub); }
.entry-card-title { font-size: 22px; font-weight: 700; letter-spacing: -0.04em; margin: 0 0 10px; color: var(--ink); line-height: 1.2; }
.entry-card-desc { font-size: 14.5px; line-height: 1.55; color: var(--sub); margin: 0 0 22px; }

/* Social OAuth & Primary Auth Buttons */
.social-login-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.entry-card-cta { margin-top: 0; margin-bottom: 4px; }
.entry-card-cta .button { width: 100%; }

.button-social { background: #ffffff; color: var(--ink); border: 1px solid #b8c2bd; border-radius: 6px; padding: 11px 14px; font-weight: 600; font-size: 13px; width: 100%; gap: 8px; }
.button-social:hover { background: #edf3f0; border-color: var(--accent); color: var(--ink); }
.button-primary { background: var(--accent); border-color: var(--accent); color: #ffffff; border-radius: 6px; padding: 11px 18px; }
.button-primary:hover { background: var(--accent-text); border-color: var(--accent-text); color: #ffffff; }
.button-secondary { background: #172124; border-color: #172124; color: #f1fff8; border-radius: 6px; padding: 11px 18px; }
.button-secondary:hover { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.button-ghost { background: #ffffff; color: var(--ink); border: 1px solid #b8c2bd; border-radius: 6px; padding: 11px 18px; }
.button-ghost:hover { background: #edf3f0; border-color: var(--ink); color: var(--ink); }

/* Dividers, Forms, Labels & Inputs inside Entry Cards */
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0 14px; font: 700 11px ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sub); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: #d6dcd8; }
.auth-divider span { flex-shrink: 0; }

.verification-banner { background: #edf7f4; border: 1px solid #bce6cf; border-left: 3px solid var(--accent); border-radius: 6px; padding: 10px 14px; font-size: 12.5px; line-height: 1.45; color: #19302c; }
.verification-banner.error { background: #fdf2f2; border-color: #f87171; border-left-color: #dc2626; color: #991b1b; }
.verification-banner.success { background: #e8f5f1; border-color: var(--accent); border-left-color: var(--accent-text); color: #123832; }
.verification-banner.loading { background: #fffbeb; border-color: #fcd34d; border-left-color: #d97706; color: #452a05; }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.entry-card .label { font-size: 13px; font-weight: 600; color: var(--ink); gap: 6px; line-height: 1.3; }
.entry-card .label::before { display: none; }

.input, .token-input { width: 100%; height: 42px; padding: 9px 13px; border: 1px solid #b8c2bd; border-radius: 6px; background: #ffffff; color: var(--ink); font-size: 14px; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.token-input { font-family: ui-monospace, monospace; font-size: 13px; }
.input:hover, .token-input:hover { border-color: #8fa199; }
.input:focus, .token-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(25 127 112 / .14); outline: none; }

.form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }

.token-form-group { display: flex; flex-direction: column; gap: 10px; }
.token-input-group { display: flex; flex-direction: column; gap: 10px; }
.token-input-group .button { width: 100%; }
.auth-form .token-input-group { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.auth-form .token-input-group .button { width: auto; white-space: nowrap; height: 42px; padding: 0 16px; }

.input-hint { font-size: 12.5px; line-height: 1.45; color: var(--sub); margin: 0; }
.token-feedback { font-size: 13px; padding: 10px 12px; border-radius: 6px; display: none; margin-top: 4px; }
.token-feedback.success { display: block; background: #e8f5f1; color: var(--accent-text); border: 1px solid var(--accent); }
.token-feedback.error { display: block; background: #fdf2f2; color: #b91c1c; border: 1px solid #f87171; }
.token-feedback.loading { display: block; background: var(--paper); color: var(--sub); border: 1px solid var(--border); }

.security-guarantee { display: flex; align-items: flex-start; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px dashed var(--border); font-size: 12px; line-height: 1.45; color: var(--sub); }
.security-guarantee svg { flex-shrink: 0; margin-top: 2px; color: var(--accent); }

.workspace-selection-section { background: #ffffff; border: 1px solid var(--border); border-radius: 9px; padding: 32px 28px; margin-bottom: 32px; }
.workspace-section-header { margin-bottom: 24px; }
.section-subtitle { font-size: 20px; font-weight: 700; letter-spacing: -0.04em; margin: 0 0 6px; }
.section-desc { font-size: 14px; color: var(--sub); margin: 0; }
.workspace-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
.workspace-empty { padding: 24px; text-align: center; color: var(--sub); font-size: 14px; grid-column: 1 / -1; border: 1px dashed var(--border); border-radius: 6px; background: var(--paper); }
.workspace-card { border: 1px solid var(--border); border-radius: 8px; padding: 20px; cursor: pointer; background: var(--paper); transition: all 0.15s ease; user-select: none; }
.workspace-card.active { border-color: var(--accent); background: #ffffff; box-shadow: 0 0 0 1px var(--accent); }
.workspace-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.workspace-name { font-size: 16px; font-weight: 700; color: var(--ink); }
.workspace-id { font: 11px ui-monospace, monospace; color: var(--sub); margin-bottom: 10px; }
.workspace-desc { font-size: 13px; color: var(--sub); line-height: 1.45; margin: 0; }
.workspace-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.workspace-status { font: 12px ui-monospace, monospace; color: var(--sub); }

.security-callout { background: var(--night); color: #ffffff; padding: 28px; margin-bottom: 40px; border-radius: 6px; }
.security-callout-title { font-size: 16px; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 14px; color: var(--mint); }
.security-callout-list { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.6; color: #c5d0ce; }
.security-callout-list li strong { color: #ffffff; }

header nav a[aria-current="page"],
header nav a.active,
header nav a.nav-active { color: var(--accent-text); font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }

.header-actions { display: flex; align-items: center; gap: 16px; }
.lang-switch { font: 700 12px ui-monospace, monospace; padding: 6px 10px; border: 1px solid var(--border); border-radius: 4px; transition: border-color .15s ease, background .15s ease; }
.lang-switch:hover { border-color: var(--ink); background: #e8ece9; }
.footertop { display: flex; flex-direction: column; gap: 4px; }
.footerbrand { font-weight: 700; color: var(--ink); }
.footermeta { color: var(--sub); font-size: 10px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media(max-width: 950px) {
  .docs-layout { grid-template-columns: 1fr; gap: 32px; }
  .docs-sidebar { position: static; max-height: none; border-right: none; border-bottom: 1px solid var(--border); padding-bottom: 24px; margin-bottom: 16px; }
  .entry-grid, .workspace-grid { grid-template-columns: 1fr; }
  .workspace-actions { flex-direction: column; align-items: stretch; }
}

@media(max-width: 600px) {
  .social-login-group, .form-actions, .auth-form .token-input-group { grid-template-columns: 1fr; }
  .auth-form .token-input-group .button { width: 100%; }
  .header-actions .button { display: none; }
}

/* ============================================================================
   Pricing Section (Home) & Full Pricing Page (/pricing) + Expanded Docs Cards
   ============================================================================ */
.pricing-hero { padding: 56px 0 36px; border-bottom: 1px solid var(--border); }
.pricing-hero h1 { font-size: clamp(38px, 6vw, 76px); line-height: 0.96; letter-spacing: -0.06em; margin: 14px 0 18px; font-weight: 850; }
.pricing-hero .lead { margin-bottom: 24px; }
.pricing-highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.pricing-highlight-item { background: #ffffff; border: 1px solid var(--border); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; line-height: 1.45; color: var(--sub); }

.pricing-home-section { border-top: 1px solid var(--border); padding: 42px 0; }
.pricing-plans-section { padding: 44px 0; border-bottom: 1px solid var(--border); }
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 28px; align-items: stretch; }
.pricing-card { background: #ffffff; border: 1px solid var(--border); padding: 26px 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; transition: border-color 0.2s ease, transform 0.2s ease; }
.pricing-card:hover { border-color: var(--ink); }
.pricing-card-featured { border: 2px solid var(--accent); background: linear-gradient(180deg, #ffffff 0%, #f4faf7 100%); position: relative; }
.pricing-card-top { display: flex; flex-direction: column; gap: 12px; }
.pricing-card-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.pricing-plan-name { font-size: 24px; font-weight: 800; letter-spacing: -0.04em; margin: 0; color: var(--ink); }
.pricing-plan-audience { font-size: 13.5px; line-height: 1.45; color: var(--sub); margin: 0; min-height: 38px; }
.pricing-price-block { padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.pricing-price-main { display: flex; align-items: baseline; gap: 6px; }
.pricing-amount { font-size: 34px; font-weight: 850; letter-spacing: -0.05em; color: var(--ink); line-height: 1; }
.pricing-period { font: 600 13px ui-monospace, monospace; color: var(--sub); }
.pricing-price-alt { font: 600 12px ui-monospace, monospace; color: var(--accent-text); margin-top: 6px; }
.pricing-quota-box { background: #f8f8f4; border: 1px solid var(--border); padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; }
.pricing-quota-box strong { font-size: 15px; color: var(--ink); letter-spacing: -0.02em; }
.pricing-quota-label, .pricing-overage-note { font-size: 11.5px; color: var(--sub); font-family: ui-monospace, monospace; }
.pricing-feature-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; line-height: 1.45; color: #243133; }
.pricing-feature-list li { position: relative; padding-left: 18px; }
.pricing-feature-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent-text); font-weight: 800; }
.pricing-card-actions { margin-top: auto; padding-top: 8px; }
.pricing-card-actions .button { width: 100%; }
.pricing-home-footer { margin-top: 24px; padding: 20px 24px; background: #ffffff; border: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.pricing-free-reads-note { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); max-width: 720px; font-weight: 500; }

.pricing-rules-section, .pricing-comparison-section, .pricing-faq-section { padding: 44px 0; border-bottom: 1px solid var(--border); }
.pricing-section-lead { font-size: 17px; line-height: 1.5; color: var(--sub); max-width: 760px; margin: 0 0 24px; }
.pricing-rules-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 20px; }
.pricing-rule-card { background: #ffffff; border: 1px solid var(--border); padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; }
.pricing-rule-card h3 { font-size: 18px; font-weight: 750; letter-spacing: -0.03em; margin: 4px 0 0; color: var(--ink); }
.pricing-rule-card p { font-size: 13.5px; line-height: 1.5; color: var(--sub); margin: 0; }
.pricing-table-wrap { margin-top: 20px; }
.pricing-table th, .pricing-table td { padding: 12px 14px; }

.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; }
.faq-card { background: #ffffff; border: 1px solid var(--border); padding: 22px 24px; }
.faq-card h3 { font-size: 17px; font-weight: 750; letter-spacing: -0.03em; margin: 0 0 8px; color: var(--ink); line-height: 1.3; }
.faq-card p { font-size: 14px; line-height: 1.55; color: var(--sub); margin: 0; }

.docs-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 20px 0 24px; }
.docs-feature-card { background: #ffffff; border: 1px solid var(--border); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.docs-feature-card h3 { font-size: 17px; font-weight: 750; margin: 4px 0 0; color: var(--ink); }
.docs-feature-card p { font-size: 13.5px; line-height: 1.5; color: var(--sub); margin: 0; }

@media(max-width: 1100px) {
  .pricing-grid, .pricing-rules-grid { grid-template-columns: 1fr 1fr; }
  .pricing-highlights { grid-template-columns: 1fr; }
}

@media(max-width: 680px) {
  .pricing-grid, .pricing-rules-grid, .faq-grid { grid-template-columns: 1fr; }
  .pricing-home-footer { flex-direction: column; align-items: stretch; }
}

#admin-docs-filter, #admin-username, #admin-password {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--ink);
  font: 500 13.5px/1.4 var(--font-sans, system-ui, sans-serif);
  margin: 6px 0 14px;
}

.docs-toc-list a[aria-current="page"] {
  color: var(--accent-text);
  font-weight: 700;
  border-left: 2px solid var(--accent);
  padding-left: 8px;
}