/* client.css: layout for the client journey (landing hero, buy box reassurance, checkout,
   private client). Structure only; colour and art live in the art layers. Palette: cream,
   dark green #134e3a, cobalt #1e3fa6, yellow #f2c230, black. */

/* ---------- landing: one primary action, one secondary ---------- */
.ld-acts { display: flex; flex-wrap: wrap; gap: 12px 14px; margin: 28px 0 0; }
.ld-acts .pill { min-height: 52px; margin: 0 !important; padding-inline: 28px; font-size: 15px; }
.ld-acts .ld-primary { background: #134e3a !important; border-color: #134e3a !important; color: #fff !important; }
.ld-acts .ld-primary:hover { background: #0e3b2c !important; }
.ld-alt { margin: 16px 0 0; max-width: 620px; font-size: 15px; line-height: 1.55; color: #2a2a2a; }
.ld-alt a, .ld-private a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ld-private { margin: 18px 0 0; font-size: 15px; }
@media (max-width: 600px) {
  .ld-acts { flex-direction: column; }
  .ld-acts .pill { width: 100%; justify-content: center; }
}

/* ---------- product page: express buy and reassurance beside the action ---------- */
.pd-cartel-buy .pd-buy { display: flex; gap: 10px; flex-wrap: wrap; }
.pd-cartel-buy .pd-buy > button { min-height: 48px; flex: 1 1 140px; }
.cm-assure { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; font-size: 14px; line-height: 1.45; }
.cm-assure li { margin: 0; padding: 0; }
.cm-assure li::before { content: none; }
.cm-assure b { font-weight: 600; }
.cm-assure a, .cm-assure button { color: inherit; text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* ---------- checkout: one calm page ---------- */
.co-calm .co-group { border: 0; margin: 0 0 26px; padding: 0; min-width: 0; }
.co-calm .co-group > legend { font: 600 12px/1.2 Inter, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 12px; padding: 0; }
.co-calm .field input, .co-calm .field select, .co-calm .field textarea { min-height: 48px; font-size: 16px; }
.co-calm .field textarea { min-height: 76px; resize: vertical; }
.co-calm .field .err { display: none; }
.co-calm .field.invalid .err { display: block; }
.co-calm .co-row3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0 14px; }
@media (max-width: 600px) { .co-calm .co-row3 { grid-template-columns: 1fr 1fr; } .co-calm .co-row3 > :first-child { grid-column: 1 / -1; } }
.co-due { margin: 6px 0 14px; padding: 16px 18px; background: #f7f3ea; border: 1px solid rgba(0,0,0,.12); display: grid; gap: 8px; }
.co-due-row { display: flex; justify-content: space-between; gap: 16px; font-size: 15px; }
.co-due-row b { font-weight: 650; }
.co-due-now { font-size: 17px; }
.co-due-note { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: #333; }
.co-calm #coSubmit { min-height: 56px; font-size: 16px; }
.co-assure { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; }
.co-assure li::before { content: none; }
.co-assure a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.co-saved { font-size: 13px; color: #444; margin: -8px 0 18px; }
.co-err-sum { margin: 0 0 14px; padding: 12px 14px; border-left: 3px solid #1e3fa6; background: #fff; font-size: 14.5px; }
.co-err-sum[hidden] { display: none; }

/* ---------- private client ---------- */
.pc { max-width: 1180px; }
.pc-head { padding: clamp(36px, 6vw, 80px) 0 clamp(20px, 3vw, 36px); max-width: 820px; }
.pc-head h1 { font-size: clamp(36px, 5vw, 64px); line-height: 1.04; margin: 8px 0 18px; }
.pc-head .lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; }
.pc-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; padding-bottom: clamp(48px, 7vw, 100px); }
.pc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.pc-list li { padding: 16px 0; border-top: 1px solid rgba(0,0,0,.14); }
.pc-list li::before { content: none; }
.pc-list b { display: block; font-size: 17px; margin-bottom: 4px; }
.pc-list span { font-size: 15px; line-height: 1.55; color: #2a2a2a; }
.pc-form .field input, .pc-form .field select, .pc-form .field textarea { min-height: 48px; font-size: 16px; }
.pc-form fieldset { border: 0; padding: 0; margin: 0 0 14px; }
.pc-form legend { font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.pc-pref { display: flex; flex-wrap: wrap; gap: 8px; }
.pc-pref label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(0,0,0,.25); cursor: pointer; font-size: 15px; }
.pc-pref input { margin: 0; }
.pc-pref label:has(input:checked) { border-color: #134e3a; box-shadow: inset 0 0 0 1px #134e3a; }
.pc-note { font-size: 13.5px; color: #444; line-height: 1.5; margin: 12px 0 0; }
.pc-done { padding: 28px 0; }
.pc-done[hidden] { display: none; }
@media (max-width: 900px) { .pc-grid { grid-template-columns: 1fr; } }

/* ---------- touch targets ---------- */
@media (pointer: coarse) {
  .jn-qty button, .jn-txt, .cm-width-step { min-height: 44px; min-width: 44px; }
}

/* the landing's first screen holds the promise, the two actions and the four assurances */
html[data-page="gateway"] .ld-hero .ld-h1 { font-size: clamp(40px, 5.4vw, 84px); max-width: 15ch; }
html[data-page="gateway"] .ld-hero .ld-lede { margin-top: 20px; max-width: 54ch; }
html[data-page="gateway"] .ld-hero .ld-kicker { margin-bottom: 14px; }

/* product cartel: price on its own line, then Add to bag (primary) beside Buy now (secondary) */
html[data-page="product"] .pd-cartel .pd-buy { display: flex; gap: 10px; flex: 1 1 100%; flex-wrap: wrap; }
html[data-page="product"] .pd-cartel .pd-buy .pd-own:not(#bs-none) { flex: 1 1 180px; min-width: 0; }
html[data-page="product"] .pd-cartel .pd-buy .pd-buynow {
  flex: 1 1 140px; height: 52px; padding: 0 22px; border-radius: 0; cursor: pointer;
  background: transparent; color: #121212; border: 1.5px solid #121212;
  font: 600 15px/1 Inter, system-ui, sans-serif; letter-spacing: .01em;
}
html[data-page="product"] .pd-cartel .pd-buy .pd-buynow:hover { background: #121212; color: #fff; }
html[data-page="product"] .pd-cartel .pd-buy .pd-buynow:focus-visible { outline: 2px solid #1e3fa6; outline-offset: 3px; }

/* checkout states its own arrival window, advisor and warranty above the button; the older
   concierge note fauve.js appends to the summary would repeat them with a generic window */
.co-calm .fv-concierge { display: none !important; }

/* phone: every control in the buy box is a full fingertip */
@media (pointer: coarse), (max-width: 760px) {
  html[data-page="product"] .pd-cartel .pd-mini { min-width: 44px; min-height: 44px; }
  html[data-page="product"] .pd-cartel .pd-mini-all, html[data-page="product"] .cm-zip button { min-height: 44px; }
  html[data-page="product"] .cm-assure-sw { min-height: 44px; }
}