/* FlipForge homepage hero positioning (v1). Adds the category name above "Price is not proof." and the benefit line,
 * inside the existing v10 hero. The hero layout, art, panel, palette and "Before you buy. Know Why." are unchanged:
 * this file only adds two rows to the existing grid and styles the new lines with the v10 tokens. */

/* Desktop grid: category, title, benefit, brand line, lede, actions, note, then the decision key (fills the rest). */
.ff10-hero-grid{grid-template-rows:auto auto auto auto auto auto auto 1fr}
.ff10-hero-category{grid-column:1;grid-row:1}
.ff10-hero-title{grid-row:2}
.ff10-hero-benefit{grid-column:1;grid-row:3}
.ff10-hero-brand{grid-row:4}
.ff10-hero .ff10-lede{grid-row:5}
.ff10-hero .ff10-actions{grid-row:6}
.ff10-hero-note{grid-row:7}
.ff10-verdict-key{grid-row:8;margin-top:32px}

/* The category: the name of what FlipForge is, set as the hero's opening line. */
.ff10 .ff10-hero-category{display:flex;align-items:center;gap:14px;margin:0 0 clamp(16px,1.6vw,24px)!important;
  font-size:clamp(14px,1.25vw,18px);font-weight:800;letter-spacing:.24em;text-transform:uppercase;line-height:1.2;color:var(--g)}
.ff10-hero-category::before{content:"";flex:none;width:clamp(28px,3vw,44px);height:2px;background:var(--g)}
.ff10-hero-category sup{font-size:.62em;letter-spacing:0;margin-left:.08em;vertical-align:.55em}

/* The benefit: what the category does for a buyer, directly under the headline. */
.ff10 .ff10-hero-benefit{margin-top:clamp(18px,1.8vw,26px)!important;max-width:34em;
  font-size:clamp(19px,1.6vw,25px);font-weight:600;letter-spacing:-.015em;line-height:1.3;color:rgba(255,255,255,.9)}
.ff10-hero-benefit span{white-space:nowrap}
.ff10 .ff10-hero-brand{margin-top:clamp(14px,1.4vw,20px)!important}
/* On wide screens the decision panel overlaps the text column by design, so the benefit line stays within the
 * headline's width: "Find opportunities. Test the evidence." / "Avoid expensive mistakes." on two lines. */
@media(min-width:1101px){.ff10 .ff10-hero-benefit{max-width:23em}}

/* Beta access stays one tap away from the hero, as a clear link beside the beta note. */
.ff10-hero-note a{margin-left:6px;color:var(--g);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.ff10-hero-note a::after{content:" \2192"}
.ff10-hero-note a:hover{color:var(--w)}

@media(min-width:761px) and (max-width:1100px){
  .ff10-hero-benefit{max-width:30em}
}
@media(max-width:760px){
  .ff10 .ff10-hero-category{gap:10px;font-size:13px;letter-spacing:.2em;margin-bottom:14px!important}
  .ff10 .ff10-hero-benefit{font-size:clamp(18px,5vw,21px);margin-top:16px!important}
  .ff10-hero-benefit span{white-space:normal}
  .ff10 .ff10-hero-brand{margin-top:12px!important}
  .ff10-hero-note a{display:inline-block;margin:6px 0 0}
}