/* Mivo Wellness landing page (wellness.php): header, hero, 10 trackers, features strip, footer bar.
   Built to the Mivo Wellness mockup (1536px wide): colours are sampled from it and desktop sizes scale with the viewport. */
:root{--header-h:58px}
.wp{
  --wp-cream:#fbf6f0;--wp-hero:#f8f4eb;--wp-card:#f4f0e9;--wp-strip:#e2e8dc;
  --wp-ink:#14201c;--wp-text:#3f3b38;--wp-muted:#4b544f;
  --wp-green:#11302a;--wp-green-2:#143932;--wp-accent:#557662;--wp-foot:#112b28;
  --display:"Inter",system-ui,sans-serif;
  background:var(--wp-cream);color:var(--wp-ink)
}
.wp-wrap{max-width:1536px;margin-inline:auto;padding-inline:clamp(1rem,4.17vw,4rem)}
.wp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wp-eyebrow{font:600 .72rem/1.4 var(--body);letter-spacing:.28em;text-transform:uppercase;color:#163828}

/* Header */
.wp-header{position:sticky;top:0;z-index:50;background:var(--wp-cream);transition:box-shadow .3s}
.wp-header::before{display:none}
.wp-header.scrolled{box-shadow:0 1px 0 rgba(17,48,42,.08),0 10px 30px -20px rgba(17,48,42,.35)}
.wp-header-row{display:flex;align-items:center;gap:1rem;height:var(--header-h)}
.wp-brand{display:inline-flex;align-items:center;gap:.6rem;font:1.35rem/1 var(--body);color:var(--wp-green);white-space:nowrap}
.wp-brand .wl-tile{width:46px;height:34px}
/* Two-tone wordmark from the Mivo Wellness logo */
.wp-word{letter-spacing:-.01em}
.wp-word b{font-weight:800;color:var(--wp-green)}
.wp-word span{font-weight:500;color:#1fa855}
@media (max-width:420px){.wp-brand{font-size:1.05rem;gap:.5rem}.wp-brand .wl-tile{width:38px;height:28px}}
.wp-nav{display:none;gap:clamp(1.5rem,3.1vw,3rem);margin-left:clamp(2rem,4.2vw,4.1rem)}
.wp-nav a{position:relative;padding:.4rem 0;font:400 .875rem/1 var(--body);color:#1f2a26;transition:color .2s}
.wp-nav a:hover{color:var(--wp-accent)}
.wp-nav a[aria-current=page]{font-weight:500;color:var(--wp-ink)}
.wp-nav a[aria-current=page]::after{content:"";position:absolute;left:-4px;right:-4px;bottom:-11px;height:2px;background:var(--wp-green)}
.wp-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto}
/* Games shortcut beside the menu button below 1024px (the full nav has it above) */
.wp-quick{display:flex}
.wp-quick a{padding:.32rem .6rem;border:1px solid rgba(17,48,42,.18);border-radius:999px;font:500 .75rem/1 var(--body);color:var(--wp-green);transition:background .2s,border-color .2s}
.wp-quick a:hover{border-color:var(--wp-green);background:rgba(17,48,42,.05)}
@media (max-width:374px){.wp-brand{font-size:.84rem;gap:.35rem}.wp-brand .wl-tile{width:28px;height:21px}.wp-actions{gap:.25rem}.wp-search-btn{width:32px;height:32px}.wp-quick a{padding:.3rem .5rem}.wp .menu-btn{width:40px;height:40px}}
.wp-search-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:var(--wp-ink);transition:background .2s}
.wp-search-btn:hover,.wp-search-btn[aria-expanded=true]{background:rgba(17,48,42,.07)}
.wp-search-btn svg{width:23px;height:23px}
.wp-login{display:none;padding:.5rem 1rem;font:500 .875rem/1 var(--body);color:var(--wp-ink)}
.wp-login:hover{color:var(--wp-accent)}
.wp-start,.wp-cta,.wp-cta-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;border-radius:999px;font-family:var(--body);font-weight:500;transition:background .25s,transform .25s,box-shadow .25s}
.wp-start{display:none;padding:0 1.6rem;height:38px;background:var(--wp-green);color:#fff;font-size:.875rem}
.wp-start:hover,.wp-cta:hover{background:#1d4a3f;box-shadow:0 10px 24px -12px rgba(17,48,42,.8)}
.wp .menu-btn{border-color:rgba(17,48,42,.18);background:transparent;color:var(--wp-green)}
.wp .menu-btn[aria-expanded=true]{border-color:var(--wp-green);background:var(--wp-green);color:#fff}
.wp-mnav{background:rgba(251,246,240,.98)}
.wp-mnav a:not(.wp-login):not(.wp-start){border-color:rgba(17,48,42,.1);color:var(--wp-ink)}
.wp-mnav a span{color:var(--wp-accent)}
.wp-mnav-actions{display:flex;gap:.75rem;margin-top:2rem}
.wp-mnav-actions .btn{flex:1;height:48px;padding:0 1rem;border-color:var(--wp-green);color:var(--wp-green)}
.wp-mnav-actions .wp-mstart{background:var(--wp-green);color:#fff}
.wp-search{border-top:1px solid rgba(17,48,42,.08);background:var(--wp-cream);padding:.75rem 0}
.wp-search-row{display:flex;align-items:center;gap:.75rem}
.wp-search-ic{color:var(--wp-muted)}
.wp-search-ic svg{width:20px;height:20px}
.wp-search input{flex:1;min-width:0;padding:.7rem 0;border:0;background:none;color:var(--wp-ink);font-size:1rem;outline:none}
.wp-search button{padding:.6rem 1.2rem;border-radius:999px;background:var(--wp-green);color:#fff;font-size:.875rem;font-weight:500}
.wp-search-msg{padding-top:.4rem;font-size:.85rem;color:#7d3328}
@media (min-width:1024px){
  .wp-nav,.wp-login{display:flex}
  .wp-quick{display:none}
  .wp-start{display:inline-flex}
  .wp-login,.wp-start{white-space:nowrap}
  .wp-login{max-width:10rem;overflow:hidden;text-overflow:ellipsis}
}
/* Seven nav links and the Mivo Wellness wordmark: tighter until there's room */
@media (min-width:1024px) and (max-width:1439px){
  .wp-nav{gap:clamp(.75rem,2vw,2.2rem);margin-left:clamp(1rem,2vw,2rem)}
}
@media (min-width:1024px) and (max-width:1279px){
  .wp-brand{font-size:1.1rem}
  .wp-nav{gap:clamp(.7rem,1.3vw,1.5rem);margin-left:clamp(.9rem,1.6vw,1.6rem)}
  .wp-login{max-width:6.5rem;padding-inline:.5rem}
  .wp-start{padding:0 1.1rem}
}

/* Hero: the mockup's photo on the right (its phone and tablet are live HTML, wp-devices.css), text on the left */
.wp-hero{position:relative;overflow:hidden;background:var(--wp-hero)}
.wp-art{position:relative}
.wp-hero-img{display:block;width:100%;height:auto}
.wp-hero-text{position:relative;padding-top:2.5rem;padding-bottom:2.5rem}
.wp-hero h1{margin-top:1rem;font:700 2.5rem/1.04 var(--body);letter-spacing:-.035em;color:var(--wp-ink)}
.wp-hero h1 em,.wp-trackers h2 em{font-style:normal;color:var(--wp-accent)}
.wp-lede{max-width:27rem;margin-top:1.4rem;font-size:1rem;line-height:1.52;color:var(--wp-text)}
.wp-cta{margin-top:1.5rem;height:47px;padding:0 1.6rem;background:var(--wp-green);color:#fff;font-size:.95rem}
.wp-cta svg,.wp-cta-btn svg{width:17px;height:17px}
.wp-cta:hover svg{transform:translateX(3px);transition:transform .25s}
.wp-tags{display:flex;flex-wrap:wrap;gap:.25rem .9rem;margin-top:1.4rem;padding-left:.5rem;font-size:.875rem;color:#3b4a44}
.wp-tags li+li::before{content:"•";margin-right:.9rem;color:#6d7a73}
/* From 1280px the hero is the mockup scaled to the viewport: --u is one mockup pixel (mockup width 1536) */
@media (min-width:1280px){
  .wp-hero{--u:calc(100vw / 1536);height:calc(403 * var(--u))}
  .wp-art{position:absolute;top:0;left:calc(505 * var(--u));width:calc(1031 * var(--u));height:calc(403 * var(--u));-webkit-mask-image:linear-gradient(90deg,transparent,#000 calc(36 * var(--u)));mask-image:linear-gradient(90deg,transparent,#000 calc(36 * var(--u)))}
  .wp-hero-img{width:100%;height:100%}
  .wp-hero-text{padding:calc(44 * var(--u)) 0 0 calc(64 * var(--u));max-width:none;margin:0}
  .wp-hero .wp-eyebrow{font-size:calc(10.5 * var(--u))}
  .wp-hero h1{margin-top:calc(5 * var(--u));font-size:calc(50 * var(--u));line-height:1.1}
  .wp-lede{max-width:calc(432 * var(--u));margin-top:calc(19 * var(--u));font-size:calc(14.3 * var(--u));line-height:1.65}
  .wp-cta{height:calc(49 * var(--u));margin-top:calc(14 * var(--u));padding:0 calc(24 * var(--u));gap:calc(10 * var(--u));font-size:calc(14.6 * var(--u))}
  .wp-cta svg{width:calc(17 * var(--u));height:calc(17 * var(--u))}
  .wp-tags{margin-top:calc(14 * var(--u));padding-left:calc(8 * var(--u));gap:0 calc(11 * var(--u));font-size:calc(12.8 * var(--u))}
  .wp-tags li+li::before{margin-right:calc(11 * var(--u))}
}

/* 10 trackers */
.wp-trackers{padding:1.75rem 0 1.25rem;background:var(--wp-cream)}
.wp-trackers .wp-wrap{padding-inline:clamp(1rem,1.8vw,1.75rem)}
.wp-tr-head{text-align:center}
.wp-tr-head .wp-eyebrow{font-size:.8rem;letter-spacing:.27em;color:#1d2d27}
.wp-trackers h2{margin-top:.45rem;font:700 clamp(1.6rem,2.05vw,2rem)/1.15 var(--body);letter-spacing:-.025em;color:var(--wp-ink)}
.wp-tr-head p:not(.wp-eyebrow){margin:.4rem auto 0;font-size:.9rem;color:#2f3a36}
.wp-tr-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.65rem;margin-top:1.15rem}
.wp-tr{display:flex;flex-direction:column;height:100%;padding:.5rem .45rem 1.1rem;border-radius:8px;background:var(--wp-card);transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s}
.wp-tr:hover{transform:translateY(-4px);background:#fff;box-shadow:0 18px 34px -22px rgba(17,48,42,.5)}
.wp-tr-ic{display:grid;place-items:center;align-self:center;width:52px;height:52px;margin-bottom:1.35rem;border-radius:50%;color:#fff;box-shadow:inset 0 -3px 6px rgba(0,0,0,.08)}
.wp-tr-ic svg{width:26px;height:26px}
.c1{background:linear-gradient(#44836e,#3f6e5e)}.c2{background:linear-gradient(#337350,#276445)}.c3{background:linear-gradient(#547c62,#467356)}
.c4{background:linear-gradient(#7d86b0,#625f8a)}.c5{background:linear-gradient(#e0716b,#c95e5a)}.c6{background:linear-gradient(#6db8a1,#4b907b)}
.c7{background:linear-gradient(#f2c568,#e7b64f)}.c8{background:linear-gradient(#89a998,#6b9581)}.c9{background:linear-gradient(#6a967f,#466953)}.c10{background:linear-gradient(#15573c,#16432f)}
.wp-tr h3{font:600 .78rem/1.3 var(--body);letter-spacing:-.02em;color:#1d2622}
.wp-tr p{margin-top:.95rem;padding-left:.35rem;font-size:.78rem;line-height:1.55;color:#4a4a46}
.wp-tr-cta{display:flex;align-items:center;gap:.3rem;margin-top:auto;padding:.9rem 0 0 .35rem;font:600 .72rem/1.3 var(--body);color:var(--wp-accent)}
.wp-tr-cta svg{flex:none;width:12px;height:12px;transition:transform .25s var(--ease)}
.wp-tr:hover .wp-tr-cta svg{transform:translateX(3px)}
@media (min-width:760px){.wp-tr-grid{grid-template-columns:repeat(4,1fr);max-width:68rem;margin-inline:auto}}

/* Wellness app sections on the cream page */
.wp .mw{background:var(--wp-cream)}
.wp .mw-alt{background:var(--wp-card)}
.wp .sec{border-top:1px solid rgba(17,48,42,.07)}

/* Features strip: handwritten note, four features, journey card */
.wp-features{padding:.85rem 0;background:var(--wp-strip)}
.wp-ft-row{display:grid;gap:1.5rem;align-items:center;padding-block:.5rem}
.wp-note{position:relative;display:flex;flex-direction:column;justify-content:center;width:190px;height:135px;margin:0 auto;padding:0 0 0 1.6rem;border-radius:58% 42% 52% 48%/55% 50% 50% 45%;background:#13302c;color:#fff;font:500 1.4rem/1.15 "Caveat",cursive;transform:rotate(-8deg)}
.wp-note span:nth-child(2){padding-left:.15rem}
.wp-note span:nth-child(3){padding-left:.3rem}
.wp-note svg{position:absolute;right:42px;bottom:4px;width:22px;height:22px;transform:rotate(8deg)}
.wp-ft-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem 0}
.wp-ft-list li{text-align:center}
.wp-ft-list a{display:block;padding:.25rem 1rem;border-radius:12px;transition:background .25s}
.wp-ft-list a:hover{background:rgba(255,255,255,.45)}
.wp-ft-ic{display:inline-grid;place-items:center;color:#0d3a2e}
.wp-ft-ic svg{width:30px;height:30px;stroke-width:1.5}
.wp-ft-list h3{margin-top:.95rem;font:500 .84rem/1.3 var(--body);letter-spacing:0;color:#06110d}
.wp-ft-list p{max-width:12rem;margin:.7rem auto 0;font-size:.76rem;line-height:1.65;color:var(--wp-muted)}
.wp-cta-card{padding:1.5rem;border-radius:14px;background:linear-gradient(160deg,#143932,#0f322b);color:#fff;text-align:center}
.wp-cta-card h2{font:500 1rem/1.3 var(--body);letter-spacing:0;color:#fff}
.wp-cta-card p{max-width:15rem;margin:.55rem auto 0;font-size:.74rem;line-height:1.6;color:#d8e2dc}
.wp-cta-btn{margin-top:.95rem;height:32px;padding:0 1.8rem;background:#fff;color:var(--wp-green);font-size:.74rem}
.wp-cta-btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(0,0,0,.6)}
.wp-cta-btn svg{width:14px;height:14px}
@media (min-width:1100px){
  .wp-ft-row{grid-template-columns:auto 1fr 19.7vw;gap:1.5rem;padding-inline:clamp(1rem,2.6vw,2.5rem)}
  .wp-note{margin:0}
  .wp-ft-list{grid-template-columns:repeat(4,1fr)}
  .wp-ft-list li+li{border-left:1px solid #c9d3c6}
}

/* Footer bar */
.wp-footer{background:var(--wp-foot);color:#fff}
.wp-footer-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1.5rem;min-height:49px;padding-block:.75rem;padding-inline:clamp(1rem,2.5vw,2.4rem) 5.5rem}
.wp-footer-brand{display:flex;align-items:center;gap:1.25rem}
.wp-footer-brand a{display:inline-flex;align-items:center;gap:.55rem;font:700 1.05rem/1 var(--body);letter-spacing:.08em}
.wp-footer-brand .logo{width:34px;height:24px;flex:none}
.wp-footer-brand span{font-size:.72rem;color:#c9d2cf}
/* The Mivo Wellness logo's tagline, spaced capitals in its green */
.wp-footer-slogan{margin:0;font:500 .7rem/1.3 var(--body);letter-spacing:.24em;text-transform:uppercase;color:#4ade80}
.wp-footer-links{display:flex;align-items:center;flex-wrap:wrap;font-size:.7rem;color:#e5ece8}
.wp-footer-links li{display:flex;align-items:center;gap:.55rem}
.wp-footer-links li+li::before{content:"";width:1px;height:12px;margin:0 .9rem;background:rgba(255,255,255,.4)}
.wp-footer-links svg{width:16px;height:16px}
.wp-footer-links a:hover{color:#fff;text-decoration:underline}
/* Phones: "Available worldwide" on its own line, Support | Privacy under it (no stray divider when the list wraps) */
@media (max-width:479px){
  .wp-footer-links{row-gap:.6rem}
  .wp-footer-links li:first-child{flex-basis:100%}
  .wp-footer-links li:nth-child(2)::before{display:none}
}
@media (max-width:379px){.wp-footer-slogan{letter-spacing:.13em}}
@media (max-width:339px){.wp-footer-slogan{font-size:.6rem;letter-spacing:.12em}}

/* Search hit */
.wp-hit{animation:wp-hit 1.8s var(--ease)}
@keyframes wp-hit{0%,40%{box-shadow:0 0 0 3px #557662,0 0 0 9px rgba(85,118,98,.25);border-radius:12px}100%{box-shadow:0 0 0 0 transparent}}