/* Clipfloor /lp2 — final identity (2026-11-07) from output/clipfloor-mobile-concept:
   charcoal #191E1A, warm ivory #F4F2EB, citron #DEF17A (accent / primary action), IBM Plex Sans Arabic.
   Standalone: this page does NOT load site.css, so the original "/" keeps its own look. Mobile-first, RTL, logical
   properties only, no inline styles (CSP). Arabic gets no Latin tracking. */

@font-face { font-family: 'Plex'; src: url(/assets/fonts/plex-arabic-400.woff2) format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Plex'; src: url(/assets/fonts/plex-arabic-500.woff2) format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Plex'; src: url(/assets/fonts/plex-arabic-600.woff2) format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Plex'; src: url(/assets/fonts/plex-arabic-700.woff2) format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Plex'; src: url(/assets/fonts/plex-latin-400.woff2) format('woff2'); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plex'; src: url(/assets/fonts/plex-latin-600.woff2) format('woff2'); font-weight: 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plex'; src: url(/assets/fonts/plex-latin-700.woff2) format('woff2'); font-weight: 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }

:root {
  --dark: #191e1a;          /* main dark ground */
  --dark-2: #222823;        /* raised dark */
  --dark-3: #2c332d;        /* cards / controls on dark */
  --ivory: #f4f2eb;         /* main light ground */
  --paper: #f9f8f3;         /* the request */
  --sage: #e5e8dc;          /* the product / colour stage */
  --white: #ffffff;
  --citron: #def17a;        /* accent + primary action (never the product green) */
  --citron-2: #d1e65f;      /* pressed / hover */
  --on-citron: #1b2118;
  --text: #20241f;
  --text-2: #5b6158;        /* 5.5:1 on ivory */
  --text-3: #656b62;        /* 4.8:1 on ivory */
  --on-dark: #f7f6f0;
  --on-dark-2: #adb3aa;     /* 7.9:1 on #191e1a */
  --on-dark-3: #8f968b;     /* 5.3:1 on #191e1a */
  --line: #d9dcd0;
  --line-2: #c4c9ba;
  --line-dark: rgba(247, 246, 240, 0.14);
  --ok: #2f6a3b;
  --err: #a8261b;
  --gutter: clamp(18px, 4.5vw, 48px);
  --wrap: 1200px;
  --sec: clamp(56px, 8vw, 112px);
  --r: 4px;
  --r-card: 8px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --t-fast: 160ms;
  --t-mid: 260ms;
  --t-slow: 520ms;
  color-scheme: light;
  accent-color: var(--text);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; background: var(--ivory); color: var(--text); font: 400 1rem/1.75 'Plex', system-ui, sans-serif; overflow-x: clip; }
img, video, svg { display: block; max-inline-size: 100%; }
img, video { block-size: auto; }
picture { display: contents; }
a { color: inherit; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
[hidden] { display: none !important; }
bdi { unicode-bidi: isolate; }
::selection { background: var(--citron); color: var(--on-citron); }
:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; border-radius: 4px; }
.sec--dark :focus-visible, .hero :focus-visible, .masthead :focus-visible, .site-footer :focus-visible, .dock :focus-visible { outline-color: var(--citron); }
.visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; inset-block-start: -60px; z-index: 60; padding: 10px 14px; background: var(--citron); color: var(--on-citron); border-radius: var(--r); }
.skip:focus { inset-block-start: 12px; }
.sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.i { inline-size: 1.25em; block-size: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ltr-input { direction: ltr; text-align: start; }

/* ---------- type ---------- */
/* Concept sizes on phones (h1 45/1.22, h2 34/1.35 at 390), growing on larger screens; 360 px steps down slightly. */
.h1 { font-size: clamp(2.6rem, 1.95rem + 3.6vw, 4.2rem); font-weight: 600; line-height: 1.22; text-wrap: balance; }
.h2 { font-size: clamp(1.95rem, 1.65rem + 2vw, 2.9rem); font-weight: 600; line-height: 1.35; text-wrap: balance; }
.h2--big { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.8rem); line-height: 1.28; }
.h3 { font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem); font-weight: 600; line-height: 1.5; }
.h4 { font-size: 1.05rem; font-weight: 600; line-height: 1.5; }
.soft, .accent { color: var(--text-3); }
.hero .soft, .sec--dark .soft, .sec--dark .accent, .hero .accent { color: var(--citron); }
.lead { font-size: clamp(1rem, 0.96rem + 0.25vw, 1.125rem); line-height: 1.85; color: var(--text-2); max-inline-size: 60ch; text-wrap: pretty; }
.sec--dark .lead { color: var(--on-dark-2); }
.note { display: flex; gap: 8px; align-items: flex-start; font-size: 0.875rem; line-height: 1.7; color: var(--text-3); }
.note .i { inline-size: 1.1em; block-size: 1.1em; margin-block-start: 0.3em; }
.sec--dark .note { color: var(--on-dark-3); }
.cap { font-size: 0.8125rem; line-height: 1.6; color: var(--text-3); }
.sec--dark .cap { color: var(--on-dark-3); }
.label { font-size: 0.9375rem; font-weight: 600; }
.avail { font-weight: 400; font-size: 0.8125rem; color: var(--text-3); }

/* ---------- layout ---------- */
.wrap { max-inline-size: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.sec { padding-block: var(--sec); }
.sec--dark { background: var(--dark); color: var(--on-dark); }
.sec--ivory { background: var(--ivory); }
.sec--paper { background: var(--paper); }
.sec--sage { background: var(--sage); }
.head { display: grid; gap: 14px; margin-block-end: clamp(26px, 4vw, 44px); max-inline-size: 760px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; min-block-size: 52px; padding: 12px 20px; border-radius: var(--r); border: 1px solid transparent; font: 600 1rem/1.3 'Plex', system-ui, sans-serif; text-decoration: none; transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease; }
.btn:active { transform: scale(0.98); }
.btn--accent { background: var(--citron); color: var(--on-citron); }
.btn--accent:hover { background: var(--citron-2); }
.btn--dark { background: var(--dark); color: var(--on-dark); }
.btn--dark:hover { background: #2c332d; }
.btn--line { background: transparent; border-color: var(--line-2); color: var(--text); }
.btn--xl { min-block-size: 60px; font-size: 1.0625rem; padding-inline: 22px; }
.btn--small { min-block-size: 40px; padding: 8px 14px; font-size: 0.9375rem; }
.btn--wide { inline-size: 100%; }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
.linkbtn { display: inline-flex; align-items: center; gap: 6px; min-block-size: 44px; padding: 0; background: none; border: 0; font: 500 0.9375rem/1.4 'Plex', system-ui, sans-serif; text-decoration: underline; text-decoration-color: var(--line-2); }
.sec--dark .linkbtn { text-decoration-color: var(--on-dark-3); }
.ibtn { display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--white); color: var(--text); }
.ibtn[aria-pressed='true'] { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }

/* tabs: text with an underline, scrollable on phones (no pill rows) */
.tabs { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); margin-block-end: 22px; border-block-end: 1px solid var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; gap: 8px; min-block-size: 48px; padding: 0 0 4px; border: 0; border-block-end: 2px solid transparent; margin-block-end: -1px; background: none; font: 500 0.9688rem/1.3 'Plex', system-ui, sans-serif; color: var(--text-3); white-space: nowrap; transition: color var(--t-fast) ease, border-color var(--t-fast) ease; }
.tab:hover { color: var(--text); }
.tab[aria-selected='true'] { color: var(--text); border-color: var(--text); font-weight: 600; }
.tabs--dark { border-color: var(--line-dark); }
.tabs--dark .tab { color: var(--on-dark-3); }
.tabs--dark .tab:hover, .tabs--dark .tab[aria-selected='true'] { color: var(--on-dark); }
.tabs--dark .tab[aria-selected='true'] { border-color: var(--citron); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.seg__btn, .seg__opt span { display: inline-flex; align-items: center; min-block-size: 40px; padding: 6px 14px; border: 0; border-radius: var(--r); background: none; font: 500 0.9375rem/1.2 'Plex', system-ui, sans-serif; color: var(--text-2); }
.seg__btn[aria-pressed='true'], .seg__opt input:checked + span { background: var(--dark); color: var(--on-dark); }
.seg__opt { position: relative; }
.seg__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg__opt input:focus-visible + span { outline: 3px solid var(--text); outline-offset: 1px; }

/* ---------- masthead ---------- */
.masthead { position: sticky; inset-block-start: 0; z-index: 30; display: flex; align-items: center; gap: 16px; block-size: 64px; padding-inline: var(--gutter); background: var(--dark); color: var(--on-dark); border-block-end: 1px solid var(--line-dark); }
.brand { text-decoration: none; display: inline-flex; }
.wordmark { direction: ltr; font: 700 1.6rem/1 'Plex', Arial, sans-serif; letter-spacing: -0.045em; color: var(--on-dark); }
.wordmark em { font-style: normal; color: var(--citron); }
.site-nav { display: none; }
.masthead__end { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.menu { position: relative; }
.menu summary { list-style: none; display: grid; place-items: center; inline-size: 44px; block-size: 44px; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu__close, .menu[open] .menu__open { display: none; }
.menu[open] .menu__close { display: block; }
.menu__panel { position: fixed; inset-inline: 0; inset-block-start: 64px; display: grid; padding: 8px var(--gutter) 22px; background: var(--dark); border-block-end: 1px solid var(--line-dark); }
.menu__panel a { display: flex; align-items: center; min-block-size: 52px; border-block-end: 1px solid var(--line-dark); font-weight: 500; font-size: 1.0625rem; text-decoration: none; }
@media (min-width: 1100px) {
  .site-nav { display: flex; gap: 26px; margin-inline-start: 34px; font-size: 0.9375rem; }
  .site-nav a { color: var(--on-dark-2); text-decoration: none; }
  .site-nav a:hover { color: var(--on-dark); }
  .menu { display: none; }
}

/* ---------- hero: message and action first, then the real floor ---------- */
.hero { background: var(--dark); color: var(--on-dark); display: grid; gap: 22px; padding-block: 28px 0; }
.hero__copy { display: grid; gap: 16px; padding-inline: var(--gutter); align-content: start; }
.hero__lead { color: var(--on-dark-2); font-size: 1.0625rem; line-height: 1.85; max-inline-size: 44ch; }
.hero__copy .btn { inline-size: 100%; max-inline-size: 460px; margin-block-start: 6px; }
.hero__micro { font-size: 0.8125rem; color: var(--on-dark-3); }
.hero__media { position: relative; margin-inline: 12px; block-size: min(52svh, 420px); overflow: hidden; border-radius: 2px; background: var(--dark-2); }
.hero__img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 66%; }
.hero__label { position: absolute; inset-inline: 12px; inset-block-end: 12px; display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; background: rgba(23, 32, 25, 0.88); color: var(--on-dark); font-size: 0.75rem; line-height: 1.5; }
.hero__label span:first-child { color: var(--citron); }
/* Trust bar: 4 facts. Phones: a clean 2 × 2 grid with inner dividers; wider screens: one row of four. */
.trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 0 20px; text-align: center; }
.trust li { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 14px 10px; }
.trust li:nth-child(odd) { border-inline-end: 1px solid var(--line-dark); }
.trust li:nth-child(-n + 2) { border-block-end: 1px solid var(--line-dark); }
@media (min-width: 720px) {
  .trust { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 22px 8px 28px; }
  .trust li { padding: 0 10px; }
  .trust li:nth-child(odd), .trust li:nth-child(-n + 2) { border-inline-end: 0; border-block-end: 0; }
  .trust li:nth-child(n + 2) { border-inline-start: 1px solid var(--line-dark); }
}
.trust .i { color: var(--citron); }
.trust b { font-weight: 500; font-size: 0.8125rem; line-height: 1.45; }
@media (min-width: 960px) {
  .hero { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto; padding-block: 56px 0; column-gap: 40px; }
  .hero__copy { padding-inline-start: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); padding-inline-end: 0; align-self: center; gap: 20px; }
  .hero__media { margin: 0; block-size: min(72svh, 640px); }
  .trust { grid-column: 1 / -1; max-inline-size: var(--wrap); margin-inline: auto; inline-size: 100%; padding-block: 28px 34px; }
  .trust b { font-size: 0.9375rem; }
}

/* ---------- proof ---------- */
.proof__grid { display: grid; gap: 26px; }
.proof__grid > * { min-inline-size: 0; }
.ba__duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; direction: ltr; }
.ba__cell { position: relative; aspect-ratio: 3 / 4.2; overflow: hidden; background: var(--sage); }
.ba__cell img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ba__tag { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; padding: 3px 10px; border-radius: var(--r); background: var(--ivory); font-size: 0.8125rem; font-weight: 600; direction: rtl; }
.ba__tag--after { background: var(--citron); color: var(--on-citron); }
.ba .is-revealing .ba__cell--after img { animation: reveal var(--t-slow) var(--ease-io) both; }
@keyframes reveal { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0); } }
.ba__pair { display: grid; gap: 10px; }
.film { display: grid; gap: 10px; }
/* Tablets: the single-column film would otherwise be ~900 px tall; keep it phone-sized next to the stills above. */
@media (min-width: 600px) and (max-width: 959px) { .film { max-inline-size: 440px; } }
.video { position: relative; overflow: hidden; background: var(--dark-2); }
.video video { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 62%; }
.video__toggle { position: absolute; inset-inline-end: 12px; inset-block-end: 12px; display: grid; place-items: center; inline-size: 48px; block-size: 48px; border: 0; border-radius: 50%; background: var(--citron); color: var(--on-citron); }
.video__pause, .is-playing .video__play { display: none; }
.is-playing .video__pause { display: block; }
@media (min-width: 960px) {
  .proof__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px; align-items: start; }
  .film { margin-block-start: 70px; }
}

/* ---------- benefits: one story at a time ---------- */
.story { display: grid; gap: 26px; }
.js .story:not(.is-active) { display: none; }
.bmedia { display: grid; gap: 10px; max-inline-size: 460px; inline-size: 100%; justify-self: center; }
.bmedia__frame { position: relative; display: block; inline-size: 100%; aspect-ratio: 4 / 5; overflow: hidden; padding: 0; margin: 0; background: #0f1310; border: 1px solid var(--line-dark); color: inherit; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.bmedia__frame:focus-visible { outline: 3px solid var(--citron); outline-offset: 3px; }
.bmedia__frame video, .bmedia__frame img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; }
.bmedia.is-started .bmedia__poster { display: none; }
.story__copy { display: grid; gap: 14px; align-content: start; }
.story__lead { font-size: 1.0625rem; line-height: 1.85; color: var(--on-dark); }
.story__copy > p { color: var(--on-dark-2); }
.story__cond { display: flex; gap: 10px; padding: 14px 16px; background: var(--dark-2); border-inline-start: 1px solid var(--citron); font-size: 0.9375rem; line-height: 1.75; color: var(--on-dark-2); }
.story__cond .i { color: var(--citron); margin-block-start: 0.35em; }
.story__ev { display: flex; gap: 12px; align-items: center; }
.story__ev img { inline-size: 72px; block-size: 72px; object-fit: cover; }
.story__ev figcaption { display: grid; font-size: 0.875rem; line-height: 1.5; }
.story__ev small { color: var(--citron); font-size: 0.75rem; }
.story__next { justify-self: start; }
@media (min-width: 960px) {
  .story { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
  .bmedia { justify-self: stretch; }
}

/* ---------- uses ---------- */
.use { display: grid; gap: 22px; }
.js .use:not(.is-active) { display: none; }
.use__media { aspect-ratio: 4 / 3.4; overflow: hidden; background: var(--sage); }
.use__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.use__copy { display: grid; gap: 14px; align-content: start; }
.use__copy > p { color: var(--text-2); max-inline-size: 52ch; }
.use__copy .btn { justify-self: start; }
.fit { display: flex; gap: 10px; padding: 14px 16px; background: var(--white); border: 1px solid var(--line); font-size: 0.9375rem; line-height: 1.75; }
.fit .i { margin-block-start: 0.35em; color: var(--text-3); }
@media (min-width: 960px) { .use { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 52px; align-items: center; } .use__media { aspect-ratio: 5 / 4; } }

/* ---------- product: 3D tile, nine colours ---------- */
.product__grid { display: grid; gap: 24px; grid-template-areas: 'head' 'viewer' 'controls'; }
.product__grid > * { min-inline-size: 0; }
.product__head { grid-area: head; display: grid; gap: 12px; }
.product__copy { grid-area: controls; }
.viewer { grid-area: viewer; }
.product__copy { display: grid; gap: 18px; align-content: start; }
.colour-pick { display: grid; gap: 12px; padding-block: 18px; border-block: 1px solid var(--line-2); }
/* Nine colours always on one row: equal columns that shrink with the screen (≥ 34px targets at 360px). */
.sw3s { display: grid; grid-template-columns: repeat(9, minmax(0, 44px)); gap: 4px; justify-content: start; margin: 0; padding: 0; list-style: none; }
.sw3s > li { min-inline-size: 0; }
.sw3 { position: relative; display: grid; place-items: center; inline-size: 100%; aspect-ratio: 1; max-inline-size: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.sw3__dot { inline-size: 80%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14); }
.sw3__dot img { inline-size: 100%; block-size: 100%; object-fit: cover; transform: scale(2.2); }
.sw3[aria-pressed='true'] .sw3__dot { box-shadow: 0 0 0 2px var(--sage), 0 0 0 4px var(--text); }
.colour-pick__actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.specs { display: grid; }
.specs > div { display: flex; justify-content: space-between; gap: 14px; padding-block: 10px; border-block-end: 1px solid var(--line-2); font-size: 0.9375rem; }
.specs dt { color: var(--text-3); }
.specs dd { text-align: end; font-weight: 500; }
.specs--short { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
.specs--short dd { font-weight: 600; font-size: 1.0625rem; }
.sheet summary, .designer-box summary, .planner summary, .extras summary { display: flex; align-items: center; gap: 10px; min-block-size: 52px; cursor: pointer; list-style: none; font-weight: 600; }
.sheet summary::-webkit-details-marker, .designer-box summary::-webkit-details-marker, .planner summary::-webkit-details-marker, .extras summary::-webkit-details-marker { display: none; }
.chev { margin-inline-start: auto; transition: transform var(--t-mid) var(--ease-out); }
details[open] > summary .chev { transform: rotate(180deg); }
.guarantee { display: flex; gap: 12px; padding: 16px; background: var(--white); border: 1px solid var(--line); }
.viewer { display: grid; gap: 12px; }
.viewer__stage { position: relative; aspect-ratio: 1; overflow: hidden; background: #eef0e6; border: 1px solid var(--line); touch-action: pan-y; }
.viewer__stage canvas { position: absolute; inset: 0; inline-size: 100% !important; block-size: 100% !important; outline: none; }
@media (pointer: fine) { .viewer.is-live .viewer__stage { touch-action: none; } }
.viewer__poster { position: absolute; inset: 14% 9%; inline-size: 82%; block-size: 72%; object-fit: contain; transition: opacity var(--t-mid) ease; }
.viewer.is-live .viewer__poster { opacity: 0; pointer-events: none; }
.viewer__load { position: absolute; inset-block-end: 16px; inset-inline-start: 50%; transform: translateX(50%); z-index: 2; white-space: nowrap; }
.viewer.is-live .viewer__load, .viewer.is-loading .viewer__load, .viewer.is-error .viewer__load { display: none; }
.viewer__status { position: absolute; inset-block-end: 22px; inset-inline: 16px; text-align: center; color: var(--text-2); font-size: 0.9375rem; }
.viewer__error { position: absolute; inset-inline: 14px; inset-block-end: 14px; z-index: 3; display: grid; gap: 10px; justify-items: start; padding: 14px; background: var(--white); border: 1px solid var(--line-2); font-size: 0.9375rem; }
.viewer__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.designer-box { margin-block-start: 30px; border-block: 1px solid var(--line-2); }
.designer-grid { display: grid; gap: 22px; padding-block: 8px 26px; }
.designer { display: grid; gap: 18px; }
.designer fieldset, .field--plain { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-inline-size: 0; }
.designer .btn { justify-self: start; }
.sws { display: flex; flex-wrap: wrap; gap: 10px 8px; }
.sw { position: relative; display: grid; justify-items: center; gap: 4px; inline-size: 62px; text-align: center; cursor: pointer; }
.sw input { position: absolute; opacity: 0; inset: 0; margin: 0; z-index: 1; cursor: pointer; }
.sw__dot { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%; overflow: hidden; background: var(--ivory); box-shadow: 0 0 0 1px var(--line-2); }
.sw__dot img { inline-size: 100%; block-size: 100%; object-fit: cover; transform: scale(2.2); }
.sw__name { font-size: 0.75rem; line-height: 1.3; color: var(--text-2); }
.sw__avail { display: none; }
.sw input:checked ~ .sw__dot { box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--text); }
.sw input:checked ~ .sw__name { color: var(--text); font-weight: 600; }
.sw input:focus-visible ~ .sw__dot { outline: 3px solid var(--text); outline-offset: 4px; }
.floor { display: grid; gap: 10px; }
.floor__plane { perspective: 1000px; padding: 6px 2px 14px; }
.floor__svg { inline-size: 100%; block-size: auto; transform: rotateX(22deg); transform-origin: 50% 100%; filter: drop-shadow(0 18px 24px rgba(25, 30, 26, 0.2)); --c1: #202224; --c2: #efc21a; }
.floor__svg use { --c: var(--c1); }
.floor__svg use.t2 { --c: var(--c2); }
.tile__base { fill: var(--c); transition: fill var(--t-mid) ease; }
.floor figcaption { font-size: 0.8125rem; color: var(--text-3); }
@media (min-width: 960px) {
  .product__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: 'head viewer' 'controls viewer'; column-gap: 56px; row-gap: 18px; align-items: start; }
  .viewer { align-self: center; }
  .viewer__stage { aspect-ratio: 6 / 5; }
  .designer-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center; }
}

/* ---------- comparison: one ✓ / ✗ matrix, Clipfloor as the dark highlighted column ---------- */
.vs { margin-block-start: 4px; }
.vs__table { inline-size: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.vs__colus { inline-size: 62px; }
.vs__col { inline-size: 48px; }
.vs__table th, .vs__table td { padding: 15px 2px; text-align: center; vertical-align: middle; border-block-end: 1px solid var(--line); }
.vs__table thead th, .vs__corner { padding-block: 14px 12px; border-block-end-color: var(--line-2); font-size: 0.75rem; font-weight: 600; line-height: 1.35; color: var(--text-2); }
.vs__table tbody th { padding-inline: 0 10px; text-align: start; font-size: 0.875rem; font-weight: 500; line-height: 1.55; color: var(--text); }
.vs__table .vs__us { background: var(--dark); color: var(--on-dark); border-block-end-color: rgba(247, 246, 240, 0.09); }
.vs__table thead .vs__us { padding-block-start: 18px; border-start-start-radius: var(--r-card); border-start-end-radius: var(--r-card); }
.vs__table tbody tr:last-child th, .vs__table tbody tr:last-child td { border-block-end: 0; }
.vs__table tbody tr:last-child .vs__us { border-end-start-radius: var(--r-card); border-end-end-radius: var(--r-card); }
.vs__brand { display: inline-block; direction: ltr; font-size: 0.8125rem; font-weight: 700; letter-spacing: -0.01em; color: var(--on-dark); }
.vs__brand em { font-style: normal; color: var(--citron); }
.vs__mark { display: inline-grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 50%; }
.vs__mark .i { inline-size: 15px; block-size: 15px; stroke-width: 2.6; }
.vs__mark--yes { background: var(--sage); color: var(--text); }
.vs__mark--us { inline-size: 32px; block-size: 32px; background: var(--citron); color: var(--on-citron); }
.vs__mark--us .i { inline-size: 17px; block-size: 17px; }
.vs__mark--no { color: var(--text-3); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.vs__mark--no .i { inline-size: 13px; block-size: 13px; stroke-width: 2.4; }
.vs__mark--dep { color: var(--text-3); box-shadow: inset 0 0 0 1.5px var(--line-2); opacity: 0.8; }
.vs__mark--dep .i { inline-size: 13px; block-size: 13px; stroke-width: 2.4; }
.vs__legend { display: flex; align-items: center; gap: 10px; padding-block: 14px 4px; color: var(--text-3); font-size: 0.8125rem; }
.vs__legend .vs__mark { inline-size: 22px; block-size: 22px; }
.vs__legend .vs__mark .i { inline-size: 11px; block-size: 11px; }
.compare__foot { display: grid; margin-block-start: 26px; }
.compare__foot .btn { inline-size: 100%; }
@media (min-width: 720px) {
  .vs { padding: 8px 28px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); }
  .vs__colus { inline-size: 168px; }
  .vs__col { inline-size: 140px; }
  .vs__table th, .vs__table td { padding-block: 20px; }
  .vs__table thead th, .vs__corner { font-size: 0.9375rem; padding-block: 20px 16px; }
  .vs__table thead .vs__us { padding-block-start: 22px; }
  .vs__table tbody th { font-size: 1.0625rem; padding-inline-end: 24px; }
  .compare__foot { justify-items: start; }
  .compare__foot .btn { inline-size: auto; }
  .vs__brand { font-size: 1.0625rem; }
  .vs__mark { inline-size: 34px; block-size: 34px; }
  .vs__mark--us { inline-size: 40px; block-size: 40px; }
  .vs__mark .i { inline-size: 18px; block-size: 18px; }
  .vs__legend { padding-block: 16px 12px; font-size: 0.875rem; }
  .vs__legend .vs__mark { inline-size: 26px; block-size: 26px; }
  .vs__legend .vs__mark .i { inline-size: 13px; block-size: 13px; }
  .vs__mark--us .i { inline-size: 21px; block-size: 21px; }
}

/* ---------- install, team, projects ---------- */
.steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 74%); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.steps::-webkit-scrollbar { display: none; }
.step { scroll-snap-align: start; display: grid; gap: 8px; align-content: start; }
.step__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--dark-2); margin-block-end: 6px; }
.step__media img, .step__media .video, .step__media video { inline-size: 100%; block-size: 100%; object-fit: cover; }
.step__media .video video { aspect-ratio: auto; }
.step__n { font-size: 0.875rem; color: var(--citron); font-variant-numeric: tabular-nums; }
.step > p:last-child { color: var(--on-dark-2); font-size: 0.9375rem; }
.install .note { margin-block-start: 18px; }
.team { display: grid; gap: 24px; margin-block-start: clamp(36px, 6vw, 64px); padding-block-start: clamp(28px, 5vw, 48px); border-block-start: 1px solid var(--line-dark); }
.team__photo img { inline-size: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; object-position: 50% 30%; }
.team__copy { display: grid; gap: 14px; align-content: start; }
.team__copy > p { color: var(--on-dark-2); }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: 150px; gap: 12px; overflow-x: auto; scrollbar-width: thin; padding-block: 8px 6px; }
.rail figure { display: grid; gap: 6px; }
.rail img { inline-size: 150px; block-size: 190px; object-fit: cover; }
.rail figcaption { display: grid; font-size: 0.8125rem; line-height: 1.45; }
.rail figcaption span { color: var(--on-dark-3); }
@media (min-width: 960px) {
  .steps { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; margin-inline: 0; padding-inline: 0; gap: 22px; }
  .team { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; align-items: center; }
}

/* ---------- price ---------- */
.price__grid { display: grid; gap: 32px; }
.price__grid .lead { margin-block: 12px 22px; }
.factors { counter-reset: f; border-block-start: 1px solid var(--line-2); }
.factors li { counter-increment: f; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; padding-block: 14px; border-block-end: 1px solid var(--line-2); }
.factors li::before { content: counter(f); grid-row: span 2; font-weight: 600; color: var(--text-3); }
.factors p { color: var(--text-2); font-size: 0.9375rem; }
.price__side { display: grid; gap: 14px; align-content: start; }
.pricecard { padding: clamp(20px, 3vw, 28px); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); display: grid; gap: 4px; }
.pricecard__k { color: var(--text-3); font-size: 0.9375rem; }
.pricecard__v { font-size: clamp(2.2rem, 1.8rem + 2vw, 3.2rem); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.pricecard__v span { font-size: 1rem; font-weight: 500; color: var(--text-3); }
.pricecard__v--ask { font-size: clamp(1.3rem, 1.2rem + 0.6vw, 1.6rem); line-height: 1.5; }
.pricecard__was { font-size: 0.5em; color: var(--text-3); font-weight: 500; }
.pricecard__tax { font-size: 0.875rem; color: var(--text-3); }
.pricecard__rows { margin-block-start: 12px; border-block-start: 1px solid var(--line); }
.pricecard__rows > div { display: flex; justify-content: space-between; gap: 12px; padding-block: 11px; border-block-end: 1px solid var(--line); font-size: 0.9375rem; }
.pricecard__rows dt { display: inline-flex; gap: 8px; align-items: center; color: var(--text-2); }
.pricecard__rows dd { text-align: end; font-weight: 500; font-variant-numeric: tabular-nums; }
.pricecard__ex { margin-block-start: 10px; font-size: 0.875rem; color: var(--text-3); }
.delivery, .after { margin-block-start: clamp(36px, 6vw, 64px); display: grid; gap: 14px; }
.table-wrap { overflow-x: auto; }
.zones { inline-size: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.zones th, .zones td { padding: 11px 10px; text-align: start; border-block-end: 1px solid var(--line); }
.zones thead th { color: var(--text-3); font-weight: 600; font-size: 0.875rem; }
.zones__v--no { color: var(--text-3); }
.timeline { display: grid; gap: 16px; }
.timeline li { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; }
.timeline__n { grid-row: span 2; display: grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: 50%; background: var(--dark); color: var(--citron); font-weight: 600; font-size: 0.9375rem; }
.timeline p { color: var(--text-2); font-size: 0.9375rem; }
@media (min-width: 960px) {
  .price__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; }
  .timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
  .timeline li { grid-template-columns: 1fr; row-gap: 10px; }
  .timeline__n { grid-row: auto; }
}

/* ---------- request / order ---------- */
.builder { display: grid; gap: 26px; align-items: start; }
.builder > * { min-inline-size: 0; }
.builder__form { display: grid; gap: 22px; padding: 22px 18px; background: var(--white); border: 1px solid #d6dacd; border-radius: var(--r-card); box-shadow: 0 12px 35px rgba(27, 33, 24, 0.04); }
.progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.progress__btn { inline-size: 100%; display: grid; justify-items: start; gap: 6px; padding: 0 0 12px; border: 0; border-block-end: 2px solid var(--line); background: none; text-align: start; font: 500 0.875rem/1.3 'Plex', system-ui, sans-serif; color: var(--text-3); }
.progress__btn:disabled { cursor: default; }
.progress__n { display: grid; place-items: center; inline-size: 26px; block-size: 26px; border-radius: 50%; border: 1px solid var(--line-2); font-size: 0.8125rem; font-weight: 600; }
.progress li[aria-current='step'] .progress__btn { border-color: var(--text); color: var(--text); }
.progress li[aria-current='step'] .progress__n { background: var(--dark); border-color: var(--dark); color: var(--citron); }
.progress li.is-done .progress__btn { border-color: var(--text-2); color: var(--text-2); }
.panel { border: 0; margin: 0; padding: 0; min-inline-size: 0; display: grid; gap: 22px; }
.js .panel:not(.is-current) { display: none; }
.panel.is-entering { animation: panel-in var(--t-mid) var(--ease-out) both; }
.panel.is-entering.is-back { animation-name: panel-in-back; }
@keyframes panel-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes panel-in-back { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.panel__actions .btn--dark { min-inline-size: 150px; }
.panel__actions--submit { flex-direction: column; align-items: stretch; }
.panel__actions--submit .linkbtn { align-self: flex-start; }
.field { display: grid; gap: 8px; }
.field__label { font-size: 0.9688rem; font-weight: 600; }
.field__opt { font-weight: 400; font-size: 0.8125rem; color: var(--text-3); }
.field__hint { font-size: 0.8125rem; color: var(--text-3); line-height: 1.6; }
.field__error { font-size: 0.875rem; font-weight: 500; color: var(--err); }
.field input[type='text'], .field input[type='tel'], .field textarea, .callback input { inline-size: 100%; min-block-size: 52px; padding: 12px 14px; border: 1px solid #d9ddd1; border-radius: var(--r); background: var(--white); font-size: 1rem; }
.field textarea { min-block-size: 92px; resize: vertical; }
.field input:focus, .field textarea:focus, .callback input:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px rgba(222, 241, 122, 0.85); }
.field [aria-invalid='true'], .callback [aria-invalid='true'] { border-color: var(--err) !important; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.card { position: relative; display: block; cursor: pointer; }
.card input { position: absolute; inset: 0; opacity: 0; margin: 0; z-index: 1; cursor: pointer; }
.card__box { display: grid; grid-template-columns: 48px 1fr; column-gap: 10px; align-items: center; min-block-size: 64px; padding: 8px; border: 1px solid #d9ddd1; border-radius: var(--r); background: var(--white); transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease; }
.card__img { grid-row: span 2; inline-size: 48px; block-size: 48px; overflow: hidden; display: grid; place-items: center; background: var(--ivory); }
.card__img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.card__label { font-weight: 600; font-size: 0.875rem; line-height: 1.35; }
.card__note { font-size: 0.75rem; color: var(--text-3); line-height: 1.35; }
.card input:checked + .card__box { border-color: #6d8050; background: #f2f7e8; box-shadow: 0 0 0 1px #6d8050; }
.card input:focus-visible + .card__box { outline: 3px solid var(--text); outline-offset: 2px; }
.area { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.area__input { position: relative; flex: 0 1 220px; }
.area__input input { padding-inline-start: 46px !important; font-weight: 600; font-size: 1.15rem !important; font-variant-numeric: tabular-nums; }
.area__unit { position: absolute; inset-inline-start: 14px; inset-block-start: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.toggle { display: inline-flex; align-items: center; gap: 10px; min-block-size: 44px; font-size: 0.9375rem; cursor: pointer; }
.toggle input { inline-size: 20px; block-size: 20px; margin: 0; }
.planner, .extras { border-block: 1px solid var(--line); }
.planner > :not(summary) { margin-block-end: 12px; }
.planner__inputs { display: flex; align-items: flex-end; gap: 10px; }
.planner__inputs > div { display: grid; gap: 4px; flex: 1; font-size: 0.8125rem; color: var(--text-2); }
.planner__inputs input { min-block-size: 48px; padding: 10px 12px; border: 1px solid #d9ddd1; border-radius: var(--r); inline-size: 100%; font-size: 1rem; }
.planner__x { padding-block-end: 12px; color: var(--text-3); }
.planner__result { font-weight: 600; margin-block-start: 8px; }
.sws--form { gap: 10px 4px; }
.sw--form { inline-size: 70px; }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.opts--compact { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
.opt { position: relative; display: block; cursor: pointer; }
.opt input { position: absolute; inset: 0; opacity: 0; margin: 0; z-index: 1; cursor: pointer; }
.opt__box { display: grid; gap: 2px; min-block-size: 50px; align-content: center; padding: 10px 12px; border: 1px solid #d9ddd1; border-radius: var(--r); background: var(--white); }
.opt__label { font-weight: 600; font-size: 0.875rem; }
.opt__hint { font-size: 0.75rem; color: var(--text-3); }
.opt input:checked + .opt__box { border-color: #6d8050; background: #f2f7e8; box-shadow: 0 0 0 1px #6d8050; }
.opt input:focus-visible + .opt__box { outline: 3px solid var(--text); outline-offset: 2px; }
.hp { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.review { display: grid; gap: 12px; padding: 16px; background: #f4f5ee; border-radius: var(--r); }
.review__title, .mode__title { font-weight: 600; display: flex; gap: 8px; align-items: center; }
.review__text { color: var(--text-2); font-size: 0.9375rem; }
/* Review recap: one row per answer, each with its own "change" link (easy to scan on a phone). */
.recap { display: grid; margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--r); }
.recap__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'k edit' 'v edit'; align-items: center; gap: 2px 12px; padding: 12px 14px; border-block-end: 1px solid var(--line); }
.recap__row:last-child { border-block-end: 0; }
.recap dt { grid-area: k; font-size: 0.8125rem; color: var(--text-3); }
.recap dd { grid-area: v; margin: 0; font-size: 1rem; font-weight: 600; color: var(--text); min-inline-size: 0; }
.recap dd.is-empty { font-weight: 400; color: var(--text-3); }
.recap__edit { grid-area: edit; display: inline-flex; align-items: center; gap: 6px; min-block-size: 40px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 999px; background: none; color: var(--text-2); font: 500 0.8125rem/1 'Plex', system-ui, sans-serif; cursor: pointer; }
.recap__edit .i { inline-size: 15px; block-size: 15px; }
.recap__edit:hover { border-color: var(--text); color: var(--text); }
.recap__colours { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.recap__chip { display: inline-flex; align-items: center; gap: 6px; }
.recap__dot { inline-size: 16px; block-size: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.mode { display: grid; gap: 10px; padding-block-start: 10px; border-block-start: 1px solid var(--line); }
.lines { inline-size: 100%; border-collapse: collapse; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.lines td { padding-block: 7px; border-block-end: 1px dashed var(--line-2); }
.lines td:last-child { text-align: end; font-weight: 500; white-space: nowrap; }
.lines tr.lines__total td { border: 0; padding-block-start: 10px; font-weight: 700; font-size: 1.15rem; }
.accept { display: flex; gap: 10px; align-items: flex-start; padding: 12px; background: var(--white); border: 1px solid var(--line-2); border-radius: var(--r); font-size: 0.9375rem; line-height: 1.7; cursor: pointer; }
.accept input { inline-size: 22px; block-size: 22px; margin: 2px 0 0; flex: none; }
.reasons { display: grid; gap: 4px; padding-inline-start: 18px; list-style: disc; font-size: 0.9375rem; color: var(--text-2); }
.privacy { display: flex; gap: 8px; font-size: 0.8125rem; color: var(--text-3); }
.form-alert { padding: 14px 16px; border-radius: var(--r); background: #fbeae7; color: #6e1a12; font-weight: 500; }
.summary { display: grid; gap: 14px; padding: 20px; background: var(--ivory); border: 1px solid var(--line); border-radius: var(--r-card); }
.summary__title { font-size: 1.0625rem; font-weight: 600; }
.srow { display: flex; justify-content: space-between; gap: 12px; padding-block: 8px; border-block-end: 1px solid var(--line); font-size: 0.9375rem; }
.srow dt { color: var(--text-3); }
.srow dd { text-align: end; font-weight: 500; }
.srow.is-empty dd { color: var(--text-3); font-weight: 400; }
.estimate { display: grid; gap: 8px; }
.estimate__title { font-weight: 600; }
.estimate p, .estimate li { font-size: 0.875rem; color: var(--text-2); }
.estimate__price strong { font-weight: 600; font-size: 1.05rem; color: var(--text); }
.estimate__price s { color: var(--text-3); margin-inline-end: 6px; }
.estimate__lines { display: grid; font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.estimate__row { display: flex; justify-content: space-between; gap: 12px; padding-block: 6px; border-block-end: 1px dashed var(--line-2); }
.estimate__row dd { font-weight: 500; }
.estimate__row--unknown dd { color: var(--text-3); font-weight: 400; }
.estimate__row--total { border: 0; padding-block-start: 10px; }
.estimate__row--total dt, .estimate__row--total dd { font-weight: 700; font-size: 1.05rem; color: var(--text); }
.estimate__meta { font-size: 0.8125rem !important; color: var(--text-3) !important; }
.estimate__warn { font-size: 0.875rem !important; color: #7a4600 !important; font-weight: 500; }
.callback { display: grid; gap: 8px; padding-block-start: 14px; border-block-start: 1px solid var(--line); }
.callback__title { display: flex; gap: 8px; align-items: center; font-weight: 600; }
.callback__row { display: flex; gap: 8px; }
.callback__row input { flex: 1; min-inline-size: 0; }
.callback__ok { font-size: 0.9375rem; font-weight: 500; color: var(--ok); }
.callback__ok:empty { display: none; }
.summary__wa { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 0.875rem; color: var(--text-2); }
.success { display: grid; gap: 16px; max-inline-size: 640px; margin-inline: auto; padding: clamp(22px, 4vw, 36px); background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); }
.success:focus { outline: none; }
.stamp { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 6px 14px; border-radius: var(--r); background: var(--dark); color: var(--citron); font-weight: 600; animation: stamp-in 380ms var(--ease-out) both; }
@keyframes stamp-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
.success__title { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); font-weight: 600; line-height: 1.35; }
.success__ref { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; padding: 12px 14px; background: var(--ivory); border: 1px dashed var(--line-2); }
.success__ref strong { font-size: 1.25rem; letter-spacing: 0.04em; direction: ltr; }
.success ol { display: grid; gap: 8px; counter-reset: s; }
.success ol li { counter-increment: s; display: grid; grid-template-columns: 26px 1fr; gap: 8px; color: var(--text-2); }
.success ol li::before { content: counter(s); display: grid; place-items: center; inline-size: 24px; block-size: 24px; border-radius: 50%; background: var(--sage); font-size: 0.8125rem; font-weight: 600; color: var(--text); }
.success__actions { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
@media (min-width: 960px) {
  .builder { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 36px; }
  .builder__form { padding: 30px; }
  .summary { position: sticky; inset-block-start: 84px; }
  .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card__box { grid-template-columns: 1fr; row-gap: 8px; align-items: start; }
  .card__img { grid-row: auto; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; }
}

/* ---------- FAQ, closing, footer ---------- */
.faq__grid { display: grid; gap: 6px; }
.faq__list { border-block-start: 1px solid #cbd0c0; }
.qa { border-block-end: 1px solid #cbd0c0; }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-block-size: 62px; padding-block: 12px; cursor: pointer; list-style: none; font-weight: 500; font-size: 1rem; }
.qa summary::-webkit-details-marker { display: none; }
.qa__icon { transition: transform var(--t-mid) var(--ease-out); }
.qa[open] .qa__icon { transform: rotate(45deg); }
.qa__a { padding-block-end: 16px; color: var(--text-2); font-size: 0.9375rem; line-height: 1.9; max-inline-size: 68ch; }
@media (min-width: 960px) { .faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: start; } .faq .head { position: sticky; inset-block-start: 96px; } }
/* Closing: the three real installs + one price action + the payment reassurance right under the button. */
.closing__grid { display: grid; gap: 30px; grid-template-areas: 'media' 'copy'; align-items: center; }
.closing__copy { grid-area: copy; display: grid; gap: 20px; justify-items: start; min-inline-size: 0; }
.closing .h2 .accent { display: block; }
.closing__lead { color: var(--on-dark-2); font-size: clamp(1rem, 0.96rem + 0.25vw, 1.125rem); line-height: 1.85; max-inline-size: 46ch; }
.closing__action { display: grid; gap: 12px; inline-size: 100%; max-inline-size: 520px; }
.closing .closing__cta { inline-size: 100%; }
.closing__risk { display: flex; align-items: center; gap: 8px; color: var(--citron); font-weight: 500; font-size: 0.9375rem; }
.closing__assure { display: flex; flex-wrap: wrap; gap: 10px 22px; inline-size: 100%; margin: 0; padding: 18px 0 0; list-style: none; border-block-start: 1px solid var(--line-dark); color: var(--on-dark-2); font-size: 0.875rem; }
.closing__assure li { display: inline-flex; align-items: center; gap: 8px; }
.closing__assure .i { color: var(--on-dark-3); }
.closing__alt { color: var(--on-dark-3); font-size: 0.9375rem; }
.closing__alt a { color: var(--on-dark); text-decoration: underline; text-decoration-color: var(--on-dark-3); text-underline-offset: 0.3em; }
.closing__alt a:hover { text-decoration-color: var(--citron); }
.closing__media { grid-area: media; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.closing__shot { position: relative; margin: 0; overflow: hidden; aspect-ratio: 3 / 4; border-radius: var(--r); background: var(--dark-2); }
.closing__shot img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.closing__shot figcaption { position: absolute; inset-inline-start: 8px; inset-block-end: 8px; padding: 3px 9px; border-radius: var(--r); background: rgba(25, 30, 26, 0.84); color: var(--on-dark); font-size: 0.75rem; font-weight: 500; }
@media (min-width: 960px) {
  .closing__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: 'copy media'; gap: 72px; }
  .closing__media { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: 1 / 1.12; gap: 10px; }
  .closing__shot { aspect-ratio: auto; }
  .closing__shot--0 { grid-row: span 2; }
  .closing__shot figcaption { inset-inline-start: 12px; inset-block-end: 12px; font-size: 0.8125rem; }
}
.contact { display: grid; gap: 12px; inline-size: 100%; margin-block-start: 18px; padding-block-start: 22px; border-block-start: 1px solid var(--line-dark); }
.contact__list { display: grid; gap: 10px; }
.contact__list li { display: grid; grid-template-columns: 24px auto 1fr; gap: 10px; align-items: center; }
.contact__list .k { color: var(--on-dark-3); }
.site-footer { background: var(--dark); color: var(--on-dark-2); padding-block: 30px calc(30px + env(safe-area-inset-bottom)); border-block-start: 1px solid var(--line-dark); font-size: 0.875rem; }
.footer__grid { display: grid; gap: 14px; justify-items: start; }
.privacy-note summary { cursor: pointer; min-block-size: 44px; display: inline-flex; align-items: center; color: var(--on-dark); text-decoration: underline; }
.privacy-note p { max-inline-size: 70ch; margin-block-end: 8px; }
.footer__links a { color: var(--on-dark); }

/* ---------- mobile dock ---------- */
.dock { position: fixed; inset-inline: 10px; inset-block-end: calc(10px + env(safe-area-inset-bottom)); z-index: 25; display: flex; align-items: center; gap: 8px; padding: 8px; padding-inline-start: 14px; border-radius: var(--r-card); background: var(--dark); color: var(--on-dark); box-shadow: 0 10px 30px rgba(25, 30, 26, 0.3); transform: translateY(140%); transition: transform var(--t-mid) var(--ease-out); }
.dock.is-on { transform: none; }
.dock__summary { flex: 1; min-inline-size: 0; font-size: 0.8125rem; color: var(--on-dark-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Store-style buy bar: price per m² + free delivery on one side, one big action on the other. */
.dock__info { flex: 1; min-inline-size: 0; display: grid; gap: 1px; padding-inline-start: 4px; }
.dock__price { margin: 0; display: flex; align-items: baseline; gap: 5px; line-height: 1.15; color: var(--on-dark); }
.dock__price b { font-size: 1.375rem; font-weight: 700; color: var(--citron); font-variant-numeric: tabular-nums; }
.dock__price span { font-size: 0.8125rem; color: var(--on-dark-2); }
.dock__price--free { align-items: center; }
.dock__price--free b { font-size: 1rem; }
.dock__price--free .i { inline-size: 18px; block-size: 18px; color: var(--citron); }
.dock__sub { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; color: var(--on-dark-2); }
.dock .dock__cta { flex: none; min-block-size: 50px; gap: 8px; padding-inline: 20px; font-size: 1rem; font-weight: 700; }
.dock .btn { min-block-size: 46px; }
.ibtn--dock { background: var(--dark-3); border-color: var(--dark-3); color: var(--on-dark); }
@media (min-width: 960px) { .dock { display: none !important; } }

.preview-bar { position: sticky; inset-block-start: 0; z-index: 40; padding: 10px 16px; background: var(--citron); color: var(--on-citron); font: 500 0.9375rem/1.4 system-ui, sans-serif; }

/* ---------- reduced motion: collapse, never just shorten ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; }
}

/* Uses tabs on phones: wrapped chips, all visible in 2–3 rows (no sideways scroll). */
@media (max-width: 759px) {
  .uses .tabs { flex-wrap: wrap; gap: 8px; overflow: visible; margin-inline: 0; padding-inline: 0; border: 0; }
  .uses .tab { min-block-size: 42px; padding: 0 14px; margin: 0; border: 1px solid var(--line-2); border-radius: 999px; background: var(--paper); font-size: 0.875rem; color: var(--text-2); }
  .uses .tab .i { inline-size: 16px; block-size: 16px; }
  .uses .tab[aria-selected='true'] { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }
}

/* Multi-colour pick (2–3 colours): order badges on the swatches and a live counter. */
.sw[data-n]::after { content: attr(data-n); position: absolute; inset-block-start: -4px; inset-inline-end: 6px; z-index: 2; display: grid; place-items: center; inline-size: 22px; block-size: 22px; border-radius: 50%; background: var(--dark); color: var(--citron); font: 700 0.75rem/1 'Plex', system-ui, sans-serif; box-shadow: 0 0 0 2px var(--white); animation: pick-in 160ms var(--ease-out); }
@keyframes pick-in { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pickcount { display: inline-flex; align-items: center; gap: 8px; margin-block: 2px 10px; padding: 6px 12px; border-radius: 999px; background: var(--sage); color: var(--text); font-size: 0.875rem; font-weight: 500; }
.pickcount.is-done { background: var(--dark); color: var(--citron); }
@media (prefers-reduced-motion: reduce) { .sw[data-n]::after { animation: none; } }

/* ---------- edge ramps and corners ---------- */
.edges__grid { display: grid; gap: 12px; }
.edge { margin: 0; display: grid; overflow: hidden; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-card); }
.edge__img { display: grid; place-items: center; padding: 18px; background: radial-gradient(circle at 50% 42%, #ffffff 0%, #eeede6 78%); }
.edge__img img { inline-size: 100%; block-size: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(25, 30, 26, 0.18)); }
.edge figcaption { display: grid; gap: 4px; padding: 14px 16px 16px; }
.edge figcaption p { color: var(--text-2); font-size: 0.9375rem; line-height: 1.7; }
.edge--system .edge__img { aspect-ratio: 1 / 1; padding: 22px; }
/* Phones: the two pieces as compact side-by-side rows (picture + text), so the section stays short. */
.edge--ramp, .edge--corner { grid-template-columns: minmax(0, 40%) minmax(0, 1fr); align-items: stretch; }
.edge--ramp .edge__img, .edge--corner .edge__img { padding: 12px; }
.edge--ramp figcaption, .edge--corner figcaption { align-content: center; padding: 12px 14px; }
.edge--ramp figcaption p, .edge--corner figcaption p { font-size: 0.875rem; line-height: 1.65; }
.edges__foot { display: grid; gap: 10px; margin-block-start: 22px; }
.edges__add { inline-size: 100%; }
.edges__check, .edges__add.is-added .edges__plus { display: none; }
.edges__add.is-added .edges__check { display: block; }
.edges__add.is-added { background: var(--citron); color: var(--on-citron); }
@media (min-width: 960px) {
  .edges__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: 'sys ramp' 'sys corner'; gap: 16px; }
  .edge--system { grid-area: sys; }
  .edge--ramp { grid-area: ramp; }
  .edge--corner { grid-area: corner; }
  .edge--ramp, .edge--corner { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .edge--ramp .edge__img, .edge--corner .edge__img { padding: 24px 32px; }
  .edge--ramp figcaption, .edge--corner figcaption { padding: 14px 18px 18px; }
  .edges__foot { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; }
  .edges__add { inline-size: auto; }
}

/* ---------- thank-you panel: confirmation, the 24-hour call, next steps ---------- */
.success--ty { gap: 18px; padding: 22px; }
.ty__head { display: grid; gap: 10px; justify-items: start; }
.ty__icon { display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 50%; background: var(--citron); color: var(--on-citron); animation: ty-pop 320ms var(--ease-out) both; }
.ty__icon .i { inline-size: 26px; block-size: 26px; stroke-width: 2.6; }
@keyframes ty-pop { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ty__title { margin: 0; font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); font-weight: 600; line-height: 1.35; }
.ty__ref { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 6px 12px; border: 1px dashed var(--line-2); border-radius: var(--r); background: var(--ivory); font-size: 0.875rem; color: var(--text-2); }
.ty__ref strong { color: var(--text); font-size: 1rem; letter-spacing: 0.04em; }
.ty__call { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; padding: 18px; border-radius: var(--r-card); background: var(--dark); color: var(--on-dark-2); }
.ty__call-icon { grid-row: span 2; display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 50%; background: rgba(222, 241, 122, 0.14); color: var(--citron); }
.ty__call-icon .i { inline-size: 22px; block-size: 22px; }
.ty__call-text { display: grid; gap: 6px; font-size: 0.9375rem; line-height: 1.75; }
.ty__call-title { margin: 0; color: var(--on-dark); font-size: 1.125rem; font-weight: 600; line-height: 1.5; }
.ty__phone { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 4px 0 0; padding-block-start: 10px; border-block-start: 1px solid rgba(247, 246, 240, 0.12); font-size: 0.875rem; }
.ty__num { color: var(--citron); font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.ty__dup { margin: 0; padding: 10px 14px; border-radius: var(--r); background: var(--sage); font-size: 0.875rem; }
.ty__steps-title { margin: 4px 0 0; font-size: 1rem; font-weight: 600; }
.ty__steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ty__steps li { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding-block-end: 16px; }
.ty__steps li:last-child { padding-block-end: 0; }
.success .ty__steps { gap: 0; counter-reset: none; }
.success .ty__steps li { counter-increment: none; color: inherit; }
.success .ty__steps li::before { content: none; }
.success .ty__steps li:not(:last-child)::before { content: ''; display: block; position: absolute; inset-inline-start: 15px; inset-block: 32px 0; inline-size: 2px; block-size: auto; border-radius: 0; background: var(--line); }
.ty__n { display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 50%; background: var(--sage); color: var(--text); font-weight: 600; font-size: 0.875rem; }
.ty__steps b { display: block; font-weight: 600; line-height: 2; }
.ty__steps p { margin: 0; color: var(--text-2); font-size: 0.9375rem; line-height: 1.7; }
.success--ty .success__actions { display: grid; gap: 10px; justify-items: start; padding-block-start: 6px; }
@media (prefers-reduced-motion: reduce) { .ty__icon { animation: none; } }

/* ---------- free delivery (owner's offer): hero pill, form box, "فابور" chips ---------- */
.freepill { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin: 0 0 4px; padding: 7px 14px 7px 12px; border-radius: 999px; background: var(--citron); color: var(--on-citron); font-size: 0.9375rem; font-weight: 600; box-shadow: 0 6px 18px rgba(222, 241, 122, 0.25); }
.freepill .i { inline-size: 18px; block-size: 18px; }
.freebox { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px; border-radius: var(--r-card); background: var(--dark); color: var(--on-dark-2); font-size: 0.9375rem; line-height: 1.7; }
.freebox__icon { display: grid; place-items: center; inline-size: 46px; block-size: 46px; border-radius: 50%; background: var(--citron); color: var(--on-citron); }
.freebox__icon .i, .freebox > .i { inline-size: 24px; block-size: 24px; }
.freebox > .i.freebox__icon { padding: 11px; box-sizing: content-box; }
.freebox__title { margin: 0 0 2px; color: var(--citron); font-size: 1.125rem; font-weight: 700; }
.freebox p { margin: 0; }
.freechip { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: var(--citron); color: var(--on-citron); font-size: 0.875rem; font-weight: 700; }
.pricecard__free dd { display: flex; justify-content: flex-end; }
.trust .trust__free { color: var(--citron); }
.trust .trust__free .i { color: var(--citron); }
.zones__free { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 14px; border-radius: var(--r); background: var(--dark); color: var(--citron); font-weight: 600; font-size: 0.9375rem; }
.zones__free .i { inline-size: 20px; block-size: 20px; flex: none; }
.closing__assure .closing__free { color: var(--citron); font-weight: 600; }
.closing__assure .closing__free .i { color: var(--citron); }
.recap__row--free { grid-template-areas: 'k' 'v'; grid-template-columns: minmax(0, 1fr); }

/* Summary price box: the price per m² only, plainly labelled. */
.estimate__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; margin: 0; }
.estimate .estimate__price strong { font-size: 1.5rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.estimate .estimate__unit { font-size: 0.875rem; color: var(--text-2); }
.estimate .estimate__full { margin-block-start: 4px; padding: 10px 12px; border-radius: var(--r); background: var(--white); border: 1px solid var(--line); color: var(--text-2); font-size: 0.875rem; line-height: 1.7; }

/* ---------- step 3: WhatsApp question (two big taps) ---------- */
.wa { min-inline-size: 0; margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.wa legend { padding: 0; margin-block-end: 8px; }
.wa__choice { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; }
.wa__opt { position: relative; display: block; cursor: pointer; }
.wa__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.wa__opt span { display: flex; align-items: center; justify-content: center; gap: 6px; min-block-size: 48px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--white); font-weight: 600; font-size: 0.9375rem; color: var(--text-2); transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease; }
.wa__opt span .i { display: none; inline-size: 18px; block-size: 18px; }
.wa__opt input:checked + span { border-color: var(--dark); background: var(--dark); color: var(--on-dark); }
.wa__opt input:checked + span .i { display: block; color: var(--citron); }
.wa__opt input:focus-visible + span { outline: 3px solid var(--text); outline-offset: 2px; }
.wa__other { display: grid; gap: 6px; margin-block-start: 6px; padding: 14px; border-radius: var(--r); background: var(--ivory); animation: wa-in 200ms var(--ease-out); }
@keyframes wa-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- confirm-phone popup: bottom sheet on phones, centred card on desktop ---------- */
/* Phones: a card pinned near the TOP of the visible area. iOS opens the keyboard over the page without resizing it,
   so a bottom sheet ends up hidden; --vv-top / --vv-h follow the visual viewport (set by the script while open). */
.confirm { position: fixed; inset-block: calc(var(--vv-top, 0px) + 10px) auto; inset-inline: 10px; margin: 0 auto; inline-size: auto; max-inline-size: 460px; max-block-size: calc(var(--vv-h, 100dvh) - 20px); overflow-y: auto; overscroll-behavior: contain; padding: 0; border: 0; border-radius: 16px; background: var(--white); color: var(--text); box-shadow: 0 16px 44px rgba(25, 30, 26, 0.3); }
.confirm::backdrop { background: rgba(25, 30, 26, 0.55); }
.confirm[open] { animation: sheet-in 240ms var(--ease-out); }
@keyframes sheet-in { from { transform: translateY(-14px); opacity: 0; } to { transform: none; opacity: 1; } }
.confirm__box { display: grid; gap: 12px; justify-items: stretch; padding: 20px; }
/* Keyboard open: drop the decorative icon and tighten spacing so the field and the button stay in view. */
.confirm.is-kb .confirm__icon { display: none; }
.confirm.is-kb .confirm__box { gap: 10px; padding: 16px; }
.confirm.is-kb .confirm__title { font-size: 1.1875rem; }
.confirm.is-kb .confirm__body { font-size: 0.875rem; line-height: 1.6; }
.confirm__icon { justify-self: start; display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 50%; background: var(--citron); color: var(--on-citron); }
.confirm__icon .i { inline-size: 24px; block-size: 24px; }
.confirm__title { margin: 0; font-size: 1.375rem; font-weight: 700; line-height: 1.35; }
.confirm__body { margin: 0; color: var(--text-2); font-size: 0.9375rem; line-height: 1.75; }
.confirm__input { inline-size: 100%; min-block-size: 56px; padding: 0 16px; border: 2px solid var(--line-2); border-radius: var(--r); background: var(--paper); font-size: 1.375rem; font-weight: 600; letter-spacing: 0.04em; text-align: center; color: var(--text); }
.confirm__input:focus { outline: none; border-color: var(--dark); background: var(--white); }
.confirm__input[aria-invalid='true'] { border-color: #b3261e; background: #fdf3f2; }
.confirm__error { margin: 0; padding: 10px 12px; border-radius: var(--r); background: #fdf3f2; color: #8c1d18; font-size: 0.875rem; line-height: 1.7; }
.confirm__edit { justify-self: center; }
@media (min-width: 640px) { .confirm { inset: 0; margin: auto; inline-size: 100%; block-size: fit-content; max-block-size: calc(100dvh - 40px); } }
@media (prefers-reduced-motion: reduce) { .confirm[open], .wa__other { animation: none; } }

/* ---------- sticky buy bar v2 (2026-11-07): light frosted bar that stands out on dark AND light sections ---------- */
.dock { background: rgba(251, 251, 247, 0.92); color: var(--text); border: 1px solid #cfd5c3; box-shadow: 0 -2px 0 rgba(222, 241, 122, 0.55) inset, 0 14px 34px rgba(25, 30, 26, 0.28), 0 2px 6px rgba(25, 30, 26, 0.12); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); }
.dock .dock__price { color: var(--text); }
.dock .dock__price b { color: var(--text); }
.dock .dock__price span, .dock .dock__sub { color: var(--text-2); }
.dock .dock__price--free .i { color: #4c6b1f; }
.dock :focus-visible { outline-color: var(--text); }
.ibtn--dock { background: var(--sage); border-color: #cfd5c3; color: var(--text); }
.dock .dock__cta { position: relative; background: var(--dark); border-color: var(--dark); color: var(--on-dark); }
.dock .dock__cta .i { color: var(--citron); }
/* Attention nudge: a short bounce + a citron ring, every 6 s after a 2.5 s wait (never under reduced motion). */
.dock.is-on .dock__cta { animation: dock-nudge 6s var(--ease-out) 2.5s infinite; }
.dock .dock__cta::after { content: ''; position: absolute; inset: -3px; border-radius: inherit; border: 2px solid var(--citron); opacity: 0; pointer-events: none; }
.dock.is-on .dock__cta::after { animation: dock-ring 6s ease-out 2.5s infinite; }
@keyframes dock-nudge {
  0%, 78%, 100% { transform: translateY(0); }
  82% { transform: translateY(-6px); }
  86% { transform: translateY(0); }
  90% { transform: translateY(-3px); }
  94% { transform: translateY(0); }
}
@keyframes dock-ring {
  0%, 78% { opacity: 0; transform: scale(1); }
  82% { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.12, 1.35); }
}
@media (prefers-reduced-motion: reduce) { .dock.is-on .dock__cta, .dock.is-on .dock__cta::after { animation: none; } }

/* ---------- content protection (deterrents): no text selection, no drag-out, no iOS long-press "save" ---------- */
.lp2 body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.lp2 img, .lp2 video, .lp2 canvas, .lp2 picture, .lp2 svg { -webkit-user-drag: none; -webkit-touch-callout: none; }
.lp2 img { pointer-events: auto; }
/* Fields and the numbers a customer may need stay selectable / copyable. */
.lp2 input, .lp2 textarea, .lp2 select, .lp2 [contenteditable], .lp2 .success__ref, .lp2 .ty__ref, .lp2 .ty__num, .lp2 [data-allow-copy] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.footer__rights { font-size: 0.75rem; color: var(--on-dark-3); max-inline-size: 70ch; }