/* LaserGrowthBots — v7 / unpublished cinematic studio.
   Upright Oxanium / Outfit / IBM Plex Mono. Approved portraits, no scroll overlays. */
:root {
  --ink:#0E0D0C; --ink-2:#181512; --ink-3:#28221C;
  --bone:#ECE7DE; --bone-2:#E2DCD0; --stone:#C9C1B3;
  --accent:#FF4F0A; --accent-glow:rgba(255,79,10,.22);
  --metal:#B8C5CE; --accent-ink:#AA3100;
  --juno:#1FDB6A; --knox:#FF8A1A; --sage:#2F9BFF;
  --muted-dark:#B0A69A; --muted-light:#5A534A;
  --line-dark:rgba(236,231,222,.17); --line-light:rgba(14,13,12,.19);
  --display:"Oxanium","Helvetica Neue",Arial,sans-serif;
  --body:"Outfit","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gutter:clamp(1.25rem,4vw,4rem); --max:1440px;
}
*,*::before,*::after {box-sizing:border-box}
html {scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:4rem}
body {margin:0; background:var(--ink); color:var(--bone); font:400 1.0625rem/1.6 var(--body); -webkit-font-smoothing:antialiased}
h1,h2,h3,h4 {margin:0; font-family:var(--display); font-style:normal; font-weight:600}
p,figure {margin:0}
a {color:inherit}
img {display:block; max-width:100%; height:auto}
button,input,select,textarea {font:inherit}
button,a,input,select,textarea,summary {-webkit-tap-highlight-color:transparent}
[hidden] {display:none!important}
::selection {color:var(--ink); background:var(--accent)}
:focus-visible {outline:3px solid var(--accent); outline-offset:4px}
.paper :focus-visible {outline-color:var(--accent-ink)}
.hot :focus-visible {outline-color:var(--ink)}
.sr-only {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.skip-link {position:absolute; left:1rem; top:-5rem; z-index:100; padding:.7rem 1rem; background:var(--bone); color:var(--ink)}
.skip-link:focus {top:3rem}
.wrap {width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter)}
.mono,.label,.kicker {font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.075em; text-transform:uppercase}
.draft-bar {position:relative; z-index:90; padding:.4rem 1rem; background:var(--accent); color:var(--ink); box-shadow:0 0 24px var(--accent-glow); font:500 .65rem/1.5 var(--mono); text-align:center; letter-spacing:.06em}
.site-header {position:absolute; inset-inline:0; z-index:20; padding-top:1.4rem}
.nav-wrap {display:flex; gap:1.5rem; align-items:center; justify-content:space-between; padding-block:1rem}
.wordmark {display:inline-flex; gap:.6rem; align-items:center; font:600 1.3rem/1.2 var(--display); letter-spacing:-.045em; text-decoration:none; white-space:nowrap}
.wordmark img {width:30px; height:30px; flex:none; filter:none}
.wordmark > span {text-shadow:none}
.site-header nav {display:flex; gap:1.6rem}
.site-header nav a,.nav-cta {font:500 .7rem/1.4 var(--mono); text-transform:uppercase; letter-spacing:.045em; text-decoration:none}
.site-header nav a:hover {color:var(--accent)}
.nav-cta {border:1px solid var(--line-dark); border-radius:999px; padding:.75rem 1rem; white-space:nowrap; background:#0e0d0c88}
.nav-cta:hover {color:var(--ink); background:var(--accent); border-color:var(--accent)}
.btn {display:inline-flex; justify-content:center; align-items:center; gap:.6rem; padding:.95rem 1.4rem; border:1px solid transparent; border-radius:999px; font:500 1rem/1.4 var(--body); text-decoration:none; cursor:pointer; transition:transform .2s,background .2s,box-shadow .2s}
.btn:hover {transform:translateY(-2px)}
.btn-hot {background:var(--accent); color:var(--ink); font-weight:600; box-shadow:0 0 0 1px #ff4f0a44,0 6px 30px #ff4f0a20}
.btn-hot:hover {background:#FF6A30; box-shadow:0 0 32px #ff4f0a44}
.btn-line {background:transparent; border-color:currentColor; color:inherit}
.btn-line:hover {background:var(--bone); color:var(--ink); border-color:var(--bone)}
.btn-ink {background:var(--ink); color:var(--bone)}
.btn-ink:hover {background:var(--ink-3)}
.btn-block {width:100%}
/* One cinematic studio, not a page-wide light effect. Images retain their original colors. */
.hero {position:relative; isolation:isolate; overflow:hidden; padding-top:8.8rem; background:radial-gradient(ellipse at 82% 40%,#30251b 0, #191510 28%,transparent 61%),var(--ink)}
.hero-inner {position:relative; min-height:660px; display:flex; align-items:center; padding-block:1rem 3rem}
.hero-copy {position:relative; z-index:2; width:58%; min-width:0}
.kicker {display:flex; gap:.65rem; align-items:center; margin-bottom:1.9rem; color:var(--stone); max-width:100%; font-size:.65rem; line-height:1.8}
.dot {display:inline-block; width:7px; height:7px; flex:none; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent-glow)}
.hero h1 {font-weight:700; font-size:clamp(3rem,5.4vw,5.65rem); line-height:1.04; letter-spacing:-.06em; color:#F3EEE4}
.hero-line {display:block}
.hero .hl {color:var(--accent); font-style:normal; text-shadow:0 0 32px #ff4f0a18}
.hero-foot {margin-top:2rem}
.hero-lead {max-width:31rem; font-size:1.1rem; color:#d2cabe; line-height:1.6}
.hero-lead strong {font-weight:600; color:var(--bone)}
.hero-actions {display:flex; flex-wrap:wrap; gap:.65rem; margin-top:1.5rem}
.hero-actions .btn {font-size:.94rem; padding:1rem 1.3rem}
.hero-actions .btn-line {border-color:#ece7de77; background:#0e0d0c55}
.hero-actions .btn-line:hover {background:var(--bone); border-color:var(--bone)}
.micro {margin-top:1.15rem; font:400 .6rem/1.8 var(--mono); letter-spacing:.025em; text-transform:uppercase; color:var(--muted-dark)}
.hero-studio {position:absolute; z-index:1; top:-6rem; bottom:-1.5rem; right:0; width:57%; isolation:isolate}
.studio-feature {position:absolute; inset:0}
.studio-feature img.portrait {width:100%; height:100%; object-fit:cover; object-position:56% 40%; border:0; box-shadow:none; mask-image:linear-gradient(90deg,transparent,#000 24%),linear-gradient(0deg,transparent,#000 23%,#000 88%,transparent); mask-composite:intersect}
.studio-feature figcaption {position:absolute; left:18%; bottom:2rem; display:grid; gap:.35rem; max-width:16.5rem; padding:1.05rem 1.15rem 1rem; isolation:isolate; background:rgba(12,11,10,.9); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border:1px solid rgba(236,231,222,.16); border-radius:10px; box-shadow:0 18px 40px #0007; text-shadow:none; z-index:2}
.studio-feature figcaption::before {display:none}
.studio-feature figcaption .mono {font-size:.58rem; line-height:1.7; color:#d4cbc0}
.studio-feature strong {font:600 2rem/1.1 var(--display); letter-spacing:-.04em; color:var(--bone)}
.studio-support {position:absolute; right:var(--gutter); bottom:1.5rem; width:43%; display:grid; grid-template-columns:1fr 1fr; gap:.75rem; z-index:2}
.studio-support figure {position:relative; overflow:hidden; display:flex; flex-direction:column; border:1px solid rgba(236,231,222,.2); border-radius:10px; background:#0c0b0a; box-shadow:0 18px 42px #0009}
.studio-support figure::after {display:none}
.studio-support img.portrait {width:100%; aspect-ratio:1; object-fit:cover; object-position:50% 16%; box-shadow:none; mask-image:none}
.studio-support figcaption {position:relative; inset:auto; display:grid; gap:.25rem; padding:.7rem .8rem .8rem; background:#161412; border-top:1px solid rgba(236,231,222,.1); text-shadow:none; z-index:1}
.studio-support strong {font:600 1.15rem/1.1 var(--display); color:var(--bone)}
.studio-support figcaption span {font:400 .55rem/1.5 var(--mono); letter-spacing:.03em; text-transform:uppercase; color:#cfc6b8}
.hero-strip {position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2rem; align-items:center; margin-top:3rem; padding-block:1.7rem 2rem; border-top:1px solid var(--line-dark)}
.hero-strip > p {color:var(--muted-dark); max-width:36rem; font-size:1rem}
.hero-strip a {color:var(--accent); text-decoration:none; display:inline-block}
.hero-strip a:hover {text-decoration:underline; text-underline-offset:4px}
.hero-strip strong {color:var(--bone); font-weight:500}
.facts {display:flex; flex-wrap:wrap; gap:2.5rem; list-style:none; margin:0; padding:0}
.facts li {display:grid; gap:.3rem}
.facts b {font:600 2rem/1 var(--display); letter-spacing:-.04em}
.facts span {color:var(--muted-dark); font:400 .6rem/1.4 var(--mono); text-transform:uppercase}
.ticker {overflow:hidden; background:var(--ink-2); color:var(--stone); border-block:1px solid var(--line-dark)}
.ticker-track {display:flex; align-items:center; gap:1.6rem; width:max-content; padding:.8rem 0; font:600 clamp(1rem,1.7vw,1.5rem)/1.3 var(--display); letter-spacing:-.03em; animation:tick 45s linear infinite}
.ticker-track i {font-style:normal; color:var(--accent)}
@keyframes tick {to {transform:translateX(-50%)}}
/* Warm editorial contrast between dark studio scenes. */
.section {position:relative; padding-block:clamp(4.5rem,9vw,8.5rem)}
.paper {background:var(--bone); color:var(--ink)}
.dark {background:var(--ink); color:var(--bone)}
.hot {background:var(--accent); color:var(--ink)}
.sec-head {max-width:62rem; margin-bottom:clamp(2.5rem,5vw,4.5rem)}
.sec-head-wide {max-width:76rem}
.label {display:flex; align-items:center; gap:.8rem; margin-bottom:1.6rem}
.dark .label span {color:var(--accent)}
.label span {display:inline-grid; place-items:center; min-width:2.2rem; padding:.1rem .45rem; border:1px solid currentColor; border-radius:999px; font-size:.65rem}
.dark .label {color:var(--muted-dark)}
.paper .label {color:var(--muted-light)}
.section h2 {font-size:clamp(2.4rem,5.2vw,5.2rem); line-height:1.07; letter-spacing:-.045em; text-wrap:balance}
.dim {color:var(--muted-dark)}
.sec-lead {margin-top:1.8rem; max-width:42rem; font-size:clamp(1.08rem,1.4vw,1.3rem); line-height:1.6}
.dark .sec-lead {color:#d3cabe}
.paper .sec-lead {color:#433c34}
.footnote {margin-top:1.7rem; max-width:56rem; font-size:.86rem; color:var(--muted-dark)}
.paper .footnote {color:var(--muted-light)}
.footnote a {text-underline-offset:3px}
.choice-grid {display:grid; grid-template-columns:1fr 1fr 1.25fr; border-top:2px solid var(--accent-ink)}
.choice {padding:2rem 1.7rem 2rem 0; border-right:1px solid var(--line-light); min-width:0}
.choice + .choice {padding-left:1.7rem}
.choice-tag {font:500 .68rem/1.5 var(--mono); text-transform:uppercase; letter-spacing:.04em; margin-bottom:2.5rem; overflow-wrap:anywhere; color:var(--muted-light)}
.choice h3 {font-size:clamp(1.6rem,2.6vw,2.4rem); line-height:1.12; letter-spacing:-.04em}
.choice-line {margin:.8rem 0 1.1rem; font-weight:500}
.choice p:not(.choice-tag) {color:#433c34}
.mini {display:grid; gap:.55rem; list-style:none; margin:1.8rem 0 0; padding:0; font-size:.94rem}
.mini li {display:flex; gap:.7rem; align-items:baseline}
.mini li::before {font-family:var(--mono); width:1rem; flex:none}
.mini .yes::before {content:"+"}
.mini .no::before {content:"−"}
.mini .no {color:var(--muted-light)}
.choice-us {background:var(--ink); color:var(--bone); padding:2rem!important; border-top:2px solid var(--accent); margin-top:-2px; border-right:0}
.choice-us .choice-tag,.choice-us .yes::before {color:var(--accent)}
.choice-us p:not(.choice-tag) {color:#d3cabe}
/* Agent portraits: full square studio stills on large cards; circular crop on small avatars. */
img.portrait {display:block; width:100%; aspect-ratio:1; object-fit:cover; object-position:center 22%; background:#141312}
.portrait-juno {box-shadow:0 0 0 1px color-mix(in srgb, var(--juno) 35%, transparent)}
.portrait-knox {box-shadow:0 0 0 1px color-mix(in srgb, var(--knox) 35%, transparent)}
.portrait-sage {box-shadow:0 0 0 1px color-mix(in srgb, var(--sage) 35%, transparent)}
.agent-roster {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.8rem}
.roster-card {min-width:0}
.roster-card:nth-child(2) {padding-top:3rem}
.roster-card:nth-child(3) {padding-top:6rem}
.agent-photo {position:relative; aspect-ratio:1; margin-bottom:2rem; border:1px solid var(--line-dark); background:#191510; overflow:hidden}
.agent-photo::after {content:""; position:absolute; inset:55% 0 0; background:linear-gradient(transparent,#0e0d0cdd); pointer-events:none}
.agent-photo img.portrait {width:100%; height:100%; border-radius:0; box-shadow:none; object-position:center 20%}
.photo-meta {position:absolute; z-index:1; bottom:.8rem; left:1rem; font-size:.61rem; color:var(--stone)}
.agent-num {color:var(--metal); margin-bottom:.8rem}
.agent h3 {font-size:clamp(3.2rem,5.7vw,5.6rem); letter-spacing:-.045em; line-height:1}
.roster-card:first-child h3 {color:var(--accent)}
.agent-tagline {margin:1rem 0 1.5rem; font-size:1.25rem; line-height:1.4; font-weight:500; min-height:2.8em}
.agent h4 {font-size:1.1rem}
.role-list {margin:1rem 0; padding-left:1.15rem; display:grid; gap:.7rem; color:#d1c7b9}
.role-list li::marker {color:var(--accent)}
.role-note {font-size:.9rem; color:var(--stone); padding-top:.6rem}
.handoff {border-top:1px solid var(--line-dark); padding-top:1.1rem; margin-top:1.5rem; font-size:.6rem; line-height:1.9; color:var(--stone)}
.human-band {display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(1.5rem,4vw,4rem); align-items:center; margin-top:5rem; padding:clamp(1.6rem,4vw,3.5rem); border:1px solid var(--line-dark); border-left-color:var(--accent); background:linear-gradient(120deg,#292018,#141210)}
.human-plus {font:600 clamp(5rem,12vw,10rem)/.9 var(--display); letter-spacing:-.07em; color:var(--accent); text-shadow:0 0 30px #ff4f0a18}
.human-band .label {margin-bottom:1rem}
.human-title {font:600 clamp(1.5rem,2.8vw,2.6rem)/1.2 var(--display); letter-spacing:-.035em; margin-bottom:1rem; max-width:35ch}
.human-band p:last-child {color:#d1c7b9; max-width:46rem}
/* Deeper agent training: quiet editorial layers, scoped to the roster. */
#agents .agent-training {margin-top:1.6rem; padding-top:1.25rem; border-top:1px solid var(--line-dark)}
#agents .agent-training h4 {margin-bottom:.7rem; color:var(--bone); font-size:1.05rem}
#agents .agent-training p {color:#d1c7b9; font-size:1rem; line-height:1.65}
#agents .agent-difference {margin-top:1.25rem; padding-left:1rem; border-left:2px solid var(--accent); color:var(--stone); font-size:.95rem; line-height:1.65}
#agents .agent-difference strong {display:block; margin-bottom:.3rem; color:var(--bone); font-weight:500}
#agents .agent-method {margin-top:3.5rem; padding:clamp(1.25rem,2.6vw,2.2rem); border:1px solid var(--line-dark); background:var(--ink-2)}
#agents .agent-method h3 {font-size:clamp(1.35rem,2.2vw,1.9rem); line-height:1.25; letter-spacing:-.025em; margin-bottom:1.5rem}
#agents .agent-method-grid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem 2rem}
#agents .agent-method-grid > div {min-width:0}
#agents .agent-method .mono {font-size:.62rem; line-height:1.7; color:var(--accent); margin-bottom:.65rem}
#agents .agent-method .mono + p {font-size:.95rem; color:var(--stone); line-height:1.65}
#agents .agent-method + .human-band {margin-top:1.5rem}
@media(max-width:820px) {
 #agents .agent-method-grid {grid-template-columns:1fr; gap:1.2rem}
 #agents .agent-method-grid > div + div {padding-top:1.2rem; border-top:1px solid var(--line-dark)}
}
/* Comparison becomes labeled cards on phones, never a sideways-scroll table. */
.table-wrap {border-top:2px solid var(--accent-ink)}
table {width:100%; border-collapse:collapse; table-layout:fixed}
th,td {text-align:left; vertical-align:top; padding:1.35rem 1.1rem; border-bottom:1px solid var(--line-light); overflow-wrap:break-word}
thead th {font:500 .69rem/1.6 var(--mono); letter-spacing:.025em; text-transform:uppercase; color:var(--muted-light)}
thead th:first-child {width:25%; padding-left:0}
tbody th {font:600 clamp(1rem,1.55vw,1.3rem)/1.35 var(--display); letter-spacing:-.02em; padding-left:0}
td {color:#433c34; font-size:1rem}
.us {color:var(--bone); background:var(--ink)}
thead .us {color:var(--accent); overflow-wrap:anywhere}
td.us {font-weight:500}
.comparison-price {display:inline-block; color:var(--metal); margin-top:.6rem; font-family:var(--display); font-size:1.3rem}
/* Full-service is always first and visually featured. */
.price-grid {display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:1.5rem}
.price {display:flex; flex-direction:column; padding:clamp(1.7rem,3.5vw,3rem); min-width:0}
.price-main {color:var(--ink); background:var(--bone); border:1px solid #ece7de33; border-top:4px solid var(--accent); box-shadow:0 -10px 60px #ff4f0a12}
.price-alt {border:1px solid var(--line-dark); background:var(--ink-2)}
.price-top {display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:2rem}
.price-top .mono {font-size:.66rem; max-width:24ch}
.price-main .price-top .mono {color:var(--accent-ink)}
.price-alt .price-top .mono {color:var(--muted-dark)}
.face-stack {display:flex; padding-left:10px; flex:none}
.face-stack img.portrait {width:42px; height:42px; margin-left:-10px; border:2px solid var(--bone); border-radius:50%; object-fit:cover; object-position:50% 38%; object-view-box:inset(6% 16% 36% 16%)}
.price-top > img.portrait {width:64px; height:64px; flex:none; border-radius:50%; object-fit:cover; object-position:50% 38%; object-view-box:inset(6% 16% 36% 16%)}
.price-num {font:600 clamp(3.5rem,7vw,7rem)/1 var(--display); letter-spacing:-.055em}
.price-alt .price-num {font-size:clamp(3.2rem,5.5vw,5.5rem)}
.price-num span {display:block; font:500 .72rem/1.5 var(--mono); text-transform:uppercase; letter-spacing:.04em; margin-top:.7rem}
.price-main .price-num span,.price-main .term {color:var(--muted-light)}
.price-alt .price-num span,.price-alt .term {color:var(--muted-dark)}
.price-desc {margin-top:1.4rem; font-size:1.1rem; max-width:30rem}
.price-who {margin-top:1.55rem; font:600 1.28rem/1.25 var(--display); letter-spacing:-.03em; color:var(--accent)}
.ticks {display:grid; gap:.6rem; list-style:none; padding:0; margin:1rem 0 2rem}
.ticks li {display:flex; gap:.7rem; align-items:baseline}
.ticks li::before {content:"+"; font-family:var(--mono); color:var(--accent); flex:none}
.price-main .ticks li::before {color:var(--accent-ink)}
.price .btn {margin-top:auto; align-self:flex-start}
.term {margin-top:1rem; font-size:.88rem}
.process-grid > div {display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem)}
.steps {list-style:none; margin:0; padding:0; border-top:2px solid var(--accent-ink)}
.steps li {display:grid; grid-template-columns:3.4rem minmax(0,1fr); gap:1rem; padding:1.8rem 0; border-bottom:1px solid var(--line-light)}
.step-n {font:600 2.3rem/1 var(--display); color:var(--accent-ink); letter-spacing:-.05em}
.steps h3 {font-size:clamp(1.4rem,2.2vw,1.9rem); letter-spacing:-.03em; line-height:1.2; margin-bottom:.7rem}
.steps p {color:#433c34}
/* Illustrative daily review, styled as part of the same warm studio. */
.demo-section {background:radial-gradient(ellipse at 5% 65%,#2a1c13,transparent 55%),var(--ink)}
.channel-shell {display:grid; grid-template-columns:220px minmax(0,1fr); border:1px solid #ece7de26; border-top:2px solid var(--accent); border-radius:6px; overflow:hidden; box-shadow:0 35px 80px #0004}
.channel-sidebar {padding:1.4rem 1.1rem; background:#1d1813; color:#c4b9ab; font-size:.88rem}
.workspace-name {color:var(--bone); font-weight:500; font-size:1rem; overflow-wrap:anywhere}
.workspace-status {display:flex; align-items:center; gap:.55rem; font-size:.72rem; margin-top:.5rem}
.sidebar-label {margin:2.2rem 0 .7rem; font:400 .7rem/1.5 var(--mono); text-transform:uppercase}
.channel-sidebar > p:not(.workspace-name):not(.workspace-status):not(.sidebar-label) {padding:.5rem .6rem}
.sidebar-active {color:var(--bone); background:#ff4f0a18; border-left:2px solid var(--accent); border-radius:2px}
.sidebar-team {margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--line-dark); font-size:.8rem}
.sidebar-team span {color:var(--bone)}
.sidebar-team p {margin-top:.5rem}
.channel-main {background:#171513; min-width:0}
.channel-head {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.4rem 1rem; padding:1.25rem 1.5rem; border-bottom:1px solid var(--line-dark)}
.channel-head h3 {font-size:1.2rem; letter-spacing:-.02em}
.channel-head span {font-size:.8rem; color:var(--stone)}
.demo-filters {display:flex; flex-wrap:wrap; gap:.45rem; padding:1rem 1.5rem .6rem}
.demo-filters button,.decision-actions button,#save-demo-edit {font:400 .86rem/1.4 var(--body); background:transparent; color:var(--bone); border:1px solid #7f6a56; border-radius:4px; padding:.55rem .85rem; min-height:44px; cursor:pointer}
.demo-filters button[aria-pressed="true"],.decision-actions button[aria-pressed="true"] {background:var(--accent); color:var(--ink); border-color:var(--accent)}
.demo-filters button:hover,.decision-actions button:hover {border-color:var(--accent)}
.demo-date {font:400 .64rem/1.7 var(--mono); color:var(--stone); padding:.5rem 1.5rem}
.message-list {padding:.5rem 1.5rem 1.5rem}
.demo-message {display:grid; grid-template-columns:42px minmax(0,1fr); gap:.8rem; padding:1.2rem 0; border-bottom:1px solid var(--line-dark); font-size:.98rem; line-height:1.6}
.demo-message:last-child {border:0; padding-bottom:0}
.demo-message > img.portrait {width:42px; height:42px; border-radius:50%; object-fit:cover; object-position:50% 38%; object-view-box:inset(6% 16% 36% 16%)}
.demo-message > div > p:not(.message-meta) {color:#d1c7b9}
.message-meta {display:flex; flex-wrap:wrap; gap:.2rem .6rem; align-items:baseline; margin-bottom:.3rem}
.message-meta strong {font-weight:500; font-size:1rem}
.message-meta span {font-size:.75rem; color:var(--muted-dark)}
.change-reason {border-left:2px solid var(--accent); padding-left:.85rem; margin-top:.75rem}
.change-reason summary {cursor:pointer; color:var(--bone); font-size:.9rem; padding-block:.35rem}
.change-reason p {margin-top:.5rem; font-size:.9rem; color:var(--stone)}
.expert-avatar {display:grid; place-items:center; width:42px; height:42px; background:var(--bone); color:var(--ink); border-radius:4px; font:500 .8rem/1 var(--mono)}
.decision-card {margin-top:1rem; padding:1rem; border:1px solid #ff4f0a44; background:#211a14; border-radius:4px}
.decision-card > p {font-size:.9rem}
.decision-status {margin-top:.4rem; color:var(--stone)}
.decision-actions {display:flex; flex-wrap:wrap; gap:.45rem; margin:.85rem 0}
.decision-actions button:first-child:not([aria-pressed="true"]) {background:var(--accent); border-color:var(--accent); color:var(--ink)}
#demo-edit {margin:1rem 0}
#demo-edit label {display:block; color:var(--bone); margin-bottom:.5rem}
#demo-note {width:100%; resize:vertical; padding:.6rem; border-radius:3px; background:var(--bone); color:var(--ink); font-size:.9rem}
#save-demo-edit {margin-top:.5rem}
.demo-reset {font:400 .85rem/1.5 var(--body); background:none; border:0; padding:.6rem 0; color:var(--stone); text-decoration:underline; text-underline-offset:4px; cursor:pointer}
.channel-demo figcaption {margin-top:1rem; font-size:.84rem; color:var(--stone)}
.demo-bottom {display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.5rem; align-items:center; margin-top:2rem}
.demo-bottom p {max-width:32rem; color:var(--stone)}
/* Guarantee figures are eligibility thresholds, never performance claims. */
.guarantee-grid {display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr); align-items:end; gap:clamp(2.5rem,6vw,6rem)}
.hot h2 {font-size:clamp(2.5rem,4.6vw,5rem)}
.hot h2 .line {display:block}
.g-lead {margin-top:2rem; max-width:34rem; font-size:clamp(1.3rem,2vw,1.8rem); line-height:1.35; font-weight:500}
.g-terms {margin-top:1.4rem; color:#2a1a10; max-width:44rem; font-size:1rem}
.g-stats {border-top:2px solid var(--accent-ink)}
.g-stats > div {padding:1.4rem 0; border-bottom:1px solid #0e0d0c55}
.g-num {font:600 clamp(3.6rem,7vw,6.4rem)/1 var(--display); letter-spacing:-.06em}
.g-stats > div p:last-child {margin-top:.4rem}
.g-both {margin-top:1.2rem}
.faq-grid {display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(2rem,6vw,6rem); align-items:start}
.faq {border-top:2px solid var(--accent-ink)}
.faq details {border-bottom:1px solid var(--line-light)}
.faq summary {display:flex; justify-content:space-between; align-items:center; gap:1.5rem; padding:1.4rem 0; list-style:none; cursor:pointer; font:600 clamp(1.15rem,1.7vw,1.45rem)/1.4 var(--display); letter-spacing:-.025em}
.faq summary::-webkit-details-marker {display:none}
.faq summary::after {content:"+"; display:grid; place-items:center; width:2.2rem; height:2.2rem; flex:none; border:1px solid var(--ink); border-radius:50%; font:400 1rem/1 var(--mono)}
.faq details[open] summary::after {content:"−"; background:var(--ink); color:var(--bone)}
.faq summary:hover::after {background:var(--accent); color:var(--ink)}
.faq details p {padding:0 3.5rem 1.6rem 0; color:#433c34; max-width:46rem}
.audit {background:radial-gradient(ellipse at 0 70%,#2c2117,transparent 50%),var(--ink)}
.audit-portrait {display:flex; align-items:center; gap:1.4rem; margin-top:2rem; max-width:27rem}
.audit-portrait img.portrait {width:150px; height:150px; flex:none; box-shadow:none; mask-image:linear-gradient(#000 70%,transparent)}
.audit-portrait figcaption {font-size:.65rem; color:var(--stone); line-height:1.9}
.audit-grid {display:grid; grid-template-columns:minmax(0,1fr) minmax(0,32rem); gap:clamp(2.5rem,6vw,6rem); align-items:center}
.assure {display:flex; flex-wrap:wrap; gap:.5rem; margin:2rem 0 0; padding:0; list-style:none}
.assure li {padding:.5rem .9rem; border:1px solid var(--line-dark); border-radius:999px; font:400 .65rem/1.5 var(--mono); text-transform:uppercase}
.form-card {padding:clamp(1.6rem,3vw,2.4rem); background:var(--bone); color:var(--ink); border-top:2px solid var(--accent)}
.form-card h3 {font-size:1.7rem; line-height:1.2; letter-spacing:-.035em}
.form-notice {margin-top:.7rem; color:var(--muted-light); font-size:.88rem}
form fieldset {display:grid; gap:1rem; margin:1.4rem 0 0; border:0; padding:0; min-width:0}
.form-row {display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.field {display:grid; gap:.35rem; min-width:0}
label {font:500 .66rem/1.6 var(--mono); letter-spacing:.04em; text-transform:uppercase; color:#433c34}
input,select {width:100%; min-width:0; padding:.8rem .9rem; background:#f6f2eb; color:var(--ink); border:1px solid #0e0d0c55; border-radius:3px; font-size:1rem}
input::placeholder {color:#72685e}
input:focus-visible,select:focus-visible {outline:3px solid var(--accent-ink); outline-offset:1px; border-color:var(--ink)}
fieldset:disabled input,fieldset:disabled select,fieldset:disabled button {opacity:.55; cursor:not-allowed}
.form-card .btn {margin-top:.4rem}
.confirmation {margin-top:1.4rem; padding:1.4rem; border:1px solid var(--line-light)}
.confirmation:focus {outline:3px solid var(--accent-ink); outline-offset:2px}
.confirmation-icon {display:grid; place-items:center; width:2.4rem; height:2.4rem; background:var(--accent-ink); color:var(--bone); border-radius:50%; margin-bottom:.8rem}
.confirmation h4 {font-size:1.3rem}
.confirmation p {margin-top:.5rem; color:#433c34}
.text-link {padding:0; border:0; background:none; color:inherit; font:500 1rem/1.5 var(--body); text-decoration:underline; text-underline-offset:4px; cursor:pointer}
.confirmation .text-link {margin-top:1rem}
.site-footer {padding:clamp(4rem,8vw,7rem) 0 2rem; border-top:1px solid var(--line-dark); overflow:hidden}
.footer-big {font:600 clamp(3rem,14vw,14rem)/1 var(--display); letter-spacing:-.065em; color:#3b3026; white-space:nowrap; margin-bottom:3rem}
.footer-big span {color:var(--accent); text-shadow:0 0 28px #ff4f0a22}
.footer-row {display:grid; grid-template-columns:auto 1fr auto; gap:1.5rem 2rem; align-items:center; padding-bottom:2rem; border-bottom:1px solid var(--line-dark)}
.footer-row p {color:var(--muted-dark)}
.footer-bottom {display:grid; grid-template-columns:auto 1fr auto; gap:1rem 2rem; padding-top:1.6rem; color:var(--muted-dark); font-size:.8rem}
.trade-name {font-size:.72rem; color:var(--stone)}
/* Small identity details, not a rainbow brand treatment. */
[data-agent="ppc"] {--agent-accent:var(--juno)}
[data-agent="account"] {--agent-accent:var(--knox)}
[data-agent="listing"] {--agent-accent:var(--sage)}
.roster-card .agent-photo {border-top:2px solid var(--agent-accent)}
@media(max-width:1100px) {
 .site-header nav {display:none}
 .hero-strip {grid-template-columns:1fr}
 .choice-grid {grid-template-columns:1fr; border:0}
 .choice,.choice + .choice {padding:2rem 0; border:0; border-top:1px solid var(--line-light)}
 .choice-us {margin-top:1rem; border-top:2px solid var(--accent)}
 .choice-tag {margin-bottom:1rem}
 .agent-tagline {min-height:4.2em}
 .price-top {flex-wrap:wrap}
 .audit-grid,.faq-grid,.guarantee-grid {grid-template-columns:1fr}
 .audit-copy {max-width:48rem}
 .form-card {max-width:46rem}
 .footer-row,.footer-bottom {grid-template-columns:1fr}
}
@media(max-width:820px) {
 .agent-roster {grid-template-columns:1fr; gap:3.5rem}
 .roster-card:nth-child(n) {padding-top:0; display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:start}
 .roster-card .agent-photo {margin:0; position:sticky; top:4rem}
 .agent-tagline {min-height:0}
 .human-band {grid-template-columns:1fr; margin-top:3.5rem}
 .price-grid,.process-grid > div {grid-template-columns:1fr}
 .process-grid > div {gap:0}
 .price-top {flex-wrap:nowrap}
 .channel-shell {grid-template-columns:175px minmax(0,1fr)}
 .channel-sidebar {padding-inline:.8rem}
}
@media(max-width:640px) {
 .table-wrap {border:0}
 table,tbody,tr,tbody th,td {display:block; width:100%}
 thead {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap}
 tbody tr {border-top:2px solid var(--accent-ink); margin-bottom:1.8rem}
 tbody th {padding:1rem 0 .8rem; border:0; font-size:1.2rem}
 td {display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:.9rem; padding:.85rem; font-size:.96rem; align-items:start}
 td::before {content:attr(data-label); font:500 .65rem/1.6 var(--mono); text-transform:uppercase; padding-top:.1rem; overflow-wrap:anywhere}
 td.us {border:0}
 td.us::before {color:var(--metal)}
 .comparison-price {font-size:1.1rem}
 .channel-shell {grid-template-columns:1fr}
 .channel-sidebar {display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .8rem; padding:.9rem 1rem}
 .workspace-name {width:100%}
 .workspace-status {margin:0}
 .channel-sidebar .sidebar-label,.channel-sidebar > p:not(.workspace-name):not(.workspace-status):not(.sidebar-active),.sidebar-team {display:none}
 .channel-sidebar .sidebar-active {padding:.3rem .5rem!important; font-size:.76rem}
 .channel-head {padding:1rem}
 .demo-filters {padding:.8rem 1rem .4rem; gap:.35rem}
 .demo-filters button {padding-inline:.65rem; font-size:.8rem}
 .demo-date {padding-inline:1rem; font-size:.6rem}
 .message-list {padding-inline:.9rem}
 .demo-message {grid-template-columns:32px minmax(0,1fr); gap:.6rem; font-size:.94rem}
 .demo-message > img.portrait,.expert-avatar {width:32px; height:32px; font-size:.85rem}
 .decision-card {margin-left:-2.6rem; padding:.85rem}
}
@media(max-width:560px) {
 body {font-size:1rem}
 .site-header {padding-top:.65rem}
 .nav-wrap {gap:.5rem}
 .wordmark {font-size:1.05rem; gap:.4rem}
 .wordmark img {width:26px; height:26px}
 .nav-cta {font-size:.58rem; padding:.6rem .7rem; letter-spacing:0}
 .facts {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem}
 .facts b {font-size:1.65rem}
 .facts span {font-size:.55rem}
 .section h2 {font-size:clamp(2.15rem,9.5vw,2.8rem)}
 .roster-card:nth-child(n) {display:block}
 .roster-card .agent-photo {position:relative; top:auto; margin-bottom:1.6rem; max-width:400px}
 .roster-card h3 {font-size:4rem}
 .price-top {flex-wrap:wrap; margin-bottom:1.6rem}
 .price-num {font-size:clamp(3.5rem,16vw,4.5rem)}
 .price-alt .price-num {font-size:3.6rem}
 .form-row {grid-template-columns:1fr}
 .steps li {grid-template-columns:2.5rem minmax(0,1fr); gap:.8rem}
 .step-n {font-size:2rem}
 .faq details p {padding-right:0}
 .footer-big {font-size:14vw}
}
@media(max-width:380px) {.site-header .nav-cta {display:none}}
/* Art direction scales into a separate studio panel on small screens. */
@media(min-width:1600px) {
 .hero-inner {min-height:745px}
}
@media(max-width:1100px) and (min-width:821px) {
 .hero-copy {width:59%}
 .hero h1 {font-size:5.35vw}
 .hero-studio {width:56%; top:-4.5rem}
 .hero-inner {min-height:650px}
 .hero-actions {max-width:26rem}
 .studio-support {width:44%; right:1.5rem}
 .studio-feature figcaption {left:20%; max-width:10rem; bottom:1.7rem}
 .studio-feature figcaption .mono {font-size:.49rem}
}
@media(max-width:820px) {
 .hero {padding-top:7.4rem}
 .hero-inner {display:grid; grid-template-columns:minmax(0,1fr); min-height:0; padding-bottom:0}
 .hero-copy {width:100%}
 .hero h1 {font-size:clamp(3.2rem,7.8vw,4.8rem); max-width:12ch}
 .hero-lead {max-width:36rem}
 .hero-studio {position:relative; top:auto; right:auto; bottom:auto; width:100%; height:620px; margin-top:1.5rem}
 .studio-feature img.portrait {object-fit:cover; object-position:50% 32%; mask-image:linear-gradient(0deg,transparent,#000 24%,#000 93%,transparent)}
 .studio-feature figcaption {left:2%; bottom:2rem}
 .studio-support {width:42%; bottom:1.5rem; right:0}
 .hero-strip {margin-top:0}
}
@media(max-width:560px) {
 .draft-bar {font-size:.5rem; letter-spacing:.025em; padding:.45rem .3rem}
 .hero {padding-top:6.5rem}
 .hero h1 {font-size:clamp(2rem,10vw,3.3rem); letter-spacing:-.055em; line-height:1.08; max-width:none}
 .kicker {font-size:.55rem; line-height:1.8; align-items:flex-start; margin-bottom:1.4rem; max-width:30rem}
 .kicker .dot {margin-top:.35rem}
 .hero-foot {margin-top:1.5rem}
 .hero-lead {font-size:1.05rem}
 .hero-actions .btn {width:100%}
 .micro {font-size:.53rem; letter-spacing:0}
 .hero-studio {height:auto; width:calc(100% + 2 * var(--gutter)); margin-left:calc(-1 * var(--gutter)); margin-top:1.4rem}
 .studio-feature {position:relative; inset:auto; aspect-ratio:.94}
 .studio-feature img.portrait {position:absolute; inset:0}
 .studio-feature img.portrait {object-position:50% 35%}
 .studio-feature figcaption {left:var(--gutter); bottom:1.5rem; max-width:40%}
 .studio-feature figcaption .mono {font-size:.47rem}
 .studio-feature strong {font-size:1.8rem}
 .studio-support {position:relative; width:auto; gap:.75rem; right:auto; bottom:auto; margin:0 var(--gutter) 1.5rem}
 .studio-support img.portrait {aspect-ratio:1; object-fit:cover}
 .studio-support figcaption {inset:auto .75rem .75rem}
 .studio-support strong {font-size:1.2rem}
 .studio-support figcaption span {font-size:.55rem}
 .hero-strip {padding-top:1.5rem}
 .audit-portrait {gap:1rem}
 .audit-portrait img.portrait {width:125px; height:125px}
}
@media(prefers-reduced-motion:reduce) {
 html {scroll-behavior:auto}
 .ticker-track {animation:none}
 .btn {transition:none}
 .btn:hover {transform:none}
}
@media print {.ticker {display:none} .draft-bar {position:static}}