:root {
  --gu-navy: #0b1733;
  --gu-blue: #16345f;
  --gu-gold: #c79a35;
  --gu-gold-soft: #f6e8bc;
  --gu-ink: #17233a;
  --gu-muted: #667085;
  --gu-line: #dfe5ed;
  --gu-bg: #f4f6f9;
  --gu-danger: #b42318;
}

.gu-page { background: var(--gu-bg); color: var(--gu-ink); }
.gu-page * { box-sizing: border-box; }
.gu-page main { min-height: 70vh; }

.gu-hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 82% 15%, rgba(224, 184, 87, .25), transparent 30%),
    linear-gradient(135deg, #071329 0%, #112b51 72%, #1b365d 100%);
  border-bottom: 1px solid rgba(199, 154, 53, .42);
}
.gu-hero::after {
  content: "Au";
  position: absolute;
  right: max(5vw, 26px);
  bottom: -64px;
  font: 800 clamp(170px, 22vw, 330px)/1 Georgia, serif;
  color: rgba(255, 255, 255, .035);
  pointer-events: none;
}
.gu-hero-inner { position: relative; z-index: 1; padding-top: 34px; padding-bottom: 50px; }
.gu-breadcrumb { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-bottom: 28px; font-size: 13px; color: rgba(255,255,255,.62); }
.gu-breadcrumb a { color: rgba(255,255,255,.78); text-decoration: none; }
.gu-breadcrumb b { color: var(--gu-gold-soft); font-weight: 600; }
.gu-hero .eyebrow { margin: 0 0 8px; color: #e2bf69; font-size: 12px; font-weight: 800; letter-spacing: .18em; }
.gu-hero h1 { margin: 0; font-size: clamp(34px, 5vw, 56px); line-height: 1.15; letter-spacing: -.03em; }
.gu-hero h1 + p { max-width: 720px; margin: 15px 0 0; color: rgba(255,255,255,.74); font-size: 16px; line-height: 1.8; }
.gu-hero-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.gu-hero-tags span { padding: 7px 12px; border: 1px solid rgba(225,190,104,.3); border-radius: 999px; background: rgba(255,255,255,.06); color: #f6df9f; font-size: 12px; }

.gu-main-section { padding: 30px 0 54px; }
.gu-shell { display: grid; gap: 22px; }
.gu-card { min-width: 0; padding: 28px; border: 1px solid var(--gu-line); border-radius: 18px; background: #fff; box-shadow: 0 12px 38px rgba(11, 23, 51, .055); }
.gu-card-heading, .gu-section-heading { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.gu-card-heading { margin-bottom: 24px; }
.gu-card-heading h2 { margin: 2px 0 0; color: var(--gu-ink); font-size: 24px; }
.gu-kicker { margin: 0; color: #9d741d; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.gu-copy { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 7px; padding: 9px 14px; border: 1px solid #cbd4df; border-radius: 10px; background: #fff; color: #32435c; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: .18s ease; }
.gu-copy:hover:not(:disabled) { border-color: var(--gu-gold); color: #8a6417; transform: translateY(-1px); }
.gu-copy:disabled { opacity: .42; cursor: not-allowed; }

.gu-weight-layout { display: grid; grid-template-columns: minmax(230px, .72fr) minmax(0, 1.5fr); gap: 24px; align-items: stretch; }
.gu-input-panel { padding: 20px; border-radius: 14px; background: #f7f8fa; }
.gu-field { display: grid; gap: 7px; min-width: 0; color: #46546a; font-size: 13px; font-weight: 700; }
.gu-field + .gu-field { margin-top: 15px; }
.gu-field input, .gu-field select { width: 100%; min-width: 0; height: 48px; padding: 0 13px; border: 1px solid #cfd7e2; border-radius: 10px; outline: 0; background: #fff; color: #17233a; font: 600 15px/1.3 inherit; transition: border-color .18s ease, box-shadow .18s ease; }
.gu-field input:focus, .gu-field select:focus { border-color: var(--gu-gold); box-shadow: 0 0 0 3px rgba(199,154,53,.14); }
.gu-field input[readonly], .gu-field select:disabled { color: #44546b; background: #f2f4f7; cursor: not-allowed; }
.gu-input-with-unit { position: relative; }
.gu-input-with-unit input { padding-right: 70px; font-size: 22px; }
.gu-input-with-unit b { position: absolute; right: 13px; top: 50%; max-width: 58px; overflow: hidden; transform: translateY(-50%); color: #9a741e; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.gu-field-error { min-height: 20px; margin: 9px 0 0; color: var(--gu-danger); font-size: 13px; }
.gu-definition-note { margin-top: 16px; padding: 13px 14px; border-left: 3px solid var(--gu-gold); border-radius: 4px 9px 9px 4px; background: #fffaf0; }
.gu-definition-note strong { color: #755410; font-size: 13px; }
.gu-definition-note p { margin: 5px 0 0; color: #6d6047; font-size: 12px; line-height: 1.65; }
.gu-weight-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gu-weight-results > div, .gu-price-results > div { min-width: 0; padding: 17px; border: 1px solid #e4e8ee; border-radius: 12px; background: #fff; }
.gu-weight-results span, .gu-price-results span { display: block; color: var(--gu-muted); font-size: 12px; }
.gu-weight-results strong, .gu-price-results strong { display: block; overflow-wrap: anywhere; margin: 12px 0 7px; color: var(--gu-ink); font-size: clamp(18px, 2.1vw, 25px); font-variant-numeric: tabular-nums; line-height: 1.15; }
.gu-weight-results small, .gu-price-results small { color: #8993a4; font-size: 11px; }
.gu-weight-results .is-highlight { border-color: rgba(199,154,53,.5); background: linear-gradient(145deg, #fffdf8, #fff6db); }
.gu-weight-results .is-highlight strong { color: #805e18; }

.gu-load-status { max-width: 340px; margin: 4px 0 0; color: var(--gu-muted); font-size: 12px; line-height: 1.5; text-align: right; }
.gu-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gu-mode-panel { min-width: 0; padding: 20px; border: 1px solid var(--gu-line); border-radius: 14px; background: #fafbfc; }
.gu-mode-heading, .gu-section-heading > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gu-mode-heading > div, .gu-section-heading > div { justify-content: flex-start; }
.gu-mode-heading span, .gu-section-heading > div > span { display: inline-grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: #132d52; color: #f4d88e; font-size: 11px; font-weight: 800; }
.gu-mode-heading h3, .gu-section-heading h3 { margin: 0; color: #25334a; font-size: 17px; }
.gu-state { flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; font-size: 11px; }
.gu-state.is-loading { color: #667085; background: #eaecf0; }
.gu-state.is-auto { color: #067647; background: #d1fadf; }
.gu-state.is-manual { color: #854a0e; background: #fef0c7; }
.gu-state.is-stale { color: #b54708; background: #ffead5; }
.gu-segment { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 17px 0; padding: 4px; border-radius: 10px; background: #e9edf2; }
.gu-segment button { min-height: 38px; padding: 7px 9px; border: 0; border-radius: 7px; background: transparent; color: #59677b; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.gu-segment button.is-active { background: #fff; color: #17345d; box-shadow: 0 2px 7px rgba(11,23,51,.1); }
.gu-segment button:disabled { opacity: .43; cursor: not-allowed; }
.gu-price-input-row, .gu-rate-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gu-price-input-row .gu-field + .gu-field, .gu-rate-inputs .gu-field + .gu-field { margin-top: 0; }
.gu-mode-note { margin: 13px 0 0; color: var(--gu-muted); font-size: 12px; line-height: 1.6; }
.gu-price-error { margin-top: 13px; }
.gu-warning { margin: 12px 0 0; padding: 11px 14px; border: 1px solid #fedf89; border-radius: 9px; background: #fffaeb; color: #93370d; font-size: 12px; line-height: 1.6; }
.gu-section-heading { align-items: center; margin: 24px 0 13px; padding-top: 21px; border-top: 1px solid #e8ebf0; }
.gu-price-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gu-price-results .is-primary { color: #fff; border-color: #18385f; background: linear-gradient(145deg, #10284a, #1b426e); }
.gu-price-results .is-primary span, .gu-price-results .is-primary small { color: rgba(255,255,255,.67); }
.gu-price-results .is-primary strong { color: #f2d584; }
.gu-total-panel { display: grid; grid-template-columns: minmax(170px, .55fr) minmax(0, 1.45fr); gap: 18px; align-items: center; margin-top: 15px; padding: 18px 20px; border-radius: 13px; background: #f4f7fb; }
.gu-total-panel > div > span { color: #667085; font-size: 12px; }
.gu-total-panel > div > strong { display: block; margin-top: 7px; color: #17345d; font-size: 18px; overflow-wrap: anywhere; }
.gu-total-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gu-total-values p { min-width: 0; margin: 0; padding-left: 13px; border-left: 1px solid #dce2ea; }
.gu-total-values span { display: block; color: #7a8698; font-size: 11px; }
.gu-total-values b { display: block; overflow-wrap: anywhere; margin-top: 5px; color: #243650; font-size: 15px; font-variant-numeric: tabular-nums; }

.gu-data-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.gu-data-grid section { min-width: 0; padding: 20px; border: 1px solid var(--gu-line); border-radius: 13px; }
.gu-data-icon { display: inline-grid; min-width: 36px; height: 36px; padding: 0 7px; place-items: center; border-radius: 9px; background: #142f55; color: #f1d485; font: 700 14px/1 Georgia, serif; }
.gu-data-grid h3 { margin: 13px 0 8px; font-size: 16px; }
.gu-data-grid p { overflow-wrap: anywhere; margin: 6px 0; color: #667085; font-size: 12px; line-height: 1.65; }
.gu-data-grid code { white-space: normal; color: #5f4612; background: #fff7df; }
.gu-data-grid dl { margin: 14px 0 0; }
.gu-data-grid dl > div { padding: 9px 0; border-top: 1px solid #edf0f4; }
.gu-data-grid dt { color: #8993a4; font-size: 11px; }
.gu-data-grid dd { overflow-wrap: anywhere; margin: 4px 0 0; color: #36455c; font-size: 12px; font-weight: 700; }
.gu-disclaimer { margin-top: 15px; padding: 15px 18px; border-radius: 10px; background: #f6f7f9; }
.gu-disclaimer strong { font-size: 13px; }
.gu-disclaimer p { margin: 6px 0 0; color: #667085; font-size: 12px; line-height: 1.75; }

@media (max-width: 900px) {
  .gu-weight-layout { grid-template-columns: 1fr; }
  .gu-mode-grid { grid-template-columns: 1fr; }
  .gu-data-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .gu-hero-inner { padding-top: 23px; padding-bottom: 34px; }
  .gu-breadcrumb { margin-bottom: 20px; }
  .gu-hero h1 { font-size: 36px; }
  .gu-hero h1 + p { font-size: 14px; }
  .gu-main-section { padding: 16px 0 35px; }
  .gu-shell { gap: 15px; }
  .gu-card { padding: 18px; border-radius: 14px; }
  .gu-card-heading { align-items: stretch; flex-direction: column; margin-bottom: 18px; }
  .gu-card-heading h2 { font-size: 21px; }
  .gu-card-heading .gu-copy { width: 100%; }
  .gu-weight-layout { gap: 15px; }
  .gu-input-panel, .gu-mode-panel { padding: 15px; }
  .gu-weight-results, .gu-price-results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .gu-weight-results > div, .gu-price-results > div { padding: 14px 12px; }
  .gu-weight-results strong, .gu-price-results strong { font-size: 17px; }
  .gu-price-input-row, .gu-rate-inputs { grid-template-columns: 1fr; }
  .gu-price-input-row .gu-field + .gu-field, .gu-rate-inputs .gu-field + .gu-field { margin-top: 2px; }
  .gu-section-heading { align-items: stretch; flex-direction: column; }
  .gu-section-heading .gu-copy { width: 100%; }
  .gu-load-status { max-width: none; text-align: left; }
  .gu-total-panel { grid-template-columns: 1fr; padding: 16px; }
  .gu-total-values { grid-template-columns: 1fr; }
  .gu-total-values p { padding: 9px 0 0; border-top: 1px solid #dce2ea; border-left: 0; }
}

@media (max-width: 420px) {
  .gu-hero-tags { gap: 7px; }
  .gu-hero-tags span { font-size: 11px; }
  .gu-weight-results, .gu-price-results { grid-template-columns: 1fr; }
  .gu-mode-heading { align-items: flex-start; }
  .gu-state { white-space: nowrap; }
}