/* Reference composition with the existing ToneBird website palette. */
.usecase-page { --usecase-gap:112px; --usecase-inner:40px; --usecase-reply-width:560px; --usecase-wash:#eaf2ec; background:var(--paper); }
.usecase-page main { display:flow-root; width:min(1520px,100%); margin-inline:auto; padding-bottom:80px; border-inline:1px solid var(--line); background:#fff; }
.usecase-page main > section { width:min(1320px,calc(100% - 160px)); padding-block:0; border:0; }
.usecase-page main > section + section { margin-top:var(--usecase-gap); }
:root body.usecase-page main .button { min-height:66px; padding:18px 28.5px; border-width:1.5px; border-radius:18px; font-size:18px; }
@media(max-width:600px) {
  :root body.usecase-page main .button { min-height:63px; padding-inline:21px; }
}
.usecase-page h1,.usecase-page h2,.usecase-page h3 { color:var(--ink); }
.usecase-page .tb-reply { padding:.45em; border-radius:1.7em; }
.usecase-page .tb-surface { padding-block:.75em .35em; border-radius:1.2em; }
.usecase-page .section-heading { max-width:none; margin-bottom:var(--usecase-inner); text-align:center; }
.usecase-page .section-heading h2 { max-width:none; font-size:48px; line-height:1.1; }
.usecase-page .section-heading p { margin:16px auto 0; }
.usecase-page .text-link { gap:0; color:var(--ink); text-decoration:none; }
.usecase-page .text-link:hover { text-decoration:underline; text-underline-offset:5px; }
.usecase-breadcrumb { display:flex; flex-wrap:wrap; gap:6px 10px; width:min(1320px,calc(100% - 160px)); margin:20px auto 0; color:var(--muted); font-size:11px; }
.usecase-breadcrumb a:hover { color:var(--accent); }
.usecase-examples { min-width:0; scroll-margin-top:112px; }
.usecase-example-stage { min-width:0; padding:24px; border:1px solid #e5e9ee; border-radius:2px; background:linear-gradient(145deg,#edf1f7,#eaf2ec); }
.usecase-panel-stack { position:relative; z-index:2; gap:10px; }
.usecase-panel-stack { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(7,auto); gap:12px; }
/* Shared intrinsic rows preserve stage and control positions across authored replies. */
.usecase-scenario { grid-column:1; grid-row:1 / span 7; display:grid; grid-template-columns:subgrid; grid-template-rows:subgrid; min-width:0; }
.usecase-scenario[aria-hidden=true] { visibility:hidden; }
.usecase-scenario-heading { grid-column:1; grid-row:1; padding:20px 22px; background:#ffffffa6; color:var(--ink); }
.usecase-scenario h2 { font-size:25px; line-height:1.18; letter-spacing:-.025em; color:var(--ink); }
.usecase-conversation { grid-column:1; grid-row:2 / span 6; display:grid; grid-template-columns:subgrid; grid-template-rows:subgrid; }
.usecase-incoming { grid-column:1; grid-row:1; justify-self:start; align-self:start; width:fit-content; max-width:84%; margin:0; padding:20px 22px; border:0; border-radius:18px 18px 18px 4px; background:#fff; }
.usecase-incoming p { color:var(--ink); font-size:16px; line-height:1.5; }
.usecase-reply-stage { grid-column:1; grid-row:4 / span 3; justify-self:end; width:92%; display:grid; grid-template-rows:subgrid; min-width:0; }
.usecase-scenario .tb-reply { display:flex; flex:1; flex-direction:column; font-size:17px; }
.usecase-scenario .tb-surface { flex:1; display:flex; flex-direction:column; }
.usecase-scenario .tb-text { display:grid; flex:1; line-height:1.5; }
.usecase-candidate { grid-area:1 / 1; visibility:hidden; opacity:0; transition:opacity 160ms ease-out,visibility 0s 160ms; }
.usecase-candidate.is-selected { visibility:visible; opacity:1; transition-delay:0s; }
.usecase-scenario[aria-hidden=true] .usecase-candidate { visibility:hidden; opacity:0; transition:none; }
.usecase-candidate mark { color:inherit; background:#c8e9ce70; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.usecase-scenario-nav { display:none; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:16px; }
.usecase-enhanced .usecase-scenario-nav { display:grid; }
.usecase-scenario-nav button { padding:12px 10px; min-height:46px; border:1px solid var(--line); border-radius:4px; background:#fff; color:var(--muted); font:inherit; font-size:13px; line-height:1.4; cursor:pointer; transition:background-color 160ms ease-out,border-color 160ms ease-out,color 160ms ease-out,transform 160ms ease-out; }
@media(hover:hover) { .usecase-scenario-nav button:hover { border-color:#315b46; } }
.usecase-scenario-nav button:active { transform:scale(.96); }
.usecase-scenario-nav button[aria-pressed=true] { border-color:#315b46; color:#244d36; background:#edf3ef; }
.usecase-scenario-nav button:focus-visible { outline:2px solid #526abb; outline-offset:3px; }
.usecase-scenario .tb-dot { min-width:28px; height:28px; }
.usecase-scenario .tb-arrow { min-height:44px; }
.usecase-scenario .tb-toolbar { pointer-events:none; }
.usecase-examples:not(.usecase-enhanced) .tb-arrow,.usecase-examples:not(.usecase-enhanced) .tb-candidates { display:none; }
.usecase-context-brand { display:inline-grid; place-items:center; width:80px; height:80px; border:1px solid #e1e5e4; border-radius:18px; background:#fff; box-shadow:0 8px 16px #294b4a18,inset 0 1px 1px #fff; }
.usecase-context-brand img { width:60%; height:auto; }
.usecase-tone-visual .landing-demo { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 32px; padding:32px; border:0; border-radius:24px; background:linear-gradient(115deg,#f5f8fa,#f0f7f5); box-shadow:0 18px 50px #294b4a30; }
.usecase-tone-visual .landing-app-heading { grid-column:1 / -1; margin-bottom:28px; }
.usecase-tone-visual .landing-message { grid-column:1; grid-row:2; padding:12px 0; }
.usecase-tone-visual .landing-message p { font-size:18px; line-height:1.6; }
.usecase-tone-visual .landing-composer { display:contents; }
.usecase-tone-visual .landing-composer > label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.usecase-tone-visual .landing-composer > .tb-host-field { grid-column:1 / -1; margin-top:16px; }
.usecase-tone-visual .landing-suggestion { grid-column:2; grid-row:2; position:relative; align-self:start; bottom:auto; right:auto; width:100%; max-width:var(--usecase-reply-width); display:grid; margin:0 0 0 auto; }
.usecase-tone-visual .landing-suggestion[hidden] { display:grid !important; visibility:hidden; }
.usecase-tone-visual .landing-suggestion > .tb-reply,.usecase-tone-visual .landing-edit { grid-area:1 / 1; }
.usecase-tone-visual .landing-close { top:-18px; right:-10px; z-index:3; }
.usecase-tone-visual .landing-edit[hidden] { display:block !important; visibility:hidden; pointer-events:none; }
.usecase-tone-visual .landing-edit:not([hidden]) { visibility:visible; }
.usecase-tone-visual .is-editing > .tb-reply { visibility:hidden; }
.usecase-tone-visual .tb-text { display:grid; line-height:1.5; }
.usecase-tone-visual .landing-candidate { grid-area:1 / 1; visibility:hidden; }
.usecase-tone-visual .landing-candidate.is-selected { visibility:visible; }
.usecase-tone-visual .is-editing .landing-candidate,.usecase-tone-visual .landing-suggestion[hidden] .landing-candidate { visibility:hidden; }
.usecase-tone-visual .landing-edit textarea { font-size:15px; resize:none; }
.usecase-tone-visual .landing-composer .tb-host-input { min-height:64px; }
.usecase-flow-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 28px; list-style:none; padding:0; margin:0; }
.usecase-flow-grid > li { display:grid; grid-template-rows:subgrid; grid-row:span 3; min-width:0; }
.usecase-step-visual { height:100%; aspect-ratio:4 / 3; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:28px; padding:24px; border:1px solid #e5e9ee; border-radius:3px; background:linear-gradient(145deg,#edf1f7,#eaf2ec); }
.usecase-step-visual .tb-reply { font-size:15px; }
.usecase-step-visual .tb-text { line-height:1.5; }
.usecase-step-visual .tb-host-field { min-height:58px; }
.usecase-step-message p,.usecase-inserted { color:var(--ink); font-size:15px; line-height:1.5; }
.usecase-inserted { padding-block:6px; }
.usecase-flow-grid h3 { font-size:23px; line-height:1.3; letter-spacing:-.025em; }
.usecase-flow-grid > li > p { font-size:16px; line-height:1.6; }
.usecase-workflow-platforms { margin-top:32px; font-size:13px; text-align:center; }
.usecase-workflow-platforms a { text-decoration:underline; text-underline-offset:4px; }
.usecase-page main > .usecase-faq { width:min(860px,calc(100% - 160px)); }
.usecase-faq .faq-list summary { padding-block:24px; font-size:18px; }
.usecase-page .actions { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; }
.usecase-faq > .actions { justify-content:center; margin-top:28px; }
.usecase-faq > .actions .text-link { font-size:14px; text-decoration:underline; text-underline-offset:5px; }
.usecase-page main > .usecase-adjacent { display:flex; align-items:center; justify-content:space-between; gap:32px; margin-top:var(--usecase-gap); padding-top:32px; border-top:1px solid var(--line); }
.usecase-page .usecase-adjacent p { max-width:760px; margin:0; font-size:15px; }
.usecase-adjacent .text-link { flex-shrink:0; font-size:14px; text-decoration:underline; text-underline-offset:5px; }
.usecase-page main > .landing-download { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:32px; margin-top:var(--usecase-gap); padding:40px; border:0; border-radius:3px; background:var(--usecase-wash); }
.usecase-page .landing-download h2 { max-width:620px; font-size:32px; }
.usecase-page .landing-download p { margin-top:10px; }
.usecase-page .landing-download > .button { margin:0; align-self:center; }
.usecase-page main > .usecase-overview-hero { padding-block:32px 0; text-align:center; }
.usecase-overview-hero h1 { max-width:760px; margin-inline:auto; text-wrap:balance; }
.usecase-overview-hero .lead { max-width:560px; margin:30px auto 0; color:var(--ink); font-size:21px; line-height:1.55; text-wrap:balance; }
.usecase-page main > .usecase-entry-grid { margin-top:96px; display:grid; gap:96px; }
.usecase-entry { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; align-items:center; }
.usecase-entry-copy { grid-column:2; grid-row:1; }
.usecase-entry h2 { font-size:48px; line-height:1.1; }
.usecase-entry-copy > p { max-width:440px; margin-top:20px; font-size:18px; line-height:1.6; }
.usecase-entry .text-link { display:inline-block; margin-top:24px; padding:12px 20px; border-radius:4px; background:#ffffffa6; color:var(--ink); font-size:14px; }
.usecase-entry-preview { grid-column:1; grid-row:1; padding:32px; border:1px solid #e5e9ee; border-radius:2px; background:linear-gradient(145deg,#edf1f7,#eaf2ec); }
.usecase-example-label { margin-bottom:16px; color:var(--ink); font-size:12px; font-weight:500; }
.usecase-entry blockquote { margin:0 0 24px; padding:20px; color:var(--ink); background:#fff; font-size:17px; line-height:1.5; }
.usecase-entry-reply .tb-reply { font-size:17px; }
.usecase-entry-reply .tb-text { line-height:1.5; }
.usecase-entry:hover .text-link { background:var(--canvas); text-decoration:none; }

@media(max-width:1100px) {
  .usecase-page .section-heading h2,.usecase-entry h2 { font-size:40px; }
  .usecase-page main > section,.usecase-breadcrumb,.usecase-page main > .usecase-faq { width:calc(100% - 80px); }
  .usecase-entry { gap:28px; }
  .usecase-entry-preview { padding:20px; }
  .usecase-flow-grid { column-gap:20px; }
  .usecase-step-visual { padding:20px; }
}
@media(max-width:850px) {
  .usecase-page { --usecase-gap:88px; --usecase-inner:32px; }
  .usecase-entry { grid-template-columns:1fr; gap:32px; }
  .usecase-flow-grid { grid-template-columns:1fr; gap:44px; }
  .usecase-flow-grid > li { width:100%; max-width:480px; margin-inline:auto; grid-row:auto; grid-template-rows:auto auto auto; gap:16px; }
  .usecase-step-visual { padding:28px; }
  .usecase-page main > .landing-download { grid-template-columns:minmax(0,1fr) auto; }
  .usecase-page .landing-download > img { display:none; }
  .usecase-entry-copy,.usecase-entry-preview { grid-column:1; grid-row:auto; }
  .usecase-entry-copy { order:-1; }
}
@media(max-width:600px) {
  .usecase-page { --usecase-gap:72px; --usecase-inner:28px; }
  .usecase-page main { border:0; padding-bottom:48px; }
  .usecase-page main > section,.usecase-breadcrumb,.usecase-page main > .usecase-faq { width:calc(100% - 40px); }
  .usecase-breadcrumb { margin-top:16px; font-size:10px; }
  .usecase-page main > .usecase-overview-hero { padding-top:24px; }
  .usecase-overview-hero .lead { margin-top:22px; font-size:17px; line-height:1.55; }
  .usecase-page main > .usecase-entry-grid { margin-top:48px; gap:72px; }
  .usecase-entry-preview { padding:16px; }
  .usecase-page .section-heading h2,.usecase-entry h2 { font-size:32px; }
  .usecase-step-visual { aspect-ratio:1; padding:20px; }
  .usecase-flow-grid h3 { font-size:23px; }
  .usecase-flow-grid > li > p { font-size:15px; }
  .usecase-workflow-platforms { margin-top:28px; }
  .usecase-faq .faq-list summary { padding-block:22px; font-size:16px; }
  .usecase-page main > .usecase-adjacent { display:block; margin-top:var(--usecase-gap); padding-top:24px; }
  .usecase-page .usecase-adjacent p { margin-bottom:16px; }
  .usecase-page main > .landing-download { grid-template-columns:1fr; padding:28px 24px; gap:24px; margin-top:var(--usecase-gap); }
  .usecase-page .landing-download h2 { font-size:28px; }
  .usecase-page .landing-download > .button { justify-self:start; }
  .usecase-entry-copy > p { margin-top:16px; font-size:16px; }
  .usecase-entry .text-link { margin-top:20px; }
  .usecase-entry blockquote { padding:16px; margin-bottom:20px; font-size:16px; }
  .usecase-entry-reply .tb-reply { font-size:16px; }
}
@media(max-width:360px) { .usecase-page main > section,.usecase-breadcrumb,.usecase-page main > .usecase-faq { width:calc(100% - 32px); } }
@media(prefers-reduced-motion:reduce) { .usecase-page *,.usecase-page *::before,.usecase-page *::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }
/* Audience pages: split hero, illustrated feature spreads and paired product scenes. */
body[data-usecase-id] { --usecase-gap:224px; }
body[data-usecase-id] main { border-inline:0; }
body[data-usecase-id] main > .usecase-detail-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:88px; padding-top:56px; }
.usecase-detail-hero-copy h1 { max-width:10em; font-size:clamp(52px,4.9vw,72px); line-height:1.05; letter-spacing:-.055em; text-wrap:balance; }
.usecase-detail-hero-copy .lead { max-width:500px; margin:28px 0 32px; color:var(--ink); font-size:20px; line-height:1.6; }
.usecase-detail-platforms { margin-top:20px; font-size:13px; color:var(--muted); }
.usecase-canvas { position:relative; min-width:0; border-radius:32px; isolation:isolate; }
.usecase-art-windowbar { display:flex; align-items:center; gap:12px; color:#364049; font-size:14px; }
.usecase-art-windowbar > img { flex:none; width:24px; height:24px; object-fit:contain; }
.usecase-art-windowbar > strong { font-weight:600; }
.usecase-art-windowbar > span { margin-left:auto; letter-spacing:2px; color:#8e969d; }.usecase-task-quote > img,.usecase-meeting-message > img { flex:none; width:40px; height:40px; border-radius:50%; background:#fff; object-fit:contain; }
.usecase-art-check { display:block; flex:none; width:17px; height:17px; margin-top:4px; border:1.5px solid #91a39b; border-radius:5px; }
.usecase-art-date { display:grid; flex:none; min-width:37px; padding:5px; border:1px solid #e6dad3; border-radius:8px; background:#fff; text-align:center; }
.usecase-art-date > small { margin:0; color:#be7165; font-size:9px; }
.usecase-art-date > strong { font-size:21px; line-height:1.2; }
body[data-usecase-id] main > .usecase-detail-quote { display:flex; flex-direction:column; align-items:center; gap:32px; width:min(1440px,calc(100% - 48px)); padding:72px; border-radius:40px; background:#243a32; text-align:center; }
.usecase-detail-quote blockquote { max-width:980px; margin:0; }
.usecase-detail-quote blockquote p { color:#f8fbf6; font-size:36px; line-height:1.35; letter-spacing:-.03em; text-wrap:balance; }
.usecase-detail-quote-author { display:flex; align-items:center; gap:16px; color:#f0f5ef; font-size:15px; text-align:left; }
.usecase-detail-quote-author img { width:52px; height:52px; border-radius:50%; object-fit:cover; }
.usecase-detail-quote-author small { display:block; margin-top:4px; color:#c1d0c6; font-size:12px; }
.usecase-section-intro { max-width:820px; margin:0 auto 64px; text-align:center; }
.usecase-section-intro h2 { max-width:640px; margin-inline:auto; font-size:56px; line-height:1.1; letter-spacing:-.045em; text-wrap:balance; }
.usecase-section-intro > p { max-width:560px; margin:24px auto 0; color:var(--muted); font-size:19px; line-height:1.6; text-wrap:balance; }
.usecase-scenarios .usecase-examples { display:grid; grid-template-columns:minmax(180px,.28fr) minmax(0,1fr); align-items:center; gap:48px; }
.usecase-scenarios .usecase-scenario-nav { display:flex; flex-direction:column; gap:12px; margin:0; }
.usecase-scenarios .usecase-scenario-nav button { min-height:64px; padding:18px 20px; border-radius:16px; color:#45564e; background:#f5f8f5; border-color:transparent; text-align:left; font-size:16px; }
.usecase-scenarios .usecase-scenario-nav button[aria-pressed=true] { color:#fff; background:#315d47; }
.usecase-scenarios .usecase-example-stage { position:relative; isolation:isolate; min-height:620px; padding:200px 40px 32px 252px; border:0; border-radius:28px; background:#e9eef2; }
.usecase-scenarios .usecase-panel-stack { position:relative; z-index:2; width:100%; max-width:760px; grid-template-rows:repeat(4,auto); gap:14px; }
.usecase-scenarios .usecase-scenario { grid-row:1 / span 4; }
.usecase-scenarios .usecase-scenario-heading { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.usecase-scenarios .usecase-conversation { grid-row:1 / span 4; }
.usecase-scenarios .usecase-incoming { grid-row:1; max-width:100%; margin:0; padding:0; background:transparent; border-radius:0; }
.usecase-incoming-person { display:flex; align-items:center; gap:12px; margin-bottom:12px; font-size:14px; }
.usecase-incoming-person img { width:32px; height:32px; border-radius:50%; background:#fff; }
.usecase-incoming-person strong { font-weight:600; }
.usecase-scenarios .usecase-incoming p { font-size:17px; line-height:1.5; }
.usecase-scenarios .usecase-reply-stage { grid-row:2 / span 3; justify-self:stretch; width:100%; }
.usecase-scenarios .usecase-reply-stage > .tb-reply { grid-row:1 / span 2; justify-self:end; width:min(86%,var(--usecase-reply-width)); font-size:17px; }
.usecase-feature-spread { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); align-items:center; gap:96px; }
.usecase-feature-copy { min-width:0; }
.usecase-content-actions { margin-top:28px; justify-content:flex-start; flex-wrap:wrap; gap:16px 24px; }
.usecase-feature-pair > article > .usecase-content-actions { margin-top:0; justify-content:center; }
@media(max-width:850px) { .usecase-feature-pair > article > .usecase-content-actions { margin-top:28px; } }
.usecase-feature-copy h2 { font-size:52px; line-height:1.08; letter-spacing:-.045em; text-wrap:balance; }
.usecase-feature-copy > p { max-width:440px; margin-top:28px; color:var(--ink); font-size:19px; line-height:1.65; }
.usecase-feature-copy > p + p { margin-top:20px; color:var(--muted); font-size:16px; }
.usecase-opener-art { padding:40px; background:radial-gradient(ellipse at 5% 10%,#f8f1e7,transparent 56%),linear-gradient(140deg,#e9e5f1,#d6e0ee); }
.usecase-opener-window { border:1px solid #fff; border-radius:24px; background:#fcfdfef5; box-shadow:0 18px 45px #3b4b6520; }
.usecase-opener-window > .usecase-art-windowbar { padding:16px 24px; border-bottom:1px solid #e5e8eb; }
.usecase-opener-window .usecase-tone-visual .landing-demo { display:block; padding:20px 24px 24px; border-radius:0; background:transparent; box-shadow:none; }
.usecase-opener-window .landing-original { margin:0 0 18px; padding:0; border:0; color:#75817e; font-size:13px; line-height:1.55; background:transparent; }
.usecase-opener-window .landing-original p { font-size:13px; line-height:1.55; }
.usecase-opener-window .landing-suggestion .tb-reply { font-size:16px; }
.usecase-opener-window .landing-composer .tb-host-field { margin-top:16px; }
.usecase-opener-window .landing-composer .tb-host-input { height:44px; min-height:44px; font-size:14px; }
.usecase-feature-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 32px; }
.usecase-feature-pair > article { display:grid; grid-template-rows:subgrid; grid-row:span 4; min-width:0; text-align:center; }
.usecase-feature-pair > article > h2 { max-width:13em; margin-inline:auto; font-size:42px; line-height:1.1; letter-spacing:-.04em; text-wrap:balance; }
.usecase-feature-pair > article > p { max-width:480px; margin:0 auto; padding-inline:16px; font-size:17px; line-height:1.65; }
.usecase-feature-pair .usecase-canvas { min-height:580px; margin-top:12px; padding:40px; }
.usecase-task-art { display:flex; align-items:center; background:radial-gradient(ellipse at 10% 10%,#f7f0e4,transparent 60%),linear-gradient(140deg,#eae9dc,#d9e8db); }
.usecase-task-composition { width:100%; }
.usecase-task-sheet { padding:28px 24px; border:1px solid #fff; border-radius:24px; background:#fbfcf8f2; box-shadow:0 16px 36px #3a523121; text-align:left; }
.usecase-task-sheet ul { padding:0; margin:0; list-style:none; }
.usecase-task-sheet li { display:flex; align-items:flex-start; gap:12px; padding:20px 0; border-bottom:1px solid #e7ebe6; }
.usecase-task-sheet li:last-child { padding-bottom:0; border-bottom:0; }
.usecase-task-sheet li > div { flex:1; min-width:0; }
.usecase-task-sheet li p { color:#3e5143; font-size:15px; line-height:1.5; }
.usecase-task-quote { display:flex; align-items:flex-start; gap:12px; width:92%; margin:22px auto 0; padding:18px; border:1px solid #f9fbf8; border-radius:16px; background:#ffffffc9; text-align:left; box-shadow:0 10px 24px #344d3010; }
.usecase-task-quote > img { width:30px; height:30px; }
.usecase-task-quote strong { color:#798379; font-size:11px; font-weight:500; }
.usecase-task-quote p { margin-top:6px; color:#48574b; font-size:14px; line-height:1.55; }
.usecase-meeting-section { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); }
.usecase-meeting-art { padding:40px; background:radial-gradient(ellipse at 90% 10%,#fbefdc,transparent 58%),linear-gradient(140deg,#edd9d4,#e9e0e9); }
body[data-usecase-id=sales] .usecase-meeting-art { background:radial-gradient(ellipse at 10% 10%,#f0f6ed,transparent 56%),linear-gradient(140deg,#dae9e6,#c8dfe7); }
body[data-usecase-id=workplace-communication] .usecase-meeting-art { background:radial-gradient(ellipse at 10% 10%,#eeefdc,transparent 56%),linear-gradient(140deg,#e3e9de,#d3e4d9); }
.usecase-meeting-message { display:flex; align-items:flex-start; gap:12px; width:86%; margin-bottom:28px; padding:20px; border:1px solid #fff; border-radius:20px; background:#ffffffdb; box-shadow:0 12px 28px #493d3910; }
.usecase-meeting-message strong { font-size:13px; }
.usecase-meeting-message p { margin-top:8px; color:#5f6567; font-size:14px; line-height:1.55; }
.usecase-calendar-date { display:flex; flex-direction:column; gap:6px; padding:22px 24px; color:#4b565e; }
.usecase-calendar-date strong { font-size:20px; font-weight:500; }
.usecase-calendar-date span { color:#9aa2a7; font-size:12px; }
.usecase-calendar-event strong { display:block; font-size:14px; font-weight:600; }
.usecase-calendar-event > span { display:block; margin-top:6px; font-size:11px; }
.usecase-calendar-footer { display:flex; align-items:center; gap:16px; padding:16px 24px; border-top:1px solid #e6ecef; font-size:11px; color:#9ca5a8; }
.usecase-calendar-footer > span:first-child { display:flex; align-items:center; gap:6px; margin-right:auto; }
.usecase-calendar-footer i { width:8px; height:8px; border-radius:2px; background:#92b7cf; }
.usecase-calendar-footer strong { padding:6px 15px; border-radius:5px; color:#486675; background:#e0edf4; font-weight:500; }
.usecase-calendar-provider { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:20px; color:#767c7e; font-size:11px; }
.usecase-calendar-apps { display:flex; align-items:center; gap:14px; margin-top:28px; }
.usecase-apple-calendar { display:flex; flex-direction:column; width:32px; height:32px; overflow:hidden; border:1px solid #e1e3e6; border-radius:6px; text-align:center; background:#fff; box-shadow:0 3px 5px #263a4a10; }
.usecase-apple-calendar small { padding-top:2px; color:#fff; background:#dc8a83; font-size:7px; line-height:10px; }
.usecase-apple-calendar strong { color:#6c737b; font-size:17px; line-height:19px; font-weight:400; }
body[data-usecase-id] .usecase-workflow .section-heading { margin-bottom:40px; text-align:left; }
body[data-usecase-id] .usecase-step-visual { border:0; border-radius:24px; }
.usecase-availability { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); align-items:center; gap:100px; }
.usecase-availability h2,.usecase-privacy h2 { max-width:9em; font-size:56px; line-height:1.08; letter-spacing:-.045em; text-wrap:balance; }
.usecase-availability-copy > p,.usecase-privacy p { max-width:480px; margin-top:28px; font-size:18px; line-height:1.65; }
.usecase-availability-rails { display:grid; gap:24px; min-width:0; padding-block:48px; mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); }
.usecase-availability-rail { display:flex; overflow:hidden; min-width:0; }
.usecase-availability-track { display:flex; width:max-content; animation:usecase-rail 28s linear infinite; animation-play-state:paused; }
.is-playing .usecase-availability-track { animation-play-state:running; }
.is-languages .usecase-availability-track { animation-direction:reverse; animation-duration:32s; }
.usecase-availability-track ul { display:flex; flex:none; align-items:center; gap:24px; margin:0; padding:0 24px 0 0; list-style:none; }
.usecase-availability-track li { display:grid; place-items:center; flex:none; min-width:72px; height:72px; padding:16px; border:1px solid #e5ebe8; border-radius:20px; background:#f3f7f5; }
.usecase-availability-track img { width:36px; height:36px; object-fit:contain; }
.is-languages .usecase-availability-track li { min-width:100px; height:56px; padding:12px 20px; border-radius:28px; font-size:17px; background:#edf2f7; }
@keyframes usecase-rail { to { transform:translateX(-33.333333%); } }
body[data-usecase-id] main > .usecase-privacy { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:64px; padding:64px 72px; border-radius:32px; background:#eef5ef; }
.usecase-privacy > img { display:block; width:100%; height:auto; max-width:440px; justify-self:center; }
.usecase-privacy p + p { margin-top:16px; font-size:15px; color:var(--muted); }
body[data-usecase-id] main > .usecase-detail-faq { display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:88px; width:min(1320px,calc(100% - 160px)); }
body[data-usecase-id] .usecase-detail-faq .section-heading { margin:0; text-align:left; }
body[data-usecase-id] .usecase-detail-faq .section-heading h2 { font-size:44px; }
body[data-usecase-id] .usecase-detail-faq .actions { justify-content:flex-start; }
body[data-usecase-id] main > .usecase-adjacent { margin-top:var(--usecase-gap); }
body[data-usecase-id] main > .landing-download { display:flex; flex-direction:column; align-items:center; gap:28px; margin-top:var(--usecase-gap); padding:72px 32px; border-radius:32px; text-align:center; background:#eaf2ec; }
body[data-usecase-id] .landing-download > img { display:block; }
body[data-usecase-id] .landing-download h2 { font-size:48px; }
body[data-usecase-id] .landing-download p { margin-top:16px; }
@media(max-width:1100px) {
  body[data-usecase-id] main > .usecase-detail-hero { gap:48px; }
  .usecase-detail-hero-copy h1 { font-size:clamp(40px,4.6vw,54px); }
  .usecase-detail-hero-copy .lead { font-size:18px; }
  .usecase-feature-spread { gap:56px; }
  .usecase-feature-copy h2 { font-size:clamp(36px,3.8vw,42px); }
  .usecase-feature-copy > p { font-size:17px; }
  .usecase-opener-art,.usecase-meeting-art { padding:28px; }
  .usecase-opener-window > .usecase-art-windowbar { padding:18px; }
  .usecase-opener-window .usecase-tone-visual .landing-demo { padding:18px; }
  .usecase-opener-window .landing-suggestion .tb-reply { font-size:15px; }
  .usecase-feature-pair > article > h2 { font-size:36px; }
  .usecase-feature-pair .usecase-canvas { min-height:520px; padding:28px; }
  .usecase-task-sheet { padding:24px 20px; }
  .usecase-scenarios .usecase-examples { grid-template-columns:180px minmax(0,1fr); gap:32px; }
  .usecase-scenarios .usecase-scenario-nav button { padding:16px; font-size:14px; }
  .usecase-scenarios .usecase-example-stage { padding:200px 24px 28px 104px; }
  .usecase-scenarios .usecase-reply-stage > .tb-reply { width:100%; max-width:var(--usecase-reply-width); }
  .usecase-section-intro h2 { font-size:48px; }
  .usecase-availability { gap:56px; }
  body[data-usecase-id] main > .usecase-privacy { padding:48px; gap:40px; }
  .usecase-availability h2,.usecase-privacy h2 { font-size:46px; }
  body[data-usecase-id] main > .usecase-detail-faq { width:calc(100% - 80px); gap:48px; }
  body[data-usecase-id] .usecase-detail-faq .section-heading h2 { font-size:clamp(32px,3.8vw,44px); }
}
@media(max-width:900px) {
  body[data-usecase-id] main > .usecase-detail-hero { grid-template-columns:minmax(0,1fr); gap:48px; }
  .usecase-detail-hero-copy { max-width:680px; }
  .usecase-detail-hero-copy h1 { max-width:11em; font-size:60px; }
  .usecase-detail-hero-copy .lead { max-width:580px; }
  .usecase-feature-spread,.usecase-meeting-section { grid-template-columns:minmax(0,1fr); gap:40px; }
  .usecase-feature-copy { max-width:640px; }
  .usecase-feature-copy h2 { font-size:48px; }
  .usecase-feature-copy > p { max-width:580px; }
  .usecase-opener-art,.usecase-meeting-art { width:100%; max-width:680px; justify-self:center; padding:40px; }
  .usecase-opener-window { max-width:530px; margin-right:auto; }
  .usecase-meeting-message { max-width:450px; }
  .usecase-scenarios .usecase-examples { grid-template-columns:minmax(0,1fr); gap:28px; }
  .usecase-scenarios .usecase-scenario-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
  .usecase-scenarios .usecase-scenario-nav button { text-align:center; }
  .usecase-scenarios .usecase-example-stage { padding:200px 40px 32px 160px; }
}
@media(max-width:850px) {
  body[data-usecase-id] { --usecase-gap:176px; }
  body[data-usecase-id] main > .usecase-detail-quote { padding:48px 40px; }
  .usecase-detail-quote blockquote p { font-size:30px; }
  .usecase-feature-pair { grid-template-columns:minmax(0,1fr); gap:96px; }
  .usecase-feature-pair > article { display:block; grid-row:auto; max-width:680px; width:100%; margin-inline:auto; }
  .usecase-feature-pair > article > h2 { max-width:600px; font-size:42px; }
  .usecase-feature-pair > article > p { margin-top:24px; }
  .usecase-feature-pair .usecase-canvas { min-height:0; margin-top:32px; padding:40px; }
  .usecase-availability { grid-template-columns:minmax(0,1fr); gap:40px; }
  .usecase-availability-rails { padding-block:0; }
  body[data-usecase-id] main > .usecase-privacy { grid-template-columns:minmax(0,1fr); gap:32px; padding:40px; }
  .usecase-privacy > img { max-width:340px; }
  body[data-usecase-id] main > .usecase-detail-faq { grid-template-columns:minmax(0,1fr); gap:24px; }
}
@media(max-width:600px) {
  body[data-usecase-id] { --usecase-gap:144px; }
  body[data-usecase-id] main > .usecase-detail-hero { gap:40px; padding-top:32px; }
  .usecase-detail-hero-copy h1 { font-size:clamp(32px,10vw,40px); }
  .usecase-detail-hero-copy .lead { margin:24px 0 28px; font-size:17px; }
  .usecase-detail-platforms { margin-top:16px; font-size:12px; }
  .usecase-canvas { border-radius:24px; }
  .usecase-art-windowbar { gap:10px; font-size:12px; }
  .usecase-art-date { min-width:30px; padding:4px; }
  .usecase-art-date > strong { font-size:18px; }
  body[data-usecase-id] main > .usecase-detail-quote { width:calc(100% - 24px); padding:40px 28px; border-radius:28px; }
  .usecase-detail-quote blockquote p { font-size:25px; }
  .usecase-detail-quote-author { gap:12px; font-size:13px; }
  .usecase-detail-quote-author img { width:44px; height:44px; }
  .usecase-section-intro { margin-bottom:36px; text-align:left; }
  .usecase-section-intro h2,.usecase-feature-copy h2 { font-size:clamp(30px,9vw,36px); line-height:1.12; }
  .usecase-section-intro > p { margin-top:22px; font-size:17px; }
  .usecase-scenarios .usecase-scenario-nav { display:flex; flex-direction:row; overflow-x:auto; gap:8px; scrollbar-width:none; }
  .usecase-scenarios .usecase-scenario-nav button { flex:none; min-width:132px; min-height:48px; padding:12px; border-radius:10px; font-size:12px; }
  .usecase-scenarios .usecase-example-stage { min-height:0; padding:184px 24px 28px; border-radius:24px; }
  .usecase-scenarios .usecase-incoming p,.usecase-scenarios .usecase-reply-stage > .tb-reply { font-size:15px; }
  .usecase-incoming-person { gap:8px; margin-bottom:10px; font-size:13px; }
  .usecase-incoming-person img { width:28px; height:28px; }
  .usecase-feature-spread { gap:32px; }
  .usecase-feature-copy > p { margin-top:24px; font-size:17px; }
  .usecase-feature-copy > p + p { margin-top:18px; font-size:15px; }
  .usecase-feature-copy > .text-link { margin-top:24px; }
  .usecase-opener-art,.usecase-meeting-art { padding:24px 20px; }
  .usecase-opener-window { border-radius:18px; }
  .usecase-opener-window > .usecase-art-windowbar { padding:16px; }
  .usecase-opener-window .usecase-tone-visual .landing-demo { padding:18px 16px; }
  .usecase-opener-window .landing-original { margin-bottom:24px; }
  .usecase-opener-window .landing-original p { font-size:12px; }
  .usecase-opener-window .landing-suggestion .tb-reply { font-size:14px; }
  .usecase-opener-window .landing-composer .tb-host-input { min-height:44px; }
  .usecase-feature-pair > article > h2 { font-size:clamp(30px,9vw,36px); }
  .usecase-feature-pair > article > p { padding:0; margin-top:22px; font-size:17px; }
  .usecase-feature-pair .usecase-canvas { padding:28px 20px; }
  .usecase-task-sheet { padding:22px 18px; border-radius:20px; }
  .usecase-task-sheet li { gap:10px; padding-block:18px; }
  .usecase-task-sheet li p { font-size:14px; }
  .usecase-task-quote { width:96%; padding:16px; gap:10px; }
  .usecase-task-quote p { font-size:12px; }
  .usecase-meeting-message { width:96%; padding:18px; margin-bottom:22px; }
  .usecase-meeting-message p { font-size:12px; }
  .usecase-meeting-message > img { width:32px; height:32px; }
  .usecase-calendar-date { padding:20px 18px; }
  .usecase-calendar-date strong { font-size:18px; }
  .usecase-calendar-event strong { font-size:12px; }
  .usecase-calendar-event > span { font-size:10px; }
  .usecase-calendar-footer { padding-inline:18px; }
  .usecase-calendar-provider { gap:6px; margin-top:18px; font-size:9px; }
  .usecase-calendar-provider img { width:20px; height:20px; }
  .usecase-availability h2,.usecase-privacy h2 { font-size:36px; }
  .usecase-availability-copy > p,.usecase-privacy p { margin-top:24px; font-size:17px; }
  .usecase-availability-rails { gap:20px; }
  .usecase-availability-track ul { gap:16px; padding-right:16px; }
  .usecase-availability-track li { min-width:64px; height:64px; padding:14px; }
  .is-languages .usecase-availability-track li { min-width:92px; height:48px; padding:10px 18px; font-size:15px; }
  body[data-usecase-id] main > .usecase-privacy { padding:32px 24px; border-radius:24px; }
  body[data-usecase-id] main > .usecase-detail-faq { width:calc(100% - 40px); }
  body[data-usecase-id] .usecase-detail-faq .section-heading h2 { font-size:32px; }
  body[data-usecase-id] main > .usecase-adjacent,body[data-usecase-id] main > .landing-download { margin-top:var(--usecase-gap); }
  body[data-usecase-id] main > .landing-download { padding:48px 24px; border-radius:24px; }
  body[data-usecase-id] .landing-download h2 { font-size:32px; }
}
@media(max-width:360px) {
  .usecase-art-date { min-width:26px; }
}
@media(prefers-reduced-motion:reduce) {
  .usecase-availability-rails { mask-image:none; }
  .usecase-availability-rail { overflow-x:auto; }
  .usecase-availability-track { animation:none; transform:none; }
  .usecase-availability-track > ul[aria-hidden=true] { display:none; }
}

/* Email uses a centered introduction and a shallow, wide Gmail scene. */
body[data-usecase-id=email-replies] main > .email-detail-hero { display:block; padding-top:32px; }.usecase-art-date) { display:block; margin-top:5px; color:#79887f; font-size:11px; line-height:1.4; }
.usecase-next-steps .usecase-meeting-art { display:flex; align-items:center; }
.usecase-next-steps .usecase-meeting-composition { width:100%; }
@media(max-width:1100px) {
}
@media(max-width:850px) {
}
@media(max-width:600px) {
  body[data-usecase-id=email-replies] main > .email-detail-hero { padding-top:28px; }.usecase-art-date) { font-size:9px; }
}

/* A customer task lives within the freelancer workflow, without another route. */
.client-reentry-section > .usecase-section-intro { max-width:820px; margin-inline:auto; text-align:center; }
.client-reentry-section > .usecase-section-intro p { max-width:650px; margin-inline:auto; }
.client-reentry-art { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); align-items:center; gap:56px; padding:48px; background:radial-gradient(ellipse at 5% 5%,#f7efe1,transparent 62%),linear-gradient(130deg,#eaf1e9,#dce9e6); }
.client-reentry-context { min-width:0; }
.client-reentry-contact { display:flex; align-items:center; gap:16px; }
.client-reentry-contact > img { width:60px; height:60px; object-fit:contain; border-radius:50%; background:#ffffffb3; }
.client-reentry-contact strong { display:block; font-size:24px; letter-spacing:-.03em; }
.client-reentry-contact span { display:block; margin-top:4px; color:#63786b; font-size:14px; }
.client-reentry-context dl { display:grid; gap:24px; margin:32px 0; }
.client-reentry-context dl > div { padding-top:20px; border-top:1px solid #b9cbbf; }
.client-reentry-context dt { color:#6b7c72; font-size:12px; }
.client-reentry-context dd { margin:8px 0 0; color:#354b3d; font-size:18px; line-height:1.5; }
.client-reentry-task { display:flex; align-items:flex-start; gap:12px; padding:20px; border:1px solid #ffffffd9; border-radius:18px; background:#ffffff80; }
.client-reentry-task .usecase-art-check { width:18px; height:18px; flex-shrink:0; margin-top:3px; }
.client-reentry-task strong { display:block; color:#465c4d; font-size:14px; font-weight:500; line-height:1.5; }
.client-reentry-task div > span { display:block; margin-top:6px; color:#728478; font-size:12px; line-height:1.5; }
.client-reentry-window { min-width:0; }
.client-reentry-message { margin:0; padding:24px 28px 8px; }
.client-reentry-message > div { display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:14px; }
.client-reentry-message > div > span { color:#85938b; font-size:11px; }
.client-reentry-message p { margin:12px 0 0; color:#4a5b50; font-size:16px; line-height:1.6; }
.client-reentry-window .usecase-tone-visual .landing-demo { padding:28px; }
.client-reentry-window .landing-suggestion .tb-reply { font-size:17px; }
.client-reentry-window .tb-text { padding:0; text-align:left; }
.client-reentry-window .tb-arrow { width:44px; height:44px; }
.client-reentry-window .tb-action { min-height:44px; }
.client-reentry-section > .usecase-content-actions { justify-content:center; margin-top:32px; }
@media(max-width:1100px) {
  .client-reentry-art { gap:32px; padding:32px; grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr); }
  .client-reentry-context dd { font-size:16px; }
  .client-reentry-window .landing-suggestion .tb-reply { font-size:15px; }
}
@media(max-width:850px) {
  .client-reentry-art { grid-template-columns:minmax(0,1fr); }
  .client-reentry-context dl { grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:24px 0; }
  .client-reentry-task { max-width:none; }
  .client-reentry-window .landing-suggestion .tb-reply { font-size:17px; }
}
@media(max-width:600px) {
  .client-reentry-art { padding:16px; gap:24px; border-radius:24px; }
  .client-reentry-contact { gap:12px; }
  .client-reentry-contact > img { width:44px; height:44px; }
  .client-reentry-contact strong { font-size:21px; }
  .client-reentry-context dl { gap:16px; }
  .client-reentry-context dt { font-size:11px; }
  .client-reentry-context dd { font-size:14px; }
  .client-reentry-task { padding:16px; }
  .client-reentry-window { border-radius:18px; }
  .client-reentry-window > .usecase-art-windowbar { padding:16px; }
  .client-reentry-message { padding:18px 16px 0; }
  .client-reentry-message p { font-size:14px; }
  .client-reentry-window .usecase-tone-visual .landing-demo { padding:24px 12px 16px; }
  .client-reentry-window .landing-suggestion .tb-reply { font-size:14px; }
}

/* Relationship guidance and writing quality use large, readable product scenes. */
.relationship-proof > .usecase-section-intro { max-width:920px; margin-inline:auto; text-align:center; }
.relationship-proof > .actions { justify-content:center; margin-top:32px; }
.proof-sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.relationship-demo { padding:32px; border:1px solid #ffffffb3; background:radial-gradient(ellipse at 95% 5%,#f1d9bf,transparent 62%),radial-gradient(ellipse at 5% 100%,#c6dce4,transparent 65%),linear-gradient(140deg,#e9eee5,#e1dbe9); }
.relationship-demo [hidden] { display:none !important; }
.relationship-demo button { border:0; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.relationship-demo button:disabled { cursor:default; opacity:1; }
.relationship-demo button:focus-visible { outline:2px solid #526abb; outline-offset:4px; }
.relationship-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.relationship-toolbar > div:first-child { display:flex; align-items:center; gap:12px; min-width:0; }
.relationship-toolbar > div:first-child > span { margin-left:8px; color:#738078; font-size:12px; }
.relationship-views { display:grid; grid-template-columns:1fr 1fr; flex:none; width:164px; padding:4px; border-radius:28px; background:#c4cec555; }
.relationship-views button { min-height:44px; padding:10px 16px; border-radius:24px; font-size:14px; }
.relationship-views button[aria-selected=true] { background:#ffffffc9; box-shadow:0 2px 8px #384f4614; }
.relationship-path { display:flex; align-items:center; gap:12px; margin:20px 0 12px; color:#617167; font-size:13px; }
.relationship-path button { min-height:44px; padding:6px 0; text-decoration:underline; text-underline-offset:4px; }
.relationship-layout { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:stretch; gap:28px; }
.relationship-demo[data-depth=groups] .relationship-layout { grid-template-columns:minmax(0,1fr); }
.relationship-views-stack { display:grid; min-width:0; }
.relationship-map,.relationship-table { grid-area:1 / 1; min-width:0; }
.relationship-map[aria-hidden=true],.relationship-table[aria-hidden=true] { visibility:hidden; pointer-events:none; }
.relationship-map { position:relative; min-height:460px; }
.relationship-people { position:absolute; inset:0; }
.relationship-you,.relationship-person { position:absolute; display:grid; justify-items:center; gap:12px; transform:translate(-50%,-50%); text-align:center; }
.relationship-you { left:50%; top:52%; color:#436356; font-size:14px; }
.relationship-you > img { width:66px; height:66px; object-fit:contain; border-radius:50%; border:1px solid #fff; background:#d8e9dc; box-shadow:0 0 0 7px #d3e8d95c; }
.relationship-person { width:118px; min-height:94px; padding:8px; color:#485a50; font-size:14px; }
.relationship-person > img { width:52px; height:52px; object-fit:contain; border:1px solid #ffffff; border-radius:50%; background:#fdfefd; box-shadow:0 4px 14px #405c4720; transition:box-shadow 160ms; }
.relationship-person[aria-pressed=true] > img { box-shadow:0 0 0 5px #81b69c66,0 5px 16px #405c4720; }
.relationship-person[data-slot="0"] { left:78%; top:31%; }
.relationship-person[data-slot="1"] { left:20%; top:25%; }
.relationship-person[data-slot="2"] { left:32%; top:80%; }
.relationship-groups { position:absolute; inset:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:center; gap:28px; }
.relationship-groups[aria-hidden=true],.relationship-people[aria-hidden=true] { visibility:hidden; pointer-events:none; }
.relationship-group { display:grid; justify-items:center; align-content:start; gap:12px; min-height:144px; padding:16px; }
.relationship-group > strong { font-size:17px; font-weight:500; }
.relationship-group > span:last-child { color:#76867b; font-size:12px; }
.relationship-cluster { display:flex; align-items:center; justify-content:center; height:64px; }
.relationship-cluster img { width:44px; height:44px; object-fit:contain; border:1px solid #fff; border-radius:50%; background:#ffffff9c; box-shadow:0 4px 16px #6f857830; }
.relationship-cluster img + img { margin-left:-8px; }
.relationship-table { align-self:start; padding:12px 0; }
.relationship-table table { width:100%; min-width:0; border-collapse:collapse; table-layout:fixed; text-align:left; }
.relationship-table th,.relationship-table td { padding:18px 12px; border-bottom:1px solid #adbdaf66; font-size:12px; line-height:1.6; vertical-align:top; color:#5d7063; }
.relationship-table thead th { color:#7e8e83; font-size:11px; font-weight:500; }
.relationship-table th:first-child { width:33%; }
.relationship-table th:nth-child(2) { width:39%; }
.relationship-table th:last-child { width:28%; }
.relationship-table th > button { display:flex; align-items:center; gap:8px; min-height:44px; padding:0; text-align:left; }
.relationship-table th img { width:28px; height:28px; object-fit:contain; border-radius:50%; background:#ffffffb3; }
.relationship-table th strong { display:block; color:#405549; font-size:13px; font-weight:500; }
.relationship-table th small { display:block; margin-top:4px; color:#839087; font-size:10px; }
.relationship-table tr.is-current { background:#ffffff4d; }
@media(max-width:1100px) {
  .relationship-demo { padding:28px; }
  .relationship-layout { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; }
}
@media(max-width:850px) {
  .relationship-layout { grid-template-columns:minmax(0,1fr); }
  .relationship-map { min-height:340px; }
  .relationship-table { align-self:stretch; }
}
@media(max-width:600px) {
  .relationship-demo { padding:16px; border-radius:24px; }
  .relationship-toolbar { gap:12px; }
  .relationship-toolbar > div:first-child { gap:8px; }
  .relationship-toolbar > div:first-child > img { width:30px; height:26px; }
  .relationship-toolbar > div:first-child > span { display:none; }
  .relationship-views { width:132px; }
  .relationship-views button { padding:8px; font-size:12px; }
  .relationship-path { margin:12px 0 0; font-size:12px; }
  .relationship-map { min-height:300px; }
  .relationship-person { width:90px; min-height:90px; font-size:13px; }
  .relationship-person[data-slot="1"] { left:22%; }
  .relationship-person > img { width:44px; height:44px; }
  .relationship-you > img { width:52px; height:52px; }
  .relationship-table th,.relationship-table td { padding-inline:8px; }
  .relationship-table th:nth-child(2),.relationship-table td:nth-child(2) { display:none; }
  .relationship-table th:first-child,.relationship-table th:last-child { width:50%; }
  .relationship-group { gap:10px; padding:8px; }
  .relationship-group > strong { font-size:14px; }
}
@media(max-width:360px) {
}
@media(prefers-reduced-motion:reduce) {
  .relationship-person > img { transition:none; }
}

/* Reference-led page rhythm: one hero, a main story and supporting feature spreads. */
body[data-usecase-id] main > .usecase-reference-hero { display:block; padding-top:20px; }
.usecase-reference-hero .usecase-detail-hero-copy { max-width:none; text-align:center; }
.usecase-reference-hero .usecase-detail-hero-copy h1 { max-width:1100px; margin-inline:auto; font-size:64px; line-height:1.06; letter-spacing:-.05em; text-wrap:balance; }
.usecase-reference-hero .lead { max-width:760px; margin:20px auto 0; font-size:18px; line-height:1.55; }
.usecase-reference-hero .usecase-detail-hero-copy > .button { margin-top:24px; }
.usecase-reference-hero .usecase-detail-platforms { margin:12px 0 0; }
.usecase-reference-artwork { margin-top:36px; scroll-margin-top:112px; }

.usecase-story-step { min-width:0; }
.usecase-story-step h3 { margin:0; font:inherit; }
.usecase-story-step button { display:block; width:100%; }
.usecase-story-step > p,.usecase-story-long { display:none; }
.usecase-sticky-story .usecase-scenario-nav { grid-column:2; grid-row:1; }
.usecase-sticky-story .usecase-example-stage { grid-column:1; grid-row:1; }
.usecase-sticky-story .usecase-examples { grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:80px; align-items:start; }
.usecase-sticky-story .usecase-example-stage { min-height:580px; padding:180px 28px 28px 104px; }

body[data-usecase-id] main > .usecase-availability { display:block; text-align:center; }
.usecase-availability-copy { max-width:760px; margin-inline:auto; }
.usecase-availability h2 { max-width:none; }
.usecase-availability-copy > p { margin-inline:auto; }
.usecase-availability .usecase-content-actions { justify-content:center; }
.usecase-availability-rails { max-width:1040px; margin:44px auto 0; }
.usecase-next-steps > article > h2 { font-size:38px; }

@media(min-width:1200px) and (min-height:800px) {
  .usecase-sticky-story .usecase-examples.usecase-enhanced .usecase-example-stage { position:sticky; top:112px; }
  .usecase-sticky-story .usecase-examples.usecase-enhanced .usecase-scenario-nav { display:block; padding-block:100px; }
  .usecase-enhanced .usecase-story-step { display:flex; min-height:340px; flex-direction:column; justify-content:center; }
  .usecase-enhanced .usecase-story-step > p { display:block; margin:22px 0 0; color:var(--muted); font-size:17px; line-height:1.6; }
  .usecase-enhanced .usecase-story-short { display:none; }
  .usecase-enhanced .usecase-story-long { display:inline; }
  .usecase-enhanced .usecase-story-step h3 { font-size:34px; line-height:1.15; }
  .usecase-sticky-story .usecase-story-step button { min-height:44px; padding:0; border:0; border-radius:0; background:transparent; color:#738278; font-size:34px; line-height:1.15; letter-spacing:-.035em; text-wrap:balance; }
  .usecase-sticky-story .usecase-story-step button[aria-pressed=true] { color:var(--ink); background:transparent; }
}
@media(min-width:901px) {
}
@media(max-width:1100px) {
  .usecase-reference-hero .usecase-detail-hero-copy h1 { font-size:54px; }
  .usecase-sticky-story .usecase-examples { grid-template-columns:minmax(0,1fr); gap:28px; }
  .usecase-sticky-story .usecase-scenario-nav { grid-column:1; grid-row:1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
  .usecase-sticky-story .usecase-example-stage { grid-column:1; grid-row:2; }
}
@media(max-width:850px) {
  .usecase-reference-hero .usecase-detail-hero-copy h1 { font-size:46px; }
  .usecase-next-steps > article > h2 { font-size:36px; }
}
@media(max-width:600px) {
  body[data-usecase-id] main > .usecase-reference-hero { padding-top:12px; }
  .usecase-reference-hero .usecase-detail-hero-copy h1 { font-size:34px; }
  .usecase-reference-hero .lead { margin-top:18px; font-size:16px; }
  .usecase-reference-artwork { margin-top:28px; }
  .usecase-sticky-story .usecase-scenario-nav { display:flex; grid-template-columns:none; }
  .usecase-story-step { flex:0 0 auto; }
  .usecase-sticky-story .usecase-example-stage { min-height:0; padding:184px 24px 28px; }
  .usecase-availability-rails { margin-top:32px; }
  .usecase-next-steps > article > h2 { font-size:30px; }
}
@media(max-width:360px) {
  .usecase-reference-hero .usecase-detail-hero-copy h1 { font-size:32px; }
}

/* Aligned product compositions in the site's green and neutral palette. */
body[data-usecase-id] { --scene-fill:#edf4ef; --scene-ink:#315b45; }
.usecase-reference-hero .usecase-detail-hero-copy > .button { color:#fff; background:#28583f; border-color:#28583f; box-shadow:0 4px 12px #254c3c1a; }
.usecase-reference-hero .usecase-detail-hero-copy > .button:hover { background:#1e4732; }

.usecase-sticky-story .usecase-example-stage { display:flex; align-items:center; min-height:580px; padding:48px; overflow:hidden; background:linear-gradient(135deg,var(--scene-fill),#f3f6f5); }
.usecase-sticky-story .usecase-panel-stack { grid-template-rows:repeat(2,auto); gap:32px; }
.usecase-sticky-story .usecase-scenario,.usecase-sticky-story .usecase-conversation { grid-row:1 / span 2; }
.usecase-sticky-story .usecase-incoming { grid-row:1; width:100%; max-width:none; padding:20px 24px; border:1px solid #e1e8e3; border-radius:20px; background:#fff; box-shadow:0 8px 24px #254c3c06; }
.usecase-sticky-story .usecase-incoming p { font-size:18px; }
.usecase-sticky-story .usecase-reply-stage { display:block; grid-row:2; width:100%; justify-self:start; }
.usecase-sticky-story .usecase-reply-stage > .tb-reply { width:100%; max-width:none; font-size:18px; }
.usecase-sticky-story .usecase-section-intro { max-width:980px; }
.relationship-demo { overflow:hidden; background:linear-gradient(135deg,#edf3ef,#e5eeea); color:#315541; }
.relationship-path,.relationship-path button { color:#315541; }
.relationship-views button[aria-selected=true] { color:#244f38; background:#fff; }
.relationship-group > span:last-child { color:#627b6a; }
.relationship-map::before,.relationship-map::after { content:''; position:absolute; z-index:0; width:78%; aspect-ratio:1; left:50%; top:50%; transform:translate(-50%,-50%); border:1px solid #abc4b47a; border-radius:50%; pointer-events:none; }
.relationship-map::after { width:52%; }
.relationship-person,.relationship-you { z-index:1; }
.relationship-person,.relationship-you > span { color:#315541; }
.relationship-table th,.relationship-table td { color:#425e4d; border-color:#cbd9cf; }
.relationship-table thead th,.relationship-table th small { color:#627b6a; }
.relationship-table th strong { color:#315541; }
.relationship-table tbody tr:nth-child(even) { background:#ffffff50; }
.relationship-table tbody tr.is-current { background:#dce8df; }

.usecase-opener-art { padding:32px 36px 40px; background:linear-gradient(130deg,#edf4ef,#f3f6f5); }
.usecase-opener-people { display:flex; justify-content:space-between; margin:0 0 24px; color:#315840; font-size:14px; }
.usecase-opener-people > div { display:flex; align-items:center; gap:10px; }
.usecase-opener-people img { width:52px; height:52px; padding:4px; border-radius:50%; background:#fff; }
.usecase-opener-art .landing-demo { display:block; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.usecase-opener-art .landing-suggestion { width:100%; margin:0 0 24px; }
.usecase-opener-art .landing-composer > .tb-host-field { width:100%; margin:0; padding:16px 44px 16px 20px; border:1px solid #dce5df; border-radius:18px; background:#fff; }
.usecase-opener-art .tb-host-input { height:100px; min-height:100px; font-size:16px; }
.usecase-opener-art .tb-reply { font-size:17px; }
.usecase-opener-art .tb-action { min-height:44px; }
.usecase-opener-art .tb-arrow { width:44px; height:44px; }
.usecase-opener-art .landing-edit { position:relative; inset:auto; }

.usecase-next-steps > article { grid-row:span 4; }
.usecase-feature-pair .usecase-canvas { min-height:520px; }
.usecase-task-art { background:linear-gradient(130deg,#edf4ef,#f4f7f5); }
.usecase-task-sheet { position:relative; padding-top:54px; border:1px solid #dce5df; border-radius:20px; background:#fff; box-shadow:0 8px 24px #254c3c08; }
.usecase-task-mark { position:absolute; top:16px; right:20px; }
.usecase-task-quote { width:100%; margin:24px 0 0; border:1px solid #e1e8e3; border-radius:18px; background:#fff; box-shadow:none; }
body[data-usecase-id] .usecase-meeting-art { background:linear-gradient(135deg,#eef3f1,#e5efea); }
.usecase-meeting-message { width:100%; margin-bottom:24px; padding:16px 18px; border:1px solid #e1e8e3; border-radius:18px; background:#fff; box-shadow:none; }
.usecase-calendar-ticket { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); padding:20px; border:1px solid #dce5df; border-radius:20px; background:#fff; box-shadow:0 8px 24px #254c3c08; }
.usecase-calendar-date { padding:0 20px 0 0; border-right:1px solid #d3ded6; color:#315840; text-align:center; }
.usecase-calendar-date strong { font-size:104px; line-height:1; letter-spacing:-.08em; }
.usecase-calendar-date > span { color:#315840; font-size:14px; }
.usecase-calendar-date > small { font-size:12px; }
.usecase-calendar-event { align-self:center; padding-left:20px; color:#315840; }
.usecase-calendar-event strong { font-size:18px; }
.usecase-calendar-event > span { font-size:12px; line-height:1.5; }
.usecase-calendar-footer { grid-column:1 / -1; margin-top:20px; padding:14px 0 0; border-color:#dce5df; }
.usecase-calendar-footer strong { color:#fff; background:#315840; }

@media(min-width:1200px) and (min-height:800px) {
  .usecase-sticky-story .usecase-examples.usecase-enhanced .usecase-scenario-nav { padding-block:140px 200px; }
  .usecase-enhanced .usecase-story-step { min-height:280px; }
}
@media(max-width:1100px) {
  .usecase-calendar-date strong { font-size:80px; }
}
@media(max-width:850px) {
  .usecase-sticky-story .usecase-example-stage { padding:40px; }
}
@media(max-width:760px) {
}
@media(max-width:600px) {
  .usecase-sticky-story .usecase-example-stage { min-height:0; padding:32px 24px; }
  .usecase-sticky-story .usecase-incoming { padding:16px; }
  .usecase-sticky-story .usecase-incoming p,.usecase-sticky-story .usecase-reply-stage > .tb-reply { font-size:15px; }
  .usecase-opener-art { padding:26px 24px; }
  .usecase-opener-people img { width:42px; height:42px; }
  .usecase-opener-art .tb-host-input { height:144px; min-height:144px; font-size:14px; }
  .usecase-opener-art .tb-reply { font-size:15px; }
  .usecase-feature-pair .usecase-canvas { padding:28px; min-height:440px; }
  .usecase-calendar-ticket { padding:16px; }
  .usecase-calendar-date { padding-right:12px; }
  .usecase-calendar-date strong { font-size:76px; }
  .usecase-calendar-event { padding-left:12px; }
  .usecase-calendar-event strong { font-size:16px; }
}


/* One main feature spread followed by two supporting features. */

.usecase-personalization-heading { max-width:900px; margin:0 auto 72px; text-align:center; }
.usecase-personalization-heading h2 { font-size:56px; line-height:1.1; letter-spacing:-.045em; text-wrap:balance; }
.relationship-proof .relationship-demo { padding:0; border:0; overflow:visible; background:transparent; }
.relationship-proof .relationship-layout,.relationship-proof .relationship-demo[data-depth=groups] .relationship-layout { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); align-items:center; gap:80px; }
.relationship-workspace { min-width:0; padding:32px; background:linear-gradient(135deg,#edf3ef,#e5eeea); }
.relationship-toolbar > div:first-child > strong { color:#315541; font-size:32px; line-height:1; letter-spacing:-.04em; }
.relationship-copy > h3 { max-width:520px; margin:0 0 28px; font-size:48px; line-height:1.08; letter-spacing:-.04em; text-wrap:balance; }
.relationship-copy > .actions { justify-content:flex-start; margin-top:28px; }
.usecase-supporting-features { margin-top:96px; }
.usecase-supporting-features > article { grid-row:span 4; }
.usecase-supporting-features > article > h3 { max-width:16em; margin-inline:auto; font-size:38px; line-height:1.1; letter-spacing:-.04em; text-wrap:balance; }
.usecase-supporting-features .usecase-content-actions { align-content:start; }
.usecase-style-art,.usecase-conversation-art { display:grid; place-items:center; background:linear-gradient(130deg,#edf4ef,#f3f6f5); }
.usecase-style-window,.usecase-conversation-note { width:100%; max-width:480px; padding:28px; border:1px solid #dce5df; border-radius:24px; background:#fff; text-align:left; }
.usecase-style-window > header { display:flex; align-items:center; gap:12px; font-size:30px; letter-spacing:-.035em; }
.usecase-style-tabs { display:flex; gap:24px; align-items:center; margin-top:28px; color:#64736b; font-size:14px; }
.usecase-style-tabs strong { padding:10px 24px; border-radius:24px; background:#e8efea; color:#315541; font-weight:500; }
.usecase-style-rules { margin-top:24px; }
.usecase-style-rules h4 { color:#42594a; font-size:14px; font-weight:500; }
.usecase-style-rules ul { display:grid; gap:20px; margin:20px 0 0; padding:0; list-style:none; }
.usecase-style-rules li { display:flex; align-items:flex-start; gap:12px; }
.usecase-style-rules li > span { flex:none; display:grid; place-items:center; width:20px; height:20px; margin-top:2px; border-radius:6px; background:#dcebe1; color:#315541; font-size:13px; }
.usecase-style-rules p { color:#405a49; font-size:17px; line-height:1.5; }
.usecase-conversation-note > header { display:flex; align-items:center; gap:12px; color:#315541; font-size:18px; }
.usecase-conversation-note img { width:44px; height:44px; border-radius:50%; }
.usecase-conversation-note blockquote { margin:24px 0; padding-left:16px; border-left:2px solid #c5d8cc; color:#62746a; font-size:16px; line-height:1.6; }
.usecase-conversation-note > p { color:#405a49; font-size:18px; line-height:1.6; }
.usecase-sticky-story .usecase-section-intro > .actions { justify-content:center; margin-top:28px; }

@media(max-width:1100px) {
  .relationship-proof .relationship-layout,.relationship-proof .relationship-demo[data-depth=groups] .relationship-layout { gap:48px; }
.relationship-workspace { padding:24px; }
.relationship-copy > h3 { font-size:42px; }

}

@media(max-width:900px) {
  .relationship-proof .relationship-layout,.relationship-proof .relationship-demo[data-depth=groups] .relationship-layout { display:flex; flex-direction:column; align-items:stretch; gap:28px; }
.relationship-copy { display:contents; }
.relationship-copy > h3 { order:0; max-width:680px; margin:0; }
.relationship-workspace { order:1; }
.relationship-copy > .actions { order:3; margin-top:0; }

}

@media(max-width:850px) {
  .usecase-personalization-heading { margin-bottom:48px; }
.usecase-personalization-heading h2 { font-size:46px; }
.usecase-supporting-features > article { display:block; grid-row:auto; }
.usecase-supporting-features > article > h3 { max-width:600px; }
.usecase-supporting-features .usecase-content-actions { margin-top:28px; }

}

@media(max-width:760px) {

}

@media(max-width:600px) {
  .usecase-personalization-heading h2 { font-size:34px; }
.relationship-copy > h3,.usecase-supporting-features > article > h3 { font-size:32px; }
.relationship-workspace { padding:20px 16px; }
.relationship-toolbar > div:first-child > strong { font-size:25px; }
.usecase-supporting-features { margin-top:80px; }
.usecase-style-window,.usecase-conversation-note { padding:24px 20px; }
.usecase-style-tabs { gap:16px; font-size:12px; }
.usecase-style-tabs strong { padding:8px 18px; }
.usecase-style-rules p { font-size:16px; }
.usecase-conversation-note > p { font-size:16px; }

}


/* Scale the original UI as one object; the host composer stays untouched. */
.usecase-page .usecase-scaled-suggestion,.usecase-page .usecase-scaled-reply { position:relative; width:80%; margin-left:auto; }
.usecase-reply-scale { position:relative; display:grid; width:125%; transform:scale(.8); transform-origin:top left; }
.usecase-page .usecase-scaled-suggestion { margin-right:auto; padding:14.4px 8px 0 0; }
.usecase-page .usecase-scaled-suggestion .usecase-reply-scale > .tb-reply,.usecase-page .usecase-scaled-suggestion .landing-edit { grid-area:1 / 1; }
.usecase-page .usecase-scaled-suggestion.is-editing .tb-reply { visibility:hidden; }
.usecase-page .usecase-scaled-suggestion .landing-close { top:-18px; right:-10px; }
.usecase-page .usecase-scaled-suggestion .landing-edit { position:absolute; inset:0; }
.usecase-page .usecase-scaled-suggestion.is-scaled,.usecase-page .usecase-scaled-reply.is-scaled { min-height:0; padding:0; }
.usecase-scaled-suggestion.is-scaled > .usecase-reply-scale,.usecase-scaled-reply.is-scaled > .usecase-reply-scale { position:absolute; left:0; top:var(--reply-offset-top); width:var(--reply-source-width); transform:scale(var(--reply-scale)); }
.usecase-page .usecase-scaled-suggestion .tb-text { overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.usecase-scenario .usecase-scaled-reply .tb-text { overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.usecase-scaled-suggestion .tb-dot::after,.usecase-scaled-reply .tb-dot::after { content:''; position:absolute; width:30px; height:30px; }
.usecase-scaled-suggestion .tb-dot,.usecase-scaled-reply .tb-dot { position:relative; }

/* The hero shows the conversation outcome. Native composer demos follow below. */
.usecase-rewrite-canvas { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr); grid-template-rows:auto auto; align-items:center; gap:24px 64px; padding:36px 52px; background:radial-gradient(ellipse at 85% 80%,#d7e9df,transparent 65%),linear-gradient(120deg,#f2f6f2,#e6efe9); }
.usecase-rewrite-question { grid-column:1; grid-row:1; width:100%; margin:0; color:#354f40; }
.usecase-rewrite-question header,.usecase-rewrite-answer > header { display:flex; align-items:center; gap:10px; margin-bottom:10px; font-size:13px; }
.usecase-rewrite-question img,.usecase-rewrite-answer > header img { width:36px; height:36px; padding:3px; border-radius:50%; background:#fff; }
.usecase-rewrite-question > p { margin:0; padding:18px 22px; border:1px solid #dce5de; border-radius:0 20px 20px; background:#ffffffd9; font-size:17px; line-height:1.45; }
.usecase-rewrite-answer { grid-column:2; grid-row:1 / span 2; min-width:0; }
.usecase-rewrite-answer > header { flex-direction:row-reverse; color:#354f40; }
.usecase-rewrite-bubble { padding:24px 28px; border-radius:24px 0 24px 24px; background:#28583f; color:#fff; box-shadow:0 10px 28px #284d3a12; }
.usecase-result-copy { display:grid; margin:0; color:#fff; font-size:22px; line-height:1.4; letter-spacing:-.015em; }
.usecase-result { grid-area:1 / 1; visibility:hidden; }
.usecase-result.is-selected { visibility:visible; }
.usecase-rewrite-options { display:flex; justify-content:flex-end; gap:4px; margin-top:6px; }
.usecase-rewrite-options button { display:grid; place-items:center; width:28px; height:28px; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer; }
.usecase-rewrite-options button > span { width:6px; height:6px; border-radius:6px; background:#9caea2; }
.usecase-rewrite-options button[aria-pressed=true] > span { width:18px; background:#28583f; }
.usecase-rewrite-options button:focus-visible { outline:2px solid #28583f; outline-offset:2px; }
.usecase-rewrite-style { grid-column:1; grid-row:2; align-self:start; padding:0; color:#44614e; }
.usecase-rewrite-style header { display:flex; align-items:center; gap:8px; font-size:16px; }
.usecase-rewrite-style header > span { margin-left:auto; padding:5px 12px; border-radius:24px; background:#dfeae2; color:#315840; font-size:12px; }
.usecase-rewrite-style p { display:flex; align-items:baseline; gap:10px; margin-top:14px; font-size:15px; line-height:1.5; }
.usecase-rewrite-style p > span { flex:none; color:#315840; }
@media(max-width:1100px) {
  .usecase-rewrite-canvas { gap:20px 32px; padding:32px; }
  .usecase-rewrite-style { padding-left:0; }
  .usecase-result-copy { font-size:20px; }
}
@media(max-width:760px) {
  .usecase-rewrite-canvas { grid-template-columns:minmax(0,1fr); gap:24px; padding:28px; }
  .usecase-rewrite-question { grid-column:1; grid-row:1; width:85%; }
  .usecase-rewrite-answer { grid-column:1; grid-row:2; width:88%; justify-self:end; }
  .usecase-rewrite-style { grid-column:1; grid-row:3; justify-self:start; max-width:320px; padding-left:0; }
}
@media(max-width:600px) {
  .usecase-rewrite-canvas { gap:20px; padding:20px 18px; }
  .usecase-rewrite-question { width:94%; }
  .usecase-rewrite-question > p { margin-left:0; padding:14px 16px; font-size:14px; }
  .usecase-rewrite-question header,.usecase-rewrite-answer > header { gap:8px; margin-bottom:8px; font-size:12px; }
  .usecase-rewrite-question img,.usecase-rewrite-answer > header img { width:30px; height:30px; }
  .usecase-rewrite-answer { width:94%; }
  .usecase-rewrite-bubble { padding:18px; border-radius:20px 0 20px 20px; }
  .usecase-result-copy { font-size:17px; line-height:1.4; }
  .usecase-rewrite-style { max-width:260px; padding-top:4px; }
  .usecase-rewrite-style header { font-size:14px; }
  .usecase-rewrite-style p { margin-top:8px; font-size:13px; }
}

/* Descriptions explain the outcome beside each feature and scroll story. */
.usecase-personalization-heading > p { max-width:720px; margin:24px auto 0; color:var(--muted); font-size:19px; line-height:1.6; }
.relationship-copy > h3 { margin-bottom:20px; }
.relationship-intro { max-width:520px; margin:0 0 28px; color:var(--muted); font-size:17px; line-height:1.6; }
.usecase-feature-pair > article > p { color:var(--muted); }
@media(min-width:1200px) and (min-height:800px) {
  .usecase-sticky-story .usecase-story-step > p { display:block; max-width:440px; margin:20px 0 0; color:var(--muted); font-size:17px; line-height:1.6; }
}
@media(max-width:1199px),(max-height:799px) {
  .usecase-sticky-story .usecase-scenario-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-items:start; }
  .usecase-sticky-story .usecase-story-step { display:contents; }
  .usecase-sticky-story .usecase-story-step h3 { grid-row:1; }
  .usecase-sticky-story .usecase-story-step > p { display:block; grid-column:1 / -1; grid-row:2; visibility:hidden; margin:12px 0 0; color:var(--muted); font-size:16px; line-height:1.6; }
  .usecase-sticky-story .usecase-story-step[data-story-active=true] > p { visibility:visible; }
}
@media(max-width:900px) {
  .relationship-intro { order:0; max-width:680px; margin:0; }
}
@media(max-width:850px) {
  .usecase-next-steps > article { grid-row:auto; }
}
@media(max-width:600px) {
  .usecase-personalization-heading > p { margin-top:20px; font-size:17px; }
  .relationship-intro { font-size:16px; }
  .usecase-feature-pair > article > p { margin:18px auto 24px; padding-inline:0; font-size:16px; line-height:1.6; }
  .usecase-sticky-story .usecase-scenario-nav { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; overflow:visible; }
  .usecase-sticky-story .usecase-story-step:nth-child(n+3) h3 { grid-row:2; }
  .usecase-sticky-story .usecase-story-step > p { grid-row:3; font-size:15px; }
}

/* The earlier teal and warm paper backdrop for the freelance conversation scenes. */
body[data-usecase-id=freelancers] .usecase-sticky-story .usecase-example-stage { background:radial-gradient(ellipse at 4% 100%,#76aaa3 0%,transparent 68%),radial-gradient(ellipse at 96% 4%,#e8dec3 0%,transparent 68%),linear-gradient(135deg,#c5d7ce,#a5c3b8); }

/* Task proof comes first, with distinct backdrops for each audience. */
body[data-usecase-id] { --proof-cool:#a6c4bd; --proof-warm:#e7dcc4; --proof-mist:#e4ece5; }
body[data-usecase-id=sales] { --proof-cool:#a0b8ab; --proof-warm:#e8d4ba; --proof-mist:#e5e9de; }
body[data-usecase-id=workplace-communication] { --proof-cool:#adbed1; --proof-warm:#dce3cc; --proof-mist:#e3e9ef; }
body[data-usecase-id=email-replies] { --proof-cool:#a7c5bf; --proof-warm:#dcd5e8; --proof-mist:#e8eceb; }
body[data-usecase-id] .usecase-rewrite-canvas,
body[data-usecase-id] .usecase-writing-panels { background:radial-gradient(ellipse at 0 100%,var(--proof-cool),transparent 75%),radial-gradient(ellipse at 100% 0,var(--proof-warm),transparent 72%),var(--proof-mist); }
body[data-usecase-id] .usecase-sticky-story .usecase-example-stage { background:radial-gradient(ellipse at 0 100%,var(--proof-cool),transparent 75%),radial-gradient(ellipse at 100% 0,var(--proof-warm),transparent 72%),var(--proof-mist); }
.usecase-rewrite-draft { grid-column:1; grid-row:2; min-width:0; padding-left:16px; border-left:2px solid #49645340; }
.usecase-rewrite-draft > strong { color:#395447; font-size:13px; font-weight:500; }
.usecase-rewrite-draft > p { margin:8px 0 0; color:#465a50; font-size:15px; line-height:1.5; }
.usecase-rewrite-question > p { font-size:16px; }
.usecase-writing-tabs { display:flex; justify-content:center; gap:8px; margin:0 0 20px; }
.usecase-writing-tabs button { min-height:48px; padding:12px 22px; border:1px solid transparent; border-radius:28px; background:transparent; color:#53645b; font:inherit; font-size:16px; cursor:pointer; }
.usecase-writing-tabs button[aria-selected=true] { border-color:#c8d9ce; background:#eaf1ec; color:#234c36; }
.usecase-writing-tabs button:focus-visible { outline:2px solid #28583f; outline-offset:3px; }
.usecase-writing-panels { display:grid; padding:36px 40px; border-radius:32px; }
.usecase-writing-panel { grid-area:1 / 1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:center; min-width:0; }
.usecase-writing-panel[aria-hidden=true] { visibility:hidden; }
.usecase-writing-source { min-width:0; }
.usecase-writing-source > header,.usecase-writing-result > header { display:flex; align-items:center; gap:10px; color:#3f594a; font-size:14px; }
.usecase-writing-source > p { margin:18px 0 0; color:#384b40; font-size:18px; line-height:1.55; }
.usecase-writing-source > .usecase-writing-instruction { margin-top:20px; padding-top:16px; border-top:1px solid #446c5430; color:#53675b; font-size:14px; }
.usecase-writing-result { padding:28px 32px; border:1px solid #ffffffb3; border-radius:24px; background:#ffffffeb; box-shadow:0 16px 36px #2347320d; }
.usecase-writing-result > p { margin:20px 0 0; color:#234d37; font-size:23px; line-height:1.45; letter-spacing:-.02em; }
body[data-usecase-id] .relationship-workspace { background:radial-gradient(ellipse at 100% 100%,var(--proof-cool),transparent 90%),linear-gradient(135deg,#f0f4ef,var(--proof-mist)); }
body[data-usecase-id] .usecase-style-art { background:radial-gradient(ellipse at 10% 0,var(--proof-warm),transparent 90%),#edf1e9; }
body[data-usecase-id] .usecase-opener-art { background:radial-gradient(ellipse at 100% 100%,var(--proof-cool),transparent 88%),#e6efeb; }
body[data-usecase-id] .usecase-task-art { background:linear-gradient(140deg,var(--proof-warm),#eef2ea 70%); }
body[data-usecase-id] .usecase-meeting-art { background:linear-gradient(145deg,#eaf1ef,var(--proof-cool)); }
.usecase-next-steps .usecase-canvas { min-height:440px; padding:32px; }

@media(min-width:1101px) {
  body[data-usecase-id=sales] .relationship-proof .relationship-layout,
  body[data-usecase-id=sales] .relationship-proof .relationship-demo[data-depth=groups] .relationship-layout { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
  body[data-usecase-id=sales] .relationship-workspace { grid-column:2; grid-row:1; }
  body[data-usecase-id=sales] .relationship-copy { grid-column:1; grid-row:1; }
  .usecase-supporting-features.is-spread { grid-template-columns:minmax(0,1fr); gap:112px; }
  .usecase-supporting-features.is-spread > article { display:grid; grid-template-columns:calc((100% - 32px)/2) minmax(0,1fr); grid-template-rows:1fr auto auto auto 1fr; grid-row:auto; column-gap:80px; align-content:center; text-align:left; }
  .usecase-supporting-features.is-spread > article > h3,
  .usecase-supporting-features.is-spread > article > p,
  .usecase-supporting-features.is-spread > article > .actions { grid-column:2; margin-inline:0; }
  .usecase-supporting-features.is-spread > article > h3 { grid-row:2; align-self:end; }
  .usecase-supporting-features.is-spread > article > p { grid-row:3; margin-top:20px; padding:0; align-self:start; }
  .usecase-supporting-features.is-spread > article > .actions { grid-row:4; margin-top:28px; justify-content:flex-start; align-self:start; }
  .usecase-supporting-features.is-spread > article > .usecase-canvas { grid-column:1; grid-row:1 / span 5; margin:0; }
  .usecase-supporting-features.is-spread > article:nth-child(even) { grid-template-columns:minmax(0,1fr) calc((100% - 32px)/2); }
  .usecase-supporting-features.is-spread > article:nth-child(even) > h3,
  .usecase-supporting-features.is-spread > article:nth-child(even) > p,
  .usecase-supporting-features.is-spread > article:nth-child(even) > .actions { grid-column:1; }
  .usecase-supporting-features.is-spread > article:nth-child(even) > .usecase-canvas { grid-column:2; }
}
@media(max-width:1100px) {
  .usecase-writing-panel { gap:32px; }
  .usecase-writing-result { padding:24px; }
  .usecase-writing-result > p { font-size:20px; }
}
@media(max-width:900px) and (min-width:851px) {
  .usecase-supporting-features.is-spread { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
  .usecase-rewrite-draft { grid-column:1; grid-row:2; }
  .usecase-rewrite-answer { grid-row:3; }
  .usecase-writing-panel { grid-template-columns:minmax(0,1fr); gap:24px; }
  .usecase-writing-panels { padding:28px; }
}
@media(max-width:600px) {
  .usecase-reference-hero .usecase-detail-hero-copy h1 { font-size:28px; }
  .usecase-rewrite-question > p { font-size:14px; }
  .usecase-rewrite-draft > p { font-size:14px; }
  .usecase-writing-tabs { gap:0; }
  .usecase-writing-tabs button { flex:1; padding:10px 12px; font-size:14px; }
  .usecase-writing-panels { padding:24px 20px; border-radius:24px; }
  .usecase-writing-source > p { font-size:16px; }
  .usecase-writing-source > .usecase-writing-instruction { font-size:13px; }
  .usecase-writing-result { padding:20px; }
  .usecase-writing-result > p { font-size:18px; }
  .usecase-next-steps .usecase-canvas { min-height:0; padding:28px 20px; }
}

/* Readable writing results, separate from the native floating UI below. */
.usecase-sticky-story .usecase-panel-stack { grid-template-rows:repeat(3,auto); gap:24px; }
.usecase-sticky-story .usecase-scenario,.usecase-sticky-story .usecase-conversation { grid-row:1 / span 3; }
.usecase-story-decision { display:flex; flex-direction:column; gap:8px; grid-row:2; margin:0; color:#365342; font-size:14px; line-height:1.5; }
.usecase-story-decision > strong { font-size:12px; font-weight:600; }
.usecase-sticky-story .usecase-reply-stage { grid-row:3; }
.usecase-story-reply { padding:24px 28px 12px; border:1px solid #ffffffd9; border-radius:24px; background:#ffffffeb; box-shadow:0 12px 32px #244b3910; }
.usecase-story-reply:focus-visible { outline:2px solid #28583f; outline-offset:4px; }
.usecase-story-reply > header { display:flex; align-items:center; gap:10px; margin-bottom:18px; color:#3c5a46; font-size:13px; }
.usecase-story-choices { display:flex; justify-content:flex-end; gap:4px; margin-top:4px; }
.usecase-story-choices button { display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer; }
.usecase-story-choices button > span { width:6px; height:6px; border-radius:8px; background:#a7b4ab; }
.usecase-story-choices button[aria-pressed=true] > span { width:20px; background:#315c45; }
.usecase-story-choices button:focus-visible { outline:2px solid #28583f; }
@media(min-width:1200px) and (min-height:800px) {
  .usecase-sticky-story .usecase-examples.usecase-enhanced .usecase-scenario-nav { padding-bottom:max(200px,calc(50vh - 112px)); }
}
@media(max-width:600px) {
  .usecase-sticky-story .usecase-panel-stack { gap:20px; }
  .usecase-story-decision { font-size:13px; }
  .usecase-story-reply { padding:20px 18px 8px; border-radius:20px; }
  .usecase-story-choices button { width:44px; height:44px; }
}

/* Scene-led hierarchy: one main result, quiet context, one native demonstration. */
.usecase-page { --scene-paper:#f7f9f5; }
.usecase-page main { width:100%; max-width:none; border:0; background:var(--scene-paper); }
body.usecase-page[data-usecase-id] main > section,body.usecase-page main > section { width:min(1180px,calc(100% - 80px)); }
.usecase-breadcrumb { width:min(1180px,calc(100% - 80px)); }
.usecase-task-section .usecase-section-intro { max-width:780px; margin-inline:auto; text-align:center; }
.usecase-task-section .usecase-section-intro h2 { font-size:48px; }
.usecase-task-section .usecase-section-intro > .actions { display:none; }
.usecase-task-gallery { width:min(880px,100%); margin:36px auto 0; }
.usecase-task-options { display:flex; flex-wrap:wrap; justify-content:center; gap:12px 32px; margin-bottom:36px; }
.usecase-task-options > button { min-height:44px; padding:10px 0; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:#63715d; font:inherit; font-size:16px; cursor:pointer; }
.usecase-task-options > button[aria-selected=true] { color:#28563d; border-color:#28563d; }
.usecase-task-options > button:focus-visible { outline:2px solid #28563d; outline-offset:5px; }
.usecase-task-panels { display:grid; }
.usecase-task-example { grid-area:1 / 1; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:48px; align-items:center; }
.usecase-task-example[aria-hidden=true] { visibility:hidden; }
.usecase-task-example[aria-hidden=true] .usecase-candidate { visibility:hidden; opacity:0; }
.usecase-task-result { min-width:0; padding:30px 32px 22px; border-left:3px solid #729778; background:#fff; }
.usecase-task-result:focus-visible { outline:2px solid #28563d; outline-offset:4px; }
.usecase-task-example .usecase-candidate { transition:none; }
.usecase-task-example mark { color:inherit; background:#e4efdf; }
body[data-usecase-id] main > .usecase-detail-quote { max-width:940px; padding:0; border-radius:0; background:transparent; color:#5d6e57; }
.usecase-detail-quote blockquote p { color:#52654c; font-size:26px; line-height:1.45; }
.usecase-detail-quote-author { margin-top:24px; color:#6e7d67; font-size:14px; }
.usecase-detail-quote-author img { width:40px; height:40px; }
.usecase-personalization-heading { margin-bottom:52px; }
.usecase-personalization-heading > h2 { font-size:40px; }
.usecase-personalization-heading > p { font-size:17px; }
.usecase-tone-heading { max-width:760px; }
.usecase-tone-heading > h2 { font-size:38px; line-height:1.1; letter-spacing:-.04em; }
.usecase-tone-heading > p { margin-top:22px; color:#6b7864; font-size:18px; line-height:1.6; }
.usecase-writing-details > .text-link { display:inline-block; margin-top:24px; font-size:14px; }
.usecase-light-opener { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:64px; margin-top:72px; padding-top:32px; border-top:1px solid #e0e7dc; }
.usecase-light-opener h3 { color:#4b674e; font-size:24px; line-height:1.2; letter-spacing:-.025em; }
.usecase-light-opener > div > p { margin-top:16px; color:#63715d; font-size:16px; line-height:1.6; }
.usecase-light-opener blockquote { margin:0 0 20px; color:#48694a; font-size:23px; line-height:1.4; }
.usecase-native-demo .section-heading { max-width:780px; margin-inline:auto; }
.usecase-native-demo .section-heading h2 { font-size:44px; }
.usecase-native-demo .section-heading > p { color:#63715d; }
.usecase-native-stage { max-width:840px; margin:44px auto 0; padding:24px 0; border-radius:28px; background:#eef2ec; }
.usecase-page .usecase-native-stage .usecase-opener-art { width:min(644px,calc((100vw - 192px)/2)); margin:auto; padding:40px; background:transparent; }
.usecase-native-stage .tb-host-input { height:100px; min-height:100px; }
.usecase-native-message { margin:0 0 28px; }
.usecase-native-message > header { display:flex; align-items:center; gap:10px; margin-bottom:14px; color:#596e52; font-size:14px; }
.usecase-native-message img { width:36px; height:36px; border-radius:50%; background:#fff; }
.usecase-native-message > p { color:#53654c; font-size:17px; line-height:1.55; }
.usecase-native-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; max-width:840px; margin:32px auto 0; padding:0; list-style:none; }
.usecase-native-steps h3 { color:#4b674e; font-size:17px; }
.usecase-native-steps p { margin-top:12px; color:#63715d; font-size:14px; line-height:1.6; }
.usecase-native-demo > .actions { justify-content:center; margin-top:32px; }
.usecase-native-demo > .usecase-workflow-platforms { text-align:center; }
.usecase-light-next { scroll-margin-top:110px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 64px; }
.usecase-light-next > article { display:grid; grid-row:span 3; grid-template-rows:subgrid; min-width:0; }
.usecase-light-next h2 { max-width:500px; color:#4b674e; font-size:28px; line-height:1.15; letter-spacing:-.03em; }
.usecase-light-next > article > p { color:#63715d; font-size:16px; line-height:1.6; }
.usecase-light-tasks { display:grid; align-content:start; gap:16px; margin:0; padding:0; list-style:none; }
.usecase-light-tasks li { display:flex; align-items:flex-start; gap:12px; color:#536e4e; font-size:15px; }
.usecase-light-check { flex:none; width:15px; height:15px; margin-top:3px; border:1px solid #a5b99a; border-radius:4px; }
.usecase-light-tasks li > span:last-child { flex:none; margin-left:auto; color:#63715d; font-size:13px; }
.usecase-light-tasks small { display:block; margin-top:5px; color:#63715d; font-size:12px; }
.usecase-light-meeting { display:flex; align-items:center; gap:28px; }
.usecase-light-meeting time { flex:none; display:grid; gap:8px; padding-right:28px; border-right:1px solid #dce5d6; }
.usecase-light-meeting time > strong { color:#4b7048; font-size:64px; line-height:1; font-weight:500; letter-spacing:-.055em; }
.usecase-light-meeting time > span { color:#63715d; font-size:12px; }
.usecase-light-meeting > div { color:#64815c; font-size:16px; }
.usecase-light-meeting p { margin-top:10px; font-size:15px; }
.usecase-light-meeting > div > span { display:block; margin-top:8px; color:#63715d; font-size:13px; }
body[data-usecase-id] .usecase-availability h2 { font-size:36px; }
.usecase-availability-copy > p { max-width:620px; font-size:16px; }
.usecase-availability .usecase-content-actions { display:none; }
.usecase-availability-rails { margin-top:28px; }
body[data-usecase-id] main > .usecase-privacy { display:grid; grid-template-columns:minmax(0,1fr) 140px; gap:48px; padding:32px 0; border-radius:0; background:transparent; border-top:1px solid #e0e7dc; border-bottom:1px solid #e0e7dc; }
.usecase-privacy h2 { font-size:30px; }
.usecase-privacy p { max-width:720px; font-size:15px; }
.usecase-privacy > img { width:140px; height:auto; }
.usecase-privacy .actions { margin-top:20px; }

body[data-usecase-id] .usecase-writing-panels { padding:28px 0 0; border-radius:0; background:transparent; }
.usecase-writing-panels { max-width:1080px; margin:auto; }
.usecase-writing-panel { gap:64px; }
.usecase-writing-source > p { font-size:20px; }
.usecase-writing-result { border:0; border-radius:12px; box-shadow:0 10px 30px #223c290a; background:#fff; }
.usecase-writing-result > p { color:#28563d; font-size:27px; }
.usecase-writing-result mark { color:inherit; background:#e4efdf; }
.usecase-writing-tabs button { padding:10px 0; margin-inline:16px; border:0; border-bottom:2px solid transparent; border-radius:0; }
.usecase-writing-tabs button[aria-selected=true] { border-color:#28563d; background:transparent; }
.usecase-inline-quote { max-width:760px; margin:64px auto 0; padding-top:28px; border-top:1px solid #e0e7dc; }
.usecase-inline-quote > blockquote { margin:0; }
.usecase-inline-quote > blockquote > p { color:#63715d; font-size:21px; line-height:1.45; }
.usecase-inline-quote .usecase-detail-quote-author { justify-content:flex-start; }
.usecase-inline-quote .usecase-detail-quote-author small { color:#63715d; }
.usecase-practical-details > .usecase-availability { display:block; width:100%; text-align:center; }
.usecase-practical-details > .usecase-privacy { display:grid; grid-template-columns:minmax(0,1fr) 140px; gap:48px; width:100%; margin-top:var(--usecase-gap); padding:32px 0; border-top:1px solid #e0e7dc; border-bottom:1px solid #e0e7dc; border-radius:0; background:transparent; }

@media(max-width:1100px) {
  .usecase-page .usecase-native-stage .usecase-opener-art { width:calc((100vw - 112px)/2); padding:28px; }
  .usecase-light-next { column-gap:40px; }
}
@media(max-width:850px) {
  body.usecase-page[data-usecase-id] main > section,body.usecase-page main > section,.usecase-breadcrumb { width:calc(100% - 48px); }
  .usecase-page .usecase-native-stage .usecase-opener-art { width:min(680px,100%); padding:28px; }
  .scene-request > p { font-size:16px; }
  .usecase-task-section .usecase-section-intro h2,.usecase-tone-heading > h2 { font-size:38px; }
  .usecase-task-example { gap:28px; }
  .usecase-task-result { padding:24px; }
  .usecase-light-opener { gap:36px; }
  .usecase-native-steps { gap:24px; }
  .usecase-light-next { grid-template-columns:minmax(0,1fr); gap:56px; }
  .usecase-light-next > article { display:block; grid-row:auto; }
  .usecase-light-next > article > p { margin-top:16px; }
  .usecase-light-next ul,.usecase-light-next .usecase-light-meeting { margin-top:24px; }
  .usecase-light-next details { margin-top:20px; }
}
@media(max-width:600px) {
  body.usecase-page[data-usecase-id] main > section,body.usecase-page main > section,.usecase-breadcrumb { width:calc(100% - 40px); }
  .usecase-native-stage .tb-host-input { height:110px; min-height:110px; }
  .scene-request { grid-column:2; grid-row:1; }
  .scene-request > header { gap:6px; margin-bottom:10px; font-size:12px; }
  .scene-request img { width:26px; height:26px; }
  .scene-request > p { font-size:14px; line-height:1.5; }
  .scene-proposal-lines { gap:8px; margin:18px 0; }
  .scene-proposal-lines > i { height:5px; }
  .is-proposal > span { font-size:10px; line-height:1.3; }
  .usecase-task-section .usecase-section-intro h2,.usecase-tone-heading > h2,.usecase-personalization-heading > h2 { font-size:32px; }
  .usecase-task-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 20px; text-align:left; }
  .usecase-task-options > button { font-size:14px; }
  .usecase-task-example { grid-template-columns:minmax(0,1fr); gap:28px; }
  .usecase-task-result { padding:22px; }
  .usecase-detail-quote blockquote p { font-size:22px; }
  .usecase-tone-heading > p { font-size:16px; }
  .usecase-light-opener { grid-template-columns:minmax(0,1fr); gap:28px; }
  .usecase-light-opener h3 { font-size:24px; }
  .usecase-native-stage { padding:8px 0; border-radius:20px; }
  .usecase-native-demo .section-heading h2 { font-size:30px; }
  .usecase-page .usecase-native-stage .usecase-opener-art { padding-inline:28px; }
  .usecase-native-message > p { font-size:15px; }
  .usecase-native-steps { grid-template-columns:minmax(0,1fr); gap:24px; }
  .usecase-light-next h2 { font-size:26px; }
  .usecase-light-meeting { gap:20px; }
  .usecase-light-meeting time { padding-right:20px; }
  body[data-usecase-id] .usecase-availability h2 { font-size:30px; }
  body[data-usecase-id] main > .usecase-privacy { grid-template-columns:minmax(0,1fr) 72px; gap:20px; }
  .usecase-privacy > img { width:72px; }
  .usecase-privacy h2 { font-size:27px; }
  .usecase-privacy p { font-size:14px; }
  .usecase-writing-panel { gap:28px; }
  .usecase-writing-source > p { font-size:17px; }
  .usecase-writing-result { padding:24px; }
  .usecase-writing-result > p { font-size:22px; }
  .usecase-writing-tabs button { margin-inline:8px; }
  .usecase-practical-details > .usecase-privacy { grid-template-columns:minmax(0,1fr) 72px; gap:20px; }
  .usecase-inline-quote > blockquote > p { font-size:19px; }
}

@media(max-width:360px) {
  body.usecase-page[data-usecase-id] main > section,body.usecase-page main > section,.usecase-breadcrumb { width:calc(100% - 32px); }
}

/* Function first, with the approved Circle and Me product illustrations. */
/* Wispr Business content edges: two section insets of 112px, 96px or 72px. */
body.usecase-page,body.usecase-page[data-usecase-id] { --usecase-gap:224px; }
.usecase-page main { background:#fff; }
.usecase-function-demo .usecase-native-stage { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; max-width:none; background:radial-gradient(ellipse at 0 100%,var(--proof-cool),transparent 75%),radial-gradient(ellipse at 100% 0,var(--proof-warm),transparent 72%),var(--proof-mist); }
.usecase-draft-context { min-width:0; padding:40px; text-align:left; }
.usecase-draft-context > h3 { color:var(--ink); font-size:17px; }
.usecase-draft-context dl { display:grid; gap:24px; margin:28px 0 0; }
.usecase-draft-context dl > div { padding-top:20px; border-top:1px solid #31554130; }
.usecase-draft-context dt { color:#53675b; font-size:13px; }
.usecase-draft-context dd { margin:10px 0 0; color:#354b3d; font-size:17px; line-height:1.6; }
.usecase-task-section [data-email-writing] { margin-block:44px 80px; }
.usecase-task-section .usecase-writing-panels { padding:36px 40px; border-radius:32px; background:radial-gradient(ellipse at 0 100%,var(--proof-cool),transparent 75%),radial-gradient(ellipse at 100% 0,var(--proof-warm),transparent 72%),var(--proof-mist); }
@media(max-width:1100px) {
    .usecase-draft-context { padding:28px; }
}
@media(max-width:850px) {
        .usecase-function-demo .usecase-native-stage { grid-template-columns:minmax(0,1fr); }
  .usecase-draft-context { padding:28px 40px 0; }
  .usecase-draft-context dl { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
}
@media(max-width:600px) {
        .usecase-draft-context { padding:12px 28px 0; }
  .usecase-draft-context dl { grid-template-columns:minmax(0,1fr); gap:16px; }
  .usecase-draft-context dd { font-size:15px; }
        .usecase-style-tabs { gap:16px; }
  .usecase-style-tabs strong { padding-inline:18px; }
    .usecase-task-section .usecase-writing-panels { padding:24px 20px; border-radius:24px; }
}

@media(max-width:991px) {
  body.usecase-page,body.usecase-page[data-usecase-id] { --usecase-gap:192px; }
}
@media(max-width:767px) {
  body.usecase-page,body.usecase-page[data-usecase-id] { --usecase-gap:144px; }
}

/* Wispr reference modules: one lead feature, a paired row, and a proof band. */
.wispr-hero .usecase-product-hero { margin-top:44px; text-align:left; }
.wispr-hero .usecase-native-stage { margin:0; }
.usecase-draft-context > strong { display:block; color:var(--ink); font-size:17px; font-weight:500; }
body.usecase-page[data-usecase-id] main > .wispr-feedback-band { width:min(1440px,calc(100% - 40px)); margin-top:var(--usecase-gap); padding:56px 72px; border-radius:32px; background:#213e33; color:#fff; text-align:center; }
.wispr-feedback-band blockquote { max-width:960px; margin:0 auto; }
.wispr-feedback-band blockquote > p { color:#f5faf5; font-size:26px; line-height:1.45; letter-spacing:-.02em; text-wrap:balance; }
.wispr-feedback-band .usecase-detail-quote-author { justify-content:center; margin-top:24px; color:#edf5ef; }
.wispr-feedback-band .usecase-detail-quote-author small { color:#c6d7cd; }
.wispr-module-heading { max-width:900px; margin:0 auto 140px; text-align:center; }
.wispr-module-heading > .actions { justify-content:center; margin-top:32px; }
.wispr-module-heading h2 { color:var(--ink); font-size:48px; line-height:1.1; letter-spacing:-.045em; text-wrap:balance; }
.wispr-module-heading > p { max-width:560px; margin:24px auto 0; color:var(--muted); font-size:18px; line-height:1.6; }
.wispr-leading-feature .relationship-layout,
.wispr-leading-feature .relationship-demo[data-depth=groups] .relationship-layout { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:64px; align-items:center; }
body[data-usecase-id] .wispr-leading-feature .relationship-workspace { grid-column:1; grid-row:1; order:0; }
body[data-usecase-id] .wispr-leading-feature .relationship-copy { display:block; grid-column:2; grid-row:1; }
.wispr-leading-feature .relationship-map { min-height:420px; }
.wispr-leading-feature .relationship-map::before { width:min(78%,420px); }
.wispr-leading-feature .relationship-map::after { width:min(52%,280px); }
.wispr-leading-feature .relationship-copy > .wispr-relationship-title { margin:0 0 20px; font-size:38px; line-height:1.1; letter-spacing:-.04em; }
.wispr-leading-feature .relationship-intro { margin:0 0 28px; font-size:17px; line-height:1.6; }
.wispr-feature-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 32px; margin-top:96px; }
.wispr-feature-card { display:grid; grid-row:span 3; grid-template-rows:subgrid; min-width:0; text-align:center; }
.wispr-feature-card > h3 { grid-row:1; max-width:15em; margin:0 auto; font-size:38px; line-height:1.1; letter-spacing:-.04em; text-wrap:balance; }
.wispr-feature-card > p { grid-row:2; max-width:510px; margin:0 auto; color:var(--muted); font-size:18px; line-height:1.6; }
.wispr-feature-card > .usecase-canvas,.wispr-feature-card > .usecase-email-writing { grid-row:3; width:100%; min-width:0; min-height:420px; margin:12px 0 0; }
.wispr-feature-card > .usecase-canvas { padding:40px; }
.wispr-opener-art { display:flex; flex-direction:column; justify-content:center; gap:28px; background:radial-gradient(ellipse at 100% 100%,var(--proof-cool),transparent 85%),#eaf2ee; text-align:left; }
.wispr-opener-people { display:flex; justify-content:space-between; align-items:center; gap:20px; }
.wispr-opener-people > div { display:flex; align-items:center; gap:12px; color:#3b5d48; font-size:14px; }
.wispr-opener-people > div > img { width:48px; height:48px; object-fit:contain; border-radius:50%; background:#fff; }
.wispr-opener-people > img { width:36px; height:30px; }
.wispr-opener-brief { margin:0; color:#536b5c; font-size:15px; line-height:1.6; }
.wispr-opener-art > blockquote { margin:0; padding:28px; border:1px solid #dce5df; border-radius:24px; background:#fff; color:#294e37; font-size:22px; line-height:1.5; letter-spacing:-.02em; }
.wispr-feature-card .usecase-email-writing { display:flex; flex-direction:column; justify-content:center; padding:24px; border-radius:32px; background:radial-gradient(ellipse at 0 100%,var(--proof-cool),transparent 75%),radial-gradient(ellipse at 100% 0,var(--proof-warm),transparent 72%),var(--proof-mist); }
.wispr-feature-card .usecase-writing-tabs { margin-bottom:20px; }
.wispr-feature-card .usecase-writing-tabs button { margin-inline:8px; padding-inline:0; font-size:14px; }
.wispr-feature-card .usecase-writing-panels { width:100%; padding:0; background:none; }
.wispr-feature-card .usecase-writing-panel { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.wispr-feature-card .usecase-writing-source,.wispr-feature-card .usecase-writing-result { text-align:left; }
.wispr-feature-card .usecase-writing-source > p { font-size:16px; }
.wispr-feature-card .usecase-writing-source > .usecase-writing-instruction { font-size:13px; }
.wispr-feature-card .usecase-writing-result { padding:24px; }
.wispr-feature-card .usecase-writing-result > p { font-size:18px; }
.wispr-scenarios .usecase-task-gallery { width:100%; margin-top:40px; }
.wispr-scenarios .usecase-task-panels { padding:48px; border-radius:32px; background:radial-gradient(ellipse at 0 100%,var(--proof-cool),transparent 75%),radial-gradient(ellipse at 100% 0,var(--proof-warm),transparent 72%),var(--proof-mist); }
.wispr-scenarios .usecase-task-example { gap:48px; }
.wispr-scenarios .usecase-task-result { padding:32px; border:0; border-radius:24px; }
body[data-usecase-id] .usecase-light-next { gap:24px 32px; }
.usecase-light-next > article > .usecase-light-tasks,.usecase-light-next > article > .usecase-light-meeting { min-height:300px; padding:32px; border-radius:28px; }
.usecase-light-next > article > .usecase-light-tasks { align-content:center; gap:28px; background:linear-gradient(145deg,#eef3ed,var(--proof-mist)); }
.usecase-light-next > article > .usecase-light-meeting { justify-content:center; background:linear-gradient(140deg,var(--proof-warm),#edf2eb); }
body[data-usecase-id] main > .landing-download { background:radial-gradient(ellipse at 0 100%,var(--proof-cool),transparent 78%),radial-gradient(ellipse at 100% 0,var(--proof-warm),transparent 74%),#e9f0e9; }
@media(max-width:1100px) {
  .wispr-leading-feature .relationship-layout,.wispr-leading-feature .relationship-demo[data-depth=groups] .relationship-layout { gap:40px; }
  .wispr-leading-feature .relationship-copy > .wispr-relationship-title { font-size:32px; }
  .wispr-feature-card > .usecase-canvas { padding:28px; }
  .wispr-feature-pair { column-gap:24px; margin-top:80px; }
  .wispr-feature-card > p { font-size:17px; }
  .wispr-feature-card .usecase-writing-panel { grid-template-columns:minmax(0,1fr); }
  .wispr-feature-card .usecase-writing-source > p,.wispr-feature-card .usecase-writing-result > p { font-size:16px; }
  .wispr-feature-card .usecase-writing-result { padding:20px; }
  .wispr-feature-card .usecase-writing-source > .usecase-writing-instruction { margin-top:12px; padding-top:12px; }
  .wispr-module-heading h2 { font-size:40px; }
  .wispr-scenarios .usecase-task-panels { padding:32px; }
}
@media(max-width:900px) {
  .wispr-leading-feature .relationship-layout,.wispr-leading-feature .relationship-demo[data-depth=groups] .relationship-layout { grid-template-columns:minmax(0,1fr); gap:32px; }
  body[data-usecase-id] .wispr-leading-feature .relationship-copy { grid-column:1; grid-row:2; }
  .wispr-leading-feature .relationship-map { min-height:360px; }
  .wispr-leading-feature .relationship-map::before { width:min(78%,360px); }
  .wispr-leading-feature .relationship-map::after { width:min(52%,240px); }
}
@media(max-width:850px) {
  body[data-usecase-id] .usecase-light-next { row-gap:var(--usecase-gap); }
  .wispr-feature-pair { grid-template-columns:minmax(0,1fr); row-gap:56px; }
  .wispr-feature-card { display:flex; flex-direction:column; gap:24px; grid-row:auto; }
  .wispr-feature-card > p { margin-top:0; }
  .wispr-feature-card > .usecase-canvas,.wispr-feature-card > .usecase-email-writing { min-height:0; margin-top:4px; }
  .wispr-feature-card .usecase-writing-panel { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wispr-feedback-band blockquote > p { font-size:23px; }
}
@media(max-width:600px) {
  .wispr-hero .usecase-product-hero { margin-top:32px; }
  body.usecase-page[data-usecase-id] main > .wispr-feedback-band { width:calc(100% - 24px); margin-top:var(--usecase-gap); padding:40px 24px; border-radius:24px; }
  .wispr-feedback-band blockquote > p { font-size:21px; }
  .wispr-module-heading h2 { font-size:32px; }
  .wispr-module-heading > p { margin-top:20px; font-size:17px; }
  .wispr-leading-feature .relationship-copy > .wispr-relationship-title { font-size:30px; }
  .wispr-feature-card > h3 { font-size:32px; }
  .wispr-leading-feature .relationship-map { min-height:300px; }
  .wispr-feature-pair { margin-top:64px; }
  .wispr-feature-card > .usecase-canvas { padding:28px 20px; }
  .wispr-feature-card .usecase-style-window { padding:24px 20px; }
  .wispr-feature-card > p { font-size:16px; }
  .wispr-opener-people { gap:12px; }
  .wispr-opener-people > div { gap:8px; }
  .wispr-opener-people > div > img { width:40px; height:40px; }
  .wispr-opener-art > blockquote { padding:24px; font-size:20px; }
  .wispr-feature-card .usecase-writing-panel { grid-template-columns:minmax(0,1fr); }
  .wispr-feature-card .usecase-writing-tabs button { font-size:13px; }
  .wispr-scenarios .usecase-task-panels { padding:28px 20px; border-radius:24px; }
  .wispr-scenarios .usecase-task-example { gap:28px; }
  .wispr-scenarios .usecase-task-result { padding:24px; }
  .usecase-light-next > article > .usecase-light-tasks,.usecase-light-next > article > .usecase-light-meeting { min-height:0; padding:28px 20px; }
  .usecase-light-next > article > .usecase-light-tasks { gap:24px; }
  .usecase-light-next > article > .usecase-light-meeting { min-height:240px; }
}
@media(max-width:850px) {
  .usecase-product-hero .usecase-opener-art { grid-row:1; }
  .usecase-product-hero .usecase-draft-context { grid-row:2; padding-bottom:28px; }
}

@media(max-width:991px) {
  .wispr-module-heading { margin-bottom:64px; }
}
@media(max-width:767px) {
  .wispr-module-heading { margin-bottom:48px; }
}

.usecase-file-knowledge { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:64px; align-items:center; }
.usecase-file-copy h2 { margin:0; font-size:48px; line-height:1.1; letter-spacing:-.045em; text-wrap:balance; }
.usecase-file-copy > p { margin:24px 0 0; color:var(--muted); font-size:18px; line-height:1.6; }
.usecase-file-art { display:grid; gap:28px; min-width:0; padding:40px; border-radius:32px; background:radial-gradient(ellipse at 100% 0,var(--proof-warm),transparent 82%),radial-gradient(ellipse at 0 100%,var(--proof-cool),transparent 85%),var(--proof-mist); }
.usecase-file-window { min-width:0; padding:28px; border:1px solid #dce5df; border-radius:24px; background:#fff; }
.usecase-file-window > header { display:flex; align-items:center; gap:10px; font-size:26px; line-height:1.15; letter-spacing:-.035em; }
.usecase-file-window > header > img { flex:none; width:28px; height:24px; }
.usecase-file-window .usecase-style-tabs { justify-content:space-between; gap:12px; margin-top:24px; }
.usecase-imported-file { display:flex; align-items:center; gap:16px; margin-top:28px; color:#315541; font-size:17px; }
.usecase-imported-file > img { flex:none; width:44px; height:auto; }
.usecase-imported-file > strong { min-width:0; overflow-wrap:anywhere; font-weight:500; }
.usecase-file-window dl { display:grid; gap:16px; margin:24px 0 0; }
.usecase-file-window dl > div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr); gap:20px; padding-top:16px; border-top:1px solid #e4eae5; font-size:14px; line-height:1.5; }
.usecase-file-window dt { color:#64736b; }
.usecase-file-window dd { margin:0; color:#315541; }
.usecase-file-art > blockquote { display:flex; align-items:flex-start; gap:16px; margin:0; padding:28px; border:1px solid #ffffffa6; border-radius:24px; background:#fffffff0; }
.usecase-file-art > blockquote > img { flex:none; margin-top:4px; }
.usecase-file-art > blockquote > p { margin:0; color:#294e37; font-size:21px; line-height:1.5; letter-spacing:-.02em; }
.usecase-file-art mark { border-radius:3px; background:#e4f0df; color:inherit; }

/* The reference hero pairs a display title with a short introduction above one wide product scene. */
body.usecase-page[data-usecase-id] main > .wispr-reference-hero { padding-top:64px; }
.wispr-reference-hero .usecase-detail-hero-copy { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(64px,9.7vw,140px); align-items:end; text-align:left; }
.wispr-reference-hero .usecase-detail-hero-copy h1 { max-width:none; margin:0; }
.wispr-reference-hero .usecase-hero-intro { min-width:0; }
.wispr-reference-hero .usecase-hero-intro > .lead { max-width:none; margin:0; }
.wispr-reference-hero .usecase-product-hero { margin-top:40px; }
.wispr-reference-hero .usecase-native-stage { display:grid; grid-template-columns:minmax(0,1fr); place-items:center; min-height:380px; padding-block:24px; border-radius:28px; background:radial-gradient(ellipse at 0 100%,var(--proof-cool),transparent 72%),radial-gradient(ellipse at 100% 0,var(--proof-warm),transparent 78%),var(--proof-mist); }
.usecase-page .wispr-reference-hero .usecase-native-stage .usecase-opener-art { padding-block:0; background:transparent; }
@media(max-width:1100px) {
  body.usecase-page[data-usecase-id] main > .wispr-reference-hero { padding-top:40px; }
  .wispr-reference-hero .usecase-detail-hero-copy { grid-template-columns:minmax(0,1fr); gap:24px; }
  .wispr-reference-hero .usecase-hero-intro { max-width:680px; }
}
@media(max-width:600px) {
  body.usecase-page[data-usecase-id] main > .wispr-reference-hero { padding-top:24px; }
  .wispr-reference-hero .usecase-product-hero { margin-top:28px; }
  .wispr-reference-hero .usecase-native-stage { min-height:0; padding-block:28px; border-radius:24px; }
}
@media(max-width:1100px) {
  .usecase-file-knowledge { gap:40px; }
  .usecase-file-copy h2 { font-size:40px; }
  .usecase-file-art { padding:28px; }
  .usecase-file-copy > p { font-size:17px; }
}
@media(max-width:850px) {
  .usecase-file-knowledge { grid-template-columns:minmax(0,1fr); gap:32px; }
  .usecase-file-copy { max-width:620px; }
}
@media(max-width:600px) {
  .usecase-file-copy h2 { font-size:32px; }
  .usecase-file-copy > p { margin-top:20px; font-size:17px; }
  .usecase-file-art { gap:24px; padding:28px 20px; border-radius:24px; }
  .usecase-file-window { padding:24px 20px; }
  .usecase-file-window .usecase-style-tabs { gap:8px; font-size:11px; }
  .usecase-file-window .usecase-style-tabs strong { padding:8px 14px; }
  .usecase-file-window dl > div { gap:16px; font-size:13px; }
  .usecase-imported-file { gap:12px; font-size:15px; }
  .usecase-file-art > blockquote { gap:12px; padding:24px 20px; }
  .usecase-file-art > blockquote > p { font-size:18px; }
}

/* Purpose built hero illustrations. The normal composer keeps its geometry. */
.wispr-reference-hero .usecase-motion-scene { position:relative; isolation:isolate; min-height:420px; overflow:hidden; background:linear-gradient(120deg,#b5cdbf,#e9eadd 54%,#e2c9a9); }
body[data-usecase-id=workplace-communication] .usecase-motion-scene { background:linear-gradient(120deg,#bfd2db,#e7ecdf 54%,#dce2bf); }
body[data-usecase-id=email-replies] .usecase-motion-scene { background:linear-gradient(120deg,#b5d1cc,#e8ebe1 54%,#ded2e4); }
.usecase-film-light,.usecase-film-warm,.usecase-film-blue { position:absolute; z-index:-1; inset:0; pointer-events:none; }
.usecase-film-light { background:radial-gradient(ellipse at 50% 25%,#ffffffe6,transparent 65%); }
.usecase-film-warm { opacity:0; background:radial-gradient(ellipse at 75% 30%,#edd2ab,transparent 70%),linear-gradient(125deg,#c2ccab,#eeeadc); }
.usecase-film-blue { opacity:0; background:radial-gradient(ellipse at 15% 80%,#b9d3d2,transparent 60%),linear-gradient(120deg,#c5d2d5,#e0e6d7 60%,#e7d0b7); }
.usecase-motion-scene > .usecase-opener-art { position:relative; z-index:2; }
.usecase-motion-scene .landing-suggestion[hidden] { display:block!important; visibility:hidden; pointer-events:none; }
.usecase-film-view { position:absolute; z-index:3; inset:24px; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; pointer-events:none; text-align:left; color:var(--ink); }
.usecase-film-view p { margin:0; }
.usecase-message-stack { display:flex; flex-direction:column-reverse; gap:10px; width:600px; position:relative; transform:scale(.9); transform-origin:center; }
.usecase-stack-message { position:relative; padding:12px 22px 14px; border:1px solid #ffffffc9; border-radius:16px; background:#ffffffd9; box-shadow:0 2px 3px #294b3a06,0 8px 20px #294b3a14; backdrop-filter:blur(18px) saturate(1.15); -webkit-backdrop-filter:blur(18px) saturate(1.15); }
.usecase-stack-message > header { display:flex; gap:8px; align-items:center; font-size:12px; }
.usecase-stack-message > header > img:first-child { width:24px; height:24px; border-radius:50%; }
.usecase-stack-message > header > img:last-child { margin-left:auto; width:18px; height:18px; }
.usecase-stack-message > p { margin-top:5px; color:#3d5548; font-size:17px; line-height:1.4; }
.usecase-film-reply-details { position:absolute; inset:0; z-index:1; opacity:0; pointer-events:none; }
.usecase-film-style-seal,.usecase-film-file-seal { position:absolute; top:50%; display:flex; align-items:center; gap:9px; font-size:12px; color:#315541; }
.usecase-film-style-seal { left:48px; flex-wrap:wrap; width:130px; }
.usecase-film-style-seal > img { width:32px; height:32px; border-radius:50%; background:#fff; }
.usecase-film-style-seal strong { display:block; margin-top:4px; font-size:11px; font-weight:400; }
.usecase-film-file-seal { right:40px; max-width:160px; }
.usecase-film-file-seal > img { flex:none; }
 .usecase-film-click { position:absolute; z-index:5; width:0; height:0; opacity:0; visibility:hidden; pointer-events:none; }
.usecase-film-click > i { position:absolute; left:-16px; top:-16px; width:32px; height:32px; border:2px solid #4b8c65; border-radius:50%; }
.usecase-film-click > svg { position:absolute; left:-3px; top:-2px; width:22px; height:26px; }
.usecase-film-constellation { position:relative; width:700px; height:350px; color:#6b9980; }
.usecase-film-orbit { position:absolute; left:50%; top:170px; width:330px; height:330px; transform:translate(-50%,-50%); border:1px solid #6b998047; border-radius:50%; }
.usecase-film-orbit:nth-child(2) { width:230px; height:230px; }
.usecase-film-orbit:nth-child(3) { width:130px; height:130px; }
.usecase-film-hub { position:absolute; top:140px; left:calc(50% - 30px); width:60px; height:60px; border-radius:50%; display:grid; place-items:center; background:#fff; box-shadow:0 5px 16px #31554114; outline:6px solid #ffffff60; }
.usecase-film-hub > img { width:52px; height:52px; border-radius:50%; }
.usecase-film-hub > span { position:absolute; top:100%; margin-top:9px; font-size:12px; color:#315541; }
.usecase-film-node { position:absolute; display:grid; justify-items:center; color:#315541; width:180px; gap:5px; font-size:13px; text-align:center; }
.usecase-film-node > img { width:46px; height:46px; border-radius:50%; background:#fff; box-shadow:0 4px 10px #31554114; }
.usecase-film-person-context { font-size:11px; line-height:1.4; color:#65776a; }
.usecase-film-person-context > span { display:block; }
.usecase-film-node.is-node-0 { left:calc(50% - 220px); top:30px; }
.usecase-film-node.is-node-1 { right:calc(50% - 220px); top:30px; }
.usecase-film-node.is-node-2 { left:calc(50% - 220px); bottom:0; }
.usecase-film-node.is-node-3 { right:calc(50% - 220px); bottom:0; }
.usecase-film-node.is-node-3 > img { outline:3px solid #699c8180; }
.usecase-film-extract { position:relative; display:grid; gap:28px; width:640px; }
.usecase-film-promise { display:flex; gap:14px; align-items:center; max-width:560px; padding:22px 26px; border:1px solid #ffffffcf; background:#ffffffa6; border-radius:20px; }
.usecase-film-promise > img { width:32px; height:32px; flex:none; border-radius:50%; background:#fff; }
.usecase-film-promise > p { font-size:18px; line-height:1.5; color:#4d6554; }
.usecase-film-action { display:flex; align-items:center; gap:16px; margin-left:80px; padding:28px 30px; border-radius:20px; background:#fff; box-shadow:0 20px 40px #31554118; }
.usecase-film-check { flex:none; width:24px; height:24px; border:2px solid #85a48e; border-radius:7px; }
.usecase-film-action > div:first-of-type { flex:1; }
.usecase-film-action strong { display:block; font-size:19px; font-weight:500; line-height:1.4; color:#315541; }
.usecase-film-action div > span { display:block; margin-top:8px; font-size:12px; color:#71816f; }
.usecase-film-insight { display:flex; align-items:center; width:720px; }
.usecase-film-insight-person { display:grid; justify-items:center; gap:8px; flex:none; width:150px; font-size:17px; }
.usecase-film-insight-person > img { width:84px; height:84px; border-radius:50%; background:#fff; box-shadow:0 8px 24px #31554112; }
.usecase-film-insight-person > span { font-size:12px; color:#65776a; }
.usecase-film-insight-line { height:1px; flex:1; background:#5b8e7299; transform-origin:left center; }
.usecase-film-insight-note { width:430px; padding:30px; border:1px solid #ffffffc9; background:#ffffffed; border-radius:22px; box-shadow:0 16px 40px #31554115; }
.usecase-film-insight-note > img { display:block; margin-bottom:20px; }
.usecase-film-insight-note > strong { font-size:24px; font-weight:500; color:#315541; }
.usecase-film-insight-note > p { margin-top:12px; font-size:18px; line-height:1.5; color:#526b59; }
.usecase-film-evidence-strip { display:flex; align-items:center; gap:10px; margin-top:24px; padding-top:16px; border-top:1px solid #d8e3da; font-size:11px; color:#71816f; }
.usecase-film-evidence-strip > span:last-child { margin-left:auto; }
.usecase-film-calendar-scene { display:grid; gap:26px; width:620px; }
.usecase-film-date-message { display:flex; align-items:center; gap:12px; padding-left:16px; color:#526b59; font-size:17px; }
.usecase-film-date-message > img { width:32px; height:32px; background:#fff; border-radius:50%; }
.usecase-film-date-slip { position:relative; display:grid; grid-template-columns:120px minmax(0,1fr); gap:30px; align-items:center; margin:0 16px; padding:34px 32px 54px; background:#fff; border-radius:18px; box-shadow:0 20px 40px #3155411c; color:#315541; }
.usecase-film-binding { position:absolute; inset:-9px 40px auto; display:flex; justify-content:space-between; }
.usecase-film-binding > i { width:8px; height:22px; border-radius:4px; background:#86a48e; box-shadow:inset 1px 0 2px #ffffffbf; }
.usecase-film-date-slip time { display:grid; justify-items:center; gap:4px; border-right:1px solid #dae5dd; padding-right:30px; font-size:11px; letter-spacing:.08em; }
.usecase-film-date-slip time > strong { font-size:76px; line-height:1; font-weight:500; letter-spacing:-.07em; }
.usecase-film-date-slip > div > strong { font-size:25px; font-weight:500; }
.usecase-film-date-slip > div > p { margin:12px 0 8px; font-size:16px; }
.usecase-film-date-slip > div > span { font-size:12px; color:#71816f; }
.usecase-film-draft { position:absolute; right:32px; bottom:20px; font-size:11px; color:#71816f; }
@media(max-width:1100px) {
  .usecase-film-reply-details { display:none; }
}
@media(max-width:600px) {
  .wispr-reference-hero .usecase-motion-scene { min-height:420px; }
  .usecase-film-view { inset:24px 16px; }
  .usecase-message-stack { gap:6px; }
  .usecase-stack-message { padding:10px 12px; border-radius:14px; }
  .usecase-stack-message > header > img:first-child { width:18px; height:18px; }
  .usecase-stack-message > p { margin-top:4px; font-size:14px; }
  .usecase-film-constellation { width:100%; height:350px; }
  .usecase-film-orbit { top:160px; width:min(100%,300px); height:auto; aspect-ratio:1; }
  .usecase-film-orbit:nth-child(2) { width:70%; height:auto; }
  .usecase-film-orbit:nth-child(3) { width:42%; height:auto; }
  .usecase-film-hub { top:130px; }
  .usecase-film-node { width:50%; font-size:12px; }
  .usecase-film-person-context { font-size:10px; }
  .usecase-film-node.is-node-0 { top:25px; left:0; }
  .usecase-film-node.is-node-1 { top:25px; right:0; }
  .usecase-film-node.is-node-2 { bottom:10px; left:0; }
  .usecase-film-node.is-node-3 { bottom:10px; right:0; }
  .usecase-film-extract { gap:22px; }
  .usecase-film-promise { gap:10px; padding:18px; }
  .usecase-film-promise > p { font-size:14px; }
  .usecase-film-promise > img { width:26px; height:26px; }
  .usecase-film-action { gap:12px; padding:22px 18px; margin-left:18px; }
  .usecase-film-action strong { font-size:16px; }
  .usecase-film-insight { flex-direction:column; width:100%; }
  .usecase-film-insight-person { display:grid; grid-template-columns:40px auto; grid-template-rows:20px 18px; width:auto; justify-items:start; gap:0 12px; }
  .usecase-film-insight-person > img { width:40px; height:40px; grid-row:1 / span 2; }
  .usecase-film-insight-person > strong { font-size:15px; }
  .usecase-film-insight-line { flex:none; width:1px; height:24px; }
  .usecase-film-insight-note { width:100%; padding:24px; }
  .usecase-film-insight-note > img { margin-bottom:14px; }
  .usecase-film-insight-note > strong { font-size:21px; }
  .usecase-film-insight-note > p { font-size:16px; }
  .usecase-film-evidence-strip { gap:6px; font-size:10px; }
  .usecase-film-date-message { font-size:14px; padding:0 10px; }
  .usecase-film-date-message > img { flex:none; }
  .usecase-film-date-slip { grid-template-columns:70px minmax(0,1fr); gap:18px; margin:0 6px; padding:30px 20px 48px; }
  .usecase-film-date-slip time { padding-right:18px; font-size:10px; }
  .usecase-film-date-slip time > strong { font-size:56px; }
  .usecase-film-date-slip > div > strong { font-size:19px; }
  .usecase-film-date-slip > div > p { font-size:12px; }
  .usecase-film-date-slip > div > span { font-size:10px; }
  .usecase-film-draft { right:20px; }
}

/* On large screens, the original Circle, Me and Context diagrams share one sticky stage. */
body[data-usecase-id] .wispr-leading-feature .relationship-layout.is-sticky-story { grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:64px; }
.usecase-story-stage { position:sticky; top:108px; display:grid; grid-template-columns:minmax(0,1fr); min-width:0; align-self:start; }
.usecase-story-panel { grid-area:1 / 1; min-width:0; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .45s ease; }
.usecase-story-panel.is-current { opacity:1; visibility:visible; pointer-events:auto; }
body[data-usecase-id] .usecase-story-panel > .relationship-workspace { min-width:0; }
.usecase-story-panel > .usecase-style-art { display:grid; place-items:center; height:100%; min-height:580px; padding:32px; border-radius:32px; }
.usecase-story-panel .usecase-style-window { width:100%; padding:32px; }
.usecase-story-panel > .usecase-file-art { padding:28px; gap:20px; }
.usecase-story-panel .usecase-file-window { padding:24px; }
.usecase-story-panel .usecase-file-art > blockquote { padding:24px; }
.usecase-story-panel .usecase-file-art > blockquote > p { font-size:19px; }
.usecase-feature-steps { min-width:0; padding-bottom:120px; }
.usecase-feature-step { display:flex; flex-direction:column; justify-content:center; min-height:520px; padding-block:64px; }
.usecase-feature-step:first-child { padding-top:24px; }
body[data-usecase-id] .wispr-leading-feature .usecase-feature-step > .relationship-copy { grid-column:auto; grid-row:auto; }
.usecase-feature-step > h3,.usecase-feature-step .usecase-file-copy > h2 { margin:0 0 24px; font-size:38px; line-height:1.1; letter-spacing:-.04em; }
.usecase-feature-step:not(.is-current) > h3,.usecase-feature-step:not(.is-current) .usecase-file-copy > h2,.usecase-feature-step:not(.is-current) .wispr-relationship-title { color:#63715d; }
.usecase-feature-step > p,.usecase-feature-step .usecase-file-copy > p { margin:0; color:var(--muted); font-size:18px; line-height:1.6; }
.wispr-capabilities.has-sticky-story .wispr-feature-pair { display:block; }
.wispr-capabilities.has-sticky-story .wispr-feature-card:first-child { display:none; }
.wispr-capabilities.has-sticky-story .wispr-feature-card:last-child { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); grid-template-rows:auto auto; gap:24px 64px; text-align:left; }
.wispr-capabilities.has-sticky-story .wispr-feature-card:last-child > h3 { grid-column:1; grid-row:1; margin:0; align-self:end; }
.wispr-capabilities.has-sticky-story .wispr-feature-card:last-child > p { grid-column:1; grid-row:2; margin:0; }
.wispr-capabilities.has-sticky-story .wispr-feature-card:last-child > .usecase-canvas,.wispr-capabilities.has-sticky-story .wispr-feature-card:last-child > .usecase-email-writing { grid-column:2; grid-row:1 / span 2; margin:0; }
.usecase-file-knowledge.is-story-source { display:none; }
@media(prefers-reduced-motion:reduce) {
  .usecase-story-panel { transition:none; }
}

/* Conversation sources stay beside the actions they create. */
.usecase-next-art { display:flex; flex-direction:column; gap:20px; min-width:0; padding:24px; border-radius:28px; }
.usecase-next-tasks { justify-content:center; background:linear-gradient(145deg,#edf3ee,var(--proof-mist)); }
.usecase-next-calendar { background:linear-gradient(140deg,var(--proof-warm),#edf2eb); }
.usecase-action-window { flex:initial; display:flex; flex-direction:column; overflow:hidden; padding:22px; border:1px solid #ffffffcc; border-radius:20px; background:#fffffff2; box-shadow:0 8px 28px #294b3a0c; }
.usecase-action-window > header { display:flex; align-items:center; gap:9px; color:var(--ink); font-size:23px; }
.usecase-task-owners,.usecase-calendar-providers { display:flex; align-items:center; gap:6px; }
.usecase-task-owners { margin:22px 0 14px; }
.usecase-task-owners button,.usecase-calendar-providers button { padding:8px 13px; border:0; border-radius:20px; background:transparent; color:#647363; font:inherit; font-size:12px; cursor:pointer; }
.usecase-task-owners [aria-selected=true],.usecase-calendar-providers [aria-selected=true] { background:#e4eee6; color:#315541; }
.usecase-next-art button:focus-visible,.usecase-next-art input:focus-visible { outline:2px solid #526abb; outline-offset:3px; }
.usecase-action-lists ul { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.usecase-action-lists ul[hidden] { display:none; }
.usecase-action-lists li { display:flex; gap:10px; align-items:start; padding:17px 0; border-top:1px solid #e3eae4; }
.usecase-action-lists input { flex:none; width:16px; height:16px; margin:3px 0 0; accent-color:#315541; cursor:pointer; }
.usecase-action-lists li > button { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; flex:1; min-width:0; padding:0; border:0; background:transparent; text-align:left; color:#52694f; cursor:pointer; }
.usecase-action-lists button > strong { grid-column:1 / -1; font-size:15px; line-height:1.4; font-weight:500; }
.usecase-action-lists .usecase-task-person { display:flex; align-items:center; gap:6px; font-size:11px; color:#6c7b6b; }
.usecase-action-lists .usecase-task-person > img { width:19px; height:19px; border-radius:50%; }
.usecase-action-lists .usecase-task-due { align-self:center; font-size:11px; line-height:1.4; color:#6c7b6b; }
.usecase-action-lists [aria-pressed=true] > strong { color:#264d36; text-decoration:underline; text-underline-offset:4px; text-decoration-color:#8cab92; }
.usecase-action-lists input:checked + button > strong { text-decoration:line-through; color:#82917f; }
.usecase-action-sources { display:grid; margin:auto -22px -22px; padding-top:18px; }
.usecase-action-source { grid-area:1 / 1; padding:20px 22px; border:0; border-top:1px solid #e3eae4; border-radius:0; background:#f5f8f4; }
.usecase-action-source[aria-hidden=true] { visibility:hidden; pointer-events:none; }
.usecase-action-source > header,.usecase-event-message > header { display:flex; align-items:center; gap:9px; font-size:12px; color:#315541; }
.usecase-action-source > header > img:first-child,.usecase-event-message > header > img:first-child { width:26px; height:26px; border-radius:50%; background:#fff; }
.usecase-action-source > header > img:last-child,.usecase-event-message > header > img:last-child { margin-left:auto; width:18px; height:18px; }
.usecase-action-source blockquote { margin:12px 0 0; font-size:15px; line-height:1.5; color:#405b46; }
.usecase-event-message { padding:19px 20px; border:1px solid #ffffffd9; border-radius:18px; background:#ffffffd4; }
.usecase-event-message > p { margin:12px 0 16px; font-size:15px; line-height:1.5; color:#405b46; }
.usecase-event-message mark { background:#dcebdc; color:inherit; border-radius:3px; }
.usecase-event-message > button { display:flex; align-items:center; gap:8px; margin-left:auto; padding:9px 14px; border:1px solid #dce4dc; border-radius:18px; background:#fff; color:#315541; box-shadow:0 3px 8px #3155410d; font:inherit; font-size:12px; cursor:pointer; }
.usecase-calendar-providers { justify-content:center; flex-wrap:wrap; gap:0; margin-block:-4px; }
.usecase-calendar-providers button { padding:7px 11px; }
.usecase-event-window { position:relative; overflow:hidden; min-width:0; border:1px solid #ffffffbf; border-radius:16px; background:#fff; color:#303134; box-shadow:0 16px 28px -12px #244d483b; }
.usecase-event-window .meeting-mac-toolbar strong { font-weight:500; }
.usecase-event-google-icon { display:none; }
.usecase-next-calendar[data-provider=google] .meeting-window-dots { display:none; }
.usecase-next-calendar[data-provider=google] .usecase-event-google-icon { display:block; }
.usecase-next-calendar[data-provider=google] .meeting-mac-toolbar { background:#eef3fc; }
.usecase-event-window .meeting-mac-date { padding:16px 16px 22px; font-size:19px; }
.usecase-event-window .meeting-day-grid { margin:0 14px 0 8px; }
.usecase-event-window .meeting-hour { height:46px; }
.usecase-event-window .meeting-time-block { top:46px; height:46px; transform-origin:top; }
.usecase-event-editor { position:absolute; top:116px; left:82px; right:16px; padding:20px; border:1px solid #e0e3e7; border-radius:12px; background:#fff; box-shadow:0 8px 26px #29374725; }
.usecase-event-editor > strong { display:block; font-size:18px; line-height:1.3; font-weight:500; color:#303134; }
.usecase-event-editor dl { display:grid; gap:16px; margin:19px 0; }
.usecase-event-editor dl > div { display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; font-size:12px; line-height:1.5; }
.usecase-event-editor dt { color:#7a8083; }
.usecase-event-editor dd { margin:0; }
.usecase-event-editor small { display:block; margin-top:3px; font-size:11px; color:#687177; }
.usecase-event-review-actions { display:flex; justify-content:flex-end; gap:8px; }
.usecase-event-review-actions button { padding:6px 14px; border:1px solid #d8dce0; border-radius:6px; background:#fff; color:#4c5458; font:inherit; font-size:12px; cursor:pointer; }
.usecase-event-review-actions [data-event-confirm] { border-color:#007aff; background:#007aff; color:#fff; }
.usecase-next-calendar[data-provider=google] [data-event-confirm] { border-color:#1a73e8; border-radius:16px; background:#1a73e8; }
.usecase-event-confirmed { position:absolute; left:50px; right:12px; bottom:12px; margin:0; padding:10px 12px; border-radius:8px; background:#edf5ed; color:#315541; font-size:12px; line-height:1.4; }
.usecase-event-confirmed > span { margin-right:5px; }
.usecase-next-calendar [hidden] { display:none!important; }
@media(max-width:850px) {
  .usecase-next-art { margin-top:24px; }
}
@media(max-width:600px) {
  .usecase-next-art { padding:20px; gap:18px; border-radius:24px; }
  .usecase-action-window { padding:20px 18px; }
  .usecase-action-window > header { font-size:22px; }
  .usecase-action-lists button > strong { font-size:14px; }
  .usecase-action-source,.usecase-event-message { padding:16px; }
  .usecase-action-source blockquote,.usecase-event-message > p { font-size:14px; }
  .usecase-calendar-providers button { padding:7px 9px; font-size:11px; }
  .usecase-event-editor { left:38px; right:10px; top:112px; padding:16px; }
  .usecase-event-editor > strong { font-size:17px; }
  .usecase-event-editor dl > div { grid-template-columns:minmax(0,1fr); gap:3px; }
  .usecase-event-editor dl { gap:12px; margin:14px 0; }
  .usecase-event-editor dt { font-size:10px; }
  .usecase-event-review-actions button { padding:6px 10px; font-size:11px; }
  .usecase-event-window .meeting-hour { height:52px; }
  .usecase-event-window .meeting-time-block { top:52px; height:52px; }
}
.usecase-action-lists > [hidden] { display:none; }
.usecase-event-message { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 16px; }
.usecase-event-message > header { grid-column:1; grid-row:1; }
.usecase-event-message > button { grid-column:2; grid-row:1; align-self:center; }
.usecase-event-message > p { grid-column:1 / -1; grid-row:2; margin:0; }
@media(max-width:600px) {
  .usecase-action-sources { margin-inline:-18px; margin-bottom:-20px; }
  .usecase-action-source { padding:18px; }
  .usecase-event-message { display:block; }
  .usecase-event-message > p { margin:12px 0 16px; }
}
.usecase-action-source mark { padding:1px 2px; border-radius:3px; background:#e0ecdd; color:inherit; }

/* Client requests stay compact beside the shared ToneBird reply UI. */
.is-client-work .usecase-section-intro > .actions { display:flex; justify-content:center; margin-top:32px; }
.is-client-work .usecase-task-gallery { margin-top:64px; }
.is-client-work .usecase-task-options { gap:12px 28px; margin-bottom:36px; }
.is-client-work .usecase-task-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; padding:48px; border-radius:32px; background:radial-gradient(ellipse at 0 100%,var(--proof-cool),transparent 80%),radial-gradient(ellipse at 100% 0,var(--proof-warm),transparent 78%),var(--proof-mist); }
.is-client-work .client-work-example { grid-column:1 / -1; grid-row:1; grid-template-columns:subgrid; gap:40px; align-items:start; align-self:start; }
.client-scene-artwork { display:flex; flex-direction:column; align-items:flex-start; gap:32px; min-width:0; }
.is-client-work .client-native-reply { display:flex; flex-direction:column; gap:24px; padding:0; border:0; border-radius:0; background:none; }
.client-native-reply .tb-text { display:grid; }
.client-scene-message { position:relative; width:100%; margin:0; padding:32px; border:0; border-radius:36px; background:#fff; box-shadow:0 16px 28px #254c3914; }
.client-scene-message > p { margin:0; color:var(--ink); font-size:19px; line-height:1.55; }
.client-bubble-tail { position:absolute; bottom:-25px; left:30px; width:32px; height:30px; fill:#fff; pointer-events:none; }
.client-scene-avatar { width:60px; height:60px; margin-left:16px; border:1px solid #ffffffbf; border-radius:50%; background:#fffffff0; box-shadow:0 6px 18px #254c390d; }
.client-scene-avatar > img { display:block; width:100%; height:100%; padding:7px; object-fit:contain; }
.is-client-work .client-work-example.is-leaving { visibility:visible; pointer-events:none; }
.is-client-work .client-work-example.is-leaving .usecase-candidate.is-selected { visibility:visible; opacity:1; }
@media(max-width:991px) {
  .is-client-work .usecase-task-panels { padding:32px; column-gap:28px; }
  .is-client-work .client-work-example { column-gap:28px; }
  .client-scene-message { padding:28px; border-radius:30px; }
}
@media(max-width:767px) {
  .is-client-work .usecase-task-gallery { margin-top:48px; }
  .is-client-work .usecase-task-options { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; margin-bottom:28px; }
  .is-client-work .usecase-task-panels { grid-template-columns:minmax(0,1fr); padding:24px; gap:36px; border-radius:24px; }
  .is-client-work .client-work-example { grid-column:1; grid-row:1; gap:36px; }
  .client-scene-message { padding:24px; border-radius:28px; }
  .client-scene-message > p { font-size:17px; }
  .client-scene-avatar { width:56px; height:56px; margin-left:12px; }
  .client-bubble-tail { left:24px; }
}
@media(max-width:359px) {
  .is-client-work .usecase-task-panels { padding:18px; }
  .client-scene-message { padding:20px; }
}

/* Every use case has a visible entry and a scene built for its own task. */
.usecase-audience-grid { display:grid; gap:96px; }
.usecase-audience-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 40px; }
.usecase-audience-card { display:grid; grid-row:span 4; grid-template-rows:subgrid; min-width:0; }
.usecase-audience-card > h2 { margin:4px 0 0; color:var(--ink); font-size:30px; line-height:1.15; letter-spacing:-.03em; text-wrap:balance; }
.usecase-audience-card > p { margin:0; color:#63715d; font-size:17px; line-height:1.65; }
.usecase-audience-card > .actions { justify-content:flex-start; align-self:end; margin:4px 0 0; }
.usecase-hub-scene { display:flex; flex-direction:column; justify-content:center; align-self:stretch; width:100%; gap:20px; min-width:0; aspect-ratio:4 / 3; padding:36px; border-radius:32px; background:radial-gradient(ellipse at 0 100%,#b8d0bf,transparent 80%),radial-gradient(ellipse at 100% 0,#f0dfc4,transparent 78%),#e8eee5; }
.usecase-hub-scene[data-hub-scene=sales] { background:radial-gradient(ellipse at 0 100%,#e6c7a5,transparent 80%),radial-gradient(ellipse at 100% 0,#cedfc0,transparent 78%),#f0e8da; }
.usecase-hub-scene[data-hub-scene=workplace-communication] { background:radial-gradient(ellipse at 0 100%,#b9ccdd,transparent 80%),radial-gradient(ellipse at 100% 0,#dce5cb,transparent 78%),#e6eceb; }
.usecase-hub-scene[data-hub-scene=email-replies] { background:radial-gradient(ellipse at 0 100%,#bbd9cc,transparent 80%),radial-gradient(ellipse at 100% 0,#d8d0e7,transparent 78%),#e8eceb; }
.hub-project-paper,.hub-proposal-paper,.hub-email-paper { width:88%; padding:24px; border:1px solid #ffffffed; border-radius:18px; background:#fffffff0; box-shadow:0 12px 28px #254c3910; }
.hub-paper-top { display:flex; align-items:center; justify-content:space-between; gap:16px; color:#3b5845; font-size:15px; line-height:1.4; }
.hub-paper-top > span { color:#697d6d; font-size:13px; }
.hub-project-pages { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:20px; }
.hub-project-pages > i { aspect-ratio:1.25; border:1px solid #ccdacd; border-radius:7px; background:linear-gradient(#cddfce,#cddfce) 18% 16% / 66% 12% no-repeat,linear-gradient(#e1eadf,#e1eadf) 18% 49% / 66% 30% no-repeat,#f7faf5; }
.hub-project-paper > p { margin:16px 0 0; color:#607564; font-size:13px; }
.hub-scene-conversation { display:grid; justify-items:start; gap:14px; width:78%; margin-left:auto; }
.hub-scene-conversation > blockquote { position:relative; width:100%; margin:0; padding:20px 24px; border-radius:22px; background:#fff; color:#315541; font-size:19px; line-height:1.45; letter-spacing:-.02em; box-shadow:0 8px 20px #254c390a; }
.hub-scene-conversation > blockquote::after { content:''; position:absolute; left:24px; bottom:-10px; width:16px; height:20px; border-radius:0 0 4px 4px; background:#fff; transform:rotate(30deg); }
.hub-scene-portrait { display:block; width:44px; height:44px; padding:5px; border-radius:50%; background:#fffffff0; object-fit:contain; }
.hub-scene-conversation > .hub-scene-portrait { margin-left:12px; }
.hub-proposal-amount { display:block; margin:18px 0; color:#315541; font-size:54px; font-weight:500; line-height:1.1; letter-spacing:-.05em; }
.hub-proposal-modules { display:flex; gap:10px; }
.hub-proposal-modules > i { flex:1; height:14px; border-radius:4px; background:#c3d7bc; }
.hub-proposal-modules > i:nth-child(2) { background:#d1debf; }
.hub-proposal-modules > i:nth-child(3) { background:#e0e7d0; }
.hub-work-plan { display:grid; gap:16px; width:88%; }
.hub-work-plan > div { display:grid; grid-template-columns:60px minmax(0,1fr) 12px; gap:16px; align-items:center; padding:20px 24px; border:1px solid #ffffffed; border-radius:18px; background:#fffffff0; box-shadow:0 10px 24px #254c390a; }
.hub-work-plan span { color:#315541; font-size:26px; font-weight:500; letter-spacing:-.03em; }
.hub-work-plan strong { color:#536d5b; font-size:15px; font-weight:500; }
.hub-work-plan i { width:10px; height:10px; border-radius:50%; background:#a8c993; }
.hub-email-original { width:88%; margin:0; color:#748076; font-size:17px; line-height:1.5; }
.hub-email-paper { width:100%; }
.hub-email-paper .hub-paper-top { justify-content:flex-start; }
.hub-email-paper > p { margin:24px 0 20px; color:#315541; font-size:20px; line-height:1.6; letter-spacing:-.02em; }
.hub-email-paper mark { color:inherit; background:#e2efdc; }
.hub-email-signature { display:flex; justify-content:flex-end; }
@media(max-width:991px) {
  .usecase-audience-row { column-gap:28px; }
  .usecase-hub-scene { padding:28px; }
  .hub-project-paper,.hub-proposal-paper,.hub-email-paper { padding:20px; }
  .hub-work-plan > div { grid-template-columns:48px minmax(0,1fr) 10px; gap:12px; padding:18px; }
  .hub-scene-conversation { width:86%; }
  .hub-scene-conversation > blockquote { padding:18px; font-size:17px; }
}
@media(max-width:767px) {
  .usecase-audience-grid { gap:96px; }
  .usecase-audience-row { display:contents; }
  .usecase-audience-card { display:grid; grid-row:auto; grid-template-rows:auto; gap:18px; }
  .usecase-audience-card > h2 { margin-top:4px; }
  .usecase-audience-card > .actions { margin-top:4px; }
  .usecase-hub-scene { gap:20px; padding:28px; border-radius:24px; }
  .hub-project-paper,.hub-proposal-paper { width:90%; }
  .hub-paper-top { font-size:14px; }
  .hub-paper-top > span { font-size:12px; }
  .hub-project-pages { gap:8px; }
  .hub-scene-conversation { width:88%; }
  .hub-proposal-amount { font-size:46px; }
  .hub-work-plan { width:94%; }
  .hub-work-plan > div { grid-template-columns:44px minmax(0,1fr) 10px; }
  .hub-work-plan span { font-size:23px; }
  .hub-work-plan strong { font-size:14px; }
  .hub-email-original { font-size:15px; }
  .hub-email-paper > p { font-size:18px; }
}
@media(max-width:600px) {
  .usecase-audience-card > h2 { font-size:27px; }
}
@media(max-width:359px) {
  .usecase-hub-scene { padding:22px; }
  .hub-project-paper,.hub-proposal-paper { width:100%; }
  .hub-scene-conversation { width:94%; }
  .hub-work-plan { width:100%; }
  .hub-work-plan > div { gap:10px; padding:16px; }
}