/*
  Forecast by MOSS marketing website - stylesheet for the public pages (index, download, support,
  privacy, terms, refunds, quiz) and the shared header/footer partials. Light/dark via --* tokens
  on :root. Separate from the app's own ui/styles.css.
*/
:root {
  --bg: #f6f8fc;
  --card: #fff;
  --line: #e3e9f4;
  --text: #12203a;
  --muted: #5d6e8e;
  --accent: #0d9488;
  --accent2: #4f46e5;
  --onacc: #fff;
  --hero1: #eafaf7;
  --hero2: #eceeff;
  --shadow: 0 20px 50px rgba(30, 50, 110, 0.14);
}
body.dark {
  --bg: #0b1220;
  --card: #131f36;
  --line: #243455;
  --text: #e8eefc;
  --muted: #9bacce;
  --accent: #5eead4;
  --accent2: #818cf8;
  --onacc: #06101f;
  --hero1: #0f2a3a;
  --hero2: #1c1f4a;
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font:
    16px/1.6 system-ui,
    Segoe UI,
    Roboto,
    sans-serif;
}
a {
  color: var(--accent);
}
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}
.brand {
  display: flex;
  gap: 10px;
  align-items: center;
  font-weight: 800;
  color: var(--text);
  text-decoration: none;
}
.brand img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
}
.nav nav a {
  margin-left: 22px;
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
}
.nav .cta {
  background: var(--accent);
  color: var(--onacc);
  padding: 8px 16px;
  border-radius: 10px;
  font-weight: 700;
}
.hero {
  background: linear-gradient(135deg, var(--hero1), var(--hero2));
  padding: 20px 0 70px;
}
.hgrid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 40px;
  align-items: center;
  padding-top: 30px;
}
.badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  padding: 5px 12px;
  border-radius: 99px;
}
h1 {
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.08;
  margin: 14px 0;
  letter-spacing: -0.02em;
}
.lead {
  font-size: 19px;
  color: var(--muted);
  max-width: 520px;
}
.btn {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: var(--onacc);
  font-weight: 700;
  padding: 14px 26px;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent2) 35%, transparent);
}
.btn.g {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: none;
  margin-left: 8px;
}
.btn .bico {
  width: 20px;
  height: 20px;
  vertical-align: -5px;
  margin-right: 9px;
}
.ticks {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 22px;
  color: var(--muted);
  font-size: 14px;
}
.ticks span:before {
  content: '✓ ';
  color: var(--accent);
  font-weight: 800;
}
.shot {
  border-radius: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  width: 100%;
  display: block;
}
.sec {
  padding: 70px 0;
}
.sec h2 {
  font-size: 32px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.sub {
  color: var(--muted);
  margin: 0 0 34px;
  max-width: 620px;
}
.three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
}
.ico {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  margin-bottom: 12px;
}
.card h3 {
  margin: 0 0 6px;
}
.card p {
  margin: 0;
  color: var(--muted);
}
.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: center;
  margin-bottom: 64px;
}
.row.rev .t {
  order: 2;
}
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  counter-reset: s;
}
.steps .card:before {
  counter-increment: s;
  content: counter(s);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: var(--onacc);
  font-weight: 800;
  margin-bottom: 10px;
}
.price .card {
  text-align: center;
  position: relative;
}
.price .big {
  font-size: 38px;
  font-weight: 800;
}
.price .pop {
  border: 2px solid var(--accent);
  box-shadow: var(--shadow);
}
.tag {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--onacc);
  font-size: 12px;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 99px;
}
.price ul {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 15px;
}
.price li {
  padding: 3px 0;
}
.faq details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 10px;
}
.faq summary {
  font-weight: 700;
  cursor: pointer;
}
.faq p {
  color: var(--muted);
  margin: 8px 0 0;
}
.final {
  background: linear-gradient(135deg, var(--hero1), var(--hero2));
  border-radius: 24px;
  padding: 48px;
  text-align: center;
}
footer {
  padding: 36px 0;
  color: var(--muted);
  font-size: 14px;
  border-top: 1px solid var(--line);
  margin-top: 70px;
}
footer a {
  color: var(--muted);
  margin-right: 16px;
}
@media (max-width: 800px) {
  .hgrid,
  .row,
  .three,
  .steps {
    grid-template-columns: 1fr;
  }
  .row.rev .t {
    order: 0;
  }
  .nav nav a:not(.cta) {
    display: none;
  }
}
.ask {
  padding: 70px 0 20px;
}
.askbox {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 34px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 42px;
  box-shadow: var(--shadow);
}
.askbox .q {
  font-size: clamp(26px, 3.6vw, 38px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 10px 0 0;
}
.askbox .q em {
  font-style: normal;
  color: var(--accent);
}
.askbox .a h3 {
  margin: 0 0 4px;
  font-size: 20px;
}
.askbox .a p {
  color: var(--muted);
  margin: 0 0 16px;
}
.pts {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pts li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.pts li b {
  display: block;
}
.pts li span {
  color: var(--muted);
  font-size: 15px;
}
.pts i {
  font-style: normal;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}
.tog {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  border-radius: 10px;
  padding: 6px 10px;
  margin-left: 16px;
  cursor: pointer;
  font-size: 15px;
}
@media (max-width: 800px) {
  .askbox {
    grid-template-columns: 1fr;
    padding: 26px;
  }
}
.four {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1000px) {
  .four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .four {
    grid-template-columns: 1fr;
  }
}
.soon {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  color: #422006;
  background: #fde047;
  padding: 1px 8px;
  border-radius: 99px;
  margin-left: 4px;
  white-space: nowrap;
}
.nav nav a.qznav .fq {
  color: #fde047;
  font-weight: 800;
  background: color-mix(in srgb, #fde047 14%, transparent);
  padding: 3px 9px;
  border-radius: 99px;
}
body:not(.dark) .nav nav a.qznav .fq {
  color: #92400e;
  background: #fef3c7;
}
.quizcard {
  max-width: 1080px;
  margin: 40px auto 10px;
  padding: 26px 30px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 12%, transparent),
    color-mix(in srgb, var(--accent2) 14%, transparent)
  );
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.quizcard h2 {
  font-size: 24px;
  margin: 0;
}
.quizcard p {
  color: var(--muted);
  margin: 6px 0 0;
  font-size: 17px;
}
.sandnote {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 16px;
}
.nav nav a.on {
  color: var(--accent) !important;
}
.peace {
  text-align: center;
  max-width: 760px;
  margin: 70px auto 10px;
}
.peace h2 {
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.25;
  margin: 0 0 14px;
}
.peace p {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
  margin: 0 auto;
}
.homeb {
  display: inline-flex;
  align-items: center;
}
.homeb svg {
  display: block;
}
.buyp {
  display: inline-block;
  background: linear-gradient(135deg, #7df5e0, #a5b4ff);
  color: #021a17 !important;
  font-weight: 800;
  padding: 3px 14px;
  border-radius: 99px;
  text-decoration: none !important;
  margin: 0 2px;
}
.buyp:hover {
  filter: brightness(1.08);
}
.price .promo {
  align-self: center;
}
.price .card {
  display: flex;
  flex-direction: column;
}
.price .card ul {
  margin-bottom: 18px;
}
.buy {
  margin-top: auto;
  display: block;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 17px;
  padding: 13px 18px;
  border-radius: 12px;
  border: 2px solid var(--accent);
  color: var(--accent);
  background: transparent;
}
.buy small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.8;
  margin-top: 2px;
}
.buy:hover {
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}
.buy.best {
  font-size: 27px;
  font-weight: 800;
  padding: 18px 18px;
  color: #021a17;
  border-color: transparent;
  background: linear-gradient(135deg, #7df5e0, #a5b4ff);
}
.buy.best:hover {
  filter: brightness(1.08);
  background: linear-gradient(135deg, #7df5e0, #a5b4ff);
}
.buy.best small {
  font-size: 13px;
  font-weight: 700;
  opacity: 0.85;
}
.price .tag {
  white-space: nowrap;
  font-size: 13px;
  padding: 7px 14px;
  top: -17px;
  letter-spacing: 0;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent);
}
.price .card:has(.tag) {
  padding-top: 36px;
}
.code {
  display: inline-block;
  margin-top: 10px;
  border: 2px dashed var(--accent);
  color: var(--text);
  font-size: 15px;
  padding: 6px 14px;
  border-radius: 10px;
}
.code b {
  color: var(--accent);
  letter-spacing: 0.06em;
}
.promo {
  display: inline-block;
  background: #fde047;
  color: #422006;
  font-weight: 800;
  font-size: 14px;
  padding: 4px 12px;
  border-radius: 99px;
  margin: 4px 0 8px;
}
.promo .star {
  color: #d97706;
  font-size: 16px;
}
.was {
  color: var(--muted);
  font-size: 15px;
}
.was s {
  text-decoration: line-through;
}
.pnote {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
  margin-top: 2px;
}
.vgrid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 22px 0 40px;
  max-width: 760px;
}
.vcard {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  text-decoration: none !important;
  color: var(--text);
}
a.vcard:hover {
  border-color: var(--accent);
}
.vimg {
  position: relative;
  flex: 0 0 150px;
  aspect-ratio: 16/9;
  background: var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.vimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vph {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--muted);
  font-weight: 700;
  font-size: 13px;
}
.vt {
  flex: 1;
  font-weight: 700;
  font-size: 17px;
}
.vcard.off img {
  opacity: 0.55;
}
.vcard.off .vt {
  color: var(--muted);
}
.vplay {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 24px;
  margin: -12px 0 0 -17px;
  background: #f00;
  border-radius: 7px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.vplay:after {
  content: '';
  position: absolute;
  left: 13px;
  top: 6px;
  border-left: 9px solid #fff;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.vact {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
  padding-right: 8px;
}
.vcard.off .vact {
  color: var(--muted);
  font-weight: 600;
}
@media (max-width: 520px) {
  .vimg {
    flex-basis: 110px;
  }
  .vt {
    font-size: 15px;
  }
}
.acc {
  font-style: normal;
  color: var(--accent);
}
.pv {
  width: 100%;
  background: color-mix(in srgb, var(--bg) 60%, var(--card));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 28px;
}
.shotwrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}
.pllink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--accent);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 16px;
}
.pllink:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}
.steps3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  height: 100%;
}
.steps3 .s3 {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 30px 26px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.steps3 .s3n {
  flex: none;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: var(--onacc);
  font-weight: 800;
  font-size: 21px;
}
.steps3 .s3t {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.steps3 .s3t b {
  font-size: 19px;
}
.steps3 .s3t span {
  color: var(--muted);
  font-size: 15px;
}
.steps3 .s3a {
  display: flex;
  justify-content: center;
  color: var(--accent);
  padding: 14px 0;
}
.pill {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  padding: 6px 14px;
  border-radius: 99px;
  margin-bottom: 10px;
}
.pv .pts li span {
  display: block;
}
.wrap {
  max-width: 1240px !important;
}
.slide {
  grid-template-columns: 270px 2px 1fr !important;
  gap: 34px !important;
  padding: 36px 44px !important;
  min-height: 700px !important;
}
.slide h2 {
  font-size: 26px !important;
}
.vl {
  align-self: center;
  height: 150px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(var(--accent), var(--accent2));
  opacity: 0.8;
}
.pic {
  height: auto !important;
  max-height: 640px;
}
.pic img {
  max-height: 640px !important;
  width: auto !important;
  max-width: 100%;
}
@media (max-width: 900px) {
  .slide {
    grid-template-columns: 1fr !important;
    padding: 26px 22px !important;
  }
  .vl {
    display: none;
  }
  .cbtn.prev {
    left: -6px;
  }
  .cbtn.next {
    right: -6px;
  }
}
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
.tourhead {
  text-align: center;
  margin-bottom: 26px;
}
.tourhead h2 {
  margin: 0 0 6px;
}
.car {
  position: relative;
}
.track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 0;
  scrollbar-width: none;
  border-radius: 24px;
}
.track::-webkit-scrollbar {
  display: none;
}
.slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 40px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 44px 64px;
  min-height: 480px;
}
.slide h2 {
  font-size: 30px;
  margin: 12px 0 10px;
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.slide .sub {
  margin: 0;
}
.pic {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pic img {
  width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 14px;
}
.cbtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--text);
  font-size: 38px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
  padding: 0 0 4px;
}
.cbtn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.cbtn:disabled {
  opacity: 0.35;
  cursor: default;
}
.cbtn.prev {
  left: -18px;
}
.cbtn.next {
  right: -18px;
}
.dots {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--line);
  cursor: pointer;
  transition: all 0.2s;
}
.dot.on {
  background: var(--accent);
  width: 28px;
  border-radius: 99px;
}
@media (max-width: 800px) {
  .slide {
    grid-template-columns: 1fr;
    padding: 26px 22px;
    gap: 18px;
    min-height: 0;
  }
  .pic {
    height: auto;
    max-height: 300px;
  }
  .cbtn {
    display: none;
  }
  .slide h2 {
    font-size: 24px;
  }
}
.chartsec {
  text-align: center;
  margin: 10px 0 70px;
}
.chartsec .sub {
  max-width: 560px;
}
html {
  scroll-behavior: smooth;
}
.top {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.top .nav {
  padding: 8px 0;
}
.top .brand img {
  width: 52px;
  height: 52px;
}
#features,
#plans {
  scroll-margin-top: 84px;
}
@media (max-width: 800px) {
  .top .brand img {
    width: 44px;
    height: 44px;
  }
}
.brand {
  font-size: 22px;
  gap: 14px;
}
.brand img {
  width: 60px;
  height: 60px;
}
.nav {
  padding: 14px 0;
}
@media (max-width: 800px) {
  .brand {
    font-size: 18px;
    gap: 10px;
  }
  .brand img {
    width: 48px;
    height: 48px;
  }
}
.tog {
  font-size: 16px;
  line-height: 1;
  min-width: 38px;
}
.brand {
  white-space: nowrap;
}
.nav nav {
  display: flex;
  align-items: center;
}
@media (max-width: 800px) {
  .nav nav .cta {
    display: none;
  }
  .nav nav .tog {
    margin-left: 0;
  }
}
.noacc {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 17px;
}
.plain {
  padding: 20px 0 10px;
}
.plain h1 {
  font-size: clamp(30px, 4vw, 42px);
}
.legal h4 {
  margin: 24px 0 4px;
}
.legal {
  max-width: 760px;
}
.btn.off,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
label.agree {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 18px 0;
}
label.agree input {
  margin-top: 6px;
  width: 18px;
  height: 18px;
}
ul.vids {
  list-style: none;
  padding: 0;
}
ul.vids li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.muted {
  color: var(--muted);
}
/* plans: four cards with seal badges (Oct 23) */
.plans4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
  padding-top: 14px;
}
@media (max-width: 1000px) {
  .plans4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 30px;
  }
}
@media (max-width: 560px) {
  .plans4 {
    grid-template-columns: 1fr;
  }
}
.plc {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  border-bottom: 5px solid var(--pc);
  box-shadow: var(--shadow);
}
.plc.best {
  border: 2px solid #f2c23c;
  border-bottom-width: 5px;
  box-shadow:
    0 0 0 4px color-mix(in srgb, #f2c23c 18%, transparent),
    var(--shadow);
}
.plsh {
  text-align: center;
  padding: 22px 12px 16px;
  background: color-mix(in srgb, var(--bg) 55%, var(--card));
  border-bottom: 1px solid var(--line);
  border-radius: 15px 15px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.plsh .seal {
  width: 132px;
  height: 132px;
  display: block;
  overflow: visible;
  margin: 0 auto 16px;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
}
.plc.best .plsh .seal {
  filter: drop-shadow(0 0 14px rgba(255, 200, 40, 0.45)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
}
/* Premium Windows: a cooler, slightly subdued premium — golden frame stays for Web only, and the
   seal is dimmed a touch so Web clearly reads as the hero. */
.plc.prem {
  border: 2px solid color-mix(in srgb, var(--pc) 70%, var(--line));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--pc) 10%, transparent),
    var(--shadow);
}
.plc.prem .plsh .seal {
  filter: saturate(0.82) brightness(0.9) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
}
.seal .spk {
  transform-box: fill-box;
  transform-origin: center;
  animation: spk 2.6s ease-in-out infinite;
  filter: drop-shadow(0 0 2px #fff);
}
.seal .s1 {
  animation-delay: 0.7s;
}
.seal .s2 {
  animation-delay: 1.4s;
}
.seal .s3 {
  animation-delay: 2s;
}
.seal .s4 {
  animation-delay: 1s;
}
@keyframes spk {
  0%,
  100% {
    opacity: 0;
    scale: 0.3;
  }
  45%,
  55% {
    opacity: 1;
    scale: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .seal .spk {
    animation: none;
    opacity: 0.9;
  }
}
/* Best-value label, centered at the top of the highlighted card (replaces the old floating pill that
   overlapped the Compare tick). The top margin keeps BEST VALUE clear of the Compare tick on its left. */
/* Best-value ribbon, straddling the top golden border of the highlighted card. Absolutely positioned so it never pushes the
   card's content down — that keeps the first feature line level with the other three cards. */
.plbest {
  position: absolute;
  bottom: 100%;
  margin-bottom: 7px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  white-space: nowrap;
  background: var(--bg);
  border: 1px solid #f2c23c;
  padding: 5px 16px;
  border-radius: 13px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}
.plbest .bvt {
  font-size: 12.5px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f2c23c;
  line-height: 1.05;
}
.plbest .bvs {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.05;
}
.plp {
  text-align: center;
  padding: 16px 12px 6px;
  min-height: 130px;
  box-sizing: border-box;
}
.plp .big {
  font-size: 36px;
  font-weight: 800;
  line-height: 1.1;
}
.plp .big small {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}
.plbill {
  color: var(--muted);
  font-size: 13px;
}
.plp .promo {
  margin-top: 6px;
  font-size: 12px;
}
.pll {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  flex: 1;
}
.pll li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 16px;
  font-size: 14.5px;
  line-height: 1.35;
  text-align: left;
}
.pll li:nth-child(odd) {
  background: color-mix(in srgb, var(--line) 30%, transparent);
}
.pll li.off {
  color: var(--muted);
  opacity: 0.8;
}
.pll .ic {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pll .ic.ok {
  stroke: #10b981;
}
.pll .ic.no {
  stroke: #ef4444;
}
.plb {
  padding: 16px;
}
.plbuy {
  display: block;
  text-align: center;
  font-weight: 800;
  font-size: 17px;
  padding: 12px 10px;
  border-radius: 12px;
  text-decoration: none;
  border: 2px solid var(--pc);
  color: var(--text);
  background: transparent;
  min-height: 44px;
}
.plbuy:hover {
  background: color-mix(in srgb, var(--pc) 16%, transparent);
}
.plbuy.best {
  color: #3a2a00;
  border-color: transparent;
  background: linear-gradient(135deg, #ffe680, #f2c23c);
  font-size: 20px;
}
.plbuy.win {
  color: #021a17;
  border-color: transparent;
  background: linear-gradient(135deg, #7df5e0, #a5b4ff);
}
.plbuy small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  opacity: 0.8;
}

.h1sub {
  font-weight: 700;
  font-size: clamp(19px, 2.3vw, 25px);
  line-height: 1.3;
  margin: 14px 0 0;
  color: inherit;
}
.h1sub + .lead {
  margin-top: 14px;
}

/* plans: platform badge (Web / Windows) on the seal panel + footer note (Oct 30) */
.plplat{display:inline-flex;align-items:center;gap:8px;margin:2px auto 2px;order:2;padding:6px 16px 6px 6px;border-radius:999px;
  font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;border:0;
  color:#061222;background:linear-gradient(135deg,var(--pp),color-mix(in srgb,var(--pp) 62%,#ffffff));
  box-shadow:0 4px 14px color-mix(in srgb,var(--pp) 55%,transparent),inset 0 1px 0 rgba(255,255,255,.45)}
.plplat .plico{display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;border-radius:999px;
  background:rgba(6,18,34,.18)}
.plplat .plico svg{width:14px;height:14px;color:#061222}
.plplat.web{--pp:#38bdf8}
.plplat.win{--pp:#b58bff}
.plnote{max-width:760px;margin:26px auto 0;text-align:center;color:var(--muted);font-size:14px;line-height:1.5}
.plnote strong{color:var(--text)}

/* hero: Web CTA button (pairs with the Windows download) + plans link in sandnote (Oct 30) */
.btn.web{background:color-mix(in srgb,#38bdf8 16%,transparent);color:#8fd6fb;border:1.5px solid color-mix(in srgb,#38bdf8 60%,transparent);box-shadow:none;margin-left:10px}
.btn.web:hover{background:color-mix(in srgb,#38bdf8 24%,transparent)}
.sandnote a{color:var(--accent);text-decoration:none;margin-left:6px;font-weight:600}
.sandnote a:hover{text-decoration:underline}

/* carousel arrows: the right one pulse-glows on the first slide, the left one on the last slide, as a "there's more this way" nudge (Oct 30) */
@keyframes cglow{0%,100%{transform:translateY(-50%) scale(1);box-shadow:var(--shadow),0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent)}50%{transform:translateY(-50%) scale(1.07);box-shadow:var(--shadow),0 0 20px 5px color-mix(in srgb,var(--accent) 48%,transparent)}}
.cbtn.nudge{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,var(--card));animation:cglow 3s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.cbtn.nudge{animation:none}}

/* ---- Support form (build 71): a conditional contact form on /support. Matches the site tokens; works in light and dark. ---- */
.sform{max-width:640px;margin-top:8px}
.sform .fld{margin:16px 0}
.sform label.lbl{display:block;font-weight:600;margin-bottom:6px}
.sform .hint{color:var(--muted);font-size:14px;margin:4px 0 0}
.sform select,.sform input[type=text],.sform input[type=email],.sform textarea{
  width:100%;padding:11px 13px;font:inherit;color:var(--text);background:var(--card);
  border:1px solid var(--line);border-radius:12px}
.sform textarea{min-height:140px;resize:vertical}
.sform select:focus,.sform input:focus,.sform textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.sform .row2{display:flex;gap:14px;flex-wrap:wrap}
.sform .row2 .fld{flex:1 1 220px;margin:0}
.sform .puzz{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:color-mix(in srgb,var(--accent) 8%,var(--card));border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.sform .puzz label{font-weight:600;margin:0}
.sform .puzz input{width:120px}
.sform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sform .send{margin-top:20px}
.sform .note{margin-top:14px;padding:12px 14px;border-radius:12px;border:1px solid var(--line)}
.sform .note.ok{background:color-mix(in srgb,var(--accent) 14%,var(--card));border-color:var(--accent)}
.sform .note.bad{background:color-mix(in srgb,#ef4444 12%,var(--card));border-color:#ef4444}
.sform .tmpl{white-space:pre-wrap;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;font-size:14px;color:var(--text);margin-top:6px}
.sform .only{font-weight:600}
.sform .cprow{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:12px}
.sform [hidden]{display:none!important}

/* ---- Pricing "See differences" compare (build 71): tick Compare on any two plans, then highlight what each gives that the other does not ---- */
button.btn{border:none;cursor:pointer;font:inherit;line-height:1.2}
.cmpbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:8px 0 2px}
.cmpbar .cmptip{color:var(--muted);font-size:15px}
.cmpbar .cmptip b{color:var(--text)}
.btn.cmpgo{padding:9px 18px}
.btn.cmprst{padding:9px 18px}
.cmpmsg{margin:12px 0 0;padding:11px 15px;border:1px solid var(--accent);border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,var(--card));font-weight:600;color:var(--text)}
.plcmp{position:absolute;top:10px;left:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;background:color-mix(in srgb,var(--card) 82%,transparent);padding:3px 9px 3px 6px;border:1px solid var(--line);border-radius:999px}
.plcmp input{width:15px;height:15px;cursor:pointer;accent-color:var(--accent);margin:0}
.plc.cmpsel{outline:3px solid var(--accent);outline-offset:2px}
.plc.cmpdim{opacity:.45;filter:saturate(.55)}
.pll li.cmpmute{opacity:.4}
.pll li.pldiff{background:color-mix(in srgb,var(--accent) 16%,transparent);border-radius:8px;margin-left:-6px;margin-right:-6px;padding-left:6px;padding-right:6px;font-weight:700;opacity:1}
.btn[hidden]{display:none}
/* Compare pop-up: ticking two plans opens this straight away (no button) */
body.noscroll{overflow:hidden}
.cmpModal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}
.cmpModal[hidden]{display:none}
.cmpBack{position:absolute;inset:0;background:rgba(2,8,20,.62);backdrop-filter:blur(2px)}
.cmpCard{position:relative;z-index:1;max-width:680px;width:100%;max-height:85vh;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.5);padding:22px}
.cmpX{position:absolute;top:10px;right:12px;width:34px;height:34px;border:0;background:transparent;color:var(--muted);font-size:26px;line-height:1;cursor:pointer;border-radius:8px}
.cmpX:hover{background:color-mix(in srgb,var(--text) 10%,transparent);color:var(--text)}
.cmpH{margin:2px 34px 4px 2px;font-size:20px}
.cmpH .cmpHn{white-space:nowrap}
.cmpH .cmpHv{color:var(--muted);font-weight:600}
.cmpSub{margin:0 0 16px;color:var(--muted);font-size:14px}
/* Compare pop-up: a table of only the rows where the two plans differ, each with a green tick / red cross per plan */
.cmpTbl{width:100%;border-collapse:collapse}
.cmpTbl th{font-size:15px;font-weight:800;text-align:center;padding:0 10px 12px;vertical-align:top}
.cmpTbl th.ft{text-align:left}
.cmpTbl .cmpN{display:inline-block;white-space:nowrap}
.cmpTbl .cmpP{font-weight:600;font-size:12px;color:var(--muted);margin-top:3px}
@media (max-width:460px){.cmpTbl th{font-size:13px;padding:0 6px 12px}}
.cmpTbl td{padding:11px 10px;border-top:1px solid var(--line);text-align:center;vertical-align:middle}
.cmpTbl td.ft{text-align:left;font-size:14px;line-height:1.3}
.cmpTbl .dic{width:21px;height:21px;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.cmpTbl .dic.ok{stroke:#10b981}
.cmpTbl .dic.no{stroke:#ef4444}
.cmpSame{margin:0;font-weight:600;font-size:15px;line-height:1.5}

/* the one highly-recommended help video */
.vcard.rec{position:relative;box-shadow:0 0 0 2px var(--accent)}
.vcard.rec .vact{color:var(--accent);font-weight:700}
.vrib{position:absolute;top:8px;left:8px;z-index:2;padding:3px 10px;border-radius:999px;background:var(--accent);color:#04201d;font-size:12px;font-weight:800;letter-spacing:.3px}