:root {
      color-scheme: light;
      --ink: #0b1422;
      --ink-soft: #344052;
      --navy: #0b1422;
      --navy-2: #111f33;
      --orange: #ffb11b;
      --orange-deep: #d47b00;
      --cream: #f6f3ec;
      --paper: #ffffff;
      --line: #dfe4ea;
      --line-dark: #26364b;
      --green: #14815a;
      --red: #b43b3b;
      --shadow: 0 20px 55px rgba(12, 25, 43, 0.11);
      --radius-xl: 28px;
      --radius-lg: 20px;
      --radius-md: 14px;
      --content: 1180px;
    }

    * { box-sizing: border-box; }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 88px;
    }

    body {
      margin: 0;
      min-width: 320px;
      color: var(--ink);
      background: var(--cream);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }

    button, input, select { font: inherit; }
    button { color: inherit; }
    a { color: inherit; }

    .skip-link {
      position: fixed;
      z-index: 1000;
      top: 12px;
      left: 12px;
      padding: 10px 14px;
      color: var(--ink);
      background: var(--orange);
      border-radius: 10px;
      font-weight: 800;
      transform: translateY(-160%);
      transition: transform .18s ease;
    }

    .skip-link:focus { transform: translateY(0); }

    .site-header {
      position: sticky;
      z-index: 100;
      top: 0;
      color: #fff;
      background: rgba(11, 20, 34, 0.93);
      border-bottom: 1px solid rgba(255,255,255,.1);
      backdrop-filter: blur(16px);
    }

    .nav-wrap {
      width: min(var(--content), calc(100% - 32px));
      height: 72px;
      margin-inline: auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 11px;
      color: #fff;
      text-decoration: none;
      font-size: 1.03rem;
      font-weight: 900;
      letter-spacing: -.02em;
      white-space: nowrap;
    }

    .brand-mark {
      position: relative;
      width: 38px;
      height: 38px;
      overflow: hidden;
      background: var(--orange);
      border-radius: 11px;
      box-shadow: inset 0 -8px 18px rgba(142, 70, 0, .18);
    }

    .brand-mark::before,
    .brand-mark::after {
      content: "";
      position: absolute;
      left: 50%;
      width: 5px;
      height: 17px;
      background: var(--navy);
      border-radius: 8px;
      transform: translateX(-50%) rotate(10deg);
    }

    .brand-mark::before { top: -2px; }
    .brand-mark::after { bottom: -2px; }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .nav-links a {
      padding: 9px 12px;
      color: #cad3df;
      border-radius: 10px;
      text-decoration: none;
      font-size: .88rem;
      font-weight: 750;
    }

    .nav-links a:hover,
    .nav-links a:focus-visible {
      color: #fff;
      background: rgba(255,255,255,.08);
      outline: none;
    }

    .hero {
      position: relative;
      overflow: hidden;
      color: #fff;
      background:
        radial-gradient(circle at 80% 18%, rgba(255,177,27,.18), transparent 24%),
        linear-gradient(135deg, #0b1422 0%, #102238 58%, #0b1422 100%);
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .1;
      background-image:
        linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: linear-gradient(to bottom, #000, transparent 86%);
    }

    .hero::after {
      content: "";
      position: absolute;
      right: -10vw;
      bottom: -100px;
      width: 55vw;
      height: 180px;
      border-top: 10px solid rgba(255,177,27,.72);
      border-radius: 50%;
      transform: rotate(-8deg);
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      width: min(var(--content), calc(100% - 32px));
      min-height: 510px;
      margin-inline: auto;
      padding: 76px 0 64px;
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
      align-items: center;
      gap: 64px;
    }

    .eyebrow {
      margin: 0 0 14px;
      color: var(--orange);
      font-size: .78rem;
      font-weight: 900;
      letter-spacing: .13em;
      text-transform: uppercase;
    }

    h1, h2, h3, p { margin-top: 0; }

    h1 {
      max-width: 760px;
      margin-bottom: 20px;
      font-size: clamp(2.7rem, 6vw, 5.6rem);
      line-height: .97;
      letter-spacing: -.065em;
    }

    .hero-copy {
      max-width: 660px;
      margin-bottom: 30px;
      color: #cbd4df;
      font-size: clamp(1.02rem, 2vw, 1.22rem);
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }

    .button {
      min-height: 46px;
      padding: 12px 17px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border: 1px solid transparent;
      border-radius: 12px;
      cursor: pointer;
      text-decoration: none;
      font-size: .91rem;
      font-weight: 850;
      transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
    }

    .button:hover { transform: translateY(-1px); }
    .button:focus-visible { outline: 3px solid rgba(255,177,27,.45); outline-offset: 2px; }

    .button-primary {
      color: var(--ink);
      background: var(--orange);
      box-shadow: 0 10px 25px rgba(255,177,27,.2);
    }

    .button-primary:hover { background: #ffc148; }

    .button-ghost {
      color: #fff;
      background: rgba(255,255,255,.06);
      border-color: rgba(255,255,255,.18);
    }

    .button-quiet {
      color: var(--ink-soft);
      background: #fff;
      border-color: var(--line);
    }

    .button-small { min-height: 40px; padding: 9px 13px; font-size: .84rem; }

    .hero-panel {
      padding: 24px;
      background: rgba(255,255,255,.075);
      border: 1px solid rgba(255,255,255,.14);
      border-radius: var(--radius-xl);
      box-shadow: 0 30px 70px rgba(0,0,0,.2);
      backdrop-filter: blur(12px);
    }

    .tool-list { display: grid; gap: 10px; }

    .tool-link {
      padding: 15px 16px;
      display: grid;
      grid-template-columns: 38px 1fr auto;
      align-items: center;
      gap: 12px;
      color: #fff;
      background: rgba(6, 13, 24, .42);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 14px;
      text-decoration: none;
      transition: border-color .16s ease, background .16s ease;
    }

    .tool-link:hover,
    .tool-link:focus-visible {
      background: rgba(255,255,255,.09);
      border-color: rgba(255,177,27,.55);
      outline: none;
    }

    .tool-link-featured {
      background: rgba(255,177,27,.12);
      border-color: rgba(255,177,27,.38);
    }

    .tool-link-featured .tool-title { color: var(--orange); }

    .tool-num {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      color: var(--orange);
      background: rgba(255,177,27,.11);
      border-radius: 10px;
      font-size: .78rem;
      font-weight: 900;
    }

    .tool-title { font-size: .92rem; font-weight: 850; }
    .tool-subtitle { color: #aebac9; font-size: .74rem; }
    .tool-arrow { color: var(--orange); font-size: 1.15rem; }

    .trust-strip {
      background: #fff;
      border-bottom: 1px solid var(--line);
    }

    .trust-inner {
      width: min(var(--content), calc(100% - 32px));
      margin-inline: auto;
      padding: 18px 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }

    .trust-item {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      color: var(--ink-soft);
      font-size: .82rem;
      font-weight: 750;
      text-align: center;
    }

    .trust-dot {
      width: 8px;
      height: 8px;
      flex: 0 0 auto;
      background: var(--green);
      border-radius: 50%;
      box-shadow: 0 0 0 4px rgba(20,129,90,.1);
    }

    main { overflow: hidden; }

    .ad-slot {
      width: min(970px, calc(100% - 32px));
      min-height: 92px;
      margin: 34px auto;
      display: grid;
      place-items: center;
      color: #8a929d;
      background: rgba(255,255,255,.52);
      border: 1px dashed #c8ced6;
      border-radius: 14px;
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .section {
      width: min(var(--content), calc(100% - 32px));
      margin-inline: auto;
      padding: 66px 0;
    }

    .section-heading {
      max-width: 720px;
      margin-bottom: 30px;
    }

    .section-heading h2 {
      margin-bottom: 10px;
      font-size: clamp(2rem, 4vw, 3.2rem);
      line-height: 1.03;
      letter-spacing: -.045em;
    }

    .section-heading p:not(.eyebrow) { color: var(--ink-soft); }

    .calculator-shell {
      overflow: hidden;
      display: grid;
      grid-template-columns: minmax(0, 1.08fr) minmax(330px, .92fr);
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow);
    }

    .form-panel { padding: clamp(22px, 4vw, 42px); }

    .form-panel h3 {
      margin-bottom: 6px;
      font-size: 1.12rem;
      letter-spacing: -.02em;
    }

    .form-intro {
      margin-bottom: 26px;
      color: var(--ink-soft);
      font-size: .9rem;
    }

    .field-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 18px;
    }

    .field { min-width: 0; }
    .field-full { grid-column: 1 / -1; }

    label {
      margin-bottom: 7px;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      color: #243044;
      font-size: .79rem;
      font-weight: 850;
    }

    .label-hint {
      color: #7d8795;
      font-size: .7rem;
      font-weight: 650;
    }

    .field-label-row {
      position: relative;
      margin-bottom: 7px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .field-label-row > label { margin: 0; }

    .info-popover {
      position: relative;
      z-index: 20;
      flex: 0 0 auto;
      padding: 0;
      overflow: visible;
      background: transparent;
      border: 0;
      border-radius: 0;
    }

    .info-popover summary {
      width: 27px;
      height: 27px;
      padding: 0;
      display: grid;
      place-items: center;
      color: #5f4309;
      background: #fff2cf;
      border: 1px solid #e8c76f;
      border-radius: 50%;
      font-family: Georgia, serif;
      font-size: .86rem;
      font-weight: 900;
      line-height: 1;
    }

    .info-popover summary::after,
    .info-popover[open] summary::after { content: none; }

    .info-popover summary:focus-visible {
      outline: 3px solid rgba(255,177,27,.3);
      outline-offset: 2px;
    }

    .info-popover-card {
      position: absolute;
      z-index: 30;
      top: 35px;
      right: 0;
      width: min(330px, calc(100vw - 64px));
      padding: 15px 16px;
      color: var(--ink);
      background: #fff;
      border: 1px solid #d3dae3;
      border-radius: 13px;
      box-shadow: 0 16px 42px rgba(12,25,43,.2);
      font-size: .75rem;
      font-weight: 600;
    }

    .info-popover-card strong { display: block; margin-bottom: 7px; font-size: .8rem; }
    .info-popover-card ol { margin: 0; padding-left: 18px; }
    .info-popover-card li + li { margin-top: 5px; }
    .info-popover-card p { margin: 9px 0 0; color: #657183; font-size: .71rem; }

    .input-wrap { position: relative; }

    input, select {
      width: 100%;
      min-height: 48px;
      padding: 11px 48px 11px 13px;
      color: var(--ink);
      background: #fbfcfd;
      border: 1px solid #cdd4dd;
      border-radius: 11px;
      outline: none;
      font-weight: 750;
      transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
    }

    input:hover, select:hover { border-color: #aeb7c3; }
    input:focus, select:focus {
      background: #fff;
      border-color: var(--orange-deep);
      box-shadow: 0 0 0 4px rgba(255,177,27,.15);
    }

    input[aria-invalid="true"] {
      border-color: var(--red);
      box-shadow: 0 0 0 4px rgba(180,59,59,.11);
    }

    input[type="datetime-local"] { padding-right: 12px; }

    input[type="checkbox"] {
      width: 20px;
      min-height: 20px;
      flex: 0 0 20px;
      padding: 0;
      accent-color: var(--orange-deep);
      box-shadow: none;
    }

    .checkbox-card {
      padding: 14px 15px;
      background: #f7f9fb;
      border: 1px solid var(--line);
      border-radius: 13px;
    }

    .checkbox-label {
      margin: 0;
      align-items: flex-start;
      justify-content: flex-start;
      cursor: pointer;
      font-size: .82rem;
    }

    .checkbox-copy {
      display: grid;
      gap: 2px;
    }

    .checkbox-copy small {
      color: #6d7888;
      font-size: .72rem;
      font-weight: 650;
    }

    .calibration-fields {
      padding: 17px;
      background: #fff9ea;
      border: 1px solid #eed28a;
      border-radius: 14px;
    }

    .calibration-fields h4 {
      margin: 0 0 4px;
      color: #5d3d00;
      font-size: .9rem;
    }

    .calibration-fields > p {
      margin: 0 0 15px;
      color: #705f3d;
      font-size: .75rem;
    }

    .unit {
      position: absolute;
      top: 50%;
      right: 13px;
      color: #7b8592;
      font-size: .73rem;
      font-weight: 850;
      pointer-events: none;
      transform: translateY(-50%);
    }

    .error-message {
      min-height: 18px;
      margin: 10px 0 0;
      color: var(--red);
      font-size: .78rem;
      font-weight: 750;
    }

    .form-actions {
      margin-top: 22px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .result-panel {
      min-width: 0;
      padding: clamp(24px, 4vw, 42px);
      color: #fff;
      background:
        linear-gradient(145deg, rgba(255,177,27,.08), transparent 38%),
        var(--navy);
      border-left: 1px solid var(--line-dark);
    }

    .result-kicker {
      margin-bottom: 10px;
      color: #aeb9c7;
      font-size: .71rem;
      font-weight: 850;
      letter-spacing: .12em;
      text-transform: uppercase;
    }

    .result-hero {
      margin-bottom: 8px;
      color: var(--orange);
      font-size: clamp(2.4rem, 5vw, 4.2rem);
      font-weight: 950;
      line-height: 1;
      letter-spacing: -.055em;
      overflow-wrap: anywhere;
    }

    .result-caption {
      margin-bottom: 28px;
      color: #c4ceda;
      font-size: .88rem;
    }

    .result-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .result-grid-spaced { margin-top: 10px; }

    .result-stat {
      min-width: 0;
      padding: 14px;
      background: rgba(255,255,255,.055);
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 13px;
    }

    .result-stat-label {
      margin-bottom: 4px;
      color: #9eabbc;
      font-size: .67rem;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .result-stat-value {
      color: #fff;
      font-size: 1.05rem;
      font-weight: 900;
      overflow-wrap: anywhere;
    }

    .result-note {
      margin: 18px 0 0;
      padding: 13px 14px;
      color: #b9c4d1;
      background: rgba(255,255,255,.045);
      border-left: 3px solid var(--orange);
      border-radius: 6px 11px 11px 6px;
      font-size: .77rem;
    }

    .result-note a { color: #fff; text-underline-offset: 2px; }

    [hidden] { display: none !important; }

    .primary-calculator { padding-top: 54px; }

    .primary-calculator .calculator-shell {
      border-color: #c9d0d9;
      box-shadow: 0 28px 75px rgba(12,25,43,.16);
    }

    .advanced-panel {
      grid-column: 1 / -1;
      padding: 0;
      overflow: hidden;
      background: #f7f9fb;
      border: 1px solid var(--line);
      border-radius: 13px;
    }

    .advanced-panel summary {
      padding: 14px 44px 14px 15px;
      font-size: .8rem;
    }

    .advanced-panel summary::after { top: 8px; right: 15px; }

    .advanced-inner {
      padding: 4px 15px 16px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }

    .advanced-note {
      grid-column: 1 / -1;
      margin: 0;
      color: #657183;
      font-size: .72rem;
    }

    .field > .advanced-note { margin-top: 7px; }

    .advanced-note a { color: #744600; font-weight: 800; text-underline-offset: 2px; }

    .tandem-result-panel {
      background:
        radial-gradient(circle at 88% 12%, rgba(255,177,27,.12), transparent 29%),
        var(--navy);
    }

    .result-status {
      width: fit-content;
      margin-bottom: 12px;
      padding: 7px 10px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 999px;
      font-size: .69rem;
      font-weight: 900;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

    .result-status.ok { color: #b9f0db; background: rgba(20,129,90,.2); border-color: rgba(97,210,162,.3); }
    .result-status.warn { color: #ffe1a2; background: rgba(212,123,0,.18); border-color: rgba(255,177,27,.3); }
    .result-status.bad { color: #ffc1c1; background: rgba(180,59,59,.18); border-color: rgba(255,123,123,.28); }

    .copy-fallback {
      position: fixed;
      opacity: 0;
      pointer-events: none;
    }

    .tandem-visual {
      margin: 22px 0;
      padding: 18px 16px 13px;
      background: rgba(255,255,255,.045);
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 15px;
    }

    .visual-instruction {
      margin-bottom: 13px;
      color: var(--orange);
      font-size: .78rem;
      font-weight: 900;
      text-align: center;
      letter-spacing: .03em;
    }

    .rig-diagram {
      display: grid;
      grid-template-columns: 74px 1fr;
      align-items: end;
      gap: 5px;
    }

    .tractor-shape {
      height: 47px;
      display: grid;
      place-items: center;
      color: #0b1422;
      background: var(--orange);
      border-radius: 13px 5px 5px 8px;
      font-size: .6rem;
      font-weight: 950;
    }

    .trailer-shape {
      position: relative;
      height: 54px;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 4px 9px 4px 4px;
    }

    .trailer-rail {
      position: absolute;
      right: 8px;
      bottom: 8px;
      left: 8px;
      height: 4px;
      background: repeating-linear-gradient(90deg, #7d8b9d 0 5px, transparent 5px 10px);
    }

    .tandem-marker {
      position: absolute;
      bottom: -10px;
      left: 68%;
      width: 30px;
      height: 13px;
      border-inline: 8px solid #fff;
      transition: left .22s ease;
    }

    .tandem-visual[data-direction="forward"] .tandem-marker { left: 42%; }
    .tandem-visual[data-direction="back"] .tandem-marker { left: 82%; }

    .diagram-scale {
      margin-top: 13px;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      color: #9eabbc;
      font-size: .61rem;
      font-weight: 800;
      text-transform: uppercase;
    }

    .weight-compare {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .weight-card {
      padding: 14px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 13px;
    }

    .weight-card h4 {
      margin: 0 0 9px;
      color: #9eabbc;
      font-size: .67rem;
      letter-spacing: .07em;
      text-transform: uppercase;
    }

    .weight-row {
      padding: 6px 0;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      border-bottom: 1px solid rgba(255,255,255,.07);
      font-size: .76rem;
    }

    .weight-row:last-child { border-bottom: 0; }
    .weight-row span { color: #aab6c5; }
    .weight-row strong { color: #fff; }
    .weight-row strong.over { color: #ffaaaa; }
    .weight-row strong.legal { color: #a8e8ce; }

    .warning-list {
      margin: 17px 0 0;
      padding: 0;
      display: grid;
      gap: 7px;
      list-style: none;
    }

    .warning-list li {
      position: relative;
      padding-left: 18px;
      color: #bec9d5;
      font-size: .75rem;
    }

    .warning-list li::before {
      content: "•";
      position: absolute;
      left: 3px;
      color: var(--orange);
      font-weight: 950;
    }

    .result-actions {
      margin-top: 18px;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .result-panel .button-quiet {
      color: #fff;
      background: rgba(255,255,255,.07);
      border-color: rgba(255,255,255,.15);
    }

    .result-panel .share-button {
      color: var(--ink);
      background: var(--orange);
      border-color: var(--orange);
    }

    .result-panel .share-button:hover { background: #ffc148; }

    .home-screen-hint {
      width: min(var(--content), calc(100% - 40px));
      margin: 0 auto 36px;
      color: var(--ink);
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: 0 12px 34px rgba(12,25,43,.08);
    }

    .home-screen-hint summary {
      padding: 15px 48px 15px 17px;
      position: relative;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      list-style: none;
    }

    .home-screen-hint summary::-webkit-details-marker { display: none; }

    .home-screen-hint summary::after {
      content: "+";
      position: absolute;
      top: 50%;
      right: 19px;
      color: var(--orange-deep);
      font-size: 1.25rem;
      font-weight: 900;
      transform: translateY(-50%);
    }

    .home-screen-hint[open] summary::after { content: "−"; }

    .home-screen-badge {
      width: 34px;
      height: 34px;
      flex: 0 0 34px;
      display: grid;
      place-items: center;
      color: var(--ink);
      background: var(--orange);
      border-radius: 10px;
      font-weight: 950;
    }

    .home-screen-hint strong { display: block; font-size: .88rem; }
    .home-screen-hint small { display: block; margin-top: 1px; color: #657183; font-size: .72rem; }

    .home-screen-copy {
      padding: 0 18px 16px 64px;
      color: var(--ink-soft);
      font-size: .8rem;
    }

    .home-screen-copy p { margin: 0; }
    .home-screen-copy p + p { margin-top: 5px; color: #657183; font-size: .72rem; }

    .schedule-wrap {
      margin-top: 18px;
      overflow-x: auto;
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 13px;
    }

    .schedule-table {
      width: 100%;
      min-width: 490px;
      border-collapse: collapse;
      font-size: .75rem;
    }

    .schedule-table th,
    .schedule-table td {
      padding: 10px 11px;
      text-align: right;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .schedule-table th:first-child,
    .schedule-table td:first-child { text-align: left; }

    .schedule-table th {
      color: #9eabbc;
      background: rgba(255,255,255,.04);
      font-size: .65rem;
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .schedule-table tbody tr:last-child td { border-bottom: 0; }

    .alt-section {
      width: 100%;
      background: #ebeef1;
      border-block: 1px solid #d9dee5;
    }

    .compact-callout {
      margin-top: 22px;
      padding: 15px 16px;
      display: flex;
      gap: 12px;
      color: #5f4a1f;
      background: #fff8e8;
      border: 1px solid #f0d893;
      border-radius: 13px;
      font-size: .8rem;
    }

    .callout-icon {
      width: 25px;
      height: 25px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      color: #6c4b00;
      background: var(--orange);
      border-radius: 8px;
      font-size: .78rem;
      font-weight: 950;
    }

    .content-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 18px;
    }

    .content-card {
      padding: 24px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
    }

    .content-card h3 {
      margin-bottom: 8px;
      font-size: 1rem;
      letter-spacing: -.02em;
    }

    .content-card p {
      margin-bottom: 0;
      color: var(--ink-soft);
      font-size: .84rem;
    }

    .faq-list { display: grid; gap: 12px; }

    details {
      padding: 18px 20px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 14px;
    }

    summary {
      position: relative;
      padding-right: 30px;
      cursor: pointer;
      list-style: none;
      font-weight: 850;
    }

    summary::-webkit-details-marker { display: none; }
    summary::after {
      content: "+";
      position: absolute;
      top: -3px;
      right: 0;
      color: var(--orange-deep);
      font-size: 1.3rem;
      font-weight: 700;
    }

    details[open] summary::after { content: "−"; }
    details p { margin: 12px 0 0; color: var(--ink-soft); font-size: .87rem; }

    .site-footer {
      color: #b7c1ce;
      background: var(--navy);
    }

    .footer-inner {
      width: min(var(--content), calc(100% - 32px));
      margin-inline: auto;
      padding: 42px 0;
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 28px;
      align-items: end;
    }

    .footer-copy { max-width: 680px; font-size: .8rem; }
    .footer-copy strong { display: block; margin-bottom: 7px; color: #fff; font-size: 1rem; }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 16px;
      font-size: .78rem;
      font-weight: 750;
    }

    .footer-links a:hover { color: var(--orange); }

    .copyright {
      grid-column: 1 / -1;
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, .12);
      color: #8794a5;
      font-size: .74rem;
    }

    .toast {
      position: fixed;
      z-index: 500;
      right: 18px;
      bottom: 18px;
      max-width: calc(100% - 36px);
      padding: 12px 15px;
      color: #fff;
      background: var(--green);
      border-radius: 11px;
      box-shadow: 0 14px 40px rgba(0,0,0,.22);
      font-size: .82rem;
      font-weight: 800;
      opacity: 0;
      pointer-events: none;
      transform: translateY(12px);
      transition: opacity .18s ease, transform .18s ease;
    }

    .toast.show { opacity: 1; transform: translateY(0); }

    @media (max-width: 900px) {
      .nav-links a:not(:last-child) { display: none; }
      .hero-inner { grid-template-columns: 1fr; gap: 36px; padding-top: 58px; }
      .hero-panel { max-width: 620px; }
      .calculator-shell { grid-template-columns: 1fr; }
      .result-panel { border-top: 1px solid var(--line-dark); border-left: 0; }
      .content-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 620px) {
      .nav-wrap { height: 64px; }
      .brand { font-size: .92rem; }
      .brand-mark { width: 34px; height: 34px; }
      .nav-links a:last-child { padding-inline: 9px; font-size: .77rem; }
      .hero-inner { min-height: 0; padding: 50px 0 46px; }
      h1 { font-size: clamp(2.65rem, 15vw, 4.2rem); }
      .hero-panel { padding: 16px; border-radius: 20px; }
      .trust-inner { grid-template-columns: 1fr; gap: 10px; }
      .trust-item { justify-content: flex-start; }
      .section { padding: 48px 0; }
      .field-grid { grid-template-columns: 1fr; }
      .field-full { grid-column: auto; }
      .advanced-panel { grid-column: auto; }
      .advanced-inner { grid-template-columns: 1fr; }
      .result-grid { grid-template-columns: 1fr 1fr; }
      .weight-compare { grid-template-columns: 1fr; }
      .ad-slot { min-height: 74px; margin-block: 24px; }
      .home-screen-hint { width: calc(100% - 24px); }
      .home-screen-copy { padding-left: 18px; }
      .footer-inner { grid-template-columns: 1fr; align-items: start; }
      .footer-links { justify-content: flex-start; }
    }

    @media (max-width: 400px) {
      .result-grid { grid-template-columns: 1fr; }
      .hero-actions .button { width: 100%; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
    }

    @media print {
      .site-header, .hero, .trust-strip, .ad-slot, .form-panel, .result-actions, .home-screen-hint, .site-footer, #guide, #faq { display: none !important; }
      body, main, .alt-section { background: #fff; }
      .section { padding: 16px 0; }
      .calculator-shell { display: block; box-shadow: none; }
      .result-panel { color: #000; background: #fff; }
      .result-hero, .result-stat-value { color: #000; }
      .result-caption, .result-stat-label, .result-note { color: #333; }
    }
  

/* Shared page architecture */
body{min-width:0}.site-header{position:sticky;top:0;z-index:100;background:#0b1422}.nav-wrap{height:auto;min-height:64px}.brand{min-height:44px}.desktop-nav{display:flex;gap:2px;align-items:center}.desktop-nav a,.mobile-menu a{display:flex;align-items:center;min-height:44px;padding:8px 10px;color:#d7dfeb;text-decoration:none;font-size:.86rem;font-weight:780}.desktop-nav a:hover,.desktop-nav a:focus-visible,.mobile-menu a:hover,.mobile-menu a:focus-visible{color:#fff;background:rgba(255,255,255,.08);border-radius:9px}.mobile-toggle{display:none;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px 11px;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.35);border-radius:10px;font:inherit;font-weight:800}.mobile-menu{display:grid;width:min(1180px,calc(100% - 24px));margin:0 auto;padding:0 0 12px}.mobile-menu[hidden]{display:none}.mobile-menu a{border-top:1px solid rgba(255,255,255,.12)}
.page-hero{padding:28px 16px 24px;color:#fff;background:linear-gradient(135deg,#0b1422,#173252)}.page-hero>div,.page-content,.site-footer-inner{width:min(960px,calc(100% - 24px));margin:auto}.page-hero h1{max-width:850px;margin:0;font-size:clamp(2rem,6vw,3.5rem);line-height:1.04;letter-spacing:-.04em}.page-hero .lede{max-width:760px;margin:10px 0 0;color:#d5deea;font-size:1rem}.page-content{padding:28px 0 56px}.article{padding:clamp(22px,5vw,46px);background:#fff;border:1px solid #dfe4ea;border-radius:18px;box-shadow:0 14px 35px rgba(12,25,43,.07)}.article h2{margin:2em 0 .55em;font-size:clamp(1.4rem,4vw,2rem);line-height:1.16;letter-spacing:-.025em}.article h2:first-child{margin-top:0}.article p,.article li{max-width:760px}.article li+li{margin-top:.45em}.article a{color:#8a4f00}.article .author{margin-top:28px;color:#536173;font-size:.94rem}.callout{margin:26px 0;padding:17px 19px;background:#fff5dd;border-left:5px solid #ffb11b;border-radius:10px}.source-list{margin-top:28px;padding:18px 20px;background:#f4f7fa;border-radius:12px}.source-list h2{margin-top:0;font-size:1.2rem}.related-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.related-links a,.tool-cta{display:inline-flex;align-items:center;min-height:44px;padding:9px 14px;color:#0b1422;background:#ffb11b;border-radius:10px;text-decoration:none;font-weight:850}
.calculator-section{width:min(1180px,calc(100% - 24px));padding:24px 0 42px}.calculator-section .section-heading{margin-bottom:18px}.calculator-section .section-heading h2{font-size:clamp(1.35rem,4vw,2rem)}.calculator-article{width:min(900px,calc(100% - 24px));margin:0 auto 60px}.calculator-article .article{box-shadow:none}.result-panel[hidden]{display:none!important}.result-status{max-width:max-content}.button-small,.info-popover summary,.mobile-toggle{min-height:44px}.info-popover summary{width:44px;height:44px}.result-actions .button{min-height:44px}
.home-hero{padding:52px 16px 46px}.home-hero .home-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.home-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.home-card{display:flex;flex-direction:column;padding:22px;background:#fff;border:1px solid #dfe4ea;border-radius:16px;box-shadow:0 8px 24px rgba(12,25,43,.06)}.home-card h2,.home-card h3{margin:0 0 8px;line-height:1.2}.home-card p{margin:0 0 18px;color:#526174}.home-card a{margin-top:auto;font-weight:850}.home-section{margin-bottom:42px}.home-section>h2{margin-bottom:6px}.home-section>.section-intro{margin-top:0;color:#526174}.experience-strip{padding:22px;border-radius:16px;background:#0b1422;color:#fff}.experience-strip p{margin:4px 0;color:#d5deea}
.guide-index-group{margin-top:32px}.guide-index-group h2{margin-bottom:12px}.guide-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.guide-list article{padding:18px;background:#f4f7fa;border:1px solid #dfe4ea;border-radius:12px}.guide-list h3{margin:0 0 6px;font-size:1.08rem}.guide-list p{margin:0}.direction-grid,.platform-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0}.direction-grid>div,.platform-row>div{padding:17px;background:#f4f7fa;border:1px solid #dfe4ea;border-radius:12px}.direction-grid span,.direction-grid small,.platform-row span,.platform-row small{display:block}.direction-grid span{margin-top:6px;color:#8a4f00;font-weight:850}.scale-diagram{margin:26px 0;padding:18px;background:#eef3f8;border:1px solid #ccd6e2;border-radius:15px}.scale-diagram figcaption{font-weight:900}.scale-diagram .platform-row{grid-template-columns:repeat(3,minmax(0,1fr));margin:14px 0 10px}.platform-row>div{position:relative;padding-top:27px;text-align:center;background:#fff;border-bottom:7px solid #60758d}.platform-row span{color:#657386;font-size:.78rem;font-weight:850;text-transform:uppercase;letter-spacing:.06em}.scale-diagram>p{margin:0;text-align:center;color:#526174;font-size:.9rem}
.site-footer{position:relative;width:100%;padding:34px 16px;background:#0b1422;color:#d7dfeb}.site-footer:before{content:none}.site-footer-inner{display:grid;grid-template-columns:1fr auto;gap:22px}.site-footer p{margin:5px 0;color:#b9c5d4}.footer-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}.footer-links a{display:flex;align-items:center;min-height:44px;padding:7px 9px;color:#fff}.site-footer small{grid-column:1/-1;color:#b9c5d4}
@media(max-width:900px){.desktop-nav{display:none}.mobile-toggle{display:inline-flex}.calculator-shell{grid-template-columns:1fr}.result-panel{border-left:0;border-top:1px solid var(--line-dark)}}
@media(max-width:620px){.page-hero{padding:22px 12px 19px}.page-hero h1{font-size:clamp(2rem,10vw,2.75rem)}.page-content{padding-top:20px}.home-hero{padding:36px 12px 32px}.home-grid,.guide-list,.direction-grid,.scale-diagram .platform-row{grid-template-columns:1fr}.article{padding:21px;border-radius:14px}.calculator-section{padding-top:18px}.calculator-section .section-heading p{font-size:.95rem}.site-footer-inner{grid-template-columns:1fr}.footer-links{justify-content:flex-start}.footer-links a{padding-left:0;padding-right:14px}}
@media(max-width:400px){.home-actions .button,.related-links a,.tool-cta{width:100%;justify-content:center}.result-grid{grid-template-columns:1fr}}
@media print{.site-header,.page-hero,.form-panel,.result-actions,.calculator-article,.site-footer{display:none!important}.calculator-section{width:100%;padding:0}.calculator-shell{display:block}.result-panel{border:0!important;box-shadow:none!important}}