/*
 * AIPro 2026 page sections: Home, Services, Service detail, About, Contact, Thank-you.
 * Figma nodes 2:23, 21:224, 22:305, 23:429, 23:571, 67:1627. Uses the tokens in main.css.
 */

/* ---------- Section shells ---------- */
.sec { padding: var(--section-y) 0 112px; }
.sec--soft { background: var(--color-soft-blue); }
.sec--navy { background: var(--color-brand-navy); color: var(--color-white); }
.sec--navy h2, .sec--navy h3 { color: var(--color-white); }
.sec--flush-top { padding-top: 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 52px; }
.sec-head-main { max-width: 680px; }
.sec-head .section-title { max-width: 640px; font-size: 42px; line-height: 50px; }
.sec-head .eyebrow-label { letter-spacing: 2px; }
.sec-head-aside { max-width: 400px; margin: 0; font-size: 17px; line-height: 28px; }
.sec-head-link { flex-shrink: 0; font-size: 15px; }
.sec-head--on-dark .eyebrow-label { color: var(--color-white); }
.sec--navy .sec-head { margin-bottom: 64px; }
.mini-label { margin: 0; color: var(--color-text-secondary); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; line-height: 13px; text-transform: uppercase; }
.mini-label--blue { color: var(--color-brand-blue); letter-spacing: 1.6px; }

.tile-grid { display: grid; gap: var(--gap-card); }
.tile-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tile-grid--1 { grid-template-columns: minmax(0, 1fr); }

/* ---------- Lists ---------- */
.check-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.check-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--color-text-primary); font-size: 15px; font-weight: 500; line-height: 22px; }
.check-list .icon { margin-top: 2px; color: var(--color-brand-blue); }
.check-list--inline { flex-direction: row; flex-wrap: wrap; gap: 12px 24px; }
.check-list--inline li { align-items: center; font-size: 14px; line-height: 17px; }
.check-list--inline .icon { margin-top: 0; }
.next-steps { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.next-steps li { display: flex; align-items: center; gap: 12px; color: var(--color-text-primary); font-size: 14px; line-height: 22px; counter-increment: step; }
.next-steps li::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--color-brand-navy); color: var(--color-white); font-size: 12px; font-weight: 700; }

/* ---------- Home hero ---------- */
.home-hero { padding: 88px 0 96px; background: var(--gradient-page-hero); overflow: hidden; }
.home-hero-grid { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.home-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; max-width: 590px; }
.home-hero .eyebrow-pill { padding: 7px 14px 7px 12px; font-size: 12px; letter-spacing: 1.6px; }
.eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-brand-blue); }
.home-hero-title { margin: 0; font-size: 58px; font-weight: 800; line-height: 66px; letter-spacing: -1.2px; }
.home-hero-title .accent { color: var(--color-brand-blue); }
.home-hero-lead { max-width: 540px; margin: 0; color: var(--color-text-secondary); font-size: 18px; line-height: 30px; }
.home-hero .button-row { gap: 12px; }

.home-hero-visual { position: relative; flex: 0 0 600px; height: 520px; }
.dash-card { position: absolute; top: 50px; left: 60px; display: flex; flex-direction: column; gap: 20px; width: 520px; padding: 24px 28px 28px; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-white); box-shadow: var(--shadow-card); }
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dash-title { margin: 0 0 2px; color: var(--color-text-primary); font-size: 16px; font-weight: 700; line-height: 19px; }
.dash-sub { margin: 0; color: var(--color-text-secondary); font-size: 12px; line-height: 15px; }
.dash-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 600; line-height: 13px; white-space: nowrap; }
.dash-badge--live { padding: 5px 10px; background: rgba(18, 183, 106, .12); color: var(--color-success); font-size: 12px; }
.dash-badge--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dash-badge--done { background: rgba(18, 183, 106, .12); color: var(--color-success); }
.dash-head .dash-badge--done { padding: 5px 10px; font-size: 12px; }
.dash-badge--running { background: rgba(8, 127, 245, .12); color: var(--color-brand-blue); }
.dash-badge--ongoing { background: var(--color-brand-navy); color: var(--color-white); }
.dash-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dash-kpi { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 12px; background: var(--color-soft-blue); }
.dash-kpi span { color: var(--color-text-secondary); font-size: 11px; font-weight: 500; line-height: 13px; }
.dash-kpi strong { color: var(--color-text-primary); font-size: 19px; font-weight: 700; line-height: 23px; }
.dash-kpi em { color: var(--color-success); font-size: 11px; font-style: normal; font-weight: 600; line-height: 13px; }
.dash-chart { display: flex; flex-direction: column; gap: 12px; }
.dash-chart-head { display: flex; justify-content: space-between; color: var(--color-text-secondary); font-size: 12px; line-height: 15px; }
.dash-chart-head span:first-child { color: var(--color-text-primary); font-size: 13px; font-weight: 600; }
.dash-bars { display: flex; align-items: flex-end; gap: 10px; height: 130px; }
.dash-bars span { flex: 1; border-radius: 5px 5px 0 0; background: rgba(8, 127, 245, .22); }
.dash-bars span.is-strong { background: var(--color-brand-blue); }
.dash-rows { display: flex; flex-direction: column; gap: 10px; }
.dash-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 10px; color: var(--color-text-primary); font-size: 13px; font-weight: 500; line-height: 16px; }
.dash-chip { position: absolute; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-white); box-shadow: 0 12px 28px rgba(7, 30, 59, .1); }
.dash-chip--top { top: 0; left: 0; }
.dash-chip--bottom { top: 470px; left: 360px; }
.dash-chip-icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--color-brand-blue); color: var(--color-white); font-size: 15px; font-weight: 700; }
.dash-chip-icon--navy { background: var(--color-brand-navy); }
.dash-chip strong, .system-node strong { display: block; color: var(--color-text-primary); font-size: 13px; font-weight: 700; line-height: 16px; }
.dash-chip em, .system-node em { display: block; margin-top: 2px; color: var(--color-text-secondary); font-size: 11px; font-style: normal; line-height: 13px; }

/* ---------- Proof strip ---------- */
.proof-strip { padding: 44px 0; border-block: 1px solid var(--color-border); background: var(--color-white); }
.proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.proof-item { display: flex; flex-direction: column; gap: 8px; padding: 0 28px; border-left: 1px solid var(--color-border); }
.proof-item:first-child { padding-left: 0; border-left: 0; }
.proof-title { margin: 0; color: var(--color-brand-navy); font-size: 20px; font-weight: 700; line-height: 24px; }
.proof-text { margin: 0; color: var(--color-text-secondary); font-size: 14px; line-height: 22px; }

/* ---------- Service tiles ---------- */
.service-tile--compact { min-height: 280px; }
.service-tile--cta { justify-content: space-between; border-color: var(--color-brand-blue); background: var(--color-brand-blue); color: var(--color-white); }
.service-tile--cta:hover { box-shadow: none; }
.service-tile--cta h3 { margin: 0 0 12px; color: var(--color-white); font-size: 22px; line-height: 30px; }
.service-tile--cta p { color: var(--color-white); }
.service-tile--cta .button { align-self: flex-start; }

/* ---------- How we work ---------- */
.process-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-card); margin: 0; padding: 0; list-style: none; }
.process-step { display: flex; flex-direction: column; gap: 20px; }
.process-step-marker { display: flex; align-items: center; gap: 14px; }
.process-step-number { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; background: rgba(255, 255, 255, .08); font-size: 15px; font-weight: 700; }
.process-step:first-child .process-step-number { border-color: var(--color-brand-blue); background: var(--color-brand-blue); }
.process-step-line { flex: 1; height: 1px; background: rgba(255, 255, 255, .2); }
.process-step:last-child .process-step-line { background: transparent; }
.process-step h3 { margin: 0; font-size: 21px; font-weight: 700; line-height: 25px; }
.process-step p { margin: 0; font-size: 15px; line-height: 24px; }
.process-step .process-output { align-self: flex-start; padding: 6px 12px 6px 10px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .08); font-size: 12px; line-height: 15px; }
.process-output strong { font-weight: 600; }

/* ---------- Resource cards ---------- */
.resource-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 24px 24px 26px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); transition: box-shadow .15s ease; }
.resource-card:hover { box-shadow: var(--shadow-card); }
.resource-card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.resource-card .type-tag { letter-spacing: 1.2px; }
.resource-card h3 { margin: 0; color: var(--color-brand-navy); font-size: 18px; font-weight: 700; line-height: 25px; }
.resource-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.resource-card p { margin: 0; color: var(--color-text-secondary); font-size: 14px; line-height: 22px; }
.resource-card--compact { padding: 22px; border: 0; border-radius: 14px; background: var(--color-soft-blue); }
.resource-card--compact .resource-card-body { gap: 12px; }
.resource-card--compact .type-tag { background: var(--color-white); }
.resource-card--compact h3 { font-size: 16px; line-height: 23px; }

/* ---------- Contact form (shared) ---------- */
.contact-form { display: flex; flex-direction: column; gap: 18px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form .field { margin: 0; min-width: 0; }
.contact-form select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235D6B7C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.stage-field { padding: 0; border: 0; }
.stage-field legend { margin-bottom: 8px; padding: 0; }
.stage-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.stage-chip { position: relative; cursor: pointer; }
.stage-chip input { position: absolute; opacity: 0; pointer-events: none; }
.stage-chip span { display: inline-flex; padding: 8px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-white); color: var(--color-text-primary); font-size: 13px; font-weight: 500; line-height: 16px; transition: background-color .15s ease, border-color .15s ease; }
.stage-chip:hover span { border-color: var(--color-brand-blue); }
.stage-chip input:checked + span { border-color: var(--color-brand-blue); background: var(--color-brand-blue); color: var(--color-white); }
.stage-chip input:focus-visible + span { box-shadow: var(--focus-ring); }
.contact-form .consent-label { display: flex; align-items: flex-start; gap: 10px; color: var(--color-text-secondary); font-size: 13px; line-height: 20px; }
.contact-form .consent-label input { flex-shrink: 0; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--color-brand-blue); }
.contact-form .consent-label a { color: var(--color-brand-blue); text-decoration: underline; }
.contact-form .form-feedback { margin: 0; color: var(--color-text-secondary); font-size: 13px; }
.contact-form .form-feedback:empty { display: none; }
.contact-form button:disabled { opacity: .65; cursor: wait; }
.hp-field { position: absolute; left: -9999px; }
.form-status { padding: 12px 14px; border-radius: var(--radius-input); font-size: 14px; font-weight: 600; }
.form-status-success { background: var(--color-success-soft); color: var(--color-success); }
.form-status-error { background: var(--color-error-soft); color: var(--color-error); }

/* ---------- Home contact panel ---------- */
.contact-panel { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 56px; padding: 56px 40px 40px 56px; border-radius: 24px; background: var(--gradient-brand-panel); color: var(--color-white); }
.contact-panel-info { display: flex; flex-direction: column; gap: 22px; }
.contact-panel .eyebrow-label { margin: 0; color: var(--color-white); letter-spacing: 2px; }
.contact-panel .section-title { max-width: 440px; color: var(--color-white); font-size: 42px; line-height: 50px; }
.contact-panel .section-lead { max-width: 440px; margin: 0; color: var(--color-white); }
.contact-rows { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 12px 0 0; list-style: none; }
.contact-rows li { display: flex; align-items: center; gap: 14px; }
.contact-row-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: var(--color-white); }
.contact-row-text { display: flex; flex-direction: column; gap: 2px; }
.contact-row-label { font-size: 11px; font-weight: 700; letter-spacing: 1.4px; line-height: 13px; text-transform: uppercase; }
.contact-row-value { font-size: 16px; font-weight: 600; line-height: 19px; }
a.contact-row-value:hover { text-decoration: underline; }
.contact-panel-form { padding: 32px; border-radius: 18px; background: var(--color-white); color: var(--color-text-primary); }

/* ---------- CTA panels ---------- */
.cta-panel { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 52px 56px; }
.cta-panel-text { display: flex; flex-direction: column; gap: 10px; }
.cta-panel h2 { margin: 0; font-size: 34px; font-weight: 700; line-height: 41px; letter-spacing: -.6px; }
.cta-panel p { max-width: 600px; margin: 0; font-size: 17px; line-height: 27px; }
.cta-panel--navy p { color: rgba(255, 255, 255, .75); }
.cta-panel--gradient { padding-block: 48px; }
.cta-panel--gradient h2 { font-size: 32px; line-height: 39px; letter-spacing: -.5px; }
.cta-panel--gradient p { max-width: 620px; color: rgba(255, 255, 255, .8); line-height: 26px; }
.cta-panel--soft { flex-direction: column; gap: 16px; padding: 56px 40px; text-align: center; }
.cta-panel--soft .cta-panel-text { align-items: center; gap: 16px; }
.cta-panel--soft p { max-width: 640px; color: var(--color-text-secondary); }
.cta-panel--soft .button-row { justify-content: center; gap: 12px; padding-top: 8px; }
.cta-panel .button-row { flex-shrink: 0; }

/* ---------- Services page ---------- */
.sec--groups { padding: 72px 0 96px; }
.service-group { display: flex; gap: 48px; padding: 48px 0; border-top: 1px solid var(--color-border); }
.service-group:first-child { border-top: 0; }
.service-group-intro { display: flex; flex-direction: column; gap: 12px; flex: 0 0 276px; }
.service-group-intro .eyebrow-label { margin: 0; letter-spacing: 2px; }
.service-group-intro h2 { margin: 0; font-size: 26px; font-weight: 700; line-height: 34px; letter-spacing: -.4px; }
.service-group-intro p { margin: 0; color: var(--color-text-secondary); font-size: 15px; line-height: 24px; }
.service-group-intro .service-group-count { font-size: 13px; font-weight: 600; line-height: 16px; }
.service-group .tile-grid { flex: 1; }
.model-card { display: flex; flex-direction: column; gap: 18px; padding: 32px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); }
.model-card h3 { margin: 0; font-size: 24px; font-weight: 700; line-height: 29px; }
.model-card-text { margin: 0; color: var(--color-text-secondary); font-size: 15px; line-height: 24px; }
.model-card .check-list { gap: 10px; padding-top: 4px; }
.model-card-best { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--color-border); }
.model-card-best span { color: var(--color-text-secondary); font-size: 11px; font-weight: 700; letter-spacing: 1.4px; line-height: 13px; text-transform: uppercase; }
.model-card-best strong { color: var(--color-text-primary); font-size: 14px; font-weight: 600; line-height: 17px; }
.model-card--featured { border-color: var(--color-brand-navy); background: var(--color-brand-navy); }
.model-card--featured h3, .model-card--featured .check-list li, .model-card--featured .model-card-best strong { color: var(--color-white); }
.model-card--featured .model-card-text { color: rgba(255, 255, 255, .75); }
.model-card--featured .model-card-best { border-color: rgba(255, 255, 255, .15); }
.model-card--featured .model-card-best span { color: rgba(255, 255, 255, .55); }

/* ---------- Service detail ---------- */
.service-hero { padding: 64px 0 80px; border-bottom: 1px solid var(--color-border); background: var(--gradient-page-hero); }
.service-hero-grid { display: flex; align-items: center; justify-content: space-between; gap: 48px; }
.service-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: 600px; }
.service-hero .eyebrow-pill { padding: 6px 14px 6px 10px; font-size: 12px; letter-spacing: 1.6px; }
.service-hero h1 { margin: 0; font-size: 56px; font-weight: 800; line-height: 64px; letter-spacing: -1.2px; }
.service-hero-lead { max-width: 560px; margin: 0; color: var(--color-text-secondary); font-size: 19px; line-height: 30px; }
.service-hero .button-row { gap: 12px; }
.system-card { display: flex; flex-direction: column; gap: 16px; flex: 0 1 520px; padding: 24px 28px 28px; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-white); box-shadow: var(--shadow-card); }
.system-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.system-node { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; background: var(--color-soft-blue); }
.system-node strong { font-size: 14px; line-height: 17px; }
.system-node em { font-size: 12px; line-height: 15px; }
.system-node-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 10px; background: var(--color-white); color: var(--color-brand-blue); }
.system-hub { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px; border-radius: 12px; background: var(--color-brand-navy); color: var(--color-white); font-size: 14px; font-weight: 700; line-height: 17px; }
.system-hub span { font-size: 16px; }

.service-body { padding: 88px 0 96px; }
.service-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; }
.page-toc { position: sticky; top: 112px; }
.admin-bar .page-toc { top: 144px; }
.page-toc ul { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 12px 0 0; list-style: none; }
.page-toc a { display: block; padding: 9px 0 9px 14px; border-left: 2px solid var(--color-border); color: var(--color-text-secondary); font-size: 14px; font-weight: 500; line-height: 17px; }
.page-toc a:hover { color: var(--color-brand-blue); }
.page-toc a.is-active { border-color: var(--color-brand-blue); color: var(--color-brand-blue); font-weight: 600; }
.service-content { display: flex; flex-direction: column; gap: 72px; min-width: 0; }
.service-section { scroll-margin-top: 112px; }
.service-section .eyebrow-label { margin-bottom: 12px; letter-spacing: 2px; }
.content-title { max-width: 820px; margin: 0 0 28px; font-size: 34px; font-weight: 700; line-height: 42px; letter-spacing: -.6px; }
#overview .content-title { margin-bottom: 20px; }
.service-prose { color: var(--color-text-secondary); font-size: 17px; line-height: 29px; }
.service-prose > :first-child { margin-top: 0; }
.service-prose > :last-child { margin-bottom: 0; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.detail-card { display: flex; flex-direction: column; gap: 18px; padding: 28px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); }
.icon-box--sm { width: 44px; height: 44px; }
.detail-card h3 { margin: 0; font-size: 20px; font-weight: 700; line-height: 24px; }
.detail-card p { margin: 0; color: var(--color-text-secondary); font-size: 15px; line-height: 24px; }
.tech-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tech-tags li { padding: 5px 10px; border-radius: 6px; background: var(--color-soft-blue); color: var(--color-text-secondary); font-size: 13px; font-weight: 500; line-height: 16px; }
.stage-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.stage-cards li { display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 22px; border-radius: 14px; background: var(--color-soft-blue); }
.stage-number { color: var(--color-brand-blue); font-size: 13px; font-weight: 700; line-height: 16px; }
.stage-cards h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 21px; }
.stage-cards p { margin: 0; color: var(--color-text-secondary); font-size: 14px; line-height: 22px; }
.service-content .tile-grid { gap: 20px; }

/* ---------- Sub-services and extended service pages (Figma 74:1725 SEO, 74:2158 GEO) ---------- */
.accent { color: var(--color-brand-blue); }
.subservice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.subservice-card { display: flex; flex-direction: column; gap: 12px; padding: 22px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); color: var(--color-text-primary); transition: border-color .2s, box-shadow .2s; }
a.subservice-card:hover { border-color: var(--color-brand-blue); box-shadow: var(--shadow-card); }
.subservice-card strong { color: var(--color-brand-navy); font-size: 17px; font-weight: 700; line-height: 24px; }
.subservice-card-text { flex: 1; color: var(--color-text-secondary); font-size: 14px; line-height: 22px; }
.subservice-card--planned { border-style: dashed; background: var(--color-soft-blue); }
.subservice-card--planned .icon-box { background: var(--color-white); color: var(--color-text-secondary); }

.illustration-card { display: flex; flex-direction: column; gap: 12px; flex: 0 0 500px; width: 500px; margin: 0; padding: 22px 26px 24px; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-white); box-shadow: var(--shadow-card); }
.illustration-card .dash-head > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.illustration-tag { flex-shrink: 0; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--color-soft-blue); color: var(--color-text-secondary); font-size: 12px; font-weight: 600; line-height: 15px; }
.illustration-question { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--color-brand-navy); color: var(--color-white); font-size: 14px; font-weight: 600; line-height: 17px; }
.illustration-question span { color: rgba(255, 255, 255, .6); font-size: 13px; font-weight: 700; }
.illustration-rows { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.illustration-rows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 43px; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: 10px; }
.illustration-rows strong { display: block; color: var(--color-text-primary); font-size: 14px; font-weight: 600; line-height: 17px; }
.illustration-rows em { display: block; margin-top: 2px; color: var(--color-text-secondary); font-size: 12px; font-style: normal; line-height: 15px; }
.illustration-rows .dash-badge { padding: 4px 10px; font-size: 12px; line-height: 15px; }
.dash-badge--muted { background: rgba(220, 229, 239, .6); color: var(--color-text-secondary); }
.illustration-share { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.illustration-share p { margin: 0; color: var(--color-text-secondary); font-size: 12px; font-weight: 600; line-height: 15px; }
.illustration-share-bar { display: flex; gap: 4px; }
.illustration-share-bar span { flex-grow: 0; flex-shrink: 1; height: 12px; border-radius: 4px; }
.illustration-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; }
.illustration-legend li { display: inline-flex; align-items: center; gap: 6px; color: var(--color-text-secondary); font-size: 11px; line-height: 13px; }
.illustration-legend li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.illustration-legend li { color: var(--color-text-secondary); }
.illustration-share-bar .share-0, .illustration-legend .share-0::before { background: var(--color-brand-blue); }
.illustration-share-bar .share-1, .illustration-legend .share-1::before { background: var(--color-deep-blue); }
.illustration-share-bar .share-2, .illustration-legend .share-2::before { background: var(--color-text-secondary); }
.illustration-share-bar .share-3, .illustration-legend .share-3::before { background: var(--color-border); }

.ext-problems { padding: 64px 0; border-bottom: 1px solid var(--color-border); }
.ext-problems .eyebrow-label { margin: 0 0 28px; letter-spacing: 2px; }
.ext-problem-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ext-problem { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 22px 24px 24px; border-radius: var(--radius-card); background: var(--color-soft-blue); }
.ext-problem-mark { height: 28px; color: var(--color-brand-blue); font-size: 34px; font-weight: 800; line-height: 1; }
.ext-problem p { margin: 0; color: var(--color-text-secondary); font-size: 14px; line-height: 22px; }
.ext-problem .ext-problem-title { color: var(--color-brand-navy); font-size: 18px; font-weight: 700; line-height: 25px; }

.service-detail--extended .service-hero h1 { font-size: 54px; line-height: 62px; }
.service-detail--extended .content-title { margin-bottom: 24px; font-size: 32px; line-height: 40px; }
.toc-siblings { display: flex; flex-direction: column; gap: 8px; padding-top: 24px; }
.toc-siblings .mini-label { margin-bottom: 0; }
.page-toc .toc-siblings a { padding: 0; border: 0; color: var(--color-brand-blue); font-weight: 600; }
.toc-planned { color: var(--color-text-secondary); font-size: 14px; font-weight: 500; line-height: 17px; }
.ext-included { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.ext-included li { display: flex; flex-direction: column; gap: 12px; padding: 22px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); }
.ext-included h3 { margin: 0; font-size: 17px; font-weight: 700; line-height: 24px; }
.ext-included p { margin: 0; color: var(--color-text-secondary); font-size: 14px; line-height: 22px; }
.stage-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.stage-time { padding: 4px 10px; border-radius: var(--radius-pill); background: var(--color-white); color: var(--color-brand-navy); font-size: 12px; font-weight: 600; line-height: 15px; white-space: nowrap; }
.ext-note { margin: 24px 0 0; color: var(--color-text-secondary); font-size: 14px; font-weight: 500; line-height: 22px; }
.ext-measure { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; }
.ext-metrics { margin: 0; padding: 0; list-style: none; counter-reset: metric; }
.ext-metrics li { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--color-border); counter-increment: metric; }
.ext-metrics li:first-child { border-top: 1px solid var(--color-border); }
.ext-metrics li::before { content: counter(metric); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--color-soft-blue); color: var(--color-brand-blue); font-size: 14px; font-weight: 700; }
.ext-metrics strong { display: block; color: var(--color-brand-navy); font-size: 16px; font-weight: 700; line-height: 19px; }
.ext-metrics em { display: block; margin-top: 2px; color: var(--color-text-secondary); font-size: 13px; font-style: normal; line-height: 19px; }
.ext-report { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 24px; border-radius: var(--radius-card); background: var(--color-brand-navy); color: var(--color-white); }
.ext-report-head { display: flex; align-items: center; justify-content: space-between; margin: 0; font-size: 15px; font-weight: 700; }
.ext-report-tag { color: rgba(255, 255, 255, .5); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; }
.ext-report ul { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.ext-report li { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, .06); font-size: 13px; font-weight: 500; }
.ext-bars { display: flex; align-items: flex-end; gap: 3px; height: 24px; }
.ext-bars i { width: 6px; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.ext-bars i:last-child { background: var(--color-brand-blue); }
.ext-report-note { margin: 0; color: rgba(255, 255, 255, .65); font-size: 12px; line-height: 18px; }
.ext-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ext-offer { display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); }
.ext-offer h3 { margin: 0; color: var(--color-brand-navy); font-size: 20px; font-weight: 700; line-height: 24px; }
.ext-offer p { margin: 0; }
.ext-offer-for { color: var(--color-text-secondary); font-size: 14px; font-weight: 500; line-height: 21px; }
.ext-offer ul { display: flex; flex-direction: column; gap: 8px; flex: 1; margin: 0; padding: 4px 0 0; list-style: none; }
.ext-offer li { position: relative; padding-left: 16px; color: var(--color-text-primary); font-size: 14px; line-height: 21px; }
.ext-offer li::before { content: "•"; position: absolute; left: 0; color: var(--color-brand-blue); font-weight: 700; }
.ext-offer-duration { display: flex; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid var(--color-border); color: var(--color-text-secondary); font-size: 12px; }
.ext-offer-duration strong { color: var(--color-brand-navy); }
.ext-offer-badge { align-self: flex-start; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--color-brand-blue); color: var(--color-white); font-size: 12px; font-weight: 600; line-height: 15px; text-transform: uppercase; }
.ext-offer--featured { border-color: var(--color-brand-navy); background: var(--color-brand-navy); }
.ext-offer--featured h3, .ext-offer--featured li, .ext-offer--featured li::before, .ext-offer--featured .ext-offer-duration strong { color: var(--color-white); }
.ext-offer--featured .ext-offer-for { color: rgba(255, 255, 255, .75); }
.ext-offer--featured .ext-offer-duration { border-color: rgba(255, 255, 255, .15); color: rgba(255, 255, 255, .6); }
.ext-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ext-thailand, .ext-promise { display: flex; flex-direction: column; gap: 14px; padding: 26px 28px; border-radius: var(--radius-card); }
.ext-thailand { background: var(--color-soft-blue); }
.ext-promise { gap: 12px; border: 1px solid var(--color-brand-navy); border-left-width: 4px; background: var(--color-white); }
.ext-pair .eyebrow-label { margin: 0; letter-spacing: 2px; }
.ext-promise .eyebrow-label { color: var(--color-brand-navy); }
.ext-pair h2 { margin: 0; color: var(--color-brand-navy); font-size: 20px; font-weight: 700; line-height: 24px; letter-spacing: 0; }
.ext-thailand .check-list { gap: 10px; }
.ext-thailand .check-list li { font-size: 14px; }
.ext-promise p:last-child { margin: 0; color: var(--color-text-secondary); font-size: 15px; line-height: 24px; }

/* Homepage SEO & GEO spotlight (Figma 85:1900) */
.spotlight-grid { display: flex; align-items: center; gap: 72px; }
.spotlight-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; flex: 0 0 560px; }
.spotlight-copy .eyebrow-label { margin: 0; letter-spacing: 2px; }
.spotlight-copy .section-title { margin: 0; }
.spotlight-copy .section-lead { max-width: 540px; margin: 0; }
.spotlight-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: 100%; }
.spotlight-card { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: var(--radius-card); background: var(--color-soft-blue); color: var(--color-text-secondary); transition: box-shadow .2s; }
.spotlight-card:hover { box-shadow: 0 0 0 1px var(--color-brand-blue) inset; }
.spotlight-card-head { display: flex; align-items: center; gap: 12px; }
.spotlight-card-head strong { color: var(--color-brand-navy); font-size: 20px; font-weight: 700; line-height: 24px; }
.icon-box--white { width: 40px; height: 40px; border-radius: 10px; background: var(--color-white); }
.spotlight-card-text { font-size: 14px; line-height: 22px; }
.spotlight-action { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-top: 4px; }
.spotlight-action p { margin: 0; color: var(--color-text-secondary); font-size: 13px; font-weight: 500; }
.illustration-card--spotlight { flex: 1 1 auto; width: auto; min-width: 0; }

/* ---------- Home: journey card, why all-in-one, flagship card (Thai Figma 2:2, 16:128) ---------- */
.journey-visual { height: 620px; } /* Six plan rows (handoff v3 revision 2). */
.journey-card { position: absolute; top: 44px; left: 60px; display: flex; flex-direction: column; gap: 12px; width: 500px; padding: 22px 26px 24px; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-white); box-shadow: var(--shadow-card); }
.journey-card .dash-head .dash-badge { padding: 3px 10px; font-size: 12px; line-height: 18px; }
.journey-steps { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.journey-step { display: flex; align-items: center; gap: 12px; padding: 8px 14px 8px 12px; border: 1px solid var(--color-border); border-radius: 12px; }
.journey-step--monthly { border-color: transparent; background: var(--color-soft-blue); }
.journey-step-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; background: var(--color-soft-blue); color: var(--color-brand-blue); }
.journey-step--monthly .journey-step-icon { background: var(--color-white); }
.journey-step-text { flex: 1; min-width: 0; }
.journey-step-text strong { display: block; color: var(--color-brand-navy); font-size: 14px; font-weight: 700; line-height: 21px; white-space: pre-wrap; }
.journey-step-text em { display: block; color: var(--color-text-secondary); font-size: 12px; font-style: normal; line-height: 18px; }
.journey-step .dash-badge { padding: 3px 10px; font-size: 12px; line-height: 18px; }
.journey-chips { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding-top: 2px; }
.journey-chip { padding: 5px 14px; border-radius: 8px; background: var(--color-brand-navy); color: var(--color-white); font-size: 13px; font-weight: 700; line-height: 20px; }
.journey-plus { color: var(--color-text-secondary); font-size: 14px; font-weight: 700; }
.journey-float { padding: 10px 18px 10px 14px; }
.journey-visual .dash-chip--top { top: 0; left: 0; }
.journey-visual .dash-chip--bottom { top: 558px; left: 320px; }
.journey-float strong { font-size: 13px; line-height: 20px; }
.journey-float em { font-size: 11px; line-height: 16px; }

.why-all .sec-head { align-items: flex-end; }
.why-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0 0 24px; padding: 0; list-style: none; }
.why-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); }
.why-card-top { display: flex; align-items: center; justify-content: space-between; }
.why-card-number { color: var(--color-text-secondary); font-size: 13px; font-weight: 700; line-height: 20px; }
.why-card h3 { margin: 0; font-size: 19px; line-height: 28px; }
.why-card p { flex: 1; margin: 0; color: var(--color-text-secondary); font-size: 14px; line-height: 23px; }
.why-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.why-compare-col { padding: 24px 32px; }
.why-compare-col--before { background: var(--color-soft-blue); }
.why-compare-col--after { background: var(--color-brand-navy); color: var(--color-white); }
.why-compare-title { margin: 0; color: var(--color-text-secondary); font-size: 13px; font-weight: 700; line-height: 20px; }
.why-compare-col--after .why-compare-title { color: rgba(255, 255, 255, .75); }
.why-compare ul { margin: 0; padding: 0; list-style: none; }
.why-compare li { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: var(--color-text-secondary); font-size: 16px; font-weight: 500; line-height: 25px; }
.why-compare li + li { border-top: 1px solid var(--color-border); }
.why-compare-col--after li { color: var(--color-white); font-weight: 600; }
.why-compare-col--after li + li { border-color: rgba(255, 255, 255, .12); }
.why-mark { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; font-size: 11px; font-weight: 700; }
.why-mark--no { background: var(--color-border); color: var(--color-text-secondary); }
.why-mark--yes { background: var(--color-brand-blue); color: var(--color-white); }
.why-action { margin-top: 32px; }

.flagship-card { display: flex; align-items: center; gap: 40px; margin-bottom: 24px; padding: 34px 40px; border-radius: var(--radius-panel); background: linear-gradient(155deg, var(--color-brand-navy) 0%, var(--color-deep-blue) 77%); color: var(--color-white); scroll-margin-top: 112px; }
.flagship-card-copy { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.flagship-badge { padding: 3px 10px; border-radius: var(--radius-pill); background: var(--color-brand-blue); font-size: 12px; font-weight: 700; line-height: 18px; white-space: pre; }
.flagship-card :is(h2, h3) { margin: 0; color: var(--color-white); font-size: 30px; line-height: 40px; }
.flagship-card p { margin: 0; color: rgba(255, 255, 255, .8); font-size: 16px; line-height: 27px; }
.flagship-card .flagship-subtitle { margin-top: -6px; color: var(--color-white); font-size: 18px; font-weight: 600; line-height: 28px; }
.flagship-link { color: var(--color-white); font-size: 15px; font-weight: 600; line-height: 22px; }
.flagship-link:hover { text-decoration: underline; }
.flagship-card-side { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; flex-shrink: 0; }
.flagship-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; margin: 0; padding: 0; list-style: none; }
.flagship-flow li { padding: 5px 10px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 8px; background: rgba(255, 255, 255, .1); font-size: 13px; font-weight: 700; line-height: 20px; }
.flagship-flow li.is-growth { border-color: var(--color-brand-blue); background: var(--color-brand-blue); }
.flagship-flow li + li::before { content: "→"; margin: 0 8px 0 -2px; color: rgba(255, 255, 255, .4); }
.flagship-flow li + li { position: relative; margin-left: 18px; }
.flagship-flow li + li::before { position: absolute; left: -17px; margin: 0; }

/* ---------- About ---------- */
.about-intro { display: grid; grid-template-columns: 560px minmax(0, 1fr); gap: 80px; }
.about-intro-statement .eyebrow-label { margin-bottom: 24px; letter-spacing: 2px; }
.about-intro-statement h2 { margin: 0; font-size: 28px; font-weight: 600; line-height: 40px; letter-spacing: -.4px; }
.about-intro-detail { display: flex; flex-direction: column; gap: 28px; }
.about-intro-detail > p { margin: 0; color: var(--color-text-secondary); font-size: 17px; line-height: 29px; }
.fact-table { margin: 0; border-top: 1px solid var(--color-border); }
.fact-table div { display: flex; justify-content: space-between; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--color-border); }
.fact-table dt { color: var(--color-text-secondary); font-size: 14px; font-weight: 500; }
.fact-table dd { margin: 0; color: var(--color-brand-navy); font-size: 15px; font-weight: 600; text-align: right; }
.info-card { display: flex; flex-direction: column; gap: 16px; padding: 28px 26px 30px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); }
.info-card h3 { margin: 0; font-size: 20px; font-weight: 700; line-height: 24px; }
.info-card p { margin: 0; color: var(--color-text-secondary); font-size: 15px; line-height: 24px; }
.sec--soft .sec-head + .tile-grid { margin-top: -4px; }
.text-sections { border-top: 1px solid var(--color-border); }
.text-section { display: flex; gap: 80px; padding: 44px 0; border-bottom: 1px solid var(--color-border); }
.text-section-head { display: flex; flex-direction: column; gap: 10px; flex: 0 0 380px; }
.text-section-number { color: var(--color-brand-blue); font-size: 13px; font-weight: 700; line-height: 16px; }
.text-section h2 { margin: 0; font-size: 26px; font-weight: 700; line-height: 34px; letter-spacing: -.4px; }
.text-section p { flex: 1; margin: 0; color: var(--color-text-secondary); font-size: 17px; line-height: 29px; }

/* ---------- Contact page ---------- */
.sec--options { padding: 64px 0 0; }
.option-card { display: flex; align-items: flex-start; gap: 18px; padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); }
.option-card.is-highlighted { border: 2px solid var(--color-brand-blue); background: var(--color-soft-blue); }
.option-card.is-highlighted .icon-box { background: var(--color-white); }
.option-card-body { display: flex; flex-direction: column; gap: 8px; }
.option-card h2 { margin: 0; font-size: 18px; font-weight: 700; line-height: 22px; }
.option-card p { margin: 0; color: var(--color-text-secondary); font-size: 14px; line-height: 22px; }
.sec--contact-main { padding: 56px 0 96px; }
.contact-main { display: grid; grid-template-columns: 480px minmax(0, 1fr); gap: 32px; align-items: start; }
.contact-info-panel { display: flex; flex-direction: column; gap: 24px; padding: 44px 40px; border-radius: var(--radius-panel); background: var(--color-soft-blue); }
.contact-info-panel .eyebrow-label { margin: 0; letter-spacing: 2px; }
.contact-info-panel h2 { margin: 0; font-size: 36px; font-weight: 700; line-height: 44px; letter-spacing: -.6px; }
.contact-info-lead { max-width: 400px; margin: 0; color: var(--color-text-secondary); font-size: 16px; line-height: 26px; }
.contact-info-panel .contact-rows { gap: 10px; padding: 0; }
.contact-info-panel .contact-rows li { padding: 12px 14px; border-radius: 12px; background: var(--color-white); }
.contact-info-panel .contact-row-icon { width: 38px; height: 38px; background: var(--color-brand-blue); }
.contact-info-panel .contact-row-icon .icon { width: 18px; height: 18px; }
.contact-info-panel .contact-row-label { color: var(--color-text-secondary); }
.contact-info-panel .contact-row-value { color: var(--color-brand-navy); font-size: 15px; line-height: 18px; }
.contact-next { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.contact-faq-link { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding-top: 16px; border-top: 1px solid var(--color-border); color: var(--color-text-secondary); font-size: 14px; }
.form-card { padding: 40px; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-white); box-shadow: 0 16px 40px rgba(7, 30, 59, .06); }
.form-card-title { margin: 0 0 6px; font-size: 22px; font-weight: 700; line-height: 27px; }
.form-card-note { margin: 0 0 20px; color: var(--color-text-secondary); font-size: 13px; line-height: 16px; }
.form-card .contact-form { gap: 20px; }
.form-card .form-row { gap: 16px; }
.location-panel { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 44px 48px; border-radius: var(--radius-panel); background: linear-gradient(135deg, var(--color-brand-navy) 0%, var(--color-deep-blue) 100%); color: var(--color-white); }
.location-panel-main { display: flex; align-items: center; gap: 20px; }
.location-panel-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, .15); }
.location-panel h2 { margin: 0 0 6px; color: var(--color-white); font-size: 24px; font-weight: 700; line-height: 29px; }
.location-panel p { margin: 0; color: rgba(255, 255, 255, .8); font-size: 15px; line-height: 22px; }

/* ---------- Thank-you ---------- */
.thank-you { padding: 96px 0 112px; }
.thank-you-card { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 720px; margin-inline: auto; padding: 52px 56px; border: 1px solid var(--color-border); border-radius: 24px; background: var(--color-white); box-shadow: 0 20px 48px rgba(7, 30, 59, .06); text-align: center; }
.thank-you-card h1 { max-width: 600px; margin: 0; font-size: 34px; font-weight: 800; line-height: 42px; letter-spacing: -.6px; }
.thank-you-text { max-width: 560px; margin: 0; color: var(--color-text-secondary); font-size: 17px; line-height: 28px; }
.thank-you-next { display: flex; flex-direction: column; gap: 14px; width: 100%; padding: 24px 28px; border-radius: var(--radius-card); background: var(--color-soft-blue); text-align: left; }
.thank-you-next .next-steps li { font-size: 15px; }
.thank-you-next .next-steps li::before { width: 26px; height: 26px; }
.thank-you-card .button-row { justify-content: center; gap: 12px; padding-top: 6px; }
.thank-you-phone { margin: 0; color: var(--color-text-secondary); font-size: 14px; font-weight: 500; }
.thank-you-phone a { color: var(--color-brand-blue); }
.thank-you--steps { padding: 112px 0 80px; background: linear-gradient(180deg, var(--color-soft-blue) 0%, var(--color-white) 100%); }
.thank-you-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.thank-you-check { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; border-radius: 50%; background: var(--color-success); color: var(--color-white); }
.thank-you--steps h1 { margin: 0; font-size: 40px; font-weight: 800; line-height: 56px; }
.thank-you--steps .thank-you-text { max-width: none; font-size: 18px; line-height: 30px; }
.thank-you-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 320px)); justify-content: center; gap: 20px; width: 100%; margin: 0; padding: 28px 0 0; list-style: none; text-align: left; }
.thank-you-steps li { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px 24px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-white); }
.thank-you-step-num { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-brand-blue); color: var(--color-white); font-size: 15px; font-weight: 700; line-height: 22px; }
.thank-you-steps h2 { margin: 0; font-size: 18px; line-height: 28px; }
.thank-you-steps p { margin: 0; color: var(--color-text-secondary); font-size: 15px; line-height: 24px; }
.thank-you--steps .button-row { justify-content: center; gap: 12px; padding-top: 16px; }
.thank-you-meanwhile { padding: 24px 0 112px; text-align: center; }
.thank-you-meanwhile p { margin: 0; color: var(--color-text-secondary); font-size: 15px; font-weight: 500; line-height: 24px; white-space: pre-wrap; }
.thank-you-meanwhile a { color: inherit; font-weight: inherit; }
.thank-you-meanwhile a:hover { color: var(--color-brand-blue); text-decoration: underline; }

/* ---------- ≤1200px: hero and wide two-column layouts tighten ---------- */
@media (max-width: 1200px) {
	.home-hero-grid { flex-direction: column; align-items: stretch; gap: 56px; }
	.home-hero-copy { max-width: 720px; }
	.home-hero-visual { flex: none; width: 600px; max-width: 100%; margin-inline: auto; }
	.contact-panel { grid-template-columns: 1fr; gap: 40px; }
	.about-intro { grid-template-columns: 1fr; gap: 40px; }
	.contact-main { grid-template-columns: 1fr; }
	.service-hero-grid { flex-direction: column; align-items: stretch; }
	.system-card { flex: none; width: 100%; max-width: 560px; }
}

/* ---------- Tablet (≤1024px) ---------- */
@media (max-width: 1024px) {
	.sec { padding-bottom: 96px; }
	.sec-head { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 40px; }
	.sec--navy .sec-head { margin-bottom: 48px; }
	.tile-grid--4, .tile-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
	.proof-item:nth-child(odd) { padding-left: 0; border-left: 0; }
	.process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
	.process-step-line { display: none; }
	.service-group { flex-direction: column; gap: 28px; }
	.service-group-intro { flex: none; max-width: 560px; }
	.service-layout { grid-template-columns: 1fr; }
	.page-toc { display: none; }
	.stage-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.text-section { flex-direction: column; gap: 16px; }
	.text-section-head { flex: none; }
	.cta-panel { flex-direction: column; align-items: flex-start; }
	.cta-panel--soft { align-items: center; }
	.location-panel { flex-direction: column; align-items: flex-start; }
}

/* ---------- Mobile (≤767px) ---------- */
@media (max-width: 767px) {
	.sec { padding: var(--section-y) 0 72px; }
	.sec--flush-top { padding-top: 0; }
	.sec-head .section-title, .contact-panel .section-title { font-size: 29px; line-height: 36px; letter-spacing: -.5px; }
	.tile-grid--4, .tile-grid--3, .tile-grid--2, .proof-grid, .process-steps, .detail-grid, .stage-cards, .form-row { grid-template-columns: 1fr; }
	.proof-item { padding: 0; border-left: 0; }
	.home-hero { padding: 48px 0 64px; }
	.home-hero-title { font-size: 38px; line-height: 44px; letter-spacing: -.8px; }
	.home-hero-lead { font-size: 17px; line-height: 28px; }
	.home-hero-visual { width: 100%; height: auto; }
	.dash-card { position: static; width: 100%; padding: 20px; gap: 16px; }
	.dash-kpis { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
	.dash-kpi { padding: 10px; }
	.dash-kpi strong { font-size: 14px; line-height: 18px; }
	.dash-bars { gap: 6px; height: 100px; }
	.dash-chip { display: none; }
	.service-tile { min-height: 0; }
	.service-tile-body { margin-top: 20px; }
	.service-hero { padding: 40px 0 56px; }
	.service-hero h1 { font-size: 38px; line-height: 44px; letter-spacing: -.8px; }
	.service-hero-lead { font-size: 17px; line-height: 27px; }
	.system-card { padding: 20px; }
	.system-row { grid-template-columns: 1fr; }
	.service-body { padding: 56px 0 64px; }
	.service-content { gap: 56px; }
	.content-title { font-size: 26px; line-height: 33px; letter-spacing: -.4px; }
	.detail-card { padding: 22px; }
	.contact-panel { padding: 32px 20px 20px; border-radius: var(--radius-panel); }
	.contact-panel-form, .form-card { padding: 22px; }
	.contact-info-panel { padding: 28px 20px; }
	.contact-info-panel h2 { font-size: 29px; line-height: 36px; }
	.about-intro-statement h2 { font-size: 23px; line-height: 33px; }
	.fact-table div { flex-direction: column; gap: 4px; }
	.fact-table dd { text-align: left; }
	.text-section h2 { font-size: 23px; line-height: 30px; }
	.text-section p { font-size: 16px; line-height: 27px; }
	.cta-panel { padding: 36px 24px; }
	.cta-panel h2, .cta-panel--gradient h2 { font-size: 26px; line-height: 33px; }
	.cta-panel .button-row, .cta-panel .button { width: 100%; }
	.location-panel { padding: 28px 22px; }
	.location-panel-main { flex-direction: column; align-items: flex-start; }
	.thank-you { padding: 48px 0 64px; }
	.thank-you-card { padding: 36px 22px; }
	.thank-you-card h1 { font-size: 27px; line-height: 34px; }
	.thank-you-next { padding: 20px; }
	.thank-you-card .button-row .button { width: 100%; }
	.thank-you--steps { padding: 56px 0 48px; }
	.thank-you--steps h1 { font-size: 28px; line-height: 40px; }
	.thank-you--steps .thank-you-text { font-size: 16px; line-height: 27px; }
	.thank-you-steps { grid-template-columns: 1fr; gap: 12px; padding-top: 12px; }
	.thank-you--steps .button-row .button { width: 100%; }
	.thank-you-meanwhile { padding: 8px 0 64px; }
	.sec--groups { padding: 32px 0 64px; }
	.service-group { padding: 36px 0; }
}

@media (max-width: 1200px) {
	.spotlight-grid { gap: 48px; }
	.spotlight-copy { flex-basis: 480px; }
	.illustration-card { flex-basis: 440px; width: 440px; }
	.ext-measure { grid-template-columns: 1fr; }
	.ext-report { max-width: 480px; }
}
@media (max-width: 1024px) {
	.illustration-card { flex: none; width: 100%; max-width: 560px; }
	.spotlight-grid { flex-direction: column; align-items: stretch; }
	.spotlight-copy { flex: none; }
	.ext-problem-grid { grid-template-columns: 1fr; }
	.ext-included, .ext-offers, .subservice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ext-pair { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.illustration-card { padding: 18px; }
	.illustration-rows li { padding: 10px 12px; }
	.ext-problems { padding: 48px 0; }
	.ext-included, .ext-offers, .subservice-grid, .spotlight-cards { grid-template-columns: 1fr; }
	.service-detail--extended .content-title { font-size: 28px; line-height: 35px; }
	.service-detail--extended .service-hero h1 { font-size: 38px; line-height: 44px; }
	.ext-report { max-width: none; }
	.spotlight-action .button { width: 100%; justify-content: center; }
}

@media (max-width: 1024px) {
	.why-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.flagship-card { flex-direction: column; align-items: flex-start; }
	.flagship-card-side { align-items: flex-start; }
	.flagship-flow { justify-content: flex-start; }
}
@media (max-width: 767px) {
	.journey-visual { height: auto; }
	.journey-card { position: static; width: 100%; padding: 18px; }
	/* Six plan rows must all fit on a phone: tighter rows, smaller icon and badge. */
	.journey-steps { gap: 8px; }
	.journey-step { gap: 10px; padding: 6px 10px; }
	.journey-step-icon { width: 30px; height: 30px; }
	.journey-step .dash-badge { padding: 2px 8px; font-size: 11px; }
	.journey-visual .journey-float { display: none; }
	.why-cards, .why-compare { grid-template-columns: 1fr; }
	.why-compare-col { padding: 20px; }
	.flagship-card { gap: 24px; padding: 28px 22px; }
	.flagship-card :is(h2, h3) { font-size: 26px; line-height: 36px; }
}

/* ---------- Explainer with linked steps (Home "AI-Ready Website คืออะไร?") ---------- */
.explainer-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--gap-card); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.explainer-steps li { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px 26px 24px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); }
.explainer-step-head { display: flex; align-items: center; justify-content: space-between; }
.explainer-step-number { color: var(--color-brand-blue); font-size: 14px; font-weight: 700; }
.explainer-steps h3 { margin: 0; font-size: 20px; line-height: 28px; }
.explainer-steps .text-link { margin-top: auto; }
.explainer-more { margin: 28px 0 0; }

/* ---------- Service page link lists and draft notice ---------- */
.service-links { display: flex; flex-direction: column; gap: 10px; margin: 20px 0 0; padding: 0; list-style: none; }
.service-links a { display: inline-flex; gap: 8px; align-items: baseline; color: var(--color-brand-blue); font-weight: 600; }
.service-links a:hover { text-decoration: underline; }
.service-links--bottom { margin: 0; padding: 22px 24px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-soft-blue); }
.draft-note { display: flex; gap: 12px; margin: 0 0 32px; padding: 14px 18px; border: 1px solid rgba(181, 71, 8, .3); border-radius: 12px; background: var(--color-warning-bg, #FFF6E5); color: var(--color-warning-text, #B54708); font-size: 14px; font-weight: 500; line-height: 22px; }
.draft-note .icon { flex-shrink: 0; margin-top: 1px; }

@media (max-width: 1024px) {
	.explainer-steps { grid-template-columns: 1fr; }
}

/* ---------- Flagship price (handoff v2: "เริ่มต้น 19,900 บาท/เดือน" + "ยังไม่รวม VAT") ---------- */
.flagship-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; color: var(--color-brand-navy); }
.flagship-price strong { font-size: 20px; font-weight: 700; line-height: 28px; }
.flagship-price small { color: var(--color-text-secondary); font-size: 13px; line-height: 20px; }
/* Small print under a price card's items (same look as the VAT note), for example AI usage costs. */
.price-card-footnote { margin: 0; color: var(--color-text-secondary); font-size: 13px; line-height: 20px; }
.flagship-price--card { color: var(--color-white); }
.flagship-card .flagship-price--card small { color: rgba(255, 255, 255, .72); }
.price-card .flagship-price--card { color: var(--color-brand-navy); }
.price-card .flagship-price--card strong { font-size: 34px; line-height: 44px; }

/* ---------- Two cards with points (Home "AI-Ready Website คืออะไร?") ---------- */
.pillar-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-card); }
.pillar-card { display: flex; flex-direction: column; gap: 14px; padding: 30px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); }
.pillar-card h3 { margin: 0; font-size: 24px; line-height: 34px; }
.pillar-card p { margin: 0; color: var(--color-text-secondary); line-height: 27px; }
.explainer-note { margin: 24px 0 0; color: var(--color-text-secondary); font-weight: 500; }

/* ---------- Comparison table ---------- */
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-white); }
.compare-table th, .compare-table td { padding: 16px 20px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; line-height: 26px; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table thead th { color: var(--color-brand-navy); font-size: 17px; font-weight: 700; }
.compare-table tbody th { width: 22%; color: var(--color-brand-navy); font-weight: 600; }
.compare-table td { color: var(--color-text-secondary); }
.compare-table .compare-highlight { background: rgba(8, 127, 245, .06); color: var(--color-brand-navy); font-weight: 500; }
.compare-table thead .compare-highlight { background: var(--color-brand-blue); color: var(--color-white); }
.compare-more { margin: 24px 0 0; }

/* ---------- Demo video ---------- */
.video-demo-frame { overflow: hidden; border-radius: var(--radius-card); background: var(--color-brand-navy); aspect-ratio: 16 / 9; }
.video-demo-frame iframe, .video-demo-frame video { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- Flagship package page ---------- */
.flagship-body { padding-top: 64px; }
.flagship-content { display: flex; flex-direction: column; gap: 72px; }
.flagship-content > .draft-note { margin: 0 0 -40px; }
.flagship-section .content-title { margin-bottom: 24px; }
.ready-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin: 0; padding: 0; list-style: none; }
.ready-checklist li { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-white); color: var(--color-brand-navy); font-weight: 500; line-height: 26px; }
.ready-number { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-brand-blue); color: var(--color-white); font-size: 14px; font-weight: 700; line-height: 1; }
.price-card { display: flex; flex-direction: column; gap: 24px; max-width: 640px; padding: 32px; border: 2px solid var(--color-brand-blue); border-radius: 20px; background: var(--color-white); box-shadow: var(--shadow-card); }
.price-card-head { display: flex; flex-direction: column; gap: 6px; }
.price-card h3 { margin: 0; font-size: 22px; }
.price-card .button { align-self: flex-start; }
.price-card-list li { line-height: 26px; }
.stage-cards--flow { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.flagship-special { padding: 28px 32px; border-radius: var(--radius-card); background: var(--color-soft-blue); }
.flagship-special p { margin: 0; max-width: 760px; line-height: 28px; }
.terms-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding-left: 22px; line-height: 27px; }
.terms-list li::marker { color: var(--color-brand-blue); }
.terms-list ol { margin: 8px 0 0; padding-left: 22px; }
.todo-fill { padding: 1px 6px; border-radius: 6px; background: #FFF3C4; color: #8A5A00; font-weight: 700; }

@media (max-width: 767px) {
	.pillar-grid, .ready-checklist { grid-template-columns: 1fr; }
	.pillar-card, .price-card { padding: 22px; }
	.flagship-content { gap: 52px; }
	.flagship-content > .draft-note { margin-bottom: -28px; }
	.flagship-special { padding: 22px; }
	/* Comparison: one card per row on phones. */
	.compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: block; width: 100%; }
	.compare-table { border: 0; background: none; }
	.compare-table thead { display: none; }
	.compare-table tbody { display: flex; flex-direction: column; gap: 12px; }
	.compare-table tr { overflow: hidden; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-white); }
	.compare-table tbody th { width: 100%; padding: 14px 16px 6px; border: 0; font-size: 17px; }
	.compare-table td { padding: 8px 16px; border: 0; }
	.compare-table td::before { content: attr(data-label); display: block; color: var(--color-text-secondary); font-size: 12px; font-weight: 700; line-height: 18px; }
	.compare-table td.compare-highlight { padding-bottom: 14px; }
	.compare-table td.compare-highlight::before { color: var(--color-brand-blue); }
}

/* ---------- Handoff v3: two price cards, scope section, CTA links ---------- */
.price-cards { display: grid; grid-template-columns: minmax(0, 640px); gap: 24px; align-items: stretch; }
.price-cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.price-card { position: relative; border-color: var(--color-border); border-width: 1px; box-shadow: none; }
.price-card--featured { border: 2px solid var(--color-brand-blue); box-shadow: var(--shadow-card); }
.price-card-badge { align-self: flex-start; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--color-brand-blue); color: var(--color-white); font-size: 13px; font-weight: 700; line-height: 20px; }
.price-card-badge--muted { background: var(--color-soft-blue); color: var(--color-brand-navy); }
.price-card-summary { margin: 0; color: var(--color-text-secondary); line-height: 26px; }
.price-card .button { margin-top: auto; }
.price-card-links { margin: 0; }
.service-scope { padding: 24px 28px; border-left: 4px solid var(--color-brand-blue); border-radius: 0 var(--radius-card) var(--radius-card) 0; background: var(--color-soft-blue); }
.service-scope p { margin: 0; line-height: 28px; }
.service-topic p { margin: 0; color: var(--color-text-secondary); line-height: 28px; }
.service-topic-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 20px; }
.service-topic-item { padding: 20px; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-white); }
.service-topic-item h3 { margin: 0 0 6px; color: var(--color-brand-navy); font-size: 17px; line-height: 26px; }
.service-topic-item p { font-size: 15px; line-height: 24px; }
.service-topic-note { margin-top: 16px !important; }
.service-rich p + p, .service-rich p + .rich-list, .service-rich .rich-list + p, .service-rich p + .rich-table, .service-rich .rich-table + p { margin-top: 16px; }
.rich-list { margin: 16px 0 0; padding-left: 22px; color: var(--color-text-secondary); line-height: 28px; }
.rich-list li + li { margin-top: 6px; }
.rich-list strong { color: var(--color-brand-navy); }
.rich-table { margin-top: 20px; background: var(--color-white); }
.service-scope .rich-table { margin-top: 20px; }
.rich-table td { color: var(--color-text-secondary); }
/* Two short columns stay side by side on phones; only tighter. */
@media (max-width: 600px) {
	.rich-table .data-table { font-size: 13px; line-height: 20px; }
	.rich-table .data-table th, .rich-table .data-table td { padding: 10px 12px; width: 50%; }
}
.service-topic a, .text-section a { color: var(--color-brand-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.service-links-lead { color: var(--color-text-secondary); font-weight: 400; }
.cta-panel-links { margin: 0; }
.cta-panel--soft .cta-panel-links { align-items: center; }
@media (max-width: 767px) {
	.price-cards--two { grid-template-columns: 1fr; }
}

/* ---------- Performance: lay out sections below the first screen only when they come near the viewport ---------- */
/* Long pages with a lot of Thai text (home) otherwise spend one long main-thread task on the first layout. */
.site-main > section.sec:not(:first-child), .site-footer { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* AI-Ready Website banner on service pages (owner, 2026-10-26): flagship card look, copy left, list or comparison right. */
.ready-banner { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 36px; padding: 36px 40px; border-radius: var(--radius-panel); background: linear-gradient(155deg, var(--color-brand-navy) 0%, var(--color-deep-blue) 77%); color: var(--color-white); }
.ready-banner--compare { grid-template-columns: minmax(0, 1fr); gap: 26px; } /* The comparison needs the full width. */
.ready-compare th[scope="row"] { width: 34%; }
.ready-compare thead th, .ready-compare tbody td { width: 33%; }
.ready-compare .button { width: 100%; justify-content: space-between; }
.ready-banner-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.ready-banner h2 { margin: 0; color: var(--color-white); font-size: 28px; line-height: 38px; }
.ready-banner p { margin: 0; color: rgba(255, 255, 255, .82); font-size: 16px; line-height: 27px; }
.ready-banner .ready-banner-note { color: var(--color-white); font-weight: 600; }
.ready-banner .ready-banner-small { margin-top: -6px; color: rgba(255, 255, 255, .72); font-size: 13px; line-height: 20px; }
.ready-banner .flagship-price--card small { color: rgba(255, 255, 255, .72); }
.ready-banner-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.button-on-dark-outline { border: 1px solid rgba(255, 255, 255, .7); background: transparent; color: var(--color-white); }
.button-on-dark-outline:hover { border-color: var(--color-white); background: rgba(255, 255, 255, .1); }
.ready-banner-side { min-width: 0; padding: 26px 28px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 18px; background: rgba(255, 255, 255, .07); align-self: start; }
.ready-banner .ready-banner-list-title { margin-bottom: 12px; color: var(--color-white); font-size: 15px; font-weight: 700; }
.ready-banner-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ready-banner-list li { display: flex; gap: 10px; color: rgba(255, 255, 255, .9); font-size: 15px; line-height: 24px; }
.ready-banner-list svg { flex-shrink: 0; margin-top: 4px; color: #7fd1ff; }
.ready-compare { width: 100%; border-collapse: collapse; color: rgba(255, 255, 255, .9); font-size: 14px; line-height: 22px; }
.ready-compare th, .ready-compare td { padding: 9px 10px; border-bottom: 1px solid rgba(255, 255, 255, .14); text-align: left; vertical-align: top; }
.ready-compare thead th { color: var(--color-white); font-size: 15px; font-weight: 700; }
.ready-compare tbody th { color: rgba(255, 255, 255, .72); font-weight: 500; }
.ready-compare tfoot td { padding-top: 16px; border-bottom: 0; }
.ready-compare .button { white-space: normal; text-align: left; }
.ready-yes { color: #9be7b4; font-weight: 600; }
.ready-compare-cards { display: none; }
@media (max-width: 1023px) {
	.ready-banner, .ready-banner--compare { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px 22px; }
}
@media (max-width: 767px) {
	.ready-banner h2 { font-size: 24px; line-height: 34px; }
	.ready-banner-side { padding: 20px; }
	.ready-banner--compare .ready-banner-side { padding: 0; border: 0; background: none; }
	.ready-compare { display: none; }
	.ready-compare-cards { display: grid; gap: 14px; }
	.ready-compare-card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 16px; background: rgba(255, 255, 255, .07); }
	.ready-banner .ready-compare-title { color: var(--color-white); font-size: 16px; font-weight: 700; }
	.ready-compare-card dl { display: grid; gap: 8px; width: 100%; margin: 0; }
	.ready-compare-card dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 21px; }
	.ready-compare-card dt { color: rgba(255, 255, 255, .72); }
	.ready-compare-card dd { margin: 0; color: var(--color-white); text-align: right; }
	.ready-compare-card .button, .ready-banner-actions .button { width: 100%; justify-content: center; white-space: normal; }
	/* Phones: the included list follows the description, then the price and buttons. */
	.ready-banner:not(.ready-banner--compare) { gap: 12px; }
	.ready-banner:not(.ready-banner--compare) .ready-banner-copy { display: contents; }
	.ready-banner:not(.ready-banner--compare) .ready-banner-copy > * { justify-self: start; }
	.ready-banner:not(.ready-banner--compare) .ready-banner-side { order: 5; margin: 6px 0; }
	.ready-banner:not(.ready-banner--compare) .flagship-price { order: 6; }
	.ready-banner:not(.ready-banner--compare) .ready-banner-small { order: 7; margin-top: -4px; }
	.ready-banner:not(.ready-banner--compare) .ready-banner-actions { order: 8; justify-self: stretch; }
}