/* ==========================================================================
   SideQuest Services — Site Design System
   Refined dark. Written 2026. Replaces the marketing styles that used to
   live in style.css (style.css is left alone because the /css portal
   pages also link to it).
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
    /* Surfaces */
    --ink:            #05070b;
    --ink-2:          #090d14;
    --ink-3:          #0d121b;
    --surface:        rgba(255, 255, 255, .035);
    --surface-hi:     rgba(255, 255, 255, .06);
    --line:           rgba(255, 255, 255, .09);
    --line-hi:        rgba(255, 255, 255, .18);

    /* Brand */
    --cyan:           #22e5ff;
    --cyan-soft:      rgba(34, 229, 255, .14);
    --cyan-line:      rgba(34, 229, 255, .32);
    --violet:         #a55ec4;
    --gold:           #fbbc04;
    --green:          #25d366;
    --gradient:       linear-gradient(120deg, var(--cyan) 0%, var(--violet) 100%);

    /* Text */
    --text:           #f1f4f9;
    --muted:          #a3adbd;
    --faint:          #6d7789;

    /* Type */
    --font:           'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --step--1:        clamp(.82rem, .79rem + .12vw, .89rem);
    --step-0:         clamp(1rem, .96rem + .18vw, 1.08rem);
    --step-1:         clamp(1.13rem, 1.05rem + .35vw, 1.35rem);
    --step-2:         clamp(1.4rem, 1.24rem + .7vw, 1.9rem);
    --step-3:         clamp(1.8rem, 1.5rem + 1.3vw, 2.7rem);
    --step-4:         clamp(2.2rem, 1.6rem + 2.6vw, 4rem);
    --step-5:         clamp(2.8rem, 1.7rem + 4.8vw, 6rem);

    /* Rhythm */
    --gutter:         clamp(1.25rem, 4vw, 3rem);
    --section-y:      clamp(4.5rem, 9vw, 8.5rem);
    --radius:         14px;
    --radius-lg:      22px;
    --radius-pill:    999px;

    /* Motion */
    --ease:           cubic-bezier(.22, 1, .36, 1);
    --speed:          .45s;

    --shadow:         0 20px 50px -24px rgba(0, 0, 0, .9);
    --shadow-cyan:    0 20px 60px -28px rgba(34, 229, 255, .45);

    /* Background node colours, read by js/background.js so the animation
       follows whatever theme the page is wearing. */
    --bg-node-a:      34 229 255;
    --bg-node-b:      165 94 196;

    /* MediStockZA brand, sampled from the logo artwork. Declared at :root
       rather than inside .theme-medistock because the teaser band on the
       SideQuest homepage needs them too, and that page wears the SideQuest
       theme. One source of truth for both — see section 1b for the sampling. */
    --medi:           37 178 185;   /* #25b2b9 — cross and swoosh */
    --medi-deep:      90 195 216;   /* #5ac3d8 — petrol end of the mark */
    --medi-text:      #8fdee5;
    --medi-text-hi:   #a8e9f0;
    --medi-ground:    #072c31;
}

/* ---------- 1b. MediStockZA theme ---------------------------------------
   Applied to <html class="theme-medistock">.

   The palette is sampled from the logo artwork itself, not from the app's
   Tailwind config — the two had drifted apart. Measured off lockup-900.png,
   every colour in the mark sits between hue 180 and 192: the deep petrol of
   the tagline and "ZA" (#015d73, 192deg), the mid teal of the cross and
   swoosh (#03787f, 183deg), the brighter wordmark teal (#0f8c90, 182deg).

   The first version of this theme was built around #2ac0b0 / #58dcc9, which
   measure 174deg and 171deg — far enough toward green to read as mint beside
   a blue-leaning logo. Everything below is pinned to 183-190deg so the page
   and the mark are the same colour family. Keep new values in that band.
   ------------------------------------------------------------------------ */
.theme-medistock {
    --ink:            #032429;
    --ink-2:          #052b30;
    --ink-3:          #0b373c;
    --surface:        rgba(255, 255, 255, .04);
    --surface-hi:     rgba(255, 255, 255, .07);
    --line:           rgba(134, 216, 232, .14);
    --line-hi:        rgba(134, 216, 232, .28);

    --cyan:           #25b2b9;
    --cyan-soft:      rgba(37, 178, 185, .15);
    --cyan-line:      rgba(37, 178, 185, .34);
    --violet:         #5ac3d8;
    --gradient:       linear-gradient(120deg, #25b2b9 0%, #5ac3d8 100%);

    --text:           #f0f9f9;
    --muted:          #a8c4c7;
    --faint:          #6c8f93;

    --shadow-cyan:    0 20px 60px -28px rgba(37, 178, 185, .5);
    --bg-node-a:      37 178 185;
    --bg-node-b:      90 195 216;
}

/* ---------- 2. Reset ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
    -webkit-text-size-adjust: 100%;
}

html { background: var(--ink); }

body {
    background: transparent;
    color: var(--text);
    font-family: var(--font);
    font-size: var(--step-0);
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4, h5 {
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.02em;
    text-wrap: balance;
}

p { text-wrap: pretty; }

:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 3px;
    border-radius: 4px;
}

::selection { background: var(--cyan); color: #04070d; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: #232a36; border-radius: 99px; border: 2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: #333c4c; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--cyan);
    color: #04070d;
    padding: .85rem 1.4rem;
    border-radius: 0 0 var(--radius) 0;
    font-weight: 700;
}
.skip-link:focus { left: 0; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- 2b. Living background ---------------------------------------- */
#bg-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: block;
    pointer-events: none;
    contain: strict;
}

/* Slow ambient colour wash behind the node field. Pure CSS, GPU-composited. */
.bg-aurora {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
}
/* No blur() here on purpose. A radial gradient is already soft, and a large
   blurred layer costs 5-6x the frame budget for no visible gain. */
.bg-aurora::before,
.bg-aurora::after {
    content: '';
    position: absolute;
    width: 85vmax;
    height: 85vmax;
    border-radius: 50%;
    will-change: transform;
}
.bg-aurora::before {
    background: radial-gradient(circle closest-side,
        rgb(var(--bg-node-a) / .13) 0%,
        rgb(var(--bg-node-a) / .07) 32%,
        rgb(var(--bg-node-a) / .02) 60%,
        transparent 78%);
    top: -34vmax;
    left: -22vmax;
    animation: aurora-a 34s ease-in-out infinite alternate;
}
.bg-aurora::after {
    background: radial-gradient(circle closest-side,
        rgb(var(--bg-node-b) / .12) 0%,
        rgb(var(--bg-node-b) / .06) 32%,
        rgb(var(--bg-node-b) / .02) 60%,
        transparent 78%);
    bottom: -38vmax;
    right: -24vmax;
    animation: aurora-b 42s ease-in-out infinite alternate;
}

@keyframes aurora-a {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(14vw, 10vh, 0) scale(1.14); }
    100% { transform: translate3d(30vw, -4vh, 0) scale(.94); }
}
@keyframes aurora-b {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(-16vw, -12vh, 0) scale(1.12); }
    100% { transform: translate3d(-28vw, 6vh, 0) scale(.96); }
}

/* Everything the visitor reads sits above the background layers. */
.site-header,
main,
.site-footer,
.wa-float,
.skip-link { position: relative; z-index: 1; }

.site-header { z-index: 100; }
.wa-float { z-index: 90; }

/* ---------- 3. Layout ---------------------------------------------------- */
.wrap {
    width: 100%;
    max-width: 1220px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 820px; }

.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: rgba(255, 255, 255, .026); }
.section--tight { padding-block: clamp(3rem, 6vw, 5rem); }

.stack > * + * { margin-top: 1.1rem; }

.grid { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* ---------- 4. Section headers ------------------------------------------- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cyan);
    margin-bottom: 1.1rem;
}
.eyebrow::before {
    content: '';
    width: 26px;
    height: 1px;
    background: var(--cyan);
    opacity: .6;
}

.section-head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow::before { display: none; }

.section-title { font-size: var(--step-3); }
.section-lede {
    margin-top: 1.1rem;
    color: var(--muted);
    font-size: var(--step-1);
    line-height: 1.6;
}

.accent { color: var(--cyan); }
.accent-grad {
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---------- 5. Buttons --------------------------------------------------- */
.btn {
    --btn-bg: transparent;
    --btn-fg: var(--text);
    --btn-line: var(--line-hi);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: .95rem 1.75rem;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-line);
    border-radius: var(--radius-pill);
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    text-align: center;
    transition: transform var(--speed) var(--ease),
                background var(--speed) var(--ease),
                border-color var(--speed) var(--ease),
                box-shadow var(--speed) var(--ease),
                color var(--speed) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
    --btn-bg: var(--cyan);
    --btn-fg: #04070d;
    --btn-line: var(--cyan);
    box-shadow: 0 10px 30px -14px rgba(34, 229, 255, .8);
}
.btn--primary:hover { box-shadow: 0 16px 42px -14px rgba(34, 229, 255, .95); }

.btn--ghost { --btn-line: var(--cyan-line); --btn-fg: var(--cyan); }
.btn--ghost:hover { background: var(--cyan-soft); --btn-line: var(--cyan); }

.btn--quiet { --btn-line: var(--line); --btn-fg: var(--muted); }
.btn--quiet:hover { --btn-line: var(--line-hi); --btn-fg: var(--text); background: var(--surface); }

.btn--wa { --btn-bg: var(--green); --btn-fg: #04140a; --btn-line: var(--green); }

.btn--block { width: 100%; }
.btn--sm { padding: .62rem 1.15rem; font-size: .84rem; }

.btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: .9rem;
    margin-top: 2.2rem;
}

/* ---------- 6. Cards ----------------------------------------------------- */
.card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    transition: border-color var(--speed) var(--ease),
                background var(--speed) var(--ease),
                transform var(--speed) var(--ease);
    overflow: hidden;
}
.card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: var(--gradient);
    opacity: 0;
    transition: opacity var(--speed) var(--ease);
}
.card:hover { border-color: var(--line-hi); background: var(--surface-hi); transform: translateY(-4px); }
.card:hover::before { opacity: .9; }

.card--flat:hover { transform: none; }
.card--plain::before { display: none; }

.card-title { font-size: var(--step-1); margin-bottom: .6rem; }
.card-text { color: var(--muted); font-size: .96rem; line-height: 1.7; }

.icon-tile {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--cyan-soft);
    border: 1px solid var(--cyan-line);
    color: var(--cyan);
    margin-bottom: 1.35rem;
    flex-shrink: 0;
}
.icon-tile svg { width: 21px; height: 21px; }

/* ---------- 7. Icons ----------------------------------------------------- */
.ico {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -.125em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}
.ico--solid { fill: currentColor; stroke: none; }

/* NB: do not add `svg symbol[fill] { stroke: none }` here. Outline symbols
   carry fill="none", so that selector matches them too and silently erases
   every stroked icon on the site. The solid symbols set stroke="none" as a
   presentation attribute in the sprite itself, which is the correct fix. */

/* ---------- 8. Header / nav ---------------------------------------------- */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
    transition: background var(--speed) var(--ease),
                border-color var(--speed) var(--ease),
                backdrop-filter var(--speed) var(--ease);
    border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
    background: rgba(5, 7, 11, .82);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom-color: var(--line);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-block: .9rem;
}

.brand { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.brand img { width: 38px; height: 38px; border-radius: 50%; }
.brand__name {
    font-weight: 800;
    font-size: 1.02rem;
    letter-spacing: -.01em;
    line-height: 1.1;
}
.brand__name span { display: block; font-size: .64rem; font-weight: 600; letter-spacing: .28em; color: var(--cyan); }

.nav { display: flex; align-items: center; gap: .35rem; }
.nav a {
    padding: .5rem .8rem;
    font-size: .88rem;
    font-weight: 500;
    color: var(--muted);
    border-radius: var(--radius-pill);
    transition: color .25s var(--ease), background .25s var(--ease);
}
.nav a:hover { color: var(--text); background: var(--surface); }
.nav a.is-cta { margin-left: .5rem; }

/* A button inside the nav must keep its own colours — these selectors
   out-specify the generic `.nav a` rules above. */
.nav a.btn { color: var(--btn-fg); background: var(--btn-bg); border-color: var(--btn-line); }
.nav a.btn:hover { color: var(--btn-fg); background: var(--btn-bg); border-color: var(--btn-line); }
.nav a.btn--ghost:hover { background: var(--cyan-soft); }

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    place-items: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--text);
    cursor: pointer;
}
.nav-toggle svg { width: 20px; height: 20px; }
.nav-toggle .ico--close { display: none; }
.nav-toggle[aria-expanded="true"] .ico--open { display: none; }
.nav-toggle[aria-expanded="true"] .ico--close { display: block; }

/* 1040px, not 960: the nav wraps to two lines just under 1000px now that the
   product button is in it, so the burger has to arrive before that. */
@media (max-width: 1040px) {
    .nav-toggle { display: grid; }
    .nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: .2rem;
        padding: 1rem var(--gutter) 1.6rem;
        background: rgba(5, 7, 11, .97);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        border-bottom: 1px solid var(--line);
        display: none;
    }
    .nav.is-open { display: flex; }
    .nav a { padding: .85rem 1rem; font-size: 1rem; }
    .nav a.is-cta { margin: .6rem 0 0; }
}

/* ---------- 9. Hero ------------------------------------------------------ */
.hero {
    position: relative;
    padding-block: clamp(8rem, 16vw, 11rem) clamp(4.5rem, 9vw, 7.5rem);
    overflow: hidden;
    isolation: isolate;
}
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(70% 55% at 50% 0%, rgba(34, 229, 255, .05), transparent 70%),
        linear-gradient(180deg, transparent 55%, rgba(5, 7, 11, .55) 100%);
}
.hero__aurora {
    position: absolute;
    z-index: -1;
    width: min(68rem, 130%);
    aspect-ratio: 2 / 1;
    top: -22%;
    left: 50%;
    translate: -50% 0;
    background:
        radial-gradient(closest-side, rgba(34, 229, 255, .18), transparent 70%),
        radial-gradient(closest-side, rgba(165, 94, 196, .14), transparent 70%);
    background-position: 30% 50%, 72% 40%;
    background-repeat: no-repeat;
    background-size: 62% 100%, 58% 90%;
    filter: blur(20px);
    pointer-events: none;
}

.hero--center { text-align: center; }
.hero--center .hero__inner { margin-inline: auto; }
.hero--center .btn-row { justify-content: center; }
.hero--center .eyebrow::before { display: none; }

.hero__inner { max-width: 54rem; }

.hero__title {
    font-size: var(--step-5);
    line-height: .95;
    letter-spacing: -.035em;
}
.hero__lede {
    margin-top: 1.6rem;
    font-size: var(--step-1);
    color: var(--muted);
    max-width: 40rem;
    line-height: 1.6;
}
.hero--center .hero__lede { margin-inline: auto; }

.trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem 1.6rem;
    margin-top: 2.6rem;
    font-size: .84rem;
    color: var(--faint);
}
.hero--center .trust-row { justify-content: center; }
.trust-row li { display: flex; align-items: center; gap: .45rem; }
.trust-row svg { width: 15px; height: 15px; color: var(--cyan); }

/* ---------- 10. Feature list --------------------------------------------- */
.check-list { display: flex; flex-direction: column; gap: .95rem; }
.check-list li { display: flex; align-items: flex-start; gap: .75rem; font-size: .96rem; }
.check-list svg { width: 18px; height: 18px; color: var(--cyan); margin-top: .3rem; flex-shrink: 0; }
.check-list li.is-no svg { color: var(--faint); }
.check-list li.is-no { color: var(--faint); }

.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
/* Centring is right when the two columns are of similar height. When one side is
   a tall form and the other is three contact links, centring floats the short
   column in the middle of a void, so those layouts opt into top alignment. */
.split--top { align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .split--wide-left { grid-template-columns: 1.15fr .85fr; } }

/* ---------- 11. Pricing -------------------------------------------------- */
.price-grid {
    display: grid;
    gap: clamp(1.2rem, 2.2vw, 1.6rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr));
    align-items: stretch;
}

.price {
    display: flex;
    flex-direction: column;
    position: relative;
}
.price__name { font-size: 1.3rem; margin-bottom: .45rem; }
.price__note { color: var(--faint); font-size: .84rem; }

.price__tagline {
    color: var(--muted);
    font-size: .9rem;
    line-height: 1.55;
    min-height: 3.1rem;        /* keeps the quote line level across all three */
}

.price__quote {
    margin: 1.3rem 0 1.5rem;
    padding-top: 1.3rem;
    border-top: 1px solid var(--line);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -.02em;
}
.price__quote span {
    display: block;
    font-size: .8rem;
    font-weight: 500;
    color: var(--faint);
    letter-spacing: 0;
    margin-top: .3rem;
    line-height: 1.5;
}

.price__features { margin-bottom: 2rem; }
.price .check-list li { font-size: .92rem; color: var(--muted); align-items: flex-start; }
.price .check-list li.is-crm { color: var(--text); margin-bottom: .2rem; }
.price .check-list li.is-crm svg { color: var(--gold); }
.price .check-list li.is-crm span { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.price .check-list li.is-crm strong { color: var(--cyan); font-weight: 700; }
.price .btn { margin-top: auto; }

.price--featured {
    border-color: var(--cyan-line);
    background: linear-gradient(180deg, rgba(34, 229, 255, .07), rgba(255, 255, 255, .02));
    box-shadow: var(--shadow-cyan);
}
.price--featured::before { opacity: .9; }

.tag {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border-radius: var(--radius-pill);
    background: var(--cyan);
    color: #04070d;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: .9rem;
    align-self: flex-start;
}
.tag--soft { background: var(--cyan-soft); color: var(--cyan); border: 1px solid var(--cyan-line); }
.tag--free { background: var(--gold); color: #1b1400; margin-bottom: 0; }

/* Invisible placeholder so every card's heading starts on the same line.
   Only needed while the cards sit side by side. */
.tag--ghost { visibility: hidden; }
@media (max-width: 767px) {
    .tag--ghost { display: none; }
    .price__tagline { min-height: 0; }
}

/* ---------- 11b. Once-off banner ----------------------------------------- */
.once-off {
    margin-top: clamp(3rem, 6vw, 4.5rem);
    display: grid;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    align-items: center;
    padding: clamp(1.75rem, 4vw, 3rem);
}
@media (min-width: 860px) {
    .once-off { grid-template-columns: 1.05fr .95fr; }
}
.once-off__intro .eyebrow { margin-bottom: .9rem; }
.once-off__intro .section-title { margin-bottom: 1rem; }
.once-off__intro .price__quote { border-top: 0; padding-top: 0; }
.once-off__list {
    border-left: 1px solid var(--line);
    padding-left: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 859px) {
    .once-off__list { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 1.75rem; }
}
.once-off__list li { font-size: .95rem; color: var(--muted); }

/* ---------- 12. CRM feature block ---------------------------------------- */
.crm {
    position: relative;
    border: 1px solid var(--cyan-line);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(90rem 30rem at 15% -10%, rgba(34, 229, 255, .1), transparent 60%),
        radial-gradient(70rem 26rem at 95% 110%, rgba(165, 94, 196, .12), transparent 60%),
        rgba(13, 18, 27, .82);
    padding: clamp(1.75rem, 4vw, 3.25rem);
    overflow: hidden;
}

.crm__badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .9rem;
    border-radius: var(--radius-pill);
    background: var(--gold);
    color: #1b1400;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 1.3rem;
}
.crm__badge svg { width: 14px; height: 14px; }

.crm-features { display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin-top: 2.4rem; }
.crm-feature { display: flex; gap: .85rem; }
.crm-feature svg { width: 20px; height: 20px; color: var(--cyan); margin-top: .25rem; flex-shrink: 0; }
.crm-feature h3 { font-size: .98rem; margin-bottom: .3rem; letter-spacing: -.01em; }
.crm-feature p { font-size: .88rem; color: var(--muted); line-height: 1.6; }

.crm-shot {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #070b12;
    overflow: hidden;
}
.crm-shot__bar {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .02);
}
.crm-shot__dot { width: 9px; height: 9px; border-radius: 50%; background: #2b3444; }
.crm-shot__title { margin-left: .5rem; font-size: .74rem; color: var(--faint); letter-spacing: .04em; }
.crm-shot__body { padding: 1.1rem; display: grid; gap: .7rem; }
.crm-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.crm-stat {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .7rem .8rem;
    background: rgba(255, 255, 255, .02);
}
.crm-stat span { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); }
.crm-stat strong { font-size: 1.05rem; letter-spacing: -.02em; }
.crm-line { height: 9px; border-radius: 99px; background: rgba(255, 255, 255, .06); }
.crm-line--60 { width: 60%; }
.crm-line--85 { width: 85%; }
.crm-line--40 { width: 40%; background: var(--cyan-soft); }

/* ---------- 13. Sliders / rails ------------------------------------------ */
.rail-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}
.rail-controls { display: flex; gap: .6rem; }
.rail-btn {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--line-hi);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.rail-btn:hover { background: var(--cyan); border-color: var(--cyan); color: #04070d; }
.rail-btn svg { width: 17px; height: 17px; }

.rail {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: .5rem;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; flex: 0 0 min(88vw, 21rem); }

.rail--reviews > * { flex: 0 0 min(92vw, 34rem); scroll-snap-align: center; }

@media (max-width: 767px) {
    .rail-controls { display: none; }
}

/* ---------- 14. Portfolio ------------------------------------------------ */
.work-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--surface);
    transition: border-color var(--speed) var(--ease), transform var(--speed) var(--ease);
}
.work-card:hover { border-color: var(--cyan-line); transform: translateY(-4px); }
.work-card__media {
    aspect-ratio: 16 / 10;
    display: grid;
    place-items: center;
    padding: 2rem;
    background: #fff;
}
.work-card__media img { max-height: 100%; width: auto; object-fit: contain; }
.work-card__body { padding: 1.35rem 1.5rem 1.6rem; }
.work-card__body h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.work-card__cat { font-size: .82rem; color: var(--cyan); font-weight: 600; }
.work-card__link { margin-top: .9rem; display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; color: var(--muted); }
.work-card__link svg { width: 14px; height: 14px; }
.work-card:hover .work-card__link { color: var(--cyan); }

.work-card--soon .work-card__media { background: var(--ink-3); color: var(--faint); }
.work-card--soon .work-card__media svg { width: 54px; height: 54px; opacity: .3; }

/* ---------- 15. Reviews -------------------------------------------------- */
/* One long review and two short ones. A slider hid two thirds of the proof and
   left ragged gaps, so the long one is featured and the others stack beside it. */
.reviews {
    display: grid;
    gap: clamp(1.25rem, 2.4vw, 1.75rem);
}
@media (min-width: 900px) {
    .reviews {
        grid-template-columns: 1.05fr .95fr;
        grid-template-rows: auto auto;
    }
    .review--featured { grid-row: 1 / span 2; }
}

.review { display: flex; flex-direction: column; position: relative; }
.stars { display: flex; gap: .2rem; color: var(--gold); margin-bottom: 1.2rem; }
.stars svg { width: 17px; height: 17px; }
.review__quote {
    font-size: .98rem;
    line-height: 1.75;
    color: var(--muted);
    margin-bottom: 1.8rem;
    flex: 1;
}
.review__quote p:first-child { color: var(--text); }

/* The two short reviews stretch to match the featured one, so centre their
   text in the space rather than stranding it at the top. */
@media (min-width: 900px) {
    .reviews .review:not(.review--featured) .review__quote {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

.review--featured { border-color: var(--cyan-line); }
.review--featured .review__quote { font-size: 1.02rem; }
.review--featured .review__quote p:first-child {
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--text);
}
.review__mark {
    position: absolute;
    top: clamp(1rem, 2vw, 1.6rem);
    right: clamp(1rem, 2vw, 1.8rem);
    width: 42px;
    height: 42px;
    color: rgba(255, 255, 255, .05);
    pointer-events: none;
}
.review__quote p + p { margin-top: .9rem; }
.review__by { display: flex; align-items: center; gap: .85rem; }
.avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--cyan-soft);
    border: 1px solid var(--cyan-line);
    color: var(--cyan);
    font-weight: 800;
    flex-shrink: 0;
}
.review__by strong { display: block; font-size: .94rem; font-weight: 700; }
.review__by span { font-size: .78rem; color: var(--faint); }

/* ---------- 16. FAQ ------------------------------------------------------ */
.faq { display: flex; flex-direction: column; gap: .75rem; }
.faq details {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    transition: border-color .3s var(--ease);
}
.faq details[open] { border-color: var(--cyan-line); }
.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 18px; height: 18px; color: var(--cyan); transition: transform .3s var(--ease); flex-shrink: 0; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq__body { padding: 0 1.35rem 1.35rem; color: var(--muted); font-size: .95rem; line-height: 1.75; }
.faq__body p + p { margin-top: .8rem; }

/* ---------- 17. Forms ---------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 1.25rem; }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field label { font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.field input,
.field select,
.field textarea {
    width: 100%;
    padding: .9rem 1rem;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--text);
    font-size: .96rem;
    transition: border-color .25s var(--ease), background .25s var(--ease);
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--cyan-line);
    background: rgba(34, 229, 255, .04);
    outline: none;
}
.field input::placeholder, .field textarea::placeholder { color: #5b6472; }
.field select option { background: #0d121b; color: var(--text); }

.consent {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    font-size: .86rem;
    color: var(--muted);
    line-height: 1.55;
}
.consent input {
    width: 18px; height: 18px;
    margin-top: .2rem;
    accent-color: var(--cyan);
    cursor: pointer;
    flex-shrink: 0;
}
.consent a { color: var(--cyan); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.honey { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; padding: 0; border: 0; }

.form-note { font-size: .8rem; color: var(--faint); }

.contact-link {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem 0;
    font-weight: 600;
    word-break: break-word;
}
.contact-link .icon-tile { margin-bottom: 0; }
.contact-link:hover { color: var(--cyan); }

.social-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.social-row a {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--muted);
    transition: all .25s var(--ease);
}
.social-row a:hover { border-color: var(--cyan-line); color: var(--cyan); background: var(--cyan-soft); }
.social-row svg { width: 18px; height: 18px; }

/* ---------- 18. Partner -------------------------------------------------- */
.partner {
    display: grid;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(1.75rem, 4vw, 3.25rem);
    background:
        radial-gradient(60rem 22rem at 10% 0%, rgba(165, 94, 196, .12), transparent 65%),
        rgba(13, 18, 27, .82);
}
@media (min-width: 880px) { .partner { grid-template-columns: 1.1fr .9fr; } }
.partner__media {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    background: #fff;
    padding: 1.5rem;
    display: grid;
    place-items: center;
}
.partner__media img { max-height: 240px; width: auto; }

/* ---------- 19. Long-form content (terms / privacy) ---------------------- */
.prose { color: var(--muted); font-size: 1rem; line-height: 1.8; }
.prose h2 {
    color: var(--text);
    font-size: var(--step-2);
    margin: 3rem 0 1rem;
    scroll-margin-top: 7rem;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 { color: var(--text); font-size: 1.1rem; margin: 2rem 0 .7rem; }
.prose p + p { margin-top: 1rem; }
.prose strong { color: var(--text); font-weight: 700; }
.prose ul { margin: 1rem 0; display: flex; flex-direction: column; gap: .7rem; }
/* Normal flow, not flex — a flex li turns every inline link into its own
   unwrappable flex item, which overflows on narrow screens. */
.prose ul li { position: relative; padding-left: 1.4rem; }
.prose ul li::before {
    content: '—';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--cyan);
}
.prose a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.toc {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 1.4rem 1.5rem;
    margin-bottom: 3rem;
}
.toc h2 { font-size: .74rem !important; text-transform: uppercase; letter-spacing: .16em; color: var(--faint) !important; margin: 0 0 .9rem !important; }
.toc ol { display: flex; flex-direction: column; gap: .5rem; counter-reset: toc; }
.toc li { counter-increment: toc; font-size: .92rem; }
.toc li::before { content: counter(toc) '. '; color: var(--cyan); font-weight: 700; }
.toc a { color: var(--muted); }
.toc a:hover { color: var(--cyan); }

.page-head {
    padding-block: clamp(8rem, 15vw, 10rem) clamp(2.5rem, 5vw, 3.5rem);
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, .026);
}
.page-head h1 { font-size: var(--step-4); }
.page-head p { margin-top: 1rem; color: var(--muted); }
.page-meta { margin-top: 1.4rem; font-size: .82rem; color: var(--faint); }

/* ---------- 20. Comparison table (Wix page) ------------------------------ */
.comp-table-wrap { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.comp-table { width: 100%; border-collapse: collapse; }
.comp-table th, .comp-table td {
    padding: 1.2rem 1.35rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
    font-size: .92rem;
}
.comp-table thead th {
    background: rgba(255, 255, 255, .03);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--faint);
    font-weight: 800;
}
.comp-table thead th:last-child { color: var(--cyan); }
.comp-table tbody tr:last-child td { border-bottom: 0; }
.comp-table td:first-child { font-weight: 700; color: var(--text); width: 18%; }
.comp-table p { color: var(--muted); margin-top: .5rem; line-height: 1.65; }

.badge {
    display: inline-block;
    padding: .28rem .65rem;
    border-radius: var(--radius-pill);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.badge--rented { background: rgba(255, 255, 255, .06); color: var(--muted); border: 1px solid var(--line); }
.badge--owned { background: var(--cyan-soft); color: var(--cyan); border: 1px solid var(--cyan-line); }

.comp-cards { display: none; flex-direction: column; gap: 1.25rem; }
.comp-card__metric {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--faint);
    font-weight: 800;
    margin-bottom: 1.2rem;
}
.comp-card__block + .comp-card__block { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.comp-card__block strong { display: block; margin: .6rem 0 .35rem; }
.comp-card__block p { color: var(--muted); font-size: .9rem; line-height: 1.65; }

@media (max-width: 880px) {
    .comp-table-wrap { display: none; }
    .comp-cards { display: flex; }
}

/* ---------- 20b. MediStock pieces ---------------------------------------- */

/* The brand lockup ships on a white background, so it is presented on a white
   panel rather than keyed out - the artwork has soft shadows that would halo. */
.brandplate {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(1.25rem, 3vw, 2rem);
    display: grid;
    place-items: center;
    box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .8);
}
.brandplate img { width: 100%; max-width: 330px; height: auto; }

/* Never let the logo panel dominate, especially once the band stacks on a
   narrow screen. */
.brandplate { max-width: 430px; width: 100%; justify-self: center; }

.brandplate--sm { padding: .6rem; border-radius: 14px; }
.brandplate--sm img { width: 44px; }

/* Product chip used in the site header */
.nav a.is-product {
    color: var(--medi-text);
    border: 1px solid rgb(var(--medi) / .38);
    background: rgb(var(--medi) / .1);
    font-weight: 700;
}
.nav a.is-product:hover {
    color: var(--medi-text-hi);
    background: rgb(var(--medi) / .2);
    border-color: rgb(var(--medi) / .6);
}

/* Teaser band on the SideQuest homepage */
.product-band {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3rem);
    align-items: center;
    border: 1px solid rgb(var(--medi) / .3);
    border-radius: var(--radius-lg);
    padding: clamp(1.75rem, 4vw, 3rem);
    background:
        radial-gradient(60rem 24rem at 12% 0%, rgb(var(--medi) / .13), transparent 62%),
        radial-gradient(50rem 20rem at 95% 105%, rgb(var(--medi-deep) / .1), transparent 60%),
        var(--medi-ground);

    /* Inside the band, the accent tokens resolve to MediStock's palette rather
       than SideQuest's. Without this the "ZA" in the heading picks up the site
       gradient and renders violet, an arm's length from the petrol blue "ZA"
       in the logo sitting directly beside it. */
    --cyan:     rgb(var(--medi));
    --violet:   rgb(var(--medi-deep));
    --gradient: linear-gradient(120deg, rgb(var(--medi)) 0%, rgb(var(--medi-deep)) 100%);
}
@media (min-width: 860px) { .product-band { grid-template-columns: 1.15fr .85fr; } }

.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .42rem .8rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgb(var(--medi) / .3);
    background: rgb(var(--medi) / .08);
    color: var(--medi-text);
    font-size: .8rem;
    font-weight: 600;
}
.chip svg { width: 14px; height: 14px; }

.btn--medi {
    --btn-bg: rgb(var(--medi));
    --btn-fg: #041c20;
    --btn-line: rgb(var(--medi));
    box-shadow: 0 10px 30px -14px rgb(var(--medi) / .85);
}
.btn--medi:hover { box-shadow: 0 16px 42px -14px rgb(var(--medi) / .95); }

/* Numbered steps */
.steps { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); counter-reset: step; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding-top: 3.4rem; }
.step::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--cyan-soft);
    border: 1px solid var(--cyan-line);
    color: var(--cyan);
    font-weight: 800;
    font-size: 1.05rem;
}
.step h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.step p { color: var(--muted); font-size: .95rem; line-height: 1.7; }

/* Stat strip */
.stat-strip {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.stat-strip > div { background: var(--ink-2); padding: clamp(1.25rem, 3vw, 1.9rem); }
.stat-strip strong {
    display: block;
    font-size: clamp(1.5rem, 3vw, 2rem);
    letter-spacing: -.02em;
    color: var(--cyan);
    margin-bottom: .3rem;
}
.stat-strip span { font-size: .88rem; color: var(--muted); line-height: 1.6; }

/* ---------- 21. Footer --------------------------------------------------- */
.site-footer {
    border-top: 1px solid var(--line);
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .015));
    padding-block: clamp(3.5rem, 7vw, 5rem) 2.5rem;
}
.footer-grid {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    margin-bottom: 3rem;
}
.footer-brand { max-width: 22rem; }
.footer-brand p { margin-top: 1rem; color: var(--faint); font-size: .9rem; line-height: 1.7; }
.footer-col h2 {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: var(--faint);
    font-weight: 800;
    margin-bottom: 1.1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: .65rem; }
.footer-col a { font-size: .91rem; color: var(--muted); }
.footer-col a:hover { color: var(--cyan); }

.footer-legal {
    border-top: 1px solid var(--line);
    padding-top: 1.8rem;
    margin-bottom: 1.8rem;
}
.footer-legal p {
    font-size: .82rem;
    line-height: 1.7;
    color: var(--faint);
    max-width: 68rem;
}
.footer-legal a { color: var(--muted); }
.footer-legal a:hover { color: var(--cyan); }
.footer-legal strong { color: var(--muted); }

.footer-bottom {
    border-top: 1px solid var(--line);
    padding-top: 1.8rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    font-size: .84rem;
    color: var(--faint);
}
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.footer-bottom a:hover { color: var(--cyan); }

/* ---------- 22. Floating WhatsApp ---------------------------------------- */
.wa-float {
    position: fixed;
    right: clamp(1rem, 3vw, 1.75rem);
    bottom: clamp(1rem, 3vw, 1.75rem);
    z-index: 90;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    /* Deeper than the brand green so the white mark clears 3:1 contrast
       (white on #25d366 is only 1.98:1) while still reading as WhatsApp. */
    background: #18a54c;
    color: #fff;
    box-shadow: 0 12px 30px -10px rgba(24, 165, 76, .65);
    transition: transform .3s var(--ease);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 28px; height: 28px; }

/* ---------- 23. Reveal animation ----------------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* JS-off safety: if the script never runs, show everything. */
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- 24. Touch and small-screen ergonomics ------------------------ */

/* iOS Safari zooms the whole page when a focused field is under 16px.
   Desktop keeps the smaller size. */
@media (max-width: 900px) {
    .field input,
    .field select,
    .field textarea { font-size: 16px; }

    /* Section labels were 11.5px — nudged over the 12px readability line. */
    .eyebrow { font-size: .78rem; }
}

@media (pointer: coarse) {
    /* Dense link lists (legal table of contents, footer columns) were only
       15-16px tall. Padding gives each one a finger-sized row without
       changing how they look. */
    .toc a,
    .footer-col a,
    .footer-bottom nav a,
    .footer-legal a {
        display: inline-block;
        padding-block: .72rem;      /* clears 44px on every page */
    }

    /* Inline links inside prose keep their place in the sentence, but
       padding-block quietly enlarges the hit area without shifting layout. */
    .consent a,
    .prose a { padding-block: .45rem; }

    /* Comparison badges were under the 12px readability line on phones. */
    .badge { font-size: .78rem; }
    .toc ol { gap: .15rem; }
    .footer-col ul { gap: .2rem; }

    /* Logo lockup to a full tap target. */
    .brand { padding-block: .25rem; }

    /* Consent tickboxes. */
    .consent { padding-block: .35rem; }
    .consent input { width: 22px; height: 22px; }

    /* Cards lift on hover, which on touch means they stick mid-animation. */
    .card:hover,
    .work-card:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; transform: none; }
    .bg-aurora::before,
    .bg-aurora::after { animation: none !important; }
}