/* The feature pages of 6 Oct 2026 (templates/suite.html: /books/, /bookings/, /hr/, /connect-your-ai/) and the
   troubleshooting guide (templates/errors.html). The sections use features.css; this file adds the hero status, the
   facts strip, the set-up cards, the plain-answers box, the plan cards and the guide. Tokens from site.css (light +
   dark), logical properties so /ar/ and /ur/ mirror. */

.suite-hero h1 { max-width: 18ch; }
.suite-status { margin: -.25rem 0 1rem; }
.suite-facts-sec { padding-block: 1.25rem; }
.suite-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.suite-facts li { display: flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--fg-strong); line-height: 1.4; }
.suite-facts .ico { flex: none; width: 1.6rem; height: 1.6rem; padding: .3rem; border-radius: 50%; background: var(--green-soft); color: var(--green-2); }

/* a phone screenshot on its own (Arabic pages of Bookings) */
.suite-phone-only { display: grid; justify-items: center; }
.suite-phone-only .fx-phone { position: static; width: min(300px, 70%); }

/* Connect your AI: the four set-up cards */
.suite-setup { padding-block: clamp(2.5rem, 2rem + 2.5vw, 4.5rem); background: var(--bg-alt); border-block: 1px solid var(--line);
  scroll-margin-top: calc(var(--fx-top, 64px) + 56px); }
.suite-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.suite-card { position: relative; display: flex; flex-direction: column; gap: .35rem; }
.suite-card h3 { margin: .2rem 0 0; font-size: 1.1rem; }
.suite-card-n { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--green); color: #fff;
  font-family: "Montserrat", system-ui, sans-serif; font-weight: 800; }
.suite-card-sub { margin: 0; color: var(--fg-muted); font-size: .9rem; }
.suite-steps { margin: .5rem 0 0; padding-inline-start: 1.2rem; display: grid; gap: .4rem; font-size: .95rem; }
.suite-steps li { overflow-wrap: anywhere; }
.suite-note { display: flex; gap: .6rem; align-items: flex-start; margin: 1.5rem 0 0; color: var(--fg-muted); font-size: .92rem; max-width: 70ch; }
.suite-note .ico { flex: none; width: 1.25rem; height: 1.25rem; color: var(--green-2); margin-block-start: .15rem; }

/* plain answers */
.suite-honest-sec { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.suite-honest h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); margin-block: .4rem 1rem; }
.suite-honest { border-inline-start: 5px solid var(--green); }

/* which plans */
.suite-plans { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); align-items: stretch; }
.suite-plan { display: flex; flex-direction: column; gap: .6rem; }
.suite-plan h3 { margin: 0; }
.suite-plan .price { margin: 0; }
.suite-plan .btn { margin-block-start: auto; align-self: flex-start; }
.suite-plan.popular { border-color: var(--green); box-shadow: 0 0 0 2px var(--green-soft), var(--shadow); }
.suite-plan.is-out { opacity: .78; }
.suite-plan.is-out .suite-plan-line { color: var(--fg-muted); }
.suite-plan-line { display: flex; gap: .5rem; align-items: flex-start; margin: 0; font-weight: 600; color: var(--fg-strong); }
.suite-plan-line .ico { flex: none; width: 1.2rem; height: 1.2rem; color: var(--green-2); margin-block-start: .15rem; }
.suite-desktop { margin: 1.25rem 0 .25rem; }
.suite-plans-sec .btn-row { margin-block-start: 1rem; }
.suite-more { margin-block-start: 1.25rem; display: flex; flex-wrap: wrap; gap: .4rem .75rem; align-items: center; }

/* the features page: quick search and the help link */
.fx-everyday-grid { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .fx-everyday-grid { grid-template-columns: 1fr 1fr; } }
.fx-everyday-card { display: flex; flex-direction: column; gap: .6rem; }
.fx-everyday-card h3 { margin: .25rem 0 0; }
.fx-everyday-card p { margin: 0; }
.fx-everyday-card figure { margin: .5rem 0 0; }
.fx-everyday-card .fx-win img { width: 100%; height: auto; display: block; }
.fx-everyday-card .more-link { margin-block-start: auto; }
.kbd-hero { display: flex; gap: .5rem; align-items: center; justify-content: center; padding: 1.5rem; border-radius: var(--radius); background: var(--bg-alt); border: 1px solid var(--line); }
.kbd-hero kbd { display: inline-grid; place-items: center; min-width: 3.2rem; height: 3.2rem; padding-inline: .8rem; border-radius: 12px; background: var(--bg-card);
  border: 1px solid var(--line-strong); border-block-end-width: 4px; font-family: "Montserrat", system-ui, sans-serif; font-weight: 800; font-size: 1.25rem; color: var(--fg-strong); }
.kbd-hero span { font-weight: 800; color: var(--fg-muted); }

/* ---------- the troubleshooting guide (/help/errors/) */
.err-hero { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) 1.5rem; }
.err-hero h1 { max-width: 22ch; }
.err-search { position: sticky; top: var(--fx-top, 64px); z-index: 40; background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-block: 1px solid var(--line); padding-block: .75rem; }
.err-search label { display: block; font-weight: 700; font-size: .9rem; margin-block-end: .35rem; color: var(--fg-strong); }
.err-search input { width: 100%; font: inherit; font-size: 1rem; padding: .7rem 1rem; border-radius: 12px; border: 1px solid var(--line-strong);
  background: var(--bg-card); color: var(--fg); }
.err-search input:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.err-count { margin: .4rem 0 0; font-size: .85rem; color: var(--fg-muted); min-height: 1.2em; }
.err-areas { columns: 2 260px; column-gap: 2rem; list-style: none; margin: 0; padding: 0; }
.err-areas li { break-inside: avoid; padding-block: .3rem; }
.err-areas a { font-weight: 600; text-decoration: none; }
.err-areas span { color: var(--fg-muted); font-size: .85rem; margin-inline-start: .35rem; }
.err-area { padding-block: 2rem 1rem; scroll-margin-top: calc(var(--fx-top, 64px) + 90px); }
.err-area > h2 { font-size: clamp(1.35rem, 1.15rem + .9vw, 1.85rem); padding-block-end: .5rem; border-block-end: 2px solid var(--green-soft); }
.err-item { padding: 1.1rem 1.25rem; margin-block: .9rem; background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-s);
  scroll-margin-top: calc(var(--fx-top, 64px) + 100px); }
.err-item:target, .err-item.is-target { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.err-item h3 { margin: 0 0 .5rem; font-size: 1.08rem; }
.err-codes { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .4rem; padding: 0; list-style: none; }
.err-codes a { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .8rem; padding: .1rem .5rem; border-radius: 6px;
  background: var(--slate-1); color: var(--fg-strong); text-decoration: none; }
.err-codes .err-anchor { display: block; position: relative; top: calc(-1 * (var(--fx-top, 64px) + 100px)); visibility: hidden; height: 0; }
.err-item p, .err-item ol, .err-item ul { margin-block: .45rem; }
.err-item ol { padding-inline-start: 1.3rem; }
.err-top { font-size: .85rem; }
.err-empty { padding: 1.5rem; text-align: center; color: var(--fg-muted); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .err-codes a { background: #1C333D; } }
:root[data-theme="dark"] .err-codes a { background: #1C333D; }
.note-box { margin: 1rem 0 0; padding: .7rem 1rem; border-radius: var(--radius-s); background: var(--amber-soft); color: var(--fg-strong); }
/* four AI cards since 7 Oct 2026 (invoice reading, Ask your shop, Connect your AI, the Front Desk): two by two */
@media (min-width: 1100px) { .fx-ai-grid { grid-template-columns: repeat(2, 1fr); } }