/* Reversible presentation layer. All application routes and controls stay intact. */
html[data-design="studio"] { --studio-blue:#234be5; --studio-ink:#172337; --studio-muted:#536173; --studio-paper:#f8f9f6; --studio-line:#dce1e8; }
[data-design="studio"] .marketing-page { background:var(--studio-paper); color:var(--studio-ink); }
[data-design="studio"] .marketing-page>header { top:0; padding:0; background:rgba(248,249,246,.97); border-bottom:1px solid var(--studio-line); }
[data-design="studio"] .marketing-page>header>div { max-width:1320px; height:82px; padding-inline:32px; border:0; border-radius:0; box-shadow:none; background:transparent; --tw-ring-shadow:0 0 transparent; }
[data-design="studio"] .marketing-page>header img { height:30px; }
[data-design="studio"] .marketing-page>footer { background:var(--studio-paper); }
[data-design="studio"] .marketing-page>footer>.design-switch { max-width:1260px; margin:24px auto 0; padding-inline:24px; }
.studio-wrap { max-width:1260px; margin-inline:auto; padding-inline:32px; }
.studio-landing { overflow:clip; }
.studio-landing section[id] { scroll-margin-top:105px; }
.studio-hero { padding-top:158px; padding-bottom:76px; }
.studio-hero-copy { max-width:890px; }
.studio-eyebrow { display:flex; align-items:center; gap:10px; font-size:11px; font-weight:750; line-height:1.6; letter-spacing:.13em; text-transform:uppercase; color:var(--studio-muted); }
.studio-dot { width:7px; height:7px; background:var(--studio-blue); border-radius:50%; }
.studio-hero h1 { max-width:990px; margin-top:25px; font-family:var(--font-headline); font-size:clamp(44px,6.2vw,82px); line-height:1.08; font-weight:700; letter-spacing:-.06em; }
.studio-hero h1>span { display:block; color:var(--studio-blue); }
.studio-lead { max-width:680px; margin-top:28px; font-size:18px; line-height:1.8; color:var(--studio-muted); }
.studio-actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:32px; }
.studio-button { display:inline-flex; min-height:52px; align-items:center; justify-content:center; gap:28px; padding:14px 22px; border-radius:8px; font-size:14px; font-weight:700; text-decoration:none; transition:background .15s,transform .15s; }
.studio-button-primary { background:var(--studio-blue); color:#fff; }
.studio-button-primary:hover { background:#1939b5; transform:translateY(-1px); }
.studio-button-light { background:#fff; color:var(--studio-ink); }
.studio-text-link { display:inline-flex; align-items:center; min-height:44px; gap:20px; font-size:14px; font-weight:650; text-decoration:underline; text-underline-offset:5px; }
.studio-landing a:focus-visible,.studio-landing summary:focus-visible { outline:3px solid var(--studio-blue); outline-offset:5px; }
.studio-hero-note { margin-top:22px; font-size:12px; color:var(--studio-muted); line-height:1.8; }
.studio-product { margin-top:62px; background:#fff; border:1px solid #cdd5e0; border-radius:16px; box-shadow:0 22px 60px #1723370c; overflow:hidden; }
.studio-product-top { display:flex; align-items:center; gap:12px; padding:16px 24px; border-bottom:1px solid var(--studio-line); font-size:12px; }
.studio-product-mark { display:grid; place-items:center; width:28px; height:28px; background:var(--studio-blue); color:#fff; border-radius:7px; font-size:20px; font-weight:800; }
.studio-example { margin-left:auto; color:var(--studio-muted); font-size:11px; }
.studio-product-heading { padding:28px 28px 22px; }
.studio-product-heading h2 { margin-top:8px; font-size:24px; line-height:1.4; letter-spacing:-.03em; font-weight:700; }
.studio-board { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; padding:0 28px 24px; }
.studio-column { padding:14px; background:#f3f5f8; border-radius:10px; }
.studio-status { display:flex; align-items:center; gap:7px; margin-bottom:14px; font-size:11px; font-weight:700; }
.studio-status>span { width:6px; height:6px; border-radius:50%; background:#627289; }
.studio-status-review>span { background:#a86013; }.studio-status-approved>span { background:#168161; }
.studio-post { background:#fff; border:1px solid #dce1e8; border-radius:8px; overflow:hidden; }
.studio-post>img { display:block; width:100%; height:150px; object-fit:cover; }
.studio-post-copy { padding:16px; }.studio-post-platform { font-size:10px; font-weight:650; color:var(--studio-muted); }
.studio-post h3 { margin-top:7px; font-size:16px; font-weight:700; }.studio-post p { margin-top:8px; color:var(--studio-muted); font-size:11px; line-height:1.7; }
.studio-post-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:16px; color:var(--studio-muted); }
.studio-avatar { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#e4eafb; color:#253d78; font-size:10px; font-weight:700; flex-shrink:0; }
.studio-comment { display:flex; align-items:center; gap:12px; margin:0 28px 24px; padding:14px 18px; background:#edf2ff; border-radius:8px; }
.studio-comment>div>span { font-size:10px; color:var(--studio-muted); }.studio-comment p { font-size:12px; font-weight:650; margin-top:3px; }.studio-comment>.material-symbols-outlined { margin-left:auto; color:#234be5; }
.studio-audiences { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; padding-block:26px; border-top:1px solid var(--studio-line); border-bottom:1px solid var(--studio-line); font-size:14px; font-weight:650; color:var(--studio-muted); }
.studio-audiences [aria-hidden] { color:#7d8c9c; font-size:20px; }
.studio-section { padding-block:96px; }.studio-section h2,.studio-advantage h2 { max-width:790px; margin-top:16px; font-size:clamp(30px,3.3vw,44px); line-height:1.2; letter-spacing:-.045em; font-weight:700; }
.studio-pain { display:grid; grid-template-columns:1.1fr 1fr; gap:90px; }.studio-prose { padding-top:30px; font-size:16px; color:var(--studio-muted); line-height:1.9; }.studio-prose p+p { margin-top:20px; }.studio-prose .studio-emphasis { color:var(--studio-ink); }
.studio-features-section { background:#edf1f8; }.studio-feature-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:32px; margin-top:52px; }.studio-feature-icon { display:grid!important; place-items:center; width:46px; height:46px; border:1px solid #cbd4e3; background:#f8faff; color:var(--studio-blue); border-radius:12px; }.studio-feature h3 { margin-top:25px; font-size:19px; line-height:1.4; letter-spacing:-.025em; font-weight:700; }.studio-feature p,.studio-steps p { margin-top:14px; font-size:14px; line-height:1.85; color:var(--studio-muted); }
.studio-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:44px; margin-top:48px; }.studio-steps article { border-top:1px solid #b9c4d5; padding-top:22px; }.studio-step-number { color:var(--studio-blue); font-size:13px; font-weight:700; }.studio-steps h3 { margin-top:22px; font-size:22px; font-weight:650; letter-spacing:-.03em; }
.studio-advantage { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; padding-block:48px; background:#e9edf1; border-radius:16px; }.studio-advantage p:not(.studio-eyebrow) { margin-top:24px; font-size:15px; line-height:1.85; color:var(--studio-muted); }.studio-advantage .studio-text-link { margin-top:18px; }.studio-advantage img { width:100%; height:390px; object-fit:cover; border-radius:10px; }
.studio-section-intro { margin-top:20px; max-width:650px; color:var(--studio-muted); font-size:16px; line-height:1.8; }.studio-pricing-notice { margin-top:24px; max-width:860px; border-left:3px solid #889bcc; padding-left:16px; color:var(--studio-muted); font-size:13px; line-height:1.8; }
.studio-pricing-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-top:38px; }.studio-plan { display:flex; flex-direction:column; padding:28px; background:#fff; border:1px solid var(--studio-line); border-radius:12px; }.studio-plan h3 { margin-top:16px; font-size:26px; font-weight:700; letter-spacing:-.04em; }.studio-plan>p:not(.studio-price):not(.studio-plan-unavailable) { margin-top:12px; color:var(--studio-muted); font-size:13px; line-height:1.8; }.studio-price { margin-top:26px; font-size:32px; font-weight:750; letter-spacing:-.05em; }.studio-price>span { font-size:12px; font-weight:500; letter-spacing:0; }.studio-plan-limits { display:grid; gap:12px; padding-top:24px; margin-top:24px; margin-bottom:30px; border-top:1px solid var(--studio-line); font-size:14px; }.studio-plan-limits strong { min-width:30px; display:inline-block; }.studio-plan .studio-button,.studio-plan-unavailable { margin-top:auto; }.studio-plan-unavailable { padding:13px 0; font-size:12px; color:var(--studio-muted); border-top:1px solid var(--studio-line); }
.studio-faq { display:grid; grid-template-columns:1fr 1.4fr; gap:80px; padding-top:0; }.studio-faq h2 { max-width:300px; }.studio-faq details { border-bottom:1px solid #cbd3df; }.studio-faq summary { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 0; cursor:pointer; font-size:15px; font-weight:650; list-style:none; }.studio-faq summary::-webkit-details-marker { display:none; }.studio-faq summary>span { font-size:22px; font-weight:400; }.studio-faq details[open] summary>span { transform:rotate(45deg); }.studio-faq details>p { padding-bottom:24px; color:var(--studio-muted); font-size:14px; line-height:1.9; }
.studio-closing { background:#173aa8; color:#fff; padding-block:80px; }.studio-closing .studio-eyebrow { color:#dce5ff; }.studio-closing h2 { max-width:760px; margin-top:20px; font-size:clamp(32px,4vw,52px); line-height:1.15; letter-spacing:-.045em; font-weight:700; }.studio-closing p:not(.studio-eyebrow) { max-width:580px; margin-top:24px; color:#e0e8ff; line-height:1.8; }.studio-closing a:focus-visible { outline-color:white; }
/* Admin: quieter surfaces, a distinct sidebar and clearer table hierarchy. */
[data-design="studio"] .app-shell #app-sidebar { border-right:1px solid color-mix(in srgb,var(--color-outline-variant) 45%,transparent); background:var(--color-surface-container-lowest); }
[data-design="studio"] .app-shell #app-sidebar>div:first-child { padding-block:8px; margin-bottom:28px; }
[data-design="studio"] .app-shell #app-sidebar>div:first-child>a { background:#fff; border-radius:8px; padding:8px; }
[data-design="studio"] .app-shell #app-sidebar nav>a { min-height:46px; margin-bottom:4px; border-radius:9px; padding-inline:14px; }
[data-design="studio"] .app-shell #app-sidebar .nav-active { background:var(--color-primary-fixed); color:var(--color-on-primary-fixed); box-shadow:inset 3px 0 0 var(--color-primary); }
[data-design="studio"] .app-shell .glass-header { background:var(--color-surface-container-lowest); backdrop-filter:none; border-bottom:1px solid color-mix(in srgb,var(--color-outline-variant) 40%,transparent); box-shadow:none; }
[data-design="studio"] .app-shell #main-content { background:var(--color-surface); }
[data-design="studio"] .app-shell #main-content h1,[data-design="studio"] .app-shell #main-content h2 { letter-spacing:-.035em; }
[data-design="studio"] .app-shell #main-content .rounded-2xl { border-radius:14px; }
[data-design="studio"] .app-shell #main-content table { border-collapse:separate; border-spacing:0; }
[data-design="studio"] .app-shell #main-content thead { background:var(--color-surface-container-low); }
[data-design="studio"] .app-shell #main-content th { font-size:11px; letter-spacing:.045em; padding-top:15px; padding-bottom:15px; }
[data-design="studio"] .app-shell #main-content td { padding-top:17px; padding-bottom:17px; }
[data-design="studio"] .app-shell #app-sidebar .design-switch { font-size:10px; gap:4px; padding:12px 2px 0; }
[data-design="studio"] .app-shell #app-sidebar .design-switch>span { flex-basis:100%; padding-bottom:4px; color:var(--color-on-surface-variant); }
@media(min-width:1024px) { [data-design="studio"] .app-shell #main-content>div:first-child { padding:36px; } }
@media(max-width:1023px) { .studio-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.studio-pain { gap:40px; }.studio-advantage { margin-inline:24px; gap:28px; }.studio-faq { gap:32px; }.studio-pricing-grid { gap:12px; }.studio-plan { padding:22px; } }
@media(max-width:640px) { [data-design="studio"] .marketing-page>header>div { height:72px; padding-inline:16px; }[data-design="studio"] .marketing-page>header img { height:26px; }.studio-wrap { padding-inline:22px; }.studio-hero { padding-top:120px; padding-bottom:40px; }.studio-hero h1 { font-size:43px; }.studio-eyebrow { font-size:10px; letter-spacing:.09em; }.studio-lead { font-size:16px; line-height:1.8; }.studio-actions { gap:12px; align-items:stretch; flex-direction:column; }.studio-actions .studio-text-link { justify-content:center; }.studio-hero-note { font-size:11px; }.studio-product { margin-top:34px; border-radius:10px; }.studio-product-top { padding:12px; flex-wrap:wrap; gap:8px; }.studio-example { font-size:9px; }.studio-product-heading { padding:20px 16px; }.studio-product-heading h2 { font-size:20px; }.studio-board { display:flex; overflow-x:auto; scroll-snap-type:x proximity; padding:0 16px 16px; gap:12px; }.studio-column { flex:0 0 78%; scroll-snap-align:center; }.studio-post>img { height:130px; }.studio-comment { margin:0 16px 16px; padding:12px; }.studio-comment p { font-size:11px; }.studio-comment>.material-symbols-outlined { display:none; }.studio-audiences { justify-content:center; gap:16px; font-size:11px; }.studio-audiences [aria-hidden] { display:none; }.studio-section { padding-block:56px; }.studio-pain,.studio-feature-grid,.studio-steps,.studio-advantage,.studio-pricing-grid,.studio-faq { grid-template-columns:1fr; }.studio-pain { gap:18px; }.studio-prose { padding-top:0; font-size:15px; }.studio-feature-grid { gap:32px; margin-top:32px; }.studio-feature h3 { margin-top:16px; }.studio-steps { gap:26px; margin-top:30px; }.studio-steps h3 { margin-top:10px; }.studio-advantage { margin-inline:16px; padding-block:28px; gap:24px; }.studio-advantage img { height:230px; }.studio-pricing-grid { gap:16px; }.studio-plan { padding:26px; }.studio-faq { gap:16px; padding-top:0; }.studio-faq h2 { max-width:none; }.studio-closing { padding-block:56px; }.studio-closing .studio-actions { align-items:stretch; }.studio-landing section[id] { scroll-margin-top:90px; } }
@media(prefers-reduced-motion:reduce) { .studio-landing * { transition:none!important; scroll-behavior:auto!important; } }