/* Inner pages: same balance as the homepage. Loaded after styles.css and home.css.
   Sections are light (.lt), light blue (.lt.tint) or navy (.dark). */

/* Dark page hero with the living background */
.page-hero.dark { background: var(--navy); isolation: isolate; }
.page-hero.dark .wrap { z-index: 1; }
.home-light .dark h1, .home-light .dark .h2, .home-light .dark h2, .home-light .dark h3 { color: var(--white); }
.home-light .dark .lede, .home-light .dark .muted { color: var(--muted); }
.home-light .dark .label { color: var(--cyan-light); }
.home-light .dark a.h-call { color: var(--white) !important; }
.dark .h-call svg { color: var(--cyan-light); }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding-top: 4px; }

/* Light sections */
.lt { background: var(--white); color: var(--ink); }
.lt.tint { background: linear-gradient(180deg, #edf3fb 0%, #e6eff9 100%); }
.lt .label { color: var(--teal); }
.lt .lede, .lt .muted { color: var(--soft); }
.lt .card { background: var(--white); border-color: #d6e2f1; color: var(--ink); box-shadow: 0 18px 40px -34px rgba(13, 68, 140, .4); }
.lt .card p { color: var(--soft); }
.lt .card .num { color: var(--teal); }
.lt .plus-list { color: var(--soft); }
.lt .plus-list li::before { color: var(--teal); }
.lt .btn-outline { color: var(--navy); border-color: #9aaccc; }
.lt .btn-outline:hover { color: var(--navy); border-color: var(--navy); background: #edf3fb; }

/* Plans on light */
.lt .plan { background: var(--white); border-color: #d6e2f1; box-shadow: 0 24px 50px -40px rgba(13, 68, 140, .5); }
.lt .plan--pop { border: 2px solid var(--cyan); background: linear-gradient(180deg, #eef8fc 0%, var(--white) 45%); box-shadow: 0 30px 60px -36px rgba(5, 158, 196, .55); }
.lt .price span, .lt .best { color: var(--soft); }
.lt .best { border-top-color: #d6e2f1; }
.lt .best b { color: var(--ink); }
.lt .plan .alt { color: var(--teal); }
.lt .checks li { color: var(--soft); }
.lt .checks li.inc { color: var(--ink); }
.lt .checks li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23036898' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5'/%3E%3C/svg%3E"); }

/* FAQ and lists on light */
.lt .faq details { background: var(--white); border-color: #d6e2f1; }
.lt .faq summary { color: var(--ink); }
.lt .faq summary::after { color: var(--teal); }
.lt .faq details p { color: var(--soft); }
.lt .essentials li { background: var(--white); border-color: #d6e2f1; color: var(--ink); }
.lt .essentials li::before { color: var(--teal); }

/* Portfolio cards and filters on light */
.lt .filter { color: var(--ink-2); border-color: #9aaccc; }
.lt .filter:hover { color: var(--navy); border-color: var(--navy); }
.lt .filter[aria-pressed="true"] { background: var(--navy); color: var(--white); border-color: var(--navy); }
.lt .work-frame { border-color: #c9d6ea; box-shadow: 0 24px 40px -34px rgba(13, 68, 140, .5); }
.home-light .lt .work h3 a { color: var(--ink); }
.home-light .lt .work h3 a:hover { color: var(--blue); }
.lt .work p { color: var(--soft); }
.lt .work-ind { color: var(--teal); }
.lt .work-area { color: var(--soft); }
.home-light .lt .work-links a { color: var(--blue); }
.lt .concept-note { background: var(--white); border-color: #d6e2f1; color: var(--soft); }
.lt .concept-note strong { color: var(--ink); }

/* Quote page on light */
.lt .q-steps li { color: var(--soft); }
.lt .q-steps .n { border-color: #9aaccc; color: var(--soft); }
.lt .q-steps li.on { color: var(--ink); }
.lt .q-steps li.on .n { background: var(--cyan); color: var(--navy); border-color: var(--cyan); }
.lt .q-steps li.done .n { background: var(--teal); color: var(--white); border-color: var(--teal); }
.lt .form-card { border: 1px solid #d6e2f1; }

/* Inline call-to-action strip used mid-page */
.cta-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; margin-top: 44px; padding: 22px 26px; border-radius: 18px; background: var(--white); border: 1px solid #d6e2f1; box-shadow: 0 24px 40px -34px rgba(13, 68, 140, .5); }
.cta-strip p { font: 700 20px var(--display); color: var(--ink); letter-spacing: -0.01em; }
.cta-strip p span { display: block; font: 500 16px var(--body); color: var(--soft); letter-spacing: 0; margin-top: 2px; }
.cta-strip .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.dark .cta-strip { background: rgba(255, 255, 255, .05); border-color: var(--line-2); box-shadow: none; }
.home-light .dark .cta-strip p { color: var(--white); }
.dark .cta-strip p span { color: var(--muted); }

/* Dark elements nested inside light sections keep their dark styling */
.home-light .lt .dark .label { color: var(--cyan-light); }
.home-light .lt .dark .lede { color: var(--muted); }
.home-light .lt .allin h2, .home-light .lt .allin .h2 { color: var(--white); }
.home-light .lt .allin .label { color: var(--cyan-light); }
.home-light .lt .allin .lede { color: var(--muted); }
.lt .allin { box-shadow: 0 40px 70px -40px rgba(13, 68, 140, .6); }
.lt .cta-band h2 { color: var(--white); }
.home-light .cta-band h2 { color: var(--white); }
.home-light .cta-band p { color: #e3f2fa; }

/* Plain section labels (no code styling) */
.home-light .label { display: inline-flex; align-items: center; gap: 10px; font: 700 14px/1.3 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.home-light .label::before { content: ""; width: 22px; height: 2px; background: var(--cyan); }

/* Pricing: need something different / good to know */
.good { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 64px); margin-top: 48px; }
.good h2 { color: var(--ink); margin-bottom: 10px; }
.good p { color: var(--soft); }
.good .pairs { margin-top: 14px; font-size: 16px; }
.good .pairs b { color: var(--ink); }
.good-h { font: 700 17px var(--display); color: var(--ink); margin-bottom: 10px; }
.good-list { list-style: none; display: grid; gap: 8px; color: var(--soft); font-size: 15.5px; }
.good-list li { padding-left: 18px; position: relative; }
.good-list li::before { content: ""; position: absolute; left: 0; top: .65em; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); }
@media (max-width: 820px) { .good { grid-template-columns: 1fr; } }

/* Buy now / quote buttons on plans */
.plan .plan-alt { align-self: center; font-size: 15px; font-weight: 600; margin-top: -6px; }
.lt .plan a.plan-alt { color: var(--blue); }
.lt .plan p.plan-alt { color: var(--soft); font-weight: 500; }
.dark .plan .plan-alt, .plan .plan-alt { color: var(--cyan-light); }
.lt .plan .plan-alt { color: var(--blue); }

/* Money-back guarantee */
.guarantee { display: flex; gap: 14px; align-items: flex-start; background: #e9f7ef; border: 1px solid #bfe3cc; border-radius: 14px; padding: 16px 18px; margin: 6px 0; }
.guarantee svg { width: 28px; height: 28px; color: #1e7a45; flex: none; }
.guarantee b { display: block; color: #13502d; font-size: 16.5px; }
.guarantee p { color: #2f5e43 !important; font-size: 15px; margin-top: 2px; }
.home-light main .guarantee a { color: #13502d; font-weight: 700; }
.guarantee--wide { margin-top: 28px; max-width: 860px; }

/* Order page */
.order-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (max-width: 920px) { .order-grid { grid-template-columns: 1fr; } }
.order-card { background: var(--white); border: 1px solid #d6e2f1; border-radius: 22px; padding: clamp(24px, 4vw, 40px); display: flex; flex-direction: column; gap: 18px; box-shadow: 0 40px 70px -50px rgba(13, 68, 140, .6); }
.order-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-family: var(--display); }
.order-price b { font-size: clamp(48px, 6vw, 68px); letter-spacing: -0.05em; line-height: 1; color: var(--ink); }
.order-price span { color: var(--soft); font-size: 17px; }
.order-card .checks li { color: var(--soft); }
.order-after { color: var(--ink); font-weight: 600; font-size: 16px; }
.order-go { align-self: stretch; }
.order-fine { font-size: 14px; color: var(--soft); }
.order-fine svg { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; color: var(--teal); }
.order-aside { display: flex; flex-direction: column; gap: 18px; }
.next-steps { list-style: none; counter-reset: n; display: grid; gap: 14px; }
.next-steps li { counter-increment: n; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; }
.next-steps li::before { content: counter(n); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--white); display: grid; place-items: center; font: 700 14px var(--display); }
.next-steps b { color: var(--ink); }
.next-steps span { color: var(--soft); font-size: 15px; }
.order-switch { font-size: 14.5px; color: var(--soft); }
.order-switch a[aria-current] { font-weight: 700; text-decoration: none; color: var(--ink); }

/* Honeypot (hidden from people, visible to bots) */
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Welcome form: two sections, both visible */
form[data-mailform] .fstep + .fstep { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--paper-2); }
.form-done h2 { font-family: var(--display); color: var(--ink); }
.form-done p { color: var(--soft); }

/* ===== Pricing v2: plan builder ===== */
.builder { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
@media (max-width: 1080px) { .builder { grid-template-columns: 1fr; } }
.plan-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: #edf3fb; border: 1px solid #d6e2f1; border-radius: 16px; padding: 6px; margin-bottom: 22px; }
.plan-tabs button { font: inherit; text-align: left; background: transparent; border: 0; border-radius: 12px; padding: 12px 16px; cursor: pointer; color: var(--ink-2); display: flex; flex-direction: column; gap: 2px; min-height: 44px; }
.plan-tabs button b { font: 700 17px var(--display); color: var(--ink); }
.plan-tabs button span { font-size: 14px; color: var(--soft); }
.plan-tabs button[aria-selected="true"] { background: var(--navy); box-shadow: 0 12px 24px -16px rgba(15, 29, 58, .8); }
.plan-tabs button[aria-selected="true"] b { color: var(--white); }
.plan-tabs button[aria-selected="true"] span { color: var(--muted); }
@media (max-width: 640px) { .plan-tabs { grid-template-columns: 1fr; } }
.plan-panel fieldset { border: 0; padding: 0; margin: 0 0 26px; min-width: 0; }
.plan-note { display: flex; gap: 12px; align-items: flex-start; background: #eef6fb; border: 1px solid #cfe5f1; border-radius: 12px; padding: 14px 16px; color: var(--ink-2); font-size: 15.5px; margin-bottom: 22px; }
.plan-note svg { width: 22px; height: 22px; flex: none; color: var(--teal); margin-top: 1px; }
.plan-note b { color: var(--ink); }
.step-h { display: flex; align-items: center; gap: 10px; font: 700 20px var(--display); color: var(--ink); margin-bottom: 14px; padding: 0; }
.step-h span { width: 28px; height: 28px; border-radius: 50%; background: var(--cyan); color: var(--navy); display: grid; place-items: center; font-size: 14px; }
.step-row { margin-bottom: 14px; }
.pick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pick-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1240px) { .pick-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pick-grid, .pick-grid--4 { grid-template-columns: 1fr; } }
.pick-wrap { display: flex; flex-direction: column; gap: 8px; }
.pick { position: relative; display: block; cursor: pointer; height: 100%; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick-body { position: relative; display: flex; flex-direction: column; gap: 8px; height: 100%; background: var(--white); border: 2px solid #d6e2f1; border-radius: 16px; padding: 18px; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.pick:hover .pick-body { border-color: #9fc0dd; }
.pick input:checked + .pick-body { border-color: var(--cyan); background: linear-gradient(180deg, #eef8fc, var(--white) 60%); box-shadow: 0 18px 36px -26px rgba(5, 158, 196, .8); }
.pick input:focus-visible + .pick-body { outline: 3px solid var(--teal); outline-offset: 3px; }
.pick-flag { position: absolute; top: -11px; left: 16px; background: var(--navy); color: var(--white); font: 700 11px var(--body); letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }
.pick-top { display: flex; justify-content: space-between; align-items: center; }
.pick-top b { font: 700 19px var(--display); color: var(--ink); }
.pick-tick { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #b9c9de; display: grid; place-items: center; color: transparent; }
.pick-tick svg { width: 14px; height: 14px; }
.pick input:checked + .pick-body .pick-tick { background: var(--cyan); border-color: var(--cyan); color: var(--navy); }
.pick-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-family: var(--display); }
.pick-price strong { font-size: 30px; letter-spacing: -0.03em; color: var(--ink); }
.pick-price small { color: var(--soft); font: 500 14px var(--body); }
.pick-sub { color: var(--soft); font-size: 14px; }
.pick-save { align-self: flex-start; font: 700 12px var(--body); color: #13502d; background: #e9f7ef; border-radius: 999px; padding: 3px 9px; }
.pick-after { margin-top: auto; padding-top: 10px; border-top: 1px solid #e3ebf5; font-size: 13.5px; color: var(--soft); }
.pick .checks { gap: 6px; }
.pick .checks li { font-size: 14px; color: var(--soft); }
.pick--sm .checks li { font-size: 13.5px; }
.pick--none .pick-body { background: #f7f9fc; border-style: dashed; }
.pick-more { font-size: 14px; color: var(--soft); padding: 0 4px; }
/* billing toggle (radio version) */
.bill-toggle label { position: relative; cursor: pointer; }
.bill-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bill-toggle label span { display: inline-flex; align-items: center; gap: 6px; font: 600 14.5px var(--body); color: var(--ink-2); border-radius: 999px; padding: 9px 16px; min-height: 40px; }
.lt .bill-toggle { background: var(--white); border-color: #c9d6ea; }
.bill-toggle input:checked + span { background: var(--navy); color: var(--white); }
.bill-toggle input:focus-visible + span { outline: 3px solid var(--teal); outline-offset: 2px; }
.bill-toggle label em { font: 600 11.5px var(--body); color: #1e7a45; font-style: normal; }
.bill-toggle input:checked + span em { color: #9fe7c0; }

/* cart summary */
.summary { position: sticky; top: 100px; background: var(--navy); color: var(--white); border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 40px 70px -40px rgba(15, 29, 58, .8); }
@media (max-width: 1080px) { .summary { position: static; } }
.summary h3 { font: 700 20px var(--display); color: var(--white); }
.sum-lines { list-style: none; display: grid; gap: 10px; }
.sum-lines li { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.sum-lines li span:first-child { display: flex; flex-direction: column; }
.sum-lines small { color: var(--muted); font-size: 13px; }
.sum-lines li > span:last-child { font-weight: 700; white-space: nowrap; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; }
.sum-total span { color: var(--muted); font-weight: 600; }
.sum-total b { font: 700 34px var(--display); letter-spacing: -0.03em; }
.sum-then { color: var(--muted); font-size: 14.5px; }
.sum-guar { display: flex; gap: 8px; font-size: 14px; color: #bdf0d3; }
.sum-guar svg { width: 18px; height: 18px; flex: none; margin-top: 2px; }
.sum-go { align-self: stretch; }
.home-light main .summary a.sum-alt { color: var(--cyan-light); text-align: center; font-weight: 600; font-size: 15px; }
.sum-help { font-size: 14px; color: var(--muted); text-align: center; border-top: 1px solid var(--line); padding-top: 12px; }
.home-light main .summary .sum-help a { color: var(--white); font-weight: 700; }

/* quiz */
.quiz { background: var(--white); border: 1px solid #d6e2f1; border-radius: 22px; padding: clamp(22px, 4vw, 40px); max-width: 860px; box-shadow: 0 40px 70px -50px rgba(13, 68, 140, .6); display: flex; flex-direction: column; gap: 18px; }
.qz-bar { height: 6px; background: #e3ebf5; border-radius: 3px; overflow: hidden; }
.qz-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--blue)); transition: width .4s ease; }
.qz-step { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.qz-step legend { font: 700 clamp(22px, 2.6vw, 28px) var(--display); color: var(--ink); letter-spacing: -0.02em; padding: 0; margin-bottom: 14px; }
.qz-step legend span { display: block; font: 500 15px var(--body); color: var(--soft); letter-spacing: 0; margin-top: 4px; }
.qz-step > .btn { align-self: flex-start; }
.qz-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 600px) { .qz-opts { grid-template-columns: 1fr; } }
.qz-opt { position: relative; cursor: pointer; }
.qz-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qz-opt span { display: flex; align-items: center; min-height: 56px; padding: 14px 18px; border: 2px solid #d6e2f1; border-radius: 14px; font-weight: 600; color: var(--ink); transition: border-color .15s, background-color .15s; }
.qz-opt:hover span { border-color: #9fc0dd; }
.qz-opt input:checked + span { border-color: var(--cyan); background: #eef8fc; }
.qz-opt input:focus-visible + span { outline: 3px solid var(--teal); outline-offset: 2px; }
.qz-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.qz-count { font-size: 14px; color: var(--soft); }
.qz-result { display: flex; flex-direction: column; gap: 12px; }
.qz-result h3 { font: 700 clamp(26px, 3vw, 34px) var(--display); color: var(--ink); letter-spacing: -0.03em; }
.qz-result > p { color: var(--soft); }
.qz-result .sum-lines li { border-color: #e3ebf5; color: var(--ink); }
.qz-result .sum-lines small { color: var(--soft); }
.qz-price { color: var(--ink-2) !important; }
.qz-restart { align-self: flex-start; background: none; border: 0; color: var(--blue); font: 600 15px var(--body); text-decoration: underline; cursor: pointer; padding: 8px 0; min-height: 44px; }
.home-light main .qz-result a.sum-alt { color: var(--blue); font-weight: 600; }

/* Start a project: three paths */
.paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 860px) { .paths { grid-template-columns: 1fr; } }
.home-light main a.path { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 20px 52px 20px 22px; background: var(--white); border: 2px solid #d6e2f1; border-radius: 16px; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .2s, box-shadow .2s; }
.home-light main a.path:hover { border-color: var(--cyan); transform: translateY(-2px); box-shadow: 0 20px 36px -28px rgba(5, 158, 196, .8); color: var(--ink); }
.path b { font: 700 18px var(--display); }
.path span { color: var(--soft); font-size: 15px; }
.path i { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 22px; color: var(--teal); }
.home-light main a.path--on { border-color: var(--navy); background: #f4f8fd; }
.q-cart { background: #f4f8fd; border: 1px solid #d6e2f1; border-radius: 14px; padding: 14px 16px; display: grid; gap: 8px; }
.q-cart .sum-lines li { border-color: #e3ebf5; color: var(--ink); }
.q-cart .sum-lines small { color: var(--soft); }
.order-lines li { border-color: #e3ebf5 !important; color: var(--ink); }
.order-lines small { color: var(--soft) !important; }
.order-total { display: flex; justify-content: space-between; align-items: baseline; }
.order-total span { color: var(--soft); font-weight: 600; }
.order-total b { font: 700 40px var(--display); letter-spacing: -0.03em; color: var(--ink); }
.order-then { color: var(--ink-2); font-weight: 600; }
.guarantee--info { background: #eef6fb; border-color: #cfe5f1; }
.guarantee--info svg { color: var(--teal); }
.guarantee--info b { color: var(--ink); }
.guarantee--info p { color: var(--ink-2) !important; }
.order-go[disabled] { opacity: .7; cursor: progress; }