/* Athlete Insite landing pages. Matches win.athleteinsite.com: Poppins headlines with gold italic accents,
   Plus Jakarta Sans text, white / cream / navy sections, gold gradient buttons. */
:root {
  --ink: #000; --navy: #101935; --navy-2: #1a2550; --cream: #f9f6f3; --white: #fff;
  --muted: #434853; --line: #d6dfea; --gold: #cbaf68; --gold-lt: #e7d688; --gold-dk: #8f6b2c;
  --gold-grad: linear-gradient(to left bottom, oklch(0.547 0.095 70), oklch(0.623 0.097 76.8), oklch(0.697 0.098 83.2),
    oklch(0.772 0.1 89.5), oklch(0.848 0.102 95.6), oklch(0.856 0.101 96.2), oklch(0.864 0.1 96.7), oklch(0.873 0.1 97.4),
    oklch(0.817 0.098 92.9), oklch(0.763 0.096 88.6), oklch(0.708 0.095 84.1), oklch(0.655 0.094 79.6));
  --radius: 14px; --shadow: 0 10px 30px -12px rgba(16, 25, 53, .25);
  --display: 'Poppins', system-ui, sans-serif; --body: 'Plus Jakarta Sans', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 17px/1.6 var(--body); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
.wrap { width: min(1080px, 100% - 32px); margin: 0 auto; }
.narrow { width: min(780px, 100% - 32px); margin: 0 auto; }

/* gold banner + header */
.banner { background: var(--gold-grad); background-size: 200% 200%; animation: sheen 9s ease-in-out infinite; text-align: center;
  padding: 12px 16px; font: 600 clamp(14px, 2vw, 17px)/1.35 var(--body); }
.banner a { font-weight: 700; }
.top { background: var(--navy); color: #fff; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; flex-wrap: wrap; padding: 8px 0; }
.brand { font: 700 21px var(--display); text-decoration: none; letter-spacing: -.01em; }
.brand b { color: var(--gold); font-style: italic; }
.top nav { display: flex; gap: 18px; font-size: 15px; }
.top nav a { text-decoration: none; opacity: .85; } .top nav a:hover { opacity: 1; color: var(--gold-lt); }

/* type */
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.15; letter-spacing: -.015em; }
h1 { font: 700 clamp(32px, 5.4vw, 54px)/1.08 var(--display); }
h2 { font: 700 clamp(26px, 3.6vw, 38px)/1.15 var(--display); }
h3 { font: 700 20px/1.3 var(--body); }
.gold { color: var(--gold); font-style: italic; }
.navy .gold { color: var(--gold-lt); }
.lead { font-size: clamp(18px, 2.1vw, 21px); color: var(--muted); max-width: 680px; }
.center { text-align: center; } .center .lead { margin-left: auto; margin-right: auto; }
.chip { display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-dk); background: #fbf4df; border: 1px solid #ecdca9; padding: 8px 12px; border-radius: 999px; margin-bottom: 18px; }
.note { font-size: 14px; color: var(--muted); }

/* sections */
section { padding: clamp(56px, 8vw, 96px) 0; position: relative; }
.cream { background: var(--cream); }
.navy { background: var(--navy); color: #fff; }
.navy .lead, .navy .note { color: #c9cfe0; }
.hero { padding-top: clamp(44px, 6vw, 80px); overflow: hidden; }
.hero::before { content: ""; position: absolute; top: -260px; right: -180px; width: 620px; height: 620px; border-radius: 50%;
  border: 2px dashed rgba(203, 175, 104, .38); animation: spin 80s linear infinite; pointer-events: none; }
.hero::after { content: ""; position: absolute; bottom: -300px; left: -220px; width: 540px; height: 540px; border-radius: 50%;
  border: 2px dashed rgba(203, 175, 104, .22); animation: spin 120s linear infinite reverse; pointer-events: none; }
.hero .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.hero-photo { position: relative; }
.hero-photo img { border-radius: 22px; box-shadow: var(--shadow); aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.hero-photo .badge { position: absolute; left: -14px; bottom: 22px; background: #fff; border-radius: 14px; padding: 12px 16px;
  box-shadow: var(--shadow); font: 600 14px/1.3 var(--body); animation: float 5s ease-in-out infinite; max-width: 220px; }
.hero-photo .badge b { display: block; font: 700 26px/1 var(--display); color: var(--gold-dk); }

/* buttons */
.btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center;
  background: var(--gold-grad); background-size: 220% 220%; color: #000; font: 700 17px/1.2 var(--body); text-decoration: none;
  border: 0; border-radius: 10px; padding: 16px 28px; cursor: pointer; box-shadow: 0 8px 22px -8px rgba(143, 107, 44, .65);
  transition: transform .2s, box-shadow .2s; animation: sheen 7s ease-in-out infinite; min-height: 56px; }
.btn small { font-weight: 500; font-size: 13px; opacity: .8; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(143, 107, 44, .75); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn.ghost { background: transparent; color: inherit; border: 2px solid currentColor; box-shadow: none; animation: none; }
.btn.full { width: 100%; }
.btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
.center .btns { justify-content: center; }

/* cards + grids */
.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
  transition: transform .25s, box-shadow .25s, border-color .25s; }
a.card { text-decoration: none; display: block; }
a.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--gold); }
.navy .card { background: var(--navy-2); border-color: rgba(255,255,255,.1); color: #fff; }
.card .ico { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: #fbf4df; font-size: 23px; margin-bottom: 14px; }
.card .kw { font: 700 11px var(--body); letter-spacing: .14em; color: var(--gold-dk); }
.card h3 { margin: 6px 0 0; }
.card p { margin: .4em 0 0; color: var(--muted); font-size: 15px; }
.navy .card p { color: #c9cfe0; }
.card .go { margin-top: 14px; font-weight: 700; font-size: 14px; color: var(--gold-dk); }
.callout { border-left: 5px solid var(--gold); background: #fffaf0; border-radius: 0 var(--radius) var(--radius) 0; padding: 18px 20px; }

/* numbered steps */
.steps { counter-reset: s; display: grid; gap: 20px; }
.step { counter-increment: s; display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start; }
.step::before { content: counter(s); width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold-grad); font: 700 22px var(--display); color: #000; box-shadow: 0 6px 16px -8px rgba(143,107,44,.7); }
.step h3 { margin: 10px 0 4px; } .step p { margin: 0; color: var(--muted); }
.navy .step p { color: #c9cfe0; }

/* timeline */
.tl { position: relative; padding-left: 36px; }
.tl::before { content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: linear-gradient(var(--gold), var(--gold-lt)); }
.tl-item { position: relative; margin-bottom: 18px; }
.tl-item::before { content: ""; position: absolute; left: -33px; top: 26px; width: 19px; height: 19px; border-radius: 50%; background: #fff; border: 4px solid var(--gold); }
.tl-item .when { font: 700 12px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-dk); }
.tl-item ul { margin: 8px 0 0; padding-left: 20px; } .tl-item li { margin: 5px 0; }
.year { display: inline-block; background: var(--navy); color: #fff; font: 700 15px var(--display); padding: 8px 16px; border-radius: 999px; margin: 10px 0 18px -36px; position: relative; }

/* template boxes */
.tpl { position: relative; background: var(--navy); color: #eef1f8; border-radius: var(--radius); padding: 22px; font: 500 15.5px/1.65 var(--body);
  white-space: pre-wrap; box-shadow: var(--shadow); overflow-wrap: anywhere; }
.tpl .fill { color: var(--gold-lt); font-weight: 700; }
.tpl-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 26px 0 10px; flex-wrap: wrap; }
.tpl-head h3 { margin: 0; }
.copy { background: #fff; border: 2px solid var(--navy); color: var(--navy); border-radius: 10px; padding: 10px 18px; font: 700 15px var(--body);
  cursor: pointer; transition: background .2s, color .2s; min-height: 46px; }
.copy:hover { background: var(--navy); color: #fff; }
.copy.done { background: #1f7a4a; border-color: #1f7a4a; color: #fff; }

/* forms */
form { display: grid; gap: 14px; }
.row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
label { display: grid; gap: 6px; font: 600 15px var(--body); }
label .opt { font-weight: 500; color: var(--muted); font-size: 13px; }
input, select { width: 100%; font: 500 16px var(--body); padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; color: #000; min-height: 50px; }
input:focus, select:focus { outline: 3px solid rgba(203,175,104,.45); border-color: var(--gold); }
.check { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.check input { width: 22px; height: 22px; min-height: 22px; margin-top: 2px; flex: none; accent-color: var(--gold-dk); }
.check a { color: var(--muted); }
.fieldset-label { font: 600 15px var(--body); margin-bottom: -4px; }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pill { display: inline-block; position: relative; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill span { display: inline-flex; align-items: center; padding: 10px 16px; border: 1.5px solid var(--line); border-radius: 999px; font: 600 15px var(--body); cursor: pointer; transition: .2s; min-height: 44px; background: #fff; }
.pill input:checked + span { background: var(--navy); color: #fff; border-color: var(--navy); }
.pill input:focus-visible + span { outline: 3px solid rgba(203,175,104,.6); }
.hp { position: absolute; left: -9999px; }
.msg { font-weight: 600; margin: 0; min-height: 1em; } .msg.err { color: #b3261e; } .msg.ok { color: #1f7a4a; }

/* quiz */
.quiz { background: #fff; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); padding: clamp(20px, 4vw, 36px); color: #000; }
.bar { height: 8px; background: #eef1f6; border-radius: 99px; overflow: hidden; margin-bottom: 22px; }
.bar i { display: block; height: 100%; width: 25%; background: var(--gold-grad); transition: width .5s cubic-bezier(.2,.8,.2,1); }
.qstep { display: none; } .qstep.on { display: grid; gap: 16px; animation: rise .45s ease both; }
.qstep h3 { margin: 0; font: 700 22px var(--display); }
.qnav { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; }
.qnav .btn { flex: 1; }
.qcount { font: 700 12px var(--body); letter-spacing: .14em; color: var(--gold-dk); text-transform: uppercase; }

/* results */
.result-head { text-align: center; margin-bottom: 18px; }
.level-badge { display: inline-block; margin: 10px auto 6px; background: var(--gold-grad); color: #000; padding: 12px 22px; border-radius: 999px; font: 700 clamp(18px, 2.5vw, 24px)/1.25 var(--display); }
.school { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; padding: 13px 0; border-bottom: 1px solid var(--line); animation: rise .5s ease both; }
.school:last-child { border-bottom: 0; }
.school b { font-size: 16.5px; } .school .meta { color: var(--muted); font-size: 14px; grid-column: 1; }
.school .tag { grid-row: 1 / span 2; grid-column: 2; align-self: center; font: 700 12px var(--body); padding: 6px 10px; border-radius: 999px; background: #eef1f6; color: var(--navy); white-space: nowrap; }
.bucket { margin: 22px 0 2px; font: 700 13px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-dk); }
.bucket small { display: block; letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--muted); font-size: 13px; }
.mapbox { background: var(--navy); border-radius: 18px; padding: 8px; margin: 10px 0 20px; }
.mapbox svg { width: 100%; height: auto; display: block; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; text-align: center; }
.stat b { display: block; font: 700 clamp(34px, 5vw, 48px)/1 var(--display); color: var(--gold-lt); }
.stat span { color: #c9cfe0; font-size: 15px; }

/* about */
.about { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 5vw, 56px); align-items: center; }
.about img { border-radius: 20px; box-shadow: var(--shadow); aspect-ratio: 1/1; object-fit: cover; width: 100%; }

/* table */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; background: #fff; font-size: 15px; min-width: 460px; }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--navy); color: #fff; font-weight: 700; }
tr:last-child td { border-bottom: 0; }

/* footer + sticky bar */
footer { background: #0a1026; color: #aab2c8; padding: 40px 0 110px; font-size: 14px; }
footer a { color: #fff; } footer .wrap { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; }
.sticky { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; display: none; transform: translateY(140%); transition: transform .35s ease; }
.sticky.show { transform: none; }
.sticky .btn { width: 100%; padding: 12px 18px; min-height: 52px; }
@media (max-width: 760px) {
  .hero-grid, .about { grid-template-columns: 1fr; }
  .hero-photo { max-width: 360px; margin: 0 auto; width: 100%; } .hero-photo .badge { left: 10px; }
  .top nav { gap: 14px; font-size: 14px; }
  .sticky { display: block; }
  .btns .btn { width: 100%; }
  .step { grid-template-columns: 44px 1fr; } .step::before { width: 44px; height: 44px; font-size: 19px; }
  .hero::before { width: 260px; height: 260px; top: -165px; right: -150px; }   /* seams sit in opposite corners, like desktop */
  .hero::after { width: 260px; height: 260px; bottom: -175px; left: -150px; }
}

/* minimal page chrome (one offer per page) */
.top.solo .wrap { justify-content: center; min-height: 56px; }
footer.solo { padding: 28px 0 32px; }

/* the gate: content blurred, unlock box stays on screen while they scroll */
.gated { position: relative; }
.gated .locked { filter: blur(7px); user-select: none; pointer-events: none; transition: filter .9s ease; }
.gated.open .locked { filter: none; user-select: auto; pointer-events: auto; }
.gate-layer { position: absolute; inset: 0; z-index: 5; background: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.35)); }
.gated.open .gate-layer { display: none; }
.gate { position: sticky; top: max(16px, calc(50vh - 290px)); margin: 24px auto 0; width: min(460px, 100% - 24px);
  background: #fff; border: 1px solid var(--line); border-top: 6px solid var(--gold); border-radius: 18px; padding: 22px 22px 18px;
  box-shadow: 0 30px 70px -20px rgba(16, 25, 53, .55); animation: rise .6s cubic-bezier(.2,.8,.2,1) both; }
.gate h3 { font: 700 24px/1.2 var(--display); margin: 0 0 4px; }
.gate .sub { margin: 0 0 14px; color: var(--muted); font-size: 15px; }
.gate form { gap: 10px; }
.gate input { min-height: 46px; padding: 11px 13px; }
.gate .check { font-size: 12px; }
.gate .fine { font-size: 12px; color: var(--muted); text-align: center; margin: 2px 0 0; }
.gate .lock { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fbf4df; font-size: 19px; margin-bottom: 8px; }
.unlocked-note { display: flex; gap: 14px; align-items: center; background: var(--navy); color: #fff; border-radius: 16px; padding: 16px 18px; margin-bottom: 26px; animation: rise .6s both; }
.unlocked-note .ring { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-grad); font-size: 21px; animation: ring 1.6s ease-in-out infinite; }
.unlocked-note b { color: var(--gold-lt); }
.next-step { text-align: center; padding: 36px 0 8px; }
.skeleton { display: grid; gap: 14px; padding: 6px 0; }
.skeleton div { height: 54px; border-radius: 12px; background: linear-gradient(90deg, #eef1f6, #f7f8fb, #eef1f6); }
@keyframes ring { 0%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-14deg); } 20%, 40% { transform: rotate(14deg); } 50% { transform: rotate(0); } }
@media (max-width: 760px) { .gate { top: 10px; padding: 18px 16px 14px; } .gate h3 { font-size: 21px; } }

/* motion */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.hero .reveal { opacity: 1; transform: none; animation: rise .8s cubic-bezier(.2,.8,.2,1) both; }
.hero .reveal.d2 { animation-delay: .15s; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; }
@keyframes sheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { r: 0; } 70% { r: 7; } 100% { r: 5; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

.logo { height: 44px; width: auto; display: block; }
@media (max-width: 760px) { .logo { height: 38px; } }

/* LIST quiz: clear on/off level pills, distance cards, live coach counter */
.pill span { background: #f1f3f6; color: #8a92a3; border-color: #e3e7ee; text-decoration: line-through; text-decoration-color: rgba(138,146,163,.6); }
.pill input:checked + span { background: var(--navy); color: #fff; border-color: var(--navy); text-decoration: none; }
.pill input:checked + span::before { content: "✓"; margin-right: 7px; color: var(--gold-lt); font-weight: 800; }
.opt-cards { display: grid; gap: 10px; }
.opt-card { position: relative; display: block; cursor: pointer; }
.opt-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt-card > span { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 16px; border: 2px solid var(--line); border-radius: 14px; background: #fff; transition: border-color .2s, box-shadow .2s, background .2s; }
.opt-card b { font: 700 16px var(--body); grid-column: 1; }
.opt-card small { grid-column: 1; color: var(--muted); font-size: 13.5px; font-weight: 500; }
.opt-card .cnt { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 700 13px var(--body); font-style: normal; color: var(--navy); background: #eef1f6; border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
.opt-card .cnt:empty { display: none; }
.opt-card input:checked + span { border-color: var(--gold); background: #fffaf0; box-shadow: 0 8px 22px -14px rgba(143,107,44,.8); }
.opt-card input:focus-visible + span { outline: 3px solid rgba(203,175,104,.6); }
.rec { font-style: normal; font: 700 11px var(--body); letter-spacing: .06em; text-transform: uppercase; color: #000; background: var(--gold-grad); border-radius: 999px; padding: 3px 8px; margin-left: 6px; vertical-align: 2px; white-space: nowrap; }
.counter { border-radius: 12px; padding: 12px 14px; font-weight: 600; font-size: 15px; background: #eef1f6; color: var(--navy); transition: background .3s, color .3s; }
.counter.good { background: #e8f5ee; color: #1f6b43; }
.counter.low { background: #fdecea; color: #9b2c22; }
.counter b { font-size: 18px; }

/* opening "step 1" visuals */
.formula { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 16px; }
.f-card { position: relative; background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: 18px 16px 16px; text-align: center; }
.f-card:nth-child(2) { border-color: #e9dcb3; } .f-card:nth-child(3) { border-color: var(--gold); box-shadow: 0 10px 26px -14px rgba(143,107,44,.7); }
.f-num { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--gold-grad); font: 700 15px var(--display); color: #000; }
.f-emoji { display: block; font-size: 30px; line-height: 1; margin: 6px 0 6px; }
.f-card b { display: block; font: 700 17px var(--body); }
.f-ex { display: inline-block; margin: 8px 0 6px; background: var(--navy); color: var(--gold-lt); font: 700 16px var(--display); padding: 6px 12px; border-radius: 8px; }
.f-card p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.inbox { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.inbox-label { display: block; background: #f4f6fa; padding: 9px 14px; font: 700 12px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.inbox-row { display: flex; gap: 12px; align-items: center; padding: 14px 16px; }
.inbox-row .dot { width: 10px; height: 10px; border-radius: 50%; background: #2f6fed; flex: none; }
.inbox-row b { display: block; font-size: 15px; }
.inbox-row .subj { font-size: 17px; font-weight: 700; }
.inbox mark { background: linear-gradient(transparent 55%, rgba(231,214,136,.85) 55%); color: inherit; padding: 0 2px; }
.learn { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.learn span { background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 10px 14px; font: 600 15px var(--body); }
.dates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.date-card { background: var(--navy); color: #fff; border-radius: 16px; padding: 18px 14px; text-align: center; }
.date-card .lvl { display: inline-block; font: 700 12px var(--body); letter-spacing: .1em; color: #000; background: var(--gold-grad); border-radius: 999px; padding: 4px 10px; }
.date-card b { display: block; font: 700 clamp(26px, 4.4vw, 34px)/1.1 var(--display); color: var(--gold-lt); margin: 10px 0 2px; }
.date-card small { color: #c9cfe0; font-size: 13.5px; }
.bars { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px; margin-top: 14px; box-shadow: var(--shadow); }
.bar-row { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: center; margin: 8px 0; font-weight: 600; }
.bar-track { height: 26px; background: #f1f3f6; border-radius: 8px; overflow: hidden; }
.bar-track i { display: block; height: 100%; width: 0; background: var(--gold-grad); border-radius: 8px; transition: width 1.2s cubic-bezier(.2,.8,.2,1) .2s; }
.bar-row.out .bar-track i { background: #b9c0cf; }
.bars.in .bar-track i { width: var(--w); }
.bar-row b { font: 700 18px var(--display); min-width: 82px; text-align: right; }
.bars-total { margin: 12px 0 0; font-size: 17px; text-align: center; } .bars-total strong { color: var(--gold-dk); font-size: 21px; }
@media (max-width: 760px) {
  .formula, .dates { grid-template-columns: 1fr; gap: 18px; }
  .f-card { display: grid; grid-template-columns: 44px 1fr auto; text-align: left; gap: 2px 12px; align-items: center; padding: 16px 14px; }
  .f-num { position: static; transform: none; grid-row: 1 / span 2; }
  .f-emoji { display: none; } .f-ex { grid-column: 3; grid-row: 1; margin: 0; font-size: 14px; }
  .f-card p { grid-column: 2 / span 2; }
  .bar-row { grid-template-columns: 82px 1fr auto; }
}
.bar-row > span { white-space: nowrap; font-size: 15px; }
/* labels size themselves, so the bar can never run under "Out-of-state" */
.bar-row, .bar-row.out { grid-template-columns: max-content minmax(40px, 1fr) max-content !important; gap: 12px; }
@media (max-width: 760px) { .bar-row, .bar-row.out { gap: 8px; } .bar-row > span { font-size: 13.5px; } .bar-row b { font-size: 15px; min-width: 0; } }

/* ---------- guide body visuals ---------- */
.locked > .chip { margin-top: 8px; }
.fill-card .row { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.fill-card label { font-size: 13.5px; } .fill-card input { min-height: 44px; padding: 10px 12px; }
.mail { margin-top: 18px; background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px -24px rgba(16,25,53,.45); }
.mail-bar { display: flex; gap: 7px; align-items: center; background: var(--navy); padding: 11px 14px; color: #c9cfe0; font-size: 13px; font-weight: 600; }
.mail-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .mail-bar i:nth-child(2) { background: #febc2e; } .mail-bar i:nth-child(3) { background: #28c840; }
.mail-bar span { margin-left: 8px; }
.mail-field { display: flex; gap: 10px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 15px; flex-wrap: wrap; }
.mail-field > span { color: var(--muted); width: 58px; font-size: 13px; font-weight: 600; }
.subj-field b { flex: 1; min-width: 160px; }
.mail-body { padding: 18px 16px; white-space: pre-wrap; font-size: 15.5px; line-height: 1.7; overflow-wrap: anywhere; }
.mail-body .fill, .mail-field .fill { background: #fbf4df; color: #6b4f16; font-weight: 700; border-radius: 5px; padding: 0 3px; }
.mail-foot { padding: 14px 16px; border-top: 1px solid var(--line); background: #fafbfd; }
.mail-foot .btn { width: 100%; }
.copy.sm { padding: 6px 12px; min-height: 36px; font-size: 13px; }
.anno { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gold-grad); color: #000; font: 700 13px var(--display); vertical-align: middle; flex: none; }
.annos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 16px; }
.anno-card { display: flex; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.anno-card .anno { width: 32px; height: 32px; font-size: 15px; }
.anno-card b { font-size: 16.5px; } .anno-card p { margin: 3px 0 0; color: var(--muted); font-size: 14.5px; }
.weeks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0; position: relative; }
.week { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 10px; text-align: center; }
.week span { display: inline-block; font: 700 11.5px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dk); }
.week b { display: block; font-size: 30px; margin: 6px 0; } .week p { margin: 0; font-weight: 600; font-size: 14px; }
.big-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.big-stat { background: var(--navy); color: #fff; border-radius: 16px; padding: 20px; }
.big-stat b { display: block; font: 700 46px/1 var(--display); color: var(--gold-lt); margin-bottom: 8px; }
.big-stat p { margin: 0; color: #c9cfe0; font-size: 14.5px; }
.phone { max-width: 520px; margin: 18px auto 0; background: #0b1128; border-radius: 30px; padding: 12px; box-shadow: 0 30px 70px -26px rgba(16,25,53,.7); }
.phone-top { display: flex; gap: 12px; align-items: center; padding: 10px 12px 14px; color: #fff; }
.phone-top .avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #1f2a55; font-size: 20px; }
.phone-top b { display: block; } .phone-top small { color: #8f99b8; font-size: 12.5px; }
.phone-top .live { margin-left: auto; color: #4ade80; font-size: 12.5px; font-weight: 700; animation: blink 1.6s ease-in-out infinite; }
.chat { background: #f4f6fb; border-radius: 22px; padding: 16px 12px; display: grid; gap: 10px; }
.msg-row { display: flex; } .msg-row.you { justify-content: flex-end; }
.bubble { max-width: 84%; padding: 11px 14px; border-radius: 18px; font-size: 15px; line-height: 1.45; position: relative; }
.coach .bubble { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 6px; color: var(--muted); }
.you .bubble { background: var(--gold-grad); color: #000; font-weight: 600; border-bottom-right-radius: 6px; }
.bubble .num { position: absolute; left: -10px; top: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: var(--gold-lt); display: grid; place-items: center; font: 700 12px var(--display); }
.phone-foot { padding: 12px 6px 4px; text-align: center; } .phone-foot .copy { background: transparent; color: #fff; border-color: #fff; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: pre; }
.tree { margin-top: 18px; text-align: center; }
.tree-q { display: inline-block; background: var(--navy); color: #fff; font: 700 18px var(--display); padding: 14px 20px; border-radius: 14px; position: relative; }
.tree-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; position: relative; }
.tree-split::before { content: ""; position: absolute; top: -28px; left: 25%; right: 25%; height: 18px; border: 2px solid var(--gold); border-bottom: 0; border-radius: 12px 12px 0 0; }
.tree-a { background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: 16px; text-align: left; }
.tree-a span { font-weight: 800; font-size: 15px; } .tree-a p { margin: 8px 0 0; font-weight: 600; font-size: 16px; }
.tree-a.yes { border-color: #9fd8b5; } .tree-a.no { border-color: #f2b8b0; }
.tree-sub { margin-top: 10px; background: #fffaf0; border-radius: 10px; padding: 10px; font-size: 14.5px; }
.notepad { margin-top: 16px; background: #fffdf5; border: 1px solid #efe3bd; border-radius: 16px; padding: 10px 18px; box-shadow: var(--shadow);
  background-image: repeating-linear-gradient(transparent 0 47px, #efe3bd 47px 48px); }
.notepad label, .checks label { display: flex; gap: 12px; align-items: center; min-height: 48px; font-weight: 600; font-size: 16px; cursor: pointer; }
.notepad input, .checks input { width: 22px; height: 22px; min-height: 22px; accent-color: var(--gold-dk); flex: none; }
.checks label { min-height: 40px; font-weight: 500; font-size: 15.5px; align-items: flex-start; padding: 6px 0; }
.checks input { margin-top: 2px; }
.checks input:checked + span, .notepad input:checked + span { text-decoration: line-through; color: var(--muted); }
.season { font-size: 18px; margin-right: 8px; vertical-align: -2px; }
.tl-item .when { font-size: 14px; }
.year { font-size: 16px; padding: 10px 18px; }
.behind { margin-top: 18px; background: var(--navy); color: #fff; border-radius: 16px; padding: 18px 20px; }
.behind b { color: var(--gold-lt); font-size: 18px; } .behind p { margin: 6px 0 0; color: #c9cfe0; }
.way { margin-bottom: 52px; }
.ladder { display: grid; gap: 10px; margin-top: 14px; }
.rung { display: grid; grid-template-columns: auto 1fr auto; gap: 2px 14px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.rung .tag { grid-row: 1 / span 2; font: 700 11.5px var(--body); letter-spacing: .08em; text-transform: uppercase; background: #eef1f6; color: var(--navy); padding: 6px 10px; border-radius: 999px; }
.rung b { font-size: 16.5px; } .rung p { margin: 0; color: var(--muted); font-size: 14px; grid-column: 2; }
.rung em { grid-row: 1 / span 2; grid-column: 3; font-style: normal; font-size: 20px; }
.rung.hot { border: 2px solid var(--gold); background: #fffaf0; box-shadow: 0 10px 26px -14px rgba(143,107,44,.7); }
.rung.hot .tag { background: var(--gold-grad); color: #000; }
.rung small { grid-column: 2 / span 2; color: var(--gold-dk); font-weight: 700; font-size: 13px; }
.gpa { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin-top: 14px; }
.gpa > div:not(.arrow) { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px; text-align: center; }
.gpa span { font: 700 12px var(--body); letter-spacing: .1em; color: var(--muted); }
.gpa b { display: block; font: 700 40px/1.1 var(--display); margin: 4px 0; } .gpa p { margin: 0; font-size: 14.5px; color: var(--muted); }
.gpa .hot { border: 2px solid var(--gold) !important; background: #fffaf0 !important; } .gpa .hot b { color: var(--gold-dk); }
.arrow { font-size: 26px; color: var(--gold-dk); text-align: center; }
.stack { display: grid; gap: 8px; margin-top: 14px; max-width: 520px; }
.blk { border-radius: 12px; padding: 14px 16px; font-weight: 700; font-size: 16px; }
.blk.a { background: var(--navy); color: #fff; } .blk.b { background: #2b3a73; color: #fff; } .blk.c { background: #4a5a96; color: #fff; }
.plus { text-align: center; font: 700 20px var(--display); color: var(--gold-dk); line-height: 1; }
.eq { background: var(--gold-grad); color: #000; border-radius: 12px; padding: 14px 16px; font: 700 17px var(--display); text-align: center; }
.sticker { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin-top: 14px; }
.tag-price { background: #fff; border: 1px dashed #b9c0cf; border-radius: 16px; padding: 18px; text-align: center; }
.tag-price span { display: block; font-size: 13px; font-weight: 600; color: var(--muted); }
.tag-price b { display: block; font: 700 20px var(--display); margin-top: 6px; }
.tag-price .strike { text-decoration: line-through; color: #9aa2b3; }
.tag-price.net { border: 2px solid var(--gold); background: #fffaf0; } .tag-price.net b { color: var(--gold-dk); }
.offers { display: flex; gap: 12px; margin-top: 14px; }
.offer { flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 10px; text-align: center; font-weight: 700; }
.offer small { display: block; color: var(--gold-dk); font-size: 12.5px; margin-top: 4px; }
.offer.win { border: 2px solid var(--gold); background: #fffaf0; transform: translateY(-6px); box-shadow: 0 10px 26px -14px rgba(143,107,44,.7); }
.limits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.limit { background: var(--navy); color: #fff; border-radius: 16px; padding: 16px; }
.limit span { font: 700 11.5px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--gold-lt); }
.limit b { display: block; font: 700 44px/1 var(--display); margin: 8px 0 6px; }
.limit p { margin: 0; color: #c9cfe0; font-size: 13.5px; }
.limit.zero { background: #fff; color: #000; border: 1px solid var(--line); } .limit.zero span { color: var(--gold-dk); } .limit.zero p { color: var(--muted); } .limit.zero b { color: #9aa2b3; }
@keyframes blink { 50% { opacity: .45; } }
@media (max-width: 760px) {
  .annos, .big-stats, .tree-split { grid-template-columns: 1fr; }
  .tree-split::before { display: none; } .tree-split { margin-top: 14px; }
  .weeks { grid-template-columns: repeat(2, 1fr); }
  .limits { grid-template-columns: repeat(2, 1fr); }
  .gpa, .sticker { grid-template-columns: 1fr; } .gpa .arrow, .sticker .arrow { transform: rotate(90deg); }
  .offers { gap: 8px; } .offer { padding: 14px 6px; font-size: 14px; }
  .phone { border-radius: 24px; padding: 8px; }
}
.bar-row, .bar-row.out { grid-template-columns: 7.4em minmax(40px, 1fr) max-content !important; }
@media (max-width: 760px) {
  .rung { grid-template-columns: 1fr auto; padding: 12px 14px; }
  .rung .tag { grid-row: auto; grid-column: 1 / -1; justify-self: start; margin-bottom: 4px; }
  .rung b { grid-column: 1; } .rung p { grid-column: 1; } .rung em { grid-column: 2; grid-row: 2 / span 2; }
  .rung small { grid-column: 1 / -1; }
}

/* ---------- Nov 11 trim pass ---------- */
.byline { display: flex; gap: 10px; align-items: center; justify-content: center; font-size: 14px; color: var(--muted); margin: 6px 0 0; }
.byline img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); }
.gate .sub { font-weight: 600; color: var(--navy); background: #fffaf0; border-radius: 10px; padding: 10px 12px; }
.legal { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 14px 0 0; }
/* cost bars: one shared grid, so both bars start at exactly the same spot */
.bars { display: grid; grid-template-columns: max-content minmax(40px, 1fr) max-content; gap: 12px 12px; align-items: center; }
.bars .bar-row { display: contents; }
.bars .bar-row > span { white-space: nowrap; font-weight: 600; }
.bars .bars-total { grid-column: 1 / -1; }
.bar-track.out i { background: #b9c0cf; }
/* call screen */
.callscreen { max-width: 440px; margin: 18px auto 0; background: linear-gradient(180deg, #0b1128, #172150); border-radius: 36px; padding: 26px 18px 18px; color: #fff; box-shadow: 0 30px 70px -26px rgba(16,25,53,.75); text-align: center; }
.cs-avatar { width: 92px; height: 92px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; background: #24306a; font-size: 42px; position: relative; }
.cs-avatar::before, .cs-avatar::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(231,214,136,.5); animation: pulse 2.4s ease-out infinite; }
.cs-avatar::after { animation-delay: 1.2s; }
.cs-top b { display: block; font: 700 22px var(--display); } .cs-top small { color: #9aa4c4; font-size: 13.5px; }
.cs-timer { display: block; margin-top: 6px; color: #4ade80; font: 600 15px var(--body); letter-spacing: .05em; }
.cs-script { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 22px; padding: 10px; margin: 18px 0; text-align: left; display: grid; gap: 6px; }
.line { display: flex; gap: 12px; align-items: flex-start; padding: 10px 10px; border-radius: 14px; }
.line .ln { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 14px var(--display); }
.line p { margin: 0; font-size: 15.5px; line-height: 1.45; }
.line.say .ln { background: var(--gold-grad); color: #000; } .line.say p { font-weight: 600; color: #fff; }
.line.listen { background: rgba(255,255,255,.04); } .line.listen .ln { background: transparent; font-size: 17px; } .line.listen p { color: #9aa4c4; font-style: italic; font-size: 14.5px; }
.cs-controls { display: flex; justify-content: space-around; gap: 6px; margin: 4px 0 14px; }
.cs-controls span { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.1); font-size: 22px; position: relative; }
.cs-controls small { position: absolute; bottom: -20px; font-size: 11px; color: #9aa4c4; }
.cs-controls .end { background: #ef4444; } .cs-controls .end { transform: rotate(135deg); } .cs-controls .end small { transform: rotate(-135deg); bottom: auto; top: -20px; }
.cs-copy { margin-top: 18px; width: 100%; background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
@keyframes pulse { from { transform: scale(.92); opacity: .9; } to { transform: scale(1.35); opacity: 0; } }
/* real map */
.realmap { height: 380px; border-radius: 18px; overflow: hidden; margin: 10px 0 20px; border: 1px solid var(--line); z-index: 0; }
.school-pin span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; font: 700 12px var(--body); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.home-pin span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gold-grad); font-size: 17px; border: 2px solid #fff; box-shadow: 0 0 0 6px rgba(203,175,104,.35); }
@media (max-width: 760px) { .realmap { height: 320px; } .cs-controls span { width: 52px; height: 52px; } }
.cs-controls .end { transform: none; } .cs-controls .end small { transform: none; top: auto; bottom: -20px; }

/* ---------- Nov 11 pass 2 ---------- */
/* call screen: the script is the star */
.cs-script { background: transparent; border: 0; padding: 0; gap: 10px; }
.line.say { background: #fff; border-radius: 16px; padding: 14px 14px; box-shadow: 0 10px 24px -14px rgba(0,0,0,.6); }
.line.say p { color: #0b1128; font-size: 17px; font-weight: 700; line-height: 1.4; }
.line.say .ln { width: 34px; height: 34px; font-size: 17px; }
.line.listen { background: transparent; padding: 4px 14px; } .line.listen p { color: #b8c1dc; font-size: 14.5px; }
.cs-copy { margin-top: 6px; font-size: 18px; }
/* "You're in!" popup */
.callpop { position: fixed; inset: 0; z-index: 100; background: rgba(11,17,40,.62); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 16px; animation: fadein .25s ease both; }
.callpop.bye { animation: fadeout .25s ease both; }
.callpop-card { width: min(400px, 100%); background: #fff; border-radius: 22px; border-top: 6px solid var(--gold); padding: 28px 24px 22px; text-align: center; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); animation: rise .45s cubic-bezier(.2,.8,.2,1) both; }
.callpop-card h3 { font: 700 28px var(--display); margin: 12px 0 2px; }
.callpop-card .cp-main { font: 700 20px var(--body); color: var(--gold-dk); margin: 0 0 8px; }
.callpop-card p { margin: 0 0 18px; color: var(--muted); font-size: 16px; }
.ring.big { display: inline-grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--gold-grad); font-size: 34px; animation: ring 1.6s ease-in-out infinite; }
@keyframes fadein { from { opacity: 0; } } @keyframes fadeout { to { opacity: 0; } }
/* masterclass block */
.mc { margin-top: 56px; display: grid; grid-template-columns: .85fr 1.15fr; background: var(--navy); color: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 70px -28px rgba(16,25,53,.75); }
.mc-photo { position: relative; min-height: 260px; }
.mc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mc-live { position: absolute; top: 14px; left: 14px; background: #ef4444; color: #fff; font: 800 12px var(--body); letter-spacing: .08em; padding: 6px 10px; border-radius: 999px; animation: blink 1.6s ease-in-out infinite; }
.mc-body { padding: 28px 26px 24px; }
.mc-tag { display: inline-block; background: var(--gold-grad); color: #000; font: 800 12px var(--body); letter-spacing: .12em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; margin: 0 0 12px; }
.mc h2 { color: #fff; font-size: clamp(24px, 3.2vw, 32px); margin-bottom: 14px; }
.mc .gold { color: var(--gold-lt); }
.mc-list { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.mc-list li { position: relative; padding-left: 32px; font-weight: 600; font-size: 16.5px; }
.mc-list li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--gold-grad); color: #000; display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.mc-btn { font-size: 19px; padding: 16px 20px; }
.mc-btn small { font-size: 13px; opacity: .85; }
.mc-fine { margin: 12px 0 0; font-size: 13px; color: #aab3cf; text-align: center; }
@media (max-width: 760px) { .mc { grid-template-columns: 1fr; } .mc-photo { min-height: 220px; } .mc-body { padding: 22px 18px 20px; } }
.callscreen .cs-copy { background: var(--gold-grad) !important; background-size: 220% 220% !important; color: #000 !important; border: 0 !important; width: 100%; box-shadow: 0 10px 26px -10px rgba(231,214,136,.55); }
.mc-photo img { object-position: 62% 40%; }
.mc-photo img { object-position: 50% 45%; }
.mc-photo { min-height: 300px; }

/* ---- community join page (m/community) ---- */
.sk-banner { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 18px 40px rgba(16,25,53,.18); }
.lessons { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.lesson { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px solid #ece6d6; border-radius: 14px; background: #fff; }
.lesson.extra { margin-top: 10px; background: #fbf4df; border-color: #f0e2b6; }
.lesson .l-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fbf4df; font-size: 19px; }
.lesson.extra .l-ico { background: #fff; }
.lesson b { display: block; font-weight: 800; }
.lesson p { margin: 2px 0 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
.sk-app { border: 1px solid #e5e7eb; border-radius: 16px; background: #f8f7f4; overflow: hidden; }
.sk-top { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: 14px 18px; background: #fff; border-bottom: 1px solid #e5e7eb; font-size: 14px; color: #6b7280; }
.sk-top b { color: #111; margin-right: auto; font-size: 15px; }
.sk-top .on { color: #111; font-weight: 700; border-bottom: 2px solid #111; padding-bottom: 2px; }
.sk-grid { display: grid; gap: 14px; padding: 18px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.sk-card { background: #fff; border-radius: 12px; overflow: hidden; border: 1px solid #e5e7eb; }
.sk-card img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.sk-card > div { padding: 10px 12px 12px; }
.sk-card b { font-size: 14px; }
.sk-card p { margin: 4px 0 8px; font-size: 12px; color: #6b7280; line-height: 1.35; }
.sk-card i { display: block; height: 6px; border-radius: 3px; background: #e5e7eb; }
.sk-card small { font-size: 11px; color: #6b7280; }
.sk-feed { padding: 0 18px 18px; display: grid; gap: 10px; }
.sk-post { display: flex; gap: 10px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px; font-size: 13px; }
.sk-post i { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #c9a227; }
.sk-post p { margin: 2px 0 0; color: #6b7280; }

/* footer: links to every free tool (also helps search engines find them) */
.more { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; padding-top: 14px; margin-top: 4px; border-top: 1px solid rgba(255,255,255,.12); }
.more a { color: #aab2c8; text-decoration: none; } .more a:hover { color: #fff; text-decoration: underline; }