/* =========================================================
   Idée littéraire — Landing page (paper + pencil edition)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --brand-mauve:        #9F77AA;
  --brand-mauve-soft:   #C5A8CF;
  --brand-mauve-deep:   #6F4D7A;
  --brand-yellow:       #F4E028;
  --brand-yellow-soft:  #F6E568;
  --brand-ink:          #111827;
  --brand-paper:        #FFFFFF;

  --indigo-50:  #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-200: #c7d2fe;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;
  --purple-50:  #faf5ff;
  --purple-500: #a855f7;
  --purple-600: #9333ea;
  --purple-700: #7e22ce;
  --blue-50:    #eff6ff;
  --blue-600:   #2563eb;

  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* Paper palette */
  --paper:      #FBF7F1;
  --paper-2:    #F5EFE6;
  --rule-line:  rgba(159, 119, 170, 0.08);

  --ink-deep:   #1f2937;

  --font-sans:  'Open Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-hand:  'Caveat', 'Brush Script MT', cursive;

  --rounded-md: 0.375rem;
  --rounded-lg: 0.5rem;
  --rounded-xl: 0.75rem;
  --rounded-2xl: 1rem;
  --rounded-full: 9999px;

  --shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-md:  0 4px 8px -2px rgb(31 24 12 / 0.08);
  --shadow-paper: 0 1px 0 rgba(0,0,0,.03), 0 8px 22px -10px rgba(111, 77, 122, .25);
  --shadow-glow: 0 12px 28px -10px rgba(79, 70, 229, .55);
}

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

body.lp {
  font-family: var(--font-sans);
  color: var(--gray-700);
  background-color: var(--paper);
  /* faint horizontal ruled-paper lines + soft mauve grain */
  background-image:
    radial-gradient(1200px 600px at 8% -10%, rgba(159,119,170,.10), transparent 60%),
    radial-gradient(900px 500px at 100% 110%, rgba(99,102,241,.07), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 35px, var(--rule-line) 35px 36px);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
.lp a { color: var(--indigo-700); text-decoration: none; }
.lp a:hover { color: var(--indigo-600); }
.lp a.btn { color: inherit; }
.lp h1, .lp h2, .lp h3 { color: var(--gray-900); margin: 0; line-height: 1.15; letter-spacing: -0.01em; }
.lp img { max-width: 100%; }

/* ---------- Container ---------- */
.lp-wrap { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem; }

/* ---------- Header ---------- */
.lp-nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(8px);
  background: rgba(251,247,241,.78);
  border-bottom: 1px dashed rgba(111,77,122,.18);
}
.lp-nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 0; }
.lp-logo { height: 28px; display: block; }
.lp-nav-actions { display: flex; align-items: center; gap: .5rem; }
.lp-lang { display: inline-flex; gap: .15rem; padding: .25rem; background: #fff; border: 1px dashed rgba(111,77,122,.25); border-radius: var(--rounded-full); margin-right: .5rem; }
.lp-lang a { display: inline-block; padding: .2rem .6rem; font-size: .78rem; font-weight: 600; color: var(--gray-500); border-radius: 9999px; text-transform: uppercase; transition: color .15s ease, background .15s ease; }
.lp-lang a:hover { color: var(--brand-mauve-deep); background: rgba(159,119,170,.12); }
.lp-lang a.is-active, .lp-lang a.is-active:hover { background: var(--brand-mauve); color: #fff; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.25rem;
  border: 0; border-radius: var(--rounded-xl);
  font-family: var(--font-sans); font-weight: 600; font-size: 0.95rem;
  cursor: pointer; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.lp .btn-primary, .lp a.btn-primary {
  background: var(--brand-mauve-deep); color: #fff;
  box-shadow: 0 8px 18px -8px rgba(111,77,122,.55);
  letter-spacing: .02em;
}
.lp .btn-primary:hover, .lp a.btn-primary:hover { color: #fff; background: #5a3d65; transform: translateY(-1px) rotate(-.4deg); box-shadow: 0 12px 24px -10px rgba(111,77,122,.6); }
.lp .btn-ghost, .lp a.btn-ghost { background: transparent; color: var(--gray-700); padding: .55rem .9rem; }
.lp .btn-ghost:hover, .lp a.btn-ghost:hover { background: rgba(159,119,170,.12); color: var(--brand-mauve-deep); }
.lp .btn-pencil, .lp a.btn-pencil {
  background: #fff; color: var(--gray-800);
  border: 0; padding: .8rem 1.4rem;
  position: relative;
}
.lp .btn-pencil::before {
  content: ""; position: absolute; inset: -4px;
  background-image: url("/assets/img/pencil/mauve/frame-rough.svg");
  background-repeat: no-repeat; background-size: 100% 100%;
  pointer-events: none;
}
.lp .btn-pencil:hover, .lp a.btn-pencil:hover { color: var(--brand-mauve-deep); transform: translateY(-1px) rotate(.3deg); }
.btn-lg { padding: 1rem 1.6rem; font-size: 1.05rem; }
.btn-xl { padding: 1.15rem 2rem; font-size: 1.1rem; letter-spacing: .03em; }

/* =========================================================
   PENCIL UTILITIES (paths → /assets/img/pencil/<color>/)
   ========================================================= */
.pcl-underline { position: relative; display: inline-block; }
.pcl-underline::after {
  content: ""; position: absolute; left: -6px; right: -6px; bottom: -10px; height: 14px;
  background-image: url("/assets/img/pencil/mauve/underline-wave.svg");
  background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none;
}
.pcl-underline.pcl-blue::after  { background-image: url("/assets/img/pencil/blue/underline-wave.svg"); }
.pcl-underline.pcl-ink::after   { background-image: url("/assets/img/pencil/ink/underline-wave.svg"); }
.pcl-underline-rough { position: relative; display: inline-block; }
.pcl-underline-rough::after {
  content: ""; position: absolute; left: -6px; right: -6px; bottom: -10px; height: 16px;
  background-image: url("/assets/img/pencil/mauve/underline-rough.svg");
  background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none;
}
.pcl-underline-zigzag { position: relative; display: inline-block; }
.pcl-underline-zigzag::after {
  content: ""; position: absolute; left: -4px; right: -4px; bottom: -10px; height: 14px;
  background-image: url("/assets/img/pencil/mauve/underline-zigzag.svg");
  background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none;
}

.pcl-circle { position: relative; display: inline-block; padding: .15em .55em; white-space: nowrap; }
.pcl-circle::before {
  content: ""; position: absolute; inset: -10px -14px;
  background-image: url("/assets/img/pencil/mauve/circle-rough.svg");
  background-repeat: no-repeat; background-size: 100% 100%;
  pointer-events: none;
}
.pcl-circle.pcl-ink::before { background-image: url("/assets/img/pencil/ink/circle-rough.svg"); }

.pcl-highlight { position: relative; display: inline-block; padding: 2px 6px; }
.pcl-highlight::before {
  content: ""; position: absolute; inset: -4px -8px; z-index: -1;
  background-image: url("/assets/img/pencil/mauve/highlight.svg");
  background-repeat: no-repeat; background-size: 100% 100%;
}

.pcl-rule-three-dots { display: block; height: 22px; width: 240px; max-width: 80%; margin: 0 auto;
  background-image: url("/assets/img/pencil/mauve/divider-three-dots.svg");
  background-repeat: no-repeat; background-position: center; background-size: 100% 100%; }
.pcl-divider { display: block; padding: 3.5rem 0; margin: 0; }
.pcl-divider .pcl-rule-three-dots { margin: 0 auto; }
.pcl-rule-sparkle { display: block; height: 26px; max-width: 320px; margin: 0 auto;
  background-image: url("/assets/img/pencil/mauve/divider-sparkle.svg");
  background-repeat: no-repeat; background-size: 100% 100%; }

.pcl-mark {
  display: inline-block; width: 1.1em; height: 1.1em;
  vertical-align: -0.18em;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.pcl-mark-check    { background-image: url("/assets/img/pencil/mauve/check.svg"); }
.pcl-mark-spark    { background-image: url("/assets/img/pencil/mauve/spark.svg"); }
.pcl-mark-asterisk { background-image: url("/assets/img/pencil/mauve/asterisk.svg"); }
.pcl-mark-star     { background-image: url("/assets/img/pencil/mauve/star.svg"); }
.pcl-mark-heart    { background-image: url("/assets/img/pencil/mauve/heart.svg"); }
.pcl-mark-arrow    { background-image: url("/assets/img/pencil/mauve/arrow-straight.svg"); width: 2.4em; height: .7em; vertical-align: middle; }

.pcl-arrow-curve { display: inline-block; width: 200px; height: 80px;
  background-image: url("/assets/img/pencil/mauve/arrow-curve.svg");
  background-repeat: no-repeat; background-size: 100% 100%; }
.pcl-arrow-zig { display: inline-block; width: 200px; height: 60px;
  background-image: url("/assets/img/pencil/mauve/arrow-zig.svg");
  background-repeat: no-repeat; background-size: 100% 100%; }
.pcl-arrow-loop { display: inline-block; width: 220px; height: 90px;
  background-image: url("/assets/img/pencil/mauve/arrow-loop.svg");
  background-repeat: no-repeat; background-size: 100% 100%; }

.pcl-bubble {
  position: relative; padding: 1.4rem 1.6rem 2.6rem; display: inline-block;
  min-width: 14em; max-width: 22em;
  font-family: var(--font-hand); font-size: 1.5rem; line-height: 1.15; color: var(--brand-mauve-deep);
}
.pcl-bubble::before {
  content: ""; position: absolute; inset: -10px -14px -6px -14px;
  background-image: url("/assets/img/pencil/mauve/bubble.svg");
  background-repeat: no-repeat; background-size: 100% 100%; z-index: -1;
}

.pcl-tag {
  position: relative; padding: .55rem 1.5rem .55rem 2.25rem;
  display: inline-block; color: var(--brand-mauve-deep);
  font-family: var(--font-hand); font-size: 1.35rem; line-height: 1;
}
.pcl-tag::before {
  content: ""; position: absolute; inset: -4px;
  background-image: url("/assets/img/pencil/mauve/tag.svg");
  background-repeat: no-repeat; background-size: 100% 100%;
}

.pcl-frame-rough { position: relative; padding: 1.5rem 1.75rem; }
.pcl-frame-rough::before {
  content: ""; position: absolute; inset: -8px;
  background-image: url("/assets/img/pencil/mauve/frame-rough.svg");
  background-repeat: no-repeat; background-size: 100% 100%; pointer-events: none;
}

.pcl-spark::before {
  content: "✺"; display: inline-block; margin-right: .3em;
  font-family: var(--font-hand); color: var(--brand-mauve);
  transform: translateY(-0.05em);
}
.pcl-wobble { animation: pcl-wobble 4s ease-in-out infinite; transform-origin: center; display: inline-block; }
@keyframes pcl-wobble {
  0%, 100% { transform: rotate(-0.4deg) translateY(0); }
  50%      { transform: rotate(0.4deg) translateY(-1px); }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding: 4rem 0 3.5rem; overflow: hidden; }
.hero-inner { position: relative; z-index: 1; display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 920px) { .hero-inner { grid-template-columns: 1.15fr .85fr; gap: 3.5rem; } }

.hero .kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-hand); font-size: 1.5rem; color: var(--brand-mauve-deep);
  transform: rotate(-2deg); margin-bottom: .5rem;
}

.hero h1 {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  font-weight: 800; margin: .25rem 0 1.5rem;
}
.hero h1 .hand {
  font-family: var(--font-hand); font-weight: 700;
  color: var(--brand-mauve-deep);
  font-size: 1.25em; line-height: 1;
  display: inline-block; transform: rotate(-2deg);
}
.hero h1 .pcl-circle { font-family: var(--font-hand); color: var(--brand-mauve-deep); font-weight: 700; font-size: 1.15em; }

.hero-lead { font-size: 1.1rem; color: var(--gray-700); max-width: 36rem; margin: 0 0 1.75rem; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 1.5rem; }
.hero-cta .arrow-note {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-hand); color: var(--brand-mauve); font-size: 1.4rem;
  transform: rotate(-4deg);
}
.hero-trust {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.5rem;
  font-size: .95rem; color: var(--gray-700);
}
.hero-trust span { display: inline-flex; align-items: center; gap: .45rem; }

/* Notebook card */
.notebook {
  position: relative;
  background: #fff;
  border-radius: 6px;
  box-shadow: var(--shadow-paper);
  overflow: hidden;
  transform: rotate(1deg);
  background-image:
    linear-gradient(#fff, #fff),
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(159,119,170,.16) 28px 29px);
  background-blend-mode: normal;
}
.notebook::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 38px;
  background:
    radial-gradient(circle at 50% 16px, rgba(159,119,170,.18) 4px, transparent 5px) repeat-y;
  background-size: 100% 32px;
  border-right: 1px solid rgba(220,38,38,.18);
}
.notebook-inner { padding: 1.5rem 1.5rem 1.5rem 3rem; position: relative; z-index: 1; }
.notebook-eyebrow {
  font-family: var(--font-hand); color: var(--brand-mauve);
  font-size: 1.4rem; line-height: 1; margin-bottom: .25rem;
}
.notebook-title {
  font-family: var(--font-hand); font-size: 2rem; line-height: 1.05; color: var(--gray-900);
  font-weight: 700; margin-bottom: 1rem;
}
.notebook-desc {
  font-size: 1rem; line-height: 1.65; color: var(--gray-800);
  margin: .25rem 0 1.1rem;
}
.notebook-tags { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: .25rem; }
.notebook-tags .pcl-tag { font-size: 1.05rem; padding: .35rem 1.1rem .35rem 1.85rem; }
.notebook-style {
  margin-top: 1rem; padding-top: .85rem;
  border-top: 1px dashed rgba(159,119,170,.4);
  display: flex; align-items: baseline; gap: .55rem;
}
.notebook-style-label {
  font-family: var(--font-sans); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gray-500); font-weight: 700;
}
.notebook-style-value {
  font-family: var(--font-hand); color: var(--brand-mauve-deep);
  font-size: 1.5rem; line-height: 1;
}

.hero-deco {
  position: absolute; pointer-events: none; z-index: 0;
  font-family: var(--font-hand); color: var(--brand-mauve);
}
.hero-deco.d-arrow {
  width: 180px; height: 70px; top: 18%; right: -10px;
  background-image: url("/assets/img/pencil/mauve/arrow-loop.svg");
  background-repeat: no-repeat; background-size: 100% 100%;
  transform: rotate(8deg);
}
.hero-deco.d-spark { top: 8%; left: 35%; font-size: 2.4rem; transform: rotate(-10deg); }
.hero-deco.d-star  { bottom: 8%; left: 5%; font-size: 2rem; transform: rotate(15deg); color: var(--indigo-500); }

/* ---------- Sections ---------- */
.section { padding: 4rem 0; }
.section-tight { padding: 2.5rem 0; }
.section-eyebrow {
  display: inline-block; font-family: var(--font-hand);
  color: var(--brand-mauve); font-size: 1.6rem; line-height: 1;
  margin-bottom: .35rem; transform: rotate(-1.5deg);
}
.section h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.6rem); font-weight: 800; max-width: 36rem;
}
.section .lead { font-size: 1.05rem; color: var(--gray-700); max-width: 38rem; margin-top: 0.85rem; }
.section-head { margin-bottom: 4rem; }
.section-head.center { text-align: center; }
.section-head.center h2, .section-head.center .lead { margin-left: auto; margin-right: auto; }

/* ---------- Features (paper-card grid) ---------- */
.features { display: grid; gap: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.feature {
  position: relative; background: #fff;
  border-radius: 8px;
  padding: 1.5rem 1.5rem 1.4rem;
  box-shadow: var(--shadow-paper);
  transition: transform .25s ease;
}
.feature:nth-child(odd)  { transform: rotate(-.5deg); }
.feature:nth-child(even) { transform: rotate(.6deg); }
.feature:hover { transform: translateY(-4px) rotate(0); }
.feature .num {
  font-family: var(--font-hand); font-size: 2.2rem; line-height: 1;
  color: var(--brand-mauve); margin-bottom: .25rem;
}
.feature h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: .35rem; }
.feature p { margin: 0; color: var(--gray-700); font-size: .98rem; }
.feature .scribble-tape {
  position: absolute; top: -10px; left: 1.25rem; width: 64px; height: 18px;
  background: rgba(244,224,40,.55);
  border-radius: 1px; transform: rotate(-3deg);
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

/* ---------- How it works (steps with hand-drawn arrows) ---------- */
.steps {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  position: relative;
}
.step { position: relative; text-align: center; padding: 0 .5rem; }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px;
  font-family: var(--font-hand); font-size: 2.6rem; font-weight: 700; color: var(--brand-mauve-deep);
  margin-bottom: 1rem;
  background-image: url("/assets/img/pencil/mauve/circle-rough.svg");
  background-repeat: no-repeat; background-size: 100% 100%;
}
.step h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: .35rem; }
.step p { margin: 0; color: var(--gray-700); font-size: .98rem; }
.step-arrow {
  display: none;
  position: absolute; top: 24px; right: -2rem;
  width: 80px; height: 30px;
  background-image: url("/assets/img/pencil/mauve/arrow-straight.svg");
  background-repeat: no-repeat; background-size: 100% 100%;
  transform: rotate(-4deg);
}
@media (min-width: 720px) { .step:not(:last-child) .step-arrow { display: block; } }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 1rem; max-width: 44rem; margin: 0 auto; }
.faq details {
  background: #fff;
  border-radius: 8px;
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-paper);
  transition: transform .15s ease;
}
.faq details:nth-child(odd)  { transform: rotate(-.3deg); }
.faq details:nth-child(even) { transform: rotate(.4deg); }
.faq details[open] { transform: rotate(0); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-weight: 700; color: var(--gray-900);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; width: 24px; height: 24px;
  background-image: url("/assets/img/pencil/mauve/plus.svg");
  background-repeat: no-repeat; background-size: contain;
  transition: transform .2s ease;
}
.faq details[open] summary::after {
  background-image: url("/assets/img/pencil/mauve/xmark.svg");
}
.faq details p { margin: .85rem 0 0; color: var(--gray-700); font-size: .98rem; }

/* ---------- CTA final (the one place where we keep the gradient) ---------- */
.cta-final {
  position: relative;
  background: transparent; color: var(--gray-900);
  padding: 3.5rem 2.5rem; text-align: center;
  margin: 1.5rem 0 4rem;
}
.cta-final::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("/assets/img/pencil/mauve/frame-rough.svg");
  background-repeat: no-repeat; background-size: 100% 100%;
}
.cta-final .kicker-hand {
  font-family: var(--font-hand); font-size: 1.7rem; color: var(--brand-mauve);
  transform: rotate(-2deg); display: inline-block; margin-bottom: .25rem;
  position: relative; z-index: 2;
}
.cta-final h2 { color: var(--gray-900); font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 800; max-width: 32rem; margin: 0 auto .75rem; position: relative; z-index: 2; }
.cta-final p { color: var(--gray-700); max-width: 36rem; margin: 0 auto 1.75rem; position: relative; z-index: 2; font-size: 1.05rem; }
.cta-final .btn { position: relative; z-index: 2; }
.cta-final .micro { position: relative; z-index: 2; }
.lp .cta-final .btn-light, .lp .cta-final a.btn-light { background: #fff; color: var(--brand-mauve-deep); }
.lp .cta-final .btn-light:hover, .lp .cta-final a.btn-light:hover { color: var(--brand-mauve-deep); background: #fff; transform: translateY(-1px) rotate(-.4deg); box-shadow: var(--shadow-md); }
.cta-final .micro { color: var(--brand-mauve-deep); margin-top: 1rem; font-family: var(--font-hand); font-size: 1.2rem; }

/* ---------- Footer ---------- */
.lp-footer {
  border-top: 1px dashed rgba(111,77,122,.25);
  background: rgba(251,247,241,.7);
  padding: 2rem 0 1.75rem;
}
.lp-footer-stack { display: flex; flex-direction: column; align-items: center; gap: .85rem; text-align: center; }
.lp-footer-logo { height: 24px; }
.lp-footer-meta { color: var(--gray-500); font-size: .85rem; }

/* ---------- Responsive ---------- */

/* Tablet (≤ 920px) — hero stacks */
@media (max-width: 920px) {
  .hero { padding: 3.5rem 0 3rem; }
  .hero-inner { gap: 2rem; }
  .hero-deco.d-arrow { right: 0; transform: rotate(20deg) scale(.8); top: -2.5rem; }
}

/* Tablet (≤ 768px) */
@media (max-width: 768px) {
  .lp-wrap { padding: 0 1rem; }
  .pcl-divider { padding: 2.5rem 0; }
}

/* Mobile (≤ 640px) */
@media (max-width: 640px) {
  body.lp {
    background-image:
      repeating-linear-gradient(0deg, transparent 0 32px, var(--rule-line) 32px 33px);
  }

  /* Nav */
  .lp-nav-inner { padding: .65rem 0; gap: .5rem; }
  .lp-logo { height: 24px; }
  .lp-nav-actions { gap: .35rem; }
  .lp-nav-actions .btn-ghost { display: none; }
  .lp-lang { margin-right: .25rem; padding: .2rem; }
  .lp-lang a { padding: .15rem .45rem; font-size: .72rem; }
  .lp-nav-actions .btn-primary { padding: .55rem .85rem; font-size: .85rem; }

  /* Hero */
  .hero { padding: 2.25rem 0 2.5rem; }
  .hero-inner {
    display: flex !important;
    flex-direction: column;
    gap: 1.4rem;
  }
  /* Flatten the two columns on mobile so we can reorder items */
  .hero-inner > div { display: contents; }
  .hero .kicker     { order: 1; margin-bottom: 0; }
  .hero h1          { order: 2; margin: 0; font-size: clamp(1.7rem, 7vw, 2.1rem); text-align: center; }
  .notebook         { order: 3; margin: 0; }
  .hero-lead        { order: 4; margin: 0; font-size: 1rem; text-align: center; }
  .hero-trust       { order: 5; margin: 0; gap: .7rem 1rem; font-size: .85rem; justify-content: center; }
  .hero-cta         { order: 6; margin: 0; gap: .65rem; }
  .hero-cta .btn-lg { width: 100%; justify-content: center; }
  .hero-cta .btn    { padding: .85rem 1.25rem; font-size: 1rem; }
  .hero-deco        { display: none !important; }

  /* Notebook */
  .notebook { transform: none; }
  .notebook-inner { padding: 1.1rem 1.1rem 1.1rem 2.5rem; }
  .notebook::before { width: 32px; }
  .notebook-eyebrow { font-size: 1.2rem; }
  .notebook-title { font-size: 1.6rem; margin-bottom: .65rem; }

  /* Sections */
  .section { padding: 2.75rem 0; }
  .section-tight { padding: 2rem 0; }
  .section-head { margin-bottom: 2rem; }
  .section h2 { font-size: clamp(1.55rem, 5vw, 1.9rem); }
  .section .lead { font-size: 1rem; }
  .section-eyebrow { font-size: 1.4rem; }
  .pcl-divider { padding: 1.75rem 0; }

  /* Features cards: kill rotations on mobile (cleaner stack) */
  .feature, .feature:nth-child(odd), .feature:nth-child(even) { transform: none; }
  .feature { padding: 1.25rem; }
  .feature .num { font-size: 2rem; }

  /* Steps */
  .steps { gap: 1.5rem; }
  .step h3 { font-size: 1.1rem; }

  /* FAQ */
  .faq details, .faq details:nth-child(odd), .faq details:nth-child(even) { transform: none; }
  .faq details { padding: .85rem 1rem; }
  .faq summary { font-size: .95rem; gap: .65rem; }
  .faq summary::after { font-size: 1.2rem; }

  /* CTA final — no frame on mobile */
  .cta-final {
    padding: 2.25rem 1.25rem;
    margin: 1rem 0 2.5rem;
    border: 0;
  }
  .cta-final::before { display: none; }
  .cta-final .kicker-hand { font-size: 1.4rem; }
  .cta-final h2 { font-size: clamp(1.5rem, 5.5vw, 1.9rem); }
  .cta-final p { font-size: 1rem; }
  .cta-final .btn-xl { padding: .95rem 1.5rem; font-size: 1rem; width: 100%; }

  /* Footer */
  .lp-footer { padding: 1.5rem 0 1.25rem; }
}

/* Very small (≤ 380px) */
@media (max-width: 380px) {
  .lp-wrap { padding: 0 .85rem; }
  .lp-logo { height: 22px; }
  .lp-nav-actions .btn-primary { padding: .5rem .7rem; font-size: .78rem; }
  .lp-lang a { padding: .15rem .4rem; font-size: .68rem; }
  .hero h1 { font-size: 1.55rem; }
  .hero-cta .btn { font-size: .95rem; padding: .8rem 1rem; }
  .notebook-inner { padding: 1rem 1rem 1rem 2.1rem; }
  .notebook::before { width: 26px; }
  .feature { padding: 1.1rem; }
  .cta-final { padding: 2.25rem 1.25rem; }
}