/* Hallmark · macrostructure: Shopee Affiliates one screen (studied) · tone: playful-utilitarian
 * theme: studied-DNA (source: affiliate.shopee.co.id, read 2026-10-19) in JarSave tokens: lime band, indigo button
 * nav: brand + program name + one outlined button · footer: one dark band · motion: the landing's earn scene only
 * pre-emit critique: P4 H5 E4 S4 R5 V4 */
/* affiliate.jarsave.com on top of the landing's site.css and art.css (copied here by tools/id-site/build.py, as for
 * id.jarsave.com): only what the program pages add. Every colour and font is one of the landing's tokens. */

[hidden] { display: none !important; } /* the form, its rate fields and the thank-you are grids: hidden must still win */

/* "Masuk" on the terms, form and 404 headers. */
.signin { font: 800 0.85rem/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); text-decoration: none; white-space: nowrap; }
.signin:hover { color: var(--color-indigo); }
.k-line-indigo { fill: none; stroke: var(--color-indigo); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.k-play { fill: var(--color-paper); }

/* The program page, one screen as the reference: header, the band, two cards, the dark footer. */
.one { min-height: 100svh; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; }
.one main { display: contents; }
.bar { border-bottom: 2px solid var(--color-hairline); }
.bar .wrap { display: flex; align-items: center; gap: var(--space-md); height: 64px; }
.bar .prog { padding-left: var(--space-md); border-left: 2px solid var(--color-hairline); font: 800 1.05rem/1.2 var(--font-display); color: var(--color-slate); white-space: nowrap; }
.bar .btn { margin-left: auto; }

.band { background: var(--color-lime); }
.band .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-xl); padding-block: var(--space-xl); }
.band .scene { width: min(420px, 100%); height: auto; justify-self: center; }
.band .k-ground { fill: var(--color-lime-edge); fill-opacity: 0.35; }
.pitch h1 { margin: 0 0 var(--space-sm); font: 900 clamp(1.75rem, 2vw + 1rem, 2.4rem)/1.15 var(--font-display); color: var(--color-indigo-deep); text-wrap: balance; overflow-wrap: anywhere; }
.pitch p { margin: 0 0 var(--space-lg); font: 700 clamp(1.1rem, 0.8vw + 0.9rem, 1.4rem)/1.35 var(--font-display); color: var(--color-slate); }
.btn.ink { min-width: min(260px, 100%); background: var(--color-indigo); color: var(--color-paper); box-shadow: 0 var(--edge) 0 var(--color-indigo-deep); }
.btn.ink:active { box-shadow: 0 0 0 var(--color-indigo-deep); }

.ways { align-self: center; padding-block: var(--space-xl); }
.ways .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; gap: var(--space-xl); }
.way { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--space-md); align-items: start; padding: var(--space-lg); border-radius: 16px; background: var(--color-row); }
.way svg { width: 48px; height: 48px; }
.way h2 { margin: 0 0 4px; font: 900 1.05rem/1.3 var(--font-display); color: var(--color-slate); letter-spacing: 0; }
.way p { margin: 0 0 6px; font-size: var(--text-small); color: var(--color-muted); }
.way a { font: 800 0.85rem/1 var(--font-display); color: var(--color-indigo); text-decoration: none; } /* lime ink is 4.4:1 on the grey card */
.way a:hover { text-decoration: underline; }

footer.dark { background: var(--color-indigo-deep); color: var(--color-paper); padding: var(--space-lg) 0; }
footer.dark .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm) var(--space-lg); font-size: var(--text-small); font-weight: 600; }
footer.dark nav { display: flex; flex-wrap: wrap; gap: 4px 0; }
footer.dark nav a { color: var(--color-paper); text-decoration: none; padding: 0 10px; border-left: 1px solid var(--color-indigo-light); }
footer.dark nav a:first-child { padding-left: 0; border-left: 0; }
footer.dark nav a:hover { text-decoration: underline; }

@media (max-width: 760px) { /* a phone keeps the one screen: smaller picture, the cards' link on their text line */
  .bar .prog { display: none; }
  .bar .wrap { height: 56px; }
  .band .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); padding-block: var(--space-sm) var(--space-lg); text-align: center; }
  .band .scene { width: min(180px, 48%); }
  .pitch p { margin-bottom: var(--space-md); }
  .ways { padding-block: var(--space-md); }
  .ways .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .way { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 12px var(--space-md); }
  .way svg { width: 36px; height: 36px; }
  .way p { display: inline; margin: 0 6px 0 0; }
  footer.dark { padding: var(--space-md) 0; }
  footer.dark nav { gap: 4px 14px; }
  footer.dark nav a { padding: 0; border-left: 0; }
}

/* Terms, 404 and the form: one column, as jarsave.com/terms. */
.doc { width: min(680px, 100% - 2 * var(--space-lg)); margin: var(--space-2xl) auto var(--space-3xl); }
.doc h1 { font: 900 var(--text-h2)/1.08 var(--font-display); color: var(--color-indigo); margin: 0 0 var(--space-md); overflow-wrap: anywhere; }
.doc h2 { font-size: 1.35rem; margin: var(--space-xl) 0 var(--space-sm); }
.doc p, .doc li { margin: 0; color: var(--color-muted); }
.doc ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.doc .lede { margin-bottom: var(--space-xl); }
.doc a { color: var(--color-indigo); font-weight: 700; }

/* The application (owner, 2026-10-19: "a tab and tracking progress of each tab"): a heading, a progress bar, the
 * five tabs (done ones lime with a tick, the open one indigo), one tab's questions, then Kembali / Lanjut. */
.steps-page { min-height: 100svh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.apply-wrap { width: min(640px, 100% - 2 * var(--space-lg)); margin: var(--space-xl) auto var(--space-2xl); }
.apply-wrap h1 { margin: 0 0 4px; font: 900 clamp(1.5rem, 1.6vw + 1rem, 2rem)/1.2 var(--font-display); color: var(--color-indigo-deep); }
.count { margin: 0 0 var(--space-sm); font: 800 0.85rem/1 var(--font-display); color: var(--color-muted); }
.meter { height: 8px; margin-bottom: var(--space-md); border-radius: 99px; background: var(--color-row); overflow: hidden; }
.meter i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--color-lime-edge); transition: width var(--dur-mid) var(--ease-out); }
.tabs { display: flex; gap: 6px; margin: 0 0 var(--space-xl); padding: 0; list-style: none; }
.tabs li { flex: 1 1 0; min-width: 0; }
.tabs button { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px; border: 2px solid var(--color-hairline); border-radius: 12px;
  background: var(--color-paper); font: 800 0.8rem/1.2 var(--font-display); color: var(--color-muted); text-align: left; cursor: pointer; }
.tabs span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabs b { flex: none; position: relative; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-row); font-size: 0.75rem; }
.tabs button:not(:disabled):hover { border-color: var(--color-indigo-light); }
.tabs button:disabled { cursor: default; opacity: 0.6; }
.tabs [data-state="now"] { border-color: var(--color-indigo); color: var(--color-indigo); }
.tabs [data-state="now"] b { background: var(--color-indigo); color: var(--color-paper); }
.tabs [data-state="done"] { color: var(--color-slate); }
.tabs [data-state="done"] b { background: var(--color-lime); color: transparent; }
.tabs [data-state="done"] b::after { content: "\2713"; position: absolute; color: var(--color-slate); }
@media (max-width: 640px) { .tabs span { display: none; } .tabs li:has([data-state="now"]) { flex: 3 1 0; } .tabs [data-state="now"] span { display: inline; } }

.apply { display: grid; gap: var(--space-xl); }
.step { display: grid; gap: var(--space-lg); min-width: 0; }
.step h2 { margin: 0; font: 900 1.35rem/1.2 var(--font-display); color: var(--color-slate); letter-spacing: 0; }
.step > .hint { margin: -12px 0 0; font-size: var(--text-small); color: var(--color-muted); }
#accountFields, #insightFields, #rateFields { display: grid; gap: var(--space-lg); }
#rateFields > .label { margin: 0 0 -12px; font: 900 1.05rem/1.3 var(--font-display); color: var(--color-slate); }
.step > .err { margin: 0; font-size: var(--text-small); font-weight: 700; color: var(--color-alert); }

/* Tab 2: the four kinds of creator as cards, lime when picked. */
.kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.kind { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: var(--space-md);
  border: 2px solid var(--color-hairline); border-radius: 16px; background: var(--color-paper); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.kind input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.kind svg { width: 44px; height: 44px; padding: 9px; border-radius: 12px; background: var(--color-row); fill: none; stroke: var(--color-indigo); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kt b { display: block; font: 900 1rem/1.25 var(--font-display); color: var(--color-slate); }
.kt small { font-size: var(--text-small); color: var(--color-muted); }
.kind:hover { border-color: var(--color-indigo-light); }
.kind:has(input:checked) { border-color: var(--color-lime-edge); background: var(--color-lime-wash); }
.kind:has(input:checked) svg { background: var(--color-lime); }
.kind:has(input:focus-visible) { outline: 3px solid var(--color-indigo); outline-offset: 2px; }
.kinds[aria-invalid="true"] .kind { border-color: var(--color-alert); }
@media (max-width: 520px) { .kinds { grid-template-columns: minmax(0, 1fr); } }

.nav { display: flex; gap: var(--space-md); }
.nav #nextBtn { margin-left: auto; min-width: min(220px, 100%); }
.apply > .note { margin: -16px 0 0; font-size: var(--text-small); color: var(--color-muted); text-align: right; }
.apply > .note.error { color: var(--color-alert); font-weight: 700; }
.apply > .note:empty { display: none; }
.field { display: grid; gap: 6px; min-width: 0; }
.field > label, .field > .label { font: 800 0.95rem/1.3 var(--font-display); color: var(--color-slate); }
.field .opt { font-weight: 700; color: var(--color-muted); }
.field .hint { margin: 0; font-size: var(--text-small); color: var(--color-muted); }
.field .err { margin: 0; font-size: var(--text-small); font-weight: 700; color: var(--color-alert); }
.apply input:not([type="checkbox"]):not([type="radio"]), .apply select {
  width: 100%; min-height: 54px; border-radius: 16px; border: 2px solid var(--color-hairline); padding: 0 18px;
  font: 600 1rem var(--font-body); color: var(--color-slate); background: var(--color-row);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.apply input:hover, .apply select:hover { border-color: var(--color-indigo-light); }
.apply input::placeholder { color: var(--color-muted); opacity: 0.55; } /* examples, never mistaken for an answer */
.apply input:focus-visible, .apply select:focus-visible { outline: none; border-color: var(--color-indigo); background: var(--color-paper); }
.apply [aria-invalid="true"] { border-color: var(--color-alert) !important; background: var(--color-paper) !important; }
.apply input:disabled, .apply select:disabled { opacity: 0.55; cursor: not-allowed; }
.prefix { position: relative; }
.prefix > span { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font: 700 1rem var(--font-body); color: var(--color-muted); pointer-events: none; }
.prefix > input { padding-left: 38px !important; }
.prefix.rp > input { padding-left: 46px !important; }

/* Choices as pressable pills: the landing's buttons, smaller, lime when picked. */
.choices { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.choices label { position: relative; }
.choices input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choices span { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: var(--radius-button);
  border: 2px solid var(--color-hairline); background: var(--color-paper); font: 800 0.9rem/1.2 var(--font-display); color: var(--color-slate);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.choices label:hover span { border-color: var(--color-indigo-light); }
.choices input:focus-visible + span { outline: 3px solid var(--color-indigo); outline-offset: 2px; }
.choices input:checked + span { background: var(--color-lime); border-color: var(--color-lime-edge); }
.choices[aria-invalid="true"] span { border-color: var(--color-alert); }

.check { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; font-weight: 600; color: var(--color-slate); cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--color-indigo); cursor: pointer; }
.check a { color: var(--color-indigo); font-weight: 700; }
.done { display: grid; justify-items: center; gap: var(--space-md); padding-block: var(--space-xl); text-align: center; }
.done p { margin: 0; max-width: 28em; color: var(--color-muted); font: 500 var(--text-body)/1.45 var(--font-body); }
.done:focus { outline: none; } /* focused only so a screen reader reads it */
.done b { font: 900 1.6rem/1.2 var(--font-display); color: var(--color-indigo); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* the field only a bot fills */