/* Mortimer English Club — landing styles
   Reconstructed from design handoff (Mortimer Landing v2). */

html{scroll-behavior:smooth}
body{margin:0;font-family:'Manrope',sans-serif;color:#1F2A33;background:#FFFFFF;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%}
h1,h2,h3,p,div{overflow-wrap:break-word}
a{color:#006AB3;text-decoration:none}
a:hover{color:#00558F}
input,select,button,textarea{font-family:'Manrope',sans-serif}
::selection{background:#006AB3;color:#fff}

/* reveal-on-scroll */
[data-rv]{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
[data-rv].rv-on{opacity:1;transform:translateY(0)}

/* details / faq */
summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}
details[open] .chev{transform:rotate(45deg)}

/* keyframes */
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shine{0%{transform:translateX(-130%) skewX(-20deg)}55%,100%{transform:translateX(240%) skewX(-20deg)}}

/* layout grids */
@media (min-width:900px){.down{margin-top:64px}.sp2{grid-column:span 2}}
.grid3{display:grid;grid-template-columns:1fr;gap:2px}
@media (min-width:1000px){.grid3{grid-template-columns:repeat(3,1fr)}}
.grid4{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:620px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.grid4{grid-template-columns:repeat(4,1fr)}}
.revgrid{columns:1;column-gap:18px}
@media (min-width:700px){.revgrid{columns:2}}
@media (min-width:1100px){.revgrid{columns:3}}
.revgrid > *{break-inside:avoid;margin-bottom:18px}

/* responsive show/hide */
@media (min-width:740px){#mbar{display:none!important}}
@media (max-width:899px){.secnum{display:none!important}}
@media (max-width:1099px){.hnav{display:none!important}}
@media (max-width:899px){.topbar{display:none!important}.hphone{display:none!important}}
@media (max-width:520px){
  .hdrrow{padding-left:16px!important;padding-right:16px!important;gap:12px!important}
  .hdrlogo{width:118px!important;min-width:0!important}
  .hdrcta{padding:11px 16px!important;font-size:13px!important}
  .stickybadge{width:88px!important;height:88px!important;left:-10px!important;top:-18px!important}
  .herocard{left:0!important;bottom:24px!important;padding:12px 16px!important}
  .founderphoto{width:150px!important;height:190px!important}
}

/* noise overlay for warm sections */
.noise::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%22160%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22/%3E%3C/filter%3E%3Crect width=%22160%22 height=%22160%22 filter=%22url(%23n)%22/%3E%3C/svg%3E")}

/* magnetic hero button + periodic shine */
#magbtn:hover{background:#F25A22!important}
#magbtn::after{content:'';position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.35),rgba(255,255,255,0));animation:shine 3.4s ease 1.4s infinite;pointer-events:none}

/* interactive states (were inline style-hover / style-focus) */
.hnav a:hover{color:#006AB3!important;border-bottom-color:#006AB3!important}
.hphone:hover{color:#006AB3!important}
.hdrcta:hover{background:#F25A22!important;transform:translateY(-1px)}
.btn-orange:hover{background:#F25A22!important}
.progrow:hover{background:rgba(255,255,255,.75);transform:translateX(8px)}
.finput:focus{border-color:#006AB3!important}
.btn-submit:hover{background:#F25A22!important;transform:translateY(-1px)}
.btn-viber:hover{background:rgba(115,96,242,.06)}

/* On phones the two-column grids collapse to one column, so the sticky
   headings (position:sticky;top:120px) would overlap the content that
   follows. Unstick them below the tablet breakpoint. The site header uses
   top:0 and is intentionally NOT matched here. */
@media (max-width:767px){
  [style*="top:120px"]{position:static !important;top:auto !important}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-rv]{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}