:root {
      --bg: #0f1215;  /* charcoal/navy */
      --ink: #F7F6F4;  /* mist white */
      --muted: #aab3ba;  /* soft gray */
      --accent: #4A90A6;  /* cold plunge blue */
      --cedar: #8b5a3c;  /* cedar */
      --card: #161a1e;
      --ring: rgba(28, 146, 210, .4);
      /* from early work */
      --driftwood: #C9B9A6;
      --cedar-charcoal: #3c3a36;
      --steam-gray: #e1dfdc;
      --ember-accent: #e2725b;

    /* for the form -- can probably be trimmed or merged */
    --bg-1:#0d0f12; --bg-2:#15181d; --bg-3:#1c2128;
    --text-1:#e6e9ee; --text-2:#a9b0ba; --ok:#84cc16; --muted:#8a93a3;
    --border:#2a3140; --border-strong:#3a4252;
    --radius:14px; --radius-lg:18px;
    --shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
  }


  html,
  body {
      height: 100%
  }

  body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      color: var(--steam-gray);
      background: linear-gradient(180deg, #0f1215 0%, #0b0e11 100%);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
  }

  .container {
      max-width: 1120px;
      margin-inline: auto;
      padding: clamp(16px, 3vw, 32px)
  }

  .grid {
      display: grid;
      gap: clamp(16px, 2.4vw, 28px)
  }

  .center {
      display: grid;
      place-items: center
  }

  .logo-light img {
    width: 600px;
    max-width: 80%;
  }

  .stack>* {
      margin: 0
  }

  .stack>*+* {
      margin-top: .75rem
  }

  .btn {
      appearance: none;
      border: 0;
      cursor: pointer;
      padding: .9rem 1.1rem;
      border-radius: 999px;
      font-weight: 600;
      letter-spacing: .2px
  }

  .btn-primary {
      background: var(--accent);
      color: #081118;
      box-shadow: 0 10px 30px rgba(28, 146, 210, .25)
  }

  .btn-primary:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: 2px
  }

  .btn-ghost {
      background: transparent;
      color: var(--ink)
  }

  header.hero {
      position: relative;
      overflow: hidden;
      isolation: isolate
  }

  .hero-media {
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: .5;
      background: radial-gradient(100% 60% at 50% 10%, rgba(28, 146, 210, .20), transparent 55%), url('./img/HeadLine-Image.png?q=80&w=2400&auto=format&fit=crop') center/cover no-repeat;
  }

  .hero-inner {
      padding-block: clamp(64px, 15vh, 160px)
  }

  .eyebrow {
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: .18em;
      font-size: .78rem;
      font-weight: 600
  }

  h1 {
      font-size: clamp(2rem, 6vw, 4rem);
      line-height: 1.05;
      letter-spacing: -.02em;
      margin: 0
  }

  .subhead {
      font-size: clamp(1rem, 2vw, 1.25rem);
      color: var(--muted)
  }

  .disclosure {
      font-size: .9rem;
      color: var(--muted)
  }

  section {
      padding-block: clamp(40px, 8vh, 96px)
  }

  .card {
      background: var(--card);
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 20px;
      padding: clamp(16px, 2.2vw, 24px)
  }

  .copy { margin-left: 25px; }
  
  .value {
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr))
  }

  .value .item {
      display: grid;
      gap: .4rem;
      cursor: pointer; outline: none;
      text-align: center;
      justify-content: center;
      transition:border-color .25s ease;
  }

  .value .item[aria-expanded=\"true\"]{border:3px solid var(--accent);}      

  .value .item:focus-visible{box-shadow:0 0 0 3px var(--ring); border-radius:20px}

  .value .item h3 {
      margin: 0;
      font-size: 1.125rem
  }

  .value .item p {
      margin: 0;
      /*color: var(--muted)*/
  }

  .highlight {
    border: 2px solid var(--accent) !important;
    border-radius: 20px;
  }

  .item-card-div {
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .item-card {
      width: 150px;
      object-fit: contain;
      border: 3px solid var(--steam-gray);
      border-radius: 12px;  
  }

    .detail-panel{margin-top:clamp(12px,1.8vw,18px); overflow:hidden; max-height:0; opacity:0; transition:max-height .4s ease, opacity .4s ease;}
    .detail-panel p{margin:.25rem 0; color:var(--ink)}
    .detail-panel.show{max-height:300px; opacity:1;}
    .detail-panel[hidden]{display:none}
    .mobile-detail{margin-top:.5rem; border-top:1px solid rgba(255,255,255,.06); padding-top:.5rem; overflow:hidden; max-height:0; opacity:0; transition:max-height .35s ease, opacity .35s ease;}
    .mobile-detail.show{max-height:200px; opacity:1;}
    .mobile-detail[hidden]{display:none}

    /* Responsive rules: show shared panel on desktop, per-card detail on mobile */
    @media (max-width: 700px){
      #detail-shared{display:none!important}
    }

  /*.concept {
      grid-template-columns: 1.2fr .8fr;
  }*/

  @media (max-width: 900px) {
      .concept {
          grid-template-columns: 1fr
      }
  }

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

  .list li {
      display: flex;
      gap: .6rem;
      align-items: flex-start;
      padding: .5rem 0
  }

  .dot {
      width: .65rem;
      height: .65rem;
      border-radius: 50%;
      background: var(--accent);
      margin-top: .45rem;
      flex: 0 0 auto
  }

  /*
  .form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px
  }

  .form .full {
      grid-column: 1 / -1
  }*/

  @media (max-width: 700px) {
      .form {
          grid-template-columns: 1fr
      }
  }

  .input,
  select {
      /*width: 90%;*/
      background: #0e1216;
      color: var(--ink);
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 12px;
      padding: .85rem .9rem
  }

  .input:focus,
  select:focus {
      outline: none;
      border-color: var(--ring);
      box-shadow: 0 0 0 3px var(--ring)
  }

  /*.chips {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem
  }*/

  /*.chip {
      border: 1px solid rgba(255, 255, 255, .1);
      padding: .5rem .75rem;
      border-radius: 999px;
      color: var(--muted)
  }*/

  .chips{display:flex; flex-wrap:wrap; gap:.5rem; margin: .5rem 0 1rem}
  .chip{border:1px solid rgba(255,255,255,.12); background:transparent; color:var(--text-1); padding:.5rem .75rem; border-radius:999px; cursor:pointer; /*transition:border-color .15s, background .15s, transform .04s*/}
  .chip[aria-pressed="true"], .chip.active{border-color:var(--accent); background: color-mix(in oklab, var(--accent) 14%, transparent)}
  .chip:active{transform:scale(.98)}

  .commit{padding: clamp(24px,6vw,96px); background: linear-gradient(180deg,var(--bg-1),var(--bg-2)); border:1px solid var(--border); border-radius: var(--radius-lg);}
  .commit__intro h2{font-size:clamp(1.5rem,2.6vw,2rem); margin:0 0 .35rem; color:var(--text-1)}
  .commit__intro p{color:var(--text-2); margin:.25rem 0 1rem}
  .commit__signal{display:flex; align-items:center; gap:.5rem; color:var(--text-2); margin:.5rem 0 1.25rem}
  .signal__dot{width:.6rem; height:.6rem; border-radius:999px; background:var(--ok); box-shadow:0 0 22px var(--ok)}
  /*.commit__grid{display:grid; grid-template-columns:1fr; gap:16px}*/
  /*@media (min-width: 880px){ .commit__grid{grid-template-columns:1fr 1fr;} }*/

  .card{background:var(--bg-3); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow)}
  .card--primary{border-color:var(--accent); outline:1px solid color-mix(in oklab, var(--accent) 30%, transparent); margin-bottom: 12px;}
  .card__header h3{margin:.2rem 0 .25rem; font-size:clamp(1.1rem,2vw,1.3rem); color:var(--text-1)}
  .card__kicker{margin:0 0 .6rem; color:var(--text-2)}
  .card__bullets{margin:.25rem 0 1rem; padding-left:1.1rem; color:var(--text-2)}
  .card__bullets li{margin:.3rem 0}
  .card__fineprint{color:var(--muted); font-size:.9rem; margin:.75rem 0 0}


  .form{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  .form__row{display:flex; flex-direction:column; gap:.35rem; margin-left: 12px; margin-right: 12px;}
  .form__row:has(textarea){grid-column: 1 / -1;}
  .form__row label{color:var(--text-1); font-size:.95rem}
  .form input, .form select, .form textarea{
    width:100%; padding:.65rem .75rem; border-radius:10px; border:1px solid var(--border);
    background:#0f141a; color:var(--text-1);
  }
  .form textarea{resize:vertical}
  .radios{display:flex; flex-wrap:wrap; gap:.65rem}
  .radios label{display:flex; align-items:center; gap:.45rem; background:#0f141a; border:1px solid var(--border); padding:.5rem .65rem; border-radius:10px; color:var(--text-1)}
  .radio--other{position:relative}
  .radio--other .currency-prefix{margin-left:.25rem; opacity:.7}
  .radio--other .other-amount{width:6rem}
  .radio--other .suffix{opacity:.7}

  .btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    padding:.7rem 1rem; border-radius:12px; border:1px solid var(--border-strong);
    background:#12161c; color:var(--text-1); text-decoration:none; cursor:pointer; transition:transform .04s, border-color .2s, box-shadow .2s}
  .btn:hover{border-color:var(--accent)}
  .btn:active{transform:translateY(1px)}
  .btn--accent{background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 18%, #0d0f12), #0d0f12); border-color:var(--accent); box-shadow:0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent), 0 8px 22px rgba(0,0,0,.45)}
  .muted{color:var(--muted); font-size:.9rem}
  .status{display:block; margin-top:.35rem; min-height:1.2em; color:var(--text-2)}
  .commit__footer blockquote{margin:22px 0 0; color:var(--text-2); font-style:italic}

  .interest{padding:clamp(20px,4vw,40px); background:linear-gradient(180deg,#0d0f12,#12161a); border:1px solid var(--border); border-radius:16px}
  .wrap{max-width:880px; margin:0 auto}
  .intro h2{margin:0 0 .25rem; font-size:clamp(1.4rem,2.6vw,1.9rem); color:var(--text)}
  .intro p{margin:0 0 1rem; color:var(--muted)}
  .card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:18px}
  .grid-form{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  .field{display:flex; flex-direction:column; gap:.4rem; margin-bottom: 12px;}
  .field--full{grid-column:1 / -1}
  .field span, .field legend{color:var(--text); font-size:.95rem}
  input, select, textarea{
    background:var(--bg); color:var(--text); border:1px solid var(--border);
    border-radius:10px; padding:.6rem .7rem; width:90%;
  }
  textarea{resize:vertical}
  .row{display:flex; flex-wrap:wrap; gap:.5rem}
  .pill{display:flex; align-items:center; gap:.45rem; padding:.45rem .6rem; border:1px solid var(--border); border-radius:999px; background:var(--bg); color:var(--text)}
  .pill input[type="radio"]{accent-color:var(--accent)}
  .pill--other{position:relative}
  .pill--other .other{width:6rem}
  .pill--other .prefix,.pill--other .suffix{opacity:.7}
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:.45rem; padding:.7rem 1rem; border-radius:12px; border:1px solid var(--border); color:var(--text); background:#141a21; cursor:pointer}
  .btn--accent{border-color:var(--accent); background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 18%, #12161a), #12161a)}
  .btn--ghost{background:transparent}
  .status{min-height:1.2em; color:var(--muted); margin:.4rem 0 0}
  .fineprint{color:var(--muted); font-size:.9rem; margin:.5rem 0 0}
  .thanks h3{margin:.2rem 0 .5rem; color:var(--text)}
  .thanks p{color:var(--muted)}
  .cta-row{display:flex; gap:.5rem; margin:.6rem 0 .2rem; flex-wrap:wrap}
  .is-hidden{display:none}
  .fade{opacity:.6}
  @media (max-width:720px){ .grid{grid-template-columns:1fr} }


  .faq {
      max-width: 800px;
      margin-inline: auto
  }

  .faq details {
      background: var(--card);
      border: 1px solid rgba(255, 255, 255, .06);
      border-radius: 14px;
      padding: 1rem 1.1rem
  }

  .faq details+details {
      margin-top: .75rem
  }

  .faq summary {
      cursor: pointer;
      font-weight: 600
  }

  footer {
      padding-block: 48px;
      border-top: 1px solid rgba(255, 255, 255, .06);
      color: var(--muted)
  }

  .brand {
      display: flex;
      align-items: center;
      gap: .6rem
  }

  .mark {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      background: linear-gradient(145deg, var(--accent), #155f8c)
  }

  .visually-hidden {
      position: absolute !important;
      height: 1px;
      width: 1px;
      overflow: hidden;
      clip: rect(1px, 1px, 1px, 1px);
      white-space: nowrap
  }

  .carousel{position:relative; overflow:hidden; border-radius:20px; background:var(--card); border:1px solid rgba(255,255,255,.06)}
.carousel .slides{display:flex; transition:transform .45s ease; will-change:transform}
.carousel .slide{min-width:100%; display:grid; grid-template-columns: 1fr 1.2fr; gap:clamp(16px,2vw,24px); align-items:center; padding: clamp(16px, 3vw, 40px)}
.carousel .slide h3{margin:0 0 .5rem 0; font-size:clamp(1.25rem,2.2vw,1.75rem)}
.carousel .media{width:100%; aspect-ratio: 16/10; border-radius:16px; overflow:hidden; background:#0e1216; border:1px solid rgba(255,255,255,.06)}
.carousel .media img{width:100%; height:100%; object-fit:cover; display:block}
@media (max-width: 900px){ .carousel .slide{grid-template-columns: 1fr} }

.carousel .controls{position:absolute; inset:0; display:flex; justify-content:space-between; align-items:center; pointer-events:none}
.carousel button.nav{pointer-events:auto; appearance:none; border:1px solid rgba(255,255,255,.12); background:rgba(15,18,21,.6); backdrop-filter: blur(6px); color:var(--ink); width:42px; height:42px; border-radius:999px; cursor:pointer}
.carousel button.nav:focus-visible{outline:2px solid var(--ring); outline-offset:2px}

.carousel .dots{position:absolute; left:50%; bottom:10px; transform:translateX(-50%); display:flex; gap:.5rem}
.carousel .dot{width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.35); border:0}
.carousel .dot[aria-current="true"]{background:var(--accent)}

@media (prefers-reduced-motion: reduce){
.carousel .slides{transition:none}
  .copy {
    margin: 20px;
  }
}