/* ===========================================================
   YouAsk — shared styles for sub-pages (Policy / FAQ / Company)
   Builds on styles.css (tokens, .btn, .nav, .footer, .faq-*)
   =========================================================== */

/* ---------- page hero band ---------- */
.page-hero {
  position: relative;
  padding: 56px 0 56px;
  background:
    radial-gradient(900px 460px at 82% -12%, var(--blue-50) 0%, rgba(238,243,255,0) 60%),
    radial-gradient(620px 380px at -4% 8%, #f4f8ff 0%, rgba(244,248,255,0) 58%);
  overflow: hidden;
}
.page-hero-grid {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center;
}
.page-hero h1 {
  font-size: clamp(34px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -.03em; margin-top: 18px;
}
.page-hero .lead { margin-top: 18px; }
.page-hero .crumbs {
  display:flex; align-items:center; gap: 8px; font-size: 14px; color: var(--ink-3); font-weight: 600;
}
.page-hero .crumbs a:hover { color: var(--blue); }
.page-hero .crumbs span { opacity: .5; }

/* animated brand-gif visual ("AI video") */
.hero-media {
  position: relative; border-radius: var(--radius-xl);
  background: linear-gradient(160deg, #eaf0ff 0%, #dfeaff 100%);
  padding: 22px; box-shadow: var(--shadow-3);
}
.hero-media::after {
  content:""; position:absolute; inset:0; border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,.7); pointer-events:none;
}
.hero-media img { width: 100%; border-radius: var(--radius-l); display:block; }
.hero-media .badge {
  position:absolute; top: 14px; left: 14px; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  background: rgba(14,23,51,.82); color:#fff; font-size:12px; font-weight:700;
  padding: 7px 12px; border-radius: 100px; letter-spacing:.03em;
  backdrop-filter: blur(6px);
}
.hero-media .badge .rec { width:8px; height:8px; border-radius:50%; background: #ff5a5a; animation: recblink 1.4s ease-in-out infinite; }
@keyframes recblink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ---------- layout w/ sticky TOC ---------- */
.doc-layout { display: grid; grid-template-columns: 252px 1fr; gap: 56px; align-items: start; }
.toc {
  position: sticky; top: 96px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-l);
  padding: 22px 20px; box-shadow: var(--shadow-1);
}
.toc .toc-label {
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 14px;
}
.toc ul { list-style: none; display: grid; gap: 2px; }
.toc a {
  display: block; padding: 9px 14px; border-radius: 10px; font-size: 14.5px; font-weight: 600;
  color: var(--ink-2); border-left: 2px solid transparent; transition: all .18s;
}
.toc a:hover { background: var(--soft); color: var(--ink); }
.toc a.active { background: var(--blue-50); color: var(--blue-700); }
.toc .toc-cta { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-2); }

/* ---------- prose / legal content ---------- */
.doc-section { scroll-margin-top: 96px; }
.doc-section + .doc-section { margin-top: 64px; }
.doc-section .doc-head { display:flex; align-items:center; gap: 16px; margin-bottom: 22px; }
.doc-section .doc-no {
  width: 46px; height: 46px; border-radius: 14px; flex: none;
  background: var(--grad-brand); color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: 19px; box-shadow: var(--shadow-blue);
}
.doc-section h2 { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.02em; }
.prose { color: var(--ink-2); font-size: 16.5px; line-height: 1.72; }
.prose > p { margin-bottom: 17px; }
.prose h5 {
  font-size: 18px; font-weight: 800; color: var(--ink); margin: 26px 0 10px; letter-spacing: -.01em;
}
.prose b, .prose strong { color: var(--ink); font-weight: 700; }
.prose ul { list-style: none; margin: 4px 0 20px; display: grid; gap: 11px; }
.prose ul li { position: relative; padding-left: 30px; }
.prose ul li::before {
  content: ""; position: absolute; left: 4px; top: 8px; width: 16px; height: 16px; border-radius: 6px;
  background: var(--blue-50);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231d60fc' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 13px;
}
.doc-card {
  background:#fff; border:1px solid var(--line); border-radius: var(--radius-l);
  padding: 30px 32px; box-shadow: var(--shadow-1);
}

/* ---------- FAQ page ---------- */
.faq-search {
  position: relative; max-width: 560px; margin: 0 auto 14px;
}
.faq-search input {
  width: 100%; font-family: var(--font); font-size: 16px; color: var(--ink);
  padding: 16px 18px 16px 50px; border-radius: 14px; border: 1.5px solid var(--line);
  background: #fff; transition: border-color .2s, box-shadow .2s; outline: none;
}
.faq-search input:focus { border-color: var(--blue-300); box-shadow: 0 0 0 4px var(--blue-50); }
.faq-search .si {
  position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: var(--ink-3);
  width: 20px; height: 20px; pointer-events: none;
}
.faq-count { text-align:center; font-size: 14px; color: var(--ink-3); margin-bottom: 34px; font-weight: 600; }
.faq-page-wrap { max-width: 860px; margin: 0 auto; display: grid; gap: 14px; }
.faq-empty { text-align:center; color: var(--ink-3); padding: 40px 0; display:none; }
.hl { color: var(--blue); font-weight: 700; }

/* ---------- Company page ---------- */
.about-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; }
.mission-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.mission-card {
  background:#fff; border:1px solid var(--line-2); border-radius: var(--radius-l); padding: 28px 26px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.mission-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-2); border-color: var(--blue-100); }
.mission-ic {
  width: 52px; height: 52px; border-radius: 15px; display:grid; place-items:center; margin-bottom: 18px;
}
.mission-card h3 { font-size: 19px; } .mission-card p { font-size: 14.5px; color: var(--ink-3); margin-top: 8px; }

.contact-card {
  background: linear-gradient(135deg, var(--blue) 0%, #3f78ff 55%, #6f9bff 100%);
  border-radius: var(--radius-xl); padding: 52px 56px; color:#fff; position:relative; overflow:hidden;
  box-shadow: var(--shadow-blue); display:grid; grid-template-columns: 1.3fr .7fr; gap: 40px; align-items:center;
}
.contact-card::before { content:""; position:absolute; width:320px; height:320px; border-radius:50%; background:rgba(255,255,255,.12); top:-120px; right:-70px; }
.contact-card h2 { color:#fff; font-size: clamp(26px,3vw,38px); position:relative; }
.contact-card p { color: rgba(255,255,255,.85); margin-top: 12px; position:relative; }
.contact-pill {
  position:relative; display:inline-flex; align-items:center; gap:12px; background: rgba(255,255,255,.95);
  border-radius: 16px; padding: 18px 22px; box-shadow: var(--shadow-2);
}
.contact-pill .cp-ic { width:46px; height:46px; border-radius:13px; background: var(--blue-50); color: var(--blue); display:grid; place-items:center; flex:none; }
.contact-pill .cp-l { font-size:12.5px; color: var(--ink-3); font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.contact-pill .cp-v { font-size:17px; color: var(--ink); font-weight:800; }

.story-stats { display:flex; gap: 36px; margin-top: 30px; flex-wrap:wrap; }
.story-stat .n { font-size: 34px; font-weight: 800; letter-spacing:-.03em; background: var(--grad-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.story-stat .l { font-size: 13.5px; color: var(--ink-3); font-weight:600; margin-top:2px; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .page-hero-grid, .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .page-hero .hero-media { max-width: 460px; }
  .doc-layout { grid-template-columns: 1fr; gap: 28px; }
  .toc { position: static; }
  .toc ul { grid-template-columns: repeat(2,1fr); gap: 6px; }
  .mission-grid { grid-template-columns: 1fr; }
  .contact-card { grid-template-columns: 1fr; padding: 38px 30px; }
}
@media (max-width: 600px) {
  .page-hero { padding: 40px 0 40px; }
  .toc ul { grid-template-columns: 1fr; }
  .doc-card { padding: 22px 20px; }
  .story-stats { gap: 24px; }
}