/* Resources pages: shared layout + interactive widgets (loaded after styles.css) */
.res-body { background: var(--page); }
.res-main { padding: 150px 40px 0; }
.res-wrap { max-width: 1166px; margin: 0 auto; }
.res-crumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--ink-2); margin-bottom: 28px; }
.res-crumb a { color: var(--ink-2); } .res-crumb a:hover { color: var(--ember-text); } .res-crumb b { color: var(--ink); font-weight: 600; }
.res-hero { max-width: 820px; margin-bottom: 44px; }
.res-hero .contact-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.res-hero-icon { width: 16px; height: 16px; }
.res-hero .h-lg { font-size: 56px; margin: 0 0 16px; }
.res-lede { font-size: 20px; line-height: 1.45; color: var(--ink-2); margin: 0 0 18px; max-width: 700px; }
.res-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 12px; font-weight: 600; }
.res-meta span { padding: 5px 10px; border-radius: 999px; background: var(--tile); color: var(--ember-text); }
.res-meta .res-date { background: transparent; color: var(--ink-2); font-weight: 500; }
.res-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; padding-bottom: 120px; }
.res-article { min-width: 0; }
.res-article h2 { font-family: var(--font-dm-sans); font-weight: 700; font-size: 26px; line-height: 1.2; letter-spacing: -0.015em; margin: 44px 0 14px; color: var(--ink); }
.res-article p, .res-article li { font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.res-article p { margin: 0 0 16px; } .res-article ul, .res-article ol { margin: 0 0 18px; padding-left: 22px; } .res-article li { margin-bottom: 8px; }
.res-article a:not(.btn) { color: var(--ember-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(51,64,255,.35); } .res-article a:not(.btn):hover { text-decoration-color: currentColor; }
.res-article .btn, .res-aside .btn { text-decoration: none; }
.res-article strong { color: var(--ink); }
.res-table { width: 100%; border-collapse: collapse; margin: 8px 0 24px; background: var(--surface); border-radius: 16px; overflow: hidden; font-size: 15px; }
.res-table th, .res-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; } .res-table th { background: var(--dark); color: #fff; font-weight: 600; } .res-table tr:last-child td { border-bottom: 0; }
/* widget card */
.res-widget { background: var(--surface); border-radius: 28px; padding: 32px; margin-bottom: 8px; box-shadow: 0 30px 60px -40px rgba(20,22,43,.35); }
/* article prose sits in one card, same treatment as the widget card, instead of directly on the grid background */
.res-prose { background: var(--surface); border-radius: 28px; padding: 32px; margin: 28px 0 8px; box-shadow: 0 30px 60px -40px rgba(20,22,43,.35); }
.res-prose > :first-child { margin-top: 0 !important; } .res-prose > :last-child { margin-bottom: 0 !important; }
.res-prose h2 { margin-top: 36px; }
.res-prose .res-table { border: 1px solid var(--line); }                 /* table shares the card colour, so give it an edge */
.res-prose .res-cta { background: var(--tile); margin-top: 32px; }       /* closing CTA inside the card: tile, not surface-on-surface */
.res-prose .res-card-dark { margin: 28px 0; }
.res-widget h2 { margin: 0 0 8px; } .res-widget-intro { margin: 0 0 22px !important; font-size: 15px !important; }
.res-widget-note { margin: 18px 0 0 !important; font-size: 13px !important; color: var(--ink-3) !important; }
.w-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.w-field { display: grid; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.w-field span { display: flex; justify-content: space-between; } .w-field span b { color: var(--ember-text); }
.w-field input[type=number], .w-field select { font: 500 16px var(--font-dm-sans); color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; width: 100%; box-sizing: border-box; }
.w-field input:focus, .w-field select:focus { outline: none; border-color: var(--color-ember); box-shadow: 0 0 0 4px rgba(51,64,255,.14); }
.w-field input[type=range] { width: 100%; accent-color: var(--color-ember); }
.w-checks { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.w-checks label { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; color: var(--ink); } .w-checks input { width: 18px; height: 18px; accent-color: var(--color-ember); }
.w-result { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }
.w-result > div { background: var(--color-midnight); color: #fff; border-radius: 16px; padding: 16px 18px; }
.w-result small { display: block; font-size: 12px; opacity: .75; margin-bottom: 6px; } .w-result b { font-family: "Archivo", var(--font-dm-sans); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; }
.w-quiz { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: q; }
.w-quiz li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; background: var(--surface); border-radius: 14px; font-size: 15px !important; font-weight: 500; color: var(--ink) !important; margin: 0 !important; }
.w-yn { display: flex; gap: 6px; flex: none; } .w-yn button { font: 600 13px var(--font-dm-sans); padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.w-yn button.is-on { background: var(--color-ember); border-color: var(--color-ember); color: #fff; }
.w-verdict { margin-top: 18px; padding: 18px 20px; border-radius: 16px; background: var(--tile); color: var(--ink); font-size: 16px !important; font-weight: 500; }
.w-verdict.is-yes { background: var(--color-midnight); color: #fff; } .w-verdict.is-no { background: var(--ok-bg); color: var(--ok-fg); }
.w-progress { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; } .w-progress div { height: 100%; width: 0; background: var(--color-ember); border-radius: 4px; transition: width .3s; }
.w-progress-label { margin: 8px 0 14px !important; font-size: 13px !important; font-weight: 600; color: var(--ink) !important; }
.w-check { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 8px; }
.w-check li { margin: 0 !important; } .w-check label { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--surface); border-radius: 12px; font-size: 15px; line-height: 1.4; color: var(--ink); cursor: pointer; }
.w-check input { width: 18px; height: 18px; accent-color: var(--color-ember); margin-top: 2px; flex: none; } .w-check input:checked + span { text-decoration: line-through; color: var(--ink-3); }
.w-play { margin: 18px 0 0 !important; padding: 0 0 0 0 !important; list-style: none; display: grid; gap: 8px; counter-reset: p; }
.w-play li { counter-increment: p; display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; background: var(--surface); border-radius: 12px; font-size: 15px !important; color: var(--ink) !important; margin: 0 !important; }
.w-play li::before { content: counter(p); flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--color-ember); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.w-steps { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.w-step { font: inherit; text-align: left; padding: 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; display: grid; gap: 4px; transition: border-color .2s, background .2s; }
.w-step b { font-family: "Archivo", var(--font-dm-sans); font-weight: 800; font-size: 18px; color: var(--ember-text); } .w-step span { font-size: 12px; font-weight: 600; color: var(--ink); }
.w-step.is-on { background: var(--color-midnight); border-color: var(--color-midnight); } .w-step.is-on span { color: #fff; } .w-step.is-on b { color: #98A0FF; }
.w-step-detail { margin-top: 14px; padding: 16px 18px; border-radius: 14px; background: var(--surface); font-size: 15px; color: var(--ink); line-height: 1.5; } .w-step-detail p { margin: 0 !important; font: inherit !important; color: inherit !important; }
/* faq + cta + aside */
.res-faq { background: var(--surface); border-radius: 14px; margin-bottom: 8px; padding: 0 18px; }
.res-faq summary { list-style: none; cursor: pointer; padding: 16px 0; font-weight: 600; font-size: 16px; color: var(--ink); display: flex; justify-content: space-between; gap: 16px; }
.res-faq summary::-webkit-details-marker { display: none; } .res-faq { overflow: hidden; } .res-faq summary { position: relative; padding-right: 32px; }
.res-faq p { margin: 0 0 16px; font-size: 15px; }
.res-faq summary h3 { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }
.res-cta { margin-top: 44px; padding: 32px; border-radius: 24px; background: var(--surface); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.res-cta h2 { margin: 6px 0 8px; } .res-cta p { margin: 0; max-width: 520px; }
.res-aside { position: sticky; top: 110px; display: grid; gap: 16px; }
.res-card { background: var(--surface); border-radius: 20px; padding: 22px; }
.res-card-title { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ember-text); }
.res-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .res-list a { font-size: 14px; font-weight: 500; color: var(--ink); } .res-list a:hover { color: var(--ember-text); }
.res-list li.is-current a { color: var(--ember-text); font-weight: 700; }
.res-card-dark { background: var(--color-midnight); color: #fff; } .res-card-dark .res-card-title { color: var(--color-sulfur); } .res-card-dark p { margin: 0 0 14px; font-size: 14px; color: rgba(255,255,255,.8); }
@media (max-width: 1024px) {
  .res-main { padding: 110px 18px 0; } .res-hero .h-lg { font-size: 36px; } .res-lede { font-size: 17px; }
  .res-grid { grid-template-columns: 1fr; gap: 24px; padding-bottom: 80px; } .res-aside { position: static; }
  .res-widget { padding: 20px; border-radius: 20px; } .res-prose { padding: 20px; border-radius: 20px; margin-top: 22px; } .res-prose h2 { margin-top: 28px; } .w-grid, .w-checks, .w-result { grid-template-columns: 1fr; } .w-steps { grid-template-columns: repeat(3, 1fr); }
  .res-article h2 { font-size: 22px; } .res-article p, .res-article li { font-size: 16px; }
  .res-table { display: block; overflow-x: auto; }
}

/* ---- v3: SEO/interactivity layer ---- */
.res-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; } .res-progress span { display: block; height: 100%; width: 0; background: var(--color-ember); }
.res-areas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.res-areas-label { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-right: 4px; }
.res-areas button { font: 600 12px var(--font-dm-sans); padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.res-areas button:hover { border-color: var(--color-ember); color: var(--ember-text); } .res-areas button.is-on { background: var(--color-ember); border-color: var(--color-ember); color: #fff; }
.res-areas .res-date { font-size: 12px; font-weight: 500; color: var(--ink-2); margin-left: auto; }
.res-answer { background: var(--color-midnight); color: #fff; border-radius: 22px; padding: 26px 30px; margin: 0 0 14px; }
.res-answer-label { margin: 0 0 8px !important; font-size: 11px !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-sulfur) !important; }
.res-answer p { color: #fff !important; font-size: 18px !important; line-height: 1.5 !important; margin: 0 !important; font-weight: 500; }
.res-answer-fr { margin-top: 12px !important; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); font-size: 15px !important; color: rgba(255,255,255,.82) !important; font-weight: 400 !important; }
.res-local { background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px; padding: 14px 18px; font-size: 15px !important; line-height: 1.55 !important; margin: 0 0 24px !important; color: var(--ink) !important; min-height: 24px; }
.res-local-pin { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ember-text); margin-right: 10px; vertical-align: 1px; }
.res-local-pin::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-ember); box-shadow: 0 0 0 3px rgba(51,64,255,.18); }
.w-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.w-act { font: 600 13px var(--font-dm-sans); padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink) !important; cursor: pointer; text-decoration: none !important; transition: border-color .15s, background .15s; }
.w-act:hover { border-color: var(--ink); } .w-act.is-done { background: var(--ok-bg); border-color: var(--ok-fg); color: var(--ok-fg) !important; }
.w-act.is-primary { background: var(--color-ember); border-color: var(--color-ember); color: #fff !important; } .w-act.is-primary:hover { background: #2733D6; }
.res-keys { margin: 28px 0 8px; padding: 20px 24px; border-left: 4px solid var(--color-ember); background: var(--surface); border-radius: 0 18px 18px 0; }
.res-keys-title { margin: 0 0 10px !important; font-size: 11px !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ember-text) !important; }
.res-keys ul { margin: 0 !important; padding-left: 18px !important; } .res-keys li { font-size: 15px !important; margin-bottom: 6px !important; color: var(--ink) !important; }
.res-searches ul { list-style: none; margin: 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 8px; }
.res-searches li { margin: 0 !important; }
.res-searches a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--line); font-size: 14px !important; font-weight: 500; color: var(--ink) !important; text-decoration: none !important; transition: border-color .15s, color .15s; }
.res-searches a::before { content: ""; width: 14px; height: 14px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233340FF' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat; }
.res-searches a:hover { border-color: var(--color-ember); color: var(--ember-text) !important; }
.res-author { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; margin-top: 28px; padding: 22px 24px; background: var(--surface); border-radius: 18px; }
.res-author-mark { flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--dark); color: #fff; font: 800 22px "Archivo", var(--font-dm-sans); display: flex; align-items: center; justify-content: center; }
.res-author > div:nth-child(2) { flex: 1 1 320px; } .res-author p { margin: 0 !important; font-size: 14px !important; line-height: 1.5 !important; } .res-author-meta { margin-top: 6px !important; font-size: 12px !important; color: var(--ink-3) !important; }
.res-share { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; padding-top: 14px; border-top: 1px solid var(--line); }
.res-share span { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-right: 6px; }
.res-share a, .res-share button { font: 600 12px var(--font-dm-sans); padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink) !important; cursor: pointer; text-decoration: none !important; }
.res-share a:hover, .res-share button:hover { border-color: var(--ink); } .res-share button.is-done { background: var(--ok-bg); border-color: var(--ok-fg); color: var(--ok-fg) !important; }
.res-pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.res-pn a { display: grid; gap: 4px; padding: 16px 18px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line); text-decoration: none !important; color: var(--ink) !important; transition: border-color .15s; }
.res-pn a:hover { border-color: var(--color-ember); } .res-pn small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ember-text); } .res-pn b { font-size: 15px; font-weight: 600; } .res-pn-next { text-align: right; }
.res-toc { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: t; }
.res-toc a { display: block; padding: 6px 10px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--ink-2); line-height: 1.35; border-left: 2px solid transparent; }
.res-toc a:hover { color: var(--ember-text); } .res-toc a.is-on { color: var(--ember-text); font-weight: 700; background: var(--tile); border-left-color: var(--color-ember); border-radius: 0 8px 8px 0; }
.res-card-more { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--ember-text); }
.res-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none; gap: 10px; padding: 10px 88px calc(10px + env(safe-area-inset-bottom)) 14px; /* right gap leaves room for the chat bubble */ background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .25s; }
.res-bar .btn { flex: 1; justify-content: center; } .res-bar.is-on { transform: none; }
/* hub */
.hub-hero { max-width: 900px; margin-bottom: 36px; }
.hub-search { display: flex; align-items: center; gap: 14px; margin: 24px 0 14px; }
.hub-search input { flex: 1; font: 500 17px var(--font-dm-sans); color: var(--ink); background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px; padding: 16px 22px; min-width: 0; }
.hub-search input:focus { outline: none; border-color: var(--color-ember); box-shadow: 0 0 0 4px rgba(51,64,255,.14); }
.hub-count { font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.hub-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.hub-filters button { display: inline-flex; align-items: center; gap: 8px; font: 600 13px var(--font-dm-sans); padding: 9px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
.hub-filters button svg { width: 15px; height: 15px; } .hub-filters button.is-on { background: var(--dark); border-color: var(--ink); color: #fff; }
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hub-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--surface); border-radius: 22px; border: 1.5px solid transparent; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.hub-card:hover { border-color: var(--color-ember); transform: translateY(-2px); }
.hub-card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hub-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ember-text); } .hub-kicker svg { width: 14px; height: 14px; }
.hub-tool { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: var(--tile); color: var(--ink); white-space: nowrap; }
.hub-card b { font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; } .hub-desc { font-size: 14px; line-height: 1.5; color: var(--ink-2); flex: 1; }
.hub-more { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ember-text); } .hub-more svg { width: 14px; height: 14px; }
.hub-empty { padding: 32px; text-align: center; background: var(--surface); border-radius: 18px; font-size: 16px; color: var(--ink-2); }
.hub-cta { margin: 40px 0 120px; }
@media (max-width: 1024px) {
  .res-bar { display: flex; } .res-pn { grid-template-columns: 1fr; } .res-pn-next { text-align: left; }
  .res-answer { padding: 20px; border-radius: 18px; } .res-answer p { font-size: 16px !important; } .res-areas .res-date { margin-left: 0; width: 100%; }
  .hub-grid { grid-template-columns: 1fr; } .hub-search { flex-direction: column; align-items: stretch; } .hub-cta { margin-bottom: 80px; } .res-card-toc { display: none; }
}
@media (min-width: 1025px) and (max-width: 1280px) { .hub-grid { grid-template-columns: 1fr 1fr; } }

/* ---- v5: pricing page ---- */
.price-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.price-jump a { font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 999px; background: var(--surface); border: 1.5px solid var(--line); color: var(--ink); } .price-jump a:hover { border-color: var(--color-ember); color: var(--ember-text); }
.price-guide { background: var(--surface); border-radius: 22px; padding: 26px 30px; margin: 0 0 40px; }
.price-guide h2 { margin: 0 0 14px; font: 700 22px/1.2 var(--font-dm-sans); letter-spacing: -0.01em; color: var(--ink); }
.price-guide ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.price-guide li { display: grid; grid-template-columns: 1.2fr 1fr; gap: 20px; padding: 14px 16px; border-radius: 14px; background: var(--page); font-size: 15px; line-height: 1.45; }
.price-guide li b { color: var(--ink); font-weight: 600; } .price-guide li span { color: var(--ember-text); font-weight: 700; }
.price-group { margin-bottom: 44px; }
.price-group h2 { margin: 0 0 8px; font: 700 26px/1.2 var(--font-dm-sans); letter-spacing: -0.015em; color: var(--ink); }
.price-group-intro { margin: 0 0 20px; max-width: 760px; font-size: 16px; line-height: 1.55; color: var(--ink-2); }
.price-who { margin: -6px 0 4px; font-size: 14px; line-height: 1.45; color: var(--ink-2); min-height: 40px; } .price-card.is-featured .price-who { color: rgba(255,255,255,.78); }
.price-not { margin: -4px 0 8px; font-size: 13px; line-height: 1.4; color: var(--ink-3); } .price-not b { font-weight: 700; color: inherit; } .price-card.is-featured .price-not { color: rgba(255,255,255,.6); }
.price-addons td:last-child { font-weight: 700; color: var(--ink); white-space: nowrap; }
.price-included { list-style: none; margin: 0 0 8px !important; padding: 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.price-included li { display: flex; gap: 10px; align-items: flex-start; margin: 0 !important; font-size: 15px !important; color: var(--ink) !important; } .price-included svg { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--ember-text); }
.price-steps { list-style: none; margin: 0 0 8px !important; padding: 0 !important; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; counter-reset: s; }
.price-steps li { counter-increment: s; margin: 0 !important; padding: 18px; border-radius: 16px; background: var(--surface); display: grid; gap: 6px; font-size: 14px !important; line-height: 1.5 !important; color: var(--ink-2) !important; }
.price-steps li::before { content: counter(s); width: 26px; height: 26px; border-radius: 50%; background: var(--color-ember); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.price-steps b { color: var(--ink); font-size: 15px; }
@media (max-width: 1024px) { .price-guide li { grid-template-columns: 1fr; gap: 6px; } .price-included { grid-template-columns: 1fr; } .price-steps { grid-template-columns: 1fr; } .price-who { min-height: 0; } }
.price-included + .res-widget { margin-top: 36px; }

/* plan picker widget */
.w-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.w-plan { font: inherit; text-align: left; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; display: grid; gap: 4px; transition: border-color .2s, background .2s; }
.w-plan b { font-size: 15px; font-weight: 700; color: var(--ink); } .w-plan span { font: 800 18px "Archivo", var(--font-dm-sans); color: var(--ember-text); letter-spacing: -0.02em; }
.w-plan.is-on { background: var(--color-midnight); border-color: var(--color-midnight); } .w-plan.is-on b { color: #fff; } .w-plan.is-on span { color: var(--color-sulfur); }
.w-plan-inc { list-style: none; margin: 16px 0 0 !important; padding: 0 !important; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
.w-plan-inc li { margin: 0 !important; padding-left: 24px; position: relative; font-size: 14px !important; line-height: 1.45 !important; color: var(--ink) !important; }
.w-plan-inc li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233340FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat; }
.w-compare { margin: 16px 0 0 !important; font-size: 13px !important; color: var(--ink-3) !important; }
.price-compare td b { color: var(--ember-text); }
@media (max-width: 1024px) { .w-plans, .w-plan-inc { grid-template-columns: 1fr; } }

/* scroll-reveal "How it works" (port of ScrollRevealContentA) */
.sr { width: 100vw; margin: 48px 0 0 calc(50% - 50vw); }
.sr-track { height: 260vh; position: relative; }
.sr-sticky { position: sticky; top: 0; height: auto; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 104px 0 24px; box-sizing: border-box; }
.sr-inner { width: 90%; max-width: 1340px; margin: 0 auto; display: flex; gap: 64px; align-items: center; }
.sr-points { flex: 1 1 50%; display: flex; flex-direction: column; justify-content: center; gap: 28px; min-width: 0; }
.sr-title { margin: 0 auto 40px !important; }
.sr-point { display: flex; flex-direction: column; }
.sr-num { margin: 0 0 10px 20px !important; font: 800 22px/1 "Archivo", var(--font-dm-sans); color: var(--ink) !important; opacity: .35; transition: opacity .3s; }
.sr-row { display: flex; }
.sr-bar { position: relative; width: 40px; flex: none; }
.sr-bar::before, .sr-bar i { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 100%; transform: translateX(-50%); background: var(--ink-a12); border-radius: 1px; }
.sr-bar i { height: 0; background: var(--color-ember); }
.sr-text { padding-left: 16px; padding-bottom: 6px; opacity: .45; transition: opacity .3s; }
.sr-text h3 { margin: 0 0 6px; font: 600 22px/1.2 var(--font-dm-sans); letter-spacing: -0.01em; color: var(--ink); }
.sr-text p { margin: 0 !important; max-width: 440px; font-size: 16px !important; line-height: 1.45 !important; color: var(--ink-2) !important; }
.sr-point.is-on .sr-num, .sr-point.is-on .sr-text { opacity: 1; }
.sr-media { flex: 1 1 50%; position: relative; height: min(62vh, 560px); min-width: 0; }
.sr-img { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; opacity: 0; transform: translateY(10px); transition: opacity .4s ease, transform .4s ease; pointer-events: none; }
.sr-img.is-on { transform: none; }
.sr-img.is-on { opacity: 1; }
.sr-caption { position: absolute; right: 0; bottom: -28px; font-size: 12px; color: var(--ink-3); }
@media (max-width: 1024px) {
  .sr { margin-left: calc(50% - 50vw); }
  .sr-track { height: auto; } .sr-sticky { position: static; height: auto; padding-top: 0; }
  .sr-inner { flex-direction: column; gap: 24px; padding: 8px 0; }
  .sr-media { display: none; }
  .sr-point.is-on .sr-bar i, .sr-bar i { height: 100% !important; } .sr-num, .sr-text { opacity: 1 !important; }
}

/* drawn visuals for the how-it-works steps */
.vis { width: min(100%, 560px); position: relative; font-family: var(--font-dm-sans); }
.vis-card { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; padding: 22px; background: #fff; border-radius: 24px; border: 1.5px solid #DFE2F5; box-shadow: 0 40px 80px -50px rgba(20,22,43,.45); }
.vis-cal { background: var(--color-pumice); border-radius: 16px; padding: 16px; }
.vis-cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 13px; } .vis-cal-head b { color: var(--color-midnight); font-weight: 700; } .vis-cal-head span { font-size: 11px; font-weight: 700; color: var(--color-ember); background: #EEF0FF; padding: 4px 8px; border-radius: 999px; }
.vis-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px 4px; text-align: center; font-size: 12px; }
.vis-cal-grid s, .vis-cal-grid i { text-decoration: none; font-style: normal; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--color-midnight); font-weight: 600; }
.vis-cal-grid s { color: #8A8F9E; font-weight: 700; font-size: 10px; } .vis-cal-grid i.is-dim { color: #C3C6D1; } .vis-cal-grid i.is-pick { background: var(--color-ember); color: #fff; box-shadow: 0 0 0 4px rgba(51,64,255,.18); }
.vis-side { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.vis-label { margin: 0 !important; font-size: 11px !important; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--color-ember) !important; }
.vis-plan { background: var(--color-midnight); color: #fff; border-radius: 14px; padding: 14px 16px; display: grid; gap: 2px; } .vis-plan b { font-size: 16px; } .vis-plan span { font-size: 13px; color: var(--color-sulfur); font-weight: 600; }
.vis-ticks { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 8px; } .vis-ticks li { margin: 0 !important; display: flex; align-items: center; gap: 8px; font-size: 13px !important; color: var(--color-midnight) !important; } .vis-ticks svg { width: 14px; height: 14px; color: #17753F; flex: none; } .vis-ticks b { margin-left: 2px; }
.vis-browser { background: #fff; border-radius: 20px; border: 1.5px solid #DFE2F5; overflow: hidden; box-shadow: 0 40px 80px -50px rgba(20,22,43,.45); }
.vis-bar { display: flex; align-items: center; gap: 6px; padding: 12px 14px; border-bottom: 1px solid #ECEDF3; background: #FAFAFC; } .vis-bar i { width: 9px; height: 9px; border-radius: 50%; background: #E1E3EA; } .vis-bar span { margin-left: auto; margin-right: auto; font-size: 11px; color: #6B7080; background: #fff; border: 1px solid #ECEDF3; border-radius: 999px; padding: 4px 14px; display: inline-flex; align-items: center; gap: 6px; } .vis-bar em { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
.vis-page { padding: 18px; display: grid; gap: 14px; }
.vis-hero { background: var(--color-midnight); border-radius: 12px; padding: 22px 20px; display: grid; gap: 10px; }
.vis-line { height: 12px; border-radius: 6px; background: rgba(255,255,255,.85); } .vis-line.w60 { width: 60%; } .vis-line.w40 { width: 40%; height: 8px; background: rgba(255,255,255,.4); }
.vis-btn { width: 96px; height: 26px; border-radius: 999px; background: var(--color-ember); margin-top: 6px; }
.vis-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .vis-cards div { height: 54px; border-radius: 10px; background: var(--color-pumice); border: 1px solid #ECEDF3; position: relative; } .vis-cards div::after { content: ""; position: absolute; left: 10px; right: 30%; bottom: 10px; height: 6px; border-radius: 3px; background: #DADCE3; }
.vis-clock { margin-top: 14px; background: var(--color-midnight); color: #fff; border-radius: 16px; padding: 14px 18px; }
.vis-clock-row { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,.6); font-weight: 600; margin-bottom: 8px; } .vis-clock-row b { color: var(--color-sulfur); }
.vis-clock-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,.15); position: relative; } .vis-clock-track i { position: absolute; left: 0; top: 0; height: 100%; width: 100%; border-radius: 2px; background: var(--color-ember); } .vis-clock-track i::after { content: ""; position: absolute; right: -6px; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #fff; transform: translateY(-50%); box-shadow: 0 0 0 4px rgba(51,64,255,.35); }
.vis-clock-foot { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; } .vis-clock-foot b { font: 800 22px "Archivo", var(--font-dm-sans); } .vis-clock-foot span { font-size: 12px; color: rgba(255,255,255,.7); }
.vis-monitor { padding: 18px; display: grid; gap: 12px; }
.vis-mon-head { display: flex; justify-content: space-between; font-size: 13px; } .vis-mon-head b { color: var(--color-midnight); } .vis-mon-head span { font-weight: 800; color: #17753F; }
.vis-spark { width: 100%; height: 56px; display: block; } .vis-spark polyline { fill: none; stroke: var(--color-ember); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.vis-mon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .vis-mon-grid div { background: var(--color-pumice); border-radius: 10px; padding: 10px; display: grid; gap: 2px; } .vis-mon-grid small { font-size: 10px; color: #6B7080; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } .vis-mon-grid b { font-size: 12px; color: var(--color-midnight); }
.vis-tag { position: absolute; right: -14px; top: -22px; background: var(--color-ember); color: #fff; border-radius: 14px; padding: 12px 16px; display: grid; gap: 2px; box-shadow: 0 20px 40px -20px rgba(51,64,255,.6); } .vis-tag b { font: 800 18px "Archivo", var(--font-dm-sans); } .vis-tag span { font-size: 11px; opacity: .85; }

/* features grid (port of FeaturesGrid) */
.fg { margin: 56px 0 8px; }
.fg-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.fg-head h2 { margin: 0 0 14px !important; font-size: 34px !important; letter-spacing: -0.02em; }
.fg-head p { margin: 0 !important; font-size: 18px !important; color: var(--ink-2) !important; }
.fg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fg-card { background: var(--surface); border: 1.5px solid var(--line); border-radius: 20px; padding: 26px; transition: background .2s, border-color .2s, transform .2s; }
.fg-card:hover { background: var(--page-2); border-color: var(--ink-3); transform: translateY(-2px); }
.fg-icon { width: 48px; height: 48px; border-radius: 12px; background: var(--tile); color: var(--ember-text); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .fg-icon svg { width: 24px; height: 24px; }
.fg-card h3 { margin: 0 0 8px; font: 700 17px/1.25 var(--font-dm-sans); letter-spacing: -0.01em; color: var(--ink); }
.fg-card p { margin: 0 !important; font-size: 14.5px !important; line-height: 1.55 !important; color: var(--ink-2) !important; }
@media (max-width: 1024px) { .fg-grid { grid-template-columns: 1fr 1fr; } .fg-head h2 { font-size: 26px !important; } }
@media (max-width: 640px) { .fg-grid { grid-template-columns: 1fr; } }

/* step visuals: animate in each time a step becomes current */
@keyframes vis-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes vis-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes vis-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes vis-ring { 0% { box-shadow: 0 0 0 0 rgba(51,64,255,.45); } 100% { box-shadow: 0 0 0 12px rgba(51,64,255,0); } }
@keyframes vis-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes vis-blink { 0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,.2); } 50% { box-shadow: 0 0 0 6px rgba(34,197,94,.05); } }
@keyframes vis-tag { 0% { opacity: 0; transform: translateY(12px) scale(.9); } 60% { transform: translateY(-3px) scale(1.03); } 100% { opacity: 1; transform: none; } }
.sr-img.is-on .vis-card, .sr-img.is-on .vis-browser { animation: vis-pop .5s var(--ease-out) both; }
.sr-img.is-on .vis-cal-grid i.is-pick { animation: vis-ring 1.4s ease-out .5s 2; }
.sr-img.is-on .vis-plan { animation: vis-rise .45s var(--ease-out) .35s both; }
.sr-img.is-on .vis-ticks li { animation: vis-rise .4s var(--ease-out) both; animation-delay: calc(.7s + var(--i) * .22s); }
.sr-img.is-on .vis-line, .sr-img.is-on .vis-btn { transform-origin: left center; animation: vis-grow .6s var(--ease-out) both; }
.sr-img.is-on .vis-line.w40 { animation-delay: .25s; } .sr-img.is-on .vis-btn { animation-delay: .45s; }
.sr-img.is-on .vis-cards div { animation: vis-rise .45s var(--ease-out) both; animation-delay: calc(.6s + var(--i) * .15s); }
.sr-img.is-on .vis-clock { animation: vis-rise .45s var(--ease-out) .3s both; }
.sr-img.is-on .vis-clock-track i { transform-origin: left center; animation: vis-grow 1.6s cubic-bezier(.22,.8,.2,1) .6s both; }
.sr-img.is-on .vis-spark polyline { stroke-dasharray: 1; animation: vis-draw 1.4s ease-out .4s both; }
.sr-img.is-on .vis-mon-head span { animation: vis-rise .4s var(--ease-out) 1.5s both; }
.sr-img.is-on .vis-mon-grid div { animation: vis-rise .4s var(--ease-out) both; animation-delay: calc(.9s + var(--i) * .15s); }
.sr-img.is-on .vis-tag { animation: vis-tag .6s var(--ease-out) 1.7s both; }
.sr-img.is-on .vis-bar em { animation: vis-blink 1.6s ease-in-out 1s infinite; }
.is-static .sr-img .vis *, .is-static .sr-img .vis { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .sr-img .vis *, .sr-img .vis { animation: none !important; } }

/* compare reveal (port of Motiq CompareReveal) */
.cmp { position: relative; height: 460px; border-radius: 22px; overflow: hidden; border: 1.5px solid #DADCE3; background: var(--color-pumice); cursor: ew-resize; user-select: none; touch-action: pan-y; margin: 8px 0 0; }
.cmp-after, .cmp-top { position: absolute; inset: 0; }
.cmp-top { clip-path: inset(0 50% 0 0); will-change: clip-path; }
.cmp-side { position: absolute; inset: 0; padding: 36px 40px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; }
.cmp-s-before { background: #F1F1EF; color: var(--color-midnight); }
.cmp-after .cmp-side { background: var(--color-midnight); color: #fff; }
.cmp-kicker { margin: 0 0 10px !important; font-size: 11px !important; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ember) !important; } .cmp-after .cmp-kicker { color: var(--color-sulfur) !important; }
.cmp-head h3 { margin: 0 0 22px; font: 700 26px/1.2 var(--font-dm-sans); letter-spacing: -0.02em; max-width: 420px; }
.cmp-big small { display: block; font-size: 12px; font-weight: 600; opacity: .7; margin-bottom: 4px; } .cmp-big b { font: 800 42px/1 "Archivo", var(--font-dm-sans); letter-spacing: -0.03em; } .cmp-after .cmp-big b { color: var(--color-sulfur); }
.cmp-rows { display: grid; gap: 8px; }
.cmp-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 16px; border-radius: 12px; background: rgba(20,22,43,.05); font-size: 14px; }
.cmp-after .cmp-row { background: rgba(255,255,255,.08); } .cmp-row span { opacity: .8; } .cmp-row b { font-weight: 700; white-space: nowrap; } .cmp-after .cmp-row b { color: var(--color-sulfur); }
.cmp-label { position: absolute; top: 16px; z-index: 8; pointer-events: none; padding: 6px 12px; border-radius: 999px; font: 700 10.5px/1 var(--font-dm-sans); letter-spacing: .12em; text-transform: uppercase; transition: opacity .3s; backdrop-filter: blur(6px); }
.cmp-label-l { left: 16px; background: rgba(20,22,43,.08); color: var(--color-midnight); border: 1px solid rgba(20,22,43,.12); }
.cmp-label-r { right: 16px; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.cmp-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; z-index: 10; background: var(--color-ember); pointer-events: none; will-change: left; }
.cmp-handle { pointer-events: auto; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid var(--color-ember); background: rgba(255,255,255,.9); color: var(--color-ember); display: grid; place-items: center; cursor: ew-resize; padding: 0; backdrop-filter: blur(4px); box-shadow: 0 0 0 6px rgba(51,64,255,.18), 0 0 26px rgba(51,64,255,.35); transition: box-shadow .2s; }
.cmp-handle:focus-visible { outline: none; box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--color-ember); }
.cmp-hint { margin: 10px 0 0 !important; font-size: 12px !important; color: #6B7080 !important; text-align: center; }
@media (max-width: 1024px) { .cmp { height: 620px; } .cmp-side { grid-template-columns: 1fr; gap: 20px; padding: 56px 20px 20px; align-content: start; } .cmp-head h3 { font-size: 20px; margin-bottom: 14px; } .cmp-big b { font-size: 32px; } .cmp-row { padding: 10px 12px; font-size: 13px; } }

/* compare reveal: branding pass */
.cmp-lockup { display: block; width: 168px; height: 32px; margin: 0 0 16px -12px; }
.cmp-mark { width: 18px; height: 14px; }
.cmp-label { display: inline-flex; align-items: center; gap: 7px; }
.cmp-label-r { background: rgba(255,255,255,.08); border-color: rgba(152,160,255,.35); }
.cmp-s-before { background: linear-gradient(135deg, #F4F4F2, #E9EAEE); }
.cmp-after .cmp-side { background: radial-gradient(120% 100% at 100% 0%, #1E2250 0%, var(--color-midnight) 55%); }
.cmp-after .cmp-row { background: rgba(255,255,255,.07); border: 1px solid rgba(152,160,255,.14); }
.cmp-after .cmp-row b { display: inline-flex; align-items: center; gap: 8px; }
.cmp-after .cmp-row b::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--color-ember) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat; }
.cmp-s-before .cmp-row { background: rgba(20,22,43,.06); border: 1px solid rgba(20,22,43,.06); } .cmp-s-before .cmp-row b { color: var(--color-midnight); }
.cmp-s-before .cmp-big b { color: var(--color-midnight); }
.cmp-divider { background: linear-gradient(180deg, rgba(51,64,255,0), var(--color-ember) 12%, var(--color-ember) 88%, rgba(51,64,255,0)); box-shadow: 0 0 18px rgba(51,64,255,.45); }
.cmp-handle { background: var(--color-ember); color: #fff; border-color: #fff; box-shadow: 0 0 0 6px rgba(51,64,255,.22), 0 12px 30px rgba(51,64,255,.45); }
.cmp-handle:hover { box-shadow: 0 0 0 8px rgba(51,64,255,.26), 0 12px 30px rgba(51,64,255,.5); }
.cmp-save { position: absolute; left: 50%; bottom: 18px; transform: translate(-50%, 8px); z-index: 9; pointer-events: none; padding: 10px 16px; border-radius: 999px; background: #fff; color: var(--color-midnight); font-size: 13px; box-shadow: 0 16px 40px -16px rgba(20,22,43,.5); opacity: 0; transition: opacity .3s, transform .3s; white-space: nowrap; }
.cmp-save b { color: var(--color-ember); font-weight: 800; } .cmp-save.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 1024px) { .cmp-save { white-space: normal; text-align: center; width: calc(100% - 40px); } .cmp-lockup { margin-left: -10px; } }

/* compare reveal: BuildSites side mirrored so the brand shows at the default split */
.cmp-after .cmp-side { grid-template-columns: 1fr 1fr; }
.cmp-after .cmp-head { padding-left: 44px; }
.cmp-after .cmp-head { order: 2; }
.cmp-after .cmp-rows { order: 1; }
.cmp-after .cmp-lockup { width: 250px; height: 48px; margin: 0 0 22px -18px; }
.cmp-after .cmp-head h3 { font-size: 32px; max-width: 460px; margin-bottom: 26px; }
.cmp-after .cmp-big small { font-size: 13px; } .cmp-after .cmp-big b { font-size: 52px; }
.cmp-label-r { display: none; }
@media (max-width: 1024px) { .cmp-after .cmp-side { grid-template-columns: 1fr; } .cmp-after .cmp-head { order: 1; } .cmp-after .cmp-rows { order: 2; } .cmp-after .cmp-lockup { width: 200px; height: 38px; margin-left: -14px; } .cmp-after .cmp-head h3 { font-size: 24px; } .cmp-after .cmp-big b { font-size: 36px; } }
@media (max-width: 1024px) { .cmp-after .cmp-head { padding-left: 0; } }
/* pricing page section titles: same display face as the rest of the site */
.res-article h2.p-title, h2.p-title { font-family: var(--font-display); font-weight: var(--font-weight-regular); letter-spacing: 0.02em; font-feature-settings: "ss06", "ss10"; font-size: 56px !important; line-height: 1; text-align: center; color: var(--ink); margin: 0 0 18px !important; }
.p-head { text-align: center; margin: 64px 0 28px; }
.res-article .p-sub, .p-sub { margin: 0 auto !important; max-width: 640px; text-align: center; font-size: 18px !important; line-height: 1.5 !important; color: var(--ink-2) !important; }
.res-article .res-faqs h2.p-title { margin: 72px 0 24px !important; }
.fg-head { margin-bottom: 36px; }
@media (max-width: 1024px) { .res-article h2.p-title, h2.p-title { font-size: 38px !important; } .p-head { margin-top: 44px; } }

/* compare reveal: agency price struck through, BuildSites monthly price replaces it */
.cmp-vs { display: grid; gap: 4px; }
.cmp-vs small { font-size: 12px; font-weight: 600; opacity: .7; }
.cmp-vs .cmp-vs-label { margin-top: 12px; color: var(--color-sulfur); opacity: 1; }
.cmp-strike { position: relative; display: inline-block; justify-self: start; text-decoration: none; font: 800 34px/1 "Archivo", var(--font-dm-sans); letter-spacing: -0.03em; color: rgba(255,255,255,.55); }
.cmp-strike::after { content: ""; position: absolute; left: -4px; right: -4px; top: 52%; height: 3px; border-radius: 2px; background: #FF6B5E; transform: scaleX(0); transform-origin: left center; transition: transform .5s cubic-bezier(.22,.8,.2,1) .15s; }
.cmp.is-after .cmp-strike::after { transform: scaleX(1); }
.cmp-vs b { display: flex; align-items: baseline; gap: 8px; font: 800 56px/1 "Archivo", var(--font-dm-sans); letter-spacing: -0.03em; color: var(--color-sulfur); transform: translateY(6px); opacity: .85; transition: transform .45s cubic-bezier(.22,.8,.2,1) .45s, opacity .45s ease .45s; }
.cmp-vs b em { font: 600 16px/1 var(--font-dm-sans); color: rgba(255,255,255,.8); letter-spacing: 0; }
.cmp.is-after .cmp-vs b { transform: none; opacity: 1; }
@media (max-width: 1024px) { .cmp-strike { font-size: 26px; } .cmp-vs b { font-size: 40px; } }
/* compare reveal: aligned checks + clean rounded edges */
.cmp-after .cmp-row b { flex-direction: row-reverse; }
.cmp { isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black); border: 0; box-shadow: 0 0 0 1.5px #DADCE3, 0 30px 60px -40px rgba(20,22,43,.35); }
.cmp-after, .cmp-top, .cmp-side { border-radius: inherit; }
.cmp-top { border-radius: 22px 0 0 22px; }
.cmp-after .cmp-side { background-color: var(--color-midnight); }

/* compare reveal: light panel is the base, dark panel is the clipped layer (no dark under the light side) */
.cmp { -webkit-mask-image: none; box-shadow: 0 30px 60px -40px rgba(20,22,43,.35); background: #F1F1EF; }
.cmp-top { clip-path: none !important; z-index: 1; border-radius: 0; will-change: auto; }
.cmp-after { z-index: 2; clip-path: inset(0 0 0 50%); will-change: clip-path; border-radius: 0; }
.cmp-side { border-radius: 0; }

/* process page: what we need from you */
.how-need { list-style: none; margin: 0 0 8px !important; padding: 0 !important; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; counter-reset: need; }
.how-need li { counter-increment: need; margin: 0 !important; padding: 20px 22px 20px 62px; position: relative; background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; display: grid; gap: 6px; }
.how-need li::before { content: counter(need, decimal-leading-zero); position: absolute; left: 20px; top: 20px; font: 800 15px/1 "Archivo", var(--font-dm-sans); color: var(--ember-text); }
.how-need b { font-size: 16px; color: var(--ink); } .how-need span { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 1024px) { .how-need { grid-template-columns: 1fr; } }

/* process page: demo embed, build planner, readiness checklist */
.how-demo-wrap { margin: 8px 0 44px; }
.how-demo { position: relative; height: min(70vh, 640px); min-height: 480px; border-radius: 28px; }
.brief-out { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.brief-pages, .brief-clock { background: var(--page); border-radius: 16px; padding: 16px 18px; }
.brief-label { margin: 0 0 10px !important; font-size: 12px !important; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ember-text) !important; display: flex; justify-content: space-between; gap: 10px; } .brief-label b { color: var(--ink); letter-spacing: 0; text-transform: none; font-size: 12px; }
.brief-list { list-style: none; margin: 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: 6px; }
.brief-list li { margin: 0 !important; font-size: 13px !important; font-weight: 600; padding: 6px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink) !important; }
.brief-list li.is-extra { color: var(--ink-3) !important; border-style: dashed; }
.brief-times { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 6px; counter-reset: bt; }
.brief-times li { margin: 0 !important; display: flex; justify-content: space-between; gap: 10px; font-size: 13px !important; padding: 7px 10px; background: var(--surface); border-radius: 10px; color: var(--ink) !important; }
.brief-times li b { font-weight: 600; } .brief-times li span { color: var(--ink-3); white-space: nowrap; } .brief-times li:last-child { background: var(--color-midnight); color: #fff !important; } .brief-times li:last-child span { color: var(--color-sulfur); }
.how-need label { display: grid; gap: 6px; cursor: pointer; } .how-need input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.how-need li { transition: border-color .2s, background .2s; } .how-need li.is-done { border-color: var(--color-ember); background: var(--page-2); }
.how-need-tick { position: absolute; right: 16px; top: 18px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ink-3); background: var(--surface); transition: background .2s, border-color .2s; }
.how-need li.is-done .how-need-tick { background: var(--color-ember) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat; border-color: var(--color-ember); }
.how-ready { margin: 14px 0 0 !important; text-align: center; font-size: 15px !important; font-weight: 600; color: var(--ink) !important; }
@media (max-width: 1024px) { .brief-out { grid-template-columns: 1fr; } .how-demo { height: 70vw; min-height: 360px; } }

.res-author-mark { background: var(--surface); border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; } .res-author-mark svg { width: 34px; height: 26px; display: block; }

.res-aside { top: calc(110px + var(--bar-h, 0px)); }

/* ---- thank-you (post-payment confirmation): calm, one column, no sticky call bar ---- */
.ty-main { padding-bottom: 80px; }
.ty-wrap { max-width: 720px; margin: 0 auto; }
.ty-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 44px 28px 36px; border-radius: 28px; background: var(--surface); box-shadow: 0 30px 60px -40px rgba(20,22,43,.35); }
.ty-card .contact-eyebrow { margin-bottom: 10px; }
.ty-card .lead-done-title { font-size: 48px; }
.ty-card .lead-done-copy { max-width: 520px; }
.ty-section { margin-top: 28px; }
.ty-section h2 { margin: 0 0 14px; font-family: var(--font-dm-sans); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; color: var(--ink); }
.ty-steps { grid-template-columns: repeat(3, 1fr); }
.ty-lead { margin: 0 0 14px; font-size: 17px; line-height: 1.55; color: var(--ink-2); } .ty-lead b { color: var(--ink); font-weight: 700; }
.ty-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ty-list li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface); font-size: 16px; font-weight: 600; color: var(--ink); }
.ty-list svg { flex: none; width: 20px; height: 20px; color: var(--ember-text); }
@media (max-width: 640px) { .ty-list { grid-template-columns: 1fr; } .ty-card .lead-done-title { font-size: 34px; } }
.ty-note { padding: 18px 22px; border-left: 4px solid var(--color-ember); background: var(--surface); border-radius: 0 18px 18px 0; }
.ty-note p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); } .ty-note b { color: var(--ink); font-weight: 600; }
.ty-descriptor { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; letter-spacing: .04em; padding: 2px 7px; border-radius: 6px; background: var(--tile); color: var(--ember-text); }
.ty-support { padding: 24px; border-radius: 20px; background: var(--surface); }
.ty-support p { margin: 0 0 8px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.ty-contacts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 6px 0 10px !important; }
.ty-contacts a { font-size: 18px; font-weight: 600; color: var(--ink); text-decoration: none; }
.ty-contacts a:hover { color: var(--ember-text); }
.ty-small { font-size: 13px !important; color: var(--ink-3) !important; }
.ty-back { margin: 28px 0 0; text-align: center; }
.ty-main ~ .res-bar { display: none !important; }              /* no sticky "Book a call" bar on a page that has already converted */
body:has(.ty-main) .promo-bar { display: none !important; }   /* no discount banner for someone who just paid full price */
@media (max-width: 1024px) { .ty-steps { grid-template-columns: 1fr; } .ty-card { padding: 36px 20px 28px; border-radius: 20px; } .ty-card .lead-done-title { font-size: 38px; } }
@media (prefers-reduced-motion: reduce) { .ty-card .lead-done-check, .ty-card .lead-done-check::after, .ty-card .lead-done-tick, .ty-card .lead-done-title, .ty-card .lead-done-copy { animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; } }

/* article figures (added by buildsites-seo-engine; one rule, used by every generated <figure class="res-figure">) */
.res-figure { margin: 8px 0 28px; } .res-figure img { width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); } .res-figure figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-3); }