.marketing-page { overflow-x: hidden; }
.marketing-header { border-bottom: 1px solid rgba(192, 224, 213, .09); }
.marketing-main { padding: 72px 0 64px; }
.marketing-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .78fr); gap: 34px; align-items: end; padding: 28px 0 72px; }
.marketing-hero h1 { max-width: 760px; margin-bottom: 18px; }
.marketing-hero-copy { max-width: 690px; margin: 0; color: var(--muted); font-size: 1.04rem; line-height: 1.7; }
.marketing-hero-side { display: grid; gap: 12px; padding: 22px; border: 1px solid rgba(167, 209, 92, .23); border-radius: 16px; background: linear-gradient(145deg, rgba(167, 209, 92,.10), rgba(10,28,23,.56)); }
.marketing-hero-side strong { color: #e6f4ef; font-size: 1.08rem; letter-spacing: -.04em; }
.marketing-hero-side p { margin: 0; color: #a9bbb5; font-size: .82rem; line-height: 1.55; }
.marketing-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.marketing-actions .button { display: inline-flex; width: auto; align-items: center; justify-content: center; margin: 0; color: var(--ink); text-decoration: none; }
.marketing-actions .button.primary { color: #10200d; }
.section-block { padding: 37px 0; border-top: 1px solid var(--line); }
.section-kicker { color: var(--lime); font: 0.8rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.section-heading { max-width: 710px; margin: 9px 0 8px; color: var(--ink); font-size: clamp(1.7rem, 3vw, 2.8rem); line-height: 1.03; letter-spacing: -.065em; }
.section-copy { max-width: 720px; margin: 0; color: var(--muted); font-size: .91rem; line-height: 1.65; }
.resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-top: 27px; }
.resource-card { display: flex; min-height: 250px; flex-direction: column; padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg, rgba(23,52,44,.72), rgba(8,25,20,.65)); text-decoration: none; transition: transform .16s, border-color .16s, background .16s; }
.resource-card:hover { transform: translateY(-3px); border-color: rgba(167, 209, 92,.44); background: linear-gradient(145deg, rgba(35,70,56,.79), rgba(8,25,20,.65)); }
.resource-number { color: var(--lime); font: 0.8rem var(--mono); }
.resource-card h3 { margin: 28px 0 9px; color: var(--ink); font-size: 1.18rem; letter-spacing: -.055em; }
.resource-card p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.56; }
.resource-link { margin-top: auto; padding-top: 23px; color: #dff6ac; font-size: 0.85rem; font-weight: 800; }
.capability-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr); gap: 18px; margin-top: 27px; }
.capability-map, .security-card, .support-callout, .chart-card { border: 1px solid var(--line); border-radius: 15px; background: rgba(10, 29, 24, .66); }
.capability-map { padding: 8px 21px; }
.capability-row { display: grid; grid-template-columns: 42px minmax(130px, .8fr) minmax(0, 1.7fr); gap: 14px; align-items: center; padding: 17px 0; border-top: 1px solid rgba(192,224,213,.11); }
.capability-row:first-child { border-top: 0; }
.capability-icon { display: grid; width: 33px; height: 33px; place-items: center; border-radius: 10px; color: var(--lime); background: rgba(167, 209, 92,.09); font: 0.8rem var(--mono); }
.capability-row strong { color: #e2eeea; font-size: .83rem; }
.capability-row span { color: var(--muted); font-size: 0.85rem; line-height: 1.48; }
.security-card, .support-callout { padding: 24px; }
.security-card h3, .support-callout h3 { margin: 0 0 10px; color: var(--ink); font-size: 1.15rem; letter-spacing: -.055em; }
.security-card p, .support-callout p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.6; }
.security-points { display: grid; gap: 13px; margin: 20px 0 0; padding: 0; list-style: none; }
.security-points li { position: relative; padding-left: 19px; color: #c7d7d1; font-size: 0.85rem; line-height: 1.5; }
.security-points li::before { position: absolute; left: 0; color: var(--lime); content: "✓"; }
.workflow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 28px; }
.workflow-step { position: relative; padding: 18px; border: 1px solid var(--line); border-radius: 13px; background: rgba(10,29,24,.53); }
.workflow-step b { display: block; margin-bottom: 13px; color: var(--lime); font: 0.8rem var(--mono); }
.workflow-step strong { display: block; color: var(--ink); font-size: .88rem; }
.workflow-step p { margin: 7px 0 0; color: var(--muted); font-size: 0.85rem; line-height: 1.5; }
.prompt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; margin-top: 26px; }
.prompt-card { display: flex; min-height: 250px; flex-direction: column; padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: rgba(10,29,24,.62); }
.prompt-card.wide { grid-column: 1 / -1; min-height: auto; }
.prompt-tag { width: fit-content; padding: 4px 7px; border: 1px solid rgba(167, 209, 92,.28); border-radius: 999px; color: #d8f6a2; background: rgba(167, 209, 92,.08); font: 0.75rem var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.prompt-card h3 { margin: 16px 0 7px; color: var(--ink); font-size: 1.05rem; letter-spacing: -.045em; }
.prompt-card p { margin: 0; color: var(--muted); font-size: 0.85rem; line-height: 1.56; }
.prompt-text { margin: 17px 0 0; color: #d9e8e2; font: 0.85rem/1.58 var(--mono); white-space: pre-wrap; }
.prompt-copy { align-self: flex-start; margin-top: auto; padding: 9px 11px; border: 1px solid rgba(201,232,219,.23); border-radius: 8px; color: var(--ink); background: transparent; font-size: 0.8rem; font-weight: 800; }
.prompt-caution { margin: 11px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.5; }
.prompt-caution strong { color: var(--ink); }
.prompt-copy:hover { color: #12230e; border-color: var(--lime); background: var(--lime); }
.prompt-copy:focus-visible, .marketing-actions a:focus-visible, .resource-card:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.chart-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-top: 24px; }
.chart-card { padding: 18px; }
.chart-visual { display: flex; height: 78px; align-items: end; gap: 5px; padding: 12px; border: 1px solid rgba(192,224,213,.1); border-radius: 9px; background: rgba(5,15,12,.56); }
.chart-visual i { display: block; flex: 1; border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg, var(--lime), #658c2b); opacity: .9; }
.chart-visual.pink i { background: linear-gradient(180deg, #ff927d, #a64e43); }.chart-visual.blue i { background: linear-gradient(180deg, #7ad4ee, #287089); }
.chart-card h3 { margin: 16px 0 6px; color: var(--ink); font-size: .88rem; }.chart-card p { margin: 0; color: var(--muted); font-size: 0.85rem; line-height: 1.5; }
.faq-list { display: grid; gap: 10px; margin-top: 25px; }
.faq-list details { padding: 15px 17px; border: 1px solid var(--line); border-radius: 11px; background: rgba(10,29,24,.52); }
.faq-list summary { color: #dceae5; cursor: pointer; font-size: .83rem; font-weight: 800; }.faq-list p { margin: 12px 0 0; color: var(--muted); font-size: 0.85rem; line-height: 1.6; }
.support-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(290px, .65fr); gap: 18px; margin-top: 28px; }
.setup-list { display: grid; gap: 12px; }.setup-item { display: grid; grid-template-columns: 34px 1fr; gap: 13px; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: rgba(10,29,24,.58); }.setup-item > span { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid rgba(167, 209, 92,.42); border-radius: 50%; color: var(--lime); font: 0.8rem var(--mono); }.setup-item strong { display: block; color: var(--ink); font-size: .85rem; }.setup-item p { margin: 4px 0 0; color: var(--muted); font-size: 0.85rem; line-height: 1.55; }.setup-item code { color: #d8e7e1; font-family: var(--mono); }
.support-side { display: grid; align-content: start; gap: 15px; }.support-callout a, .support-contact-button { display: inline-flex; margin-top: 16px; color: #12230e; padding: 10px 12px; border: 0; border-radius: 8px; background: var(--lime); font: 0.85rem var(--sans); font-weight: 800; text-decoration: none; }.support-callout.secondary a, .support-contact-button { color: #e5f0ec; border: 1px solid rgba(201,232,219,.2); background: transparent; }.support-callout.secondary a:hover, .support-contact-button:hover { color: var(--lime); }
.limit-table { display: grid; gap: 0; margin-top: 26px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; }.limit-row { display: grid; grid-template-columns: .7fr 1.6fr 1.65fr; gap: 15px; padding: 15px 17px; border-top: 1px solid rgba(192,224,213,.1); background: rgba(10,29,24,.52); }.limit-row:first-child { border-top: 0; background: rgba(167, 209, 92,.08); }.limit-row > * { color: var(--muted); font-size: 0.85rem; line-height: 1.5; }.limit-row strong { color: #e1ece8; }.limit-row:first-child > * { color: #d7e6e0; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.marketing-footer { margin-top: 10px; }
.contact-backdrop { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(2, 10, 8, .78); backdrop-filter: blur(8px); }.contact-backdrop[hidden] { display: none; }.contact-modal { width: min(590px, 100%); max-height: calc(100dvh - 48px); overflow: auto; padding: 25px; border: 1px solid rgba(167, 209, 92,.34); border-radius: 18px; background: var(--panel-solid); box-shadow: 0 30px 100px rgba(0,0,0,.58); }.contact-modal-head { display: flex; gap: 18px; justify-content: space-between; }.contact-modal-head h2 { margin: 6px 0 7px; font-size: 1.45rem; }.contact-modal-head p:last-child { max-width: 455px; margin: 0; color: var(--muted); font-size: 0.85rem; line-height: 1.55; }.contact-close { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; padding: 0; border: 1px solid rgba(201,232,219,.23); border-radius: 8px; color: var(--ink); background: transparent; font-size: 1.35rem; line-height: 1; }.contact-close:hover { color: var(--lime); border-color: rgba(167, 209, 92,.45); }.contact-form { display: grid; gap: 13px; margin-top: 22px; }.contact-form label { display: grid; gap: 6px; color: #d8e6e1; font-size: 0.85rem; font-weight: 800; }.contact-form label span { color: var(--muted); font-size: 0.8rem; font-weight: 500; }.contact-form input, .contact-form textarea { width: 100%; padding: 11px 12px; border: 1px solid rgba(201,232,219,.19); border-radius: 8px; outline: none; color: var(--ink); background: rgba(5,16,13,.48); font: .8rem var(--sans); }.contact-form textarea { min-height: 138px; resize: vertical; line-height: 1.5; }.contact-form input:focus, .contact-form textarea:focus { border-color: rgba(167, 209, 92,.8); box-shadow: 0 0 0 3px rgba(167, 209, 92,.12); }.contact-form .button { width: 100%; margin: 2px 0 0; }.contact-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }.contact-status { min-height: 18px; margin: 0; color: var(--muted); font-size: 0.85rem; line-height: 1.45; }.contact-status.success { color: #d5f3a2; }.contact-status.error { color: #ffb1a2; }
@media (max-width: 900px) { .marketing-hero, .capability-grid, .support-layout { grid-template-columns: 1fr; }.resource-grid, .chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.workflow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .marketing-main { padding-top: 42px; }.marketing-hero { padding-bottom: 45px; }.resource-grid, .prompt-grid, .chart-grid, .workflow { grid-template-columns: 1fr; }.prompt-card.wide { grid-column: auto; }.resource-card { min-height: 210px; }.capability-row { grid-template-columns: 36px 1fr; }.capability-row span { grid-column: 2; }.limit-row { grid-template-columns: 1fr; gap: 4px; }.limit-row:first-child { display: none; }.contact-backdrop { padding: 12px; }.contact-modal { max-height: calc(100dvh - 24px); padding: 18px; border-radius: 14px; } }

/* Release notes. A dated column beside each entry so the history reads as a
   timeline rather than a wall of headings. */
.release-hero h1 { max-width: 12ch; }
.release-list { display: grid; gap: 34px; }
.release { display: grid; grid-template-columns: 190px 1fr; gap: 28px; padding: 26px 0 0; border-top: 1px solid var(--line); }
.release:first-child { border-top: 0; padding-top: 0; }
.release-meta { display: grid; gap: 8px; align-content: start; }
.release-date { margin: 0; color: var(--lime); font: .85rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.release-badge { margin: 0; justify-self: start; padding: 3px 10px; border: 1px solid rgba(167,209,92,.4); border-radius: 999px; background: rgba(167,209,92,.1); color: #d3ecab; font: .76rem var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.release-title { margin: 0 0 18px; font-size: 1.5rem; letter-spacing: -.02em; line-height: 1.3; }
.release-changes { display: grid; gap: 17px; margin: 0; padding: 0; list-style: none; }
.release-changes li { display: grid; gap: 4px; }
.release-changes strong { color: var(--ink); font-size: 1rem; font-weight: 700; }
.release-changes span { color: var(--muted); font-size: .95rem; line-height: 1.6; max-width: 72ch; }
@media (max-width: 760px) {
  .release { grid-template-columns: 1fr; gap: 14px; }
  .release-meta { grid-auto-flow: column; justify-content: start; align-items: center; gap: 12px; }
}

/* Long-form reading measure.
   The marketing pages cap a paragraph at 720px, which is roughly 95 characters
   at this size. That is comfortable for two sentences of positioning and tiring
   across a thousand words, where the eye has to find the start of each new line
   ninety-five characters back. 34em lands near seventy. */
.article .section-copy,
.article .section-heading { max-width: 34em; }
.article .prompt-text { max-width: 38em; }
.article ul.section-copy { padding-left: 1.15em; }
.article ul.section-copy li { margin-bottom: 9px; line-height: 1.6; }
.article .divider { max-width: 34em; margin: 30px 0 22px; }
/* The marketing pages put one paragraph under a heading, so .section-copy
   carries no bottom margin and none is missed. An article runs several in a
   row, where zero margin renders them as one wall of text — the gap between
   paragraphs is the only thing marking where a thought ends. */
.article .section-copy + .section-copy,
.article ul.section-copy { margin-top: 15px; }
.article .section-heading { margin-top: 34px; font-size: 1.42rem; }
.article .prompt-text { margin-top: 15px; }
.article .prompt-caution { margin-top: 26px; }

/* Tool inventory. Wide content scrolls inside its own box rather than pushing
   the page sideways on a phone. */
.tool-table { margin-top: 22px; overflow-x: auto; border: 1px solid var(--line); border-radius: 15px; background: rgba(10, 29, 24, .66); }
.tool-table table { width: 100%; min-width: 460px; border-collapse: collapse; }
.tool-table th { padding: 15px 21px; color: var(--lime); font: 700 .74rem var(--mono); letter-spacing: .1em; text-transform: uppercase; text-align: left; }
.tool-table td { padding: 13px 21px; border-top: 1px solid rgba(192, 224, 213, .11); color: var(--muted); font-size: .85rem; line-height: 1.5; vertical-align: top; }
.tool-table td:first-child { color: #e2eeea; font: .8rem var(--mono); white-space: nowrap; }

/* Consecutive body paragraphs. `.section-copy` sets margin: 0 so it can sit
   directly under a heading; articles already restored the gap between two of
   them, and every marketing section needs the same. */
.section-block .section-copy + .section-copy { margin-top: 15px; }
/* A server URL is one long unbreakable token; let it wrap rather than escape
   its card. */
.workflow-step code, .section-copy code { color: #d8e7e1; font-family: var(--mono); overflow-wrap: anywhere; }