/* Mint SEO — SEO Content Writing page. Matches Figma board 428:2. */

/* ===== HERO (428:3) — dark panel in cream + SERP/Search Console artifact ===== */
.ct-hero { background: var(--page); padding: 10px 48px 0; }
.ct-hero__frame { max-width: 1312px; margin: 0 auto; background: radial-gradient(95% 130% at 92% 0%, #1c4f4a, #0a1f1c 55%), #0a1f1c; border-radius: 28px; overflow: hidden; box-shadow: 0 50px 100px -60px rgba(20,20,19,0.5); }
.ct-hero__in { display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; padding: clamp(30px, 3.4vw, 44px) clamp(40px, 4vw, 56px); color: #fff; }
.ct-hero__copy { max-width: 470px; min-width: 0; }
.ct-hero .eyebrow { font-size: 16px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint-light); margin: 0 0 16px; }
.ct-hero h1 { margin: 0; font-size: clamp(38px, 4.4vw, 54px); font-weight: 800; line-height: 1.03; letter-spacing: -0.03em; color: #fff; }
.ct-hero h1 em { font-style: normal; color: var(--mint-light); }
.ct-hero .sub { margin: 18px 0 0; font-size: 18px; line-height: 1.55; color: rgba(255,255,255,0.75); }
.ct-hero__ctas { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 28px; }
.ct-hero .btn { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; padding: 15px 24px; border-radius: 11px; text-decoration: none; transition: background 0.2s, transform 0.2s; }
.ct-hero .btn--mint { background: var(--mint-ink); color: #fff; } .ct-hero .btn--mint:hover { background: #35b0a7; transform: translateY(-2px); }
.ct-hero .btn--ghost { background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.2); } .ct-hero .btn--ghost:hover { background: rgba(255,255,255,0.14); }
.ct-art { position: relative; min-width: 0; }
.ct-serp { position: relative; z-index: 2; background: #fff; border-radius: 14px; padding: 18px; box-shadow: 0 40px 80px -40px rgba(0,0,0,0.6); color: var(--ink); }
.ct-serp__box { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 999px; padding: 11px 16px; font-size: 16px; color: var(--ink); margin-bottom: 16px; } .ct-serp__box .go { margin-left: auto; color: var(--mint-ink); }
.ct-serp__win { border-left: 3px solid var(--mint); padding: 2px 0 2px 14px; position: relative; margin-bottom: 16px; }
.ct-serp__win .rank { position: absolute; top: 0; right: 0; background: #1aa564; color: #fff; font-size: 13px; font-weight: 800; border-radius: 999px; padding: 2px 9px; }
.ct-serp__url { font-size: 15px; color: #3a7a44; }
.ct-serp__title { font-size: 17px; color: #1a4b8f; font-weight: 600; margin: 3px 0; line-height: 1.3; max-width: 32ch; }
.ct-serp__win .ct-serp__title { color: var(--mint-deep); }
.ct-serp__desc { font-size: 15px; color: var(--body); line-height: 1.4; }
.ct-serp__res { opacity: 0.55; } .ct-serp__res .ct-serp__title { color: #1a4b8f; }
.ct-gsc { position: relative; z-index: 3; margin: -74px 0 0 24px; width: auto; background: #fff; border-radius: 14px; padding: 14px 16px; box-shadow: 0 30px 60px -22px rgba(0,0,0,0.5); color: var(--ink); } /* overlaps the SERP card's dimmed competitor result (layered) */
.ct-gsc__hd { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 8px; } .ct-gsc__hd .dots { display: flex; gap: 4px; } .ct-gsc__hd .dots i { width: 7px; height: 7px; border-radius: 50%; } .ct-gsc__hd .dots i:nth-child(1) { background: #ef5b52; } .ct-gsc__hd .dots i:nth-child(2) { background: #f6b93b; } .ct-gsc__hd .dots i:nth-child(3) { background: #26a269; } .ct-gsc__hd .mo { margin-left: auto; font-size: 12px; color: var(--body); font-weight: 400; }
.ct-gsc b { font-size: 30px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; } .ct-gsc b em { font-style: normal; font-size: 14px; color: #1aa564; font-weight: 700; margin-left: 6px; }
.ct-gsc span { display: block; font-size: 13px; color: var(--body); margin-top: 2px; }
.ct-gsc svg { display: block; width: 100%; height: 44px; margin-top: 8px; }
@media (max-width: 980px) {
  .ct-hero { padding: 24px 22px 0; }
  .ct-hero__in { grid-template-columns: 1fr; gap: 40px; padding: 40px 24px; }
  .ct-hero__copy { max-width: none; }
  .ct-gsc { margin: 16px 0 0; } /* stack (no overlap) in the narrow mobile column */
}

/* ===== RANKINGS & TRAFFIC — rank tracker (431:2) ===== */
.ct-rank { background: #f3f4f2; }
.ct-rank__in { max-width: 1300px; margin: 0 auto; padding: clamp(56px, 6vw, 84px) 48px; }
.ct-rank__head { max-width: 660px; margin-bottom: 36px; }
.ct-rank__head .eyebrow { font-size: 16px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint-ink); margin: 0 0 14px; }
.ct-rank__head h2 { margin: 0; font-size: clamp(32px, 4.2vw, 50px); font-weight: 800; line-height: 1.03; letter-spacing: -0.03em; color: var(--ink); }
.ct-rank__head h2 em { font-style: normal; color: var(--mint); }
.ct-rank__head .sub { margin: 16px 0 0; font-size: 18px; line-height: 1.55; color: var(--body); }
.ct-rank__card { background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: 0 40px 90px -60px rgba(20,20,19,0.3); }
.ct-rank__hd { display: flex; align-items: center; gap: 10px; padding: 16px 24px; border-bottom: 1px solid #eef1ef; font-size: 16px; } .ct-rank__hd b { color: var(--ink); } .ct-rank__hd .site { color: var(--body); } .ct-rank__hd .days { margin-left: auto;  font-size: 14px; color: var(--body); }
.ct-rank__body { display: grid; grid-template-columns: 340px 1fr; }
.ct-rank__feat { background: linear-gradient(180deg, #eaf5f2, #fff); border-right: 1px solid #eef1ef; padding: 24px; min-width: 0; }
.ct-rank__feat .lbl { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--body);  }
.ct-rank__feat h3 { margin: 6px 0; font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1.15; }
.ct-rank__feat .vol { font-size: 15px; color: var(--body);  }
.ct-rank__feat .num { font-size: 56px; font-weight: 800; color: var(--ink); letter-spacing: -0.03em; margin-top: 12px; display: inline-block; } .ct-rank__feat .up { font-size: 15px; color: #1aa564; font-weight: 700; margin-left: 8px; }
.ct-rank__feat svg { display: block; width: 100%; height: 96px; margin-top: 6px; }
.ct-rank__feat .fl { fill: none; stroke: #0f3d37; stroke-width: 2.5; stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1.8s ease; }
.ct-rank__card.is-visible .ct-rank__feat .fl { stroke-dashoffset: 0; }
.ct-thead, .ct-trow { display: grid; grid-template-columns: 1fr 80px 120px 56px; align-items: center; gap: 14px; padding: 0 24px; }
.ct-thead { padding-top: 16px; padding-bottom: 12px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--body);  }
.ct-thead .r, .ct-trow .rk { justify-self: end; } .ct-thead .v { text-align: right; }
.ct-trow { padding-top: 15px; padding-bottom: 15px; border-top: 1px solid #eef1ef; }
.ct-trow .kw { font-size: 16px; font-weight: 700; color: var(--ink); min-width: 0; }
.ct-trow .vol { font-size: 15px; color: var(--body);  text-align: right; }
.ct-trow .spark svg { display: block; width: 100%; height: 26px; }
.ct-trow .rk { background: var(--mint-tint); color: var(--mint-deep); font-size: 14px; font-weight: 800; border-radius: 999px; padding: 4px 12px; }
.ct-rank__foot { display: flex; align-items: center; gap: 14px; background: linear-gradient(90deg, #0f3d37, #1c6f64); color: #fff; padding: 16px 24px; }
.ct-rank__foot .ic { width: 38px; height: 38px; border-radius: 9px; background: rgba(255,255,255,0.14); display: grid; place-items: center; font-size: 18px; flex: 0 0 auto; }
.ct-rank__foot b { color: #fff; } .ct-rank__foot span { color: rgba(255,255,255,0.82); }
@media (max-width: 900px) {
  .ct-rank__in { padding: 48px 22px; }
  .ct-rank__body { grid-template-columns: 1fr; }
  .ct-rank__feat { border-right: 0; border-bottom: 1px solid #eef1ef; }
  .ct-thead { display: none; }
  .ct-trow { grid-template-columns: 1fr auto; } .ct-trow .spark { display: none; } .ct-trow .vol { display: none; }
}

/* ===== READER-TO-CUSTOMER FUNNEL (620:2) ===== */
.ct-fun { background: var(--mint-tint); }
.ct-fun__in { max-width: 1300px; margin: 0 auto; padding: clamp(56px, 6vw, 84px) 48px; }
.ct-fun__head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 42px; }
.ct-fun__head .eyebrow { font-size: 16px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--mint-ink); margin: 0 0 14px; }
.ct-fun__head h2 { margin: 0; font-size: clamp(32px, 4.2vw, 50px); font-weight: 800; line-height: 1.03; letter-spacing: -0.03em; color: var(--ink); }
.ct-fun__head h2 em { font-style: normal; color: var(--mint); }
.ct-fun__head .sub { margin: 0; font-size: 18px; line-height: 1.55; color: var(--body); }
.ct-fun__grid { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; }
.ct-fun__col { min-width: 0; align-self: stretch; display: flex; flex-direction: column; }
.ct-fun__step { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 16px; font-weight: 700; color: var(--ink); }
.ct-fun__step .n { background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; font-size: 14px; font-weight: 800; color: var(--mint-deep); }
.ct-fun__conn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 18px; }
.ct-fun__conn span { font-size: 14px; color: var(--mint-deep); font-style: italic; white-space: nowrap; }
.ct-fun__conn .arrow { width: 64px; height: 0; border-top: 1.5px dashed var(--mint); position: relative; }
.ct-fun__conn .arrow::after { content: ""; position: absolute; right: -1px; top: -4px; border-top: 4px solid transparent; border-bottom: 4px solid transparent; border-left: 7px solid var(--mint); }
.ct-fun__card { background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 50px -40px rgba(20,20,19,0.3); flex: 1; display: flex; flex-direction: column; }
.ct-fc__bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #f6f7f6; border-bottom: 1px solid #eef1ef; font-size: 13px; color: var(--body); } .ct-fc__bar .dots { display: flex; gap: 4px; } .ct-fc__bar .dots i { width: 7px; height: 7px; border-radius: 50%; background: #d7dbd8; } .ct-fc__bar .u { margin-left: auto; font-size: 12px; color: var(--body); }
.ct-fc__body { padding: 18px; }
.ct-fc__body .sg { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mint-ink); }
.ct-fc__body h4 { margin: 6px 0 8px; font-size: 18px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.ct-fc__body p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--body); } .ct-fc__body p a { color: var(--mint-deep); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(48,159,151,0.4); }
.ct-fc__ph { background: #0a1f1c; color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 11px 16px; display: flex; align-items: center; gap: 8px; } .ct-fc__ph::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mint-light); }
.ct-fc__img { height: 120px; background: #e6e8e6; border-radius: 10px; margin: 16px; display: grid; place-items: center; position: relative; } .ct-fc__img .sq { width: 60px; height: 60px; border-radius: 8px; background: #d4d7d4; }
.ct-fc__cart { position: absolute; top: 10px; right: 10px; background: var(--mint-ink); color: #fff; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 10px; }
.ct-fc__pi { padding: 0 16px 16px; } .ct-fc__crumb { padding: 12px 16px 0; font-size: 13px; color: var(--body); } .ct-fc__crumb b { color: var(--ink); }
.ct-fc__pi h4 { margin: 0 0 4px; font-size: 18px; font-weight: 800; color: var(--ink); } .ct-fc__pi .st { color: #f0a91b; font-size: 13px; } .ct-fc__pi .st span { color: var(--body); } .ct-fc__pi .pr { font-size: 18px; font-weight: 800; color: var(--ink); margin: 8px 0 12px; }
.ct-fc__btn { display: block; text-align: center; background: var(--mint-ink); color: #fff; border-radius: 9px; padding: 11px; font-size: 14px; font-weight: 800; text-decoration: none; }
@media (max-width: 900px) {
  .ct-fun__in { padding: 48px 22px; }
  .ct-fun__head { grid-template-columns: 1fr; gap: 16px; }
  .ct-fun__grid { grid-template-columns: 1fr; gap: 10px; }
  .ct-fun__conn { flex-direction: row; padding: 6px 0; } .ct-fun__conn .arrow { width: 40px; }
}

/* ===== INTERNAL LINKS & ANCHOR TEXT (435:2) ===== */
.ct-link { background: #fff; }
.ct-link__in { max-width: 1300px; margin: 0 auto; padding: clamp(56px, 6vw, 84px) 48px; }
.ct-link__head { max-width: 640px; margin-bottom: 36px; }
.ct-link__head .eyebrow { font-size: 16px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--mint-ink); margin: 0 0 14px; }
.ct-link__head h2 { margin: 0; font-size: clamp(32px, 4.2vw, 50px); font-weight: 800; line-height: 1.03; letter-spacing: -0.03em; color: var(--ink); }
.ct-link__head h2 em { font-style: normal; color: var(--mint); }
.ct-link__head .sub { margin: 16px 0 0; font-size: 18px; line-height: 1.55; color: var(--body); }
.ct-link__grid { display: grid; grid-template-columns: 1.25fr auto 1fr; align-items: center; }
.ct-link__art { background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -46px rgba(20,20,19,0.35); min-width: 0; }
.ct-link__bar { display: flex; align-items: center; gap: 8px; padding: 11px 16px; background: #f6f7f6; border-bottom: 1px solid #eef1ef;  font-size: 13px; color: var(--body); } .ct-link__bar .dots { display: flex; gap: 5px; } .ct-link__bar .dots i { width: 8px; height: 8px; border-radius: 50%; background: #d7dbd8; }
.ct-link__body { padding: 22px 26px 20px; }
.ct-link__body .sg { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mint-ink);  }
.ct-link__body h4 { margin: 8px 0 4px; font-size: 24px; font-weight: 800; color: var(--ink); }
.ct-link__body .meta { font-size: 13px; color: var(--body); margin-bottom: 12px; }
.ct-link__body p { margin: 0 0 12px; font-size: 16px; line-height: 1.65; color: #3a3e3c; }
.anchor { font-weight: 700; color: var(--ink); border-bottom: 2px solid var(--mint); }
.antag { display: inline-block; font-size: 11px; color: var(--mint-deep); background: var(--mint-tint); border: 1px solid rgba(48,159,151,0.3); border-radius: 5px; padding: 1px 6px; margin-left: 3px; vertical-align: middle;  white-space: nowrap; }
.ct-link__foot { margin-top: 14px; padding-top: 14px; border-top: 1px solid #eef1ef; font-size: 15px; font-weight: 700; color: var(--mint-deep); }
.ct-link__conn { display: flex; flex-direction: column; align-items: center; padding: 0 8px; position: relative; }
.ct-link__conn .pill { background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px; font-size: 13px;  color: var(--ink); z-index: 2; box-shadow: 0 4px 12px -6px rgba(0,0,0,0.2); }
.ct-link__conn::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dashed #b8ccc7; }
.ct-link__right { display: grid; gap: 14px; min-width: 0; }
.ct-tp { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 18px; box-shadow: 0 20px 44px -36px rgba(20,20,19,0.3); }
.ct-tp__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .ct-tp__hd .l { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--body);  } .ct-tp__hd b { font-size: 18px; color: var(--ink); display: block; margin-top: 2px; } .ct-tp__hd .u { font-size: 12px; color: var(--body);  }
.ct-tp__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .ct-tp__thumbs span { height: 62px; border-radius: 8px; background: var(--mint-tint); display: grid; place-items: center; } .ct-tp__thumbs span::after { content: ""; width: 22px; height: 26px; border-radius: 5px; background: rgba(48,159,151,0.35); }
.ct-gsc2 { background: radial-gradient(120% 130% at 15% 0%, #17423b, #0a1f1c); border-radius: 14px; padding: 18px; color: #fff; }
.ct-gsc2__hd { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; margin-bottom: 8px; } .ct-gsc2__hd .dots { display: flex; gap: 4px; } .ct-gsc2__hd .dots i { width: 6px; height: 6px; border-radius: 50%; } .ct-gsc2__hd .dots i:nth-child(1) { background: #ef5b52; } .ct-gsc2__hd .dots i:nth-child(2) { background: #f6b93b; } .ct-gsc2__hd .dots i:nth-child(3) { background: #26a269; } .ct-gsc2__hd .d { margin-left: auto; font-size: 12px; color: rgba(255,255,255,0.6); font-weight: 400; }
.ct-gsc2 .big { display: flex; align-items: baseline; gap: 8px; } .ct-gsc2 .from { font-size: 16px; color: rgba(255,255,255,0.5); } .ct-gsc2 .to { font-size: 34px; font-weight: 800; color: #fff; } .ct-gsc2 .kw { font-size: 14px; color: var(--mint-light); font-weight: 700; }
.ct-gsc2 span.cap { display: block; font-size: 13px; color: rgba(255,255,255,0.7); margin-top: 2px; }
.ct-gsc2 svg { display: block; width: 100%; height: 46px; margin-top: 6px; }
@media (max-width: 900px) {
  .ct-link__in { padding: 48px 22px; }
  .ct-link__grid { grid-template-columns: 1fr; gap: 16px; }
  .ct-link__conn { flex-direction: row; padding: 4px 0; } .ct-link__conn::before { display: none; }
}

/* ===== OUR 8-STEP CONTENT PROCESS — ledger (602:2) ===== */
.ct-proc { position: relative; overflow: hidden; background: radial-gradient(100% 80% at 18% 6%, #1c4f4a, #0a1f1c 58%), #0a1f1c; color: #fff; }
.ct-proc__in { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: clamp(56px, 6vw, 84px) 48px; }
.ct-proc__head { max-width: 640px; margin-bottom: 30px; }
.ct-proc__head .eyebrow { font-size: 16px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint-light); margin: 0 0 12px; }
.ct-proc__head h2 { margin: 0; font-size: clamp(30px, 3.8vw, 46px); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; color: #fff; } .ct-proc__head h2 em { font-style: normal; color: var(--mint-light); }
.ct-proc__head .sub { margin: 14px 0 0; font-size: 18px; line-height: 1.55; color: rgba(255,255,255,0.7); }
.ct-proc__rows { position: relative; }
.ct-proc__rows::before { content: ""; position: absolute; left: 13px; top: 34px; bottom: 44px; width: 1.5px; background: rgba(143,214,207,0.26); }
.ct-proc__row { display: grid; grid-template-columns: 104px 1fr 340px; gap: 24px; align-items: center; padding: 15px 0; }
.ct-proc__num { position: relative; font-size: 44px; font-weight: 800; color: rgba(143,214,207,0.32); line-height: 1; padding-left: 42px; }
.ct-proc__num::after { content: ""; position: absolute; left: 13px; top: 50%; transform: translate(-50%,-50%); width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--mint-light); background: #0a1f1c; }
.ct-proc__row:last-child .ct-proc__num::after { background: var(--mint-light); }
.ct-proc__txt { min-width: 0; } .ct-proc__txt h4 { margin: 0 0 4px; color: #fff; font-size: 20px; font-weight: 800; }
.ct-proc__txt p { margin: 0; color: rgba(255,255,255,0.6); font-size: 16px; line-height: 1.45; }
.ct-proc__card { background: #fff; border-radius: 10px; padding: 12px 14px; color: var(--ink); box-shadow: 0 20px 44px -30px rgba(0,0,0,0.6); min-width: 0; }
.pc-box { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 999px; padding: 5px 10px; font-size: 11px; color: var(--body); }
.pc-t { font-size: 13px; color: #1a4b8f; font-weight: 700; margin: 6px 0 2px; } .pc-t.mint { color: var(--mint-deep); }
.pc-s { font-size: 11px; color: var(--body); line-height: 1.4; }
.pc-line { height: 6px; border-radius: 3px; background: #e6e8e6; margin: 5px 0; } .pc-line.w1 { width: 88%; } .pc-line.w2 { width: 66%; }
.pc-pill { display: inline-block; background: var(--mint-tint); color: var(--mint-deep); font-size: 11px; font-weight: 700; border-radius: 5px; padding: 3px 8px; }
.pc-bar { height: 6px; border-radius: 999px; background: #e6e8e6; overflow: hidden; margin-top: 6px; } .pc-bar i { display: block; height: 100%; background: var(--mint); border-radius: 999px; }
.pc-prod { display: flex; gap: 10px; align-items: center; } .pc-prod .im { width: 52px; height: 52px; border-radius: 7px; background: #e6e8e6; flex: 0 0 auto; } .pc-prod b { font-size: 13px; color: var(--ink); display: block; } .pc-prod .st { color: #f0a91b; font-size: 10px; } .pc-prod .pr { font-size: 13px; font-weight: 800; color: var(--ink); }
.pc-btn { display: inline-block; background: var(--mint-ink); color: #fff; font-size: 11px; font-weight: 800; border-radius: 6px; padding: 4px 10px; margin-top: 3px; }
.pc-out { display: flex; align-items: center; gap: 8px; } .pc-out .h1 { flex: 1; height: 9px; border-radius: 4px; background: var(--mint); } .pc-out .lab { font-size: 10px; color: var(--body); }
.pc-h2 { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .pc-h2 .tag { font-size: 10px; color: var(--body); } .pc-h2 .b { flex: 1; height: 7px; border-radius: 4px; background: #e6e8e6; }
.pc-tags { display: flex; gap: 6px; margin-top: 8px; } .pc-tags span { font-size: 10px; color: var(--mint-deep); background: var(--mint-tint); border-radius: 4px; padding: 2px 7px; }
.pc-dots { display: flex; gap: 4px; align-items: center; } .pc-dots i { width: 6px; height: 6px; border-radius: 50%; background: #d7dbd8; } .pc-dots .live { margin-left: auto; font-size: 11px; color: var(--mint-deep); font-weight: 700; display: flex; align-items: center; gap: 4px; } .pc-dots .live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #26a269; }
.pc-hero { height: 34px; border-radius: 7px; background: linear-gradient(120deg, #1c6f64, #0f3d37); margin: 8px 0; }
.pc-pub { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--body); margin-top: 6px; } .pc-pub::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #26a269; }
.pc-idx { display: flex; align-items: center; gap: 10px; background: #f0f8f3; border-radius: 8px; padding: 10px; margin-top: 8px; } .pc-idx .ck { width: 22px; height: 22px; border-radius: 50%; background: #26a269; color: #fff; font-size: 12px; font-weight: 800; display: grid; place-items: center; flex: 0 0 auto; } .pc-idx b { font-size: 13px; color: var(--ink); display: block; } .pc-idx span { font-size: 11px; color: var(--body); }
.pc-links { display: flex; gap: 6px; margin-top: 6px; } .pc-links span { font-size: 10px; color: var(--mint-deep); background: var(--mint-tint); border-radius: 999px; padding: 2px 8px; }
@media (max-width: 900px) {
  .ct-proc__in { padding: 48px 22px; }
  .ct-proc__row { grid-template-columns: 80px 1fr; }
  .ct-proc__rows::before { left: 13px; }
  .ct-proc__num { font-size: 34px; padding-left: 34px; }
  .ct-proc__num::after { left: 13px; }
  .ct-proc__card { grid-column: 1 / -1; margin-left: 80px; max-width: 340px; }
}

/* ===== PRICING — two-tone content pack (439:2) ===== */
.ct-price { background: var(--mint-tint); }
.ct-price__in { max-width: 1300px; margin: 0 auto; padding: clamp(56px, 6vw, 84px) 48px; }
.ct-price__head { max-width: 640px; margin-bottom: 36px; }
.ct-price__head .eyebrow { font-size: 16px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint-ink); margin: 0 0 14px; }
.ct-price__head h2 { margin: 0; font-size: clamp(32px, 4.2vw, 50px); font-weight: 800; line-height: 1.03; letter-spacing: -0.03em; color: var(--ink); } .ct-price__head h2 em { font-style: normal; color: var(--mint); }
.ct-price__head .sub { margin: 16px 0 0; font-size: 18px; line-height: 1.55; color: var(--body); }
.ct-price__card { display: grid; grid-template-columns: 1fr 1.15fr; border-radius: 20px; overflow: hidden; box-shadow: 0 40px 90px -60px rgba(20,20,19,0.35); border: 1px solid var(--border); }
.ct-price__left { background: radial-gradient(120% 130% at 20% 0%, #1c4f4a, #0a1f1c); color: #fff; padding: 40px; position: relative; overflow: hidden; min-width: 0; }
.ct-price__left .lbl { font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint-light); }
.ct-price__stack { position: relative; height: 128px; margin: 14px 0 22px; }
.ct-price__stack .paper { position: absolute; left: 50%; bottom: 0; width: 76px; height: 98px; background: #fff; border-radius: 6px; transform-origin: bottom center; transform: translateX(-50%) rotate(var(--r)); box-shadow: 0 8px 18px -8px rgba(0,0,0,0.5); }
.ct-price__stack .paper::before { content: ""; position: absolute; top: 11px; left: 11px; right: 11px; height: 3px; border-radius: 2px; background: var(--mint); }
.ct-price__stack .paper::after { content: ""; position: absolute; top: 20px; left: 11px; right: 22px; height: 2px; border-radius: 2px; background: #e0e0db; box-shadow: 0 5px 0 #e6e6e1, 0 10px 0 #e6e6e1; }
.ct-price__price { font-size: 52px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .ct-price__price em { font-style: normal; font-size: 16px; color: var(--mint-light); font-weight: 700; margin-left: 8px; }
.ct-price__meta { color: var(--mint-light); font-size: 16px; margin-top: 10px; }
.ct-price__was { font-size: 26px; font-weight: 700; color: rgba(255,255,255,0.42); text-decoration: line-through; margin-right: 12px; letter-spacing: -0.02em; vertical-align: 6px; }
.ct-price__meta s { color: rgba(143,214,207,0.6); text-decoration: line-through; margin-right: 3px; }
.ct-price__save { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; background: rgba(143,214,207,0.14); border: 1px solid rgba(143,214,207,0.32); color: var(--mint-light); font-size: 16px; font-weight: 800; border-radius: 999px; padding: 8px 15px; }
.ct-price__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; background: var(--mint-ink); color: #fff; font-size: 16px; font-weight: 800; padding: 14px 24px; border-radius: 11px; text-decoration: none; transition: background 0.2s, transform 0.2s; } .ct-price__cta:hover { background: #35b0a7; transform: translateY(-2px); }
.ct-price__right { background: #fff; padding: 34px 40px; min-width: 0; }
.ct-price__right .lbl { font-size: 15px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mint-ink); margin: 0 0 18px; }
.ct-price__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.ct-price__it { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.ct-price__it .tk { width: 22px; height: 22px; border-radius: 6px; background: rgba(48,159,151,0.14); color: var(--mint-deep); font-size: 12px; font-weight: 800; display: grid; place-items: center; flex: 0 0 auto; margin-top: 1px; }
.ct-price__it b { display: block; font-size: 16px; color: var(--ink); } .ct-price__it span { font-size: 15px; color: var(--body); }
.ct-price__foot { border-top: 1px solid #eef1ef; padding-top: 16px; margin-top: 22px; font-size: 16px; color: var(--body); } .ct-price__foot .p { color: var(--mint-ink); font-weight: 800; margin-right: 4px; }
@media (max-width: 900px) {
  .ct-price__in { padding: 48px 22px; }
  .ct-price__card { grid-template-columns: 1fr; }
  .ct-price__grid { grid-template-columns: 1fr; }
}

/* ===== RETAINER — content flywheel calendar (633:2) ===== */
.ct-ret { background: #fff; }
.ct-ret__in { max-width: 1300px; margin: 0 auto; padding: clamp(56px, 6vw, 84px) 48px; }
.ct-ret__head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; margin-bottom: 36px; }
.ct-ret__head .eyebrow { font-size: 16px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint-ink); margin: 0 0 14px; }
.ct-ret__head h2 { margin: 0; font-size: clamp(32px, 4.4vw, 52px); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; color: var(--ink); } .ct-ret__head h2 em { font-style: normal; color: var(--mint); }
.ct-ret__head .sub { margin: 0; font-size: 18px; line-height: 1.55; color: var(--body); }
.ct-ret__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; background: var(--mint-ink); color: #fff; font-size: 16px; font-weight: 800; padding: 14px 24px; border-radius: 11px; text-decoration: none; transition: background 0.2s, transform 0.2s; } .ct-ret__cta:hover { background: #2b9089; transform: translateY(-2px); }
.ct-ret__card { border: 1px solid var(--border); border-radius: 18px; overflow: hidden; box-shadow: 0 40px 90px -60px rgba(20,20,19,0.3); }
.ct-ret__hd { display: flex; align-items: center; gap: 12px; padding: 15px 22px; border-bottom: 1px solid #eef1ef; } .ct-ret__hd b { font-size: 17px; color: var(--ink); } .ct-ret__hd .pill { background: var(--mint-tint); color: var(--mint-deep); font-size: 13px; font-weight: 700; border-radius: 999px; padding: 4px 12px; }
.ct-ret__chart { position: relative; padding: 14px 22px 34px; border-bottom: 1px solid #eef1ef; overflow: hidden; }
.ct-ret__chart .lbl {  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--body); position: relative; z-index: 2; }
.ct-ret__chart .end { position: absolute; right: 22px; top: 30px;  font-size: 14px; font-weight: 700; color: var(--mint-deep); z-index: 2; }
.ct-ret__chart svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 60px; }
.ct-ret__grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.ct-mo { border-right: 1px solid #eef1ef; padding: 14px; min-width: 0; } .ct-mo:last-child { border-right: 0; }
.ct-mo__hd { display: flex; justify-content: space-between; font-size: 13px; font-weight: 800; letter-spacing: 0.05em; color: var(--ink); margin-bottom: 10px; } .ct-mo__hd span { color: var(--body); font-weight: 400; }
.ct-mo__card { border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 8px; } .ct-mo__card b { font-size: 13px; color: var(--ink); display: block; margin-bottom: 7px; line-height: 1.25; font-weight: 700; }
.ct-mo--future .ct-mo__card { opacity: 0.5; }
.st { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; border-radius: 5px; padding: 2px 7px; } .st::before { content: ""; width: 5px; height: 5px; border-radius: 50%; }
.st-pub { background: #e6f5ec; color: #1a7a44; } .st-pub::before { background: #26a269; }
.st-sch { background: #fdf2e2; color: #a8710f; } .st-sch::before { background: #e0a020; }
.st-plan { background: #eef1ef; color: #6b706d; } .st-plan::before { background: #9aa39f; }
.ct-mo__more { font-size: 12px; color: var(--body); font-style: italic; }
.ct-ret__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: linear-gradient(90deg, #0f3d37, #1c6f64); color: #fff; padding: 15px 22px; flex-wrap: wrap; } .ct-ret__foot b { color: #fff; font-size: 16px; } .ct-ret__foot .r {  font-size: 14px; color: var(--mint-light); }
@media (max-width: 900px) {
  .ct-ret__in { padding: 48px 22px; }
  .ct-ret__head { grid-template-columns: 1fr; gap: 16px; }
  .ct-ret__grid { grid-template-columns: 1fr 1fr; } .ct-mo:nth-child(2n) { border-right: 0; } .ct-mo { border-bottom: 1px solid #eef1ef; }
}
@media (max-width: 520px) { .ct-ret__grid { grid-template-columns: 1fr; } .ct-mo { border-right: 0; } }

/* ===== CASE STUDIES — bento (638:2) ===== */
.ct-cs { background: #f3f4f2; }
.ct-cs__in { max-width: 1300px; margin: 0 auto; padding: clamp(56px, 6vw, 84px) 48px; }
.ct-cs__head { max-width: 640px; margin-bottom: 36px; }
.ct-cs__head .eyebrow { font-size: 16px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint-ink); margin: 0 0 14px; }
.ct-cs__head h2 { margin: 0; font-size: clamp(32px, 4.2vw, 50px); font-weight: 800; line-height: 1.03; letter-spacing: -0.03em; color: var(--ink); } .ct-cs__head h2 em { font-style: normal; color: var(--mint); }
.ct-cs__head .sub { margin: 16px 0 0; font-size: 18px; line-height: 1.55; color: var(--body); }
.ct-cs__bento { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; align-items: stretch; }
.ct-cs__big { position: relative; overflow: hidden; background: radial-gradient(130% 150% at 78% 0%, #1c4f4a, #0a1f1c); border-radius: 20px; padding: 36px 40px; color: #fff; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.ct-cs__big .lbl { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mint-light); font-weight: 700; }
.ct-cs__big .big { font-size: clamp(56px, 8vw, 100px); font-weight: 800; line-height: 0.9; letter-spacing: -0.04em; margin-top: 10px; } .ct-cs__big .big em { font-style: normal; color: var(--mint-light); }
.ct-cs__big .cap { font-size: 18px; margin-top: 10px; color: rgba(255,255,255,0.8); } .ct-cs__big .cap b { color: #fff; font-weight: 700; }
.ct-cs__search { margin-top: 24px; max-width: 360px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; overflow: hidden; }
.ct-cs__search .bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,0.1);  font-size: 13px; color: rgba(255,255,255,0.55); } .ct-cs__search .bar .dots { display: flex; gap: 4px; } .ct-cs__search .bar .dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.3); }
.ct-cs__search .res { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; font-size: 15px; font-weight: 700; color: #fff; } .ct-cs__search .res .rk { background: rgba(143,214,207,0.2); color: var(--mint-light); font-size: 13px; font-weight: 800; border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.ct-cs__col { display: grid; grid-template-rows: auto 1fr; gap: 22px; min-width: 0; }
.ct-cs__stat { background: var(--mint-tint); border-radius: 20px; padding: 30px 32px; display: flex; flex-direction: column; justify-content: center; }
.ct-cs__stat b { font-size: clamp(38px, 5vw, 56px); font-weight: 800; color: var(--ink); letter-spacing: -0.03em; line-height: 1; } .ct-cs__stat b em { font-style: normal; color: var(--mint); }
.ct-cs__stat .l { display: block; margin-top: 8px; font-size: 17px; font-weight: 700; color: var(--ink); } .ct-cs__stat .s { display: block; font-size: 16px; color: var(--body); }
.ct-cs__quote { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 28px 30px; }
.ct-cs__quote .qm { font-size: 34px; color: var(--mint-light); line-height: 0.6; height: 20px; }
.ct-cs__quote p { margin: 14px 0 18px; font-size: 17px; line-height: 1.5; color: var(--ink); font-weight: 600; }
.ct-cs__quote .who { display: flex; align-items: center; gap: 12px; } .ct-cs__quote .who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; } .ct-cs__quote .who b { display: block; font-size: 16px; color: var(--ink); } .ct-cs__quote .who span { font-size: 16px; color: var(--body); }
@media (max-width: 900px) { .ct-cs__in { padding: 48px 22px; } .ct-cs__bento { grid-template-columns: 1fr; } }

/* ===== FREE CONTENT PLAN — calendar + overlay card (612:2) ===== */
.ct-plan { position: relative; overflow: hidden; background: radial-gradient(90% 120% at 82% 0%, #17423b, #0a1f1c 60%), #0a1f1c; color: #fff; }
.ct-plan__in { position: relative; z-index: 2; max-width: 1320px; margin: 0 auto; padding: clamp(56px, 6vw, 80px) 48px; display: grid; grid-template-columns: 40% 1fr; gap: 44px; align-items: center; }
.ct-plan__cal { width: 100%; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 50px 100px -50px rgba(0,0,0,0.6); color: var(--ink); }
.ct-plan__cal .chd { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid #eef1ef; } .ct-plan__cal .chd b { font-size: 15px; color: var(--ink); } .ct-plan__cal .chd .pill { background: #0a1f1c; color: #fff; font-size: 13px; border-radius: 999px; padding: 5px 14px; } .ct-plan__cal .chd .pill::before { content: "\25CF"; color: var(--mint-light); margin-right: 6px; font-size: 10px; }
.ct-plan__days { display: grid; grid-template-columns: repeat(7, 1fr); } .ct-plan__days span { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; color: var(--body); padding: 10px 12px 6px; }
.ct-plan__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.ct-cell { border-top: 1px solid #eef1ef; border-right: 1px solid #eef1ef; min-height: 64px; padding: 8px 10px; min-width: 0; } .ct-cell:nth-child(7n) { border-right: 0; }
.ct-cell .dt { font-size: 12px; color: var(--body); }
.ct-chip { display: block; margin-top: 6px; font-size: 11px; font-weight: 700; border-radius: 5px; padding: 3px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ct-chip::before { content: "\25CF"; margin-right: 4px; font-size: 9px; }
.ct-chip--pub { background: #e6f5ec; color: #1a7a44; } .ct-chip--pub::before { color: #26a269; }
.ct-chip--draft { background: #fdf2e2; color: #a8710f; } .ct-chip--draft::before { color: #e0a020; }
.ct-plan__leg { display: flex; align-items: center; gap: 18px; padding: 12px 20px; border-top: 1px solid #eef1ef; font-size: 13px; color: var(--body); flex-wrap: wrap; } .ct-plan__leg .r { margin-left: auto; }
.ct-plan__leg .lg { display: inline-flex; align-items: center; gap: 6px; } .ct-plan__leg .lg::before { content: "\25CF"; font-size: 9px; } .ct-plan__leg .lg.pl::before { color: #9aa39f; } .ct-plan__leg .lg.dr::before { color: #e0a020; } .ct-plan__leg .lg.pu::before { color: #26a269; }
.ct-plan__card { position: relative; width: auto; max-width: none; background: #0d2a25; border: 1px solid rgba(143,214,207,0.18); border-radius: 20px; padding: 36px; z-index: 3; box-shadow: 0 40px 90px -50px rgba(0,0,0,0.7); }
.ct-plan__card .eyebrow { font-size: 15px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; color: var(--mint-light); margin: 0 0 14px; }
.ct-plan__card h2 { margin: 0; font-size: clamp(30px, 3.4vw, 42px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: #fff; } .ct-plan__card h2 em { font-style: normal; color: var(--mint-light); }
.ct-plan__card .sub { margin: 16px 0 0; font-size: 17px; line-height: 1.55; color: rgba(255,255,255,0.72); }
/* email-only lead-magnet form (mirrors .au-str__form / .ae-lead__form on the dark card) */
.ct-plan__form { margin-top: 24px; }
.ct-plan__form label { display: block; font-size: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mint-light); margin: 0 0 10px; }
.ct-plan__form input { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); border-radius: 12px; padding: 16px 18px; font-size: 16px; color: #fff; font-family: inherit; } .ct-plan__form input::placeholder { color: rgba(255,255,255,0.4); } .ct-plan__form input:focus { outline: none; border-color: var(--mint-light); }
.ct-plan__form button { width: 100%; margin-top: 14px; background: var(--mint-light); color: #04211d; font-weight: 800; font-size: 16px; padding: 16px; border-radius: 12px; border: 0; cursor: pointer; transition: background 0.2s, transform 0.2s; } .ct-plan__form button:hover { background: #a4e0d9; transform: translateY(-1px); }
.ct-plan__form .alt { text-align: center; margin: 16px 0 0; font-size: 16px; color: rgba(255,255,255,0.7); } .ct-plan__form .alt a { color: #fff; font-weight: 700; text-decoration: none; }
.ct-plan__ticks { margin-top: 22px; } .ct-plan__ticks .it { display: flex; gap: 9px; align-items: center; padding: 6px 0; font-size: 16px; color: rgba(255,255,255,0.9); } .ct-plan__ticks .it .tk { width: 20px; height: 20px; border-radius: 50%; background: rgba(143,214,207,0.2); color: var(--mint-light); font-size: 11px; font-weight: 800; display: grid; place-items: center; flex: 0 0 auto; }
@media (max-width: 980px) {
  .ct-plan__in { display: flex; flex-direction: column; padding: 48px 22px; }
  .ct-plan__cal { width: 100%; }
  .ct-plan__card { position: relative; left: 0; top: 0; transform: none; width: 100%; max-width: none; order: -1; margin-bottom: 24px; padding: 32px 26px; }
}
@media (max-width: 560px) { .ct-plan__days span { padding: 8px 5px; font-size: 11px; } .ct-cell { min-height: 52px; padding: 6px 5px; } .ct-chip { font-size: 10px; padding: 2px 4px; } }

/* mobile: stack the rank-tracker card header so title/site/date don't crush with a stranded separator */
@media (max-width: 560px) { .ct-rank__hd { flex-wrap: wrap; } .ct-rank__hd .days { margin-left: 0; flex-basis: 100%; } }