/* Hypercurio — the logged-out landing page, HC-102 to HC-107.
 *
 * Only what this page needs. Anything reusable across screens lives in hc.css; a step card and a
 * category tile belong to the landing page and would be clutter in the system file.
 *
 * Everything sizes off the tokens, so the three layouts come from hc.css's media queries rather
 * than from a second set of breakpoints that could drift away from them.
 */

/* ---------------------------------------------------------------- section order
   The try-it card is in ONE place in the document and moves visually. Portrait shows it directly
   under the hero; landscape and desktop show it near the end beside the plans teaser.
   `order` only reorders siblings, so the sections are direct flex children of main.
   It sits LATE in the document, which is the landscape and desktop order, and is pulled up on
   portrait. That way the reading and tab order match what is on screen for a keyboard user, who
   is overwhelmingly on the wider layouts; a portrait screen reader hears a self-contained card
   with its own heading slightly later than it appears, which is the lesser of the two mismatches. */
.lp-main { display: flex; flex-direction: column; }
/* Portrait: hero first, then the try-it card, then everything else in document order, which
   leaves the plans teaser last. Negative orders on just these two say that in two lines and
   survive a new section being added anywhere; numbering every section would not. */
.lp-hero-section { order: -2; }
.lp-tryit-section { order: -1; }

/* From landscape up the two cards sit side by side at the end, so main becomes the two-column
   grid instead and document order applies. Main takes the rail's width here, because the pair has
   to line up with the sections above it rather than with the edge of the window. */
@media (min-width: 600px), (max-height: 499px) and (orientation: landscape) {
  .lp-main {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start;
    width: 100%; max-width: var(--hc-max); margin-inline: auto;
  }
  .lp-main > * { grid-column: 1 / -1; }
  .lp-hero-section, .lp-tryit-section { order: 0; }
  .lp-tryit-section { grid-column: 1; }
  .lp-teaser-section { grid-column: 2; }
}

/* ---------------------------------------------------------------- HC-102: hero */
.lp-hero { display: grid; gap: var(--hc-6); align-items: center; }
.lp-hero-copy { display: flex; flex-direction: column; gap: var(--hc-4); min-width: 0; }
.lp-hero p { max-width: 62ch; }
.lp-hero-actions { display: flex; flex-direction: column; gap: var(--hc-3); margin-top: var(--hc-2); }
/* Portrait stacks the buttons full width; from landscape up they sit side by side. */
@media (min-width: 600px), (max-height: 499px) and (orientation: landscape) {
  .lp-hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .lp-hero-actions .hc-btn { width: auto; }
  .lp-hero { grid-template-columns: 1fr 320px; }
}

/* The tour is a TEXT LINK on portrait and an outline BUTTON from landscape up. One element either
   way: duplicating it would mean two controls with the same purpose in the accessibility tree. */
.lp-tour {
  display: inline-flex; align-items: center; gap: var(--hc-2); min-height: 44px;
  color: var(--hc-accent); font-weight: 700; font-size: 16px; text-decoration: none;
  background: none; border: 0; padding: 0; border-radius: var(--hc-radius-control);
}
.lp-tour:hover { filter: brightness(1.1); }
@media (min-width: 600px), (max-height: 499px) and (orientation: landscape) {
  .lp-tour {
    min-height: 52px; padding: 0 var(--hc-5);
    color: var(--hc-text); border: 1.5px solid var(--hc-border);
  }
  .lp-tour:hover { border-color: var(--hc-text-muted); filter: none; }
}
/* "Take the tour" in the landscape band only; the full label elsewhere. */
.lp-tour-short { display: none; }
@media (min-width: 600px) and (max-width: 1023px), (max-height: 499px) and (orientation: landscape) {
  .lp-tour-long { display: none; }
  .lp-tour-short { display: inline; }
}
/* The eyebrow is on portrait and desktop, and absent from landscape, where the H1 leads. */
@media (min-width: 600px) and (max-width: 1023px), (max-height: 499px) and (orientation: landscape) {
  .lp-eyebrow { display: none; }
}
@media (min-width: 1024px) {
  .lp-hero { grid-template-columns: minmax(0, 1fr) 600px; gap: var(--hc-16); }
}
/* Only portrait offers Log in in the hero: the bar has no Sign up at that width, so the hero
   carries both doors. */
.lp-only-portrait { display: block; }
.lp-hero-actions .lp-only-portrait { width: 100%; }
@media (min-width: 600px), (max-height: 499px) and (orientation: landscape) { .lp-only-portrait { display: none; } }
/* use .hc-from-lg-f from hc.css for a desktop-only inline control */
/* Each breakpoint briefs DIFFERENT artwork, so each carries its own caption. Only one is ever
   shown, and the hidden ones are display:none rather than visually-hidden: they are instructions
   to an illustrator, not content, so a screen reader should not read all three. */
.lp-cap { display: none; }
.lp-cap--portrait { display: block; }
@media (min-width: 600px) and (max-width: 1023px), (max-height: 499px) and (orientation: landscape) {
  .lp-cap--portrait { display: none; }
  .lp-cap--landscape { display: block; }
}
@media (min-width: 1024px) {
  .lp-cap--portrait, .lp-cap--landscape { display: none; }
  .lp-cap--desktop { display: block; }
}
.lp-hero-img { min-height: 220px; }
@media (min-width: 600px), (max-height: 499px) and (orientation: landscape) { .lp-hero-img { min-height: 240px; } }
@media (min-width: 1024px) { .lp-hero-img { min-height: 440px; } }
/* A text link that sits under the buttons rather than beside them. */
/* Bold amber with its own icon, matching the mockup, rather than an underlined link. */
/* No `display` here on purpose. .hc-from-lg-f hides this link below 1024px with display:none,
   and hc.css loads first, so anything this rule sets would beat it and the link would show at
   every width. The utility supplies inline-flex where the link is meant to appear. */
.lp-textlink { color: var(--hc-accent); font-size: 15px; font-weight: 700; text-decoration: none; align-items: center; gap: var(--hc-2); min-height: 44px; }
.lp-textlink:hover { filter: brightness(1.1); }

/* ---------------------------------------------------------------- HC-103: how it works */
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--hc-4); grid-template-columns: 1fr; }
.lp-steps > li { min-width: 0; display: flex; }
@media (min-width: 600px), (max-height: 499px) and (orientation: landscape) { .lp-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .lp-steps { grid-template-columns: repeat(4, 1fr); } }
/* Cards in a row match height, which is what stops a four-across row looking like a broken fence. */
.lp-step { display: flex; flex-direction: column; gap: var(--hc-3); width: 100%; }
/* The icon tile and the Step N label share a row, as the mockup has them, rather than stacking. */
.lp-step-head { display: flex; align-items: center; gap: var(--hc-3); }
.lp-step-n { font-family: var(--hc-font-body); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hc-text-muted); }
.lp-substeps { list-style: none; margin: var(--hc-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--hc-2); }
.lp-substeps li { display: flex; gap: var(--hc-2); align-items: flex-start; font-size: 14px; color: var(--hc-text-muted); }
.lp-substeps .hc-icon { margin-top: 2px; color: var(--hc-accent); }

/* ---------------------------------------------------------------- HC-104: grading example */
.lp-example { display: grid; gap: var(--hc-6); align-items: start; }
@media (min-width: 1024px) { .lp-example { grid-template-columns: 1fr 1fr; gap: var(--hc-16); } }
.lp-rows { margin-top: var(--hc-4); }
.lp-row { display: flex; justify-content: space-between; gap: var(--hc-4); padding-block: var(--hc-3); font-size: 15px; }
.lp-row span { color: var(--hc-text-muted); }
.lp-row b { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* HC-111: the sourcing line under the verdict. Small and muted, because it is there to be
   checked rather than read, but never hidden behind a disclosure. */
.lp-basis { margin-top: var(--hc-3); padding-top: var(--hc-3); border-top: 1px solid var(--hc-border); line-height: 1.5; }

.lp-verdict { display: flex; gap: var(--hc-2); align-items: flex-start; margin-top: var(--hc-4); font-weight: 700; }
.lp-verdict .hc-icon { color: var(--hc-accent); margin-top: 1px; }

/* ---------------------------------------------------------------- HC-105: buy, sell, collect */
.lp-tri { display: grid; gap: var(--hc-4); grid-template-columns: 1fr; }
.lp-tri > * { min-width: 0; }
@media (min-width: 600px), (max-height: 499px) and (orientation: landscape) { .lp-tri { grid-template-columns: repeat(3, 1fr); } }
/* The link pins to the bottom so the three links line up across the row however long the text is. */
.lp-usecase { display: flex; flex-direction: column; gap: var(--hc-3); height: 100%; }
.lp-usecase .lp-link { margin-top: auto; padding-top: var(--hc-2); }
.lp-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--hc-2); }
.lp-points li { display: flex; gap: var(--hc-2); align-items: flex-start; font-size: 14px; color: var(--hc-text-muted); }
.lp-points .hc-icon { color: var(--hc-accent); margin-top: 2px; }
.lp-link { color: var(--hc-accent); text-decoration: none; font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.lp-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------- HC-106: categories */
.lp-cats { display: grid; gap: var(--hc-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 600px), (max-height: 499px) and (orientation: landscape) { .lp-cats { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .lp-cats { grid-template-columns: repeat(6, 1fr); } }
.lp-cat {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--hc-2);
  min-height: 96px; padding: var(--hc-4);
  background: var(--hc-surface-1); border: 1px solid var(--hc-border); border-radius: var(--hc-radius-card);
  color: var(--hc-text); text-decoration: none; font-weight: 700; font-size: 15px;
}
.lp-cat:hover { border-color: var(--hc-accent); }
.lp-cat .hc-icon { color: var(--hc-accent); }
@media (min-width: 1024px) { .lp-cat { min-height: 120px; } }
/* Coming soon: dashed, muted, in a row rather than stacked, and NOT a link. It has no href and is
   aria-disabled, which together take it out of the tab order without needing tabindex. */
.lp-cat--soon {
  flex-direction: row; align-items: center; justify-content: flex-start; gap: var(--hc-3);
  min-height: 60px; background: transparent; border-style: dashed;
  color: var(--hc-text-disabled); font-weight: 400; cursor: default;
}
.lp-cat--soon:hover { border-color: var(--hc-border); }
.lp-cat--soon .hc-icon { color: var(--hc-text-disabled); }
@media (min-width: 1024px) { .lp-cat--soon { min-height: 60px; } }
.lp-soon-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--hc-4); flex-wrap: wrap; margin: var(--hc-8) 0 var(--hc-4); }
.lp-soon-head h3 { font-family: var(--hc-font-body); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--hc-text-muted); }

/* ---------------------------------------------------------------- HC-108: the guest evaluation
   Same dialog treatment as HC-109 so the landing page has one way of asking for something, not
   two. Bottom sheet on portrait, centred card above it. */
.guest { width: min(520px, 100vw); padding: 0; border: 1px solid var(--hc-border); border-radius: var(--hc-radius-card); background: var(--hc-surface-1); color: var(--hc-text); }
.guest::backdrop { background: rgba(6, 9, 16, .72); }
@media (max-width: 599px) {
  .guest { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--hc-radius-card) var(--hc-radius-card) 0 0; }
}
.guest-head { padding: var(--hc-5) var(--hc-5) 0; }
.guest-head h2 { font-family: var(--hc-font-head); font-size: 22px; }
.guest-head p { color: var(--hc-text-muted); font-size: 14px; margin-top: var(--hc-2); }
.guest-body { padding: var(--hc-5); display: grid; gap: var(--hc-4); }
.guest-foot { display: flex; gap: var(--hc-3); align-items: center; padding: var(--hc-4) var(--hc-5); border-top: 1px solid var(--hc-border); }
.guest-foot .hc-btn { width: auto; margin-left: auto; }
.guest-cancel { background: none; border: 0; color: var(--hc-text-muted); font: inherit; font-size: 14px; cursor: pointer; min-height: 44px; }
.guest-err { color: #E8A0A0; font-size: 13px; }
.guest-drop { border: 1.5px dashed var(--hc-border); border-radius: var(--hc-radius-control); padding: var(--hc-6); text-align: center; color: var(--hc-text-muted); }
.guest-drop input { display: block; margin: var(--hc-3) auto 0; color: var(--hc-text); font: inherit; font-size: 14px; }
.guest-thumb { max-width: 100%; max-height: 220px; border-radius: var(--hc-radius-control); display: block; margin: 0 auto; }
/* The honeypot. Off-screen rather than display:none, because some bots skip hidden fields and
   fill the ones they can see; and aria-hidden + tabindex so no real person ever reaches it. */
.guest-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.guest-out { display: grid; gap: var(--hc-3); }
.guest-out dl { display: grid; grid-template-columns: auto 1fr; gap: var(--hc-2) var(--hc-4); margin: 0; font-size: 14px; }
.guest-out dt { color: var(--hc-text-muted); }
.guest-out dd { margin: 0; font-weight: 700; }
.guest-save { padding: var(--hc-5); text-align: center; border-top: 1px solid var(--hc-border); }
.guest-limited { padding: var(--hc-8) var(--hc-5); text-align: center; }
.guest-limited h2 { font-family: var(--hc-font-head); font-size: 22px; }
.guest-limited p { color: var(--hc-text-muted); font-size: 14px; margin-top: var(--hc-2); }

/* ---------------------------------------------------------------- HC-109: tell us what you collect
   A dialog on the wider layouts and a bottom sheet on portrait, which is what the ticket asks
   for. <dialog> either way, so Escape, the backdrop and focus trapping stay the browser's job. */
.tell { width: min(480px, 100vw); padding: 0; border: 1px solid var(--hc-border); border-radius: var(--hc-radius-card); background: var(--hc-surface-1); color: var(--hc-text); }
.tell::backdrop { background: rgba(6, 9, 16, .72); }
@media (max-width: 599px) {
  .tell { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--hc-radius-card) var(--hc-radius-card) 0 0; }
}
.tell-head { padding: var(--hc-5) var(--hc-5) 0; }
.tell-head h2 { font-family: var(--hc-font-head); font-size: 22px; }
.tell-head p { color: var(--hc-text-muted); font-size: 14px; margin-top: var(--hc-2); }
.tell-body { padding: var(--hc-5); display: grid; gap: var(--hc-4); }
.tell-opts { display: flex; flex-wrap: wrap; gap: var(--hc-2); }
.tell-opt {
  display: inline-flex; align-items: center; gap: var(--hc-2);
  min-height: 44px; padding-inline: var(--hc-4);
  border: 1px solid var(--hc-border); border-radius: 999px;
  background: var(--hc-surface-2); color: var(--hc-text); font: inherit; font-size: 14px; cursor: pointer;
}
.tell-opt:has(input:checked) { background: var(--hc-accent); color: var(--hc-on-accent); border-color: var(--hc-accent); font-weight: 700; }
/* The checkbox stays in the page rather than being replaced by a click handler on a div: it is
   what makes these reachable by keyboard and announced as checkable. */
.tell-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tell-opt input:focus-visible + span { outline: 2px solid var(--hc-text); outline-offset: 4px; border-radius: 4px; }
.tell-count { color: var(--hc-text-muted); font-size: 12px; }
.tell-foot { display: flex; gap: var(--hc-3); align-items: center; padding: var(--hc-4) var(--hc-5); border-top: 1px solid var(--hc-border); }
.tell-foot .hc-btn { width: auto; margin-left: auto; }
.tell-cancel { background: none; border: 0; color: var(--hc-text-muted); font: inherit; font-size: 14px; cursor: pointer; min-height: 44px; }
.tell-err { color: #E8A0A0; font-size: 13px; }
.tell-done { padding: var(--hc-8) var(--hc-5); text-align: center; }
.tell-done .tell-tick { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto var(--hc-4); display: grid; place-items: center; background: #1E3A2A; color: #6FD08C; }
.tell-done h2 { font-family: var(--hc-font-head); font-size: 22px; }
.tell-done p { color: var(--hc-text-muted); font-size: 14px; margin-top: var(--hc-2); }

/* ---------------------------------------------------------------- HC-107: try it, plans, footer */
/* .lp-pair is gone: the two cards are separate sections now. Their rails still carry the page
   gutter, and inside a half-width grid column the two facing gutters become the gap between the
   cards, which is why no extra gap is set. */
.lp-pair { display: grid; gap: var(--hc-4); grid-template-columns: 1fr; align-items: start; }
.lp-pair > * { min-width: 0; }
@media (min-width: 600px), (max-height: 499px) and (orientation: landscape) { .lp-pair { grid-template-columns: 1fr 1fr; } }
.lp-tryit .hc-btn { width: 100%; }
.lp-tryit-actions { display: flex; flex-direction: column; gap: var(--hc-3); margin-top: var(--hc-4); }
.lp-footlinks { display: flex; flex-wrap: wrap; gap: var(--hc-2) var(--hc-5); }
@media (min-width: 600px), (max-height: 499px) and (orientation: landscape) { .lp-footlinks { flex-wrap: nowrap; } }
.lp-footlink { color: var(--hc-text-muted); text-decoration: none; font-size: 14px; display: inline-flex; align-items: center; min-height: 44px; }
.lp-footlink:hover { color: var(--hc-text); }