:root {
   --bg: #F5F6F0;
   --surface: #FFFFFF;
   --ink: #12211C;
   --ink-soft: #4B5A52;
   --ink-faint: #7C887F;
   --yes: #1E6F4C;
   --yes-tint: #E4F0E9;
   --no: #B23B33;
   --no-tint: #F7E7E5;
   --line: #DCE1D5;
   --accent-bg: #E9EEDF;
   --radius: 14px;
   --maxw: 1250px;
 }

 * {
   box-sizing: border-box;
 }

 html {
   scroll-behavior: smooth;
 }

 body {
   margin: 0;
   font-family: 'Space Grotesk', sans-serif;
   background: var(--bg);
   color: var(--ink);
   -webkit-font-smoothing: antialiased;
   line-height: 1.55;
 }

 img {
   max-width: 100%;
   display: block;
 }

 a {
   color: inherit;
   text-decoration: none;
 }

 .wrap {
   max-width: var(--maxw);
   margin: 0 auto;
   padding: 0 24px;
 }

 .eyebrow {
   text-transform: uppercase;
   letter-spacing: .14em;
   font-size: 12px;
   font-weight: 600;
   color: var(--yes);
 }

 /* ---------- utility bar ---------- */
 .utility {
   background: var(--ink);
   color: #EDEFE9;
   font-size: 12.5px;
   padding: 8px 0;
 }

 .utility .wrap {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 16px;
   flex-wrap: wrap;
 }

 .utility a {
   text-decoration: underline;
   text-underline-offset: 2px;
   color: #EDEFE9;
 }

 /* ---------- ticker (signature element) ---------- */
 .ticker {
   background: var(--surface);
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
   overflow: hidden;
   padding: 12px 0;
 }

 .ticker-track {
   display: flex;
   width: max-content;
   gap: 0;
   animation: scroll-left 34s linear infinite;
 }

 .ticker-track:hover {
   animation-play-state: paused;
 }

 @keyframes scroll-left {
   from {
     transform: translateX(0);
   }

   to {
     transform: translateX(-50%);
   }
 }

 .tick {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 0 22px;
   border-right: 1px solid var(--line);
   font-size: 13.5px;
   white-space: nowrap;
   font-variant-numeric: tabular-nums;
 }

 .tick .name {
   color: var(--ink-soft);
   font-weight: 500;
 }

 .tick .px {
   font-weight: 600;
 }

 .tick .up {
   color: var(--yes);
 }

 .tick .down {
   color: var(--no);
 }

 /* ---------- header/nav ---------- */
 header.site {
   padding: 10px 0;
   background-color: #07AA75;
 }

 header.site .wrap{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

 .brand {
   display: flex;
   align-items: center;
   gap: 10px;
   font-weight: 700;
   font-size: 21px;
   letter-spacing: -.01em;
 }

 .brand .mark {
   width: 30px;
   height: 30px;
   border-radius: 8px;
   background: var(--ink);
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .brand .mark svg {
   width: 16px;
   height: 16px;
 }
nav.site-nav{
  display: flex;
  gap: 28px;
  font-size: 15.5px;
  font-weight: 500;
}

 nav.site-nav a{
  text-decoration: none;
  color: var(--ink);
}

 nav.site-nav a:hover {
   color: var(--ink);
 }

 
.nav-actions{
  display: flex;
  align-items: center;
  gap: 12px;
}
 
.nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  cursor: pointer;
  padding: 0;
}
 
.nav-toggle span{
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  margin: 0 auto;
  transition: transform .2s ease, opacity .2s ease;
}
 
.nav-toggle.open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity: 0; }
.nav-toggle.open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
 
.nav-cta{ display: none; }
 
@media(min-width:860px){
    nav.site-nav a{
  text-decoration: none;
  color: var(--surface);
}
  .nav-cta{ display: inline-flex; }
}
 
/* Collapse into a mobile dropdown below 860px */
@media(max-width:859px){
 
  .nav-toggle{ display: flex; }
 
  nav.site-nav{
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .25s ease, opacity .2s ease;
    z-index: 40;
  }
 
  nav.site-nav.open{
    max-height: 420px;
    opacity: 1;
  }
 
  nav.site-nav a{
    padding: 14px 24px;
    border-top: 1px solid var(--line);
  }
 
  .nav-cta-mobile{
    display: block;
    font-weight: 600;
    color: var(--yes);
  }
}
 .btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 12px 22px;
   border-radius: 999px;
   font-weight: 600;
   font-size: 14.5px;
   text-decoration: none;
   border: 1px solid transparent;
   cursor: pointer;
 }

 .btn-primary {
   background: var(--ink);
   color: #F5F6F0;
 }

 .btn-primary:hover {
   background: #0B1713;
 }

 .btn-outline {
   border-color: var(--line);
   color: var(--ink);
 }

 .btn-outline:hover {
   border-color: var(--ink);
 }

 .nav-cta {
   display: none;
 }

 @media(min-width:860px) {
   .nav-cta {
     display: inline-flex;
   }
 }

 /* ---------- hero ---------- */
 .hero {
   padding: 56px 0 72px;
   background-color: #fff;
 }

 .hero .grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 20px;
   align-items: center;
 }

 @media(min-width:900px) {
   .hero .grid {
     grid-template-columns: 2fr 1.2fr;
   }
 }

 .hero h1 {
   font-size: clamp(34px, 5.6vw, 50px);
   line-height: 1.04;
   letter-spacing: -.02em;
   font-weight: 700;
   margin: 16px 0 18px;
 }

 .hero h1 em {
   font-style: normal;
   color: var(--yes);
 }

 .hero p.lead {
   font-size: 17.5px;
   color: var(--ink-soft);
   max-width: 60ch;
   margin: 0 0 28px;
 }

 .hero-ctas {
   display: flex;
   gap: 14px;
   flex-wrap: wrap;
   align-items: center;
 }

 .hero-fineprint {
   margin-top: 16px;
   font-size: 12.5px;
   color: var(--ink-faint);
   max-width: 44ch;
 }

 .hero-visual {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: 20px;
   padding: 10px;
 }
 .hero-visual img{
  width: 100%;
  border-radius: 20px;
 }

 .hero-visual .cap {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
   margin-bottom: 6px;
 }

 .hero-visual .cap .q {
   font-size: 14px;
   font-weight: 600;
 }

 .hero-visual .cap .p {
   font-size: 24px;
   font-weight: 700;
   color: var(--yes);
 }

 /* ---------- section shell ---------- */
 section {
   padding: 42px 0;
 }

 .section-head {
   max-width: 640px;
   margin-bottom: 40px;
 }

 .section-head h2 {
   font-size: clamp(26px, 3.4vw, 38px);
   letter-spacing: -.015em;
   margin: 10px 0 12px;
   font-weight: 700;
   line-height: 1.3;
 }

 .section-head p {
   color: var(--ink-soft);
   font-size: 16px;
   margin: 0;
 }

 .divider-strip {
   background: var(--accent-bg);
   border-top: 1px solid var(--line);
   border-bottom: 1px solid var(--line);
   padding: 10px 0;
   overflow: hidden;
 }

 .divider-strip .ticker-track {
   animation-duration: 46s;
 }

 .divider-strip .tick {
   border-right-color: #C9D2BC;
 }

 /* ---------- categories ---------- */
 .cat-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
   gap: 22px;
 }

 .cat-card {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   overflow: hidden;
   transition: transform .18s ease, box-shadow .18s ease;
 }

 .cat-card:hover {
   transform: translateY(-3px);
 }

 .cat-photo {
   position: relative;
   height: 150px;
   background-size: cover;
   background-position: center;
 }

 .cat-photo::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(18, 33, 28, 0) 40%, rgba(18, 33, 28, .55) 100%);
 }

 .cat-photo .icon {
   position: absolute;
   left: 14px;
   bottom: 12px;
   z-index: 2;
   width: 34px;
   height: 34px;
   border-radius: 9px;
   background: rgba(245, 246, 240, .92);
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .cat-photo .icon svg {
   width: 18px;
   height: 18px;
   stroke: var(--ink);
 }

 .cat-body {
   padding: 16px 18px 20px;
 }

 .cat-body h3 {
   margin: 0 0 6px;
   font-size: 16.5px;
   font-weight: 600;
 }

 .cat-body p {
   margin: 0;
   font-size: 14px;
   color: var(--ink-soft);
 }

 /* ---------- how it works ---------- */
 .steps {
   display: grid;
   grid-template-columns: 1fr;
   gap: 0;
   border: 1px solid var(--line);
   border-radius: var(--radius);
   overflow: hidden;
   background: var(--surface);
 }

 @media(min-width:820px) {
   .steps {
     grid-template-columns: repeat(3, 1fr);
   }
 }

 .step {
   padding: 30px 26px;
   border-bottom: 1px solid var(--line);
 }

 @media(min-width:820px) {
   .step {
     border-bottom: none;
     border-right: 1px solid var(--line);
   }

   .step:last-child {
     border-right: none;
   }
 }

 .step:last-child {
   border-bottom: none;
 }

 .step .num {
   font-size: 13px;
   font-weight: 700;
   color: var(--yes);
   font-variant-numeric: tabular-nums;
   margin-bottom: 14px;
 }

 .step h3 {
   margin: 0 0 8px;
   font-size: 17px;
   font-weight: 600;
 }

 .step p {
   margin: 0;
   font-size: 14.5px;
   color: var(--ink-soft);
 }

 /* ---------- contract explainer ---------- */
 .explain {
   display: grid;
   grid-template-columns: 1fr;
   gap: 40px;
   align-items: center;
 }

 @media(min-width:900px) {
   .explain {
     grid-template-columns: 1fr 1fr;
   }
 }

 .contract-card {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 24px;
 }

 .contract-card .q {
   font-size: 15.5px;
   font-weight: 600;
   margin-bottom: 14px;
 }

 .bar-row {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 12px;
   font-size: 14px;
 }

 .bar-row .label {
   width: 34px;
   font-weight: 700;
   font-variant-numeric: tabular-nums;
 }

 .bar-track {
   flex: 1;
   height: 10px;
   border-radius: 999px;
   background: var(--line);
   overflow: hidden;
 }

 .bar-fill {
   height: 100%;
   border-radius: 999px;
 }

 .bar-fill.yes {
   background: var(--yes);
 }

 .bar-fill.no {
   background: var(--no);
 }

 .bar-row .pct {
   width: 44px;
   text-align: right;
   font-variant-numeric: tabular-nums;
   color: var(--ink-soft);
 }

 .explain-copy ul {
   padding-left: 18px;
   margin: 18px 0 0;
   color: var(--ink-soft);
   font-size: 15px;
 }

 .explain-copy li {
   margin-bottom: 10px;
 }

 /* ---------- features ---------- */
 .feat-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
   gap: 1px;
   background: var(--line);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   overflow: hidden;
 }

 .feat {
   background: var(--surface);
   padding: 26px 24px;
 }

 .feat .icon-sq {
   width: 36px;
   height: 36px;
   border-radius: 9px;
   background: var(--yes-tint);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 16px;
 }

 .feat .icon-sq svg {
   width: 18px;
   height: 18px;
   stroke: var(--yes);
 }

 .feat h3 {
   margin: 0 0 8px;
   font-size: 16px;
   font-weight: 600;
 }

 .feat p {
   margin: 0;
   font-size: 14px;
   color: var(--ink-soft);
 }

 /* ---------- personas ---------- */
 .persona-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 22px;
 }

 .persona {
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 24px;
   background: var(--surface);
 }

 .persona .tag {
   display: inline-block;
   font-size: 12px;
   font-weight: 600;
   color: var(--yes);
   background: var(--yes-tint);
   padding: 4px 10px;
   border-radius: 999px;
   margin-bottom: 14px;
 }

 .persona p {
   margin: 0;
   font-size: 14.5px;
   color: var(--ink-soft);
 }

 /* ---------- risk box ---------- */
 .risk {
   background: var(--surface);
   border: 1px solid var(--line);
   border-left: 4px solid var(--no);
   border-radius: var(--radius);
   padding: 28px 28px;
 }

 .risk h2 {
   margin-top: 0;
 }

 .risk ul {
   margin: 14px 0 0;
   padding-left: 18px;
   color: var(--ink-soft);
   font-size: 14.5px;
 }

 .risk li {
   margin-bottom: 8px;
 }

 /* ---------- faq ---------- */
 .faq-item {
   border-bottom: 1px solid var(--line);
   padding: 20px 0;
 }

 .faq-item summary {
   cursor: pointer;
   font-weight: 600;
   font-size: 16px;
   list-style: none;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .faq-item summary::-webkit-details-marker {
   display: none;
 }

 .faq-item summary::after {
   content: "+";
   font-size: 20px;
   font-weight: 400;
   color: var(--ink-faint);
   transition: transform .15s ease;
 }

 .faq-item[open] summary::after {
   content: "–";
 }

 .faq-item p {
   margin: 12px 0 0;
   color: var(--ink-soft);
   font-size: 14.5px;
   max-width: 70ch;
 }

 /* ---------- trust ---------- */
 .trust-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 22px;
   margin-bottom: 36px;
 }

 .trust-card {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 22px;
 }

 .trust-card .icon-sq {
   width: 36px;
   height: 36px;
   border-radius: 9px;
   background: var(--yes-tint);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 14px;
 }

 .trust-card .icon-sq svg {
   width: 18px;
   height: 18px;
   stroke: var(--yes);
 }

 .trust-card h3 {
   margin: 0 0 6px;
   font-size: 15.5px;
   font-weight: 600;
 }

 .trust-card p {
   margin: 0;
   font-size: 13.5px;
   color: var(--ink-soft);
 }

 .byline {
   display: flex;
   align-items: center;
   gap: 14px;
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   padding: 18px 22px;
 }

 .byline .av {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: var(--ink);
   color: #F5F6F0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 700;
   font-size: 15px;
   flex-shrink: 0;
 }

 .byline .meta p {
   margin: 0;
   font-size: 13.5px;
   color: var(--ink-soft);
 }

 .byline .meta strong {
   font-size: 14.5px;
 }

 /* ---------- comparison table ---------- */
 .compare-wrap {
   background: var(--surface);
   border: 1px solid var(--line);
   border-radius: var(--radius);
   overflow-x: auto;
 }

 table.compare {
   width: 100%;
   border-collapse: collapse;
   min-width: 640px;
   font-size: 14.5px;
 }

 table.compare th,
 table.compare td {
   padding: 16px 20px;
   text-align: left;
   border-bottom: 1px solid var(--line);
 }

 table.compare th {
   font-weight: 600;
   font-size: 13px;
   text-transform: uppercase;
   letter-spacing: .05em;
   color: var(--ink-faint);
   background: var(--accent-bg);
   white-space: nowrap;
 }

 table.compare th:first-child,
 table.compare td:first-child {
   color: var(--ink-soft);
   font-weight: 500;
   white-space: nowrap;
 }

 table.compare td.hi {
   background: var(--yes-tint);
   color: #0F3F2A;
   font-weight: 600;
 }

 table.compare tr:last-child td {
   border-bottom: none;
 }

 table.compare .check {
   color: var(--yes);
   font-weight: 700;
 }

 table.compare .cross {
   color: var(--no);
   font-weight: 700;
 }

 /* ---------- pros and cons ---------- */
 .pc-grid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 22px;
 }

 @media(min-width:760px) {
   .pc-grid {
     grid-template-columns: 1fr 1fr;
   }
 }

 .pc-card {
   border-radius: var(--radius);
   padding: 26px 26px 22px;
   border: 1px solid var(--line);
 }

 .pc-card.pros {
   background: var(--yes-tint);
   border-color: #C9DFD0;
 }

 .pc-card.cons {
   background: var(--no-tint);
   border-color: #E9C9C6;
 }

 .pc-card h3 {
   display: flex;
   align-items: center;
   gap: 10px;
   margin: 0 0 16px;
   font-size: 17px;
   font-weight: 600;
 }

 .pc-card.pros h3 {
   color: #0F3F2A;
 }

 .pc-card.cons h3 {
   color: #5C1D18;
 }

 .pc-card ul {
   margin: 0;
   padding: 0;
   list-style: none;
 }

 .pc-card li {
   display: flex;
   gap: 10px;
   font-size: 14.5px;
   color: var(--ink-soft);
   margin-bottom: 12px;
   line-height: 1.5;
 }

 .pc-card li:last-child {
   margin-bottom: 0;
 }

 .pc-card.pros li::before {
   content: "+";
   color: var(--yes);
   font-weight: 700;
   flex-shrink: 0;
 }

 .pc-card.cons li::before {
   content: "–";
   color: var(--no);
   font-weight: 700;
   flex-shrink: 0;
 }

 /* ---------- final cta ---------- */
 .final-cta {
   background: var(--ink);
   color: #F5F6F0;
   border-radius: 24px;
   padding: 56px 40px;
   text-align: center;
 }

 .final-cta h2 {
   font-size: clamp(26px, 4vw, 38px);
   margin: 0 0 14px;
   font-weight: 700;
   letter-spacing: -.01em;
 }

 .final-cta p {
   color: #C7CFC5;
   max-width: 52ch;
   margin: 0 auto 28px;
   font-size: 15.5px;
 }

 .final-cta .btn-primary {
   background: #F5F6F0;
   color: var(--ink);
 }

 .final-cta .btn-primary:hover {
   background: #fff;
 }

 /* ---------- footer ---------- */
 footer {
   padding: 48px 0 40px;
   border-top: 1px solid var(--line);
 }

 footer .fgrid {
   display: grid;
   grid-template-columns: 1fr;
   gap: 28px;
   margin-bottom: 28px;
 }

 @media(min-width:760px) {
   footer .fgrid {
     grid-template-columns: 2fr 1fr 2fr 1fr;
   }
 }

 footer h4 {
   font-size: 13px;
   text-transform: uppercase;
   letter-spacing: .08em;
   color: var(--ink-faint);
   margin: 0 0 12px;
 }

 footer .flinks {
   list-style: none;
   padding: 0;
   margin: 0;
   font-size: 14px;
   color: var(--ink-soft);
   display: flex;
   flex-direction: column;
   gap: 9px;
 }

 footer .flinks a {
   text-decoration: none;
 }

 footer .flinks a:hover {
   text-decoration: underline;
 }

 .disclosure {
   font-size: 12.5px;
   color: var(--ink-faint);
   border-top: 1px solid var(--line);
   padding-top: 22px;
   line-height: 1.7;
 }

 .disclosure p {
   margin: 0 0 10px;
 }