/* Website X-Ray: scoped surfaces and a progressively enhanced layer inspector. */
.xray-section {
  --xr-accent: #b97818;
  --xr-ink: #2c251c;
  --xr-muted: #756858;
  --xr-rule: #decfb9;
  --xr-panel: #fffaf1;
  --xr-ease: cubic-bezier(.16, 1, .3, 1);
  padding-block: clamp(72px, 8vw, 120px);
  background: var(--color-bg-base);
  color: var(--color-text-white);
  scroll-margin-top: 90px;
}
.xray-section [hidden] { display: none !important; }
.xray-section button { font: inherit; cursor: pointer; }
.xray-section button:focus-visible, .xray-detail:focus-visible { outline: 2px solid var(--color-brand-cyan); outline-offset: 4px; }
.xray-section ::selection { background: #28758a; color: #fff; }
.xray-heading { display: grid; grid-template-columns: 1.15fr 1fr; gap: 60px; align-items: end; margin-bottom: 48px; }
.xray-heading .section-tag { margin-bottom: 20px; }
.xray-heading h2 { font-size: clamp(30px, 3.5vw, 48px); line-height: 1.6; font-weight: 800; }
.xray-intro { max-width: 470px; }
.xray-intro p { color: var(--color-text-body); font-size: 16px; line-height: 2; }
.xray-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-top: 24px; min-height: 48px; padding: 11px 20px; border: 1px solid var(--color-border-hover); border-radius: var(--radius-sm); background: var(--color-bg-surface-elevated); color: var(--color-text-white); transition: background .25s, border-color .25s; }
.xray-toggle:hover { border-color: var(--color-brand-cyan); }
.xray-toggle[aria-pressed="true"] { background: #173647; border-color: #62b9cf; color: #e6f5f8; }
.xray-workbench { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 38px; direction: ltr; align-items: start; }
.xray-preview, .xray-sidebar { min-width: 0; direction: rtl; }
html[dir="ltr"] .xray-preview,
html[dir="ltr"] .xray-sidebar { direction: ltr; }
.xray-preview { margin: 0; }
.xray-stage { position: relative; padding: 22px 14px 10px; isolation: isolate; }
.xray-plane { position: absolute; inset: 22px 14px 10px; border: 1px solid var(--color-border-hover); border-radius: 14px; z-index: -1; opacity: 0; transform: translateY(0); transition: transform .65s var(--xr-ease), opacity .45s; background: var(--color-bg-subtle); }
.xray-section[data-view="xray"] .xray-plane-back { transform: translate(0, -18px) scale(.95); opacity: .45; }
.xray-section[data-view="xray"] .xray-plane-front { transform: translate(0, -9px) scale(.978); opacity: .7; }
.xray-browser { position: relative; background: #fffdf8; color: var(--xr-ink); border: 1px solid var(--xr-rule); border-radius: 12px; overflow: hidden; box-shadow: 0 24px 48px -30px rgb(64 47 26 / 45%); margin-inline: auto; width: 100%; transition: width .65s var(--xr-ease), transform .6s var(--xr-ease); }
.xray-browser-bar { height: 38px; display: flex; direction: ltr; align-items: center; justify-content: space-between; padding: 0 16px; background: #3a342d; border-bottom: 1px solid #4e473f; color: #e5dbcd; font: 10px var(--font-en); letter-spacing: .06em; }
.xray-window-dots { display: flex; gap: 5px; }
.xray-window-dots i { display: block; width: 5px; height: 5px; border-radius: 50%; background: #9e9284; }
.xray-site { position: relative; container-type: inline-size; }
.xray-mock-nav { display: flex; justify-content: space-between; align-items: center; min-height: 62px; padding: 12px 24px; border-bottom: 1px solid #eadfce; background: #fffdf8; }
.xray-mock-brand { display: flex; align-items: baseline; gap: 5px; font-size: 17px; font-weight: 850; white-space: nowrap; }
.xray-mock-brand > span { color: var(--xr-accent); }
.xray-mock-brand small { color: var(--xr-muted); font-size: 8px; font-weight: 500; }
.xray-mock-links { display: flex; gap: 18px; font-size: 10px; color: var(--xr-muted); }
.xray-mock-contact { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid #c9b99f; font-size: 10px; border-radius: 4px; }
.xray-mock-contact b { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #b97818; color: #fff; font-size: 8px; }
.xray-mock-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 24px; align-items: center; padding: 34px 28px 30px; min-height: 282px; background: #f7f0e4; }
.xray-mock-eyebrow { font-size: 11px; color: var(--xr-accent); }
.xray-mock-copy h3 { font-size: clamp(19px, 2.05vw, 28px); line-height: 1.9; font-weight: 750; margin-top: 10px; }
.xray-mock-copy h3 em { font-style: normal; color: #856b42; }
.xray-mock-copy p { font-size: 12px; color: var(--xr-muted); line-height: 1.9; margin-top: 12px; }
.xray-mock-cta { display: inline-flex; align-items: center; gap: 16px; margin-top: 19px; padding: 9px 12px; font-size: 11px; background: #3c352d; color: #fffdf8; border-radius: 5px; }
.xray-honey-product { position: relative; min-height: 220px; display: grid; place-items: center; }
.xray-honey-jar { position: relative; z-index: 2; width: 112px; height: 142px; border-radius: 24px 24px 30px 30px; background: linear-gradient(90deg, #ad6511, #df9e2d 45%, #c77b14); box-shadow: inset 8px 0 14px rgb(255 255 255 / 25%), 0 18px 24px -16px rgb(93 51 9 / 60%); }
.xray-honey-jar::before { content: ''; position: absolute; top: -17px; left: 11px; right: 11px; height: 23px; border-radius: 6px 6px 2px 2px; background: #4b4032; border-top: 3px solid #776957; }
.xray-honey-jar > i { position: absolute; inset: 11px 13px auto auto; width: 13px; height: 76px; border-radius: 50%; background: rgb(255 255 255 / 28%); filter: blur(1px); }
.xray-honey-jar > span { position: absolute; top: 55px; left: 0; right: 0; display: grid; place-items: center; padding: 12px 8px; background: #f7edda; color: #44382b; border-block: 1px solid #d9c6a9; }
.xray-honey-jar b { font-size: 16px; }
.xray-honey-jar small { margin-top: 4px; font-size: 9px; color: #7d6040; }
.xray-honey-leaf { position: absolute; width: 64px; height: 30px; border-radius: 100% 0 100% 0; background: #667c4f; opacity: .7; }
.xray-honey-leaf-one { top: 48px; right: 22%; transform: rotate(-18deg); }
.xray-honey-leaf-two { bottom: 33px; left: 16%; transform: rotate(165deg) scale(.8); }
.xray-product-note { position: absolute; z-index: 3; bottom: 12px; left: 5px; min-width: 130px; padding: 10px 12px; border-radius: 7px; background: rgb(255 253 248 / 92%); box-shadow: 0 10px 25px -15px #4b3217; }
.xray-product-note strong, .xray-product-note span, .xray-product-note b { display: block; }
.xray-product-note strong { font-size: 10px; }
.xray-product-note span { color: var(--xr-muted); font-size: 8px; margin-top: 4px; }
.xray-product-note b { color: #9e6211; font-size: 9px; margin-top: 7px; }
.xray-shop-benefits { display: flex; justify-content: center; gap: clamp(18px, 6vw, 64px); padding: 10px 18px; border-block: 1px solid #eadfce; color: #6f604d; font-size: 9px; background: #fffdf8; }
.xray-shop-benefits span::before { content: '✓'; color: #78905e; margin-left: 5px; font-weight: 800; }
.xray-mock-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 24px; padding: 18px 0 24px; }
.xray-mock-services > div { display: grid; grid-template-columns: 48px 1fr; column-gap: 9px; align-items: center; min-width: 0; padding: 8px; border: 1px solid #eadfce; border-radius: 7px; background: #fff; }
.xray-product-thumb { grid-row: 1 / 4; position: relative; width: 48px; height: 56px; margin: 0 !important; border-radius: 5px; background: #f1e5d4; }
.xray-product-thumb i { position: absolute; width: 23px; height: 35px; left: 12px; bottom: 7px; border-radius: 5px 5px 8px 8px; background: #d88c20; }
.xray-product-thumb i::before { content: ''; position: absolute; top: -4px; left: 3px; right: 3px; height: 6px; border-radius: 2px; background: #4d4338; }
.xray-product-thumb-two { background: #eee0c7; }
.xray-product-thumb-two i { background: #ba6f16; }
.xray-product-thumb-three { background: #ece4d2; }
.xray-product-thumb-three i { background: #9b631e; }
.xray-mock-services strong { align-self: end; font-size: 10px; font-weight: 650; }
.xray-mock-services p { align-self: center; font-size: 8px; color: var(--xr-muted); margin: 1px 0; }
.xray-mock-services > div > b { align-self: start; font-size: 9px; color: #9e6211; }
.xray-mock-services > div > b small { font-size: 7px; font-weight: 500; }
.xray-preview figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 15px 14px 0; color: var(--color-text-body); font-size: 12px; }
.xray-view-label { color: var(--color-brand-cyan); }
.xray-sidebar { padding-top: 22px; }
.xray-sidebar-heading { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 0 0 18px; color: var(--color-text-body); font-size: 11px; border-bottom: 1px solid var(--color-border-subtle); }
.xray-sidebar-heading [lang="en"] { color: var(--color-text-white); font-family: var(--font-en); font-size: 12px; }
.xray-tabs { position: relative; margin-top: 12px; isolation: isolate; }
.xray-tabs button { display: flex; width: 100%; align-items: center; gap: 12px; min-height: 47px; padding: 10px 12px; background: transparent; color: var(--color-text-body); border: 0; border-radius: 6px; text-align: start; }
.xray-tabs button > span { font: 11px var(--font-mono); opacity: .75; }
.xray-tabs button strong { font-size: 14px; font-weight: 550; }
.xray-tabs button small { margin-inline-start: auto; font-size: 10px; font-family: var(--font-en); }
.xray-tabs button:hover { color: var(--color-brand-cyan); }
.xray-tabs button[aria-selected="true"] { color: var(--color-text-white); }
.xray-tab-indicator { position: absolute; top: 0; left: 0; width: var(--xr-tab-width, 100%); height: var(--xr-tab-height, 47px); background: var(--color-bg-surface-elevated); border: 1px solid var(--color-border-hover); border-radius: 6px; z-index: -1; transform: translate(var(--xr-tab-x, 0px), var(--xr-tab-y, 0px)); transition: transform .4s var(--xr-ease), width .4s var(--xr-ease); }
.xray-detail { padding: 24px 0 0; margin-top: 18px; border-top: 1px solid var(--color-border-subtle); min-height: 162px; }
.xray-detail h3 { font-size: 17px; line-height: 1.9; font-weight: 650; margin-bottom: 9px; }
.xray-detail p { color: var(--color-text-body); font-size: 13px; line-height: 2; }
.xray-footer { margin-top: 42px; padding-top: 24px; border-top: 1px solid var(--color-border-subtle); display: flex; justify-content: space-between; align-items: center; gap: 24px; color: var(--color-text-body); }
.xray-footer p { font-size: 14px; line-height: 2; }
.xray-footer strong { color: var(--color-text-white); font-weight: 650; }
.xray-footer > span { font: 11px var(--font-en); white-space: nowrap; }

/* Each analysis plane stays registered to the preview, not the viewport. */
.xray-overlays { position: absolute; inset: 0; pointer-events: none; }
.xray-overlay { position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .35s, transform .55s var(--xr-ease), visibility .35s; }
.xray-section[data-view="xray"][data-layer="ui"] .xray-overlay-ui,
.xray-section[data-view="xray"][data-layer="responsive"] .xray-overlay-responsive,
.xray-section[data-view="xray"][data-layer="seo"] .xray-overlay-seo,
.xray-section[data-view="xray"][data-layer="performance"] .xray-overlay-performance,
.xray-section[data-view="xray"][data-layer="development"] .xray-overlay-development,
.xray-section[data-view="xray"][data-layer="logic"] .xray-overlay-logic { opacity: 1; visibility: visible; transform: translateY(0); }
.xray-zone { position: absolute; border: 1px solid #7ec3d6; background: rgb(73 161 185 / 8%); border-radius: 4px; }
.xray-zone b { position: absolute; top: -13px; right: 9px; padding: 3px 8px; background: #193e50; color: #e2f4fa; border-radius: 3px; font-size: 11px; font-weight: 500; line-height: 1.7; white-space: nowrap; }
html[dir="ltr"] .xray-zone b { right: auto; left: 9px; }
.xray-zone code { font: 10px var(--font-mono); direction: ltr; display: inline-block; }
.xray-zone-nav { inset: 8px 10px auto; height: 46px; }
.xray-zone-hero { inset: 90px 16px 137px; }
.xray-zone-action { right: 20px; bottom: 116px; width: 210px; height: 46px; }
html[dir="ltr"] .xray-zone-action { right: auto; left: 20px; }
.xray-zone-heading { top: 109px; right: 18px; width: 52%; height: 110px; }
html[dir="ltr"] .xray-zone-heading { right: auto; left: 18px; }
.xray-zone-services { inset: auto 16px 13px; height: 90px; }
.xray-annotation { position: absolute; bottom: 18px; left: 18px; right: 18px; width: fit-content; margin-inline: auto; padding: 8px 14px; background: #1b3c4e; color: #e0eff6; font-size: 12px; border: 1px solid #567f91; border-radius: 5px; text-align: center; }
.xray-section[data-view="xray"][data-layer="responsive"] .xray-browser { width: 76%; }
.xray-device-labels { position: absolute; top: 12px; left: 12px; display: flex; gap: 5px; }
.xray-device-labels span { font-size: 10px; background: #213f52; padding: 4px 8px; color: #e3f4fa; border-radius: 3px; }
.xray-seo-tree { position: absolute; left: 18px; bottom: 23px; width: 265px; padding: 15px 18px; background: #172d3f; border: 1px solid #527a90; border-radius: 6px; display: grid; gap: 12px; }
.xray-seo-tree strong { color: #e4f1f6; font-size: 12px; font-weight: 650; }
.xray-seo-tree span { position: relative; padding-right: 13px; color: #c9dbe5; font-size: 10px; }
.xray-seo-tree span::before { content: ''; position: absolute; right: 0; top: .65em; width: 5px; height: 5px; border-radius: 50%; background: #77bfd1; }
html[dir="ltr"] .xray-seo-tree span { padding-right: 0; padding-left: 13px; }
html[dir="ltr"] .xray-seo-tree span::before { right: auto; left: 0; }
.xray-overlay-performance, .xray-overlay-logic { background: rgb(9 20 33 / 50%); }
.xray-waterfall { position: absolute; top: 24%; left: 8%; right: 8%; background: #182c3d; border: 1px solid #55768c; border-radius: 8px; padding: 22px; }
.xray-waterfall strong { display: block; font-size: 15px; font-weight: 600; margin-bottom: 20px; }
.xray-waterfall > div { display: flex; align-items: center; gap: 16px; margin-top: 15px; }
.xray-waterfall > div span { flex: 0 0 90px; font-size: 11px; }
.xray-waterfall i { height: 8px; width: 22%; border-radius: 2px; background: #84b6c9; transform-origin: right; }
.xray-waterfall > div:nth-of-type(2) i { margin-right: 8%; width: 35%; background: #6096ad; }
.xray-waterfall > div:nth-of-type(3) i { margin-right: 20%; width: 25%; background: #42788f; }
html[dir="ltr"] .xray-waterfall i { transform-origin: left; }
html[dir="ltr"] .xray-waterfall > div:nth-of-type(2) i { margin-right: 0; margin-left: 8%; }
html[dir="ltr"] .xray-waterfall > div:nth-of-type(3) i { margin-right: 0; margin-left: 20%; }
.xray-waterfall small { display: block; font-size: 10px; margin-top: 20px; color: #b7cbd9; }
.xray-logic-flow { position: absolute; top: 15%; right: 13%; left: 13%; display: flex; flex-direction: column; align-items: center; }
.xray-logic-flow > span, .xray-logic-flow > div span { background: #1c374a; border: 1px solid #7896ac; border-radius: 5px; padding: 12px 22px; color: #ecf3fa; font-size: 13px; text-align: center; }
.xray-logic-flow i { height: 25px; width: 1px; background: #8bb2c7; position: relative; }
.xray-logic-flow i::after { content: ''; position: absolute; bottom: 1px; left: -3px; width: 7px; height: 7px; border-right: 1px solid #8bb2c7; border-bottom: 1px solid #8bb2c7; transform: rotate(45deg); }
.xray-logic-flow > div { display: flex; gap: 12px; position: relative; }
.xray-logic-flow > div::before { content: ''; position: absolute; inset: 50% 0 auto; height: 1px; background: #8bb2c7; z-index: -1; }

@container (max-width: 560px) {
  .xray-mock-nav { padding-inline: 16px; }
  .xray-mock-links { display: none; }
  .xray-mock-hero { padding-inline: 20px; gap: 15px; grid-template-columns: 1.3fr .7fr; }
  .xray-mock-copy h3 { font-size: 20px; }
  .xray-honey-product { min-height: 190px; }
  .xray-product-note { display: none; }
}
@media (max-width: 1100px) {
  .xray-workbench { grid-template-columns: minmax(0, 1fr) 220px; gap: 22px; }
  .xray-heading { gap: 32px; }
  .xray-sidebar-heading { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 900px) {
  .xray-heading { grid-template-columns: 1fr; gap: 22px; margin-bottom: 28px; }
  .xray-intro { max-width: 620px; }
  .xray-workbench { display: flex; flex-direction: column; gap: 0; }
  .xray-preview { width: 100%; }
  .xray-sidebar { display: contents; }
  .xray-sidebar-heading { display: none; }
  .xray-tabs { display: flex; overflow-x: auto; gap: 4px; width: 100%; direction: rtl; padding: 5px 0 10px; margin-top: 24px; scrollbar-width: thin; scrollbar-color: var(--color-border-hover) transparent; scroll-padding-inline: 8px; }
  html[dir="ltr"] .xray-tabs { direction: ltr; }
  .xray-tabs button { width: auto; flex: 0 0 auto; min-width: 92px; min-height: 48px; padding: 10px 14px; gap: 8px; }
  .xray-tabs button small { display: none; }
  .xray-tabs button strong { font-size: 13px; }
  .xray-detail { width: 100%; min-height: 120px; margin-top: 12px; padding-top: 20px; }
  .xray-detail p { max-width: 640px; font-size: 14px; }
  .xray-stage { padding-inline: 6px; }
  .xray-plane { inset-inline: 6px; }
}
@media (max-width: 600px) {
  .xray-heading h2 { font-size: clamp(27px, 7vw, 36px); }
  .xray-intro p { font-size: 14px; }
  .xray-toggle { width: 100%; }
  .xray-browser-bar { padding-inline: 12px; height: 34px; font-size: 8px; }
  .xray-mock-nav { min-height: 55px; padding: 10px 14px; }
  .xray-mock-brand { font-size: 14px; }
  .xray-mock-contact { font-size: 9px; }
  .xray-mock-hero { grid-template-columns: 1.2fr .8fr; gap: 10px; padding: 25px 15px 22px; min-height: 260px; }
  .xray-mock-copy h3 { font-size: 19px; line-height: 1.8; }
  .xray-mock-copy p { font-size: 10px; }
  .xray-mock-cta { gap: 8px; margin-top: 13px; padding: 8px 9px; font-size: 9px; }
  .xray-honey-product { min-height: 165px; }
  .xray-honey-jar { width: 74px; height: 101px; border-radius: 16px 16px 20px 20px; }
  .xray-honey-jar::before { top: -12px; height: 16px; }
  .xray-honey-jar > span { top: 39px; padding-block: 7px; }
  .xray-honey-jar b { font-size: 12px; }
  .xray-honey-jar small { font-size: 7px; }
  .xray-shop-benefits { justify-content: space-between; gap: 4px; padding-inline: 12px; font-size: 8px; }
  .xray-mock-services { margin-inline: 12px; gap: 6px; padding-block: 14px 18px; }
  .xray-mock-services > div { display: block; padding: 6px; text-align: center; }
  .xray-product-thumb { display: block; width: 100%; height: 50px; }
  .xray-product-thumb i { left: calc(50% - 11px); }
  .xray-mock-services strong { font-size: 10px; }
  .xray-mock-services p { display: none; }
  .xray-mock-services > div > b { display: block; margin-top: 4px; font-size: 7px; white-space: nowrap; }
  .xray-preview figcaption { font-size: 10px; padding-inline: 6px; }
  .xray-section[data-view="xray"][data-layer="responsive"] .xray-browser { width: 93%; }
  .xray-zone-hero { inset: 80px 10px 142px; }
  .xray-zone-action { bottom: 137px; right: 12px; width: 150px; height: 38px; }
  html[dir="ltr"] .xray-zone-action { right: auto; left: 12px; }
  .xray-zone-heading { right: 12px; top: 104px; width: calc(100% - 24px); height: 100px; }
  html[dir="ltr"] .xray-zone-heading { right: auto; left: 12px; }
  .xray-zone-services { inset: auto 10px 10px; height: 86px; }
  .xray-zone b { font-size: 10px; }
  .xray-seo-tree { left: 12px; bottom: 18px; width: calc(100% - 24px); }
  .xray-annotation { bottom: 18px; left: 10px; right: 10px; font-size: 11px; padding: 8px 10px; }
  .xray-waterfall { right: 12px; left: 12px; padding: 18px 14px; }
  .xray-waterfall > div { gap: 8px; }
  .xray-waterfall > div span { flex-basis: 77px; font-size: 10px; }
  .xray-logic-flow { right: 12px; left: 12px; top: 17%; }
  .xray-logic-flow > span, .xray-logic-flow > div span { padding: 12px 16px; font-size: 12px; }
  .xray-detail { min-height: 166px; }
  .xray-footer { margin-top: 22px; display: block; }
  .xray-footer p { font-size: 13px; }
  .xray-footer > span { display: block; margin-top: 12px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .xray-section *, .xray-section *::before, .xray-section *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}