/* Grab & Go Social site. Orange #F47721 and charcoal #171717 come from the new logo sheet. */
:root {
  --primary: #F47721;
  --primary-dark: #D9600F;
  --primary-soft: #FFEDE0;
  --ink: #171717;
  --ink-2: #3D3A37;
  --muted: #6F6A64;
  --paper: #F7F2ED;
  --cream: #FDF6F0;
  --white: #FFFFFF;
  --line: #EAE2D9;
  --green: #0F8A5F;
  --sun: #F2B705;
  --radius: 18px;
  --shadow: 0 12px 40px rgba(23, 23, 23, .10);
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); color: var(--ink); background: var(--white); line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
em.serif, .serif { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--primary); }
p { margin: 0 0 1em; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.section { padding: 96px 0; }
.section.tint { background: var(--paper); }
.section.cream { background: var(--cream); }
.section.dark { background: var(--ink); color: var(--white); }
.section.dark .muted { color: #A6ADBB; }
.center { text-align: center; }
.muted { color: var(--muted); }
.eyebrow { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); margin-bottom: 14px; }
.lede { font-size: 1.15rem; color: var(--ink-2); max-width: 640px; }
.center .lede { margin-left: auto; margin-right: auto; }

/* Buttons */
.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 26px; border-radius: 999px; font-weight: 700; font-size: 1rem; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .15s, background .15s, box-shadow .15s; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--primary); color: var(--white); box-shadow: 0 8px 24px rgba(244, 119, 33, .3); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-ghost { background: var(--white); color: var(--ink); border-color: var(--line); }
.btn-lg { padding: 18px 32px; font-size: 1.08rem; }
.btn-note { display: block; font-size: .85rem; color: var(--muted); margin-top: 10px; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 70px; }
.logo { white-space: nowrap; display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.1rem; text-decoration: none; letter-spacing: -0.01em; }
.logo-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--primary); color: var(--white); display: grid; place-items: center; font-weight: 800; font-size: .95rem; }
.nav-links { display: flex; gap: 6px; margin-left: 12px; }
.nav-item { position: relative; }
.nav-item > a, .nav-item > button { background: none; border: 0; font: inherit; font-weight: 600; font-size: .95rem; color: var(--ink-2); padding: 10px 14px; border-radius: 999px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.nav-item > a:hover, .nav-item > button:hover, .nav-item.open > button { background: var(--paper); color: var(--ink); }
.caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 300px; background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 10px; display: none; }
.nav-item:hover .menu, .nav-item.open .menu { display: block; }
.nav-item:hover .menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.menu-label { font-size: .7rem; font-weight: 700; letter-spacing: .14em; color: var(--muted); padding: 8px 12px 4px; }
.menu a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; }
.menu a:hover { background: var(--paper); }
.menu a strong { display: block; font-size: .95rem; }
.menu a span { font-size: .84rem; color: var(--muted); }
.nav-cta { margin-left: auto; }
.nav-cta .btn { padding: 11px 20px; font-size: .95rem; }
.burger { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.burger span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; }

/* Hero */
.hero { background: radial-gradient(1200px 500px at 85% -10%, var(--primary-soft), transparent 60%), var(--cream); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; min-height: 680px; }
.hero-copy { padding: 64px 0; }
.pill { display: inline-flex; align-items: center; gap: 8px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 22px; }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(15, 138, 95, .15); }
.checks { list-style: none; padding: 0; margin: 24px 0 30px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; font-size: 1.02rem; }
.checks li::before { content: "✓"; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: var(--white); font-size: .75rem; font-weight: 800; display: grid; place-items: center; margin-top: 2px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.guarantee { margin-top: 18px; font-size: .88rem; color: var(--muted); }

.hero-reel { position: relative; height: 680px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.reel-col { display: flex; flex-direction: column; gap: 14px; animation: reel-up 38s linear infinite; }
.reel-col.down { animation-name: reel-down; animation-duration: 44s; }
.reel-col:nth-child(3) { animation-duration: 34s; }
.hero-reel:hover .reel-col { animation-play-state: paused; }
@keyframes reel-up { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes reel-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .reel-col, .marquee-track { animation: none !important; } }

/* Post cards (mock social posts) */
.post { border-radius: 16px; overflow: hidden; background: var(--white); box-shadow: 0 6px 20px rgba(23, 23, 23, .08); border: 1px solid var(--line); flex: none; }
.post-head { display: flex; align-items: center; gap: 8px; padding: 9px 10px; font-size: .72rem; font-weight: 600; }
.post-head .av { width: 22px; height: 22px; border-radius: 50%; background: var(--primary); color: var(--white); display: grid; place-items: center; font-size: .6rem; font-weight: 800; }
.post-art { aspect-ratio: 4 / 5; padding: 16px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
.post.video .post-art { aspect-ratio: 9 / 14; }
.post-art img, .post-art video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post-art .k { font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .8; margin-bottom: 6px; }
.post-art .t { font-size: .98rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.post-art .play { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255, 255, 255, .92); display: grid; place-items: center; }
.post-art .play::after { content: ""; border-left: 14px solid var(--ink); border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; }
.post-foot { display: flex; gap: 12px; padding: 8px 10px 10px; font-size: .9rem; opacity: .6; }
.theme-orange { background: linear-gradient(160deg, #FF8A3D, #E5600C); color: #fff; }
.theme-ink { background: linear-gradient(160deg, #2A2724, #171717); color: #fff; }
.theme-charcoal { background: linear-gradient(160deg, #3A3633, #201E1C); color: #FFB27A; }
.theme-cream { background: linear-gradient(160deg, #FFF8F1, #F6E6D6); color: var(--ink); }

/* Trust bar */
.trust { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); }
.trust .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 34px; padding-bottom: 34px; }
.stat strong { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; }
.stat span { font-size: .9rem; color: var(--muted); }

/* Video placeholder */
.video-ph { position: relative; aspect-ratio: 16 / 9; max-width: 920px; margin: 40px auto 0; border-radius: 24px; background: repeating-linear-gradient(45deg, #EEF1F7, #EEF1F7 14px, #E6EAF2 14px, #E6EAF2 28px); border: 2px dashed #C5CCDA; display: grid; place-items: center; color: var(--muted); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.video-ph.square { aspect-ratio: 1; max-width: 420px; margin: 0; }
.video-ph.tall { aspect-ratio: 9 / 16; max-width: none; margin: 0; }
.video-ph .play-big { width: 78px; height: 78px; border-radius: 50%; background: var(--primary); display: grid; place-items: center; margin: 0 auto 14px; box-shadow: 0 10px 30px rgba(244, 119, 33, .35); }
.video-ph .play-big::after { content: ""; border-left: 22px solid #fff; border-top: 14px solid transparent; border-bottom: 14px solid transparent; margin-left: 6px; }
.dark .video-ph { background: repeating-linear-gradient(45deg, #1A1F29, #1A1F29 14px, #161A23 14px, #161A23 28px); border-color: #333A48; color: #8790A3; }
.video-embed { display: block; width: 100%; max-width: 920px; aspect-ratio: 16 / 9; margin: 40px auto 0; border-radius: 24px; background: #0b0908; box-shadow: 0 24px 60px rgba(23, 19, 16, .18); }

/* Cards and grids */
.grid-2, .grid-3, .grid-4 { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px; }
.card .num { font-size: .8rem; font-weight: 800; color: var(--primary); letter-spacing: .1em; margin-bottom: 12px; display: block; }
.card p:last-child { margin-bottom: 0; }
.head { margin-bottom: 48px; }

/* Myths */
.myth { background: var(--white); border-radius: var(--radius); padding: 30px; border: 1px solid var(--line); }
.myth .q { font-family: var(--serif); font-style: italic; font-size: 1.55rem; line-height: 1.2; margin-bottom: 14px; }
.myth .x { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .12em; color: #C0392B; background: #FDECEA; padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; }

/* Pillars (Found / Remembered / Trusted / Recommended) */
.pillar { border-radius: 22px; padding: 34px; background: var(--white); border: 1px solid var(--line); display: flex; flex-direction: column; }
.pillar .tag { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 4px; }
.pillar .when { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--primary); margin-bottom: 16px; }
.pillar ul { margin: 0 0 20px; padding-left: 20px; color: var(--ink-2); }
.pillar ul li { margin-bottom: 6px; }
.pillar .btn { margin-top: auto; align-self: flex-start; }

/* Examples */
.filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 34px; }
.filters button { border: 1px solid var(--line); background: var(--white); border-radius: 999px; padding: 9px 18px; font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer; }
.filters button.on { background: var(--ink); color: var(--white); border-color: var(--ink); }
.examples { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: start; }

/* Steps */
.step { position: relative; padding: 30px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); }
.step .n { width: 44px; height: 44px; border-radius: 12px; background: var(--primary-soft); color: var(--primary); font-weight: 800; display: grid; place-items: center; margin-bottom: 18px; }
.chat { margin-top: 18px; display: grid; gap: 8px; font-size: .88rem; }
.bubble { padding: 9px 13px; border-radius: 14px; max-width: 88%; }
.bubble.you { background: var(--paper); }
.bubble.us { background: var(--primary); color: #fff; justify-self: end; }
.log { margin-top: 18px; font-size: .85rem; display: grid; gap: 6px; }
.log div { display: flex; gap: 8px; align-items: center; }
.log div::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }

/* The math */
.math { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; max-width: 760px; margin: 0 auto 30px; }
.math .side { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 22px; padding: 34px 20px; text-align: center; }
.math .big { font-size: clamp(2.6rem, 6vw, 3.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.math .lbl { font-size: .8rem; letter-spacing: .14em; color: #A6ADBB; margin-top: 10px; font-weight: 700; }
.math .vs { font-family: var(--serif); font-style: italic; font-size: 1.8rem; color: #A6ADBB; }

/* Comparison table */
.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: .95rem; }
.compare th, .compare td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.compare tr:last-child td { border-bottom: 0; }
.compare th { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--paper); }
.compare td:first-child { font-weight: 700; }
.compare .us { background: var(--primary-soft); font-weight: 700; }
.table-scroll { overflow-x: auto; }

/* Testimonials */
.vid-testis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 900px; margin: 0 auto 48px; }
.vid-testi p { margin-top: 12px; font-weight: 700; }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.quote { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.quote .stars { color: var(--sun); letter-spacing: 2px; margin-bottom: 10px; }
.quote .who { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.quote .pic { width: 46px; height: 46px; border-radius: 50%; background: var(--primary-soft); display: grid; place-items: center; font-weight: 800; color: var(--primary); }
.quote .who small { display: block; color: var(--muted); }
.shots { columns: 3; column-gap: 18px; }
.shot { break-inside: avoid; margin-bottom: 18px; border-radius: 14px; border: 2px dashed #C5CCDA; background: var(--white); display: grid; place-items: center; color: var(--muted); font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 12px; }

/* Marquee of DM / lead screenshots */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 16px; width: max-content; animation: marquee 50s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
.dm { width: 260px; background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 16px; font-size: .88rem; flex: none; }
.dm .from { font-weight: 700; font-size: .8rem; color: var(--muted); margin-bottom: 8px; }
.dm .msg { background: var(--paper); padding: 10px 12px; border-radius: 14px; }

/* Pricing */
.price-wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: stretch; max-width: 1000px; margin: 0 auto; }
.price-card { background: var(--white); border: 2px solid var(--primary); border-radius: 26px; padding: 40px; position: relative; box-shadow: var(--shadow); }
.price-card .badge { position: absolute; top: -14px; left: 40px; background: var(--primary); color: #fff; font-size: .75rem; font-weight: 800; letter-spacing: .1em; padding: 6px 14px; border-radius: 999px; }
.price { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 4px; }
.price .amt { font-size: 4.4rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.price .per { font-size: 1.05rem; color: var(--muted); font-weight: 600; }
.price-card .then { font-size: 1rem; color: var(--ink-2); margin-bottom: 22px; }
.price-card .btn { width: 100%; }
.includes { background: var(--paper); border-radius: 26px; padding: 40px; }
.includes ul { list-style: none; padding: 0; margin: 0; }
.includes li { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.includes li:last-child { border-bottom: 0; }
.includes li::before { content: "✓"; color: var(--primary); font-weight: 800; }

/* Timeline */
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.tl { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.tl .when { font-size: .75rem; font-weight: 800; letter-spacing: .12em; color: var(--primary); text-transform: uppercase; }
.tl .who { display: inline-block; font-size: .7rem; font-weight: 800; letter-spacing: .1em; padding: 3px 9px; border-radius: 999px; background: var(--paper); margin: 10px 0 12px; }
.tl .who.us { background: var(--primary-soft); color: var(--primary); }
.tl .time { font-size: .85rem; color: var(--muted); margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: 16px; margin-bottom: 12px; padding: 0 24px; }
.faq summary { list-style: none; cursor: pointer; padding: 22px 0; font-weight: 700; font-size: 1.05rem; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--primary); line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-2); padding-bottom: 22px; margin: 0; }

/* Final CTA */
.final { background: var(--primary); color: #fff; border-radius: 32px; padding: 72px 40px; text-align: center; }
.final h2 { color: #fff; }
.final .lede { color: rgba(255, 255, 255, .85); }
.final .btn { background: #fff; color: var(--primary); }
.final .btn-note { color: rgba(255, 255, 255, .75); }

/* Footer */
footer { padding: 56px 0 40px; font-size: .9rem; color: var(--muted); }
footer .wrap > div { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; }
footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
footer nav a { text-decoration: none; }
.disclaimer { font-size: .78rem; margin-top: 28px; max-width: 900px; }

/* Demo page calendar */
.cal-shell { background: var(--white); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); overflow: hidden; }
.cal-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.cal-bar strong { font-size: 1.2rem; }
.view-toggle { display: flex; gap: 4px; background: var(--paper); padding: 4px; border-radius: 10px; }
.view-toggle button { border: 0; background: none; padding: 7px 12px; border-radius: 8px; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; }
.view-toggle button.on { background: var(--white); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal .dow { padding: 10px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--paper); }
.cal .day { min-height: 128px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 8px; font-size: .8rem; }
.cal .day:nth-child(7n) { border-right: 0; }
.cal .day .d { font-weight: 700; color: var(--muted); margin-bottom: 6px; display: block; }
.cal .day.empty { background: #FAFAFB; }
.cal .slot { width: 100%; text-align: left; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; }
.cal .slot .mini { border-radius: 8px; padding: 8px; font-size: .7rem; font-weight: 700; line-height: 1.2; position: relative; min-height: 64px; display: flex; align-items: flex-end; }
.cal .slot .mini::after { content: "+"; position: absolute; top: 4px; right: 6px; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--ink); display: grid; place-items: center; font-size: .8rem; }
.cal .slot:hover .mini { outline: 2px solid var(--primary); outline-offset: 2px; }
.stack { display: none; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 22px; }
.cal-shell.stacked .cal { display: none; }
.cal-shell.stacked .stack { display: grid; }
.stack button { border: 0; padding: 0; background: none; cursor: pointer; text-align: left; font: inherit; }

.modal { position: fixed; inset: 0; background: rgba(23, 23, 23, .6); z-index: 100; display: none; place-items: center; padding: 20px; }
.modal.open { display: grid; }
.modal-card { background: var(--white); border-radius: 22px; max-width: 760px; width: 100%; max-height: 90vh; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; }
.modal-card .post { border: 0; border-radius: 0; box-shadow: none; }
.modal-body { padding: 28px; position: relative; }
.modal-body .close { position: absolute; top: 14px; right: 14px; border: 0; background: var(--paper); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 1.1rem; }
.modal-body .lbl { font-size: .72rem; font-weight: 800; letter-spacing: .12em; color: var(--muted); margin: 18px 0 6px; text-transform: uppercase; }
.modal-body .tags { color: var(--primary); font-weight: 600; }

/* Responsive */
@media (max-width: 1000px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .hero-copy { padding: 48px 0 24px; }
  .hero-reel { height: 460px; }
  .grid-4, .examples, .timeline, .stack { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .quotes { grid-template-columns: 1fr 1fr; }
  .price-wrap { grid-template-columns: 1fr; }
  .shots { columns: 2; }
}
@media (max-width: 760px) {
  .section { padding: 64px 0; }
  .wrap { padding: 0 16px; }
  .nav-links { display: none; }
  .nav-cta .btn { padding: 8px 13px; font-size: .84rem; }
  .nav .wrap { gap: 8px; }
  .nav .logo { font-size: .95rem; gap: 8px; }
  .nav .logo-mark { width: 30px; height: 30px; }
  .burger { padding: 6px 0 6px 4px; }
  .burger { display: block; margin-left: 4px; }
  .nav.open .nav-links { display: flex; flex-direction: column; position: absolute; top: 70px; left: 0; right: 0; background: var(--white); border-bottom: 1px solid var(--line); padding: 12px 16px 20px; margin: 0; }
  .nav.open .menu { position: static; display: block; box-shadow: none; border: 0; padding: 0 0 0 12px; min-width: 0; }
  .hero-reel { grid-template-columns: repeat(2, 1fr); height: 420px; }
  .hero-reel .reel-col:nth-child(3) { display: none; }
  .trust .wrap { grid-template-columns: 1fr 1fr; }
  .grid-2, .grid-3, .quotes, .vid-testis { grid-template-columns: 1fr; }
  .grid-4, .timeline { grid-template-columns: 1fr; }
  .examples, .stack { grid-template-columns: 1fr 1fr; gap: 12px; }
  .math { grid-template-columns: 1fr; }
  .shots { columns: 1; }
  .final { padding: 52px 22px; border-radius: 24px; }
  .price-card, .includes { padding: 28px 22px; }
  .cal .day { min-height: 90px; padding: 4px; }
  .cal .slot .mini { font-size: 0; min-height: 40px; }
  .cal .dow { font-size: .6rem; padding: 8px 4px; }
  .modal-card { grid-template-columns: 1fr; }
  .video-ph.square { max-width: none; }
}

/* Logo */
.logo img { height: 40px; width: auto; }
footer .logo img { height: 34px; }

/* Post card extras */
.type-chip { margin-left: auto; font-size: .62rem; font-weight: 700; letter-spacing: .04em; color: var(--primary); background: var(--primary-soft); padding: 3px 8px; border-radius: 999px; }
.post-art .dots { position: absolute; bottom: 8px; left: 0; right: 0; display: flex; gap: 4px; justify-content: center; }
.post-art .dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .4; }
.post-art .dots i:first-child { opacity: 1; }
.theme-orange .t, .theme-ink .t { text-shadow: 0 1px 0 rgba(0,0,0,.05); }

/* Hero swipe deck (99 Social style) */
.deck { position: relative; height: 600px; display: grid; place-items: center; touch-action: pan-y; user-select: none; }
.deck-card { position: absolute; width: 330px; transition: transform .5s cubic-bezier(.3,.7,.3,1), opacity .5s; will-change: transform; }
.deck-card .post { box-shadow: 0 24px 60px rgba(23, 23, 23, .18); border-radius: 22px; }
.deck-card.front { cursor: grab; }
.deck-card.front:active { cursor: grabbing; }
.deck-card .post.video .post-art { aspect-ratio: 4 / 5; }
.deck-card img { pointer-events: none; }
.result-art { padding: 0; background: #111; }
.result-art img { object-fit: cover; object-position: top; }
.result-foot { padding: 12px 14px 14px; }
.result-foot strong { display: block; font-size: 1.4rem; color: var(--primary); letter-spacing: -0.02em; }
.result-foot span { font-size: .82rem; color: var(--muted); }
.deck-chip { position: absolute; z-index: 40; background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 8px 24px rgba(23, 23, 23, .1); display: flex; gap: 8px; align-items: center; pointer-events: none; }
.deck-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.chip-top { top: 40px; left: 0; }
.chip-bottom { bottom: 36px; right: 0; background: var(--ink); color: #fff; border-color: var(--ink); }

/* What's included: alternating feature rows */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 44px 0; border-top: 1px solid var(--line); }
.feature:first-of-type { border-top: 0; }
.feature:nth-of-type(even) .feature-img { order: -1; }
.feature-img { background: var(--paper); border-radius: 24px; padding: 28px; display: grid; place-items: center; min-height: 320px; }
.feature-img img { max-height: 360px; width: auto; border-radius: 12px; box-shadow: var(--shadow); }
.feature .num { font-size: .8rem; font-weight: 800; letter-spacing: .12em; color: var(--primary); text-transform: uppercase; }
.feature .btn { margin-top: 8px; }
.platforms { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.platforms span { background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: .88rem; }

/* Member results */
.results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 48px; }
.result-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.result-card .shot-img { background: #111; aspect-ratio: 4 / 3.4; overflow: hidden; }
.result-card .shot-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.result-card .body { padding: 22px; }
.result-card .stat { font-size: 2rem; font-weight: 800; color: var(--primary); letter-spacing: -0.03em; line-height: 1; }
.result-card h3 { margin: 6px 0 6px; }

/* Members' calendar look (demo) */
.cal .dow span { display: block; }
.cal .ev { display: block; width: 100%; text-align: left; border: 0; cursor: pointer; font: inherit; font-size: .7rem; font-weight: 600; line-height: 1.25; color: #fff; background: var(--primary); border-radius: 4px; padding: 4px 6px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal .ev.viral { background: #9B3DF2; }
.cal .ev:hover { filter: brightness(1.08); outline: 2px solid var(--ink); outline-offset: 1px; }
.cal-legend { display: flex; gap: 16px; font-size: .82rem; color: var(--muted); }
.cal-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--primary); margin-right: 6px; vertical-align: -1px; }
.cal-legend span.v::before { background: #9B3DF2; }
.m-how-wrap { background: var(--primary-soft); border-radius: 12px; padding: 4px 14px 12px; margin-top: 14px; }

@media (max-width: 1000px) {
  .deck { height: 540px; }
  .feature { grid-template-columns: 1fr; gap: 28px; }
  .feature:nth-of-type(even) .feature-img { order: 0; }
  .results { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .logo img { height: 32px; }
  .deck { height: 500px; }
  .deck-card { width: 270px; }
  .chip-top { top: 6px; }
  .chip-bottom { bottom: 6px; right: 50%; transform: translateX(50%); white-space: nowrap; }
  .results { grid-template-columns: 1fr; }
  .feature-img { min-height: 0; padding: 18px; }
  .cal .ev { font-size: 0; height: 8px; padding: 0; margin-bottom: 3px; }
  .cal .dow span { overflow: hidden; width: 3ch; }
  .cal-legend { display: none; }
}
.post-head { overflow: hidden; white-space: nowrap; }
.modal-card .post.video .post-art { aspect-ratio: 4 / 5; }
@media (max-width: 760px) {
  .examples .type-chip, .stack .type-chip { display: none; }
  .modal-card .post-art { aspect-ratio: 16 / 11 !important; }
}

/* Two-card pricing: $7 first month, then $97 (was $147) */
.price-wrap { grid-template-columns: 1fr 1fr; }
.price-card.after { border-color: var(--line); box-shadow: none; }
.price-card.after .badge { background: var(--ink); }
.price .was { font-size: 2.2rem; font-weight: 800; color: var(--muted); text-decoration: line-through; text-decoration-color: #D9342B; text-decoration-thickness: 4px; margin-right: 6px; letter-spacing: -0.03em; }
.save { display: inline-block; background: #E4F6EC; color: #0F7A4D; font-weight: 800; font-size: .82rem; padding: 4px 10px; border-radius: 999px; margin: 0 6px 6px 0; }
.includes-wide { max-width: 1000px; margin: 28px auto 0; }
.includes-wide ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
@media (max-width: 760px) {
  .price-wrap { grid-template-columns: 1fr; gap: 34px; }
  .includes-wide ul { grid-template-columns: 1fr; }
  .includes-wide { padding: 28px 22px; }
}

/* Demo: calendar picture with the "Grab today's post" card on top */
.cal-pic { position: relative; padding: 24px 24px 60px; }
.cal-pic img:first-child { max-height: none; width: 100%; }
.cal-pic .calcard { position: absolute; right: -14px; bottom: -18px; width: 42%; max-width: 220px; border-radius: 16px; transform: rotate(3deg); }
@media (max-width: 760px) { .cal-pic .calcard { right: 0; } }

/* Watch bullets */
.watch-list { list-style: none; padding: 0; margin: 8px auto 0; max-width: 640px; text-align: left; display: grid; gap: 10px; }
.watch-list li { display: flex; gap: 12px; font-size: 1.08rem; color: var(--ink-2); }
.watch-list li::before { content: "▶"; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: .6rem; display: grid; place-items: center; margin-top: 1px; }

/* Rotating reviews widget slot */
.reviews-strip { padding: 0 0 72px; }
.widget-ph { border: 2px dashed #E3CDB8; border-radius: 18px; padding: 44px 20px; text-align: center; color: var(--muted); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; background: var(--cream); }

/* System map: five dotted steps, click one to open its panel */
.sysmap { margin: 0 auto 40px; max-width: 1040px; }
.sys-steps { list-style: none; padding: 0; margin: 0 0 26px; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.sys-steps::before { content: ""; position: absolute; top: 27px; left: 10%; right: 10%; border-top: 3px dashed #F4C29F; }
.sys-steps button { position: relative; background: none; border: 0; cursor: pointer; font: inherit; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; padding: 0 6px; color: var(--ink-2); }
.dotn { width: 56px; height: 56px; border-radius: 50%; background: var(--white); border: 3px solid #F4C29F; display: grid; place-items: center; font-weight: 800; font-size: 1.25rem; color: var(--primary); transition: all .2s; }
.sys-steps .lbl { font-weight: 700; font-size: .95rem; text-align: center; line-height: 1.25; }
.sys-steps button:hover .dotn { transform: scale(1.06); }
.sys-steps button.on .dotn { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 8px 24px rgba(244, 119, 33, .35); }
.sys-steps button.on .lbl { color: var(--ink); }
.sys-panel { display: none; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; background: var(--cream); border-radius: 24px; padding: 36px; }
.sys-panel.on { display: grid; animation: panel-in .3s ease; }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }
.sys-panel .num { font-size: .78rem; font-weight: 800; letter-spacing: .12em; color: var(--primary); text-transform: uppercase; }
.sys-panel h3 { font-size: 1.6rem; margin-top: 6px; }
.sys-panel p { color: var(--ink-2); font-size: 1.05rem; }
.sys-visual { display: grid; place-items: center; }
.sys-visual img { border-radius: 12px; box-shadow: var(--shadow); max-height: 300px; width: auto; }
.profile-mock, .calls-mock { background: var(--white); border-radius: 18px; box-shadow: var(--shadow); padding: 20px; width: 100%; max-width: 360px; }
.pm-top { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.pm-av { width: 52px; height: 52px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-weight: 800; }
.pm-top small { display: block; color: var(--muted); }
.profile-mock ul, .sp ul { list-style: none; padding: 0; margin: 0; }
.profile-mock li, .sp li { padding: 6px 0 6px 26px; position: relative; font-size: .92rem; }
.profile-mock li::before, .sp li::before { content: ""; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; border-radius: 5px; border: 2px solid var(--line); }
.profile-mock li.done::before, .sp li.done::before { background: var(--primary); border-color: var(--primary); }
.profile-mock li.done::after, .sp li.done::after { content: "✓"; position: absolute; left: 3px; top: 5px; color: #fff; font-size: .7rem; font-weight: 800; }
.calls-mock { display: grid; gap: 10px; }
.cm-bubble { background: var(--paper); border-radius: 16px 16px 16px 4px; padding: 10px 14px; font-size: .92rem; max-width: 90%; }
.cm-call { display: flex; gap: 12px; align-items: center; background: var(--ink); color: #fff; border-radius: 16px; padding: 14px; margin-top: 6px; }
.cm-call small { display: block; color: #B9B3AD; }
.cm-ring { width: 44px; height: 44px; border-radius: 50%; background: #1FB362; display: grid; place-items: center; animation: ring 1.2s ease-in-out infinite; }
@keyframes ring { 0%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-12deg); } 20%, 40% { transform: rotate(12deg); } 50% { transform: rotate(0); } }

/* Platform sprints mock */
.sprints-mock { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; }
.sp { background: var(--white); border-radius: 16px; padding: 16px; box-shadow: 0 6px 20px rgba(23, 23, 23, .08); }
.sp strong { display: block; margin: 8px 0 6px; }
.sp-badge { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 800; }
.sp-badge.yt { background: #E62117; } .sp-badge.ig { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); } .sp-badge.fb { background: #1877F2; } .sp-badge.tt { background: #111; }
.sp li { font-size: .82rem; }
.sp .bar { height: 6px; border-radius: 999px; background: var(--paper); margin-top: 10px; overflow: hidden; }
.sp .bar i { display: block; height: 100%; background: var(--primary); }

@media (max-width: 760px) {
  .sys-steps { grid-template-columns: repeat(5, 1fr); }
  .sys-steps::before { top: 21px; }
  .dotn { width: 42px; height: 42px; font-size: 1rem; }
  .sys-steps .lbl { font-size: .68rem; }
  .sys-panel { grid-template-columns: 1fr; padding: 24px 20px; gap: 20px; }
  .sprints-mock { gap: 10px; }
  .sp { padding: 12px; }
}

/* Homepage tweaks (Oct 21) */
#system { padding-top: 24px; }
.big-orange { color: var(--primary); font-size: clamp(2.4rem, 5.5vw, 3.8rem); margin-bottom: 8px; }
.timeline.five { grid-template-columns: repeat(5, 1fr); }
.final .lede { margin-left: auto; margin-right: auto; }
#results .review-widget { margin-top: 8px; }
@media (max-width: 1000px) { .timeline.five { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .timeline.five { grid-template-columns: 1fr; } }

/* Review widget: tighten the space around it. The widget sizes itself to its longest review,
   so the gap under a short review is inside the widget; keep everything else around it tight. */
.reviews-strip { padding: 0; }
.review-widget { overflow: hidden; }
#system { padding-top: 0; }
.section.tight-bottom { padding-bottom: 8px; }
.section.tight-bottom + .section { padding-top: 24px; }
.sys-visual img.wide-shot { width: 100%; max-height: none; height: auto; border-radius: 14px; }
.sys-panel[data-step="2"] { grid-template-columns: .8fr 1.4fr; }
@media (max-width: 760px) { .sys-panel[data-step="2"] { grid-template-columns: 1fr; } }
.hero-sub { font-family: var(--serif); font-style: italic; font-size: clamp(1.7rem, 3vw, 2.3rem); color: var(--primary); line-height: 1.1; margin: -4px 0 16px; }
/* Hero: orange accent in the same bold sans, no script font */
.hero h1 .accent { color: var(--primary); }
.hero-sub { font-family: var(--sans); font-style: normal; font-weight: 800; letter-spacing: -0.02em; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }

/* ---- Sales-structure sections (copy site, Oct 22) ---- */
.grabber { font-weight: 700; font-size: 1.05rem; color: var(--ink-2); margin: 0 0 10px; }
.hero .pill { margin-bottom: 14px; }

/* Identify: mirror list */
.mirror { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.mirror div { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px 18px 56px; position: relative; font-size: 1.08rem; color: var(--ink-2); }
.mirror div::before { content: "✕"; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; background: #FDECEA; color: #C0392B; font-weight: 800; font-size: .75rem; display: grid; place-items: center; }

/* Pain */
.pain { text-align: center; }
.pain h2 { max-width: 820px; margin: 0 auto 40px; }
.pain-card { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius); padding: 28px; text-align: left; }
.pain-card h3 { color: #FFB27A; }
.pain-card p { color: #C9C3BD; margin: 0; }

/* Benefits */
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.benefits div { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 24px 24px 64px; position: relative; }
.benefits div::before { content: "✓"; position: absolute; left: 22px; top: 24px; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; font-size: .8rem; display: grid; place-items: center; }
.benefits strong { display: block; font-size: 1.05rem; margin-bottom: 4px; }
.benefits span { color: var(--muted); font-size: .95rem; }

/* Bonuses */
.bonus-grid { max-width: 900px; margin: 0 auto; }
.bonus-card { position: relative; background: var(--white); border: 2px dashed #F4C29F; border-radius: 22px; padding: 22px; }
.bonus-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; border-radius: 14px; margin-bottom: 16px; box-shadow: 0 6px 20px rgba(23, 23, 23, .08); }
.bonus-tag { position: absolute; top: -13px; left: 22px; background: var(--primary); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .1em; padding: 5px 12px; border-radius: 999px; }
.includes li.bonus-li { color: var(--primary); font-weight: 700; }

/* Scarcity (discount), justify, risk reversal */
.discount-strip { max-width: 1000px; margin: 0 auto 30px; background: var(--ink); color: #fff; border-radius: 16px; padding: 16px 22px; text-align: center; font-size: 1.02rem; }
.discount-strip strong { color: #FFB27A; }
.dtag { display: inline-block; background: var(--primary); font-size: .7rem; font-weight: 800; letter-spacing: .12em; padding: 4px 10px; border-radius: 999px; margin-right: 8px; vertical-align: 2px; }
.justify { text-align: center; color: var(--muted); max-width: 640px; margin: 26px auto 0; }
.risk { max-width: 1000px; margin: 26px auto 0; display: flex; gap: 20px; align-items: center; background: #E9F7EF; border-radius: 20px; padding: 24px 28px; }
.risk-icon { flex: none; width: 56px; height: 56px; border-radius: 50%; background: #1FA463; color: #fff; display: grid; place-items: center; font-size: 1.5rem; font-weight: 800; }
.risk h3 { margin-bottom: 4px; }
.risk p { margin: 0; color: var(--ink-2); }

/* Warning + reminder */
.final .warn { display: inline-block; background: rgba(0, 0, 0, .18); border-radius: 999px; padding: 8px 18px; font-weight: 700; margin-bottom: 18px; }
.final .recap { list-style: none; padding: 0; margin: 0 auto 28px; display: flex; flex-wrap: wrap; gap: 8px 10px; justify-content: center; max-width: 760px; }
.final .recap li { background: rgba(255, 255, 255, .16); border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: .92rem; }
.final .recap li::before { content: "✓ "; font-weight: 800; }

@media (max-width: 1000px) { .benefits { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
  .benefits { grid-template-columns: 1fr; }
  .risk { flex-direction: column; text-align: center; }
  .mirror div { font-size: 1rem; }
}
.bonus-card .btn { margin-top: 6px; }
@media (max-width: 760px) { .timeline[style] { grid-template-columns: 1fr !important; } }
.mirror-cost { text-align: center; font-weight: 700; font-size: 1.12rem; margin: 28px auto 0; max-width: 640px; color: var(--primary-dark); }

/* No script font: accents use the same bold sans, in orange */
em.serif, .serif { font-family: var(--sans); font-style: normal; font-weight: inherit; letter-spacing: inherit; color: var(--primary); }
.math .vs { font-family: var(--sans); font-style: normal; font-weight: 800; }
.myth .q { font-family: var(--sans); font-style: normal; font-weight: 800; font-size: 1.3rem; }

/* Review widget: cap the box so the space it reserves for its longest review doesn't leave a big gap.
   A very long review may lose its last line; Austin is fine with that. */
.review-widget { max-height: 230px; }
@media (max-width: 1000px) { .review-widget { max-height: 280px; } }
@media (max-width: 760px) { .review-widget { max-height: 340px; } }

/* Log in link next to Get Started */
.nav-cta { display: flex; align-items: center; gap: 18px; }
.nav-login { font-weight: 700; font-size: .95rem; color: var(--ink-2); text-decoration: none; }
.nav-login:hover { color: var(--primary); }
.nav-item.mobile-only { display: none; }
@media (max-width: 760px) {
  .nav-login { display: none; }
  .nav.open .nav-item.mobile-only { display: block; }
}

/* Vimeo video testimonials (vertical 9:16) */
.vid-testis { max-width: 760px; }
.vimeo-9x16 { position: relative; aspect-ratio: 9 / 16; max-width: 340px; margin: 0 auto; border-radius: 20px; overflow: hidden; background: #111; box-shadow: var(--shadow); }
.vimeo-9x16 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Hero: black lead-in line above the orange $7 line */
.hero-sub .hero-sub-lead { color: #000; font-size: clamp(1.15rem, 2vw, 1.5rem); }

/* "Meanwhile..." line: more prominent */
.mirror-cost { font-size: clamp(1.35rem, 2.4vw, 1.75rem); font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; max-width: 720px; margin-top: 36px; }

/* Callout line under a section lede */
.lede-callout { font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; color: var(--primary-dark); margin: 14px auto 0; max-width: 640px; }

/* Footer support line */
.footer-support { margin: 18px 0 0; }
.footer-support a { color: var(--ink-2); font-weight: 600; }

/* Terms page */
.terms-hero { padding: 72px 0 48px; }
.terms-hero h1 .accent { color: var(--primary); }
.terms-hero .lede { margin: 0 auto; }
.terms-prices { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; }
.terms-prices div { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 16px 24px; min-width: 170px; display: grid; gap: 2px; }
.terms-prices strong { font-size: 1.9rem; font-weight: 800; color: var(--primary); letter-spacing: -0.02em; }
.terms-prices small { font-size: .95rem; color: var(--muted); font-weight: 600; }
.terms-prices span { font-size: .9rem; color: var(--ink-2); font-weight: 600; }
.terms-grid { display: grid; grid-template-columns: 240px 1fr; gap: 40px; align-items: start; }
.terms-toc { position: sticky; top: 100px; }
.terms-toc ol { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.terms-toc a { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .95rem; }
.terms-toc a:hover { color: var(--primary); }
.terms-card { background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: 40px 44px; }
.terms-sec { padding: 22px 0; border-top: 1px solid var(--line); scroll-margin-top: 100px; }
.terms-sec:first-child { border-top: 0; padding-top: 0; }
.terms-sec h2 { font-size: 1.3rem; display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.terms-n { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; font-size: .9rem; display: grid; place-items: center; }
.terms-sec p { color: var(--ink-2); margin: 0 0 10px; }
.terms-sec a { color: var(--primary); font-weight: 600; }
.terms-sign { margin: 24px 0 0; font-size: .9rem; color: var(--muted); }
@media (max-width: 860px) { .terms-grid { grid-template-columns: 1fr; } .terms-toc { position: static; } .terms-card { padding: 28px 20px; } }