/* Offentlige undersider /om, /appen, /laget (STRUKTUR-SPEC.md).
   Bygger på landing-stilene i styles.css (.landing-*, .lw-*, .laget-*, .lhx-*);
   her ligger bare det som er nytt for undersidene. Alt er skopet til .sub,
   unntatt .sub-footer, som også brukes av /hyrox og /kolleksjon.
   Ingen translate-animasjoner. Tekstlenker på lys flate: --accent-aa. */

.sub-brand { color: var(--text-primary); text-decoration: none; }
.sub-header-btn {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

/* ---- Sidetittel: første seksjon bærer h1 ---- */
.sub .sub-first { padding-top: clamp(2.5rem, 7vh, 4.5rem); }
.sub .sub-h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5.6vw, 3.1rem);
    font-weight: 800;
    line-height: var(--leading-tight);
    letter-spacing: -0.03em;
    margin: 0 auto var(--space-6);
    text-align: center;
    overflow-wrap: break-word;
}

/* ---- Brødtekst og lenker ---- */
.sub-intro {
    max-width: 620px;
    margin: 0 auto var(--space-6);
    text-align: center;
    font-size: clamp(1rem, 2.4vw, 1.1rem);
    line-height: 1.65;
    color: var(--text-secondary);
}
.sub-note {
    max-width: 620px;
    margin: var(--space-5) auto 0;
    font-size: var(--font-sm);
    line-height: 1.6;
    color: var(--text-secondary);
    text-align: center;
}
.sub a:not([class]),
.sub .sub-link {
    color: var(--accent-aa);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
}
/* Bunnteksten beholder sin egen dempede lenkefarge. */
.sub .landing-footer a { color: var(--text-secondary); font-weight: 400; }

/* ---- Appen: mockupen står som sidens «hero» ---- */
.sub .landing-app .sub-h1 { margin-bottom: var(--space-3); }

/* ---- Laget: sesongnavnene er h3 her (h2 = «Sesongkalenderen») ---- */
.sub .laget-season h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    margin: 0;
}

/* ---- Avsluttende CTA ---- */
.sub-final { text-align: center; }
.sub-final-ctas {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

/* Mobil: venstrejustert som resten av landing-stilene (styles.css, 760px). */
@media (max-width: 760px) {
    .sub .sub-h1,
    .sub .sub-final,
    .sub .sub-intro,
    .sub .sub-note { text-align: left; }
    .sub .sub-intro { margin-left: 0; }
    .sub .sub-final-ctas { align-items: stretch; }
    .sub .sub-final-ctas .sub-link { text-align: center; }

    /* Ingress/avsnitt som styles.css sentrerer under en venstrejustert overskrift:
       samme venstrekant som kicker og h2 (ingen sentrert boks i 561-760 px). */
    .sub .lw-sub,
    .sub .landing-app-sub,
    .sub .landing-ai-foot { text-align: left; margin-left: 0; }
    .sub .lwhoop-lead,
    .sub .lwhoop-note { text-align: left; }
    /* Telefonmockupen: la innholdet bestemme høyden, så siste kort ikke klippes. */
    .sub .phone-mock-screen { aspect-ratio: auto; }
}

/* ---- Widgets: ingen løft ved hover (translate føles som scroll) ---- */
.sub .lw-week-opt:hover { transform: none; border-color: var(--accent); }

/* Forsiden unntar #landingView fra den globale reduced-motion-nullingen,
   fordi Vetle vil se widget-tegningene. Samme unntak her, men bare for
   widgetene (milde, ikke-vestibulære; ingen translate). Id-selektoren
   trengs for å slå !important-regelen i styles.css. */
@media (prefers-reduced-motion: reduce) {
    #subpage .lw-graph-card.lw-draw .lw-curve--spike,
    #subpage .lw-graph-card.lw-draw .lw-curve--small { animation-duration: 2.4s !important; }
    #subpage .lw-graph-card.lw-draw .lw-curve-dot { animation-duration: 0.5s !important; }
    #subpage .lw-day--in,
    #subpage .lw-cell--in { animation-duration: 0.45s !important; }
    #subpage .lw-curve,
    #subpage .lw-curve-dot { transition-duration: 0.4s !important; }
}

/* ---- Formatering (felles for alle seks sidene, som alle har .landing):
   ingen enslige ord på siste linje i overskrifter og spørsmål, og i
   ingressene som sentreres på bred skjerm. ---- */
.landing :is(h1, h2, h3, summary),
.sub-intro,
.sub-note { text-wrap: balance; }
/* Brødtekst: ikke et enkeltord alene på siste linje. :where() gir null spesifisitet,
   så styles.css sine egne balance-regler (ingresser) vinner der de finnes. */
:where(.landing) :where(p, li, dd, figcaption) { text-wrap: pretty; }

/* /personvern: samme sidemarg som header og bunntekst (20 px, ikke 16). */
.privacy-page .privacy-page-main { padding-left: var(--space-5); padding-right: var(--space-5); }

/* ---- Felles bunntekst (også /hyrox og /kolleksjon): seks lenker
   må kunne brekke på mellomstore skjermer uten sidescroll. ---- */
.sub-footer { flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.sub-footer nav { flex-wrap: wrap; gap: 0 var(--space-4); }
.sub-footer nav a[aria-current="page"] { color: var(--text-primary); text-decoration: none; font-weight: 600; }
@media (max-width: 560px) {
    .sub-footer nav { gap: 0 var(--space-5); }
}

/* /hyrox: «To måter å ta det på» står rett under h2 i prisseksjonen. */
.hxp .hxp-choose-title { margin-top: 0; }