/* Mortaro Authority — homepage v4 (rizkad-style: cream, bold grotesque, brass) */

/* ============ HERO (centered, fits a standard laptop) ============ */
.hero { padding-block: clamp(28px,3.5vw,52px) clamp(44px,5vw,72px); text-align: center; position: relative; }
.hero__inner { display: flex; flex-direction: column; align-items: center; }
.hero__eyebrow { margin-bottom: var(--s5); }
.hero__title { font-size: var(--fs-mega); max-width: 18ch; margin: 0 auto; font-weight: 780; line-height: .94; }
.hero__title .rl { display: block; }
.hero__sub { font-size: var(--fs-lead); color: var(--text-muted); max-width: 54ch; margin: var(--s5) auto var(--s6); }
.hero__cta { display: flex; gap: var(--s4); flex-wrap: wrap; justify-content: center; align-items: center; }
.hero__spots { margin-top: var(--s5); }

/* ============ REFRAME ============ */
.reframe { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,100px); align-items: center; }
.reframe__big { font-size: var(--fs-h2); max-width: 14ch; }
.reframe ul { display: grid; gap: var(--s4); margin-top: var(--s6); }
.reframe li { display: flex; gap: var(--s4); align-items: flex-start; font-size: var(--fs-lead); color: var(--text); }
.reframe li::before { content: "\2715"; color: var(--brass); font-family: var(--font-cond); font-weight: 700; flex: none; }
.reframe__fix { display: inline-flex; align-items: center; gap: .5em; margin-top: var(--s5); font-family: var(--font-cond); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brass); }
@media (max-width: 900px) { .reframe { grid-template-columns: 1fr; } }

/* ============ STATS BAND (dark) ============ */
.statsband__head { margin-bottom: clamp(48px,6vw,88px); }
.statrow { display: grid; grid-template-columns: repeat(4, 1fr); }
.statbig { text-align: center; padding: var(--s4) var(--s5); border-left: 1px solid var(--line-dark); display: flex; flex-direction: column; align-items: center; }
.statbig:first-child { border-left: 0; }
.statbig__n { font-family: var(--font-display); font-weight: 800; font-size: clamp(3.5rem, 1.5rem + 7vw, 8.5rem); line-height: .82; letter-spacing: -.05em; color: var(--cream); display: block; }
.statbig__n .stat__suffix { color: var(--brass-bright); }
.statbig__l { font-family: var(--font-cond); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; font-size: clamp(.8rem,.7rem+.3vw,.95rem); color: var(--on-dark-muted); margin-top: var(--s5); display: block; max-width: 18ch; }
@media (max-width: 760px) { .statrow { grid-template-columns: 1fr 1fr; gap: var(--s8) 0; } .statbig:nth-child(odd) { border-left: 0; } .statbig:nth-child(even) { border-left: 1px solid var(--line-dark); } }

/* ============ WORK / DEMOS (big statement + mockups) ============ */
.workstmt { text-align: center; font-size: var(--fs-display); max-width: 20ch; margin: 0 auto var(--s9); font-weight: 780; }
.demos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: start; }
.demos--solo { grid-template-columns: 1fr; max-width: 980px; margin-inline: auto; }
.reassure { display: flex; gap: .6em; align-items: center; justify-content: center; text-align: center; color: var(--ink); background: var(--brass-soft); padding: var(--s5) var(--s7); border-radius: var(--radius-lg); max-width: 70ch; margin: var(--s8) auto 0; font-size: var(--fs-lead); }
.reassure svg { color: var(--brass); flex: none; }
.reassure em { color: var(--brass); font-style: italic; }
@media (max-width: 880px) { .demos { grid-template-columns: 1fr; } }

/* ============ SITE MOCKUP ============ */
.mock2 { --mk-bg:#fff; --mk-ink:#1a2230; --mk-accent:#BC7A2C; --mk-muted:#9aa3af; --mk-img: linear-gradient(160deg,#E9C9A8,#BC7A2C); border-radius: var(--radius-lg); overflow: hidden; background: var(--mk-bg); box-shadow: var(--shadow-float); width: 100%; }
.mock2__chrome { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: color-mix(in srgb, var(--mk-bg) 92%, #000); border-bottom: 1px solid rgba(0,0,0,.06); }
.mock2__chrome i { width: 9px; height: 9px; border-radius: 50%; background: rgba(0,0,0,.16); }
.mock2__url { margin-left: 10px; font-family: var(--font-cond); font-size: 12px; color: var(--mk-muted); background: rgba(0,0,0,.05); padding: 4px 14px; border-radius: 999px; }
.mock2__nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; }
.mock2__logo { font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em; font-size: .9rem; color: var(--mk-ink); }
.mock2__links { display: flex; gap: 14px; }
.mock2__links i { font-style: normal; font-size: 10px; color: var(--mk-muted); }
.mock2__navbtn { font-size: 10px; background: var(--mk-accent); color: #fff; padding: 7px 13px; border-radius: 999px; font-weight: 700; }
.mock2__hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; padding: 12px 22px 22px; align-items: center; }
.mock2__copy { display: flex; flex-direction: column; gap: 10px; }
.mock2__ey { font-family: var(--font-cond); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--mk-accent); font-weight: 600; }
.mock2__h { font-family: var(--font-display); font-size: clamp(1.1rem,.6rem+1.4vw,1.9rem); line-height: .98; color: var(--mk-ink); font-weight: 780; letter-spacing: -.03em; }
.mock2__sub { height: 6px; border-radius: 3px; background: var(--mk-muted); opacity: .35; width: 92%; }
.mock2__sub.s { width: 66%; }
.mock2__btn { align-self: flex-start; margin-top: 6px; font-size: 10px; background: var(--mk-ink); color: #fff; padding: 9px 15px; border-radius: 999px; font-weight: 700; }
.mock2__stars { font-size: 10px; color: var(--mk-accent); letter-spacing: 1px; }
.mock2__stars i { color: var(--mk-muted); font-style: normal; letter-spacing: 0; }
.mock2__img { aspect-ratio: 3/4; border-radius: 10px; background: var(--mk-img); min-height: 130px; }
.mock2__svcs { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; padding: 0 22px 22px; }
.mock2__svc { padding: 12px; border-radius: 9px; background: color-mix(in srgb, var(--mk-ink) 6%, var(--mk-bg)); display: flex; flex-direction: column; gap: 7px; }
.mock2__svc b { font-family: var(--font-body); font-weight: 700; font-size: 10.5px; color: var(--mk-ink); }
.mock2__svc i { height: 5px; border-radius: 3px; background: var(--mk-muted); opacity: .4; display: block; }
.mock2__svc i.s { width: 60%; }
.mock2--warm  { --mk-bg:#FBF7F0; --mk-ink:#26211B; --mk-accent:#BC7A2C; --mk-muted:#a9988a; --mk-img: linear-gradient(160deg,#EBCDA9,#BC7A2C); }
.mock2--fresh { --mk-bg:#F4F8F5; --mk-ink:#16241C; --mk-accent:#3E8E6B; --mk-muted:#93a89b; --mk-img: linear-gradient(160deg,#CFE8D9,#3E8E6B); }
.mock2--dark  { --mk-bg:#15191D; --mk-ink:#F1EFE8; --mk-accent:#D08A30; --mk-muted:#8a8c8f; --mk-img: linear-gradient(160deg,#2A323B,#15191D); }
.mock2--dark .mock2__chrome { background: rgba(255,255,255,.05); border-bottom-color: rgba(255,255,255,.08); }
.mock2--dark .mock2__url, .mock2--dark .mock2__chrome i { background: rgba(255,255,255,.07); }
.mock2--dark .mock2__svc { background: rgba(255,255,255,.05); }
.mock2--dark .mock2__navbtn { color: #15191D; }

/* ============ METHOD (process) ============ */
.process-wrap { align-items: start; }
.process-intro { position: sticky; top: calc(var(--header-h) + var(--urgency-h) + 24px); }
@media (max-width: 940px) { .process-intro { position: static; } }
.process { display: grid; }
.process__step { display: grid; grid-template-columns: auto 1fr; gap: var(--s6); padding: var(--s6) 0; border-top: 1px solid var(--line); align-items: baseline; }
.process__step:last-child { border-bottom: 1px solid var(--line); }
.process__n { font-family: var(--font-display); font-size: clamp(1.8rem,1.2rem+2vw,3rem); font-weight: 780; color: var(--brass); line-height: .9; letter-spacing: -.04em; }
.process__h { font-family: var(--font-display); font-weight: 740; font-size: var(--fs-h3); margin-bottom: var(--s2); letter-spacing: -.02em; }
.process__p { color: var(--text-muted); font-size: var(--fs-small); }

/* ============ COMPARISON + PAGE GRID ============ */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: stretch; margin-top: var(--s8); }
.compare__col { border: 1.5px solid var(--line); border-radius: var(--radius-lg); padding: var(--s7); display: flex; flex-direction: column; }
.compare__col--win { border-color: var(--brass); background: var(--brass-soft); }
.compare__tag { font-family: var(--font-cond); font-weight: 600; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.compare__col--win .compare__tag { color: var(--brass); }
.compare__price { font-family: var(--font-display); font-weight: 780; font-size: clamp(2rem,1.4rem+1.8vw,3rem); margin: var(--s4) 0; letter-spacing: -.03em; color: var(--ink); }
.compare__price small { display: block; font-family: var(--font-cond); font-weight: 600; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-top: var(--s2); }
.compare__list { display: grid; gap: var(--s3); margin-top: var(--s4); }
.compare__list li { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--fs-small); color: var(--text-muted); }
.compare__list li::before { content: "\2715"; color: #B4563F; font-family: var(--font-cond); font-weight: 700; flex: none; }
.compare__col--win .compare__list li { color: var(--text); }
.compare__col--win .compare__list li::before { content: "\2713"; color: var(--brass); }
@media (max-width: 720px) { .compare { grid-template-columns: 1fr; } }

.pagegrid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(20px,3vw,48px); max-width: 1040px; margin-inline: auto; }
.pagecard { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(28px,4vw,52px) var(--s6); border: 1.5px solid var(--line); border-radius: var(--radius-lg); width: 100%; background: var(--paper); }
.pagecard--win { border-color: var(--brass); background: var(--brass-soft); }
.pagegrid__label { font-family: var(--font-cond); font-weight: 600; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); display: block; }
.pagegrid__label--win { color: var(--brass); }
.pg-dots { display: grid; gap: 4px; margin: var(--s5) auto; justify-content: center; }
.pg-dots span { width: 8px; height: 8px; border-radius: 2px; background: var(--line); }
.pg-dots--few { grid-template-columns: repeat(5,8px); }
.pg-dots--many { grid-template-columns: repeat(20,8px); }
.pg-dots--many span { background: var(--brass); }
.pagegrid__num { font-family: var(--font-display); font-weight: 780; font-size: clamp(2.6rem,1.6rem+3vw,4.5rem); line-height: .9; letter-spacing: -.04em; color: var(--ink); }
.pagecard--win .pagegrid__num { color: var(--brass); }
.pagegrid__unit { font-family: var(--font-cond); font-weight: 600; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-top: var(--s2); }
.pagegrid__vs { font-family: var(--font-display); font-weight: 780; font-size: 1.2rem; color: var(--text-muted); font-style: italic; }
@media (max-width: 760px) { .pagegrid { grid-template-columns: 1fr; } .pagegrid__vs { padding: var(--s3) 0; } .pg-dots--many { grid-template-columns: repeat(20,7px); } }

/* ============ TIERS ============ */
.tiers { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s5); align-items: stretch; }
.tier { border: 1.5px solid var(--line); border-radius: var(--radius-lg); padding: var(--s7); display: flex; flex-direction: column; gap: var(--s4); background: var(--paper); }
.tier--win { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass); }
.tier__top { display: flex; justify-content: space-between; align-items: center; }
.tier__n { font-family: var(--font-display); font-weight: 780; font-size: 1.5rem; color: var(--brass); }
.tier__tag { font-family: var(--font-cond); font-weight: 600; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; }
.tier--win .tier__tag { color: var(--brass); border-color: var(--brass); }
.tier__name { font-family: var(--font-display); font-weight: 740; font-size: var(--fs-h3); letter-spacing: -.02em; }
.tier__desc { color: var(--text-muted); font-size: var(--fs-small); flex: 1; }
.tier__price { font-family: var(--font-display); font-weight: 780; font-size: 1.6rem; letter-spacing: -.02em; }
.tier__price strong { color: var(--brass); }
.tier__price span { display: block; font-family: var(--font-cond); font-weight: 600; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-top: 5px; }
.tier__for { display: flex; gap: .5em; align-items: flex-start; font-size: .85rem; color: var(--text-muted); }
.tier__for svg { color: var(--brass); flex: none; margin-top: 3px; }
.tiers__note { display: flex; gap: .5em; align-items: center; justify-content: center; text-align: center; max-width: 64ch; margin: var(--s6) auto 0; font-family: var(--font-cond); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; color: var(--text-muted); }
.tiers__note svg { color: var(--brass); flex: none; }
.claimcta__meter { margin-bottom: var(--s6); }
@media (max-width: 880px) { .tiers { grid-template-columns: 1fr; } }

/* ============ CLAIM-A-SLOT (final CTA, dark) ============ */
.claimcta { text-align: center; position: relative; overflow: hidden; }
.claimcta__inner { max-width: 980px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.claimcta .eyebrow { justify-content: center; margin-bottom: var(--s5); }
.claimcta__title { font-size: var(--fs-display); max-width: 16ch; margin: 0 auto var(--s6); font-weight: 780; }
.claimcta__sub { color: var(--on-dark-muted); max-width: 52ch; margin: 0 auto var(--s7); font-size: var(--fs-lead); }
.claimcta__actions { display: flex; gap: var(--s4); justify-content: center; flex-wrap: wrap; }
.claimcta__reassure { margin-top: var(--s6); font-family: var(--font-cond); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .85rem; color: var(--on-dark-muted); display: inline-flex; gap: .5em; align-items: center; }

/* ============ QUALIFY / SCARCITY band ============ */
.qualify { text-align: center; }
.qualify__inner { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.qualify .eyebrow { justify-content: center; margin-bottom: var(--s5); }
.qualify h2 { max-width: 20ch; margin-bottom: var(--s5); }
.qualify .lead { max-width: 56ch; color: var(--on-dark-muted); margin-bottom: var(--s6); }
.qualify__meter { margin-bottom: var(--s6); }
.qualify__points { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s4) var(--s6); margin-bottom: var(--s4); }
.qualify__points li { display: inline-flex; align-items: center; gap: .5em; font-family: var(--font-cond); font-weight: 600; font-size: .92rem; letter-spacing: .03em; text-transform: uppercase; color: var(--cream); }
.qualify__points li svg { color: var(--brass-bright); flex: none; }
@media (max-width: 640px) { .qualify__points { flex-direction: column; align-items: center; gap: var(--s3); } }