/* Shared blocks for sub-pages, copied from the home page styles */
.b { background: var(--white); border-radius: var(--r-card); overflow: hidden; position: relative; padding: 32px; display: flex; flex-direction: column; min-height: 300px; transition: transform 0.6s var(--ease); }
.b:hover { transform: translateY(-4px); }
.b h3 { font-size: 24px; letter-spacing: -0.025em; margin: 0 0 8px; line-height: 1.15; }
.b p { margin: 0; color: var(--slate); font-size: 16px; }
.b .art { margin: auto -32px -32px; padding-top: 20px; }
.b .art img { width: 100%; height: 220px; object-fit: contain; padding: 0 24px 24px; transition: transform 1s var(--ease); }
.b:hover .art img { transform: scale(1.05); }
.b .big { font-size: clamp(56px, 7vw, 88px); font-weight: 700; letter-spacing: -0.05em; line-height: 1; margin-bottom: 8px; color: var(--ink); }
.b .big.or { color: var(--orange); }
.modes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.modes span { font-size: 13px; border: 1px solid var(--hair); border-radius: var(--r-pill); padding: 5px 12px; color: var(--ink); }
.posts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 40px; }
.posts span { font-size: 17px; border-radius: var(--r-pill); padding: 10px 20px; background: var(--white); border: 1px solid var(--hair); transition: border-color 0.3s, transform 0.4s var(--ease); }
.posts span:hover { border-color: var(--orange); transform: translateY(-2px); }
.posts span.hl { border-color: var(--orange); color: var(--orange); }
.compare { margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.compare .b { min-height: 0; }
.compare ul { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.compare li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 16px; color: #333336; }
.compare li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; margin-top: 2px; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.6 2.5L13 6.5' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") center / 18px no-repeat; }
.compare .no li::before { background: var(--steel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M6 9h6' fill='none' stroke='%23fff' stroke-width='1.8'/%3E%3C/svg%3E") center / 18px no-repeat; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.plans .b { min-height: 0; background: var(--mist); }
.plans .big small { font-size: 0.32em; font-weight: 600; letter-spacing: -0.02em; color: var(--steel); margin-left: 4px; }
.plans .note { margin-top: 14px; font-size: 14px; color: var(--steel); }
.cmp { margin: 48px auto 0; max-width: 860px; background: var(--mist); border-radius: var(--r-card); padding: 12px 28px; overflow-x: auto; }
.cmp table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cmp th, .cmp td { text-align: left; padding: 14px 10px; border-bottom: 1px solid #e3e3e6; vertical-align: top; }
.cmp th { font-weight: 600; color: var(--steel); font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; }
.cmp tr:last-child td { border-bottom: 0; }
.cmp td:first-child { font-weight: 500; color: var(--ink); }
.cmp tr.me td { color: var(--ink); font-weight: 600; }
.cmp tr.me td:first-child { color: var(--orange); }
.cmp .y { color: var(--green); font-weight: 600; }
.cmp .n { color: var(--steel); }
.cmp-note { max-width: 860px; margin: 14px auto 0; font-size: 13px; color: var(--steel); text-align: center; }
.wait { margin: 56px auto 0; max-width: 560px; text-align: center; }
.wait h3 { font-size: 24px; letter-spacing: -0.025em; margin: 0 0 8px; }
.wait p { margin: 0 0 20px; color: var(--slate); }
.wait .row { display: flex; gap: 10px; }
.wait input { flex: 1; min-width: 0; font: 500 17px/1 var(--font); padding: 15px 20px; border-radius: var(--r-pill); border: 1px solid var(--hair); background: var(--white); color: var(--ink); outline: none; }
.wait input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15); }
.wait button { font: 600 17px/1 var(--font); padding: 15px 24px; border-radius: var(--r-pill); border: 0; background: var(--blue); color: #fff; cursor: pointer; white-space: nowrap; }
.wait button:disabled { opacity: 0.6; cursor: default; }
.wait .ok { display: none; color: var(--green); font-weight: 600; }
.wait.done .row { display: none; }
.wait.done .ok { display: block; }
.wait small { display: block; margin-top: 12px; color: var(--steel); font-size: 13px; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } .wait .row { flex-direction: column; } .cmp { padding: 4px 16px; } }
.hero-sub { padding: clamp(48px, 8vw, 96px) 0 clamp(40px, 6vw, 72px); }
.hero-sub .h1 { font-size: clamp(34px, 5.2vw, 60px); max-width: 20ch; }
.hero-sub .lede { max-width: 52ch; }
.hero-sub .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.sec { padding: clamp(48px, 7vw, 88px) 0; }
.sec .h2 { font-size: clamp(28px, 3.6vw, 44px); }
.sec > .wrap > p, .prose p { max-width: 68ch; color: #333336; }
.prose ul, .prose ol { max-width: 68ch; color: #333336; padding-left: 22px; }
.prose li { margin: 8px 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 32px; }
.grid2 .b, .grid3 .b { min-height: 0; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.mist .b { background: var(--white); }
.tbl { margin: 28px 0 0; background: var(--mist); border-radius: var(--r-card); padding: 12px 28px; overflow-x: auto; }
.tbl table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 460px; }
.tbl th, .tbl td { text-align: left; padding: 12px 10px; border-bottom: 1px solid #e3e3e6; vertical-align: top; }
.tbl th { font-weight: 600; color: var(--steel); font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td:first-child { font-weight: 500; }
.tbl tr.me td { font-weight: 600; }
.tbl tr.me td:first-child { color: var(--orange); }
.tbl .y { color: var(--green); font-weight: 600; }
.tbl .n { color: var(--steel); }
.note-s { font-size: 13px; color: var(--steel); margin-top: 14px; max-width: 68ch; }
.steps-l { counter-reset: s; list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; max-width: 760px; }
.steps-l li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; color: #333336; }
.steps-l li::before { content: counter(s); width: 32px; height: 32px; border-radius: 50%; background: var(--orange); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 15px; }
.mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.mgrid a { display: block; background: var(--mist); border-radius: var(--r-card); padding: 22px 24px; color: var(--ink); transition: transform 0.4s var(--ease); }
.mgrid a:hover { text-decoration: none; transform: translateY(-3px); }
.mgrid b { display: block; font-size: 19px; letter-spacing: -0.02em; }
.mgrid span { display: block; color: var(--slate); font-size: 14px; margin-top: 4px; }
.pricebar { margin-top: 28px; }
.crumb { font-size: 13px; color: var(--steel); margin: 0 0 14px; }
.crumb a { color: var(--steel); }
.disc { font-size: 12px; color: var(--steel); }
.wait { margin: 40px auto 0; max-width: 560px; text-align: center; }
@media (max-width: 860px) { .grid2, .grid3, .compare { grid-template-columns: 1fr; } .mgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mgrid { grid-template-columns: 1fr; } .tbl, .cmp { padding: 4px 14px; } .b { padding: 24px; } }