/* HIFB "How AI native are you?" module. Brand: Anton headlines, Archivo Black tags, Roboto Condensed text,
   ink on white, flat red #FF0000 as the single accent per screen. */
#ai-native{ background:#FFFFFF; color:#0A0A0A; padding:120px 0; font-family:'Roboto Condensed','Arial Narrow',sans-serif; }
#ai-native .q-wrap{ max-width:1180px; margin:0 auto; padding:0 40px; display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:72px; align-items:start }
#ai-native .q-head{ position:sticky; top:110px }
#ai-native .q-eyebrow{ display:flex; justify-content:space-between; font-family:'Archivo Black',sans-serif; font-size:12px; letter-spacing:.16em; text-transform:uppercase; border-bottom:1px solid #D9D6D0; padding-bottom:14px; margin-bottom:32px; grid-column:1/-1 }
#ai-native h2{ font-family:'Anton',Impact,sans-serif; font-weight:400; text-transform:uppercase; font-size:clamp(56px,7vw,112px); line-height:.9; margin:0 }
#ai-native h2 em{ font-style:normal; color:#FF0000; text-shadow:.045em .045em 0 #0A0A0A }
#ai-native .q-sub{ font-size:20px; line-height:1.5; margin:24px 0 0; max-width:440px }
#ai-native .q-progress{ margin-top:36px; display:flex; align-items:center; gap:14px }
#ai-native .q-progress-track{ flex:1; height:6px; background:#ECE9E3; border-radius:4px; overflow:hidden }
#ai-native .q-progress-fill{ height:100%; width:0; background:#0A0A0A; border-radius:4px; transition:width .35s ease }
#ai-native .q-progress-label{ font-family:'Archivo Black',sans-serif; font-size:12px; letter-spacing:.12em; min-width:48px; text-align:right }

#ai-native .q-stage{ min-height:520px }
#ai-native .q-tag{ display:inline-block; font-family:'Archivo Black',sans-serif; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#5C5A57 }
#ai-native .q-lede{ font-size:24px; line-height:1.4; margin:0 0 28px }
#ai-native .q-rounds{ list-style:none; margin:0 0 36px; padding:0; border-top:2px solid #0A0A0A }
#ai-native .q-rounds li{ display:flex; gap:24px; align-items:baseline; padding:16px 0; border-bottom:1px solid #D9D6D0; font-size:22px; font-weight:700 }
#ai-native .q-rounds .q-tag{ min-width:92px }
#ai-native .q-small{ color:#5C5A57; font-size:15px; margin-top:16px }

#ai-native .q-btn{ display:inline-flex; align-items:center; min-height:52px; padding:0 26px; border:2px solid #0A0A0A; background:#0A0A0A; color:#FFFFFF; font-family:'Archivo Black',sans-serif; font-size:13px; letter-spacing:.14em; text-transform:uppercase; cursor:pointer }
#ai-native .q-btn:hover{ background:#FFFFFF; color:#0A0A0A }
#ai-native .q-ghost{ background:#FFFFFF; color:#0A0A0A }

#ai-native .q-card{ animation:qin .35s ease both }
@keyframes qin{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
#ai-native .q-question{ font-family:'Roboto Condensed',sans-serif; font-weight:700; font-size:clamp(28px,3vw,40px); line-height:1.12; margin:12px 0 28px }
#ai-native .q-options{ display:grid; gap:10px }
#ai-native .q-opt{ text-align:left; font:inherit; font-size:20px; line-height:1.3; padding:16px 20px; min-height:56px; background:#FFFFFF; color:#0A0A0A; border:2px solid #0A0A0A; cursor:pointer; transition:transform .12s, background .12s }
#ai-native .q-opt:hover:not(:disabled){ transform:translateX(6px); background:#F4F1EC }
#ai-native .q-opt:disabled{ cursor:default; opacity:.45 }
#ai-native .q-opt.is-picked, #ai-native .q-opt.is-right{ opacity:1; background:#0A0A0A; color:#FFFFFF }
#ai-native .q-opt.is-wrong{ opacity:1; border-color:#FF0000; color:#0A0A0A; background:#FFFFFF; text-decoration:line-through; text-decoration-color:#FF0000; text-decoration-thickness:2px }
#ai-native .q-reveal:not(:empty){ margin-top:28px; padding-top:24px; border-top:2px solid #0A0A0A; animation:qin .35s ease both }
#ai-native .q-verdict{ font-family:'Anton',Impact,sans-serif; text-transform:uppercase; font-size:34px; line-height:1; margin:0 0 12px }
#ai-native .q-explain{ font-size:19px; line-height:1.55; margin:0 0 16px }
#ai-native .q-quote{ margin:0 0 16px; padding-left:18px; border-left:4px solid #0A0A0A; font-size:21px; line-height:1.4; font-weight:500 }
#ai-native .q-quote cite{ display:block; margin-top:8px; font-style:normal; font-family:'Archivo Black',sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#5C5A57 }
#ai-native .q-links{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-bottom:24px }
#ai-native .q-ep, #ai-native .q-src{ font-family:'Archivo Black',sans-serif; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#0A0A0A }
#ai-native .q-src{ color:#5C5A57; font-family:'Roboto Condensed',sans-serif; text-transform:none; letter-spacing:0; font-size:15px }

/* result */
#ai-native .q-score{ display:flex; align-items:baseline; gap:6px; margin-top:8px }
#ai-native .q-num{ font-family:'Anton',Impact,sans-serif; font-size:clamp(120px,14vw,190px); line-height:.85 }
#ai-native .q-of{ font-family:'Anton',Impact,sans-serif; font-size:40px; color:#5C5A57 }
#ai-native .q-tier{ font-family:'Anton',Impact,sans-serif; text-transform:uppercase; font-size:clamp(40px,4.4vw,64px); line-height:.95; margin:10px 0 8px; color:#0A0A0A }
#ai-native .q-tier-line{ font-size:21px; line-height:1.45; margin:0 0 28px }
#ai-native .q-dims{ display:grid; grid-template-columns:1fr 1fr; gap:14px 28px; margin-bottom:40px }
#ai-native .q-dim{ position:relative; padding-bottom:12px; display:flex; justify-content:space-between; align-items:baseline; font-weight:700; font-size:17px }
#ai-native .q-dim b{ font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:30px }
#ai-native .q-dim::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:6px; background:#ECE9E3; border-radius:4px }
#ai-native .q-dim i{ position:absolute; left:0; bottom:0; height:6px; background:#0A0A0A; border-radius:4px; z-index:1 }
#ai-native .q-h4{ font-family:'Archivo Black',sans-serif; font-size:13px; letter-spacing:.16em; text-transform:uppercase; margin:40px 0 14px; padding-top:20px; border-top:2px solid #0A0A0A }
#ai-native .q-legend{ display:flex; flex-wrap:wrap; gap:8px 24px; font-size:15px; color:#3A3835; margin-bottom:10px }
#ai-native .q-legend i{ display:inline-block; vertical-align:middle; margin-right:8px }
#ai-native .lg-bar{ width:22px; height:10px; border-radius:3px; background:#77736C }
#ai-native .lg-you{ width:14px; height:14px; border-radius:50%; background:#FF0000; box-shadow:0 0 0 2px #FFFFFF, 0 0 0 3px #0A0A0A }
#ai-native .q-chart{ width:100%; height:auto; display:block; overflow:visible }
#ai-native .q-grid{ stroke:#ECE9E3; stroke-width:1 }
#ai-native .q-axis{ font-size:12px; fill:#5C5A57; font-family:'Roboto Condensed',sans-serif }
#ai-native .q-rlabel{ font-size:16px; font-weight:700; fill:#0A0A0A; font-family:'Roboto Condensed',sans-serif }
#ai-native .q-val{ font-size:14px; fill:#3A3835; font-family:'Roboto Condensed',sans-serif }
#ai-native .q-bar{ fill:#77736C }
#ai-native .q-you{ fill:#FF0000; stroke:#FFFFFF; stroke-width:2.5 }
#ai-native .q-you-no{ fill:#FFFFFF; stroke:#FF0000; stroke-width:3 }
#ai-native .q-row:focus{ outline:2px solid #0A0A0A; outline-offset:2px }
#ai-native .q-table{ margin-top:12px; font-size:15px }
#ai-native .q-table summary{ cursor:pointer; font-weight:700 }
#ai-native .q-table table{ width:100%; border-collapse:collapse; margin-top:10px }
#ai-native .q-table th, #ai-native .q-table td{ text-align:left; padding:8px 6px; border-bottom:1px solid #ECE9E3; vertical-align:top }
#ai-native .q-fomo{ margin:36px 0 0; padding:28px; background:#0A0A0A; color:#FFFFFF }
#ai-native .q-fomo p{ font-family:'Anton',Impact,sans-serif; text-transform:uppercase; font-size:clamp(28px,3vw,40px); line-height:1.02; margin:0 0 12px }
#ai-native .q-fomo .q-src{ color:#BDBAB4 }
#ai-native .q-steps{ margin:0; padding-left:0; list-style:none; counter-reset:s }
#ai-native .q-steps li{ counter-increment:s; position:relative; padding:16px 0 16px 64px; border-bottom:1px solid #D9D6D0; font-size:19px; line-height:1.5 }
#ai-native .q-steps li::before{ content:counter(s,decimal-leading-zero); position:absolute; left:0; top:12px; font-family:'Anton',Impact,sans-serif; font-size:34px }
#ai-native .q-steps b{ display:block; font-size:21px }
#ai-native .q-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px }

@media (max-width:900px){
  #ai-native{ padding:80px 0 }
  #ai-native .q-wrap{ grid-template-columns:minmax(0,1fr); gap:36px; padding:0 20px }
  #ai-native .q-head{ position:static }
  #ai-native .q-dims{ grid-template-columns:1fr }
  #ai-native .q-opt{ font-size:18px }
}
@media (prefers-reduced-motion:reduce){ #ai-native *{ animation:none !important; transition:none !important } }

/* charts */
#ai-native .q-chart-title{ font-weight:700; font-size:18px; margin:0 0 10px }
#ai-native .q-waffle{ width:100%; max-width:560px; height:auto; display:block }
#ai-native .w0{ fill:#E3E0DA; background:#E3E0DA } #ai-native .w1{ fill:#BDB9B1; background:#BDB9B1 }
#ai-native .w2{ fill:#8A867F; background:#8A867F } #ai-native .w3{ fill:#3A3835; background:#3A3835 }
#ai-native .w-you{ fill:#FF0000; background:#FF0000 }
#ai-native .q-waffle circle{ stroke:#FFFFFF; stroke-width:2 }
#ai-native .q-wkey{ list-style:none; margin:12px 0 8px; padding:0; display:grid; gap:6px; font-size:17px }
#ai-native .q-wkey i{ display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:10px; vertical-align:middle }
#ai-native .q-wkey b{ font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:22px; margin-right:6px }
#ai-native .q-wkey li.is-you{ font-weight:700 }
#ai-native .q-wkey li span{ font-family:'Archivo Black',sans-serif; font-size:12px; letter-spacing:.12em; text-transform:uppercase }
#ai-native .q-track{ fill:#F1EFEA }
#ai-native .q-youlbl{ font-family:'Archivo Black',sans-serif; font-size:12px; letter-spacing:.1em; text-transform:uppercase; fill:#77736C }
#ai-native .q-youlbl.is-yes{ fill:#0A0A0A }

/* v9.2 layout: the test on the left, the title on the right; after an answer the fact replaces the title */
#ai-native .q-eyebrow{ grid-row:1 }
#ai-native .q-stage{ grid-column:1; grid-row:2; min-height:0 }
#ai-native .q-head{ grid-column:2; grid-row:2 }
#ai-native .q-wrap{ grid-template-columns:minmax(0,7fr) minmax(0,5fr) }
#ai-native .q-panel:empty{ display:none }
#ai-native .q-head.answered .q-ransom, #ai-native .q-head.answered .q-sub{ display:none }
#ai-native .q-panel{ animation:qin .3s ease both }
#ai-native .q-panel .q-verdict{ font-size:clamp(28px,2.6vw,38px) }
#ai-native .q-panel .q-explain{ font-size:18px }
#ai-native .q-panel .q-quote{ font-size:19px }
#ai-native .q-question{ margin:10px 0 22px }
#ai-native .q-opt{ min-height:52px; padding:13px 18px }
#ai-native .q-ransom .strip{ font-size:clamp(40px,4.6vw,72px) }
@media (max-width:900px){
  #ai-native .q-wrap{ grid-template-columns:minmax(0,1fr) }
  #ai-native .q-head{ grid-column:1; grid-row:2 } #ai-native .q-stage{ grid-row:3 }
}

/* v9.3: while the test runs, a pie replaces the title */
#ai-native .q-pie{ display:none }
#ai-native .q-head.testing .q-ransom, #ai-native .q-head.testing .q-sub{ display:none }
#ai-native .q-head.testing .q-pie{ display:none; margin-bottom:22px; padding:18px 22px 20px; background:url(../assets/strip_white0.webp) center/100% 100% no-repeat; filter:drop-shadow(0 2px 1px rgba(10,10,10,.14)) drop-shadow(0 10px 14px rgba(10,10,10,.12)); transform:rotate(-.6deg) }
#ai-native .pie-row{ display:flex; align-items:center; gap:22px; margin-top:10px }
#ai-native .q-pie svg{ width:clamp(96px,9vw,128px); height:auto; flex:none }
#ai-native .q-pie svg path, #ai-native .q-pie svg circle{ stroke:#FFFFFF; stroke-width:1.5 }
#ai-native .pie-right{ fill:#0A0A0A; background:#0A0A0A } #ai-native .pie-wrong{ fill:#FF0000; background:#FF0000 }
#ai-native .pie-done{ fill:#8A867F; background:#8A867F } #ai-native .pie-left{ fill:#E3E0DA; background:#E3E0DA }
#ai-native .pie-key{ list-style:none; margin:0; padding:0; display:grid; gap:4px; font-size:16px }
#ai-native .pie-key i{ display:inline-block; width:11px; height:11px; border-radius:50%; margin-right:9px; vertical-align:middle }
#ai-native .pie-key b{ font-family:'Anton',Impact,sans-serif; font-weight:400; font-size:20px; margin-right:8px; display:inline-block; min-width:18px }
#ai-native .q-scifi{ flex-direction:column; align-items:flex-start }
#ai-native .q-scifi .strip{ white-space:nowrap }
#ai-native .q-scifi .strip:nth-of-type(3){ --rot:-.7deg; margin-left:1.2vw }
@media (max-width:900px){ #ai-native .q-scifi .strip{ white-space:normal } }
#ai-native .q-head.testing .q-progress{ display:none }