/* Service + feature landing pages (pages/landing/*). Tokens from studentflow.css. */
.lp-hero { padding-block: clamp(2.5rem, 6vw, 5rem); }
.lp-hero__grid { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .lp-hero__grid { grid-template-columns: 1.4fr .6fr; } }
.lp-eyebrow { background: var(--accent, var(--lime)); color: var(--accent-fg, var(--ink)); }
.lp-hero h1 { font-size: var(--fs-3xl); max-width: 18ch; }
.lp-answer { max-width: 62ch; color: #e6e6f2; }
.lp-hero__cta { margin-top: 1.25rem; }
.lp-verified { margin: 1.25rem 0 0; }
.lp-hero__art { display: grid; place-items: center; }
.lp-icon { width: clamp(150px, 22vw, 240px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 32%; background: var(--accent, var(--lime)); color: var(--accent-fg, var(--ink)); border: var(--bw) solid var(--white); box-shadow: 10px 10px 0 rgba(255,255,255,.18); transform: rotate(-6deg); }
.lp-icon .icon { width: 52%; height: 52%; stroke-width: 1.6; }
@media (prefers-reduced-motion: no-preference) { .lp-icon { animation: lp-bob 6s ease-in-out infinite; } }
@keyframes lp-bob { 50% { transform: rotate(-3deg) translateY(-8px); } }

.lp-notice { display: flex; gap: .85rem; align-items: flex-start; padding: 1rem 1.25rem; background: var(--yellow); color: var(--ink); border: var(--bw) solid var(--ink); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.lp-notice p { margin: 0; }
.lp-notice .icon { flex: none; margin-top: .15rem; }

.lp-facts { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); margin: 1.25rem 0 0; }
.lp-fact { background: var(--white); border: var(--bw) solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 1rem 1.15rem; }
.lp-fact dt { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--muted); margin-bottom: .35rem; }
.lp-fact dd { margin: 0; font-weight: 700; }

.lp-who { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.lp-who__item { display: flex; gap: .9rem; align-items: flex-start; background: var(--white); border: var(--bw) solid var(--ink); border-radius: var(--r-md); padding: 1rem 1.1rem; box-shadow: var(--shadow-sm); }
.lp-who__emoji { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; border: var(--bw) solid var(--ink); background: var(--lime); font-size: 1.3rem; flex: none; }
.lp-who__item h3 { font-size: var(--fs-base); margin: 0 0 .2rem; font-family: var(--font-body); font-weight: 800; letter-spacing: 0; }
.lp-who__item p { margin: 0; }

.lp-steps { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 1rem; counter-reset: s; }
.lp-steps li { display: grid; grid-template-columns: 52px 1fr; gap: 1rem; align-items: start; }
.lp-steps__n { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--accent, var(--lime)); color: var(--accent-fg, var(--ink)); border: var(--bw) solid var(--ink); font-family: var(--font-display); font-weight: 900; box-shadow: var(--shadow-sm); }
.lp-steps h3 { margin: 0 0 .25rem; font-size: var(--fs-lg); }
.lp-steps p { margin: 0; max-width: 70ch; }

.lp-inside { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 900px) { .lp-inside { grid-template-columns: 1.3fr .7fr; } }
.lp-ticks, .lp-checks, .lp-mistakes { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .65rem; }
.lp-ticks li, .lp-checks li, .lp-mistakes li { display: flex; gap: .65rem; align-items: flex-start; }
.lp-ticks li::before { content: "✓"; font-weight: 900; color: var(--lime); }
.lp-checks li::before { content: "☐"; font-weight: 900; }
.lp-mistakes li::before { content: "✕"; font-weight: 900; color: var(--red); }
.lp-honest { box-shadow: 6px 6px 0 var(--lime); color: var(--white); }
.lp-honest h3 { color: var(--white); }
.lp-honest a { color: var(--lime); }

.lp-official { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.lp-official a { height: 100%; display: flex; flex-direction: column; gap: .35rem; text-decoration: none; }
.lp-official__host { margin-top: auto; font-size: var(--fs-xs); font-weight: 800; color: var(--violet); display: inline-flex; gap: .3rem; align-items: center; }

.lp-related { list-style: none; padding: 0; margin: 1.25rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.lp-related--big { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.lp-rel { display: flex; gap: .9rem; align-items: center; background: var(--white); color: var(--ink); text-decoration: none; border: var(--bw) solid var(--ink); border-radius: var(--r-lg); padding: 1rem 1.1rem; box-shadow: var(--shadow-sm); transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.lp-rel:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.lp-rel strong, .lp-rel small { display: block; }
.lp-rel small { color: var(--muted); font-weight: 500; }
.lp-rel > .icon:last-child { margin-left: auto; flex: none; }
.lp-rel__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; border: var(--bw) solid var(--ink); background: var(--accent, var(--lime)); color: var(--accent-fg, var(--ink)); flex: none; }

/* a long unbreakable word in the h1 must never widen the hero column (phones) */
.lp-hero__grid > * { min-width: 0; }
.lp-hero h1 { overflow-wrap: anywhere; hyphens: auto; }
.lp-answer { overflow-wrap: break-word; }

/* shorter pages on phones: compact source cards, extra sources tucked in a disclosure */
.lp-official--compact { margin-top: .75rem; }
.lp-more { margin-top: 1rem; }
.lp-more > summary { cursor: pointer; font-weight: 800; padding: .75rem 1rem; min-height: 48px; display: flex; align-items: center; border: var(--bw) solid var(--ink); border-radius: var(--r-md); background: var(--white); box-shadow: var(--shadow-sm); list-style: none; }
.lp-more > summary::-webkit-details-marker { display: none; }
.lp-more[open] > summary { background: var(--lime); }
@media (max-width: 640px) {
  .lp-official a.card { padding: .85rem 1rem; box-shadow: var(--shadow-sm); }
  .lp-official .muted { font-size: var(--fs-sm); }
  .lp-steps li { grid-template-columns: 44px 1fr; gap: .75rem; }
  .lp-steps__n { width: 44px; height: 44px; border-radius: 13px; }
}