/* assets/css/site.css
   Public pages.

   Shares the token system with the application, so someone arriving from the
   landing page into a trial does not feel handed to a different company.

   No dark pattern furniture: no fake countdown styling waiting for a countdown
   that does not exist, no "27 people viewing" bar. Every number rendered here
   comes from the database and the CSS assumes that. */

.site-nav{
  position:sticky;top:0;z-index:50;
  background:var(--topbar-bg);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline-soft);
}
.site-nav-inner{
  max-width:1120px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.site-nav-links{display:none;gap:22px;align-items:center;}
.site-nav-links a{font-size:13.5px;color:var(--text-secondary);}
.site-nav-links a:hover{color:var(--text-primary);}
.site-nav-cta{display:flex;align-items:center;gap:9px;}

.wrap{max-width:1120px;margin:0 auto;padding:0 20px;}
.narrow{max-width:760px;margin:0 auto;}

/* ---------- hero ---------- */
.hero{padding:56px 0 40px;}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:11px;
  padding:5px 12px;border-radius:100px;
  background:var(--amber-dim);color:var(--amber);margin-bottom:22px;
}
.hero-eyebrow svg{width:13px;height:13px;}
.hero h1{
  font-family:var(--font-display);font-size:38px;line-height:1.12;
  font-weight:600;letter-spacing:-.028em;margin-bottom:18px;max-width:16ch;
}
.hero h1 em{font-style:normal;color:var(--amber);}
.hero-lede{font-size:16.5px;line-height:1.6;color:var(--text-secondary);max-width:52ch;margin-bottom:26px;}

.hero-form{display:flex;gap:9px;flex-wrap:wrap;max-width:440px;margin-bottom:14px;}
.hero-form input{
  flex:1;min-width:210px;background:var(--surface-raised);
  border:1px solid var(--hairline);border-radius:var(--radius-md);
  padding:12px 14px;color:var(--text-primary);font-size:14.5px;font-family:var(--font-body);
}
.hero-form input:focus{border-color:var(--amber);outline:none;box-shadow:0 0 0 3px var(--amber-dim);}
.hero-note{font-size:12.5px;color:var(--text-muted);line-height:1.55;}

/* ---------- the two readings device ---------- */
.reading{
  background:var(--surface-raised);border:1px solid var(--hairline);
  border-radius:var(--radius-lg);padding:22px;margin:34px 0;
}
.reading-title{
  font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--text-muted);margin-bottom:18px;
}
.reading-row{margin-bottom:20px;}
.reading-row:last-child{margin-bottom:0;}
.reading-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;gap:12px;}
.reading-name{font-size:13.5px;font-weight:500;}
.reading-val{font-family:var(--font-mono);font-size:14px;font-weight:600;}
.reading-track{height:10px;border-radius:100px;background:var(--surface-hover);overflow:hidden;display:flex;}
.reading-seg{height:100%;}
.reading-note{font-size:12px;color:var(--text-muted);margin-top:8px;line-height:1.55;}

.reading-key{display:flex;gap:16px;flex-wrap:wrap;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--hairline-soft);}
.reading-key span{display:flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:10.5px;color:var(--text-secondary);}
.reading-key i{width:8px;height:8px;border-radius:2px;display:block;}

/* ---------- sections ---------- */
.sect{padding:44px 0;border-top:1px solid var(--hairline-soft);}
.sect-eyebrow{
  font-family:var(--font-mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--amber);margin-bottom:12px;
}
.sect h2{
  font-family:var(--font-display);font-size:26px;font-weight:600;
  letter-spacing:-.02em;margin-bottom:14px;max-width:22ch;line-height:1.22;
}
.sect p{font-size:14.5px;line-height:1.68;color:var(--text-secondary);max-width:62ch;margin-bottom:14px;}
.sect p strong{color:var(--text-primary);font-weight:600;}

.cards{display:grid;grid-template-columns:1fr;gap:12px;margin-top:24px;}
.card{
  background:var(--surface-raised);border:1px solid var(--hairline);
  border-radius:var(--radius-lg);padding:20px;
}
.card-icon{
  width:34px;height:34px;border-radius:10px;background:var(--amber-dim);
  color:var(--amber);display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.card h3{font-family:var(--font-display);font-size:15.5px;font-weight:600;margin-bottom:8px;}
.card p{font-size:13px;line-height:1.6;color:var(--text-secondary);margin:0;}

/* the four tiers, as a reference block */
.tierlist{border:1px solid var(--hairline);border-radius:var(--radius-lg);overflow:hidden;margin-top:22px;}
.tierlist-row{display:flex;gap:13px;padding:15px 17px;border-bottom:1px solid var(--hairline-soft);
  background:var(--surface-raised);}
.tierlist-row:last-child{border-bottom:none;}
.tierlist-swatch{width:9px;height:9px;border-radius:2px;flex:0 0 auto;margin-top:5px;}
.tierlist-name{font-size:13.5px;font-weight:600;margin-bottom:3px;}
.tierlist-desc{font-size:12.5px;color:var(--text-secondary);line-height:1.55;}

/* stack grid */
.stacks{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin-top:20px;}
.stack{
  border:1px solid var(--hairline-soft);border-radius:var(--radius-md);
  padding:12px 10px;text-align:center;font-family:var(--font-mono);
  font-size:11.5px;color:var(--text-secondary);background:var(--surface-raised);
}

/* offer bar, only rendered when a real offer is live */
.offer{
  background:var(--amber-dim);border:1px solid rgba(124,58,237,.24);
  border-radius:var(--radius-lg);padding:16px 18px;margin:26px 0;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.offer-clock{font-family:var(--font-mono);font-size:17px;font-weight:600;color:var(--amber);}
.offer-text{flex:1;min-width:190px;font-size:13px;color:var(--text-secondary);line-height:1.55;}
.offer-text strong{color:var(--text-primary);}

.quote{
  border-left:2px solid var(--amber);padding:4px 0 4px 18px;margin:26px 0;max-width:60ch;
}
.quote p{font-size:15px;line-height:1.65;color:var(--text-primary);font-style:italic;margin-bottom:8px;}
.quote cite{font-family:var(--font-mono);font-size:11.5px;color:var(--text-muted);font-style:normal;}
.quote cite a{color:var(--amber);text-decoration:underline;text-underline-offset:2px;}

.site-foot{border-top:1px solid var(--hairline-soft);padding:34px 0;margin-top:20px;}
.site-foot-inner{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.site-foot-links{display:flex;gap:20px;flex-wrap:wrap;}
.site-foot a{font-size:12.5px;color:var(--text-muted);}
.site-foot a:hover{color:var(--text-secondary);}

/* cookie notice, first party only, no third party tags to consent to */
.cookie{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:90;
  background:var(--surface-raised);border:1px solid var(--hairline);
  border-radius:var(--radius-lg);padding:15px 17px;
  display:none;align-items:center;gap:14px;flex-wrap:wrap;
  box-shadow:0 12px 34px -10px rgba(0,0,0,.3);max-width:660px;margin:0 auto;
}
.cookie.show{display:flex;}
.cookie p{flex:1;min-width:200px;font-size:12.5px;color:var(--text-secondary);line-height:1.55;margin:0;}

@media (min-width:760px){
  .site-nav-links{display:flex;}
  .hero{padding:72px 0 48px;}
  .hero h1{font-size:50px;}
  .cards{grid-template-columns:repeat(3,1fr);}
  .sect h2{font-size:31px;}
}