/* Security page. Tokens, nav, buttons and footer come from /site/css/base.css,
   including the current page marker in the nav, the mobile menu and the footer.
   The walls frame reuses .security from trust.css, the table reuses .why .cmp from trust.css,
   and the FAQ and final call to action reuse #faq and #final from more.css.
   Everything below is this page only. */

/* ---------- The Live chip: same family as the team page's "on duty" chip ---------- */
.live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 11px 0 9px;
  border-radius: 999px;
  background: rgba(27, 158, 75, .2);
  color: #7FE0A3;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}
.live-dot { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #2BBE62; }
.live-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid #2BBE62;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .live-dot::after { animation: liveping 2.6s ease-out infinite; }
  .band-grid .wcard:nth-child(2) .live-dot::after { animation-delay: .45s; }
  .band-grid .wcard:nth-child(3) .live-dot::after { animation-delay: .9s; }
  .band-grid .wcard:nth-child(4) .live-dot::after { animation-delay: 1.35s; }
}
@keyframes liveping {
  0% { transform: scale(.6); opacity: .7; }
  70%, 100% { transform: scale(1.5); opacity: 0; }
}

/* =========================================================
   1. HERO: headline left, eyebrow + sub + call right, the stop text stage below
   ========================================================= */
/* Same frame as the business hero: exactly one screen tall, the stage takes what is left */
.shero {
  position: relative;
  z-index: 1;
  min-height: calc(100svh - var(--nav-h));
  display: flex;
  flex-direction: column;
  padding: clamp(10px, 2.2vh, 28px) var(--gutter) clamp(8px, 1.2vh, 16px);
}
.shero-top {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  align-items: end;
  gap: clamp(24px, 4.5vw, 80px);
  padding: 0 clamp(0px, 1.2vw, 16px) clamp(18px, 3vh, 30px);
}
/* tied to the house h1 token, so it shrinks on short screens the same way */
.shero h1 {
  font-size: clamp(44px, calc(var(--fs-h1) * 1.22), 86px);
  line-height: .96;
  letter-spacing: -.042em;
  isolation: isolate;
  text-wrap: initial;
}
.shero h1 .l { display: block; }
.shero h1 .accent { color: var(--cobalt); }
.shero .mark { position: relative; white-space: nowrap; }
.shero .mark::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -.06em; right: -.04em; bottom: .05em;
  height: .32em;
  background: var(--sun);
  border-radius: .14em .34em .2em .4em;
  transform: rotate(-1.4deg);
  transform-origin: left center;
}
.shero .shero-aside { padding-bottom: 8px; }
.shero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stone);
}
.shero .eyebrow::before {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  border-radius: 3px;
  background: var(--sun);
  transform: rotate(45deg);
  box-shadow: 0 0 0 3px rgba(255, 201, 49, .25);
}
.shero .sub { font-size: clamp(16.5px, 1.28vw, 19px); line-height: 1.5; color: var(--ink-2); max-width: 31em; }
.shero .sub strong { color: var(--ink); font-weight: 600; }
.shero .cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: clamp(16px, 2.4vh, 24px); }
.shero .cta-note { max-width: 17em; font-size: 14px; line-height: 1.35; color: var(--stone); font-weight: 500; }
.shero .cta-note b { display: block; color: var(--ink); font-weight: 600; }

/* ---------- The stage ---------- */
.sstage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 1 1 auto;
  display: grid;
  align-content: center;
  padding: clamp(20px, 3.2vh, 44px) clamp(22px, 4.6vw, 72px);
  border-radius: var(--radius-lg);
  border: 1px solid var(--paper-3);
  background:
    radial-gradient(55% 80% at 90% 0%, rgba(255, 201, 49, .36), transparent 62%),
    radial-gradient(50% 70% at 0% 100%, rgba(255, 255, 255, .75), transparent 60%),
    var(--paper-2);
}
/* faint rings around the phone, like a signal going out */
.sstage::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: 980px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 62px, rgba(20, 18, 14, .065) 62px 63.5px);
  -webkit-mask-image: radial-gradient(circle, #000 28%, transparent 68%);
  mask-image: radial-gradient(circle, #000 28%, transparent 68%);
  pointer-events: none;
}
.sstage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4.2vw, 72px);
}

/* Left: what the stop does */
.sstage-say { max-width: 21em; }
.sstage-big {
  margin-top: 16px;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 3.3vw, 50px);
  line-height: .98;
  letter-spacing: -.04em;
  font-variation-settings: "opsz" 96;
  color: var(--ink);
}
.sstage-big span { display: block; color: var(--cobalt); }
.sstage-small { margin-top: 16px; max-width: 22em; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); }

/* Middle: the phone */
.phone {
  position: relative;
  width: 340px;
  margin: 0;
  padding: 10px;
  border-radius: 54px;
  background: linear-gradient(180deg, #2E2A22 0%, var(--ink) 58%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .06) inset,
    0 1px 0 rgba(255, 255, 255, .14) inset,
    0 60px 100px -48px rgba(20, 18, 14, .78),
    0 24px 40px -24px rgba(20, 18, 14, .5);
  transform: rotate(-2deg);
}
/* a minimum, not a fixed height: it follows the screen height, and it can never clip the chat */
.phone-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(430px, calc(100svh - 390px), 580px);
  overflow: hidden;
  border-radius: 44px;
  background: var(--paper);
}
.phone-island {
  position: absolute;
  z-index: 2;
  top: 11px;
  left: 50%;
  width: 96px; height: 27px;
  margin-left: -48px;
  border-radius: 999px;
  background: var(--ink);
}
.phone-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 42px 16px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(246, 240, 226, .7);
  text-align: center;
}
.p-avatar {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 13px;
  background: var(--ink);
}
.p-avatar img { width: 24px; height: auto; }
.p-name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.02em;
}
.ai-badge {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .1em;
  padding: 3px 6px 2px;
  border-radius: 6px;
  background: var(--sun);
  color: var(--ink);
}
.p-role { margin-top: 2px; font-size: 12px; color: var(--stone); }
.phone-log {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 14px 14px;
}
.pmsg { display: flex; flex-direction: column; max-width: 86%; }
.pmsg-ai { align-self: flex-start; }
.pmsg-me { align-self: flex-end; align-items: flex-end; }
.pmsg-by {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 4px 5px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone);
}
.pmsg-by img { width: 12px; height: auto; }
.pbubble {
  padding: 10px 14px 11px;
  border-radius: 20px 20px 20px 6px;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.45;
}
.pmsg-me .pbubble { background: var(--cobalt); color: #fff; border-radius: 20px 20px 6px 20px; }
.pstatus {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding: 7px 12px 6px;
  border-radius: 999px;
  background: rgba(255, 201, 49, .32);
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pstatus svg { flex: none; }
.phone-ask {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 46px;
  margin: 0 12px 16px;
  padding: 0 5px 0 16px;
  border-radius: 23px;
  border: 1.5px solid var(--line);
  background: #fff;
  color: #8A8273;
  font-size: 14.5px;
}
.phone-send {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--cobalt);
  color: #fff;
  opacity: .35;
}

/* Right: the agent's status */
.spanel {
  justify-self: start;
  width: min(100%, 330px);
  padding: 22px 22px 8px;
  border-radius: 26px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-card);
}
.spanel-label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: .14em;
  color: var(--stone);
}
.spanel-state {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -.035em;
  font-variation-settings: "opsz" 96;
}
.spanel-ico {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 14px;
  background: var(--sun);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 12px 26px -14px rgba(150, 110, 0, .7);
}
.spanel-rows { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--line); }
.spanel-rows li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1.5px dashed var(--line);
  font-size: 14.5px;
  color: var(--stone);
}
.spanel-rows li:last-child { border-bottom: 0; }
.spanel-rows b { color: var(--ink); font-weight: 600; text-align: right; }

/* Before and after states sit in the same cell. The resting state is the final one (Paused),
   so without motion, or before the animation runs, the card never shows a wrong status. */
.st-swap { display: inline-grid; }
.spanel-rows b.st-swap { justify-items: end; }
.st-swap > span,
.spanel-ico > * { grid-area: 1 / 1; }
.spanel .st-on { opacity: 0; }
.spanel-ico .live-dot { display: block; width: 11px; height: 11px; }
.spanel-ico .live-dot::after { inset: -5px; }

/* The two messages arrive one after the other when motion is welcome,
   and the status card flips from Working to Paused the moment the stop lands */
@media (prefers-reduced-motion: no-preference) {
  .pmsg, .pstatus { animation: sMsgIn .6s var(--ease) both; }
  .pmsg-me { animation-delay: .5s; }
  .pmsg-ai { animation-delay: 1.4s; }
  .pstatus { animation-delay: 2.1s; }
  .spanel .st-on { animation: sFlipOut .4s var(--ease) 2.1s both; }
  .spanel .st-off { animation: sFlipIn .45s var(--ease) 2.1s both; }
  .spanel-ico { animation: sIcoFlip .45s var(--ease) 2.1s both; }
  .spanel-rows .st-late { animation: sFade .5s var(--ease) 2.35s both; }
  .spanel-rows .st-late + .st-late { animation-delay: 2.5s; }
}
@keyframes sMsgIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes sFlipOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-8px); } }
@keyframes sFlipIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sIcoFlip {
  from { background-color: rgba(27, 158, 75, .2); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset; }
  to { background-color: #FFC931; box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 12px 26px -14px rgba(150, 110, 0, .7); }
}
@keyframes sFade { from { opacity: 0; } to { opacity: 1; } }

/* Short laptop screens (1366x768, 1536x730): a more compact phone so the whole chat stays on the first screen */
@media (min-width: 981px) and (max-height: 820px) {
  .shero { padding-bottom: 8px; }
  .shero-top { padding-bottom: clamp(12px, 2vh, 20px); }
  .shero .eyebrow { margin-bottom: 10px; }
  .shero .cta-row { margin-top: 12px; }
  .sstage { padding-block: clamp(14px, 2.4vh, 28px); }
  .sstage-big { font-size: clamp(30px, 2.9vw, 44px); }
  .phone { width: 350px; }
  .phone-screen { min-height: clamp(360px, calc(100svh - 360px), 470px); }
  /* the head goes into one row under the island: avatar beside the name */
  .phone-head { flex-direction: row; justify-content: center; gap: 9px; padding: 42px 14px 10px; }
  .p-avatar { width: 32px; height: 32px; border-radius: 10px; }
  .p-avatar img { width: 18px; }
  .p-name { margin-top: 0; font-size: 15px; }
  .p-role { display: none; }
  .phone-log { gap: 9px; padding: 10px 12px 10px; }
  .pmsg { max-width: 92%; }
  .pmsg-by { margin-bottom: 4px; }
  .pbubble { font-size: 14px; line-height: 1.4; padding: 8px 12px 9px; }
  .pstatus { padding: 6px 11px 5px; }
  .phone-ask { height: 38px; margin: 0 12px 11px; font-size: 14px; }
  .phone-send { width: 28px; height: 28px; }
  .spanel { padding: 18px 20px 6px; }
  .spanel-state { font-size: 32px; margin-top: 10px; }
  .spanel-ico { width: 40px; height: 40px; border-radius: 12px; }
  .spanel-rows { margin-top: 14px; }
  .spanel-rows li { padding: 10px 0; font-size: 14px; }
}

/* =========================================================
   2. THE WALLS: the business page's dark frame, fifteen walls in four bands
   ========================================================= */
/* This frame is about twice the business one, so the blueprint grid fades down the whole
   length instead of stopping after the first band, and a cobalt glow closes the bottom corner */
.walls-sec .sec-frame {
  background:
    radial-gradient(60% 30% at 0% 100%, rgba(31, 73, 255, .22), transparent 70%),
    var(--ink);
}
.walls-sec .sec-frame::before {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 65%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .5) 65%, transparent 100%);
}
.walls-sec .sec-head { max-width: 820px; }
.walls-sec .band + .band { margin-top: clamp(38px, 4.2vw, 60px); }
.walls-sec .band-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 253, 246, .14);
}
.walls-sec .band-range {
  flex: none;
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sun);
}
.walls-sec .band-title { font-size: clamp(22px, 2vw, 30px); color: var(--paper); }
.walls-sec .band-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
/* Each card spans four rows of its band (top, title, copy, chip) through subgrid,
   so a title that wraps pushes the whole row down and the copy stays in line across the band.
   Each card is also <article class="wall ..." data-wall="NN">, the hook for switching a wall off at go live.
   trust.css styles .security .wall for the business page; every property it sets on a card is set
   again below, and this file loads after trust.css, so these rules win. */
.walls-sec .wcard {
  position: relative;
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: 0;
  align-content: start;
  padding: 24px 22px 22px;
  border-radius: 20px;
  border: 1px solid rgba(255, 253, 246, .11);
  background: linear-gradient(180deg, rgba(255, 253, 246, .065), rgba(255, 253, 246, .02));
  transition:
    opacity .8s var(--ease) var(--rv-delay, 0s),
    transform .9s var(--ease) var(--rv-delay, 0s),
    border-color .3s;
}
.walls-sec .wcard.wide { grid-column: span 2; }
.walls-sec .wcard::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 22px;
  right: 22px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--sun);
  transform-origin: left center;
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .walls-sec .wcard::before {
    transform: scaleX(0);
    transition: transform .9s var(--ease) calc(var(--rv-delay, 0s) + .3s);
  }
  .walls-sec .wcard.in::before { transform: none; }
}
.walls-sec .wcard:hover { border-color: rgba(255, 201, 49, .45); }
.walls-sec .wc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  margin-bottom: 18px;
}
.walls-sec .wcard h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(19px, 1.45vw, 22px);
  line-height: 1.15;
  letter-spacing: -.02em;
  font-variation-settings: "opsz" 96;
  text-wrap: balance;
  color: var(--paper);
}
.walls-sec .wcard p {
  margin: 9px 0 20px;
  max-width: 34em;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 253, 246, .74);
}
/* titles hug their copy: when a neighbour wraps, the extra room goes above the title, not between title and copy */
.walls-sec .wcard h4 { align-self: end; }
.walls-sec .wcard .live { align-self: end; justify-self: start; }

/* =========================================================
   3. PERSPECTIVE: the sticky note and the two column table
   ========================================================= */
.persp { padding-block: calc(var(--section-y) * .62) calc(var(--section-y) * .5); }
.persp .persp-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px clamp(32px, 6vw, 96px);
  margin-bottom: clamp(36px, 4.5vw, 56px);
}
.persp .why-head { margin-bottom: 0; }

/* The sticky note by the register */
.persp .note {
  position: relative;
  width: 230px;
  aspect-ratio: 1;
  margin-right: clamp(0px, 3vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 24px 26px;
  background: linear-gradient(160deg, #FFD65A 0%, var(--sun) 55%, #F5BC1C 100%);
  color: var(--ink);
  border-radius: 3px 3px 18px 3px;
  box-shadow: 0 2px 3px rgba(20, 18, 14, .12), 0 30px 40px -26px rgba(20, 18, 14, .5);
  transform: rotate(4deg);
}
.persp .note-tape {
  position: absolute;
  top: -12px;
  left: 50%;
  width: 92px;
  height: 26px;
  margin-left: -46px;
  background: rgba(255, 253, 246, .72);
  border: 1px solid rgba(20, 18, 14, .06);
  transform: rotate(-3deg);
}
.persp .note-l1 {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(20, 18, 14, .62);
}
.persp .note-pw {
  margin-top: 10px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -.035em;
  font-variation-settings: "opsz" 96;
  transform: rotate(-3deg);
  transform-origin: left center;
}
.persp .note-l3 {
  margin-top: 16px;
  font-size: 15px;
  font-weight: 600;
  color: rgba(20, 18, 14, .72);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* The table: same look as the business comparison, two columns */
.persp .cmp { min-width: 0; font-size: 15.5px; }
.persp .cmp col.c-q { width: 26%; }
.persp .cmp col.c-them { width: 34%; }
.persp .cmp col.c-us { width: 40%; }
.persp .cmp th,
.persp .cmp td { padding: 19px 22px; }
.persp .cmp tbody th { font-size: 15px; }
.persp .cmp thead th.them { color: var(--stone); }
.persp .cmp td.them { color: var(--stone); }
.persp .cmp tbody td.us { font-weight: 600; }
/* a small check before each answer in the agent column */
.persp .cmp tbody td.us { padding-left: 52px; position: relative; }
.persp .cmp tbody td.us::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 19px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--success) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'><path d='M3.4 7.3l2.4 2.4L10.6 4.9' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 12px no-repeat;
}

/* =========================================================
   4. STRAIGHT TALK: a sunshine card, the honest line and the providers note
   ========================================================= */
.straight { position: relative; padding-block: calc(var(--section-y) * .35) calc(var(--section-y) * .5); }
.straight .st-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: end;
  gap: 28px clamp(28px, 5vw, 80px);
  padding: clamp(36px, 5vw, 72px) clamp(24px, 5vw, 72px);
  border-radius: var(--radius-lg);
  background: var(--sun);
  color: var(--ink);
}
/* the brick wall sits fully inside the card, in the open space above the providers note */
.straight .st-art {
  position: absolute;
  z-index: -1;
  top: clamp(22px, 3vw, 44px);
  right: clamp(22px, 3.5vw, 56px);
  width: clamp(130px, 11.5vw, 168px);
  height: auto;
  color: rgba(20, 18, 14, .13);
  transform: rotate(-6deg);
}
.straight .nb { white-space: nowrap; }
.straight .kicker { color: rgba(20, 18, 14, .68); }
.straight .kicker::before { background: var(--ink); box-shadow: 0 0 0 3px rgba(20, 18, 14, .12); }
.straight h2 {
  margin-top: 18px;
  max-width: 13em;
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.02;
  letter-spacing: -.035em;
}
.straight .st-lede { margin-top: 20px; max-width: 30em; font-size: var(--fs-lede); line-height: 1.5; color: var(--ink); }
.straight .st-side {
  padding: 24px 26px 26px;
  border-radius: var(--radius-md);
  background: rgba(255, 253, 246, .6);
  border: 1px solid rgba(20, 18, 14, .08);
}
.straight .st-side-label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: .14em;
  color: rgba(20, 18, 14, .62);
}
.straight .st-side p + p { margin-top: 10px; font-size: 16.5px; line-height: 1.55; color: var(--ink); }
.straight .st-side a { font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.straight .st-side a:hover { color: var(--cobalt); }

/* Final: a smaller V so it never touches the headline */
#final .final-v { width: clamp(220px, 25vw, 370px); right: clamp(-50px, -2vw, -10px); bottom: clamp(-110px, -6vw, -36px); }

/* FAQ links */
#faq .faq-a a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; }
#faq .faq-a a:hover { color: var(--cobalt); }

/* =========================================================
   Responsive
   ========================================================= */
@media (min-width: 1181px) {
  /* the side columns line up with the conversation, not the middle of the stage,
     so the status card sits level with the agent's reply and the paused pill */
  .sstage-say, .spanel { align-self: end; margin-bottom: clamp(40px, 6vh, 80px); }
}
/* Wide screens, wider than 1440px (1440 and under are untouched). The hero is never wider than
   the walls frame below it (1376px, trust.css) and sits centered, so the headline, the aside and
   the three pieces of the stage stay one group instead of drifting to the window edges.
   The aside takes a little more of the row, so the sub keeps to two lines at its full size
   and sits closer to the headline. */
@media (min-width: 1441px) {
  .shero { width: 100%; max-width: calc(1376px + 2 * var(--gutter)); margin-inline: auto; }
  .shero-top { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
}
/* Big screens (1920x1080 and up): the stop text, the phone and the status card grow a little,
   all together, so the frame is not mostly empty. Colours, shapes and timing are untouched. */
@media (min-width: 1800px) and (min-height: 1040px) {
  .sstage-grid { zoom: 1.06; }
}
/* Very tall windows: the hero stops at a sensible height instead of stretching the stage */
@media (min-width: 1441px) and (min-height: 1200px) {
  .shero { min-height: min(calc(100svh - var(--nav-h)), 1080px); }
}
/* Very big screens (2560x1440): a touch larger again, with tighter gaps so the group still fits */
@media (min-width: 2200px) and (min-height: 1300px) {
  .sstage { padding-inline: 56px; }
  .sstage-grid { zoom: 1.12; gap: 56px; }
}
@media (max-width: 1180px) {
  /* the aside is taller than the two line headline here, so center them on each other */
  .shero-top { align-items: center; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  /* the stage: the words go on top, phone and status sit side by side */
  .sstage-grid { grid-template-columns: auto auto; justify-content: center; }
  .spanel { width: 330px; }
  .sstage-say { grid-column: 1 / -1; max-width: 40em; }
  .sstage-big span { display: inline; }
}
@media (max-width: 1100px) {
  .walls-sec .band-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* two columns: the wide card goes back to normal and an odd last card takes the full row */
  .walls-sec .wcard.wide { grid-column: auto; }
  .walls-sec .wcard:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .shero { min-height: 0; padding-bottom: 28px; }
  .shero-top { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .shero h1 { font-size: clamp(44px, 8.4vw, 76px); }
  .phone-screen { min-height: 540px; }
  .persp .persp-head { grid-template-columns: 1fr; }
  .persp .note { justify-self: end; }
  .straight .st-card { grid-template-columns: 1fr; align-items: start; }
}

@media (max-width: 767px) {
  /* hero: the business page's phone pattern. Headline and eyebrow, then the conversation
     straight away, then the pitch and the call. */
  .shero { padding: 10px var(--gutter) 32px; }
  .shero-top, .shero-aside { display: contents; }
  .shero h1 { order: 1; font-size: clamp(38px, 11vw, 52px); line-height: 1; letter-spacing: -.038em; }
  .shero .eyebrow { order: 2; align-self: flex-start; margin: 14px 0 16px; font-size: 10.5px; letter-spacing: .12em; }
  .sstage { order: 3; }
  .shero .sub { order: 4; margin-top: 26px; font-size: 17px; }
  .shero .cta-row { order: 5; gap: 14px; margin-top: 18px; }

  /* stage: the stop line, the phone, the status card, one under the other */
  .sstage { padding: 22px 14px 16px; border-radius: 26px; }
  .sstage::before { width: 760px; top: 58%; }
  .sstage-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; justify-items: center; }
  .sstage-say { justify-self: stretch; padding: 0 6px; }
  .sstage-big { font-size: 30px; margin-top: 10px; }
  .sstage-big span { display: inline; }
  /* wall 14 and the agent's own reply already say this */
  .sstage-small { display: none; }
  .phone { width: min(100%, 318px); padding: 9px; border-radius: 48px; transform: none; }
  .phone-screen { min-height: 0; border-radius: 39px; }
  .phone-head { padding: 40px 14px 10px; }
  .p-avatar { width: 38px; height: 38px; border-radius: 12px; }
  .p-avatar img { width: 20px; }
  .p-name { margin-top: 7px; }
  .phone-log { flex: none; gap: 12px; padding: 14px 12px 12px; }
  .pbubble { font-size: 14.5px; }
  .pstatus { font-size: 10.5px; letter-spacing: .05em; white-space: normal; text-align: center; line-height: 1.3; padding: 6px 11px 5px; }
  .phone-ask { margin-bottom: 14px; }
  .spanel { justify-self: stretch; width: auto; padding: 18px 18px 6px; border-radius: 22px; }
  .spanel-state { font-size: 32px; }
  .spanel-ico { width: 40px; height: 40px; border-radius: 12px; }

  /* walls: each band becomes one board with a row per wall */
  .walls-sec .sec-head { margin-bottom: 28px; }
  .walls-sec .band + .band { margin-top: 30px; }
  .walls-sec .band-head { flex-direction: column; gap: 6px; padding-bottom: 0; margin-bottom: 14px; border-bottom: 0; }
  .walls-sec .band-title { font-size: 22px; }
  .walls-sec .band-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border: 1px solid rgba(255, 253, 246, .12);
    border-radius: 20px;
    background: rgba(255, 253, 246, .035);
    overflow: hidden;
  }
  .walls-sec .wcard {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    grid-row: auto;
    column-gap: 12px;
    align-items: start;
    padding: 16px 14px;
    border: 0;
    border-radius: 0;
    background: none;
  }
  .walls-sec .wcard + .wcard { border-top: 1px solid rgba(255, 253, 246, .1); }
  .walls-sec .wcard.wide { grid-column: auto; }
  .walls-sec .wcard::before { display: none; }
  .walls-sec .wc-top { grid-column: 1; grid-row: 1 / span 2; margin: 0; align-self: start; }
  .walls-sec .w-ico { width: 36px; height: 36px; border-radius: 11px; }
  .walls-sec .w-ico svg { width: 18px; height: 18px; }
  .walls-sec .w-num { display: none; }
  .walls-sec .wcard h4 { grid-column: 2; grid-row: 1; align-self: center; font-size: 17px; padding-top: 1px; text-wrap: pretty; }
  .walls-sec .wcard .live { grid-column: 3; grid-row: 1; align-self: center; justify-self: end; margin: 0; height: 22px; padding: 0 8px 0 7px; gap: 6px; font-size: 11.5px; }
  .walls-sec .wcard p { grid-column: 2 / span 2; grid-row: 2; margin: 4px 0 0; font-size: 14.5px; }

  /* perspective: the note shrinks and tucks under the intro */
  .persp { padding-block: calc(var(--section-y) * .9) calc(var(--section-y) * .45); }
  .persp .persp-head { gap: 26px; margin-bottom: 30px; }
  .persp .note { width: 136px; padding: 18px 12px 14px; margin: -14px 10px -20px auto; }
  .persp .note-tape { width: 70px; height: 20px; margin-left: -35px; top: -10px; }
  .persp .note-l1 { font-size: 10px; letter-spacing: .12em; }
  .persp .note-pw { font-size: 26px; margin-top: 7px; }
  .persp .note-l3 { margin-top: 9px; font-size: 12.5px; }

  /* the table turns into one card per question: no sideways scrolling */
  .persp .cmp-scroll { overflow: visible; background: none; border-radius: 0; }
  .persp .cmp,
  .persp .cmp tbody,
  .persp .cmp tr,
  .persp .cmp th,
  .persp .cmp td { display: block; width: auto; }
  .persp .cmp { width: 100%; font-size: 15px; }
  .persp .cmp colgroup { display: none; }
  .persp .cmp thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .persp .cmp tbody { display: grid; gap: 12px; }
  .persp .cmp tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(20, 18, 14, .04);
  }
  .persp .cmp tbody th {
    grid-column: 1 / -1;
    position: static;
    padding: 15px 16px 13px;
    border: 0;
    box-shadow: none;
    background: none;
    font-family: var(--display);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -.02em;
  }
  .persp .cmp td { padding: 11px 12px 15px 16px; border: 0; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.4; }
  .persp .cmp td::before,
  .persp .cmp tbody td.us::before {
    content: attr(data-label);
    position: static;
    display: block;
    width: auto; height: auto;
    margin-bottom: 4px;
    border-radius: 0;
    background: none;
    font-family: var(--mono);
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--stone);
  }
  .persp .cmp tbody td.us { padding: 11px 16px 15px 14px; border-radius: 0; border-top-color: rgba(20, 18, 14, .08); background: rgba(255, 201, 49, .24); }
  /* the green check stays, on the label line */
  .persp .cmp tbody td.us::before {
    padding-left: 19px;
    color: rgba(20, 18, 14, .66);
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><circle cx='7' cy='7' r='7' fill='%231B9E4B'/><path d='M3.8 7.2l2.1 2.1 4.3-4.3' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") left center / 13px no-repeat;
  }
  .persp .cmp tbody tr:last-child .us { border-radius: 0; }

  /* straight talk */
  .straight .st-card { padding: 34px 22px 22px; border-radius: 26px; gap: 22px; }
  .straight .st-art { width: 70px; top: 12px; right: 14px; }
  .straight h2 { font-size: 30px; }
  .straight .st-lede { font-size: 17px; }
  .straight .st-side { padding: 18px 18px 20px; }
  .straight .st-side p + p { font-size: 15.5px; }
}