@charset "UTF-8";
:root { --paper:#f6f5ee; --white:#fffefa; --ink:#152d31; --body:#455657; --muted:#5d6b68; --green:#285c49; --lime:#dce6bb; --line:#d5d8cd; --serif:Georgia,'Times New Roman',serif; --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif }
* { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:110px }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased }
button,a { -webkit-tap-highlight-color:transparent }
a { color:inherit; text-decoration:none }
button { font:inherit; color:inherit; cursor:pointer }
button:disabled { cursor:default }
button,a,summary { touch-action:manipulation }
button { border:0 }
svg { display:block; flex-shrink:0 }
button[hidden],[hidden] { display:none!important }
p { margin:0 0 1.2em }
h1,h2,h3 { font-weight:400; margin:0; line-height:1.1 }
h1,h2 { font-family:var(--serif); letter-spacing:-.045em }
h1 em,h2 em { font-weight:400; color:var(--green) }
h2 { font-size:clamp(38px,4.1vw,58px) }
h3 { font-size:24px; letter-spacing:-.03em; line-height:1.25 }
::selection { background:var(--lime); color:var(--ink) }
:focus-visible { outline:3px solid #b16b20; outline-offset:5px; border-radius:2px }
.wrap { max-width:1260px; margin:0 auto; padding:0 42px }
.section { padding:100px 0 }
.section-rule { border-bottom:1px solid var(--line) }
.eyebrow { font-size:13px; line-height:1.5; letter-spacing:.14em; text-transform:uppercase; font-weight:650; display:flex; gap:10px; align-items:center; margin-bottom:25px }
.tiny-square { height:7px; width:7px; background:currentColor; display:inline-block; flex-shrink:0 }
.skip-link { position:fixed; top:-100px; left:16px; z-index:20; background:var(--ink); color:white; padding:12px 20px }
.skip-link:focus { top:12px }
.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 }
.site-header { background:rgba(246,245,238,.97); position:sticky; top:0; z-index:10; border-bottom:1px solid var(--line) }
.header-inner { display:flex; align-items:center; justify-content:space-between; min-height:95px; gap:30px }
.brand { display:inline-flex; align-items:center; gap:9px; flex-shrink:0 }
.brand-mark { width:34px; height:34px }
.brand strong { font-size:32px; line-height:1; letter-spacing:-.055em; font-family:var(--serif); font-weight:400; display:block }
.brand-sub { font-size:11px; letter-spacing:.23em; line-height:1.5; display:block; padding-top:5px }
.main-nav { display:flex; align-items:center; gap:30px; font-size:14px; font-weight:550 }
.main-nav a { padding:12px 0; transition:color .2s }
.main-nav a:hover { color:var(--green); text-decoration:underline; text-underline-offset:6px }
.main-nav .nav-contact { border:1px solid var(--ink); padding:11px 17px; display:flex; gap:25px; align-items:center }
.menu-toggle { display:none }
.button { display:inline-flex; justify-content:center; align-items:center; gap:25px; padding:15px 21px; font-size:14px; font-weight:600; min-height:50px; line-height:1.4; border:1px solid transparent; transition:background .2s,transform .2s }
.button span { font-size:19px; font-weight:400 }
.button-dark { background:var(--ink); color:var(--white) }
.button-dark:hover { background:var(--green); transform:translateY(-2px) }
.text-link { display:inline-flex; align-items:center; gap:15px; font-size:14px; font-weight:600; padding:12px 0; border-bottom:1px solid var(--ink); line-height:1.4 }
.text-link:hover { color:var(--green); border-color:var(--green) }
.hero { padding-top:76px }
.hero-grid { display:grid; grid-template-columns:1.1fr 1fr; gap:72px; align-items:center; padding-bottom:72px }
.hero h1 { font-size:clamp(48px,4.9vw,70px); max-width:590px; line-height:1.035; margin-bottom:27px }
.hero h1 em { white-space:normal }
.hero-intro { font-size:18px; line-height:1.65; max-width:470px; color:var(--body); margin-bottom:13px }
.hero-detail { font-size:15px; color:var(--body); max-width:400px; margin-bottom:26px }
.hero-actions { display:flex; align-items:center; gap:26px; flex-wrap:wrap }
.hero-footnote { font-size:13px; color:var(--muted); display:flex; gap:8px; align-items:center; margin:20px 0 0 }
.hero-footnote span { color:var(--green); font-size:15px }
.hero-visual { position:relative; padding:25px 0 0; margin:0 }
.visual-caption { font-size:11px; letter-spacing:.14em; display:flex; justify-content:space-between; color:var(--muted); margin:0 2px 34px }
.source-sheet { position:absolute; top:72px; left:18px; width:calc(100% - 37px); height:310px; border:1px solid #c2cabb; background:#ecede4; transform:rotate(-6deg); padding:15px 20px }
.source-sheet>span { font-size:10px; letter-spacing:.12em; color:var(--muted) }
.sheet-lines { margin-top:18px; display:grid; gap:24px }
.sheet-lines i { display:block; height:1px; background:#c5cfc1; position:relative }
.sheet-lines i:after { content:''; position:absolute; left:50%; top:-15px; bottom:-12px; border-left:1px solid #c5cfc1 }
.report-preview { position:relative; background:var(--white); border:1px solid #c6cec4; padding:24px 26px 0; box-shadow:0 16px 30px #152d3107 }
.report-preview-top { display:flex; justify-content:space-between; align-items:center; gap:10px }
.report-brand { font-size:13px; display:flex; align-items:center; gap:7px; font-weight:650 }
.report-brand .tiny-square { color:var(--green); width:5px; height:5px }
.sample-pill { font-size:12px; background:#e9efdf; color:var(--green); padding:3px 7px; white-space:nowrap }
.report-preview-question { font-family:var(--serif); font-size:33px; line-height:1.1; letter-spacing:-.03em; margin:27px 0 24px }
.report-preview-question span { font-style:italic; color:var(--green) }
.preview-item { display:flex; align-items:center; gap:13px; border-top:1px solid #e3e5dc; padding:17px 0 }
.preview-item>div { flex:1 }
.preview-item strong { display:block; font-size:13px; font-weight:600; line-height:1.6 }
.preview-item div>span { font-size:12px; color:var(--muted); display:block }
.preview-icon { font-size:22px; color:var(--green); width:24px; flex-shrink:0 }
.preview-index { font-family:var(--serif); font-size:14px; color:var(--muted) }
.preview-bottom { display:flex; align-items:center; gap:7px; font-size:12px; background:#f2f4ec; margin:0 -26px; padding:12px 26px; border-top:1px solid #e3e5dc }
.status-dot { width:5px; height:5px; border-radius:50%; background:var(--green); display:inline-block; flex-shrink:0 }
.visual-footer { display:flex; align-items:center; justify-content:flex-end; gap:18px; margin-top:25px }
.visual-footer svg { color:#70957b }
.visual-footer span { font-size:13px; line-height:1.55; color:var(--muted) }
.fit-strip { display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:80px; border-top:1px solid var(--line) }
.fit-strip>span:first-child { font-size:11px; letter-spacing:.12em; color:var(--muted) }
.fit-strip p { font-size:14px; margin:0 }
.strip-dot { color:#6d826e }
.section-heading { display:grid; grid-template-columns:1fr 2fr; gap:40px; align-items:start }
.section-heading>.eyebrow { margin-top:9px }
.section-heading>div { display:flex; gap:60px; justify-content:space-between; align-items:end }
.section-heading h2 { flex-shrink:0 }
.section-heading>div>p { max-width:270px; font-size:15px; color:var(--body); margin:0 0 3px }
.pain-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:43px; margin-top:65px }
.pain { border-top:1px solid var(--ink); padding-top:21px; display:flex; flex-direction:column }
.pain-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:32px }
.pain-top>span { font-size:13px; color:var(--muted) }
.pain-top svg { width:34px; height:34px; stroke:var(--green); stroke-width:1.5; fill:none }
.pain h3 { font-family:var(--serif); font-size:30px; letter-spacing:-.03em; margin-bottom:20px }
.pain p { font-size:15px; color:var(--body); line-height:1.75; margin-bottom:24px }
.pain-tag { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--green); margin-top:auto }
.example-section { background:var(--ink); color:var(--paper) }
.example-section .eyebrow { color:#c0cdb9 }
.example-section h2 em { color:var(--lime) }
.example-heading { display:flex; align-items:end; justify-content:space-between; gap:60px; margin-bottom:47px }
.example-heading>p { max-width:280px; font-size:15px; color:#c4ceca; margin:0 0 6px }
.example-workspace { display:grid; grid-template-columns:255px minmax(0,1fr); border:1px solid #4a6060 }
.example-sidebar { padding:30px 26px; background:#1c373b; display:flex; flex-direction:column }
.workspace-label { font-size:12px; letter-spacing:.13em; color:#c0cdb9; display:block; margin-bottom:35px }
.workspace-title { font-family:var(--serif); font-size:28px; line-height:1.2; letter-spacing:-.025em; margin-bottom:18px }
.example-sidebar>p:not(.workspace-title) { font-size:14px; color:#c4ceca; line-height:1.7 }
.example-notice { display:flex; gap:9px; align-items:flex-start; margin-top:auto; padding-top:42px; color:#d0dacb }
.example-notice strong { display:block; font-size:13px; font-weight:500 }
.example-notice span { display:block; font-size:12px; line-height:1.6; margin-top:4px; max-width:170px }
.example-report { background:var(--white); color:var(--ink); min-width:0 }
.report-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 28px; border-bottom:1px solid #e1e4da }
.report-title { font-size:13px; font-weight:650 }
.report-period { font-size:12px; color:var(--muted) }
.report-tabs { display:flex; gap:25px; padding:0 28px; border-bottom:1px solid #dce0d5 }
.report-tab { background:none; font-size:13px; padding:16px 0 14px; border-bottom:3px solid transparent; color:var(--body); white-space:nowrap }
.report-tab:hover { color:var(--green) }
.report-tab[aria-selected=true] { color:var(--green); border-color:var(--green); font-weight:650 }
.report-panel { padding:28px; min-height:338px }
.panel-heading h3 { font-size:18px; letter-spacing:-.02em; margin-bottom:7px }
.panel-heading p { font-size:13px; color:var(--muted); margin-bottom:23px }
.report-table-wrap { overflow-x:auto; max-width:100%; scrollbar-width:thin }
table { width:100%; border-collapse:collapse; white-space:nowrap; font-size:13px; text-align:left }
thead { background:#f0f2ea }
th,td { padding:13px 11px; border-bottom:1px solid #e5e7de }
thead th { font-size:12px; letter-spacing:.035em; font-weight:600; color:var(--body) }
tbody th { font-weight:500 }
td { color:var(--body) }
td:last-child { padding-right:0 }
thead th:last-child { padding-right:10px }
.badge { display:inline-block; background:#eaf0e4; color:#30563e; font-size:12px; line-height:1.7; padding:3px 7px; border-radius:2px }
.badge-amber { color:#795121; background:#f6ebd8 }
.total-row { background:#f0f3e9 }
.total-row th,.total-row td { font-weight:650; color:var(--green) }
.report-insight { display:flex; gap:12px; background:#edf2e6; padding:12px 15px; margin-top:19px; align-items:flex-start }
.insight-mark { font-size:20px; color:var(--green); line-height:1.2 }
.report-insight p { font-size:13px; color:#415944; line-height:1.65; margin:0 }
.report-insight strong { font-weight:650 }
.report-method { font-size:13px; color:var(--muted); line-height:1.65; margin:12px 0 0 }
.report-footer { font-size:12px; border-top:1px solid #e1e4da; padding:12px 28px; display:flex; gap:7px; align-items:center; color:var(--muted) }
.example-afterword { font-size:13px; line-height:1.7; color:#bbc9c1; margin:19px 0 0; text-align:right }
.experience { background:#eeeee5 }
.experience-grid { display:grid; grid-template-columns:1fr 1.04fr; gap:100px }
.case-label { display:flex; align-items:flex-start; gap:10px; margin-top:40px }
.case-label .tiny-square { margin-top:5px; color:var(--green) }
.case-label span:last-child { font-size:12px; color:var(--body) }
.case-label strong { font-size:13px; font-weight:500; display:block; margin-top:7px }
.case-copy .large-copy { font-family:var(--serif); font-size:27px; line-height:1.4; letter-spacing:-.025em; color:var(--ink); margin-top:0 }
.case-copy p { font-size:15px; color:var(--body); line-height:1.8 }
.case-takeaway { border-top:1px solid #c9d0c1; margin-top:29px; padding-top:23px; display:flex; gap:25px }
.case-takeaway span { font-size:11px; letter-spacing:.1em; white-space:nowrap; padding-top:5px }
.case-takeaway p { font-size:15px; color:var(--green); margin:0; line-height:1.5 }
.approach-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:100px }
.approach-intro>p:not(.eyebrow) { max-width:330px; font-size:15px; color:var(--body); margin-top:25px; margin-bottom:18px }
.steps { list-style:none; margin:0; padding:0 }
.steps li { display:flex; align-items:flex-start; gap:27px; padding:23px 0 25px; border-top:1px solid var(--line) }
.steps li:first-child { padding-top:0; border:0 }
.steps li:last-child { padding-bottom:0 }
.step-number { font-size:13px; color:var(--green); padding-top:4px }
.steps h3 { font-size:19px; letter-spacing:-.025em; margin-bottom:10px }
.steps p { font-size:15px; color:var(--body); line-height:1.7; margin:0; max-width:390px }
.faq-grid { display:grid; grid-template-columns:1fr 1.6fr; gap:100px }
.faq-list { border-top:1px solid var(--line) }
details { border-bottom:1px solid var(--line) }
summary { list-style:none; display:flex; justify-content:space-between; gap:20px; align-items:center; font-size:16px; font-weight:500; padding:23px 0; cursor:pointer; line-height:1.5 }
summary::-webkit-details-marker { display:none }
summary>span { font-size:23px; color:var(--green); line-height:1; font-weight:300; transition:transform .15s }
details[open] summary>span { transform:rotate(45deg) }
details p { font-size:15px; color:var(--body); max-width:560px; margin:0 35px 24px 0; line-height:1.8 }
.contact-section { background:var(--lime); padding:72px 0 }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center }
.contact-section h2 { font-size:clamp(50px,5.5vw,75px) }
.contact-copy>p:first-child { font-size:17px; max-width:450px; line-height:1.75; margin-bottom:26px }
.contact-note { font-size:13px; color:#405244; margin:14px 0 22px; line-height:1.7 }
.email-row { display:flex; align-items:center; gap:18px; flex-wrap:wrap }
.email-row>a { font-size:14px; border-bottom:1px solid #8b9d76; overflow-wrap:anywhere }
.copy-button { background:transparent; font-size:12px; display:flex; align-items:center; gap:6px; padding:9px 0 }
.copy-button:hover { color:var(--green) }
.copy-status { font-size:13px; color:var(--green); min-height:18px; margin:4px 0 0 }
.site-footer { background:var(--ink); color:var(--paper); padding:36px 0 }
.footer-inner { display:flex; align-items:center; justify-content:space-between; gap:35px }
.footer-brand .brand-mark { width:28px; height:28px }
.footer-brand strong { font-size:27px }
.footer-brand .brand-sub { font-size:10px }
.footer-inner p { font-family:var(--serif); font-size:15px; margin:0; color:#d0dacb }
.footer-inner>span { font-size:11px; color:#bccbc5 }
.back-top { font-size:12px; display:flex; align-items:center; gap:15px }
.back-top:hover { text-decoration:underline }
@media(min-width:1600px) {
  .hero { padding-top:95px }
  .hero-grid { padding-bottom:90px }
  .hero h1 { font-size:74px }
}

@media(max-width:1100px) {
  .wrap { padding:0 30px }
  .hero-grid { gap:35px }
  .hero h1 { font-size:57px }
  .hero-actions { gap:15px }
  .hero-actions .button { padding:14px 16px; gap:13px }
  .hero-actions .text-link { font-size:13px }
  .section-heading { grid-template-columns:1fr 2.1fr; gap:25px }
  .section-heading>div { display:block }
  .section-heading>div>p { max-width:400px; margin-top:22px }
  .example-heading { gap:40px }
  .example-heading h2 { font-size:44px }
  .example-workspace { grid-template-columns:215px minmax(0,1fr) }
  .example-sidebar { padding:25px 20px }
  .report-panel { padding:24px 20px }
  .report-tabs { gap:23px; padding:0 20px }
  .report-toolbar { padding:19px 20px }
  .pain-grid { gap:28px }
  .experience-grid,.approach-grid,.faq-grid,.contact-grid { gap:65px }
  .footer-inner { gap:20px }
  .report-period { font-size:12px }
  .preview-item strong { font-size:12px }
  .preview-item div>span { font-size:11px }
  .preview-item { gap:9px }
  .report-preview { padding-left:20px; padding-right:20px }
  .preview-bottom { margin-left:-20px; margin-right:-20px; padding-left:20px; padding-right:20px }
}

@media(max-width:900px) {
  .hero-grid { gap:30px; grid-template-columns:1.05fr 1fr }
  .hero h1 { font-size:48px }
  .hero-intro { font-size:16px }
  .hero-visual { padding-top:0 }
  .visual-caption { margin-bottom:25px; font-size:10px }
  .report-preview-question { font-size:29px }
  .sample-pill { font-size:12px }
  .preview-item { padding:14px 0 }
  .preview-index { display:none }
  .preview-bottom { font-size:12px }
  .report-brand { font-size:12px }
  .source-sheet { top:45px }
  .fit-strip { gap:12px }
  .fit-strip>span:first-child { max-width:110px; font-size:10px }
  .fit-strip p { font-size:13px }
  .section { padding:80px 0 }
  .example-workspace { grid-template-columns:1fr }
  .example-sidebar { display:grid; grid-template-columns:1fr 1fr; gap:12px 35px; padding:22px 25px; align-items:center }
  .workspace-label { margin:0; font-size:12px }
  .workspace-title { display:none }
  .example-sidebar>p:not(.workspace-title) { margin:0; grid-column:1; font-size:13px; max-width:290px }
  .example-notice { grid-column:2; grid-row:1 / 3; padding:0; margin:0; justify-content:end }
  .example-notice span { max-width:200px }
  .example-heading h2 { font-size:40px }
  .example-heading>p { max-width:230px; font-size:14px }
  .report-panel { min-height:330px }
  .experience-grid,.approach-grid,.faq-grid,.contact-grid { gap:45px }
  .pain h3 { font-size:26px }
  .pain p { font-size:14px }
  .case-copy .large-copy { font-size:24px }
  .footer-inner p { display:none }
}

@media(max-width:760px) {
  html { scroll-padding-top:92px }
  .wrap { padding:0 24px }
  .header-inner { min-height:78px; gap:20px; flex-wrap:wrap }
  .brand strong { font-size:29px }
  .brand-mark { width:30px; height:30px }
  .brand-sub { font-size:10px }
  .menu-toggle { display:flex; gap:18px; align-items:center; background:none; font-size:14px; padding:14px 0 14px 14px }
  .menu-toggle span { font-size:21px; line-height:1 }
  .menu-toggle[aria-expanded=true] span { transform:rotate(45deg) }
  .main-nav { flex-basis:100%; width:100%; padding:0 0 20px; gap:5px; flex-direction:column; align-items:stretch }
  .js .main-nav { display:none }
  .js .main-nav.is-open { display:flex }
  .main-nav>a { padding:13px 0; border-top:1px solid var(--line) }
  .main-nav .nav-contact { margin-top:6px; justify-content:space-between; padding:12px 16px }
  .hero { padding-top:47px }
  .hero-grid { grid-template-columns:1fr; gap:46px; padding-bottom:37px }
  .hero h1 { font-size:clamp(47px,9vw,68px); max-width:580px }
  .hero .eyebrow { font-size:11px; letter-spacing:.12em }
  .hero-intro { font-size:17px; max-width:520px }
  .hero-detail { font-size:15px; max-width:450px }
  .hero-actions { gap:22px }
  .hero-actions .button { font-size:14px; padding:14px 20px; gap:18px }
  .hero-visual { max-width:480px; width:100%; margin:0 auto; padding:0 6px }
  .visual-caption { font-size:11px; margin-bottom:29px }
  .source-sheet { top:50px }
  .report-preview { padding:25px 25px 0 }
  .report-brand { font-size:13px }
  .sample-pill { font-size:12px }
  .report-preview-question { font-size:34px; margin:25px 0 23px }
  .preview-item { padding:16px 0; gap:13px }
  .preview-item strong { font-size:13px }
  .preview-item div>span { font-size:13px }
  .preview-index { display:block }
  .preview-bottom { margin:0 -25px; padding:13px 25px; font-size:12px }
  .visual-footer { margin-top:19px }
  .fit-strip { flex-wrap:wrap; justify-content:flex-start; gap:10px 12px; padding-top:22px; padding-bottom:22px }
  .fit-strip>span:first-child { flex-basis:100%; max-width:none; font-size:10px }
  .fit-strip p { font-size:13px }
  .section { padding:66px 0 }
  .section-heading { display:block }
  .section-heading>div { display:block }
  .section-heading>div>p { max-width:430px; margin-top:20px }
  .eyebrow { font-size:12px; margin-bottom:20px }
  h2 { font-size:43px }
  .pain-grid { grid-template-columns:1fr; gap:30px; margin-top:38px }
  .pain { position:relative; padding-left:48px; padding-top:23px }
  .pain-top { margin:0 }
  .pain-top>span { position:absolute; top:28px; left:0 }
  .pain-top svg { position:absolute; top:24px; right:0; width:30px; height:30px }
  .pain h3 { font-size:29px; margin-bottom:16px; padding-right:37px }
  .pain p { font-size:15px; max-width:460px; margin-bottom:17px }
  .pain-tag { font-size:12px }
  .example-heading { display:block; margin-bottom:30px }
  .example-heading h2 { font-size:41px }
  .example-heading>p { max-width:440px; margin:24px 0 0; font-size:15px }
  .example-sidebar { display:flex; flex-direction:column; align-items:stretch; gap:14px; padding:21px 20px }
  .example-sidebar>p:not(.workspace-title) { display:none }
  .example-notice { justify-content:flex-start }
  .example-notice span { max-width:none; font-size:12px }
  .example-notice strong { font-size:13px }
  .report-toolbar { padding:17px 16px; gap:10px; flex-wrap:wrap }
  .report-title { font-size:13px }
  .report-period { font-size:12px }
  .report-tabs { padding:0 15px; gap:0; justify-content:space-between }
  .report-tab { font-size:13px; padding:16px 3px 14px }
  .report-panel { padding:23px 16px; min-height:369px }
  .panel-heading h3 { font-size:18px; max-width:420px }
  .panel-heading p { font-size:13px; line-height:1.65 }
  .report-table-wrap { margin:0 -16px; max-width:calc(100% + 32px) }
  table { font-size:13px; min-width:435px }
  th,td { padding:13px 14px }
  thead th { font-size:12px }
  .report-insight { padding:12px 10px; gap:7px }
  .report-insight p { font-size:13px }
  .report-method { font-size:12px }
  .report-footer { font-size:12px; padding:13px 16px }
  .example-afterword { text-align:left; font-size:13px; line-height:1.7 }
  .experience-grid,.approach-grid,.faq-grid,.contact-grid { grid-template-columns:1fr; gap:37px }
  .case-label { margin-top:24px }
  .case-copy .large-copy { font-size:25px }
  .case-copy p { font-size:15px }
  .case-takeaway { gap:20px }
  .approach-intro>p:not(.eyebrow) { max-width:430px }
  .steps { margin-top:0 }
  .steps li:first-child { border-top:1px solid var(--line); padding-top:24px }
  .steps { padding-top:0 }
  .steps li { gap:25px }
  .steps h3 { font-size:20px }
  .steps p { max-width:500px }
  .faq-grid { gap:30px }
  .faq-section h2 br { display:none }
  .faq-section h2 em:before { content:' ' }
  .faq-list summary { font-size:15px }
  .contact-section { padding:58px 0 48px }
  .contact-grid { gap:30px }
  .contact-section h2 { font-size:52px; overflow-wrap:anywhere }
  .contact-copy>p:first-child { font-size:16px; max-width:460px }
  .contact-note { font-size:13px }
  .email-row>a { font-size:14px }
  .footer-inner { flex-wrap:wrap; gap:25px }
  .footer-brand { flex:1 }
  .footer-inner>span { order:3; flex-basis:100%; font-size:12px; padding-top:5px }
  .back-top { font-size:13px }
  .site-footer { padding:30px 0 }
}

@media(max-width:380px) {
  .wrap { padding:0 18px }
  .hero h1 { font-size:45px }
  .hero .eyebrow { font-size:10px; gap:7px }
  .hero-intro { font-size:16px }
  .hero-actions { gap:12px }
  .hero-actions .text-link { font-size:13px }
  .fit-strip { gap:8px }
  .fit-strip p { font-size:12px }
  .hero-visual { padding:0 2px }
  .report-preview { padding:21px 17px 0 }
  .report-brand { font-size:12px }
  .sample-pill { font-size:12px }
  .preview-item strong { font-size:12px }
  .preview-item div>span { font-size:11px }
  .preview-item { gap:9px }
  .preview-index { font-size:13px }
  .preview-bottom { margin:0 -17px; padding:12px 17px; font-size:12px }
  .visual-caption { font-size:10px }
  .visual-footer span { font-size:12px }
  .report-tab { font-size:12px }
  .report-tabs { padding:0 10px }
  .report-panel { padding-left:13px; padding-right:13px }
  .report-table-wrap { margin:0 -13px; max-width:calc(100% + 26px) }
  .panel-heading h3 { font-size:18px }
  .report-period { font-size:12px }
  .report-insight p { font-size:12px }
  .report-footer { font-size:12px }
  .case-takeaway { display:block }
  .case-takeaway p { margin-top:10px }
  .pain { padding-left:36px }
  .pain h3 { font-size:27px }
  .contact-section h2 { font-size:44px }
  .email-row { gap:12px }
  .email-row>a { font-size:13px }
  .copy-button { font-size:11px }
  .eyebrow { font-size:11px }
  .example-heading h2 { font-size:37px }
  h2 { font-size:40px }
}

@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  *,*::before,*::after { transition:none!important; animation:none!important }
  .button-dark:hover { transform:none }
}

@media print {
  .site-header { position:static }
  .menu-toggle,.main-nav,.hero-actions,.copy-button,.back-top { display:none!important }
  .wrap { max-width:none; padding:0 20px }
  .section { padding:30px 0 }
  .hero { padding-top:25px }
  .hero-grid { padding-bottom:30px }
  .example-section { background:white; color:var(--ink) }
  .example-section h2 em { color:var(--green) }
  .example-section .eyebrow,.example-heading>p,.example-afterword { color:var(--body) }
  .example-sidebar { background:#edf0e8; color:var(--ink) }
  .example-sidebar .workspace-label,.example-sidebar p,.example-notice { color:var(--body) }
  .example-workspace { break-inside:avoid }
  .experience-grid,.approach-grid,.contact-grid { gap:30px }
  .site-footer { background:white; color:var(--ink) }
  .footer-inner>span { color:var(--body) }
  a[href^="mailto"] { text-decoration:underline }
  .hero-visual { break-inside:avoid }
  details { break-inside:avoid }
}

/* Mobile scroll hint for the sample tables (shown below 760px only) */
.scroll-hint { display:none; font-size:12px; color:var(--muted); margin:0 0 10px; align-items:center; gap:8px }
.scroll-hint svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5 }
@media (max-width:760px) {
  .js .panel-scrolls .scroll-hint { display:flex }
  html:not(.js) .scroll-hint { display:flex }
  .report-tabs { flex-wrap:wrap; justify-content:flex-start; gap:0 22px }
  .report-tab { padding:14px 0 12px }
  .report-panel { min-height:0 }
}

/* Without JavaScript the three examples stack in full and the tab strip is not shown */
html:not(.js) .report-tabs { display:none }
html:not(.js) .report-panel { display:block }
html:not(.js) .report-panel + .report-panel { border-top:1px solid #dce0d5 }

/* ---------- Two-offering overview (home page) ---------- */
.offers { padding:72px 0 88px; border-bottom:1px solid var(--line) }
.offers-heading { display:grid; grid-template-columns:1fr 2fr; gap:40px; align-items:end; margin-bottom:40px }
.offers-heading h2 { font-size:clamp(34px,3.4vw,46px) }
.offers-heading > p { font-size:15px; color:var(--body); max-width:520px; margin:0 }
.offer-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px }
.offer { border:1px solid var(--ink); background:var(--white); padding:32px 32px 28px; display:flex; flex-direction:column; gap:14px; position:relative }
.offer-index { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--green); font-weight:650; display:flex; justify-content:space-between; align-items:center }
.offer-index svg { width:30px; height:30px; stroke:var(--green); stroke-width:1.5; fill:none }
.offer h3 { font-family:var(--serif); font-size:30px; letter-spacing:-.03em; margin:4px 0 0 }
.offer h3 em { font-style:italic; color:var(--green) }
.offer > p { font-size:15px; color:var(--body); line-height:1.7; margin:0; max-width:460px }
.offer ul { margin:2px 0 8px; padding:0; list-style:none; display:grid; gap:7px; font-size:14px; color:var(--body) }
.offer li { display:flex; gap:10px; align-items:flex-start }
.offer li::before { content:''; width:6px; height:6px; background:var(--green); flex-shrink:0; margin-top:8px }
.offer-actions { margin-top:auto; display:flex; gap:22px; align-items:center; flex-wrap:wrap; padding-top:8px }
.offer-note { font-size:13px; color:var(--muted); margin:0 }

/* ---------- Website AI agent page ---------- */
.hero-agent .hero-visual { padding-top:25px }
.chat-card { position:relative; background:var(--white); border:1px solid #c6cec4; padding:24px 26px 0; box-shadow:0 16px 30px #152d3107 }
.chat-line { display:flex; gap:12px; padding:14px 0; border-top:1px solid #e3e5dc; align-items:flex-start }
.chat-line:first-of-type { border-top:0 }
.chat-who { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); width:84px; flex-shrink:0; padding-top:4px; font-weight:650 }
.chat-line p { font-size:14px; line-height:1.6; margin:0; color:var(--ink) }
.chat-line.is-assistant p { color:var(--body) }
.source-chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--green); background:#e9efdf; padding:3px 8px; margin-top:8px; border-radius:2px }
.source-chip::before { content:''; width:5px; height:5px; background:currentColor; border-radius:50% }
.chat-log-stub { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12px; background:#f2f4ec; margin:0 -26px; padding:12px 26px; border-top:1px solid #e3e5dc; color:var(--body) }
.chat-log-stub strong { font-weight:650; color:var(--ink) }

.demo-toolbar-actions { display:flex; gap:14px; align-items:center }
.button-quiet { background:transparent; border:1px solid var(--ink); color:var(--ink); padding:9px 14px; font-size:13px; font-weight:600; display:inline-flex; align-items:center; gap:10px; min-height:40px }
.button-quiet:hover { background:var(--ink); color:var(--white) }
.demo-grid { display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); }
.demo-questions { padding:24px 22px 24px 28px; border-right:1px solid #e1e4da; background:#fbfbf6 }
.demo-questions h3, .demo-transcript-wrap h3, .demo-log-wrap h3 { font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:650; color:var(--body); margin:0 0 14px }
.demo-question-list { list-style:none; margin:0; padding:0; display:grid; gap:8px }
.demo-question { width:100%; text-align:left; background:var(--white); border:1px solid #d5d8cd; padding:12px 14px; font-size:14px; line-height:1.45; color:var(--ink); display:flex; gap:10px; align-items:flex-start; transition:border-color .15s, background .15s }
.demo-question:hover { border-color:var(--green); color:var(--green) }
.demo-question[aria-pressed="true"] { border-color:var(--green); background:#edf2e6; color:var(--ink); box-shadow:inset 3px 0 0 var(--green) }
.demo-question .q-index { font-size:12px; color:var(--muted); padding-top:2px; flex-shrink:0; width:18px }
.demo-questions-note { font-size:13px; color:var(--muted); margin:16px 0 0; line-height:1.6 }
.demo-transcript-wrap { padding:24px 28px 26px; min-height:300px }
.demo-transcript { outline-offset:6px }
#demo-placeholder { border:1px dashed #c6cec4; padding:26px 22px; color:var(--muted); font-size:14px; line-height:1.65; margin:0 }
#demo-placeholder strong { color:var(--ink); font-weight:600; display:block; margin-bottom:4px }
.demo-answer { margin:0 }
.demo-answer .chat-line:first-of-type { padding-top:0 }
.demo-answer h4 { font-size:15px; font-weight:600; margin:0; line-height:1.5; letter-spacing:0 }
.demo-answer p { font-size:14px; line-height:1.7; color:var(--body); margin:0 0 10px }
.demo-answer p:last-child { margin-bottom:0 }
.demo-answer table { min-width:0; margin:6px 0 12px; white-space:normal }
.demo-answer th, .demo-answer td { padding:9px 10px }
.demo-answer thead th { font-size:12px }
.answer-body { flex:1; min-width:0 }
.handoff-note { background:#f6ebd8; color:#5b3d17; font-size:13px; padding:10px 12px; margin-top:12px; line-height:1.6; border-left:3px solid #b16b20 }
.handoff-note strong { font-weight:650 }
.demo-status { font-size:13px; color:var(--green); min-height:20px; margin:14px 0 0 }
.demo-log-wrap { border-top:1px solid #e1e4da; padding:22px 28px 26px }
.demo-log-wrap .log-intro { font-size:14px; color:var(--muted); margin:-6px 0 14px; line-height:1.6 }
.demo-log-wrap table { min-width:560px }
.log-row-session { background:#edf2e6 }
.log-row-session th { color:var(--green) }
.log-session-tag { display:inline-block; font-size:11px; letter-spacing:.06em; text-transform:uppercase; background:var(--green); color:var(--white); padding:2px 6px; margin-left:8px; border-radius:2px; vertical-align:middle }
.demo-catalogue { margin-top:22px; border:1px solid #4a6060; color:var(--paper) }
.demo-catalogue summary { padding:16px 22px; font-size:15px; color:var(--paper) }
.demo-catalogue summary > span { color:var(--lime) }
.demo-catalogue .catalogue-inner { background:var(--white); color:var(--ink); padding:16px 22px 20px; border-top:1px solid #4a6060 }
.demo-catalogue .catalogue-inner p { font-size:13px; color:var(--muted); margin:0 0 12px }
.demo-catalogue table { min-width:600px; white-space:normal }
.demo-catalogue td:last-child, .demo-catalogue thead th:last-child { padding-right:10px }
html:not(.js) .demo-question-list, html:not(.js) #demo-reset, html:not(.js) #demo-placeholder, html:not(.js) .demo-status { display:none }
html:not(.js) .demo-questions-note { margin-top:0 }
html:not(.js) .demo-answer + .demo-answer { border-top:1px solid #e1e4da; margin-top:20px; padding-top:20px }

.team-view { background:#eeeee5 }
.team-grid { display:grid; grid-template-columns:1fr 1.1fr; gap:80px }
.team-list { list-style:none; margin:0; padding:0 }
.team-list li { border-top:1px solid #c9d0c1; padding:22px 0; display:grid; grid-template-columns:44px 1fr; gap:18px }
.team-list li:last-child { border-bottom:1px solid #c9d0c1 }
.team-list svg { width:30px; height:30px; stroke:var(--green); stroke-width:1.5; fill:none }
.team-list h3 { font-size:19px; letter-spacing:-.02em; margin-bottom:8px }
.team-list p { font-size:15px; color:var(--body); line-height:1.7; margin:0; max-width:460px }

@media(max-width:1100px) {
  .demo-grid { grid-template-columns:minmax(0,260px) minmax(0,1fr) }
  .demo-questions { padding:22px 18px 22px 20px }
  .demo-transcript-wrap, .demo-log-wrap { padding-left:20px; padding-right:20px }
  .team-grid { gap:50px }
}
@media(max-width:900px) {
  .offers-heading { grid-template-columns:1fr; gap:18px }
  .demo-grid { grid-template-columns:1fr }
  .demo-questions { border-right:0; border-bottom:1px solid #e1e4da }
  .team-grid { grid-template-columns:1fr; gap:36px }
}
@media(max-width:760px) {
  .offers { padding:56px 0 64px }
  .offer-grid { grid-template-columns:1fr; gap:22px }
  .offer { padding:24px 20px 22px }
  .offer h3 { font-size:27px }
  .demo-questions { padding:20px 16px }
  .demo-transcript-wrap { padding:20px 16px 22px; min-height:0 }
  .demo-log-wrap { padding:20px 16px 22px }
  .demo-log-wrap .report-table-wrap, .demo-catalogue .report-table-wrap { margin:0 -16px; max-width:calc(100% + 32px) }
  .demo-catalogue summary { padding:14px 16px }
  .demo-catalogue .catalogue-inner { padding:14px 16px 18px }
  .chat-who { width:100%; padding-top:0 }
  .chat-line { flex-direction:column; gap:6px }
  .demo-answer .chat-line { flex-direction:row; gap:12px }
  .demo-answer .chat-who { width:56px }
  .demo-toolbar-actions { width:100%; justify-content:space-between }
}
@media(max-width:380px) {
  .demo-questions, .demo-transcript-wrap, .demo-log-wrap { padding-left:13px; padding-right:13px }
  .demo-log-wrap .report-table-wrap, .demo-catalogue .report-table-wrap { margin:0 -13px; max-width:calc(100% + 26px) }
  .demo-answer .chat-line { flex-direction:column; gap:6px }
  .demo-answer .chat-who { width:100% }
}
@media print {
  .demo-question-list, #demo-reset { display:none !important }
  .demo-answer { display:block !important }
  .demo-catalogue { color:var(--ink) }
}
.footer-nav { display:flex; gap:22px; font-size:13px; flex-wrap:wrap }
.footer-nav a:hover, .footer-nav a[aria-current="page"] { text-decoration:underline; text-underline-offset:5px }
.main-nav a[aria-current="page"] { color:var(--green); text-decoration:underline; text-underline-offset:6px }
@media(max-width:900px) { .footer-nav { font-size:12px } }
@media(max-width:760px) { .footer-nav { flex-basis:100%; order:2 } }
.log-question { display:block; font-size:13px; color:var(--muted); margin-top:3px; white-space:normal; max-width:320px; line-height:1.5 }
#demo-log td:first-of-type strong { font-weight:600; color:var(--ink) }
#demo-log th, #demo-log td { vertical-align:top }
.demo-log-wrap table { min-width:680px }
.demo-transcript { scroll-margin-top:110px }
.hero-agent h1 em { white-space:normal }
.chat-who { font-size:12px }
@media(max-width:760px) { .demo-transcript { scroll-margin-top:92px } .hero-agent h1 { font-size:clamp(40px,11vw,60px) } }
.agent-case { margin-top:18px }
.agent-case p { font-size:15px; color:var(--body); line-height:1.7; max-width:440px; margin:0 0 12px }
.chat-who { flex-shrink:0 }
@media(max-width:1100px) { .hero-agent .chat-line { flex-direction:column; gap:5px } .hero-agent .chat-who { width:auto } }

/* ---------- Reading cards (home page and insights hub) ---------- */
.reading { background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.reading-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:36px; flex-wrap:wrap }
.reading-heading h2 { font-size:clamp(34px,3.4vw,46px) }
.reading-heading > p { font-size:15px; color:var(--body); max-width:460px; margin:0 }
.reading-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px }
.reading-card { border-top:1px solid var(--ink); padding-top:18px; display:flex; flex-direction:column; gap:10px }
.reading-card .card-topic { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--green); font-weight:650 }
.reading-card h3 { font-family:var(--serif); font-size:24px; letter-spacing:-.025em; line-height:1.2; margin:0 }
.reading-card h3 a:hover { color:var(--green); text-decoration:underline; text-underline-offset:5px }
.reading-card p { font-size:15px; color:var(--body); line-height:1.65; margin:0 }
.reading-card .card-meta { font-size:13px; color:var(--muted); margin-top:auto; padding-top:8px }
.reading-more { margin-top:32px }

/* ---------- Insights hub ---------- */
.hub-head { padding:64px 0 40px; border-bottom:1px solid var(--line) }
.hub-head h1 { font-size:clamp(42px,5vw,66px); max-width:700px; margin-bottom:20px }
.hub-head p { font-size:17px; color:var(--body); max-width:600px; line-height:1.65; margin:0 }
.hub-list { list-style:none; margin:0; padding:0 }
.hub-list li { border-bottom:1px solid var(--line); padding:40px 0; display:grid; grid-template-columns:180px minmax(0,1fr); gap:32px; align-items:start }
.hub-list .card-topic { font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--green); font-weight:650; display:block }
.hub-list .card-meta { font-size:13px; color:var(--muted); display:block; margin-top:10px; line-height:1.6 }
.hub-list h2 { font-size:clamp(28px,3vw,38px); margin-bottom:12px }
.hub-list h2 a:hover { color:var(--green); text-decoration:underline; text-underline-offset:6px }
.hub-list p { font-size:16px; color:var(--body); line-height:1.7; max-width:640px; margin:0 0 16px }
.hub-note { font-size:14px; color:var(--muted); margin:28px 0 0; max-width:640px; line-height:1.6 }

/* ---------- Articles ---------- */
.breadcrumbs { padding:18px 0 0; font-size:13px; color:var(--muted) }
.breadcrumbs ol { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center }
.breadcrumbs li + li::before { content:'/'; margin-right:10px; color:#a9b2a8 }
.breadcrumbs a:hover { color:var(--green); text-decoration:underline; text-underline-offset:4px }
.breadcrumbs [aria-current="page"] { color:var(--body) }
.article-head { padding:36px 0 40px; border-bottom:1px solid var(--line) }
.article-head h1 { font-size:clamp(38px,4.6vw,60px); max-width:820px; margin-bottom:22px }
.standfirst { font-size:19px; line-height:1.6; color:var(--body); max-width:680px; margin:0 0 24px }
.article-meta { font-size:14px; color:var(--muted); display:flex; flex-wrap:wrap; gap:6px 14px; margin:0 }
.article-meta span + span::before { content:'·'; margin-right:14px; color:#a9b2a8 }
.article-layout { display:grid; grid-template-columns:230px minmax(0,700px); gap:64px; padding:48px 0 72px; align-items:start }
.contents { position:sticky; top:120px; border-top:1px solid var(--ink); padding-top:14px }
.contents h2 { font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:650; font-family:var(--sans); margin-bottom:12px; color:var(--body) }
.contents ol { list-style:none; margin:0; padding:0; display:grid; gap:2px; counter-reset:contents }
.contents li { counter-increment:contents }
.contents a { display:flex; gap:10px; font-size:14px; color:var(--body); padding:7px 0; line-height:1.4; border-bottom:1px solid #e6e8df }
.contents a::before { content:counter(contents,decimal-leading-zero); color:var(--green); font-size:12px; padding-top:2px; flex-shrink:0 }
.contents a:hover { color:var(--green) }
.contents li:last-child a { border-bottom:0 }
.article-body { font-size:17px; line-height:1.72; color:var(--ink) }
.article-body > p, .article-body li { color:var(--body) }
.article-body p { margin:0 0 20px }
.article-body h2 { font-size:clamp(28px,2.6vw,34px); margin:44px 0 16px; scroll-margin-top:10px; letter-spacing:-.03em }
.article-body h2:first-child { margin-top:0 }
.article-body h3 { font-size:20px; margin:28px 0 10px; letter-spacing:-.02em }
.article-body ul, .article-body ol { margin:0 0 22px; padding-left:22px }
.article-body li { margin-bottom:8px }
.article-body li strong, .article-body p strong { color:var(--ink); font-weight:600 }
.article-body a { color:var(--green); text-decoration:underline; text-underline-offset:4px }
.article-body a:hover { color:var(--ink) }
.article-body table { font-size:14px; white-space:normal }
.article-body th, .article-body td { padding:11px 12px; vertical-align:top }
.article-body thead th { font-size:12px }
.article-body .report-table-wrap { margin:0 0 10px; border:1px solid #e1e4da }
.article-body .table-note, .article-body figcaption { font-size:13px; color:var(--muted); margin:0 0 24px; line-height:1.6 }
.article-body figure { margin:0 0 8px }
.example-box { background:var(--white); border:1px solid var(--ink); padding:22px 24px 6px; margin:8px 0 28px }
.example-box .box-label { display:flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:650; color:var(--green); margin-bottom:12px }
.example-box .box-label::before { content:''; width:6px; height:6px; background:currentColor }
.example-box p, .example-box li { font-size:15px }
.example-box .report-table-wrap { margin-bottom:12px }
.checklist { list-style:none; padding:0; margin:0 0 26px; border-top:1px solid var(--line) }
.checklist li { padding:12px 0 12px 30px; border-bottom:1px solid var(--line); position:relative; margin:0 }
.checklist li::before { content:''; position:absolute; left:0; top:17px; width:14px; height:14px; border:1.5px solid var(--green); }
.pull { border-left:3px solid var(--green); padding:4px 0 4px 18px; margin:0 0 26px; font-family:var(--serif); font-size:21px; line-height:1.45; color:var(--ink); letter-spacing:-.01em }
.article-cta { background:#eeeee5; border:1px solid var(--line); padding:26px 28px; margin:36px 0 0 }
.article-cta .box-label { font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:650; color:var(--green); margin-bottom:10px; display:block }
.article-cta h2 { font-size:26px; margin:0 0 10px }
.article-cta p { font-size:15px; margin:0 0 16px }
.related { padding:48px 0 64px; border-top:1px solid var(--line); background:var(--white) }
.related h2 { font-size:clamp(28px,3vw,36px); margin-bottom:26px }
.related .reading-grid { grid-template-columns:repeat(2,1fr) }
.contact-compact { padding:56px 0 }
.contact-compact h2 { font-size:clamp(38px,4.2vw,56px) }

@media(max-width:1100px) {
  .article-layout { grid-template-columns:200px minmax(0,1fr); gap:44px }
}
@media(max-width:900px) {
  .reading-grid { grid-template-columns:1fr 1fr }
  .hub-list li { grid-template-columns:1fr; gap:10px; padding:32px 0 }
  .article-layout { grid-template-columns:1fr; gap:34px; padding:36px 0 56px }
  .contents { position:static; top:auto }
  .contents ol { grid-template-columns:1fr }
  .related .reading-grid { grid-template-columns:1fr 1fr }
}
@media(max-width:760px) {
  .reading-grid, .related .reading-grid { grid-template-columns:1fr; gap:22px }
  .reading-heading { margin-bottom:26px }
  .hub-head { padding:40px 0 30px }
  .article-head { padding:26px 0 30px }
  .standfirst { font-size:17px }
  .article-body { font-size:16px }
  .article-body h2 { margin-top:36px; scroll-margin-top:8px }
  .article-body .report-table-wrap { margin-left:-16px; margin-right:-16px; max-width:calc(100% + 32px); border-left:0; border-right:0 }
  .article-body table { min-width:520px }
  .example-box { padding:18px 16px 4px }
  .example-box .report-table-wrap { margin-left:-16px; margin-right:-16px; max-width:calc(100% + 32px) }
  .article-cta { padding:22px 18px }
  .pull { font-size:19px }
  .contact-compact { padding:48px 0 }
}
@media(max-width:380px) {
  .article-body .report-table-wrap, .example-box .report-table-wrap { margin-left:-13px; margin-right:-13px; max-width:calc(100% + 26px) }
  .example-box { padding:16px 13px 2px }
}
@media print { .contents { position:static } .article-body a { color:var(--ink) } }

/* ---------- Why us (home page) ---------- */
.why { background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.why-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:80px; align-items:start }
.why-intro > p:not(.eyebrow) { font-size:17px; color:var(--body); line-height:1.7; max-width:480px; margin:24px 0 0 }
.why-intro .hero-actions { margin-top:26px }
.why-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--ink) }
.why-list li { border-bottom:1px solid var(--line); padding:20px 0; display:grid; grid-template-columns:40px 1fr; gap:16px }
.why-list .why-num { font-size:13px; color:var(--green); padding-top:4px }
.why-list h3 { font-size:19px; letter-spacing:-.02em; margin-bottom:6px }
.why-list p { font-size:15px; color:var(--body); line-height:1.65; margin:0 }
.why-when { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:28px }
.why-when > div { border:1px solid var(--line); padding:20px 22px; background:var(--paper) }
.why-when h3 { font-size:14px; letter-spacing:.06em; text-transform:uppercase; font-weight:650; margin-bottom:10px }
.why-when p { font-size:15px; color:var(--body); line-height:1.65; margin:0 }
.why-when .why-fit { color:var(--green); font-size:13px; margin-top:10px; font-weight:600 }

/* ---------- Clients we have worked with ---------- */
.clients { padding:44px 0 48px; border-bottom:1px solid var(--line) }
.clients-inner { display:flex; align-items:center; gap:40px; flex-wrap:wrap }
.clients-label { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:650; flex-shrink:0; margin:0 }
.clients-list { list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:44px; flex-wrap:wrap }
.clients-list a { display:inline-flex; align-items:center; padding:6px 0 }
.clients-list img { height:34px; width:auto; max-width:180px; display:block; object-fit:contain }
.clients-note { font-size:13px; color:var(--muted); margin:14px 0 0; max-width:640px; line-height:1.6 }

/* ---------- Sales Sidekick preparation sheet ---------- */
.prep-grid { display:grid; grid-template-columns:1fr 1fr; }
.prep-block { padding:24px 28px; border-bottom:1px solid #e1e4da; min-width:0 }
.prep-block:nth-child(odd) { border-right:1px solid #e1e4da }
.prep-block h3 { font-size:15px; letter-spacing:0; font-weight:650; display:flex; gap:10px; align-items:center; margin-bottom:14px }
.prep-step { width:24px; height:24px; border:1px solid var(--green); color:var(--green); font-size:12px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0 }
.prep-list { margin:0; display:grid; gap:12px }
.prep-list > div { display:grid; grid-template-columns:82px 1fr; gap:12px }
.prep-list dt { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:650; padding-top:3px }
.prep-list dd { margin:0; font-size:14px; line-height:1.6; color:var(--body) }
.prep-list .source-chip { margin-top:6px; font-size:12px }
.inference-tag { display:inline-block; font-size:12px; color:#5b3d17; background:#f6ebd8; padding:2px 8px; margin-top:6px; border-radius:2px }
.prep-script { margin:0; padding-left:20px; display:grid; gap:10px; font-size:14px; line-height:1.6; color:var(--body) }
.prep-script strong { color:var(--ink); font-weight:600 }
.prep-email { border:1px solid #d5d8cd; background:#fbfbf6; padding:16px 18px; font-size:14px; line-height:1.6; color:var(--body) }
.prep-email p { margin:0 0 10px }
.prep-email p:last-child { margin:0 }
.prep-block .report-method { margin-top:12px }

@media(max-width:1100px) { .why-grid { gap:48px } .prep-block { padding:20px 20px } }
@media(max-width:900px) {
  .why-grid { grid-template-columns:1fr; gap:34px }
  .prep-grid { grid-template-columns:1fr }
  .prep-block:nth-child(odd) { border-right:0 }
  .clients-inner { gap:20px }
}
@media(max-width:760px) {
  .why-when { grid-template-columns:1fr; gap:14px }
  .clients { padding:32px 0 36px }
  .clients-list { gap:28px }
  .clients-list img { height:28px; max-width:150px }
  .prep-block { padding:18px 16px }
  .prep-list > div { grid-template-columns:1fr; gap:4px }
}
@media(max-width:380px) { .clients-list img { height:24px; max-width:130px } }
.offer-grid-3 { grid-template-columns:repeat(3,1fr); gap:24px }
.offer-grid-3 .offer { padding:26px 24px 24px }
.offer-grid-3 .offer h3 { font-size:26px }
@media(max-width:1100px) { .offer-grid-3 { grid-template-columns:1fr 1fr } }
@media(max-width:760px) { .offer-grid-3 { grid-template-columns:1fr } }
/* Article layout: tables inside the body must not widen the grid track; CTA button keeps its own colours */
.article-body { min-width:0 }
.article-layout { grid-template-columns:230px minmax(0,680px) }
.article-body .button, .article-body .button:hover { color:var(--white); text-decoration:none }
@media(max-width:1100px) { .article-layout { grid-template-columns:200px minmax(0,1fr) } }
@media(max-width:900px) { .article-layout { grid-template-columns:minmax(0,1fr) } }
/* Prose measure about 65 to 70 characters; tables and example boxes may use the full column */
.contents { min-width:0 }
.article-body > p, .article-body > ul, .article-body > ol, .article-body > h2, .article-body > h3, .standfirst { max-width:600px }
.article-body .example-box p, .article-body .example-box li { max-width:none }
.article-body .article-cta { max-width:none }

/* ======================================================================
   Visual upgrade: emerald, ink and ivory. Workflow stage, illustrations, video.
   ====================================================================== */
:root { --emerald:#157a5a; --emerald-deep:#0e5a42; --emerald-soft:#dcefe4; --ivory:#f8f6ee; --ink-2:#1c373b; --amber:#b16b20; --amber-soft:#f6ebd8 }

/* Hero atmosphere */
.hero-cinematic { position:relative; overflow:hidden; background:
  radial-gradient(900px 420px at 88% -10%, rgba(21,122,90,.16), transparent 60%),
  radial-gradient(600px 300px at 10% 110%, rgba(220,230,187,.5), transparent 60%),
  var(--paper) }
.hero-cinematic::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image: linear-gradient(rgba(21,45,49,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(21,45,49,.06) 1px, transparent 1px);
  background-size:48px 48px; mask-image:radial-gradient(70% 70% at 70% 40%, #000 30%, transparent 100%); -webkit-mask-image:radial-gradient(70% 70% at 70% 40%, #000 30%, transparent 100%) }
.hero-cinematic .wrap { position:relative }
.hero-cinematic .hero-grid { grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr); gap:56px; align-items:center }
.hero-cinematic h1 { max-width:560px }
.hero-cinematic h1 em { color:var(--emerald) }
.promise-strip { display:flex; flex-wrap:wrap; gap:10px 22px; margin:22px 0 0; padding:0; list-style:none }
.promise-strip li { font-size:13px; color:var(--body); display:flex; align-items:center; gap:8px }
.promise-strip li::before { content:''; width:8px; height:8px; background:var(--emerald); border-radius:50%; flex-shrink:0 }

/* Workflow stage */
.hero-stage { margin:0; position:relative }
.stage-top { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:12px; flex-wrap:wrap }
.stage-tabs { display:flex; gap:6px; flex-wrap:wrap }
.stage-tab { background:transparent; border:1px solid rgba(21,45,49,.25); color:var(--body); font-size:13px; font-weight:600; padding:8px 12px 8px 10px; display:inline-flex; align-items:center; gap:8px; border-radius:2px; transition:background .2s, color .2s, border-color .2s }
.stage-tab .stage-num { font-size:11px; color:var(--emerald); letter-spacing:.06em }
.stage-tab:hover { border-color:var(--emerald); color:var(--emerald) }
.stage-tab[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:var(--white) }
.stage-tab[aria-pressed="true"] .stage-num { color:var(--lime) }
.stage-play { background:var(--white); border:1px solid rgba(21,45,49,.25); color:var(--ink); font-size:13px; font-weight:600; padding:8px 12px; display:inline-flex; align-items:center; gap:8px; border-radius:2px; min-height:38px }
.stage-play:hover { border-color:var(--emerald); color:var(--emerald) }
.stage-play svg { width:14px; height:14px; fill:currentColor }
.stage-play .icon-play { display:none }
.hero-stage.is-paused .stage-play .icon-play { display:block }
.hero-stage.is-paused .stage-play .icon-pause { display:none }
.stage-frame { position:relative; background:var(--white); border:1px solid rgba(21,45,49,.22); box-shadow:0 30px 60px -30px rgba(21,45,49,.35), 0 1px 0 rgba(255,255,255,.6) inset; padding:22px 24px 20px; min-height:440px; overflow:hidden }
.stage-frame::after { content:''; position:absolute; inset:auto 0 0 0; height:3px; background:linear-gradient(90deg, var(--emerald), var(--lime)) }
.stage-progress { display:flex; gap:6px; margin:0 0 16px }
.stage-progress i { flex:1; height:3px; background:#e1e5da; position:relative; overflow:hidden; display:block }
.stage-progress i::after { content:''; position:absolute; inset:0; background:var(--emerald); transform:scaleX(0); transform-origin:left }
.stage-progress i.is-done::after { transform:scaleX(1) }
.stage-progress i.is-live::after { animation:stage-fill 8.2s linear both }
.hero-stage.is-paused .stage-progress i.is-live::after { animation-play-state:paused }
@keyframes stage-fill { from { transform:scaleX(0) } to { transform:scaleX(1) } }
.scene { display:none }
.scene.is-active { display:block }
.scene-label { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:0 0 16px; flex-wrap:wrap }
.scene-title { font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:650; color:var(--body) }
.scene-outcome { margin:16px 0 0; font-size:13px; color:var(--emerald-deep); display:flex; align-items:center; gap:8px; font-weight:600 }
.scene-outcome::before { content:''; width:6px; height:6px; background:var(--emerald); border-radius:50% }
/* Sequenced reveals: base state is the final state so reduced motion and no-JS show everything */
.s { animation:scene-in .55s cubic-bezier(.2,.7,.2,1) both; animation-delay:var(--d, 0s) }
.hero-stage.is-paused .s, .hero-stage.is-paused .type, .hero-stage.is-paused .hl, .hero-stage.is-paused .flow, .hero-stage.is-paused .pulse { animation-play-state:paused }
@keyframes scene-in { from { opacity:0; transform:translateY(10px) } to { opacity:1; transform:none } }
.type { display:inline-block; white-space:nowrap; overflow:hidden; max-width:100%; animation:type-in 1.5s steps(34) both; animation-delay:var(--d, 0s); vertical-align:bottom }
@keyframes type-in { from { width:0 } to { width:100% } }
.hl { animation:hl-in .5s ease both; animation-delay:var(--d, 0s) }
@keyframes hl-in { from { background-color:transparent; box-shadow:none } to { background-color:var(--emerald-soft); box-shadow:inset 3px 0 0 var(--emerald) } }
.flow { stroke-dasharray:6 6; animation:flow 1.2s linear infinite }
@keyframes flow { to { stroke-dashoffset:-24 } }
.pulse { animation:pulse 2.4s ease-in-out infinite }
@keyframes pulse { 0%,100% { opacity:.55 } 50% { opacity:1 } }
/* Scene building blocks */
.scene-grid { display:grid; grid-template-columns:1fr auto 1.15fr; gap:14px; align-items:start }
.mini-card { border:1px solid #dfe3d8; background:var(--ivory); padding:12px 14px; border-radius:3px; min-width:0 }
.mini-card h4 { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:650; margin:0 0 10px; display:flex; justify-content:space-between; gap:8px }
.mini-rows { display:grid; gap:6px; font-size:12px; color:var(--body) }
.mini-rows > div { display:grid; grid-template-columns:1fr auto; gap:10px; padding:5px 6px; border-top:1px solid #e6e8df }
.mini-rows > div:first-child { border-top:0 }
.mini-rows strong { font-weight:600; color:var(--ink) }
.mini-rows .dim { color:var(--muted) }
.mini-link { align-self:center; display:flex; flex-direction:column; align-items:center; gap:6px; padding-top:38px; color:var(--emerald) }
.mini-link svg { width:56px; height:26px; overflow:visible }
.mini-link span { font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:650; color:var(--muted); text-align:center; max-width:80px; line-height:1.4 }
.flag { display:inline-block; font-size:11px; padding:2px 7px; border-radius:2px; background:var(--emerald-soft); color:var(--emerald-deep); font-weight:600; white-space:nowrap }
.flag-amber { background:var(--amber-soft); color:#6b4514 }
.check-line { margin:12px 0 0; font-size:12px; color:var(--emerald-deep); display:flex; gap:8px; align-items:center }
.check-line svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2 }
.bubble { position:relative; background:var(--white); border:1px solid #dfe3d8; border-radius:3px; padding:10px 12px; font-size:13px; color:var(--ink); line-height:1.5 }
.bubble::after { content:''; position:absolute; left:16px; bottom:-7px; width:12px; height:12px; background:var(--white); border-right:1px solid #dfe3d8; border-bottom:1px solid #dfe3d8; transform:rotate(45deg) }
.bubble .who { display:block; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:650; margin-bottom:4px }
.bubble.is-assistant { border-color:rgba(21,122,90,.4); background:#fbfdfb }
.log-line { margin-top:12px; border:1px solid #dfe3d8; background:var(--ivory); padding:8px 10px; font-size:11px; color:var(--body); display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center }
.log-line strong { color:var(--emerald-deep); font-weight:650 }
.script-steps { list-style:none; margin:0; padding:0; display:grid; gap:5px; font-size:12px; color:var(--body) }
.script-steps li { display:grid; grid-template-columns:18px 1fr; gap:8px; padding:5px 0; border-top:1px solid #e6e8df }
.script-steps li:first-child { border-top:0 }
.script-steps b { color:var(--emerald); font-weight:650; font-size:11px }
.script-steps strong { color:var(--ink); font-weight:600 }
.stamp { display:inline-block; margin-top:10px; border:1.5px solid var(--amber); color:#6b4514; font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:650; padding:4px 8px; transform:rotate(-2deg) }
.stage-note { font-size:13px; color:var(--muted); margin:12px 0 0; line-height:1.6 }
.hero-stage .sample-pill { background:var(--emerald-soft); color:var(--emerald-deep); font-size:11px }
/* Static state: reduced motion, or the stage without JavaScript */
.hero-stage.is-static .stage-play, html:not(.js) .stage-play, html:not(.js) .stage-progress, html:not(.js) .stage-tabs { display:none }
html:not(.js) .scene { display:block }
html:not(.js) .scene + .scene { border-top:1px solid #dfe3d8; margin-top:20px; padding-top:20px }
html:not(.js) .stage-frame { min-height:0 }
@media(prefers-reduced-motion:reduce) { .stage-progress i.is-live::after { transform:scaleX(1) } .type { width:auto } }

/* Explainer video */
.explainer { padding:64px 0 72px; background:var(--ink); color:var(--paper); position:relative; overflow:hidden }
.explainer::before { content:''; position:absolute; inset:0; background:radial-gradient(700px 360px at 15% 0%, rgba(21,122,90,.35), transparent 60%); pointer-events:none }
.explainer .wrap { position:relative }
.explainer-grid { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:48px; align-items:start }
.explainer .eyebrow { color:#c0cdb9 }
.explainer h2 { font-size:clamp(32px,3.4vw,44px); margin-bottom:14px }
.explainer h2 em { color:var(--lime) }
.explainer p { color:#c4ceca; font-size:15px; line-height:1.7; max-width:420px }
.video-frame { position:relative; background:#0b1c1f; border:1px solid #3d5457; box-shadow:0 30px 60px -30px rgba(0,0,0,.7) }
.video-frame video { display:block; width:100%; height:auto; aspect-ratio:16/9; background:#0b1c1f }
.video-meta { display:flex; justify-content:space-between; gap:12px; font-size:12px; color:#bccbc5; margin:10px 0 0; flex-wrap:wrap }
.transcript { margin-top:18px; border-top:1px solid #3d5457 }
.transcript summary { color:var(--paper); font-size:14px; padding:14px 0 }
.transcript summary > span { color:var(--lime) }
.transcript ol { margin:0 0 16px; padding-left:20px; color:#c4ceca; font-size:14px; line-height:1.65 }
.transcript li { margin-bottom:8px }
.transcript li b { color:var(--paper); font-weight:600 }

/* Service page illustrations */
.illustration { margin:0; position:relative }
.illustration svg { width:100%; height:auto; display:block }
.illustration .ill-caption { font-size:12px; color:var(--muted); margin:10px 0 0; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap }
.ill-frame { background:var(--white); border:1px solid rgba(21,45,49,.22); box-shadow:0 30px 60px -30px rgba(21,45,49,.35); padding:18px 18px 14px; position:relative }
.ill-frame::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:linear-gradient(90deg, var(--emerald), var(--lime)) }
.ill-title { font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:650; color:var(--body); display:flex; justify-content:space-between; gap:10px; margin-bottom:12px }
.ill-label { font-family:var(--sans); font-size:11px; font-weight:650; letter-spacing:.06em; fill:var(--muted) }
.ill-text { font-family:var(--sans); font-size:12px; fill:var(--ink) }
.ill-text-dim { font-family:var(--sans); font-size:11px; fill:#5d6b68 }
.ill-serif { font-family:var(--serif); font-size:18px; fill:var(--ink); letter-spacing:-.02em }
.ill-em { fill:var(--emerald) }
.ill-panel { fill:var(--ivory); stroke:#d5d8cd; stroke-width:1 }
.ill-panel-white { fill:#fffefa; stroke:#c6cec4; stroke-width:1 }
.ill-node { fill:var(--ink); }
.ill-node-ring { fill:none; stroke:var(--emerald); stroke-width:1.5; opacity:.8 }
.ill-line { stroke:#c5cfc1; stroke-width:1 }
.ill-row { fill:#e4e8dc }
.ill-row-em { fill:var(--emerald-soft) }
.ill-connector { fill:none; stroke:var(--emerald); stroke-width:1.5 }
.ill-flag { fill:var(--emerald-soft) }
.ill-flag-amber { fill:var(--amber-soft) }
.ill-tick { fill:none; stroke:var(--emerald); stroke-width:2; stroke-linecap:round; stroke-linejoin:round }

@media(max-width:1100px) {
  .hero-cinematic .hero-grid { gap:34px }
  .scene-grid { grid-template-columns:1fr auto 1.1fr; gap:10px }
  .mini-link { padding-top:30px }
  .explainer-grid { gap:32px }
}
@media(max-width:900px) {
  .hero-cinematic .hero-grid { grid-template-columns:1fr; gap:36px }
  .hero-stage { max-width:640px }
  .explainer-grid { grid-template-columns:1fr; gap:28px }
  .explainer p { max-width:560px }
}
@media(max-width:760px) {
  .hero-cinematic .hero-grid { gap:30px }
  .stage-frame { padding:16px 14px 16px; min-height:0 }
  .scene-grid { grid-template-columns:1fr; gap:10px }
  .mini-link { flex-direction:row; padding:0; justify-content:flex-start; gap:10px }
  .mini-link svg { width:36px; height:20px; transform:rotate(90deg) }
  .mini-link span { text-align:left; max-width:none }
  .stage-tab { font-size:12px; padding:7px 10px 7px 8px }
  .stage-play { font-size:12px; padding:7px 10px }
  .promise-strip li { font-size:12px }
  .explainer { padding:52px 0 56px }
}
@media(max-width:380px) { .stage-tab .stage-num { display:none } .stage-tab { padding:7px 9px } }
@media print { .stage-tab, .stage-play, .stage-progress { display:none !important } .scene { display:block !important } .explainer { display:none } }

/* Visual bridge artwork */
.bridge { padding:72px 0 64px; background:var(--white); border-bottom:1px solid var(--line) }
.bridge-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:56px; align-items:center }
.bridge-art { margin:0 }
.bridge-art img { display:block; width:100%; height:auto; border-radius:4px; box-shadow:0 40px 70px -35px rgba(21,45,49,.55) }
.bridge-art figcaption { font-size:12px; color:var(--muted); margin-top:10px }
.bridge-copy h2 { font-size:clamp(32px,3.4vw,44px); margin-bottom:16px }
.bridge-copy p:not(.eyebrow) { font-size:16px; color:var(--body); line-height:1.7; max-width:440px; margin:0 }

/* Mascot wayfinding */
.mascot-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; display:inline-block; vertical-align:middle; margin-right:8px; background:var(--ivory); border:1px solid rgba(21,45,49,.12) }
.offer-role { display:inline-flex; align-items:center }
.mascots { padding:64px 0 56px; background:var(--ivory); border-bottom:1px solid var(--line) }
.mascots-head { display:grid; grid-template-columns:1fr 1.2fr; gap:40px; align-items:end; margin-bottom:34px }
.mascots-head h2 { font-size:clamp(30px,3.2vw,42px) }
.mascots-head p:not(.eyebrow) { font-size:15px; color:var(--body); line-height:1.65; max-width:480px; margin:0 }
.mascot-row { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:28px }
.mascot-row a { display:grid; grid-template-columns:96px 1fr; gap:18px; align-items:center; padding:16px 18px; border:1px solid var(--line); background:var(--white); transition:border-color .2s, transform .2s }
.mascot-row a:hover { border-color:var(--emerald); transform:translateY(-2px) }
.mascot-crop { display:block; width:96px; aspect-ratio:1/1; overflow:hidden; border-radius:50%; background:#f3ead8; border:1px solid rgba(21,45,49,.1) }
.mascot-crop img { width:100%; height:100%; object-fit:cover; display:block }
.mascot-role { display:block; font-family:var(--serif); font-size:22px; letter-spacing:-.02em; color:var(--ink); line-height:1.15 }
.mascot-row a:hover .mascot-role { color:var(--emerald) }
.mascot-desc { display:block; font-size:13px; color:var(--muted); margin-top:5px; line-height:1.5 }
@media(max-width:1100px) { .bridge-grid { gap:36px } .mascot-row { gap:16px } .mascot-row a { grid-template-columns:76px 1fr; gap:14px } .mascot-crop { width:76px } .mascot-role { font-size:19px } }
@media(max-width:900px) { .bridge-grid { grid-template-columns:1fr; gap:28px } .mascots-head { grid-template-columns:1fr; gap:14px } .mascot-row { grid-template-columns:1fr } }
@media(max-width:760px) { .bridge { padding:52px 0 48px } .mascots { padding:48px 0 44px } }
@media(prefers-reduced-motion:reduce) { .mascot-row a:hover { transform:none } }

/* Director, legal pages, footer company line */
.initials { display:inline-flex; align-items:center; justify-content:center; width:96px; height:96px; border-radius:50%; background:var(--ink); color:var(--lime); font-family:var(--serif); font-size:34px; letter-spacing:-.02em; flex-shrink:0; border:3px solid var(--emerald-soft); box-shadow:0 20px 40px -20px rgba(21,45,49,.5) }
.director-grid { display:grid; grid-template-columns:260px minmax(0,640px); gap:56px; align-items:start }
.director-card { border:1px solid var(--line); background:var(--white); padding:28px 24px; display:flex; flex-direction:column; gap:8px; position:sticky; top:120px }
.director-card h2 { font-size:28px; margin-top:14px }
.director-role { font-size:14px; color:var(--emerald-deep); font-weight:600; margin:0 }
.director-note { font-size:12px; color:var(--muted); margin:0 }
.director-links { list-style:none; margin:12px 0 0; padding:12px 0 0; border-top:1px solid var(--line); font-size:14px; display:grid; gap:8px }
.director-links a { color:var(--green); text-decoration:underline; text-underline-offset:4px }
.director-bio h2 { font-size:clamp(24px,2.4vw,30px) }
.director-strip { padding:56px 0; background:var(--ivory); border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.director-strip-inner { display:grid; grid-template-columns:96px minmax(0,1fr); gap:28px; align-items:center }
.director-strip h2 { font-size:clamp(28px,3vw,38px); margin-bottom:10px }
.director-strip p:not(.eyebrow) { font-size:15px; color:var(--body); line-height:1.7; max-width:620px; margin:0 0 14px }
.legal-body { max-width:720px }
.legal-body h2 { font-size:clamp(22px,2.2vw,26px); margin-top:34px }
.draft-banner { background:var(--amber-soft); border-left:3px solid var(--amber); padding:12px 16px; font-size:14px; color:#5b3d17; line-height:1.6 }
.draft-banner strong { color:#5b3d17 }
.footer-legal { border-top:1px solid rgba(255,255,255,.12); margin-top:28px; padding-top:22px; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:flex-start }
.footer-legal p { font-family:var(--sans); font-size:12px; color:#bccbc5; line-height:1.6; margin:0; max-width:640px; display:block }
.footer-legal a { color:#d0dacb; text-decoration:underline; text-underline-offset:3px }
.footer-legal-nav { display:flex; gap:18px; font-size:12px; flex-wrap:wrap }
.footer-legal-nav a[aria-current="page"] { text-decoration:underline; text-underline-offset:4px }
@media(max-width:900px) { .director-grid { grid-template-columns:1fr; gap:28px } .director-card { position:static; flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px 18px } .director-card h2 { margin-top:0; width:100% } .director-links { width:100% } .footer-inner p { display:none } }
@media(max-width:760px) { .director-strip-inner { grid-template-columns:1fr; gap:16px } .initials { width:72px; height:72px; font-size:26px } .footer-legal { flex-direction:column; gap:14px } }

/* Simplified home: workflow cards carry the assistants; director sits inside Why us */
.mascot-crop-sm { width:64px; flex-shrink:0 }
.offer-role { display:flex; align-items:center; gap:12px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:650; line-height:1.4 }
.offer-role strong { color:var(--emerald-deep); font-weight:650; letter-spacing:.06em }
.offer-outcome { font-size:14px; color:var(--emerald-deep); font-weight:600; line-height:1.55; margin:0 0 4px; border-left:3px solid var(--emerald); padding-left:10px }
.director-inline { display:grid; grid-template-columns:64px 1fr; gap:16px; align-items:center; margin:26px 0 0; padding:18px 0 0; border-top:1px solid var(--line); font-size:14px; color:var(--body); line-height:1.6 }
.director-inline .initials { width:64px; height:64px; font-size:24px }
.director-inline strong { color:var(--ink); font-weight:650 }
.director-inline a { color:var(--green); text-decoration:underline; text-underline-offset:4px }
.about-bridge { padding-top:0 }
@media(max-width:760px) { .mascot-crop-sm { width:52px } .director-inline { grid-template-columns:52px 1fr } .director-inline .initials { width:52px; height:52px; font-size:20px } }

/* Scene selected while paused: show the complete static scene without waiting for Play */
.scene.is-settled .s, .scene.is-settled .type, .scene.is-settled .hl { animation:none }
.hero-stage.is-paused .scene.is-settled .s { opacity:1; transform:none }
.mini-card .mini-head { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:650; margin:0 0 10px; display:flex; justify-content:space-between; gap:8px }
.legal-body > p, .legal-body > ul, .legal-body > h2 { max-width:600px }
.prep-block, .example-report, .prep-email { min-width:0; overflow-wrap:anywhere }
@media(max-width:760px) { .hero-grid { grid-template-columns:minmax(0,1fr) } .hero-copy { min-width:0 } .hero-copy h1 { overflow-wrap:anywhere } }

/* Spacious hero: oversized headline, floating capability labels, icons instead of characters */
.hero-cinematic { background: radial-gradient(1000px 480px at 92% -20%, rgba(21,122,90,.13), transparent 60%), var(--ivory) }
.hero-cinematic .hero-grid { padding-top:24px; padding-bottom:88px; gap:64px }
.h1-xl { font-size:clamp(50px,5.6vw,84px); line-height:.98; letter-spacing:-.05em; max-width:600px; margin-bottom:30px }
.hero-cinematic .hero-intro { font-size:19px; max-width:460px }
.hero-cinematic .hero-detail { max-width:460px }
.float-tags { list-style:none; margin:0; padding:0; position:absolute; inset:0; pointer-events:none; z-index:2 }
.float-tags li { position:absolute; left:var(--x); top:var(--y); background:var(--white); border:1px solid rgba(21,45,49,.18); color:var(--ink); font-size:12px; font-weight:600; padding:7px 11px; border-radius:999px; box-shadow:0 12px 24px -14px rgba(21,45,49,.5); white-space:nowrap; display:flex; align-items:center; gap:7px; animation:float 6s ease-in-out infinite; animation-delay:calc(var(--y) * .02s) }
.float-tags li::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--emerald) }
@keyframes float { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-6px) } }
.hero-stage { padding:26px 18px 0 }
.offer-icon { width:48px; height:48px; border:1px solid var(--line); background:var(--ivory); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0 }
.offer-icon svg { width:26px; height:26px; stroke:var(--emerald); stroke-width:1.5; fill:none }
.teaser { border:1px solid var(--line); background:var(--ivory); padding:12px 12px 10px; margin:0 0 12px; display:grid; gap:8px }
.teaser-chat { display:grid; grid-template-columns:auto 1fr; gap:8px; font-size:13px; line-height:1.5; color:var(--body); background:var(--white); border:1px solid #e6e8df; padding:8px 10px }
.teaser-chat.is-assistant { border-color:rgba(21,122,90,.35) }
.teaser-who { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:650; padding-top:3px }
.teaser-chat em { display:block; font-style:normal; font-size:11px; color:var(--emerald-deep); margin-top:4px }
.teaser-chips { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:11px }
.teaser-chips span { color:var(--muted); font-weight:650; letter-spacing:.06em; text-transform:uppercase; margin-right:4px }
.teaser-chips i { font-style:normal; background:var(--white); border:1px solid var(--line); padding:3px 8px; border-radius:999px; color:var(--ink) }
.teaser-note { font-size:12px; color:var(--muted); margin:0 }
.teaser-note a { color:var(--green); text-decoration:underline; text-underline-offset:3px }

/* Internal assistant reconstruction */
.app-section { background:var(--ivory) }
.app-mock { margin-top:44px; background:var(--white); border:1px solid rgba(21,45,49,.22); box-shadow:0 40px 70px -35px rgba(21,45,49,.5) }
.app-bar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid #e1e4da; flex-wrap:wrap }
.app-brand { font-size:13px; font-weight:650; display:flex; align-items:center; gap:8px }
.app-brand .tiny-square { color:var(--emerald); width:6px; height:6px }
.app-body { display:grid; grid-template-columns:230px minmax(0,1fr) }
.app-side { background:#fbfbf6; border-right:1px solid #e1e4da; padding:18px 18px 22px }
.app-side-title { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:650; margin:0 0 8px }
.app-nav, .app-files { list-style:none; margin:0 0 20px; padding:0; font-size:13px; color:var(--body) }
.app-nav li { padding:8px 10px; border-radius:3px }
.app-nav li.is-current { background:var(--emerald-soft); color:var(--emerald-deep); font-weight:600 }
.app-files li { padding:6px 0; border-top:1px solid #e6e8df; font-size:12px; overflow-wrap:anywhere }
.app-files li:first-child { border-top:0 }
.app-main { padding:22px 26px 26px; display:grid; gap:22px; min-width:0 }
.app-chat { display:grid; gap:12px }
.app-msg { border:1px solid #e1e4da; padding:12px 14px; font-size:14px; line-height:1.6; color:var(--body); background:var(--white) }
.app-msg.is-assistant { border-color:rgba(21,122,90,.4); background:#fbfdfb }
.app-msg p { margin:0 0 8px }
.app-msg p:last-child { margin:0 }
.app-msg strong { color:var(--ink); font-weight:600 }
.app-who { display:block; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:650; margin-bottom:6px }
.app-sources { list-style:none; margin:10px 0 8px; padding:0; display:grid; gap:4px; font-size:12px; color:var(--emerald-deep) }
.app-sources li { display:flex; gap:8px; align-items:baseline }
.app-sources span { font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:650; background:var(--emerald-soft); padding:1px 6px; border-radius:2px; flex-shrink:0 }
.app-review { font-size:12px; color:var(--muted); border-top:1px dashed #d5d8cd; padding-top:8px }
.app-train-title { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:650; margin:0 0 10px }
.app-cards { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:10px }
.app-cards li { border:1px solid #e1e4da; background:var(--ivory); padding:10px 12px; display:grid; gap:3px; font-size:12px; color:var(--muted); line-height:1.45 }
.app-cards strong { color:var(--ink); font-size:13px; font-weight:650 }
@media(max-width:1100px) { .app-cards { grid-template-columns:repeat(3,1fr) } .float-tags li { font-size:11px } }
@media(max-width:900px) { .app-body { grid-template-columns:1fr } .app-side { border-right:0; border-bottom:1px solid #e1e4da } .float-tags { display:none } .hero-stage { padding:0 } .hero-cinematic .hero-grid { padding-bottom:56px } }
@media(max-width:760px) { .app-cards { grid-template-columns:1fr 1fr } .app-main { padding:16px } .app-side { padding:14px 16px } .h1-xl { font-size:clamp(42px,12vw,60px) } }
@media(max-width:380px) { .app-cards { grid-template-columns:1fr } }
@media(prefers-reduced-motion:reduce) { .float-tags li { animation:none } }

/* Insights art direction */
.hub-editorial { list-style:none; margin:0; padding:0 }
.hub-editorial li { border-top:1px solid var(--ink) }
.hub-editorial li:last-child { border-bottom:1px solid var(--ink) }
.hub-item { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:40px; align-items:center; padding:36px 0; color:inherit }
.hub-editorial li:nth-child(even) .hub-item { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) }
.hub-editorial li:nth-child(even) .hub-art { order:2 }
.hub-art { margin:0; border:1px solid var(--line); background:var(--ivory); overflow:hidden; aspect-ratio:16/9 }
.hub-art img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s ease }
.hub-item:hover .hub-art img { transform:scale(1.02) }
.hub-num { font-family:var(--serif); font-size:15px; color:var(--emerald); display:inline-block; margin-right:12px }
.hub-text h2 { font-size:clamp(26px,2.8vw,36px); margin:10px 0 12px; letter-spacing:-.03em }
.hub-item:hover h2 { color:var(--emerald) }
.hub-text p { font-size:16px; color:var(--body); line-height:1.65; margin:0 0 12px; max-width:520px }
.hub-text .card-meta { font-size:13px; color:var(--muted); display:block }
.article-art { margin:28px 0 0; max-width:900px }
.article-art img { display:block; width:100%; height:auto; border:1px solid var(--line); background:var(--ivory) }
.article-art figcaption { font-size:12px; color:var(--muted); margin-top:8px }
.reading-card.has-art { border-top:0; padding-top:0 }
.card-art { display:block; border:1px solid var(--line); background:var(--ivory); aspect-ratio:16/9; overflow:hidden; margin-bottom:4px }
.card-art img { display:block; width:100%; height:100%; object-fit:cover }
.offer, .teaser { min-width:0 }
.teaser-chat em, .teaser-chat span { overflow-wrap:anywhere }
@media(max-width:900px) { .hub-item, .hub-editorial li:nth-child(even) .hub-item { grid-template-columns:1fr; gap:18px; padding:28px 0 } .hub-editorial li:nth-child(even) .hub-art { order:0 } }
@media(max-width:760px) { .offer-grid-3 { grid-template-columns:minmax(0,1fr) } }
@media(prefers-reduced-motion:reduce) { .hub-item:hover .hub-art img { transform:none } }
/* Floating labels sit clear of the stage outcome line and note */
.float-tags li:nth-child(3) { top:auto; bottom:-14px }
.float-tags li:nth-child(4) { top:auto; bottom:-18px }
.hero-stage .stage-note { margin-top:34px }
@media(max-width:900px) { .hero-stage .stage-note { margin-top:12px } }

/* ======================================================================
   Definitive layout: white nav with mega menu, centred sans hero, white benefits,
   near-black product rows, image-led insights, concise director, dark CTA.
   ====================================================================== */
.site-header { background:rgba(255,254,250,.96); backdrop-filter:saturate(1.2) blur(8px); border-bottom:1px solid #e6e8df }
.header-inner { min-height:78px }
.main-nav { font-size:15px; gap:26px; font-weight:600 }
.main-nav > a, .mega-button { padding:10px 0 }
.mega { position:relative }
.mega-button { background:none; border:0; font:inherit; font-weight:600; color:inherit; display:inline-flex; align-items:center; gap:8px; cursor:pointer; padding:10px 0 }
.mega-button svg { width:12px; height:12px; stroke:currentColor; stroke-width:2; fill:none; transition:transform .2s }
.mega.is-open .mega-button svg { transform:rotate(180deg) }
.mega-button:hover, .mega.is-open .mega-button { color:var(--emerald) }
.mega-panel { position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); width:min(920px, calc(100vw - 48px)); background:var(--white); border:1px solid #e1e4da; box-shadow:0 30px 60px -20px rgba(21,45,49,.35); padding:26px 28px 24px; display:none; grid-template-columns:repeat(3,1fr); gap:28px; z-index:30; text-align:left }
.mega.is-open .mega-panel { display:grid }
.mega-col { min-width:0 }
.mega-head { display:flex; align-items:center; gap:12px; margin-bottom:10px }
.mega-avatar { width:44px; height:44px; border-radius:50%; background:var(--emerald-soft); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0 }
.mega-avatar svg { width:22px; height:22px; stroke:var(--emerald-deep); stroke-width:1.6; fill:none }
.mega-head a { font-weight:700; font-size:16px; color:var(--ink); display:block; line-height:1.3 }
.mega-head a:hover { color:var(--emerald); text-decoration:underline; text-underline-offset:4px }
.mega-head span { display:block; font-size:12px; color:var(--muted); font-weight:500 }
.mega-col p { font-size:13px; color:var(--body); line-height:1.55; margin:0 0 10px; font-weight:400 }
.mega-uses { list-style:none; margin:0; padding:0; display:grid; gap:4px }
.mega-uses a { display:flex; gap:8px; font-size:13px; font-weight:500; color:var(--body); padding:6px 8px; border-radius:3px }
.mega-uses a::before { content:''; width:5px; height:5px; background:var(--emerald); border-radius:50%; margin-top:7px; flex-shrink:0 }
.mega-uses a:hover { background:var(--ivory); color:var(--emerald); text-decoration:none }
.mega-foot { grid-column:1 / -1; border-top:1px solid #e6e8df; padding-top:14px; font-size:13px; color:var(--muted); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-weight:400 }
.mega-foot a { color:var(--emerald); font-weight:600 }
@media(max-width:760px) {
  .mega { width:100%; border-top:1px solid var(--line) }
  .mega-button { width:100%; justify-content:space-between; padding:13px 0 }
  .mega-panel { position:static; transform:none; width:100%; box-shadow:none; border:0; border-left:2px solid var(--emerald-soft); padding:4px 0 10px 14px; grid-template-columns:1fr; gap:18px }
}

/* Hero: centred, short, bold sans, product visual below */
.hero-centred { padding:72px 0 40px; background:var(--white); text-align:center }
.hero-centred .eyebrow { justify-content:center; margin-bottom:22px }
.hero-centred h1 { font-family:var(--sans); font-weight:700; font-size:clamp(40px,5.4vw,72px); letter-spacing:-.035em; line-height:1.02; max-width:880px; margin:0 auto 22px }
.hero-centred h1 em { font-style:normal; color:var(--emerald) }
.hero-centred .hero-lead { font-size:19px; color:var(--body); max-width:620px; margin:0 auto 30px; line-height:1.6 }
.hero-centred .hero-actions { justify-content:center; margin-bottom:56px }
.hero-centred .hero-stage { max-width:1040px; margin:0 auto; text-align:left; padding:0 }
.hero-centred .stage-frame { min-height:420px }
.hero-centred .stage-note { text-align:center; margin-top:14px }
.hero-centred + .clients { border-top:0; background:var(--white) }
.clients { border-bottom:1px solid #e6e8df }

/* Benefits: three open columns with thin rules */
.benefits { padding:96px 0 88px; background:var(--white) }
.benefits h2 { font-family:var(--sans); font-weight:700; font-size:clamp(32px,4vw,52px); letter-spacing:-.035em; line-height:1.05; text-align:center; max-width:760px; margin:0 auto 18px }
.benefits h2 em { font-style:normal; color:var(--emerald) }
.benefits .benefits-lead { text-align:center; font-size:17px; color:var(--body); max-width:600px; margin:0 auto 56px; line-height:1.6 }
.benefit-cols { display:grid; grid-template-columns:repeat(3,1fr) }
.benefit-cols > div { padding:8px 36px 8px 0; border-left:1px solid #dfe3d8; padding-left:32px }
.benefit-cols > div:first-child { border-left:0; padding-left:0 }
.benefit-cols h3 { font-family:var(--sans); font-weight:700; font-size:22px; letter-spacing:-.02em; margin-bottom:12px }
.benefit-cols p { font-size:15px; color:var(--body); line-height:1.65; margin:0 0 12px }
.benefit-cols a { font-size:14px; color:var(--emerald); font-weight:600; text-decoration:underline; text-underline-offset:4px }

/* Trailer on white */
.trailer-light { padding:24px 0 96px; background:var(--white) }
.trailer-light .explainer-grid { align-items:center }
.trailer-light .eyebrow { color:var(--muted) }
.trailer-light h2 { font-family:var(--sans); font-weight:700; font-size:clamp(28px,3.2vw,40px); letter-spacing:-.03em; margin-bottom:12px }
.trailer-light h2 em { font-style:normal; color:var(--emerald) }
.trailer-light p { color:var(--body); font-size:15px; line-height:1.7; max-width:420px }
.trailer-light .transcript { border-top:1px solid #e6e8df }
.trailer-light .transcript summary { color:var(--ink) }
.trailer-light .transcript summary > span { color:var(--emerald) }
.trailer-light .transcript ol { color:var(--body) }
.trailer-light .transcript li b { color:var(--ink) }
.trailer-light .video-meta { color:var(--muted) }

/* Product section: near-black, alternating rows */
.product { background:#0f1f22; color:var(--paper); padding:104px 0 96px }
.product-head { text-align:center; max-width:820px; margin:0 auto 84px }
.product-head .eyebrow { color:#9fb4ab; justify-content:center }
.product-head h2 { font-family:var(--sans); font-weight:700; font-size:clamp(36px,4.6vw,62px); letter-spacing:-.035em; line-height:1.02; margin-bottom:18px }
.product-head h2 em { font-style:normal; color:var(--lime) }
.product-head p { color:#b8c7c0; font-size:17px; line-height:1.65; max-width:620px; margin:0 auto }
.product-row { display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr); gap:64px; align-items:center; padding:56px 0 }
.product-row + .product-row { border-top:1px solid rgba(255,255,255,.08) }
.product-row.is-flipped .product-copy { order:2 }
.product-copy .eyebrow { color:#9fb4ab }
.product-copy h3 { font-family:var(--sans); font-weight:700; font-size:clamp(28px,3.4vw,44px); letter-spacing:-.03em; line-height:1.08; color:var(--white); margin-bottom:16px }
.product-copy p { color:#b8c7c0; font-size:16px; line-height:1.7; margin:0 0 18px; max-width:440px }
.product-copy .text-link { color:var(--lime); border-color:var(--lime); font-size:14px }
.product-copy .text-link:hover { color:var(--white); border-color:var(--white) }
.product-ui { background:var(--white); color:var(--ink); border:1px solid rgba(255,255,255,.14); box-shadow:0 50px 90px -40px rgba(0,0,0,.8); min-width:0 }
.product-ui .app-mock { margin:0; border:0; box-shadow:none }
.product-ui .app-cards { grid-template-columns:repeat(2,1fr) }
.product-ui .scene-static { padding:22px 24px }
.product-ui .scene-static .scene-grid { grid-template-columns:1fr auto 1.15fr }
.product-ui .ui-bar { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 20px; border-bottom:1px solid #e1e4da; font-size:13px; font-weight:650 }
.product-ui .ui-bar .sample-pill { font-weight:500 }
.product-ui .ui-foot { border-top:1px solid #e1e4da; padding:10px 20px; font-size:12px; color:var(--muted); display:flex; gap:8px; align-items:center }

/* Insights on the home page: image-led */
.home-insights { padding:96px 0 80px; background:var(--white) }
.home-insights .reading-heading h2 { font-family:var(--sans); font-weight:700; letter-spacing:-.03em }
.home-insights .reading-heading h2 em { font-style:normal; color:var(--emerald) }
.home-insights .reading-grid { grid-template-columns:repeat(4,1fr); gap:22px }
.home-insights .reading-card h3 { font-family:var(--sans); font-weight:700; font-size:18px; letter-spacing:-.02em; line-height:1.3 }

/* Director: concise */
.director-short { padding:80px 0; background:var(--ivory); border-top:1px solid #e6e8df }
.director-short-inner { display:grid; grid-template-columns:96px minmax(0,640px) minmax(0,1fr); gap:32px; align-items:start }
.director-short h2 { font-family:var(--sans); font-weight:700; font-size:clamp(26px,3vw,38px); letter-spacing:-.03em; margin-bottom:10px }
.director-short h2 em { font-style:normal; color:var(--emerald) }
.director-short p { font-size:15px; color:var(--body); line-height:1.7; margin:0 0 12px }
.director-points { list-style:none; margin:0; padding:0; display:grid; gap:10px; font-size:14px; color:var(--body); border-left:1px solid #dfe3d8; padding-left:24px }
.director-points li strong { color:var(--ink); font-weight:650; display:block }

/* Dark final CTA */
.contact-dark { background:#0f1f22; color:var(--paper); padding:96px 0 }
.contact-dark .eyebrow { color:#9fb4ab }
.contact-dark h2 { font-family:var(--sans); font-weight:700; font-size:clamp(38px,5vw,66px); letter-spacing:-.035em; line-height:1.02 }
.contact-dark h2 em { font-style:normal; color:var(--lime) }
.contact-dark .contact-copy > p:first-child { color:#d8e2dc }
.contact-dark .button-dark { background:var(--lime); color:var(--ink) }
.contact-dark .button-dark:hover { background:var(--white); color:var(--ink) }
.contact-dark .contact-note { color:#9fb4ab }
.contact-dark .email-row > a { color:var(--paper); border-color:#5f7570 }
.contact-dark .copy-button { color:#d8e2dc }
.contact-dark .copy-status { color:var(--lime) }
.contact-dark + .site-footer { border-top:1px solid rgba(255,255,255,.1) }

@media(max-width:1100px) { .benefit-cols > div { padding-right:20px; padding-left:22px } .product-row { gap:40px } .home-insights .reading-grid { grid-template-columns:repeat(2,1fr) } }
@media(max-width:900px) { .product-row, .product-row.is-flipped { grid-template-columns:1fr; gap:28px } .product-row.is-flipped .product-copy { order:0 } .product-ui .scene-static .scene-grid { grid-template-columns:1fr } .director-short-inner { grid-template-columns:96px 1fr } .director-points { grid-column:1 / -1; border-left:0; padding-left:0; padding-top:12px; border-top:1px solid #dfe3d8 } }
@media(max-width:760px) { .hero-centred { padding:44px 0 28px } .hero-centred .hero-actions { margin-bottom:36px } .benefits { padding:64px 0 56px } .benefit-cols { grid-template-columns:1fr; gap:22px } .benefit-cols > div, .benefit-cols > div:first-child { border-left:0; padding:22px 0 0; border-top:1px solid #dfe3d8 } .benefit-cols > div:first-child { border-top:0; padding-top:0 } .product { padding:64px 0 56px } .product-head { margin-bottom:40px } .product-row { padding:36px 0 } .product-ui .app-cards { grid-template-columns:1fr } .home-insights { padding:64px 0 56px } .home-insights .reading-grid { grid-template-columns:1fr } .director-short { padding:56px 0 } .director-short-inner { grid-template-columns:1fr; gap:18px } .contact-dark { padding:64px 0 } }
.static-type { display:inline } .product-ui .is-hl { background-color:var(--emerald-soft); box-shadow:inset 3px 0 0 var(--emerald) } .product-ui .flow { animation:none } .product-ui .scene-grid > div { min-width:0 }
.product-ui .ui-bar { flex-wrap:wrap } .product-ui .ui-bar .sample-pill, .scene-label .sample-pill { white-space:normal } @media(max-width:380px) { .scene-label { gap:8px } .sample-pill { font-size:11px } }
/* Product rows: stack the sample conversation and preparation sheet vertically inside the column */
.product-ui .scene-static .scene-grid, .product-ui .scene-static .scene-grid { grid-template-columns:1fr; gap:12px }
.product-ui .mini-link { flex-direction:row; padding:2px 0; justify-content:flex-start; gap:10px }
.product-ui .mini-link svg { width:36px; height:20px; transform:rotate(90deg) }
.product-ui .mini-link span { text-align:left; max-width:none }
.product-ui .mini-card, .product-ui .bubble { background:var(--white) }
.product-ui .scene-static { padding:20px 22px 22px }

/* Launch layout: split hero like the reference, white CTA button on the dark close, three-card insights */
.hero-split { padding:72px 0 56px; background:var(--white) }
.hero-split-grid { display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:56px; align-items:center }
.hero-split-copy .eyebrow { margin-bottom:22px }
.hero-split-copy h1 { font-family:var(--sans); font-weight:700; font-size:clamp(40px,4.6vw,64px); letter-spacing:-.035em; line-height:1.02; margin:0 0 22px; max-width:560px }
.hero-split-copy h1 em { font-style:normal; color:var(--emerald) }
.hero-split-copy .hero-lead { font-size:19px; color:var(--body); max-width:520px; margin:0 0 30px; line-height:1.6 }
.hero-split-copy .hero-actions { margin-bottom:26px }
.hero-split-visual .hero-stage { padding:0 }
.hero-split-visual .stage-frame { min-height:420px }
.hero-split-visual .stage-note { margin-top:12px }
.contact-dark .button-dark { background:var(--white); color:var(--ink) }
.contact-dark .button-dark:hover { background:var(--lime); color:var(--ink) }
.home-insights .reading-grid-3 { grid-template-columns:repeat(3,1fr); gap:28px }
@media(max-width:1100px) { .hero-split-grid { gap:36px } }
@media(max-width:900px) { .hero-split-grid { grid-template-columns:1fr; gap:36px } .hero-split-visual .hero-stage { max-width:640px } .home-insights .reading-grid-3 { grid-template-columns:1fr 1fr } }
@media(max-width:760px) { .hero-split { padding:44px 0 36px } .home-insights .reading-grid-3 { grid-template-columns:1fr } }

/* ======================================================================
   Mobile friendliness pass (16 September 2026): type floor 12px, target sizes
   ====================================================================== */
.brand-sub { font-size:11px }
.eyebrow, .hero .eyebrow, .stage-tab .stage-num, .q-index, .mini-head, .scene-title, .chat-who, .bubble .who, .app-who, .app-side-title, .app-train-title, .sample-pill, .flag, .stamp, .log-line, .log-line strong, .script-steps b, .prep-list dt, .footer-inner > span, .footer-legal p, .footer-legal-nav, .visual-caption, .workspace-label, .report-period, .report-footer, .pain-tag, .card-topic, .offer-role, .mega-head span, .clients-label, .preview-bottom, .fit-strip > span:first-child, .ill-caption, .stage-note, .example-notice span, .example-notice strong, .demo-questions-note, .teaser-note, .teaser-chips, .teaser-chips i, .teaser-who, .inference-tag, .app-sources, .app-sources span, .app-review, .app-cards li, .app-files li, .breadcrumbs, .table-note, .article-body .table-note, .hub-text .card-meta, .card-meta, .director-note, .video-meta, .check-line, .mini-rows, .scene-outcome, .contact-note, .copy-status, .copy-button, .hero-footnote, .clients-note, .ill-text-dim { font-size:12px }
.eyebrow { font-size:12px }
.hero .eyebrow, .hero-split-copy .eyebrow { font-size:12px }
@media(max-width:380px) { .eyebrow, .hero .eyebrow, .sample-pill { font-size:12px } .stage-tab .stage-num { display:inline } }
.chat-who { width:90px }
/* Footer and email links: at least 24px tall */
.footer-nav a, .footer-legal-nav a, .back-top { display:inline-flex; align-items:center; min-height:32px; padding:4px 0 }
.email-row > a { display:inline-block; padding:6px 0; min-height:32px; line-height:1.4 }
.breadcrumbs a { display:inline-block; padding:4px 0 }
.mega-head a { display:inline-block; padding:3px 0 }
/* Controls on touch screens: at least 44px */
@media(max-width:768px) {
  .stage-tab, .stage-play, .copy-button, .button-quiet, .demo-question, .report-tab, .mega-button, .menu-toggle, .text-link, .contents a, summary { min-height:44px }
  .report-tab { display:inline-flex; align-items:center }
  .text-link { display:inline-flex; align-items:center }
  .contents a { align-items:center }
  .footer-nav a, .footer-legal-nav a, .back-top { min-height:40px }
}
.brand-sub, .footer-brand .brand-sub { font-size:11px }
.hero-stage .sample-pill, .product-ui .sample-pill, .scene-label .sample-pill { font-size:12px }
.mega-head a { padding:4px 0 }
.mini-link span, .stage-tab .stage-num, .offer-role span, .director-inline span { font-size:12px }
.mini-card .mini-head, .mini-card .mini-head span { font-size:12px }
.mega-head a { display:inline-flex; align-items:center; min-height:28px; padding:2px 0 }

/* Stage: complete scenes immediately, gentle crossfade only */
.s { animation:none; opacity:1; transform:none }
.scene.is-active { animation:scene-fade .35s ease both }
@keyframes scene-fade { from { opacity:0 } to { opacity:1 } }
.hero-stage.is-paused .scene.is-active { animation:none }
.type { animation:none; width:auto; white-space:normal }
.hl { animation:none; background-color:var(--emerald-soft); box-shadow:inset 3px 0 0 var(--emerald) }
.stage-frame, .hero-split-visual .stage-frame, .hero-centred .stage-frame { min-height:0 }
.stage-progress i.is-live::after { animation-duration:8.2s }
.scene-grid-2 { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:16px }
.product-ui .scene-static .scene-grid-2 { grid-template-columns:1fr }
.scene .bubble { font-size:14px }
.scene .mini-rows > div { padding:6px 6px }
.mini-rows .is-hl { background-color:var(--emerald-soft); box-shadow:inset 3px 0 0 var(--emerald) }
@media(max-width:760px) { .scene-grid-2 { grid-template-columns:1fr } }
@media(prefers-reduced-motion:reduce) { .scene.is-active { animation:none } }
.log-line { grid-template-columns:auto minmax(0,1fr); grid-template-areas:"ref text" "ref who"; gap:4px 12px; align-items:start }
.log-line strong { grid-area:ref; align-self:center }
.log-line > span:first-of-type { grid-area:text }
.log-line > span:last-of-type { grid-area:who; color:var(--muted) }

/* Illustrative films in the product rows */
.film { margin:0; min-width:0 }
.film-frame { background:#0b1c1f; border:1px solid rgba(255,255,255,.14); box-shadow:0 50px 90px -40px rgba(0,0,0,.8) }
.film-frame video { display:block; width:100%; height:auto; aspect-ratio:16/9; background:#0b1c1f }
.film figcaption { margin-top:12px; color:#b8c7c0; font-size:13px; line-height:1.6 }
.film figcaption p { margin:8px 0 10px; font-size:13px; color:#b8c7c0; max-width:none }
.film figcaption .sample-pill { background:rgba(220,230,187,.14); color:var(--lime) }
.film figcaption .text-link { color:var(--lime); border-color:var(--lime); font-size:14px; min-height:0 }
.film figcaption .text-link:hover { color:var(--white); border-color:var(--white) }
.benefit-cols a { display:inline-block; padding:6px 0; min-height:28px }
.ill-title, .ill-title span, .report-toolbar span, .example-notice span, .workspace-label { font-size:12px }

/* Film controls: labelled sound and pause buttons, one audible film at a time */
.film-controls { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px }
.film-btn { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:8px 14px; border:1px solid rgba(255,255,255,.35); background:rgba(255,255,255,.06); color:var(--paper); font-size:13px; font-weight:600; border-radius:2px }
.film-btn:hover { background:rgba(255,255,255,.14) }
.film-btn[aria-pressed="true"].film-sound { background:var(--lime); color:var(--ink); border-color:var(--lime) }
.film-play .film-icon-play, .film.is-playing .film-play .film-icon-pause { display:inline }
.film-play .film-icon-pause, .film.is-playing .film-play .film-icon-play { display:none }
.film-status { font-size:12px; color:#b8c7c0 }
.film-light .film-btn { border-color:rgba(21,45,49,.3); background:var(--white); color:var(--ink) }
.film-light .film-btn:hover { background:var(--ivory) }
.film-light .film-btn[aria-pressed="true"].film-sound { background:var(--emerald); color:var(--white); border-color:var(--emerald) }
.film-light .film-status, .film-light figcaption, .film-light figcaption p { color:var(--muted) }
.film-light figcaption .sample-pill { background:var(--emerald-soft); color:var(--emerald-deep) }
.film-light .film-frame { border-color:#d5d8cd; box-shadow:0 30px 60px -35px rgba(21,45,49,.5) }
.case-takeaway span { font-size:12px }
@media(prefers-reduced-motion:reduce) { .film-frame video { background:#0b1c1f } }
.film figcaption { margin-top:10px }
.film figcaption .text-link { margin-top:2px }

/* Internal assistant layout, reproduced with neutral branding and sample content */
.gpt-shell { display:grid; grid-template-columns:232px minmax(0,1fr); background:var(--white); color:var(--ink); border:1px solid rgba(21,45,49,.22); box-shadow:0 40px 70px -35px rgba(21,45,49,.5); min-height:520px; text-align:left; font-size:13px }
.product-ui-shell { border:0; box-shadow:none; background:transparent }
.gpt-side { border-right:1px solid #e6e8df; padding:16px 14px 14px; display:flex; flex-direction:column; gap:10px; background:#fbfbf7; min-width:0 }
.gpt-brand { display:flex; align-items:center; gap:10px; padding:2px 4px 10px }
.gpt-mark { width:30px; height:30px; border-radius:7px; background:var(--emerald); color:var(--white); display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0 }
.gpt-brand strong { display:block; font-family:var(--serif); letter-spacing:.06em; font-size:15px; color:var(--emerald-deep); line-height:1.1 }
.gpt-brand span { display:block; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted) }
.gpt-actions { list-style:none; margin:0; padding:0; display:grid; gap:2px }
.gpt-actions li { display:flex; align-items:center; gap:10px; padding:8px 6px; color:var(--emerald-deep); font-weight:600; font-size:14px; border-radius:6px }
.gpt-ico { width:18px; height:18px; border:1.5px solid currentColor; border-radius:4px; display:inline-flex; align-items:center; justify-content:center; font-size:12px; line-height:1 }
.gpt-side-label { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:8px 6px 0; font-weight:650 }
.gpt-history { list-style:none; margin:0; padding:0; display:grid; gap:2px; overflow:hidden }
.gpt-history li { padding:7px 8px; border-radius:6px; color:var(--body); font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.gpt-history li.is-current { background:var(--emerald-soft); color:var(--emerald-deep) }
.gpt-user { margin-top:auto; display:flex; align-items:center; gap:8px; padding:8px 4px 0; font-size:12px; color:var(--muted) }
.gpt-avatar { width:28px; height:28px; border-radius:50%; background:var(--ivory); border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; font-weight:700; color:var(--emerald-deep); font-size:12px }
.gpt-main { display:flex; flex-direction:column; min-width:0 }
.gpt-top { display:flex; justify-content:flex-end; align-items:center; gap:18px; padding:14px 22px 0 }
.gpt-train { color:var(--emerald-deep); font-weight:600; font-size:13px; display:inline-flex; align-items:center; gap:6px }
.gpt-wordmark { font-family:var(--serif); letter-spacing:.06em; font-size:18px; color:var(--emerald-deep) }
.gpt-use { margin:18px 22px 0; border:1px solid rgba(21,122,90,.35); border-radius:12px; padding:10px 12px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; background:#fbfdfb }
.gpt-use-label { font-size:12px; color:var(--muted); margin-right:2px }
.gpt-chip { font-size:12px; border:1px solid rgba(21,122,90,.35); border-radius:999px; padding:4px 10px; background:var(--white); color:var(--body); white-space:nowrap }
.gpt-chip.is-on { background:var(--emerald-soft); color:var(--emerald-deep); border-color:var(--emerald) }
.gpt-thread { padding:18px 22px 10px; display:grid; gap:12px; flex:1 }
.gpt-msg { padding:12px 14px; border-radius:10px; font-size:14px; line-height:1.6; color:var(--body); max-width:720px }
.gpt-msg.is-user { background:var(--ivory); border:1px solid #e6e8df; justify-self:end; max-width:560px }
.gpt-msg.is-assistant { background:var(--white); border:1px solid rgba(21,122,90,.35) }
.gpt-msg p { margin:0 0 8px } .gpt-msg p:last-child { margin:0 } .gpt-msg strong { color:var(--ink); font-weight:600 }
.gpt-sources { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:4px; font-size:12px; color:var(--emerald-deep) }
.gpt-sources li { display:flex; gap:8px; align-items:baseline }
.gpt-sources span { font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:650; background:var(--emerald-soft); padding:1px 6px; border-radius:2px; flex-shrink:0 }
.gpt-composer { margin:0 22px 18px; border:1px solid #d5d8cd; border-radius:12px; padding:12px 14px; display:flex; justify-content:space-between; align-items:center; gap:10px; color:var(--muted); font-size:13px; background:var(--white) }
.gpt-send { width:28px; height:28px; border-radius:50%; background:var(--ink); color:var(--white); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0 }
.hero-film { margin:0 }
.hero-film .film-frame { border-color:#d5d8cd }
@media(max-width:1100px) { .gpt-shell { grid-template-columns:200px minmax(0,1fr) } }
@media(max-width:900px) { .gpt-shell { grid-template-columns:1fr; min-height:0 } .gpt-side { border-right:0; border-bottom:1px solid #e6e8df } .gpt-history { max-height:160px } .gpt-user { margin-top:6px } }
@media(max-width:760px) { .gpt-top, .gpt-thread { padding-left:14px; padding-right:14px } .gpt-use, .gpt-composer { margin-left:14px; margin-right:14px } .gpt-chip { white-space:normal } .gpt-msg.is-user { max-width:none } }
.scene-title { color:var(--ink) }
.film-light figcaption .text-link { color:var(--emerald-deep); border-color:var(--emerald-deep) }
.film-light figcaption .text-link:hover { color:var(--ink); border-color:var(--ink) }
.gpt-mark { font-size:13px } .gpt-brand span { font-size:12px; letter-spacing:.1em } .gpt-side-label { font-size:12px }

/* Three assistants, three cohesive accents */
:root { --wf-internal:#157a5a; --wf-internal-soft:#dcefe4; --wf-website:#1f6f8b; --wf-website-soft:#dcecf1; --wf-sales:#a86413; --wf-sales-soft:#f6ead8 }
.wf-internal { --wf:var(--wf-internal); --wf-soft:var(--wf-internal-soft) }
.wf-website { --wf:var(--wf-website); --wf-soft:var(--wf-website-soft) }
.wf-sales { --wf:var(--wf-sales); --wf-soft:var(--wf-sales-soft) }
.offer { border-top:4px solid var(--wf, var(--ink)) }
.offer-icon { background:var(--wf-soft, var(--ivory)); border-color:transparent }
.offer-icon svg { stroke:var(--wf, var(--emerald)) }
.offer-role strong { color:var(--wf, var(--emerald-deep)) }
.offer h3 em { color:var(--wf, var(--emerald)) }
.offer-facts { margin:0 0 12px; display:grid; gap:6px; border-left:3px solid var(--wf, var(--emerald)); padding-left:12px }
.offer-facts div { display:grid; grid-template-columns:64px 1fr; gap:8px; font-size:14px; line-height:1.5 }
.offer-facts dt { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--wf, var(--emerald-deep)); font-weight:650; padding-top:3px }
.offer-facts dd { margin:0; color:var(--body) }
.offer-facts dd { font-size:14px }
.benefit-cols > div.wf-internal h3::before, .benefit-cols > div.wf-website h3::before, .benefit-cols > div.wf-sales h3::before { content:''; display:block; width:36px; height:4px; background:var(--wf); margin-bottom:14px }
.benefit-cols a { color:var(--wf, var(--emerald)) }
.mega-col.wf-internal .mega-avatar, .mega-col.wf-website .mega-avatar, .mega-col.wf-sales .mega-avatar { background:var(--wf-soft) }
.mega-col .mega-avatar svg { stroke:var(--wf, var(--emerald-deep)) }
.mega-col .mega-uses a::before { background:var(--wf, var(--emerald)) }
.product-row .product-copy .eyebrow { color:#9fb4ab }
.product-row.wf-internal .product-copy .eyebrow::before, .product-row.wf-website .product-copy .eyebrow::before, .product-row.wf-sales .product-copy .eyebrow::before { content:''; display:inline-block; width:10px; height:10px; background:var(--wf); margin-right:10px; border-radius:2px }
body.wf-website .hero h1 em, body.wf-website h2 em, body.wf-website .pain-tag, body.wf-website .step-number, body.wf-website .eyebrow .tiny-square { color:var(--wf-website) }
body.wf-website .button-dark { background:var(--wf-website) } body.wf-website .button-dark:hover { background:var(--ink) }
body.wf-website .pain-top svg, body.wf-website .team-list svg { stroke:var(--wf-website) }
body.wf-sales .hero h1 em, body.wf-sales h2 em, body.wf-sales .pain-tag, body.wf-sales .step-number, body.wf-sales .eyebrow .tiny-square { color:var(--wf-sales) }
body.wf-sales .button-dark { background:var(--wf-sales) } body.wf-sales .button-dark:hover { background:var(--ink) }
body.wf-sales .pain-top svg { stroke:var(--wf-sales) }
body.wf-sales .example-section h2 em { color:#f0c98a }
body.wf-website .example-section h2 em { color:#bfe3ec }
/* Case studies */
.case { border-top:1px solid var(--line) }
.case-grid { display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:48px; align-items:start; margin-top:40px }
.case-body h3 { font-size:18px; margin:26px 0 8px; color:var(--wf, var(--ink)) }
.case-body h3:first-child { margin-top:0 }
.case-body > p, .case-body > ul { max-width:none }
.case-note { font-size:13px; color:var(--muted); border-top:1px solid var(--line); padding-top:12px }
.case-visual { position:sticky; top:110px }
.case-visual .gpt-shell { min-height:0 }
.case-visual-website .product-ui { background:var(--white); color:var(--ink); border:1px solid var(--line); box-shadow:0 30px 60px -35px rgba(21,45,49,.45) }
.case-visual-website .scene-static { padding:20px 22px }
.case-sales-note { border:1px solid var(--line); background:var(--ivory); padding:28px 30px; max-width:720px }
.case-sales-note h2 { font-size:clamp(24px,2.8vw,32px); margin-bottom:10px }
.case-sales-note h2 em { color:var(--wf-sales) }
.case-sales-note p:not(.eyebrow) { font-size:15px; color:var(--body); line-height:1.7; margin:0 }
.case-sales-note a { color:var(--green); text-decoration:underline; text-underline-offset:4px }
@media(max-width:1100px) { .case-grid { gap:30px } }
@media(max-width:900px) { .case-grid { grid-template-columns:1fr } .case-visual { position:static } }
@media(max-width:760px) { .offer-facts div { grid-template-columns:56px 1fr } .case-sales-note { padding:20px 18px } }
/* Data source routes */
.sources-section { background:var(--ivory); border-top:1px solid var(--line) }
.routes { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px }
.route { background:var(--white); border:1px solid var(--line); padding:26px 24px; display:flex; flex-direction:column; gap:10px; min-width:0 }
.route-confirmed { border-top:4px solid var(--emerald) }
.route-scope { border-top:4px solid var(--amber) }
.route-status { font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:650; color:var(--emerald-deep) }
.route-scope .route-status { color:#6b4514 }
.route h3 { font-size:20px; letter-spacing:-.02em; margin:0 }
.route p, .route li { font-size:14px; color:var(--body); line-height:1.6; margin:0 }
.route ul { margin:0; padding-left:18px; display:grid; gap:4px }
.route-need { border-top:1px solid var(--line); padding-top:10px; margin-top:4px }
.route-need strong { color:var(--ink); font-weight:650 }
.route-note { font-size:13px; color:var(--muted) }
@media(max-width:1100px) { .routes { gap:16px } .route { padding:20px 18px } }
@media(max-width:900px) { .routes { grid-template-columns:1fr } }

/* How projects work */
.process-section { padding:88px 0 72px; background:var(--white); border-top:1px solid #e6e8df }
.process-head { max-width:760px; margin-bottom:40px }
.process-head h2 { font-family:var(--sans); font-weight:700; font-size:clamp(32px,4vw,52px); letter-spacing:-.035em; line-height:1.05; margin-bottom:16px }
.process-head h2 em { font-style:normal; color:var(--emerald) }
.process-head p:not(.eyebrow) { font-size:17px; color:var(--body); line-height:1.65; margin:0 }
.process { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--ink) }
.process li { padding:22px 28px 22px 0; border-left:1px solid #dfe3d8; padding-left:24px }
.process li:first-child { border-left:0; padding-left:0 }
.process-num { font-size:12px; color:var(--emerald); font-weight:650; letter-spacing:.08em; display:block; margin-bottom:10px }
.process h3 { font-family:var(--sans); font-weight:700; font-size:18px; letter-spacing:-.02em; margin-bottom:8px }
.process p { font-size:14px; color:var(--body); line-height:1.6; margin:0 }
.director-inline-wide { margin-top:36px; max-width:820px }
.process-line { font-size:14px; color:var(--body); line-height:1.65; border-left:3px solid var(--emerald); padding-left:12px; margin:0 0 18px }
.process-line a { color:var(--green); text-decoration:underline; text-underline-offset:4px }
.approach .process { margin-top:0 }
@media(max-width:1100px) { .process li { padding-right:16px } }
@media(max-width:900px) { .process { grid-template-columns:1fr 1fr } .process li:nth-child(3) { border-left:0; padding-left:0 } .process li:nth-child(n+3) { border-top:1px solid #dfe3d8 } }
@media(max-width:760px) { .process-section { padding:60px 0 52px } .process { grid-template-columns:1fr } .process li, .process li:first-child { border-left:0; padding-left:0; border-top:1px solid #dfe3d8 } .process li:first-child { border-top:0 } }
.section-heading h2 { flex-shrink:1; min-width:0 }
.section-heading > div { flex-wrap:wrap }
.scene.is-active { animation:scene-slide .3s ease both }
@keyframes scene-slide { from { transform:translateY(6px) } to { transform:none } }

/* Customer story */
.story-head-grid { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,0.6fr); gap:40px; align-items:end }
.story-logo { display:flex; flex-direction:column; gap:10px; align-items:flex-start; padding:18px 20px; border:1px solid var(--line); background:var(--white) }
.story-logo img { height:34px; width:auto; max-width:220px }
.story-logo span { font-size:12px; color:var(--muted) }
.story-grid { display:grid; grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr); gap:48px; align-items:start }
.story-body > p, .story-body > ul { max-width:none }
.story-visual { position:sticky; top:110px; min-width:0 }
.story-visual .gpt-shell { min-height:0 }
.story-visual-label, .story-visual-note { font-size:13px; color:var(--muted); margin:0 0 10px }
.story-visual-note { margin:10px 0 0 }
.story-visual-note a { color:var(--green); text-decoration:underline; text-underline-offset:4px }
.story-highlight { padding:72px 0; background:var(--ivory); border-top:1px solid #e6e8df }
.story-highlight-inner { display:grid; grid-template-columns:220px minmax(0,1fr); gap:40px; align-items:center }
.story-highlight-logo { border:1px solid var(--line); background:var(--white); padding:26px 22px; display:flex; align-items:center; justify-content:center }
.story-highlight-logo img { height:34px; width:auto; max-width:170px }
.story-highlight h2 { font-family:var(--sans); font-weight:700; font-size:clamp(26px,3vw,38px); letter-spacing:-.03em; margin-bottom:12px }
.story-highlight h2 em { font-style:normal; color:var(--emerald) }
.story-highlight p:not(.eyebrow) { font-size:15px; color:var(--body); line-height:1.7; max-width:720px; margin:0 0 14px }
.case-visual, .story-visual, .case-grid > *, .story-grid > * { min-width:0 }
.gpt-shell, .gpt-main, .gpt-side { min-width:0; max-width:100% }
.gpt-use { min-width:0 } .gpt-chip { max-width:100%; white-space:normal }
@media(max-width:1100px) { .story-grid, .case-grid { gap:28px } }
@media(max-width:900px) { .story-head-grid { grid-template-columns:1fr; gap:18px } .story-grid { grid-template-columns:1fr } .story-visual { position:static } .story-highlight-inner { grid-template-columns:1fr; gap:20px } .story-highlight-logo { justify-content:flex-start; padding:18px } }
@media(max-width:760px) { .story-highlight { padding:52px 0 } }
.feedback { border-left:3px solid var(--emerald); padding:6px 0 6px 18px; margin:10px 0 22px }
.feedback p { margin:0 0 6px; font-size:17px; color:var(--ink); line-height:1.6; max-width:none }
.feedback .eyebrow { margin-bottom:8px }
.feedback-note { font-size:13px; color:var(--muted) }
:root { --wf-sales:#8a5010; --wf-website:#1b6580 }
.case-visual .flag, .product-ui .flag, .scene .flag { white-space:normal }
.case-body > p, .case-body > ul, .story-body > p, .story-body > ul { max-width:680px }
.gpt-sources span, .app-sources span { font-size:12px }
.director-inline a, .story-visual-note a, .case-note a, .feedback a { display:inline-block; padding:4px 0 }

/* Faithful internal assistant view: icon rail, wordmark panel, search, dataset chips with tooltip */
.gpt-shell { grid-template-columns:56px 224px minmax(0,1fr) }
.gpt-rail { background:#fbfbf7; border-right:1px solid #e6e8df; display:flex; flex-direction:column; align-items:center; gap:14px; padding:14px 0 12px }
.gpt-rail-mark, .gpt-rail-chat { width:34px; height:34px; border-radius:9px; background:var(--emerald); color:var(--white); display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:15px }
.gpt-rail-chat svg { width:18px; height:18px }
.gpt-rail-avatar { margin-top:auto; width:30px; height:30px; border-radius:50%; background:var(--emerald-soft); color:var(--emerald-deep); font-weight:700; font-size:12px; display:inline-flex; align-items:center; justify-content:center }
.gpt-brand { display:block; padding:4px 4px 12px }
.gpt-brand strong { font-size:21px; letter-spacing:.08em }
.gpt-brand span { font-size:12px; letter-spacing:.14em; margin-top:2px }
.gpt-search { border:1px solid #e0e3d9; background:var(--white); border-radius:8px; padding:8px 10px; font-size:13px; color:var(--muted); margin:2px 0 6px }
.gpt-chip { position:relative }
.gpt-chip.has-tip { z-index:3 }
.gpt-tip { position:absolute; left:0; top:calc(100% + 7px); width:max-content; max-width:260px; background:#2b2f2c; color:var(--white); font-size:12px; font-weight:500; line-height:1.4; padding:6px 9px; border-radius:4px; white-space:normal; box-shadow:0 8px 18px rgba(0,0,0,.22); pointer-events:none; text-transform:none; letter-spacing:0 }
.gpt-tip::before { content:''; position:absolute; top:-5px; left:16px; border:5px solid transparent; border-top:0; border-bottom-color:#2b2f2c }
.gpt-use { padding-bottom:12px }
@media(max-width:1100px) { .gpt-shell { grid-template-columns:52px 196px minmax(0,1fr) } }
@media(max-width:900px) { .gpt-shell { grid-template-columns:1fr } .gpt-rail { display:none } .gpt-search { display:none } .gpt-tip { display:none } }
.gpt-shell.is-compact { grid-template-columns:150px minmax(0,1fr); min-height:0; font-size:12px; box-shadow:none; border-color:#dfe3d8 }
.gpt-shell.is-compact .gpt-rail, .gpt-shell.is-compact .gpt-search { display:none }
.gpt-shell.is-compact .gpt-side { padding:12px 10px 10px; gap:6px }
.gpt-shell.is-compact .gpt-brand { padding:2px 2px 8px } .gpt-shell.is-compact .gpt-brand strong { font-size:14px } .gpt-shell.is-compact .gpt-brand span { font-size:12px; letter-spacing:.1em }
.gpt-shell.is-compact .gpt-actions li { font-size:12px; padding:5px 4px }
.gpt-shell.is-compact .gpt-history li { font-size:12px; padding:5px 6px }
.gpt-shell.is-compact .gpt-top { padding:10px 14px 0 } .gpt-shell.is-compact .gpt-wordmark { font-size:14px } .gpt-shell.is-compact .gpt-train { font-size:12px }
.gpt-shell.is-compact .gpt-use { margin:10px 14px 0; padding:8px 10px 8px } .gpt-shell.is-compact .gpt-chip { font-size:12px; padding:3px 8px }
.gpt-shell.is-compact .gpt-thread { padding:12px 14px 8px; gap:8px } .gpt-shell.is-compact .gpt-msg { font-size:13px; padding:10px 12px; line-height:1.5 }
.gpt-shell.is-compact .gpt-composer { margin:0 14px 12px; padding:9px 12px; font-size:12px }
@media(max-width:900px) { .gpt-shell.is-compact { grid-template-columns:1fr } .gpt-shell.is-compact .gpt-side { display:none } }
/* Benefits: audience, task and outcome per assistant */
.wf-kicker { font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:650; color:var(--wf, var(--emerald)); margin:-4px 0 14px }
.wf-facts { margin:0 0 16px; display:grid; gap:9px }
.wf-facts > div { display:grid; grid-template-columns:58px minmax(0,1fr); gap:10px; font-size:14px; line-height:1.55; color:var(--body) }
.wf-facts dt { font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:650; color:var(--muted); padding-top:3px }
.wf-facts dd { margin:0 }
.wf-links { display:flex; flex-wrap:wrap; gap:4px 18px; align-items:center; margin:0 }
.benefit-cols .wf-second { color:var(--body); font-weight:500 }
/* Customer story proof */
.story-proof { list-style:none; margin:16px 0 18px; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px }
.story-proof li { border-top:2px solid var(--emerald); padding-top:10px; font-size:14px; line-height:1.6; color:var(--body) }
.story-proof strong { display:block; color:var(--ink); margin-bottom:4px; font-size:15px }
.story-links { display:flex; gap:22px; flex-wrap:wrap }
@media(max-width:760px) { .story-proof { grid-template-columns:1fr; gap:12px } }
.section-heading p a, .process-head p a, .case-copy p a { color:var(--emerald-deep); text-decoration:underline; text-underline-offset:4px }
@media(max-width:900px) { .gpt-history { max-height:none } .gpt-history li:nth-child(n+5) { display:none } .gpt-shell.is-compact .gpt-history li:nth-child(n+4) { display:none } }
.article-body.case-body, .article-body.story-body { max-width:640px }

/* Sample-data demo: chips, answer pane, source and rule disclosure rows */
.try-it { max-width:860px; margin:0 auto; text-align:left }
.try-context { font-size:15px; color:var(--body); margin:0 0 16px; line-height:1.6 }
.try-context .sample-pill { margin-right:8px }
.try-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px }
.try-chip { font:inherit; font-size:14px; font-weight:600; line-height:1.35; text-align:left; padding:11px 16px; min-height:44px; border:1px solid rgba(21,45,49,.28); border-radius:999px; background:var(--white); color:var(--ink); cursor:pointer }
.try-chip:hover { border-color:var(--emerald) }
.try-chip[aria-pressed="true"] { background:var(--emerald-soft); border-color:var(--emerald); color:var(--emerald-deep) }
.try-chip:focus-visible, .try-pane:focus-visible, .try-src summary:focus-visible { outline:3px solid var(--emerald); outline-offset:2px }
.try-pane { border:1px solid rgba(21,45,49,.22); background:var(--white); padding:20px 22px; box-shadow:0 30px 60px -35px rgba(21,45,49,.4) }
html.js .try-answer[hidden] { display:none }
.try-answer + .try-answer { margin-top:26px; padding-top:22px; border-top:1px solid #e6e8df }
html.js .try-answer + .try-answer { margin-top:0; padding-top:0; border-top:0 }
.try-q { background:var(--ivory); border:1px solid #e6e8df; border-radius:10px; padding:11px 14px; font-size:15px; color:var(--ink); margin:0 0 12px auto; max-width:560px }
.try-a { border:1px solid rgba(21,122,90,.35); border-radius:10px; padding:14px 16px 6px }
.try-a > p { font-size:15px; line-height:1.65; color:var(--body); margin:0 0 12px; max-width:none }
.try-a strong { color:var(--ink); font-weight:600 }
.try-src { border-bottom:0; border-top:1px solid #e6e8df }
.try-src summary { font-size:14px; font-weight:500; padding:12px 0; min-height:44px; justify-content:flex-start; gap:10px; color:var(--emerald-deep) }
.try-src summary::after { content:'+'; margin-left:auto; font-size:20px; font-weight:300; color:var(--emerald) }
.try-src[open] summary::after { content:'\2212' }
.try-tag { font-size:12px; letter-spacing:.08em; text-transform:uppercase; font-weight:650; background:var(--emerald-soft); color:var(--emerald-deep); padding:2px 7px; border-radius:2px; flex-shrink:0 }
.try-src p { font-size:14px; line-height:1.65; margin:0 0 14px; max-width:none }
.try-next { margin:16px 0 0; font-size:15px; color:var(--body) }
.try-next a { color:var(--emerald-deep); font-weight:600; text-decoration:underline; text-underline-offset:4px; display:inline-block; padding:4px 0 }
@media(max-width:760px) { .try-chips { flex-direction:column } .try-chip { border-radius:12px; width:100% } .try-pane { padding:16px 14px } .try-q { max-width:none } }
/* The site rotates the plus sign in open FAQ rows (details[open] summary>span). The tag here is also a span in a summary, so cancel that. */
.try-src summary > .try-tag { transform:none; transition:none; line-height:1.5 }
.try-also { max-width:860px; margin:22px auto 0; font-size:15px; color:var(--body) }
.try-also a { color:var(--emerald-deep); font-weight:600; text-decoration:underline; text-underline-offset:4px; display:inline-block; padding:4px 0 }

/* Productised home page, 19 September 2026 */
.pain-chips { list-style:none; margin:24px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px }
.pain-chips a { display:inline-flex; align-items:center; min-height:44px; padding:8px 16px; border:1px solid rgba(21,45,49,.28); border-radius:999px; font-size:14px; font-weight:600; color:var(--ink); background:var(--white) }
.pain-chips a:hover { border-color:var(--emerald); color:var(--emerald-deep) }
.trust-strip { border-top:1px solid #e6e8df; border-bottom:1px solid #e6e8df; background:var(--ivory); padding:16px 0 }
.trust-strip ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 26px; font-size:13px; color:var(--body) }
.trust-strip li:nth-child(-n+3) { color:var(--ink); font-weight:600 }
.try-home { padding:72px 0; background:var(--white) }
.try-home-head { max-width:860px; margin:0 auto 22px }
.try-home-head h2, .how3 h2, .offers2 h2, .home-faq h2 { font-family:var(--sans); font-weight:700; font-size:clamp(28px,3.4vw,44px); letter-spacing:-.03em; line-height:1.08; margin-bottom:10px }
.try-home-head h2 em, .offers2 h2 em { font-style:normal; color:var(--emerald) }
.try-home-head p { font-size:16px; color:var(--body); margin:0 }
.how3 { padding:72px 0; border-top:1px solid #e6e8df }
.how3-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:56px; align-items:center }
.how3-steps { list-style:none; counter-reset:how; margin:18px 0 0; padding:0; display:grid; gap:0 }
.how3-steps li { counter-increment:how; border-top:1px solid #dfe3d8; padding:16px 0 16px 46px; position:relative }
.how3-steps li::before { content:counter(how); position:absolute; left:0; top:16px; width:30px; height:30px; border-radius:50%; background:var(--emerald); color:var(--white); font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center }
.how3-steps h3 { font-family:var(--sans); font-weight:700; font-size:18px; margin:2px 0 4px }
.how3-steps p { font-size:15px; color:var(--body); line-height:1.6; margin:0 }
.how3-more { margin:14px 0 0; font-size:14px } .how3-more a, .also-strip a, .home-faq details a { color:var(--emerald-deep); text-decoration:underline; text-underline-offset:4px; display:inline-block; padding:4px 0 }
.film-side { margin:12px 0 0 }
.offers2 { padding:72px 0; background:var(--ivory); border-top:1px solid #e6e8df }
.offer-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin-top:26px }
.offer-card { background:var(--white); border:1px solid #dfe3d8; border-top:4px solid var(--wf, var(--emerald)); padding:26px 26px 24px; min-width:0 }
.offer-card h3 { font-family:var(--sans); font-weight:700; font-size:24px; letter-spacing:-.02em; margin-bottom:10px }
.offer-card p { font-size:15px; color:var(--body); line-height:1.65; margin:0 0 12px }
.offer-card ul { margin:0 0 16px; padding-left:18px; font-size:15px; color:var(--body); line-height:1.7 }
.offer-links { display:flex; flex-wrap:wrap; gap:4px 20px }
.offer-links a { color:var(--wf, var(--emerald)); font-weight:600; font-size:15px; text-decoration:underline; text-underline-offset:4px; display:inline-block; padding:6px 0 }
.offer-card .film { margin:14px 0 0 }
.also-strip { margin:22px 0 0; font-size:14px; color:var(--body) } .also-strip strong { color:var(--ink) }
.story-ref { font-size:14px; color:var(--ink); font-weight:600 }
.price-anchor { background:var(--ink); color:var(--paper); padding:26px 0 }
.price-anchor-inner { display:flex; justify-content:space-between; align-items:center; gap:18px 32px; flex-wrap:wrap }
.price-anchor p { margin:0; font-size:16px; line-height:1.6; color:#d8e2dc; max-width:none } .price-anchor strong { color:var(--white) }
.price-anchor .text-link { color:var(--lime); border-color:var(--lime) }
.home-faq { border-top:0 }
.cta-pair { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:6px }
.button-ghost { background:transparent; color:var(--ink); border-color:rgba(21,45,49,.45) }
.button-ghost:hover { background:var(--ink); color:var(--white) }
.contact-dark .button-ghost { color:var(--paper); border-color:#7d918a } .contact-dark .button-ghost:hover { background:var(--paper); color:var(--ink) }
@media(max-width:900px) { .how3-grid { grid-template-columns:1fr; gap:32px } .offer-cards { grid-template-columns:1fr } }
@media(max-width:760px) { .try-home, .how3, .offers2 { padding:52px 0 } .offer-card { padding:20px 18px } .pain-chips a { font-size:14px } }

/* Pricing cards, named case card, intro form, mobile sticky bar */
.price-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch }
.price-card { border:1px solid #dfe3d8; background:var(--white); padding:26px 24px; display:flex; flex-direction:column; min-width:0 }
.price-card.is-featured { border:2px solid var(--emerald); box-shadow:0 30px 60px -40px rgba(21,45,49,.5) }
.price-flag { font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:650; color:var(--emerald-deep); margin:0 0 8px }
.price-card h2 { font-family:var(--sans); font-weight:700; font-size:22px; letter-spacing:-.02em; margin:0 0 6px }
.price-figure { font-family:var(--sans); font-weight:700; font-size:34px; letter-spacing:-.03em; color:var(--ink); margin:0 0 12px; line-height:1.1 }
.price-figure span { font-size:15px; font-weight:500; color:var(--muted); letter-spacing:0 }
.price-card p { font-size:15px; color:var(--body); line-height:1.6; margin:0 0 12px }
.price-card ul { margin:0 0 14px; padding-left:18px; font-size:15px; color:var(--body); line-height:1.65 }
.price-out { margin-top:auto !important; font-size:14px !important; border-top:1px solid #e6e8df; padding-top:12px }
.price-after { margin:22px 0 0; font-size:15px; color:var(--body) }
.price-after a, .form-note a { color:var(--emerald-deep); text-decoration:underline; text-underline-offset:4px; display:inline-block; padding:4px 0 }
.named-card { display:grid; grid-template-columns:240px minmax(0,1fr); gap:28px; align-items:center; border:1px solid #dfe3d8; border-left:4px solid var(--emerald); background:var(--white); padding:24px 26px; color:inherit }
.named-card:hover { border-color:var(--emerald) }
.named-logo { display:flex; align-items:center; justify-content:center; padding:18px; border:1px solid var(--line) } .named-logo img { height:30px; width:auto }
.named-copy { display:grid; gap:6px; font-size:15px; color:var(--body); line-height:1.6 } .named-copy strong { font-size:19px; color:var(--ink); line-height:1.3 } .named-more { color:var(--emerald-deep); font-weight:600 }
.intro-form { display:grid; gap:16px; max-width:560px; margin:8px 0 28px }
.field { display:grid; gap:6px } .field-pair { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.field label { font-size:14px; font-weight:600; color:var(--ink) }
.field input, .field select { font:inherit; font-size:16px; padding:12px 12px; min-height:48px; border:1px solid #9aa79f; border-radius:4px; background:var(--white); color:var(--ink); width:100% }
.field input:focus-visible, .field select:focus-visible { outline:3px solid var(--emerald); outline-offset:1px }
.form-error { color:#9b1c1c; font-size:14px; font-weight:600; margin:0 }
.form-note { font-size:13px; color:var(--muted); margin:0; line-height:1.6 }
.intro-form .button { justify-self:start }
html:not(.js) .intro-form { display:none }
.sticky-cta { display:none }
@media(max-width:900px) { .price-cards { grid-template-columns:1fr } .named-card { grid-template-columns:1fr } }
@media(max-width:760px) {
  .sticky-cta { display:grid; grid-template-columns:1fr 1fr; gap:8px; position:fixed; left:0; right:0; bottom:0; z-index:60; padding:8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); background:var(--white); border-top:1px solid #d5d8cd; box-shadow:0 -10px 24px -18px rgba(21,45,49,.5) }
  .sticky-cta a { display:flex; align-items:center; justify-content:center; min-height:46px; font-size:15px; font-weight:650; border:1px solid rgba(21,45,49,.45); color:var(--ink); background:var(--white) }
  .sticky-cta .sticky-primary { background:var(--ink); color:var(--white); border-color:var(--ink) }
  body { padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px)) }
  .field-pair { grid-template-columns:1fr }
}
@media print { .sticky-cta { display:none } }
.price-card .price-figure { font-size:34px; color:var(--ink); margin:0 0 12px }
.price-card .price-figure span { font-size:15px }
.price-card .price-flag { font-size:12px; margin:0 0 8px }

/* Sitewide pass: two-column mega with an "also" row, slim footer, trust line */
@media(min-width:761px) { .mega-panel { grid-template-columns:repeat(2,minmax(0,1fr)) } }
.mega-also { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:13px; color:var(--muted); font-weight:400; border-top:1px solid #e6e8df; padding-top:12px }
.mega-also-label { font-size:12px; letter-spacing:.1em; text-transform:uppercase; font-weight:650; color:var(--muted) }
.mega-also a { color:var(--ink); font-weight:600; display:inline-flex; align-items:center; min-height:28px; text-decoration:underline; text-underline-offset:4px }
.footer-trust { font-family:var(--sans) !important; font-size:13px !important; color:#e4ece6 !important; font-weight:600; margin:0 0 8px !important }
.footer-trust a { color:var(--lime); text-decoration:underline; text-underline-offset:4px; display:inline-block; padding:4px 0 }

/* Home and pricing pass */
.hero-honest { font-size:14px; color:var(--muted); margin:18px 0 0 }
.try-home-head .pain-chips { margin:0 0 26px }
.film-try { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 16px; border:1px solid rgba(21,45,49,.45); background:var(--ink); color:var(--white); font-size:14px; font-weight:650; margin-top:10px }
.film-try:hover { background:var(--emerald-deep) }
.story-text .wrap { max-width:900px } .story-text h2 { margin-bottom:14px }
.story-outcome { border-left:3px solid var(--emerald); padding-left:14px; color:var(--ink) !important }
.process-about { margin:22px 0 0; font-size:14px } .process-about a, .process a { color:var(--emerald-deep); text-decoration:underline; text-underline-offset:4px; display:inline-block; padding:4px 0 }
.price-cards-2 { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:860px }
.price-upkeep { margin:20px 0 0; max-width:860px; border:1px solid #dfe3d8; background:var(--white); padding:16px 20px; font-size:15px; line-height:1.6; color:var(--body) } .price-upkeep strong { color:var(--ink) }
.price-cta { margin-top:22px; align-items:center; gap:12px 26px }
.demo-film { max-width:860px; margin:48px auto 0 } .demo-film h2 { font-family:var(--sans); font-weight:700; font-size:22px; margin-bottom:14px }
@media(max-width:900px) { .price-cards-2 { grid-template-columns:1fr } }
.hero-split-copy h1 { font-size:clamp(36px,3.9vw,54px); line-height:1.05 }

/* Delta pass: guided demo is the hero visual */
.hero-demo { min-width:0 } .hero-demo .try-it { max-width:none }
.hero-demo-title { font-family:var(--sans); font-weight:700; font-size:15px; letter-spacing:.02em; margin:0 0 12px; display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline; color:var(--ink) }
.hero-demo-title span { font-size:13px; font-weight:500; color:var(--muted) }
.hero-demo .try-context { font-size:14px; margin-bottom:12px } .hero-demo .try-chip { font-size:13px; padding:9px 14px }
.hero-demo .try-pane { padding:16px 16px } .hero-demo .try-a > p, .hero-demo .try-q { font-size:14px }
.hero-chips { margin:22px 0 0 }
.hero-split-grid { align-items:start }
.hero-split-copy .hero-honest { margin:18px 0 0 } .hero-chips { margin:16px 0 0 }