:root{--paper:#f7f5ee;--surface:#fffcf6;--ink:#282b25;--muted:#737569;--line:#dddcd0;--accent:#53624a;--accent-light:#e7ebde;--gold:#d5bd85;--reading-size:21px;color-scheme:light}html[data-theme=dark]{--paper:#1d211d;--surface:#262c25;--ink:#eae8dd;--muted:#a8af9e;--line:#424a3d;--accent:#b9c8a4;--accent-light:#394532;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,a,input,textarea{outline-offset:5px}a:focus-visible,button:focus-visible{outline:2px solid var(--accent)}button{cursor:pointer}h1,h2,h3,p{margin-top:0}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;line-height:1.15;letter-spacing:-.04em}h1{font-size:clamp(2.8rem,5.6vw,4.8rem);margin-bottom:20px}h2{font-size:1.8rem}h3{font-size:1rem}main{max-width:1160px;margin:auto;padding:32px 36px 90px;min-height:calc(100vh - 210px)}.site-header{height:112px;max-width:1320px;padding:0 48px;margin:auto;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:14px;align-items:center;font-family:Georgia,serif;font-size:1.35rem;line-height:1.2}.brand-symbol{font-size:2.8rem;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:var(--paper);width:49px;height:49px;border-radius:50%;font-family:Georgia,serif}.brand-caption{display:block;font:9px ui-sans-serif,sans-serif;letter-spacing:.25em;margin-top:7px;color:var(--muted)}nav{display:flex;align-items:center;gap:28px;font-size:13px}nav form{margin:0}.icon-button,.text-button,.reading-controls button{border:0;background:transparent;color:var(--ink);padding:8px}.icon-button{font-size:24px}.eyebrow{display:block;font-size:10px;letter-spacing:.22em;font-weight:600;color:var(--muted);margin-bottom:18px}.lede{font-size:16px;line-height:1.8;color:var(--muted);max-width:600px}.page-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;padding:45px 0 42px}.shelf-count{font-size:12px;color:var(--muted);white-space:nowrap;padding-bottom:25px}.book-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}.story-card{display:block}.cover-art{aspect-ratio:3/4;background:#46533f;color:#f2eddd;border-radius:3px 10px 10px 3px;padding:35px 29px;position:relative;overflow:hidden;display:flex;flex-direction:column;box-shadow:inset 7px 0 0 #0002,6px 8px 20px #20251b12;transition:transform .2s,box-shadow .2s}.cover-art::after{content:'';position:absolute;border:1px solid #d3c59760;inset:17px 15px 17px 22px;pointer-events:none}.cover-art::before{content:'';width:250px;height:250px;border:1px solid #d6c49060;border-radius:50%;position:absolute;right:-70px;bottom:40px;box-shadow:0 0 0 24px #d6c4900a,0 0 0 25px #d6c49030,0 0 0 52px #d6c49010}.variant-False{background:#643f36}.story-card:hover .cover-art{transform:translateY(-5px);box-shadow:inset 7px 0 0 #0002,9px 13px 25px #20251b20}.cover-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.cover-label{font-size:9px;letter-spacing:.25em;color:#e4d8b5;z-index:1}.cover-title{font-family:Georgia,serif;font-size:clamp(1.8rem,3vw,2.8rem);line-height:1.18;margin-top:38px;z-index:1;max-width:95%}.cover-mark{font:italic 38px Georgia,serif;position:absolute;bottom:28px;z-index:1}.cover-number{font:italic 80px Georgia,serif;margin-top:auto;z-index:1;color:#d5bd85}.compact{aspect-ratio:4/4.5}.card-meta{padding:25px 2px}.card-meta h2{font-size:1.65rem;margin-bottom:12px;display:flex;justify-content:space-between;gap:12px}.card-meta .eyebrow{margin-bottom:12px;font-size:9px}.card-meta p{font-size:13px;color:var(--muted)}.text-link{font-size:12px;color:var(--accent)}.site-footer{max-width:1224px;margin:auto;border-top:1px solid var(--line);padding:24px 36px 36px;display:flex;justify-content:space-between;color:var(--muted);font-size:11px}.breadcrumb{display:inline-block;color:var(--muted);font-size:12px;margin:18px 0}.novel-heading{padding:45px 0 60px;max-width:750px}.section-label{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:27px;margin-bottom:20px}.section-label h2{font-size:1.5rem}.section-label span{color:var(--muted);font-size:12px}.contents-list{border-top:1px solid var(--line)}.chapter-row{display:flex;gap:28px;align-items:center;border-bottom:1px solid var(--line);padding:28px 12px}.chapter-row:hover{background:var(--surface)}.chapter-row .eyebrow{font-size:9px;margin-bottom:8px}.chapter-row h2{font-size:1.6rem;margin-bottom:0}.chapter-row p{font-size:12px;color:var(--muted);margin:6px 0 0}.chapter-number{font:italic 30px Georgia,serif;color:var(--muted);min-width:38px}.row-arrow{margin-left:auto;font-size:22px;color:var(--muted)}.reading-bar{display:flex;justify-content:space-between;align-items:center}.reading-controls{display:flex;border:1px solid var(--line);border-radius:30px;padding:0 8px}.reading-controls button{font-family:Georgia,serif;padding:6px 12px}.reading-page{max-width:680px;margin:38px auto 0}.chapter-heading{text-align:center;margin-bottom:35px}.chapter-heading h1{font-size:clamp(2.7rem,5vw,3.6rem)}.chapter-heading .eyebrow{font-size:9px}.chapter-ornament{display:block;margin:36px 0;color:var(--gold);font-size:18px}.small{font-size:12px}.muted{color:var(--muted)}.dot{margin:0 8px}.prose{font-family:Georgia,'Times New Roman',serif;font-size:var(--reading-size);line-height:1.95;overflow-wrap:anywhere}.prose p{margin:0 0 1.3em}.prose hr{border:0;max-width:60px;border-top:1px solid var(--muted);margin:45px auto}.prose blockquote{border-left:2px solid var(--gold);padding-left:25px;margin-left:0}.prose a{text-decoration:underline}.prose pre{white-space:pre-wrap}.chapter-navigation{border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:28px;margin-top:70px;padding-top:25px}.chapter-navigation a{max-width:48%}.chapter-navigation small{display:block;font-size:8px;letter-spacing:.15em;color:var(--muted);margin-bottom:10px}.chapter-navigation span{font:20px Georgia,serif}.next-chapter{text-align:right}.button{display:inline-flex;justify-content:center;align-items:center;gap:16px;border:1px solid var(--accent);background:var(--accent);color:var(--paper);padding:12px 22px;border-radius:4px;font-size:13px;cursor:pointer}.button.secondary{color:var(--accent);background:transparent}.button:hover{filter:brightness(.94)}.toolbar{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:13px;margin-bottom:20px}.page-heading .toolbar{margin:0 0 10px}.panel{background:var(--surface);padding:30px;border:1px solid var(--line);border-radius:6px;margin-bottom:25px}.panel h2{font-size:1.6rem}.panel p{font-size:14px}.panel summary{cursor:pointer;font-size:14px;font-weight:600}.panel[open] summary{margin-bottom:25px}.form-panel{max-width:800px}form label{display:block;font-size:12px;font-weight:600;margin-bottom:8px}form input:not([type=checkbox],[type=hidden],[type=submit]),form textarea{display:block;width:100%;border:1px solid var(--line);border-radius:4px;padding:12px;background:var(--paper);color:var(--ink)}form input[type=checkbox]{margin-right:9px}form textarea{resize:vertical;line-height:1.7;font-size:14px}form .helptext{display:block;color:var(--muted);font-size:12px}form .errorlist{color:#aa493b;font-size:13px}.messages{max-width:1160px;margin:20px auto 0;padding:0 36px}.notice{background:var(--accent-light);padding:15px 20px;border-left:3px solid var(--accent);font-size:13px;border-radius:3px}.notice.warning{border-color:#b88037}.notice.error{border-color:#a84d43}.chunk-row{display:flex;align-items:center;gap:20px;padding:18px 0;border-bottom:1px solid var(--line);font-size:13px;flex-wrap:wrap}.chunk-row span{color:var(--muted)}.chunk-row a{margin-left:auto;color:var(--accent)}.diff{font:13px/1.8 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.preview{max-width:680px;margin:25px auto}.login-layout{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;margin:45px 0}.login-art{background:#e8e9db;min-height:510px;padding:36px;position:relative;border-radius:3px;color:#354430}.login-art .eyebrow{font-size:8px;position:relative;z-index:1;color:#6b755f}.paper-book{position:absolute;inset:100px 65px 60px;background:#46533f;border-radius:2px 12px 12px 2px;transform:rotate(-8deg);box-shadow:inset 8px 0 #0002,20px 25px 35px #303a2825;display:flex;flex-direction:column;justify-content:space-between;color:#efe7cf;padding:38px}.paper-book::before{content:'';border:1px solid #cfbc8d80;position:absolute;inset:18px 15px 18px 23px}.paper-book span{font:42px/1.2 Georgia,serif;z-index:1}.paper-book small{font-size:8px;letter-spacing:.2em}.login-copy h1{font-size:clamp(2.6rem,4.5vw,3.8rem)}.login-copy .lede{font-size:14px;max-width:380px;margin-bottom:35px}.google-button{margin-bottom:18px;min-width:260px}.google-letter{background:var(--paper);color:var(--accent);border-radius:50%;width:23px;height:23px;font-weight:700}.auth-panel{max-width:600px;margin:90px auto}.empty-state{grid-column:1/-1;text-align:center;padding:60px 20px}.empty-state .brand-symbol{margin-bottom:25px}.empty-state p{color:var(--muted);font-size:14px}.empty-state .button{margin-top:10px}@media(min-width:1400px){.book-grid{gap:48px}.cover-art{padding:40px}}@media(max-width:800px){.site-header{height:94px;padding:0 24px}.brand{font-size:1.15rem}.brand-symbol{width:40px;height:40px;font-size:2.3rem}nav{gap:14px;font-size:11px}main{padding:25px 24px 60px}.book-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}.cover-art{padding:27px 22px}.cover-title{font-size:2rem}.page-heading{padding-top:30px}.login-layout{gap:35px}.login-art{min-height:450px;padding:22px}.paper-book{inset:100px 30px 60px;padding:30px}.paper-book span{font-size:32px}.shelf-count{white-space:normal}.reading-page{margin-top:35px}.panel{padding:23px}}@media(max-width:540px){.brand-caption{font-size:7px;letter-spacing:.18em}.site-header{padding:0 18px}.site-header nav{gap:8px}.site-header nav a{font-size:10px}main{padding:22px 20px 50px}.book-grid{grid-template-columns:1fr;gap:28px}.story-card{max-width:360px;width:100%;margin:auto}.cover-art{aspect-ratio:3/3.6;padding:38px}.cover-title{font-size:2.8rem}.page-heading{display:block;padding:25px 0}.shelf-count{display:block;padding:0 0 18px}.chapter-row{gap:16px;padding:24px 4px}.chapter-row h2{font-size:1.35rem}.chapter-number{font-size:25px}.reading-page{margin-top:20px}.chapter-heading h1{font-size:2.7rem}.chapter-heading .eyebrow{line-height:1.8}.prose{font-size:calc(var(--reading-size) - 1px);line-height:1.85}.chapter-navigation span{font-size:17px}.site-footer{padding:22px 20px;font-size:9px;gap:20px}.login-layout{grid-template-columns:1fr;margin:20px 0;gap:40px}.login-art{min-height:320px}.paper-book{inset:65px 65px 25px;padding:28px;transform:rotate(-5deg)}.paper-book span{font-size:31px}.login-copy h1{font-size:2.8rem}.toolbar .button{padding:10px 15px}.panel{padding:20px}.auth-panel{margin:50px auto}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}


/* Inline Author Editing & Floating Action Dock */
.author-editable-title {
  outline: none;
  border-bottom: 2px dashed transparent;
  transition: border-color 0.2s, background-color 0.2s;
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: -6px;
  cursor: text;
}
.author-editable-title:hover {
  border-bottom-color: var(--line);
}
.author-editable-title:focus {
  border-bottom-color: var(--accent);
  background-color: var(--surface);
}

.author-editable-prose {
  outline: none;
  min-height: 400px;
  padding: 8px 12px;
  margin: 0 -12px;
  border-radius: 6px;
  cursor: text;
  transition: background-color 0.2s;
}
.author-editable-prose:focus {
  background-color: rgba(255, 255, 255, 0.015);
}
html[data-theme=dark] .author-editable-prose:focus {
  background-color: rgba(255, 255, 255, 0.025);
}

.author-floating-dock {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16), 0 1px 3px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(12px);
  font-size: 13px;
  max-width: 90vw;
  transition: all 0.25s ease;
}
.author-floating-dock .dock-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.author-floating-dock .dock-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 12px;
  background: var(--accent-light);
  color: var(--accent);
}
.author-floating-dock .dock-status-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}
.author-floating-dock .status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3bb273;
  transition: background-color 0.2s, box-shadow 0.2s;
}
.author-floating-dock .status-dot.dirty {
  background: #e59834;
  box-shadow: 0 0 6px rgba(229, 152, 52, 0.6);
}
.author-floating-dock .status-dot.saving {
  background: #3a86ff;
  animation: pulse-dot 1s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(1.3); }
}
.author-floating-dock .dock-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.author-floating-dock .dock-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.author-floating-dock .dock-btn-save {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
.author-floating-dock .dock-btn-save:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.author-floating-dock .dock-btn-publish {
  background: #2e6f40;
  color: #fff;
  border-color: #2e6f40;
}
html[data-theme=dark] .author-floating-dock .dock-btn-publish {
  background: #388e3c;
  border-color: #388e3c;
  color: #fff;
}
.author-floating-dock .dock-btn-publish:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}
.author-floating-dock .dock-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.dock-hint {
  font-size: 10px;
  opacity: 0.75;
  margin-left: 2px;
}

@media (max-width: 600px) {
  .author-floating-dock {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    padding: 6px 10px;
    gap: 8px;
    justify-content: space-between;
    box-sizing: border-box;
  }
  .author-floating-dock .dock-meta {
    gap: 6px;
    flex-shrink: 1;
    min-width: 0;
  }
  .author-floating-dock .dock-badge {
    font-size: 9px;
    padding: 2px 6px;
  }
  .author-floating-dock .dock-status-wrap {
    font-size: 11px;
  }
  .author-floating-dock .dock-status-wrap span:last-child {
    display: none;
  }
  .author-floating-dock .dock-actions {
    gap: 6px;
    flex-shrink: 0;
  }
  .author-floating-dock .dock-btn {
    padding: 8px 13px;
    font-size: 11px;
    min-height: 38px;
  }
  .author-floating-dock .dock-hint {
    display: none;
  }
}

/* ==========================================================================
   Marketing & Landing Page Styles
   ========================================================================== */

.marketing-page {
  padding-bottom: 60px;
}

.marketing-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items: center;
  padding: 60px 0 90px;
}

.marketing-hero-copy h1 {
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: 1.12;
  margin-bottom: 24px;
}

.marketing-hero-copy .lede {
  font-size: 17px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 580px;
  margin-bottom: 35px;
}

.marketing-cta-group {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.marketing-hero-badges {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
  flex-wrap: wrap;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 6px 14px;
  border-radius: 9999px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--muted);
}

.pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3bb273;
}

/* Hero Visual Showcase */
.marketing-hero-visual {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.visual-card-stack {
  position: relative;
  width: 100%;
  max-width: 440px;
}

.visual-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.visual-manuscript {
  position: relative;
  z-index: 2;
  border-left: 4px solid var(--accent);
}

.visual-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.visual-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--muted);
}

.visual-status-live {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  background: var(--accent-light);
  color: var(--accent);
}

.visual-title {
  font-size: 1.5rem;
  font-family: Georgia, serif;
  margin-bottom: 12px;
}

.visual-prose {
  font-family: Georgia, serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
  opacity: 0.85;
  margin-bottom: 24px;
}

.visual-manuscript-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.audio-indicator {
  color: var(--accent);
  font-weight: 600;
}

/* Floating Badges & Cards */
.visual-floating-card {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  z-index: 3;
}

.visual-agent-card {
  top: -24px;
  right: -24px;
  width: 290px;
  border-top: 2px solid #5a7d50;
}

.visual-telemetry-card {
  bottom: -32px;
  left: -20px;
  width: 280px;
  border-top: 2px solid var(--gold);
}

.floating-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.floating-icon {
  font-size: 14px;
}

.floating-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.agent-query code {
  font-size: 11px;
  font-family: ui-monospace, monospace;
  background: var(--paper);
  padding: 3px 6px;
  border-radius: 4px;
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
}

.agent-response {
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
}

.check-mark {
  color: #3bb273;
  font-weight: 700;
}

/* Waveform pulse animation */
.telemetry-waveform {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  margin-bottom: 10px;
}

.telemetry-waveform .bar {
  flex: 1;
  background: var(--accent);
  border-radius: 2px;
  animation: sound-wave 1.4s ease-in-out infinite alternate;
}

.bar-1 { height: 30%; animation-delay: 0.1s; }
.bar-2 { height: 75%; animation-delay: 0.3s; }
.bar-3 { height: 100%; animation-delay: 0.05s; }
.bar-4 { height: 55%; animation-delay: 0.4s; }
.bar-5 { height: 90%; animation-delay: 0.2s; }
.bar-6 { height: 40%; animation-delay: 0.35s; }
.bar-7 { height: 80%; animation-delay: 0.15s; }
.bar-8 { height: 25%; animation-delay: 0.5s; }

@keyframes sound-wave {
  0% { transform: scaleY(0.3); opacity: 0.5; }
  100% { transform: scaleY(1); opacity: 1; }
}

.telemetry-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: var(--muted);
}

.lufs-badge {
  color: var(--accent);
  font-weight: 600;
}

/* Sections */
.marketing-section {
  padding: 50px 0;
}

/* Pillars Grid */
.marketing-pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-top: 35px;
}

.pillar-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 36px 32px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.pillar-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.pillar-icon {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--accent-light);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

.pillar-card h3 {
  font-size: 1.55rem;
  font-family: Georgia, serif;
  margin-bottom: 12px;
}

.pillar-card p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 20px;
}

.pillar-features {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.pillar-features li {
  font-size: 13px;
  color: var(--ink);
  padding: 5px 0;
  position: relative;
  padding-left: 18px;
}

.pillar-features li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
}

/* Workflow Steps */
.workflow-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin-top: 35px;
}

.workflow-step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 30px 24px;
}

.workflow-step .step-num {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 32px;
  color: var(--gold);
  margin-bottom: 14px;
  line-height: 1;
}

.workflow-step h4 {
  font-family: Georgia, serif;
  font-size: 1.25rem;
  margin: 0 0 10px;
}

.workflow-step p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}

/* Transparent Pricing Deck */
.pricing-deck {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px;
  margin-top: 35px;
}

.pricing-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 42px 36px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.pricing-card.highlighted {
  border: 2px solid var(--accent);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
}

.pricing-featured-badge {
  position: absolute;
  top: -12px;
  left: 36px;
  background: var(--accent);
  color: var(--paper);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 4px 12px;
  border-radius: 12px;
}

.pricing-card-header h3 {
  font-size: 1.85rem;
  font-family: Georgia, serif;
  margin-bottom: 12px;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 14px;
}

.price-val {
  font-size: 3.2rem;
  font-family: Georgia, serif;
  line-height: 1;
  color: var(--ink);
}

.price-cycle {
  font-size: 14px;
  color: var(--muted);
}

.pricing-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 28px;
  min-height: 48px;
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 35px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
  flex-grow: 1;
}

.pricing-features li {
  display: flex;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.6;
  padding: 7px 0;
  color: var(--ink);
}

.pricing-features li span {
  color: var(--accent);
  font-weight: 700;
}

.pricing-action {
  margin-top: auto;
}

.full-width {
  width: 100%;
}

/* FAQ Grid */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 35px;
}

.faq-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 28px 24px;
}

.faq-card h4 {
  font-family: Georgia, serif;
  font-size: 1.25rem;
  margin: 0 0 10px;
}

.faq-card p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}

/* Final Banner */
.marketing-footer-banner {
  margin-top: 60px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 60px 40px;
  text-align: center;
}

.marketing-footer-banner h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  margin-bottom: 14px;
}

.marketing-footer-banner .lede {
  margin: auto;
}

/* Responsive Breakpoints */
@media (max-width: 960px) {
  .marketing-hero {
    grid-template-columns: 1fr;
    gap: 45px;
    padding: 30px 0 60px;
  }
  .marketing-hero-visual {
    min-height: 380px;
  }
  .visual-agent-card {
    right: 0;
  }
  .visual-telemetry-card {
    left: 0;
  }
  .workflow-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .marketing-pillars-grid,
  .pricing-deck,
  .faq-grid {
    grid-template-columns: 1fr;
  }
  .visual-agent-card,
  .visual-telemetry-card {
    position: static;
    width: 100%;
    margin-top: 14px;
  }
  .marketing-hero-visual {
    min-height: auto;
  }
}