/* C-Suite Drip LLC: shared styles for csuitedrip.com and its product pages. */
:root {
  --bg:#0f1115; --panel:#171a21; --panel2:#1d2129; --line:#262b35; --text:#e9e6df; --muted:#a3a8b3;
  --gold:#d4a84a; --gold2:#f0cf7e; --accent:#d4a84a; --accent-ink:#14110a; --glow:rgba(212,168,74,.14);
  --serif:Fraunces, Georgia, serif; --sans:Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.6; }
img { max-width:100%; }
a { color:var(--gold2); text-underline-offset:3px; }
a:focus-visible, .btn:focus-visible { outline:2px solid var(--gold2); outline-offset:3px; border-radius:6px; }
.wrap { max-width:1120px; margin:0 auto; padding:0 max(20px, env(safe-area-inset-left)) 0 max(20px, env(safe-area-inset-right)); }

/* header */
header.site { position:sticky; top:0; z-index:10; background:rgba(15,17,21,.88); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
header.site .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; gap:12px; }
.mark { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); font-family:var(--serif); font-weight:700; font-size:1.12rem; letter-spacing:.02em; white-space:nowrap; }
.mark img { width:34px; height:34px; border-radius:7px; }
header.site nav { display:flex; gap:20px; }
header.site nav a { color:var(--muted); text-decoration:none; font-size:.95rem; white-space:nowrap; }
header.site nav a:hover, header.site nav a[aria-current] { color:var(--text); }

/* type */
.eyebrow { color:var(--accent); font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; }
h1 { font-family:var(--serif); font-weight:700; font-size:clamp(2.1rem, 5.2vw, 3.7rem); line-height:1.08; margin:.35em 0 .4em; letter-spacing:-.01em; }
h2 { font-family:var(--serif); font-size:clamp(1.6rem, 3.4vw, 2.1rem); line-height:1.15; margin:0 0 .35em; }
h3 { font-family:var(--serif); font-size:1.3rem; line-height:1.2; margin:0 0 .35em; }
.lede { color:var(--muted); font-size:1.13rem; max-width:58ch; }
.sub { color:var(--muted); margin:0 0 32px; max-width:62ch; }

/* buttons and chips */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-weight:600; font-size:1rem; text-decoration:none; border:1px solid transparent; white-space:nowrap; }
.btn.ghost { background:transparent; color:var(--text); border-color:var(--line); }
.btn.ghost:hover { border-color:var(--accent); }
.btns { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.chips { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.chips li { border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:5px 13px; font-size:.88rem; white-space:nowrap; }
.chips li.soon { border-style:dashed; color:var(--muted); }
.chips li.soon b { color:var(--accent); font-weight:600; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; margin-left:6px; }
.tag { display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 50%, transparent); border-radius:999px; padding:3px 10px; }

/* sections */
section { padding:72px 0; border-bottom:1px solid var(--line); }
.hero { padding:84px 0 68px; border-bottom:1px solid var(--line); background:radial-gradient(900px 420px at 12% 0%, var(--glow), transparent 62%); }
.banner { width:min(540px, 100%); height:auto; display:block; margin:0 0 30px; }
.hero .chips { margin-top:30px; }

/* company product grid */
.products { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap:22px; }
.pcard { background:var(--panel); border:1px solid var(--line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:border-color .15s, transform .15s; }
.pcard:hover { border-color:var(--pc, var(--gold)); transform:translateY(-2px); }
.pcard .art { aspect-ratio:16/9; overflow:hidden; position:relative; display:grid; place-items:center; }
.pcard .art img.cover { width:100%; height:100%; object-fit:cover; display:block; }
.pcard .body { padding:20px 22px 22px; display:flex; flex-direction:column; flex:1; }
.pcard .title { display:flex; align-items:center; gap:12px; margin:12px 0 8px; }
.pcard .title img { width:44px; height:44px; border-radius:11px; flex:none; }
.pcard h3 { margin:0; }
.pcard .kind { color:var(--muted); font-size:.85rem; }
.pcard p { color:var(--muted); margin:0 0 16px; }
.pcard .plats { font-size:.85rem; color:var(--muted); margin-top:auto; }
.pcard .go { margin-top:12px; font-weight:600; color:var(--pc, var(--gold2)); }
.pcard.soon { border-style:dashed; justify-content:center; text-align:center; padding:30px; min-height:240px; }

/* about */
.about { display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:start; }
.facts { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px 24px; margin:0; }
.facts dt { color:var(--muted); font-size:.85rem; margin-top:12px; } .facts dt:first-child { margin-top:0; }
.facts dd { margin:2px 0 0; font-weight:500; }

/* product pages */
.p-hero .wrap { display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.p-hero .appmark { display:flex; align-items:center; gap:14px; }
.p-hero .appmark img { width:72px; height:72px; border-radius:18px; box-shadow:0 8px 30px rgba(0,0,0,.35); }
.p-hero .appmark .tag { margin-left:2px; }
.p-hero .visual { display:flex; justify-content:center; }
.phone { width:min(300px, 80vw); border-radius:34px; border:8px solid #050608; background:#050608; box-shadow:0 30px 80px rgba(0,0,0,.5); overflow:hidden; }
.phone img { display:block; width:100%; height:auto; }
.shot { border-radius:16px; border:1px solid var(--line); box-shadow:0 24px 70px rgba(0,0,0,.45); display:block; width:100%; height:auto; }
.features { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap:18px; }
.feature { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:22px; }
.feature .ic { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:color-mix(in srgb, var(--accent) 16%, transparent); color:var(--accent); margin-bottom:12px; }
.feature .ic svg { width:22px; height:22px; }
.feature p { color:var(--muted); margin:0; }
.gallery { display:flex; gap:18px; overflow-x:auto; padding:4px 2px 18px; scroll-snap-type:x mandatory; }
.gallery figure { margin:0; flex:none; width:min(240px, 62vw); scroll-snap-align:start; }
.gallery figure img { width:100%; height:auto; display:block; border-radius:22px; border:6px solid #050608; background:#050608; }
.gallery figcaption { color:var(--muted); font-size:.88rem; text-align:center; margin-top:8px; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.note { background:var(--panel2); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:12px; padding:16px 18px; color:var(--muted); }
.plist { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.plist li { display:flex; justify-content:space-between; gap:16px; padding:12px 16px; background:var(--panel); border:1px solid var(--line); border-radius:12px; }
.plist li span:last-child { color:var(--muted); text-align:right; }
.plist li.soon span:last-child { color:var(--accent); }
.checks { list-style:none; padding:0; margin:0; }
.checks li { padding-left:28px; position:relative; margin:8px 0; color:var(--muted); }
.checks li::before { content:""; position:absolute; left:2px; top:.45em; width:14px; height:8px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg); }
.checks li b { color:var(--text); font-weight:600; }

footer { padding:34px 0 46px; color:var(--muted); font-size:.9rem; }
footer .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; }
footer nav { display:flex; flex-wrap:wrap; gap:6px 18px; }
footer a { color:var(--muted); }
footer a:hover { color:var(--text); }

@media (max-width:860px) {
  .p-hero .wrap, .split, .about { grid-template-columns:1fr; gap:36px; }
  .p-hero .visual { order:2; }
}
@media (max-width:620px) {
  header.site nav { gap:14px; }
  header.site nav a.hide-sm { display:none; }
  .hero { padding:56px 0 48px; }
  section { padding:56px 0; }
  .plist li { flex-direction:column; gap:2px; }
  .plist li span:last-child { text-align:left; }
}
@media (max-width:380px) { .mark span.long { display:none; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .pcard { transition:none; } .pcard:hover { transform:none; } }

/* product accents */
.t-hobbs { --accent:#f2c75c; --glow:rgba(91,86,214,.28); }
.t-seneb { --accent:#e3b65a; --glow:rgba(21,133,124,.30); }
.t-song  { --accent:#8fc3df; --accent-ink:#0d1a22; --glow:rgba(143,195,223,.16); }
.t-teddy { --accent:#f0cf7e; --glow:rgba(70,110,200,.26); }
.pcard .tag { align-self:flex-start; } .p-hero .appmark .tag { align-self:center; }
.pcard .art img.cover { position:absolute; inset:0; }