/* =========================================================================
   aula.care — design system

   AULACARE has no logo and no brand book. The specification says so outright
   (docs/reference/09-design-system-and-themes.md, §1): the identity is carried
   by "colour, type, spacing and iconography". So this file does not invent a
   look for the product — it PUBLISHES the one the product already has.

   Three facts follow from that, and everything below is one of them.

     the circle      the mark is a broken ring of four arcs around a core: four
                     people holding one student. It has no corner anywhere, so
                     neither does the site. `pill` is the default shape axis,
                     and every panel, chip and control is round-ended unless a
                     reviewer asks otherwise.
     four palettes   the six themes here are not decoration. Four of them ARE
                     the product's four bundled palettes (calm-clinical,
                     warm-human, inclusive-education, enterprise-health), the
                     fifth is its dark mode and the sixth its WCAG-AAA
                     high-contrast ground. A prospect switching the theme in
                     the header is operating the same control their staff will
                     operate in the application.
     nothing colour-only
                     §6 of the spec: "never encode meaning in colour alone".
                     Every status pill, every effectiveness bar and every
                     reaction on this site carries an icon or a word beside its
                     colour, because the product promises that and a marketing
                     site that breaks the promise is an argument against
                     itself.

   THE RULE OF THIS FILE. Nothing below the token block contains a raw colour.
   Everything is a custom property, so a theme is one block of redefinitions
   and the twenty other axes compose freely with it. What the axes are, and
   what the site opens as, is NOT written here: assets/config/appearance.json
   is the single source.

   TYPE IS IN rem, NOT px. That is what makes the text-size axis real: it moves
   the root font size and everything follows, up to 1.5x, which is the reflow
   target the spec sets (§6, "must reflow without clipping up to 1.5x").
   Spacing stays in px on purpose — growing the gaps with the letters is how a
   scaled page ends up with three words per screen.
   ========================================================================= */

/* ---------------------------------------------------------------- fonts ---- */
/* Self-hosted, both of them: the site loads no font from a CDN, which is also
   why it needs no cookie banner — see the privacy notice. Two subsets each with
   the ranges Google publishes, so a Latin page never fetches the extended cut. */
@font-face {
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/figtree-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Figtree';
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url('../fonts/figtree-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/newsreader-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
		U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
		U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/newsreader-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------- palette --- */
:root {
	/* CARE BLUE — the product's default primary, #005E76, and the ramp built
	   around it so a theme can be composed without ever inventing a colour. */
	--care-50:  #eaf6f7;   /* Mist Blue — the calm-clinical background */
	--care-100: #d3ebef;
	--care-200: #a6d3dc;
	--care-300: #6db2c3;
	--care-400: #2e8ba4;
	--care-500: #0d7089;
	--care-600: #005e76;   /* the product value — Deep Medical Blue */
	--care-700: #004a5e;
	--care-800: #003949;
	--care-900: #0e1b1f;   /* the dark-mode ground from spec §4 */
	--care-950: #081114;

	/* TEAL — #279A84, the product's secondary. Care, not clinic. */
	--teal-100: #dff2ed;
	--teal-200: #a9ddd1;
	--teal-300: #63c1ad;
	--teal-400: #279a84;   /* the product value — Care Teal */
	--teal-500: #1d7a68;
	--teal-600: #145c4e;

	/* AMBER — #F7AC11, the accent AULACARE inherits from the house brand. */
	--amber-100: #fdf0d2;
	--amber-200: #fbdc98;
	--amber-300: #f9c452;
	--amber-400: #f7ac11;  /* the product value — Warm Orange */
	--amber-500: #d18d05;
	--amber-600: #a06b00;
	--amber-700: #6d4900;

	/* SLATE — the neutral. Charcoal #263238 is the product's text colour and
	   the bottom of this ramp. */
	--slate-50:  #f4f7f8;
	--slate-100: #e7edef;
	--slate-200: #ccd7db;
	--slate-300: #a3b3ba;
	--slate-400: #6f8289;
	--slate-500: #54666d;
	--slate-600: #3e4f56;
	--slate-700: #2f3d43;
	--slate-800: #263238;  /* the product value — Charcoal */
	--slate-900: #171f23;

	/* type.
	   The site's faces are subset to latin and latin-ext. Font fallback is per
	   glyph, so Latin copy renders in Figtree while anything else falls through
	   to the reader's system faces — named rather than left to chance. */
	--stack-sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		Helvetica, Arial, 'Noto Sans', sans-serif;
	--stack-serif: 'Newsreader', Georgia, 'Times New Roman', 'Noto Serif', serif;
	--sans: var(--stack-sans);
	/* the technical voice: endpoint samples, hashes, permission codes, figures
	   in a statistic. System faces only — a mono web font would be a third
	   download for text measured in dozens of characters. */
	--mono: ui-monospace, 'SFMono-Regular', 'JetBrains Mono', 'Cascadia Mono',
		Menlo, Consolas, 'Liberation Mono', monospace;

	/* --surface-3 is dark in every theme, so what sits on it is always light.
	   That is not a per-theme decision, so it does not live in a theme. */
	--on-dark: #ffffff;

	/* shape. The mark has no corner, so neither does anything here; the shape
	   axis is what lets a reviewer see the alternative. --radius-img is its own
	   token deliberately: deriving it from --radius means squaring the panels
	   squares every picture with them, and the two stop being independent. */
	--radius:      18px;
	--radius-sm:   12px;
	--radius-lg:   28px;
	--radius-img:  18px;
	--radius-card: 18px;
	--radius-pill: 999px;

	--wrap:        1240px;
	--wrap-narrow: 760px;
	--ease:        cubic-bezier(.22,.61,.36,1);
	--ease-out:    cubic-bezier(.16,1,.3,1);

	/* vertical rhythm — the density axis moves both */
	--sec-pad: 104px;
	--sec-gap: 34px;

	/* THE SEMANTIC SET, from the specification (06-ui-ux.md, "Design system"):
	   success #16A34A, warning #F59E0B, error #DC2626, info #0EA5E9. They are
	   the same four in the application, which is the point — a status pill on
	   this page and a status pill in the product are the same object. */
	--ok:    #15803d;  --ok-soft:   #dcfce7;  --on-ok:   #ffffff;
	--warn:  #b45309;  --warn-soft: #fef3c7;  --on-warn: #ffffff;
	--bad:   #b91c1c;  --bad-soft:  #fee2e2;  --on-bad:  #ffffff;
	--info:  #0369a1;  --info-soft: #e0f2fe;  --on-info: #ffffff;

	/* THE LIFECYCLE, from 01-general-rules.md: 0 Draft, 1 Active, 2 Suspended,
	   3 Closed, 10 Deleted. One colour each, everywhere, and never alone — the
	   pill carries the word too. */
	--st-draft:     var(--slate-400);
	--st-active:    var(--ok);
	--st-suspended: var(--warn);
	--st-closed:    var(--care-500);
	--st-deleted:   var(--bad);

	/* THE HEALTH-CARE AREAS, from 06-ui-ux.md "Visual language": Medical blue,
	   Psychological purple, Sports green, Nutrition teal, General grey. A DXS
	   row, a RECO row and a CPRA bar all carry the HCA's colour in the product;
	   the same five are used on #/platform so the page shows the real thing. */
	--hca-med:  #2563eb;
	--hca-psy:  #7c3aed;
	--hca-spo:  #16a34a;
	--hca-nut:  #0d9488;
	--hca-gen:  #64748b;

	/* paper grain — one inline turbulence tile, reused by the `wash` texture */
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------- media ink tokens --
   The --on-media-* set is the ink the see-through header wears while it floats
   over the hero. A light theme draws a light hero, so there it is the theme's
   own ink; a dark theme draws a dark one, so there it is white. Getting this
   wrong is invisible in the theme you are working in and total in the other. */
:root {
	--on-media:         var(--ink);
	--on-media-2:       var(--ink-2);
	--on-media-muted:   var(--muted);
	--on-media-line:    var(--line);
	--on-media-surface: var(--surface-2);
}
[data-theme='night'] {
	--on-media:         var(--on-dark);
	--on-media-2:       rgba(255,255,255,.86);
	--on-media-muted:   rgba(255,255,255,.68);
	--on-media-line:    rgba(255,255,255,.24);
	--on-media-surface: rgba(255,255,255,.12);
}

/* ================================ THEMES =================================
   Four of the six are the product's own bundled palettes, hex for hex from
   docs/reference/09-design-system-and-themes.md §3. The fifth is its dark mode
   (§4), the sixth its high-contrast layer (§5). Nothing here was designed for
   this website; all of it was already the product's. */

/* --------------------------------------- theme: calm  (calm-clinical) ------
   The default, in the application and here. It is also the palette that agrees
   with the house brand — #005E76 / #279A84 / #F7AC11 are Nusoft's own. */
:root,
[data-theme='calm'] {
	--bg:          #eaf6f7;
	--bg-2:        #ddeef1;
	--surface:     #ffffff;
	--surface-2:   #f2f9fa;
	--surface-3:   var(--care-800);
	--ink:         #1b2a30;
	--ink-2:       var(--care-700);
	--muted:       #566a72;
	--line:        #d3e4e8;
	--line-strong: #b3ced5;

	--brand:        var(--care-600);
	--brand-strong: var(--care-700);
	--brand-soft:   var(--care-50);
	--on-brand:     #ffffff;

	--second:       var(--teal-500);
	--second-soft:  var(--teal-100);
	--on-second:    #ffffff;

	/* The eyebrows are 12px, uppercase and tracked out — the least legible text
	   on the site — and they sit on the SOFTEST ground the theme has, not on
	   white. So --accent is the deepest step of the amber ramp and the bright
	   value lives in --accent-lit, for the places that fill rather than write.
	   Measured: amber-600 came out at 4.14:1 on --bg, which is a fail nobody
	   sees until somebody with low vision tries to read a section label. */
	--accent:       var(--amber-700);
	--accent-lit:   var(--amber-400);   /* the same colour where it may glow */
	--accent-soft:  var(--amber-100);
	--on-accent:    #3a2800;

	--code:        var(--care-700);
	--scrim:       linear-gradient(180deg, rgba(0,58,73,.06), rgba(0,58,73,0));
	--shadow:      0 26px 60px -32px rgba(0,58,73,.34);
	--shadow-sm:   0 10px 26px -16px rgba(0,58,73,.3);
	--texture-op:  .05;
	--grain-op:    .02;
	color-scheme: light;
}

/* ---------------------------------------- theme: warm  (warm-human) --------
   "Less hospital, more student support / family / inclusion", as the source
   palette file puts it. This is the one to show a parents' association. */
[data-theme='warm'] {
	--bg:          #fff7e8;
	--bg-2:        #f9edd8;
	--surface:     #fffdf8;
	--surface-2:   #fbf3e4;
	--surface-3:   #1f3a3b;
	--ink:         #2f3a40;
	--ink-2:       #1b565a;
	--muted:       #6a6255;
	--line:        #ebdfc9;
	--line-strong: #d9c8ab;

	--brand:        #167a7f;            /* Deep Empathy Teal */
	--brand-strong: #0f5c60;
	--brand-soft:   #e2f1f1;
	--on-brand:     #ffffff;

	--second:       #4b8a58;            /* Support Green, deepened for AA */
	--second-soft:  #e4f0e5;
	--on-second:    #ffffff;

	--accent:       #7a5400;            /* Soft Amber, deepened to clear AA on cream */
	--accent-lit:   #f4b84a;
	--accent-soft:  #fbeccc;
	--on-accent:    #33230a;

	--code:        #0f5c60;
	--scrim:       linear-gradient(180deg, rgba(47,58,64,.06), rgba(47,58,64,0));
	--shadow:      0 26px 60px -32px rgba(74,58,30,.28);
	--shadow-sm:   0 10px 26px -16px rgba(74,58,30,.24);
	--texture-op:  .05;
	--grain-op:    .035;
	color-scheme: light;
}

/* --------------------------- theme: inclusive  (inclusive-education) -------
   The student-centred one: mint and a purple that means inclusion. The source
   file recommends this or calm-clinical, and this is the one to show a school
   whose buyer is a coordinator rather than a clinician. */
[data-theme='inclusive'] {
	--bg:          #f5f8fa;
	--bg-2:        #e9eff4;
	--surface:     #ffffff;
	--surface-2:   #f1f5f9;
	--surface-3:   #1c3b49;
	--ink:         #2d3748;
	--ink-2:       #1f5a72;
	--muted:       #5b6b7c;
	--line:        #dde5eb;
	--line-strong: #c2d0da;

	--brand:        #256d85;            /* Aula Blue */
	--brand-strong: #1a5568;
	--brand-soft:   #e6f0f4;
	--on-brand:     #ffffff;

	--second:       #2f8f66;            /* Wellness Mint, deepened for AA */
	--second-soft:  #ddf3e8;
	--on-second:    #ffffff;

	--accent:       #5b3ce0;            /* Inclusion Purple */
	--accent-lit:   #7a5cfa;
	--accent-soft:  #ece7fe;
	--on-accent:    #ffffff;

	--code:        #1a5568;
	--scrim:       linear-gradient(180deg, rgba(45,55,72,.06), rgba(45,55,72,0));
	--shadow:      0 26px 60px -32px rgba(30,48,66,.3);
	--shadow-sm:   0 10px 26px -16px rgba(30,48,66,.26);
	--texture-op:  .05;
	--grain-op:    .018;
	color-scheme: light;
}

/* --------------------------- theme: enterprise  (enterprise-health) --------
   "Sober and enterprise-ready… if AULACARE is sold to institutions, governments
   or large school networks." Which is exactly who reads #/plans. */
[data-theme='enterprise'] {
	--bg:          #f4f7fa;
	--bg-2:        #e8eef4;
	--surface:     #ffffff;
	--surface-2:   #eff3f8;
	--surface-3:   #16324f;
	--ink:         #16324f;
	--ink-2:       #1d4269;
	--muted:       #55677d;
	--line:        #dbe3ec;
	--line-strong: #bfcbd9;

	--brand:        #16324f;            /* Institutional Navy */
	--brand-strong: #0e2338;
	--brand-soft:   #e7ecf3;
	--on-brand:     #ffffff;

	--second:       #14776c;            /* Professional Teal, deepened for AA */
	--second-soft:  #d9f0ed;
	--on-second:    #ffffff;

	--accent:       #1f5fd8;            /* Action Blue, deepened for AA */
	--accent-lit:   #3a86ff;
	--accent-soft:  #e2ecfe;
	--on-accent:    #ffffff;

	--code:        #1d4269;
	--scrim:       linear-gradient(180deg, rgba(22,50,79,.07), rgba(22,50,79,0));
	--shadow:      0 26px 60px -32px rgba(22,50,79,.32);
	--shadow-sm:   0 10px 26px -16px rgba(22,50,79,.28);
	--texture-op:  .05;
	--grain-op:    .016;
	color-scheme: light;
}

/* ------------------------------------------------------------ theme: night --
   Dark mode, built to §4's rules rather than by inverting: a near-black
   derived from the primary's hue, a lightened primary that still clears 4.5:1
   on it, and borders instead of shadows — a shadow on a dark ground is not
   visible and pretending otherwise is how dark modes go flat. */
[data-theme='night'] {
	--bg:          #0e1b1f;
	--bg-2:        #0a1417;
	--surface:     #13262b;
	--surface-2:   #183038;
	--surface-3:   #081114;
	--ink:         #e7eef0;
	--ink-2:       #bcd4da;
	--muted:       #9db0b5;
	--line:        rgba(255,255,255,.12);
	--line-strong: rgba(255,255,255,.24);

	--brand:        #39a7be;
	--brand-strong: #6fc7d8;
	--brand-soft:   rgba(57,167,190,.14);
	--on-brand:     #04222b;

	--second:       #57c9b0;
	--second-soft:  rgba(87,201,176,.14);
	--on-second:    #04241e;

	--accent:       #f9c452;
	--accent-lit:   #f9c452;
	--accent-soft:  rgba(249,196,82,.16);
	--on-accent:    #35240a;

	--ok:    #4ade80;  --ok-soft:   rgba(74,222,128,.16);  --on-ok:   #052e16;
	--warn:  #fbbf24;  --warn-soft: rgba(251,191,36,.16);  --on-warn: #3b2506;
	--bad:   #f87171;  --bad-soft:  rgba(248,113,113,.16); --on-bad:  #3f0a0a;
	--info:  #38bdf8;  --info-soft: rgba(56,189,248,.16);  --on-info: #062b3f;

	--code:        var(--care-200);
	--scrim:       linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,0));
	--shadow:      0 30px 70px -36px rgba(0,0,0,.85);
	--shadow-sm:   0 12px 30px -20px rgba(0,0,0,.75);
	--texture-op:  .07;
	--grain-op:    .05;
	color-scheme: dark;
}

/* --------------------------------------------------------- theme: contrast --
   §5 of the spec, on a website. Body text at 7:1 or better, borders that are
   always 2px and always visible, and nothing that relies on elevation. This is
   not a novelty axis: a proportion of the people who will read this page use
   exactly this setting every day, and a company selling them accessible
   software should be legible to them on the way in. */
[data-theme='contrast'] {
	--bg:          #ffffff;
	--bg-2:        #ffffff;
	--surface:     #ffffff;
	--surface-2:   #ffffff;
	--surface-3:   #000000;
	--ink:         #000000;
	--ink-2:       #000000;
	--muted:       #1f1f1f;
	--line:        #000000;
	--line-strong: #000000;

	--brand:        #00404f;
	--brand-strong: #000000;
	--brand-soft:   #ffffff;
	--on-brand:     #ffffff;

	--second:       #005c4a;
	--second-soft:  #ffffff;
	--on-second:    #ffffff;

	--accent:       #6b3d00;
	--accent-lit:   #6b3d00;
	--accent-soft:  #ffffff;
	--on-accent:    #ffffff;

	--ok:    #00551f;  --ok-soft:   #ffffff;  --on-ok:   #ffffff;
	--warn:  #6b3d00;  --warn-soft: #ffffff;  --on-warn: #ffffff;
	--bad:   #8a0000;  --bad-soft:  #ffffff;  --on-bad:  #ffffff;
	--info:  #00405f;  --info-soft: #ffffff;  --on-info: #ffffff;

	--st-draft: #1f1f1f;  --st-active: #00551f;  --st-suspended: #6b3d00;
	--st-closed: #00404f; --st-deleted: #8a0000;

	--code:        #00404f;
	--scrim:       none;
	--shadow:      none;
	--shadow-sm:   none;
	--texture-op:  0;
	--grain-op:    0;
	color-scheme: light;
}

/* Borders carry the whole structure when nothing else may. */
[data-theme='contrast'] .card,
[data-theme='contrast'] .panel,
[data-theme='contrast'] .btn,
[data-theme='contrast'] .chip,
[data-theme='contrast'] .pill,
[data-theme='contrast'] input,
[data-theme='contrast'] textarea,
[data-theme='contrast'] .pick-control,
[data-theme='contrast'] .tool-btn,
[data-theme='contrast'] .tool-menu { border-width: 2px !important; border-style: solid; }
[data-theme='contrast'] .site-header { border-bottom-width: 2px; }

/* Windows High Contrast / forced-colors: hand the whole palette to the OS.
   Anything that draws with a background image (the textures, the hero wash) is
   turned off — forced colours replace the ink and the ground but not a picture,
   so an image left on is the one thing that can still be unreadable. */
@media (forced-colors: active) {
	:root {
		--bg: Canvas; --bg-2: Canvas; --surface: Canvas; --surface-2: Canvas;
		--ink: CanvasText; --ink-2: CanvasText; --muted: CanvasText;
		--line: CanvasText; --line-strong: CanvasText;
		--brand: LinkText; --on-brand: Canvas; --brand-soft: Canvas;
		--accent: LinkText; --accent-soft: Canvas; --on-accent: Canvas;
		--second: LinkText; --second-soft: Canvas; --on-second: Canvas;
		--shadow: none; --shadow-sm: none;
	}
	body::before, body::after, .hero-art { display: none !important; }
	.card, .panel, .btn, .chip, .pill { border: 1px solid CanvasText; }
}

/* ================================= AXES ==================================
   Each is one attribute on <html>, they all compose, and adding one is a rule
   here plus an entry in appearance.json — no JavaScript at all. */

/* ------------------------------------------------------------ data-scale ---
   The accessibility axis that matters most and is offered least. It moves the
   ROOT font size; every size in this file is in rem, so the whole page follows
   — including the header, which is the thing most implementations forget and
   which is where a low-vision reader is trying to find the menu. */
:root { font-size: 100%; }
[data-scale='s112'] { font-size: 112.5%; }
[data-scale='s125'] { font-size: 125%; }
[data-scale='s150'] { font-size: 150%; }

/* ------------------------------------------------------------- data-font ---- */
:root { --head: var(--stack-sans); }
[data-font='serif'] { --head: var(--stack-serif); }
[data-font='serif'] h1,
[data-font='serif'] h2,
[data-font='serif'] h3,
[data-font='serif'] .display { letter-spacing: -.005em; font-weight: 500; }

/* ------------------------------------------------------------ data-shape ---- */
[data-shape='soft']   { --radius-pill: 12px; --radius: 14px; --radius-sm: 9px; --radius-lg: 20px; }
[data-shape='square'] { --radius-pill: 2px;  --radius: 3px;  --radius-sm: 2px; --radius-lg: 4px; }

/* ------------------------------------------------------------- data-card ---- */
[data-card='card-sharp'] { --radius-card: 3px; }

/* -------------------------------------------------------------- data-pad ---- */
:root             { --btn-pad: 14px 24px; --btn-pad-sm: 9px 16px; }
[data-pad='small'] { --btn-pad: 11px 19px; --btn-pad-sm: 8px 13px; }
[data-pad='xs']    { --btn-pad: 8px 15px;  --btn-pad-sm: 6px 11px; }

/* ---------------------------------------------------------- data-density ---- */
[data-density='tight'] { --sec-pad: 68px; --sec-gap: 24px; }

/* ------------------------------------------------------------- data-rule ---- */
[data-rule='line'] section + section { border-top: 1px solid var(--line); }

/* ------------------------------------------------------------ data-headw ---- */
[data-headw='narrow'] .section-head { max-width: 660px; }

/* -------------------------------------------------------------- data-num ---- */
[data-num='hide'] .num { display: none; }

/* ----------------------------------------------------------- data-navcta ---- */
[data-navcta='plain'] .nav-cta {
	background: none;
	color: inherit;
	border-color: transparent;
	padding: 10px 12px;
}
[data-navcta='plain'] .nav-cta .ico { display: none; }

/* ------------------------------------------------------------- data-fill ---- */
[data-fill='hollow'] .btn-primary {
	background: none;
	color: var(--brand);
	border: 1px solid var(--brand);
}
[data-fill='hollow'] .btn-primary:hover { background: var(--brand-soft); }

/* ----------------------------------------------------------- data-border ---- */
[data-border='underline'] .btn { border-color: transparent; border-radius: 0; }
[data-border='underline'] .btn-ghost { border-bottom: 2px solid var(--line-strong); }
[data-border='underline'] .btn-ghost:hover { border-bottom-color: var(--brand); }

/* ----------------------------------------------------------- data-motion ---
   The switch and the media query both land here, and app.js also reads the
   attribute so JavaScript-driven motion stops with the CSS kind. Two
   independent paths to the same state, because a visitor who set it in the OS
   and a visitor who set it in the menu are the same visitor to this rule. */
[data-motion='still'] *,
[data-motion='still'] *::before,
[data-motion='still'] *::after {
	animation-duration: .001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: .001ms !important;
	scroll-behavior: auto !important;
}
[data-motion='still'] .marquee-track { animation: none; transform: none; }

/* ---------------------------------------------------------- data-texture ---
   The fixed layer behind everything. `wash` is the default: two very soft
   radial pools in the brand and the secondary, which is the nearest a flat
   colour system gets to warmth without a photograph. There is no stock
   photography anywhere on this site, and that is deliberate — the alternative
   for a special-needs product is a picture of a child, and using one to sell
   software is a decision nobody should make lightly. */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background: var(--bg);
}
body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: var(--texture-op);
	background-image: none;
}
[data-texture='dots'] body::after {
	opacity: calc(var(--texture-op) * 2.4);
	background-image: radial-gradient(currentColor 1px, transparent 1px);
	background-size: 22px 22px;
	color: var(--ink);
}
[data-texture='lattice'] body::after {
	opacity: calc(var(--texture-op) * 1.8);
	background-image:
		linear-gradient(to right, currentColor 1px, transparent 1px),
		linear-gradient(to bottom, currentColor 1px, transparent 1px);
	background-size: 44px 44px;
	color: var(--ink);
}
[data-texture='wash'] body::after {
	opacity: 1;
	background-image:
		radial-gradient(58vw 44vw at 82% -8%, var(--brand-soft), transparent 68%),
		radial-gradient(50vw 40vw at 6% 8%, var(--second-soft), transparent 66%),
		var(--grain);
	background-repeat: no-repeat, no-repeat, repeat;
	background-size: auto, auto, 180px 180px;
}
/* The wash paints from a background IMAGE, so it does not answer --texture-op
   the way the other three do — it has to be turned off by name. Two places
   need that and both are correctness rather than taste: the high-contrast
   ground must be the pure white it promises, and a forced-colours desktop
   replaces ink and ground but never a picture (see the forced-colors block
   above). */
[data-texture='wash'][data-theme='night'] body::after {
	opacity: .62;
	background-image:
		radial-gradient(58vw 44vw at 82% -8%, var(--brand-soft), transparent 68%),
		radial-gradient(50vw 40vw at 6% 8%, var(--second-soft), transparent 66%);
}
[data-theme='contrast'] body::after { display: none; }
/* And the decoration goes with it. The ring is aria-hidden and every word in
   it is also in the copy, so nothing is lost — while a pale figure behind the
   text is precisely what somebody asking for high contrast asked not to have. */
[data-theme='contrast'] .hero-art { display: none; }

/* ================================= BASE ================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[data-motion='still'] html { scroll-behavior: auto; }

body {
	margin: 0;
	font-family: var(--sans);
	font-size: 1.0625rem;         /* 17px at the default root */
	line-height: 1.62;
	color: var(--ink);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

h1, h2, h3, h4 {
	font-family: var(--head);
	margin: 0 0 .5em;
	line-height: 1.14;
	letter-spacing: -.018em;
	font-weight: 700;
	text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 1.4rem + 3.2vw, 4rem); }
h2 { font-size: clamp(1.75rem, 1.25rem + 1.7vw, 2.6rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--brand-strong); }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
li { margin: 0 0 .4em; }
strong, b { font-weight: 700; }
small { font-size: .82em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
img, svg, video { max-width: 100%; }
code, kbd, .mono { font-family: var(--mono); font-size: .88em; color: var(--code); }

/* FOCUS IS NEVER REMOVED, ONLY RESTYLED — 09 §5 and 06 "Accessibility". Two
   pixels of the accent with two of offset, the same ring the product uses. */
:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 4px;
}
[data-theme='contrast'] :focus-visible { outline-width: 3px; }

::selection { background: var(--brand); color: var(--on-brand); }

.skip-link {
	position: absolute;
	left: 12px;
	top: -60px;
	z-index: 200;
	padding: 12px 20px;
	background: var(--brand);
	color: var(--on-brand);
	border-radius: var(--radius-pill);
	font-weight: 600;
	transition: top .16s var(--ease);
}
.skip-link:focus { top: 12px; color: var(--on-brand); }

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

/* ================================ LAYOUT ================================= */
.wrap { width: min(100% - 44px, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 44px, var(--wrap-narrow)); margin-inline: auto; }

.nw-view { min-height: 60vh; }
.nw-loading { display: grid; place-items: center; min-height: 60vh; }
.spinner {
	width: 34px; height: 34px;
	border: 3px solid var(--line);
	border-top-color: var(--brand);
	border-radius: 50%;
	animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

section { padding: var(--sec-pad) 0; position: relative; }
.band-soft { background: var(--surface-2); }
.band-brand {
	background: var(--surface-3);
	color: var(--on-dark);
	--ink: var(--on-dark);
	--ink-2: rgba(255,255,255,.88);
	--muted: rgba(255,255,255,.7);
	--line: rgba(255,255,255,.18);
	--line-strong: rgba(255,255,255,.3);
	--surface: rgba(255,255,255,.07);
	--surface-2: rgba(255,255,255,.11);
	--brand: #ffffff;
	--on-brand: var(--care-800);
	--brand-soft: rgba(255,255,255,.14);
	--accent: var(--amber-300);
}
/* :not(.btn) is load-bearing. A context rule like `.band-brand a` is one class
   and one element (0,1,1) and outweighs `.btn-primary` (0,1,0), so a button
   dropped into this band silently loses its own ink and comes out white on
   white. Exclude buttons here rather than fighting it in the button rules,
   which would make every future band repeat the same escape. */
.band-brand a:not(.btn) { color: #fff; }

.section-head { max-width: 780px; margin-bottom: var(--sec-gap); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-bottom: .32em; }

.eyebrow {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 .7em;
}
.lead { font-size: 1.15rem; color: var(--ink-2); margin-bottom: 0; }
.muted { color: var(--muted); }
.center { text-align: center; }

.grid-2 { display: grid; gap: 22px; grid-template-columns: repeat(2, 1fr); }
.grid-3 { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); }
.grid-4 { display: grid; gap: 18px; grid-template-columns: repeat(4, 1fr); }
.stack { display: grid; gap: 16px; }

/* A band whose heading stays put while its content scrolls past it. */
.band-split { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.35fr); gap: 52px; }
.band-split .band-head { position: sticky; top: 108px; align-self: start; }

/* =============================== CHROME ================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 90;
	/* TRANSPARENT UNTIL SCROLLED, and that is a fix rather than a preference.
	   A translucent ground here is `--bg` at 88% painted ON TOP of the page's
	   own texture, which dilutes the grain — so at scroll-top the bar came out
	   measurably lighter than the band beneath it and left a hard horizontal
	   seam across the page. Nothing is under the bar before the visitor
	   scrolls, so nothing has to be painted over. */
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: border-color .2s var(--ease), background .2s var(--ease);
}
.site-header.scrolled {
	border-bottom-color: var(--line);
	background: color-mix(in srgb, var(--bg) 94%, transparent);
	backdrop-filter: saturate(140%) blur(12px);
}
.header-inner { display: flex; align-items: center; gap: 18px; height: 78px; }

/* --------------------------------------------------------------- the lockup */
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; flex: none; }
:root { --logo-scale: 1; }
[data-logo-size='sm'] { --logo-scale: .84; }
[data-logo-size='lg'] { --logo-scale: 1.2; }
.brand svg {
	width: calc(34px * var(--logo-scale));
	height: calc(34px * var(--logo-scale));
	color: var(--brand);
	flex: none;
}
.brand-word {
	font-family: var(--head);
	font-size: calc(1.36rem * var(--logo-scale));
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1;
	white-space: nowrap;
}
/* "aula" is the room, "care" is what happens in it. Two weights, one word. */
.brand-word i { font-style: normal; font-weight: 500; opacity: .96; }
.brand-word b { font-weight: 800; color: var(--brand); }
[data-logo-lock='lock-mark'] .brand-word { display: none; }
.brand:hover .mark-spin { transform: rotate(90deg); }
.mark-spin { transition: transform .5s var(--ease-out); transform-origin: 50% 50%; }

/* ------------------------------------------------------------------- nav ---- */
.site-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.site-nav a {
	position: relative;
	padding: 10px 13px;
	border-radius: var(--radius-pill);
	color: var(--ink-2);
	text-decoration: none;
	font-size: .95rem;
	font-weight: 600;
	white-space: nowrap;
}
.site-nav a:hover { color: var(--ink); background: var(--brand-soft); }
.site-nav a.active { color: var(--brand); }
.site-nav a.active::after {
	content: '';
	position: absolute;
	left: 13px; right: 13px; bottom: 4px;
	height: 2px;
	border-radius: 2px;
	background: var(--accent);
}
.nav-cta.active::after { display: none; }
/* `.site-nav a` is one class AND one element, so it outweighs `.btn-primary`
   and the call to action loses its own ink — dark teal on dark teal. Say it
   again at the same weight. This is the single most common way a button
   dropped into a nav stops looking like a button. */
.site-nav a.nav-cta { color: var(--on-brand); }
.site-nav a.nav-cta:hover { color: var(--on-brand); background: var(--brand-strong); }

.header-tools { display: flex; align-items: center; gap: 6px; }
.tool { position: relative; }
.tool-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink-2);
	border-radius: var(--radius-pill);
	font: inherit;
	font-size: .88rem;
	font-weight: 600;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.tool-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.tool-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 10px);
	min-width: 220px;
	max-height: min(74vh, 620px);
	overflow: auto;
	padding: 12px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	display: none;
	z-index: 95;
}
.tool-menu.open { display: block; }
.tool-menu.wide { min-width: min(88vw, 640px); columns: 2; column-gap: 20px; }
.tool-block { break-inside: avoid; margin-bottom: 14px; }
.tool-block.full { column-span: all; }
.tool-group {
	margin: 0 0 6px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
}
.tool-menu button,
.tool-menu label {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	background: none;
	color: var(--ink);
	border-radius: var(--radius-sm);
	font: inherit;
	font-size: .92rem;
	text-align: left;
	cursor: pointer;
}
.tool-menu button:hover,
.tool-menu label:hover { background: var(--surface-2); }
.tool-menu button[aria-checked='true'] { color: var(--brand); font-weight: 700; }
.tool-menu button[aria-checked='true']::after { content: '✓'; margin-left: auto; }

/* The swatch beside a value. One rule per value, which is why appearance.json
   insists every value is unique across the axes. */
.swatch {
	width: 15px; height: 15px;
	border-radius: 50%;
	border: 1px solid var(--line-strong);
	flex: none;
	background: var(--surface-2);
}
.swatch-calm       { background: linear-gradient(135deg, #005e76 50%, #eaf6f7 50%); }
.swatch-warm       { background: linear-gradient(135deg, #167a7f 50%, #fff7e8 50%); }
.swatch-inclusive  { background: linear-gradient(135deg, #256d85 50%, #7a5cfa 50%); }
.swatch-enterprise { background: linear-gradient(135deg, #16324f 50%, #3a86ff 50%); }
.swatch-night      { background: linear-gradient(135deg, #39a7be 50%, #0e1b1f 50%); }
.swatch-contrast   { background: linear-gradient(135deg, #000 50%, #fff 50%); }
.swatch-s100::after, .swatch-s112::after, .swatch-s125::after, .swatch-s150::after {
	display: block; text-align: center; line-height: 13px; font-weight: 800; color: var(--ink);
}
.swatch-s100 { font-size: 8px; }  .swatch-s100::after { content: 'A'; }
.swatch-s112 { font-size: 9px; }  .swatch-s112::after { content: 'A'; }
.swatch-s125 { font-size: 11px; } .swatch-s125::after { content: 'A'; }
.swatch-s150 { font-size: 13px; } .swatch-s150::after { content: 'A'; }

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 42px; height: 40px;
	padding: 0 9px;
	border: 1px solid var(--line);
	background: var(--surface);
	border-radius: var(--radius-pill);
	cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }

/* --------------------------------------------- the see-through header ------
   data-immersive runs the hero up behind the bar. A request, not a result:
   app.js decides, because only a view that OPENS with a hero can honour it —
   over a heading the bar would sit on the title. The header redefines its ink
   ON ITSELF so the lockup, the links and the tool buttons all follow with no
   further rules; the dropdown panels take the theme's colours back, since they
   are solid panels hanging off a see-through bar. */
.has-immersive .site-header {
	position: fixed;
	left: 0; right: 0;
	background: transparent;
	backdrop-filter: none;
	--ink: var(--on-media);
	--ink-2: var(--on-media-2);
	--muted: var(--on-media-muted);
	--line: var(--on-media-line);
	--surface: var(--on-media-surface);
	color: var(--on-media);
}
.has-immersive .site-header.scrolled {
	position: sticky;
	background: color-mix(in srgb, var(--bg) 96%, transparent);
	backdrop-filter: saturate(140%) blur(12px);
	--ink: initial; --ink-2: initial; --muted: initial;
	--line: initial; --surface: initial;
	color: var(--ink);
}
.has-immersive .tool-menu {
	background: var(--surface-root);
	color: var(--ink-root);
	border-color: var(--line-root);
}
:root { --surface-root: var(--surface); --ink-root: var(--ink); --line-root: var(--line); }

/* ---------------------------------------------------------------- footer ---- */
.site-footer { background: var(--surface-3); color: var(--on-dark); padding: 68px 0 34px; }
.site-footer a:not(.btn) { color: rgba(255,255,255,.82); text-decoration: none; }
.site-footer a:not(.btn):hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; }
.footer-brand .brand { color: #fff; }
.footer-brand .brand svg { color: #fff; }
.footer-brand .brand-word b { color: var(--amber-300); }
.footer-brand p { color: rgba(255,255,255,.72); margin-top: 14px; max-width: 34ch; }
.footer-col h4 { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: .5em; }
.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 26px;
	align-items: center;
	margin-top: 46px;
	padding-top: 22px;
	border-top: 1px solid rgba(255,255,255,.14);
	color: rgba(255,255,255,.6);
	font-size: .86rem;
}
.footer-bottom .spacer { margin-left: auto; }
.social { display: flex; gap: 8px; }
.social-link {
	display: grid;
	place-items: center;
	width: 38px; height: 38px;
	border: 1px solid rgba(255,255,255,.22);
	border-radius: 50%;
	color: rgba(255,255,255,.84);
}
.social-link:hover { background: rgba(255,255,255,.12); color: #fff; }

/* =============================== CONTROLS ================================ */
.ico { width: 1.05em; height: 1.05em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ico-fill { fill: currentColor; stroke: none; }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: var(--btn-pad);
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font: inherit;
	font-size: .97rem;
	font-weight: 700;
	line-height: 1.15;
	text-decoration: none;
	cursor: pointer;
	transition: transform .16s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn-sm { padding: var(--btn-pad-sm); font-size: .88rem; }
.btn-primary { background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brand-strong); color: var(--on-brand); }
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface-2); color: var(--ink); border-color: var(--brand); }
.btn-plain { background: none; color: var(--brand); padding-inline: 4px; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .55; pointer-events: none; }

.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--surface);
	font-size: .8rem;
	font-weight: 600;
	color: var(--ink-2);
	white-space: nowrap;
}
/* --brand-strong, not --brand: "strong" is defined per theme as the brand
   pushed FURTHER FROM THE GROUND — darker under a light theme, lighter under a
   dark one — which is exactly what a small label on a tinted fill needs. Using
   --brand here reads fine in calm and fails in warm and in night. */
.chip-soft { background: var(--brand-soft); border-color: transparent; color: var(--brand-strong); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* STATUS PILLS. The lifecycle from the spec, and never colour alone: the dot
   is the colour, the word is the meaning, and removing the colour entirely
   leaves the pill still readable. */
.pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 12px 4px 9px;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--surface);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .01em;
	white-space: nowrap;
}
.pill::before {
	content: '';
	width: 9px; height: 9px;
	border-radius: 50%;
	background: var(--dot, var(--muted));
	flex: none;
}
.pill-draft     { --dot: var(--st-draft); }
.pill-active    { --dot: var(--st-active); }
.pill-suspended { --dot: var(--st-suspended); }
.pill-closed    { --dot: var(--st-closed); }
.pill-deleted   { --dot: var(--st-deleted); }

.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	padding: 26px;
	position: relative;
	transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.card-lift:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: var(--shadow); }
.card h3 { margin-bottom: .4em; }
.card p:last-child { margin-bottom: 0; }

.panel {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	padding: 30px;
}

.num {
	font-family: var(--mono);
	font-size: .78rem;
	font-weight: 700;
	color: var(--accent);
	letter-spacing: .06em;
}

.ico-badge {
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	border-radius: 50%;
	background: var(--brand-soft);
	color: var(--brand);
	margin-bottom: 16px;
	flex: none;
}
.ico-badge .ico { width: 22px; height: 22px; }
.ico-badge-accent { background: var(--accent-soft); color: var(--accent); }
.ico-badge-second { background: var(--second-soft); color: var(--second); }

/* ================================= HERO ================================== */
.hero {
	position: relative;
	min-height: 78vh;
	display: flex;
	align-items: center;
	padding-top: calc(var(--sec-pad) + 54px);
	padding-bottom: calc(var(--sec-pad) + 10px);
	overflow: hidden;
}
.hero-inner { position: relative; z-index: 2; max-width: 780px; }
.hero h1 { margin-bottom: .32em; }
.hero .hl { color: var(--brand); }
.hero .lead { font-size: clamp(1.05rem, .98rem + .4vw, 1.28rem); max-width: 62ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-note { margin-top: 18px; font-size: .88rem; color: var(--muted); }

.hero-art {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}
/* Pushed off the right edge on purpose: the ring is a texture behind the
   words, not a picture beside them, and the copy column has to be able to run
   to its natural measure without the core disc landing in the middle of a
   sentence. */
.hero-art svg { position: absolute; right: -7%; top: 50%; transform: translateY(-50%); width: min(50vw, 660px); height: auto; }
.hero-art .ring-arc { fill: none; stroke: var(--brand); stroke-width: 8; opacity: .16; stroke-linecap: round; }
.hero-art .ring-arc.lit { stroke: var(--accent); opacity: .34; }
.hero-art .ring-core { fill: var(--brand); opacity: .14; }
.hero-art .ring-node { fill: var(--surface); stroke: var(--brand); stroke-width: 2; opacity: .5; }
.hero-art .ring-label { fill: var(--ink-2); font-family: var(--sans); font-size: 13px; font-weight: 700; opacity: .5; }
.hero-art .flow-line { stroke: var(--brand); stroke-width: 2; fill: none; opacity: .22; stroke-dasharray: 5 7; }
.hero-art .flow-box { fill: var(--surface); stroke: var(--brand); stroke-width: 1.6; opacity: .5; }
.hero-art .flow-tag { fill: var(--ink-2); font-family: var(--sans); font-size: 12px; font-weight: 700; opacity: .55; }

/* The ring turns, once, slowly, on arrival — the only animation on the page
   that is not a fade. It is the mark doing what the mark means. */
.hero-art .ring-turn { transform-origin: 50% 50%; animation: ringIn 1.5s var(--ease-out) both; }
@keyframes ringIn { from { transform: rotate(-42deg) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }

.hero-stats { display: flex; flex-wrap: wrap; gap: 26px 44px; margin-top: 46px; }
.hero-stat b { display: block; font-family: var(--head); font-size: 2rem; line-height: 1; letter-spacing: -.03em; }
.hero-stat span { display: block; margin-top: 6px; font-size: .84rem; color: var(--muted); }

/* =============================== MARQUEE ================================= */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 15px 0; background: var(--surface-2); }
.marquee-track { display: flex; gap: 44px; width: max-content; animation: slide 46s linear infinite; }
.marquee-item { display: inline-flex; align-items: center; gap: 12px; color: var(--muted); font-size: .92rem; font-weight: 600; white-space: nowrap; }
.marquee-item::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* =============================== THE LOOP ================================
   The five stations of a care plan: identify, diagnose, recommend, adjust,
   measure. It is drawn as a numbered ladder rather than as a circle, because
   the one thing every school gets wrong is that it ends — the loop closes when
   somebody reports whether the adjustment worked. */
.loop { display: grid; gap: 0; counter-reset: loop; }
.step {
	display: grid;
	grid-template-columns: 74px 1fr minmax(0, 320px);
	gap: 8px 26px;
	padding: 26px 0;
	border-top: 1px solid var(--line);
	align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step-n {
	display: grid;
	place-items: center;
	width: 52px; height: 52px;
	border-radius: 50%;
	border: 1px solid var(--line-strong);
	background: var(--surface);
	font-family: var(--mono);
	font-weight: 700;
	color: var(--brand);
	grid-row: span 2;
}
.step h3 { margin-bottom: .25em; }
.step p { margin: 0; color: var(--ink-2); }
.step-note {
	grid-column: 3;
	grid-row: 1 / span 2;
	font-size: .88rem;
	color: var(--muted);
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px 16px;
}
.step-note b { color: var(--ink); }
.step:hover .step-n { border-color: var(--brand); background: var(--brand-soft); }

/* ============================ CARD FAMILIES ============================== */
/* A capability / module card. */
.cap { display: flex; flex-direction: column; }
.cap .num { position: absolute; top: 20px; right: 22px; }
.cap h3 { font-size: 1.15rem; }
.cap p { color: var(--ink-2); font-size: .97rem; }
.cap ul { list-style: none; padding: 0; margin: 14px 0 0; }
.cap ul li { position: relative; padding-left: 22px; font-size: .92rem; color: var(--muted); margin-bottom: .38em; }
.cap ul li::before {
	content: '';
	position: absolute;
	left: 2px; top: .55em;
	width: 8px; height: 8px;
	border-radius: 50%;
	border: 2px solid var(--second);
}
.cap-foot { margin-top: auto; padding-top: 18px; }

/* The problem cards — deliberately plainer than the solution cards beside
   them. A page that dresses up the problem is selling anxiety. */
.prob { border-style: dashed; background: none; }
.prob h3 { font-size: 1.05rem; color: var(--ink); }
.prob p { color: var(--muted); font-size: .95rem; margin: 0; }

/* A role: who they are, what their day looks like, what they never see.
   The whole card is a link, so it has to give the link styling back — an
   underlined paragraph inside a card reads as a broken page, not as a target. */
.role { display: grid; gap: 6px; color: var(--ink); text-decoration: none; }
.role:hover { color: var(--ink); }
.role h3 { color: var(--brand); }
.role p { color: var(--ink-2); font-size: .96rem; margin: 0; }
.role-head { display: flex; align-items: center; gap: 14px; }
.role-code {
	font-family: var(--mono);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .1em;
	padding: 3px 9px;
	border-radius: var(--radius-pill);
	background: var(--brand-soft);
	color: var(--brand-strong);
}
.role-block { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px; align-items: start; }
.role-block .panel { background: var(--surface-2); }
.role-list { list-style: none; padding: 0; margin: 0; }
.role-list li { position: relative; padding-left: 30px; margin-bottom: .85em; color: var(--ink-2); }
.role-list li::before {
	content: '';
	position: absolute;
	left: 0; top: .38em;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--second-soft);
	border: 1px solid var(--second);
}
.role-list li::after {
	content: '';
	position: absolute;
	left: 6px; top: .72em;
	width: 6px; height: 3px;
	border-left: 2px solid var(--second);
	border-bottom: 2px solid var(--second);
	transform: rotate(-45deg);
}
.role-never { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--line-strong); }
.role-never p { font-size: .92rem; color: var(--muted); margin: 0; }
.role-never b { color: var(--ink); }

/* The three gates that stand between a user and a record. */
.layer { display: grid; grid-template-columns: 58px 1fr; gap: 20px; align-items: start; padding: 24px 0; border-top: 1px solid var(--line); }
.layer:last-child { border-bottom: 1px solid var(--line); }
.layer-n {
	display: grid;
	place-items: center;
	width: 46px; height: 46px;
	border-radius: 50%;
	background: var(--brand);
	color: var(--on-brand);
	font-family: var(--mono);
	font-weight: 700;
}
.layer h3 { font-size: 1.08rem; margin-bottom: .3em; }
.layer p { margin: 0; color: var(--ink-2); }

/* A glossary row — #/piar leans on these, because half of selling this product
   is agreeing on what the words mean. */
.term { display: grid; grid-template-columns: 190px 1fr; gap: 6px 26px; padding: 16px 0; border-top: 1px solid var(--line); }
.term:last-child { border-bottom: 1px solid var(--line); }
.term dt { font-weight: 700; color: var(--ink); }
.term dt small { display: block; font-family: var(--mono); font-weight: 600; color: var(--accent); font-size: .74rem; letter-spacing: .06em; margin-top: 3px; }
.term dd { margin: 0; color: var(--ink-2); }

/* A KPI / evidence figure. */
.kpi { text-align: center; padding: 26px 18px; }
.kpi b { display: block; font-family: var(--head); font-size: clamp(1.9rem, 1.3rem + 1.6vw, 2.8rem); line-height: 1; letter-spacing: -.03em; color: var(--brand); }
.kpi span { display: block; margin-top: 10px; font-size: .9rem; color: var(--muted); }

/* A plan / engagement card. */
.plan { display: flex; flex-direction: column; gap: 4px; }
.plan-tag { align-self: flex-start; margin-bottom: 12px; }
.plan h3 { font-size: 1.3rem; margin-bottom: .2em; }
.plan-for { color: var(--muted); font-size: .92rem; margin-bottom: 18px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 20px; }
.plan ul li { position: relative; padding-left: 24px; margin-bottom: .5em; font-size: .95rem; color: var(--ink-2); }
.plan ul li::before { content: '+'; position: absolute; left: 4px; top: -1px; color: var(--second); font-weight: 800; }
.plan .btn { margin-top: auto; }
.plan-featured { border-color: var(--brand); box-shadow: var(--shadow); }
.plan-featured .plan-tag { background: var(--brand); color: var(--on-brand); border-color: transparent; }

/* An integration row. */
.integ { display: grid; grid-template-columns: 46px 1fr auto; gap: 18px; align-items: center; padding: 20px 0; border-top: 1px solid var(--line); }
.integ:last-child { border-bottom: 1px solid var(--line); }
.integ h3 { font-size: 1.02rem; margin: 0 0 .2em; }
.integ p { margin: 0; font-size: .93rem; color: var(--muted); }
.integ .dir { font-family: var(--mono); font-size: .76rem; color: var(--accent); white-space: nowrap; }

/* A frequently-asked question. <details> so it works with no JavaScript. */
.faq { border-top: 1px solid var(--line); }
.faq:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 20px 0;
	cursor: pointer;
	font-weight: 700;
	font-size: 1.03rem;
	list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
	content: '';
	margin-left: auto;
	width: 10px; height: 10px;
	border-right: 2px solid var(--brand);
	border-bottom: 2px solid var(--brand);
	transform: rotate(45deg);
	transition: transform .2s var(--ease);
	flex: none;
}
.faq[open] summary::after { transform: rotate(-135deg); }
.faq p { margin: 0 0 20px; color: var(--ink-2); max-width: 74ch; }

/* THE HCA SWATCHES. One colour and one icon per health-care area, exactly as
   the product uses them. Colour is never the only carrier — the name is right
   there. */
.hca { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); font-size: .9rem; font-weight: 600; }
.hca i { width: 12px; height: 12px; border-radius: 50%; background: var(--hca); flex: none; }
.hca-med { --hca: var(--hca-med); }
.hca-psy { --hca: var(--hca-psy); }
.hca-spo { --hca: var(--hca-spo); }
.hca-nut { --hca: var(--hca-nut); }
.hca-gen { --hca: var(--hca-gen); }

/* THE REACTION BAR. Ten of them, in the two groups the spec describes —
   workflow on the left, supportive on the right — because a care team that
   includes a frightened parent needs a way to say "we're with you" that is not
   a thumbs-up. */
.reactions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.reaction {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 15px 8px 11px;
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	background: var(--surface);
	font-size: .88rem;
	font-weight: 600;
}
.reaction em { font-style: normal; font-size: 1.12rem; line-height: 1; }
.reaction-sep { width: 1px; align-self: stretch; background: var(--line-strong); margin-inline: 8px; }

/* THE EFFECTIVENESS BAR. Five steps, red to green, and the label beside it —
   "never just a number", per the spec. */
.eff { display: flex; align-items: center; gap: 12px; }
.eff-bar { display: flex; gap: 4px; }
.eff-bar i { width: 26px; height: 9px; border-radius: 5px; background: var(--line); }
.eff-bar i.on { background: var(--eff, var(--ok)); }
.eff-1 { --eff: #b91c1c; } .eff-2 { --eff: #c2410c; } .eff-3 { --eff: #b45309; }
.eff-4 { --eff: #4d7c0f; } .eff-5 { --eff: #15803d; }
.eff span { font-size: .88rem; font-weight: 600; color: var(--ink-2); }

/* THE CHAIN. The signature feature, drawn: four sealed links and one that is
   not. It is the only diagram on the site that argues rather than illustrates. */
.chain { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.link {
	flex: 1 1 150px;
	padding: 18px 16px;
	border: 1px solid var(--line);
	background: var(--surface);
	position: relative;
}
.link:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.link:last-child  { border-radius: 0 var(--radius) var(--radius) 0; }
.link + .link { border-left: 0; }
.link b { display: block; font-size: .9rem; margin-bottom: 4px; }
.link code { display: block; font-size: .74rem; color: var(--muted); word-break: break-all; }
.link-seal { position: absolute; top: 12px; right: 12px; color: var(--ok); }
.link-broken { border-color: var(--bad); background: var(--bad-soft); }
.link-broken .link-seal { color: var(--bad); }
.link-broken code { color: var(--bad); }

/* ============================ THE A11Y BAND ==============================
   The band that sells the accessibility story by BEING it. The controls in it
   are the real appearance axes, not a picture of them, so a visitor changes
   the whole page from inside the argument for changing the whole page. */
.a11y-demo { display: grid; gap: 18px; }
.a11y-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.a11y-row > span { font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); min-width: 120px; }
.a11y-set { display: flex; flex-wrap: wrap; gap: 6px; }
.a11y-set button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border: 1px solid var(--line-strong);
	background: var(--surface);
	color: var(--ink);
	border-radius: var(--radius-pill);
	font: inherit;
	font-size: .88rem;
	font-weight: 600;
	cursor: pointer;
}
.a11y-set button:hover { border-color: var(--brand); }
.a11y-set button[aria-pressed='true'] { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }

/* =============================== CTA BAND ================================ */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 20ch; margin-inline: auto; }
.cta-band .lead { max-width: 60ch; margin: 0 auto 30px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ================================ FORMS ================================== */
.contact-split { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.85fr); gap: 46px; align-items: start; }
.field { margin-bottom: 20px; }
.field label { display: block; font-size: .88rem; font-weight: 700; margin-bottom: 7px; }
.field .hint { display: block; font-weight: 400; color: var(--muted); font-size: .84rem; margin-top: 3px; }
.field input,
.field textarea,
.field select {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--ink);
	font: inherit;
	font-size: .98rem;
}
.field textarea { min-height: 160px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--brand); }
.field-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.field-err { color: var(--bad); font-size: .86rem; margin-top: 6px; display: none; }
.field.has-err input, .field.has-err textarea { border-color: var(--bad); }
.field.has-err .field-err { display: block; }
/* the honeypot: a field a human never sees and never fills */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: .86rem; color: var(--muted); margin-top: 14px; }
.form-msg { margin-top: 18px; padding: 16px 20px; border-radius: var(--radius); display: none; }
.form-msg.on { display: block; }
.form-msg.ok  { background: var(--ok-soft);  color: var(--ok);  border: 1px solid var(--ok); }
.form-msg.bad { background: var(--bad-soft); color: var(--bad); border: 1px solid var(--bad); }

.contact-line { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line); }
.contact-line:last-child { border-bottom: 1px solid var(--line); }
.contact-line b { display: block; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.contact-line a, .contact-line span { color: var(--ink); text-decoration: none; font-weight: 600; }

/* ------------------------------------------------------------- nw_picker ---
   The framework's dropdown, in this site's tokens. A native <select> stays the
   source of truth underneath and still fires `change`, so nothing that listens
   to it had to change. The control keeps the silhouette of the .field input it
   replaces, so the form does not jump when the script upgrades it. */
.pick { position: relative; display: block; text-align: left; max-width: 100%; }
.pick-source { display: none !important; }
/* set by nw_picker while one of the band's menus is open — every section is a
   stacking context of its own, so the band has to be lifted above the ones
   that follow it or the menu is painted over. Still below the header (90). */
section.has-open-pick { z-index: 40; }

.pick-control {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-height: 50px;
	padding: 9px 16px;
	background: var(--surface);
	color: var(--ink);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius);
	font: inherit;
	font-size: .98rem;
	text-align: left;
	cursor: pointer;
	transition: border-color .2s linear, box-shadow .2s linear;
}
.pick-control:hover { border-color: var(--brand); }
.pick.is-open .pick-control,
.pick-control:focus-visible {
	border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--brand-soft);
	outline: none;
}
.pick-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-caret { width: 15px; height: 15px; flex: none; color: var(--muted); transition: transform .2s var(--ease); }
.pick.is-open .pick-caret { transform: rotate(180deg); }

.pick-control-multi { flex-wrap: wrap; cursor: text; padding: 5px 14px 5px 8px; }
.pick-many { min-width: 220px; }
.pick-tags { display: contents; }
.pick-tag {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	max-width: 15rem;
	padding: 4px 4px 4px 11px;
	border-radius: var(--radius-pill);
	background: var(--brand-soft);
	color: var(--brand);
	font-size: .78rem;
	font-weight: 700;
}
.pick-tag-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-tag-x {
	flex: none;
	border: 0;
	padding: 0;
	width: 19px; height: 19px;
	cursor: pointer;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 1.05rem;
	line-height: 1;
	opacity: .65;
}
.pick-tag-x:hover { opacity: 1; background: color-mix(in srgb, var(--brand) 22%, transparent); }
.pick-input {
	flex: 1 1 7ch;
	min-width: 6ch;
	border: 0; outline: 0;
	padding: 6px 2px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: .95rem;
}
.pick-input::placeholder { color: var(--muted); opacity: 1; }

.pick-menu {
	position: absolute;
	left: 0;
	top: calc(100% + 6px);
	z-index: 90;
	width: max-content;
	min-width: 100%;
	max-width: calc(100vw - 16px);
	max-height: 320px;
	overflow-y: auto;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 6px;
}
.pick-up .pick-menu { top: auto; bottom: calc(100% + 6px); }

.pick-search {
	display: flex;
	align-items: center;
	gap: 9px;
	position: sticky;
	top: -6px;
	margin: -6px -6px 6px;
	padding: 12px 14px;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}
.pick-search svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.pick-search-input {
	flex: 1;
	border: 0; outline: 0;
	background: transparent;
	font: inherit;
	font-size: .92rem;
	color: var(--ink);
	min-width: 0;
}

.pick-option {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	padding: 9px 12px;
	border-radius: var(--radius-sm);
	font-size: .93rem;
	color: var(--ink-2);
}
.pick-option:hover, .pick-option.is-active { background: var(--surface-2); color: var(--ink); }
.pick-option[aria-selected='true'] { color: var(--brand); font-weight: 700; }
.pick-option-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-check { width: 15px; height: 15px; flex: none; color: var(--brand); opacity: 0; }
.pick-option[aria-selected='true'] .pick-check { opacity: 1; }
.pick-empty { margin: 0; padding: 14px 12px; color: var(--muted); font-size: .88rem; }

/* ============================== JUMP RAIL ================================ */
.jump-rail {
	position: fixed;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 60;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.jump-dot {
	position: relative;
	width: 10px; height: 10px;
	padding: 0;
	border: 1px solid var(--line-strong);
	border-radius: 50%;
	background: var(--surface);
	cursor: pointer;
}
.jump-dot.on { background: var(--brand); border-color: var(--brand); transform: scale(1.25); }
.jump-dot span {
	position: absolute;
	right: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
	padding: 5px 11px;
	background: var(--surface-3);
	color: var(--on-dark);
	border-radius: var(--radius-pill);
	font-size: .78rem;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .16s var(--ease);
}
.jump-dot:hover span, .jump-dot:focus-visible span { opacity: 1; }

/* ================================ LEGAL ================================== */
.legal-block { padding: 26px 0; border-top: 1px solid var(--line); }
.legal-block h3 { font-size: 1.1rem; }
.legal-block p { color: var(--ink-2); margin: 0; max-width: 78ch; }

/* ============================== REVEAL =================================== */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.rv.in { opacity: 1; transform: none; }
[data-motion='still'] .rv { opacity: 1; transform: none; }

/* --------------------------------------------------------- text animation --
   The looks half of assets/js/nw_anim.js. That file decides WHEN something
   plays and hands over --anim-dur for the pass and --d for this letter's
   delay. A new effect is one keyframe block and one class, no JS change. */
.nw-anim { display: inline-block; }
.nw-anim-w { white-space: nowrap; }
.nw-anim[data-anim-when*="click"] { cursor: pointer; }
.nw-anim[data-anim-when*="click"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.nw-anim-c { display: inline-block; font-style: inherit; will-change: transform, opacity, color; }

.nw-anim-typewritter.is-anim .nw-anim-c { opacity: 0; animation: nwType .001s linear var(--d, 0s) forwards; }
@keyframes nwType { to { opacity: 1; } }

.nw-anim-change-color.is-anim .nw-anim-c { animation: nwColor var(--anim-dur, .6s) ease-in-out var(--d, 0s) both; }
@keyframes nwColor { 40% { color: var(--c, var(--accent)); } 60% { color: var(--c, var(--accent)); } to { color: inherit; } }

.nw-anim-bend.is-anim .nw-anim-c { animation: nwBend var(--anim-dur, .6s) ease-in-out var(--d, 0s) both; }
@keyframes nwBend { 40% { transform: translateY(-.24em) rotate(-6deg); } to { transform: none; } }

.nw-anim-flip.is-anim .nw-anim-c { animation: nwFlip var(--anim-dur, .6s) ease-in-out var(--d, 0s) both; }
@keyframes nwFlip { 50% { transform: rotateX(-90deg); } to { transform: none; } }

.nw-anim-rise.is-anim .nw-anim-c { animation: nwRise var(--anim-dur, .6s) var(--ease) var(--d, 0s) both; }
@keyframes nwRise { from { transform: translateY(.7em); opacity: 0; } to { transform: none; opacity: 1; } }

.nw-anim-blur.is-anim .nw-anim-c { animation: nwBlur var(--anim-dur, .6s) ease-out var(--d, 0s) both; }
@keyframes nwBlur { from { filter: blur(8px); opacity: 0; } to { filter: none; opacity: 1; } }

.nw-anim-tilt.is-anim { animation: nwTilt var(--anim-dur, .6s) ease-in-out both; transform-origin: left center; }
@keyframes nwTilt { 35% { transform: rotate(-2.2deg) scale(1.03); } to { transform: none; } }

.nw-anim-shine.is-anim {
	background: linear-gradient(100deg,
		currentColor 0%, currentColor 38%,
		color-mix(in srgb, var(--accent) 55%, #fff) 50%,
		currentColor 62%, currentColor 100%);
	background-size: 300% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: nwShine var(--anim-dur, 1.8s) linear both;
}
@keyframes nwShine { from { background-position: 120% 0; } to { background-position: -60% 0; } }

@media (prefers-reduced-motion: reduce) {
	.nw-anim, .nw-anim-c { animation: none !important; opacity: 1 !important; }
	.nw-anim-shine.is-anim { background: none; -webkit-text-fill-color: currentColor; }
	.rv { opacity: 1; transform: none; }
	.hero-art .ring-turn { animation: none; }
}

/* ============================= RESPONSIVE ================================ */
@media (max-width: 1180px) {
	.band-split { grid-template-columns: 1fr; gap: 30px; }
	.band-split .band-head { position: static; }
	.role-block { grid-template-columns: 1fr; gap: 26px; }
	.contact-split { grid-template-columns: 1fr; gap: 34px; }
	.grid-4 { grid-template-columns: repeat(2, 1fr); }
	.hero-art svg { right: -18%; opacity: .8; }
	.jump-rail { display: none; }
}

@media (max-width: 980px) {
	.grid-3 { grid-template-columns: repeat(2, 1fr); }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.step { grid-template-columns: 62px 1fr; }
	.step-note { grid-column: 1 / -1; grid-row: auto; margin-top: 12px; }
}

@media (max-width: 860px) {
	/* The nav becomes a sheet under the bar. It takes the theme's own surface
	   back, because on an immersive page the header is wearing the hero's ink
	   and a panel that inherits it is white text on a white sheet. */
	.site-nav {
		position: fixed;
		inset: 70px 0 auto;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
		padding: 16px 22px 26px;
		background: var(--surface-root);
		color: var(--ink-root);
		border-bottom: 1px solid var(--line-root);
		box-shadow: var(--shadow);
		display: none;
		max-height: calc(100vh - 70px);
		overflow: auto;
	}
	.site-nav.open { display: flex; }
	.site-nav a { padding: 13px 12px; font-size: 1rem; color: var(--ink-root); }
	.site-nav a.active::after { display: none; }
	.nav-cta { margin: 8px 0 0; justify-content: center; }
	.nav-toggle { display: flex; }
	.header-inner { height: 70px; }

	:root { --sec-pad: 66px; }
	.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
	.field-2 { grid-template-columns: 1fr; }
	.term { grid-template-columns: 1fr; }
	.integ { grid-template-columns: 40px 1fr; }
	.integ .dir { grid-column: 2; }
	.hero { min-height: 0; padding-top: calc(var(--sec-pad) + 46px); }
	.hero-art svg { right: -34%; top: 78%; width: 92vw; opacity: .5; }
	.chain { display: grid; grid-template-columns: 1fr; }
	.link, .link:first-child, .link:last-child { border-radius: var(--radius); border-left: 1px solid var(--line); }
	.link + .link { margin-top: -1px; }
	.tool-menu.wide { columns: 1; min-width: min(92vw, 340px); }
	.tool-menu { right: -8px; }
	.a11y-row > span { min-width: 100%; }
}

@media (max-width: 560px) {
	.wrap, .wrap-narrow { width: calc(100% - 32px); }
	.card, .panel { padding: 22px; }
	.footer-grid { grid-template-columns: 1fr; }
	.hero-stats { gap: 20px 30px; }
	.brand-word { font-size: calc(1.15rem * var(--logo-scale)); }
}

/* ================================ PRINT ================================== */
@media print {
	.site-header, .site-footer, .jump-rail, .skip-link, .hero-art, .marquee { display: none !important; }
	body { background: #fff; color: #000; font-size: 11pt; }
	section { padding: 18pt 0; break-inside: avoid; }
	.card, .panel { border: 1pt solid #999; box-shadow: none; break-inside: avoid; }
	a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}