*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Georgia,'Times New Roman',serif;line-height:1.8;color:#222;background:#f4f1eb}
.css-5cvt27h{max-width:1100px;margin:0 auto;padding:0 24px}
.css-cowbxgw{background:linear-gradient(135deg,#2c3e50,#34495e);color:#fff;padding:48px 0;text-align:center;margin-bottom:48px}
.css-cowbxgw h1{font-size:36px;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.css-cowbxgw p{font-size:16px;opacity:.8;font-style:italic}
.css-cowbxgw .css-ypod0g9{color:#fff;text-decoration:none;font-size:20px;letter-spacing:1px;text-transform:uppercase}
.css-w9yykte{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px}
.css-y525dhb{background:#fff;border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:28px;transition:box-shadow .2s}
.css-y525dhb:hover{box-shadow:0 4px 20px rgba(0,0,0,.14)}
.css-y525dhb h2{font-size:22px;margin-bottom:10px;line-height:1.3}
.css-y525dhb h2 a{color:#2c3e50;text-decoration:none}
.css-y525dhb .css-wasg3uy{font-size:12px;color:#888;margin-bottom:10px;text-transform:uppercase;letter-spacing:1px}
.css-y525dhb p{font-size:15px;color:#555;margin-bottom:14px}
.css-mbc6kvc{color:#e74c3c;text-decoration:none;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px}
.css-3km1j35{max-width:780px;margin:0 auto;padding:0 24px 60px}
.css-3km1j35 h1{font-size:36px;margin-bottom:10px;line-height:1.2}
.css-3km1j35 .css-wasg3uy{font-size:13px;color:#888;display:block;margin-bottom:28px;text-transform:uppercase;letter-spacing:1px}
.css-3km1j35 h2{font-size:24px;margin:36px 0 14px}
.css-3km1j35 h3{font-size:19px;margin:28px 0 10px}
.css-3km1j35 p{margin-bottom:18px;font-size:17px}
.css-3km1j35 ul,.css-3km1j35 ol{margin:0 0 18px 28px}
.css-3km1j35 a{color:#e74c3c}
.css-3km1j35 img{max-width:100%;height:auto;border-radius:4px;margin:20px 0}
.css-i6mf69q{border-top:2px solid #ddd;padding:28px 0;margin-top:48px;text-align:center;font-size:13px;color:#888}
.css-i6mf69q a{color:#888}
.css-6kytw0j{border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:14px 0;margin-bottom:28px;font-size:14px;color:#888;font-style:italic;text-align:center}
.css-eoxxy16{background:#f9f3e3;padding:16px 20px;margin-top:28px;font-size:13px;color:#7a6230;border-radius:4px}
.css-39sbk8d{font-size:11px;color:#888;margin:-22px 0 28px;text-transform:uppercase;letter-spacing:1.5px}
.css-gg811p0{margin:0 0 28px}
.css-y8uhion{width:100%;height:auto;border-radius:4px}
.css-145q3gb{border-top:2px solid #ddd;margin-top:40px;padding-top:24px}
.css-145q3gb h4{font-size:16px;text-transform:uppercase;letter-spacing:1px;margin-bottom:16px;color:#888}
.mag-related-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mag-related-item a{color:#2c3e50;text-decoration:none;font-size:15px}
.mag-related-item a:hover{color:#e74c3c}
.css-4z2avs9{background:#fff;border-radius:4px;box-shadow:0 2px 12px rgba(0,0,0,.08);padding:22px 28px;margin-top:28px}
.css-4z2avs9 p{font-size:15px;padding:4px 0;margin:0}
.css-4z2avs9 .css-wasg3uy{margin:0 8px 0 0;display:inline}
.css-4z2avs9 a{color:#2c3e50;text-decoration:none}
.css-4z2avs9 a:hover{color:#e74c3c}

:root{--primary:#5C3A26;--accent:#A87A38;--bg:#F2EBD9;--fg:#1F140A;--border:#C4B095;--r:9px;--fb:'Outfit';--fh:'Cormorant Infant'}

@font-face { font-family: 'Cormorant Infant'; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url(https://fonts.gstatic.com/s/cormorantinfant/v22/HhyPU44g9vKiM1sORYSiWeAsLN997_cV2RkDTq8.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Infant'; font-style: italic; font-weight: 500 600; font-display: swap;
  src: url(https://fonts.gstatic.com/s/cormorantinfant/v22/HhyJU44g9vKiM1sORYSiWeAsLN997_Il2xMEbK0UPg.woff2) format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtqUYLknw.woff2) format('woff2'); }

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,400;0,500;0,600;0,700;1,500;1,600&family=Outfit:wght@400;500;600;700&display=swap');

:root {
  --moment: #7A5A3C;          
  --paper:  #faf5ec;          
  --paper-2:#f5efe1;          
  --hair:   rgba(31, 20, 10, .10);
  --ink-veil: linear-gradient(rgba(20,24,28,.58), rgba(20,24,28,.30));
}

:root body { font-family: var(--fb), system-ui, -apple-system, sans-serif; color: var(--fg); background: var(--bg); line-height: 1.72; font-size: 16.5px; }
::selection { background: var(--accent); color: var(--bg); }
:root hr { border: 0; border-top: 1px solid var(--border); margin: 30px 0; }

:root > body > nav {
  max-width: none;
  background:
    linear-gradient(102deg, rgba(38,23,13,.95) 0%, rgba(52,32,19,.82) 46%, rgba(92,58,38,.55) 100%),
    url("/gfx/hero-bg.jpg") center / cover no-repeat;
  color: var(--bg);
  text-align: left;
  padding: 0;
  margin-bottom: 56px;
  border-bottom: 3px solid var(--accent);
}
:root > body > nav > div {
  max-width: 1180px;
  margin: 0 auto;
  padding: 54px 24px 42px 104px;
  position: relative;
}
:root > body > nav > div::before {
  content: "";
  position: absolute;
  left: 24px; top: 52px;
  width: 62px; height: 62px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23F2EBD9' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 22v-5a9 9 0 0 1 18 0v5'/%3E%3Crect x='10.5' y='22' width='27' height='18' rx='3.5'/%3E%3Ccircle cx='24' cy='29.5' r='2.4' fill='%23F2EBD9' stroke='none'/%3E%3Cpath d='M24 31.5v4.5'/%3E%3C/svg%3E") center / contain no-repeat;
  opacity: .95;
}

:root > body > nav > div:first-of-type > h1 {
  font-family: var(--fh), Cambria, serif;
  font-style: italic; font-weight: 600;
  font-size: 44px; line-height: 1.06; letter-spacing: 0;
  text-transform: none; color: var(--bg);
  margin: 0 0 9px;
}
:root > body > nav > div:first-of-type > p {
  font-family: var(--fb), system-ui, sans-serif;
  font-style: normal; font-size: 14px; line-height: 1.55;
  color: rgba(242, 235, 217, .84);
  max-width: 640px; margin: 0;
}

:root > body > nav > div:first-of-type > a[href] {
  font-family: var(--fh), Cambria, serif;
  font-style: italic; font-weight: 600; font-size: 34px;
  letter-spacing: 0; text-transform: none;
  color: var(--bg); text-decoration: none;
}

:root > body > nav > div:first-of-type::after {
  content: "Real trials \0000B7\0000A0paid on my own card \0000B7\0000A0one dedicated test laptop \0000B7\0000A0zero security certifications";
  display: block;
  font-family: var(--fb), system-ui, sans-serif;
  font-style: italic; font-size: 12.5px; letter-spacing: .01em;
  color: var(--accent);
  max-width: 660px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(168, 122, 56, .42);
}

:root main:has(> div > div > h2) { max-width: 1180px; }

:root main:has(> div > div > h2) > div:first-of-type {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 66px 34px;
  align-items: stretch;
  position: relative;
}

:root main:has(> div > div > h2) > div:first-of-type > div:nth-of-type(n) {
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  box-shadow: 0 1px 4px rgba(31, 20, 10, .05);
  padding: 28px 32px;
  transition: box-shadow .16s ease, transform .12s ease;
}
:root main:has(> div > div > h2) > div:first-of-type > div:nth-of-type(n):hover {
  box-shadow: 0 6px 22px rgba(31, 20, 10, .10);
  transform: translateY(-2px);
}
:root main:has(> div > div > h2) > div:first-of-type > div:nth-of-type(n) > p:first-of-type {
  font-family: var(--fb), system-ui, sans-serif;
  font-size: 11px; color: var(--accent);
  letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  line-height: 1.4; margin: 0 0 9px;
}
:root main:has(> div > div > h2) > div:first-of-type > div:nth-of-type(n) > h2 {
  font-family: var(--fh), Cambria, serif;
  font-size: 22px; font-weight: 600; line-height: 1.22;
  letter-spacing: -.005em; margin: 0 0 10px;
}
:root main:has(> div > div > h2) > div:first-of-type > div:nth-of-type(n) > h2 a {
  color: var(--primary); text-decoration: none;
}
:root main:has(> div > div > h2) > div:first-of-type > div:nth-of-type(n) > h2 a:hover { color: var(--accent); }
:root main:has(> div > div > h2) > div:first-of-type > div:nth-of-type(n) > p:nth-of-type(2) {
  font-family: var(--fb), system-ui, sans-serif;
  font-size: 15px; line-height: 1.65; color: var(--fg);
  opacity: .82; margin: 0 0 16px; max-width: 64ch;
}
:root main:has(> div > div > h2) > div:first-of-type > div:nth-of-type(n) > a {
  margin-top: auto;
  font-family: var(--fb), system-ui, sans-serif;
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--primary);
  text-decoration: none;
  align-self: flex-start;
  border-bottom: 1px solid var(--primary);
  padding-bottom: 1px;
}
:root main:has(> div > div > h2) > div:first-of-type > div:nth-of-type(n) > a:hover {
  color: var(--accent); border-bottom-color: var(--accent);
}

:root main:has(> div > div > h2) > div:first-of-type > div:nth-child(1) {
  grid-column: 1 / -1;
  position: relative;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-left: 5px solid var(--moment);          
  border-radius: 0 var(--r) var(--r) 0;
  padding: 52px 220px 40px 46px;
  box-shadow: 0 3px 16px rgba(31, 20, 10, .08);
}
:root main:has(> div > div > h2) > div:first-of-type > div:nth-child(1):hover { transform: none; }
:root main:has(> div > div > h2) > div:first-of-type > div:nth-child(1)::before {
  content: "Latest Essay";
  position: absolute; top: 26px; left: 46px;
  font-family: var(--fb), system-ui, sans-serif;
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  font-weight: 700; color: var(--accent);
}

:root main:has(> div > div > h2) > div:first-of-type > div:nth-child(1) > p:first-of-type {
  font-size: 11px; color: var(--primary); opacity: .72; margin-bottom: 12px;
}
:root main:has(> div > div > h2) > div:first-of-type > div:nth-child(1) > p:first-of-type::before {
  content: "By Naomi Talbott \0000B7\0000A0";
  color: var(--accent);
}
:root main:has(> div > div > h2) > div:first-of-type > div:nth-child(1) > h2 {
  font-size: 43px; line-height: 1.07; margin-bottom: 16px;
}
:root main:has(> div > div > h2) > div:first-of-type > div:nth-child(1) > p:nth-of-type(2) {
  font-size: 19px; line-height: 1.5; max-width: 40ch; opacity: .9; margin-bottom: 20px;
}
:root main:has(> div > div > h2) > div:first-of-type > div:nth-child(1) > p:nth-of-type(2)::first-letter {
  font-family: var(--fh), Cambria, serif; font-style: italic; font-weight: 600;
  font-size: 56px; line-height: .74; float: left;
  margin: 8px 12px 0 0; color: var(--moment);   
}
:root main:has(> div > div > h2) > div:first-of-type > div:nth-child(1) > a {
  margin-top: 4px;
  border: 1.5px solid var(--primary); border-radius: 999px;
  padding: 9px 24px; font-size: 11.5px; letter-spacing: .14em;
  transition: background .15s ease, color .15s ease;
}
:root main:has(> div > div > h2) > div:first-of-type > div:nth-child(1) > a:hover {
  background: var(--primary); color: var(--bg); border-bottom-color: var(--primary);
}

:root main:has(> div > div > h2) > div:first-of-type > div:nth-child(1)::after {
  content: "Latest \A field note";
  white-space: pre-line;
  position: absolute; top: 0; right: 0; bottom: 0; width: 176px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 0 32px 34px;
  border-left: 1px solid var(--hair);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%235C3A26' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 22v-5a9 9 0 0 1 18 0v5'/%3E%3Crect x='10.5' y='22' width='27' height='18' rx='3.5'/%3E%3Ccircle cx='24' cy='29.5' r='2.4' fill='%235C3A26' stroke='none'/%3E%3Cpath d='M24 31.5v4.5'/%3E%3C/svg%3E") no-repeat 34px 24px / 56px;
  font-family: var(--fb), system-ui, sans-serif;
  font-size: 12px; line-height: 1.45; letter-spacing: .2em;
  text-transform: uppercase; font-weight: 700; color: var(--accent);
}

:root main:has(> div > div > h2) > div:first-of-type > div:nth-child(2),
:root main:has(> div > div > h2) > div:first-of-type > div:nth-child(3),
:root main:has(> div > div > h2) > div:first-of-type > div:nth-child(4) {
  grid-column: span 2;
}
:root main:has(> div > div > h2) > div:first-of-type > div:nth-child(2) > p:nth-of-type(2),
:root main:has(> div > div > h2) > div:first-of-type > div:nth-child(3) > p:nth-of-type(2),
:root main:has(> div > div > h2) > div:first-of-type > div:nth-child(4) > p:nth-of-type(2) {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}

:root main:has(> div > div > h2) > div:first-of-type > div:nth-child(2) { position: relative; }
:root main:has(> div > div > h2) > div:first-of-type > div:nth-child(2)::before {
  content: "Editor's Picks \2014\0000A0Read These First";
  position: absolute; left: 0; bottom: calc(100% + 16px);
  width: calc(300% + 68px);
  font-family: var(--fb), system-ui, sans-serif;
  font-size: 14px; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 700; color: var(--primary);
  padding-bottom: 9px; border-bottom: 1px solid var(--border);
}

:root main:has(> div > div > h2) > div:first-of-type > div:nth-child(5) {
  grid-column: 1 / -1;
  align-items: center; text-align: center;
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
  padding: 236px 24px 8px;
  position: relative;
}
:root main:has(> div > div > h2) > div:first-of-type > div:nth-child(5):hover { transform: none; box-shadow: none; }
:root main:has(> div > div > h2) > div:first-of-type > div:nth-child(5)::before {
  content: "Continue Below";
  position: absolute; top: 0; left: 0; right: 0; height: 206px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink-veil), url("/gfx/story-bg.jpg") center 30% / cover no-repeat;
  border-radius: var(--r);
  color: var(--paper);
  font-family: var(--fb), system-ui, sans-serif;
  font-size: 13px; letter-spacing: .32em; text-transform: uppercase; font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
:root main:has(> div > div > h2) > div:first-of-type > div:nth-child(5) > p:first-of-type { color: var(--accent); }
:root main:has(> div > div > h2) > div:first-of-type > div:nth-child(5) > h2 { font-size: 30px; line-height: 1.14; }
:root main:has(> div > div > h2) > div:first-of-type > div:nth-child(5) > p:nth-of-type(2) {
  font-size: 16.5px; line-height: 1.6; max-width: 56ch; margin-left: auto; margin-right: auto;
}
:root main:has(> div > div > h2) > div:first-of-type > div:nth-child(5) > a { align-self: center; }

:root main:has(> div > div > h2) > div:first-of-type > div:nth-child(n+6) {
  grid-column: span 3;
  background: var(--paper-2);
}
:root main:has(> div > div > h2) > div:first-of-type > div:nth-child(n+6) > h2 { font-size: 20px; }
:root main:has(> div > div > h2) > div:first-of-type > div:nth-child(n+6) > p:nth-of-type(2) {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  font-size: 14.5px;
}

:root main:has(> div > div > h2) > div:last-child {
  grid-column: 1 / -1;
  max-width: none;
  margin: 96px 0 0;
  padding: 0;
  background: transparent;
  border: 0; box-shadow: none;
  position: relative;
  
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 16px;
  align-items: stretch;
}

:root main:has(> div > div > h2) > div:last-child::before {
  content: "See More Essays";
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center;
  height: 218px; margin-bottom: 34px;
  background: var(--ink-veil), url("/gfx/story-bg.jpg") center 70% / cover no-repeat;
  border-radius: var(--r);
  color: var(--paper);
  font-family: var(--fb), system-ui, sans-serif;
  font-size: 13px; letter-spacing: .32em; text-transform: uppercase; font-weight: 600;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}

:root main:has(> div > div > h2) > div:last-child > p {
  display: flex; flex-direction: column;
  height: 100%;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  box-shadow: 0 1px 4px rgba(31, 20, 10, .05);
  padding: 20px 22px; margin: 0;
  transition: box-shadow .16s ease, transform .12s ease;
}
:root main:has(> div > div > h2) > div:last-child > p:hover {
  box-shadow: 0 6px 22px rgba(31, 20, 10, .10);
  transform: translateY(-2px);
}
:root main:has(> div > div > h2) > div:last-child > p > span:first-child {
  display: block;
  color: var(--accent); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 700;
  font-family: var(--fb), system-ui, sans-serif;
  margin: 0 0 8px;
}
:root main:has(> div > div > h2) > div:last-child > p a {
  font-family: var(--fh), Cambria, serif;
  font-size: 17px; font-weight: 600; line-height: 1.24;
  color: var(--primary); text-decoration: none;
}
:root main:has(> div > div > h2) > div:last-child > p a:hover { color: var(--accent); }

:root main:has(> article) { max-width: 800px; }

:root main:has(> article) > h1:first-of-type {
  font-family: var(--fh), Cambria, serif;
  font-size: 40px; font-weight: 600; color: var(--primary);
  line-height: 1.12; letter-spacing: -.006em; margin: 4px 0 14px;
}
:root main:has(> article) > time:first-of-type {
  display: block; font-family: var(--fb), system-ui, sans-serif;
  font-size: 13px; color: var(--accent); letter-spacing: .1em;
  text-transform: uppercase; font-weight: 600; margin-bottom: 30px;
}

:root main:has(> article) > time:first-of-type::before {
  content: "By Naomi Talbott \0000B7\0000A0Marketing Ops \0000B7\0000A0";
  color: var(--primary);
}

:root main:has(> article) > article > p:nth-of-type(n) {
  margin-bottom: 18px; font-size: 18px; line-height: 1.78; max-width: 68ch;
}
:root main:has(> article) > article > p:nth-of-type(n) strong,
:root main:has(> article) > article > li strong { color: var(--primary); font-weight: 700; }

:root main:has(> article) > article > h2:nth-of-type(n) {
  font-family: var(--fh), Cambria, serif;
  font-size: 27px; font-weight: 600; color: var(--primary);
  line-height: 1.2; letter-spacing: -.005em; max-width: 68ch;
  margin: 20px 0 14px;
}
:root main:has(> article) > article > h2:nth-of-type(n)::before {
  content: "\2737\0000A0\2737\0000A0\2737";
  display: block; text-align: center;
  color: var(--accent); opacity: .55; font-size: 15px; letter-spacing: .3em;
  margin: 34px 0 26px;
}
:root main:has(> article) > article > h3:nth-of-type(n) {
  font-family: var(--fh), Cambria, serif; font-style: italic;
  font-size: 21px; font-weight: 500; color: var(--accent);
  margin: 26px 0 10px; max-width: 68ch;
}
:root main:has(> article) > article > ul:nth-of-type(n),
:root main:has(> article) > article > ol:nth-of-type(n) { margin: 0 0 18px 26px; max-width: 68ch; }
:root main:has(> article) > article > ul li, :root main:has(> article) > article > ol li {
  margin-bottom: 10px; font-size: 17px; line-height: 1.7;
}

:root main:has(> article) > article > blockquote:nth-of-type(n) {
  position: relative;
  border-left: 3px solid var(--accent);
  padding: 12px 0 12px 44px; margin: 28px 0;
  font-family: var(--fh), Cambria, serif; font-style: italic; font-size: 20px; line-height: 1.5;
  color: var(--primary); background: rgba(168, 122, 56, .08);
  border-radius: 0 var(--r) var(--r) 0; max-width: 68ch;
}
:root main:has(> article) > article > blockquote:nth-of-type(n)::before {
  content: "\201C";
  position: absolute; left: 10px; top: -2px;
  font-family: var(--fh), Cambria, serif; font-style: italic;
  font-size: 54px; line-height: 1; color: var(--accent); opacity: .5;
}

:root main:has(> article) > article > p a[href], :root main:has(> article) > article > li a[href] {
  color: var(--primary); text-decoration: underline;
  text-decoration-color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1.5px;
  font-weight: 600;
}
:root main:has(> article) > article > p a[href]:hover, :root main:has(> article) > article > li a[href]:hover {
  color: var(--accent); text-decoration-color: var(--primary);
}

:root main:has(> article) > article > p a[href^="/find/"],
:root main:has(> article) > article > li a[href^="/find/"] {
  background: var(--primary); color: var(--bg);
  font-family: var(--fb), system-ui, sans-serif; font-size: 14.5px; font-weight: 600;
  letter-spacing: .02em; text-decoration: none;
  padding: 3px 13px 3px 15px; border-radius: var(--r);
}
:root main:has(> article) > article > p a[href^="/find/"]::after,
:root main:has(> article) > article > li a[href^="/find/"]::after {
  content: "\0000A0\2197"; color: var(--accent); font-weight: 700;
}
:root main:has(> article) > article > p a[href^="/find/"]:hover,
:root main:has(> article) > article > li a[href^="/find/"]:hover {
  background: var(--accent); color: var(--bg);
}

:root main:has(> article) > article figure, :root main:has(> article) > article section:has(> img) { margin: 0 0 30px; }
:root main:has(> article) > article figure > img, :root main:has(> article) > article section > img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r); box-shadow: 0 4px 18px rgba(31, 20, 10, .14);
}
:root main:has(> article) > article table {
  width: 100%; max-width: 68ch; border-collapse: collapse; margin: 26px 0;
  font-family: var(--fb), system-ui, sans-serif; font-size: 14.5px;
  background: var(--paper); border: 1px solid var(--border);
  border-radius: var(--r); overflow: hidden;
}
:root main:has(> article) > article table th {
  background: var(--primary); color: var(--bg);
  padding: 10px 14px; text-align: left;
  font-family: var(--fh), Cambria, serif; font-weight: 500; font-size: 13.5px; letter-spacing: .02em;
}
:root main:has(> article) > article table td {
  padding: 9px 14px; border-bottom: 1px solid var(--border);
  vertical-align: top; font-variant-numeric: tabular-nums;
}

.mag-related-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.mag-related-item:last-child { border-bottom: none; }
.mag-related-item a { color: var(--primary); font-weight: 600; }
.mag-related-item a:hover { color: var(--accent); }

:root footer {
  background: transparent; border-top: 1px solid var(--border);
  padding: 24px 0 36px; margin-top: 50px; text-align: center;
  font-family: var(--fb), system-ui, sans-serif; font-size: 12.5px;
  color: var(--fg); opacity: .60; letter-spacing: .03em;
}
:root footer a { color: var(--fg); text-decoration: none; border-bottom: 1px dotted var(--border); }
:root footer a:hover { color: var(--primary); border-bottom-color: var(--primary); }

@media (max-width: 980px) {
  :root main:has(> div > div > h2) > div:first-of-type { grid-template-columns: repeat(2, 1fr); gap: 52px 24px; }
  :root main:has(> div > div > h2) > div:first-of-type > div:nth-child(1) { grid-column: 1 / -1; padding: 46px 40px 36px 40px; }
  :root main:has(> div > div > h2) > div:first-of-type > div:nth-child(1)::after { display: none; }
  :root main:has(> div > div > h2) > div:first-of-type > div:nth-child(1) > h2 { font-size: 34px; }
  :root main:has(> div > div > h2) > div:first-of-type > div:nth-child(1) > p:nth-of-type(2) { max-width: none; }
  :root main:has(> div > div > h2) > div:first-of-type > div:nth-child(2),
  :root main:has(> div > div > h2) > div:first-of-type > div:nth-child(3),
  :root main:has(> div > div > h2) > div:first-of-type > div:nth-child(4),
  :root main:has(> div > div > h2) > div:first-of-type > div:nth-child(n+6) { grid-column: span 1; }
  :root main:has(> div > div > h2) > div:first-of-type > div:nth-child(2)::before { position: static; width: auto; display: block; margin-bottom: 14px; bottom: auto; }
  :root main:has(> div > div > h2) > div:last-child { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  :root > body > nav > div { padding: 40px 22px 34px 22px; }
  :root > body > nav > div::before { position: static; display: block; margin-bottom: 16px; top: auto; left: auto; }
  :root > body > nav > div:first-of-type > h1 { font-size: 34px; }
  :root main:has(> div > div > h2) > div:first-of-type { grid-template-columns: 1fr; gap: 44px; }
  :root main:has(> div > div > h2) > div:first-of-type > div:nth-child(1) { padding: 40px 24px 30px; border-left-width: 4px; }
  :root main:has(> div > div > h2) > div:first-of-type > div:nth-child(1) > h2 { font-size: 29px; }
  :root main:has(> div > div > h2) > div:first-of-type > div:nth-child(1)::before { left: 24px; }
  :root main:has(> div > div > h2) > div:first-of-type > div:nth-child(5) { padding-top: 190px; }
  :root main:has(> div > div > h2) > div:first-of-type > div:nth-child(5)::before { height: 168px; }
  :root main:has(> div > div > h2) > div:last-child { grid-template-columns: 1fr; }
  :root main:has(> article) > h1:first-of-type { font-size: 32px; }
}

:root main > nav p,
:root main > section p {
  line-height: 1.85;
  margin: 0;
}
:root main > nav a,
:root main > section a {
  display: inline-block;
  margin: 0 4px;
  padding: 0 2px;
}

:root html, :root body { overflow-x: hidden; max-width: 100%; }
@media (max-width: 920px) {
  :root main > * { max-width: 100%; }
  :root main { overflow-x: hidden; }
}

@media (max-width: 640px) {
  :root main,
  :root main > article,
  :root main > div,
  :root main > section,
  :root main > nav {
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
  }
  :root main > article > *,
  :root main > div > *,
  :root main > section > *,
  :root main > nav > * {
    max-width: 100%;
  }
  :root main h1,
  :root main h2,
  :root main h3,
  :root main h4 {
    overflow-wrap: break-word;
    word-break: normal;
  }
  
  :root main :is(ul, ol, section, div, nav)[style*="grid-template-columns"],
  :root main > section > ul,
  :root main > nav > ul,
  :root main > div > ul {
    grid-template-columns: 1fr !important;
  }
  
  :root main :is(ul, ol, section, div, p) {
    columns: 1;
  }
  
  :root main img,
  :root main figure {
    max-width: 100%;
    height: auto;
  }
}

@media (max-width: 640px) {
  :root main {
    padding-left: 20px;
    padding-right: 20px;
  }
}

:root main:not(:has(> h1)) > div:has(> div)::before {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.25) 100%),
    url("/gfx/premium-hero-strip-1.webp") center 40% / cover no-repeat;
  min-height: 340px; padding-bottom: 26px; align-items: flex-end;
  text-shadow: 0 1px 12px rgba(0,0,0,0.55); color: #fff;
}
:root main:not(:has(> h1)) > div:has(> div)::after {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.25) 100%),
    url("/gfx/premium-hero-strip-2.webp") center 45% / cover no-repeat;
  min-height: 340px; padding-bottom: 26px; align-items: flex-end;
  text-shadow: 0 1px 12px rgba(0,0,0,0.55); color: #fff;
}

:root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(1) {
  grid-column: 1 / -1;
  position: relative;      
  overflow: visible;       
  padding: 320px 44px 40px !important;
  border-radius: 8px;
  background:
    url("/gfx/premium-hero-card-1.webp") no-repeat center top / 100% 300px,
    var(--bg) !important;
  margin-top: 60px !important;  
}

:root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(2) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/gfx/premium-hero-card-2.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}
:root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(3) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/gfx/premium-hero-card-3.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}
:root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(4) {
  padding: 200px 32px 32px !important;
  border-radius: 8px;
  background:
    url("/gfx/premium-hero-card-4.webp") no-repeat center top / 100% 180px,
    var(--bg) !important;
}

:root main:has(> h1) > article > p:first-of-type::first-letter {
  font-family: var(--fh), Georgia, serif;
  font-size: 76px; line-height: 0.9; color: var(--primary);
  float: left; margin: 6px 12px 0 0; padding: 0; font-weight: 400;
}
:root main:has(> h1) > article > h2 + p ~ h2::before {
  content: "✦ ✦ ✦";
  display: block; text-align: center; color: var(--accent);
  font-size: 12px; letter-spacing: 0.3em; margin-bottom: 24px;
  font-weight: 400;
}

@media (max-width: 720px) {
  :root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(1) {
    padding: 240px 22px 28px !important;
    background:
      url("/gfx/premium-hero-card-1.webp") no-repeat center top / 100% 220px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(2) {
    padding: 180px 22px 26px !important;
    background:
      url("/gfx/premium-hero-card-2.webp") no-repeat center top / 100% 160px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(3) {
    padding: 180px 22px 26px !important;
    background:
      url("/gfx/premium-hero-card-3.webp") no-repeat center top / 100% 160px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:has(> div) > div:nth-of-type(4) {
    padding: 180px 22px 26px !important;
    background:
      url("/gfx/premium-hero-card-4.webp") no-repeat center top / 100% 160px,
      var(--bg) !important;
  }
  :root main:not(:has(> h1)) > div:has(> div)::before,
  :root main:not(:has(> h1)) > div:has(> div)::after { min-height: 240px; }
  :root main:has(> h1) > article > p:first-of-type::first-letter { font-size: 60px; }
}

:root main:not(:has(> h1))::before { content: none !important; }

:root main:has(> h1) a[href^="/try/"],
:root main:has(> h1) a[href^="/ref/"],
:root main:has(> h1) a[href^="/go/"],
:root main:has(> h1) a[href^="/out/"],
:root main:has(> h1) a[href^="/check/"],
:root main:has(> h1) a[href^="/view/"],
:root main:has(> h1) a[href*="hotmart.com"],
:root main:has(> h1) a[href*="digistore24"],
:root main:has(> h1) a[href*="clickbank"] {
  display: inline-block !important;
  background: var(--primary) !important;
  color: var(--bg) !important;
  padding: 6px 14px !important;
  border-radius: 4px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
}

:root main:has(> h1) > article > h2:first-of-type::before {
  content: none !important;
}

:root main:not(:has(> h1)) > div:has(> div) {
  align-items: stretch !important;
}
:root main:not(:has(> h1)) > div:has(> div) > div {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}
:root main:not(:has(> h1)) > div > article {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

:root main:not(:has(> h1)) > div {
  height: 100% !important;
}

:root main:not(:has(> h1)) > div > div > h2,
:root main:not(:has(> h1)) > div > div > h2 a,
:root main:not(:has(> h1)) > section > ul > li > a,
:root main:not(:has(> h1)) > div > p > a {
  font-weight: 500 !important;
}

:root main:not(:has(> h1)) > div > div,
:root main:not(:has(> h1)) > div > article,
:root main:not(:has(> h1)) > article {
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.05) !important;
}