/* Facet Modes uses the homepage's product language, rather than guide cards. */
body.modes-marketing {
 --bg:#000; --text:#f0ede8; --muted:rgba(240,237,232,.68); --border:rgba(255,255,255,.12); --violet:#c8a0e8;
 background:radial-gradient(ellipse at 75% 8%,rgba(148,95,224,.20),transparent 36%),#000;
 color:var(--text); line-height:1.6; -webkit-font-smoothing:antialiased;
}
.modes-marketing .wrap { width:min(1120px,calc(100% - 48px)); }
.modes-marketing main { padding:0 0 96px; }
.modes-marketing nav { padding:32px 0; }
.modes-marketing .modes-hero { display:grid; grid-template-columns:1fr 1.05fr; align-items:center; gap:56px; padding:64px 0 96px; }
.modes-marketing h1 { font-size:clamp(48px,5.7vw,80px); line-height:1.03; letter-spacing:-.03em; max-width:560px; margin:0; }
.modes-marketing h2 { font-size:clamp(30px,3.6vw,46px); line-height:1.12; margin:0; }
.modes-marketing:lang(zh-Hans) h1,.modes-marketing:lang(ja) h1,.modes-marketing:lang(ko) h1,
.modes-marketing:lang(zh-Hans) h2,.modes-marketing:lang(ja) h2,.modes-marketing:lang(ko) h2 { font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans","Apple SD Gothic Neo",sans-serif; font-weight:500; letter-spacing:-.04em; line-height:1.2; }
.modes-marketing .eyebrow { display:block; margin:0 0 20px; font-size:11px; }
.modes-marketing .sub { font-size:17px; line-height:1.75; margin:24px 0 0; max-width:520px; color:var(--muted); }
.modes-marketing .note { font-size:12px; line-height:1.65; color:var(--muted); }
.modes-marketing .modes-hero-copy .note { max-width:480px; }
.modes-marketing .actions { gap:12px; margin-top:28px; }
.modes-marketing .btn { min-height:46px; padding:12px 20px; border-radius:0; border-color:rgba(255,255,255,.18); font-size:13px; line-height:1.5; justify-content:center; text-align:center; }
.modes-marketing .btn.primary { color:#fff; background:rgba(142,108,255,.18); border-color:rgba(200,160,232,.45); }
.modes-marketing .btn:hover { background:rgba(142,108,255,.28); border-color:var(--violet); }
.modes-marketing .btn:focus-visible,.modes-marketing summary:focus-visible,.modes-marketing .mode-strip button:focus-visible { outline:2px solid var(--violet); outline-offset:5px; }
.modes-marketing .modes-hero-media { margin:0; min-width:0; }
.modes-marketing .mode-strip { border:1px solid var(--border); border-bottom:0; border-radius:12px 12px 0 0; padding:6px; gap:4px; background:rgba(255,255,255,.025); }
.modes-marketing .mode-strip button { font:inherit; min-width:0; padding:10px 4px; background:none; border:0; color:var(--muted); cursor:pointer; font-size:10px; letter-spacing:.01em; }
.modes-marketing .mode-strip button[aria-pressed=true] { color:#f0ede8; background:rgba(142,108,255,.18); border-radius:6px; }
.modes-marketing .modes-video-shell { border-color:var(--border); border-radius:0 0 12px 12px; box-shadow:0 24px 70px rgba(0,0,0,.4); }
.modes-marketing .video-caption { font-size:11px; line-height:1.6; color:rgba(240,237,232,.55); margin-top:14px; }
.modes-marketing .section { padding-top:72px; border-top:1px solid var(--border); margin-top:0; padding-bottom:72px; }
.modes-marketing .section-intro { display:grid; grid-template-columns:1fr 1fr; gap:16px 56px; align-items:start; margin-bottom:32px; }
.modes-marketing .section-intro .eyebrow { grid-column:1/-1; margin-bottom:0; }
.modes-marketing .section-intro p { font-size:16px; line-height:1.75; color:var(--muted); }
.modes-marketing .launch-workflow { display:grid; grid-template-columns:1fr 1fr; gap:0 56px; }
.modes-marketing .workflow-row { display:grid; grid-template-columns:28px 1fr; gap:12px; border-top:1px solid var(--border); padding:24px 0; }
.modes-marketing .workflow-index { color:var(--violet); padding-top:3px; font-size:11px; }
.modes-marketing h3 { font-size:16px; font-weight:500; line-height:1.5; margin:0 0 10px; }
.modes-marketing .workflow-row p { font-size:14px; line-height:1.8; color:var(--muted); }
.modes-marketing .edition-boundary { display:grid; grid-template-columns:1fr 2fr; gap:32px; padding:24px 0 0; border-top:1px solid var(--border); margin-top:12px; }
.modes-marketing .edition-boundary p { font-size:13px; line-height:1.8; color:var(--muted); }
.modes-marketing .project-resource-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:48px; }
.modes-marketing .resource-workflow { border-top:1px solid var(--border); }
.modes-marketing .resource-point { border-bottom:1px solid var(--border); padding:18px 0; }
.modes-marketing .resource-point h3 { margin:0 0 6px; }
.modes-marketing .resource-point p { color:var(--muted); font-size:13px; line-height:1.75; margin:0; }
.modes-marketing .resource-illustration { margin:0; padding:18px; border:1px solid var(--border); background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); box-shadow:0 24px 64px rgba(0,0,0,.28); }
.modes-marketing .resource-illustration figcaption { color:var(--muted); font-size:10px; margin-bottom:16px; }
.modes-marketing .resource-mode-heading { display:flex; gap:10px; align-items:center; padding-bottom:14px; border-bottom:1px solid var(--border); font-size:13px; }
.modes-marketing .resource-mode-dot { width:9px; height:9px; border-radius:50%; background:#9d7aff; box-shadow:0 0 18px rgba(157,122,255,.6); }
.modes-marketing .resource-columns { display:grid; grid-template-columns:.8fr 1.2fr; gap:16px; padding:18px 0; }
.modes-marketing .resource-column { display:flex; flex-direction:column; gap:8px; min-width:0; }
.modes-marketing .resource-column h3 { color:var(--muted); font:10px/1.5 'JetBrains Mono',monospace; margin:0 0 2px; }
.modes-marketing .resource-chip { display:flex; align-items:center; gap:9px; min-width:0; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.035); padding:8px 9px; color:rgba(240,237,232,.86); font-size:11px; line-height:1.4; overflow-wrap:anywhere; }
.modes-marketing .resource-glyph { position:relative; display:inline-block; flex:0 0 13px; width:13px; height:13px; }
.modes-marketing .app-glyph { border:1px solid rgba(200,160,232,.8); border-radius:4px; background:linear-gradient(135deg,rgba(157,122,255,.5),rgba(200,160,232,.12)); }
.modes-marketing .web-glyph { border:1px solid rgba(125,198,208,.8); border-radius:50%; }
.modes-marketing .web-glyph::before,.modes-marketing .web-glyph::after { content:''; position:absolute; inset:2px 4px; border:1px solid rgba(125,198,208,.65); border-radius:50%; }
.modes-marketing .file-glyph { border:1px solid rgba(240,237,232,.65); border-radius:2px; }
.modes-marketing .folder-glyph { height:10px; margin-top:3px; border:1px solid rgba(240,197,126,.8); border-radius:2px; background:rgba(240,197,126,.12); }
.modes-marketing .folder-glyph::before { content:''; position:absolute; left:1px; top:-4px; width:6px; height:3px; border:1px solid rgba(240,197,126,.8); border-bottom:0; border-radius:2px 2px 0 0; }
.modes-marketing .resource-start-row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px 14px; border-top:1px solid var(--border); padding-top:14px; }
.modes-marketing .resource-start-row strong { font-size:12px; font-weight:500; }
.modes-marketing .resource-start-row span { color:var(--muted); font-size:9px; }
.modes-marketing .use-case-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px; }
.modes-marketing .use-case-list p { font-size:14px; line-height:1.75; color:var(--muted); }
.modes-marketing .modes-faq { display:grid; grid-template-columns:.8fr 1.2fr; gap:64px; }
.modes-marketing .modes-faq .section-intro { display:block; margin:0; }
.modes-marketing .faq-list { border-top:1px solid var(--border); }
.modes-marketing details { border:0; border-bottom:1px solid var(--border); background:none; border-radius:0; padding:0; }
.modes-marketing summary { cursor:pointer; font-size:15px; font-weight:500; line-height:1.6; padding:20px 28px 20px 0; list-style:none; position:relative; }
.modes-marketing summary::-webkit-details-marker { display:none; }
.modes-marketing summary::after { content:'+'; position:absolute; right:0; top:18px; color:var(--violet); font-size:20px; font-weight:300; }
.modes-marketing details[open] summary::after { content:'−'; }
.modes-marketing details p { font-size:14px; line-height:1.8; color:var(--muted); padding:0 28px 22px 0; max-width:620px; }
.modes-marketing .modes-bottom-cta { display:grid; grid-template-columns:1fr 1fr; column-gap:56px; align-items:start; }
.modes-marketing .modes-bottom-cta p { color:var(--muted); font-size:15px; }
.modes-marketing .modes-bottom-cta .note { grid-column:2; }
.modes-marketing .modes-source-note { padding-top:24px; padding-bottom:0; color:var(--muted); }
.modes-marketing .modes-source-note h2 { font:11px/1.6 'JetBrains Mono',monospace; color:var(--muted); margin-bottom:12px; }
.modes-marketing .modes-source-note .panel { border:0; border-radius:0; background:none; padding:0; font-size:11px; line-height:1.6; }
.modes-marketing .modes-source-note ul { display:flex; flex-wrap:wrap; gap:8px 24px; list-style:none; margin:12px 0 0; padding:0; }
.modes-marketing .modes-source-note li { margin:0; }
.modes-marketing footer { border-top:1px solid var(--border); }
@media(max-width:900px){
 .modes-marketing .modes-hero { gap:32px; grid-template-columns:1fr; padding-top:40px; }
 .modes-marketing .modes-hero-copy { max-width:680px; }
 .modes-marketing .modes-hero-media { max-width:720px; }
 .modes-marketing .use-case-list { grid-template-columns:1fr 1fr; }
 .modes-marketing .modes-faq { gap:32px; grid-template-columns:1fr; }
}
@media(max-width:600px){
 .modes-marketing .wrap { width:calc(100% - 40px); }
 .modes-marketing nav { gap:16px; padding:24px 0; align-items:flex-start; }
 .modes-marketing .nav-links { gap:12px; font-size:10px; justify-content:flex-end; }
 .modes-marketing .modes-hero { padding:32px 0 48px; }
 .modes-marketing h1 { font-size:42px; }
 .modes-marketing h2 { font-size:28px; }
 .modes-marketing .sub { font-size:15px; line-height:1.7; }
 .modes-marketing .section { padding:44px 0; }
 .modes-marketing .section-intro,.modes-marketing .launch-workflow,.modes-marketing .edition-boundary,.modes-marketing .modes-bottom-cta { grid-template-columns:1fr; gap:16px; }
 .modes-marketing .project-resource-grid { grid-template-columns:1fr; gap:24px; }
 .modes-marketing .resource-columns { grid-template-columns:1fr 1.2fr; gap:10px; }
 .modes-marketing .edition-boundary { padding-top:24px; gap:4px; }
 .modes-marketing .use-case-list { gap:24px 20px; }
 .modes-marketing .modes-bottom-cta .note { grid-column:1; }
 .modes-marketing .actions { margin-top:20px; }
 .modes-marketing .mode-strip button { font-size:9px; }
 .modes-marketing main { padding-bottom:48px; }
}
@media(prefers-reduced-motion:reduce){ .modes-marketing *, .modes-marketing { scroll-behavior:auto; transition:none; } }