/* ============================================================
   ClipboardAI Help Center
   Layers on top of /css/styles.css (tokens, nav, footer, prose).
   Mobile-first: the help center is read on the iPhone being set up.
   ============================================================ */

/* ============== HELP HERO ============== */
.help-hero { padding: 72px 0 36px; text-align: center; position: relative; }
.help-hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px;
  border: 1.5px solid var(--ink); background: var(--paper); border-radius: 999px;
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 22px; box-shadow: var(--shadow-sm);
}
.help-hero .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.help-hero h1 {
  font-family: 'Manrope', sans-serif; font-weight: 800;
  font-size: clamp(40px, 7vw, 88px); line-height: 0.95; letter-spacing: -0.04em;
  margin: 0 auto 20px; max-width: 880px; color: var(--ink);
}
.help-hero h1 .hl { position: relative; display: inline-block; }
.help-hero h1 .hl::after { content: ''; position: absolute; left: -2%; right: -2%; bottom: 8%; height: 18%; background: var(--lime); z-index: -1; transform: skew(-3deg); }
.help-hero p.lede { font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 580px; margin: 0 auto 32px; font-weight: 500; }

/* ============== SEARCH ============== */
.help-search { max-width: 560px; margin: 0 auto; position: relative; }
.help-search input {
  width: 100%; height: 60px; padding: 0 20px 0 54px; font-family: inherit;
  font-size: 17px; font-weight: 500; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--ink); border-radius: 16px;
  box-shadow: var(--shadow-pop); outline: none; transition: transform .15s, box-shadow .15s;
}
.help-search input::placeholder { color: var(--ink-3); font-weight: 500; }
.help-search input:focus { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--green); }
.help-search .s-ico { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }

/* ============== CATEGORY FILTER PILLS ============== */
.help-cats { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 40px 0 8px; }
.help-cat {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px;
  border: 1.5px solid var(--ink); background: var(--paper); border-radius: 999px;
  font-family: inherit; font-size: 13.5px; font-weight: 700; color: var(--ink);
  cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s, color .15s;
}
.help-cat:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); }
.help-cat.active { background: var(--ink); color: white; }
.help-cat .ct { font-size: 11px; opacity: 0.55; font-family: 'Geist Mono', monospace; }
.help-cat.active .ct { opacity: 0.7; }

/* ============== CATEGORY SECTIONS + CARDS ============== */
.help-sections { padding: 24px 0 48px; }
.help-section { padding: 0; margin: 0; scroll-margin-top: 90px; }
.help-section + .help-section { border-top: 1.5px solid var(--line-soft); margin-top: 34px; padding-top: 34px; }
.help-section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.help-section-head .badge {
  width: 40px; height: 40px; border-radius: 11px; border: 1.5px solid var(--ink);
  display: grid; place-items: center; font-size: 20px; flex-shrink: 0; box-shadow: var(--shadow-sm);
}
.help-section-head h2 { font-weight: 800; font-size: 24px; letter-spacing: -0.025em; margin: 0; line-height: 1.1; }
.help-section-head .count { font-size: 13px; color: var(--ink-3); font-weight: 600; font-family: 'Geist Mono', monospace; }

.help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.help-card {
  display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px;
  border: 1.5px solid var(--ink); background: var(--paper); border-radius: 18px;
  box-shadow: 4px 4px 0 var(--ink); transition: transform .18s, box-shadow .18s; color: inherit;
}
.help-card:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 var(--ink); }
.help-card .c-ico {
  width: 38px; height: 38px; border-radius: 10px; border: 1.5px solid var(--ink);
  display: grid; place-items: center; font-size: 19px; background: var(--green-tint);
}
.help-card h3 { font-weight: 800; font-size: 17px; line-height: 1.25; letter-spacing: -0.015em; margin: 0; }
.help-card p { font-size: 14px; line-height: 1.5; color: var(--ink-2); margin: 0; font-weight: 500; flex: 1; }
.help-card .c-go { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--green-2); margin-top: 4px; }
.help-card .c-go svg { transition: transform .18s; }
.help-card:hover .c-go svg { transform: translateX(3px); }

.help-noresults { display: none; text-align: center; padding: 60px 0; color: var(--ink-3); }
.help-noresults.show { display: block; }

/* ============== FAQ (answer-engine + on-page) ============== */
.help-faq { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 8px; }
.help-faq .faq-item { border: 1.5px solid var(--ink); border-radius: 14px; background: var(--paper); padding: 15px 18px; box-shadow: var(--shadow-sm); }
.prose .help-faq .faq-q { margin: 0 0 6px; padding: 0; border: 0; font-weight: 800; font-size: 16px; letter-spacing: -0.01em; line-height: 1.3; }
.prose .help-faq .faq-a { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; font-weight: 500; }
.prose .help-faq .faq-a strong { color: var(--ink); font-weight: 700; }
.help-noresults .big { font-size: 19px; font-weight: 800; color: var(--ink); margin-bottom: 6px; }

/* ============== CATEGORY PILL COLORS (slug matches generator) ============== */
.cat-pill.cat-getting-started { background: var(--green-soft); }
.cat-pill.cat-saving-clips { background: var(--sky); }
.cat-pill.cat-using-your-clips { background: var(--lemon); }
.cat-pill.cat-sync-devices { background: var(--green-tint); }
.cat-pill.cat-privacy-data { background: var(--lilac); }
.cat-pill.cat-account-billing { background: var(--peach); }
.cat-pill.cat-troubleshooting { background: var(--pink); }

/* Bold text inside the dark TL;DR callout must stay legible (overrides .prose strong) */
.prose .callout.tldr strong { color: #fff; }
/* Only the callout title (direct child strong) is block; inline strong in the body stays inline */
.prose .callout .ct p strong { display: inline; font-size: inherit; margin: 0; }

/* ============== PLATFORM BADGE ============== */
.help-platform-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px;
  border: 1.5px solid var(--ink); background: var(--sky); border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink);
}

/* ============================================================
   GUIDE COMPONENTS (used inside .prose article bodies)
   Highlights are CSS overlays on raw screenshots, positioned by
   inline left/top/width/height percentages. Never baked into PNG.
   ============================================================ */

/* Phone frame -- a sleek dark CSS bezel, fluid so it never overflows on iPhone.
   Soft premium shadow + a subtle metallic rim (matches the device mockups on the
   home page). The screenshot fills the screen at its natural aspect, so hotspot
   percentages map straight onto the screenshot. */
.guide-phone {
  position: relative; width: min(300px, 82vw); margin: 0 auto;
  border-radius: 46px; padding: 9px;
  background: linear-gradient(152deg, #29352f 0%, #111b15 44%, #0a120d 100%);
  box-shadow:
    0 30px 55px -20px rgba(10,20,14,0.42),
    0 10px 20px -10px rgba(10,20,14,0.26),
    inset 0 1.5px 1px rgba(255,255,255,0.16),
    inset 0 -2px 3px rgba(0,0,0,0.5);
}
.guide-screen {
  position: relative; border-radius: 38px; overflow: hidden; background: #000;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.guide-screen > img { display: block; width: 100%; height: auto; }

/* Pulsing halo over the control to tap */
.guide-hotspot {
  position: absolute; border-radius: 16px; border: 3px solid var(--green);
  background: rgba(0,168,90,0.08); pointer-events: none;
  animation: haloPulse 2.2s ease-out infinite; box-sizing: border-box;
}
.guide-hotspot.pill { border-radius: 999px; }
.guide-hotspot.tight { border-radius: 10px; }

/* Animated tap dot -- place at the center of the control */
.guide-tap {
  position: absolute; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0,168,90,0.55); transform: translate(-50%, -50%);
  pointer-events: none; animation: tapDot 2.2s ease-out infinite;
}

@keyframes haloPulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,168,90,0.42); }
  70%  { box-shadow: 0 0 0 14px rgba(0,168,90,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,168,90,0); }
}
@keyframes tapDot {
  0%   { transform: translate(-50%,-50%) scale(0.6); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(2.4); opacity: 0; }
}

/* Step caption under a phone (or beside one) */
.guide-stepline { display: flex; align-items: flex-start; gap: 13px; max-width: 320px; margin: 22px auto 0; }
.guide-stepline .num {
  flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: white;
  font-weight: 800; font-size: 15px; display: grid; place-items: center;
  border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
}
.guide-stepline .txt { padding-top: 2px; }
.guide-stepline .txt .t { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.guide-stepline .txt .d { font-size: 14px; color: var(--ink-3); margin-top: 3px; line-height: 1.45; font-weight: 500; }

/* Single screenshot figure */
.guide-figure { margin: 36px 0; text-align: center; }
.guide-figure .guide-caption { font-size: 13.5px; color: var(--ink-3); margin-top: 16px; font-weight: 500; font-style: italic; }
.guide-col .guide-caption { font-size: 13px; color: var(--ink-3); margin-top: 14px; font-weight: 500; font-style: italic; text-align: center; }

/* Sequenced phones. On phones they stack vertically with a downward connector
   arrow; on wider displays they sit side by side (see the min-width rule below). */
.guide-duo {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin: 40px 0;
}
.guide-duo .guide-col { display: flex; flex-direction: column; align-items: center; width: min(300px, 82vw); }
.guide-duo .guide-col .guide-phone { width: 100%; }
.guide-duo .guide-arrow { color: var(--ink-3); transform: rotate(90deg); padding: 6px 0; }
.guide-duo .guide-arrow svg { display: block; }

/* Side by side on tablets and computers; the numbered step captions carry the order. */
@media (min-width: 760px) {
  .guide-duo { flex-direction: row; align-items: flex-start; justify-content: center; gap: 18px; }
  .guide-duo .guide-col { flex: 1 1 0; max-width: 300px; width: auto; }
  .guide-duo .guide-arrow { display: none; }
}

/* Multi-step screenshot walkthrough: a responsive grid of numbered phone steps (4+ steps) */
.guide-grid { display: grid; grid-template-columns: 1fr; gap: 30px 20px; margin: 32px 0; justify-items: center; }
@media (min-width: 560px) { .guide-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 880px) { .guide-grid { grid-template-columns: repeat(3, 1fr); } }
/* .g2 forces a 2-up (2x2) layout on wide screens, for 4-step flows */
@media (min-width: 880px) { .guide-grid.g2 { grid-template-columns: repeat(2, 1fr); } }
.guide-grid .guide-col { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 300px; }
.guide-grid.g2 .guide-col { max-width: 330px; }
.guide-grid .guide-col .guide-phone { width: 100%; }

/* Platform switcher on the index (iPhone / Mac) */
.help-platforms { display: flex; width: fit-content; margin: 20px auto 0; gap: 4px; padding: 5px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); box-shadow: 3px 3px 0 var(--ink); }
.help-plat { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 14.5px; color: var(--ink-2); padding: 9px 20px; border-radius: 999px; transition: background .12s, color .12s; }
.help-plat.active { background: var(--ink); color: #fff; }
.help-plat:not(.active):hover { background: var(--bg-2); color: var(--ink); }

/* macOS window frame for Mac (landscape) screenshots */
.guide-mac { max-width: 820px; margin: 34px auto; }
.guide-mac.compact { max-width: 430px; }
.guide-mac .mac-win { border: 1.5px solid var(--ink); border-radius: 16px; overflow: hidden; box-shadow: 6px 6px 0 var(--ink); background: #0c0d0f; }
.guide-mac .mac-bar { display: none; }
.guide-mac .mac-screen { position: relative; line-height: 0; }
.guide-mac .mac-screen img { width: 100%; height: auto; display: block; }
.guide-mac .guide-caption { font-size: 13.5px; color: var(--ink-3); margin-top: 16px; font-weight: 500; font-style: italic; text-align: center; line-height: 1.4; }

/* Numbered visual walkthrough (System Settings step-by-step) */
.guide-walk { margin: 30px 0 8px; }
.guide-walk .gw-step { margin: 0 0 30px; padding: 0 0 30px; border-bottom: 1.5px dashed var(--line, #d9ddcf); }
.guide-walk .gw-step:last-child { border-bottom: 0; padding-bottom: 0; }
.guide-walk .gw-head { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.guide-walk .gw-num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #fff; font-weight: 800; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.guide-walk .gw-title { font-weight: 800; font-size: 18px; color: var(--ink); line-height: 1.25; }
.guide-walk .gw-body { margin-left: 42px; }
.guide-walk .gw-body > p { margin: 0; }
.guide-walk .gw-body .guide-mac { max-width: 600px; margin: 14px 0 0; }
@media (max-width: 560px) { .guide-walk .gw-body { margin-left: 0; } }

/* Numbered step list (text-only, e.g. quick recaps) */
.prose ol.guide-steps { counter-reset: gstep; list-style: none; padding: 0; margin: 28px 0; }
.prose ol.guide-steps > li {
  counter-increment: gstep; position: relative; padding: 16px 18px 16px 60px; margin: 0 0 12px;
  border: 1.5px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 3px 3px 0 var(--ink);
  font-size: 16px; line-height: 1.5; font-weight: 500;
}
.prose ol.guide-steps > li::before {
  content: counter(gstep); position: absolute; left: 14px; top: 14px;
  width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: white;
  border: 1.5px solid var(--ink); display: grid; place-items: center;
  font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 800;
}
.prose ol.guide-steps > li strong { font-weight: 800; }

/* ============== "WAS THIS HELPFUL?" ============== */
.help-feedback {
  margin: 56px auto 0; max-width: 720px; text-align: center;
  padding: 28px; border: 1.5px solid var(--ink); border-radius: 18px;
  background: var(--paper); box-shadow: 4px 4px 0 var(--ink);
}
.help-feedback .q { font-size: 16px; font-weight: 800; color: var(--ink); margin-bottom: 14px; }
.help-feedback .btns { display: inline-flex; gap: 10px; }
.help-feedback button {
  display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 20px;
  border: 1.5px solid var(--ink); border-radius: 999px; background: var(--bg);
  font-family: inherit; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .15s, color .15s;
}
.help-feedback button:hover { transform: translate(-2px,-2px); box-shadow: 3px 3px 0 var(--ink); }
.help-feedback button.picked { background: var(--green); color: white; }
.help-feedback .thanks { display: none; font-size: 15px; font-weight: 700; color: var(--green-2); }
.help-feedback.done .q, .help-feedback.done .btns { display: none; }
.help-feedback.done .thanks { display: block; }

/* ============== RELATED ARTICLES ============== */
.help-related { max-width: 1080px; margin: 56px auto 0; }
.help-related h2 { font-weight: 800; font-size: 22px; letter-spacing: -0.02em; margin: 0 0 18px; }
.help-related .r-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.help-related a {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px;
  border: 1.5px solid var(--ink); border-radius: 14px; background: var(--paper);
  box-shadow: 3px 3px 0 var(--ink); transition: transform .15s, box-shadow .15s; color: inherit;
}
.help-related a:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
.help-related a .rt { font-weight: 800; font-size: 15px; line-height: 1.25; }
.help-related a .rd { font-size: 13px; color: var(--ink-3); font-weight: 500; line-height: 1.45; }

/* ============== IN-PROSE BUTTONS (neutralise the .prose a link styling) ============== */
.prose a.btn { text-decoration: none; font-weight: 700; }
.prose a.btn-primary, .prose a.btn-primary:hover { color: #fff; background: var(--green); }
.prose a.btn-ghost, .prose a.btn-ghost:hover { color: var(--ink); background: var(--paper); }

/* ============== RESPONSIVE (mobile-first polish) ============== */
@media (max-width: 980px) {
  .help-grid { grid-template-columns: repeat(2, 1fr); }
  .help-related .r-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .help-hero { padding: 48px 0 28px; }
  .help-grid { grid-template-columns: 1fr; }
  .guide-stepline { margin-top: 18px; }
}
@media (max-width: 420px) {
  .help-search input { height: 54px; font-size: 16px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .guide-hotspot, .guide-tap { animation: none; }
  .guide-hotspot { box-shadow: 0 0 0 4px rgba(0,168,90,0.18); }
  .guide-tap { opacity: 0.7; }
}