@import url("/tokens.css");

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--space-6)}
body{margin:0;min-width:320px;background:linear-gradient(180deg,#eef8f7 0,var(--paper) 34rem);color:var(--ink);font-family:var(--font-body);font-size:var(--text-body);line-height:var(--leading-body)}
a{color:inherit;text-underline-offset:4px}
button,input,select{font:inherit}
button,a,input,select,summary{-webkit-tap-highlight-color:transparent}
a[href],button:not(:disabled),summary,select,input[type=radio],input[type=checkbox],label[for]{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.55}
:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.wrap{max-width:1180px;margin:auto;padding-inline:var(--space-9)}
.header{position:relative;z-index:10;min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);border-bottom:1px solid rgba(19,34,56,.08)}
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand img{display:block;width:216px;height:auto}
.header-actions{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:var(--space-7)}
.header nav,footer nav{display:flex;gap:var(--space-7)}
.header nav a,footer nav a{text-decoration:none;font-size:var(--text-control)}
.header nav a:hover,footer nav a:hover{text-decoration:underline}
.menu-toggle{display:none;width:44px;height:44px;padding:10px;border:1px solid var(--line);border-radius:var(--radius-control);background:var(--surface);color:var(--ink)}
.menu-toggle span{display:block;height:2px;margin:4px 0;border-radius:2px;background:currentColor;transition:transform .18s ease,opacity .18s ease}
.intro{padding:var(--space-12) 0 var(--space-8)}
.eyebrow{font-size:var(--text-caption);letter-spacing:1.9px;font-weight:700;color:var(--gold);margin:0 0 var(--space-3)}
h1{font-size:var(--text-h1);letter-spacing:-2px;line-height:var(--leading-heading);margin:0 0 var(--space-4);font-weight:600}
.intro>p:last-child{font-size:var(--text-body);color:var(--muted);margin:0}
h2{font-size:var(--text-h2);letter-spacing:-.8px;line-height:var(--leading-heading);margin:0 0 var(--space-4);font-weight:600}
h3{font-size:var(--text-h3);line-height:var(--leading-heading);margin:var(--space-4) 0 var(--space-3);letter-spacing:-.4px}
p{margin:0 0 var(--space-4)}
.calculator{display:grid;grid-template-columns:1.12fr 1fr;border:1px solid rgba(19,34,56,.08);border-radius:var(--radius-panel);overflow:hidden;background:var(--surface);box-shadow:var(--shadow-panel)}
form{padding:var(--space-8)}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4)}
.section-heading h2{font-size:var(--text-h3);margin:0}
.section-heading>span{font-size:var(--text-small);color:var(--muted)}
.subtle{font-size:var(--text-control);color:var(--muted);margin:var(--space-1) 0 var(--space-6)}
.item{border:0;padding:0;margin:0 0 var(--space-4);min-width:0}
.item legend{font-size:var(--text-small);font-weight:bold;color:var(--muted);margin-bottom:var(--space-2)}
.item-fields{display:grid;grid-template-columns:1fr 1.2fr;gap:var(--space-3)}
.purity-field{grid-column:1/-1}
label{display:block;font-size:var(--text-small);font-weight:600;margin-bottom:var(--space-2)}
input:not([type=radio]),select{display:block;width:100%;min-height:47px;background:var(--surface);border:1px solid var(--input-border);border-radius:var(--radius-control);color:var(--ink);padding:var(--space-2) var(--space-3);min-width:0}
input[aria-invalid=true]{border-color:var(--error);background:var(--error-bg)}
.remove{float:right;background:none;border:0;font-size:var(--text-small);text-decoration:underline;color:var(--error);margin-top:var(--space-2);min-height:30px}
.add{border:1px dashed var(--input-border);border-radius:var(--radius-control);width:100%;background:var(--paper);color:var(--ink);font-size:var(--text-small);padding:var(--space-2)}
.hint{font-size:var(--text-small);color:var(--muted);line-height:var(--leading-body);margin:var(--space-2) 0 0}
.spot-block{border-top:1px solid var(--line);margin-top:var(--space-5);padding-top:var(--space-4)}
.price-mode{padding:0;border:0;margin:0 0 var(--space-2)}
.price-mode legend{font-size:var(--text-small);font-weight:600;margin-bottom:var(--space-2)}
.price-mode label{display:inline-flex;gap:var(--space-2);align-items:center;margin:0 var(--space-5) var(--space-1) 0;font-weight:400}
.price-mode input{accent-color:var(--ink);width:16px;height:16px;margin:0}
.quote-line{display:flex;gap:var(--space-2);align-items:baseline;font-size:var(--text-small);color:var(--muted)}
.quote-line strong{font-size:var(--text-h3);color:var(--ink)}
#manual-wrap{margin:var(--space-4) 0}
.offer-details{margin:var(--space-5) 0;border-top:1px solid var(--line);padding-top:var(--space-4)}
.offer-details summary{font-size:var(--text-small)}
.offer-details summary span{font-size:var(--text-caption);color:var(--muted);margin-left:var(--space-2)}
.offer-details label{margin-top:var(--space-4)}
.calculate{width:100%;min-height:var(--button-height);border:0;border-radius:var(--radius-control);background:var(--ink);color:var(--surface);font-weight:600;font-size:var(--text-control);display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4)}
.calculate,.header-cta{transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
.calculate:hover,.header-cta:hover{background:var(--button-hover);transform:translateY(-2px);box-shadow:0 8px 18px rgba(23,107,103,.2)}
.calculate span{font-size:var(--text-h3)}
.privacy-note{text-align:center;font-size:var(--text-caption);color:var(--muted);margin:var(--space-2) 0 0}
.result{background:var(--result);padding:var(--space-8);display:flex;flex-direction:column;min-width:0}
.result-top{display:flex;align-items:center;justify-content:space-between}
.result-top .eyebrow{color:var(--muted);font-size:var(--text-caption);margin:0}
.result-icon{display:grid;place-items:center;border:1px solid var(--line);width:35px;height:35px;border-radius:50%;font-family:Georgia,serif;color:var(--muted)}
.total{font-size:var(--text-result);line-height:var(--leading-heading);letter-spacing:-2px;font-weight:500;margin:var(--space-7) 0 var(--space-2);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.empty{color:var(--muted)}
.result-intro{font-size:var(--text-body)}
.result-muted{font-size:var(--text-control);color:var(--muted);max-width:310px}
.result-note{display:flex;gap:var(--space-2);margin-top:auto;padding-top:var(--space-8);font-size:var(--text-small);color:var(--muted)}
.result-note p{margin:0}
.metrics{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin:var(--space-6) 0;padding:var(--space-5) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.metrics dt{font-size:var(--text-caption);color:var(--muted)}
.metrics dd{font-size:var(--text-h3);margin:var(--space-1) 0 0}
.result-row{border-top:1px solid var(--line);padding:var(--space-3) 0;font-size:var(--text-small)}
.result-row strong{float:right;font-size:var(--text-body)}
.result-row p{margin:var(--space-1) 0;color:var(--muted)}
.breakdown{font-size:var(--text-small);margin-top:var(--space-4)}
.breakdown summary{cursor:pointer}
.breakdown p{margin:var(--space-2) 0}
.offer-result{border:1px solid var(--line);border-radius:var(--radius-control);padding:var(--space-4);margin-top:var(--space-4);font-size:var(--text-control)}
.error{font-size:var(--text-small);background:var(--error-bg);color:var(--error);border-radius:5px;padding:var(--space-2)}
.trust-line{display:flex;justify-content:center;gap:var(--space-10);color:var(--muted);font-size:var(--text-small);padding:var(--space-4) 0}
table{width:100%;border-collapse:collapse;font-size:var(--text-control)}
thead{background:var(--gold)}
th{text-align:left;color:var(--surface);font-size:var(--text-caption);font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:var(--space-3)}
td{padding:var(--space-2) var(--space-3);border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
td:first-child{font-weight:600}
th:last-child,td:last-child{text-align:right}
tbody tr:nth-child(even){background:var(--soft)}
footer{display:flex;gap:var(--space-8);align-items:center;min-height:110px}
footer .brand img{width:178px;height:auto}
footer p{font-size:var(--text-small);color:var(--muted);margin:0}
footer nav{margin-left:auto;gap:var(--space-5)}
.skip{position:absolute;top:-100px;left:20px;background:var(--surface);padding:var(--space-2);z-index:5}
.skip:focus{top:10px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
[hidden]{display:none!important}
@media(max-width:900px){.header{justify-content:space-between;gap:var(--space-5)}
.wrap{padding-inline:var(--space-6)}
.calculator{grid-template-columns:1fr 1fr}
form,.result{padding:var(--space-6)}
footer{flex-wrap:wrap;padding-block:var(--space-6)}
footer nav{margin-left:0}
}
@media(max-width:640px){.wrap{padding-inline:var(--space-4)}
.header{min-height:75px}
.header nav{gap:var(--space-4)}
.header nav a{font-size:var(--text-small)}
.intro{padding:var(--space-7) 0 var(--space-6)}
.eyebrow{font-size:var(--text-caption);letter-spacing:1.4px}
.intro p:last-child{font-size:var(--text-control)}
h1{letter-spacing:-1.2px;font-size:var(--text-h1-mobile)}
.calculator{grid-template-columns:1fr}
form,.result{padding:var(--space-5)}
.subtle{margin-bottom:var(--space-4)}
.result{min-height:320px}
.total{font-size:var(--text-result-mobile)}
.trust-line{gap:var(--space-4);font-size:var(--text-caption)}
h2{font-size:var(--text-h2)}
footer{gap:var(--space-3)}
footer nav{width:100%;flex-wrap:wrap;gap:var(--space-5)}
.total{overflow-wrap:anywhere}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
}


/* Shared reading and control sizes: supporting instructions are never tiny. */
p, .intro>p:last-child {
  font-size: var(--text-body);
  line-height: var(--leading-body);
}
.hint, .subtle, .privacy-note, .result-note p, .result-row p, .breakdown p,
.result-muted, .error, footer p {
  font-size: var(--text-control);
}
label, .price-mode legend, .offer-details summary,
.add, .remove, .breakdown, .offer-result { font-size: var(--text-control); }
input:not([type=radio]), select { font-size: var(--text-control); }
.price-mode label, summary { min-height: 32px; }
.calculate, .header-cta {
  background: var(--button-background);
  color: var(--button-text);
  min-height: var(--button-height);
  border-radius: var(--radius-control);
  font-weight: var(--button-weight);
  font-size: var(--text-control);
}
.header { gap: var(--space-7); padding-block: var(--space-4); }
.header-cta { padding: var(--space-3) var(--space-4); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; }
.price-date, .prices>div>p.price-date { font-size: var(--text-control); line-height: var(--leading-body); color: var(--ink); font-weight: 600; margin-top: var(--space-4); }
.result-row strong { float: none; display: block; font-size: var(--text-body); }
.metrics dd { overflow-wrap: anywhere; }
.info-page { max-width: 850px; padding-block: var(--space-12); min-height: 65vh; }
.info-page h2 { margin-top: var(--space-8); }
@media(max-width:1000px) {
  .header-actions { flex: 1 1 auto; }
  .header nav {display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-3); flex-direction: row;; }
  .header nav a { font-size: var(--text-control); }
  .calculator { grid-template-columns: 1fr; }
}
@media(max-width:640px) {
  .header { min-height:72px; flex-wrap:nowrap; gap:var(--space-2); padding-block:var(--space-2); }
  .header .brand img { width:140px; }
  .header-actions { width:auto; flex:0 0 auto; display:flex; align-items:center; gap:var(--space-2); }
  .header-cta { min-height:44px; font-size:var(--text-small); padding:var(--space-2) 10px; }
  .menu-toggle { display:block; flex:0 0 auto; }
  .header nav { display:none; position:absolute; top:calc(100% + 1px); left:var(--space-4); right:var(--space-4); padding:var(--space-3); border:1px solid var(--line); border-radius:var(--radius-control); background:var(--surface); box-shadow:var(--shadow-panel); flex-direction:column; align-items:stretch; gap:0; }
  .header nav a { padding:var(--space-2) var(--space-3); font-size:var(--text-control); }
  .header.menu-open nav { display:flex; }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
  .trust-line { flex-wrap: wrap; font-size: var(--text-small); }
  th, td { padding-inline: var(--space-2); }
}
@media(max-width:360px) {
  .header .brand img { width:112px; }
  .header-cta { font-size:13px; padding-inline:8px; }
  .item-fields, .metrics { grid-template-columns: 1fr; }
}
.currency-field { max-width: 230px; }
.currency-field label { font-size: var(--text-small); margin: 0; }
.currency-field select { min-height: 44px; font-size: var(--text-small); }
.section-heading { flex-wrap: wrap; }
@keyframes result-highlight { 0%,100% { box-shadow: inset 0 0 0 0 transparent; } 35% { box-shadow: inset 0 0 0 3px var(--focus); } }
.result-updated { animation: result-highlight 900ms ease-out 1; }
@media(prefers-reduced-motion:reduce) { .result-updated { animation: none; } }
@media(max-width:640px) { .currency-field { max-width: 100%; width: 100%; } }
/* Mobile access and clearer type hierarchy. */
.currency-field { display: grid; grid-template-columns: minmax(110px,1fr) minmax(180px,1.4fr); align-items: center; gap: var(--space-2) var(--space-4); max-width: none; width: 100%; padding: var(--space-4); margin-bottom: var(--space-6); background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-control); }
.currency-field label { font-size: var(--text-control); font-weight: 600; }
.currency-field select { font-size: var(--text-control); }
.currency-field .hint { grid-column: 1 / -1; margin: 0; }
@keyframes result-highlight { 0%,100% { background-color: transparent; } 35% { background-color: var(--example); } }
.total.result-updated { border-radius: var(--radius-control); animation: result-highlight 900ms ease-out 1; }
.scroll-top { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 20; min-width: 48px; min-height: 48px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--ink); color: var(--surface); font-size: var(--text-h3); cursor: pointer; box-shadow: 0 3px 12px #0002; }
.mobile-result { display: none; }
@media(max-width:1000px) {
  body { padding-bottom: 90px; }
  .mobile-result { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 21; width: 100%; justify-content: space-between; align-items: center; gap: var(--space-3); text-align: left; padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--line); background: var(--ink); color: var(--surface); font-size: var(--text-small); box-shadow: 0 -3px 16px #0001; }
  .mobile-result strong { display: block; font-size: var(--text-body); overflow-wrap: anywhere; }
  .view-result { flex-shrink: 0; font-weight: 600; }
  .scroll-top { bottom: calc(100px + env(safe-area-inset-bottom)); }
}
@media(max-width:640px) {
  .currency-field { grid-template-columns: 1fr; padding: var(--space-3); }
  .currency-field .hint { font-size: var(--text-control); }
}
@media(prefers-reduced-motion:reduce) { .total.result-updated { animation: none; } }

.spot-block .currency-field { padding: 0; border: 0; background: transparent; grid-template-columns: minmax(65px,1fr) minmax(0,2fr); margin-bottom: var(--space-5); }

/* Straightforward reading layout below the calculator. */
.article-content { max-width: 800px; margin: 0 auto; }
.article-section { padding: var(--space-14) 0; border-bottom: 1px solid var(--line); }
.article-section:last-child { border-bottom: 0; }
.article-section h2 { margin-bottom: var(--space-5); }
.article-section h3 { margin-top: var(--space-7); }
.article-section p, .article-section li { font-size: var(--text-body); line-height: var(--leading-body); }
.article-section ol, .article-section ul { margin: 0; padding-left: 1.4em; }
.article-section li + li { margin-top: var(--space-3); }
.article-section a { color: var(--ink); font-weight: 600; }
.prices-article .price-date { margin-bottom: var(--space-5); }
.article-note { color: var(--muted); margin-top: var(--space-3); }
.formula { border-left: 4px solid var(--gold); border-radius:0 var(--radius-control) var(--radius-control) 0; background:var(--result); padding:var(--space-4) var(--space-5); overflow-wrap:anywhere; }
.purity-table { margin: var(--space-6) 0; }
.purity-table caption { text-align: left; font-weight: 700; font-size: var(--text-body); padding-bottom: var(--space-3); }
.faq-item { padding: var(--space-5) 0; border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item h3 { margin: 0 0 var(--space-3); font-size: var(--text-h3); }
.faq-item p { margin: 0; color: var(--muted); }
@media(max-width:640px) {
  .article-section { padding: var(--space-12) 0; }
  .article-section h2 { font-size: var(--text-h2); }
  .purity-table { min-width: 560px; }
  .table-wrap { overflow-x: auto; }
}