/* =========================================================
   國考學姐 Zora — Home  |  faithful to 版型示意
   Cream canvas · salmon bands · coral accents · green logo/quote
   No gradients · large radius · soft shadows
   ========================================================= */

:root{
  --cream:       #F7F0E2;   /* main canvas */
  --cream-card:  #F8F2E6;   /* cards on salmon */
  --salmon:      #F2A78F;   /* pain / coach / footer band */
  --salmon-soft: #F7C9B8;   /* light accents, shape behind photo */
  --coral:       #CB6440;   /* buttons */
  --coral-deep:  #B5542F;   /* button hover */
  --coral-text:  #D26A3E;   /* headings / accents */
  --green:       #46603E;   /* hero h1, logo, sticker quote */
  --ink:         #4A4138;   /* body dark */
  --ink-soft:    #6F6357;   /* card body */
  --ph:          #D8D5CF;   /* placeholder boxes */
  --line:        #B9A892;

  --r-xl: 40px;
  --r-lg: 28px;
  --r-md: 20px;

  --sh-sm: 0 10px 24px -16px rgba(120,74,46,.5);
  --sh-md: 0 24px 46px -28px rgba(120,74,46,.45);
  --sh-lg: 0 40px 80px -38px rgba(120,74,46,.42);

  --maxw: 1180px;
  --font: "Noto Serif TC", Georgia, "Times New Roman", "PingFang TC", serif;
  --serif: "Noto Serif TC", Georgia, "Times New Roman", serif;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:90px; }
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--cream);
  line-height:1.9; letter-spacing:.02em; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:700; line-height:1.55; letter-spacing:.02em; }
p{ margin:0; text-wrap:pretty; }
.serif{ font-family:var(--serif); font-weight:700; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* buttons */
.btn{
  --bg:linear-gradient(140deg, #EB9163 0%, #CB6440 46%, #A2441C 100%); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  font-family:var(--font); font-weight:700; font-size:1.05rem; letter-spacing:.04em;
  padding:16px 36px; border-radius:999px; cursor:pointer; border:0;
  background:var(--bg); color:var(--fg); box-shadow:var(--sh-sm);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s;
}
.btn:hover{ transform:translateY(-3px); box-shadow:var(--sh-md); background:linear-gradient(140deg, #D9764F 0%, var(--coral-deep) 80%); }
.btn .arr{ transition:transform .25s; }
.btn:hover .arr{ transform:translateX(4px); }
.btn--lg{ padding:22px 54px; font-size:1.4rem; border-radius:999px; }

/* reveal */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s;} .reveal.d2{ transition-delay:.16s;}
.reveal.d3{ transition-delay:.24s;} .reveal.d4{ transition-delay:.32s;}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} html{scroll-behavior:auto;} }

/* =================== NAV =================== */
.nav{
  position:sticky; top:0; z-index:60; background:rgba(247,240,226,.9);
  backdrop-filter:blur(12px) saturate(1.1); border-bottom:1px solid rgba(154,107,74,.1);
  transition:height .25s;
}
.nav__in{ display:flex; align-items:center; justify-content:space-between; height:80px; }
.brand{ display:flex; align-items:center; gap:13px; }
.brand__mark{
  flex:none; width:46px; height:46px; border-radius:13px; background:var(--green); color:var(--cream);
  display:grid; place-items:center; font-family:var(--serif); font-weight:700; font-size:1.5rem;
  box-shadow:var(--sh-sm);
}
.brand__logo{ height:56px; width:auto; transform:rotate(-5deg); transform-origin:center; }
.links{ display:flex; align-items:center; gap:26px; }
.links a{ font-weight:700; font-size:1rem; color:var(--ink); white-space:nowrap; transition:color .2s; }
.links a:hover{ color:var(--coral-text); }
.nav__cta{
  background:var(--coral); color:#fff !important; padding:11px 22px; border-radius:999px;
  font-size:.95rem; box-shadow:var(--sh-sm); transition:transform .25s, background .25s;
}
.nav__cta:hover{ background:var(--coral-deep); transform:translateY(-2px); }
.burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.burger span{ width:26px; height:2px; background:var(--green); border-radius:2px; transition:.3s; }
.burger.on span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.on span:nth-child(2){ opacity:0; }
.burger.on span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =================== 1 · HERO =================== */
.hero{ position:relative; background:var(--cream); overflow:hidden; }
.hero__floor{ position:absolute; left:0; right:0; bottom:0; height:44%; background:var(--salmon); z-index:0; }
.hero__banner{ position:relative; z-index:1; display:block; width:100%; }
.hero__inner{ position:absolute; inset:0; max-width:none; margin:0; padding:0; z-index:3; pointer-events:none; }
.hero__copy{ position:absolute; top:15%; left:25%; max-width:40%; pointer-events:auto; }
.hero h1{ font-size:clamp(1.4rem,3.4vw,3.1rem); color:var(--green); line-height:1.5; letter-spacing:.02em; }
.hero__sub{ margin-top:22px; font-size:clamp(.85rem,1.6vw,1.35rem); color:var(--coral-text); font-weight:500; line-height:1.9; }
.hero__btn{ margin-top:32px; }
/* candle flame + cup steam overlay, positioned over the banner art */
.hero__fx{ position:absolute; inset:0; z-index:4; pointer-events:none; }

/* --- candle flame (sits on the wick at ~16.5% / 36%) --- */
.flame{
  position:absolute; left:16.45%; top:33.1%;
  width:1.05vw; height:2.5vw; max-width:18px; max-height:42px; min-width:7px; min-height:17px;
  transform:translateX(-50%); transform-origin:50% 100%;
  border-radius:50% 50% 50% 50% / 64% 64% 36% 36%;
  background:radial-gradient(ellipse at 50% 78%, #FFE08A 0%, #FFB02E 42%, #F6861F 78%, rgba(246,134,31,0) 100%);
  filter:drop-shadow(0 0 .5vw rgba(255,170,40,.85)) drop-shadow(0 0 1.4vw rgba(255,140,30,.45));
  animation:flameFlicker 1.7s ease-in-out infinite;
}
.flame__core{
  position:absolute; left:50%; bottom:8%; width:46%; height:55%;
  transform:translateX(-50%);
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  background:radial-gradient(ellipse at 50% 80%, #FFF6D8 0%, #FFD24D 55%, rgba(255,210,77,0) 100%);
  animation:flameCore 1.1s ease-in-out infinite;
}
@keyframes flameFlicker{
  0%,100%{ transform:translateX(-50%) scaleY(1) scaleX(1) skewX(0deg); opacity:1; }
  25%{ transform:translateX(-50%) scaleY(1.08) scaleX(.95) skewX(-3deg); opacity:.94; }
  50%{ transform:translateX(-50%) scaleY(.93) scaleX(1.05) skewX(2deg); opacity:1; }
  75%{ transform:translateX(-50%) scaleY(1.05) scaleX(.97) skewX(3deg); opacity:.97; }
}
@keyframes flameCore{
  0%,100%{ transform:translateX(-50%) scaleY(1); opacity:.95; }
  50%{ transform:translateX(-48%) scaleY(1.12); opacity:1; }
}

/* --- steam rising from the mug (~72.5% / 50.5%): low, broad, slow & soft --- */
.steam{ position:absolute; left:72.4%; top:50.5%; width:9vw; height:13vw; transform:translate(-50%,-100%); }
.steam i{
  position:absolute; bottom:0; left:50%; width:2.4vw; height:7.5vw; max-width:42px; min-width:18px;
  border-radius:50%;
  background:linear-gradient(to top, rgba(255,255,255,0) 0%, rgba(255,255,255,.5) 50%, rgba(255,255,255,0) 100%);
  filter:blur(4px);
  opacity:0; transform:translateX(-50%); transform-origin:50% 100%;
  animation:steamRise 12s ease-in-out infinite;
  animation-delay:var(--d);
}
.steam i:nth-child(1){ left:40%; }
.steam i:nth-child(2){ left:62%; height:6.8vw; }
@keyframes steamRise{
  0%{ opacity:0; transform:translateX(-50%) scaleY(.45) scaleX(.85); }
  22%{ opacity:.92; }
  55%{ opacity:.8; transform:translate(-42%,-4%) scaleY(1.45) scaleX(1.25) skewX(6deg); }
  82%{ opacity:.32; }
  100%{ opacity:0; transform:translate(-58%,-9%) scaleY(1.62) scaleX(1.4) skewX(-5deg); }
}

/* hero staggered entrance */
.hero__h1, .hero__sub, .hero__btn{ opacity:0; transform:translateY(20px); animation:heroUp .7s cubic-bezier(.2,.8,.2,1) forwards; }
.hero__h1{ animation-delay:.15s; }
.hero__sub{ animation-delay:.85s; }
.hero__btn{ animation:heroUp .7s cubic-bezier(.2,.8,.2,1) 1.2s forwards, btnPulse 1.5s ease-in-out 2s 3; }
.hero__btn:hover{ animation:none; transform:scale(1.07); }
@keyframes btnPulse{
  0%{ transform:scale(1) rotate(0deg); }
  12%{ transform:scale(1.07) rotate(-2deg); }
  26%{ transform:scale(.97) rotate(2deg); }
  40%{ transform:scale(1.04) rotate(-1.2deg); }
  54%{ transform:scale(1) rotate(0deg); }
  100%{ transform:scale(1) rotate(0deg); }
}
@keyframes heroUp{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .hero__h1,.hero__sub,.hero__btn{ opacity:1; transform:none; animation:none; }
  .flame,.flame__core,.steam i{ animation:none; }
  .steam i{ opacity:.4; }
}

/* =================== 2 · PAIN =================== */
.pain{ position:relative; background:var(--salmon); padding:60px 0 130px; }
.pain__head{ display:flex; align-items:center; gap:40px; max-width:none; margin:0 auto 96px; padding-top:48px; }
.pain__girl{ width:35%; flex:none; }
.pain__head h2{ font-size:clamp(1.5rem,3.1vw,2.5rem); color:#fff; line-height:1.7; }
.pain__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.pcard{
  background:var(--cream-card); border-radius:var(--r-md); padding:60px 30px 38px;
  box-shadow:var(--sh-sm); position:relative;
  transition:transform .3s, box-shadow .3s;
}
.pcard:hover{ transform:translateY(-6px); box-shadow:var(--sh-md); }
.pcard__heart{ position:absolute; top:-50px; left:50%; transform:translateX(-50%); width:clamp(112px,57%,153px); }
.pcard h3{ font-size:1.22rem; color:var(--coral-text); margin-bottom:18px; line-height:1.7; }
.pcard p{ color:var(--ink-soft); font-size:.98rem; line-height:2; }
.sticker{
  position:relative; z-index:5; max-width:880px; margin:96px auto -130px; background:#FBF6EC;
  border-radius:6px; padding:30px 44px; text-align:center; rotate:-1.4deg;
  box-shadow:var(--sh-md); color:var(--green); font-weight:700;
  font-size:clamp(1.1rem,2.1vw,1.6rem); line-height:1.7;
}
.sticker.reveal{ transition:opacity 1.5s ease, transform 1.5s cubic-bezier(.2,.8,.2,1); }

/* =================== 3 · ABOUT =================== */
.about{ background:var(--cream); padding:200px 0 130px; }
.about__intro{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
.about__title{ color:var(--coral-text); font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1.4; }
.about__title .lg{ display:block; font-size:1.5em; margin-top:10px; }
.about__title .serif{ display:block; font-size:1.7em; letter-spacing:.04em; margin-top:8px; }
.about__intro > p{ color:var(--green); font-size:1.08rem; line-height:2.1; padding-top:18px; }
.about__pen{ width:100%; max-width:470px; margin:50px 0 110px; }
.about__body{ display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center; margin-top:10px; }
.about__quote{ color:var(--coral-text); font-size:clamp(1.4rem,2.7vw,2rem); line-height:1.7; margin-bottom:30px; }
.about__copy{ color:var(--green); font-size:1.06rem; line-height:2.2; }
.about__photo{ position:relative; justify-self:center; max-width:323px; }
.about__photo::before{
  content:""; position:absolute; inset:-18px -18px auto auto; width:78%; height:86%;
  background:var(--salmon-soft); border-radius:30px; z-index:0;
}
.about__photo img{ position:relative; z-index:1; width:100%; border-radius:26px; box-shadow:var(--sh-md); rotate:1.4deg; }
.stats{ margin-top:90px; display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1.5px solid var(--line); }
.stat{ display:flex; align-items:baseline; gap:14px; padding:34px 36px; border-bottom:1.5px solid var(--line); }
.stat:nth-child(odd){ border-right:1.5px solid var(--line); }
.stat__n{ font-family:var(--serif); font-weight:700; font-size:2.4rem; color:var(--coral-text); line-height:1; flex:none; }
.stat__t{ color:var(--ink); font-size:1.04rem; font-weight:500; }

/* divider doodle */
.divider{ display:block; width:min(360px,56%); margin:70px auto; }

/* =================== 4 · FREE =================== */
.free{ background:var(--cream); padding:50px 0 70px; }
.free__grid{ display:grid; grid-template-columns:1fr 1fr; gap:74px; align-items:start; }
.free__title{ color:var(--coral-text); font-size:clamp(1.8rem,3.6vw,2.7rem); line-height:1.6; margin-bottom:34px; }
.free__title .rule{ display:inline-block; width:60px; height:3px; background:var(--coral-text); border-radius:3px; vertical-align:middle; margin-left:8px; }
.free__copy p{ color:var(--ink); font-size:1.08rem; line-height:2.1; }
.free__copy p + p{ margin-top:26px; }
.free__copy b{ color:var(--coral-text); font-weight:700; }
.bookform{ display:grid; gap:22px; }
.bookform label{ display:block; font-weight:700; color:var(--ink); margin-bottom:8px; font-size:.98rem; }
.bookform label i{ color:var(--coral); font-style:normal; }
.bookform input, .bookform select, .bookform textarea{
  width:100%; padding:18px 20px; border-radius:14px; border:0; background:var(--ph);
  font-family:var(--font); font-size:1rem; color:var(--ink); transition:box-shadow .2s, background .2s;
}
.bookform textarea{ min-height:120px; resize:vertical; }
.bookform input:focus, .bookform select:focus, .bookform textarea:focus{ outline:none; background:#ECE8E0; box-shadow:0 0 0 2px var(--coral); }
.free__btnrow{ text-align:center; margin-top:64px; }
.ok{ display:none; margin-top:16px; background:#E4EFD8; color:#3F6A2E; font-weight:700; padding:13px 18px; border-radius:13px; text-align:center; }
.ok.show{ display:block; }

/* 30-min consultation checklist (right column of FREE) */
.free__plan{ align-self:start; }
.free__lead{ display:flex; align-items:baseline; gap:.45em; margin-top:4px; color:var(--coral-text); font-weight:700; font-size:1.2rem; line-height:1.7; }
.free__spark{ color:var(--coral); font-size:1.1em; }
.checklist{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:26px; }
.citem{ display:flex; gap:20px; align-items:flex-start; padding-bottom:26px; border-bottom:1px solid #E7DCC8; }
.citem:last-child{ border-bottom:0; padding-bottom:0; }
.citem__no{
  flex:none; font-family:var(--serif); font-weight:700; font-size:3rem; line-height:1;
  color:#E58C66; letter-spacing:.01em;
}
.citem__b{ padding-top:4px; }
.citem__b h4{ color:var(--green); font-size:1.34rem; font-weight:700; line-height:1.5; margin-bottom:8px; }
.citem__b p{ color:var(--ink); font-size:1rem; line-height:1.9; }
.free__note{ margin-top:26px; color:var(--coral-text); font-size:.94rem; font-weight:500; }

/* =================== 5 · COACH =================== */
.coach{ position:relative; background:var(--salmon); overflow:hidden; padding:120px 0 110px; }
.coach__title{ text-align:center; color:#fff; font-size:clamp(1.7rem,3.6vw,2.8rem); position:relative; z-index:2; }
.coach__title .sp{ color:#fff; opacity:.9; margin:0 .3em; font-size:.8em; }
.coach__lead{ max-width:880px; margin:34px auto 0; text-align:center; color:#fff; font-size:1.08rem; line-height:2.1; position:relative; z-index:2; }
.coach__lead b{ font-weight:700; }
.coach__cards{ display:grid; grid-template-columns:1fr auto 1fr; gap:30px; align-items:stretch; margin:60px auto 0; max-width:1000px; position:relative; z-index:2; }
.ccard{ background:var(--cream-card); border-radius:var(--r-lg); padding:48px 40px; box-shadow:var(--sh-md); }
.ccard__no{ font-family:var(--serif); font-size:2rem; color:var(--coral-text); font-weight:700; line-height:1; }
.ccard h3{ font-size:1.32rem; color:var(--green); margin:16px 0 16px; }
.ccard p{ color:var(--ink-soft); font-size:1.02rem; line-height:2; }
.coach__plus{ align-self:center; color:#fff; font-size:3rem; font-weight:700; line-height:1; }
.declare{ max-width:1000px; margin:44px auto 0; background:var(--cream-card); border-radius:var(--r-md); padding:38px 44px; box-shadow:var(--sh-sm); position:relative; z-index:2; }
.declare__pin{ display:inline-block; background:var(--coral); color:#fff; font-weight:900; font-size:.92rem; padding:6px 16px; border-radius:999px; margin-bottom:14px; }
.declare p{ color:var(--ink); line-height:2; }
.declare p + p{ margin-top:10px; }
.declare b{ color:var(--coral-text); }

/* =================== 6 · GUIDE =================== */
.guide{ background:var(--cream); padding:110px 0 50px; }
.guide__head{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:60px; flex-wrap:wrap; }
.guide__island{ width:240px; flex:none; }
.guide__head h2{ color:var(--coral-text); font-size:clamp(1.8rem,3.6vw,2.7rem); text-align:right; flex:1; min-width:240px; }
.guide__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; }
.gcard{
  background:var(--cream-card); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-sm);
  display:flex; flex-direction:column; transition:transform .3s, box-shadow .3s; min-height:520px;
}
.gcard:hover{ transform:translateY(-6px); box-shadow:var(--sh-lg); }
.gcard__ph{ flex:1; background:var(--ph); display:grid; place-items:center; text-align:center; color:#9a948b; font-weight:700; line-height:1.7; padding:20px; }
.gcard__ph small{ font-weight:400; font-size:.82rem; }
.gcard__b{ padding:24px 26px 28px; }
.gcard__tag{ display:inline-block; background:var(--salmon-soft); color:var(--coral-deep); font-weight:700; font-size:.78rem; padding:5px 13px; border-radius:999px; margin-bottom:10px; }
.gcard__b h3{ color:var(--ink); font-size:1.14rem; line-height:1.7; }
.envdiv{ display:flex; align-items:center; gap:0; margin:90px auto 0; max-width:1000px; }
.envdiv::before, .envdiv::after{ content:""; flex:1; height:1.5px; background:var(--line); }
.envdiv img{ width:96px; margin:0 22px; flex:none; }

/* =================== 7 · NEWSLETTER =================== */
.news{ background:var(--cream); padding:80px 0 40px; }
.news__top{ display:grid; grid-template-columns:1.25fr .75fr; gap:40px; align-items:center; }
.news__title{ color:var(--coral-text); font-size:clamp(1.7rem,3.4vw,2.5rem); margin-bottom:28px; }
.news__copy p{ color:var(--ink); font-size:1.06rem; line-height:2.1; margin-bottom:26px; max-width:48ch; }
.news__form{ display:flex; gap:12px; flex-wrap:wrap; }
.news__form input{ flex:1; min-width:240px; padding:16px 22px; border-radius:14px; border:0; background:var(--ph); font-family:var(--font); font-size:1rem; color:var(--ink); }
.news__form input:focus{ outline:none; background:#ECE8E0; box-shadow:0 0 0 2px var(--coral); }
.news__writer{ width:100%; max-width:280px; justify-self:end; }
.news__talk{ width:min(420px,70%); margin:60px auto 0; display:block; }
.finalpitch{ text-align:center; color:var(--green); font-weight:700; font-size:clamp(1.1rem,2.1vw,1.55rem); line-height:2; margin:44px auto 0; max-width:760px; }
.finalcta{ text-align:center; margin:48px auto 30px; }

/* =================== FOOTER =================== */
.footer{ background:var(--salmon); color:#fff; padding:90px 0 70px; }
.footer__in{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.footer__logo{ height:48px; width:auto; filter:brightness(0) invert(1); opacity:.95; }
.footer__soc{ display:flex; gap:14px; flex-wrap:wrap; }
.footer__soc a{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.18); padding:11px 20px; border-radius:999px; font-weight:700; font-size:.95rem; transition:background .2s, transform .2s; }
.footer__soc a:hover{ background:rgba(255,255,255,.3); transform:translateY(-2px); }
.footer__links{ display:flex; gap:20px; flex-wrap:wrap; }
.footer__links a{ font-size:.95rem; opacity:.92; transition:opacity .2s; }
.footer__links a:hover{ opacity:1; text-decoration:underline; }
.footer__base{ margin-top:30px; padding-top:22px; border-top:1px solid rgba(255,255,255,.25); font-size:.85rem; opacity:.9; text-align:center; }

/* =================== RESPONSIVE =================== */
@media (max-width:1024px){
  .hero__copy{ max-width:44%; top:11%; left:25%; }
  .about__body{ gap:34px; }
}
@media (max-width:860px){
  .burger{ display:flex; }
  .links{
    position:fixed; inset:80px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--cream); padding:10px 22px 20px; box-shadow:var(--sh-md);
    border-bottom:1px solid rgba(154,107,74,.14);
    transform:translateY(-135%); transition:transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .links.open{ transform:none; }
  .links a{ padding:15px 6px; font-size:1.08rem; border-bottom:1px solid rgba(154,107,74,.1); }
  .nav__cta{ margin-top:10px; text-align:center; }

  /* hero stacks: copy on top, banner below */
  .hero{ display:flex; flex-direction:column-reverse; padding-top:0; }
  .hero__inner{ position:static; inset:auto; padding:34px 24px 6px; pointer-events:auto; }
  .hero__copy{ position:static; max-width:none; text-align:center; }
  .hero__fx{ display:none; }
  .hero__floor{ height:38%; }
  .hero__banner{ margin:0; }

  .pain__head{ flex-direction:column; align-items:center; text-align:center; gap:6px; }
  .pain__girl{ width:150px; }
  .pain__grid{ grid-template-columns:1fr 1fr; gap:40px 22px; }
  .about{ padding-top:120px; }
  .about__intro{ grid-template-columns:1fr; gap:12px; }
  .about__pen{ max-width:300px; margin:10px auto 20px; }
  .about__body{ grid-template-columns:1fr; gap:40px; }
  .about__photo{ order:-1; }
  .free__grid{ grid-template-columns:1fr; gap:38px; }
  .coach__cards{ grid-template-columns:1fr; }
  .coach__plus{ rotate:90deg; justify-self:center; }
  .guide__grid{ grid-template-columns:1fr; }
  .gcard{ min-height:360px; }
  .news__top{ grid-template-columns:1fr; gap:18px; text-align:center; }
  .news__writer{ justify-self:center; max-width:220px; }
  .news__copy p{ max-width:none; }
  .news__form{ justify-content:center; }
  .footer__in{ flex-direction:column; text-align:center; }
}
@media (max-width:560px){
  .wrap{ padding:0 20px; }
  .pain__grid{ grid-template-columns:1fr; }
  .stats{ grid-template-columns:1fr; }
  .stat:nth-child(odd){ border-right:0; }
  .btn--lg{ padding:18px 30px; font-size:1.1rem; width:100%; }
  .hero h1{ line-height:1.5; }
}

/* device hooks (set on load) */
.is-mobile .reveal{ transition-duration:.6s; }