/* card #1329: pricing pages below the plan cards (EN /pricing/, DE /de/preise/,
   ES /es/precios/), rebuilt in the How it works visual language (see hiw.css #1304,
   faq.css #1328). Everything is scoped under .hprc; no shared asset is touched.
   Rules: every text block and every diagram is fully readable at rest. Loops only add
   glow, colour or a moving highlight on top of a complete base frame, so a paused loop,
   prefers-reduced-motion or JS off all show the finished diagram. The one-shot bar
   growth starts only once pricing-hiw.js marks the chart as in view. Looping parts have
   fixed boxes and animate transform/opacity/colour only, so nothing shifts layout. */

.hprc { --hprc-card: #0b0d0c; --hprc-line: rgba(255,255,255,0.08); --hprc-nav: 73px;
    position: relative; overflow-x: clip; color: var(--text); }
.hprc [id] { scroll-margin-top: calc(var(--hprc-nav) + 20px); }
.hprc svg:not([width]) { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hprc-wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.hprc-sec { position: relative; padding: 112px 0; }
.hprc-sec + .hprc-sec { border-top: 1px solid var(--hprc-line); }
.hprc h2 { font-family: 'Newsreader', Georgia, serif; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
    font-size: clamp(32px, 4vw, 50px); color: var(--text); margin: 0 0 18px; }
.hprc h2 em { font-weight: 400; color: var(--emerald); }
/* card #1337: nav.js hyphenates h1-h6 on phones ("do-main"); pricing headings break only between words.
   A word longer than the line still falls back to the overflow-wrap rule nav.js sets, so nothing overflows. */
.hprc h2, .hprc h3 { -webkit-hyphens: manual; hyphens: manual; text-wrap: balance; }
.hprc h3 { font-family: 'Newsreader', Georgia, serif; font-weight: 700; color: var(--text); margin: 0; line-height: 1.25; }
.hprc p { margin: 0; }
.hprc a { transition: color .25s, background .25s, border-color .25s, transform .25s, box-shadow .25s; }
.hprc p a, .hprc li a { color: var(--emerald); text-decoration: underline; text-underline-offset: 3px; }
.hprc p a:hover, .hprc li a:hover { color: #34d399; }
.hprc strong { color: var(--text); font-weight: 600; }
.hprc-label { display: inline-block; font-family: 'Space Grotesk'; font-size: 11px; font-weight: 600; letter-spacing: 0.2em;
    text-transform: uppercase; color: var(--emerald); margin-bottom: 16px; }
.hprc-head { max-width: 760px; margin-bottom: 44px; }
.hprc-lead { font-size: 17px; line-height: 1.7; color: var(--text-dim); max-width: 640px; }
.hprc-note { font-size: 15px; line-height: 1.7; color: var(--text-dim); }
.hprc p.hprc-more { margin-top: 26px; font-size: 15px; line-height: 1.6; }
.hprc-more a { font-family: 'Space Grotesk'; font-weight: 600; }

/* ================= 1. FROM FREE TO YOUR OWN DOMAIN (eye-catching) ================= */
.hprc-path { isolation: isolate; overflow: hidden; padding-top: 104px; }
.hprc-path::before { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 60% 40%, #000 20%, transparent 75%); }
.hprc-aurora { position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(70px); }
.hprc-aurora.a1 { width: 560px; height: 420px; top: -100px; right: -80px; background: radial-gradient(circle, rgba(16,185,129,0.26), transparent 65%);
    animation: hprcDrift1 14s ease-in-out infinite alternate; }
.hprc-aurora.a2 { width: 480px; height: 380px; bottom: -160px; left: -120px; background: radial-gradient(circle, rgba(52,211,153,0.14), transparent 65%);
    animation: hprcDrift2 18s ease-in-out infinite alternate; }
@keyframes hprcDrift1 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-110px,70px,0) scale(1.12); } }
@keyframes hprcDrift2 { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(130px,-60px,0) scale(1.08); } }

.hprc-path-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.hprc-path-copy .answer-box { margin: 26px 0 18px; }
.hprc-path-copy .answer-box .answer-cta { text-decoration: none; }

.hprc-journey { position: relative; border-radius: 24px; border: 1px solid rgba(255,255,255,0.1); padding: 22px 22px 20px;
    background: linear-gradient(165deg, rgba(16,185,129,0.09), #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; }
.hprc-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); }

/* URL strip: both addresses always shown; the loop only lights them in turn */
.hprc-url { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); align-items: center; gap: 8px; margin-bottom: 20px; }
.hprc-url span.u { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; height: 36px; padding: 0 8px; border-radius: 10px;
    font-family: 'Space Grotesk'; font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    background: #0d100f; border: 1px solid rgba(255,255,255,0.1); color: var(--text); }
.hprc-url span.u svg { width: 13px; height: 13px; flex: none; color: var(--emerald); }
.hprc-url .ua { animation: hprcUrlA 7.2s ease-in-out infinite; }
.hprc-url .ub { border-color: rgba(16,185,129,0.45); animation: hprcUrlB 7.2s ease-in-out infinite; }
.hprc-url .arr { width: 24px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--emerald); }
.hprc-url .arr svg { width: 22px; height: 22px; animation: hprcNudge 7.2s ease-in-out infinite; }
@keyframes hprcUrlA { 0%, 100% { box-shadow: none; } 18%, 40% { box-shadow: 0 0 0 1px rgba(16,185,129,0.35), 0 0 22px -6px rgba(16,185,129,0.6); } }
@keyframes hprcUrlB { 0%, 55%, 100% { box-shadow: none; background: #0d100f; } 68%, 90% { box-shadow: 0 0 0 1px rgba(16,185,129,0.6), 0 0 30px -4px rgba(16,185,129,0.7); background: rgba(16,185,129,0.12); } }
@keyframes hprcNudge { 0%, 45%, 70%, 100% { transform: none; } 55% { transform: translateX(5px); } }

.hprc-j-track { position: relative; }
.hprc-j-rail { position: absolute; left: 21px; top: 30px; bottom: 30px; width: 2px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
.hprc-j-rail i { position: absolute; left: 0; top: 0; width: 2px; height: 30%; border-radius: 2px;
    background: linear-gradient(transparent, var(--emerald), transparent); animation: hprcRail 7.2s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes hprcRail { 0% { transform: translateY(-100%); } 100% { transform: translateY(340%); } }
.hprc-j-list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hprc-j-step { position: relative; z-index: 1; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 14px;
    padding: 12px 14px 12px 0; border-radius: 16px; }
.hprc-j-step::before { content: ''; position: absolute; inset: 0 0 0 -10px; z-index: -1; border-radius: 16px; border: 1px solid transparent;
    animation: hprcRow 7.2s ease-in-out infinite; animation-delay: calc(var(--s) * 2.4s); }
@keyframes hprcRow { 0%, 34%, 100% { background: transparent; border-color: transparent; }
    6%, 26% { background: rgba(16,185,129,0.06); border-color: rgba(16,185,129,0.22); } }
.hprc-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.4); color: var(--emerald);
    animation: hprcNode 7.2s ease-in-out infinite; animation-delay: calc(var(--s) * 2.4s); }
.hprc-j-node svg { width: 19px; height: 19px; }
/* highlight = tint + glow only; the glyph stays light green on dark in every frame, so it is never
   swallowed by a mid-interpolation background */
@keyframes hprcNode { 0%, 34%, 100% { background: #0d100f; color: var(--emerald); border-color: rgba(16,185,129,0.4); box-shadow: none; }
    6%, 26% { background: #0f3a2b; color: #a7f3d0; border-color: var(--emerald); box-shadow: 0 0 0 6px rgba(16,185,129,0.14), 0 0 24px rgba(16,185,129,0.5); } }
.hprc-j-txt { min-width: 0; display: grid; gap: 3px; }
.hprc-j-txt b { font-family: 'Space Grotesk'; font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.3; overflow-wrap: anywhere; }
.hprc-j-txt span { font-size: 13.5px; color: var(--text-dim); line-height: 1.45; }
.hprc-j-pill { font-family: 'Space Grotesk'; font-size: 12px; font-weight: 600; color: var(--emerald); white-space: nowrap;
    padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(16,185,129,0.28); background: rgba(16,185,129,0.08); }
.hprc-j-step.is-paid .hprc-j-pill { color: #050505; background: var(--emerald); border-color: var(--emerald); }

/* ================= 2. WHAT'S INCLUDED ================= */
.hprc-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; }
.hprc-tile { position: relative; border-radius: 22px; border: 1px solid var(--hprc-line); background: var(--hprc-card); padding: 26px 26px 24px; overflow: hidden; }
.hprc-tile.is-us { border-color: rgba(16,185,129,0.38); background: linear-gradient(165deg, rgba(16,185,129,0.13), rgba(16,185,129,0.02) 55%, #0b0d0c); }
.hprc-tile h3 { font-family: 'Space Grotesk'; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 14px; }
.hprc-tile-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px !important; }
.hprc-tile-price b { font-family: 'Space Grotesk'; font-size: 32px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); line-height: 1.1; }
.hprc-tile.is-us .hprc-tile-price b { color: var(--emerald); }
.hprc-tile-price span { font-family: 'Space Grotesk'; font-size: 15px; font-weight: 600; color: var(--text-dim); }
.hprc-tile > p:last-child { font-size: 14.5px; line-height: 1.65; color: var(--text-dim); }

.hprc-chart { border-radius: 22px; border: 1px solid var(--hprc-line); background: var(--hprc-card); padding: 26px 28px; margin-bottom: 22px; }
.hprc-chart-t { font-family: 'Space Grotesk'; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 18px !important; }
.hprc-bars { display: grid; gap: 14px; }
.hprc-bar-row { display: grid; grid-template-columns: minmax(150px, 0.34fr) minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.hprc-bar-l { font-size: 14.5px; color: var(--text); line-height: 1.4; }
.hprc-bar { position: relative; display: block; height: 14px; border-radius: 999px; background: rgba(255,255,255,0.05); overflow: hidden; }
.hprc-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 999px; background: rgba(235,235,235,0.32); transform-origin: left center; }
.hprc-bar-row.is-best .hprc-bar i { background: linear-gradient(90deg, #0d8a64, var(--emerald) 60%, #34d399); box-shadow: 0 0 18px rgba(16,185,129,0.45); }
.hprc-bar-row.is-best .hprc-bar i::after { content: ''; position: absolute; inset: 0; border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent); background-size: 40% 100%; background-repeat: no-repeat;
    animation: hprcShine 3.6s ease-in-out infinite; }
@keyframes hprcShine { 0% { background-position: -60% 0; } 60%, 100% { background-position: 160% 0; } }
.hprc-bar-row > b { font-family: 'Space Grotesk'; font-size: 17px; font-weight: 700; color: var(--text); min-width: 64px; text-align: right; white-space: nowrap; }
.hprc-bar-row.is-best > b { color: var(--emerald); }
.hprc-save { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px !important; padding: 8px 14px; border-radius: 999px;
    font-family: 'Space Grotesk'; font-size: 14px; font-weight: 700; color: var(--emerald); border: 1px solid rgba(16,185,129,0.3); background: rgba(16,185,129,0.08); }
.hprc-save i { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); flex: none; animation: hprcPing 2.4s ease-out infinite; }
@keyframes hprcPing { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.55); } 80%, 100% { box-shadow: 0 0 0 10px rgba(16,185,129,0); } }
.hprc-chart-foot { margin-top: 14px !important; font-size: 14px; line-height: 1.65; color: var(--text-dim); }
/* one-shot growth, only after pricing-hiw.js saw the chart enter the viewport */
.hprc-chart.is-in .hprc-bar i { animation: hprcGrow 1.1s cubic-bezier(.16,1,.3,1) both; }
.hprc-chart.is-in .hprc-bar-row.is-best .hprc-bar i { animation-delay: .25s; }
@keyframes hprcGrow { from { transform: scaleX(0.04); } to { transform: none; } }

.hprc-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hprc-plan { position: relative; border-radius: 22px; border: 1px solid var(--hprc-line); background: var(--hprc-card); padding: 30px; overflow: hidden; }
.hprc-plan.paid { border-color: rgba(16,185,129,0.35); background: linear-gradient(165deg, rgba(16,185,129,0.1), rgba(16,185,129,0.02) 50%, #0b0d0c); }
.hprc-plan h3 { font-size: 23px; margin-bottom: 20px; }
.hprc-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hprc-checks li { position: relative; padding-left: 34px; font-size: 15px; line-height: 1.6; color: var(--text-dim); }
.hprc-checks li::before { content: ''; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
    background: rgba(16,185,129,0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }

/* ================= 3. HOW CHANGES WORK ================= */
.hprc-chg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.hprc-box { position: relative; border-radius: 22px; border: 1px solid var(--hprc-line); background: var(--hprc-card); padding: 26px; }
.hprc-box h3 { font-size: 21px; margin-bottom: 18px; }
.hprc-chat { display: flex; flex-direction: column; gap: 12px; justify-content: center;
    background: linear-gradient(165deg, rgba(16,185,129,0.07), #0b0d0c 60%); }
.hprc-msg { max-width: 92%; padding: 12px 15px; border-radius: 16px; font-size: 14px; line-height: 1.5; }
.hprc-msg.me { align-self: flex-end; background: var(--emerald); color: #04130d; font-weight: 500; border-bottom-right-radius: 5px;
    animation: hprcSend 6s ease-in-out infinite; }
.hprc-msg.bot { align-self: flex-start; background: #121614; color: var(--text); border: 1px solid rgba(16,185,129,0.25); border-bottom-left-radius: 5px;
    display: flex; gap: 9px; align-items: flex-start; animation: hprcReply 6s ease-in-out infinite; }
.hprc-msg.bot svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--emerald); stroke-width: 2.6; }
@keyframes hprcSend { 0%, 10%, 100% { transform: none; } 5% { transform: translateY(-3px); } }
@keyframes hprcReply { 0%, 22%, 70%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } 34%, 56% { box-shadow: 0 0 24px -4px rgba(16,185,129,0.55); } }
.hprc-meter { display: grid; gap: 16px; }
.hprc-meter-row { display: grid; gap: 8px; }
.hprc-meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hprc-meter-top span { font-size: 13.5px; color: var(--text-dim); }
.hprc-meter-top b { font-family: 'Space Grotesk'; font-size: 15px; font-weight: 700; color: var(--text); }
.hprc-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.hprc-dots i { width: 14px; height: 14px; border-radius: 4px; background: var(--emerald); opacity: .85;
    animation: hprcDot 4.5s ease-in-out infinite; animation-delay: calc(var(--d) * 0.12s); }
@keyframes hprcDot { 0%, 12%, 100% { background: var(--emerald); box-shadow: none; } 6% { background: #a7f3d0; box-shadow: 0 0 10px rgba(110,231,183,0.75); } }
.hprc-unl { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.hprc-unl svg { width: 64px; height: 34px; flex: none; }
.hprc-unl svg .base { stroke: rgba(16,185,129,0.55); stroke-width: 3; }
.hprc-unl svg .run { stroke: #6ee7b7; stroke-width: 3.4; stroke-dasharray: 18 102; animation: hprcRun 2.8s linear infinite; }
@keyframes hprcRun { to { stroke-dashoffset: -120; } }
.hprc-unl b { font-family: 'Space Grotesk'; font-size: 30px; font-weight: 700; color: var(--emerald); letter-spacing: -0.01em; line-height: 1.1; }
.hprc-box p { font-size: 14.5px; line-height: 1.7; color: var(--text-dim); }
.hprc-box.paid { border-color: rgba(16,185,129,0.35); background: linear-gradient(165deg, rgba(16,185,129,0.1), rgba(16,185,129,0.02) 55%, #0b0d0c); }

/* ================= 4. DOMAIN OPTIONS ================= */
.hprc-dom { display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 0.8fr); align-items: stretch; }
.hprc-dom-opts { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: 1fr; gap: 14px; }
.hprc-dom-opt { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 14px; align-items: center; border-radius: 18px;
    border: 1px solid var(--hprc-line); background: var(--hprc-card); padding: 18px 20px; }
.hprc-dom-opt .ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    color: var(--emerald); background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.25); }
.hprc-dom-opt .ic svg { width: 20px; height: 20px; }
.hprc-dom-opt h3 { font-family: 'Space Grotesk'; font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.hprc-dom-opt p { font-size: 14px; line-height: 1.55; color: var(--text-dim); }
.hprc-dom-wire { position: relative; }
.hprc-dom-wire svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hprc-dom-wire path { stroke: rgba(16,185,129,0.4); stroke-width: 2; fill: none; vector-effect: non-scaling-stroke; }
.hprc-dom-wire path.run { stroke: #6ee7b7; stroke-width: 2.4; stroke-dasharray: 6 14; animation: hprcFlow 1.6s linear infinite; }
@keyframes hprcFlow { to { stroke-dashoffset: -40; } }
.hprc-dom-wire.v { display: none; }
.hprc-hub { align-self: center; position: relative; border-radius: 24px; padding: 30px 28px; text-align: center; overflow: hidden;
    border: 1px solid rgba(16,185,129,0.4); background: radial-gradient(ellipse at 50% 0%, rgba(16,185,129,0.2), rgba(16,185,129,0.03) 60%), #0b0d0c;
    animation: hprcHub 3.2s ease-in-out infinite; }
@keyframes hprcHub { 0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } 50% { box-shadow: 0 0 40px -6px rgba(16,185,129,0.45); } }
.hprc-hub .t { font-family: 'Space Grotesk'; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px !important; }
.hprc-hub .m { font-family: 'Space Grotesk'; font-size: 26px; font-weight: 700; color: var(--emerald); line-height: 1.2; letter-spacing: -0.01em; }
.hprc-hub .a { margin-top: 8px !important; font-family: 'Space Grotesk'; font-size: 15px; font-weight: 600; color: var(--text-dim); }
.hprc-key { display: flex; align-items: center; gap: 12px; margin-top: 26px; padding: 16px 20px; border-radius: 16px;
    border: 1px solid rgba(16,185,129,0.25); background: rgba(16,185,129,0.06); }
.hprc-key svg { width: 24px; height: 24px; flex: none; color: var(--emerald); }
.hprc-key p { font-size: 16px; line-height: 1.55; color: var(--text); font-weight: 500; }

/* ================= 5 + 6. STEP TRACKS (custom build, cancel) ================= */
.hprc-trackbox { position: relative; margin-bottom: 30px; }
.hprc-track { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.hprc-track-rail { position: absolute; left: 12.5%; right: 12.5%; top: 25px; height: 2px; background: rgba(255,255,255,0.1); border-radius: 2px; overflow: hidden; }
.hprc-track-rail i { position: absolute; top: 0; left: 0; height: 2px; width: 30%; background: linear-gradient(90deg, transparent, var(--emerald), transparent);
    animation: hprcRailX 6.4s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes hprcRailX { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
.hprc-track > li { position: relative; z-index: 1; text-align: center; }
.hprc-tnode { width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-family: 'Space Grotesk'; font-size: 15px; font-weight: 700; background: #0d100f; color: var(--emerald); border: 1px solid rgba(16,185,129,0.4);
    animation: hprcTNode 6.4s ease-in-out infinite; animation-delay: calc(var(--s) * 1.6s); }
@keyframes hprcTNode { 0%, 30%, 100% { background: #0d100f; color: var(--emerald); border-color: rgba(16,185,129,0.4); box-shadow: none; }
    6%, 22% { background: #0f3a2b; color: #a7f3d0; border-color: var(--emerald); box-shadow: 0 0 0 6px rgba(16,185,129,0.14), 0 0 24px rgba(16,185,129,0.5); } }
.hprc-tcard { border-radius: 18px; border: 1px solid var(--hprc-line); background: var(--hprc-card); padding: 18px 18px 20px; height: calc(100% - 68px); }
.hprc-track > li.is-end .hprc-tcard { border-color: rgba(16,185,129,0.35); background: linear-gradient(165deg, rgba(16,185,129,0.1), #0b0d0c 60%); }
.hprc-tcard h3 { font-family: 'Space Grotesk'; font-size: 16px; font-weight: 700; margin-bottom: 8px; line-height: 1.35; }
.hprc-tcard p { font-size: 14px; line-height: 1.6; color: var(--text-dim); }
.hprc-shop-p { font-size: 16px; line-height: 1.8; color: var(--text-dim); max-width: 860px; margin-bottom: 26px !important; }
.hprc-svc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hprc-svc > div { border-radius: 20px; border: 1px solid var(--hprc-line); background: var(--hprc-card); padding: 24px 26px; }
.hprc-svc > div.is-us { border-color: rgba(16,185,129,0.35); }
.hprc-svc h3 { font-family: 'Space Grotesk'; font-size: 17px; font-weight: 700; margin-bottom: 14px; line-height: 1.35; }
.hprc-svc dl { margin: 0; display: grid; gap: 10px; }
.hprc-svc dt { font-family: 'Space Grotesk'; font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.hprc-svc dd { margin: 2px 0 0; font-size: 15px; line-height: 1.55; color: var(--text); }

/* ================= PARTNERS + COMPARE ================= */
.hprc-split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.hprc-split .partner-box { margin: 0; }
.hprc .answer-box p, .hprc .partner-box p { margin-bottom: 12px; }
.hprc .answer-box p:last-child { margin-bottom: 0; }
.hprc .partner-box .partner-note { margin: 14px 0 0; }
.hprc-split .partner-box .partner-cta { text-decoration: none; }
.hprc-cmp { border-radius: 20px; border: 1px solid var(--hprc-line); background: var(--hprc-card); padding: 26px 28px; }
.hprc-cmp p { font-size: 16px; line-height: 1.8; color: var(--text-dim); }

/* ================= FAQ ================= */
.hprc-faq-grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 64px; align-items: start; }
.hprc-faq-side { position: sticky; top: 112px; }
.hprc-faq-side .tp-line { margin-top: 18px; color: var(--text-dim); }
.hprc-faq-side .updated-line { line-height: 1.6; }
.hprc-faq { display: grid; gap: 12px; }
.hprc-faq details { border-radius: 16px; border: 1px solid var(--hprc-line); background: var(--hprc-card); transition: border-color .3s, background .3s; }
.hprc-faq details[open] { border-color: rgba(16,185,129,0.3); background: linear-gradient(165deg, rgba(16,185,129,0.06), #0b0d0c 60%); }
.hprc-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; }
.hprc-faq summary::-webkit-details-marker { display: none; }
.hprc-faq summary h3 { font-size: 19px; line-height: 1.35; }
.hprc-faq summary::after { content: ''; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 14px no-repeat;
    transition: transform .35s var(--ease); }
.hprc-faq details[open] summary::after { transform: rotate(45deg); }
.hprc-faq summary:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; border-radius: 16px; }
.hprc-faq .hprc-a { overflow: hidden; }
.hprc-faq .hprc-a p { padding: 0 24px 22px; font-size: 15px; line-height: 1.75; color: var(--text-dim); }

/* ================= RELATED ================= */
.hprc-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hprc-related a { display: block; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--hprc-line); background: var(--hprc-card);
    color: var(--text); text-decoration: none; font-size: 14px; line-height: 1.45; }
.hprc-related a:hover { border-color: var(--border-hover); color: var(--emerald); transform: translateY(-2px); }
.hprc + .article-cta { margin-top: 24px; }

/* pause loops while off screen (class set by pricing-hiw.js) */
.hprc .is-paused, .hprc .is-paused *, .hprc .is-paused::before, .hprc .is-paused *::before, .hprc .is-paused *::after { animation-play-state: paused !important; }

/* ================= RESPONSIVE ================= */
/* two-column hero with a narrow journey card: stack the URL strip so the subdomain is never clipped */
@media (min-width: 1025px) and (max-width: 1200px) {
    .hprc-url { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .hprc-url .arr { margin: 0 auto; transform: rotate(90deg); height: 22px; }
}
@media (max-width: 1024px) {
    .hprc-path-grid, .hprc-split, .hprc-faq-grid { grid-template-columns: 1fr; gap: 36px; }
    .hprc-faq-side { position: static; }
    .hprc-chg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hprc-chat { grid-column: 1 / -1; }
    .hprc-track { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
    .hprc-track-rail { display: none; }
    .hprc-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .hprc-wrap { padding: 0 20px; }
    .hprc-sec { padding: 72px 0; }
    .hprc-path { padding-top: 64px; }
    .hprc-head { margin-bottom: 30px; }
    .hprc-lead { font-size: 16px; }
    .hprc-journey { padding: 16px 14px; border-radius: 20px; }
    .hprc-url { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .hprc-url .arr { margin: 0 auto; transform: rotate(90deg); height: 22px; }
    .hprc-j-step { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding-right: 4px; }
    .hprc-j-node { width: 40px; height: 40px; }
    .hprc-j-rail { left: 19px; }
    .hprc-j-pill { grid-column: 2; justify-self: start; white-space: normal; }
    .hprc-tiles, .hprc-lists, .hprc-chg-grid, .hprc-svc { grid-template-columns: 1fr; }
    .hprc-tile, .hprc-plan, .hprc-box, .hprc-chart, .hprc-cmp { padding: 22px 20px; }
    .hprc-bar-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
    .hprc-bar-l { grid-column: 1 / -1; font-size: 14px; }
    .hprc-dom { grid-template-columns: 1fr; }
    .hprc-dom-wire.h { display: none; }
    .hprc-dom-wire.v { display: block; height: 56px; }
    .hprc-dom-opts { grid-auto-rows: auto; }
    .hprc-dom-opt { padding: 16px; }
    .hprc-hub { padding: 24px 20px; }
    .hprc-hub .m { font-size: 22px; }
    .hprc-key { align-items: flex-start; padding: 14px 16px; }
    .hprc-key p { font-size: 15px; }
    .hprc-track { grid-template-columns: 1fr; gap: 14px; }
    .hprc-track > li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; text-align: left; align-items: start; }
    .hprc-tnode { width: 44px; height: 44px; margin: 4px 0 0; font-size: 14px; }
    .hprc-tcard { height: auto; padding: 16px 16px 18px; }
    .hprc-faq summary { padding: 18px; }
    .hprc-faq summary h3 { font-size: 17px; }
    .hprc-faq .hprc-a p { padding: 0 18px 20px; }
    .hprc-related { grid-template-columns: 1fr; }
    .hprc-aurora.a1 { width: 340px; height: 300px; right: -140px; }
    .hprc-aurora.a2 { width: 300px; height: 260px; left: -140px; }
}

/* reduced motion: no loops, no growth; every diagram shows its complete base frame */
@media (prefers-reduced-motion: reduce) {
    .hprc *, .hprc *::before, .hprc *::after { animation: none !important; transition: none !important; }
    .hprc-j-rail i, .hprc-track-rail i, .hprc-dom-wire path.run, .hprc-unl svg .run { display: none; }
    .hprc-j-step.is-paid::before { background: rgba(16,185,129,0.06); border-color: rgba(16,185,129,0.22); }
    .hprc-j-step.is-paid .hprc-j-node, .hprc-track > li.is-end .hprc-tnode { background: #0f3a2b; color: #a7f3d0; border-color: var(--emerald); }
    .hprc-url .ub { background: rgba(16,185,129,0.12); }
}