/* =========================================================================
   Tutorfic — marketing site
   Aesthetic: warm "sticker-book" — cream paper, warm ink, saffron + teal,
   chunky rounded cards with hard offset shadows, playful but organized.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,900&family=Nunito:wght@400;500;600;700;800;900&display=swap');

:root {
  /* paper + ink */
  --paper:      #FFF6E9;
  --paper-2:    #FFEFD8;
  --card:       #FFFFFF;
  --ink:        #2B2117;
  --ink-soft:   #6B5D4C;

  /* accents */
  --saffron:    #F4711F;
  --saffron-2:  #FF9A4D;
  --teal:       #0E8C7F;
  --teal-2:     #16B3A1;
  --berry:      #E8506B;
  --sun:        #FFCE54;
  --sky:        #4FA3E3;

  /* utility */
  --line:       #E8D9C2;
  --shadow:     6px 6px 0 var(--ink);
  --shadow-sm:  4px 4px 0 var(--ink);
  --shadow-soft: 0 18px 40px -18px rgba(43,33,23,.35);
  --radius:     22px;
  --radius-sm:  14px;

  --maxw:       1160px;
  --display:    'Fraunces', Georgia, serif;
  --body:       'Nunito', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 12% 8%,  rgba(255,206,84,.20), transparent 40%),
    radial-gradient(circle at 88% 4%,  rgba(22,179,161,.16), transparent 38%),
    radial-gradient(circle at 50% 100%, rgba(244,113,31,.10), transparent 45%);
  line-height: 1.6;
  font-size: 17px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* subtle paper grain */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-family: var(--display); line-height: 1.05; font-weight: 700; letter-spacing: -.01em; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--saffron);
  background: #fff;
  border: 2px solid var(--ink);
  padding: 6px 14px; border-radius: 100px;
  box-shadow: var(--shadow-sm);
}
.eyebrow.teal { color: var(--teal); }

.section { padding: 92px 0; position: relative; }
.section-head { max-width: 680px; margin: 0 auto 56px; text-align: center; }
.section-head h2 { font-size: clamp(30px, 4.4vw, 50px); }
.section-head p { color: var(--ink-soft); font-size: 19px; margin-top: 16px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--body); font-weight: 800; font-size: 16px;
  padding: 14px 26px; border-radius: 100px; cursor: pointer;
  border: 2.5px solid var(--ink); background: var(--card); color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.primary { background: var(--saffron); color: #fff; }
.btn.teal { background: var(--teal); color: #fff; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.ghost:hover { background: #fff; box-shadow: var(--shadow-sm); }
.btn.lg { font-size: 18px; padding: 17px 32px; }

/* ---------- navbar ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(8px);
  background: rgba(255,246,233,.82);
  border-bottom: 2px solid var(--ink);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: var(--display); font-weight: 900; font-size: 22px; }
.brand .logo {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--saffron); color: #fff; border: 2.5px solid var(--ink);
  border-radius: 12px; box-shadow: var(--shadow-sm); font-size: 20px;
  transform: rotate(-5deg);
}
.nav-links { display: flex; align-items: center; gap: 30px; font-weight: 700; }
.nav-links a { color: var(--ink-soft); transition: color .15s; position: relative; }
.nav-links a:hover, .nav-links a.active { color: var(--ink); }
.nav-links a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 3px;
  background: var(--saffron); border-radius: 3px;
}
.nav-cta { display: flex; align-items: center; gap: 12px; }
/* Links that only appear inside the mobile dropdown menu (Live demo / Log in). */
.nav-links .menu-only { display: none; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; }
.nav-toggle span { display: block; width: 26px; height: 3px; background: var(--ink); border-radius: 3px; margin: 5px 0; transition: .2s; }

/* ---------- hero ---------- */
.hero { padding: 70px 0 40px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(40px, 6.2vw, 74px); font-weight: 900; letter-spacing: -.02em; }
.hero h1 .swirl { color: var(--saffron); position: relative; white-space: nowrap; }
.hero h1 .swirl svg { position: absolute; left: -2%; bottom: -16px; width: 104%; height: 18px; }
.hero p.lead { font-size: 20px; color: var(--ink-soft); margin: 26px 0 32px; max-width: 520px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-free { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; padding: 8px 14px; font-weight: 700; font-size: 15px; color: var(--teal); background: #E7F6F2; border: 2px solid var(--ink); border-radius: 999px; box-shadow: var(--shadow-sm); }
.hero-free b { color: var(--ink); font-weight: 900; }
.hero-trust { display: flex; align-items: center; gap: 18px; margin-top: 28px; color: var(--ink-soft); font-weight: 700; font-size: 15px; flex-wrap: wrap; }
.avatars { display: flex; }
.avatars span {
  width: 38px; height: 38px; border-radius: 50%; border: 2.5px solid var(--paper);
  display: grid; place-items: center; font-size: 18px; margin-left: -10px;
  box-shadow: 0 0 0 1px var(--ink);
}
.avatars span:first-child { margin-left: 0; }

/* hero device / card art */
.hero-art { position: relative; }
.device {
  background: var(--card); border: 3px solid var(--ink); border-radius: 26px;
  box-shadow: 10px 12px 0 var(--ink); padding: 18px; position: relative;
}
.device-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.device-head i { width: 13px; height: 13px; border-radius: 50%; background: var(--line); display: block; }
.device-head i:nth-child(1){ background:#FF6B6B } .device-head i:nth-child(2){ background:var(--sun) } .device-head i:nth-child(3){ background:var(--teal) }
.lesson-card { background: var(--paper-2); border: 2px solid var(--ink); border-radius: 16px; padding: 16px; }
.lesson-card h4 { font-size: 20px; }
.lesson-card .tag { font-size: 12px; font-weight: 800; color: var(--teal); letter-spacing:.08em; text-transform: uppercase;}
.lesson-line { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-weight: 600; }
.lesson-line .num { flex: none; width: 24px; height: 24px; border-radius: 8px; background: var(--saffron); color:#fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; border: 2px solid var(--ink); }
.play-pill { margin-top: 16px; display: inline-flex; gap: 9px; align-items: center; background: var(--teal); color: #fff; border: 2px solid var(--ink); border-radius: 100px; padding: 9px 16px; font-weight: 800; font-size: 14px; box-shadow: var(--shadow-sm); }

/* floating sticker badges */
.sticker {
  position: absolute; background: #fff; border: 2.5px solid var(--ink);
  border-radius: 14px; padding: 10px 14px; font-weight: 800; font-size: 14px;
  box-shadow: var(--shadow-sm); display: inline-flex; align-items: center; gap: 8px;
}
.sticker .big { font-size: 18px; }
.sticker.s1 { top: -22px; right: -10px; transform: rotate(6deg); color: var(--saffron); }
.sticker.s2 { bottom: 40px; left: -34px; transform: rotate(-7deg); color: var(--teal); }
.sticker.s3 { bottom: -20px; right: 30px; transform: rotate(4deg); color: var(--berry); }

/* ---------- marquee / logos ---------- */
.lang-band { background: var(--ink); color: var(--paper); padding: 16px 0; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); overflow: hidden; }
.marquee { display: flex; gap: 48px; white-space: nowrap; animation: scroll 26s linear infinite; font-family: var(--display); font-size: 22px; font-weight: 600; }
.marquee span { display: inline-flex; align-items: center; gap: 48px; }
.marquee b { color: var(--sun); }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ---------- stat band ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.stat {
  background: var(--card); border: 2.5px solid var(--ink); border-radius: var(--radius);
  padding: 28px 22px; text-align: center; box-shadow: var(--shadow-sm);
}
.stat .num { font-family: var(--display); font-size: 46px; font-weight: 900; line-height: 1; color: var(--saffron); }
.stat:nth-child(2) .num { color: var(--teal); }
.stat:nth-child(3) .num { color: var(--berry); }
.stat:nth-child(4) .num { color: var(--sky); }
.stat .lbl { margin-top: 10px; font-weight: 700; color: var(--ink-soft); font-size: 15px; }

/* ---------- how it works ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.step {
  background: var(--card); border: 2.5px solid var(--ink); border-radius: var(--radius);
  padding: 26px 22px; box-shadow: var(--shadow-sm); position: relative;
}
.step .ico { width: 58px; height: 58px; border-radius: 16px; border: 2.5px solid var(--ink); display: grid; place-items: center; font-size: 28px; box-shadow: var(--shadow-sm); margin-bottom: 16px; }
.step:nth-child(1) .ico { background: var(--sun); }
.step:nth-child(2) .ico { background: var(--saffron-2); }
.step:nth-child(3) .ico { background: var(--teal-2); }
.step:nth-child(4) .ico { background: var(--berry); }
.step h3 { font-size: 21px; margin-bottom: 8px; }
.step p { color: var(--ink-soft); font-size: 15.5px; }
.step .stepnum { counter-increment: step; position: absolute; top: 18px; right: 20px; font-family: var(--display); font-weight: 900; font-size: 38px; color: var(--line); }
.step .stepnum::before { content: "0" counter(step); }

/* ---------- feature grid ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature {
  background: var(--card); border: 2.5px solid var(--ink); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
.feature:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow); }
.feature .ficon { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px; border: 2.5px solid var(--ink); }
.feature h3 { font-size: 22px; margin-bottom: 10px; }
.feature p { color: var(--ink-soft); font-size: 16px; }
.feature .pill { display:inline-block; margin-top:14px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--teal); }

/* tinted icon backgrounds */
.bg-sun { background: var(--sun); } .bg-saf { background: var(--saffron-2); }
.bg-teal { background: var(--teal-2); } .bg-berry { background: var(--berry); }
.bg-sky { background: var(--sky); } .bg-paper { background: var(--paper-2); }

/* ---------- split / showcase ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.rev .split-media { order: -1; }
.split h2 { font-size: clamp(28px,3.6vw,42px); }
.split p { color: var(--ink-soft); font-size: 18px; margin-top: 16px; }
.check-list { margin-top: 22px; display: grid; gap: 12px; }
.check-list li { list-style: none; display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
.check-list .tick { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--teal); color: #fff; display: grid; place-items: center; border: 2px solid var(--ink); font-size: 14px; font-weight: 900; }

/* progress mock infographic */
.mock {
  background: var(--card); border: 3px solid var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 26px;
}
.mock-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.mock-top .who { font-family: var(--display); font-weight: 800; font-size: 20px; }
.streak { display: inline-flex; gap: 6px; align-items: center; background: var(--paper-2); border: 2px solid var(--ink); border-radius: 100px; padding: 6px 12px; font-weight: 800; font-size: 14px; }
.bar-row { display: flex; align-items: center; gap: 12px; margin: 14px 0; }
.bar-row .name { width: 92px; font-weight: 700; font-size: 14px; }
.bar { flex: 1; height: 18px; background: var(--paper-2); border: 2px solid var(--ink); border-radius: 100px; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 100px; }
.bar i.a { width: 92%; background: var(--teal); }
.bar i.b { width: 74%; background: var(--saffron); }
.bar i.c { width: 58%; background: var(--berry); }
.bar-row .pct { width: 42px; text-align: right; font-weight: 800; font-size: 14px; }
.badge-row { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.bdg { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; border: 2px solid var(--ink); box-shadow: var(--shadow-sm); }

/* ---------- comparison infographic ---------- */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 820px; margin: 0 auto; }
.compare-col { background: var(--card); border: 2.5px solid var(--ink); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); }
.compare-col.win { background: #fff; border-color: var(--saffron); box-shadow: 6px 6px 0 var(--saffron); }
.compare-col h3 { font-size: 22px; display:flex; align-items:center; gap:10px; }
.compare-col .price { font-family: var(--display); font-size: 40px; font-weight: 900; margin: 10px 0 4px; }
.compare-col .price small { font-size: 16px; color: var(--ink-soft); font-weight: 700; }
.compare-col ul { list-style: none; margin-top: 16px; display: grid; gap: 10px; }
.compare-col li { display: flex; gap: 10px; font-weight: 600; color: var(--ink-soft); }
.compare-col li .m { font-weight: 900; }
.compare-col li.no { opacity: .6; }
.compare-col .m.yes { color: var(--teal); } .compare-col .m.bad { color: var(--berry); }

/* ---------- languages donut ---------- */
.lang-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.lang-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lang-chip { display: flex; align-items: center; gap: 12px; background: var(--card); border: 2.5px solid var(--ink); border-radius: 100px; padding: 10px 18px; font-weight: 800; box-shadow: var(--shadow-sm); }
.lang-chip .dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink); }
.lang-chip small { color: var(--ink-soft); font-weight: 700; }

/* ---------- testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.quote { background: var(--card); border: 2.5px solid var(--ink); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); }
.quote .stars { color: var(--sun); -webkit-text-stroke: 1px var(--ink); font-size: 18px; letter-spacing: 2px; }
.quote p { margin: 14px 0 18px; font-size: 16.5px; font-weight: 600; }
.quote .who { display: flex; align-items: center; gap: 12px; }
.quote .who .av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; border: 2.5px solid var(--ink); }
.quote .who b { display: block; font-family: var(--display); }
.quote .who small { color: var(--ink-soft); }

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.plan { background: var(--card); border: 2.5px solid var(--ink); border-radius: var(--radius); padding: 32px 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.plan.feat { background: var(--ink); color: var(--paper); transform: translateY(-10px); box-shadow: 6px 6px 0 var(--saffron); }
.plan.feat .ink-soft, .plan.feat .plan-price small { color: #d9c8b0; }
.plan .badge-top { align-self: flex-start; background: var(--saffron); color: #fff; border: 2px solid #fff; font-size: 12px; font-weight: 800; letter-spacing:.08em; text-transform: uppercase; padding: 4px 12px; border-radius: 100px; margin-bottom: 14px; }
.plan h3 { font-size: 24px; }
.plan .plan-price { font-family: var(--display); font-size: 46px; font-weight: 900; margin: 12px 0; }
.plan .plan-price small { font-size: 16px; font-weight: 700; color: var(--ink-soft); }
.plan ul { list-style: none; margin: 8px 0 26px; display: grid; gap: 12px; }
.plan li { display: flex; gap: 10px; font-weight: 600; }
.plan li .t { color: var(--teal); font-weight: 900; }
.plan.feat li .t { color: var(--sun); }
.plan .btn { margin-top: auto; width: 100%; }

/* ---------- FAQ ---------- */
.faq-list { max-width: 760px; margin: 0 auto; display: grid; gap: 14px; }
.faq-item { background: var(--card); border: 2.5px solid var(--ink); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); overflow: hidden; }
.faq-q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 20px 24px; font-family: var(--display); font-weight: 700; font-size: 19px; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--ink); }
.faq-q .plus { flex: none; width: 30px; height: 30px; border-radius: 9px; background: var(--paper-2); border: 2px solid var(--ink); display: grid; place-items: center; font-size: 20px; transition: transform .2s, background .2s; }
.faq-item.open .faq-q .plus { transform: rotate(45deg); background: var(--saffron); color: #fff; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a p { padding: 0 24px 22px; color: var(--ink-soft); font-weight: 500; }

/* ---------- CTA band ---------- */
.cta-band { padding: 86px 0; }
.cta-card {
  background: var(--saffron);
  background-image: radial-gradient(circle at 85% 20%, var(--saffron-2), transparent 55%);
  border: 3px solid var(--ink); border-radius: 32px; box-shadow: var(--shadow);
  padding: 64px 48px; text-align: center; color: #fff; position: relative; overflow: hidden;
}
.cta-card h2 { font-size: clamp(30px, 4.6vw, 52px); color: #fff; }
.cta-card p { font-size: 19px; margin: 16px auto 30px; max-width: 540px; opacity: .95; }
.cta-card .btn.primary { background: #fff; color: var(--ink); }
.cta-card .deco { position: absolute; font-size: 90px; opacity: .25; }
.cta-card .deco.l { left: 30px; bottom: -10px; transform: rotate(-12deg); }
.cta-card .deco.r { right: 36px; top: -6px; transform: rotate(10deg); }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: var(--paper); padding: 64px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.footer .brand { color: var(--paper); }
.footer p.tag { color: #c9b8a0; margin-top: 14px; max-width: 300px; }
.footer h4 { font-family: var(--display); font-size: 17px; margin-bottom: 16px; color: var(--sun); }
.footer ul { list-style: none; display: grid; gap: 10px; }
.footer a { color: #d9c8b0; font-weight: 600; }
.footer a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid #4a3d2c; margin-top: 44px; padding-top: 22px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: #b0a08a; font-size: 14px; }

/* ---------- page hero (inner pages) ---------- */
.page-hero { padding: 70px 0 40px; text-align: center; }
.page-hero h1 { font-size: clamp(36px, 5.4vw, 64px); font-weight: 900; }
.page-hero p { color: var(--ink-soft); font-size: 20px; max-width: 620px; margin: 20px auto 0; }

/* prose for legal pages */
.prose { max-width: 760px; margin: 0 auto; }
.prose h2 { font-size: 26px; margin: 36px 0 12px; }
.prose p, .prose li { color: var(--ink-soft); margin-bottom: 12px; }
.prose ul { padding-left: 22px; }

/* contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.form { background: var(--card); border: 2.5px solid var(--ink); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow-sm); }
.form label { display: block; font-weight: 800; margin: 16px 0 7px; font-size: 14px; }
.form input, .form textarea, .form select { width: 100%; padding: 13px 16px; border: 2.5px solid var(--ink); border-radius: 12px; font-family: var(--body); font-size: 16px; font-weight: 600; background: var(--paper); }
.form input:focus, .form textarea:focus, .form select:focus { outline: none; box-shadow: var(--shadow-sm); }
.form textarea { resize: vertical; min-height: 120px; }
.contact-info .info-card { background: var(--card); border: 2.5px solid var(--ink); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm); margin-bottom: 18px; display: flex; gap: 16px; align-items: flex-start; }
.contact-info .info-card .ico { width: 48px; height: 48px; flex: none; border-radius: 13px; border: 2.5px solid var(--ink); display: grid; place-items: center; font-size: 22px; }

/* ---------- reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-art { max-width: 460px; margin: 0 auto; }
  .stats { grid-template-columns: repeat(2,1fr); }
  .steps { grid-template-columns: repeat(2,1fr); }
  .features { grid-template-columns: repeat(2,1fr); }
  .quotes { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .plan.feat { transform: none; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split.rev .split-media { order: 0; }
  .lang-grid { grid-template-columns: 1fr; gap: 32px; }
  .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .compare { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  /* On phones the bar holds only the brand, the Log in button and the hamburger.
     Start free is already prominent in the hero, so it (and Live demo) move into
     the dropdown menu — avoids a duplicate "Start free" above the fold. */
  .nav-cta .demo-link, .nav-cta .btn.primary { display: none; }
  .nav-cta { margin-left: auto; }            /* group Log in + hamburger on the right */
  .nav-cta .btn { padding: 9px 16px; font-size: 14px; }
  .nav-toggle { display: block; margin-left: 14px; }
  .nav.open .nav-links { display: flex; position: absolute; top: 74px; left: 0; right: 0; flex-direction: column; align-items: flex-start; background: var(--paper); border-bottom: 2px solid var(--ink); padding: 20px 24px; gap: 18px; }
  .nav.open .nav-links .menu-only { display: block; }
}
@media (max-width: 560px) {
  .stats, .steps, .features, .lang-list, .footer-grid { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
  .cta-card { padding: 44px 24px; }
  /* Shrink the brand a touch so the brand + CTA + hamburger never crowd on
     narrow phones (down to ~320px). */
  .brand { font-size: 19px; gap: 9px; }
  .brand .logo { width: 34px; height: 34px; }
  .nav-cta .btn { padding: 8px 13px; }
  /* Tighten the hero so the "free credits" card lands above the fold on phones. */
  .hero { padding: 30px 0 28px; }
  .hero p.lead { font-size: 18px; margin: 16px 0 22px; }
  .hero-cta { gap: 12px; }
  .hero-free { margin-top: 14px; }
  .hero-trust { margin-top: 18px; }
}