/* neo-pages.css — the shared base, generated from the 45 pages.
119 rules identical on every page. Page-specific CSS stays inline
in each page's HTML, after this file, so the cascade is unchanged.
Verified: all 45 pages render identically to the standalone
previews in light, dark, and at 390px. */
:root{/* ═══════════════════════════════════════════════════════════ TIER 1 · REFERENCE — raw values, no meaning attached ═══════════════════════════════════════════════════════════ */ /* -- palette ------------------------------------------------ */ --neo-purple-700:#442aa9;--neo-purple-600:#5d3fd3;--neo-purple-100:#f0ecfc;--neo-plum-900:#251b3c;--neo-plum-800:#352949;--neo-plum-600:#514762;--neo-plum-400:#716381;--neo-gold-600:#b19063;--neo-gold-800:#795b33;--neo-gold-200:#d2b691;--neo-ink-900:#292433;--neo-ink-600:#625d6e;--neo-ink-200:#e3e0e9;--neo-ink-100:#f6f5f8;--neo-white:#ffffff;--neo-lilac-300:#c0b3e6;--neo-lilac-200:#cdbdf5;/* -- type ---------------------------------------------------- */ --neo-font-latin:'Space Grotesk', Arial, sans-serif;--neo-font-arabic:'Alexandria', Arial, sans-serif;--neo-font-mono:ui-monospace, Menlo, Consolas, monospace;--neo-weight-light:300;--neo-weight-regular:400;--neo-weight-medium:500;--neo-weight-semi:600;--neo-weight-bold:700;/* -- the fluid scale ---------------------------------------- Every step interpolates between the 390 and 1440 anchors, so a value is correct at every width rather than jumping at a breakpoint. Neither anchor is the design;both are. */ --neo-size-3xl:clamp(2.50rem, 1.62rem + 3.61vw, 3.60rem);--neo-size-2xl:clamp(1.90rem, 1.30rem + 2.46vw, 2.65rem);--neo-size-xl:clamp(1.45rem, 1.13rem + 1.31vw, 1.85rem);--neo-size-lg:clamp(1.15rem, 1.03rem + 0.49vw, 1.30rem);--neo-size-md:1rem;--neo-size-sm:0.875rem;--neo-size-xs:0.75rem;--neo-leading-tight:1.15;--neo-leading-heading:1.25;--neo-leading-body:1.65;--neo-leading-loose:1.9;--neo-tracking-tight:-0.035em;--neo-tracking-normal:0;--neo-tracking-wide:0.1em;/* -- space -------------------------------------------------- A single scale. Values between steps are not used. */ --neo-space-3xs:4px;--neo-space-2xs:8px;--neo-space-xs:12px;--neo-space-sm:16px;--neo-space-md:24px;--neo-space-lg:32px;--neo-space-xl:46px;--neo-space-2xl:74px;--neo-space-3xl:110px;/* -- geometry ------------------------------------------------ */ --neo-radius-sm:4px;--neo-radius-md:8px;--neo-radius-lg:10px;--neo-radius-full:999px;--neo-border-hair:1px;--neo-border-thick:2px;--neo-border-focus:3px;--neo-shadow-card:0 12px 34px rgba(37, 27, 60, .035);--neo-shadow-lift:0 -6px 24px rgba(37, 27, 60, .18);--neo-duration:160ms;/* -- layout -------------------------------------------------- */ --neo-container-max:1200px;--neo-gutter-desktop:80px;--neo-gutter-tablet:48px;--neo-gutter-mobile:36px;--neo-grid-columns:12;--neo-grid-gap:var(--neo-space-md);--neo-measure:68ch;--neo-card-min:320px;/* -- targets — WCAG 2.2 SC 2.5.8 is 24px;these exceed it ----- */ --neo-target-min:44px;--neo-target-action:48px;/* ═══════════════════════════════════════════════════════════ TIER 2 · SEMANTIC — meaning. Use these, never tier 1. ═══════════════════════════════════════════════════════════ */ /* -- surfaces ------------------------------------------------ */ --surface-page:var(--neo-white);--surface-sunken:var(--neo-ink-100);--surface-raised:var(--neo-white);--surface-inverse:var(--neo-plum-900);--surface-inverse-2:var(--neo-plum-800);--surface-accent:var(--neo-purple-100);/* -- text ---------------------------------------------------- */ --text-primary:var(--neo-ink-900);--text-secondary:var(--neo-ink-600);--text-heading:var(--neo-plum-900);--text-inverse:var(--neo-white);--text-inverse-2:#d1c8df;--text-accent:var(--neo-purple-700);--text-eyebrow:var(--neo-gold-800);/* -- lines --------------------------------------------------- */ --border-subtle:var(--neo-ink-200);--border-strong:var(--neo-plum-400);--border-inverse:var(--neo-plum-600);/* -- action -------------------------------------------------- */ --action-primary:var(--neo-purple-600);--action-primary-hover:var(--neo-purple-700);--action-on-primary:var(--neo-white);--action-secondary-bg:var(--neo-white);--action-secondary-fg:var(--neo-plum-900);/* -- state --------------------------------------------------- */ --state-active:var(--neo-purple-600);--state-focus:var(--neo-gold-600);--state-disabled:var(--neo-ink-600);--state-error:var(--neo-gold-800);/* -- gold. Four permitted uses, and no others ---------------- */ --accent-eyebrow:var(--neo-gold-800);--accent-final-tier:var(--neo-gold-600);--accent-chart-target:var(--neo-gold-600);--accent-focus-ring:var(--neo-gold-600);/* -- the three Loop stages ----------------------------------- */ --stage-model:var(--neo-purple-600);--stage-execute:var(--neo-lilac-300);--stage-measure:var(--neo-gold-200);/* -- data visualization -------------------------------------- */ --data-actual:var(--neo-purple-600);--data-forecast:var(--neo-purple-600);--data-range:rgba(93, 63, 211, .14);--data-range-edge:var(--neo-lilac-200);--data-target:var(--neo-gold-600);--data-grid:#e8e4ed;--data-axis:var(--neo-ink-600);--data-projection:var(--neo-lilac-300);--data-plot-bg:#f8f6fd;/* -- type roles ---------------------------------------------- */ --type-page-title:var(--neo-size-3xl);--type-section-title:var(--neo-size-2xl);--type-subsection:var(--neo-size-xl);--type-card-title:var(--neo-size-lg);--type-body:var(--neo-size-md);--type-support:var(--neo-size-sm);--type-label:var(--neo-size-xs);/* -- space roles --------------------------------------------- */ --space-section:var(--neo-space-2xl);--space-section-tight:var(--neo-space-xl);--space-block:var(--neo-space-lg);--space-card:var(--neo-space-md);--space-stack:var(--neo-space-sm);--space-inline:var(--neo-space-xs);/* ═══════════════════════════════════════════════════════════ TIER 3 · COMPONENT — only where a component needs its own ═══════════════════════════════════════════════════════════ */ --btn-height:var(--neo-target-action);--btn-padding:11px 22px;--btn-radius:var(--neo-radius-sm);--input-height:var(--neo-target-action);--card-padding:var(--neo-space-md);--card-radius:var(--neo-radius-md);--panel-radius:var(--neo-radius-lg);--header-height:76px;--header-height-sm:66px;--portrait-max:240px;--badge-size:96px;--mark-slot-width:116px;--icon-size:24px;--icon-stroke:1.5px;/* Native controls follow the OS unless the visitor has chosen. Left at "light dark", the browser paints an unstyled input to the OS preference and ignores our choice, which is how the notify field rendered black on a light page. It is narrowed to the chosen theme below. */ color-scheme:light dark}
@media(prefers-color-scheme: dark){html:not([data-theme]){--surface-page:#17131f;--surface-sunken:#1e1929;--surface-raised:#221c2e;--surface-inverse:#0f0c15;--surface-inverse-2:#1a1524;--surface-accent:#2a2140;--text-primary:#ece9f2;--text-secondary:#a79fb5;--text-heading:#f5f3f8;--text-inverse:#f5f3f8;--text-inverse-2:#b9b0c7;--text-accent:#b9a3f5;--text-eyebrow:#d2b691;--border-subtle:#322a42;--border-strong:#4b4060;--border-inverse:#3a3149;--action-primary:#7d61e8;--action-primary-hover:#9a83f0;--action-on-primary:#100d17;--action-secondary-bg:transparent;--action-secondary-fg:#ece9f2;--state-active:#9a83f0;--state-focus:#d2b691;--state-disabled:#6b6379;--state-error:#d2b691;--accent-eyebrow:#d2b691;--accent-final-tier:#d2b691;--accent-chart-target:#d2b691;--accent-focus-ring:#d2b691;--stage-model:#9a83f0;--stage-execute:#7f6fb8;--stage-measure:#d2b691;--data-actual:#9a83f0;--data-forecast:#9a83f0;--data-range:rgba(154, 131, 240, .18);--data-range-edge:#6d5aa8;--data-target:#d2b691;--data-grid:#2e2740;--data-axis:#a79fb5;--data-projection:#5b4d86;--data-plot-bg:#1c1727;--neo-shadow-card:0 12px 34px rgba(0, 0, 0, .35);--neo-shadow-lift:0 -6px 24px rgba(0, 0, 0, .45)}}
[data-theme="dark"]{--surface-page:#17131f;--surface-sunken:#1e1929;--surface-raised:#221c2e;--surface-inverse:#0f0c15;--surface-inverse-2:#1a1524;--surface-accent:#2a2140;--text-primary:#ece9f2;--text-secondary:#a79fb5;--text-heading:#f5f3f8;--text-inverse:#f5f3f8;--text-inverse-2:#b9b0c7;--text-accent:#b9a3f5;--text-eyebrow:#d2b691;--border-subtle:#322a42;--border-strong:#4b4060;--border-inverse:#3a3149;--action-primary:#7d61e8;--action-primary-hover:#9a83f0;--action-on-primary:#100d17;--action-secondary-bg:transparent;--action-secondary-fg:#ece9f2;--state-active:#9a83f0;--state-focus:#d2b691;--state-disabled:#6b6379;--state-error:#d2b691;--accent-eyebrow:#d2b691;--accent-final-tier:#d2b691;--accent-chart-target:#d2b691;--accent-focus-ring:#d2b691;--stage-model:#9a83f0;--stage-execute:#7f6fb8;--stage-measure:#d2b691;--data-actual:#9a83f0;--data-forecast:#9a83f0;--data-range:rgba(154, 131, 240, .18);--data-range-edge:#6d5aa8;--data-target:#d2b691;--data-grid:#2e2740;--data-axis:#a79fb5;--data-projection:#5b4d86;--data-plot-bg:#1c1727;--neo-shadow-card:0 12px 34px rgba(0, 0, 0, .35);--neo-shadow-lift:0 -6px 24px rgba(0, 0, 0, .45)}
html[lang="ar"]{--neo-weight-regular:var(--neo-weight-light);--neo-leading-body:var(--neo-leading-loose);--neo-leading-heading:1.4;--neo-tracking-tight:var(--neo-tracking-normal);--neo-tracking-wide:var(--neo-tracking-normal);/* Arabic sets larger;each step drops one notch to hold the same rhythm */ --type-page-title:clamp(2.25rem, 1.50rem + 3.08vw, 3.20rem);--type-section-title:clamp(1.70rem, 1.18rem + 2.13vw, 2.35rem);--type-subsection:clamp(1.35rem, 1.08rem + 1.11vw, 1.70rem);--type-card-title:clamp(1.08rem, 0.99rem + 0.37vw, 1.20rem);/* the extra line height needs matching vertical space */ --space-section:86px;--space-block:38px;--space-stack:18px}
@media(max-width: 1100px){:root{--neo-gutter-desktop:var(--neo-gutter-tablet);--space-section:var(--neo-space-xl)}}
@media(max-width: 640px){:root{--neo-gutter-desktop:var(--neo-gutter-mobile);--space-section:var(--neo-space-xl);--header-height:var(--header-height-sm);--card-padding:var(--neo-space-sm);--portrait-max:180px;--badge-size:72px}}
html[data-theme="light"]{color-scheme:light}
html[data-theme="dark"]{color-scheme:dark}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:150px}
body{margin:0;background:var(--surface-page);font:var(--type-body)/var(--neo-leading-body) var(--neo-font-latin);color:var(--text-primary);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:var(--action-primary-hover);text-underline-offset:4px}
h1,h2,h3,p,dl,figure,ul{margin:0}
h1,h2,h3{line-height:var(--neo-leading-tight);letter-spacing:var(--neo-tracking-tight);color:var(--text-heading)}
h1{font-size:var(--type-page-title);font-weight:600;max-width:12ch}
h2{font-size:var(--type-section-title);font-weight:500}
h3{font-size:var(--type-card-title);font-weight:600;letter-spacing:-.02em}
p+p{margin-top:1rem}
ul{padding:0;list-style:none}
img{max-width:100%;height:auto}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--accent-focus-ring);outline-offset:4px}
::selection{background:var(--surface-accent);color:var(--text-heading)}
.wrap{width:min(var(--neo-container-max),calc(100% - var(--neo-gutter-desktop)));margin-inline:auto}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--text-secondary)}
[hidden]{display:none!important}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--action-primary)}
.skip{position:fixed;top:-100px;left:20px;z-index:100;background:var(--surface-page);padding:12px;border:1px solid var(--border-subtle)}
.skip:focus{top:12px}
html[lang="ar"] body{font-family:var(--neo-font-arabic);line-height:1.9;font-weight:300}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3{letter-spacing:0;line-height:1.4}
html[lang="ar"] .eyebrow{letter-spacing:0}
html[lang="ar"] .num{font-family:var(--neo-font-latin)}
.header{height:var(--header-height);position:sticky;top:0;background:var(--surface-page);z-index:40;border-bottom:1px solid var(--border-subtle)}
.header-inner{height:100%;display:flex;align-items:center;gap:28px}
.logo{display:flex;align-items:center}
.logo img{width:110px;height:auto;display:block}
.section-label{padding-inline-start:22px;border-inline-start:1px solid var(--border-subtle);font-size:14px;color:var(--text-secondary)}
.nav{display:flex;align-items:center;gap:26px;margin-inline-start:auto}
.nav a{font-size:14px;text-decoration:none;color:var(--text-primary);padding-block:25px}
.nav a.active{color:var(--action-primary);box-shadow:inset 0 -2px var(--action-primary)}
.language{border:var(--neo-border-hair) solid var(--border-subtle);background:var(--surface-page);color:var(--text-heading);font-family:var(--neo-font-arabic);font-size:13px;line-height:1;padding:0 12px;border-radius:var(--neo-radius-sm);height:38px;min-height:0;text-decoration:none;display:inline-flex;align-items:center;transition:.16s}
.language:hover{border-color:var(--action-primary);color:var(--action-primary);background:var(--surface-accent)}
.menu-toggle{display:none}
.page-nav{position:sticky;top:var(--header-height);z-index:30;background:var(--surface-page);border-block:1px solid var(--border-subtle)}
.page-nav .wrap{display:flex;gap:32px;overflow:auto;scrollbar-width:none}
.page-nav .wrap::-webkit-scrollbar{display:none}
.page-nav a{padding-block:17px;font-size:13px;white-space:nowrap;text-decoration:none;color:var(--text-secondary);border-bottom:2px solid transparent}
.page-nav a:hover,.page-nav a[aria-current]{color:var(--action-primary);border-color:var(--action-primary)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:11px 22px;border:1px solid var(--action-primary);border-radius:4px;background:var(--action-primary);color:var(--action-on-primary);font-weight:600;font-size:14px;text-decoration:none;line-height:1.5;transition:background var(--neo-duration);text-align:center}
.btn:hover{background:var(--action-primary-hover)}
.btn.secondary{background:var(--action-secondary-bg);border-color:var(--border-subtle);color:var(--action-secondary-fg)}
.btn.secondary:hover{border-color:var(--action-primary);background:var(--surface-accent)}
.btn.light{background:var(--neo-white);border-color:var(--neo-white);color:var(--neo-plum-900)}
.btn.light:hover{background:var(--neo-white);filter:brightness(.92)}
.btn.full{width:100%}
.section{padding-block:var(--space-section);border-bottom:1px solid var(--border-subtle)}
.section-head{max-width:730px;margin-bottom:32px}
.section-head .eyebrow{margin-bottom:14px;color:var(--accent-eyebrow)}
.section-head p{margin-top:16px;color:var(--text-secondary);max-width:65ch}
.form{display:grid;grid-template-columns:1fr 1fr;gap:15px;max-width:640px}
.form label{font-size:var(--type-support);color:var(--text-heading);display:block}
.pg input[type="text"],.pg input[type="email"],.pg input[type="search"],.pg input[type="tel"],.pg input:not([type]),.pg select,.pg textarea,.form input,.form select,.form textarea{display:block;background:var(--surface-raised);border:var(--neo-border-hair) solid var(--border-subtle);color:var(--text-primary);border-radius:4px;min-height:46px;width:100%;padding:10px 12px;margin-top:6px;font-size:15px}
.pg input::placeholder,.pg textarea::placeholder,.form input::placeholder,.form textarea::placeholder{color:var(--text-secondary)}
.form textarea{min-height:7.5rem;resize:vertical;font:inherit;line-height:var(--neo-leading-body)}
.form .optional{color:var(--text-secondary);font-weight:400}
.form .full{grid-column:1/-1}
.form .consent{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--text-secondary);line-height:1.6}
.form .consent input{width:18px;height:18px;min-height:0;margin:2px 0 0;flex:0 0 18px;accent-color:var(--action-primary)}
.form .fine{grid-column:1/-1;font-size:12px;line-height:1.6;color:var(--text-secondary);margin:0}
.on-dark .form label{color:var(--text-inverse-2)}
.on-dark .form textarea{background:var(--surface-inverse-2);border-color:var(--border-strong);color:var(--text-inverse)}
.on-dark .form input,.on-dark .form select,.on-dark .form textarea{background:var(--surface-inverse-2);border-color:var(--border-strong);color:var(--text-inverse)}
.on-dark .form input::placeholder{color:var(--text-inverse-2)}
.on-dark .form select option{background:var(--surface-inverse);color:var(--text-inverse)}
.on-dark .form .consent,.on-dark .form .fine{color:var(--text-inverse-2)}
.on-dark .form .fine a,.on-dark .form .consent a{color:var(--text-inverse)}
.enquiry{background:var(--surface-inverse);padding:44px;border-radius:var(--panel-radius);color:var(--text-inverse);display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-block:60px}
.enquiry h2{color:var(--text-inverse);font-weight:500}
.enquiry p{color:var(--text-inverse-2);margin-top:18px;font-size:15px}
.enquiry .eyebrow{color:#d2b691;margin-bottom:16px}
.enquiry .contact-line{margin-top:22px;font-size:15px}
.enquiry .contact-line a{color:var(--text-inverse);text-decoration:none;border-bottom:1px solid #6f6386}
.confirm{max-width:620px;margin-inline:auto;padding-block:90px;text-align:center}
.confirm .mark{width:56px;height:56px;border-radius:50%;background:var(--surface-accent);color:var(--action-primary);display:grid;place-items:center;margin:0 auto 26px}
.confirm .mark svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.confirm h1{max-width:none;margin-bottom:18px}
.confirm p{color:var(--text-secondary)}
.confirm dl{margin-top:30px;padding-block:24px;border-block:1px solid var(--border-subtle);display:grid;grid-template-columns:1fr 1fr;gap:18px;text-align:start}
.confirm dt{font-size:12px;color:var(--text-secondary)}
.confirm dd{margin:5px 0 0;font-size:15px;color:var(--text-heading);font-weight:500}
.confirm .actions{display:flex;gap:12px;justify-content:center;margin-top:32px;flex-wrap:wrap}
.footer{padding:42px 0 26px;background:var(--surface-sunken);border-top:1px solid var(--border-subtle)}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:44px}
.footer img{width:100px;height:auto;display:block;margin-bottom:18px}
.footer p,.footer a{font-size:14px;color:var(--text-secondary)}
.footer ul{margin:0;display:grid;gap:10px}
.footer a{text-decoration:none}
.footer a:hover{color:var(--action-primary)}
.footer h3{font-size:var(--type-support);margin-bottom:18px;color:var(--text-heading)}
.footer .contact{margin-top:16px;display:grid;gap:6px}
.footer-legal{margin-top:30px;padding-top:22px;border-top:1px solid var(--border-subtle)}
.footer-legal .links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:14px}
.footer-legal .links a{font-size:13px}
.footer-legal .copy{font-size:12px;color:var(--text-secondary);max-width:none;line-height:1.7}
.cookie{position:fixed;inset-inline:0;bottom:0;z-index:60;background:var(--surface-inverse);color:var(--text-inverse-2);padding:18px 0;box-shadow:0 -6px 24px rgba(37,27,60,.18)}
.cookie .wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.cookie p{font-size:14px;max-width:70ch;margin:0}
.cookie a{color:var(--text-inverse)}
.cookie .actions{display:flex;gap:10px;margin-inline-start:auto}
.cookie .btn{min-height:42px;padding:9px 18px}
.cookie .btn.ghost{background:transparent;border-color:var(--border-inverse);color:var(--text-inverse)}
.mobile-cta{display:none}
@media(max-width:1100px){.wrap{width:calc(100% - 48px)}.nav{gap:18px}.section-label{display:none}.footer-top{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:850px){.enquiry{grid-template-columns:1fr;gap:30px;padding:32px}.section{padding-block:52px}}
@media(max-width:640px){html{scroll-padding-top:126px}.wrap{width:calc(100% - 36px)}.header{height:66px}.header-inner{gap:14px}.logo img{width:90px}.language{margin-inline-start:auto}.menu-toggle{display:block;border:var(--neo-border-hair) solid var(--border-subtle);background:var(--surface-page);color:var(--text-heading);border-radius:4px;width:42px;height:40px;font-size:20px}.nav{display:none;position:absolute;top:var(--header-height-sm);inset-inline:0;background:var(--surface-page);padding:10px 20px 20px;border-bottom:1px solid var(--border-subtle);box-shadow:0 12px 20px rgba(37,27,60,.04)}.nav[data-open="true"]{display:grid;gap:0}.nav a{font-size:16px;padding:12px}.nav a.active{box-shadow:none;border-inline-start:2px solid var(--action-primary)}.page-nav{top:66px}.page-nav .wrap{gap:24px}.page-nav a{padding-block:13px;font-size:12px}.form{grid-template-columns:1fr}.confirm{padding-block:60px}.confirm dl{grid-template-columns:1fr}.footer-top{grid-template-columns:1fr}.footer{padding-bottom:100px}.cookie .actions{margin-inline-start:0;width:100%}.cookie .btn{flex:1}.mobile-cta{display:flex;position:fixed;bottom:0;inset-inline:0;z-index:35;background:var(--surface-page);border-top:1px solid var(--border-subtle);padding:12px 18px max(12px,env(safe-area-inset-bottom));align-items:center;justify-content:space-between;gap:15px;box-shadow:0 -6px 20px rgba(37,27,60,.03)}.mobile-cta span{font-size:12px;line-height:1.4;color:var(--text-secondary)}.mobile-cta strong{display:block;color:var(--surface-inverse);font-size:14px}.mobile-cta .btn{min-height:42px}body.cookie-open .mobile-cta{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
/* ── data tables, hardened against a host stylesheet ─────────────────────
Two things a WordPress install can do that the standalone previews never
saw. (1) A parent theme or plugin styles bare table cells: borders, padding,
row tints, a smaller font. Hello Elementor's own stylesheets are now kept
off by functions.php, but these resets hold even if they come back.
(2) The editor drops
/
on save, so the six column widths of
the cohort table are restated on the header cells, which survive. */
.dtable{font-size:inherit;margin:0;background:transparent}
.dtable th,.dtable td{border:0;padding-inline-start:1px;line-height:inherit;background:transparent}
.dtable th{border-block-end:var(--neo-border-thick) solid var(--border-subtle)}
.dtable td{border-block-end:var(--neo-border-hair) solid var(--border-subtle)}
.dtable tbody>tr:nth-child(odd)>td,.dtable tbody>tr:hover>td{background:transparent}
@media(min-width:851px){
.dtable.cohorts th:nth-child(1){width:41%}
.dtable.cohorts th:nth-child(2){width:14%}
.dtable.cohorts th:nth-child(3){width:10%}
.dtable.cohorts th:nth-child(4){width:10%}
.dtable.cohorts th:nth-child(5){width:12%}
.dtable.cohorts th:nth-child(6){width:13%}
}
@media(max-width:850px){
.dtable td{border:0}
/* Below 850px each row becomes a card (display:grid). A surviving
otherwise pins that card to the first column's 41%, so the card is 159px
wide on a phone with every name wrapped word by word. With the column
widths released the card spans the table, colgroup or not. */
.dtable col{width:auto!important}
}
/* ── mobile pass ─────────────────────────────────────────────────────────
(Rules carry .pg so they outrank a page's own rule for the same element:
page CSS is loaded after this file.)
Below 850px the pick-and-read components stack. The theme script scrolls
the detail into view after a tap; these rules keep the detail as close to
its control as the markup allows and confirm the change. */
@media(max-width:850px){
/* the tapped detail: a 160ms tint that fades, as a tab change confirms itself */
.is-revealed{animation:neo-reveal .7s ease-out}
@keyframes neo-reveal{0%,40%{box-shadow:inset 3px 0 0 var(--action-primary)}100%{box-shadow:none}}
.loop__detail.is-revealed,.readout.is-revealed{animation:neo-reveal-bar .7s ease-out}
@keyframes neo-reveal-bar{0%,40%{border-top-color:var(--action-primary)}100%{}}
/* engagements: the panel follows the three tabs directly; "Taught as" moves
beneath it, so a tap on 03 changes what sits right under 03 */
.pg .engA__rail{display:contents}
.pg .engA__rail button{background:var(--surface-page)}
.pg .engA__body{order:1;border-top:var(--neo-border-hair) solid var(--border-subtle)}
.pg .engA .railfoot{order:2;background:var(--surface-page);border-top:var(--neo-border-hair) solid var(--border-subtle)}
/* the Strategy Dynamics model is drawn 1028 units wide; scaled to a phone its
labels fall below 10px. It keeps a readable width and scrolls sideways. */
.pg .fwmain{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.pg .fwmain .fwsvg{min-width:640px}
}
@media(max-width:640px){
/* the Loop's three stages read as a row of tabs, the detail beneath */
.pg .loop-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--neo-space-2xs)}
.pg .loop-list__return{grid-column:1/-1;text-align:center}
}
@media(prefers-reduced-motion:reduce){.is-revealed{animation:none}}
@media(max-width:640px){
/* the hero chart is drawn 858 units wide with its type set inline at 21px in
drawing units; on a phone that is 5–9px on screen. This is the mobile chart
variant: the same drawing with its labels scaled for the width it has.
!important because the size is an inline style on the