/* hichambentaous.com shared styles */
@font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/familjen-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/familjen-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/familjen-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/jetbrains-mono-greek-400-normal.woff2") format("woff2"); unicode-range: U+0370-03FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/jetbrains-mono-greek-500-normal.woff2") format("woff2"); unicode-range: U+0370-03FF; }

  :root {
    --bg: #0D1B28;
    --bg-2: #132637;
    --line: #27405A;
    --text: #E8EEF2;
    --muted: #8FA3B3;
    --brass: #E3B04B;
    --pass: #58C28A;
    --due: #FF6B4A;
    --paper: #F3F5F2;
    --paper-ink: #1B2630;
    --gutter: clamp(20px, 5vw, 64px);
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--bg); color: var(--text);
    font-family: "Familjen Grotesk", system-ui, sans-serif; font-size: 1.125rem; line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 64px 64px; background-position: -1px -1px;
    background-attachment: fixed;
  }
  body::before { /* fade the grid so it reads as a surface plate, not wallpaper */
    content: ""; position: fixed; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 70% 20%, rgba(13,27,40,0.55), var(--bg) 75%);
  }
  main, header, footer { position: relative; }
  a { color: inherit; text-underline-offset: 3px; }
  a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }
  .wrap { padding-inline: var(--gutter); max-width: 1240px; margin-inline: auto; }

  header .wrap { display: flex; justify-content: space-between; align-items: baseline; padding-block: 24px; gap: 20px; flex-wrap: wrap; }
  .name { font-weight: 700; font-size: 1.15rem; text-decoration: none; }
  nav { display: flex; gap: 26px; flex-wrap: wrap; }
  nav a { text-decoration: none; color: var(--muted); font-weight: 500; }
  nav a:hover { color: var(--text); }

  /* hero */
  .hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 5vw, 72px); align-items: center; padding-top: clamp(24px, 5vw, 64px); }
  h1 { font-size: clamp(3rem, 8.6vw, 7.4rem); line-height: 0.92; letter-spacing: -0.045em; font-weight: 700; margin: 0; }
  h1 span { display: block; }
  h1 .lit { color: var(--brass); }
  .lede { max-width: 46ch; color: var(--muted); font-size: clamp(1.1rem, 1.6vw, 1.3rem); margin: 28px 0 0; }
  .lede strong { color: var(--text); font-weight: 500; }

  .targetbox { width: 100%; max-width: 580px; justify-self: end; }
  #target { display: block; width: 100%; aspect-ratio: 1; touch-action: none; }
  .stats { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px 20px; align-items: end; margin-top: 10px; }
  .stat { font-family: "JetBrains Mono", "Noto Sans Arabic", monospace; }
  .stat .k { font-family: "Familjen Grotesk", sans-serif; color: var(--muted); font-size: 0.9rem; display: block; }
  .stat .v { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; }
  .stat .v small { font-size: 0.55em; color: var(--muted); margin-left: 3px; }
  button.cal, a.cal {
    font: inherit; font-weight: 700; cursor: pointer; border: 2px solid var(--brass); background: var(--brass); color: #1b1304;
    padding: 12px 22px; border-radius: 999px; transition: background .2s, color .2s;
  }
  button.cal[aria-pressed="true"] { background: transparent; color: var(--brass); }
  .hint { grid-column: 1 / -1; color: var(--muted); font-size: 0.9rem; margin: 0; }
  .state { display: inline-block; font-family: "JetBrains Mono", "Noto Sans Arabic", monospace; font-size: 0.85rem; padding: 2px 10px; border-radius: 999px; border: 1px solid currentColor; }
  .state.bad { color: var(--due); } .state.ok { color: var(--pass); }

  section { padding-top: clamp(80px, 11vw, 150px); }
  h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1; letter-spacing: -0.035em; margin: 0 0 16px; max-width: 18ch; }
  .intro { max-width: 56ch; color: var(--muted); margin: 0 0 36px; }

  /* drift lab */
  .panel { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: clamp(16px, 3vw, 28px); }
  .driftgrid { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  #chart { width: 100%; height: auto; display: block; }
  #chart text { font-family: "JetBrains Mono", "Noto Sans Arabic", monospace; font-size: 11px; fill: var(--muted); }
  .ctl label { display: block; font-weight: 500; margin-bottom: 8px; }
  .ctl input[type=range] { width: 100%; accent-color: var(--brass); }
  .big { font-family: "JetBrains Mono", "Noto Sans Arabic", monospace; font-size: clamp(2.6rem, 5vw, 4rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; color: var(--brass); margin: 22px 0 4px; }
  .big small { font-size: 0.34em; color: var(--muted); letter-spacing: 0; margin-left: 6px; }
  .ctl p { margin: 8px 0 0; color: var(--muted); font-size: 1rem; }
  .ctl .cmp { color: var(--text); }

  /* temperature */
  .spec { width: 100%; border-collapse: collapse; font-size: 0.93rem; min-width: 760px; }
  .spec th { text-align: left; color: var(--muted); font-weight: 500; padding: 0 14px 10px 0; border-bottom: 2px solid var(--line); vertical-align: bottom; }
  .spec td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--muted); }
  .spec td:first-child { font-weight: 500; color: var(--text); }
  .spec td.mono, .spec .mono { font-family: "JetBrains Mono", "Noto Sans Arabic", monospace; font-size: 0.84em; color: var(--text); }
  .spec td.sugg { color: var(--pass); font-weight: 700; }
  .spec tr.pick td { background: rgba(88,194,138,0.07); }
  .steps { margin: 0; padding-left: 1.3em; color: var(--muted); font-size: 1rem; }
  .steps li { margin: 10px 0; padding-left: 4px; }
  .steps li strong { color: var(--text); font-weight: 500; }
  .twocol .panel h3, .twocol .panel h4 { color: var(--brass); }
  .eq { margin: 0 0 12px; font-family: "JetBrains Mono", "Noto Sans Arabic", monospace; font-size: 0.8rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
  .eq b { color: var(--text); font-weight: 500; }
  #pfChart { width: 100%; height: auto; display: block; }
  #pfChart text { font-family: "JetBrains Mono", "Noto Sans Arabic", monospace; font-size: 11px; fill: var(--muted); }

  /* AI toolkit */
  .subh { font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: -0.02em; margin: 52px 0 14px; line-height: 1.15; }
  .tab[aria-pressed="true"] { color: #1b1304; background: var(--brass); border-color: var(--brass); font-weight: 700; }
  .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
  .prompts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .pcard { background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
  .pcard h4 { margin: 0; font-size: 1.15rem; letter-spacing: -0.01em; line-height: 1.25; }
  .pcard .tag { align-self: flex-start; font-family: "JetBrains Mono", "Noto Sans Arabic", monospace; font-size: 0.75rem; color: var(--brass); border: 1px solid var(--brass); border-radius: 999px; padding: 1px 10px; }
  .pcard .ptext { margin: 0; flex: 1; white-space: pre-wrap; word-break: break-word; font-family: "JetBrains Mono", "Noto Sans Arabic", monospace; font-size: 0.8rem; line-height: 1.55; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
  .pcard .ghost { align-self: flex-start; }
  .flags { list-style: none; margin: 14px 0 18px; padding: 0; font-size: 0.95rem; color: var(--muted); min-height: 2.5em; }
  .flags li { padding: 5px 0; border-bottom: 1px solid var(--line); }
  #ccChart { width: 100%; height: auto; display: block; margin-top: 22px; }
  #ccChart text { font-family: "JetBrains Mono", "Noto Sans Arabic", monospace; font-size: 11px; fill: var(--muted); }
  .twocol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .twocol h3, .twocol h4 { margin: 0 0 10px; font-size: 1.15rem; }
  .twocol ul { margin: 0; padding-left: 1.2em; color: var(--muted); }
  .twocol li { margin: 6px 0; }
  .twocol .good h3, .twocol .good h4 { color: var(--pass); } .twocol .person h3, .twocol .person h4 { color: var(--brass); }

  /* calculators */
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
  .tab { font: inherit; font-weight: 500; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px; cursor: pointer; }
  .tab:hover { color: var(--text); border-color: var(--brass); }
  .tab[aria-selected="true"] { color: #1b1304; background: var(--brass); border-color: var(--brass); font-weight: 700; }
  .tabpanel[hidden] { display: none; }
  .calcgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
  .calcgrid.wide { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
  .field input[type=number], .tbl input[type=text], .tbl input[type=number], .tbl select, .fields select {
    width: 100%; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px;
  }
  .field input[type=number]:focus, .tbl input:focus, .tbl select:focus, .fields select:focus { outline: 3px solid var(--brass); outline-offset: 1px; border-color: var(--brass); }
  .tscroll { overflow-x: auto; position: relative; }
  .tbl { width: 100%; border-collapse: collapse; font-size: 0.95rem; min-width: 560px; }
  .tbl th { text-align: left; color: var(--muted); font-weight: 500; padding: 0 6px 8px 0; font-size: 0.9rem; }
  .tbl td { padding: 5px 6px 5px 0; vertical-align: middle; }
  .tbl td.uo { font-family: "JetBrains Mono", "Noto Sans Arabic", monospace; font-size: 0.85rem; white-space: nowrap; color: var(--muted); }
  .tbl td:nth-child(2) input, .tbl td:nth-child(4) input { min-width: 4.5rem; }
  .rm { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 1.4rem; line-height: 1; padding: 4px 8px; }
  .rm:hover { color: var(--due); }
  .ghost { font: inherit; font-weight: 500; color: var(--text); background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; cursor: pointer; }
  .ghost:hover { border-color: var(--brass); }
  .res { margin: 18px 0 0; }
  .res > div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding: 9px 0; }
  .res dt { color: var(--muted); }
  .res dd { margin: 0; font-family: "JetBrains Mono", "Noto Sans Arabic", monospace; text-align: right; }
  .res dd.hi { color: var(--brass); font-size: 1.25rem; font-weight: 500; }
  .warn { color: var(--brass); margin: 6px 0 0; }
  #gStrip, #iChart { width: 100%; height: auto; display: block; }
  #gStrip text, #iChart text { font-family: "JetBrains Mono", "Noto Sans Arabic", monospace; font-size: 11px; fill: var(--muted); }

  /* guard band */
  #gbChart { width: 100%; height: auto; display: block; }
  #gbChart text { font-family: "JetBrains Mono", "Noto Sans Arabic", monospace; font-size: 12px; fill: var(--muted); }
  .badge { display: inline-block; font-family: "JetBrains Mono", "Noto Sans Arabic", monospace; font-size: 1.05rem; font-weight: 500; padding: 6px 14px; border-radius: 999px; border: 2px solid currentColor; margin: 22px 0 6px; }
  .badge.pass { color: var(--pass); } .badge.up { color: var(--brass); } .badge.uf { color: #FF9F5A; } .badge.fail { color: var(--due); }
  .zones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 32px 0 0; }
  .zones dt { font-weight: 700; display: flex; align-items: flex-start; gap: 8px; margin-bottom: 4px; line-height: 1.25; }
  .zones dd { margin: 0; color: var(--muted); font-size: 1rem; }
  .sw { width: 14px; height: 14px; border-radius: 3px; flex: none; margin-top: 4px; }
  .sw-pass { background: var(--pass); }
  .sw-fail { background: var(--due); }
  .sw-up { background: repeating-linear-gradient(45deg, var(--brass) 0 3px, transparent 3px 6px); border: 1px solid var(--brass); }
  .sw-uf { background: repeating-linear-gradient(45deg, #FF9F5A 0 3px, transparent 3px 6px); border: 1px solid #FF9F5A; }

  /* certificate reader */
  .readergrid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .cert { position: relative; overflow: hidden; background: var(--paper); color: var(--paper-ink); border-radius: 6px; padding: clamp(16px, 3vw, 28px); font-size: 0.98rem; box-shadow: 0 24px 60px rgba(0,0,0,.45); transform: rotate(-0.8deg); }
  .cert h3 { margin: 0 0 2px; font-size: 1.15rem; letter-spacing: -0.01em; }
  .cert .sub { color: #5d6b76; margin: 0 0 16px; font-size: 0.88rem; }
  .cert dl { display: grid; grid-template-columns: 8.5rem 1fr; gap: 6px 14px; margin: 0 0 16px; }
  .cert dt { color: #5d6b76; }
  .cert dd { margin: 0; font-weight: 500; }
  .cert table { width: 100%; border-collapse: collapse; font-family: "JetBrains Mono", "Noto Sans Arabic", monospace; font-size: 0.85rem; }
  .cert th, .cert td { text-align: right; padding: 6px 4px; border-bottom: 1px solid #d4d9d4; }
  .cert th:first-child, .cert td:first-child { text-align: left; }
  .cert th { font-family: "Familjen Grotesk", sans-serif; font-weight: 500; color: #5d6b76; }
  .cert [data-f] { transition: background .25s; border-radius: 2px; }
  .cert .hl { background: rgba(227,176,75,.55); }
  .cert .hl.bad { background: rgba(255,107,74,.45); }
  .scanline { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brass); box-shadow: 0 0 18px 6px rgba(227,176,75,.6); opacity: 0; pointer-events: none; }
  .scanning .scanline { opacity: 1; animation: scan 3.4s linear forwards; }
  @keyframes scan { from { transform: translateY(0); } to { transform: translateY(var(--h, 420px)); } }
  .out ul { list-style: none; margin: 0 0 18px; padding: 0; font-family: "JetBrains Mono", "Noto Sans Arabic", monospace; font-size: 0.88rem; min-height: 14rem; }
  .out li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--line); animation: pop .25s ease-out; }
  .out li span:first-child { color: var(--muted); }
  .out li.flag { color: var(--due); border-bottom-color: var(--due); }
  @keyframes pop { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
  .out .note { color: var(--muted); font-size: 0.95rem; margin: 14px 0 0; }
  .out .verdict { margin: 16px 0 0; color: var(--text); min-height: 3.2em; }
  .fine { color: var(--muted); font-size: 0.85rem; margin-top: 18px; }

  /* work */
  .rows { border-top: 1px solid var(--line); }
  .row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px 48px; padding: 28px 0; border-bottom: 1px solid var(--line); }
  .row h3 { margin: 0; font-size: 1.35rem; letter-spacing: -0.015em; line-height: 1.2; }
  .row p { margin: 0; max-width: 58ch; color: var(--muted); }
  .std { font-family: "JetBrains Mono", "Noto Sans Arabic", monospace; font-size: 0.86em; color: var(--text); border: 1px solid var(--line); padding: 1px 6px; border-radius: 4px; white-space: nowrap; }

  /* contact sticker */
  .contactgrid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; padding-bottom: clamp(80px, 11vw, 140px); }
  .sticker { width: 240px; background: var(--paper); color: var(--paper-ink); border: 3px solid #1F7A4F; border-radius: 10px; padding: 14px 16px; transform: rotate(3deg); font-family: "JetBrains Mono", "Noto Sans Arabic", monospace; font-size: 0.82rem; line-height: 1.5; box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px #1F7A4F, 0 20px 40px rgba(0,0,0,.4); }
  .sticker b { display: block; font-family: "Familjen Grotesk", sans-serif; font-size: 1.4rem; color: #1F7A4F; line-height: 1.1; margin-bottom: 6px; }
  .sticker dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0 10px; }
  .sticker dt { color: #5d6b76; } .sticker dd { margin: 0; text-align: right; }
  .sticker dd.due { color: #B33A18; font-weight: 500; }

  /* contact form */
  .form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
  .form .full { grid-column: 1 / -1; }
  .field label { display: block; font-weight: 500; margin-bottom: 6px; }
  .field .opt { color: var(--muted); font-weight: 400; }
  .field input[type=text], .field input[type=email], .field input[type=tel], .field select, .field textarea {
    width: 100%; font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px;
  }
  .field textarea { resize: vertical; min-height: 140px; }
  .field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--brass); outline-offset: 1px; border-color: var(--brass); }
  .field [aria-invalid="true"] { border-color: var(--due); }
  .hp { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none; }
  .actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
  .status { margin: 0; color: var(--muted); }
  .status.ok { color: var(--pass); } .status.err { color: var(--due); }
  button.cal:disabled { opacity: .6; cursor: default; }

  footer { border-top: 1px solid var(--line); }
  footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 30px; padding-block: 28px; color: var(--muted); font-size: 0.95rem; }

  @media (max-width: 860px) {
    .hero, .driftgrid, .readergrid, .contactgrid { grid-template-columns: minmax(0, 1fr); }
    .form { grid-template-columns: minmax(0, 1fr); }
    .zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .calcgrid, .calcgrid.wide { grid-template-columns: minmax(0, 1fr); }
    .prompts, .twocol { grid-template-columns: minmax(0, 1fr); }
    .targetbox { justify-self: center; }
    .row { grid-template-columns: minmax(0, 1fr); }
    .sticker { margin-inline: auto; }
    .cert { transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .scanning .scanline { animation: none; opacity: 0; }
    .out li { animation: none; }
  }@font-face { font-family: "Noto Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/noto-sans-arabic-arabic-400-normal.woff2") format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC; }
@font-face { font-family: "Noto Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/noto-sans-arabic-arabic-500-normal.woff2") format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC; }
@font-face { font-family: "Noto Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/noto-sans-arabic-arabic-700-normal.woff2") format("woff2"); unicode-range: U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC; }

  /* ---- site shell ---- */
  :root { color-scheme: dark; }
  .skip { position: absolute; left: 16px; top: -60px; background: var(--brass); color: #1B2630; padding: 10px 16px; border-radius: 6px; font-weight: 700; z-index: 50; text-decoration: none; }
  .skip:focus { top: 12px; }
  header .wrap { align-items: center; }
  .navtoggle { display: none; background: none; border: 1px solid var(--line); color: var(--text); font: inherit; font-weight: 500; padding: 8px 14px; border-radius: 8px; cursor: pointer; }
  nav a { padding: 4px 0; border-bottom: 2px solid transparent; }
  nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--brass); }
  main { display: block; padding-bottom: clamp(60px, 8vw, 110px); }
  .pagehead { padding-top: clamp(28px, 5vw, 72px); }
  .pagehead h1, h1.pt { font-size: clamp(2.2rem, 5.6vw, 4.4rem); line-height: 1; letter-spacing: -0.04em; margin: 0 0 18px; max-width: 20ch; }
  .pagehead h1 span, h1.pt span { display: inline; }
  .pagehead .intro { margin-bottom: 0; }
  .pagejump { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; list-style: none; }
  .pagejump a { display: inline-block; text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 16px; color: var(--muted); font-size: 0.98rem; }
  .pagejump a:hover { color: var(--text); border-color: var(--brass); }
  .section-after-head { padding-top: clamp(48px, 7vw, 90px); }
  .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 18px; margin-top: 8px; }
  .card { display: flex; flex-direction: column; gap: 10px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; padding: 26px; text-decoration: none; transition: border-color .2s, transform .2s; }
  .card:hover, .card:focus-visible { border-color: var(--brass); transform: translateY(-3px); }
  .card .num { font-family: "JetBrains Mono", "Noto Sans Arabic", ui-monospace, monospace; color: var(--brass); font-size: 0.9rem; }
  .card h3 { margin: 0; font-size: 1.4rem; letter-spacing: -0.02em; line-height: 1.15; }
  .card p { margin: 0; color: var(--muted); font-size: 1rem; flex: 1; }
  .card .go { color: var(--brass); font-weight: 500; font-size: 1rem; }
  .cta { margin-top: clamp(60px, 8vw, 110px); border: 1px solid var(--line); border-radius: 16px; padding: clamp(28px, 5vw, 56px); background: var(--bg-2); display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: center; justify-content: space-between; }
  .cta h2 { margin: 0 0 8px; max-width: 22ch; }
  .cta p { margin: 0; color: var(--muted); max-width: 48ch; }
  a.cal { display: inline-block; text-decoration: none; }
  .nextpage { margin-top: clamp(56px, 7vw, 96px); padding-top: 28px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: space-between; color: var(--muted); }
  .nextpage a { color: var(--text); font-weight: 500; }
  .nextpage a:hover { color: var(--brass); }
  footer .wrap { align-items: center; }
  footer nav { gap: 18px; }
  footer nav a { font-size: 0.95rem; }
  noscript .panel { margin-top: 20px; }
  @media (max-width: 860px) {
    .navtoggle { display: inline-block; }
    header nav { display: none; width: 100%; flex-direction: column; gap: 4px; padding: 6px 0 12px; }
    header nav.open { display: flex; }
    header nav a { padding: 10px 0; font-size: 1.15rem; border-bottom: 1px solid var(--line); }
    nav a[aria-current="page"] { border-bottom-color: var(--brass); }
    header .wrap { flex-wrap: wrap; }
  }

  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  .mcalc { margin-top: 22px; }
  .mcalc:first-of-type { margin-top: 0; }
  .mtitle { margin: 0 0 18px; font-size: 1.25rem; letter-spacing: -0.015em; line-height: 1.2; color: var(--brass); }
  .twocol .panel h3 + ol, .twocol .panel h3 + ul { margin-top: 4px; }
  ul.steps { list-style: disc; }
  .pagehead .steps { max-width: 80ch; }
  .twocol .steps { max-width: none; }

  /* ---- language switcher ---- */
  nav .lang { display: inline-flex; gap: 4px; margin-inline-start: 6px; padding-inline-start: 18px; border-inline-start: 1px solid var(--line); align-items: center; }
  nav .lang a { padding: 2px 8px; border: 1px solid transparent; border-radius: 6px; font-size: 0.9rem; font-weight: 500; }
  nav .lang a[aria-current="true"] { color: var(--text); border-color: var(--brass); }
  @media (max-width: 860px) {
    nav .lang { margin: 8px 0 0; padding: 8px 0 0; border-inline-start: 0; border-top: 1px solid var(--line); gap: 10px; }
    nav .lang a { padding: 6px 12px; border-bottom: 1px solid transparent; font-size: 1rem; }
    nav .lang a[aria-current="true"] { border-color: var(--brass); }
  }

  /* ---- right-to-left (Arabic) ---- */
  [dir="rtl"] body { font-family: "Noto Sans Arabic", "Familjen Grotesk", system-ui, sans-serif; line-height: 1.75; }
  [dir="rtl"] *, [dir="rtl"] *::before, [dir="rtl"] *::after { letter-spacing: 0 !important; }
  [dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] .pagehead h1 { line-height: 1.25; }
  [dir="rtl"] h1 { line-height: 1.2; }
  [dir="rtl"] .stat .v small, [dir="rtl"] .big small { margin-left: 0; margin-right: 4px; }
  [dir="rtl"] .spec th { text-align: right; padding: 0 0 10px 14px; }
  [dir="rtl"] .tbl th { text-align: right; padding: 0 0 8px 6px; }
  [dir="rtl"] .steps { padding-left: 0; padding-right: 1.3em; }
  [dir="rtl"] .steps li { padding-left: 0; padding-right: 4px; }
  [dir="rtl"] .twocol ul { padding-left: 0; padding-right: 1.2em; }
  [dir="rtl"] .res dd { text-align: left; unicode-bidi: plaintext; }
  [dir="rtl"] .sticker dd { text-align: left; }
  [dir="rtl"] .cert th, [dir="rtl"] .cert td { text-align: left; }
  [dir="rtl"] .cert th:first-child, [dir="rtl"] .cert td:first-child { text-align: right; }
  [dir="rtl"] .skip { left: auto; right: 16px; }
  [dir="rtl"] input[type="number"], [dir="rtl"] input[type="email"], [dir="rtl"] input[type="tel"], [dir="rtl"] .mono, [dir="rtl"] .eq, [dir="rtl"] pre, [dir="rtl"] .big { direction: ltr; unicode-bidi: isolate; }
  [dir="rtl"] .card:hover, [dir="rtl"] .card:focus-visible { transform: translateY(-3px); }
  [dir="rtl"] .cta { text-align: right; }
  [dir="rtl"] canvas { direction: ltr; }