/* Philbox coming-soon page. Tokens and rules live in DESIGN.md. Light theme only. */

:root {
  --bg: #F8F9FD;
  --border: #E3E6F1;
  --text: #0C0D3A;
  --muted: #4B4F6E;
  --navy: #000087;
  --green: #72BD40;
  --green-hover: #7FC94B;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(16px, 4vw, 48px);

  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ------------------------------------------------------------------ */
/* Living background                                                   */
/* ------------------------------------------------------------------ */

.bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.bg-field {
  position: absolute;
  width: 75vmax;
  height: 75vmax;
  border-radius: 50%;
}

.bg-field--navy {
  top: -38vmax;
  left: -30vmax;
  background: radial-gradient(closest-side, rgb(0 0 135 / .13), rgb(0 0 135 / 0));
}

.bg-field--green {
  right: -30vmax;
  bottom: -40vmax;
  background: radial-gradient(closest-side, rgb(114 189 64 / .24), rgb(114 189 64 / 0));
}

.bg-field--soft {
  top: 28%;
  right: -22vmax;
  width: 50vmax;
  height: 50vmax;
  background: radial-gradient(closest-side, rgb(114 189 64 / .12), rgb(114 189 64 / 0));
}

/* The mask sits on a still wrapper so the fade stays put while the lines drift */
.bg-grid {
  position: absolute;
  inset: 0;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 78%);
}

.bg-grid-lines {
  position: absolute;
  inset: -64px;
  background-image:
    linear-gradient(to right, rgb(0 0 135 / .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(0 0 135 / .06) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* Floating pharmacy shapes. Outer span grows in, inner <i> floats forever. */

.shape {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h, var(--w));
  margin-left: calc(var(--w) / -2);
  margin-top: calc(var(--h, var(--w)) / -2);
}

.shape > i {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(var(--r0));
}

.is-navy { color: var(--navy); }
.is-green { color: var(--green); }

/* Rounded cross, echoing the logo */
.shape--plus > i::before,
.shape--plus > i::after {
  content: "";
  position: absolute;
  background: currentColor;
  border-radius: 22%;
}

.shape--plus > i::before {
  left: 32%;
  width: 36%;
  height: 100%;
}

.shape--plus > i::after {
  top: 32%;
  width: 100%;
  height: 36%;
}

.shape--plus.is-navy > i { opacity: .1; }
.shape--plus.is-green > i { opacity: .24; }

/* Two-tone capsule in brand colors */
.shape--capsule > i {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--navy) 0 50%, var(--green) 50% 100%);
  opacity: .14;
}

/* Scored tablet */
.shape--tablet > i {
  border-radius: 50%;
  background: currentColor;
  opacity: .1;
}

.shape--tablet > i::after {
  content: "";
  position: absolute;
  top: 46%;
  left: 18%;
  right: 18%;
  height: 8%;
  border-radius: 99px;
  background: var(--bg);
}

.shape--ring > i {
  border: 3px solid currentColor;
  border-radius: 50%;
  opacity: .3;
}

/* ------------------------------------------------------------------ */
/* Page                                                                */
/* ------------------------------------------------------------------ */

.page {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto auto;
  overflow-x: clip;
}

.hero {
  width: 100%;
  max-width: calc(760px + var(--gutter) * 2);
  margin-inline: auto;
  padding: clamp(28px, 6vh, 64px) var(--gutter) clamp(32px, 6vh, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.logo {
  display: block;
  width: auto;
  height: clamp(48px, 32px + 3.4vw, 80px);
  margin-bottom: clamp(24px, 4.5vh, 44px);
}

.title {
  max-width: 15ch;
  margin: 0 0 clamp(14px, 2.2vh, 22px);
  color: var(--text);
  font-size: clamp(2.15rem, 1.1rem + 4.4vw, 4.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.035em;
  text-wrap: balance;
}

/* Each word rises out of its own mask. Padding keeps descenders (y, p) unclipped. */
.w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: .2em;
  margin-bottom: -.2em;
}

.w > span {
  display: inline-block;
}

.w--emph > span {
  position: relative;
  color: var(--navy);
}

.w--emph > span::after {
  content: "";
  position: absolute;
  left: .02em;
  right: .3em;
  bottom: -.04em;
  height: .11em;
  border-radius: 99px;
  background: var(--green);
  transform-origin: left center;
}

.lede {
  max-width: 46ch;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1rem, .94rem + .3vw, 1.16rem);
  line-height: 1.6;
  text-wrap: pretty;
}

/* Countdown */

.countdown {
  width: 100%;
  margin-top: clamp(28px, 4.5vh, 44px);
}

.countdown-label {
  margin: 0 0 clamp(12px, 1.8vh, 16px);
  color: var(--muted);
  font-size: clamp(.66rem, .62rem + .2vw, .78rem);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.countdown-row {
  position: relative;
}

/* Heartbeat line, full viewport width, running behind the tiles */
.pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 80px;
  transform: translate(-50%, -50%);
  overflow: visible;
}

.pulse path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.pulse-base {
  stroke: var(--navy);
  stroke-opacity: .13;
  stroke-width: 1.5;
}

.pulse-beat {
  stroke: var(--green);
  stroke-width: 2.5;
  stroke-dasharray: 70 430;
  stroke-dashoffset: 1000;
}

.countdown-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 2vw, 16px);
  max-width: 560px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1vw, 10px);
  padding: clamp(14px, 2.4vw, 22px) 4px clamp(12px, 2vw, 18px);
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgb(255 255 255 / .78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow:
    0 1px 0 #FFFFFF inset,
    0 14px 34px -22px rgb(0 0 135 / .45);
}

.tile-num {
  display: block;
  color: var(--navy);
  font-size: clamp(1.75rem, 1rem + 3.4vw, 3.25rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -.03em;
}

.tile-label {
  color: var(--muted);
  font-size: clamp(.62rem, .58rem + .2vw, .74rem);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* CTA */

.cta-wrap {
  margin-top: clamp(28px, 4.5vh, 44px);
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 28px 0 22px;
  border-radius: 999px;
  background: var(--green);
  color: var(--navy);
  box-shadow:
    0 1px 0 rgb(255 255 255 / .4) inset,
    0 10px 26px -12px rgb(0 0 135 / .45);
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 160ms var(--ease-out),
    background-color 160ms var(--ease-out);
}

.cta-icon {
  width: 22px;
  height: 22px;
  flex: none;
}

@media (hover: hover) and (pointer: fine) {
  .cta:hover {
    background: var(--green-hover);
    transform: translateY(-1px);
  }
}

.cta:active {
  transform: scale(.98);
}

.cta:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

/* Category marquee */

.marquee {
  overflow: hidden;
  border-block: 1px solid var(--border);
  background: rgb(255 255 255 / .55);
  padding-block: clamp(14px, 1.8vw, 20px);
}

.marquee-track {
  display: flex;
  width: max-content;
}

.marquee-list {
  display: flex;
  align-items: center;
  justify-content: space-around;
  /* Each copy must cover the viewport or ultra-wide screens see a gap in the loop */
  min-width: 100vw;
  margin: 0;
  padding: 0;
  list-style: none;
}

.marquee-list li {
  display: flex;
  align-items: center;
  white-space: nowrap;
  color: var(--muted);
  font-size: clamp(1.05rem, .85rem + 1vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1;
}

.marquee-list li::after {
  content: "+";
  content: "+" / "";
  margin-inline: clamp(18px, 2.4vw, 34px);
  color: var(--green);
  font-weight: 700;
}

/* Footer */

.foot {
  padding: 18px var(--gutter) calc(18px + env(safe-area-inset-bottom));
  color: var(--muted);
  font-size: .875rem;
  font-weight: 500;
  text-align: center;
}

.foot p {
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* Small screens                                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 640px) {
  /* Keep four shapes, smaller, in the corners */
  .shape { scale: .65; }
  .shape:nth-child(3),
  .shape:nth-child(4),
  .shape:nth-child(7),
  .shape:nth-child(8) { display: none; }
  /* Push shapes into the corners, clear of the logo and CTA (!important beats the inline position) */
  .shape:nth-child(1) { --x: 7% !important; --y: 5% !important; }
  .shape:nth-child(2) { --x: 90% !important; --y: 4% !important; }
  .shape:nth-child(5) { --x: 9% !important; --y: 80% !important; }
}

@media (max-width: 480px) {
  .tile { border-radius: 12px; }
  .tile-label { letter-spacing: .08em; }
}

@media (max-width: 359px) {
  .tile-label { font-size: .58rem; letter-spacing: .04em; }
  .cta { padding-inline: 18px 22px; font-size: 1rem; }
}

/* Short landscape phones: tighten vertical rhythm */
@media (max-height: 520px) and (orientation: landscape) {
  .logo { height: 40px; margin-bottom: 16px; }
  .title { font-size: clamp(1.9rem, 1rem + 3vw, 2.6rem); }
  .countdown,
  .cta-wrap { margin-top: 20px; }
}

/* ------------------------------------------------------------------ */
/* Motion. Everything here is skipped under reduced motion.            */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  /* Entrance */
  .bg { animation: fade-in 1.2s ease-out both; }

  .logo {
    animation: logo-in 800ms var(--ease-out) 100ms both;
  }

  .w > span {
    animation: word-up 900ms var(--ease-out) both;
    animation-delay: calc(260ms + var(--i, 0) * 80ms);
  }

  .w--emph > span::after {
    animation: grow-x 800ms var(--ease-out) 1000ms both;
  }

  .reveal {
    animation: rise 700ms var(--ease-out) both;
    animation-delay: var(--d, 0ms);
  }

  .shape {
    animation: shape-in 1s var(--ease-out) both;
    animation-delay: var(--in, 0ms);
  }

  /* Live, after the entrance */
  .shape > i {
    animation: float var(--dur, 20s) ease-in-out infinite alternate;
  }

  .bg-field { will-change: transform; }
  .bg-field--navy { animation: field-a 24s ease-in-out infinite alternate; }
  .bg-field--green { animation: field-b 28s ease-in-out infinite alternate; }
  .bg-field--soft { animation: field-c 22s ease-in-out infinite alternate; }

  .bg-grid-lines { animation: grid-drift 30s linear infinite; }

  .pulse-beat { animation: beat 5s linear infinite; }

  .marquee-track { animation: marquee 46s linear infinite; }

  .marquee:hover .marquee-track { animation-play-state: paused; }
}

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes logo-in {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
}

@keyframes word-up {
  from { transform: translateY(110%); }
}

@keyframes grow-x {
  from { transform: scaleX(0); }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
}

@keyframes shape-in {
  from { opacity: 0; transform: scale(.3); }
}

@keyframes float {
  from { transform: translate3d(0, 0, 0) rotate(var(--r0)); }
  to { transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--r1)); }
}

@keyframes field-a {
  to { transform: translate3d(8vmax, 6vmax, 0) scale(1.12); }
}

@keyframes field-b {
  to { transform: translate3d(-10vmax, -6vmax, 0) scale(1.15); }
}

@keyframes field-c {
  to { transform: translate3d(-6vmax, 8vmax, 0) scale(.9); }
}

@keyframes grid-drift {
  to { transform: translate3d(64px, 64px, 0); }
}

@keyframes beat {
  to { stroke-dashoffset: 0; }
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .pulse-beat { display: none; }

  .marquee-list[aria-hidden="true"] { display: none; }

  .marquee-track {
    width: auto;
    padding-inline: var(--gutter);
  }

  .marquee-list {
    flex-wrap: wrap;
    justify-content: center;
    min-width: 0;
    row-gap: 12px;
  }
}