:root {
  --scrap-paper: #fffdf7;
  --scrap-paper-warm: #fbf3e6;
  --scrap-ink: #2b2620;
  --scrap-blue: #3b699a;
  --scrap-blue-dark: #294d73;
  --scrap-yellow: #f9c067;
  --scrap-coral: #ed6a6a;
  --scrap-lavender: #c8b9e8;
  --scrap-mint: #bfe1d0;
  --scrap-line: rgba(59, 105, 154, 0.13);
  --scrap-border: 2px solid var(--scrap-ink);
  --scrap-shadow-yellow: 6px 6px 0 var(--scrap-yellow);
  --scrap-shadow-lavender: 6px 6px 0 var(--scrap-lavender);
}

html { scroll-behavior: smooth; }

body {
  background: var(--scrap-paper);
  letter-spacing: 0;
}

.topbar { display: none; }

.container { max-width: 1080px; }
.container-narrow { max-width: 820px; }
.section { position: relative; padding: 72px 0; overflow: clip; }

.section::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(900px, calc(100% - 48px));
  height: 2px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(90deg, rgba(43,38,32,.38) 0 9px, transparent 9px 17px);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.section-title {
  color: var(--scrap-blue-dark);
  font-size: 2.35rem;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0;
  margin-bottom: 20px;
}

.section-title .accent {
  display: inline;
  color: var(--scrap-blue-dark);
  background: linear-gradient(transparent 63%, rgba(249,192,103,.78) 63%);
  padding: 0 3px;
}

.punch-line { max-width: 760px; font-size: 1.12rem; line-height: 1.7; }
.punch-line .accent { color: var(--scrap-coral); }
.lead-text { max-width: 680px; line-height: 1.8; }

/* Hero: the product stays the first visual signal, but on light paper like Polyglot. */
.hero {
  position: relative;
  min-height: min(680px, 78svh);
  padding: 44px 0 58px;
  color: var(--scrap-ink);
  text-align: left;
  background-color: var(--scrap-paper);
  background-image: linear-gradient(rgba(255,253,247,.26), rgba(255,253,247,.26)), url('/images/optotalk-hero-paper.webp');
  background-position: center top;
  background-size: cover;
  border-bottom: 8px solid var(--scrap-blue-dark);
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -16px;
  height: 18px;
  background: var(--scrap-paper);
  clip-path: polygon(0 8%, 3% 58%, 7% 21%, 11% 69%, 17% 18%, 23% 72%, 30% 25%, 37% 68%, 43% 16%, 50% 74%, 58% 23%, 65% 67%, 72% 18%, 79% 73%, 87% 25%, 94% 65%, 100% 12%, 100% 100%, 0 100%);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr);
  grid-template-areas:
    "kicker visual"
    "title visual"
    "sub visual"
    "cta visual"
    "note mascot";
  gap: 16px 48px;
  align-items: center;
}

.hero-kicker {
  grid-area: kicker;
  justify-self: start;
  margin: 0;
  padding: 7px 12px;
  color: var(--scrap-blue-dark);
  background: var(--scrap-yellow);
  border: 1.5px solid var(--scrap-ink);
  box-shadow: 3px 3px 0 var(--scrap-ink);
  font-family: 'Kanit', sans-serif;
  font-size: .76rem;
  font-weight: 700;
  transform: rotate(-1.5deg);
}

.hero-title {
  grid-area: title;
  max-width: 560px;
  margin: 0;
  color: var(--scrap-blue-dark);
  font-size: 3rem;
  line-height: 1.14;
  text-align: left;
}

.hero-highlight { display: block; }
.hero-rotate-word {
  margin-left: 8px;
  color: var(--scrap-coral);
  font-style: normal;
  background: linear-gradient(transparent 66%, rgba(249,192,103,.72) 66%);
}

.hero-sub {
  grid-area: sub;
  max-width: 560px;
  margin: 0;
  color: var(--scrap-ink);
  font-size: 1.03rem;
}

.hero-sub strong { color: var(--scrap-blue-dark); }
.hero-inner > .btn { grid-area: cta; justify-self: start; margin-top: 7px; }
.hero-note { grid-area: note; margin: 2px 0 0; color: var(--scrap-blue-dark); font-size: .9rem; }

.hero-visual {
  position: relative;
  grid-area: visual;
  width: 100%;
  max-width: 600px;
  margin: 0;
  padding: 12px;
  overflow: visible;
  background: #fff;
  border: var(--scrap-border);
  border-radius: 4px;
  box-shadow: 10px 10px 0 var(--scrap-yellow), 14px 14px 0 var(--scrap-ink);
  transform: rotate(1.2deg);
}

.hero-visual::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -15px;
  left: 38%;
  width: 116px;
  height: 30px;
  background: rgba(200,185,232,.82);
  border: 1px solid rgba(43,38,32,.15);
  transform: rotate(-3deg);
}

.hero-visual img { border-radius: 2px; }
.hero-inner > .hero-meefai {
  grid-area: mascot;
  justify-self: end;
  align-self: start;
  display: block;
  width: 116px;
  height: auto;
  filter: drop-shadow(4px 5px 0 rgba(255,255,255,.82));
  transform: rotate(2deg);
  margin: -8px 12px 8px 0;
}

.btn { border-radius: 6px; letter-spacing: 0; }
.btn-primary, .btn-cta {
  border: 2px solid var(--scrap-ink);
  box-shadow: 5px 5px 0 var(--scrap-ink);
}
.btn-primary:hover, .btn-cta:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--scrap-ink); }

/* Alternating notebook paper, graph paper and tactile dark bands. */
#problem, #method, #whats-inside, #fit-check, #objections {
  background-color: var(--scrap-paper);
  background-image:
    linear-gradient(90deg, transparent 72px, rgba(237,106,106,.16) 72px, rgba(237,106,106,.16) 74px, transparent 74px),
    repeating-linear-gradient(0deg, transparent 0 31px, var(--scrap-line) 31px 32px);
}

#program, #platform, #b2b, #faq {
  background-color: #fbfaf4;
  background-image:
    linear-gradient(var(--scrap-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--scrap-line) 1px, transparent 1px);
  background-size: 32px 32px;
}

#roi, #pricing {
  color: #fff;
  background-color: var(--scrap-blue-dark);
  background-image: linear-gradient(rgba(41,77,115,.83), rgba(41,77,115,.83)), url('/images/optotalk-kraft.webp');
  background-size: cover;
}

#guarantee {
  background-color: var(--scrap-paper-warm);
  background-image: linear-gradient(rgba(251,243,230,.82), rgba(251,243,230,.82)), url('/images/optotalk-kraft.webp');
  background-size: cover;
}

#guarantee .section-title { color: var(--scrap-blue-dark); }
#guarantee .accent { color: var(--scrap-blue-dark); }
#guarantee .promise { color: var(--scrap-ink); }

.chunk-rule span { border-radius: 1px; border: 1px solid var(--scrap-ink); }

/* Cards read as notes and pinned artifacts rather than a SaaS card grid. */
.card, .benefit, .promise, .fit-card, .faq-item, .cert-shot {
  border: var(--scrap-border);
  border-radius: 5px;
  box-shadow: var(--scrap-shadow-yellow);
}

.grid > :nth-child(even),
.promise-list > :nth-child(even),
.faq-list > :nth-child(even),
.cert-pair > :nth-child(even) { box-shadow: var(--scrap-shadow-lavender); }

.grid > :nth-child(3n+1) { transform: rotate(-.45deg); }
.grid > :nth-child(3n+2) { transform: rotate(.35deg); }
.grid > :nth-child(3n) { transform: rotate(-.15deg); }

.card::before, .promise::before, .fit-card::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 76px;
  height: 22px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(249,192,103,.62);
  border: 1px solid rgba(43,38,32,.12);
  pointer-events: none;
}

.grid > :nth-child(even)::before, .promise-list > :nth-child(even)::before { background: rgba(200,185,232,.68); transform: translateX(-50%) rotate(2deg); }

.card-image { border-radius: 2px; border: 1.5px solid var(--scrap-ink); background: var(--scrap-paper-warm); }
.card-num { border: 1.5px solid var(--scrap-ink); border-radius: 4px; box-shadow: 2px 2px 0 var(--scrap-yellow); }
.card-badge { border: 1.5px solid var(--scrap-ink); border-radius: 3px; box-shadow: 2px 2px 0 var(--scrap-yellow); }
.card-bonus { border-color: var(--scrap-ink); background: #fff9dd; }

/* The module rail keeps native swiping but becomes a row of index cards. */
.mod-rail { margin-top: 50px; }
.mod-rail::before { background: linear-gradient(90deg, #fbfaf4 12%, rgba(251,250,244,0)); }
.mod-rail::after { background: linear-gradient(270deg, #fbfaf4 12%, rgba(251,250,244,0)); }
.mod-card { min-height: 230px; animation: none; border-radius: 4px; box-shadow: 6px 6px 0 var(--scrap-yellow); }
.mod-card:nth-child(even) { box-shadow: 6px 6px 0 var(--scrap-lavender); }
.mod-card:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 8px 10px 0 var(--scrap-ink); }
.mod-btn { border: var(--scrap-border); border-radius: 4px; box-shadow: 3px 3px 0 var(--scrap-yellow); }

#roi .section-title { color: #fff; }
#roi .accent { color: var(--scrap-yellow); background: none; }
#roi .lead-text, #roi .punch-line { color: rgba(255,255,255,.92); }
#roi .lead-text strong { color: #fff; }

.fit-card { position: relative; background: #fff; border-top: var(--scrap-border); }
.fit-yes { box-shadow: 6px 6px 0 var(--scrap-mint); }
.fit-no { box-shadow: 6px 6px 0 #f0b0aa; }

.cert-shot { background: #fff; padding: 14px; }
.cert-shot img { border-radius: 2px; border-color: var(--scrap-ink); }

.guarantee-box {
  position: relative;
  border: var(--scrap-border);
  border-radius: 4px;
  background: #eaf7ef;
  box-shadow: 5px 5px 0 var(--scrap-mint);
}

/* Price stays visually dominant, while the stack reads like a receipt pinned to paper. */
#pricing::after { display: none; }
#pricing .section-title { color: #fff; }
#pricing .section-title .accent { color: var(--scrap-yellow); background: none; }
.pricing-card {
  max-width: 600px;
  border: var(--scrap-border);
  border-radius: 5px;
  box-shadow: 10px 10px 0 var(--scrap-yellow), 14px 14px 0 var(--scrap-ink);
  transform: rotate(-.2deg);
}
.pricing-badge { border: 1.5px solid var(--scrap-ink); border-radius: 4px; box-shadow: 3px 3px 0 var(--scrap-ink); }
.value-stack { padding: 0; background: transparent; border-radius: 0; }
.value-stack-label { display: inline-block; padding: 4px 9px; background: var(--scrap-lavender); border: 1px solid var(--scrap-ink); transform: rotate(-1deg); }
.value-stack-list li { padding: 10px 4px; border-bottom: 1.5px dashed rgba(43,38,32,.25); }
.value-stack-total { border-top: 2px solid var(--scrap-ink); }
.form-row input { border: 1.5px solid var(--scrap-ink); border-radius: 4px; background: #fffdf7; }

.faq-item { padding: 18px 20px; background: #fff; }
.faq-item summary { color: var(--scrap-blue-dark); }
.faq-item summary::after { color: var(--scrap-coral); }

.footer { border-top: 8px solid var(--scrap-yellow); background: var(--scrap-blue-dark); }
.line-float { border: 2px solid var(--scrap-ink); box-shadow: 4px 4px 0 var(--scrap-ink); }

@media (max-width: 860px) {
  .section { padding: 58px 0; }
  .section-title { font-size: 1.9rem; }
  .hero { min-height: auto; padding: 30px 0 34px; }
  .hero-inner {
    grid-template-columns: 1fr;
    grid-template-areas: "kicker" "title" "sub" "visual" "mascot" "cta" "note";
    gap: 15px;
  }
  .hero-kicker { justify-self: center; }
  .hero-title { max-width: 680px; margin: 0 auto; font-size: 2.25rem; text-align: center; }
  .hero-sub { margin: 0 auto; text-align: center; }
  .hero-visual { max-width: 590px; margin: 10px auto 12px; }
  .hero-inner > .hero-meefai { justify-self: center; width: 92px; margin: 2px 0 8px; }
  .hero-inner > .btn { justify-self: center; }
  .hero-note { justify-self: center; text-align: center; }
  .grid > * { transform: none !important; }
}

@media (max-width: 640px) {
  .container { padding-left: 20px; padding-right: 20px; }
  .section { padding: 50px 0; }
  .section::after { width: calc(100% - 40px); }
  .section-title { font-size: 1.65rem; line-height: 1.28; }
  .hero { padding-top: 24px; }
  .hero-title { font-size: 1.9rem; line-height: 1.25; }
  .hero-sub { font-size: .9rem; line-height: 1.65; }
  .hero-visual { width: calc(100% - 8px); padding: 7px; box-shadow: 6px 6px 0 var(--scrap-yellow), 9px 9px 0 var(--scrap-ink); }
  .hero-inner > .hero-meefai { width: 82px; }
  .hero-visual::before { left: 34%; width: 86px; height: 22px; top: -12px; }
  .hero-inner > .btn { width: 100%; text-align: center; }
  .hero-note { font-size: .78rem; }
  #problem, #method, #whats-inside, #fit-check, #objections {
    background-image: repeating-linear-gradient(0deg, transparent 0 31px, var(--scrap-line) 31px 32px);
  }
  .card, .benefit, .promise, .fit-card, .faq-item, .cert-shot { box-shadow: 4px 4px 0 var(--scrap-yellow); }
  .grid > :nth-child(even), .promise-list > :nth-child(even), .faq-list > :nth-child(even), .cert-pair > :nth-child(even) { box-shadow: 4px 4px 0 var(--scrap-lavender); }
  .pricing-card { padding: 28px 20px; box-shadow: 6px 6px 0 var(--scrap-yellow), 9px 9px 0 var(--scrap-ink); }
  .price-new { font-size: 2.45rem; }
  .mod-card { width: 260px; }
  .line-float span { display: none; }
  .line-float { width: 52px; height: 52px; padding: 0; justify-content: center; border-radius: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn-primary, .btn-cta { animation: none; }
  .hero-rotate-word { transition: none; }
}