/* Marketing pages only (Home, Features, Pricing). The dashboard never loads this sheet, so nothing here can change it.
   Same rules as styles.css: Danish Cream, square corners, no boxes or shadows, thin rules and whitespace between things. */

/* hero */
.hero-x{display:grid;grid-template-columns:1.2fr .8fr;gap:56px;align-items:end;padding-block:56px 64px}
.hero-x h1{font-family:var(--display);font-weight:800;font-size:clamp(36px,5.4vw,62px);line-height:1.04;letter-spacing:-.02em}
.hero-x h1 em{font-style:normal;color:var(--gold)}
.hero-x .lede{margin-top:22px;font-size:19px;color:var(--top-muted);max-width:36em}
.hero-x .cta{display:flex;flex-wrap:wrap;gap:18px;align-items:center;margin-top:30px}
.hero-sum{border-top:2px solid var(--fg);padding-top:18px;display:grid;gap:0}
.hero-sum .eyebrow{margin-bottom:6px}
.hero-sum .line{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-block:14px;border-top:1px solid var(--line)}
.hero-sum .line:first-of-type{border-top:0}
.hero-sum .line > span{color:var(--muted);font-size:14px}
.hero-sum .line b{font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.01em}
.hero-sum .line.strike b{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px;font-weight:600}
.hero-sum .line.ours b{color:var(--fg)}
.hero-sum .line b small{font-size:14px;font-weight:600;color:var(--muted);margin-left:4px}
.hero-sum .save{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);padding-top:12px;border-top:1px solid var(--line)}
.hero-sum a{font-size:14px;margin-top:12px;justify-self:start}

/* a row of plain figures under the hero */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
.facts div{padding:22px 20px 22px 0;display:grid;gap:4px}
.facts div + div{padding-left:20px;border-left:1px solid var(--line)}
.facts b{font-family:var(--display);font-size:26px;font-weight:700;letter-spacing:-.01em}
.facts span{color:var(--muted);font-size:14px;line-height:1.4}

/* the ten dashboard sections */
.mods{display:grid;grid-template-columns:repeat(3,1fr);column-gap:40px}
.mod{display:grid;gap:8px;align-content:start;padding-block:24px 28px;border-top:1px solid var(--line)}
.mod .n{font-family:var(--mono);font-size:12px;color:var(--gold);letter-spacing:.08em}
.mod h3{font-family:var(--display);font-size:19px;font-weight:700}
.mod p{color:var(--muted);font-size:15px}
.mod a{font-size:14px;font-weight:600;text-decoration:none}
.mod a:hover{text-decoration:underline}

/* spotlights: copy on one side, an illustration drawn in rules on the other */
.spot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}
.spot + .spot{margin-top:88px;padding-top:72px;border-top:1px solid var(--line)}
.spot h2{font-family:var(--display);font-size:clamp(26px,3.4vw,38px);font-weight:700;line-height:1.12;margin-top:10px}
.spot > div > p{color:var(--muted);font-size:17px;margin-top:14px;max-width:34em}
.steps{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:4px 12px;padding-block:14px;border-top:1px solid var(--line)}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:13px;color:var(--gold);padding-top:2px;grid-row:span 2}
.steps b{font-weight:600}
.steps span{color:var(--muted);font-size:15px}
.spot .cta{margin-top:24px;display:flex;flex-wrap:wrap;gap:18px;align-items:center}

.mock{border-top:2px solid var(--fg);padding-top:14px;font-size:14px}
.mock .mk-bar{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;padding-bottom:12px;border-bottom:1px solid var(--line)}
.mock .mk-bar b{font-family:var(--display);font-size:15px}
.mock .mk-bar span{font-family:var(--mono);font-size:12px;color:var(--muted)}
.mock .q{display:grid;grid-template-columns:repeat(3,auto) 1fr;gap:16px;padding-block:12px;border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.mock .q i{font-style:normal;color:var(--fg);border-bottom:1px solid var(--fg);padding-bottom:1px}
.biz{display:grid;grid-template-columns:1fr auto;gap:4px 16px;padding-block:14px;border-bottom:1px solid var(--line)}
.biz b{font-weight:600}
.biz .k{font-size:13px;color:var(--muted)}
.biz .sc{grid-row:span 2;text-align:right;display:grid;gap:6px;justify-items:end;align-content:start}
.biz .sc strong{font-family:var(--display);font-size:22px;line-height:1}
.biz .sc em{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}
.biz .why{grid-column:1/-1;font-size:13.5px;color:var(--muted);border-left:2px solid var(--gilt);padding-left:10px;margin-top:4px}
.mock .note,.minpaper .note{font-family:var(--mono);font-size:11.5px;color:var(--muted);padding-top:10px}
.dims{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;margin-top:20px}
.dims div{display:flex;justify-content:space-between;gap:12px;padding-block:8px;border-top:1px solid var(--line);font-size:14px}
.dims b{font-family:var(--mono);font-weight:500;color:var(--gold)}

.minpaper{border-top:2px solid var(--fg);padding-top:14px;font-size:14px}
.minpaper .row{display:grid;grid-template-columns:150px 1fr auto;gap:12px;align-items:baseline;padding-block:11px;border-bottom:1px solid var(--line)}
.minpaper .row span{color:var(--muted);font-size:13px}
.minpaper .row .how{font-family:var(--mono);font-size:11px;color:var(--blue);letter-spacing:.06em;text-transform:uppercase}
.minpaper .rec{display:flex;justify-content:space-between;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line)}
.minpaper .rec b{font-family:var(--display);font-size:15px}
.minpaper .rec em{font-style:normal;font-family:var(--mono);font-size:12px;color:#9b2c2c}
.minpaper .filled{color:var(--fg)}
.minpaper .filled mark{background:none;color:inherit;box-shadow:inset 0 -2px 0 var(--gold-soft)}

/* what it would cost to buy each piece on its own */
.value{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:56px;align-items:start}
.vtable{width:100%;border-collapse:collapse;font-size:15px}
.vtable th{font-family:var(--mono);font-weight:500;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 12px 10px 0;border-bottom:2px solid var(--fg)}
.vtable th:last-child,.vtable td:last-child{text-align:right;padding-right:0}
.vtable td{padding:14px 12px 14px 0;border-bottom:1px solid var(--line);vertical-align:top}
.vtable td b{font-weight:600;display:block}
.vtable td small{display:block;color:var(--muted);font-size:13px;margin-top:2px}
.vtable td.amt{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.vtable td.inc{color:var(--muted);font-size:14px}
.vtable tfoot td{border-bottom:0;border-top:2px solid var(--fg);font-weight:700;font-family:var(--display);font-size:17px}
.vtable tr.extra td{color:var(--muted)}
.vtable tr.extra td b{color:var(--fg)}
.vsum{position:sticky;top:24px;display:grid;gap:0;border-top:2px solid var(--fg);padding-top:16px}
.vsum .big{padding-block:16px;border-top:1px solid var(--line);display:grid;gap:2px}
.vsum .big:first-of-type{border-top:0;padding-top:4px}
.vsum .big > span{font-size:13px;color:var(--muted)}
.vsum .big b{font-family:var(--display);font-size:40px;font-weight:800;letter-spacing:-.02em;line-height:1.05}
.vsum .big.them b{color:var(--muted);font-weight:700;font-size:32px}
.vsum .big.save b{color:var(--gold)}
.vsum p{font-size:13.5px;color:var(--muted);margin-top:6px}
.vsum .btn{margin-top:18px;justify-self:start}
.sources{margin-top:22px;font-size:12.5px;color:var(--muted);line-height:1.6;max-width:72ch}
.sources a{color:var(--muted)}

/* three plain promises */
.trust{display:grid;grid-template-columns:repeat(3,1fr);column-gap:40px}
.trust div{border-top:2px solid var(--gilt);padding-top:16px;display:grid;gap:8px;align-content:start}
.trust h3{font-family:var(--display);font-size:17px}
.trust p{color:var(--muted);font-size:15px}

/* Features: jump links to each section */
.jump{display:flex;flex-wrap:wrap;gap:6px 22px;padding-block:14px;border-bottom:1px solid var(--line);font-size:14px;font-weight:500}
.jump a{color:var(--muted);text-decoration:none}
.jump a:hover{color:var(--fg);text-decoration:underline}
.detail .tagline{font-size:14px;color:var(--muted);margin-top:8px}

@media (max-width:980px){
  .hero-x,.spot,.value{grid-template-columns:minmax(0,1fr);gap:40px}
  .mods{grid-template-columns:1fr 1fr}
  .vsum{position:static}
}
@media (max-width:700px){
  .facts{grid-template-columns:1fr 1fr}
  .facts div:nth-child(3){padding-left:0;border-left:0}
  .facts div:nth-child(n+3){border-top:1px solid var(--line)}
  .mods,.trust,.dims{grid-template-columns:1fr}
  .trust{row-gap:28px}
  .minpaper .row{grid-template-columns:1fr auto}
  .minpaper .row > span:first-child{grid-column:1/-1}
  .vtable th:nth-child(2),.vtable td:nth-child(2){display:none}
  .mock .q{grid-template-columns:1fr 1fr}
}
.spot > *,.value > *,.hero-x > *{min-width:0}
.hero-sum .line b small{display:inline-block;text-decoration:none}
.vtable td.inc{white-space:nowrap}