/* cm.css — ContractorMate shape language, loaded after app.css. Hard edges, thick rules, offset shadows, hazard stripes, condensed capitals.
   Edit colours in tokens.css; edit shapes here. */
h1,h2,h3,h4,.logo,.mark,.h-page{text-transform:uppercase;letter-spacing:.01em;line-height:1.02}
h1,h2,.h-page{font-weight:800}
body{font-weight:500}
.eyebrow{font-family:var(--font-display);font-size:1.05rem;letter-spacing:.18em;font-weight:700;background:#1b1f23;color:#ff8a4a;padding:6px 10px;border-left:6px solid var(--violet)}
.btn{border-radius:var(--radius-sm);text-transform:uppercase;font-family:var(--font-display);font-weight:800;letter-spacing:.06em;font-size:1.1rem;border:2px solid var(--line)}
.btn-buy{background:var(--amber);color:var(--amber-ink);box-shadow:4px 4px 0 var(--line)}
.btn-buy:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--line)}
.btn-ghost{background:transparent;color:var(--text)}
.mark{border-radius:var(--radius-sm);background:var(--amber);color:var(--amber-ink);border:2px solid var(--line)}
header.site{border-bottom:3px solid var(--line);background:var(--glass)}
.topbar{background:#1b1f23;color:#f1f3f4}
.topbar a{color:#ff8a4a;font-weight:800}
.card{border:2px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.pain .card::before{width:100%;height:10px;inset:0 0 auto 0;background:repeating-linear-gradient(-45deg,var(--amber) 0 12px,#1b1f23 12px 24px)}
.pain .card{padding-top:40px}
.hero{background:linear-gradient(var(--bg),var(--bg))}
.hero::before,.hero::after{display:none}
.hero::before{display:block;position:absolute;inset:auto 0 0 0;width:auto;height:14px;border-radius:0;filter:none;background:repeating-linear-gradient(-45deg,var(--amber) 0 18px,#1b1f23 18px 36px);top:auto;left:0}
.hero h1 .grad{background:none;color:var(--amber);-webkit-text-fill-color:currentColor;text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.12em}
.ticker{border-block:2px solid var(--line);background:#1b1f23}
.ticker div{color:#e9ecee;font-family:var(--font-display);font-size:1.1rem}
.stage[aria-pressed="true"],.s-ctl .s-sound{background:var(--amber);color:var(--amber-ink);border:2px solid var(--line)}
.stage{border:2px solid var(--line);border-radius:var(--radius-sm)}
.chip{border-radius:var(--radius-sm);border-width:2px;font-family:var(--font-display);font-size:.95rem;letter-spacing:.06em;text-transform:uppercase}
.chip.checking{color:var(--warn);border-color:var(--warn)}
.partner-box{background:var(--surface);border:3px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.guar{background:var(--surface);border:3px solid var(--mint);border-radius:var(--radius);box-shadow:6px 6px 0 var(--mint)}
.founder blockquote{font-family:var(--font-display);text-transform:uppercase;border-left:12px solid var(--violet);padding-left:20px}
#sophia{border:3px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:none;-webkit-backdrop-filter:none}
#sophia .stage-v{background:var(--surface-2)}
.orb{background:conic-gradient(from 0deg,var(--amber),var(--violet),var(--mint),var(--amber))}
.demo-shell{border:3px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);background:var(--surface)}
.row{border-radius:var(--radius-sm)}
.jobcard{border:2px dashed var(--line);padding:14px;border-radius:var(--radius-sm);line-height:1.8}
.jobcard .hid{background:var(--text);color:var(--text);border-radius:2px;user-select:none}
.bn-item{border:2px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
input,select,textarea{border-radius:var(--radius-sm)}
footer.site{border-top:6px solid var(--text);background:var(--bg-2)}
/* phones: keep the uppercase logo and the three header buttons inside the screen */
@media (max-width:639px){
  .logo{font-size:1rem;gap:8px;letter-spacing:0}
  .mark{width:30px;height:30px}
  header.site .wrap{gap:8px}
  .hdr-actions{gap:6px}
  .icon-btn{width:40px;height:40px}
}

/* ---------- Sophia on phones: a slim dock at the bottom, never a floating card. Space for it is reserved, so no page content sits under it. ---------- */
@media (max-width:899px){
  :root{--dock-h:112px}
  body{padding-bottom:calc(var(--dock-h) + env(safe-area-inset-bottom))}
  #sophia{left:0;right:0;bottom:0;top:auto!important;width:auto;border-radius:0;border-width:3px 0 0 0;box-shadow:0 -4px 0 var(--amber);padding-bottom:env(safe-area-inset-bottom)}
  #sophia .stage-v{position:absolute;left:10px;top:10px;bottom:auto;width:52px;height:52px}
  #sophia .body{margin-left:72px;min-height:0;padding:6px 8px 6px 0}
  #sophia .s-cap{padding:2px 0 4px;font-size:.84rem;line-height:1.35;max-height:2.7em;overflow:hidden;cursor:pointer}
  #sophia.open .s-cap{max-height:38vh;overflow:auto}
  #sophia .s-note{padding:0;font-size:.72rem}
  #sophia .s-ctl{padding:0;gap:6px;flex-wrap:nowrap}
  #sophia .s-ctl button{min-height:44px;padding:0 8px;font-size:.78rem}
  #sophia .s-ctl .s-sound{flex:2}
}

/* long uppercase button labels wrap instead of running off the screen */
.btn-lg,.cta-row .btn{white-space:normal;text-align:center;line-height:1.1;padding-top:12px;padding-bottom:12px;max-width:100%}
@media (max-width:639px){ .hdr-actions a.icon-btn{display:none!important} }
@media (max-width:899px){ #sophia{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none} }