/**
 * Shared stylesheet for the competitor comparison page family (Skydio, Aloft,
 * FlytBase, Votix, DJI FlightHub 2 -- 5 competitors x 2 locales).
 *
 * EXTRACTED, not hand-written: each comparison page used to carry its own
 * ~265-line inline <style> block, duplicated across all ten HTML files.
 *
 * EVERY SELECTOR HERE IS UNIQUE TO THIS PAGE FAMILY -- deliberately, not
 * incidentally. Anything that also exists in the shared style.css (.container,
 * .btn, .eyebrow, .section, .hero, and 25 others) was DROPPED rather than
 * duplicated, even where the comparison page's own copy had DIFFERENT values
 * (smaller hero padding, smaller h2, an older .hero__grid column ratio). That
 * was not a deliberate per-family design choice -- it was drift: the block
 * predates the shared style.css consolidation and was never updated when
 * those foundational rules were later adjusted sitewide. Keeping it would
 * have made every comparison page subtly inconsistent with the rest of the
 * site, and worse, source-order in the page's own <head> means the LATER
 * stylesheet link wins -- so it would have silently overridden the
 * shared/current rule on this page only, with no visual signal that anything
 * was wrong.
 *
 * A shared class gets exactly one definition. If a comparison page genuinely
 * needs to look different from the rest of the site on a shared class, that
 * has to be a real design decision, not a copy of a stylesheet from before
 * the shared one existed.
 *
 * One token this family needs that style.css does not define:
 */
:root {
  --sage-text: #a4c0b0;
}

html { scroll-behavior:smooth; }
.mono-cap { font-family:'JetBrains Mono', monospace; font-size:var(--text-xs); letter-spacing:0.04em; color:var(--t-3); }
.hero__answer { font-size:var(--text-xl); color:var(--t-2); line-height:1.6; max-width:560px; margin:0 0 26px; }
.hero__answer b { color:var(--t-1); font-weight:600; }
.verdict { display:flex; gap:0; border:1px solid var(--hair-2); border-radius:8px; overflow:hidden; background:var(--bg-1); max-width:560px; }
.verdict__half { flex:1; padding:14px 18px; display:flex; flex-direction:column; gap:5px; }
.verdict__half + .verdict__half { border-left:1px solid var(--hair-2); }
.verdict__q { font-size:var(--text-sm); color:var(--t-3); line-height:1.4; }
.verdict__a { display:inline-flex; align-items:center; gap:7px; font-size:var(--text-lg); font-weight:600; color:var(--t-1); letter-spacing:-0.005em; }
.verdict__a .arrow { color:var(--t-4); }
.verdict__half--hover .verdict__a { color:var(--olive); }
.verdict__half--hover { background:linear-gradient(180deg, rgba(184,176,106,0.06), transparent); }
/* Link into the streaming cost calculator, between the verdict and the
   reviewed-date line -- only DJI FlightHub 2's hero has one today. */
.hero__calc { margin-top:16px; font-size:var(--text-md); color:var(--t-3); }
.hero__calc a { color:var(--olive-text); text-decoration:none; font-weight:600; }
.hero__calc a:hover { color:var(--olive); }
.hero__meta { margin-top:18px; display:flex; align-items:center; gap:10px; }
.scorecard { background:var(--bg-2); border:1px solid var(--hair-1); border-radius:10px; overflow:hidden; box-shadow:0 24px 56px -24px rgba(0,0,0,0.6); }
.scorecard__head { display:grid; grid-template-columns:1fr 52px 52px; align-items:end; padding:16px 18px 12px; border-bottom:1px solid var(--hair-1); gap:6px; }
.scorecard__title { font-size:var(--text-2xs); letter-spacing:0.18em; text-transform:uppercase; color:var(--t-3); font-weight:600; }
.scorecard__col { text-align:center; font-size:var(--text-xs); font-weight:600; letter-spacing:0.04em; }
.scorecard__col--h { color:var(--olive); }
.scorecard__col--s { color:var(--t-2); }
.scorecard__row { display:grid; grid-template-columns:1fr 52px 52px; align-items:center; padding:11px 18px; border-bottom:1px solid var(--hair-1); }
.scorecard__row:last-child { border-bottom:none; }
.scorecard__dim { font-size:var(--text-md); color:var(--t-2); }
.scorecard__cell { display:flex; justify-content:center; }
.pip { width:9px; height:9px; border-radius:50%; border:1.5px solid var(--hair-3); background:transparent; }
.pip--win-h { background:var(--olive); border-color:var(--olive); box-shadow:0 0 0 3px rgba(184,176,106,0.14); }
.pip--win-s { background:var(--sage); border-color:var(--sage); box-shadow:0 0 0 3px rgba(122,166,146,0.16); }
.scorecard__foot { padding:11px 18px; background:var(--bg-1); display:flex; align-items:center; gap:14px; font-size:var(--text-2xs); color:var(--t-3); letter-spacing:0.04em; }
.scorecard__foot .lg { display:inline-flex; align-items:center; gap:6px; }
.matrix-legend { display:flex; flex-wrap:wrap; gap:18px; align-items:center; margin-bottom:18px; }
.legend-item { display:inline-flex; align-items:center; gap:7px; font-size:var(--text-sm); color:var(--t-3); }
.badge { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:5px; flex:none; }
.badge svg { width:11px; height:11px; }
.badge--win { background:rgba(184,176,106,0.12); border:1px solid rgba(184,176,106,0.34); color:var(--olive); }
.badge--trade { background:var(--bg-3); border:1px solid var(--hair-2); color:var(--t-3); }
.matrix-wrap { border:1px solid var(--hair-2); border-radius:10px; overflow:hidden; background:var(--bg-1); box-shadow:0 28px 64px -28px rgba(0,0,0,0.6); }
.matrix-scroll { overflow-x:auto; }
table.matrix { width:100%; border-collapse:collapse; min-width:760px; }
table.matrix thead th { text-align:left; vertical-align:bottom; padding:20px 22px; background:var(--bg-2); border-bottom:1px solid var(--hair-2); }
.matrix thead .dim-head { width:20%; }
.matrix thead .plat { width:40%; }
.matrix thead .plat--hover { border-left:1px solid var(--hair-2); border-top:2px solid var(--olive); background:linear-gradient(180deg, rgba(184,176,106,0.07), transparent); }
.matrix thead .plat--theirs { border-left:1px solid var(--hair-2); }
.plat-name { display:flex; align-items:center; gap:10px; font-size:var(--text-2xl); font-weight:600; letter-spacing:-0.01em; color:var(--t-1); }
.plat-name .mk { width:15px; height:15px; border:1.5px solid var(--olive); border-radius:50%; position:relative; flex:none; }
.plat-name .mk::after { content:""; position:absolute; inset:3.5px; background:var(--olive); border-radius:50%; }
.plat-name .sq { width:13px; height:13px; border:1.5px solid var(--t-3); border-radius:3px; flex:none; }
.plat-sub { font-family:'JetBrains Mono', monospace; font-size:var(--text-xs); color:var(--t-3); margin-top:7px; letter-spacing:0.02em; }
.plat-sub--hover { color:var(--olive-text); }
table.matrix tbody td, table.matrix tbody th { padding:18px 22px; vertical-align:top; border-bottom:1px solid var(--hair-1); }
table.matrix tbody tr:last-child td, table.matrix tbody tr:last-child th { border-bottom:none; }
.matrix .dim-cell { width:20%; background:var(--bg-2); }
.matrix .dim-cell .dim-num { font-family:'JetBrains Mono', monospace; font-size:var(--text-xs); color:var(--t-4); display:block; margin-bottom:4px; }
.matrix .dim-cell .dim-t { font-size:var(--text-lg); font-weight:600; color:var(--t-1); letter-spacing:-0.005em; line-height:1.3; }
.matrix td.cell { border-left:1px solid var(--hair-1); }
.matrix td.cell--hover { background:linear-gradient(180deg, rgba(184,176,106,0.035), rgba(184,176,106,0.015)); }
.cell__inner { display:flex; gap:11px; align-items:flex-start; }
.cell__text { font-size:var(--text-md); color:var(--t-2); line-height:1.55; }
.cell__text strong { color:var(--t-1); font-weight:600; }
.src-tag {
    display:inline-flex; align-items:center; gap:5px; margin-top:9px;
    font-family:'JetBrains Mono', monospace; font-size:9px; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--t-3); background:var(--bg-3); border:1px solid var(--hair-2); border-radius:4px; padding:2px 7px;
  }
.src-tag::before { content:""; width:4px; height:4px; border-radius:50%; background:var(--t-4); }
.matrix-foot { padding:16px 22px; background:var(--bg-2); border-top:1px solid var(--hair-2); display:flex; flex-direction:column; gap:6px; }
.matrix-foot p { margin:0; font-size:var(--text-xs); color:var(--t-3); line-height:1.6; }
.matrix-foot p .marker { color:var(--t-2); }
.arch-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.arch-card { background:var(--bg-2); border:1px solid var(--hair-1); border-radius:10px; padding:26px 26px 22px; display:flex; flex-direction:column; }
.arch-card--hover { border-color:rgba(184,176,106,0.3); }
.arch-card__head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; }
.arch-card__name { display:flex; align-items:center; gap:9px; font-size:var(--text-xl); font-weight:600; color:var(--t-1); letter-spacing:-0.005em; }
.arch-card__tag { font-family:'JetBrains Mono', monospace; font-size:var(--text-2xs); letter-spacing:0.1em; text-transform:uppercase; padding:4px 9px; border-radius:5px; }
.arch-card__tag--hover { color:var(--olive); background:rgba(184,176,106,0.1); border:1px solid rgba(184,176,106,0.3); }
.arch-card__tag--theirs { color:var(--t-3); background:var(--bg-3); border:1px solid var(--hair-2); }
.flow { display:flex; flex-direction:column; gap:0; flex:1; }
.node { background:var(--bg-1); border:1px solid var(--hair-2); border-radius:8px; padding:15px 16px; display:flex; gap:13px; align-items:flex-start; }
.node--center { border-color:var(--olive); background:linear-gradient(180deg, #16140e, #131211); box-shadow:0 0 0 4px rgba(184,176,106,0.06); }
.node--cloud { border-color:var(--hair-3); }
.node__ico { width:30px; height:30px; border-radius:7px; background:var(--bg-3); border:1px solid var(--hair-2); color:var(--olive); display:inline-flex; align-items:center; justify-content:center; flex:none; }
.node--cloud .node__ico { color:var(--t-2); }
.node__t { font-size:var(--text-lg); font-weight:600; color:var(--t-1); letter-spacing:-0.005em; }
.node__s { font-family:'JetBrains Mono', monospace; font-size:var(--text-xs); color:var(--t-3); line-height:1.6; margin-top:4px; }
.node__s span { display:block; }
.flow__link { display:flex; flex-direction:column; align-items:center; padding:7px 0; color:var(--hair-3); }
.flow__link svg { width:16px; height:16px; }
.flow__link--olive { color:var(--olive); }
.arch-card__cap { margin-top:20px; padding-top:18px; border-top:1px solid var(--hair-1); font-size:var(--text-md); color:var(--t-2); line-height:1.55; }
.arch-card__cap b { color:var(--t-1); font-weight:600; }
.arch-card__cap .src-tag { margin-top:0; margin-left:8px; }
.setup-grid { display:grid; grid-template-columns:1.45fr 1fr; gap:18px; align-items:stretch; }
.setup-card { background:var(--bg-2); border:1px solid var(--hair-1); border-radius:10px; padding:28px; display:flex; flex-direction:column; }
.setup-card--hover { border-color:rgba(184,176,106,0.3); }
.setup-card__head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:26px; }
.setup-card__name { font-size:var(--text-xl); font-weight:600; color:var(--t-1); letter-spacing:-0.005em; }
.setup-card__total { font-family:'JetBrains Mono', monospace; font-size:var(--text-xs); letter-spacing:0.04em; color:var(--olive); }
.setup-card__total--muted { color:var(--t-3); }
.stepper { display:flex; flex-direction:column; gap:0; counter-reset:step; flex:1; }
.step { display:grid; grid-template-columns:34px 1fr auto; gap:14px; align-items:start; position:relative; padding-bottom:22px; }
.step:last-child { padding-bottom:0; }
.step:not(:last-child)::before { content:""; position:absolute; left:16px; top:30px; bottom:2px; width:1.5px; background:var(--hair-2); }
.step--hover:not(:last-child)::before { background:linear-gradient(180deg, var(--olive-dim), var(--hair-2)); }
.step__num { width:33px; height:33px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono', monospace; font-size:var(--text-sm); font-weight:500; flex:none; position:relative; z-index:1; }
.step--hover .step__num { background:rgba(184,176,106,0.12); border:1px solid var(--olive); color:var(--olive); }
.step--sky .step__num { background:var(--bg-3); border:1px solid var(--hair-2); color:var(--t-2); }
.step__body { padding-top:6px; }
.step__t { font-size:var(--text-lg); font-weight:600; color:var(--t-1); letter-spacing:-0.005em; }
.step__d { font-size:var(--text-sm); color:var(--t-3); line-height:1.5; margin-top:3px; }
.step__time { font-family:'JetBrains Mono', monospace; font-size:var(--text-xs); color:var(--olive); white-space:nowrap; padding-top:8px; letter-spacing:0.02em; }
.step__time--muted { color:var(--t-4); }
.setup-card__cap { margin-top:24px; padding-top:18px; border-top:1px solid var(--hair-1); font-size:var(--text-md); color:var(--t-2); line-height:1.55; }
.setup-card__cap b { color:var(--t-1); font-weight:600; }
/* Pricing-comparison cards: pages whose "day one" story is a price list
   (Votix) rather than a setup sequence (Skydio) use this instead of
   .setup-grid. Same card chrome, a flat amount list instead of a stepper. */
.price-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.price-card { background:var(--bg-2); border:1px solid var(--hair-1); border-radius:10px; padding:26px; display:flex; flex-direction:column; }
.price-card--hover { border-color:rgba(184,176,106,0.3); }
.price-card__head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.price-card__name { font-size:var(--text-xl); font-weight:600; color:var(--t-1); letter-spacing:-0.005em; }
.price-card__tag { font-family:'JetBrains Mono', monospace; font-size:var(--text-2xs); letter-spacing:0.1em; text-transform:uppercase; padding:4px 9px; border-radius:5px; }
.price-card__tag--hover { color:var(--olive); background:rgba(184,176,106,0.1); border:1px solid rgba(184,176,106,0.3); }
.price-card__tag--theirs { color:var(--t-3); background:var(--bg-3); border:1px solid var(--hair-2); }
.price-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; flex:1; }
.price-list li { padding:11px 0; border-bottom:1px solid var(--hair-1); display:flex; justify-content:space-between; gap:12px; font-size:var(--text-md); color:var(--t-2); }
.price-list li:last-child { border-bottom:none; }
.price-list li .tier { color:var(--t-1); font-weight:600; }
.price-list li .amt { font-family:'JetBrains Mono', monospace; color:var(--t-1); white-space:nowrap; }
/* Per-tier sub-detail ("1 deployment", "2,000 livestream min/mo, then
   recharge") -- only FlightHub 2's price cards use this today. */
.price-list li .amt small { display:block; font-size:9.5px; color:var(--t-3); font-family:'Inter', sans-serif; letter-spacing:0.02em; margin-top:2px; text-align:right; }
.price-card__cap { margin-top:20px; padding-top:18px; border-top:1px solid var(--hair-1); font-size:var(--text-md); color:var(--t-2); line-height:1.55; }
.price-card__cap b { color:var(--t-1); font-weight:600; }
.price-card__cap .src-tag { margin-top:8px; }
.price-example { margin-top:24px; padding:18px 20px; background:var(--bg-1); border:1px solid var(--hair-2); border-radius:8px; }
.price-example__t { font-family:'JetBrains Mono', monospace; font-size:var(--text-xs); letter-spacing:0.04em; color:var(--t-3); text-transform:uppercase; margin-bottom:8px; }
.price-example p { margin:0; font-size:var(--text-md); color:var(--t-2); line-height:1.6; }
.price-example b { color:var(--t-1); }
/* The metering-claim block under a pricing section -- only DJI FlightHub 2
   has one today (a written-out cost calculation + its own cited sources). */
.claim { margin-top:22px; border:1px solid var(--hair-2); border-radius:10px; background:var(--bg-1); padding:24px 26px; }
.claim h3 { margin:0 0 12px; font-size:var(--text-xl); font-weight:600; color:var(--t-1); letter-spacing:-0.005em; }
.claim p { margin:0 0 12px; font-size:var(--text-md); color:var(--t-2); line-height:1.6; }
.claim p:last-child { margin-bottom:0; }
.claim b { color:var(--t-1); font-weight:600; }
.claim__calc { margin-top:18px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.sources { margin-top:20px; display:flex; flex-direction:column; gap:8px; }
.sources__h { font-family:'JetBrains Mono', monospace; font-size:var(--text-2xs); letter-spacing:0.1em; text-transform:uppercase; color:var(--t-3); }
.sources ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.sources li { font-size:var(--text-sm); color:var(--t-3); line-height:1.5; }
.sources a { color:var(--olive-text); text-decoration:none; }
.sources a:hover { color:var(--olive); }
.sources__note { font-size:var(--text-xs); color:var(--t-4); line-height:1.6; margin-top:2px; }
.caps { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.cap { padding:24px 22px; background:var(--bg-2); border:1px solid var(--hair-1); border-radius:8px; display:flex; flex-direction:column; }
.cap__icon { width:34px; height:34px; border-radius:7px; background:var(--bg-3); border:1px solid var(--hair-2); color:var(--olive); display:inline-flex; align-items:center; justify-content:center; margin-bottom:18px; }
.cap__t { font-size:var(--text-xl); font-weight:600; color:var(--t-1); letter-spacing:-0.005em; margin:0 0 8px; }
.cap__d { font-size:var(--text-sm); color:var(--t-3); line-height:1.55; margin:0; }
/* Only FlightHub 2's capability copy links out (to /docs/ pages) today, but
   the rule is generic. */
.cap__d a { color:var(--olive-text); text-decoration:none; }
.cap__d a:hover { color:var(--olive); }
.tradeoff { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.trade-col { border:1px solid var(--hair-1); border-radius:10px; padding:28px; background:var(--bg-2); }
.trade-col--hover { border-color:rgba(184,176,106,0.3); background:linear-gradient(180deg, rgba(184,176,106,0.05), transparent); }
.trade-col--theirs { border-color:rgba(122,166,146,0.26); background:linear-gradient(180deg, rgba(122,166,146,0.045), transparent); }
.trade-col__head { display:flex; align-items:center; gap:10px; margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid var(--hair-1); }
.trade-col__head h3 { margin:0; font-size:var(--text-2xl); font-weight:600; color:var(--t-1); letter-spacing:-0.01em; }
.trade-pill { font-family:'JetBrains Mono', monospace; font-size:var(--text-2xs); letter-spacing:0.1em; text-transform:uppercase; padding:4px 10px; border-radius:5px; }
.trade-pill--hover { color:var(--olive); background:rgba(184,176,106,0.1); border:1px solid rgba(184,176,106,0.3); }
.trade-pill--theirs { color:var(--sage); background:rgba(122,166,146,0.1); border:1px solid rgba(122,166,146,0.3); }
.trade-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0; }
.trade-list li { padding:14px 0; border-bottom:1px solid var(--hair-1); display:flex; gap:12px; align-items:flex-start; font-size:var(--text-md); color:var(--t-2); line-height:1.55; }
.trade-list li:last-child { border-bottom:none; }
.trade-list li strong { color:var(--t-1); font-weight:600; }
.trade-mark { flex:none; margin-top:2px; width:16px; height:16px; }
.trade-mark--hover { color:var(--olive); }
.trade-mark--theirs { color:var(--sage); }
.trade-note { font-size:var(--text-xs); color:var(--t-4); font-style:normal; }
/* Closing summary line under a tradeoff column -- only DJI FlightHub 2 uses
   this today ("Bottom line: ..."). */
.trade-bottom { margin-top:16px; font-size:var(--text-sm); color:var(--t-3); line-height:1.6; }
.trade-bottom b { color:var(--t-2); font-weight:600; }
.faq { max-width:880px; }
.faq details { border-bottom:1px solid var(--hair-1); }
.faq details:first-child { border-top:1px solid var(--hair-1); }
.faq summary { list-style:none; cursor:pointer; padding:22px 4px; display:flex; align-items:center; justify-content:space-between; gap:20px; font-size:var(--text-xl); font-weight:600; color:var(--t-1); letter-spacing:-0.005em; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary:hover { color:var(--olive); }
.faq summary .chev { flex:none; width:20px; height:20px; color:var(--t-3); transition:transform 0.2s, color 0.14s; }
.faq details[open] summary .chev { transform:rotate(45deg); color:var(--olive); }
.faq__a { padding:0 56px 24px 4px; font-size:var(--text-lg); color:var(--t-2); line-height:1.65; margin:0; }
.faq__a b { color:var(--t-1); font-weight:600; }
.faq__a .src-tag { margin-top:10px; }
/* Only FlightHub 2's FAQ answers link out today, but the rule is generic. */
.faq__a a { color:var(--olive-text); text-decoration:none; }
.faq__a a:hover { color:var(--olive); }
.cta-band { padding:80px 0; border-bottom:1px solid var(--hair-1); position:relative; overflow:hidden; }
.cta-band::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 50% 0%, rgba(184,176,106,0.07), transparent 70%); pointer-events:none; }
.cta-inner { position:relative; text-align:center; max-width:680px; margin:0 auto; }
.cta-inner h2 { margin:0 0 16px; font-size:32px; font-weight:600; letter-spacing:-0.02em; color:var(--t-1); line-height:1.2; }
.cta-inner p { font-size:var(--text-xl); color:var(--t-2); line-height:1.55; margin:0 auto 30px; max-width:540px; }
.cta-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.cta-contact { margin-top:24px; font-size:var(--text-sm); color:var(--t-3); }
.cta-contact a { color:var(--olive-text); text-decoration:none; }
.cta-contact a:hover { color:var(--olive); }
@media (max-width: 980px) {
.arch-grid, .setup-grid, .price-grid, .tradeoff { grid-template-columns:1fr; }
.caps { grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px) {
.caps { grid-template-columns:1fr; }
.verdict { flex-direction:column; }
.verdict__half + .verdict__half { border-left:none; border-top:1px solid var(--hair-2); }
}

/* Page-level trademark / no-affiliation notice. Lives between the CTA band
   and the footer on comparison pages that name a competitor product. */
.disclaimer { padding:36px 0 44px; }
.disclaimer p { margin:0 auto; max-width:820px; font-size:var(--text-xs); color:var(--t-4); line-height:1.7; }

/* Comparison-page hero overrides.
 *
 * These lived in each page's inline <style> and were dropped when that CSS was
 * lifted into this shared sheet. They are OVERRIDES of style.css, not additions,
 * which is why losing them was silent: the selectors still resolved, just to the
 * shared sheet's values.
 *
 * The visible damage was the h1. style.css sets `.hero h1 em { font-style:italic }`
 * and a 46px/‑0.02em/1.1 h1; these pages deliberately run 42px/‑0.022em/1.12 with
 * an UPRIGHT olive em and `text-wrap:balance`. Without them the accent rendered
 * italic and the headline rewrapped mid-phrase ("...charge per / viewer, per
 * drone" instead of breaking at the phrase), which pushed every section below it
 * down the page - a 10-14% pixel shift on all ten comparison pages.
 *
 * Load order matters and is already correct: comparison.css is linked after
 * style.css, so these win at equal specificity. Restored verbatim from the
 * pre-migration inline block, media query included.
 */
.hero { padding:60px 0 64px; border-bottom:1px solid var(--hair-1); position:relative; overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 88% 0%, rgba(184,176,106,0.06), transparent 70%),
    radial-gradient(ellipse 50% 50% at 0% 100%, rgba(122,166,146,0.035), transparent 70%); }
.hero__grid { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,0.92fr); gap:48px; align-items:center; position:relative; }
.hero h1 { margin:0 0 20px; font-size:42px; font-weight:600; letter-spacing:-0.022em; line-height:1.12; color:var(--t-1); text-wrap:balance; }
.hero h1 em { font-style:normal; color:var(--olive); }
@media (max-width: 980px) {
  .hero { padding:48px 0; }
  .hero__grid { grid-template-columns:1fr; gap:36px; }
  .hero h1 { font-size:34px; }
}
