/* ============================================================================
   MIMI HODARI — the shared sheet.

   WHY THIS FILE EXISTS
   Every page used to carry its own copy of the colours, the fonts and the
   furniture, which is why the site drifted: signin was navy and gold, pricing
   was a dark SaaS dashboard, the landing page was something else again. One
   sheet means one place to change a colour, and a parent moving between pages
   never feels handed to a different company.

   It does NOT contain page-specific layout. A page keeps its own <style> block
   for whatever only it needs. This file is the vocabulary; each page writes its
   own sentence.

   THE HEADER AND FOOTER MARKUP IS COPIED INTO EACH PAGE rather than fetched or
   assembled. Copied markup renders instantly on a slow phone, works with no
   JavaScript, and cannot break every page at once - which matters more here
   than the convenience of editing it in one place. `tools/sync-chrome.js`
   rewrites all of them from one source when it needs to change.
   ========================================================================= */

:root{
  /* Taken from the logo artwork, not invented. */
  --blue:#1261A0;
  --blue-deep:#0B4373;
  --blue-night:#072F52;
  --blue-bright:#1B7FD4;
  --orange:#F9A825;
  --orange-deep:#E88C00;
  --green:#43A047;
  --green-deep:#2E7D32;
  --yellow:#FFD54F;

  --ground:#F7FAFD;
  --card:#FFFFFF;
  --ink:#122238;
  --body:#41536E;
  --muted:#7286A3;
  --line:#E3E9F1;

  --blue-bg:#E8F2FB;
  --green-bg:#E9F7EC;
  --amber-bg:#FFF6E4;
  --amber-line:#F6DCA6;
  --green-line:#BFE5C6;
  --red:#B3121B;
  --red-bg:#FDECEC;

  /* The wordmark's own face, used for the wordmark and nothing else. Cambria
     carries the rest, because it is on every Windows machine and Literata
     stands in for it everywhere else. */
  --brandfont:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:Cambria,"Literata",Georgia,"Times New Roman",serif;
  --text:Cambria,"Literata",Georgia,"Times New Roman",serif;

  --shadow:0 6px 24px rgba(18,97,160,.10);
  --shadow-lg:0 22px 60px rgba(9,52,90,.18);
  --r:22px;

  --spectrum:linear-gradient(90deg,#019DCB,#6729B2 21%,#E61925 43%,#F4A601 63%,#1DA23A 81%,#0175E4);
  --spectrum-diag:linear-gradient(135deg,#019DCB,#6729B2 21%,#E61925 43%,#F4A601 63%,#1DA23A 81%,#0175E4);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ground);color:var(--ink);font-family:var(--text);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* height:auto is NOT decoration here. Every <img> now carries its real
   width and height, and a width/height PAIR only scales if the other
   axis is auto: with CSS setting width and height left unstated, the
   browser uses the height ATTRIBUTE literally. Adding the attributes
   without this line stretched the hero logo from 330x220 to 330x627. */
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.rainbow{height:6px;background:var(--spectrum)}

/* ---- buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--serif);font-weight:600;font-size:16px;letter-spacing:.05em;
  padding:14px 26px;border-radius:11px;border:0;cursor:pointer;text-align:center;
  transition:transform .14s ease,box-shadow .14s ease;
}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background:linear-gradient(180deg,var(--blue),var(--blue-deep));color:#fff;
  box-shadow:0 4px 14px rgba(11,67,115,.28),inset 0 0 0 1px rgba(255,213,79,.4);
}
.btn.primary:hover{transform:translateY(-2px);
  box-shadow:0 9px 24px rgba(11,67,115,.36),inset 0 0 0 1px rgba(255,213,79,.75)}
.btn.gold{
  background:linear-gradient(180deg,#FFC24D,var(--orange) 42%,var(--orange-deep));color:#3A2600;
  box-shadow:0 8px 22px rgba(233,140,0,.34);
}
.btn.gold:hover{transform:translateY(-2px);box-shadow:0 13px 28px rgba(233,140,0,.44)}
.btn.ghost{background:#fff;color:var(--blue);border:2px solid var(--line)}
.btn.ghost:hover{border-color:var(--blue-bright);transform:translateY(-2px)}
.btn.sm{font-size:14px;padding:11px 18px}

/* ---- the header, on every page ------------------------------------------ */
.site-nav{
  position:sticky;top:0;z-index:60;background:rgba(247,250,253,.88);
  backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--line);
}
.site-nav .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:80px;gap:20px}
.brandlink{display:flex;align-items:center;gap:11px;justify-self:start}

/* The artwork carries the words "MimiHodari" inside it, so the bar shows only
   the character - cap, figure and star - and the wordmark beside it does the
   reading. Measured against the 940x627 file: the mark occupies x 218-660,
   y 47-350, padded here so nothing sits on the edge. Swap the artwork and
   these four numbers need remeasuring. */
/* The real emblem, whole. This used to be a 60x40 window onto a 122px render
   of the full lockup, offset -27px: a slice of the artwork that cut the star
   and the book. mimihodari-mark.png is the emblem cropped to its own ink
   bounds, transparent, so it only needs a height. */
.brandmark{display:flex;align-items:center;height:42px;flex:none}
.brandmark img{display:block;height:42px;width:auto;max-width:none}
.mark{font-family:var(--brandfont);font-weight:900;font-size:23px;letter-spacing:-.025em;white-space:nowrap}
.mark .m{color:var(--blue)} .mark .h{color:var(--orange)}
@media(max-width:400px){ .mark{font-size:19px} }

.navlinks{display:flex;align-items:center;gap:.5cm;justify-self:center}
.navcta{justify-self:end}

/* ---- the bar on a phone --------------------------------------------------
   Six links, a wordmark and a button do not fit across 375px. Until now they
   simply did not: the row measured 495px inside a 375px window, `overflow-x:
   hidden` swallowed the scrollbar, and everything past "Pricing Plans" was
   unreachable. It also quietly broke anything centred in the viewport, because
   the document was 120px wider than the screen.

   So below 900px the links fold into a panel behind a single button. The panel
   is the same list, stacked, with the call to action at the bottom where a
   thumb already is. */
.navtoggle{
  display:none;justify-self:end;width:42px;height:42px;padding:0;
  border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.7);
  cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px;
}
.navtoggle span{
  display:block;width:18px;height:2px;border-radius:2px;background:var(--blue-deep);
  transition:transform .25s ease,opacity .2s ease;
}
.site-nav.open .navtoggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.site-nav.open .navtoggle span:nth-child(2){opacity:0}
.site-nav.open .navtoggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.navlinks .mobcta{display:none}

@media(max-width:900px){
  .site-nav .wrap{grid-template-columns:1fr auto;height:66px;gap:12px}
  .navtoggle{display:flex}
  .navcta{display:none}                 /* it reappears inside the panel */
  .navlinks{
    position:absolute;left:0;right:0;top:100%;
    grid-column:1 / -1;justify-self:stretch;
    display:none;flex-direction:column;align-items:stretch;gap:0;
    padding:6px 20px 16px;
    /* Opaque, not translucent. A menu you can read the page through is a menu
       somebody has to squint at, and backdrop-filter is unreliable behind a
       sticky parent that already has one. */
    background:#FBFDFF;border-bottom:1px solid var(--line);
    box-shadow:0 20px 44px rgba(11,67,115,.18);
  }
  .site-nav.open .navlinks{display:flex}
  .navlinks a{padding:14px 2px;border-bottom:1px solid var(--line);font-size:16px}
  .navlinks a:last-of-type{border-bottom:0}
  .navlinks .mobcta{
    display:block;margin:14px 0 0;padding:13px 18px;border-radius:12px;text-align:center;
    font-family:var(--brandfont);font-weight:800;font-size:15.5px;color:#fff;border-bottom:0;
    background:linear-gradient(180deg,var(--blue),var(--blue-deep));
    box-shadow:0 5px 16px rgba(11,67,115,.28);
  }
  .mark{font-size:20px}
  .brandmark,.brandmark img{height:36px}
}
.site-nav a.quiet{
  position:relative;color:var(--navink,var(--body));font-family:var(--serif);font-weight:500;
  font-size:14.5px;letter-spacing:.09em;padding:10px 6px;white-space:nowrap;
  transition:color .16s ease;
}
/* The rule draws itself rather than a block of colour arriving behind it. */
.site-nav a.quiet::after{
  content:"";position:absolute;left:6px;right:6px;bottom:4px;height:1px;background:var(--orange);
  transform:scaleX(0);transform-origin:center;transition:transform .26s cubic-bezier(.2,.7,.3,1);
}
.site-nav a.quiet:hover{color:var(--navhover,var(--blue-deep))}
.site-nav a.quiet:hover::after{transform:scaleX(1)}
.site-nav a.quiet[aria-current="page"]{color:var(--navhover,var(--blue-deep));font-weight:600}
.site-nav a.quiet[aria-current="page"]::after{transform:scaleX(1)}

/* One deep colour each. Deep rather than bright: at 14.5px a saturated colour
   reads as a warning, a dark one reads as ink that happens to be coloured. */
.site-nav a[data-c="home"]    { --navink:#14507F; --navhover:#0A3557 }
.site-nav a[data-c="how"]     { --navink:#1F6B3A; --navhover:#124326 }
.site-nav a[data-c="plans"]   { --navink:#9A5B12; --navhover:#6E3F08 }
.site-nav a[data-c="about"]   { --navink:#7A3B5E; --navhover:#52263E }
.site-nav a[data-c="contact"] { --navink:#0E6F73; --navhover:#084A4D }
.site-nav a[data-c="signin"]  { --navink:#4A3B7A; --navhover:#2F2551 }

/* Between 900 and 1010 the bar is still a row and genuinely short of room,
   so the two optional links still fold away there. Below 900 the panel takes
   over and every link must come back. */
@media(min-width:901px) and (max-width:1010px){ .site-nav a.quiet[data-opt]{display:none} }
@media(max-width:600px){
  .site-nav .wrap{height:70px;gap:12px}
  .navlinks{gap:12px}
  .site-nav a.quiet{font-size:13.5px;letter-spacing:.05em}
  .btn.sm{padding:10px 14px;font-size:13px}
}

/* ---- the footer, on every page ------------------------------------------ */
/* Dark, because a page should not end on the same pale grey it began with,
   and because the one thing worth finding down here is how to reach a person. */
.site-foot{
  margin-top:70px;color:#CFE0EE;
  background:
    radial-gradient(620px 380px at 6% 0%, rgba(27,127,212,.30), transparent 60%),
    radial-gradient(520px 340px at 94% 100%, rgba(249,168,37,.16), transparent 62%),
    linear-gradient(165deg,var(--blue-deep),var(--blue-night));
}
.site-foot .wrap{padding-top:52px;padding-bottom:40px}
.footgrid{display:grid;gap:38px}
@media(min-width:860px){ .footgrid{grid-template-columns:1.35fr .8fr .85fr;gap:44px} }
.fhead{
  font-family:var(--serif);font-weight:600;font-size:13px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--yellow);margin:0 0 16px;
}
/* The address gets headline weight, because it is the only thing on the page
   a worried parent is actually hunting for. */
.fmail{
  display:inline-block;font-family:var(--serif);font-weight:600;color:#fff;
  font-size:clamp(19px,2.9vw,25px);letter-spacing:-.012em;line-height:1.2;
  text-decoration:underline;text-decoration-color:var(--orange);
  text-decoration-thickness:2px;text-underline-offset:7px;
  transition:color .16s ease,text-decoration-color .16s ease;
}
.fmail:hover{color:var(--yellow);text-decoration-color:var(--yellow)}
.fphone{display:block;margin:14px 0 0;font-family:var(--serif);font-size:17px;color:#fff}
.fphone:hover{color:var(--yellow)}
.fnote{margin:14px 0 0;font-size:15px;color:#A8C6DE;max-width:26em;line-height:1.6}
.fnote b{color:#fff;font-weight:600}
.flist{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.flist a{color:#CFE0EE;font-size:15.5px;font-family:var(--serif)}
.flist a:hover{color:var(--yellow)}
.fbrand{display:flex;align-items:center;gap:11px}
.fbrand .brandmark{filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.fbrand .mark .m{color:#8FC5EE}
.fbrand .tag{font-family:var(--brandfont);font-weight:800;color:var(--yellow);font-size:13.5px}
.footbase{
  border-top:1px solid rgba(255,255,255,.14);margin-top:38px;padding-top:22px;
  display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;font-size:13.5px;color:#8FB0CB;
}
.footbase .sp{flex:1}
.footbase a{color:#A8C6DE}
.footbase a:hover{color:var(--yellow)}

/* ---- things every content page needs ------------------------------------ */
.page-head{
  background:
    radial-gradient(700px 380px at 84% -14%, rgba(249,168,37,.20), transparent 62%),
    radial-gradient(660px 380px at 6% -8%, rgba(27,127,212,.20), transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(242,248,253,.60));
  border-bottom:1px solid var(--line);padding:52px 0 46px;
}
.kicker{
  font-family:var(--serif);font-weight:600;font-size:12.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--orange-deep);margin:0 0 11px;
}
h1{font-family:var(--serif);font-weight:600;letter-spacing:-.018em;
  font-size:clamp(30px,5vw,46px);line-height:1.12;margin:0}
h1 em{font-style:normal;background-image:var(--spectrum);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.page-head .lede{margin:16px 0 0;max-width:38em;font-size:18px;color:var(--body);line-height:1.62}

.prose{max-width:46em;margin:0 auto;padding:48px 0 10px}
.prose h2{
  font-family:var(--serif);font-weight:600;font-size:clamp(21px,3.2vw,27px);
  line-height:1.25;margin:40px 0 12px;letter-spacing:-.012em;
}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--serif);font-weight:600;font-size:18.5px;margin:26px 0 8px}
.prose p{margin:0 0 15px;color:var(--body);line-height:1.68}
.prose ul{margin:0 0 15px;padding-left:22px;color:var(--body)}
.prose li{margin:0 0 9px;line-height:1.6}
.prose b,.prose strong{color:var(--ink);font-weight:700}
.prose .updated{font-size:14px;color:var(--muted);margin:0 0 30px}
.prose .callout{
  background:linear-gradient(135deg,var(--blue-bg),#FFF7E8);border:1px dashed #BFD4E8;
  border-radius:var(--r);padding:22px 24px;margin:26px 0;
}
.prose .callout p:last-child{margin-bottom:0}
.prose a{font-weight:600}

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

/* ===========================================================================
   THE BACKGROUND SYSTEM
   ---------------------------------------------------------------------------
   One reusable layer, applied everywhere: home, contact, pricing, sign-in,
   signup, and later the dashboard, quiz and results screens.

   HOW IT IS BUILT
   A single fixed layer behind the page. Because it is fixed while the content
   scrolls over it, the parallax is free - no scroll listeners, nothing
   recalculating on every frame, which matters on the cheap Android phones this
   is actually read on.

   WHY IT READS AS PREMIUM RATHER THAN AS A CHILDREN'S WALLPAPER
   Three rules, and breaking any one of them tips it into preschool:
     1. OPACITY STAYS UNDER 4%. The glyphs must be felt, never read. If you can
        make out the letter without looking for it, it is too strong.
     2. THE TYPE IS CROPPED AND OVERSIZED. Whole words sitting neatly in the
        margin look like clip art; a letterform running off the edge at 280px
        reads as texture.
     3. NO NEW COLOURS. Everything here is ink or the existing brand hues at
        very low alpha. Depth comes from scale and whitespace, not from adding
        a palette.

   THE JOURNEY PATH is a single soft curve with four nodes on it, spaced the
   way Learn - Practise - Improve - Master would be. It is deliberately not
   labelled: a fixed caption behind scrolling content would read as debris, and
   the shape says it well enough.

   COST: about a dozen elements, transform and opacity only, all of it off for
   prefers-reduced-motion. Nothing here repaints on scroll.
   ======================================================================== */

.mh-bg{
  position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  /* Soft organic light, well under the content. */
  background:
    radial-gradient(900px 620px at 88% 8%,  rgba(249,168,37,.15), transparent 62%),
    radial-gradient(820px 600px at 4% 22%,  rgba(27,127,212,.14), transparent 60%),
    radial-gradient(760px 560px at 60% 96%, rgba(67,160,71,.12), transparent 62%);
}

/* ---- oversized cropped typography --------------------------------------- */
.mh-bg .g{
  position:absolute;font-family:var(--brandfont);font-weight:900;
  color:#0E2033;opacity:.04;line-height:.8;white-space:nowrap;user-select:none;
  letter-spacing:-.04em;
}
.mh-bg .g.thin{font-family:var(--serif);font-weight:600;opacity:.05;letter-spacing:.06em}

/* Positioned to run off the edges. A glyph fully inside the frame looks
   placed; one leaving the frame looks like the page continues past it. */
.mh-bg .g1{ top:-3%;   left:-4%;  font-size:clamp(140px,24vw,340px) }   /* ABC   */
.mh-bg .g2{ top:24%;   right:-6%; font-size:clamp(120px,20vw,300px) }   /* 123   */
.mh-bg .g3{ bottom:16%;left:-3%;  font-size:clamp(110px,18vw,260px) }   /* ÷ ×   */
.mh-bg .g4{ bottom:-4%;right:2%;  font-size:clamp(90px,14vw,190px) }    /* LEARN */
.mh-bg .g5{ top:60%;   right:-5%; font-size:clamp(80px,12vw,170px) }    /* GROW  */
/* + − sat behind the eyebrow and the headline, the one place on the page
   that must stay clean. Kept in the markup, off on every width. */
.mh-bg .g6{ display:none }
@media(max-width:820px){ .mh-bg .g5{display:none} }

/* ---- the journey path ---------------------------------------------------- */
.mh-bg svg{position:absolute;inset:0;width:100%;height:100%}
/* WHY SO LOW, AND SO THIN. A travelling dashed line reads far louder than
   its opacity suggests: motion is what the eye is built to catch, so a value
   that looks like quiet texture when still becomes the most active thing on
   a page once it moves. It is loudest where there is most open ground - how
   it works and pricing both have large areas with no card over the backdrop -
   which is where it kept being noticed.

   Two rounds of turning the opacity down did not settle it, because opacity
   was only half the problem. At 2.5px with 18px gaps this was a drawn ribbon;
   a fainter ribbon is still a ribbon. The fix was less ink, not paler ink:
   the stroke is now 1.4px and the gaps are three times the dash, so what is
   left is a dotted suggestion of a path. Taken down three times. If it ever
   needs to go quieter again, thin it further - do not chase the opacity. */
.mh-bg .path{
  fill:none;stroke:url(#mhSpectrum);stroke-width:1.4;stroke-linecap:round;
  /* Dimmed from .30. The dashes travel, and a moving line asks to be looked
     at whatever its opacity - so it has to sit lower than a static one to
     read as texture rather than as something happening on the page. */
  stroke-dasharray:10 30;opacity:.06;
  animation:mhTravel 90s linear infinite;
}
@keyframes mhTravel{ to{ stroke-dashoffset:-1600 } }
.mh-bg .node{fill:url(#mhSpectrum);opacity:.11}
.mh-bg .node.n1{animation:mhPulse 7s ease-in-out infinite}
.mh-bg .node.n2{animation:mhPulse 7s ease-in-out .9s infinite}
.mh-bg .node.n3{animation:mhPulse 7s ease-in-out 1.8s infinite}
.mh-bg .node.n4{animation:mhPulse 7s ease-in-out 2.7s infinite}
@keyframes mhPulse{ 0%,100%{opacity:.07;r:4} 50%{opacity:.15;r:5.5} }

/* ---- sparks --------------------------------------------------------------- */
.mh-bg .sp{
  position:absolute;width:5px;height:5px;border-radius:50%;
  background:var(--orange);opacity:.11;
  animation:mhFloat 24s ease-in-out infinite;
}
.mh-bg .sp:nth-child(even){background:var(--blue-bright)}
.mh-bg .sp.p1{top:18%;left:12%;animation-delay:-2s}
.mh-bg .sp.p2{top:34%;left:78%;animation-delay:-9s;width:4px;height:4px}
.mh-bg .sp.p3{top:62%;left:22%;animation-delay:-15s}
.mh-bg .sp.p4{top:74%;left:66%;animation-delay:-5s;width:6px;height:6px}
.mh-bg .sp.p5{top:46%;left:52%;animation-delay:-19s;width:3px;height:3px}
.mh-bg .sp.p6{top:12%;left:62%;animation-delay:-12s}
@keyframes mhFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  25%    {transform:translate(14px,-22px) scale(1.25)}
  50%    {transform:translate(-9px,-38px) scale(.85)}
  75%    {transform:translate(-18px,-16px) scale(1.1)}
}

/* Everything stops, and the layer stays as quiet texture. */
@media(prefers-reduced-motion:reduce){
  .mh-bg .path,.mh-bg .node,.mh-bg .sp{animation:none}
}

/* ---- the legal pages ------------------------------------------------------
   Terms, privacy and refunds are long unbroken text with no tinted bands to
   damp the layer, so the settings that read as texture on a page of cards read
   as interference here: the big words sit right behind paragraphs and the path
   crosses the reading column. The page brief asked for the symbols, the
   sparkles and the path to stay and the large typography to go, which is
   exactly the right call. This is that, scoped so no other page moves.
   ------------------------------------------------------------------------- */
body.legal .mh-bg .g.thin{display:none}            /* GROW and LEARN          */
body.legal .mh-bg .g{opacity:.028}                 /* ABC, 123, the operators */
body.legal .mh-bg .path{opacity:.045}
body.legal .mh-bg .node{opacity:.075}
body.legal .mh-bg .sp{opacity:.09}
@keyframes mhPulseQuiet{ 0%,100%{opacity:.09;r:4} 50%{opacity:.18;r:5.5} }
body.legal .mh-bg .node{animation-name:mhPulseQuiet}
body.legal .mh-bg{
  background:
    radial-gradient(900px 620px at 88% 8%,  rgba(249,168,37,.09), transparent 62%),
    radial-gradient(820px 600px at 4% 22%,  rgba(27,127,212,.08), transparent 60%),
    radial-gradient(760px 560px at 60% 96%, rgba(67,160,71,.07), transparent 62%);
}

/* ---- letting it show through --------------------------------------------- */
/* A section with a solid fill hides the layer entirely. These translucent
   variants let roughly a quarter of it through, which is enough to feel and
   not enough to compete with a paragraph. */
.sheer-paper{background:rgba(252,250,245,.55) !important}
.sheer-cool{background:linear-gradient(180deg,rgba(244,249,253,.62),rgba(251,253,255,.54)) !important}
.sheer-white{background:rgba(255,255,255,.78) !important}

/* ===========================================================================
   THE GROWING SPECTRUM RULE

   A page headline draws its own underline in, left to right, once, and then the
   colours drift along it very slowly. Growing rather than simply being there is
   the point: it reads as the page opening rather than as a divider that was
   always drawn. `.rule-grow.centred` is for a centred headline, where a rule
   anchored left would look like a mistake.
   ========================================================================= */
@keyframes mhRule     { to{ transform:scaleX(1) } }
@keyframes mhRuleC    { to{ transform:translateX(-50%) scaleX(1) } }
@keyframes mhRuleDrift{ from{background-position:0% 50%} to{background-position:230% 50%} }

.rule-grow{position:relative;padding-bottom:19px}
.rule-grow::after{
  content:"";position:absolute;left:0;bottom:0;height:5px;
  width:clamp(170px,40%,330px);border-radius:6px;
  background-image:var(--spectrum);background-size:230% 100%;
  transform:scaleX(0);transform-origin:left center;
  animation:mhRule 1.05s cubic-bezier(.2,.75,.25,1) .25s forwards,
            mhRuleDrift 11s linear 1.4s infinite;
}
.rule-grow.centred::after{
  left:50%;transform-origin:center;transform:translateX(-50%) scaleX(0);
  animation-name:mhRuleC,mhRuleDrift;
}
@media(prefers-reduced-motion:reduce){
  .rule-grow::after{animation:none;transform:scaleX(1)}
  .rule-grow.centred::after{transform:translateX(-50%) scaleX(1)}
}


/* ===========================================================================
   LEGAL PAGES: THE SHARED FURNITURE

   Terms, privacy and refunds are the same kind of document and should not drift
   apart. Everything they have in common lives here, once.

   EVERY RULE IS SCOPED UNDER body.legal ON PURPOSE. `.meta`, `.note` and
   `.policies` are all in use on other pages (admin, index, home, practice,
   pricing, contact), and unscoped rules would silently restyle them. Only the
   three policy pages carry class="legal" on <body>.
   ========================================================================= */

/* ---- hero ---------------------------------------------------------------- */
body.legal .head2{
  position:relative;overflow:hidden;padding:56px 0 48px;
  /* A masthead that is actually a colour, not a near-white wash. Cool on one
     side, warm on the other, a lift from below, closed with the brand spectrum
     rather than a grey hairline. Opaque on purpose: this band should read as a
     cover, so the page texture stops at its edge.

     The geometry is shared; only the six tints below change per page, so the
     three policy pages read as one family with their own note. Each takes the
     colour its own content already uses: terms blue, privacy green, refunds
     the warm cream of the payment card. */
  --m-warm:rgba(249,168,37,.34);
  --m-cool:rgba(27,127,212,.30);
  --m-lift:rgba(34,160,107,.20);
  --m-1:#E4F1FD; --m-2:#EDF5FD; --m-3:#F7F2E8; --m-4:#FFF7EA;
  background:
    radial-gradient(780px 440px at 88% -16%, var(--m-warm), transparent 64%),
    radial-gradient(720px 440px at 0% -10%, var(--m-cool), transparent 62%),
    radial-gradient(660px 400px at 52% 122%, var(--m-lift), transparent 66%),
    linear-gradient(162deg,var(--m-1) 0%,var(--m-2) 42%,var(--m-3) 78%,var(--m-4) 100%);
  border-bottom:0;
}

/* Terms: blue led. The agreement, so it leans cool and even. */
body.legal .head2.m-terms{
  --m-cool:rgba(27,127,212,.32);
  --m-warm:rgba(249,168,37,.30);
  --m-lift:rgba(34,160,107,.16);
  --m-1:#E2F0FD; --m-2:#ECF4FD; --m-3:#F6F2EA; --m-4:#FFF8EC;
}

/* Privacy: green led, the colour the promise card and the glance already use. */
body.legal .head2.m-privacy{
  --m-cool:rgba(34,160,107,.30);
  --m-warm:rgba(27,127,212,.22);
  --m-lift:rgba(249,168,37,.16);
  --m-1:#E4F6EB; --m-2:#EAF6F1; --m-3:#EDF4FB; --m-4:#F5FAFF;
}
body.legal .head2.m-privacy .kicker{color:#1B7A52}

/* Refunds: warm led, the cream of the payment card. */
body.legal .head2.m-refunds{
  --m-warm:rgba(249,168,37,.40);
  --m-cool:rgba(27,127,212,.20);
  --m-lift:rgba(34,160,107,.14);
  --m-1:#FFF1DD; --m-2:#FEF6E9; --m-3:#F7F3F1; --m-4:#EDF4FD;
}

body.legal .head2::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;
  background:var(--spectrum);
}
/* On the colour, the kicker and the pill both need a touch more contrast than
   they carried against near-white. */
body.legal .head2 .kicker{color:#C97A00}
body.legal .head2 .pill{
  background:rgba(255,255,255,.86);border-color:rgba(122,166,209,.55);
  box-shadow:0 3px 12px rgba(11,67,115,.08);
}
body.legal .head2 .meta{border-top-color:rgba(120,160,200,.45)}
body.legal .head2 .inner{max-width:760px}
body.legal .head2 h1{
  font-family:var(--serif);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(32px,5.4vw,50px);line-height:1.1;margin:0;text-wrap:balance;
}
body.legal .head2 h1 em{font-style:normal;background-image:var(--spectrum);
  -webkit-background-clip:text;background-clip:text;color:transparent}
body.legal .head2 .lede{
  margin:16px 0 0;max-width:37em;font-size:17.5px;color:var(--body);line-height:1.66;
}

/* A small standing reassurance beside the date. */
body.legal .pill{
  display:inline-flex;align-items:center;gap:9px;margin:20px 0 0;
  padding:8px 15px;border-radius:999px;
  background:rgba(255,255,255,.78);border:1px solid rgba(154,190,224,.5);
  font-size:13px;color:#42597A;box-shadow:0 2px 10px rgba(11,67,115,.05);
}
body.legal .pill svg{width:15px;height:15px;fill:none;stroke:#22A06B;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
body.legal .pill b{color:var(--ink);font-weight:600}

/* A date on a legal page is not decoration. It is how somebody tells which
   version they agreed to. */
body.legal .meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  margin:26px 0 0;padding:13px 0 0;border-top:1px solid rgba(180,197,218,.5);
  font-size:13.5px;color:var(--muted);
}
body.legal .meta b{color:var(--ink);font-weight:600}
body.legal .meta .dot{width:4px;height:4px;border-radius:50%;background:var(--orange);flex:none}
body.legal .meta .count{margin-left:auto}
/* On a phone the row wraps and a separator dot ends up stranded at the end of a
   line, which reads as a typo. Stack instead and drop the dots. */
@media(max-width:620px){
  body.legal .meta{flex-direction:column;align-items:flex-start;gap:7px}
  body.legal .meta .dot{display:none}
  body.legal .meta .count{margin-left:0}
}

/* ---- the two column reading area ---------------------------------------- */
body.legal .layout{
  display:grid;grid-template-columns:228px minmax(0,1fr);gap:52px;
  align-items:start;max-width:980px;margin:0 auto;padding:40px 0 8px;
}
@media(max-width:940px){
  body.legal .layout{grid-template-columns:1fr;gap:0;padding-top:26px}
}

/* ---- the journey -----------------------------------------------------------
   Not a table of contents. A reading path: milestones threaded on one line, an
   orange marker that travels down it as you read, milestones behind you turning
   green, and a star at the end. The point is that somebody halfway through a
   legal document can see that it is finite and that they are getting somewhere,
   which is most of why people abandon these pages.

   The palette is local to the panel so the site's own tokens are untouched.
   ------------------------------------------------------------------------- */
body.legal .onthis{
  --j-blue:#123B63; --j-orange:#F59E0B; --j-green:#22A06B;
  --j-sky:#EAF5FF;  --j-cream:#FFF9EF;  --j-rail:#D5E5F4;
  position:sticky;top:98px;
  border-radius:20px;padding:20px 18px 17px;
  background:linear-gradient(170deg,rgba(255,255,255,.88),rgba(234,245,255,.78));
  border:1px solid rgba(154,190,224,.42);
  box-shadow:0 10px 30px rgba(11,67,115,.07),0 1px 2px rgba(11,67,115,.05);
}
body.legal .onthis>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  font-family:var(--brandfont);font-weight:900;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--j-blue);
}
body.legal .onthis>summary::-webkit-details-marker{display:none}
body.legal .onthis>summary .chev{margin-left:auto;transition:transform .3s ease;font-size:13px;opacity:.6}
body.legal .onthis[open]>summary .chev{transform:rotate(180deg)}
body.legal .onthis .ttl{
  display:flex;align-items:center;gap:8px;margin:0 0 3px;
  font-family:var(--brandfont);font-weight:900;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--j-blue);
}
body.legal .onthis .sub{
  margin:0 0 17px;font-size:12.5px;line-height:1.4;color:#6D87A6;font-style:italic;
}
body.legal .onthis .star{color:var(--j-orange);font-size:11px;line-height:1;transform:translateY(-.5px)}

body.legal .onthis nav{position:relative;display:flex;flex-direction:column}
body.legal .onthis .rail{
  position:absolute;left:8px;top:13px;bottom:13px;width:2px;
  background:var(--j-rail);border-radius:2px;overflow:hidden;
}
body.legal .onthis .rail i{
  display:block;width:100%;height:0;border-radius:2px;
  background:linear-gradient(180deg,var(--j-green),var(--j-orange) 82%);
  transition:height .45s cubic-bezier(.32,.72,.3,1);
}
body.legal .onthis nav a{
  position:relative;display:grid;grid-template-columns:18px 20px 1fr;gap:9px;
  align-items:center;padding:7px 0;color:#53698A;font-size:13.5px;line-height:1.32;
  transition:transform .28s cubic-bezier(.32,.72,.3,1),color .22s ease;
}
body.legal .onthis nav a:hover{color:var(--j-blue)}
body.legal .onthis .dot{
  justify-self:center;width:9px;height:9px;border-radius:50%;
  background:#C3D8EC;box-shadow:0 0 0 3px rgba(255,255,255,.9);
  transition:background .3s ease,box-shadow .3s ease,transform .3s cubic-bezier(.3,1.4,.5,1);
}
body.legal .onthis .k{
  font-family:var(--brandfont);font-weight:800;font-size:11.5px;color:#93A9C2;
  font-variant-numeric:tabular-nums;transition:color .22s ease;
}
/* behind you */
body.legal .onthis nav a.done{color:#60789A}
body.legal .onthis nav a.done .dot{background:var(--j-green);box-shadow:0 0 0 3px rgba(255,255,255,.9)}
body.legal .onthis nav a.done .k{color:var(--j-green)}
/* where you are */
body.legal .onthis nav a.on{transform:translateX(3px);color:var(--j-blue)}
body.legal .onthis nav a.on .t{font-weight:700}
body.legal .onthis nav a.on .k{color:var(--j-orange)}
body.legal .onthis nav a.on .dot{
  background:var(--j-orange);transform:scale(1.32);
  box-shadow:0 0 0 3px rgba(255,255,255,.95),0 0 0 7px rgba(245,158,11,.20);
}
/* the end of the path */
body.legal .onthis .endstar{
  position:absolute;left:3px;bottom:-9px;font-size:13px;color:#C3D8EC;
  transition:color .4s ease,transform .4s cubic-bezier(.3,1.4,.5,1);
}
body.legal .onthis nav.finished .endstar{color:var(--j-green);transform:scale(1.2)}
/* how far through */
body.legal .onthis .prog{
  display:flex;align-items:center;gap:9px;margin:22px 0 0;padding:13px 0 0;
  border-top:1px solid rgba(154,190,224,.34);
  font-family:var(--brandfont);font-size:10.5px;font-weight:800;letter-spacing:.04em;
  color:#7A90AB;white-space:nowrap;
}
body.legal .onthis .prog .bar{
  flex:1;height:5px;min-width:34px;border-radius:5px;background:#DCEAF7;overflow:hidden;
}
body.legal .onthis .prog .bar i{
  display:block;height:100%;width:0;border-radius:5px;
  background:linear-gradient(90deg,var(--j-orange),#FBBF24);
  transition:width .35s cubic-bezier(.32,.72,.3,1);
}
body.legal .onthis .prog .pc{color:var(--j-blue);font-variant-numeric:tabular-nums}

@media(min-width:941px){ body.legal .onthis>summary{display:none} }
@media(max-width:940px){
  body.legal .onthis{position:static;margin:0 0 22px;padding:4px 18px 6px;border-radius:16px}
  body.legal .onthis>summary{padding:13px 0}
  body.legal .onthis .ttl{display:none}
  body.legal .onthis .sub{margin:0 0 15px}
  body.legal .onthis .prog{margin-top:17px;margin-bottom:12px}
}
@media(prefers-reduced-motion:reduce){ body.legal .onthis *{transition:none !important} }

/* ---- the reading column -------------------------------------------------- */
body.legal .read{max-width:40em}
body.legal .read p{margin:0 0 15px;color:var(--body);font-size:17px;line-height:1.72}
body.legal .read ul{margin:0 0 16px;padding-left:20px;color:var(--body)}
body.legal .read ul li{margin:0 0 9px;font-size:17px;line-height:1.66}
body.legal .read ol{margin:0 0 16px;padding-left:0;list-style:none;counter-reset:pt}
body.legal .read ol li{
  position:relative;margin:0 0 11px;padding-left:30px;color:var(--body);
  font-size:17px;line-height:1.66;counter-increment:pt;
}
body.legal .read ol li::before{
  content:counter(pt);position:absolute;left:0;top:4px;
  width:19px;height:19px;border-radius:50%;background:var(--blue-bg);color:var(--blue);
  font-family:var(--brandfont);font-weight:900;font-size:11px;
  display:grid;place-items:center;
}
body.legal .read b,body.legal .read strong{color:var(--ink);font-weight:700}
body.legal .read a{font-weight:600}

/* ---- a section ----------------------------------------------------------- */
body.legal .sec{
  scroll-margin-top:100px;padding:34px 0 8px;border-top:1px solid rgba(206,218,233,.7);
}
body.legal .sec:first-of-type{border-top:0;padding-top:10px}
body.legal .sec .hd{
  display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:baseline;margin:0 0 15px;
}
body.legal .sec .n{
  font-family:var(--brandfont);font-weight:900;font-size:21px;line-height:1;
  background-image:var(--spectrum);-webkit-background-clip:text;background-clip:text;
  color:transparent;opacity:.9;
}
body.legal .sec h2{
  margin:0;font-family:var(--serif);font-weight:600;color:var(--ink);
  font-size:clamp(21px,2.6vw,25px);line-height:1.22;letter-spacing:-.01em;
}

/* ---- the summary card at the top ----------------------------------------- */
body.legal .brief{
  position:relative;overflow:hidden;border-radius:var(--r);padding:28px 26px 26px;
  margin:0 0 6px;background:rgba(255,255,255,.82);
  border:1px solid var(--line);box-shadow:var(--shadow);
}
body.legal .brief::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--spectrum);
}
body.legal .brief h2{
  margin:0 0 4px;font-family:var(--serif);font-weight:600;font-size:22px;color:var(--ink);
}
body.legal .brief .sub{margin:0 0 20px;font-size:14.5px;color:var(--muted)}
body.legal .brief ul{list-style:none;margin:0;padding:0;display:grid;gap:15px}
body.legal .brief li{display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start}
body.legal .brief .ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center}
body.legal .brief .ic svg{
  width:19px;height:19px;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
body.legal .i-blue{background:var(--blue-bg);color:var(--blue)}
body.legal .i-amber{background:var(--amber-bg);color:var(--orange-deep)}
body.legal .i-green{background:var(--green-bg);color:var(--green-deep)}
body.legal .brief .tx{font-size:16px;line-height:1.56;color:var(--body);padding-top:6px}
body.legal .brief .tx b{color:var(--ink);font-weight:700}

/* ---- highlight cards, used sparingly ------------------------------------- */
body.legal .note{
  position:relative;border-radius:15px;padding:18px 20px 18px 23px;margin:6px 0 18px;
  background:var(--amber-bg);border:1px solid var(--amber-line);
}
body.legal .note.blue{background:var(--blue-bg);border-color:#C8DEF3}
body.legal .note::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;
  background:var(--orange);
}
body.legal .note.blue::before{background:var(--blue-bright)}
body.legal .note .lbl{
  font-family:var(--brandfont);font-weight:900;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--orange-deep);margin:0 0 8px;
}
body.legal .note.blue .lbl{color:var(--blue)}
body.legal .note p{margin:0 0 10px;font-size:16.5px;line-height:1.62;color:var(--body)}
body.legal .note p:last-child{margin-bottom:0}
body.legal .note ol{margin-bottom:0}
body.legal .note ol li::before{background:#FFFFFF;color:var(--orange-deep)}
body.legal .note b{color:var(--ink)}

/* ---- closing ------------------------------------------------------------- */
body.legal .ask{max-width:980px;margin:34px auto 0;padding:0 0 64px}
body.legal .ask .box{
  position:relative;overflow:hidden;border-radius:var(--r);padding:44px 32px;text-align:center;
  background:
    radial-gradient(520px 300px at 18% 0%, rgba(249,168,37,.15), transparent 62%),
    radial-gradient(520px 300px at 84% 100%, rgba(27,127,212,.15), transparent 60%),
    rgba(255,255,255,.80);
  border:1px solid var(--line);box-shadow:var(--shadow);
}
body.legal .ask h2{
  margin:0 0 10px;font-family:var(--serif);font-weight:600;
  font-size:clamp(24px,3.4vw,31px);color:var(--ink);letter-spacing:-.012em;
}
body.legal .ask p{margin:0 auto 22px;max-width:36em;font-size:17px;line-height:1.66;color:var(--body)}
body.legal .ask .go{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--brandfont);font-weight:800;
  font-size:15.5px;color:var(--blue-deep);border-bottom:2px solid var(--orange);padding-bottom:3px;
  transition:gap .22s ease;
}
body.legal .ask .go:hover{gap:15px}
/* `.ask p` above is (0,2,1); this must out-specify it or margin:auto is lost and
   the links centre inside a narrow box sitting flush left. */
body.legal .ask .policies{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;
  max-width:none;margin:26px auto 0;font-size:14.5px;
}

/* ---- privacy at a glance -------------------------------------------------
   Five plain statements above the detail, so somebody who reads nothing else
   still leaves knowing the shape of it. Every line restates something the
   policy below says in full; none of them is a new promise.
   ------------------------------------------------------------------------- */
body.legal .glance{
  position:relative;overflow:hidden;border-radius:var(--r);padding:26px 26px 24px;
  margin:0 0 6px;
  background:linear-gradient(165deg,rgba(255,255,255,.88),rgba(233,247,236,.72));
  border:1px solid #C6E4CE;box-shadow:var(--shadow);
}
body.legal .glance::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,#22A06B,#43A047 55%,#F59E0B);
}
body.legal .glance h2{
  margin:0 0 3px;font-family:var(--serif);font-weight:600;font-size:22px;color:var(--ink);
}
body.legal .glance .sub{margin:0 0 19px;font-size:14.5px;color:#5E7D6A}
body.legal .glance ul{list-style:none;margin:0;padding:0;display:grid;gap:13px}
body.legal .glance li{display:grid;grid-template-columns:30px 1fr;gap:13px;align-items:start}
body.legal .glance .ic{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:rgba(255,255,255,.9);color:#22A06B;border:1px solid #CBE7D4;
}
body.legal .glance .ic svg{
  width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
body.legal .glance .tx{font-size:16px;line-height:1.5;color:var(--body);padding-top:4px}
body.legal .glance .tx b{color:var(--ink);font-weight:700}

/* ---- what we collect -----------------------------------------------------
   The same five rows the table held, as a two column list. A table forces a
   phone to either scroll sideways or squeeze both columns to nothing; this
   stacks instead, and gains room for a category mark on the left.
   ------------------------------------------------------------------------- */
body.legal .collect{display:grid;gap:12px;margin:4px 0 8px}
body.legal .collect .row{
  display:grid;grid-template-columns:38px 1fr;gap:15px;align-items:start;
  padding:17px 18px;border-radius:14px;
  background:rgba(255,255,255,.72);border:1px solid var(--line);
  transition:border-color .25s ease,box-shadow .25s ease;
}
body.legal .collect .row:hover{border-color:#C3DAF0;box-shadow:0 4px 16px rgba(11,67,115,.06)}
body.legal .collect .ic{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
}
body.legal .collect .ic svg{
  width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
body.legal .collect .cat{
  font-family:var(--brandfont);font-weight:900;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted);margin:0 0 5px;
}
body.legal .collect .what{margin:0 0 6px;font-size:16.5px;color:var(--ink);font-weight:700;line-height:1.35}
body.legal .collect .why{margin:0;font-size:15.5px;line-height:1.58;color:var(--body)}
@media(max-width:520px){
  body.legal .collect .row{grid-template-columns:1fr;gap:11px}
}

/* ---- the promise ---------------------------------------------------------
   The strongest visual moment on the page, because it is the part a parent is
   actually anxious about. Green, a shield, and four flat statements.
   ------------------------------------------------------------------------- */
body.legal .promise{
  position:relative;overflow:hidden;border-radius:var(--r);padding:30px 28px 28px;
  margin:10px 0 18px;
  background:
    radial-gradient(420px 260px at 88% 0%, rgba(34,160,107,.14), transparent 62%),
    linear-gradient(160deg,rgba(233,247,236,.92),rgba(255,255,255,.80));
  border:1px solid #BFE5C6;
  box-shadow:0 10px 34px rgba(34,160,107,.10),0 1px 2px rgba(34,160,107,.06);
}
body.legal .promise .lbl{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 13px;
  font-family:var(--brandfont);font-weight:900;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#1B7A52;
}
body.legal .promise .shield{
  position:absolute;right:22px;top:20px;width:64px;height:64px;opacity:.16;
  fill:none;stroke:#22A06B;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
body.legal .promise h3{
  margin:0 0 16px;font-family:var(--serif);font-weight:600;font-size:23px;
  color:var(--ink);letter-spacing:-.01em;
}
body.legal .promise ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
body.legal .promise li{
  display:grid;grid-template-columns:21px 1fr;gap:12px;align-items:start;
  font-size:16.5px;line-height:1.56;color:#2F4A3C;
}
body.legal .promise li svg{
  width:21px;height:21px;margin-top:2px;fill:none;stroke:#22A06B;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
@media(max-width:560px){ body.legal .promise .shield{display:none} }

/* ---- trust signals -------------------------------------------------------
   Four short badges. Each one is only here because the policy above actually
   says it: encryption in transit, first name and grade only, no selling or
   advertising, and an operator based in Kasarani.
   ------------------------------------------------------------------------- */
body.legal .signals{
  display:flex;flex-wrap:wrap;gap:9px;margin:0 0 6px;padding:0;list-style:none;
}
body.legal .signals li{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.76);border:1px solid rgba(154,190,224,.45);
  font-size:13px;color:#42597A;
}
body.legal .signals svg{
  width:15px;height:15px;fill:none;stroke:#1B7A52;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none;
}

/* ---- the three outcomes --------------------------------------------------
   The whole policy answers one question, so that answer goes first, as three
   states with the outcome stated flatly on the right. The detail underneath is
   unchanged; this is only the fast path to it.
   ------------------------------------------------------------------------- */
body.legal .outcomes{
  position:relative;overflow:hidden;border-radius:var(--r);padding:8px 26px 18px;
  margin:0 0 6px;background:rgba(255,255,255,.84);
  border:1px solid var(--line);box-shadow:var(--shadow);
}
body.legal .outcomes::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--spectrum);
}
body.legal .outcome{
  display:grid;grid-template-columns:38px 1fr auto;gap:15px;align-items:center;
  padding:19px 0;border-top:1px solid rgba(206,218,233,.65);
}
body.legal .outcome:first-of-type{border-top:0}
body.legal .outcome .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center}
body.legal .outcome .ic svg{
  width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
body.legal .outcome .st{margin:0;font-size:16.5px;line-height:1.45;color:var(--ink);font-weight:700}
body.legal .outcome .sd{margin:3px 0 0;font-size:14.5px;line-height:1.5;color:var(--body)}
/* Scoped to .outcome on purpose: `.tag` is also the brand tagline in the shared
   footer, and an unscoped rule here tied with `.fbrand .tag` and won on source
   order, turning "Mimi Naweza. Mimi Hodari." into an uppercase pill. */
body.legal .outcome .tag{
  font-family:var(--brandfont);font-weight:900;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;padding:7px 13px;border-radius:999px;white-space:nowrap;
}
body.legal .outcome .tag.no{background:#FDECEC;color:#B3121B;border:1px solid #F3CFCF}
body.legal .outcome .tag.yes{background:var(--green-bg);color:var(--green-deep);border:1px solid var(--green-line)}
body.legal .outcome .tag.pay{background:#FFF9EF;color:var(--orange-deep);border:1px solid var(--amber-line)}
body.legal .i-red{background:#FDECEC;color:#B3121B}
@media(max-width:560px){
  body.legal .outcome{grid-template-columns:38px 1fr;row-gap:11px}
  body.legal .outcome .tag{grid-column:2;justify-self:start}
}

/* ---- the three cases we refund ------------------------------------------ */
body.legal .cases{display:grid;gap:13px;margin:4px 0 8px}
body.legal .case{
  position:relative;border-radius:16px;padding:20px 22px 20px 23px;
  background:linear-gradient(160deg,rgba(233,247,236,.72),rgba(255,255,255,.80));
  border:1px solid var(--green-line);
  transition:box-shadow .25s ease,transform .25s cubic-bezier(.3,.9,.4,1);
}
body.legal .case:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(34,160,107,.12)}
body.legal .case::before{
  content:"";position:absolute;left:0;top:16px;bottom:16px;width:3px;border-radius:3px;
  background:#22A06B;
}
body.legal .case .n{
  font-family:var(--brandfont);font-weight:900;font-size:11px;letter-spacing:.14em;
  color:#1B7A52;margin:0 0 7px;
  /* `body.legal .sec .n` above also matches this, so the spectrum it sets has to
     be undone or it sits clipped to the text behind the green. */
  background-image:none;-webkit-background-clip:border-box;background-clip:border-box;
}
body.legal .case h3{
  margin:0 0 7px;font-family:var(--serif);font-weight:600;font-size:18.5px;
  color:var(--ink);line-height:1.34;
}
body.legal .case p{margin:0;font-size:16px;line-height:1.6;color:#33503F}

/* ---- am I eligible -------------------------------------------------------
   Three steps, not a calculator. It restates the rules already on the page and
   promises nothing the policy does not: every branch ends by telling somebody
   to write to us, which is what the policy says to do anyway.
   ------------------------------------------------------------------------- */
body.legal .decide{
  border-radius:18px;padding:24px 24px 22px;margin:6px 0 10px;
  background:linear-gradient(170deg,rgba(255,255,255,.86),rgba(234,245,255,.70));
  border:1px solid rgba(154,190,224,.45);
}
body.legal .decide .lbl{
  font-family:var(--brandfont);font-weight:900;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#123B63;margin:0 0 16px;
}
body.legal .step{
  display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start;
  position:relative;padding:0 0 18px;
}
body.legal .step:last-child{padding-bottom:0}
body.legal .step::before{
  content:"";position:absolute;left:12px;top:26px;bottom:0;width:2px;
  background:rgba(154,190,224,.5);
}
body.legal .step:last-child::before{display:none}
body.legal .step .b{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:#123B63;color:#fff;font-family:var(--brandfont);font-weight:900;font-size:12px;
}
body.legal .step .q{margin:2px 0 0;font-size:16.5px;line-height:1.5;color:var(--ink);font-weight:700}
body.legal .branches{display:grid;gap:9px;margin:11px 0 0}
body.legal .branch{
  display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start;
  padding:12px 15px;border-radius:12px;font-size:15.5px;line-height:1.52;
}
body.legal .branch b{font-family:var(--brandfont);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;padding-top:3px}
body.legal .branch.y{background:var(--green-bg);border:1px solid var(--green-line);color:#2F4A3C}
body.legal .branch.y b{color:var(--green-deep)}
body.legal .branch.n{background:#FDECEC;border:1px solid #F3CFCF;color:#5C3A3A}
body.legal .branch.n b{color:#B3121B}

/* ---- how the money comes back ------------------------------------------- */
body.legal .paycard{
  position:relative;overflow:hidden;border-radius:16px;padding:22px 24px;margin:8px 0 16px;
  background:linear-gradient(160deg,#FFF9EF,rgba(255,255,255,.82));
  border:1px solid var(--amber-line);
}
body.legal .paycard .lbl{
  display:flex;align-items:center;gap:9px;margin:0 0 11px;
  font-family:var(--brandfont);font-weight:900;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--orange-deep);
}
body.legal .paycard .lbl svg{
  width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
body.legal .paycard p{margin:0 0 9px;font-size:16.5px;line-height:1.6;color:var(--body)}
body.legal .paycard p:last-child{margin-bottom:0}
body.legal .paycard b{color:var(--ink)}

/* The feedback widget lives in feedback.css, linked separately, because the
   pages that are not built on this stylesheet need it too. */


/* ===========================================================================
   CHROME IMMUNITY - the bar and the footer look the same on every page.

   index.html carries 42KB of its own design and is linked AFTER this file, so
   anything it redeclares at equal specificity wins. Three things it redeclares
   reached into the shared chrome and changed it:

     .btn / .btn.primary   the Start free button came out gold, pill-shaped,
                           Nunito 15px with brown text, instead of blue, 11px
                           radius, Cambria 14px, white.
     --serif               it lists Literata before Cambria, so every serif in
                           the bar and footer rendered in a different face.
     .fmail                the footer address came out 27px instead of 25px.

   Rather than delete rules that page needs for its own body, the chrome states
   its own. Two techniques:

     1. The font tokens are REDEFINED ON the chrome elements. Custom properties
        inherit, so a page's :root value never reaches inside .site-nav or
        .site-foot, and every existing rule above that says var(--serif) keeps
        working untouched.

     2. Where a page competes at equal specificity, the selector here carries
        one more element: `.site-nav a.navcta` is (0,2,1) and beats both
        `.btn.primary` and `.btn.classic` at (0,2,0), whatever the load order.
   ========================================================================= */

.site-nav, .site-foot{
  --serif:     Cambria,"Literata",Georgia,"Times New Roman",serif;
  --text:      Cambria,"Literata",Georgia,"Times New Roman",serif;
  --brandfont: "Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* The one button on the bar. Restated in full: a page that styles .btn for its
   own hero must not reshape this. */
.site-nav a.navcta{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--serif);font-weight:600;font-size:14px;letter-spacing:.05em;
  padding:11px 18px;border-radius:11px;border:0;cursor:pointer;text-align:center;
  background:linear-gradient(180deg,var(--blue),var(--blue-deep));color:#fff;
  box-shadow:0 4px 14px rgba(11,67,115,.28),inset 0 0 0 1px rgba(255,213,79,.4);
  transition:transform .14s ease,box-shadow .14s ease;
}
.site-nav a.navcta:hover{
  transform:translateY(-2px);
  box-shadow:0 9px 24px rgba(11,67,115,.36),inset 0 0 0 1px rgba(255,213,79,.75);
}
.site-nav a.navcta:active{transform:translateY(1px)}

/* ...and it still has to leave the bar on a phone. site.css:152 says so
   already - `.navcta{display:none}` inside @media(max-width:900px), with
   the comment "it reappears inside the panel" - but that rule is (0,1,0)
   and the immunity rule above is (0,2,1) with no media query, so immunity
   won at every width and the bar button stayed up next to the hamburger
   while the open panel showed a second "Start free" of its own. Two of the
   same button, on every page, on every phone. Restated at the immunity
   rule's own specificity so both intents hold. */
@media(max-width:900px){
  .site-nav a.navcta{display:none}
}

/* The chrome's own inner rails. `.wrap` is a name almost every page defines
   for its content column: pricing sets `padding:34px 18px 90px` on it, which
   the bar inherited and came out 124px tall instead of 80. The chrome states
   its own, at a specificity a bare `.wrap` cannot reach. */
.site-nav .wrap{padding:0 20px;max-width:1120px}
.site-foot .wrap{padding:52px 20px 40px;max-width:1120px}

/* The footer address. */
.site-foot .fmail{font-size:clamp(19px,2.9vw,25px)}

/* The panel's call to action on a phone, for the same reason as the bar's. */
.site-nav .navlinks a.mobcta{
  font-family:var(--brandfont);font-weight:800;font-size:15.5px;letter-spacing:0;
  color:#fff;background:linear-gradient(180deg,var(--blue),var(--blue-deep));
}

/* ---- deep links clear the sticky bar ------------------------------------
   Anything that can be linked to by id is offset by the height of the bar
   plus a little air, so a section scrolled to the top of the window is not
   sitting underneath the navigation. */
section[id], header[id], div[id].band{ scroll-margin-top:92px }
@media(max-width:900px){ section[id], header[id], div[id].band{ scroll-margin-top:78px } }