/* Redesign 2026-10-25 (docs/redesign/). Loaded after each page's bundle, on every page.
   One dark theme on decision pages, the new routes (hub groups, hero routes, service goals), honest prices that compare,
   and a WhatsApp button that never sits on text. Owner rules kept: no icons or emoji, short copy, everything at 390px. */

/* ---------- footer: one pair of actions + one quiet line ---------- */
.ft-alt { margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.ft-alt a { color: var(--text); text-underline-offset: 4px; text-decoration-color: rgba(72, 199, 236, .5); }
@media (min-width: 761px) { .ft-routes .btn { flex: 0 0 auto; } }
/* a page that ends on its own closing band, or is the contact page, doesn't repeat it in the footer */
main:has(> section.ctab:last-of-type) ~ .footer .ft-top,
body[data-page="contact"] .ft-top { display: none; }

/* ---------- WhatsApp button: round on narrow or short screens (and at 200% zoom), so it never covers text ---------- */
@media (max-width: 600px), (max-height: 520px) {
  .wa-fab { width: 52px; height: 52px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; }
  .wa-fab .wa-fab-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wa-fab::before { content: ""; width: 28px; height: 28px; background: currentColor;
    -webkit-mask: var(--wa-glyph) center / contain no-repeat; mask: var(--wa-glyph) center / contain no-repeat; }
}
:root { --wa-glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38a9.9 9.9 0 0 0 4.74 1.21c5.46 0 9.91-4.45 9.91-9.91C21.95 6.45 17.5 2 12.04 2zm5.8 14.03c-.25.69-1.44 1.32-2 1.37-.51.05-1 .24-3.38-.7-2.85-1.12-4.65-4.05-4.79-4.24-.14-.19-1.15-1.53-1.15-2.92s.73-2.07.99-2.36c.26-.28.56-.35.75-.35l.54.01c.17.01.41-.07.64.49.24.57.81 1.97.88 2.11.07.14.12.31.02.5-.09.19-.14.31-.28.47l-.42.49c-.14.14-.29.29-.12.57.17.28.73 1.2 1.57 1.95 1.08.96 1.99 1.26 2.27 1.4.28.14.45.12.61-.07.17-.19.71-.83.9-1.11.19-.28.38-.24.64-.14.26.09 1.66.78 1.94.93.28.14.47.21.54.33.07.12.07.69-.18 1.37z%22/%3E%3C/svg%3E"); }

/* ---------- one dark theme: sections that used to be paper are tone steps of the night panel ---------- */
.r-tone { background: var(--ink-2); }
[data-theme="dark"] .tg-c { background: var(--panel); border-color: var(--line); color: var(--text); }
[data-theme="dark"] .tg-c p { color: var(--muted); }
[data-theme="dark"] .tg-c .i { background: rgba(72, 199, 236, .1); color: var(--cyan); }
[data-theme="dark"] .rng output { color: var(--cyan); }
[data-theme="dark"] .rng input { accent-color: var(--cyan); }
[data-theme="dark"] .sy-m span { background: rgba(72, 199, 236, .12); color: var(--text); }
[data-theme="dark"] :is(.mod, .sug li) { background: var(--panel); border-color: var(--line); color: var(--text); }
[data-theme="dark"] .mod ul, [data-theme="dark"] .sug small { color: var(--muted); }
[data-theme="dark"] :is(.mod b .i, .mod li::before, .sy-feats h3 small) { color: var(--cyan); }
[data-theme="dark"][data-r-tone] .btn-dark { --bg: transparent; --fg: var(--text); border: 1px solid var(--line-2); }

/* ---------- prices: a short head, one price per card, then a table that compares ---------- */
.sub-hero.sh-tight { padding: calc(var(--nav-h) + clamp(1.4rem, 5vh, 3rem)) 0 clamp(1rem, 3vh, 1.8rem); }
.sub-hero.sh-tight h1 { max-width: none; font-size: clamp(2.1rem, 4.2vw, 3.3rem); }
.sub-hero.sh-tight .lede { max-width: 72ch; margin-top: .6rem; }
.sub-hero.sh-tight + .offer-page { padding-top: 0; }
.pk { display: flex; flex-direction: column; gap: .55rem; }
.pk-inc { flex: 1 1 auto; }
.pk .btn { margin-top: .7rem; }
.pk-head p { font-size: .95rem; }
.pk-promo { padding: .45rem .7rem; }
.pk-promo b { font-size: 1.05rem; }
.pk-facts { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin: 0; }
.pk-facts .pk-care, .pk-facts .pk-time { margin: 0; }
.pk-cmp-wrap { margin-top: clamp(2rem, 5vw, 3rem); }
.pk-cmp-h { font-size: clamp(1.35rem, 2.6vw, 1.8rem); margin: 0 0 .4rem; }
.pk-cmp-sub { color: var(--muted); margin: 0 0 1rem; }
.pk-cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .95rem; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: rgba(14, 37, 49, .5); }
.pk-cmp th, .pk-cmp td { padding: .7rem .9rem; text-align: center; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pk-cmp tbody tr:last-child > * { border-bottom: 0; }
.pk-cmp thead th { font: 600 1rem/1.25 var(--f-display); color: var(--text); background: rgba(72, 199, 236, .07); }
.pk-cmp th[scope="row"] { text-align: start; font-weight: 400; color: var(--text); }
.pk-cmp tr > :nth-child(3) { background: rgba(72, 199, 236, .06); }
.pk-cmp .y { color: var(--cyan); font-weight: 700; }
.pk-cmp .n { color: var(--muted); }
.pk-cmp .grp th { text-align: start; font: 500 .78rem var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: rgba(6, 18, 26, .35); padding-block: .5rem; }
html[lang="ar"] .pk-cmp .grp th { text-transform: none; letter-spacing: 0; font-size: .85rem; }
.pk-cmp-more { margin: 1rem 0 0; color: var(--muted); max-width: 70ch; }
.pk-cmp-more a { color: var(--cyan); }
@media (max-width: 600px) {
  .pk-cmp { font-size: .84rem; }
  .pk-cmp th, .pk-cmp td { padding: .6rem .4rem; }
  .pk-cmp th[scope="row"] { padding-inline-start: .7rem; width: 42%; }
  .pk-cmp thead th { font-size: .82rem; }
}

/* ---------- /sectors/: grouped, full lines, help always visible ---------- */
.hb { min-height: 0; align-items: start; }
.hb-say[data-show] { display: block; margin: .2rem 0 .7rem; color: var(--muted); }
.hb-groups { display: grid; gap: 1.1rem 1.6rem; margin-top: .4rem; }
.hb-g[hidden] { display: none; }
.hb .hb-gh { margin: 0 0 .5rem; font: 500 .78rem/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); max-width: none; }
html[lang="ar"] .hb .hb-gh { font: 600 .92rem/1.5 var(--f-body); letter-spacing: 0; text-transform: none; }
.hb-groups .hb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 761px) {
  .hb-groups .hb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hb-groups .hb-grid small { -webkit-line-clamp: unset; display: block; overflow: visible; }
  .hb-groups .hb-grid a { align-content: start; padding: 9px 10px 10px; }
}
@media (min-width: 1000px) {
  .hb-groups { grid-template-columns: 1fr 1fr; }
  .hb-groups .hb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hb-help { margin: 1.3rem 0 0; display: grid; gap: .5rem; color: var(--muted); }
.hb-help p { margin: 0; }
.hb-help a { color: var(--cyan); font-weight: 600; text-underline-offset: 4px; }
.hb-help .hb-none, .hb-help .hb-apps { margin: 0; }

/* ---------- home hero: one route for each kind of visitor ---------- */
.hero-routes { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .4rem; margin: .9rem 0 0; color: var(--muted); font-size: .95rem; }
.hero-routes a { color: var(--text); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(72, 199, 236, .55); }
.hero-routes a:hover { color: var(--cyan-hi); }
.hero-routes .sep { color: var(--line-2); }
@media (max-width: 600px) { .hero-routes { font-size: .9rem; margin-top: .7rem; gap: .35rem .9rem; } .hero-routes .sep { display: none; } .hero-routes > span:first-child { flex-basis: 100%; } }

/* ---------- services: start from what you want to change ---------- */
.goals { padding: clamp(1rem, 4vw, 2.5rem) 0 clamp(3rem, 8vw, 5rem); }
.gl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.gl { display: flex; flex-direction: column; gap: .6rem; padding: 1.4rem; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.gl h3 { font-size: 1.35rem; margin: 0; }
.gl > p { color: var(--muted); margin: 0; }
.gl ul { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .7rem; }
.gl li { display: grid; gap: .15rem; padding-top: .7rem; border-top: 1px dashed var(--line-2); }
.gl li a { color: var(--cyan); font-weight: 600; text-underline-offset: 4px; justify-self: start; }
.gl-ask { background: rgba(72, 199, 236, .07); border-color: var(--line-2); }
.gl-ask .btn { align-self: start; margin-top: auto; }
.gl-ask .link { align-self: start; }
@media (max-width: 900px) { .gl-grid { grid-template-columns: 1fr; } }
.fit { padding: clamp(3rem, 8vw, 5rem) 0; }
.fit-t { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 1.2rem; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: rgba(14, 37, 49, .5); font-size: .95rem; }
.fit-t th, .fit-t td { padding: .8rem 1rem; text-align: start; vertical-align: top; border-bottom: 1px solid var(--line); }
.fit-t tbody tr:last-child > * { border-bottom: 0; }
.fit-t thead th { font: 600 1rem var(--f-display); background: rgba(72, 199, 236, .07); }
.fit-t tbody th { font-weight: 600; color: var(--text); width: 18%; }
.fit-t td { color: var(--muted); }
.fit-note { color: var(--muted); margin: 1rem 0 0; max-width: 72ch; }
.fit-note a { color: var(--cyan); }
@media (max-width: 700px) {
  .fit-t, .fit-t tbody, .fit-t tr, .fit-t th, .fit-t td { display: block; width: auto; }
  .fit-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .fit-t tbody th { width: auto; padding-bottom: .2rem; border-bottom: 0; }
  .fit-t td { padding-top: .25rem; border-bottom: 0; }
  .fit-t td::before { content: attr(data-l); display: block; font: 500 .74rem var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--cyan); margin-bottom: .1rem; }
  html[lang="ar"] .fit-t td::before { font: 600 .82rem var(--f-body); letter-spacing: 0; text-transform: none; }
  .fit-t tr { border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
  .fit-t tbody tr:last-child { border-bottom: 0; }
}
.svc-list #s-marketing { grid-column: auto; }

/* ---------- the AR services circle never widens the page (2px at 360px) ---------- */
body[data-page="services"] .svc-hero { overflow-x: clip; }

/* ---------- small additions: form hint, systems alternative route ---------- */
.q-hint { margin: -.2rem 0 .7rem; color: var(--muted); font-size: .9rem; }
.sys-alt { margin: .8rem 0 0; color: var(--muted); }
.sys-alt a { color: var(--cyan); font-weight: 600; text-underline-offset: 4px; }