/* ============================================================
   Karaza — Shared Design Language
   assets/css/main.css
   Covers: reset, CSS vars, typography, topbar, footer,
           site-footer (hero pages), forms, buttons, FAQ modal,
           and utility classes shared across all pages.
   ============================================================ */

/* ── Reset ── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

/* ── Skip link (keyboard/screen-reader users only until focused) ── */
.skip-link{position:absolute;top:-100px;left:12px;z-index:1000;background:var(--s1);color:var(--text-bright);padding:10px 16px;border:2px solid var(--red);font-size:.78rem;font-weight:700;text-decoration:none;transition:top var(--t-fast)}
.skip-link:focus{top:12px}

/* ── Font: IBM Plex Mono, self-hosted (latin subset) ──
   Industrial/technical monospace with a much taller x-height and more
   open letterforms than Courier New, so small UI text stays legible. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ibm-plex-mono-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/ibm-plex-mono-700.woff2') format('woff2')}

/* ── Font: IBM Plex Sans Arabic, self-hosted (arabic subset) ──
   Same "Plex" family as the Latin mono above — IBM designed Plex to pair
   across scripts, so /ar/ pages keep the same visual identity instead of
   a mismatched font. Used only on /ar/ pages. */
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-sans-arabic-400.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/ibm-plex-sans-arabic-700.woff2') format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC}
[dir="rtl"] body{font-family:'IBM Plex Sans Arabic','IBM Plex Mono','Consolas','Courier New',monospace}

/* ── Design Tokens ── */
:root{
  --bg:      #060606;
  --bg-rgb:  6,6,6;
  --s1:      #0c0c0c;
  --s1-rgb:  12,12,12;
  --s2:      #101010;
  --s2-rgb:  16,16,16;
  --s3:      #1a1a1a;
  --border:  #1c1c1c;
  --border2: #282828;
  --red:     #cc2a1f;
  --red-bright:#ff3a2d;
  --orange:  #d48a0e;
  --orange-bright:#f5a520;
  --yellow:  #eab308;
  --blue:    #3b82f6;
  --green:   #25d366;
  --green2:  #4ade80;
  --magenta: #cc3ae0;
  --purple:  #8b31ff;
  --text:    #e0e0e0;
  --text-bright:#f0f0f0;
  --muted:   #999;
  --muted-lt:#999;
  --muted2:  #333;
  --tab-bg:  #0f0f0f;
  --viewer-bg:#030303;
  /* Motion. The site's transitions cluster on three speeds, so they live
     here as tokens: 'make it snappier' is then one slider in the editor
     rather than a hunt through fourteen stylesheets. */
  --t-fast:  .15s;
  --t-med:   .2s;
  --t-slow:  .35s;

  /* Constellation nodes. The homepage fades between these two across the
     screen; the 3D hub takes its colours from each tile's own accent, and the
     tool pages name a token to use. All of it is editable from one place. */
  --node-split-a: #8b31ff;
  --node-split-b: #ff3a2d;

}

/* ── Light mode ──
   Neutral scale flips; accent colors (red/orange/blue/etc) stay the same
   since they already read fine against both a near-black and a near-white
   surface. 3D viewer canvases flip to white too (--viewer-bg), applied in
   mesh-viewer.js as well since Three.js scene.background isn't CSS. */
:root[data-theme="light"]{
  --bg:      #f4f4f2;
  --bg-rgb:  244,244,242;
  --s1:      #ffffff;
  --s1-rgb:  255,255,255;
  --s2:      #ececea;
  --s2-rgb:  236,236,234;
  --s3:      #e0e0dc;
  --border:  #dcdcd8;
  --border2: #c6c6c1;
  --text:    #161616;
  --text-bright:#000000;
  --muted:   #555555;
  --muted-lt:#333333;
  --muted2:  #8f8f8a;
  --tab-bg:  #ffffff;
  --viewer-bg:#ffffff;
}

/* ── Base body ── */
body{
  font-family:'IBM Plex Mono','Consolas','Courier New',monospace;
  background:var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

/* ── Topbar (sticky, used by inner pages) ── */
.topbar{
  position:sticky;top:0;z-index:100;
  min-height:58px;padding:10px 20px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  background:var(--s1);border-bottom:2px solid #1a1a1a;gap:12px;
}
.tb-brand{
  font-weight:700;font-size:1rem;letter-spacing:.02em;
  display:flex;align-items:center;justify-content:center;gap:10px;
  color:var(--text);text-decoration:none;grid-column:2;
}
.tb-brand img{width:22px;height:22px;object-fit:contain;image-rendering:pixelated;filter:grayscale(.3)}
/* universal.png (FAQ topbar) looked dim/desaturated in both themes — the base
   rule above grayscales every topbar brand logo by 30%, but the footer's copy
   of this same image has no such filter and reads normal. Exempt it here
   (dark mode: just drop the grayscale) with a light-mode-specific boost on
   top, scoped by filename so the colorful logo-3d/logo-vintage brands are
   untouched. */
.tb-brand img[src$="universal.webp"]{filter:none}
[data-theme="light"] .tb-brand img[src$="universal.webp"]{filter:saturate(1.7) contrast(1.35) drop-shadow(0 1px 1.5px rgba(0,0,0,.3))}
.tb-home{grid-column:1;justify-self:start;font-size:.72rem;color:var(--muted);text-decoration:none;transition:color var(--t-med),border-color var(--t-med);white-space:nowrap;padding:8px 12px;border:1px solid var(--topbar-accent,var(--border2))}
.tb-home:hover,.tb-home:focus-visible{color:var(--text-bright);border-color:var(--text-bright)}
.topbar[data-accent="vintage"]{--topbar-accent:var(--purple)}
.topbar[data-accent="blue"]{--topbar-accent:var(--blue)}
.topbar[data-accent="red"]{--topbar-accent:var(--red-bright)}
.topbar[data-accent="orange"]{--topbar-accent:var(--orange-bright)}
.topbar[data-accent="yellow"]{--topbar-accent:var(--yellow)}
.tb-nav{display:flex;gap:6px;align-items:center}
.tb-btn{
  padding:7px 14px;font-size:.7rem;font-weight:600;
  text-decoration:none;transition:all var(--t-fast);white-space:nowrap;
  border:1px solid transparent;cursor:pointer;font-family:inherit;
}
.tb-btn-pri{background:var(--s2);border-color:var(--border2);color:var(--text)}
.tb-btn-pri:hover{border-color:var(--red);color:var(--text)}
.tb-btn-sec{background:var(--s2);border-color:var(--border2);color:var(--text)}
.tb-btn-sec:hover{border-color:var(--red);color:var(--text)}

/* ── Topbar actions: theme + language toggles, injected by footer.js on
   every page. The a11y control lives in the footer instead (see
   .shared-footer-bottom below) — a 3-item cluster here overflowed the
   topbar's fixed grid column and wrapped badly on narrow viewports. ── */
.topbar-actions{grid-column:3;justify-self:end;display:flex;gap:8px;align-items:center}
.topbar-actions-float{position:fixed;top:16px;right:16px;z-index:200;display:flex;gap:8px;align-items:center}
[dir="rtl"] .topbar-actions-float{right:auto;left:16px}
.theme-toggle,.lang-toggle{
  font-size:.66rem;font-weight:600;letter-spacing:.02em;white-space:nowrap;
  background:var(--s2);border:1px solid var(--border2);color:var(--muted);
  padding:8px 12px;cursor:pointer;font-family:inherit;
  text-decoration:none;display:inline-block;
  transition:border-color var(--t-fast),color var(--t-fast);
}
.theme-toggle:hover,.theme-toggle:focus-visible,
.lang-toggle:hover,.lang-toggle:focus-visible{border-color:var(--text);color:var(--text)}
@media(max-width:640px){.theme-toggle,.lang-toggle{padding:5px 10px;font-size:.62rem}}

/* ── Footer bottom row: copyright + accessibility toggle ── */
.shared-footer-bottom{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.a11y-toggle{
  font-size:.9rem;line-height:1;padding:5px 9px;font-family:inherit;cursor:pointer;
  background:var(--s2);border:1px solid var(--border2);color:var(--muted);
  transition:border-color var(--t-fast),color var(--t-fast);
}
.a11y-toggle:hover,.a11y-toggle:focus-visible{border-color:var(--text);color:var(--text)}

/* ── Accessibility settings panel — anchored near its footer trigger ── */
.a11y-panel{
  position:fixed;bottom:16px;right:16px;z-index:400;width:240px;
  background:var(--s1);border:2px solid var(--border2);
  padding:14px;display:flex;flex-direction:column;gap:12px;
  font-size:.72rem;color:var(--text);
  box-shadow:0 8px 28px rgba(0,0,0,.45);
  max-height:calc(100vh - 32px);overflow-y:auto;
}
[dir="rtl"] .a11y-panel{right:auto;left:16px}
.a11y-panel[hidden]{display:none}
.a11y-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.a11y-head h2{font-size:.78rem;font-weight:700;letter-spacing:.02em;margin:0}
.a11y-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:.8rem;padding:2px 4px;font-family:inherit}
.a11y-close:hover,.a11y-close:focus-visible{color:var(--text)}
.a11y-group{border:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.a11y-group legend{font-size:.64rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;padding:0;margin-bottom:5px}
.a11y-seg{display:flex;gap:4px}
.a11y-size{
  flex:1;font-family:inherit;font-size:.64rem;padding:6px 4px;cursor:pointer;
  background:var(--s2);border:1px solid var(--border2);color:var(--muted);
}
.a11y-size:hover,.a11y-size:focus-visible{border-color:var(--text);color:var(--text)}
.a11y-size[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.a11y-row{display:flex;align-items:center;gap:8px;cursor:pointer;line-height:1.3}
.a11y-row input{width:14px;height:14px;accent-color:var(--text);cursor:pointer;flex:none;margin:0}
.a11y-reset{
  font-family:inherit;font-size:.64rem;padding:7px;cursor:pointer;
  background:transparent;border:1px solid var(--border2);color:var(--muted);
}
.a11y-reset:hover,.a11y-reset:focus-visible{border-color:var(--text);color:var(--text)}
@media(max-width:640px){.a11y-panel{left:16px;right:16px;width:auto}}

/* ── Accessibility display modes (set by footer.js on <html>) ── */
:root[data-fontsize="large"]{font-size:112.5%}
:root[data-fontsize="larger"]{font-size:131.25%}

:root[data-links="underline"] a{text-decoration:underline}

/* Swaps the site's monospace stack for a plain sans, which is markedly
   easier to read for many low-vision and dyslexic readers. */
:root[data-font="readable"] body,
:root[data-font="readable"] input,
:root[data-font="readable"] textarea,
:root[data-font="readable"] select,
:root[data-font="readable"] button{
  font-family:'Segoe UI',Tahoma,Verdana,'Noto Sans',Arial,sans-serif;
  letter-spacing:normal;
}
:root[data-font="readable"][dir="rtl"] body,
[dir="rtl"] :root[data-font="readable"] body{font-family:'Noto Sans Arabic','Segoe UI',Tahoma,Arial,sans-serif}

/* The in-page accessibility toggle was honoured, but the operating system's
   own "reduce motion" setting was not -- so someone who had already asked their
   device for less movement still got the full thing. Both now apply. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

:root[data-motion="reduce"] *,
:root[data-motion="reduce"] *::before,
:root[data-motion="reduce"] *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
  scroll-behavior:auto !important;
}

/* High contrast: pure black/white ends, brighter accents, visible borders. */
:root[data-contrast="high"]{
  --bg:#000;--bg-rgb:0,0,0;
  --s1:#000;--s1-rgb:0,0,0;
  --s2:#0a0a0a;--s2-rgb:10,10,10;
  --s3:#141414;
  --text:#fff;--text-bright:#fff;
  --muted:#e4e4e4;--muted-lt:#f2f2f2;--muted2:#d0d0d0;
  --border:#fff;--border2:#fff;
}
:root[data-contrast="high"][data-theme="light"]{
  --bg:#fff;--bg-rgb:255,255,255;
  --s1:#fff;--s1-rgb:255,255,255;
  --s2:#f5f5f5;--s2-rgb:245,245,245;
  --s3:#ececec;
  --text:#000;--text-bright:#000;
  --muted:#161616;--muted-lt:#000;--muted2:#242424;
  --border:#000;--border2:#000;
}
:root[data-contrast="high"] :focus-visible{outline:3px solid currentColor;outline-offset:2px}

.shared-footer{border-top:2px solid #161616;padding:18px 20px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;background:var(--bg)}
.shared-footer-brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.8rem;letter-spacing:.04em}
.shared-footer-brand img{width:32px;height:32px;object-fit:contain;image-rendering:pixelated}
[data-theme="light"] .shared-footer-brand img{filter:saturate(1.7) contrast(1.35) drop-shadow(0 1px 1.5px rgba(0,0,0,.3))}
.shared-footer-nav{display:flex;justify-content:center;gap:8px;grid-column:2}
.shared-footer-nav a{padding:6px 14px;font-size:.7rem;font-weight:600;text-decoration:none;border:1px solid var(--border2);color:var(--text-bright);background:var(--s2);transition:border-color var(--t-fast),color var(--t-fast)}
.shared-footer-nav a:hover,.shared-footer-nav a:focus-visible{color:var(--text-bright)}
.shared-footer-nav [data-page="home"]:hover,.shared-footer-nav [data-page="home"]:focus-visible{border-color:var(--text-bright)}
.shared-footer-nav [data-page="vintage"]:hover,.shared-footer-nav [data-page="vintage"]:focus-visible{border-color:var(--purple)}
.shared-footer-nav [data-page="3d"]:hover,.shared-footer-nav [data-page="3d"]:focus-visible{border-color:var(--red-bright)}
.shared-footer[data-active="home"] [data-page="home"]{border-color:var(--text-bright)}
.shared-footer[data-active="vintage"] [data-page="vintage"]{border-color:var(--purple);color:var(--purple)}
.shared-footer[data-active="3d"] [data-page="3d"]{border-color:var(--red-bright);color:var(--red-bright)}
.shared-footer-social{display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.shared-footer-social a{position:relative;color:var(--muted);font-size:.68rem;text-decoration:none;transition:color var(--t-fast),text-shadow var(--t-med)}
.shared-footer-social a[data-ig]{display:inline-flex;align-items:center;gap:6px}
.shared-footer-social a[data-ig] .ig-logo{width:18px;height:18px;object-fit:contain;image-rendering:pixelated;opacity:0;transform:scale(.5);transition:opacity .18s,transform .18s}
.shared-footer-social a[data-ig]:hover .ig-logo,.shared-footer-social a[data-ig]:focus-visible .ig-logo{opacity:1;transform:scale(1)}
.shared-footer-social a[data-ig="3d"]:hover,.shared-footer-social a[data-ig="3d"]:focus-visible{color:var(--yellow);text-shadow:0 0 14px rgba(255,212,0,.85)}
.shared-footer-social a:hover,.shared-footer-social a:focus-visible{color:var(--text-bright)}
.shared-footer-social a[data-ig="vintage"]:hover,.shared-footer-social a[data-ig="vintage"]:focus-visible{color:var(--purple);text-shadow:0 0 14px rgba(139,49,255,.85)}
.shared-footer p{color:var(--muted);font-size:.65rem;text-align:center;margin:0}

/* ── FAQ / Video modal ── */
.v-modal-backdrop{
  display:none;position:fixed;inset:0;z-index:300;
  align-items:center;justify-content:center;
  background:rgba(0,0,0,.82);
}
.v-modal-backdrop.open,.v-modal-backdrop[style*="flex"]{display:flex}
.v-modal{
  background:var(--s1);border:2px solid var(--border2);
  max-width:560px;width:calc(100% - 40px);
  padding:28px 24px;position:relative;border-radius:2px;
}
.v-modal-close{
  position:absolute;top:14px;right:16px;
  font-size:1rem;cursor:pointer;color:var(--muted);
  transition:color var(--t-med);
}
.v-modal-close:hover{color:var(--text)}
.v-modal-name{font-size:.88rem;font-weight:700;color:var(--text);line-height:1.4}
.v-modal-desc{font-size:.78rem;color:var(--muted-lt);line-height:1.65}

/* ── Shared form elements (used in modellers, vintage) ── */
.f-field{display:flex;flex-direction:column;gap:4px}
.f-label{font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.f-input{
  background:var(--s1);border:2px solid var(--border2);
  padding:9px 12px;font-size:.82rem;color:var(--text);
  outline:none;transition:border-color var(--t-med);font-family:inherit;width:100%;
}
.f-input:focus{border-color:rgba(204,42,31,.5)}
.f-input::placeholder{color:var(--muted2)}
textarea.f-input{resize:vertical;min-height:80px}
.f-submit{
  padding:11px;background:var(--s2);border:1px solid var(--border2);
  color:var(--text);font-weight:600;font-size:.84rem;
  cursor:pointer;transition:all var(--t-fast);font-family:inherit;width:100%;
}
.f-submit:hover{background:var(--s3)}

/* ── Skill tags ── */
.skill-tag{
  background:rgba(204,42,31,.08);border:1px solid rgba(204,42,31,.2);
  color:var(--text);font-size:.63rem;font-weight:600;
  padding:3px 8px;
}

/* ── Utility ── */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.scroll-spacer{height:0;position:relative;z-index:1;background:var(--bg)}

/* ── Responsive ── */
@media(max-width:640px){
  .topbar{padding:10px 14px;grid-template-columns:auto 1fr auto}
  .tb-brand{font-size:.9rem;gap:6px}
  .tb-brand img{width:18px;height:18px}
  .tb-btn{padding:5px 10px;font-size:.65rem}
  .tb-brand{grid-column:2}
  .shared-footer{grid-template-columns:1fr;padding:14px;text-align:center}
  .shared-footer-brand,.shared-footer-social{justify-content:center}
  .shared-footer-nav{grid-column:1;grid-row:2}
  .shared-footer-social{grid-row:3}
  .shared-footer p{grid-column:1;grid-row:4}
}

body .topbar{display:grid !important;grid-template-columns:1fr auto 1fr !important;justify-content:initial !important;min-height:58px !important;padding:10px 20px !important}
body .topbar .tb-home{grid-column:1 !important;justify-self:start !important;border:1px solid var(--topbar-accent,var(--border2)) !important;padding:8px 12px !important;color:var(--muted) !important}
body .topbar .tb-brand,body .topbar .tb-brand-link{grid-column:2 !important;justify-self:center !important;display:flex !important;align-items:center !important;justify-content:center !important;gap:10px !important}
body .topbar .tb-home:hover,body .topbar .tb-home:focus-visible{color:#fff !important;border-color:#fff !important}
body .topbar .tb-brand img,body .topbar .tb-brand-link img{width:22px !important;height:22px !important}
@media(max-width:640px){body .topbar{grid-template-columns:auto 1fr auto !important;padding:10px 14px !important}body .topbar .tb-brand,body .topbar .tb-brand-link{grid-column:2 !important}body .topbar .tb-brand img,body .topbar .tb-brand-link img{width:18px !important;height:18px !important}}
[data-theme="light"] body .topbar .tb-home:hover,[data-theme="light"] body .topbar .tb-home:focus-visible{color:var(--text-bright) !important;border-color:var(--text-bright) !important}


/* ── Button text is ALWAYS white (near-black in light mode) ── */
button,
.tb-home, .tb-btn,
.opt, .tab, .obtn,
.v-filter-btn, .v-card-btn, .v-modal-btn, .v-sell-btn, .v-retry-btn, .v-card-expand,
.f-submit, .sp-submit, .cad-go, .cad-cls, .repair-link,
.btn-exp, .btn-send, .btn-quiet, .cta,
.action-simplify, .action-pricer, .action-back{
  color:#fff !important;
}
[data-theme="light"] button,
[data-theme="light"] .tb-home, [data-theme="light"] .tb-btn,
[data-theme="light"] .opt, [data-theme="light"] .tab, [data-theme="light"] .obtn,
[data-theme="light"] .v-filter-btn, [data-theme="light"] .v-card-btn, [data-theme="light"] .v-modal-btn, [data-theme="light"] .v-sell-btn, [data-theme="light"] .v-retry-btn, [data-theme="light"] .v-card-expand,
[data-theme="light"] .f-submit, [data-theme="light"] .sp-submit, [data-theme="light"] .cad-go, [data-theme="light"] .cad-cls, [data-theme="light"] .repair-link,
[data-theme="light"] .btn-exp, [data-theme="light"] .btn-send, [data-theme="light"] .btn-quiet, [data-theme="light"] .cta,
[data-theme="light"] .action-simplify, [data-theme="light"] .action-pricer, [data-theme="light"] .action-back{
  color:var(--text-bright) !important;
}
/* The blanket button rule above would paint the a11y panel's controls white,
   which makes the selected text-size chip white-on-white. These win on
   specificity and keep the panel legible in every theme/contrast combination. */
.a11y-panel .a11y-size{color:var(--muted) !important}
.a11y-panel .a11y-size:hover,.a11y-panel .a11y-size:focus-visible{color:var(--text) !important}
.a11y-panel .a11y-size[aria-pressed="true"]{color:var(--bg) !important}
.a11y-panel .a11y-close,.a11y-panel .a11y-reset{color:var(--muted) !important}
.a11y-panel .a11y-close:hover,.a11y-panel .a11y-close:focus-visible,
.a11y-panel .a11y-reset:hover,.a11y-panel .a11y-reset:focus-visible{color:var(--text) !important}

/* ── Terminal-style FAQ boxes ── */
.faq-strip{max-width:900px;margin:44px auto 24px;padding:0 20px}
.faq-strip-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.faq-strip-head h1{font-size:1.05rem;font-weight:800;color:var(--text);margin:0}
.faq-all-link{font-size:.72rem;color:var(--muted);text-decoration:none;border:1px solid var(--border2);padding:5px 12px;transition:all var(--t-fast);white-space:nowrap}
.faq-all-link:hover,.faq-all-link:focus-visible{color:var(--text-bright);border-color:var(--text-bright)}
.faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(max-width:640px){.faq-grid{grid-template-columns:1fr}}
.faq-term{background:var(--s1);border:1px solid var(--border);border-radius:3px;overflow:hidden}
.faq-term-bar{display:flex;align-items:center;gap:5px;padding:6px 10px;background:var(--s2);border-bottom:1px solid var(--border)}
.ft-dot{width:8px;height:8px;border-radius:50%;background:#2a2a2a;flex-shrink:0}
.ft-dot:nth-child(1){background:#ff5f57}
.ft-dot:nth-child(2){background:#febc2e}
.ft-dot:nth-child(3){background:#28c840}
.ft-title{margin-left:6px;font-size:.6rem;color:var(--muted);letter-spacing:.02em}
.faq-term-q{padding:10px 14px 4px;font-size:.8rem;font-weight:700;color:var(--text-bright);line-height:1.4}
.faq-term-q::before{content:'$ ';color:var(--acc,#4ade80)}
.faq-term-a{padding:2px 14px 12px 26px;font-size:.74rem;color:var(--muted-lt);line-height:1.6}
.faq-term-a a{color:var(--text-bright);text-decoration:underline;text-underline-offset:2px}
.faq-term.acc-red{--acc:var(--red-bright)}
.faq-term.acc-purple{--acc:var(--purple)}
.faq-term.acc-blue{--acc:var(--blue)}

/* ── FAQ page ── */
.faq-search{width:100%;background:var(--s1);border:2px solid var(--border2);padding:11px 14px;font-size:.85rem;color:var(--text);outline:none;font-family:inherit;border-radius:2px}
.faq-search:focus{border-color:#3a3a3a}
.faq-search::placeholder{color:var(--muted2)}
.faq-section-title{font-size:.95rem;font-weight:800;margin:28px 0 12px;display:flex;align-items:center;gap:8px}
.faq-section-title::after{content:'';flex:1;height:1px;background:var(--border)}
.faq-none{display:none;text-align:center;color:var(--muted);font-size:.78rem;padding:24px;border:1px dashed var(--border2);margin-top:16px}

/* ── Customer feedback ──
   Deliberately NOT reusing .faq-term: the FAQ search walks every .faq-term
   inside a .faq-section and hides the ones that do not match, so a quote
   wearing those classes would vanish the moment someone typed. Same terminal
   card, its own class, outside the search's reach.
   The quote is real text rather than the screenshot it came from -- an image
   of Arabic is unreadable to search engines and to anything answering a
   question about us, which is most of the point of putting these up. */
.fb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(max-width:640px){.fb-grid{grid-template-columns:1fr}}
.fb-term{background:var(--s1);border:1px solid var(--border);border-radius:3px;overflow:hidden;--acc:var(--red-bright)}
.fb-term blockquote{margin:0;padding:10px 14px 4px;font-size:.8rem;font-weight:700;color:var(--text-bright);line-height:1.5}
/* Each quote is set in the direction of the language it was written in, not
   the page's. Both pages carry quotes in both scripts, so leaving them to
   inherit puts the trailing punctuation of the odd one out at the wrong end of
   the line. The prompt follows the same direction, which is what a terminal
   actually does. */
.fb-term blockquote{direction:ltr;text-align:left}
.fb-term blockquote[lang="ar"]{direction:rtl;text-align:right}
.fb-term blockquote::before{content:'$ ';color:var(--acc)}
/* Logical padding, so the hanging indent under the prompt sits on the reading
   side in both directions. */
.fb-tr{padding:2px 14px 12px;padding-inline-start:26px;font-size:.74rem;color:var(--muted-lt);line-height:1.6}
/* A quote already in the page's own language has nothing to translate, but the
   element still has to be there: the editor refuses to apply a layout change
   unless faq.html and ar/faq.html hold the same elements in the same order, so
   dropping the line on one side would block editing the section on both. Empty
   and hidden keeps the two pages structurally identical. */
.fb-tr:empty{display:none}
.fb-meta{padding:0 14px 11px;font-size:.6rem;color:var(--muted2);letter-spacing:.02em}
.fb-note{margin-top:14px;font-size:.7rem;color:var(--muted2);line-height:1.6}
.fb-note a{color:var(--muted-lt);text-decoration:underline;text-underline-offset:2px}

/* ── v0.15.2 ── */
:root{--magenta:#c73696}
body .topbar .tb-home.home-red{border-color:var(--red-bright) !important}
.shared-footer-nav [data-page="faq"]:hover,.shared-footer-nav [data-page="faq"]:focus-visible{border-color:var(--magenta)}
.shared-footer[data-active="faq"] [data-page="faq"]{border-color:var(--magenta);color:var(--magenta)}

/* ── Entrance animations ───────────────────────────────────────────────
   Named classes rather than inline keyframes, so the builder turns one on by
   adding a class and both language trees get the same motion from the same
   rule. They inherit the site's motion tokens, and the reduced-motion block
   above already flattens them for anyone who asks for that, so a page built
   with these stays accessible without the builder having to know about it.
   data-motion="reduce" is the site's own accessibility toggle. */
@keyframes kz-fade-in{from{opacity:0}to{opacity:1}}
@keyframes kz-fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes kz-fade-down{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes kz-zoom-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.kz-anim-fade-in{animation:kz-fade-in var(--t-slow) ease both}
.kz-anim-fade-up{animation:kz-fade-up var(--t-slow) ease both}
.kz-anim-fade-down{animation:kz-fade-down var(--t-slow) ease both}
.kz-anim-zoom-in{animation:kz-zoom-in var(--t-slow) ease both}
.kz-anim-delay-1{animation-delay:.08s}
.kz-anim-delay-2{animation-delay:.16s}
.kz-anim-delay-3{animation-delay:.24s}
[data-motion="reduce"] [class*="kz-anim-"]{animation:none !important}

/* Phone number in the footer, on every page. A local business that shows a
   number is one people can actually call, and it is the same number the
   Google profile carries -- matching details across the site, the profile and
   the directories is what search engines treat as corroboration. */
.shared-footer-contact{display:flex;justify-content:center;align-items:center;gap:8px;
  margin:0 0 6px;font-size:.72rem;font-weight:600;flex-wrap:wrap}
.shared-footer-contact a{color:var(--text-bright);text-decoration:none;
  border-bottom:1px solid transparent;transition:border-color var(--t-fast),color var(--t-fast)}
.shared-footer-contact a:hover,.shared-footer-contact a:focus-visible{border-bottom-color:currentColor}
.shared-footer-contact span{color:var(--muted2)}

/* ── Whole-window drop overlay ──
   Shown while a file drag is anywhere over the page, so it reads as a target
   rather than the person having to trust that missing the box is survivable.
   pointer-events:none is load-bearing: the overlay covers the drop box, and
   without it the box would stop receiving its own dragover and drop. */
.kz-drop-overlay{position:fixed;inset:0;z-index:9998;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.62);backdrop-filter:blur(2px);
  opacity:0;transition:opacity var(--t-fast)}
.kz-drop-overlay.on{opacity:1}
.kz-drop-overlay-inner{border:2px dashed var(--text-bright);border-radius:4px;
  padding:26px 34px;font-size:.9rem;font-weight:700;color:var(--text-bright);
  background:var(--s1);text-align:center;max-width:80vw}
@media(prefers-reduced-motion:reduce){.kz-drop-overlay{transition:none}}

/* "Clear model" — only meaningful once something is loaded, and both tool
   pages and the pricer already mark that state on their wrapper, so the
   button's visibility falls out of the class rather than needing its own
   flag to keep in sync.

   Lives here rather than in mesh-tool.css because the pricer does not load
   that file. It did at first, and the result was a button with no styling at
   all on the one page where it matters most: permanently visible, because
   display:none never applied, and wearing the browser default chrome. */
.btn-clear{display:none;width:100%;margin-top:8px;padding:8px 10px;
  background:transparent;border:1px solid var(--border2);color:var(--muted);
  font-family:inherit;font-size:.68rem;font-weight:600;cursor:pointer;
  transition:border-color var(--t-fast),color var(--t-fast)}
.btn-clear:hover,.btn-clear:focus-visible{border-color:var(--red-bright);color:var(--text-bright)}
.has-model .btn-clear{display:block}

/* ── Shared "About" section ──
   Used on the homepage, the 3D hub and the mesh-tools hub to give each a
   block of real, indexable, editable copy below its launcher. Lives here
   rather than in a page stylesheet so all three stay identical. */
.home-about{position:relative;z-index:2;background:var(--bg);border-top:1px solid var(--border);padding:64px 24px 72px}
.about-inner{max-width:860px;margin:0 auto}
.about-prompt{font-size:.74rem;color:var(--muted2);margin:0 0 10px}
.about-h{font-size:clamp(1.3rem,3.4vw,1.9rem);font-weight:800;line-height:1.25;margin:0 0 14px;color:var(--text)}
.about-lead{font-size:.95rem;line-height:1.75;color:var(--muted);margin:0 0 36px;max-width:70ch}
/* Editorial rows, not boxes side by side: each feature is a divider-separated
   row with its heading in a fixed leading column and the description beside
   it. Direction-safe (grid + inline-start column) so RTL mirrors cleanly;
   collapses to stacked heading-over-text on narrow screens. */
.about-grid{display:flex;flex-direction:column;margin-bottom:40px}
.about-card{background:transparent;border:0;border-top:1px solid var(--border);border-radius:0;
  padding:22px 0;display:grid;grid-template-columns:210px 1fr;gap:26px;align-items:start}
.about-card h3{font-size:1rem;font-weight:800;margin:0;color:var(--text)}
.about-card p{font-size:.85rem;line-height:1.75;color:var(--muted);margin:0}
@media(max-width:640px){.about-card{grid-template-columns:1fr;gap:6px;padding:18px 0}}
.about-steps{margin:0 0 40px;padding-inline-start:22px;display:flex;flex-direction:column;gap:9px}
.about-steps li{font-size:.86rem;line-height:1.65;color:var(--muted)}
.about-steps li::marker{color:var(--orange);font-weight:700}
.about-cta{display:flex;gap:12px;flex-wrap:wrap}
.about-btn{display:inline-block;padding:12px 26px;border-radius:2px;font-size:.82rem;font-weight:700;text-decoration:none;font-family:inherit;border:2px solid;transition:background var(--t-med)}
.about-btn-3d{border-color:var(--red);color:var(--red)}
.about-btn-3d:hover{background:rgba(255,58,45,.09)}
.about-btn-vintage{border-color:var(--purple);color:var(--purple)}
.about-btn-vintage:hover{background:rgba(139,49,255,.09)}
@media(max-width:520px){.home-about{padding:44px 18px 56px}}