/* sessionapps.com, the Session answers hub.
   Tokens taken from the live Session Key page so the hub reads as one family.
   No monospaced type and no tabular figures anywhere. House rule. */

:root{
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;

  --accent:#df2e1a;
  --accent-ink:#ffffff;
  --green:#2f9d4e;
  --yellow:#e0a012;

  --bg:#f6f6f9;
  --bg2:#ececf1;
  --surface:#ffffff;
  --ink:#0a0a11;
  --ink2:#313340;
  --muted:#696c7a;
  --line:rgba(8,8,22,.12);
  --hair:rgba(8,8,22,.06);
  --shadow:0 30px 70px rgba(8,8,22,.10);
  --shadow-sm:0 2px 14px rgba(8,8,22,.07);

  --wrap:1120px;
  --read:68ch;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#06060a; --bg2:#0e0e16; --surface:#121119;
    --ink:#f4f4f8; --ink2:#c8c9d4; --muted:#9497a6;
    --line:rgba(255,255,255,.14); --hair:rgba(255,255,255,.07);
    --shadow:0 30px 70px rgba(0,0,0,.55);
    --shadow-sm:0 2px 14px rgba(0,0,0,.4);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.62;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--hair);
}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:18px;height:62px}
.brand{
  display:inline-flex;align-items:baseline;gap:0;
  font-weight:800;letter-spacing:-.02em;font-size:17px;text-decoration:none;
}
.brand .tm{font-size:.55em;font-weight:700;vertical-align:super;line-height:0;opacity:.7;margin-left:.06em}
.brand .sub{font-weight:500;color:var(--muted);letter-spacing:-.01em;margin-left:.45em}
.head-nav{display:flex;align-items:center;gap:20px}
.head-nav a{
  text-decoration:none;color:var(--ink2);font-weight:500;font-size:15px;
}
.head-nav a:hover{color:var(--accent)}
@media (max-width:640px){
  .head-nav .hide-sm{display:none}
  .brand .sub{display:none}
}

/* ---------- hero ---------- */
.hero{padding:66px 0 40px;border-bottom:1px solid var(--hair)}
.eyebrow{
  font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--accent);margin:0 0 16px;
}
h1{
  font-size:clamp(34px,5.4vw,58px);
  line-height:1.06;
  letter-spacing:-.035em;
  font-weight:800;
  margin:0 0 22px;
  text-wrap:balance;
  max-width:19ch;
}
.lede{
  font-size:clamp(18px,2.1vw,21px);
  line-height:1.55;
  color:var(--ink2);
  max-width:var(--read);
  margin:0 0 16px;
  text-wrap:pretty;
}
.lede strong{font-weight:700;color:var(--ink)}
.sub-lede{
  font-size:17px;color:var(--muted);max-width:var(--read);margin:0 0 30px;
  text-wrap:pretty;
}

/* ---------- buttons ---------- */
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:14px 24px;border-radius:999px;
  font-weight:700;font-size:16px;letter-spacing:-.01em;
  text-decoration:none;border:1px solid transparent;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-sm)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- sections ---------- */
section{padding:56px 0;border-bottom:1px solid var(--hair)}
section:last-of-type{border-bottom:0}
h2{
  font-size:clamp(25px,3.2vw,34px);line-height:1.14;letter-spacing:-.028em;
  font-weight:800;margin:0 0 14px;text-wrap:balance;max-width:22ch;
}
h3{
  font-size:19px;line-height:1.3;letter-spacing:-.02em;font-weight:700;margin:0 0 8px;
  text-wrap:balance;
}
p{margin:0 0 16px;max-width:var(--read);text-wrap:pretty}
.section-lede{color:var(--ink2);font-size:18px;margin-bottom:30px}

/* ---------- product cards ---------- */
.products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:8px}
@media (max-width:820px){.products{grid-template-columns:1fr}}
.pcard{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  padding:28px 26px 26px;
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;
}
.pcard .ptag{
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px;
}
.pcard h3{font-size:24px;letter-spacing:-.028em;margin-bottom:10px}
.pcard p{font-size:16.5px;color:var(--ink2);margin-bottom:14px;max-width:none}
.pcard .facts{list-style:none;margin:0 0 22px;padding:0;font-size:15.5px;color:var(--ink2)}
.pcard .facts li{padding:7px 0;border-top:1px solid var(--hair);text-wrap:pretty}
.pcard .facts li:first-child{border-top:0}
.pcard .btn-row{margin-top:auto}
.price{font-weight:800;color:var(--ink)}

/* ---------- answers list ---------- */
.answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:820px){.answers{grid-template-columns:1fr}}
.answer{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:20px 22px;
}
.answer h3{font-size:17.5px;margin-bottom:6px}
.answer p{font-size:15.5px;color:var(--ink2);margin:0;max-width:none}

/* ---------- honesty block ---------- */
.honesty{
  background:var(--bg2);border:1px solid var(--line);border-radius:20px;
  padding:30px 28px;
}
.honesty h2{margin-bottom:12px}
.honesty p:last-child{margin-bottom:0}

/* ---------- footer ---------- */
.site-foot{
  padding:42px 0 56px;border-top:1px solid var(--hair);
  color:var(--muted);font-size:14.5px;
}
.foot-grid{display:flex;flex-wrap:wrap;gap:30px 48px;margin-bottom:28px}
.foot-col h4{
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px;
}
.foot-col a{display:block;text-decoration:none;color:var(--ink2);padding:3px 0}
.foot-col a:hover{color:var(--accent)}
.legal{max-width:64ch;text-wrap:pretty}
.legal p{font-size:14px;margin-bottom:10px;max-width:none;color:var(--muted)}
.addr{font-style:normal;line-height:1.55;margin-bottom:14px;color:var(--muted)}
.addr .name{display:block;color:var(--ink2);font-weight:600}

/* ---------- article page shell (used by the 50) ---------- */
.article{padding:52px 0 20px}
/* an article column is a reading column, so the boxes line up with the prose
   instead of stretching across a width nobody reads at */
.article > .wrap{max-width:860px}
.article .meta{font-size:14px;color:var(--muted);margin:0 0 18px}
.article h2{margin-top:40px}
.article ul,.article ol{max-width:var(--read);padding-left:1.15em}
.article li{margin-bottom:9px;text-wrap:pretty}
.article .source{font-size:14.5px;color:var(--muted)}
.cta-band{
  background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:28px 26px;margin:44px 0 0;box-shadow:var(--shadow-sm);
}
.cta-band h2{margin-top:0}

/* ---------- article components ---------- */

/* the disclosure line that sits directly under every comparison headline */
.disclose{
  display:block;
  border-left:3px solid var(--accent);
  padding:2px 0 2px 14px;
  margin:0 0 26px;
  font-size:15.5px;
  color:var(--muted);
  max-width:var(--read);
  text-wrap:pretty;
}

/* the short answer box, the thing an answer engine lifts */
.verdict{
  background:var(--bg2);
  border:1px solid var(--line);
  border-radius:18px;
  padding:24px 24px 12px;
  margin:26px 0 8px;
}
.verdict h2{font-size:19px;margin:0 0 14px;letter-spacing:-.02em;max-width:none}
.verdict dl{margin:0}
.verdict dt{
  font-weight:700;font-size:16px;margin:0 0 3px;letter-spacing:-.015em;text-wrap:pretty;
}
.verdict dd{
  margin:0 0 16px;font-size:16px;color:var(--ink2);text-wrap:pretty;max-width:var(--read);
}
.verdict dd a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}

/* the block where the other product wins */
.theirs{
  border:1px solid var(--line);
  border-radius:18px;
  padding:24px 24px 8px;
  margin:26px 0;
  background:var(--surface);
}
.theirs h2{margin-top:0;font-size:21px;max-width:none}
.theirs ul{margin:0;padding-left:1.15em}

/* sources, cited with the date they were read */
.sources{margin:44px 0 0;padding:24px 0 0;border-top:1px solid var(--line)}
.sources h2{font-size:17px;margin:0 0 10px;max-width:none}
.sources ol{padding-left:1.2em;margin:0}
.sources li{font-size:14.5px;color:var(--muted);margin-bottom:8px;text-wrap:pretty}
.sources a{color:var(--ink2);text-underline-offset:2px}
.sources a:hover{color:var(--accent)}

/* related pages, the internal link graph */
.rel{margin:36px 0 0}
.rel h2{font-size:17px;margin:0 0 12px;max-width:none}
.rel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:820px){.rel-grid{grid-template-columns:1fr}}
.rel-grid{list-style:none;padding:0;margin:0}
.rel-grid li{margin:0}
.rel-grid a{
  display:block;text-decoration:none;
  border:1px solid var(--line);border-radius:14px;
  padding:14px 16px;font-size:15.5px;font-weight:600;color:var(--ink2);
  letter-spacing:-.015em;text-wrap:pretty;
}
.rel-grid a:hover{border-color:var(--accent);color:var(--accent)}

/* inline links in article body */
.article main a,.article p a,.article li a{color:var(--ink);text-underline-offset:2px}
.article p a:hover,.article li a:hover{color:var(--accent)}

/* ---------- neutral reference layer ---------- */

/* The index groups on the home page. A reference index is a list, not a card
   grid: the reader is scanning for their own question, and a list scans faster
   than a grid of equal-weight boxes. */
.idx{margin:0 0 40px}
.idx:last-child{margin-bottom:0}
.idx h2{
  font-size:13px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin:0 0 4px;max-width:none;
}
.idx .idx-note{font-size:15px;color:var(--muted);margin:0 0 16px;max-width:var(--read)}
.idx ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.idx li{border-bottom:1px solid var(--hair)}
.idx li a{
  display:block;text-decoration:none;padding:15px 0;
  font-size:18px;font-weight:600;letter-spacing:-.018em;color:var(--ink);
  text-wrap:pretty;
}
.idx li a:hover{color:var(--accent)}
.idx li a .say{
  display:block;font-size:15.5px;font-weight:400;color:var(--muted);
  letter-spacing:-.005em;margin-top:3px;max-width:var(--read);
}

/* The standing limits block. Every product described on the site gets one, at
   the same length and in the same type, including the ones the operator sells.
   The symmetry is the point: it is what a reader checks first. */
.limits{
  border:1px solid var(--line);border-radius:18px;
  padding:24px 24px 10px;margin:26px 0;background:var(--surface);
}
.limits h2{margin-top:0;font-size:19px;max-width:none;letter-spacing:-.02em}
.limits ul{margin:0;padding-left:1.15em}
.limits li{font-size:16px;color:var(--ink2);margin-bottom:10px}

/* How the pages are written. Numbered rules, quiet, no box, because a claim
   about the site's own method should not look like a badge. */
.method{margin-top:8px;counter-reset:rule}
.method .rule{
  display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--hair);
  max-width:var(--read);
}
.method .rule:first-child{border-top:0;padding-top:0}
.method .rule .n{
  flex:0 0 auto;font-size:14px;font-weight:700;color:var(--accent);
  padding-top:3px;letter-spacing:.02em;
}
.method .rule p{margin:0;font-size:16.5px;color:var(--ink2)}
.method .rule p strong{color:var(--ink);font-weight:700}

/* A plain fact table for prices, platforms and requirements. Reads as a
   datasheet, which is what it is. Never monospaced, never tabular figures. */
.spec{margin:22px 0;border-top:1px solid var(--line);max-width:var(--read)}
.spec .row{display:flex;gap:20px;padding:12px 0;border-bottom:1px solid var(--hair)}
.spec .k{flex:0 0 34%;font-size:15px;color:var(--muted);text-wrap:pretty}
.spec .v{flex:1 1 auto;font-size:16px;color:var(--ink2);text-wrap:pretty}
@media (max-width:560px){
  .spec .row{flex-direction:column;gap:2px}
  .spec .k{flex:none}
}

/* Steps in a procedure. The reader is doing this with one hand on a keyboard,
   so the step number stays out of the way and the instruction carries. */
.steps{list-style:none;margin:22px 0;padding:0;counter-reset:step;max-width:var(--read)}
.steps li{
  counter-increment:step;position:relative;padding:0 0 18px 40px;
}
.steps li::before{
  content:counter(step);position:absolute;left:0;top:1px;
  width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:var(--muted);
}
.steps li strong{display:block;font-size:17px;color:var(--ink);margin-bottom:3px}
.steps li span{display:block;font-size:16px;color:var(--ink2);text-wrap:pretty}

/* The operator disclosure. Same place on every page, readable, not decorated.
   It is neither hidden nor advertised. */
.operator{
  margin:0 0 18px;padding:14px 0 0;border-top:1px solid var(--hair);
  font-size:14.5px;color:var(--muted);max-width:64ch;text-wrap:pretty;
}
.operator strong{color:var(--ink2);font-weight:600}