@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/landing-fonts/hankengrotesk/latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/landing-fonts/hankengrotesk/latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/landing-fonts/splinesansmono/latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Spline Sans Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/landing-fonts/splinesansmono/latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

[data-agencify-brand="estudio-v1"] {
  --orange: color-mix(in srgb, var(--agencify-estudio-color-heading-accent) 95%, var(--agencify-estudio-color-ink));
  --action: var(--agencify-estudio-color-action);
  --blue: var(--agencify-estudio-color-accent);
  --ink: var(--agencify-estudio-color-ink);
  --graphite: var(--agencify-estudio-color-graphite);
  --paper: var(--agencify-estudio-color-surface);
  --white: var(--agencify-estudio-color-sheet);
  --pale-blue: var(--agencify-estudio-color-selection);
  --line: var(--agencify-estudio-color-line);
  --muted: var(--agencify-estudio-color-muted);
  --on-dark: var(--agencify-estudio-color-inverse);
  --dark-muted: var(--agencify-estudio-color-inverse-muted);
  --dark-line: var(--agencify-estudio-color-inverse-line);
  --error: var(--agencify-estudio-color-error);
  --font-body: "Hanken Grotesk", var(--agencify-estudio-font-body);
  --font-display: var(--agencify-estudio-font-display);
  --font-mono: "Spline Sans Mono", var(--agencify-estudio-font-mono);
  --content-width: var(--agencify-estudio-content-width);
  --gutter: var(--agencify-estudio-gutter);
  --radius: 0;
  --agencify-estudio-type-label: var(--agencify-estudio-type-small);
  --focus: 3px solid var(--blue);
  --shadow-sheet: var(--agencify-estudio-shadow-sheet);
  --space-1: var(--agencify-estudio-space-1);
  --space-2: var(--agencify-estudio-space-2);
  --space-3: var(--agencify-estudio-space-3);
  --space-4: var(--agencify-estudio-space-4);
  --space-5: var(--agencify-estudio-space-5);
  --space-6: var(--agencify-estudio-space-6);
  --space-8: var(--agencify-estudio-space-8);
  --space-10: var(--agencify-estudio-space-10);
  --space-12: var(--agencify-estudio-space-12);
  --space-16: var(--agencify-estudio-space-16);
  --space-20: var(--agencify-estudio-space-20);
  --space-24: var(--agencify-estudio-space-24);
  color: var(--ink);
  background: var(--paper);
  font-family: var(--font-body);
  font-synthesis: none;
  font-size: 16px;
}
/* Editorial composition. Product iframe styles remain wholly inside the product. */
.ag-studio-complete {
 --studio-heading: clamp(3.5rem, 5.5vw, 5rem);
 --studio-section-title: clamp(3rem, 5.25vw, 4.75rem);
 --studio-subtitle: clamp(1.875rem, 2.75vw, 2.5rem);
 --studio-lead: 1.125rem;
 --studio-turquoise: color-mix(in srgb, var(--blue) 65%, var(--ink));
 --studio-footer: var(--ag-dark-section, #0c0f1e);
 --studio-wash: color-mix(in srgb, var(--blue) 12%, var(--paper));
 --studio-cta: var(--action);
 --studio-cta-small: color-mix(in srgb, var(--agencify-estudio-color-heading-accent) 90%, var(--ink));
 --studio-orange-wash: color-mix(in srgb, var(--orange) 12%, var(--white));
 --studio-grid-color: color-mix(in srgb, var(--ink) 7%, transparent);
 --studio-grid: linear-gradient(var(--studio-grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--studio-grid-color) 1px, transparent 1px);
 --studio-sheet-tilt: -4deg;
 --studio-panel-tilt: 2deg;
 --studio-status-active: #047857;
 /* Same contact green as the public landing shell in globals.css. */
 --studio-whatsapp: #1DA851;
 --studio-status-active-surface: #ecfdf5;
 --studio-status-paused: #dc2626;
 --studio-status-paused-surface: #fef2f2;
 --studio-grain: url('/landing/estudio-completo/paper-grain.webp');
 overflow-wrap: break-word;
 background-image: var(--studio-grain);
 background-size: 512px 512px;
 background-blend-mode: soft-light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 7rem; overflow-x: hidden; }
body { margin: 0; max-width: 100%; overflow-x: clip; }
button,input { font: inherit; }
button,summary,a { -webkit-tap-highlight-color: transparent; }
button,a { touch-action: manipulation; }
button { color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
figure,p,h1,h2,h3 { margin: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.container { width: min(100% - var(--gutter) * 2, var(--content-width)); margin-inline: auto; }
.skip-link { position: fixed; top: var(--space-3); inset-inline-start: var(--space-3); padding: var(--space-4); background: var(--white); z-index: 140; transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); }
.ag-studio-complete :is(button,[role="button"],.button,.ag-landing-cta,.ag-public-header-trial,.ag-public-language-trigger) { border-radius: 0 !important; }
.ag-studio-complete .ag-public-site-header {
 --ag-public-header-background: var(--white);
 --ag-public-header-foreground: var(--ink);
 --ag-public-header-border: var(--line);
 --ag-public-header-radius: 0;
 --ag-public-header-height: var(--space-24);
 --ag-public-header-control-height: var(--space-12);
 --ag-public-header-max-width: calc(var(--content-width) + var(--gutter) * 2);
 font-family: var(--font-mono);
 border: 0;
}
.ag-studio-complete .ag-public-site-header-bar { width: min(100% - var(--gutter) * 2, var(--content-width)); padding-inline: 0; border-bottom: 1px solid var(--ink); }
.ag-studio-complete .ag-public-site-header-logo-image { width: var(--agencify-estudio-logo-width); }
.ag-studio-complete .ag-public-header-trial { background: var(--studio-cta) !important; color: var(--ink) !important; padding-inline: var(--space-4); font-family: var(--font-body) !important; font-size: calc(var(--space-5) * .95); line-height: 1.15; letter-spacing: normal; font-stretch: normal; white-space: nowrap; flex-shrink: 0; }
.ag-studio-complete .ag-public-language-trigger { font-size: var(--agencify-estudio-type-small); }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-4) var(--space-6); min-height: var(--agencify-estudio-control-height); background: var(--studio-cta); color: var(--ink); border: 1px solid transparent; font-size: var(--space-5); line-height: 1.35; font-weight: 700; }
.button:hover { background: var(--ink); color: var(--white); }
.button > span { font-size: var(--space-6); font-weight: 500; line-height: 1; }
.text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: var(--agencify-estudio-target-min); border-bottom: 1px solid currentColor; font-size: var(--agencify-estudio-type-small); font-weight: 700; }
.text-link:hover { color: var(--orange); }
.eyebrow,.fine-label { font: 500 var(--agencify-estudio-type-small)/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: .045em; }
.eyebrow { display: flex; align-items: center; gap: var(--space-3); }
h1,h2,h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; }
h1 { margin-top: var(--space-6); font-size: var(--studio-heading); line-height: 1.02; }
h2 { font-size: var(--studio-section-title); line-height: 1.04; }
h3 { font-size: var(--studio-subtitle); line-height: 1.12; }
.section-pad { padding-block: var(--space-16); }
.section-heading > p:not(.eyebrow) { font-size: var(--agencify-estudio-type-body); line-height: 1.8; color: var(--muted); margin-top: var(--space-5); }
.section-heading h2 { margin-top: 0; }
/* Text stays in ordinary inline flow, like the production typewriter. */
.hero { padding-block: var(--space-10) var(--space-12); }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: start; }
.hero-copy { min-width: 0; padding-block: var(--space-8); }
.hero .eyebrow { font-family: var(--font-body); font-size: var(--space-5); font-weight: 600; letter-spacing: .025em; }
.tiny-cross { display: none; }
.hero .eyebrow::before { content: ''; display: block; width: var(--space-6); height: 2px; background: var(--ink); flex-shrink: 0; }
.studio-hero-prefix,.studio-hero-cycle,.ag-hero-typed { display: inline; }
.hero h1:has(.studio-hero-cycle) { min-height: 3.06em; }
.studio-hero-cycle { color: var(--orange); font-weight: inherit; }
.studio-type-caret { display: inline-block; width: 2px; height: .72em; background: currentColor; margin-inline-start: .06em; }
.hero-description { font-size: var(--studio-lead); color: var(--muted); line-height: 1.65; margin-top: var(--space-6); max-width: 33rem; }
.signup-form { margin-top: var(--space-8); }
.form-footnote { margin-top: var(--space-3); font-size: var(--agencify-estudio-type-body); line-height: 1.6; color: var(--muted); }
/* Selected resources and their four combinations mirror the product builder. */
.studio-campaign-collage { position: relative; isolation: isolate; min-width: 0; padding: var(--space-6) var(--space-3) var(--space-5); }
.studio-campaign-collage::before { content: ''; position: absolute; z-index: -1; inset: 0 0 0 16%; background-color: var(--studio-wash); background-image: var(--studio-grid); background-size: var(--space-8) var(--space-8); }
.hero-resource-sheet { position: relative; padding: var(--space-5); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sheet); transform: rotate(-2deg); }
.hero-sheet-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); border-bottom: 1px solid var(--line); padding-bottom: var(--space-4); font-size: var(--studio-lead); }
.hero-sheet-heading img { width: var(--space-6); height: var(--space-6); object-fit: contain; }
.hero-resource-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-4); }
.hero-resource-bucket { min-width: 0; background: var(--paper); border: 1px dashed var(--line); border-radius: var(--space-2); padding: var(--space-3); }
.hero-resource-bucket h3 { display: flex; align-items: center; gap: var(--space-2); font: 600 var(--agencify-estudio-type-small)/1.4 var(--font-body); letter-spacing: normal; margin-bottom: var(--space-3); }
.hero-resource-bucket h3 svg { width: var(--space-4); height: var(--space-4); color: var(--muted); flex-shrink: 0; }
.hero-resource-bucket h3 span { margin-inline-start: auto; color: var(--muted); }
.hero-resource-chip { padding: var(--space-2); margin-top: var(--space-2); border: 1px solid var(--line); border-radius: var(--space-1); background: var(--white); font-size: var(--agencify-estudio-type-small); font-weight: 500; line-height: 1.35; }
.hero-destination { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-4); }
.hero-destination h3 { margin-bottom: 0; flex: 1; }
.hero-destination .hero-resource-chip { margin-top: 0; }
.hero-combination-formula { margin-top: var(--space-4); font-size: var(--agencify-estudio-type-small); line-height: 1.5; color: var(--muted); }
.hero-campaign-output { position: relative; margin-top: var(--space-5); margin-inline-start: var(--space-8); padding: var(--space-5); background-color: var(--white); background-image: var(--studio-grain); background-size: 512px; background-blend-mode: soft-light; box-shadow: var(--shadow-sheet); border-top: 3px solid var(--blue); transform: rotate(1.5deg); }
.hero-output-heading { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-4); }
.hero-output-heading h2 { font: 700 var(--space-6)/1.2 var(--font-body); letter-spacing: normal; }
.hero-output-icon { display: grid; place-items: center; padding: var(--space-2); background: var(--studio-wash); color: var(--ink); }
.hero-output-icon svg { width: var(--space-6); height: var(--space-6); }
.hero-combinations { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.hero-combination { min-width: 0; padding-inline-start: var(--space-3); border-inline-start: 2px solid var(--blue); font-size: var(--agencify-estudio-type-small); line-height: 1.45; }
.hero-combination strong,.hero-combination span { display: block; }
.hero-combination strong { font-weight: 600; }
.hero-combination span { color: var(--muted); margin-top: var(--space-1); }
/* Five comparisons alongside their headline, as an editorial spread. */
.day-section { background-color: var(--ink); color: var(--white); padding-block: var(--space-16); }
.day-section,.ai-section,.final-cta { position: relative; isolation: isolate; }
.day-section::before,.ai-section::before,.final-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background-image: var(--studio-grain); background-size: 512px; mix-blend-mode: screen; opacity: .025; pointer-events: none; }
.day-layout { display: grid; grid-template-columns: .8fr 1.7fr; gap: var(--space-12); align-items: start; }
.day-intro { position: sticky; top: 8rem; }
.day-intro h2 { max-width: 24rem; }
/* Product demonstrations sit on a wide work surface, with intact embedded UI. */
.studio-feature-intro { margin-bottom: var(--space-10); }
.studio-feature-intro > div { display: grid; grid-template-columns: .9fr 1.1fr; column-gap: var(--space-10); row-gap: var(--space-5); align-items: start; }
.studio-feature-intro .eyebrow { grid-column: 1 / -1; margin-bottom: var(--space-5); }
.studio-feature-intro h2 { grid-column: 1; max-width: 38rem; }
.studio-feature-intro p:not(.eyebrow):not(.studio-label),.studio-feature-intro ul,.studio-feature-intro .button { grid-column: 2; }
.studio-feature-intro p:not(.eyebrow):not(.studio-label):not(.studio-support-note) { color: var(--muted); font-size: var(--studio-lead); line-height: 1.8; }
.studio-feature-intro .button { justify-self: start; align-self: start; margin-top: 0; }
.studio-feature-body .button { margin-top: var(--space-6); }
.studio-builder-comparison { position: relative; padding: var(--space-6); background-color: var(--paper); background-image: var(--studio-grid); background-size: var(--space-8) var(--space-8); border: 1px solid var(--line); }
.studio-builder-tabs { display: flex; width: fit-content; max-width: 100%; margin-bottom: var(--space-5); border-bottom: 1px solid var(--ink); }
.studio-builder-tabs [role="tab"] { min-height: var(--agencify-estudio-target-min); padding: var(--space-3) var(--space-6); border: 0; background: transparent; color: var(--ink); font-weight: 700; font-size: var(--agencify-estudio-type-small); }
.studio-builder-tabs [aria-selected="true"] { background: var(--ink); color: var(--white); }
.studio-live-demo { background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sheet); }
.studio-live-demo iframe { display: block; width: 100%; border: 0; background: var(--white); }
.studio-live-demo [data-ag-product-demo-frame="blocks"] { min-height: 45rem; }
.studio-live-demo [data-ag-product-demo-frame="reports"] { min-height: 36rem; }
.studio-builder-overview { padding: var(--space-8) var(--space-3); }
.builder-inputs { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); gap: var(--space-4); align-items: start; }
.builder-resource-group { min-width: 0; padding: var(--space-5); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sheet); }
.builder-resource-group h3 { display: flex; justify-content: space-between; gap: var(--space-3); font: 600 var(--studio-lead)/1.4 var(--font-body); margin-bottom: var(--space-5); }
.builder-resource-group h3 span { font-family: var(--font-mono); }
.builder-resource { display: flex; gap: var(--space-3); align-items: center; min-height: var(--space-16); padding: var(--space-3); border: 1px solid var(--line); font-size: var(--agencify-estudio-type-small); line-height: 1.5; }
.builder-resource + .builder-resource { margin-top: var(--space-3); }
.builder-resource img,.builder-result-platform img { width: var(--space-5); height: var(--space-5); object-fit: contain; }
.builder-resource small { display: block; font-size: inherit; color: var(--muted); }
.builder-grip { font-size: var(--space-6); color: var(--muted); }
.builder-operator { margin-top: var(--space-20); font-size: var(--space-8); color: var(--muted); }
.builder-result-heading { display: flex; gap: var(--space-8); justify-content: space-between; align-items: center; padding-block: var(--space-10) var(--space-6); }
.builder-result-heading strong { font: 800 var(--studio-subtitle)/1 var(--font-display); }
.builder-result-heading p { color: var(--muted); font-size: var(--agencify-estudio-type-small); }
.builder-results { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--space-4); }
.builder-result { background: var(--white); padding: var(--space-5); border-top: 3px solid var(--blue); box-shadow: var(--shadow-sheet); min-width: 0; }
.builder-result-platform { display: flex; align-items: center; gap: var(--space-2); font-size: var(--agencify-estudio-type-small); }
.builder-result-platform span { margin-inline-start: auto; color: var(--muted); font-family: var(--font-mono); }
.builder-result h4 { margin-block: var(--space-6) var(--space-2); font-size: var(--agencify-estudio-type-body); line-height: 1.5; }
.builder-result p,.builder-result-destination { font-size: var(--agencify-estudio-type-small); line-height: 1.6; }
.builder-result-destination { border-top: 1px solid var(--line); margin-top: var(--space-5); padding-top: var(--space-3); color: var(--muted); }
/* The live report is the central sheet; a delivery slip completes the workflow. */
.reports-section { background-color: color-mix(in srgb, var(--studio-orange-wash) 42%, var(--paper)); }
.reports-section,.pricing-section { position: relative; isolation: isolate; }
.reports-section::before,.pricing-section::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--studio-grain); background-size: 512px; opacity: .08; pointer-events: none; }
.report-composition { display: grid; grid-template-columns: minmax(0,2.8fr) minmax(17rem,1fr); gap: var(--space-6); align-items: center; }
.report-spread { min-width: 0; position: relative; padding: var(--space-3); background: var(--white); border-top: 4px solid var(--blue); box-shadow: var(--shadow-sheet); }
.report-spread .studio-live-demo { border: 0; box-shadow: none; }
.report-delivery { position: relative; min-width: 0; align-self: start; }
.whatsapp-preview { background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sheet); transform: rotate(1.5deg); }
.whatsapp-contact { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); background: var(--studio-status-active); color: var(--white); }
.whatsapp-avatar { display: grid; place-items: center; width: var(--space-10); height: var(--space-10); border-radius: 50%; background: color-mix(in srgb, var(--white) 15%, transparent); }
.whatsapp-contact strong,.whatsapp-contact div > span { display: block; }
.whatsapp-contact strong { font-size: var(--studio-lead); }
.whatsapp-contact div > span { font-size: var(--agencify-estudio-type-small); }
.whatsapp-conversation { padding: var(--space-5) var(--space-3); background-color: color-mix(in srgb, var(--studio-orange-wash) 50%, var(--paper)); background-image: var(--studio-grain); background-size: 512px; background-blend-mode: multiply; }
.whatsapp-message { position: relative; padding: var(--space-4); margin-inline-start: var(--space-3); background: var(--studio-status-active-surface); border-radius: var(--space-2) 0 var(--space-2) var(--space-2); box-shadow: 0 1px 2px var(--line); }
.whatsapp-message h3 { font: 600 var(--studio-lead)/1.4 var(--font-body); letter-spacing: normal; }
.whatsapp-message p { margin-top: var(--space-2); font-size: var(--agencify-estudio-type-body); line-height: 1.5; }
.whatsapp-report-link { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); padding: var(--space-3); border: 1px solid color-mix(in srgb, var(--studio-status-active) 20%, transparent); background: var(--white); font-size: var(--agencify-estudio-type-small); }
.whatsapp-report-link strong,.whatsapp-report-link div > span { display: block; line-height: 1.4; }
.whatsapp-report-link div > span { color: var(--muted); margin-top: var(--space-1); }
.whatsapp-report-link > svg { width: var(--space-4); margin-inline-start: auto; flex-shrink: 0; color: var(--studio-status-active); }
.whatsapp-document { color: var(--blue); flex-shrink: 0; }
.whatsapp-time { display: flex; align-items: center; justify-content: end; gap: var(--space-1); font-size: var(--agencify-estudio-type-small); color: var(--muted); margin-top: var(--space-2); }
.whatsapp-time svg { width: var(--space-4); height: var(--space-4); color: var(--blue); }
.delivery-schedule { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-4); font-size: var(--agencify-estudio-type-small); line-height: 1.5; font-weight: 600; }
.delivery-schedule svg { flex-shrink: 0; color: var(--muted); }
.report-features { display: grid; grid-template-columns: 1fr; gap: var(--space-3); padding: 0; list-style: none; margin: var(--space-6) 0 0; }
.report-features li { display: flex; gap: var(--space-3); align-items: start; padding: var(--space-3); background: var(--white); border: 1px solid var(--line); font-size: var(--agencify-estudio-type-small); line-height: 1.5; }
.report-feature-icon { display: grid; place-items: center; color: var(--ink); background: var(--studio-wash); width: var(--space-10); height: var(--space-10); flex-shrink: 0; }
.report-features li:nth-child(2) { border-bottom-color: var(--orange); }
.report-features li:nth-child(2) .report-feature-icon { background: var(--studio-orange-wash); }
.report-features li:nth-child(3) { border-bottom-color: var(--ink); }
/* A vertical method and the recommendation anatomy used in the app. */
.ai-section { background-color: var(--ink); color: var(--white); }
.ai-top .section-heading { max-width: 48rem; }
.ai-top .section-heading > p:not(.eyebrow) { color: var(--dark-muted); font-size: var(--studio-lead); margin-top: 0; }
.ai-content { margin-top: var(--space-10); display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--space-12); align-items: center; }
.ai-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.ai-steps li { display: grid; grid-template-columns: var(--space-8) 1fr; gap: var(--space-4); padding-block: var(--space-4); border-top: 1px solid var(--dark-line); }
.ai-steps li:first-child { border-top: 0; padding-top: 0; }
.ai-steps h3 { font: 600 var(--space-6)/1.35 var(--font-body); letter-spacing: normal; }
.ai-steps p { font-size: var(--agencify-estudio-type-body); line-height: 1.65; color: var(--dark-muted); margin-top: var(--space-2); }
.recommendation-composition { min-width: 0; position: relative; padding: var(--space-5) var(--space-2); }
.recommendation-paper { padding: var(--space-6); color: var(--ink); background: var(--white); background-image: var(--studio-grain); background-size: 512px; background-blend-mode: soft-light; box-shadow: var(--shadow-sheet); transform: rotate(1deg); }
.recommendation-context { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.recommendation-context h3 { font: 700 var(--studio-lead)/1.5 var(--font-body); }
.recommendation-platform { display: flex; gap: var(--space-2); align-items: center; font-size: var(--agencify-estudio-type-small); }
.recommendation-platform img { width: var(--space-5); height: var(--space-5); object-fit: contain; }
.recommendation-card { border: 1px solid var(--line); border-inline-start: 4px solid var(--studio-status-paused); padding: var(--space-5); background: color-mix(in srgb, var(--studio-status-paused-surface) 35%, var(--white)); }
.recommendation-action { display: inline-block; padding: var(--space-1) var(--space-3); border: 1px solid color-mix(in srgb, var(--studio-status-paused) 25%, transparent); color: var(--studio-status-paused); font-weight: 700; font-size: var(--agencify-estudio-type-small); }
.recommendation-reason { border-inline-start: 2px solid var(--line); padding-inline-start: var(--space-3); margin-top: var(--space-4); font-size: var(--agencify-estudio-type-body); line-height: 1.7; }
.recommendation-assessment { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--space-5); padding-top: var(--space-5); margin-top: var(--space-5); border-top: 1px solid var(--line); }
.recommendation-score { display: flex; gap: var(--space-3); align-items: center; }
.recommendation-score strong { font-size: var(--space-10); line-height: 1; color: var(--studio-status-paused); }
.recommendation-score span { font-size: var(--agencify-estudio-type-small); line-height: 1.4; color: var(--muted); }
.recommendation-confidence { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); align-content: center; font-size: var(--agencify-estudio-type-small); }
.recommendation-confidence > span { color: var(--muted); }
.confidence-track { grid-column: 1 / -1; height: var(--space-2); background: color-mix(in srgb, var(--studio-status-active) 15%, transparent); }
.confidence-track span { display: block; height: 100%; width: 80%; background: var(--studio-status-active); }
.recommendation-actions { display: flex; gap: var(--space-3); margin-top: var(--space-5); font-size: var(--agencify-estudio-type-small); font-weight: 700; }
.recommendation-actions span { padding: var(--space-3) var(--space-4); }
.recommendation-apply { background: var(--studio-status-active); color: var(--white); }
.recommendation-decline { background: var(--studio-status-paused-surface); color: var(--studio-status-paused); border: 1px solid color-mix(in srgb, var(--studio-status-paused) 20%, transparent); }
.recommendation-composition figcaption { margin-top: var(--space-6); color: var(--dark-muted); font-size: var(--agencify-estudio-type-small); line-height: 1.6; }
.ai-bottom { display: flex; justify-content: space-between; gap: var(--space-8); align-items: center; margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--dark-line); }
.ai-bottom p { max-width: 42rem; color: var(--dark-muted); font-size: var(--agencify-estudio-type-small); line-height: 1.7; }
[data-studio-surface="dark"] .button:hover { color: var(--white); background: var(--studio-footer); }
/* Three profiles, each with a clear heading, benefits and a visible action. */
.audience-top .section-heading { max-width: 46rem; }
.audience-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-6); margin-top: var(--space-10); }
.audience-item { display: flex; flex-direction: column; position: relative; min-width: 0; padding: var(--space-6); background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--blue); }
.audience-item:nth-child(2) { border-top-color: var(--orange); }
.audience-item:nth-child(3) { border-top-color: var(--ink); }
.audience-icon { display: grid; place-items: center; width: var(--space-12); height: var(--space-12); background: var(--studio-wash); color: var(--ink); margin-bottom: var(--space-6); }
.audience-item:nth-child(2) .audience-icon { background: var(--studio-orange-wash); }
.audience-item:nth-child(3) .audience-icon { background: var(--ink); color: var(--white); }
.audience-icon svg { width: var(--space-6); height: var(--space-6); }
.audience-item h3 { font-size: var(--studio-subtitle); line-height: 1.12; min-height: 2.24em; font-weight: 700; }
.audience-item > p { font-size: var(--agencify-estudio-type-body); line-height: 1.65; color: var(--muted); margin-top: var(--space-4); }
.audience-item ul { padding: 0; margin: var(--space-6) 0; list-style: none; }
.audience-item li { display: flex; gap: var(--space-3); padding-block: var(--space-3); border-top: 1px solid var(--line); font-size: var(--agencify-estudio-type-body); line-height: 1.5; }
.audience-item li::before { content: '✓'; color: var(--blue); font-weight: 700; }
.audience-item .button { margin-top: auto; width: 100%; }
.pricing-section { background-color: var(--paper); border-block: 1px solid var(--line); }
.pricing-header { display: flex; align-items: end; justify-content: space-between; gap: var(--space-10); }
.pricing-header .section-heading { max-width: 42rem; }
.billing-choice { flex-shrink: 0; }
.billing-switch { display: flex; background: var(--white); padding: var(--space-1); border: 1px solid var(--line); }
.billing-switch button { display: inline-flex; align-items: center; gap: var(--space-3); }
.annual-saving { display: inline-block; background: color-mix(in srgb, var(--blue) 65%, var(--ink)); color: var(--white); padding: var(--space-1) var(--space-2); font-weight: 800; }
.billing-switch button { border: 0; padding: var(--space-3) var(--space-5); background: transparent; font-size: var(--agencify-estudio-type-small); font-weight: 700; }
.billing-discount { margin-top: var(--space-3); text-align: end; font-size: var(--agencify-estudio-type-small); color: var(--muted); }
.plans-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; border: 1px solid var(--line); margin-top: var(--space-12); background: var(--white); }
.plan { position: relative; display: flex; flex-direction: column; padding: var(--space-8) var(--space-6); min-width: 0; border-inline-end: 1px solid var(--line); }
.plan:last-child { border: 0; }
.plan h3 { font-size: var(--space-10); font-weight: 700; margin-block: var(--space-3) var(--space-4); }
.plan .fine-label { color: var(--muted); }
.plan-description { font-size: var(--agencify-estudio-type-small); line-height: 1.7; min-height: 5.25rem; color: var(--muted); }
.plan-price { font-family: var(--font-display); font-weight: 800; margin-top: var(--space-6); }
.price-note { font-size: var(--agencify-estudio-type-small); line-height: 1.7; color: var(--muted); min-height: var(--space-12); margin-top: var(--space-2); }
.plan-limits { list-style: none; padding: 0; margin: var(--space-6) 0 var(--space-8); flex: 1; font-size: var(--agencify-estudio-type-small); line-height: 1.7; }
.plan-limits li { border-top: 1px solid var(--line); padding-block: var(--space-3); }
.plan .button { padding: var(--space-3); gap: var(--space-2); font-size: var(--agencify-estudio-type-small); }
.plan.recommended { background: color-mix(in srgb, var(--blue) 6%, var(--white)); box-shadow: inset 0 3px var(--blue); }
.custom-plan { display: grid; grid-template-columns: auto minmax(0,1.2fr) minmax(0,1fr) auto; gap: var(--space-6); padding: var(--space-6); margin-block: var(--space-6); align-items: center; background: var(--white); border: 1px solid var(--line); border-inline-start: 3px solid var(--blue); }
.custom-plan-icon { display: grid; place-items: center; width: var(--space-16); height: var(--space-16); color: var(--ink); background: var(--studio-wash); }
.custom-plan-icon svg { width: var(--space-8); height: var(--space-8); }
.custom-plan p,.custom-price span { font-size: var(--agencify-estudio-type-body); line-height: 1.5; color: var(--muted); margin-top: var(--space-2); }
.custom-price { padding-inline-start: var(--space-6); border-inline-start: 1px solid var(--line); }
.custom-price strong,.custom-price span { display: block; }
.custom-price strong { font: 600 var(--space-6)/1.3 var(--font-body); }
.custom-plan .button { min-width: 11rem; }
.pricing-footnote { max-width: 68rem; color: var(--muted); font-size: var(--agencify-estudio-type-small); line-height: 1.7; }
.value-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--space-20); }
.value-argument { border-inline-start: 1px solid var(--ink); padding-inline-start: var(--space-12); align-self: center; }
.value-from { display: block; font: 500 var(--studio-lead)/1.5 var(--font-body); margin-bottom: var(--space-2); color: var(--muted); }
.value-anchor { color: var(--studio-turquoise); font: 800 var(--studio-section-title)/1 var(--font-display); }
.value-divider { border: 0; border-top: 1px solid var(--line); margin-block: var(--space-6); }
.value-emphasis { font: 700 var(--space-8)/1.25 var(--font-display); max-width: 28rem; }
.value-argument .button { margin-top: var(--space-6); }
.faq-section { border-top: 1px solid var(--line); background: var(--white); }
.faq-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--space-20); align-items: start; }
.faq-aside { position: sticky; top: 8rem; }
.faq-aside .text-link { margin-top: var(--space-5); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); padding-block: var(--space-5); min-height: var(--space-16); list-style: none; cursor: pointer; font-size: var(--agencify-estudio-type-body); font-weight: 700; line-height: 1.6; }
summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font: 500 var(--space-6)/1 var(--font-mono); color: var(--orange); }
.faq-item[open] summary::after { content: '−'; }
.faq-answer { padding: 0 var(--space-8) var(--space-5) 0; font-size: var(--agencify-estudio-type-body); line-height: 1.85; color: var(--muted); }
.faq-answer p + p,.faq-answer ol + p,.faq-answer p + ol { margin-top: var(--space-3); }
.faq-answer ol { margin-bottom: 0; padding-inline-start: var(--space-6); }
.faq-answer li + li { margin-top: var(--space-2); }
/* A calm ink close replaces the orange billboard. */
.final-cta { padding-block: var(--space-20); background-color: var(--ink); color: var(--white); }
.final-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--space-20); align-items: center; }
.final-copy h2 { font-size: var(--studio-heading); max-width: 42rem; margin-top: var(--space-6); text-wrap: balance; }
.cta-description { color: var(--dark-muted); font-size: var(--agencify-estudio-type-body); line-height: 1.8; max-width: 34rem; }
.final-action .button { margin-top: var(--space-6); }
.final-footnote { color: var(--dark-muted); font-size: var(--agencify-estudio-type-body); margin-top: var(--space-3); }
.site-footer { background: var(--studio-footer); color: var(--white); padding-bottom: var(--space-6); }
.footer-grid { border-top: 1px solid var(--dark-line); display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.3fr .8fr; gap: var(--space-8); padding-block: var(--space-12); }
.brand-link { display: inline-flex; }
.brand-logo { display: block; width: var(--agencify-estudio-logo-width); }
.brand-logo img { width: 100%; height: auto; }
.footer-brand > p { color: var(--dark-muted); font-size: var(--agencify-estudio-type-small); line-height: 1.8; margin-top: var(--space-5); }
.footer-company { color: var(--dark-muted); font-size: var(--agencify-estudio-type-small); line-height: 1.8; margin-top: var(--space-5); }
.footer-column h3 { font: 600 var(--agencify-estudio-type-body)/1.5 var(--font-body); letter-spacing: normal; margin-bottom: var(--space-4); }
.footer-column ul { padding: 0; margin: 0; list-style: none; }
.footer-column a { display: flex; flex-direction: column; justify-content: center; min-height: var(--agencify-estudio-target-min); font-size: var(--agencify-estudio-type-small); line-height: 1.7; color: var(--dark-muted); overflow-wrap: anywhere; }
.footer-column a small { font-size: inherit; }
.footer-column a:hover,.footer-social a:hover { color: var(--white); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); border-top: 1px solid var(--dark-line); padding-top: var(--space-5); font-size: var(--agencify-estudio-type-small); line-height: 1.8; color: var(--dark-muted); }
.footer-social { display: flex; gap: var(--space-5); }
.footer-social a,.footer-back-top { display: inline-flex; align-items: center; min-height: var(--agencify-estudio-target-min); }
.footer-back-top { gap: var(--space-3); }
@media (max-width: 1199px) {
 .ag-studio-complete .ag-public-site-header-logo-image { width: 11rem; }
 .hero-grid { gap: var(--space-6); }

 .studio-feature-intro > div,.ai-top .section-heading,.value-grid,.faq-grid,.final-grid { column-gap: var(--space-10); }
 .plan { padding: var(--space-6) var(--space-4); }
 .plan h3 { font-size: var(--space-8); }
 .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
 .footer-brand { grid-row: 1 / span 2; }
}
@media (max-width: 999px) {
 .ag-studio-complete .ag-public-site-header { --ag-public-header-height: var(--space-20); }
 .hero-grid { grid-template-columns: 1fr; }
 .hero-copy { max-width: 42rem; padding-block: var(--space-4); }
 .hero h1 { max-width: 40rem; }
 .studio-feature-intro > div { grid-template-columns: 1fr 1fr; gap: var(--space-5); }
 .studio-feature-intro p:not(.eyebrow):not(.studio-label):not(.studio-support-note) { font-size: var(--agencify-estudio-type-body); }
 .builder-inputs { gap: var(--space-2); }
 .builder-resource-group { padding: var(--space-3); }
 .builder-results { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .plans-grid { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: var(--space-8); background: transparent; border: 0; }
 .plan { background: var(--white); border: 1px solid var(--line); padding: var(--space-6); }
 .plan-description { min-height: 3.5rem; }
 .footer-bottom { flex-wrap: wrap; }
}
@media (max-width: 640px) {
 .ag-studio-complete { --studio-heading: clamp(3.25rem, 14.4vw, 4rem); --studio-section-title: clamp(2.8rem, 11.8vw, 3.6rem); --studio-subtitle: 2rem; --studio-lead: 1rem; }
 .ag-studio-complete .ag-public-site-header-logo-image { width: 10.5rem; }
 .section-pad { padding-block: var(--space-16); }
 .hero { padding-top: var(--space-6); }
 .hero .eyebrow { font-size: var(--agencify-estudio-type-body); letter-spacing: .045em; }
 .hero .eyebrow::before { width: var(--space-4); }
 .hero h1 { margin-top: var(--space-5); }
 .hero h1:has(.studio-hero-cycle) { min-height: 5.1em; }
 .hero-description { margin-top: var(--space-5); font-size: var(--agencify-estudio-type-body); line-height: 1.75; }
 .signup-form { margin-top: var(--space-6); }
 .signup-form .button { width: 100%; }
 .day-section { padding-block: var(--space-12); }
 .studio-feature-intro > div,.ai-top .section-heading { display: block; }
 .studio-feature-intro h2 { margin-bottom: var(--space-6); }
 .studio-feature-intro .button { margin-top: var(--space-5); }
 .studio-builder-comparison { padding: var(--space-3); margin-inline: calc(-1 * var(--space-3)); }
 .studio-builder-tabs { width: 100%; }
 .studio-builder-tabs [role="tab"] { flex: 1; padding-inline: var(--space-3); }
 .studio-builder-overview { padding: var(--space-4) 0; }
 .builder-inputs,.builder-results { grid-template-columns: 1fr; }
 .builder-operator { margin: 0; justify-self: center; }
 .builder-resource-group { padding: var(--space-5); }
 .builder-result-heading { display: block; padding-block: var(--space-8) var(--space-5); }
 .builder-result-heading p { margin-top: var(--space-3); line-height: 1.7; }
 .ai-bottom { display: block; }
 .ai-bottom .button { margin-top: var(--space-5); }
 .pricing-header { display: block; }
 .billing-choice { margin-top: var(--space-6); }
 .billing-switch { width: fit-content; }
 .billing-discount { text-align: start; }
 .plans-grid { grid-template-columns: 1fr; row-gap: var(--space-10); }
 .plan { padding: var(--space-6); }
 .plan h3 { font-size: var(--space-10); }
 .plan-description,.price-note { min-height: 0; }
 .plan-limits { margin-block: var(--space-5); }
 .value-grid,.faq-grid,.final-grid { grid-template-columns: 1fr; gap: var(--space-8); }
 .value-argument { padding-inline-start: 0; border: 0; border-top: 1px solid var(--line); padding-top: var(--space-8); }
 .faq-aside { position: static; }
 .faq-answer { padding-inline-end: var(--space-3); }
 .final-cta { padding-block: var(--space-16) var(--space-12); }
 .final-copy h2 { font-size: var(--studio-section-title); }
 .final-action .button { width: 100%; }
 .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8) var(--space-6); padding-block: var(--space-8); }
 .footer-brand { grid-column: 1 / -1; grid-row: auto; }
 .footer-bottom { align-items: start; flex-direction: column; gap: var(--space-3); }
}
/* Production adapters. The approved composition above stays scoped to this LP. */
[hidden] { display: none !important; }
.ag-studio-complete { --studio-modal-width: 30rem; --studio-overlay: color-mix(in srgb, var(--agencify-estudio-color-ink) 72%, transparent); --studio-modal-layer: 90; --studio-demo-min-height: 44rem; }
.ag-studio-complete .ag-signup-capture { position: fixed; inset: 0; z-index: var(--studio-modal-layer); display: grid; place-items: center; overflow-y: auto; padding: var(--space-4); background: var(--studio-overlay); }
.ag-studio-complete .ag-signup-capture-card { position: relative; width: min(100%, var(--studio-modal-width)); max-height: calc(100dvh - var(--space-8)); overflow-y: auto; padding: var(--space-8); border: var(--agencify-estudio-border-width) solid var(--line); border-radius: var(--radius); background: var(--white); }
.ag-studio-complete #ag-signup-capture-title { padding-inline-end: var(--space-10); font-size: var(--agencify-estudio-type-subtitle); line-height: var(--agencify-estudio-leading-title); }
.ag-studio-complete #ag-signup-capture-description { margin-block: var(--space-4); color: var(--muted); }
.ag-studio-complete .ag-signup-capture-close { position: absolute; inset-block-start: var(--space-3); inset-inline-end: var(--space-3); width: var(--agencify-estudio-target-min); height: var(--agencify-estudio-target-min); border: var(--agencify-estudio-border-width) solid var(--line); background: var(--paper); font-size: var(--agencify-estudio-type-subtitle); }
.ag-studio-complete .ag-signup-capture-form { display: grid; gap: var(--space-5); }
.ag-studio-complete .ag-signup-capture-field { display: grid; gap: var(--space-2); }
.ag-studio-complete .ag-signup-capture-form input { width: 100%; min-width: 0; min-height: var(--agencify-estudio-control-height); padding: var(--space-4); border: var(--agencify-estudio-border-width) solid var(--agencify-estudio-color-control-border); border-radius: var(--radius); background: var(--white); color: var(--ink); }
.ag-studio-complete .ag-signup-capture-error { color: var(--error); font-size: var(--agencify-estudio-type-small); }
.ag-studio-complete .ag-signup-capture .ag-landing-cta { min-height: var(--agencify-estudio-control-height); padding: var(--space-4); border: 0; border-radius: var(--radius); background: var(--studio-cta-small); color: var(--white); font-weight: var(--agencify-estudio-weight-emphasis); }
.ag-studio-complete[data-ag-signup-capture-open] { overflow: hidden; }
.ag-studio-complete .ag-signup-capture-oauth { display: grid; gap: var(--space-3); margin-block-end: var(--space-5); }
.ag-studio-complete .ag-signup-capture-oauth[hidden], .ag-studio-complete .ag-signup-capture-form[hidden] { display: none; }
.ag-studio-complete .ag-signup-capture-oauth-button { display: flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: var(--agencify-estudio-control-height); padding: var(--space-3) var(--space-4); border: var(--agencify-estudio-border-width) solid var(--agencify-estudio-color-control-border); border-radius: var(--radius); background: var(--white); color: var(--ink); font-weight: var(--agencify-estudio-weight-emphasis); text-decoration: none; }
.ag-studio-complete .ag-signup-capture-oauth-button:focus-visible, .ag-studio-complete .ag-signup-capture-actions button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ag-studio-complete .ag-signup-capture-oauth-button img, .ag-studio-complete .ag-signup-capture-oauth-button svg { flex: none; width: 20px; height: 20px; }
.ag-studio-complete .ag-signup-capture-divider { display: flex; align-items: center; gap: var(--space-3); margin: 0; color: var(--muted); font-size: var(--agencify-estudio-type-small); }
.ag-studio-complete .ag-signup-capture-divider::before, .ag-studio-complete .ag-signup-capture-divider::after { content: ""; flex: 1; height: var(--agencify-estudio-border-width); background: var(--line); }
.ag-studio-complete .ag-signup-capture-code-sent, .ag-studio-complete .ag-signup-capture-hint, .ag-studio-complete .ag-signup-capture-legal { margin: 0; color: var(--muted); font-size: var(--agencify-estudio-type-small); }
.ag-studio-complete .ag-signup-capture-legal { margin-block-start: var(--space-5); }
.ag-studio-complete .ag-signup-capture-legal a { color: inherit; text-decoration: underline; }
.ag-studio-complete .ag-signup-capture-form input[data-ag-signup-code] { padding-block: var(--space-3); text-align: center; text-indent: 0.35em; letter-spacing: 0.35em; font: var(--agencify-estudio-weight-emphasis) var(--agencify-estudio-type-body)/1.4 var(--font-mono); font-variant-numeric: tabular-nums; }
.ag-studio-complete .ag-signup-capture-form input[data-ag-signup-code]::placeholder { color: var(--muted); opacity: 0.6; }
.ag-studio-complete .ag-signup-capture-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }
.ag-studio-complete .ag-signup-capture-actions button { min-height: var(--agencify-estudio-target-min); padding-inline: var(--space-2); border: 0; background: transparent; color: var(--ink); text-decoration: underline; }
.ag-studio-complete .ag-signup-capture-actions button:disabled { opacity: 0.5; }
.ag-studio-complete .ag-signup-capture-password { margin: 0; padding-block-start: var(--space-2); border-block-start: var(--agencify-estudio-border-width) solid var(--line); text-align: center; }
.ag-studio-complete .ag-signup-capture-password a { display: inline-flex; align-items: center; min-height: var(--agencify-estudio-target-min); color: var(--ink); text-decoration: underline; }
.ag-studio-complete .ag-signup-capture-password a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ag-studio-complete .ag-whatsapp-float {
  position: fixed;
  border: 0;
  right: var(--ag-whatsapp-float-right, var(--space-6));
  bottom: var(--ag-whatsapp-float-bottom, var(--space-6));
  z-index: 80;
  width: var(--agencify-estudio-control-height);
  height: var(--agencify-estudio-control-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--agencify-estudio-control-height);
  background: var(--studio-whatsapp);
  color: var(--white);
  text-decoration: none;
  box-shadow: 0 18px 38px rgba(29,168,81,0.28);
  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.ag-studio-complete .ag-whatsapp-float:hover {
  background: #178B43;
  transform: translateY(-2px);
  box-shadow: 0 22px 44px rgba(29,168,81,0.34);
}
.ag-studio-complete .ag-whatsapp-float:focus-visible {
  outline: 3px solid rgba(255,122,41,0.55);
  outline-offset: 3px;
}
.ag-studio-complete .ag-whatsapp-float svg {
  width: 30px;
  height: 30px;
  display: block;
}
@media (max-width: 640px) {
  .ag-studio-complete .ag-whatsapp-float {
    right: var(--ag-whatsapp-float-right, var(--space-4));
    bottom: var(--ag-whatsapp-float-bottom, var(--space-4));
    width: calc(var(--agencify-estudio-control-height) - var(--space-1));
    height: calc(var(--agencify-estudio-control-height) - var(--space-1));
  }
  .ag-studio-complete .ag-whatsapp-float svg {
    width: 28px;
    height: 28px;
  }
}
.ag-studio-complete .studio-report-explore { margin-block: var(--space-8); }
.ag-studio-complete .studio-report-explore summary { min-height: var(--agencify-estudio-target-min); cursor: pointer; font-weight: var(--agencify-estudio-weight-emphasis); }
.ag-studio-complete .studio-report-explore iframe { width: 100%; min-height: var(--studio-demo-min-height); border: 0; display: block; }
.ag-studio-complete .price-value { font-size: clamp(1.6rem, 2.5vw, 2.5rem); overflow-wrap: anywhere; }
.ag-studio-complete [data-ag-pricing-toggle-option] { border-radius: var(--radius) !important; font-family: var(--font-body) !important; color: var(--ink) !important; min-height: var(--agencify-estudio-target-min); }
.ag-studio-complete [data-ag-pricing-toggle-option][aria-pressed="true"] { background: var(--ink) !important; color: var(--white) !important; }
.ag-studio-complete .ag-public-language-picker { z-index: 30; }
.ag-studio-complete .ag-public-language-trigger { color: var(--ink); }
.ag-studio-complete .ag-public-language-menu { background: var(--white); color: var(--ink); }
.ag-studio-complete .hero h1 em { display: block; font-style: normal; color: var(--orange); }
.ag-studio-complete :focus-visible { outline: var(--agencify-estudio-focus-width) solid var(--agencify-estudio-color-focus); outline-offset: var(--agencify-estudio-focus-offset); }
.ag-studio-complete :is(.day-section,.blocks-section,.site-footer) :focus-visible { outline-color: var(--orange); }
.ag-studio-complete:lang(ar) { line-height: var(--agencify-estudio-leading-body); }
.ag-studio-complete :is(h1,h2,h3):lang(ar) { line-height: var(--agencify-estudio-leading-title); letter-spacing: normal; }
.ag-studio-complete h1:lang(ar) { font-size: var(--agencify-estudio-type-hero); }
.ag-studio-complete h2:lang(ar) { font-size: var(--agencify-estudio-type-title); }
@media (max-width: 600px) { .ag-studio-complete .ag-signup-capture { padding: var(--space-6); } .ag-studio-complete .ag-signup-capture-card { padding: var(--space-6); } }
@media (prefers-reduced-motion: reduce) { .ag-studio-complete *, .ag-studio-complete *::before, .ag-studio-complete *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation: none !important; } }

/* Responsive editorial columns collapse in reading order. */
@media (max-width: 1199px) {
 .report-composition { grid-template-columns: minmax(0,2.5fr) minmax(17rem,1fr); gap: var(--space-4); }
 .ai-content { gap: var(--space-8); }
 .recommendation-paper { padding: var(--space-4); }
}
@media (max-width: 999px) {
 .report-composition { grid-template-columns: 1fr; }
 .ai-content { grid-template-columns: 1fr; }
 .recommendation-composition { max-width: 40rem; width: 100%; justify-self: center; }
 .ai-top .section-heading { column-gap: var(--space-8); }
}
@media (max-width: 640px) {
 .hero { padding-bottom: var(--space-8); }
 .day-section,.section-pad { padding-block: var(--space-12); }
 .studio-feature-intro h2 { grid-row: auto; }
 .report-spread { padding: var(--space-2); }
 .studio-live-demo [data-ag-product-demo-frame="reports"] { min-height: 0; }
 .ai-top .section-heading { display: block; }
 .ai-top .section-heading > p:not(.eyebrow) { margin-top: var(--space-5); }
 .ai-steps li { gap: var(--space-3); }
 .recommendation-paper { padding: var(--space-3); transform: none; }
 .recommendation-card { padding: var(--space-4); }
 .recommendation-assessment { grid-template-columns: 1fr; }
 .recommendation-actions { flex-wrap: wrap; }
 .billing-switch button { padding: var(--space-3); gap: var(--space-2); flex-wrap: wrap; justify-content: center; }
 .annual-saving { font-size: var(--agencify-estudio-type-small); }
}

/* Keep the same reading order on tablet and phone, without shrinking the type. */
@media (max-width: 1199px) {
 .hero-resource-sheet,.hero-campaign-output { padding: var(--space-4); }
 .hero-resource-grid { gap: var(--space-2); }
 .hero-resource-bucket { padding: var(--space-2); }
 .hero-campaign-output { margin-inline-start: var(--space-4); }
 .audience-grid { gap: var(--space-4); }
 .audience-item { padding: var(--space-5); }
 .custom-plan { grid-template-columns: auto 1fr 1fr; }
 .custom-plan .button { grid-column: 2 / -1; justify-self: start; }
}
@media (max-width: 999px) {
 .studio-campaign-collage { width: min(100%,40rem); margin-inline: auto; }
 .day-layout { grid-template-columns: 1fr; gap: var(--space-8); }
 .day-intro { position: static; }
 .day-intro h2 { max-width: 38rem; }
 .report-delivery { width: min(100%,23rem); justify-self: end; }
 .report-features { grid-template-columns: 1fr; gap: var(--space-3); }
 .report-features li { border-bottom-width: 1px; border-inline-start: 3px solid var(--blue); }
 .report-features li:nth-child(2) { border-inline-start-color: var(--orange); }
 .report-features li:nth-child(3) { border-inline-start-color: var(--ink); }
 .audience-grid { grid-template-columns: 1fr; }
 .audience-item { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-4) var(--space-8); padding: var(--space-6); }
 .audience-icon { margin: 0; }
 .audience-item h3 { min-height: 0; grid-column: 1; }
 .audience-item > p { grid-column: 1; margin: 0; }
 .audience-item ul { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
 .audience-item .button { width: fit-content; margin-top: var(--space-2); grid-column: 1; }
}
@media (max-width: 640px) {
 .studio-campaign-collage { padding-inline: 0; }
 .hero-resource-sheet { transform: none; padding: var(--space-3); }
 .hero-destination { display: block; }
 .hero-destination h3 { margin-bottom: var(--space-2); }
 .hero-campaign-output { margin-inline-start: var(--space-3); padding: var(--space-4); transform: none; }
 .hero-combinations { column-gap: var(--space-2); row-gap: var(--space-4); }
 .hero-output-heading h2 { font-size: var(--space-5); }
 .whatsapp-preview { transform: none; }
 .report-delivery { width: 100%; margin-top: var(--space-3); }
 .report-features li { padding: var(--space-4); }
 .ai-steps h3 { font-size: var(--space-5); }
 .audience-item { display: flex; padding: var(--space-5); gap: 0; }
 .audience-item h3 { margin-top: var(--space-5); }
 .audience-item > p { margin-top: var(--space-3); }
 .audience-item ul { margin-block: var(--space-5); }
 .audience-item .button { width: 100%; }
 .custom-plan { grid-template-columns: auto 1fr; gap: var(--space-5); padding: var(--space-5); }
 .custom-plan-icon { width: var(--space-12); height: var(--space-12); }
 .custom-price { grid-column: 1 / -1; border-inline-start: 0; border-top: 1px solid var(--line); padding: var(--space-5) 0 0; }
 .custom-plan .button { grid-column: 1 / -1; width: 100%; }
}

/* Refinement: typography and section-level actions stay subordinate to the product evidence. */
.studio-label,.hero .hero-audience-line { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--ink); border-inline-start: 3px solid var(--action); color: var(--ink); background: var(--white); box-shadow: 2px 2px 0 var(--ink); font: 600 var(--agencify-estudio-type-label)/1.5 var(--font-mono); letter-spacing: .015em; text-transform: uppercase; }
.studio-label::before,.hero .hero-audience-line::before { content: ""; flex-shrink: 0; width: var(--space-2); height: var(--space-2); border-radius: 50%; background: var(--ink); }
/* Preserve the approved phrase grouping and brush geometry, including wrapped lines. */
.studio-underline,[data-value-emphasis="marker"] .value-title-focus { --studio-mark-image: url('/landing/estudio-completo/editorial-mark.svg'); display: inline-block; max-width: 100%; padding-inline: .035em; text-decoration: none; }
/* Center against the line box so the stroke keeps the original .005em baseline offset. */
.studio-mark-text { padding-block: .2em; background: var(--studio-mark-image) left calc(50% + .5lh - .155em) / 100% .32em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
[data-studio-surface="dark"] .studio-underline { --studio-mark-image: url('/landing/estudio-completo/editorial-mark-blue.svg'); }
.value-emphasis .studio-underline { font-weight: 600; }
.value-copy [data-ag-starting-price] { color: var(--studio-turquoise); }
.section-cta { display: flex; justify-content: center; margin-block: var(--space-8); }
.button-secondary { background: var(--ink); color: var(--white); border-color: var(--ink); }
.button-secondary:hover { border-color: var(--ink); }
.ai-title-aside { display: block; font: 600 var(--studio-subtitle)/1.15 var(--font-display); color: var(--dark-muted); margin-top: var(--space-5); letter-spacing: normal; }
.ai-training-note { color: var(--white); font-size: var(--studio-lead); line-height: 1.7; }
.ai-step-icon { color: var(--blue); display: grid; place-items: center; height: var(--space-8); }
.ai-audit-note { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-6); color: var(--white); font-size: var(--agencify-estudio-type-body); line-height: 1.6; }
.ai-audit-note svg { flex-shrink: 0; color: var(--blue); margin-top: var(--space-1); }
.recommendation-composition figcaption { margin-top: var(--space-3); margin-inline-start: calc(var(--space-6) + var(--space-3)); font-style: italic; color: var(--dark-muted); }
.ai-bottom { justify-content: center; border: 0; padding: 0; }
.final-cta { background-color: var(--studio-turquoise); }
.final-cta .cta-description,.final-cta .final-footnote { color: var(--white); }
.final-cta .button { background: var(--studio-cta); color: var(--ink); }
.final-cta .button:hover { background: var(--studio-footer); color: var(--white); }
.final-cta :focus-visible { outline-color: var(--white); }

/* Secondary copy belongs to its action or example, at a readable contrast. */
.form-footnote,.final-footnote { font: 600 var(--agencify-estudio-type-small)/1.65 var(--font-mono); color: var(--ink); margin-top: var(--space-3); }
.final-cta .final-footnote { color: var(--white); }
.price-note,.billing-discount,.pricing-footnote { color: var(--graphite); }
.hero-description,.studio-feature-intro p:not(.eyebrow):not(.studio-label):not(.studio-support-note),.audience-item > p,.faq-answer { color: var(--graphite); }
.ai-top .section-heading { display: block; max-width: none; }
.hero-collage-tabs button { min-height: var(--agencify-estudio-target-min); border: 1px solid var(--line); background: var(--white); color: var(--ink); padding: var(--space-2) var(--space-4); font: 500 var(--agencify-estudio-type-small)/1.4 var(--font-body); }
.hero-collage-tabs [aria-selected="true"] { border-color: var(--ink); box-shadow: inset 0 -3px var(--blue); font-weight: 700; }
/* One mechanism: resource selections flow into four concrete combinations. */
.hero-collage-comparison { min-width: 0; }
.hero-collage-tabs { display: flex; justify-content: flex-end; gap: var(--space-1); margin-bottom: var(--space-5); }
.hero-collage-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); }
.hero-collage-tabs button svg { width: var(--space-4); height: var(--space-4); }
.hero-flow-collage { position: relative; min-width: 0; }
.hero-flow-board { position: relative; padding: var(--space-5) var(--space-3) var(--space-4); isolation: isolate; }
.hero-flow-board::before { content: ''; position: absolute; inset: var(--space-8) 0 var(--space-8); z-index: -1; background-color: var(--paper); background-image: var(--studio-grid); background-size: var(--space-6) var(--space-6); border: 1px solid var(--line); transform: rotate(-1deg); }
.hero-flow-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); align-items: start; }
.hero-flow-sheet { min-width: 0; background: var(--white); padding: var(--space-4); box-shadow: var(--shadow-sheet); border-top: 3px solid var(--blue); transform: rotate(-3deg); }
.hero-flow-ads { border-top-color: var(--action); transform: rotate(3deg); margin-top: var(--space-5); }
.hero-flow-sheet-title { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.hero-flow-sheet-title svg { width: var(--space-5); height: var(--space-5); flex-shrink: 0; }
.hero-flow-sheet-title h3 { font: 700 var(--agencify-estudio-type-body)/1.3 var(--font-body); letter-spacing: normal; }
.hero-flow-sheet-title > span { margin-inline-start: auto; font: 600 var(--agencify-estudio-type-small)/1 var(--font-mono); }
.hero-flow-resource { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) 0; border-top: 1px dashed var(--line); font-size: var(--agencify-estudio-type-small); line-height: 1.4; }
.hero-flow-resource > svg { width: var(--space-4); height: var(--space-4); color: var(--studio-turquoise); flex-shrink: 0; }
.hero-flow-connection { height: var(--space-24); position: relative; }
.hero-flow-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hero-flow-wire,.hero-flow-arrow { stroke: var(--studio-turquoise); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.hero-flow-wire-b { stroke: var(--orange); }
.hero-flow-destination { position: absolute; top: var(--space-6); inset-inline-start: 50%; transform: translateX(-50%); white-space: nowrap; display: flex; align-items: center; gap: var(--space-2); background: var(--ink); color: var(--white); border: 1px solid var(--paper); padding: var(--space-2) var(--space-3); font: 500 var(--agencify-estudio-type-small)/1.4 var(--font-body); }
.hero-flow-destination svg { width: var(--space-5); height: var(--space-5); }
.hero-flow-destination strong { color: var(--action); margin-inline-start: var(--space-2); }
:dir(rtl) .hero-flow-destination { transform: translateX(50%); }
.hero-flow-output { background: var(--white); padding: var(--space-5); border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--studio-wash); }
.hero-flow-output header { display: flex; justify-content: space-between; gap: var(--space-4); align-items: center; border-bottom: 1px solid var(--line); padding-bottom: var(--space-4); }
.hero-flow-output header img { width: var(--space-6); height: var(--space-6); flex-shrink: 0; }
.hero-flow-output h2 { font: 700 var(--space-6)/1.2 var(--font-body); margin-top: var(--space-2); letter-spacing: -.025em; }
.hero-flow-formula { font: 500 var(--agencify-estudio-type-small)/1.6 var(--font-mono); color: var(--graphite); }
.hero-flow-campaigns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-4); }
.hero-flow-campaign { display: flex; gap: var(--space-2); min-width: 0; }
.hero-flow-campaign-check { color: var(--studio-turquoise); flex-shrink: 0; padding-top: var(--space-1); }
.hero-flow-campaign-check svg { width: var(--space-4); height: var(--space-4); }
.hero-flow-campaign strong,.hero-flow-campaign div > span { display: block; font: 600 var(--agencify-estudio-type-small)/1.5 var(--font-body); }
.hero-flow-campaign div > span { margin-top: var(--space-1); font-weight: 400; color: var(--graphite); }
/* Real combinator story: reusable library, five copied blocks, four campaigns. */
.hero-experiment-collage { min-width: 0; }
.experiment-story { position: relative; isolation: isolate; padding: var(--space-2) var(--space-1) var(--space-3); font: 500 var(--agencify-estudio-type-small)/1.4 var(--font-body); }
.experiment-story svg { width: var(--space-4); height: var(--space-4); flex-shrink: 0; }
.experiment-library-index { display: none; }
.experiment-library { padding: var(--space-4); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sheet); transform: rotate(-1deg); }
.experiment-library-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); }
.experiment-library-header .studio-label { font-size: var(--agencify-estudio-type-small); padding: var(--space-1) var(--space-2); }
.experiment-library-header > img { width: var(--space-6); height: var(--space-6); object-fit: contain; }
.experiment-palette,.experiment-dropzones { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); }
.experiment-kind-audience { --resource-accent: var(--studio-turquoise); --resource-surface: var(--pale-blue); }
.experiment-kind-ad { --resource-accent: var(--orange); --resource-surface: var(--studio-orange-wash); }
.experiment-kind-zone { --resource-accent: var(--ink); --resource-surface: var(--paper); }
.experiment-resource-column,.experiment-dropzone { min-width: 0; }
.experiment-resource-title,.experiment-resource-column h3,.experiment-dropzone h3 { display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-2); font: 600 var(--agencify-estudio-type-small)/1.3 var(--font-body); letter-spacing: normal; }
.experiment-resource-title svg,.experiment-resource-column h3 svg { color: var(--resource-accent); }
.experiment-block { display: flex; align-items: center; gap: var(--space-1); min-height: var(--space-12); padding: var(--space-2); background: var(--white); color: var(--ink); border: 1px solid var(--line); border-inline-start: 3px solid var(--resource-accent); font-weight: 500; }
.experiment-block > svg { color: var(--resource-accent); width: var(--space-3); height: var(--space-3); }
.experiment-block > span { min-width: 0; }
.experiment-source + .experiment-source { margin-top: var(--space-2); }
.experiment-source.is-used { background: var(--resource-surface); }
.experiment-source.is-grabbed { border-color: var(--resource-accent); box-shadow: 0 0 0 2px var(--resource-surface); }
.experiment-workspace { position: relative; margin: var(--space-6) 0 var(--space-5); padding: var(--space-4); background: var(--white); border: 1px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.experiment-group-heading { display: flex; align-items: center; gap: var(--space-2); margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-4)) var(--space-4); padding: var(--space-3) var(--space-4); background: var(--ink); color: var(--white); }
.experiment-group-heading > svg { color: var(--blue); }
.experiment-group-heading h2 { font: 600 var(--studio-lead)/1.3 var(--font-body); letter-spacing: normal; }
.experiment-group-count { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-1); font: 500 var(--agencify-estudio-type-small)/1.4 var(--font-mono); }
.experiment-group-count svg { color: var(--blue); }
.experiment-dropzone { padding: var(--space-2); border: 1px dashed var(--line); background: var(--paper); }
.experiment-dropzone h3 { justify-content: space-between; gap: var(--space-2); }
.experiment-dropzone h3 span { color: var(--resource-accent); font-family: var(--font-mono); }
.experiment-dropzone.is-target { border-color: var(--resource-accent); border-style: solid; background: var(--resource-surface); }
.experiment-slot-list { display: grid; gap: var(--space-2); }
.experiment-slot { background: var(--white); outline: 1px dashed var(--line); outline-offset: -1px; }
.experiment-dropped { background: var(--resource-surface); }
.experiment-create-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); padding-top: var(--space-4); }
.experiment-formula { font: 500 var(--agencify-estudio-type-small)/1.4 var(--font-mono); white-space: nowrap; color: var(--muted); }
.experiment-formula b { font-weight: 500; color: var(--ink); }
.experiment-formula strong { font-weight: 700; color: var(--studio-turquoise); }
.experiment-create { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); background: var(--ink); color: var(--white); font-weight: 700; }
[data-story-stage="building"] .experiment-create { background: var(--paper); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
[data-story-stage="building"] .experiment-dropped:not(.is-filled) { opacity: 0; }
.experiment-results { position: relative; padding: var(--space-4); background: var(--pale-blue); border: 1px solid var(--line); }
/* Hero palette V2. Version 1 retains the approved original declarations above. */
[data-story-version="2"] .experiment-results { background: var(--paper); border-top-color: var(--action); }
[data-story-version="2"] .experiment-result-seal { background: var(--studio-status-active); }
.experiment-results-heading { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.experiment-results-heading :is(h2,h3) { font: 700 var(--studio-lead)/1.3 var(--font-body); letter-spacing: normal; }
.experiment-result-seal { display: grid; place-items: center; width: var(--space-6); height: var(--space-6); border-radius: 50%; background: var(--ink); color: var(--white); flex-shrink: 0; }
.experiment-completion-line { flex: 1; height: 1px; background: var(--line); }
.experiment-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.experiment-result { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); background: var(--white); border: 1px solid var(--line); }
.experiment-result > img { flex-shrink: 0; object-fit: contain; }
.experiment-result > div { min-width: 0; }
.experiment-result strong,.experiment-result div > span { display: block; font: 600 var(--agencify-estudio-type-small)/1.4 var(--font-body); }
.experiment-result div > span { font-weight: 400; color: var(--graphite); margin-top: var(--space-1); }
.experiment-result > svg { color: var(--studio-turquoise); margin-inline-start: auto; }
[data-story-stage="building"] .experiment-results,[data-story-stage="ready"] .experiment-results { opacity: 0; }
[data-story-stage="creating"] .experiment-result:not(.is-created) { opacity: 0; }
.experiment-flight { position: absolute; top: 0; left: 0; z-index: 5; opacity: 0; pointer-events: none; transform-origin: center; box-shadow: var(--shadow-sheet); }
.experiment-flight .experiment-block { min-height: 100%; box-shadow: 3px 4px 0 color-mix(in srgb, var(--ink) 15%, transparent); }
.experiment-story .experiment-cursor { position: absolute; top: 0; left: 0; width: var(--space-8); height: var(--space-10); z-index: 6; opacity: 0; pointer-events: none; overflow: visible; fill: var(--ink); stroke: var(--white); stroke-width: 1.5; filter: drop-shadow(1px 2px 1px color-mix(in srgb, var(--ink) 20%, transparent)); }
.experiment-cursor-click { fill: none; stroke: var(--orange); stroke-width: 2; opacity: 0; }
.experiment-story .experiment-drag-trail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; color: var(--blue); opacity: 0; pointer-events: none; overflow: visible; }
@media (max-width: 1199px) and (min-width: 1000px), (max-width: 479px) {
 .experiment-palette,.experiment-dropzones { grid-template-columns: 1fr 1fr; }
 .experiment-palette > .experiment-kind-zone,.experiment-dropzones > .experiment-kind-zone { grid-column: 1 / -1; }
 .experiment-kind-zone .experiment-slot-list { grid-template-columns: 1fr; }
 .experiment-library { transform: none; }
 .experiment-library,.experiment-workspace,.experiment-results { padding: var(--space-3); }
 .experiment-group-heading { margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-3); padding-inline: var(--space-3); }
 .experiment-dropzones,.experiment-palette { gap: var(--space-2); }
 .experiment-result-grid { grid-template-columns: 1fr; }
 .experiment-result { padding: var(--space-2); }
.experiment-result > div { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); }
.experiment-result div > span { margin-top: 0; }
.experiment-group-heading h2 { font-size: var(--agencify-estudio-type-body); }
.experiment-create { width: 100%; }
}
@media (max-width: 479px) {
 /* The created campaigns replace the group on a phone, keeping both phases in one stage. */
 .experiment-story { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-5); }
 .experiment-library { grid-area: 1 / 1; }
 .experiment-workspace,.experiment-results { grid-area: 2 / 1; margin: 0; }
 .experiment-results { align-self: stretch; display: flex; flex-direction: column; }
 .experiment-result-grid { flex: 1; }
 .experiment-palette > .experiment-kind-zone,.experiment-dropzones > .experiment-kind-zone { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: var(--space-2); align-items: center; }
 .experiment-kind-zone h3 { margin: 0; }
 .experiment-create { padding-block: var(--space-2); }
 [data-story-stage="building"] .experiment-results,[data-story-stage="ready"] .experiment-results { visibility: hidden; }
 [data-story-stage="creating"] .experiment-workspace,[data-story-stage="complete"] .experiment-workspace { visibility: hidden; }
}

/* Disclosure content is supplementary; the main copy and actions stay visible. */
.studio-disclosure { min-width: 0; }
.studio-disclosure > summary { display: none; }
.hero-visual-disclosure { align-self: center; }
@media (max-width: 999px) {
 .hero-experiment-collage { width: min(100%,40rem); margin-inline: auto; }
 .report-delivery { width: 100%; max-width: 40rem; justify-self: center; }
}
@media (max-width: 767px) {
 .ag-studio-complete main > section { padding-block: var(--space-12); border-top: 1px solid var(--line); }
 .ag-studio-complete main > .hero { padding-top: var(--space-6); padding-bottom: var(--space-8); border-top: 0; }
 .hero-copy { padding-block: var(--space-4); }
 .hero-grid { gap: var(--space-8); }
 .hero .hero-audience-line { font-size: var(--agencify-estudio-type-label); letter-spacing: 0; }
 .ag-studio-complete .ag-whatsapp-float { display: none; }
 .hero h1 { margin-top: var(--space-5); }
 .hero-description { font-size: var(--agencify-estudio-type-body); line-height: 1.7; margin-top: var(--space-5); }
 .signup-form { margin-top: var(--space-6); }
 .signup-form .button { width: 100%; }
 .form-footnote { text-align: center; }
 .ag-studio-complete #campaign-creation,.ag-studio-complete #who-its-for,.ag-studio-complete #value { background-color: var(--white); }
 .ag-studio-complete #reports,.ag-studio-complete #pricing,.ag-studio-complete #faq { background-color: var(--studio-wash); }
 .ag-studio-complete main > [data-studio-surface="dark"] { border-top-color: var(--dark-line); }
 .day-layout { gap: var(--space-8); }
 .day-intro h2 { max-width: 100%; }
 .task:first-of-type { border-top: 1px solid var(--dark-line); }
 .studio-feature-intro { margin-bottom: var(--space-6); }
 .studio-feature-intro > div { gap: var(--space-5); }
 .studio-builder-comparison { padding: var(--space-3); }
 .studio-builder-tabs { width: 100%; }
 .studio-builder-tabs button { flex: 1; padding-inline: var(--space-3); }
 .report-composition { gap: var(--space-6); }
 .report-spread { padding: 0; }
 .report-features { gap: var(--space-3); margin-top: var(--space-5); }
 .report-features li { font-size: var(--agencify-estudio-type-body); line-height: 1.6; }
 .ai-content { margin-top: var(--space-8); gap: var(--space-6); }
 .ai-title-aside { font-size: var(--space-6); line-height: 1.4; }
 .ai-steps li { padding-block: var(--space-5); }
 .ai-bottom { margin-top: var(--space-6); }
 .section-cta { margin-bottom: 0; }
 .plans-grid { margin-top: var(--space-6); gap: var(--space-3); border: 0; background: transparent; }
 .plan { padding: var(--space-5); border: 1px solid var(--line); background: var(--white); }
 .plan + .plan { border-inline-start: 1px solid var(--line); }
 .plan h3 { min-height: 0; }
 .plan p { min-height: 0; }
 .plan-price { margin-top: var(--space-4); }
 .plan-limits { margin-bottom: 0; }
 .price-note { min-height: 0; }
 .value-grid { gap: var(--space-6); }
 .value-argument { padding: var(--space-6) 0 0; border-inline-start: 0; border-top: 1px solid var(--line); }
 .faq-grid { gap: var(--space-8); }
 .faq-answer { padding-inline-end: 0; }
 .final-grid { gap: var(--space-6); }
 .final-copy h2 { margin-top: 0; }
 .final-action .button { width: 100%; }
 .final-footnote { text-align: center; }
 .hero-flow-inputs { gap: var(--space-3); }
 .hero-flow-sheet { padding: var(--space-3); transform: none; }
 .hero-flow-ads { margin-top: var(--space-3); }
 .hero-flow-sheet-title { gap: var(--space-1); }
 .hero-flow-sheet-title h3 { font-size: var(--agencify-estudio-type-small); }
 .hero-flow-output { padding: var(--space-4); }
 .hero-flow-output h2 { font-size: var(--space-5); }
 .hero-flow-campaigns { gap: var(--space-3); }
 .hero-collage-tabs button { flex: 1; padding-inline: var(--space-2); }
}

/* Preserve the approved dark comparison; use warm accents instead of blue panels. */
/* The same report is prepared, transferred, then delivered in the conversation. */
.delivery-report-paper { position: relative; width: 86%; margin-inline: auto; padding: var(--space-4); background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-sheet); transform: rotate(-2deg); }
.delivery-report-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.delivery-report-heading .studio-label { font-size: var(--agencify-estudio-type-small); padding: var(--space-1) var(--space-2); }
.delivery-report-heading > svg { color: var(--studio-turquoise); flex-shrink: 0; }
.delivery-report-paper svg,.delivery-transfer { width: var(--space-6); height: var(--space-6); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.delivery-report-content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-4); }
.delivery-report-lines { display: grid; align-content: center; gap: var(--space-2); }
.delivery-report-lines span { height: var(--space-1); background: var(--line); }
.delivery-report-lines span:nth-child(2) { width: 72%; }
.delivery-report-lines span:last-child { width: 88%; }
.delivery-report-chart { display: flex; align-items: end; gap: var(--space-2); height: var(--space-12); border-bottom: 1px solid var(--line); }
.delivery-report-chart span { flex: 1; height: 40%; background: var(--studio-turquoise); transform-origin: bottom; }
.delivery-report-chart span:nth-child(2) { height: 70%; }
.delivery-report-chart span:nth-child(3) { height: 50%; }
.delivery-report-chart span:nth-child(4) { height: 85%; }
.delivery-report-chart span:last-child { height: 65%; background: var(--action); }
.delivery-report-ready { position: absolute; inset-inline-end: calc(-1 * var(--space-3)); inset-block-end: calc(-1 * var(--space-3)); display: grid; place-items: center; width: var(--space-8); height: var(--space-8); border-radius: 50%; background: var(--studio-status-active); color: var(--white); border: 3px solid var(--white); }
.delivery-route { position: relative; display: grid; place-items: center; height: var(--space-12); }
.delivery-route > span { height: 100%; border-inline-start: 1px dashed var(--studio-status-active); }
.delivery-transfer { position: absolute; color: var(--studio-status-active); background: var(--paper); opacity: 0; width: var(--space-8); height: var(--space-8); }
.whatsapp-preview { transform: none; }
[data-delivery-stage="preparing"] .delivery-report-ready { visibility: hidden; }
[data-delivery-stage="preparing"] .whatsapp-contact,[data-delivery-stage="sending"] .whatsapp-contact { background: var(--ink); }
/* Read the metrics, assess confidence, then reveal the recommendation. */
.recommendation-reason { position: relative; }
.recommendation-scan { position: absolute; inset: calc(-1 * var(--space-2)); width: calc(100% + 2 * var(--space-2)); height: calc(100% + 2 * var(--space-2)); color: var(--studio-turquoise); fill: none; stroke: currentColor; stroke-width: 2; pointer-events: none; opacity: 0; }
.confidence-track span { transform-origin: left center; }
[dir="rtl"] .confidence-track span { transform-origin: right center; }
.annual-saving { transform-origin: center; }
.plan.recommended { background: var(--white); box-shadow: inset 0 4px var(--action); }
.plan.recommended .fine-label { color: var(--orange); font-weight: 700; }
.faq-section { background: var(--paper); }
.faq-item,.faq-item:first-child { border: 1px solid color-mix(in srgb, var(--ink) 24%, var(--white)); background: var(--white); margin-bottom: var(--space-3); }
.faq-item summary { color: var(--ink); padding: var(--space-5); line-height: 1.5; }
.faq-item[open] { border-color: var(--ink); box-shadow: 3px 3px 0 var(--line); }
.faq-item[open] summary { padding-bottom: var(--space-3); }
.faq-item summary::after { display: grid; place-items: center; min-width: var(--space-8); height: var(--space-8); color: var(--ink); background: var(--studio-orange-wash); }
.faq-answer { padding: 0 var(--space-5) var(--space-5); color: var(--graphite); line-height: 1.75; }
@media (max-width: 767px) {
 .plan.recommended { border-color: var(--orange); }
 .faq-item summary { padding: var(--space-4); font-size: var(--studio-lead); }
 .faq-answer { padding: 0 var(--space-4) var(--space-5); }
}
@media (max-width: 479px) {
 .delivery-report-paper { width: 90%; }
 .delivery-report-heading .studio-label { font-size: var(--agencify-estudio-type-small); }
}

/* One work surface lets each real before/after example take the lead. */
.task-tabs { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: var(--space-2); margin-bottom: var(--space-6); }
.task-tabs[hidden] { display: none; }
.task-tab { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-2); min-width: 0; min-height: var(--space-20); padding: var(--space-3) var(--space-2); border: 1px solid var(--dark-line); background: transparent; color: var(--white); cursor: pointer; }
.task-tab:hover { border-color: var(--action); }
.task-tab[aria-selected="true"] { color: var(--ink); background: var(--white); border-color: var(--white); box-shadow: inset 0 -4px var(--action); }
.task-icon { display: grid; place-items: center; width: var(--space-8); height: var(--space-8); color: var(--action); flex-shrink: 0; }
.task-title { font: 600 var(--agencify-estudio-type-body)/1.35 var(--font-body); overflow-wrap: anywhere; }
.task { min-width: 0; }
.task + .task { margin-top: var(--space-6); }
.task-heading { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.task-comparison { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); min-height: 20rem; border: 1px solid var(--dark-line); }
.task-before,.task-after { display: flex; flex-direction: column; justify-content: center; padding: var(--space-8); min-width: 0; }
.task-before { background: color-mix(in srgb, var(--white) 3%, var(--ink)); }
.task-label { font: 500 var(--agencify-estudio-type-small)/1.5 var(--font-mono); margin-bottom: var(--space-5); color: var(--dark-muted); }
.task-before .task-description { font: 400 var(--space-5)/1.55 var(--font-body); color: var(--dark-muted); }
.task-after { position: relative; background: var(--white); color: var(--ink); border-inline-start: var(--space-1) solid var(--action); }
.task-after::before { content: '→'; position: absolute; inset-inline-start: calc(-1 * var(--space-5)); top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: var(--space-10); height: var(--space-10); background: var(--action); color: var(--ink); font: 700 var(--space-6)/1 var(--font-body); }
[dir="rtl"] .task-after::before { content: '←'; }
.task-after .task-label { color: var(--studio-turquoise); }
.task-after .task-description { font: 500 var(--space-6)/1.4 var(--font-body); }
.task-after strong { color: inherit; font-weight: 800; }
[data-task-ready] .task-panels { display: grid; }
[data-task-ready] .task { grid-area: 1 / 1; margin: 0; }
[data-task-ready] .task-comparison { height: 100%; }
[data-task-ready] .task[aria-hidden="true"] { visibility: hidden; pointer-events: none; }
[data-task-ready] .task-heading { display: none; }
/* Connected nodes explain the order without replacing the four vertical steps. */
.ai-steps li { position: relative; grid-template-columns: var(--space-10) minmax(0,1fr); gap: var(--space-5); border: 0; padding-block: 0 var(--space-8); }
.ai-steps li:last-child { padding-bottom: 0; }
.ai-steps li:not(:last-child)::before { content: ''; position: absolute; inset-inline-start: calc(var(--space-5) - 1px); top: var(--space-10); bottom: 0; width: 2px; background: color-mix(in srgb, var(--action) 50%, var(--ink)); }
.ai-steps li:not(:last-child)::after { content: '↓'; position: absolute; inset-inline-start: 0; bottom: var(--space-2); width: var(--space-10); text-align: center; font: 500 var(--space-5)/1 var(--font-body); color: var(--action); background: var(--ink); }
.ai-step-icon { position: relative; width: var(--space-10); height: var(--space-10); border: 1px solid var(--action); border-radius: 50%; color: var(--action); background: var(--ink); }
.ai-method-note { display: flex; align-items: center; gap: var(--space-5); width: min(100%,58rem); margin: var(--space-10) auto 0; padding: var(--space-5) var(--space-6); background: var(--paper); color: var(--ink); border-inline-start: var(--space-1) solid var(--action); }
.ai-method-note > span { flex-shrink: 0; color: var(--orange); font: 600 var(--space-12)/1 var(--font-display); }
.ai-method-note .ai-training-note { color: var(--ink); font: italic 400 var(--agencify-estudio-type-body)/1.7 var(--font-body); }
@media (max-width: 767px) {
 .task-tabs { grid-template-columns: repeat(6,minmax(0,1fr)); gap: var(--space-2); margin-bottom: var(--space-5); }
 .task-tab { grid-column: span 2; min-height: var(--space-16); padding: var(--space-2); }
 .task-tab:nth-last-child(-n+2) { grid-column: span 3; }
 .task-comparison { grid-template-columns: 1fr; min-height: 0; }
 .task-before,.task-after { padding: var(--space-6); }
 .task-before .task-description { font-size: var(--agencify-estudio-type-body); }
 .task-after { border-inline-start: 0; border-top: var(--space-1) solid var(--action); }
 .task-after::before,[dir="rtl"] .task-after::before { content: '↓'; top: calc(-1 * var(--space-5)); inset-inline-start: auto; inset-inline-end: var(--space-5); transform: none; }
 .task-label { margin-bottom: var(--space-3); }
 .task-after .task-description { font-size: var(--studio-lead); }
 .ai-method-note { align-items: start; padding: var(--space-4); gap: var(--space-3); margin-top: var(--space-8); }
 .ai-method-note > span { font-size: var(--space-10); }
}

/* Comparison navigation stays beside the selected example. */
.task-list { position: relative; }
.task-next { position: absolute; inset-inline-end: calc(-1 * var(--space-2)); bottom: calc(-1 * var(--space-6)); display: flex; align-items: center; justify-content: center; gap: var(--space-4); padding: 0; padding-inline-start: var(--space-4); min-width: var(--space-12); min-height: var(--space-12); font: 600 var(--agencify-estudio-type-small)/1.4 var(--font-mono); border: 1px solid var(--white); background: var(--studio-turquoise); color: var(--white); box-shadow: var(--space-1) var(--space-1) 0 var(--studio-footer); cursor: pointer; transition: background-color var(--agencify-estudio-duration), transform var(--agencify-estudio-duration), box-shadow var(--agencify-estudio-duration); }
.task-next[hidden] { display: none; }
.task-next:hover { background: var(--ink); transform: translateY(-1px); box-shadow: var(--space-1) calc(var(--space-1) + 1px) 0 var(--studio-footer); }
.task-next:active { transform: translateY(var(--space-1)); box-shadow: none; }
.ag-studio-complete .task-next:focus-visible { outline: 3px solid var(--white); outline-offset: var(--space-1); }
.task-next-icon { display: grid; place-items: center; align-self: stretch; min-width: var(--space-12); min-height: var(--space-12); border-inline-start: 1px solid color-mix(in srgb, var(--white) 45%, transparent); background: color-mix(in srgb, var(--ink) 35%, transparent); }
.task-next svg { width: var(--space-6); height: var(--space-6); fill: none; stroke: currentColor; stroke-width: 2; }
[dir="rtl"] .task-next svg { transform: scaleX(-1); }
.task-before .task-description,.task-before .task-label { color: var(--white); }
.price-original { display: block; margin-bottom: var(--space-2); font: 500 var(--studio-lead)/1.4 var(--font-body); color: var(--graphite); }
.price-original[hidden] { display: none; }
.price-original s { text-decoration-thickness: 1px; }
@media (max-width: 767px) {
 /* A compact report slip still feeds the full, directly visible message. */
 .delivery-report-paper { display: grid; grid-template-columns: minmax(0,1fr) var(--space-20); gap: var(--space-3); width: 90%; padding: var(--space-3); transform: rotate(-1deg); }
 .delivery-report-heading > svg,.delivery-report-lines { display: none; }
 .delivery-report-content { display: block; margin: 0; }
 .delivery-report-chart { height: var(--space-8); gap: var(--space-1); }
 .delivery-route { height: var(--space-6); }
 .whatsapp-header { padding: var(--space-3); }
 .whatsapp-conversation { padding: var(--space-3); }
 .whatsapp-message { padding: var(--space-3); }
 .whatsapp-message p { font-size: var(--agencify-estudio-type-small); line-height: 1.5; }
 .report-features { gap: var(--space-2); }
 .report-features li { padding: var(--space-3); font-size: var(--agencify-estudio-type-small); }
 /* Assessments remain side by side instead of turning into a second tall card. */
 .recommendation-composition { padding: 0; }
 .recommendation-paper { padding: var(--space-3); }
 .recommendation-card { padding: var(--space-3); }
 .recommendation-context { gap: var(--space-2); margin-bottom: var(--space-3); }
 .recommendation-context h3 { font-size: var(--agencify-estudio-type-body); }
 .recommendation-reason { margin-top: var(--space-3); font-size: var(--agencify-estudio-type-small); line-height: 1.6; }
 .recommendation-assessment { grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: var(--space-3); margin-top: var(--space-3); padding-top: var(--space-3); }
 .recommendation-score { gap: var(--space-2); }
 .recommendation-score strong { font-size: var(--space-8); }
 .recommendation-actions { margin-top: var(--space-3); gap: var(--space-2); }
 .recommendation-actions span { padding: var(--space-2) var(--space-3); }
 .ai-audit-note { margin-top: var(--space-4); font-size: var(--agencify-estudio-type-small); }
 .recommendation-composition figcaption { margin-top: var(--space-3); }
}

/* Phone storyboard: a full-width resource tray feeds the experiment below it. */
@media (max-width: 767px) {
 .report-delivery .delivery-story { display: none; }
 .experiment-story { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-5); padding: 0; }
 .experiment-library { grid-area: 1 / 1; padding: var(--space-3); transform: none; box-shadow: 0 var(--space-1) 0 var(--line); }
 .experiment-library-header { margin-bottom: var(--space-3); gap: var(--space-2); }
 .experiment-library-header .studio-label { font-size: var(--agencify-estudio-type-small); padding: var(--space-1) var(--space-2); }
 .experiment-library-header > img { width: var(--space-5); height: var(--space-5); }
 .experiment-library-index { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--space-2); margin-bottom: var(--space-3); }
 .experiment-library-index > span { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--space-1); align-items: baseline; border-bottom: 2px solid var(--line); padding-bottom: var(--space-1); color: var(--muted); font-size: var(--agencify-estudio-type-small); }
 .experiment-library-index b { font: 600 var(--agencify-estudio-type-small)/1 var(--font-mono); }
 [data-story-library="audience"] [data-library-index="audience"], [data-story-library="ad"] [data-library-index="ad"], [data-story-library="zone"] [data-library-index="zone"] { color: var(--ink); border-color: var(--resource-accent); }
 .experiment-palette { display: grid; grid-template-columns: minmax(0,1fr); }
 .experiment-palette > .experiment-resource-column { display: grid; grid-area: 1 / 1; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-2); align-items: stretch; visibility: hidden; }
 .experiment-palette > .experiment-kind-zone { grid-column: 1; }
 .experiment-resource-column > h3 { display: none; }
 [data-story-library="audience"] .experiment-resource-column.experiment-kind-audience, [data-story-library="ad"] .experiment-resource-column.experiment-kind-ad, [data-story-library="zone"] .experiment-resource-column.experiment-kind-zone { visibility: visible; }
 .experiment-resource-column.experiment-kind-zone .experiment-source { grid-column: 1 / -1; }
 .experiment-source + .experiment-source { margin: 0; }
 .experiment-block { min-height: var(--space-12); padding: var(--space-2); overflow-wrap: anywhere; }
 .experiment-block > svg { display: none; }
 .experiment-workspace,.experiment-results { grid-area: 2 / 1; margin: 0; padding: var(--space-3); }
 .experiment-workspace { box-shadow: var(--space-1) var(--space-1) 0 var(--ink); }
 .experiment-group-heading { margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-3); padding: var(--space-3); }
 .experiment-group-heading h2 { font-size: var(--agencify-estudio-type-body); }
 .experiment-group-count { flex-shrink: 0; }
 .experiment-dropzones { grid-template-columns: minmax(0,1fr); gap: var(--space-2); }
 .experiment-dropzones > .experiment-kind-zone { display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr); gap: var(--space-2); align-items: center; grid-column: auto; }
 .experiment-dropzone { padding: var(--space-1); }
 .experiment-dropzone h3 { margin-bottom: var(--space-1); }
 .experiment-slot-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-2); }
 .experiment-kind-zone .experiment-slot-list { grid-template-columns: minmax(0,1fr); }
 .experiment-create-row { padding-top: var(--space-3); gap: var(--space-2); }
 .experiment-create { width: auto; padding: var(--space-2); font-size: var(--agencify-estudio-type-small); flex: 1; }
 .experiment-formula { font-size: var(--agencify-estudio-type-small); }
 .experiment-results { display: flex; flex-direction: column; }
 .experiment-result-grid { grid-template-columns: minmax(0,1fr); gap: var(--space-2); flex: 1; }
 .experiment-result { padding: var(--space-3); }
 .experiment-result > div { display: block; }
 .experiment-result div > span { margin-top: var(--space-1); }
 .experiment-results-heading :is(h2,h3) { font-size: var(--agencify-estudio-type-body); }
 [data-story-stage="building"] .experiment-results,[data-story-stage="ready"] .experiment-results { visibility: hidden; }
 [data-story-stage="creating"] .experiment-workspace,[data-story-stage="complete"] .experiment-workspace { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
 .task-next { transition: none; }
}

@media (min-width: 768px) and (max-width: 1199px) {
 .experiment-story { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-5); }
 .experiment-library { grid-area: 1 / 1; transform: none; }
 .experiment-workspace,.experiment-results { grid-area: 2 / 1; margin: 0; }
 .experiment-results { display: flex; flex-direction: column; }
 .experiment-result-grid { flex: 1; }
 [data-story-stage="building"] .experiment-results,[data-story-stage="ready"] .experiment-results { visibility: hidden; }
 [data-story-stage="creating"] .experiment-workspace,[data-story-stage="complete"] .experiment-workspace { visibility: hidden; }
}


/* Keep long translated navigation readable on landscape tablets. */
@media (min-width: 1024px) and (max-width: 1199px) {
 .ag-studio-complete .ag-public-site-header-links,.ag-studio-complete .ag-public-site-header-actions { display: none; }
 .ag-studio-complete .ag-public-header-mobile-pricing { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ag-public-header-control-height); margin-inline-start: auto; padding-inline: var(--space-3); font-size: var(--agencify-estudio-type-small); }
 .ag-studio-complete .ag-public-header-mobile-toggle { display: inline-flex; align-items: center; justify-content: center; width: var(--space-12); height: var(--space-12); padding: 0; color: var(--ink); cursor: pointer; }
 .ag-studio-complete .ag-public-header-mobile-panel:not([hidden]) { display: block; }
 .ag-studio-complete .ag-public-header-mobile-panel { max-height: calc(100dvh - var(--ag-public-header-height) - var(--ag-public-header-sticky-offset)); overflow-y: auto; overscroll-behavior: contain; padding: var(--space-5) var(--gutter); border-top: 1px solid var(--line); background: var(--white); }
 .ag-studio-complete .ag-public-header-mobile-inner { display: grid; gap: var(--space-3); }
 .ag-studio-complete .ag-public-header-mobile-link { display: flex; align-items: center; justify-content: flex-start; width: 100%; padding-inline: var(--space-3); text-align: start; background: transparent; color: var(--ink); cursor: pointer; }
 .ag-studio-complete .ag-public-header-mobile-resources-toggle,.ag-studio-complete .ag-public-language-picker-mobile .ag-public-language-trigger { justify-content: space-between; }
 .ag-studio-complete .ag-public-language-picker-mobile,.ag-studio-complete .ag-public-language-picker-mobile .ag-public-language-trigger { width: 100%; }
 .ag-studio-complete .ag-public-resource-grid-mobile { grid-template-columns: minmax(0,1fr); padding: 0; }
}

/* Short signup labels fit the mobile CTA without changing desktop copy. */
.studio-cta-mobile { display: none; }
@media (max-width: 767px) {
 .button { justify-content: center; gap: var(--space-2); min-height: var(--space-12); padding: var(--space-2) var(--space-4); font-size: calc(var(--agencify-estudio-type-body) * 1.125); }
 .button > span { font-size: inherit; font-weight: inherit; line-height: inherit; }
 .button > span[aria-hidden="true"] { font-size: var(--space-5); font-weight: 500; line-height: 1; }
 .studio-cta-desktop { display: none; }
 .studio-cta-mobile { display: inline; white-space: nowrap; }
}

/* Notebook screens (desktop width, short height): scale the page like a 90% zoom,
   lower the header and tighten the hero so the first screen shows the whole hero. */
@media (min-width: 1000px) and (max-height: 900px) {
 :root { font-size: 90%; }
 .ag-studio-complete .ag-public-site-header { --ag-public-header-height: var(--space-20); --ag-public-header-control-height: var(--space-10); }
 .hero { padding-block: var(--space-6) var(--space-8); }
 .hero-copy { padding-block: var(--space-4); }
 .hero-experiment-collage { zoom: .9; }
}
@media (min-width: 1000px) and (max-height: 820px) {
 .hero-experiment-collage { zoom: .8; }
}

/* Mobile bar shortcuts: pricing and the MCP page share the space beside the menu. */
.ag-studio-complete .ag-public-header-mobile-pricing + .ag-public-header-mobile-mcp { margin-inline-start: 0; }
.ag-studio-complete .ag-public-header-mobile-toggle { flex-shrink: 0; }
@media (max-width: 419px) {
 .ag-studio-complete .ag-public-site-header-bar { gap: var(--space-1); }
 .ag-studio-complete .ag-public-site-header-logo-image { width: 8.5rem; }
 .ag-studio-complete .ag-public-header-mobile-pricing { padding-inline: var(--space-2); }
}
@media (max-width: 359px) {
 .ag-studio-complete .ag-public-site-header-logo-image { width: 7rem; }
 .ag-studio-complete .ag-public-header-mobile-pricing { padding-inline: var(--space-1); }
}

/* Developer-only copy comparison toggle. The color mirrors the reserved
   --developer token in src/app/globals.css so it never reads as product UI. */
.ag-landing-copy-toggle { --developer: #008C8C; --developer-foreground: #FFFFFF; position: fixed; inset-inline-start: var(--space-4); inset-block-end: var(--space-4); z-index: 2147483000; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); max-width: calc(100vw - 2 * var(--space-4)); padding: var(--space-2) var(--space-3); background: var(--white); border: 2px solid var(--developer); border-radius: var(--space-2); font: 500 var(--agencify-estudio-type-small)/1.4 var(--font-mono); color: var(--developer); }
.ag-landing-copy-toggle a { padding: var(--space-1) var(--space-3); border: 1px solid var(--developer); border-radius: var(--space-1); color: var(--developer); text-decoration: none; }
.ag-landing-copy-toggle a[aria-current="page"] { background: var(--developer); color: var(--developer-foreground); }
.ag-landing-copy-toggle a:focus-visible { outline: 2px solid var(--developer); outline-offset: 2px; }

/* MCP page (/[locale]/mcp): the official landing shell with its own main. */
.mcp-page .mcp-hero .hero-grid { align-items: center; }
.mcp-page .mcp-accent { display: block; color: var(--orange); }
.mcp-page .mcp-clients { margin-top: var(--space-8); }
.mcp-page .mcp-clients ul { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.mcp-page .mcp-clients li { padding: var(--space-1) var(--space-3); border: 1px solid var(--ink); background: var(--white); font: 500 var(--agencify-estudio-type-small)/1.6 var(--font-mono); }
.mcp-page .mcp-clients-more { margin-top: var(--space-2); font-size: var(--agencify-estudio-type-small); color: var(--muted); }
.mcp-page .mcp-chat { min-width: 0; background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--blue); box-shadow: var(--shadow-sheet); }
.mcp-page .mcp-chat-bar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--line); font: 500 var(--agencify-estudio-type-small)/1.6 var(--font-mono); }
.mcp-page .mcp-chat-dots { display: inline-flex; gap: var(--space-1); }
.mcp-page .mcp-chat-dots i { width: var(--space-2); height: var(--space-2); border-radius: 50%; background: var(--line); }
.mcp-page .mcp-chat-body { display: grid; gap: var(--space-4); padding: var(--space-5); }
.mcp-page .mcp-msg { font-size: var(--agencify-estudio-type-body); line-height: 1.6; }
.mcp-page .mcp-msg .fine-label { display: block; margin-bottom: var(--space-1); }
.mcp-page .mcp-msg-user { justify-self: end; max-width: 90%; padding: var(--space-4); background: var(--ink); color: var(--white); }
.mcp-page .mcp-msg-user .fine-label { color: var(--dark-muted); }
.mcp-page .mcp-msg-ai { padding: var(--space-4); background: var(--paper); border: 1px solid var(--line); border-inline-start: 3px solid var(--orange); }
.mcp-page .mcp-msg-ai .fine-label { color: var(--muted); }
.mcp-page .mcp-chat-actions { margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.mcp-page .mcp-chat-actions li { display: flex; gap: var(--space-2); padding-block: var(--space-2); border-top: 1px dashed var(--line); font-size: var(--agencify-estudio-type-small); }
.mcp-page .mcp-chat-actions li::before { content: '○'; color: var(--muted); }
.mcp-page [data-state="done"] .mcp-chat-actions li::before { content: '✓'; color: var(--studio-status-active); font-weight: 700; }
.mcp-page .mcp-chat-pending { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
/* Orange stays reserved for signup CTAs: the illustrative approval is neutral. */
.mcp-page .mcp-chat-approve { min-height: var(--agencify-estudio-target-min); padding: var(--space-2) var(--space-5); border: 1px solid var(--ink); background: var(--white); color: var(--ink); font-weight: 600; }
.mcp-page .mcp-chat-approve:hover { background: var(--ink); color: var(--white); }
.mcp-page .mcp-chat-done { margin-top: var(--space-4); }
.mcp-page .mcp-chat-done p { font-weight: 600; }
.mcp-page .mcp-chat-done .text-link { margin-top: var(--space-2); background: none; border-inline: 0; border-top: 0; padding: 0; }
.mcp-page .mcp-chat-note { padding: 0 var(--space-5) var(--space-5); font-size: var(--agencify-estudio-type-small); }
.mcp-page .mcp-capabilities .audience-item h3 { min-height: 0; }
.mcp-page .mcp-ask { margin-top: auto; padding: var(--space-4); background: var(--studio-wash); border-inline-start: 3px solid var(--ink); font-size: var(--agencify-estudio-type-body); line-height: 1.6; }
.mcp-page .mcp-ask .fine-label { display: block; margin-bottom: var(--space-1); color: var(--muted); }
.mcp-page .mcp-compare-section { border-top: 1px solid var(--line); }
.mcp-page .mcp-compare { width: 100%; margin-top: var(--space-10); border-collapse: collapse; background: var(--white); border: 1px solid var(--ink); box-shadow: var(--shadow-sheet); font-size: var(--agencify-estudio-type-body); line-height: 1.6; }
.mcp-page .mcp-compare th,.mcp-page .mcp-compare td { padding: var(--space-5); text-align: start; vertical-align: top; border-top: 1px solid var(--line); }
.mcp-page .mcp-compare thead th { border-top: 0; background: var(--paper); font: 500 var(--agencify-estudio-type-small)/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: .045em; }
.mcp-page .mcp-compare tbody th { width: 16%; font-weight: 700; }
.mcp-page .mcp-compare-note { margin-top: var(--space-4); font-size: var(--agencify-estudio-type-small); }
.mcp-page .mcp-compare td { color: var(--muted); }
.mcp-page .mcp-compare .mcp-compare-agencify { border-inline-start: 3px solid var(--orange); background: var(--studio-orange-wash); color: var(--ink); font-weight: 600; }
.mcp-page .mcp-connect { border-top: 1px solid var(--line); }
.mcp-page .mcp-steps { display: grid; gap: var(--space-10); margin: var(--space-10) 0 0; padding: 0; list-style: none; }
.mcp-page .mcp-step { display: grid; grid-template-columns: var(--space-20) minmax(0, 1fr); gap: var(--space-6); min-width: 0; padding-top: var(--space-6); border-top: 3px solid var(--ink); }
.mcp-page .mcp-step-body { min-width: 0; max-width: 56rem; }
.mcp-page .mcp-step .signup-form { margin-top: var(--space-5); }
.mcp-page .mcp-step .mcp-ask { margin-top: var(--space-4); }
.mcp-page .mcp-step-number { font: 500 var(--space-8)/1 var(--font-mono); color: var(--orange); }
.mcp-page .mcp-step h3 { font-size: clamp(1.5rem, 2vw, 1.875rem); }
.mcp-page .mcp-step-body > p:not(.mcp-ask) { margin-top: var(--space-3); font-size: var(--agencify-estudio-type-body); line-height: 1.7; color: var(--muted); }
.mcp-page .mcp-address { margin-top: var(--space-5); }
.mcp-page .mcp-address-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.mcp-page .mcp-address code { flex: 1 1 16rem; min-width: 0; padding: var(--space-3); background: var(--white); border: 1px dashed var(--ink); font: 500 var(--agencify-estudio-type-small)/1.6 var(--font-mono); overflow-wrap: anywhere; }
.mcp-page .mcp-copy { min-height: var(--agencify-estudio-target-min); padding: var(--space-2) var(--space-5); border: 1px solid var(--ink); background: var(--ink); color: var(--white); font: 500 var(--agencify-estudio-type-small)/1.6 var(--font-mono); text-transform: uppercase; }
.mcp-page .mcp-copy:hover { background: var(--blue); border-color: var(--blue); color: var(--ink); }
.mcp-page .mcp-apps { margin: var(--space-5) 0 0; }
.mcp-page .mcp-apps div { padding-block: var(--space-3); border-top: 1px solid var(--line); }
.mcp-page .mcp-apps dt { font-weight: 700; }
.mcp-page .mcp-apps dd { margin: var(--space-1) 0 0; font-size: var(--agencify-estudio-type-small); line-height: 1.6; color: var(--muted); }
.mcp-page .mcp-configs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-6); margin-top: var(--space-6); }
.mcp-page .mcp-configs .fine-label { color: var(--muted); }
.mcp-page .mcp-configs pre { margin: var(--space-2) 0 0; padding: var(--space-5); background: var(--ink); color: var(--white); font: 500 var(--agencify-estudio-type-small)/1.7 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; }
.mcp-page .mcp-connect-note { margin-top: var(--space-8); }
/* The AI install prompt is the main action of the connection steps. */
.mcp-page .mcp-prompt { margin-top: var(--space-6); padding: var(--space-6); background: var(--ink); color: var(--on-dark); border-top: 4px solid var(--blue); box-shadow: var(--shadow-sheet); }
.mcp-page .mcp-prompt-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); }
.mcp-page .mcp-prompt-head > div { flex: 1 1 18rem; min-width: 0; }
.mcp-page .mcp-prompt .fine-label { color: var(--blue); }
.mcp-page .mcp-prompt-title { margin-top: var(--space-2); font: 800 clamp(1.5rem, 2.4vw, 2rem)/1.15 var(--font-display); color: var(--on-dark); }
.mcp-page .mcp-prompt-body { margin-top: var(--space-2); font-size: var(--agencify-estudio-type-body); line-height: 1.6; color: var(--dark-muted); }
.mcp-page .mcp-prompt-copy { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: calc(var(--agencify-estudio-target-min) + var(--space-3)); padding: var(--space-3) var(--space-6); border: 2px solid var(--blue); background: var(--blue); color: var(--ink); font: 700 var(--agencify-estudio-type-body)/1.3 var(--font-body); cursor: pointer; }
.mcp-page .mcp-prompt-copy svg { width: var(--space-5); height: var(--space-5); flex: none; }
.mcp-page .mcp-prompt-copy:hover { background: var(--white); border-color: var(--white); }
.mcp-page .mcp-prompt-copy[data-copied="true"] { background: var(--studio-status-active-surface); border-color: var(--studio-status-active-surface); color: var(--studio-status-active); }
.mcp-page .mcp-prompt-preview { margin-top: var(--space-5); border-top: 1px solid var(--dark-line); }
.mcp-page .mcp-prompt-preview summary { padding-top: var(--space-4); cursor: pointer; font: 500 var(--agencify-estudio-type-small)/1.6 var(--font-mono); color: var(--dark-muted); }
.mcp-page .mcp-prompt-preview pre { max-height: 24rem; margin: var(--space-3) 0 0; padding: var(--space-5); overflow: auto; background: color-mix(in srgb, var(--white) 6%, var(--ink)); color: var(--on-dark); font: 500 var(--agencify-estudio-type-small)/1.7 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; text-align: start; }
.mcp-page .mcp-manual { margin-top: var(--space-6); }
.mcp-page .mcp-manual > summary { display: inline-flex; min-height: var(--agencify-estudio-target-min); align-items: center; cursor: pointer; border-bottom: 1px solid currentColor; font-size: var(--agencify-estudio-type-small); font-weight: 700; }
.mcp-page .mcp-manual > summary:hover { color: var(--blue); }
.mcp-page .mcp-guide-link { margin-top: var(--space-6); }
@media (max-width: 999px) {
 .mcp-page .mcp-configs { grid-template-columns: 1fr; gap: var(--space-8); }
}
@media (max-width: 760px) {
 .mcp-page .mcp-compare,.mcp-page .mcp-compare tbody,.mcp-page .mcp-compare tr,.mcp-page .mcp-compare th,.mcp-page .mcp-compare td { display: block; width: 100%; }
 .mcp-page .mcp-compare thead { display: none; }
 .mcp-page .mcp-compare tr { border-top: 1px solid var(--ink); }
 .mcp-page .mcp-compare tr:first-child { border-top: 0; }
 .mcp-page .mcp-compare th,.mcp-page .mcp-compare td { border-top: 0; padding: var(--space-3) var(--space-4); }
 .mcp-page .mcp-compare tbody th { width: 100%; padding-top: var(--space-5); }
 .mcp-page .mcp-compare td::before { content: attr(data-label); display: block; margin-bottom: var(--space-1); font: 500 var(--agencify-estudio-type-small)/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: .045em; color: var(--muted); }
 .mcp-page .mcp-compare td.mcp-compare-agencify { border-inline-start-width: 3px; }
 .mcp-page .mcp-msg-user { max-width: 100%; }
 .mcp-page .mcp-step { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
 .mcp-page .mcp-prompt { padding: var(--space-5); }
 .mcp-page .mcp-prompt-copy { width: 100%; }
}

/* Keep the consent controls readable without changing consent behavior. */
.ag-studio-complete #CybotCookiebotDialogBodyEdgeMoreDetailsLink {
  color: var(--ink) !important;
}
.ag-studio-complete #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
  color: var(--ink) !important;
}