/* ============================================================
   HyperC — "AI hustling" landing (variant C, /earn/)
   Loaded AFTER landing.css. Two jobs: flip that stylesheet's
   dark palette to a light one for this page only, and add
   what variant C needs on top — the banner hero, the market
   grid, the business gallery and the sources apparatus.
   ============================================================ */

/* ---------- Light theme ----------
   landing.css paints variant B, which is a dark page, and every colour in it
   resolves through the tokens below. Redefining them here turns the whole
   page light without forking that file — so a fix to a shared component keeps
   reaching both pages. Two things do not follow from the tokens and are
   overridden by hand further down: rules in landing.css that hardcode a dark
   value (the sticky header, the mobile CTA bar), and gold used as a *fill*
   rather than as text, which stays brand-bright because near-black type sits
   on it.

   --paper* keep their job as the alternating band, one step warmer than the
   page, so .section-light still reads as a band instead of disappearing. */
:root {
  --bg: #FBFAF7;
  --panel: #FFFFFF;
  --panel-2: #F4F1EA;
  --line: #E2DDD1;
  /* Contrast-picked against every ground this page uses (white cards, the
     #FBFAF7 page, the #F1EDE3 paper band): #A87F1D — the gold landing.css
     uses inside its light sections — only reaches 3.1:1 on the paper band,
     and here it carries kickers, chips, card numbers and summaries rather
     than a stray label. These clear 4.5:1 everywhere. */
  --gold: #7E5E10;
  --gold-soft: #6B4E0B;
  --gold-fill: #E9AF45;
  --blue: #2E5EA6;
  /* Same contrast rule as the golds: #C0533F only manages 3.95:1 on the
     paper band, and the red now carries a whole table cell. */
  --green: #276B38;
  --red: #A63E29;
  --ink: #161C28;
  --ink-dim: #4B5464;
  --ink-faint: #5E6776;

  --paper: #F1EDE3;
  --paper-2: #EAEFF5;
  --paper-panel: #FFFFFF;
  --paper-line: #DDD8CC;
  --paper-ink: #161C28;
  --paper-dim: #4B5464;

  /* Accent tints. On a dark ground a translucent wash of the bright brand
     colours reads correctly; on a light one it turns to pastel mud, so the
     tints are re-derived from the darker text golds and blues. */
  --gold-line: rgba(126,94,16,0.34);
  --gold-wash: rgba(126,94,16,0.07);
  --blue-line: rgba(46,94,166,0.30);
  --blue-wash: rgba(46,94,166,0.06);
}

/* Rules in landing.css that hardcode a dark-theme colour. Each one is a
   surface the page cannot simply inherit its way out of. */
.site-header { background: rgba(251,250,247,0.90); }
.sticky-cta { background: rgba(251,250,247,0.96); }
.robot-guide { background: rgba(46,94,166,0.07); }
.community-band { background: var(--blue-wash); border-top-color: var(--blue-line); border-bottom-color: var(--blue-line); }
.market-hook { background: var(--gold-wash); border-top-color: var(--gold-line); border-bottom-color: var(--gold-line); }
/* landing.css gives .beta-chip a second, more specific rule inside its light
   sections; on a page that is light throughout, both need the same gold. */
.beta-chip,
.section-light .beta-chip,
.section-light-2 .beta-chip {
  color: var(--gold); border-color: var(--gold-line); background: var(--gold-wash);
}
.logo .logo-beta { color: var(--ink-faint); border-color: var(--line); }
/* Gold as a fill: the buttons keep the bright brand colour, because the label
   on them is near-black in both themes and #A87F1D would only make them look
   switched off. */
.btn-gold { background: var(--gold-fill); border-color: var(--gold-fill); }
.btn-gold:hover { background: #F3C96E; box-shadow: 0 8px 26px rgba(233,175,69,0.30); }
/* Same rule for the CTA landing.js clones into the mobile nav: it paints with
   var(--gold), which is now a text gold and would render the primary action as
   a muddy brown pill. */
@media (max-width: 1240px) {
  .main-nav .nav-auth-primary { background: var(--gold-fill); border-color: var(--gold-fill); }
  .main-nav .nav-auth-primary:hover { background: #F3C96E; border-color: #F3C96E; }
}
/* It sits between the page ground and the paper band of the worked lot, and
   at panel-2 all three were the same beige. White keeps the three bands
   distinguishable; its own hairline borders do the separating. */
/* landing.css hardcodes #A87F1D for kickers inside its light sections. On a
   page that is light throughout, that gold has to clear AA like every other
   one, so the sections use the same token as the rest. */
.section-light .kicker, .section-light-2 .kicker { color: var(--gold); }
.tagline-strip .g { color: var(--gold); }
/* The price card, brought over from the root landing. Its 2px frame reads as
   the brand accent, so it takes the fill gold rather than the darker text
   gold; the plan name is small type and takes the text gold. --paper-2 is the
   cool band on this page, which is also the section the card sits in, so the
   founding note needs a warm step to separate from it. */
.price-card { border-color: var(--gold-fill); }
.price-card .plan-name { color: var(--gold); }
.founding-note { background: var(--paper); }
.trust-reset { background: var(--panel); }
.hook-strip { background: var(--panel-2); }
.newsletter form input { background: var(--panel-2); }

/* ---------- Banner hero ----------
   Rounded, full-wrap width, and it owns the motto and the opening two
   paragraphs. The copy column is capped well short of the image width so the
   type never runs into the lit half of the photograph. */
.banner {
  position: relative; overflow: hidden;
  border-radius: 18px; margin-top: 6px;
  background: #1A2130;
  box-shadow: 0 20px 50px rgba(19,25,38,0.16);
}
.banner-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 78% 42%;
}
/* Heaviest at the left edge and nearly clear at the right: the subject of the
   photograph is on the right and should stay visible. The second, vertical
   layer only lifts contrast under the lowest line of type. */
.banner-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(9,13,20,0.16) 0%, rgba(9,13,20,0) 32%, rgba(9,13,20,0.16) 100%),
    linear-gradient(96deg,
      rgba(9,13,20,0.86) 0%,
      rgba(9,13,20,0.74) 28%,
      rgba(9,13,20,0.52) 50%,
      rgba(9,13,20,0.18) 74%,
      rgba(9,13,20,0.02) 100%);
}
.banner-copy {
  position: relative;
  padding: clamp(30px, 4.2vw, 58px);
  /* Narrow enough that the wash can fall away well before the subject of the
     photograph, who lives in the right third of the frame. */
  max-width: 31em;
  min-height: clamp(380px, 38vw, 560px);
  display: flex; flex-direction: column; justify-content: center;
  color: #F5F2EA;
}
.banner-copy .kicker { color: #F3C96E; text-shadow: 0 1px 8px rgba(9,13,20,0.6); }
.banner-copy h1 {
  color: #FFFFFF; text-shadow: 0 2px 22px rgba(9,13,20,0.45);
  /* six words, not three: the clamp tops out lower than landing.css so the
     line breaks at the comma instead of taking four lines. */
  font-size: clamp(2.1rem, 4.6vw, 3.5rem); max-width: 15em;
}
.banner-copy .earn-lede { color: rgba(245,242,234,0.92); text-shadow: 0 1px 10px rgba(9,13,20,0.55); }
.banner-copy .earn-lede strong { color: #F3C96E; }
@media (max-width: 760px) {
  /* At phone width there is no room to sit beside the subject, so the wash
     goes vertical and the copy sits over the whole frame. */
  .banner-shade {
    background: linear-gradient(180deg, rgba(9,13,20,0.62) 0%, rgba(9,13,20,0.60) 46%, rgba(9,13,20,0.78) 100%);
  }
  .banner-img { object-position: 66% 34%; }
  .banner-copy { min-height: 0; padding: 30px 24px 34px; }
}

/* ---------- Hero additions ----------
   The variant-B headline is three words; this one is six, so it needs a
   smaller top end on the clamp or it takes four lines on a laptop. The cap
   is set to break it at the comma: "Spend your agent tokens," / "earn extra
   cash." */
.banner-copy h1 em { font-style: normal; color: #F3C96E; }
.earn-lede { font-size: 1.12rem; color: var(--ink-dim); max-width: 40em; }
.earn-lede + .earn-lede { margin-top: 0.9rem; }
.earn-lede strong { color: var(--ink); font-weight: 600; }

/* The agent -> menu -> decision -> scale strip under the demo. Four terms of
   one sentence: it reads across the arrows on a wide screen, folds to 2x2
   when the columns get too narrow for the notes, and stacks in reading order
   on a phone. The arrows are decoration, so they leave with the row. */
.spend-strip {
  display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: start; gap: 14px; margin-top: 2.2rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px 26px;
}
.spend-strip .ss { min-width: 0; }
.spend-strip .ss-v { font-family: var(--serif); font-size: 1.08rem; line-height: 1.3; display: block; }
.spend-strip .ss-n { font-size: 0.86rem; color: var(--ink-faint); margin-top: 0.4rem; }
.spend-strip .arrow { color: var(--ink-faint); font-size: 1.3rem; padding-top: 2px; }
@media (max-width: 1040px) {
  .spend-strip { grid-template-columns: 1fr 1fr; gap: 20px 26px; }
  .spend-strip .arrow { display: none; }
}
@media (max-width: 620px) {
  .spend-strip { grid-template-columns: 1fr; }
}

/* ---------- Marketplace analogy ---------- */
/* --panel is white on this page, which is what the cards are; the band needs
   the warmer step to read as a band at all. */
.analogy { background: var(--panel-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.analogy .wrap { padding-top: 52px; padding-bottom: 52px; }
.analogy h2 { max-width: 18em; }
/* The three per-platform explainer cards were cut: naming Turo, Airbnb and
   Upwork in the headline is enough, and explaining them was restating what
   the reader already knows before getting to the turn. */
.an-diff { margin-top: 1.6rem; border-left: 3px solid var(--gold); padding-left: 18px; }
.an-diff p { font-family: var(--serif); font-size: clamp(1.1rem, 2.1vw, 1.45rem); line-height: 1.38; max-width: 30em; }
.an-diff em { font-style: normal; color: var(--gold); }

/* ---------- Market grid ----------
   Five across at full width, and it degrades by dropping columns rather
   than shrinking tiles: a two-word market name and a one-line refusal need
   about 180px to stay on three lines. Tiles are equal height by grid
   stretch so the rows read as a block rather than a ragged list. */
.mkt-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 2rem;
}
.mkt {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 1px 4px rgba(19,25,38,0.04);
  padding: 14px 15px 15px; text-decoration: none; color: inherit;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.mkt:hover, .mkt:focus-visible {
  border-color: var(--gold); background: var(--panel-2); transform: translateY(-2px);
}
.mkt-name { font-weight: 600; font-size: 0.87rem; line-height: 1.3; padding-right: 12px; }
.mkt-rej { font-size: 0.76rem; line-height: 1.4; color: var(--ink-faint); }
.mkt:hover .mkt-name, .mkt:focus-visible .mkt-name { color: var(--gold-soft); }
/* The tiles that stay on this page say so, quietly. */
.mkt[data-here]::after {
  content: "\2193"; position: absolute; top: 12px; right: 12px;
  font-family: var(--mono); font-size: 0.78rem; color: var(--ink-faint);
}
.mkt[data-here]:hover::after { color: var(--gold); }
@media (max-width: 1040px) { .mkt-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 880px)  { .mkt-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .mkt-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Business gallery ---------- */
.gallery-intro { max-width: 46em; }
.gallery-intro p + p { margin-top: 0.9rem; }

/* align-items:start — otherwise expanding one card's details stretches its
   neighbour to match, and the row fills with dead space. */
.biz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 2.2rem; align-items: start; }
@media (max-width: 900px) { .biz-grid { grid-template-columns: 1fr; } }

.biz {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 2px 8px rgba(19,25,38,0.04);
}
.biz-ent { border-color: var(--gold-line); background: var(--gold-wash); }
.biz-head { padding: 24px 26px 0; }
.biz-num { font-family: var(--mono); color: var(--gold); font-size: 0.78rem; display: block; margin-bottom: 0.6rem; }
.biz h3 { margin-bottom: 0.55rem; }
.biz-hook { font-family: var(--serif); font-size: 1.06rem; line-height: 1.4; color: var(--ink); }
.biz-intro { font-size: 0.94rem; color: var(--ink-dim); margin-top: 0.9rem; }

.biz-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem; }
.chip {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--ink-faint);
  /* .biz clips its overflow, so a nowrap chip does not push the card out —
     it disappears off the right edge. On a 375px screen the longest
     ceiling chip does exactly that, so chips wrap. */
  white-space: normal; line-height: 1.45;
}
.chip-concept { color: var(--ink-dim); }
.chip-auto { color: var(--gold); border-color: var(--gold-line); background: var(--gold-wash); }
/* The enterprise cards are themselves gold-washed, so the chip would be a
   tint on a tint — lift it back onto near-white before it drops under AA. */
.biz-ent .chip-auto { background: rgba(255,255,255,0.78); }
/* The starting-point chip carries a sentence, not a label, so it is the one
   chip that must wrap — nowrap pushes it past the card and the document
   scrolls sideways. It takes its own line under the other two. */
.chip-start {
  color: var(--blue); border-color: var(--blue-line); background: var(--blue-wash);
  text-transform: none; letter-spacing: 0.02em; font-size: 0.72rem; line-height: 1.5;
  white-space: normal; flex: 1 1 100%; border-radius: 8px;
}

.biz details { margin-top: 1.2rem; border-top: 1px solid var(--line); }
.biz details summary {
  list-style: none; cursor: pointer; padding: 14px 26px;
  font-size: 0.86rem; font-weight: 600; color: var(--gold);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.biz details summary::-webkit-details-marker { display: none; }
.biz details summary::after { content: "+"; font-family: var(--mono); font-size: 1.05rem; color: var(--ink-faint); }
.biz details[open] summary::after { content: "\2212"; }
.biz details summary:hover { background: var(--gold-wash); }
.biz-body { padding: 4px 26px 24px; }
.biz-block + .biz-block { margin-top: 1.1rem; }
.biz-block h4 {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.4rem; font-weight: 600;
}
.biz-block p { font-size: 0.9rem; color: var(--ink-dim); }
.biz-foot { margin-top: auto; padding: 0 26px 24px; }
.biz-foot .btn { font-size: 0.86rem; padding: 10px 18px; }
.biz:not(:has(details[open])) .biz-foot { padding-top: 0; }

/* Footnote markers. Small, quiet, and they must not inherit the gold link
   colour of the block they sit in or they read as calls to action. */
.fn { font-size: 0.72em; vertical-align: super; line-height: 0; color: var(--blue); text-decoration: none; margin-left: 1px; }
.fn:hover { text-decoration: underline; }

/* The platform-permission note. It is not a footnote and not a disclaimer —
   it decides whether three of the concepts are buildable at all — so it gets
   a box and the blue accent the site uses for "read this properly". */
/* Shared box for the two "read this properly" blocks: the platform-permission
   note in the gallery, and the reality check under the worked lot's ROI. */
.permission-note,
.callout {
  margin-top: 1.8rem; border: 1px solid var(--blue-line);
  background: var(--blue-wash); border-radius: var(--radius-lg);
  padding: 22px 26px;
}
.permission-note p,
.callout p { font-size: 0.94rem; color: var(--ink-dim); max-width: 62em; }
.permission-note strong,
.callout strong { color: var(--blue); }
.permission-note p + p strong,
.callout p + p strong { color: var(--ink); }
.section-light .callout { background: rgba(46,94,166,0.05); }
/* The verdict line of the callout is the one that has to survive skimming. */
.callout p:first-child strong { color: var(--blue); }

/* ---------- Operating-tier legend ---------- */
.legend { margin-top: 2rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); padding: 26px 28px; }
.legend h3 { margin-bottom: 1rem; }
/* The numbered-level list became the tier table from the market assessment:
   two columns of who does what, which is the only distinction the scale was
   ever really drawing. */
.legend .bench-table td:first-child { white-space: nowrap; color: var(--gold); }
.legend .bench-table td { color: var(--ink-dim); vertical-align: top; }
.legend .bench-table tr:last-child td { border-bottom: none; }
.legend-note { margin-top: 1.2rem; font-size: 0.88rem; color: var(--ink-faint); }
.legend-note strong { color: var(--ink); }

/* ---------- Sources ---------- */
.sources { border-top: 1px solid var(--line); }
.sources ol { margin: 1.4rem 0 0 1.2rem; columns: 2; column-gap: 40px; }
.sources li { font-size: 0.82rem; color: var(--ink-faint); margin-bottom: 0.6rem; break-inside: avoid; }
.sources li a { color: var(--blue); }
@media (max-width: 760px) { .sources ol { columns: 1; } }