/* THE KITCHEN & BATH PRICE SCALE
   Aesthetic: industrial measuring instrument. Bone paper, ink rules,
   monospace numerals, one signal orange. Reads in direct sun on a job site. */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&display=swap');

:root {
  --paper:      #EDE9E0;
  --paper-2:    #E3DED2;
  --ink:        #16150F;
  --ink-60:     rgba(22, 21, 15, .60);
  --ink-38:     rgba(22, 21, 15, .38);
  --ink-16:     rgba(22, 21, 15, .16);
  --ink-08:     rgba(22, 21, 15, .08);
  --signal:     #D9420B;
  --signal-dim: rgba(217, 66, 11, .12);
  --steel:      #3D5A73;
  --rule:       1px solid var(--ink-16);
  --rule-hard:  2px solid var(--ink);
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, monospace;
  --body:    'IBM Plex Sans', system-ui, sans-serif;
  --pad: clamp(20px, 5vw, 44px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* faint engineering grid, the paper this is printed on */
  background-image:
    linear-gradient(var(--ink-08) 1px, transparent 1px),
    linear-gradient(90deg, var(--ink-08) 1px, transparent 1px);
  background-size: 28px 28px;
}
body::after {  /* paper grain */
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 999; opacity: .30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* ── chrome ─────────────────────────────────────────────── */
.masthead {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: baseline; gap: 12px;
  padding: 12px var(--pad);
  border-bottom: var(--rule-hard);
  background: var(--paper);
}
.masthead h1 {
  font-family: var(--display); font-weight: 700; font-size: 19px;
  letter-spacing: .10em; text-transform: uppercase; white-space: nowrap;
}
.masthead .rule { flex: 1; height: 1px; background: var(--ink-16); }
.masthead .step { font-family: var(--mono); font-size: 11px; color: var(--ink-60); letter-spacing: .08em; }

.progress { position: sticky; top: 45px; z-index: 39; height: 3px; background: var(--ink-08); }
.progress i { display: block; height: 100%; background: var(--signal); width: 0; transition: width .5s cubic-bezier(.2,.8,.2,1); }

main { padding: var(--pad); padding-bottom: 140px; max-width: 720px; margin: 0 auto; }

/* ── typography ─────────────────────────────────────────── */
.eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--signal); margin-bottom: 14px;
}
h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(34px, 8vw, 58px); line-height: .95;
  letter-spacing: -.01em; text-transform: uppercase; margin-bottom: 16px;
}
h3 {
  font-family: var(--display); font-weight: 600; font-size: 22px;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px;
}
p { color: var(--ink-60); max-width: 58ch; }
p + p { margin-top: 12px; }
strong { color: var(--ink); font-weight: 600; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: 'zero' 1; }

/* ── screens ────────────────────────────────────────────── */
.screen { display: none; animation: rise .45s cubic-bezier(.2,.8,.2,1) both; }
.screen.on { display: block; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.stagger > * { animation: rise .5s cubic-bezier(.2,.8,.2,1) both; }
.stagger > *:nth-child(1){animation-delay:.04s} .stagger > *:nth-child(2){animation-delay:.10s}
.stagger > *:nth-child(3){animation-delay:.16s} .stagger > *:nth-child(4){animation-delay:.22s}
.stagger > *:nth-child(5){animation-delay:.28s} .stagger > *:nth-child(6){animation-delay:.34s}

/* ── inputs ─────────────────────────────────────────────── */
.zipwrap { display: flex; align-items: flex-end; gap: 14px; margin: 26px 0 10px; }
input[type=text], input[type=tel], input[type=email] {
  font-family: var(--mono); font-size: clamp(34px, 9vw, 52px); font-weight: 500;
  width: 100%; background: transparent; border: none;
  border-bottom: var(--rule-hard); padding: 4px 0 8px; color: var(--ink);
  letter-spacing: .06em;
}
input:focus { outline: none; border-bottom-color: var(--signal); }
input::placeholder { color: var(--ink-16); }
.field { margin-bottom: 22px; }
.field label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-60); margin-bottom: 4px; }
.field input { font-size: 20px; }

.money {
  display: flex; align-items: baseline; gap: 6px;
  border-bottom: var(--rule-hard); margin: 20px 0 6px;
}
.money span { font-family: var(--mono); font-size: clamp(30px, 8vw, 46px); color: var(--ink-38); }
.money input { border: none; }

/* job card */
.card { border: var(--rule-hard); background: var(--paper-2); margin: 22px 0; }
.card .top {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 16px; border-bottom: var(--rule); background: var(--ink); color: var(--paper);
}
.card .top b { font-family: var(--display); font-size: 19px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600; }
.card .top i { font-family: var(--mono); font-size: 11px; font-style: normal; opacity: .7; }
.card .brief { padding: 16px; font-size: 15.5px; line-height: 1.55; }
.card ul { list-style: none; padding: 0 16px 14px; display: grid; gap: 5px; }
.card li { font-family: var(--mono); font-size: 12.5px; color: var(--ink-60); padding-left: 16px; position: relative; }
.card li::before { content: '+'; position: absolute; left: 0; color: var(--signal); font-weight: 600; }
.card li.no::before { content: '\2212'; color: var(--ink-38); }

/* sliders */
.slider { margin: 26px 0; }
.slider .row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.slider .row label { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-60); }
.slider .row output { font-family: var(--mono); font-size: 26px; font-weight: 600; }
input[type=range] { -webkit-appearance: none; width: 100%; height: 30px; background: transparent; }
input[type=range]::-webkit-slider-runnable-track { height: 2px; background: var(--ink); }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; margin-top: -12px;
  background: var(--signal); border: 2px solid var(--ink); border-radius: 0;
  transform: rotate(45deg); cursor: grab;
}
input[type=range]::-moz-range-track { height: 2px; background: var(--ink); }
input[type=range]::-moz-range-thumb { width: 22px; height: 22px; background: var(--signal); border: 2px solid var(--ink); border-radius: 0; }

/* ── buttons ────────────────────────────────────────────── */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 14px var(--pad) calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--paper) 68%, rgba(237,233,224,0));
  display: flex; gap: 10px; justify-content: center;
}
.dock-inner { display: flex; gap: 10px; width: 100%; max-width: 720px; }
button {
  font-family: var(--display); font-size: 19px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 15px 26px; border: var(--rule-hard); background: var(--ink); color: var(--paper);
  cursor: pointer; flex: 1; transition: transform .12s, box-shadow .12s;
  box-shadow: 4px 4px 0 var(--ink-16);
}
button:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink-16); }
button:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink-16); }
button:disabled { opacity: .3; cursor: not-allowed; transform: none; box-shadow: none; }
button.ghost { background: transparent; color: var(--ink); flex: 0 0 auto; box-shadow: none; }
button.ghost:hover { background: var(--ink); color: var(--paper); }
.skip { background: none; border: none; box-shadow: none; color: var(--ink-38); font-family: var(--mono);
        font-size: 12px; text-transform: none; letter-spacing: 0; padding: 8px; flex: 0 0 auto; }
.skip:hover { color: var(--signal); transform: none; background: none; }

/* ── THE SCALE ──────────────────────────────────────────── */
.scale { margin: 30px 0 8px; padding-top: 46px; position: relative; }
.scale .track { position: relative; height: 62px; border-left: var(--rule-hard); border-right: var(--rule-hard); }
.scale .ticks { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: flex-start; }
.scale .ticks i { width: 1px; background: var(--ink-16); height: 12px; }
.scale .ticks i:nth-child(5n+1) { height: 22px; background: var(--ink-38); }
.scale .baseline { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ink); }
.scale .band {
  position: absolute; top: 0; height: 62px; background: var(--signal-dim);
  border-left: 2px solid var(--signal); border-right: 2px solid var(--signal);
  animation: bandin .7s cubic-bezier(.2,.8,.2,1) both .1s;
}
@keyframes bandin { from { opacity: 0; transform: scaleX(.5); } to { opacity: 1; transform: none; } }
.scale .bandlabel {
  position: absolute; top: 68px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .08em; color: var(--signal); text-transform: uppercase; white-space: nowrap;
}
.scale .you {
  position: absolute; top: -46px; transform: translateX(-50%);
  animation: drop .55s cubic-bezier(.34,1.56,.64,1) both .55s; text-align: center;
}
@keyframes drop { from { opacity: 0; transform: translateX(-50%) translateY(-30px); } to { opacity: 1; transform: translateX(-50%); } }
.scale .you b { display: block; font-family: var(--mono); font-weight: 600; font-size: 21px; white-space: nowrap; }
.scale .you em { display: block; font-family: var(--mono); font-style: normal; font-size: 10px; letter-spacing: .14em; color: var(--ink-60); text-transform: uppercase; }
.scale .you::after { content: ''; display: block; width: 2px; height: 30px; background: var(--ink); margin: 4px auto 0; }
.scale .ends { display: flex; justify-content: space-between; margin-top: 26px; font-family: var(--mono); font-size: 11px; color: var(--ink-38); }

/* verdict */
.verdict { border-top: var(--rule-hard); border-bottom: var(--rule-hard); padding: 24px 0; margin: 34px 0; }
.verdict .big { font-family: var(--display); font-weight: 700; font-size: clamp(42px, 12vw, 84px); line-height: .9; text-transform: uppercase; }
.verdict .big.under { color: var(--signal); }
.verdict .big.over  { color: var(--steel); }
.verdict .sub { font-size: 17px; margin-top: 12px; color: var(--ink); max-width: 46ch; }

/* data table */
.tbl { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 13px; margin: 18px 0; }
.tbl th { text-align: left; font-weight: 500; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
          color: var(--ink-60); border-bottom: var(--rule-hard); padding: 6px 8px 6px 0; }
.tbl td { padding: 7px 8px 7px 0; border-bottom: var(--rule); }
.tbl td:last-child, .tbl th:last-child { text-align: right; padding-right: 0; }
.tbl tr.total td { border-bottom: none; border-top: var(--rule-hard); font-weight: 600; padding-top: 10px; }
.tbl .flag { color: var(--ink-38); font-size: 10px; }

details.math { border: var(--rule); background: var(--paper-2); margin: 20px 0; }
details.math summary {
  cursor: pointer; padding: 13px 16px; font-family: var(--mono); font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
details.math summary::-webkit-details-marker { display: none; }
details.math summary::after { content: '[ + ]'; color: var(--signal); }
details.math[open] summary::after { content: '[ \2212 ]'; }
details.math .inner { padding: 0 16px 16px; }

/* source line */
.src { font-family: var(--mono); font-size: 10.5px; color: var(--ink-38); letter-spacing: .05em;
       margin-top: 10px; padding-top: 8px; border-top: var(--rule); }

/* map */
.mapwrap { position: relative; border: var(--rule-hard); background: var(--paper-2); margin: 22px 0; aspect-ratio: 4/3; overflow: hidden; }
.mapwrap svg { width: 100%; height: 100%; display: block; }
.dot { fill: var(--ink-38); transition: r .3s, fill .3s; }
.dot.top { fill: var(--signal); }
.dot.home { fill: var(--steel); }
.ziplist { display: grid; gap: 0; font-family: var(--mono); font-size: 13px; }
.ziplist div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: var(--rule); }
.ziplist div b { font-weight: 600; }
.ziplist div span { color: var(--ink-60); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ── v2 screens ─────────────────────────────────────────── */

/* home: the three headline facts */
.facts { display: flex; border: var(--rule-hard); margin: 26px 0; }
.facts .fact { flex: 1; padding: 16px 8px; text-align: center; border-left: var(--rule); }
.facts .fact:first-child { border-left: none; }
.facts .fact b { display: block; font-family: var(--mono); font-weight: 600; font-size: 30px; line-height: 1; }
.facts .fact span { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
                    text-transform: uppercase; color: var(--ink-60); margin-top: 7px; }

/* home: numbered how it works */
.howto { margin: 26px 0; }
.howrow { display: flex; gap: 16px; padding: 14px 0; border-bottom: var(--rule); }
.howrow:last-child { border-bottom: none; }
.howrow > b { font-family: var(--mono); font-size: 13px; color: var(--signal); font-weight: 600; padding-top: 2px; }
.howrow strong { display: block; font-family: var(--display); font-size: 21px; font-weight: 600;
                 letter-spacing: .05em; text-transform: uppercase; }
.howrow span { display: block; color: var(--ink-60); font-size: 15px; margin-top: 2px; }

/* job card: the drawing sits above the spec */
.planbox { border: var(--rule-hard); background: var(--paper-2); margin: 22px 0 0; padding: 14px; }
.planbox svg { width: 100%; height: auto; display: block; }
.card { margin-top: 0; border-top: none; }

/* sliders */
.slider .help { font-family: var(--mono); font-size: 11.5px; color: var(--ink-38); margin-top: 2px; }

/* verdict */
.scalebox { margin-top: 34px; }

/* the leak: glanceable first, prose second */
.bignums { display: grid; grid-template-columns: 1fr 1fr; border: var(--rule-hard); margin: 26px 0; }
.bignum { padding: 18px 14px; border-right: var(--rule); border-bottom: var(--rule); }
.bignum:nth-child(2n) { border-right: none; }
.bignum:nth-child(n+3) { border-bottom: none; }
.bignum b { display: block; font-family: var(--mono); font-weight: 600; font-size: 32px; line-height: 1;
            color: var(--signal); }
.bignum span { display: block; font-size: 13px; color: var(--ink-60); margin-top: 6px; line-height: 1.35; }

/* map */
.mapframe { position: relative; border: var(--rule-hard); background: var(--paper-2);
            aspect-ratio: 1/1; overflow: hidden; margin: 20px 0 0; touch-action: manipulation; }
.mapframe svg { width: 100%; height: 100%; display: block; }
.zip { cursor: pointer; transition: filter .15s; }
.zip:hover { filter: brightness(.93); }
.zip.sel { stroke: var(--ink); stroke-width: 2.4; }
.home { fill: none; stroke: var(--steel); stroke-width: 3; }
.homedot { fill: var(--steel); stroke: var(--paper); stroke-width: 2.5; }
.legend { display: flex; margin-top: 12px; border: 1px solid var(--ink); }
.legend div { flex: 1; padding: 7px 3px; text-align: center; font-family: var(--mono);
              font-size: 9.5px; letter-spacing: .04em; border-left: 1px solid var(--ink); line-height: 1.25; }
.legend div:first-child { border-left: none; }
.hint { font-family: var(--mono); font-size: 11px; color: var(--ink-38); margin-top: 10px; text-align: center; }
.panel { border: var(--rule-hard); background: var(--paper-2); margin-top: 16px;
         animation: rise .3s cubic-bezier(.2,.8,.2,1) both; }
.panel .hd { display: flex; justify-content: space-between; align-items: baseline;
             padding: 11px 14px; background: var(--ink); color: var(--paper); }
.panel .hd b { font-family: var(--display); font-size: 22px; letter-spacing: .07em; font-weight: 600; }
.panel .hd i { font-family: var(--mono); font-size: 10.5px; font-style: normal; opacity: .7;
               letter-spacing: .1em; text-transform: uppercase; }
.panel dl { display: grid; grid-template-columns: auto 1fr; padding: 4px 14px 12px; }
.panel dt { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
            color: var(--ink-60); padding: 9px 14px 9px 0; border-bottom: 1px solid var(--ink-16); }
.panel dd { font-family: var(--mono); font-size: 14px; text-align: right; padding: 9px 0;
            border-bottom: 1px solid var(--ink-16); font-variant-numeric: tabular-nums; }
.panel dl > :nth-last-child(1), .panel dl > :nth-last-child(2) { border-bottom: none; }
.panel .srcbox { padding: 0 14px 13px; font-family: var(--mono); font-size: 10.5px;
                 color: var(--ink-38); line-height: 1.5; }
.panel .srcbox b { color: var(--ink-60); font-weight: 500; }

/* report capture */
.form { margin: 24px 0 6px; }
.masthead .step { white-space: nowrap; max-width: 32vw; overflow: hidden; text-overflow: ellipsis; }
/* home screen: primary button full width, takeaway line centred beneath it */
.dock-inner.stack { flex-direction: column; align-items: stretch; gap: 4px; }
.dock-inner.stack .skip { align-self: center; }
main { padding-bottom: 190px; }
/* The dock is fixed and the job card is tall, so the price input was landing
   underneath it. Reserve enough room for a wrapped three button dock. */
main { padding-bottom: 230px; }
html { scroll-padding-top: 64px; }

/* ── PHONE PASS ─────────────────────────────────────────────
   Audited at 375, 360, 390 and 430 wide. No overflow anywhere,
   but caption text ran 9.5 to 11px and several controls came in
   under the 44px touch minimum. This is a tool used one handed,
   outdoors, often by someone who needs reading glasses, so the
   floor is 12px type and 44px targets. */

/* readable captions */
.src,
.panel .srcbox        { font-size: 12.5px; line-height: 1.55; }
.facts .fact span     { font-size: 12px; }
.scale .ends          { font-size: 12.5px; }
.scale .bandlabel     { font-size: 12px; }
.scale .you em        { font-size: 11.5px; }
.tbl .flag            { font-size: 11.5px; }
.tbl th               { font-size: 11.5px; }
.tbl td               { font-size: 13.5px; }
.legend div           { font-size: 11px; padding: 9px 3px; }
.hint                 { font-size: 12.5px; }
.panel dt             { font-size: 12px; }
.panel dd             { font-size: 15px; }
.card li              { font-size: 13.5px; }
.slider .help         { font-size: 12.5px; }
.slider .row label    { font-size: 12.5px; }
.masthead .step       { font-size: 12px; }
.eyebrow              { font-size: 12px; }
.howrow span          { font-size: 15.5px; }
details.math summary  { font-size: 13px; padding: 15px 16px; }

/* 44px touch targets */
.skip {
  min-height: 44px; padding: 12px 10px; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
}
.field input { font-size: 17px; padding: 11px 0; }   /* 17px also stops iOS zoom on focus */
input[type=range] { height: 48px; }
input[type=range]::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: -14px; }
input[type=range]::-moz-range-thumb { width: 28px; height: 28px; }
details.math summary { min-height: 46px; }

/* the math table is four columns; let it breathe on a narrow screen */
@media (max-width: 400px) {
  .tbl { font-size: 12.5px; }
  .tbl th, .tbl td { padding-right: 5px; }
  .tbl td:first-child, .tbl th:first-child { max-width: 34vw; }
  h2 { font-size: clamp(30px, 8.5vw, 58px); }
}

/* stop iOS zooming the page when a text field takes focus */
input[type=text], input[type=tel], input[type=email] { font-size: max(17px, 1em); }
.money input, .zipwrap input { font-size: clamp(34px, 9vw, 52px); }

/* honour the notch and give thumbs room at the bottom of the dock */
.dock { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
.tbl .flag { font-size: 12px; }
/* The metro label was truncating to a single letter once caption type grew.
   Give it real room, and drop it entirely on the narrowest phones rather
   than show an ellipsis that says nothing. */
.masthead .step { max-width: 40vw; }
@media (max-width: 380px) { .masthead .step { display: none; } }

/* ── PHONE: centre the message, tighten the vertical ────────
   The headline and its supporting line read as a statement, so they centre.
   Tables, spec lists and the math stay left aligned, because columns of
   numbers and bullet lists are unreadable centred. */
@media (max-width: 700px) {
  .eyebrow          { text-align: center; }
  h2                { text-align: center; }
  main > div > p,
  main > p          { text-align: center; margin-left: auto; margin-right: auto; }
  .verdict          { text-align: center; }
  .verdict .sub     { margin-left: auto; margin-right: auto; }
  .money            { justify-content: center; }
  .money input      { text-align: center; }
  .zipwrap input    { text-align: center; }
  .facts .fact span,
  .hint             { text-align: center; }

  /* these must stay left */
  .card .brief,
  .howrow span, .howrow strong,
  .tbl, .tbl td, .tbl th,
  .panel .srcbox, .panel dt,
  details.math .inner p,
  .card li          { text-align: left; }
  .src              { text-align: center; }
  details.math .inner .src { text-align: left; }

  /* tighter vertical so a screen holds more of itself */
  h2                { margin-bottom: 12px; font-size: clamp(30px, 8vw, 46px); }
  .planbox          { margin-top: 16px; padding: 10px; }
  .card             { margin: 14px 0; }
  .card .brief      { padding: 14px; font-size: 15px; }
  p.ask             { margin-top: 16px; }
  .money            { margin: 14px 0 6px; }
  .facts            { margin: 18px 0; }
  .howrow           { padding: 11px 0; }
  .howto            { margin: 18px 0; }
}

/* the collapsed spec list on a job card */
details.spec              { margin: 16px 0 0; }
details.spec .inner       { padding: 0 16px 14px; }
details.spec ul           { list-style: none; padding: 0; display: grid; gap: 6px; }
details.spec li           { font-family: var(--mono); font-size: 13.5px; color: var(--ink-60);
                            padding-left: 17px; position: relative; }
details.spec li::before   { content: '+'; position: absolute; left: 0; color: var(--signal); font-weight: 600; }
details.spec li.no::before{ content: '\2212'; color: var(--ink-38); }
/* The drawing is the tallest single block on a job card. Cap it on a phone so
   the price field clears the fold on the kitchen too, which has the longer
   brief of the two. */
@media (max-width: 700px) {
  .planbox svg { max-height: 40vh; width: auto; margin: 0 auto; display: block; }
  .planbox     { display: flex; justify-content: center; }
}
/* Job card on a phone: the price field has to be reachable without hunting.
   Measured on a 375x667 screen the drawing alone ate 272px of a 578px fold,
   so the plan shrinks, the gaps close up, and the ask is one line. */
@media (max-width: 700px) {
  .planbox svg   { max-height: 30vh !important; }
  .planbox       { margin-top: 10px; padding: 8px; }
  h2             { margin-bottom: 8px; }
  .card          { margin: 10px 0; }
  .card .brief   { padding: 12px 14px; }
  p.ask          { margin-top: 12px; margin-bottom: 0; }
  .money         { margin: 10px 0 6px; }
  .eyebrow       { margin-bottom: 8px; }
}
@media (max-width: 700px) and (max-height: 700px) {
  .planbox svg   { max-height: 24vh !important; }
}
/* The dollar sign was stranding itself at the far left while the number
   centred, because the field is full width. Size the field to its content so
   the pair reads as one unit. */
@media (max-width: 700px) {
  .money        { justify-content: center; gap: 2px; }
  .money input  { width: 7ch; text-align: left; flex: 0 0 auto; }
}
/* Three buttons plus a long skip label overran 390px and clipped Next. */
.dock-inner { flex-wrap: nowrap; min-width: 0; }
.dock-inner button { min-width: 0; }
.dock-inner .skip { flex: 0 1 auto; white-space: nowrap; font-size: 12.5px; padding: 12px 6px; }
@media (max-width: 400px) {
  .dock-inner button { padding-left: 14px; padding-right: 14px; font-size: 17px; }
  .dock-inner .skip { font-size: 12px; padding: 12px 4px; }
}