/* =====================================================================================================================
   DashMage  -  the home page, below the hero (the hero and its animation are css/hero.css)

   Sections, top to bottom: months to minutes (the comparison beside the argument), how it works (four round steps
   joined by arrows), why it gets it right (the navy feature band), Ask AI (the live chat mock and its points), export
   anywhere (a stacked card deck on navy), live data (the twelve sources as a partner strip, one read running through
   the four checks into a dashboard that refreshes), built to be trusted (hexagon-footed cards on navy), themes (a
   sliding deck), sharing (four levels rising like bars), pricing, questions (numbered answers) and the closing call.
   ===================================================================================================================== */

/* ---- Months to minutes -------------------------------------------------------------------------------------------- */

.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.about-visual { position: relative; display: grid; gap: 0; padding: 0 0 40px 0; }
.speed-card { position: relative; border-radius: 4px; padding: 34px 36px 22px; }
.speed-card.old { background: var(--bg-2); margin-right: 70px; padding-bottom: 70px; }
.speed-card.new { background: var(--panel-bg); color: var(--panel-mute); margin: -46px 0 0 70px; box-shadow: var(--shadow-lg); border-left: 4px solid var(--accent); z-index: 1; }
.speed-top { display: flex; flex-direction: column; gap: 10px; padding-bottom: 18px; margin-bottom: 4px; border-bottom: 1px solid var(--line-2); }
.speed-card.new .speed-top { border-color: var(--panel-line-2); }
.speed-top span { font: 500 15px/1.3 var(--display); color: var(--ink-3); }
.speed-card.new .speed-top span { color: var(--panel-mute); }
.speed-top strong { font: 700 clamp(34px, 3.6vw, 50px)/1 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.speed-card.old .speed-top strong { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--bad); }
.speed-card.new .speed-top strong { color: var(--accent); }
.speed-card ul { list-style: none; }
.speed-card li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px dashed var(--line-2); font-size: 15px; color: var(--ink-2); }
.speed-card li:last-child { border-bottom: 0; }
.speed-card.new li { border-color: var(--panel-line); color: var(--panel-mute); }
.speed-card li em { font: normal 600 14.5px/1.5 var(--display); color: var(--ink); white-space: nowrap; }
.speed-card.new li em { color: #fff; }
.speed-card.new li:last-child em { color: var(--accent); }

.about-copy h2 { margin: 14px 0 22px; }
.about-copy > p { font-size: 17px; }
.bar-note { margin: 30px 0 26px; padding: 24px 30px; border-radius: 4px; background: var(--navy); color: #fff; font: 600 17.5px/1.45 var(--display); box-shadow: inset 4px 0 0 var(--accent); }
[data-theme="dark"] .bar-note { background: var(--navy-3); }
.about-for { font-size: 16px; margin-bottom: 14px; }
.check-list { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 28px; }
.check-list li { display: inline-flex; align-items: center; gap: 12px; font: 600 17px/1.3 var(--display); color: var(--ink); }
.check-list li::before { content: '\f00c'; font: 900 10px/1 'Font Awesome 6 Pro'; width: 22px; height: 24px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%); padding-bottom: 3px; }

.stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 90px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-strip div { position: relative; padding: 38px 30px 34px; }
.stat-strip div + div { border-left: 1px solid var(--line); }
.stat-strip div::before { content: ''; position: absolute; left: 30px; top: -1px; width: 40px; height: 3px; background: var(--accent); transition: width 0.5s var(--ease); }
.stat-strip div:hover::before { width: calc(100% - 60px); }
.stat-strip strong { display: block; font: 700 clamp(44px, 4.6vw, 64px)/1 var(--display); letter-spacing: -0.03em; color: var(--ink); margin-bottom: 12px; }
.stat-strip strong small { font-size: 0.5em; color: var(--accent); margin-left: 2px; }
.stat-strip span { font-size: 15px; line-height: 1.5; color: var(--ink-3); }


/* ---- How it works: four round steps, arrows between ----------------------------------------------------------- */

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.step-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; aspect-ratio: 1; margin: 0 -8px; padding: 42px 38px 0; border-radius: 50%; background: var(--card); overflow: hidden; transition: background 0.35s ease, box-shadow 0.35s ease; }
.section-alt .step-card { background: var(--card); }
.step-card:hover { box-shadow: 0 30px 60px -30px rgba(27, 30, 49, 0.35); z-index: 1; }
.step-card + .step-card::before { content: '\f061'; position: absolute; z-index: 2; left: 4px; top: 50%; transform: translate(-50%, -50%); width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font: 900 14px/1 'Font Awesome 6 Pro'; color: var(--ink); background: var(--card); border: 1px dashed var(--line-2); }
.step-icon { width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 14px; font-size: 30px; color: var(--accent); position: relative; }
.step-icon::after { content: ''; position: absolute; right: 4px; bottom: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); z-index: -1; }
.step-card h3 { font-size: 21px; margin-bottom: 10px; }
.step-card p { font-size: 13.5px; line-height: 1.55; color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; max-width: 240px; }
.step-no { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; display: flex; align-items: flex-start; justify-content: center; padding-top: 16px; font: 700 16px/1 var(--display); color: var(--ink); background: var(--bg-3); clip-path: polygon(0 34%, 50% 0, 100% 34%, 100% 100%, 0 100%); transition: background 0.35s ease, color 0.35s ease; }
.step-card:hover .step-no { background: var(--accent); color: #fff; }
.steps-foot { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 50px; font-size: 16px; color: var(--ink-3); }


/* ---- Why it gets it right: the navy feature band ------------------------------------------------------------- */

.band-art { position: absolute; z-index: -1; right: -120px; top: 40px; width: 620px; opacity: 0.045; filter: grayscale(1) brightness(3); pointer-events: none; }
.band-art img { width: 100%; }
.features-section .section-head h2 { color: #fff; }
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.feature { position: relative; display: flex; flex-direction: column; padding: 34px 28px 0; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--panel-line); overflow: hidden; transition: transform 0.4s var(--ease), background 0.35s ease; }
.feature::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: rgba(255, 255, 255, 0.05); }
.feature::after { content: ''; position: absolute; left: 0; top: 0; height: 8px; width: 0; background: var(--accent); transition: width 0.5s var(--ease); }
.feature:hover { transform: translateY(-6px); background: var(--panel-3); }
.feature:hover::after { width: 100%; }
.feature i { order: 1; align-self: flex-start; width: 52px; height: 58px; display: grid; place-items: center; font-size: 20px; color: var(--accent); background: rgba(255, 255, 255, 0.06); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); margin-bottom: 22px; transition: background 0.3s ease, color 0.3s ease; }
.feature:hover i { background: var(--accent); color: #fff; }
.feature h3 { order: 2; font-size: 20px; color: #fff; margin-bottom: 12px; }
.feature p { order: 3; font-size: 15px; line-height: 1.65; color: var(--panel-mute); margin-bottom: 26px; }
.feature-tag { order: 4; margin: auto -28px 0; padding: 16px 28px; background: rgba(0, 0, 0, 0.18); font: 600 13.5px/1.3 var(--display); color: #fff; }
.feature-tag::before { content: '*'; color: var(--accent); margin-right: 6px; font-size: 16px; }
.feature-ai { background: var(--accent); border-color: var(--accent); }
.feature-ai::before { background: rgba(0, 0, 0, 0.1); }
.feature-ai::after { background: var(--navy); }
.feature-ai i { background: rgba(255, 255, 255, 0.18); color: #fff; }
.feature-ai p { color: rgba(255, 255, 255, 0.88); }
.feature-ai .feature-tag { background: rgba(0, 0, 0, 0.14); }
.feature-ai .feature-tag::before { color: var(--navy); }
.feature-ai:hover { background: var(--accent-2); }


/* ---- Ask AI -------------------------------------------------------------------------------------------------- */

.ask-section { overflow: hidden; }
.ask-bg { position: absolute; inset: 0; z-index: -1; background: var(--bg-2); clip-path: polygon(0 58%, 22% 44%, 46% 64%, 74% 26%, 100% 42%, 100% 100%, 0 100%); }
.ask-section { isolation: isolate; }
.ask-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 80px; align-items: center; }
.ask-visual { position: relative; padding: 0 0 50px 50px; }
.ask-visual::before { content: ''; position: absolute; left: 0; top: 50px; bottom: 0; width: 72%; background: var(--navy); border-radius: 4px; }
.ask-mock { position: relative; height: 580px; }
.ask-stat { position: absolute; left: 0; bottom: 0; z-index: 3; width: 190px; background: var(--card); border-radius: 3px; box-shadow: var(--shadow-lg); overflow: hidden; }
.ask-stat b { display: block; padding: 20px 20px 0; font: 700 44px/1 var(--display); color: var(--ink); letter-spacing: -0.03em; }
.ask-stat b small { font-size: 0.45em; margin-left: 3px; color: var(--accent); }
.ask-stat span { display: block; padding: 6px 20px 16px; font-size: 14px; color: var(--ink-3); }
.ask-stat em { display: flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--accent); color: #fff; font: normal 600 13px/1.2 var(--display); }
.ask-copy h2 { margin: 14px 0 20px; }
.ask-lede { font-size: 16.5px; margin-bottom: 28px; }
.ask-points { list-style: none; display: grid; gap: 22px; margin-bottom: 34px; }
.ask-points li { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 18px; align-items: start; }
.ap-ico { position: relative; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 17px; box-shadow: 0 0 0 6px var(--accent-soft); }
.ask-points li:nth-child(odd) .ap-ico::before { content: ''; position: absolute; right: 100%; top: 50%; width: 60px; border-top: 2px solid var(--accent); margin-right: 6px; }
.ask-points li:nth-child(odd) .ap-ico::after { content: ''; position: absolute; right: calc(100% + 62px); top: calc(50% - 4px); width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.ask-points strong { display: block; font: 700 19px/1.3 var(--display); color: var(--ink); margin: 2px 0 4px; }
.ask-points p { font-size: 15px; line-height: 1.6; }
.ask-cta { margin-bottom: 22px; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-chips span { padding: 8px 12px; border-radius: 2px; background: var(--bg-2); border: 1px solid var(--line); font: 500 13.5px/1.2 var(--font); font-style: italic; color: var(--ink-2); }

/* The chat mock the section plays (heroanim.js mock -> askHTML). Styled here for the section, and in css/hero.css
   again, smaller, for the hero's act. */
.ask-mock .hq-panel { position: absolute; inset: 0; }


/* ---- Export anywhere: the navy band with a stacked card deck -------------------------------------------------- */

.export-section { padding-bottom: 110px; }
.xp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 70px; align-items: center; }
.xp-screen-wrap { position: relative; }
.xp-screen { position: relative; border-radius: 4px; overflow: hidden; background: #fff; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.8); }
.xp-bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--navy-4); color: #fff; font: 600 13.5px/1 var(--display); }
.xp-bar em { margin-left: auto; font: normal 700 10.5px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 8px; border-radius: 2px; background: rgba(61, 214, 140, 0.15); color: #3DD68C; }
.xp-bar em::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; animation: blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.2; } }
.xp-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 18px 18px 0; }
.xp-kpis div { padding: 14px 16px; border: 1px solid #E8E8E8; border-radius: 3px; box-shadow: inset 3px 0 0 var(--accent); }
.xp-kpis small { display: block; font: 600 11px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: #8A8C96; }
.xp-kpis b { display: block; margin: 8px 0 4px; font: 700 26px/1 var(--display); color: #1B1E31; letter-spacing: -0.02em; }
.xp-kpis em { font: normal 700 12px/1 var(--font); color: #1E9E52; }
.xp-charts { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; padding: 12px 18px 18px; }
.xp-bars, .xp-line { height: 170px; border: 1px solid #E8E8E8; border-radius: 3px; }
.xp-bars { display: flex; align-items: flex-end; gap: 8px; padding: 16px; }
.xp-bars i { flex: 1; height: var(--h); background: #1B1E31; border-radius: 1px 1px 0 0; transform-origin: bottom; }
.xp-bars i:nth-child(3), .xp-bars i:nth-child(7) { background: var(--accent); }
.export-section .reveal.in .xp-bars i { animation: barUp 0.9s var(--ease) both; animation-delay: calc(var(--i) * 70ms + 200ms); }
@keyframes barUp { from { transform: scaleY(0); } }
.xp-line { padding: 12px; }
.xp-line svg { width: 100%; height: 100%; }
.xp-line .area { fill: rgba(254, 89, 36, 0.14); }
.xp-line .ln { fill: none; stroke: var(--accent); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-dasharray: 400; stroke-dashoffset: 0; }
.export-section .reveal.in .xp-line .ln { animation: draw 1.6s var(--ease) 0.3s both; }
@keyframes draw { from { stroke-dashoffset: 400; } }
.xp-files { display: flex; gap: 8px; padding: 0 18px 18px; }
.xp-files span { flex: 1; text-align: center; padding: 9px 0; border-radius: 2px; font: 600 12px/1 var(--mono); color: #fff; background: #1B1E31; }
.xp-files .f-pbi { background: #C99A00; }
.xp-files .f-tab { background: #1F4E9E; }
.xp-files .f-pdf { background: #CE183D; }
.xp-files .f-png { background: #1E9E52; }
.xp-hub-label { position: absolute; right: -18px; bottom: -22px; display: inline-flex; align-items: center; gap: 10px; padding: 16px 22px; border-radius: 3px; background: var(--accent); color: #fff; font: 700 14.5px/1 var(--display); box-shadow: 0 20px 40px -20px rgba(254, 89, 36, 0.8); }

.xp-copy h2 { margin: 14px 0 20px; }
.xp-lede { font-size: 16px; margin-bottom: 34px; }
.xp-deck { display: flex; gap: 0; min-height: 330px; }
.xp-dest { position: relative; display: flex; flex-direction: column; flex: 0 0 72px; border: 1px solid var(--panel-line-2); background: var(--panel-2); transition: flex-basis 0.6s var(--ease), background 0.4s ease; overflow: hidden; }
.xp-dest + .xp-dest { margin-left: -1px; }
.xp-dest:nth-child(2) { margin-top: 26px; }
.xp-dest:nth-child(3) { margin-top: 52px; }
.xp-dest.open { flex: 1 1 auto; margin-top: 0; background: var(--panel-3); }
.xp-tab { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 24px; border: 0; background: none; cursor: pointer; color: #fff; transition: opacity 0.3s ease; }
.xp-tab .xp-num { font: 700 17px/1 var(--display); color: var(--panel-mute); }
.xp-tab-name { writing-mode: vertical-rl; font: 600 19px/1 var(--display); white-space: nowrap; }
.xp-tab:hover .xp-tab-name { color: var(--accent); }
.xp-dest.open .xp-tab { opacity: 0; pointer-events: none; }
.xp-body { padding: 30px 32px; min-width: 330px; opacity: 0; visibility: hidden; transition: opacity 0.35s ease 0.2s; }
.xp-dest.open .xp-body { opacity: 1; visibility: visible; }
.xp-top { display: flex; align-items: center; gap: 16px; padding-bottom: 22px; margin-bottom: 20px; border-bottom: 1px solid var(--panel-line-2); }
.xp-tile { width: 56px; height: 62px; flex-shrink: 0; display: grid; place-items: center; font-size: 24px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.xp-dest.pbi .xp-tile { background: #F2C811; color: #1F1A00; }
.xp-dest.tab .xp-tile { background: #1F4E9E; color: #fff; }
.xp-dest.pdf .xp-tile { background: #CE183D; color: #fff; }
.xp-name strong { display: block; font: 700 21px/1.2 var(--display); color: #fff; }
.xp-name span { font: 500 13px/1 var(--mono); color: var(--panel-mute); }
.xp-top .xp-num { margin-left: auto; font: 700 26px/1 var(--display); color: var(--accent); align-self: flex-start; }
.xp-body ul { list-style: none; display: grid; gap: 12px; margin-bottom: 24px; }
.xp-body li { position: relative; padding-left: 26px; font-size: 15.5px; color: var(--panel-mute); }
.xp-body li::before { content: '\f00c'; position: absolute; left: 0; top: 3px; font: 900 12px/1 'Font Awesome 6 Pro'; color: var(--accent); }
.xp-cloud { display: inline-flex; align-items: center; gap: 9px; font: 600 14.5px/1 var(--display); color: #fff; }
.xp-cloud i { color: var(--accent); }
.xp-cloud::after { content: '\e093'; font: 900 11px/1 'Font Awesome 6 Pro'; color: var(--accent); }
.xp-cloud.plain::after { display: none; }
.xp-nav { display: flex; align-items: center; gap: 18px; margin-top: 30px; }
.xp-rule { flex: 1; height: 1px; background: var(--panel-line-2); }
.xp-nav button { border: 0; background: none; color: #fff; font-size: 20px; cursor: pointer; padding: 4px; transition: color 0.2s ease, transform 0.2s ease; }
.xp-nav button:hover { color: var(--accent); }

.xp-race { display: grid; gap: 14px; margin-top: 110px; padding: 34px 36px; border: 1px solid var(--panel-line-2); border-radius: 4px; background: rgba(0, 0, 0, 0.14); }
.xp-lane { display: grid; grid-template-columns: 230px minmax(0, 1fr) 170px; gap: 26px; align-items: center; }
.xp-lane > span { font: 700 16px/1.3 var(--display); color: #fff; }
.xp-lane > span small { display: block; font: 400 13px/1.4 var(--font); color: var(--panel-mute); margin-top: 3px; }
.xp-lane > strong { font: 700 26px/1 var(--display); text-align: right; color: var(--panel-mute); white-space: nowrap; }
.xp-lane.old > strong { text-decoration: line-through; text-decoration-color: var(--bad); }
.xp-lane.new > strong { color: var(--accent); }
.xp-track { display: flex; gap: 4px; }
.xp-track i { flex: var(--f, 1); padding: 12px 10px; font: normal 600 12.5px/1.2 var(--display); color: var(--panel-mute); background: rgba(255, 255, 255, 0.06); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.xp-lane.new .xp-track i { flex: 0 0 auto; background: var(--accent); color: #fff; padding: 12px 16px; }
.xp-lane.new .xp-track i.rest { flex: 1; background: none; border: 1px dashed var(--panel-line-2); color: var(--panel-mute); text-align: left; }
.xp-lane.new .xp-track i.rest::before { content: '\f00c'; font: 900 11px/1 'Font Awesome 6 Pro'; color: #3DD68C; margin-right: 8px; }
.export-section .reveal.in .xp-lane.old .xp-track i { animation: laneIn 0.6s var(--ease) both; }
.export-section .reveal.in .xp-lane.old .xp-track i:nth-child(2) { animation-delay: 0.12s; }
.export-section .reveal.in .xp-lane.old .xp-track i:nth-child(3) { animation-delay: 0.24s; }
.export-section .reveal.in .xp-lane.old .xp-track i:nth-child(4) { animation-delay: 0.36s; }
.export-section .reveal.in .xp-lane.old .xp-track i:nth-child(5) { animation-delay: 0.48s; }
@keyframes laneIn { from { opacity: 0; transform: translateX(-12px); } }
.xp-foot { display: flex; align-items: center; justify-content: center; gap: 16px 30px; flex-wrap: wrap; margin-top: 50px; }
.xp-note { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--panel-mute); }
.xp-note i { color: var(--accent); }


/* ---- Live data: the partner strip, the checks and the refreshing dashboard ------------------------------------ */

.live-section { padding-bottom: 150px; background: linear-gradient(180deg, var(--bg) 0 70%, var(--bg-2) 70%); }
.ld-partners { padding: 56px 50px 50px; border-radius: 4px; background: var(--card); box-shadow: 0 40px 80px -40px rgba(27, 30, 49, 0.3); }
[data-theme="dark"] .ld-partners { border: 1px solid var(--line); }
.ld-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 60px; align-items: end; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.ld-head h2 { margin-top: 14px; }
.ld-head p { font-size: 16px; }
.ld-sources { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); }
.ld-src { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 124px; padding: 18px 10px; text-align: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background 0.35s ease; }
.ld-src:nth-child(6n) { border-right: 0; }
.ld-src:nth-child(n+7) { border-bottom: 0; }
.ld-src::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--c); transform: scaleX(0); transition: transform 0.45s var(--ease); }
.ld-logo { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 3px; font-size: 20px; color: var(--ink-3); background: var(--bg-2); transition: background 0.35s ease, color 0.35s ease, transform 0.35s var(--ease); }
.ld-nm { font: 600 14px/1.25 var(--display); color: var(--ink-3); transition: color 0.3s ease; }
.ld-src:hover .ld-logo, .ld-src.on .ld-logo { background: var(--c); color: #fff; }
.ld-src:hover .ld-nm, .ld-src.on .ld-nm { color: var(--ink); }
.ld-src.on { background: var(--bg-2); }
.ld-src.on::after { transform: scaleX(1); }
.ld-src.on .ld-logo { transform: translateY(-3px); }

.ld-flow { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); gap: 40px; align-items: center; margin-top: 40px; }
.ld-gate { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 22px; align-items: stretch; }
.ld-rail { position: relative; width: 4px; margin: 14px auto; background: var(--bg-3); border-radius: 2px; }
.ld-pk { position: absolute; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 2px; background: var(--accent); opacity: 0; box-shadow: 0 0 0 5px var(--accent-soft); }
.ld-stage.go .ld-pk.in { animation: pkDown 1s var(--ease) both; }
.ld-stage.go .ld-pk.out { animation: pkDown 0.9s var(--ease) 1.15s both; background: #1E9E52; box-shadow: 0 0 0 5px rgba(30, 158, 82, 0.15); }
@keyframes pkDown { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 14px); opacity: 0; } }
.ld-checks { list-style: none; display: grid; gap: 12px; }
.ld-checks li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 3px; border: 1px solid var(--line); background: var(--card); font: 600 15.5px/1.2 var(--display); color: var(--ink); transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.ld-checks i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--bg-2); color: var(--ink-3); font-size: 14px; transition: background 0.3s ease, color 0.3s ease; }
.ld-stage.go .ld-checks li { animation: chkOn 1.9s ease both; animation-delay: calc(0.35s + var(--k) * 0.2s); }
.ld-stage.go .ld-checks li i { animation: chkIco 1.9s ease both; animation-delay: calc(0.35s + var(--k) * 0.2s); }
@keyframes chkOn { 0% { border-color: var(--line); } 20%, 75% { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); } 100% { border-color: var(--line); } }
@keyframes chkIco { 0% { background: var(--bg-2); color: var(--ink-3); } 20%, 75% { background: var(--accent); color: #fff; } 100% { background: var(--bg-2); color: var(--ink-3); } }

.ld-dash { border-radius: 4px; background: var(--navy); color: var(--panel-mute); padding: 22px; box-shadow: 0 30px 60px -30px rgba(27, 30, 49, 0.6); }
.ld-dash-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.ld-via { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.ld-via small { display: block; font: 500 11.5px/1.2 var(--font); color: var(--panel-mute); }
.ld-via b { display: block; font: 700 16px/1.2 var(--display); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-logo.sm { width: 38px; height: 38px; font-size: 16px; background: var(--c); color: #fff; }
.ld-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 2px; font: 600 12px/1 var(--display); white-space: nowrap; background: rgba(61, 214, 140, 0.12); color: #3DD68C; transition: background 0.3s ease, color 0.3s ease; }
.ld-chip.run { background: rgba(254, 89, 36, 0.14); color: var(--accent-light); }
.ld-chip.run i { animation: spin 0.9s linear infinite; }
.ld-chip.held { background: rgba(255, 176, 32, 0.14); color: var(--amber); }
@keyframes spin { to { transform: rotate(360deg); } }
.ld-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ld-kpis div { padding: 12px 14px; background: rgba(255, 255, 255, 0.05); border-radius: 2px; border-top: 2px solid var(--accent); }
.ld-kpis small { display: block; font: 600 10.5px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--panel-mute); }
.ld-kpis b { display: block; margin: 8px 0 4px; font: 700 21px/1 var(--display); color: #fff; font-variant-numeric: tabular-nums; }
.ld-kpis b.bump { animation: bump 0.6s var(--ease); }
@keyframes bump { 30% { color: var(--accent); transform: translateY(-2px); } }
.ld-kpis em { font: normal 700 11.5px/1 var(--font); color: #3DD68C; }
.ld-spark { height: 70px; margin: 12px 0; }
.ld-spark svg { width: 100%; height: 100%; }
.ld-spark .area { fill: rgba(254, 89, 36, 0.15); }
.ld-spark .ln { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ld-spark.redraw .ln { stroke-dasharray: 600; animation: sparkDraw 0.9s var(--ease) both; }
@keyframes sparkDraw { from { stroke-dashoffset: 600; } to { stroke-dashoffset: 0; } }
.ld-log { border-top: 1px solid var(--panel-line); padding-top: 12px; }
.ld-log-head { display: flex; justify-content: space-between; font: 600 11px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--panel-mute); margin-bottom: 10px; }
.ld-every i { color: var(--accent); margin-right: 4px; }
.ld-log ul { list-style: none; display: grid; gap: 6px; }
.ld-log li { display: grid; grid-template-columns: 16px 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; color: var(--panel-mute); }
.ld-log li.fresh { animation: logIn 0.5s var(--ease) both; }
@keyframes logIn { from { opacity: 0; transform: translateY(-6px); } }
.ld-log li > span:nth-child(2) { font: 500 12px/1 var(--mono); color: #fff; }
.ld-log .m { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ld-log .t { font: 500 12px/1 var(--mono); }
.ld-log .ok { color: #3DD68C; }
.ld-log li.held i { color: var(--amber); }


/* ---- Built to be trusted: hexagon-footed cards on navy --------------------------------------------------------- */

.trust-section { padding: 120px 0 110px; }
.trust-section::after { content: ''; position: absolute; z-index: -1; right: 0; top: 0; bottom: 0; width: 34%; background: linear-gradient(90deg, var(--panel) 0%, transparent 100%), repeating-linear-gradient(-55deg, rgba(254, 89, 36, 0.07) 0 2px, transparent 2px 26px); opacity: 0.9; }
.trust-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 60px; align-items: start; }
.trust-copy { position: sticky; top: 130px; }
.trust-copy h2 { margin: 14px 0 18px; }
.trust-copy > p { font-size: 16.5px; margin-bottom: 30px; }
.ld-plans { display: grid; gap: 0; margin-bottom: 30px; border-top: 1px solid var(--panel-line-2); }
.ld-plans div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--panel-line-2); }
.ld-plans strong { font: 700 16px/1.3 var(--display); color: #fff; }
.ld-plans span { font-size: 14.5px; color: var(--panel-mute); }
.ld-plans .best strong { color: var(--accent); }
.ld-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.ld-pillar { position: relative; display: flex; flex-direction: column; padding: 32px 26px 0; background: var(--card); text-align: center; border-radius: 3px 3px 0 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 44px), 50% 100%, 0 calc(100% - 44px)); transition: transform 0.4s var(--ease); }
.ld-pillar:hover { transform: translateY(-6px); }
.ld-pillar h3 { font-size: 19px; margin-bottom: 12px; color: var(--ink) !important; }
.ld-pillar p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2) !important; margin-bottom: 20px; }
.ld-pi { position: relative; margin: auto -26px 0; height: 120px; display: flex; align-items: center; justify-content: center; background: var(--bg-2); clip-path: polygon(0 22%, 50% 0, 100% 22%, 100% calc(100% - 44px), 50% 100%, 0 calc(100% - 44px)); font-size: 26px; color: var(--ink-3); transition: color 0.3s ease, background 0.3s ease; }
.ld-pi::before { content: ''; position: absolute; right: 0; top: 0; width: 50%; height: 60%; background: rgba(27, 30, 49, 0.04); clip-path: polygon(0 0, 100% 36%, 100% 100%, 0 100%); }
.ld-pillar:hover .ld-pi { color: #fff; background: var(--accent); }
.ld-pi i { position: relative; margin-top: -8px; }


/* ---- Themes: the sliding deck ---------------------------------------------------------------------------------- */

.themes-section { overflow: hidden; }
.template-rail { overflow: hidden; }
.template-strip { display: flex; gap: 30px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 10px max(30px, calc((100vw - 1200px) / 2)) 40px; scrollbar-width: none; scroll-padding: 0 max(30px, calc((100vw - 1200px) / 2)); }
.template-strip::-webkit-scrollbar { display: none; }
.tmpl-card { position: relative; flex: 0 0 340px; scroll-snap-align: start; display: flex; flex-direction: column; border: 0; border-radius: 3px; background: var(--card); padding: 0; cursor: pointer; text-align: left; font: inherit; color: inherit; box-shadow: 0 20px 40px -30px rgba(27, 30, 49, 0.35); transition: transform 0.4s var(--ease), box-shadow 0.4s ease; }
.tmpl-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.tmpl-card .tmpl-thumb { position: relative; height: 210px; overflow: hidden; border-radius: 3px 3px 0 0; }
.tmpl-card .tmpl-meta { position: relative; padding: 44px 24px 0; }
.tmpl-card .tmpl-meta strong { position: absolute; left: 24px; right: 56px; top: -30px; display: flex; align-items: center; height: 60px; padding: 0 20px; background: var(--card); font: 700 20px/1.2 var(--display); color: var(--ink); box-shadow: 0 16px 30px -18px rgba(27, 30, 49, 0.45); }
.tmpl-card .tmpl-meta span { display: block; min-height: 72px; padding-bottom: 20px; font-size: 15px; line-height: 1.55; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.tmpl-go { display: flex; align-items: center; gap: 10px; padding: 18px 24px 20px; font: 600 15px/1 var(--display); color: var(--ink); transition: color 0.2s ease; }
.tmpl-go i { font-size: 11px; transition: transform 0.3s var(--ease); }
.tmpl-card:hover .tmpl-go { color: var(--accent); }
.tmpl-card:hover .tmpl-go i { transform: translate(3px, 3px); }
.tmpl-card .tmpl-lock { position: absolute; z-index: 2; right: 0; top: 180px; height: 60px; width: 76px; display: grid; place-items: center; padding-left: 16px; font: 700 11px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; background: var(--navy); color: #fff; clip-path: polygon(22% 0, 100% 0, 100% 100%, 22% 100%, 0 50%); }
.tmpl-card .tmpl-lock.free { background: var(--accent); }
.rail-nav { display: flex; align-items: center; justify-content: center; gap: 14px; }
.rail-nav .head-btn { margin-left: 16px; }


/* ---- Sharing: four levels, rising like bars ------------------------------------------------------------------- */

.share-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: end; }
.share-mode { position: relative; display: flex; flex-direction: column; padding: 30px 28px 32px; border-radius: 3px 3px 0 0; background: var(--bg-2); border-bottom: 4px solid var(--navy); transition: transform 0.4s var(--ease), background 0.35s ease; }
.share-mode:nth-child(1) { min-height: 300px; }
.share-mode:nth-child(2) { min-height: 340px; }
.share-mode:nth-child(3) { min-height: 380px; }
.share-mode:nth-child(4) { min-height: 420px; background: var(--navy); border-bottom-color: var(--accent); }
.share-mode:nth-child(4) h3 { color: #fff; }
.share-mode:nth-child(4) p { color: var(--panel-mute); }
[data-theme="dark"] .share-mode:nth-child(4) { background: var(--navy-3); }
.share-mode:hover { transform: translateY(-6px); }
.sm-no { font: 700 44px/1 var(--display); color: transparent; -webkit-text-stroke: 1.5px var(--line-2); margin-bottom: auto; }
.share-mode:nth-child(4) .sm-no { -webkit-text-stroke-color: rgba(255, 255, 255, 0.25); }
.share-mode .halo { width: 58px; height: 58px; display: grid; place-items: center; margin: 30px 0 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 21px; box-shadow: 0 0 0 8px var(--accent-soft); }
.share-mode h3 { font-size: 23px; margin-bottom: 10px; }
.share-mode p { font-size: 15px; line-height: 1.6; }


/* ---- Questions: numbered answers, the open one on grey with an orange number ------------------------------------ */

#HomePricing .section-head.center { margin-bottom: 50px; }
.faq-split { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.4fr); gap: 50px; align-items: start; }
.faq-side { position: sticky; top: 120px; }
.faq { counter-reset: faq; }
.faq details { counter-increment: faq; margin-bottom: 10px; padding: 0 26px 0 96px; position: relative; border: 1px solid var(--line); border-radius: 3px; background: var(--card); transition: background 0.35s ease, border-color 0.35s ease; }
.faq details::before { content: counter(faq, decimal-leading-zero); position: absolute; left: 24px; top: 20px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font: 700 16px/1 var(--display); color: var(--ink-3); background: var(--bg-2); transition: background 0.3s ease, color 0.3s ease; }
.faq details[open] { background: var(--bg-2); border-color: var(--bg-2); }
.faq details[open]::before { background: var(--accent); color: #fff; }
.faq summary { cursor: pointer; padding: 30px 0 28px; font: 600 18.5px/1.35 var(--display); color: var(--ink); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.faq details[open] summary { padding-bottom: 10px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '\2b'; font: 300 22px/1 'Font Awesome 6 Pro'; flex-shrink: 0; color: var(--ink); transition: transform 0.3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 40px 28px 0; font-size: 16px; line-height: 1.75; }
.faq-search { position: relative; display: block; margin: 0 0 14px; }
.faq-search i { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--ink-3); pointer-events: none; }
.faq-search input { width: 100%; height: 58px; padding: 0 48px 0 20px; border-radius: 3px; border: 1px solid var(--line); background: var(--card); font: 500 15.5px/1 var(--font); color: var(--ink); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.faq-search input::placeholder { color: var(--ink-3); }
.faq-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus); }
.faq-topics { display: grid; gap: 8px; }
.faq-topics button { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 3px; background: var(--card); cursor: pointer; text-align: left; font: 600 16px/1.2 var(--display); color: var(--ink); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.faq-topics button i { width: 22px; font-size: 16px; text-align: center; color: var(--accent); transition: color 0.2s ease; }
.faq-topics button span { flex: 1; min-width: 0; }
.faq-topics button em { font-style: normal; min-width: 28px; padding: 5px 8px; border-radius: 2px; text-align: center; font: 700 12px/1 var(--display); color: var(--ink-3); background: var(--bg-2); }
.faq-topics button:hover { border-color: var(--accent); }
.faq-topics button.on { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: inset 4px 0 0 var(--accent); }
.faq-topics button.on em { color: #fff; background: var(--accent); }
[data-theme="dark"] .faq-topics button.on { background: var(--navy-3); border-color: var(--navy-3); }
.faq-searching .faq-topics button { opacity: 0.55; }
.faq-more { display: grid; gap: 6px; margin-top: 18px; padding: 22px 22px; border-radius: 3px; background: var(--bg-2); }
.faq-more strong { font: 700 17px/1.3 var(--display); color: var(--ink); }
.faq-more span { font-size: 14.5px; line-height: 1.55; color: var(--ink-3); }
.faq-more a { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font: 600 15px/1 var(--display); color: var(--accent); cursor: pointer; }
.faq-more a i { font-size: 11px; }
.faq-empty { display: grid; justify-items: center; gap: 12px; padding: 50px 24px; border-radius: 3px; background: var(--bg-2); text-align: center; }
.faq-empty[hidden] { display: none; }
.faq-empty i { font-size: 28px; color: var(--accent); }
.faq-empty p { font-size: 16px; color: var(--ink-2); }
.faq.faq-in > details:not([hidden]) { animation: faqIn 0.45s var(--ease) both; }
.faq.faq-in > details:nth-of-type(n+2):not([hidden]) { animation-delay: 0.05s; }
@keyframes faqIn { from { opacity: 0; transform: translateY(10px); } }


/* ---- The closing call ------------------------------------------------------------------------------------------ */

.cta-band { position: relative; isolation: isolate; overflow: hidden; padding: 110px 0; background: var(--accent); color: #fff; }
.cta-art { position: absolute; z-index: -1; right: 4%; bottom: 0; display: flex; align-items: flex-end; gap: 18px; height: 100%; opacity: 0.16; }
.cta-art i { display: block; width: 64px; background: #fff; }
.cta-art i:nth-child(1) { height: 30%; } .cta-art i:nth-child(2) { height: 48%; } .cta-art i:nth-child(3) { height: 70%; } .cta-art i:nth-child(4) { height: 56%; } .cta-art i:nth-child(5) { height: 86%; }
.cta-band .wrap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 30px 70px; align-items: center; }
.cta-band .eyebrow { color: rgba(255, 255, 255, 0.86); }
.cta-band .eyebrow::before { background: #fff; }
.cta-band h2 { color: #fff; font-size: clamp(38px, 4.4vw, 62px); margin-top: 14px; }
.cta-band h2 em { color: var(--navy); }
.cta-band p { color: rgba(255, 255, 255, 0.9); font-size: 17.5px; margin-bottom: 28px; }
.cta-band .btn-primary { background: var(--navy); }
.cta-band .btn-primary:hover { background: #fff; color: var(--accent); box-shadow: none; }
[data-theme="dark"] .cta-band { background: #C8401A; }


/* ---- Responsive ------------------------------------------------------------------------------------------------ */

@media (max-width: 1180px) {
    .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 0; max-width: 760px; margin: 0 auto; }
    .step-card:nth-child(3)::before { display: none; }
    .ld-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ld-sources { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .ld-src:nth-child(6n) { border-right: 1px solid var(--line); }
    .ld-src:nth-child(4n) { border-right: 0; }
    .ld-src:nth-child(n+7) { border-bottom: 1px solid var(--line); }
    .ld-src:nth-child(n+9) { border-bottom: 0; }
}
@media (max-width: 1000px) {
    .about-grid, .ask-grid, .xp-grid, .trust-grid, .faq-split, .cta-band .wrap, .ld-head, .ld-flow { grid-template-columns: minmax(0, 1fr); }
    .about-grid { gap: 60px; }
    .about-copy { order: -1; }
    .ask-grid { gap: 60px; }
    .ask-points li:nth-child(odd) .ap-ico::before, .ask-points li:nth-child(odd) .ap-ico::after { display: none; }
    .trust-copy, .faq-side { position: static; }
    .faq-split { gap: 30px; }
    .ld-head { gap: 20px; }
    .xp-grid { gap: 60px; }
    .xp-screen-wrap { margin-right: 18px; }
    .share-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
    .share-mode:nth-child(n) { min-height: 0; }
    .xp-lane { grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; }
    .xp-lane .xp-track { grid-column: 1 / -1; grid-row: 2; }
    .xp-lane > strong { grid-row: 1; grid-column: 2; }
    .trust-section::after { display: none; }
    .faq-topics { display: flex; gap: 8px; overflow-x: auto; margin: 0 -30px; padding: 2px 30px 8px; scrollbar-width: none; }
    .faq-topics::-webkit-scrollbar { display: none; }
    .faq-topics button { width: auto; flex-shrink: 0; padding: 11px 14px; gap: 10px; font-size: 14.5px; }
    .faq-more { display: none; }
}
@media (max-width: 760px) {
    .steps { grid-template-columns: minmax(0, 1fr); max-width: 360px; gap: 18px; }
    .step-card { margin: 0; }
    .step-card + .step-card::before { display: grid; left: 50%; top: -9px; transform: translate(-50%, -50%) rotate(90deg); }
    .step-card:nth-child(3)::before { display: grid; }
    .stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 60px; }
    .stat-strip div { padding: 28px 18px 24px; }
    .stat-strip div::before { left: 18px; }
    .stat-strip div:nth-child(3) { border-left: 0; }
    .stat-strip div:nth-child(n+3) { border-top: 1px solid var(--line); }
    .ld-partners { padding: 36px 20px 24px; margin: 0 -8px; }
    .ld-sources { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ld-src { min-height: 104px; padding: 14px 6px; }
    .ld-src:nth-child(4n) { border-right: 1px solid var(--line); }
    .ld-src:nth-child(3n) { border-right: 0; }
    .ld-src:nth-child(n+9) { border-bottom: 1px solid var(--line); }
    .ld-src:nth-child(n+10) { border-bottom: 0; }
    .ld-logo { width: 40px; height: 40px; font-size: 17px; }
    .ld-nm { font-size: 12.5px; }
    .ld-pillars { grid-template-columns: minmax(0, 1fr); }
    .xp-deck { flex-direction: column; min-height: 0; }
    .xp-dest, .xp-dest.open { flex: 0 0 auto; margin: 0 !important; }
    .xp-dest + .xp-dest { margin-top: -1px !important; }
    .xp-tab { position: static; flex-direction: row; gap: 16px; padding: 18px 20px; width: 100%; }
    .xp-tab-name { writing-mode: horizontal-tb; font-size: 17px; }
    .xp-dest.open .xp-tab { display: none; }
    .xp-body { min-width: 0; padding: 24px 22px; display: none; }
    .xp-dest.open .xp-body { display: block; }
    .xp-race { padding: 24px 20px; margin-top: 80px; }
    .xp-lane.new .xp-track i.rest { display: none; }
    .xp-hub-label { right: -12px; font-size: 13px; padding: 13px 16px; }
}
@media (max-width: 640px) {
    .speed-card { padding: 26px 22px 16px; }
    .speed-card.old { margin-right: 26px; }
    .speed-card.new { margin: -30px 0 0 26px; }
    .speed-card li { font-size: 14px; }
    .bar-note { padding: 20px 22px; font-size: 16px; }
    .check-list { gap: 12px 20px; }
    .check-list li { font-size: 15.5px; }
    .feature-grid { grid-template-columns: minmax(0, 1fr); }
    .ask-visual { padding: 0 0 40px 18px; }
    .ask-mock { height: 540px; }
    .ask-stat { display: none; }
    .ask-stat b { font-size: 32px; padding: 14px 16px 0; }
    .ask-stat span { padding: 4px 16px 10px; font-size: 13px; }
    .ask-stat em { padding: 8px 16px; font-size: 12px; }
    .ask-visual { padding: 30px 0 30px 14px; }
    .share-modes { grid-template-columns: minmax(0, 1fr); }
    .tmpl-card { flex-basis: 290px; }
    .template-strip { gap: 20px; padding-left: 20px; padding-right: 20px; scroll-padding-left: 20px; }
    .rail-nav { flex-wrap: wrap; }
    .rail-nav .head-btn { margin: 8px 0 0; flex-basis: 100%; }
    .round-btn { width: 50px; height: 50px; }
    .faq details { padding: 0 18px 0 70px; }
    .faq details::before { left: 14px; top: 18px; width: 42px; height: 42px; font-size: 14px; }
    .faq summary { font-size: 16.5px; padding: 26px 0 24px; }
    .faq details p { padding-right: 0; font-size: 15px; }
    .faq-topics { margin: 0 -20px; padding: 2px 20px 8px; }
    .xp-kpis b { font-size: 20px; }
    .xp-bars, .xp-line { height: 120px; }
    .xp-deck { min-height: 360px; }
    .cta-art { display: none; }
}