/* Layout: a contact-center console feel. Navy ink, teal signal color, amber "fill-in" highlights
   mark every blank the manager completes. Wide single column for sales; sidebar + reader for members. */
:root {
  --bg: #f3f6f7; --surface: #ffffff; --ink: #10233f; --muted: #556679; --line: #d9e1e6;
  --accent: #0d8486; --accent-ink: #ffffff; --accent-soft: #dff1f0;
  --fill-bg: #fbecc0; --fill-fg: #6a4b00; --danger: #b3261e; --ok: #1f7a4a;
  --code-bg: #f7f9fa;
  --f-display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --f-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --r: 10px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0b1522; --surface: #122133; --ink: #e5edf4; --muted: #95a7b9; --line: #23374d;
  --accent: #39c0bf; --accent-ink: #062224; --accent-soft: #143a3d;
  --fill-bg: #3b3014; --fill-fg: #f4d88b; --danger: #ff8a80; --ok: #6fd39a; --code-bg: #0e1b2a; color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #0b1522; --surface: #122133; --ink: #e5edf4; --muted: #95a7b9; --line: #23374d;
  --accent: #39c0bf; --accent-ink: #062224; --accent-soft: #143a3d;
  --fill-bg: #3b3014; --fill-fg: #f4d88b; --danger: #ff8a80; --ok: #6fd39a; --code-bg: #0e1b2a; color-scheme: dark }

* { box-sizing: border-box }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.55 var(--f-body); -webkit-font-smoothing: antialiased }
a { color: var(--accent) }
h1, h2, h3 { font-family: var(--f-display); font-weight: 800; line-height: 1.12; text-wrap: balance; margin: 0; letter-spacing: -0.02em }
button, input, textarea, select { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 20px }
.eyebrow { font: 600 12px/1.45 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent) }
.muted { color: var(--muted) }
.fill { background: var(--fill-bg); color: var(--fill-fg); border-radius: 3px; padding: 0 2px }

/* Header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line) }
.top .wrap { display: flex; align-items: center; gap: 20px; height: 60px }
.brand { font: 800 18px/1 var(--f-display); color: var(--ink); text-decoration: none; display: flex; align-items: center; gap: 9px; white-space: nowrap }
.brand .leaf { width: 26px; height: 26px; flex: none }
.brand .leaf path { fill: var(--accent) }
.brand .leaf .vein { fill: none; stroke: var(--bg); stroke-width: 1.6; stroke-linecap: round }
.brand .bsub { font: 500 13px/1 var(--f-body); color: var(--muted); padding-left: 10px; border-left: 1px solid var(--line) }
.nav { display: flex; gap: 18px; margin-left: auto; align-items: center }
.nav a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px }
.nav a.hide-sm { }
@media (max-width: 640px) { .nav .hide-sm { display: none } .brand .bsub { display: none } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 8px; padding: 11px 18px; font-weight: 700; font-size: 16px; cursor: pointer; text-decoration: none; background: var(--accent); color: var(--accent-ink) }
.btn:hover { filter: brightness(1.06) }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--ink) }
.btn.small { padding: 7px 12px; font-size: 14px }
.btn[disabled] { opacity: .55; cursor: wait }

/* Hero */
.hero { padding-block: 64px 48px }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center }
.hero h1 { font-size: clamp(36px, 5.2vw, 56px); font-weight: 800; margin-block: 14px 18px }
.hero p.lead { font-size: 19px; color: var(--muted); max-width: 34em; margin: 0 0 26px }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap }
.hero .proof { margin-top: 26px; display: flex; gap: 14px 22px; flex-wrap: wrap; font: 500 13px/1.3 var(--f-mono); color: var(--muted) }
.hero .proof b { display: block; font: 800 26px/1 var(--f-display); color: var(--ink); margin-bottom: 4px }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr } .hero { padding-block: 36px 32px } }

/* Prompt card (shared by hero, library, builder) */
.prompt { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin-block: 14px }
.ptitle { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 15px }
.pnum { font: 700 12px/1 var(--f-mono); color: var(--accent); background: var(--accent-soft); padding: 5px 7px; border-radius: 5px }
.pname { flex: 1; min-width: 0 }
.copy { border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 4px 10px; font-size: 13px; font-weight: 700; cursor: pointer }
.copy.done { color: var(--ok); border-color: var(--ok) }
pre { margin: 0; overflow-x: auto; background: var(--code-bg) }
pre code { display: block; padding: 14px 16px; font: 13.5px/1.6 var(--f-mono); white-space: pre-wrap; word-break: break-word }
.hero .prompt { box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--ink) 45%, transparent); margin: 0 }
.hero .prompt .meta { display: flex; justify-content: space-between; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--line); font: 500 12px/1.3 var(--f-mono); color: var(--muted) }

/* Photos */
.photo { margin: 0; border-radius: 14px; overflow: hidden; background: var(--line) }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover }
.hero-art { min-width: 0 }
.hero-art.with-photo { display: grid }
.hero-art.with-photo .hero-photo { grid-area: 1 / 1; aspect-ratio: 4 / 3.4; max-width: 100% }
.hero-art.with-photo .prompt { grid-area: 1 / 1; align-self: end; margin: 0 0 -28px 36px; max-width: calc(100% - 36px) }
@media (max-width: 860px) { .hero-art.with-photo { gap: 0; padding-bottom: 0 } .hero-art.with-photo .prompt { margin: -48px 12px 0 !important; max-width: none } .hero-art.with-photo .hero-photo, .hero-art.with-photo .prompt { grid-area: auto } }
.hero-art.with-photo { padding-bottom: 40px }
.hero-art.with-photo .prompt { margin-bottom: -40px }
.hero-art.with-photo .prompt pre code { max-height: 8em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent) }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 26px }
.gallery .photo { aspect-ratio: 4 / 3 }
.gallery p { margin: 10px 0 0; font-weight: 600 }
.photo.banner { aspect-ratio: 16 / 5; margin-bottom: 22px }

/* Sales sections */
section.block { scroll-margin-top: 60px; padding-block: 56px; border-top: 1px solid var(--line) }
section.block > .wrap > h2 { font-size: clamp(28px, 3.6vw, 40px); margin-block: 10px 10px }
section.block > .wrap > p.sub { color: var(--muted); max-width: 40em; margin: 0 0 30px }
.sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden }
.sections > div { background: var(--surface); padding: 16px 18px; display: grid; gap: 4px; align-content: start }
.sections .n { font: 600 12px/1 var(--f-mono); color: var(--muted); display: flex; justify-content: space-between }
.sections h3 { font-size: 18px }
.sections .tag { font: 600 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; padding: 3px 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent) }
.sections .tag.pro { background: var(--fill-bg); color: var(--fill-fg) }

.frameworks { display: grid; grid-template-columns: 1fr 1fr; gap: 24px }
@media (max-width: 760px) { .frameworks { grid-template-columns: 1fr } }
.fw { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 22px }
.fw h3 { font-size: 22px; margin-bottom: 14px }
.fw ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.fw li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: baseline }
.fw li b { font: 800 22px/1 var(--f-display); color: var(--accent) }

.kpis { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px }
.kpis span { font: 600 11.5px/1 var(--f-mono); padding: 4px 7px; border-radius: 4px; border: 1px solid var(--line); color: var(--muted) }

/* ROI calculator */
.roi { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch }
@media (max-width: 800px) { .roi { grid-template-columns: 1fr } }
.roi-in { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; min-width: 0 }
@media (max-width: 480px) { .roi-in { grid-template-columns: 1fr } }
.roi-out { background: var(--ink); color: var(--bg); border-radius: 14px; padding: 22px 24px; display: grid; gap: 14px; align-content: center; min-width: 0 }
.roi-out > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid color-mix(in srgb, var(--bg) 18%, transparent); padding-bottom: 12px }
.roi-out .muted { color: color-mix(in srgb, var(--bg) 70%, transparent) }
.roi-out b { font: 800 clamp(22px, 3vw, 30px)/1 var(--f-display); font-variant-numeric: tabular-nums }
.roi-out #roiValue { color: var(--fill-bg) }
.roi-out p { margin: 0; font-weight: 600 }
.fine { font-size: 14px; margin: 14px 0 0; max-width: 60em }


/* Pricing */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr } }
.tier { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px; display: grid; gap: 16px; position: relative }
.tier.popular { border: 2px solid var(--accent) }
.tier .badge { position: absolute; top: -12px; left: 24px; background: var(--accent); color: var(--accent-ink); font: 700 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 9px; border-radius: 5px }
.tier h3 { font-size: 22px }
.tier .price { font: 800 46px/1 var(--f-display); letter-spacing: -0.02em }
.tier .price small { font: 500 14px var(--f-body); color: var(--muted); letter-spacing: 0 }
.tier ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 15.5px }
.tier li { padding-left: 24px; position: relative }
.tier li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 11px; height: 6px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg) }
.tier .btn { width: 100% }
.tier .owned { text-align: center; font-weight: 700; color: var(--ok) }

.faq { display: grid; gap: 10px; max-width: 760px }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 18px }
.faq summary { font-weight: 700; cursor: pointer }
.faq p { margin: 10px 0 0; color: var(--muted) }
footer { padding-block: 32px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px }

/* Forms, checkout */
.narrow { max-width: 980px; margin: 0 auto; padding: 40px 20px 64px }
.split { display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; align-items: start }
@media (max-width: 800px) { .split { grid-template-columns: 1fr } }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 26px; display: grid; gap: 16px; min-width: 0 }
.panel h1 { font-size: 30px }
label { display: grid; gap: 6px; font-weight: 600; font-size: 14px }
input, textarea, select { border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 11px 12px; width: 100%; font-weight: 400; font-size: 16px }
textarea { min-height: 120px; font: 14px/1.5 var(--f-mono); resize: vertical }
.row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px }
.err { color: var(--danger); font-weight: 600; font-size: 15px; min-height: 1em; margin: 0 }
.testmode { display: flex; gap: 10px; align-items: flex-start; background: var(--fill-bg); color: var(--fill-fg); border-radius: 8px; padding: 12px 14px; font-size: 14.5px }
.testmode b { font-family: var(--f-mono) }
.summary { display: grid; gap: 10px; font-size: 15px }
.summary .line { display: flex; justify-content: space-between; gap: 12px }
.summary .total { border-top: 1px solid var(--line); padding-top: 10px; font-weight: 800; font-size: 18px }
.center { text-align: center; justify-items: center }

/* Members area */
.member { display: grid; grid-template-columns: 270px 1fr; min-height: calc(100vh - 60px) }
@media (max-width: 860px) { .member { grid-template-columns: 1fr } .side { position: static !important; max-height: none !important; border-right: 0 !important; border-bottom: 1px solid var(--line) } }
.side { border-right: 1px solid var(--line); padding: 20px 14px; position: sticky; top: 60px; align-self: start; max-height: calc(100vh - 60px); overflow-y: auto; display: grid; gap: 2px }
.side .plan { padding: 6px 10px 14px; font-size: 14px }
.side .plan b { font-family: var(--f-display); font-size: 18px; display: block }
.side a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 7px; color: var(--ink); text-decoration: none; font-size: 15px }
.side a.on { background: var(--accent-soft); color: var(--accent); font-weight: 700 }
.side a.locked { color: var(--muted) }
.side a small { font: 500 12px/1.6 var(--f-mono); color: var(--muted) }
.side hr { border: 0; border-top: 1px solid var(--line); margin: 10px 4px; width: auto }
.reader { padding: 32px clamp(16px, 4vw, 48px) 80px; min-width: 0; max-width: 900px }
.reader h1 { font-size: clamp(30px, 4vw, 42px); margin-block: 8px 12px }
.reader h2 { font-size: 24px; margin-block: 36px 10px }
.reader h3 { font-size: 19px; margin-block: 24px 8px }
.doc table { border-collapse: collapse; width: 100%; font-size: 15px; display: block; overflow-x: auto }
.doc th, .doc td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top }
.doc th { background: var(--code-bg) }
.doc p, .doc li { max-width: 68ch }
.tools { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-block: 8px 20px }
.tools input { max-width: 320px; padding: 8px 12px; font-size: 15px }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-block: 18px }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: grid; gap: 6px; align-content: start; text-decoration: none; color: var(--ink) }
.card h3 { font-size: 17px; margin: 0 }
.card .n { font: 600 12px/1 var(--f-mono); color: var(--muted) }
.card.locked { opacity: .7 }
.locknote { background: var(--surface); border: 1px dashed var(--line); border-radius: 14px; padding: 24px; display: grid; gap: 12px; margin-top: 18px }
.locklist { columns: 2 220px; font-size: 15px; color: var(--muted); padding-left: 18px; margin: 0 }

/* Builder */
.builder { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start }
@media (max-width: 1000px) { .builder { grid-template-columns: 1fr } }
.builder .out { position: sticky; top: 76px; min-width: 0 }
.builder .out .prompt { margin-top: 0 }
.fields { display: grid; gap: 12px }

.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 8px; font-weight: 600; font-size: 15px; z-index: 50; max-width: calc(100% - 32px) }
@media (prefers-reduced-motion: no-preference) { .view { animation: in .25s ease-out } @keyframes in { from { transform: translateY(6px) } } }
.hero-photo img { object-position: 50% 50% }
.photo.banner img { object-position: 50% 62% }

.foot { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: baseline }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px }
.foot a { color: var(--muted) } .foot a:hover { color: var(--ink) }
.legal { max-width: 720px } .legal h3 { margin: 26px 0 6px } .legal p { max-width: 65ch }