/* ConciliaML — Shared Styles (Design System)
   Use in all pages: <link rel="stylesheet" href="assets/css/app.css">
*/

:root{
      --bg: #F7FBF8;
      --surface: #ffffff;
      --text: #08101f;
      --muted: #44546a;
      --line: rgba(8,16,31,.10);

      --g-50:  #ECFDF3;
      --g-100: #D1FAE5;
      --g-200: #A7F3D0;
      --g-600: #16A34A;
      --g-700: #15803D;
      --g-800: #166534;
      --g-900: #064E3B;

      --amber-50:#FFF7ED;
      --amber-600:#D97706;

      --shadow-sm: 0 8px 22px rgba(2, 6, 23, .08);
      --shadow: 0 22px 70px rgba(2, 6, 23, .14);

      --radius: 22px;
      --radius-sm: 16px;

      --container: 1180px;
    }

    *{ box-sizing: border-box; }
    html,body{ height: 100%; }
    body{
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
      color: var(--text);
      background: var(--bg);
      line-height: 1.45;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    a{ color: inherit; text-decoration: none; }
    .container{ width: min(var(--container), calc(100% - 44px)); margin: 0 auto; }

    /* ===== Header ===== */
    .header{
      position: sticky; top: 0; z-index: 50;
      background: rgba(247,251,248,.72);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(8,16,31,.06);
    }
    .header-inner{
      display: grid;
      grid-template-columns: 240px 1fr 280px;
      gap: 14px;
      align-items: center;
      padding: 14px 0;
    }
    .brand{
      display:flex; align-items:center; gap: 10px;
      font-weight: 900; letter-spacing: -0.02em;
    }
    .brand img{ width: 34px; height: 34px; }
    .brand span{ font-size: 18px; }
    nav{
      display:flex; justify-content:center; gap: 18px; flex-wrap: wrap;
      font-size: 14px;
    }
    nav a{
      color: rgba(68,84,106,.95);
      padding: 10px 10px;
      border-radius: 999px;
    }
    nav a:hover{ background: rgba(8,16,31,.04); color: var(--text); }
    .header-actions{ display:flex; justify-content:flex-end; gap: 10px; align-items:center; }
    .link{
      font-size: 14px;
      color: rgba(68,84,106,.95);
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid transparent;
    }
    .link:hover{ border-color: rgba(8,16,31,.10); background: rgba(255,255,255,.65); color: var(--text); }

    .btn{
      display:inline-flex; align-items:center; justify-content:center; gap: 10px;
      border-radius: 999px;
      padding: 12px 16px;
      font-weight: 800;
      font-size: 14px;
      border: 1px solid transparent;
      cursor: pointer;
      transition: transform .08s ease, box-shadow .18s ease, background .18s ease, filter .18s ease;
      white-space: nowrap;
      user-select:none;
    }
    .btn:active{ transform: translateY(1px); }
    .btn-primary{
      background: linear-gradient(135deg, var(--g-600), var(--g-800));
      color: #fff;
      box-shadow: 0 16px 32px rgba(22,163,74,.22);
    }
    .btn-primary:hover{ box-shadow: 0 22px 48px rgba(22,163,74,.26); filter: saturate(1.05); }
    .btn-light{
      background: rgba(255,255,255,.92);
      color: var(--g-900);
      border-color: rgba(6,78,59,.10);
      box-shadow: var(--shadow-sm);
    }
    .btn-light:hover{ background: #fff; }
    .btn-ghost{
      background: rgba(22,163,74,.10);
      color: var(--g-900);
      border-color: rgba(22,163,74,.18);
    }
    .btn-ghost:hover{ background: rgba(22,163,74,.14); }

    /* ===== Hero ===== */
    .hero{
      position: relative;
      overflow:hidden;
      background:
        radial-gradient(900px 460px at 20% 0%, rgba(16,185,129,.20), transparent 60%),
        radial-gradient(900px 460px at 90% 10%, rgba(34,197,94,.16), transparent 55%),
        linear-gradient(180deg, #EAF8F0, rgba(247,251,248,0) 64%);
      border-bottom: 1px solid rgba(8,16,31,.06);
    }
    .hero::before{
      /* “grain” sutil pra ficar menos chapado */
      content:"";
      position:absolute; inset:0;
      background-image:
        radial-gradient(rgba(8,16,31,.06) 1px, transparent 1px);
      background-size: 18px 18px;
      opacity: .09;
      pointer-events:none;
      mask-image: radial-gradient(circle at 35% 0%, black 35%, transparent 60%);
    }

    .hero-inner{
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 38px;
      align-items:center;
      padding: 62px 0 44px;
      position: relative;
      z-index: 1;
    }

    .kicker{
      display:inline-flex; align-items:center; gap: 10px;
      background: rgba(255,255,255,.82);
      color: rgba(6,78,59,.95);
      border: 1px solid rgba(6,78,59,.12);
      border-radius: 999px;
      padding: 8px 12px;
      font-weight: 800;
      font-size: 13px;
      width: fit-content;
      box-shadow: 0 12px 24px rgba(2,6,23,.06);
    }
    h1{
      margin: 14px 0 12px;
      font-size: clamp(36px, 4.5vw, 56px);
      line-height: 1.02;
      letter-spacing: -0.04em;
    }
    .accent{ color: var(--g-700); }
    .sub{
      margin: 0 0 18px;
      color: rgba(68,84,106,.96);
      font-size: 16px;
      max-width: 60ch;
    }

    .benefits{
      display:flex; flex-wrap:wrap; gap: 10px 14px;
      margin: 14px 0 22px;
      color: rgba(68,84,106,.92);
      font-size: 14px;
    }
    .benefit{
      display:flex; align-items:center; gap: 8px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid rgba(8,16,31,.08);
      background: rgba(255,255,255,.60);
      box-shadow: 0 10px 18px rgba(2,6,23,.04);
    }
    .benefit svg{ width: 16px; height: 16px; color: var(--g-700); flex: 0 0 auto; }

    /* Captura (barra como Bling) */
    .capture{
      display:flex; gap: 10px; align-items: stretch;
      background: rgba(255,255,255,.90);
      border: 1px solid rgba(8,16,31,.10);
      border-radius: 999px;
      padding: 10px;
      box-shadow: var(--shadow-sm);
      max-width: 600px;
    }
    .capture input{
      flex: 1;
      border: 0;
      outline: none;
      background: transparent;
      font-size: 15px;
      padding: 8px 10px;
      color: var(--text);
    }
    .capture input::placeholder{ color: rgba(68,84,106,.65); }
    .hint{
      font-size: 12.5px;
      color: rgba(68,84,106,.92);
      margin: 10px 0 0;
    }

    /* Hero visual: “foto” com moldura verde + UI cards por cima (mais parecido com o Bling) */
    .visual{ position: relative; min-height: 470px; }
    .stage{
      position:absolute; inset: 0;
      margin-left:auto;
      width: min(560px, 100%);
      border-radius: 30px;
      background: linear-gradient(135deg, rgba(22,163,74,.96), rgba(6,78,59,.96));
      box-shadow: var(--shadow);
      overflow:hidden;
    }
    .stage::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(280px 260px at 78% 22%, rgba(167,243,208,.55), transparent 60%),
        radial-gradient(360px 280px at 18% 85%, rgba(236,253,243,.28), transparent 65%);
      opacity: .95;
    }

    /* “Foto” fake (placeholder elegante) */
    .photo{
      position:absolute;
      right: 34px;
      bottom: 28px;
      width: 310px;
      height: 340px;
      border-radius: 24px;
      background:
        radial-gradient(circle at 30% 25%, rgba(255,255,255,.55), rgba(255,255,255,.12)),
        linear-gradient(135deg, rgba(16,185,129,.55), rgba(255,255,255,.08));
      border: 1px solid rgba(255,255,255,.30);
      box-shadow: 0 22px 50px rgba(2,6,23,.18);
      overflow:hidden;
    }
    .photo::after{
      content:"";
      position:absolute;
      inset: 18px 18px auto auto;
      width: 56px; height: 56px;
      border-radius: 18px;
      background: rgba(255,255,255,.92);
      display:block;
      mask-image: none;
      box-shadow: 0 18px 40px rgba(2,6,23,.14);
      background-image: url("assets/logo-mark.png");
      background-size: 32px 32px;
      background-repeat: no-repeat;
      background-position: center;
    }

    /* Mini “integrações” no topo (como o Bling) */
    .integrations{
      position:absolute;
      right: 34px;
      top: 26px;
      display:flex;
      gap: 8px;
      align-items:center;
      z-index: 2;
    }
    .int{
      width: 34px; height: 34px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.35);
      background: rgba(255,255,255,.92);
      box-shadow: 0 10px 22px rgba(2,6,23,.12);
      display:grid; place-items:center;
      font-weight: 900;
      color: rgba(8,16,31,.78);
      font-size: 12px;
    }
    .int.ml{ color: rgba(6,78,59,.95); }
    .int.s{ color: rgba(68,84,106,.92); }
    .int.p{ color: rgba(217,119,6,.95); background: rgba(255,247,237,.96); }

    /* UI floating cards */
    .ui{
      position:absolute;
      left: 28px;
      top: 86px;
      right: 170px;
      bottom: 28px;
      border-radius: 22px;
      background: rgba(255,255,255,.94);
      border: 1px solid rgba(255,255,255,.45);
      box-shadow: 0 22px 50px rgba(2,6,23,.18);
      padding: 16px;
      display:flex;
      flex-direction: column;
      gap: 12px;
      z-index: 2;
    }
    .ui-top{ display:flex; align-items:center; justify-content:space-between; gap: 10px; }
    .pill{
      font-size: 12px;
      font-weight: 900;
      color: rgba(6,78,59,.96);
      background: rgba(22,163,74,.10);
      border: 1px solid rgba(22,163,74,.18);
      padding: 8px 10px;
      border-radius: 999px;
      width: fit-content;
    }
    .search{
      background: rgba(8,16,31,.05);
      border: 1px solid rgba(8,16,31,.06);
      border-radius: 12px;
      padding: 10px 12px;
      color: rgba(68,84,106,.85);
      font-size: 12px;
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
      max-width: 220px;
    }

    .cards{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }
    .card{
      border: 1px solid rgba(8,16,31,.08);
      border-radius: 16px;
      background: #fff;
      padding: 12px;
      min-height: 84px;
    }
    .card .t{
      font-size: 11.5px;
      font-weight: 900;
      color: rgba(68,84,106,.95);
    }
    .card .v{
      margin-top: 10px;
      font-weight: 950;
      letter-spacing: -0.02em;
      font-size: 18px;
    }
    .mini{
      display:flex; gap: 8px; align-items:center;
      margin-top: 6px;
      color: rgba(68,84,106,.8);
      font-size: 11.5px;
    }
    .bar{
      height: 7px; flex:1;
      background: rgba(8,16,31,.06);
      border-radius: 999px;
      overflow:hidden;
    }
    .bar > i{
      display:block; height: 100%;
      width: 58%;
      background: linear-gradient(135deg, var(--g-600), var(--g-800));
      border-radius: 999px;
    }
    .table{
      border: 1px solid rgba(8,16,31,.08);
      border-radius: 16px;
      overflow:hidden;
      background: #fff;
    }
    .trow{
      display:grid;
      grid-template-columns: 1.2fr .8fr .8fr;
      gap: 10px;
      padding: 12px 12px;
      font-size: 12.5px;
      color: rgba(68,84,106,.92);
    }
    .trow.head{
      background: rgba(8,16,31,.03);
      font-weight: 950;
      color: rgba(68,84,106,.92);
    }
    .trow + .trow{ border-top: 1px solid rgba(8,16,31,.06); }
    .tag{
      display:inline-flex;
      align-items:center;
      padding: 4px 8px;
      border-radius: 999px;
      background: rgba(255,247,237,.96);
      border: 1px solid rgba(245,158,11,.24);
      color: rgba(120,53,15,.95);
      font-weight: 900;
      font-size: 11px;
      width: fit-content;
    }

    .float{
      position:absolute;
      border-radius: 18px;
      padding: 12px 12px;
      background: rgba(255,255,255,.95);
      border: 1px solid rgba(255,255,255,.60);
      box-shadow: 0 22px 50px rgba(2,6,23,.16);
      min-width: 190px;
      z-index: 3;
    }
    .float .k{ font-size: 11.5px; font-weight: 950; color: rgba(68,84,106,.9); }
    .float .n{ margin-top: 6px; font-size: 18px; font-weight: 950; letter-spacing: -0.02em; }
    .float .s{ margin-top: 4px; font-size: 11.5px; color: rgba(68,84,106,.85); }
    .float.a{ top: 44px; left: 18px; transform: rotate(-1.2deg); }
    .float.b{ bottom: 22px; left: 40px; transform: rotate(1.1deg); }

    /* Social proof band (mais parecido com o Bling) */
    .band{
      background: linear-gradient(135deg, rgba(22,163,74,.96), rgba(6,78,59,.96));
      color: #fff;
      padding: 18px 0;
      position: relative;
      overflow:hidden;
    }
    .band::before{
      content:"";
      position:absolute; inset:-50px -120px auto auto;
      width: 420px; height: 220px;
      border-radius: 999px;
      background: radial-gradient(circle at 30% 30%, rgba(167,243,208,.35), transparent 60%);
      filter: blur(22px);
      opacity: .8;
    }
    .band-inner{
      display:flex; align-items:center; justify-content:space-between;
      gap: 18px;
      flex-wrap: wrap;
      position: relative;
      z-index: 1;
    }
    .faces{ display:flex; align-items:center; }
    .face{
      width: 34px; height: 34px;
      border-radius: 999px;
      border: 2px solid rgba(255,255,255,.60);
      background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.45), rgba(255,255,255,.10)),
        linear-gradient(135deg, rgba(167,243,208,.65), rgba(255,255,255,.12));
      margin-left: -10px;
    }
    .face:first-child{ margin-left: 0; }
    .band strong{ font-weight: 950; letter-spacing: -0.01em; }
    .band small{ opacity: .88; }

    /* ===== Sections ===== */
    section{ padding: 62px 0; }
    .section-title{
      font-size: 32px;
      letter-spacing: -0.03em;
      margin: 0 0 10px;
    }
    .section-sub{
      margin: 0 0 28px;
      color: rgba(68,84,106,.96);
      max-width: 78ch;
      font-size: 15px;
    }

    .grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

    .feature{
      border: 1px solid rgba(8,16,31,.10);
      border-radius: var(--radius);
      background: rgba(255,255,255,.90);
      box-shadow: var(--shadow-sm);
      padding: 20px;
      min-height: 150px;
    }
    .feature h3{
      margin: 0 0 8px;
      font-size: 16px;
      letter-spacing: -0.02em;
    }
    .feature p{ margin: 0; color: rgba(68,84,106,.96); font-size: 14px; }
    .icon{
      width: 40px; height: 40px;
      display:grid; place-items:center;
      border-radius: 16px;
      background: rgba(22,163,74,.10);
      border: 1px solid rgba(22,163,74,.18);
      margin-bottom: 12px;
      box-shadow: 0 10px 18px rgba(2,6,23,.05);
    }
    .icon svg{ width: 18px; height: 18px; color: var(--g-800); }

    /* Video / Preview section (estética Bling) */
    .video-wrap{
      position: relative;
      border-radius: 34px;
      background: radial-gradient(900px 380px at 50% 0%, rgba(16,185,129,.15), transparent 65%),
                  linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.70));
      border: 1px solid rgba(8,16,31,.08);
      box-shadow: var(--shadow);
      padding: 26px;
      overflow:hidden;
    }
    .video-frame{
      border-radius: 24px;
      border: 1px solid rgba(8,16,31,.10);
      background: #fff;
      overflow:hidden;
      position: relative;
      min-height: 320px;
      box-shadow: 0 18px 45px rgba(2,6,23,.10);
    }
    .video-frame::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(220px 220px at 20% 25%, rgba(22,163,74,.12), transparent 60%),
        radial-gradient(260px 220px at 80% 65%, rgba(245,158,11,.10), transparent 62%),
        linear-gradient(180deg, rgba(8,16,31,.02), rgba(8,16,31,.00));
      opacity: .95;
    }
    .video-ui{
      position:absolute;
      inset: 22px;
      border-radius: 20px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(8,16,31,.08);
      box-shadow: 0 18px 40px rgba(2,6,23,.10);
      padding: 16px;
      display:grid;
      grid-template-columns: 240px 1fr;
      gap: 14px;
    }
    .side{
      border-radius: 16px;
      background: rgba(8,16,31,.03);
      border: 1px solid rgba(8,16,31,.06);
      padding: 12px;
    }
    .side .srow{
      height: 10px;
      border-radius: 999px;
      background: rgba(8,16,31,.10);
      margin: 10px 0;
      opacity: .65;
    }
    .main{
      border-radius: 16px;
      background: #fff;
      border: 1px solid rgba(8,16,31,.08);
      overflow:hidden;
    }
    .main-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 10px 12px;
      border-bottom: 1px solid rgba(8,16,31,.06);
      background: rgba(8,16,31,.02);
      font-size: 12px;
      color: rgba(68,84,106,.92);
      font-weight: 800;
    }
    .play{
      position:absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 74px;
      height: 74px;
      border-radius: 999px;
      background: rgba(22,163,74,.96);
      box-shadow: 0 22px 50px rgba(22,163,74,.30);
      display:grid;
      place-items:center;
      cursor:pointer;
      border: 3px solid rgba(255,255,255,.70);
    }
    .play:active{ transform: translate(-50%, -50%) scale(.99); }
    .play svg{ width: 26px; height: 26px; fill: #fff; margin-left: 2px; }

    .cta-band{
      border-radius: var(--radius);
      border: 1px solid rgba(22,163,74,.20);
      background: linear-gradient(135deg, rgba(22,163,74,.12), rgba(22,163,74,.06));
      padding: 22px;
      display:grid;
      grid-template-columns: 1fr auto;
      gap: 16px;
      align-items:center;
      box-shadow: var(--shadow-sm);
      margin-top: 18px;
    }
    .cta-band h3{
      margin: 0;
      font-size: 18px;
      letter-spacing: -0.02em;
    }
    .cta-band p{
      margin: 6px 0 0;
      color: rgba(68,84,106,.96);
      font-size: 14px;
    }

    /* Split section (dark) semelhante ao Bling */
    .split{
      background: linear-gradient(135deg, rgba(6,78,59,.98), rgba(4,47,46,.98));
      color: #fff;
      padding: 64px 0;
    }
    .split-inner{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
      align-items:center;
    }
    .split h2{
      margin: 0 0 10px;
      font-size: 34px;
      line-height: 1.05;
      letter-spacing: -0.03em;
    }
    .split p{
      margin: 0 0 18px;
      color: rgba(255,255,255,.86);
      max-width: 66ch;
      font-size: 15px;
    }
    .split .btn-light{ background: rgba(255,255,255,.92); }
    .orbit{
      border-radius: 30px;
      background: radial-gradient(460px 220px at 30% 30%, rgba(167,243,208,.22), transparent 60%),
                  radial-gradient(520px 260px at 70% 70%, rgba(22,163,74,.22), transparent 60%),
                  rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: 0 22px 70px rgba(0,0,0,.28);
      height: 330px;
      position: relative;
      overflow:hidden;
    }
    .orbit .node{
      position:absolute;
      border-radius: 999px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(255,255,255,.22);
      padding: 10px 12px;
      color: rgba(6,78,59,.96);
      font-weight: 950;
      font-size: 12px;
      box-shadow: 0 16px 45px rgba(0,0,0,.20);
      display:flex; align-items:center; gap: 8px;
    }
    .dot{
      width: 10px; height: 10px; border-radius: 999px;
      background: linear-gradient(135deg, var(--g-600), var(--g-800));
      box-shadow: 0 8px 18px rgba(22,163,74,.35);
    }

    .orbit .node.n1{ top: 46px; left: 34px; }
    .orbit .node.n2{ top: 64px; right: 40px; }
    .orbit .node.n3{ bottom: 56px; left: 66px; }
    .orbit .node.n4{ bottom: 64px; right: 54px; }
    .orbit .node.n5{ top: 146px; left: 50%; transform: translateX(-50%); }

    /* FAQ */
    details{
      border: 1px solid rgba(8,16,31,.10);
      border-radius: var(--radius);
      background: rgba(255,255,255,.90);
      box-shadow: var(--shadow-sm);
      padding: 14px 16px;
    }
    details + details{ margin-top: 10px; }
    summary{
      cursor:pointer;
      font-weight: 950;
      letter-spacing: -0.01em;
      list-style:none;
    }
    summary::-webkit-details-marker{ display:none; }
    details p{ margin: 10px 0 0; color: rgba(68,84,106,.96); }

    /* Footer */
    footer{
      border-top: 1px solid rgba(8,16,31,.08);
      padding: 28px 0;
      color: rgba(68,84,106,.96);
      font-size: 13px;
      background: rgba(255,255,255,.55);
    }
    .footer-grid{
      display:grid;
      grid-template-columns: 1.2fr .8fr;
      gap: 16px;
      align-items:start;
    }
    .footer-links{ display:flex; justify-content:flex-end; flex-wrap:wrap; gap: 14px; }
    .footer-links a{ text-decoration: underline; text-underline-offset: 3px; }

    /* Modal */
    .modal{
      position: fixed;
      inset: 0;
      display:none;
      place-items:center;
      background: rgba(2,6,23,.55);
      padding: 18px;
      z-index: 80;
    }
    .modal.open{ display:grid; }
    .modal-card{
      width: min(580px, 100%);
      border-radius: 26px;
      background: #fff;
      box-shadow: var(--shadow);
      border: 1px solid rgba(255,255,255,.30);
      overflow:hidden;
    }
    .modal-head{ padding: 18px 18px 0; }
    .modal-head h3{ margin: 0; letter-spacing: -0.02em; font-size: 18px; }
    .modal-head p{ margin: 8px 0 0; color: rgba(68,84,106,.96); font-size: 13px; }
    .modal form{ padding: 16px 18px 18px; display:grid; gap: 10px; }
    .field{ display:grid; gap: 6px; }
    .field label{ font-size: 12px; color: rgba(68,84,106,.96); font-weight: 950; }
    .field input, .field select{
      border-radius: 14px;
      border: 1px solid rgba(8,16,31,.12);
      padding: 12px 12px;
      font-size: 14px;
      outline: none;
      background: #fff;
    }
    .field input:focus, .field select:focus{
      border-color: rgba(22,163,74,.55);
      box-shadow: 0 0 0 4px rgba(34,197,94,.16);
    }
    .modal-actions{
      display:flex; gap: 10px; justify-content:flex-end; align-items:center; flex-wrap:wrap;
      margin-top: 6px;
    }
    .x{
      margin-left:auto;
      border: 1px solid rgba(8,16,31,.10);
      background: rgba(8,16,31,.03);
      color: rgba(8,16,31,.85);
      border-radius: 12px;
      padding: 10px 12px;
      cursor:pointer;
      font-weight: 950;
    }
    .x:hover{ background: rgba(8,16,31,.06); }
    .ok{
      display:none;
      margin-top: 10px;
      border-radius: 14px;
      border: 1px solid rgba(22,163,74,.22);
      background: rgba(22,163,74,.12);
      padding: 12px;
      font-weight: 950;
      color: var(--g-900);
      font-size: 13px;
    }

    /* Animation */
    .reveal{ opacity: 0; transform: translateY(10px); transition: opacity .55s ease, transform .55s ease; }
    .reveal.on{ opacity: 1; transform: translateY(0); }

    /* Responsive */
    @media (max-width: 980px){
      .header-inner{ grid-template-columns: 1fr auto; }
      nav{ display:none; }
      .hero-inner{ grid-template-columns: 1fr; padding-top: 44px; }
      .visual{ min-height: 520px; }
      .stage{ position: relative; width: 100%; }
      .ui{ left: 18px; right: 18px; top: 86px; }
      .photo{ right: 18px; bottom: 18px; width: 270px; height: 300px; opacity: .92; }
      .float.a{ left: 18px; }
      .float.b{ left: 36px; }
      .split-inner{ grid-template-columns: 1fr; }
      .orbit{ height: 320px; }
    }
    @media (max-width: 560px){
      .grid-3{ grid-template-columns: 1fr; }
      .grid-2{ grid-template-columns: 1fr; }
      .cta-band{ grid-template-columns: 1fr; }
      .footer-grid{ grid-template-columns: 1fr; }
      .footer-links{ justify-content:flex-start; }
      .capture{ flex-direction: column; border-radius: 18px; }
      .capture .btn{ width: 100%; }
      .cards{ grid-template-columns: 1fr; }
      .ui{ inset: 18px; }
      .photo{ display:none; }
      .integrations{ right: 18px; }
      .video-ui{ grid-template-columns: 1fr; }
      .side{ display:none; }
    }
  
    /* ===== Split block (Bling-like) + Carousel ===== */
    .splitV2{ padding: 62px 0; background: transparent; }
    .splitBlock{
      display:grid;
      grid-template-columns: 1.05fr .95fr;
      border-radius: 44px;
      overflow:hidden;
      box-shadow: var(--shadow);
      border: 1px solid rgba(8,16,31,.08);
    }
    .splitLeft{
      background: linear-gradient(135deg, rgba(22,163,74,.92), rgba(6,78,59,.92));
      position: relative;
      padding: 26px;
      min-height: 420px;
      display:flex;
      flex-direction: column;
      justify-content: center;
      gap: 14px;
    }
    .splitLeft::before{
      content:"";
      position:absolute; inset:0;
      background:
        radial-gradient(380px 260px at 22% 28%, rgba(236,253,243,.30), transparent 62%),
        radial-gradient(420px 280px at 76% 76%, rgba(167,243,208,.22), transparent 62%);
      opacity: .95;
      pointer-events:none;
    }
    .splitCarousel{
      position: relative;
      z-index: 1;
      width: 100%;
      height: 320px;
    }
    .splitSlide{
      position:absolute;
      inset:0;
      opacity: 0;
      transform: translateX(14px);
      transition: opacity .55s ease, transform .55s ease;
      pointer-events:none;
    }
    .splitSlide.active{
      opacity: 1;
      transform: translateX(0);
      pointer-events:auto;
    }
    .splitTop{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      margin-bottom: 14px;
    }
    .splitTop .label{
      display:inline-flex;
      align-items:center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(255,255,255,.30);
      font-weight: 950;
      color: rgba(6,78,59,.96);
      box-shadow: 0 18px 40px rgba(2,6,23,.18);
      font-size: 12px;
    }
    .splitTop .mini{
      display:flex; gap: 8px; align-items:center;
    }
    .miniBadge{
      width: 34px; height: 34px;
      border-radius: 999px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(255,255,255,.28);
      box-shadow: 0 18px 40px rgba(2,6,23,.14);
      display:grid; place-items:center;
      font-weight: 950;
      color: rgba(8,16,31,.78);
      font-size: 12px;
    }
    .miniBadge.accent{ color: rgba(6,78,59,.96); }

    /* Ring diagram */
    .ring{
      position: relative;
      width: min(460px, 100%);
      height: 280px;
      margin: 0 auto;
      border-radius: 30px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.18);
      box-shadow: 0 22px 70px rgba(0,0,0,.24);
      overflow:hidden;
    }
    .ring::before{
      content:"";
      position:absolute;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      width: 220px; height: 220px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: inset 0 0 0 14px rgba(255,255,255,.06);
    }
    .ringCenter{
      position:absolute;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      width: 110px; height: 110px;
      border-radius: 26px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(255,255,255,.30);
      box-shadow: 0 18px 50px rgba(2,6,23,.18);
      display:grid; place-items:center;
      font-weight: 950;
      color: rgba(6,78,59,.96);
    }
    .ringCenter img{ width: 44px; height: 44px; }
    .ringItem{
      position:absolute;
      display:flex;
      align-items:center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(255,255,255,.26);
      box-shadow: 0 18px 45px rgba(2,6,23,.16);
      font-weight: 950;
      font-size: 12px;
      color: rgba(8,16,31,.82);
      white-space: nowrap;
    }
    .ringDot{
      width: 10px; height: 10px; border-radius: 999px;
      background: linear-gradient(135deg, var(--g-600), var(--g-800));
      box-shadow: 0 10px 22px rgba(22,163,74,.36);
      flex: 0 0 auto;
    }
    .ringItem.i1{ top: 28px; left: 34px; }
    .ringItem.i2{ top: 28px; right: 34px; }
    .ringItem.i3{ bottom: 34px; left: 54px; }
    .ringItem.i4{ bottom: 34px; right: 54px; }
    .ringItem.i5{ top: 120px; left: 50%; transform: translateX(-50%); }

    .splitNav{
      position: relative;
      z-index: 1;
      display:flex;
      gap: 10px;
      justify-content:center;
      align-items:center;
      margin-top: 6px;
    }
    .dotBtn{
      width: 10px; height: 10px;
      border-radius: 999px;
      border: 0;
      background: rgba(255,255,255,.45);
      cursor:pointer;
      padding: 0;
    }
    .dotBtn.active{ background: rgba(255,255,255,.92); }
    .splitProgress{
      width: 140px;
      height: 6px;
      border-radius: 999px;
      background: rgba(255,255,255,.22);
      overflow:hidden;
      margin-left: 10px;
    }
    .splitProgress > i{
      display:block;
      height: 100%;
      width: 0%;
      background: rgba(255,255,255,.92);
      border-radius: 999px;
    }

    .splitRight{
      background: linear-gradient(135deg, rgba(6,78,59,.98), rgba(4,47,46,.98));
      color: #fff;
      padding: 38px 34px;
      display:flex;
      flex-direction: column;
      justify-content: center;
      gap: 12px;
    }
    .splitRight h2{
      margin: 0;
      font-size: 36px;
      line-height: 1.04;
      letter-spacing: -0.03em;
    }
    .splitRight p{
      margin: 0;
      color: rgba(255,255,255,.86);
      font-size: 15px;
      max-width: 64ch;
    }
    .splitRight .ctaRow{ display:flex; gap: 10px; align-items:center; flex-wrap:wrap; margin-top: 8px; }
    .splitRight .meta{
      margin-top: 6px;
      font-size: 12.5px;
      color: rgba(255,255,255,.78);
    }
    .splitRight .meta strong{ color: rgba(255,255,255,.92); }

    /* ===== FAQ v2 (Bling-like split) ===== */
    .faqV2{ padding: 62px 0; }
    .faqBlock{
      display:grid;
      grid-template-columns: 1fr 1fr;
      border-radius: 44px;
      overflow:hidden;
      box-shadow: var(--shadow);
      border: 1px solid rgba(8,16,31,.08);
    }
    .faqLeft{
      background: linear-gradient(135deg, rgba(22,163,74,.14), rgba(236,253,243,.65));
      padding: 38px 34px;
      position: relative;
      overflow:hidden;
    }
    .faqLeft::before{
      content:"";
      position:absolute;
      inset:-80px -120px auto auto;
      width: 420px; height: 260px;
      border-radius: 999px;
      background: radial-gradient(circle at 30% 30%, rgba(22,163,74,.22), transparent 60%);
      filter: blur(12px);
      opacity: .95;
    }
    .faqLeft h2{
      margin: 0 0 10px;
      font-size: 34px;
      line-height: 1.06;
      letter-spacing: -0.03em;
      position: relative;
      z-index: 1;
    }
    .faqLeft p{
      margin: 0 0 16px;
      color: rgba(68,84,106,.96);
      position: relative;
      z-index: 1;
      max-width: 62ch;
    }
    .faqChips{
      position: relative;
      z-index: 1;
      display:flex;
      flex-wrap:wrap;
      gap: 10px;
      margin: 18px 0 18px;
    }
    .faqChip{
      display:flex;
      align-items:center;
      gap: 8px;
      padding: 10px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(8,16,31,.10);
      box-shadow: var(--shadow-sm);
      font-weight: 900;
      font-size: 13px;
      color: rgba(8,16,31,.82);
      white-space: nowrap;
    }
    .faqChip svg{ width: 16px; height: 16px; color: var(--g-700); }
    .faqLeft .btn{ position: relative; z-index: 1; }

    .faqRight{
      background: linear-gradient(135deg, rgba(6,78,59,.98), rgba(4,47,46,.98));
      padding: 26px 24px;
      display:flex;
      flex-direction: column;
      justify-content:center;
      gap: 10px;
    }
    .accItem{
      border-radius: 22px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      overflow:hidden;
    }
    .accBtn{
      width: 100%;
      text-align: left;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 14px;
      padding: 16px 16px;
      border: 0;
      background: transparent;
      color: rgba(255,255,255,.95);
      font-weight: 950;
      letter-spacing: -0.01em;
      cursor:pointer;
      font-size: 15px;
    }
    .accBtn:hover{ background: rgba(255,255,255,.05); }
    .accIcon{
      width: 34px; height: 34px;
      border-radius: 999px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.14);
      display:grid; place-items:center;
      flex: 0 0 auto;
      font-weight: 950;
      font-size: 18px;
      line-height: 1;
    }
    .accPanel{
      max-height: 0;
      overflow:hidden;
      transition: max-height .35s ease;
    }
    .accPanel > div{
      padding: 0 16px 16px;
      color: rgba(255,255,255,.82);
      font-size: 14px;
      line-height: 1.55;
    }
    .accItem.open .accPanel{ max-height: 240px; }
    .accItem.open .accIcon{ background: rgba(255,255,255,.16); }

    @media (max-width: 980px){
      .splitBlock{ grid-template-columns: 1fr; }
      .splitRight{ padding: 30px 22px; }
      .splitLeft{ min-height: 380px; }
      .faqBlock{ grid-template-columns: 1fr; }
      .faqLeft, .faqRight{ padding: 28px 22px; }
    }

    /* ===== Hero right visual as a card (Bling-like) ===== */
    .heroCard{
      position:absolute;
      inset: 0;
      margin-left: auto;
      width: min(610px, 100%);
      padding: 12px;
      border-radius: 34px;
      background: rgba(255,255,255,.70);
      border: 1px solid rgba(8,16,31,.10);
      box-shadow: 0 35px 85px rgba(2,6,23,.20);
      backdrop-filter: blur(8px);
    }
    .heroCard .stage{
      position: relative;
      inset: auto;
      width: 100%;
      height: 100%;
      border-radius: 28px;
      margin: 0;
    }
    @media (max-width: 980px){
      .heroCard{ position: relative; inset: auto; width: 100%; }
    }

    /* ===== FAQ carousel (single card, Bling testimonial vibe) ===== */
    .faqCarousel{ padding: 72px 0; }
    .faqHead{ text-align:center; margin-bottom: 26px; }
    .faqTitle{
      margin: 0;
      font-size: 46px;
      line-height: 1.06;
      letter-spacing: -0.04em;
    }
    .faqSub{
      margin: 12px auto 0;
      max-width: 68ch;
      color: rgba(68,84,106,.95);
      font-size: 16px;
    }

    .faqStage{
      position: relative;
      margin: 26px auto 0;
      width: min(1050px, 100%);
      min-height: 360px;
    }

    .faqCard{
      position:absolute;
      inset: 0;
      width: 100%;
      border-radius: 44px;
      background: linear-gradient(135deg, rgba(22,163,74,.12), rgba(236,253,243,.74));
      border: 1px solid rgba(22,163,74,.14);
      box-shadow: 0 26px 70px rgba(2,6,23,.12);
      padding: 28px 30px 30px;
      opacity: 0;
      transform: translateX(18px);
      transition: opacity .45s ease, transform .45s ease;
      overflow:hidden;
    }
    .faqCard.active{
      opacity: 1;
      transform: translateX(0);
    }
    .faqCardTop{
      display:flex;
      align-items:center;
      gap: 14px;
      margin-bottom: 8px;
    }
    .faqAvatar{
      width: 56px; height: 56px;
      border-radius: 999px;
      background: rgba(255,255,255,.88);
      border: 3px solid rgba(22,163,74,.55);
      box-shadow: 0 18px 40px rgba(2,6,23,.12);
      display:grid; place-items:center;
      overflow:hidden;
      flex: 0 0 auto;
    }
    .faqAvatar img{ width: 32px; height: 32px; }
    .faqName{ font-weight: 950; color: rgba(6,78,59,.96); }
    .faqRole{ font-size: 13px; color: rgba(8,16,31,.68); margin-top: 2px; }

    .faqQuote{
      position:absolute;
      left: 26px;
      top: 112px;
      font-size: 120px;
      line-height: 1;
      color: rgba(22,163,74,.16);
      font-weight: 950;
      pointer-events:none;
      user-select:none;
    }

    .faqQ{
      margin: 22px 0 10px;
      font-size: 26px;
      line-height: 1.15;
      letter-spacing: -0.02em;
      color: rgba(8,16,31,.92);
      max-width: 40ch;
    }
    .faqA{
      margin: 0;
      font-size: 16px;
      line-height: 1.65;
      color: rgba(68,84,106,.98);
      max-width: 72ch;
    }

    .faqNav{
      position:absolute;
      left: 24px;
      bottom: 18px;
      display:flex;
      gap: 10px;
      align-items:center;
      z-index: 3;
    }
    .faqArrow{
      width: 44px; height: 44px;
      border-radius: 999px;
      border: 1px solid rgba(8,16,31,.10);
      background: rgba(255,255,255,.90);
      box-shadow: 0 12px 30px rgba(2,6,23,.10);
      cursor:pointer;
      font-size: 24px;
      line-height: 1;
      display:grid; place-items:center;
      color: rgba(8,16,31,.78);
    }
    .faqArrow.primary{
      background: linear-gradient(135deg, var(--g-600), var(--g-800));
      border-color: rgba(22,163,74,.26);
      color: #fff;
    }
    .faqArrow:hover{ transform: translateY(-1px); }

    .faqDots{
      position:absolute;
      left: 132px;
      bottom: 30px;
      display:flex;
      gap: 9px;
      align-items:center;
      z-index: 3;
    }
    .faqDot{
      width: 10px; height: 10px;
      border-radius: 999px;
      background: rgba(8,16,31,.16);
    }
    .faqDot.active{ background: rgba(22,163,74,.78); }

    .faqCta{
      display:flex;
      justify-content:center;
      gap: 12px;
      margin-top: 26px;
      flex-wrap: wrap;
    }

    @media (max-width: 980px){
      .faqTitle{ font-size: 36px; }
      .faqStage{ min-height: 420px; }
      .faqCard{ padding: 22px 20px 24px; border-radius: 34px; }
      .faqNav{ left: 16px; }
      .faqDots{ left: 116px; }
    }

    /* ===== Split carousel: single image per slide (no inner cards) ===== */
    .splitShot{
      width: min(520px, 100%);
      height: 320px;
      margin: 0 auto;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .splitShot svg{
      width: 100%;
      height: 100%;
      display:block;
    }
    @media (max-width: 980px){
      .splitShot{ height: 300px; }
    }

    /* ===== FAQ strip (cards side by side like Bling) ===== */
    .faqStrip{ padding: 72px 0; }
    .faqStrip .faqHead{ text-align:center; margin-bottom: 20px; }
    .faqStrip .faqTitle{
      margin: 0;
      font-size: 46px;
      line-height: 1.06;
      letter-spacing: -0.04em;
    }
    .faqStrip .faqSub{
      margin: 12px auto 0;
      max-width: 68ch;
      color: rgba(68,84,106,.95);
      font-size: 16px;
    }
    .faqShell{
      position: relative;
      width: min(1200px, 100%);
      margin: 26px auto 0;
    }
    .faqViewport{
      overflow: hidden;
      padding: 8px 0 10px;
    }
    .faqTrack{
      display:flex;
      gap: 22px;
      will-change: transform;
      transition: transform .45s ease;
    }
    .faqTile{
      flex: 0 0 auto;
      width: 360px;
      border-radius: 44px;
      background: linear-gradient(135deg, rgba(22,163,74,.12), rgba(236,253,243,.74));
      border: 1px solid rgba(22,163,74,.14);
      box-shadow: 0 26px 70px rgba(2,6,23,.10);
      padding: 24px 26px 24px;
      position: relative;
      overflow:hidden;
      min-height: 260px;
    }
    .faqTileTop{
      display:flex;
      align-items:center;
      gap: 14px;
      margin-bottom: 8px;
    }
    .faqTile .faqQuote{
      position:absolute;
      left: 18px;
      top: 98px;
      font-size: 110px;
      line-height: 1;
      color: rgba(22,163,74,.16);
      font-weight: 950;
      pointer-events:none;
      user-select:none;
    }
    .faqStrip .faqQ{
      margin: 18px 0 10px;
      font-size: 22px;
      line-height: 1.18;
      letter-spacing: -0.02em;
      color: rgba(8,16,31,.92);
      max-width: 34ch;
    }
    .faqStrip .faqA{
      margin: 0;
      font-size: 15px;
      line-height: 1.65;
      color: rgba(68,84,106,.98);
    }
    .faqStrip .faqNav{
      position:absolute;
      left: 10px;
      bottom: -60px;
      display:flex;
      gap: 10px;
      align-items:center;
      z-index: 3;
    }
    .faqStrip .faqCta{
      display:flex;
      justify-content:center;
      gap: 12px;
      margin-top: 58px;
      flex-wrap: wrap;
    }
    @media (max-width: 1100px){
      .faqTile{ width: 340px; }
    }
    @media (max-width: 980px){
      .faqStrip .faqTitle{ font-size: 36px; }
      .faqTrack{ gap: 16px; }
      .faqTile{ width: 320px; border-radius: 34px; }
      .faqStrip .faqNav{ bottom: -54px; }
      .faqStrip .faqCta{ margin-top: 54px; }
    }
    @media (max-width: 720px){
      .faqTile{ width: 86vw; }
    }

    /* ===== v7 polish fixes (FAQ background, split ghost button, avatars) ===== */

    /* Split right: ghost button must be readable on dark background */
    .splitV2 .splitRight .btn-ghost{
      color: rgba(255,255,255,.92);
      border-color: rgba(255,255,255,.18);
      background: rgba(255,255,255,.10);
      box-shadow: 0 12px 28px rgba(0,0,0,.12);
    }
    .splitV2 .splitRight .btn-ghost:hover{ background: rgba(255,255,255,.14); }

    /* Social proof faces: real avatars instead of empty circles */
    .faces{ gap: 0; }
    .face{
      display:grid;
      place-items:center;
      overflow:hidden;
      background: rgba(255,255,255,.14);
      box-shadow: 0 10px 26px rgba(0,0,0,.10);
    }
    .face img{
      width: 100%;
      height: 100%;
      display:block;
    }
    .facePlus{
      font-weight: 950;
      font-size: 14px;
      color: rgba(255,255,255,.92);
      background: rgba(255,255,255,.18);
    }

    /* FAQ: cleaner, whiter section like Bling */
    .faqStrip{
      background: #fff;
      padding: 78px 0;
    }
    .faqStrip .faqHead{ margin-bottom: 24px; }
    .faqViewport{
      padding: 10px 18px 12px;
    }
    .faqTrack{ gap: 24px; }

    .faqTile{
      background: rgba(234,248,240,.88);
      border-color: rgba(22,163,74,.12);
      box-shadow: 0 24px 60px rgba(2,6,23,.10);
      backdrop-filter: blur(4px);
      min-height: 250px;
    }
    .faqTile .faqQuote{
      font-size: 92px;
      top: 92px;
      color: rgba(22,163,74,.10);
    }
    .faqAvatar{
      background: rgba(255,255,255,.92);
      border-color: rgba(22,163,74,.35);
    }
    .faqStrip .faqQ{ font-size: 21px; }
    .faqStrip .faqA{ color: rgba(68,84,106,.92); }

    .faqStrip .faqNav{
      bottom: -54px;
      left: 18px;
    }

    @media (max-width: 980px){
      .faqStrip{ padding: 64px 0; }
      .faqViewport{ padding: 10px 10px 12px; }
      .faqTile{ border-radius: 36px; width: 340px; }
    }


    /* ===== v8 FAQ final polish (Bling-like) ===== */
    .faqStrip{
      background: radial-gradient(1200px 420px at 50% -40px, rgba(22,163,74,.08), transparent 60%),
                  linear-gradient(180deg, #ffffff 0%, #f7fbf9 100%);
      padding: 86px 0 96px;
    }
    .faqHead{ margin-bottom: 30px; }
    .faqTitle{
      font-size: 54px;
      line-height: 1.03;
      letter-spacing: -0.04em;
    }
    .faqSub{ font-size: 16px; color: rgba(68,84,106,.92); }

    .faqShell{
      position: relative;
      margin: 0 auto;
      width: min(1180px, 100%);
    }

    /* Edge fade like Bling */
    .faqShell::before,
    .faqShell::after{
      content:"";
      position:absolute;
      top: 0;
      bottom: 82px; /* leave room for arrows */
      width: 64px;
      pointer-events:none;
      z-index: 2;
    }
    .faqShell::before{
      left: 0;
      background: linear-gradient(90deg, rgba(247,251,249,1) 0%, rgba(247,251,249,0) 100%);
    }
    .faqShell::after{
      right: 0;
      background: linear-gradient(270deg, rgba(247,251,249,1) 0%, rgba(247,251,249,0) 100%);
    }

    .faqViewport{
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      scroll-padding-left: 18px;
      scrollbar-width: none;
      padding: 12px 18px 36px;
      border-radius: 32px;
    }
    .faqViewport::-webkit-scrollbar{ display:none; }

    .faqTrack{
      display:flex;
      gap: 24px;
      transform: none !important; /* kill v6/v7 transform */
      will-change: auto;
    }

    .faqTile{
      scroll-snap-align: start;
      flex: 0 0 372px;
      border-radius: 44px;
      background: #eaf8f0;
      border: 1px solid rgba(22,163,74,.16);
      box-shadow: 0 26px 70px rgba(2,6,23,.10);
      padding: 26px 28px 28px;
      min-height: 255px;
    }
    .faqTileTop{ gap: 14px; margin-bottom: 8px; }
    .faqAvatar{
      width: 56px; height: 56px;
      border-width: 3px;
      border-color: rgba(22,163,74,.45);
      background: rgba(255,255,255,.92);
    }
    .faqName{ font-weight: 950; color: rgba(6,78,59,.96); }
    .faqRole{ color: rgba(8,16,31,.52); }

    .faqQuote{
      font-size: 96px;
      top: 94px;
      left: 28px;
      color: rgba(22,163,74,.10);
    }
    .faqQ{
      margin-top: 22px;
      font-size: 24px;
      line-height: 1.15;
      max-width: 28ch;
    }
    .faqA{
      font-size: 16px;
      line-height: 1.65;
      color: rgba(68,84,106,.92);
      max-width: 60ch;
    }

    .faqNav{
      position: relative;
      margin-top: 14px;
      display:flex;
      gap: 10px;
      align-items:center;
      justify-content:flex-start;
      padding-left: 18px;
      z-index: 3;
    }
    .faqArrow:disabled{
      opacity: .45;
      cursor: default;
      transform: none !important;
    }

    @media (max-width: 980px){
      .faqTitle{ font-size: 40px; }
      .faqTile{ flex-basis: 340px; border-radius: 38px; }
      .faqShell::before, .faqShell::after{ width: 40px; }
    }
    @media (max-width: 720px){
      .faqTile{ flex-basis: calc(100vw - 84px); }
    }


    /* ===== v9 FAQ layout fix (remove weird container / overlays) ===== */
    .faqStrip{
      background: #ffffff;
      padding: 86px 0 90px;
    }
    .faqTitle{ font-size: 54px; }
    .faqSub{ max-width: 70ch; margin-left:auto; margin-right:auto; }

    .faqShell{
      width: min(1180px, 100%);
      margin: 0 auto;
      padding: 0;            /* no extra padding */
      position: relative;
    }

    /* Remove edge overlay/fade and big rounded container feel */
    .faqShell::before,
    .faqShell::after{
      display:none !important;
      content:none !important;
    }

    .faqViewport{
      background: transparent !important;
      box-shadow: none !important;
      border-radius: 0 !important;
      padding: 0 !important;
      overflow: hidden;                /* Bling-like: clean row */
    }

    /* Keep scroll + snap, but without huge inner padding */
    .faqViewport{
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-left: 0;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .faqViewport::-webkit-scrollbar{ display:none; }

    .faqTrack{
      padding: 10px 2px 18px;          /* small breathing room */
      gap: 22px;
      transform: none !important;
    }

    .faqTile{
      flex: 0 0 372px;
      min-height: 260px;
      height: auto;
      border-radius: 44px;
      background: rgba(234,248,240,.78);
      border: 1px solid rgba(22,163,74,.14);
      box-shadow: 0 24px 64px rgba(2,6,23,.10);
      padding: 26px 28px 28px;
      display:flex;
      flex-direction: column;
      justify-content: flex-start;
    }
    .faqTile:hover{
      box-shadow: 0 30px 78px rgba(2,6,23,.14);
      transform: translateY(-2px);
      transition: box-shadow .2s ease, transform .2s ease;
    }

    .faqQuote{ display:none; } /* Bling cards don't need the huge quote mark */

    /* Nav arrows: sit right under the row, aligned to left */
    .faqNav{
      margin-top: 10px !important;
      padding-left: 0 !important;
      justify-content: flex-start;
    }
    .faqArrow{
      width: 46px;
      height: 46px;
      font-size: 24px;
      border: 1px solid rgba(8,16,31,.10);
      background: #fff;
      box-shadow: 0 16px 38px rgba(2,6,23,.10);
    }
    .faqArrow.primary{
      background: linear-gradient(135deg, var(--g-600), var(--g-800));
      color: #fff;
      border-color: rgba(22,163,74,.18);
    }

    /* CTA spacing */
    .faqCta{ margin-top: 26px; }

    @media (max-width: 980px){
      .faqTitle{ font-size: 40px; }
      .faqTile{ flex-basis: 340px; border-radius: 38px; }
      .faqTrack{ padding-left: 10px; padding-right: 10px; }
      .faqNav{ padding-left: 10px !important; }
    }
    @media (max-width: 720px){
      .faqTile{ flex-basis: calc(100vw - 64px); }
      .faqTrack{ padding-left: 14px; padding-right: 14px; }
      .faqNav{ padding-left: 14px !important; }
    }



    /* ===== v10 FAQ: remove the "plate" behind cards completely ===== */
    #faq .faqShell,
    #faq .faqViewport,
    #faq .faqTrack{
      background: transparent !important;
      box-shadow: none !important;
      border-radius: 0 !important;
      filter: none !important;
      backdrop-filter: none !important;
    }
    #faq .faqViewport{
      padding: 0 !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }
    #faq .faqViewport::-webkit-scrollbar{ display:none; }
    #faq .faqTrack{
      padding: 10px 2px 6px !important;
    }
    #faq .faqNav{
      margin-top: 12px !important;
    }



    /* ===== v12 FAQ: keep arrows working AND remove any "plate" feel ===== */
    #faq .faqShell::before,
    #faq .faqShell::after{
      display:none !important;
      content:none !important;
    }

    #faq .faqShell,
    #faq .faqViewport,
    #faq .faqTrack{
      background: transparent !important;
      box-shadow: none !important;
      border-radius: 0 !important;
      filter: none !important;
      backdrop-filter: none !important;
    }

    #faq .faqViewport{
      padding: 0 !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }
    #faq .faqViewport::-webkit-scrollbar{ display:none; }

/* v13 — FAQ remove gradient "placa" behind cards */
#faq.faqStrip{
  background: #ffffff !important;
  background-image: none !important;
}
#faq.faqStrip::before, #faq.faqStrip::after{
  content: none !important;
  display: none !important;
}
#faq .faqShell::before, #faq .faqShell::after{
  content: none !important;
  display: none !important;
}


    /* ===== v14 FAQ: keep the "plate" but make it pure white ===== */
    /* remove any green-tinted glows behind the plate */
    #faq.faqStrip::before, #faq.faqStrip::after,
    #faq .faqShell::before, #faq .faqShell::after{
      content:none !important;
      display:none !important;
    }

    /* the plate itself */
    #faq .faqViewport{
      background: rgba(255,255,255,.96) !important;
      background-image: none !important;
      box-shadow: 0 22px 70px rgba(2,6,23,.10) !important;
      border: 1px solid rgba(2,6,23,.06) !important;
      border-radius: 48px !important;
      padding: 18px 18px 14px !important;

      overflow-x: auto !important;
      overflow-y: hidden !important;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }
    #faq .faqViewport::-webkit-scrollbar{ display:none; }

    /* keep the track neutral (no background tint) */
    #faq .faqShell,
    #faq .faqTrack{
      background: transparent !important;
      box-shadow: none !important;
      border-radius: 0 !important;
      filter: none !important;
      backdrop-filter: none !important;
    }

    /* spacing like Bling */
    #faq .faqTrack{ padding: 8px 2px 6px !important; }
    #faq .faqNav{ margin-top: 12px !important; }


/* ===== Auth / Login page (shared) ===== */
.authPage{
  background: var(--bg);
  min-height: calc(100vh - 78px);
  padding: 36px 0 64px;
}
.authGrid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 26px;
  align-items: stretch;
}
@media (max-width: 980px){
  .authPage{ padding: 20px 0 44px; }
  .authGrid{ grid-template-columns: 1fr; }
}

.authLeft{
  border-radius: 28px;
  padding: 26px 26px 22px;
  background: radial-gradient(1100px 520px at 16% 8%, rgba(22,163,74,.18) 0%, rgba(22,163,74,.08) 30%, rgba(236,253,243,.0) 68%),
              linear-gradient(180deg, rgba(236,253,243,.92), rgba(247,251,248,.86));
  border: 1px solid rgba(8,16,31,.08);
  box-shadow: var(--shadow-sm);
}
.authLeft .kicker{ margin-bottom: 14px; }
.authLeft h1{ font-size: clamp(34px, 3.2vw, 48px); line-height: 1.06; margin: 0 0 10px; }
.authLeft .subtitle{ color: var(--muted); font-size: 16px; line-height: 1.55; margin: 0 0 16px; max-width: 56ch; }

.authBullets{
  display:grid;
  gap: 10px;
  margin-top: 14px;
}
.authBullet{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(8,16,31,.06);
}
.authBullet .check{
  width: 20px; height: 20px; border-radius: 999px;
  background: rgba(22,163,74,.14);
  display:grid; place-items:center;
  flex:0 0 auto;
  margin-top: 2px;
}
.authBullet .check svg{ width: 14px; height: 14px; fill: var(--g-700); }
.authBullet b{ display:block; font-size: 14px; color: var(--text); margin-bottom: 2px; }
.authBullet span{ display:block; font-size: 13px; color: var(--muted); line-height: 1.35; }

.authRight{
  border-radius: 28px;
  padding: 26px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(8,16,31,.08);
  box-shadow: var(--shadow-md);
}
.authCard h2{ margin: 0 0 6px; font-size: 22px; }
.authCard p{ margin: 0 0 14px; color: var(--muted); line-height: 1.5; }

.formGrid{ display:grid; gap: 12px; }
.field label{ display:block; font-weight: 700; font-size: 12.5px; margin: 0 0 6px; color: rgba(8,16,31,.75); }
.field .input{ width: 100%; }
.pwd-wrap{ position: relative; }
.pwd-wrap .input{ padding-right: 40px !important; }
.pwd-toggle{ position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: #9CA3AF; padding: 2px; line-height: 0; }
.pwd-toggle:hover{ color: #6B7280; }

.rowBetween{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
}
.smallLink{
  font-size: 13px;
  color: rgba(8,16,31,.75);
  text-decoration: none;
}
.smallLink:hover{ color: rgba(8,16,31,.95); text-decoration: underline; }

.btnFull{ width: 100%; justify-content: center; }
.divider{
  display:flex; align-items:center; gap: 10px;
  margin: 12px 0;
  color: rgba(8,16,31,.55);
  font-size: 12px;
}
.divider:before,.divider:after{
  content:"";
  height: 1px;
  flex: 1;
  background: rgba(8,16,31,.10);
}

.btnGoogle{
  display: flex;
  align-items: center;
  width: 100%;
  justify-content:center;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(8,16,31,.14);
  color: rgba(8,16,31,.88);
}
.btnGoogle:hover{ background: rgba(255,255,255,.92); }
.gmark{
      width:18px;height:18px;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'> <path fill='%23EA4335' d='M24 9.5c3.54 0 6.7 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.71 17.74 9.5 24 9.5z'/> <path fill='%234285F4' d='M46.98 24.55c0-1.57-.14-3.09-.39-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.34 7.09-17.65z'/> <path fill='%23FBBC05' d='M10.54 28.41c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.96l7.98-6.55z'/> <path fill='%2334A853' d='M24 48c6.48 0 11.93-2.14 15.9-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.17 2.3-6.26 0-11.57-4.21-13.47-9.89l-7.98 6.55C6.51 42.62 14.62 48 24 48z'/> </svg>");
      background-size:contain;
      background-repeat:no-repeat;
      background-position:center;
      border-radius:4px;
      flex: 0 0 auto;
}

.fineprint{
  margin-top: 14px;
  font-size: 12.5px;
  color: rgba(8,16,31,.62);
  line-height: 1.4;
}
.fineprint a{ color: rgba(8,16,31,.78); text-decoration: underline; cursor: pointer; }

.consent-block {
  background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 14px;
  padding: 16px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px;
}
.consent-item { display: flex; gap: 12px; align-items: flex-start; }
.consent-item input[type="checkbox"] { width: 18px; height: 18px; margin-top: 1px; flex-shrink: 0; cursor: pointer; accent-color: #16A34A; }
.consent-item label { font-size: 13px; color: #374151; line-height: 1.5; cursor: pointer; }
.consent-item label a { color: #16A34A; text-decoration: underline; font-weight: 600; }

.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(8,16,31,.92);
  color: #fff;
  font-size: 13px;
  box-shadow: 0 20px 50px rgba(0,0,0,.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.show{ opacity: 1; transform: translateX(-50%) translateY(-4px); }

/* ===== v17: Cadastro & Pagamento pages ===== */
.pageHero{
  padding: 30px 0 10px;
}
.pageHero h1{
  margin: 0;
  font-size: clamp(30px, 3.0vw, 44px);
  line-height: 1.08;
}
.pageHero p{
  margin: 10px 0 0;
  color: var(--muted);
  max-width: 68ch;
  line-height: 1.6;
}
.card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(8,16,31,.08);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
}
.cardPad{ padding: 18px; }

.grid2{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items:start;
}
@media (max-width: 980px){ .grid2{ grid-template-columns: 1fr; } }

.planGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){ .planGrid{ grid-template-columns: 1fr; } }

.plan{
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(8,16,31,.08);
  background: rgba(255,255,255,.86);
  display:flex;
  flex-direction: column;
  gap: 10px;
justify-content:space-between;}

.plan h3{ margin:0; font-size: 16px; }
.plan .price{ font-size: 26px; font-weight: 900; letter-spacing: -0.02em; }
.plan .price small{ font-weight: 800; font-size: 13px; color: rgba(8,16,31,.60); }
.plan ul{
  margin: 0;
  padding-left: 18px;
  color: rgba(8,16,31,.75);
  line-height: 1.45;
  font-size: 13px;
}
.plan.selected{
  border-color: rgba(22,163,74,.28);
  box-shadow: 0 22px 55px rgba(22,163,74,.10);
}

.summaryMeta{min-width:0; flex:1 1 220px;}
.summaryRow{
  display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(8,16,31,.03);
  border: 1px solid rgba(8,16,31,.06);
}
.badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(22,163,74,.12);
  color: var(--g-700);
  border: 1px solid rgba(22,163,74,.18);
  font-weight: 800;
  font-size: 12.5px;
}

/* ===== v18: Pagamento (melhor layout) ===== */
.payHeroRow{display:grid;grid-template-columns:1fr;gap:16px;align-items:start;}
@media (max-width: 980px){
  .payHeroRow{ grid-template-columns: 1fr; }
}

.stepper{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.step{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(8,16,31,.08);
  color: rgba(8,16,31,.78);
  font-weight: 800;
  font-size: 12.5px;
}
.step span{
  width: 22px;
  height: 22px;
  display:grid;
  place-items:center;
  border-radius: 999px;
  background: rgba(8,16,31,.06);
  color: rgba(8,16,31,.9);
  font-weight: 900;
}
.step.isDone{
  border-color: rgba(22,163,74,.22);
  background: rgba(22,163,74,.08);
}
.step.isDone span{
  background: rgba(22,163,74,.18);
  color: var(--g-700);
}
.step.isActive{
  border-color: rgba(22,163,74,.32);
  box-shadow: 0 18px 44px rgba(22,163,74,.10);
}

.payLayout{
  display:grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: 24px;
  align-items: start;
  margin-top: 18px;
}
@media (max-width: 980px){
  .payLayout{ grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); }
}

.paySummary{
  position: sticky;
  top: 96px;
  max-width: 100%;
  overflow: hidden;
}
@media (max-width: 980px){
  .paySummary{ position: sticky; top:96px;position: sticky;}
}

.payPlansHeader h2,
.paySummary h2{
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.muted{ color: var(--muted); }

.payNote{
  display:flex;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px dashed rgba(8,16,31,.16);
  background: rgba(8,16,31,.02);
  line-height: 1.45;
}

.trustTop{
  display:flex;
  gap: 12px;
  align-items:flex-start;
}
.trustIcon{
  width: 38px; height: 38px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(22,163,74,.10);
  border: 1px solid rgba(22,163,74,.18);
}
.trustIcon svg{ width: 22px; height: 22px; fill: var(--g-700); }
.trustTitle{ font-weight: 950; }
.trustSub{ color: var(--muted); font-size: 13px; margin-top: 2px; line-height: 1.35; }

.trustBadges{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.pill{
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  background: rgba(8,16,31,.03);
  border: 1px solid rgba(8,16,31,.08);
  color: rgba(8,16,31,.78);
}

.plan{
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.plan:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 65px rgba(8,16,31,.08);
}
.plan:focus{
  outline: none;
  border-color: rgba(22,163,74,.30);
  box-shadow: 0 26px 65px rgba(22,163,74,.12);
}

.planTop{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.planTag{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 11.5px;
  background: rgba(8,16,31,.03);
  border: 1px solid rgba(8,16,31,.08);
  color: rgba(8,16,31,.72);
  white-space: nowrap;
}
.planTag.popular{
  background: rgba(22,163,74,.12);
  border-color: rgba(22,163,74,.18);
  color: var(--g-700);
}

.plan.isPopular{
  border-color: rgba(22,163,74,.25);
  box-shadow: 0 28px 70px rgba(22,163,74,.12);
  background:
    radial-gradient(800px 280px at 10% 0%, rgba(22,163,74,.10), transparent 55%),
    rgba(255,255,255,.92);
}

.plan.selected{
  border-color: rgba(22,163,74,.32);
  box-shadow: 0 28px 70px rgba(22,163,74,.14);
}

.summaryHead{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.summaryBox{
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(8,16,31,.08);
  background: rgba(255,255,255,.86);
}

.summaryRow{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
}
.summaryLabel{
  font-size: 12px;
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.summaryValue{
  font-weight: 950;
  font-size: 16px;
  margin-top: 2px;
}
.summarySub{
  color: rgba(8,16,31,.65);
  font-size: 13px;
  margin-top: 2px;
  overflow-wrap:anywhere;
}
.summaryPrice{
  font-weight: 950;
  font-size: 18px;
  white-space: nowrap;
}

.summaryLine{
  height: 1px;
  background: rgba(8,16,31,.08);
  margin: 12px 0;
}

.summarySmall{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  margin-bottom: 12px;
}

.faqMini{
  margin-top: 14px;
}
.faqMiniGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 980px){
  .faqMiniGrid{ grid-template-columns: 1fr; }
}
.faqMiniCard{
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(8,16,31,.08);
  background: rgba(8,16,31,.02);
}
.faqQ{ font-weight: 950; font-size: 13px; }
.faqA{ color: rgba(8,16,31,.70); font-size: 13px; margin-top: 4px; line-height: 1.35; }

.heroMeta{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.metaPill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(13,56,36,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
  color: rgba(8,16,31,.78);
  font-weight: 600;
  font-size: 13px
}
.featureChips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 10px}
.fChip{display:inline-flex;align-items:center;padding:7px 10px;border-radius:999px;
  background: rgba(22,163,74,.10);
  border: 1px solid rgba(22,163,74,.18);
  color: rgba(8,16,31,.78);
  font-size: 13px;
  font-weight: 600
}


/* Payment (cleaner pricing) */
.page-payment .payTrust{
  margin-top: 12px;
  color: rgba(8,16,31,.65);
  font-size: 14px;
}
.page-payment .planTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}
.page-payment .badgeSoft{
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(8,16,31,.06);
  color: rgba(8,16,31,.68);
  border: 1px solid rgba(8,16,31,.08);
  white-space: nowrap;
}
.page-payment .badgeGreen{
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(19,168,83,.14);
  color: #0b6b39;
  border: 1px solid rgba(19,168,83,.22);
  white-space: nowrap;
}
.page-payment .priceLine{
  display:flex;
  align-items:baseline;
  gap: 8px;
}
.page-payment .per{
  font-size: 13px;
  font-weight: 900;
  color: rgba(8,16,31,.58);
}
.page-payment .plan{
  min-width: 0;
}
.page-payment .plan ul{
  margin: 12px 0 16px;
}
.page-payment .summaryFeatures{
  list-style: none;
  padding: 0;
  margin: 14px 0 14px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.page-payment .summaryFeatures li{
  position: relative;
  padding-left: 34px;
  margin: 8px 0;
  line-height: 1.4;
  color: rgba(8,16,31,.78);
}
.page-payment .summaryFeatures li::before{
  content: "✓";
  position: absolute;
  left: 0;
  top: 2px;
  width: 20px;
  height: 20px;
  border-radius: 8px;
  display:grid;
  place-items:center;
  font-size: 12px;
  background: rgba(18,164,89,.12);
  color: var(--green-700);
  border: 1px solid rgba(18,164,89,.22);
}
.page-payment .linkBack{
  display:inline-block;
  margin-top: 8px;
  color: rgba(8,16,31,.7);
  font-weight: 800;
  text-decoration: none;
}
.page-payment .linkBack:hover{
  text-decoration: underline;
}

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

@media (max-width: 1200px){.planGrid{grid-template-columns:repeat(2,minmax(0,1fr));}}

.plan li{margin:6px 0}

.paySection{padding:28px 0 88px}

@media (max-width: 980px){.paySummary{position:static;top:auto;}}

.payLayout > *{min-width:0}


/* Payment summary overflow safety */
.paySummary, .summaryBox, .summarySub{
  max-width: 100%;
}
.summaryValue, .summaryLabel{
  max-width: 100%;
}

/* ------------------------------------------------------------------
   Payment page hardening (prevents text overflow on narrow widths)
   ------------------------------------------------------------------ */
.page-payment .payLayout,
.page-payment .payMain,
.page-payment .paySummary{
  min-width: 0;
}

.page-payment .summaryBox,
.page-payment .summaryRow,
.page-payment .summaryMeta,
.page-payment .summaryFeatures,
.page-payment .summaryFeatures li,
.page-payment .summarySub,
.page-payment .summaryTitle,
.page-payment .summaryName{
  min-width: 0;
  max-width: 100%;
}

.page-payment .summaryRow{
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.page-payment .summaryRow > div{
  min-width: 0;
  flex: 1 1 180px;
}
.page-payment .summaryPrice{
  flex: 0 0 auto;
  margin-left: auto;
}

/* Match the HTML structure used in pagamento.html */
.page-payment .summaryTitle{
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.page-payment .summaryName{
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.12;
}
.page-payment .summarySub{
  margin-top: 4px;
  color: rgba(8,16,31,.62);
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Checkout meta: stack to avoid flex overflow */
.page-payment .summaryMeta{
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  color: rgba(8,16,31,.66);
  font-weight: 750;
}
.page-payment .summaryMeta span{
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.page-payment .summaryFeatures{
  margin: 14px 0 12px;
}
.page-payment .summaryFeatures li{
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 520px){
  .page-payment .summaryRow{
    gap: 10px;
  }
  .page-payment .summaryPrice{
    font-size: 20px;
  }
}

/* ====== Payment page fixes (clean spacing + no overflow) ====== */
.page-payment .payLayout{
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: 20px;
}
@media (max-width: 980px){
  .page-payment .payLayout{ grid-template-columns: 1fr; }
  .page-payment .paySummary{ position: static; top: auto; }
}

.page-payment .paySummary .summaryBox{ padding: 18px; }
.page-payment .paySummary .summaryRow{ padding: 16px 16px; }

.page-payment .paySummary .summaryTop{ gap: 14px; }
.page-payment .paySummary .summaryTop > div{ min-width: 0; }
.page-payment .paySummary .summaryPrice{ white-space: nowrap; }

.page-payment .paySummary .summaryMeta,
.page-payment .paySummary .summaryDesc{
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.page-payment .paySummary .btnFull{ width: 100%; }
/* ====== end payment fixes ====== */

/* ===== Cookie Consent Banner ===== */
#cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 99999;
  background: rgba(8,16,31,.97); backdrop-filter: blur(12px);
  color: #fff; padding: 14px 24px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.08);
  transform: translateY(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 -4px 24px rgba(0,0,0,.25);
}
#cookie-banner.show { transform: translateY(0); }
#cookie-banner p { margin: 0; font-size: 13px; color: rgba(255,255,255,.8); line-height: 1.55; flex: 1; min-width: 220px; }
#cookie-banner p a { color: #6EE7B7; text-decoration: underline; }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-btn { padding: 9px 20px; border-radius: 999px; font-size: 13px; font-weight: 700; cursor: pointer; border: none; font-family: inherit; white-space: nowrap; transition: all .18s; }
.cookie-btn-accept { background: #16A34A; color: #fff; }
.cookie-btn-accept:hover { background: #15803D; }
.cookie-btn-decline { background: transparent; color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.22); }
.cookie-btn-decline:hover { background: rgba(255,255,255,.08); color: #fff; }
@media (max-width: 600px) {
  #cookie-banner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .cookie-actions { width: 100%; }
  .cookie-btn { flex: 1; text-align: center; }
}