/* Lighter (Kuya Chan, 8 Nov 11:26 pm): the page gradient is up about 4 points of lightness (#111726/#0C1019/#090C13 to
   #172034/#131927/#101521) and the header about 3 (#07090E to #0C1018), still darker than the page. The theme-color
   meta, the status-bar block and the header's top-inset block use the new header colour. */
/* WaveStage site polish: motion, depth and hover states layered over the pages' own styles. */
:root {
  --ws-accent: #2FB9A8;
  --ws-gold: #DDBA8B;
  --ws-ease: cubic-bezier(.2, .7, .2, 1);
}

html { scroll-behavior: smooth; scroll-padding-top: 92px; }
::selection { background: rgba(47, 185, 168, .28); color: #fff; }

/* depth: soft glows behind the whole page instead of a flat fill */
body {
  background:
    radial-gradient(1100px 620px at 85% -8%, rgba(47, 185, 168, .09), transparent 60%),
    radial-gradient(900px 560px at -10% 18%, rgba(221, 186, 139, .08), transparent 60%),
    linear-gradient(180deg, #172034 0%, #131927 55%, #101521 100%) !important;
  background-attachment: fixed !important;
  -webkit-font-smoothing: antialiased;
}
body > div:first-of-type { background: transparent !important; }

/* page enter, and a cross-fade between pages where the browser supports it */
@view-transition { navigation: auto; }
header { view-transition-name: ws-header; }
::view-transition-old(root) { animation: ws-out .22s ease both; }
::view-transition-new(root) { animation: ws-in .38s var(--ws-ease) both; }
@keyframes ws-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes ws-in { from { opacity: 0; transform: translateY(10px); } }
main { animation: ws-in .55s var(--ws-ease) both; }

/* the header: glass that stays at the top and settles once you scroll */
header {
  position: sticky; top: 0; z-index: 80;
  background: rgba(12, 16, 25, .55);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
header.ws-scrolled {
  background: rgba(12, 16, 25, .85);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
}
header nav > a:first-child img { transition: transform .5s var(--ws-ease), box-shadow .5s ease; }
@media (hover: hover) { header nav > a:first-child:hover img { transform: rotate(-6deg) scale(1.08); box-shadow: 0 0 22px rgba(221, 186, 139, .35); } }

/* nav links: an underline that draws in */
.ws-navlink { position: relative; transition: color .2s ease !important; }
.ws-navlink::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px;
  background: var(--ws-accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ws-ease);
}
@media (hover: hover) { .ws-navlink:hover { color: #fff !important; } }
.ws-navlink.ws-current::after { transform: scaleX(1); }
@media (hover: hover) { .ws-navlink:hover::after { transform: scaleX(1); } }
.ws-navlink.ws-current { color: #fff !important; }

/* reading progress on long pages */
#ws-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 60; pointer-events: none;
  background: linear-gradient(90deg, var(--ws-accent), var(--ws-gold));
  transform: scaleX(0); transform-origin: left;
}

/* buttons */
.ws-btn { transition: transform .25s var(--ws-ease), box-shadow .25s ease, filter .25s ease, border-color .25s ease, background-color .25s ease !important; }
@media (hover: hover) { .ws-btn:hover { transform: translateY(-2px); } }
.ws-btn-primary { box-shadow: 0 6px 18px -8px rgba(47, 185, 168, .55); }
@media (hover: hover) { .ws-btn-primary:hover { filter: brightness(1.06); box-shadow: 0 12px 30px -10px rgba(47, 185, 168, .7); } }
@media (hover: hover) { .ws-btn-ghost:hover { border-color: var(--ws-accent) !important; background-color: rgba(47, 185, 168, .06) !important; } }
.ws-btn:active { transform: translateY(0) scale(.98); }

/* cards: lift, a little light, and an accent edge on hover */
.ws-card {
  position: relative;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .3);
  transition: transform .35s var(--ws-ease), box-shadow .35s ease, border-color .35s ease !important;
}
@media (hover: hover) { .ws-card:hover {
  transform: translateY(-4px);
  border-color: rgba(47, 185, 168, .45) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 18px 40px -18px rgba(0, 0, 0, .8), 0 0 0 1px rgba(47, 185, 168, .08);
} }
.ws-card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(47, 185, 168, .10), transparent 45%);
  transition: opacity .3s ease;
}
@media (hover: hover) { .ws-card:hover::before { opacity: 1; } }

/* headline: a soft sheen across the hero title */
.ws-hero-title {
  background: linear-gradient(100deg, #FFFFFF 0%, #F6F7F9 40%, #CDEFE9 60%, #F4EBDD 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* the hero's living waves (the app icon's five lines, drifting) */
.ws-hero { position: relative; isolation: isolate; overflow-x: clip; }
.ws-waves {
  position: absolute; z-index: -1; pointer-events: none;
  top: 70px; right: -16%; width: min(660px, 56vw); height: auto; opacity: .42;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 80%, transparent);
}
.ws-waves path { clip-path: inset(-40% 100% -40% 0); animation: ws-draw 2.2s var(--ws-ease) forwards; }
.ws-waves path:nth-child(2) { animation-delay: .12s; }
.ws-waves path:nth-child(3) { animation-delay: .24s; }
.ws-waves path:nth-child(4) { animation-delay: .36s; }
.ws-waves path:nth-child(5) { animation-delay: .48s; }
/* the logo's lines are filled ribbons (5 Nov), so they draw in by uncovering from the left */
@keyframes ws-draw { to { clip-path: inset(-40% 0 -40% 0); } }
@media (max-width: 760px) { .ws-waves { top: 10px; right: -40%; width: 115vw; opacity: .22; } }

/* the mixer drawing: faders glide up into place */
.ws-fader { transition: top 1.4s var(--ws-ease); }

/* scroll reveal (only once the script has said it is running) */
.ws-js .ws-reveal { opacity: 0; transform: translateY(26px); }
.ws-js .ws-reveal.ws-in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ws-ease), transform .8s var(--ws-ease);
  transition-delay: var(--ws-delay, 0s);
}

/* links in text */
main p a, main li a { text-decoration-color: rgba(47, 185, 168, .5); text-underline-offset: 3px; transition: text-decoration-color .2s ease, color .2s ease; }
@media (hover: hover) { main p a:hover, main li a:hover { text-decoration-color: var(--ws-accent); } }

/* keyboard focus */
a:focus-visible, button:focus-visible { outline: 2px solid var(--ws-accent) !important; outline-offset: 3px; border-radius: 6px; }

/* back to top */
#ws-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 55; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid #4A515D; background: rgba(32, 35, 42, .85); color: #F6F7F9; cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: grid; place-items: center; opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .3s ease, transform .3s var(--ws-ease), border-color .2s ease;
}
#ws-top.ws-show { opacity: 1; transform: none; pointer-events: auto; }
@media (hover: hover) { #ws-top:hover { border-color: var(--ws-accent); } }

/* ---------- desktop and phone layouts ---------- */

/* phone menu: a button that opens a full-width panel */
.ws-menu { display: none; }
@media (max-width: 760px) {
  header nav { flex-wrap: nowrap !important; padding: 12px 16px !important; }
  .ws-menu {
    display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; cursor: pointer;
    border: 1px solid #363C46; background: rgba(32, 35, 42, .7); color: #F6F7F9; padding: 0;
  }
  .ws-menu span, .ws-menu span::before, .ws-menu span::after {
    display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; position: relative;
    transition: transform .3s var(--ws-ease), background-color .2s ease;
  }
  .ws-menu span::before, .ws-menu span::after { content: ""; position: absolute; left: 0; }
  .ws-menu span::before { top: -6px; } .ws-menu span::after { top: 6px; }
  header.ws-open .ws-menu span { background: transparent; }
  header.ws-open .ws-menu span::before { transform: translateY(6px) rotate(45deg); }
  header.ws-open .ws-menu span::after { transform: translateY(-6px) rotate(-45deg); }

  header nav > div {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column !important; align-items: stretch !important; gap: 4px !important;
    padding: 12px 16px 20px; background: #131927; z-index: 70;
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-bottom: 1px solid #363C46; box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .8);
    opacity: 0; transform: translateY(-8px); pointer-events: none; visibility: hidden;
    transition: opacity .25s ease, transform .3s var(--ws-ease), visibility 0s linear .3s;
  }
  header.ws-open nav > div { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .25s ease, transform .3s var(--ws-ease); }
  header nav > div a { padding: 14px 12px !important; font-size: 18px; border-radius: 10px; margin: 0 !important; }
  header nav > div a.ws-navlink::after { display: none; }
  header nav > div a.ws-navlink.ws-current { background: rgba(47, 185, 168, .08); color: var(--ws-accent) !important; }
  header nav > div a.ws-btn { text-align: center; margin-top: 8px !important; }

  /* phone type and spacing: tighter, so more fits on screen */
  main section { padding-left: 16px !important; padding-right: 16px !important; }
  main { padding-left: 16px !important; padding-right: 16px !important; }
  main > section, main > div > section { padding-top: 40px !important; padding-bottom: 40px !important; }
  main section > div[style*="padding: 48px"] { padding: 28px !important; }
  footer > div { padding: 28px 16px !important; }
  main [style*="grid-template-columns: repeat(auto-fit"] { grid-template-columns: 1fr !important; }
  #ws-top { right: 14px; bottom: 14px; }
}


/* manual: a contents panel that stays beside you on desktop, and folds away on phones */
.ws-toc a { position: relative; transition: color .2s ease, padding-left .25s var(--ws-ease) !important; }
@media (hover: hover) { .ws-toc a:hover { color: #fff !important; padding-left: 6px !important; } }
.ws-toc a.ws-toc-active { color: var(--ws-accent) !important; padding-left: 10px !important; }
.ws-toc a.ws-toc-active::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 16px; margin-top: -8px; border-radius: 3px; background: var(--ws-accent);
}
@media (min-width: 900px) {
  .ws-toc { position: sticky; top: 92px; max-height: calc(100vh - 116px); overflow-y: auto; }
  .ws-toc-toggle { display: none !important; }
}
@media (max-width: 899px) {
  .ws-toc { max-width: none !important; flex-basis: 100% !important; position: sticky; top: 70px; z-index: 20;
    background: rgba(32, 35, 42, .94) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); padding: 0 !important; }
  .ws-toc > p { display: none; }
  .ws-toc-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 50px; padding: 0 18px;
    background: none; border: 0; color: #F6F7F9; font: 600 15px Inter, system-ui, sans-serif; cursor: pointer;
  }
  .ws-toc-toggle svg { transition: transform .3s var(--ws-ease); }
  .ws-toc.ws-toc-open .ws-toc-toggle svg { transform: rotate(180deg); }
  .ws-toc > a { display: none; padding-left: 18px !important; padding-right: 18px !important; }
  .ws-toc.ws-toc-open > a { display: block; }
  .ws-toc.ws-toc-open { max-height: 70vh; overflow-y: auto; }
}

/* ---------- midnight palette: the app icon's blues under every surface ---------- */
[style*="background: #20232A"] { background-color: rgba(22, 28, 42, .78) !important; }
[style*="background: #262A31"], [style*="background: #2A2E36"] { background-color: #1A2131 !important; }
[style*="background: #30353E"] { background-color: #222A3B !important; }
[style*="background: #111317"] { background-color: #0A0E16 !important; }
[style*="1px solid #363C46"], [style*="2px solid #363C46"] { border-color: #232C3D !important; }
[style*="1px solid #4A515D"] { border-color: #34405A !important; }
[style*="border-top: 1px solid #2A2F37"] { border-top-color: #1C2433 !important; }
header, footer { border-color: #1C2433 !important; }
footer { background: linear-gradient(180deg, rgba(8, 11, 18, 0), rgba(8, 11, 18, .7)); }
footer a { transition: color .2s ease; }
@media (hover: hover) { footer a:hover { color: #F6F7F9 !important; } }

/* eyebrow labels: a short gold rule in front */
main p[style*="letter-spacing: 0.14em"], main p[style*="letter-spacing: 0.1em"] { display: flex; align-items: center; gap: 12px; }
main p[style*="letter-spacing: 0.14em"]::before {
  content: ""; width: 28px; height: 2px; border-radius: 2px; flex: none;
  background: linear-gradient(90deg, var(--ws-gold), var(--ws-accent));
}

/* section rhythm: a soft gold hairline between sections */
main > section + section { position: relative; }
main > section + section::before {
  content: ""; position: absolute; top: 0; left: 50%; width: min(880px, 80%); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(221, 186, 139, .22), rgba(47, 185, 168, .18), transparent);
}
.ws-manual main > section + section::before { display: none; }

/* subtle film grain so the dark doesn't look flat */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .035; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* the hero mixer, framed like a tablet on a stand of light */
.ws-device {
  border: 0 !important; padding: 26px !important; border-radius: 28px !important;
  background: linear-gradient(160deg, #1B2233, #0B0F18 60%) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .08),
              0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 120px -30px rgba(47, 185, 168, .25) !important;
  transform-origin: 50% 0;
}
.ws-device.ws-device.ws-device { transform: perspective(1600px) rotateX(9deg) scale(.97); transition: transform 1.2s var(--ws-ease), box-shadow .6s ease, opacity .8s ease !important; }
.ws-device.ws-device.ws-device.ws-flat { transform: perspective(1600px) rotateX(0) scale(1); }
@media (hover: hover) { .ws-device.ws-device.ws-device:hover { transform: perspective(1600px) rotateX(0) scale(1); } }
.ws-device > div { border-radius: 14px; background: #0A0E16; padding: 14px; }
.ws-device-wrap { position: relative; }
.ws-device-wrap::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: -40px; height: 80px; z-index: -1; filter: blur(40px);
  background: radial-gradient(closest-side, rgba(47, 185, 168, .28), rgba(221, 186, 139, .12), transparent);
}

/* screenshot placeholders: a tablet with the logo, waiting for the real picture */
.ws-shot {
  position: relative; overflow: hidden; border-radius: 18px !important; border: 0 !important;
  padding: 10px !important; box-sizing: border-box;
  background: linear-gradient(160deg, #1B2233, #0A0E16) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 48px -24px rgba(0, 0, 0, .8);
  color: transparent !important; font-size: 0 !important;
}
.ws-shot-screen {
  position: absolute; inset: 10px; border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 16px;
  background:
    radial-gradient(70% 90% at 50% 0%, rgba(47, 185, 168, .10), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 28px 100%,
    #0A0E16;
}
.ws-shot-screen::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .05) 50%, transparent 70%);
  animation: ws-sheen 3.6s ease-in-out infinite;
}
@keyframes ws-sheen { 60%, 100% { transform: translateX(100%); } }
.ws-shot-screen img { width: 44px; height: 44px; border-radius: 11px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5); }
.ws-shot-screen b { font: 600 15px Inter, system-ui, sans-serif; color: #F6F7F9; letter-spacing: 0; }
.ws-shot-screen span { font: 500 12px Inter, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ws-gold); }

/* video placeholders: a thumbnail with a glass play button */
.ws-video { position: relative; overflow: hidden; color: transparent !important; font-size: 0 !important;
  background: radial-gradient(80% 120% at 30% 0%, rgba(47, 185, 168, .14), transparent 60%),
              radial-gradient(80% 120% at 100% 100%, rgba(221, 186, 139, .12), transparent 60%), #0A0E16 !important; }
.ws-video-waves { position: absolute; inset: 15% -5% auto -5%; width: 110%; opacity: .35; }
.ws-play {
  position: relative; width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .35s var(--ws-ease), background-color .3s ease;
}
.ws-play::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(47, 185, 168, .35); animation: ws-pulse 2.6s ease-out infinite; }
@keyframes ws-pulse { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
@media (hover: hover) { .ws-card:hover .ws-play { transform: scale(1.08); background: rgba(47, 185, 168, .18); } }
.ws-soon {
  position: absolute; left: 14px; bottom: 14px; padding: 5px 10px; border-radius: 999px;
  font: 600 12px Inter, system-ui, sans-serif; letter-spacing: .06em; color: #F6F7F9;
  background: rgba(10, 14, 22, .7); border: 1px solid rgba(255, 255, 255, .12);
}

/* chips (jump links) */
main a[style*="border-radius: 999px"] { transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s var(--ws-ease) !important; }
@media (hover: hover) { main a[style*="border-radius: 999px"]:hover { border-color: var(--ws-accent) !important; background-color: rgba(47, 185, 168, .08); color: #fff !important; transform: translateY(-1px); } }

/* ---------- type scale: comfortable on a big screen, readable on a phone ---------- */
main h1 { font-size: clamp(38px, 4.8vw, 66px) !important; line-height: 1.06 !important; letter-spacing: -0.015em !important; }
main h2 { font-size: clamp(26px, 2.5vw, 36px) !important; line-height: 1.18 !important; letter-spacing: -0.005em; }
main h3 { font-size: clamp(18px, 1.45vw, 21px) !important; line-height: 1.3 !important; }
main [style*="font-size: 20px"], main [style*="font-size: 19px"] { font-size: clamp(17px, 1.3vw, 19px) !important; line-height: 1.6 !important; }
main [style*="font-size: 40px"] { font-size: clamp(30px, 3vw, 38px) !important; }
main :not([role="img"] *)[style*="font-size: 12px"] { font-size: 13px !important; }
main p, main li { text-wrap: pretty; }
main h1, main h2, main h3 { text-wrap: balance; }
@media (max-width: 760px) {
  body > div:first-of-type { font-size: 16px !important; line-height: 1.6 !important; }
  main h1 { font-size: 36px !important; }
  main h2 { font-size: 26px !important; }
  main h3 { font-size: 19px !important; }
  main [style*="font-size: 20px"], main [style*="font-size: 19px"] { font-size: 17px !important; }
  header nav > a:first-child { font-size: 20px !important; }
}

/* scrollbar */
html { scrollbar-color: #2C3546 #131927; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #131927; }
::-webkit-scrollbar-thumb { background: #2C3546; border-radius: 10px; border: 2px solid #131927; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .ws-js .ws-reveal { opacity: 1; transform: none; }
  .ws-waves path { clip-path: none; }
}

/* ---------- the artwork ---------- */
.ws-art { box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .85); background: #0A0E16; }
.ws-card > .ws-art { box-shadow: none; transition: transform .8s var(--ws-ease), filter .6s ease; transform-origin: 50% 40%; }
@media (hover: hover) { .ws-card:hover > .ws-art { transform: scale(1.035); filter: brightness(1.06); } }
.ws-hero-art { box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .9), 0 0 140px -50px rgba(47, 185, 168, .35); }
main section > img.ws-art, main section > div > img.ws-art:not(.ws-card > img) { transition: transform .8s var(--ws-ease), box-shadow .6s ease; }
@media (hover: hover) { main [style*="grid-template-columns"] > img.ws-art:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(47, 185, 168, .25); } }
.ws-hero:has(.ws-hero-art) .ws-waves { opacity: .26; top: 40px; }

/* tutorial posters: the screen each video is about, dimmed under the play button */
.ws-video .ws-poster { opacity: .72 !important; transition: opacity .4s ease, transform .8s var(--ws-ease); }
.ws-video::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(8, 11, 18, .15) 30%, rgba(8, 11, 18, .75)); }
.ws-video .ws-play, .ws-video .ws-soon { z-index: 2; }
@media (hover: hover) { .ws-card:hover .ws-video .ws-poster { opacity: .9 !important; transform: scale(1.03); } }

/* ---------- tiles that open ---------- */
[style*="grid-template-columns"]:has(> details.ws-more) { align-items: start; }
details.ws-more { position: relative; interpolate-size: allow-keywords; transition: border-color .3s ease, box-shadow .35s ease, transform .35s var(--ws-ease), background-color .3s ease !important; }
details.ws-more > summary { list-style: none; outline: none; }
details.ws-more > summary::-webkit-details-marker { display: none; }
details.ws-more > summary::marker { content: ""; }
@media (hover: hover) { details.ws-more:hover { border-color: rgba(47, 185, 168, .45) !important; transform: translateY(-2px); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .85); } }
details.ws-more[open] { border-color: rgba(47, 185, 168, .55) !important; box-shadow: 0 24px 50px -26px rgba(0, 0, 0, .9), 0 0 0 1px rgba(47, 185, 168, .12); transform: none; }
details.ws-more > summary:focus-visible { outline: 2px solid var(--ws-accent); outline-offset: 6px; border-radius: 8px; }
.ws-more-cue svg { transition: transform .35s var(--ws-ease); }
details.ws-more[open] .ws-more-cue svg { transform: rotate(180deg); }
details.ws-more::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--ws-ease), content-visibility .45s allow-discrete; }
details.ws-more[open]::details-content { block-size: auto; }
details.ws-more[open] > summary ~ * { animation: ws-in .5s var(--ws-ease) both; }
details.ws-more .ws-art { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { details.ws-more::details-content { transition: none; } }

/* Baybayin for the motto: the app's own font, served with the site */
@font-face { font-family: "Noto Sans Tagalog"; src: url("fonts/NotoSansTagalog.ttf") format("truetype"); font-display: swap; unicode-range: U+1700-171F, U+25CC; }
/* (Inter and Chakra Petch were the site's first typefaces. Nothing uses them now, so they are no longer declared and
   never downloaded; the files stay in fonts/ for the record. The faces in use are declared further down.) */

/* phones: pages with a contents panel (manual, privacy) keep one 16px gutter instead of two */
@media (max-width: 760px) {
  main article section:not([style*="padding: 28px"]) { padding-left: 0 !important; padding-right: 0 !important; }
  main > section.ws-flat { padding: 0 !important; margin-bottom: 40px !important; }
}
/* the folding contents bar on phones: solid, so the page doesn't show through it */
@media (max-width: 899px) {
  nav.ws-toc { background: #0D121C !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 12px 28px -16px rgba(0, 0, 0, .9); }
}

/* the FX cards on phones: all open, in a row you swipe left and right (site.js adds .ws-swipe) */
.ws-dots { display: none; }
@media (max-width: 760px) {
  /* main and the section each keep 16px a side on phones: the row reaches past both to the screen edges */
  .ws-swipe {
    display: flex !important; align-items: stretch !important; gap: 12px !important;
    margin: 0 -32px; padding: 4px 32px 6px; scroll-padding-inline: 32px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .ws-swipe::-webkit-scrollbar { display: none; }
  .ws-swipe:focus-visible { outline: 2px solid var(--ws-accent); outline-offset: -2px; border-radius: 14px; }
  .ws-swipe > details.ws-more { box-sizing: border-box; flex: 0 0 min(100% - 20px, 400px); scroll-snap-align: start; scroll-snap-stop: always; transform: none !important; }
  .ws-swipe > details.ws-more::details-content { transition: none; }
  .ws-swipe > details.ws-more > summary { cursor: default; }
  .ws-swipe .ws-more-cue { display: none !important; }
  .ws-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
  .ws-dots span { width: 6px; height: 6px; border-radius: 999px; background: #4A515D; transition: width .3s var(--ws-ease), background-color .3s ease; }
  .ws-dots span.ws-on { width: 20px; background: var(--ws-accent); }
}

/* tutorial step-throughs: a row of screens you swipe, or step with Back and Next (site.js wires them) */
.ws-steps-track { scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.ws-steps-track::-webkit-scrollbar { display: none; }
.ws-steps-track:focus-visible { outline: 2px solid var(--ws-accent); outline-offset: -2px; }
.ws-steps:not(.ws-steps-on) .ws-steps-back, .ws-steps:not(.ws-steps-on) .ws-steps-next { visibility: hidden; }
.ws-steps button { cursor: pointer; transition: background-color .2s ease, border-color .2s ease, opacity .2s ease, transform .2s var(--ws-ease); }
.ws-steps button:disabled { opacity: .35; cursor: default; }
.ws-steps button:not(:disabled):active { transform: scale(.97); }
@media (hover: hover) { .ws-steps-back:not(:disabled):hover { border-color: var(--ws-accent) !important; } }
.ws-steps-mode button[disabled] { opacity: .6; }

/* contact form: clear focus, a soft look while it's switched off, and an orange edge on a field that needs another look */
.ws-contact [hidden] { display: none !important; }
.ws-contact input, .ws-contact select, .ws-contact textarea { transition: border-color .2s ease, box-shadow .2s ease; }
@media (hover: hover) { .ws-contact input:hover:not(:disabled), .ws-contact select:hover:not(:disabled), .ws-contact textarea:hover:not(:disabled) { border-color: #6B7380 !important; } }
.ws-contact input:focus, .ws-contact select:focus, .ws-contact textarea:focus { outline: none; border-color: var(--ws-accent) !important; box-shadow: 0 0 0 3px rgba(47, 185, 168, .25); }
.ws-contact select { -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 44px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A0A7B3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 16px center !important; }
.ws-contact [aria-invalid="true"] { border-color: #F0806F !important; }
.ws-contact fieldset:disabled { opacity: .55; }
.ws-contact fieldset:disabled * { cursor: not-allowed; }
.ws-contact button { cursor: pointer; transition: transform .2s var(--ws-ease), filter .2s ease, border-color .2s ease; }
@media (hover: hover) { .ws-contact button[type="submit"]:not(:disabled):hover { filter: brightness(1.08); } }
.ws-contact button:not(:disabled):active { transform: scale(.97); }
.ws-contact button[type="submit"]:disabled { cursor: progress; opacity: .7; }
.ws-contact fieldset:disabled button[type="submit"] { cursor: not-allowed; }
@media (hover: hover) { .ws-contact-again:hover { border-color: var(--ws-accent) !important; } }
.ws-contact-status.ws-error { color: #F0806F !important; }
.ws-contact-done:focus { outline: none; }
@media (max-width: 560px) { form.ws-contact { padding: 22px !important; } }

/* the press kit's fact sheet: on a phone, each label sits above its value */
@media (max-width: 520px) {
  .ws-facts { grid-template-columns: minmax(0, 1fr) !important; row-gap: 0 !important; }
  .ws-facts dd { margin-bottom: 12px !important; }
}

/* Home's accent swatches: two to a row on a phone, so the longer names fit */
@media (max-width: 480px) { .ws-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* tap targets on phones: at least 44 px tall for footer links, "More on …" links, the tutorials' manual links and switches */
@media (max-width: 760px) {
  footer a, details.ws-more a { display: inline-block; padding: 10px 0; }
  a.ws-manual-link { display: inline-flex; align-items: center; min-height: 44px; }
  .ws-steps button { min-height: 44px !important; }
}

/* =====================================================================================================
   Design pass (Kuya Chan via Jarbes, 1 Nov 2026): one calm system on top of everything above.
   One surface tone, one card radius, spacing in 4/8 px steps, Inter for headings (Chakra Petch only for
   the wordmark and small labels), a slim header that sits under the iPhone notch, and no hover effects on touch.
   ===================================================================================================== */
:root { --ws-surface: #121722; --ws-surface-2: #171D2A; --ws-line: rgba(255, 255, 255, .08); --ws-radius: 16px; --ws-bar: rgba(7, 9, 14, .78); }
html { scroll-padding-top: 72px; }
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }

/* the page appears in place, already lit: it rises a little but never starts faded */
main { animation: ws-rise .5s var(--ws-ease) both; }
@keyframes ws-rise { from { transform: translateY(8px); } }
.ls-stage .ws-reveal { opacity: 1 !important; transform: none !important; }

/* header: slim, one surface, sticky with a soft blur, the same at every width */
header { background: var(--ws-bar) !important; border-bottom: 1px solid var(--ws-line) !important; padding-top: env(safe-area-inset-top); }
header.ws-scrolled { background: rgba(7, 9, 14, .9) !important; box-shadow: 0 8px 24px -16px rgba(0, 0, 0, .7); }
header nav { min-height: 56px; padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box; }
header nav > a:first-child { font-size: 19px !important; gap: 10px !important; letter-spacing: .01em !important; min-height: 44px; }
header nav > a:first-child img { width: 26px; height: 26px; border-radius: 6px !important; }
header nav > div a { font-size: 15px; }
header nav > div a.ws-btn, header nav > div a[style*="background: #2FB9A8"] { padding: 8px 16px !important; border-radius: 10px !important; }
@media (max-width: 760px) {
  header nav { padding: 0 16px !important; min-height: 56px; }
  .ws-menu { width: 44px !important; height: 44px !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; margin-right: -10px; }
  .ws-menu span, .ws-menu span::before, .ws-menu span::after { width: 20px !important; height: 1.5px !important; }
  header nav > div { background: rgba(7, 9, 14, .97) !important; border-bottom: 1px solid var(--ws-line) !important; }
  header nav > div a { font-size: 17px !important; }
}
@media (hover: hover) { .ws-menu:hover { background: rgba(255, 255, 255, .06) !important; } }

/* type: Inter for headings, set tight; small labels keep Chakra Petch with gentler tracking */
main h1, main h2, main h3 { font-family: "Inter", system-ui, sans-serif !important; font-weight: 600 !important; letter-spacing: -0.02em !important; }
main h1 { letter-spacing: -0.03em !important; line-height: 1.1 !important; padding-bottom: .06em; }
main h3 { letter-spacing: -0.01em !important; }
main p[style*="letter-spacing: 0.14em"], main p[style*="letter-spacing: 0.1em"], main p[style*="letter-spacing: 0.12em"], .ls-eyebrow { letter-spacing: .08em !important; }
main p[style*="letter-spacing: 0.14em"]::before { width: 20px; height: 1px; }

/* buttons: one shape, never wrapping */
main .ws-btn { white-space: nowrap; border-radius: 10px !important; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }
main .ws-btn-ghost { border-color: rgba(255, 255, 255, .18) !important; }

/* boxes: no outlines, one surface and one radius; spacing does the separating */
main .ws-card:not(.ws-device), main details.ws-more,
main p[style*="border: 1px solid #363C46"], main div[style*="border: 1px solid #363C46"]:not(.ws-device):not([style*="overflow-x"]),
main p[style*="solid rgb(54, 60, 70)"], main div[style*="solid rgb(54, 60, 70)"]:not(.ws-device):not([style*="overflow-x"]) {
  border-color: transparent !important; background: var(--ws-surface) !important; border-radius: var(--ws-radius) !important; box-shadow: none !important;
}
main .ws-card[style*="padding: 2"]:not([style*="padding: 20px 2"]), main .ws-card[style*="padding: 3"] { padding: 24px !important; }
main img.ws-art[style*="border: 1px solid"] { border-color: var(--ws-line) !important; }
main details.ws-more[open] { border-color: transparent !important; box-shadow: none !important; background: var(--ws-surface-2) !important; }
main > section + section::before { display: none; }
@media (hover: hover) {
  main .ws-card:not(.ws-device):hover, main details.ws-more:hover { border-color: transparent !important; background: var(--ws-surface-2) !important; transform: translateY(-2px); box-shadow: none !important; }
}
@media (max-width: 760px) {
  main .ws-card[style*="padding: 2"]:not([style*="padding: 20px 2"]), main .ws-card[style*="padding: 3"] { padding: 20px !important; }
}

/* Home's stage: edge to edge on phones, right under the header */
@media (max-width: 760px) {
  main > section.ls-stage { margin-left: -16px !important; margin-right: -16px !important; }
}

/* back to top: small and quiet on a big screen, gone on phones (the header is always there) */
#ws-top { width: 40px; height: 40px; right: 24px; bottom: 24px; border-color: var(--ws-line); background: rgba(7, 9, 14, .7); color: #C9CED6; }
@media (max-width: 760px) { #ws-top { display: none !important; } }

/* the footer clears the iPhone's home bar */
footer { padding-bottom: env(safe-area-inset-bottom); }
nav.ws-toc { border-color: var(--ws-line) !important; border-radius: 12px !important; }

/* Home's "Your colours" card: the swatches are buttons, and the card takes the pressed accent (site.js sets --ws-pick) */
main .ws-accent-card.ws-accent-card:not(#ws-none) {
  --ws-pick: #8EE5DA;
  border: 1px solid color-mix(in srgb, var(--ws-pick) 45%, transparent) !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ws-pick) 9%, var(--ws-surface)), var(--ws-surface) 70%) !important;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ws-pick) 10%, transparent), 0 24px 60px -30px color-mix(in srgb, var(--ws-pick) 55%, transparent) !important;
  transition: border-color .45s ease, box-shadow .45s ease, background .45s ease !important;
}
main .ws-accent-card .ws-accent-label { color: var(--ws-pick) !important; transition: color .45s ease; }
.ws-swatch {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px 0 4px; margin: 0 -4px;
  border: 0; border-radius: 999px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.ws-swatch > span:first-child { box-shadow: 0 0 0 2px transparent, 0 0 0 4px transparent; transition: box-shadow .25s ease, transform .25s var(--ws-ease); }
.ws-swatch[aria-pressed="true"] > span:first-child { box-shadow: 0 0 0 2px var(--ws-surface), 0 0 0 4px var(--ws-pick, #8EE5DA); }
.ws-swatch[aria-pressed="true"] > span:last-child { color: #F6F7F9; font-weight: 600; }
.ws-swatch:focus-visible { outline: 2px solid var(--ws-accent) !important; outline-offset: 2px; }
@media (hover: hover) { .ws-swatch:hover > span:first-child { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  main .ws-accent-card.ws-accent-card:not(#ws-none), main .ws-accent-card .ws-accent-label, .ws-swatch > span:first-child { transition: none !important; }
}

/* ---------- a notch lighter (Kuya Chan, 9:38 pm: "feels so heavy, everything looks big") ---------- */
main h1 { font-size: clamp(32px, 4vw, 52px) !important; }
main h2 { font-size: clamp(22px, 2.2vw, 30px) !important; font-weight: 500 !important; }
main h3 { font-size: clamp(17px, 1.3vw, 19px) !important; }
main [style*="font-size: 20px"], main [style*="font-size: 19px"] { font-size: clamp(16px, 1.2vw, 18px) !important; }
header nav > a:first-child { font-size: 18px !important; }
main .ws-btn { font-size: 15px; padding: 10px 20px !important; min-height: 44px; }
.ws-btn-primary { box-shadow: 0 6px 18px -10px rgba(47, 185, 168, .55) !important; }
.ls-stage .ls-motto { font-weight: 500 !important; font-size: clamp(38px, 5.6vw, 76px) !important; line-height: 1.08 !important; text-shadow: 0 0 24px rgba(47, 185, 168, .14); }
.ls-stage .ls-when { font-weight: 500; font-size: clamp(16px, 1.8vw, 21px); }
.ls-stage .ls-eyebrow { font-size: 12px; }
.ls-stage .ls-clock { max-width: 600px; gap: clamp(6px, 1.2vw, 12px); }
.ls-stage .ls-tile { padding: clamp(10px, 1.6vw, 16px) 4px clamp(8px, 1.2vw, 12px); border-color: rgba(47, 185, 168, .18); box-shadow: inset 0 0 18px rgba(47, 185, 168, .05), 0 14px 28px -22px rgba(47, 185, 168, .35); }
.ls-stage .ls-num { font-weight: 500; font-size: clamp(26px, 5.4vw, 60px); text-shadow: 0 0 10px rgba(47, 185, 168, .35); }
.ls-stage .ls-unit { font-size: clamp(9px, 1vw, 11px); }
.ls-stage .ls-btn { min-height: 44px; padding: 0 22px; border-radius: 10px; font-size: 15px; box-shadow: 0 8px 22px -12px rgba(47, 185, 168, .55); }
.ls-stage .ls-btn-2 { box-shadow: none; }
.ls-stage .ls-phone { box-shadow: 0 0 0 1px #000, 0 40px 70px -40px #000, 0 0 50px -24px rgba(47, 185, 168, .22), 0 0 70px -36px rgba(245, 165, 36, .2); }
.ws-device { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .08), 0 30px 60px -30px rgba(0, 0, 0, .9), 0 0 70px -30px rgba(47, 185, 168, .18) !important; }
@media (max-width: 760px) {
  main h1 { font-size: 30px !important; }
  main h2 { font-size: 22px !important; }
  main h3 { font-size: 17px !important; }
  main [style*="font-size: 20px"], main [style*="font-size: 19px"] { font-size: 16px !important; }
  header nav > a:first-child { font-size: 17px !important; }
  .ls-stage .ls-inner { padding: 48px 16px 56px; gap: 14px; }
  .ls-stage .ls-motto { font-size: clamp(30px, 8.6vw, 40px) !important; }
  .ls-stage .ls-num { font-size: clamp(24px, 7vw, 30px); }
  .ls-stage .ls-tile { gap: 4px; border-radius: 10px; }
  .ls-stage .ls-when { font-size: 16px; }
  .ls-stage .ls-btn { width: 100%; max-width: 280px; }
}

/* the countdown's small copy in the header, once the big one has scrolled away (site.js) */
.ws-cd-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; margin: 0 auto 0 14px; border-radius: 999px;
  background: rgba(47, 185, 168, .08); border: 1px solid rgba(47, 185, 168, .22); color: #CFF7F1 !important; text-decoration: none;
  font-size: 12px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums;
  opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .25s ease, transform .25s var(--ws-ease);
}
.ws-cd-chip.ws-on { opacity: 1; transform: none; pointer-events: auto; }
.ws-cd-chip .ws-cd-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ws-accent); box-shadow: 0 0 6px rgba(47, 185, 168, .7); }
.ws-cd-chip .ws-cd-label { color: #F5C77A; }
.ws-cd-chip .ws-cd-time { font-family: "Chakra Petch", sans-serif; font-weight: 500; letter-spacing: .02em; }
@media (max-width: 400px) {
  header.ws-chip-on nav > a:first-child { font-size: 0 !important; gap: 0 !important; }
  .ws-cd-chip { margin-left: 10px; }
}
@media (prefers-reduced-motion: reduce) { .ws-cd-chip { transition: none; } }

/* ---------- the header, solid from the very top of the screen (Kuya Chan via Jarbes, 1 Nov 10:43 pm) ----------
   One solid colour from the top edge down, covering the iPhone's status bar and notch, the same at every scroll
   position. A fixed band paints the status-bar area too, so nothing that scrolls (or bounces) ever shows above it. */
html { background: #0C1018; }
header, header.ws-scrolled, header.ws-open {
  top: 0 !important; background: #0C1018 !important; border-bottom: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
header.ws-scrolled { box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .9) !important; }
body::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: env(safe-area-inset-top, 0px); z-index: 85;
  background: #0C1018; pointer-events: none;
}

/* the countdown chip, sitting in the solid header */
.ws-cd-chip {
  height: 30px; padding: 0 12px; gap: 7px;
  background: rgba(255, 255, 255, .06) !important; border: 1px solid rgba(255, 255, 255, .10) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); color: #F6F7F9 !important; text-shadow: none !important;
}
.ws-cd-chip .ws-cd-time { color: #BFF5EC; }
@media (max-width: 760px) {
  .ws-cd-chip { margin: 0 auto !important; }
  header.ws-chip-on .ws-menu { margin-left: 0; }
}

/* hide on scroll (Kuya Chan via Jarbes, 1 Nov 11:02 pm): the bar slides up on the way down and back on the way up.
   The strip behind the status bar and notch (body::before above) stays put, so that gap is always solid. */
header { transition: transform .2s ease, box-shadow .2s ease !important; opacity: 1 !important; isolation: isolate; }
header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #0C1018; }   /* a solid backing, so nothing ever shows through mid-slide */
header.ws-hide { transform: translateY(-100%); box-shadow: none !important; }
@media (prefers-reduced-motion: reduce) { header { transition: none !important; } }
/* the manual's contents bar follows the header up, so no gap opens above it */
.ws-toc { transition: top .2s ease; }
body:has(header.ws-hide) .ws-toc { top: calc(env(safe-area-inset-top, 0px) + 12px) !important; }
@media (prefers-reduced-motion: reduce) { .ws-toc { transition: none; } }


/* ---------- the status-bar block (Kuya Chan, 2 Nov 6:20 pm: "make the color block fixed at the top, and the header
   will hide under that when scrolled down") ----------
   A solid block in the header's colour is fixed over the status bar and notch (env(safe-area-inset-top): 0 on desktop
   and most Android phones, so nothing changes there). It never moves and sits above everything. The header lives just
   below it, and when it hides on the way down it slides up by its own height, under the block. */
body::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: env(safe-area-inset-top, 0px);
  background: #0C1018; z-index: 95; pointer-events: none;
}
body { padding-top: env(safe-area-inset-top, 0px); }
header, header.ws-scrolled, header.ws-open { padding-top: 0 !important; top: env(safe-area-inset-top, 0px) !important; }
body:has(header.ws-hide) .ws-toc { top: calc(env(safe-area-inset-top, 0px) + 12px) !important; }

/* ---------- Home's launch status (Kuya Chan, 2 Nov 6:23 pm: "not looking like a new year or birthday countdown") ----------
   Date first, quiet: a small teal label, the date, a muted "13 days · 5 hours to go", and the release line under a
   hairline. No boxes, no glow, no seconds; all of it smaller than the headline and the buttons. */
.ls-stage .ls-count { gap: 28px; margin-top: 8px; }
.ls-stage .ls-status { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ls-stage .ls-label { margin: 0 0 6px; font-family: "Inter", system-ui, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .12em; color: #2FB9A8; }
.ls-stage .ls-date { margin: 0; font-size: 17px; font-weight: 500; color: #DDE0E6; }
.ls-stage .ls-left { margin: 0; font-size: 15px; color: #A0A7B3; font-variant-numeric: tabular-nums; }
.ls-stage .ls-later { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 14px; color: #A0A7B3; min-width: min(320px, 80vw); }
.ws-cd-chip .ws-cd-time { font-family: "Inter", system-ui, sans-serif !important; color: #A0A7B3 !important; font-variant-numeric: tabular-nums; }
.ws-cd-chip .ws-cd-label { color: #DDE0E6 !important; }
.ws-cd-chip .ws-cd-dot { display: none; }

/* ---------- Home hero, one message (Kuya Chan via Jarbes, 2 Nov 7:43 pm) ----------
   A small status pill, the headline, one line on what WaveStage is, one main button and a quiet link, then the
   product. Three text sizes (13 px pill, 17 px subline and buttons, the headline), spacing in 8 px steps. */
.ls-stage .ls-inner { gap: 0 !important; padding: 104px 24px 0 !important; }
.ls-stage .ls-hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ls-stage .ls-pill {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 24px; padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .03);
  font-family: "Inter", system-ui, sans-serif; font-size: 13px; font-weight: 500; line-height: 1.4; color: #C9CED6;
  font-variant-numeric: tabular-nums;
}
.ls-stage .ls-pill [data-days] { color: #8C939F; }
.ls-stage .ls-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #2FB9A8; }
.ls-stage .ls-motto { font-size: clamp(40px, 5vw, 72px) !important; line-height: 1.05 !important; letter-spacing: -0.02em !important; font-weight: 500 !important; margin: 0 0 16px !important; text-shadow: none !important; }
.ls-stage .ls-sub { margin: 0 0 32px; max-width: 560px; font-size: 17px; line-height: 1.55; color: #A0A7B3; }
.ls-stage .ls-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 24px; margin: 0; }
.ls-stage .ls-btn { min-height: 48px !important; padding: 0 24px !important; font-size: 17px !important; border-radius: 10px !important; width: auto !important; max-width: none !important; box-shadow: none !important; }
.ls-stage .ls-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 17px; font-weight: 500; color: #DDE0E6; text-decoration: none; }
@media (hover: hover) { .ls-stage .ls-link:hover { color: #FFFFFF; } .ls-stage .ls-link:hover span { transform: translateX(3px); } }
.ls-stage .ls-link span { transition: transform .2s ease; }
.ls-stage .ls-star { margin-top: 48px !important; }
/* the stage lights, much quieter */
.ls-stage .ls-beam { opacity: .45; filter: blur(8px); }
.ls-stage .ls-lamps { opacity: .5; }
@media (max-width: 760px) {
  .ls-stage .ls-inner { padding: 64px 16px 0 !important; }
  .ls-stage .ls-motto { font-size: 40px !important; }
  .ls-stage .ls-pill { font-size: 13px; padding: 6px 12px; }
  .ls-stage .ls-sub { font-size: 17px; margin-bottom: 24px; }
  .ls-stage .ls-actions { flex-direction: column; gap: 8px; width: 100%; }
  .ls-stage .ls-btn { width: 100% !important; }
  .ls-stage .ls-star { margin-top: 40px !important; }
}
.ls-stage .ls-btn { box-sizing: border-box; }
@media (max-width: 760px) {
  .ls-stage .ls-motto { font-size: 36px !important; letter-spacing: -0.025em !important; }
}
@media (max-width: 440px) { .ls-stage .ls-pill .ls-more { display: none; } }

/* =====================================================================================================
   TYPE AND POLISH (Kuya Chan, 2 Nov 8:34 pm: new characterful fonts, a proper size scale, then make it look
   professionally built; keep the site as it is and refer back to the first design for its feel).
   Fonts, all SIL OFL and served from fonts/: Archivo at 118% width, semibold, for headlines and headings;
   Instrument Sans for text, buttons and forms; Geist Mono for small labels and figures.
   Scale (desktop / phone): hero 60 / 32, page title 52 / 32, section 34 / 25, card title 20 / 18, lead 19 / 17,
   body 17 / 16 at 1.6, small 14, label 13. Heading to text: 16 px under a section heading, 8 px under a card title.
   ===================================================================================================== */
@font-face { font-family: "Archivo WS"; src: url("fonts/archivo-wide-600.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-italic.woff2") format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono-400.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
:root {
  --f-display: "Archivo WS", "Instrument Sans", system-ui, sans-serif;
  --f-text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --t-hero: clamp(32px, 4.2vw, 60px); --t-h1: clamp(32px, 3.8vw, 52px); --t-h2: clamp(25px, 2.4vw, 34px);
  --t-h3: clamp(18px, 1.4vw, 20px); --t-lead: clamp(17px, 1.3vw, 19px); --t-body: 17px; --t-small: 14px; --t-label: 13px;
  --ws-radius: 16px; --r-img: 12px; --r-btn: 10px;
}
@media (max-width: 760px) { :root { --t-body: 16px; } }

/* text: Instrument Sans everywhere, over the pages' own inline choices */
body > div:first-of-type { font-family: var(--f-text) !important; font-size: var(--t-body) !important; line-height: 1.6 !important; font-feature-settings: "kern", "liga"; }
main [style*="Inter"], footer, header nav > div a, .ls-stage .ls-sub, .ls-stage .ls-link, .ls-stage .ls-btn, main button, main input, main select, main textarea { font-family: var(--f-text) !important; }
main p, main li { text-wrap: pretty; }
main p, main li, main dd, main summary, main label { font-size: var(--t-body); }
main [style*="font-size: 19px"], main [style*="font-size: 20px"], main [style*="font-size: 18px"] { font-size: var(--t-lead) !important; line-height: 1.55 !important; }
main [style*="font-size: 15px"], main [style*="font-size: 16px"] { font-size: 16px !important; line-height: 1.6 !important; }
main [style*="font-size: 14px"] { font-size: var(--t-small) !important; }
main [style*="font-size: 12px"], main [style*="font-size: 11px"] { font-size: var(--t-label) !important; }
main em, main i { font-family: var(--f-text) !important; }

/* headlines and headings: Archivo wide, confident, set a little tight */
header nav > a:first-child, footer a[style*="Chakra Petch"] { font-family: var(--f-display) !important; font-weight: 600 !important; letter-spacing: -0.01em !important; }
header nav > a:first-child { font-size: 17px !important; }
main h1, main h2, main h3, main blockquote[style*="Chakra"], .ls-stage .ls-motto { font-family: var(--f-display) !important; font-weight: 600 !important; font-variant-numeric: lining-nums; text-wrap: balance; }
main h1 { font-size: var(--t-h1) !important; line-height: 1.08 !important; letter-spacing: -0.03em !important; padding-bottom: 0; }
main h2 { font-size: var(--t-h2) !important; line-height: 1.15 !important; letter-spacing: -0.025em !important; font-weight: 600 !important; }
main h3 { font-size: var(--t-h3) !important; line-height: 1.3 !important; letter-spacing: -0.015em !important; }
main blockquote[style*="Chakra"] { letter-spacing: -0.02em !important; line-height: 1.3 !important; }
.ls-stage .ls-motto { font-size: var(--t-hero) !important; line-height: 1.06 !important; letter-spacing: -0.035em !important; font-weight: 600 !important; margin: 0 0 20px !important; }


/* small labels (eyebrows, categories, step numbers): Geist Mono, 13 px, never tiny */
main p[style*="letter-spacing: 0.14em"], main p[style*="letter-spacing: 0.1em"], main p[style*="letter-spacing: 0.12em"], main p[style*="letter-spacing: 0.08em"], main [style*="letter-spacing: 0.16em"], .ls-eyebrow, .ls-stage .ls-label {
  font-family: var(--f-mono) !important; font-size: var(--t-label) !important; font-weight: 500 !important; letter-spacing: .06em !important; text-transform: uppercase;
}
.ls-stage .ls-pill, .ws-cd-chip, .ws-cd-chip .ws-cd-time { font-family: var(--f-mono) !important; letter-spacing: 0 !important; }
.ls-stage .ls-pill { font-size: var(--t-label) !important; }
.ws-cd-chip { font-size: 12.5px !important; }
main dd, main td, main [data-left], main [data-days] { font-variant-numeric: tabular-nums; }

/* buttons: one family, Instrument Sans semibold, the same heights and radius everywhere */
main .ws-btn, .ls-stage .ls-btn, header nav > div a.ws-btn, header nav > div a[style*="background: #2FB9A8"], main button[type="submit"] {
  font-family: var(--f-text) !important; font-weight: 600 !important; letter-spacing: 0 !important; border-radius: var(--r-btn) !important;
}
main .ws-btn, main button[type="submit"] { font-size: 16px !important; min-height: 48px; padding: 0 22px !important; }
header nav > div a.ws-btn, header nav > div a[style*="background: #2FB9A8"] { font-size: 15px !important; }
.ls-stage .ls-btn, .ls-stage .ls-link { font-size: 16px !important; }
.ls-stage .ls-link { font-weight: 600 !important; }

/* polish: one card radius, one picture radius, crisp pictures, nothing cramped */
main .ws-card:not(.ws-device), main details.ws-more { border-radius: var(--ws-radius) !important; }
main img.ws-art { border-radius: var(--r-img); image-rendering: auto; }
main .ws-card > img.ws-art:first-child { border-radius: 0 !important; }
main .ws-card { overflow: hidden; }
/* the status pill and the header chip read as text, in Instrument Sans with even figures */
.ls-stage .ls-pill, .ws-cd-chip, .ws-cd-chip .ws-cd-time { font-family: var(--f-text) !important; font-weight: 500 !important; font-variant-numeric: tabular-nums; }
.ls-stage .ls-pill { font-size: 14px !important; }
.ws-cd-chip { font-size: 13px !important; }
.ls-stage .ls-sub { font-size: var(--t-lead) !important; line-height: 1.55 !important; }
/* phones: the headline runs as one sentence pair in three lines at most */
@media (max-width: 760px) {
  .ls-stage .ls-motto br { display: none; }
  .ls-stage .ls-motto { max-width: 15ch; margin-left: auto !important; margin-right: auto !important; }
}
/* cards with a "More" toggle: label, title, line and text 8 px apart; every card padded the same */
main details.ws-more > summary { gap: 8px !important; }
main details.ws-more .ws-motto { margin: 0 !important; }
main details.ws-more:not([style*="padding"]) { padding: 24px !important; }
main details.ws-more .ws-more-cue { margin-top: 4px !important; }
/* a row of cards is one height; while one is open its row lets the others keep their own size */
main div[style*="display: grid"]:has(> details.ws-more) > details.ws-more { align-self: stretch; }
main div[style*="display: grid"]:has(> details.ws-more[open]) > details.ws-more { align-self: start; }
/* Home's nine instruments: three by three on a big screen, two across on a tablet, so none sits alone */
@media (min-width: 1000px) { main div[style*="display: grid"]:has(> details[name="instruments"]) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
@media (min-width: 640px) and (max-width: 999px) { main div[style*="display: grid"]:has(> details[name="instruments"]) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
/* the last of the old typefaces: the demo-set numbers and the 404 figure */
main [style*="Chakra Petch"] { font-family: var(--f-display) !important; }
main span[style*="Chakra Petch"] { font-family: var(--f-mono) !important; font-weight: 500 !important; }
/* a heading inside a card is a card title, a step above the card text, never a section-sized headline */
main .ws-card h2, main details.ws-more h2, main div[style*="border-radius: 1"][style*="padding"] > h2 { font-size: clamp(20px, 1.7vw, 24px) !important; line-height: 1.25 !important; letter-spacing: -0.02em !important; }

/* =====================================================================================================
   HOME'S LAUNCH STATUS (Kuya Chan via Jarbes, 2 Nov 9:14 pm: "a countdown like any big music company would
   design"). One quiet line names the moment; light Archivo figures count to it, even-width, with thin muted colons
   and small mono captions; the seconds are smaller and muted. No boxes, tiles, glow or gradients.
   Three states switch by themselves at midnight, New Zealand time (site.js, and the Worker for each page):
   to 16 Nov the beta, to 7 Dec Google Play, then "out now" with the official Google Play badge.
   ===================================================================================================== */
@font-face { font-family: "Archivo Figures"; src: url("fonts/archivo-wide-300-figures.woff2") format("woff2"); font-weight: 300; font-display: swap; }
.ls-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ls-stage .ls-launch { display: flex; flex-direction: column; align-items: center; margin: 0 0 44px; }
/* the moment, in one precise line: the next one bright with a teal dot, the one after it muted */
.ls-stage .ls-mile, .ls-stage .ls-pill {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 0;
  padding: 0 !important; border: 0 !important; background: none !important; border-radius: 0 !important;
  font-family: var(--f-mono) !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.5 !important;
  letter-spacing: .12em !important; text-transform: uppercase; color: #DDE0E6 !important; font-variant-numeric: tabular-nums;
}
.ls-stage .ls-mile { margin-bottom: 22px; }
.ls-stage .ls-pill { margin-bottom: 28px; }
.ls-stage .ls-then { color: #7F8691; }
.ls-stage .ls-then::before { content: ""; display: inline-block; vertical-align: middle; width: 28px; height: 1px; margin: -2px 14px 0 12px; background: rgba(255, 255, 255, .2); }
/* the figures: days, hours and minutes on one baseline, the seconds small beside them, captions on one line below */
.ls-stage .ls-timer {
  --fig: clamp(46px, 5.6vw, 80px);
  display: grid; grid-template-columns: repeat(6, auto); justify-content: center; align-items: baseline; row-gap: 14px;
  margin: 0; font-family: "Archivo Figures", var(--f-display); font-weight: 300; color: #E6E8EC;
}
.ls-stage .ls-timer .ls-u { display: contents; }
.ls-stage .ls-timer .ls-n { grid-row: 1; justify-self: center; font-size: var(--fig); line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.ls-stage .ls-timer .ls-sep { grid-row: 1; font-size: var(--fig); line-height: 1; padding: 0 .16em; color: rgba(255, 255, 255, .24); transform: translateY(-.07em); }
.ls-stage .ls-timer .ls-c { grid-row: 2; justify-self: center; align-self: start; font-family: var(--f-mono); font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: #8E949C; }
.ls-stage .ls-timer [data-unit="d"], .ls-stage .ls-timer [data-unit="d"] + .ls-c { grid-column: 1; }
.ls-stage .ls-timer > .ls-sep:nth-child(3) { grid-column: 2; }
.ls-stage .ls-timer [data-unit="h"], .ls-stage .ls-timer [data-unit="h"] + .ls-c { grid-column: 3; }
.ls-stage .ls-timer > .ls-sep:nth-child(5) { grid-column: 4; }
.ls-stage .ls-timer [data-unit="m"], .ls-stage .ls-timer [data-unit="m"] + .ls-c { grid-column: 5; }
.ls-stage .ls-timer [data-unit="s"], .ls-stage .ls-timer [data-unit="s"] + .ls-c { grid-column: 6; margin-left: calc(var(--fig) * .28); }
.ls-stage .ls-timer [data-unit="s"] { font-size: calc(var(--fig) * .42); color: #7C838E; }
.ls-stage .ls-timer [data-unit="s"] + .ls-c { color: #7F8691; }
@media (prefers-reduced-motion: reduce) { .ls-stage .ls-timer [data-unit="s"], .ls-stage .ls-timer [data-unit="s"] + .ls-c { display: none; } }
/* the launch: the official badge is the main button (Google's rules: unaltered artwork, at least 28 px tall, clear
   space of a quarter of its height all round), then one plain line */
.ls-stage .ls-play { display: inline-block; padding: 0; margin: 0; border-radius: 10px; line-height: 0; }
.ls-stage .ls-play img { display: block; height: 60px; width: auto; }
.ls-stage .ls-play:focus-visible { outline: 2px solid #2FB9A8; outline-offset: 6px; }
.ls-stage .ls-note { margin: 20px 0 0; font-family: var(--f-text); font-size: 15px; line-height: 1.5; color: #A0A7B3; }
footer .ws-legal { color: #6F7682 !important; font-size: 13px !important; }
@media (max-width: 760px) {
  .ls-stage .ls-launch { margin-bottom: 32px; }
  .ls-stage .ls-mile { margin-bottom: 18px; }
  .ls-stage .ls-then { display: none; }
  .ls-stage .ls-timer { row-gap: 10px; }
  .ls-stage .ls-timer .ls-c { letter-spacing: .14em; }
  .ls-stage .ls-play img { height: 52px; }
}
/* the header chip takes no room until it shows, so a longer label can never push the menu off a phone screen */
.ws-cd-chip:not(.ws-on) { position: absolute; left: -9999px; }

/* =====================================================================================================
   REFINEMENT (Kuya Chan, 2 Nov 9:12 pm: "make it more looking professional")
   One grid on every page: the header, the sections and the footer share the same edges (1200 px of content on a
   desktop, 24 px in from the sides on a tablet, 20 px on a phone). Cards get a hairline edge and a faint top light,
   Home's introduction reads as one centred statement, and its closing call to action is centred too.
   ===================================================================================================== */
header nav { max-width: 1248px !important; }
@media (max-width: 760px) {
  header nav { padding-left: 20px !important; padding-right: 20px !important; }
  main { padding-left: 20px !important; padding-right: 20px !important; }
  main section { padding-left: 0 !important; padding-right: 0 !important; }
  main section[style*="background"] { padding: 28px 24px !important; }
  main > section.ls-stage { margin-left: -20px !important; margin-right: -20px !important; }
  .ls-stage .ls-inner { padding-left: 20px !important; padding-right: 20px !important; }
  footer > div { padding-left: 20px !important; padding-right: 20px !important; }
  .ws-swipe { margin: 0 -20px !important; padding-left: 20px !important; padding-right: 20px !important; scroll-padding-inline: 20px !important; }
}
/* the last few small labels that were still set in Inter */
.ws-toc-toggle { font: 600 15px var(--f-text) !important; }
.ws-shot-screen b { font: 600 15px var(--f-text) !important; }
.ws-shot-screen span { font: 500 12px var(--f-mono) !important; }
.ws-soon { font: 600 13px var(--f-text) !important; letter-spacing: .02em !important; }
/* the Beta page's date line, and the space in the Baybayin motto, in the site's own text face */
.ls-stage .ls-when { font-family: var(--f-text) !important; font-weight: 500 !important; font-size: var(--t-lead) !important; letter-spacing: 0 !important; }
[style*="Noto Sans Tagalog"] { font-family: "Noto Sans Tagalog", var(--f-text) !important; }

/* cards: a hairline edge and a faint light along the top, so each one reads as a crisp surface */
main .ws-card:not(.ws-device), main details.ws-more,
main p[style*="border: 1px solid #363C46"], main div[style*="border: 1px solid #363C46"]:not(.ws-device):not([style*="overflow-x"]),
main p[style*="solid rgb(54, 60, 70)"], main div[style*="solid rgb(54, 60, 70)"]:not(.ws-device):not([style*="overflow-x"]),
main section[style*="border: 1px solid #363C46"] {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}
@media (hover: hover) {
  main .ws-card:not(.ws-device):hover, main details.ws-more:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .06) !important; }
}
/* the colours card keeps its live accent, with a softer light */
main .ws-accent-card.ws-accent-card:not(#ws-none) {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ws-pick) 8%, transparent), 0 24px 60px -36px color-mix(in srgb, var(--ws-pick) 40%, transparent) !important;
}

/* Home: the introduction under the hero, as one centred statement (left-aligned on a phone, where it runs long) */
@media (min-width: 761px) {
  main > .ls-stage + section { align-items: center; text-align: center; padding-top: 104px !important; padding-bottom: 24px !important; }
  main > .ls-stage + section > p { max-width: 34em !important; font-size: clamp(19px, 1.6vw, 22px) !important; line-height: 1.55 !important; color: #C9CED6 !important; text-wrap: balance; }
}
/* Home: the closing call to action, centred, with a faint teal light from above */
body:has([data-countdown]) main > section:last-of-type > div[style*="padding: 48px"] {
  flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center; gap: 28px !important;
  padding: 72px 40px !important; border-radius: 24px !important;
  background: radial-gradient(70% 120% at 50% 0%, rgba(47, 185, 168, .08), transparent 62%), var(--ws-surface) !important;
}
body:has([data-countdown]) main > section:last-of-type > div[style*="padding: 48px"] > div:first-child { align-items: center; max-width: 600px !important; gap: 12px !important; }
body:has([data-countdown]) main > section:last-of-type > div[style*="padding: 48px"] h2 { font-size: var(--t-h2) !important; line-height: 1.15 !important; margin-bottom: 4px !important; }
body:has([data-countdown]) main > section:last-of-type > div[style*="padding: 48px"] > div:last-child { justify-content: center; }
@media (max-width: 760px) {
  body:has([data-countdown]) main > section:last-of-type > div[style*="padding: 48px"] { padding: 48px 24px !important; }
  body:has([data-countdown]) main > section:last-of-type > div[style*="padding: 48px"] > div:last-child { width: 100%; flex-direction: column; }
  body:has([data-countdown]) main > section:last-of-type > div[style*="padding: 48px"] > div:last-child > a { width: 100%; }
}
/* the Home subline (Kuya Chan, 2 Nov 10:18 pm wording): two even lines on a desktop, no word left alone on a line;
   phones keep the normal wrap, so "16-channel" never splits at its hyphen */
@media (min-width: 761px) { .ls-stage .ls-sub { max-width: 660px !important; text-wrap: balance; } }

/* ---------- the living waves behind Home's headline (Kuya Chan via Jarbes, 2 Nov 11:00 pm) ----------
   The app icon's five lines, stretched wide behind the headline, in a soft teal-to-amber like the stage lights. They
   sit under the lights and the text (z-index -2 inside the stage), draw in one after another, then drift (site.js).
   Quiet on purpose: the headline, the countdown and the buttons lead. Wider and fainter on phones; still and fully
   drawn for anyone who asks for less motion. */
.ls-stage .ls-head { position: relative; width: 100%; }
.ls-stage .ls-waves {
  position: absolute; z-index: -2; left: 50%; top: calc(50% + 30px); transform: translate(-50%, -50%);
  width: min(1240px, 110vw); height: clamp(220px, 23vw, 320px); overflow: visible; pointer-events: none; opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 76%, transparent 100%);
}
.ls-stage .ls-waves path { clip-path: inset(-40% 100% -40% 0); animation: ws-draw 2.4s var(--ws-ease) forwards; }
.ls-stage .ls-waves path:nth-of-type(1) { fill-opacity: .95; animation-delay: .2s; }
.ls-stage .ls-waves path:nth-of-type(2) { fill-opacity: .8; animation-delay: .5s; }
.ls-stage .ls-waves path:nth-of-type(3) { fill-opacity: .65; animation-delay: .8s; }
.ls-stage .ls-waves path:nth-of-type(4) { fill-opacity: .5; animation-delay: 1.1s; }
.ls-stage .ls-waves path:nth-of-type(5) { fill-opacity: .38; animation-delay: 1.4s; }
@media (max-width: 760px) {
  .ls-stage .ls-waves { top: calc(50% + 26px); width: 200vw; height: 220px; opacity: .36; }
}
@media (prefers-reduced-motion: reduce) {
  .ls-stage .ls-waves path { animation: none !important; clip-path: none; }
}

/* =====================================================================================================
   A STEP BIGGER (Kuya Chan via Jarbes, 2 Nov 11:15 pm): the header bar 72 px on a desktop and 64 on a phone, the
   wave mark and the wordmark up a step, nav links at 16 px; still one slim solid bar that hides on the way down and
   comes back on the way up, under the fixed status-bar block. Home's headline about 72 px on a desktop and 38 on a
   375 px phone, with the countdown and the buttons scaled to match.
   ===================================================================================================== */
header nav { min-height: 72px !important; }
header nav > a:first-child { font-size: 20px !important; gap: 12px !important; }
header nav > a:first-child .ws-mark { display: block; flex: none; width: 32px; height: 32px; overflow: visible; shape-rendering: geometricPrecision; }
header nav > a:first-child .ws-mark path { clip-path: inset(-40% 100% -40% 0); animation: ws-draw 1.1s var(--ws-ease) forwards; }
header nav > a:first-child .ws-mark path:nth-of-type(2) { animation-delay: .09s; }
header nav > a:first-child .ws-mark path:nth-of-type(3) { animation-delay: .18s; }
header nav > a:first-child .ws-mark path:nth-of-type(4) { animation-delay: .27s; }
header nav > a:first-child .ws-mark path:nth-of-type(5) { animation-delay: .36s; }
@media (prefers-reduced-motion: reduce) { header nav > a:first-child .ws-mark path { animation: none !important; clip-path: none; } }
header nav > div a { font-size: 16px !important; }
header nav > div a.ws-btn, header nav > div a[style*="background: #2FB9A8"] {
  font-size: 16px !important; min-height: 42px; padding: 0 18px !important; display: inline-flex; align-items: center; box-sizing: border-box;
}
html { scroll-padding-top: 88px; }
@media (max-width: 899px) { .ws-toc { top: calc(env(safe-area-inset-top, 0px) + 80px); } }
@media (max-width: 760px) {
  header nav { min-height: 64px !important; }
  header nav > a:first-child { font-size: 18px !important; gap: 10px !important; }
  header nav > a:first-child .ws-mark { width: 28px; height: 28px; }
  header nav > div a { font-size: 17px !important; }
  html { scroll-padding-top: 80px; }
  .ws-toc { top: calc(env(safe-area-inset-top, 0px) + 72px); }
}

/* Home's headline: about 72 px on a desktop, easing down to about 38 px on a phone */
.ls-stage { --t-hero: clamp(38px, 5vw, 72px); }
.ls-stage .ls-motto { font-size: var(--t-hero) !important; line-height: 1.04 !important; margin-bottom: 24px !important; }
/* the countdown and the buttons, in proportion */
.ls-stage .ls-timer { --fig: clamp(50px, 6.1vw, 88px); }
.ls-stage .ls-launch { margin-bottom: 48px; }
.ls-stage .ls-sub { margin-bottom: 36px !important; }
.ls-stage .ls-btn { min-height: 52px !important; padding: 0 28px !important; font-size: 17px !important; }
.ls-stage .ls-link { font-size: 17px !important; }
.ls-stage .ls-play img { height: 64px; }
@media (max-width: 760px) {
  .ls-stage .ls-launch { margin-bottom: 36px; }
  .ls-stage .ls-sub { margin-bottom: 28px !important; }
  .ls-stage .ls-play img { height: 56px; }
}

/* Skip to content: hidden until a keyboard reaches it (accessibility pass, 4 Nov) */
/* fully hidden (the screen-reader pattern) until a keyboard reaches it; then a pill below the status bar */
.ws-skip { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.ws-skip:focus { position: fixed; left: 16px; top: calc(env(safe-area-inset-top, 0px) + 10px); z-index: 10000; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none;
  padding: 12px 18px; border-radius: 8px; background: #2FB9A8; color: #04201C; font: 600 16px "Instrument Sans", system-ui, sans-serif; text-decoration: none; outline: 2px solid #F6F7F9; outline-offset: 2px; }
main:focus { outline: none; }

/* tutorial videos (6 Nov): the same width as the step-through frames */
.ws-steps-video { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 668; background: #05070A; }

/* ---------- a calm header (Kuya Chan, 8 Nov: "i really dont like how the header of the website looks, fix this") ----------
   Always there and sticky, never sliding away. One solid surface from the very top of the screen: on an iPhone it
   covers the status bar and notch by its own padding, env(safe-area-inset-top) applied once, so nothing scrolls above
   it and nothing sits on the clock or the battery. The logo and the menu stay centred in the bar below that. No
   reading-progress line. This block replaces the earlier hide-on-scroll and status-bar-block rules above. */
body { padding-top: 0 !important; }
body::before { content: none !important; display: none !important; }
header, header.ws-scrolled, header.ws-open, header.ws-hide {
  position: sticky !important; top: 0 !important; z-index: 90;
  padding-top: env(safe-area-inset-top, 0px) !important;
  transform: none !important; transition: none !important;
  background: #0C1018 !important; border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
header.ws-scrolled { box-shadow: 0 10px 24px -18px rgba(0, 0, 0, .9) !important; }
header nav { align-items: center !important; }
header nav > a:first-child, header .ws-menu { align-self: center; }
#ws-progress { display: none !important; }
html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 88px); }
@media (max-width: 760px) { html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 80px); } }
body:has(header.ws-hide) .ws-toc { top: auto; }

/* Safari on iPhone (8 Nov, from Kuya Chan's phone): page content showed in the status-bar strip above the header.
   A solid block in the header's colour reaches up from its top edge, so whatever Safari draws above the page's top
   (behind the clock and the battery) is the header's colour, never the content scrolling past. Off screen elsewhere. */
header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 200px; background: #0C1018; pointer-events: none; }
header { overflow: visible !important; }

/* ---------- Home's devices (preview, 8 Nov): the Android tablet with the phone in front, and further down the iPad
   with the iPhone. Generic frames drawn here, no makers' logos. Each screen is Besyon's render from the app
   (images/hero/, see tools/hero_art.py); it crossfades from dark to light and back every 5 s (site.js). ---------- */
.dv-pair { position: relative; width: min(960px, 100%); aspect-ratio: 1.62; margin-inline: auto; max-width: 100%; }
.ls-stage .ls-star.dv-pair { width: min(960px, 100%); }
.ls-star.dv-pair::after { bottom: -30px; }
.dv-pair-small { width: min(760px, 100%); margin-top: 8px; }
.dv { position: absolute; container-type: inline-size; }
.dv-pair .dv-big { left: 0; top: 0; width: 80%; }
.dv-pair .dv-small { right: 0; bottom: 0; width: 46%; z-index: 2; }
@media (max-width: 600px) {
  .dv-pair { aspect-ratio: 1.3; }
  .dv-pair .dv-big { width: 88%; }
  .dv-pair .dv-small { width: 64%; }
}
.dv-body {
  position: relative; box-sizing: border-box;
  background: linear-gradient(150deg, #2A2F38, #0B0D11 52%, #171A20);
  box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 255, 255, .08), 0 40px 70px -40px #000;
}
.dv-small .dv-body { box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 255, 255, .09), 0 28px 50px -18px rgba(0, 0, 0, .85), 0 10px 22px -8px rgba(0, 0, 0, .65); }
.dv-screen { position: relative; overflow: hidden; background: #0B0D11; isolation: isolate; }
.dv-screen picture, .dv-screen img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.dv-screen img { object-fit: cover; }
.dv-light { opacity: 0; transition: opacity 1.2s ease; }
.dv-pair.is-light .dv-light { opacity: 1; }
/* the four frames, in units of the device's own width (cqw). The Android phone's camera sits in its left bezel, so it never covers the app's rail */
.dv-phone .dv-body { padding: 1.5cqw 1.5cqw 1.5cqw 3.1cqw; border-radius: 5.6cqw; }
.dv-phone .dv-screen { aspect-ratio: 1664 / 768; border-radius: 4.2cqw; }
.dv-cam { position: absolute; left: 1.65cqw; top: 50%; width: 1.5cqw; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #050608; box-shadow: inset 0 0 0 .3cqw #14171D; z-index: 3; }
.dv-tablet .dv-body, .dv-tablet-ios .dv-body { padding: 2.2cqw; border-radius: 3.4cqw; }
.dv-tablet .dv-screen { aspect-ratio: 2560 / 1600; border-radius: 1.3cqw; }
.dv-dot { position: absolute; left: 50%; top: 1.1cqw; width: .7cqw; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: #050608; box-shadow: 0 0 0 .15cqw #22262E; }
.dv-tablet-ios .dv-body { padding: 1.9cqw; }
.dv-tablet-ios .dv-screen { aspect-ratio: 2360 / 1640; border-radius: 1.6cqw; }
.dv-iphone .dv-body { padding: 1.3cqw; border-radius: 7.2cqw; }
.dv-iphone .dv-screen { aspect-ratio: 1748 / 804; }
.dv-iphone .dv-screen { border-radius: 6cqw; }
.dv-island { position: absolute; left: 1.35%; top: 50%; width: 4.3%; height: 31%; transform: translateY(-50%); border-radius: 999px; background: #000; z-index: 3; }
@media (prefers-reduced-motion: reduce) { .dv-light { display: none; } }

/* ---------- one hero (Kuya Chan, 8 Nov 6:14 pm): the Android tablet with the phone in front of it, both tilted a
   little, and the iPhone and iPad to the left, smaller, dimmer and further back, because they're coming soon. Dark and
   light versions of all four crossfade together (site.js). This replaces the two pairs above. ---------- */
.dv-stage { position: relative; width: min(1040px, 100%); aspect-ratio: 1.75; margin-inline: auto; max-width: 100%; }
.ls-stage .ls-star.dv-stage { width: min(1040px, 100%); }
.dv-stage .dv { position: absolute; transform-origin: 50% 50%; }
.dv-stage .dv-ios { position: absolute; left: 0; top: 9%; width: 37%; height: 70%; z-index: 1; }
.dv-stage .dv-ios .dv { filter: brightness(.5) saturate(.75) blur(.6px); }
.dv-stage .dv-ipad { left: 0; top: 0; width: 84%; transform: perspective(1400px) rotateY(20deg) rotateZ(-1.5deg); }
.dv-stage .dv-iph { left: 30%; top: 47%; width: 60%; transform: perspective(1200px) rotateY(18deg) rotateZ(-2deg); }
.dv-soon-label {
  position: absolute; left: 5%; bottom: 32%; z-index: 5; margin: 0; padding: 4px 10px; border-radius: 999px;
  background: rgba(7, 9, 14, .8); border: 1px solid rgba(255, 255, 255, .08); color: #A0A7B3;
  font: 500 12px/1.3 "Geist Mono", ui-monospace, Menlo, monospace; letter-spacing: .04em; white-space: nowrap;
}
.dv-stage .dv-tab { right: 6%; top: 0; width: 64%; z-index: 2; transform: perspective(1800px) rotateY(-14deg) rotateX(4deg) rotateZ(1deg); }
.dv-stage .dv-ph { right: 0; bottom: 2%; width: 42%; z-index: 3; transform: perspective(1300px) rotateY(-16deg) rotateX(3deg) rotateZ(-2.5deg); }
.dv-stage .dv-ph .dv-body { box-shadow: 0 0 0 1px #000, inset 0 0 0 1px rgba(255, 255, 255, .09), 0 30px 60px -16px rgba(0, 0, 0, .9), 0 12px 26px -8px rgba(0, 0, 0, .7); }
@media (max-width: 600px) {
  .dv-stage { aspect-ratio: 1.15; }
  .dv-stage .dv-ios { top: 0; width: 54%; height: 48%; }
  .dv-stage .dv-ipad { width: 88%; }
  .dv-stage .dv-iph { left: 22%; top: 44%; width: 66%; }
  .dv-soon-label { left: 0; top: 0; bottom: auto; font-size: 11px; padding: 3px 8px; }
  .dv-stage .dv-ios { top: 9%; }
  .dv-stage .dv-tab { right: 0; top: 20%; width: 80%; }
  .dv-stage .dv-ph { right: 0; bottom: 1%; width: 68%; }
}

/* the hero band's own fill, lifted with the page (Kuya Chan, 8 Nov 11:26 pm): #05070A to #0E131B, about 5 points
   lighter and still a shade lighter than the header (#0C1018) so the bar reads. The glows on top are unchanged. */
.ls-stage { background-color: #0E131B !important; }