/* PrintCost Studio — polished tool-first UI. No animation packages or network assets. */
:root{--finish-line:#e0e8f3;--finish-ink:#132845;--finish-muted:#60718b}
html{scroll-padding-top:92px}
body{background:#f5f7fb;color:var(--finish-ink)}
.container{max-width:1230px}
.hero{padding-top:29px;padding-bottom:15px}
.hero:after{opacity:.45}
.hero h1{font-size:clamp(39px,4.15vw,54px);letter-spacing:-2.5px;margin:12px 0}
.hero p{max-width:690px;font-size:15px;line-height:1.7}
.hero-bullets{margin-top:13px}
.hero-bullets span{font-size:12px;color:#526784}
.workspace-head{margin-top:22px;margin-bottom:12px}
.workspace-grid{gap:20px}
.panel{border-color:var(--finish-line);box-shadow:0 8px 32px rgba(27,53,92,.055)}
.panel-top{padding:22px 25px 12px}
.form-section{padding:17px 25px 24px}
.form-panel .scenario-bar{margin:0 25px 10px;padding:12px}
.scenario-label,.scenario-note{font-size:11px;letter-spacing:.03em}
.scenario-button{font-size:12px;min-height:40px;padding:8px 10px}
.mode-button{font-size:13px;min-height:42px}
.field label{font-size:13px;line-height:1.45}
.field-hint{font-size:12px;line-height:1.5}
.field .unit{font-size:12px}
.field input{height:48px;font-size:16px}
.form-title{font-size:15px}
.details-section summary{font-size:14px}
.details-section summary .advanced-meta{font-size:12px}
.form-footer{padding:15px 25px}
.result-panel{background:#fff;color:var(--finish-ink);border:1px solid #d7e3f2;overflow:hidden;box-shadow:0 19px 48px rgba(25,55,94,.10)}
.result-top{background:radial-gradient(circle at 98% 0,rgba(69,138,232,.22),transparent 65%),linear-gradient(155deg,#18395f,#112947);padding:23px 26px 20px;color:#fff}
.result-top:after{opacity:.55}
.result-focus{padding-top:16px}
.result-number{font-size:clamp(40px,3.8vw,52px)}
.result-metrics{margin-top:18px;padding-top:14px}
.metric-value{font-size:21px}
.quote-settings{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 25px 13px;border-bottom:1px solid var(--finish-line);background:#f6f9fe}
.quote-settings-copy{min-width:0;display:grid;gap:4px}
.quote-settings-copy span{font-size:11px;letter-spacing:.045em;text-transform:uppercase;font-weight:780;color:#6e8098}
.quote-settings-copy strong{font-size:13px;line-height:1.45;color:#25436b;font-variant-numeric:tabular-nums}
.inline-edit-pricing{appearance:none;flex-shrink:0;border:1px solid #bcd1ee;background:#fff;border-radius:9px;padding:9px 11px;font-size:12px;font-weight:770;color:#1b58b9;cursor:pointer;transition:background .18s ease,border-color .18s ease,transform .18s ease}
.inline-edit-pricing:hover{background:#eaf3ff;border-color:#8bb1e8;transform:translateY(-1px)}
.inline-edit-pricing:focus-visible{outline:3px solid #7eaeff;outline-offset:2px}
.result-body{padding:17px 25px 21px;color:var(--finish-ink)}
.result-body h3{color:#304c70;font-size:13px;margin-bottom:12px}
.cost-bar{background:#e4eaf3;height:10px}
.cost-insight{margin:13px 0 4px;background:#eef5ff;border:1px solid #d7e6fd;color:#375778;font-size:12px;line-height:1.55}
.insight-symbol{background:#d9e9ff;color:#2f68c7}
.breakdown-list{margin-top:13px}
.breakdown-list li{color:#526984;font-size:12px;margin:9px 0}
.breakdown-list b{color:#1c3451;font-size:12px}
.result-divider{background:#e0e8f3;margin:15px 0}
.extra-stats{gap:10px}
.extra-stats small{color:#6b809d;font-size:11px}
.extra-stats strong{color:#1c3451;font-size:16px}
.result-button{border:1px solid #cfdded;background:#f6f9fe;color:#1c467d;font-size:12px;min-height:42px}
.result-button:hover{background:#eaf2ff}
.result-button.primary{background:#1b61db;color:#fff;border-color:#1b61db}
.result-button.primary:hover{background:#0e50bf}
.result-button:focus-visible,.mobile-estimate a:focus-visible{outline:3px solid #7eaeff;outline-offset:2px}
.toast{color:#0f766e;font-size:12px}
.disclaimer{padding:13px 0 0;background:none;color:#6f8096;font-size:11px;border-top:1px solid #e5edf6;line-height:1.55}
.result-alert{color:#9c1f32;background:#fff4f6;border-color:#ffcbd2}
.info-card p,.related-link p{font-size:13px}
.faq p,.section-lead{font-size:14px}
.long-section{margin-top:66px}
/* Avoid hiding important indexable content until an animation observer fires. */
.motion-ready .long-section,.motion-ready .info-card{opacity:1;transform:none}
.motion-ready .long-section.in-view,.motion-ready .info-card.in-view{opacity:1;transform:none}
/* Animate only the live value, not layout or giant shadows. */
.result-number,.mobile-estimate-value{will-change:auto}
@media(min-width:931px){.workspace-grid{grid-template-columns:minmax(0,1.08fr) minmax(355px,.92fr)}.result-panel{top:85px}}
@media(min-width:621px) and (max-height:810px){.result-panel{position:static}}
@media(max-width:930px){.result-panel{position:static}.quote-settings{padding:14px 22px}}
@media(max-width:620px){
 html{scroll-padding-top:75px}
 .hero{padding:22px 0 13px}
 .hero h1{font-size:clamp(35px,9vw,42px);letter-spacing:-1.6px}
 .hero p{font-size:14px}
 .hero-bullets span{font-size:11px}
 .form-panel .scenario-bar{margin:0 16px 12px;padding:12px}
 .scenario-label,.scenario-note{font-size:10px}
 .scenario-button{font-size:11px;min-height:47px}
 .field label{font-size:13px}
 .field-hint{font-size:11.5px}
 .field input{font-size:16px}
 .mobile-estimate{top:66px;box-shadow:0 8px 18px rgba(19,62,130,.10)}
 /* On active number input, free the visible viewport rather than covering input labels. */
 .mobile-input-active .mobile-estimate{position:relative;top:auto;z-index:auto;box-shadow:none}
 .mobile-estimate a{font-size:11px}
 .quote-settings{padding:13px 17px}
 .quote-settings-copy strong{font-size:12px}
 .inline-edit-pricing{padding:10px 9px;font-size:11px;min-height:42px}
 .result-top{padding:22px 20px 20px}
 .result-body{padding:19px 20px 22px}
 .result-button{font-size:12px}
 .info-card{padding:20px}
 .form-section{padding:17px 18px 23px}
 .form-panel .scenario-bar{overflow:hidden}
 .scenario-options{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){.inline-edit-pricing{transition:none!important}.result-number,.mobile-estimate-value{animation:none!important}}
@media print{.quote-settings{display:none!important}}

/* V4: The unscoped desktop grid in polish.css was overriding the responsive
   grid defined earlier in site.css. Guard the real calculator task on tablets
   and phones: one usable column, with inputs before the full results panel. */
@media (max-width: 930px) {
  .workspace .workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 16px;
  }
  .workspace .workspace-grid > .form-panel,
  .workspace .workspace-grid > .result-panel {
    grid-column: 1;
    min-width: 0;
    width: 100%;
  }
  .workspace .workspace-grid > .form-panel { grid-row: 1; }
  .workspace .workspace-grid > .result-panel { grid-row: 2; }
  .scenario-options { min-width: 0; }
}
@media (max-width: 620px) {
  .workspace-head { margin-top: 17px; }
  .workspace .workspace-grid { gap: 18px; }
  .form-panel .scenario-options { width: 100%; }
  .form-panel .scenario-button { min-width: 0; white-space: normal; }
  .workspace .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .workspace .field { min-width: 0; }
  .workspace .field-control { min-width: 0; }
  .workspace .field input { width: 100%; min-width: 0; }
  .workspace .mobile-estimate { position: sticky; top: 12px; }
  .workspace .mobile-input-active .mobile-estimate { position: relative; top: auto; }
  .workspace .result-metrics { gap: 10px; }
  .workspace .metric-value { font-size: 20px; }
}
@media (max-width: 360px) {
  .workspace .form-grid { gap: 15px 9px; }
  .workspace .field label { font-size: 12px; }
  .workspace .quote-settings { align-items: flex-start; }
}

/* Keep the summary in the same layout mode while editing. Switching sticky
   to relative during focus/blur moved the reset button mid-click on phones. */
@media (max-width: 620px) {
  .workspace .mobile-input-active .mobile-estimate {
    position: sticky;
    top: 12px;
    visibility: hidden;
    pointer-events: none;
    box-shadow: none;
  }
}

/* Accessible skip navigation; invisible until keyboard focus */
.skip-link{position:fixed;z-index:10000;top:8px;left:8px;transform:translateY(-180%);background:#fff;color:#123e77;border:2px solid #1b61db;border-radius:8px;padding:12px 16px;font-size:15px;font-weight:700;box-shadow:0 8px 24px #102f4f33}
.skip-link:focus-visible{transform:translateY(0);outline:3px solid #76a8ff;outline-offset:2px}

/* GEO: readable, visible, text-first answers; no special AI-only rendering. */
.geo-answer{border:1px solid #d9e6f6;background:#f9fbff;border-radius:14px;padding:18px 22px;margin:18px 0 24px;max-width:100%;color:#243d59}
.geo-answer .geo-eyebrow{font-size:10px;font-weight:800;letter-spacing:.11em;color:#54729b;margin:0 0 7px}
.geo-answer h2{font-size:clamp(18px,2vw,22px);font-weight:760;letter-spacing:-.015em;color:#16365d;margin:0 0 8px;line-height:1.3}
.geo-answer p{font-size:14px;line-height:1.7;margin:0 0 8px}
.geo-answer .geo-proof{color:#435d7a;border-top:1px solid #e0eaf7;padding-top:10px;margin-top:12px}
.geo-answer .geo-source{margin:9px 0 0;color:#55718f;font-size:12px}
.geo-answer a,.geo-method-article a{color:#175eae;text-decoration:underline;text-underline-offset:2px}
.geo-method-article{max-width:840px}
.geo-method-article .geo-answer{margin-top:20px}
.geo-method-article table{margin:20px 0}
@media(max-width:620px){.geo-answer{padding:15px 16px;margin:14px 0 20px}.geo-answer h2{font-size:18px}.geo-answer p{font-size:13px}.geo-method-article{overflow-wrap:anywhere}}