:root {
      /* Cake Equity design tokens */
      --color-electric-violet: #4823ff;
      --color-voltage-mid: #7e78ff;
      --color-iris-accent: #6d67fb;
      --color-lilac-wash: #ede9ff;
      --color-periwinkle-border: #d9d2ff;
      --color-chartreuse-receipt: #e7ff6e;
      --color-bone-canvas: #fafaf8;
      --color-paper-white: #ffffff;
      --color-obsidian-ink: #18161a;
      --color-carbon-border: #333333;
      --color-slate-helper: #898b91;
      --color-lavender-gray: #9e99ab;
      --color-midnight-surface: #1e1b22;

      --font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
      --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
      --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

      --radius-cards: 20px;
      --radius-buttons: 100px;
      --radius-small: 12px;
      --radius-tags: 999px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; font-family: var(--font-body); }
    html { background-color: var(--color-bone-canvas); }
    body {
      background-color: var(--color-bone-canvas);
      /* subtle dot-grid texture, echoes a scantron/answer-sheet grid without literally
         drawing one — kept faint so it never competes with content */
      background-image: radial-gradient(var(--color-periwinkle-border) 1px, transparent 1px);
      background-size: 24px 24px;
      color: var(--color-obsidian-ink);
      line-height: 1.6;
      padding: 40px 16px;
    }
    .container { max-width: 900px; margin: 0 auto; }

    header { text-align: center; margin-bottom: 24px; }
    .header-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-mono);
      font-size: 0.72rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-electric-violet);
      background: var(--color-lilac-wash);
      border: 1px solid var(--color-periwinkle-border);
      padding: 5px 12px;
      border-radius: var(--radius-tags);
      margin-bottom: 14px;
    }
    .header-eyebrow .dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--color-electric-violet);
      box-shadow: 0 0 0 3px var(--color-lilac-wash);
    }
    header h1 {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: clamp(1.8rem, 6vw, 2.4rem);
      letter-spacing: -0.032em;
      line-height: 1.1;
    }
    header h1 .accent { color: var(--color-electric-violet); }
    header p { color: var(--color-slate-helper); font-size: 1rem; margin-top: 8px; font-weight: 400; }

    .ad-slot {
      background: var(--color-paper-white);
      border: 1px dashed var(--color-periwinkle-border);
      border-radius: var(--radius-small);
      padding: 15px;
      text-align: center;
      color: var(--color-lavender-gray);
      font-size: 0.8rem;
      margin: 20px 0;
      min-height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .calculator-card {
      background: var(--color-paper-white);
      border-radius: var(--radius-cards);
      border: 1px solid var(--color-periwinkle-border);
      box-shadow: 0 8px 24px -8px rgba(72,35,255,0.12);
      padding: 28px;
      margin-bottom: 30px;
      position: relative;
      overflow: hidden;
    }
    .calculator-card::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--color-electric-violet), var(--color-chartreuse-receipt));
    }

    .form-group { margin-bottom: 20px; }
    label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 0.95rem; color: var(--color-obsidian-ink); }
    select {
      width: 100%;
      padding: 12px 16px;
      border: 1.5px solid var(--color-periwinkle-border);
      border-radius: var(--radius-small);
      font-size: 1rem;
      font-family: var(--font-body);
      font-weight: 500;
      background: var(--color-paper-white);
      color: var(--color-obsidian-ink);
    }
    select:focus-visible { outline: 3px solid var(--color-voltage-mid); outline-offset: 2px; border-color: var(--color-electric-violet); }
    select:focus { outline: none; border-color: var(--color-electric-violet); }

    input[type="range"] {
      width: 100%;
      margin-top: 10px;
      -webkit-appearance: none;
      height: 6px;
      border-radius: var(--radius-tags);
      background: var(--color-lilac-wash);
      padding: 12px 0;
      background-clip: content-box;
    }
    input[type="range"]:focus-visible {
      outline: 3px solid var(--color-voltage-mid);
      outline-offset: 4px;
      border-radius: var(--radius-tags);
    }
    input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 28px; height: 28px;
      border-radius: 50%;
      background: var(--color-electric-violet);
      border: 4px solid var(--color-paper-white);
      box-shadow: 0 2px 8px rgba(72,35,255,0.45);
      cursor: pointer;
    }
    input[type="range"]::-moz-range-thumb {
      width: 28px; height: 28px;
      border-radius: 50%;
      background: var(--color-electric-violet);
      border: 4px solid var(--color-paper-white);
      cursor: pointer;
    }

    .slider-header { display: flex; justify-content: space-between; align-items: center; }
    .slider-value {
      font-weight: 700;
      color: var(--color-electric-violet);
      background: var(--color-lilac-wash);
      padding: 2px 10px;
      border-radius: var(--radius-tags);
      font-size: 0.85rem;
    }

    .result-box {
      background: var(--color-midnight-surface);
      border-radius: var(--radius-cards);
      padding: 28px;
      text-align: center;
      margin-top: 24px;
    }
    .result-box > div:first-child {
      color: var(--color-lavender-gray);
      font-size: 0.8rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-weight: 700;
    }
    .score-badge {
      display: inline-block;
      font-family: var(--font-display);
      font-size: 4rem;
      font-weight: 700;
      color: var(--color-chartreuse-receipt);
      line-height: 1;
      margin: 12px 0;
    }
    .score-description { font-weight: 600; font-size: 1.1rem; color: var(--color-paper-white); }

    .content-section {
      background: var(--color-paper-white);
      border-radius: var(--radius-cards);
      border: 1px solid var(--color-periwinkle-border);
      padding: 32px;
      margin-top: 30px;
    }
    .content-section h2 {
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 1.5rem;
      letter-spacing: -0.02em;
      margin-bottom: 14px;
    }
    .content-section h3 { font-size: 1.1rem; font-weight: 600; margin: 18px 0 8px; }
    .content-section p { margin-bottom: 14px; color: var(--color-carbon-border); }

    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 16px 0; }
    .table-scroll table { margin: 0; min-width: 480px; }

    .faq-item { margin-bottom: 20px; }
    .faq-item strong { display: block; font-size: 1.05rem; color: var(--color-obsidian-ink); margin-bottom: 4px; font-weight: 600; }

    table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 0.9rem; }
    th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--color-lilac-wash); }
    th { background: var(--color-lilac-wash); font-weight: 700; color: var(--color-electric-violet); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; }
    tr:first-child th:first-child { border-top-left-radius: var(--radius-small); }
    tr:first-child th:last-child { border-top-right-radius: var(--radius-small); }

    .provenance-box {
      background: var(--color-lilac-wash);
      border-left: 4px solid var(--color-electric-violet);
      border-radius: var(--radius-small);
      padding: 16px 20px;
      margin-top: 24px;
      font-size: 0.85rem;
      color: var(--color-carbon-border);
    }
    .provenance-box strong { color: var(--color-obsidian-ink); }
    .provenance-box a { color: var(--color-electric-violet); font-weight: 600; }

    .exam-warning {
      background: #fff8e1;
      border: 1.5px solid #e7ff6e;
      border-left: 4px solid var(--color-obsidian-ink);
      border-radius: var(--radius-small);
      padding: 12px 16px;
      margin-bottom: 20px;
      font-size: 0.85rem;
      color: var(--color-obsidian-ink);
    }
    .exam-warning strong { display: block; margin-bottom: 2px; }

    .breadcrumb {
      font-size: 0.85rem;
      color: var(--color-lavender-gray);
      margin-bottom: 12px;
    }
    .breadcrumb a { color: var(--color-electric-violet); text-decoration: none; font-weight: 500; }
    .breadcrumb a:hover { text-decoration: underline; }
    .breadcrumb .sep { margin: 0 6px; color: var(--color-periwinkle-border); }
    .breadcrumb .current { color: var(--color-obsidian-ink); font-weight: 600; }

    footer { text-align: center; padding: 32px 0; color: var(--color-lavender-gray); font-size: 0.85rem; }

    @media (max-width: 480px) {
      body { padding: 24px 12px; }
      .calculator-card, .content-section { padding: 20px; }
      .score-badge { font-size: 3rem; }

      /* Convert the comparison table to stacked label:value cards below 480px
         instead of relying on horizontal scroll, which is easy to miss on mobile. */
      .table-scroll { overflow-x: visible; }
      .table-scroll table, .table-scroll thead, .table-scroll tbody, .table-scroll th, .table-scroll td, .table-scroll tr {
        display: block; min-width: 0;
      }
      .table-scroll thead { display: none; }
      .table-scroll tr {
        border: 1px solid var(--color-lilac-wash);
        border-radius: var(--radius-small);
        padding: 12px;
        margin-bottom: 12px;
      }
      .table-scroll td {
        border: none;
        padding: 6px 0;
        display: flex;
        justify-content: space-between;
        gap: 12px;
      }
      .table-scroll td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--color-electric-violet);
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
      }
    }