/* Limestone Links
   One stylesheet for every page.

   The look is deliberately plain. The research said this audience rejects
   brands for trying too hard, and the product's whole pitch is that it is
   honest about what it is, so a site dressed up like a twenty thousand dollar
   sim bay would be arguing against itself. */

:root{
  --night:#10160f;
  --night-2:#18211a;
  --cream:#f4f1e6;
  --cream-2:#e8e4d6;
  --paper:#fbfaf5;
  --ink:#141a13;
  --ink-2:#4e5a4c;
  --amber:#e9a13b;
  --amber-deep:#a9691a;
  --fair:#37703f;
  --fair-deep:#1f4427;
  --brick:#a4432c;
  --rule:rgba(20,26,19,.13);
  --rule-2:rgba(20,26,19,.07);
  --rule-night:rgba(244,241,230,.16);
  --disp:'Bricolage Grotesque',Georgia,serif;
  --body:'Source Sans 3',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:18px;line-height:1.62;
  -webkit-font-smoothing:antialiased}

h1,h2,h3,h4{font-family:var(--disp);font-weight:800;letter-spacing:-.025em;
  line-height:1.04;margin:0;text-wrap:balance}
h1{font-size:clamp(38px,6.2vw,80px)}
h2{font-size:clamp(29px,3.9vw,52px)}
h3{font-size:clamp(19px,2vw,26px);letter-spacing:-.015em}
h4{font-size:clamp(17px,1.5vw,20px);font-weight:600;letter-spacing:-.01em}
p{margin:0 0 1em}
ul{margin:0 0 1em;padding-left:1.15em}
li{margin-bottom:.4em}
a{color:var(--fair-deep);text-underline-offset:2px}
strong{font-weight:600}

.wrap{width:min(1160px,calc(100% - 44px));margin:0 auto}
.narrow{width:min(760px,calc(100% - 44px));margin:0 auto}
section{padding:clamp(56px,7vw,104px) 0}
.tight{padding-top:0}
.eyebrow{font-family:var(--mono);font-size:12.5px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--amber-deep);
  margin:0 0 16px}
.lead{font-size:clamp(17px,1.5vw,20.5px);max-width:40em}
.muted{color:var(--ink-2)}
.sr{position:absolute;left:-9999px}

/* ---------------- header ---------------- */
header{position:sticky;top:0;z-index:50;background:rgba(16,22,15,.95);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--rule-night)}
.bar{display:flex;align-items:center;gap:16px;padding:13px 0}
.mark{font-family:var(--disp);font-weight:800;font-size:20px;color:var(--cream);
  letter-spacing:-.02em;text-decoration:none;display:flex;align-items:center;
  gap:9px;flex-shrink:0}
.mark i{width:10px;height:10px;border-radius:50%;background:var(--amber);
  font-style:normal;flex-shrink:0}
.bar nav{margin-left:auto;display:flex;gap:22px;align-items:center}
.bar nav a{color:rgba(244,241,230,.72);text-decoration:none;font-size:15.5px;
  font-weight:600;white-space:nowrap}
.bar nav a:hover,.bar nav a[aria-current=page]{color:var(--cream)}
.bar nav a[aria-current=page]{box-shadow:0 2px 0 var(--amber)}
.menu{display:none;background:none;border:0;color:var(--cream);cursor:pointer;
  padding:8px;margin-left:auto}
@media (max-width:880px){
  .menu{display:block}
  .bar nav{position:absolute;top:100%;left:0;right:0;background:var(--night);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 22px 18px;
    border-bottom:1px solid var(--rule-night);margin-left:0;display:none}
  .bar nav.open{display:flex}
  .bar nav a{padding:12px 0;font-size:17px}
  .bar nav a.btn{margin-top:10px;justify-content:center}
}

/* ---------------- buttons ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--amber);color:#1f1504;border:0;border-radius:3px;
  padding:13px 22px;font-family:var(--body);font-size:16px;font-weight:600;
  text-decoration:none;cursor:pointer;white-space:nowrap;line-height:1.2}
.btn:hover{background:#f3b052}
.btn:disabled{opacity:.6;cursor:default}
.btn.ghost{background:transparent;color:var(--cream);
  box-shadow:inset 0 0 0 1px var(--rule-night)}
.btn.ghost:hover{background:rgba(244,241,230,.09)}
.btn.line{background:transparent;color:var(--fair-deep);
  box-shadow:inset 0 0 0 1px var(--rule)}
.btn.line:hover{background:var(--cream-2)}

/* ---------------- hero ---------------- */
.hero{background:var(--night);color:var(--cream);overflow:hidden}
.hero h1,.dark h1,.dark h2,.dark h3,.dark h4{color:var(--cream)}
.hero p,.dark p{color:rgba(244,241,230,.78)}
.hero-grid{display:grid;gap:clamp(28px,4vw,54px);align-items:center;
  grid-template-columns:minmax(0,1.04fr) minmax(0,1fr)}
@media (max-width:920px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
.pricetag{font-family:var(--mono);font-weight:700;color:var(--amber)}

/* ---------------- signup ---------------- */
.signup{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;max-width:530px}
.signup input{flex:1 1 220px;min-width:0;padding:13px 15px;border-radius:3px;
  border:1px solid var(--rule);background:#fff;color:var(--ink);
  font-family:var(--body);font-size:16px}
.dark .signup input,.hero .signup input,.final .signup input{
  border-color:var(--rule-night);background:rgba(244,241,230,.08);
  color:var(--cream)}
.dark .signup input::placeholder,.hero .signup input::placeholder,
.final .signup input::placeholder{color:rgba(244,241,230,.45)}
.signup input:focus{outline:2px solid var(--amber);outline-offset:1px}
.note{font-size:14.5px;color:var(--ink-2);margin-top:11px}
.dark .note,.hero .note,.final .note{color:rgba(244,241,230,.5)}
.say{margin-top:11px;font-size:15px;font-weight:600;min-height:1.4em}
.say.ok{color:#2d7a34}.say.bad{color:var(--brick)}
.dark .say.ok,.hero .say.ok,.final .say.ok{color:#8ed189}
.dark .say.bad,.hero .say.bad,.final .say.bad{color:#f0a189}

/* ---------------- strips ---------------- */
.strip{background:var(--fair-deep);color:var(--cream);padding:0}
.strip .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:rgba(244,241,230,.15)}
@media (max-width:780px){.strip .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stat{background:var(--fair-deep);padding:24px 20px}
.stat b{display:block;font-family:var(--mono);font-weight:700;
  font-size:clamp(23px,2.8vw,34px);color:var(--amber);letter-spacing:-.02em}
.stat span{display:block;font-size:14.5px;color:rgba(244,241,230,.76);
  margin-top:5px;line-height:1.45}

/* ---------------- layout helpers ---------------- */
.two{display:grid;gap:clamp(28px,4.4vw,62px);
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
@media (max-width:880px){.two{grid-template-columns:minmax(0,1fr)}}
.two.mid{align-items:center}
.dark{background:var(--night);color:var(--cream)}
.sand{background:var(--cream)}

/* ---------------- cards ---------------- */
.cards{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:44px}
@media (max-width:920px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cards{grid-template-columns:minmax(0,1fr)}}
.card{background:#fff;border:1px solid var(--rule);border-radius:4px;
  padding:24px 22px 26px}
.dark .card{background:var(--night-2);border-color:var(--rule-night)}
.card svg{display:block;margin-bottom:14px}
.card h3{margin-bottom:7px}
.card p{margin:0;font-size:16.5px;color:var(--ink-2)}
.dark .card p{color:rgba(244,241,230,.74)}
.card.flag{border-color:var(--amber);border-width:2px}

/* ---------------- is / isn't ---------------- */
.honest{display:grid;gap:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  margin-top:40px;border:1px solid var(--rule);border-radius:4px;
  overflow:hidden;background:#fff}
@media (max-width:760px){.honest{grid-template-columns:minmax(0,1fr)}}
.honest > div{padding:28px 26px 30px}
.honest > div + div{border-left:1px solid var(--rule)}
@media (max-width:760px){.honest > div + div{border-left:0;border-top:1px solid var(--rule)}}
.honest h3{margin-bottom:14px;display:flex;align-items:center;gap:9px}
.honest ul{list-style:none;padding:0;margin:0}
.honest li{display:flex;gap:11px;align-items:flex-start;margin-bottom:11px;
  font-size:16.5px;line-height:1.5}
.honest li b{font-weight:600}
.tick,.cross{flex-shrink:0;margin-top:5px}
.isnt{background:var(--cream)}

/* ---------------- steps ---------------- */
.steps{counter-reset:s;display:grid;gap:24px;margin-top:44px;
  grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:920px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:580px){.steps{grid-template-columns:minmax(0,1fr)}}
.step{counter-increment:s;padding-top:18px;border-top:2px solid var(--amber)}
.step::before{content:counter(s,decimal-leading-zero);display:block;
  font-family:var(--mono);font-weight:700;font-size:13.5px;
  color:var(--amber-deep);margin-bottom:9px}
.dark .step::before{color:var(--amber)}
.step h3{margin-bottom:6px;font-size:19.5px}
.step p{margin:0;font-size:16px;color:var(--ink-2)}
.dark .step p{color:rgba(244,241,230,.72)}

/* ---------------- kit table ---------------- */
.kit{width:100%;border-collapse:collapse;margin-top:34px;font-size:16.5px}
.kit th{text-align:left;font-family:var(--mono);font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  padding:0 12px 11px;border-bottom:1px solid var(--rule)}
.kit td{padding:15px 12px;border-bottom:1px solid var(--rule-2);
  vertical-align:top}
.kit td:first-child,.kit th:first-child{padding-left:0}
.kit td:last-child,.kit th:last-child{padding-right:0;text-align:right;
  font-family:var(--mono);font-weight:700;white-space:nowrap}
.kit .what{font-weight:600;display:block}
.kit .why{display:block;font-size:14.5px;color:var(--ink-2);margin-top:4px;
  line-height:1.45}
.kit tfoot td{border-bottom:0;border-top:2px solid var(--ink);padding-top:18px;
  font-family:var(--mono);font-weight:700;font-size:clamp(18px,2vw,24px)}
.kit tfoot td:first-child{font-family:var(--disp);letter-spacing:-.02em}
.tag{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;padding:3px 6px;border-radius:2px;
  background:var(--cream-2);color:var(--ink-2);margin-left:7px;vertical-align:2px}
.tag.own{background:#e0ecdf;color:var(--fair-deep)}

/* ---------------- compare ---------------- */
.vs{width:100%;border-collapse:collapse;margin-top:34px;font-size:16.5px}
.vs th{text-align:left;font-family:var(--mono);font-size:12px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);
  padding:0 14px 11px;border-bottom:1px solid var(--rule)}
.vs th:first-child,.vs td:first-child{padding-left:0}
.vs td{padding:14px;border-bottom:1px solid var(--rule-2)}
.vs tbody tr:first-child td{background:#fff;font-weight:600}
.vs .num{font-family:var(--mono);font-weight:700;white-space:nowrap}

/* ---------------- courses ---------------- */
.courses{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;padding:0}
.courses li{list-style:none;font-family:var(--mono);font-size:14px;
  padding:7px 12px;border-radius:2px;background:#fff;color:var(--ink-2);
  border:1px solid var(--rule);margin:0}
.dark .courses li{background:rgba(244,241,230,.07);color:rgba(244,241,230,.84);
  border-color:var(--rule-night)}
.courses li.more{background:var(--amber);color:#1f1504;border-color:var(--amber);
  font-weight:700}

/* ---------------- faq ---------------- */
.faq{margin-top:38px;border-top:1px solid var(--rule)}
details{border-bottom:1px solid var(--rule)}
summary{cursor:pointer;padding:21px 34px 21px 0;font-family:var(--disp);
  font-weight:600;font-size:clamp(17.5px,1.8vw,22px);position:relative;
  list-style:none;letter-spacing:-.015em}
summary::-webkit-details-marker{display:none}
summary:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
summary::after{content:'+';position:absolute;right:4px;top:18px;
  font-family:var(--mono);font-weight:700;color:var(--amber-deep);font-size:22px}
details[open] summary::after{content:'\2212'}
details .body{padding-bottom:22px;max-width:58em}
details p:last-child{margin-bottom:0}

/* ---------------- final + footer ---------------- */
.final{background:var(--fair-deep);color:var(--cream);text-align:center}
.final h2,.final h3{color:var(--cream)}
.final p{color:rgba(244,241,230,.8)}
.final .signup{margin:26px auto 0;justify-content:center}
.final .say{text-align:center}
footer{background:var(--night);color:rgba(244,241,230,.55);padding:40px 0;
  font-size:15px}
footer a{color:rgba(244,241,230,.78)}
.foot{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}
.foot .credit{margin-left:auto;text-align:right}
@media (max-width:640px){.foot .credit{margin-left:0;text-align:left}}

/* ---------------- what people said ----------------
   Real quotes from real people who played it. Nothing invented, nothing
   polished up. The research says this audience trusts a friend's opinion
   over anything we could write about ourselves, so these get room. */
.quotes{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:44px}
@media (max-width:880px){.quotes{grid-template-columns:minmax(0,1fr)}}
.quote{background:#fff;border:1px solid var(--rule);border-radius:4px;
  padding:26px 24px 24px;display:flex;flex-direction:column}
.dark .quote{background:var(--night-2);border-color:var(--rule-night)}
.quote blockquote{margin:0;font-family:var(--disp);font-weight:600;
  font-size:clamp(18px,1.9vw,22.5px);line-height:1.34;letter-spacing:-.018em;
  text-wrap:balance}
.dark .quote blockquote{color:var(--cream)}
.quote cite{margin-top:16px;font-style:normal;font-size:15px;font-weight:600;
  color:var(--ink-2)}
.dark .quote cite{color:rgba(244,241,230,.62)}
.quote cite span{display:block;font-weight:400;font-size:14.5px;
  color:var(--ink-2);opacity:.8}
.quote .qm{font-family:var(--disp);font-weight:800;font-size:40px;
  line-height:.6;color:var(--amber);margin-bottom:12px}

/* ---------------- screens diagram ---------------- */
.screens{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:40px}
@media (max-width:820px){.screens{grid-template-columns:minmax(0,1fr)}}
.screen{border:1px solid var(--rule-night);border-radius:4px;
  background:var(--night-2);padding:22px 22px 24px}
.screen .role{font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--amber);
  margin:0 0 12px}
.screen h3{margin-bottom:7px;font-size:20px}
.screen p{margin:0;font-size:16px}
.screen .what{margin-top:14px;font-size:14.5px;
  color:rgba(244,241,230,.55);border-top:1px solid var(--rule-night);
  padding-top:12px}

/* ---------------- status pills ----------------
   Three states only, and they carry a word as well as a color so they still
   read in print, in a screenshot, or to anyone who cannot pick the hues apart. */
.pill{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-size:14.5px;font-weight:600;padding:5px 11px;border-radius:2px;
  border:1px solid transparent}
.pill::before{content:'';width:8px;height:8px;border-radius:50%;
  background:currentColor;flex-shrink:0}
.pill.works{background:#e0ecdf;color:#255c2d;border-color:#b9d6ba}
.pill.maybe{background:#fbeed6;color:#8a5511;border-color:#ecd5a7}
.pill.no{background:#f0e2dd;color:#8a3520;border-color:#ddc0b6}

/* ---------------- price ---------------- */
.px{white-space:nowrap}

@media (prefers-reduced-motion:no-preference){
  .bulb{animation:glow 4.5s ease-in-out infinite}
  @keyframes glow{0%,100%{opacity:.86}50%{opacity:1}}
}