/* KREATIV ATELIER — Premium editorial redesign, 2026 */
:root{
  --bg:#f8f7f2;--paper:#fff;--ink:#273430;--muted:#64746d;
  --plum:#1f3b36;--dark:#172d29;--mauve:#527266;--rose:#ac8a69;
  --blush:#f2ede5;--sage:#e7eee7;--cream:#f6f2e9;--line:#e2e5dd;
  --gold:#b79363;--shadow:0 20px 65px rgba(22,43,37,.075);--radius:20px;
}
html{scroll-padding-top:106px}
body{background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif}
:where(h1,h2,h3){color:var(--ink)}
h1,h2{letter-spacing:-.045em}h1{font-size:clamp(48px,5.55vw,82px);line-height:1.075}h2{font-size:clamp(38px,3.8vw,56px);line-height:1.12}h3{letter-spacing:-.026em}
p{line-height:1.83}
.container{width:min(1220px,calc(100% - 66px))}
.section{padding:110px 0}
.subtitle{color:var(--muted);font-size:16px;line-height:1.82}
.mark{color:#a98765}
.mini-label{gap:9px;color:#678074;font-size:11px;letter-spacing:.19em}
.mini-label:before{display:none}
.mini-label.invert{color:#dbcbb4}
.mini-label .label-icon{width:14px;height:14px;color:#a98d63}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.ui-icon{width:20px;height:20px;flex:0 0 auto;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none;display:inline-block;vertical-align:middle}
.button{border-radius:12px;min-height:57px;padding:15px 24px;background:var(--plum);border:1px solid var(--plum);color:#fff;box-shadow:0 14px 32px rgba(20,54,43,.16);font-weight:700;font-size:12px;letter-spacing:.02em;gap:16px;transition:background .22s,transform .22s,box-shadow .22s,border-color .22s}
.button:hover{background:#31594f;border-color:#31594f;box-shadow:0 18px 34px rgba(20,54,43,.19);transform:translateY(-2px)}
.button:active{transform:translateY(0)}
.button .arrow{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:#ffffff1d}
.button .arrow svg{width:14px;height:14px}
.button .button-inline-icon{width:17px;height:17px}
.button.secondary{border-color:#cbd8cd;color:var(--plum);background:transparent;box-shadow:none}
.button.secondary:hover{background:#f0f6ef;border-color:#8ba89b}
.button.light{color:#243d32;background:#f4e2bd;border-color:#f4e2bd;box-shadow:0 15px 30px rgba(2,13,7,.14)}
.button.light:hover{background:#fff0cd;border-color:#fff0cd}
:where(.button,a,summary,button):focus-visible{outline:3px solid #ba966b;outline-offset:4px}
/* announcement + header */
.notice{background:var(--dark);color:#e1e9dd;padding:11px 14px;font-size:10px;letter-spacing:.12em;font-weight:600}
.notice b{color:#f1d8a7}.notice .dot{color:#9db3a5}
header{background:#ffffffeb;border-bottom:1px solid #e5e9e1;box-shadow:0 5px 25px #234e3e08}
header .nav{height:86px;gap:26px}
.logo{gap:14px}
.logo-symbol{width:46px;height:46px;border:1px solid #bdac91;background:linear-gradient(145deg,#315247,#203a33);border-radius:13px;color:#f3e8d0;display:grid;place-items:center;box-shadow:inset 0 0 0 4px #ffffff0d,0 6px 15px #14382a1d}
.logo-symbol .ui-icon{width:27px;height:27px;stroke-width:1.3}
.logo-copy{gap:5px}.logo-copy strong{font-size:16px;letter-spacing:.095em;color:#18362c}.logo-copy small{font-size:8px;letter-spacing:.26em;color:#917e66}
.nav-links{gap:30px;color:#54675e;font-size:12px}
.nav-links a{position:relative;transition:color .2s}
.nav-links a:after{content:'';position:absolute;height:1px;width:0;bottom:-9px;left:0;background:#b79564;transition:width .2s}
.nav-links a:hover{color:#1b3d2e}.nav-links a:hover:after{width:100%}
.nav .button{min-height:45px;font-size:11px;padding:11px 17px}
.burger{display:none;color:#27493c}.burger svg{width:25px;height:25px}
/* hero */
.hero{padding:90px 0 104px;background:radial-gradient(ellipse at 95% 34%,#e7ece1 0,transparent 47%),radial-gradient(ellipse at 8% 100%,#f2e8d9 0,transparent 39%),linear-gradient(110deg,#fcfaf5,#f4f5ef);border-bottom:1px solid #e7e7de}
.hero:before{width:440px;height:440px;background:#d4e4d57a;left:-320px;top:80px}
.hero-grid{gap:70px;grid-template-columns:1.035fr .965fr}
.hero h1{max-width:680px;margin:24px 0 25px}
.hero h1 em{color:#ae8c68;font-style:italic}
.hero-tag{border-color:#d7ded3;background:#ffffffad;color:#527064;letter-spacing:.13em;padding:10px 15px;gap:8px}
.hero-tag .ui-icon{width:15px;height:15px;color:#aa8962;stroke-width:1.7}
.hero-text>p{font-size:16px;line-height:1.88;color:#66746f;max-width:550px}
.hero-bold{color:#1c4834;font-weight:700}
.hero-cta{margin-top:32px;gap:24px}
.hero-cta .button{min-width:258px}
.hero-price{color:#738076;font-size:12px;line-height:1.67}
.hero-price b{color:#1d4737;font-size:22px}
.hero-price s{font-size:14px;color:#a0aaa0}
.hero-proof{margin-top:29px;gap:8px;color:#6d7b72}
.hero-proof strong{color:#223b30}
.stars{color:#bf9861;letter-spacing:2px;font-size:17px}
.hero-text p.subline{color:#829188;font-size:12px;margin:8px 0 0}
.hero-values{display:flex;gap:22px;flex-wrap:wrap;align-items:center;margin-top:27px;padding-top:22px;border-top:1px solid #dce5dc;max-width:540px}
.hero-values span{display:inline-flex;align-items:center;gap:7px;color:#536d5f;font-size:11px;font-weight:700}
.hero-values .ui-icon{width:17px;height:17px;color:#9c845e}
.hero-media{padding:13px 18px 18px 0}
.hero-art{border-radius:46% 46% 23px 23px;box-shadow:0 32px 75px #36554729;aspect-ratio:.98/1.08}
.media-outline{border-color:#c0b5a0;inset:-4px -5px 29px 25px;border-radius:48% 48% 25px 25px}
.float{border:1px solid #dfe6dc;background:#fffffff2;box-shadow:0 19px 45px #1c382628;border-radius:16px}
.float-one{left:-39px;bottom:42px;padding:15px 19px}
.float-circle{background:#ebf0e8;color:#446f58;border-radius:12px;width:46px;height:46px}
.float-circle .ui-icon{width:23px;height:23px}
.float strong{color:#254638}.float small{color:#7e8f83}
.float-two{right:-9px;top:83px;padding:18px 23px}
.float-two b{color:#8c795a}
/* quick facts */
.facts{border-color:#e4e6e0;background:#fff}
.fact{border-color:#e5e8e2}.fact b{color:#326149}
/* objections */
.objections{background:#fff}
.objections-grid{gap:19px;margin-top:50px}
.obj-card{padding:33px 31px;border:1px solid #e1e8e1;background:#fff;border-radius:19px;box-shadow:0 15px 43px rgba(28,62,46,.035)}
.obj-card:hover{transform:translateY(-5px);box-shadow:0 20px 56px rgba(28,62,46,.09)}
.obj-icon{width:55px;height:55px;border-radius:15px;background:#eaf0e9;color:#365d4b;margin-bottom:24px}
.obj-icon .ui-icon{width:25px;height:25px}
.obj-card h3{font-size:19px;color:#244536;min-height:49px}
.obj-card p{color:#697c70;font-size:13px}
.obj-footer p{color:#9d7d61;font-size:25px}
.obj-checkout-card{border:1px solid #d8e5d9;border-radius:21px;grid-template-columns:minmax(0,1fr) 300px;gap:30px;background:linear-gradient(110deg,#f5f8f1 0,#eef3ec 58%,#e6ede3 100%);box-shadow:0 18px 48px #2e513d13;padding:35px 35px 35px 42px}
.obj-checkout-card:before{color:#9bb49d1e}
.obj-checkout-eyebrow{color:#4b7058}
.obj-checkout-eyebrow span{color:#ad8d5c}
.obj-checkout-content h3{color:#1d4331}
.obj-checkout-content h3 em{color:#a18460}
.obj-checkout-content p{color:#62786b}
.obj-checkout-perks{color:#3d6751;gap:10px 16px}
.obj-checkout-perks span{display:inline-flex;align-items:center;gap:5px}
.obj-checkout-perks .ui-icon{width:15px;height:15px;color:#53936f}
.obj-checkout-purchase{border-color:#dbe6da;border-radius:16px;background:#fff;box-shadow:0 12px 35px #1640280c}
.obj-checkout-price strong{color:#1e4434}
.obj-checkout-price s{color:#9cad9c}
/* process */
.steps{background:linear-gradient(180deg,#f4f7f0,#f8f8f3)}
.steps-grid{gap:30px;margin-top:51px}
.step{padding:22px 23px 27px 0;border-color:#cdded0}
.step-header{display:flex;align-items:center;justify-content:space-between;max-width:255px}
.step b{color:#9f8b66}
.step-icon{width:49px;height:49px;border:1px solid #d5e1d5;background:#fff;border-radius:14px;color:#466f55;display:grid;place-items:center;box-shadow:0 9px 20px #284d320d}
.step-icon .ui-icon{width:23px;height:23px}
.step h3{color:#244c38;font-size:21px}
.step p{color:#6d7c6f;font-size:14px}
.step:not(:last-child):after{color:#b5c8b8}
/* curriculum */
.curriculum{background:#fff}
.curr-grid{gap:75px}
.lesson{border-color:#e0e7dc;border-radius:13px;transition:border-color .2s,background .2s}
.lesson[open]{border-color:#a9c2ad;background:#f8faf6}
.lesson summary{padding:18px 19px;color:#284c38;gap:13px;font-weight:700}
.lesson summary .number{color:#b19b73;border-color:#dce6da}
.lesson summary .plus{background:#ecf3ea;color:#3f6f51;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;transition:transform .2s}
.lesson summary .plus svg{width:15px;height:15px;stroke-width:2}
.lesson[open] summary .plus{transform:rotate(180deg);background:#dceade}
.lesson p{color:#64786b}
.curr-benefits span{gap:9px;color:#426c51}
.curr-benefits span:before{display:none}
.curr-benefits .ui-icon{width:16px;height:16px;stroke-width:2.3}
.curr-image img{box-shadow:0 28px 70px #1d433117;border-radius:22px}
/* gallery */
.gallery{background:#f6f7f3}
.gallery-grid{gap:18px;margin-top:43px}
.gallery-card{border-radius:20px;box-shadow:0 14px 30px #183e2612;outline:1px solid #ffffff75;outline-offset:-1px}
.gallery-card img{aspect-ratio:1/1.04}
.gallery-card:after{background:linear-gradient(to top,rgba(8,25,20,.76),rgba(9,31,23,0) 58%)}
.gallery-card:hover{transform:translateY(-3px);box-shadow:0 23px 42px #183e2620}
.gallery-caption{padding:20px 22px}.gallery-caption b{font-size:15px}
.gallery-note{color:#718a77}
/* testimonials */
.testimonials{background:#fff}
.review{background:#fcfdfb;border:1px solid #e3e9e1;border-radius:19px;padding:32px 30px;box-shadow:0 15px 45px #24402d0a}
.review:before{content:'“';font:600 96px Georgia,serif;position:absolute;right:20px;top:0;color:#d8e4d7;line-height:1}
.review .review-tag{background:#eef4eb;border-color:#e2eddf;color:#54755b}
.review p{position:relative;z-index:1;color:#526a5a}
.review-author{border-color:#e4eae1}
.reference-portraits img{border-color:#fff;box-shadow:0 5px 20px #243d2e22}
/* app */
.app-section{background:radial-gradient(ellipse at 85% 32%,#3b6658 0,transparent 51%),linear-gradient(135deg,#152b27,#263f33);color:#fff}
.app-section h2{color:#fff}
.app-section h2 em{color:#e8d2ac}
.app-section .subtitle{color:#ccd9ce}
.app-features{gap:24px 17px;margin:36px 0}
.app-feature b{font-size:13px;line-height:1.5}
.app-feature small{color:#c0d2c4;font-size:11px}
.app-icon{display:grid;place-items:center;width:45px;height:45px;flex:0 0 45px;background:#ffffff16;border:1px solid #ffffff30;border-radius:13px;color:#f0d4a9}
.app-icon .ui-icon{width:22px;height:22px;stroke-width:1.75}
.orbit,.orbit:before{border-color:#aac1ad38}
.phone{box-shadow:0 32px 70px #07190e88;border-color:#14211e}
.app-bubble{color:#235341}
/* fit */
.fit{background:#f7f8f4}
.fit-card{background:#fff;border-color:#dce8dc;border-radius:20px;box-shadow:0 12px 30px #1b45270a}
.fit-card.no{background:#faf9f5;border-color:#e9e8e0}
.fit-card h3{color:#315743}
.fit-card li{color:#516957}
/* original proof photos */
.social{background:#fff}
.proof-photo-grid{gap:21px;margin-top:46px}
.proof-photo-card{border-radius:20px;border-color:#dfe7dd;box-shadow:0 17px 43px #1d382013}
.proof-photo-card:hover{box-shadow:0 23px 56px #1e3c201e}
.proof-photo-image{background:linear-gradient(150deg,#f8faf6,#eff4ed);padding:15px 15px 0}
.proof-photo-image img{border-radius:11px}
.proof-image-enlarge{display:flex;align-items:center;justify-content:center;gap:7px;color:#457458}
.proof-image-enlarge .ui-icon{width:14px;height:14px}
.proof-photo-card figcaption{border-color:#ebefe8}
.proof-photo-card figcaption b{color:#244b35}
.proof-photo-card figcaption small{color:#718a76}
.proof-source-note{color:#84948a}
/* pricing */
.offer{background:radial-gradient(ellipse at 0 15%,#385d48,transparent 53%),linear-gradient(145deg,#1b352d,#102821)}
.offer-heading h2{color:#fff}
.offer-heading .mark{color:#e6c89e}
.offer-heading p{color:#d0dfd2}
.offer-card{border-radius:24px;background:#fffefb;color:#264535;box-shadow:0 32px 85px #03170d79;border:1px solid #efece2;padding:45px 52px 39px}
.offer-pill{background:#e5eee3;color:#36644a;border:1px solid #c6ddc7;border-radius:20px}
.offer-card h3{color:#23432f;font-size:24px}
.offer-price{color:#204632}
.offer-saving{color:#3d7954;background:#eff5ec;border-radius:20px}
.offer-includes{border-color:#e5eae2}
.offer-includes span{display:flex;gap:9px;align-items:center;color:#4b6c56}
.offer-includes .ui-icon{width:16px;height:16px;color:#2b8351;stroke-width:2.4}
.offer-mini span{display:inline-flex;gap:5px;align-items:center;color:#667e6d}
.offer-mini .ui-icon{width:13px;height:13px;color:#3f8b5d}
.offer-disclaimer{color:#abbeb0;max-width:760px;margin:24px auto 0;font-size:11px;line-height:1.7}
/* guarantee + faq + ending */
.guarantee{background:#faf9f5}
.guarantee-box{border:1px solid #e3e9dc;border-radius:22px;background:#f1f6ee;box-shadow:0 18px 35px #1c46251a}
.guarantee-icon{background:#e0ebdc;color:#356b4c;box-shadow:inset 0 0 0 1px #bdd2bc}
.guarantee-icon .ui-icon{width:40px;height:40px;stroke-width:1.5}
.guarantee h2{color:#214b34}
.guarantee p{color:#617969}
.faq{background:#fff}
.faq-list details{border-color:#e0e8de;border-radius:13px;background:#fbfcf9;transition:border .2s,background .2s}
.faq-list details[open]{background:#f6f9f3;border-color:#b8d0bd}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#294b36}
.faq-list summary:after{display:none!important}
.faq-list .faq-chevron{width:17px;height:17px;color:#658a71;transition:transform .2s}
.faq-list details[open] .faq-chevron{transform:rotate(180deg)}
.faq-list p{color:#5b7460}
.closing{background:radial-gradient(ellipse at 50% 100%,#dae7d6,transparent 66%),#f6f8f3;padding:105px 0 113px}
.closing h2{color:#214b33}
.closing .subtitle{color:#64806d}
/* footer */
footer{background:#142b25!important;color:#dce7dd}
.foot-logo{color:#fff;font-family:'Manrope',sans-serif;font-size:18px;letter-spacing:.11em;font-weight:800}
.foot-logo span{color:#d6b98b}
.foot-desc{color:#b3c6ba}
.foot-nav a{color:#d1ded2}
.foot-nav a:hover{color:#fff}
.foot-bottom{border-color:#375144;color:#a4b8aa}
/* lower mobile conversion strip */
.mobile-cta{background:#ffffffed;border-color:#d8e4d9;box-shadow:0 -12px 35px #1b4b2b14}
.mobile-cta strong{color:#23513a}
.mobile-cta small{color:#728875}
.toast{background:#1d4330}
/* Responsiveness */
@media(max-width:1110px){.nav-links{gap:18px}.hero-grid{gap:44px}.container{width:min(1220px,calc(100% - 48px))}.logo-copy strong{font-size:14px}}
@media(max-width:900px){
  .nav-links a{font-size:11px}
  .hero{padding:70px 0 90px}
  .hero-grid{gap:24px}
  .hero h1{font-size:clamp(44px,5.2vw,66px)}
  .obj-card h3{min-height:0}
  .curr-grid{gap:38px}
  .app-grid{gap:36px}
  .obj-checkout-card{grid-template-columns:minmax(0,1fr) 270px;gap:19px;padding:27px}
}
@media(max-width:740px){
  .container{width:calc(100% - 36px)}.section{padding:70px 0}
  header .nav{height:72px;gap:10px}
  .logo-symbol{width:39px;height:39px;border-radius:10px}.logo-symbol .ui-icon{width:24px;height:24px}
  .logo-copy strong{font-size:12px;letter-spacing:.07em}.logo-copy small{font-size:7px;letter-spacing:.16em}
  .burger{display:inline-flex;align-items:center;justify-content:center}
  .nav-links{background:#fff;border-color:#dfe8df;top:71px;box-shadow:0 20px 40px #1d472121;padding:24px 26px}
  .nav-links a{font-size:13px;color:#284d36;padding:12px 2px}
  .hero{padding:49px 0 66px}
  .hero h1{font-size:clamp(41px,9.8vw,60px);margin:18px 0 19px}
  .hero-text>p{font-size:14px}
  .hero-tag{font-size:9px;letter-spacing:.09em}
  .hero-grid{gap:29px}
  .hero-cta{gap:15px;margin-top:20px}
  .hero-cta .button{min-width:0}
  .hero-values{gap:13px;margin-top:20px;padding-top:18px}
  .hero-values span{font-size:10px}
  .hero-media{padding:0 17px 14px}
  .hero-art{aspect-ratio:1 / 1.06}
  .float-one{left:3px;bottom:16px}
  .float-two{right:2px;top:39px}
  .obj-checkout-card{grid-template-columns:1fr;gap:23px;padding:26px 22px}
  .obj-checkout-content h3{font-size:32px}
  .obj-card{padding:29px 25px}
  .steps-grid{gap:13px}
  .step{padding:23px 15px 23px 1px}
  .step-header{max-width:none}
  .gallery-grid{gap:12px}
  .gallery-card{border-radius:15px}
  .gallery-caption{padding:14px 15px}
  .gallery-caption b{font-size:13px}
  .review{padding:28px 24px}
  .offer-card{padding:32px 23px 27px}
  .offer-includes span{font-size:12px}
  .guarantee-box{padding:30px 25px}
  .faq-list details{border-radius:11px}
  .proof-photo-grid{gap:12px}
  .proof-photo-image{padding:8px 8px 0}
  .proof-photo-card{border-radius:13px}
  .closing{padding:78px 0 115px}
  footer{padding-bottom:85px}
  .mobile-cta .button{font-size:11px}
}
@media(max-width:400px){
  .logo{gap:8px}.logo-copy strong{font-size:11px}.logo-copy small{font-size:6px}
  .hero h1{font-size:42px}
  .hero-cta a{width:100%}
  .hero-values{gap:11px}
  .hero-values span{font-size:9px}
  .obj-checkout-content h3{font-size:29px}
  .offer-includes{grid-template-columns:1fr}
  .mobile-cta .button{min-height:44px;padding:10px 12px}
}

/* Focused mobile layout fixes */
.notice{display:flex;align-items:center;justify-content:center;gap:16px}.notice .notice-sep{color:#a3b9a7}.notice .notice-extra{font-size:10px}
@media(max-width:740px){
 .notice{gap:7px;padding:10px 8px;font-size:9px;letter-spacing:.01em;flex-wrap:wrap}.notice .notice-extra{display:none}.notice .notice-primary{white-space:nowrap}
 .hero-grid{grid-template-columns:minmax(0,1fr);gap:29px}
 .hero-text,.hero-media{min-width:0}
 .hero-media{width:min(100%,520px);margin:15px auto 0}
 .hero h1{max-width:540px;font-size:clamp(42px,10vw,58px)}
 .hero .hero-text>p{max-width:580px;font-size:14px}
 .hero-cta a{width:auto;max-width:100%}
 .hero-cta .button{min-width:220px}
 .hero-art{aspect-ratio:1.1/1}
 .float-one{max-width:230px}.float-one strong{font-size:12px}.float-one small{font-size:10px}
 .float-two{max-width:120px}
}
@media(max-width:400px){.hero-cta .button{width:100%}.hero h1{font-size:44px}.hero .hero-text>p{font-size:14px}}
.offer-includes span:before{display:none!important}
