:root{
  --brand:#1d3563; --brand-ink:#ffffff; --accent:#c8a96b; --accent-ink:#111111;
  --bg:#f6f8fb; --card:#ffffff; --ink:#0f172a; --muted:#6b7280; --line:#e6eaf2;
  --font-display:"Bodoni Moda", serif; --font-text:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif; --font-brand:"Oswald","Franklin Gothic Medium","Arial Narrow",Arial,sans-serif;
}
body{ font:16px/1.56 var(--font-text); background:var(--bg); color:var(--ink); margin:0; }
.wrap{ max-width: 980px; margin: 0 auto; padding: 16px; }
.small{ font-size:.85rem; opacity:.8; }
header.nav{ position:sticky; top:0; z-index:10; background:#fff; border-bottom:1px solid var(--line); }
header.nav .wrap{ display:flex; align-items:center; justify-content:space-between; }
header.nav a{ text-decoration:none; color:inherit; margin-right:12px; }
header.nav .brand{ font-family:var(--font-brand); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); }
.hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; padding:40px 0; }
.hero .kicker{ letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-size:12px }
.hero h1{ font-family:var(--font-display); font-weight:600; font-size:42px; line-height:1.15; margin:.2em 0 .4em }
.lead{ font-size:18px; color:#333 }
.hero-visual{ position:relative; border-radius:16px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.08) }
.hero-visual .ph{ display:block; width:100%; height:320px; background:linear-gradient(135deg,#1d3563,#0b1f3d) }
.hero-visual .badge{ position:absolute; bottom:12px; left:12px; background:rgba(255,255,255,.9); backdrop-filter:blur(6px); padding:8px 12px; border-radius:999px; font-size:12px }
.btn{ display:inline-block; padding:8px 14px; border:1px solid var(--brand); background:var(--brand); color:var(--brand-ink); border-radius:999px; text-decoration:none; }
.btn.secondary{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink) }
.btn:hover{ filter:brightness(.95) }
a:hover{ text-decoration:underline; }
.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-gap: 16px; }
.card{ border: 1px solid var(--line); padding: 16px; border-radius: 12px; background: var(--card); box-shadow:0 4px 12px rgba(0,0,0,.03); margin-bottom: 20px; }
pre.benefits{ white-space: pre-wrap; background:#fafafa; padding:8px; border-radius:8px }
.filters{ margin: 10px 0 20px; display:flex; gap:8px; }
.form-field{ margin-bottom: 12px; }
form label{ display:block; font-weight:600; margin:.4em 0 .2em }
form input, form select, form textarea{ width:100%; padding:10px; border:1px solid var(--line); border-radius:10px; background:#fff }
.channel{ border:1px solid var(--line); border-radius:10px; padding:12px; margin:10px 0; background:#fff }
.toggle-channels label{ margin-right: 12px }
.messages{ margin-bottom:12px }
.msg{ padding:10px 12px; border-radius:10px; }
.msg.success{ background:#e8f5e9 }
.msg.error{ background:#fdecec }

/* Fieldsets: make inner fields fit and look consistent */
.channel{
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px 12px 14px;
  background:#fff;
}
.channel legend{
  font:600 14px/1.25 var(--font-text);
  color:var(--ink);
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 6px;
}
.channel legend i{
  color:var(--brand);
  font-size:14px;
}

/* Ensure form-field spans the fieldset width cleanly */
.channel .form-field{
  margin:8px 0 0;
}
.channel .form-field input[type="text"],
.channel .form-field input[type="email"],
.channel .form-field textarea,
.channel .form-field select{
  width:100%;
}

/* Optional: horizontal pill row for “Additional Channels” */
.toggle-channels.one-line{
  display:flex; gap:16px; align-items:center; flex-wrap:nowrap;
  overflow-x:auto; -webkit-overflow-scrolling:touch; padding:6px 0 2px;
}
.toggle-channels.one-line label{
  display:inline-flex; align-items:center; gap:8px; margin:0; white-space:nowrap;
  background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 12px;
}
.toggle-channels.one-line i{ font-size:14px; opacity:.9; }

/* --- Channel fieldsets: tidy input widths --- */

/* Keep selects/textarea full-width inside fieldsets */
.channel .form-field select,
.channel .form-field textarea{
  width: 100%;
}

/* Handles: auto width with safe cap */
.channel .form-field input[type="text"]{
  width: auto;
  max-width: 100%;
}

/* Per-platform handle widths (character-based, responsive) */
#id_instagram_handle,
#id_tiktok_handle,
#id_youtube_handle{
  /* ~28 characters, clamp for different viewports */
  width: clamp(220px, 28ch, 360px);
}

#id_facebook_handle{
  /* page names can be longer */
  width: clamp(260px, 40ch, 480px);
}

#id_website_handle{
  /* domain-like strings */
  width: clamp(240px, 36ch, 420px);
}

/* Keep things comfortable on small screens */
@media (max-width: 480px){
  .channel .form-field input[type="text"]{
    width: 100%;
  }
}

/* Featured In: clean grayscale logos with hover color */
.press-mentions .logos{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:18px;
  align-items:center;
  justify-items:center;
  margin:20px 0 10px;
}
.press-mentions img{
  max-height:42px;        /* consistent visual height */
  width:auto;
  filter:grayscale(1) contrast(.95) opacity(.8);
  transition:filter .2s ease, opacity .2s ease, transform .2s ease;
}
.press-mentions a:hover img{ filter:none; opacity:1; transform:translateY(-1px); }
@media (max-width: 600px){ .press-mentions img{ max-height:36px; } }

/* Inline form error styles */
.form-errors { margin: 8px 0 12px; padding: 10px 12px; border:1px solid #f2c6c6; background:#fdecec; border-radius:10px; }
.form-errors .error { margin: 2px 0; }

.field-errors { margin:6px 0 0; padding-left: 18px; color:#b42318; }
.field-errors li { margin:2px 0; }

.has-error input, .has-error select, .has-error textarea {
  border-color:#f19999 !important;
  background:#fff7f7;
}

/* Make hero image fill the card cleanly */
.hero { align-items: stretch; } /* optional: make both columns same height */

.hero-visual{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  aspect-ratio: 16 / 9;              /* change to 3/2 if you prefer */
}

/* Fill the box */
.hero-visual img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fallback for browsers without aspect-ratio */
@supports not (aspect-ratio: 1) {
  .hero-visual{ height: 0; padding-top: 56.25%; } /* 16:9 */
}

/* FAQ accordion */
.faq { border:1px solid var(--line); border-radius:12px; background:#fff; padding:12px 14px; margin:10px 0; }
.faq > summary { cursor:pointer; font-weight:600; outline:none; list-style:none; }
.faq > summary::-webkit-details-marker { display:none; }
.faq[open] { box-shadow:0 6px 16px rgba(0,0,0,.04); }
.faq p { margin:.6em 0 0; color:#333; }

/* --- UX polish & accessibility tweaks --- */

/* 1) Improve hero text readability */
.hero .lead{ max-width: 60ch; }

/* 2) Responsive hero layout (stack on small screens) */
@media (max-width: 900px){
  .hero{ grid-template-columns: 1fr; gap:20px; }
  .hero .kicker, .hero h1, .hero .lead, .hero p{ text-align:center; }
  .hero p .btn{ margin:4px 6px; }
  .hero-visual{ aspect-ratio: 3 / 2; } /* a bit taller on mobile */
}

/* 3) Clear keyboard focus styles */
:where(a, button, .btn, input, select, textarea):focus-visible{
  outline:3px solid rgba(29,53,99,.45);
  outline-offset:2px;
}
.btn:focus-visible{ box-shadow:0 0 0 3px rgba(29,53,99,.25); }
input:focus, select:focus, textarea:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(29,53,99,.08);
}

/* 4) Toggle pills — selected state */
.toggle-channels.one-line label{ cursor:pointer; }
.toggle-channels.one-line .extra-toggle{ position:relative; top:1px; }
.toggle-channels.one-line input.extra-toggle:checked + i{ opacity:1; }
/* Progressive enhancement for modern browsers */
@supports selector(:has(*)) {
  .toggle-channels.one-line label:has(input:checked){
    background:#f5f8ff;
    border-color:var(--brand);
  }
  .toggle-channels.one-line label:has(input:checked) i{
    color:var(--brand);
  }
}

/* 5) Buttons — hover/disabled states */
.btn:hover{ filter:none; opacity:.95; }
.btn[disabled], .btn[aria-disabled="true"]{ opacity:.6; cursor:not-allowed; pointer-events:none; }

/* 6) Section rhythm */
section + section{ margin-top:28px; }

/* Info notice styling (reuses .card) */
.notice h3{ margin-top:0; font-size:1.05rem; }
.notice{ background:#f7faff; border:1px solid var(--line); }
.notice a{ text-decoration:underline; }


/* Jump links spacing inside notice/nav */
nav.small a{ text-decoration:none; margin:0 2px; }
nav.small a:hover{ text-decoration:underline; }