/* Mint SEO — About page. Matches Figma board 822:2. */

/* ===== HERO — identity bento (822:3) ===== */
.ab-hero { background: var(--page); padding: 10px 48px clamp(40px, 5vw, 64px); }
.ab-hero__in { max-width: 1312px; margin: 0 auto; }
.ab-hero__top { display: grid; grid-template-columns: 452px 1fr; gap: 18px; margin-bottom: 18px; align-items: stretch; }
.ab-id { background: radial-gradient(120% 100% at 20% 0%, #17423b, #0a1f1c 68%); color: #fff; border-radius: 20px; padding: 40px 36px; display: flex; flex-direction: column; min-width: 0; }
.ab-id .eyebrow { font-size: 15px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint-light); margin: 0 0 16px; }
.ab-id h1 { margin: 0; font-size: clamp(32px, 3vw, 42px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: #fff; } .ab-id h1 em { font-style: normal; color: var(--mint-light); }
.ab-id .sub { margin: 16px 0 0; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,0.75); }
.ab-id__rating { display: inline-flex; align-items: center; gap: 10px; margin: 22px 0 0; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 9px 16px; width: fit-content; font-size: 15px; color: rgba(255,255,255,0.85); } .ab-id__rating .st { color: #f5a623; letter-spacing: 1px; } .ab-id__rating b { color: #fff; }
.ab-id__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 24px; }
.ab-id .btn { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; padding: 13px 22px; border-radius: 11px; text-decoration: none; transition: background 0.2s, transform 0.2s; }
.ab-id .btn--mint { background: var(--mint-ink); color: #fff; } .ab-id .btn--mint:hover { background: #35b0a7; transform: translateY(-2px); }
.ab-id .btn--ghost { background: rgba(255,255,255,0.06); color: #fff; border: 1px solid rgba(255,255,255,0.2); } .ab-id .btn--ghost:hover { background: rgba(255,255,255,0.12); }
.ab-map { position: relative; border-radius: 20px; overflow: hidden; min-height: 340px; min-width: 0; } .ab-map img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-map__lbl { position: absolute; left: 20px; bottom: 20px; background: #fff; border-radius: 12px; padding: 14px 20px; box-shadow: 0 14px 30px -14px rgba(0,0,0,0.4); } .ab-map__lbl .l { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mint-ink); } .ab-map__lbl .v { font-size: 17px; font-weight: 800; color: var(--ink); margin-top: 2px; }
.ab-hero__bottom { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.ab-stat { border-radius: 20px; padding: 30px 32px; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.ab-stat .l { font-size: 14px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.ab-stat .v { font-size: clamp(32px, 3.6vw, 44px); font-weight: 800; letter-spacing: -0.02em; line-height: 1; } .ab-stat .d { margin-top: 8px; font-size: 15px; }
.ab-stat--tint { background: var(--mint-tint); } .ab-stat--tint .l { color: var(--mint-deep); } .ab-stat--tint .v { color: var(--ink); } .ab-stat--tint .d { color: var(--body); }
.ab-stat--dark { background: radial-gradient(120% 130% at 80% 0%, #17423b, #0a1f1c); color: #fff; } .ab-stat--dark .l { color: var(--mint-light); } .ab-stat--dark .v { color: #fff; } .ab-stat--dark .d { color: rgba(255,255,255,0.72); }
.ab-stat--who { background: #fff; border: 1px solid var(--border); } .ab-stat--who .l { color: var(--mint-ink); } .ab-stat--who .v { font-size: 24px; color: var(--ink); } .ab-stat--who .d { color: var(--body); }
@media (max-width: 960px) {
  .ab-hero { padding: 24px 18px 40px; }
  .ab-hero__top { grid-template-columns: 1fr; } .ab-map { min-height: 260px; }
  .ab-hero__bottom { grid-template-columns: 1fr; }
}

/* ===== FOUNDER — Meet John (828:2) ===== */
.ab-fn { background: var(--mint-tint); }
.ab-fn__in { max-width: 1160px; margin: 0 auto; padding: clamp(56px, 6vw, 84px) 48px; display: grid; grid-template-columns: 440px 1fr; gap: 72px; align-items: center; }
.ab-fn__photo { border-radius: 20px; overflow: hidden; box-shadow: 0 40px 80px -50px rgba(20,20,19,0.5); min-width: 0; line-height: 0; } .ab-fn__photo img { width: 100%; height: auto; aspect-ratio: 44 / 58; object-fit: cover; display: block; }
.ab-fn__c { min-width: 0; }
.ab-fn__c .eyebrow { font-size: 15px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint-ink); margin: 0 0 14px; }
.ab-fn__c h2 { margin: 0; font-size: clamp(30px, 3.4vw, 42px); font-weight: 800; line-height: 1.06; letter-spacing: -0.02em; color: var(--ink); } .ab-fn__c h2 em { font-style: normal; color: var(--mint); }
.ab-fn__c p { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: var(--body); } .ab-fn__c p b { color: var(--ink); font-weight: 800; }
.ab-fn__stats { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(20,20,19,0.1); }
.ab-fn__stats .v { font-size: clamp(28px, 3vw, 36px); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); line-height: 1; } .ab-fn__stats .l { margin-top: 4px; font-size: 15px; color: var(--body); }
@media (max-width: 860px) { .ab-fn__in { grid-template-columns: 1fr; gap: 32px; padding: 48px 22px; } .ab-fn__photo { max-width: 380px; } }

/* ===== SHOPIFY SPECIALISM (866:158) ===== */
.ab-sp { background: #f4f4f2; }
.ab-sp__in { max-width: 1200px; margin: 0 auto; padding: clamp(56px, 6vw, 84px) 48px; }
.ab-sp__head { max-width: 830px; margin-bottom: clamp(32px, 4vw, 48px); }
.ab-sp__head .eyebrow { font-size: 15px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint-ink); margin: 0 0 14px; }
.ab-sp__head h2 { margin: 0; font-size: clamp(30px, 3.8vw, 46px); font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; color: var(--ink); } .ab-sp__head h2 em { font-style: normal; color: var(--mint); }
.ab-sp__head p { margin: 14px 0 0; font-size: 17px; line-height: 1.55; color: var(--body); }
.ab-sp__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ab-sp__card { background: #fff; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; min-width: 0; }
.ab-sp__sk { height: 96px; background: #fafaf8; border-bottom: 1px solid #f0f0ec; padding: 16px; display: flex; flex-direction: column; gap: 7px; }
.ab-sp__sk i { display: block; background: #e6e6e1; border-radius: 4px; height: 9px; }
.ab-sp__sk .row { display: flex; gap: 7px; } .ab-sp__sk .row i { flex: 1; height: 22px; }
.ab-sp__sk--home i:first-child { width: 60%; } .ab-sp__sk--coll .row i { height: 20px; } .ab-sp__sk--prod .big { height: 40px; } .ab-sp__sk--blog i { width: 90%; } .ab-sp__sk--blog i:nth-child(2){width:70%;} .ab-sp__sk--blog i:nth-child(3){width:80%;}
.ab-sp__card .b { padding: 22px; }
.ab-sp__card .e { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mint-ink); margin: 0 0 8px; }
.ab-sp__card h4 { margin: 0 0 8px; font-size: 20px; font-weight: 800; color: var(--ink); } .ab-sp__card p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--body); }
@media (max-width: 1000px) { .ab-sp__in { padding: 48px 22px; } .ab-sp__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ab-sp__grid { grid-template-columns: 1fr; } }

/* ===== PHILOSOPHY (843:158) ===== */
.ab-ph { background: #f4f4f2; }
.ab-ph__in { max-width: 1200px; margin: 0 auto; padding: clamp(56px, 6vw, 84px) 48px; }
.ab-ph__head { max-width: 830px; margin-bottom: clamp(28px, 3vw, 40px); }
.ab-ph__head .eyebrow { font-size: 15px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint-ink); margin: 0 0 12px; }
.ab-ph__head h2 { margin: 0; font-size: clamp(30px, 3.8vw, 46px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); } .ab-ph__head h2 em { font-style: normal; color: var(--mint); }
.ab-ph__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ab-ph__card { border-radius: 18px; padding: 30px 32px; min-width: 0; }
.ab-ph__card--pb { background: #fff; border: 1px solid var(--border); } .ab-ph__card--df { background: radial-gradient(120% 130% at 85% 0%, #17423b, #0a1f1c); color: #fff; }
.ab-ph__card .e { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mint-ink); margin: 0 0 8px; } .ab-ph__card--df .e { color: var(--mint-light); }
.ab-ph__card h3 { margin: 0 0 12px; font-size: 22px; font-weight: 800; color: var(--ink); } .ab-ph__card--df h3 { color: #fff; }
.ab-ph__card p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--body); } .ab-ph__card--df p { color: rgba(255,255,255,0.78); }
.ab-ph__foot { margin: 26px 0 0; font-size: 18px; font-weight: 800; line-height: 1.5; color: var(--ink); } .ab-ph__foot em { font-style: normal; color: var(--mint); }
@media (max-width: 820px) { .ab-ph__in { padding: 48px 22px; } .ab-ph__cards { grid-template-columns: 1fr; } }

/* ===== APPROACH — 6 signals (873:158) ===== */
.ab-ap { background: var(--mint-tint); }
.ab-ap__in { max-width: 1160px; margin: 0 auto; padding: clamp(56px, 6vw, 84px) 48px; }
.ab-ap__head { max-width: 720px; margin-bottom: clamp(28px, 3vw, 40px); }
.ab-ap__head .eyebrow { font-size: 15px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint-ink); margin: 0 0 12px; }
.ab-ap__head h2 { margin: 0; font-size: clamp(30px, 3.8vw, 46px); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); } .ab-ap__head h2 em { font-style: normal; color: var(--mint); }
.ab-ap__head p { margin: 14px 0 0; font-size: 17px; line-height: 1.55; color: var(--body); }
.ab-ap__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ab-ap__col { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 28px 32px; min-width: 0; }
.ab-ap__hh { display: flex; align-items: baseline; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid var(--mint); margin-bottom: 6px; } .ab-ap__hh .n { font-size: 16px; font-weight: 800; color: var(--mint-ink);  } .ab-ap__hh b { font-size: 21px; font-weight: 800; color: var(--ink); }
.ab-ap__item { padding: 18px 0; border-bottom: 1px solid #f2f2ee; } .ab-ap__col .ab-ap__item:last-child { border-bottom: 0; }
.ab-ap__item b { display: block; font-size: 17px; font-weight: 800; color: var(--ink); margin-bottom: 5px; } .ab-ap__item p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body); }
@media (max-width: 820px) { .ab-ap__in { padding: 48px 22px; } .ab-ap__grid { grid-template-columns: 1fr; } }

/* mobile: keep the 3 founder stats on one even row (was wrapping 2+1, orphaning the 3rd) */
@media (max-width: 560px) { .ab-fn__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .ab-fn__stats .v { font-size: 24px; } }