/* Homepage only. Shared QuizPro palette and Sarabun typography.
   Specific !important overrides are required by legacy header CSS. */
body.publish-home{background:#fbfefe;color:#123d48!important;font-family:"Sarabun",Tahoma,sans-serif;font-size:17px!important;line-height:1.8!important;--kcr-navy:#123d48;--kcr-brand:#087f87;--kcr-brand-dark:#045565;--kcr-muted:#526b73;--kcr-line:#dcebec;--kcr-soft:#f0fafa}
.publish-home .wrap{width:min(100% - 48px,1200px)!important;max-width:1200px!important}
.publish-home .qp-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:44px;align-items:center;padding:56px 32px!important;margin:24px 0;background:linear-gradient(120deg,#f0fafa,#e0f5f2);border:1px solid #dcebec;border-radius:28px;overflow:hidden}
.publish-home .qp-eyebrow{display:block;font-size:.85rem;font-weight:600;color:#045565;letter-spacing:.6px;margin:0 0 16px}
.publish-home .qp-hero h1{font-size:clamp(1.9rem,3.4vw,2.9rem)!important;line-height:1.45!important;letter-spacing:-.5px;margin:0 0 20px!important;color:#123d48}
.publish-home .qp-hero h1:after{display:none}
.publish-home .qp-hero h1 span{color:#087f87}
.publish-home .qp-hero .lead{font-size:1rem!important;line-height:1.9!important;max-width:540px;color:#526b73!important}
.publish-home .qp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.publish-home .qp-actions .button{min-height:48px;padding:10px 20px;border-radius:12px;font-weight:600}
.publish-home .qp-guide{padding:28px;background:#fff;border:1px solid #dcebec;border-radius:22px;box-shadow:0 14px 38px #123d480a}
.publish-home .qp-guide h2{font-size:1.35rem;line-height:1.6;margin-bottom:20px}
.publish-home .qp-guide ol{padding:0;margin:0 0 20px;list-style:none}
.publish-home .qp-guide li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid #edf4f4}
.publish-home .qp-guide li>span{display:grid;place-items:center;flex:0 0 38px;height:38px;background:#d7f4f3;border-radius:12px;color:#045565;font-weight:700}
.publish-home .qp-guide strong{font-size:.95rem}
.publish-home .qp-guide p{margin:2px 0 0;font-size:.85rem;color:#526b73}
.publish-home .qp-guide>a{font-weight:600;text-decoration:none}
.publish-home .stat-box{background:#fff;border-radius:16px;padding:20px 12px;border:1px solid #dcebec}
.publish-home .stat-box strong{color:#087f87;font-size:1.75rem;font-weight:700}
.publish-home .stat-box span{font-size:.85rem}
.publish-home .layout.two-col{gap:28px;padding-top:16px;scroll-margin-top:90px}
.publish-home .paper-list{display:grid;gap:18px}
.publish-home .paper-card.card-v2{border:1px solid #dcebec!important;border-radius:20px!important;padding:24px!important;background:#fff;box-shadow:0 6px 26px #123d4808!important}
.publish-home .card-v2-title{font-size:1.12rem;line-height:1.65;color:#123d48;font-weight:700}
.publish-home .card-v2-excerpt{line-height:1.85;font-size:.95rem}
.publish-home .card-v2-meta{line-height:1.6;margin:5px 0}
.publish-home .meta-item{line-height:1.5}
.publish-home .card-v2-cat{background:#f0fafa;color:#045565;padding:4px 12px;font-weight:600}
.publish-home .card-v2-foot{padding-top:12px;border-top:1px solid #edf4f4}
.publish-home .chip{min-height:42px;font-weight:600;border-radius:12px;padding:7px 16px}
.publish-home form.search-form input[type="search"][name="q"]{border-radius:14px;min-height:56px;background:#fff}
.publish-home .search-form button{border-radius:10px}
.publish-home .kcr-brand strong{color:#123d48!important}
.publish-home .kcr-desktop-menu>a.menu-cta{border-radius:12px!important;background:#087f87!important}
@media(max-width:900px){.publish-home .qp-hero{grid-template-columns:1fr;gap:28px;padding:32px 24px!important}.publish-home .qp-guide{max-width:none}.publish-home .qp-hero-copy{max-width:660px}}
@media(max-width:600px){.publish-home .wrap{width:calc(100% - 28px)!important}.publish-home .qp-hero{padding:28px 18px!important;border-radius:20px;margin-top:16px}.publish-home .qp-hero h1{font-size:1.85rem!important}.publish-home .qp-guide{padding:20px;border-radius:16px}.publish-home .qp-actions{gap:10px}.publish-home .qp-actions .button{width:100%}.publish-home .paper-card.card-v2{padding:18px!important}.publish-home .card-v2-title{font-size:1rem}.publish-home .stat-box strong{font-size:1.4rem}}
@media(prefers-reduced-motion:reduce){.publish-home *{scroll-behavior:auto;transition:none}}

/* ── Home hero + sales block (2026-10-29) ─────────────────────────────────
   Owner's brief: the home page should sell, following the mock-up he sent
   (centred pill, H1, one line of benefit, primary + secondary button, the four
   numbers inside the hero), while phones still show papers in the first screen.
   The old .qp-hero / .qp-guide markup is gone; the 3 steps and a sample receipt
   now sit below the library (#sample-receipt), where the second button scrolls. */
.publish-home .home-hero{text-align:center;max-width:920px;margin:24px auto 22px;padding:44px 32px 30px;border:1px solid #dce8e9;border-radius:24px;background:linear-gradient(180deg,#f0fafa 0%,#fff 78%)}
.publish-home .home-hero-eyebrow{display:inline-block;margin:0 0 14px;padding:6px 14px;border-radius:999px;background:#e1f4f2;color:#045565;font-size:.88rem;font-weight:600;line-height:1.4}
.publish-home .home-hero h1{margin:0 auto 12px!important;max-width:760px;font-size:clamp(1.6rem,3.3vw,2.55rem)!important;line-height:1.38!important;color:#123d48}
.publish-home .home-hero h1 span{color:#087f87}
.publish-home .home-hero h1:after{margin:14px auto 0}
.publish-home .home-hero-lead{max-width:620px;margin:0 auto 22px;color:#526b73;font-size:1.02rem;line-height:1.8}
.publish-home .home-hero-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}
.publish-home .home-hero-cta{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px!important;font-size:1.02rem;font-weight:700}
.publish-home .home-hero-cta svg{flex:0 0 auto}
.publish-home .home-hero-cta2{min-height:52px;padding:0 24px;border-radius:999px!important;font-weight:600;background:#fff}
.publish-home .home-hero-trust{margin:14px 0 0;color:#526b73;font-size:.9rem}
.publish-home .home-hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;list-style:none;margin:28px 0 0;padding:22px 0 0;border-top:1px solid #dce8e9}
.publish-home .home-hero-stats li{display:grid;gap:2px}
.publish-home .home-hero-stats strong{font-size:1.6rem;line-height:1.2;color:#123d48}
.publish-home .home-hero-stats span{color:#526b73;font-size:.9rem}

.publish-home .home-sell{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:36px;align-items:center;margin:34px 0 10px;padding:36px;border:1px solid #dce8e9;border-radius:24px;background:#fff;scroll-margin-top:90px}
.publish-home .home-sell h2{font-size:clamp(1.3rem,2.3vw,1.75rem);line-height:1.45;color:#123d48;margin:0 0 18px}
.publish-home .home-sell-points{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:12px}
.publish-home .home-sell-points li{position:relative;padding-left:30px;color:#526b73;line-height:1.7}
.publish-home .home-sell-points li:before{content:"";position:absolute;left:0;top:.35em;width:20px;height:20px;border-radius:50%;background:#e1f4f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23087f87' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12 10 17 19 7'/%3E%3C/svg%3E") center/12px no-repeat}
.publish-home .home-sell-points strong{display:block;color:#123d48;font-weight:700}
.publish-home .home-sell-steps{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.publish-home .home-sell-steps li{display:flex;align-items:center;gap:8px;color:#123d48;font-weight:600;font-size:.95rem}
.publish-home .home-sell-steps span{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#087f87;color:#fff;font-size:.85rem}
.publish-home .home-sell-actions{justify-content:flex-start}
.publish-home .home-sell-link{color:#045565;font-weight:600}
.publish-home .home-sell-sample{margin:0;text-align:center}
.publish-home .home-sell-sample img{width:100%;max-width:440px;height:auto;border-radius:12px;border:1px solid #dce8e9;box-shadow:0 12px 32px rgba(18,61,72,.10)}
.publish-home .home-sell-sample figcaption{margin-top:8px;color:#526b73;font-size:.85rem}

/* Phones: same breakpoint as the bottom menu. The hero stays compact enough that
   the first paper still starts inside the first screen. */
@media(max-width:760px){
  .publish-home .home-hero{margin:12px 0 14px;padding:22px 16px 18px;border-radius:20px}
  .publish-home .home-hero-eyebrow{margin-bottom:10px;font-size:.8rem;padding:4px 12px}
  .publish-home .home-hero h1{font-size:1.32rem!important;line-height:1.45!important;margin-bottom:8px!important}
  .publish-home .home-hero h1:after{display:none}
  .publish-home .home-hero-lead{font-size:.92rem;line-height:1.65;margin-bottom:14px}
  .publish-home .home-hero-actions{flex-direction:column;gap:8px}
  .publish-home .home-hero-cta,.publish-home .home-hero-cta2{width:100%;justify-content:center;min-height:46px}
  .publish-home .home-hero-trust{display:none}
  .publish-home .home-hero-stats{margin-top:16px;padding-top:14px;gap:4px}
  .publish-home .home-hero-stats strong{font-size:1.05rem}
  .publish-home .home-hero-stats span{font-size:.72rem}
  .publish-home .home-sell{grid-template-columns:1fr;gap:22px;padding:22px 18px;margin-top:24px}
  .publish-home .home-sell-actions{flex-direction:column;align-items:stretch}
  .publish-home .home-sell-link{text-align:center}
  /* "ส่งผลงาน" lives in the bottom menu on every page; the floating button sat
     behind that menu (z-index 50 under 9995), so it is not shown on phones. */
  .publish-home .fab{display:none!important}
}

/* ── Affiliate links after the papers (2026-10-29) ─────────────────────────
   DOM order inside #paper-library: papers → sales block → affiliate links, so
   phones read papers first, then the pitch, then the ads. On two-column
   screens the grid puts the ads back in the right column beside the papers
   (they never pushed papers down there) and the sales block spans the width
   underneath — the same picture as before. */
@media(min-width:900px){
  .publish-home #paper-library > div:first-child{grid-column:1;grid-row:1}
  .publish-home #paper-library > .home-aff{grid-column:2;grid-row:1}
  .publish-home #paper-library > .home-sell{grid-column:1 / -1;grid-row:2;margin-top:10px}
}
.publish-home .home-aff-head{text-align:center;padding:4px 0 2px;border-bottom:1px solid #dce8e9;margin-bottom:2px}
.publish-home .home-aff-title{margin:0;color:#123d48;font-weight:700;font-size:.95rem}
.publish-home .home-aff-note{margin:2px 0 6px;color:#526b73;font-size:.78rem;line-height:1.5}
@media(max-width:899px){.publish-home #paper-library > .home-sell{margin:8px 0 18px}}