/* MBB PT system — shared styling.
   Palette and card language lifted from app-v3/web/css/v2.css so this reads as
   the same brand: cream ground, ink borders, hard offset shadows, yellow accent.
   Fraunces headings are ROMAN only. No italic Fraunces anywhere (workspace rule) —
   emphasis comes from colour, weight and border instead. */
:root{
  --cream:#FDF8E4; --cream-deep:#FAF3DC;
  --yellow:#F4D85E; --yellow-pale:#FBE99B; --yellow-deep:#E5C73C;
  --sage:#D8E5D0; --sage-deep:#A8C09A;
  --ink:#1A1A1A; --ink-2:#2D2D2D; --ink-3:#6B6B6B;
  --red:#C0402B; --red-pale:#F7DED8;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:var(--cream); color:var(--ink);
  font-family:'Work Sans',system-ui,sans-serif;
  font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  padding:0 20px 64px;
}
.wrap{max-width:560px;margin:0 auto;}
.hq .wrap{max-width:680px;}

/* Fraunces, roman, lowercase — matches the app's headline treatment. */
h1,h2,h3{font-family:'Fraunces',serif;font-weight:800;text-transform:lowercase;letter-spacing:-0.02em;line-height:1.02;font-variation-settings:"opsz" 144;}
h1{font-size:38px;margin:6px 0 14px;}
h2{font-size:26px;margin:36px 0 12px;}
h3{font-size:18px;margin:0 0 6px;letter-spacing:-0.012em;}
p{margin:0 0 14px;}
p.lead{font-size:17px;}
.muted{color:var(--ink-3);font-size:14.5px;}
em{font-style:normal;font-weight:600;} /* kill default italic per brand rule */
a{color:var(--ink);}

.mark{font-family:'Fraunces',serif;font-weight:800;font-size:15px;letter-spacing:-0.01em;padding:22px 0 4px;display:block;}

/* Marker-pen highlight for the headline. Roman Fraunces only; emphasis via colour. */
.hl{background:linear-gradient(transparent 55%, var(--yellow) 55%, var(--yellow) 92%, transparent 92%);padding:0 2px;}

/* Collapsible sections — same card language as .card, summary is the heading. */
.secs{margin:26px 0 34px;}
details.sec{
  background:var(--cream-deep);
  border:1.5px solid var(--ink);
  border-radius:14px;
  box-shadow:3px 3px 0 var(--ink);
  margin:0 0 14px;
}
details.sec summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:16px 18px;
  font-family:'Fraunces',serif;font-weight:800;font-size:21px;
  text-transform:lowercase;letter-spacing:-0.02em;line-height:1.1;
  font-variation-settings:"opsz" 144;
  border-radius:14px;
}
details.sec summary::-webkit-details-marker{display:none;}
details.sec summary::after{
  content:"+";
  font-family:'Work Sans',system-ui,sans-serif;font-weight:600;font-size:19px;line-height:1;
  width:28px;height:28px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:var(--yellow);border:1.5px solid var(--ink);border-radius:50%;
}
details.sec[open] summary::after{content:"\2212";}
details.sec[open] summary{padding-bottom:10px;}
details.sec .inner{padding:0 18px 18px;}
details.sec .inner p{font-size:15.5px;}
details.sec .inner .muted{font-size:14px;}
.card.flat{box-shadow:none;margin-top:14px;}

.card{
  background:var(--cream-deep);
  border:1.5px solid var(--ink);
  border-radius:14px;
  box-shadow:3px 3px 0 var(--ink);
  padding:18px 18px 20px;
  margin:0 0 18px;
}
.card.plain{background:transparent;box-shadow:none;}
.card.accent{background:var(--yellow-pale);}
.card.quiet{background:transparent;border-style:dashed;box-shadow:none;}

/* Price table. Scrolls inside itself on narrow phones rather than pushing the page. */
.pricewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 10px;}
table{border-collapse:collapse;width:100%;min-width:280px;font-size:15px;}
th,td{padding:9px 8px;text-align:left;border-bottom:1px solid rgba(26,26,26,.14);}
th{font-family:'Fraunces',serif;font-weight:700;font-size:14px;text-transform:lowercase;letter-spacing:-0.008em;}
td:not(:first-child),th:not(:first-child){text-align:right;font-variant-numeric:tabular-nums;}
tr:last-child td{border-bottom:none;}
.you{font-weight:600;}

label{display:block;font-weight:600;font-size:14.5px;margin:14px 0 5px;}
input,select{
  width:100%;padding:11px 12px;font:inherit;font-size:16px; /* 16px stops iOS zooming on focus */
  background:#fff;color:var(--ink);
  border:1.5px solid var(--ink);border-radius:10px;
}
input:focus,select:focus{outline:2px solid var(--yellow-deep);outline-offset:1px;}
.row{display:flex;gap:10px;}
.row>*{flex:1;}

.tick{display:flex;gap:10px;align-items:flex-start;margin:20px 0 6px;font-size:14.5px;line-height:1.42;}
.tick input{width:22px;height:22px;flex:0 0 auto;margin-top:1px;}

button,.btn{
  display:block;width:100%;margin-top:18px;
  padding:15px 18px;font:inherit;font-weight:600;font-size:16px;
  background:var(--yellow);color:var(--ink);
  border:1.5px solid var(--ink);border-radius:12px;
  box-shadow:3px 3px 0 var(--ink);
  cursor:pointer;text-align:center;text-decoration:none;
}
button:active,.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
button:disabled{opacity:.55;cursor:default;transform:none;}
button.small{width:auto;margin:0;padding:9px 14px;font-size:14.5px;box-shadow:2px 2px 0 var(--ink);}
button.ghost{background:transparent;}

.note{font-size:14px;color:var(--ink-3);margin-top:10px;text-align:center;}
.err{background:var(--red-pale);border:1.5px solid var(--red);color:var(--red);border-radius:10px;padding:11px 13px;margin:14px 0 0;font-size:14.5px;}
.ok{background:var(--sage);border:1.5px solid var(--ink);border-radius:10px;padding:11px 13px;margin:14px 0 0;font-size:14.5px;}
.hidden{display:none;}

/* ---- back office ---- */
.hq .client{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid rgba(26,26,26,.14);}
.hq .client:last-child{border-bottom:none;}
.hq .cinfo{flex:1;min-width:0;}
.hq .cname{font-family:'Fraunces',serif;font-weight:700;font-size:16px;letter-spacing:-0.008em;}
.hq .cmeta{font-size:13.5px;color:var(--ink-3);}
.hq .state{font-size:13px;font-weight:600;}
.hq .state.paid{color:#3D6B3D;}
.hq .state.failed{color:var(--red);}
.hq .banner{background:var(--red-pale);border:1.5px solid var(--red);border-radius:12px;padding:13px 15px;margin:0 0 18px;font-size:14.5px;}