/* Clay refinement: larger illustrations, softly molded surfaces, layered contact shadows. */
:root {
  --clay-shadow: 10px 15px 25px #735d7c16, 0 5px 7px #785f7712,
    inset 3px 4px 7px #ffffffdb, inset -4px -5px 9px #82698613;
}
body {background:radial-gradient(ellipse at 90% 8%,#f1e5fa66,transparent 32%),#fbf7f1}
.header {margin-top:20px;padding:14px 25px;background:#fffbf7;border:1px solid #fff;
  border-radius:27px;box-shadow:var(--clay-shadow)}
.brand img {width:200px}
.hero {gap:42px;padding-block:65px 52px}
.hero-art {height:485px;border:2px solid #fff4e9;border-radius:65px;
  background:radial-gradient(ellipse at 33% 20%,#fff1e5,#f7d7cb);
  box-shadow:14px 19px 34px #b684771e,inset 5px 5px 12px #fff8f0,inset -7px -8px 16px #dbaea245}
.student {width:107%;margin-left:-4%;filter:drop-shadow(0 12px 7px #744d6520)}
.hero-tag {bottom:12px;right:18px;padding:9px 17px;font-size:13px;background:#fff6e9;
  box-shadow:0 6px 12px #99748025,inset 2px 2px 3px #fff}
.note {right:22px;top:22px;font-size:16px;color:#86647a}
.btn {border-radius:19px;min-height:54px;padding:15px 24px;
  background:linear-gradient(145deg,#ae83da,#8c62ba);border:1px solid #bfa1dc;
  box-shadow:0 6px 0 #76509b,0 12px 19px #795a9630,inset 2px 3px 4px #e9d9ffb3,inset -2px -3px 5px #6c479338}
.btn:hover {transform:translateY(-3px);box-shadow:0 7px 0 #76509b,0 16px 24px #795a9633,inset 2px 3px 4px #eadcff}
.btn:active {transform:translateY(3px);box-shadow:0 2px 0 #76509b,0 5px 10px #795a9622,inset 1px 2px 3px #dac1f6}
.btn.secondary {background:linear-gradient(145deg,#fffdf9,#f1e6f6);color:#79549c;border-color:#fff;
  box-shadow:0 5px 0 #daccdf,0 10px 17px #795a9614,inset 3px 3px 5px white,inset -3px -3px 6px #dbc9e044}
.stats {gap:20px;background:none;border:none;box-shadow:none;padding:6px 0 14px}
.stats div {padding:27px 10px 24px;border:1px solid #fff!important;border-radius:27px;
  background:linear-gradient(145deg,#f5edfc,#e5d5f2);box-shadow:var(--clay-shadow)}
.stats div:nth-child(2) {background:linear-gradient(145deg,#fff0e6,#f5dcd0)}
.stats div:nth-child(3) {background:linear-gradient(145deg,#f1f6e9,#dfe9d3)}
.stats div:nth-child(4) {background:linear-gradient(145deg,#fff6db,#f4e6be)}
.stats strong {font-size:40px;color:#694b90;letter-spacing:-1px}
.stats span {font-size:14px;color:#65596e}
.section {padding-block:65px}
.section-title {margin-bottom:43px}
.features {gap:29px}
.card {border-radius:34px;padding:27px 30px 34px;box-shadow:var(--clay-shadow);
  transition:transform .25s,box-shadow .25s;text-align:center}
.peach {background:linear-gradient(140deg,#fff0e5,#f6dcd0)}
.lavender {background:linear-gradient(140deg,#f5ecfc,#e6d7f2)}
.sage {background:linear-gradient(140deg,#f1f6e9,#dfe9d5)}
.card .clay {width:157px;height:157px;margin:0 auto 16px;
  filter:drop-shadow(0 9px 5px #6f547329)}
.card h3 {font-size:24px;margin-bottom:15px}
.card p {font-size:16px;line-height:1.65}
.product-screen {border-radius:35px;padding:22px;background:linear-gradient(135deg,#f0e2fb,#f7eff6);
  box-shadow:13px 20px 32px #79628322,0 5px 0 #e3d5e9,inset 4px 4px 7px #fff,inset -4px -5px 8px #bca3ce33}
.mini-hero {border-radius:24px;background:linear-gradient(135deg,#fff0df,#f5d8cb);
  box-shadow:inset 3px 3px 5px #fff8ef,inset -3px -3px 7px #d5a89626,0 5px 10px #94778315}
.mini-grid {gap:13px;margin-top:20px}
.mini-grid>div {border:1px solid #fff9;border-radius:23px;background:linear-gradient(140deg,#f1e4fe,#dcc9ed);
  padding:13px 5px 17px;box-shadow:4px 7px 10px #7d608517,inset 2px 3px 5px #ffffffbb,inset -3px -3px 5px #9b7aab18}
.mini-grid>div:nth-child(2){background:linear-gradient(140deg,#f0f5e6,#dce6ce)}
.mini-grid>div:nth-child(3){background:linear-gradient(140deg,#fff3d6,#f2dfb1)}
.mini-grid .clay {width:85px;height:85px;margin:0 auto 7px;filter:drop-shadow(0 5px 3px #87698326)}
.mini-grid b {font-size:13px}.mini-grid small {font-size:11px}
.mini-bottom {padding:19px;border-radius:17px;box-shadow:inset 2px 2px 4px white,0 5px 9px #795a9610}
.benefits li {padding:17px 17px 17px 48px;border:1px solid #fff;border-radius:21px;background:#fffaf5;
  box-shadow:5px 8px 15px #846d8e0d,inset 2px 2px 5px #fff}
.benefits li:before {left:15px;top:18px;background:#e7d5f4;width:23px;height:23px;border-radius:9px;
  text-align:center;box-shadow:2px 3px 4px #7d559526,inset 1px 1px 2px #fff}
.soft {border-radius:46px;width:calc(100% - 32px);margin-inline:auto;border:1px solid white;
  box-shadow:inset 5px 6px 12px #fff9,inset -6px -7px 14px #b294c21a;
  background:radial-gradient(ellipse at 20% 15%,#f7edff,#eee0f7 75%)}
.pricing {gap:70px}.pricing .plant {width:174px;height:174px;filter:drop-shadow(0 9px 5px #68427320)}
.price-card {position:relative;border-radius:37px;padding:38px;
  background:linear-gradient(145deg,#fffcfa,#faf2f7);box-shadow:14px 20px 31px #84658d25,0 6px 0 #e7d6ed,inset 4px 4px 8px white,inset -4px -5px 9px #c9b1cf20}
.pill {font-size:11px;padding:9px 15px;background:linear-gradient(145deg,#f0e2fc,#dfcaef);
  box-shadow:3px 5px 8px #8c68a31a,inset 2px 2px 4px white;border:1px solid #f7edff}
.checklist li {font-size:15px;padding:8px 0}
.checklist li:before {width:23px;height:23px;box-shadow:2px 3px 4px #946baa22,inset 1px 1px 2px white;
  background:linear-gradient(145deg,#e9dafa,#d5b9ee)}
.steps .features article {padding:28px;border-radius:29px;border:1px solid white;background:#fffaf3;box-shadow:var(--clay-shadow)}
.steps .features article:nth-child(2) {background:#f2eaf8}
.steps .features article:nth-child(3) {background:#edf2e5}
.step {width:69px;height:69px;border-radius:24px;background:linear-gradient(135deg,#f1e2fd,#d6c1e9);
  color:#755494;box-shadow:4px 6px 8px #74518325,inset 3px 3px 5px white,inset -3px -3px 5px #a481bc33}
.learning {padding:35px;border:1px solid white;border-radius:32px;background:#fffaf3;box-shadow:var(--clay-shadow);margin-block:20px}
details {border:1px solid white;border-radius:22px;padding:20px 24px;margin-bottom:17px;
  background:linear-gradient(145deg,#fffcf8,#f5edf4);box-shadow:5px 7px 11px #83678214,inset 2px 3px 4px #fff,inset -2px -2px 4px #d2bbd51a}
details[open] {background:#f7effb}
.final-cta {border-radius:34px;padding:32px;background:linear-gradient(130deg,#f2e5fc,#e4d4f1);box-shadow:var(--clay-shadow)}
.final-cta .clay {display:block;width:128px;height:128px;filter:drop-shadow(0 7px 4px #6d4a8029);margin:0}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .card:hover {transform:translateY(-5px);box-shadow:12px 21px 29px #735d7c22,0 6px 8px #785f7712,inset 3px 4px 7px #fff,inset -4px -5px 9px #82698613}
}
@media(max-width:1000px){
  .header{padding:15px}.brand img{width:166px}.hero{gap:25px}.hero-art{height:410px}
  .note{font-size:13px}.card{padding:24px 20px}.card .clay{width:135px;height:135px}
  .pricing{gap:35px}.mini-grid .clay{width:65px;height:65px}.final-cta .clay{width:95px;height:95px}
}
@media(max-width:760px){
  .header{margin-top:12px;border-radius:24px;padding:15px}.hero{padding-block:35px;gap:30px}
  .hero-art{height:360px;border-radius:42px}.student{width:100%;margin-left:0;max-height:360px}
  .note{font-size:13px;right:15px;top:16px}.stats{gap:15px}.stats div{padding:22px 6px;border-radius:23px}
  .stats strong{font-size:34px}.stats span{font-size:12px}.section{padding-block:38px}
  .card{padding:24px 24px 28px;min-height:0}.card .clay{position:static;width:145px;height:145px;margin:0 auto 12px}
  .card h3{font-size:23px}.product-screen{padding:15px;border-radius:27px}
  .mini-grid .clay{width:70px;height:70px}.mini-grid b{font-size:12px}
  .soft{width:calc(100% - 16px);border-radius:32px}.pricing{gap:30px}.price-card{padding:26px;border-radius:29px}
  .steps .features article{padding:25px}.step{position:static;width:63px;height:63px}
  .learning{padding:25px}.final-cta .clay{width:110px;height:110px;margin-bottom:16px}
  .final-cta{padding:27px}.hero-tag{font-size:11px}.btn{gap:10px}
}
@media(prefers-reduced-motion:reduce){.btn:hover,.btn:active,.card:hover{transform:none}}
