/*
 * /forged-sites, layout v2 (2026-10-19).
 * Follows the section flow of ideaforgestudios.com/forged-sites in the idfs.ai
 * dark theme. Page-scoped: every rule hangs off .fv.
 */
.fv {
  --fv-bg: #0d1119;
  --fv-bg-2: #121826;
  --fv-card: rgba(255, 255, 255, 0.045);
  --fv-card-2: rgba(255, 255, 255, 0.07);
  --fv-line: rgba(255, 255, 255, 0.11);
  --fv-text: rgba(255, 255, 255, 0.86);
  --fv-muted: rgba(255, 255, 255, 0.66);
  --fv-faint: rgba(255, 255, 255, 0.5);
  --fv-purple: #8b5cf6;
  --fv-purple-2: #b49bff;
  --fv-green: #4ade80;
  --fv-radius: 18px;
  color: var(--fv-text);
}
.fv a:not(.fv-btn):not(.lp-btn) { color: var(--fv-purple-2); }
.fv a:not(.fv-btn):not(.lp-btn):hover { color: #fff; }
/* links inside the white form card: dark enough to read on white, underlined so they stand out from the text */
.fv .lp-card a:not(.lp-btn), .fv .lp-card a:not(.lp-btn):hover { color: #5b21b6; text-decoration: underline; text-underline-offset: 2px; }
/* plain links inside running text are underlined, so they never rely on color alone */
.fv p a:not([class]), .fv li a:not([class]), .fv td a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }
.fv :focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; }

.fv-wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.fv-narrow { max-width: 820px; }
.fv-sec { padding: 84px 0; position: relative; scroll-margin-top: var(--fv-anchor, 84px); }
.fv-sec.fv-alt { background: var(--fv-bg-2); }
.fv-sec.fv-deep { background: radial-gradient(110% 80% at 15% 0%, rgba(124, 77, 255, 0.22) 0%, rgba(124, 77, 255, 0) 60%), #0b0e17; }
.fv-eyebrow { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fv-purple-2); }
.fv-h2 { margin: 0 0 14px; font-size: clamp(28px, 4.2vw, 44px); line-height: 1.12; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.fv-h2 em { font-style: normal; color: var(--fv-purple-2); }
.fv-lede { margin: 0 0 12px; font-size: 19px; line-height: 1.55; color: var(--fv-text); max-width: 760px; }
.fv-copy { margin: 0 0 12px; font-size: 16px; line-height: 1.65; color: var(--fv-muted); max-width: 760px; }
.fv-copy strong, .fv-lede strong { color: #fff; }
.fv-small { font-size: 14px; line-height: 1.55; color: var(--fv-faint); }
.fv-next { display: inline-flex; align-items: center; gap: 6px; margin-top: 26px; padding: 9px 16px; border: 1px solid var(--fv-line);
  border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--fv-text) !important; text-decoration: none; }
.fv-next:hover { background: var(--fv-card-2); }

/* ---- hero ---- */
.fv-hero { position: relative; z-index: 2; padding: 128px 0 72px; overflow: hidden; background: #0a0d15; }
.fv-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.fv-hero-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, rgba(8, 10, 18, 0.94) 0%, rgba(8, 10, 18, 0.86) 48%, rgba(14, 12, 34, 0.7) 100%); }
.fv-hero-grid { position: relative; z-index: 2; display: grid; gap: 34px; align-items: start; }
.fv-hero h1 { margin: 0 0 10px; font-size: clamp(34px, 5.4vw, 58px); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.fv-hero h1 em { font-style: normal; color: var(--fv-purple-2); }
.fv-tagline { margin: 0 0 18px; font-size: clamp(20px, 2.4vw, 26px); color: #ddd6ff; font-weight: 600; }
.fv-hero-lede { margin: 0 0 18px; font-size: 17px; line-height: 1.6; color: var(--fv-text); max-width: 620px; }
.fv-hero-lede strong { color: #fff; }
.fv-points { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; max-width: 620px; }
.fv-points li { display: grid; grid-template-columns: 30px 1fr; gap: 8px; font-size: 15.5px; line-height: 1.45; color: var(--fv-text); }
.fv-points b { font-size: 12px; font-weight: 800; color: var(--fv-purple-2); padding-top: 3px; }
.fv-loop { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--fv-muted); max-width: 620px; }
.fv-loop strong { color: #ffd98a; }
.fv-formwrap { position: relative; }
.fv-formwrap .lp-card { padding-top: 22px; }
.fv-formwrap .lp-card > h2, .fv-formwrap .lp-card > .lp-card-sub { padding-right: 64px; }
.fv-card-eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #6a3de8; }
.fv-seal { position: absolute; top: -26px; right: -10px; z-index: 3; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center;
  text-align: center; font-size: 13px; font-weight: 800; line-height: 1.1; color: #fff; transform: rotate(10deg);
  background: radial-gradient(circle at 35% 30%, #a27bff, #6a3de8 70%); box-shadow: 0 10px 24px rgba(40, 16, 120, 0.5), 0 0 0 4px rgba(255, 255, 255, 0.14); }
.fv-after-form { margin: 12px 4px 0; font-size: 14px; line-height: 1.5; color: var(--fv-muted); }

/* ---- product names (were inline on the old page) ---- */
.fv .product-link { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.fv .product-link.mog { color: #a98bf5 !important; }
.fv .product-link.draftdash { color: #f87171 !important; }
.fv .product-link.ethel { color: #60a5fa !important; }
.fv .product-link.catori { color: #4ade80 !important; }
.fv .product-link.vigil { color: #fbbf24 !important; }
.fv .product-link.thea { color: #fde047 !important; }
.fv .product-link:hover { color: #fff !important; }
.fv .badge-soon { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: #fbbf24; background: rgba(251, 191, 36, 0.16); border: 1px solid rgba(251, 191, 36, 0.35); }

/* ---- chips ---- */
/* jump menu: one line, sticks under the header (site-extras.js sets top), marks the current section */
.fv-chips { position: sticky; top: 0; z-index: 40; background: rgba(10, 13, 21, 0.9); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--fv-line); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
.fv-chips .fv-wrap { max-width: 1400px; }
.fv-chips nav { display: flex; flex-wrap: nowrap; gap: 6px; padding: 12px 16px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%); }
.fv-chips nav::-webkit-scrollbar { display: none; }
.fv-chips nav a:first-child { margin-left: auto; }
.fv-chips nav a:last-child { margin-right: auto; }
.fv-chips a { flex: none; white-space: nowrap; display: inline-flex; align-items: center; min-height: 40px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--fv-line);
  background: var(--fv-card); font-size: 14px; font-weight: 600; color: var(--fv-text) !important; text-decoration: none; transition: background-color .2s ease, border-color .2s ease; }
.fv-chips a:hover { background: rgba(139, 92, 246, 0.2); border-color: rgba(139, 92, 246, 0.5); }
.fv-chips a[aria-current="true"] { background: rgba(139, 92, 246, 0.32); border-color: rgba(167, 139, 250, 0.85); color: #fff !important; }
.fv-chips a:focus-visible { outline: 2px solid #a07df0; outline-offset: 2px; }

/* pricing page */
.fv-price-top { padding-top: 150px; }
.fv-price-ads { max-width: 760px; margin-top: 26px; }
@media (max-width: 760px) { .fv-price-top { padding-top: 120px; } }

/* ---- cards and grids ---- */
.fv-grid { display: grid; gap: 18px; margin-top: 30px; }
.fv-card { background: var(--fv-card); border: 1px solid var(--fv-line); border-radius: var(--fv-radius); padding: 24px; }
.fv-card h3 { margin: 0 0 10px; font-size: 21px; line-height: 1.25; font-weight: 700; color: #fff; }
.fv-card p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.6; color: var(--fv-muted); }
.fv-card p:last-child { margin-bottom: 0; }
.fv-card .fv-step { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fv-purple-2); }
.fv-card-top { border-top: 3px solid var(--fv-purple); }
.fv-card ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.fv-card li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.5; color: var(--fv-muted); }
.fv-card li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--fv-purple); }
.fv-feature { border-color: rgba(139, 92, 246, 0.45); background: linear-gradient(160deg, rgba(139, 92, 246, 0.16), rgba(255, 255, 255, 0.04)); }
.fv-feature .fv-price-tag { display: inline-block; margin: 2px 0 10px; padding: 4px 12px; border-radius: 999px; background: rgba(139, 92, 246, 0.25); color: #fff; font-weight: 700; font-size: 15px; }

/* ---- plans ---- */
.fv-includes { margin: 22px 0 0; padding: 18px 20px; border-radius: 14px; background: var(--fv-card); border: 1px solid var(--fv-line); }
.fv-includes p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.6; color: var(--fv-text); }
.fv-includes ul { margin: 0; padding-left: 20px; color: var(--fv-muted); font-size: 15px; line-height: 1.6; }
.fv-addon { margin-top: 14px; padding: 14px 18px; border-radius: 14px; border: 1px dashed rgba(139, 92, 246, 0.6); font-size: 15.5px; color: var(--fv-text); }
.fv-plans { display: grid; gap: 16px; margin-top: 30px; padding-top: 14px; }
.fv-plan { position: relative; display: flex; flex-direction: column; background: var(--fv-card); border: 1px solid var(--fv-line); border-radius: var(--fv-radius); padding: 22px 18px; }
.fv-plan.is-rec { border: 2px solid rgba(139, 92, 246, 0.75); background: linear-gradient(170deg, rgba(139, 92, 246, 0.18), rgba(255, 255, 255, 0.04) 55%); }
.fv-rec-badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 3px 14px; border-radius: 999px; background: #7c4dff; color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.fv-plan .fv-tier { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fv-purple-2); }
.fv-plan h3 { margin: 0 0 6px; font-size: 20px; font-weight: 800; color: #fff; }
.fv-plan .fv-price { margin: 0; font-size: 34px; font-weight: 800; color: #fff; line-height: 1.1; }
.fv-plan .fv-price span { font-size: 14px; font-weight: 500; color: var(--fv-faint); }
.fv-plan .fv-term { margin: 2px 0 10px; font-size: 13.5px; color: var(--fv-faint); }
.fv-plan .fv-pitch { margin: 0 0 12px; font-size: 15px; line-height: 1.45; color: var(--fv-text); min-height: 3em; }
.fv-plan ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; flex-grow: 1; }
.fv-plan li { display: grid; grid-template-columns: 18px 1fr; gap: 6px; font-size: 14px; line-height: 1.45; color: var(--fv-muted); }
.fv-plan li .y { color: var(--fv-green); }
.fv-plan li .n { color: rgba(255, 255, 255, 0.35); }
.fv-plan li.off { color: rgba(255, 255, 255, 0.42); }
.fv-plan li strong { color: #fff; }
.fv-btn { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border-radius: 999px; font-weight: 700; font-size: 15.5px;
  text-decoration: none; color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.06); transition: background 0.15s; }
.fv-btn:hover { background: rgba(255, 255, 255, 0.14); }
.fv-plan .fv-btn { font-size: 14.5px; padding: 0 10px; white-space: nowrap; }
.fv-btn-primary { background: #7c4dff; border-color: #7c4dff; }
.fv-btn-primary:hover { background: #6a3de8; }
.fv-choose { margin-top: 26px; display: grid; gap: 16px; }
.fv-box { background: var(--fv-card); border: 1px solid var(--fv-line); border-radius: var(--fv-radius); padding: 20px 22px; }
.fv-box h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: #fff; }
.fv-box p, .fv-box li { font-size: 15px; line-height: 1.6; color: var(--fv-muted); }
.fv-box p { margin: 0 0 8px; }
.fv-box ul { margin: 0; padding-left: 20px; list-style: disc; }
.fv-includes ul { list-style: disc; }
.fv details > summary { cursor: pointer; }
.fv-box details { margin-top: 6px; }
.fv-box details > summary { font-weight: 600; color: var(--fv-purple-2); font-size: 15px; }
.fv-table-wrap { margin-top: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--fv-line); border-radius: 14px; }
.fv-table { border-collapse: collapse; width: 100%; min-width: 780px; font-size: 14.5px; }
.fv-table caption { text-align: left; padding: 14px 16px 4px; font-weight: 700; color: #fff; }
.fv-table th, .fv-table td { padding: 11px 12px; border-bottom: 1px solid var(--fv-line); text-align: left; vertical-align: top; color: var(--fv-muted); }
.fv-table thead th { color: #fff; font-weight: 700; }
.fv-table tbody th { color: var(--fv-text); font-weight: 600; }
.fv-table th:first-child { position: sticky; left: 0; z-index: 1; background: #141a28; min-width: 10rem; }
.fv-table .rec { background: rgba(139, 92, 246, 0.13); }
.fv-compare > summary { margin-top: 22px; font-weight: 700; color: #fff; font-size: 17px; }
.fv-compare > summary span { display: block; font-weight: 400; font-size: 14px; color: var(--fv-muted); }

/* ---- why (expandable cards) ---- */
.fv-why .fv-card details { margin-top: 8px; }
.fv-why .fv-card summary { font-size: 14.5px; font-weight: 700; color: var(--fv-purple-2); list-style: none; }
.fv-why .fv-card summary::-webkit-details-marker { display: none; }
.fv-why .fv-card summary::after { content: " +"; }
.fv-why .fv-card details[open] summary::after { content: " \2212"; }
.fv-why .fv-card details[open] summary .more { display: none; }
.fv-why .fv-card details:not([open]) summary .less { display: none; }
.fv-why .fv-card details > *:not(summary) { margin-top: 10px; }
.fv-kicker { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fv-green); }

/* ---- agents ---- */
.fv-agents { display: grid; gap: 16px; margin-top: 30px; }
.fv-agent { display: grid; grid-template-columns: 112px 1fr; gap: 14px; align-items: start; background: var(--fv-card); border: 1px solid var(--fv-line); border-radius: var(--fv-radius); padding: 14px; }
.fv-agent button { position: relative; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: pointer; aspect-ratio: 16 / 10; background: #000; }
.fv-agent button img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.85; }
.fv-agent button span { position: absolute; inset: 0; display: grid; place-items: center; }
.fv-agent button:hover svg circle { fill: #7c4dff; }
.fv-agent h3 { margin: 0 0 2px; font-size: 18px; font-weight: 800; color: #fff; }
.fv-agent .fv-role { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.fv-agent p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--fv-muted); }

/* ---- proof ---- */
.fv-sites { display: grid; gap: 12px; margin-top: 26px; }
.fv-site { background: rgba(0, 0, 0, 0.28); border: 1px solid var(--fv-line); border-radius: 14px; padding: 16px; }
.fv-site b { display: block; color: #fff; }
.fv-site a { font-size: 14px; color: var(--fv-green) !important; }
.fv-site p { margin: 8px 0 0; font-size: 14px; color: var(--fv-muted); }

/* ---- fine print (FAQ) ---- */
.fv-tools { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 8px; }
.fv-tools button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--fv-line); background: var(--fv-card-2); color: #fff; font-weight: 600; font-size: 14.5px; cursor: pointer; }
.fv-tools button:hover { background: rgba(139, 92, 246, 0.25); }
.fv-faq-group { margin-top: 30px; }
.fv-faq-group > h3 { margin: 0 0 4px; font-size: 20px; font-weight: 800; color: #fff; }
.fv-faq-group > p { margin: 0 0 12px; font-size: 15px; color: var(--fv-muted); }
.fv-q { border: 1px solid var(--fv-line); border-radius: 14px; background: var(--fv-card); margin-top: 10px; }
.fv-q > summary { list-style: none; display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 16px 18px; font-size: 17px; font-weight: 600; color: #fff; }
.fv-q > summary::-webkit-details-marker { display: none; }
.fv-q > summary::after { content: "+"; flex: 0 0 auto; font-size: 22px; line-height: 1; color: var(--fv-purple-2); }
.fv-q[open] > summary::after { content: "\2212"; }
.fv-q > div { padding: 0 18px 18px; font-size: 15.5px; line-height: 1.65; color: var(--fv-muted); }
.fv-q > div p { margin: 0 0 10px; }
.fv-q > div p:last-child { margin-bottom: 0; }

/* ---- ownership tiles ---- */
.fv-own { display: grid; gap: 14px; margin-top: 28px; }
.fv-own .fv-card h3 { font-size: 18px; }

/* ---- start ---- */
.fv-start-grid { display: grid; gap: 28px; align-items: start; }
.fv-start details { margin-top: 10px; border-top: 1px solid var(--fv-line); padding-top: 10px; }
.fv-start details summary { font-weight: 700; color: #fff; }
.fv-start details p { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--fv-muted); }
.fv-phone { margin-top: 16px; font-size: 16px; color: var(--fv-text); }
.fv-phone a { font-weight: 700; }

/* ---- copy-for-AI dialog ---- */
.fv-dialog { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.82); }
.fv-dialog.open { display: flex; }
.fv-dialog > div { width: min(860px, 100%); max-height: 90vh; display: flex; flex-direction: column; gap: 10px; background: #141a28; border: 1px solid var(--fv-line); border-radius: 16px; padding: 18px; }
.fv-dialog h2 { margin: 0; font-size: 20px; color: #fff; }
.fv-dialog textarea { flex: 1; min-height: 50vh; width: 100%; resize: vertical; border-radius: 10px; border: 1px solid var(--fv-line); background: #0b0f18; color: #e8e8f0; padding: 12px; font-size: 14px; line-height: 1.5; }
.fv-dialog .row { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.fv-dialog .row button { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--fv-line); background: var(--fv-card-2); color: #fff; font-weight: 700; cursor: pointer; }
.fv-dialog .row button.primary { background: #7c4dff; border-color: #7c4dff; }

@media (min-width: 720px) {
  .fv-grid.c3 { grid-template-columns: repeat(3, 1fr); }
  .fv-grid.c2 { grid-template-columns: repeat(2, 1fr); }
  .fv-sites { grid-template-columns: repeat(2, 1fr); }
  .fv-agents { grid-template-columns: repeat(2, 1fr); }
  .fv-own { grid-template-columns: repeat(2, 1fr); }
  .fv-choose { grid-template-columns: repeat(3, 1fr); }
  .fv-agent { grid-template-columns: 150px 1fr; }
}
@media (min-width: 980px) {
  .fv-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); grid-template-areas: "intro form" "body form"; column-gap: 48px; row-gap: 0; }
  .fv-hero-intro { grid-area: intro; }
  .fv-hero-grid > .fv-formwrap { grid-area: form; margin-top: 8px; }
  .fv-hero-body { grid-area: body; }
  .fv-plans { grid-template-columns: repeat(5, 1fr); gap: 12px; }
  .fv-sites { grid-template-columns: repeat(3, 1fr); }
  .fv-agents { grid-template-columns: repeat(3, 1fr); }
  .fv-agent { grid-template-columns: 1fr; }
  .fv-own { grid-template-columns: repeat(3, 1fr); }
  .fv-start-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 48px; }
  .fv-grid.c4 { grid-template-columns: repeat(4, 1fr); }
  .fv-grid.c4 > :last-child:nth-child(4n+3) { grid-column: span 2; }
}
@media (max-width: 979px) and (min-width: 720px) {
  .fv-plans { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 719px) {
  .fv-sec { padding: 60px 0; }
  .fv-hero { padding: 104px 0 52px; }
  .fv-seal { width: 78px; height: 78px; font-size: 12px; top: -20px; right: -4px; }
  .fv-plan .fv-pitch { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .fv-hero-bg[data-hero-video] { display: none; }
}
.fv-price-ads .fv-step { display: none; }