/* Full approved mockup for salary tools. New presentation is invisible below desktop. */
.salary-dashboard, .mockup-input-intro { display: none; }
@media (min-width: 1024px) {
  .full-salary-mockup .premium-results > :not(.salary-dashboard):not(.rich-preserve-extra) { display: none !important; }
  .full-salary-mockup .salary-dashboard { display: block; margin: 0 !important; color: #07143c; }
  .full-salary-mockup .premium-input-card { padding: 26px !important; }
  .full-salary-mockup .premium-input-title { font-size: 25px; margin-bottom: 0; gap: 14px; }
  .full-salary-mockup .premium-input-title::before { content: ''; background: #e6efff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231948ff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8V5a2 2 0 0 1 2-2h10v5M5 8h14a2 2 0 0 1 2 2v10H5a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2ZM21 12h-6v5h6'/%3E%3C/svg%3E") center/30px no-repeat; }
  .full-salary-mockup .mockup-input-intro { display: block; color: #7284a4; font-size: 13px; line-height: 1.5; margin: 4px 0 22px 68px !important; }
  .full-salary-mockup .premium-input-card p.leading-loose { font-size: 0; line-height: 0; }
  .full-salary-mockup .premium-input-card p.leading-loose::before { content: 'Annual salary'; display: block; font-size: 12px; line-height: 1.5; font-weight: 700; color: #334568; text-transform: uppercase; letter-spacing: .02em; }
  .full-salary-mockup .premium-input-card .inline-flex input[type="number"] { height: 50px; font-size: 16px; }
  .full-salary-mockup .premium-input-card label { font-size: 12px; font-weight: 700; color: #334568; text-transform: uppercase; letter-spacing: .02em; } .full-salary-mockup .premium-input-card label:has(input[type="checkbox"]) { text-transform: none; letter-spacing: 0; font-size: 13px; }
  .full-salary-mockup .premium-input-card .space-y-1\.5:has(.freq-btn) { display: none; }
  .full-salary-mockup .premium-input-card #calculateBtn { font-size: 14px; margin-top: 18px; }
  .full-salary-mockup .premium-input-card .precision-slider { margin-block: 12px 8px; }
  .mockup-hero { position: relative; overflow: hidden; background: radial-gradient(ellipse at 100% 10%, #174bcc 0, transparent 62%), linear-gradient(125deg, #001331, #05265e); padding: 26px 22px 18px; border-radius: 24px; color: #fff; box-shadow: 0 10px 25px #123d8118; }
  .mockup-hero::before { content: ''; position: absolute; width: 85%; height: 160px; right: -100px; top: -15px; border-radius: 50%; background: #081b5f; opacity: .48; transform: rotate(-26deg); }
  .mockup-hero-copy { position: relative; z-index: 1; padding-right: 150px; }
  .mockup-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #afcfff; }
  .mockup-hero h2 { font-size: clamp(34px, 3.4vw, 51px); font-weight: 800; line-height: 1.15; letter-spacing: -1.5px; margin: 12px 0; color: white; overflow-wrap: anywhere; }
  .mockup-description { font-size: 12px; line-height: 1.5; color: #b5c9eb; }
  .mockup-coins { position: absolute; width: 185px; height: auto; right: 6px; top: 0; pointer-events: none; }
  .mockup-periods { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin-top: 22px; }
  .mockup-period { display: flex; align-items: center; gap: 8px; border-radius: 16px; background: #204a894f; border: 1px solid #638fda35; padding: 12px 9px; min-width: 0; }
  .mockup-period p { color: #bad5ff; text-transform: uppercase; letter-spacing: .04em; font-size: 9px; font-weight: 700; margin-bottom: 4px; }
  .mockup-period strong { font-size: 19px; line-height: 1.2; overflow-wrap: anywhere; }
  .mockup-period > div { min-width: 0; }
  .mockup-calendar { display: grid; place-items: center; flex: 0 0 31px; height: 34px; border-radius: 10px; background: #2659d6; }
  .mockup-calendar svg { width: 20px; height: 20px; }
  .period-monthly { background: #08777840; border-color: #43b5c433; }
  .period-monthly .mockup-calendar { background: #0c8091; }
  .period-weekly { background: #5746bc45; border-color: #8870ee40; }
  .period-weekly .mockup-calendar { background: #5838d4; }
  .period-daily .mockup-calendar { background: #395b88; }
  .mockup-daily-note { font-size: 9px; margin-top: 9px; color: #a5bddf; position: relative; }
  .mockup-lower { display: grid; grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr); gap: 12px; margin-top: 16px; }
  .mockup-breakdown, .mockup-rate, .mockup-chart-card { background: #fff; border: 1px solid #e4edff; border-radius: 23px; box-shadow: 0 8px 22px #164d9408; }
  .mockup-breakdown { padding: 22px 18px; }
  .mockup-breakdown h2 { font-size: 23px; font-weight: 800; line-height: 1.2; letter-spacing: -.5px; }
  .mockup-subtitle { font-size: 12px; color: #7284a4; margin-top: 5px; }
  .mockup-rows { margin-top: 16px; }
  .mockup-row { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 9px; align-items: center; min-height: 63px; border-bottom: 1px solid #edf2fb; }
  .mockup-row:last-child { border: 0; }
  .mockup-row-icon { width: 34px; height: 36px; display: grid; place-items: center; border-radius: 10px; grid-row: span 2; }
  .mockup-row-icon svg { width: 22px; height: 22px; }
  .mockup-row-label { font-size: 11px; line-height: 1.4; }
  .mockup-row strong { font-size: 12px; overflow-wrap: anywhere; }
  .mockup-share { grid-column: 3; text-align: right; font-size: 10px; color: #677995; margin-top: -14px; }
  .colour-tax { color: #ef3e47; background: #ffeded; }
  .colour-ni { color: #218aff; background: #eaf1ff; }
  .colour-pension { color: #843bff; background: #f0e8ff; }
  .colour-loan { color: #ff971b; background: #fff2e5; }
  .colour-take { color: #17b765; background: #e6f8ed; }
  .mockup-right { display: grid; gap: 12px; align-content: start; }
  .mockup-rate { padding: 12px; }
  .mockup-rate-inner { display: flex; align-items: center; gap: 12px; padding: 16px 12px; border-radius: 16px; background: linear-gradient(120deg, #edfaf5, #e6faf9); }
  .mockup-pound { width: 47px; height: 47px; flex: 0 0 47px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg,#1bd675,#00a449); color: white; font-size: 27px; font-weight: 700; box-shadow: 0 0 0 9px #c9f4e4; margin: 0 6px; }
  .mockup-rate h3 { font-size: 12px; font-weight: 700; line-height: 1.4; }
  .mockup-rate strong { display: block; font-size: 28px; font-weight: 800; line-height: 1.2; margin: 5px 0; }
  .mockup-rate p { font-size: 10px; color: #527090; }
  .mockup-info { display: inline-grid; place-items: center; width: 13px; height: 13px; border: 1.5px solid #7284a4; border-radius: 50%; color: #7284a4; font-size: 9px; margin-left: 4px; }
  .mockup-chart-card { padding: 18px 15px; }
  .mockup-chart-card h3 { font-size: 15px; font-weight: 800; }
  .mockup-chart-layout { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; align-items: center; }
  .mockup-donut { flex: 0 0 auto; width: 140px; height: 140px; border-radius: 50%; padding: 24px; display: grid; place-items: center; background: #e5ebf3; }
  .mockup-donut-hole { width: 100%; height: 100%; background: white; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 5px; }
  .mockup-donut-hole strong { font-size: 15px; overflow-wrap: anywhere; max-width: 100%; }
  .mockup-donut-hole span { font-size: 10px; color: #527090; margin-top: 3px; }
  .mockup-legend { width: 100%; display: grid; gap: 9px; }
  .mockup-legend > div { display: grid; grid-template-columns: 11px minmax(0,1fr) auto; gap: 7px; align-items: center; font-size: 10px; color: #527090; }
  .mockup-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
  .mockup-chart-note { font-size: 11px; color: #7284a4; margin-top: 10px; }
}
@media (min-width: 1280px) {
  .mockup-row { grid-template-columns: 34px minmax(0,1fr) auto auto; gap: 8px; }
  .mockup-row-icon { grid-row: auto; }
  .mockup-share { grid-column: auto; margin-top: 0; }
  .mockup-chart-layout { flex-direction: row; gap: 10px; }
  .mockup-donut { width: 112px; height: 112px; padding: 20px; }
  .mockup-donut-hole strong { font-size: 13px; }
  .mockup-legend { flex: 1; min-width: 0; }
}
@media (min-width: 1600px) {
  .mockup-chart-layout { flex-direction: row; }
  .mockup-donut { width: 135px; height: 135px; padding: 22px; }
}