/* saferockit.ma design system, shared by the French, English, Spanish and Arabic pages.
   Right to left adjustments live in /assets/site-rtl.css, loaded after this file on the Arabic page.

   Same family as saferockit.com (logo mark, wordmark, component quality), its own look:
   a light warm page, Fraunces headings over Manrope body text, thin ruled surfaces instead of floating cards,
   and one motif, a network of linked devices (round nodes and device tiles held together, one intruder kept out at the shield),
   used in three places only on the homepage: the hero arch, the hosted MDM band and the method steps,
   plus the privacy page header.

   TOKEN CONTRACT. Every colour in this file comes from a token in the palette section (Cèdre de l'Atlas),
   set once on :root.
   Alpha is only ever applied to the *-rgb triplet tokens, which must stay in sync with their hex values. */

/* ============================================================
   Palette
   ============================================================ */
/* Cèdre de l'Atlas: a deep cedar green that sits in tune with the logo teal,
   on warm sand grounds. */
:root {
    /* Light grounds and surfaces */
    --bg: #FAF6EF;             /* page ground: angles, livrables, FAQ, legal pages */
    --bg-alt: #F2EADD;         /* alternate band ground: services, regions, formules, contact */
    --hero-bg: #F1E5D3;        /* hero ground, also the fiche offset frame fill */
    --surface: #FFFCF7;        /* cards, form card, fiche, regions card, menus, notice */
    --surface-tint: #F3EADC;   /* flat tinted tiles: deliverables, "what we prepare" panels, table heads */
    --arch-fill: #FAF4EA;      /* inside of the hero arch */
    --line: #E3D8C6;           /* hairline rules inside surfaces (decorative) */
    --line-strong: #C9B89E;    /* ruled grids, card borders, tab rail, icon frames (decorative) */
    --field-bg: #FFFDF9;       /* form inputs and topic chips */
    --field-border: #8A7C69;   /* input and chip boundaries (3:1 UI contrast) */

    /* Text on light */
    --text: #15241F;           /* headings and primary text; also the dark button fill */
    --text-2: #33403B;         /* body copy */
    --text-3: #55605B;         /* secondary and muted copy, placeholders */

    /* Accent */
    --accent: #1F4A3D;         /* accent fill: primary buttons, selected tab rule, bullets, lit steps */
    --accent-hover: #173A30;   /* primary button hover fill */
    --accent-text: #1F4A3D;    /* accent coloured text and icons on light grounds */
    --accent-tint: #E0ECE6;    /* pale accent surface: featured plan, and the hero arch panel (decorative) */
    --on-accent: #FFFFFF;      /* text on --accent and --accent-hover */

    /* Status */
    --success: #1C6A5E;        /* status chips and check icons */
    --success-tint: #E0EEE7;   /* status chip ground */
    --warn: #86651C;           /* "new offer" marker on light */
    --warn-band: #E3C07A;      /* "new offer" marker on the dark band */
    --danger: #A6143F;         /* error notice rule, and the one intruder in the hero arch (decorative) */

    /* Dark band (hosted MDM section) and footer */
    --band: #13291F;           /* dark band ground (hosted MDM) */
    --band-2: #1B3629;         /* raised surface on the band: MDM block, unselected tabs */
    --band-line: #355446;      /* rules and tab separators on the band and in the footer (decorative) */
    --on-band-1: #F3F0E8;      /* primary text on the band and footer */
    --on-band-2: #D3D8CF;      /* secondary text on the band, footer links */
    --on-band-3: #AAB4A9;      /* muted text on the band, footer text */
    --accent-band: #A8CDB8;    /* accent on the band: eyebrow, selected tab, button, link hover */
    --on-accent-band: #13291F; /* text on --accent-band */
    --footer-bg: #0C1C15;      /* footer ground */

    /* Motif line work */
    --motif-strong: #B9A184;   /* arch outlines and the privacy page network mark (decorative) */
    --motif-band: #26402F;     /* faint linked nodes on the dark band (decorative) */

    /* Logo (mark and wordmark) */
    --logo: #1F6E74;           /* shield and "SafeRock" on light */
    --logo-peak: #0F4E54;      /* peak inside the shield on light */
    --logo-band: #74BCC2;      /* shield and "SafeRock" in the footer */
    --logo-peak-band: #B3DEE2; /* peak in the footer */

    /* Focus */
    --focus: #1F4A3D;          /* focus ring on light grounds */
    --focus-band: #A8CDB8;     /* focus ring on the band and footer */

    /* Channels for alpha use, kept in sync with the hex values above */
    --bg-rgb: 250, 246, 239;   /* = --bg, translucent header */
    --text-rgb: 21, 36, 31;    /* = --text, soft shadows */
    --accent-rgb: 31, 74, 61;  /* = --accent, input focus halo */
}

/* ============================================================
   Non colour tokens
   ============================================================ */
:root {
    --font-head: 'Fraunces', Georgia, 'Times New Roman', serif;
    --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-brand: 'Montserrat', 'Manrope', sans-serif;
    --radius: 4px;
    --radius-sm: 2px;
    --ease: cubic-bezier(.2, .8, .2, 1);
}

/* Lets the step rings fade their fill instead of snapping (ignored where unsupported) */
@property --k-fill { syntax: '<color>'; inherits: true; initial-value: transparent; }

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--bg);
    line-height: 1.65;
    font-size: 1rem;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; font-optical-sizing: auto; line-height: 1.15; letter-spacing: -0.01em; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding-inline: 24px; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--accent); color: var(--on-accent); padding: 8px 14px; border-radius: var(--radius-sm); z-index: 200; font-weight: 700; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-sm); }
.js .tp-h { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

/* ============================================================
   Buttons and links
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.9rem 1.45rem; border-radius: var(--radius-sm); border: 1px solid transparent;
    font-weight: 700; font-size: 0.98rem; line-height: 1.3; text-decoration: none; cursor: pointer;
    font-family: inherit;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
/* Secondary action (the two plans beside the featured one): ruled, so only the featured plan carries a filled accent button in every theme */
.btn-dark { background: transparent; color: var(--text); border-color: var(--text); }
.btn-dark:hover { background: var(--text); color: var(--surface); }
.link-arrow {
    display: inline-flex; align-items: center; gap: 8px; padding: 0.9rem 0;
    font-weight: 700; color: var(--accent-text);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: var(--line-strong);
    transition: text-decoration-color .2s ease;
}
.link-arrow svg { width: 18px; height: 18px; flex: none; transition: transform .25s var(--ease); }
.link-arrow:hover { text-decoration-color: currentColor; }
.link-arrow:hover svg { transform: translateX(4px); }

/* ============================================================
   Header
   ============================================================ */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background-color .3s ease, box-shadow .3s ease; }
.site-header.scrolled { background: rgba(var(--bg-rgb), 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--line-strong); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text); font-family: var(--font-brand); font-weight: 800; font-size: 1.35rem; white-space: nowrap; }
.brand svg { width: 34px; height: 34px; }
.brand b { color: var(--logo); font-weight: 800; }
.nav-links { display: flex; align-items: center; gap: 0.2rem; list-style: none; }
.nav-links a { color: var(--text-2); text-decoration: none; font-weight: 600; font-size: 0.95rem; padding: 0.5rem 0.8rem; border-radius: var(--radius-sm); transition: color .2s, box-shadow .2s; white-space: nowrap; }
@media (min-width: 1081px) and (max-width: 1240px) { .nav-links { gap: 0.1rem; } .nav-links a { font-size: 0.88rem; padding: 0.45rem 0.6rem; } .lang summary { padding: 0.45rem 0.6rem; } .nav-cta { padding: 0.55rem 0.9rem !important; } }
.nav-links a:hover, .nav-links a.active { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.nav-cta { margin-inline-start: 0.5rem; padding: 0.6rem 1.1rem !important; font-size: 0.92rem !important; }
.nav-links .nav-cta { color: var(--on-accent); background: var(--accent); }
.nav-links .nav-cta:hover { color: var(--on-accent); background: var(--accent-hover); box-shadow: none; }

.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; color: var(--text-2); font-weight: 600; font-size: 0.92rem; padding: 0.5rem 0.8rem; border-radius: var(--radius-sm); display: flex; gap: 0.35rem; align-items: center; transition: color .2s, box-shadow .2s; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.lang summary svg { width: 16px; height: 16px; }
.lang ul { position: absolute; right: 0; top: calc(100% + 8px); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 16px 32px -20px rgba(var(--text-rgb), 0.45); list-style: none; padding: 6px; min-width: 160px; }
.lang ul a { display: block; color: var(--text) !important; padding: 0.5rem 0.8rem; border-radius: var(--radius-sm); }
.lang ul a:hover { background: var(--bg-alt) !important; box-shadow: none; }
.lang ul a[aria-current="page"], .lang ul a[aria-current="page"]:hover { font-weight: 800; box-shadow: inset 3px 0 0 var(--accent); }

.menu-toggle { display: none; background: none; border: 1px solid var(--line-strong); color: var(--text); width: 44px; height: 44px; border-radius: var(--radius-sm); cursor: pointer; }
.menu-toggle svg { width: 24px; height: 24px; margin: auto; }

/* ============================================================
   Hero
   ============================================================ */
.hero { position: relative; overflow: hidden; background: var(--hero-bg); color: var(--text); padding: 150px 0 110px; }
.hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 64px; align-items: center; }
.hero-inner > * { min-width: 0; }

.eyebrow {
    display: inline-flex; align-items: center; gap: 0.6rem;
    padding: 0.42rem 0.8rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface);
    color: var(--accent-text); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
}
/* The live marker is a small diamond that breathes, not a glowing ring */
.pulse { width: 8px; height: 8px; flex: none; background: var(--accent); transform: rotate(45deg); animation: breathe 2.6s ease-in-out infinite; }
.pulse.warn { background: var(--warn); }
@keyframes breathe { 0%, 100% { opacity: 1; transform: rotate(45deg) scale(1); } 50% { opacity: .5; transform: rotate(45deg) scale(.72); } }

.hero h1 { font-size: clamp(2.2rem, 4.1vw, 3.3rem); line-height: 1.08; letter-spacing: -0.015em; margin: 1.4rem 0 1.3rem; }
.hero h1 .hl { display: block; color: var(--accent-text); }
.hero-lead { font-size: 1.1rem; color: var(--text-2); max-width: 38rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; margin-top: 2rem; }
.hero-proof { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.6rem; margin-top: 2.3rem; color: var(--text-2); font-size: 0.92rem; }
.hero-proof li { display: flex; gap: 0.55rem; align-items: flex-start; padding: 0.7rem 0; border-top: 1px solid var(--line-strong); }
.hero-proof svg { width: 18px; height: 18px; color: var(--success); flex: none; margin-top: 2px; }
.hero-proof a { color: var(--accent-text); font-weight: 700; text-decoration: none; display: inline-flex; gap: 0.5rem; align-items: flex-start; }
.hero-proof a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero-proof a .pulse { margin: 7px 5px 0; }

/* Hero visual: one horseshoe arch (the signature detail, used only here) framing a calm tinted panel and a network
   of linked nodes, four of them device tiles. One intruder waits in the dome: its dashed probe reaches for the network
   and stops at the shield's guard arc. The device card is set in front of it. */
.hero-visual { position: relative; display: flex; align-items: flex-end; align-self: stretch; min-height: 690px; }
.arch {
    position: absolute; top: -30px; inset-inline-end: 0; width: 86%; height: calc(100% + 30px + 110px);
    pointer-events: none; stroke-width: 1.3; color: var(--motif-strong);
}
/* The panel: a flat, calm cedar tint that fades into the arch's cream toward the bottom, under the card */
.arch-panel { fill: url(#arch-panel-fade); }
.arch-net { fill: none; stroke: var(--accent); stroke-opacity: .32; stroke-linecap: round; }
.arch-nodes circle { fill: var(--accent); stroke: var(--surface); stroke-width: 2.4; }
.arch-nodes .tile rect { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.1; }
.arch-nodes .tile use { color: var(--accent); }
/* The intruder: the only red on the graphic, a ringed token holding a hooded figure with an empty, shadowed face,
   and a dashed probe that reaches for the network and stops at the guard arc */
.threat-token { fill: var(--surface); stroke: var(--danger); stroke-width: 1.6; }
.threat use { color: var(--danger); }
.threat-pulse { fill: none; stroke: var(--danger); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
/* A still alert ring round the token, so a paused frame or reduced motion still reads as a warning */
.threat-halo { fill: none; stroke: var(--danger); stroke-width: 1.2; opacity: .25; }
.threat-probe { fill: none; stroke: var(--danger); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 3.4 4.2; }
/* The guard: a calm cedar halo round the shield tile, firmer where the probe arrives */
.guard { fill: none; stroke: var(--accent); stroke-linecap: round; }
.guard circle { stroke-width: 1; stroke-opacity: .21; }
.guard path { stroke-width: 3.1; }
.js .arch-ground, .js .arch-panel { opacity: 0; transition: opacity 1.1s ease; }
.js .arch-lines, .js .arch-net path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2s cubic-bezier(.45, 0, .2, 1) .25s; }
.js .arch-net path { transition-duration: 1.2s; transition-delay: 1.3s; }
.js .arch-nodes { opacity: 0; transition: opacity .9s ease 1s; }
.js .threat, .js .guard { opacity: 0; transition: opacity .7s ease 1.8s; }
/* Once the network has drawn, the probe fades in (a plain opacity fade, which every browser animates), then its tip lands
   as the guard arc firms up */
.js .threat-probe { opacity: 0; transition: opacity .8s ease 2.3s; }
.js .guard { transition-duration: .6s; transition-delay: 2.6s; }
.js .arch.reveal { opacity: 1; transform: none; }
.arch.in .arch-ground, .arch.in .arch-panel, .arch.in .arch-nodes, .arch.in .threat, .arch.in .guard { opacity: 1; }
.arch.in .arch-lines, .arch.in .arch-net path { stroke-dashoffset: 0; }
/* Calm loops once drawn: the probe's dashes drift toward the network, a soft ring breathes out of the token */
.arch.in .threat-probe { opacity: 1; animation: probeFlow 3.2s linear infinite; }
.arch.in .threat-pulse { animation: threatPulse 4s ease-out 3.3s infinite; }
@keyframes probeFlow { to { stroke-dashoffset: -15.2; } }
@keyframes threatPulse { 0% { opacity: 0; transform: scale(1.2); } 12% { opacity: .55; } 70%, 100% { opacity: 0; transform: scale(1.4); } }

.fiche {
    position: relative; z-index: 1; width: 100%; max-width: 420px; margin-bottom: 4px;
    background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
    padding: 18px 22px 8px;
    box-shadow: 12px 12px 0 -1px var(--hero-bg), 12px 12px 0 0 var(--line-strong);
}
.fiche-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line-strong); }
.dots { display: flex; gap: 8px; padding-inline-start: 2px; }
.dots i { width: 7px; height: 7px; background: var(--line-strong); transform: rotate(45deg); }
.dots i:first-child { background: var(--accent); }
.fiche-label { font-size: 0.74rem; color: var(--text-3); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; text-align: end; }
.dev-rows { list-style: none; display: grid; }
.dev-rows li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.dev-rows li:last-child { border-bottom: 0; }
.dev-ic { width: 36px; height: 36px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--text-2); flex: none; }
.dev-ic svg { width: 19px; height: 19px; }
.dev-name { flex: 1; min-width: 0; font-weight: 700; color: var(--text); }
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; line-height: 1.3; padding: 0.3rem 0.6rem; border-radius: var(--radius-sm); background: var(--success-tint); color: var(--success); white-space: nowrap; }
.st svg { width: 14px; height: 14px; flex: none; }
/* The rows check in one after another */
.js .dev-rows li { animation: rowIn .7s var(--ease) both; }
.js .dev-rows li:nth-child(1) { animation-delay: .55s; }
.js .dev-rows li:nth-child(2) { animation-delay: .7s; }
.js .dev-rows li:nth-child(3) { animation-delay: .85s; }
.js .dev-rows li:nth-child(4) { animation-delay: 1s; }
@keyframes rowIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============================================================
   Sections and section heads
   ============================================================ */
section { padding: 112px 0; position: relative; }
.bg-paper { background: var(--bg-alt); }
/* Editorial heads: kicker and title on the start side, the lead on the end side */
.section-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 72px; align-items: end; margin: 0 0 56px; }
.section-head > * { grid-column: 1; justify-self: start; }
.section-head > :first-child { grid-row: 1; }
.section-head > h2 { grid-row: 2; }
.section-head > p { grid-column: 2; grid-row: 1 / 3; align-self: end; color: var(--text-3); font-size: 1.08rem; }
.section-head h2 { font-size: clamp(2rem, 3.5vw, 2.8rem); line-height: 1.1; letter-spacing: -0.015em; }
.kicker { display: inline-flex; align-items: center; gap: 0.75rem; font-weight: 800; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 1rem; }
.kicker::before { content: ""; width: 28px; height: 1px; background: currentColor; transform-origin: left; transition: transform .9s var(--ease) .25s; }
.js .reveal:not(.in) .kicker::before { transform: scaleX(0); }

/* Dark band (used once, for the hosted MDM offer) */
.dark { background: var(--band); color: var(--on-band-1); overflow: hidden; isolation: isolate; }
.dark .kicker { color: var(--accent-band); }
.dark .section-head p { color: var(--on-band-2); }
.dark .eyebrow { background: transparent; border-color: var(--band-line); color: var(--accent-band); }
.dark .pulse.warn { background: var(--warn-band); }
.dark :focus-visible { outline-color: var(--focus-band); }
.dark .btn-primary { background: var(--accent-band); color: var(--on-accent-band); }
.dark .btn-primary:hover { background: var(--on-band-1); color: var(--band); }
/* Rosette: a faint network of a few linked nodes, drawn when the band comes into view.
   Anchored to the band's bottom end corner, so its lines rise behind the MDM block and never cross the heading or the lead. */
.rosette { position: absolute; z-index: -1; bottom: -170px; inset-inline-end: -150px; width: 640px; height: 640px; pointer-events: none; color: var(--motif-band); }
.rosette path { fill: none; stroke: currentColor; }
.rosette .r-net { stroke-width: .32; }
.rosette .r-nodes { fill: currentColor; }
.js .rosette.reveal { opacity: 1; transform: none; }
.js .rosette path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s cubic-bezier(.45, 0, .2, 1); }
.js .rosette .r-net path { transition-duration: 1.6s; transition-delay: .6s; }
.js .rosette .r-nodes { opacity: 0; transition: opacity 1s ease 1.2s; }
.rosette.in path { stroke-dashoffset: 0; }
.rosette.in .r-nodes { opacity: 1; }

/* ============================================================
   Reveal (gentle, staggered)
   ============================================================ */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .1s; } .reveal.d2 { transition-delay: .2s; }

/* ============================================================
   Tabs: the MDM location switcher (dark, segmented) and the regions container (light, underlined)
   ============================================================ */
.tabs { display: flex; gap: 1px; border: 1px solid var(--band-line); border-radius: var(--radius-sm); background: var(--band-line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
html:not(.js) .tabs { display: none; }
.tab { flex: 1 0 auto; border: 0; background: var(--band-2); color: var(--on-band-2); font: inherit; font-weight: 700; font-size: 0.86rem; line-height: 1.5; padding: 0.72rem 1rem; cursor: pointer; white-space: nowrap; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
.tab:hover { color: var(--on-band-1); box-shadow: inset 0 -2px 0 var(--accent-band); }
.tab[aria-selected="true"], .tab[aria-selected="true"]:hover { background: var(--accent-band); color: var(--on-accent-band); box-shadow: none; }
.tab:focus-visible { outline: 2px solid var(--focus-band); outline-offset: -2px; box-shadow: inset 0 0 0 4px var(--band); border-radius: 0; }

.tabs-light { background: transparent; border: 0; border-radius: 0; gap: 0; box-shadow: inset 0 -1px 0 var(--line-strong); }
.tabs-light .tab { flex: 0 0 auto; background: transparent; color: var(--text-3); font-size: 0.95rem; padding: 0.8rem 1.15rem 0.75rem; border-bottom: 2px solid transparent; }
.tabs-light .tab:hover { color: var(--text); box-shadow: none; border-bottom-color: var(--line-strong); }
.tabs-light .tab[aria-selected="true"], .tabs-light .tab[aria-selected="true"]:hover { background: transparent; color: var(--text); border-bottom-color: var(--accent); }
.tabs-light .tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; box-shadow: none; }

/* With JavaScript, panels share one grid cell: the container keeps the height of the tallest panel, so switching tabs does not move the page. */
.js .tp-stack { display: grid; }
.js .tp-stack > .tpanel { grid-area: 1 / 1; }
.js .tpanel:not(.is-active) { visibility: hidden; }
.tpanel { transition: opacity .3s ease; }
.tpanel.enter { opacity: 0; transition: none; }
html:not(.js) .tpanel + .tpanel { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line-strong); }
html:not(.js) .zone-panel + .zone-panel { border-top-color: var(--band-line); }
.tp-h { font-size: 1.2rem; margin-bottom: 0.6rem; }

/* ============================================================
   Ruled card grid (blind spots and services)
   ============================================================ */
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.svc { position: relative; padding: 34px 30px 32px; border-bottom: 1px solid var(--line-strong); transition: background-color .3s ease; }
.grid3 > .svc:nth-child(3n+2), .grid3 > .svc:nth-child(3n+3) { border-inline-start: 1px solid var(--line-strong); }
.svc::after { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); pointer-events: none; }
.svc:hover { background: var(--surface); }
.svc:hover::after { transform: scaleX(1); }
.svc-icon { width: 46px; height: 46px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); display: grid; place-items: center; color: var(--accent-text); margin-bottom: 22px; }
.svc-icon svg { width: 22px; height: 22px; }
.svc h3 { font-size: 1.22rem; line-height: 1.25; margin-bottom: 0.6rem; }
.svc p { color: var(--text-3); font-size: 0.95rem; }
.svc .act { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--text-2); font-weight: 600; }
.svc .act svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--accent-text); }

/* ============================================================
   Hosted MDM
   ============================================================ */
.mdm .section-head .eyebrow { margin-bottom: 1.1rem; }
.mdm-block { max-width: 860px; border: 1px solid var(--band-line); border-radius: var(--radius); background: var(--band-2); padding: 28px 32px 26px; }
.mdm-block > .tabs { margin: 0 0 26px; }
.zone-panel { max-width: 720px; }
.zone-panel p { color: var(--on-band-1); font-size: 1.08rem; }
.mdm-note { max-width: 720px; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--band-line); color: var(--on-band-3); font-size: 0.88rem; }
.mdm-cta { display: flex; margin-top: 34px; }

/* ============================================================
   Regions container
   ============================================================ */
.rcard { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 4px 36px 36px; --rp-offset: 87px; }
.rcard > .tabs { margin: 0 -36px 32px; padding-inline: 20px; }
.rpanel { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 40px; align-items: start; align-content: start; }
/* Deep links (#maroc, #ue, #afrique, #ccg) land on the card top, with the tab row in view: the margin equals the panel's offset inside the card. */
.js .rpanel { scroll-margin-top: var(--rp-offset, 87px); }
.rp-intro { font-size: 1.12rem; font-weight: 600; color: var(--text); margin-bottom: 18px; }
.pts { list-style: none; display: grid; gap: 12px; }
.pts li { position: relative; padding-inline-start: 22px; color: var(--text-2); font-size: 0.95rem; line-height: 1.6; }
.pts li::before { content: ""; position: absolute; inset-inline-start: 1px; top: 0.62em; width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); }
.pts b { color: var(--text); }
.prep { background: var(--surface-tint); border-top: 2px solid var(--accent); border-radius: 0 0 var(--radius) var(--radius); padding: 20px 22px; }
.prep-label { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 8px; }
.prep-label svg { width: 18px; height: 18px; flex: none; }
.prep p { color: var(--text-2); font-size: 0.95rem; }
.cnote { margin-top: 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0 18px; background: var(--surface); }
.cnote summary { cursor: pointer; list-style: none; padding: 14px 0; font-weight: 700; font-size: 0.9rem; color: var(--text-2); display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.cnote summary::-webkit-details-marker { display: none; }
.cnote summary svg { width: 18px; height: 18px; flex: none; color: var(--accent-text); transition: transform .3s var(--ease); }
.cnote[open] summary svg { transform: rotate(45deg); }
.cnote p { padding-bottom: 16px; color: var(--text-3); font-size: 0.88rem; line-height: 1.6; }
.stds { margin-top: 56px; }
.stds > h3 { font-size: 1.35rem; margin-bottom: 18px; }
.std-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.std { padding: 22px 28px 6px; }
.std:first-child { padding-inline-start: 0; }
.std + .std { border-inline-start: 1px solid var(--line-strong); }
.std h4 { font-size: 1.15rem; margin-bottom: 6px; }
.std p { color: var(--text-3); font-size: 0.92rem; }
.asof { color: var(--text-3); font-size: 0.86rem; margin-top: 28px; }

/* ============================================================
   Deliverables
   ============================================================ */
.deliv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dtile { display: flex; gap: 18px; align-items: flex-start; background: var(--surface-tint); border-radius: var(--radius); padding: 24px 26px; }
.dtile .svc-icon { width: 44px; height: 44px; margin: 0; flex: none; }
.dtile h3 { font-size: 1.12rem; margin-bottom: 4px; }
.dtile p { color: var(--text-3); font-size: 0.94rem; }

/* ============================================================
   Plans and method
   ============================================================ */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 30px 28px; background: var(--surface); border: 1px solid var(--line-strong); border-top: 3px solid var(--text); border-radius: var(--radius-sm); }
.plan:nth-child(2) { background: var(--accent-tint); border-top-color: var(--accent); }
.plan .level { font-size: 0.76rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--accent-text); }
.plan h3 { font-size: 1.6rem; margin: 0.4rem 0 0.6rem; }
.plan > p { color: var(--text-3); margin-bottom: 1.6rem; flex: 1; }
.plan .btn { justify-content: center; }
.plans-note { color: var(--text-3); margin-top: 24px; font-size: 0.95rem; }

.method-h { text-align: center; font-size: 1.45rem; margin: 84px 0 36px; }
.timeline { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.timeline::before { content: ""; position: absolute; top: 32px; left: 12.5%; right: 12.5%; height: 1px; background: var(--line-strong); }
.timeline .progress { position: absolute; top: 31px; left: 12.5%; height: 3px; width: 0; max-width: 75%; background: var(--accent); transition: width 1.8s var(--ease); }
.step { position: relative; text-align: center; padding: 0 6px; }
.step .num { position: relative; z-index: 1; width: 64px; height: 64px; margin: 0 auto 18px; display: grid; place-items: center; font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; color: var(--text-3); transition: color .5s ease .15s; }
/* Each number sits on a network node token (the same round node as in the hero arch) */
.num .k { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; color: var(--line-strong); --k-fill: var(--bg-alt); stroke-width: 2; transition: color .5s ease, --k-fill .5s ease; }
.step.lit .num { color: var(--on-accent); }
.step.lit .num .k { color: var(--accent); --k-fill: var(--accent); }
.step h4 { font-size: 1.12rem; margin-bottom: 0.4rem; }
.step p { font-size: 0.92rem; color: var(--text-3); }

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: 920px; display: grid; border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 0; font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; line-height: 1.35; display: flex; justify-content: space-between; gap: 16px; align-items: center; transition: color .2s ease; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-text); }
.faq summary svg { width: 22px; height: 22px; flex: none; color: var(--accent-text); transition: transform .3s var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { padding-bottom: 22px; color: var(--text-2); max-width: 46rem; }

/* ============================================================
   Contact
   ============================================================ */
/* The Turnstile widget is a fixed 300px wide: on the narrowest phones the band clips it, as before */
.contact { background: var(--bg-alt); color: var(--text); overflow: hidden; }
.contact-grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.contact-grid > * { min-width: 0; }
.contact h2 { font-size: clamp(2rem, 3.5vw, 2.75rem); line-height: 1.1; margin: 1rem 0 1rem; }
.contact-lead { color: var(--text-2); font-size: 1.1rem; margin-bottom: 2rem; }
.contact-list { list-style: none; display: grid; margin-bottom: 2rem; border-top: 1px solid var(--line-strong); }
.contact-list li { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line-strong); }
.contact-list .ico { width: 42px; height: 42px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); display: grid; place-items: center; color: var(--accent-text); flex: none; }
.contact-list svg { width: 20px; height: 20px; }
.contact-list a { color: var(--text); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--line-strong); text-underline-offset: 4px; overflow-wrap: anywhere; }
.contact-list a:hover { color: var(--accent-text); text-decoration-color: currentColor; }
.contact-list small { display: block; color: var(--text-3); font-size: 0.85rem; }
.contact-list strong { color: var(--text); }

.form-card { background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-top: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 34px; }
.form-card h3 { font-size: 1.5rem; margin-bottom: 0.3rem; }
.form-card > p { color: var(--text-3); margin-bottom: 1.4rem; font-size: 0.95rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 700; font-size: 0.85rem; margin-bottom: 6px; color: var(--text); }
.field input, .field textarea {
    width: 100%; padding: 0.8rem 0.95rem; border-radius: var(--radius-sm); border: 1px solid var(--field-border);
    font: inherit; color: var(--text); background: var(--field-bg); transition: border-color .2s, box-shadow .2s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-3); opacity: 1; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus), 0 0 0 5px rgba(var(--accent-rgb), 0.16); }
.field textarea { min-height: 120px; resize: vertical; }
.topics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.topics label { cursor: pointer; }
.topics input { position: absolute; opacity: 0; pointer-events: none; }
.topics span { display: inline-block; padding: 0.45rem 0.85rem; border-radius: var(--radius-sm); border: 1px solid var(--field-border); background: var(--field-bg); color: var(--text-2); font-size: 0.85rem; font-weight: 600; transition: background-color .2s, color .2s, border-color .2s; }
.topics label:hover span { border-color: var(--text); color: var(--text); }
.topics input:checked + span { background: var(--text); color: var(--surface); border-color: var(--text); }
.topics input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { margin: 6px 0 16px; }
.form-card .btn { width: 100%; justify-content: center; }
.booking { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 18px; }
.booking summary { cursor: pointer; font-weight: 700; color: var(--accent-text); list-style: none; display: flex; align-items: center; gap: 8px; }
.booking summary::-webkit-details-marker { display: none; }
.booking summary svg { width: 18px; height: 18px; }
.booking iframe { width: 100%; height: 620px; border: 1px solid var(--line); border-radius: var(--radius); margin-top: 14px; background: var(--bg-alt); }

.notice {
    position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, calc(100% + 60px)); visibility: hidden; z-index: 300;
    display: flex; gap: 12px; align-items: center; max-width: calc(100% - 32px);
    background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-inline-start: 4px solid var(--success); border-radius: var(--radius-sm);
    padding: 14px 18px; box-shadow: 0 20px 40px -22px rgba(var(--text-rgb), 0.5); font-weight: 600;
    transition: transform .5s var(--ease), visibility 0s linear .5s;
}
.notice.show { transform: translate(-50%, 0); visibility: visible; transition: transform .5s var(--ease), visibility 0s; }
.notice.error { border-inline-start-color: var(--danger); }
.notice button { background: none; border: 0; font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--text-3); padding: 0 4px; }

/* ============================================================
   Footer
   ============================================================ */
footer { background: var(--footer-bg); color: var(--on-band-3); padding: 72px 0 28px; --logo: var(--logo-band); --logo-peak: var(--logo-peak-band); }
footer :focus-visible { outline-color: var(--focus-band); }
.foot { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 36px; margin-bottom: 44px; }
.foot h4 { color: var(--on-band-1); font-size: 1.08rem; margin-bottom: 1rem; }
.foot ul { list-style: none; display: grid; gap: 8px; }
.foot a { text-decoration: none; color: var(--on-band-2); transition: color .2s; }
.foot a:hover { color: var(--accent-band); text-decoration: underline; text-underline-offset: 4px; }
.foot a[aria-current="page"] { color: var(--on-band-1); font-weight: 700; }
.foot .brand { margin-bottom: 1rem; color: var(--on-band-1); }
.foot .brand:hover { color: var(--on-band-1); text-decoration: none; }
.foot p { max-width: 30rem; }
.foot .social { display: inline-flex; align-items: center; gap: 8px; }
.foot .social svg { width: 17px; height: 17px; flex: none; }
.foot-bottom { border-top: 1px solid var(--band-line); padding-top: 22px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: 0.88rem; }
.foot-bottom .legal { flex-basis: 100%; font-size: 0.82rem; }

/* ============================================================
   Legal pages (privacy policy), scoped by body.legal-page
   One warm header and title block, a small network mark (a device tile and linked nodes) drawn in line at its end side,
   then a narrow ruled reading column.
   ============================================================ */
.legal-page .container { max-width: 800px; }
.legal-header { background: var(--hero-bg); padding: 22px 0 0; position: relative; z-index: 1; }
.legal-header .brand svg { width: 32px; height: 32px; }
.legal-hero { position: relative; overflow: hidden; isolation: isolate; background: var(--hero-bg); padding: 40px 0 60px; border-bottom: 1px solid var(--line-strong); }
.legal-hero h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); line-height: 1.08; letter-spacing: -0.015em; margin-bottom: 0.9rem; }
.legal-hero p { color: var(--text-2); font-size: 1.08rem; max-width: 36rem; }
/* Wide screens: the whole network mark sits in the gutter beside the reading column (800px wide) */
.legal-star { position: absolute; z-index: -1; top: 50%; inset-inline-start: calc(50% + 400px + 12px); width: 216px; height: 216px; transform: translateY(-50%); color: var(--motif-strong); stroke-width: .9; stroke-linecap: round; pointer-events: none; }
.legal-star path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawLine 1.8s cubic-bezier(.45, 0, .2, 1) .2s both; }
/* Order: the tile, its shield, then the links, then the nodes */
.legal-star path:nth-child(2) { animation-delay: .6s; }
.legal-star path:nth-child(n+3) { animation-duration: 1.2s; animation-delay: .9s; }
.legal-star path:nth-child(n+10) { animation-duration: .9s; animation-delay: 1.5s; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }

.legal-page main { padding: 60px 0 88px; }
.legal-page main h2 { font-size: 1.5rem; line-height: 1.2; margin: 2.6rem 0 0.9rem; padding-top: 2.2rem; border-top: 1px solid var(--line-strong); }
.legal-page main h2:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-page main p, .legal-page main li { color: var(--text-2); margin-bottom: 0.9rem; }
.legal-page main strong { color: var(--text); }
.legal-page main a { color: var(--accent-text); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.legal-page main a:hover { text-decoration-thickness: 2px; }
.legal-page main ul { list-style: none; margin-bottom: 0.9rem; }
.legal-page main li { position: relative; padding-inline-start: 22px; margin-bottom: 0.5rem; }
.legal-page main li::before { content: ""; position: absolute; inset-inline-start: 1px; top: 0.66em; width: 7px; height: 7px; background: var(--accent); transform: rotate(45deg); }
.legal-page table { width: 100%; border-collapse: collapse; margin: 1.2rem 0 1.6rem; font-size: 0.95rem; border-top: 2px solid var(--accent); }
.legal-page th, .legal-page td { text-align: start; padding: 0.75rem 0.85rem; border-bottom: 1px solid var(--line-strong); vertical-align: top; color: var(--text-2); }
.legal-page th { background: var(--surface-tint); color: var(--text); font-weight: 700; }
.legal-page footer { padding: 30px 0; font-size: 0.9rem; }
.legal-page .foot-row { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; }
.legal-page footer a { color: var(--on-band-2); text-decoration: none; transition: color .2s; }
.legal-page footer a:hover { color: var(--accent-band); text-decoration: underline; text-underline-offset: 4px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
    /* The nav that follows holds only the fixed menu, so it takes no width: push the toggle to the end edge */
    .menu-toggle { display: grid; margin-inline-start: auto; }
    .nav-links { position: fixed; inset: 76px 0 auto 0; flex-direction: column; align-items: stretch; background: var(--surface); border-bottom: 1px solid var(--line-strong); box-shadow: 0 24px 40px -28px rgba(var(--text-rgb), 0.45); padding: 12px 24px 24px; gap: 2px; transform: translateY(-120%); opacity: 0; transition: transform .35s ease, opacity .35s ease; pointer-events: none; max-height: calc(100vh - 76px); overflow-y: auto; }
    .nav-links.open { transform: none; opacity: 1; pointer-events: auto; }
    .nav-links a, .lang summary { display: block; padding: 0.8rem 1rem; }
    .lang summary { display: flex; }
    .nav-links a:hover, .nav-links a.active { box-shadow: inset 3px 0 0 var(--accent); }
    .nav-cta { margin: 8px 0 0; text-align: center; }
    .lang ul { position: static; box-shadow: none; margin-top: 6px; }
    .site-header.menu-open { background: var(--surface); box-shadow: 0 1px 0 var(--line-strong); }
}
@media (max-width: 1240px) {
    /* Narrower screens: a smaller mark, whole, in the top end corner of the title block */
    .legal-star { top: 12px; inset-inline-start: auto; inset-inline-end: 16px; width: 128px; height: 128px; transform: none; stroke-width: 1.1; }
}
@media (min-width: 641px) and (max-width: 900px) {
    /* Small tablets: the intro line wraps before the mark, so the two never overlap */
    .legal-hero p { max-width: min(36rem, calc(100% - 128px)); }
}
@media (max-width: 1024px) {
    .hero-inner, .contact-grid { grid-template-columns: 1fr; }
    .hero-inner { gap: 48px; }
    /* Tall and narrow enough that the whole network stays clear above the card instead of peeking out behind it */
    .hero-visual { min-height: 650px; max-width: 560px; width: 100%; margin: 0 auto; }
    .arch { width: 66%; }
    .fiche { max-width: 440px; }
    .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid3 > .svc:nth-child(n) { border-inline-start: 0; }
    .grid3 > .svc:nth-child(even) { border-inline-start: 1px solid var(--line-strong); }
    .plans { grid-template-columns: 1fr; max-width: 560px; gap: 20px; }
    .timeline { grid-template-columns: 1fr; gap: 26px; max-width: 520px; margin: 0 auto; }
    .timeline::before, .timeline .progress { display: none; }
    .step { display: grid; grid-template-columns: 64px 1fr; gap: 18px; text-align: start; align-items: start; }
    .step .num { margin: 0; }
    .rosette { width: 520px; height: 520px; inset-inline-end: -200px; }
    .foot { grid-template-columns: 1fr 1fr; }
    .foot > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .section-head { grid-template-columns: minmax(0, 1fr); }
    .section-head > p { grid-column: 1; grid-row: 3; margin-top: 1rem; }
    .rpanel { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .std-grid { grid-template-columns: minmax(0, 1fr); }
    .std, .std:first-child { padding: 20px 0 16px; }
    .std + .std { border-inline-start: 0; border-top: 1px solid var(--line-strong); }
}
@media (max-width: 760px) {
    .tabs-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tabs-wrap .tab { white-space: normal; text-align: center; }
}
@media (max-width: 640px) {
    section { padding: 80px 0; }
    .hero { padding: 116px 0 76px; }
    /* Phones: a taller stage so the network clears the card, and an arch sized from its height
       (never cropped at the sides), so the horseshoe keeps its full outline at every width */
    .arch { height: calc(100% + 30px + 76px); width: auto; max-width: 100%; aspect-ratio: 400 / 900; }
    .hero-visual { min-height: min(610px, calc(225vw - 180px)); }
    .container { padding-inline: 16px; }
    .hero-proof { grid-template-columns: 1fr; }
    .eyebrow { font-size: 0.7rem; letter-spacing: 0.04em; padding: 0.4rem 0.7rem; text-align: start; }
    .fiche { padding: 14px 16px 6px; box-shadow: 8px 8px 0 -1px var(--hero-bg), 8px 8px 0 0 var(--line-strong); max-width: calc(100% - 8px); }
    .dev-rows li { padding: 12px 0; gap: 10px; }
    .grid3, .deliv { grid-template-columns: minmax(0, 1fr); }
    .grid3 > .svc:nth-child(n) { border-inline-start: 0; }
    .svc { padding: 26px 0 24px; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: center; }
    .svc:hover { background: transparent; }
    .svc-icon { width: 44px; height: 44px; margin: 0; }
    .svc h3 { margin: 0; }
    .svc > p { grid-column: 1 / -1; }
    .svc > p:not(.act) { margin-top: 14px; }
    .dtile { padding: 20px; }
    .mdm-block { padding: 16px; }
    .mdm-block > .tabs { margin-bottom: 20px; }
    .tab { font-size: 0.8rem; padding: 0.6rem 0.6rem; }
    .rosette { width: 420px; height: 420px; bottom: -150px; inset-inline-end: -210px; }
    .rcard { padding: 2px 16px 22px; --rp-offset: 68px; }
    .rcard > .tabs { margin: 0 -16px 20px; padding-inline: 4px; }
    .tabs-light .tab { flex: 1 0 auto; font-size: 0.88rem; padding: 0.7rem 0.6rem 0.65rem; }
    .prep { padding: 18px; }
    .plan { padding: 26px 22px; }
    .form-row { grid-template-columns: 1fr; row-gap: 0; }
    .form-card { padding: 24px 20px; }
    .foot { grid-template-columns: 1fr; }
    /* Legal pages: tighter spacing, and the table tightens to fit */
    .legal-header { padding-top: 16px; }
    .legal-hero { padding: 86px 0 44px; }
    .legal-star { top: 10px; inset-inline-end: 16px; width: 72px; height: 72px; stroke-width: 1.6; }
    .legal-page main { padding: 40px 0 56px; }
    .legal-page main h2 { font-size: 1.3rem; }
    .legal-page table { font-size: 0.85rem; }
    .legal-page th, .legal-page td { padding: 0.55rem 0.4rem; }
}
/* Very narrow phones: the table scrolls on its own instead of widening the page */
@media (max-width: 359px) {
    .legal-page table { display: block; overflow-x: auto; }
}
@media (max-width: 380px) {
    .dev-ic { width: 30px; height: 30px; }
    .st { font-size: 0.72rem; padding: 0.25rem 0.5rem; gap: 4px; }
}
@media (max-width: 360px) {
    .form-card { padding-inline: 12px; }
}
@media (max-width: 350px) {
    .dev-ic { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
    .reveal, .js .reveal { opacity: 1; transform: none; }
    .js .arch-ground, .js .arch-panel, .js .arch-nodes, .js .threat, .js .guard, .js .rosette .r-nodes { opacity: 1; }
    .js .threat-probe { opacity: 1; }
    .js .arch-lines, .js .arch-net path, .js .rosette path { stroke-dashoffset: 0; }
    /* The intruder holds still: no dash drift and no breathing ring, the still alert ring carries the warning */
    .threat-probe, .arch.in .threat-probe { animation: none; stroke-dashoffset: 0; }
    .threat-pulse, .arch.in .threat-pulse { animation: none; opacity: 0; }
    .js .reveal:not(.in) .kicker::before { transform: none; }
    .legal-star path { animation: none; stroke-dashoffset: 0; }
}