/* 1) GLOBAL BOX-SIZING: makes padding/borders stay inside each element’s width */
	*, *::before, *::after {
	  box-sizing: border-box;
	}

	/* 2) FORCE WHITE BACKGROUND (OVERRIDE DARK-MODE) */
	html, body {
	  background-color: #f6f7f8 !important;
	  font-family: Arial, sans-serif;
	  color: #1a202c;
	  margin: 0;
	  padding: 0;
	}

	/* 3) CONTAINER: fluid & shrinkable, never overflow */
	.container {
	  max-width: 800px;
	  width: 100%;               /* ALLOWS SHRINKING BELOW 800px */
	  margin: 2rem auto;
	  background: #ffffff;       /* ENSURE WHITE ON ALL DEVICES */
	  padding: 2rem;
	  border-radius: 8px;
	  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}
	
	/* ────────────────── */
	/* SCAM ALERT BANNER  */
	/* ────────────────── */
	#scam-banner {
	  position: relative;
	  display: flex;
	  align-items: flex-start;
	  gap: 0.5rem;
	  background-color: #EAF2FF;  
	  border-bottom: 1px solid #CFDAFF;
	  padding: 0.75em 2.5em 0.75em 1em;    /* leave room on right for “×” */
	  font-size: 0.9rem;
	  line-height: 1.4;
	  color: #000000;
	}

	#scam-banner .scam-content {
	  display: flex;
	  align-items: flex-start;
	  gap: 0.5rem;
	  flex: 1;                             /* let text wrap as needed */
	  color: #000000;
	}

	#scam-banner .scam-icon {
	  font-size: 1.2rem;                   /* slightly larger */
	  line-height: 1;                      /* no extra space */
	  color: #000000;                      
	  flex-shrink: 0;                      /* don’t let icon shrink */
	}

	#scam-banner p {
	  margin: 0;                           /* remove default margins */
	  color: #000000;
	  word-wrap: break-word;
	}

	#scam-banner a {
	  color: #2a6ebb;
	  text-decoration: underline;
	}

	#scam-banner button#scam-close {
	  position: absolute;
	  top: 0.5em;
	  right: 0.75em;
	  background: transparent;
	  border: none;
	  font-size: 1.2rem;
	  line-height: 1;
	  color: #000000;
	  cursor: pointer;
	}

	@media (max-width: 600px) {
	  #scam-banner {
		flex-direction: column;
		padding: 0.75em 1em;
	  }
	  #scam-banner .scam-content {
		gap: 0.25rem;
	  }
	  #scam-banner button#scam-close {
		top: 0.25em;
		right: 0.5em;
	  }
	}

	/* 4) RESPONSIVE ADJUSTMENTS FOR SMALL SCREENS */
	@media (max-width: 600px) {
	  .container {
		padding: 1rem;
		margin: 0.5rem;
		border-radius: 6px;
	  }
	  .button-group {
		flex-direction: column;   /* STACK BUTTONS VERTICALLY */
	  }
	  .button-group button {
		width: 100%;
		margin-bottom: 0.5rem;
	  }
	  .button-group button:last-child {
		margin-bottom: 0;
	  }
	  input[type="number"],
	  select {
		width: 100%;
		box-sizing: border-box;
	  }
	}

	/* 5) HEADINGS AND PARAGRAPH STYLING */
	h1 {
	  text-align: center;
	  margin-bottom: 1rem;
	  color: #1a202c;
	}
	p, .note {
	  color: #69738e;
	  font-size: 1rem;
	  line-height: 1.6;
	  margin-top: 1rem;
	}

	/* 6) WRAP LONG TEXT / URLs TO PREVENT OVERFLOW */
	p, label, .computation-note, .note, .result-label {
	  word-wrap: break-word;    /* LET LONG URLS BREAK */
	  white-space: normal;      /* NO FORCED SINGLE-LINE */
	  margin: 0.5em 0;          /* CONSISTENT VERTICAL SPACING */
	}

	/* 7) SMALLER “COMPUTATION NOTE” */
	.computation-note {
	  color: #69738e;
	  font-size: 0.85rem;
	  margin: 0.25rem 0;
	  line-height: 1.4;
	}

	/* 8) LABELS FOR STEPS */
	label {
	  display: block;
	  margin-top: 1.5rem;
	  font-weight: bold;
	  color: #1a202c;
	}

	/* 9) INPUT & SELECT FIELDS */
	input[type="number"], select {
	  width: 100%;
	  padding: 0.5em;
	  margin-top: 0.2em;
	  box-sizing: border-box;   /* ENSURE PADDING DOESN’T PUSH BEYOND CONTAINER */
	  font-size: 1rem;
	  color: #1a202c;
	}

	/* 10) LOGO AT TOP */
	#logo {
	  text-align: center;
	  margin-bottom: 1rem;
	}
	#logo img {
	  max-height: 100px;
	}

	/* 11) RADIO CONTAINER (unchanged except ensuring no min-width) */
	.radio-box {
	  border: 1px solid #ccc;
	  padding: 0.5em;
	  border-radius: 4px;
	  margin-top: 0.5em;
	  display: flex;
	  flex-direction: column;
	  gap: 0.5em;
	  width: 100%;             /* MAKE SURE IT SHRINKS ON MOBILE */
	  max-width: 100%;
	  background: #fafafa;
	}
	.radio-box label {
	  display: flex;
	  align-items: center;
	  gap: 0.5rem;
	  font-weight: normal;
	  color: #1a202c;
	  margin: 0;               /* NO EXTRA MARGIN INSIDE */
	}
	input[type="radio"] {
	  margin: 0;
	  accent-color: #412675;
	}

	/* 12) BUTTON GROUP & BUTTON STYLES */
	.button-group {
	  display: flex;
	  gap: 10px;
	  justify-content: center;
	  margin-top: 2rem;
	}
	#calculate-btn {
	  flex: 1;
	  padding: 10px;
	  font-size: 14px;
	  background-color: #412675;
	  color: #ffffff;
	  border: none;
	  border-radius: 4px;
	  cursor: pointer;
	}
	#calculate-btn:hover {
	  background-color: #5a35a5;
	}
	#restart-btn {
	  flex: 1;
	  padding: 10px;
	  font-size: 14px;
	  background-color: #666;   /* ENSURE #666 FOR RESTART */
	  color: #fff;
	  border: none;
	  border-radius: 4px;
	  cursor: pointer;
	}
	#restart-btn:hover {
	  background-color: #444;
	}

	/* 13) RESULT BOX */
	.result-box {
	  display: none;
	  margin-top: 2rem;
	  background: #412675;
	  padding: 1.5em;
	  border-radius: 6px;
	  color: #ffffff;
	  box-shadow: 0 0 10px rgba(0,0,0,0.2);
	}
	.result-box h3 {
	  margin: 0 0 0.5em;
	}
	.result-box strong {
	  display: block;
	  font-size: 1.5em;
	  margin: 0.5em 0;
	}
	.result-box div, 
	.result-box p {
	  margin: 0.5em 0;
	}
	.result-box p.disclaimer {
	  font-size: 0.9em;
	  margin-top: 1em;
	  color: #f1f1f1;
	}

	/* 14) SHRINK “LABEL TEXT” INSIDE RESULT BOX */
	.result-box .result-label {
	  font-size: 0.9em;       
	  line-height: 1.4;       
	  margin-bottom: 0.5em;   
	}

	/* ──────────────────────────────────────────────────────────────────────── */
	/* END OF CSS BLOCK                                                        */
	/* ──────────────────────────────────────────────────────────────────────── */