/* /organizations/ and /web/ (site refresh 2026-10-19, page lane B). Additive: tokens,
   controls, the page column, chapters, role panels, steps, the FAQ and the close all come
   from styles.css, pages.css, soft.css, pages-art.css and app-page.css (both routes carry
   body.app-page so they share /app/'s rhythm and its phone rails). This file draws only
   what those routes do not have: the browser window that frames a real web capture, the
   four-up panels, the price panel and the web-or-phone table.
   Every colour is a token (light-dark pairs live in styles.css and soft.css); type stays
   on 13/15/17/20 and the display triples; radii on 16/28/40/pill. */

/* ─── The browser window ──────────────────────────────────────────────────────────
   A raised pearl frame with a slim bar (three decorative dots; the capture's truth tag was
   retired on 2026-10-19) over a recessed view. The capture is a real desktop screenshot, so the view
   crops it to the part that matters and draws it near its native scale (readable),
   rather than shrinking a whole 1440px screen into a thumbnail. Per capture, --zoom is
   the image width as a multiple of the view, --x and --y move the crop (percent of the
   image), --ar is the view's shape. The whole view links to the full-size PNG. */
.browser {
  --zoom: 1;
  --x: 0;
  --y: 0;
  --ar: 16 / 10;
  position: relative;
  margin: 0;
  padding: 0 10px 10px;
  border: 1px solid light-dark(rgb(255 255 255 / 70%), var(--rim-dark));
  border-radius: var(--r-28);
  background: var(--surface);
  box-shadow: var(--e-raised-lg);
}
.browser__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 0 4px 0 8px;
}
.browser__dots {
  display: flex;
  flex: none;
  gap: 7px;
}
.browser__dots > span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
}
.browser__view {
  position: relative;
  display: block;
  aspect-ratio: var(--ar);
  overflow: hidden;
  border-radius: var(--r-16);
  background: var(--surface-lift);
  box-shadow: var(--e-inset-sm);
}
.browser__view > img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: calc(var(--zoom) * 100%);
  max-width: none;
  height: auto;
  transform: translate(calc(var(--x) * -1%), calc(var(--y) * -1%));
}
.browser__view::after {
  /* A hairline rim over the picture so a white capture never melts into the frame. */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--border);
  pointer-events: none;
}
.browser__view:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.browser__open {
  margin: 10px 4px 0;
  color: var(--ink-secondary);
  font-size: var(--fs-13);
  line-height: var(--lh-ui);
}

/* Per-capture crops, measured on the 1440x900 captures (public/previews/web/manifest.json).
   Every console capture has a 190px navigation rail on the left (16% of the image); the
   crops start just right of it, so the page itself draws at about two thirds of its own
   size in a seven-column window. The two hero windows keep the rail for context. */
.browser[data-shot='org-overview'],
.browser[data-shot='team-schedule'] {
  --zoom: 1.17;
  --x: 14.5;
  --ar: 16 / 9;
}
.browser[data-shot='org-schedule'],
.browser[data-shot='family-home'],
.browser[data-shot='team-events'],
.browser[data-shot='team-attendance'],
.browser[data-shot='roster-import'],
.browser[data-shot='pay'] {
  --zoom: 1.22;
  --x: 17.5;
  --y: 11;
}
.browser[data-shot='pay'] {
  /* The review card ends at 76% of the page; no empty floor under it. */
  --ar: 1.85;
}
.browser[data-shot='org-reports'] {
  /* The taller report page: show the result and its table, not the filters. */
  --zoom: 1.22;
  --x: 17.5;
  --y: 51;
  --ar: 1.9;
}
.browser[data-shot='org-site-public'] {
  /* The public page is a centred 586px column; draw it near full size. */
  --zoom: 1.75;
  --x: 23;
  --y: 3;
}

/* A phone-browser capture riding the window's lower right corner (desktop), and taking the
   window's place on phones, where a cropped desktop page would be too small to read. */
.browser__phone {
  position: absolute;
  right: -20px;
  bottom: -28px;
  z-index: 2;
  display: none;
  width: 196px;
  aspect-ratio: 390 / 600;
  overflow: hidden;
  border: 6px solid var(--surface);
  border-radius: var(--r-28);
  background: var(--surface-lift);
  box-shadow: var(--e-raised-lg);
}
.browser__phone > img {
  display: block;
  width: 100%;
  height: auto;
}
.browser__phone:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.browser--duo .browser__phone {
  display: block;
}
.browser--duo .browser__view {
  margin-right: 120px;
}

/* A long word in a five-column heading ("organization.") must wrap rather than push the
   page sideways when a reader enlarges text (check-routes S3, 150% text at 1024). */
.console-page :is(h1, h2, h3) {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ─── Chapters with a browser stage ───────────────────────────────────────────────
   Copy diet (2026-10-20): a chapter is a headline, one line and at most three short
   callout labels in four columns; the window takes the other eight. */
@media (min-width: 1024px) {
  .console-page .chapter {
    align-items: center;
  }
}
.console-page .chapter__copy {
  grid-column: 1 / 5;
}
.console-page .chapter__stage {
  grid-column: 5 / 13;
}
.console-page .chapter--flip .chapter__copy {
  grid-column: 9 / 13;
}
.console-page .chapter--flip .chapter__stage {
  grid-column: 1 / 9;
}
.callout-list {
  display: grid;
  max-width: 40ch;
  margin: var(--space-lede) 0 0;
  padding: 0;
  list-style: none;
}
.callout-list > li {
  position: relative;
  padding: 10px 0 10px 20px;
  border-top: 1px solid var(--border);
  color: var(--ink);
  font-size: var(--fs-15);
  line-height: var(--lh-ui);
  text-wrap: pretty;
}
.callout-list > li::before {
  content: '';
  position: absolute;
  top: calc(10px + 0.55em);
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-secondary);
}
.console-page .chapter__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  margin: var(--space-block) 0 0;
  font-size: var(--fs-15);
  line-height: var(--lh-ui);
}

/* ─── Hero ──────────────────────────────────────────────────────────────────────── */
.console-hero {
  align-items: center;
  padding-top: var(--space-top);
}
.console-hero__copy {
  grid-column: 1 / 6;
  min-width: 0;
}
.console-hero__copy .pages-title {
  margin: 0 0 var(--space-head);
}
.console-hero__lede {
  max-width: 40ch;
  margin: 0 0 var(--space-lede);
}
.console-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.console-hero__actions .button {
  height: var(--btn-lg);
  padding-inline: 28px;
}

.console-hero__stage {
  grid-column: 6 / 13;
  min-width: 0;
}

/* ─── Four-up panels (organization tools, workspaces, roles) ─────────────────────────────── */
.console-page .roles__grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.console-page .roles__grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.console-page .role-card p {
  margin: var(--space-head) 0 0;
  color: var(--ink);
  font-size: var(--fs-15);
  line-height: var(--lh-prose);
  text-wrap: pretty;
}
/* A card's title links to its chapter or page. */
.card-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.card-link:hover {
  text-decoration-thickness: 2px;
}

/* ─── Stat lines (/organizations/ pricing): each price stands alone ──────────────── */
.stat-lines {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-inline: 0;
  margin-bottom: 0;
  padding: 8px;
  border: 1px solid light-dark(rgb(255 255 255 / 70%), var(--rim-dark));
  border-radius: var(--r-40);
  box-shadow: var(--e-raised-lg);
}
.stat-lines__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px 24px;
}
.stat-lines__item:nth-child(3n + 2),
.stat-lines__item:nth-child(3n + 3) {
  border-left: 1px solid var(--border);
}
.stat-lines__item:nth-child(n + 4) {
  border-top: 1px solid var(--border);
}
.stat-lines dt {
  order: 2;
  margin: 8px 0 0;
  color: var(--ink);
  font-size: var(--fs-17);
  font-weight: 600;
  line-height: var(--lh-ui);
}
.stat-lines dd {
  order: 3;
  margin: 2px 0 0;
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-ui);
}
.stat-lines .stat-lines__value {
  order: 1;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--d-price);
  font-weight: 700;
  line-height: var(--d-price-lh);
  font-variant-numeric: lining-nums tabular-nums;
}

/* ─── Two short statements side by side (/organizations/ teams and roles) ─────────── */
.console-pair {
  row-gap: var(--space-section);
}
.console-pair__item {
  grid-column: span 6;
  min-width: 0;
}
.console-page :is(.console-pair__item, .which__copy) h2 {
  margin: 0;
}
.console-page .console-pair__item .chapter-lede {
  max-width: 44ch;
  margin: var(--space-head) 0 0;
}

/* Short cards stack on phones instead of riding a swipe rail. */
@media (max-width: 760px) {
  .console-page .roles__grid--stack {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
    scroll-snap-type: none;
  }
}
.price-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-block) 32px;
  margin-top: var(--space-block);
}
.price-foot__note {
  max-width: 62ch;
  margin: 0;
  color: var(--ink-secondary);
  font-size: var(--fs-15);
  line-height: var(--lh-prose);
  text-wrap: pretty;
}
.price-foot__action {
  display: grid;
  justify-items: start;
}

/* ─── Web or phone (/web/): one row per job, a tick where it lives ──────────────── */
.which {
  align-items: center;
  row-gap: var(--space-lede);
}
.which__copy {
  grid-column: 1 / 6;
  min-width: 0;
}
.console-page .which__copy .chapter-lede {
  max-width: 32ch;
  margin: var(--space-head) 0 0;
}
.tick-table {
  grid-column: 7 / 13;
  min-width: 0;
  padding: 8px 24px;
  border: 1px solid light-dark(rgb(255 255 255 / 70%), var(--rim-dark));
  border-radius: var(--r-40);
  box-shadow: var(--e-raised-lg);
}
.tick-table table {
  width: 100%;
  border-collapse: collapse;
}
.tick-table th,
.tick-table td {
  padding: 10px 0;
  border-top: 1px solid var(--border);
  color: var(--ink);
  font-size: var(--fs-15);
  line-height: var(--lh-ui);
  text-align: left;
}
.tick-table thead th {
  border-top: 0;
  color: var(--ink-secondary);
  font-size: var(--fs-13);
  font-weight: 600;
}
.tick-table tbody th {
  font-weight: 600;
}
.tick-table :is(td, thead th:not(:first-child)) {
  width: 88px;
  text-align: center;
}
.tick-table td > [aria-hidden] {
  font-size: var(--fs-17);
}

/* ─── What you need (/web/): three short items on one line ─────────────────────── */
.need-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-inline: 0;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
}
.need-list + .start__now {
  margin-top: var(--space-block);
}
.need-list > li {
  position: relative;
  padding-left: 20px;
  color: var(--ink);
  font-size: var(--fs-17);
  line-height: var(--lh-ui);
}
.need-list > li + li {
  margin-left: 20px;
}
.need-list > li::before {
  content: '';
  position: absolute;
  top: 0.55em;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-secondary);
}

/* No entrance motion: these are reading pages, every capture is shown finished in every
   state (no JavaScript, reduced motion, print, full-page capture). Hover on a capture
   link lifts the frame like any raised control. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .browser:has(.browser__view:hover) {
    transform: translateY(-2px);
  }
  .browser {
    transition: transform var(--dur-ui) var(--ease-out);
  }
}

/* ─── Narrower desktops ─────────────────────────────────────────────────────────── */
@media (min-width: 761px) and (max-width: 1023px) {
  .console-hero__copy,
  .console-hero__stage,
  .console-page .chapter__copy,
  .console-page .chapter__stage,
  .console-page .chapter--flip .chapter__copy,
  .console-page .chapter--flip .chapter__stage {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .console-hero__stage,
  .console-page .chapter__stage {
    margin-top: var(--space-block);
  }
  .which__copy,
  .tick-table {
    grid-column: 1 / -1;
  }
  .console-page .roles__grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .console-page .roles__grid--4 > .role-card:nth-child(3) {
    border-left: 0;
  }
  .console-page .roles__grid--4 > .role-card:nth-child(n + 3) {
    border-top: 1px solid var(--border);
  }
}
@media (min-width: 761px) and (max-height: 820px) {
  .tick-table :is(th, td) {
    padding-block: 7px;
  }
  .console-hero__copy .t-h1 {
    font-size: var(--d-h2);
    line-height: var(--d-h2-lh);
    letter-spacing: var(--d-h2-ls);
  }
}

/* ─── Phones ────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .console-hero__copy,
  .console-hero__stage {
    grid-column: 1 / -1;
  }
  .console-hero__stage {
    margin-top: var(--space-block);
  }
  .console-hero__lede {
    font-size: var(--fs-17);
    line-height: var(--lh-ui);
  }
  .console-hero__actions .button {
    height: var(--btn-md);
  }
  .browser {
    padding: 0 6px 6px;
    border-radius: var(--r-28);
  }
  .browser__bar {
    min-height: 44px;
    padding: 0 2px 0 6px;
  }
  .browser__dots > span {
    width: 8px;
    height: 8px;
  }
  .browser {
    --ar: 4 / 3;
  }
  .browser[data-shot] {
    --zoom: 2.2;
    --x: 17.5;
    --y: 12;
  }
  .browser[data-shot='org-reports'] {
    --x: 19;
    --y: 50;
  }
  .browser[data-shot='org-site-public'] {
    --zoom: 1.9;
    --x: 24;
    --y: 2;
  }
  .browser[data-shot='team-attendance'] {
    --zoom: 1.9;
  }
  .browser[data-shot='roster-import'] {
    /* The import panel on its own: the part of this page a phone visitor needs. */
    --zoom: 2.9;
    --x: 66;
    --y: 27;
  }
  /* A window with a phone capture shows the phone capture instead of the crop. */
  .browser:has(.browser__phone) .browser__view {
    display: none;
  }
  .browser__phone,
  .browser--duo .browser__phone {
    position: relative;
    right: auto;
    bottom: auto;
    display: block;
    width: min(250px, 100%);
    aspect-ratio: 390 / 470;
    margin: 0 auto;
    border-width: 0;
    border-radius: var(--r-16);
    box-shadow: var(--e-inset-sm);
  }
  .browser--duo .browser__view {
    margin-right: 0;
  }
  /* Inside a phone chapter (display: contents columns), the window follows the lede. */
  .console-page .chapter .browser {
    order: 2;
    width: 100%;
    margin-top: var(--space-lede);
  }
  .console-page .chapter .chapter__links {
    order: 9;
  }
  .console-page .roles__grid--4,
  .console-page .roles__grid--2 {
    grid-template-columns: none;
  }
  .console-page .chapter .callout-list {
    order: 3;
    width: 100%;
    max-width: none;
    margin-top: var(--space-block);
  }
  .stat-lines {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 4px;
    border-radius: var(--r-28);
  }
  .stat-lines__item {
    padding: 12px 14px;
  }
  .stat-lines__item:nth-child(n) {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
  .stat-lines__item:nth-child(-n + 2) {
    border-top: 0;
  }
  .stat-lines__item:nth-child(2n) {
    border-left: 1px solid var(--border);
  }
  .stat-lines dt {
    margin-top: 4px;
    font-size: var(--fs-15);
  }
  .stat-lines dd {
    font-size: var(--fs-13);
  }

  .console-pair__item {
    grid-column: 1 / -1;
  }
  .console-page .console-pair__item .chapter-lede {
    font-size: var(--fs-15);
    line-height: var(--lh-ui);
  }
  .which__copy {
    grid-column: 1 / -1;
  }
  .console-page .which__copy .chapter-lede {
    font-size: var(--fs-15);
    line-height: var(--lh-ui);
  }
  .tick-table {
    grid-column: 1 / -1;
    padding: 4px 16px;
    border-radius: var(--r-28);
  }
  .tick-table :is(th, td) {
    padding-block: 7px;
  }
  .tick-table :is(td, thead th:not(:first-child)) {
    width: 56px;
  }
  .need-list {
    flex-direction: column;
    gap: 8px;
  }
  .need-list > li {
    font-size: var(--fs-15);
  }
  .need-list > li + li {
    margin-left: 0;
  }
}

@media (forced-colors: active) {
  .browser,
  .stat-lines,
  .tick-table {
    border: 1px solid CanvasText;
  }
}