/* kerf360.com pages: layout breakpoints (data-r hooks), the Fusion dialog mock, hover states, components. */
* { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--brand-paper); color: var(--brand-ink);
         font-family: var(--font-ui); -webkit-font-smoothing: antialiased; }
  a { color: var(--brand-amber-deep); text-decoration: none; }
  a:hover { color: var(--brand-amber); }
  ::selection { background: var(--brand-amber); color: #fff; }
  :root { --type-2xs: var(--weight-regular) var(--text-2xs)/var(--leading-tight) var(--font-ui); }
  img, svg, image-slot { max-width: 100%; }

  /* Responsive. Inline styles cannot express media queries, so the breakpoints
     live here, keyed on data-r hooks rather than classes. Two stops: 900px
     (tablet — multi-column collapses) and 620px (phone — single column). */
  @media (max-width: 1180px) {
    [data-r~="hdrlink"] { display: none !important; }
  }
  @media (max-width: 1080px) {
    [data-r~="rail"] { grid-template-columns: minmax(0,1fr) !important; gap: 0 !important; }
    [data-r~="rail"] > nav { display: none !important; }
  }
  @media (max-width: 900px) {
    [data-r~="pad"] { padding-left: 22px !important; padding-right: 22px !important; }
    [data-r~="two"] { grid-template-columns: minmax(0,1fr) !important; gap: 30px !important; }
    [data-r~="three"] { grid-template-columns: minmax(0,1fr) !important; }
    [data-r~="four"], [data-r~="five"] { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
    [data-r~="hero"] { min-height: 0 !important; gap: 8px !important; }
    [data-r~="herocopy"] { padding: 44px 0 4px !important; }
    [data-r~="step"] { padding: 22px 0 0 !important; border-right: none !important;
                       border-top: 1px solid var(--brand-line); }
    [data-r~="cmp"] { grid-template-columns: minmax(0,1fr) repeat(2,90px) !important;
                      font-size: 13px !important; }
    [data-r~="hdr"] { height: auto !important; flex-wrap: wrap; gap: 10px 18px !important;
                      padding-top: 12px !important; padding-bottom: 12px !important; }
    [data-r~="nav"] { margin-left: 0 !important; order: 3; width: 100%;
                      overflow-x: auto; -webkit-overflow-scrolling: touch;
                      scrollbar-width: none; }
    [data-r~="nav"]::-webkit-scrollbar { display: none; }
    [data-r~="nav"] > a { flex: none; }
  }
  @media (max-width: 620px) {
    [data-r~="four"], [data-r~="five"] { grid-template-columns: minmax(0,1fr) !important; }
    /* the Fusion browser tree is 88px of chrome the 310px sketch plane needs */
    [data-r~="tree"] { display: none !important; }
    [data-r~="stage"] { padding-top: 8px !important; }
    [data-r~="cmp"] { grid-template-columns: minmax(0,1fr) repeat(2,58px) !important;
                      font-size: 12px !important; gap: 8px !important; }
    [data-r~="cta"] { width: 100%; justify-content: center; }
  }
  /* ---- hero: plan sketch → Kerf → built in 3D. 12s loop ---- */
  @keyframes kPlane {
    0%, 44%   { transform: translate(-50%,-50%) rotateX(0deg) rotateZ(0deg); }
    64%, 92%  { transform: translate(-50%,-30%) rotateX(57deg) rotateZ(-6deg); }
    100%      { transform: translate(-50%,-50%) rotateX(0deg) rotateZ(0deg); }
  }
  @keyframes kRectA { 0%,2%{opacity:0;transform:scale(0.94)} 8%,31%{opacity:1;transform:scale(1)}
    38%,50%{opacity:1;transform:scale(1);border-color:#1aa3e0} 58%,100%{opacity:0;transform:scale(1)} }
  @keyframes kRectB { 0%,5%{opacity:0;transform:scale(0.94)} 11%,31%{opacity:1;transform:scale(1)}
    38%,53%{opacity:1;transform:scale(1);border-color:#1aa3e0} 61%,100%{opacity:0;transform:scale(1)} }
  @keyframes kRectC { 0%,8%{opacity:0;transform:scale(0.94)} 14%,31%{opacity:1;transform:scale(1)}
    38%,56%{opacity:1;transform:scale(1);border-color:#1aa3e0} 64%,100%{opacity:0;transform:scale(1)} }
  @keyframes kLabA { 0%,16%{opacity:0;transform:translateY(3px)} 21%,44%{opacity:1;transform:translateY(0)} 50%,100%{opacity:0} }
  @keyframes kLabB { 0%,19%{opacity:0;transform:translateY(3px)} 24%,44%{opacity:1;transform:translateY(0)} 50%,100%{opacity:0} }
  @keyframes kLabC { 0%,22%{opacity:0;transform:translateY(3px)} 27%,44%{opacity:1;transform:translateY(0)} 50%,100%{opacity:0} }
  @keyframes kSel  { 0%,32%{opacity:0} 38%,48%{opacity:1} 58%,100%{opacity:0} }
  @keyframes kTopA { 0%,46%{transform:translateZ(0);opacity:0} 52%{opacity:1} 58%,90%{transform:translateZ(var(--h));opacity:1} 96%,100%{transform:translateZ(0);opacity:0} }
  @keyframes kTopB { 0%,49%{transform:translateZ(0);opacity:0} 55%{opacity:1} 61%,90%{transform:translateZ(var(--h));opacity:1} 96%,100%{transform:translateZ(0);opacity:0} }
  @keyframes kTopC { 0%,52%{transform:translateZ(0);opacity:0} 58%{opacity:1} 64%,90%{transform:translateZ(var(--h));opacity:1} 96%,100%{transform:translateZ(0);opacity:0} }
  @keyframes kFrA { 0%,46%{transform:rotateX(-90deg) scaleY(0);opacity:0} 52%{opacity:1} 58%,90%{transform:rotateX(-90deg) scaleY(1);opacity:1} 96%,100%{transform:rotateX(-90deg) scaleY(0);opacity:0} }
  @keyframes kFrB { 0%,49%{transform:rotateX(-90deg) scaleY(0);opacity:0} 55%{opacity:1} 61%,90%{transform:rotateX(-90deg) scaleY(1);opacity:1} 96%,100%{transform:rotateX(-90deg) scaleY(0);opacity:0} }
  @keyframes kFrC { 0%,52%{transform:rotateX(-90deg) scaleY(0);opacity:0} 58%{opacity:1} 64%,90%{transform:rotateX(-90deg) scaleY(1);opacity:1} 96%,100%{transform:rotateX(-90deg) scaleY(0);opacity:0} }
  @keyframes kSideC { 0%,52%{transform:rotateY(-90deg) scaleX(0);opacity:0} 58%{opacity:1} 64%,90%{transform:rotateY(-90deg) scaleX(1);opacity:1} 96%,100%{transform:rotateY(-90deg) scaleX(0);opacity:0} }
  @keyframes kSideA { 0%,46%{transform:rotateY(-90deg) scaleX(0);opacity:0} 52%{opacity:1} 58%,90%{transform:rotateY(-90deg) scaleX(1);opacity:1} 96%,100%{transform:rotateY(-90deg) scaleX(0);opacity:0} }
  @keyframes kCursor {
    0%,28%   { opacity:0; transform: translate(30px,190px); }
    31%      { opacity:1; transform: translate(30px,190px); }
    41%      { opacity:1; transform: translate(-2px,14px); }
    43%      { opacity:1; transform: translate(-2px,14px) scale(0.86); }
    46%      { opacity:1; transform: translate(-2px,14px) scale(1); }
    54%,100% { opacity:0; transform: translate(-2px,14px); }
  }
  @keyframes kTree { 0%,58%{opacity:0} 66%,92%{opacity:1} 97%,100%{opacity:0} }
  @keyframes kBtn {
    0%,40%   { background: transparent; box-shadow: none; }
    43%      { background: #cbe6f6; box-shadow: inset 0 0 0 1px #4db4e3; }
    50%,90%  { background: #d9edf9; box-shadow: inset 0 0 0 1px #4db4e3; }
    96%,100% { background: transparent; box-shadow: none; }
  }
  @keyframes kCapPlan  { 0%,44%{opacity:1} 50%,100%{opacity:0} }
  @keyframes kCapBuilt { 0%,50%{opacity:0} 58%,92%{opacity:1} 98%,100%{opacity:0} }
  @keyframes kStatus   { 0%,31%{opacity:0} 36%,90%{opacity:1} 96%,100%{opacity:0} }

.fds-tabs {
      display: flex; gap: 0;
      border-bottom: 1px solid var(--border-default);
      margin: calc(var(--dialog-pad) * -1) calc(var(--dialog-pad) * -1) var(--space-3);
      background: var(--surface-header);
    }
    .fds-tab {
      flex: 1; display: flex; align-items: center; justify-content: center;
      gap: var(--space-2);
      height: 28px; padding: 0 var(--space-4); border: none; cursor: pointer;
      background: none; color: var(--text-secondary);
      font: var(--type-label); font-weight: var(--weight-medium);
      border-bottom: 2px solid transparent;
      transition: color var(--dur-fast) var(--ease-standard),
                  border-color var(--dur-fast) var(--ease-standard),
                  background var(--dur-fast) var(--ease-standard);
    }
    .fds-tab:hover { background: var(--surface-hover); color: var(--text-primary); }
    .fds-tab--active {
      color: var(--accent); border-bottom-color: var(--accent);
      background: var(--surface-panel);
    }
    .fds-tab img, .fds-tab svg { width: 14px; height: 14px; }

.fds-group { border-top: 1px solid var(--border-subtle); }
    .fds-group:first-child { border-top: none; }
    .fds-group__header {
      display: flex; align-items: center; gap: var(--space-2);
      height: var(--row-h); width: 100%; padding: 0; border: none;
      background: none; cursor: pointer; user-select: none;
      font: var(--type-group); color: var(--text-primary);
      text-align: left;
    }
    .fds-group__caret {
      width: 12px; height: 12px; flex: none; color: var(--text-secondary);
      transition: transform var(--dur-fast) var(--ease-standard);
      transform: var(--caret-expanded);
    }
    .fds-group--collapsed .fds-group__caret { transform: var(--caret-collapsed); }
    .fds-group__count {
      margin-left: auto; font: var(--type-hint); color: var(--text-muted);
    }
    .fds-group__body {
      padding: var(--space-2) 0 var(--space-3) var(--group-indent);
      display: flex; flex-direction: column; gap: var(--row-gap);
    }

.fds-sel { display: grid; grid-template-columns: var(--label-col) 1fr;
      align-items: start; column-gap: var(--space-4); min-height: var(--row-h); }
    .fds-sel__label { font: var(--type-label); color: var(--text-label); padding-top: 4px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fds-sel__label--req::after { content: " *"; color: var(--accent); }
    .fds-sel__col { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
    .fds-sel__well {
      display: flex; align-items: center; gap: var(--space-2); width: 100%;
      min-height: var(--control-h); padding: 0 var(--space-2) 0 var(--space-3);
      background: var(--surface-input); border: 1px dashed var(--border-strong);
      border-radius: var(--radius-sm); cursor: pointer; text-align: left;
      font: var(--type-value); color: var(--text-secondary);
      transition: all var(--dur-fast) var(--ease-standard);
    }
    .fds-sel__well:hover { border-color: var(--accent-border); }
    .fds-sel--active .fds-sel__well {
      border-style: solid; border-color: var(--accent);
      background: var(--accent-soft); color: var(--text-primary);
      box-shadow: var(--ring-focus);
    }
    .fds-sel--has .fds-sel__well { border-style: solid; color: var(--text-primary); }
    .fds-sel__icon { width: 14px; height: 14px; flex: none; color: var(--accent); }
    .fds-sel__prompt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fds-sel__count {
      flex: none; font: var(--type-2xs); font-weight: var(--weight-semibold);
      padding: 1px 7px; border-radius: var(--radius-pill);
      background: var(--accent); color: var(--text-on-accent);
    }
    .fds-sel--active .fds-sel__pulse { animation: fdsSelPulse 1.4s var(--ease-standard) infinite; }
    @keyframes fdsSelPulse { 0%,100% { opacity: 1 } 50% { opacity: 0.45 } }
    .fds-sel__clear { flex: none; width: 16px; height: 16px; border: none; background: none;
      color: var(--text-muted); cursor: pointer; border-radius: var(--radius-xs); display: grid; place-items: center; }
    .fds-sel__clear:hover { background: var(--surface-hover); color: var(--text-primary); }
    .fds-sel__hint { font: var(--type-hint); color: var(--text-muted); }
    .fds-sel--active .fds-sel__hint { color: var(--accent-hover); }

.fds-vi {
      display: grid; grid-template-columns: var(--label-col) 1fr;
      align-items: center; column-gap: var(--space-4); min-height: var(--row-h);
    }
    .fds-vi__label { font: var(--type-label); color: var(--text-label);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .fds-vi__field {
      display: flex; align-items: center; height: var(--control-h);
      background: var(--surface-input);
      border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
      box-shadow: var(--inset-field); overflow: hidden;
      transition: border-color var(--dur-fast) var(--ease-standard),
                  box-shadow var(--dur-fast) var(--ease-standard);
    }
    .fds-vi__field:focus-within { border-color: var(--accent); box-shadow: var(--ring-focus); }
    .fds-vi__field--invalid { border-color: var(--error); }
    .fds-vi__field--invalid:focus-within { box-shadow: 0 0 0 1px var(--error); }
    .fds-vi__input {
      flex: 1; min-width: 0; border: none; outline: none; background: none;
      padding: 0 var(--space-3); height: 100%;
      font: var(--type-value); color: var(--text-primary);
    }
    .fds-vi__unit {
      flex: none; padding: 0 var(--space-3); height: 100%;
      display: flex; align-items: center;
      font: var(--type-hint); color: var(--text-muted);
      background: var(--surface-header); border-left: 1px solid var(--border-subtle);
    }
    .fds-vi__err { grid-column: 2 / 3; font: var(--type-hint); color: var(--error); margin-top: 2px; }

.fds-cmd-dialog {
      width: var(--dialog-width);
      display: flex; flex-direction: column;
      background: var(--surface-panel);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-dialog);
      font: var(--type-value);
      color: var(--text-primary);
      overflow: hidden;
    }
    .fds-cmd-dialog__title {
      display: flex; align-items: center; gap: var(--space-3);
      height: 30px; padding: 0 var(--space-4);
      background: var(--surface-header);
      border-bottom: 1px solid var(--border-default);
      font: var(--type-title);
      user-select: none;
    }
    .fds-cmd-dialog__title img { width: 16px; height: 16px; object-fit: contain; }
    .fds-cmd-dialog__title .fds-cmd-dialog__help {
      margin-left: auto; width: 16px; height: 16px; border-radius: 50%;
      display: grid; place-items: center; color: var(--text-muted);
      font-size: 11px; cursor: default; border: 1px solid var(--border-strong);
    }
    .fds-cmd-dialog__body {
      padding: var(--dialog-pad);
      display: flex; flex-direction: column; gap: var(--row-gap);
      overflow-y: auto; max-height: 70vh;
    }
    .fds-cmd-dialog__footer {
      display: flex; justify-content: flex-end; gap: var(--space-3);
      padding: var(--space-4);
      background: var(--surface-header);
      border-top: 1px solid var(--border-default);
    }
    .fds-cmd-btn {
      min-width: 64px; height: 24px; padding: 0 var(--space-5);
      border: 1px solid var(--btn-border); border-radius: var(--radius-sm);
      background: linear-gradient(var(--btn-face-top), var(--btn-face-bottom));
      color: var(--text-primary); font: var(--type-value); cursor: pointer;
      transition: border-color var(--dur-fast) var(--ease-standard),
                  background var(--dur-fast) var(--ease-standard);
    }
    .fds-cmd-btn:hover:not(:disabled) {
      border-color: var(--btn-hover-border);
      background: linear-gradient(var(--btn-hover-top), var(--btn-hover-bottom));
    }
    .fds-cmd-btn:active:not(:disabled) { background: var(--btn-press); }
    .fds-cmd-btn:disabled { color: var(--btn-disabled-text); background: var(--btn-disabled-face); cursor: default; }
    .fds-cmd-btn--ok { font-weight: var(--weight-medium); }

/* hover / focus states (the design runtime injected these; a static page needs them written down) */
.scp0:hover, .scp1:hover { background: var(--brand-paper-deep) !important; color: var(--brand-ink) !important; }
.scp2:hover, .scp6:hover { background: var(--brand-amber-deep) !important; color: #fff !important; }
.scp3:hover { background: var(--brand-paper-deep) !important; }
.scp4:hover { background: var(--brand-amber-bright) !important; }
.scp5:hover { color: #fff !important; }
.scp7:hover { background: var(--brand-paper) !important; }
.scp8:hover { background: #000 !important; }
.scp9:hover { background: rgba(255,255,255,.12) !important; }
.scpd:hover { color: #fff !important; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--brand-amber); outline-offset: 2px; }
.skip { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 100; background: var(--brand-ink); color: #fff; padding: 10px 14px; border-radius: 3px; transform: translateY(-300%); }
.skip:focus { transform: none; }
@media (max-width: 900px) {
  [data-r~="lang"] { order: 2; }
  [data-r~="hdrcta"] { padding: 10px 12px !important; }
}

/* before / after */
.ba { direction: ltr; position: relative; overflow: hidden; border: 1px solid var(--brand-line); border-radius: 4px; background: #d9d6d2; --pos: 50%; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ba .ba-b { clip-path: inset(0 0 0 var(--pos)); }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); pointer-events: none; }
.ba-knob { position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.3); }
.ba-knob::before, .ba-knob::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -5px; border: 5px solid transparent; }
.ba-knob::before { left: 7px; border-right-color: var(--brand-amber); }
.ba-knob::after { right: 7px; border-left-color: var(--brand-amber); }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.ba:focus-within { outline: 2px solid var(--brand-amber); outline-offset: 2px; }
.ba-tag { position: absolute; top: 12px; font: 600 10px/1 var(--font-mono); letter-spacing: .12em; color: #fff; background: rgba(24,24,26,.78); padding: 6px 8px; border-radius: 2px; pointer-events: none; }
.ba-tag-a { left: 12px; } .ba-tag-b { right: 12px; background: var(--brand-amber); }
@media (max-width: 900px) { [data-r~="unstick"] { position: static !important; } }

/* Arabic pages (lang="ar" dir="rtl") */
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-arabic-400.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-arabic-500.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-arabic-600.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-arabic-700.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+FB50-FDFF, U+FE70-FEFF; }
html[lang="ar"] { --font-ui: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif; --font-brand: "Space Grotesk", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif; }
html[lang="ar"] body { font-family: var(--font-ui); }
html[lang="ar"] [data-flip] { display: inline-block; transform: scaleX(-1); }
html[lang="ar"] [style*="letter-spacing"]:not([data-keep-ls]) { letter-spacing: 0 !important; }
html[lang="ar"] [style*="text-transform: uppercase"] { text-transform: none !important; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { line-height: 1.3 !important; }
html[lang="ar"] code, html[lang="ar"] pre, html[lang="ar"] kbd { direction: ltr; unicode-bidi: isolate; }
/* /ar/learn: codes read left to right inside the right-to-left page */
html[lang="ar"] .kc-code { direction: ltr; unicode-bidi: isolate; text-align: right; }
html[lang="ar"] .kp-list .fm { direction: ltr; unicode-bidi: isolate; display: inline-block; margin: 0 0 0 4px; }
html[dir="rtl"] .kcount { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .kbtns .fm { margin-left: 0; margin-right: 2px; }
html[dir="rtl"] .kc-dur { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .kfaq summary { padding: 16px 18px 16px 44px; }
html[dir="rtl"] .kfaq summary::after { right: auto; left: 18px; }
@media (max-width: 900px) { html[dir="rtl"] .kcount { margin-right: 0; } html[dir="rtl"] [data-r~="nav"] { margin-right: 0 !important; } }