/* ════════════════════════════════════════════════════════════════════
   linq — /features page layer (on top of linq-kit.css + linq-marketing.css
   + linq-home-v2.css). Light warm hero · 8 pillars · unified capability
   catalog (no status) · website-platform spotlight + CSS booking-site mock.
   Type comes from the site-wide body.linq-mkt pairing (Open Sans heads +
   PT Sans body); headings here just carry the handoff's 800 weight.
   ════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   HERO — light warm band, nav floats over it (ink text)
   ══════════════════════════════════════════════════════════════════ */
/* margin-top pulls the warm ground up under the sticky 72px header so the
   transparent nav floats over it; top padding drops the copy back below. */
.fhero {
  background: var(--bg-warm); position: relative; overflow: hidden;
  margin-top: -72px;
  padding: calc(72px + clamp(48px, 7vw, 92px)) 0 clamp(52px, 6vw, 84px);
  border-bottom: 1px solid var(--border);
}
.fhero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(760px 420px at 88% -10%, rgba(234,106,44,.08), transparent 62%),
    radial-gradient(680px 460px at 2% 108%, rgba(59,91,219,.07), transparent 60%);
}
.fhero-in { position: relative; z-index: 1; max-width: 900px; }
.fhero .h-display { margin: 0 0 22px; max-width: 18ch; }
.fhero .lead { margin-bottom: 30px; }
.fhero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }

/* ══════════════════════════════════════════════════════════════════
   PILLARS — 8 numbered deep-dive cards
   ══════════════════════════════════════════════════════════════════ */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1040px){ .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .pillars { grid-template-columns: 1fr; } }
.pillar-card { position: relative; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 11px; text-decoration: none; color: inherit; transition: border-color .15s, transform .12s, box-shadow .15s; }
.pillar-card:hover { border-color: var(--border-strong); transform: translateY(-3px); box-shadow: var(--e-2); }
.pillar-card .pc-top { display: flex; align-items: flex-start; justify-content: space-between; }
.pillar-card .pc-n { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; color: var(--signal-deep); }
.pillar-card .pc-ico { width: 36px; height: 36px; border-radius: 50%; background: var(--ocean-soft); border: 1px solid rgba(59,91,219,.28); color: var(--ocean); display: grid; place-items: center; flex-shrink: 0; }
.pillar-card .pc-ico svg { width: 18px; height: 18px; }
.pillar-card h3 { font-family: var(--font-head); font-size: 1.08rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
.pillar-card p { font-size: 0.86rem; color: var(--text-muted); line-height: 1.5; flex: 1; }
.pillar-card .pc-cat { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); display: inline-flex; align-items: center; gap: 7px; margin-top: 2px; }
.pillar-card:hover .pc-cat { color: var(--signal-deep); }
.pillar-card .pc-cat .arr { transition: transform .18s; }
.pillar-card:hover .pc-cat .arr { transform: translateX(3px); }

/* ══════════════════════════════════════════════════════════════════
   CATALOG — grouped capabilities, no status
   ══════════════════════════════════════════════════════════════════ */
.cat-group { margin-top: 40px; }
.cat-group:first-of-type { margin-top: 0; }
.cat-group-head { display: flex; align-items: baseline; gap: 16px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.cat-group-head .cg-n { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; color: var(--signal-deep); }
.cat-group-head h3 { font-family: var(--font-head); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.025em; }
.cat-group-head .cg-sub { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin-left: auto; }
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 1040px){ .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px){ .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px){ .cat-grid { grid-template-columns: 1fr; } }
.cat-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 10px; transition: border-color .15s, transform .12s, box-shadow .15s; }
.cat-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--e-1); }
.cat-card .cc-ico { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--ocean-soft); border: 1px solid rgba(59,91,219,.22); color: var(--ocean); display: grid; place-items: center; flex-shrink: 0; }
.cat-card .cc-ico svg { width: 17px; height: 17px; }
.cat-card h4 { font-family: var(--font-head); font-size: 0.98rem; font-weight: 800; letter-spacing: -0.015em; }
.cat-card p { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; }
/* one flagship card per catalog goes dark (the website group uses it).
   #1C2B4E is the same bespoke navy the homepage AI card uses; no kit token. */
.cat-card.flag { background: linear-gradient(155deg, #1C2B4E 0%, var(--ink) 62%); border-color: var(--ink); }
.cat-card.flag h4 { color: #fff; }
.cat-card.flag p { color: var(--on-dark-muted); }
.cat-card.flag .cc-ico { background: rgba(255,255,255,.08); border-color: rgba(242,237,226,.24); color: var(--on-dark); }

/* ══════════════════════════════════════════════════════════════════
   WEBSITE-PLATFORM SPOTLIGHT — dark band, two columns
   ══════════════════════════════════════════════════════════════════ */
.web-spot { background: var(--ink); color: var(--on-dark); position: relative; overflow: hidden; }
.web-spot::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(620px 380px at 92% 8%, rgba(234,106,44,.14), transparent 60%), radial-gradient(560px 420px at 4% 100%, rgba(59,91,219,.16), transparent 62%); }
.web-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(36px, 5vw, 76px); align-items: center; }
@media (max-width: 940px){ .web-grid { grid-template-columns: 1fr; gap: 40px; } }
.web-copy .eyebrow { color: rgba(242,237,226,.55); margin-bottom: 18px; }
.web-copy h2 { font-family: var(--font-head); font-size: clamp(1.8rem, 3.4vw, 2.7rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; color: #fff; margin-bottom: 18px; text-wrap: balance; }
.web-copy .lead { color: var(--on-dark-muted); margin-bottom: 24px; }
.web-list { display: grid; gap: 0; margin-bottom: 26px; padding: 0; }
.web-list li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px dashed rgba(242,237,226,.14); font-size: 0.92rem; color: var(--on-dark); line-height: 1.45; list-style: none; }
.web-list li:last-child { border-bottom: 0; }
.web-list li .wl-ico { color: var(--signal); flex-shrink: 0; margin-top: 1px; }
.web-list li b { font-weight: 700; }
.web-proof { display: flex; flex-wrap: wrap; gap: 10px; }
.web-proof a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.8rem; color: var(--on-dark); background: rgba(255,255,255,.07); border: 1px solid rgba(242,237,226,.2); border-radius: var(--r-pill); padding: 8px 15px; text-decoration: none; transition: background .15s, border-color .15s; }
.web-proof a:hover { background: rgba(255,255,255,.14); border-color: rgba(242,237,226,.38); }
.web-proof a .dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--sage); box-shadow: 0 0 0 3px rgba(31,157,85,.25); }

/* browser mock of a linq-built booking site — a static, non-interactive
   sample. It sits inside the dark .web-spot (cream text), but its own
   surface is cream, so reset descendant text to ink or it renders
   cream-on-cream. pointer-events:none keeps it purely decorative. */
.site-mock { background: var(--panel); color: var(--text); border: 1px solid rgba(242,237,226,.14); border-radius: var(--r-lg); box-shadow: var(--e-3); overflow: hidden; pointer-events: none; }
.site-bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--bg-warm); border-bottom: 1px solid var(--border); }
.site-bar .dots { display: flex; gap: 6px; }
.site-bar .dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.site-bar .addr { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-pill); padding: 5px 13px; font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-muted); }
.site-bar .addr i { color: var(--sage); font-size: 0.72rem; }
.site-body { padding: 22px 22px 24px; }
.site-body .sb-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.site-body .sb-brand { display: flex; align-items: center; gap: 9px; font-family: var(--font-head); font-weight: 800; font-size: 0.98rem; letter-spacing: -0.01em; }
.site-body .sb-brand img { width: 26px; height: 26px; }
.site-body .sb-nav { display: flex; gap: 14px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.site-body .sb-h { font-family: var(--font-head); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; margin-bottom: 6px; }
.site-body .sb-h .dot { display: inline-block; width: 0.16em; height: 0.16em; border-radius: 50%; background: var(--signal); margin-left: 0.04em; vertical-align: 0.08em; }
.site-body .sb-sub { font-size: 0.84rem; color: var(--text-muted); margin-bottom: 16px; }
.site-widget { background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-md); padding: 15px; }
.site-widget .sw-lbl { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 9px; }
.site-widget .sw-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 14px; }
.site-widget .sw-day { border: 1px solid var(--border); background: var(--panel); border-radius: var(--r-sm); padding: 7px 2px; text-align: center; }
.site-widget .sw-day .d { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.site-widget .sw-day .n { font-size: 0.98rem; font-weight: 700; margin-top: 2px; }
.site-widget .sw-day.on { background: var(--surface-dark); border-color: var(--surface-dark); }
.site-widget .sw-day.on .d { color: var(--on-dark-muted); }
.site-widget .sw-day.on .n { color: #fff; }
.site-widget .sw-book { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--signal); color: #fff; border: 0; border-radius: var(--r-sm); padding: 11px; font-family: var(--font-head); font-weight: 800; font-size: 0.9rem; letter-spacing: -0.01em; cursor: default; }
.site-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--text-faint); }
.site-foot .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); }

/* industries cross-link line */
.trade-line { margin-top: 8px; text-align: center; }
.trade-line a { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; align-items: center; }
.trade-line a:hover { color: var(--signal-deep); }
.trade-line .pluslead { color: var(--signal-deep); }

/* Final CTA on this page commits to the single --ink dark system + drops
   the radial glow (matches the homepage). This sheet only loads on
   /features, so the bare .dark-band override stays scoped to this page. */
.dark-band { background: var(--ink); }
.dark-band::after { content: none; }