:root {
  --ink: #0b0d10;
  --panel: #12161a;
  --panel-2: #191e23;
  --text: #f2f4ef;
  --muted: #b8bfb5;
  --line: #30383f;
  --acid: #ccff66;
  --acid-ink: #172000;
  --radius: 1.5rem;
  --content: 74rem;
  --sans: "Segoe UI", Inter, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
body { margin: 0; background: var(--ink); color: var(--text); font: 1.0625rem/1.7 var(--sans); }
button, a { font: inherit; }
a { color: inherit; }
button { color: inherit; }
h1, h2, p { margin-top: 0; }
h1, h2 { text-wrap: balance; }
svg { display: block; width: 1.6rem; height: 1.6rem; }
:focus-visible { outline: 3px solid var(--acid); outline-offset: 5px; }
.skip-link { position: fixed; z-index: 100; left: 1rem; top: 1rem; transform: translateY(-200%); padding: .75rem 1rem; border-radius: .5rem; background: var(--acid); color: var(--acid-ink); }
.skip-link:focus { transform: translateY(0); }
.site-header, .hero, .quick-nav, .sections, .bonus, .closing, .final-cta, .site-footer { width: min(calc(100% - 2rem), var(--content)); margin-inline: auto; }
.site-header { min-height: 5rem; display: flex; justify-content: space-between; align-items: center; gap: .75rem; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-size: .8125rem; font-weight: 750; letter-spacing: .1em; }
.brand-mark { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; flex-shrink: 0; border-radius: .55rem; background: var(--acid); color: var(--acid-ink); font-size: 1rem; letter-spacing: 0; }
.resource-label { color: var(--muted); font-size: .75rem; white-space: nowrap; }
.eyebrow, .label, .hero-kicker { font: 600 .875rem/1.5 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.eyebrow { color: var(--muted); margin-bottom: 1rem; }
.label { color: var(--acid); margin-bottom: 1.25rem; }

/* The editorial title leads; supporting copy stays comfortable to read. */
.hero { padding-block: 4.5rem 3rem; }
.hero-kicker { display: flex; align-items: center; gap: .65rem; color: var(--acid); }
.hero-kicker span { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.hero h1 { margin: 1.75rem 0 2rem; max-width: 18ch; font-size: clamp(2.65rem, 10.6vw, 6.75rem); font-weight: 650; line-height: 1.05; letter-spacing: -.055em; }
.hero h1 em { color: var(--acid); font-family: Georgia, serif; font-weight: 500; }
.hero-subtitle { max-width: 37rem; color: #e8ece4; font-size: clamp(1.25rem, 2.1vw, 1.6rem); line-height: 1.55; }
.hero-intro { max-width: 39rem; margin-top: 2.25rem; color: #bdc5ba; font-size: 1.125rem; line-height: 1.8; }
.hero-intro p:last-child { margin-top: 1.5rem; margin-bottom: 0; color: var(--text); }
.signal-map { margin-top: 3rem; display: flex; align-items: center; gap: .8rem; }
.signal-label { font-size: .75rem; color: var(--muted); letter-spacing: .06em; white-space: nowrap; }
.signal-line { display: flex; flex: 1; justify-content: space-around; align-items: center; height: 1px; background: var(--line); }
.signal-line i { width: .4rem; height: .4rem; border: 1px solid #788471; border-radius: 50%; background: var(--ink); }
.signal-line i:last-child { background: var(--acid); border-color: var(--acid); }

/* Seven entry points belong to the same dark surface as the guide. */
.quick-nav { padding-block: 2rem 4rem; }
.quick-nav-heading { margin-bottom: 2rem; }
.quick-nav h2 { margin: 0; max-width: 20ch; font-size: clamp(2rem, 5vw, 3.3rem); line-height: 1.15; letter-spacing: -.04em; }
.quick-grid { display: grid; gap: .75rem; }
.quick-link { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center; gap: .8rem; min-height: 6rem; padding: 1rem; border: 1px solid #343d44; border-radius: 1rem; background: #151a1e; text-decoration: none; transition: border-color .18s, background .18s, transform .18s; }
.quick-link:hover { transform: translateY(-3px); border-color: #8cab59; background: #1c241a; }
.quick-link:focus-visible { border-color: var(--acid); }
.quick-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid #414b37; border-radius: .8rem; background: #20291b; color: var(--acid); }
.quick-title { font-size: 1rem; font-weight: 600; line-height: 1.45; }
.quick-arrow { color: #bac6ac; font-size: .8125rem; white-space: nowrap; }

/* Chapters occupy full mobile width; number becomes a chapter marker. */
.use-case { position: relative; padding-block: 4rem; border-top: 1px solid var(--line); }
.section-index { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.25rem; }
.section-index span { color: var(--acid); font: 450 3rem/1 var(--sans); letter-spacing: -.06em; }
.section-index i { width: 3rem; height: 1px; background: #657b3b; }
.section-body { min-width: 0; }
.section-heading { margin-bottom: 2rem; }
.section-heading .eyebrow { max-width: 32ch; }
.section-heading h2 { max-width: 22ch; margin-bottom: 0; font-size: clamp(2.05rem, 6.6vw, 4rem); line-height: 1.1; font-weight: 600; letter-spacing: -.045em; }
.content-grid { display: grid; gap: 1.5rem; }
.info-block { min-width: 0; padding: 1.5rem; border-radius: var(--radius); background: var(--panel); color: #d3dbce; }
.info-block p:last-child { margin-bottom: 0; }
.info-block--lead { padding: 1.5rem 0; background: transparent; color: var(--text); font-size: 1.3rem; line-height: 1.6; }
.info-block--lead .label { font-size: .875rem; }
.info-block ul { margin: 0 0 1.5rem; padding-left: 1.2rem; }
.info-block li + li { margin-top: .6rem; }
.pull-quote { margin-block: 1.5rem; color: var(--text); font-size: 1.45rem; font-weight: 550; line-height: 1.45; letter-spacing: -.015em; }
.flow-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-block: 1.5rem; }
.flow-row span { padding: .6rem .8rem; border: 1px solid #374330; border-radius: .7rem; background: #1c2419; color: #e0ebd5; font-size: 1rem; }
.flow-row b { color: var(--acid); font-weight: 400; }
.note { padding: 1.25rem; border-left: 2px solid #7c9b44; color: #c8d2bd; background: #192017; font-size: 1rem; }
.definition-grid { display: grid; gap: .75rem; margin-top: 1.5rem; }
.definition-grid div { padding: 1.25rem; border: 1px solid var(--line); border-radius: .9rem; background: #0e1215; }
.definition-grid b, .definition-grid span { display: block; }
.definition-grid b { margin-bottom: .45rem; color: var(--acid); font-size: 1rem; font-weight: 600; }
.definition-grid span { color: #c5cec0; font-size: 1.0625rem; }
.compare { display: grid; gap: .75rem; margin-bottom: 1.5rem; }
.compare div { padding: 1.25rem; border: 1px solid var(--line); border-radius: 1rem; }
.compare div:last-child { border-color: #6e8a44; background: #192017; }
.compare span { font-size: .9375rem; font-weight: 650; color: var(--acid); }
.compare p { margin: .75rem 0 0; }

/* Prompts are readable worksheets, with a clear copy control. */
.prompt-card { min-width: 0; overflow: hidden; margin-top: 1rem; border-radius: var(--radius); border: 1px solid #586544; background: #181e19; }
.prompt-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem; border-bottom: 1px solid #3c4634; }
.prompt-top > span { font-size: .875rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: #d2dfc2; }
.copy-button { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; min-height: 3rem; padding: .65rem 1rem; border: 0; border-radius: .75rem; background: var(--acid); color: var(--acid-ink); font-size: 1rem; font-weight: 650; cursor: pointer; transition: background .18s, box-shadow .18s; }
.copy-button::before { content: ""; width: .72rem; height: .85rem; border: 1.5px solid currentColor; border-radius: .15rem; box-shadow: -.2rem -.2rem 0 -.08rem var(--acid), -.2rem -.2rem 0 .01rem currentColor; }
.copy-button:hover { background: #ddff9b; box-shadow: 0 0 0 3px #ccff661a; }
.copy-button:focus-visible { outline-color: white; }
.copy-button.is-copied { background: #f2f4ef; }
.copy-button.is-copied::before { border: 0; box-shadow: none; width: .85rem; height: .45rem; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.prompt-card pre { margin: 0; padding: 1.5rem; color: #edf1e8; font: 400 1.0625rem/1.8 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.tip { display: grid; gap: .85rem; padding: 1.25rem 0 1.25rem 1.25rem; border-left: 2px solid #78994a; color: #c8d2bf; }
.tip span { color: var(--acid); font-size: .875rem; letter-spacing: .08em; font-weight: 650; }
.tip p { margin: 0; }
.toast { position: fixed; z-index: 50; left: 50%; bottom: max(1.25rem, env(safe-area-inset-bottom)); transform: translate(-50%, 150%); padding: 1rem 1.5rem; border: 1px solid #9cc34f; background: var(--acid); color: var(--acid-ink); border-radius: 1rem; font-size: 1rem; font-weight: 700; box-shadow: 0 .5rem 3rem #0008; opacity: 0; pointer-events: none; white-space: nowrap; transition: transform .2s, opacity .2s; }
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }

/* Function-specific diagrams. No screenshots or fictitious results. */
.section-visual, .dashboard-placeholder { position: relative; min-width: 0; margin: 0 0 1rem; border: 1px solid #34412f; border-radius: var(--radius); background: #151b17; }
.section-visual { min-height: 19rem; padding: 1.5rem; }
.idea-visual { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; background: radial-gradient(ellipse at 50% 20%, #263421 0%, #151b17 75%); }
.voice-wave { display: flex; justify-content: center; align-items: center; gap: 4px; height: 4rem; width: min(100%, 19rem); }
.voice-wave i { width: 4px; height: var(--bar); border-radius: 1rem; background: var(--acid); opacity: .8; }
.idea-bridge { color: #a3b192; font-size: 1.5rem; }
.idea-outline { display: grid; gap: .65rem; width: min(85%, 16rem); padding: 1.1rem; border-radius: .9rem; border: 1px solid #556847; background: #20291f; }
.idea-outline i { height: .45rem; margin-left: 1.2rem; background: #819073; border-radius: .3rem; position: relative; }
.idea-outline i::before { position: absolute; content: ""; left: -1.1rem; width: .45rem; height: .45rem; border-radius: 50%; background: var(--acid); }
.idea-outline i:nth-child(2) { width: 65%; }
.idea-outline i:nth-child(3) { width: 45%; }
.agent-visual { display: grid; gap: 2rem; background-image: radial-gradient(#3a4832 .8px, transparent .8px); background-size: 1.1rem 1.1rem; }
.agent-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; position: relative; }
.agent-list span { position: relative; display: flex; flex-direction: column; gap: .4rem; min-width: 0; padding: .9rem .65rem; border: 1px solid #4b5742; background: #1a231b; border-radius: .75rem; font-size: .875rem; color: #bacaac; }
.agent-list b { color: #f0f5e8; font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.merge-node { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; margin-inline: auto; padding: 1rem; width: min(100%, 18rem); min-height: 6.5rem; border: 1px solid #91b45a; border-radius: 1rem; background: #202c1b; }
.merge-node i { position: absolute; top: -2.05rem; color: var(--acid); font-style: normal; font-size: 1.25rem; }
.merge-node strong { color: var(--acid); font-size: 1.4rem; font-weight: 600; }
.merge-node small { color: #cfdbc3; font-size: .875rem; }
.image-visual { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; padding-block: 2.5rem; background: #1c2027; border-color: #404851; }
.image-frame { position: relative; width: min(85%, 15rem); aspect-ratio: 4 / 5; border: 1px solid #758566; border-radius: .9rem; background: #111716; transform: rotate(-5deg); box-shadow: .75rem .75rem 0 #283324; }
.frame-label { position: absolute; top: 1rem; left: 1rem; color: #c9d8bb; font-size: .8125rem; letter-spacing: .07em; }
.frame-grid { position: absolute; inset: 3rem 1rem 1rem; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.frame-grid i { border: 1px dashed #536247; }
.frame-focus { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(5deg); padding: .6rem .9rem; background: var(--acid); color: var(--acid-ink); font-size: 1.25rem; font-weight: 650; border-radius: .3rem; }
.image-visual ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; list-style: none; margin: 0; padding: 0; }
.image-visual li { border: 1px solid #4b5348; border-radius: 999px; padding: .3rem .65rem; font-size: .9375rem; color: #dbe4d2; }
.files-visual { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; place-items: center; gap: 1.5rem; min-height: 25rem; background-image: linear-gradient(#ffffff05 1px, transparent 1px), linear-gradient(90deg, #ffffff05 1px, transparent 1px); background-size: 1.75rem 1.75rem; }
.file-chip { z-index: 1; min-width: 4rem; padding: .7rem .9rem; border: 1px solid #526047; border-radius: .65rem; background: #20271f; font-size: .9375rem; font-weight: 600; text-align: center; }
.file-pdf { grid-area: 1 / 1; transform: rotate(-7deg); }
.file-doc { grid-area: 1 / 2; transform: rotate(7deg); }
.file-xls { grid-area: 3 / 1; transform: rotate(5deg); }
.file-code { grid-area: 3 / 2; transform: rotate(-5deg); }
.context-core { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; grid-area: 2 / 1 / 3 / -1; width: 10rem; height: 10rem; border-radius: 50%; border: 1px solid #8daa61; background: #25321f; box-shadow: 0 0 0 .8rem #9db5770a; }
.context-core::before, .context-core::after { content: ""; position: absolute; width: 1px; height: 2rem; background: #708b4d; left: 50%; }
.context-core::before { bottom: 100%; }
.context-core::after { top: 100%; }
.context-core strong { color: var(--acid); font-size: 1rem; letter-spacing: .05em; }
.context-core small { color: #d3ddc8; font-size: .875rem; }
.dashboard-placeholder { padding: 1.25rem; border-color: #63774a; background: #1a2118; }
.dashboard-placeholder figcaption { display: flex; flex-direction: column; gap: .65rem; padding-bottom: 1.5rem; }
.dashboard-placeholder figcaption span { font-size: .75rem; color: #b1c29d; letter-spacing: .07em; }
.dashboard-placeholder figcaption strong { font-size: 1.25rem; line-height: 1.4; font-weight: 550; }
.fake-dashboard { min-height: 16rem; display: grid; grid-template-columns: 2rem 1fr; padding: .65rem; border: 1px solid #404e36; border-radius: .9rem; background: #0c1110; }
.fake-nav { border-right: 1px solid #354031; background: repeating-linear-gradient(180deg, #333e2c 0, #333e2c 4px, transparent 4px, transparent 2rem); background-size: 60% auto; background-repeat: no-repeat; }
.fake-main { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 3.5rem 1fr; gap: .55rem; padding-left: .8rem; }
.fake-main i { border-radius: .4rem; background: #252f22; border: 1px solid #3e4a34; }
.fake-main i:first-child { border-color: #9bbc64; background: #344329; }
.fake-main div { grid-column: 1 / -1; border: 1px solid #303c2b; border-radius: .5rem; background: repeating-linear-gradient(0deg, #151c14 0, #151c14 1.6rem, #2b3526 1.6rem, #2b3526 calc(1.6rem + 1px)); }
.dashboard-placeholder--real { padding: 0; }
.dashboard-placeholder--real img { display: block; width: 100%; border-radius: inherit; }
.dashboard-placeholder--real figcaption { padding: 1rem; }
.connection-visual { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr 1fr 1fr; place-items: center; gap: .5rem; padding: 1rem; min-height: 23rem; background-image: linear-gradient(45deg, transparent calc(50% - 1px), #445338 50%, transparent calc(50% + 1px)), linear-gradient(-45deg, transparent calc(50% - 1px), #445338 50%, transparent calc(50% + 1px)); }
.tool-node, .ai-node { display: grid; place-items: center; width: 100%; max-width: 6.5rem; aspect-ratio: 1; border: 1px solid #5b6b4e; border-radius: 1.25rem; background: #1d281c; font-size: .9375rem; font-weight: 600; }
.tool-node:nth-child(1) { grid-area: 1 / 1; }
.tool-node:nth-child(2) { grid-area: 1 / 3; }
.ai-node { grid-area: 2 / 2; background: var(--acid); color: var(--acid-ink); border-radius: 50%; font-size: 1.6rem; }
.tool-node:nth-child(4) { grid-area: 3 / 1; }
.tool-node:nth-child(5) { grid-area: 3 / 3; }
.recipe-visual { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: .5rem; background: #161b20; }
.recipe-visual span { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid #3f4b37; border-radius: .8rem; background: #1c251d; font-size: 1.125rem; }
.recipe-visual span b { color: var(--acid); font-size: 1rem; font-weight: 400; }
.recipe-visual i { text-align: center; color: #9fac90; font-style: normal; line-height: 1; }
.recipe-visual .recipe-result { background: #24331c; border-color: #9abc67; color: var(--acid); }

/* Decision tree: title is the root; each branch ends in a tool. */
.bonus { position: relative; margin-block: 2rem 0; padding-block: 3rem; }
.bonus-heading { max-width: 44rem; margin-inline: auto; }
.bonus .eyebrow { color: var(--acid); }
.bonus h2 { margin-bottom: 1.5rem; font-size: clamp(2.8rem, 7vw, 5rem); line-height: 1.05; letter-spacing: -.05em; font-weight: 550; }
.bonus h2 em { color: var(--acid); font-family: Georgia, serif; font-weight: 500; }
.bonus-heading > p:last-child { color: var(--muted); margin-bottom: 2rem; font-size: 1.125rem; }
.decision-tree { position: relative; display: grid; gap: 1.5rem; margin-left: .5rem; padding: 1.5rem 0 0 1.25rem; border-left: 1px solid #566c39; }
.decision-tree::before { content: ""; position: absolute; width: .6rem; height: .6rem; left: -.35rem; top: -.2rem; border: 1px solid var(--acid); border-radius: 50%; background: var(--ink); }
.decision-row { position: relative; display: grid; grid-template-columns: 1fr; align-content: start; padding: 1.5rem 1.25rem; border: 1px solid #394631; border-radius: 1.15rem; background: #141b14; }
.decision-row::before { content: ""; position: absolute; left: -1.3rem; top: 2rem; width: 1.3rem; height: 1px; background: #6a8448; }
.decision-number { color: #9db780; font-size: .8125rem; margin-bottom: .75rem; }
.decision-row p { color: #e5ecdf; font-size: 1.125rem; line-height: 1.45; margin: 0; }
.decision-row i { display: block; justify-self: start; margin-block: .75rem; transform: rotate(90deg); color: var(--acid); font-style: normal; line-height: 1; }
.decision-row strong { display: block; padding: .85rem 1rem; border: 1px solid #4d6237; border-radius: .65rem; background: #222f1a; color: var(--acid); font-size: 1rem; line-height: 1.5; font-weight: 600; }
.closing { display: grid; gap: 1.5rem; padding-block: 4rem 3rem; }
.closing-mark { color: var(--acid); font-size: 2.5rem; line-height: 1; }
.closing blockquote { margin: 0; max-width: 48rem; font-size: clamp(1.6rem, 3.2vw, 2.5rem); line-height: 1.5; letter-spacing: -.025em; }
.final-cta { position: relative; padding: 2rem 0; margin-bottom: 2rem; border-top: 1px solid var(--line); }
.final-cta .eyebrow { font-size: .8125rem; color: #aab7a0; }
.final-cta h2 { max-width: 38ch; margin-bottom: 1rem; font-size: 1.4rem; line-height: 1.5; letter-spacing: -.02em; font-weight: 500; }
.final-cta > p:not(.eyebrow) { max-width: 40rem; color: var(--muted); }
.instagram-button { display: inline-flex; justify-content: space-between; align-items: center; gap: 1.25rem; min-height: 3.25rem; margin-top: .5rem; padding: .7rem 1rem; border: 1px solid #566744; border-radius: .8rem; color: var(--acid); text-decoration: none; font-size: 1rem; font-weight: 550; transition: background .2s; }
.instagram-button:hover { background: #25321d; }
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 2rem; border-top: 1px solid var(--line); }
.site-footer > span { color: var(--muted); font-size: .75rem; }

@media (max-width: 23rem) {
  .site-header { flex-wrap: wrap; gap: .5rem; padding-block: 1rem; }
  .quick-link { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .quick-arrow { grid-column: 2; }
  .quick-icon { width: 2.5rem; height: 2.5rem; }
  .prompt-top { flex-direction: column; align-items: stretch; }
  .prompt-top > span { align-self: flex-start; }
  .copy-button { width: 100%; }
  .agent-list { grid-template-columns: minmax(0, 1fr); }
  .agent-list span { flex-direction: row; align-items: center; justify-content: space-between; gap: .6rem; }
}

@media (min-width: 44rem) {
  .site-header, .hero, .quick-nav, .sections, .bonus, .closing, .final-cta, .site-footer { width: min(calc(100% - 4rem), var(--content)); }
  .hero { padding-top: 6rem; }
  .hero-subtitle { margin-top: 2.5rem; }
  .hero-intro { margin-left: 12%; }
  .quick-nav { padding-block: 3rem 5rem; }
  .quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .quick-link { min-height: 7rem; padding: 1.25rem; }
  .quick-link:last-child { grid-column: 1 / -1; }
  .use-case { padding-block: 5rem; }
  .section-index { margin-bottom: 2rem; }
  .section-heading h2 { max-width: 24ch; }
  .section-visual { min-height: 25rem; padding: 2rem; }
  .info-block { padding: 2rem; }
  .info-block--lead { padding: 1.5rem 0; }
  .content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .info-block--lead, .prompt-card, .tip { grid-column: 1 / -1; }
  .prompt-top { padding: 1.5rem 2rem; }
  .prompt-card pre { padding: 2.25rem; font-size: 1.125rem; max-width: 72ch; }
  .tip { padding: 1.25rem 1.5rem; }
  .image-visual { flex-direction: row; gap: 4rem; }
  .image-visual ul { flex-direction: column; }
  .image-frame { width: 15rem; }
  .agent-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
  .agent-list span { padding: 1.2rem .75rem; }
  .agent-list::after { content: ""; position: absolute; top: calc(100% + .75rem); height: 1px; left: 12%; right: 12%; background: #778f57; }
  .agent-list span::after { content: ""; position: absolute; top: 100%; left: 50%; height: .75rem; width: 1px; background: #778f57; }
  .agent-visual { gap: 3rem; align-content: center; }
  .files-visual { grid-template-columns: 1fr 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 1.5rem; }
  .file-pdf { grid-area: 1 / 1; }
  .file-doc { grid-area: 1 / 3; }
  .file-xls { grid-area: 2 / 1; }
  .file-code { grid-area: 2 / 3; }
  .context-core { grid-area: 1 / 2 / -1 / 3; }
  .context-core::before, .context-core::after { width: 2rem; height: 1px; top: 50%; bottom: auto; }
  .context-core::before { left: auto; right: 100%; }
  .context-core::after { left: 100%; }
  .dashboard-placeholder { padding: 2rem; }
  .fake-dashboard { min-height: 23rem; grid-template-columns: 5rem 1fr; padding: 1.25rem; }
  .fake-main { grid-template-rows: 5rem 1fr; padding-left: 1.25rem; gap: 1rem; }
  .definition-grid, .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .connection-visual { grid-template-columns: 1fr 1fr 1fr; padding: 2rem 4rem; }
  .recipe-visual { grid-template-columns: 1fr auto 1fr; }
  .recipe-visual span { flex-direction: column; align-items: flex-start; padding: 1.5rem; }
  .recipe-visual i:nth-child(4) { grid-column: 1 / -1; }
  .bonus { padding-top: 5rem; }
  .bonus-heading { text-align: center; }
  .decision-tree { grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 0; padding: 3rem 0 0; margin-left: 0; column-gap: 3rem; row-gap: 2rem; }
  .decision-tree::before { width: 1px; height: 100%; top: 0; left: 50%; border: none; border-radius: 0; background: #566c39; }
  .decision-row::before { left: auto; right: -1.55rem; width: 1.55rem; }
  .decision-row:nth-child(even)::before { right: auto; left: -1.55rem; }
  .closing { grid-template-columns: 3rem 1fr; padding-block: 6rem 4rem; }
}

@media (min-width: 68rem) {
  .hero { display: grid; grid-template-columns: 1fr 1fr; column-gap: 5rem; padding-top: 7rem; }
  .hero-kicker, .hero h1, .signal-map { grid-column: 1 / -1; }
  .hero h1 { max-width: 19ch; margin-bottom: 3rem; }
  .hero-subtitle { margin: 0; padding-top: .25rem; }
  .hero-intro { margin: 0; padding-left: 2rem; border-left: 1px solid #52663c; }
  .hero-intro p:last-child { margin-top: 1.5rem; }
  .signal-map { margin-top: 4rem; }
  .quick-nav { padding-bottom: 7rem; }
  .quick-nav-heading { margin-bottom: 2.5rem; }
  .quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .quick-link { position: relative; grid-template-columns: 1fr; align-content: space-between; align-items: start; min-height: 12rem; padding: 1.5rem; }
  .quick-link:last-child { grid-column: span 2; grid-template-columns: 1fr; }
  .quick-title { max-width: 21ch; font-size: 1.125rem; }
  .quick-arrow { position: absolute; top: 1.8rem; right: 1.25rem; }
  .use-case { padding-block: 7rem; }
  .section-index { position: absolute; top: 7rem; left: 0; }
  .section-index span { font-size: 3.75rem; }
  .section-index i { display: none; }
  .section-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 2rem; row-gap: 2rem; }
  .section-heading { grid-column: 2 / -1; margin: 0 0 1.5rem; padding-left: 1rem; }
  .section-heading .eyebrow { max-width: none; }
  .content-grid { display: contents; }
  .section-visual { grid-column: 1 / 7; grid-row: 2 / 4; margin: 0; align-self: stretch; }
  .info-block--lead { grid-column: 7 / -1; grid-row: 2; align-self: center; padding: 1rem; font-size: 1.45rem; }
  .info-block:nth-child(2) { grid-column: 7 / -1; grid-row: 3; }
  .info-block:nth-child(3) { grid-column: 1 / -1; }
  .prompt-card { grid-column: 1 / 10; margin-top: 1rem; }
  .tip { grid-column: 10 / -1; align-self: start; margin-top: 1rem; }
  .prompt-top { padding-inline: 2.5rem; }
  .prompt-card pre { padding: 2.5rem; font-size: 1.1875rem; line-height: 1.75; }
  .idea-visual { min-height: 32rem; gap: 2.5rem; }
  .voice-wave { height: 6rem; }
  .voice-wave i { width: 5px; }
  #investigar .agent-visual { grid-column: 1 / -1; grid-row: 2; min-height: 22rem; padding: 2.5rem 4rem; }
  #investigar .info-block--lead { grid-column: 1 / 6; grid-row: 3; }
  #investigar .info-block:nth-child(2) { grid-column: 6 / -1; }
  #investigar .info-block:nth-child(3) { grid-column: 1 / 6; grid-row: 4; }
  #investigar .prompt-card { grid-column: 6 / -1; grid-row: 4 / 6; }
  #investigar .tip { grid-column: 1 / 6; grid-row: 5; }
  #imagenes .image-visual { grid-column: 8 / -1; grid-row: 2 / 4; flex-direction: column; min-height: 36rem; }
  #imagenes .info-block--lead { grid-column: 1 / 8; grid-row: 2; }
  #imagenes .info-block:nth-child(2) { grid-column: 1 / 8; grid-row: 3; }
  #imagenes .info-block:nth-child(3) { grid-column: 1 / -1; grid-row: 4; }
  #imagenes .image-visual ul { flex-direction: row; }
  #archivos .files-visual { grid-column: 1 / 7; grid-row: 2 / 4; }
  .dashboard-placeholder { grid-column: 1 / -1; margin: 0; }
  #software .info-block--lead { grid-column: 1 / 6; grid-row: 3; }
  #software .info-block:nth-child(2) { grid-column: 6 / -1; grid-row: 3; }
  #software .info-block:nth-child(3) { grid-row: 4; }
  #software .definition-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #software .section-heading h2 { color: var(--acid); }
  #conectar .connection-visual { grid-column: 8 / -1; grid-row: 2; padding: 1.5rem; min-height: 25rem; }
  #conectar .info-block--lead { grid-column: 1 / 8; grid-row: 2; }
  #conectar .info-block:nth-child(2) { grid-column: 1 / 8; grid-row: 3; }
  #conectar .info-block:nth-child(3) { grid-column: 8 / -1; grid-row: 3; }
  #procesos .recipe-visual { grid-column: 1 / -1; grid-row: 2; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; min-height: 13rem; }
  #procesos .recipe-visual i:nth-child(4) { grid-column: auto; }
  #procesos .info-block--lead { grid-column: 1 / 7; grid-row: 3; }
  #procesos .info-block:nth-child(2) { grid-column: 7 / -1; grid-row: 3; }
  #procesos .skill-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bonus { padding-top: 6rem; }
  .decision-tree { max-width: 65rem; margin-inline: auto; column-gap: 6rem; row-gap: 2rem; }
  .decision-row { padding: 1.75rem; }
  .decision-row::before { width: 3.05rem; right: -3.05rem; }
  .decision-row:nth-child(even)::before { left: -3.05rem; }
  .decision-row p { font-size: 1.25rem; }
  .closing { max-width: 60rem; padding-block: 7rem 4rem; }
  .final-cta { max-width: 60rem; padding-right: 20rem; }
  .instagram-button { position: absolute; top: 4.5rem; right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}