/* card #1328: FAQ pages (EN /faq/, DE /de/faq/, ES /es/preguntas-frecuentes/).
   Builds on /assets/hiw.css (How it works) and only adds .hfaq-* rules, all scoped
   under .hfaq. Every question and answer is real text in the DOM and visible at rest;
   the diagrams are decorative (aria-hidden) and freeze on their final frame under
   prefers-reduced-motion. Fixed sizes on looping parts so nothing shifts layout. */

.hfaq { --hfaq-nav: 73px; --hfaq-bar: 66px; }
.hfaq [id] { scroll-margin-top: calc(var(--hfaq-nav) + var(--hfaq-bar) + 16px); }
.hfaq svg:not([width]) { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ================= HERO: journey diagram ================= */
.hfaq-hero { padding-bottom: 72px; }
.hfaq-journey { position: relative; border-radius: 22px; border: 1px solid rgba(255,255,255,0.1); padding: 22px 22px 18px;
    background: linear-gradient(165deg, rgba(16,185,129,0.08), #0a0c0b 55%);
    box-shadow: 0 40px 120px -30px rgba(0,0,0,0.9), 0 0 0 1px rgba(16,185,129,0.06) inset; }
.hfaq-journey::before { content: ''; position: absolute; inset: 10% 8% -8%; z-index: -1; border-radius: 32px;
    background: radial-gradient(ellipse at 50% 60%, rgba(16,185,129,0.24), transparent 70%); filter: blur(30px); }
.hfaq-j-cap { display: flex; align-items: center; gap: 10px; font-family: 'Space Grotesk'; font-size: 11px; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 16px; }
.hfaq-j-live { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); animation: hiwPing 2.4s ease-out infinite; }
.hfaq-j-track { position: relative; }
.hfaq-j-list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hfaq-j-rail { position: absolute; left: 21px; top: 26px; bottom: 26px; width: 2px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
.hfaq-j-pulse { position: absolute; left: 0; top: 0; width: 2px; height: 28%; border-radius: 2px;
    background: linear-gradient(transparent, var(--emerald), transparent); animation: hfaqRail 6s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes hfaqRail { 0% { transform: translateY(-100%); } 100% { transform: translateY(360%); } }
.hfaq-j-step { position: relative; z-index: 1; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px;
    padding: 10px 12px 10px 0; border-radius: 14px; }
.hfaq-j-node { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: #0d100f; border: 1px solid rgba(16,185,129,0.35); color: var(--emerald);
    animation: hfaqNode 6s ease-in-out infinite; animation-delay: calc(var(--s) * 1.2s); }
.hfaq-j-node svg { width: 19px; height: 19px; }
@keyframes hfaqNode { 0%, 100% { background: #0d100f; color: var(--emerald); box-shadow: none; }
    8%, 22% { background: var(--emerald); color: var(--bg); box-shadow: 0 0 0 6px rgba(16,185,129,0.14), 0 0 24px rgba(16,185,129,0.5); }
    34% { background: #0d100f; color: var(--emerald); box-shadow: none; } }
.hfaq-j-txt { min-width: 0; display: grid; gap: 2px; }
.hfaq-j-txt b { font-family: 'Space Grotesk'; font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.3; overflow-wrap: anywhere; }
.hfaq-j-txt span { font-size: 13px; color: var(--text-dim); line-height: 1.4; }
.hfaq-j-pill { font-family: 'Space Grotesk'; font-size: 11.5px; font-weight: 600; color: var(--emerald); white-space: nowrap;
    padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(16,185,129,0.25); background: rgba(16,185,129,0.07); }
.hfaq-j-step:last-child .hfaq-j-txt b { color: var(--emerald); }

/* ================= sticky topic chips ================= */
.hfaq-topics { position: sticky; top: var(--hfaq-nav); z-index: 50; background: rgba(5,5,5,0.86);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    border-top: 1px solid var(--hiw-line); border-bottom: 1px solid var(--hiw-line); }
.hfaq-chips { display: flex; gap: 10px; padding: 12px 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hfaq-chips::-webkit-scrollbar { display: none; }
.hfaq .hfaq-chip { flex: none; display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 14px 0 12px; border-radius: 999px;
    border: 1px solid var(--border); background: rgba(255,255,255,0.02); color: var(--text-dim); text-decoration: none;
    font-family: 'Space Grotesk'; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.hfaq-chip svg { width: 17px; height: 17px; color: var(--emerald); }
.hfaq-chip em { font-family: 'Space Grotesk'; font-style: normal; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255,255,255,0.06); color: var(--text-dim); }
.hfaq .hfaq-chip:hover { border-color: var(--border-hover); color: var(--text); }
.hfaq .hfaq-chip:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }
.hfaq .hfaq-chip.is-active { border-color: rgba(16,185,129,0.5); background: rgba(16,185,129,0.12); color: var(--text); }
.hfaq-chip.is-active em { background: var(--emerald); color: var(--bg); }

/* ================= topic sections ================= */
.hfaq-group.hiw-section { padding: 96px 0; }
.hfaq-grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: 64px; align-items: start; }
.hfaq-side { position: sticky; top: calc(var(--hfaq-nav) + var(--hfaq-bar) + 28px); }
.hfaq-side-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.hfaq-side-head .hiw-label { margin: 0; }
.hfaq-side-head .hiw-label i { font-style: normal; color: var(--text-muted); padding: 0 4px; }
.hfaq-side h2 { font-size: clamp(30px, 3.4vw, 44px); margin-bottom: 26px; }

/* accordion: hiw-faq look, answer wrapper animated by faq.js */
.hfaq-list { gap: 12px; }
.hfaq-q { overflow: hidden; }
.hfaq-q summary { min-height: 44px; }
.hfaq .hfaq-q summary:focus-visible { outline: 2px solid var(--emerald); outline-offset: -3px; border-radius: 16px; }
.hfaq-q summary:hover h3 { color: #fff; }
.hfaq-q:target, .hfaq-q.is-target { border-color: rgba(16,185,129,0.55); box-shadow: 0 0 0 4px rgba(16,185,129,0.12); }
.hfaq-a { overflow: hidden; }

/* diagrams: shared frame */
.hfaq-viz { position: relative; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background: #080a09; padding: 18px; display: grid; gap: 12px; }
.hfaq-viz > * { min-width: 0; }

/* free: subdomain, Save press, online for good vs removed after 7 days */
.hfaq-urlpill, .hfaq-url span { display: flex; align-items: center; gap: 8px; font-family: 'Space Grotesk'; font-size: 13px; color: var(--text);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hfaq-urlpill { height: 38px; padding: 0 14px; border-radius: 10px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); }
.hfaq-urlpill svg, .hfaq-url svg { flex: none; width: 13px; height: 13px; color: var(--emerald); }
.hfaq-save-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hfaq-save-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px;
    background: var(--emerald); color: var(--bg); font-family: 'Space Grotesk'; font-size: 13px; font-weight: 700;
    animation: hfaqPress 6s ease-in-out infinite; }
.hfaq-save-btn svg { width: 15px; height: 15px; stroke-width: 2.4; }
.hfaq-badge { font-size: 12px; color: var(--text-dim); padding: 5px 10px; border-radius: 999px; border: 1px dashed rgba(255,255,255,0.14); }
.hfaq-save-ok, .hfaq-save-no { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.4; padding: 10px 12px; border-radius: 12px; }
.hfaq-save-ok { color: var(--text); background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.3); animation: hfaqOk 6s ease-in-out infinite; }
.hfaq-save-no { color: var(--text-dim); background: rgba(245,158,11,0.05); border: 1px solid rgba(245,158,11,0.2); }
.hfaq-save-ok svg, .hfaq-save-no svg { flex: none; width: 16px; height: 16px; }
.hfaq-save-ok svg { color: var(--emerald); }
.hfaq-save-no svg { color: var(--hiw-amber); }
@keyframes hfaqPress { 0%, 22% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16,185,129,0.5); } 26% { transform: scale(0.93); }
    32% { transform: scale(1); box-shadow: 0 0 0 12px rgba(16,185,129,0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16,185,129,0); } }
@keyframes hfaqOk { 0%, 28% { box-shadow: 0 0 0 0 rgba(16,185,129,0); background: rgba(16,185,129,0.05); }
    38%, 80% { box-shadow: 0 0 26px -4px rgba(16,185,129,0.45); background: rgba(16,185,129,0.14); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); background: rgba(16,185,129,0.05); } }

/* build: chat + changes meter. Both messages and every bar are fully visible in the
   base frame (also the frame a paused or reduced-motion diagram shows); the loops only
   add a send lift, a check pop and a highlight sweep on top. */
.hfaq-edit { padding: 0; border: 0; background: none; gap: 12px; }
.hfaq-edit .hfaq-chat { margin: 0; }
.hfaq-chat .me { animation: hfaqSend 6s cubic-bezier(.16,1,.3,1) infinite; }
.hfaq-chat .bot { border: 1px solid rgba(16,185,129,0.25); animation: hfaqReply 6s ease-in-out infinite; }
.hfaq-chat .bot svg { animation: hfaqPop 6s ease-in-out infinite; }
@keyframes hfaqSend { 0%, 6%, 100% { transform: none; } 3% { transform: translateY(-3px); } }
@keyframes hfaqReply { 0%, 18%, 60%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } 30%, 44% { box-shadow: 0 0 22px -4px rgba(16,185,129,0.5); } }
@keyframes hfaqPop { 0%, 22%, 36%, 100% { transform: none; } 28% { transform: scale(1.35); } }
.hfaq-meter { border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); background: #080a09; padding: 14px; display: grid; gap: 10px; }
.hfaq-meter-head { display: grid; gap: 2px; }
.hfaq-meter-head b, .hfaq-meter-row b { font-family: 'Space Grotesk'; font-size: 13px; font-weight: 700; color: var(--text); }
.hfaq-meter-head span { font-size: 12px; line-height: 1.45; color: var(--text-dim); }
.hfaq-bars { display: grid; grid-template-columns: minmax(0, 1fr) auto 2.2em; align-items: center; gap: 10px; }
.hfaq-bars-l { font-family: 'Space Grotesk'; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-dim); }
.hfaq-bars-t { display: flex; gap: 3px; width: 147px; }
.hfaq-bars-t i { flex: none; width: 7px; height: 16px; border-radius: 2px; background: var(--emerald);
    animation: hfaqSweep 4.5s ease-in-out infinite; animation-delay: calc(var(--i) * 0.07s); }
@keyframes hfaqSweep { 0%, 12%, 100% { background: var(--emerald); box-shadow: none; } 6% { background: #6ee7b7; box-shadow: 0 0 10px rgba(110,231,183,0.7); } }
.hfaq-bars-n { font-family: 'Space Grotesk'; font-size: 15px; font-weight: 700; color: var(--emerald); text-align: right; }
.hfaq-meter-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; }
.hfaq-meter-row span { grid-column: 1; font-size: 12px; line-height: 1.45; color: var(--text-dim); }
.hfaq-inf { grid-column: 2; grid-row: 1 / span 2; }
.hfaq-meter-row.paid { margin-top: 2px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.06); }
.hfaq-inf { position: relative; width: 52px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--emerald); }
.hfaq-inf svg { width: 30px; height: 30px; stroke-width: 2; }
.hfaq-inf i { position: absolute; inset: 0; border-radius: 999px; background: rgba(16,185,129,0.1); animation: hfaqGlow 3s ease-in-out infinite; }
@keyframes hfaqGlow { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

/* domain: URL swap, price tag, ownership key */
.hfaq-browser { border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); background: #0d100f; padding: 10px 12px; display: flex; align-items: center; gap: 12px; }
.hfaq-url { position: relative; flex: 1; min-width: 0; height: 32px; border-radius: 8px; background: rgba(255,255,255,0.04); }
.hfaq-url span { position: absolute; inset: 0; padding: 0 12px; }
/* base frame = own domain shown; the loop briefly shows the free subdomain before it */
.hfaq-url .u1 { opacity: 0; animation: hfaqD1 7s ease infinite; }
.hfaq-url .u2 { color: var(--emerald); font-weight: 600; animation: hfaqD2 7s ease infinite; }
@keyframes hfaqD1 { 0%, 40% { opacity: 0; } 46%, 80% { opacity: 1; } 86%, 100% { opacity: 0; } }
@keyframes hfaqD2 { 0%, 40% { opacity: 1; } 46%, 80% { opacity: 0; } 86%, 100% { opacity: 1; } }
.hfaq-dom-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hfaq-price { font-family: 'Space Grotesk'; font-size: 20px; font-weight: 700; color: var(--emerald); letter-spacing: -0.01em; }
.hfaq-dom-key { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); padding: 6px 12px; border-radius: 999px;
    border: 1px solid rgba(16,185,129,0.3); background: rgba(16,185,129,0.08); }
.hfaq-dom-key svg { width: 15px; height: 15px; color: var(--emerald); }

/* leave: fork */
.hfaq-fork { gap: 0; justify-items: center; text-align: center; }
.hfaq-fork-node { display: flex; align-items: center; gap: 8px; font-size: 12.5px; line-height: 1.35; color: var(--text); padding: 9px 12px; border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.03); text-align: left; }
.hfaq-fork-node svg { flex: none; width: 16px; height: 16px; color: var(--emerald); }
.hfaq-fork-node.ask { border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.08); }
.hfaq-fork-node.del svg { color: var(--hiw-amber); }
.hfaq-flow.v { position: relative; display: block; width: 2px; height: 18px; background: rgba(255,255,255,0.1); overflow: hidden; }
.hfaq-flow.v i { position: absolute; left: 0; top: -8px; width: 2px; height: 8px; background: var(--emerald); animation: hfaqDrop 2.4s linear infinite; }
@keyframes hfaqDrop { to { transform: translateY(26px); } }
.hfaq-fork-lines { width: 100%; height: 26px; display: block; }
.hfaq-fork-lines path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.hfaq-fork-lines .base { stroke: rgba(255,255,255,0.12); }
.hfaq-fork-lines .run { stroke: var(--emerald); stroke-dasharray: 14 120; stroke-dashoffset: 14; animation: hfaqRun 3.2s linear infinite; }
.hfaq-fork-lines .run.r { stroke: var(--hiw-amber); animation-delay: 1.6s; }
@keyframes hfaqRun { to { stroke-dashoffset: -120; } }
.hfaq-fork-ends { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hfaq-fork-ends .hfaq-fork-node { justify-content: center; }
.hfaq-fork-ends .keep { border-color: rgba(16,185,129,0.3); }
.hfaq-fork-ends .del { border-color: rgba(245,158,11,0.25); }
.hfaq-fork-key { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--emerald); }
.hfaq-fork-key svg { width: 15px; height: 15px; }

/* support: channel tiles */
.hfaq-sup { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hfaq-sup-tile { display: grid; justify-items: center; gap: 8px; padding: 16px 8px; border-radius: 14px; text-align: center;
    font-size: 12.5px; line-height: 1.35; color: var(--text); border: 1px solid rgba(16,185,129,0.25); background: rgba(16,185,129,0.06); }
.hfaq-sup-tile svg { width: 22px; height: 22px; color: var(--emerald); }
.hfaq-sup-tile.on { animation: hfaqGlowTile 4s ease-in-out infinite; }
.hfaq-sup-tile.on + .hfaq-sup-tile.on { animation-delay: 2s; }
.hfaq-sup-tile.off { color: var(--text-dim); border-color: rgba(245,158,11,0.22); background: rgba(245,158,11,0.04); }
.hfaq-sup-tile.off svg { color: var(--hiw-amber); }
.hfaq-sup-tile.off span { text-decoration: line-through; text-decoration-color: rgba(245,158,11,0.6); }
@keyframes hfaqGlowTile { 0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } 50% { box-shadow: 0 0 22px -4px rgba(16,185,129,0.45); } }

/* ================= meta, related, CTA ================= */
.hfaq-more.hiw-section { padding: 88px 0 72px; }
.hfaq-meta { margin: 0 0 48px; }
.hfaq-back { text-align: center; margin-top: 28px; font-size: 14px; }
.hfaq .hfaq-back a { color: var(--text-dim); text-decoration: none; }
.hfaq .hfaq-back a:hover { color: var(--emerald); }

/* ================= RESPONSIVE ================= */
@media (max-width: 1024px) {
    .hfaq-grid { grid-template-columns: 1fr; gap: 28px; }
    .hfaq-side { position: static; }
    .hfaq-viz { max-width: 560px; }
    .hfaq-journey { max-width: 620px; }
}
@media (max-width: 768px) {
    .hfaq { --hfaq-bar: 60px; }
    .hfaq-chips { padding: 10px 0; margin: 0 -20px; padding-left: 20px; padding-right: 20px; scroll-padding: 0 20px; }
    .hfaq .hfaq-chip { height: 40px; font-size: 13px; }
    .hfaq-group.hiw-section { padding: 64px 0; }
    .hfaq-side h2 { margin-bottom: 20px; }
    .hfaq-journey { padding: 18px 14px 14px; }
    .hfaq-j-step { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding-right: 0; }
    .hfaq-j-node { width: 40px; height: 40px; }
    .hfaq-j-rail { left: 19px; }
    .hfaq-j-pill { grid-column: 2; justify-self: start; margin-top: -4px; white-space: normal; }
    .hfaq-sup-tile { padding: 14px 6px; font-size: 12px; }
    .hfaq-more.hiw-section { padding: 64px 0 56px; }
}
@media (max-width: 380px) {
    .hfaq-fork-ends { grid-template-columns: 1fr; }
}

/* reduced motion: hiw.css already stops every .hiw animation; show final, fully lit frames */
@media (prefers-reduced-motion: reduce) {
    .hfaq-j-node { background: var(--emerald); color: var(--bg); }
    .hfaq-j-pulse { display: none; }
    .hfaq-j-rail { background: rgba(16,185,129,0.45); }
    .hfaq-url .u1 { opacity: 0; }
    .hfaq-url .u2 { opacity: 1; }
    .hfaq-fork-lines .run { stroke-dasharray: none; }
    .hfaq-fork-lines .run.r { stroke: rgba(245,158,11,0.6); }
    .hfaq-flow.v { background: var(--emerald); }
    .hfaq-flow.v i { display: none; }
}