@import './offer-system.css';

.header { display:flex; align-items:center; gap:40px; min-height:104px; font-size:1rem; }
.logo { display:block; height:auto; max-width:100%; }
.header nav { display:flex; margin-left:auto; gap:32px; }
.header nav a,.footer nav a { text-decoration:none; border-radius:4px; }
.header nav a:hover,.footer nav a:hover { color:#256293; }
.hero { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:32px; padding-block:36px 72px; }
.hero-copy h1 { max-width:15ch; }
.hero-copy p { margin-top:24px; max-width:37ch; }
.hero-copy .action { margin-top:32px; }
.hero-art { width:100%; height:auto; display:block; }
.story { background:var(--surf); }
.story-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center; }
.story-copy>p { margin-top:24px; max-width:33ch; }
 .proof-list { list-style:none; padding:0; margin:32px 0 0; display:grid; gap:24px; }
.proof-list strong { font-size:1.125rem; font-weight:500; }
.proof-list p { font-size:1rem; margin-top:4px; max-width:34ch; }
.hero-copy .preview-note { font-size:1rem; margin-top:16px; max-width:35ch; }
.website-visual { margin:0; min-width:0; }
.website-visual figcaption { font-size:.875rem; margin-top:18px; text-align:center; }
.website-mock { background:white; box-shadow:0 16px 44px #10284f10; }
.website-bar { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:24px; font-size:1rem; }
.studio-name { font-weight:600; }
.website-mock>img { display:block; width:100%; height:300px; object-fit:cover; }
.website-copy { padding:28px 24px; display:flex; align-items:center; gap:20px; justify-content:space-between; }
.website-copy h3 { font-size:1.75rem; font-weight:500; line-height:1.25; }
.website-contact { background:var(--ink); color:white; font-size:1rem; padding:12px 16px; border-radius:999px; white-space:nowrap; }
.website-base { padding:0 24px 24px; font-size:1rem; }
.process-intro { display:flex; justify-content:space-between; gap:48px; align-items:center; }
.process-intro>p { max-width:39ch; }
.steps { list-style:none; padding:0; margin:48px 0 0; display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.steps li { display:flex; gap:16px; align-items:flex-start; }
.steps li>span { flex-shrink:0; font-size:1rem; font-weight:500; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:var(--surf); }
.steps h3 { font-size:1.125rem; font-weight:500; }
.steps p { font-size:1rem; margin-top:8px; max-width:31ch; }
.growth { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; padding-bottom:var(--marketing-section); }
.growth-copy p { margin-top:20px; max-width:38ch; }
.improvement-art { height:360px; position:relative; }
.improvement-art>img { width:100%; height:100%; display:block; object-fit:cover; object-position:70% center; }
.improvement-message { position:absolute; left:24px; right:24px; bottom:24px; display:flex; gap:12px; align-items:center; background:white; border-radius:14px; padding:17px 20px; font-size:1rem; box-shadow:0 8px 24px #10284f0b; }
.improvement-message .icon { width:22px; height:22px; }
.pricing { background:var(--surf); }
.pricing-grid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; max-width:1056px; }
.pricing-copy>p { margin-top:20px; max-width:32ch; }
.price { display:flex; align-items:baseline; flex-wrap:wrap; gap:14px; margin-top:28px; }
.price>span:first-child { font-size:3.75rem; font-weight:500; line-height:1.2; }
.price>span:last-child { font-size:1rem; }
.pricing-copy .action { margin-top:24px; }
.inclusions { list-style:none; margin:0; padding:0; display:grid; gap:20px; font-size:1.125rem; }
.inclusions li { display:flex; gap:14px; align-items:flex-start; }
.inclusions .icon { margin-top:2px; width:22px; height:22px; }
.domain-plan { margin-top:32px; padding-top:28px; border-top:1px solid #10284f26; font-size:1rem; }
.plan-note { margin-top:18px; font-size:1rem; max-width:39ch; }
.answers { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; }
.answers h3 { font-size:1.125rem; font-weight:500; }
.answers p { margin-top:14px; font-size:1rem; }
.closing { padding:40px 0 64px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.closing h2 { font-size:clamp(1.75rem,3vw,2.5rem); }
.footer { display:flex; justify-content:space-between; align-items:center; gap:32px; padding-block:36px; border-top:1px solid var(--line); }
.footer nav { display:flex; gap:24px; font-size:1rem; }
.footer .note { margin-top:16px; }
@supports(corner-shape:squircle) { .improvement-message { corner-shape:squircle; } }
@media(max-width:1100px) {
 .story-grid,.growth { gap:40px; }
 .website-copy { flex-direction:column; align-items:flex-start; }
 .website-mock>img { height:260px; }
 .steps { gap:24px; }
 .pricing-grid { gap:48px; }
 .answers { gap:32px; }
}
@media(max-width:760px) {
 .header { min-height:88px; gap:20px; justify-content:space-between; }
 .header .logo { width:184px; }
 .header nav { display:none; }
 .hero { grid-template-columns:1fr; gap:24px; padding-block:32px 48px; }
 .hero-copy h1 { max-width:16ch; font-size:clamp(2.625rem,7.8vw,3.75rem); }
 .hero-copy p { max-width:39ch; margin-top:20px; }
 .hero-copy .action { margin-top:24px; }
 .hero-art { max-width:490px; justify-self:center; }
 .story-grid,.growth { grid-template-columns:1fr; gap:40px; }
 .story-copy>p { max-width:43ch; }
 .website-visual { width:min(100%,550px); justify-self:center; }
 .website-copy { flex-direction:row; align-items:center; }
 .website-copy h3 { font-size:1.5rem; }
 .process-intro { display:block; }
 .process-intro>p { margin-top:20px; }
 .steps { grid-template-columns:1fr; margin-top:32px; gap:28px; }
 .steps p { max-width:44ch; }
 .growth-copy { grid-row:1; }
 .growth-copy p { max-width:45ch; }
 .improvement-art { height:320px; }
 .pricing-grid { grid-template-columns:1fr; gap:40px; }
 .price { margin-top:24px; }
 .answers { grid-template-columns:1fr; gap:28px; padding-bottom:40px; }
 .answers p { margin-top:10px; max-width:52ch; }
 .closing { flex-direction:column; align-items:flex-start; gap:24px; padding-block:32px 48px; }
 .footer { align-items:flex-start; flex-direction:column; gap:24px; padding-block:28px; }
}
@media(max-width:420px) {
 .header .logo { width:166px; }
 .header { gap:12px; }
 .header .action { padding-inline:14px; }
 .website-bar { padding:20px; }
 .website-bar>span:last-child { display:none; }
 .website-mock>img { height:220px; }
 .website-copy { align-items:flex-start; flex-direction:column; padding:20px; }
 .website-base { padding:0 20px 20px; }
 .improvement-art { height:280px; }
 .improvement-message { padding:14px; left:14px; right:14px; bottom:14px; }
}

/* Effortless offer: fewer labels, one clear sequence, useful footer navigation. */
.hero-copy .preview-note { margin-top:12px; }
.process-intro { display:block; }
.footer { align-items:flex-start; padding-block:56px; gap:64px; }
.footer-brand { margin-right:auto; }
.footer-brand p { margin-top:20px; font-size:1rem; }
.footer nav { flex-direction:column; gap:12px; }
.footer nav h3 { font-size:1rem; margin-bottom:8px; }
@media(max-width:760px) { .footer { display:grid; grid-template-columns:1fr 1fr; gap:32px; } .footer-brand { grid-column:1 / -1; } }
@media(max-width:420px) { .footer { grid-template-columns:1fr; } }

/* Equal major gaps; reassurance belongs to the action. */
.hero-copy { display:flex; flex-direction:column; align-items:flex-start; gap:28px; }
.hero-copy>p,.hero-copy .action,.hero-copy .preview-note { margin:0; }
.hero-action { display:flex; flex-direction:column; align-items:center; gap:8px; }
.hero-copy .preview-note { font-size:.875rem; line-height:1.4; }
@media(max-width:760px) { .hero-copy { gap:24px; } }