/* =============================================================================
   USMLE PULSE — How to Use (the official guide)

   Every rule is prefixed `htu-`, so nothing here can reach another page. The
   palette is the existing one: ink (#0c1a24) as the ground, coral (#ff5a4c) as
   the single accent, teal reserved for "this is the key step". No new colour
   language is introduced.
   ========================================================================== */

.htu-ic { width: 1.15em; height: 1.15em; flex: 0 0 auto; }

/* ---------------------------------------------------------------------------
   HERO — the one place on the page that uses the dark ground, so the rest of
   the guide reads as calm paper by comparison.
--------------------------------------------------------------------------- */
.htu-hero {
  background: var(--ink);
  color: var(--text-invert);
  padding: clamp(2.5rem, 1.5rem + 5vw, 5rem) 0 clamp(2.5rem, 1.5rem + 4vw, 4rem);
  position: relative; overflow: hidden;
}
.htu-hero-in {
  display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 900px) { .htu-hero-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }

.htu-eyebrow {
  margin: 0 0 .6rem; font-size: .78rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--pulse);
}
.htu-h1 {
  margin: 0 0 .7rem; color: #fff; line-height: 1.05; letter-spacing: -.02em;
  font-size: clamp(2.1rem, 1.4rem + 3.6vw, 3.9rem);
}
.htu-lead {
  margin: 0 0 1.6rem; max-width: 34rem; font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  line-height: 1.65; color: var(--text-invert-muted);
}
.htu-hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; }

.htu-cta, .htu-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 50px; padding: .8rem 1.5rem; border-radius: 12px;
  font: inherit; font-size: 1rem; font-weight: 800; cursor: pointer;
  text-decoration: none; border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s;
}
.htu-cta { background: var(--pulse); color: #fff; border-color: var(--pulse); }
.htu-cta:hover { background: var(--pulse-600); border-color: var(--pulse-600); }
.htu-cta svg { width: 1.05em; height: 1.05em; }
.htu-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.32); }
.htu-ghost:hover { border-color: #fff; }
.htu-sm { min-height: 42px; padding: .5rem 1rem; font-size: .92rem; }
.htu-link {
  background: none; border: 0; padding: .35rem 0; font: inherit; font-size: .92rem;
  font-weight: 700; color: var(--brand-text); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.htu-link:hover { color: var(--pulse); }

/* The schematic app drawing. Not a screenshot: it cannot go out of date. */
.htu-hero-art { display: none; }
@media (min-width: 900px) { .htu-hero-art { display: block; } }
.htu-mock {
  background: var(--ink-2); border: 1px solid var(--line-dark); border-radius: 16px;
  overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
.htu-mock-bar { display: flex; gap: .4rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line-dark); }
.htu-mock-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.18); }
.htu-mock-bar span:first-child { background: var(--pulse); }
.htu-mock-body { display: grid; grid-template-columns: 52px minmax(0,1fr); min-height: 230px; }
.htu-mock-side { border-right: 1px solid var(--line-dark); padding: .9rem .5rem; display: grid; gap: .55rem; align-content: start; }
.htu-mock-side i { display: block; height: 9px; border-radius: 4px; background: rgba(255,255,255,.13); }
.htu-mock-side i.on { background: var(--pulse); }
.htu-mock-main { padding: 1rem; display: grid; gap: .7rem; align-content: start; }
.htu-mock-card { height: 44px; border-radius: 10px; background: rgba(255,255,255,.07); border: 1px solid var(--line-dark); }
.htu-mock-wide { height: 58px; }
.htu-mock-row { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.htu-mock-pulse { color: var(--pulse); padding-top: .3rem; }
.htu-mock-pulse svg { width: 100%; height: 38px; }

/* ---------------------------------------------------------------------------
   SEARCH
--------------------------------------------------------------------------- */
.htu-searchwrap { padding: 1.5rem 0 .5rem; }
.htu-search {
  display: flex; align-items: center; gap: .6rem;
  max-width: 34rem; padding: .1rem .9rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper-2);
}
.htu-search:focus-within { border-color: var(--pulse); box-shadow: 0 0 0 3px var(--pulse-tint); }
.htu-search svg { width: 18px; height: 18px; color: var(--text-muted); flex: 0 0 auto; }
.htu-search input {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  font: inherit; font-size: 1rem; padding: .85rem 0; color: var(--text);
}
.htu-search input::-webkit-search-cancel-button { display: none; }
.htu-search-clear {
  border: 0; background: none; font-size: 1.4rem; line-height: 1; cursor: pointer;
  color: var(--text-muted); padding: 0 .2rem; min-height: 40px; min-width: 32px;
}
.htu-search-hint { margin: .55rem 0 0; font-size: .9rem; color: var(--text-muted); }

/* ---------------------------------------------------------------------------
   STICKY SECTION NAV — a horizontal strip on every size. On mobile it scrolls;
   a dropdown would hide the fact that there is more of the guide below.
--------------------------------------------------------------------------- */
/* Solid background, no backdrop-filter.

   `backdrop-filter` on a position:sticky element forces the browser to
   re-composite the area behind it on every frame of a scroll. On iOS Safari
   and some Android browsers that shows up as the bar juddering or appearing to
   spring back as you scroll — the page is moving correctly, but it does not
   look like it. A frosted bar is not worth that, so this is simply opaque. */
.htu-nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.htu-nav-in {
  display: flex; gap: .35rem; overflow-x: auto; padding: .55rem 0;
  scrollbar-width: none; -ms-overflow-style: none;
}
.htu-nav-in::-webkit-scrollbar { display: none; }
.htu-navlink {
  flex: 0 0 auto; padding: .5rem .85rem; border-radius: 999px;
  font-size: .88rem; font-weight: 700; color: var(--text-muted);
  text-decoration: none; white-space: nowrap; min-height: 44px;
  display: inline-flex; align-items: center;
}
.htu-navlink:hover { color: var(--text); background: var(--paper-2); }
.htu-navlink.is-on { background: var(--ink); color: #fff; }

/* ---------------------------------------------------------------------------
   SECTIONS
--------------------------------------------------------------------------- */
.htu-body { padding-bottom: 4rem; }
.htu-sec { padding: clamp(2rem, 1.4rem + 2.5vw, 3.5rem) 0; scroll-margin-top: 5rem; }
.htu-sec + .htu-sec { border-top: 1px solid var(--line); }
.htu-sec.is-target { animation: htuFlash 1.6s ease; }
@keyframes htuFlash { 0% { background: var(--pulse-tint); } 100% { background: transparent; } }

.htu-h2 {
  margin: 0 0 .3rem; font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem);
  letter-spacing: -.01em; line-height: 1.2;
}
.htu-h2:focus-visible { outline: 3px solid var(--pulse); outline-offset: 4px; border-radius: 6px; }
.htu-h3 { margin: 1.5rem 0 .5rem; font-size: 1rem; letter-spacing: .01em; }
.htu-sub { margin: 0 0 1.4rem; color: var(--text-muted); max-width: 46rem; line-height: 1.6; }

/* ---- start-here flow ---- */
.htu-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
@media (min-width: 760px) {
  .htu-flow { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: stretch; }
}
.htu-flow-item { display: flex; align-items: center; gap: .5rem; min-width: 0; }
@media (min-width: 760px) { .htu-flow-item { flex-direction: column; align-items: stretch; } }
.htu-flow-card {
  flex: 1; min-width: 0; text-align: left; cursor: pointer;
  display: grid; gap: .2rem; padding: .9rem 1rem;
  background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px;
  font: inherit; transition: border-color .15s, transform .15s;
}
.htu-flow-card:hover { border-color: var(--pulse); transform: translateY(-2px); }
.htu-flow-card:focus-visible { outline: 3px solid var(--pulse); outline-offset: 2px; }
.htu-flow-n {
  width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff;
  display: grid; place-items: center; font-size: .78rem; font-weight: 800;
}
.htu-flow-t { font-weight: 800; font-size: .98rem; line-height: 1.3; }
.htu-flow-d { font-size: .86rem; color: var(--text-muted); line-height: 1.45; }
.htu-flow-arrow { flex: 0 0 auto; width: 14px; height: 14px; position: relative; }
.htu-flow-arrow::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 7px; height: 7px; border-right: 2px solid var(--line);
  border-bottom: 2px solid var(--line); transform: rotate(-45deg);
}
@media (min-width: 760px) {
  .htu-flow-arrow { width: 100%; height: 14px; }
  .htu-flow-arrow::after { transform: rotate(45deg); }
}

/* ORPHANED by the guide rewrite — the sticky nav is the map; nothing emits .htu-map any more.
   Left in place so that deleting it is a deliberate change of its own. */
/* ---- website map ---- */
.htu-map-root { text-align: center; margin-bottom: 1.2rem; }
.htu-map-root span {
  display: inline-block; padding: .6rem 1.4rem; border-radius: 999px;
  background: var(--ink); color: #fff; font-weight: 800; letter-spacing: .01em;
}
.htu-map-cols { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.htu-map-col { background: var(--paper-2); border: 1px solid var(--line); border-radius: 16px; padding: 1rem; }
.htu-map-head {
  display: flex; align-items: center; gap: .5rem; font-weight: 800;
  padding-bottom: .6rem; margin-bottom: .5rem; border-bottom: 1px solid var(--line);
}
.htu-map-head .htu-ic { color: var(--pulse); }
.htu-map-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.htu-map-node {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .93rem; padding: .5rem .55rem; border-radius: 9px;
  color: var(--text); min-height: 44px;
}
.htu-map-node:hover { background: var(--pulse-tint); color: var(--text); }
.htu-map-node:focus-visible { outline: 3px solid var(--pulse); outline-offset: 1px; }

/* ---- feature blocks ---- */
.htu-feat-head { display: flex; align-items: flex-start; gap: .8rem; margin-bottom: 1rem; }
.htu-feat-ic {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; background: var(--ink); color: var(--pulse);
}
.htu-feat-ic .htu-ic { width: 22px; height: 22px; }
.htu-tag {
  display: inline-block; margin-top: .25rem; font-size: .72rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
}
.htu-feat.is-big .htu-feat-ic { background: var(--pulse); color: #fff; }

.htu-qa { display: grid; gap: 1rem; }
@media (min-width: 720px) { .htu-qa { grid-template-columns: 1fr 1fr; } }
.htu-qa p { margin: 0; line-height: 1.65; }
.htu-qa .htu-h3 { margin-top: 0; }

.htu-how { margin: 0; padding-left: 0; list-style: none; counter-reset: htu; display: grid; gap: .55rem; }
.htu-how li {
  counter-increment: htu; position: relative; padding-left: 2.2rem;
  line-height: 1.6; max-width: 52rem;
}
.htu-how li::before {
  content: counter(htu); position: absolute; left: 0; top: .05rem;
  width: 1.55rem; height: 1.55rem; border-radius: 50%;
  background: var(--pulse-tint); color: var(--pulse-600);
  display: grid; place-items: center; font-size: .78rem; font-weight: 800;
}

/* ---- the little schematics inside a feature ---- */
.htu-vis {
  margin: 1.2rem 0 0; padding: 1rem; border: 1px solid var(--line);
  border-radius: 14px; background: var(--paper-2);
  display: flex; flex-wrap: wrap; gap: .45rem; align-items: center;
}
.htu-vsep { color: var(--text-muted); font-weight: 700; }

/* ---- A screenshot of the part of the product a step is describing --------
   Framed like .htu-vis above, because it sits beside those and is the same
   kind of thing: a picture of what the words just said.

   Deliberately NOT dimmed or filtered in dark mode. The job of the picture is
   to show what the student's own screen looks like, and recolouring it shows
   them something that does not exist. */
/* NOTHING until the picture has actually loaded. These files are captured by
   hand and arrive one at a time, so for most of the guide's life some of them
   will not be there. An empty bordered box is a worse thing to show than no
   box, and with loading="lazy" the figure does not learn that its image is
   missing until the reader scrolls to it.

   So: no frame, no padding, no margin, and the figure collapses to roughly a
   pixel. It stays IN THE FLOW on purpose — display:none would stop the browser
   ever lazily fetching the image inside it, and then no screenshot would ever
   appear even after the files were added. */
.htu-shot {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.htu-shot.is-ready {
  margin: .9rem 0 1.4rem;
  padding: .5rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-2);
}
.htu-shot img {
  display: block;
  /* NEVER upscaled. A screenshot stretched past its natural size is a blurry
     misrepresentation of the thing it is meant to be showing. Narrow ones sit
     at their own size; wide ones scale down to fit. */
  width: auto;
  max-width: 100%;
  height: auto;
  /* Capped so a tall phone screenshot cannot push the rest of the step off a
     laptop screen. */
  max-height: 560px;
  object-fit: contain;
  border-radius: 9px;
  background: var(--paper);
}
@media (max-width: 767px) {
  .htu-shot.is-ready { padding: .35rem; margin: .8rem 0 1.1rem; }
  .htu-shot img { max-height: 70vh; }
}
.htu-vtab, .htu-vstep, .htu-vcheck, .htu-vchip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .75rem; border-radius: 8px; font-size: .87rem;
  background: var(--paper); border: 1px solid var(--line); color: var(--text);
}
.htu-vtab.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.htu-vstep i {
  width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: #fff;
  display: grid; place-items: center; font-size: .7rem; font-weight: 800; font-style: normal;
}
.htu-vis-check { flex-direction: column; align-items: stretch; }
.htu-vcheck i {
  width: 17px; height: 17px; border-radius: 4px; border: 1.5px solid var(--line);
  display: grid; place-items: center; font-size: .72rem; font-style: normal; flex: 0 0 auto;
}
.htu-vcheck.done { color: var(--text-muted); }
.htu-vcheck.done i { background: var(--brand); border-color: var(--brand); color: #fff; }
.htu-vchip.note { background: var(--pulse-tint); border-color: var(--pulse); color: var(--text); font-weight: 700; }
.htu-vchip.next { background: var(--ink); color: #fff; border-color: var(--ink); }
.htu-vis-timer { flex-direction: column; align-items: center; text-align: center; }
.htu-vclock { font-size: 2.4rem; font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.htu-vbtns { display: flex; gap: .4rem; }
.htu-vbtns span { padding: .35rem .8rem; border-radius: 8px; border: 1px solid var(--line); font-size: .85rem; }
.htu-vbtns span.on { background: var(--pulse); color: #fff; border-color: var(--pulse); }
.htu-vnote { margin: .5rem 0 0; font-size: .85rem; color: var(--text-muted); width: 100%; text-align: center; }
.htu-vis-prog { flex-direction: column; align-items: stretch; }
.htu-vbar { height: 10px; border-radius: 99px; background: var(--line); overflow: hidden; width: 100%; }
.htu-vbar i { display: block; height: 100%; background: var(--pulse); }
.htu-vis-garden { justify-content: center; }
.htu-vtree { font-size: 1.9rem; line-height: 1; }
.htu-vtree.dim { opacity: .35; }
.htu-vcoin { font-weight: 700; color: var(--text); }

.htu-extra { display: grid; gap: .7rem; }
@media (min-width: 720px) { .htu-extra { grid-template-columns: repeat(3, 1fr); } }
.htu-extra-c { padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2); }
.htu-extra-c h4 { margin: 0 0 .25rem; font-size: .95rem; }
.htu-extra-c p { margin: 0; font-size: .89rem; line-height: 1.55; color: var(--text-muted); }

.htu-tip {
  margin: 1.3rem 0 0; padding: .95rem 1.1rem;
  border-left: 3px solid var(--pulse); border-radius: 0 12px 12px 0;
  background: var(--pulse-tint);
}
.htu-tip-b {
  display: block; font-size: .72rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--pulse-600); margin-bottom: .25rem;
}
.htu-tip p { margin: 0; line-height: 1.6; color: var(--text); }

.htu-open {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: 1.2rem;
  font-weight: 800; color: var(--brand-text); text-decoration: none;
  min-height: 44px;
}
.htu-open:hover { color: var(--pulse); }
.htu-open svg { width: 1em; height: 1em; }

/* ORPHANED by the guide rewrite — "How everything connects" was the core loop a second time.
   Left in place so that deleting it is a deliberate change of its own. */
/* ---- how it connects ---- */
.htu-chain { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
@media (min-width: 860px) { .htu-chain { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
.htu-chain-item { display: flex; align-items: center; gap: .45rem; min-width: 0; }
@media (min-width: 860px) { .htu-chain-item { flex-direction: column; align-items: stretch; } }
.htu-chain-node {
  flex: 1; min-width: 0; text-align: left; cursor: pointer; font: inherit;
  display: grid; gap: .15rem; padding: .8rem .9rem;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2);
  transition: border-color .15s, background .15s;
}
.htu-chain-node:hover { border-color: var(--pulse); background: var(--pulse-tint); }
.htu-chain-node:focus-visible { outline: 3px solid var(--pulse); outline-offset: 2px; }
.htu-chain-t { font-weight: 800; font-size: .93rem; }
.htu-chain-d { font-size: .82rem; color: var(--text-muted); line-height: 1.45; }
.htu-chain-arrow { flex: 0 0 auto; width: 12px; height: 12px; position: relative; }
.htu-chain-arrow::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 6px; height: 6px;
  border-right: 2px solid var(--line); border-bottom: 2px solid var(--line); transform: rotate(-45deg);
}
@media (min-width: 860px) { .htu-chain-arrow { width: 100%; } .htu-chain-arrow::after { transform: rotate(45deg); } }

/* ORPHANED by the guide rewrite — "Your first day" was the core loop a third time.
   Left in place so that deleting it is a deliberate change of its own. */
/* ---- first day ---- */
.htu-day { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.htu-day-item {
  display: flex; gap: .9rem; padding: 1rem 1.1rem;
  border: 1px solid var(--line); border-radius: 14px; background: var(--paper-2);
}
.htu-day-n {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--pulse); color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: .88rem;
}
.htu-day-item h3 { margin: .15rem 0 .2rem; font-size: 1rem; }
.htu-day-item p { margin: 0 0 .2rem; color: var(--text-muted); line-height: 1.55; }

/* ===== The rewritten sections =============================================
   A section is now whatever shape it needs: a lead line, an optional callout,
   optional steps, optional prose, an optional plain list, an optional
   expandable. Most sections use two or three of these.
   ========================================================================= */

/* The opening line of a section. One size up from body, one down from a
   heading — it is the sentence that decides whether the rest gets read. */
.htu-lead-p {
  font-size: 1.06rem;
  line-height: 1.62;
  color: var(--text, inherit);
  margin: 0 0 var(--sp-4, 1rem);
  max-width: 62ch;
}

/* Used once, for the exam-date rule. It was a tip at the bottom of a card —
   the weakest position on the page for the highest-stakes advice on it. */
.htu-callout {
  border-left: 3px solid var(--pulse, #e2574c);
  background: color-mix(in srgb, var(--pulse, #e2574c) 7%, transparent);
  border-radius: 0 var(--r-md, 10px) var(--r-md, 10px) 0;
  padding: var(--sp-4, 1rem) var(--sp-5, 1.25rem);
  margin: var(--sp-4, 1rem) 0 var(--sp-5, 1.25rem);
  max-width: 62ch;
}
.htu-callout-t {
  display: block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pulse, #e2574c);
  margin-bottom: .35rem;
}
.htu-callout p { margin: 0; }

/* Four short entries that need no card each. */
.htu-plain {
  list-style: none;
  padding: 0;
  margin: var(--sp-4, 1rem) 0;
  max-width: 62ch;
  display: grid;
  gap: .7rem;
}
.htu-plain li {
  padding-left: 1rem;
  border-left: 2px solid var(--line);
  line-height: 1.6;
}

/* "What's in a Pulse Note" — genuinely secondary, and it sat in the middle of
   the one section students most need to read straight through. */
.htu-details {
  border: 1px solid var(--line);
  border-radius: var(--r-md, 10px);
  padding: 0 var(--sp-4, 1rem);
  margin: var(--sp-4, 1rem) 0;
  max-width: 62ch;
}
.htu-details > summary {
  cursor: pointer;
  padding: .85rem 0;
  font-weight: 700;
  list-style: none;
}
.htu-details > summary::-webkit-details-marker { display: none; }
.htu-details > summary::after {
  content: "+";
  float: right;
  font-weight: 400;
  color: var(--text-muted);
}
.htu-details[open] > summary::after { content: "\2212"; }
.htu-details > summary:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.htu-details .htu-extra { padding-bottom: var(--sp-4, 1rem); }

/* ---- faq ---- */
.htu-faq { display: grid; gap: .5rem; }
.htu-faq-i { border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2); }
.htu-faq-i summary {
  cursor: pointer; padding: .9rem 1.1rem; font-weight: 700; list-style: none;
  min-height: 48px; display: flex; align-items: center; gap: .5rem;
}
.htu-faq-i summary::-webkit-details-marker { display: none; }
.htu-faq-i summary::before { content: "+"; font-weight: 800; color: var(--pulse); font-size: 1.1rem; }
.htu-faq-i[open] summary::before { content: "\2212"; }
.htu-faq-i summary:focus-visible { outline: 3px solid var(--pulse); outline-offset: -2px; border-radius: 12px; }
.htu-faq-i p { margin: 0; padding: 0 1.1rem 1rem 2.3rem; color: var(--text-muted); line-height: 1.65; }

/* ---------------------------------------------------------------------------
   TOUR — a corner card, not a modal takeover. The page stays visible and
   scrolls behind it so each step's section is actually on screen.
--------------------------------------------------------------------------- */
.htu-tour { position: fixed; inset: auto 0 0 0; z-index: 90; padding: 1rem; pointer-events: none; }
@media (min-width: 760px) { .htu-tour { inset: auto 1.5rem 1.5rem auto; padding: 0; } }
.htu-tour-card {
  pointer-events: auto; position: relative;
  width: min(100%, 26rem); margin-inline: auto;
  background: var(--ink); color: var(--text-invert);
  border: 1px solid var(--line-dark); border-radius: 16px; padding: 1.2rem 1.3rem;
  box-shadow: 0 20px 50px rgba(0,0,0,.4);
}
.htu-tour-step { margin: 0 0 .2rem; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pulse); }
.htu-tour-title { margin: 0 0 .5rem; color: #fff; font-size: 1.15rem; }
.htu-tour-body p { margin: 0 0 .45rem; font-size: .92rem; line-height: 1.55; color: var(--text-invert-muted); }
.htu-tour-body b { color: #fff; }
.htu-tour-dots { display: flex; gap: .28rem; margin: .8rem 0; }
.htu-tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.25); }
.htu-tour-dots i.on { background: var(--pulse); width: 18px; border-radius: 99px; }
.htu-tour-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.htu-tour-actions .htu-link { color: var(--text-invert-muted); margin-left: auto; }
.htu-tour-actions .htu-link:hover { color: #fff; }
.htu-tour-actions .htu-ghost { color: #fff; }
.htu-tour-actions button:disabled { opacity: .4; cursor: not-allowed; }
.htu-tour-x {
  position: absolute; top: .5rem; right: .6rem; background: none; border: 0;
  color: var(--text-invert-muted); font-size: 1.5rem; line-height: 1; cursor: pointer;
  width: 36px; height: 36px; border-radius: 8px;
}
.htu-tour-x:hover { color: #fff; }

/* ---------------------------------------------------------------------------
   ACCESSIBILITY + MOTION
--------------------------------------------------------------------------- */
.htu-hero :focus-visible,
.htu-tour :focus-visible { outline: 3px solid var(--pulse); outline-offset: 2px; }
.htu-body :focus-visible { outline: 3px solid var(--pulse); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .htu-sec.is-target { animation: none; }
  .htu-flow-card, .htu-chain-node { transition: none; }
  .htu-flow-card:hover { transform: none; }
}

/* Dark theme: the guide sits on the app's own dark surfaces. */
[data-theme="dark"] .htu-nav { background: color-mix(in srgb, var(--paper) 92%, transparent); }
[data-theme="dark"] .htu-map-col,
[data-theme="dark"] .htu-flow-card,
[data-theme="dark"] .htu-chain-node,
[data-theme="dark"] .htu-day-item,
[data-theme="dark"] .htu-faq-i,
[data-theme="dark"] .htu-vis,
[data-theme="dark"] .htu-extra-c,
[data-theme="dark"] .htu-search { background: var(--ink-2); border-color: var(--line-dark); }