/* ============================================================
   Hardware device pages — shared stylesheet (2026-08-03).
   Extracted from 56 identical inline blocks (~25KB each, ~0.9MB
   total). Loads via Base stylesheets prop, before chrome.css.
   ============================================================ */
:root {
    --bg-primary:#F0EFE9; --bg-section:#F9F9F7; --bg-dark:#091524; --bg-card:#ECEAE4;
    --bg-muted:rgba(9,21,36,0.06); --text-primary:#1A1B17; --text-body:rgba(9,21,36,0.64);
    --text-muted:rgba(9,21,36,0.60); --text-light:#F9F9F7; --accent-lime:#38B6FF;
    --accent-teal:#2A528E; --border:rgba(9,21,36,0.10); --border-med:rgba(9,21,36,0.20);
    --serif:"Geist",system-ui,-apple-system,sans-serif; --mono:"Sometype Mono",ui-monospace,monospace; --sans:"Geist",system-ui,-apple-system,sans-serif;
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior:smooth; }
  body { font-family:var(--sans); background:var(--bg-primary); color:var(--text-primary); font-size:15px; line-height:1.33; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
  h1,h2,h3 { font-family:var(--serif); font-weight:700; }
  a { color:inherit; text-decoration:none; }
  button { font-family:var(--sans); cursor:pointer; border:none; background:none; }
  .container { max-width:1200px; margin:0 auto; padding:0 20px; }
  .section-eyebrow { font-family:var(--sans); font-size:13px; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-body); margin-bottom:16px; }
  .section-eyebrow .idx { color:var(--text-muted); margin-right:6px; }

  .btn { position:relative; z-index:0; display:inline-flex; align-items:center; gap:8px; font-size:15px; transition:background .2s ease, border-color .2s ease, transform .2s ease; white-space:nowrap; }
  .btn svg { width:16px; height:16px; transition:transform .3s ease; }
  .btn:hover svg { transform:translateX(3px); }
  .btn::after { content:''; position:absolute; inset:-8px; border-radius:inherit; background:radial-gradient(var(--btn-glow, rgba(255,255,250,0.55)), transparent); opacity:0; filter:blur(12px); z-index:-1; transition:opacity .35s ease; pointer-events:none; }
  .btn:hover::after { opacity:1; }
  .btn-primary { background:var(--bg-dark); color:var(--text-light); border-radius:999px; padding:12px 24px; --btn-glow:rgba(255,255,250,0.55); }
  .btn-primary:hover { transform:translateY(-1px); background:#13263f; }
  .btn-primary-lg { padding:14px 28px; font-size:17px; }
  .btn-secondary { background:transparent; border:none; border-radius:0; box-shadow:none; padding:14px 10px; gap:6px; color:var(--text-primary); font-weight:500; }
  .btn-secondary::after { content:''; position:static; inset:auto; flex-shrink:0; width:15px; height:15px; border-radius:0; opacity:1; filter:none; z-index:auto; pointer-events:auto; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat; transition:transform .2s ease; }
  .btn-secondary:hover { background:transparent; border-color:transparent; opacity:0.65; }
  .btn-secondary:hover::after { transform:translateX(3px); }
  .btn-pill-outline { background:transparent; border:1px solid var(--border-med); border-radius:99px; padding:8px 16px; color:var(--text-primary); font-size:14px; }
  .btn-pill-outline:hover { background:var(--bg-muted); }

  .desk-chip { display:inline-flex; align-items:center; gap:9px; background:var(--bg-muted); border:1px solid var(--border); border-radius:99px; padding:7px 8px 7px 14px; font-size:13px; color:var(--text-body); transition:all .2s; }
  .desk-chip:hover { border-color:var(--border-med); }
  .desk-chip b { color:var(--text-primary); font-weight:500; }
  .desk-chip .back { display:inline-flex; align-items:center; gap:5px; background:#fff; border:1px solid var(--border); border-radius:99px; padding:3px 10px; font-size:12px; color:var(--text-primary); }
  .desk-chip .back svg { width:11px; height:11px; }

  .prod-hero { padding:64px 0 56px; }
  .prod-hero .container { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
  .ph-left h1 { font-size:54px; line-height:1.12; letter-spacing:-0.018em; margin-top:24px; }
  .ph-left h1 .l2 { color:var(--text-primary); }
  .ph-left p.sub { font-size:17px; color:var(--text-body); margin-top:20px; line-height:1.5; max-width:490px; }
  .ph-cta { display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }
  .ph-visual { display:flex; align-items:center; justify-content:center; }

  section.block { padding:116px 0 0; }
  .block-head { max-width:780px; }
  .block-head h2 { font-size:36px; line-height:1.22; letter-spacing:-0.012em; }
  .block-head .sub { font-size:17px; color:var(--text-body); margin-top:16px; line-height:1.5; max-width:640px; }

  .feature-row { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; margin-top:48px; }
  .feature-row.flip .fr-text { order:2; }
  .feature-row .fr-eyebrow { font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--accent-teal); margin-bottom:14px; }
  .feature-row .fr-text h3 { font-size:28px; line-height:1.2; letter-spacing:-0.01em; }
  .feature-row .fr-text p { font-size:16px; color:var(--text-body); line-height:1.55; margin-top:14px; max-width:460px; }
  .fr-note { font-size:13.5px; color:var(--text-muted); margin-top:16px; }
  .fr-visual { background:transparent; padding:0; }
  .feature-row.dark .fr-visual { background:transparent; }

  .mock-panel { background:#fff; border-radius:12px; border:1px solid var(--border); overflow:hidden; box-shadow:0 14px 40px rgba(9,21,36,0.08); }
  .mp-top { padding:14px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:8px; }
  .mp-top .dots { display:flex; gap:5px; }
  .mp-top .dots i { width:9px; height:9px; border-radius:50%; background:var(--border-med); display:inline-block; }
  .mp-top .mp-name { font-size:12px; color:var(--text-muted); margin-left:6px; }
  .mp-top .mp-tag { margin-left:auto; font-size:11px; background:var(--bg-muted); border-radius:99px; padding:4px 10px; color:var(--text-body); }
  .mp-top .mp-tag.lime { background:rgba(42,82,142,0.12); color:var(--accent-teal); }
  .mp-body { padding:20px; }
  .mp-label { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin:2px 0 10px; }
  .mp-row { display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:9px; background:var(--bg-section); border:1px solid var(--border); margin-bottom:9px; }
  .mp-row .ic { width:28px; height:28px; border-radius:7px; background:var(--bg-muted); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .mp-row .ic svg { width:14px; height:14px; stroke:var(--text-primary); opacity:.72; }
  .mp-row.teal .ic { background:rgba(42,82,142,0.10); }
  .mp-row.teal .ic svg { stroke:var(--accent-teal); opacity:1; }
  .mp-row.alert .ic { background:rgba(56,182,255,0.35); }
  .mp-row .r1 { font-size:13px; font-weight:500; }
  .mp-row .r2 { font-size:11.5px; color:var(--text-muted); }
  .mp-row .chev { margin-left:auto; font-size:11px; color:var(--accent-teal); background:rgba(42,82,142,0.08); border-radius:99px; padding:4px 10px; }
  .mp-row .chev.lime { color:var(--accent-teal); background:rgba(42,82,142,0.12); }
  .mp-row .chev.muted { color:var(--text-body); background:var(--bg-muted); }
  .mp-rule { margin-top:6px; padding:13px; border-radius:9px; background:var(--bg-dark); color:var(--text-light); font-size:12.5px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .mp-rule .when { color:rgba(252,252,247,0.6); }
  .mp-rule .cond { background:rgba(252,252,247,0.10); border-radius:6px; padding:3px 8px; }
  .mp-rule .arrow { color:var(--accent-lime); }
  .mp-rule .act { background:rgba(42,82,142,0.12); color:var(--accent-teal); border-radius:6px; padding:3px 8px; }
  .mp-prompt { background:var(--bg-card); border-radius:10px; padding:14px 18px; font-size:13.5px; color:var(--text-primary); line-height:1.55; margin-bottom:14px; font-style:italic; }

  /* Hero event-engine card (rotating builder) */
  .event-engine { width:100%; background:var(--bg-dark); border-radius:18px; padding:56px 32px; text-align:center; box-shadow:0 24px 60px rgba(0,0,0,0.28); }
  .ee-label { font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:rgba(252,252,247,0.4); }
  .builder { display:inline-flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:center; margin:30px auto 0; }
  .builder .seg { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:rgba(252,252,247,0.4); }
  .builder .slot { background:rgba(252,252,247,0.08); border:1px solid rgba(252,252,247,0.16); border-radius:8px; padding:11px 16px; font-size:15px; color:var(--text-light); min-width:215px; transition:opacity .28s ease; }
  .builder .slot.act { background:var(--accent-lime); border-color:var(--accent-lime); color:var(--text-primary); }
  .builder .ar { color:var(--accent-lime); font-size:18px; }

  /* Declarative beat lists */
  .beat-list { list-style:none; margin-top:22px; max-width:470px; }
  .beat-list li { font-size:17px; line-height:1.5; color:var(--text-primary); padding:12px 0 12px 26px; position:relative; border-bottom:1px solid var(--border); }
  .beat-list li:last-child { border-bottom:none; }
  .beat-list li::before { content:''; position:absolute; left:2px; top:20px; width:7px; height:7px; border-radius:50%; background:var(--accent-teal); }
  .beat-list.resp li { padding-left:28px; }
  .beat-list.resp li::before { content:'\2192'; background:none; color:var(--accent-teal); top:11px; left:0; width:auto; height:auto; font-size:16px; font-weight:500; }
  .lead-line { font-size:18px; color:var(--text-body); margin-top:6px; }
  .post-note { font-size:17px; color:var(--text-primary); margin-top:26px; max-width:560px; line-height:1.5; }

  /* Sources grid */
  .source-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:44px; }
  .source-chip { border:1px solid var(--border); border-radius:13px; padding:22px 12px; background:var(--bg-section); display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; font-size:14px; color:var(--text-primary); transition:all .2s; }
  .source-chip:hover { border-color:var(--border-med); background:#fff; }
  .source-chip svg { width:21px; height:21px; stroke:var(--accent-teal); }

  /* Verticals */
  .vert-list { margin-top:42px; max-width:760px; }
  .vert-row { display:grid; grid-template-columns:220px 1fr; gap:24px; padding:22px 0; border-bottom:1px solid var(--border); align-items:baseline; }
  .vert-row:last-of-type { border-bottom:none; }
  .vert-row .who { font-family:var(--serif); font-size:21px; color:var(--text-primary); }
  .vert-row .what { font-size:16px; color:var(--text-body); }

  /* Feature-row check bullets (restored) */
  .fr-mini { list-style:none; margin-top:20px; display:grid; gap:12px; }
  .fr-mini li { display:flex; gap:11px; align-items:flex-start; font-size:14.5px; color:var(--text-primary); line-height:1.4; }
  .fr-mini .ck { width:22px; height:22px; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; color:var(--text-primary); }
  .fr-mini .ck svg { width:21px; height:21px; stroke:currentColor; }

  /* Device-type cards (restored) */
  .dev-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:32px; }
  .dev-card { border:1px solid var(--border); border-radius:14px; padding:28px; background:var(--bg-section); }
  .dev-card .dc-ic { width:40px; height:40px; border-radius:10px; background:rgba(42,82,142,0.10); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
  .dev-card .dc-ic svg { width:19px; height:19px; stroke:var(--accent-teal); }
  .dev-card h3 { font-size:20px; margin:0 0 4px; }
  .dev-card .dc-for { font-size:13.5px; color:var(--text-body); margin-bottom:18px; }
  .dev-card ul { list-style:none; display:grid; gap:9px; }
  .dev-card li { display:flex; gap:9px; align-items:flex-start; font-size:13.5px; color:var(--text-primary); line-height:1.35; }
  .dev-card li svg { width:13px; height:13px; stroke:var(--accent-teal); flex-shrink:0; margin-top:3px; }

  /* Capability matrix (restored) */
  .cap-card { background:#fff; border-radius:16px; padding:48px; margin-top:48px; }
  .cap-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:36px 32px; }
  .cap-col h4 { font-family:var(--sans); font-weight:500; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border); }
  .cap-col ul { list-style:none; display:grid; gap:11px; }
  .cap-col li { display:flex; gap:9px; align-items:flex-start; font-size:14px; color:var(--text-primary); line-height:1.35; }
  .cap-col li svg { width:13px; height:13px; stroke:var(--accent-teal); flex-shrink:0; margin-top:3px; }

  .connect-wrap { margin:120px 20px 0; }
  .connect-card { background:var(--bg-dark); color:var(--text-light); border-radius:16px; max-width:1200px; margin:0 auto; padding:64px 56px; display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center; }
  .connect-card .cc-eyebrow { font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:rgba(252,252,247,0.5); margin-bottom:18px; }
  .connect-card h2 { font-size:32px; color:var(--text-light); line-height:1.2; letter-spacing:-0.01em; }
  .connect-card p { color:rgba(252,252,247,0.66); font-size:16px; line-height:1.6; margin-top:16px; max-width:430px; }
  .cc-btns { display:flex; gap:12px; margin-top:24px; flex-wrap:wrap; }
  .cc-btns .btn-primary { background:var(--accent-teal); color:#fff; --btn-glow:rgba(56,182,255,0.25); }
  .cc-btns .btn-primary:hover { background:#1E3F6E; }
  .cc-btns .btn-ghost { border:1px solid rgba(252,252,247,0.24); color:var(--text-light); border-radius:4px; padding:12px 24px; }
  .cc-btns .btn-ghost:hover { background:rgba(252,252,247,0.06); }
  .cc-relate { display:grid; gap:10px; }
  .cc-src { background:rgba(252,252,247,0.05); border:1px solid rgba(252,252,247,0.12); border-radius:12px; padding:16px; display:flex; align-items:center; gap:14px; transition:all .2s; }
  .cc-src:hover { background:rgba(252,252,247,0.09); }
  .cc-src .ic { width:36px; height:36px; border-radius:9px; background:rgba(252,252,247,0.08); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .cc-src .ic svg { width:17px; height:17px; stroke:var(--accent-lime); }
  .cc-src .t1 { font-size:14.5px; color:var(--text-light); }
  .cc-src .t2 { font-size:12.5px; color:rgba(252,252,247,0.55); margin-top:2px; }
  .cc-src .arrow { margin-left:auto; color:rgba(252,252,247,0.5); }
  .cc-src .arrow svg { width:16px; height:16px; }

  .faq-list { max-width:820px; margin-top:36px; }
  .faq-item { position:relative; }
  .faq-item::before { content:''; position:absolute; left:0; right:0; top:0; height:1px; background:rgba(9,21,36,0.10); opacity:1; transition:opacity .35s cubic-bezier(0.4,0,0.2,1); }
  .faq-item::after { content:''; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg, #2A528E 0%, #091524 100%); opacity:0; transition:opacity .35s cubic-bezier(0.4,0,0.2,1); }
  .faq-item:first-child::before { opacity:0; }
  .faq-item.open::before { opacity:0; }
  .faq-item.open::after { opacity:1; }
  .faq-q { width:100%; text-align:left; padding:22px 0; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:17px; color:var(--text-primary); font-family:var(--sans); transition:color .35s ease; }
  .faq-q .sign { font-size:22px; color:var(--text-muted); transition:transform .35s cubic-bezier(0.4,0,0.2,1), color .35s ease; flex-shrink:0; line-height:1; }
  .faq-item.open .faq-q { color:var(--accent-teal); }
  .faq-item.open .faq-q .sign { transform:rotate(45deg); color:var(--accent-teal); }
  .faq-a { max-height:0; overflow:hidden; transition:max-height .35s cubic-bezier(0.4,0,0.2,1); }
  .faq-a p { font-size:15px; color:var(--text-body); line-height:1.7; padding-bottom:22px; }

  .footer-cta { text-align:center; padding:132px 0 120px; }
  .footer-cta h2 { font-size:46px; line-height:1.13; letter-spacing:-0.018em; }
  .footer-cta h2 .fade { color:var(--text-body); }
  .footer-cta p { font-size:17px; color:var(--text-body); margin-top:18px; max-width:520px; margin-left:auto; margin-right:auto; line-height:1.5; }
  .footer-cta .fc-btns { display:flex; gap:12px; justify-content:center; margin-top:32px; flex-wrap:wrap; }
  .credit { text-align:center; font-size:12px; color:rgba(252,252,247,0.4); margin-top:24px; }
  .credit a { color:rgba(252,252,247,0.6); }
  .credit a:hover { color:var(--accent-lime); }

  @media (max-width:920px) {.prod-hero .container, .feature-row, .feature-row.flip .fr-text, .connect-card, .dev-grid, .cap-grid, .nav-dropdown-card { grid-template-columns:1fr !important; }
    .source-grid { grid-template-columns:1fr 1fr !important; }
    .cap-grid { grid-template-columns:1fr 1fr !important; }
    .cap-card { padding:30px; }
    .vert-row { grid-template-columns:1fr !important; gap:4px; }
    .feature-row.flip .fr-text { order:0; }
    .ph-left h1 { font-size:38px; }
    .block-head h2, .connect-card h2 { font-size:27px; }
    .footer-cta h2 { font-size:31px; }
    .builder .slot { min-width:0; }
    .event-engine { padding:40px 22px; }
    .connect-card { padding:40px 28px; }}

  /* ===== Product detail ===== */
  .dp-hero { padding:26px 0 0; }
  .dp-hero .container { max-width:none; padding:0 clamp(18px,2.4vw,40px); }
  .dp-wrap { display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(40px,5vw,88px); align-items:start; }
  .dp-crumb { font-family:var(--mono); font-size:12px; letter-spacing:0.06em; color:var(--text-muted); margin-bottom:18px; text-transform:uppercase; }
  .dp-crumb a { color:var(--accent-teal); }
  .dp-media { display:flex; align-items:center; justify-content:center; }
  .dp-media img { width:100%; height:auto; object-fit:contain; }
  .dp-eyebrow { font-family:var(--mono); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:var(--accent-teal); margin-bottom:16px; }
  .dp-info { padding-top:54px; }
  .dp-info h1 { font-size:clamp(40px,5vw,62px); line-height:1.02; letter-spacing:-0.03em; color:var(--text-primary); }
  .dp-tagline { font-size:16.5px; line-height:1.62; color:var(--text-read); margin:22px 0 30px; max-width:50ch; }
  .dp-downloads { display:flex; flex-wrap:wrap; gap:22px; margin:0 0 34px; }
  .dp-desc + a.btn { margin-top:34px; }
  .dp-dl { display:inline-flex; align-items:center; gap:7px; font-family:var(--sans); font-size:13px; font-weight:500; color:var(--text-body); transition:color .2s ease; }
  .dp-dl:hover { color:var(--accent-teal); }
  .dp-dl svg { width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:0.8; }
  .dp-dl .dl-type { font-family:var(--mono); font-size:10px; letter-spacing:0.08em; color:var(--text-muted); }
  .dp-desc { margin-top:30px; }
  .dp-desc ul { list-style:none; }
  .dp-desc li { display:flex; align-items:center; gap:11px; font-size:15px; color:var(--text-read); padding:2px 0; line-height:1.35; }
  .dp-desc li::before { content:''; flex:0 0 auto; width:5px; height:5px; border-radius:50%; background:var(--accent-teal); }
  .dp-body { padding:76px 0 0; }
  .dp-body .container { max-width:none; padding:0 clamp(18px,2.4vw,40px); }
  .dp-copy { max-width:700px; }
  .dp-copy h2 { font-size:14px; font-family:var(--mono); text-transform:uppercase; letter-spacing:0.1em; color:var(--text-muted); margin-bottom:18px; font-weight:600; }
  .dp-copy p { font-size:18px; line-height:1.65; color:var(--text-read); }
  @media (max-width:820px){.dp-wrap { grid-template-columns:1fr; gap:36px; }}