@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Sora:wght@400;600;700&display=swap");

:root {
  --purple: #3933d3;
  --periwinkle: #5b60f5;
  --green: #1cbb81;
  --orange: #f39c02;
  --navy: #0c1727;
  --slate: #33455c;
  --muted: #9aa5b5;
  --line: #e1e6ed;
  --paper: #fefefe;
  --soft: #f5f7fb;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--navy); font-family: "Inter", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
main { overflow: hidden; }
.site-header { height: 82px; max-width: 1240px; margin: auto; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 20; }
.logo img { width: 126px; display: block; }
.site-header nav { display: flex; gap: 34px; font-size: 14px; font-weight: 600; color: var(--slate); }
.site-header nav a:hover { color: var(--purple); }
.button { min-height: 52px; padding: 0 23px; display: inline-flex; align-items: center; justify-content: center; gap: 13px; border-radius: 11px; font-family: "Sora", sans-serif; font-size: 14px; font-weight: 600; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(12,23,39,.14); }
.button--small { min-height: 42px; padding: 0 17px; border-radius: 9px; font-size: 13px; }
.button--navy { background: var(--navy); color: white; }
.button--primary { background: var(--purple); color: white; }
.button--ghost { border: 1px solid #d7ddea; background: white; }
.button--white { background: white; color: var(--purple); }
.hero { min-height: 700px; padding: 84px max(28px, calc((100vw - 1184px)/2)) 100px; display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: 65px; position: relative; background: linear-gradient(135deg, #f9f9ff 0%, #fff 48%, #f5fbf9 100%); border-top: 1px solid #f1f2f6; }
.hero__copy { position: relative; z-index: 2; }
.announcement { display: inline-flex; align-items: center; gap: 10px; padding: 7px 11px 7px 7px; border: 1px solid #dadcfb; border-radius: 999px; background: rgba(255,255,255,.8); color: var(--slate); font-size: 12px; font-weight: 600; }
.announcement span { padding: 4px 7px; border-radius: 999px; background: var(--green); color: white; font-size: 9px; letter-spacing: .12em; }
.announcement b { color: var(--purple); }
h1, h2, h3 { margin: 0; font-family: "Sora", sans-serif; }
.hero h1 { max-width: 660px; margin-top: 24px; font-size: clamp(46px, 5.3vw, 72px); line-height: 1.04; letter-spacing: -.055em; }
.hero h1 em { color: var(--purple); font-style: normal; }
.hero__copy > p { max-width: 590px; margin: 26px 0 30px; color: var(--slate); font-size: 18px; line-height: 1.7; }
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.play { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; background: #ececff; color: var(--purple); font-size: 9px; }
.trust-line { margin-top: 25px; display: flex; gap: 20px; flex-wrap: wrap; color: #66748a; font-size: 12px; }
.trust-line span { display: flex; align-items: center; gap: 6px; }
.check { width: 18px; height: 18px; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #e4f9f1; color: #079963; font-size: 11px; font-weight: 800; }
.hero__visual { position: relative; z-index: 2; }
.hero__glow { position: absolute; border-radius: 50%; filter: blur(3px); opacity: .5; }
.hero__glow--one { width: 390px; height: 390px; right: -100px; top: 20px; background: radial-gradient(circle, #dfe1ff, transparent 70%); }
.hero__glow--two { width: 300px; height: 300px; left: 30%; bottom: -100px; background: radial-gradient(circle, #dff9ef, transparent 70%); }
.offer-stage { min-height: 490px; display: grid; place-items: center; position: relative; }
.product-card { width: min(100%, 445px); padding: 25px; border: 1px solid #e0e3ef; border-radius: 22px; background: rgba(255,255,255,.96); box-shadow: 0 35px 80px rgba(36,39,95,.16); transform: rotate(1deg); }
.product-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 21px; }
.product-card__head h3 { margin-top: 5px; font-size: 21px; }
.eyebrow, .kicker { color: var(--purple); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.live-pill { padding: 7px 10px; border-radius: 999px; background: #e9faf4; color: #07895b; font-size: 11px; font-weight: 700; }
.live-pill i { width: 6px; height: 6px; display: inline-block; margin-right: 4px; border-radius: 50%; background: var(--green); }
.deal-row { min-height: 77px; margin-top: 11px; padding: 16px; display: flex; align-items: center; gap: 13px; position: relative; border: 1px solid #e1e5eb; border-radius: 12px; background: #fff; cursor: pointer; }
.deal-row input { position: absolute; opacity: 0; }
.radio-ui { width: 20px; height: 20px; flex: 0 0 auto; border: 2px solid #b8c0cd; border-radius: 50%; background: white; }
.deal-row--active { border: 2px solid var(--periwinkle); background: #f9f9ff; box-shadow: 0 6px 20px rgba(91,96,245,.09); }
.deal-row--active .radio-ui { border: 5px solid white; background: var(--periwinkle); box-shadow: 0 0 0 2px var(--periwinkle); }
.deal-copy { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.deal-copy strong { font-family: "Sora"; font-size: 14px; }
.deal-copy small, .deal-price del { color: #8894a5; font-size: 11px; }
.deal-price { display: flex; flex-direction: column; align-items: end; gap: 3px; font-family: "Sora"; font-size: 14px; }
.popular { position: absolute; right: 13px; top: -11px; padding: 5px 9px; border-radius: 5px; background: var(--periwinkle); color: #fff; font-size: 8px; font-weight: 800; letter-spacing: .08em; }
.mock-cart { width: 100%; min-height: 52px; margin-top: 16px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border: 0; border-radius: 10px; background: var(--navy); color: white; font-family: "Sora"; font-weight: 600; cursor: pointer; }
.float-pill { position: absolute; z-index: 3; padding: 12px 15px; display: flex; align-items: center; gap: 7px; border: 1px solid #e0e5ec; border-radius: 12px; background: white; box-shadow: 0 18px 35px rgba(22,35,52,.13); color: var(--slate); font-size: 11px; }
.float-pill span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; background: #e8faf3; color: #079963; font-weight: 800; }
.float-pill--top { top: 12px; right: -22px; }
.float-pill--bottom { bottom: 3px; left: -30px; }
.proof-strip { min-height: 76px; padding: 20px 35px; display: flex; align-items: center; justify-content: center; gap: 27px; background: var(--navy); color: white; font-family: "Sora"; font-size: 12px; }
.proof-strip > span { color: #7e8da2; font-size: 9px; letter-spacing: .16em; }
.proof-strip { position: relative; isolation: isolate; overflow: hidden; }
.proof-strip::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 35% 0%, rgba(91,96,245,.25), transparent 34%), radial-gradient(circle at 68% 100%, rgba(28,187,129,.14), transparent 35%); }
.proof-strip > * { position: relative; z-index: 1; }
.proof-strip i { width: 4px; height: 4px; border-radius: 50%; background: var(--periwinkle); }
.section { max-width: 1240px; margin: auto; padding: 112px 28px; }
.section-heading--split { display: grid; grid-template-columns: 1.2fr .8fr; align-items: end; gap: 80px; }
.section-heading h2, .catalog-copy h2, .analytics-copy h2 { max-width: 700px; margin-top: 14px; font-size: clamp(34px, 4vw, 50px); line-height: 1.12; letter-spacing: -.04em; }
.section-heading p, .catalog-copy > p, .analytics-copy > p { color: #657388; font-size: 16px; line-height: 1.75; }
.benefit-grid { margin-top: 62px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.benefit-grid article { min-height: 260px; padding: 34px; }
.benefit-grid article + article { border-left: 1px solid var(--line); }
.feature-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: #ececff; color: var(--purple); font-family: "Sora"; font-size: 21px; font-weight: 700; }
.feature-icon--green { background: #e7faf3; color: #079963; }
.feature-icon--orange { background: #fff4df; color: #d78200; }
.benefit-grid h3 { margin: 26px 0 11px; font-size: 19px; }
.benefit-grid p, .offer-card p { color: #728095; font-size: 14px; line-height: 1.65; }
.offer-types { max-width: none; padding-left: max(28px, calc((100vw - 1184px)/2)); padding-right: max(28px, calc((100vw - 1184px)/2)); background: var(--soft); }
.section-heading--center { max-width: 760px; margin: auto; text-align: center; }
.section-heading--center > p:not(.kicker) { margin: 18px auto 0; }
.offer-grid { max-width: 1184px; margin: 58px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.offer-card { min-height: 500px; padding: 20px 26px 28px; position: relative; overflow: hidden; border: 1px solid #e0e5ec; border-radius: 18px; background: white; }
.offer-card:before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--purple); }
.offer-card--green:before { background: var(--green); }
.offer-card--orange:before { background: var(--orange); }
.mini-ui { height: 225px; margin-bottom: 28px; padding: 20px; display: flex; border-radius: 12px; background: #f4f4ff; }
.mini-ui--tiers { flex-direction: column; justify-content: center; gap: 8px; }
.mini-ui--tiers > span { padding: 12px; display: flex; align-items: center; gap: 9px; position: relative; border: 1px solid #e2e3f3; border-radius: 8px; background: white; font-size: 11px; }
.mini-ui--tiers i { width: 13px; height: 13px; border: 1px solid #aeb5c5; border-radius: 50%; }
.mini-ui--tiers b { margin-left: auto; }
.mini-ui--tiers .selected { border: 2px solid var(--periwinkle); }
.mini-ui--tiers .selected i { border: 4px solid var(--periwinkle); }
.mini-ui--tiers em { position: absolute; right: 8px; top: -8px; padding: 3px 6px; border-radius: 4px; background: var(--periwinkle); color: white; font-size: 7px; font-style: normal; }
.mini-ui--gift { align-items: center; gap: 15px; background: #edfbf6; }
.gift-box { width: 86px; height: 100px; display: grid; place-items: center; border-radius: 11px; background: white; font-size: 39px; box-shadow: 0 10px 30px rgba(28,187,129,.12); }
.mini-ui--gift > div:last-child { display: flex; flex-direction: column; gap: 7px; }
.mini-ui--gift small { color: #079963; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.mini-ui--gift strong { font-family: "Sora"; }
.mini-ui--gift span { color: #718276; font-size: 10px; }
.mini-ui--bundle { align-items: center; justify-content: center; gap: 8px; background: #fff7e9; }
.bundle-item { width: 72px; height: 90px; display: grid; place-items: center; border: 1px solid #f2dec0; border-radius: 10px; background: white; font-size: 11px; font-weight: 700; }
.bundle-save { padding: 11px; border-radius: 9px; background: var(--orange); color: white; text-align: center; font-size: 9px; }
.bundle-save strong { font-size: 17px; }
.card-number { color: #aab3c1; font-family: "Sora"; font-size: 11px; }
.offer-card h3 { margin-top: 12px; font-size: 22px; }
.offer-card a { position: absolute; bottom: 27px; color: var(--purple); font-family: "Sora"; font-size: 12px; font-weight: 700; }
.offer-card--green a { color: #07895b; }
.offer-card--orange a { color: #bd7300; }
.clean-catalog { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 100px; }
.catalog-art { min-height: 520px; display: grid; place-items: center; position: relative; border-radius: 25px; background: linear-gradient(145deg,#eeefff,#f8f8ff); }
.catalog-panel { width: 78%; padding: 23px; border: 1px solid #dedfec; border-radius: 17px; background: white; box-shadow: 0 24px 50px rgba(57,51,211,.12); }
.catalog-head { padding-bottom: 15px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); font-family: "Sora"; font-size: 11px; }
.catalog-head b { color: #8692a3; font-size: 9px; }
.catalog-row { padding: 13px 0; display: flex; align-items: center; gap: 12px; }
.product-thumb { width: 43px; height: 43px; border-radius: 9px; background: #eceef2; }
.product-thumb--2 { background: #e5e6ff; }
.product-thumb--3 { background: #e4f7ef; }
.catalog-row > div { display: flex; flex-direction: column; gap: 3px; flex: 1; font-size: 11px; }
.catalog-row small { color: #909bac; font-size: 9px; }
.catalog-offer { position: absolute; right: 6px; bottom: 45px; padding: 14px 17px; display: flex; flex-direction: column; gap: 5px; border-radius: 11px; background: var(--purple); color: white; box-shadow: 0 16px 30px rgba(57,51,211,.25); transform: rotate(-2deg); }
.catalog-offer span { color: #c6c8ff; font-size: 7px; letter-spacing: .14em; }
.catalog-offer strong { font-family: "Sora"; font-size: 12px; }
.catalog-offer small { color: #d8d9ff; font-size: 8px; }
.catalog-copy ul { padding: 0; margin: 28px 0 0; display: grid; gap: 14px; list-style: none; font-size: 13px; font-weight: 600; }
.catalog-copy li { display: flex; align-items: center; gap: 9px; }
.editor-section { padding: 112px max(28px, calc((100vw - 1184px)/2)); background: var(--navy); color: white; }
.section-heading--light p { color: #92a0b4; }
.section-heading--light .kicker { color: #8c90ff; }
.editor-window { max-width: 1080px; margin: 60px auto 0; overflow: hidden; border: 1px solid #3c495b; border-radius: 17px; background: #f8f9fb; box-shadow: 0 35px 80px rgba(0,0,0,.28); color: var(--navy); }
.window-top { height: 55px; padding: 0 17px; display: flex; align-items: center; gap: 15px; border-bottom: 1px solid #dfe3e9; background: white; color: #788496; font-size: 10px; }
.window-top > span:nth-child(2) { flex: 1; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 8px; height: 8px; border-radius: 50%; background: #d7dbe2; }
.window-dots i:first-child { background: #ff9f91; }
.window-top button { padding: 8px 12px; border: 0; border-radius: 6px; background: var(--purple); color: white; font-size: 9px; }
.editor-body { min-height: 520px; padding: 25px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.editor-controls { padding: 18px; border: 1px solid #e1e5eb; border-radius: 11px; background: white; }
.editor-tabs { display: flex; gap: 20px; border-bottom: 1px solid #e5e8ee; color: #8d97a5; font-size: 10px; }
.editor-tabs > * { padding-bottom: 12px; }
.editor-tabs b { border-bottom: 2px solid var(--purple); color: var(--navy); }
.control-card { margin-top: 16px; padding: 16px; display: grid; gap: 13px; border: 1px solid #e2e5eb; border-radius: 9px; font-size: 10px; }
.control-card label { display: grid; gap: 5px; color: #6f7b8c; }
.control-card label span { padding: 9px; border: 1px solid #dfe3e9; border-radius: 6px; color: var(--navy); }
.two-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.palette-row { margin-top: 15px; display: flex; align-items: center; gap: 8px; font-size: 9px; }
.palette-row b { margin-right: auto; }
.palette-row i { width: 23px; height: 23px; border-radius: 6px; background: var(--purple); }
.palette-row i:nth-of-type(2) { background: var(--green); }
.palette-row i:nth-of-type(3) { background: var(--orange); }
.palette-row i:nth-of-type(4) { background: var(--navy); }
.editor-preview { min-width: 0; padding: 18px; overflow: hidden; border-radius: 11px; background: #eef0f5; }
.editor-preview .preview-label { color: #8691a1; font-size: 8px; font-weight: 800; letter-spacing: .14em; }
.preview-deal { margin-top: 105px; padding: 24px; display: grid; grid-template-columns: 1fr auto; gap: 7px; position: relative; border: 2px solid var(--periwinkle); border-radius: 12px; background: #fff; box-shadow: 0 16px 35px rgba(57,51,211,.12); }
.preview-deal small { position: absolute; right: 14px; top: -10px; padding: 5px 8px; border-radius: 5px; background: var(--periwinkle); color: white; font-size: 7px; font-weight: 800; }
.preview-deal strong { font-family: "Sora"; font-size: 14px; }
.preview-deal span { grid-column: 1; color: #7c8898; font-size: 10px; }
.preview-deal b { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: "Sora"; }
.preview-gift { margin-top: 12px; padding: 15px; display: flex; align-items: center; gap: 11px; border-radius: 10px; background: #e6f8f1; color: #087e56; }
.preview-gift > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: white; }
.preview-gift > div { display: grid; gap: 4px; font-size: 10px; }
.preview-gift small { color: #5e8d7b; font-size: 8px; }
.steps { max-width: 950px; margin: 55px auto 0; display: flex; align-items: center; justify-content: space-between; }
.steps > div { display: grid; grid-template-columns: 38px auto; column-gap: 13px; }
.steps > div > span { grid-row: span 2; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid #4d5a6e; border-radius: 50%; color: #9ea5ff; font-family: "Sora"; font-weight: 700; }
.steps strong { font-family: "Sora"; font-size: 12px; }
.steps small { margin-top: 5px; color: #8190a5; font-size: 9px; }
.steps > i { width: 80px; height: 1px; background: #354357; }
.analytics { display: grid; grid-template-columns: .75fr 1.25fr; align-items: center; gap: 80px; }
.text-link { display: inline-flex; gap: 10px; margin-top: 15px; color: var(--purple); font-family: "Sora"; font-size: 13px; font-weight: 700; }
.analytics-card { padding: 28px; border: 1px solid #e1e5ec; border-radius: 18px; box-shadow: 0 25px 55px rgba(18,31,48,.09); }
.analytics-top { display: flex; justify-content: space-between; }
.analytics-top > div { display: grid; gap: 5px; }
.analytics-top small, .analytics-stats small { color: #8793a5; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.analytics-top strong { font-family: "Sora"; font-size: 27px; }
.analytics-top span { color: #079963; font-size: 9px; font-weight: 700; }
.analytics-top > b { height: fit-content; padding: 7px 9px; border: 1px solid #e2e6ec; border-radius: 6px; color: #667286; font-size: 8px; }
.chart { height: 210px; margin: 25px 0; position: relative; }
.chart svg { width: 100%; height: 100%; position: absolute; inset: 0; }
.chart-grid { height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.chart-grid i { height: 1px; background: #edf0f4; }
.analytics-stats { padding-top: 20px; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid #e5e8ed; }
.analytics-stats span { display: grid; gap: 6px; }
.analytics-stats span + span { padding-left: 20px; border-left: 1px solid #e5e8ed; }
.analytics-stats strong { font-family: "Sora"; }
.faq { padding-top: 70px; }
.faq-list { max-width: 800px; margin: 50px auto 0; }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { padding: 22px 0; display: flex; justify-content: space-between; cursor: pointer; list-style: none; font-family: "Sora"; font-size: 14px; font-weight: 600; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary b { color: var(--purple); font-size: 18px; }
.faq-list p { margin: -5px 0 24px; color: #6d798b; font-size: 13px; line-height: 1.7; }
.final-cta { margin: 30px 28px; padding: 100px 28px; position: relative; overflow: hidden; border-radius: 24px; background: var(--purple); color: white; text-align: center; }
.final-cta .kicker { color: #bec0ff; }
.final-cta h2 { max-width: 760px; margin: 17px auto; font-size: clamp(34px, 4vw, 52px); line-height: 1.12; letter-spacing: -.04em; }
.final-cta p { margin-bottom: 28px; color: #d8d9ff; }
.cta-orb { position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); }
.cta-orb--one { width: 450px; height: 450px; left: -180px; top: -210px; }
.cta-orb--two { width: 370px; height: 370px; right: -100px; bottom: -260px; }
footer { max-width: 1184px; margin: auto; padding: 70px 28px 35px; display: grid; grid-template-columns: 2fr repeat(3,1fr); gap: 50px; position: relative; }
.footer-brand img { width: 120px; }
.footer-brand p { max-width: 270px; color: #798699; font-size: 12px; line-height: 1.7; }
footer > div:not(.footer-brand) { display: flex; flex-direction: column; gap: 12px; font-size: 11px; color: #788598; }
footer > div strong { margin-bottom: 4px; color: var(--navy); font-family: "Sora"; font-size: 11px; }
footer > small { grid-column: 1 / -1; padding-top: 25px; border-top: 1px solid var(--line); color: #9aa4b2; font-size: 9px; }

@media (max-width: 960px) {
  .site-header nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-top: 65px; text-align: center; }
  .hero__copy > p { margin-left: auto; margin-right: auto; }
  .hero__actions, .trust-line { justify-content: center; }
  .hero__visual { max-width: 560px; width: 100%; margin: auto; }
  .section-heading--split, .clean-catalog, .analytics { grid-template-columns: 1fr; gap: 50px; }
  .benefit-grid, .offer-grid { grid-template-columns: 1fr; }
  .benefit-grid article + article { border-left: 0; border-top: 1px solid var(--line); }
  .offer-card { min-height: 460px; }
  .editor-body { grid-template-columns: 1fr; }
  .editor-preview { min-height: 390px; }
  .steps > i { width: 30px; }
  .proof-strip { flex-wrap: wrap; }
}

@media (max-width: 640px) {
  .site-header { height: 70px; padding: 0 18px; }
  .logo img { width: 108px; }
  .button--small { font-size: 11px; }
  .hero { min-height: auto; padding: 55px 18px 75px; gap: 25px; }
  .hero h1 { font-size: 42px; }
  .hero__copy > p { font-size: 16px; }
  .hero__actions { display: grid; }
  .trust-line { display: grid; justify-items: start; width: fit-content; margin-left: auto; margin-right: auto; }
  .offer-stage { min-height: 450px; }
  .product-card { padding: 18px; transform: none; }
  .float-pill--top { right: -8px; }
  .float-pill--bottom { left: -5px; bottom: 0; }
  .proof-strip { gap: 13px; font-size: 10px; }
  .proof-strip > span { width: 100%; text-align: center; }
  .section { padding: 80px 18px; }
  .section-heading h2, .catalog-copy h2, .analytics-copy h2 { font-size: 36px; }
  .benefit-grid { margin-top: 40px; }
  .catalog-art { min-height: 440px; }
  .catalog-panel { width: 90%; }
  .catalog-offer { right: 0; }
  .editor-section { padding: 80px 18px; }
  .editor-window { margin-top: 40px; }
  .editor-body { padding: 12px; }
  .preview-deal { margin-top: 55px; }
  .steps { align-items: start; gap: 20px; }
  .steps > div { grid-template-columns: 34px auto; }
  .steps > i { display: none; }
  .analytics-card { padding: 18px; }
  .analytics-top strong { font-size: 22px; }
  .final-cta { margin: 15px; padding: 75px 20px; }
  footer { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* Accessibility, navigation, and content refinements */
.site-header {
  position: sticky;
  top: 0;
  max-width: none;
  width: 100%;
  padding-inline: max(28px, calc((100vw - 1184px) / 2));
  z-index: 100;
  background: rgba(254, 254, 254, .92);
  border-bottom: 1px solid rgba(225, 230, 237, .8);
  backdrop-filter: blur(16px);
}
.header-actions { display: flex; align-items: center; gap: 10px; }
.menu-toggle { display: none; width: 42px; height: 42px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: white; cursor: pointer; }
.menu-toggle span { width: 100%; height: 2px; display: block; margin: 4px 0; border-radius: 2px; background: var(--navy); transition: transform .2s, opacity .2s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.built-badge { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border: 1px solid #dce1e9; border-radius: 999px; background: rgba(255,255,255,.9); box-shadow: 0 5px 12px rgba(12,23,39,.08); color: var(--navy); font-size: 13px; font-weight: 700; }
.woo-mark { width: 25px; height: 20px; display: grid; place-items: center; position: relative; border-radius: 6px 6px 6px 2px; background: linear-gradient(135deg, var(--periwinkle), var(--purple)); color: white; font-family: "Sora"; font-size: 11px; font-weight: 700; transform: rotate(-5deg); }
.woo-mark::after { content: ""; width: 6px; height: 6px; position: absolute; left: 2px; bottom: -3px; background: var(--purple); transform: rotate(45deg); z-index: -1; }
.eyebrow, .kicker { font-size: 11px; }
.popular { font-size: 10px; }
.mini-ui--tiers em, .mini-ui--gift small, .bundle-save, .catalog-offer span, .preview-deal small { font-size: 10px; }
.mini-ui--gift span, .catalog-head b, .catalog-row small, .catalog-offer small, .window-top, .editor-tabs, .control-card, .palette-row, .editor-preview .preview-label, .preview-deal span, .preview-gift > div, .preview-gift small, .steps small, .analytics-top small, .analytics-stats small, .analytics-top span, .analytics-top > b { font-size: 11px; }
.mini-ui--gift span, .catalog-head b, .catalog-row small, .window-top, .editor-tabs, .control-card, .palette-row, .editor-preview .preview-label, .preview-deal span, .analytics-top small, .analytics-stats small, .analytics-top > b { color: var(--slate); }
.window-top button { font-size: 11px; }
.steps small { color: #aab5c5; }
footer > div:not(.footer-brand), footer > div strong { font-size: 12px; }
footer > small { color: #66748a; font-size: 11px; }

/* Blog */
.blog-hero { padding: 100px 28px 76px; background: linear-gradient(135deg, #f5f5ff, #fff 58%, #effbf7); text-align: center; }
.blog-hero h1 { max-width: 850px; margin: 16px auto; font-size: clamp(44px, 6vw, 70px); line-height: 1.05; letter-spacing: -.05em; }
.blog-hero p { max-width: 650px; margin: 0 auto; color: var(--slate); font-size: 17px; line-height: 1.7; }
.blog-grid { max-width: 1184px; margin: auto; padding: 85px 28px 115px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.blog-card { min-height: 390px; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; background: white; transition: transform .2s, box-shadow .2s; }
.blog-card:hover { transform: translateY(-5px); box-shadow: 0 20px 45px rgba(18,31,48,.1); }
.blog-card__art { height: 175px; padding: 25px; display: grid; place-items: center; background: #efefff; }
.blog-card:nth-child(2) .blog-card__art { background: #e9faf4; }
.blog-card:nth-child(3) .blog-card__art { background: #fff4df; }
.blog-card:nth-child(4) .blog-card__art { background: #edf1f5; }
.blog-card:nth-child(5) .blog-card__art { background: #f4efff; }
.blog-card:nth-child(6) .blog-card__art { background: #eaf8fb; }
.blog-card__symbol { width: 105px; height: 105px; display: grid; place-items: center; border: 1px solid rgba(57,51,211,.14); border-radius: 24px; background: rgba(255,255,255,.78); color: var(--purple); font-family: "Sora"; font-size: 42px; box-shadow: 0 15px 30px rgba(57,51,211,.1); }
.blog-card__body { padding: 24px; display: flex; flex: 1; flex-direction: column; }
.blog-card__meta { margin-bottom: 12px; color: var(--purple); font-size: 11px; font-weight: 800; letter-spacing: .1em; }
.blog-card h2 { font-size: 20px; line-height: 1.35; letter-spacing: -.025em; }
.blog-card p { color: #647287; font-size: 13px; line-height: 1.65; }
.blog-card a { margin-top: auto; color: var(--purple); font-family: "Sora"; font-size: 12px; font-weight: 700; }
.blog-newsletter { max-width: 1128px; margin: 0 auto 100px; padding: 55px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-radius: 22px; background: var(--navy); color: white; }
.blog-newsletter h2 { margin-top: 8px; font-size: 30px; }
.blog-newsletter p { color: #aeb8c7; }

@media (max-width: 960px) {
  .site-header nav { display: none; width: calc(100% - 36px); padding: 12px; flex-direction: column; gap: 0; position: absolute; left: 18px; top: 74px; border: 1px solid var(--line); border-radius: 13px; background: white; box-shadow: 0 20px 45px rgba(12,23,39,.14); }
  .site-header nav.is-open { display: flex; }
  .site-header nav a { padding: 13px 11px; border-radius: 8px; }
  .site-header nav a:hover { background: var(--soft); }
  .menu-toggle { display: block; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .site-header { padding-inline: 18px; }
  .site-header .button--small { display: none; }
  .blog-hero { padding: 75px 18px 60px; }
  .blog-hero h1 { font-size: 42px; }
  .blog-grid { padding: 60px 18px 80px; grid-template-columns: 1fr; }
  .blog-newsletter { margin: 0 18px 75px; padding: 35px 25px; display: block; }
  .blog-newsletter .button { margin-top: 15px; }
}

.gif-placeholder { max-width: 1080px; min-height: 430px; margin: 58px auto 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 1px dashed #58677c; border-radius: 17px; background: linear-gradient(145deg,#172437,#0f1b2c); color: white; }
.gif-placeholder span { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 15px; background: #3933d3; font: 700 14px "Sora",sans-serif; }
.gif-placeholder strong { font: 700 18px "Sora",sans-serif; }
.gif-placeholder small { color: #aeb9c8; font-size: 12px; }
.faq-list summary::marker { content: ""; }

/* WordPress shell and editor integration */
/* The blur lives on a pseudo-element, not on the header itself: a non-none backdrop-filter
   makes an element the containing block for its fixed-position descendants, which trapped
   the mobile navigation overlay inside the header. Sticky is on the wrapper, further down. */
.varyo-site-header { position: relative; width: 100%; border-bottom: 1px solid #e1e6ed; }
.varyo-site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(254,254,254,.94); backdrop-filter: blur(16px); }
.varyo-header-inner { min-height: 78px; }
.varyo-site-header .wp-block-site-title a { color: #0c1727; text-decoration: none; }
.varyo-navigation { font-size: 14px; font-weight: 600; }
.varyo-navigation a { color: #33455c; }
.varyo-header-cta { margin: 0; }
.varyo-footer { display: block; max-width: none; padding: 70px 24px 32px; }
.varyo-footer > * { max-width: 1184px; margin-right: auto; margin-left: auto; }
.varyo-footer .wp-block-columns { display: flex; }
.varyo-footer h3 { font-size: 13px; }
.varyo-footer p, .varyo-footer a { color: #33455c; font-size: 12px; }
.compat-check { width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 7px; background: linear-gradient(135deg,#5b60f5,#3933d3); color: #fff; font-size: 13px; font-weight: 800; }
.built-badge { padding-left: 10px; }
.editor-styles-wrapper { background: #fefefe; color: #0c1727; font-family: "Inter",sans-serif; }
.editor-styles-wrapper .varyo-home { max-width: none; }
.editor-styles-wrapper .hero, .editor-styles-wrapper .proof-strip, .editor-styles-wrapper .section, .editor-styles-wrapper .editor-section, .editor-styles-wrapper .final-cta { max-width: none; }
@media (max-width: 780px) { .varyo-header-inner { min-height: 68px; padding: 0 18px; } .varyo-header-cta { display: none; } .varyo-footer .wp-block-columns { display: block; } }
/* Native block homepage, footer, and article templates */
.varyo-home > .wp-block-group, .varyo-home > .wp-block-columns { margin-block-start: 0; }
.hero h1 mark { background: transparent; color: var(--purple); }
.hero .built-badge { width: fit-content; margin: 0 0 24px; }
.hero__actions .wp-block-button { padding: 0; }
.hero__actions .wp-block-button__link { min-height: 52px; padding: 0 23px; display: inline-flex; align-items: center; border-radius: 11px; }
.hero__actions .button--primary .wp-block-button__link { background: var(--purple); color: #fff; }
.hero__actions .button--ghost .wp-block-button__link { border: 1px solid #d7ddea; background: #fff; color: var(--navy); }
.trust-line { padding: 0; list-style: none; }
.proof-strip p { margin: 0; }
.proof-strip p:first-child { color: #7e8da2; font-size: 10px; letter-spacing: .16em; }
.benefit-grid > .wp-block-column { min-height: 260px; padding: 34px; }
.benefit-grid > .wp-block-column + .wp-block-column { border-left: 1px solid var(--line); }
.benefit-grid .feature-icon { margin: 0; }
.benefit-grid h3 { margin: 26px 0 11px; }
.offer-grid > .wp-block-column { margin: 0; }
.varyo-home .offer-grid { margin: 58px auto 0; }
.offer-card .offer-link { position: absolute; bottom: 27px; margin: 0; }
.offer-card .offer-link a { position: static; }
.walkthrough-media { max-width: 1080px; margin: 58px auto 22px !important; }
.walkthrough-media img { width: 100%; display: block; border: 1px solid #58677c; border-radius: 17px; }
.steps > .wp-block-column { display: block; }
.steps h3 { display: flex; align-items: center; gap: 13px; font-size: 13px; }
.steps h3 span { width: 38px; height: 38px; display: inline-grid; place-items: center; border: 1px solid #4d5a6e; border-radius: 50%; color: #9ea5ff; }
.steps p { margin: 6px 0 0 51px; color: #aab5c5; font-size: 11px; }
.faq-list summary::after { content: "+"; margin-left: auto; color: var(--purple); font-size: 18px; }
.faq-list details[open] summary::after { content: "−"; }
.final-cta .wp-block-button { padding: 0; }
.final-cta .wp-block-button__link { min-height: 52px; padding: 0 23px; display: inline-flex; align-items: center; background: #fff; color: var(--purple); border-radius: 11px; }
.varyo-footer { max-width: none; padding: 70px 24px 32px; background: #fff; }
.varyo-footer > * { max-width: 1184px; margin-inline: auto; }
.varyo-footer .varyo-footer-columns { display: flex; flex-direction: row; gap: 50px; }
.varyo-footer h3 { margin-bottom: 15px; font-size: 13px; }
.varyo-footer p, .varyo-footer a { color: #657388; font-size: 12px; line-height: 1.9; }
.varyo-footer .wp-block-site-title a { color: var(--navy); font: 700 20px "Sora",sans-serif; }
.varyo-footer hr { margin-top: 38px; border-color: var(--line); }
.varyo-footer .varyo-footer-legal { margin-top: 24px; color: #7b8798; font-size: 11px; }
.varyo-single { overflow: visible; }
.varyo-article-hero { padding: 95px 24px 70px; background: linear-gradient(135deg,#f5f5ff,#fff 58%,#effbf7); }
.varyo-article-hero .wp-block-post-title { max-width: 980px; margin: 18px auto; font-size: clamp(38px,5vw,66px); line-height: 1.08; letter-spacing: -.045em; }
.varyo-post-meta { color: var(--purple); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.varyo-article-byline { color: #657388; font-size: 13px; }
.varyo-article-image { max-width: 1100px; margin: -30px auto 70px; }
.varyo-article-image img { border-radius: 20px; box-shadow: 0 25px 60px rgba(12,23,39,.12); }
.varyo-article-body { padding: 0 24px 80px; }
.varyo-article-body .wp-block-post-content { max-width: 760px; margin: auto; color: #33455c; font-size: 17px; line-height: 1.8; }
.varyo-article-body h2 { margin-top: 55px; color: var(--navy); font-size: 34px; }
.varyo-article-body h3 { margin-top: 38px; color: var(--navy); font-size: 24px; }
.varyo-article-lead { color: var(--navy); font-size: 21px; line-height: 1.7; }
.varyo-pattern-kicker { margin: 0; color: var(--purple); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.varyo-article-body .is-style-varyo-quick-start { margin: 42px 0; padding: 48px 40px 36px; border: 1px solid #d8d8ff; border-left: 6px solid var(--purple); border-radius: 0 20px 20px 0; background: #f8f8ff; }
.varyo-article-body .is-style-varyo-quick-start ol { margin: 26px 0 30px; padding: 0; counter-reset: varyo-quick-step; list-style: none; }
.varyo-article-body .is-style-varyo-quick-start li { min-height: 36px; margin: 0 0 18px; padding-left: 50px; position: relative; color: var(--navy); }
.varyo-article-body .is-style-varyo-quick-start li::before { content: counter(varyo-quick-step); counter-increment: varyo-quick-step; width: 32px; height: 32px; display: grid; place-items: center; position: absolute; top: -2px; left: 0; border-radius: 10px; background: var(--purple); color: #fff; font-family: Sora,sans-serif; font-size: 13px; font-weight: 700; }
.varyo-quick-start__footer { margin: 0; padding-top: 24px; border-top: 1px solid #dedff3; color: #62728a; font-size: 15px; }
.varyo-article-body .is-style-varyo-note { margin: 38px 0; padding: 34px 32px; border: 1px solid #d8d8ff; border-radius: 18px; background: #f8f8ff; }
.varyo-article-body .is-style-varyo-note > p:last-child { margin: 18px 0 0; color: #33455c; }
.varyo-article-body .is-style-varyo-article-cta { max-width: 890px; margin-top: 72px; margin-bottom: 20px; padding: 70px 42px; overflow: hidden; position: relative; border-radius: 24px; background: var(--purple); color: #fff; }
.varyo-article-body .is-style-varyo-article-cta::after { content: ""; width: 270px; height: 270px; position: absolute; top: -145px; right: -80px; border-radius: 50%; background: rgba(91,96,245,.7); }
.varyo-article-body .is-style-varyo-article-cta > * { position: relative; z-index: 1; }
.varyo-article-body .is-style-varyo-article-cta .varyo-pattern-kicker { color: #c7c8ff; }
.varyo-article-body .is-style-varyo-article-cta h2 { margin: 18px auto 14px; color: #fff; font-size: clamp(30px,4vw,42px); }
.varyo-article-body .is-style-varyo-article-cta p:not(.varyo-pattern-kicker) { max-width: 620px; margin-right: auto; margin-left: auto; color: #dedfff; }
.varyo-article-body .is-style-varyo-article-cta .wp-block-button__link { min-height: 54px; padding: 0 28px; display: inline-flex; align-items: center; border-radius: 12px; background: #fff; color: var(--purple); }
.varyo-article-body .wp-block-details { margin: 0; padding: 0; border-top: 1px solid var(--line); }
.varyo-article-body .wp-block-details:last-of-type { border-bottom: 1px solid var(--line); }
.varyo-article-body .wp-block-details summary { padding: 21px 0; display: flex; gap: 20px; align-items: center; color: var(--navy); font-family: Sora,sans-serif; font-weight: 700; cursor: pointer; list-style: none; }
.varyo-article-body .wp-block-details summary::-webkit-details-marker { display: none; }
.varyo-article-body .wp-block-details summary::after { content: "+"; margin-left: auto; color: var(--purple); font-size: 21px; font-weight: 500; }
.varyo-article-body .wp-block-details[open] summary::after { content: "−"; }
.varyo-article-body .wp-block-details > :not(summary) { margin: 0 34px 22px 0; color: #62728a; font-size: 15px; }
.varyo-article-body blockquote { margin: 38px 0; padding: 24px 28px; border-left: 4px solid var(--purple); background: #f5f5ff; }
.varyo-tutorial-image img { width: 100%; border-radius: 14px; }
.varyo-post-navigation { max-width: 1100px; padding: 30px 24px 75px; border-top: 1px solid var(--line); }
.varyo-blog-main { background: var(--soft); }
.varyo-blog-hero { padding: 96px 24px 76px; background: radial-gradient(circle at 18% 10%, rgba(91,96,245,.13), transparent 30%), radial-gradient(circle at 82% 90%, rgba(28,187,129,.12), transparent 30%), var(--paper); text-align: center; }
.varyo-blog-hero .varyo-kicker { margin: 0; color: var(--purple); font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.varyo-blog-hero h1 { max-width: 900px; margin: 18px auto; font-size: clamp(40px,5vw,64px); line-height: 1.06; letter-spacing: -.045em; }
.varyo-blog-hero > p:last-child { max-width: 680px; margin: 0 auto; color: var(--slate); font-size: 17px; line-height: 1.7; }
.varyo-blog-main > .wp-block-query { max-width: 1184px; margin: 0 auto; padding: 76px 24px 110px; }
.varyo-post-grid { gap: 24px; }
.varyo-post-card { min-height: 420px; height: 100%; overflow: hidden; display: flex; flex-direction: column; position: relative; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); box-shadow: 0 8px 24px rgba(12,23,39,.04); transition: transform .2s ease, box-shadow .2s ease; }
.varyo-post-card:hover { transform: translateY(-5px); box-shadow: 0 22px 48px rgba(12,23,39,.11); }
.varyo-post-card .wp-block-post-featured-image { width: 100%; margin: 0; overflow: hidden; background: #ececff; }
.varyo-post-card .wp-block-post-featured-image img { width: 100%; height: 190px; display: block; object-fit: cover; transition: transform .3s ease; }
.varyo-post-card:hover .wp-block-post-featured-image img { transform: scale(1.025); }
.varyo-post-card:not(:has(.wp-block-post-featured-image))::before { content: 'V'; min-height: 190px; display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, rgba(91,96,245,.2), transparent 34%), linear-gradient(135deg,#ececff,#f7f7ff); color: var(--purple); font: 700 44px Sora,sans-serif; }
.varyo-post-card:nth-child(3n+2):not(:has(.wp-block-post-featured-image))::before { background: radial-gradient(circle at 70% 20%, rgba(28,187,129,.2), transparent 35%), linear-gradient(135deg,#e9faf4,#f5fcf9); color: #087e56; }
.varyo-post-card:nth-child(3n):not(:has(.wp-block-post-featured-image))::before { background: radial-gradient(circle at 30% 80%, rgba(243,156,2,.2), transparent 35%), linear-gradient(135deg,#fff4df,#fffaf0); color: #bd7300; }
.varyo-post-card > .varyo-post-meta { margin: 25px 26px 0; }
.varyo-post-card > .wp-block-post-title { margin: 12px 26px 0; font-size: 22px; line-height: 1.3; letter-spacing: -.025em; }
.varyo-post-card > .wp-block-post-title a { color: var(--navy); }
.varyo-post-card > .wp-block-post-title a:hover { color: var(--purple); }
.varyo-post-card > .wp-block-post-excerpt { margin: 14px 26px 25px; color: var(--slate); font-size: 14px; line-height: 1.65; }
.varyo-post-card > .wp-block-post-excerpt p { margin: 0; }
.varyo-post-card > .wp-block-post-excerpt .wp-block-post-excerpt__more-text { margin-top: 20px; }
.varyo-post-card > .wp-block-post-excerpt .wp-block-post-excerpt__more-link { color: var(--purple); font-family: Sora,sans-serif; font-size: 12px; font-weight: 700; }
.varyo-blog-main .wp-block-query-pagination { margin-top: 50px; }
.editor-styles-wrapper .walkthrough-media img { display: block; }
.editor-styles-wrapper .varyo-article-body { padding-bottom: 30px; }
@media (max-width: 960px) {
  .hero.wp-block-group { grid-template-columns: 1fr; }
  .clean-catalog.wp-block-group, .analytics.wp-block-group { grid-template-columns: 1fr; }
  .varyo-footer-columns { flex-wrap: wrap !important; }
  .varyo-footer-brand { flex-basis: 100% !important; }
  .varyo-post-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .benefit-grid > .wp-block-column + .wp-block-column { border-left: 0; border-top: 1px solid var(--line); }
  .steps p { margin-left: 0; }
  .varyo-footer-columns { display: block; }
  .varyo-footer-columns > .wp-block-column { margin-bottom: 28px; }
  .varyo-article-hero { padding: 70px 18px 55px; }
  .varyo-article-image { margin-bottom: 45px; }
  .varyo-article-body .is-style-varyo-quick-start { padding: 34px 22px 25px; border-radius: 0 16px 16px 0; }
  .varyo-article-body .is-style-varyo-quick-start li { padding-left: 44px; }
  .varyo-article-body .is-style-varyo-note { padding: 27px 23px; border-radius: 15px; }
  .varyo-article-body .is-style-varyo-article-cta { margin-top: 55px; padding: 52px 23px; border-radius: 18px; }
  .proof-strip { gap: 14px 20px; }
  .varyo-blog-hero { padding: 72px 18px 58px; }
  .varyo-blog-hero h1 { font-size: 39px; }
  .varyo-blog-main > .wp-block-query { padding: 54px 18px 78px; }
  .varyo-post-grid { grid-template-columns: 1fr; }
}
/* Replaceable media: photos, GIFs, self-hosted video, YouTube/Vimeo embeds */
.varyo-media { max-width: 1080px; margin: 58px auto 22px; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: #fff; box-shadow: 0 25px 60px rgba(12,23,39,.14); }
.varyo-media__bar { display: flex; align-items: center; margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--line); background: #f6f7fb; color: #7b899c; font-size: 12px; }
.varyo-media__bar::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-right: 46px; border-radius: 50%; background: #ff9f91; box-shadow: 15px 0 0 #ffd28c, 30px 0 0 #9fe0c2; }
.varyo-media .wp-block-image, .varyo-media .wp-block-video, .varyo-media .wp-block-embed, .varyo-media figure { margin: 0; }
.varyo-media img, .varyo-media video { width: 100%; height: auto; display: block; }
.varyo-media iframe { max-width: 100%; border: 0; }
.varyo-media .wp-block-embed:not([class*="wp-embed-aspect"]) .wp-block-embed__wrapper { position: relative; padding-top: 56.25%; }
.varyo-media .wp-block-embed:not([class*="wp-embed-aspect"]) iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.varyo-media figcaption { margin: 0; padding: 13px 18px; border-top: 1px solid var(--line); color: #7b899c; font-size: 12px; text-align: center; }
.varyo-media--dark { border-color: #3c495b; background: #0f1b2c; box-shadow: 0 35px 80px rgba(0,0,0,.3); }
.varyo-media--dark .varyo-media__bar { border-bottom-color: #2b384a; background: #172437; color: #8b98aa; }
.varyo-media--dark figcaption { border-top-color: #2b384a; color: #8b98aa; }
.editor-styles-wrapper .varyo-media img, .editor-styles-wrapper .varyo-media video { display: block; }
@media (max-width: 640px) {
  .varyo-media { margin-top: 38px; border-radius: 13px; }
  .varyo-media__bar { padding: 11px 14px; font-size: 11px; }
  .varyo-media__bar::before { margin-right: 34px; }
}

/* WordPress wraps every template part in an element with the same tag, so the mockup's
   bare `footer` grid at the top of this file also hit that wrapper and squeezed the real
   footer into its first grid track. Reset the wrappers back to plain blocks. */
footer.wp-block-template-part, header.wp-block-template-part { display: block; max-width: none; margin: 0; padding: 0; }

/* Sticky header. A sticky element can only travel inside its own parent, and the template
   part wrapper is exactly as tall as the header, so the wrapper has to be the sticky one.
   position: sticky does not create a containing block, so the nav overlay stays viewport
   sized. */
header.wp-block-template-part { position: sticky; top: 0; z-index: 100; }
@media screen and (min-width: 601px) {
  body.admin-bar header.wp-block-template-part { top: 32px; }
}

/* Mobile navigation. Core switches to the overlay at 600px; the approved design drops the
   inline nav at 960px, so the burger is brought forward to match. */
@media (min-width: 600px) and (max-width: 960px) {
  .varyo-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
  .varyo-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
}
.varyo-navigation .wp-block-navigation__responsive-container-open,
.varyo-navigation .wp-block-navigation__responsive-container-close { color: var(--navy); }
.varyo-navigation .wp-block-navigation__responsive-container.is-menu-open { padding: 26px 22px; background: var(--paper); }
.varyo-navigation .wp-block-navigation__responsive-container.is-menu-open a { color: var(--navy); font-size: 17px; }

/* Footer wraps two across on small screens instead of stacking one item per row. Core
   forces flex-basis: 100% !important below 782px, so these selectors carry enough
   specificity to override it. */
@media (max-width: 780px) {
  .varyo-footer .varyo-footer-columns.wp-block-columns { display: flex; flex-wrap: wrap; gap: 30px 24px; }
  .varyo-footer .varyo-footer-columns.wp-block-columns > .wp-block-column { flex-grow: 1; flex-shrink: 1; flex-basis: 40% !important; margin-bottom: 0; }
  .varyo-footer .varyo-footer-columns.wp-block-columns > .varyo-footer-brand { flex-basis: 100% !important; }
}