/* =====================================================================
   7DaysCare — BOTANICAL GRADIENT (direction, for comparison)
   ---------------------------------------------------------------------
   The colour system of the supplied mockup: a hero that runs warm
   orange through deep teal into navy, botanical leaf silhouettes over
   it, an ivory nav, and a navy call to action.

   Loaded on index.html ONLY, after guides.css and in place of the token
   sheet. Every other page is a different direction. See DESIGN-SYSTEM §7.

   PALETTE, sampled from the mockup
     teal   #204E55    navy  #05284C    warm #854E3A
     glow   #B77E44    ivory #F7F8F3    button navy #022547
     mint   #A0EDC5    leaf orange #CA794B

   EXACT TO THE REFERENCE for the field: teal, navy, the warm corners,
   the ivory nav and the navy action are all sampled from it.

   ONE CHANGE, AND IT UNIFIES THE THEME. The warm accents no longer come
   from the reference's own oranges; they derive from #98452E, the C in
   the logo, so the mark and the interface carry one hue (13 deg).

     #98452E  accent-700   text on light: 6.51 white, 6.10 ivory nav
     #F29F87  accent-300   on dark: 4.16 teal, 6.97 navy, 3.06 warm
     #F5B5A3  accent-200   on dark: 4.95 teal, 8.31 navy, 3.65 warm

   This also closes the legibility question the previous pass left open.
   #98452E itself is 1.33:1 on the teal — invisible, not merely low — so
   it never touches the hero; the 200 and 300 steps carry it there and
   both clear the 3:1 bar display text is held to, with 200 clearing
   body text on teal and navy as well.
   ===================================================================== */

:root {
  --bot-teal:#255258;
  --bot-navy:#042953;
  --bot-warm:#8a503c;
  --bot-glow:#b17c48;
  --bot-ivory:#f7f8f3;
  --bot-button:#01274e;
  --bot-mint:#97efbd;
  /* The mint's dark end. Mint itself is a field colour and 1.36:1 on
     white; these are its text-weight steps, used only by the role
     system below. 5.30 / 7.29 / 10.22 on white. */
  --bot-green-600:#1b7a55; --bot-green-700:#16624a; --bot-green-800:#0f4a37;
  /* THE BRAND ACCENT — the C in the logo. Everything warm derives from it. */
  --bot-brand:#98452e;    /* accent-700. Text on light grounds: 6.51 on white */
  --bot-brand-600:#b6553a;
  --bot-brand-500:#CF5330;
  --bot-brand-400:#E2785A;
  --bot-brand-300:#f29f87; /* hero accent: 4.16 teal, 6.97 navy, 3.06 warm */
  --bot-brand-200:#f5b5a3; /* hero-safe on every stop: 4.95 teal, 8.31 navy, 3.65 warm */
  --bot-tan:var(--bot-brand-300);
  --bot-orange:var(--bot-brand-200);
  --bot-eyebrow:var(--bot-brand-200);
  --bot-tile:#10324b;
  --bot-headline-ink:#0b162a;
  --bot-leaf:var(--bot-brand-500);
  --bot-leaf-ink:var(--bot-brand);  /* #98452E — 6.51 on white, 6.10 on the ivory nav */

  --color-brand-50:#eef3f3;  --color-brand-100:#d2e2e1; --color-brand-200:#a7c6c4;
  --color-brand-300:#6fa3a2; --color-brand-400:#3d7b7c; --color-brand-500:#265c60;
  --color-brand-600:#1b4c52; --color-brand-700:#143c45; --color-brand-800:var(--bot-navy);
  --color-brand-900:#021a33;

  --color-accent-50:#fdf0ec;  --color-accent-100:#fadcd3; --color-accent-200:var(--bot-brand-200);
  --color-accent-300:var(--bot-brand-300); --color-accent-400:var(--bot-brand-400); --color-accent-500:var(--bot-brand-500);
  --color-accent-600:var(--bot-brand-600); --color-accent-700:var(--bot-brand); --color-accent-800:#723422;
  --color-accent-900:#4e2418;
  /* guides.css uses magenta as its third hue, next to blue and emerald.
     Pointing it at the brick would have collapsed two of the three into
     one — .layer-people and .layer-core are drawn from accent-500 and
     magenta-500 and would have come out identical. It takes the green
     instead, and white on #16624A is 7.29:1, where white on the brick
     500 was 4.26 and failed under .replist.is-perf. */
  --color-magenta-500:var(--bot-green-700); --color-magenta-600:var(--bot-green-800);

  --color-neutral-0:#ffffff;  --color-neutral-50:var(--bot-ivory);
  --color-neutral-100:#eef0ea; --color-neutral-200:#e1e4dc; --color-neutral-300:#c9cdc3;
  /* 400 is --color-text-muted, and it lands on seven different washes on
     these pages. At #8D9389 it was 2.69:1 on the darkest of them, which
     is the one real regression dropping the mint token sheet would have
     caused: that sheet had already corrected guides.css's own #97A3B6
     (2.74:1 on white). #656C62 is 5.42 on white and 4.63 on the worst
     wash, so it clears body text everywhere it actually appears. */
  --color-neutral-400:#656c62; --color-neutral-500:#5f665c; --color-neutral-600:#4d554c;
  --color-neutral-700:#39403a; --color-neutral-800:#222a26; --color-neutral-900:#14201f;
  --color-dark-700:var(--bot-teal); --color-dark-800:var(--bot-navy); --color-dark-900:#021a33;

  --color-text-brand:var(--bot-navy);
  --gradient-brand:linear-gradient(118deg, var(--bot-warm) 0%, var(--bot-teal) 46%, var(--bot-navy) 100%);
  --gradient-cta:linear-gradient(118deg, var(--bot-teal), var(--bot-navy));
  --gradient-mark:linear-gradient(135deg, var(--bot-teal), var(--bot-navy));
  --shadow-brand:0 4px 20px rgba(2,37,71,.26);
  --shadow-brand-lg:0 10px 40px rgba(2,37,71,.34);
}

/* ---------------------------------------------------------------- nav */
.nav { background:var(--bot-ivory); border-bottom:1px solid rgba(2,37,71,.08); backdrop-filter:none; }
.mark { width:auto; height:34px; aspect-ratio:auto; border-radius:0; background:none; box-shadow:none; }
.mark img { position:static; width:auto; height:34px; object-fit:contain; background:none; }
.mark-letter { display:none; }
.wm-a { color:var(--bot-navy); }
.wm-b { color:var(--bot-leaf-ink); }

/* --------------------------------------------------------------- hero
   Three layers: the leaf silhouettes, two warm radial glows, and the
   teal-to-navy run underneath. */
.hero,
.bp-head,
.page-head {
  position:relative; color:#fff;
  background:
    radial-gradient(46% 54% at 90% 1%,   rgba(177,124,72,.95) 0%, rgba(177,124,72,0) 64%),
    radial-gradient(56% 62% at -6% 104%, rgba(138,80,60,1) 0%,   rgba(138,80,60,0) 70%),
    radial-gradient(30% 46% at  4% 68%,  rgba(150,88,62,.60) 0%,  rgba(150,88,62,0) 72%),
    linear-gradient(104deg,
      #255258 0%, #245156 38%, #1d4652 56%, #103355 76%, var(--bot-navy) 100%);
}

/* On a phone the band is one column wide, so there is no right margin
   for the glow to sit in — it lands squarely on the headline. It keeps
   its place and loses most of its weight. */
@media (max-width: 780px) {
  .hero, .bp-head, .page-head {
    background:
      linear-gradient(170deg,
        rgba(3,26,40,.58) 0%, rgba(3,26,40,.50) 46%, rgba(3,26,40,.30) 72%, rgba(3,26,40,.12) 100%),
      radial-gradient(60% 34% at 94% 0%,  rgba(177,124,72,.55) 0%, rgba(177,124,72,0) 70%),
      radial-gradient(74% 40% at -8% 104%, rgba(138,80,60,.75) 0%, rgba(138,80,60,0) 72%),
      linear-gradient(150deg,
        #255258 0%, #245156 34%, #1d4652 56%, #103355 78%, var(--bot-navy) 100%);
  }
}
/* guides.css gives .page-head::before three hardcoded glows — emerald,
   magenta and blue, none of which exist in this palette. The leaf layer
   replaces them outright rather than sitting over them. */
.hero::before,
.bp-head::before,
.page-head::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  color:#ffffff; opacity:.13;
  background-image:url('leaves.svg');
  background-size:1120px 1120px;
  -webkit-mask-image:radial-gradient(130% 115% at 8% 86%, #000 0%, #000 38%, rgba(0,0,0,.35) 68%, rgba(0,0,0,0) 92%);
          mask-image:radial-gradient(130% 115% at 8% 86%, #000 0%, #000 38%, rgba(0,0,0,.35) 68%, rgba(0,0,0,0) 92%);
  display:block;
}
.hero > *, .bp-head > *, .page-head > * { position:relative; z-index:1; }

/* The headline and the lede are already held to 20ch and 60ch. The
   eyebrow and the breadcrumb were not, so on a wide screen a long one
   ran the full 1280px and out the far side of the scrim, into the
   glow — "SECURITY AND PRIVACY LAW · UNITED STATES, EUROPEAN UNION,
   UNITED KINGDOM" ended on a #75614D pixel at 3.36:1. Capping them is
   the fix and the better setting: a 1280px line of 12px uppercase was
   not a line anybody was going to read as one. */
.bp-head .eyebrow, .page-head .eyebrow, .hero .eyebrow,
.bp-head .crumbs,  .page-head .crumbs,  .hero .crumbs { max-width:62ch; }

/* Held to that width, the breadcrumb sits on the pure teal, where
   blueprints.css's rgba(255,255,255,.62) is 4.45:1 — a hair under the
   4.5 bar at --text-sm. .68 is 5.02 and still reads as a step quieter
   than the headline, which is the only thing the transparency is for. */
.bp-head .crumbs, .bp-head .crumbs a,
.page-head .crumbs, .page-head .crumbs a { color:rgba(255,255,255,.68); }
.hero h1, .hero h2 { color:#fff; }
.hero .lede, .hero p { color:rgba(255,255,255,.88); }
/* blueprints.css ends the band with a 4px rule in --gradient-brand,
   which here is the hero's own warm-to-navy run. It sits on top of the
   leaves, so it needs the same z-index they were lifted above. */
.bp-head::after { z-index:2; }
.eyebrow { color:var(--bot-brand); }  /* below the fold, on light: 6.51 on white */
/* ...but #98452E is 1.33:1 on the teal. Inside any dark band it is the
   200 step instead. blueprints.css already does this for .bp-head; the
   other two bands need saying. */
.hero .eyebrow, .page-head .eyebrow, .bp-head .eyebrow { color:var(--bot-eyebrow); }

/* The headline accents, both derived from the logo's #98452E. At display
   size the bar is 3:1, and both steps clear it on every stop of the
   gradient — see the note at the top of this file. */
.grad-text {
  background:linear-gradient(96deg, var(--bot-brand-300) 0%, var(--bot-brand-200) 72%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .tone-mint { color:var(--bot-mint); }

/* The glass panel on the right. */
.hero-panel {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(14px); box-shadow:0 20px 60px rgba(2,20,40,.35);
}

/* ------------------------------------------------------------ buttons */
.btn-primary { background:var(--bot-button); color:#fff; box-shadow:var(--shadow-brand); }
.btn-primary:hover { background:#03356a; color:#fff; filter:none; }
.btn-ghost.on-dark { background:transparent; border-color:rgba(255,255,255,.55); color:#fff; }
.btn-ghost.on-dark:hover { border-color:#fff; color:#fff; }
.btn-ghost:hover { border-color:var(--bot-leaf); color:var(--bot-leaf-ink); }

/* ------------------------------------------------------------- body */
body { background:#fff; }
.stat::before, .cat-card::after { background:linear-gradient(90deg, var(--bot-teal), var(--bot-leaf)); }
.stat-num { background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--bot-headline-ink); }
.icon-tile, .panel-icon { background:var(--bot-tile); box-shadow:none; }
.hero-panel .icon-tile svg, .hero-panel .panel-icon svg { color:var(--bot-mint); }
.footer { background:var(--bot-navy); }
.footer .mark { display:none; }
.footer-brand .wm-a { color:#fff; }
.footer-brand .wm-b { color:var(--bot-brand-300); }

a:focus-visible, button:focus-visible, .btn:focus-visible {
  outline:3px solid var(--bot-mint); outline-offset:2px;
}
::selection { background:var(--bot-mint); color:var(--bot-navy); }

/* =====================================================================
   BELOW THE FOLD — the 22 content pages
   ---------------------------------------------------------------------
   index.html is a hero page; every other page opens on .bp-head and is
   built from blueprints.css and architecture.css. Both of those are
   token-driven, so the ramp above recolours almost all of it. What
   follows is the remainder: the handful of places that were written
   against the mint system's own variables, and the role system.
   ===================================================================== */

/* The lockup. 7Days navy, Care #98452E — the colour break falls on the
   word join, which is where the eye needs to split the name. */
.brand { gap:var(--space-3); }
.wordmark { font-weight:800; letter-spacing:-.01em; }

/* btn-invert sits on the dark band, so it is the page's ground inverted
   and carries navy text at 14.51:1. */
.btn-invert { background:#fff; color:var(--bot-navy); }
.btn-invert:hover { background:var(--bot-ivory); color:var(--bot-navy); }

/* ------------------------------------------------------------- roles --
   blueprints.css gives each page a --role on <body> and drives its
   rules, numbers, lane headers and section markers from it. Those
   values were the mint system's, and three of them (lilac, pink wash,
   crimson) have no place in this palette.

   Re-expressed in the four families this theme actually has: teal,
   navy, brick and the mint's dark end. Eleven pages over four hues
   means some pages share one — they are never on screen together, and
   the page says which it is in its own title. What matters is that
   --role is legible, because .tick time and .rib em set it at
   --text-xs on white, where the bar is 4.5:1:

     brick-600  #B6553A .... 4.83    teal-500  #265C60 .... 7.55
     brick-700  #98452E .... 6.51    teal-600  #1B4C52 .... 9.54
     green-700  #16624A .... 7.29    navy-700  #143C45 ... 11.92

   The old --role: accent-500 was #CF5330 here, which is 4.26 — large
   text only, and .tick time is not large text. */
body { --role:var(--color-brand-500); --role-soft:#eef3f3; --role-line:#a7c6c4; --role-deep:var(--color-brand-800); }
body.role-client, body.role-eu {
  --role:var(--color-accent-600); --role-soft:#fdf0ec; --role-line:#f5b5a3; --role-deep:var(--color-accent-800); }
body.role-expert, body.role-uk {
  --role:var(--bot-green-700); --role-soft:#e8f6ee; --role-line:#a9dcc1; --role-deep:var(--bot-green-800); }
body.role-admin, body.role-us {
  --role:var(--color-brand-500); --role-soft:#eef3f3; --role-line:#a7c6c4; --role-deep:var(--color-brand-800); }
body.role-accountant, body.role-de {
  --role:var(--color-brand-700); --role-soft:#e9eef0; --role-line:#bcccce; --role-deep:var(--color-brand-900); }
body.role-security {
  --role:var(--color-brand-600); --role-soft:#eef3f3; --role-line:#a7c6c4; --role-deep:var(--color-brand-900); }
body.role-au {
  --role:var(--color-accent-700); --role-soft:#fdf0ec; --role-line:#f5b5a3; --role-deep:var(--color-accent-900); }
body.role-ca {
  --role:var(--bot-green-600); --role-soft:#e8f6ee; --role-line:#a9dcc1; --role-deep:var(--bot-green-800); }

/* The free-module tag was mint-green on the published system. Here it
   belongs to the brick family: #723422 on #FDF0EC is 8.45:1. */
.mtag.is-free { background:var(--color-accent-50); color:var(--color-accent-800); border-color:var(--color-accent-200); }

/* ------------------------------------------------------------ crisis --
   Offered, not applied — no page on this site carries a standing crisis
   block, but dropping the mint token sheet would silently remove the
   component. Deep teal field, mint label (9.23:1 on it), never
   dismissible and never animated. */
.crisis { background:#19383a; color:#f3f6f2; border-radius:var(--radius-xl); padding:var(--space-5); }
.crisis .label { color:var(--bot-mint); font-weight:700; font-size:var(--text-xs);
                 letter-spacing:var(--tracking-widest); text-transform:uppercase; }
.crisis a { color:var(--bot-mint); }

/* Focus is always visible, including on the language switch. */
.lang:focus-visible { outline:3px solid var(--bot-mint); outline-offset:2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; }
}

/* ------------------------------------------------------- status marks --
   blueprints.css draws the built / partly / configured / law / not-built
   marks out of the brand ramps. On the site this came from, the accent
   ramp was emerald, so "built" read green and the meaning came free.
   Here the accent ramp is brick, and swapping the sheet underneath
   turned the positive mark warm — "built" started reading as a warning
   while "partly built" read as the reassuring one. That is the meaning
   inverted, not a tint shifted.

   So these five stop taking the brand ramp. A status colour is not a
   brand colour: it answers a question about the thing it marks, and it
   has to answer the same way whichever direction wins. Measured on
   their own grounds, all well past the 4.5:1 body bar:

     built     #15624A on #E2F3EA ... 6.34
     partly    #143C45 on #E4EDEE .. 10.02
     yours     #8A5300 on #FDF0DA ... 5.62  (unchanged)
     narrower  #4A3C7A on #ECE9F7 ... 7.92
     not built  inherits the neutral ramp                                */
.mark-yes  { background:#e2f3ea; color:#15624a; }
.mark-part { background:#e4edee; color:#143c45; }
.mark-law  { background:#ece9f7; color:#4a3c7a; }

/* ----------------------------------------------------- the four layers --
   architecture.css names a colour per layer and sets it as --text-xs
   uppercase in .layer-badge, where the bar is 4.5:1. accent-500 is 4.26
   there, so the people layer moves one step down the same ramp; the
   others follow the remapped ramps above and already clear it.

     people  #B6553A ... 4.83    core  #16624A ... 7.29
     gateway #265C60 ... 7.55    data  #5F665C ... 5.93                 */
.layer-people { --layer-accent:var(--color-accent-600); }
/* guides.css draws the same four layers on the home page, and there the
   colour is a filled badge carrying white. Same step, same reason. */
.ms-1 { --ms-accent:var(--color-accent-600); }