/* ============================================================
   Sync — marketing pages layer
   Careers · Rewards · Referrals · Ambassadors · Business ·
   Affiliate · Blog · Newsroom. Built on the tokens in style.css.
   Accent policy matches index.html / switch.html: neutral greys
   for labels/pills/icons; coral is reserved for buttons and links.
   ============================================================ */

/* ---- Hero ---- */
.mkt-hero{padding:92px 0 60px;text-align:center}
.mkt-hero .wrap{max-width:920px}
.eyebrow-pill{display:inline-flex;align-items:center;gap:8px;background:#ececec;
  color:#3a3a3a;font-weight:600;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:8px 16px;border-radius:999px;margin-bottom:24px}
.mkt-hero h1{font-family:var(--font-head);font-weight:400;font-size:clamp(2.8rem,6vw,5rem);
  line-height:.98;letter-spacing:-0.03em;margin-bottom:22px}
.mkt-lead{font-size:clamp(1.05rem,2vw,1.28rem);line-height:1.55;color:#3a3a3a;
  max-width:60ch;margin:0 auto 32px}
.mkt-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.mkt-hero .hero-note{margin-top:20px;color:var(--muted);font-size:.9rem}

/* ---- Sections ---- */
.mkt-sec{padding:78px 0}
.mkt-sec.tight{padding:52px 0}
.mkt-sec.soft{background:var(--card)}
.mkt-sec.ink{background:var(--ink);color:#fff}
.sec-head{text-align:center;max-width:740px;margin:0 auto 46px}
.sec-head.left{text-align:left;margin-left:0}
.sec-kicker{display:block;color:var(--muted);font-weight:600;font-size:.85rem;
  letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.mkt-sec.ink .sec-kicker{color:#b8b8b8}
.sec-head h2{font-family:var(--font-head);font-weight:400;font-size:clamp(2rem,4vw,3rem);
  letter-spacing:-0.02em;line-height:1.04;margin-bottom:16px}
.sec-head p{color:var(--muted);font-size:1.08rem;line-height:1.55}
.mkt-sec.ink .sec-head p{color:#b8b8b8}

/* ---- Grids ---- */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* ---- Value / feature cards ---- */
.vcard{background:var(--card);border-radius:22px;padding:34px 30px}
.mkt-sec.soft .vcard{background:#fff;border:1px solid var(--line)}
.vcard .ic{width:52px;height:52px;border-radius:15px;background:#fff;display:flex;
  align-items:center;justify-content:center;margin-bottom:20px}
.mkt-sec.soft .vcard .ic{background:var(--card)}
.vcard h3{font-weight:600;font-size:1.24rem;margin-bottom:10px;letter-spacing:-0.01em}
.vcard p{color:var(--muted);line-height:1.55;font-size:.98rem}
.vcard.dark{background:var(--ink);color:#fff}
.vcard.dark p{color:#bcbcbc}
.vcard.dark .ic{background:rgba(255,255,255,.08)}

/* ---- Perks (icon + copy row) ---- */
.perk{display:flex;gap:16px;align-items:flex-start}
.perk .ic{flex:none;width:44px;height:44px;border-radius:12px;background:#ececec;
  color:#3a3a3a;display:flex;align-items:center;justify-content:center}
.perk h4{font-weight:600;font-size:1.08rem;margin-bottom:5px}
.perk p{color:var(--muted);font-size:.95rem;line-height:1.5}

/* ---- Numbered steps ---- */
.steps{display:grid;gap:22px}
.step{display:flex;gap:20px;align-items:flex-start}
.step .n{flex:none;width:44px;height:44px;border-radius:999px;background:var(--ink);color:#fff;
  font-family:var(--font-head);font-size:1.35rem;display:flex;align-items:center;justify-content:center}
.mkt-sec.ink .step .n{background:#fff;color:var(--ink)}
.step h3{font-weight:600;font-size:1.2rem;margin-bottom:6px}
.step p{color:var(--muted);line-height:1.55}
.mkt-sec.ink .step p{color:#bcbcbc}

/* ---- Stat band ---- */
.stat-band{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;
  background:var(--ink);color:#fff;border-radius:28px;padding:56px 40px}
.stat-band .num{font-family:var(--font-head);font-size:clamp(2.4rem,4vw,3.4rem);line-height:1}
.stat-band .lbl{color:#b8b8b8;margin-top:10px;font-size:.95rem}

/* ---- Roles list ---- */
.roles{max-width:920px;margin:0 auto}
.role-group{margin-bottom:44px}
.role-group h3{font-weight:600;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px;padding:0 8px}
.role{display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:24px 8px;border-top:1px solid var(--line);text-decoration:none;color:inherit;
  transition:padding .25s ease,background .25s ease}
.role:last-child{border-bottom:1px solid var(--line)}
.role:hover{padding-left:18px;padding-right:18px;background:var(--card);border-radius:14px}
.role .r-main h4{font-weight:600;font-size:1.2rem}
.role .r-main .meta{color:var(--muted);font-size:.95rem;margin-top:4px}
.role .r-arrow{flex:none;color:var(--ink);font-size:1.4rem;transition:transform .25s ease}
.role:hover .r-arrow{transform:translateX(4px)}

/* ---- Reward tiers ---- */
.tier{background:var(--card);border-radius:24px;padding:36px 30px;display:flex;flex-direction:column}
.tier.feat{background:var(--ink);color:#fff}
.tier .tname{font-family:var(--font-head);font-size:1.7rem;margin-bottom:4px}
.tier .pts{color:var(--ink);font-weight:600;margin-bottom:22px}
.tier.feat .pts{color:#fff}
.tier ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.tier li{display:flex;gap:10px;align-items:flex-start;color:#3a3a3a;font-size:.98rem;line-height:1.45}
.tier.feat li{color:#dcdcdc}
.tier li svg{flex:none;margin-top:3px;color:var(--ink)}
.tier.feat li svg{color:#fff}

/* ---- Ways to earn ---- */
.way{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 24px;
  display:flex;gap:14px;align-items:center}
.way .ic{flex:none;width:40px;height:40px;border-radius:11px;background:#ececec;
  color:#3a3a3a;display:flex;align-items:center;justify-content:center}
.way h4{font-weight:600;font-size:1rem}
.way .pts{margin-left:auto;color:var(--ink);font-weight:600;white-space:nowrap;font-size:.95rem}

/* ---- Split media / text ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.split+.split{margin-top:64px}
.split .media{aspect-ratio:4/3;border-radius:26px;
  background:linear-gradient(135deg,#f0efe9 0%,#e7e6de 100%);position:relative;overflow:hidden}
.split .media.ink{background:linear-gradient(135deg,#1c1c1c 0%,#2b2b2b 100%)}
.split.rev .txt{order:2}
.split h2{font-family:var(--font-head);font-weight:400;font-size:clamp(1.8rem,3.4vw,2.6rem);
  letter-spacing:-0.02em;line-height:1.05;margin-bottom:16px}
.split p{color:var(--muted);font-size:1.05rem;line-height:1.6;margin-bottom:16px}
.split .mini{display:grid;gap:12px;margin-top:22px}
.split .mini li{display:flex;gap:10px;align-items:flex-start;list-style:none;color:#3a3a3a}
.split .mini svg{flex:none;margin-top:4px;color:var(--ink)}

/* ---- Articles (blog) ---- */
.article{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:20px;overflow:hidden;text-decoration:none;color:inherit;
  transition:box-shadow .25s ease,transform .25s ease}
.article:hover{box-shadow:0 16px 40px rgba(0,0,0,.08);transform:translateY(-3px)}
.article .thumb{aspect-ratio:16/10;position:relative}
.article .cat{position:absolute;top:14px;left:14px;background:rgba(255,255,255,.92);
  color:#3a3a3a;font-weight:600;font-size:.75rem;letter-spacing:.04em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px}
.article .abody{padding:24px;display:flex;flex-direction:column;flex:1}
.article h3{font-weight:600;font-size:1.2rem;line-height:1.25;margin-bottom:10px;letter-spacing:-0.01em}
.article p{color:var(--muted);font-size:.96rem;line-height:1.5;margin-bottom:16px}
.article .read{margin-top:auto;color:#8a8a8a;font-size:.85rem}

/* featured post */
.feature{display:grid;grid-template-columns:1.08fr 1fr;background:#fff;border:1px solid var(--line);
  border-radius:26px;overflow:hidden;margin-bottom:44px}
.feature .thumb{aspect-ratio:auto;min-height:340px;position:relative}
.feature .abody{padding:48px 44px;display:flex;flex-direction:column;justify-content:center}
.feature .cat{position:static;display:inline-block;align-self:flex-start;margin-bottom:18px;background:#ececec}
.feature h2{font-family:var(--font-head);font-weight:400;font-size:clamp(1.8rem,3vw,2.6rem);
  line-height:1.05;letter-spacing:-0.02em;margin-bottom:16px}
.feature p{color:var(--muted);font-size:1.05rem;line-height:1.6;margin-bottom:22px}

/* thumb gradient palettes (decorative image placeholders) */
.th-1{background:linear-gradient(135deg,#f3d9d0,#e8a68f)}
.th-2{background:linear-gradient(135deg,#d7e3dd,#8fb3a3)}
.th-3{background:linear-gradient(135deg,#dcdce6,#9a9ab8)}
.th-4{background:linear-gradient(135deg,#efe6cf,#cbb583)}
.th-5{background:linear-gradient(135deg,#e6dbe8,#b193b8)}
.th-6{background:linear-gradient(135deg,#1c1c1c,#3a3a3a)}
.th-ink{background:linear-gradient(135deg,#1c1c1c,#333)}

/* ---- Chips (blog filter) ---- */
.chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:44px}
.chip-btn{background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:9px 20px;font-weight:500;font-size:.95rem;cursor:pointer;color:var(--ink);
  font-family:inherit;transition:background .2s ease,color .2s ease}
.chip-btn.on,.chip-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---- Press list ---- */
.press{max-width:880px;margin:0 auto}
.press-item{display:grid;grid-template-columns:150px 1fr auto;gap:28px;padding:28px 8px;
  border-top:1px solid var(--line);align-items:baseline}
.press-item:last-child{border-bottom:1px solid var(--line)}
.press-item .date{color:var(--muted);font-size:.92rem}
.press-item h3{font-weight:600;font-size:1.18rem;line-height:1.3;margin-bottom:6px}
.press-item p{color:var(--muted);font-size:.96rem;line-height:1.5}
.press-item .tag-min{color:var(--muted);font-weight:600;font-size:.82rem;letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap}

/* ---- Media logo / quote row ---- */
.logo-row{display:flex;flex-wrap:wrap;gap:24px 46px;justify-content:center;align-items:center}
.logo-row span{font-family:var(--font-head);font-size:1.6rem;color:#a0a0a0;letter-spacing:.01em}
.pquote{background:var(--card);border-radius:22px;padding:34px 32px}
.pquote blockquote{font-family:var(--font-head);font-size:1.4rem;line-height:1.25;
  letter-spacing:-0.01em;margin-bottom:16px}
.pquote cite{color:var(--muted);font-style:normal;font-size:.92rem;font-weight:500}

/* ---- CTA band ---- */
.cta-band{background:var(--ink);color:#fff;border-radius:34px;padding:78px 40px;text-align:center}
.cta-band.coral{background:var(--ink)}
.cta-band h2{font-family:var(--font-head);font-weight:400;font-size:clamp(2.2rem,4vw,3.4rem);
  letter-spacing:-0.02em;line-height:1.04;margin-bottom:16px}
.cta-band p{color:rgba(255,255,255,.85);max-width:54ch;margin:0 auto 30px;font-size:1.1rem;line-height:1.5}
.cta-band .mkt-cta .btn-outline{border-color:rgba(255,255,255,.5);color:#fff}
.cta-band .mkt-cta .btn-outline:hover{background:rgba(255,255,255,.1)}

/* ---- Callout card (media kit, reward highlight) ---- */
.callout{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;
  background:var(--card);border-radius:26px;padding:44px 44px}
.callout h3{font-family:var(--font-head);font-size:1.9rem;margin-bottom:8px}
.callout p{color:var(--muted);max-width:52ch;line-height:1.55}

/* ---- Accordion (reuse .acc-item) wrapper ---- */
.mkt-faq{max-width:760px;margin:0 auto}

/* ---- Newsletter form ---- */
.nl-form{display:flex;gap:10px;max-width:480px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.nl-form input{flex:1;min-width:220px;padding:15px 20px;border-radius:999px;border:none;
  font-family:inherit;font-size:1rem;color:var(--ink)}
.nl-form input:focus{outline:2px solid var(--ink);outline-offset:2px}

/* ---- Language pills ---- */
.taglist{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:920px;margin:0 auto}
.taglist span{background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:9px 18px;font-weight:500;font-size:.95rem}

/* ---- Order lookup form ---- */
.form-card{max-width:520px;margin:0 auto;background:var(--card);border-radius:24px;padding:40px}
.form-card .field{margin-bottom:20px}
.form-card label{display:block;font-weight:600;font-size:.92rem;margin:0 0 8px}
.form-card input{width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--line);
  font-family:inherit;font-size:1rem;background:#fff;color:var(--ink)}
.form-card input:focus{outline:2px solid var(--ink);outline-offset:1px}
.form-card .btn{width:100%}
.form-note{text-align:center;color:var(--muted);font-size:.95rem;margin:22px auto 0;max-width:44ch}

/* ---- Status ---- */
.status-banner{max-width:720px;margin:0 auto 32px;background:#e9f6ee;border:1px solid #bfe3cd;
  color:#1f7a4d;border-radius:16px;padding:18px 22px;text-align:center;font-weight:600}
.status-list{max-width:720px;margin:0 auto;border-top:1px solid var(--line)}
.status-row{display:flex;justify-content:space-between;align-items:center;padding:22px 8px;
  border-bottom:1px solid var(--line)}
.status-row .svc{font-weight:500}
.status-ok{display:inline-flex;align-items:center;gap:8px;color:#1f7a4d;font-weight:600;font-size:.92rem}
.status-ok .dot{width:9px;height:9px;border-radius:50%;background:#28a745}

/* ---- App store badges ---- */
.store-badges{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.store-badge{display:inline-flex;align-items:center;gap:11px;background:var(--ink);color:#fff;
  border-radius:14px;padding:12px 22px;text-decoration:none;min-width:190px}
.store-badge small{display:block;font-size:11px;opacity:.82;line-height:1.1}
.store-badge b{display:block;font-size:17px;line-height:1.2;font-weight:600}

/* ---- Sitemap ---- */
.sitemap-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;max-width:1100px;margin:0 auto}
.sitemap-cols h3{font-weight:600;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px}
.sitemap-cols a{display:block;color:var(--ink);text-decoration:none;padding:7px 0}
.sitemap-cols a:hover{text-decoration:underline}

/* ---- Product page (clean PDP) ---- */
.pdp2{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;padding-top:44px}
.pdp2 .media{position:sticky;top:104px;background:var(--card);border-radius:26px;aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.pdp2 .media img{width:80%;height:80%;object-fit:contain;mix-blend-mode:multiply}
.pdp2 .eyebrow-pill{margin-bottom:16px}
.pdp2 h1{font-family:var(--font-head);font-weight:400;font-size:clamp(2.4rem,4.5vw,3.6rem);
  letter-spacing:-0.02em;line-height:1;margin-bottom:12px}
.pdp2 .rating{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:.95rem;margin-bottom:22px}
.pdp2 .rating .s{color:#121212;letter-spacing:1px}
.pdp2 .price{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.pdp2 .price .now{font-size:2rem;font-weight:600}
.pdp2 .price .was{color:var(--muted);text-decoration:line-through;font-size:1.2rem;font-weight:400}
.pdp2 .price-note{color:var(--muted);font-size:.9rem;margin-bottom:26px}
.pdp2 .kfeat{list-style:none;padding:0;margin:0 0 28px;display:grid;gap:13px}
.pdp2 .kfeat li{display:flex;gap:10px;align-items:flex-start;color:#3a3a3a}
.pdp2 .kfeat svg{flex:none;margin-top:3px;color:var(--ink)}
.pdp2 .buyrow{display:flex;gap:12px;margin-bottom:22px}
.pdp2 .buyrow .btn{flex:1}
.pdp2 .reassure{display:flex;flex-wrap:wrap;gap:10px 20px;color:var(--muted);font-size:.9rem}
.pdp2 .reassure span{display:inline-flex;align-items:center;gap:7px}
.pdp2 .reassure svg{color:var(--ink)}
@media(max-width:820px){.pdp2{grid-template-columns:1fr;gap:26px;padding-top:24px}.pdp2 .media{position:static}}

/* ---- Spec table ---- */
.spec-table{width:100%;max-width:760px;margin:0 auto;border-collapse:collapse}
.spec-table th,.spec-table td{text-align:left;padding:16px 8px;border-bottom:1px solid var(--line);font-size:1rem}
.spec-table th{font-weight:500;width:38%;color:var(--muted)}

/* ---- Compare table ---- */
.compare-wrap{overflow-x:auto}
.compare-table{width:100%;border-collapse:collapse;font-size:.98rem}
.compare-table th,.compare-table td{padding:16px 14px;border-bottom:1px solid var(--line);text-align:center;vertical-align:middle}
.compare-table thead th{font-family:var(--font-head);font-weight:400;font-size:1.15rem;line-height:1.1}
.compare-table tbody th{text-align:left;font-weight:600;color:var(--muted);font-size:.9rem;white-space:nowrap}
.compare-table .price-cell{font-weight:600;font-size:1.1rem}
@media(max-width:720px){.compare-table{min-width:660px}}

/* ---- Plan / bundle cards ---- */
.plan{background:var(--card);border-radius:24px;padding:36px 30px;display:flex;flex-direction:column}
.plan.feat{background:var(--ink);color:#fff}
.plan .pname{font-family:var(--font-head);font-size:1.7rem;margin-bottom:4px}
.plan .pprice{font-size:1.5rem;font-weight:600;margin-bottom:4px}
.plan .pprice s{color:var(--muted);font-weight:400;font-size:1.05rem;margin-right:8px}
.plan.feat .pprice s{color:#9a9a9a}
.plan .psub{color:var(--muted);margin-bottom:22px;font-size:.95rem}
.plan.feat .psub{color:#bcbcbc}
.plan ul{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:12px}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:.98rem;color:#3a3a3a;line-height:1.45}
.plan.feat li{color:#dcdcdc}
.plan li svg{flex:none;margin-top:3px;color:var(--ink)}
.plan.feat li svg{color:#fff}
.plan .btn{margin-top:auto}

/* ---- Gift card ---- */
.giftcard{aspect-ratio:16/10;border-radius:22px;background:linear-gradient(135deg,#1c1c1c,#333);
  color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:32px}
.giftcard .gc-brand{font-family:var(--font-head);font-size:1.7rem}
.giftcard .gc-amt{font-size:2.6rem;font-weight:600;font-family:var(--font-head)}
.gc-amounts{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 24px}
.gc-amt-btn{border:1px solid var(--line);border-radius:12px;padding:12px 22px;font-weight:600;
  background:#fff;color:var(--ink);cursor:pointer;font-family:inherit;font-size:1rem;transition:.2s}
.gc-amt-btn.on,.gc-amt-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---- Illustrative note ---- */
.illus{text-align:center;color:#9a9a9a;font-size:.84rem;margin-top:34px;font-style:italic}

/* ---- Responsive ---- */
@media(max-width:980px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .feature{grid-template-columns:1fr}
  .feature .thumb{min-height:220px}
  .feature .abody{padding:36px 30px}
}
@media(max-width:820px){
  .split,.split.rev .txt{grid-template-columns:1fr;order:0}
  .split .media{order:-1}
  .callout{grid-template-columns:1fr;text-align:center}
  .stat-band{grid-template-columns:repeat(2,1fr);gap:34px 24px}
  .sitemap-cols{grid-template-columns:repeat(2,1fr);gap:32px}
}
@media(max-width:640px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .mkt-sec{padding:56px 0}
  .stat-band{grid-template-columns:1fr;gap:30px;padding:44px 28px}
  .mkt-cta{flex-direction:column}
  .mkt-cta .btn{width:100%}
  .press-item{grid-template-columns:1fr;gap:6px}
  .press-item .tag-min{margin-top:6px}
  .cta-band,.callout{padding:52px 26px}
  .role:hover{padding-left:8px;padding-right:8px}
  .sitemap-cols{grid-template-columns:1fr}
  .form-card{padding:30px 22px}
}