/*
 * Liwan marketing site.
 *
 * A folder of static files, served by Caddy on the customers' server, with no
 * container behind it. Every link in these pages is relative, so the folder
 * can be put under any domain without editing a page.
 *
 * ---------------------------------------------------------------------------
 * The sister of the Muster Roll site, built the same way on purpose: the two
 * products come from one house and a prospect who has seen one should know
 * the other. Same masthead, same ruled index instead of a stack of cards,
 * same dimensional buttons, same gold as the one rare accent.
 *
 * What is Liwan's own comes out of its mark. A liwan is the vaulted hall,
 * open on one side, that a house receives its guests in — so where Muster
 * Roll draws tally strokes across its masthead, this one draws an arcade of
 * arches; and the crescent standing in the arch is the night the system
 * sells, which is what the gold is for here. The petrol is the product's own
 * header green rather than Muster Roll's blue, and the hero shows a room
 * board, because a page selling a room board should show one.
 * ---------------------------------------------------------------------------
 */

:root {
    /* Petrol — the masthead, and the system's own header. */
    --petrol-1: #0b3b38;
    --petrol-2: #0f5e58;
    --petrol-deep: #082a28;

    --brand: #0f766e;
    --brand-deep: #0b5d56;
    --brand-light: #e2f2ef;
    --accent: #14b8a6;

    /* The crescent's lamp. Rule under a heading, the entry numbers, the one
       button on a dark block — never a background. */
    --gold: #e0b24f;
    --gold-deep: #a97d22;

    --ink: #0b1a1a;
    --ink-soft: #455d59;
    --ink-faint: #7a908c;
    --ground: #f4f7f6;
    --paper: #ffffff;
    --rule: #dfe8e5;
    --rule-strong: #c2d4d0;

    /* On petrol. */
    --on-dark: #eaf4f2;
    --on-dark-soft: #a7c7c2;
    --on-dark-rule: rgba(255, 255, 255, .14);

    /* The room states, as the board in the system colours them. */
    --st-free: #34d399;
    --st-arriving: #fbbf24;
    --st-occupied: #94a3b8;
    --st-cleaning: #38bdf8;
    --st-repair: #a78bfa;

    --display: "Readex Pro", "IBM Plex Sans Arabic", system-ui, sans-serif;
    --sans: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
    --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    --wrap: 70rem;
    --header-h: 64px;

    --lift-1: 0 1px 2px rgba(11, 26, 26, .05), 0 1px 3px rgba(11, 26, 26, .06);
    --lift-2: 0 2px 6px rgba(11, 26, 26, .06), 0 14px 32px -14px rgba(11, 26, 26, .24);
    --lift-3: 0 18px 46px -16px rgba(11, 26, 26, .34), 0 2px 10px rgba(11, 26, 26, .08);
    --bevel: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -2px 0 rgba(0, 0, 0, .15);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    /* Backstop against sideways scroll. `clip`, not `hidden`: hidden turns the
       body into a scroll container and kills the sticky header. */
    overflow-x: clip;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.85;
    -webkit-text-size-adjust: 100%;
}

img, svg { max-width: 100%; }
a { color: var(--brand-deep); }

/* Sections the nav links to stop below the sticky bar, not under it. */
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.wrap {
    max-width: var(--wrap);
    margin: 0 auto;
    padding-inline: 22px;
}

/* ===========================================================================
   Masthead — the header bar and the hero are one dark block
   =========================================================================== */

.masthead {
    position: relative;
    isolation: isolate;
    background: linear-gradient(135deg, var(--petrol-1) 0%, var(--petrol-2) 58%, #0c4f4a 100%);
    color: var(--on-dark);
    border-bottom: 3px solid var(--gold);
}

/* An arcade across the masthead — the liwan's arches, at the scale of the
   page. A background image rather than markup: it is texture, and texture
   should not be in the document. The arch is the mark's own path. */
.masthead::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='132' viewBox='0 0 96 132'%3E%3Cpath d='M18 132V62Q18 22 48 17Q78 22 78 62V132' fill='none' stroke='%23ffffff' stroke-opacity='.055' stroke-width='1.4'/%3E%3C/svg%3E") repeat-x left bottom / 96px 132px,
        radial-gradient(48rem 30rem at 78% -10%, rgba(20, 184, 166, .32), transparent 60%);
    pointer-events: none;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    /* The same petrol as the masthead it sits above, so at rest the two read
       as one block and the bar only separates itself once the page has
       scrolled under it. */
    background: linear-gradient(120deg, var(--petrol-1), #0e4a46);
    border-bottom: 1px solid var(--on-dark-rule);
}

.site-header .wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding-block: 13px;
    min-height: var(--header-h);
}

.brand {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: #fff;
    font-family: var(--display);
    font-weight: 600;
    font-size: 1.08rem;
    letter-spacing: -0.01em;
    margin-inline-end: auto;
}

.brand img { width: 36px; height: 36px; flex: none; }

.brand small {
    display: block;
    font-family: var(--sans);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--on-dark-soft);
    line-height: 1.2;
}

.site-nav { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; }

.site-nav > a {
    text-decoration: none;
    color: var(--on-dark-soft);
    font-size: 0.92rem;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 8px;
    transition: color .15s ease, background-color .15s ease;
}

.site-nav > a:hover { background: rgba(255, 255, 255, .09); color: #fff; }

.site-nav > a:focus-visible,
.lang-toggle a:focus-visible,
.btn:focus-visible,
.faq summary:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* ---------- language switch ---------- */

/* Both languages shown at once with the current one filled — the same shape
   as the toggle inside the product. */
.lang-toggle {
    display: inline-flex;
    margin-inline-start: 6px;
    padding: 3px;
    border: 1px solid var(--on-dark-rule);
    border-radius: 999px;
    background: rgba(0, 0, 0, .18);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.lang-toggle > * {
    display: grid;
    place-items: center;
    padding: 7px 13px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--on-dark-soft);
    transition: color .15s ease, background-color .15s ease;
}

.lang-toggle a:hover { color: #fff; background: rgba(255, 255, 255, .1); }

.lang-toggle .is-active {
    background: var(--accent);
    color: #04231f;
    box-shadow: var(--bevel);
    cursor: default;
}

/* ---------- hero ---------- */

.hero { padding-block: 60px 76px; }

.hero .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 48px;
    align-items: center;
}

@media (max-width: 940px) {
    .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 18px;
}

.eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    flex: none;
}

.hero h1 {
    font-family: var(--display);
    font-size: clamp(2.05rem, 4.6vw, 3.1rem);
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -0.022em;
    text-wrap: balance;
    margin: 0 0 20px;
    color: #fff;
}

.hero p.lede {
    font-size: 1.06rem;
    color: var(--on-dark);
    max-width: 48ch;
    margin: 0 0 14px;
    text-wrap: pretty;
}

.hero p.sub {
    font-size: 0.97rem;
    color: var(--on-dark-soft);
    max-width: 48ch;
    margin: 0 0 30px;
}

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

.hero-note { margin: 16px 0 0; color: var(--on-dark-soft); font-size: 0.9rem; }

/* ---------- the specimen board ---------- */

/* Tonight's board for one floor, as the system draws it: a tile per room,
   coloured by its state, the guest's name on the occupied ones. */
.specimen {
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--on-dark-rule);
    border-radius: 14px;
    padding: 6px;
    box-shadow: var(--lift-3);
    backdrop-filter: blur(6px);
}

.specimen-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px 13px;
    font-size: 0.76rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--on-dark-soft);
    font-family: var(--display);
    font-weight: 600;
}

.specimen-head span:last-child { color: var(--gold); letter-spacing: 0; text-transform: none; }

.tonight {
    display: grid;
    grid-template-columns: auto repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--on-dark-rule);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 6px;
}

.tonight > div { background: rgba(0, 0, 0, .24); padding: 12px 14px; }
.tonight b {
    display: block;
    font-family: var(--display);
    font-size: 1.15rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}
.tonight .big b { font-size: 1.7rem; }
.tonight span { font-size: 0.74rem; color: var(--on-dark-soft); }

.floor-label {
    padding: 8px 10px 6px;
    font-family: var(--display);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--on-dark-soft);
}

.board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 0 0 6px;
}

.room {
    position: relative;
    min-height: 82px;
    padding: 9px 10px 9px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    border-block-end: 3px solid var(--state);
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
}

.room b {
    font-family: var(--display);
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.room .state {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--state);
    line-height: 1.35;
}

.room .who {
    font-size: 0.7rem;
    color: var(--on-dark-soft);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.room.free     { --state: var(--st-free); }
.room.arriving { --state: var(--st-arriving); }
.room.occupied { --state: var(--st-occupied); }
.room.cleaning { --state: var(--st-cleaning); }
.room.repair   { --state: var(--st-repair); }

.specimen-foot {
    padding: 11px 14px 9px;
    font-size: 0.76rem;
    color: var(--on-dark-soft);
    border-top: 1px solid var(--on-dark-rule);
}

@media (max-width: 520px) {
    .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tonight { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- the count strip ---------- */

/* Four facts separated by vertical hairlines, directly under the masthead so
   the first thing after the claim is something countable. */
.counts {
    background: var(--petrol-deep);
    color: var(--on-dark);
}

.counts .wrap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--on-dark-rule);
    padding: 0;
    max-width: var(--wrap);
}

.count {
    background: var(--petrol-deep);
    padding: 22px 20px;
    text-align: center;
}

.count b {
    display: block;
    font-family: var(--display);
    font-size: 1.6rem;
    font-weight: 600;
    color: #fff;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.count span { font-size: 0.82rem; color: var(--on-dark-soft); }

@media (max-width: 720px) {
    .counts .wrap { grid-template-columns: repeat(2, 1fr); }
    .count { padding: 18px 14px; }
    .count b { font-size: 1.35rem; }
}

/* ===========================================================================
   Buttons
   =========================================================================== */

/* Dimensional, not flat: a vertical gradient, a lit top edge, a bevel beneath
   and a 1px press. The product's own control language. */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 13px 26px;
    border-radius: 11px;
    border: 1px solid transparent;
    transition: transform .08s ease, box-shadow .18s ease, background .18s ease;
}

.btn svg { flex: none; }
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: linear-gradient(180deg, var(--gold), #c9992f);
    color: #2a1f05;
    box-shadow: var(--bevel), var(--lift-2);
}
.btn-primary:hover { background: linear-gradient(180deg, #ecc268, #b98a26); box-shadow: var(--bevel), var(--lift-3); }

.btn-ghost {
    background: rgba(255, 255, 255, .07);
    color: #fff;
    border-color: rgba(255, 255, 255, .28);
}
.btn-ghost:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .45); }

/* On paper the ghost button has to invert — white on white is nothing. */
section .btn-ghost,
.cta .btn-ghost {
    background: linear-gradient(180deg, var(--paper), var(--ground));
    color: var(--brand-deep);
    border-color: var(--rule-strong);
    box-shadow: var(--lift-1);
}
section .btn-ghost:hover,
.cta .btn-ghost:hover { background: var(--brand-light); border-color: var(--brand); box-shadow: var(--lift-2); }

section .btn-primary,
.cta .btn-primary {
    background: linear-gradient(180deg, #16a394, var(--brand-deep));
    color: #fff;
}
section .btn-primary:hover,
.cta .btn-primary:hover { background: linear-gradient(180deg, #18b3a2, #0a5049); }

/* Inside a petrol panel the ground is dark again, so the call to action goes
   back to gold — the same button the masthead carries. */
.panel .btn-primary {
    background: linear-gradient(180deg, var(--gold), #c9992f);
    color: #2a1f05;
}
.panel .btn-primary:hover { background: linear-gradient(180deg, #ecc268, #b98a26); }

/* ===========================================================================
   Sections
   =========================================================================== */

section { padding-block: 78px; }
.alt { background: var(--paper); border-block: 1px solid var(--rule); }

.section-head { margin-bottom: 40px; max-width: 62ch; }

section > .wrap > h2,
.section-head h2 {
    font-family: var(--display);
    font-size: clamp(1.5rem, 3.3vw, 2.05rem);
    font-weight: 600;
    line-height: 1.32;
    letter-spacing: -0.018em;
    margin: 0 0 12px;
    text-wrap: balance;
}

.section-head .eyebrow { color: var(--brand); }
.section-head .eyebrow::before { background: var(--gold); }

.section-lede { color: var(--ink-soft); margin: 0; text-wrap: pretty; }

/* ===========================================================================
   The index of capabilities — a register, not twelve cards
   =========================================================================== */

/* Hairline grid lines rather than a border and a radius on each cell. */
.index {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--lift-1);
}

.entry {
    position: relative;
    background: var(--paper);
    padding: 26px 24px 24px;
    transition: background .18s ease;
}

.alt .index { background: var(--rule); }
.alt .entry { background: var(--ground); }

.entry:hover { background: var(--brand-light); }

.entry-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

/* The entry number: an index numbers its entries, and these are the twelve
   things the system does. */
.entry-no {
    font-family: var(--mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--gold-deep);
    font-variant-numeric: tabular-nums;
    flex: none;
}

.entry-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    background: var(--brand-light);
    color: var(--brand-deep);
    flex: none;
    transition: background .18s ease, color .18s ease;
}

.entry:hover .entry-icon { background: var(--brand); color: #fff; }

.entry h3 {
    font-family: var(--display);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    margin: 0;
}

.entry p { margin: 0; font-size: 0.93rem; color: var(--ink-soft); line-height: 1.75; }

/* ===========================================================================
   The phone — the screens themselves, beside what they are for
   =========================================================================== */

.phones-layout {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 48px;
    align-items: center;
}

@media (max-width: 940px) {
    .phones-layout { grid-template-columns: minmax(0, 1fr); }
}

.phones {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

/* The middle phone stands a little lower, so three identical frames read as
   a hand of screens rather than a row of boxes. */
.phones figure:nth-child(2) { margin-top: 34px; }

.phones figure { margin: 0; }

.phone-frame {
    background: #0a1514;
    border-radius: 26px;
    padding: 7px;
    box-shadow: var(--lift-3), inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.phone-frame img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    border-radius: 20px;
    background: var(--ground);
}

.phones figcaption {
    margin-top: 12px;
    text-align: center;
    font-family: var(--display);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--ink-soft);
}

@media (max-width: 560px) {
    .phones { gap: 10px; }
    .phone-frame { border-radius: 18px; padding: 5px; }
    .phone-frame img { border-radius: 14px; }
    .phones figure:nth-child(2) { margin-top: 18px; }
    .phones figcaption { font-size: 0.78rem; }
}

/* A ruled list on paper: one claim per row, separated by a hairline. */
.ruled { list-style: none; margin: 0; padding: 0; }
.ruled li {
    padding-block: 13px;
    border-block-end: 1px solid var(--rule);
    font-size: 0.95rem;
    color: var(--ink-soft);
    display: flex;
    gap: 12px;
    align-items: baseline;
    line-height: 1.7;
}
.ruled li:last-child { border-block-end: 0; }
.ruled li::before {
    content: "";
    width: 7px; height: 7px;
    flex: none;
    border-radius: 2px;
    background: var(--gold);
    transform: translateY(-1px);
}
.ruled b { color: var(--ink); font-weight: 600; }

.panel .ruled li { border-block-end-color: var(--on-dark-rule); color: var(--on-dark); }
.panel .ruled b { color: #fff; }

/* ===========================================================================
   The filled petrol block
   =========================================================================== */

.panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(135deg, var(--petrol-1), var(--petrol-2) 62%, #0c4f4a);
    color: var(--on-dark);
    border-radius: 18px;
    box-shadow: var(--lift-3);
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    gap: 0;
}

.panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='110' viewBox='0 0 80 110'%3E%3Cpath d='M15 110V52Q15 18 40 14Q65 18 65 52V110' fill='none' stroke='%23ffffff' stroke-opacity='.045' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x left bottom / 80px 110px;
    pointer-events: none;
}

.panel-main { padding: 40px 38px; }
.panel-side {
    padding: 40px 34px;
    border-inline-start: 1px solid var(--on-dark-rule);
    background: rgba(0, 0, 0, .16);
}

@media (max-width: 880px) {
    .panel { grid-template-columns: minmax(0, 1fr); }
    .panel-side { border-inline-start: 0; border-block-start: 1px solid var(--on-dark-rule); }
    .panel-main, .panel-side { padding: 30px 24px; }
}

.panel h2 {
    font-family: var(--display);
    font-size: clamp(1.35rem, 3vw, 1.8rem);
    font-weight: 600;
    line-height: 1.34;
    margin: 0 0 16px;
    color: #fff;
    text-wrap: balance;
}

.panel p { margin: 0 0 14px; color: var(--on-dark); }
.panel p:last-child { margin-bottom: 0; }
.panel .muted { color: var(--on-dark-soft); font-size: 0.93rem; }

.panel-side h3 {
    font-family: var(--display);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 16px;
}

/* Figures inside the panel — the countable facts. */
.figures { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--on-dark-rule); border: 1px solid var(--on-dark-rule); border-radius: 12px; overflow: hidden; }
.figure { background: rgba(0, 0, 0, .22); padding: 16px 16px 14px; }
.figure b {
    display: block;
    font-family: var(--display);
    font-size: 1.45rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.figure span { font-size: 0.78rem; color: var(--on-dark-soft); }

/* ===========================================================================
   Tables
   =========================================================================== */

.scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--paper);
    font-size: 0.94rem;
    border: 1px solid var(--rule);
    border-radius: 12px;
    overflow: hidden;
    min-width: 21rem;
    box-shadow: var(--lift-1);
}
th, td { text-align: start; padding: 14px 17px; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th {
    background: var(--petrol-1);
    font-family: var(--display);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--on-dark);
}
tbody tr:nth-child(even) td { background: var(--ground); background: color-mix(in srgb, var(--ground) 60%, transparent); }
tbody tr:last-child td { border-bottom: none; }
/* A cell holding words that should not wrap — the monospace face has no real
   Arabic and spaces its letters apart, so this is not td.num. */
td.tight { white-space: nowrap; font-weight: 600; }

/* ===========================================================================
   Questions
   =========================================================================== */

.faq { border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; background: var(--paper); box-shadow: var(--lift-1); }
.alt .faq { background: var(--ground); }
.alt .faq summary:hover { background: var(--paper); }

.faq details { position: relative; border-block-end: 1px solid var(--rule); }
.faq details:last-child { border-block-end: 0; }

/* The rail marking the open row. Inline-start, so it is on the right in
   Arabic and the left in English without a second rule. */
.faq details::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: var(--gold);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .22s ease;
}
.faq details[open]::before { transform: scaleY(1); }

.faq summary {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--display);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
    cursor: pointer;
    padding: 18px 24px;
    list-style: none;
    transition: background-color .15s ease, color .15s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--brand-light); background: color-mix(in srgb, var(--brand-light) 55%, transparent); }
.faq details[open] summary { color: var(--brand-deep); border-block-end: 1px solid var(--rule); }

.faq summary::after {
    content: "";
    flex: none;
    width: 9px; height: 9px;
    margin-inline-start: auto;
    margin-block-start: -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    border-radius: 1px;
    color: var(--ink-faint);
    transform: rotate(45deg);
    transition: transform .22s ease, color .15s ease;
}
.faq summary:hover::after { color: var(--gold-deep); }
.faq details[open] summary::after { color: var(--gold-deep); transform: rotate(225deg); margin-block-start: 3px; }

.faq details p { margin: 0; padding: 18px 24px 22px; color: var(--ink-soft); font-size: 0.95rem; line-height: 1.85; max-width: 72ch; }

@supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .faq details::details-content { block-size: 0; overflow: hidden; transition: block-size .26s ease, content-visibility .26s allow-discrete; }
    .faq details[open]::details-content { block-size: auto; }
}

/* ===========================================================================
   Closing call to action
   =========================================================================== */

.cta {
    background: linear-gradient(170deg, var(--paper), var(--ground));
    border: 1px solid var(--rule-strong);
    border-radius: 18px;
    padding: 48px 36px;
    text-align: center;
    box-shadow: var(--lift-2);
}
.cta h2 { margin-top: 0; }
.cta p { color: var(--ink-soft); max-width: 54ch; margin: 0 auto 24px; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* ===========================================================================
   Footer — petrol again, so the page is bookended
   =========================================================================== */

.site-footer {
    background: linear-gradient(135deg, var(--petrol-1), var(--petrol-2));
    border-top: 3px solid var(--gold);
    padding-block: 34px;
    margin-top: 0;
    font-size: 0.9rem;
    color: var(--on-dark-soft);
}
.site-footer .wrap { display: flex; gap: 14px 28px; flex-wrap: wrap; align-items: center; }
.site-footer nav { display: flex; gap: 20px; flex-wrap: wrap; margin-inline-start: auto; }
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ===========================================================================
   Narrow screens
   =========================================================================== */

@media (max-width: 680px) {
    /* Nothing is hidden — a visitor on a phone gets the same menu — it is set
       tighter so the header takes two rows rather than three. */
    .site-header .wrap { padding-block: 11px; gap: 10px; }
    .site-nav > a { font-size: 0.86rem; padding: 6px 9px; }
    .lang-toggle { margin-inline-start: 2px; font-size: 0.78rem; }
    .lang-toggle > * { padding: 6px 11px; }

    .hero { padding-block: 44px 58px; }
    section { padding-block: 58px; }
    .brand small { display: none; }

    .panel { border-radius: 14px; }
    .cta { padding: 34px 22px; }
    .figures { grid-template-columns: 1fr; }

    .faq summary { padding: 16px 18px; font-size: 0.95rem; }
    /* Room for the WhatsApp button, which would otherwise sit on the last link. */
    .site-footer { padding-block-end: 96px; }
    .faq details p { padding: 16px 18px 20px; }
    .entry { padding: 22px 20px; }
}

/* ---------- WhatsApp ---------- */

.wa-button {
    position: fixed;
    inset-block-end: calc(22px + env(safe-area-inset-bottom, 0px));
    inset-inline-end: 22px;
    z-index: 40;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(180deg, #37c24a, #1da038);
    color: #fff;
    box-shadow: var(--bevel), var(--lift-3);
    transition: transform .15s ease, box-shadow .18s ease;
}

.wa-button:hover { transform: translateY(-2px); box-shadow: var(--bevel), 0 20px 46px -14px rgba(11, 26, 26, .45); }
.wa-button:active { transform: translateY(0); }

@media (max-width: 680px) {
    .wa-button { width: 50px; height: 50px; inset-inline-end: 16px; }
}