/* Scoped, shared across the eight full homepages. Lightweight pages carry no demo payload. */
.attention-demo { --ad-accent:#d6c1a3; --ad-ink:#f2f0ec; --ad-muted:#aeacb1; padding:96px 0; color:var(--ad-ink); background:#0b0b0d; border-top:1px solid #252428; }
.attention-demo *, .attention-demo *::before, .attention-demo *::after { box-sizing:border-box; }
.attention-demo [hidden] { display:none !important; }
.attention-demo button, .attention-demo input { font:inherit; }
.attention-demo button { cursor:pointer; }
.attention-demo button:focus-visible, .attention-switch input:focus-visible + span { outline:2px solid #f5dfbd; outline-offset:5px; }
.attention-heading { display:grid; grid-template-columns:1.1fr 1fr; gap:56px; align-items:end; margin-bottom:34px; }
.attention-eyebrow { display:block; margin-bottom:18px; color:var(--ad-accent); font:11px/1.6 'JetBrains Mono',monospace; letter-spacing:.12em; }
.attention-heading h2 { margin:0; max-width:580px; font:500 clamp(34px,4.2vw,58px)/1.08 ui-serif,'New York',Georgia,serif; letter-spacing:-.025em; text-wrap:balance; }
.attention-heading h2 > span, .attention-desktop-copy h3 > span { display:inline-block; }
.attention-heading > p { margin:0; color:var(--ad-muted); font-size:15px; line-height:1.8; max-width:480px; }
.attention-frame { border:1px solid #3a3739; border-radius:18px; overflow:hidden; box-shadow:0 24px 70px #0004; }
.attention-frame-caption { min-height:42px; padding:11px 20px; display:flex; align-items:center; gap:9px; background:#19191c; color:#b8b4b3; font:10px/1.5 'JetBrains Mono',monospace; letter-spacing:.04em; }
.attention-caption-dot { width:6px; height:6px; border-radius:50%; background:#c1a688; }
.attention-caption-feature { margin-left:auto; opacity:.7; text-align:right; }
.attention-toolbar { padding:17px 22px; background:#121214; display:flex; align-items:center; justify-content:space-between; gap:15px 20px; flex-wrap:wrap; border-bottom:1px solid #d4c9bc1c; }
.attention-toolbar .attention-feedback { flex:1 1 230px; }
.attention-toolbar .attention-actions { margin:0; }
.attention-desktop { position:relative; min-height:356px; overflow:hidden; background:#34313d url("/images/attention-desert.svg") center 55% / cover no-repeat; }
.attention-desktop::before { content:''; position:absolute; inset:0; background:linear-gradient(90deg,#1115215c 0%,#16182520 46%,transparent 72%),linear-gradient(0deg,#17131b18,transparent 50%); pointer-events:none; }
.attention-menubar { position:relative; z-index:4; height:34px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 20px; background:#181a2466; border-bottom:1px solid #ffffff14; color:#faf6f1; box-shadow:0 4px 18px #00000008; }
.attention-menubar-left, .attention-menubar-right { display:flex; align-items:center; gap:15px; font:12px/1 ui-sans-serif,-apple-system,BlinkMacSystemFont,sans-serif; white-space:nowrap; }
.attention-menubar-left > svg { width:15px; height:17px; }
.attention-menubar-left > span { color:#d6d1d0; letter-spacing:5px; font-size:5px; }
.attention-menubar-right { gap:13px; height:100%; }
.attention-menubar button { border:0; padding:0; color:inherit; background:none; height:28px; display:flex; align-items:center; justify-content:center; }
.attention-menubar svg { width:19px; height:19px; display:block; }
.attention-native-icon { gap:4px; max-width:0; opacity:0; overflow:hidden; transform:translateY(-5px); pointer-events:none; transition:max-width .32s ease,opacity .22s ease,transform .32s ease,margin .32s ease; margin-right:-13px; }
.attention-demo[data-state='unread'] .attention-native-icon, .attention-demo[data-state='clearing'] .attention-native-icon { max-width:65px; opacity:1; transform:none; pointer-events:auto; margin-right:0; }
.attention-native-count { font-size:11px; font-weight:600; }
.attention-tuck { width:25px; }
.attention-tuck[aria-expanded='true'] svg { transform:rotate(180deg); }
.attention-system-icon svg { width:17px; height:17px; }
.attention-battery { width:21px; height:10px; border:1px solid #f4f2f1b3; border-radius:3px; position:relative; }
.attention-battery::before { content:''; position:absolute; inset:2px; background:#f3efea; border-radius:1px; }
.attention-battery::after { content:''; position:absolute; right:-3px; top:2px; width:1px; height:4px; background:#f4f2f1b3; }
.attention-desktop-copy { position:relative; text-shadow:0 1px 12px #11101877; padding:58px 42px 90px; max-width:56%; }
.attention-orbit { display:block; width:24px; height:24px; margin-bottom:17px; border:1px solid #e6d8cb7d; border-radius:50%; position:relative; }
.attention-orbit::after { content:''; position:absolute; inset:6px; border:1px solid #e6d8cbad; border-radius:50%; }
.attention-desktop-copy h3 { margin:0 0 12px; font:400 clamp(23px,2.5vw,34px)/1.15 ui-serif,'New York',Georgia,serif; letter-spacing:-.015em; color:#fff9f1; max-width:310px; text-wrap:balance; }
.attention-desktop-copy p { font-size:12px; line-height:1.7; color:#f3ede6; max-width:270px; margin:0; }
.attention-preference { position:absolute; right:40px; top:94px; width:300px; border:1px solid #ffffff38; border-radius:15px; background:linear-gradient(135deg,#29282ceb,#17181de8); box-shadow:0 16px 42px #0b0b1459,inset 0 1px #fff1; backdrop-filter:blur(20px); padding:16px 17px; }
.attention-preference-header { display:flex; align-items:center; justify-content:space-between; gap:8px; color:#c9c4c3; font-size:10px; margin-bottom:17px; }
.attention-pro { padding:2px 5px; border:1px solid #d8c3a840; border-radius:4px; font:9px/1.3 'JetBrains Mono',monospace; letter-spacing:.05em; }
.attention-preference-row { display:flex; align-items:center; gap:11px; }
.attention-app-icon { flex-shrink:0; width:36px; height:36px; border-radius:10px; background:linear-gradient(#7adf9c,#2d9a63); display:flex; align-items:center; justify-content:center; box-shadow:inset 0 1px #ddffe680,0 3px 8px #0002; }
.attention-app-icon svg { width:23px; height:23px; color:white; }
.attention-preference-row > div { min-width:0; flex:1; }
.attention-preference-row strong { display:block; font-size:12px; font-weight:600; line-height:1.4; }
.attention-preference-row div > span { display:block; font-size:10px; line-height:1.4; color:#bbb5b3; margin-top:2px; }
.attention-preference > p { margin:15px 0 0; padding-top:12px; border-top:1px solid #e7dcd017; color:#c2bcba; font-size:10px; line-height:1.6; }
.attention-switch { position:relative; flex-shrink:0; width:32px; height:20px; cursor:pointer; }
.attention-switch input { position:absolute; inset:-12px; width:56px; height:44px; opacity:0; margin:0; cursor:pointer; z-index:1; }
.attention-switch > span { display:block; width:32px; height:20px; border-radius:20px; background:#696a73; transition:background .2s; box-shadow:inset 0 1px 3px #0002; }
.attention-switch > span::after { content:''; display:block; width:16px; height:16px; border-radius:50%; background:white; position:absolute; top:2px; left:2px; box-shadow:0 1px 3px #0003; transition:transform .2s; }
.attention-switch input:checked + span { background:#40ad71; }
.attention-switch input:checked + span::after { transform:translateX(12px); }
.attention-dock { position:absolute; bottom:13px; left:50%; transform:translateX(-50%); height:61px; padding:9px 14px; border-radius:17px; display:flex; align-items:center; gap:16px; background:#f4ecec35; border:1px solid #fff4; box-shadow:0 5px 15px #0002,inset 0 1px #fff3; backdrop-filter:blur(15px); }
.attention-dock-app { position:relative; }
.attention-dock-app .attention-app-icon { width:40px; height:40px; border-radius:11px; }
.attention-dock-folder, .attention-dock-utility { width:35px; height:35px; display:flex; align-items:center; justify-content:center; border-radius:9px; background:linear-gradient(#8fc7fd,#3685cf); color:#f1f8ff; }
.attention-dock-utility { background:linear-gradient(#e5e5e9,#aaabb4); color:#4b4e59; }
.attention-dock-folder svg,.attention-dock-utility svg { width:24px; height:24px; }
.attention-dock-badge { position:absolute; right:-8px; top:-7px; min-width:19px; height:19px; border-radius:12px; padding:0 4px; display:flex; align-items:center; justify-content:center; color:white; background:#ed5655; box-shadow:0 1px 2px #0003; border:1px solid #f79186; font:600 10px/1 ui-sans-serif,-apple-system,sans-serif; }
.attention-dock-running { position:absolute; left:18px; bottom:-6px; width:3px; height:3px; border-radius:50%; background:#faf5f0cc; }
.attention-shelf { position:absolute; top:43px; right:82px; z-index:6; display:flex; align-items:center; gap:15px; padding:11px 15px; border:1px solid #ffffff32; border-radius:17px; color:#f5f1ed; background:#242329eb; box-shadow:0 10px 24px #0003; backdrop-filter:blur(20px); }
.attention-shelf > span:first-child { font-size:10px; color:#d2cac5; }
.attention-shelf-glyph svg { width:20px; height:20px; display:block; }
.attention-message-menu { position:absolute; top:42px; right:105px; z-index:7; width:230px; padding:17px; border:1px solid #ffffff2b; border-radius:12px; background:#222128f5; box-shadow:0 15px 35px #0005; }
.attention-message-menu strong, .attention-message-menu > span { display:block; font-size:12px; line-height:1.5; }
.attention-message-menu > span { color:#d3cbc6; margin:5px 0 13px; }
.attention-message-menu button { color:#f7e7d1; border:1px solid #cbb3914d; background:#c6a77924; border-radius:6px; padding:8px 12px; font-size:11px; }
.attention-message-menu p { margin:12px 0 0; font-size:10px; line-height:1.6; color:#bfb6b1; }
.attention-console { padding:20px 28px 19px; background:#121214; }
.attention-feedback { display:flex; align-items:center; gap:10px; min-height:27px; position:relative; }
.attention-feedback-light { width:6px; height:6px; flex-shrink:0; border-radius:50%; background:#8f8c91; }
.attention-demo[data-state='unread'] .attention-feedback-light { background:#e4c29d; box-shadow:0 0 12px #e4c29d33; }
.attention-demo[data-state='clearing'] .attention-feedback-light { background:#e8bf84; }
.attention-feedback p { margin:0; color:#e2deda; font-size:13px; line-height:1.6; }
.attention-countdown { margin-left:auto; width:62px; height:3px; flex-shrink:0; border-radius:2px; background:#ffffff0d; opacity:0; }
.attention-countdown > span { display:block; height:100%; background:#d9b789; width:var(--attention-progress,0%); border-radius:2px; }
.attention-demo[data-state='clearing'] .attention-countdown { opacity:1; }
.attention-actions { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin-top:18px; }
.attention-actions button { padding:11px 17px; border:1px solid #555158; border-radius:7px; color:#e4dfdc; background:#242226; font-size:12px; line-height:1.4; min-height:44px; transition:background .2s,border-color .2s; }
.attention-actions button:hover:not(:disabled) { background:#363136; border-color:#a99a8b; }
.attention-actions .attention-send { display:flex; gap:8px; align-items:center; color:#262321; background:#e2d8c9; border-color:#e2d8c9; font-weight:600; }
.attention-actions .attention-send:hover:not(:disabled) { background:#f7eddd; }
.attention-actions .attention-reset { margin-left:auto; background:transparent; color:#b5adb0; border-color:transparent; }
.attention-actions button:disabled { opacity:.4; cursor:default; }
.attention-steps { display:flex; gap:20px; list-style:none; padding:20px 0 0; margin:20px 0 0; border-top:1px solid #d4c9bc1c; }
.attention-steps li { flex:1; font-size:11px; line-height:1.5; color:#a0999d; transition:color .2s; }
.attention-steps li > span { display:inline-block; margin-right:9px; font:10px/1 'JetBrains Mono',monospace; color:#8e868a; }
.attention-steps li[aria-current='step'] { color:#eee2d4; }
.attention-steps li[aria-current='step'] > span { color:#d7b994; }
.attention-console .attention-steps { margin:0; padding:0; border:0; }
.attention-waiting { margin:14px 0 0; font-size:10px; line-height:1.7; color:#a39a9e; }
.attention-scope { margin:18px 0 0; max-width:880px; font-size:11px; line-height:1.8; color:#a39da1; }
@media (max-width:800px) {
  .attention-heading { grid-template-columns:1fr; gap:18px; }
  .attention-heading > p { max-width:620px; }
  .attention-desktop-copy { padding-left:28px; max-width:49%; }
  .attention-preference { width:260px; right:26px; }
}
@media (max-width:600px) {
  .attention-demo { padding:64px 0; }
  .attention-heading h2 { font-size:37px; }
  .attention-heading > p { font-size:14px; }
  .attention-frame { border-radius:13px; }
  .attention-frame-caption { padding:11px 14px; font-size:9px; }
  .attention-caption-feature { display:none; }
  .attention-menubar { padding:0 12px; }
  .attention-menubar-left { gap:10px; }
  .attention-menubar-left > span { display:none; }
  .attention-menubar-right { gap:10px; font-size:10px; }
  .attention-native-icon { margin-right:-10px; }
  .attention-menubar-right time { display:none; }
  .attention-desktop { min-height:445px; }
  .attention-desktop-copy { padding:30px 23px 0; max-width:none; }
  .attention-orbit { display:none; }
  .attention-desktop-copy h3 { font-size:26px; max-width:300px; }
  .attention-desktop-copy p { font-size:11px; max-width:300px; }
  .attention-preference { position:relative; top:auto; right:auto; width:auto; margin:22px 23px 100px; padding:13px 14px; }
  .attention-preference-header { margin-bottom:12px; }
  .attention-preference > p { margin-top:12px; padding-top:10px; }
  .attention-console { padding:19px 17px; }
  .attention-toolbar { padding:16px 17px; gap:13px; }
  .attention-toolbar .attention-feedback { flex-basis:100%; }
  .attention-feedback p { font-size:12px; }
  .attention-actions { gap:8px; }
  .attention-actions button { padding:10px 12px; font-size:11px; }
  .attention-actions .attention-reset { margin-left:0; }
  .attention-steps { gap:12px; }
  .attention-steps li { font-size:10px; }
  .attention-steps li > span { display:block; margin-bottom:7px; }
  .attention-shelf { right:15px; max-width:calc(100% - 30px); gap:12px; }
  .attention-message-menu { right:14px; }
}
@media (prefers-reduced-motion:reduce) { .attention-demo *, .attention-demo *::before, .attention-demo *::after { transition:none !important; animation:none !important; } }