/* Weather by PreteWorks — tokens mirror cashSystem src/brand.ts (house look). */
:root {
  color-scheme: dark;
  --bg: #000; --hairline: #1c1c20; --border-2: #26262b; --text: #fff; --body: #e5e7ea;
  --secondary: #c9ccd2; --muted: #9a9da4; --dim: #8a8d93; --faint: #3a3a40;
  --dim-title: #b9bcc2; --accent: #00E5FF;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text);
  font-family: Barlow, system-ui, -apple-system, sans-serif;
  display: flex; flex-direction: column; -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tilt { transform: skewX(-13deg); transform-origin: left bottom; }
.wm { display: block; height: auto; overflow: visible; }

.site-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 80px; border-bottom: 1px solid var(--hairline);
}
.brand { display: flex; min-width: 0; align-items: baseline; gap: 12px; color: inherit; }
.brand:hover { text-decoration: none; }
.brand .wm { width: 150px; }
.brand .by {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 14px;
  letter-spacing: 5px; color: var(--dim-title);
}
.head-nav {
  display: flex; gap: 32px; font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600; font-size: 15px; letter-spacing: 2px; text-transform: uppercase;
}
.head-nav a { color: var(--secondary); }
.head-nav a:hover { color: var(--accent); text-decoration: none; }

main { flex: 1; }
.hero {
  display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: center;
  padding: 104px 80px 96px; border-bottom: 1px solid var(--hairline);
}
.kicker {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px;
  letter-spacing: 5px; text-transform: uppercase; color: var(--accent);
}
.hero-title {
  margin: 0; font-family: Anton, sans-serif; font-weight: 400; font-size: 76px;
  line-height: 1.08; letter-spacing: .5px; text-transform: uppercase;
}
.lede { margin: 34px 0 0; font-size: 20px; line-height: 1.5; color: var(--muted); max-width: 580px; }
.status {
  display: inline-block; margin-top: 34px; border: 1px solid var(--accent); color: var(--accent);
  padding: 10px 20px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 15px; letter-spacing: 3px; text-transform: uppercase;
}
.hero > div { min-width: 0; }
.hero-icon { width: 240px; height: 240px; border-radius: 54px; display: block; border: 1px solid var(--border-2); }

.features {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--hairline);
}
.feature { padding: 48px 32px 52px; border-right: 1px solid var(--hairline); }
.feature:first-child { padding-left: 80px; }
.feature:last-child { border-right: none; padding-right: 80px; }
.eyebrow {
  margin: 0 0 12px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 13px; letter-spacing: 4px; text-transform: uppercase; color: var(--accent);
}
.feature p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--secondary); }

.doc { padding: 72px 80px 88px; max-width: 860px; }
.doc h1 {
  margin: 14px 0 20px; font-family: Anton, sans-serif; font-weight: 400; font-size: 48px;
  letter-spacing: .5px; text-transform: uppercase;
}
.doc h2 {
  margin: 40px 0 10px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 18px; letter-spacing: 3px; text-transform: uppercase; color: var(--dim-title);
}
.doc p, .doc li { font-size: 17px; line-height: 1.6; color: var(--body); }
.doc .muted { color: var(--muted); }

.site-foot {
  display: flex; justify-content: space-between; gap: 16px; margin: 0 80px; padding: 20px 0;
  border-top: 1px solid var(--hairline); font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600; font-size: 13px; letter-spacing: 2px; color: var(--dim);
}
.site-foot nav { display: flex; gap: 24px; }
.site-foot a { color: var(--dim); }
.site-foot a:hover { color: var(--accent); }
.credit { margin: 0 80px; padding: 0 0 24px; font-size: 13px; color: var(--dim); }


.plans { padding: 80px; }
.plans h2 {
  margin: 0; font-family: Anton, sans-serif; font-weight: 400; font-size: 44px;
  letter-spacing: .5px; text-transform: uppercase;
}
.plans-sub { margin: 14px 0 0; font-size: 18px; color: var(--muted); max-width: 640px; }
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; }
.plan { border: 1px solid var(--border-2); padding: 32px 36px; }
.plan-pro { border-color: var(--accent); }
.plan-name {
  margin: 0 0 18px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 15px; letter-spacing: 4px; text-transform: uppercase; color: var(--dim-title);
}
.plan-pro .plan-name { color: var(--accent); }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.plan li { font-size: 16px; line-height: 1.5; color: var(--secondary); padding-left: 18px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; background: var(--faint); }
.plan-pro li::before { background: var(--accent); }
.plan li b { color: var(--text); font-weight: 600; }
.pricing { display: flex; flex-wrap: wrap; gap: 48px; margin-top: 44px; }
.price { display: flex; flex-direction: column; gap: 4px; }
.price .amt { font-family: Anton, sans-serif; font-size: 40px; line-height: 1; }
.price .per {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 14px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--dim);
}
.plans-note { margin: 32px 0 0; font-size: 15px; color: var(--dim); }


.block {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px;
  padding: 80px; border-bottom: 1px solid var(--hairline);
}
.block h2 {
  margin: 0; font-family: Anton, sans-serif; font-weight: 400; font-size: 44px;
  line-height: 1.1; letter-spacing: .5px; text-transform: uppercase;
}
.block-lede { margin: 18px 0 0; font-size: 18px; line-height: 1.55; color: var(--muted); }
.block-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; align-self: center; }
.block-list li {
  padding: 18px 0 18px 22px; border-bottom: 1px solid var(--hairline); position: relative;
  font-size: 17px; line-height: 1.5; color: var(--secondary);
}
.block-list li:first-child { border-top: 1px solid var(--hairline); }
.block-list li::before { content: ""; position: absolute; left: 0; top: 1.55em; width: 6px; height: 6px; background: var(--accent); }
.block-list li b { color: var(--text); font-weight: 600; }

@media (max-width: 900px) {
  .site-head { padding: 16px 20px; }
  .brand .wm { width: 108px; }
  .brand .by { display: none; }
  .head-nav { gap: 20px; font-size: 14px; }
  .hero { grid-template-columns: 1fr; gap: 40px; padding: 48px 20px 56px; }
  .hero-icon { width: 128px; height: 128px; border-radius: 29px; order: -1; }
  .hero-title { font-size: 44px; }
  .br-wide { display: none; }
  .lede { font-size: 17px; }
  .features { grid-template-columns: 1fr; }
  .feature, .feature:first-child, .feature:last-child {
    padding: 32px 20px; border-right: none; border-bottom: 1px solid var(--hairline);
  }
  .feature:last-child { border-bottom: none; }
  .doc { padding: 48px 20px 64px; }
  .plans { padding: 48px 20px; }
  .block { grid-template-columns: 1fr; gap: 28px; padding: 48px 20px; }
  .block h2 { font-size: 30px; }
  .block-lede { font-size: 16px; }
  .block-list li { font-size: 16px; }
  .plans h2 { font-size: 30px; }
  .plan-grid { grid-template-columns: 1fr; }
  .plan { padding: 24px 20px; }
  .pricing { gap: 28px; }
  .price .amt { font-size: 32px; }
  .doc h1 { font-size: 34px; }
  .site-foot { margin: 0 20px; flex-direction: column; gap: 8px; }
  .credit { margin: 0 20px; }
}