/* C-Suite Drip LLC: shared styles for csuitedrip.com and its product pages (bright theme). */
:root {
  --bg:#fffaf3; --paper:#ffffff; --soft:#fff3e2; --line:#efe3d1; --ink:#1f2433; --muted:#5d6475;
  --gold:#c98a12; --accent:#c98a12; --accent2:#f6b93b; --accent-ink:#ffffff;
  --tint1:#fff1d6; --tint2:#ffe0e6;
  --serif:Fraunces, Georgia, serif; --sans:Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --shadow:0 18px 50px rgba(60,40,10,.12); --shadow-sm:0 6px 20px rgba(60,40,10,.08);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); line-height:1.6; }
img { max-width:100%; display:block; }
a { color:var(--accent); text-underline-offset:3px; }
a:focus-visible, .btn:focus-visible { outline:3px solid var(--accent2); outline-offset:3px; border-radius:8px; }
.wrap { max-width:1160px; 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(255,250,243,.9); 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:66px; gap:12px; }
.mark { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-family:var(--serif); font-weight:700; font-size:1.15rem; white-space:nowrap; }
.mark img { width:36px; height:36px; border-radius:9px; background:#1b1d24; padding:3px; }
header.site nav { display:flex; gap:22px; align-items:center; }
header.site nav a { color:var(--muted); text-decoration:none; font-size:.95rem; font-weight:500; white-space:nowrap; }
header.site nav a:hover { color:var(--ink); }

/* type */
.eyebrow { color:var(--accent); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; }
h1 { font-family:var(--serif); font-weight:700; font-size:clamp(2.2rem, 5.4vw, 3.9rem); line-height:1.06; margin:.3em 0 .35em; letter-spacing:-.015em; }
h2 { font-family:var(--serif); font-size:clamp(1.7rem, 3.6vw, 2.4rem); line-height:1.12; margin:0 0 .35em; letter-spacing:-.01em; }
h3 { font-family:var(--serif); font-size:1.3rem; line-height:1.2; margin:0 0 .35em; }
.lede { color:var(--muted); font-size:1.15rem; max-width:56ch; }
.sub { color:var(--muted); margin:0 0 34px; max-width:62ch; font-size:1.05rem; }
.center { text-align:center; } .center .sub { margin-left:auto; margin-right:auto; }

/* buttons, chips, tags */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 24px; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-weight:600; font-size:1rem; text-decoration:none; border:2px solid transparent; white-space:nowrap; box-shadow:0 8px 22px color-mix(in srgb, var(--accent) 35%, transparent); }
.btn:hover { filter:brightness(1.05); transform:translateY(-1px); }
.btn.ghost { background:#fff; color:var(--ink); border-color:var(--line); box-shadow:none; }
.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:26px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.chips li { background:#fff; border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-size:.88rem; font-weight:500; white-space:nowrap; box-shadow:var(--shadow-sm); }
.chips li.soon { background:transparent; border-style:dashed; color:var(--muted); box-shadow:none; }
.chips li.soon b { color:var(--accent); font-weight:700; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; margin-left:6px; }
.tag { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, #fff); border-radius:999px; padding:5px 12px; }

/* sections */
section { padding:84px 0; }
.band { background:linear-gradient(180deg, var(--tint1), var(--bg)); }
.hero { padding:70px 0 80px; background:radial-gradient(1000px 520px at 85% -10%, var(--tint2), transparent 60%), radial-gradient(900px 500px at 0% 0%, var(--tint1), transparent 60%); overflow:hidden; }
.hero .wrap { display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; }
.banner { width:min(420px, 100%); height:auto; margin:0 0 22px; }
.appmark { display:flex; align-items:center; gap:14px; margin-bottom:6px; }
.appmark img { width:64px; height:64px; border-radius:16px; box-shadow:var(--shadow-sm); }

/* hero visuals */
.hero-img { border-radius:26px; box-shadow:var(--shadow); width:100%; height:auto; transform:rotate(1.2deg); border:6px solid #fff; }
.collage { display:grid; grid-template-columns:1fr 1fr; gap:14px; transform:rotate(-1.5deg); }
.collage img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:20px; border:5px solid #fff; box-shadow:var(--shadow); }
.collage img:nth-child(1) { grid-column:span 2; aspect-ratio:16/8; }
.phones { display:flex; justify-content:center; gap:18px; align-items:flex-end; }
.phone { width:min(250px, 44vw); border-radius:32px; border:7px solid #1b1d24; background:#1b1d24; box-shadow:var(--shadow); overflow:hidden; }
.phone.tilt-l { transform:rotate(-4deg) translateY(10px); } .phone.tilt-r { transform:rotate(4deg); }
.phone img { width:100%; height:auto; }

/* product rows on the home page */
.prow { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; padding:46px 0; }
.prow + .prow { border-top:1px dashed var(--line); }
.prow.flip .pic { order:2; }
.prow .pic img { width:100%; height:auto; border-radius:24px; border:6px solid #fff; box-shadow:var(--shadow); }
.prow .pic.phones img { border:0; border-radius:0; box-shadow:none; }
.prow .name { display:flex; align-items:center; gap:14px; margin:12px 0 6px; }
.prow .name img { width:52px; height:52px; border-radius:13px; box-shadow:var(--shadow-sm); }
.prow .name h3 { font-size:2rem; margin:0; }
.prow .kind { color:var(--muted); font-weight:500; }
.prow p { color:var(--muted); font-size:1.06rem; }
.prow .plats { font-size:.9rem; color:var(--muted); margin:8px 0 18px; }
.prow .plats b { color:var(--ink); font-weight:600; }

/* picture feature cards */
.features { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap:24px; }
.feature { background:var(--paper); border-radius:22px; overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); display:flex; flex-direction:column; transition:transform .15s, box-shadow .15s; }
.feature:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.feature img { width:100%; aspect-ratio:3/2; object-fit:cover; }
.feature .txt { padding:20px 22px 24px; }
.feature p { color:var(--muted); margin:0; }

/* spotlight (big picture + text) */
.spot { display:grid; grid-template-columns:1.1fr .9fr; gap:52px; align-items:center; }
.spot.flip .pic { order:2; }
.spot .pic img { width:100%; height:auto; border-radius:24px; border:6px solid #fff; box-shadow:var(--shadow); }
.spot .pic.phones img { border:0; border-radius:0; box-shadow:none; }
.spot ul { padding-left:1.1em; color:var(--muted); }
.spot li { margin:6px 0; }
.spot li b { color:var(--ink); }

.gallery { display:flex; gap:18px; overflow-x:auto; padding:6px 4px 22px; scroll-snap-type:x mandatory; }
.gallery figure { margin:0; flex:none; scroll-snap-align:start; }
.gallery figure img { height:300px; width:auto; border-radius:16px; border:5px solid #fff; box-shadow:var(--shadow-sm); }
.gallery figcaption { color:var(--muted); font-size:.88rem; text-align:center; margin-top:8px; max-width:240px; margin-inline:auto; }
.art-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
.art-grid img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:16px; box-shadow:var(--shadow-sm); }

.note { background:#fff; border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:14px; padding:16px 18px; color:var(--muted); box-shadow:var(--shadow-sm); }
.plist { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.plist li { display:flex; justify-content:space-between; gap:16px; padding:14px 18px; background:#fff; border:1px solid var(--line); border-radius:14px; font-weight:500; box-shadow:var(--shadow-sm); }
.plist li span:last-child { color:var(--muted); text-align:right; font-weight:400; }
.plist li.soon { border-style:dashed; box-shadow:none; background:transparent; }
.plist li.soon span:last-child { color:var(--accent); font-weight:600; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.checks { list-style:none; padding:0; margin:0 0 18px; }
.checks li { padding-left:30px; position:relative; margin:9px 0; color:var(--muted); }
.checks li::before { content:""; position:absolute; left:3px; top:.42em; width:14px; height:8px; border-left:3px solid var(--accent); border-bottom:3px solid var(--accent); transform:rotate(-45deg); }
.checks li b { color:var(--ink); }

/* about */
.about { display:grid; grid-template-columns:1.2fr 1fr; gap:44px; align-items:start; }
.facts { background:#fff; border:1px solid var(--line); border-radius:20px; padding:24px 26px; margin:0; box-shadow:var(--shadow-sm); }
.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:600; }

footer { padding:36px 0 48px; color:var(--muted); font-size:.9rem; border-top:1px solid var(--line); background:#fff; }
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(--ink); }

/* product colour themes */
.t-teddy { --accent:#2d5fd3; --accent2:#f5c24c; --tint1:#e3edff; --tint2:#fff1c9; }
.t-df    { --accent:#b8432a; --accent2:#e2a33b; --tint1:#fbe7d8; --tint2:#f5e3c2; }
.t-seneb { --accent:#0e8a7d; --accent2:#e3b65a; --tint1:#d9f5ee; --tint2:#fff0cc; }
.t-hobbs { --accent:#4b3fd1; --accent2:#f2c75c; --tint1:#e9e6ff; --tint2:#fff1cf; }
.t-song  { --accent:#1f7fbf; --accent2:#f0a53a; --tint1:#dcf0fb; --tint2:#ffe9cc; }

@media (max-width:900px) {
  .hero .wrap, .prow, .spot, .split, .about { grid-template-columns:1fr; gap:34px; }
  .prow.flip .pic, .spot.flip .pic { order:0; }
  .hero { padding:44px 0 56px; }
  .art-grid { grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:620px) {
  header.site nav { gap:14px; }
  header.site nav a.hide-sm { display:none; }
  section { padding:60px 0; }
  .prow { padding:34px 0; }
  .prow .name h3 { font-size:1.6rem; }
  .gallery figure img { height:240px; }
  .plist li { flex-direction:column; gap:2px; }
  .plist li span:last-child { text-align:left; }
  .phone { width:min(200px, 42vw); }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .btn:hover, .feature:hover { transform:none; } }
.collage img, .feature img, .art-grid img { height:auto; }
.features.four { grid-template-columns:repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

/* v3: straight hero pictures, whole-picture cards, uniform test button, product bands */
.hero-img { transform:none; }
.feature.whole img { aspect-ratio:auto; object-fit:contain; height:auto; background:#4b3fd1; }
.testcta { display:flex; align-items:center; justify-content:space-between; gap:18px 24px; flex-wrap:wrap; background:#fff; border:1px solid var(--line); border-radius:20px; padding:20px 22px; box-shadow:var(--shadow-sm); }
.testcta h3 { font-size:1.15rem; margin:0 0 2px; }
.testcta p { margin:0; color:var(--muted); }
.products-sec { padding-bottom:0; }
.pband { background:color-mix(in srgb, var(--accent) 8%, #fff); border-top:1px solid color-mix(in srgb, var(--accent) 18%, #fff); }
.pband:nth-child(even) { background:#fff; }
.pband:last-child { border-bottom:1px solid var(--line); }
.pband .prow { padding:64px 0; border-top:0 !important; }
/* everything straight */
.collage, .phone.tilt-l, .phone.tilt-r, .hero-img { transform:none; }
.collage img:nth-child(1) { aspect-ratio:auto; height:auto; }
/* v4: never crop a picture */
.feature img { aspect-ratio:auto !important; object-fit:contain; height:auto; }
.feature.whole img { background:none; }
.hero-img, .collage, .collage img, .phone, .phone img, .pic img, .feature img { transform:none !important; rotate:none !important; }
.gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(46%, 170px), 1fr)); gap:18px; overflow:visible; padding:6px 0 10px; }
.gallery figure img, .gallery figure img { width:100%; height:auto !important; }
.gallery figcaption { max-width:none; }