/* Scoped layout refinements for review/live-site-refinement.
   Base typography, palette, controls and component styling remain in styles.css. */

/* Hero */
.hero{background:var(--ink)}
.hero-grid{min-height:calc(100svh - var(--header));padding-top:clamp(96px,10vh,136px);padding-bottom:clamp(96px,10vh,136px);margin-top:-24px;margin-bottom:-24px}
.hero h1{font-size:clamp(4.75rem,5.8vw,5.25rem)!important;line-height:1.05!important;letter-spacing:-.02em!important;margin-bottom:24px!important}
.hero h1,.hero h1 em{font-style:normal!important;color:var(--paper)!important;font-weight:400!important}
.hero h1 em{display:inline!important}
.hero-lead{margin-bottom:40px!important}
.hero-showcase.review-hero-showcase{padding-bottom:72px}
.hero-showcase.review-hero-showcase .hero-browser{position:relative;z-index:1}
.hero-showcase:before{display:none!important}
.hero-mini-demo{position:absolute;z-index:2;width:clamp(210px,43%,330px);right:-10px;bottom:4px}
.hero-mini-demo img{width:100%;aspect-ratio:3/2;object-fit:contain;background:#f5f2ec}
.hero-bottom{display:none!important}

/* FES: introduce the project first, then show a restrained, sharper preview. */
.reference-section{padding-top:80px;padding-bottom:80px}
.reference-work{display:flex;flex-direction:column;gap:24px;margin:0;padding:0;background:transparent;border:0;border-radius:0;overflow:visible}
.reference-work .featured-copy{order:1;width:min(100%,720px);padding:0;align-self:flex-start}
.reference-work .featured-copy h2{font-size:2.5rem;margin:0 0 16px}
.reference-work .featured-copy>p:not(.eyebrow){font-size:.95rem;line-height:1.6;max-width:65ch}
.reference-work .featured-copy .work-detail{display:none}
.reference-work .featured-image{order:2;width:min(100%,900px);max-width:900px;margin:0 auto;border:0!important;border-radius:0!important;overflow:hidden;background:transparent;aspect-ratio:5/3}
.reference-work .featured-image img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}

/* Selected concepts: title and metadata lead each image so grouping is unambiguous. */
.concept-showcase-grid{display:grid;grid-template-columns:1fr;gap:88px}
.concept-showcase-item{min-width:0;width:min(100%,800px);margin:0 auto;background:transparent;border:0;display:grid;grid-template-columns:1fr}
.concept-showcase-image{position:relative;display:block;width:100%;overflow:hidden;border:0;border-radius:12px;background:transparent;order:3}
.concept-showcase-image img{display:block;width:100%;aspect-ratio:3/2;object-fit:contain}
.concept-showcase-copy{display:contents}
.concept-showcase-copy .work-type{order:1;margin:0 0 8px}
.concept-showcase-copy h3{order:2;font-size:1.4rem;margin:0 0 20px}
.concept-showcase-copy>p:not(.work-type){order:4;color:var(--muted);font-size:.88rem;line-height:1.6;margin:14px 0 0;max-width:none;white-space:nowrap}
.concept-showcase-copy .work-links{order:5;justify-content:flex-start;gap:24px;margin-top:14px;flex-wrap:wrap}
.concept-disclaimer{width:min(100%,800px);margin:28px auto 0;color:var(--muted);font-size:.78rem;line-height:1.6;max-width:65ch}

/* Three-step process. */
.process-grid.process-grid-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.process-note{margin:32px 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted);line-height:1.6;max-width:65ch}

/* Founder: real portrait, no card treatment. */
.founder-section{background:var(--paper)}
.founder-layout{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:clamp(48px,6vw,88px);align-items:center}
.founder-layout::before{display:none!important;content:none!important}
.founder-media{width:100%;max-width:320px}
.founder-media img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 36%;border-radius:12px}
.founder-copy{max-width:680px}
.founder-copy h2{margin-bottom:28px}
.founder-copy>p:not(.eyebrow){color:var(--muted);font-size:1rem;line-height:1.6;max-width:65ch}
.founder-emphasis{margin-top:28px!important;margin-bottom:8px!important;color:var(--ink)!important}
.founder-emphasis strong{font-weight:700;color:var(--ink)}

/* Calm UI refinement */
.section{padding:64px 0}
h1,h2,h3{line-height:1.1}
p{line-height:1.6}
.section p,.hero-lead,.contact-copy p,.faq-intro p,.footer-top p{max-width:65ch}
.check-list{list-style:none;padding:0;margin:12px 0 16px;border-top:1px solid var(--line);display:block}
.check-list li{padding:8px 0;border-bottom:1px solid var(--line);line-height:1.4}
.check-list li:before{display:none!important;content:none!important}
.maintenance-price .check-list{border-color:#ffffff26}
.maintenance-price .check-list li{border-color:#ffffff26}
.browser-frame,.hero-mini-demo,.work-card,.concept-showcase-image,.reference-work .featured-image,.image-open,.demo-language-badge{box-shadow:none!important}
.featured-work,.work-card{background:transparent;border:0;border-radius:0;overflow:visible}
.work-card>.work-image{border:0}
.faq-list details{background:transparent;border-radius:0}
.form-note{background:transparent!important;border:0!important;padding-left:0!important;padding-right:0!important}
.language-switch{border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;gap:8px!important}
.language-switch:before,.language-switch svg,.language-switch .globe{display:none!important}
.language-switch a{opacity:1!important;border:0!important;background:transparent!important;padding:0!important}
.language-switch a[aria-current="page"]{opacity:1!important}
.language-switch a+a:before{content:'/';display:inline-block;margin-right:8px;color:#fff;opacity:.5}
.menu-toggle{border:0!important;background:transparent!important;box-shadow:none!important;border-radius:12px!important}
.button,input,select,textarea,.browser-frame,.price-card,.contact-form-wrap,.consent-banner,.consent-button,.concept-showcase-image{border-radius:12px!important}
*{box-shadow:none!important}
.maintenance-price,.contact-section,.site-footer,.hero{--dark-copy:#b8b8b8}
.hero-lead,.showcase-footnote,.maintenance-price .price-tax,.maintenance-price>p:not(.eyebrow):not(.price-tax),.maintenance-note,.contact-section p,.site-footer p,.site-footer span{color:#b8b8b8}

/* Pricing: deliberately compact on desktop so heading + both cards fit in one view. */
.pricing-section{padding-top:56px;padding-bottom:56px}
.pricing-section .section-heading{margin-bottom:24px!important}
.pricing-section .section-heading h2{font-size:clamp(2.15rem,3vw,2.75rem)}
.pricing-grid{align-items:start}
.price-card{padding:20px!important}
.price-card .eyebrow{margin-bottom:10px!important}
.price-card h3{font-size:1.05rem!important;line-height:1.3!important;margin-bottom:10px!important}
.price-card .price-amount{margin:10px 0 4px!important}
.price-card .price-amount strong{font-size:3rem!important;line-height:1!important}
.price-card .price-amount span{font-size:.9rem!important}
.price-card .price-tax{font-size:.76rem!important;margin-bottom:8px!important}
.price-card .button{margin-top:0;padding:11px 16px!important;min-height:42px!important}

/* Neutral dark UI: gold only in logo, eyebrow text, active language and prices. */
::selection{background:#fff;color:#171717}
:focus-visible{outline-color:var(--focus-color,var(--ink))!important}
.eyebrow,.light-eyebrow{color:var(--eyebrow-color,var(--gold-text))!important}
.language-switch a[aria-current="page"]{color:#d9a93f!important}
.gold-rule{background:#fff!important;opacity:.55}
.button-gold,.button-dark{background:#fff!important;color:#171717!important;border-color:#fff!important}
.button-gold:hover,.button-dark:hover{background:#f1f1f1!important;color:#171717!important;border-color:#fff!important;transform:none!important}
.button-ghost{background:transparent!important;color:#fff!important;border:1px solid #fff!important}
.button-ghost:hover{background:transparent!important;color:#fff!important;border-color:#fff!important;transform:none!important}
.main-nav>a:not(.button):hover{color:#fff!important}
.text-link{color:var(--ink);border-bottom:0!important;text-decoration:none!important}
.text-link:hover{color:var(--ink)!important;text-decoration:underline!important;text-underline-offset:5px}
.hero .text-link,.contact-section .text-link,.site-footer .text-link,.maintenance-price .text-link{color:#fff!important}
.hero .text-link:hover,.contact-section .text-link:hover,.site-footer .text-link:hover,.maintenance-price .text-link:hover{color:#fff!important}
.step-number,.work-type,.demo-language-badge{color:inherit!important}
.image-open{background:#171717ed!important;border-color:#ffffff45!important;color:#fff!important}
.price-card{background:#171717!important;color:#fff!important;border-color:rgba(255,255,255,.14)!important;border-radius:12px}
.price-card .price-amount strong{color:#d9a93f!important}
.price-card .price-amount span,.price-card h3{color:#fff!important}
.price-card .price-tax,.price-card>p:not(.eyebrow):not(.price-tax){color:#b8b8b8!important}
.price-card .check-list,.price-card .check-list li{border-color:rgba(255,255,255,.14)!important}
.price-card .text-link{color:#fff!important}
.pricing-section .button{background:#fff!important;color:#171717!important;border-color:#fff!important}
.pricing-section .button:hover{background:#f1f1f1!important;color:#171717!important;border-color:#fff!important}

/* One motion system only. FES is intentionally excluded. */
.hero-browser,.hero-browser:hover,.hero-mini-demo,.hero-mini-demo:hover,.concept-showcase-image img,.concept-showcase-image:hover img,.work-image img,.work-image:hover img{transition:none!important;transform:none!important}
.button,.text-link{transition:none!important}
@media(max-width:1050px){
  .hero-mini-demo{right:0}
}

@media(max-width:760px){
  .section{padding:80px 0}
  .hero-grid{min-height:calc(100svh - var(--header));padding-top:100px;padding-bottom:100px}
  .hero h1{font-size:clamp(3.25rem,14vw,3.5rem)!important;line-height:1.05!important;letter-spacing:-.02em!important;margin-bottom:24px!important}
  .hero-lead{margin-bottom:40px!important}
  .hero-showcase.review-hero-showcase{padding-bottom:0}
  .hero-mini-demo{position:relative;width:min(72%,300px);right:auto;bottom:auto;margin:-40px 0 0 auto}
  .hero-showcase.review-hero-showcase .showcase-footnote{position:relative;z-index:1;margin:24px 0 0;padding:0;max-width:65ch}
  .reference-section{padding-top:100px;padding-bottom:100px}
  .reference-work{gap:32px}
  .reference-work .featured-image{width:100%;max-width:none;aspect-ratio:auto}
  .reference-work .featured-image img{height:auto;aspect-ratio:3/2;object-fit:cover}
  .reference-work .featured-copy{width:100%}
  .reference-work .featured-copy h2{font-size:2.35rem}
  .concept-showcase-grid{gap:96px}
  .concept-showcase-item{width:100%}
  .concept-disclaimer{width:100%;margin-left:0;margin-right:0}
  .concept-showcase-copy h3{font-size:1.5rem;margin-bottom:24px}
  .concept-showcase-copy>p:not(.work-type){font-size:.9rem;margin-top:16px;white-space:normal}
  .concept-showcase-copy .work-links{margin-top:16px}
  .process-grid.process-grid-three{grid-template-columns:1fr}
  .process-grid.process-grid-three li,.process-grid.process-grid-three li+li{border-left:0;border-top:1px solid var(--line);padding:24px 0}
  .process-grid.process-grid-three li:first-child{border-top:0}
  .founder-layout{grid-template-columns:1fr;gap:32px;align-items:start}
  .founder-media{width:min(78vw,300px);max-width:300px;justify-self:start}
  .founder-copy{max-width:none}
  .pricing-section{padding-top:64px;padding-bottom:64px}
  .pricing-section .section-heading{margin-bottom:32px!important}
  .pricing-section .section-heading h2{font-size:clamp(2rem,9vw,2.5rem)}
  .pricing-grid{gap:20px}
  .price-card{padding:20px!important}
  .price-card .eyebrow{margin-bottom:10px!important}
  .price-card h3{font-size:1.05rem!important;line-height:1.3!important;margin-bottom:10px!important}
  .price-card .price-amount{margin:10px 0 4px!important}
  .price-card .price-amount strong{font-size:2.7rem!important;line-height:1!important}
  .price-card .price-amount span{font-size:.9rem!important}
  .price-card .price-tax{font-size:.78rem!important;margin-bottom:8px!important}
  .price-card .button{margin-top:0;padding:11px 16px!important;min-height:42px!important}
  .check-list{margin:12px 0 16px}
  .check-list li{padding:8px 0;line-height:1.4}
}

@media(max-width:640px){
  .footer-bottom{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:12px!important;white-space:normal!important}
  .footer-bottom>*{width:auto!important;max-width:100%!important;overflow-wrap:normal!important;word-break:normal!important}
  .footer-bottom>a[href="#alku"]{display:none!important}
  .privacy-footer-links{display:flex!important;flex-wrap:wrap!important;gap:16px!important;align-items:center!important}
}

@media(max-width:420px){
  .hero-mini-demo{width:76%;margin-top:-24px}
  .hero-mini-demo .browser-chrome{display:none}
  .hero-showcase.review-hero-showcase .showcase-footnote{margin-top:24px}
}


/* Owner optimization 2026-09-30: compact demo showcase and single hero demo */
.hero-showcase.review-hero-showcase{padding-bottom:0}
.hero-showcase.review-hero-showcase .hero-demo-primary{position:relative;z-index:1;transform:none!important}
.hero-demo-primary img{display:block;width:100%;aspect-ratio:3/2;object-fit:contain;background:#f5f2ec}
.hero-demo-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 16px;background:#fff;color:#171717;font-size:.82rem;font-weight:700}
.hero-showcase.review-hero-showcase .showcase-footnote{margin:18px 0 0;max-width:65ch}

.concept-showcase-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.concept-showcase-item{width:auto;margin:0;display:flex;flex-direction:column;gap:14px}
.concept-showcase-image{order:initial}
.concept-showcase-copy{display:block}
.concept-showcase-copy .work-type{margin:0 0 6px}
.concept-showcase-copy h3{font-size:1.18rem;margin:0 0 10px}
.concept-showcase-copy .work-links{margin-top:0;justify-content:flex-start;gap:16px;flex-wrap:wrap}
.concept-showcase-copy .work-links .text-link{font-size:.75rem}
.concept-disclaimer{width:100%;max-width:65ch;margin:24px 0 0}

@media(max-width:760px){
  .hero-showcase.review-hero-showcase{padding-right:0}
  .hero-showcase.review-hero-showcase .showcase-footnote{margin-top:18px}
  .concept-showcase-grid{display:flex;grid-template-columns:none;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;padding:0 0 12px;scrollbar-width:thin}
  .concept-showcase-item{flex:0 0 min(82vw,320px);width:auto;scroll-snap-align:start}
  .concept-showcase-copy h3{font-size:1.2rem;margin-bottom:10px}
  .concept-showcase-copy .work-links{gap:14px}
}

@media(max-width:420px){
  .hero-demo-primary .browser-chrome{display:flex}
}

@media(prefers-reduced-motion:reduce){
  .js main>section.smooth-reveal,.js main>section.smooth-reveal.is-smooth-visible{opacity:1!important;transform:none!important;will-change:auto!important;transition:none!important}
  .hero-browser,.hero-mini-demo,.concept-showcase-image img,.work-image img{transition:none!important;transform:none!important}
}

@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .js-only{display:block!important}
  main>section.smooth-reveal{opacity:1!important;transform:none!important;will-change:auto!important}
  img,.founder-media img{display:block!important;visibility:visible!important;opacity:1!important}
  .founder-layout::before{display:none!important;content:none!important}
  .founder-media{break-inside:avoid;page-break-inside:avoid}
  .founder-media img{max-width:280px!important;height:auto!important;object-fit:cover!important}
  .browser-frame,.concept-showcase-image,.reference-work .featured-image{overflow:visible!important}
}

/* Approved UX refinement: contextual contrast, accessible controls and state feedback. */
:is(.site-header,.hero,.contact-section,.site-footer,.price-card,.post-launch-card,.demo-hero,.demo-form-card,.demo-footer,.consent-banner){--focus-color:var(--gold);--eyebrow-color:var(--gold)}
.contact-form-wrap{--focus-color:var(--ink)}
.contact-form-wrap :is(.form-intro,.required-note,.form-note),.contact-form-wrap #quote-fallback p{color:var(--muted)}
.contact-form-wrap .form-status{color:var(--ink)}
.contact-form-wrap .text-link,.contact-form-wrap .text-link:hover{color:var(--ink)!important}
.demo-form-card :is(input,select,textarea):focus-visible{outline:3px solid var(--ink)!important;outline-offset:-4px}
.demo-form-card:focus{outline:3px solid var(--gold-text);outline-offset:6px}
.language-switch a{min-width:44px;min-height:44px;color:var(--dark-muted);opacity:1!important}
.language-switch a+a:before{content:none}
.language-switch a:hover{color:var(--white)}
.privacy-footer-links :is(a,button){display:inline-flex;align-items:center;min-height:44px;opacity:1}
.required-note{font-size:.8rem;line-height:1.6;color:var(--muted);margin:0 0 20px}
.demo-form-card .required-note{color:var(--dark-muted)}
.form-note a{text-decoration:underline;text-underline-offset:3px}
.form-note a:hover{text-decoration-thickness:2px}
.button[type="submit"]{transition:background-color 120ms ease-out,border-color 120ms ease-out!important}
.button[type="submit"]:disabled{cursor:wait;background:#e2ded5!important;border-color:#e2ded5!important;color:var(--ink)!important}
.faq-list summary span{transition:transform 160ms cubic-bezier(.16,1,.3,1)}
.menu-toggle span{transition:transform 120ms cubic-bezier(.16,1,.3,1)}
.menu-toggle[aria-expanded="true"] span{transition-duration:180ms}
@media(max-width:760px){
  .language-switch{gap:0!important}
  .language-switch a{min-width:44px;min-height:44px}
  .js .main-nav{display:grid;visibility:hidden;opacity:0;pointer-events:none;transition:opacity 120ms ease-out,visibility 0s linear 120ms}
  .js .main-nav.is-open{visibility:visible;opacity:1;pointer-events:auto;transition:opacity 180ms cubic-bezier(.16,1,.3,1),visibility 0s}
}
@media(prefers-reduced-motion:reduce){
  .js .main-nav,.js .main-nav.is-open,.menu-toggle span,.faq-list summary span{transition:none!important}
  .button[type="submit"]{transition:background-color 100ms linear,border-color 100ms linear!important}
}