/* Reelquill AI — "Why Reelquill AI" page (why.html). Loaded after styles.css and uses its tokens,
   buttons, nav, FAQ, final call to action and footer. Plain CSS, no build step.
   Every animation here stops under prefers-reduced-motion (styles.css turns them all off). */

/* ---------- "Why Reelquill" link in the simple pages' top bar ----------
   (The same block goes into styles.css when add-why-links.js adds the link to the other pages.) */
.nav-why { display: inline-flex; align-items: center; height: 38px; margin-left: auto; padding: 0 14px; border-radius: 999px;
  color: var(--text-2); font-size: .92rem; font-weight: 500; white-space: nowrap; transition: color .2s, background-color .2s; }
.nav-why:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.nav-why[aria-current="page"] { color: var(--text); background: rgba(255, 255, 255, .07); }
.nav-why + .nav-back { margin-left: -8px; }
.nav-cta-why { margin-left: 2px; }
.nav-cta-why .ico { width: 16px; height: 16px; }
@media (max-width: 560px) {
  .why-page .nav-back { display: none; }
  .nav-cta-why { margin-left: auto; }
}
@media (max-width: 480px) {
  .nav-why:not([aria-current]) + .nav-back { display: none; }
  .nav-why[aria-current="page"] { display: none; }
  .nav-why[aria-current="page"] + .nav-back { margin-left: auto; }
}

/* ---------- Hero ---------- */
.why-hero { position: relative; isolation: isolate; overflow: clip; padding: clamp(108px, 14vh, 150px) 0 clamp(56px, 7vw, 100px); }
.why-hero .hero-bg { height: auto; bottom: 0; min-height: 0; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.why-hero .hero-bg::after { display: none; }
/* this page's sections sit a little closer together than the home page's */
.why-page .section { padding-block: clamp(44px, 5.6vw, 80px); }
.why-page .cta { padding-top: clamp(24px, 4vw, 56px); }
.why-page .why-sources { padding-top: clamp(8px, 2vw, 24px); }
.why-hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); gap: clamp(32px, 5vw, 76px); align-items: center; }
.why-hero-text { position: relative; }
.why-hero-text::before { content: ""; position: absolute; inset: -12% -8% -14%; z-index: -1; pointer-events: none;
  background: radial-gradient(52% 52% at 45% 50%, rgba(5, 8, 18, .72), rgba(5, 8, 18, 0) 76%); }
.why-pill { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; max-width: 100%;
  background: rgba(10, 14, 30, .55); border: 1px solid var(--line-2); color: var(--text); font-size: .9rem; font-weight: 500;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: fadeUp .9s .05s var(--ease) both; }
.why-title { margin-top: 18px; font-size: clamp(2.15rem, 4.5vw, 4rem); line-height: 1.04; letter-spacing: -.042em; font-weight: 750; text-wrap: balance; }
.wt-line { display: block; animation: fadeUp 1s .15s var(--ease) both; }
.wt-grad { width: fit-content; max-width: 100%; margin-top: .08em; padding-bottom: .08em; animation-delay: .32s;
  background-image: linear-gradient(100deg, #5ff0d6, #8fb3ff 38%, #b79cff 68%, #ff8cc0); background-size: 150% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 10px rgba(4, 7, 16, .55)) drop-shadow(0 8px 36px rgba(139, 92, 246, .35));
  animation: fadeUp 1s .32s var(--ease) both, gradPan 9s 1.4s ease-in-out infinite alternate; }
@keyframes gradPan { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@media (forced-colors: active) { .wt-grad { -webkit-text-fill-color: currentColor; background: none; } }
@media (prefers-reduced-motion: reduce) { .wt-grad { background-size: 100% 100%; } }
/* phones: the comparison in one line, above the fold (js/why.js fills both numbers) */
.why-mini { display: none; }
.wm-a { color: var(--text-2); font-weight: 600; }
.wm-a span { color: var(--text); }
.wm-vs { color: var(--text-3); font: 700 .7rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.wm-b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
@media (forced-colors: active) { .wm-b { -webkit-text-fill-color: currentColor; background: none; } }
.why-sub { max-width: 600px; margin-top: 22px; font-size: clamp(1.02rem, 1.45vw, 1.17rem); line-height: 1.62; color: #c3cbe2; animation: fadeUp 1s .48s var(--ease) both; }
.why-ctas { justify-content: flex-start; margin-top: 30px; animation-delay: .6s; }
.why-facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 24px; color: var(--text-2); font-size: .92rem; animation: fadeUp 1s .72s var(--ease) both; }
.why-facts li { display: inline-flex; align-items: center; gap: 8px; }
.why-facts .ico { width: 18px; height: 18px; color: #6ff0d6; }

/* the receipt */
.receipt { position: relative; padding: 24px clamp(18px, 2.4vw, 28px) 22px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(22, 29, 56, .86), rgba(10, 14, 28, .92)); border: 1px solid var(--line-2);
  box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(255, 255, 255, .03) inset;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); animation: fadeUp 1.1s .35s var(--ease) both; }
.rc-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; padding-bottom: 14px; border-bottom: 1px dashed rgba(160, 175, 220, .24); }
.rc-title { color: var(--text); font: 600 1.02rem/1.3 var(--display); letter-spacing: -.01em; }
.rc-sub { color: var(--text-3); font-size: .78rem; }
.rc-lines { display: grid; padding: 6px 0; }
.rc-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 11px 0; animation: fadeUp .7s var(--ease) both; }
.rc-line:nth-child(1) { animation-delay: .7s; }
.rc-line:nth-child(2) { animation-delay: .9s; }
.rc-line:nth-child(3) { animation-delay: 1.1s; }
.rc-line + .rc-line { border-top: 1px solid rgba(160, 175, 220, .08); }
.rc-dot, .lg { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.rc-name b { display: block; color: var(--text); font-weight: 600; font-size: .98rem; line-height: 1.3; }
.rc-name small { display: block; margin-top: 2px; color: var(--text-3); font-size: .8rem; line-height: 1.35; }
.rc-amt { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-amt::after { content: "/yr"; margin-left: 2px; color: var(--text-3); font-size: .78rem; font-weight: 500; }
.rc-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding-top: 14px;
  border-top: 1px dashed rgba(160, 175, 220, .24); color: var(--text-2); font-size: .92rem; animation: fadeUp .7s 1.3s var(--ease) both; }
.rc-total b { color: var(--text); font: 750 clamp(1.7rem, 2.6vw, 2.1rem)/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-total small { margin-left: 3px; color: var(--text-3); font: 500 .9rem var(--body); letter-spacing: 0; }
.rc-note { margin-top: 10px; color: var(--text-3); font-size: .8rem; line-height: 1.45; animation: fadeUp .7s 1.4s var(--ease) both; }
.rc-note span { color: var(--text-2); font-variant-numeric: tabular-nums; }
.rc-note a { color: var(--text-2); text-decoration: underline; text-decoration-color: rgba(184, 193, 218, .45); text-underline-offset: 3px; }
.rc-note a:hover { color: #fff; }
.rc-vs { position: relative; display: grid; place-items: center; margin: 16px 0 14px; }
.rc-vs::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(160, 175, 220, .3), transparent); }
.rc-vs span { position: relative; padding: 5px 12px; border-radius: 999px; background: #0d1226; border: 1px solid var(--line-2); color: var(--text-3); font: 700 .7rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; }

/* the price (OWNER: the numbers are set in why.html only) */
.rq-price { position: relative; isolation: isolate; padding: 20px clamp(16px, 2vw, 22px) 18px; border-radius: 20px;
  box-shadow: 0 24px 60px -24px rgba(124, 92, 255, .75); animation: fadeUp .9s 1.5s var(--ease) both; }
.rq-price::before { content: ""; position: absolute; inset: -1.5px; z-index: -2; border-radius: 21.5px;
  background: conic-gradient(from var(--a), #2ee6c5, #5b8cff, #8b5cf6, #ff5fa2, #2ee6c5); animation: spin 7s linear infinite; }
.rq-price::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 20px;
  background: radial-gradient(90% 120% at 0% 0%, rgba(46, 230, 197, .13), transparent 60%), radial-gradient(90% 120% at 100% 100%, rgba(255, 95, 162, .12), transparent 60%), #0c1226; }
.rq-price-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; }
.rq-name { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; color: var(--text); font: 700 1.06rem/1 var(--display); letter-spacing: -.01em; }
.rq-name img { width: 26px; height: 26px; }
.rq-tag { padding: 5px 10px; border-radius: 999px; background: var(--grad); color: #07101f; font: 700 .68rem/1 var(--body); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.rq-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 14px; }
.rq-now { font: 800 clamp(3rem, 5vw, 3.9rem)/1 var(--display); letter-spacing: -.045em; font-variant-numeric: tabular-nums;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 6px 24px rgba(124, 92, 255, .45)); }
.rq-was { order: 2; flex-basis: 100%; color: var(--text-3); font-size: .9rem; line-height: 1.3; }
.rq-was span { color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.rq-once { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(46, 230, 197, .5); color: #86ecdb; background: rgba(46, 230, 197, .08); font: 700 .74rem/1 var(--body); letter-spacing: .07em; text-transform: uppercase; }
.rq-incl { margin-top: 12px; color: var(--text-2); font-size: .9rem; line-height: 1.55; }
.rq-incl b { color: var(--text); font-weight: 600; }
.rq-biz { margin-top: 8px; }
.rq-incl a { color: #a9c1ff; text-decoration: underline; text-underline-offset: 3px; }
.rq-refund { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: #86ecdb; font-weight: 600; font-size: .92rem; }
.rq-refund .ico { width: 18px; height: 18px; }
@media (forced-colors: active) { .rq-now { -webkit-text-fill-color: currentColor; background: none; } }

@media (max-width: 980px) {
  .why-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .why-hero-text { text-align: center; }
  .why-sub { margin-inline: auto; }
  .why-ctas, .why-facts { justify-content: center; }
  .receipt { width: min(560px, 100%); margin-inline: auto; }
  .wt-grad { margin-inline: auto; }
  .why-hero .hero-canvas.is-ready { opacity: .6; }
  .why-hero-text::before { inset: -6% -16px; background: radial-gradient(75% 60% at 50% 45%, rgba(5, 8, 18, .8), rgba(5, 8, 18, .35) 75%, transparent); }
  .why-sub { color: #d6dcef; }
  .why-facts { color: #c3cbe2; }
  .why-mini { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; margin-top: 16px; padding: 9px 18px; border-radius: 999px;
    background: rgba(10, 14, 30, .78); border: 1px solid var(--line-2); font: 700 1.08rem/1.25 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: fadeUp 1s .4s var(--ease) both; }
}
@media (max-width: 520px) {
  .why-hero { padding-top: 92px; }
  .why-ctas .btn-ghost { display: none; }
  .why-ctas { margin-top: 24px; }
  .why-pill { font-size: .82rem; }
  .why-facts { gap: 8px 16px; font-size: .86rem; }
  .rc-line { gap: 10px; }
  .rc-name small { font-size: .76rem; }
}

/* segment colours: the rented tools are muted, Reelquill AI glows */
.rc-a, .lg-a, .seg-a::before { background: linear-gradient(180deg, #5481cc, #4467ab); }
.rc-b, .lg-b, .seg-b::before { background: linear-gradient(180deg, #7b68d0, #6655b5); }
.rc-c, .lg-c, .seg-c::before { background: linear-gradient(180deg, #b85ea2, #9a4d89); }
.seg-solo::before { background: linear-gradient(180deg, #7383b0, #5d6b96); }

/* ---------- The subscription stack ---------- */
.why-stack { padding-top: clamp(48px, 6vw, 88px); }
.why-stack::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 40% at 50% 55%, rgba(91, 140, 255, .08), transparent 70%); }
.stack-card { max-width: 1100px; margin-inline: auto; padding: clamp(18px, 3.4vw, 40px); border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)), var(--card); border: 1px solid var(--line-2);
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .9); }
.stack-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; }
.seg-toggle { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line-2); }
.seg-toggle button { position: relative; z-index: 1; height: 42px; padding: 0 24px; border-radius: 999px; color: var(--text-2); font-weight: 600; font-size: .96rem; white-space: nowrap; transition: color .25s; }
.seg-toggle button[aria-pressed="true"] { color: #fff; }
.seg-toggle button:hover { color: var(--text); }
.seg-ind { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px;
  background: linear-gradient(135deg, #456dde, #7659f7 55%, #984fdb); box-shadow: 0 10px 26px -10px rgba(124, 92, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: transform .45s var(--ease); }
.stack-card[data-years="3"] .seg-ind { transform: translateX(100%); }
.stack-save { flex: 1 1 340px; max-width: 560px; color: var(--text-2); font-size: 1rem; line-height: 1.45; text-align: right; }
.stack-save b { display: inline-block; margin: 0 2px; font: 800 clamp(1.8rem, 3.4vw, 2.5rem)/1 var(--display); letter-spacing: -.04em; vertical-align: -.08em; font-variant-numeric: tabular-nums;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
@media (forced-colors: active) { .stack-save b { -webkit-text-fill-color: currentColor; background: none; } }

.bars { display: grid; gap: 26px; margin-top: 32px; }
.bar-row { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr) 128px; grid-template-areas: "label track total" ". legend legend"; align-items: center; gap: 10px 22px; }
.bar-label { grid-area: label; }
.bar-label b { display: block; color: var(--text); font: 600 1.02rem/1.3 var(--display); letter-spacing: -.01em; }
.bar-label span { display: block; margin-top: 3px; color: var(--text-3); font-size: .82rem; line-height: 1.4; }
.bar-track { grid-area: track; height: 48px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); overflow: hidden; }
.bar-fill { display: flex; height: 100%; }
/* one block per plan per year (js/why.js); every bar to the same 3-year scale */
.seg { position: relative; flex: none; width: 0; height: 100%; transition: width 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.seg::before, .seg.is-later::after { content: ""; position: absolute; top: 0; bottom: 0; left: 2px; right: 0; border-radius: 6px; transition: opacity .5s var(--ease); }
.seg:first-child::before { left: 0; }
.seg.yr-start::before, .seg.yr-start::after { left: 7px; }
/* years 2 and 3: dashed outlines in the 1-year view, filled in the 3-year view */
.seg.is-later::after { border: 1px dashed rgba(160, 175, 220, .62); opacity: 0; }
.stack-card[data-years="1"] .seg.is-later::before { opacity: 0; }
.stack-card[data-years="1"] .seg.is-later::after { opacity: 1; }
.stack-card[data-years="3"] .seg.is-later::before { transition-delay: .05s; }
.stack-card[data-years="3"] .seg.yr-3::before { transition-delay: .35s; }
.bars-key { display: flex; align-items: center; gap: 10px; margin-top: 18px; color: var(--text-3); font-size: .82rem; line-height: 1.4; }
.k-ghost { flex: none; width: 26px; height: 14px; border: 1px dashed rgba(160, 175, 220, .65); border-radius: 4px; }
.bar-total { grid-area: total; text-align: right; }
.bar-total b { display: block; color: var(--text); font: 750 1.55rem/1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bar-per { display: block; margin-top: 5px; color: var(--text-3); font-size: .8rem; }
.bar-legend { grid-area: legend; display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--text-3); font-size: .82rem; line-height: 1.4; }
.bar-legend .lg { display: inline-block; margin-right: 8px; vertical-align: -1px; }
.lg-amt { margin-left: 4px; color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.bar-main .bar-track, .bar-rq .bar-track { height: 60px; }
.bar-alt { grid-template-areas: "div div div" "label track total"; margin-top: 8px; }
.bar-alt .bar-track { height: 32px; }
.bar-alt .bar-total b { font-size: 1.3rem; }
.bar-div { grid-area: div; display: flex; align-items: center; gap: 14px; color: var(--text-3); font: 600 .72rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.bar-div::after { content: ""; flex: 1; height: 1px; background: var(--line-2); }

/* Reelquill AI's bar, and the gap to the stack drawn over its track (js/why.js) */
.bar-rq { position: relative; }
.bar-rq .bar-track { position: relative; overflow: visible; }
.bar-rq .bar-fill { position: relative; }
.bar-gap { position: absolute; top: 50%; left: 0; width: 0; height: 0; border-top: 2px dashed rgba(46, 230, 197, .75); pointer-events: none;
  transition: left 1.1s var(--ease), width 1.1s var(--ease); }
.bar-gap::before, .bar-gap::after { content: ""; position: absolute; top: -7px; width: 2px; height: 12px; border-radius: 1px; background: rgba(46, 230, 197, .75); }
.bar-gap::before { left: 0; }
.bar-gap::after { right: 0; }
.bar-gap b { position: absolute; right: 8px; bottom: 9px; color: #86ecdb; font: 700 1rem/1 var(--display); letter-spacing: -.01em; white-space: nowrap; font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 8px rgba(5, 8, 18, .9); }
.bar-gap.is-left b { right: auto; left: 10px; }
.bar-gap.is-empty { visibility: hidden; }
.bar-rq .bar-label b { display: flex; align-items: center; gap: 8px; }
.bar-rq .bar-track { border-color: rgba(143, 176, 255, .4); background: rgba(91, 140, 255, .06); box-shadow: 0 0 0 1px rgba(91, 140, 255, .12), 0 14px 40px -16px rgba(124, 92, 255, .8); }
.seg-rq { overflow: hidden; border-radius: 6px; box-shadow: 0 0 18px rgba(124, 92, 255, .7); }
.seg-rq::before { background: var(--grad); }
.seg-rq::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%); transform: translateX(-120%); animation: shimmer 3.2s 1.6s ease-in-out infinite; }
@keyframes shimmer { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }
.bar-rq .bar-total b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
@media (forced-colors: active) { .bar-rq .bar-total b { -webkit-text-fill-color: currentColor; background: none; } }
.bar-renew { grid-area: legend; color: var(--text-3); font-size: .82rem; line-height: 1.45; }

.stack-notes { display: grid; gap: 8px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--text-3); font-size: .86rem; line-height: 1.5; }
.stack-notes p { display: flex; align-items: flex-start; gap: 10px; }
.stack-notes .ico { width: 16px; height: 16px; margin-top: 3px; color: var(--text-3); stroke-width: 2.2; }
.stack-notes span span { color: var(--text-2); }

@media (max-width: 860px) {
  .stack-save { text-align: left; }
  .bar-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label total" "track track" "legend legend"; gap: 10px 16px; }
  .bar-alt { grid-template-areas: "div div" "label total" "track track"; }
  .bar-track { height: 40px; }
  .bar-main .bar-track, .bar-rq .bar-track { height: 54px; }
  .bar-alt .bar-track { height: 30px; }
  .bar-gap b { font-size: .92rem; }
}
@media (max-width: 520px) {
  .seg-toggle { width: 100%; }
  .seg-toggle button { padding: 0 12px; }
  .stack-save { flex-basis: 100%; }
  .bar-total b { font-size: 1.35rem; }
  .bar-legend { flex-direction: column; gap: 6px; }
}

/* ---------- Feature grid ---------- */
.why-grid { padding-top: clamp(48px, 6vw, 88px); }
.grid-card { padding: clamp(14px, 2.4vw, 28px); border-radius: 28px; background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)), var(--card); border: 1px solid var(--line-2); }
.cmp-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-bottom: 18px; color: var(--text-3); font-size: .84rem; }
.cmp-legend li { display: inline-flex; align-items: center; gap: 8px; }
.cmp-legend .m { width: 24px; height: 24px; }
.cmp-legend .m .ico { width: 14px; height: 14px; }
.m { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; vertical-align: middle; }
.m .ico { width: 17px; height: 17px; stroke-width: 2.4; }
.m-y { background: rgba(51, 196, 129, .16); color: #4fe3a4; box-shadow: inset 0 0 0 1px rgba(79, 227, 164, .25); }
.m-p { background: rgba(246, 196, 83, .13); color: #f6c453; box-shadow: inset 0 0 0 1px rgba(246, 196, 83, .22); }
.m-p .ico { stroke-width: 1.8; }
.m-n { background: rgba(255, 95, 162, .09); color: #ff8ab8; box-shadow: inset 0 0 0 1px rgba(255, 95, 162, .2); }
.m-u { background: rgba(255, 255, 255, .04); color: var(--text-3); box-shadow: inset 0 0 0 1px rgba(160, 175, 220, .16); }
.m-s { background: rgba(255, 95, 162, .09); color: #ff9cc2; box-shadow: inset 0 0 0 1px rgba(255, 95, 162, .2); }
.m-s .ico { stroke-width: 1.9; }
.m-o { background: var(--grad); color: #07101f; box-shadow: 0 6px 18px -6px rgba(124, 92, 255, .9); }

.vs-pick { display: none; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.vs-pick-l { flex-basis: 100%; color: var(--text-3); font: 600 .74rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.vs-pick button { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); color: var(--text-2); font-size: .88rem; font-weight: 600; transition: background-color .2s, color .2s, border-color .2s; }
.vs-pick button:hover { color: var(--text); background: rgba(255, 255, 255, .08); }
.vs-pick button[aria-pressed="true"] { color: #fff; border-color: transparent; background: linear-gradient(135deg, #456dde, #7659f7 55%, #984fdb); box-shadow: 0 8px 20px -10px rgba(124, 92, 255, .9); }

.cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.cmp { width: 100%; min-width: 1040px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.cmp th, .cmp td { font-weight: 400; }
.cmp thead th { position: relative; padding: 16px 8px 16px; vertical-align: bottom; text-align: center; }
.cmp thead th b { display: block; color: var(--text); font: 600 .98rem/1.2 var(--display); letter-spacing: -.01em; }
.cmp thead th small { display: block; margin-top: 3px; color: var(--text-3); font-size: .74rem; }
.cmp thead th img { margin: 0 auto 8px; }
.cmp .c-feat { width: 210px; text-align: left; }
@media (min-width: 1000px) { .cmp thead th.c-rq { width: 150px; } }
.cmp tbody th.c-feat { padding: 13px 14px 13px 6px; border-top: 1px solid var(--line); color: var(--text); font: 600 .92rem/1.35 var(--body); vertical-align: top; }
.cmp tbody th.c-feat small { display: block; margin-top: 2px; color: var(--text-3); font-size: .76rem; font-weight: 400; }
.cmp td { padding: 12px 8px 13px; border-top: 1px solid var(--line); text-align: center; vertical-align: top; }
.cmp .grp th.c-feat { padding: 28px 6px 10px; border-top: 0; color: #86ecdb; font: 600 .74rem/1.3 var(--body); letter-spacing: .14em; text-transform: uppercase; vertical-align: bottom; }
.cmp .grp td { padding: 0; border-top: 0; }
.cmp tbody:first-of-type .grp th.c-feat { padding-top: 12px; }
.cn { display: block; margin-top: 7px; color: var(--text-3); font-size: .75rem; line-height: 1.35; overflow-wrap: anywhere; }
.cv { display: block; }
.cv-t { display: block; margin-top: 7px; color: var(--text); font-size: .84rem; font-weight: 600; }
.cv small { display: block; margin-top: 2px; color: var(--text-3); font-size: .75rem; line-height: 1.35; }
.cv small span { color: var(--text-2); font-variant-numeric: tabular-nums; }
/* Reelquill AI's column */
.cmp .c-rq-col { background: linear-gradient(180deg, rgba(91, 140, 255, .10), rgba(139, 92, 246, .08)); }
.cmp thead .c-rq-col { border-radius: 18px 18px 0 0; }
.cmp thead .c-rq-col::before { content: ""; position: absolute; left: 10px; right: 10px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--grad); }
.cmp tbody:last-of-type tr:last-child .c-rq-col { border-radius: 0 0 18px 18px; }
.cmp td.c-rq-col .cn { color: #c9d3f5; }
.cmp td.c-rq-col .cv small, .cmp td.c-rq-col .cv small span { color: #c9d3f5; }
.cmp tbody tr:not(.grp):hover th, .cmp tbody tr:not(.grp):hover td:not(.c-rq-col) { background: rgba(255, 255, 255, .018); }
.cmp-foot { margin-top: 18px; color: var(--text-3); font-size: .84rem; line-height: 1.5; text-align: center; }

/* narrow screens: Reelquill AI and one product at a time (js/why.js); without JavaScript the table scrolls sideways */
@media (max-width: 999px) {
  html.js .vs-pick { display: flex; }
  html.js .cmp { min-width: 0; }
  html.js .cmp .c:not(.c-rq):not(.is-vs) { display: none; }
  html.js .cmp .c-feat { width: 36%; }
  html.js .cmp thead th small { font-size: .7rem; }
}
@media (max-width: 420px) {
  html.js .cmp tbody th.c-feat { padding-right: 8px; font-size: .86rem; }
  html.js .cmp td { padding-inline: 5px; }
  .cn, .cv small { font-size: .72rem; }
  .vs-pick button { height: 34px; padding: 0 12px; font-size: .84rem; }
}

/* ---------- Why local AI ---------- */
.why-local { padding-top: clamp(48px, 6vw, 88px); }
.local-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lt { position: relative; overflow: hidden; padding: 28px 24px 26px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012)), var(--card); border: 1px solid var(--line);
  transition: border-color .3s, transform .3s var(--ease); }
.lt::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 2px; background: var(--grad); opacity: .8; }
.lt:hover { border-color: rgba(143, 176, 255, .35); transform: translateY(-3px); }
.lt::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(124, 92, 255, .16), transparent 70%); }
.lt-fig { display: flex; align-items: flex-end; gap: 10px; }
.lt-fig b { flex: none; padding-right: .04em; font: 800 clamp(3.4rem, 4.8vw, 4.4rem)/.95 var(--display); letter-spacing: -.05em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 8px 26px rgba(124, 92, 255, .4)); }
.lt-fig span { padding-bottom: .5em; color: var(--text); font: 600 1rem/1.25 var(--display); letter-spacing: -.01em; }
@media (forced-colors: active) { .lt-fig b { -webkit-text-fill-color: currentColor; background: none; } }
.lt h3 { display: flex; align-items: center; gap: 9px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 1.12rem; letter-spacing: -.015em; }
.lt h3 .ico { flex: none; width: 19px; height: 19px; color: #6ff0d6; }
.lt p { margin-top: 8px; color: var(--text-2); font-size: .95rem; line-height: 1.55; }
@media (max-width: 1024px) { .local-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .local-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lt { padding: 20px 20px 22px; }
  .lt-fig b { font-size: 3rem; }
  .lt h3 { margin-top: 12px; padding-top: 12px; }
}

/* ---------- AI assistants (MCP) ---------- */
.why-mcp { padding-top: clamp(48px, 6vw, 88px); }
.why-mcp::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(40% 50% at 78% 50%, rgba(139, 92, 246, .1), transparent 70%); }
.mcp-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 76px); align-items: center; }
.mcp-text h2 { text-wrap: balance; }
.mcp-points { display: grid; gap: 14px; margin-top: 28px; }
.mcp-points li { display: flex; align-items: flex-start; gap: 12px; color: var(--text-2); }
.mcp-points b { color: var(--text); font-weight: 600; }
.mcp-points .ico { width: 22px; height: 22px; margin-top: 1px; color: #6ff0d6; }
.mcp-fine { max-width: 62ch; margin-top: 24px; color: var(--text-3); font-size: .84rem; line-height: 1.55; }

.chat { position: relative; border-radius: 22px; background: #0b1020; border: 1px solid var(--line-2); overflow: hidden;
  box-shadow: 0 40px 90px -36px rgba(0, 0, 0, .95), 0 30px 90px -40px rgba(124, 92, 255, .6); }
.chat-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--text-3); font-size: .8rem; }
.chat-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.chat-bar span { margin-left: 8px; }
.chat-body { display: grid; gap: 14px; padding: clamp(16px, 2.4vw, 22px); }
.chat-you { justify-self: end; max-width: 88%; padding: 12px 16px; border-radius: 16px 16px 4px 16px; background: linear-gradient(135deg, #3d5cd8, #6a4fe0); color: #fff; font-size: .95rem; line-height: 1.5; box-shadow: 0 12px 28px -14px rgba(91, 110, 255, .9); }
.chat-steps { display: grid; gap: 8px; }
.chat-steps li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 9px 12px; border-radius: 12px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); color: var(--text-3); font-size: .84rem; }
.chat-steps li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(51, 196, 129, .2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234fe3a4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.chat-steps code { color: #9fe9da; font: 600 .82rem var(--mono); }
.chat-steps span { margin-left: auto; text-align: right; }
.chat-done { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; font-size: .95rem; line-height: 1.45; }
.chat-done .ico { width: 22px; height: 22px; color: #4fe3a4; stroke-width: 2.4; }
.chat-chip { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(46, 230, 197, .45); background: rgba(46, 230, 197, .07); color: #86ecdb; font-size: .8rem; font-weight: 600; }
.chat-chip .ico { width: 15px; height: 15px; }
@media (prefers-reduced-motion: no-preference) {
  html.js .chat .chat-you, html.js .chat .chat-steps li, html.js .chat .chat-done, html.js .chat .chat-chip { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
  html.js .chat.in .chat-you, html.js .chat.in .chat-steps li, html.js .chat.in .chat-done, html.js .chat.in .chat-chip { opacity: 1; transform: none; }
  html.js .chat.in .chat-you { transition-delay: .35s; }
  html.js .chat.in .chat-steps li:nth-child(1) { transition-delay: .95s; }
  html.js .chat.in .chat-steps li:nth-child(2) { transition-delay: 1.35s; }
  html.js .chat.in .chat-steps li:nth-child(3) { transition-delay: 1.75s; }
  html.js .chat.in .chat-steps li:nth-child(4) { transition-delay: 2.15s; }
  html.js .chat.in .chat-steps li:nth-child(5) { transition-delay: 2.55s; }
  html.js .chat.in .chat-steps li:nth-child(6) { transition-delay: 2.95s; }
  html.js .chat.in .chat-done { transition-delay: 3.45s; }
  html.js .chat.in .chat-chip { transition-delay: 3.8s; }
}
@media (max-width: 900px) { .mcp-inner { grid-template-columns: minmax(0, 1fr); } .chat { width: min(560px, 100%); margin-inline: auto; } }
@media (max-width: 420px) { .chat-steps span { margin-left: 28px; text-align: left; flex-basis: 100%; } }

/* ---------- FAQ, final call ---------- */
.why-faq { padding-top: clamp(48px, 6vw, 88px); }
.cta-mark { display: block; }

.why-page .footer { padding-top: 0; }
.why-page .foot-bottom { margin-top: 0; border-top: 0; padding-top: 28px; }

/* ---------- Sources & fine print ---------- */
.why-sources { padding-top: clamp(16px, 3vw, 40px); }
.src-h { font-size: clamp(1.45rem, 2.4vw, 1.9rem); letter-spacing: -.025em; }
.src-intro { max-width: 88ch; margin-top: 12px; color: var(--text-3); font-size: .9rem; line-height: 1.55; }
.src-details { margin-top: 20px; }
.src-details summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 18px; border-radius: 14px; cursor: pointer; list-style: none;
  background: var(--card); border: 1px solid var(--line); color: var(--text); font-weight: 600; font-size: .92rem; transition: border-color .2s; }
.src-details summary::-webkit-details-marker { display: none; }
.src-details summary:hover { border-color: rgba(143, 176, 255, .35); }
.src-details summary small { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); font-weight: 500; font-size: .82rem; white-space: nowrap; }
.src-details summary small::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease); }
.src-details[open] summary small::after { transform: translateY(2px) rotate(-135deg); }
.src-wrap { margin-top: 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--card); overflow: hidden; }
.src-table { width: 100%; border-collapse: collapse; font-size: .86rem; line-height: 1.45; }
.src-table thead th:nth-child(1) { width: 21%; }
.src-table thead th:nth-child(2) { width: 33%; }
.src-table thead th:nth-child(3), .src-table thead th:nth-child(4) { width: 13%; }
.src-table th, .src-table td { padding: 11px 14px; border-top: 1px solid var(--line); color: var(--text-2); text-align: left; vertical-align: top; font-weight: 400; }
.src-table thead th { border-top: 0; background: rgba(255, 255, 255, .03); color: var(--text-3); font: 600 .72rem/1.3 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.src-table tbody th { color: var(--text); font-weight: 600; }
.src-table tbody th span { display: block; color: var(--text-2); font-weight: 400; }
.src-num { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.src-num abbr { margin-left: 2px; color: var(--amber); text-decoration: none; cursor: help; }
.src-table a { color: #a9c1ff; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.src-note { margin-top: 10px; color: var(--text-3); font-size: .8rem; }
.src-h3 { margin-top: 30px; font-size: 1.05rem; letter-spacing: -.01em; }
.src-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; margin-top: 12px; font-size: .86rem; line-height: 1.45; }
.src-links a { color: var(--text-2); text-decoration: underline; text-decoration-color: rgba(184, 193, 218, .4); text-underline-offset: 3px; overflow-wrap: anywhere; transition: color .2s; }
.src-links a:hover { color: #fff; }
.src-links .ico { display: inline-block; width: 13px; height: 13px; margin-left: 6px; vertical-align: -1px; }
.src-tm { max-width: 92ch; margin-top: 26px; color: var(--text-3); font-size: .8rem; line-height: 1.55; }
@media (max-width: 820px) {
  .src-table thead { display: none; }
  .src-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 14px; padding: 14px 16px; border-top: 1px solid var(--line); }
  .src-table tbody tr:first-child { border-top: 0; }
  .src-table tbody th, .src-table tbody td { display: block; padding: 0; border: 0; }
  .src-table tbody th, .src-table tbody td:nth-of-type(1), .src-table tbody td:nth-of-type(4) { grid-column: 1 / -1; }
  .src-table td::before { content: attr(data-label); display: block; margin-bottom: 2px; color: var(--text-3); font: 600 .68rem/1.3 var(--body); letter-spacing: .08em; text-transform: uppercase; }
  .src-links { grid-template-columns: minmax(0, 1fr); }
}