/* Doseline landing. The page is one day: dawn at the top, the sun path with its doses in the hero,
   daylight through the features, dusk at pricing and night at the end.
   The only motion on load is the capsule riding the sun path to "now"; phones drift into place as you scroll.
   Type is the system rounded face (SF Rounded on Apple devices, like the app); no web fonts. */

:root {
  --paper: #FAF9FF;
  --ink: #1F1A3D;
  --slate: #5F5B7A;
  --iris: #5A49D6;
  --iris-deep: #4636C0;
  --mist: #EFEDFC;
  --capsule: #F07AA3;
  --rule: #DEDAF5;
  --dawn: #FFEDE6;
  --dusk: #E7E2FC;
  --night: #17132F;
  /* Safari draws ui-rounded as SF Rounded; elsewhere the system UI face. No fonts that mangle Vietnamese diacritics. */
  --font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --wrap: 68rem;
  --gutter: clamp(1rem, 4vw, 2rem);
  --section: clamp(4.5rem, 10vw, 8.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--iris); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--iris-deep); }
:focus-visible { outline: 3px solid var(--iris); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 { margin: 0; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(2.75rem, 7.6vw, 5.5rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; }
h2 { font-size: clamp(2.125rem, 4.6vw, 3.375rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; }
h3 { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
p { margin: 0; text-wrap: pretty; }

.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.lede { font-size: clamp(1.1875rem, 2vw, 1.375rem); color: var(--slate); max-width: 36ch; }
.fine { font-size: 0.9375rem; color: var(--slate); }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--paper); padding: 0.5rem 1rem; }

/* ---- Header: a floating pill with the logo, the language and the download */
.top { position: sticky; top: 0.75rem; z-index: 5; padding-inline: var(--gutter); }
.top .wrap {
  display: flex; align-items: center; gap: 0.5rem; width: min(100%, var(--wrap)); min-height: 3.5rem;
  padding: 0.4rem 0.4rem 0.4rem 0.9rem; border-radius: 999px;
  background: color-mix(in srgb, #fff 72%, transparent);
  backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rule) 80%, transparent), 0 0.75rem 2rem -1rem rgba(52, 38, 150, 0.25);
}
.brand { display: flex; align-items: center; gap: 0.55rem; margin-right: auto; color: var(--ink); text-decoration: none; font-weight: 800; font-size: 1.125rem; letter-spacing: -0.01em; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.top .button { min-height: 2.65rem; padding-inline: 1.15rem; font-size: 0.9375rem; }

/* Language menu: like the app's Settings → Language. The name in its own language, the name in
   the page's language underneath, a check on the current one. Plain <details>, no script. */
.langs { position: relative; }
.langs summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 0.7rem; border-radius: 999px;
  color: var(--slate); font-weight: 600; font-size: 0.9375rem;
}
.langs summary::-webkit-details-marker { display: none; }
.langs summary svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.langs summary:hover, .langs[open] summary { background: var(--mist); color: var(--ink); }
.langs ul {
  position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 6;
  min-width: 16.5rem; margin: 0; padding: 0.4rem; list-style: none;
  background: #fff; border-radius: 1.25rem;
  box-shadow: 0 1.5rem 3rem -1rem rgba(52, 38, 150, 0.3), 0 0 0 1px var(--rule);
}
.langs a {
  display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; align-items: center;
  padding: 0.6rem 0.85rem; border-radius: 0.85rem;
  color: var(--ink); text-decoration: none; line-height: 1.3;
}
.langs a:hover { background: var(--mist); color: var(--ink); }
.langs b { font-weight: 600; }
.langs small { grid-column: 1; color: var(--slate); font-size: 0.8125rem; }
.langs a[aria-current="page"]::after {
  content: ""; grid-column: 2; grid-row: 1 / span 2; width: 1rem; height: 1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%235A49D6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .langs[open] ul { animation: drop 0.16s ease-out; }
}
@keyframes drop { from { opacity: 0; translate: 0 -0.35rem; } }
@media (max-width: 480px) {
  .langs summary span { display: none; }
  .langs ul { position: fixed; left: var(--gutter); right: var(--gutter); top: 4.75rem; min-width: 0; }
}

/* ---- Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 3.25rem; padding: 0 1.5rem;
  border-radius: 999px;
  background: var(--iris); color: #fff;
  font-weight: 700; font-size: 1.0625rem; text-decoration: none;
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.button:hover { background: var(--iris-deep); color: #fff; }
.button:active { transform: scale(0.98); }
.button svg { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }

/* ---- Phone frame: the screenshot inside a dark rounded bezel */
.phone {
  margin: 0;
  width: min(78vw, 18.5rem);
  aspect-ratio: 660 / 1435;
  border: 0.55rem solid var(--ink);
  border-radius: 2.75rem;
  overflow: hidden;
  background: var(--mist);
  box-shadow: 0 2.5rem 4rem -1.5rem rgba(52, 38, 150, 0.35);
}
.phone img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Hero: dawn. The phone stands in front of a low sun. */
.hero { margin-top: -4.25rem; padding-top: calc(4.25rem + clamp(2.5rem, 7vw, 5rem)); background: linear-gradient(180deg, var(--dawn) 0%, #FDF1F6 55%, var(--paper) 100%); overflow: clip; }
.hero-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; align-items: center; gap: clamp(2rem, 6vw, 5rem); }
.hero h1 { max-width: 11ch; }
.hero .lede { margin-top: 1.75rem; }
.hero .cta { margin-top: 2.25rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; }
.stage { position: relative; isolation: isolate; justify-self: center; }
.stage::before {
  content: ""; position: absolute; z-index: -1; inset: 18% -38% auto; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #FFD9C7 0%, #FBC3D6 38%, color-mix(in srgb, #F3C9EE 50%, transparent) 62%, transparent 71%);
}
.hero .phone { rotate: 3deg; }
@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero .phone { width: min(68vw, 16rem); rotate: 0deg; }
}

/* The day: a sun path with the example day's reminders on it. The capsule rides to "now" once. */
.day { margin-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
.day > p { text-align: center; }
.arc { position: relative; aspect-ratio: 1000 / 240; margin: 1.5rem 0 5.5rem; }
.arc svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.arc-track, .arc-fill { fill: none; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.arc-track { stroke: var(--rule); stroke-dasharray: 2 7; }
.arc-fill { stroke: var(--iris); stroke-dasharray: 0.5 1; }
.pill-moving g, .pill-still g { filter: drop-shadow(0 4px 6px rgba(240, 122, 163, 0.5)); }
.pill-still { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .arc-fill { animation: sun 1.9s cubic-bezier(0.3, 0.7, 0.2, 1) both; }
}
@media (prefers-reduced-motion: reduce) {
  .pill-moving { display: none; }
  .pill-still { display: inline; }
}
@keyframes sun { from { stroke-dashoffset: 0.44; } to { stroke-dashoffset: 0; } }
.dayline { list-style: none; margin: 0; padding: 0; }
.arc .dayline li {
  position: absolute; left: var(--x); top: var(--y); translate: -50% 0; width: 9.5rem;
  display: grid; justify-items: center; text-align: center; gap: 0.1rem; padding-top: 1.35rem;
}
.dayline li::before {
  content: ""; position: absolute; top: -0.6rem; left: 50%; translate: -50% 0;
  width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--rule);
}
.dayline li.done::before { border-color: var(--iris); background: var(--iris); }
.dayline li.now::before { border-color: var(--capsule); }
.dayline time { font-weight: 800; font-size: 1.125rem; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.dayline b { font-weight: 700; font-size: 0.9375rem; }
.dayline span { font-size: 0.875rem; color: var(--slate); line-height: 1.35; }
.dayline li.now time { color: var(--iris); }
@media (max-width: 760px) {
  .day > p { text-align: left; }
  .arc { aspect-ratio: auto; margin: 1.5rem 0 0; }
  .arc svg { display: none; }
  .arc .dayline { display: grid; gap: 1.25rem; position: relative; }
  .arc .dayline::before { content: ""; position: absolute; left: 0.55rem; top: 0.6rem; bottom: 0.6rem; width: 3px; border-radius: 3px; background: var(--rule); }
  .arc .dayline li {
    position: relative; left: auto; top: auto; translate: none; width: auto;
    justify-items: start; text-align: left; padding: 0 0 0 2.5rem; grid-template-columns: auto 1fr; column-gap: 0.75rem;
  }
  .dayline li::before { top: 0.2rem; left: 0; translate: none; }
  .dayline span { grid-column: 1 / -1; }
}

/* ---- Feature sections: text on one side, one phone on the other */
.feature { padding-block: var(--section); }
.feature:not(.band) + .feature:not(.band) { padding-top: 0; }
.feature .wrap { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2.5rem, 7vw, 6rem); }
.feature .phone { justify-self: center; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .feature .phone { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
}
@keyframes drift { from { translate: 0 4rem; rotate: -2deg; } to { translate: 0 0; rotate: 0deg; } }
.feature .text > * + * { margin-top: 1.25rem; }
.feature h2 { max-width: 14ch; }
@media (max-width: 760px) {
  .feature .wrap { grid-template-columns: 1fr; }
}

/* Lists inside sections: term in bold, explanation underneath. No cards. */
.points { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.25rem; max-width: 34rem; }
.points li { padding-left: 1.75rem; position: relative; }
.points li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--iris);
}
.points b { display: block; font-weight: 700; }
.points span { color: var(--slate); }

.steps { list-style: none; counter-reset: step; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.75rem; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 2.5rem 1fr; column-gap: 1rem; }
.steps li::before {
  content: counter(step); grid-row: span 2;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--mist); color: var(--iris); font-weight: 800;
}
.steps h3 { margin-bottom: 0.3rem; }
.steps p { color: var(--slate); }

/* Real schedules: a quiet two-column glossary under the reminders section */
.schedules { padding-bottom: var(--section); }
.schedules h3 { font-size: 1.375rem; }
.schedules dl { margin: 2rem 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; }
.schedules dt { font-weight: 700; }
.schedules dd { margin: 0.25rem 0 0; color: var(--slate); }
@media (max-width: 760px) { .schedules dl { grid-template-columns: 1fr; } }

/* ---- Privacy band */
.band { padding-block: var(--section); }
.feature.band { background: none; }
.privacy { background: linear-gradient(180deg, var(--paper), var(--mist)); }
.privacy h2 { max-width: 16ch; }
.privacy .points { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; gap: 1.75rem 3rem; margin-top: 2.5rem; }
.privacy .points li::before { background: var(--capsule); }
.privacy .note { margin-top: 2.5rem; max-width: 46rem; color: var(--slate); }
@media (max-width: 760px) { .privacy .points { grid-template-columns: 1fr; } }

/* ---- Pricing: Free next to Plus, Plus's three ways to pay as rows */
.pricing { padding-block: var(--section); background: linear-gradient(180deg, var(--mist), var(--dusk)); }
.pricing .head { max-width: 40rem; }
.plans { margin-top: 3rem; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.plan { border-radius: 1.75rem; padding: clamp(1.5rem, 4vw, 2.25rem); }
.plan.free { border: 2px solid var(--rule); }
.plan.plus { background: var(--ink); color: #fff; }
.plan.plus .points span, .plan.plus .fine { color: #C9C4EC; }
.plan.plus .points li::before { background: var(--capsule); }
.plan h3 { font-size: 1.5rem; }
.plan .price-free { margin-top: 0.25rem; color: var(--slate); }
.plan .points { margin-top: 1.5rem; gap: 0.9rem; }
.options { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.625rem; }
.options li {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 1rem;
  padding: 1rem 1.25rem; border-radius: 1rem; background: rgba(255, 255, 255, 0.08);
}
.options li.lead { background: var(--iris); }
.options b { font-weight: 700; }
.options .amount { font-weight: 800; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.options small { grid-column: 1 / -1; color: #ECE9FF; font-size: 0.875rem; }
.pricing .fine { margin-top: 2rem; max-width: 52rem; }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } }

/* ---- FAQ: native details, the answer slides open where the browser supports it */
.faq { padding-bottom: var(--section); background: var(--dusk); }
.faq .list { margin-top: 2.5rem; max-width: 48rem; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.25rem 0; font-weight: 700; font-size: 1.125rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  /* Turned 45°, the box reaches past its edge: the margin keeps the chevron inside the rule. */
  content: ""; flex: none; width: 0.75rem; height: 0.75rem; margin-inline-end: 0.2rem;
  border-right: 2.5px solid var(--iris); border-bottom: 2.5px solid var(--iris);
  rotate: 45deg; translate: 0 -0.2rem; transition: rotate 0.2s ease, translate 0.2s ease;
}
.faq details[open] summary::after { rotate: 225deg; translate: 0 0.15rem; }
.faq details p { padding: 0 0 1.5rem; color: var(--slate); max-width: 42rem; }
/* Wide screens: title on the left, questions on the right, like the sections above. */
@media (min-width: 900px) {
  .faq .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 4rem; align-items: start; }
  .faq .list { margin-top: 0; max-width: none; }
}
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: clip; transition: height 0.25s ease, content-visibility 0.25s allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .faq details::details-content { transition: none; }
  .faq summary::after { transition: none; }
}

/* ---- Closing: dusk turns to night */
.closing {
  padding-block: calc(var(--section) * 1.4) var(--section); text-align: center; color: #fff;
  background: linear-gradient(180deg, var(--dusk) 0%, #8E7FE6 22%, #3B2F86 55%, var(--night) 100%);
}
.closing h2 { color: #fff; }
.closing img { width: 96px; height: 96px; border-radius: 24px; margin: 0 auto 1.75rem; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 1.5rem 4rem -0.5rem rgba(240, 122, 163, 0.55); }
.closing .button { margin-top: 2rem; background: #fff; color: var(--ink); }
.closing .button:hover { background: var(--mist); color: var(--ink); }
.closing .fine { margin-top: 1rem; color: #C9C4EC; }

/* ---- Footer */
.foot { background: var(--night); padding-block: 2.5rem 3rem; font-size: 0.9375rem; color: #A9A3D1; }
.foot .wrap { display: grid; gap: 1rem; padding-top: 2rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.foot nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
.foot a, .foot .linkish { color: #fff; }
.foot .foot-langs a { color: #A9A3D1; }
.foot p { max-width: 46rem; }

/* ---- Cookie consent (EEA/UK/CH visitors only; assets/analytics.js shows it) */
.consent {
  position: fixed; z-index: 20; inset: auto 1rem 1rem; margin-inline: auto; max-width: 40rem;
  display: grid; gap: 0.875rem; padding: 1.125rem 1.25rem; border-radius: 1.25rem;
  background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 12px 40px rgba(31, 26, 61, 0.18);
  font-size: 0.9375rem; color: var(--slate);
}
.consent[hidden] { display: none; }
.consent div { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.consent .button { min-height: 2.75rem; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.button.quiet { background: var(--mist); color: var(--ink); }
.button.quiet:hover { background: var(--rule); color: var(--ink); }
.linkish {
  font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px;
}

/* Vietnamese stacks marks above and below the letters: give tight headlines a little more room. */
:lang(vi) h1 { line-height: 1.1; }
:lang(vi) h2 { line-height: 1.14; }