/* SITE KIT (2026-09-29): one stylesheet for the CarGo, SirenSpot and Scribe marketing sites. The CarGo UX rules apply to all three: dark tokens, Sora headings and DM Sans body, 44px targets, ONE primary call to action per screen, never colour alone, reduced motion respected. Each site sets its brand on . */ :root { --bg:#0e1116; --surface:#171b22; --surface2:#1d222b; --line:#262c35; --ink:#eef2f6; --mut:#9aa7b4; --accent:#4aa8ff; --cta:#f6c343; --cta-ink:#1a1400; --ok:#7fe0a8; --warn:#f6c343; --bad:#ff7b72; --r:14px; --max:1080px; } body.brand-sirenspot { --accent:#ff4b4b; --cta:#e02424; --cta-ink:#fff; --surface:#16181c; --surface2:#1c1f24; } body.brand-scribe { --accent:#3fd0c9; --cta:#f6c343; } *, *::before, *::after { box-sizing:border-box; } html { -webkit-text-size-adjust:100%; } body { margin:0; background:var(--bg); color:var(--ink); font:17px/1.6 "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } h1, h2, h3 { font-family:Sora, "DM Sans", system-ui, sans-serif; line-height:1.2; letter-spacing:-.01em; margin:0 0 .5em; } h1 { font-size:clamp(2rem, 5.2vw, 3.2rem); } h2 { font-size:clamp(1.5rem, 3.4vw, 2.1rem); } h3 { font-size:1.15rem; } p { margin:0 0 1em; } a { color:var(--accent); } img { max-width:100%; display:block; } .wrap { max-width:var(--max); margin:0 auto; padding:0 16px; } .mut { color:var(--mut); } .small { font-size:.9rem; } .skip { position:absolute; left:-999px; top:8px; background:var(--cta); color:var(--cta-ink); padding:10px 14px; border-radius:10px; z-index:99; } .skip:focus { left:8px; } :focus-visible { outline:3px solid var(--accent); outline-offset:3px; border-radius:6px; } /* header */ .top { position:sticky; top:0; z-index:20; background:rgba(14,17,22,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); } .top .wrap { display:flex; align-items:center; gap:16px; min-height:64px; } .logo { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font:800 1.3rem Sora, sans-serif; } .logo svg { width:36px; height:36px; flex:none; } .logo span { color:var(--accent); } .nav { margin-left:auto; display:flex; align-items:center; gap:6px; } .nav a { color:var(--mut); text-decoration:none; padding:10px 12px; border-radius:10px; min-height:44px; display:inline-flex; align-items:center; } .nav a:hover, .nav a[aria-current="page"] { color:var(--ink); background:var(--surface); } .navtoggle { display:none; margin-left:auto; background:none; border:1px solid var(--line); color:var(--ink); border-radius:12px; width:44px; height:44px; } @media (max-width:760px) { .navtoggle { display:inline-flex; align-items:center; justify-content:center; } .nav { display:none; position:absolute; left:0; right:0; top:64px; flex-direction:column; align-items:stretch; background:var(--bg); border-bottom:1px solid var(--line); padding:8px 16px 16px; } .nav.open { display:flex; } .nav .btn { margin-top:6px; } } /* buttons: .btn.pri is THE call to action (one per screen) */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border-radius:12px; font:700 1rem "DM Sans", sans-serif; text-decoration:none; border:1px solid var(--line); color:var(--ink); background:var(--surface); cursor:pointer; } .btn.pri { background:var(--cta); border-color:var(--cta); color:var(--cta-ink); } .btn.sm { min-height:44px; padding:0 16px; font-size:.95rem; } .btns { display:flex; flex-wrap:wrap; gap:12px; margin:22px 0 0; } /* sections */ .hero { padding:56px 0 40px; } .hero .grid { display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; } .hero .lead { font-size:1.2rem; color:var(--mut); max-width:36em; } .eyebrow { display:inline-block; font-size:.85rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; } section { padding:48px 0; } section + section { border-top:1px solid var(--line); } .cards { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:16px; margin-top:22px; } .card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px; } .card h3 { margin-bottom:.4em; } .card p:last-child { margin-bottom:0; } .steps { counter-reset:s; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; margin-top:22px; padding:0; list-style:none; } .steps li { counter-increment:s; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px; } .steps li::before { content:counter(s); display:inline-flex; width:34px; height:34px; border-radius:17px; align-items:center; justify-content:center; background:var(--accent); color:#06121f; font-weight:800; margin-bottom:10px; } .split { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; } .shot { border-radius:var(--r); border:1px solid var(--line); overflow:hidden; background:var(--surface); } .shot img { width:100%; height:auto; } .note { background:var(--surface2); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:10px; padding:14px 16px; } /* pricing */ .plans { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; margin-top:22px; } .plan { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px; display:flex; flex-direction:column; } .plan.feature { border-color:var(--accent); } .plan .price { font:800 2.2rem Sora, sans-serif; margin:.2em 0; } .plan .price small { font-size:1rem; color:var(--mut); font-weight:500; } .plan ul { margin:12px 0 18px; padding-left:1.2em; } .plan li { margin:.35em 0; } .plan .btn { margin-top:auto; } /* questions */ .faq details { background:var(--surface); border:1px solid var(--line); border-radius:12px; margin:10px 0; } .faq summary { cursor:pointer; padding:14px 18px; min-height:48px; font-weight:700; list-style:none; display:flex; justify-content:space-between; gap:12px; align-items:center; } .faq summary::-webkit-details-marker { display:none; } .faq summary::after { content:"+"; color:var(--mut); font-size:1.3rem; } .faq details[open] summary::after { content:"–"; } .faq details > div { padding:0 18px 16px; color:var(--mut); } /* footer */ .foot { border-top:1px solid var(--line); padding:32px 0 48px; color:var(--mut); font-size:.92rem; } .foot .cols { display:flex; flex-wrap:wrap; gap:10px 22px; margin-bottom:12px; } .foot a { color:var(--mut); min-height:44px; display:inline-flex; align-items:center; } /* live status dot + word (never colour alone) */ .stat { display:inline-flex; align-items:center; gap:8px; font-size:.9rem; font-weight:700; } .stat::before { content:""; width:10px; height:10px; border-radius:5px; background:var(--ok); } .stat.off::before { background:#8b949e; } @media (max-width:860px) { .hero .grid, .split { grid-template-columns:1fr; } .hero { padding-top:32px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } }