/* Landing layout: header and first screen. App components live in app-window.css. */
:root { --texte-doux: oklch(0.37 0 0); }

.jw-sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.jw-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.25rem 4rem; background: var(--page); border-bottom: 1px solid var(--filet);
}
.jw-header .logo { height: 1.75rem; }
.jw-nav { display: flex; gap: 2rem; font-size: 0.9375rem; }
.jw-nav a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--texte-doux); text-decoration: none; }
.jw-nav a:hover { color: var(--encre); text-decoration: underline; text-underline-offset: 0.25em; }
.jw-header .jw-button { min-height: 2.75rem; padding: 0 1rem; font-size: 0.875rem; }

.jw-hero {
  display: grid; grid-template-columns: 29.375rem minmax(0, 1fr); gap: 3.5rem; align-items: start;
  padding: 2.75rem 0 0 4rem;
  /* The first screen fills the fold but grows with the text column, so the demo card and its messages are never cut. */
  min-height: clamp(40rem, calc(100svh - 5.25rem), 52rem);
  overflow-x: clip;
}
.jw-hero h1 { font-size: 3.375rem; line-height: 1.04; letter-spacing: -0.035em; font-weight: 650; text-wrap: balance; }
.jw-hero h1 em { font-style: normal; color: var(--bleu); }
.jw-lede { margin: 1.375rem 0 1.875rem; font-size: 1.1875rem; line-height: 1.5; color: var(--texte-doux); text-wrap: pretty; }

.jw-demo-short {
  display: grid; gap: 0.625rem; padding: 1.25rem;
  background: var(--page); border: 1px solid var(--filet); border-radius: var(--rayon-xl);
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.05), 0 8px 24px -12px oklch(0 0 0 / 0.12);
}
.jw-demo-short h2 { font-size: 1rem; font-weight: 600; }
.jw-demo-fields { display: grid; grid-template-columns: minmax(0, 1fr) 8.75rem; gap: 0.5rem; }
.jw-demo-short label { display: block; margin-bottom: 0.25rem; font-size: 0.8125rem; font-weight: 500; color: var(--texte-doux); }
.jw-demo-short input, .jw-demo-short select {
  min-height: 2.75rem; width: 100%; padding: 0 0.75rem; font-size: 1rem;
  background: var(--page); border: 1px solid var(--filet); border-radius: var(--rayon-md);
}
.jw-demo-short input:focus-visible, .jw-demo-short select:focus-visible { outline: 3px solid var(--bleu); outline-offset: 1px; }
.jw-demo-short .jw-button { min-height: 2.75rem; font-size: 0.9375rem; }
.jw-demo-short small { font-size: 0.8125rem; color: var(--gris-texte); }

/* The window takes the row's height without sizing it, and is cut flush at the bottom so it reads as bleeding past the fold. */
.jw-hero .jw-window {
  width: calc(100vw - 36.25rem); align-self: stretch; contain: size;
  border-right: 0; border-bottom: 0; border-radius: var(--rayon-xl) 0 0 0; clip-path: inset(-5rem 0 0 -5rem);
}

/* From 1420 px the action block (520 px max) fits whole; past 1600 px the window keeps reaching the edge. */
@media (min-width: 88.75rem) {
  .jw-hero .jw-window { width: max(63.75rem, calc(100vw - 36.25rem)); }
}
/* Below 1256 px the sidebar would squeeze the thread: the window shows the conversation alone. */
@media (min-width: 900px) and (max-width: 1255px) {
  .jw-hero .jw-window { grid-template-columns: minmax(0, 1fr); }
  .jw-hero .jw-sidebar { display: none; }
}
@media (max-width: 1100px) {
  .jw-header { padding: 1rem 1.5rem; }
  .jw-nav { gap: 1.5rem; }
  .jw-hero {
    grid-template-columns: minmax(0, 1fr); gap: 2.5rem; padding: 2rem 1.5rem 0;
    min-height: 0; overflow: visible;
  }
  .jw-hero-copy { max-width: 32rem; }
  .jw-hero .jw-window {
    width: 100%; align-self: start; contain: none; clip-path: none; margin-bottom: 2.5rem;
    border-right: 1px solid var(--filet); border-bottom: 1px solid var(--filet); border-radius: var(--rayon-xl);
  }
}
/* Tablet landscape: the thread alone keeps the conversation in the first screen, still bleeding right. */
@media (min-width: 900px) and (max-width: 1100px) {
  .jw-hero { grid-template-columns: 24rem minmax(0, 1fr); gap: 2rem; padding: 2rem 0 0 1.5rem; overflow-x: clip; }
  .jw-hero h1 { font-size: 2.875rem; }
  .jw-hero .jw-window { border-right: 0; border-radius: var(--rayon-xl) 0 0 var(--rayon-xl); }
}
/* Narrow screens: the section anchors move to their own row under the logo. */
@media (max-width: 760px) {
  .jw-header { flex-wrap: wrap; row-gap: 0.25rem; }
  .jw-nav { order: 3; width: 100%; gap: 0.75rem 1.75rem; }
}
@media (max-width: 480px) {
  .jw-nav { justify-content: space-between; gap: 0.75rem; }
}
@media (max-width: 360px) {
  .jw-header { column-gap: 0.75rem; }
  .jw-header .logo { height: 1.5rem; }
  .jw-header .jw-button { padding: 0 0.75rem; font-size: 0.8125rem; }
}
@media (max-width: 640px) {
  .jw-header { padding-inline: 1rem; }
  .jw-hero h1 { font-size: 2.375rem; }
  .jw-lede { font-size: 1.0625rem; }
  .jw-demo-fields { grid-template-columns: minmax(0, 1fr); }
  .jw-hero { gap: 2rem; padding-inline: 1rem; }
}

/* Below the first screen: the rest of the thread. */
[hidden] { display: none !important; }

/* Same outer gutters as the header at 1440 px, like the app's full-width thread pane. */
.jw-feed { max-width: 90rem; padding: 0 4rem 5rem; }
.jw-divider {
  display: flex; align-items: center; gap: 1rem; margin: 1rem 0 2.5rem;
  font-size: 0.8125rem; font-weight: 500; color: var(--gris-texte);
}
.jw-divider::before, .jw-divider::after { content: ""; height: 1px; background: var(--filet); }
.jw-divider::before { flex: 0 0 1.5rem; }
.jw-divider::after { flex: 1; }

.jw-post { margin-top: 2.5rem; scroll-margin-top: 1.5rem; }
.jw-post h2 { font-size: 2.125rem; line-height: 1.15; letter-spacing: -0.025em; font-weight: 600; text-wrap: balance; margin: 0.25rem 0 0.75rem; }
.jw-post h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.35; text-wrap: balance; }
.jw-post li, .jw-post dd { text-wrap: pretty; }
.jw-post p { max-width: 42rem; text-wrap: pretty; }
.jw-post-lede { font-size: 1.1875rem; line-height: 1.5; color: var(--texte-doux); }

.jw-message--lg { grid-template-columns: 3rem minmax(0, 1fr); gap: 1.25rem; font-size: 1.0625rem; line-height: 1.55; }
.jw-message--lg .jw-avatar { width: 3rem; height: 3rem; border-radius: var(--rayon-lg); font-size: 1rem; }
.jw-message--lg .jw-name { font-size: 1rem; }
.jw-message--lg.jw-message--agent { margin: 0; padding: 1.75rem 2rem 2rem 1.5rem; border-radius: var(--rayon-xl); }
.jw-message--lg:not(.jw-message--agent) { padding: 1.75rem 2rem 1rem 1.5rem; }

.jw-steps { display: grid; gap: 0; margin-top: 1.75rem; max-width: 46rem; border-top: 1px solid var(--filet); }
.jw-steps li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--filet); }
.jw-step-n { font-size: 1.75rem; line-height: 1; font-weight: 600; color: var(--agent-scribe); font-variant-numeric: tabular-nums; }
.jw-steps p { margin-top: 0.25rem; color: var(--texte-doux); }

.jw-post--split { display: grid; grid-template-columns: minmax(0, 1fr) 26rem; gap: 2rem; align-items: start; }
.jw-post--split > .jw-message--lg { min-width: 0; }
.jw-rules { display: grid; gap: 0.75rem; margin-top: 1.25rem; max-width: 40rem; }
.jw-rules li { color: var(--texte-doux); }
.jw-rules b { font-weight: 600; color: var(--encre); }

/* The live proposal. */
.jw-try { max-width: none; margin-top: 0; padding: 1.125rem 1.25rem 1.25rem; box-shadow: inset 3px 0 0 var(--ambre), var(--ombre-sm); font-size: 0.9375rem; position: sticky; top: 1.5rem; }
.jw-try.jw-action--validated, .jw-try.jw-action--refused { box-shadow: var(--ombre-sm); }
.jw-try .jw-action-title { font-size: 1.0625rem; }
.jw-try .jw-badge { min-height: 1.5rem; }
.jw-try-from { margin-top: 0.125rem; font-size: 0.8125rem; color: var(--gris-texte); }
.jw-try dl { grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.5rem 0.75rem; margin: 1rem 0 1.125rem; font-size: 0.9375rem; }
.jw-try .jw-name--scribe { font-weight: 600; }
.jw-try-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.jw-try .jw-button { min-height: 2.75rem; padding: 0 1.125rem; font-size: 0.9375rem; }
.jw-button--danger { color: var(--rouge); }
.jw-button--danger:hover { background: var(--rouge-soft); }
.jw-button:disabled { opacity: 0.5; cursor: not-allowed; }
.jw-button:disabled:hover { background: var(--page); }
.jw-button--primary:disabled:hover { background: var(--bleu); }
.jw-link-button {
  min-height: 2.75rem; padding: 0; border: 0; background: none; color: var(--bleu);
  font-size: 0.9375rem; font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer;
}
.jw-link-button:hover { color: color-mix(in oklch, var(--bleu), black 18%); }
.jw-edit { display: grid; gap: 0.75rem; margin-bottom: 0.25rem; }
.jw-edit label { display: block; margin-bottom: 0.25rem; font-size: 0.8125rem; font-weight: 500; color: var(--gris-texte); }
.jw-edit input {
  width: 100%; min-height: 2.75rem; padding: 0 0.75rem; font-size: 1rem;
  background: var(--page); border: 1px solid var(--gris-texte); border-radius: var(--rayon-md);
}
.jw-edit input:focus-visible { outline: 3px solid var(--bleu); outline-offset: 1px; }

/* Tools. */
.jw-service-groups { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 2rem 3rem; margin: 1.5rem 0; }
.jw-service-groups h3 { margin-bottom: 0.5rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gris-texte); }
.jw-services { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.jw-services li { padding: 0.375rem 0.75rem; background: var(--page); border: 1px solid var(--filet); border-radius: var(--rayon-md); box-shadow: var(--ombre-xs); font-size: 0.9375rem; font-weight: 500; }
.jw-callout { max-width: 42rem; margin: 0 0 1.75rem; padding: 1.25rem 1.5rem; background: var(--page); border: 1px solid var(--filet); border-radius: var(--rayon-xl); box-shadow: var(--ombre-sm); }
.jw-callout-title { font-size: 1.375rem; line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; margin-bottom: 0.375rem; }
.jw-callout a, .jw-post p a { color: var(--bleu); text-underline-offset: 0.2em; }
.jw-post h3.jw-sub { margin: 0.5rem 0 0.375rem; font-size: 1.25rem; }
.jw-post .jw-badge { min-height: 1.5rem; font-size: 0.875rem; vertical-align: 0.05em; }

/* Documents. */
.jw-doc { max-width: 36rem; margin: 1.5rem 0; padding: 1rem 1.25rem; background: var(--page); border: 1px solid var(--filet); border-radius: var(--rayon-xl); box-shadow: var(--ombre-sm); }
.jw-doc-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.jw-doc-title { font-size: 1.125rem; font-weight: 600; }
.jw-doc-meta { margin-top: 0.125rem; font-size: 0.875rem; color: var(--gris-texte); }
.jw-doc-lines { display: grid; gap: 0.375rem; margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px solid var(--filet); font-size: 0.9375rem; color: var(--texte-doux); }

/* Phones. */
.jw-phones { display: flex; gap: 1.25rem; align-items: flex-start; padding-top: 0.5rem; }
.jw-phones figure { flex: 1 1 0; min-width: 0; }
.jw-phones figure:nth-child(2) { margin-top: 2.5rem; }
.jw-phones img { width: 100%; height: auto; border: 1px solid var(--filet); border-radius: 1.5rem; box-shadow: 0 18px 40px -22px oklch(0 0 0 / 0.3); background: var(--page); }

/* Security: a pinned message. */
.jw-message--pinned { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon-xl); }
.jw-pin { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8125rem; font-weight: 500; color: var(--gris-texte); }
.jw-pin svg { width: 0.875rem; height: 0.875rem; }
.jw-facts { display: grid; grid-template-columns: 12rem minmax(0, 1fr); max-width: 50rem; margin-top: 0.75rem; border-top: 1px solid var(--filet); }
.jw-facts dt, .jw-facts dd { margin: 0; padding: 0.875rem 0; border-bottom: 1px solid var(--filet); }
.jw-facts dt { font-weight: 600; padding-right: 1.5rem; }
.jw-facts dd { color: var(--texte-doux); }

/* Answers shown as agent messages (the no-script questions and answers). */
.jw-answer { margin: 0 0 1rem; padding: 0.875rem 1rem; background: var(--agent-soft); border-radius: var(--rayon-lg); }
.jw-answer p { max-width: 40rem; }

.jw-footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; padding: 2.5rem 4rem 3rem;
  border-top: 1px solid var(--filet); font-size: 0.9375rem; color: var(--texte-doux);
}
.jw-footer-name { font-weight: 600; color: var(--encre); }
.jw-footer address { font-style: normal; }
.jw-footer nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; align-items: flex-start; }
.jw-footer nav a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--texte-doux); text-underline-offset: 0.2em; }
.jw-footer nav a:hover { color: var(--encre); }

@media (max-width: 1100px) {
  .jw-feed { padding: 0 1.5rem 4rem; }
  .jw-footer { padding-inline: 1.5rem; }
  .jw-post--split { grid-template-columns: minmax(0, 1fr); }
  .jw-try { position: static; max-width: 32.5rem; }
  .jw-phones { max-width: 34rem; }
}
@media (max-width: 640px) {
  .jw-feed { padding: 0 1rem 3rem; }
  .jw-footer { padding-inline: 1rem; }
  .jw-post h2 { font-size: 1.75rem; }
  .jw-post-lede { font-size: 1.0625rem; }
  .jw-message--lg { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.75rem; }
  .jw-message--lg .jw-avatar { width: 2.5rem; height: 2.5rem; }
  .jw-message--lg.jw-message--agent { padding: 1.25rem 1rem 1.5rem 0.75rem; }
  .jw-message--lg:not(.jw-message--agent) { padding: 1.25rem 1rem 0.75rem 0.75rem; }
  .jw-steps li { grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0.75rem; }
  .jw-service-groups { grid-template-columns: minmax(0, 1fr); }
  .jw-callout-title { font-size: 1.1875rem; }
  .jw-facts { grid-template-columns: minmax(0, 1fr); }
  .jw-facts dt { padding: 0.875rem 0 0; border-bottom: 0; }
  .jw-facts dd { padding-top: 0.125rem; }
  .jw-try dl { grid-template-columns: 6rem minmax(0, 1fr); }
  .jw-phones { gap: 0.75rem; }
  .jw-phones figure:nth-child(2) { margin-top: 1.5rem; }
}

/* Demo forms: short card and full form share field styling. */
/* The closing request reuses the first screen's demo card. */
.jw-demo-form {
  display: grid; gap: 1rem; max-width: 46rem; margin-top: 1.5rem; padding: 1.75rem;
  background: var(--page); border: 1px solid var(--filet); border-radius: var(--rayon-xl);
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.05), 0 8px 24px -12px oklch(0 0 0 / 0.12);
}
.jw-demo-form [data-form-body] { display: grid; gap: 1.25rem; }
.jw-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.jw-field--wide { grid-column: 1 / -1; }
.jw-field label { display: block; margin-bottom: 0.375rem; font-size: 0.875rem; font-weight: 500; color: var(--texte-doux); }
.jw-demo-form input, .jw-demo-form select, .jw-demo-form textarea {
  width: 100%; min-height: 2.75rem; padding: 0.625rem 0.75rem; font-size: 1rem; line-height: 1.4;
  background: var(--page); border: 1px solid var(--gris-texte); border-radius: var(--rayon-md);
}
.jw-demo-form input, .jw-demo-form select { padding-block: 0; }
.jw-demo-form textarea { resize: vertical; }
.jw-demo-form input:focus-visible, .jw-demo-form select:focus-visible, .jw-demo-form textarea:focus-visible { outline: 3px solid var(--bleu); outline-offset: 1px; }
.jw-demo-form [aria-invalid="true"], .jw-demo-short [aria-invalid="true"] { border-color: var(--rouge); }
.jw-demo-form .jw-button--primary { justify-self: start; min-height: 2.75rem; padding: 0 1.25rem; font-size: 0.9375rem; }
.jw-field-error { margin-top: 0.375rem; font-size: 0.875rem; font-weight: 500; color: var(--rouge); }
.jw-field-hint { margin-top: 0.375rem; font-size: 0.8125rem; color: var(--gris-texte); }
.jw-fallback { max-width: none; font-size: 0.9375rem; color: var(--texte-doux); }
.jw-fallback a, .jw-form-status a, .jw-rgpd a, .jw-demo-short small a { color: var(--bleu); text-underline-offset: 0.2em; }
.jw-demo-form .jw-rgpd { max-width: 30rem; font-size: 0.8125rem; line-height: 1.5; color: var(--gris-texte); }
.jw-form-status { font-size: 1rem; }
.jw-form-status:empty {
  /* Kept in the accessibility tree so the live region announces its first message; out of flow so it adds no gap. */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
.jw-form-status p { max-width: none; margin-bottom: 0.75rem; color: var(--rouge); font-weight: 500; }
.jw-form-status:focus-visible { outline: 3px solid var(--bleu); outline-offset: 4px; }
.jw-demo-short [data-form-body] { display: grid; gap: 0.625rem; }
.jw-demo-short .jw-field-error { margin-top: 0.25rem; }
.jw-demo-short .jw-fallback { font-size: 0.8125rem; }
.jw-demo-short small a { white-space: nowrap; }
/* Honeypot: off-screen but still rendered, so bots that fill every input fill it. */
.jw-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 640px) {
  .jw-form-grid { grid-template-columns: minmax(0, 1fr); }
  .jw-demo-form { padding: 1.25rem; }
}

/* Long-form legal pages: readable measure, tight heading groups. */
.jw-legal { max-width: 46rem; margin: 0 auto; padding: 3.5rem 1.5rem 4.5rem; }
.jw-legal h1 { margin: 0 0 1rem; font-size: 2.25rem; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.jw-legal .jw-lede { margin: 0 0 2.5rem; max-width: 40rem; }
.jw-legal section { margin-top: 2.25rem; }
.jw-legal h2 { margin: 0 0 0.5rem; font-size: 1.25rem; line-height: 1.3; letter-spacing: -0.01em; }
.jw-legal p { max-width: 36rem; margin: 0 0 0.75rem; line-height: 1.65; color: var(--texte-doux); text-wrap: pretty; }
.jw-legal a { color: var(--encre); text-underline-offset: 0.2em; }
@media (max-width: 640px) {
  .jw-legal { padding: 2.5rem 1rem 3rem; }
  .jw-legal h1 { font-size: 1.75rem; }
}