/* ==========================================================================
       1) Design tokens (design tokens)
       ========================================================================== */
    :root{
      --lc-bg: #14B789;
      --lc-ink: #0f172a;
      --lc-muted: #475569;
      --lc-surface: #ffffff;
      --lc-surface-2: #f8fafc;
      --lc-border: #e2e8f0;

      --lc-brand: #14B789;
      --lc-brand-2: #0ea5a4;
      --lc-focus: rgba(20, 183, 137, .22);

      --lc-radius-lg: 24px;
      --lc-radius-md: 16px;
      --lc-radius-sm: 12px;

      --lc-shadow: 0 16px 40px rgba(2, 6, 23, .18);
      --lc-shadow-soft: 0 10px 24px rgba(2, 6, 23, .12);

      --lc-maxw: 1160px;

      /* Height of the green hero backdrop. Increase if you want the green band to extend lower. */
      --lc-hero-h: 100%;

      --lc-font: system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
    }

    /* ==========================================================================
       2) Base + utilities
       ========================================================================== */
    *{ box-sizing:border-box; }
    html, body{ height:100%; }
    body{
      margin:0;
      font-family: var(--lc-font);
      color: var(--lc-ink);
      background: #ffffff;
      position: relative;
}
    a{ color: inherit; text-decoration: none; }
    a:hover{ text-decoration: underline; }
    img{ max-width:100%; display:block; }

    /* Hero background block (scoped to .hero; stretches to full hero content height) */
    .hero-bg{
      position: absolute;
      inset: 0;
      background: var(--lc-bg);
      z-index: 0;
      pointer-events: none;
    }

    .wrap{ max-width: var(--lc-maxw); margin: 0 auto; padding: 0 22px; }
    .sr-only{
      position:absolute; width:1px; height:1px; padding:0; margin:-1px;
      overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
    }
    .pill{
      display:inline-flex; align-items:center; gap:10px;
      border:1px solid rgba(15, 23, 42, .10);
      background: rgba(255,255,255,.15);
      color: rgba(255,255,255,.92);
      padding: 10px 14px;
      border-radius: 999px;
      font-weight: 600;
      font-size: 14px;
      backdrop-filter: blur(8px);
    }
    .muted{ color: var(--lc-muted); }

    /* ==========================================================================
       3) Header / Nav
       ========================================================================== */
    .topbar{
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(20, 183, 137, .88);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(255,255,255,.18);
    }
    .topbar__inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 18px 0;
      gap: 14px;
    }
    .brand{
      display:flex;
      align-items:center;
      gap: 12px;
      font-weight: 800;
      letter-spacing: -0.5px;
      color: #ffffff;
      font-size: 28px;
      line-height: 1;
    }
    .brand__mark{
      width: 32px;
      height: 32px;
      border-radius: 10px;
      background: rgba(255,255,255,.18);
      display:grid;
      place-items:center;
      border: 1px solid rgba(255,255,255,.22);
    }
    .nav{
      display:flex;
      align-items:center;
      gap: 18px;
    }
    .nav a{
      color: rgba(255,255,255,.92);
      font-weight: 700;
      font-size: 13px;
      letter-spacing: .4px;
      text-transform: uppercase;
      padding: 8px 10px;
      border-radius: 999px;
    }
    .nav a:hover{ background: rgba(255,255,255,.12); text-decoration:none; }
    .cta{
      display:inline-flex;
      align-items:center;
      gap: 10px;
      padding: 12px 18px;
      border-radius: 999px;
      border: 2px solid rgba(255,255,255,.85);
      background: transparent;
      color: #ffffff;
      font-weight: 800;
      cursor: pointer;
      transition: transform .15s ease, background .15s ease;
      white-space: nowrap;
    }
    .cta:hover{ background: rgba(255,255,255,.12); transform: translateY(-1px); }
    .cta:active{ transform: translateY(0); }

    .hamburger{ display:none; }

    /* ==========================================================================
       4) Hero / layout
       ========================================================================== */
    .hero{
      position: relative;
      padding: 26px 0 70px;
      z-index: 1;
    }
    .heroGrid{
      position: relative;
      z-index: 1;
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 26px;
      align-items: start;
    }
    
    /* Single-column hero layout (calculator-first) */
    .heroGrid--single{
      grid-template-columns: 1fr;
      justify-items: center;
    }
    .heroGrid--single .card{
      width: min(920px, 100%);
    }
.heroTitle{
      margin: 12px 0 10px;
      font-size: clamp(34px, 4vw, 62px);
      line-height: 1.04;
      letter-spacing: -2px;
      font-weight: 900;
      color: #ffffff;
    }
    .heroTitle span{
      display:inline-block;
      background: #ffffff;
      color: #0f172a;
      padding: 6px 18px;
      border-radius: 999px;
      box-shadow: var(--lc-shadow-soft);
      margin-right: 8px;
    }
    .heroSub{
      max-width: 54ch;
      font-size: 18px;
      line-height: 1.6;
      color: rgba(255,255,255,.92);
      margin: 0 0 18px;
    }
    .heroBadges{
      display:flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 18px;
    }

    .heroActions{
      display:flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 22px;
    }
    .btn{
      border:0;
      border-radius: 999px;
      padding: 12px 16px;
      font-weight: 800;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      gap: 10px;
    }
    .btnPrimary{
      background: #4f46e5;
      color: #ffffff;
      box-shadow: 0 12px 26px rgba(79,70,229,.22);
    }
    .btnGhost{
      background: rgba(255,255,255,.15);
      color: #ffffff;
      border: 1px solid rgba(255,255,255,.28);
    }
    .btn:hover{ transform: translateY(-1px); }
    .btn:active{ transform: translateY(0); }

    /* ==========================================================================
       5) Calculator card
       ========================================================================== */
    .card{
      background: var(--lc-surface);
      border-radius: var(--lc-radius-lg);
      box-shadow: var(--lc-shadow);
      border: 1px solid rgba(2, 6, 23, .08);
      color: var(--lc-ink);
      overflow: hidden;
    }
    .cardHeader{
      padding: 22px 22px 10px;
      border-bottom: 1px solid var(--lc-border);
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 12px;
    }
    .cardHeader h3{
      margin: 0;
      font-size: 16px;
      color: #334155;
      font-weight: 900;
      letter-spacing: .2px;
    }
    .cardHeader .example{
      margin-top: 2px;
      font-size: 30px;
      font-weight: 950;
      letter-spacing: -1px;
    }
    .tinyNote{
      font-size: 14px;
      color: #64748b;
      line-height: 1.4;
      margin: 10px 0 0;
    }
    .miniBtn{
      border: 1px solid var(--lc-border);
      background: #f8fafc;
      border-radius: 999px;
      padding: 10px 12px;
      font-weight: 800;
      cursor: pointer;
      white-space: nowrap;
    }
    .miniBtn:hover{ background:#eef2ff; border-color:#c7d2fe; }

    .cardBody{ padding: 18px 22px 22px; }

    .formGrid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
    }
    .field{ display:flex; flex-direction:column; gap: 8px; }
    .label{
      font-size: 13px;
      font-weight: 900;
      color: #0f172a;
      letter-spacing: .2px;
    }
    .hint{
      font-size: 12px;
      color:#64748b;
      margin-top: -4px;
    }

    .controlRow{
      display:flex;
      gap: 10px;
      align-items: stretch;
    }
    .input, .select{
      width:100%;
      padding: 12px 12px;
      border: 1px solid var(--lc-border);
      border-radius: 12px;
      background: #ffffff;
      font-size: 14px;
      outline: none;
    }
    .input:focus, .select:focus{
      border-color: rgba(20, 183, 137, .55);
      box-shadow: 0 0 0 4px var(--lc-focus);
    }
    .input[aria-invalid="true"], .select[aria-invalid="true"]{
      border-color: #ef4444;
      box-shadow: 0 0 0 4px rgba(239,68,68,.15);
    }

    .seg{
      display:flex;
      border: 1px solid var(--lc-border);
      border-radius: 999px;
      overflow:hidden;
      background: #ffffff;
    }
    .seg button{
      flex: 1 1 auto;
      border: 0;
      background: transparent;
      padding: 10px 12px;
      font-weight: 900;
      cursor: pointer;
      font-size: 13px;
      color: #334155;
    }
    .seg button[aria-pressed="true"]{
      background: #0f172a;
      color: #ffffff;
    }

    .results{
      margin-top: 18px;
      border: 1px dashed rgba(20, 183, 137, .45);
      background: #f0fdf4;
      border-radius: 16px;
      padding: 16px;
    }
    .results h4{
      margin: 0 0 8px;
      font-size: 15px;
      font-weight: 950;
    }
    .kv{
      display:grid;
      grid-template-columns: 1fr auto;
      gap: 10px 18px;
      align-items:baseline;
      font-size: 14px;
      padding: 6px 0;
      border-bottom: 1px solid rgba(2, 6, 23, .06);
    }
    .kv:last-child{ border-bottom: 0; padding-bottom: 0; }
    .kv .k{ color:#334155; font-weight: 800; }
    .kv .v{ font-weight: 950; color:#0f172a; }
    .kv .v small{ font-weight: 800; color:#64748b; }

    .buyerBox{
      margin-top: 16px;
      border: 1px dashed rgba(20, 183, 137, .45);
      border-radius: 16px;
      padding: 14px 16px;
      background: #f8fafc;
    }
    .buyerBox h4{ margin: 0 0 10px; font-size: 15px; font-weight: 950; }
    .buyerBox ul{ margin: 0; padding-left: 18px; color: #475569; }
    .buyerBox li{ margin: 6px 0; }

    .errorLine{
      margin-top: 10px;
      font-size: 13px;
      font-weight: 800;
      color: #b91c1c;
      display:none;
    }
    .errorLine[data-show="1"]{ display:block; }

    /* ==========================================================================
       6) Content sections
       ========================================================================== */
    section{
      padding: 70px 0;
      background: #ffffff;
    }
    .sectionTitle{
      font-size: 28px;
      letter-spacing: -0.8px;
      margin: 0 0 10px;
    }
    .twoCol{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 26px;
      align-items:start;
    }
    .cardLite{
      background: var(--lc-surface-2);
      border: 1px solid var(--lc-border);
      border-radius: var(--lc-radius-lg);
      padding: 18px 18px;
    }
    .steps{
      display:flex;
      flex-direction:column;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style:none;
    }
    .step{
      display:flex;
      gap: 12px;
      align-items:flex-start;
    }
    .stepNum{
      width: 28px; height: 28px;
      border-radius: 10px;
      background: #0f172a;
      color: #ffffff;
      font-weight: 950;
      display:grid;
      place-items:center;
      flex: 0 0 auto;
      margin-top: 2px;
    }
    .step p{ margin: 0; color:#475569; line-height: 1.6; }

    .faq{
      display:grid;
      grid-template-columns: 1fr;
      gap: 12px;
      margin-top: 18px;
    }
    details{
      background: #ffffff;
      border: 1px solid var(--lc-border);
      border-radius: 16px;
      padding: 14px 14px;
    }
    summary{
      cursor: pointer;
      font-weight: 950;
      color:#0f172a;
      list-style:none;
    }
    summary::-webkit-details-marker{ display:none; }
    details p{ margin: 10px 0 0; color:#475569; }

    .footer{
      background: #0b1220;
      color: rgba(255,255,255,.85);
      padding: 28px 0;
    }
    .footer small{ color: rgba(255,255,255,.65); }

    /* ==========================================================================
       7) Responsive
       ========================================================================== */
    @media (max-width: 980px){
      .heroGrid{ grid-template-columns: 1fr; }
      .hero{ padding-bottom: 18px; }
      .twoCol{ grid-template-columns: 1fr; }
    }
        .mobileNav{
      display:none;
      background: rgba(20, 183, 137, .94);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid rgba(255,255,255,.18);
    }
    .mobileNav a{
      display:block;
      padding: 12px 22px;
      color: rgba(255,255,255,.92);
      font-weight: 800;
      letter-spacing: .3px;
      text-transform: uppercase;
      font-size: 12px;
    }
    .mobileNav a:hover{ background: rgba(255,255,255,.10); text-decoration:none; }
    .mobileNav[data-open="1"]{ display:block; }

    @media (max-width: 760px){
      .nav{ display:none; }
      .hamburger{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,.22);
        background: rgba(255,255,255,.12);
        color: #ffffff;
        cursor:pointer;
      }
      .hamburger:active{ transform: scale(.98); }
      .formGrid{ grid-template-columns: 1fr; }
      .brand{ font-size: 24px; }
    }
  
    /* ==========================================================================
       5.6) Provider comparison (PayPal vs Wise)
       - Built for affiliate-ready pages: buyer can set Wise affiliate URL in JS config.
       ========================================================================== */
    .compareBox{
      margin-top: 16px;
      border: 1px dashed rgba(79, 70, 229, .40);
      border-radius: 16px;
      padding: 14px 16px;
      background: #ffffff;
    }
    .compareTop{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .compareBox h4{
      margin: 0;
      font-size: 15px;
      font-weight: 950;
      color:#0f172a;
    }
    .compareNote{
      margin: 6px 0 0;
      color:#64748b;
      font-size: 12px;
      line-height: 1.55;
      max-width: 76ch;
    }
    .toggle{
      display:inline-flex;
      align-items:center;
      gap: 10px;
      font-weight: 900;
      font-size: 13px;
      color:#0f172a;
      user-select:none;
    }
    .toggle input{ width: 16px; height: 16px; }
    .compareGrid{
      margin-top: 12px;
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }
    .compareGrid .field{ margin: 0; }
    .compareOut{
      margin-top: 12px;
      border: 1px solid var(--lc-border);
      background: var(--lc-surface-2);
      border-radius: 14px;
      padding: 12px;
    }
    .compareOut .kv{ border-bottom: 1px solid rgba(2, 6, 23, .06); }
    .compareOut .kv:last-child{ border-bottom: 0; }
    .ctaMini{
      display:inline-flex;
      align-items:center;
      gap: 10px;
      border-radius: 999px;
      padding: 10px 14px;
      font-weight: 900;
      border: 1px solid rgba(79, 70, 229, .35);
      background: rgba(79, 70, 229, .08);
      color: #312e81;
      text-decoration: none;
      white-space: nowrap;
    }
    .ctaMini:hover{ background: rgba(79, 70, 229, .14); text-decoration:none; }
    .ctaMini:active{ transform: scale(.99); }
    .compareWarn{
      margin-top: 10px;
      font-size: 12px;
      color: #64748b;
      line-height: 1.55;
    }

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

  
    /* ==========================================================================
       AdSense placeholder blocks (buyer will paste code after purchase)
       ========================================================================== */
    .ad-wrap{
      padding: 14px 0 0;
    }
    .ad-slot{
      background: rgba(255,255,255,.10);
      border: 1px dashed rgba(255,255,255,.45);
      border-radius: 16px;
      padding: 14px;
      min-height: 90px;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      color: rgba(255,255,255,.92);
      font-weight: 900;
      letter-spacing: .3px;
    }
    .ad-slot--card{
      background: #f8fafc;
      border: 1px dashed rgba(20, 183, 137, .45);
      color: #0f172a;
      min-height: 120px;
    }
    .ad-slot__label{
      font-size: 12px;
      font-weight: 950;
      opacity: .85;
    }
    .ad-slot__hint{
      margin-top: 6px;
      font-size: 12px;
      font-weight: 800;
      opacity: .7;
    }

  
    /* Top banner ad area should blend with hero background */
    .ad-wrap--top{
      background: var(--lc-bg);
      padding: 18px 0 0;
    }

  
    .ad-wrap--top + .hero{ margin-top: 0; }