/* ================= overlay / tutorial ================= */
  .overlay{
    position:fixed;
    inset:0;
    background:
      radial-gradient(80% 35% at 100% 0%, rgba(2,238,97,0.055), transparent 65%),
      #F8FBF9;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:56px 18px 26px;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
    z-index:50;
    overflow-y:auto;
  }
  .overlay.show{
    opacity:1;
    pointer-events:auto;
  }

  .curve-arrow{
    position:absolute;
    pointer-events:none;
    overflow:visible;
  }
  .curve-arrow path{
    fill:none;
    stroke:var(--green);
    stroke-width:5;
    stroke-linecap:round;
    filter:drop-shadow(0 0 6px rgba(2,238,97,0.6));
  }
  .curve-arrow polygon{
    fill:var(--green);
    filter:drop-shadow(0 0 6px rgba(2,238,97,0.6));
  }

  /* Tutorial: a ponta da primeira seta mantém o alvo e a posição originais. */
  .step{
    width:100%;
    max-width:400px;
    display:flex;
    align-items:center;
    gap:14px;
    margin:10px 0;
    position:relative;
  }
  .step-num{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 38px;
    height:38px;
    border-radius:50%;
    background:#DDFBE8;
    color:#08783A;
    font-size:20px;
    font-weight:700;
    line-height:1;
  }
  .step-pill{
    flex:1;
    min-width:0;
    background:var(--white);
    color:var(--black);
    border-radius:20px;
    padding:20px;
    font-size:21px;
    font-weight:600;
    line-height:1.3;
    letter-spacing:-0.025em;
    border:1px solid #E1E9E5;
    box-shadow:0 4px 16px rgba(12,40,24,0.035);
  }
  .step-pill .hl{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    vertical-align:middle;
    width:34px;
    height:26px;
    border-radius:8px;
    background:#EAF9EF;
    color:#08783A;
    font-size:24px;
    font-weight:700;
    line-height:1;
    letter-spacing:0;
  }
  .step-detail{
    display:block;
    margin-top:7px;
    font-size:15px;
    line-height:1.45;
    font-weight:400;
    letter-spacing:0;
    color:#5F6E66;
  }
  .step-pill .hl-line{
    display:block;
    margin-top:5px;
    color:#08783A;
    font-size:22px;
    font-weight:700;
    letter-spacing:-0.035em;
  }

  .step1-wrap{ position:relative; width:100%; max-width:400px; }

  .step-pill.attention{
    animation:pill-attention 0.55s ease-in-out 3;
  }
  @keyframes pill-attention{
    0%, 100%{
      border-color:#E1E9E5;
      box-shadow:0 4px 16px rgba(12,40,24,0.035);
      background:var(--white);
    }
    50%{
      border-color:var(--attention);
      box-shadow:0 0 0 5px rgba(255,90,31,0.25);
      background:var(--attention-soft);
    }
  }
  .step-num.attention{
    animation:num-attention 0.55s ease-in-out 3;
  }
  @keyframes num-attention{
    0%, 100%{ transform:scale(1); }
    50%{ transform:scale(1.12); background:var(--attention-soft); color:#B7370A; }
  }
  .arrow-to-corner{
    width:78px;
    height:60px;
    top:-38px;
    right:6px;
    filter:drop-shadow(0 2px 2px rgba(0,184,75,0.16));
  }
  .arrow-to-corner path{
    stroke:#00C853;
    stroke-width:6;
    filter:none;
  }
  .arrow-to-corner polygon{
    fill:#00C853;
    filter:none;
  }

  .step2-wrap{ position:relative; width:100%; max-width:400px; margin-top:10px; }
  .arrow-to-menu{
    width:72px;
    height:190px;
    right:14px;
    bottom:73px;
  }
  .arrow-to-menu path{ filter:none; stroke-width:4; }
  .arrow-to-menu polygon{ filter:none; }

  .menu-card{
    width:100%;
    max-width:400px;
    background:var(--white);
    border-radius:22px;
    margin-top:28px;
    overflow:hidden;
    border:1px solid #DAE5DE;
    box-shadow:0 14px 36px -16px rgba(12,40,24,0.16);
    cursor:default;
  }
  .menu-caption{
    margin:0;
    padding:13px 20px;
    border-bottom:1px solid #EDF1EE;
    color:#6C7971;
    font-size:12px;
    line-height:1.4;
    font-weight:500;
  }
  .menu-row{
    display:flex;
    align-items:center;
    gap:14px;
    min-height:57px;
    padding:17px 20px;
    color:#78827C;
    font-size:15px;
    font-weight:400;
    border-bottom:1px solid #EDF1EE;
  }
  .menu-row:last-child{ border-bottom:none; }
  .menu-row svg{ flex:0 0 auto; width:20px; height:20px; }
  .menu-row.highlight{
    min-height:64px;
    background:#DDFBE8;
    color:#075C2D;
    font-size:17px;
    font-weight:700;
    box-shadow:inset 4px 0 0 var(--green);
    position:relative;
  }
  .menu-row.highlight svg{ color:#08783A; }
  .tutorial-footer{
    width:100%;
    max-width:400px;
    margin:32px 0 0;
    text-align:center;
  }
  .tutorial-footer p{
    margin:0 0 20px;
    padding:0 20px;
    color:#5F6E66;
    font-size:14px;
    line-height:1.5;
  }
  .tutorial-footer img{ width:90px; height:auto; opacity:0.7; }

  @media (max-width:360px){
    .step-pill{ padding:18px 16px; font-size:20px; }
    .step-pill .hl-line{ font-size:20px; }
    .menu-row.highlight{ font-size:16px; }
  }
  @media (prefers-reduced-motion: reduce){
    .cursor, .step-pill.attention, .step-num.attention{ animation:none; }
    .overlay{ transition:none; }
    .step-pill.attention{ border-color:var(--attention); background:var(--attention-soft); }
  }