/* ==========================================================================
   Sensecast — components
   ========================================================================== */

/* --------------------------------------------------------------------------
   Store badges

   Built to the familiar two-line lockup so they read as store badges at a
   glance. They are NOT Apple's or Google's official artwork — both require
   their own supplied files, and Apple only licenses the "Download on the App
   Store" badge for apps that are actually live. Swap in the real assets from
   Apple Marketing Resources and the Google Play badge generator at launch.
   -------------------------------------------------------------------------- */

.badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;align-items:center}

.badge{
  display:inline-flex;align-items:center;gap:11px;
  min-width:168px;padding:9px 16px;
  border:1px solid rgba(255,255,255,.28);border-radius:9px;
  background:#000;text-decoration:none;color:#fff;
  transition:border-color .2s,transform .16s,box-shadow .2s;
}
.badge svg{flex:none}
.badge .lines{display:flex;flex-direction:column;line-height:1.1}
.badge .lines small{
  font-size:10px;letter-spacing:.02em;font-weight:400;
  color:rgba(255,255,255,.86);white-space:nowrap;
}
.badge .lines b{
  font-family:var(--body);font-size:19px;font-weight:500;
  letter-spacing:-.005em;white-space:nowrap;margin-top:1px;
}
.badge.live:hover{
  border-color:rgba(255,255,255,.6);transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.6);
}
.badge.soon{opacity:.42;cursor:default}
.badges-note{
  width:100%;margin:4px 0 0;
  font-family:var(--mono);font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--haze-dim);
}

/* --------------------------------------------------------------------------
   Dew point sensation scale — bands match the app's own glossary sheet
   -------------------------------------------------------------------------- */

.scale-wrap{
  margin-top:44px;
  border:1px solid var(--line);
  border-radius:14px;
  padding:26px 24px 22px;
  background:rgba(15,23,42,.5);
}
.scale-bar{
  position:relative;height:12px;border-radius:6px;
  background:linear-gradient(90deg,#35D9F0 0%,#4ADE80 28%,#EAB308 52%,#F97316 76%,#EF4444 100%);
}
.scale-marker{
  position:absolute;top:-9px;transform:translateX(-50%);
  width:2px;height:30px;background:var(--paper);
  box-shadow:0 0 0 2px rgba(6,10,18,.8);
}
.scale-marker b{
  position:absolute;top:-25px;right:0;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  color:var(--paper);white-space:nowrap;
}
.scale-labels{display:flex;justify-content:space-between;margin-top:16px;gap:8px}
.scale-labels div{flex:1;text-align:center;min-width:0}
.scale-labels .t{
  display:block;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;color:var(--haze-dim);text-transform:uppercase;
}
.scale-labels .d{display:block;font-size:13.5px;color:var(--haze);margin-top:5px}

/* --------------------------------------------------------------------------
   Pillars — three-up feature blocks
   -------------------------------------------------------------------------- */

.pillars{
  display:grid;gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
  border-radius:16px;overflow:hidden;
  margin-top:52px;
}
@media(min-width:900px){.pillars{grid-template-columns:repeat(3,1fr)}}
.pillar{
  background:linear-gradient(180deg,rgba(15,23,42,.9),rgba(10,17,32,.9));
  padding:34px 30px 30px;
  display:flex;flex-direction:column;
}
.pillar h3{
  font-family:var(--disp);font-variation-settings:"wdth" 108;
  font-weight:700;font-size:25px;letter-spacing:-.015em;
  line-height:1.14;margin:0 0 14px;
}
.pillar p{color:var(--haze);font-size:15.5px;line-height:1.62;margin:0 0 18px}
.pillar ul{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:9px}
.pillar li{position:relative;padding-left:19px;font-size:14.5px;color:var(--haze);line-height:1.5}
.pillar li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--signal);opacity:.8}
.pillar.sense li::before{background:var(--solar)}
.pillar.grid li::before{background:var(--alert)}

.src{
  margin-top:auto;padding-top:18px;
  border-top:1px solid var(--line-soft);
  font-family:var(--mono);font-size:11px;letter-spacing:.01em;
  color:var(--haze-dim);line-height:1.65;
}
.src b{
  display:block;margin-bottom:6px;
  font-weight:500;font-size:9.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--signal);
}
.pillar.sense .src b{color:var(--solar)}
.pillar.grid .src b{color:var(--alert)}

/* --------------------------------------------------------------------------
   Capability cards
   -------------------------------------------------------------------------- */

.caps{display:grid;gap:18px;margin-top:44px}
@media(min-width:700px){.caps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.caps{grid-template-columns:repeat(3,1fr)}}
.cap{
  border:1px solid var(--line-soft);border-radius:13px;
  padding:24px 22px;background:rgba(15,23,42,.44);
  transition:border-color .22s,transform .22s;
}
.cap:hover{border-color:var(--line);transform:translateY(-2px)}
.cap .tag{
  display:flex;align-items:center;gap:8px;margin-bottom:12px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--haze-dim);
}
.cap h4{
  font-family:var(--disp);font-variation-settings:"wdth" 106;
  font-weight:600;font-size:17.5px;margin:0 0 9px;letter-spacing:-.008em;
}
.cap p{margin:0;font-size:14.5px;color:var(--haze);line-height:1.58}

/* --------------------------------------------------------------------------
   Stat strip
   -------------------------------------------------------------------------- */

.stats{
  display:grid;gap:1px;
  background:var(--line-soft);
  border-block:1px solid var(--line-soft);
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
.stat{background:var(--ink);padding:30px 22px;text-align:center}
.stat b{
  display:block;
  font-family:var(--disp);font-variation-settings:"wdth" 112;
  font-weight:700;font-size:clamp(30px,4vw,42px);
  letter-spacing:-.03em;color:var(--solar);line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat span{
  display:block;margin-top:9px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--haze-dim);
}

/* --------------------------------------------------------------------------
   Source manifest
   -------------------------------------------------------------------------- */

.wall{
  display:grid;
  background:rgba(10,17,32,.88);
  border:1px solid var(--line-soft);
  border-radius:14px;overflow:hidden;margin-top:44px;
  grid-template-columns:repeat(auto-fill,minmax(178px,1fr));
}
.src-cell{
  padding:13px 15px;
  display:flex;gap:10px;align-items:baseline;
  transition:background .2s;
  border-right:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
}
.src-cell:hover{background:rgba(22,33,58,.95)}
.src-cell .fl{font-size:14px;flex:none;line-height:1}
.src-cell .nm{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--paper);line-height:1.35}
.src-cell .rg{display:block;font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--haze-dim);margin-top:2px}
.src-cell.is-pro .nm{color:var(--solar)}
.wall-note{
  margin-top:18px;
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  color:var(--haze-dim);text-transform:uppercase;
}
.wall-key{display:flex;flex-wrap:wrap;gap:20px;margin-top:14px;font-family:var(--mono);font-size:11px;color:var(--haze-dim)}
.wall-key span{display:flex;align-items:center;gap:7px}
.wall-key i{width:8px;height:8px;border-radius:50%;background:var(--paper);flex:none}
.wall-key i.solar{background:var(--solar)}

/* --------------------------------------------------------------------------
   Widget previews
   -------------------------------------------------------------------------- */

.widgets{display:flex;flex-wrap:wrap;gap:18px;margin-top:40px;align-items:flex-end}
.widgets>div{display:flex;flex-direction:column;justify-content:flex-end}
.wdg{
  background:rgba(10,17,32,.92);
  border:1px solid var(--line);
  border-radius:16px;padding:16px 18px;
  font-family:var(--body);
}
.wdg-cap{
  margin:10px 2px 0;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--haze-dim);
}
.wdg-inline{display:flex;align-items:center;gap:8px;border-radius:999px;padding:9px 17px;font-size:14px;color:var(--paper)}
.wdg-circ{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;padding:0;position:relative}
.wdg-circ .ring{
  position:absolute;inset:7px;border-radius:50%;
  background:conic-gradient(var(--signal) 0 61%,rgba(143,164,196,.18) 61% 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
}
.wdg-circ .mid{text-align:center;line-height:1.1}
.wdg-circ .mid b{display:block;font-family:var(--disp);font-weight:700;font-size:24px;letter-spacing:-.02em}
.wdg-circ .mid small{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--haze-dim)}
.wdg-rect{min-width:212px}
.wdg-rect .city{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--haze-dim)}
.wdg-rect .big{display:flex;align-items:baseline;gap:9px;margin-top:5px}
.wdg-rect .big b{font-family:var(--disp);font-weight:700;font-size:32px;letter-spacing:-.03em;line-height:1}
.wdg-rect .big span{font-size:14px;color:var(--haze)}
.wdg-rect .meta{margin-top:9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--haze-dim);display:flex;gap:14px}

/* --------------------------------------------------------------------------
   Academy — glossary catalogue and the three-layer explainer
   -------------------------------------------------------------------------- */

.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:34px}
.chip{
  padding:8px 15px;border-radius:999px;
  border:1px solid var(--line);background:rgba(15,23,42,.6);
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--haze);
}
.chip.on{background:rgba(53,217,240,.13);border-color:rgba(53,217,240,.4);color:var(--signal)}

.gloss{
  display:grid;gap:1px;
  background:var(--line-soft);
  border:1px solid var(--line-soft);
  border-radius:14px;overflow:hidden;margin-top:26px;
}
@media(min-width:760px){.gloss{grid-template-columns:repeat(2,1fr)}}
.gl{background:rgba(10,17,32,.9);padding:20px 22px;transition:background .2s}
.gl:hover{background:rgba(22,33,58,.9)}
.gl h4{font-family:var(--disp);font-variation-settings:"wdth" 106;font-weight:600;font-size:16.5px;margin:0 0 7px}
.gl p{margin:0;font-size:14px;color:var(--haze);line-height:1.55}
.gl .cat{
  display:block;margin-bottom:9px;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--signal);opacity:.8;
}

/* the three layers of an explanation sheet */
.layers{display:grid;gap:18px;margin-top:40px}
@media(min-width:860px){.layers{grid-template-columns:repeat(3,1fr)}}
.layer{
  border:1px solid var(--line);border-radius:14px;
  padding:26px 24px;background:rgba(15,23,42,.55);
  display:flex;flex-direction:column;
}
.layer .step{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--haze-dim);margin:0 0 14px;
}
.layer h4{font-family:var(--disp);font-variation-settings:"wdth" 108;font-weight:700;font-size:20px;margin:0 0 12px;letter-spacing:-.012em}
.layer p{margin:0;font-size:14.5px;color:var(--haze);line-height:1.6}
.layer .demo{
  margin-top:auto;padding:16px;border-radius:10px;
  background:rgba(6,10,18,.7);border:1px solid var(--line-soft);
  font-size:14px;color:var(--paper);line-height:1.55;
}
.layer .demo em{color:var(--solar);font-style:normal}

/* the dew point band table, exactly as the app states it */
.bands{margin-top:auto;padding-top:18px;display:flex;flex-direction:column;gap:0}
.band{
  display:flex;align-items:center;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--line-soft);
  font-size:14px;
}
.band:last-child{border-bottom:0}
.band i{width:9px;height:9px;border-radius:50%;flex:none}
.band .r{font-family:var(--mono);font-size:11.5px;color:var(--paper);width:76px;flex:none;font-variant-numeric:tabular-nums}
.band .s{color:var(--haze)}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.plans{display:grid;gap:18px;margin-top:44px}
@media(min-width:620px){.plans{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.plans{grid-template-columns:repeat(4,1fr)}}
.plan{
  border:1px solid var(--line);border-radius:16px;
  padding:30px 26px;background:rgba(15,23,42,.6);
  display:flex;flex-direction:column;position:relative;
}
.plan.feature{border-color:rgba(245,185,59,.45);background:linear-gradient(170deg,rgba(38,30,12,.7),rgba(15,23,42,.75))}
.plan .flag{
  position:absolute;top:-1px;right:20px;
  padding:5px 11px;border-radius:0 0 6px 6px;
  background:var(--solar);color:#1A1204;
  font-family:var(--mono);font-size:9px;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
}
.plan h3{font-family:var(--disp);font-variation-settings:"wdth" 108;font-weight:700;font-size:21px;margin:0 0 6px;letter-spacing:-.01em}
.plan .price{
  display:flex;align-items:baseline;gap:8px;margin:16px 0 4px;
  font-family:var(--disp);font-variation-settings:"wdth" 112;
  font-weight:700;font-size:44px;letter-spacing:-.035em;line-height:1;
}
.plan .price{font-size:clamp(34px,3.4vw,42px)}
.plan .price small{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.06em;color:var(--haze-dim)}
.plan.free{border-color:rgba(74,222,128,.32)}
.plan.free li::before{border-color:var(--good)}
.plan.free .flag{background:var(--good);color:#04140A}
.plan.lifetime{border-color:rgba(53,217,240,.4)}
.plan .sub{margin:0;font-size:13.5px;color:var(--haze-dim);line-height:1.5;min-height:2.9em}
.plan ul{list-style:none;padding:0;margin:22px 0 26px;display:flex;flex-direction:column;gap:10px}
.plan li{position:relative;padding-left:22px;font-size:14.5px;color:var(--haze);line-height:1.5}
.plan li::before{
  content:"";position:absolute;left:0;top:7px;
  width:9px;height:5px;border-left:1.5px solid var(--signal);border-bottom:1.5px solid var(--signal);
  transform:rotate(-45deg);
}
.plan.feature li::before{border-color:var(--solar)}
.plan .btn{margin-top:auto;justify-content:center}

/* free vs pro comparison */
.compare{
  width:100%;border-collapse:collapse;margin-top:40px;
  font-size:14.5px;
}
.compare th,.compare td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line-soft)}
.compare thead th{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--haze-dim);font-weight:500;
  border-bottom:1px solid var(--line);
}
.compare tbody th{font-weight:400;color:var(--paper)}
.compare td{text-align:center;width:110px;color:var(--haze-dim);font-family:var(--mono);font-size:12px}
.compare td.yes{color:var(--good)}
.compare td.pro{color:var(--solar)}
.compare-wrap{overflow-x:auto}

/* --------------------------------------------------------------------------
   Beta / waitlist
   -------------------------------------------------------------------------- */

.beta{
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:linear-gradient(150deg,rgba(22,33,58,.9),rgba(10,17,32,.95));
}
.beta-grid{display:grid}
@media(min-width:860px){.beta-grid{grid-template-columns:1.15fr .85fr}}
.beta-main{padding:clamp(30px,4.5vw,52px)}
.beta-main h2{
  font-family:var(--disp);font-variation-settings:"wdth" 112;
  font-weight:700;font-size:clamp(28px,4.2vw,42px);
  letter-spacing:-.025em;line-height:1.06;margin:0 0 16px;
}
.beta-side{
  border-top:1px solid var(--line-soft);
  padding:clamp(28px,4vw,44px);
  background:rgba(6,10,18,.5);
  display:flex;flex-direction:column;justify-content:center;
}
@media(min-width:860px){.beta-side{border-top:0;border-left:1px solid var(--line-soft)}}
.beta-side h3{
  margin:0 0 16px;font-weight:500;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--signal);
}
.beta-facts{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:8px}
.beta-facts li{
  display:flex;gap:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--haze-dim);
}
.beta-facts b{color:var(--paper);font-weight:500}

.form{display:flex;flex-direction:column;gap:11px}
.form input{
  width:100%;padding:13px 15px;border-radius:10px;
  border:1px solid var(--line);background:rgba(6,10,18,.75);
  color:var(--paper);font-family:var(--body);font-size:15px;
}
.form input::placeholder{color:var(--haze-dim)}
.form input:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 3px rgba(53,217,240,.13)}
.form button{justify-content:center;width:100%}
.form-msg{
  margin:0;min-height:1.6em;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;
  line-height:1.6;color:var(--haze-dim);
}
.form-msg.ok{color:var(--signal)}
.form-msg.err{color:var(--alert)}
.form-foot{margin:16px 0 0;font-size:13.5px;line-height:1.55;color:var(--haze-dim)}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */

@media(max-width:640px){
  .scale-labels .d{display:none}
}

/* --------------------------------------------------------------------------
   Screenshot gallery — real captures, framed as devices
   -------------------------------------------------------------------------- */

.shots{
  display:grid;gap:34px 22px;margin-top:44px;
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:560px){.shots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:940px){.shots{grid-template-columns:repeat(3,minmax(0,1fr))}}
.shot{display:flex;flex-direction:column;gap:14px}
.shot figure{
  margin:0;border-radius:26px;overflow:hidden;
  border:1px solid var(--line);
  background:var(--slate);
  box-shadow:0 26px 54px -26px rgba(0,0,0,.9);
  transition:transform .25s cubic-bezier(.22,1,.36,1),border-color .25s;
}
.shot:hover figure{transform:translateY(-5px);border-color:var(--signal)}
.shot img{width:100%;height:auto;display:block}
.shot figcaption{padding:0 2px}
.shot .t{
  display:flex;align-items:center;gap:8px;margin-bottom:5px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--signal);
}
.shot h4{
  font-family:var(--disp);font-variation-settings:"wdth" 106;
  font-weight:600;font-size:16px;margin:0 0 5px;letter-spacing:-.008em;
}
.shot p{margin:0;font-size:13.5px;line-height:1.5;color:var(--haze)}

/* a single screenshot pulled alongside prose */
.shot-aside{
  display:grid;gap:34px;margin-top:44px;align-items:center;
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:820px){.shot-aside{grid-template-columns:300px minmax(0,1fr)}}
@media(min-width:820px){.shot-aside.flip{grid-template-columns:minmax(0,1fr) 300px}}
@media(min-width:820px){.shot-aside.flip figure{order:2}}
.shot-aside figure{
  margin:0;border-radius:26px;overflow:hidden;
  border:1px solid var(--line);background:var(--slate);
  box-shadow:0 26px 54px -26px rgba(0,0,0,.9);
}
.shot-aside img{width:100%;height:auto;display:block}

/* --------------------------------------------------------------------------
   Hero — the pitch beside the product, so "it is a phone app" lands instantly
   -------------------------------------------------------------------------- */

.hero-grid{display:grid;gap:clamp(34px,5vw,56px);align-items:center}
@media(min-width:920px){.hero-grid{grid-template-columns:minmax(0,1fr) 306px}}
/* the headline shares the row with the phone now, so it cannot run as wide */
.hero-grid .h1{font-size:clamp(38px,5vw,62px)}
.hero-phone{
  margin:0;border-radius:30px;overflow:hidden;
  border:1px solid var(--line);background:var(--slate);
  box-shadow:0 40px 80px -32px rgba(0,0,0,.95);
  max-width:306px;justify-self:center;
}
.hero-phone img{width:100%;height:auto;display:block}
.platforms{
  display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:26px;
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--haze-dim);
}
/* Direct children only: the items carry nested spans for stamped counts,
   and a descendant selector gave those a second bullet. */
.platforms>span{display:flex;align-items:center;gap:7px}
.platforms>span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--signal);opacity:.7}

/* Per-platform availability in the hero eyebrow.
   Named pf-* rather than beta/soon: `.beta` is the call-to-action panel below
   and `.soon` dims store badges — reusing either here inherits their box.

   Colour encodes state, not brand: the two shipping platforms get distinct
   bright hues so they read as separate items at a glance, and the two that are
   not out yet share the muted gold because they are in the same state. */
.eyebrow-platforms{letter-spacing:.12em;gap:9px 15px}
.eyebrow-platforms .pf{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.eyebrow-platforms .pf::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;flex:none;
}
.eyebrow-platforms .pf-label{color:var(--haze-dim)}
.eyebrow-platforms .pf-ios{color:var(--signal)}
.eyebrow-platforms .pf-android{color:#3DDC84}
.eyebrow-platforms .pf-macos{color:var(--solar)}
.eyebrow-platforms .pf-web{color:var(--solar);opacity:.72}

/* ==========================================================================
   Legal pages (privacy.html, terms.html)

   A single reading column rather than the marketing grid. These pages are read
   by people looking for one specific answer and by store reviewers checking a
   claim, so the section numbers are visible, anchorable and linkable.
   ========================================================================== */
.legal{max-width:74ch;margin-inline:auto}
.legal-head{border-bottom:1px solid var(--line-soft);padding-bottom:30px;margin-bottom:8px}
.legal-head .lede{margin-top:18px}
.legal-stamp{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  color:var(--haze-dim);margin:22px 0 0;
}

/* Plain-language summary. Deliberately first: most people want the gist, and
   burying it under thirteen numbered clauses would be a choice to obscure it. */
.legal-tldr{
  margin:34px 0 0;padding:24px 26px;border-radius:14px;
  border:1px solid var(--line);background:rgba(15,23,42,.55);
}
.legal-tldr h2{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--signal);margin:0 0 14px;
}
.legal-tldr ul{margin:0;padding-left:18px;display:grid;gap:9px}
.legal-tldr li{color:var(--paper);font-size:16px;line-height:1.6}
.legal-tldr li b{font-weight:500;color:#fff}

.legal-sec{padding-top:44px;scroll-margin-top:88px}
.legal-sec h2{
  font-family:var(--disp);font-size:22px;font-weight:600;letter-spacing:-.015em;
  margin:0 0 14px;display:flex;gap:12px;align-items:baseline;
}
.legal-sec h2 .n{
  font-family:var(--mono);font-size:13px;font-weight:400;
  color:var(--signal);opacity:.8;flex:none;
}
.legal-sec h3{
  font-size:16px;font-weight:600;color:var(--paper);
  margin:26px 0 8px;letter-spacing:-.005em;
}
.legal-sec p{color:var(--haze);font-size:16px;line-height:1.72;margin:0 0 14px}
.legal-sec ul{margin:0 0 14px;padding-left:20px;display:grid;gap:10px}
.legal-sec li{color:var(--haze);font-size:16px;line-height:1.68}
.legal-sec b,.legal-sec strong{color:var(--paper);font-weight:500}
.legal-sec a{color:var(--signal)}
.legal-sec code{
  font-family:var(--mono);font-size:13px;color:var(--paper);
  background:rgba(53,217,240,.09);border:1px solid var(--line-soft);
  padding:1px 6px;border-radius:5px;
}

/* Safety and money get a visible frame. On a weather app the "this is not an
   official warning" clause is the one that actually matters to a reader. */
.legal-callout{
  margin:0 0 16px;padding:20px 22px;border-radius:12px;
  border:1px solid rgba(249,115,22,.36);background:rgba(249,115,22,.07);
  border-left:3px solid var(--alert);
}
.legal-callout p{color:var(--paper);margin:0}
.legal-callout p+p{margin-top:10px}
.legal-callout strong{color:var(--alert);font-weight:600}

/* A table reads better than prose for "who gets what". */
.legal-table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:15px}
.legal-table th,.legal-table td{
  text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-soft);
  vertical-align:top;
}
.legal-table th{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--haze-dim);
}
.legal-table td{color:var(--haze);line-height:1.6}
.legal-table td:first-child{color:var(--paper);font-weight:500;white-space:nowrap}
.legal-table-wrap{overflow-x:auto;margin:0 0 16px}

/* Jump list between the two legal pages. */
.legal-nav{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:52px;padding-top:30px;
  border-top:1px solid var(--line-soft);
}
@media (max-width:640px){
  .legal-tldr{padding:20px}
  .legal-sec h2{font-size:20px}
  .legal-table td:first-child{white-space:normal}
}