/* ═══════════════════════════════════════════════════════════════════════
iGMS BRAND — single source of truth for all go/ landing pages.
Derived from the live marketing homepage (www.igms.com, [data-page=home-v4]).
Edit HERE to change brand across every page. Do not re-introduce per-page
fonts, dark full-bleed sections, or hard offset shadows — those are the
exact drift this file exists to prevent.
Load order in each page :
Then in the page's own :root, point --display / --sans / --mono at Outfit
so ALL existing typography inherits the brand face with no per-rule edits:
--display: var(--b-font); --sans: var(--b-font); --mono: var(--b-font);
═══════════════════════════════════════════════════════════════════════ */
:root{
/* type — Outfit is THE brand face (headings, body, UI, labels alike) */
--b-font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
/* the one accent — amber. Yellow is a highlight, never a background wash. */
--b-amber:#ffc107;
--b-amber-hover:#ffb300;
--b-amber-soft:#fff3cd; /* faint amber tint for chips / highlights */
--b-on-amber:#212121; /* text/icon color on an amber fill */
/* neutrals — light, airy, homepage-true */
--b-ink:#222222; /* headings */
--b-text:#333333; /* primary body (= homepage --color-darker) */
--b-muted:rgba(0,0,0,.55); /* secondary text */
--b-faint:rgba(0,0,0,.40); /* captions / eyebrow on light */
--b-white:#ffffff;
--b-band:#f5f5f7; /* the ONLY section-alternation background */
--b-band-2:#fafafa;
--b-border:rgba(0,0,0,.08); /* hairline — the homepage separates with these, not shadows */
--b-border-strong:rgba(0,0,0,.14);
/* geometry */
--b-radius-btn:8px;
--b-radius-card:12px;
--b-radius-pill:999px;
--b-maxw:1200px;
--b-gap:clamp(24px,1.7rem + 1.9vw,48px);
/* elevation — used sparingly; prefer hairline borders */
--b-shadow-sm:0 1px 2px rgba(0,0,0,.04);
--b-shadow-card:0 8px 30px -18px rgba(0,0,0,.22);
--b-ease:cubic-bezier(.23,1,.32,1);
}
/* ── Buttons ─────────────────────────────────────────────────────────────
Primary = amber fill / near-black text, soft 8px radius, NO offset shadow.
Secondary = outline. This is the homepage CTA, verbatim in feel. */
.b-btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
font-family:var(--b-font);font-weight:600;font-size:16px;line-height:1;
padding:14px 26px;border-radius:var(--b-radius-btn);border:1.5px solid transparent;
cursor:pointer;text-decoration:none;white-space:nowrap;
transition:background-color .2s var(--b-ease),border-color .2s var(--b-ease),color .2s var(--b-ease),transform .12s var(--b-ease);
}
.b-btn:active{transform:scale(.98)}
.b-btn--primary{background:var(--b-amber);color:var(--b-on-amber);border-color:var(--b-amber)}
.b-btn--primary:hover{background:var(--b-amber-hover);border-color:var(--b-amber-hover);color:var(--b-on-amber)}
.b-btn--ghost{background:transparent;color:var(--b-ink);border-color:var(--b-border-strong)}
.b-btn--ghost:hover{border-color:var(--b-ink);color:var(--b-ink)}
.b-btn--lg{padding:16px 32px;font-size:17px}
.b-btn--sm{padding:10px 18px;font-size:14px}
.b-btn--block{width:100%}
.b-btn__ic{width:18px;height:18px;transition:transform .2s var(--b-ease)}
.b-btn:hover .b-btn__ic{transform:translateX(2px)}
/* ── Eyebrow / section label ── */
.b-eyebrow{
display:inline-block;font-family:var(--b-font);font-weight:600;
text-transform:uppercase;letter-spacing:.09em;font-size:13px;line-height:1;
color:var(--b-faint);
}
.b-eyebrow--amber{color:#9a6b07}
/* ── Type helpers (opt-in; pages may keep their own heading rules) ── */
.b-h1{font-family:var(--b-font);font-weight:600;letter-spacing:-.02em;line-height:1.08;color:var(--b-ink);font-size:clamp(2.4rem,4.4vw,3.75rem)}
.b-h2{font-family:var(--b-font);font-weight:600;letter-spacing:-.015em;line-height:1.12;color:var(--b-ink);font-size:clamp(1.85rem,3.2vw,2.6rem)}
.b-h3{font-family:var(--b-font);font-weight:600;letter-spacing:-.01em;line-height:1.2;color:var(--b-ink);font-size:1.25rem}
.b-lead{font-family:var(--b-font);font-weight:400;color:var(--b-muted);font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.55}
.b-accent{color:var(--b-amber)}
.b-text-muted{color:var(--b-muted)}
/* ── Layout primitives ── */
.b-wrap{max-width:var(--b-maxw);margin-inline:auto;width:100%;padding-inline:20px}
@media(min-width:1024px){.b-wrap{padding-inline:32px}}
.b-section{padding-block:64px}
@media(min-width:1024px){.b-section{padding-block:96px}}
.b-band{background:var(--b-band)}
.b-band-2{background:var(--b-band-2)}
/* ── Card ── */
.b-card{background:var(--b-white);border:1px solid var(--b-border);border-radius:var(--b-radius-card)}
/* ── Feature row — hairline-separated list, the homepage "Everything in one place" pattern ── */
.b-feature-row{padding-block:26px;border-top:1px solid var(--b-border)}
.b-feature-row:last-child{border-bottom:1px solid var(--b-border)}
.b-feature-row__t{font-family:var(--b-font);font-weight:600;font-size:1.15rem;color:var(--b-ink);margin-bottom:6px}
.b-feature-row__d{color:var(--b-muted);line-height:1.55}
/* ── Testimonial / quote ── */
.b-quote{font-family:var(--b-font);font-weight:400;color:var(--b-text);line-height:1.5;font-size:clamp(1.1rem,1.6vw,1.35rem)}
.b-quote__who{font-weight:600;color:var(--b-ink);font-size:.95rem}
.b-quote__role{color:var(--b-muted);font-size:.85rem}
/* ── Amber chip / pill highlight ── */
.b-chip{display:inline-flex;align-items:center;gap:6px;background:var(--b-amber-soft);color:#7a5300;border-radius:var(--b-radius-pill);padding:5px 12px;font-family:var(--b-font);font-weight:600;font-size:12px;letter-spacing:.02em}
/* ── Final CTA band ── */
.b-final{text-align:center}
.b-final__h{font-family:var(--b-font);font-weight:600;letter-spacing:-.02em;color:var(--b-ink);font-size:clamp(2rem,4vw,3rem);line-height:1.1}
/* ── Focus / selection — brand-consistent ── */
::selection{background:var(--b-amber);color:var(--b-on-amber)}
.b-focus:focus-visible,
a.b-btn:focus-visible,button.b-btn:focus-visible{outline:2px solid var(--b-amber);outline-offset:3px;border-radius:6px}
/* ═══════════════════════════════════════════════════════════════════════
REUSABLE PAGE COMPONENTS — cemented from the comp-guesty reference page.
Use these on new/other landing pages so the whole set stays one family.
═══════════════════════════════════════════════════════════════════════ */
:root{ --b-ochre:#9a6b07; --b-track:#e4e7ea; --b-ink-3:rgba(0,0,0,.42); }
/* ── star-rating trust line (place at top of a hero) ── */
.b-rate{display:flex;align-items:center;gap:9px;font-size:.9rem;font-weight:500;color:var(--b-muted)}
.b-rate .stars{color:var(--b-amber);letter-spacing:2px;font-size:.95rem}
.b-rate b{color:var(--b-ink);font-weight:700}
/* ── faint yellow hero waves (the homepage hero signature). Parent must be position:relative; keep hero content at z-index:1 ── */
.b-hero-waves{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.4;background-repeat:repeat;background-position:top center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120'%3E%3Cg fill='none' stroke='%23ffc107' stroke-width='1.4'%3E%3Cpath d='M0 18 q60 -16 120 0 t120 0'/%3E%3Cpath d='M0 48 q60 -16 120 0 t120 0'/%3E%3Cpath d='M0 78 q60 -16 120 0 t120 0'/%3E%3Cpath d='M0 108 q60 -16 120 0 t120 0'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 70%);mask-image:linear-gradient(to bottom,rgba(0,0,0,.85),transparent 70%)}
/* ── pricing: property-count slider + 2 plan cards. Pair with a small JS that maps slider value → prices. ── */
.b-pr-slider{max-width:520px;margin:0 auto 40px;text-align:center}
.b-pr-slider .lab{font-size:15px;font-weight:600;color:var(--b-ink);margin-bottom:16px}
.b-pr-count{display:inline-block;min-width:36px;font-weight:700;color:var(--b-ochre);font-size:20px}
.b-pr-range{width:100%;height:8px;-webkit-appearance:none;appearance:none;border-radius:999px;background:var(--b-track);outline:none;cursor:pointer}
.b-pr-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--b-amber);border:4px solid #fff;box-shadow:0 2px 8px -1px rgba(0,0,0,.25);cursor:pointer}
.b-pr-range::-moz-range-thumb{width:24px;height:24px;border:4px solid #fff;border-radius:50%;background:var(--b-amber);box-shadow:0 2px 8px -1px rgba(0,0,0,.25);cursor:pointer}
.b-pr-scale{display:flex;justify-content:space-between;margin-top:10px;font-size:.8rem;color:var(--b-ink-3)}
.b-pr-grid{display:grid;grid-template-columns:1fr;gap:24px;max-width:820px;margin:0 auto;align-items:stretch}
@media(min-width:768px){.b-pr-grid{grid-template-columns:1fr 1fr}}
.b-pr-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--b-border);border-radius:16px;padding:32px}
.b-pr-card--hot{border:2px solid var(--b-amber)}
.b-pr-card .b-btn{width:100%;margin-top:auto}
/* ── product-UI mockup frame — hand-built recreations of real iGMS screens (inbox, tasks, team, calendar). PII-free. ── */
.b-mock{border:1px solid var(--b-border);border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 12px 36px -24px rgba(20,30,40,.35);font-size:12px;line-height:1.3}
.b-mock-bar{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--b-border);background:#fbfbfc}
.b-mock-bar .dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;background:var(--b-amber);box-shadow:0 0 0 3px rgba(255,193,7,.18)}
.b-mock-bar .t{font-weight:700;color:var(--b-ink)}
.b-mock-bar .sub{color:var(--b-muted)}
.b-mock-bar .action{margin-left:auto;background:#2F86EF;color:#fff;font-weight:600;border-radius:6px;padding:4px 10px;font-size:11px;white-space:nowrap}
.b-mock-row{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1px solid var(--b-border)}
.b-mock-row:last-child{border-bottom:0}
.b-mock-av{flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:10px;color:#fff}
/* role chips (team access) — the only place small color is welcome */
.b-role{flex:0 0 auto;border-radius:999px;padding:3px 10px;font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.03em}
.b-role--indigo{background:#EEF2FF;color:#4F46E5}
.b-role--green{background:#E7F5EF;color:#0E8F6E}
.b-role--amber{background:#FFF3CD;color:#8a5a00}
.b-role--gray{background:#eceef0;color:var(--b-muted)}