/* ============================================================
   V60 試駕抽獎網頁 — 三頁共用樣式
   設計稿 1920 寬。所有設計 px 以 /16 換算為 rem，
   斷點只調 html font-size 即整站等比縮放。

   垂直定位原則：SourceHanSansTW 的 hhea asc 1.16 / desc 0.288
   → normal line-height 1.448，與設計稿行距 35.5/23.8 = 1.492 幾乎相同，
   因此「CSS line box 上緣」≈「設計檔量到的文字 y 座標」，誤差 < 2px。
   ============================================================ */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
ol, ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { display: block; width: 100%; padding: 0; }
html.is-locked { overflow: hidden; }

/* ---------- 字體 ---------- */
@font-face { font-family: SourceHanSansTW; font-weight: 350; font-display: swap;
  src: url(../fonts/SourceHanSansTW-Normal.woff2) format('woff2'); }
@font-face { font-family: SourceHanSansTW; font-weight: 400; font-display: swap;
  src: url(../fonts/SourceHanSansTW-Regular.woff2) format('woff2'); }
@font-face { font-family: SourceHanSansTW; font-weight: 500; font-display: swap;
  src: url(../fonts/SourceHanSansTW-Medium.woff2) format('woff2'); }
@font-face { font-family: SourceHanSansTW; font-weight: 700; font-display: swap;
  src: url(../fonts/SourceHanSansTW-Bold.woff2) format('woff2'); }
@font-face { font-family: VolvoCentum; font-weight: 400; font-display: swap;
  src: url(../fonts/VolvoCentum-DarkRegular.woff2) format('woff2'); }
@font-face { font-family: VolvoCentum; font-weight: 500; font-display: swap;
  src: url(../fonts/VolvoCentum-DarkMedium.woff2) format('woff2'); }
@font-face { font-family: VolvoCentum; font-weight: 700; font-display: swap;
  src: url(../fonts/VolvoCentum-DarkBold.woff2) format('woff2'); }
@font-face { font-family: VolvoNovum; font-weight: 300; font-display: swap;
  src: url(../fonts/VolvoNovum-Light.woff2) format('woff2'); }

/* ---------- tokens ---------- */
:root {
  --c-bg: #221714;
  --c-gold: #814e23;
  --c-brown: #8b5b28;
  --c-brown-modal: #926426;
  --c-amber: #f09d00;
  --c-ink: #3e3a39;
  --c-ink-2: #363643;
  --c-bar: #e1e1e1;
  /* 二選一按鈕：未選為灰（弱化）、已選為白（強調）。
     設計檔原本是反過來的（選取態灰、未選白），在深色底上會讓人誤以為灰色是停用。 */
  --c-toggle-off: #bcbcbc;
  --c-btn: #f2f2f2;
  --c-field: #e7e7e7;
  --c-modal-frame: #c9c5c3;
  --c-white: #fff;

  --col: 49rem;          /* 784px 內容欄 */
  --gap: 3.8125rem;      /* 61px 雙欄間距 */
  --font: VolvoCentum, SourceHanSansTW, sans-serif;
  --font-fine: VolvoNovum, SourceHanSansTW, sans-serif;
  /* select 箭頭：23.6x16.4、線寬 2.88（兩份設計檔一致），顏色由 currentColor 決定 */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 23.6 16.4'%3E%3Cpath d='M1.44 1.44 11.8 14.96 22.16 1.44' fill='none' stroke='%23000' stroke-width='2.88'/%3E%3C/svg%3E");
}

/* 設計稿是 1920 固定畫布、背景滿版（100% auto 會隨視窗寬等比縮放）。
   root font-size 必須跟著視窗寬走，整頁才是設計稿的等比縮放版；
   寫死 16px 的話，在 1440 螢幕上背景縮到 75% 而文字還是 100%，看起來就會「整體太大」。
   1920 時剛好 = 16px（與設計圖比對通過的那組數值）。
   下限 10px 是為了小螢幕可讀，之後由斷點接手。 */
html { font-size: clamp(10px, calc(100vw / 120), 24px); }

body {
  background: #000;                                 /* 內容比視窗短時露出的底色，與 .page 一致 */
  color: var(--c-white);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.448;
  /* 設計檔全站帶約 +0.075em 字距（實測 9 個元素落在 0.068~0.087em）。
     不加的話每行會多擠進一個字，換行點就跟設計圖不一樣。 */
  letter-spacing: .075em;
  -webkit-font-smoothing: antialiased;
  text-align: center;
}

/* 焦點樣式：不用琥珀色（那是強調字與錯誤訊息的顏色，套在欄位上很跳）。
   深底元素用白框，淺底元件（select／實底欄位／二選一）白框看不出來，改內縮深色框。 */
:focus-visible { outline: 2px solid rgba(255,255,255,.85); outline-offset: 3px; }
.field--solid input:focus-visible,
.select select:focus-visible,
.toggle__opt input:focus-visible + span {
  outline: 2px solid var(--c-ink);
  outline-offset: -.3125rem;
}
/* 下劃線欄位是透明底，畫外框會變成一個大方塊；改成把下劃線加粗一倍 + 微光 */
.field--line input:focus-visible,
.field--line textarea:focus-visible {
  outline: none;
  box-shadow: 0 .125rem 0 0 var(--c-white), 0 .5rem .75rem -.375rem rgba(255,255,255,.5);
}

/* Illustrator 把 CJK 文字放在文字框裡的位置，比 CSS line box 低約 0.65em
   （量測結果：導言 17/23.8、清單 14/23.8、label 13/19.4、大標 28/42.3、
   說明 10/16.2 → 全部落在 0.62~0.71em）。
   用 transform 把文字往下推到設計位置：transform 完全不影響版面計算，
   後面元素（下劃線、色塊、按鈕）位置不變。
   注意：不能用 padding-top + 負 margin-bottom 達成同樣效果 ——
   那會讓 label 的 padding box 往下疊到 input 上 0.65em，
   平常 input 透明看不出來，但 Chrome 自動填入一上背景色就會蓋住 label。 */
.lead, .olist, .ulist, .field__label, .form__title, .form__hint,
.terms h2, .terms ol { transform: translateY(.65em); }

.wrap { width: min(var(--col), 90vw); margin-inline: auto; text-align: left; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 頁面背景 ----------
   img/bg.jpg 是 .ai 內嵌的照片（等比縮到 1920x4500，與設計版位 1:1），
   而且設計檔的白紗、漸黑與局部調色已經由 tools/extract-assets.py
   逐列擬合烘進圖檔了 → CSS 不需要任何覆蓋漸層。
   底色用 #000：圖檔結束後（內容比 4500 高時）的區域，設計圖本來就是純黑。 */
.page {
  position: relative;
  background: #000 url(../img/bg.jpg) top center / 100% auto no-repeat;
}
/* 查詢頁／業代頁是 1920x2500（aspect 0.768），設計用另一張較短的裁切。
   min-height 讓頁面不會短於背景圖（否則照片下方會露出底色切黑）：
   2500/1920 = 130.208vw，會跟著 background-size: 100% auto 一起縮放。 */
.page--short {
  background-image: url(../img/bg-short.jpg);
  min-height: 130.208vw;
}

/* ---------- hero ---------- */
.brand { padding-top: 4.6875rem; }                  /* 設計 y75 */
.brand img { width: 17.5rem; margin-inline: auto; } /* 280x23 wordmark */

.hero { text-align: center; }
.hero__title {
  width: 64.3125rem;                                /* 1029px（含透明留白） */
  max-width: 92vw;
  margin: 5.875rem auto 0;                          /* → y192 */
}
.hero__sub {
  margin-top: .5rem;                                /* → line box y661（截圖比對校正） */
  color: var(--c-gold);
  font-size: 2.13125rem;                            /* 34.1px */
  line-height: 3rem;                                /* 48px */
}
.hero__date {
  margin-top: 2.5rem;                               /* 40px → y790（截圖比對校正）*/
  color: var(--c-ink);
  font-size: 1.61875rem;                            /* 25.9px */
  line-height: 1.9375rem;                           /* 31px */
  letter-spacing: .02em;
}
.hero__date span { margin: 0 .625rem; font-size: .7em; vertical-align: .15em; }

/* ---------- 說明區塊 ---------- */
.sections { padding-top: 50.4375rem; }              /* 807px → 活動辦法標籤 y1637 */
.sec + .sec { margin-top: 6.5625rem; }              /* → 活動獎項標籤 y2377 */

.tag {                                              /* 外框標籤 144.4x40.1 */
  display: inline-flex; align-items: center; justify-content: center;
  width: 9.025rem; height: 2.50625rem;
  border: 1px solid var(--c-white);
  font-size: 1.5375rem;                             /* 24.6px */
  line-height: 1;
}
.tag--bar {                                         /* 實底小標，高 33 */
  display: inline-block; width: auto; height: 2.0625rem;
  margin-top: 3.3125rem;                            /* → y1805 / y2065 */
  padding: 0 1rem; border: 0;
  background: var(--c-bar); color: var(--c-ink);
  font-size: 1.4875rem;                             /* 23.8px */
  line-height: 2.0625rem;
  letter-spacing: 0;                                /* 實測：小標實底 bar 沒有字距 */
}
.tag--bar small { font-size: 1.30625rem; }          /* 20.9px 括號小字 */

.lead {
  margin-top: .25rem;                               /* → y1681 */
  font-size: 1.4875rem;
  line-height: 2.21875rem;                          /* 35.5px */
}
.em { color: var(--c-amber); }

.olist, .ulist { font-size: 1.4875rem; line-height: 2.21875rem; }
.olist { counter-reset: n; }
.olist > li, .ulist > li { position: relative; padding-left: 1.9375rem; }  /* x599-568 */
.olist > li::before {
  counter-increment: n; content: counter(n);
  position: absolute; left: 0; top: .5em;
  display: grid; place-items: center;
  width: 1.375rem; height: 1.375rem;                /* 22px */
  border-radius: 50%;
  background: var(--c-bar); color: var(--c-ink-2);
  font-size: 1.00625rem;                            /* 16.1px */
  line-height: 1;
}
.ulist > li::before { content: '•'; position: absolute; left: .3rem; top: 0; }
.small { font-size: 1.30625rem; }                   /* 20.9px */

/* ---------- 表單 ---------- */
.form { padding-top: 5.78125rem; text-align: center; }   /* 92.5px → 大標 y2661 */
.form__title { font-weight: 700; font-size: 2.64375rem; line-height: 3.9125rem; }
.form__note { margin-top: 1.125rem; font-size: 1.2875rem; line-height: 1.90625rem; }
/* 業代報到頁頂端的試駕者資訊：置中顯示 */
.form__note--center { text-align: center; }

.row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gap);
  margin-top: 2.6875rem;                            /* 43px，與 .field 同節奏 */
}
.row > .field { margin-top: 0; }                    /* 間距由 .row 負責 */

.field { position: relative; margin-top: 2.6875rem; text-align: center; }  /* 43px */
.form > .row:first-of-type { margin-top: 4.125rem; }                       /* 66px */

.field__label {
  display: block; font-weight: 500;
  /* label 的文字用 transform 下移 0.65em 對齊設計，會落進 input 框的上緣範圍。
     平常 input 透明看不出來，但瀏覽器自動填入會強制上不透明背景蓋住 label，
     所以明確把 label 疊在上層。 */
  position: relative; z-index: 1;
  font-size: 1.2125rem;                             /* 19.4px */
  line-height: 1.79375rem;                          /* 28.7px */
}
/* 錯誤訊息用絕對定位，不佔版面高度，避免出錯時整頁位移 */
.field__error {
  position: absolute; top: 100%; left: 0; right: 0;
  margin-top: .25rem;
  color: var(--c-amber); font-size: max(.875rem, 11px); font-weight: 500;
  line-height: 1.25rem; text-align: left;
}

/* 主頁：下劃線欄位。input 高 61px → 底線落在 label 下方 61px 處 */
.field--line input, .field--line textarea {
  display: block; width: 100%; height: 3.8125rem;
  /* 上內距把輸入的文字往下推，靠近下劃線 —— 不然文字會緊貼上方的 label
     （label 本身已用 transform 對齊設計位置，其文字底部只比 input 框上緣高一點點）。 */
  padding: 1.5rem .5rem .25rem; border: 0; border-bottom: .125rem solid var(--c-white);
  background: none; color: var(--c-white);
  font-size: 1.4875rem; text-align: center;
}
.field--line textarea { resize: none; overflow: hidden; }
/* 瀏覽器自動填入會強制套上淺藍底。在深色版面上不只突兀，還會蓋掉上方的 label
   （label 文字用 transform 下移對齊設計，會落進 input 框上緣，白字撞淺藍底就看不見）。
   兩道保險：
   1. background-clip: text —— 把背景夾到文字形狀內，等於不可見（現代瀏覽器都支援）
   2. 超長 transition —— 舊版 Chrome 的 fallback，讓背景色轉場永遠跑不完 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-background-clip: text;
          background-clip: text;
  transition: background-color 100000s 0s;
}
.field--line input:-webkit-autofill { -webkit-text-fill-color: var(--c-white); caret-color: var(--c-white); }
.field--solid input:-webkit-autofill { -webkit-text-fill-color: var(--c-ink); }
.field.is-error input, .field.is-error textarea { border-bottom-color: var(--c-amber); }

/* 查詢頁／業代頁：圓角實底欄位
   量測自 業代.ai 渲染結果：單層 #e7e7e7、784.6x63.4、圓角 10px，設計沒有陰影。 */
.field--solid input {
  display: block; width: 100%; height: 3.9625rem;   /* 63.4px */
  margin-top: 2.0625rem;                            /* 33px → 業代頁 y1829 */
  padding: 0 1.5rem; border: 0; border-radius: .625rem;   /* 10px */
  background: var(--c-field); color: var(--c-ink);
  font-size: 1.49375rem; text-align: center;
}
.field--solid.is-error input { box-shadow: 0 0 0 2px var(--c-amber); }

/* select
   箭頭在兩份設計檔都是 23.6x16.4、線寬 2.88 的折線，只有顏色不同
   （主頁 #3d3939、業代頁 #58585c），所以用 mask + currentColor 共用一個圖形。 */
.select { position: relative; margin-top: 3.125rem; color: #3d3939; }   /* 50px → 主頁 y3370 */
.select select {
  width: 100%; height: 3.48125rem;                  /* 55.7px */
  padding: 0 3.5rem; border: 0; border-radius: 0;
  background: var(--c-white); color: var(--c-ink);
  font-weight: 500; font-size: 1.49375rem;
  text-align: center; text-align-last: center;
  appearance: none;
}
.select::after {                                    /* chevron 23.6x16.4 */
  content: ''; position: absolute; right: 1.34375rem; top: 50%;   /* 21.5px */
  width: 1.475rem; height: 1.025rem; margin-top: -.5125rem;
  background: currentColor; pointer-events: none;
  -webkit-mask: no-repeat center/100% 100% var(--chevron);
          mask: no-repeat center/100% 100% var(--chevron);
}
/* 業代頁 select 是兩層：外框 #e6e6e6 784.6x63.4 r10 + 內面 #fcfcfc 769.9x51.7 r13，
   內縮 7.35 / 5.85，設計沒有陰影。 */
.select--solid {
  margin-top: 1.8125rem;                            /* 29px → 業代頁 y1664 */
  padding: .365625rem .459375rem;                   /* 5.85 / 7.35 */
  border-radius: .625rem;                           /* 10px */
  background: #e6e6e6;
  color: #58585c;
}
.select--solid select {
  height: 3.23125rem;                               /* 51.7px */
  border-radius: .8125rem;                          /* 13px */
  background: #fcfcfc;
}
.select--solid::after { right: 2.925rem; }          /* 46.8px */

/* 二選一：radio + label，鍵盤可用、螢幕閱讀器可讀 */
.toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--gap);
  margin-top: 3.8125rem;                            /* 61px → 主頁 y3195 */
}
.toggle__opt { position: relative; }
.toggle__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.toggle__opt span {
  display: grid; place-items: center;
  height: 3.475rem;                                 /* 55.6px */
  background: var(--c-toggle-off); color: #5f5f5f;
  font-weight: 500; font-size: 1.49375rem;
}
/* 已選：白底、深字、加粗。除了顏色再用字重做區別，不單靠顏色傳達狀態 */
.toggle__opt input:checked + span {
  background: var(--c-white); color: var(--c-ink-2); font-weight: 700;
}


/* 業代頁 toggle：365x67.2、圓角 24px（不是全膠囊）、選取態 #aeafb0，設計沒有陰影 */
.toggle--solid { gap: 0 3.4125rem; margin-top: 2.03125rem; }   /* 54.6px / 32.5px → y1985 */
.toggle--solid .toggle__opt span {
  height: 4.2rem;                                   /* 67.2px */
  border-radius: 1.5rem;                            /* 24px */
}
.toggle--solid .toggle__opt span { background: #aeafb0; }
.toggle--solid .toggle__opt input:checked + span { background: var(--c-white); }

/* 按鈕 */
.btn {
  display: inline-grid; place-items: center;
  min-width: 12.71875rem; height: 3.58125rem; min-height: 40px;   /* 203.5 x 57.3 */
  padding: 0 1.5rem; border-radius: 999px;
  background: var(--c-btn); color: var(--c-brown);
  font-weight: 500; font-size: 1.44375rem;          /* 23.1px */
  text-decoration: none;
  outline: 1px solid var(--c-white); outline-offset: 4px;
}
.btn:disabled { opacity: .6; cursor: default; }
.btn--ghost {
  min-width: 0; height: 2.375rem; min-height: 34px;
  padding: 0 1.25rem; font-size: max(1rem, 12px); outline: 0;
}
.btn--staff {
  min-width: 21.41875rem; height: 3.13125rem; min-height: 40px;   /* 342.7 x 50.1 */
  border-radius: 1.3125rem;                         /* 21px，非全膠囊 */
  background: rgba(255,255,255,.49); color: var(--c-white);
  font-size: 1.2625rem; outline: 0;
}

.form__hint { margin-top: 2.6875rem; font-weight: 500; font-size: max(1.0125rem, 11px); line-height: 1.75rem; }
.form__actions { margin-top: 3.2375rem; }           /* → 送出鈕 y3844 */

.divider { height: 1px; margin: 1.5rem 0; background: rgba(255,255,255,.5); border: 0; }
.divider--hair {                                    /* 查詢頁／業代頁：766px 細線 */
  width: 47.875rem; max-width: 100%;
  margin: 1.8125rem auto 0;                         /* 29px → 業代頁 y1534 */
  background: rgba(255,255,255,.6);
}
.qr-link { text-align: center; }

/* ---------- 查詢頁／業代頁（1920x2500）版位 ---------- */
@media (min-width: 1280px) {
  .page--short .hero__title { margin-top: 14rem; }  
}            /* 224px → y320 */
.sections--short { padding-top: 42.875rem; }                  /* 686px → y1475（截圖校正）*/
.form--short { padding-top: 0; }
.form__title--sm { font-size: 2rem; line-height: 2.9rem; margin: 0 0 4rem 0;}
.form--short .field { margin-top: 2.3125rem; }                /* 37px */
.form--short .divider + .field { margin-top: 3.375rem; }      /* 54px → y1599（截圖校正）*/
.field__label--staff { font-size: 1.38125rem; line-height: 2rem; }  /* 22.1px */
.form--short .form__actions { margin-top: 6.8375rem; }        /* 109.4px → y2170 */
.form--short { padding-bottom: 17.5rem; }                     /* 280px → 頁面總高 2500，
                                                                 讓水面照片延續到底、不會在按鈕下方就切黑 */

/* ---------- 注意事項 ---------- */
.terms {
  padding: 2rem 0 4.375rem;
  font-family: var(--font-fine);
  font-weight: 300;
  /* 等比縮放後，1280 寬時 13.8px 會變成 9.2px、768 寬時 8.6px，法律聲明讀不了。
     用 max() 設可讀下限；1920 時仍是設計的 13.8 / 18.5。 */
  font-size: max(.8625rem, 11px);                   /* 13.8px @1920 */
  line-height: max(1.15625rem, 15px);               /* 18.5px @1920 */
  text-align: left;
}
.terms h2 {
  font-family: var(--font); font-weight: 350;
  font-size: max(.73125rem, 10px);                  /* 11.7px @1920 */
}
.terms ol { margin-top: .3125rem; counter-reset: t; }
.terms li { position: relative; padding-left: 1.5rem; counter-increment: t; }
.terms li::before { content: counter(t) '.'; position: absolute; left: 0; }

/* ---------- 彈窗 ---------- */
.modal {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: 1.5rem;
  background: rgba(0,0,0,.6);
}
.modal[hidden] { display: none; }
.modal__panel {
  position: relative;
  width: min(64.375rem, 92vw);                      /* 1030px */
  padding: 2.9375rem 5.625rem;                      /* 47 / 90 */
  border-radius: 1.375rem;                          /* 22px */
  background: var(--c-modal-frame);
}
.modal__card {
  padding: 3.5rem 2.5rem;
  border-radius: 1.875rem;                          /* 30px */
  background: var(--c-white);
  color: var(--c-brown-modal);
  text-align: center;
}
.modal__close {
  position: absolute; top: .875rem; right: 1.625rem;
  display: grid; place-items: center;
  width: 2.375rem; height: 2.375rem;                /* 38px */
  border-radius: 50%;
  background: #8b8785; color: var(--c-white);
  font-size: 1.125rem; line-height: 1;
}
.modal__card--tall { padding-block: 7rem; }
.modal__text { font-weight: 500; font-size: 2rem; line-height: 3.125rem; }
.modal__qr { width: 9.5rem; margin: 1.5rem auto; }
.modal__fine { margin-top: 1rem; font-size: 1.375rem; }

/* ---------- RWD ----------
   設計稿只有 1920 桌機版。<1200px 由本專案延伸，規則：
   1. 說明區與表單：只調 html font-size，整體等比縮小
   2. hero 改用 vw 定位：背景照片的 aspect 固定（1920:4500），
      文字若用 rem 定位會隨斷點漂到車身上（實測 768px 時副標整段壓在車上讀不到）。
      改用 vw 後文字永遠落在水面（水面起點 = 照片高 39.6% = 92.8vw）。
   3. hero 副標／日期在深色水面上，金棕 #814e23 與深灰 #3e3a39 對比不足，
      換成亮一階的金與近白，並加陰影確保可讀。 */
@media (max-width: 1199px) {
  .wrap { width: min(var(--col), 88vw); }

  .brand { padding-top: 5vw; }
  .brand img { width: 30vw; max-width: 17.5rem; }
  .hero__title { width: 88vw; max-width: 64.3125rem; margin-top: 6vw; }
  .hero__sub {
    margin-top: 46vw;                    /* 88vw x 784/1748 = 39.5vw 圖高 → 約 96vw，落在水面 */
    color: #d3a662;
    font-size: 4.8vw; line-height: 6.6vw;
    text-shadow: 0 1px 6px rgba(0,0,0,.55);
  }
  .hero__date {
    margin-top: 3vw;
    color: #efeae6;
    font-size: 3.4vw; line-height: 4.6vw;
    text-shadow: 0 1px 6px rgba(0,0,0,.55);
  }
  .sections { padding-top: 14vw; }
  .sections--short { padding-top: 16vw; }
}
@media (max-width: 767px) {
  html { font-size: 11px; }
  .wrap { width: 90vw; }
  .row, .toggle { grid-template-columns: 1fr; gap: 0; }
  .row > .field + .field { margin-top: 2.6875rem; }
  .toggle .toggle__opt + .toggle__opt { margin-top: 1rem; }
  .modal__panel { padding: 1.75rem 1.5rem; }
  .modal__card { padding: 2rem 1.25rem; }
  .modal__card--tall { padding-block: 3.5rem; }
  .modal__text { font-size: 1.5rem; line-height: 2.375rem; }
  .modal__qr { width: 8rem; }
  .modal__fine { font-size: 1.125rem; }
}