:root{
    --ink-950:#0e131b;
    --ink-900:#141b26;
    --ink-800:#1b2432;
    --panel:#f3f1ec;
    --panel-2:#e9e6de;
    --paper:#fbfaf7;
    --line:#d8d4c8;
    --line-dark:#2a3341;
    --text:#161a1f;
    --text-dim:#5c6470;
    --text-inv:#f3f1ec;
    --text-inv-dim:#9aa4b2;
    --pass:#1f7a54;
    --pass-bg:#e2f1e8;
    --fail:#b5391f;
    --fail-bg:#f7e5df;
    --amber:#a8631a;
    --focus:#2456d6;
    --radius:10px;
    --mono: 'IBM Plex Mono', monospace;
    --display: 'Space Grotesk', sans-serif;
    --body: 'Inter', system-ui, sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--ink-950);
    color:var(--text);
    font-family:var(--body);
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;}
  button{font-family:var(--body);}
  :focus-visible{outline:2px solid var(--focus); outline-offset:2px;}

  .app{max-width:1180px;margin:0 auto;padding:28px 20px 80px;}

  /* HEADER */
  header.top{
    display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
    padding:6px 4px 28px; border-bottom:1px solid var(--line-dark); margin-bottom:28px;
    flex-wrap:wrap;
  }
  .brand{color:var(--text-inv);}
  .brand .mark{
    font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
    color:#8fa6c9; margin-bottom:8px; display:flex; align-items:center; gap:8px;
  }
  .brand .mark::before{content:"";width:7px;height:7px;background:var(--pass);border-radius:1px;display:inline-block;}
  .brand h1{
    font-family:var(--display); font-size:clamp(28px,4vw,40px); font-weight:600; margin:0;
    letter-spacing:-0.01em; line-height:1.05;
  }
  .brand p{color:var(--text-inv-dim); font-size:14.5px; max-width:46ch; margin:10px 0 0; line-height:1.5;}
  .header-stat{
    font-family:var(--mono); color:var(--text-inv-dim); font-size:12px; text-align:right; line-height:1.7;
  }
  .header-stat b{color:var(--text-inv); font-weight:600;}

  /* TABS */
  .tabs{display:flex; gap:6px; margin-bottom:22px;}
  .tab{
    font-family:var(--mono); font-size:12.5px; letter-spacing:.04em; text-transform:uppercase;
    padding:10px 18px; background:transparent; border:1px solid var(--line-dark); color:var(--text-inv-dim);
    cursor:pointer; border-radius:999px; transition:all .15s ease;
  }
  .tab[aria-selected="true"]{background:var(--panel); color:var(--text); border-color:var(--panel);}
  .tab:hover:not([aria-selected="true"]){border-color:#4a5568; color:var(--text-inv);}

  .panel{display:none;}
  .panel.active{display:block; animation:rise .28s ease;}
  @keyframes rise{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

  .card{
    background:var(--panel); border-radius:var(--radius); padding:24px;
  }
  .grid2{display:grid; grid-template-columns:380px 1fr; gap:18px; align-items:start;}
  @media (max-width:880px){.grid2{grid-template-columns:1fr;}}

  /* CONTROLS */
  .field{margin-bottom:16px;}
  .field label{
    display:block; font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em;
    color:var(--text-dim); margin-bottom:7px;
  }
  .color-row{display:flex; gap:8px; align-items:center;}
  .color-row input[type="color"]{
    width:42px; height:38px; border:1px solid var(--line); border-radius:8px; padding:2px; background:var(--paper); cursor:pointer;
  }
  .color-row input[type="text"]{
    flex:1; font-family:var(--mono); font-size:14px; padding:9px 10px; border:1px solid var(--line);
    border-radius:8px; background:var(--paper); color:var(--text);
  }
  select{
    width:100%; font-family:var(--body); font-size:13.5px; padding:9px 10px; border:1px solid var(--line);
    border-radius:8px; background:var(--paper); color:var(--text); cursor:pointer;
  }
  .swap-btn{
    display:flex; align-items:center; justify-content:center; gap:6px; width:100%;
    font-family:var(--mono); font-size:11.5px; letter-spacing:.05em; text-transform:uppercase;
    padding:8px; margin:2px 0 14px; border:1px dashed var(--line); border-radius:8px; background:transparent;
    color:var(--text-dim); cursor:pointer;
  }
  .swap-btn:hover{border-color:var(--text-dim); color:var(--text);}

  .seg{display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden;}
  .seg button{
    flex:1; padding:9px 6px; font-size:12.5px; background:var(--paper); border:none; color:var(--text-dim); cursor:pointer;
    border-right:1px solid var(--line);
  }
  .seg button:last-child{border-right:none;}
  .seg button.active{background:var(--ink-900); color:var(--text-inv);}

  .ratio-readout{
    display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-radius:8px;
    background:var(--paper); border:1px solid var(--line); margin:16px 0;
  }
  .ratio-readout .num{font-family:var(--mono); font-size:26px; font-weight:600;}
  .chip{
    font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
    padding:4px 9px; border-radius:999px; font-weight:600;
  }
  .chip.pass{background:var(--pass-bg); color:var(--pass);}
  .chip.fail{background:var(--fail-bg); color:var(--fail);}

  .fix-btn{
    width:100%; padding:13px; font-family:var(--display); font-weight:600; font-size:15px;
    background:var(--ink-900); color:var(--text-inv); border:none; border-radius:8px; cursor:pointer;
    transition:transform .1s ease;
  }
  .fix-btn:hover{transform:translateY(-1px);}
  .fix-btn:active{transform:translateY(0);}
  .fix-btn:disabled{opacity:.5; cursor:not-allowed;}

  /* RESULTS COLUMN */
  .result-card{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:16px;}
  .result-card h3{
    font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.09em; color:var(--text-dim);
    margin:0 0 14px;
  }
  .swatch-pair{display:flex; gap:14px;}
  .swatch{flex:1; border-radius:8px; overflow:hidden; border:1px solid var(--line);}
  .swatch .chip-color{height:56px; display:flex; align-items:center; justify-content:center;}
  .swatch .meta{padding:9px 10px; background:var(--panel); font-family:var(--mono); font-size:11.5px; display:flex; justify-content:space-between;}
  .swatch .meta b{font-weight:600;}
  .arrow-between{display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:18px;padding:0 2px;}

  .delta-stats{display:flex; gap:16px; margin-top:14px; flex-wrap:wrap;}
  .delta-stats div{font-family:var(--mono); font-size:11.5px; color:var(--text-dim);}
  .delta-stats b{color:var(--text); font-size:14px; display:block; margin-top:2px;}

  /* MOCKUP PREVIEW */
  .mock-wrap{display:flex; gap:14px;}
  .mock{flex:1; border-radius:8px; padding:22px 20px; border:1px solid var(--line);}
  .mock .mock-label{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; opacity:.6; margin-bottom:12px;}
  .mock h4{font-family:var(--display); margin:0 0 8px; font-size:19px;}
  .mock p{margin:0 0 16px; font-size:13.5px; line-height:1.55;}
  .mock button{
    font-family:var(--body); font-weight:600; font-size:13px; padding:9px 16px; border-radius:6px; border:none; cursor:pointer;
  }

  /* RAMP VISUALIZATION */
  .ramp-wrap svg{width:100%; height:auto; display:block;}
  .ramp-legend{display:flex; gap:18px; margin-top:10px; font-family:var(--mono); font-size:11px; color:var(--text-dim); flex-wrap:wrap;}
  .ramp-legend span{display:inline-flex; align-items:center; gap:6px;}
  .dot{width:9px;height:9px;border-radius:50%;display:inline-block;}

  .apca-toggle{
    display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11.5px; color:var(--text-dim);
    margin-top:6px; cursor:pointer; user-select:none;
  }
  .apca-row{display:flex; gap:20px; margin-top:10px; font-family:var(--mono); font-size:12.5px;}
  .apca-row div b{display:block; font-size:16px; margin-top:2px;}

  .hint{font-size:12px; color:var(--text-dim); line-height:1.5; margin-top:6px;}

  /* PALETTE TAB */
  textarea{
    width:100%; min-height:150px; font-family:var(--mono); font-size:13px; padding:12px; border:1px solid var(--line);
    border-radius:8px; background:var(--paper); color:var(--text); resize:vertical; line-height:1.6;
  }
  .row-flex{display:flex; gap:12px; align-items:end; flex-wrap:wrap; margin-top:14px;}
  .row-flex .field{margin-bottom:0; flex:0 0 220px;}
  .btn-secondary{
    padding:10px 18px; font-family:var(--display); font-weight:600; font-size:14px; background:var(--ink-900);
    color:var(--text-inv); border:none; border-radius:8px; cursor:pointer; height:39px;
  }
  .btn-ghost{
    padding:10px 16px; font-family:var(--mono); font-size:12px; background:transparent; border:1px solid var(--line);
    border-radius:8px; cursor:pointer; color:var(--text-dim);
  }

  table.matrix{border-collapse:collapse; width:100%; margin-top:22px; font-family:var(--mono); font-size:12.5px;}
  table.matrix th, table.matrix td{border:1px solid var(--line); padding:9px 10px; text-align:center; vertical-align:middle;}
  table.matrix th{background:var(--panel-2); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.04em;}
  table.matrix th.corner{background:var(--panel);}
  table.matrix td.diag{background:var(--panel);}
  .swpair{display:flex; align-items:center; gap:6px; justify-content:center;}
  .sw{width:14px;height:14px;border-radius:3px;border:1px solid rgba(0,0,0,.15);}
  td.cell{cursor:default;}
  td.cell .ratio-val{font-weight:600;}
  td.cell.fail .ratio-val{color:var(--fail);}
  td.cell.pass .ratio-val{color:var(--pass);}
  .fix-mini{
    display:block; margin-top:4px; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em;
    color:var(--focus); background:none; border:none; cursor:pointer; padding:2px 0; font-family:var(--mono);
  }
  .empty-note{color:var(--text-dim); font-size:13px; margin-top:18px; line-height:1.6;}
  code{font-family:var(--mono); background:var(--panel-2); padding:1px 5px; border-radius:4px; font-size:12px;}

  footer{margin-top:44px; text-align:center; color:#5b6472; font-family:var(--mono); font-size:11px;}

/* ABOUT / SEO COPY */
.about-copy{
  max-width:68ch; margin:48px auto 0; padding:0 4px;
}
.about-copy h2{
  font-family:var(--display); color:var(--text-inv); font-size:19px; font-weight:600;
  margin:28px 0 10px;
}
.about-copy h2:first-child{margin-top:0;}
.about-copy p{
  color:var(--text-inv-dim); font-size:14px; line-height:1.65; margin:0 0 4px;
}
.about-copy strong{color:var(--text-inv); font-weight:600;}

/* ============================================================
   ContrastFixer visual system
   ============================================================ */
:root{--ink-950:#050914;--ink-900:#091224;--ink-800:#101b31;--panel:#101a2c;--panel-2:#16233a;--paper:#0d1729;--line:#263652;--line-dark:#1b2a44;--text:#f6f8ff;--text-dim:#9daac1;--text-inv:#f6f8ff;--text-inv-dim:#aeb9cc;--pass:#38e98b;--pass-bg:rgba(56,233,139,.14);--fail:#ff876f;--fail-bg:rgba(255,135,111,.15);--amber:#f9c965;--focus:#61a9ff;--radius:16px;--mono:'DM Mono',monospace;--display:'Manrope',sans-serif;--body:'Manrope',system-ui,sans-serif}
body{background:radial-gradient(circle at 14% 5%,rgba(84,52,194,.32),transparent 25rem),radial-gradient(circle at 90% 32%,rgba(18,159,109,.13),transparent 26rem),var(--ink-950);color:var(--text)}
.app{max-width:1240px;padding:22px 24px 72px}
header.top{align-items:center;padding:0 0 20px;border:none;margin-bottom:22px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-size:25px;font-weight:800;letter-spacing:-1.2px}.logo img{filter:drop-shadow(0 0 14px rgba(61,233,152,.25))}.logo strong{color:#31e78b}.logo em{font-style:normal;font-size:17px;color:#a7b1c3;font-weight:500;letter-spacing:-.6px}
.top nav{display:flex;gap:24px}.top nav a{font-size:13px;color:#d4dbea;text-decoration:none;font-weight:600}.top nav a:hover{color:#37e990}.header-cta{color:#06110d;background:#36e98b;border-radius:10px;padding:10px 14px;text-decoration:none;font-size:13px;font-weight:800}.header-cta span{margin-left:5px}
.hero{min-height:305px;border:1px solid rgba(110,130,180,.22);border-radius:22px;overflow:hidden;padding:48px;position:relative;display:flex;align-items:center;background:linear-gradient(110deg,rgba(65,36,149,.6),rgba(10,23,47,.82) 52%,rgba(5,15,29,.9));margin-bottom:24px}.hero:after{content:"";position:absolute;right:-9%;top:-45%;width:45%;height:150%;background:radial-gradient(circle,rgba(60,233,139,.36),transparent 61%);filter:blur(12px)}.hero-copy{max-width:610px;position:relative;z-index:1}.eyebrow{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#aeb9cc;margin:0 0 14px}.eyebrow span{display:inline-block;width:7px;height:7px;border-radius:50%;background:#37e990;margin-right:8px;box-shadow:0 0 15px #37e990}.hero h1{font-family:var(--display);font-size:clamp(39px,5vw,60px);letter-spacing:-2.7px;line-height:1.03;margin:0;font-weight:800}.hero h1 b{color:#37e990}.hero-text{font-size:15px;line-height:1.65;color:#c5cfdf;max-width:53ch;margin:19px 0}.hero-actions{display:flex;gap:12px;align-items:center}.primary-link,.secondary-link{padding:12px 16px;border-radius:10px;border:0;font-weight:800;font-size:13px;text-decoration:none;cursor:pointer}.primary-link{background:#36e98b;color:#07100c}.secondary-link{background:rgba(255,255,255,.06);color:#f6f8ff;border:1px solid rgba(255,255,255,.17)}.trust-row{display:flex;gap:15px;flex-wrap:wrap;font-size:11px;color:#aeb9cc;margin-top:20px}.hero-orb{position:absolute;right:8%;top:50%;transform:translateY(-50%);width:178px;height:178px;border-radius:44px;background:linear-gradient(135deg,#dd45c5,#2be18c 92%);padding:2px;z-index:1;box-shadow:0 18px 70px rgba(44,229,139,.22)}.orb-inner{width:100%;height:100%;border-radius:42px;background:#081321;display:grid;place-items:center;color:#eff4ff;font-size:102px;font-weight:800;text-shadow:0 0 28px rgba(55,233,144,.5)}
.tabs{gap:8px;margin:0 0 18px}.tab{background:rgba(17,28,48,.75);border:1px solid #293a59;color:#a9b6cc;padding:10px 15px}.tab[aria-selected=true]{background:#36e98b;color:#07100c;border-color:#36e98b}.tab:hover:not([aria-selected=true]){color:#fff;border-color:#4e6389}
.card{background:linear-gradient(145deg,rgba(16,28,49,.96),rgba(10,19,35,.98));border:1px solid #263a5d;border-radius:18px;padding:22px;box-shadow:0 22px 60px rgba(0,0,0,.18)}.result-card{background:rgba(4,13,27,.45);border-color:#243858;border-radius:14px}.field label,.result-card h3{color:#aebbd0}.color-row input[type=text],select,textarea{background:#091426;border-color:#2a3b59;color:#f5f7ff}.color-row input[type=color]{background:#091426;border-color:#2a3b59}.swap-btn{border-color:#334665;color:#aeb9cc}.swap-btn:hover{color:#fff;border-color:#67799b}.seg{border-color:#2a3b59}.seg button{background:#0b1628;color:#afbbce;border-color:#2a3b59}.seg button.active{background:#273c62;color:#fff}.ratio-readout{background:#0a1527;border-color:#2a3b59}.ratio-readout .num{color:#fff}.fix-btn,.btn-secondary{background:linear-gradient(90deg,#38ea8b,#2dc8c8);color:#06120d;border-radius:10px}.btn-ghost{color:#b9c4d6;border-color:#2b3e5d}.swatch .meta{background:#12203a;color:#dfe6f5;border-color:#2b3f60}.swatch{border-color:#2b3f60}.hint,.ramp-legend,.empty-note{color:#9daac1}.apca-toggle{color:#aab6c8}table.matrix th,table.matrix td{border-color:#2b3d5c}table.matrix th{background:#14233c;color:#fff}table.matrix th.corner,table.matrix td.diag{background:#0b1628}code{background:#162641;color:#cae4ff}.about-copy{max-width:none;margin-top:48px;background:linear-gradient(145deg,rgba(16,28,49,.75),rgba(5,14,26,.76));border:1px solid #243857;padding:30px;border-radius:18px}.about-copy h2{font-size:30px;letter-spacing:-1.1px;margin-top:0}.about-copy p{max-width:78ch;color:#b6c2d5}.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:24px}.benefit-grid article{background:#0a1527;border:1px solid #263a5a;border-radius:12px;padding:14px}.benefit-grid b{display:block;color:#35e78b;font-size:14px;margin-bottom:4px}.benefit-grid span{font-size:12px;color:#a6b2c5}footer{border-top:1px solid #233653;padding-top:24px;color:#93a1b7}footer .footer-brand{display:flex;align-items:center;justify-content:center;gap:8px;color:#eaf0fa;font-size:14px}footer p{margin:7px 0}footer a{color:#38e98b;text-decoration:none}
@media(max-width:760px){.app{padding:16px}.top nav{display:none}.header-cta{padding:9px 11px}.hero{padding:34px 25px;min-height:390px;align-items:flex-start}.hero-orb{right:-32px;bottom:-24px;top:auto;transform:none;width:130px;height:130px}.orb-inner{font-size:70px}.hero h1{font-size:42px}.benefit-grid{grid-template-columns:1fr 1fr}.grid2{grid-template-columns:1fr}.mock-wrap{flex-direction:column}}
/* FAQ + crawlable internal navigation */
.footer-nav{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin:13px 0}.footer-nav a{font-size:11px}.breadcrumbs{display:flex;gap:8px;align-items:center;color:#9daac1;font-family:var(--mono);font-size:11px;margin:18px 0 30px}.breadcrumbs a{color:#38e98b;text-decoration:none}.faq-page{max-width:920px;margin:0 auto}.faq-hero{padding:25px 0 18px}.faq-hero h1{font-size:clamp(34px,5vw,52px);letter-spacing:-2px;line-height:1.05;margin:0 0 12px}.faq-hero p:not(.eyebrow){color:#b9c5d8;max-width:60ch;line-height:1.6}.faq-list{margin-top:22px}.faq-list details{background:linear-gradient(145deg,rgba(16,28,49,.9),rgba(7,16,31,.9));border:1px solid #263a5d;border-radius:13px;margin-bottom:10px;padding:0 18px}.faq-list summary{color:#f5f8ff;cursor:pointer;font-weight:800;padding:18px 26px 18px 0;position:relative;list-style:none}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary:after{content:'+';position:absolute;right:0;color:#38e98b;font-size:22px;line-height:1;top:15px}.faq-list details[open] summary:after{content:'–'}.faq-list details p{color:#b6c2d5;line-height:1.65;margin:0 0 18px;max-width:75ch}.faq-cta{text-align:center;background:linear-gradient(135deg,rgba(58,31,141,.44),rgba(11,31,49,.85));border:1px solid #283e60;border-radius:18px;padding:32px;margin:34px 0}.faq-cta h2{margin:0 0 8px;font-size:27px}.faq-cta p{color:#b7c4d7;margin:0 0 20px}.faq-cta .hero-actions{justify-content:center}@media(max-width:600px){.footer-nav{gap:10px}.faq-cta{padding:26px 18px}.faq-cta .hero-actions{flex-direction:column}.faq-cta a{width:100%}}