/* The Bill Pay guide (/bill-pay-help): large readable text, the example screens drawn in HTML, and the print rules. Loaded only on that page. */
.guide{padding:8px 0 56px;}
.guide-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:2px solid var(--hairline);margin-bottom:24px;}
.guide-help{margin:0;font-size:1.3rem;font-weight:600;}
.guide-help a,.guide-end a{color:var(--red-dark);font-weight:700;text-underline-offset:3px;}
.guide-back{display:inline-flex;align-items:center;min-height:52px;font-size:1.25rem;font-weight:700;color:var(--red-dark);text-underline-offset:3px;}
.guide-bar .btn{font-size:1.15rem;min-height:52px;padding:12px 28px;}
.guide-jump{background:var(--light);padding:22px 26px;margin-bottom:20px;}
.guide-jump h2{font-size:1.5rem;margin-bottom:10px;}
.guide-jump ol{margin:0;padding-left:1.4em;font-size:1.25rem;}
.guide-jump li{margin-bottom:10px;}
.guide-jump a{color:var(--ink);font-weight:600;text-underline-offset:3px;}
.guide-jump a:hover,.guide-jump a:focus-visible{color:var(--red-dark);}
.guide-note{font-size:1.1rem;color:var(--muted);margin-bottom:32px;}
.guide-task{display:grid;grid-template-columns:1fr;gap:28px;padding:40px 0;border-top:2px solid var(--hairline);scroll-margin-top:calc(var(--header-offset) + 12px);}
.guide-task-words{max-width:none;}
.guide-task-words h2{font-size:clamp(1.9rem,4.5vw,2.5rem);}
.guide-task-words ol{font-size:1.3rem;line-height:1.5;padding-left:1.6em;margin:0 0 1.2em;}
.guide-task-words ol li{margin-bottom:16px;padding-left:4px;}
.guide-task-words ol li::marker{font-weight:800;color:var(--red-dark);}
.guide-task-words p,.guide-task-words li{font-size:1.3rem;}
.guide-task-words p.small{font-size:1.15rem;color:var(--muted);}
.guide-task-words p.lead{font-size:1.3rem;background:var(--light);padding:14px 18px;border-left:6px solid var(--red);}
.guide-task-words a{color:var(--red-dark);font-weight:700;}
.guide-task-pics{display:flex;flex-direction:column;gap:28px;min-width:0;}
.guide-end{font-size:1.25rem;margin-top:24px;padding-top:24px;border-top:2px solid var(--hairline);}
/* REDS-site-polish-4: one reading column of steps, then the example screens in a grid under it. No side-by-side halves, so a tall column can never leave a hole beside a short one. */
.guide-task-words{max-width:760px;}
@media (min-width:700px){ .guide-task-pics{display:grid;grid-template-columns:repeat(2,minmax(0,460px));gap:32px;align-items:start;} }
@media (min-width:1100px){ .guide-task-pics{grid-template-columns:repeat(3,minmax(0,460px));} }

/* An example screen: a copy of the real page, in the same colours, with made-up details. Not a control: nothing in it can be tapped. */
.ex{margin:0;max-width:460px;width:100%;}
.ex-screen{border:2px solid #8B857E;border-radius:14px;background:#fff;padding:22px 20px;display:flex;flex-direction:column;gap:14px;font-size:1.15rem;line-height:1.4;color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.08);user-select:none;pointer-events:none;}
.ex figcaption{font-size:1.1rem;color:var(--muted);margin-top:10px;line-height:1.4;}
.ex figcaption b{color:var(--ink);}
.ex-title{font-family:var(--serif);font-size:1.55rem;font-weight:600;line-height:1.15;}
.ex-sub{margin:0;color:var(--muted);font-size:1.05rem;}
.ex-step{font-size:.95rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);}
.ex-field{display:flex;flex-direction:column;gap:5px;}
.ex-label{font-size:1rem;font-weight:700;color:var(--muted);}
.ex-input{display:block;min-height:50px;border:2px solid #8B857E;border-radius:9px;padding:10px 14px;font-size:1.2rem;background:#fff;overflow:hidden;white-space:nowrap;}
.ex-input.ex-empty{color:#6d6862;}
.ex-hint{font-size:.95rem;color:var(--muted);}
.ex-btn{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:9px;font-weight:700;font-size:1.15rem;padding:8px 18px;border:2px solid var(--ink);text-align:center;}
.ex-btn.is-primary{background:var(--red);border-color:var(--red);color:#fff;}
.ex-btn.is-secondary{background:#fff;color:var(--ink);}
.ex-link{display:block;color:var(--red-dark);text-decoration:underline;font-weight:600;font-size:1.1rem;padding:4px 0;}
.ex-msg{background:#fbeaea;color:#8c0b20;border-radius:9px;padding:12px 14px;font-size:1.05rem;}
.ex-rules{margin:0;padding-left:1.3em;font-size:1rem;color:var(--muted);}
.ex-check{display:flex;gap:12px;align-items:center;font-size:1.1rem;}
.ex-box{flex:0 0 26px;height:26px;border:2px solid var(--ink);border-radius:5px;display:inline-block;position:relative;}
.ex-box.is-on{background:var(--ink);}
.ex-box.is-on::after{content:"";position:absolute;left:7px;top:2px;width:7px;height:13px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg);}
.ex-opt{display:flex;gap:12px;align-items:center;border:2px solid #8B857E;border-radius:10px;padding:12px 14px;}
.ex-opt.is-on{border-color:var(--ink);background:var(--light);}
.ex-opt.is-off{opacity:.7;}
.ex-opt b{display:block;font-size:1.1rem;}
.ex-opt small{display:block;font-size:.95rem;color:var(--muted);}
.ex-opt em{margin-left:auto;font-style:normal;font-size:.85rem;font-weight:800;background:#EAF6EC;color:#1E6B3A;border-radius:100px;padding:3px 10px;}
.ex-opt strong{margin-left:auto;font-variant-numeric:tabular-nums;}
.ex-radio{flex:0 0 24px;height:24px;border:2px solid var(--ink);border-radius:50%;position:relative;}
.ex-radio.is-on::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--ink);}
.ex-tabs{display:flex;flex-wrap:wrap;gap:6px;}
.ex-tabs span{border:1px solid #D7D4CE;border-radius:100px;padding:6px 12px;font-size:.95rem;font-weight:600;color:var(--muted);}
.ex-tabs span.is-on{background:#fbeaea;border-color:var(--red-dark);color:var(--red-dark);}
.ex-review{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;}
.ex-review dt{color:var(--muted);font-weight:700;}
.ex-review dd{margin:0;}
.ex-review dd.big{font-size:1.6rem;font-weight:800;}
.ex-ok{width:52px;height:52px;border-radius:50%;background:#EAF6EC;color:#1E6B3A;display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:800;}
.ex-headrow{display:flex;flex-direction:column;gap:12px;}
.ex-row{display:flex;gap:12px;align-items:center;border-top:1px solid #D7D4CE;padding-top:12px;}
.ex-row b{display:block;}
.ex-row small{display:block;font-size:.95rem;color:var(--muted);}
.ex-brand{flex:0 0 auto;border:1px solid #8B857E;border-radius:6px;padding:6px 10px;font-weight:800;font-size:.85rem;}
.ex-secure{font-size:.95rem;font-weight:700;color:var(--muted);}
.ex-two{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
/* the thing to tap or tick */
.ex-hot{outline:none;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--red);border-radius:9px;margin-block:6px;}
.ex-hot.ex-link{padding:6px 8px;margin-inline:6px;}
u.ex-hot{display:inline-block;margin:8px 4px 4px;padding:2px 4px;}
@media (max-width:420px){.ex-screen{padding:18px 14px;}.ex-title{font-size:1.4rem;}}

/* Printing: no site header, menu or footer; big black text; each task on its own page. */
@media print{
  @page{margin:16mm;}
  .utility,header.site,footer.site,.skip-link,.breadcrumb,.guide-bar .btn,.guide-back,#mobile-menu{display:none !important;}
  body{font-size:15pt;background:#fff;color:#000;}
  .wrap{max-width:none;padding:0;}
  .page-head{padding:0 0 8pt;background:none !important;color:#000 !important;}
  .page-head h1{font-size:28pt;color:#000;}
  .page-head .standfirst{font-size:15pt;color:#000;}
  .page-head .kicker{color:#000;}
  .guide{padding:0;}
  .guide-bar{border:0;padding:0 0 10pt;}
  .guide-help{font-size:16pt;}
  .guide-note{font-size:13pt;color:#000;}
  .guide-jump{background:none;border:2pt solid #000;padding:10pt 14pt;}
  .guide-jump ol,.guide-jump h2{font-size:15pt;}
  .guide-jump a{color:#000;}
  .guide-task{display:block;border:0;padding:0;break-before:page;page-break-before:always;}
  .guide-task-words h2{font-size:26pt;}
  .guide-task-words p,.guide-task-words li,.guide-task-words ol{font-size:15pt;}
  .guide-task-words p.lead{background:none;border:2pt solid #000;}
  .guide-task-words a,.guide-help a,.guide-end a{color:#000;text-decoration:underline;}
  .guide-task-pics{display:grid;grid-template-columns:1fr 1fr;gap:12pt;margin-top:12pt;}
  .ex{max-width:none;break-inside:avoid;page-break-inside:avoid;}
  .ex-screen{box-shadow:none;border-color:#000;font-size:12pt;padding:10pt;gap:8pt;}
  .ex-title{font-size:15pt;}
  .ex-input,.ex-opt{border-color:#000;}
  .ex-hot{outline:3pt solid #000;}
  .ex figcaption{font-size:11pt;color:#000;}
  .guide-end{font-size:15pt;break-before:avoid;}
  .ex-btn.is-primary{background:#fff !important;color:#000 !important;border:2pt solid #000;}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}