/*
 * Landing pages (copy from wp-admin -> Landing pages). Theme vocabulary only:
 * --r-box cards, 12-16px inner radius, one brand red, neutral shadows, hover feedback only.
 */
.landing { scroll-margin-top:calc(var(--header-h) + 24px); }
.landing [id] { scroll-margin-top:calc(var(--header-h) + 72px); }

/* Hero */
.lp-hero { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr); gap:clamp(24px,4vw,64px); align-items:start; padding-block:clamp(36px,5vw,72px) clamp(20px,2.5vw,32px); }
.lp-hero--solo { grid-template-columns:minmax(0,1fr); }
.lp-hero__title { margin:0; max-width:18ch; color:var(--ink); font-size:clamp(36px,5.2vw,66px); font-weight:700; line-height:1.02; letter-spacing:-.04em; text-wrap:balance; }
.lp-hero__lead { margin-top:clamp(16px,2vw,24px); max-width:60ch; }
.lp-hero__lead p { margin:0; color:var(--ink-2); font-size:clamp(17px,1.5vw,20px); line-height:1.6; }
.lp-hero__lead a, .lp-card__text a { color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.lp-hero__meta { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:24px 0 0; color:var(--muted); font-size:14px; font-weight:560; }
.lp-hero__meta > span { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:var(--r-pill); background:var(--bg-2); }
.lp-hero__meta .icon { width:16px; height:16px; }
.lp-hero__meta .lp-hero__age { background:var(--accent-solid); color:#fff; font-weight:700; }

/* On this page */
.lp-toc { position:relative; padding:20px 8px 12px 20px; border-radius:var(--r-box); background:var(--surface); box-shadow:0 0 0 1px var(--line), var(--shadow-sm); }
.lp-toc__title { margin:0 0 8px; color:var(--muted); font-size:13px; font-weight:650; }
.lp-toc ol { counter-reset:toc; max-height:340px; margin:0; padding:0 12px 0 0; overflow-y:auto; list-style:none; overscroll-behavior:contain; }
.lp-toc li { counter-increment:toc; }
.lp-toc a { display:grid; grid-template-columns:28px 1fr; align-items:baseline; padding:8px 10px 8px 0; border-radius:10px; color:var(--ink-2); font-size:15px; line-height:1.35; transition:color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); }
.lp-toc a::before { content:counter(toc, decimal-leading-zero); color:var(--muted); font:500 12.5px var(--mono); }
.lp-toc a:hover { color:var(--ink); }
.lp-toc a:hover::before, .lp-toc a.is-current::before { color:var(--accent-ink); }
.lp-toc a.is-current { color:var(--ink); font-weight:600; }

/* Key-point cards */
.lp-cards { padding-block:clamp(12px,2vw,24px) clamp(28px,4vw,48px); }
.lp-cards__grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,260px), 1fr)); gap:14px; margin:0; padding:0; list-style:none; }
.lp-cards__grid--4 { grid-template-columns:repeat(auto-fit, minmax(min(100%,240px), 1fr)); }
@media (min-width:1100px) { .lp-cards__grid--4 { grid-template-columns:repeat(4,1fr); } .lp-cards__grid--5, .lp-cards__grid--6 { grid-template-columns:repeat(6,1fr); } .lp-cards__grid--5 > :nth-child(-n+2) { grid-column:span 3; } .lp-cards__grid--5 > :nth-child(n+3), .lp-cards__grid--6 > * { grid-column:span 2; } }
.lp-card { display:flex; flex-direction:column; gap:10px; min-width:0; padding:clamp(20px,2.4vw,28px); border-radius:var(--r-box); background:var(--surface); box-shadow:0 0 0 1px var(--line), var(--shadow-sm); transition:transform var(--dur-2) var(--spring), box-shadow var(--dur-2) var(--ease-out); }
.lp-card:hover { transform:translateY(-2px); box-shadow:0 0 0 1px var(--line-strong), var(--shadow-md); }
.lp-card__num { color:var(--accent-ink); font:600 14px var(--mono); letter-spacing:-.01em; }
.lp-card__title { margin:0; color:var(--ink); font-size:clamp(18px,1.6vw,21px); font-weight:650; line-height:1.2; letter-spacing:-.02em; text-wrap:balance; }
.lp-card__text p { margin:0; color:var(--ink-2); font-size:15.5px; line-height:1.62; }
.lp-card__text p + p { margin-top:.8em; }
/* First card anchors the row: dark panel, same as the results card and newsletter */
.lp-cards__grid > .lp-card:first-child { background:#121a2b; box-shadow:inset 0 1px 0 rgb(255 255 255 / .06), var(--shadow-md); }
.lp-cards__grid > .lp-card:first-child .lp-card__title { color:#fff; }
.lp-cards__grid > .lp-card:first-child .lp-card__text p { color:rgb(233 236 242 / .8); }
.lp-cards__grid > .lp-card:first-child .lp-card__num { color:#ff8a80; }
.lp-cards__grid > .lp-card:first-child a { color:#fff; }
:root[data-theme="dark"] .lp-cards__grid > .lp-card:first-child { box-shadow:0 0 0 1px var(--line-strong); }
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .lp-cards__grid > .lp-card:first-child { box-shadow:0 0 0 1px var(--line-strong); } }

/* Live block */
.lp-module { padding-block:clamp(8px,1.5vw,16px) clamp(28px,4vw,48px); }
.lp-module.matches { padding-top:0; }
.lp-module__grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,420px), 1fr)); gap:20px; align-items:start; }
.lp-module__grid--league { grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); }
.lp-module .addition-surface { padding:clamp(18px,2.4vw,28px); }
.lp-events { padding:8px clamp(12px,2vw,20px); }
.quicklinks--row { grid-template-columns:repeat(auto-fit, minmax(min(100%,230px), 1fr)); margin-top:4px; }
.lp-original__inner { padding:clamp(20px,3vw,36px); border-radius:var(--r-box); background:var(--surface); box-shadow:0 0 0 1px var(--line), var(--shadow-sm); }

/* Long sections: stacked (heading above copy), no boxes. Layout varies by section type. */
.lp-secs { display:grid; gap:clamp(56px,7vw,104px); padding-block:clamp(32px,4vw,56px) clamp(24px,3vw,40px); }
.lp-sec { min-width:0; }
.lp-sec__head { margin-bottom:clamp(16px,2vw,24px); }
.lp-sec__title { margin:0; max-width:26ch; color:var(--ink); font-size:clamp(26px,2.8vw,38px); font-weight:680; line-height:1.1; letter-spacing:-.03em; text-wrap:balance; }
.lp-sec__prose { max-width:66ch; }
.lp-sec__prose p, .lp-sec__cols p { font-size:16.5px; line-height:1.72; }
.lp-sec a { color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.lp-lead { display:block; margin-bottom:.6em; color:var(--ink); font-size:clamp(19px,1.7vw,22px); font-weight:560; line-height:1.45; letter-spacing:-.012em; }

/* Pull: the heading steps back, the first sentence leads, the rest runs in two columns */
.lp-sec--quote .lp-sec__title { font-size:17px; font-weight:650; letter-spacing:-.01em; color:var(--accent-ink); }
.lp-sec__pull { max-width:44ch; margin:0 0 clamp(20px,2.4vw,32px); color:var(--ink); font-size:clamp(23px,2.3vw,31px); font-weight:620; line-height:1.18; letter-spacing:-.03em; text-wrap:balance; }
.lp-sec__cols { max-width:none; columns:2 300px; column-gap:clamp(28px,4vw,56px); }
.lp-sec__cols > p { margin-top:0; }

/* Steps: horizontal timeline, one sentence per stop */
.lp-timeline { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,220px), 1fr)); gap:36px clamp(20px,2.4vw,32px); margin:8px 0 0; padding:0; list-style:none; }
.lp-timeline li { position:relative; padding-top:26px; border-top:2px solid var(--line-strong); }
.lp-timeline__dot { position:absolute; top:-8px; left:0; width:14px; height:14px; border-radius:50%; background:var(--accent-solid); box-shadow:0 0 0 5px var(--bg); }
.lp-timeline p { margin:0; color:var(--ink-2); font-size:16px; line-height:1.6; }
.lp-timeline li:first-child p { color:var(--ink); font-weight:560; }

/* Don't list / checklist */
.lp-marks { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px clamp(28px,4vw,56px); margin:8px 0 0; padding:0; list-style:none; }
.lp-marks li { display:flex; gap:14px; align-items:flex-start; }
.lp-marks__icon { flex:none; width:26px; height:26px; margin-top:1px; color:var(--accent-ink); }
.lp-sec--safe .lp-marks__icon { color:#23935a; }
:root[data-theme="dark"] .lp-sec--safe .lp-marks__icon { color:#4cc489; }
.lp-marks p { margin:0; color:var(--ink-2); font-size:16.5px; line-height:1.6; }

/* Price and probability: copy with the converter beside it (the second column is a tool) */
.lp-sec--odds { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr); gap:clamp(28px,4vw,64px); align-items:start; }
.lp-sec__tool { position:sticky; top:calc(var(--header-h) + 72px); }
.lp-sec__tool .lp-odds { grid-template-columns:1fr 1fr; margin:0; max-width:none; padding:20px; }
.lp-sec__tool .lp-odds__out { grid-column:1 / -1; flex-direction:row; justify-content:space-between; align-items:center; }

.lp-sec--faq .lp-faq { max-width:860px; }

/* Odds -> probability converter */
.lp-odds { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr); gap:12px; align-items:end; max-width:68ch; margin-top:24px; padding:16px; border-radius:16px; background:var(--surface); box-shadow:0 0 0 1px var(--line), var(--shadow-sm); }
.lp-odds__out { display:flex; flex-direction:column; justify-content:center; gap:2px; height:var(--field-h); padding:0 16px; border-radius:12px; background:#121a2b; color:rgb(233 236 242 / .75); font-size:13px; }
.lp-odds__out span { display:flex; align-items:baseline; gap:6px; }
.lp-odds__out b { color:#fff; font:600 15px var(--mono); }
.lp-odds__out b[data-o="prob"] { color:#ff8a80; }
.lp-odds__note { grid-column:1 / -1; margin:0; color:var(--muted); font-size:12.5px; }

/* FAQ accordion */
.lp-faq { max-width:72ch; border-top:1px solid var(--line); }
.lp-faq__item { border-bottom:1px solid var(--line); }
.lp-faq__item summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 4px; color:var(--ink); font-size:17px; font-weight:620; line-height:1.4; cursor:pointer; list-style:none; transition:color var(--dur-1) var(--ease-out); }
.lp-faq__item summary::-webkit-details-marker { display:none; }
.lp-faq__item summary:hover { color:var(--accent-ink); }
.lp-faq__item summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:8px; }
.lp-faq__caret { flex:none; width:18px; height:18px; color:var(--muted); transition:transform var(--dur-2) var(--spring); }
.lp-faq__item[open] .lp-faq__caret { transform:rotate(180deg); color:var(--accent-ink); }
.lp-faq__item p { margin:0; padding:0 4px 20px; color:var(--ink-2); font-size:16.5px; line-height:1.68; }

/* Continue your research */
.lp-related { padding-block:clamp(28px,4vw,48px) 8px; }
.lp-related__title { margin:0 0 20px; }
.lp-related__grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%,220px), 1fr)); gap:12px; margin:0; padding:0; list-style:none; }
.lp-tile { display:flex; align-items:center; gap:14px; height:72px; padding:0 18px; border-radius:16px; background:var(--surface); color:var(--ink); box-shadow:0 0 0 1px var(--line), var(--shadow-sm); font-size:16px; font-weight:620; transition:transform var(--dur-2) var(--spring), box-shadow var(--dur-2) var(--ease-out); }
.lp-tile:hover { transform:translateY(-2px); box-shadow:0 0 0 1px var(--line-strong), var(--shadow-md); }
.lp-tile:active { transform:scale(.98); }
.lp-tile__icon { display:grid; flex:none; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--accent-soft); color:var(--accent-ink); }
.lp-tile__icon .icon { width:20px; height:20px; }
.lp-tile__label { flex:1; min-width:0; }
.lp-tile__arrow { color:var(--muted); transition:transform var(--dur-2) var(--spring), color var(--dur-1) var(--ease-out); }
.lp-tile:hover .lp-tile__arrow { transform:translateX(3px); color:var(--accent-ink); }

/* 18+ strip */
.lp-note { padding-block:20px clamp(28px,4vw,48px); }
.lp-note__inner { display:flex; align-items:center; gap:16px; padding:16px 20px; border-radius:16px; background:var(--bg-2); color:var(--ink-2); font-size:15px; }
.lp-note__inner p { margin:0; }
.lp-note__age { display:grid; flex:none; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--ink); color:var(--bg); font-weight:700; font-size:14px; }
.lp-note__link { display:inline-flex; flex:none; align-items:center; gap:6px; margin-left:auto; color:var(--ink); font-weight:600; font-size:14px; }
.lp-note__link:hover { color:var(--accent-ink); }

/* Category archives: the post list sits between the cards and the rows */
.lp-posts-head { margin-top:clamp(8px,2vw,16px); }
.lp-posts { padding-bottom:clamp(24px,3vw,40px); }

/* Homepage */
.landing--home { margin-top:clamp(24px,4vw,56px); border-top:1px solid var(--line); }
.landing--home .lp-hero__title { font-size:clamp(32px,4.2vw,54px); }

@media (max-width:860px) {
	.lp-hero { grid-template-columns:minmax(0,1fr); }
	.lp-toc ol { max-height:220px; }
	.lp-sec--odds, .lp-marks, .lp-module__grid--league { grid-template-columns:minmax(0,1fr); }
	.lp-sec__tool { position:static; }
	.lp-odds { grid-template-columns:1fr 1fr; }
	.lp-odds__out { grid-column:1 / -1; flex-direction:row; justify-content:space-between; }
}
@media (max-width:520px) {
	.lp-note__inner { flex-wrap:wrap; }
	.lp-note__link { margin-left:60px; }
	.lp-tile { height:64px; }
}
@media (prefers-reduced-motion:reduce) { .lp-card, .lp-tile, .lp-faq__caret { transition:none; } }