/* NURSEAL — the shipped public front page, direction A (2026-10-11).
   Links study/study.css for the real tokens, .btn and .mark, so the brand
   here IS the shipped brand; only the rules below are new.
   Point of view: a calm, warm study room that turns HER OWN notes into
   practice — trustworthy before it is clever. */

.fp { max-width:1080px; margin:0 auto; padding:20px 20px 0; }
.fp-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:28px; }
.fp-top .btn { min-height:44px; padding:10px 18px; }
.fp-sub { color:var(--ink-2); font-size:17px; line-height:1.6; max-width:46ch; margin:0; }
.fp-h1 { font-family:var(--serif); font-weight:700; color:var(--ink); letter-spacing:-.5px; line-height:1.08; margin:0 0 14px; font-size:clamp(34px, 6vw, 56px); }
.fp-h1 em { color:var(--plum-ink); }
.fp-h2 { font-family:var(--serif); font-weight:700; color:var(--ink); font-size:clamp(24px, 3.4vw, 32px); line-height:1.15; margin:0 0 8px; }
.fp-eyebrow { font-size:12px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; color:var(--plum-ink); margin:0 0 10px; }
.fp-cta { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:22px; }
.fp-cta .btn-primary { font-size:16px; padding:15px 26px; min-height:52px; }
.fp-fine { font-size:13.5px; color:var(--muted); margin:10px 0 0; }
.fp-fine b { color:var(--ink-2); }
.fp-sec { margin:64px 0 0; }

/* the free badge */
.fp-free { display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:var(--r-pill);
  background:var(--ok-soft); color:var(--ok); font-weight:700; font-size:14px; margin-bottom:18px; }
.fp-free::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--ok); }

/* the real question card (sample-test.json item 1, verbatim) */
.fp-q { background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-card); box-shadow:var(--shadow-lift); padding:22px; }
.fp-q-meta { display:flex; justify-content:space-between; gap:8px; font-size:12.5px; color:var(--muted); margin-bottom:10px; }
.fp-q-stem { font-size:16px; color:var(--ink); line-height:1.55; margin:0 0 14px; font-weight:500; }
.fp-opts { display:grid; gap:8px; margin:0; padding:0; list-style:none; }
li.fp-opt { display:flex; gap:10px; align-items:flex-start; width:100%; text-align:left; font:inherit; font-size:14.5px; line-height:1.45;
  color:var(--ink-2); background:var(--field); border:1.5px solid var(--line-2); border-radius:var(--r-ctl); padding:11px 13px; cursor:default; min-height:44px; }
.fp-opt .k { flex:none; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line-2); display:grid; place-items:center; font-size:12px; font-weight:700; color:var(--muted); }
.fp-opt.is-right { border-color:var(--mint-ink); background:var(--ok-soft); color:var(--ink); }
.fp-opt.is-right .k { background:var(--mint-ink); border-color:var(--mint-ink); color:var(--on-primary); }
.fp-why { margin-top:14px; padding:14px 15px; border-radius:var(--r-ctl); background:var(--card-warm); border:1px solid var(--line-warm); font-size:14px; color:var(--ink-2); line-height:1.55; }
.fp-why b { color:var(--ink); }
.fp-src { margin-top:12px; font-size:12.5px; color:var(--muted); }

/* steps */
.fp-steps { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin-top:22px; }
.fp-step { background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:20px; }
.fp-step .n { font-family:var(--serif); font-weight:700; font-size:28px; color:var(--lavender); line-height:1; }
.fp-step h3 { font-family:var(--serif); font-size:19px; margin:10px 0 6px; color:var(--ink); }
.fp-step p { margin:0; font-size:14.5px; color:var(--ink-2); }

/* pricing */
.fp-prices { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin-top:22px; align-items:stretch; }
.fp-tier { background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:22px; display:flex; flex-direction:column; gap:6px; }
.fp-tier.is-free { background:var(--card-warm); border-color:var(--line-warm); }
.fp-tier.is-best { border:2px solid var(--plum); box-shadow:var(--shadow-lift); }
.fp-tier .name { font-weight:700; color:var(--ink); font-size:16px; }
.fp-tier .price { font-family:var(--serif); font-weight:700; font-size:40px; color:var(--ink); line-height:1.05; }
.fp-tier .price small { font-family:var(--sans); font-size:14px; font-weight:600; color:var(--muted); }
.fp-tier .what { font-size:14.5px; color:var(--ink-2); margin:0; }
.fp-tier .btn { margin-top:auto; }
.fp-tier ul { margin:8px 0 14px; padding-left:18px; font-size:14px; color:var(--ink-2); }
.fp-tier .tag { align-self:flex-start; font-size:12px; font-weight:700; color:var(--plum-ink); background:var(--badge-soft); padding:3px 10px; border-radius:var(--r-pill); }
.fp-unit { text-align:center; margin:18px auto 0; font-size:14.5px; color:var(--ink-2); max-width:62ch; }

/* faq */
.fp-faq { margin-top:18px; display:grid; gap:10px; max-width:760px; }
.fp-faq details { background:var(--card); border:1px solid var(--line); border-radius:var(--r-ctl); padding:0 16px; }
.fp-faq summary { cursor:pointer; padding:15px 0; font-weight:600; color:var(--ink); min-height:44px; }
.fp-faq details p { margin:0 0 15px; color:var(--ink-2); font-size:14.5px; }

/* footer */
.fp-foot { margin:72px 0 0; padding:26px 0 40px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted); line-height:1.6; }
.fp-foot a { color:var(--ink-2); }
.fp-unit a { color:var(--plum-ink); }
.fp-foot p { margin:0 0 8px; max-width:80ch; }

/* sticky phone CTA (direction C) */
.fp-sticky { display:none; }

@media (max-width:760px) {
  .fp-steps, .fp-prices { grid-template-columns:1fr; }
  .fp-sec { margin-top:48px; }
}

/* direction A: the ruled hero, moved out of the markup */
.a-hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:44px; align-items:center; }
@media (max-width:860px){ .a-hero { grid-template-columns:1fr; gap:28px; } }

/* Static sample options keep the mockup geometry; the answer names itself. */
.fp-opt > span:nth-child(2) { flex:1; min-width:0; }
.fp-ok { flex:none; color:var(--ok); background:var(--ok-soft); border-radius:var(--r-pill); padding:2px 6px; font-size:12px; font-weight:700; }

/* Keep Sign in and both 44px controls together when the header needs a row. */
@media (max-width:540px) {
  .fp-top { flex-wrap:wrap; }
  .fp-top .topbar-end { margin-left:auto; flex-wrap:nowrap; }
}