/* learndomainflipping.com
   Bar: https://ahrefs.com/academy (screenshotted 2026-10-05): dark top band, big light-weight
   grotesk display, flat course tiles with "N lessons · time", square buttons, no shadows.
   Avoid: cream bg, pill buttons, gradients, emoji icons, photo hero with scrim,
   rounded white cards with soft shadows, Poppins/Inter. */
:root{
  --ink:#111;--muted:#5b5b5b;--line:#dcdcdc;--bg:#fff;--band:#1b1b1b;--band-ink:#f2f2f2;
  --accent:#d4ff3a;--link:#0040e0;--tint:#f4f4f4;
  --display:"Familjen Grotesk",Arial,sans-serif;--body:"IBM Plex Sans",Arial,sans-serif;--mono:"IBM Plex Mono",monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18px/1.62 var(--body)}
a{color:var(--link)}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
code,.dom{font-family:var(--mono);font-size:.92em;background:var(--tint);padding:1px 5px}

/* header */
.top{background:var(--band);color:var(--band-ink)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;flex-wrap:wrap}
.brand{font:500 20px/1 var(--display);color:#fff;text-decoration:none;letter-spacing:-.01em}
.brand b{color:var(--accent);font-weight:500}
.nav{display:flex;gap:20px;flex-wrap:wrap}
.nav a{color:#cfcfcf;text-decoration:none;font-size:15px}
.nav a:hover,.nav a[aria-current]{color:#fff}

/* hero band */
.hero{background:var(--band);color:var(--band-ink);padding:56px 0 72px}
.hero h1{font:400 clamp(44px,8vw,80px)/.95 var(--display);letter-spacing:-.03em;margin:0 0 22px;max-width:14ch;color:#fff}
.hero p{max-width:40ch;margin:0 0 28px;color:#cfcfcf}
.btn{display:inline-block;background:var(--accent);color:#111;font:600 16px/1 var(--body);padding:14px 20px;border-radius:2px;text-decoration:none}
.btn:hover{background:#fff}
.meta{font-size:15px;color:var(--muted)}
.hero .meta{color:#9a9a9a;margin-left:14px}

/* course tiles */
.section{padding:64px 0}
.section h2{font:400 clamp(30px,4vw,40px)/1.05 var(--display);letter-spacing:-.02em;margin:0 0 28px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0;border-top:1px solid var(--ink);border-left:1px solid var(--line)}
.tile{display:block;padding:22px 22px 26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink)}
.tile:hover{background:var(--tint)}
.tile .n{font:500 14px/1 var(--mono);color:var(--muted)}
.tile h3{font:400 24px/1.12 var(--display);margin:14px 0 10px;letter-spacing:-.01em}
.tile p{font-size:16px;margin:0 0 14px;color:#333}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.math{overflow-wrap:anywhere;background:var(--band);color:var(--band-ink);padding:28px;font:400 16px/1.7 var(--mono)}
.math b{color:var(--accent);font-weight:500}

/* lesson pages */
.page{display:grid;grid-template-columns:minmax(0,720px) 240px;gap:56px;padding-top:40px;padding-bottom:72px}
.page.no-toc{grid-template-columns:minmax(0,720px)}
.page h1{font:400 clamp(36px,5vw,52px)/1.02 var(--display);letter-spacing:-.025em;margin:8px 0 18px}
.page h2{font:400 30px/1.1 var(--display);letter-spacing:-.015em;margin:44px 0 12px}
.page h3{font:600 19px/1.3 var(--body);margin:28px 0 6px}
.lede{font-size:21px;line-height:1.5;color:#222}
.crumbs{font-size:15px;color:var(--muted);margin:0}
.crumbs a{color:var(--muted)}
.key{border-left:4px solid var(--ink);background:var(--tint);padding:16px 20px;margin:26px 0}
.key p{margin:6px 0}
.warn{border-left-color:#e03b00}
table{border-collapse:collapse;width:100%;font-size:16px;margin:18px 0}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{border-bottom:1px solid var(--ink);font-weight:600}
.toc{position:sticky;top:20px;align-self:start;font-size:15px;border-top:1px solid var(--ink);padding-top:12px}
.toc b{display:block;font-weight:600;margin-bottom:8px}
.toc a{display:block;color:var(--muted);text-decoration:none;padding:4px 0}
.toc a:hover{color:var(--ink)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:56px;border-top:1px solid var(--ink)}
.pager a{padding:18px 0;text-decoration:none;color:var(--ink)}
.pager a span{display:block;font-size:14px;color:var(--muted)}
.pager .next{text-align:right;border-left:1px solid var(--line);padding-left:16px}
.signup{background:var(--band);color:var(--band-ink);padding:28px;margin-top:48px}
.signup h2{color:#fff;margin-top:0}

footer{border-top:1px solid var(--line);padding:32px 0 48px;font-size:15px;color:var(--muted)}

@media (max-width:820px){
  .page,.page.no-toc{grid-template-columns:1fr;gap:0}
  .toc{display:none}
  .split{grid-template-columns:1fr;gap:28px}
  .hero{padding:40px 0 52px}
  .hero .meta{display:block;margin:14px 0 0}
  .nav{gap:14px}
}