/* ---------------------------------------------------------------------------
   The signing page (/sign/, js/agreement-sign.js). It wears the account
   page's dress (css/account.css): the dark cards, the fields and buttons.
   The documents themselves are drawn as sheets of paper, light with dark
   ink, so what the signer reads looks like the copy they get. The initials
   boxes are dashed gold until they are tapped, then teal with the time;
   the signature box the same, in the ink the PDF uses (#1C2D5A).
   --------------------------------------------------------------------------- */
.sg-wrap { width: min(880px, 100% - 32px); }
/* The account page's links take their colour from the text around them;
   a link drawn as a button keeps the button's. */
.sg-wrap a.acct-btn { color: #111; text-align: center; text-decoration: none; }
.sg-wrap a.acct-btn--ghost { color: var(--gold); }
.sg-wrap a.acct-btn--ghost:hover { color: #111; }
.sg-wrap a.acct-link-btn { color: #edc68c; }
.sg-head { margin-bottom: 22px; }
.sg-back { margin: -8px 0 18px; font-size: .92rem; }
.sg-back[hidden] { display: none; }
.sg-wrap .sg-back a { color: #edc68c; text-decoration: none; }
.sg-back a::before { content: '\2190\00a0'; }
.sg-back a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sg-app { min-height: 40vh; }
.sg-h:focus { outline: none; }
.sg-banner { max-width: 44em; margin: 0 auto 18px; padding: 12px 16px; border: 1px solid rgba(237, 198, 140, .5); border-left: 3px solid #edc68c; background: rgba(196, 148, 74, .1); color: var(--sand); font-size: .95rem; line-height: 1.55; }
.sg-card { margin: 0; }
.sg-card + .sg-card { margin-top: 20px; }
.sg-intro { margin: 0 0 18px; }
.sg-intro a { color: #edc68c; text-decoration: underline; text-underline-offset: 3px; }
.sg-sub { font-family: var(--font-body); font-size: .74rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 28px 0 14px; padding-bottom: 8px; border-bottom: 1px solid rgba(196, 148, 74, .22); }
.sg-card > .sg-sub:first-of-type { margin-top: 8px; }
.sg-label { display: block; font-size: .688rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--off-white, #e8e0d4); margin-bottom: 7px; }
.sg-note { margin: 12px 0 0; padding: 10px 14px; border-left: 3px solid #edc68c; background: rgba(196, 148, 74, .1); color: var(--sand); font-size: .95rem; line-height: 1.5; }

/* The steps: a bar for each, gold once done. On a phone only the bars show,
   under "Step 2 of 6: Consent". */
.sg-steps { margin: 0 0 22px; }
.sg-steps-now { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.sg-progress { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; }
.sg-progress li { flex: 1 1 0; min-width: 0; }
.sg-pstep { display: flex; flex-direction: column; gap: 4px; width: 100%; padding: 10px 2px 0; border: 0; border-top: 3px solid rgba(196, 148, 74, .25); background: none; color: #8f877b; font: inherit; text-align: left; }
button.sg-pstep { cursor: pointer; }
button.sg-pstep:hover { color: var(--sand); }
.sg-progress li.is-done .sg-pstep { border-top-color: var(--gold); color: #ddd5c9; }
.sg-progress li[aria-current="step"] .sg-pstep { border-top-color: #edc68c; color: var(--sand); }
.sg-pstep-n { font-size: .68rem; font-weight: 600; letter-spacing: .14em; }
.sg-progress li.is-done .sg-pstep-n::after { content: ' \2713'; color: var(--gold); }
.sg-pstep-t { font-size: .72rem; font-weight: 600; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; overflow-wrap: anywhere; }
.sg-pstep:focus-visible { outline: 2px solid #edc68c; outline-offset: 3px; }

/* Choosing the expedition. */
.sg-options { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.sg-option { display: block; width: 100%; padding: 16px 18px; border: 1px solid rgba(196, 148, 74, .32); background: rgba(196, 148, 74, .05); color: var(--sand); font: inherit; text-align: left; cursor: pointer; }
.sg-option:hover { border-color: var(--gold); background: rgba(196, 148, 74, .1); }
.sg-option:focus-visible { outline: 2px solid #edc68c; outline-offset: 3px; }
.sg-option-t { display: block; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.3; }
.sg-option-d { display: block; margin-top: 4px; color: #c9c0b2; font-size: .9rem; line-height: 1.45; }
.sg-bookings { list-style: none; margin: 0; padding: 0; }
.sg-bk + .sg-bk { margin-top: 18px; }
.sg-bk-title { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.3; }
.sg-bk-title span { margin-left: 8px; font-family: var(--font-body); font-size: .9rem; color: #c9c0b2; }
.sg-bk-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(196, 148, 74, .18); }
.sg-bk-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name act" "state act"; align-items: center; column-gap: 18px; row-gap: 2px; padding: 12px 0; border-bottom: 1px solid rgba(196, 148, 74, .18); }
.sg-bk-name { grid-area: name; color: var(--sand); font-weight: 600; overflow-wrap: anywhere; }
.sg-you { color: #c9c0b2; font-weight: 400; }
.sg-bk-state { grid-area: state; color: #c9c0b2; font-size: .94rem; overflow-wrap: anywhere; }
.sg-bk-act { grid-area: act; display: flex; justify-content: flex-end; }
.sg-bk-act .acct-btn--small { min-height: 44px; }
.sg-bk-status { margin: 12px 0 0; color: var(--sand); font-size: 1rem; }
.sg-bk-status:empty { display: none; }
.sg-bk-status.is-good { color: #b9dcb0; }
.sg-bk-status.is-bad { color: #ffcfc7; }
.sg-bk-status a { color: #edc68c; text-decoration: underline; text-underline-offset: 3px; }
.sg-bookings + .sg-bk-status + .sg-sub, .sg-bookings + .sg-sub { margin-top: 30px; }

/* The consent. */
.sg-tripline { margin: 0 0 16px; font-family: var(--font-display); font-size: 1.12rem; line-height: 1.35; color: #edc68c; }
.sg-tripline span { display: block; font-family: var(--font-body); font-size: .92rem; color: #c9c0b2; }
.sg-tripline a { font-family: var(--font-body); font-size: .88rem; color: #edc68c; text-decoration: underline; text-underline-offset: 3px; }
.sg-disclosure { padding: 18px 20px; border: 1px solid rgba(196, 148, 74, .22); background: rgba(245, 237, 224, .03); color: #ddd5c9; font-size: 1rem; line-height: 1.6; }
.sg-disclosure p + p { margin-top: 12px; }
.sg-disclosure strong { color: var(--sand); font-weight: 600; }
.sg-sample { margin: 16px 0 18px; }
.sg-check { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid rgba(196, 148, 74, .45); background: rgba(196, 148, 74, .07); color: var(--sand); font-size: 1rem; line-height: 1.5; cursor: pointer; }
.sg-check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--gold); cursor: pointer; }
.sg-check input:disabled { cursor: default; }
.sg-check input:focus-visible { outline: 2px solid #edc68c; outline-offset: 3px; }
.sg-check + .acct-help { margin-top: 10px; }
.sg-check + .acct-help + .acct-err, .sg-check + .acct-err { margin-top: 10px; }

/* The signer's details. */
.sg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; margin: 0 0 18px; background: rgba(196, 148, 74, .2); border: 1px solid rgba(196, 148, 74, .2); }
.sg-facts > div { background: var(--wpj-card, #161616); padding: 12px 14px; min-width: 0; }
.sg-facts dt { font-size: .688rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #c9c0b2; }
.sg-facts dd { margin: 4px 0 0; color: var(--sand); overflow-wrap: anywhere; }
.sg-facts dd a { color: #edc68c; text-decoration: underline; text-underline-offset: 3px; }
.sg-facts--one { grid-template-columns: 1fr; margin-bottom: 16px; }
.sg-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
/* A country, chosen from the list under its box as it is typed. */
.sg-combo { position: relative; }
.sg-combo-list { position: absolute; z-index: 30; left: 0; right: 0; margin: -1px 0 0; padding: 4px 0; list-style: none; max-height: 18rem; overflow-y: auto; overscroll-behavior: contain; background: var(--wpj-card, #161616); border: 1px solid var(--gold); box-shadow: 0 16px 32px rgba(0, 0, 0, .55); }
.sg-combo-list[hidden] { display: none; }
.sg-combo-list li { padding: 12px 14px; color: var(--sand); line-height: 1.35; cursor: pointer; }
.sg-combo-list li.is-active { background: rgba(196, 148, 74, .22); color: #fff; box-shadow: inset 3px 0 0 #edc68c; }
@media (hover: hover) { .sg-combo-list li:hover { background: rgba(196, 148, 74, .14); } }
.sg-dob { display: grid; grid-template-columns: 6rem minmax(0, 1fr) 7rem; gap: 10px; }

/* The initials and signature the signer adopts. */
.sg-adopt .sg-sigtabs { margin: 0 0 14px; max-width: 360px; }
.sg-adopt input[data-field="sigtext"] { max-width: 520px; }
.sg-sigpreview { display: flex; align-items: center; max-width: 520px; min-height: 88px; margin-top: 10px; padding: 8px 20px; border: 1px solid rgba(196, 148, 74, .4); background: #fbf8f2; overflow: hidden; }
.sg-script { font-family: 'Dancing Script', 'Brush Script MT', cursive; font-weight: 500; font-size: 2.3rem; line-height: 1.2; color: #1c2d5a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sg-pad { position: relative; max-width: 640px; aspect-ratio: 3.5 / 1; border: 1px solid rgba(196, 148, 74, .4); background: #fbf8f2; touch-action: none; -webkit-user-select: none; user-select: none; }
.sg-pad canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.sg-pad-line { position: absolute; left: 6%; right: 6%; bottom: 26%; border-top: 1px solid #cdbfad; pointer-events: none; }
.sg-pad-hint { position: absolute; left: 6%; bottom: 9%; color: #8a8178; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; pointer-events: none; }
.sg-pad-tools { margin: 6px 0 0; }

/* A document, as a sheet of paper. */
.sg-docintro { margin-bottom: 20px; }
.sg-docintro .sg-intro { margin: 0; }
.sg-docintro a { color: #edc68c; text-decoration: underline; text-underline-offset: 3px; }
.sg-paper { position: relative; padding: 46px 54px 40px; background: #fbf8f2; color: #1a1a1a; border-top: 3px solid var(--gold); box-shadow: 0 18px 50px rgba(0, 0, 0, .35); font-size: 1rem; line-height: 1.62; }
.sg-paper p { margin: 0 0 12px; }
.sg-paper strong { font-weight: 600; }
.sg-paper a { color: #1b5e6b; text-decoration: underline; }
.sg-doc-org { margin: 0 0 10px; text-align: center; color: #8a8178; font-size: .7rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; }
.sg-doc-title { margin: 0 0 6px; text-align: center; font-family: var(--font-display); font-size: 1.75rem; font-weight: 400; line-height: 1.2; color: #1a1a1a; }
.sg-paper .sg-doc-sub { margin: 0 0 4px; text-align: center; color: #5f5850; font-size: .92rem; }
.sg-paper .sg-doc-trip { margin: 4px 0 18px; text-align: center; color: #1b5e6b; font-weight: 600; }
.sg-doc-notice { margin: 16px 0 22px; padding: 14px 16px; border: 1px solid #cdbfad; background: #f3ece0; font-size: .92rem; font-weight: 600; line-height: 1.55; }
.sg-doc-h { margin: 28px 0 8px; font-family: var(--font-body); font-size: .82rem; font-weight: 600; letter-spacing: .14em; line-height: 1.4; text-transform: uppercase; color: #1b5e6b; }
.sg-paper .sg-doc-ack { padding: 2px 0 2px 14px; border-left: 3px solid var(--gold); }
.sg-doc-facts { margin: 8px 0 20px; border-top: 1px solid #cdbfad; }
.sg-doc-facts > div { display: grid; grid-template-columns: 15em minmax(0, 1fr); gap: 4px 16px; padding: 8px 0; border-bottom: 1px solid #e3d8c8; }
.sg-doc-facts dt { color: #5f5850; font-size: .86rem; line-height: 1.45; }
.sg-doc-facts dd { margin: 0; color: #1a1a1a; font-weight: 600; overflow-wrap: anywhere; }

/* An initials box: dashed gold until it is tapped, then the signer's
   initials in teal with the time. */
.sg-init { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 12px; margin: 4px 0 22px; padding-top: 10px; border-top: 1px dashed #ddd0bd; }
.sg-init-label { color: #5f5850; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.sg-mark { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 7.5em; min-height: 46px; padding: 6px 14px; border: 1.5px dashed var(--gold); background: #fff6e4; color: #7a5a24; font: inherit; font-size: .76rem; font-weight: 600; letter-spacing: .14em; line-height: 1.15; text-transform: uppercase; cursor: pointer; }
button.sg-mark:hover { background: #fdebc8; border-style: solid; }
.sg-mark:focus-visible, .sg-signbtn:focus-visible, .sg-undo:focus-visible, .sg-paper .acct-link-btn:focus-visible { outline: 2px solid #1b5e6b; outline-offset: 2px; }
.sg-mark.is-done { border: 1.5px solid #1b5e6b; background: #eef5f3; color: #1b5e6b; cursor: default; letter-spacing: 0; text-transform: none; }
.sg-mark.is-done:focus:not(:focus-visible), .sg-signed:focus:not(:focus-visible) { outline: none; }
.sg-mark-ink { font-size: 1.08rem; font-weight: 600; letter-spacing: .06em; }
.sg-mark-at { color: #5f5850; font-size: .68rem; font-weight: 400; letter-spacing: .02em; text-transform: none; }
.sg-undo { position: relative; padding: 6px 2px; border: 0; background: none; color: #1b5e6b; font: inherit; font-size: .82rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sg-undo::after { content: ''; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }

/* A choice of two: initial one option, and the other stands back. */
.sg-choice { display: grid; gap: 12px; margin: 12px 0 22px; }
.sg-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "text mark" "fields fields" "err err"; column-gap: 18px; align-items: start; padding: 14px 16px; border: 1px solid #cdbfad; background: #fffdf8; }
.sg-opt.is-chosen { border-color: #1b5e6b; background: #f1f7f5; box-shadow: inset 3px 0 0 #1b5e6b; }
.sg-opt.is-other .sg-opt-text { color: #6f675e; }
.sg-opt-text { grid-area: text; }
.sg-opt-text p, .sg-opt-text:last-child { margin: 0; }
.sg-opt-mark { grid-area: mark; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sg-opt-fields { grid-area: fields; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.sg-opt-err { grid-area: err; margin: 10px 0 0; color: #a3341f; font-size: .9rem; }
.sg-in label { display: block; margin-bottom: 4px; color: #5f5850; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.sg-in-opt { font-weight: 400; letter-spacing: 0; text-transform: none; }
.sg-in input { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid #cdbfad; border-radius: 0; background: #fff; color: #1a1a1a; font: inherit; font-size: 1rem; }
.sg-in input:focus { border-color: #1b5e6b; outline: 2px solid #1b5e6b; outline-offset: 0; }
.sg-in input[aria-invalid="true"] { border-color: #c0533d; background: #fff6f4; }
.sg-docfields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0 18px; }
.sg-in-help { grid-column: 1 / -1; margin: 0; color: #5f5850; font-size: .86rem; }

/* A self-certification: each line numbered and initialled on its own. */
.sg-cert { list-style: none; margin: 8px 0 22px; padding: 0; counter-reset: cert; border-top: 1px dashed #ddd0bd; }
.sg-cert li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 18px; padding: 12px 0; border-bottom: 1px dashed #ddd0bd; counter-increment: cert; }
.sg-cert li > span:first-child::before { content: counter(cert) '. '; color: #1b5e6b; font-weight: 600; }
.sg-cert-mark { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sg-cert-help { margin: -12px 0 22px; }

.sg-yesno { margin: 10px 0 20px; padding: 0; border: 0; min-width: 0; }
.sg-yesno legend { margin-bottom: 6px; padding: 0; font-weight: 600; }
.sg-yesno label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-right: 24px; cursor: pointer; }
.sg-yesno input { width: 20px; height: 20px; margin: 0; accent-color: #1b5e6b; }
.sg-yesno input:focus-visible { outline: 2px solid #1b5e6b; outline-offset: 2px; }

/* The signature box at the end of a document. */
.sg-signbox { margin: 26px 0 8px; border: 1px solid #cdbfad; background: #fffdf8; }
.sg-row { display: grid; grid-template-columns: 15em minmax(0, 1fr); align-items: baseline; gap: 4px 16px; padding: 9px 14px; border-bottom: 1px solid #e3d8c8; }
.sg-row:last-child { border-bottom: 0; }
.sg-row-k { color: #5f5850; font-size: .86rem; line-height: 1.45; }
.sg-row-v { color: #1a1a1a; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.sg-row--sig { align-items: center; min-height: 92px; background: #fff; }
.sg-row--sig .sg-row-v { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; }
.sg-signbtn { display: inline-flex; align-items: center; justify-content: center; min-width: 13em; min-height: 58px; padding: 10px 20px; border: 1.5px dashed var(--gold); background: #fff6e4; color: #7a5a24; font: inherit; font-size: .82rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.sg-signbtn:hover { background: #fdebc8; border-style: solid; }
.sg-signed { display: inline-flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 100%; }
.sg-signed .sg-script { font-size: 2.2rem; }
.sg-sig-svg { display: block; width: auto; max-width: 100%; height: 64px; }
.sg-signed .sg-mark-at { font-weight: 400; }
.sg-dim { color: #8a8178; font-weight: 400; font-style: italic; }
.sg-edit { margin: 10px 0 0; color: #5f5850; font-size: .88rem; text-align: right; }
.sg-paper .acct-link-btn { color: #1b5e6b; font-size: .88rem; }
.sg-paper .acct-link-btn:hover { color: #123f48; }
.sg-paper .acct-err { margin: 8px 0 0; color: #a3341f; }
.sg-paper .acct-err:empty { margin: 0; }

/* The bar that stays at the foot of the screen while a document is open:
   how many boxes are done and a button to the next one. */
.sg-dock { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; margin-top: 18px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 2px solid var(--gold); background: rgba(17, 17, 17, .96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 -10px 30px rgba(0, 0, 0, .35); }
.sg-dock-count { color: var(--sand); font-size: .95rem; line-height: 1.4; }
.sg-dock .acct-btn--small { flex: none; min-width: 8.5em; min-height: 44px; }

.sg-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.sg-nav .acct-btn { width: auto; min-width: 12em; }
.sg-docstep > .sg-nav { margin-top: 16px; }

/* Sign and send. */
.sg-review { list-style: none; margin: 0 0 18px; padding: 0; border-top: 1px solid rgba(196, 148, 74, .2); }
.sg-review li { display: flex; align-items: center; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid rgba(196, 148, 74, .2); }
.sg-ok { color: #b9dcb0; font-size: .92rem; white-space: nowrap; }
.sg-ok::before { content: '\2713\00a0'; }
.sg-intent { margin: 0 0 16px; padding: 16px 18px; border: 1px solid rgba(196, 148, 74, .45); background: rgba(196, 148, 74, .08); color: var(--sand); font-size: 1rem; line-height: 1.6; }
.sg-problems { margin: 0 0 16px; padding: 12px 16px; border-left: 3px solid #ffb7ac; background: rgba(255, 140, 120, .07); color: var(--sand); }
.sg-problems ul { margin: 8px 0 0 18px; }
.sg-problems li + li { margin-top: 6px; }
.sg-card .acct-field input[readonly] { background: transparent; border-style: dashed; color: #cfc6b8; cursor: default; }
.sg-card .acct-field input[readonly]:focus { border-color: rgba(196, 148, 74, .55); }
.sg-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Signed. */
.sg-done { text-align: center; }
.sg-done p { max-width: 36em; margin: 0 auto 12px; color: #ddd5c9; line-height: 1.6; }
.sg-done strong { color: var(--sand); overflow-wrap: anywhere; }
.sg-done-icon { display: block; width: 56px; height: 56px; margin: 4px auto 14px; }
.sg-done .acct-btn { width: auto; }
.sg-download { margin-top: 6px; }
.sg-nextup { max-width: 36em; margin: 20px auto 6px; padding: 18px 20px 6px; border: 1px solid rgba(196, 148, 74, .4); background: linear-gradient(135deg, rgba(196, 148, 74, .12), rgba(196, 148, 74, .03)); }
.sg-done .sg-nextup-t { margin-bottom: 14px; color: var(--sand); }
.sg-done .sg-done-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin-top: 16px; }
.sg-done .sg-done-more .acct-btn { margin: 0; }
.sg-about { max-width: 36em; margin: 22px auto 0; padding-top: 14px; border-top: 1px solid rgba(196, 148, 74, .22); text-align: left; }
.sg-about summary { cursor: pointer; color: #edc68c; font-size: .95rem; }
.sg-about summary:focus-visible { outline: 2px solid #edc68c; outline-offset: 3px; }
.sg-about p { margin: 12px 0; text-align: left; font-size: .92rem; }

@media (max-width: 720px) {
  .sg-paper { padding: 34px 28px 30px; }
  .sg-doc-facts > div, .sg-row { grid-template-columns: 11em minmax(0, 1fr); }
  .sg-opt-fields, .sg-docfields { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sg-steps-now { position: static; width: auto; height: auto; margin: 0 0 10px; overflow: visible; clip: auto; clip-path: none; white-space: normal; color: #c9c0b2; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
  .sg-progress { gap: 4px; }
  .sg-pstep { min-height: 16px; padding: 0; }
  .sg-pstep-n { display: none; }
  .sg-pstep-t { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .sg-pair { grid-template-columns: minmax(0, 1fr); }
  .sg-combo-list { max-height: 14.5rem; }
  .sg-dob { grid-template-columns: 4.9rem minmax(0, 1fr) 6.4rem; gap: 8px; }
  .sg-bk-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "state" "act"; }
  .sg-bk-act { justify-content: flex-start; margin-top: 8px; }
  .sg-pad { aspect-ratio: 2.6 / 1; }
  .sg-script { font-size: 2rem; }
  .sg-paper { padding: 26px 16px 22px; font-size: .98rem; }
  .sg-doc-title { font-size: 1.45rem; }
  .sg-doc-facts > div, .sg-row { grid-template-columns: minmax(0, 1fr); }
  .sg-init { justify-content: space-between; }
  .sg-opt { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "mark" "fields" "err"; padding: 12px 14px; }
  .sg-opt-mark { flex-direction: row; justify-content: flex-start; gap: 12px; margin-top: 12px; }
  .sg-cert li { grid-template-columns: minmax(0, 1fr); }
  .sg-cert-mark { flex-direction: row; justify-content: flex-end; gap: 12px; }
  .sg-signbtn { width: 100%; min-width: 0; }
  .sg-row--sig { min-height: 0; }
  .sg-edit { text-align: left; }
  .sg-dock { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .sg-nav .acct-btn { min-width: 0; flex: 0 1 auto; padding-left: 22px; padding-right: 22px; }
  .sg-facts { grid-template-columns: 1fr; }
}

/* Opened from the traveller app (?from=app): the app is the way around, so
   no site menu or footer, and the page starts below the phone's status bar. */
.sg-in-app .nav, .sg-in-app .mobile-menu, .sg-in-app .footer { display: none; }
.sg-in-app .sg-wrap { padding-top: max(28px, calc(env(safe-area-inset-top) + 16px)); }
.sg-in-native .sg-download { display: none; }