/* FAST user guide v3.
   Breakpoints and container widths are Bootstrap 5's, implemented natively so the
   pages stay dependency-free and work offline:
     xs <576 | sm >=576 | md >=768 | lg >=992 | xl >=1200 | xxl >=1400
   The page is top-aligned inside a fixed-width container — never full-bleed. */

:root {
  --ink: #1c1917; --ink2: #5c534c; --ink3: #8a807a;
  --line: #eae4dd; --line2: #ded5cb;
  --paper: #fff; --wash: #faf8f5; --wash2: #f4efe9;
  --brand: #b4581f; --brand-d: #8a4317; --brand-w: #fbf1e8;
  --r: 14px; --gut: 1.5rem;
  --c-anon: #64748b; --c-client: #a97a12; --c-office: #b4581f;
  --c-operative: #2b7a4b; --c-owner: #2f6bb0; --c-platform: #6250b8; --c-franchisor: #b04360;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 130px; }
body {
  margin: 0; background: var(--wash); color: var(--ink);
  font: 17px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.25; letter-spacing: -.015em; }
a { color: var(--brand-d); }
img { max-width: 100%; }

/* ---- Bootstrap container scale. Top-aligned, never full-bleed. ---- */
.container { width: 100%; margin-right: auto; margin-left: auto;
  padding-right: calc(var(--gut) * .5); padding-left: calc(var(--gut) * .5); }
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } }

main { display: block; padding: 1.8rem 0 3.5rem; }
main > .container + .container { margin-top: 0; }

/* ---- top bar ---- */
.bar { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.bar__in { display: flex; align-items: center; gap: 1.1rem; padding-top: .6rem;
  padding-bottom: .6rem; overflow-x: auto; }
.brand { display: flex; align-items: center; gap: .5rem; text-decoration: none;
  color: var(--ink); flex: none; }
.brand .mark { width: 28px; height: 28px; border-radius: 8px; background: var(--brand-w);
  display: grid; place-items: center; font-size: .95rem; }
.brand b { font-size: .92rem; white-space: nowrap; }
.bar__t { color: var(--ink3); font-size: .8rem; }
.barnav { display: flex; gap: .1rem; flex: 1; }
.barnav a { padding: .3rem .55rem; border-radius: 7px; font-size: .79rem; color: var(--ink2);
  text-decoration: none; white-space: nowrap; }
.barnav a:hover { background: var(--wash2); color: var(--ink); }
.barnav a.on { background: var(--brand-w); color: var(--brand-d); font-weight: 600; }
.up { flex: none; margin-left: auto; font-size: .77rem; font-weight: 600; color: var(--ink2);
  text-decoration: none; white-space: nowrap; }

/* ---- progress bar: how far through the journey (small screens) ---- */
.prog { position: sticky; top: 45px; z-index: 25; background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.prog__in { display: flex; align-items: center; gap: .8rem; padding-top: .45rem; padding-bottom: .45rem; }
.prog__t { font-size: .78rem; color: var(--ink2); white-space: nowrap; }
.prog__t b { color: var(--brand-d); }
.prog__bar { flex: 1; height: 4px; border-radius: 99px; background: var(--wash2); overflow: hidden; }
.prog__bar i { display: block; height: 100%; width: 0; background: var(--brand);
  transition: width .18s ease; }
@media (min-width: 992px) { .prog { display: none; } }

/* ---- headings ---- */
h1 { font-size: clamp(1.6rem, 4.2vw, 2.3rem); margin: .3rem 0 .8rem; }
h2 { font-size: 1.28rem; margin: 2.8rem 0 1rem; }
.crumb { font-size: .8rem; color: var(--ink3); margin: 0; }
.crumb a { color: var(--ink2); text-decoration: none; }
.lead { font-size: 1.1rem; color: var(--ink2); max-width: 62ch; margin: 0 0 1.4rem; }
.count { font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3);
  font-weight: 700; margin: 2rem 0 .8rem; }
.note { color: var(--ink3); font-size: .92rem; margin: 0 0 .9rem; max-width: 62ch; }

/* The 64ch cap made this wrap two lines early on a wide container while the right-hand side sat
   empty (round-2 feedback). The block is one or two sentences, so the container width already
   holds it to a readable measure; 78ch is a ceiling for xxl, not a working limit. */
.why { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: var(--r); padding: 1.05rem 1.25rem; }
.why p { margin: 0; color: var(--ink2); max-width: 78ch; }
.why p + p { margin-top: .55rem; }

/* ---- page header: the title and the "why" as ONE frame ----
   Round-3 feedback: the h1 and the why card under it read as two unrelated slabs, and the card's
   top edge sat hard against the title with no room to breathe. They are one thing — what this
   flow is, and why it exists — so they are now one framed header with a rule between them, and
   the gap to the steps below (.guide) is wider than the gap inside the frame, which is what makes
   the grouping read at a glance. */
.hero { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: var(--r); padding: 1.3rem 1.4rem 1.4rem; margin: .8rem 0 0; }
.hero h1 { margin: 0; }
.hero .why { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0;
  padding: 1rem 0 0; margin: 1rem 0 0; }
@media (max-width: 575.98px) { .hero { padding: 1rem 1.05rem 1.1rem; } }

/* ---- role chips ---- */
.chip { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .69rem;
  font-weight: 700; white-space: nowrap; }
.chip--anon { background: #f1f5f9; color: #334155; }
.chip--client { background: #fff6dd; color: #86610b; }
.chip--office { background: #fbf1e8; color: #8a4317; }
.chip--operative { background: #eaf6ee; color: #1f6b3a; }
.chip--owner { background: #e9f1fb; color: #24558f; }
.chip--platform { background: #ede9fb; color: #4c3a95; }
.chip--franchisor { background: #fdf0f3; color: #97324b; }

/* ---- guide grid: rail + steps ---- */
/* The selector carries `main > .container +` on purpose. `main > .container + .container
   { margin-top: 0 }` above is more specific than a bare `.guide`, so round-2's bump from
   2rem to 2.6rem was written but never applied — measured 2026-09-15: the steps started at
   exactly the pixel the header ended on, 0px between them. This selector beats the reset. */
main > .container + .container.guide { margin-top: 3.4rem; }
.rail { display: none; }
@media (min-width: 992px) {
  .guide { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 2.2rem;
    align-items: start; }
  .rail { display: block; position: sticky; top: 74px; max-height: calc(100vh - 100px);
    overflow-y: auto; padding-right: .3rem; }
}
.rail__h { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3);
  font-weight: 700; margin: 0 0 .5rem; }
.rail ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.rail a { display: grid; grid-template-columns: 1.35rem minmax(0, 1fr); gap: .5rem;
  align-items: start; padding: .3rem .4rem .3rem .55rem; margin-left: -2px;
  border-left: 2px solid transparent; text-decoration: none; color: var(--ink3);
  font-size: .82rem; line-height: 1.35; }
.rail a:hover { color: var(--ink); }
.rail__n { width: 1.35rem; height: 1.35rem; border-radius: 999px; display: grid;
  place-items: center; font-size: .68rem; font-weight: 700; color: #fff; opacity: .45; }
.rail__n--anon { background: var(--c-anon); } .rail__n--client { background: var(--c-client); }
.rail__n--office { background: var(--c-office); } .rail__n--operative { background: var(--c-operative); }
.rail__n--owner { background: var(--c-owner); } .rail__n--platform { background: var(--c-platform); }
.rail__n--franchisor { background: var(--c-franchisor); }
.rail__t { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rail a.on { color: var(--ink); font-weight: 600; border-left-color: var(--brand);
  background: var(--brand-w); border-radius: 0 7px 7px 0; }
.rail a.on .rail__n { opacity: 1; }
.rail a.done .rail__n { opacity: .8; }

/* ---- steps ---- */
.steps { list-style: none; margin: 0; padding: 0; }
.step { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.15rem 1.25rem 1.25rem; margin-bottom: 1rem; scroll-margin-top: 130px; }
.step__hd { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: .8rem;
  align-items: center; }
.step__n { width: 2.1rem; height: 2.1rem; border-radius: 999px; color: #fff; font-weight: 700;
  font-size: .85rem; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.step--anon .step__n { background: var(--c-anon); }
.step--client .step__n { background: var(--c-client); }
.step--office .step__n { background: var(--c-office); }
.step--operative .step__n { background: var(--c-operative); }
.step--owner .step__n { background: var(--c-owner); }
.step--platform .step__n { background: var(--c-platform); }
.step--franchisor .step__n { background: var(--c-franchisor); }
.step__hd h3 { margin: 0; font-size: 1.06rem; }
.step__r { margin: .5rem 0 .35rem 2.9rem; }
.step__p { margin: 0 0 .85rem 2.9rem; color: var(--ink2); }
.step .open { display: inline-block; margin: .6rem 0 0 2.9rem; font-size: .8rem;
  color: var(--ink3); text-decoration: none; }
.step .open:hover { color: var(--brand-d); text-decoration: underline; }
.open__lock { font-size: .7rem; font-weight: 700; color: var(--ink3); background: var(--wash2);
  border-radius: 999px; padding: .08rem .45rem; margin-left: .35rem; white-space: nowrap; }

/* the demo banner on the index pages */
.demo { display: flex; gap: .85rem; align-items: flex-start; background: var(--paper);
  border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: var(--r);
  padding: 1rem 1.2rem; margin: 1.4rem 0 0; }
.demo__i { font-size: 1.3rem; line-height: 1.2; flex: none; }
.demo p { margin: 0; color: var(--ink2); font-size: .93rem; max-width: 66ch; }
.demo p + p { margin-top: .4rem; }
.demo a { font-weight: 600; }
.demo code { background: var(--wash2); padding: .05rem .3rem; border-radius: 5px; font-size: .9em; }

.shot { display: block; width: 100%; margin: 0 0 0 2.9rem; padding: 0; position: relative;
  width: calc(100% - 2.9rem); border: 1px solid var(--line2); border-radius: 10px;
  overflow: hidden; background: var(--wash2); cursor: zoom-in; }
.shot img { display: block; width: 100%; height: auto; }
.shot__zoom { position: absolute; right: .5rem; bottom: .5rem; width: 1.7rem; height: 1.7rem;
  border-radius: 7px; background: rgba(28,25,23,.62); color: #fff; display: grid;
  place-items: center; font-size: .8rem; opacity: 0; transition: opacity .15s; }
.shot:hover .shot__zoom { opacity: 1; }
.shot--phone { max-width: 300px; padding: 6px; background: #211d1a; border-color: #211d1a;
  border-radius: 20px; }
.shot--phone img { border-radius: 15px; }

/* ---- the slim "system does this" strip ---- */
.sys { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: .8rem;
  margin: -.2rem 0 1rem; padding-left: 1.25rem; }
.sys__i { width: 2.1rem; height: 2.1rem; display: grid; place-items: center; color: var(--ink3);
  font-size: .9rem; }
.sys > div { background: var(--wash2); border: 1px dashed var(--line2); border-radius: 10px;
  padding: .65rem .95rem; margin-right: 1.25rem; }
.sys b { display: block; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink3); margin-bottom: .2rem; }
.sys ul { margin: 0; padding-left: 1.1rem; }
.sys li { color: var(--ink2); font-size: .9rem; line-height: 1.55; }

/* ---- xs / sm: two steps per line so the screenshots stop eating the scroll ---- */
@media (max-width: 767.98px) {
  .steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem;
    align-items: stretch; }
  .step { margin-bottom: 0; padding: .8rem .8rem 1rem; display: flex; flex-direction: column; }
  .step .open { margin-top: auto; padding-top: .55rem; }
  .step__hd { grid-template-columns: 1.7rem minmax(0, 1fr); gap: .5rem; align-items: start; }
  .step__n { width: 1.7rem; height: 1.7rem; font-size: .76rem; }
  .step__hd h3 { font-size: .93rem; line-height: 1.3; }
  .step__r { margin: .45rem 0 .3rem; }
  .step__p { margin: 0 0 .6rem; font-size: .86rem; line-height: 1.5; }
  .shot { margin-left: 0; width: 100%; }
  .shot--phone { max-width: 100%; padding: 4px; border-radius: 12px; }
  .shot--phone img { border-radius: 9px; }
  .shot__zoom { opacity: 1; width: 1.5rem; height: 1.5rem; }
  .step .open { margin-left: 0; font-size: .76rem; }
  .sys { grid-column: 1 / -1; grid-template-columns: 1.7rem minmax(0, 1fr); gap: .5rem;
    margin: .2rem 0; padding-left: 0; }
  .sys > div { margin-right: 0; }
  .sys li { font-size: .85rem; }
}
/* xs only: the tallest desktop shots get a cap so a card stays scannable */
@media (max-width: 575.98px) {
  .shot { max-height: 210px; }
  .shot img { object-fit: cover; object-position: top; max-height: 210px; }
  .shot--phone { max-height: none; }
  .shot--phone img { max-height: none; object-fit: contain; }
}

/* ---- lightbox ---- */
.lb { position: fixed; inset: 0; z-index: 60; background: rgba(24,20,18,.96);
  display: grid; place-items: center; padding: 3.2rem 1rem; }
.lb[hidden] { display: none; }
.lb figure { margin: 0; max-width: 100%; max-height: 100%; display: flex;
  flex-direction: column; align-items: center; gap: .7rem; }
.lb img { max-width: 100%; max-height: calc(100vh - 8rem); object-fit: contain;
  border-radius: 8px; background: #fff; }
.lb figcaption { color: #f3ece6; font-size: .88rem; text-align: center; max-width: 62ch; }
.lb button { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0;
  border-radius: 999px; width: 2.6rem; height: 2.6rem; font-size: 1.2rem; cursor: pointer; }
.lb button:hover { background: rgba(255,255,255,.24); }
.lb__x { top: 1rem; right: 1rem; }
.lb__p { left: 1rem; top: 50%; transform: translateY(-50%); }
.lb__nx { right: 1rem; top: 50%; transform: translateY(-50%); }
/* xs: side arrows have nowhere to sit, so they move to a bottom bar */
@media (max-width: 575.98px) {
  .lb { padding: 3.6rem .6rem 5rem; }
  .lb img { max-height: calc(100vh - 11rem); }
  .lb__p, .lb__nx { top: auto; bottom: 1rem; transform: none; width: 3rem; height: 3rem; }
  .lb__p { left: 1.5rem; } .lb__nx { right: 1.5rem; }
}

/* ---- journey cards ---- */
.jgrid { display: grid; gap: .7rem; }
/* Hover changes border and background only. It used to translate — the home cards moved up 2px
   and the flow cards moved right 2px, so the two read as different components (round-2). */
.j { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: .9rem;
  align-items: center; background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1rem 1.15rem; text-decoration: none; color: inherit;
  transition: border-color .15s, background-color .15s; }
.j:hover { border-color: var(--brand); background: var(--brand-w); }
.j__i { font-size: 1.4rem; }
.j__t { font-weight: 700; font-size: 1.03rem; grid-column: 2; }
.j__w { grid-column: 2; font-size: .89rem; color: var(--ink2); }
.j__n { grid-column: 3; grid-row: 1 / span 2; font-size: .79rem; font-weight: 600;
  color: var(--brand-d); white-space: nowrap; }
@media (max-width: 575.98px) {
  .j { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .j__n { grid-column: 2; grid-row: auto; }
}

/* ---- home page blocks ---- */
.spine { list-style: none; margin: 1.5rem 0 .8rem; padding: 0; display: grid; gap: .5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .spine { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.spine li { background: var(--paper); border: 1px solid var(--line);
  border-top: 3px solid var(--brand); border-radius: 10px; padding: .65rem .8rem; }
.spine b { display: block; font-size: .95rem; }
.spine span { font-size: .79rem; color: var(--ink3); }

.doors { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .doors { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.door { display: flex; flex-direction: column; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r); padding: 1.3rem;
  text-decoration: none; color: inherit; transition: border-color .15s, background-color .15s; }
.door:hover { border-color: var(--brand); background: var(--brand-w); }
.door__i { font-size: 1.7rem; margin-bottom: .45rem; }
.door__k { font-size: .69rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink3);
  font-weight: 700; }
.door__n { font-size: 1.12rem; font-weight: 700; margin: .1rem 0 .4rem; }
.door__d { font-size: .9rem; color: var(--ink2); margin-bottom: 1rem; }
.door__g { margin-top: auto; font-size: .81rem; font-weight: 700; color: var(--brand-d); }

.who { display: grid; gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 576px) { .who { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .who { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.who > div { background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: .85rem 1rem; }
.who p { margin: .4rem 0 0; font-size: .9rem; color: var(--ink2); }

/* ---- pagers + footer ---- */
.pagers { display: flex; gap: .8rem; margin-top: 2.4rem; flex-wrap: wrap; }
.pager { background: var(--paper); border: 1px solid var(--line); border-radius: 10px;
  padding: .6rem .95rem; text-decoration: none; font-size: .86rem; font-weight: 600; }
.pager:hover { border-color: var(--brand); }
.pager--n { margin-left: auto; }
.foot { border-top: 1px solid var(--line); padding: 1.4rem 0; }
.foot p { margin: 0; font-size: .81rem; color: var(--ink3); }

@media print { .bar, .prog, .rail, .pagers, .open, .shot__zoom { display: none !important; }
  .guide { display: block; } .steps { display: block; } }