/* Wispr module structure, expressed with ToneBird typography and native social UI. */
body.social-usecase-page { --usecase-gap:128px; }
:root body.social-usecase-page main .button { min-height:56px; padding:15px 25px; border-radius:999px; font-size:16px; line-height:1.35; text-align:center; }
.social-secondary { --button-fill:#fff; --button-hover:#f3f7f0; --button-pressed:#eaf1e5; --button-edge:#cdd9c9; --button-ink:#315541; }
.social-usecase-page main .actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.social-section-heading { max-width:800px; margin:0 auto 64px; text-align:center; }
.social-section-heading h2,.social-feature-copy h2,.social-decisions h2,.social-related h2 { margin:0; font-size:46px; line-height:1.12; letter-spacing:-.045em; text-wrap:balance; }
.social-section-heading > p { max-width:620px; margin:22px auto 0; color:var(--muted); font-size:18px; line-height:1.6; text-wrap:pretty; }
.social-section-heading > .actions { justify-content:center; margin-top:28px; }
.social-usecase-page main > .social-hero { padding-top:48px; }
.social-hero-copy { display:grid; justify-items:center; gap:28px; text-align:center; }
.social-hero-intro { display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; width:100%; max-width:760px; gap:24px; }
.social-category { margin:0 0 18px; color:var(--muted); font-size:14px; line-height:1.4; font-weight:600; }
.social-hero-copy h1 { max-width:1100px; margin:0 auto; font-size:64px; line-height:1.06; letter-spacing:-.05em; text-wrap:balance; }
.social-hero-copy .lead { margin:0; color:var(--ink); font-size:18px; line-height:1.55; text-wrap:pretty; }
.social-hero-copy .actions { justify-content:center; margin-top:0; }
.social-gallery { margin-top:0; scroll-margin-top:110px; }
.social-film { --native-ink:#e7e9ea; --native-muted:#9ba4aa; --native-line:#333639; --native-accent:#1d9bf0; position:relative; isolation:isolate; display:grid; place-items:center; overflow:hidden; height:520px; margin-top:40px; border-radius:28px; background:radial-gradient(ellipse at 0 100%,#47667b70,transparent 65%),radial-gradient(ellipse at 100% 0,#b1c5c332,transparent 72%),#161e26; }
.social-film[data-platform=reddit] { --native-ink:#1a282d; --native-muted:#576f76; --native-line:#dbe3e7; --native-accent:#0b449b; background:radial-gradient(ellipse at 100% 100%,#f0d7ba,transparent 75%),#e4ecee; }
.social-film[data-platform=linkedin] { --native-ink:#191919; --native-muted:#666; --native-line:#d9d9d7; --native-accent:#0a66c2; background:radial-gradient(ellipse at 0 100%,#c0d8e4,transparent 75%),#e8e9e4; }
.social-film-peek { position:absolute; top:42px; width:290px; padding:20px; border:1px solid var(--native-line); border-radius:18px; background:#fff; color:var(--native-ink); box-shadow:0 14px 36px #172e4320; opacity:.8; }
.social-film-peek:first-child { left:28px; }
.social-film-peek:last-child { right:28px; top:110px; }
[data-platform=x] .social-film-peek { background:#101317; }
.social-film-peek .social-post { padding:0; }
.social-film-peek .social-post-text { font-size:14px; }
.social-film-peek .social-post-title { font-size:20px; }
.social-film-peek .social-letter-study { padding:18px; }
.social-film-peek .social-letter-study > span:last-child { font-size:38px; }
.social-film-modal { position:relative; z-index:2; width:min(620px,calc(100% - 48px)); border:1px solid var(--native-line); border-radius:20px; background:#fff; color:var(--native-ink); box-shadow:0 18px 60px #0b183047; }
[data-platform=x] .social-film-modal { background:#080a0b; }
.social-film-bar { display:flex; align-items:center; gap:12px; padding:15px 22px; border-bottom:1px solid var(--native-line); font:500 15px/1.3 Arial,sans-serif; }
.social-film-bar > span { margin-left:auto; color:var(--native-muted); font-size:24px; }
.social-film-modal > .social-post { padding:18px 24px 0; }
.social-film-modal .social-post-text { font-size:15px; line-height:1.5; margin:14px 0 0; }
.social-film-modal .social-post-title { font-size:21px; margin:14px 0 0; }
.social-film-composer { position:relative; margin:20px 24px 0; padding-top:110px; }
.social-passive-composer { min-width:0; }
.social-passive-input { display:block; width:100%; min-height:58px; max-height:96px; margin:0; overflow:auto; color:var(--native-ink); font:15px/1.5 Arial,sans-serif; }
.social-passive-input:empty::before { content:'Write a reply'; color:var(--native-muted); }
.social-film .social-host { min-height:82px; }
.social-film-suggestion { position:absolute; z-index:3; right:0; bottom:calc(100% - 113px); width:100%; }
.social-film-reply-unit { position:absolute; top:0; right:0; width:570px; padding:30px 10px 0 0; transform:scale(var(--film-scale,.85)); transform-origin:top right; }
.social-film-reply-unit .landing-close { top:0; right:0; }
.social-film-reply-unit .tb-reply { font-size:18px; }
.social-film .tb-host-field { border-color:var(--native-line); }
.social-values > .social-section-heading { margin-bottom:64px; }
.social-feature-row { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:center; gap:80px; }
.social-feature-copy h2 { font-size:40px; }
.social-feature-copy > p { margin:22px 0 0; color:var(--muted); font-size:18px; line-height:1.6; }
.social-feature-copy > .actions { margin-top:28px; }
.social-context-art { display:grid; align-items:center; padding:36px; border-radius:28px; background:#e8eef0; }
.social-context-art[data-platform=x] { --native-ink:#e7e9ea; --native-muted:#9ba4aa; background:#18232d; }
.social-context-art[data-platform=reddit] { background:#e7edef; }
.social-context-art[data-platform=linkedin] { background:#e9e9e3; }
.social-context-post { padding:24px; border:1px solid #ffffff50; border-radius:18px; background:#fff; color:#23302d; box-shadow:0 12px 28px #22343a12; }
[data-platform=x] .social-context-post { background:#080a0b; color:#e7e9ea; border-color:#333639; }
.social-context-post > header { display:flex; align-items:center; gap:10px; font-size:14px; }
.social-context-post > header > .social-platform-logo { width:24px; height:24px; margin-right:auto; }
.social-context-post blockquote { margin:22px 0; padding:0; border:0; }
.social-context-post blockquote > p { margin:0; color:inherit; font-size:23px; line-height:1.5; letter-spacing:-.025em; }
.social-context-comment { display:flex; align-items:start; gap:12px; padding-top:20px; border-top:1px solid #85948d50; }
.social-context-comment > p { margin:0; color:inherit; font-size:16px; line-height:1.55; }
.social-feature-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 36px; margin-top:88px; }
.social-capability { display:grid; grid-row:span 4; grid-template-rows:subgrid; min-width:0; text-align:center; }
.social-capability > h3 { max-width:15em; margin:0 auto; font-size:36px; line-height:1.15; letter-spacing:-.04em; text-wrap:balance; }
.social-capability > p { max-width:520px; margin:0 auto; color:var(--muted); font-size:17px; line-height:1.6; }
.social-capability > .actions { justify-content:center; margin-top:4px; }
.social-style-art,.social-language-art { display:flex; flex-direction:column; justify-content:center; gap:28px; min-width:0; padding:36px; border-radius:28px; background:radial-gradient(ellipse at 100% 0,#e4d8eb,transparent 80%),#d7e6dd; text-align:left; }
.social-style-art .usecase-style-window { padding:26px; }
.social-style-art .usecase-style-window > header { font-size:27px; }
.social-style-art .usecase-style-tabs { gap:14px; font-size:14px; }
.social-style-art .usecase-style-rules h4 { font-size:16px; }
.social-style-art .usecase-style-rules p { font-size:16px; }
.social-style-result .tb-reply,.social-language-art > .tb-reply { font-size:17px; }
.social-language-art { background:radial-gradient(ellipse at 0 100%,#c4d8e5,transparent 80%),#e9e9dd; }
.social-language-post { padding:24px; border:1px solid #ffffffde; border-radius:18px; background:#ffffffd9; color:#334339; }
.social-language-post > header { display:flex; align-items:center; gap:10px; font-size:14px; }
.social-language-post .social-platform-logo { margin-left:auto; width:24px; height:24px; }
.social-language-post > p { margin:20px 0 0; color:inherit; font-size:17px; line-height:1.6; }
.social-language-art[data-platform=x] .social-platform-logo { filter:none; }
.social-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 28px; margin:0; padding:0; list-style:none; }
.social-steps > li { display:grid; grid-row:span 3; grid-template-rows:subgrid; gap:20px; min-width:0; }
.social-steps h3 { margin:0; font-size:25px; line-height:1.25; letter-spacing:-.025em; }
.social-step-number { color:#7c917b; font-variant-numeric:tabular-nums; }
.social-steps > li > p { margin:0; color:var(--muted); font-size:16px; line-height:1.65; }
.social-step-art { --native-ink:#263330; --native-muted:#75837c; --native-line:#cddbd2; --native-accent:#315541; display:flex; flex-direction:column; justify-content:flex-start; gap:18px; padding:22px; border-radius:24px; background:#e4ece8; }
.social-step-art[data-platform=x] { --native-ink:#e7e9ea; --native-muted:#9ba4aa; --native-line:#333639; --native-accent:#1d9bf0; background:#15202a; }
.social-step-art[data-platform=reddit] { --native-accent:#0b449b; background:#e8edef; }
.social-step-art[data-platform=linkedin] { --native-accent:#0a66c2; background:#e9eae5; }
.social-step-app { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--native-muted); }
.social-step-app .social-platform-logo { width:22px; height:22px; }
.social-step-native { padding:18px; border:1px solid var(--native-line); border-radius:15px; background:#fff; }
[data-platform=x] .social-step-native { background:#080a0b; }
.social-step-source > header { display:flex; align-items:center; gap:8px; color:var(--native-ink); font-size:12px; }
.social-step-source .social-avatar { width:29px; height:29px; }
.social-step-source > p { margin:14px 0 18px; color:var(--native-ink); font-size:14px; line-height:1.55; }
.social-step-art .social-post-media { margin-bottom:18px; border-radius:8px; }
.social-step-art .tb-host-field { min-height:82px; padding:10px 38px 10px 12px; border:1px solid var(--native-line); background:transparent; box-shadow:none; }
.social-step-art .social-compose-row > .social-avatar { display:none; }
.social-step-art .social-passive-input { font-size:13px; line-height:1.55; }
.social-step-art .social-compose-tools { padding:10px 0 0; }
.social-step-art .social-compose-tools svg { width:15px; height:15px; }
.social-step-art .social-post-action { padding:7px 12px; font-size:11px; }
.social-step-result .tb-reply { font-size:15px; }
.social-decisions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 36px; }
.social-decisions > article { display:grid; grid-row:span 4; grid-template-rows:subgrid; min-width:0; text-align:center; }
.social-decisions h2 { font-size:36px; }
.social-decisions article > p { max-width:520px; margin:0 auto; color:var(--muted); font-size:17px; line-height:1.6; }
.social-decisions .actions { justify-content:center; }
.social-desktop-art,.social-privacy-art { display:grid; place-items:center; padding:32px; border-radius:28px; background:radial-gradient(ellipse at 100% 0,#e3dbc9,transparent 80%),#dce8e2; }
.social-desktop-screen { position:relative; width:100%; padding:0 20px 24px; border:1px solid #ffffffde; border-radius:16px; background:#ffffffd9; box-shadow:0 10px 30px #294c3818; }
.social-desktop-screen::after { content:''; position:absolute; top:100%; left:42%; width:16%; height:20px; background:#a8b9b0; clip-path:polygon(15% 0,85% 0,100% 100%,0 100%); }
.social-desktop-toolbar { display:flex; align-items:center; gap:5px; margin:0 -20px; padding:11px 14px; border-bottom:1px solid #dce3dc; }
.social-desktop-toolbar i { width:7px; height:7px; border-radius:50%; background:#a7b8a7; }
.social-desktop-apps { display:flex; justify-content:center; gap:28px; margin:26px 0; }
.social-desktop-reply .tb-reply { font-size:16px; }
.social-privacy-art { background:radial-gradient(ellipse at 0 100%,#c5dbd2,transparent 80%),#ebeee8; }
.social-faq .social-section-heading { margin:0; text-align:left; }
.social-faq .social-section-heading h2 { font-size:38px; }
.social-related-heading { display:flex; align-items:center; justify-content:space-between; gap:28px; margin-bottom:40px; }
.social-related-heading h2 { font-size:36px; }
.social-related-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 36px; }
.social-related-grid > article { display:grid; grid-row:span 4; grid-template-rows:subgrid; min-width:0; }
.social-related-art { display:flex; flex-direction:column; justify-content:center; gap:24px; padding:32px; border-radius:24px; background:#e7ecea; }
.social-related-art[data-platform=x] { background:#16212a; color:#e7e9ea; }
.social-related-art[data-platform=reddit] { background:#e8edef; color:#253339; }
.social-related-art[data-platform=linkedin] { background:#e9e9e3; color:#243a4a; }
.social-related-art blockquote { margin:0; padding:0; border:0; color:inherit; font-size:24px; line-height:1.5; letter-spacing:-.02em; }
.social-related-grid h3 { margin:0; font-size:28px; line-height:1.2; letter-spacing:-.03em; }
.social-related-grid article > p { margin:0; color:var(--muted); font-size:17px; line-height:1.6; }
.social-related-grid .actions { justify-content:flex-start; }
.social-capability > .actions,.social-decisions .actions,.social-related-grid .actions { align-self:start; }
.usecase-page main > .social-closing { padding:64px 40px; border-radius:32px; background:radial-gradient(ellipse at 0 100%,#bad3c5,transparent 75%),radial-gradient(ellipse at 100% 0,#e9d9bf,transparent 80%),#e1e9df; }
.social-closing h2 { max-width:680px; margin:0; font-size:46px; line-height:1.12; letter-spacing:-.045em; }
.social-closing p { margin-top:20px; }

.social-scenario-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 28px; margin-bottom:24px; }
.social-scenario-tabs button { padding:10px 0; border:0; border-bottom:2px solid transparent; background:none; font:500 15px/1.4 'DM Sans',Arial,sans-serif; color:#6a756c; cursor:pointer; }
.social-scenario-tabs [aria-selected=true] { border-color:#315541; color:#244b36; }
.social-panel[hidden] { display:none; }
.social-platform-window { --native-ink:#0f1419; --native-muted:#536471; --native-line:#d8dfe3; --native-accent:#1d9bf0; padding:0 28px 28px; overflow:hidden; border:1px solid var(--native-line); border-radius:28px; background:#f3f5f6; color:var(--native-ink); font-family:Arial,sans-serif; }
.social-native-bar { display:flex; align-items:center; gap:20px; min-height:62px; margin:0 -28px 24px; padding:14px 28px; border-bottom:1px solid var(--native-line); background:#fff; font-size:16px; }
.social-platform-logo { display:block; flex:none; object-fit:contain; width:28px; height:28px; }
.social-native-bar > span:not(.social-native-nav) { width:min(340px,60%); padding:10px 16px; border-radius:24px; background:#edf1f3; color:var(--native-muted); font-size:13px; }
.social-native-nav { display:flex; gap:32px; margin-left:auto; color:var(--native-muted); }
.social-native-nav svg { width:21px; height:21px; }
.social-native-layout { display:grid; grid-template-columns:minmax(0,660px) minmax(170px,240px); justify-content:center; align-items:start; gap:24px; }
.social-thread.landing-demo { display:block; min-width:0; margin:0; padding:0; border:1px solid var(--native-line); border-radius:14px; background:#fff; color:var(--native-ink); }
.social-post { min-width:0; padding:24px 24px 0; }
.social-post-author { display:flex; align-items:center; gap:11px; font-size:14px; }
.social-avatar { display:block; flex:none; width:42px; height:42px; padding:5px; border-radius:50%; background:#f1f3ee; object-fit:contain; }
.social-post-author > div { display:grid; min-width:0; gap:4px; }
.social-post-author strong { font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.social-post-author > div > span { color:var(--native-muted); font-size:12px; line-height:1.3; }
.social-post-more { align-self:start; margin-left:auto; font-size:24px; line-height:1; }
.social-post .social-post-title { margin:20px 0 12px; color:var(--native-ink); font:600 25px/1.2 Arial,sans-serif; letter-spacing:-.02em; }
.social-post .social-post-text { margin:20px 0; color:var(--native-ink); font:17px/1.55 Arial,sans-serif; }
.social-post-media { margin:0; overflow:hidden; border:1px solid var(--native-line); border-radius:14px; }
.social-post-media > img { display:block; width:100%; height:auto; }
.social-native-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:54px; border-bottom:1px solid var(--native-line); color:var(--native-muted); }
.social-native-actions > span { display:flex; align-items:center; gap:6px; font-size:12px; }
.social-native-actions svg,.social-compose-tools svg { width:19px; height:19px; }
.social-native-sidebar { padding:22px; border:1px solid var(--native-line); border-radius:14px; background:#fff; font-size:14px; line-height:1.5; }
.social-native-sidebar > strong { display:block; font-size:17px; }
.social-native-sidebar p { margin:14px 0 0; color:var(--native-muted); font:13px/1.6 Arial,sans-serif; }
.social-native-sidebar hr { margin:22px 0; border:0; border-top:1px solid var(--native-line); }
.social-native-sidebar ol { display:grid; gap:16px; margin:18px 0 0; padding-left:18px; color:var(--native-muted); font-size:12px; }
.social-sidebar-person { display:flex; align-items:center; gap:10px; margin-top:20px; }
.social-sidebar-person > strong { font-size:13px; }
.social-profile { padding-top:38px; text-align:center; background:linear-gradient(#d8e6e8 54px,#fff 54px); }
.social-profile > img { margin:0 auto 18px; width:58px; height:58px; border:3px solid #fff; }
.social-profile > strong { font-size:15px; }
.social-composer { position:relative; margin:20px 24px 0; }
.social-compose-row { display:flex; align-items:start; gap:12px; }
.social-thread .social-host { min-width:0; min-height:82px; border:1px solid var(--native-line); border-radius:16px; padding:10px 42px 10px 14px; background:#fff; box-shadow:none; }
.social-host .tb-host-input { height:58px; min-height:58px; max-height:58px; padding:0; color:var(--native-ink); font:15px/1.5 Arial,sans-serif; }
.social-host .tb-host-input::placeholder { color:var(--native-muted); }
.social-host .tb-trigger { top:auto; bottom:1px; transform:none; }
.social-compose-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0 20px; color:var(--native-accent); }
.social-compose-tools > span:first-child { display:flex; gap:16px; }
.social-post-action { display:inline-block; border-radius:20px; padding:9px 17px; background:var(--native-accent); color:#fff; font-size:13px; font-weight:600; }
.social-replying { margin:14px 24px 0 78px; color:var(--native-muted); font:12px/1.4 Arial,sans-serif; }
.social-replying > span { color:var(--native-accent); }
.social-suggestion.landing-suggestion { position:absolute; z-index:5; right:0; bottom:calc(100% - 3px); width:100%; max-width:none; margin:0; }
.social-reply-unit { position:absolute; top:0; right:0; width:570px; padding:30px 10px 0 0; transform:scale(var(--social-scale,.8)); transform-origin:top right; }
.social-reply-unit .landing-close { top:0; right:0; }
.social-reply-unit .tb-reply { font-size:18px; }
.social-reply-unit .tb-text { display:grid; max-height:164px; overflow:auto; }
.social-reply-unit .landing-edit { inset:30px 10px 0 0; border-radius:24px; }
.social-thread .landing-live { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.social-scenario-context { max-width:730px; margin:18px auto 0; color:#63715d; font-size:14px; line-height:1.6; text-align:center; }
.social-example-source { margin:8px auto 0; color:#7b837b; font-size:11px; line-height:1.5; text-align:center; }
.social-letter-study { display:grid; gap:12px; padding:28px; background:#f3dfbb; color:#54382c; }
.social-letter-study > span:first-child { font:13px/1.4 Arial,sans-serif; }
.social-letter-study > span:last-child { font:italic 66px/1.2 Georgia,serif; letter-spacing:-.06em; }
[data-platform=x].social-platform-window { --native-ink:#e7e9ea; --native-muted:#9ba4aa; --native-line:#333639; --native-accent:#1d9bf0; background:#13171b; border-color:#303639; }
[data-platform=x] .social-native-bar { background:#080a0b; }
[data-platform=x] .social-native-bar > span:not(.social-native-nav) { padding:0; border:0; background:none; color:var(--native-ink); font-size:19px; font-weight:600; }
[data-platform=x] .social-platform-logo { filter:invert(1); }
[data-platform=x] .social-thread { border-radius:0; background:#080a0b; }
[data-platform=x] .social-native-sidebar { background:#080a0b; }
[data-platform=x] .social-host { padding-left:0; border:0; border-radius:0; background:transparent; }
[data-platform=x] .social-host .tb-orb { box-shadow:0 0 0 5px #ffffff12; }
[data-platform=reddit].social-platform-window { --native-ink:#1a282d; --native-muted:#576f76; --native-line:#dbe3e7; --native-accent:#0b449b; background:#e9eef0; }
[data-platform=reddit] .social-thread { border-color:transparent; border-radius:18px; }
[data-platform=reddit] .social-native-actions { justify-content:flex-start; gap:12px; border:0; }
[data-platform=reddit] .social-native-actions > span { min-height:34px; padding:8px 12px; border-radius:20px; background:#e9eef0; }
[data-platform=reddit] .social-native-actions .social-votes { gap:12px; }
[data-platform=reddit] .social-post-title { font-size:26px; }
[data-platform=reddit] .social-compose-tools { color:#576f76; }
[data-platform=linkedin].social-platform-window { --native-ink:#191919; --native-muted:#666; --native-line:#d9d9d7; --native-accent:#0a66c2; background:#f3f2ef; }
[data-platform=linkedin] .social-native-actions { padding-top:12px; border-top:1px solid var(--native-line); border-bottom:0; }
[data-platform=linkedin] .social-native-actions > span { font-weight:600; }
[data-platform=linkedin] .social-host { border-radius:24px; }
[data-platform=linkedin] .social-compose-tools { padding-left:54px; }

.social-overview .social-section-heading { max-width:none; text-align:left; }
.social-overview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 28px; }
.social-overview-card { display:grid; grid-row:span 4; grid-template-rows:subgrid; min-width:0; }
.social-overview-card > h3 { margin:0; font-size:28px; line-height:1.2; letter-spacing:-.035em; }
.social-overview-card > p { margin:0; color:var(--muted); font-size:17px; line-height:1.6; }
.social-overview-card .actions { justify-content:flex-start; margin:0; }
.social-overview-art { display:flex; flex-direction:column; gap:20px; padding:24px; min-width:0; border-radius:24px; background:#f3f2ef; color:#191919; }
.social-overview-art[data-platform=x] { --native-ink:#e7e9ea; --native-muted:#adb4ba; --native-line:#333639; background:#13171b; color:#e7e9ea; }
.social-overview-art[data-platform=reddit] { --native-ink:#1a282d; --native-muted:#576f76; --native-line:#dbe3e7; background:#edf2f3; color:#1a282d; }
.social-overview-art .social-post { padding:0; }
.social-overview-art .social-post-author > div > span { font-size:10px; }
.social-overview-art .social-avatar { width:32px; height:32px; }
.social-overview-art .social-post-text { margin:18px 0; padding:0; font-size:14px; }
.social-overview-art .social-post-title { font-size:19px; margin-top:18px; }
.social-overview-art .social-post-media { border-radius:8px; }
.social-overview-art .social-post-more { display:none; }
.social-scenario-tabs button:focus-visible,.social-related a:focus-visible { outline:2px solid #526abb; outline-offset:5px; }

.social-film[data-platform] .social-film-modal { border-radius:20px; }
.social-passive-input { height:58px; max-height:58px; }
@media(max-width:1100px) {
  .social-hero-copy h1 { font-size:54px; }
  .social-hero-copy .lead { font-size:17px; }
  .social-native-layout { grid-template-columns:minmax(0,1fr) 185px; gap:18px; }
  .social-native-sidebar { padding:18px; }
  .social-feature-row { gap:48px; }
  .social-feature-copy h2,.social-section-heading h2 { font-size:38px; }
  .social-feature-pair,.social-decisions,.social-related-grid { column-gap:28px; }
  .social-capability > h3,.social-decisions h2 { font-size:32px; }
  .social-style-art,.social-language-art { padding:28px; }
  .social-steps { column-gap:20px; }
  .social-step-art { padding:16px; }
  .social-step-native { padding:14px; }
  .social-steps h3 { font-size:23px; }
  .social-film-peek { width:250px; }
  .social-film-peek:first-child { left:20px; }
  .social-film-peek:last-child { right:20px; }
  .social-overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .social-overview-card:last-child { grid-column:1 / -1; grid-row:auto; grid-template-columns:1fr 1fr; grid-template-rows:auto auto auto; gap:20px 28px; }
  .social-overview-card:last-child .social-overview-art { grid-column:1; grid-row:1 / -1; }
  .social-overview-card:last-child > h3,.social-overview-card:last-child > p,.social-overview-card:last-child > .actions { grid-column:2; }
  .social-overview-card:last-child > h3 { align-self:end; }
  .social-overview-card:last-child > .actions { align-self:start; }
}
@media(max-width:850px) {
  body.social-usecase-page { --usecase-gap:104px; }
  .social-hero-copy { gap:24px; }
  .social-hero-copy h1 { max-width:700px; }
  .social-hero-intro { max-width:620px; }
  .social-film-peeks { display:none; }
  .social-native-layout { grid-template-columns:minmax(0,1fr); }
  .social-native-sidebar { display:none; }
  .social-thread.landing-demo { max-width:640px; margin:auto; width:100%; }
  .social-feature-row { grid-template-columns:minmax(0,1fr); gap:32px; }
  .social-feature-copy { max-width:620px; }
  .social-feature-pair { margin-top:64px; }
  .social-style-art,.social-language-art { padding:22px; }
  .social-style-art .usecase-style-window { padding:20px; }
  .social-style-art .usecase-style-tabs { font-size:12px; }
  .social-style-art .usecase-style-rules p,.social-language-post > p { font-size:15px; }
  .social-style-result .tb-reply,.social-language-art > .tb-reply { font-size:15px; }
  .social-steps { grid-template-columns:minmax(0,1fr); gap:20px 28px; }
  .social-steps > li { grid-row:auto; grid-template-rows:auto auto; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:center; }
  .social-steps .social-step-art { grid-column:1; grid-row:1 / span 2; }
  .social-steps > li > h3 { grid-column:2; align-self:end; }
  .social-steps > li > p { grid-column:2; align-self:start; }
  .social-step-art { padding:22px; }
  .social-step-native { padding:20px; }
  .social-decisions article > p { font-size:16px; }
  .social-desktop-art,.social-privacy-art { padding:24px; }
  .social-desktop-reply .tb-reply { font-size:14px; }
}
@media(max-width:600px) {
  body.social-usecase-page { --usecase-gap:80px; }
  :root body.social-usecase-page main .button { min-height:50px; padding:13px 21px; font-size:15px; }
  .social-usecase-page main > .social-hero { padding-top:28px; }
  .social-hero-copy h1 { font-size:36px; }
  .social-hero-copy .lead { font-size:17px; }
  .social-hero-copy .actions { gap:10px; }
  .social-film { height:auto; padding:28px 12px; margin-top:28px; border-radius:24px; }
  .social-film-modal { width:100%; }
  .social-film-bar { padding:12px 16px; font-size:14px; }
  .social-film-bar .social-platform-logo { width:23px; height:23px; }
  .social-film-modal > .social-post { padding:16px 16px 0; }
  .social-film-modal .social-post-text { font-size:14px; }
  .social-film-modal .social-post-title { font-size:19px; }
  .social-film-composer { margin-inline:16px; }
  .social-film .social-host { padding-left:10px; }
  .social-film .social-passive-input { font-size:14px; }
  .social-platform-window { padding:0 12px 12px; border-radius:20px; }
  .social-native-bar { gap:14px; min-height:52px; margin:0 -12px 12px; padding:12px 18px; }
  .social-native-bar .social-platform-logo { width:23px; height:23px; }
  .social-native-bar > span:not(.social-native-nav) { padding:8px 14px; font-size:12px; }
  .social-post { padding:18px 14px 0; }
  .social-post-author { gap:8px; }
  .social-avatar { width:34px; height:34px; padding:4px; }
  .social-post-author strong { font-size:12px; }
  .social-post-author > div > span { font-size:10px; }
  .social-post .social-post-text { margin:16px 0; font-size:15px; line-height:1.5; }
  .social-post .social-post-title,[data-platform=reddit] .social-post-title { font-size:21px; }
  .social-post-media { border-radius:10px; }
  .social-native-actions { min-height:48px; gap:8px; }
  .social-native-actions > span { font-size:10px; gap:4px; }
  .social-native-actions svg { width:16px; height:16px; }
  [data-platform=reddit] .social-native-actions { gap:6px; }
  [data-platform=reddit] .social-native-actions > span { padding:8px; }
  .social-composer { margin:16px 14px 0; }
  .social-compose-row { gap:8px; }
  .social-thread .social-host { min-height:82px; }
  .social-host .tb-host-input { font-size:14px; }
  .social-replying { margin-left:56px; font-size:10px; }
  .social-compose-tools { padding-bottom:16px; }
  .social-compose-tools svg { width:17px; height:17px; }
  .social-post-action { padding:8px 13px; font-size:12px; }
  [data-platform=linkedin] .social-compose-tools { padding-left:42px; }
  .social-scenario-context { margin-top:16px; font-size:13px; text-align:left; }
  .social-example-source { font-size:10px; text-align:left; }
  .social-letter-study { padding:24px; }
  .social-letter-study > span:last-child { font-size:50px; }
  .social-section-heading,.social-values > .social-section-heading { margin-bottom:36px; }
  .social-section-heading h2,.social-faq .social-section-heading h2 { font-size:32px; }
  .social-section-heading > p { margin-top:18px; font-size:17px; }
  .social-section-heading > .actions { margin-top:24px; }
  .social-feature-copy h2 { font-size:32px; }
  .social-feature-copy > p { margin-top:18px; font-size:17px; }
  .social-context-art { padding:22px; border-radius:24px; }
  .social-context-post { padding:20px; }
  .social-context-post > header { gap:8px; font-size:12px; }
  .social-context-post > header .social-avatar { width:30px; height:30px; }
  .social-context-post blockquote > p { font-size:21px; }
  .social-context-comment > p { font-size:15px; }
  .social-feature-pair,.social-decisions,.social-related-grid { grid-template-columns:minmax(0,1fr); gap:48px; }
  .social-capability,.social-decisions > article,.social-related-grid > article { grid-row:auto; grid-template-rows:auto; gap:20px; }
  .social-capability > h3,.social-decisions h2 { font-size:30px; }
  .social-capability > p,.social-decisions article > p { font-size:17px; }
  .social-style-art,.social-language-art { padding:28px 24px; border-radius:24px; }
  .social-style-art .usecase-style-tabs { font-size:13px; }
  .social-style-art .usecase-style-rules p,.social-language-post > p { font-size:16px; }
  .social-style-result .tb-reply,.social-language-art > .tb-reply { font-size:16px; }
  .social-steps { display:grid; gap:40px; }
  .social-steps > li { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto; gap:16px; }
  .social-steps .social-step-art,.social-steps > li > h3,.social-steps > li > p { grid-column:auto; grid-row:auto; }
  .social-steps h3 { font-size:24px; }
  .social-step-art { padding:24px; }
  .social-step-result .tb-reply { font-size:16px; }
  .social-step-art .social-passive-input { font-size:14px; }
  .social-desktop-art,.social-privacy-art { padding:32px 24px; border-radius:24px; }
  .social-desktop-reply .tb-reply { font-size:16px; }
  .social-related-heading { display:block; margin-bottom:32px; }
  .social-related-heading h2 { font-size:32px; }
  .social-related-heading > .button { margin-top:24px; }
  .social-related-art { padding:28px; }
  .social-related-art blockquote { font-size:23px; }
  .social-related-grid h3 { font-size:27px; }
  .usecase-page main > .social-closing { padding:48px 28px; }
  .social-closing h2 { font-size:34px; }
  .social-overview-grid { grid-template-columns:minmax(0,1fr); gap:48px; }
  .social-overview-card,.social-overview-card:last-child { grid-column:auto; grid-row:auto; grid-template-columns:minmax(0,1fr); grid-template-rows:auto; gap:18px; }
  .social-overview-card:last-child .social-overview-art,.social-overview-card:last-child > h3,.social-overview-card:last-child > p,.social-overview-card:last-child > .actions { grid-column:auto; grid-row:auto; }
  .social-overview-art { padding:26px; }
  .social-overview-card > h3 { font-size:27px; }
}
@media(max-width:359px) {
  .social-hero-copy h1 { font-size:30px; }
  .social-platform-window { padding:0 8px 8px; }
  .social-native-bar { margin-inline:-8px; padding-inline:14px; }
  .social-post { padding-inline:12px; }
  .social-composer { margin-inline:12px; }
  .social-post-author > div > span { font-size:9px; }
  .social-context-art { padding:18px; }
  .social-style-art,.social-language-art { padding:24px 18px; }
  .social-step-art { padding:20px; }
  .social-context-post > header .social-platform-logo { width:20px; height:20px; }
}

/* Keep the visible source above the result, with the normal composer unchanged. */
.social-film-composer { padding-top:var(--film-reply-space,180px); }
.social-film-suggestion { top:0; bottom:auto; }
.social-step-art[data-platform] .social-compose-tools { padding-left:0; }
.social-film[data-platform=x] .tb-reply,
.social-step-art[data-platform=x] .tb-reply,
.social-platform-window[data-platform=x] .tb-reply { --tb-glass-fill:#d8d8d8d9; }
.social-privacy-object { position:relative; width:min(320px,100%); aspect-ratio:1; overflow:hidden; }
.social-privacy-object > img { position:absolute; width:160%; max-width:none; height:auto; left:-30%; top:-25%; }
.social-passive-input:empty::before { content:attr(data-placeholder); }

.social-step-composer { position:relative; }
.social-step-result { position:absolute; z-index:2; right:0; bottom:calc(100% + 8px); width:100%; }
.social-step-result > .landing-close { top:-27px; right:0; width:24px; height:24px; font-size:18px; }

/* A continuous Reddit post page, with a composer and a nested comment tree. */
.social-film[data-platform=reddit] { display:block; height:auto; padding:0; border:1px solid #d9e0e3; background:#fff; font-family:Arial,sans-serif; }
.social-film[data-platform=reddit] .social-reddit-page { width:100%; border:0; border-radius:0; box-shadow:none; }
.social-reddit-topbar { display:flex; align-items:center; gap:28px; min-height:66px; padding:14px 28px; border-bottom:1px solid #e2e7e9; }
.social-reddit-wordmark { display:flex; align-items:center; gap:7px; color:#d93900; }
.social-reddit-wordmark strong { font-size:29px; letter-spacing:-1.3px; }
.social-reddit-wordmark .social-platform-logo { width:33px; height:33px; }
.social-reddit-search { display:flex; align-items:center; gap:12px; width:420px; margin:auto; padding:12px 18px; border-radius:999px; background:#eaf0f2; color:#576f76; font-size:14px; }
.social-reddit-search svg,.social-reddit-account svg,.social-reddit-sort svg,.social-reddit-comment-actions svg { flex:none; width:19px; height:19px; }
.social-reddit-account { display:flex; align-items:center; gap:22px; }
.social-reddit-account .social-avatar { width:32px; height:32px; }
.social-reddit-layout { display:grid; grid-template-columns:minmax(0,1fr) 240px; align-items:start; gap:48px; max-width:1010px; margin:0 auto; padding:30px; }
.social-reddit-main { min-width:0; }
.social-reddit-main > .social-post { padding:0; border:0; background:none; }
.social-reddit-main .social-post-author .social-avatar { width:32px; height:32px; }
.social-reddit-main .social-post-title { margin:18px 0 0; font-size:25px; line-height:1.25; letter-spacing:-.4px; }
.social-reddit-main .social-post-text { margin:18px 0; font-size:14px; line-height:1.55; }
.social-reddit-main .social-native-actions { justify-content:flex-start; gap:12px; padding-bottom:0; border:0; }
.social-reddit-main .social-film-composer { margin:22px 0 0; }
.social-reddit-main .social-host { padding:12px 42px 12px 16px; border:1px solid #8ba1a9; border-radius:20px; }
.social-reddit-main .social-passive-input { font-size:14px; }
.social-reddit-main .social-compose-tools { padding-bottom:0; }
.social-reddit-sort { display:flex; align-items:center; gap:8px; margin:24px 0; color:#576f76; font-size:12px; }
.social-reddit-sort > span { display:flex; align-items:center; gap:8px; margin-left:auto; }
.social-reddit-comment { position:relative; padding-left:38px; }
.social-reddit-comment::before { content:''; position:absolute; left:13px; top:34px; bottom:0; border-left:1px solid #d6dee1; }
.social-reddit-comment > header { display:flex; align-items:center; gap:8px; min-height:28px; color:#263b42; font-size:12px; }
.social-reddit-comment > header .social-avatar { width:28px; height:28px; margin-left:-38px; }
.social-reddit-comment > header > span { color:#0b449b; font-size:10px; }
.social-reddit-comment > p { margin:8px 0 12px; font-size:14px; line-height:1.5; }
.social-reddit-comment-actions { display:flex; align-items:center; gap:13px; color:#526971; font-size:12px; }
.social-reddit-comment-actions > span { display:flex; align-items:center; gap:6px; }
.social-reddit-nested { margin:18px 0 0; }
.social-reddit-nested::before { display:none; }
.social-reddit-community { padding:20px; border-radius:10px; background:#f5f7f8; color:#33474f; }
.social-reddit-community > header { display:flex; align-items:center; gap:8px; font-size:13px; }
.social-reddit-community > header .social-platform-logo { width:27px; height:27px; }
.social-reddit-community p { margin:15px 0; font-size:13px; line-height:1.55; }
.social-reddit-join { display:block; padding:10px; border-radius:999px; background:#0b449b; color:#fff; text-align:center; font-size:13px; font-weight:600; }
.social-reddit-community-rules { margin-top:22px; padding-top:20px; border-top:1px solid #d9e1e4; font-size:12px; }
.social-reddit-community-rules p { margin-bottom:0; }
.social-context-previous { border-top:1px solid #85948d50; }
.social-context-response { position:relative; margin:0 0 0 28px; padding-top:16px; border-top:0; }
.social-context-response::before { content:''; position:absolute; left:-13px; top:0; height:32px; width:11px; border:solid #85948d70; border-width:0 0 1px 1px; border-bottom-left-radius:9px; }
.social-contribution { display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; gap:32px; text-align:center; }
body.social-usecase-page main > .social-contribution,body.social-usecase-page main > .social-contribution + .social-how { margin-top:calc(var(--usecase-gap) / 2); }
.social-contribution > .social-section-heading { width:min(760px,100%); max-width:none; margin:0; text-align:center; }
.social-contribution .social-section-heading h2 { font-size:clamp(30px,3.2vw,40px); }
.social-contribution .social-section-heading > p { max-width:62ch; margin:20px auto 0; font-size:17px; }
.social-contribution-grid { display:grid; width:min(760px,100%); gap:24px; }
.social-contribution-grid article { display:grid; justify-items:center; gap:12px; min-width:0; }
.social-contribution-grid article + article { padding-top:24px; border-top:1px solid var(--line); }
.social-contribution-grid h3 { margin:0; font-size:24px; line-height:1.25; letter-spacing:-.03em; }
.social-contribution-grid p { max-width:62ch; margin:0 auto; color:var(--muted); font-size:17px; line-height:1.6; }
.social-contribution > .actions { justify-content:center; margin:0; }
@media(max-width:850px) {
  .social-reddit-layout { grid-template-columns:minmax(0,1fr); max-width:700px; padding:28px; }
  .social-reddit-community { display:none; }
  .social-reddit-topbar { gap:18px; padding:14px 24px; }
  .social-reddit-account { display:none; }
}
@media(max-width:600px) {
  .social-reddit-topbar { min-height:54px; gap:16px; padding:12px 16px; }
  .social-reddit-wordmark strong { font-size:25px; }
  .social-reddit-wordmark .social-platform-logo { width:28px; height:28px; }
  .social-reddit-search { width:auto; margin:0 0 0 auto; padding:9px; font-size:0; }
  .social-reddit-layout { padding:22px 16px; }
  .social-reddit-main .social-post-title { font-size:23px; }
  .social-reddit-main .social-post-text { font-size:14px; }
  .social-reddit-main .social-film-composer { margin-inline:0; }
  .social-reddit-sort { font-size:11px; }
  .social-reddit-sort > span { font-size:0; }
  .social-reddit-comment { padding-left:30px; }
  .social-reddit-comment > header .social-avatar { margin-left:-30px; width:24px; height:24px; }
  .social-reddit-comment::before { left:11px; }
  .social-reddit-comment-actions { gap:10px; }
  .social-reddit-comment-actions svg { width:17px; height:17px; }
  .social-contribution-grid h3 { font-size:22px; }
  .social-contribution-grid p,.social-contribution .social-section-heading > p { font-size:16px; line-height:1.6; }
}

/* X benefits show reply outcomes and retain the shared native composer. */
.social-x-benefits { display:grid; gap:var(--usecase-gap); }
.social-x-benefits .social-feature-copy { grid-column:2; grid-row:1; }
.social-x-benefits .social-feature-row > :last-child { grid-column:1; grid-row:1; min-width:0; }
.social-x-benefits .is-reversed { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
.social-x-benefits .is-reversed .social-feature-copy { grid-column:1; }
.social-x-benefits .is-reversed > :last-child { grid-column:2; }
.social-x-benefits .social-feature-copy h2 { max-width:13em; }
.social-x-voice-art > div { display:grid; gap:22px; }
.social-x-shortcut-art { scroll-margin-top:110px; }
.social-x-shortcut-art .social-thread { position:relative; }
.social-x-shortcut-art .social-post-text { font-size:18px; }
.social-x-shortcut-invitation { margin:24px 0 0; color:var(--ink); font-size:16px; line-height:1.6; }
.social-x-shortcut-invitation kbd { display:inline-block; padding:2px 8px; border:1px solid #d2dcd4; border-radius:7px; background:#f5f8f3; box-shadow:0 2px 0 #e0e7dd; font:inherit; }
.social-x-touch { display:none; }
.social-x-comparison > .actions { justify-content:center; margin-top:36px; }
@media(max-width:850px) {
  .social-x-benefits .social-feature-row,.social-x-benefits .is-reversed { grid-template-columns:minmax(0,1fr); }
  .social-x-benefits .social-feature-copy { grid-column:1; grid-row:1; }
  .social-x-benefits .social-feature-row > :last-child { grid-column:1; grid-row:2; }
}
@media(max-width:600px) {
  .social-x-shortcut-art .social-post-text { font-size:15px; }
  .social-x-keyboard { display:none; }
  .social-x-touch { display:inline; }
}

/* Native X detail views, reply dialogs and Articles share one visual vocabulary. */
.x-detail-bar { display:flex; align-items:center; gap:26px; min-height:54px; padding:12px 20px; border-bottom:1px solid #2f3336; background:#000; color:#e7e9ea; font:20px/1.3 Arial,sans-serif; }
.x-detail-bar strong { font-weight:700; }
.x-detail-bar > span:last-child { margin-left:auto; font-size:22px; }
.x-detail-bar svg,.x-side-nav svg,.x-search svg { display:block; width:22px; height:22px; fill:none; }
.x-native-author { display:flex; align-items:center; gap:11px; min-width:0; color:inherit; }
.x-native-author > div { display:grid; min-width:0; gap:3px; }
.x-native-author strong { font:700 15px/1.3 Arial,sans-serif; overflow-wrap:anywhere; }
.x-native-author > div > span { color:#71767b; font:13px/1.3 Arial,sans-serif; overflow-wrap:anywhere; }
.x-native-author .social-avatar { width:40px; height:40px; padding:4px; }
.x-native-more { margin-left:auto; align-self:start; color:#71767b; font-size:22px; }
.x-native-post { color:#e7e9ea; background:#000; padding:20px 24px 0; }
.x-native-post .social-post-text { margin:18px 0; color:#e7e9ea; font:18px/1.55 Arial,sans-serif; }
.x-post-meta { margin:18px 0; color:#71767b; font:13px/1.4 Arial,sans-serif; }
.x-post-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:48px; border-top:1px solid #2f3336; color:#71767b; }
.x-post-actions svg { display:block; width:19px; height:19px; }
.x-quoted-post { margin-top:18px; padding:14px; border:1px solid #2f3336; border-radius:16px; }
.x-quoted-post .social-avatar { width:25px; height:25px; padding:2px; }
.x-quoted-post .x-native-author { gap:8px; }
.x-quoted-post .x-native-author > div { display:flex; flex-wrap:wrap; align-items:center; gap:3px 7px; }
.x-quoted-post .x-native-author strong { font-size:13px; }
.x-quoted-post .x-native-author > div > span { font-size:12px; }
.x-quoted-post .x-native-more { display:none; }
.x-quoted-post > p { margin:10px 0 0; color:#e7e9ea; font:15px/1.5 Arial,sans-serif; }
.x-full-window.social-platform-window { padding:0; background:#000; }
.x-app-shell { display:grid; grid-template-columns:minmax(100px,1fr) minmax(0,660px) minmax(180px,240px); align-items:stretch; background:#000; }
.x-main-column { min-width:0; border-inline:1px solid #2f3336; }
.x-main-column .social-thread { margin:0; border:0; }
.x-side-nav { display:flex; flex-direction:column; gap:24px; min-width:0; max-width:220px; width:100%; justify-self:end; padding:22px 20px; color:#e7e9ea; font-family:Arial,sans-serif; }
.x-side-nav > .social-platform-logo { width:30px; height:30px; margin-left:6px; }
.x-navigation-items { display:grid; gap:25px; }
.x-navigation-items > div { display:flex; align-items:center; gap:16px; font-size:18px; line-height:1.25; }
.x-navigation-items b { width:22px; text-align:center; font-size:20px; }
.x-nav-post { padding:13px; border-radius:999px; background:#e7e9ea; color:#0f1419; text-align:center; font-size:16px; font-weight:700; }
.x-nav-account { display:flex; align-items:center; gap:9px; margin-top:auto; padding-top:30px; }
.x-nav-account .social-avatar { width:35px; height:35px; }
.x-nav-account > div { display:grid; min-width:0; gap:3px; font-size:12px; }
.x-nav-account > div > span { color:#71767b; }
.x-nav-account > b { margin-left:auto; }
.x-right-sidebar { min-width:0; padding:16px; color:#e7e9ea; font-family:Arial,sans-serif; }
.x-search { display:flex; align-items:center; gap:12px; padding:12px 15px; margin-bottom:20px; border:1px solid #2f3336; border-radius:999px; color:#71767b; font-size:14px; }
.x-search svg { width:18px; height:18px; }
.x-side-module { margin-top:16px; padding:16px; border:1px solid #2f3336; border-radius:16px; }
.x-side-module h4 { margin:0 0 18px; font-size:19px; line-height:1.3; }
.x-side-module .x-native-author { align-items:start; gap:8px; }
.x-side-module .x-native-author .social-avatar { width:30px; height:30px; }
.x-side-module .x-native-author strong { font-size:13px; }
.x-side-module .x-native-author > div > span { font-size:11px; }
.x-side-module .x-native-more { display:none; }
.x-side-module > p { margin:12px 0; color:#b2b6ba; font-size:13px; line-height:1.5; }
.x-follow { display:inline-block; padding:7px 16px; border-radius:999px; background:#e7e9ea; color:#0f1419; font-size:12px; font-weight:700; }
.x-topic { position:relative; display:grid; gap:4px; padding-block:12px; }
.x-topic > span { color:#71767b; font-size:11px; }
.x-topic > strong { padding-right:10px; font-size:13px; line-height:1.3; }
.x-topic > b { position:absolute; right:0; top:9px; color:#71767b; }
.x-legal { margin:18px 8px 0; color:#71767b; font-size:10px; line-height:1.7; }
.x-article-reader { max-height:520px; margin-top:20px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#4d5257 #000; padding-right:12px; }
.x-article-reader:focus-visible { outline:2px solid #1d9bf0; outline-offset:4px; }
.x-article-kicker { display:block; margin-bottom:14px; color:#71767b; font:13px/1.4 Arial,sans-serif; }
.x-article-reader > h3 { margin:0; color:#e7e9ea; font:700 32px/1.15 Arial,sans-serif; letter-spacing:-.025em; }
.x-article-reader .x-article-intro { color:#c7cbce; font-size:18px; }
.x-article-reader section > h4 { margin:28px 0 14px; color:#e7e9ea; font:700 21px/1.25 Arial,sans-serif; }
.x-article-reader section > p { margin:14px 0; color:#e7e9ea; font:17px/1.65 Arial,sans-serif; }
.x-hero-screen.social-film { border:1px solid #2f3336; background:#000; }
.x-hero-background { position:absolute; inset:0; display:flex; justify-content:space-between; pointer-events:none; }
.x-hero-background > .x-side-nav { width:200px; }
.x-hero-background > .x-right-sidebar { width:230px; }
.x-hero-detail.social-film-modal { border:1px solid #2f3336; border-radius:0!important; }
.x-hero-detail .x-native-post { padding:20px 24px 0; }
.x-thread-art.social-context-art { display:block; overflow:hidden; padding:0; border:1px solid #2f3336; background:#000; }
.x-thread-reply { padding:18px 24px 0; border-top:1px solid #2f3336; color:#e7e9ea; font-family:Arial,sans-serif; }
.x-reply-to { margin:10px 0 12px 51px; color:#71767b; font:13px/1.4 Arial,sans-serif; }
.x-reply-to > span { color:#1d9bf0; }
.x-thread-reply > p:not(.x-reply-to) { margin:0 0 18px 51px; font-size:16px; line-height:1.5; }
.social-x-draft { overflow:hidden; min-width:0; border:1px solid #2f3336; border-radius:18px; background:#000; color:#e7e9ea; font-family:Arial,sans-serif; }
.x-compose-topbar { display:flex; align-items:center; gap:20px; padding:15px 20px; border-bottom:1px solid #2f3336; font-size:15px; }
.x-compose-topbar > span:first-child { font-size:23px; }
.x-compose-topbar > span:last-child { margin-left:auto; color:#1d9bf0; font-size:13px; }
.x-reply-source { position:relative; padding:18px 20px 0; }
.x-reply-source::after { position:absolute; content:''; left:39px; top:63px; bottom:0; width:2px; background:#2f3336; }
.x-reply-source > p { margin:12px 0 0 51px; font-size:15px; line-height:1.5; }
.social-x-draft .x-reply-to { margin-left:71px; }
.x-static-reply { display:flex; align-items:start; gap:11px; padding:0 20px; }
.x-static-reply > div { flex:1; min-width:0; }
.x-static-reply p { margin:0; font-size:17px; line-height:1.5; }
.x-static-reply .tb-orb { display:block; width:13px; height:13px; margin:14px 0 0 auto; }
.social-x-draft-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px 20px 71px; }
.social-x-draft-controls > span:first-child { display:flex; gap:14px; color:#1d9bf0; }
.social-x-draft-controls svg { width:18px; height:18px; }
.social-x-shortcut-art { padding:0 24px 24px; }
.social-x-shortcut-art .x-detail-bar { margin-inline:-24px; }
.social-x-shortcut-art .x-native-post { padding-inline:0; }
.social-x-shortcut-art .social-composer { margin-inline:0; }
.social-x-shortcut-art .social-thread { border:0; }
.social-step-art[data-platform=x] .x-native-post { padding:0; }
.social-step-art[data-platform=x] .x-native-post .social-post-text { font-size:14px; }
.social-step-art[data-platform=x] .x-post-meta { font-size:10px; }
.social-step-art[data-platform=x] .x-native-author strong { font-size:12px; }
.social-step-art[data-platform=x] .x-native-author > div > span { font-size:10px; }
.social-step-art[data-platform=x] .x-post-actions { min-height:38px; }
.social-step-art[data-platform=x] .x-post-actions svg { width:15px; height:15px; }
.x-compare-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 36px; }
.x-compare-layout > article { display:grid; grid-template-rows:subgrid; grid-row:span 4; min-width:0; }
.x-compare-layout h3 { margin:0; color:var(--ink); font-size:28px; line-height:1.2; letter-spacing:-.03em; text-wrap:balance; }
.x-compare-layout > article > p { margin:0; color:var(--muted); font-size:17px; line-height:1.6; }
.x-compare-layout .x-compare-memory { align-self:center; color:#315541; font-size:16px; }
.x-compare-mode { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.x-compare-mode button { padding:9px 14px; border:1px solid transparent; border-radius:999px; background:#f0f4ec; color:#53694d; font:500 14px/1.3 'DM Sans',Arial,sans-serif; cursor:pointer; }
.x-compare-mode [aria-selected=true] { border-color:#9fb894; background:#e3eddb; color:#244b36; }
.x-compare-mode button:focus-visible { outline:2px solid #526abb; outline-offset:3px; }
.x-compare-panes { display:grid; min-width:0; }
.x-compare-pane { grid-area:1 / 1; display:grid; min-width:0; }
.x-compare-pane[aria-hidden=true] { visibility:hidden; pointer-events:none; }
.x-compare-pane > div,.x-compare-pane > div > div,.x-compare-tonebird > [role=img] > div { height:100%; }
.x-chat-preview { display:flex; flex-direction:column; height:100%; overflow:hidden; border:1px solid #dce1dc; border-radius:24px; background:#fff; color:#202321; font-family:Arial,sans-serif; }
.x-chat-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:20px; border-bottom:1px solid #e5e8e3; font-size:15px; }
.x-chat-bar > span { display:flex; align-items:center; gap:12px; color:#727a73; font-size:12px; }
.x-chat-messages { flex:1; display:grid; align-content:start; gap:26px; padding:24px 20px; }
.x-chat-prompt { margin-left:24px; padding:18px; border-radius:20px 20px 4px 20px; background:#f0f1ed; font-size:14px; line-height:1.6; }
.x-chat-prompt p { margin:0; }
.x-chat-prompt p + p { margin-top:14px; }
.x-chat-answer { display:flex; align-items:start; gap:12px; font-size:15px; line-height:1.6; }
.x-chat-answer > span { display:grid; flex:none; place-items:center; width:28px; height:28px; border:1px solid #e0e5dd; border-radius:50%; color:#6c8b5e; }
.x-chat-answer > p { margin:0; }
.x-chat-input { display:flex; justify-content:space-between; align-items:center; margin:0 20px 20px; padding:13px 16px; border:1px solid #dce1d8; border-radius:24px; color:#8a9088; font-size:13px; }
.x-chat-input > span { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:#252a25; color:#fff; }
.x-extension-preview { display:flex; flex-direction:column; height:100%; overflow:hidden; border:1px solid #2f3336; border-radius:24px; background:#000; color:#e7e9ea; font-family:Arial,sans-serif; }
.x-extension-draft { position:relative; flex:1; display:flex; flex-direction:column; padding:20px 24px; }
.x-extension-draft > p { margin:0 0 24px; font-size:16px; line-height:1.5; }
.x-extension-draft > div:last-child { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; font-size:13px; color:#1d9bf0; }
.x-preset-menu { position:absolute; right:20px; bottom:calc(100% - 24px); z-index:1; display:grid; gap:3px; min-width:155px; padding:10px; border:1px solid #3c4247; border-radius:14px; background:#1b2024; box-shadow:0 8px 24px #0008; font-size:13px; }
.x-preset-menu > strong { padding:4px 9px 9px; color:#8b949b; font-size:11px; }
.x-preset-menu > span { display:flex; justify-content:space-between; padding:8px 9px; border-radius:7px; }
.x-preset-menu .is-selected { background:#273b49; color:#6cc1f9; }
.x-compare-native.social-platform-window { height:100%; padding:0 20px 20px; border-color:#b1c7a5; background:#000; }
.x-compare-native .x-detail-bar { margin-inline:-20px; }
.x-compare-native .social-thread { position:relative; border:0; }
.x-compare-native .x-native-post { padding-inline:0; }
.x-compare-native .social-composer { margin-inline:0; }
@media(max-width:1100px) {
  .x-app-shell { grid-template-columns:64px minmax(0,1fr) 190px; }
  .x-side-nav { padding-inline:16px; align-items:center; }
  .x-navigation-items > div { justify-content:center; }
  .x-navigation-items > div > span,.x-nav-post,.x-nav-account { display:none; }
  .x-hero-background { display:none; }
}
@media(max-width:850px) {
  .x-app-shell { grid-template-columns:64px minmax(0,1fr); }
  .x-app-shell > .x-right-sidebar { display:none; }
}
@media(max-width:600px) {
  .x-app-shell { grid-template-columns:minmax(0,1fr); }
  .x-app-shell > .x-side-nav { display:none; }
  .x-main-column { border-inline:0; }
  .x-detail-bar { padding:12px 16px; font-size:18px; }
  .x-native-post,.x-hero-detail .x-native-post { padding:16px 16px 0; }
  .x-native-post .social-post-text { font-size:16px; }
  .x-native-author strong { font-size:14px; }
  .x-native-author > div > span { font-size:12px; }
  .x-quoted-post { padding:12px; }
  .x-quoted-post > p { font-size:14px; }
  .x-thread-reply { padding:16px 16px 0; }
  .x-thread-reply > p:not(.x-reply-to) { font-size:15px; }
  .x-article-reader { max-height:400px; }
  .x-article-reader > h3 { font-size:27px; }
  .x-article-reader .x-article-intro,.x-article-reader section > p { font-size:16px; }
  .x-article-reader section > h4 { font-size:20px; }
  .social-x-shortcut-art { padding:0 16px 16px; }
  .social-x-shortcut-art .x-detail-bar { margin-inline:-16px; }
  .x-compose-topbar { padding:13px 16px; }
  .x-reply-source { padding:16px 16px 0; }
  .x-static-reply { padding-inline:16px; }
  .x-static-reply p { font-size:16px; }
  .social-x-draft-controls { padding-inline:67px 16px; }
  .social-x-draft .x-reply-to { margin-left:67px; }
  .x-reply-source::after { left:35px; }
  .x-compare-layout { grid-template-columns:minmax(0,1fr); gap:36px; }
  .x-compare-layout > article { grid-row:auto; grid-template-rows:auto; gap:20px; }
  .x-compare-layout h3 { font-size:25px; }
  .x-compare-native.social-platform-window { padding:0 16px 16px; }
  .x-compare-native .x-detail-bar { margin-inline:-16px; }
  .x-chat-prompt { margin-left:12px; }
}

/* The same reply workflow, with each platform's conversation and saved context. */
.social-discussion-comments { display:grid; gap:18px; margin:20px 0; font:14px/1.55 Arial,sans-serif; }
.social-discussion-comment { padding-left:14px; border-left:1px solid var(--native-line,#d6dfe1); }
.social-discussion-comment.is-nested { margin-left:24px; }
.social-discussion-comment header,.social-written-reply header { display:flex; align-items:center; gap:8px; }
.social-discussion-comment header .social-avatar { width:28px; height:28px; }
.social-discussion-comment header > span { color:#176aa3; font-size:11px; }
.social-discussion-comment p { margin:10px 0; }
.social-discussion-comment > div,.social-written-reply > div { display:flex; align-items:center; gap:12px; color:var(--native-muted,#576f76); font-size:12px; }
.social-discussion-comment svg,.social-written-reply svg { width:17px; height:17px; }
.social-saved-context { padding:16px 18px; margin:0 0 20px; border-left:3px solid #a5bd98; background:#eef3e9; color:#315541; font:14px/1.5 Arial,sans-serif; }
.social-saved-context > p { margin:7px 0 0; }
.social-message-post .social-message-body { margin:20px 0 0 48px; }
.social-message-body > span { display:block; margin-bottom:12px; color:#666; font-size:12px; }
.social-message-body .social-post-text { padding:16px 18px; border-radius:0 16px 16px; background:#edf3f8; }
.social-outcome-art { --native-ink:#1a282d; --native-muted:#576f76; --native-line:#dbe3e7; padding:24px; font-family:Arial,sans-serif; }
.social-outcome-art > div { overflow:hidden; padding:22px; border:1px solid #d8e0dc; border-radius:20px; background:#fff; }
.social-outcome-art .social-post { padding:0; }
.social-outcome-art .social-post-title { font-size:22px; }
.social-outcome-art .social-post-text { font-size:16px; }
.social-written-reply { margin-top:24px; padding-top:20px; border-top:1px solid var(--native-line); }
.social-written-reply > p { margin:14px 0 18px; font-size:17px; line-height:1.55; color:var(--native-ink); }
.social-outcome-demo { padding:0 22px 22px; }
.social-outcome-demo > .social-native-bar { margin-inline:-22px; }
.social-outcome-demo .social-thread { border:0; }
.social-outcome-demo .social-post { padding-inline:0; }
.social-outcome-demo .social-composer { margin-inline:0; }
.x-compare-tonebird > .social-platform-window { min-width:0; }
.x-compare-native[data-platform=reddit],.x-compare-native[data-platform=linkedin] { background:#fff; }
.x-compare-native .social-native-bar { margin-inline:-20px; }
.x-compare-native .social-post:not(.x-native-post) { padding-inline:0; }
.x-compare-native .social-post-text,.x-compare-native .social-post-title { overflow:visible; }
.x-compare-memory { max-width:38em; }
.x-extension-preview[data-platform=reddit],.x-extension-preview[data-platform=linkedin] { --native-ink:#1a282d; --native-muted:#576f76; --native-line:#dbe3e7; background:#fff; color:var(--native-ink); border-color:#d3ded7; }
.x-extension-preview:not([data-platform=x]) .social-native-bar { margin-inline:-20px; }
.x-extension-preview:not([data-platform=x]) .social-post { padding-inline:0; }
.x-extension-preview:not([data-platform=x]) .x-preset-menu { color:#24343c; border-color:#d3dfe4; background:#fff; box-shadow:0 8px 24px #29485b20; }
.x-extension-preview:not([data-platform=x]) .x-preset-menu .is-selected { background:#e4eef6; color:#176aa3; }
.social-lead-art { padding:28px; border-radius:28px; background:linear-gradient(135deg,#e7eee8,#e3e8ec); color:#29392e; font-family:Arial,sans-serif; }
.social-lead-task { overflow:hidden; border:1px solid #dbe5df; border-radius:22px; background:#fff; }
.social-lead-task > header { display:flex; align-items:center; gap:10px; padding:25px 24px 18px; font-size:25px; }
.social-lead-task-tabs { display:flex; gap:24px; padding:0 24px 18px; color:#6a786b; font-size:14px; }
.social-lead-task-tabs strong { color:#315541; }
.social-lead-task-item { display:flex; align-items:start; gap:14px; padding:28px 24px; border-top:1px solid #e0e7e2; }
.social-lead-task-item > .task-check { flex:none; width:18px; height:18px; border:1px solid #89988e; border-radius:3px; }
.social-lead-task-item strong { font-size:19px; }
.social-lead-task-item p { margin:10px 0 0; color:#6a786b; font-size:13px; }
.social-lead-source { padding:22px 24px; border-top:1px solid #e0e7e2; background:#f5f8f2; }
.social-lead-source > header { display:flex; align-items:center; gap:10px; font-size:14px; }
.social-lead-source .social-platform-logo { margin-left:auto; width:20px; height:20px; }
.social-lead-source > p { margin:16px 0 0; font-size:16px; line-height:1.55; }
.social-lead-calendar-art { background:linear-gradient(135deg,#e8dec6,#e8ede6); }
.social-lead-calendar-art .social-lead-source { border:0; border-radius:18px; background:#fff; }
.social-lead-calendar { overflow:hidden; margin-top:24px; border:1px solid #dedfdc; border-radius:18px; background:#fff; }
.social-lead-calendar > header { display:flex; align-items:center; gap:18px; padding:14px 18px; background:#f1f2ef; font-size:13px; }
.social-lead-calendar > header > span { color:#b4bcb2; font-size:10px; }
.social-lead-calendar > div { padding:22px; }
.social-lead-calendar > div > span:first-child { color:#6b776e; font-size:12px; }
.social-lead-calendar h3 { margin:10px 0 22px; color:#26372d; font-size:24px; line-height:1.2; letter-spacing:-.025em; }
.social-lead-calendar dl { display:grid; grid-template-columns:68px minmax(0,1fr); gap:16px 12px; margin:0; font-size:14px; line-height:1.5; }
.social-lead-calendar dt { color:#748075; }
.social-lead-calendar dd { margin:0; }
.social-calendar-confirm { display:table; margin:24px 0 0 auto; padding:9px 15px; border-radius:18px; background:#e6efdf; color:#315541; font-size:13px; }
@media(max-width:600px) {
  .social-outcome-art,.social-lead-art { padding:18px; border-radius:24px; }
  .social-outcome-art > div { padding:18px; }
  .social-outcome-demo { padding:0 16px 16px; }
  .social-outcome-demo > .social-native-bar,.x-compare-native .social-native-bar { margin-inline:-16px; }
  .social-discussion-comment.is-nested { margin-left:12px; }
  .social-lead-task-item,.social-lead-source { padding:20px; }
  .social-lead-calendar > div { padding:18px; }
  .social-lead-calendar dl { grid-template-columns:56px minmax(0,1fr); gap:14px 8px; font-size:13px; }
}
/* Keep the source visible above the open comparison reply; host bounds stay fixed. */
[data-social-comparison] .social-composer { margin-top:var(--compare-reply-space,20px); }

/* Public feedback follows the hero, using the existing Use Cases proof band. */
body.usecase-page.social-usecase-page main > .wispr-feedback-band,body.usecase-page.social-usecase-page main > .wispr-feedback-band + .social-values { margin-top:calc(var(--usecase-gap) / 2); }
.social-usecase-page .wispr-feedback-band .usecase-detail-quote-author { width:fit-content; min-height:44px; margin-inline:auto; }