/* ============================================================
   CreatorTax — About page styles
   Ported from _handoff_about_page/ui_kits/marketing/about.html <style>
   (source of truth). Nav + footer are the site's existing ones (kept).
   ============================================================ */
:root {
  --container: 1140px;
  --radius-xl: 24px;
  --radius-lg: 18px;
  --shadow-raised: 0 8px 24px rgba(27,20,16,0.08);
}

/* Dark root so iOS Safari's bottom overscroll blends with the dark footer
   instead of showing a white gap below it */
html { background: var(--ct-plum, #15151C); }
body { background: var(--ct-off-white); color: var(--ct-black); line-height: 1.7; -webkit-font-smoothing: antialiased; }

/* hero */
.about-hero { padding: 5.5rem 2rem 3rem; text-align: center; position: relative; overflow: hidden; }
.about-hero .blob { position: absolute; border-radius: 50%; z-index: 0; }
.about-hero .b1 { width: 280px; height: 280px; background: var(--ct-orange-soft); top: -90px; left: 6%; }
.about-hero .b2 { width: 200px; height: 200px; background: var(--ct-violet-soft); bottom: -60px; right: 8%; }
.about-hero-in { max-width: 880px; margin: 0 auto; position: relative; z-index: 1; }
.about-eyebrow { display: inline-block; padding: .4rem .9rem; border-radius: 100px; background: var(--ct-orange-soft); color: var(--ct-orange-deep); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; }
.about-hero h1 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 4rem; line-height: 1.04; letter-spacing: -2px; margin: 1.2rem 0 1.2rem; color: var(--ct-black); }
.about-hero h1 .hl { color: var(--ct-orange); }
.about-hero p { font-size: 1.3rem; color: var(--ct-dark-gray); max-width: 600px; margin: 0 auto; line-height: 1.5; }

/* stat band */
.stats { max-width: var(--container); margin: 3rem auto 0; display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid var(--ct-line); border-radius: var(--radius-xl); overflow: hidden; background: #fff; }
.stats > div { padding: 2rem; text-align: center; }
.stats > div:not(:last-child) { border-right: 1px solid var(--ct-line); }
.stats .fig { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 2.8rem; letter-spacing: -1.5px; color: var(--ct-black); line-height: 1; }
.stats .lab { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--ct-muted); margin-top: .6rem; }

/* story */
.story { max-width: 980px; margin: 0 auto; padding: 6rem 2rem 4rem; }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.story h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 2.4rem; letter-spacing: -1px; margin-bottom: 1.3rem; line-height: 1.1; color: var(--ct-black); }
.story h2 .hl { color: var(--ct-orange); }
.story p { font-size: 1.1rem; line-height: 1.75; color: var(--ct-dark-gray); margin-bottom: 1.2rem; }
.story-media img { width: 100%; height: auto; display: block; border-radius: var(--radius-xl); }

/* values */
.values { background: var(--ct-paper-2); padding: 6rem 2rem; }
.values-in { max-width: var(--container); margin: 0 auto; }
.values-head { text-align: center; max-width: 640px; margin: 0 auto 3rem; }
.values-head .eyebrow { display: inline-block; padding: .4rem .9rem; border-radius: 100px; background: var(--ct-orange-soft); color: var(--ct-orange-deep); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 1rem; }
.values-head h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 2.6rem; letter-spacing: -1.2px; color: var(--ct-black); }
.vgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; }
.vcard { background: #fff; border: 1px solid var(--ct-line); border-radius: var(--radius-xl); padding: 2.5rem; transition: transform .25s, border-color .25s, box-shadow .25s; }
.vcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-raised); }
.vicon { width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.4rem; }
.vicon svg { width: 28px; height: 28px; stroke: #fff; fill: none; stroke-width: 2; }
.vcard:nth-child(1) .vicon { background: var(--ct-orange); }
.vcard:nth-child(1):hover { border-color: var(--ct-orange); }
.vcard:nth-child(2) .vicon { background: var(--ct-violet); }
.vcard:nth-child(2):hover { border-color: var(--ct-violet); }
.vcard:nth-child(3) .vicon { background: var(--ct-mint); }
.vcard:nth-child(3):hover { border-color: var(--ct-mint); }
.vcard h3 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.4rem; letter-spacing: -.5px; margin-bottom: .7rem; color: var(--ct-black); }
.vcard p { color: var(--ct-dark-gray); font-size: 1rem; line-height: 1.6; }

/* privacy (dark highlight) */
.privacy { background: var(--ct-black); color: #fff; padding: 6rem 2rem; }
.privacy-in { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr; gap: 2.5rem; align-items: start; }
.privacy-badge { width: 96px; height: 96px; border-radius: 50%; background: var(--ct-mint); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.privacy-badge svg { width: 44px; height: 44px; stroke: #16161C; fill: none; stroke-width: 2; }
.privacy h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 2.2rem; letter-spacing: -1px; margin-bottom: 1.2rem; color: #fff; }
.privacy h2 .hl { color: var(--ct-orange); }
.privacy p { color: var(--ct-light-gray); font-size: 1.12rem; line-height: 1.7; margin-bottom: 1.1rem; }

/* two-up text blocks */
.blocks { max-width: 980px; margin: 0 auto; padding: 6rem 2rem 2rem; }
.blocks h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 2.2rem; letter-spacing: -1px; margin-bottom: 1.2rem; color: var(--ct-black); }
.blocks h2 .hl { color: var(--ct-orange); }
.blocks p { font-size: 1.1rem; line-height: 1.75; color: var(--ct-dark-gray); margin-bottom: 1.2rem; }

/* team + platform pills */
.team { max-width: 980px; margin: 0 auto; padding: 3rem 2rem 6rem; }
.team h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 2.2rem; letter-spacing: -1px; margin-bottom: 1.2rem; color: var(--ct-black); }
.team h2 .hl { color: var(--ct-orange); }
.team p { font-size: 1.1rem; line-height: 1.75; color: var(--ct-dark-gray); margin-bottom: 1.8rem; max-width: 720px; }
.team-pills { display: flex; flex-wrap: wrap; gap: .7rem; }
.tpill { padding: .55rem 1.2rem; border-radius: 100px; font-weight: 700; font-size: .95rem; color: #16161C; }

/* cta (sunset) — override the shared .cta-banner from creator-refresh */
.cta-banner { background: var(--ct-gradient-sunset, linear-gradient(120deg,#FFC93C,#FF6B35 45%,#FF3D8B)) !important; padding: 5.5rem 2rem !important; text-align: center; }
.cta-banner h2 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 3rem; color: #fff; letter-spacing: -1.5px; margin-bottom: 1rem; }
.cta-banner p { font-size: 1.2rem; color: #fff; opacity: .95; margin-bottom: 2rem; }
.cta-banner .btn { display: inline-flex; align-items: center; gap: .5rem; background: var(--ct-black); color: #fff; padding: 1.05rem 2.2rem; border-radius: 100px; font-weight: 700; text-decoration: none; transition: transform .2s; }
.cta-banner .btn:hover { transform: translateY(-2px); }

@media (max-width: 860px) {
  .about-hero h1 { font-size: 2.4rem; }
  .stats { grid-template-columns: 1fr; }
  .stats > div:not(:last-child) { border-right: none; border-bottom: 1px solid var(--ct-line); }
  .story-grid { grid-template-columns: 1fr; gap: 2rem; }
  .vgrid { grid-template-columns: 1fr; }
  .privacy-in { grid-template-columns: 1fr; }
  .cta-banner h2 { font-size: 2.2rem; }
}