/* home.css: the staff-core.app homepage, blue redesign (20 Oct 2026).
   Figtree is served from /fonts.css; the site makes no third-party requests. */
/* Layout: a blue hero with a curved foot, the real app inside a tablet held in two hands,
   then calm white and pale-blue bands, each with one thing you can press. Single light look on purpose. */
:root{
  --blue:#005EB8;      /* brand blue, the app's own */
  --deep:#003087;      /* deep blue for headings and the hero foot */
  --navy:#00205C;      /* darkest band and footer */
  --sky:#41B6E6;       /* light accent on blue */
  --warm:#FFB81C;      /* one warm highlight */
  --ink:#212B32;       /* body text */
  --ink2:#4C6272;      /* secondary text */
  --line:#D8E2EA;
  --pale:#EAF2FB;      /* pale band */
  --canvas:#F0F4F5;    /* app canvas */
  --white:#FFFFFF;
  --ok:#007F3B; --ok50:#E6F4EC; --bad:#D5281B; --bad50:#FDECEC; --amb:#8A4B00; --amb50:#FEF3E2;
  --f:"Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;   /* self-hosted in /fonts.css */
  --r-tag:12px; --r-tile:16px; --r-card:24px;
  --sh:0 1px 2px rgba(0,32,92,.06), 0 12px 32px -14px rgba(0,32,92,.28);
  color-scheme: light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--f);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--white)}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f);text-wrap:balance;margin:0;letter-spacing:-.02em}
h2{font-size:clamp(30px,4vw,46px);line-height:1.08;font-weight:900;color:var(--deep)}
h3{font-size:20px;font-weight:800;color:var(--deep);letter-spacing:-.01em}
p{margin:0}
.kick{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--blue)}
.lead{font-size:19px;color:var(--ink2);max-width:60ch}
a{color:inherit}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:999px;font:800 16.5px/1 var(--f);text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .2s ease, box-shadow .2s ease, background .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible,.tog:focus-visible,.tab:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--warm);outline-offset:3px}
.btn-warm{background:var(--warm);color:#1E1A0B;box-shadow:0 10px 24px -10px rgba(255,184,28,.9)}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 10px 24px -12px rgba(0,94,184,.9)}
.btn-line{border-color:var(--line);color:var(--deep);background:#fff}

/* ── header ── */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:22px;height:72px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:21px;color:var(--deep);text-decoration:none;letter-spacing:-.02em}
.logo svg{width:38px;height:38px;flex:0 0 38px}
.nav{display:flex;gap:4px;margin-left:12px}
.nav a{text-decoration:none;font-weight:700;font-size:15px;color:var(--ink2);padding:10px 12px;border-radius:999px}
.nav a:hover{color:var(--blue);background:var(--pale)}
.hdr .sp{flex:1}
.hdr .btn{min-height:46px;padding:0 20px;font-size:15px}
.menu{display:none}
@media (max-width:980px){.nav{display:none}.menu{display:inline-flex}.nav.open{display:flex;flex-direction:column;position:absolute;left:0;right:0;top:72px;background:#fff;border-bottom:1px solid var(--line);padding:10px max(20px,env(safe-area-inset-left,0px)) 16px;margin:0;box-shadow:0 20px 30px -20px rgba(0,32,92,.3)}.nav.open a{font-size:17px;padding:14px 12px}}

/* ── hero ── */
.hero{position:relative;background:linear-gradient(160deg,#0B6CC9 0%,var(--blue) 38%,var(--deep) 100%);color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;right:-12%;top:-30%;width:70vw;height:70vw;max-width:900px;max-height:900px;border-radius:50%;background:radial-gradient(circle at 40% 40%,rgba(65,182,230,.45),rgba(65,182,230,0) 62%);animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(-40px,30px) scale(1.06)}}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center;padding-block:64px 120px}
.hero .kick{color:#CFE6FA}
.hero .kick i{width:8px;height:8px;border-radius:50%;background:var(--warm);box-shadow:0 0 0 0 rgba(255,184,28,.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(255,184,28,0)}100%{box-shadow:0 0 0 0 rgba(255,184,28,0)}}
.hero h1{font-size:clamp(40px,5.6vw,68px);line-height:1.02;font-weight:900;margin:18px 0 20px}
.hero h1 em{font-style:italic;color:var(--warm)}
.hero .lead{color:#DCEBFA}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.hero .facts{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;font-size:14.5px;font-weight:700;color:#CFE6FA}
.hero .facts span{display:flex;align-items:center;gap:8px}
.hero .facts b{color:#fff}
.curve{position:absolute;left:0;right:0;bottom:-1px;height:90px;display:block;width:100%}

/* the tablet held in two hands; the app runs inside the screen */
.held{position:relative;aspect-ratio:5/4;width:100%;max-width:100%;border-radius:32px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,16,48,.65);background:#C9C2B8;animation:float 7s ease-in-out infinite}
/* the photo is shown 1.6 times wider than the frame, so the tablet fills it; the screen sits on the photo, so it moves with it */
.photo{position:absolute;width:160%;left:-30%;top:-6%;aspect-ratio:1920/1080}
.photo img{position:absolute;inset:0;width:100%;height:100%;display:block}
@keyframes float{50%{transform:translateY(-8px)}}
.screen{position:absolute;left:31.9%;top:24.7%;width:37.6%;height:50%;border-radius:1.2% / 1.6%;overflow:hidden;background:var(--canvas)}
.app{position:absolute;left:0;top:0;width:480px;height:360px;transform-origin:0 0;font-family:var(--f);color:var(--ink)}
.app .top{height:44px;background:#fff;border-bottom:1px solid #E3E8EC;display:flex;align-items:center;gap:8px;padding:0 12px}
.app .top .mk{width:24px;height:24px}
.app .top b{font-size:13.5px;font-weight:800}
.app .top small{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink2)}
.app .round{margin:10px 12px 8px;border-radius:14px;background:linear-gradient(135deg,#0461B9,#0B4F94);color:#fff;padding:10px 12px;display:flex;align-items:center;gap:12px}
.ring{width:46px;height:46px;flex:0 0 46px}
.ring circle{fill:none;stroke-width:6}
.ring .bg{stroke:rgba(255,255,255,.22)}
.ring .fg{stroke:var(--warm);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .6s ease}
.round b{display:block;font-size:15px;font-weight:800}
.round small{font-size:11px;opacity:.9}
.doses{display:flex;flex-direction:column;gap:6px;padding:0 12px}
.dose{background:#fff;border-radius:12px;border:1px solid #E3E8EC;display:flex;align-items:center;gap:9px;padding:7px 9px;transition:border-color .3s ease, background .3s ease}
.dose .av{width:28px;height:28px;border-radius:50%;background:#D3E4F6;color:#0B3D6E;display:grid;place-items:center;font-size:10.5px;font-weight:800;flex:0 0 28px}
.dose .t{flex:1;min-width:0;line-height:1.2}
.dose .t b{display:block;font-size:12px;font-weight:800}
.dose .t small{font-size:10.5px;color:var(--ink2)}
.dose .st{font-size:10.5px;font-weight:800;border-radius:999px;padding:5px 10px;white-space:nowrap;transition:all .3s ease}
.dose .st.due{background:var(--blue);color:#fff}
.dose .st.done{background:var(--ok50);color:var(--ok)}
.dose.flash{border-color:#7BC49B;background:#F4FBF7}
.app .note{position:absolute;left:12px;right:12px;bottom:10px;background:#fff;border-radius:12px;border:1px solid #E3E8EC;box-shadow:0 8px 20px -10px rgba(0,0,0,.3);padding:7px 10px;font-size:11px;font-weight:700;display:flex;align-items:center;gap:8px;transform:translateY(130%);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.app .note.on{transform:none}
.app .note i{width:9px;height:9px;border-radius:50%;background:var(--ok);flex:0 0 9px}
.tap{position:absolute;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.55);border:2px solid rgba(0,48,135,.35);pointer-events:none;opacity:0;transition:opacity .2s, left .5s ease, top .5s ease}
.tap.on{opacity:1}
.tap.press{transform:scale(.8)}

/* ── ticker ── */
.ticker{background:var(--navy);color:#CFE6FA;overflow:hidden;white-space:nowrap;padding-block:16px}
/* Two identical halves with no gap between them, each ending in the same spacing as
   between items, so moving by exactly half lands copy two where copy one began. */
.ticker .row{display:flex;width:max-content;animation:tick var(--tick-s,60s) linear infinite;font-weight:700;font-size:15px;will-change:transform}
.ticker .grp{display:flex;flex:0 0 auto}
.ticker .row span{display:inline-flex;align-items:center;gap:34px;padding-right:34px}
.ticker .row span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--sky)}
.ticker:hover .row{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}

/* ── bands ── */
.band{padding-block:96px}
.band.pale{background:var(--pale)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.stack{display:flex;flex-direction:column;gap:18px}
.points{display:flex;flex-direction:column;gap:14px;margin-top:8px}
.pt{display:flex;gap:14px;align-items:flex-start}
.pt .ic{width:44px;height:44px;border-radius:14px;background:var(--pale);color:var(--blue);display:grid;place-items:center;flex:0 0 44px}
.band.pale .pt .ic{background:#fff}
.pt b{display:block;font-size:17px;color:var(--deep)}
.pt span{color:var(--ink2);font-size:15.5px}
svg.i{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* who builds it */
.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:40px}
.stat{background:#fff;border-radius:var(--r-card);border:1px solid var(--line);padding:24px 22px;box-shadow:var(--sh);transition:transform .25s ease}
.stat:hover{transform:translateY(-4px)}
.stat .si{width:52px;height:52px;border-radius:16px;background:var(--blue);color:#fff;display:grid;place-items:center;transition:transform .3s ease}
.stat:hover .si{transform:rotate(-6deg) scale(1.06)}
.stat .n{font-size:40px;font-weight:900;color:var(--blue);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.stat b{display:block;margin-top:12px;font-size:17px;color:var(--deep)}
.stat span{display:block;color:var(--ink2);font-size:15px;margin-top:4px}

/* demo card shared */
.demo{background:#fff;border-radius:var(--r-card);border:1px solid var(--line);box-shadow:var(--sh);padding:24px}
.demo .hd{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.demo .hd b{font-size:17px;color:var(--deep)}
.demo .hd .tag{margin-left:auto}
.tag{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:var(--r-tag);font-size:13.5px;font-weight:800;white-space:nowrap}
.tag.ok{background:var(--ok50);color:var(--ok)}.tag.bad{background:var(--bad50);color:#A61B1B}.tag.amb{background:var(--amb50);color:var(--amb)}.tag.blue{background:var(--pale);color:var(--deep)}.tag.grey{background:#EEF1F4;color:var(--ink2)}

/* sign demo */
.slot{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid #EEF1F4}
.slot:first-of-type{border-top:0}
.slot .time{font-weight:900;font-size:18px;color:var(--deep);width:56px;font-variant-numeric:tabular-nums}
.slot .w{flex:1;min-width:0}
.slot .w b{display:block;font-size:16px}
.slot .w small{color:var(--ink2);font-size:14px}
.give{min-height:52px;padding:0 24px;border-radius:999px;border:0;background:var(--blue);color:#fff;font:800 16px var(--f);cursor:pointer;transition:all .25s ease}
.give:hover{background:var(--deep)}
.give.done{background:var(--ok50);color:var(--ok);cursor:default}
.paper{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px}
.paper div{border-radius:var(--r-tile);padding:14px;font-size:14.5px}
.paper .a{background:#FBF7EE;border:1px dashed #C9B98F;color:#5C4A1A}
.paper .b{background:var(--ok50);border:1px solid #A3D6BB;color:#0B5D2C}
.paper b{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}

/* clock demo */
.clock{margin-top:6px}
.track{position:relative;height:12px;border-radius:6px;background:linear-gradient(90deg,#CFE0F1 0 25%,#9FC7EE 25% 75%,#F3B4AE 75% 100%);margin:28px 4px 10px}
.marks{display:flex;justify-content:space-between;font-size:13px;font-weight:700;color:var(--ink2);font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;background:transparent;position:absolute;left:0;top:-14px;height:40px;margin:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;border-radius:50%;background:#fff;border:4px solid var(--blue);box-shadow:0 4px 12px rgba(0,48,135,.35);cursor:grab}
input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff;border:4px solid var(--blue);cursor:grab}
.now{display:flex;align-items:center;gap:14px;margin-top:22px;flex-wrap:wrap}
.now .big{font-size:44px;font-weight:900;color:var(--deep);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.ctrl{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.ctrl button{min-height:48px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font:700 15px var(--f);color:var(--deep);cursor:pointer}
.ctrl button.pri{background:var(--blue);border-color:var(--blue);color:#fff}
.phone{margin-top:20px;background:var(--navy);border-radius:var(--r-card);padding:16px;min-height:92px;color:#fff}
.phone small{display:block;color:#9FB4C7;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.ping{background:#fff;color:var(--ink);border-radius:var(--r-tile);padding:12px 14px;display:flex;gap:12px;align-items:center;animation:in .45s cubic-bezier(.2,.8,.2,1)}
.ping .ic{width:38px;height:38px;border-radius:12px;background:var(--bad50);color:var(--bad);display:grid;place-items:center;flex:0 0 38px}
.ping b{display:block;font-size:15px}
.ping span{font-size:13.5px;color:var(--ink2)}
@keyframes in{from{transform:translateY(12px);opacity:.3}}

/* AI demo */
.tabs{display:flex;gap:4px;background:var(--canvas);border-radius:999px;padding:4px;margin-bottom:16px;flex-wrap:wrap}
.tab{flex:1;min-height:42px;border:0;background:transparent;border-radius:999px;font:700 14.5px var(--f);color:var(--ink2);cursor:pointer}
.tab[aria-selected=true]{background:#fff;color:var(--blue);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.ai p{font-size:16px;line-height:1.65;min-height:6.6em}
.ai .cursor{display:inline-block;width:2px;height:1.1em;background:var(--blue);vertical-align:-3px;margin-left:2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.flags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}

/* remote support */
.chat{display:flex;flex-direction:column;gap:10px}
.msg{max-width:84%;border-radius:18px;padding:11px 14px;font-size:15.5px;line-height:1.45}
.msg.me{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:6px}
.msg.them{align-self:flex-start;background:var(--canvas);border-bottom-left-radius:6px}
.msg.sys{align-self:center;background:var(--amb50);color:var(--amb);font-weight:700;font-size:13.5px;border-radius:999px}
.dark{background:var(--navy);color:#DCEBFA}
.dark h2{color:#fff}
.dark .kick{color:var(--sky)}
.dark .lead{color:#B9CDE0}
.dark .pt .ic{background:rgba(255,255,255,.08);color:var(--sky)}
.dark .pt b{color:#fff}.dark .pt span{color:#B9CDE0}

/* modules */
.mods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px}
.mod{background:#fff;border-radius:var(--r-card);border:1.5px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:10px;transition:border-color .25s, box-shadow .25s}
.mod.on{border-color:#9FC7EE;box-shadow:0 0 0 4px rgba(0,94,184,.08)}
.mod .r{display:flex;align-items:center;gap:12px}
.mod .ic{width:46px;height:46px;border-radius:14px;background:var(--pale);color:var(--blue);display:grid;place-items:center;flex:0 0 46px;transition:background .25s,color .25s}
.mod.on .ic{background:var(--blue);color:#fff}
.mod b{font-size:17px;color:var(--deep)}
.mod span{font-size:15px;color:var(--ink2)}
.tog{margin-left:auto;width:56px;height:32px;border-radius:999px;border:0;background:#C9D3DB;position:relative;cursor:pointer;flex:0 0 56px;transition:background .25s}
.tog::after{content:"";position:absolute;left:4px;top:4px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.tog[aria-checked=true]{background:var(--blue)}
.tog[aria-checked=true]::after{transform:translateX(24px)}
.count{display:inline-flex;align-items:center;gap:10px;font-weight:800;color:var(--deep);background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:8px 16px;margin-top:18px}
.count b{color:var(--blue);font-size:20px;font-variant-numeric:tabular-nums}

/* straight answers */
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:36px}
.no{border-radius:var(--r-card);padding:24px;background:#fff;border:1px solid var(--line)}
.no .x{width:44px;height:44px;border-radius:14px;background:var(--bad50);color:var(--bad);display:grid;place-items:center;margin-bottom:14px}
.no b{display:block;font-size:18px;color:var(--deep);margin-bottom:6px}
.no span{color:var(--ink2);font-size:15.5px}

/* CTA */
.cta{background:linear-gradient(135deg,var(--blue),var(--deep));color:#fff;border-radius:32px;padding:56px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:center;position:relative;overflow:hidden}
.cta::after{content:"";position:absolute;right:-80px;bottom:-120px;width:360px;height:360px;border-radius:50%;background:rgba(65,182,230,.25)}
.cta h2{color:#fff}
.cta p{color:#DCEBFA;margin-top:14px;max-width:52ch}
.cta .ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;position:relative;z-index:1}

/* footer */
.foot{background:var(--navy);color:#B9CDE0;padding-block:56px 40px;margin-top:96px;font-size:15px}
.foot .cols{display:grid;grid-template-columns:1.4fr repeat(4,minmax(0,1fr));gap:28px}
.foot b{display:block;color:#fff;margin-bottom:10px;font-size:15px}
.foot a{display:block;text-decoration:none;color:#B9CDE0;padding:3px 0}
.foot a:hover{color:#fff}
.foot .logo{color:#fff}
.foot .small{margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:13.5px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

.rise{transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.rise.pre{transform:translateY(22px)}

@media (max-width:980px){
  .hero .wrap,.split,.cta{grid-template-columns:minmax(0,1fr)}
  .hero .wrap{padding-block:40px 110px}
  .four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mods,.three{grid-template-columns:minmax(0,1fr)}
  .cta{padding:32px}
  .cta .ctas{justify-content:flex-start}
  .foot .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .band{padding-block:64px}
}
@media (max-width:520px){
  .four{grid-template-columns:minmax(0,1fr)}
  .hdr .btn:not(.menu){display:none}
  .slot{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}