/* Partner programme (/partners). Tokens, header, buttons, stickers, FAQ, closer and footer come from site.css.
   The page reads like the partner desk it leads to: a level track that climbs 🌱 → ⭐ → 🚀, one worked example printed
   as a receipt, and a deep-ink room for money and tax, the part that has to feel trustworthy. */
.p-hero{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:var(--space-6);padding:clamp(28px,4vw,64px) var(--gutter) 0;background-color:var(--rose);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23FEC8D4' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M46 36a10 10 0 1 0-20 0 10 10 0 1 0 20 0c0 15-5 25-16 29' stroke-opacity='.5'/%3E%3Cpath d='M106 94a8 8 0 1 0-16 0 8 8 0 1 0 16 0c0 11-4 19-12 22' stroke-opacity='.3'/%3E%3C/g%3E%3C/svg%3E");border-bottom:var(--line);overflow:clip}
.p-hero-copy{padding-bottom:clamp(40px,6vw,88px);max-width:44rem}
.p-hero h1{font-size:clamp(2.2rem,1.1rem + 4.2vw,3.8rem)}
.p-signin{margin-top:var(--space-4);font-size:var(--text-small)}
.p-signin a{color:var(--ink);font-weight:700}
.p-stage{position:relative;justify-self:center;width:min(100%,360px);aspect-ratio:431/720}
.p-stage::before{content:"";position:absolute;left:50%;bottom:-30%;width:118%;aspect-ratio:1;border-radius:50%;background:var(--surface);outline:1.5px dashed var(--navy);outline-offset:14px;transform:translateX(-50%)}
.p-figure{position:absolute;left:50%;bottom:0;height:100%;width:auto;max-width:none;transform:translateX(-50%);filter:drop-shadow(0 14px 14px rgb(75 74 103 / .26))}
.p-sticker{white-space:nowrap}
.p-sticker-a{left:-22%;top:12%;transform:rotate(-4deg)}
.p-sticker-b{right:-26%;top:36%;transform:rotate(3deg)}
.p-sticker-c{left:-30%;top:62%;transform:rotate(-2deg);background:var(--ink);color:var(--white);border-color:var(--ink)}
.p-sticker-c::after{background:var(--ink);border-color:var(--ink)}

/* The partner film "ร้านเขาโต เราก็โต" (brand/teaser-ep5), before the short clip: its cover is a sticker on the page and
   the films player plays it (films.js/films.css: 16:9 on computers, the 9:16 cut on phones held upright). Nothing of the
   film loads until it is pressed; the dotted edges are the film shelf's on the home page. */
.p-film{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-areas:"card head" "card credit";column-gap:clamp(32px,5vw,88px);row-gap:var(--space-5);align-items:center;padding:var(--space-section) var(--gutter);background:var(--surface);border-bottom:var(--line)}
.p-film::before,.p-film::after{content:"";position:absolute;left:0;right:0;height:10px;background:radial-gradient(circle at 50% 50%,var(--rose-soft) 0 3px,transparent 3.5px) 0 0/22px 10px repeat-x;opacity:.9}
.p-film::before{top:10px}.p-film::after{bottom:10px}
.p-film-head{grid-area:head;align-self:end;max-width:30rem}
.p-film-kicker{margin-bottom:var(--space-3);font:500 .95rem/1.5 var(--font-display);color:var(--rose-ink)}
.p-film h2{font-size:clamp(1.85rem,1.2rem + 2.6vw,3rem);font-weight:600;line-height:1.2}
.p-film-line{margin-top:var(--space-4);font-size:1.1rem;line-height:1.8}
.p-film-caption{margin-top:var(--space-3);font-size:var(--text-small);color:var(--navy)}
.p-film-card{grid-area:card;justify-self:end;width:100%;max-width:760px}
.p-film-card .film-card-screen{rotate:-1deg;box-shadow:var(--drop-lg)}
.p-film-card .film-play{left:16px;bottom:16px;width:68px;height:68px}
.p-film-card .film-play::before{border-width:13px 0 13px 20px;margin-left:6px}
.p-film-credit{grid-area:credit;align-self:start}

/* The clip. It steps aside (partners.js) when the file is not there, and the page reads the same without it. */
.p-clip{padding:var(--space-section) var(--gutter) calc(var(--space-section) - 24px);background:var(--white);border-bottom:var(--line)}
.p-clip[hidden]{display:none}
.p-player{max-width:960px;margin:0 auto}
.p-player video{display:block;width:100%;aspect-ratio:16/9;border:var(--line);border-radius:var(--r-panel);box-shadow:var(--drop-lg);background:var(--ink)}

/* Levels: three stops on one dashed path; the top level is the ink ticket, as the biggest pack is on the pricing band. */
.p-levels{padding:var(--space-section) var(--gutter);background:var(--surface)}
.p-track{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,44px);max-width:1120px;margin:0 auto;counter-reset:none}
.p-track::before{content:"";position:absolute;left:10%;right:10%;top:58px;border-top:2px dashed var(--navy);opacity:.45}
.p-level{position:relative;display:grid;align-content:start;justify-items:start;gap:10px;padding:26px 26px 28px;border:var(--line);border-radius:var(--r-panel);background:var(--white);box-shadow:var(--drop)}
.p-level:nth-child(2){margin-top:28px}.p-level:nth-child(3){margin-top:56px}
.p-badge{display:grid;place-items:center;width:72px;height:72px;margin-bottom:4px;border-radius:22px;background:var(--white);border:2px solid var(--navy);box-shadow:4px 4px 0 var(--rose);font-size:2.1rem;line-height:1}
.p-level h3{font-size:1.3rem}
.p-rate{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;font-size:var(--text-small)}
.p-rate strong{font:600 clamp(2.4rem,1.8rem + 2vw,3.2rem)/1 var(--font-display);color:var(--rose-ink);font-variant-numeric:tabular-nums}
.p-need{font:500 1rem/1.5 var(--font-display)}
.p-bonus{margin-top:4px;padding:4px 12px;border:1.5px solid var(--navy);border-radius:var(--r-pill);background:var(--peach);font-size:.9rem;line-height:1.5}
.p-top{background:var(--ink);border-color:var(--ink);color:var(--white);box-shadow:var(--drop-lg)}
.p-top .p-badge{box-shadow:4px 4px 0 var(--cyan)}
.p-top .p-rate strong{color:var(--rose-soft)}
.p-top .p-bonus{color:var(--ink)}
.p-count{max-width:1120px;margin:clamp(40px,5vw,72px) auto 0;padding:clamp(20px,2.6vw,32px);border:1.5px dashed var(--navy);border-radius:var(--r-panel);background:var(--rose-soft)}
.p-count h3{margin-bottom:var(--space-2)}
.p-count p{max-width:52em}

/* One worked example, printed like a receipt: every figure is the real formula (test/site-facts.test.js). */
.p-example{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:center;padding:var(--space-section) var(--gutter);background:#dff8ff;border-block:var(--line)}
.p-example-copy p{margin-top:var(--space-4);max-width:var(--measure)}
.p-example-copy .p-example-kicker{margin:0 0 var(--space-2);font:500 1rem/1.5 var(--font-display);color:var(--rose-ink)}
.p-honest{padding-left:14px;border-left:4px solid var(--rose-deep);font-weight:500}
.p-receipt{position:relative;margin:0;padding:clamp(22px,3vw,36px);border:var(--line);border-radius:var(--r-card);background:var(--white);box-shadow:var(--drop-lg);transform:rotate(.8deg)}
.p-receipt::after{content:"";position:absolute;left:14px;right:14px;bottom:-9px;height:9px;background:radial-gradient(circle at 7px 0,transparent 6px,var(--white) 6.5px) 0 0/14px 9px repeat-x}
.p-tag{position:absolute;right:18px;top:-16px;padding:4px 14px;border:var(--line);border-radius:var(--r-pill);background:var(--peach);font:500 .9rem/1.5 var(--font-display);transform:rotate(3deg)}
.p-receipt figcaption{font:500 clamp(1.2rem,1rem + .8vw,1.5rem)/1.45 var(--font-display);text-wrap:balance}
.p-rows{margin-top:var(--space-4)}
.p-rows div{display:flex;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1.5px dotted var(--navy)}
.p-rows div:last-child{border-bottom:0}
.p-rows dt{flex:1}
.p-rows dd{font:500 1.1rem/1.4 var(--font-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.p-row-now{margin:4px -12px;padding:10px 12px!important;border:1.5px solid var(--rose-deep)!important;border-radius:var(--r-control);background:var(--rose-soft)}

/* The receipt's shop, then 5 and 20 of them: every figure is the real formula, payment by payment (test/site-facts.test.js).
   A table on wide screens, one ticket per example on phones; 🚀 is the ink ticket, as on the level track. */
.p-grow{grid-column:1 / -1;display:grid;gap:var(--space-5);min-width:0}
.p-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--white);border:var(--line);border-radius:var(--r-panel);box-shadow:var(--drop-lg);overflow:hidden;font-variant-numeric:tabular-nums}
.p-table caption{caption-side:top;padding:0 0 var(--space-4);text-align:left}
.p-table caption b{display:block;font:500 clamp(1.35rem,1.05rem + 1vw,1.75rem)/1.35 var(--font-display)}
.p-table-sub{display:block;margin-top:4px;font-size:var(--text-small);color:var(--navy)}
.p-table th,.p-table td{padding:14px;border-bottom:1.5px dotted var(--navy);text-align:left;vertical-align:top}
/* A table does not clip its cells to its rounded border, so the corner cells carry the curve themselves. */
/* 981-1180 px (Ice): tighter cells; the second lines still wrap, but only between their phrases (example 4's are long). */
@media (min-width:981px) and (max-width:1180px){.p-table th,.p-table td{padding:12px 10px}}
@media (min-width:981px){
  .p-table tbody tr:last-child>*{border-bottom:0}
  .p-table thead th:first-child{border-top-left-radius:calc(var(--r-panel) - 1.5px)}
  .p-table thead th:last-child{border-top-right-radius:calc(var(--r-panel) - 1.5px)}
  .p-table tbody tr:last-child>:first-child{border-bottom-left-radius:calc(var(--r-panel) - 1.5px)}
  .p-table tbody tr:last-child>:last-child{border-bottom-right-radius:calc(var(--r-panel) - 1.5px)}
}
.p-table thead th{background:var(--rose-soft);border-bottom:var(--line);font:500 .88rem/1.4 var(--font-display)}
.p-table tbody th{font:500 1rem/1.4 var(--font-display);white-space:nowrap}
.p-table td:nth-child(n+4),.p-table thead th:nth-child(n+4){text-align:right}
.p-val{display:block;font:500 1.05rem/1.45 var(--font-display);white-space:nowrap}
.p-val small{display:block;margin-top:2px;font:400 .8rem/1.5 var(--font-body);color:var(--muted);white-space:normal}
.p-sum{background:var(--surface)}
.p-sum .p-val{font-size:1.25rem;font-weight:600;color:var(--rose-ink)}
.p-row-top>*{background:var(--ink);color:var(--white)}
.p-row-top .p-val small{color:var(--rose-soft)}
.p-row-top .p-sum .p-val{color:var(--rose-soft)}
.p-notes{display:grid;gap:8px;max-width:62rem;font-size:var(--text-small);line-height:1.7}
.p-notes li{position:relative;padding-left:22px}
.p-notes li::before{content:"";position:absolute;left:3px;top:.62em;width:9px;height:9px;border-radius:50%;background:var(--cyan);border:1.5px solid var(--ink)}
/* Example 4 (Pngoung, 28 Sep: a realistic ฿30,000-a-month case) beside why shops keep using น้องเก้า: the plan's months
   as bars (the widths are each month over month 12), then the true reasons shops stay, and who looks after them. */
.p-grow-pair{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,2.5vw,36px);align-items:start}
.p-goal{padding:clamp(20px,2.6vw,32px);border:var(--line);border-radius:var(--r-panel);background:var(--white);box-shadow:var(--drop-lg)}
.p-goal-tag{display:inline-block;margin-bottom:var(--space-3);padding:3px 14px;border:var(--line);border-radius:var(--r-pill);background:var(--rose);font:500 .9rem/1.5 var(--font-display)}
.p-goal h3{font:600 clamp(1.3rem,1.05rem + 1.1vw,1.85rem)/1.35 var(--font-display);font-variant-numeric:tabular-nums}
.p-goal-sum{margin-top:6px;font-size:var(--text-small);color:var(--navy);font-variant-numeric:tabular-nums}
.p-goal-shops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:var(--space-5)}
.p-goal-shops li{display:grid;align-content:start;gap:4px;padding:12px 14px;border:1.5px dashed var(--navy);border-radius:var(--r-control);background:var(--surface);font-size:.95rem;line-height:1.6}
.p-goal-shops b{font:500 1rem/1.4 var(--font-display);color:var(--rose-ink)}
.p-goal-plan{margin-top:var(--space-5);line-height:1.7}
.p-months{display:grid;gap:10px;margin-top:var(--space-4);font-variant-numeric:tabular-nums}
.p-months li{display:grid;grid-template-columns:9.5em minmax(0,1fr) auto;align-items:center;gap:12px}
.p-month{font-size:.9rem;color:var(--navy);white-space:nowrap}
.p-bar{position:relative;height:14px;border-radius:var(--r-pill);background:var(--rose-soft);overflow:hidden}
.p-bar::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--w) * 100%);border-radius:inherit;background:var(--rose-deep)}
.p-months b{font:500 1rem/1.4 var(--font-display);white-space:nowrap}
.p-months li:last-child b{font-weight:600;color:var(--rose-ink)}
.p-goal-notes{display:grid;gap:6px;margin-top:var(--space-5);padding-top:var(--space-4);border-top:1.5px dotted var(--navy);font-size:var(--text-small);line-height:1.7}
.p-goal-notes li{position:relative;padding-left:18px}
.p-goal-notes li::before{content:"";position:absolute;left:2px;top:.66em;width:7px;height:7px;border-radius:50%;background:var(--rose-deep)}
.p-why{padding:clamp(20px,2.6vw,32px);border:1.5px dashed var(--navy);border-radius:var(--r-panel);background:rgb(255 255 255 / .6)}
.p-why h3{font:500 clamp(1.2rem,1rem + .8vw,1.5rem)/1.35 var(--font-display)}
.p-why-list{display:grid;gap:14px;margin-top:var(--space-4)}
.p-why-list li{position:relative;padding-left:36px;line-height:1.65}
.p-why-list li::before{content:"✓";position:absolute;left:0;top:.1em;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--cyan);border:1.5px solid var(--ink);color:var(--ink);font-weight:700;font-size:.8rem}
.p-why-list b{display:block;font:500 1.02rem/1.45 var(--font-display)}
.p-care{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1.5px dotted var(--navy);line-height:1.75}
.p-care a{font-weight:700}

/* Money path: four numbered steps on a line. */
.p-flow{padding:var(--space-section) var(--gutter);background:var(--white)}
.p-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.6vw,36px);max-width:1180px;margin:0 auto}
.p-steps li{position:relative;display:grid;align-content:start;gap:10px;padding-top:8px}
.p-steps li:not(:last-child)::after{content:"";position:absolute;left:52px;right:-18px;top:25px;border-top:2px dashed var(--navy);opacity:.45}
.p-steps .beat-no{width:40px;height:40px;font-size:1.05rem}
.p-steps h3{font-size:1.2rem}

/* Money and tax: the one deep-ink room on this page. */
.p-paper{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-7) clamp(40px,6vw,112px);align-items:start;padding:var(--space-section) var(--gutter);background:var(--ink);color:var(--surface)}
.p-paper :focus-visible{outline-color:var(--cyan)}
.p-paper h2{color:var(--white)}
.p-paper-tax p{margin-top:var(--space-5);max-width:var(--measure);font-size:1.1rem;line-height:1.9;color:var(--rose-soft)}
.p-paper-list h3{color:var(--white);margin-bottom:var(--space-4)}
.p-checks{display:grid;gap:12px}
.p-checks li{position:relative;padding-left:36px;line-height:1.8}
.p-checks li::before{content:"✓";position:absolute;left:0;top:.1em;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--rose);color:var(--ink);font-weight:700;font-size:.85rem}
.p-no-id{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px dashed rgb(254 200 212 / .5);color:var(--rose-soft);max-width:36em}

.p-closer .cta-row{margin-top:0}
.p-closer .closer-copy p{margin-bottom:var(--space-5)}

@media (prefers-reduced-motion:no-preference){
  .p-hero-copy>*{animation:rise 700ms var(--ease-out) both}
  .p-hero-copy>:nth-child(2){animation-delay:70ms}.p-hero-copy>:nth-child(3){animation-delay:160ms}.p-hero-copy>:nth-child(4){animation-delay:240ms}.p-hero-copy>:nth-child(5){animation-delay:300ms}
  .p-hero .scan-mark{animation:lock-on 620ms 520ms var(--ease-out) both}
  .p-hero .scan-mark::after{animation:sweep 1100ms 1050ms cubic-bezier(.45,0,.55,1) both}
  .p-level{transition:transform 200ms var(--ease-out)}
  .p-level:hover{transform:translateY(-4px)}
}
@media (max-width:1240px){.p-sticker-a{left:-12%}.p-sticker-b{right:-8%}.p-sticker-c{left:-16%}}
@media (max-width:1080px){
  .p-grow-pair{grid-template-columns:minmax(0,1fr)}
  .p-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--space-6)}
  .p-steps li:nth-child(2)::after{display:none}
}
@media (max-width:960px){
  .p-track{grid-template-columns:1fr;max-width:34rem}
  .p-track::before{left:62px;right:auto;top:40px;bottom:40px;border-top:0;border-left:2px dashed var(--navy)}
  .p-level:nth-child(2),.p-level:nth-child(3){margin-top:0}
}
/* Seven columns need about 815 px: below that, one ticket per example. */
@media (max-width:980px){
  /* One ticket per example: the example and its shops on top, the level under them, then label and figure per line. */
  .p-table,.p-table tbody{display:block}
  .p-table{border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
  .p-table caption{display:block}
  .p-table thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .p-table tbody{display:grid;gap:var(--space-5)}
  .p-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;padding:18px 20px 8px;border:var(--line);border-radius:var(--r-card);background:var(--white);box-shadow:var(--drop)}
  .p-table tbody tr>*{padding:0;border:0;background:none}
  .p-table tbody th{justify-self:start;padding:2px 14px;border:var(--line);border-radius:var(--r-pill);background:var(--peach);color:var(--ink);font-size:.9rem}
  .p-table tbody td{grid-column:1 / -1;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1.5px dotted var(--navy);border-radius:0;text-align:right}
  .p-table tbody td::before{content:attr(data-label);content:attr(data-label) / "";flex:none;max-width:48%;font:400 .95rem/1.5 var(--font-body);text-align:left}
  .p-table tbody td:nth-of-type(1){grid-column:2;grid-row:1;padding:0;border:0}
  .p-table tbody td:nth-of-type(1)::before,.p-table tbody td:nth-of-type(2)::before{content:none}
  .p-table tbody td:nth-of-type(1) .p-val{font-size:1.15rem}
  .p-table tbody td:nth-of-type(2){justify-content:flex-start;margin-top:14px;text-align:left}
  .p-table tbody td:last-child{border-bottom:0}
  .p-sum .p-val{font-size:1.35rem}
  .p-table tbody .p-row-top{background:var(--ink);border-color:var(--ink);box-shadow:var(--drop-lg);color:var(--white)}
  .p-table tbody .p-row-top td{border-bottom-color:rgb(255 255 255 / .35)}
}
@media (max-width:860px){
  .p-film{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "card" "credit";row-gap:var(--space-6)}
  .p-film-card{justify-self:stretch;max-width:none}
  .p-film-card .film-card-screen{rotate:-.6deg}
  .p-hero{grid-template-columns:1fr;align-items:start}
  .p-hero-copy{padding-bottom:0}
  .p-stage{width:min(58vw,250px);margin:var(--space-6) auto 0}
  .p-sticker{font-size:.84rem;padding:6px 12px;white-space:normal;max-width:9.5em}
  .p-sticker-a{left:-14%;top:8%}.p-sticker-b{right:-16%;top:38%}.p-sticker-c{left:-18%;top:66%}
  .p-example,.p-paper{grid-template-columns:1fr}
  .p-receipt{transform:none}
}
@media (max-width:560px){
  .p-steps{grid-template-columns:1fr}
  .p-steps li::after{display:none}
  .p-goal-shops{grid-template-columns:minmax(0,1fr)}
  .p-months li{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}
  .p-bar{grid-column:1 / -1;grid-row:2}
  .p-film-card .film-play{left:12px;bottom:12px;width:54px;height:54px}
  .p-film-card .film-play::before{border-width:10px 0 10px 16px;margin-left:5px}
}