/* AIdvisory page styles. Built on the homepage design system: sections use
   .tone-light / .tone-dark and read --t-* variables, so light and dark mode
   both work without a second set of rules. */

.ad .ad-gap { margin-top: var(--space-8); }
.ad .ad-mt { margin-top: var(--space-9); }
.ad .ad-h3 { font-size: 1.3rem; margin: 0 0 10px; line-height: 1.25; }
.ad .ad-h2 { margin: 14px 0 18px; }
.ad .ad-sub { display: block; font-family: var(--font-sans); font-size: .8rem; font-weight: 500; color: var(--t-muted); margin-top: 4px; letter-spacing: .02em; }
.ad p, .ad li { color: var(--t-text); }
.ad .fineprint { margin-top: var(--space-6); font-size: 13px; line-height: 1.6; color: var(--t-muted); max-width: 80ch; }

/* ---------- hero ---------- */
.ad .page-hero { padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.ad .ad-herogrid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; position: relative; }
.ad .ad-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.ad .ad-ghost { color: #fff !important; border-color: rgba(255,255,255,.45) !important; }
.ad .ad-ghost:hover { background: rgba(255,255,255,.1); }
.ad .ad-herofine { margin-top: 24px; font-size: 13px; color: var(--text-on-dark-muted) !important; max-width: 52ch; }
.ad .ad-facts { list-style: none; margin: clamp(2rem, 4vw, 3.5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; overflow: hidden; position: relative; }
.ad .ad-facts li { background: rgba(11,22,49,.78); padding: 16px 18px; color: var(--text-on-dark-muted) !important; font-size: 13.5px; line-height: 1.4; }
.ad .ad-facts b { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--gold-500); margin-bottom: 2px; }

.ad .ad-orbit { width: 100%; max-width: 520px; margin: 0 auto; display: block; overflow: visible; }
.ad .ad-orbit .ring { transform-origin: 260px 260px; animation: ad-spin 90s linear infinite; }
.ad .ad-orbit .core { animation: ad-pulse 5s ease-in-out infinite; transform-origin: 260px 260px; }
.ad .ad-orbit .node rect { fill: #12204a; stroke: rgba(217,169,78,.7); stroke-width: 1.2; }
.ad .ad-orbit .node text { fill: #fff; font: 600 13px var(--font-sans); text-anchor: middle; dominant-baseline: central; }
.ad .ad-orbit .node:hover rect { fill: #1b2e63; stroke: var(--gold-500); }
@keyframes ad-spin { to { transform: rotate(360deg); } }
@keyframes ad-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }

/* ---------- in-page nav ---------- */
.ad .ad-subnav { position: sticky; top: 78px; z-index: 40; max-width: 1100px; margin: 0 auto; padding: 0 var(--space-4); }
.ad .ad-subnav ul { list-style: none; margin: 0; padding: 6px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-radius: 999px; background: rgba(11,22,49,.82); border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 10px 30px rgba(11,22,49,.25); }
.ad .ad-subnav ul::-webkit-scrollbar { display: none; }
.ad .ad-subnav a { display: block; white-space: nowrap; padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.78); text-decoration: none; }
.ad .ad-subnav a:hover { color: #fff; background: rgba(255,255,255,.1); }
.ad .ad-subnav a.is-active { color: var(--navy-900); background: var(--gold-500); }
.ad .ad-subnav a:focus-visible { outline: 3px solid var(--gold-500); outline-offset: 2px; }
.ad section[id] { scroll-margin-top: 140px; }

/* ---------- cards ---------- */
.ad .card { background: var(--t-card); border: 1px solid var(--t-card-bd); box-shadow: var(--t-card-sh); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }
.ad .card:hover { background: var(--t-card-hover); transform: translateY(-3px); }
.ad .card p { line-height: 1.65; margin: 0 0 12px; }
.ad .card .ad-h3 { color: var(--t-head); }
.ad .ad-q { font-family: var(--font-display); font-style: italic; color: var(--t-head) !important; font-size: 1.05rem; }
.ad .ad-out { font-size: 14px; border-top: 1px solid var(--t-rule); padding-top: 12px; margin-top: 6px !important; }
.ad .ad-out b { color: var(--t-head); }
.ad .ad-tag { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--t-accent); margin-bottom: 8px; }
.ad .ad-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--t-iconbg); color: var(--t-icon); margin-bottom: 14px; }
.ad .ad-ico svg { width: 24px; height: 24px; }
.ad .ad-list { margin: 10px 0 0; padding-left: 1.2em; line-height: 1.7; }
.ad .ad-list--num { font-size: 1.15rem; }
.ad .ad-list--num li { color: var(--t-head); padding: 4px 0; }

.ad .ad-outcomes { list-style: none; margin: var(--space-8) 0 0; padding: 0; display: grid; gap: 12px; counter-reset: o; }
.ad .ad-outcomes li { counter-increment: o; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 16px 20px; background: var(--t-card); border: 1px solid var(--t-card-bd); border-radius: 14px; line-height: 1.6; box-shadow: var(--t-card-sh); }
.ad .ad-outcomes b { color: var(--t-head); }

/* ---------- AIfication diagram ---------- */
.ad .ad-stack { margin-top: var(--space-8); display: grid; gap: 10px; }
.ad .ad-layer { padding: 20px 24px; border-radius: 14px; color: #fff; }
.ad .ad-layer b { font-family: var(--font-display); font-size: 1.4rem; margin-right: 10px; color: #fff; }
.ad .ad-layer span { display: block; margin-top: 6px; font-size: 14px; color: rgba(255,255,255,.85); }
.ad .ad-layer--1 { background: linear-gradient(90deg, #1b2e63, #2477ce); }
.ad .ad-layer--2 { background: #12204a; border: 1px solid rgba(255,255,255,.22); margin: 0 4%; }
.ad .ad-layer--3 { background: rgba(201,148,58,.2); border: 1px dashed var(--gold-500); margin: 0 8%; }
.ad .ad-def { padding: 24px; border: 1px solid var(--t-card-bd); border-radius: 14px; background: var(--t-card); box-shadow: var(--t-card-sh); }
.ad .ad-def h3 { color: var(--t-head); margin: 0 0 10px; }
.ad .ad-def p { margin: 0 0 10px; line-height: 1.65; }
.ad .ad-def .ad-def__line { color: var(--t-accent); font-weight: 700; margin: 0; }
.ad .ad-cmp h4 { color: var(--t-head); font-size: 1.05rem; margin: 0 0 6px; }
.ad .ad-cmp p { font-size: 14.5px; line-height: 1.6; margin: 0; }

/* ---------- method ---------- */
.ad .ad-steps { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: 12px; }
.ad .ad-steps--8 { grid-template-columns: repeat(4, 1fr); }
.ad .ad-steps--6 { grid-template-columns: repeat(3, 1fr); }
.ad .ad-steps li { position: relative; background: var(--t-card); border: 1px solid var(--t-card-bd); box-shadow: var(--t-card-sh); border-radius: 14px; padding: 18px 16px 16px; display: grid; gap: 6px; align-content: start; transition: transform .25s ease; }
.ad .ad-steps li:hover { transform: translateY(-3px); }
.ad .ad-steps li b { color: var(--t-head); font-size: 1.02rem; }
.ad .ad-steps li span:last-child { font-size: 14px; line-height: 1.55; }
.ad .ad-num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; background: var(--gold-500); color: var(--navy-900); }
.ad .ad-loop { margin-top: 12px; font-size: 13.5px; color: var(--t-muted); }
.ad .ad-loop::before { content: "\21BB  "; color: var(--t-accent); font-weight: 700; }
.ad .ad-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14.5px; }
.ad .ad-table th, .ad .ad-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--t-rule); color: var(--t-text); }
.ad .ad-table td:first-child { font-family: var(--font-mono); color: var(--t-accent); font-weight: 700; width: 56px; }
.ad .ad-table th { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--t-muted); }

/* ---------- journey ---------- */
.ad .ad-journey { list-style: none; counter-reset: j; margin: var(--space-8) 0 0; padding: 0; position: relative; }
.ad .ad-journey::before { content: ""; position: absolute; left: 16px; top: 22px; bottom: 22px; width: 2px; background: linear-gradient(var(--gold-500), var(--t-rule)); }
.ad .ad-journey li { counter-increment: j; position: relative; display: grid; grid-template-columns: 34px 1fr; column-gap: 18px; padding: 14px 0 18px; }
.ad .ad-journey b { color: var(--t-head); font-size: 1.05rem; }
.ad .ad-journey span { line-height: 1.6; }

/* ---------- before / after ---------- */
.ad .ad-ba { padding: 24px; border-radius: 14px; border: 1px solid var(--t-card-bd); box-shadow: var(--t-card-sh); }
.ad .ad-ba h3 { font-size: 1.15rem; margin: 0 0 12px; color: var(--t-head); }
.ad .ad-ba ol { margin: 0; padding-left: 1.3em; line-height: 1.9; }
.ad .ad-ba li { color: var(--t-text); }
.ad .ad-ba--before { background: var(--t-card); }
.ad .ad-ba--before h3::before { content: "Before  "; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--t-muted); display: block; }
.ad .ad-ba--after { background: linear-gradient(160deg, rgba(217,169,78,.2), var(--t-card)); border-color: var(--gold-500); }
.ad .ad-ba--after h3::before { content: "After  "; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--t-accent); display: block; }

/* ---------- disclosure ---------- */
.ad .disclosure { background: var(--t-note); color: var(--t-text); border-left-color: var(--gold-500); }
.ad .disclosure strong { color: var(--t-head); }

/* ---------- FAQ ---------- */
.ad .ad-faq details { border-bottom: 1px solid var(--t-rule); padding: 16px 0; }
.ad .ad-faq summary { cursor: pointer; font-weight: 600; color: var(--t-head); list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.ad .ad-faq summary::-webkit-details-marker { display: none; }
.ad .ad-faq summary::after { content: "+"; font-size: 1.4rem; color: var(--t-accent); transition: transform .2s ease; flex: none; }
.ad .ad-faq details[open] summary::after { transform: rotate(45deg); }
.ad .ad-faq summary:focus-visible { outline: 3px solid rgba(217,169,78,.6); outline-offset: 4px; border-radius: 4px; }
.ad .ad-faq p { margin: 10px 0 0; line-height: 1.7; max-width: 70ch; }

/* ---------- form ---------- */
.ad .ad-formwrap { padding: clamp(1.25rem, 3vw, 2.25rem); border-radius: 18px; background: var(--t-card); border: 1px solid var(--t-card-bd); box-shadow: var(--t-card-sh); margin-top: var(--space-7); }
.ad .ad-form .form-field label { color: var(--t-head); }
.ad .ad-form select, .ad .ad-form input[type=text], .ad .ad-form input[type=email], .ad .ad-form textarea { width: 100%; }
.ad .ad-form [aria-invalid="true"] { border-color: var(--danger) !important; box-shadow: 0 0 0 3px rgba(180,69,47,.18); }
.ad .ad-err { display: block; margin-top: 6px; font-size: 13px; color: var(--danger); }
html[data-theme="dark"] .ad .ad-err { color: #ff9f8c; }
.ad .ad-count { display: block; text-align: right; font-size: 12px; color: var(--t-muted); margin-top: 4px; }
.ad .ad-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ad .ad-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: var(--space-5); font-size: 14px; line-height: 1.55; color: var(--t-text); }
.ad .ad-consent input { margin-top: 4px; flex: none; width: 18px; height: 18px; }
.ad .ad-submit { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: var(--space-6); }
.ad #ad-status { font-size: 14px; color: var(--t-text); }
.ad #ad-status.is-err { color: var(--danger); }
html[data-theme="dark"] .ad #ad-status.is-err { color: #ff9f8c; }
.ad .btn[disabled] { opacity: .65; cursor: progress; }
.ad .ad-done { display: none; text-align: center; padding: clamp(1.5rem, 4vw, 3rem) 1rem; }
.ad .ad-done.is-shown { display: block; }
.ad .ad-done__tick { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 18px; display: grid; place-items: center; background: var(--gold-500); color: var(--navy-900); }
.ad .ad-done h3 { color: var(--t-head); font-size: 1.6rem; margin: 0 0 10px; }
.ad .ad-done p { max-width: 48ch; margin: 0 auto 10px; line-height: 1.65; }

/* ---------- scroll reveal (only when JS is on) ---------- */
.ad.ad-js .ad-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.ad.ad-js .ad-reveal.is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .ad .ad-herogrid { grid-template-columns: 1fr; }
  .ad .ad-orbit { max-width: 420px; }
  .ad .ad-facts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .ad .ad-steps--8, .ad .ad-steps--6 { grid-template-columns: repeat(2, 1fr); }
  .ad .ad-layer--2, .ad .ad-layer--3 { margin: 0; }
  .ad .ad-subnav { top: 70px; }
}
@media (max-width: 560px) {
  .ad .ad-steps--8, .ad .ad-steps--6 { grid-template-columns: 1fr; }
  .ad .ad-facts li { padding: 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ad .ad-orbit .ring, .ad .ad-orbit .core { animation: none; }
  .ad.ad-js .ad-reveal { opacity: 1; transform: none; transition: none; }
  .ad .card, .ad .ad-steps li { transition: none; }
}