:root{
  --primary:#E8590C; --primary-dark:#C94A08; --ink:#16181D; --muted:#6B7280;
  --bg:#F7F8FA; --card:#FFFFFF; --border:#E5E7EB; --radius:12px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-lg:0 8px 24px rgba(16,24,40,.08);
  --success-bg:#E9F7EF; --success-text:#1B7A43; --success-border:#B7E4C7;
  --primary-gradient: linear-gradient(135deg, #f2a65a 0%, #ff7a1a 100%);
}
*{ box-sizing:border-box; margin:0; padding:0; min-width:0; }
body{font-family:'Inter', system-ui, sans-serif; background:var(--bg); color:var(--ink); line-height:1.6;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none; word-break:break-word;}
.container{max-width:1160px; margin:0 auto; padding:0 20px; width:100%;}
@media(max-width:600px){ .container{padding:0 16px;} }
/* ---------- Breadcrumb ---------- */
.breadcrumb-container{padding:16px 0 4px;}
.breadcrumb-list{list-style:none; display:flex; flex-wrap:wrap; gap:6px; font-size:13px; color:var(--muted);}
.breadcrumb-list li{display:flex; align-items:center; gap:6px;}
.breadcrumb-list li:not(:last-child)::after{content:"/"; margin-left:6px; color:var(--border);}
.breadcrumb-list a:hover{color:var(--primary);}

/* ---------- Tool header (hero) ---------- */
.tool-page{padding-bottom:60px;}
.tool-header{text-align:center; padding:8px 0 36px; max-width:820px; margin:0 auto;}
.tool-icon{
  width:64px; height:64px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  font-size:26px; color:#fff; background:linear-gradient(135deg,var(--primary),#FFB84D);
  box-shadow:var(--shadow-lg); margin:0 auto;
}
.tool-header h1{font-family:'Fraunces', serif; font-size:clamp(28px,4.2vw,40px); font-weight:600; margin:18px 0 8px;}
.tool-header h2{font-size:16px; font-weight:500; color:var(--muted); margin-bottom:20px; text-transform:none;}

.alert{
  display:flex; align-items:center; justify-content:center; gap:8px;
  border-radius:10px; padding:12px 18px; font-size:14px; font-weight:600; margin:0 auto 20px; max-width:fit-content;
}
.alert-success{background:var(--success-bg); color:var(--success-text); border:1px solid var(--success-border);}
.alert-info{background:#FFF3E8; color:var(--primary-dark); border:1px solid #FBD9B6; text-align:left; justify-content:flex-start;}

.tool-header > .tool-container p{
  font-size:15px; color:#3A3F47; line-height:1.7; text-align:left; margin-bottom:14px;
}

/* ---------- Generic tool-container wrapper ---------- */
.tool-container{max-width:820px; margin:0 auto 24px;}

/* Intro paragraphs sitting directly under the H1/H2 — give them a card so
   they don't float loosely on the page background. */
.tool-header > .tool-container{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:22px 26px; box-shadow:var(--shadow);
}

/* ---------- Input card (the actual functional tool) ---------- */
.tool-input-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:28px; max-width:820px; margin:0 auto 28px;
}
.input-group{margin-bottom:18px; text-align:left;}
.input-group label{
  display:flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--ink);
  margin-bottom:8px;
}
.input-group input[type="text"], .input-group input[type="email"],.input-group select{
  width:100%; border:1.5px solid var(--border); border-radius:10px; padding:12px 14px;
  font-size:15px; font-family:inherit; background:var(--bg); color:var(--ink); outline:none;
  transition:border-color .15s ease;
}
.input-group input[type="text"]:focus, .input-group select:focus{border-color:var(--primary);}

.btn{font-family:inherit; cursor:pointer; border:none;}
.btn-primary{
  background:var(--primary); color:#fff; font-size:15.5px; font-weight:700;
  padding:14px 20px; border-radius:10px; display:flex; align-items:center; justify-content:center; gap:8px;
  transition:background .15s ease;
}
.btn-primary:hover{background:var(--primary-dark);}
.btn-block{width:100%;}

/* ---------- Result container ---------- */
.result-container{margin-top:24px;margin-bottom:24px;}
.result-container h2{font-size:17px; font-weight:700; margin-bottom:14px; display:flex; align-items:center; gap:8px;}
.details-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-top:14px;}
@media(max-width:640px){ .details-grid{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media(max-width:420px){ .details-grid{grid-template-columns:minmax(0,1fr);} }
.details-card{
  background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:16px; text-align:center;
}
.details-icon{
  width:36px; height:36px; margin:0 auto 8px; border-radius:8px; background:#fff; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; color:var(--primary); font-size:15px;
}
.details-card h4{font-size:12px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.03em; margin-bottom:4px;}
.details-card h5{font-size:15.5px; font-weight:700; color:var(--ink); word-break:break-word;}

/* ---------- Channel Analytics dashboard card ---------- */
.analytics-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:24px; margin-top:14px;
}

/* Channel profile row */
.channel-profile{
  display:flex; align-items:center; gap:16px; padding-bottom:20px; margin-bottom:20px;
  border-bottom:1px solid var(--border); flex-wrap:wrap;
}
.channel-avatar{
  width:64px; height:64px; border-radius:50%; flex-shrink:0; object-fit:cover;
  background:linear-gradient(135deg,var(--ink),#3A3F47); border:2px solid var(--border);
}
.channel-info{flex:1; min-width:200px;}
.channel-name-row{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.channel-name-row h3{font-size:18px; font-weight:800; color:var(--ink);}
.verified-badge{color:#1D9BF0; font-size:15px;}
.channel-meta{
  display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:6px; font-size:13.5px; color:var(--muted);
}
.channel-meta strong{color:var(--ink); font-weight:700;}
.channel-meta .sep{color:var(--border);}
@media(max-width:480px){
  .channel-profile{flex-direction:column; text-align:center; align-items:center;}
  .channel-meta{
    flex-direction:column; align-items:center; gap:6px; margin-top:10px;
  }
  .channel-meta .sep{display:none;}
  .channel-name-row{justify-content:center;}
}

/* Stat cards row (Total Views / Total Videos / Est. Monthly Earning) */
.analytics-stats{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-bottom:24px;
}
@media(max-width:640px){ .analytics-stats{grid-template-columns:minmax(0,1fr);} }
.analytics-stat{
  display:flex; align-items:center; gap:12px; background:var(--bg); border:1px solid var(--border);
  border-radius:10px; padding:16px;
}
.analytics-stat .stat-icon{
  width:40px; height:40px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:16px;
}
.stat-icon.icon-views{background:#2563EB;}
.stat-icon.icon-videos{background:#7C3AED;}
.stat-icon.icon-earnings{background:#16A34A;}
.analytics-stat .stat-label{font-size:11.5px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.03em; display:flex; align-items:center; gap:4px;}
.analytics-stat .stat-value{font-size:18px; font-weight:800; color:var(--ink); line-height:1.3;}
.analytics-stat.earnings .stat-value{color:#16A34A;}
.info-dot{
  width:14px; height:14px; border-radius:50%; background:var(--border); color:var(--muted);
  font-size:9px; display:inline-flex; align-items:center; justify-content:center; cursor:help;
}

/* Earnings chart */
.chart-card{background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:20px;}
.chart-card h4{font-size:14.5px; font-weight:700; margin-bottom:16px; color:var(--ink);}
.chart-wrap{position:relative; width:100%; overflow:visible;}
.chart-svg{width:100%; height:auto; display:block; overflow:visible;}
.chart-tooltip{
  position:absolute; background:#fff; border:1px solid var(--border); border-radius:8px;
  padding:8px 12px; font-size:12px; box-shadow:var(--shadow-lg); pointer-events:none; text-align:center;
  transform:translate(-50%, -115%); white-space:nowrap;
}
.chart-tooltip strong{color:#16A34A; font-size:13px; display:block;}
.chart-tooltip span{color:var(--muted); font-size:11px;}
/* Fallback shown when the API returns no thumbnail, or the real image URL
   fails to load (common with YouTube's avatar CDN blocking hotlinked
   requests) — a simple initials circle instead of a blank/broken image */
.channel-avatar-fallback{
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:24px; font-weight:700;
}
.channel-info{flex:1; min-width:200px;}
.channel-name-row{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.channel-name-row h3{font-size:18px; font-weight:800; color:var(--ink);}
.verified-badge{color:#1D9BF0; font-size:15px;}
.channel-meta{display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:6px; font-size:13.5px; color:var(--muted);}
.channel-meta strong{color:var(--ink); font-weight:700;}
.channel-meta .sep{color:var(--border);}

.analytics-stats{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; margin-bottom:24px;}
@media(max-width:640px){ .analytics-stats{grid-template-columns:minmax(0,1fr);} }
.analytics-stat{
  display:flex; align-items:center; gap:12px; background:var(--bg); border:1px solid var(--border);
  border-radius:10px; padding:16px;
}
.analytics-stat .stat-icon{
  width:40px; height:40px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:16px;
}
.stat-icon.icon-views{background:#2563EB;}
.stat-icon.icon-videos{background:#7C3AED;}
.stat-icon.icon-earnings{background:#16A34A;}
.analytics-stat .stat-label{font-size:11.5px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.03em; display:flex; align-items:center; gap:4px;}
.analytics-stat .stat-value{font-size:18px; font-weight:800; color:var(--ink); line-height:1.3;}
.analytics-stat.earnings .stat-value{color:#16A34A;}
.info-dot{
  width:14px; height:14px; border-radius:50%; background:var(--border); color:var(--muted);
  font-size:9px; display:inline-flex; align-items:center; justify-content:center; cursor:help;
}

/* ---- Remaining criteria to monetize (Not Eligible Yet branch) ---- */
.criteria-card{
  margin-top:20px; padding-top:20px; border-top:1px solid var(--border);
}
.criteria-card h4{
  font-size:14.5px; font-weight:700; margin-bottom:16px; display:flex; align-items:center; gap:8px; color:var(--ink);
}
.criteria-item{
  display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--border);
}
.criteria-item:last-child{border-bottom:none;}
.criteria-icon{
  width:28px; height:28px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:14px; background:var(--bg); color:var(--muted);
}
.criteria-item.criteria-met .criteria-icon{background:var(--success-bg); color:var(--success-text);}
.criteria-item:not(.criteria-met):not(.criteria-unknown) .criteria-icon{background:#FFF3E8; color:var(--primary-dark);}
.criteria-body{flex:1; min-width:0;}
.criteria-title{font-size:14px; font-weight:700; color:var(--ink); margin-bottom:4px;}
.criteria-or{font-weight:400; color:var(--muted); text-transform:lowercase; margin:0 2px;}
.criteria-note{font-size:13px; color:var(--muted); line-height:1.6;}
.criteria-bar{
  margin-top:8px; height:6px; border-radius:3px; background:var(--border); overflow:hidden; max-width:260px;
}
.criteria-bar-fill{height:100%; background:var(--primary); border-radius:3px; transition:width .3s ease;}
@media(max-width:640px){
  .analytics-stat{flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px; padding:20px 16px;}
  .analytics-stat .stat-icon{margin:0 auto;}
  .analytics-stat > div:last-child{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; width:100%;}
  .analytics-stat .stat-label{justify-content:center; text-align:center; margin-bottom:6px;}
  .analytics-stat .stat-value{text-align:center;}
}


/* ---------- Instructions / content blocks ---------- */
.instructions{
  max-width:820px; margin:0 auto 24px; text-align:left;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius);
  padding:26px 28px; box-shadow:var(--shadow);
}
.instructions h2{
  font-family:'Fraunces', serif; font-size:22px; font-weight:600; margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
}
@media(max-width:640px){
  .result-container h2, .features-section h2.text-center, .related-tools h2{
    flex-direction:column; text-align:center; gap:8px;
  }
  .result-container h2 i{ font-size:22px; }
}
.instructions p{font-size:15px; color:#3A3F47; line-height:1.75; margin-bottom:14px;text-align: justify;}
.instructions ol, .instructions ul{margin:0 0 14px 20px;}
.instructions li{font-size:15px; color:#3A3F47; line-height:1.75; margin-bottom:10px;}
.instructions figure{margin:14px 0 22px; border-radius:10px; overflow:hidden; border:1px solid var(--border);}
.alink{color:var(--primary); font-weight:600; border-bottom:1px solid currentColor;}
.alink:hover{color:var(--primary-dark);}

/* ---------- Steps list (visual upgrade for numbered instructions) ---------- */
.step-list{list-style:none; margin:0 !important; display:flex; flex-direction:column; gap:12px;}
.step-item{
  display:flex; gap:14px; background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:16px 18px !important;
}
.step-num{
  width:30px; height:30px; border-radius:50%; background:var(--ink); color:#fff; font-size:13px; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}

/* ---------- Data table ---------- */
.rpm-table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:16px 0; border:1px solid var(--border); border-radius:10px;}
.rpm-table{width:100%; border-collapse:collapse; font-size:14px; min-width:560px;}
.rpm-table thead{background:var(--ink); color:#fff;}
.rpm-table th{padding:12px 16px; text-align:left; font-weight:600; font-size:13px;}
.rpm-table td{padding:12px 16px; border-top:1px solid var(--border);}
.rpm-table tbody tr:nth-child(even){background:var(--bg);}
.rpm-table td.profit-high{color:var(--success-text); font-weight:700;}

/* ---------- Features grid ---------- */
.features-section{padding:24px 0 40px;}
.features-section h2.text-center{
  font-family:'Fraunces', serif; font-size:26px; font-weight:600; text-align:center; margin-bottom:26px;
}
.features-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; max-width:1000px; margin:0 auto;}
@media(max-width:800px){ .features-grid{grid-template-columns:minmax(0,1fr);} }
.feature-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:24px; text-align:left;
}
.feature-icon{
  width:44px; height:44px; border-radius:10px; background:linear-gradient(135deg,var(--primary),#FFB84D);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; margin-bottom:14px;
}
.feature-card h3{font-size:15.5px; font-weight:700; margin-bottom:8px;}
.feature-card p{font-size:14px; color:var(--muted); line-height:1.6;}

/* ---------- Related tools ---------- */
.related-tools{padding:8px 0 44px;}
.related-tools h2{
  font-family:'Fraunces', serif; font-size:22px; font-weight:600; text-align:center; margin-bottom:22px;
}
.related-grid{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:14px; max-width:1100px; margin:0 auto;}
@media(max-width:900px){ .related-grid{grid-template-columns:repeat(3, minmax(0,1fr));} }
@media(max-width:560px){ .related-grid{grid-template-columns:repeat(2, minmax(0,1fr));} }
.related-card{
  background:#fff; border:1px solid var(--border); border-radius:10px; padding:18px 14px; text-align:center;
  transition:transform .15s ease, box-shadow .15s ease;
}
.related-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg);}
.related-card .tile-icon{
  width:38px; height:38px; margin:0 auto 10px; border-radius:9px; background:linear-gradient(135deg,var(--primary),#FFB84D);
  color:#fff; display:flex; align-items:center; justify-content:center; font-size:15px;
}
.related-card span{font-size:13px; font-weight:600;}

/* ---------- Footer (shared) ---------- */
footer.footer{background:var(--ink); color:#D1D5DB; padding:52px 0 24px;}
.footer-content{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; padding-bottom:36px; border-bottom:1px solid #2B2F36;}
@media(max-width:800px){ .footer-content{grid-template-columns:1fr 1fr;} }
.footer-section h2{color:#fff; font-size:20px; font-weight:800; margin-bottom:12px;}
.footer-section p{font-size:13.5px; line-height:1.6; color:#9CA3AF; max-width:280px;}
.footer-section h4{font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:#9CA3AF; margin-bottom:14px; display:flex; align-items:center; gap:8px;}
.footer-section ul{list-style:none;}
.footer-section li{margin-bottom:9px; font-size:14px;}
.footer-section a:hover{color:#fff;}
.social-links{display:flex; gap:12px; margin-top:14px;}
.social-links a{width:34px; height:34px; border-radius:8px; background:#22262D; display:flex; align-items:center; justify-content:center;color:white;}
.social-links a:hover{background:var(--primary);}
.footer-bottom{padding-top:16px; font-size:13px; color:#7C828B; text-align:center;}
/* ===========================================================
   MOBILE FIXES ONLY (<=640px)
   1. Step cards layout
   2. Breadcrumb wrapping
   3. Chart tooltip positioning
=========================================================== */

@media (max-width:640px){
  /* ==========================================
       ANALYSIS STATS
    ========================================== */


 .analytics-stat{
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
        gap:12px;
        padding:20px 16px;
    }

    .analytics-stat .stat-icon{
        margin:0 auto;
    }

    .analytics-stat > div:last-child{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
        width:100%;
    }

    .analytics-stat .stat-label{
        justify-content:center;
        text-align:center;
        margin-bottom:6px;
    }

    .analytics-stat .stat-value{
        text-align:center;
    }


    /* ==========================================
       STEP CARDS
    ========================================== */

    .step-item{
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:14px;
    }

    .step-num{
        margin:0 auto;
    }

    .step-item span:last-child{
        display:block;
    }


    /* ==========================================
       BREADCRUMB
    ========================================== */

.breadcrumb-container{
        max-width:100%;
        padding:14px 0 8px;
    }

    .breadcrumb-list{
        display:inline;
        line-height:1.9;
        font-size:15px;
    }

    .breadcrumb-list li{
        display:inline;
        white-space:normal;
    }

    .breadcrumb-list li::after{
        display:inline;
    }

    .breadcrumb-list li:last-child::after{
        display:none;
    }
    /* ==========================================
       CHART TOOLTIP
    ========================================== */

      .chart-card{
        padding-bottom:90px;
    }

    .chart-tooltip{
        left:50% !important;
        transform:translateX(-50%) !important;
        top:auto !important;
        bottom:-70px;
        width:220px;
        max-width:calc(100% - 5px);
    }


}
:root{
  --text-secondary:var(--muted); /* alias so the markup's inline var(--text-secondary) resolves correctly */
}

.result-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin-top:14px;
}
@media(max-width:720px){ .result-grid{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media(max-width:460px){ .result-grid{grid-template-columns:minmax(0,1fr);} }

.thumbnail-item{
  background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:14px;
  display:flex; flex-direction:column; transition:transform .15s ease, box-shadow .15s ease;
}
.thumbnail-item:hover{transform:translateY(-2px); box-shadow:var(--shadow-lg); background:#fff;}

.thumbnail-item img{
  width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:8px; border:1px solid var(--border);
  background:#fff; margin-bottom:10px;
}

.thumbnail-item p{margin:0 0 2px; font-size:14px; color:var(--ink); line-height:1.4;}
.thumbnail-item p strong{font-weight:700;}
.thumbnail-item p:nth-of-type(2){margin-bottom:10px;}
/* ---------- Textarea (matches the existing input/select styling) ---------- */
textarea{
  width:100%; border:1.5px solid var(--border); border-radius:10px; padding:12px 14px;
  font-size:15px; font-family:inherit; background:var(--bg); color:var(--ink); outline:none;
  resize:vertical; min-height:100px; line-height:1.5;
  transition:border-color .15s ease;
}
textarea:focus{border-color:var(--primary);}
textarea::placeholder{color:var(--muted);}

@media(max-width:480px){
  textarea{font-size:14px; padding:10px 12px;}
}
.hidden{ display:none !important; }
.i1{
  margin-top: 10px;
}

.tools-result-row{
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 10px;
    border-left: 4px solid var(--primary-color);
    border: 1px solid var(--border);
}
.cp-btn{
    background-color: #e8590c;
    padding: 5px;
    border-radius: 5px;
    color: white;
}
img{
  border-radius: 10px;
}
.alert-success {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background-color: #e8f5e9;
  border: 1px solid #b8dfc0;
  border-radius: 10px;
  padding: 14px 18px;
  color: #1e5631;
  font-size: 14px;
  line-height: 1.6;
}

.alert-success i {
  font-size: 18px;
  color: #2e7d32;
  margin-top: 3px;      /* nudges icon to align with first line of text, not the whole block */
  flex-shrink: 0;        /* prevents icon from shrinking/wrapping oddly */
}

.alert-success strong {
  margin-right: 4px;
}
@media (max-width: 768px) {
  .tool-input-card,
  .instructions {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
  }

  .instructions h2 {
    flex-direction: row;
    align-items: center;
    font-size: 1.25rem;
    line-height: 1.3;
    text-align: left;
    gap: 8px;
  }

  .instructions h2 i {
    font-size: 18px;
    flex-shrink: 0;
  }

  .instructions h3 {
    font-size: 1.1rem;
    text-align: left;
  }

  .instructions p,
  .instructions li {
    text-align: left;
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .tool-input-card {
    padding: 1rem;
  }

  /* Fix step images: give them proper spacing whether nested or sibling */
  .instructions ol li,
  .instructions ul li {
    margin-bottom: 14px;
  }

  .instructions img {
    display: block;
    width: 100%;
    margin: 10px 0 18px;
    border-radius: 10px;
  }
}