/* ══════════════════════════════════════════════════════════════
   État d'Âme · Tour pages  (tour.css)
   ──────────────────────────────────────────────────────────────
   Loaded after css/dusk.css and css/welcome.css by both tour
   pages, /welcome/for-practices/ and /welcome/for-organizations/.
   They reuse the welcome page's shell, header, buttons, section
   furniture and reveal motion wholesale; everything here is
   specific to a tour: the role split, the app frames and the
   boundary table.
   ══════════════════════════════════════════════════════════════ */

/* ── Hero ───────────────────────────────────────────────────── */

.fp-hero.dusk-hero { padding: calc(140px + env(safe-area-inset-top)) var(--wl-gutter) 96px; }
.fp-hero .dusk-disc { right: 9%; top: 88px; width: 74px; height: 74px; }
.fp-hero-inner { max-width: 62ch; }
.fp-hero h1 {
  margin: 20px 0 0;
  color: var(--sky-ink);
  font: 400 clamp(40px, 4.8vw, 62px)/1.05 'Source Serif 4', serif;
  letter-spacing: -.02em;
}
.fp-hero h1 em { font-style: italic; color: #f0c39c; }
.fp-hero p { margin-top: 20px; color: var(--sky-copy); font-size: 16.5px; line-height: 1.62; }

.fp-back {
  display: inline-flex; align-items: center; gap: 7px;
  color: rgba(232,208,193,.82); font-size: 13px; font-weight: 600; text-decoration: none;
}
.fp-back:hover { color: var(--sky-ink); }
.fp-back .material-symbols-rounded { font-size: 17px; }

/* ── The boundary table ─────────────────────────────────────── */

/* The one claim the whole page rests on, laid out so the rows can be
   compared down a column rather than read as three separate cards. */
.fp-boundary { position: relative; z-index: 4; margin-top: -52px; }
.fp-boundary-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  border: 1px solid var(--dusk-line); border-radius: var(--wl-radius);
  background: var(--dusk-line); box-shadow: var(--wl-sh-3); overflow: hidden;
}
.fp-role { display: flex; flex-direction: column; padding: 28px 26px; background: var(--dusk-card); }
.fp-role-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: rgba(var(--fp-r), .13); color: rgb(var(--fp-r));
}
.fp-role-icon .material-symbols-rounded { font-size: 21px; }
.fp-role h3 { margin: 16px 0 4px; font: 400 22px/1.15 'Source Serif 4', serif; }
.fp-role > p { color: var(--dusk-muted); font-size: 12.5px; }
.fp-role dl { margin-top: 18px; display: grid; gap: 13px; }
.fp-role dt {
  color: var(--dusk-muted);
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.fp-role dd { margin-top: 3px; color: var(--dusk-copy); font-size: 13.5px; line-height: 1.5; }
.fp-role dd.fp-no { display: flex; align-items: flex-start; gap: 7px; color: var(--dusk-ink); font-weight: 600; }
.fp-role dd.fp-no .material-symbols-rounded { flex-shrink: 0; margin-top: 1px; font-size: 16px; color: var(--dusk-rust); }
.fp-r-admin  { --fp-r: var(--dusk-purple-rgb); }
.fp-r-clin   { --fp-r: var(--dusk-green-rgb); }
.fp-r-client { --fp-r: var(--dusk-rust-rgb); }

/* ── App frames ─────────────────────────────────────────────── */

/* A restrained browser shell. These are desktop admin screens, and a
   bare rectangle on cream reads as a stray image rather than a product. */
.fp-frame {
  overflow: hidden;
  border: 1px solid var(--dusk-line); border-radius: 16px;
  background: var(--dusk-card); box-shadow: var(--wl-sh-3);
}
.fp-frame-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px; border-bottom: 1px solid var(--dusk-line);
  background: var(--dusk-card-2);
}
.fp-frame-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--dusk-line); }
.fp-frame-bar span {
  margin-left: 8px; padding: 4px 12px; border-radius: 999px;
  background: var(--dusk-bg); color: var(--dusk-muted);
  font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fp-frame img { display: block; width: 100%; height: auto; }

.fp-caption {
  margin-top: 13px; color: var(--dusk-muted); font-size: 12.5px; line-height: 1.55; text-align: center;
}

/* ── Enlarging a screenshot ─────────────────────────────────── */

/* The button is wrapped around the image by js/welcome.js, so it has
   to inherit the frame's shape rather than impose its own. */
.fp-expand {
  position: relative; display: block; width: 100%;
  padding: 0; border: 0; background: none; cursor: zoom-in;
}
.fp-expand img { display: block; }
.fp-expand-hint {
  position: absolute; right: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px 6px 8px; border-radius: 999px;
  background: rgba(38, 28, 25, .74); color: #fdf6ef;
  font: 700 11px/1 'Albert Sans', sans-serif;
  opacity: 0; transform: translateY(4px);
  transition: opacity .2s var(--smooth), transform .2s var(--smooth);
}
.fp-expand-hint .material-symbols-rounded { font-size: 15px; }
.fp-expand:hover .fp-expand-hint,
.fp-expand:focus-visible .fp-expand-hint { opacity: 1; transform: none; }
.fp-expand:focus-visible { outline: 2px solid var(--dusk-rust); outline-offset: 3px; }
/* No hover on a touch screen, so the hint has to stand there. */
@media (hover: none) {
  .fp-expand-hint { opacity: 1; transform: none; }
}

.fp-lightbox {
  width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  background: none; color: #fdf6ef;
}
.fp-lightbox::backdrop { background: rgba(28, 20, 18, .88); }
.fp-lightbox-viewport {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 58px 16px 62px;
  overflow: auto; overscroll-behavior: contain;
}
.fp-lightbox img {
  max-width: 100%; max-height: 100%;
  border-radius: 10px; cursor: zoom-in;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .7);
}
/* Full size, panned by scrolling the viewport around it. */
.fp-lightbox.is-zoomed .fp-lightbox-viewport { align-items: flex-start; }
.fp-lightbox.is-zoomed img {
  max-width: none; max-height: none;
  width: min(1600px, 190vw); cursor: zoom-out;
}
.fp-lightbox-caption {
  position: absolute; inset: auto 0 0; padding: 26px 20px 22px;
  color: rgba(253, 246, 239, .82); font-size: 12.5px; text-align: center;
  /* Zoomed, the image scrolls underneath this rather than ending
     above it, so the caption needs its own ground to stay readable. */
  background: linear-gradient(to top, rgba(24, 17, 15, .94), rgba(24, 17, 15, 0));
  pointer-events: none;
}
/* Same reason as the caption: at full size there is picture behind it. */
.fp-lightbox::after {
  content: ''; position: absolute; z-index: 1; inset: 0 0 auto; height: 76px;
  background: linear-gradient(to bottom, rgba(24, 17, 15, .9), rgba(24, 17, 15, 0));
  pointer-events: none;
}
.fp-lightbox-close {
  position: absolute; z-index: 2; top: 14px; right: 14px;
  width: 38px; height: 38px; display: grid; place-items: center;
  padding: 0; border: 1px solid rgba(255, 255, 255, .26); border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fdf6ef; cursor: pointer;
}
.fp-lightbox-close:hover { background: rgba(255, 255, 255, .24); }
.fp-lightbox-close:focus-visible { outline: 2px solid #efad73; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .fp-expand-hint { transition: none; }
}

/* ── Role sections ──────────────────────────────────────────── */

.fp-split { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; gap: 58px; }
.fp-split--flip .fp-split-copy { order: 2; }

.fp-eyebrow-role {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px 6px 8px; border-radius: 999px;
  background: rgba(var(--fp-r), .12); color: rgb(var(--fp-r));
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.fp-eyebrow-role .material-symbols-rounded { font-size: 16px; }

.fp-split h2 {
  margin: 18px 0 0;
  font: 400 clamp(30px, 3.4vw, 42px)/1.1 'Source Serif 4', serif; letter-spacing: -.016em;
}
.fp-split > div > p { margin-top: 16px; color: var(--dusk-copy); font-size: 15.5px; line-height: 1.64; }

.fp-points { margin-top: 26px; display: grid; gap: 17px; list-style: none; padding: 0; }
.fp-points li { display: flex; gap: 13px; }
.fp-points .material-symbols-rounded {
  display: grid; place-items: center;
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px;
  background: rgba(var(--fp-r), .12); color: rgb(var(--fp-r)); font-size: 17px;
}
.fp-points strong { display: block; margin-bottom: 3px; color: var(--dusk-ink); font-size: 14.5px; }
.fp-points span { color: var(--dusk-copy); font-size: 13.5px; line-height: 1.55; }

.fp-stack { display: grid; gap: 22px; }
/* The frames live in their own track so the caption stays out of the
   deck they become on a phone. */
.fp-stack-track { display: grid; gap: 22px; }

/* A quotation of the product's own words, the privacy claim is stronger
   coming from the interface than from marketing copy. */
.fp-quote {
  display: flex; gap: 15px;
  margin-top: 28px; padding: 20px 22px;
  border: 1px solid var(--dusk-line); border-left: 3px solid rgb(var(--fp-r));
  border-radius: 4px 16px 16px 4px; background: var(--dusk-card);
}
.fp-quote .material-symbols-rounded { flex-shrink: 0; color: rgb(var(--fp-r)); font-size: 20px; }
.fp-quote p { color: var(--dusk-ink); font-size: 14px; line-height: 1.6; font-style: italic; }
.fp-quote cite {
  display: block; margin-top: 7px;
  color: var(--dusk-muted); font-size: 11.5px; font-style: normal;
}

/* ── Preview call to action ─────────────────────────────────── */

.fp-try {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
  margin-top: 46px;
}
.fp-try-card {
  display: flex; flex-direction: column;
  padding: 28px 26px 26px;
  border: 1px solid var(--dusk-line); border-radius: var(--wl-radius);
  background: var(--dusk-card);
  transition: transform .3s var(--smooth), box-shadow .3s var(--smooth), border-color .3s;
}
.fp-try-card:hover { transform: translateY(-3px); box-shadow: var(--wl-sh-2); border-color: rgba(var(--dusk-rust-rgb), .3); }
.fp-try-card h3 { margin: 16px 0 8px; font: 400 24px/1.15 'Source Serif 4', serif; }
.fp-try-card p { color: var(--dusk-copy); font-size: 14px; line-height: 1.6; }
.fp-try-card .wl-btn { margin-top: 22px; align-self: flex-start; }

/* The organizations tour has one preview rather than two, because
   reporting and administration are two views of a single account
   reached by one sign-in. Two buttons onto the same workspace read
   as two products. */
.fp-try--single { grid-template-columns: 1fr; max-width: 700px; margin-inline: auto; }
.fp-try-screens {
  display: grid; gap: 12px; margin-top: 20px;
  padding-top: 20px; border-top: 1px solid var(--dusk-line);
  list-style: none;
}
.fp-try-screens li { display: flex; align-items: flex-start; gap: 12px; }
.fp-try-screens .material-symbols-rounded {
  flex-shrink: 0; margin-top: 1px; font-size: 19px; color: rgb(var(--fp-r));
}
.fp-try-screens strong { display: block; font-size: 13.5px; font-weight: 700; }
.fp-try-screens span:not(.material-symbols-rounded) {
  display: block; margin-top: 1px; color: var(--dusk-muted); font-size: 12.5px; line-height: 1.45;
}

.fp-sample-note {
  display: flex; align-items: flex-start; gap: 13px;
  max-width: 760px; margin: 34px auto 0; padding: 18px 22px;
  border: 1px dashed var(--dusk-line); border-radius: 16px;
  color: var(--dusk-copy); font-size: 13.5px; line-height: 1.6;
}
.fp-sample-note .material-symbols-rounded { flex-shrink: 0; margin-top: 1px; color: var(--dusk-muted); font-size: 19px; }

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .fp-split { gap: 40px; }
  .fp-boundary-grid { grid-template-columns: 1fr; }
  .fp-boundary { margin-top: -40px; }
}

@media (max-width: 900px) {
  .fp-split { grid-template-columns: 1fr; }
  .fp-split--flip .fp-split-copy { order: 0; }
  .fp-try { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .fp-hero.dusk-hero { padding-top: calc(132px + env(safe-area-inset-top)); }
  .fp-hero .dusk-disc { right: 7%; top: 72px; width: 54px; height: 54px; }
  .fp-frame-bar span { display: none; }
  .fp-try-card .wl-btn { width: 100%; }

  /* The boundary reads as a table on a wide screen: three columns
     divided by hairlines, compared down a column. On a phone that
     column comparison is gone anyway, so the hairline table gives up
     its shared frame and the three roles become three cards in a
     deck. The generic [data-slider] rules in welcome.css do the
     scrolling; this only undoes the table. */
  .fp-boundary-grid {
    border: 0; border-radius: 0;
    background: none; box-shadow: none;
    /* The single-column rule above lands after welcome.css and would
       leave one explicit track, so the first card takes a 1fr column
       while the rest get the slider's implicit 86% ones. Every column
       has to be implicit for every slide to be one width. */
    grid-template-columns: none;
    /* The base rule sets `overflow: hidden` for the hairline frame.
       Undo it as longhands: a shorthand here, even `visible`, would
       land after welcome.css and cancel the track's own scrolling. */
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 14px;
  }
  .fp-boundary-grid .fp-role {
    border: 1px solid var(--dusk-line); border-radius: var(--wl-radius);
    box-shadow: var(--wl-sh-3);
  }
  /* A screenshot is worth more width than a card is. */
  .fp-stack-track { grid-auto-columns: 92%; }

  /* The three views inside the preview card become one per slide.
     The track bleeds to the card's own padding rather than the page
     gutter, so the next view peeks past the card edge the way the
     page-level decks peek past the screen edge. */
  .fp-try-screens {
    grid-auto-columns: 74%;
    gap: 10px;
    margin-inline: -26px;
    padding: 16px 26px 8px;
  }
  .fp-try-screens li {
    flex-direction: column; align-items: flex-start; gap: 9px;
    padding: 15px 16px;
    border: 1px solid var(--dusk-line); border-radius: 14px;
    background: var(--dusk-card-2);
  }
  .fp-try-screens .material-symbols-rounded { margin-top: 0; font-size: 21px; }
}

/* Which screen these are for. Worth saying next to the preview buttons:
   someone tapping them on a phone gets the phone layout of a tool whose
   whole point is a wide table. */
.fp-device-note {
  display: flex; align-items: flex-start; gap: 13px;
  max-width: 760px; margin: 0 auto 34px; padding: 18px 22px;
  border: 1px solid var(--dusk-line); border-radius: 16px;
  background: var(--dusk-card-2);
  color: var(--dusk-copy); font-size: 13.5px; line-height: 1.6;
}
.fp-device-note strong { color: var(--dusk-ink); }
.fp-device-note .material-symbols-rounded {
  flex-shrink: 0; margin-top: 1px; color: var(--dusk-rust); font-size: 20px;
}