/* ---- One-page layout additions ---- */
.head-actions { display: flex; align-items: center; gap: 12px; }
.link-quiet { color: var(--ink); text-decoration: none; font-weight: 500; font-size: .95rem; }
.link-quiet:hover { color: var(--brand-ink); }
.trust { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .9rem; color: var(--ink); }
.trust li { display: flex; align-items: center; gap: 8px; }
.trust li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--success-ink); flex: none; }
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); border: 1px solid var(--gray-200); box-shadow: var(--shadow-card); background: var(--white); }
.shot figcaption { font-size: .75rem; color: var(--gray-500); margin-top: 8px; }

.section-head { max-width: 640px; margin-bottom: 32px; }
.section-head p { color: var(--ink); margin: 0; }

.fixes { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.fix { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; border: 1px solid var(--gray-200); border-radius: var(--radius-card); overflow: hidden; background: var(--white); }
.fix-pain { padding: 18px 22px; background: var(--gray-50); color: var(--ink); }
.fix-pain::before { content: "ปัญหา"; display: block; font-size: .75rem; color: var(--gray-500); margin-bottom: 2px; }
.fix-do { padding: 18px 22px; color: var(--ink-dark); font-weight: 500; border-left: 3px solid var(--brand); }
.fix-do::before { content: "แค่ขายช่วย"; display: block; font-size: .75rem; font-weight: 400; color: var(--brand-ink); margin-bottom: 2px; }

.profit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.profit-grid .slip { margin-top: 0; }

.chan-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.chan { display: flex; flex-direction: column; gap: 4px; padding: 20px; border: 1px solid var(--gray-200); border-radius: var(--radius-card); background: var(--white); text-decoration: none; color: var(--ink); transition: border-color .15s; }
.chan strong { color: var(--ink-dark); font-size: 1.1rem; font-weight: 600; }
.chan span { font-size: .9rem; }
.chan em { font-style: normal; font-size: .85rem; color: var(--brand-ink); margin-top: 6px; }
.chan:hover { border-color: var(--brand); }

.price-wrap { background: var(--brand-25); }
.cycle { display: inline-flex; padding: 4px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-button); gap: 4px; }
.cycle button { font: inherit; font-size: .9rem; font-weight: 500; border: 0; background: transparent; color: var(--ink); padding: 8px 16px; border-radius: 9px; cursor: pointer; }
.cycle button[aria-pressed="true"] { background: var(--ink-dark); color: #fff; }
.cycle button:focus-visible { outline: 2px solid var(--brand-ink); outline-offset: 2px; }
.cycle-note { font-size: .875rem; color: var(--ink); margin: 10px 0 0; }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 28px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-card); padding: 24px 20px; box-shadow: var(--shadow-card); }
.plan h3 { margin: 0; font-size: 1.15rem; }
.plan-for { font-size: .875rem; color: var(--gray-500); margin: 2px 0 16px; }
.plan-price { font-size: 2rem; font-weight: 700; color: var(--ink-dark); line-height: 1.2; margin: 0; font-variant-numeric: tabular-nums; }
.plan-price small { font-size: .9rem; font-weight: 400; color: var(--gray-500); }
.plan-orders { font-weight: 600; color: var(--ink-dark); margin: 12px 0 0; }
.plan-avg { font-size: .85rem; color: var(--gray-500); margin: 0 0 20px; }
.plan .btn { margin-top: auto; width: 100%; }
.btn-outline { background: var(--white); color: var(--ink); box-shadow: inset 0 0 0 1px var(--gray-200); font-weight: 500; }
.btn-outline:hover { background: var(--cream); box-shadow: inset 0 0 0 1px var(--gray-200); }
.plan-rec { border: 2px solid var(--brand); padding: 23px 19px; }
.plan-tag { position: absolute; top: -12px; left: 20px; background: var(--brand); color: #fff; font-size: .75rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.plans-big { margin-top: 16px; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-card); padding: 16px 20px; display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; align-items: center; }
.plans-big > strong { color: var(--ink-dark); }
.plans-big ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: .95rem; font-variant-numeric: tabular-nums; }
.plans-big b { color: var(--ink-dark); font-weight: 600; }
.plan-notes { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: .9rem; color: var(--ink); }
.plan-notes li { display: flex; gap: 8px; align-items: center; }
.plan-notes li::before { content: ""; width: 10px; height: 5px; border-left: 2px solid var(--success-ink); border-bottom: 2px solid var(--success-ink); transform: rotate(-45deg) translateY(-2px); flex: none; }

.cta-end .btn { margin-top: 8px; }
.cta-end .cta-sub { font-size: .875rem; margin-top: 12px; }

@media (max-width: 1000px) {
  .plans { grid-template-columns: 1fr 1fr; }
  .chan-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .profit-grid { grid-template-columns: 1fr; gap: 28px; }
  .link-quiet { display: none; }
  .plans-big { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .fix { grid-template-columns: 1fr; }
  .fix-do { border-left: 0; border-top: 3px solid var(--brand); }
  .plans { grid-template-columns: 1fr; }
  .chan-list { grid-template-columns: 1fr; }
}

.hero h1 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
@media (min-width: 600px) { .nw { white-space: nowrap; } }
/* trust icons, problem grid, bigger profit total, company line */
.trust li::before { content: none; }
.trust li svg { color: var(--success-ink); flex: none; }
.fixes2 { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fix2 { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-card); padding: 24px; box-shadow: var(--shadow-card); }
.fix2 .ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--brand-50); color: var(--brand-ink); margin-bottom: 14px; }
.fix2-pain { color: var(--gray-500); font-size: .9rem; margin: 0 0 4px; }
.fix2-do { color: var(--ink-dark); font-weight: 600; font-size: 1.1rem; line-height: 1.45; margin: 0; }
.slip-page .total { font-size: 1.6rem; padding: 14px 16px; align-items: baseline; }
.slip-page .total dt { font-size: 1rem; }
.cta-end .cta-by { font-size: .8rem; color: rgba(255,255,255,.6); margin: 4px 0 0; }
@media (max-width: 700px) { .fixes2 { grid-template-columns: 1fr; } }

/* platform tints, profit badges, notes banner, big-shop row */
.ch { border: 0; font-weight: 600; }
.ch-tt { background: #FCE7EF; color: #9D1745; }
.ch-sp { background: #FFEDE5; color: #A8401A; }
.ch-lz { background: #E8EDFB; color: #2A3E9B; }
.ch-ln { background: #E3F5E9; color: #1E6B37; }
.pf { justify-self: end; background: #EDF7EE; color: var(--success-ink); padding: 2px 8px; border-radius: 6px; }
.orders li { grid-template-columns: 76px 1fr auto 84px; }
.price-wrap .plan-notes { margin: 0 0 24px; padding: 14px 18px; background: var(--white); border: 1px solid var(--brand-100); border-radius: 12px; }
.plans-label { margin: 32px 0 0; font-size: 1.1rem; color: var(--ink-dark); }
.plans-3 { grid-template-columns: repeat(3, 1fr); margin-top: 12px; }
@media (max-width: 1000px) { .plans-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .plans-3 { grid-template-columns: 1fr; } .orders li { grid-template-columns: 64px 1fr auto 72px; } }

/* hero mockup: ported from the app's SignupDashboardMockup */
.mk { position: relative; max-width: 540px; margin: 0 auto; padding-right: 40px; }
.mk-win { display: flex; height: 300px; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 24px 48px rgba(0,0,0,.18); }
.mk-side { width: 56px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px 0; background: var(--ink-dark); }
.mk-side img { width: 32px; height: 32px; }
.mk-side i { width: 16px; height: 16px; border-radius: 4px; background: rgba(255,255,255,.2); }
.mk-side i.on1 { background: rgba(255,255,255,.9); }
.mk-side i.on2 { background: rgba(255,255,255,.3); }
.mk-side i.act { background: var(--brand); }
.mk-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #F8FAFC; padding: 16px 80px 16px 16px; }
.mk-title { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: #98A2B3; }
.mk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mk-stat { background: #fff; border-radius: 12px; padding: 8px 10px; box-shadow: 0 1px 2px rgba(16,24,40,.06); }
.mk-l { margin: 0; font-size: 9px; color: #98A2B3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }
.mk-v { margin: 0; font-size: 14px; font-weight: 700; color: #111827; line-height: 1.4; }
.mk-stat svg { display: block; width: 100%; height: 16px; margin-top: 4px; }
.mk-bar { height: 6px; margin-top: 8px; border-radius: 999px; background: #F2F4F7; }
.mk-bar div { height: 6px; width: 66%; border-radius: 999px; background: #FFAA73; }
.mk-panel { flex: 1; margin-top: 12px; background: #fff; border-radius: 12px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(16,24,40,.06); }
.mk-l2 { margin: 0 0 8px; font-size: 10px; font-weight: 500; color: #98A2B3; }
.mk-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mk-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.mk-n { width: 56px; flex: none; font-size: 10px; color: #6B7280; }
.mk-track { flex: 1; height: 6px; border-radius: 999px; background: #F2F4F7; }
.mk-track div { height: 6px; border-radius: 999px; }
.mk-a { width: 40px; text-align: right; font-size: 10px; font-weight: 600; color: #111827; }
.mk-float { position: absolute; bottom: 32px; right: -8px; width: 168px; background: #fff; border-radius: 12px; padding: 12px; box-shadow: 0 16px 36px rgba(0,0,0,.18); }
.mk-fh { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; color: #6B7280; font-weight: 500; }
.mk-fh b { font-size: 16px; color: var(--success-ink); }
.mk-float svg { display: block; width: 100%; height: 48px; margin-top: 6px; }
.shot .mk + figcaption { padding-left: 4px; }
@media (max-width: 480px) { .mk { padding-right: 24px; } .mk-main { padding-right: 56px; } .mk-win { height: 260px; } .mk-float { width: 140px; right: 0; } }

/* big-shop row on the same 4-column grid as the row above */
.plans-label { margin: 28px 0 0; }
.plans-big4 { grid-template-columns: repeat(4, 1fr); margin-top: 12px; }
.plan-help { display: flex; flex-direction: column; justify-content: center; border: 1px dashed var(--brand-100); border-radius: var(--radius-card); background: var(--white); padding: 24px 20px; }
.plan-help h3 { margin: 0 0 8px; font-size: 1.05rem; }
.plan-help p { margin: 0 0 8px; font-size: .9rem; color: var(--ink); }
.plan-help-mail { font-size: .85rem !important; }
@media (max-width: 1000px) { .plans-big4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .plans-big4 { grid-template-columns: 1fr; } }

/* active menu item: current page or section in view */
.nav a[aria-current] { color: var(--brand-ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--brand); padding-bottom: 4px; }

/* hero: channel chips instead of a paragraph */
.hero-ch { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hero-ch .ch { font-size: .95rem; padding: 6px 14px; border-radius: 999px; }

/* hero: replica of the app's "ภาพรวมการขาย" page */
.sv { display: flex; max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid var(--gray-200); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 48px -20px rgba(20,35,43,.28); font-variant-numeric: tabular-nums; }
.sv-side { width: 48px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 14px 0; border-right: 1px solid var(--gray-200); }
.sv-side img { width: 26px; height: 26px; }
.sv-side i { width: 18px; height: 18px; border-radius: 5px; background: var(--gray-200); }
.sv-side i.act { background: var(--brand-100); box-shadow: inset 0 0 0 2px var(--brand); }
.sv-main { flex: 1; min-width: 0; padding: 14px 16px 16px; background: #FBFCFD; }
.sv-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.sv-title { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-pill { flex: none; font-size: 10px; font-weight: 600; color: #fff; background: var(--brand); border-radius: 999px; padding: 2px 9px; }
.sv-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sv-kpi { background: #fff; border: 1px solid var(--gray-200); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.sv-kl { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 10px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-ki { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; flex: none; }
.k-sales { background: #E8EDFB; color: #2A3E9B; } .k-cost { background: var(--brand-50); color: var(--brand-ink); } .k-profit { background: #EDF7EE; color: var(--success-ink); }
.sv-kv { margin: 6px 0 0; font-size: 16px; font-weight: 700; color: var(--ink-dark); line-height: 1.2; }
.sv-kpi:last-child .sv-kv { color: var(--success-ink); }
.sv-ks { margin: 2px 0 0; font-size: 9px; color: var(--gray-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-panel { margin-top: 10px; background: #fff; border: 1px solid var(--gray-200); border-radius: 10px; padding: 10px 12px; }
.sv-ph { margin: 0 0 8px; font-size: 11px; font-weight: 700; color: var(--ink-dark); }
.sv-ch { list-style: none; margin: 0; padding: 0; }
.sv-ch li { display: grid; grid-template-columns: 8px minmax(0, 92px) 1fr 58px 54px; align-items: center; gap: 8px; padding: 5px 0; font-size: 10px; border-top: 1px solid var(--gray-50); }
.sv-ch li:first-child { border-top: 0; }
.sv-dot { width: 8px; height: 8px; border-radius: 50%; }
.sv-cn { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-track { height: 6px; border-radius: 999px; background: #F2F4F7; overflow: hidden; }
.sv-track span { display: block; height: 100%; border-radius: 999px; }
.sv-cs { text-align: right; color: var(--ink-dark); font-weight: 600; }
.sv-cp { text-align: right; color: var(--success-ink); font-weight: 600; }
@media (max-width: 480px) { .sv-side { display: none; } .sv-ch li { grid-template-columns: 8px minmax(0, 1fr) 40px 52px 50px; gap: 6px; } .sv-kv { font-size: 14px; } }

/* round 3 review: headline accent, profit card pop, receipt, quieter chips */
.hero h1 .hl { font-style: normal; color: var(--brand-ink); }
.hero-ch .ch { font-size: .82rem; padding: 4px 11px; }
.sv-main { overflow: visible; }
.sv { overflow: visible; }
.sv-side { border-radius: 16px 0 0 16px; }
.sv-kpi-profit { position: relative; z-index: 1; background: #EDF7EE; border-color: #B7DDB9; transform: translateY(-6px) scale(1.08); box-shadow: 0 14px 28px -10px rgba(46,125,50,.45); }
.sv-kpi-profit .sv-kv { font-size: 19px; }
.receipt { position: relative; background: #fff; border: 0; border-radius: 0; padding: 22px 22px 18px; box-shadow: 0 18px 40px -18px rgba(20,35,43,.35); max-width: 380px; margin: 0 auto;
  -webkit-mask: radial-gradient(circle 7px at 50% 0, transparent 98%, #000) 0 0 / 18px 51% repeat-x, radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) 0 100% / 18px 51% repeat-x;
          mask: radial-gradient(circle 7px at 50% 0, transparent 98%, #000) 0 0 / 18px 51% repeat-x, radial-gradient(circle 7px at 50% 100%, transparent 98%, #000) 0 100% / 18px 51% repeat-x; }
.receipt .slip-title { text-align: center; font-size: .95rem; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 2px dashed var(--gray-200); }
.receipt dl div { font-size: .95rem; padding: 5px 0; }
.receipt dl div + div:not(.total) dd { color: var(--gray-500); }
.receipt .total { background: none; margin: 10px 0 0; padding: 12px 0 0; border-top: 2px dashed var(--gray-200); align-items: baseline; }
.receipt .total dt { font-size: 1rem; }
.receipt .total dd { font-size: 2.2rem; line-height: 1; color: var(--success-ink); }
.receipt .slip-foot { text-align: center; margin-top: 12px; }

/* round 4 review: floating glass nav, hero glow + dot grid, zebra sections, gradient accent, CTA glow */
.site-head { background: transparent; border-bottom: 0; padding-top: 12px; }
.site-head .head-row { max-width: 1120px; min-height: 60px; padding: 0 12px 0 20px; background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); border: 1px solid rgba(229,231,235,.9); border-radius: 999px; box-shadow: 0 8px 24px -12px rgba(20,35,43,.18); }
@media (max-width: 1160px) { .site-head .head-row { width: calc(100% - 32px); } }
.hero { position: relative; overflow: hidden; margin-top: -72px; padding-top: 136px; background: var(--white); }
.hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(62,74,89,.10) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 45%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 70% 45%, #000 30%, transparent 75%); pointer-events: none; }
.hero::after { content: ""; position: absolute; width: 620px; height: 620px; right: -120px; top: 40px; border-radius: 50%; background: radial-gradient(circle, rgba(255,159,102,.30), rgba(255,159,102,0) 65%); filter: blur(10px); pointer-events: none; }
.hero .wrap { position: relative; z-index: 1; }
#how { background: var(--gray-50); }
#channels { background: var(--white); }
.hero h1 .hl { background: linear-gradient(90deg, var(--brand-ink), #E8732E); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.btn:not(.btn-outline) { box-shadow: 0 10px 24px -8px rgba(255,138,71,.55); }
.btn:not(.btn-outline):hover { box-shadow: 0 14px 30px -8px rgba(255,138,71,.65); }
.site-head .btn-sm { box-shadow: 0 6px 16px -6px rgba(255,138,71,.55); }
.page-hero { margin-top: -72px; padding-top: 120px; }
@media (max-width: 900px) { .site-head .head-row { padding: 0 8px 0 16px; } }

/* buttons: neutral soft shadow + small lift on hover (replaces the orange glow) */
.btn { transition: background .15s, box-shadow .15s, transform .15s; }
.btn:not(.btn-outline), .site-head .btn-sm { box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 4px 10px -2px rgba(16,24,40,.12); }
.btn:not(.btn-outline):hover, .site-head .btn-sm:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(16,24,40,.06), 0 10px 20px -4px rgba(16,24,40,.18); }
.btn:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover { transition: none; transform: none; } }

/* "ช่วยร้านยังไง" cards: benefit first, bigger icon, more air, hover lift */
.fixes2 { gap: 20px; }
.fix2 { padding: 32px 28px; transition: transform .15s, box-shadow .15s; }
.fix2:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(16,24,40,.05), 0 14px 28px -8px rgba(16,24,40,.16); }
.fix2 .ico { width: 64px; height: 64px; border-radius: 16px; background: var(--brand-100); color: var(--brand-ink); margin-bottom: 22px; box-shadow: inset 0 0 0 1px rgba(255,159,102,.35); }
.fix2-h { margin: 0 0 10px; font-size: 1.2rem; font-weight: 600; line-height: 1.45; color: var(--ink-dark); }
.fix2-p { margin: 0; font-size: .95rem; line-height: 1.7; color: var(--gray-500); }
@media (prefers-reduced-motion: reduce) { .fix2, .fix2:hover { transition: none; transform: none; } }

/* menu jumps: leave room between the floating nav and the section heading */
html { scroll-padding-top: 44px; }

/* duotone icons straight on the card, no box */
.fix2 .ico.ico-duo { width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; margin-bottom: 18px; display: block; }
.fix2 .ico.ico-duo svg { display: block; width: 48px; height: 48px; }

.fix2 .ico.ico-duo { place-items: start; justify-items: start; width: 48px; }

/* receipt polish: shadow outside the mask, baseline-aligned total, more room top and bottom; link as outline button */
.receipt-wrap { max-width: 380px; margin: 0 auto; filter: drop-shadow(0 18px 24px rgba(20,35,43,.16)) drop-shadow(0 2px 4px rgba(20,35,43,.06)); }
.receipt { box-shadow: none; max-width: none; padding: 34px 24px 28px; }
.receipt .slip-title { padding-bottom: 14px; margin-bottom: 10px; }
.receipt .total { display: flex; justify-content: space-between; align-items: last baseline; padding-top: 14px; }
.receipt .total dt, .receipt .total dd { line-height: 1; }
.receipt .slip-foot { margin-top: 16px; }
.link-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1.5px solid var(--brand-ink); border-radius: var(--radius-button); color: var(--brand-ink); font-weight: 600; text-decoration: none; transition: background .15s, transform .15s; }
.link-btn:hover { background: var(--brand-50); transform: translateY(-1px); }
.link-btn svg { transition: transform .15s; }
.link-btn:hover svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .link-btn, .link-btn svg { transition: none; transform: none !important; } }

/* six benefit cards in a 3x2 grid; minimum-price line on the receipt */
.fixes2 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .fixes2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .fixes2 { grid-template-columns: 1fr; } }
.receipt .minprice { margin: 10px -8px 0; padding: 8px 10px; border-radius: 8px; background: var(--brand-50); font-size: .9rem; }
.receipt .minprice dt { color: var(--brand-ink); font-weight: 600; }
.receipt .minprice dd { color: var(--brand-ink) !important; font-weight: 700; }

/* channel cards: links share one bottom line */
.chan-list { align-items: stretch; }
.chan { height: 100%; }
.chan em { margin-top: auto; padding-top: 10px; }

/* "เริ่มใช้ได้ใน 3 ขั้น" */
.start { background: var(--white); padding-bottom: 24px; }
.start + #channels { padding-top: 48px; }
.start-steps { list-style: none; counter-reset: st; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; position: relative; }
.start-steps li { counter-increment: st; position: relative; padding: 22px 20px 20px 72px; border: 1px solid var(--gray-200); border-radius: var(--radius-card); background: var(--white); }
.start-steps li::before { content: counter(st); position: absolute; left: 20px; top: 20px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 700; }
.start-steps strong { display: block; color: var(--ink-dark); font-size: 1.1rem; font-weight: 600; margin-bottom: 2px; }
.start-steps span { color: var(--gray-500); font-size: .92rem; }
@media (max-width: 900px) { .start-steps { grid-template-columns: 1fr; } }

/* merged "เริ่มใช้งาน" section: number beside the title, platforms as link chips */
.start { padding-bottom: 72px; }
.start-steps li { padding: 22px 22px 20px; }
.start-steps li::before { content: none; }
.st-h { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; color: var(--ink-dark); font-size: 1.1rem; font-weight: 600; }
.st-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; font-size: .95rem; font-weight: 700; flex: none; }
.st-p { margin: 0; color: var(--gray-500); font-size: .92rem; }
.start-ch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 28px; }
.start-ch > p { margin: 0; color: var(--ink); font-weight: 500; }
.start-ch ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.start-ch .ch { display: inline-block; font-size: .9rem; padding: 6px 14px; border-radius: 999px; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.start-ch .ch:hover { transform: translateY(-1px); box-shadow: 0 4px 10px -4px rgba(16,24,40,.2); text-decoration: underline; }
.start-ch-note { margin: 0; color: var(--gray-500); font-size: .85rem; }

/* pricing: clear break before the big-shop row */
.plans-label { margin: 56px 0 0; }
.plans-big4 { margin-top: 14px; }

/* nav: equal side padding, divider between section links and account actions */
.site-head .head-row { padding: 0 16px 0 22px; }
.head-actions { gap: 14px; padding-left: 18px; margin-left: 4px; border-left: 1px solid var(--gray-200); }
@media (max-width: 900px) { .head-actions { border-left: 0; padding-left: 0; margin-left: 0; } .site-head .head-row { padding: 0 10px 0 16px; } }

/* pricing trust banner: filled block, solid check circles, bold keywords */
.price-wrap .plan-notes { background: #EDF7EE; border: 0; border-radius: 14px; padding: 16px 22px; gap: 10px 32px; font-size: .95rem; color: var(--ink-dark); }
.price-wrap .plan-notes li { gap: 10px; }
.price-wrap .plan-notes li::before { content: ""; width: 22px; height: 22px; flex: none; transform: none; border: 0; border-radius: 50%;
  background: var(--success-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat; }
.price-wrap .plan-notes strong { font-weight: 700; color: var(--ink-dark); }

.h2-note { display: inline-block; font-size: 1rem; font-weight: 500; color: var(--gray-500); vertical-align: middle; margin-left: 6px; }

/* nav CTA: shorter outline button */
.site-head .head-actions .btn.btn-sm {
  padding: 6px 16px;
  min-height: 0;
  line-height: 1.5;
  background: transparent;
  color: var(--brand-ink, #9A4A16);
  border: 1.5px solid var(--brand, #FF9F66);
  box-shadow: none;
}
.site-head .head-actions .btn.btn-sm:hover {
  background: #FFF4E6;
  color: var(--brand-ink, #9A4A16);
  transform: none;
  box-shadow: none;
}

/* trust banner: 3 equal columns on desktop, stacked on mobile */
.price-wrap .plan-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 24px;
  align-items: start;
}
.price-wrap .plan-notes li { margin: 0; }
@media (max-width: 860px) {
  .price-wrap .plan-notes { grid-template-columns: 1fr; gap: 10px; }
}

.price-wrap .plan-notes li { display: block; position: relative; padding-left: 32px; line-height: 1.6; }
.price-wrap .plan-notes li::before { position: absolute; left: 0; top: 1px; }

.price-wrap .plan-notes .nw { white-space: nowrap; }

/* nav CTA: orange text, fills orange on hover */
.site-head .head-actions .btn.btn-sm {
  color: #E0661C;
  border-color: var(--brand, #FF9F66);
  transition: background-color .15s ease, color .15s ease;
}
.site-head .head-actions .btn.btn-sm:hover,
.site-head .head-actions .btn.btn-sm:focus-visible {
  background: var(--brand, #FF9F66);
  color: #fff;
}

/* wide screens: all 3 promises on one line each */
@media (min-width: 1240px) {
  .price-wrap .plan-notes {
    grid-template-columns: auto auto auto;
    justify-content: space-between;
    column-gap: 16px;
  }
  .price-wrap .plan-notes li { white-space: nowrap; }
}

/* yearly: struck-through full price + saving */
.plan-was { display: flex; align-items: center; gap: 8px; margin: 10px 0 -6px; font-size: .9rem; line-height: 1.4; }
.plan-was[hidden] { display: none; }
.plan-was s { color: var(--gray-500, #8A94A3); text-decoration-thickness: 1.5px; }
.plan-was b { font-weight: 600; font-size: .8rem; color: var(--success-ink, #2E7D32); background: #EDF7EE; padding: 2px 8px; border-radius: 999px; }

.plan-was s { text-decoration-line: line-through; text-decoration-color: var(--danger, #E5484D); text-decoration-thickness: 2px; }

/* nav: more opaque glass so headings scrolling underneath don't show as a grey smudge */
.site-head .head-row { background: rgba(255, 255, 255, 0.94); }
/* struck price + saving pill share one text baseline */
.plan-was { align-items: baseline; }
.plan-was b { line-height: 1.4; }

/* struck price: heavier, slightly larger digits so the strike line doesn't swallow them */
.plan-was s { font-weight: 500; font-size: .95rem; color: var(--gray-600, #5B6573); text-decoration-thickness: 1.5px; }

/* "เชื่อมได้กับ" row: label, chips and note share one centre line */
.start-ch { align-items: center; }
.start-ch > p { margin: 0; line-height: 1.4; }
.start-ch ul { margin: 0; align-items: center; }
/* step flow arrows between cards (desktop only) */
@media (min-width: 901px) {
  .start-steps { column-gap: 36px; }
  .start-steps > li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -28px;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8C0CC' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
    pointer-events: none;
  }
}

/* footer: grouped columns + copyright row */
.site-foot .foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; align-items: start; }
.site-foot .foot-h { font-size: .8rem; font-weight: 600; color: var(--ink-dark); letter-spacing: .02em; margin: 0 0 10px; }
.site-foot .foot-grid nav { gap: 8px; }
.site-foot .foot-grid p { margin: 0; }
.site-foot .foot-brand p { margin-top: 6px; color: var(--gray-500); }
.site-foot .foot-copy { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--gray-200); }
.site-foot .foot-copy p { margin: 0; font-size: .8rem; color: var(--gray-500); }
@media (max-width: 900px) {
  .site-foot .foot-grid { grid-template-columns: 1fr 1fr; }
  .site-foot .foot-brand { grid-column: 1 / -1; }
}

@media (min-width: 901px) {
  .start-steps > li:not(:last-child)::after { width: 24px; height: 24px; right: -30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3ADBB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 5.5l6.5 6.5-6.5 6.5'/%3E%3C/svg%3E") center / 24px 24px no-repeat; }
}
.start-ch .start-ch-note { margin-left: 12px; }

/* step numbers: white bold digit on a deeper brand orange so it pops */
.start-steps .st-n { background: #F07A33; color: #fff; font-weight: 700; }

/* ---------- motion: entrance + scroll reveal (off for reduced-motion) ---------- */
@keyframes kk-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes kk-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.anim .hero-copy > * { animation: kk-up .6s cubic-bezier(.2,.7,.2,1) both; }
.anim .hero-copy > *:nth-child(2) { animation-delay: .08s; }
.anim .hero-copy > *:nth-child(3) { animation-delay: .16s; }
.anim .hero-copy > *:nth-child(4) { animation-delay: .24s; }
.anim .hero-copy > *:nth-child(5) { animation-delay: .32s; }
.anim .hero .shot { animation: kk-up .7s cubic-bezier(.2,.7,.2,1) .25s both; }
.anim .sv .sv-track > span { transform-origin: left center; animation: kk-bar .9s cubic-bezier(.2,.7,.2,1) both; }
.anim .sv .sv-ch li:nth-child(1) .sv-track > span { animation-delay: .55s; }
.anim .sv .sv-ch li:nth-child(2) .sv-track > span { animation-delay: .65s; }
.anim .sv .sv-ch li:nth-child(3) .sv-track > span { animation-delay: .75s; }
.anim .sv .sv-ch li:nth-child(4) .sv-track > span { animation-delay: .85s; }
.anim .sv .sv-ch li:nth-child(5) .sv-track > span { animation-delay: .95s; }
.anim .rv { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1); }
.anim .rv.in { opacity: 1; transform: none; }
.anim .fix2.rv.in:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  .anim .hero-copy > *, .anim .hero .shot, .anim .sv .sv-track > span { animation: none; }
  .anim .rv { opacity: 1; transform: none; transition: none; }
}

.site-foot .foot-copy { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; align-items: center; }
.site-foot .foot-copy a { font-size: .8rem; color: var(--gray-500); }
.policy h2 { font-size: 1.15rem; margin: 32px 0 8px; }
.policy h2:first-child { margin-top: 0; }
.policy p { line-height: 1.75; color: var(--ink); }

.site-foot .foot-th { font-weight: 500; color: var(--gray-500); margin-left: 4px; }

/* ---------- fee articles ---------- */
.page-hero .updated { margin-top: 10px; font-size: .85rem; color: var(--gray-500); }
.fee-table-wrap { overflow-x: auto; margin: 16px 0 8px; border: 1px solid var(--gray-200); border-radius: 16px; background: #fff; }
.fee-table { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 560px; }
.fee-table th, .fee-table td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--gray-200); line-height: 1.55; }
.fee-table thead th { background: var(--gray-50); font-weight: 600; color: var(--ink-dark); font-size: .85rem; }
.fee-table tbody tr:last-child td { border-bottom: 0; }
.fee-table td:first-child { font-weight: 600; color: var(--ink-dark); width: 30%; }
.fee-table td:nth-child(2) { width: 34%; }
.fee-note, .fee-disclaimer { font-size: .85rem; color: var(--gray-500); line-height: 1.7; }
.fee-disclaimer { margin: 8px auto 48px; }
.note-box { background: #EDF7EE; border-radius: 16px; padding: 20px 22px; }
.note-box h2 { font-size: 1.1rem; margin: 0 0 8px; color: var(--success-ink); }
.note-box p { margin: 0; line-height: 1.75; }
.src-list { padding-left: 18px; line-height: 1.9; font-size: .92rem; }

/* ---------- contrast fixes (WCAG AA) ---------- */
.site-head .head-actions .btn.btn-sm { color: #BF5418; }
.sv .sv-ks { color: #4B5563; }
.start-steps .st-n { background: #E8732E; font-size: 1.15rem; font-weight: 700; }

/* ---------- contact channels: footer list + floating button ---------- */
.kkc-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--ink); text-decoration: none; }
a.kkc-row:hover b { color: var(--brand-ink); }
.kkc-ic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; color: #fff; }
.kkc-ic svg { width: 18px; height: 18px; }
.kkc-line { background: #06C755; }
.kkc-fb { background: #1877F2; }
.kkc-tt { background: #111; }
.kkc-mail { background: var(--gray-100, #F3F4F6); color: var(--ink); }
.kkc-tx { display: flex; flex-direction: column; line-height: 1.3; font-size: .85rem; }
.kkc-tx b { font-weight: 600; color: var(--ink-dark); font-size: .8rem; }
.kkc-tx span { color: var(--gray-600, #5B6573); }
.site-foot .foot-contact { display: flex; flex-direction: column; gap: 2px; }
.kkc { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.kkc-btn { width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; background: var(--brand, #FF9F66); color: #fff; display: grid; place-items: center; box-shadow: 0 8px 24px rgba(44,62,80,.18); transition: transform .15s ease; }
.kkc-btn:hover { transform: translateY(-2px); }
.kkc-btn svg { width: 26px; height: 26px; }
.kkc-btn .kkc-x { display: none; }
.kkc.is-open .kkc-btn .kkc-open { display: none; }
.kkc.is-open .kkc-btn .kkc-x { display: grid; }
.kkc-panel { width: 260px; background: #fff; border-radius: 16px; padding: 14px 16px 10px; box-shadow: 0 16px 40px rgba(44,62,80,.18); border: 1px solid var(--gray-200); }
.kkc-panel[hidden] { display: none; }
.kkc-h { margin: 0 0 6px; font-weight: 600; font-size: .9rem; color: var(--ink-dark); }
.kkc-panel .kkc-row { padding: 8px 6px; border-radius: 10px; }
.kkc-panel a.kkc-row:hover { background: var(--gray-50); }
@media (max-width: 600px) { .kkc { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); } .kkc-btn { width: 52px; height: 52px; } }
@media print { .kkc { display: none; } }

/* hero headline: never split Thai words on phones — scale font to fit instead */
.hero h1 .nw { white-space: nowrap; }
@media (max-width: 599px) { .hero h1 { font-size: min(7.6vw, 2.4rem); } }

/* footer polish */
.site-foot .foot-h { font-size: .85rem; font-weight: 700; color: var(--ink-dark); letter-spacing: 0; }
.site-foot .foot-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink-dark); }
.site-foot .foot-logo img { display: block; }
.site-foot .foot-brand p { margin-top: 8px; }
/* one icon shape for every channel: solid rounded square */
.kkc-ic { border-radius: 8px; }
.kkc-mail { background: var(--ink, #3E4A59); color: #fff; }
/* keep the floating button from covering the footer's last line */
@media (max-width: 900px) { .site-foot { padding-bottom: 96px; } }
@media (min-width: 901px) { .site-foot .foot-copy { padding-right: 84px; } }

/* footer links: no mid-word Thai breaks on phones */
.site-foot .foot-grid nav a { white-space: nowrap; }
@media (max-width: 900px) { .site-foot .foot-grid nav[aria-label="ความรู้"] { grid-column: 1 / -1; } }

/* ---------- profit calculator (homepage) ---------- */
.receipt-wrap:has(.calc) { max-width: 400px; }
.calc .calc-plat { display: flex; gap: 6px; background: var(--gray-50); padding: 4px; border-radius: 12px; margin-bottom: 14px; }
.calc .calc-plat button { flex: 1; border: 0; background: transparent; padding: 8px 4px; border-radius: 9px; font: 600 .82rem/1.2 inherit; font-family: inherit; color: var(--gray-600, #5B6573); cursor: pointer; }
.calc .calc-plat button[aria-checked="true"] { background: #fff; color: var(--ink-dark); box-shadow: 0 1px 3px rgba(20,35,43,.12); }
.calc .calc-in { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.calc .calc-in3 { grid-template-columns: repeat(3, 1fr); margin-top: 10px; }
.calc label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--gray-600, #5B6573); }
.calc .calc-num { position: relative; display: block; }
.calc .calc-num input { width: 100%; box-sizing: border-box; border: 1px solid var(--gray-200); border-radius: 10px; padding: 9px 10px 9px 26px; font: 600 1rem/1.2 inherit; font-family: inherit; color: var(--ink-dark); background: #fff; -moz-appearance: textfield; }
.calc .calc-num input::-webkit-outer-spin-button, .calc .calc-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc .calc-num input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }
.calc .calc-num i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--gray-500); font-size: .9rem; }
.calc .calc-more { margin: 10px 0 6px; font-size: .85rem; }
.calc .calc-more summary { cursor: pointer; color: var(--brand-ink); font-weight: 600; list-style: none; }
.calc .calc-more summary::-webkit-details-marker { display: none; }
.calc .calc-more summary::before { content: "+ "; }
.calc .calc-more[open] summary::before { content: "− "; }
.calc dl { margin-top: 10px; border-top: 2px dashed var(--gray-200); padding-top: 8px; }
.calc dl div dt span { color: var(--gray-500); font-size: .8rem; }
.calc .total.is-loss dd { color: var(--danger, #D93025); }
.calc .slip-foot { font-size: .75rem; line-height: 1.6; }
.calc .slip-foot a { color: var(--brand-ink); }

/* ---------- product screens section ---------- */
.screens .scr-row { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: center; margin-top: 40px; }
.screens .scr-rev { grid-template-columns: 7fr 5fr; }
.screens .scr-rev .scr-copy { order: 2; }
.screens .scr-copy h3 { font-size: 1.35rem; margin: 0 0 10px; color: var(--ink-dark); line-height: 1.4; }
.screens .scr-copy p { margin: 0; line-height: 1.75; color: var(--ink); }
.screens .scr-fig { margin: 0; }
.screens .scr-fig figcaption { font-size: .75rem; color: var(--gray-500); margin-top: 8px; text-align: right; }
.ui { background: #fff; border: 1px solid var(--gray-200); border-radius: 16px; box-shadow: 0 18px 40px -22px rgba(20,35,43,.35); padding: 16px 18px; font-size: .82rem; color: var(--ink); }
.ui-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.ui-title { margin: 0; font-weight: 600; color: var(--ink-dark); font-size: .92rem; }
.ui-search { border: 1px solid var(--gray-200); border-radius: 10px; padding: 6px 10px; color: var(--gray-500); font-size: .75rem; white-space: nowrap; }
.ui-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.ui-tabs span { padding: 4px 10px; border-radius: 999px; background: var(--gray-50); color: var(--gray-600, #5B6573); font-size: .72rem; }
.ui-tabs span.on { background: var(--ink-dark); color: #fff; }
.ui-table { width: 100%; border-collapse: collapse; }
.ui-table th { text-align: left; font-weight: 500; color: var(--gray-500); font-size: .72rem; padding: 6px 6px; border-bottom: 1px solid var(--gray-200); }
.ui-table td { padding: 9px 6px; border-bottom: 1px solid var(--gray-100, #F3F4F6); white-space: nowrap; }
.ui-table tr:last-child td { border-bottom: 0; }
.ui-mono { font-family: Inter, sans-serif; font-size: .74rem; color: var(--ink-dark); }
.ui-num { font-family: Inter, sans-serif; font-weight: 600; color: var(--ink-dark); }
.ui-due { color: var(--brand-ink); font-size: .74rem; }
.ui-ch { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-weight: 600; }
.ui-ch.ch-sp { background: #FDECE6; color: #B8381A; } .ui-ch.ch-tt { background: #FDE7EE; color: #B0124A; }
.ui-ch.ch-lz { background: #E8ECFA; color: #2A3E9B; } .ui-ch.ch-ln { background: #E5F6EA; color: #1F7A3A; }
.ui-ch.ch-pos { background: var(--gray-100, #F3F4F6); color: var(--ink); }
.ui-st { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: .7rem; font-weight: 600; }
.st-wait { background: #FFF4E6; color: #9A4A16; } .st-pack { background: #EAF2FF; color: #1D4ED8; }
.st-ship { background: #F3E8FF; color: #6B21A8; } .st-done { background: #EDF7EE; color: #2E7D32; }
.ui-dl { margin: 0; }
.ui-dl div { display: flex; justify-content: space-between; padding: 4px 0; }
.ui-dl dt { color: var(--ink); } .ui-dl dd { margin: 0; font-family: Inter, sans-serif; color: var(--gray-600, #5B6573); }
.ui-dl .ui-grp { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--gray-200); font-size: .72rem; font-weight: 600; color: var(--gray-500); }
.ui-dl .ui-grp:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ui-dl .ui-profit { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: #EDF7EE; }
.ui-dl .ui-profit dt { font-weight: 700; color: var(--success-ink); } .ui-dl .ui-profit dd { font-weight: 700; color: var(--success-ink); font-size: 1.05rem; }
.ui-detail { max-width: 380px; margin-left: auto; margin-right: auto; }
@media (max-width: 900px) {
  .screens .scr-row, .screens .scr-rev { grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
  .screens .scr-rev .scr-copy { order: 0; }
}
@media (max-width: 600px) { .ui-hide { display: none; } .ui-search { display: none; } .ui { padding: 14px; } }

.screens .scr-copy .nw { white-space: nowrap; }

/* screens now live inside #how (same grey band) */
.screens { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--gray-200); }
.screens .scr-h { font-size: 1.15rem; font-weight: 600; color: var(--gray-600, #5B6573); margin: 0; }
.screens .scr-row:first-of-type { margin-top: 24px; }
.screens .scr-copy h4 { font-size: 1.35rem; margin: 0 0 10px; color: var(--ink-dark); line-height: 1.4; font-weight: 600; }
.screens .scr-copy h4 .nw { white-space: nowrap; }
@media (max-width: 900px) { .screens { margin-top: 48px; padding-top: 36px; } }

/* screens: centred section title, tighter rows, copy centred against its card */
.screens .scr-h { text-align: center; font-size: 1.6rem; font-weight: 700; color: var(--ink-dark); }
.screens .scr-row { margin-top: 24px; align-items: center; }
.screens .scr-row:first-of-type { margin-top: 32px; }
.screens .scr-fig figcaption { margin-top: 6px; }
.screens .scr-copy { align-self: center; }
@media (min-width: 901px) { .screens .scr-row + .scr-row { margin-top: 8px; } }

/* screens: own tinted panel so the zig-zag reads as one group */
.screens { margin-top: 56px; padding: 44px 48px 40px; border-top: 0; background: #EEF1F5; border-radius: 24px; }
.screens .ui { box-shadow: 0 14px 32px -18px rgba(20,35,43,.30); }
@media (max-width: 900px) { .screens { margin-top: 40px; padding: 28px 18px 24px; border-radius: 20px; } }

/* screens panel: more vertical breathing room */
.screens { padding: 64px 48px 56px; }
@media (max-width: 900px) { .screens { padding: 40px 18px 32px; } }

/* FAQ: grey band + white accordion cards with a clear +/− affordance */
.section.faq { background: #EEF1F5; }
.faq details { background: #fff; border: 1px solid #E3E7ED; border-bottom: 1px solid #E3E7ED; border-radius: 14px; padding: 0 20px; margin-top: 12px; transition: box-shadow .15s ease; }
.faq details:hover { box-shadow: 0 6px 18px -10px rgba(20,35,43,.25); }
.faq details[open] { box-shadow: 0 10px 24px -14px rgba(20,35,43,.30); }
.faq summary { padding: 18px 40px 18px 0; position: relative; cursor: pointer; font-weight: 600; color: var(--ink-dark); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: #FFF4E6; color: var(--brand-ink); display: grid; place-items: center; font-weight: 600; font-size: 1.1rem; line-height: 1; }
.faq details[open] summary::after { content: "\2212"; background: var(--brand-ink); color: #fff; }
.faq details p { margin: 0; padding: 0 0 18px; line-height: 1.75; color: var(--ink); }
.faq h2 { margin-bottom: 20px; }

/* screens: compact profit card so both rows have similar height; card hugs the copy side */
.ui-detail { max-width: 420px; margin-left: auto; margin-right: 0; padding: 14px 18px; }
.ui-detail .ui-top { margin-bottom: 8px; }
.ui-dl div { padding: 2px 0; font-size: .8rem; }
.ui-dl .ui-grp { margin-top: 6px; padding-top: 6px; font-size: .7rem; }
.ui-dl .ui-profit { margin-top: 8px; padding: 8px 12px; }
.screens .scr-rev .scr-fig figcaption { text-align: right; }
@media (min-width: 901px) {
  .screens .scr-row + .scr-row { margin-top: -8px; }
  .screens .scr-rev { grid-template-columns: 6fr 5fr; gap: 56px; }
}
@media (max-width: 900px) { .ui-detail { margin-left: auto; margin-right: auto; } }

/* caption no longer shifts the card: copy lines up with the card's true centre */
.screens .scr-fig { position: relative; }
.screens .scr-fig figcaption { position: absolute; right: 2px; bottom: -22px; margin: 0; }
@media (min-width: 901px) { .screens .scr-row + .scr-row { margin-top: 24px; } }
.screens { padding-bottom: 72px; }
@media (max-width: 900px) { .screens .scr-row + .scr-row { margin-top: 48px; } .screens { padding-bottom: 52px; } }

/* screens: one shared 2-column grid so edges and the centre gap line up in both rows */
@media (min-width: 901px) {
  .screens .scr-row, .screens .scr-rev { grid-template-columns: 1fr 1fr; column-gap: 56px; }
  .screens .scr-rev .scr-fig { order: 1; }
  .screens .scr-rev .scr-copy { order: 2; }
}
.screens .scr-fig { width: 100%; }
.ui-detail { max-width: none; width: 100%; margin: 0; box-sizing: border-box; }
.screens .scr-fig figcaption { right: 0; bottom: -22px; text-align: right; }

@media (min-width: 901px) {
  .screens .scr-row, .screens .scr-rev { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.ui-orders { overflow: hidden; }
.ui-table th, .ui-table td { padding-left: 5px; padding-right: 5px; }
.ui-table th { white-space: nowrap; }

/* calculator affordance: hint line, pencil icon, stronger field border, orange on hover */
.calc .slip-title { display: flex; flex-direction: column; gap: 2px; }
.calc .calc-hint { font-size: .78rem; font-weight: 500; color: var(--brand-ink); }
.calc .calc-num input { border: 1.5px solid #CBD2DC; padding-right: 32px; cursor: text; transition: border-color .15s ease, box-shadow .15s ease; }
.calc .calc-num input:hover { border-color: var(--brand); }
.calc .calc-num input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255,159,102,.25); }
.calc .calc-pen { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: #A3ADBB; pointer-events: none; transition: color .15s ease; }
.calc .calc-num:hover .calc-pen, .calc .calc-num:focus-within .calc-pen { color: var(--brand-ink); }
.calc .calc-plat button { cursor: pointer; }
.calc .calc-plat button:not([aria-checked="true"]):hover { background: #fff; color: var(--ink-dark); }
.calc .calc-more summary { cursor: pointer; }
.calc .calc-in3 .calc-num input { padding-right: 26px; }
.calc .calc-in3 .calc-pen { right: 8px; width: 13px; height: 13px; }

/* screens v3: two columns side by side — copy on top, screen below; shared rows keep both headings and both cards aligned */
@media (min-width: 901px) {
  .screens .scr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-auto-flow: column; column-gap: 40px; row-gap: 20px; margin-top: 32px; }
  .screens .scr-grid .scr-row { display: contents; }
  .screens .scr-grid .scr-copy { order: 0; align-self: start; }
  .screens .scr-grid .scr-fig { order: 0; display: flex; flex-direction: column; }
  .screens .scr-grid .scr-fig .ui { flex: 1; }
  .screens .scr-grid .ui-table th:nth-child(3), .screens .scr-grid .ui-table td:nth-child(3) { display: none; }
}
.screens .scr-grid .scr-copy h4 { font-size: 1.2rem; margin-bottom: 6px; }
.screens .scr-grid .scr-copy p { font-size: .95rem; }
.screens .scr-grid .ui-detail { width: 100%; }
@media (max-width: 900px) {
  .screens .scr-grid .scr-row { display: block; margin-top: 32px; }
  .screens .scr-grid .scr-row + .scr-row { margin-top: 48px; }
  .screens .scr-grid .scr-fig { margin-top: 16px; }
}

@media (max-width: 900px) { .ui-table .ui-extra { display: none; } }

@media (max-width: 600px) {
  .ui-table th, .ui-table td { padding-left: 3px; padding-right: 3px; }
  .ui-table td { font-size: .74rem; }
  .ui-mono { font-size: .68rem; }
  .ui-ch, .ui-st { padding: 2px 6px; font-size: .66rem; }
}

/* screens: full-width grey band like the other sections; content stays in the normal container */
.screens-band { background: #EEF1F5; padding: 88px 0 96px; }
.screens-band .screens { background: none; border-radius: 0; padding: 0; margin: 0; border: 0; }
@media (max-width: 900px) { .screens-band { padding: 56px 0 64px; } .screens-band .screens { padding: 0; } }

/* review fixes */
#how { background: #fff; }
.nw-all { white-space: nowrap; }
.faq .faq-more { margin: 20px 0 0; }

/* ---------- article layout v2 ---------- */
.art-w { max-width: 760px; }
.art-hero { padding: 120px 0 40px; background: linear-gradient(180deg, #FFF4E6 0%, #FFFAF5 70%, #fff 100%); }
.art-hero h1 { font-size: clamp(1.8rem, 4.2vw, 2.6rem); line-height: 1.3; margin: 10px 0 14px; color: var(--ink-dark); }
.art-hero .lead { font-size: 1.08rem; line-height: 1.75; color: var(--ink); margin: 0; }
.art-hero .updated { margin: 12px 0 0; font-size: .85rem; color: var(--gray-500); }
.art-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.art-stats div { background: #fff; border: 1px solid #F1E3D3; border-radius: 14px; padding: 16px 18px; }
.art-stats b { display: block; font-size: 1.6rem; line-height: 1.2; color: var(--ink-dark); font-family: Inter, Prompt, sans-serif; }
.art-stats div:last-child b { color: var(--success-ink); }
.art-stats span { display: block; margin-top: 4px; font-size: .82rem; color: var(--gray-600, #5B6573); }
.art-body { padding: 24px 0 72px; }
.art-body h2 { font-size: 1.45rem; color: var(--ink-dark); margin: 56px 0 16px; line-height: 1.4; }
.art-body h2:first-child { margin-top: 24px; }
.art-body p { font-size: 1.02rem; line-height: 1.85; color: var(--ink); }
.fee-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--gray-200); border-radius: 16px; overflow: hidden; background: #fff; }
.fee-list li { display: flex; justify-content: space-between; gap: 20px; padding: 16px 20px; border-bottom: 1px solid var(--gray-200); }
.fee-list li:last-child { border-bottom: 0; }
.fee-list .fee-l b { display: block; color: var(--ink-dark); font-weight: 600; font-size: 1rem; }
.fee-list .fee-l span { display: block; margin-top: 4px; font-size: .88rem; line-height: 1.65; color: var(--gray-600, #5B6573); }
.fee-list .fee-r { flex: none; text-align: right; font-weight: 700; color: var(--brand-ink); white-space: nowrap; font-size: 1rem; padding-top: 1px; }
.art-body .fee-note { font-size: .85rem; line-height: 1.7; color: var(--gray-500); margin-top: 12px; }
.art-example { display: grid; grid-template-columns: 340px 1fr; gap: 32px; align-items: center; background: #FFF4E6; border-radius: 20px; padding: 28px; }
.art-example .art-slip { margin: 0; background: #fff; border-radius: 14px; padding: 18px 20px; box-shadow: 0 12px 28px -18px rgba(20,35,43,.35); }
.art-example .art-slip dl div { font-size: .9rem; }
.art-example-txt p { margin: 0 0 12px; }
.art-example-txt p:last-child { margin-bottom: 0; }
.art-body .note-box { margin-top: 40px; }
.art-body .note-box h3 { font-size: 1.05rem; margin: 0 0 8px; color: var(--success-ink); }
.art-body .note-box p { font-size: .95rem; }
.art-foot { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--gray-200); }
.art-foot h3 { font-size: 1rem; margin: 20px 0 8px; color: var(--ink-dark); }
.art-foot .src-list { font-size: .88rem; }
@media (max-width: 760px) {
  .art-hero { padding: 100px 0 28px; }
  .art-stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .art-stats div { padding: 12px 10px; }
  .art-stats b { font-size: 1.15rem; }
  .art-stats span { font-size: .72rem; }
  .fee-list li { flex-direction: column; gap: 6px; padding: 14px 16px; }
  .fee-list .fee-r { text-align: left; }
  .art-example { grid-template-columns: 1fr; padding: 18px; gap: 18px; }
  .art-body h2 { font-size: 1.25rem; margin-top: 44px; }
}

@media (max-width: 600px) { .art-hero h1 { font-size: 6.1vw; } }

.slip dl div { gap: 10px; }
.slip dd { white-space: nowrap; flex: none; }

/* hero glow: anchored behind the dashboard image instead of the page edge; softer */
.hero::after { content: none; display: none; }
.hero .shot { position: relative; isolation: isolate; }
.hero .shot::before { content: ""; position: absolute; z-index: -1; inset: -18% -14% -12% -14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,159,102,.22), rgba(255,159,102,0)); filter: blur(28px); pointer-events: none; }
@media (max-width: 900px) { .hero .shot::before { inset: -8% -6%; opacity: .7; } }

/* article hero slides under the floating nav like .page-hero, so no white strip at the top */
.art-hero { margin-top: -72px; padding-top: 150px; }
@media (max-width: 760px) { .art-hero { padding-top: 124px; } }

/* profit section: scannable ticks instead of a paragraph */
#profit h2 { margin-bottom: 20px; }
#profit .profit-lead { margin: 0 0 12px; font-weight: 600; color: var(--ink-dark); }
#profit .profit-ticks { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 12px; }
#profit .profit-ticks li { position: relative; padding-left: 32px; line-height: 1.6; color: var(--ink); }
#profit .profit-ticks li b { color: var(--ink-dark); font-weight: 600; }
#profit .profit-ticks li::before { content: ""; position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: #2E7D32 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px 14px no-repeat; }