/* Layout and components. Values come from tokens.css only. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg) var(--texture) repeat; background-size: var(--texture-size);
  color: var(--ink); font-family: var(--sans);
  font-size: var(--fs-body); line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
p, li, .msg, summary { margin: 0; text-wrap: pretty; }
h1, h2 { font-family: var(--sans); font-weight: 500; font-size: var(--fs-display);
  line-height: 1.06; letter-spacing: -0.025em; margin: 0; text-wrap: balance; }
h2 { font-size: var(--fs-heading); line-height: 1.12; letter-spacing: -0.02em; }
h1 .soft { display: grid; color: var(--ink-soft); }
/* the typed phrase sits over hidden copies of every phrase (added by site.js), so the line never changes size */
h1 .soft > * { grid-area: 1 / 1; text-wrap: wrap; }
.tw-size { visibility: hidden; }
.js h1 .soft:not(.ready) .tw { visibility: hidden; animation: tw-show 0s 2s forwards; }  /* if site.js never runs, show it */
@keyframes tw-show { to { visibility: visible; } }
/* the caret is painted at the end of the typed phrase's own box, so nothing on the page moves while it types */
.soft.tw-on .tw, .soft.tw-on .tw-size { justify-self: start; padding-right: .12em; }
.soft.tw-on .tw { background: linear-gradient(currentColor, currentColor) right 55% / max(2px, .05em) .8em no-repeat; }
.soft.tw-on.tw-hold .tw { animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { background-size: 0 .8em; } }
h3 { font-family: var(--sans); font-size: var(--fs-title); font-weight: 600; line-height: 1.3;
  letter-spacing: -0.005em; margin: 0; text-wrap: balance; }
.wrap { max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3); }
.lead { font-size: var(--fs-title); line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.muted { color: var(--ink-2); }
.small { font-size: var(--fs-small); line-height: 1.45; }
section { padding: var(--section) 0; }
.band { background: var(--bg-2); }
.band-peach { background: var(--bg-3); }
@media (min-width: 760px) { section[id] { scroll-margin-top: 40px; } }
.section-head { display: grid; gap: var(--s3); max-width: 780px; margin-bottom: var(--s5); }

/* buttons: one pill, everywhere */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 0 var(--s3); border-radius: var(--radius-s); background: var(--ink); color: var(--bg);
  border: 1px solid var(--ink); font: 600 var(--fs-body)/1 var(--sans); text-decoration: none; white-space: nowrap;
  transition: background .2s ease-out, color .2s ease-out; }
.btn:hover { background: var(--btn-hover); color: var(--ink); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 500; }
.btn-quiet { background: transparent; color: var(--ink); font-weight: 500; }
.btn-quiet:hover { background: var(--btn-hover); color: var(--ink); }
.btn-accent:hover { background: var(--btn-hover); border-color: var(--accent); color: var(--ink); }
.btn:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.btn-s { min-height: 44px; padding: 0 20px; }

/* placeholders (until a review fills them); an empty one is hidden (the demo note when the shown chat is final) */
.ph:empty { display: none; }
.ph { display: inline-block; border: 1px dashed var(--line-2); border-radius: var(--radius-s); padding: 2px 8px;
  font-size: var(--fs-small); color: var(--ink-3); letter-spacing: .01em; background: transparent; }
.ph-block { display: grid; place-items: center; text-align: center; border: 1px dashed var(--line-2);
  border-radius: var(--radius-s); padding: var(--s3); color: var(--ink-3); font-size: var(--fs-small); }
.brand { justify-self: start; display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; padding: 4px 0; }
.brand svg { height: 26px; width: auto; aspect-ratio: 6298 / 1531; display: block; }  /* viewBox cropped to the ink, so the C and t meet the text column */

/* nav */
.nav { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--line); }
.nav-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 72px; }
.nav-links { display: flex; gap: var(--s4); }
.nav-links a { text-decoration: none; color: var(--ink-2); }
.nav-links a:hover { color: var(--ink); }
.nav-end { justify-self: end; display: flex; align-items: center; gap: 4px; }
.menu-btn { display: none; }
@media (max-width: 759px) {
  .nav { position: relative; }
  .nav-in { grid-template-columns: 1fr auto; height: 68px; position: relative; }
  .menu-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; padding: 0;
    border: 0; background: transparent; color: var(--ink); cursor: pointer; border-radius: var(--radius-s); }
  .menu-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; }
  .menu-btn span, .menu-btn span::before, .menu-btn span::after { display: block; width: 20px; height: 1.5px;
    background: currentColor; border-radius: 1px; transition: transform .2s ease-out, background-color .2s ease-out; }
  .menu-btn span { position: relative; }
  .menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; }
  .menu-btn span::before { top: -6px; } .menu-btn span::after { top: 6px; }
  .nav.open .menu-btn span { background-color: transparent; }
  .nav.open .menu-btn span::before { transform: translateY(6px) rotate(45deg); }
  .nav.open .menu-btn span::after { transform: translateY(-6px) rotate(-45deg); }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0;
    padding: 0 var(--gutter) var(--s2); background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 24px -16px rgb(30 24 20 / .18); }
  .nav.open .nav-links { display: flex; animation: menu-in .2s ease-out; }
  .nav-links a { padding: 14px 0; color: var(--ink); font-size: var(--fs-title); }
  .nav-links a + a { border-top: 1px solid var(--line); }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }

/* hero */
.hero { padding-top: clamp(48px, 5vw, 88px); padding-bottom: 0; }
.hero-text { grid-column: 1 / span 7; align-self: center; display: grid; gap: var(--s3); padding-right: var(--s3); }
.hero-text h1 { max-width: 17ch; }
.hero-text .lead { max-width: 34ch; }
.hero-cta { display: grid; gap: var(--s2); justify-items: start; margin-top: var(--s1); }
.trust { display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--ink-2); }
.trust span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.trust span::before { content: "\2713"; font-weight: 700; font-size: 12px; color: var(--ink); }
.hero-chat { grid-column: 8 / span 5; align-self: start; }
.benefits { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(56px, 5vw, 88px); border-top: 1px solid var(--line); }
.benefit { padding: var(--s4) var(--s3); display: grid; gap: 4px; align-content: start; }
.benefit:first-child { padding-left: 0; }
.benefit + .benefit { border-left: 1px solid var(--line); }
.benefit h3 { font-size: var(--fs-title); }
@media (max-width: 1079px) {
  .hero-text { grid-column: 1 / -1; padding-right: 0; }
  .hero-chat { grid-column: 1 / -1; margin-top: var(--s5); max-width: 620px; }
}
@media (max-width: 759px) {
  .trust { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s3); }
  .benefits { grid-template-columns: 1fr; margin-top: var(--s5); }
  .benefit { padding: var(--s3) 0; }
  .benefit + .benefit { border-left: 0; border-top: 1px solid var(--line); }
}

/* the chat (animated) */
.chat { background: var(--chat-bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 1px 2px rgb(30 24 20 / .04), 0 12px 32px -16px rgb(30 24 20 / .16); }  /* a whisper of lift so the chat stands apart */
.chat-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.chat-tag { color: var(--ink-3); font-size: var(--fs-small); }
.chat-body { display: grid; gap: 12px; padding: 24px 20px 28px; align-content: start; }
.slot { display: grid; } .slot > * { grid-area: 1 / 1; }
.msg { max-width: 86%; padding: 12px 16px; border-radius: var(--radius); font-size: var(--fs-body); line-height: 1.45; }
.msg.me { justify-self: end; background: var(--bubble-me); color: var(--on-dark); border-bottom-right-radius: 6px; }
.msg.it { justify-self: start; background: var(--bubble-it); color: var(--ink); border-bottom-left-radius: 6px; }
.msg .who { display: block; font-size: var(--fs-small); font-weight: 600; margin-bottom: 2px; opacity: .72; }
.typing { justify-self: start; align-self: start; display: inline-flex; opacity: 0; transition: opacity .2s ease-out; gap: 5px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--bubble-it); border-bottom-left-radius: 6px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: dot 1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
.js .msg { opacity: 0; transform: translateY(8px); transition: opacity .45s ease-out, transform .45s ease-out; }
.js .msg.on { opacity: 1; transform: none; }
.js .typing.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .js .msg { opacity: 1; transform: none; transition: none; } .typing { visibility: hidden; } .typing i { animation: none; } }
.typing { opacity: 0; }

/* aspiration */
.aspire-top { align-items: center; }
.aspire h2 { grid-column: 1 / span 7; }
.aspire .lead { grid-column: 8 / span 5; color: var(--ink); }
@media (max-width: 1079px) { .aspire h2 { grid-column: 1 / -1; max-width: 15ch; } .aspire .lead { grid-column: 1 / -1; max-width: 38ch; margin-top: var(--s4); } }

/* constitution: four rows, rule left, what it means right */
.const { border-top: 1px solid var(--ink); }
.rule { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3);
  padding: var(--s4) 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.rule h3 { grid-column: 1 / span 5; padding-right: var(--s4); }
.rule p { grid-column: 6 / span 7; }
@media (max-width: 759px) {
  .rule { grid-template-columns: 1fr; row-gap: var(--s1); padding: var(--s3) 0; }
  .rule h3, .rule p { grid-column: 1; padding-right: 0; }
}

/* how it works */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--s3); counter-reset: s; }
.step h3 { text-wrap: pretty; }
.step p, .rule p { text-wrap: balance; }
.step { border-top: 1px solid var(--ink); padding-top: var(--s3); display: grid; gap: var(--s2); align-content: start; }
.step .n { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--ink); display: grid; place-items: center;
  font-weight: 600; font-size: var(--fs-small); }
@media (max-width: 759px) { .steps { grid-template-columns: 1fr; row-gap: var(--s5); } }

/* ChatGPT comparison */
.fear { max-width: 760px; display: grid; gap: var(--s3); margin-bottom: var(--s5); }
.fear .lead { color: var(--ink); }
.cmp { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3); border-top: 1px solid var(--ink); }
.cmp .f, .cmp .hd.blank { grid-column: span 4; }
.cmp .c { grid-column: span 5; }
.cmp .g { grid-column: span 3; }
.cmp > div { padding: 20px 0; border-bottom: 1px solid var(--line); }
.cmp .hd { font-weight: 600; padding-top: 16px; padding-bottom: 16px; }
.cmp .c { background: var(--card); padding-left: 24px; padding-right: 24px; }

.cmp .g { color: var(--ink-2); }
.cmp .f { font-weight: 600; }
.mk { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; margin-right: 10px;
  font-size: 13px; font-weight: 700; vertical-align: -4px; }
.mk.y { background: var(--ink); color: var(--bg); }
.mk.n { border: 1.5px solid var(--ink-3); color: var(--ink-3); }
.cell { display: flex; align-items: flex-start; }
.cell > span:last-child { display: block; text-wrap: balance; }
.cell .mk { flex: none; margin-top: 2px; }
.sub-line { display: block; color: var(--ink-2); margin-top: 4px; }
.legend { display: none; }
@media (max-width: 759px) {
  .cmp { display: block; }
  .cmp > div { padding: 0; border-bottom: 0; }
  .cmp .hd.blank { display: none; }
  .cmp .hd.c, .cmp .hd.g { display: inline-flex; align-items: center; padding: var(--s2) var(--s3) var(--s2) 0; background: transparent; border-radius: 0; }
  .cmp .legend { display: inline-grid; }
  .cmp .mk { width: 18px; height: 18px; font-size: 11px; margin-right: 8px; }
  .cmp .f { padding: var(--s2) 0 var(--s1); border-top: 1px solid var(--line); }
  .cmp .c { background: transparent; padding: 0 0 6px; }
  .cmp .c:not(.hd) { font-weight: 500; }
  .cmp .g:not(.hd) { padding: 0 0 var(--s2); }
  .cmp .last.c { border-radius: 0; }
  .cmp > div:last-child { border-bottom: 1px solid var(--line); }
  .cell > span:last-child { text-wrap: pretty; }
}

/* pricing */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(28px, 3vw, 40px); display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--s4); }
.plan .price { font-family: var(--sans); font-size: var(--fs-heading); font-weight: 500;
  letter-spacing: -0.02em; line-height: 1; }
.plan .unit { color: var(--ink-2); margin-top: var(--s1); }
.plan hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; align-content: start; }
.plan li { display: flex; gap: 10px; align-items: flex-start; }
.plan li .mk { margin-top: 2px; width: 20px; height: 20px; font-size: 12px; flex: none; margin-right: 0; }
.plan .btn { justify-self: start; }
@media (max-width: 759px) { .plans { grid-template-columns: 1fr; } }

/* FAQ */
.faq { display: grid; gap: var(--s6); }  /* the groups sit apart from the items inside them */
.faq-group { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3); }
.faq-group > h3 { grid-column: 1 / span 5; }
.faq-items { grid-column: 6 / span 7; }
.faq-group > h3 { padding-top: 18px; border-top: 1px solid var(--ink); }
.faq-items { border-top: 1px solid var(--ink); }
details { border-bottom: 1px solid var(--line); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--s2);
  padding: 18px 0; font-weight: 600; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-weight: 400; font-size: 22px; line-height: 1; color: var(--ink-2); }
details[open] summary::after { content: "\2212"; }
details .ans { padding: 0 0 20px; color: var(--ink-2); max-width: 60ch; }
@media (max-width: 759px) { .faq-group { grid-template-columns: 1fr; } .faq-group > h3, .faq-items { grid-column: 1; } .faq-group > h3 { padding: 0 0 12px; border-top: 0; } }

/* footer */
footer { padding: var(--s6) 0 var(--s4); border-top: 1px solid var(--line);
  background: var(--foot-bg) var(--texture) repeat; background-size: var(--texture-size); }
.foot-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s4); flex-wrap: wrap; }
.foot-links { display: flex; gap: var(--s4); flex-wrap: wrap; }
.foot-links a, .foot-mail { text-decoration: none; color: var(--ink-2); }
.foot-links a:hover, .foot-mail:hover { color: var(--ink); text-decoration: underline; }
.foot-mail { font-size: var(--fs-title); color: var(--ink); }
.wordmark { margin: clamp(40px, 4vw, 64px) 0 0; color: var(--wordmark); line-height: 0; overflow: hidden; }
.wordmark svg { width: 100%; height: auto; display: block; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap;
  margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line); }
@media (max-width: 759px) {
  footer { padding-top: var(--s4); }
  .foot-top { flex-direction: column; gap: 0; }
  .wordmark { margin-top: var(--s3); }
  .foot-bottom { margin-top: var(--s4); padding-top: var(--s4); row-gap: var(--s2); }
  .foot-links { gap: 0 20px; }
  .foot-links a, .foot-mail { display: inline-block; padding: 11px 0; }
}

/* privacy page */
.policy { padding: var(--s6) 0 var(--section); }
.policy-in { max-width: 680px; }
.policy h1 { margin-bottom: var(--s2); }
.policy h2 { font-family: var(--sans); font-size: var(--fs-title); font-weight: 600; line-height: 1.3; letter-spacing: 0; margin: var(--s5) 0 var(--s2); }
.policy p, .policy li { color: var(--ink-2); }
.policy p + p { margin-top: var(--s2); }
.policy ul { padding-left: 20px; margin: var(--s2) 0 0; display: grid; gap: 8px; }
.policy .meta { color: var(--ink-3); font-size: var(--fs-small); }
.policy .summary { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s3); margin-top: var(--s4); }
.policy .summary p { color: var(--ink); }

/* who label inside a chat bubble */
.msg .who { display: block; font-size: var(--fs-small); font-weight: 600; margin-bottom: 2px; opacity: .72; }


/* demo: a laptop with two chats. From 1080 px up it has true laptop proportions that never stretch with the window:
   a 16:10 screen in an even bezel, and a base a little wider than the screen with a shallow lip. It is sized in em, so
   when the type steps up on big screens the laptop grows with it and the chat keeps its fit. A chat taller than the
   screen scrolls inside it and follows the newest message as it plays. Below 1080 px the chat sits on a plain card. */
.demo-head { display: grid; gap: var(--s3); justify-items: center; max-width: 780px; margin: 0 auto var(--s5); text-align: center; }
.laptop-screen { display: flex; flex-direction: column; background: var(--chat-bg); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; }
.laptop-base { display: none; }
:root { --frame: color-mix(in srgb, var(--bubble-me) 32%, var(--bg)); }  /* set here, so the dark screen below does not change it */
/* the screen runs in the espresso dark mode: its parts read the usual names, so the dark values are set once, here */
.laptop-screen { --chat-bg: var(--dk-paper); --ink: var(--dk-ink); --ink-2: var(--dk-ink); --ink-3: var(--dk-ink-3);
  --line: var(--dk-line); --line-2: var(--dk-line-2); --bubble-me: var(--dk-bubble-me); --on-dark: var(--dk-ink);
  --bubble-it: var(--dk-bubble-it); color: var(--ink); }
@media (min-width: 1080px) {
  .laptop { --bezel: .75em; position: relative; width: min(100%, 72em); margin: 0 auto; }
  .laptop::before { content: ""; position: absolute; top: calc(var(--bezel) / 2 - 2.5px); left: 50%; width: 5px; height: 5px;
    margin-left: -2.5px; border-radius: 50%; background: var(--bubble-me); }  /* the camera */
  /* the frame is a soft warm grey from the bubble colour, so the only dark in the demo is the person's bubbles */
  .laptop-screen { aspect-ratio: 16 / 10; border: var(--bezel) solid var(--frame);
    border-radius: 1.25em 1.25em .375em .375em; }
  .laptop-base { display: block; position: relative; height: 1.125em; margin: 0 -4%;
    border-radius: 2px 2px 1.25em 1.25em / 2px 2px .875em .875em;
    /* the base is the frame's own colour family: a darker hinge line, a light top edge, the body, a darker underside, a soft shadow on the table */
    background: linear-gradient(color-mix(in srgb, var(--bubble-me) 60%, var(--bg)) 0 2px, color-mix(in srgb, var(--bubble-me) 12%, var(--bg)) 2px 4px,
      color-mix(in srgb, var(--bubble-me) 24%, var(--bg)) 4px calc(100% - 3px), color-mix(in srgb, var(--bubble-me) 48%, var(--bg)) 0);
    box-shadow: 0 .6em .9em -.45em rgb(30 24 20 / .35); }
  .laptop-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 14%; height: 40%; transform: translateX(-50%);
    background: color-mix(in srgb, var(--bubble-me) 35%, var(--bg)); border-radius: 0 0 .5em .5em; }  /* the thumb notch */
}
.bar { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; padding: 8px clamp(16px, 4vw, 48px); border-bottom: 1px solid var(--line); }  /* the same ground as the screen */
.tabs { display: flex; gap: 8px; }
/* the screen's top bar, like the app: the Clement wordmark at the left of the chat column, the two example chats at the right */
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); width: 100%; max-width: calc(55 * var(--fs-body)); margin: 0 auto; }
.app-mark { display: inline-flex; color: var(--ink); }
.app-mark svg { height: 20px; width: auto; aspect-ratio: 6298 / 1531; display: block; }
.tab { font: 600 var(--fs-small)/1 var(--sans); min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent;
  background: transparent; color: var(--ink-2); cursor: pointer; }
.tab:hover { color: var(--ink); border-color: var(--line-2); }
.tab[aria-selected="true"] { background: var(--bubble-it); color: var(--ink); border-color: var(--ink); }
.tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.demo-note { text-align: center; margin-top: var(--s3); }
/* the open chat sits in the middle of the screen (the final manager chat is short, so top-aligned it left the bottom third
   empty); a chat taller than the screen scrolls inside it (auto margins never clip its top) */
.panes { position: relative; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.pane { margin: auto 0; padding: var(--s3) clamp(16px, 4vw, 48px) var(--s2); }
.pane .chat-body, .pane .chat-head { width: 100%; max-width: calc(55 * var(--fs-body)); margin-left: auto; margin-right: auto; }  /* one column for the header and the chat */
.pane .chat-head { padding: 0 0 12px; margin-bottom: var(--s3); }  /* the chat's header, like the hero chat's */
.pane .chat-body { padding: 0; }
/* the composer: the person's message types in here, then sends (decorative; the chat itself is in the page text).
   It holds two lines; a longer draft scrolls so its newest two lines show, whole. */
.composer { display: flex; flex-direction: column; justify-content: flex-end; box-sizing: border-box;
  width: calc(100% - 2 * clamp(16px, 4vw, 48px)); max-width: calc(55 * var(--fs-body)); height: calc(2lh + 22px);
  margin: 0 auto var(--s3); padding: 10px 20px; border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--dk-card); line-height: 1.4; }
.draft { max-height: 2lh; overflow: hidden; }  /* site.js keeps it scrolled to its last line */
.draft::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -.2em;
  background: var(--ink-3); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .draft::after { animation: none; } }
.pane .msg { max-width: 78%; }
@media (max-width: 759px) {
  .bar { padding: var(--s2); row-gap: var(--s2); }
  .pane { padding: var(--s2) 14px var(--s3); }
  .pane .msg { max-width: 94%; text-wrap: wrap; }  /* in narrow bubbles 'pretty' left a short first line */
}

/* pricing cards */
.plan h3 { font-size: var(--fs-body); font-family: var(--sans); font-weight: 600; line-height: 1.3; margin-bottom: var(--s2); }
.plan-top { display: grid; gap: 4px; align-content: start; }
.plan .price { margin-bottom: var(--s1); }
.plan .price .unit { font-size: var(--fs-body); font-weight: 400; letter-spacing: 0; color: var(--ink-2); margin: 0 0 0 4px; }
.plan-list { display: grid; gap: var(--s2); align-content: start; }
.plan .plus, .plan .min { font-weight: 600; }
#pricing .section-head .ph { margin-top: var(--s1); }

/* FAQ group label */
.faq-items details:last-child { border-bottom: 1px solid var(--line); }

/* book a demo: the Calendly embed */
.book { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s3); row-gap: var(--s3); align-items: start; }
.book-text { grid-column: 1 / span 5; }
.cal { grid-column: 6 / span 7; height: 660px; position: relative; z-index: 0;  /* holds Calendly's loading dots; Calendly then sets the height to fit its card */
  border-radius: var(--radius); overflow: hidden; }
/* Calendly draws its card about 48px down inside its frame; lift the frame so the card's top meets the heading's */
@media (min-width: 1080px) { .cal { margin-top: calc(-1 * var(--s5)); } }
@media (max-width: 1079px) { .book { grid-template-columns: 1fr; } .book-text, .cal { grid-column: 1; } }
/* initInlineWidget puts the iframe straight into #cal, so size the iframe itself (it defaults to 150px tall) */
.cal iframe { display: block; width: 100%; height: 100%; border: 0; }


.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* fresh-eyes fixes (phase A) */
ol.steps { list-style: none; padding: 0; margin: 0; }
.msg .who { opacity: .85; }

/* gentle motion (review 13). site.js adds these classes only when motion is allowed, so without it nothing hides. */
/* 1 · the footer wordmark rises out of its own baseline, once, as the footer comes into view */
.js .wordmark.wm-wait svg { opacity: 0; transform: translateY(28%); transition: opacity 1.4s ease-out, transform 1.6s cubic-bezier(.2, .7, .2, 1); }
.js .wordmark.wm-wait.in svg { opacity: 1; transform: none; }
/* 2 · sections below the first screen ease up a few pixels as they come into view, once */
.js .rise { opacity: 0; transform: translateY(14px); transition: opacity .8s ease-out, transform .9s cubic-bezier(.2, .7, .2, 1); }
.js .rise.in { opacity: 1; transform: none; }
/* 3 · the dark rules under the section heads draw in from the left (same 1px line, same place) */
.js .rise :is(.const, .cmp, .step, .faq-items, .faq-group > h3) { border-top-color: transparent;
  background: linear-gradient(var(--ink), var(--ink)) 0 0 / 0 1px no-repeat border-box;
  transition: background-size 1.2s cubic-bezier(.2, .7, .2, 1) .2s; }
.js .rise.in :is(.const, .cmp, .step, .faq-items, .faq-group > h3) { background-size: 100% 1px; }
.js .rise .step:nth-child(2) { transition-delay: .32s; } .js .rise .step:nth-child(3) { transition-delay: .44s; }
@media (max-width: 759px) { .js .rise .faq-group > h3 { background: none; } }
/* 4 · FAQ answers open and close smoothly where the browser can (instant elsewhere) */
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }
  details::details-content { block-size: 0; overflow: hidden; transition: block-size .3s ease-out, content-visibility .3s allow-discrete; }
  details[open]::details-content { block-size: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .js h1 .soft:not(.ready) .tw { visibility: visible; animation: none; }
  .nav.open .nav-links { animation: none; }
  .menu-btn span, .menu-btn span::before, .menu-btn span::after { transition: none; }
}

/* 404 page (W6): the button sits a step below the line */
.policy .home-link { margin-top: var(--s4); }

/* round 5 (Kenneth, 2026-10-19): the Manager and IC switch sits under "Clement in action." where nobody can miss it:
   a pill with the open chat filled */
.demo-head .tabs { padding: 4px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--chat-bg); }
.demo-head .tab { min-width: 112px; }
.demo-head .tab[aria-selected="true"] { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
/* round 5 motion: the hero chat plays like the product, with a light composer under it where Jake's message types */
.chat > .composer { width: auto; margin: 0 20px 20px; background: var(--bg); justify-content: flex-start; }  /* text grows downward, so a second line never moves the first */
/* the line under the headline: its words come into focus one after another, then the three checkmarks rise in, once.
   The words stay inline (only opacity and blur change), so the line wraps exactly as it does still and nothing shifts.
   site.js adds these classes only when motion is allowed, so without it nothing hides. The transition sits on the
   shown state only, so hiding is instant and nothing fades out first. */
.js .lead-anim .w { opacity: 0; filter: blur(3px); }
.js .lead-anim .w.on { opacity: 1; filter: none; transition: opacity .5s ease-out, filter .5s ease-out; }
.js .trust-anim span { opacity: 0; transform: translateY(12px); }
.js .trust-anim span.on { opacity: 1; transform: none; transition: opacity .35s ease-out, transform .35s cubic-bezier(.2, .7, .2, 1); }
/* the hero chat: a sent bubble arrives quickly in its own colour (no washed-out midpoint). Its composer has no caret:
   a caret riding the typed text counts as layout shift on the first screen, and the letters appearing show the typing */
.js .hero .msg { transition: opacity .18s ease-out, transform .3s cubic-bezier(.2, .7, .2, 1); }
.chat > .composer .draft::after { display: none; }