@font-face {
  font-family: Inter;
  src: url('/media/inter-400.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url('/media/inter-500.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: Inter;
  src: url('/media/inter-600.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
:root {
  --ink: #171717;
  --muted: #62625e;
  --line: #e7e6e2;
  --paper: #fcfcfb;
  --surface: #f3f2ef;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 76px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.55 Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { font-weight: 400; }
h1 { font-size: clamp(40px, 4.2vw, 56px); line-height: 1.08; letter-spacing: -.045em; }
h2 { font-size: clamp(29px, 3.1vw, 42px); line-height: 1.16; letter-spacing: -.038em; }
h3 { font-size: 22px; line-height: 1.3; letter-spacing: -.025em; }
p { color: var(--muted); }
small { display: block; color: var(--muted); font-size: 12px; line-height: 1.5; font-weight: 400; }
b, strong { font-weight: 500; }
img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #4c6b85; outline-offset: 4px; }
header, footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1220px;
  margin: auto;
  padding: 18px 20px;
}
header { min-height: 76px; }
.wordmark { font-size: 18px; font-weight: 500; letter-spacing: -.055em; white-space: nowrap; }
.wordmark b { font-weight: 400; }
.wordmark i { font-style: normal; margin-right: 5px; }
nav { display: flex; gap: 28px; font-size: 13px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 17px;
  border: 1px solid #171717;
  border-radius: 99px;
  background: #171717;
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  transition: background .2s, box-shadow .2s;
}
.button:hover { background: #343434; text-decoration: none; }
.button.secondary { color: var(--ink); background: white; border-color: var(--line); }
.button.secondary:hover { background: #f4f3f0; }
.reference-home { max-width: 1180px; margin: auto; }
.product-opening { padding: 58px 0 48px; }
.opening-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-bottom: 36px; }
.opening-grid h1 { margin: 10px 0 26px; }
.opening-grid > p { max-width: 48ch; color: #363632; font-size: 16px; line-height: 1.65; }
.opening-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.preview-shell { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.preview-tabs { display: grid; grid-template-columns: repeat(3, 1fr); padding: 5px; gap: 5px; border-bottom: 1px solid var(--line); }
.preview-tabs button {
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 12px 8px;
  color: #555550;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  font-size: 14px;
}
.preview-tabs [aria-pressed=true] { background: white; color: #171717; border-color: #e4e2de; box-shadow: 0 1px 2px #00000005; }
.preview-tabs i { height: 9px; width: 9px; border-radius: 50%; background: #b98b66; }
.preview-tabs button:nth-child(2) i { background: #7b9b98; }
.preview-tabs button:nth-child(3) i { background: #9b94ac; }
.preview-pane { padding: 32px; min-height: 370px; }
.preview-films { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.preview-films video { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; background: #282a25; }
.preview-films figcaption { font-size: 13px; padding-top: 10px; color: #3f413c; }
.preview-caption { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 24px; font-size: 13px; }
.preview-agent { text-align: center; padding: 22px 20px; }
.preview-agent h3 { margin: 14px auto 24px; max-width: 30ch; font-size: 28px; }
.agent-art { height: 82px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.agent-art i { width: 3px; height: var(--bar); border-radius: 3px; background: #6a8a88; animation: wave 1.7s var(--delay) ease-in-out infinite alternate; }
.platform-nav {
  position: sticky;
  top: 0;
  z-index: 4;
  background: #fcfcfbf5;
  backdrop-filter: blur(14px);
  border-block: 1px solid var(--line);
  padding: 10px 12px;
  gap: 4px;
  justify-content: space-between;
  overflow: auto;
}
.platform-nav a { padding: 8px 12px; border-radius: 7px; white-space: nowrap; color: #666660; transition: background .2s; }
.platform-nav a[aria-current=true] { background: #eeede9; color: #171717; }
.platform-story { border-inline: 1px solid var(--line); }
.platform-chapter {
  display: grid;
  grid-template-columns: .82fr 1.4fr;
  align-items: start;
  gap: 52px;
  padding: 96px 32px;
  border-bottom: 1px solid var(--line);
  min-height: 86svh;
  scroll-margin-top: 62px;
}
.platform-copy { position: sticky; top: 100px; }
.platform-copy h2 { margin: 16px 0; }
.platform-copy p { font-size: 15px; max-width: 37ch; line-height: 1.65; }
.platform-visual { min-width: 0; border: 1px solid #deded7; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 32px #29292006; }
.panel-chrome { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid var(--line); color: #72746c; font-size: 11px; background: #fafaf8; }
.window-dots { font-size: 8px; letter-spacing: 1px; color: #c9ccc3; }
.preview-badge { padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; font-size: 10px; }
.panel-content { padding: 18px; display: grid; gap: 16px; }
.theme-1 { background: #fcfbf9; }
.theme-2 { background: #f8f6f2; }
.theme-3 { background: #f4f7f7; }
.theme-4 { background: #f7f6f9; }
.theme-5 { background: #f5f8f4; }
.theme-6 { background: #faf8f3; }
.theme-7 { background: #f5f7f8; }
#chapter-1 { grid-template-columns: 1fr; gap: 32px; }
#chapter-1 .platform-copy { position: static; display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; align-items: center; }
#chapter-1 .platform-copy small { grid-column: 1/-1; }
#chapter-1 .platform-copy h2 { max-width: 15ch; }
.studio { display: grid; grid-template-columns: .75fr 1.45fr; gap: 30px; padding: 24px; align-items: center; border-radius: 10px; background: #f4f4f1; }
.studio h2, .studio h3 { margin: 10px 0 12px; }
.picks { display: grid; gap: 7px; margin-top: 18px; }
.picks button { display: flex; align-items: center; gap: 11px; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 6px; font-size: 12px; color: #52534d; }
.picks [aria-pressed=true] { background: white; border-color: #deded6; color: #171717; }
.picks img { width: 36px; height: 42px; object-fit: cover; border-radius: 4px; }
.phones { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; max-width: 550px; margin: auto; }
.phone {
  position: relative;
  border: 5px solid #1d1e20;
  outline: 1px solid #a3a5a7;
  border-radius: 30px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 20px #15181814;
  min-width: 0;
}
.phone:nth-child(2) { margin-top: 36px; }
.status { padding: 10px 12px 7px; display: flex; align-items: center; justify-content: space-between; position: relative; font-size: 9px; color: #131313; }
.status span { width: 28%; height: 13px; background: #161618; position: absolute; left: 36%; top: 7px; border-radius: 99px; }
.app { padding: 5px 12px 8px; font-size: 17px; font-weight: 500; border-bottom: 1px solid #eee; }
.instagram { font-family: Georgia, serif; font-style: italic; }
.linkedin { color: #0a66c2; font-size: 16px; }
.account { display: flex; align-items: center; gap: 6px; padding: 8px; font-size: 9px; color: #272727; overflow-wrap: anywhere; }
.account b { display: grid; place-items: center; flex: 0 0 21px; height: 21px; border-radius: 50%; background: #edece6; }
.account span { margin-left: auto; }
.phone video, .phone > img { width: 100%; aspect-ratio: 4/5; object-fit: cover; background: #292b28; }
.actions { padding: 7px 10px 0; font-size: 16px; }
.phone p { font-size: 10px; line-height: 1.5; padding: 8px 10px; color: #333; }
.phone p a { text-decoration: underline; }
.phone-bottom { width: 30%; height: 3px; border-radius: 99px; margin: 5px auto 7px; background: #202123; }
.product-panel, .specimen { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 22px; }
.product-panel h3, .specimen h3 { margin: 7px 0 18px; font-size: 22px; }
.product-data { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; margin: 0; }
.product-data dt { color: #73756d; font-size: 11px; }
.product-data dd { margin: 4px 0 0; font-size: 18px; letter-spacing: -.025em; font-weight: 400; }
.paired, .pipeline { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.account-picker { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0; }
.account-picker button, .workspace-tabs button { border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; background: #fafaf8; font-size: 12px; color: #555; }
.account-picker [aria-pressed=true], .workspace-tabs [aria-pressed=true] { background: #242723; color: #fff; border-color: #242723; }
.account-inspector .product-data { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.account-inspector p { margin-top: 16px; font-size: 11px; }
.account-inspector h3 { font-size: 18px; }
.studio-film video, .production-still video { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 8px; }
figcaption { color: #6e7068; font-size: 11px; padding-top: 8px; }
select, input, textarea { padding: 9px 11px; border: 1px solid #dcded6; border-radius: 7px; background: #fff; color: #292b27; }
#language { margin: 8px 5px; font-size: 13px; }
#script { background: #f6f7f4; padding: 14px; border-radius: 7px; margin: 14px 0; font-size: 14px; color: #3c413a; }
.crm-board { background: #f9f9f7; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.crm-top { padding: 18px; border-bottom: 1px solid var(--line); }
.crm-top b { font-size: 14px; }
.crm-top small { font-size: 10px; margin-top: 3px; }
.crm-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px; }
.crm-columns article { display: grid; align-content: start; gap: 9px; padding: 13px 10px; background: white; border: 1px solid #e5e6df; border-radius: 7px; }
.crm-columns b { font-size: 13px; }
.crm-columns small, .crm-columns span { font-size: 10px; color: #6b6f64; }
.crm-timeline { padding: 14px 18px; border-top: 1px solid var(--line); }
.crm-timeline p { font-size: 12px; padding-top: 7px; line-height: 1.8; }
.chat-bubbles { display: grid; gap: 12px; padding: 22px 0; }
.chat-bubbles p { padding: 12px; background: #f5f5f2; border-radius: 12px 12px 12px 2px; font-size: 13px; max-width: 88%; color: #3c4338; }
.chat-bubbles p:last-child { justify-self: end; background: #e7f0e3; border-radius: 12px 12px 2px 12px; }
.deal-track { display: grid; gap: 10px; padding: 0; list-style: none; counter-reset: step; }
.deal-track li { counter-increment: step; padding: 11px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; }
.deal-track li::before { content: counter(step, decimal-leading-zero); color: #8b9082; margin-right: 16px; font-size: 11px; }
.close { padding: 80px 32px; background: #f3f2ee; border: 1px solid var(--line); }
.close h2 { margin: 16px 0 25px; max-width: 18ch; }
footer { padding-block: 34px; }
footer nav { flex-wrap: wrap; gap: 12px; font-size: 12px; }
.split, .intro, .note, .tiles, .detail-visual { max-width: 1180px; margin: auto; padding: 64px 24px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split .intro { padding: 0; }
.intro h1 { margin: 14px 0 20px; }
.intro p { max-width: 48ch; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tiles > * { border: 1px solid var(--line); border-radius: 10px; padding: 20px; }
.metrics strong { display: block; font-size: 44px; font-weight: 400; margin-top: 12px; }
form.note { max-width: 640px; display: grid; gap: 18px; }
form label { display: grid; gap: 6px; font-size: 13px; }
form .button { justify-self: start; }
textarea { min-height: 110px; }
.note h2 { margin-bottom: 18px; }
.sources a { margin-right: 18px; }
.platform-visual.arrive { animation: enter .65s ease-out both; }
@keyframes enter { from { opacity: .4; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes wave { to { transform: scaleY(.4); } }
@media (max-width: 1240px) {
  .reference-home { margin-inline: 24px; }
}
@media (max-width: 960px) {
  .platform-chapter { grid-template-columns: 1fr; padding: 56px 24px; min-height: auto; gap: 28px; }
  .platform-copy { position: static; }
  .platform-copy h2 { max-width: 22ch; }
  .platform-copy p { max-width: 55ch; }
  #chapter-1 .platform-copy { gap: 20px; }
  .opening-grid { gap: 40px; }
}
@media (max-width: 700px) {
  header { flex-wrap: wrap; padding: 14px 20px; gap: 15px; }
  header nav { order: 3; width: 100%; gap: 22px; }
  .wordmark { font-size: 16px; }
  header .button { padding: 7px 12px; font-size: 12px; }
  .reference-home { margin-inline: 16px; }
  .product-opening { padding-top: 32px; }
  .opening-grid { grid-template-columns: 1fr; gap: 20px; margin-bottom: 28px; }
  .opening-grid h1 { font-size: 43px; }
  .opening-grid > p { font-size: 14px; }
  .preview-pane { padding: 18px; min-height: 300px; }
  .preview-tabs button { font-size: 12px; gap: 5px; }
  .preview-films { grid-template-columns: repeat(3, 180px); gap: 12px; overflow-x: auto; padding-bottom: 8px; }
  .preview-films video { aspect-ratio: 4/5; }
  .preview-caption { flex-wrap: wrap; }
  .platform-nav { padding: 7px 4px; justify-content: flex-start; font-size: 12px; }
  .platform-nav a { padding: 7px 9px; }
  #chapter-1 .platform-copy { grid-template-columns: 1fr; gap: 0; }
  .platform-chapter { padding: 42px 16px; }
  .panel-content { padding: 12px; }
  .studio { grid-template-columns: 1fr; padding: 14px; gap: 20px; }
  .picks { grid-template-columns: 1fr 1fr; gap: 5px; }
  .picks button { font-size: 11px; gap: 6px; }
  .picks img { width: 28px; height: 34px; }
  .phones { gap: 13px; width: 100%; }
  .phone { border-width: 4px; border-radius: 21px; }
  .phone p, .account { font-size: 8px; }
  .status { font-size: 8px; padding-inline: 7px; }
  .app { font-size: 14px; padding-inline: 8px; }
  .phone:nth-child(2) { margin-top: 22px; }
  .paired, .pipeline { grid-template-columns: 1fr; }
  .account-inspector .product-data { grid-template-columns: 1fr 1fr; }
  .product-panel { padding: 17px; }
  .product-panel h3 { font-size: 20px; }
  .crm-columns { grid-template-columns: 1fr; }
  .preview-agent h3 { font-size: 23px; }
  .split, .tiles { grid-template-columns: 1fr; }
  footer { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 700px) {
  .phones {
    grid-template-columns: repeat(2, 228px);
    gap: 22px;
    overflow-x: auto;
    padding: 6px 4px 18px;
    scroll-snap-type: x mandatory;
  }
  .phone { scroll-snap-align: center; border-radius: 28px; }
  .phone:nth-child(2) { margin-top: 0; }
  .phone p, .account { font-size: 10px; }
  .status { font-size: 9px; }
  .app { font-size: 17px; }
}
.actions { display: flex; align-items: center; gap: 10px; }
.actions svg { width: 16px; height: 16px; stroke: #202124; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.actions .save-icon { margin-left: auto; }
.status .device-signal { position: static; display: block; width: 28px; height: 12px; background: none; border-radius: 0; }
.device-signal svg { width: 28px; height: 12px; fill: none; stroke: #202124; stroke-width: 1.5; }
.flow-block, .passport-demo { border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; }
.flow-heading, .passport-heading { padding: 22px 24px 16px; }
.flow-heading h3, .passport-heading h3 { margin: 6px 0; font-size: 22px; }
.flow-heading p, .passport-heading p { font-size: 13px; }
.flow-tabs, .passport-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 0 18px 18px; }
.passport-tabs { grid-template-columns: repeat(3, 1fr); }
.flow-tabs button, .passport-tabs button { min-width: 0; border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 9px 5px; font-size: 12px; color: #53534f; }
.flow-tabs button[aria-pressed=true], .passport-tabs button[aria-pressed=true] { border-color: #313b34; color: #171a17; background: #f2f5f0; }
.flow-stage { padding: 24px; background: #f6f7f5; border-top: 1px solid var(--line); min-height: 230px; }
.flow-stage-head, .passport-sheet-top { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.flow-stage-head span, .passport-sheet-top > span { font-size: 11px; color: #44624b; background: #e7eee7; border: 1px solid #d6e4d7; border-radius: 99px; padding: 3px 9px; white-space: nowrap; }
.flow-stage h3 { margin: 11px 0 7px; }
.flow-stage > p { font-size: 13px; }
.flow-fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px; }
.flow-fields > div { border-top: 1px solid #dfe3dc; padding-top: 10px; }
.flow-fields small, .passport-facts small { font-size: 11px; }
.flow-fields strong, .passport-facts strong { display: block; font-size: 13px; margin-top: 3px; line-height: 1.35; }
.passport-sheet { padding: 22px 24px; border-top: 1px solid var(--line); background: #f7f8f6; }
.passport-sheet-top h3 { margin: 6px 0 16px; }
.passport-photo img { width: 100%; height: 180px; object-fit: cover; border-radius: 6px; }
.passport-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding-top: 18px; }
.passport-facts > div { border-top: 1px solid #dfe3dc; padding-top: 10px; }
.passport-list { display: grid; gap: 0; border-top: 1px solid #dfe3dc; }
.passport-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid #dfe3dc; font-size: 13px; }
.passport-list span { color: #646862; }
@media (max-width: 700px) {
  .flow-tabs { grid-template-columns: repeat(2, 1fr); }
  .flow-fields, .passport-facts { grid-template-columns: repeat(2, 1fr); }
  .flow-heading, .passport-heading, .flow-stage, .passport-sheet { padding-inline: 17px; }
  .passport-tabs { padding-inline: 12px; gap: 4px; }
}

/* Spacious product chapters with one visual focus per section. */
.clean-site { max-width: 1180px; margin: auto; }
.clean-opening { padding: 58px 0 44px; }
.clean-opening-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: end; margin-bottom: 36px; }
.clean-opening h1 { margin-top: 10px; font-size: clamp(42px,4.6vw,64px); line-height: 1.04; font-weight: 400; }
.clean-opening-copy p { margin-bottom: 20px; color: #50514b; font-size: 15px; }
.opening-showcase { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 12px; }
.opening-landscape, .opening-tile { position: relative; min-height: 285px; border-radius: 16px; overflow: hidden; }
.opening-landscape img { width: 100%; height: 100%; object-fit: cover; }
.opening-landscape::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent,#1118); }
.opening-landscape span { position: absolute; left: 20px; bottom: 19px; color: white; font-size: 13px; z-index: 1; }
.opening-tile { display: flex; flex-direction: column; justify-content: space-between; padding: 20px; transition: transform .2s; }
.opening-tile:hover { text-decoration: none; transform: translateY(-3px); }
.opening-tile span { font-size: 13px; }
.tile-creative { background: #efded1; }
.tile-sales { background: #dce8eb; }
.tile-creative img { width: 110px; height: 150px; object-fit: cover; border-radius: 10px; align-self: center; box-shadow: 0 8px 20px #4f302a20; transform: rotate(-7deg); }
.mini-wave { display: flex; align-items: center; justify-content: center; gap: 4px; height: 140px; }
.mini-wave i { width: 3px; height: var(--height); border-radius: 3px; background: #668a93; }
.showcase-credit { font-size: 10px; padding-top: 9px; color: #74746f; }
.clean-site .platform-nav { margin-bottom: 0; border-bottom: 0; }
.color-chapter { padding: 80px 0 20px; scroll-margin-top: 55px; }
.color-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; padding: 0 28px 28px; }
.color-heading h2 { max-width: 17ch; margin-top: 9px; font-size: clamp(31px,3.5vw,46px); }
.color-heading p { max-width: 39ch; font-size: 15px; line-height: 1.65; }
.color-stage { min-width: 0; border-radius: 20px; padding: 44px; overflow: hidden; }
.color-1 .color-stage { background: #f0ded1; }
.color-2 .color-stage { background: #e2e6da; }
.color-3 .color-stage { background: #dce9ee; }
.color-4 .color-stage { background: #e5e0f0; }
.color-5 .color-stage { background: #e0ecdc; }
.color-6 .color-stage { background: #ece5d7; }
.color-7 .color-stage { background: #e0e7eb; }
.color-stage .studio { background: transparent; padding: 0; gap: 40px; }
.color-stage .studio > div:first-child { padding: 15px 0; }
.color-stage .picks { gap: 5px; }
.color-stage .picks button { color: #494039; }
.color-stage .picks [aria-pressed=true] { background: #fffcf6; border-color: #ffffff9c; }
.color-stage .phones { gap: 30px; }
.color-bottom { padding: 17px 28px 0; }
.color-bottom > a { display: inline-flex; font-size: 13px; gap: 9px; padding: 15px 0; }
.quiet-details { border-bottom: 1px solid var(--line); }
.quiet-details summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 17px 0; font-size: 14px; }
.quiet-details summary::-webkit-details-marker { display: none; }
.quiet-details summary > span { font-size: 20px; color: #777; transition: transform .2s; }
.quiet-details[open] summary > span { transform: rotate(45deg); }
.details-body { display: grid; gap: 15px; padding: 0 0 20px; }
.cinema { max-width: 900px; margin: auto; }
.cinema video { width: 100%; aspect-ratio: 16/8; object-fit: cover; border-radius: 12px; box-shadow: 0 14px 32px #27352b18; }
.cinema-caption { display: flex; justify-content: space-between; margin-top: 16px; font-size: 13px; }
.voice-scene { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 48px; }
.voice-visual { position: relative; min-height: 310px; display: grid; place-items: center; }
.voice-halo { width: 260px; height: 260px; border-radius: 50%; border: 1px solid #ffffffa3; position: absolute; box-shadow: 0 0 0 32px #ffffff1c,0 0 0 64px #ffffff12; }
.voice-core { width: 190px; height: 190px; border-radius: 50%; display: flex; justify-content: center; align-items: center; gap: 5px; background: radial-gradient(circle at 34% 23%,#f4fcff,#b0cdd6 50%,#799ba7); box-shadow: 0 18px 40px #38586624,inset 0 0 30px #ffffff60; }
.voice-core i { height: var(--height); width: 3px; background: #446c79; border-radius: 9px; animation: wave 2s var(--delay) ease-in-out infinite alternate; }
.voice-floating { position: absolute; bottom: 4px; font-size: 11px; color: #45606a; }
.voice-scene .product-panel { background: #ffffffda; border: 0; padding: 28px; border-radius: 14px; }
.voice-scene .product-panel h3 { font-size: 26px; }
.workspace-scene { display: grid; grid-template-columns: 150px 1fr; background: #fff; border: 1px solid #ddd9e7; border-radius: 13px; box-shadow: 0 16px 35px #3a285812; overflow: hidden; }
.workspace-sidebar { display: flex; flex-direction: column; gap: 6px; padding: 22px 15px; border-right: 1px solid #eee; background: #fcfbfe; font-size: 12px; }
.workspace-sidebar b { padding: 0 9px 20px; font-size: 15px; }
.workspace-sidebar span { padding: 8px 10px; color: #6a6671; border-radius: 6px; }
.workspace-sidebar .chosen { background: #eeebf5; color: #332942; }
.workspace-sidebar small { margin-top: auto; padding: 25px 8px 0; font-size: 10px; }
.workspace-main { padding: 25px; min-width: 0; }
.workspace-main > .product-data { grid-template-columns: repeat(3,1fr); padding: 0 5px 22px; }
.workspace-main > .product-data dd { font-size: 30px; }
.workspace-main .crm-board { background: #faf9fc; }
.message-scene { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: center; max-width: 900px; margin: auto; }
.message-symbol { width: 150px; height: 150px; border-radius: 36px; background: #f5fff1; box-shadow: 0 18px 40px #375b2720; display: grid; place-items: center; justify-self: center; transform: rotate(-7deg); }
.message-symbol svg { width: 94px; height: 94px; fill: none; stroke: #6d9762; stroke-width: 2; }
.message-scene .product-panel { border: none; box-shadow: 0 10px 30px #375b2712; }
.passport-scene { max-width: 850px; margin: auto; }
.passport-demo { border: none; box-shadow: 0 15px 35px #5e4b2f14; }
.passport-photo img { height: 240px; }
.passport-facts { grid-template-columns: repeat(4,1fr); }
.transaction-scene { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 45px; max-width: 850px; margin: auto; }
.transaction-cover { padding: 35px; text-align: center; background: #f9fbfc; border: 1px solid #fff; border-radius: 15px; box-shadow: 0 15px 35px #293b4512; transform: rotate(-3deg); }
.cover-symbol { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid #abbfc2; color: #718d93; border-radius: 50%; margin: 0 auto 24px; font-size: 25px; }
.transaction-cover h3 { margin: 10px 0 15px; }
.transaction-cover p { font-size: 12px; }
.transaction-scene .product-panel { border: 0; background: #ffffffc9; }
.clean-site .close { margin: 80px 0 0; border: 0; border-radius: 20px; background: #f1f0ed; text-align: center; }
.clean-site .close h2 { margin-inline: auto; }
.split { background: #f4f3f0; border-radius: 20px; margin-top: 30px; }
.detail-visual { display: grid; gap: 24px; }
.detail-visual > .studio { background: #f0ded1; padding: 40px; border-radius: 20px; }
.detail-visual > .flow-block { border-radius: 16px; }
main > .studio { max-width: 1180px; margin: 30px auto; padding: 48px; background: #f0ded1; border-radius: 20px; }
.color-stage.arrive { animation: enter .65s ease-out both; }
@media(max-width:1240px) {
  .clean-site { margin-inline: 24px; }
}
@media(max-width:900px) {
  .clean-opening-copy { gap: 30px; }
  .opening-showcase { grid-template-columns: 1.3fr 1fr 1fr; }
  .opening-landscape,.opening-tile { min-height: 240px; }
  .opening-landscape span { max-width: 20ch; }
  .color-stage { padding: 28px; }
  .color-heading { gap: 30px; }
  .voice-scene,.message-scene { gap: 24px; }
  .voice-halo { width: 210px; height: 210px; }
  .workspace-sidebar { display: none; }
  .workspace-scene { grid-template-columns: 1fr; }
}
@media(max-width:700px) {
  .clean-site { margin-inline: 16px; }
  .clean-opening { padding: 32px 0; }
  .clean-opening-copy { grid-template-columns: 1fr; gap: 20px; }
  .clean-opening h1 { font-size: 43px; }
  .opening-showcase { grid-template-columns: 1fr 1fr; gap: 10px; }
  .opening-landscape { grid-column: 1/-1; min-height: auto; height: 220px; }
  .opening-tile { min-height: 235px; padding: 16px; }
  .tile-creative img { width: 86px; height: 125px; }
  .opening-tile span { font-size: 11px; }
  .mini-wave { gap: 3px; }
  .color-chapter { padding-top: 48px; }
  .color-heading { grid-template-columns: 1fr; gap: 16px; padding: 0 8px 22px; }
  .color-heading h2 { font-size: 32px; max-width: 20ch; }
  .color-heading p { font-size: 14px; }
  .color-stage { padding: 18px; border-radius: 16px; }
  .color-bottom { padding-inline: 8px; }
  .color-stage .studio { gap: 18px; }
  .color-stage .picks { grid-template-columns: 1fr 1fr; }
  .color-stage .phones { gap: 18px; }
  .voice-scene,.message-scene,.transaction-scene { grid-template-columns: 1fr; gap: 25px; }
  .voice-visual { min-height: 250px; }
  .voice-core { width: 160px; height: 160px; }
  .voice-scene .product-panel { padding: 18px; }
  .workspace-main { padding: 14px; }
  .workspace-main > .product-data dd { font-size: 25px; }
  .message-symbol { width: 100px; height: 100px; border-radius: 24px; margin: 12px 0; }
  .message-symbol svg { width: 65px; height: 65px; }
  .passport-photo img { height: 170px; }
  .passport-facts { grid-template-columns: 1fr 1fr; }
  .transaction-cover { transform: none; }
  .cinema video { aspect-ratio: 4/3; }
  .cinema-caption { gap: 15px; }
  .quiet-details summary { font-size: 13px; }
  .clean-site .close { padding: 50px 22px; margin-top: 45px; }
  main > .studio { padding: 24px; margin-inline: 16px; }
}
.product-page { padding-top: 55px; }
.product-page h1 { font-size: clamp(36px,4vw,54px); margin-top: 10px; max-width: 18ch; }
.color-stage .passport-heading { padding-bottom: 14px; }
.color-stage .passport-heading h3,
.color-stage .passport-heading p { display: none; }
@media(max-width:700px) {
  .product-page { padding-top: 30px; }
  .product-page h1 { font-size: 36px; }
}

.again-showcase { position: relative; isolation: isolate; min-height: 380px; display: grid; align-items: end; overflow: hidden; border-radius: 13px; background: #161717; color: #fff; }
.again-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.again-showcase::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#101111f0,#10111148 75%); }
.again-content { padding: clamp(24px,5vw,56px); }
.again-content img { height: auto; filter: invert(1); }
.again-content small { margin-top: 12px; color: #e4e5e1; }
.again-content h3 { margin: 20px 0; max-width: 14ch; font-size: clamp(30px,4vw,54px); }
.again-showcase figcaption { position: absolute; right: 15px; bottom: 13px; color: #eee; }
.brand-visit { display: inline-block; border: 1px solid currentColor; border-radius: 99px; padding: 7px 13px; font-size: 12px; }
.provider-scene { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(20px,5vw,64px); align-items: center; }
.provider-copy h3 { margin: 12px 0; font-size: clamp(28px,3.5vw,44px); max-width: 15ch; }
.provider-copy p { margin-bottom: 20px; max-width: 35ch; color: #344739; }
.aisensy-logo { display: block; margin-top: 16px; border-radius: 6px; }
.wa-demo { background: #f5f1e9; border: 1px solid #cdd9ca; border-radius: 16px; overflow: hidden; box-shadow: 0 14px 32px #24392a16; }
.wa-header { display: flex; align-items: center; gap: 11px; padding: 15px; background: #125b48; color: #fff; }
.wa-header small { color: #d8eee4; }
.wa-avatar { border-radius: 50%; background: #dceee0; color: #174734; width: 37px; height: 37px; display: grid; place-items: center; }
.wa-thread { display: grid; gap: 8px; padding: 16px; }
.wa-thread p { border-radius: 9px; padding: 9px 12px; font-size: 13px; color: #22332a; max-width: 90%; }
.wa-incoming { background: white; justify-self: start; }
.wa-outgoing, .wa-document { background: #dff3d8; justify-self: end; }
.wa-document { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-radius: 9px; font-size: 13px; }
.wa-document img { width: 34px; height: 34px; }
.wa-document small { font-size: 10px; }
.wa-choices { padding: 0 16px 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.wa-choices button { color: #14563e; border: 1px solid #a0bda8; background: white; border-radius: 99px; padding: 7px 12px; font-size: 12px; }
#wa-reply:empty { display: none; }
#wa-reply { display: grid; gap: 8px; }
.provider-resource { margin: 0; }
.provider-resource img { width: min(100%,720px); border: 1px solid var(--line); border-radius: 12px; }
.provider-resource a, .property-share a { text-decoration: underline; text-underline-offset: 3px; }
.property-brand { display: flex; gap: 11px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.property-brand img { border-radius: 11px; }
.property-brand a { margin-left: auto; }
.property-share { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 15px; font-size: 12px; }
@media(max-width:700px) {
  .provider-scene { grid-template-columns: 1fr; }
  .provider-copy h3 { max-width: 23ch; }
  .property-brand a { margin-left: 0; }
  .again-showcase { min-height: 320px; }
  .again-showcase figcaption { right: 12px; bottom: 7px; }
}

.brand-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 12px; }

.wordmark { display: inline-flex; align-items: center; gap: 7px; }
.wordmark img { flex: none; border-radius: 5px; }

.phone-gallery { min-width: 0; }
.phone-platforms { display: none; }
@media (max-width: 700px) {
  header, footer { padding-inline: 20px; }
  header { row-gap: 8px; padding-block: 12px 6px; border-bottom: 1px solid var(--line); }
  header nav { gap: 20px; }
  header nav a { display: inline-flex; align-items: center; min-height: 44px; }
  header .button, .opening-actions .button { min-height: 44px; }
  .clean-site { margin-inline: 20px; }
  .clean-opening { padding: 32px 0 24px; }
  .clean-opening-copy { gap: 16px; margin-bottom: 24px; }
  .clean-opening h1 { font-size: clamp(34px, 10.5vw, 46px); line-height: 1.08; }
  .clean-opening-copy p { margin-bottom: 16px; }
  .opening-actions { gap: 8px; }
  .opening-showcase { gap: 12px; }
  .opening-landscape { height: auto; aspect-ratio: 16/10; }
  .opening-landscape span { left: 16px; bottom: 14px; max-width: none; }
  .opening-tile { min-height: 190px; padding: 14px; }
  .tile-creative img { height: 104px; width: 74px; }
  .mini-wave { height: 90px; }
  .clean-site .platform-nav { margin-inline: -20px; padding: 4px 16px; }
  .platform-nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .color-chapter { padding-top: 36px; }
  .color-heading { gap: 10px; padding: 0 0 18px; }
  .color-heading h2 { margin-top: 7px; }
  .color-stage { padding: 16px; }
  .color-bottom { padding: 10px 0 0; }
  .color-bottom > a { min-height: 44px; align-items: center; padding: 9px 0; }
  .quiet-details summary { min-height: 48px; padding: 10px 0; }
  .color-stage .studio > div:first-child { padding: 0; }
  .color-stage .studio { gap: 20px; }
  .picks { margin-top: 12px; gap: 6px; }
  .picks button { min-height: 44px; }
  .phone-controls-ready .phone-platforms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    margin: 0 auto 16px;
    max-width: 270px;
    border-radius: 12px;
    background: #ffffff70;
  }
  .phone-platforms button { min-height: 44px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ink); font-size: 13px; }
  .phone-platforms [aria-pressed=true] { background: white; border-color: #ffffffa0; }
  .phone-controls-ready .phones { display: block; max-width: 252px; padding: 2px 3px 10px; overflow: visible; }
  .phones[data-phone-active=instagram] .phone:nth-child(2),
  .phones[data-phone-active=linkedin] .phone:first-child { display: none; }
  .detail-visual > .studio { padding: 20px; }
  .voice-scene, .message-scene, .transaction-scene { gap: 16px; }
  .voice-visual { min-height: 220px; }
  .provider-scene { gap: 20px; }
}
@media (max-width: 360px) {
  header, footer { padding-inline: 16px; }
  .clean-site { margin-inline: 16px; }
  .clean-site .platform-nav { margin-inline: -16px; }
  .opening-actions .button { padding-inline: 12px; }
  .opening-landscape span { font-size: 11px; }
}
@media (max-width: 700px) {
  .studio { grid-template-columns: minmax(0, 1fr); }
  .phones { margin-inline: auto; }
}
@media (max-width: 360px) {
  .opening-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .opening-actions .button { padding-inline: 8px; font-size: 12px; }
}

.floating-voice {
  position: fixed;
  z-index: 5;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 99px;
  background: #253f34;
  color: #fff;
  box-shadow: 0 4px 16px #253f3433;
  font-size: 12px;
}
.floating-voice:hover { background: #365548; text-decoration: none; }
@media (max-width: 700px) {
  .floating-voice { padding: 0; }
  .floating-voice span { display: none; }
  footer { padding-bottom: 72px; }
}