/* =============================================
   製品ラインナップ ページ
   配色・パーツは他の下層ページ（qa-style / order-style）に合わせている。
   紺 #00479d / オレンジ #dd4000 / 淡いブルー #f1f6f9
   素材カード（.material-card）とFAQ（.qa-*）は既存CSSをそのまま再利用する。
   ============================================= */

.material-card:hover {
    transform: translateY(0);
    box-shadow: 0 12px 30px rgba(0, 71, 157, 0.14);
}

/* ---------- 共通テキスト ---------- */
.lineup-lead {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: 17px;
    color: #333;
    line-height: 2;
    margin-bottom: 30px;
}

.lineup-text {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: 16px;
    color: #333;
    line-height: 1.9;
    margin-bottom: 3rem;
}

.lineup-note {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: 13px;
    color: #777;
    line-height: 1.8;
}

.lineup-note a,
.lineup-text a {
    color: #00479d;
    text-decoration: underline;
}

.lineup-list {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: 16px;
    color: #333;
    line-height: 1.9;
    padding-left: 0;
    margin-bottom: 0;
}

.lineup-list li+li {
    margin-top: 10px;
}

.lineup-list strong {
    color: #00479d;
}

/* ---------- 見出し（TOPページの.section-title-wrapper + .section-title-darkと完全に同じ体裁）。
   囲み・左ボーダー・ドットのボックス調はやめ、中央寄せ＋オレンジ下線にする。
   フォントサイズ・色・レスポンシブの段階も.section-title-dark（nfc-style.css）に合わせている。
   .section-title-wrapper / .title-underline 自体は nfc-style.css を共用） ---------- */
.lineup-section-title {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: 42px;
    font-weight: 700;
    color: #000;
    margin: 0;
}

.lineup-subtitle {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #00479d;
    margin: 0 0 15px;
    padding: 0 0 10px 0;
    border-bottom: 1px solid #00479d;
}

/* ページ内リンク（#lineup-price など）の着地点が、位置固定のグローバルナビ（約68px）
   の下に潜り込まないよう、スクロール停止位置を下げておく */
.lineup-page section[id] {
    scroll-margin-top: 90px;
}

/* ---------- ボタン（qa-cta-button と同じ体裁） ---------- */
.lineup-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.lineup-button {
    background: #00479d;
    border: 2px solid #00479d;
    border-radius: 999px;
    padding: 18px 60px 18px;
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 71, 157, 0.25);
    position: relative;
    min-width: 300px;
}

.lineup-button::before {
    content: "";
    background: url("../images/arrow-white.svg") no-repeat center / contain;
    width: 36px;
    height: 36px;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

.lineup-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 71, 157, 0.35);
    color: #fff;
}

/* 副次ボタン。白地・紺文字で、主ボタンとの優先度差をつける */
.lineup-button--outline {
    background: #fff;
    color: #00479d;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.lineup-button--outline:hover {
    background: #f1f6f9;
    color: #00479d;
}

/* 白地ボタンでは白い矢印が見えないため、紺の丸に白矢印を重ねる */
.lineup-button--outline::before {
    background:
        url("../images/arrow-white.svg") no-repeat center / contain,
        #00479d;
    border-radius: 50%;
}

/* お問い合わせ導線だけオレンジ（サイト共通のお問い合わせ色）にする */
.lineup-button--orange {
    background: #dd4000;
    border-color: #dd4000;
    box-shadow: 0 4px 10px rgba(221, 64, 0, 0.3);
}

.lineup-button--orange:hover {
    box-shadow: 0 6px 15px rgba(221, 64, 0, 0.4);
}

.lineup-intro-section {
    position: relative;
    top: -3rem;
}

/* 2026-08-26: ヒーロー直下のページ内アンカーナビ。lineup-intro-section.ai（実測）に合わせ、
   ピルボタンをやめてテキスト＋下矢印アイコンの1行ナビにする（無料サンプルCTAは末尾の専用セクションにあるため、
   ここには出さない＝page-lineup.php側で style=primary を除外）。 */
.lineup-anchor-nav {
    display: flex;
    align-items: stretch;
    background: #fff;
    padding: 15px 0;
    border: 2px solid #E1E0DF;
    border-radius: 10px;
    box-shadow: 1px 1px 10px rgb(0 0 0/.2);
}

.lineup-anchor-nav-item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* ラベルが1行に収まらず折り返す項目があっても、アイコンは常に行の下端で揃える */
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 10px;
    text-decoration: none;
    border-left: 1px solid #e1e0df;
    transition: opacity 0.3s ease;
}

.lineup-anchor-nav-item:first-child {
    border-left: 0;
}

.lineup-anchor-nav-item:hover {
    opacity: 0.7;
}

.lineup-anchor-nav-label {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #040000;
    line-height: 1.4;
    max-width: 100%;
    overflow-wrap: break-word;
}

.lineup-anchor-nav-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #004491;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ---------- 主要スペック ---------- */
/* 2026-08-26: lineup-highlight-section.ai（実測）に合わせ、4色（オレンジ/ブルー/グリーン/パープル）＋
   番号リボン＋アイコンのカードに刷新。色とアイコンはカード固定の演出のためCSS変数で持たせる。 */
.lineup-highlight-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.lineup-highlight {
    --accent: #ef6e3a;
    --tint: #fcf3ee;
    background: var(--tint);
    border-radius: 14px;
    padding: 22px 1rem 20px;
    height: 100%;
    min-height: 154.5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.lineup-highlight--blue {
    --accent: #2a77e1;
    --tint: #f3f6fa;
}

.lineup-highlight--green {
    --accent: #749462;
    --tint: #f9f8f7;
}

.lineup-highlight--purple {
    --accent: #9886ea;
    --tint: #f5f4fb;
}

/* 左上の角に載せる番号リボン。border三角形ではなくclip-pathで、カード自体のoverflow:hiddenで
   丸角からはみ出た部分を切る。 */
.lineup-highlight-ribbon {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 58px;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    background: var(--accent);
    color: #fff;
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: 15px;
    font-weight: 700;
    padding: 8px 0 0 10px;
}

.lineup-highlight-head {
    margin: 0;
    text-align: center;
}

.lineup-highlight-label {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #222;
    margin: 0 0 8px;
}

/* タイトル直下の下線。テキスト幅に関わらず60px固定にするため、
   inline-blockの自動幅ではなく疑似要素で描画する（headがtext-align:centerなので中央揃え）。 */
.lineup-highlight-label::after {
    content: "";
    display: block;
    width: 60px;
    height: 2px;
    margin: 8px auto 0;
    background: var(--accent);
}

.lineup-highlight-body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.lineup-highlight-icon {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
}

.lineup-highlight-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.lineup-highlight-value {
    flex: 0 1 auto;
    min-width: 0;
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.5;
    margin: 0;
    /* 「最短◯営業日」などが語の途中で折れないようにする */
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.lineup-highlight-value-num {
    /* 親（.lineup-highlight-value）のフォントサイズに対して1.5倍にする */
    font-size: 1.5em;
    margin: 0 3px;
}


/* ---------- 料金タブ ---------- */
.lineup-price-tabs {
    border-bottom: 2px solid #00479d;
    gap: 4px;
    flex-wrap: nowrap;
    margin: 0;
}

.lineup-price-tabs .nav-item {
    width: calc(100% / 3);
}

.lineup-price-tabs .nav-link {
    width: 100%;
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #00479d;
    background: #f1f6f9;
    border: 1px solid #dbe6f0;
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    padding: 14px 10px;
    line-height: 1.35;
    transition: background 0.3s ease, color 0.3s ease;
}

.lineup-price-tabs .nav-link:hover {
    background: #e4eef7;
    color: #00479d;
}

/* 選択中のタブは素材ごとに色分けする（元原稿の配色）
   プラスチック=青 / 木製=緑 / 紙製=オレンジ */
.lineup-price-tabs .nav-link.active {
    color: #fff;
}

.lineup-price-tabs #price-tab-plastic.active {
    background: #0d6efd;
    border-color: #0d6efd;
}

.lineup-price-tabs #price-tab-wood.active {
    background: #198754;
    border-color: #198754;
}

.lineup-price-tabs #price-tab-paper.active {
    background: #fd7e14;
    border-color: #fd7e14;
}

.lineup-price-content {
    border: 1px solid #dbe6f0;
    border-top: 0;
    border-radius: 0 0 10px 10px;
    padding: 48px;
    background: #fff;
}

/* ---------- 表組み全般：サイト全体に注入されている古いプラグインスニペットからの防御 ----------
   本番の「Simple Custom CSS and JS」に table.nfc2792-cardTable / table.cardTable 用の
   古いスニペットがあり、セレクタが `table.xxx th, td { ... }` とtypoしているため
   td 側が無スコープになり、992px以下でサイト全体の<td>に
   display:inline-block; float:left; width:100% が波及してしまう（要修正だがプラグイン側の話）。
   このtdにはdisplay/floatを明示していなかったため素通しで効いていた。
   ここで table-cell / float:none を明示し、クラス付きセレクタの詳細度で確実に上書きして自衛する。
   [[ref_wp_global_td_style_leak_nfc_print]] 参照。 */
.lineup-price-table td,
.lineup-compare-table td {
    display: table-cell;
    float: none;
}

/* ---------- 料金表（thead追従） ---------- */
.lineup-price-scroll {
    max-height: min(60vh, 460px);
    overflow-y: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* border-collapse:collapse だと隣り合うセルが共有する罫線1px分がどちらの背景でも
   塗られず、追従中のヘッダーに本文行が透けてしまう。分離方式にして罫線を各セルに持たせる。 */
.lineup-price-scroll .lineup-price-table {
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    border-top: 1px solid #dbe6f0;
    border-left: 1px solid #dbe6f0;
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: 14px;
}

.lineup-price-scroll .lineup-price-table>:not(caption)>* {
    border-width: 0;
}

.lineup-price-scroll .lineup-price-table>:not(caption)>*>* {
    border: 0 solid #efefef;
    border-right-width: 1px;
    border-bottom-width: 1px;
    padding: 10px 8px;
    text-align: center;
    vertical-align: middle;
}

.lineup-price-table thead th {
    position: sticky;
    z-index: 2;
    /* 背景が透過だとスクロール時に本文行が透けるので不透明色を明示 */
    background-color: #e1e1e1;
    color: #666;
    font-weight: 700;
    font-size: 13px;
}

/* 1段目は上端、2段目は1段目の実測高さぶん下げる（高さはJSで代入） */
.lineup-price-table thead tr:first-child th {
    top: 0;
}

.lineup-price-table thead tr:nth-child(2) th {
    top: var(--lineup-thead-row1-h, 41px);
}

/* rowspan=2 の「ご注文枚数」列は上端固定のまま2段分をまたぐ */
.lineup-price-table thead tr:first-child th[rowspan] {
    z-index: 3;
}

/* 「エンコードなし／あり」の4列は内容量がほぼ同じなのに、auto layoutのままだと
   1列目（片面印刷・エンコードなし）だけ内容の都合で他より広くなってしまう。
   4列とも幅を揃える（1列目の「ご注文枚数」は対象外、枚数表示に合わせた幅のまま）。
   colspan=2の「片面印刷」「両面印刷」見出しは、この2列分の幅を合計した幅で自動的に揃う。 */
.lineup-price-table thead tr:nth-child(2) th,
.lineup-price-table tbody td {
    width: 20%;
}

.lineup-price-table tbody th {
    background: #f0f0f0;
    font-weight: 700;
    color: #666;
    white-space: nowrap;
}

.lineup-price-table tbody tr:nth-child(even) td {
    background: #fafcfe;
}

/* ---------- 比較表 ---------- */
.lineup-compare-table {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: 14px;
    border-collapse: separate;
    border-spacing: 0;
    border-top: 1px solid #dbe6f0;
    border-left: 1px solid #dbe6f0;
    margin-bottom: 0;
}

.lineup-compare-table>:not(caption)>* {
    border-width: 0;
}

.lineup-compare-table>:not(caption)>*>* {
    border: 0 solid #efefef;
    border-right-width: 1px;
    border-bottom-width: 1px;
    padding: 12px 10px;
    vertical-align: middle;
}

/* 3列の比較表（NFC/QR比較、無地カードの料金）だけ各列を均等な1/3幅にする。
   4列の商品仕様表・6列のチップ比較表は対象外（ここだけ個別に上書き）。 */
.lineup-compare-table--thirds th,
.lineup-compare-table--thirds td {
    width: 33.333%;
}

/* 商品仕様表：1列目（項目名）は内容に合わせた幅のまま、
   プラスチック製・木製・紙製の3列だけ幅を揃える。 */
.lineup-compare-table--spec th:not(:first-child),
.lineup-compare-table--spec td:not(:first-child) {
    width: 28%;
}

.lineup-compare-table thead th {
    background: #e1e1e1;
    color: #666;
    font-weight: 700;
    text-align: center;
    font-size: 13px;
}

.lineup-compare-table tbody th {
    background: #f0f0f0;
    color: #666;
    font-weight: 700;
    white-space: nowrap;
    text-align: center;
}

.lineup-compare-table tbody td {
    text-align: center;
    color: #333;
}

.lineup-compare-table small {
    color: #888;
    font-size: 11px;
}

/* NFC/QR比較で優位なほうを強調 */
.lineup-compare-table td.is-better {
    background: #fff5f1 !important;
    color: #dd4000;
    font-weight: 700;
}

/* 当サイト推奨列 */
.lineup-compare-table th.is-recommend {
    background: #dd4000;
    color: #fff;
}

.lineup-compare-table td.is-recommend {
    background: #fff5f1 !important;
}

.lineup-badge {
    display: inline-block;
    background: #dd4000;
    color: #fff;
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: 13px;
    font-weight: 700;
    border-radius: 999px;
    padding: 6px 18px;
}

/* チップ比較表：当サイト推奨（NTAG 215）列見出しの上に載せるバッジ。
   見出しセル自体がオレンジ背景（.is-recommend）のため、白背景・オレンジ文字にして視認性を確保する。 */
.lineup-chip-table-badge {
    display: block;
    width: fit-content;
    margin: 0 auto 6px;
    background: #fff;
    color: #dd4000;
    font-size: 11px;
    padding: 3px 12px;
}

.lineup-chip-table-label {
    display: block;
}

/* チップ比較は6列あるためSPでは潰さず横スクロールさせる */
.lineup-chip-table {
    min-width: 900px;
}

/* NTAG213・NTAG 424 DNA・I-CODE SLIX・MIFAREの4列だけ幅を揃える。
   1列目（項目名）と3列目（当サイト推奨のNTAG 215、強調表示のため）は対象外。 */
.lineup-chip-table th:nth-child(2),
.lineup-chip-table td:nth-child(2),
.lineup-chip-table th:nth-child(4),
.lineup-chip-table td:nth-child(4),
.lineup-chip-table th:nth-child(5),
.lineup-chip-table td:nth-child(5),
.lineup-chip-table th:nth-child(6),
.lineup-chip-table td:nth-child(6) {
    width: 15%;
}

/* バナーボタン */
/* 2026-08-20: 独自スタイルをやめ、他と同じ .lineup-button（角丸ピル＋矢印）に統一した */

/* ---------- 商品仕様の開閉ボタン ---------- */
.lineup-spec-toggle {
    cursor: pointer;
    padding-right: 60px;
}

.lineup-spec-toggle::before {
    display: none;
}

.lineup-caret {
    position: absolute;
    right: 24px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.3s ease;
}

.lineup-spec-toggle[aria-expanded="true"] .lineup-caret {
    transform: translateY(-20%) rotate(225deg);
}

/* ---------- ご注文の流れ ---------- */
.lineup-step {
    background: #f1f6f9;
    border-radius: 14px;
    padding: 40px 20px 24px;
    height: 100%;
    position: relative;
    text-align: center;
}

.lineup-step-num {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #00479d;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lineup-step-title {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #00479d;
    margin: 0 0 10px;
}

.lineup-step-text {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: 14px;
    color: #555;
    line-height: 1.8;
    margin: 0;
    text-align: start;
}

/* ---------- 最終CTA ---------- */
.lineup-cta-section {
    background: url("../images/youto-bg.jpg") no-repeat top center / cover;
}

.lineup-cta-title {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #00479d;
    margin: 0 0 15px;
}

.lineup-cta-text {
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: 17px;
    color: #333;
    line-height: 1.8;
    margin: 0 0 30px;
}

/* 左下フローティングバナーは TOPページと共通化し、nfc-style.css の .nfc-floating-cta* へ移設（2026-08-28） */

/* =============================================
   Responsive
   ============================================= */
@media (max-width: 991.98px) {

    /* この幅ではナビが約48pxに縮むので着地位置も合わせる */
    .lineup-page section[id] {
        scroll-margin-top: 70px;
    }

    .lineup-lead {
        font-size: 15px;
    }

    .lineup-text,
    .lineup-list {
        font-size: 15px;
        margin-left: 1rem;
    }

    .lineup-highlight-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* この幅では7列だとラベルが潰れるため4列×2行に折り返す。
       縦罫線は列の左端（4列おき）だけ消し、代わりに2行目以降の上端に横罫線を入れて
       表組みのように均等な格子状の罫線にする。 */
    .lineup-anchor-nav {
        flex-wrap: wrap;
    }

    .lineup-anchor-nav-item {
        flex: 1 1 25%;
        border-top: 1px solid #e1e0df;
    }

    .lineup-anchor-nav-item:nth-child(4n+1) {
        border-left: 0;
    }

    .lineup-anchor-nav-item:nth-child(-n+4) {
        border-top: 0;
    }

    .lineup-price-content {
        padding: 16px;
    }

    .lineup-cta-title {
        font-size: 22px;
    }

    .lineup-cta-text {
        font-size: 15px;
    }
}

@media (max-width: 767.98px) {
    .lineup-section-title {
        font-size: 32px;
    }

    .lineup-button {
        width: 100%;
        font-size: 15px;
        padding: 16px 60px 16px;
    }

    .lineup-button-group {
        gap: 12px;
    }

    /* スマホ幅は2列×4行。ラベルが長い項目は2行に折り返して収める。
       罫線も2列基準に組み直す（4列用のnth-child指定を上書き）。 */
    .lineup-anchor-nav-item {
        flex: 1 1 50%;
        border-left: 1px solid #e1e0df;
    }

    .lineup-anchor-nav-item:nth-child(odd) {
        border-left: 0;
    }

    /* 991.98px用ルール（nth-child(-n+4)で1〜4番目の上罫線を消す）が2列レイアウトでは
       3・4番目（2行目）にも効いてしまうため、ここで明示的に上書きし直す */
    .lineup-anchor-nav-item:nth-child(n+3) {
        border-top: 1px solid #e1e0df;
    }

    .lineup-anchor-nav-item:nth-child(-n+2) {
        border-top: 0;
    }

    .lineup-anchor-nav-label {
        font-size: 14px;
    }

    .lineup-anchor-nav-icon {
        width: 24px;
        height: 24px;
    }

    /* タブは3つ並べると潰れるのでボタン風に折り返す */
    .lineup-price-tabs {
        border-bottom: 0;
        gap: 6px;
        flex-wrap: wrap;
    }

    .lineup-price-tabs .nav-item {
        width: calc(50% - 3px);
    }

    .lineup-price-tabs .nav-link {
        font-size: 13px;
        border-bottom: 1px solid #dbe6f0;
        border-radius: 8px;
    }

    .lineup-price-content {
        border-top: 1px solid #dbe6f0;
        border-radius: 8px;
        margin-top: 8px;
    }

    .lineup-price-scroll .lineup-price-table {
        font-size: 12px;
    }

    .lineup-price-scroll .lineup-price-table>:not(caption)>*>* {
        padding: 8px 5px;
    }

    .lineup-compare-table {
        font-size: 13px;
    }

    .lineup-step {
        padding: 36px 16px 20px;
    }
}

@media (max-width: 575.98px) {

    .section-title-wrapper {
        margin-bottom: 1.5rem;
    }

    /* 2列のままだとアイコン付きカードが窮屈で文字が細かく折り返すため、この幅からは1列にする */
    .lineup-highlight-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .lineup-highlight {
        padding: 18px 16px 16px;
        gap: 8px;
    }

    .lineup-highlight-ribbon {
        width: 52px;
        height: 50px;
        font-size: 14px;
        padding: 7px 0 0 9px;
    }

    .lineup-highlight-icon {
        width: 60px;
        height: 60px;
    }

    .lineup-highlight-body {
        gap: 12px;
    }

    .lineup-highlight-value {
        font-size: 18px;
    }

    .lineup-highlight-label {
        font-size: 16px;
    }

    .lineup-section-title {
        font-size: 28px;
    }

    .lineup-price-table thead th {
        font-size: 11px;
    }

    .lineup-cta-title {
        font-size: 19px;
    }
}