/* AskMed web page (design 3A). Colors from the iOS app: primary #1259B5, deep #0A3880, teal #149EA6, gold #FFC721.
   Fonts from the iOS app too (Loop's pick 2026-10-16): Georgia Bold titles, the system font (SF Pro on Apple) for text.
   Gelasio, a Georgia lookalike from Google Fonts, only downloads where Georgia is missing (Android). */
:root {
  --primary: #1259B5;
  --deep: #0A3880;
  --teal: #149EA6;
  --gold: #FFC721;
  --bg: #FBFCFE;
  --subtle: #F5F7FC;
  --highlight: #EDF4FF;
  --stroke: #E0E6EF;
  --text: #0D1221;
  --secondary: #616E82;
  --muted: #4A5468;
  --serif: Georgia, 'Gelasio', 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--primary); }
a:hover { color: var(--deep); }
h1, h2 { font-family: var(--serif); font-weight: 700; margin: 0; }
h2 { font-size: 30px; line-height: 1.08; letter-spacing: -1px; text-align: center; }

.wrap { width: 100%; max-width: 560px; margin: 0 auto; padding: 0 18px; }
.center { display: flex; flex-direction: column; align-items: center; gap: 16px; }

/* Header + hero share one light-blue block. */
.top { background: var(--highlight); }
.header { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); }
.brand:hover { color: var(--text); }
.brand-mark { width: 32px; height: 32px; border-radius: 8px; display: block; object-fit: cover; }
.brand-name { font-family: var(--serif); font-weight: 700; font-size: 19px; }
.brand-name span { color: var(--primary); }
.pill-btn { text-decoration: none; background: var(--primary); color: #FFFFFF; font-weight: 700; font-size: 15px; padding: 10px 16px; border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; }
.pill-btn:hover { color: #FFFFFF; background: var(--deep); }
/* Menu: section links on wide screens, Sign in + Get AskMed on the right. */
.header { gap: 12px; }
.nav { display: none; gap: 32px; }
.nav a { color: var(--muted); text-decoration: none; font-size: 16px; font-weight: 500; }
.nav a:hover { color: var(--text); }
.head-actions { display: flex; align-items: center; gap: 8px; }
.ghost-btn { text-decoration: none; background: #FFFFFF; color: var(--text); border: 1px solid var(--stroke); font-weight: 700; font-size: 15px; padding: 10px 16px; border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; }
.ghost-btn:hover { color: var(--primary); }
@media (max-width: 399px) { .ghost-btn { display: none; } }
@media (min-width: 760px) { .nav { display: flex; } }
/* Pages without Get AskMed keep an invisible copy of it, so the menu lines up with /web. */
.head-spacer { visibility: hidden; }
@media (max-width: 759px) { .head-spacer { display: none; } }

.hero { padding-top: 20px; padding-bottom: 30px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.badge { background: #FFFFFF; border: 1px solid var(--stroke); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 500; }
.hero h1 { font-size: 44px; line-height: 1.02; letter-spacing: -0.5px; }
.hero h1 span { color: var(--primary); }
.sub { margin: 0; font-size: 18px; color: var(--muted); max-width: 330px; }
.cta { text-decoration: none; background: var(--primary); color: #FFFFFF; font-weight: 700; font-size: 17px; padding: 16px 26px; border-radius: 999px; }
.cta:hover { color: #FFFFFF; background: var(--deep); }
.cta.light { background: #FFFFFF; color: var(--deep); padding: 15px 26px; }
.cta.light:hover { background: var(--highlight); color: var(--deep); }
.made-for { font-size: 15px; color: var(--primary); }
.made-for strong { color: var(--text); }
.rating { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.stars { display: inline-flex; gap: 1px; }
.stars svg { width: 14px; height: 14px; fill: var(--gold); }
.stars.small { color: var(--gold); font-size: 14px; letter-spacing: 1px; line-height: 1; }

/* Auto-scrolling rows (reviews, logos, specialties). Each track holds its items twice and moves by half. */
@keyframes askmedScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes askmedScrollBack { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.marquee { overflow: hidden; }
/* Spacing is a right margin on every item (not gap) so each copy has the same width and the loop is seamless.
   web.js adds more copies on wide screens and keeps the speed the same. */
.track { display: flex; width: max-content; }
.review-track { align-items: stretch; padding: 4px 0; animation: askmedScroll 40s linear infinite; }
.review-track > * { margin-right: 10px; }
.logo-track { align-items: center; padding: 8px 0; animation: askmedScrollBack 24s linear infinite; }
.logo-track > * { margin-right: 36px; }
.chip-track { animation: askmedScroll 30s linear infinite; }
.chip-track-back { animation: askmedScrollBack 30s linear infinite; }
.chip-track > *, .chip-track-back > * { margin-right: 8px; }
@media (prefers-reduced-motion: reduce) { .track { animation: none; } }

.reviews { padding: 30px 0; display: flex; flex-direction: column; gap: 14px; }
.reviews h2 { font-size: 28px; line-height: 1.1; letter-spacing: -0.8px; }
.review { margin: 0; flex: 0 0 250px; background: #FFFFFF; border: 1px solid var(--stroke); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.review blockquote { margin: 0; font-size: 15px; line-height: 1.45; }
.review figcaption { font-size: 12px; font-weight: 700; letter-spacing: 0.8px; color: var(--secondary); }

.schools { padding: 4px 0 34px; display: flex; flex-direction: column; gap: 14px; }
.schools p { margin: 0 auto; font-size: 14px; color: var(--muted); text-align: center; }
.logo { height: 32px; width: auto; display: block; }
.logo-md { height: 28px; }
.logo-sm { height: 26px; }

/* Demo */
.demo { background: var(--highlight); padding: 32px 0 36px; margin-bottom: 32px; }
.demo h2 { font-size: 32px; line-height: 1.05; }
.phone { width: 290px; border-radius: 40px; background: var(--deep); padding: 12px; }
.screen { border-radius: 30px; background: var(--bg); padding: 22px 14px 18px; display: flex; flex-direction: column; gap: 10px; min-height: 520px; }
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--primary); }
.q { font-family: var(--serif); font-size: 18px; font-weight: 700; line-height: 1.25; }
.sources { display: flex; gap: 6px; }
.source { flex: 1; border: 1px solid var(--stroke); border-radius: 10px; padding: 7px; background: var(--subtle); }
.source-type { font-size: 9px; font-weight: 700; color: var(--primary); }
.source-name { font-size: 10px; font-weight: 600; line-height: 1.25; }
.answer { margin: 0; font-size: 13px; line-height: 1.5; }
.cite { font-size: 9px; font-weight: 700; color: #FFFFFF; background: var(--primary); border-radius: 999px; padding: 1px 5px; }
.followups-label { margin-top: auto; font-size: 11px; font-weight: 700; color: #33405A; }
.followup { font-size: 12px; border: 1px solid var(--stroke); border-radius: 10px; padding: 8px; background: #FFFFFF; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 500; background: var(--highlight); border: 1px solid #D3E2F7; border-radius: 999px; padding: 6px 10px; }
.chip svg { width: 13px; height: 13px; fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* Comparison table */
.compare { padding-top: 8px; padding-bottom: 36px; display: flex; flex-direction: column; gap: 14px; }
.table { background: #FFFFFF; border: 1px solid var(--stroke); border-radius: 16px; overflow: hidden; font-size: 13px; }
.row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); padding: 12px 10px; border-top: 1px solid var(--stroke); align-items: center; }
.row span { text-align: center; color: var(--secondary); }
.row span[role="rowheader"] { text-align: left; font-weight: 700; color: var(--text); }
.row span.us { font-weight: 700; color: var(--text); background: var(--highlight); border-radius: 8px; padding: 4px 2px; }
.row.head { border-top: 0; background: var(--subtle); font-weight: 700; }
.row.head span { color: var(--text); }
.row.head span.us { color: var(--primary); background: none; padding: 0; }

/* Specialties */
.specialties { padding: 8px 0 36px; display: flex; flex-direction: column; gap: 12px; }
.specialties h2 { margin-bottom: 4px; }
.chip-track span { font-size: 15px; font-weight: 500; background: #FFFFFF; border: 1px solid var(--stroke); border-radius: 999px; padding: 9px 14px; white-space: nowrap; }
.chip-track-back span { font-size: 15px; font-weight: 500; background: var(--highlight); border-radius: 999px; padding: 9px 14px; white-space: nowrap; }

/* Pricing */
.price { background: var(--highlight); padding: 32px 0 36px; }
.price h2 { font-size: 32px; line-height: 1.05; }
.toggle { display: inline-flex; background: #D3E2F7; border-radius: 999px; padding: 4px; }
.toggle button { border: 0; background: transparent; font-family: inherit; font-size: 15px; font-weight: 500; padding: 9px 18px; border-radius: 999px; min-height: 40px; color: #33405A; cursor: pointer; }
.toggle button[aria-pressed="true"] { background: #FFFFFF; font-weight: 700; color: var(--text); }
.plan { width: 100%; background: #FFFFFF; border-radius: 20px; padding: 22px; box-shadow: 0 12px 30px rgba(13, 40, 90, 0.10); display: flex; flex-direction: column; gap: 10px; }
.plan-head { display: flex; justify-content: space-between; align-items: center; }
.plan-name { font-family: var(--serif); font-weight: 700; font-size: 20px; }
.popular { font-size: 12px; font-weight: 700; color: #FFFFFF; background: var(--primary); border-radius: 999px; padding: 4px 10px; }
.amount { align-self: flex-start; font-family: var(--serif); font-weight: 700; font-size: 52px; letter-spacing: -2px; line-height: 1.15; }
.per { font-size: 15px; color: var(--muted); }
.benefits { list-style: none; margin: 0; padding: 6px 0; display: flex; flex-direction: column; gap: 6px; }
.benefits li { display: flex; gap: 8px; font-size: 15px; }
.benefits li::before { content: ""; flex: 0 0 18px; height: 18px; margin-top: 2px; background: no-repeat center / 18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23149EA6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.buy { text-decoration: none; text-align: center; background: var(--primary); color: #FFFFFF; font-weight: 700; font-size: 18px; padding: 16px; border-radius: 999px; min-height: 54px; }
.buy:hover { background: var(--deep); color: #FFFFFF; }
.fine { font-size: 13px; color: var(--secondary); text-align: center; }
.secure { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--secondary); text-align: center; }

/* FAQ, closed by default; one open at a time (details name="faq"). */
.faq { padding-top: 32px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 12px; }
.faq h2 { font-size: 28px; text-align: left; }
.faq-list { background: #FFFFFF; border: 1px solid var(--stroke); border-radius: 16px; padding: 4px 16px; }
.faq details { border-bottom: 1px solid var(--stroke); }
.faq details:last-child { border-bottom: 0; }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 0; min-height: 52px; font-size: 16px; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: 0 0 16px; height: 16px; background: no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231259B5' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.faq details[open] summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231259B5' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.faq details p { margin: 0; padding: 0 0 15px; font-size: 15px; color: var(--muted); line-height: 1.5; }
.dots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.dots li { display: flex; gap: 8px; font-size: 15px; color: var(--muted); line-height: 1.45; }
.dots li::before { content: "•"; color: var(--secondary); }
.outline-btn { display: block; margin: 12px 0 15px; text-align: center; text-decoration: none; border: 1.5px solid var(--primary); color: var(--primary); font-weight: 700; font-size: 15px; padding: 12px; border-radius: 999px; min-height: 46px; }

/* Closing + footer */
.closing { background: var(--deep); color: #FFFFFF; padding: 40px 0; text-align: center; }
.closing h2 { font-size: 32px; }
.footer { background: var(--deep); border-top: 1px solid #23508F; color: #C9D6EA; font-size: 13px; padding: 22px 0 32px; }
.footer .wrap { display: flex; flex-direction: column; gap: 8px; }
.footer .links { display: flex; gap: 16px; }
.footer a { color: #FFFFFF; }

/* Tablet */
@media (min-width: 640px) {
  .wrap { max-width: 760px; padding: 0 28px; }
  .hero h1 { font-size: 56px; letter-spacing: -0.5px; }
  .sub { max-width: 480px; }
}

/* Desktop: wider page, bigger type, demo and pricing side by side. */
@media (min-width: 960px) {
  .wrap { max-width: 1160px; padding: 0 40px; }
  h2 { font-size: 44px; letter-spacing: -1.5px; }

  .header { padding-top: 20px; padding-bottom: 20px; }
  .brand-mark { width: 38px; height: 38px; border-radius: 10px; }
  .brand-name { font-size: 22px; }

  .hero { padding-top: 48px; padding-bottom: 72px; gap: 22px; }
  .hero h1 { font-size: 76px; letter-spacing: -0.5px; max-width: 980px; }
  .sub { font-size: 21px; max-width: 620px; }
  .cta { font-size: 18px; padding: 18px 32px; }
  .made-for { font-size: 17px; }
  .rating { font-size: 16px; }
  .stars svg { width: 17px; height: 17px; }
  .badge { font-size: 14px; padding: 7px 14px; }

  .reviews { padding: 64px 0 40px; gap: 28px; }
  .reviews h2 { font-size: 40px; }
  .review { flex-basis: 340px; padding: 22px; }
  .review blockquote { font-size: 17px; }
  .schools { padding: 8px 0 72px; gap: 22px; }
  .schools p { font-size: 16px; }
  .logo { height: 42px; }
  .logo-md { height: 36px; }
  .logo-sm { height: 34px; }
  .logo-track > * { margin-right: 64px; }

  .demo { padding: 80px 0; margin-bottom: 72px; }
  .demo .center {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    grid-template-areas: "title phone" "chips phone";
    align-items: center;
    column-gap: 80px;
    row-gap: 28px;
  }
  .demo h2 { grid-area: title; align-self: end; text-align: left; font-size: 60px; line-height: 1.02; }
  .demo .phone { grid-area: phone; width: 330px; }
  .demo .chips { grid-area: chips; align-self: start; justify-content: flex-start; }
  .chip { font-size: 15px; padding: 8px 14px; }
  .chip svg { width: 15px; height: 15px; }
  .screen { min-height: 540px; }

  .compare { max-width: 900px; padding-bottom: 80px; gap: 28px; }
  .table { font-size: 16px; }
  .row { padding: 18px 22px; }

  .specialties { padding: 0 0 80px; gap: 16px; }
  .specialties h2 { margin-bottom: 12px; }
  .chip-track span, .chip-track-back span { font-size: 17px; padding: 11px 18px; }
  .chip-track > *, .chip-track-back > * { margin-right: 12px; }

  .price { padding: 80px 0; }
  .price .center {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 460px;
    grid-template-areas: "title plan" "toggle plan" "secure plan";
    align-items: center;
    column-gap: 80px;
    row-gap: 24px;
  }
  .price h2 { grid-area: title; align-self: end; text-align: left; font-size: 60px; line-height: 1.02; }
  .price .toggle { grid-area: toggle; justify-self: start; }
  .price .secure { grid-area: secure; align-self: start; text-align: left; }
  .price .plan { grid-area: plan; padding: 30px; }

  .faq { max-width: 860px; padding-top: 80px; padding-bottom: 80px; gap: 24px; }
  .faq h2 { font-size: 44px; text-align: center; }
  .faq summary { font-size: 18px; min-height: 64px; }
  .faq details p, .dots li { font-size: 16px; }
  .outline-btn { max-width: 320px; }

  .closing { padding: 96px 0; }
  .closing .center { gap: 28px; }
  .closing h2 { font-size: 56px; max-width: 920px; }
  .footer { padding: 28px 0 40px; font-size: 14px; }
  .footer .wrap { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
}