/* subscribe.css — the two pages either side of a purchase.
 *
 * Shared by subscribe.html and welcome.html. Classes only, never a style
 * attribute: the live CSP sends `style-src 'self'` with no 'unsafe-inline'
 * (AQ-298). Colours come from app.css's tokens so both pages follow the
 * reader's theme without a second palette to keep in step.
 */
.sub-page{background:var(--bg);color:var(--text)}
.sub-head{border-bottom:1px solid var(--grid-soft);padding:14px 0}
.sub-head-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sub-mark{font:600 13px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text);text-decoration:none}
.sub-mark span{color:var(--brand)}
.sub-main{max-width:1040px;padding:48px 20px 64px}
.sub-hero{max-width:760px;margin:0 0 36px}

/* ---- the plans ------------------------------------------------------- */
.sub-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:0 0 20px}
.sub-plan{padding:28px;border:1px solid var(--grid);border-radius:14px;background:var(--panel);
  display:flex;flex-direction:column}
.sub-plan--feature{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset}
.sub-plan-h{margin:0 0 12px;font-size:16px;line-height:1.3;color:var(--text)}
.sub-tag{display:inline-block;margin-left:6px;padding:2px 7px;border-radius:3px;background:var(--accent-bg);
  color:var(--brand);font:600 11px/1.5 var(--mono);letter-spacing:.04em;vertical-align:middle}
.sub-price{margin:0 0 12px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sub-price b{font-size:42px;line-height:1;font-variant-numeric:tabular-nums;color:var(--text)}
.sub-price span{font-size:13px;color:var(--text-dim)}
.sub-plan-p{margin:0 0 18px;font-size:14px;line-height:1.55;color:var(--text-dim)}
.sub-plan .button{margin-top:auto;min-height:44px;justify-content:center}
.sub-status{margin:0 0 26px;min-height:20px;font-size:14px;line-height:1.5;color:var(--brand)}
.sub-status--warn{color:var(--text);padding:12px 14px;border:1px solid var(--brand);border-radius:7px;
  background:var(--accent-bg)}

/* AQ-357: concise purchase note, matching the sibling signup flow. */
.sub-buy-note{margin:0 0 30px;padding:20px 0;border-top:1px solid var(--grid-soft);
  border-bottom:1px solid var(--grid-soft);font-size:14px;line-height:1.7;color:var(--text-dim)}
.sub-buy-note p{margin:0 0 10px}.sub-buy-note p:last-child{margin-bottom:0}
.sub-buy-note b{color:var(--text)}
.sub-alt{margin:0 0 30px;max-width:70ch}
.sub-pre-h{margin:0 0 10px;font-size:15px;line-height:1.3;color:var(--text)}
.sub-fine{margin:0;font-size:12px;line-height:1.65;color:var(--text-dim)}
.sub-plan-note{margin:12px 0 0;text-align:center;font-size:12px;color:var(--text-dim)}

/* ---- welcome.html ----------------------------------------------------- */
.wel{max-width:600px;margin:0 auto;padding:56px 0 64px;text-align:left}
.wel-h{margin:0 0 14px;font-size:28px;line-height:1.2;color:var(--text)}
.wel-p{margin:0 0 18px;font-size:16px;line-height:1.6;color:var(--text-dim)}
.wel-p b{color:var(--text)}
.wel-facts{margin:0 0 24px;border:1px solid var(--grid);border-radius:10px;background:var(--panel);
  padding:6px 18px}
.wel-fact{display:flex;justify-content:space-between;gap:16px;padding:11px 0;font-size:14px;
  border-bottom:1px solid var(--grid-soft)}
.wel-fact:last-child{border-bottom:0}
.wel-fact span:first-child{color:var(--text-dim)}
.wel-fact span:last-child{color:var(--text);font-weight:600;text-align:right}
.wel-again{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 18px}
.wel-msg{margin:0 0 20px;min-height:20px;font-size:14px;line-height:1.5;color:var(--brand)}
@media(max-width:600px){
  .sub-main{padding:28px 20px 48px}
  .wel{padding:36px 0 48px}
  .sub-plan .button,.wel-again .button{width:100%}
}

/* ---- enquiry form ------------------------------------------------------- */
.enq { max-width: 780px; margin: 0 auto; }
/* Off-screen, not display:none. A hidden input is the first thing a bot skips
   and the first thing a screen reader announces; this is invisible to both and
   still filled by anything that fills every field it can find. */
.enq-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enq-grid { display: grid; gap: 15px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.enq-f { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.enq-f > span { font-weight: 600; color: var(--text); }
.enq-f em { font-style: normal; font-weight: 400; color: var(--text-dim); }
.enq-wide { grid-column: 1 / -1; }
.enq-f input, .enq-f select, .enq-f textarea {
  font: inherit; font-size: 15px; color: var(--text);
  background: var(--panel); border: 1px solid var(--grid);
  border-radius: 9px; padding: 11px 12px; width: 100%;
  /* iOS zooms the page on focus for anything under 16px; 15px plus the
     viewport's own scale is the line where it stops doing that. */
  min-height: 46px;
}
.enq-f textarea { min-height: 104px; resize: vertical; line-height: 1.45; }
.enq-f input:focus, .enq-f select:focus, .enq-f textarea:focus {
  border-color: var(--brand); outline: 2px solid var(--brand); outline-offset: 1px;
}
.enq-f input::placeholder, .enq-f textarea::placeholder { color: var(--text-dim); }
.enq-foot {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 20px 0 0;
}
.enq-send { width: auto; min-width: 210px; margin: 0; }
.enq-msg { font-size: 13.5px; color: var(--text-dim); margin: 0; }
.enq-msg.is-bad { color: #b23327; }
.enq-note { font-size: 12.5px; color: var(--text-dim); margin: 14px 0 0; max-width: 62ch; }
.enq-done { font-size: 16px; color: var(--text); margin: 0; padding: 18px 0; }

@media (max-width: 1180px) {
  .plans--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans--four, .eplus { max-width: 100%; width: 100%; margin-left: 0; transform: none; }
}
@media (max-width: 860px) {
  .eplus-in { grid-template-columns: 1fr; gap: 20px; }
  .enq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .plans--four { grid-template-columns: 1fr; }
  .plans--four .plan-for { min-height: 0; }
  .eplus { padding: 24px 20px; }
  .enq-send { width: 100%; }
}


/* AQ-362: the working enquiry layout shared with the Entertainment reference. */
#enquire { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 48px; align-items: start; }
.enq-intro { padding-top: 28px; }
.enq-intro .sec-h { margin-bottom: 14px; }
.enq-intro .sec-p { max-width: 31ch; margin-bottom: 24px; }
.enq-email { color: var(--brand); font-size: 14px; text-underline-offset: 4px; }
#enquire .enq { width: 100%; max-width: none; min-width: 0; margin: 0; padding: 32px; background: var(--bg); border: 1px solid var(--grid); border-radius: 8px; }
#enquire .enq-grid { gap: 22px 20px; }
#enquire .enq-f { gap: 8px; min-width: 0; }
#enquire .enq-f :is(input, select, textarea) { font-size: 16px; min-height: 48px; border-radius: 6px; background: var(--panel); }
#enquire .enq-f textarea { min-height: 136px; line-height: 1.55; }
#enquire .enq-foot { margin-top: 24px; }
#enquire .enq-send { min-height: 48px; }
#enquire .enq-note { margin-top: 18px; line-height: 1.6; }
@media (max-width: 960px) {
  #enquire { grid-template-columns: 1fr; gap: 24px; }
  .enq-intro { padding-top: 0; }
  .enq-intro .sec-p { max-width: 48ch; margin-bottom: 14px; }
}
@media (max-width: 600px) {
  #enquire .enq { padding: 24px 20px; }
  #enquire .enq-grid { gap: 20px; }
  #enquire .enq-send { width: 100%; min-width: 0; }
}
.public-redeem { border-block: 1px solid var(--grid); margin-top: 40px; }
.public-redeem > summary { cursor: pointer; padding: 18px 0; font-size: 13px; font-weight: 500; }
.public-redeem .code-form { margin-top: 0; }

.preview-section .sub-plans{text-align:left}.public-signin{padding:24px}.sub-plans{min-width:0}@media(max-width:360px){.sub-plans{grid-template-columns:minmax(0,1fr)}}

#enquire .plan-cta{display:inline-flex;justify-content:center;align-items:center;min-height:44px;border:1px solid var(--brand);border-radius:6px;background:#1d6bb4;color:#fff;padding:12px 20px;font:600 14px Inter,sans-serif;cursor:pointer}#enquire .sec-h{font-size:24px}#enquire .sec-p{font-size:14px;line-height:1.7}@media(max-width:600px){#enquire .enq-grid{grid-template-columns:1fr}#enquire .enq-foot{display:block}#enquire .enq-send{width:100%}}

html[data-theme=dark] #enquire .enq-msg.is-bad{color:#ffb5aa}