/* landing-fresh.css: the landing page, "Fresh" design (Ren 2026-11-11).
   Built PC first. Since 2026-11-11 phones use it too: the phone rules are the
   max-width:899px block at the end. Everything lives under .fx. */

body{--bg:#FFFFFF}
body.dark-mode{--bg:#0C1410}

/* the old PC sections rest; the fresh ones take their place */
.wrap>.hero,.wrap>.chips,#what,#how,#why,#reviews,#apps,.wrap>.cta{display:none!important}
.fx{display:block}

.fx{
  --f-soft:#F4F6F4; --f-ink:#14201A; --f-mute:#56635A; --f-line:#E1E7E2; --f-card:#FFFFFF;
  --f-green:#1E7A33; --f-green-d:#16602A; --f-deep:#0E2B18;
  --p-mint:#E3F1E5; --p-blue:#E6F0FC; --p-amber:#FDF0E1; --p-pink:#FDE8EE; --p-purple:#EFE9FB; --p-teal:#E2F5F1;
  --i-mint:#1E7A33; --i-blue:#1F5FB8; --i-amber:#A65A0A; --i-pink:#B8275A; --i-purple:#5B3AA8; --i-teal:#0B7A6C;
  --f-stage:linear-gradient(160deg,#E3F1E5 0%,#D3EBD8 55%,#C4E4CB 100%);
  --f-head:'Plus Jakarta Sans',Inter,system-ui,sans-serif;
  color:var(--f-ink);line-height:1.55;
}
body.dark-mode .fx{
  --f-soft:#131C17; --f-ink:#EEF3F0; --f-mute:#A9B6AE; --f-line:#2C3A31; --f-card:#16201A;
  --f-green:#2EA84A; --f-green-d:#3CC25E; --f-deep:#0A2112;
  --p-mint:#173322; --p-blue:#16263A; --p-amber:#33240F; --p-pink:#3A1823; --p-purple:#251C3D; --p-teal:#12312D;
  --i-mint:#4ADE80; --i-blue:#7FB0F0; --i-amber:#F0B36A; --i-pink:#F59AB2; --i-purple:#B9A6F5; --i-teal:#5FD4C4;
  --f-stage:linear-gradient(160deg,#173322 0%,#14301F 55%,#11291B 100%);
}
.fx *{box-sizing:border-box}
.fx h1,.fx h2,.fx h3,.fx p,.fx ul,.fx ol{margin:0}
.fx h1,.fx h2,.fx h3{font-family:var(--f-head);letter-spacing:-.03em;line-height:1.08;font-weight:800}
.fx a{color:inherit;text-decoration:none}
.fx img{display:block;max-width:100%}
.fx .ico{stroke-width:1.9}
.fx :focus-visible{outline:3px solid #1F5FB8;outline-offset:3px;border-radius:10px}
.fx-shell{max-width:1220px;margin:0 auto;padding:0 32px}
.fx-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:56px;padding:0 26px;border-radius:16px;border:0;cursor:pointer;font:700 17px Inter,system-ui,sans-serif;white-space:nowrap}
.fx-btn-p{background:var(--f-green);color:#fff;box-shadow:0 10px 24px -10px rgba(30,122,51,.7)}
.fx-btn-p:hover{background:var(--f-green-d)}
.fx-btn-s{background:var(--f-card);border:1.5px solid var(--f-line);color:var(--f-ink)}
.fx-btn-s:hover{border-color:#B9C6BC}
body.dark-mode .fx-btn-p{color:#06110A}

/* hero */
.fx-hero{padding:44px 0 0;overflow:hidden}
.fx-hero .fx-shell{display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);gap:44px;align-items:center}
.fx-pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;border-radius:999px;background:var(--p-mint);color:var(--i-mint);font-weight:600;font-size:14px}
.fx-pill i{width:8px;height:8px;border-radius:50%;background:var(--f-green);box-shadow:0 0 0 4px rgba(30,122,51,.18)}
.fx-hero h1{font-size:clamp(38px,4.1vw,56px);margin-top:20px}
.fx-sub{margin-top:20px!important;font-size:19px;color:var(--f-mute);max-width:29em}
.fx-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.fx-ticks{list-style:none;padding:0;margin-top:26px!important;display:grid;grid-template-columns:repeat(2,max-content);gap:10px 26px;font-weight:600;font-size:15px}
.fx-ticks li{display:flex;align-items:center;gap:8px}
.fx-ticks .ico{width:19px;height:19px;color:var(--f-green)}

.fx-stage{position:relative;height:590px}
.fx-stage::before{content:"";position:absolute;inset:0 -60px 34px 34px;border-radius:44px;background:var(--f-stage)}
.fx-blob{position:absolute;border-radius:50%}
.fx-blob.a{width:150px;height:150px;background:var(--p-amber);left:-28px;top:-26px}
.fx-blob.b{width:84px;height:84px;background:var(--p-pink);left:8px;bottom:0}
/* the app in a PC browser window */
.fx-win{position:absolute;left:0;top:70px;width:calc(100% - 26px);border-radius:16px;background:#fff;overflow:hidden;z-index:2;
  box-shadow:0 40px 70px -30px rgba(14,43,24,.55),0 0 0 1px rgba(14,43,24,.08)}
.fx-win-bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#EDF1EE;border-bottom:1px solid #DDE4DF}
.fx-win-bar i{width:10px;height:10px;border-radius:50%;background:#C9D3CC}
.fx-win-bar span{margin-left:10px;flex:1;max-width:300px;height:20px;border-radius:999px;background:#fff;color:#56635A;font:500 11.5px/20px Inter,sans-serif;padding:0 12px;display:flex;align-items:center;gap:6px}
.fx-win-bar span svg{width:11px;height:11px;fill:none;stroke:#1E7A33;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fx-win img{width:100%;height:auto;aspect-ratio:1600/1000}
/* and the same app on a phone */
.fx-phone{position:absolute;right:-6px;bottom:0;width:204px;height:416px;border-radius:32px;background:#0F1A13;padding:6px;z-index:3;
  box-shadow:0 34px 60px -22px rgba(14,43,24,.6),0 0 0 1px rgba(255,255,255,.14) inset}
.fx-phone img{border-radius:26px;width:100%;height:100%;object-fit:cover;object-position:top}
.fx-tag{position:absolute;z-index:4;display:flex;align-items:center;gap:10px;padding:11px 15px 11px 11px;border-radius:16px;background:#fff;color:#14201A;font-weight:700;font-size:14.5px;box-shadow:0 16px 34px -14px rgba(14,43,24,.4)}
.fx-tag span{display:grid;place-items:center;width:34px;height:34px;border-radius:11px}
.fx-tag .ico{width:19px;height:19px}
.fx-tag.t1{left:-22px;bottom:70px}.fx-tag.t1 span{background:#E3F1E5;color:#1E7A33}
.fx-tag.t2{right:34px;top:12px}.fx-tag.t2 span{background:#E6F0FC;color:#1F5FB8}
@media(prefers-reduced-motion:no-preference){
  .fx-win{animation:fx-rise .9s cubic-bezier(.2,.8,.2,1) both}
  .fx-phone{animation:fx-rise 1s .15s cubic-bezier(.2,.8,.2,1) both}
  .fx-tag{animation:fx-pop .5s .9s both}
}
@keyframes fx-rise{from{opacity:0;transform:translateY(40px)}}
@keyframes fx-pop{from{opacity:0;transform:scale(.85)}}

/* sections */
.fx-sec{padding:112px 0 0;scroll-margin-top:40px}
.fx-sec h2{font-size:clamp(30px,3.5vw,46px);max-width:15em}
.fx-lead{margin-top:12px!important;font-size:18px;color:var(--f-mute);max-width:34em}

/* services */
.fx-cats{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fx-cat{display:flex;gap:16px;align-items:center;padding:20px;border-radius:24px;background:var(--c);border:0;text-align:left;cursor:pointer;color:var(--f-ink);font-family:inherit;transition:transform .15s}
.fx-cat:hover{transform:translateY(-3px)}
.fx-cat>span{display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:var(--f-card);color:var(--k);flex:none}
.fx-cat .ico{width:26px;height:26px}
.fx-cat b{display:block;font:700 18px var(--f-head);letter-spacing:-.01em}
.fx-cat em{display:block;font-style:normal;font-size:14.5px;color:var(--f-mute);margin-top:2px}

/* how it works */
.fx-how{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fx-step{border-radius:28px;background:var(--f-soft);padding:26px 26px 0;overflow:hidden;display:flex;flex-direction:column}
.fx-step .n{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--f-green);color:#fff;font:800 17px var(--f-head)}
.fx-step h3{font-size:23px;margin-top:16px}
.fx-step p{margin-top:8px;font-size:16px;color:var(--f-mute);min-height:3.1em}
.fx-shot{margin:24px auto 0;width:78%;border-radius:28px 28px 0 0;background:#0F1A13;padding:6px 6px 0;box-shadow:0 -12px 40px -18px rgba(14,43,24,.4)}
.fx-shot img{border-radius:23px 23px 0 0;height:300px;width:100%;object-fit:cover;object-position:top}
.fx-pro{margin-top:20px;border-radius:28px;background:var(--f-deep);color:#F1F7F2;padding:30px 34px;display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center}
.fx-pro h3{font-size:25px}
.fx-pro ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 26px;font-weight:600;font-size:15.5px;color:#C9DCCE}
.fx-pro li{display:flex;align-items:center;gap:9px}
.fx-pro li i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font:800 13px var(--f-head);font-style:normal}
.fx-pro .fx-btn{background:#fff;color:#0E2B18;height:52px}

/* safety */
.fx-safe{margin-top:44px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fx-s{border:1.5px solid var(--f-line);border-radius:24px;padding:24px;background:var(--f-card)}
.fx-s>span{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:var(--c);color:var(--k)}
.fx-s h3{font-size:19px;margin-top:18px;letter-spacing:-.02em;line-height:1.2}
.fx-s p{margin-top:6px;font-size:15px;color:var(--f-mute)}

/* closing band with the moving Philippines map */
.fx-end{margin-top:112px;background:var(--f-deep);color:#F1F7F2;position:relative;overflow:hidden}
.fx-end>.fx-shell{position:relative;display:grid;grid-template-columns:1.1fr 1fr;gap:20px;min-height:520px;align-items:center}
.fx-end h2{font-size:clamp(34px,4.2vw,56px)}
.fx-end p{margin-top:14px;font-size:18px;color:#B5CDBB;max-width:28em}
.fx-end .fx-btn-p{background:#fff;color:#0E2B18;box-shadow:none}
.fx-end .fx-btn-s{background:transparent;border-color:rgba(255,255,255,.25);color:#fff}
#lpPh{display:block;width:100%;height:520px;pointer-events:none}
.fx-more{border-top:1px solid rgba(255,255,255,.12);position:relative;scroll-margin-top:80px}
.fx-more .fx-shell{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;padding-top:22px;padding-bottom:22px;font-size:15px;color:#B5CDBB}
.fx-more b{color:#fff;font-weight:700}
.fx-more ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 20px}
.fx-more-f{margin-left:auto;position:relative}
.fx-more form{display:flex;gap:8px;margin:0}
.fx-more input{height:44px;width:210px;border-radius:12px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;padding:0 13px;font:500 15px Inter,sans-serif}
.fx-more input::placeholder{color:#8FAF98}
.fx-more button{height:44px;padding:0 16px;border-radius:12px;border:0;background:rgba(255,255,255,.14);color:#fff;font:700 15px Inter,sans-serif;cursor:pointer}
.fx-more button:hover{background:rgba(255,255,255,.22)}
.fx-more .notify-msg{position:absolute;right:0;top:100%;margin:2px 0 0;font-size:13px;color:#7FE39A;white-space:nowrap}
.fx-more .notify-msg.error{color:#F59AB2}

@media(min-width:900px){
/* top bar lines up with the page content */
.top{padding-left:max(32px,calc((100vw - 1220px) / 2 + 32px));padding-right:max(32px,calc((100vw - 1220px) / 2 + 32px))}

/* the shared footer sits right under the closing band */
.wrap>footer{margin-top:0;border-top:0;max-width:1220px;padding-left:32px;padding-right:32px}
.wrap>footer .f-tag{display:none}
.wrap>footer .f-cols{margin-left:auto}
}
.fx-install{display:none}

@media(max-width:1139px){
  .fx-shell{padding:0 24px}
  .fx-hero .fx-shell{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:28px}
  .fx-stage{height:500px}
  .fx-phone{width:172px;height:351px;border-radius:28px}.fx-phone img{border-radius:22px}
  .fx-tag{display:none}
  .fx-ticks{grid-template-columns:1fr}
  .fx-safe{grid-template-columns:repeat(2,1fr)}
  .fx-pro{grid-template-columns:1fr auto}.fx-pro ol{grid-column:1 / -1;grid-row:2}
}

/* dark mode: a thin light edge so the dark phone frames stay visible */
body.dark-mode .fx-phone{box-shadow:0 34px 60px -22px rgba(0,0,0,.7),0 0 0 1.5px rgba(255,255,255,.22)}
body.dark-mode .fx-shot{box-shadow:0 0 0 1.5px rgba(255,255,255,.18)}
body.dark-mode .fx-win{box-shadow:0 40px 70px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.14)}

/* logged-in / logged-out buttons inside the fresh sections */
.fx .only-in{display:none}
body.in .fx .only-in{display:inline-flex}

/* ── phones (under 900px): the same design in one column ── */
@media(max-width:899px){
  #lpBg{display:none}
  .fx-shell{padding:0 20px}
  .fx-btn{height:54px;font-size:16.5px;border-radius:16px}
  .fx-hero{padding:22px 0 0}
  .fx-hero .fx-shell{display:block}
  .fx-pill{font-size:13.5px}
  .fx-hero h1{font-size:clamp(33px,9.4vw,44px);margin-top:16px}
  .fx-sub{font-size:17px;margin-top:14px!important}
  .fx-cta{flex-direction:column;gap:10px;margin-top:22px}
  .fx-cta .fx-btn{width:100%}
  .fx-install:not([hidden]){display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;margin-top:8px;border:0;background:none;color:var(--f-green);font:700 15.5px Inter,system-ui,sans-serif;cursor:pointer}
  .fx-install .ico{width:19px;height:19px}
  .fx-ticks{grid-template-columns:1fr;gap:9px;margin-top:20px!important;font-size:15px}
  .fx-stage{height:auto;margin-top:30px;padding:26px 0 0 16px}
  .fx-stage::before{inset:0 -20px 0 0;border-radius:32px 0 0 0}
  .fx-blob.a{width:92px;height:92px;left:-34px;top:-22px}
  .fx-blob.b{display:none}
  .fx-win{position:relative;left:auto;top:auto;width:calc(100% - 4px);border-radius:12px;margin-bottom:-132px}
  .fx-win-bar{height:24px;padding:0 10px;gap:5px}
  .fx-win-bar i{width:7px;height:7px}
  .fx-win-bar span{height:15px;font-size:9px;line-height:15px;max-width:150px;margin-left:6px;padding:0 8px}
  .fx-win-bar span svg{width:8px;height:8px}
  .fx-phone{position:relative;right:auto;bottom:auto;margin:0 6px 0 auto;width:152px;height:310px;border-radius:26px;padding:5px}
  .fx-phone img{border-radius:21px}
  .fx-tag{display:flex;font-size:13px;padding:8px 12px 8px 8px;border-radius:14px}
  .fx-tag span{width:28px;height:28px;border-radius:9px}.fx-tag .ico{width:16px;height:16px}
  .fx-tag.t1{left:6px;bottom:44px}
  .fx-tag.t2{display:none}

  .fx-sec{padding:64px 0 0;scroll-margin-top:70px}
  .fx-sec h2{font-size:clamp(28px,7.6vw,36px)}
  .fx-lead{font-size:16.5px;margin-top:10px!important}
  .fx-cats{grid-template-columns:1fr;gap:10px;margin-top:24px}
  .fx-cat{padding:14px;border-radius:20px;gap:14px}
  .fx-cat>span{width:48px;height:48px;border-radius:15px}
  .fx-cat .ico{width:23px;height:23px}
  .fx-cat b{font-size:16.5px}.fx-cat em{font-size:14px}
  .fx-how{grid-template-columns:1fr;gap:12px;margin-top:24px}
  .fx-step{border-radius:24px;padding:20px 20px 0}
  .fx-step h3{font-size:21px;margin-top:12px}
  .fx-step p{min-height:0;font-size:15.5px}
  .fx-shot{width:70%;margin-top:18px}
  .fx-shot img{height:200px}
  .fx-pro{grid-template-columns:1fr;gap:16px;padding:24px 22px;border-radius:24px;margin-top:12px}
  .fx-pro h3{font-size:23px}
  .fx-pro ol{flex-direction:column;gap:10px;grid-column:auto;grid-row:auto}
  .fx-pro .fx-btn{width:100%}
  .fx-safe{grid-template-columns:1fr;gap:10px;margin-top:24px}
  .fx-s{display:grid;grid-template-columns:46px 1fr;column-gap:14px;padding:18px;border-radius:20px}
  .fx-s>span{grid-row:1 / span 2;width:46px;height:46px;border-radius:14px}
  .fx-s h3{margin-top:0;font-size:17.5px}
  .fx-s p{font-size:14.5px;margin-top:4px}

  .fx-end{margin-top:64px}
  .fx-end>.fx-shell{display:block;min-height:0;padding-top:48px}
  .fx-end h2{font-size:clamp(30px,8.4vw,40px)}
  .fx-end p{font-size:16.5px}
  #lpPh{height:340px;margin-top:6px}
  .fx-more .fx-shell{display:block;padding-top:22px;padding-bottom:26px}
  .fx-more ul{margin-top:8px!important;gap:6px 16px}
  .fx-more-f{margin:16px 0 0}
  .fx-more form{width:100%}
  .fx-more input{flex:1;min-width:0;width:auto;height:48px;font-size:16px}
  .fx-more button{height:48px}
  .fx-more .notify-msg{position:static;white-space:normal;margin-top:6px}
  .wrap>footer{margin-top:0;border-top:0}
}