/* TOP V2 — Figma PC 142:240 / SP 174:80. Loaded only by index.html.
   Shared styles, the existing form controller and PHP endpoints remain intact. */
.top-v2 { --line:#e0ebfa; }
.top-v2 .section { padding-block:96px; }
.top-v2 .section-stack { gap:40px; }
.top-v2 .section-heading { gap:10px; align-items:center; }
.top-v2 .section-heading::after { content:""; display:block; width:44px; height:3px; border-radius:2px; background:var(--blue); }
.top-v2 .hero { background:#fff; }
.top-v2 .hero-inner { max-width:1152px; min-height:640px; grid-template-columns:minmax(0,620px) 500px; gap:32px; }
.top-v2 .hero-art img { width:500px; height:430px; }
.top-v2 .card { border-radius:20px; box-shadow:inset 0 0 0 1px var(--line); }
.top-v2 .challenge-card { gap:16px; min-height:255px; }
.top-v2 .number { font-size:36px; line-height:1.2; }
.top-v2 .service-card { background:#fff; padding:28px; gap:18px; }
.top-v2 .service-art { display:block; width:100%; aspect-ratio:310/188.214; }
.top-v2 .service-art img { width:100%; height:auto; }
.top-v2 .service-name { display:flex; flex-direction:column; gap:8px; }
.top-v2 .service-name .eyebrow { font-size:16px; }
.top-v2 .about { text-align:left; }
.top-v2 .about-inner { display:flex; align-items:center; gap:56px; }
.top-v2 .about-art { display:block; flex:0 0 320px; }
.top-v2 .about-art img { width:320px; height:275.2px; }
.top-v2 .about-content { display:flex; flex-direction:column; gap:28px; min-width:0; }
.top-v2 .about .section-heading { align-items:stretch; text-align:left; gap:12px; }
.top-v2 .about .section-heading::after { display:none; }
.top-v2 .sample,.top-v2 .flow { background:#fff; }
.top-v2 .pricing,.top-v2 .faq { background:var(--soft); }
.top-v2 .sample-card { background:var(--pale); border-radius:24px; gap:46px; box-shadow:inset 0 0 0 1px var(--line),0 8px 24px rgb(23 36 59 / 6%); }
.top-v2 .pricing-card { background:#fff; padding:28px; gap:20px; min-height:439px; box-shadow:inset 0 0 0 1px var(--line),0 8px 24px rgb(23 36 59 / 6%); }
.top-v2 .plan-icon { width:44px; height:44px; position:relative; flex-shrink:0; }
.top-v2 .plan-icon img { position:absolute; }
.top-v2 .plan-icon.create img { left:4.4px; top:6.6px; }
.top-v2 .plan-icon.renew img { left:7.7px; top:5.5px; }
.top-v2 .plan-icon.grow img { left:6.6px; top:8.8px; }
.top-v2 .steps { gap:12px; }
.top-v2 .step { max-width:none; padding:20px 28px; box-shadow:none; border-radius:12px; }
.top-v2 .step-number { border-radius:12px; background:var(--pale); }
.top-v2 .faq-item h3>span:first-child,.top-v2 .faq-item p>span:first-child { font-size:18px; }
.top-v2 .contact-stack { gap:12px; }
.top-v2 .contact-form { margin-top:28px; box-shadow:inset 0 0 0 1px var(--line),0 8px 24px rgb(23 36 59 / 6%); }
.top-v2 .contact-form [hidden] { display:none; }
@media (min-width:1240px) {
 .top-v2 .hero-copy { width:620px; }
 .top-v2 .pricing-card { height:439px; }
 .top-v2 .about-content { width:776px; flex-shrink:0; }
}
@media (min-width:768px) and (max-width:1239px) {
 .top-v2 .hero-inner { grid-template-columns:minmax(0,1fr) minmax(0,42%); gap:24px; }
 .top-v2 .hero-art { width:100%; height:auto; }
 .top-v2 .hero-art img { width:100%; height:auto; }
 .top-v2 .about-inner { gap:32px; }
 .top-v2 .about-art { flex-basis:240px; }
 .top-v2 .about-art img { width:240px; height:auto; }
 .top-v2 .about h2 { font-size:28px; }
}
@media (min-width:768px) and (max-width:999px) {
 .top-v2 .hero-inner { grid-template-columns:1fr; }
 .top-v2 .hero-art { width:400px; }
 .top-v2 .about-inner { flex-direction:column-reverse; }
 .top-v2 .about-art { flex-basis:auto; }
}
@media (max-width:767px) {
 .top-v2 .container,.top-v2 .header-inner,.top-v2 .hero-inner,.top-v2 .footer-inner { width:calc(100% - 32px); }
 .top-v2 h1 { font-size:28px; }
 .top-v2 h2 { font-size:28px; letter-spacing:-.28px; }
 .top-v2 h3 { font-size:20px; }
 .top-v2 .section { padding-block:56px; }
 .top-v2 .section-stack { gap:32px; }
 .top-v2 .hero-inner { min-height:0; padding-block:40px; gap:32px; grid-template-columns:1fr; }
 .top-v2 .hero-copy { gap:24px; }
 .top-v2 .audience { width:100%; min-height:32px; font-size:12px; }
 .top-v2 .hero-lead { font-size:17px; }
 .top-v2 .hero-copy .button { min-height:56px; font-size:16px; margin:0; }
 .top-v2 .hero-art { width:300px; max-width:100%; height:auto; transform:none; }
 .top-v2 .hero-art img { width:100%; height:auto; }
 .top-v2 .challenge-card,.top-v2 .service-card,.top-v2 .pricing-card { padding:24px 21px; }
 .top-v2 .challenge-card { min-height:0; }
 .top-v2 .challenge-card .number { font-size:32px; }
 .top-v2 .section-end { font-size:18px; }
 .top-v2 .services h2 { font-size:24px; letter-spacing:-.24px; }
 .top-v2 .service-lead { font-size:20px; }
 .top-v2 .about-inner { flex-direction:column-reverse; gap:32px; }
 .top-v2 .about-content { gap:28px; }
 .top-v2 .about h2 { font-size:26px; letter-spacing:-.26px; }
 .top-v2 .about-art { flex-basis:auto; width:260px; }
 .top-v2 .about-art img { width:260px; height:223.6px; }
 .top-v2 .about-copy br:not(.pc-only) { display:inline; }
 .top-v2 .sample h2 { font-size:26px; letter-spacing:-.26px; }
 .top-v2 .sample-card { padding:24px 21px; gap:24px; }
 .top-v2 .sample-image { height:auto; aspect-ratio:301/167.926; }
 .top-v2 .sample-copy h3 { font-size:20px; }
 .top-v2 .sample-copy .button { min-height:56px; font-size:16px; }
 .top-v2 .pricing-card { min-height:0; }
 .top-v2 .pricing-card h3 { font-size:20px; }
 .top-v2 .price { font-size:24px; min-height:0; }
 .top-v2 .steps { gap:16px; }
 .top-v2 .step { flex-direction:row; padding:12px 0; gap:16px; align-items:flex-start; }
 .top-v2 .step-number { width:48px; height:48px; font-size:20px; }
 .top-v2 .step h3 { font-size:20px; }
 .top-v2 .faq-item h3,.top-v2 .faq-item p { gap:12px; }
 .top-v2 .faq-item h3 { font-size:16px; }
 .top-v2 .faq-item p { font-size:15px; }
 .top-v2 .contact h2 { font-size:26px; letter-spacing:-.26px; }
 .top-v2 .contact-intro { font-size:17px; }
 .top-v2 .contact-form { margin-top:20px; border-radius:24px; padding:28px 21px; }
 .top-v2 .field textarea { min-height:160px; }
 .top-v2 .consent { font-size:13px; }
 .top-v2 .contact-submit { min-height:56px; font-size:16px; }
}
@media (max-width:359px) {
 .top-v2 h1 { font-size:24px; }
 .top-v2 .about h2,.top-v2 .contact h2 { font-size:24px; }
}
/* Preserve the exported illustration's desktop dimensions. */
@media (min-width:768px) { .top-v2 .service-art { max-width:310px; } }
@media (max-width:767px) {
 .top-v2 .challenge-card,.top-v2 .service-card,.top-v2 .pricing-card,.top-v2 .sample-card,.top-v2 .contact-form { border:1px solid var(--line); padding-inline:20px; }
 .top-v2 .challenge-card,.top-v2 .service-card { box-shadow:none; }
}
@media (max-width:767px) {
 .top-v2 .section-end,.top-v2 .section-note,.top-v2 .estimate>p { text-wrap:balance; }
}
/* Extend only the TOP header's existing SP dropdown through 1000px. */
@media (min-width:768px) and (max-width:1000px) {
 .top-v2 .header-inner { width:calc(100% - 32px); min-height:74px; flex-wrap:wrap; justify-content:space-between; gap:0; padding-block:0; }
 .top-v2 .site-header .brand strong { font-size:22px; }
 .top-v2 .site-header .brand span { font-size:10px; }
 .top-v2 .menu-toggle:not([hidden]) { display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:6px; margin-right:-6px; background:none; border:0; border-radius:5px; }
 .top-v2 #site-nav { flex-direction:column; width:100%; gap:0; align-items:stretch; padding-block:8px 24px; font-size:14px; }
 .top-v2 #site-nav a { padding:12px; text-align:center; }
 .top-v2 #site-nav .button { width:100%; margin-top:8px; font-size:16px; }
 .top-v2 #site-nav[hidden] { display:none; }
 .top-v2 .menu-enhanced #site-nav { position:absolute; top:calc(100% + 1px); left:50%; transform:translateX(-50%); width:100vw; max-height:calc(100vh - var(--header-height)); max-height:calc(100dvh - var(--header-height)); overflow-y:auto; overscroll-behavior-y:contain; padding:8px 24px 24px; background:#fff; border-bottom:1px solid #e8eff8; }
 .top-v2 .site-header:not(.menu-enhanced) { max-height:100vh; max-height:100dvh; overflow-y:auto; }
}