/* Eduiey's static pages: /about, /privacy, /terms, /support, /delete-account and the four
   /…-management-software pages. Plain HTML, served by Vercel without the app, so search engines and
   Google Play can read them.

   They share the landing page's design (web/index.html, the measured copy of the app's landing screen,
   lib/features/auth/screens/landing_screen.dart): the same fonts and font files, the same sizes for the
   same jobs, the same top bar, glass cards, buttons, footer and background, and the same entrance and
   reveal-on-scroll animation (_site.js). Change the landing page and keep these in step.

   Sizes, as on the landing page (font-size / line-height, px):
     page title      34/36, 52/55 from 820px     (hero title)
     section title   30/33                        (section heads)
     closing title   26/29, 34/37 from 820px      (final call to action)
     card title      19/29                        (organisation cards)
     small title     16/24                        (trust points)
     lead            15.5/24, 17.5/27 from 820px  (hero subtitle)
     body            15/23                        (section subtitles)
     card text       14/21     small text 13.5/20     links, footer 12.5
     eyebrow pill    11.5/17   kicker 12/18   (bold, spaced capitals)
     buttons         16/24 brand font; top bar link 13.5/20 semibold
   Text without a size of its own is 15/23 with 0.25px letter spacing, like the app's theme. Headings use
   the brand font thickened like the app draws it (it has only one weight). */

@font-face{font-family:'EduieyBauhaus';src:url('/landing/bauhaus.woff') format('woff');font-weight:100 900;font-display:block}
@font-face{font-family:'EduieyInter';src:url('/landing/inter-400.woff') format('woff');font-weight:400;font-display:block}
@font-face{font-family:'EduieyInter';src:url('/landing/inter-500.woff') format('woff');font-weight:500;font-display:block}
@font-face{font-family:'EduieyInter';src:url('/landing/inter-600.woff') format('woff');font-weight:600;font-display:block}
@font-face{font-family:'EduieyInter';src:url('/landing/inter-700.woff') format('woff');font-weight:700;font-display:block}

:root{
  --pad:20px; --maxw:1120px; --vh:1vh;
  --display:'EduieyBauhaus','EduieyInter',system-ui,sans-serif;
  --text:'EduieyInter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ink:rgba(255,255,255,.88); --lead:rgba(255,255,255,.9); --muted:rgba(255,255,255,.72);
  --kicker:#DCEDC8; --gold:#FFD54F; --green:#2E7D32; --green-2:#388E3C; --green-light:#66BB6A;
  --line:rgba(255,255,255,.22); --rule:rgba(255,255,255,.14);
  color-scheme:light;
}
@supports (height:1dvh){:root{--vh:1dvh}}
@media (min-width:820px){:root{--pad:40px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;background:var(--green);color:var(--ink);
  font-family:var(--text);font-size:15px;line-height:23px;letter-spacing:.25px;
  font-kerning:normal;font-synthesis:none;overflow-x:hidden;
}
.ic{display:block;flex:none;fill:currentColor}
h1,h2,h3,h4,.bh{font-family:var(--display);font-weight:700;color:#fff;-webkit-text-stroke:calc(1em / 24) currentColor}
p{margin:0 0 12px}
strong,b{font-weight:600;color:#fff}
em{color:#fff}
a{color:var(--gold);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:#ffe38a}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:6px}

/* ── Background: the landing's gradient, a light at the top, three drifting blobs, and faint stationery ── */
.bg,.float{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg{background:radial-gradient(circle calc(60 * var(--vh)) at 50% -12%,rgba(255,255,255,.12),rgba(255,255,255,0)),linear-gradient(90deg,#2E7D32,#388E3C)}
.bg i,.bg b{position:absolute;display:block;border-radius:50%}
.bg b{top:0;right:0;bottom:0;left:0}
.bg .b1{left:calc(16% - 42vw);top:calc(24% - 42vw);width:84vw;height:84vw;animation:bx1 7s ease-in-out infinite alternate}
.bg .b1 b{background:radial-gradient(circle closest-side,rgba(255,255,255,.06),rgba(255,255,255,0));animation:by1 7s ease-in-out -3.5s infinite alternate}
.bg .b2{left:calc(86% - 50vw);top:calc(50% - 50vw);width:100vw;height:100vw;animation:bx2 8.75s ease-in-out infinite alternate}
.bg .b2 b{background:radial-gradient(circle closest-side,rgba(255,255,255,.05),rgba(255,255,255,0));animation:by2 7.8s ease-in-out infinite alternate}
.bg .b3{left:calc(40% - 50vw);top:calc(86% - 50vw);width:100vw;height:100vw;animation:bx3 5.85s ease-in-out infinite alternate}
.bg .b3 b{background:radial-gradient(circle closest-side,rgba(255,255,255,.05),rgba(255,255,255,0));animation:by3 6.35s ease-in-out infinite alternate}
@keyframes bx1{from{transform:translateX(-22px)}to{transform:translateX(22px)}}
@keyframes by1{from{transform:translateY(-18px)}to{transform:translateY(18px)}}
@keyframes bx2{from{transform:translateX(-26px)}to{transform:translateX(26px)}}
@keyframes by2{from{transform:translateY(-20px)}to{transform:translateY(20px)}}
@keyframes bx3{from{transform:translateX(-20px)}to{transform:translateX(20px)}}
@keyframes by3{from{transform:translateY(-16px)}to{transform:translateY(16px)}}
.float svg{position:absolute;fill:rgba(255,255,255,.07);animation:bob 22s ease-in-out infinite}
@keyframes bob{0%,50%,100%{translate:0 0}25%{translate:0 10px}75%{translate:0 -10px}}

/* ── Top bar: badge 40 · 11 · wordmark 25 · · · links · Get Started (from 820px) ── */
.top{display:flex;flex-wrap:wrap;align-items:center;padding:18px var(--pad) 6px}
.brand{display:flex;align-items:center;color:#fff;text-decoration:none}
.brand:hover{color:#fff}
.badge{width:40px;height:40px;margin-right:11px;display:flex;align-items:center;justify-content:center;flex:none}
.badge .ic{width:40px;height:40px}
/* The wordmark: three separate texts; the "i" loses its top 30% (the font's dot) for a yellow one. */
.wm{display:flex;font-family:var(--display);font-weight:700;font-size:25px;line-height:25px;letter-spacing:.5px;-webkit-text-stroke:calc(1em / 24) currentColor}
.wm>span{display:block;position:relative}
.wm>span>span,.wm>span:not(.wm-i){position:relative;left:.25px;top:.5px}
.wm-i>span{display:block;clip-path:polygon(-50% 30%,150% 30%,150% 150%,-50% 150%)}
.wm-i::after{content:"";position:absolute;top:-.75px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--gold)}
.topnav{display:flex;flex-wrap:wrap;align-items:center;gap:2px 18px;margin-left:auto}
.topnav a{font-weight:600;font-size:13.5px;line-height:20px;color:rgba(255,255,255,.85);text-decoration:none;padding:6px 0}
.topnav a:hover{color:#fff}
.topnav a[aria-current="page"]{color:#fff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.topcta{display:none;align-items:center;margin-left:auto;padding:10px 18px;border:1px solid rgba(255,255,255,.4);border-radius:999px;background:rgba(255,255,255,.12);color:#fff;text-decoration:none;font-weight:600;font-size:13.5px;line-height:20px;transition:background-color .18s}
.topcta:hover{color:#fff;background:rgba(255,255,255,.22)}
.topcta .ic{width:16px;height:16px;margin-left:6px}
.topnav+.topcta{margin-left:24px}
@media (min-width:820px){.topcta{display:flex}}
@media (max-width:819px){.topnav{order:3;width:100%;margin:12px 0 0;gap:2px 16px}}

/* ── Page head: the landing hero's sizes and spacing ── */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:var(--maxw);margin:0 auto;padding:40px var(--pad) 0}
.crumbs{margin:0 0 20px;font-size:12.5px;line-height:19px;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:#fff}
.eyebrow{margin:0 0 20px;padding:7px 14px;border:1px solid rgba(255,255,255,.26);border-radius:999px;background:rgba(255,255,255,.14);font-weight:700;font-size:11.5px;line-height:17px;letter-spacing:1.4px;text-transform:uppercase;color:rgba(255,255,255,.95)}
.hero h1{margin:0;max-width:960px;font-size:34px;line-height:36px;letter-spacing:.3px}
.lede{margin:20px 0 0;max-width:680px;font-size:15.5px;line-height:24px;color:var(--lead)}
.updated,.meta{margin:16px 0 0;font-size:12.5px;line-height:19px;color:var(--muted)}
.ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 14px;margin-top:34px}
@media (min-width:820px){
  .hero{padding-top:56px}
  .hero h1{font-size:52px;line-height:55px}
  .lede{font-size:17.5px;line-height:27px}
}

/* ── Buttons: the landing's call-to-action pills ── */
.btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:8px 24px;border-radius:999px;font-family:var(--display);font-weight:700;font-size:16px;line-height:24px;letter-spacing:.25px;text-decoration:none;-webkit-text-stroke:calc(1em / 24) currentColor;transition:transform .2s ease-out,box-shadow .2s ease-out,background-color .2s}
.btn .ic{width:20px;height:20px;margin-right:9px;-webkit-text-stroke:0}
.btn.primary{background:#fff;color:var(--green)!important;box-shadow:0 8px 19.5px rgba(0,0,0,.18)}
.btn.ghost{border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.14);color:#fff!important}
@media (hover:hover){
  .btn.primary:hover{transform:translateY(-2px);box-shadow:0 12px 31px rgba(0,0,0,.28)}
  .btn.ghost:hover{background:rgba(255,255,255,.22)}
}

/* ── Content: glass panels in the landing's 1120px column ── */
.page{max-width:var(--maxw);margin:0 auto;padding:48px var(--pad) 0}
/* _glass(): a see-through fill with a hairline border, over a soft shadow that shows through the fill. */
.card,.glass,.features>li,.also>a,.callout,.contact,.panel{position:relative;z-index:0}
.card::before,.glass::before,.features>li::before,.also>a::before,.callout::before,.contact::before,.panel::before,
.card::after,.glass::after,.features>li::after,.also>a::after,.callout::after,.contact::after,.panel::after{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;border-radius:inherit;transition:all .22s ease-out}
.card::before,.glass::before,.features>li::before,.also>a::before,.callout::before,.contact::before,.panel::before{
  background:rgba(0,0,0,.1);transform:translateY(10px);filter:blur(10.89px)}
.card::after,.glass::after,.features>li::after,.also>a::after,.callout::after,.contact::after,.panel::after{
  box-sizing:border-box;border:1px solid var(--line);background:rgba(255,255,255,var(--fill,.12))}
.card,.glass,.panel{--fill:.13;border-radius:26px;padding:27px;color:var(--ink)}
.card+.card,.glass+.glass,.page>*+*{margin-top:24px}
@media (min-width:820px){.card,.glass,.panel{padding:41px}}

/* Headings and text inside the panels */
.card h2,.glass h2,.panel h2{margin:30px 0 12px;font-size:30px;line-height:33px}
.card>h2:first-child,.glass>h2:first-child,.panel>h2:first-child{margin-top:0}
.card h3,.glass h3,.panel h3{margin:24px 0 8px;font-size:19px;line-height:29px}
.card h4{margin:20px 0 4px;font-size:16px;line-height:24px}
.card p,.card li,.glass p,.panel p,.panel li{font-size:15px;line-height:23px}
.intro{margin:0 0 22px;max-width:620px}
.card .lede{margin:0 0 22px;max-width:none;text-align:left}
ul,ol{margin:0 0 14px;padding-left:22px}
li{margin:0 0 8px}
li::marker{color:var(--green-light)}
.kicker{margin:0 0 12px;font-weight:700;font-size:12px;line-height:18px;letter-spacing:1.4px;text-transform:uppercase;color:var(--kicker)}

/* A long document (privacy, terms, support, account deletion): one panel, its headings at card-title size */
.doc .card h2{margin:30px 0 8px;padding-top:28px;border-top:1px solid var(--rule);font-size:19px;line-height:29px}
.doc .card h2:first-of-type{margin-top:8px;padding-top:0;border-top:none}
.doc .card h3{margin:20px 0 4px;font-size:16px;line-height:24px}

/* Tables */
.tw{overflow-x:auto;margin:0 0 18px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.06)}
table{border-collapse:collapse;width:100%;font-size:14px;line-height:21px;color:var(--ink)}
th,td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--rule);vertical-align:top}
th{background:rgba(255,255,255,.08);font-weight:700;font-size:12px;line-height:18px;letter-spacing:1.4px;text-transform:uppercase;color:var(--kicker);white-space:nowrap}
tbody tr:last-child td{border-bottom:none}

/* Notes and contact boxes: the landing's smaller glass cards */
.callout{--fill:.1;border-radius:20px;padding:19px;margin:0 0 18px}
.callout p:last-child{margin-bottom:0}
.callout .label{display:block;margin:0 0 6px;font-weight:700;font-size:12px;line-height:18px;letter-spacing:1.4px;text-transform:uppercase;color:var(--kicker)}
.callout.warn::after{background:rgba(255,213,79,.12);border-color:rgba(255,213,79,.45)}
.callout.warn .label{color:var(--gold)}
.contact{--fill:.12;border-radius:20px;padding:23px;margin:30px 0 4px}
.contact h3{margin:0 0 8px;font-size:19px;line-height:29px}
.contact p{margin:0 0 8px;color:rgba(255,255,255,.94)}
.contact p:last-child{margin-bottom:0}
.contact a{color:#fff;text-decoration:underline}
.contact a:hover{color:rgba(255,255,255,.82)}
.mailbtn{margin-top:6px}

/* Card grids: the landing's organisation cards (padding 22, title 19, text 14) */
.features{list-style:none;padding:0;margin:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.features>li{--fill:.1;margin:0;padding:23px;border-radius:20px}
.features h3{margin:0 0 8px;font-size:19px;line-height:29px}
.features p,.features>li p{margin:0;font-size:14px;line-height:21px}
.features.people{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.features.people>li:last-child:nth-child(odd){grid-column:1/-1}
.also{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.also>a{--fill:.12;display:flex;flex-direction:column;align-items:flex-start;padding:23px;border-radius:20px;color:#fff;text-decoration:none;transition:transform .22s ease-out}
.also strong{font-family:var(--display);font-weight:700;font-size:19px;line-height:29px;-webkit-text-stroke:calc(19px / 24) currentColor}
.also span{margin-top:8px;font-size:14px;line-height:21px;color:var(--ink)}
.also .more{display:flex;align-items:center;margin-top:12px;font-weight:600;font-size:13.5px;line-height:20px;color:#fff}
.also .more .ic{width:16px;height:16px;margin-left:4px}
@media (hover:hover){
  .also>a:hover{--fill:.18;transform:translateY(-5px);color:#fff}
  .also>a:hover::before{background:rgba(0,0,0,.2);transform:translateY(16px);filter:blur(17.82px)}
}

/* Numbered steps, a day's timeline, questions */
.steps{list-style:none;counter-reset:step;padding:0;margin:0 0 14px;display:grid;gap:14px}
.steps li{counter-increment:step;position:relative;margin:0;padding:8px 0 0 54px;min-height:40px}
.steps li::before{content:counter(step);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:16px;line-height:24px;color:#fff;-webkit-text-stroke:calc(16px / 24) currentColor}
.steps strong{display:block}
.day{list-style:none;padding:0;margin:0}
.day li{margin:0 0 12px;padding-left:16px;border-left:3px solid var(--green-light)}
.faq details{border-bottom:1px solid var(--rule);padding:14px 0}
.faq details:last-child{border-bottom:none}
.faq summary{cursor:pointer;list-style:none;position:relative;padding-right:30px;font-family:var(--display);font-weight:700;font-size:16px;line-height:24px;color:#fff;-webkit-text-stroke:calc(16px / 24) currentColor}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:-1px;font-family:var(--text);font-weight:400;font-size:22px;color:var(--gold);-webkit-text-stroke:0}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:8px 0 0}

/* The closing call to action: the landing's final section */
.cta-band{text-align:center}
.card.cta-band h2{margin:0 0 12px;font-size:26px;line-height:29px}
.cta-band p{margin:0 auto;max-width:620px;font-size:15.5px;line-height:23px}
.cta-band .ctas{margin-top:26px}
@media (min-width:820px){.card.cta-band h2{font-size:34px;line-height:37px}}

/* ── Footer: the landing's ── */
.foot{display:flow-root;max-width:var(--maxw);margin:0 auto;padding:40px var(--pad) 28px;text-align:center}
.foot .rule{height:1px;margin:20px 0;background:var(--rule)}
.foot p{margin:0;font-size:12.5px;line-height:19px;color:var(--muted)}
.foot .links{margin-top:6px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center}
.foot .links+.links{margin-top:0}
.foot .links a{display:flex;align-items:center;height:36px;padding:0 8px;font-size:12.5px;line-height:15px;letter-spacing:.1px;color:var(--muted);text-decoration:none}
.foot .links a:hover,.foot .links a[aria-current="page"]{color:#fff}
.foot .links span{font-size:12.5px;line-height:19px;color:rgba(255,255,255,.4)}
.foot .admin{display:flex;justify-content:center}
.foot .admin a{display:flex;align-items:center;height:48px;padding:0 12px;font-size:12.5px;line-height:15px;letter-spacing:.1px;color:rgba(255,255,255,.6);text-decoration:none}
.foot .admin a:hover{color:#fff}
.foot .admin .ic{width:15px;height:15px;margin-right:8px}
@media (hover:hover) and (pointer:fine){.foot .links a{height:28px}.foot .admin a{height:32px}}

/* ── The landing's entrance and reveal-on-scroll (run by _site.js): each element fades in (560 ms,
   easeOut) and rises 14% of its height, at most 40px (640 ms, easeOutCubic), after its delay ── */
.wait .top,.wait .hero,.wait .page,.wait .foot{visibility:hidden}
.rv-hide{opacity:0;transform:translateY(min(14%,40px))}
.rv-in{animation:rv-fade .56s cubic-bezier(0,0,.58,1) backwards,rv-up .64s cubic-bezier(.215,.61,.355,1) backwards}
@keyframes rv-fade{from{opacity:0}to{opacity:1}}
@keyframes rv-up{from{transform:translateY(min(14%,40px))}to{transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bg i,.bg b,.float svg{animation:none}
  .rv-hide{opacity:1;transform:none}
  .rv-in{animation:none}
  .btn,.topcta,.also>a{transition:none}
}
@media print{
  .bg,.float,.topcta,.topnav,.foot .admin{display:none}
  body{background:#fff;color:#111}
  h1,h2,h3,h4,strong,.brand,.card,.lede,.hero h1{color:#111!important;-webkit-text-stroke:0}
  .badge{background:#2E7D32;border-radius:9px} /* the logo's white pages need their green on paper */
  .card::before,.card::after,.features>li::before,.features>li::after{display:none}
  .rv-hide{opacity:1!important;transform:none!important}
  .wait .top,.wait .hero,.wait .page,.wait .foot{visibility:visible}
  a{color:#1B5E20}
}