.pkg-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px}
.pkg-card {
  padding:26px;
  display:flex;
  flex-direction:column;
  gap:14px}
.pkg-card h2,.pkg-card p {
  margin:0}
.pkg-card p {
  color:var(--muted,var(--color-ink));
  line-height:1.65}
.pkg-card>.button {
  margin-top:auto}
.pkg-status {
  font-size:13px;
  padding:7px 11px;
  border-radius:30px;
  background:var(--color-soft);
  color:var(--color-ink);
  white-space:nowrap}
.pkg-mini-flow {
  padding-left:22px;
  line-height:1.7;
  font-size:13px;
  color:var(--color-ink)}
.pkg-section {
  padding:28px;
  margin-top:24px;
  scroll-margin-top:90px}
.pkg-section h2 {
  font-size:21px;
  margin:0 0 14px}
.pkg-section h3 {
  margin-top:22px}
.pkg-section>p {
  line-height:1.65;
  color:var(--color-ink)}
.pkg-metrics {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:24px;
  margin:24px 0}
.pkg-metrics>div {
  display:flex;
  flex-direction:column;
  gap:9px}
.pkg-metrics strong {
  font-size:32px;
  font-weight:550;
  color:var(--color-ink);
  line-height:1.1}
.pkg-metrics span {
  font-size:13px;
  color:var(--color-ink)}
.pkg-steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--color-line);
  border-radius:12px;
  overflow:hidden;
  background:var(--color-surface)}
.pkg-steps a {
  padding:18px;
  display:flex;
  gap:11px;
  align-items:center;
  color:var(--color-ink);
  text-decoration:none;
  border-right:1px solid var(--color-line);
  font-size:14px}
.pkg-steps a:last-child {
  border:0}
.pkg-steps b {
  background:var(--color-soft);
  border-radius:50%;
  width:28px;
  height:28px;
  display:grid;
  place-content:center;
  font-weight:500}
.pkg-fields {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px}
.pkg-connect,.pkg-decisions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px}
.pkg-decisions {
  margin-top:24px}
.pkg-connect>label {
  display:flex;
  gap:10px;
  align-items:center}
.pkg-notice {
  padding:18px 20px;
  border:1px solid var(--color-line);
  background:var(--color-soft);
  color:var(--color-ink);
  border-radius:10px;
  line-height:1.65;
  margin:20px 0;
  font-size:14px;
  overflow-wrap:anywhere}
.pkg-day-fields {
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  border:1px solid var(--color-line);
  border-radius:8px;
  padding:16px}
.pkg-day-fields label,.stack-form .pkg-check {
  display:flex;
  flex-direction:row;
  align-items:flex-start;
  gap:10px;
  font-weight:400}
.pkg-day-fields input,.pkg-check input {
  width:auto;
  min-width:16px;
  margin-top:3px}
.pkg-connection {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  border-top:1px solid var(--color-line);
  margin-top:22px;
  padding-top:20px}
.pkg-flow {
  display:flex;
  list-style:none;
  gap:12px;
  padding:0;
  flex-wrap:wrap;
  margin:24px 0}
.pkg-flow li {
  padding:12px 15px;
  background:var(--color-soft);
  border:1px solid var(--color-line);
  border-radius:8px;
  font-size:13px;
  color:var(--color-ink)}
.pkg-flow li:not(:last-child)::after {
  content:" →";
  margin-left:12px}
.pkg-trial {
  margin-top:24px;
  padding:20px;
  border-radius:10px;
  background:var(--color-soft)}
.pkg-history {
  display:grid;
  gap:0}
.pkg-history>a,.pkg-history>div {
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:17px 0;
  border-bottom:1px solid var(--color-line);
  text-decoration:none;
  color:var(--color-ink);
  overflow-wrap:anywhere}
.pkg-history span,.pkg-history small {
  font-size:13px;
  color:var(--color-ink)}
.pkg-history a:hover strong {
  text-decoration:underline}
.pkg-message {
  padding:20px 0;
  border-top:1px solid var(--color-line)}
.pkg-message details {
  margin:16px 0}
.pkg-facts {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px}
.pkg-facts dt {
  font-size:13px;
  color:var(--color-ink);
  margin-bottom:7px}
.pkg-facts dd {
  margin:0;
  overflow-wrap:anywhere;
  font-size:15px}
.pkg-link-field {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:22px;
  font-size:13px}
.pkg-link-field input {
  width:100%;
  padding:12px;
  border-radius:8px;
  border:1px solid var(--color-line);
  background:var(--color-soft);
  color:var(--color-ink)}
.pkg-section code {
  word-break:break-all}
.pkg-section .result-text {
  white-space:pre-wrap}
.booking-public {
  max-width:1100px;
  margin:auto;
  padding:34px 36px 24px}
.booking-public>header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:44px}
.booking-public>header>span {
  font-size:13px;
  letter-spacing:2px;
  color:var(--color-ink)}
.booking-shell {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  border:1px solid var(--color-line);
  border-radius:20px;
  overflow:hidden;
  background:var(--color-surface);
  }
.booking-intro {
  padding:38px;
  background:var(--color-soft)}
.booking-intro h1 {
  font-size:36px;
  line-height:1.18;
  margin:20px 0;
  overflow-wrap:anywhere}
.booking-intro>p {
  color:var(--color-ink);
  font-size:14px;
  line-height:1.7;
  overflow-wrap:anywhere}
.booking-zone {
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-top:30px;
  color:var(--color-ink)}
.booking-zone svg {
  width:20px;
  flex-shrink:0}
.booking-zone p {
  font-size:13px;
  line-height:1.6}
.booking-zone strong {
  font-size:14px}
.booking-status {
  margin-top:30px;
  padding:18px;
  border:1px solid var(--color-line);
  border-radius:10px;
  background:var(--color-soft)}
.booking-status strong {
  font-size:14px}
.booking-status p {
  font-size:13px;
  line-height:1.6}
.booking-times {
  padding:38px}
.booking-times h2 {
  font-size:22px;
  margin:0 0 22px}
.booking-date {
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap}
.booking-date label {
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:13px}
.booking-date input {
  border:1px solid var(--color-line);
  border-radius:7px;
  padding:11px;
  background:var(--color-surface);
  font:inherit;
  color:var(--color-ink)}
.booking-slot-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:26px 0}
.booking-slot {
  border:1px solid var(--color-line);
  color:var(--color-ink);
  background:var(--color-surface);
  border-radius:8px;
  padding:13px 5px;
  width:100%;
  font:inherit;
  font-size:13px;
  cursor:pointer}
.booking-slot:hover,.booking-slot:focus-visible {
  background:var(--color-soft);
  border-color:var(--color-line)}
.booking-cancel {
  margin-top:30px;
  border-top:1px solid var(--color-line);
  padding-top:20px;
  font-size:13px}
.booking-cancel p {
  line-height:1.6}
.booking-public>footer {
  text-align:center;
  font-size:13px;
  color:var(--color-muted);
  margin-top:28px}
.pkg-section input:focus-visible,.pkg-section select:focus-visible,.pkg-section textarea:focus-visible {
  outline:2px solid var(--color-ink);
  outline-offset:2px}
@media(max-width:1150px) {
  .pkg-grid {
  grid-template-columns:1fr}
.pkg-card .pkg-mini-flow {
  display:flex;
  flex-wrap:wrap;
  gap:8px 24px}
.pkg-card>.button {
  align-self:flex-start}
}
@media(max-width:650px) {
  .pkg-section {
  padding:20px}
.pkg-steps {
  grid-template-columns:repeat(2,1fr)}
.pkg-steps a {
  padding:13px;
  border-bottom:1px solid var(--color-line)}
.pkg-fields,.pkg-facts {
  grid-template-columns:1fr}
.pkg-connection {
  align-items:flex-start;
  flex-direction:column}
.pkg-connect>.button,.pkg-decisions>form,.pkg-decisions button {
  width:100%}
.pkg-connect>label {
  flex-direction:column;
  align-items:flex-start}
.booking-public {
  padding:20px 16px}
.booking-public>header {
  margin-bottom:25px}
.booking-public>header>span {
  display:none}
.booking-shell {
  grid-template-columns:1fr}
.booking-intro,.booking-times {
  padding:25px}
.booking-intro h1 {
  font-size:30px}
.booking-status {
  margin-top:20px}
.booking-slot-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))}
.pkg-metrics {
  grid-template-columns:repeat(2,minmax(0,1fr))}
}


.pkg-grid>.panel {
  margin:0}

/* Set-up, review and history share a readable rhythm. */
.pkg-card { padding:28px; gap:16px; min-width:0; }
.pkg-card h2 { font-size:23px; line-height:1.35; overflow-wrap:anywhere; }
.pkg-card p,.pkg-section>p { font-size:15px; line-height:1.75; color:var(--color-muted); }
.pkg-mini-flow { font-size:14px; margin:4px 0 18px; }
.pkg-mini-flow li+li { margin-top:8px; }
.pkg-status { white-space:normal; overflow-wrap:anywhere; line-height:1.4; color:var(--color-muted); }
.pkg-status[data-state=active],.pkg-status[data-state=sent],.pkg-status[data-state=confirmed],.pkg-status[data-state=completed] { color:var(--color-success); }
.pkg-status[data-state=paused],.pkg-status[data-state=review],.pkg-status[data-state=uncertain] { color:var(--color-warning); }
.pkg-status[data-state=failed],.pkg-status[data-state=error],.pkg-status[data-state=rejected] { color:var(--color-error); }
.pkg-section { padding:28px; }
.pkg-section h2 { font-size:22px; line-height:1.4; }
.pkg-section h3 { font-size:18px; }
.pkg-section .field-hint { font-size:13px; line-height:1.7; }
.pkg-section .section-heading { gap:16px; flex-wrap:wrap; align-items:start; }
.pkg-metrics { gap:24px; }
.pkg-metrics span { font-size:13px; line-height:1.6; }
.pkg-metrics strong { font-variant-numeric:tabular-nums; font-size:28px; }
.pkg-steps a { min-height:56px; font-size:14px; padding:16px 18px; }
.pkg-steps a:hover { background:var(--color-soft); }
.pkg-fields>label { min-width:0; }
.pkg-connect>label { font-size:14px; line-height:1.6; flex-wrap:wrap; }
.pkg-connect>label>select { min-height:44px; max-width:100%; padding:10px 12px; border:1px solid var(--color-line); border-radius:8px; font:inherit; color:var(--color-text); background:var(--color-surface); }
.pkg-notice { color:var(--color-warning); background:var(--color-bg); border-color:var(--color-line); font-size:14px; line-height:1.75; }
.pkg-day-fields { gap:12px 20px; padding:18px; }
.pkg-day-fields legend { font-size:14px; font-weight:600; color:var(--color-ink); padding:0 6px; }
.pkg-day-fields label,.stack-form .pkg-check { font-size:14px; line-height:1.65; min-height:44px; color:var(--color-text); }
.pkg-day-fields input,.pkg-check input { width:18px; height:18px; flex:none; accent-color:var(--color-ink); }
.pkg-connection strong { overflow-wrap:anywhere; }
.pkg-flow li { font-size:14px; }
.pkg-history span,.pkg-history small { font-size:13px; line-height:1.65; }
.pkg-history strong { font-size:15px; line-height:1.6; }
.pkg-history>a:hover { background:var(--color-bg); }
.pkg-message .section-heading { font-size:14px; }
.pkg-message p { font-size:15px; line-height:1.75; overflow-wrap:anywhere; }
.pkg-message summary,.pkg-section>details>summary { font-size:14px; line-height:1.65; cursor:pointer; }
.pkg-facts { padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid var(--color-line); }
.pkg-facts dt { font-size:13px; }
.pkg-facts dd { font-size:15px; line-height:1.65; }
.pkg-link-field { font-size:14px; font-weight:600; }
.pkg-link-field input { min-height:44px; font:inherit; font-size:15px; color:var(--color-text); }
.pkg-decisions { padding-top:22px; border-top:1px solid var(--color-line); }
/* Public booking retains the transparent logo and the same form vocabulary. */
.booking-public>header>.brand { background:#71949a; border-radius:8px; padding:10px 18px; }
.booking-intro>p,.booking-zone p,.booking-status p { font-size:15px; }
.booking-public>header>span,.booking-public>footer { font-size:13px; letter-spacing:0; color:var(--color-muted); }
.booking-date label,.booking-slot { font-size:14px; }
.booking-date input,.booking-slot { min-height:44px; }
.booking-date input { font-size:16px; }
.booking-slot:hover,.booking-slot:focus-visible { background:var(--color-soft); border-color:var(--color-ink); }
.pkg-section input:focus-visible,.pkg-section select:focus-visible,.pkg-section textarea:focus-visible,.booking-slot:focus-visible,.booking-date input:focus-visible { outline:2px solid var(--color-ink); outline-offset:3px; }
@media(max-width:650px) {
 .pkg-section { padding:20px; }
 .pkg-steps a { font-size:14px; }
 .pkg-connect>label,.pkg-connect>label>select { width:100%; }
 .pkg-facts { gap:20px; }
 .booking-public>header>span { display:block; max-width:150px; text-align:right; }
 .booking-public>header { gap:20px; }
}