/* ============================================================
   Businessily — "How it works / Under the Hood" page styles
   Layers on top of styles.css (loaded after it). Reuses the
   design system; only adds what this page needs:
   the 2-lane data-flow SVG, the discard table, the "how is this
   free" block, per-feature mini-diagrams, trade-offs, never-list.
   GPU-only motion (transform/opacity); all gated by reduce.
   ============================================================ */

/* ---------- negative-claim hero ---------- */
.hiw-hero { padding-bottom: clamp(30px, 5vw, 56px); overflow: hidden; }
.hiw-hero .hero-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46% 40% at 14% 4%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%),
    radial-gradient(40% 42% at 94% 2%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 70%);
}
.hiw-hero h1 { max-width: 16ch; }
.hiw-hero .lead { font-size: clamp(1.05rem, 1.7vw, 1.24rem); color: var(--text-2); max-width: 56ch; }
.hiw-layout { display: grid; grid-template-columns: 1.35fr .9fr; gap: clamp(26px, 4vw, 52px); align-items: start; }
@media (max-width: 880px) { .hiw-layout { grid-template-columns: 1fr; } }

/* sticky in-page TOC on the side at desktop */
.toc.toc-sticky { position: sticky; top: 86px; }
@media (max-width: 880px) { .toc.toc-sticky { position: static; top: auto; } }

/* ============================================================
   THE 2-LANE DATA-FLOW SVG — the signature asset
   ============================================================ */
.flowmap-wrap {
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--r-2xl); padding: clamp(18px, 3vw, 30px);
  box-shadow: var(--shadow-md);
}
.flowmap { width: 100%; height: auto; display: block; }

/* legend below the SVG */
.flowmap-legend {
  display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px;
  font-size: .86rem; font-weight: 600; color: var(--text-2);
}
.flowmap-legend span { display: inline-flex; align-items: center; gap: 8px; }
.flowmap-legend i { width: 14px; height: 14px; border-radius: 4px; flex: 0 0 auto; }
.lg-device { background: linear-gradient(140deg, var(--accent-2), var(--accent)); }
.lg-wall { background: repeating-linear-gradient(45deg, var(--accent), var(--accent) 3px, color-mix(in srgb, var(--accent) 40%, var(--card)) 3px, color-mix(in srgb, var(--accent) 40%, var(--card)) 6px); }
.lg-blocked { background: #C0492C; }

/* --- SVG token-driven colors (so it themes light/dark) --- */
.flowmap .fm-card { fill: var(--card); stroke: var(--hairline); stroke-width: 1.5; }
.flowmap .fm-device { fill: url(#fmDevice); stroke: none; }
.flowmap .fm-label { fill: var(--text); font-family: var(--font); font-weight: 800; }
.flowmap .fm-sub { fill: var(--text-2); font-family: var(--font-body); font-weight: 600; }
.flowmap .fm-lane-title { fill: var(--text); font-family: var(--font); font-weight: 800; }
.flowmap .fm-flow { stroke: var(--accent); stroke-width: 2.4; fill: none; }
.flowmap .fm-flow-dash { stroke: var(--accent); stroke-width: 2.4; fill: none; stroke-dasharray: 7 6; }
.flowmap .fm-stop { stroke: #C0492C; stroke-width: 2.6; }
.flowmap .fm-stoptxt { fill: #C0492C; font-family: var(--font); font-weight: 800; }
.flowmap .fm-walltxt { fill: var(--accent); font-family: var(--font); font-weight: 800; }
.flowmap .fm-icon { stroke: var(--accent); stroke-width: 2; fill: none; }
.flowmap .fm-icon-w { stroke: #fff; stroke-width: 2; fill: none; }
.flowmap .fm-divider { stroke: var(--hairline); stroke-width: 1; stroke-dasharray: 4 5; }
.flowmap .fm-block-card { fill: color-mix(in srgb, #C0492C 7%, var(--card)); stroke: color-mix(in srgb, #C0492C 35%, transparent); stroke-width: 1.5; }
.flowmap .fm-block-txt { fill: var(--text-2); font-family: var(--font-body); font-weight: 600; }
.flowmap .fm-strike { stroke: #C0492C; stroke-width: 3; stroke-linecap: round; }
.flowmap .fm-arrow { fill: var(--accent); }

/* the wall hatch fill */
.flowmap .fm-wall { fill: url(#fmWall); stroke: var(--accent); stroke-width: 1.5; }

/* reveal animation for the flow lines (transform/opacity only via dashoffset is fine — it's on stroke, but we gate it) */
@media (prefers-reduced-motion: no-preference) {
  .flowmap .fm-flow, .flowmap .fm-flow-dash {
    stroke-dasharray: 320; stroke-dashoffset: 320;
  }
  .flowmap.in .fm-flow, .flowmap.in .fm-flow-dash {
    transition: stroke-dashoffset 1.1s ease .15s;
    stroke-dashoffset: 0;
  }
  /* dashed lane keeps its dash look once drawn */
  .flowmap.in .fm-flow-dash { stroke-dasharray: 7 6; }
  .flowmap .fm-pop { transform-box: fill-box; transform-origin: center; transform: scale(0); }
  .flowmap.in .fm-pop { transition: transform .5s cubic-bezier(.34,1.56,.5,1) .6s; transform: scale(1); }
}

/* caption under the crossed lane */
.flowmap-cap { margin-top: 16px; font-size: .95rem; color: var(--text-2); }
.flowmap-cap b { color: var(--text); font-family: var(--font); }

/* ---------- "how is this free" honesty block ---------- */
.freeblock { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(20px, 4vw, 44px); align-items: center;
  background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-2xl);
  padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-md); }
@media (max-width: 760px) { .freeblock { grid-template-columns: 1fr; } }
.freeblock h3 { font-size: 1.35rem; }
.freelist { list-style: none; padding: 0; margin: 14px 0 0; }
.freelist li { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; color: var(--text-2); font-size: .96rem; border-top: 1px solid var(--hairline-2); }
.freelist li:first-child { border-top: none; }
.freelist li svg { flex: 0 0 auto; margin-top: 2px; color: var(--income); }
.freelist li b { color: var(--text); font-family: var(--font); }
.freecard { text-align: center; border-radius: var(--r-xl); padding: 26px; background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 12%, var(--card)), var(--card)); border: 1px solid var(--hairline-2); }
.freecard .ic { width: 54px; height: 54px; border-radius: 15px; margin: 0 auto 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--accent-2), var(--accent)); }
.freecard b { font-family: var(--font); font-size: 1.1rem; display: block; }
.freecard p { color: var(--text-2); font-size: .92rem; margin: 6px 0 0; }

/* ---------- per-feature mini cards with inline diagrams ---------- */
.featgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 760px) { .featgrid { grid-template-columns: 1fr; } }
.featcard { display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: start;
  background: var(--card); border: 1px solid var(--hairline-2); border-radius: var(--r-xl);
  padding: 22px; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }
.featcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.featcard .ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.featcard h3 { margin: 0 0 4px; font-size: 1.12rem; }
.featcard p { margin: 0; color: var(--text-2); font-size: .94rem; }
.featcard .fc-flow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; font-size: .76rem; font-weight: 700; color: var(--text-2); }
.featcard .fc-flow .chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); }
.featcard .fc-flow .chip.local { background: color-mix(in srgb, var(--income) 10%, transparent); color: var(--income); border-color: color-mix(in srgb, var(--income) 24%, transparent); }
.featcard .fc-flow svg { color: var(--text-2); flex: 0 0 auto; }

/* ---------- trade-offs (confident, two-sided) ---------- */
.tradegrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 760px) { .tradegrid { grid-template-columns: 1fr; } }
.tradecard { background: var(--card); border: 1px solid var(--hairline-2); border-radius: var(--r-xl); padding: 24px; box-shadow: var(--shadow-sm); }
.tradecard h3 { font-size: 1.1rem; display: flex; align-items: center; gap: 9px; }
.tradecard h3 .ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); flex: 0 0 auto; }
.trade-line { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; font-size: .94rem; }
.trade-line:not(:last-child) { border-bottom: 1px solid var(--hairline-2); }
.trade-line .tl-ic { flex: 0 0 auto; margin-top: 2px; }
.trade-line.choice .tl-ic { color: var(--warn); }
.trade-line.gain .tl-ic { color: var(--income); }
.trade-line span { color: var(--text-2); }
.trade-line b { color: var(--text); font-family: var(--font); }

/* ---------- "never" commitments ---------- */
.neverlist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 820px) { .neverlist { grid-template-columns: 1fr; } }
.nevercard { position: relative; background: var(--card); border: 1px solid var(--hairline-2); border-radius: var(--r-xl); padding: 24px; box-shadow: var(--shadow-sm); overflow: hidden; }
.nevercard::before { content: "NEVER"; position: absolute; top: 14px; right: 16px; font-family: var(--font); font-weight: 800; font-size: .72rem; letter-spacing: .12em; color: color-mix(in srgb, #C0492C 80%, var(--text-2)); }
.nevercard .ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 14px; color: #C0492C; background: color-mix(in srgb, #C0492C 11%, transparent); }
.nevercard h3 { font-size: 1.06rem; }
.nevercard p { margin: 0; color: var(--text-2); font-size: .92rem; }

/* ---------- compact pricing summary ---------- */
.pricesum { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 700px) { .pricesum { grid-template-columns: 1fr; } }
.pricesum .pc { background: var(--card); border: 1px solid var(--hairline-2); border-radius: var(--r-xl); padding: 26px; box-shadow: var(--shadow-sm); }
.pricesum .pc .big { font-family: var(--font); font-weight: 800; font-size: clamp(2.4rem, 6vw, 3.2rem); line-height: 1; letter-spacing: -.02em; color: var(--accent); }
.pricesum .pc .per { color: var(--text-2); font-weight: 700; font-size: .9rem; margin-top: 4px; }
.pricesum .pc ul { list-style: none; padding: 0; margin: 14px 0 0; }
.pricesum .pc li { display: flex; gap: 9px; align-items: center; padding: 6px 0; font-size: .92rem; color: var(--text-2); }
.pricesum .pc li svg { flex: 0 0 auto; color: var(--income); }

/* per-platform architecture flow tweaks (uses .flow from styles.css) */
.archblock { margin-top: 30px; }
.archblock + .archblock { margin-top: 38px; }
.arch-platform-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.arch-platform-head .ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--accent-2), var(--accent)); flex: 0 0 auto; }
.arch-platform-head h3 { margin: 0; }
.flowstep b { font-family: var(--font); font-size: 1rem; display: block; margin-bottom: 5px; }
.flowstep .ic svg { display: block; }