:root{
  /* v3.4 — deck identity: Ivory / Warm Beige / Champagne Gold / Misted Pink / Dusty Plum / Deep Brown */
  --gold:#C5A065; --gold-dk:#A9824E; --navy:#4A3B32; --blue:#8E5B7C; --blue-dk:#75496A;
  --pink:#F4C2C2;
  --ink:#3F322B; --mid:#8A756A; --line:#E6DCD3; --bg:#FDFBF7; --ok:#1e8e3e; --err:#d93025;
  --warn:#b06000; --radius:12px; --shadow:0 2px 10px rgba(63,50,43,.07);
}
*{box-sizing:border-box}
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;800&family=Montserrat:wght@400;500;600;700&display=swap');
body{
  margin:0;font-family:"Noto Sans Thai","Montserrat","Helvetica Neue",Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;
}
.banner{background:var(--gold);padding:34px 20px 92px;text-align:center;color:#fff;position:relative}
.banner h1{margin:0 0 6px;font-size:clamp(20px,3.4vw,32px);font-weight:800;letter-spacing:-.01em}
.banner p{margin:0;font-size:15px;opacity:.95}
/* Event-poster banner (CUSCI01) on the public pages. On wide screens the art
   is CONTAINED inside the gold band so nothing of the poster is ever cropped —
   the gold margins frame it like a print. Phones swap to a centred COVER band:
   at ~390px wide contain would be 146px tall of tiny art, while cover trims
   only the two quiet edges (left grass, right building side). The poster itself
   carries the event title, so the old h1 line moves off-screen rather than
   duplicating it; #ttl/#sub stay in the DOM because app.js writes them. */
.banner.photo{padding:0 0 24px;position:relative;text-align:center}
.banner.photo .poster{
  width:100%;height:clamp(210px,24vw,340px);
  background:url('/img/CUSCI01.jpeg') center/contain no-repeat;
}
.banner.photo .poster{position:relative}
.banner.photo .home{top:14px;left:16px;background:rgba(31,56,100,.45)}
.banner.photo .home:hover,.banner.photo .home:focus-visible{background:rgba(31,56,100,.68)}
.banner.photo .pttl{margin:16px 20px 0;font-size:17px;font-weight:800;color:#fff;
  text-shadow:0 1px 3px rgba(60,45,0,.35)}
.banner.photo .poc-wrap{margin-top:12px}
.banner.photo .poc-wrap .poc-tag{margin-top:0}
/* the card row normally overlaps the gold banner by 70px — with the poster
   that bite would swallow its caption strip, so photo pages stack instead */
.banner.photo+.wrap,.banner.photo+main{margin-top:18px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
@media(max-width:640px){
  /* cropping a 2.67:1 poster on a phone slices the multi-line title across its
     letter-height — worse than showing it whole and small. The element keeps the
     art's exact aspect so the full poster paints, and the readable page identity
     stays in the .pttl caption below. */
  .banner.photo .poster{height:auto;aspect-ratio:8/3;background:url('/img/CUSCI01.jpeg') center/contain no-repeat}
  .banner.photo .home{top:10px;left:10px}
}
/* home link — corner chip on the shared gold banner (index.html + shop.html) */
.banner .home{
  position:absolute;top:12px;left:14px;z-index:3;
  padding:5px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.55);
  background:rgba(31,56,100,.18);color:#fff;font-size:13px;font-weight:700;
  text-decoration:none;line-height:1.4;backdrop-filter:blur(2px)
}
.banner .home:hover,.banner .home:focus-visible{background:rgba(31,56,100,.34);text-decoration:none}
@media(max-width:600px){
  /* the chip is absolute, so give the centred h1 room underneath it */
  .banner{padding-top:56px}
  .banner .home{top:9px;left:9px;font-size:12px;padding:4px 10px}
}
.poc-tag{
  display:inline-block;margin-top:14px;background:rgba(0,0,0,.22);color:#fff;
  padding:4px 12px;border-radius:99px;font-size:12px;font-weight:600
}
.wrap{max-width:920px;margin:0 auto 60px;padding:0 16px}
.card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:26px}
@media(max-width:600px){.card{padding:18px}}

/* stepper */
.steps{display:flex;align-items:flex-start;justify-content:center;gap:0;margin-bottom:26px}
.step{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;width:120px;text-align:center}
.dot{
  width:34px;height:34px;border-radius:50%;background:#c6cbd4;color:#fff;display:grid;
  place-items:center;font-weight:700;font-size:14px;transition:.25s
}
.step.active .dot{background:var(--blue)}
.step.done .dot{background:var(--blue)}
.step small{margin-top:8px;font-size:12px;color:var(--mid);line-height:1.3}
.step.active small{color:var(--navy);font-weight:700}
.bar{height:2px;background:var(--line);flex:1;margin-top:16px;min-width:20px}
.bar.done{background:var(--blue)}
/* Three fixed 120px steps overflow a 375px screen (the LINE in-app browser is
   phone-only), so below 600px let them shrink and wrap their labels instead. */
@media(max-width:600px){
  .step{width:auto;flex:1 1 0;min-width:0;padding:0 2px}
  .step small{font-size:11px}
  .bar{min-width:8px}
}

h2.sec{color:var(--blue);font-size:19px;margin:0 0 16px;font-weight:800}
h3.sub{font-size:15px;margin:22px 0 10px;font-weight:700;color:var(--navy)}

.field{margin-bottom:16px}
label.lb{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:#333}
.req{color:var(--err)}
/* FR-116 — an optional field says so on the label. Leaving the asterisk off is
   not enough on a form where nearly everything else is required: people read the
   pattern, not the individual label, and skip the field by accident.
   Named .optl, not .opt: .opt is already the bordered package-choice card below,
   and reusing it drew a box around this label. */
.optl{color:var(--mid);font-weight:400;font-size:11.5px}
/* FR-604 — the English label, always on its own line beneath the Thai one.
   Distinct from .optl, which is an inline aside ('(ไม่บังคับ)') and stays inline: a
   translation is not an aside, it is the same label again, and running both on one
   line makes each harder to scan and wraps badly for the longer labels
   ('ความช่วยเหลือพิเศษ / Special assistance').
   Always visible rather than behind a TH/EN toggle: 24 of the 902 alumni are
   recorded in Latin script, a toggle defaults half of them to the language they
   cannot read, and a screenshot or printout of the form loses the choice entirely. */
label.lb .en{
  display:block;margin-top:2px;color:var(--mid);
  font-weight:400;font-size:11.5px;line-height:1.3;letter-spacing:.1px
}
input[type=text],input[type=email],input[type=tel],input[type=number],select,textarea{
  width:100%;padding:11px 13px;border:1px solid #c4c9d2;border-radius:8px;font-size:15px;
  font-family:inherit;background:#fff;color:var(--ink);transition:border-color .15s,box-shadow .15s
}
textarea{min-height:80px;resize:vertical}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,115,232,.14)
}
.hint{font-size:12px;color:var(--mid);margin-top:5px}
.hint.rule{color:var(--warn);font-weight:600}
.err{font-size:12.5px;color:var(--err);margin-top:5px;display:none}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--err)}
.field.bad .err{display:block}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.row{grid-template-columns:1fr}}

/* FR-120 — title / given name / surname. Three across on a desktop, one per line
   on a phone. This is a class rather than an inline style on the element for a
   reason: an inline grid-template-columns cannot be overridden by the media query
   below, so the row stayed three-across at 390px with each box about 110px wide,
   which wrapped the labels mid-phrase and pushed the "no surname" tick into a
   four-line column. The 560px breakpoint is tighter than the 600px used for
   two-column rows because three columns run out of room sooner. */
.row-name{grid-template-columns:150px 1fr 1fr}
@media(max-width:560px){
  /* gap:0 because .field already carries margin-bottom:16px, which supplies the
     vertical rhythm once these are stacked; a gap on top of it would double-space
     them. The last field keeps that margin rather than being zeroed — it is the
     last child of the row, but the mobile row is followed by the phone-number
     field, whose label otherwise sits directly against the "no surname" tick. */
  .row-name{grid-template-columns:1fr;gap:0}
  /* Left-aligned and on one line: the label, the English subtitle under it, and
     the box below at full width. */
  .row-name .lb{text-align:left}
  .row-name .optl{display:block;margin-top:2px}
  .row-name input,.row-name select{width:100%}
  /* The tick reads as one line beside its box instead of a wrapped stack. */
  .row-name .cb{align-items:center;margin-top:9px!important}
  .row-name .cb span{font-size:13px!important;line-height:1.35}
}

/* FR-115 — prior-year auto-fill notice. Green, not blue: this is a completed
   action being reported, and it must read differently from the blue hints that
   ask the registrant to do something. */
.prefill{background:#eef8f0;border:1px solid #bfe3c8;border-left:4px solid var(--ok);
  border-radius:8px;padding:11px 14px;margin:0 0 16px;font-size:12.5px;
  color:#1a6e32;line-height:1.65}
.prefill b{font-weight:700}
.prefill .undo{background:none;border:0;color:#1a6e32;font-size:12px;font-weight:700;
  text-decoration:underline;cursor:pointer;padding:0;margin-left:2px;font-family:inherit}
/* The searching state is grey so a slow lookup never looks like a result. */
.prefill.busy{background:#f4f6f8;border-color:#dcdfe4;border-left-color:var(--mid);color:var(--mid)}
/* Fields the system filled in are outlined, so it is obvious at a glance which
   values came from last year and should be checked before submitting. */
.field.filled input,.field.filled select,.field.filled textarea{
  background:#f6fdf8;border-color:#9ed0ac}

/* FR-121 — the step-2 notice that the delivery address was copied from step 1.
   Same green as .prefill and for the same reason: it reports something already
   done. Saying it is what stops three pre-filled boxes looking like a bug. */
.ship-copied{background:#eef8f0;border:1px solid #bfe3c8;border-left:4px solid var(--ok);
  border-radius:8px;padding:10px 13px;margin:0 0 12px;font-size:12.5px;color:#1a6e32;
  line-height:1.6}

/* FR-120 — a surname box switched off by the 'no surname' tick. Greyed rather
   than hidden: the registrant must be able to see that the field is still there
   and that they have deliberately declared it empty. */
.field input:disabled,.field textarea:disabled{
  background:#f1f2f4;color:#9aa0a8;cursor:not-allowed}

/* option cards */
.opts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:8px}
@media(max-width:600px){.opts{grid-template-columns:1fr}}
.opt{
  border:1.5px solid var(--line);border-radius:10px;padding:15px;cursor:pointer;
  background:#fff;transition:.18s;position:relative
}
.opt:hover{border-color:#9db8e8;background:#fbfcfe}
.opt.on{border-color:var(--blue);border-width:2px;background:#f5f9ff;box-shadow:0 0 0 3px rgba(26,115,232,.1)}
.opt b{display:block;font-size:15px;margin-bottom:4px}
.opt span{font-size:12.5px;color:var(--mid);display:block}
.opt .price{color:var(--blue);font-size:19px;font-weight:800;margin-top:10px;display:block}
.opt ul.items{margin:9px 0 0;padding:0;list-style:none}
.opt ul.items li{
  font-size:12px;color:var(--mid);margin-bottom:8px;line-height:1.5;
  display:flex;gap:9px;align-items:flex-start
}
.opt ul.items li:last-child{margin-bottom:0}
/* Product thumbnails inside a package card. */
.opt ul.items img{
  width:52px;height:52px;flex:0 0 52px;object-fit:cover;
  border-radius:7px;border:1px solid var(--line);background:#f1f3f5
}

/* Design cards: photograph above the description. The source images are already
   letterboxed to 5:4, so `contain` shows the whole garment without cropping. */
.opt .photo{
  display:block;width:100%;border-radius:8px;border:1px solid var(--line);
  background:#f1f3f5;margin-bottom:11px;aspect-ratio:5/4;object-fit:contain
}
/* Zoom is a real button in the corner so the rest of the card stays selectable. */
.opt .zoom{
  position:absolute;top:9px;right:9px;background:rgba(255,255,255,.95);
  border:1px solid var(--line);border-radius:99px;font-size:10.5px;font-weight:700;
  color:var(--mid);padding:4px 10px;cursor:zoom-in;font-family:inherit;line-height:1.3
}
.opt .zoom:hover{border-color:var(--blue);color:var(--blue)}

/* Umbrella info panel (no choice to make — shown for reference only). */
.umb{display:flex;gap:14px;align-items:center}
.umb img{
  width:150px;flex:0 0 150px;border-radius:8px;border:1px solid var(--line);
  background:#f1f3f5;cursor:zoom-in
}
@media(max-width:600px){
  .umb{flex-direction:column;align-items:flex-start}
  .umb img{width:100%;flex:none}
}

/* Lightbox for full-size product photographs.
   Named .lightbox, not .lb — .lb is already the form-label class. */
.lightbox{
  position:fixed;inset:0;background:rgba(15,18,22,.86);z-index:99;
  display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out
}
.lightbox img{max-width:100%;max-height:88vh;border-radius:10px;background:#fff}
.lightbox .cap{
  position:absolute;bottom:16px;left:0;right:0;text-align:center;color:#fff;
  font-size:13px;padding:0 24px
}
.sample{
  position:absolute;top:9px;right:9px;background:#fff3cd;color:#7a5b00;
  font-size:10px;padding:2px 7px;border-radius:99px;font-weight:700;border:1px solid #ffe08a
}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  border:1.5px solid var(--line);border-radius:8px;padding:8px 15px;cursor:pointer;
  background:#fff;font-size:14px;transition:.15s;user-select:none
}
.chip:hover:not(.off){border-color:#9db8e8}
.chip.on{border-color:var(--blue);background:#f5f9ff;color:var(--blue-dk);font-weight:700;border-width:2px}
.chip.off{opacity:.4;cursor:not-allowed;text-decoration:line-through;background:#f7f8fa}
.chip small{display:block;font-size:10.5px;color:var(--mid);font-weight:400}

.panel{background:#f8f9fb;border:1px solid var(--line);border-radius:10px;padding:17px;margin-top:14px}
.note{
  background:#fff8e6;border:1px solid #ffe08a;border-left:4px solid var(--gold);
  border-radius:8px;padding:11px 14px;font-size:12.5px;color:#6b5200;margin-bottom:16px
}

/* review */
.review{border:1px solid var(--line);border-radius:10px;padding:18px;margin-bottom:16px}
.review h4{margin:0 0 14px;font-size:15px;color:var(--navy)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
@media(max-width:600px){.grid2{grid-template-columns:1fr}}
.kv label{display:block;font-size:11.5px;color:var(--mid);text-transform:none}
.kv div{font-size:14.5px;font-weight:600;word-break:break-word}

table.sum{width:100%;border-collapse:collapse;margin-top:6px}
table.sum td{padding:9px 0;border-bottom:1px dashed var(--line);font-size:14px}
table.sum td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.sum tr.total td{
  border-bottom:none;border-top:2px solid var(--navy);font-weight:800;
  font-size:17px;color:var(--navy);padding-top:12px
}
#sumBox table.sum{table-layout:fixed}
#sumBox table.sum td{vertical-align:top;overflow-wrap:anywhere}
#sumBox table.sum td:first-child{width:34%;padding-right:12px}
#sumBox table.sum td:last-child{white-space:normal}
#sumBox .sum-amount{display:block;margin-top:4px}

.pay{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center}
@media(max-width:600px){.pay{grid-template-columns:1fr}}
.qr{
  width:150px;height:150px;background:#fff;border:1px solid var(--line);border-radius:8px;
  display:grid;place-items:center;text-align:center;font-size:11px;color:var(--mid);padding:8px
}
.file{
  border:2px dashed #c4c9d2;border-radius:8px;padding:16px;text-align:center;
  cursor:pointer;font-size:13px;color:var(--mid);background:#fafbfc
}
.file:hover{border-color:var(--blue);background:#f5f9ff}
.file.has{border-color:var(--ok);color:var(--ok);background:#f2f9f4;font-weight:600}

.nav{display:flex;justify-content:space-between;gap:12px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
button{font-family:inherit;font-size:15px;font-weight:700;border-radius:8px;cursor:pointer;transition:.15s;border:none}
.btn-back{background:#fff;border:1px solid var(--blue);color:var(--blue);padding:11px 26px}
.btn-back:hover{background:#f5f9ff}
.btn-back:disabled{opacity:.4;cursor:not-allowed;border-color:var(--line);color:var(--mid)}
.btn-next{background:var(--blue);color:#fff;padding:11px 30px}
.btn-next:hover{background:var(--blue-dk)}
.btn-next:disabled{opacity:.55;cursor:wait}

.hide{display:none!important}
.cb{display:flex;gap:10px;align-items:flex-start;font-size:13.5px}
.cb input{margin-top:4px;width:17px;height:17px;flex:0 0 auto;accent-color:var(--blue)}

.done-ico{width:64px;height:64px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-size:34px;margin:0 auto 16px}
.refbox{background:#f8f9fb;border:2px dashed var(--blue);border-radius:10px;padding:16px;text-align:center;margin:18px 0}
.refbox b{font-size:25px;color:var(--blue);letter-spacing:.05em;font-family:ui-monospace,monospace}
.foot{text-align:center;font-size:12px;color:var(--mid);margin-top:18px}
.foot a{color:var(--blue)}

/* FR-320 — event-day check-in QR on the success page. */
.qrbox{background:#fff;border:2px solid var(--navy);border-radius:12px;
  padding:20px 18px;margin:20px 0;text-align:center}
.qrbox h3{margin:0 0 6px;font-size:16px;color:var(--navy);font-weight:800}
.qrbox p{margin:0 0 14px;font-size:13px;color:var(--mid);line-height:1.65}
/* Fixed pixel size with crisp-edges: a QR scaled by a fractional factor blurs
   its module edges, which is exactly what makes a scan fail on a dim screen. */
.qrbox img{width:232px;height:232px;display:block;margin:0 auto;
  image-rendering:pixelated;border:1px solid var(--line);border-radius:8px;background:#fff}
.qrref{font-family:ui-monospace,monospace;font-size:15px;font-weight:700;
  color:var(--navy);letter-spacing:.06em;margin-top:12px}
.qracts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.qracts .btn-next{text-decoration:none;display:inline-block}
.qrnote{font-size:11.5px;color:var(--mid);margin:14px 0 0!important;line-height:1.7}

/* Printing the confirmation must yield the QR and the reference number and
   nothing else — a printed page of navigation buttons is not a ticket. */
@media print{
  body{background:#fff}
  .banner,.steps,.nav,.foot,.poc-tag,.qracts,#okStatusLink{display:none!important}
  .card{box-shadow:none;border:0;padding:0}
  .qrbox{border-color:#000;page-break-inside:avoid}
  .qrbox img{width:270px;height:270px}
}

/* FR-210 — per-shirt rows. Each row is one design + one size + a count, so an
   order of several shirts can mix designs and sizes. */
.irow{
  border:1.5px solid var(--line);border-radius:10px;padding:14px;margin-bottom:12px;
  background:#fcfdfe;position:relative
}
.irow.bad{border-color:var(--err);background:#fef7f6}
.irow-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}
.irow-hd b{font-size:13.5px;color:var(--navy)}
.irow .rm{
  background:#fff;border:1px solid var(--line);border-radius:99px;color:var(--mid);
  font-size:11.5px;font-weight:700;padding:4px 11px;line-height:1.3
}
.irow .rm:hover{border-color:var(--err);color:var(--err)}
.irow-gd{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:start}
@media(max-width:640px){.irow-gd{grid-template-columns:1fr}}
.irow label{display:block;font-size:11.5px;font-weight:700;color:var(--mid);margin-bottom:5px}
.irow select,.irow input{
  width:100%;padding:9px 11px;border:1.5px solid var(--line);border-radius:8px;
  font-size:13.5px;font-family:inherit;background:#fff
}
.irow select:focus,.irow input:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,115,232,.14)
}
.irow .qtyc{width:88px}
/* Thumbnail of the design chosen on this row, so a mis-picked row is visible. */
.irow .ithumb{
  width:100%;max-width:190px;aspect-ratio:5/4;object-fit:contain;border-radius:8px;
  border:1px solid var(--line);background:#f1f3f5;margin-top:10px;cursor:zoom-in
}
.addrow{
  background:#fff;border:1.5px dashed var(--blue);color:var(--blue);
  border-radius:8px;padding:10px 16px;font-size:13px
}
.addrow:hover{background:#f5f9ff}
.addrow:disabled{opacity:.45;cursor:not-allowed;border-color:var(--line);color:var(--mid)}
.itemtot{margin-top:12px;font-size:13px;color:var(--navy);font-weight:700}

/* ---------- FR-400: merchandise shop ---------- */

/* "Anyone may buy" notice. Green like .prefill because it removes a barrier;
   the amber .note style is used elsewhere for things the reader must be careful
   about, and this is the opposite of that. */
.openbox{
  background:#eef8f0;border:1px solid #bfe3c8;border-left:4px solid var(--ok);
  border-radius:8px;padding:12px 15px;margin:0 0 22px;line-height:1.65
}
.openbox b{display:block;font-size:14px;color:#1a6e32;margin-bottom:3px}
.openbox span{display:block;font-size:12.5px;color:#2b6b3d}

/* A product card. Selected state reuses .opt.on, so the shirt/umbrella cards and
   the design cards behave identically to the package cards on the form. */
.opt .mprice{color:var(--blue);font-size:17px;font-weight:800;margin-top:9px;display:block}
.opt .mthumb{
  display:block;width:100%;aspect-ratio:5/4;object-fit:contain;border-radius:8px;
  border:1px solid var(--line);background:#f1f3f5;margin-bottom:10px
}
.opt .mthumb.wide{aspect-ratio:16/9;object-fit:cover}
/* v3.2 — fixed-gift strip on contribution tier cards */
.tierfx{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 8px}
.tierfx img{width:64px;height:64px;object-fit:contain;border-radius:10px;border:1px solid var(--line);background:#fff}
.fxchip{display:inline-block;font-size:11px;color:var(--mid);border:1px dashed var(--line);border-radius:8px;padding:2px 7px;background:#fff}
.tierfx small{display:block;width:100%;order:2;font-size:11px;color:var(--mid);margin-top:-4px}
.opt .mthumb.ph{display:flex;align-items:center;justify-content:center;font-weight:800;letter-spacing:.14em;color:#b9a27a;font-size:12px}

/* Cart lines. A table would be tidier on a desktop but collapses badly at 375px,
   where this page is mostly read, so each line is its own block. */
.cline{
  display:flex;gap:12px;align-items:center;border:1px solid var(--line);
  border-radius:10px;padding:11px 13px;margin-bottom:10px;background:#fcfdfe
}
.cline img{
  width:52px;height:52px;flex:0 0 52px;object-fit:cover;border-radius:7px;
  border:1px solid var(--line);background:#f1f3f5
}
.cline .cinfo{flex:1 1 auto;min-width:0}
.cline .cname{font-size:13.5px;font-weight:700;color:var(--navy);line-height:1.45}
.cline .cmeta{font-size:11.5px;color:var(--mid);margin-top:2px}
.cline .camt{
  font-size:14px;font-weight:700;color:var(--navy);white-space:nowrap;
  font-variant-numeric:tabular-nums
}
.cline .cqty{
  display:flex;align-items:center;gap:6px;flex:0 0 auto
}
.cline .cqty button{
  width:28px;height:28px;border:1px solid var(--line);background:#fff;border-radius:7px;
  color:var(--navy);font-size:15px;font-weight:700;line-height:1;display:grid;place-items:center
}
.cline .cqty button:hover{border-color:var(--blue);color:var(--blue)}
.cline .cqty b{min-width:22px;text-align:center;font-size:13.5px}
.cline .crm{
  background:none;border:0;color:var(--mid);font-size:11.5px;font-weight:700;
  text-decoration:underline;padding:0;flex:0 0 auto
}
.cline .crm:hover{color:var(--err)}
@media(max-width:600px){
  .cline{flex-wrap:wrap}
  .cline .cinfo{flex:1 1 100%;order:1}
  .cline img{order:0}
  .cline .cqty{order:2}
  .cline .camt{order:3;margin-left:auto}
  .cline .crm{order:4;flex:1 1 100%;text-align:right}
}
.cempty{
  border:2px dashed var(--line);border-radius:10px;padding:22px;text-align:center;
  color:var(--mid);font-size:13px;background:#fafbfc
}

/* v2.6 — 'จำเป็นเมื่อสมัครสมาชิก' replaces the (ไม่บังคับ) tag on the email label */
.reqnote{color:var(--err);font-weight:700;font-size:12px;margin-left:6px}

/* ---- v3.3 shop mock layout ---- */
.souvhero{margin:6px 0 14px;text-align:center}
.souvhero .enko{display:block;font-weight:800;letter-spacing:.32em;color:#C89A3D;font-size:13px}
.souvhero .souvttl{margin:2px 0 4px;font-size:30px;color:var(--navy)}
.souvhero .souq{margin:0;font-style:italic;color:var(--mid);font-weight:600}
.souvhero .souq2{margin:2px 0 0;font-size:12.5px;color:#9a8f97;letter-spacing:.06em}
.shoplayout{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
@media(min-width:980px){.shoplayout{grid-template-columns:180px 1fr 270px}}
.shopnav{position:sticky;top:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.shopnav h4{margin:0 0 8px;font-size:13.5px;color:var(--navy)}
.shopnav .catlink{display:block;padding:7px 9px;border-radius:9px;color:var(--ink);text-decoration:none;font-size:14px;font-weight:600}
.shopnav .catlink:hover{background:#f7ece9}
.shopnav .catlink.on{background:linear-gradient(90deg,#fdeef4,#fff);color:var(--blue);box-shadow:inset 3px 0 0 var(--blue)}
.shopgrid.opts{grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.shopcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;box-shadow:0 1px 4px rgba(30,20,25,.04)}
.shopcard .shot{height:190px;border-radius:10px;background:linear-gradient(160deg,#fbf8f2,#f6eef0);display:flex;align-items:center;justify-content:center;overflow:hidden;margin-bottom:10px}
.shopcard .shot img{max-width:100%;max-height:100%;object-fit:contain}
.shopcard .shot.miss{background:linear-gradient(160deg,#f6efe6,#f3e6ea)}
.shopcard .shot.miss::after{content:'SCI-CU 110Y';font-weight:800;letter-spacing:.12em;color:#c9b7a5}
.shopcard h3{margin:0;font-size:16.5px;color:var(--ink)}
.shopcard p{margin:2px 0 8px;font-size:12.5px;color:#8b8590;flex:1}
.shopcard .pricerow{margin-bottom:10px}
.shopcard .pricerow b{font-size:21px;font-weight:800;color:var(--blue)}
.shopcard .addbtn{background:var(--blue);color:#fff;border:0;border-radius:10px;padding:10px;font-size:14.5px;font-weight:700;cursor:pointer}
.shopcard .addbtn:hover{background:var(--blue-dk)}
.cartdock{position:sticky;top:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px;align-self:start}
.cartdock h4{margin:0 0 8px;font-size:14.5px;color:var(--navy)}
.cartdock h4 b{background:var(--blue);color:#fff;border-radius:99px;padding:1px 9px;font-size:12.5px}
.cartdock #cartDockInner .cempty{color:var(--mid);font-size:13px}
.lookcart{width:100%;margin-top:10px;background:#fdeef4;color:var(--blue);border:1px solid #f6cfdd;border-radius:10px;padding:9px;font-weight:800;font-size:14px;cursor:pointer}
.cartdock.flash{box-shadow:0 0 0 3px #f6cfdd}
.trustrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-top:16px}
.trustrow>div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:11px 13px;display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:#8b8590}
.trustrow i{font-style:normal;font-size:20px}
.trustrow b{color:var(--ink);font-size:13.5px}
.pickx{float:right;border:0;background:#f4eef1;color:#8d7f88;border-radius:8px;width:28px;height:28px;font-size:15px;cursor:pointer}
#pickWrap.modalpick{position:fixed;z-index:60;left:50%;transform:translateX(-50%);bottom:4vh;top:auto;width:min(560px,92vw);max-height:78vh;overflow:auto;background:var(--card,#fff);box-shadow:0 -6px 30px rgba(20,10,15,.25);border:1px solid var(--line)}

.bondgrp{margin:16px 0 6px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#C89A3D;font-weight:800}
.bondgrp:first-child{margin-top:2px}

/* ---- v3.3 unified support page ---- */
.pathintro{text-align:center;color:var(--mid);font-size:14.5px;margin:2px 0 10px}
.pathintro b{color:var(--navy)}
.pathtabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.ptab{display:flex;flex-direction:column;gap:2px;text-decoration:none;background:#fff;border:1.5px solid var(--line);border-radius:13px;padding:12px 14px;color:var(--ink)}
.ptab b{font-size:11px;letter-spacing:.18em;color:#C89A3D}
.ptab span{font-size:12px;font-weight:400;color:#8b8590}
.ptab.on{border-color:var(--blue);background:linear-gradient(180deg,#fdf0f5,#fff);box-shadow:0 2px 10px rgba(233,75,125,.12)}
@media(max-width:560px){.pathtabs{grid-template-columns:1fr}}

/* ---- v3.3 overview pane ---- */
.pathtabs.three{grid-template-columns:1fr 1fr 1fr}
@media(max-width:760px){.pathtabs.three{grid-template-columns:1fr}}
.overbox{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px}
.overhead{margin:2px 0 10px;font-size:13px;color:var(--mid);text-align:center}
.overrow{display:grid;grid-template-columns:96px 1fr auto 120px;gap:10px;align-items:center;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px 13px;margin-bottom:8px;cursor:pointer;font:inherit}
.overrow:hover{border-color:var(--blue);background:#fdf7fa}
.overrow b{font-size:15px;color:var(--ink)}
.overrow em{font-style:normal;font-weight:800;color:var(--blue);font-size:15.5px;white-space:nowrap}
.overrow i{font-style:normal;font-size:11.5px;color:#a99fa7}
.overrow.tbc{grid-template-columns:96px 1fr auto;color:#a79fa6;background:#faf8f5;cursor:default;border-style:dashed}
.ochip{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:99px;padding:3px 9px;text-align:center;justify-self:start}
.ochip.individual{background:#fdf3dd;color:#9a6b00}
.ochip.bond{background:#efe9f7;color:#5b3d84}
.ochip.special{background:#fde6ef;color:#b02a5b}
@media(max-width:860px){.overrow{grid-template-columns:1fr auto}.ochip{grid-column:1/3}}

/* ---- v3.4 slim masthead (replaces the poster banner everywhere) ---- */
.mast{position:relative;background:linear-gradient(180deg,#fff 0%,var(--bg) 100%);
  border-bottom:1px solid var(--line);padding:10px 18px 12px;margin:0 0 18px}
@media(min-width:640px){.mast{padding:12px 30px 14px}}
.mast::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;
  background:linear-gradient(90deg,var(--pink),var(--gold) 45%,var(--blue) 100%);opacity:.85}
/* v6.15 (committee, image 1): 13px read as too small next to the mast-row text; 15px + bold so the
   way home is obvious on every page that carries the mast. */
.mast .home{position:static;display:inline;font-size:15px;font-weight:700;color:var(--mid);text-decoration:none;margin-right:14px}
.mast .home:hover{color:var(--blue-dk)}
.mast-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ph-mark{font-family:Cinzel,serif;font-weight:800;letter-spacing:.14em;font-size:14px;color:var(--gold-dk)}
.ph-mark b{color:var(--blue)}
.ph-word{font-family:Cinzel,serif;letter-spacing:.28em;font-size:11px;color:var(--mid);text-transform:uppercase}
.mast h1.ph-title{font-family:Cinzel,"Noto Sans Thai",serif;font-weight:700;font-size:21px;
  color:var(--navy);margin:6px 0 0;letter-spacing:.06em}
.hero169{position:relative;border-radius:0 0 18px 18px;overflow:hidden;margin:0 0 18px;
  max-height:46vh;display:flex;justify-content:center;background:#000}
@media(min-width:640px){.hero169{border-radius:0 0 22px 22px}}
.hero169 img{width:100%;height:100%;max-height:46vh;object-fit:cover;display:block}

/* ---- v3.4.1 ---- */
.pochip{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.06em;background:#fdf3dd;color:#9a6b00;border:1px solid #ecd9ac;border-radius:99px;padding:2px 8px;vertical-align:2px}
.jourend{text-align:center;font-weight:800;color:var(--blue-dk);letter-spacing:.05em;margin:14px 0 2px;font-family:Cinzel,'Noto Sans Thai',serif}
.jourend span{display:block;font-weight:600;font-size:12px;color:var(--mid);letter-spacing:.04em;margin-top:3px;font-family:'Noto Sans Thai',sans-serif}

/* ---- v3.4 content hub (landing) ---- */
.hubwrap{max-width:860px;margin:26px auto 0;padding:0 18px}
.hubwrap.nojs{display:none}
.hsec{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin-bottom:14px;box-shadow:var(--shadow)}
.hsec h2{margin:0 0 10px;font-size:20px;color:var(--navy);font-family:Cinzel,'Noto Sans Thai',serif;letter-spacing:.05em}
.hsec h2 span{display:block;font-size:10.5px;letter-spacing:.24em;color:var(--gold-dk);font-weight:800;margin-bottom:2px;font-family:Montserrat,'Noto Sans Thai',sans-serif}
.prose p{margin:.35rem 0;color:var(--ink)}
.pgdate{color:var(--mid);font-size:13.5px;margin:.1rem 0 .6rem}
.pgtable{width:100%;border-collapse:collapse;font-size:14px}
.pgtable td{border-top:1px solid var(--line);padding:8px 6px;vertical-align:top}
.pgtable .t{white-space:nowrap;font-weight:800;color:var(--blue)}
.pgtable small{display:block;color:var(--mid);font-size:12.5px;margin-top:2px}
.vgrid{display:grid;gap:8px}
.vgrid>div{display:grid;grid-template-columns:110px 1fr;gap:10px;font-size:14px}
.vgrid b{color:var(--mid);font-weight:700}
.vgrid a{color:var(--blue);text-decoration:none;font-weight:600}
.faq details{border-top:1px solid var(--line);padding:8px 2px}
.faq summary{font-weight:700;cursor:pointer;color:var(--ink)}
.faq p{margin:.4rem 0 .1rem;color:var(--mid)}
.phasesec{text-align:center;background:linear-gradient(135deg,#F4C2C2 0%,#C5A065 100%);color:#fff;border-radius:16px;padding:14px;margin-bottom:14px}
.phasesec .cdlabel{font-size:10px;letter-spacing:.3em;opacity:.85}
.cdnum{font-size:26px;font-weight:800;text-shadow:0 1px 10px rgba(74,59,50,.4)}
.afternote{text-align:center;font-weight:700;color:var(--blue-dk);font-size:16px;padding:8px 4px}

/* ---- v3.5 package cart ---- */
.packadd{display:block;margin-top:8px;background:#fdeef4;color:var(--blue);border:1px solid #f6cfdd;border-radius:9px;padding:7px 12px;font-weight:800;font-size:13.5px;cursor:pointer;width:100%}
.packadd:hover{background:var(--blue);color:#fff}
.packrow{position:relative;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 10px;background:#fffdfa}
.packno{position:absolute;right:44px;top:9px;font-size:11px;color:var(--mid)}
.packhead b{font-size:15px;color:var(--ink)}
.packfx{display:block;font-size:12.5px;color:#9a6b00;margin:2px 0 0}
.packdel{position:absolute;right:8px;top:8px;border:0;background:#f4eef1;color:#8d7f88;border-radius:8px;width:26px;height:26px;cursor:pointer}
.packsub{font-size:13px;color:var(--mid);margin-top:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.packsub select,.packqty{border:1px solid var(--line);border-radius:8px;padding:5px 8px;font:inherit;font-size:13px;background:#fff;color:var(--ink)}
.packqty{width:60px}
.pill{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:99px;padding:4px 10px;font-size:12.5px;cursor:pointer;background:#fff}
.pill input{accent-color:var(--blue)}

.packnote{background:#faf5ec;border:1px dashed #e4d3ae;border-radius:9px;padding:6px 10px;font-size:12.5px;color:#8a6a25}
.packsizemax{font-size:11px;color:var(--mid)}

/* v3.5.6 — multi-view strip on shop cards (watch) + full-screen zoom */
.views{display:flex;gap:8px;margin:-2px 0 12px}
.views img{width:52px;height:66px;object-fit:cover;border-radius:8px;border:1.5px solid var(--line);cursor:zoom-in;background:#fff;padding:0}
.views img:hover{border-color:var(--gold)}
.zoom-mask{position:fixed;inset:0;background:rgba(10,8,6,.93);display:flex;align-items:center;justify-content:center;z-index:9999}
.zoom-mask img{max-width:94vw;max-height:88vh;object-fit:contain;border-radius:10px;background:#fff}
.zoom-x{position:absolute;top:12px;right:16px;font-size:34px;line-height:1;color:#fff;background:none;border:0;cursor:pointer;padding:8px}

/* v3.5.7 — cart rows must survive the 242px dock column: allow the qty/price line
   to wrap below the name instead of crushing .cinfo into a glyph column (the
   Pre-order chip blob the committee screenshotted). Wide layout still fits one row. */
.cline{flex-wrap:wrap;row-gap:7px}
.cline .cinfo{flex:1 1 132px}
.cline .cname{overflow-wrap:anywhere}
.cline .pochip{display:inline-block;white-space:nowrap}
.cline .camt{margin-left:auto}

/* v3.5.8 — official merch blurbs (committee table, Theme/Souvenir deck): card copy
   clamped to 4 lines; full text repeats in the picker below the title. */
.shopcard p.pdetail{-webkit-line-clamp:4;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45}
.picksub{font-size:12.5px;color:#6f6a63;line-height:1.55;margin:-2px 0 10px}

/* overview v3.7 — explainer rows (support page) */
.overrow .ovmain{flex:1 1 auto;min-width:0;text-align:left}
.overrow{align-items:flex-start}
.overrow .ovmain b{display:block;font-size:15px}
.ovmean{display:block;font-size:11.5px;font-style:normal;letter-spacing:.05em;color:#8a6d3b;font-weight:700;margin-top:1px}
.overrow .ovbits{display:block;font-style:normal;font-size:12.5px;color:var(--mid);margin-top:2px}
.ovmsg{display:block;font-size:12.5px;color:#5d564e;margin-top:2px}
.ovimgs{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.ovimgs img{width:46px;height:46px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:#fff}
.overrow .ovgo{font-size:12px;color:var(--blue);align-self:center;font-style:normal;white-space:nowrap}

.overrow{display:flex}

/* pane heads v3.7 — 04B journey copy */
.panehead{margin:0 0 10px;text-align:center;line-height:1.5}
.panehead b{display:block;font-size:16.5px;letter-spacing:.09em;color:var(--navy)}
.panehead .ladder{display:block;font-style:normal;font-size:13px;font-weight:800;letter-spacing:.08em;color:#8a6d3b;margin-top:2px}
.panehead .tag{display:block;font-size:12.5px;color:var(--mid)}

/* v3.7 tier cards (support/individual) */
.tiermean{display:block;font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.05em;color:#8a6d3b;margin-top:2px}
.tiermsg{display:block;font-size:12.5px;color:#5d564e}

/* v3.8 — Bond pane: full-width explainer blocks (committee 04/10: รายละเอียดเยอะ ขยายรูปได้) */
#sp-bondList{grid-template-columns:1fr}
.bcard{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;cursor:pointer}
.bcard:hover{border-color:var(--gold)}
.bcard.on{border-color:var(--gold);box-shadow:0 0 0 2px rgba(169,130,78,.25);background:#fffaf1}
.bcard .bcimgs{display:flex;gap:8px;flex-wrap:wrap;flex:0 0 176px}
.bcard .bcimgs img{width:80px;height:80px;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:zoom-in}
.bcard .bcmain{flex:1 1 auto;min-width:0}
.bcard .bcmain b{font-size:16.5px;color:var(--ink)}
.bcamt{color:var(--blue);font-weight:800;white-space:nowrap}
.bcwith{display:block;font-style:normal;font-size:12px;font-weight:800;letter-spacing:.06em;color:#8a6d3b;margin:2px 0 6px}
.bcitems{margin:0;padding-left:18px;font-size:13px;color:#5d564e;line-height:1.55}
.bcrec{display:block;font-size:12.5px;color:var(--mid);margin-top:6px}
@media(max-width:700px){.bcard{flex-direction:column}.bcard .bcimgs{flex:none}}
/* UAT3/2 — coming-soon watch card (no purchase affordances) */
.item.cs{position:relative;border-style:dashed;background:#faf8f4;pointer-events:none;overflow:hidden}
.item.cs img{pointer-events:auto;cursor:zoom-in;width:100%;max-width:160px;aspect-ratio:1/1;object-fit:contain;background:#fff;border-radius:8px;display:block;margin:0 auto}
.item.cs .csband{position:absolute;top:10px;right:10px;background:#8b6c3e;color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.08em;padding:3px 9px;border-radius:7px}
.item.cs img{filter:saturate(.85)}

.item.cs .csen{font-family:Cinzel,serif;letter-spacing:.16em;color:#8b6c3e;font-size:12.5px;text-transform:uppercase;margin:2px 0 6px}
.item.cs .csd{font-size:12.5px;color:#54463a;line-height:1.55}
.item.cs .itembtns{display:none}

/* ---- v4.6 (batch 1-2): the shared review step (public/flow.js) ----
   Kept in its own visual language because the two lanes it replaces had drifted:
   one inline amber panel, one fixed modal whose open() never worked against .hide.
   Never give these nodes the .hide class — visibility is driven by the [hidden]
   attribute so a stray !important rule cannot hide a step the payer must click. */
.flow-review{margin:14px 0}
.flow-review [hidden]{display:none!important}
.flow-alert{border:2px solid #d97706;background:#fff7ea;border-radius:12px;padding:14px 16px;margin:8px 0 12px}
.flow-alert>b{font-size:14.5px;color:#7c4a03}
.flow-alert p{font-size:13px;color:#5f3d09;margin:7px 0}
.flow-alert-body{font-size:13px;line-height:1.75;color:#3b2a17}
.flow-alert-body b{color:#7c4a03}
.flow-alert-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.flow-alert-acts .btn-back{flex:0 0 auto}
.flow-done{border:2px solid var(--ok);background:#f2f9f4;border-radius:12px;padding:11px 14px;
  margin:8px 0 12px;font-size:13.5px;color:#0d5a2a;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.flow-done b,.flow-done span{font-weight:800}
.flow-edit{background:none;border:1px solid var(--ok);color:#0d5a2a;font-size:12.5px;font-weight:700;
  border-radius:8px;padding:5px 10px;cursor:pointer;font-family:inherit}
.flow-edit:hover{background:#e3f4e8}
/* the order button is locked (not hidden) until the review is confirmed, so the
   payer can see what is coming and the reason is in its title/tooltip */
.btn-next:disabled{opacity:.45;cursor:not-allowed}

/* ---- v4.7 (batch 3): one thank-you card for all three order lanes -------------
   /shop drew this card first (tick, dashed reference box, recipient block, two
   buttons, LINE footer); the two support lanes each had their own paragraph, so the
   same event — "your order is saved, keep this number" — looked like three
   different products. These classes are shared, not copied per lane. */
.done-note{max-width:520px;margin:8px auto 0;font-size:13.5px;font-weight:700;color:#1c3d5a;text-align:center}
.cardacts{margin-top:20px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cardacts .btn-next{text-decoration:none;display:inline-block}
/* the ship block and the reviewer open/close through the [hidden] attribute, never
   through .hide — .hide is display:none !important and once swallowed a whole lane */
#shipNote,#okShip,#sp-okShip{margin-top:12px}

/* ---- v4.8 (batch 5): the one-tap "use my details" button, same in every lane -----
   Each lane had built its own inline-styled button with its own wording, so the shop
   said "ใช้ชื่อเดียวกับผู้สั่งซื้อ" and never mentioned that it also fills the phone.
   Behaviour was already the same (copies name + phone); only the promise differed. */
.copy-party{display:inline-block;margin:0 0 10px;padding:8px 12px;border:1px solid #d8cfc4;border-radius:9px;
  background:#faf6ef;color:#6b5d4c;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit}
.copy-party:hover{border-color:var(--blue);background:#f5f9ff;color:var(--blue-dk)}

/* v5.4 — the confirmation-card head, shared by /shop, Individual and Bond.
   Mock-ups from the committee show the same four lines on every card: what this is,
   the event name, the Thai motto and one English line that differs per lane.
   Text only; no layout dependency on the lanes above it. */
.cardhead{text-align:center;margin:0 0 10px}
.cardhead .ch-k{display:block;font-weight:800;font-size:13.5px;color:var(--plum);letter-spacing:.02em}
.cardhead .ch-name{display:block;font-weight:700;font-size:12px;letter-spacing:.1em;color:var(--ink4,#6b6355);margin-top:3px}
.cardhead .ch-motto{display:block;font-size:12.5px;color:var(--mid);margin-top:2px}
.cardhead .ch-slog{display:block;font-size:11.5px;font-style:italic;color:var(--gold-dk,#a9824e);margin-top:4px}

/* v6.2 - the FORM's group titles (Section A-D) sit one level below the step titles (h2.sec = 19px),
   and each title's note is body text rather than a box, so the pane reads 1) 2) 3) 4) first.
   Sizes derive from h2.sec so a theme change moves the pair together. */
h2.sec.bondsec{font-size:15px;margin:20px 0 3px;color:var(--navy);letter-spacing:.1px}
.bondnote{font-size:13.5px;line-height:1.5;color:var(--mid);margin:0 0 10px;font-weight:400}

/* v6.17 (committee): the "FORM n : ..." line under the level picker describes the journey, so it is
   typed like a note - smaller than both the step title (19px) and the section title (15px), italic
   and muted - not like a second heading competing with them. */
.pane-note{font-size:12.5px;font-style:italic;color:var(--mid);margin:8px 0 0;letter-spacing:.01em}

/* v6.18: the sentence that used to hide in a title attribute. Placed under the locked button so the
   payer sees WHY it is dead and what to press, on touch devices especially. */
.lockhint{font-size:13px;color:var(--err);font-weight:700;margin:8px 0 0;line-height:1.45}
.lockhint:empty{display:none}

/* v6.19: /track is the single status page (MC/IC/SP + the registration, one standard condition),
   but until now it could only be reached from a receipt. The mast carries it on both order lanes. */
.mast-status{margin-left:auto;font-size:14px;font-weight:700;color:var(--blue-dk);text-decoration:none}
.mast-status:hover,.mast-status:focus-visible{text-decoration:underline}
@media(max-width:600px){.mast-status{margin-left:0}}