/* Option 1 – Mint. The current site's layout, re-skinned to the App Store screenshots:
   mint wash with a faint pill pattern, dark green-black headlines in a geometric face
   (Avenir Next, built into Apple devices: no web font requests), Moss accents, white cards. */
:root {
  --moss: #116a37;
  --moss-deep: #0d572c;
  --ink: #0f1f15;
  --secondary: #4a5a50;
  --tertiary: #7d8a82;
  --mint: #eef6f0;
  --mint-2: #f6f9f6;
  --mint-line: #dbe9df;
  --card: #ffffff;
  --fill: #116a37;                 /* solid fills (buttons, checks), white on top */
  --ring: #dde5e0;                 /* empty check ring, off week pills */
  --art: linear-gradient(160deg, #eef6f0, #e5f0e8);
  --page: linear-gradient(165deg, #eef6f0 0%, #f6f9f6 45%, #f1f7f2 100%);
  --glass: rgba(255, 255, 255, 0.66);
  --glass-edge: rgba(255, 255, 255, 0.95);
  --lift: rgba(17, 106, 55, 0.12);
  --separator: rgba(15, 31, 21, 0.1);
  --shadow: 0 1px 2px rgba(15, 31, 21, 0.04), 0 12px 32px rgba(17, 106, 55, 0.07);
  --radius: 20px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", Arial, sans-serif;
  --display: "Avenir Next", "Avenir", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color-scheme: light dark;
}
@supports (color: color(display-p3 0 0 0)) {
  :root { --moss: color(display-p3 0.0667 0.4157 0.2157); --fill: color(display-p3 0.0667 0.4157 0.2157); }
}
/* Dark: the dark app icon's black (#0B0B0D) and pill green (#1F8748) for fills; #48A75A for green text
   (as on the current site), iOS dark grouped cards. */
@media (prefers-color-scheme: dark) {
  :root {
    --moss: #48a75a; --moss-deep: #0d572c; --fill: #1f8748;
    --ink: #ffffff; --secondary: rgba(235, 235, 245, 0.68); --tertiary: rgba(235, 235, 245, 0.45);
    --mint: #16241b; --mint-2: #0b0b0d; --mint-line: #24382b;
    --card: #1c1c1e; --ring: #3a3a3c; --separator: rgba(84, 84, 88, 0.6);
    --shadow: none; --art: linear-gradient(160deg, #13231a, #0e1912);
    --page: linear-gradient(165deg, #0f1a13 0%, #0b0b0d 45%, #0c130e 100%);
    --glass: rgba(44, 44, 46, 0.62); --glass-edge: rgba(255, 255, 255, 0.12); --lift: rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23116a37' stroke-opacity='.05' stroke-width='3'%3E%3Cg transform='rotate(-45 45 45)'%3E%3Crect x='17' y='33' width='56' height='24' rx='12'/%3E%3Cpath d='M45 33v24'/%3E%3C/g%3E%3Cg transform='rotate(-45 135 135)'%3E%3Crect x='107' y='123' width='56' height='24' rx='12'/%3E%3Cpath d='M135 123v24'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") top left / 180px repeat, var(--page) fixed;
  background-color: var(--mint-2);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--moss); text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible, .button:focus-visible { outline: 3px solid var(--moss); outline-offset: 3px; border-radius: 12px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 10; background: var(--card); padding: 8px 14px; border-radius: 999px; }

.nav {
  position: sticky; top: 12px; z-index: 5; width: fit-content; max-width: calc(100% - 24px);
  margin: 12px auto 0; display: flex; align-items: center; gap: 4px; padding: 5px;
  background: var(--glass); border: 0.5px solid var(--glass-edge); border-radius: 999px;
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 6px 24px var(--lift);
}
.nav a { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; color: var(--ink);
  font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.nav a.home { padding-left: 7px; }
.nav a.home img { width: 26px; height: 26px; border-radius: 7px; }
.nav a[aria-current="page"] { background: var(--fill); color: #fff; }

main { max-width: 1060px; margin: 0 auto; padding: 40px 20px 72px; }
.narrow { max-width: 740px; }
h1, h2, h3 { margin: 0; line-height: 1.08; text-wrap: balance; font-family: var(--display); color: var(--ink); }
h1 { font-size: clamp(44px, 7vw, 76px); font-weight: 700; letter-spacing: -0.025em; }
h2 { font-size: clamp(32px, 4.4vw, 46px); font-weight: 700; letter-spacing: -0.02em; }
h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
.lede { font-family: var(--display); font-size: clamp(20px, 2.6vw, 26px); font-weight: 500; color: var(--secondary); line-height: 1.3; text-wrap: pretty; }
.sub { font-family: var(--display); font-size: 20px; font-weight: 500; color: var(--secondary); line-height: 1.3; }
.tagline { font-family: var(--display); font-weight: 600; color: var(--moss); font-size: 18px; }
.eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--moss); letter-spacing: 0.02em; text-transform: uppercase; }
.eyebrow .i { width: 18px; height: 18px; }
.muted { color: var(--secondary); }
.small { font-size: 15px; }

.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }
.button { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px;
  background: var(--fill); color: #fff; font-weight: 650; font-size: 17px; text-decoration: none;
  box-shadow: 0 8px 22px rgba(17, 106, 55, 0.28); }
.button svg { width: 20px; height: 20px; }
.button.light { background: #fff; color: #116a37; box-shadow: none; }

.phone { border-radius: 13.6% / 6.3%; border: 7px solid #15201a; overflow: hidden; background: #15201a; box-shadow: 0 24px 60px rgba(15, 31, 21, 0.2); }
.phone img { width: 100%; }
.duo-open { border-radius: 4.6% / 6.6%; }
.duo-outer { border-radius: 11% / 7.6%; }
.paper { border-radius: 8px; overflow: hidden; box-shadow: 0 20px 50px rgba(15, 31, 21, 0.16); background: #fff; }

.hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; padding-top: 28px; }
.hero-copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.hero-copy .button { margin-top: 10px; }
.app-icon { width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 12px 30px rgba(17, 106, 55, 0.22); }
.hero-phones { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.hero-phones .phone:nth-child(2) { margin-top: 64px; transform: rotate(4deg); }
.requirements { font-size: 15px; color: var(--tertiary); }

.features { display: flex; flex-direction: column; gap: 24px; margin-top: 96px; }
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; padding: 48px; }
.feature.flip .feature-copy { order: 2; }
.feature-copy { display: flex; flex-direction: column; gap: 14px; }
.feature ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.feature li { display: flex; gap: 10px; align-items: flex-start; }
.feature li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 3px; border-radius: 50%;
  background: var(--fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.8 3.8L17.5 9' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.feature-art { display: flex; justify-content: center; align-items: center; gap: 18px; padding: 18px; border-radius: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23116a37' stroke-opacity='.07' stroke-width='3'%3E%3Cg transform='rotate(-45 45 45)'%3E%3Crect x='17' y='33' width='56' height='24' rx='12'/%3E%3Cpath d='M45 33v24'/%3E%3C/g%3E%3Cg transform='rotate(-45 135 135)'%3E%3Crect x='107' y='123' width='56' height='24' rx='12'/%3E%3Cpath d='M135 123v24'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / 150px, var(--art); }
.feature-art .phone { width: min(250px, 46%); }
.feature-art.single .phone { width: min(270px, 70%); }
.feature-art.wide .phone { width: 100%; }
.feature-art .paper { width: min(330px, 80%); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pair .card { display: flex; flex-direction: column; gap: 12px; padding: 32px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--mint); color: var(--moss); font-size: 14px; font-weight: 650; }
.chip .i { width: 16px; height: 16px; }

.closing { margin-top: 96px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px;
  padding: 64px 24px; border-radius: 28px; color: #fff;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='white' stroke-opacity='.09' stroke-width='3'%3E%3Cg transform='rotate(-45 45 45)'%3E%3Crect x='17' y='33' width='56' height='24' rx='12'/%3E%3Cpath d='M45 33v24'/%3E%3C/g%3E%3Cg transform='rotate(-45 135 135)'%3E%3Crect x='107' y='123' width='56' height='24' rx='12'/%3E%3Cpath d='M135 123v24'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / 180px, linear-gradient(160deg, #4f8a60 0%, #116a37 55%, #0d572c 100%); }
.closing h2 { color: #fff; }
.closing .sub { color: rgba(255, 255, 255, 0.86); }
.closing .small, .closing .small a { color: rgba(255, 255, 255, 0.86); }

/* Ring check (the H2 header motif) */
.ring-check { position: relative; display: grid; place-items: center; width: 150px; height: 150px; }
.ring-check .r { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.28); }
.ring-check .r1 { inset: 22px; } .ring-check .r2 { inset: 10px; border-color: rgba(255,255,255,.18); } .ring-check .r3 { inset: 0; border-color: rgba(255,255,255,.1); }
.ring-check .dot { width: 86px; height: 86px; border-radius: 50%; background: #fff; color: var(--moss-deep); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.ring-check .dot svg { width: 42px; height: 42px; }

/* Support and privacy */
.page-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 30px; }
.page-head h1 { font-size: clamp(40px, 6vw, 60px); }
.stack { display: flex; flex-direction: column; gap: 18px; }
.summary { display: flex; flex-direction: column; gap: 14px; border: 1.5px solid var(--mint-line); }
.contact { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: start; }
.contact .badge { grid-row: span 3; }
.badge { width: 44px; height: 44px; border-radius: 12px; background: var(--fill); color: #fff; display: grid; place-items: center; }
.badge .i { width: 24px; height: 24px; }
.group-title { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--ink); margin: 26px 4px 2px; }
.group-title .i { color: var(--moss); }
.list { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
details { border-top: 0.5px solid var(--separator); }
details:first-child { border-top: none; }
summary { list-style: none; cursor: pointer; padding: 17px 52px 17px 20px; font-weight: 600; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border-right: 2.5px solid var(--moss); border-bottom: 2.5px solid var(--moss); transform: rotate(45deg); transition: transform 0.2s ease; }
details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
details[open] summary { color: var(--moss); }
.answer { padding: 0 20px 18px; display: flex; flex-direction: column; gap: 10px; }
.answer ol, .answer ul, .policy ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.policy section.card { display: flex; flex-direction: column; gap: 10px; }
.policy section.card h2 { display: flex; align-items: center; gap: 12px; font-size: 24px; }
.policy section.card h2 .badge { width: 36px; height: 36px; border-radius: 10px; flex: none; }
.policy section.card h2 .badge .i { width: 20px; height: 20px; }

footer { max-width: 1060px; margin: 0 auto; padding: 28px 20px 48px; border-top: 0.5px solid var(--separator); display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--tertiary); font-size: 15px; }
footer a { color: var(--secondary); }
footer .spacer { flex: 1; }

@media (max-width: 820px) {
  .hero, .feature, .pair { grid-template-columns: 1fr; }
  .hero { gap: 36px; }
  .feature { padding: 28px 20px; gap: 26px; }
  .feature.flip .feature-copy { order: 0; }
  .features { margin-top: 60px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Try-it widget: the medium Daily Dose widget (Minimal), tappable like the real one. */
.try { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 44px; align-items: center; padding: 48px; }
.try-copy { display: flex; flex-direction: column; gap: 14px; }
.try-art { padding: 48px 24px; }
.widget { position: relative; width: min(440px, 100%); background: var(--card); border-radius: 34px; padding: 22px 24px 22px 18px;
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center;
  box-shadow: 0 24px 60px rgba(17, 106, 55, 0.18), 0 1px 3px rgba(15, 31, 21, 0.06); }
.widget .count { position: absolute; top: 18px; right: 22px; font-size: 14px; font-weight: 650; color: var(--tertiary); }
.widget .name { font-size: 26px; font-weight: 750; letter-spacing: -0.015em; line-height: 1.15; color: var(--ink); }
.widget .dose { font-size: 16px; color: var(--secondary); }
.widget .alert { display: flex; align-items: center; gap: 5px; font-size: 14px; color: var(--secondary); margin-top: 2px; }
.widget .alert .i { width: 15px; height: 15px; }
/* Check circle: same motion as the widget (WidgetFaces.swift CheckCircle). The fill pops in on
   .spring(duration: 0.25, bounce: 0.5), sampled into linear(), and shrinks out with a 0.18 s ease-in,
   staying solid until a hard cut at the end. The check scales 0.5 to 1 on the same spring and goes first when cleared. */
.check-btn { --size: 104px; position: relative; width: var(--size); height: var(--size); border: 0; padding: 0; border-radius: 50%;
  background: var(--card); box-shadow: inset 0 0 0 4.5px var(--ring); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.check-btn .fill { position: absolute; inset: 0; border-radius: 50%; background: var(--fill); transform: scale(0.001); opacity: 0;
  transition: transform 0.18s ease-in, opacity 0.01s linear 0.17s; }
.check-btn .tick { position: absolute; left: 27%; top: 27%; width: 46%; height: 46%; color: #fff; transform: scale(0.5); opacity: 0;
  transition: transform 0.07s ease-out, opacity 0.07s ease-out; }
.check-btn[aria-pressed="true"] .fill { transform: scale(1); opacity: 1;
  transition: transform 0.5s cubic-bezier(.34, 1.56, .64, 1), opacity 0s; transition-timing-function: linear(0.000, 0.044, 0.157, 0.310, 0.480, 0.647, 0.799, 0.927, 1.027, 1.097, 1.141, 1.160, 1.161, 1.149, 1.127, 1.100, 1.072, 1.046, 1.023, 1.004, 0.990, 0.980, 0.975, 0.973, 0.974, 0.977, 0.981, 0.986, 0.990, 0.994, 0.998, 1.001, 1.002, 1.004, 1.004, 1.004, 1.004, 1.003, 1.003, 1.002, 1), linear; }
.check-btn[aria-pressed="true"] .tick { transform: scale(1); opacity: 1;
  transition: transform 0.5s cubic-bezier(.34, 1.56, .64, 1), opacity 0.1s ease-out; transition-timing-function: linear(0.000, 0.044, 0.157, 0.310, 0.480, 0.647, 0.799, 0.927, 1.027, 1.097, 1.141, 1.160, 1.161, 1.149, 1.127, 1.100, 1.072, 1.046, 1.023, 1.004, 0.990, 0.980, 0.975, 0.973, 0.974, 0.977, 0.981, 0.986, 0.990, 0.994, 0.998, 1.001, 1.002, 1.004, 1.004, 1.004, 1.004, 1.003, 1.003, 1.002, 1), ease-out; }
.week { display: flex; gap: 12px; margin-top: 12px; }
.wd { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wd b { font-size: 11px; font-weight: 600; color: var(--tertiary); }
.wd.today b { color: var(--ink); font-weight: 800; }
.wp { display: block; width: 8px; height: 18px; border-radius: 5px; transform: rotate(45deg); background: linear-gradient(var(--fill) 50%, #2f8a52 50%); transition: background .2s; }
.wp.off { background: var(--ring); }
.hint { font-size: 14px; color: var(--tertiary); }
@media (max-width: 820px) {
  .try { grid-template-columns: 1fr; padding: 28px 20px; gap: 26px; }
  .try-art { padding: 32px 12px; }
}
@media (max-width: 480px) {
  /* Small-widget layout: check top-left, count top-right, details below. */
  .try-art { padding: 28px 10px; }
  .widget { grid-template-columns: 1fr; gap: 10px; width: min(300px, 100%); padding: 18px 20px 20px; border-radius: 30px; }
  .widget .count { top: 20px; right: 20px; }
  .check-btn { --size: 80px; justify-self: start; }
  .widget .name { font-size: 22px; }
  .week { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .wp { transition: none !important; }
  .check-btn .fill, .check-btn .tick, .check-btn[aria-pressed="true"] .fill, .check-btn[aria-pressed="true"] .tick { transform: none; transition: opacity 0.15s ease-in-out !important; }
}
@media (prefers-color-scheme: dark) {
  body { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='white' stroke-opacity='.035' stroke-width='3'%3E%3Cg transform='rotate(-45 45 45)'%3E%3Crect x='17' y='33' width='56' height='24' rx='12'/%3E%3Cpath d='M45 33v24'/%3E%3C/g%3E%3Cg transform='rotate(-45 135 135)'%3E%3Crect x='107' y='123' width='56' height='24' rx='12'/%3E%3Cpath d='M135 123v24'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") top left / 180px repeat, var(--page) fixed; background-color: #0b0b0d; }
  .feature-art { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='white' stroke-opacity='.035' stroke-width='3'%3E%3Cg transform='rotate(-45 45 45)'%3E%3Crect x='17' y='33' width='56' height='24' rx='12'/%3E%3Cpath d='M45 33v24'/%3E%3C/g%3E%3Cg transform='rotate(-45 135 135)'%3E%3Crect x='107' y='123' width='56' height='24' rx='12'/%3E%3Cpath d='M135 123v24'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / 150px, var(--art); }
  .chip { background: #16241b; }
  .closing { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='white' stroke-opacity='.09' stroke-width='3'%3E%3Cg transform='rotate(-45 45 45)'%3E%3Crect x='17' y='33' width='56' height='24' rx='12'/%3E%3Cpath d='M45 33v24'/%3E%3C/g%3E%3Cg transform='rotate(-45 135 135)'%3E%3Crect x='107' y='123' width='56' height='24' rx='12'/%3E%3Cpath d='M135 123v24'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / 180px, linear-gradient(160deg, #2c6a3f 0%, #1a6f3c 50%, #0d4d27 100%); }
}