/* Lectio brand: cream ground, ink text, orange accent — matches the app's tokens. */
:root {
  --bg: #FAF3E8; --ink: #221D12; --orange: #FF5A1F; --muted: #6B6252;
  --card: #FFFFFF; --line: #221D12;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 17px; line-height: 1.65;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 32px 24px 80px; }
header.site { display: flex; align-items: center; gap: 12px; padding: 24px 0 8px; }
.mark { width: 40px; height: 40px; border: 2px solid var(--line); border-radius: 12px;
        background: var(--ink); display: grid; place-items: center; flex: none; }
.mark svg { display: block; }
.brand { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -.01em; }
nav.lang { margin-left: auto; font-size: 14px; }
nav.lang { display: flex; align-items: center; gap: 4px; border: 2px solid var(--line);
            border-radius: 99px; padding: 4px; }
nav.lang .cur, nav.lang a { font-size: 13px; font-weight: 700; line-height: 1;
            padding: 8px 12px; border-radius: 99px; text-decoration: none; }
nav.lang .cur { background: var(--ink); color: #fff; }      /* where you are */
nav.lang a { color: var(--muted); }                          /* where you can go */
nav.lang a:hover { background: rgba(34,29,18,.08); color: var(--ink); }
h1 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 40px;
     line-height: 1.1; letter-spacing: -.02em; margin: 24px 0 8px; }
h2 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 23px;
     margin: 40px 0 12px; }
h3 { font-size: 17px; margin: 24px 0 8px; }
.updated { color: var(--muted); font-size: 15px; margin: 0 0 8px; }
a { color: var(--orange); }
ul { padding-left: 24px; }
li { margin: 8px 0; }
table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; display: block; overflow-x: auto; }
th, td { border: 2px solid var(--line); padding: 8px 12px; text-align: left; vertical-align: top; }
th { background: var(--ink); color: #fff; font-weight: 700; }
.card { background: var(--card); border: 2px solid var(--line); border-radius: 20px;
        padding: 20px; box-shadow: 4px 4px 0 var(--ink); margin: 24px 0; }
footer { margin-top: 56px; padding-top: 20px; border-top: 2px solid var(--line);
         color: var(--muted); font-size: 14px; }
footer a { color: var(--muted); }
@media (max-width: 520px) { h1 { font-size: 31px; } body { font-size: 16px; } }

/* ── Landing page (index.html, en/index.html) — legal pages never use these ── */
.wrap.landing { max-width: 1060px; }
nav.nav { display: flex; gap: 24px; margin-left: 32px; }
nav.nav a { color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 600; }
nav.nav a:hover { color: var(--ink); }
@media (max-width: 720px) { nav.nav { display: none; } }   /* the page is short enough to scroll */

/* Contact — a real form that hands off to the visitor's own mail app. */
.contact { padding: 56px 0; border-top: 2px solid rgba(34,29,18,.12);
           display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: start; }
.cside h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 18px; margin: 0 0 12px; }
.sidelink { display: block; background: #fff; border: 2px solid var(--ink); border-radius: 16px;
            padding: 12px 16px; box-shadow: 4px 4px 0 var(--ink); text-decoration: none;
            color: var(--ink); margin-bottom: 12px; }
.sidelink b { display: block; font-family: 'Bricolage Grotesque', sans-serif; font-size: 16px; }
.sidelink span { font-size: 14px; color: #5A5245; }
.sidelink:hover { background: var(--yellow, #FFD966); }
@media (max-width: 820px) { .contact { grid-template-columns: 1fr; gap: 32px; } }
.contact h2 { font-size: 30px; margin: 0 0 12px; }
.cnote { color: var(--muted); margin: 0 0 20px; max-width: 52ch; }
.cform { display: grid; gap: 12px; max-width: 44ch; margin-bottom: 20px; }
.cform label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.cform input, .cform textarea { font: inherit; font-size: 16px; color: var(--ink);
            background: #fff; border: 2px solid var(--ink); border-radius: 12px;
            padding: 12px; box-shadow: 4px 4px 0 var(--ink); }
.cform textarea { resize: vertical; }
.cform input:focus, .cform textarea:focus { outline: 3px solid var(--orange); outline-offset: 2px; }
.cform button { font: inherit; font-weight: 700; font-size: 16px; cursor: pointer;
            background: var(--orange); color: var(--ink); border: 2px solid var(--ink);
            border-radius: 12px; padding: 12px 20px; box-shadow: 4px 4px 0 var(--ink);
            justify-self: start; }
.cform button:active { transform: translate(2px, 2px); box-shadow: none; }
.tm { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 12px 0 0; }
.hero { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: center; padding: 24px 0 56px; }
.hero h1 { font-size: 56px; line-height: 1.05; margin: 0 0 16px; }
.hero p.sub { font-size: 20px; color: var(--muted); margin: 0 0 24px; max-width: 34ch; }
.badges { display: flex; gap: 12px; flex-wrap: wrap; }
/* Official store badges — Apple's and Google's own artwork, which their brand
   guidelines forbid altering, so these carry no border, background or shadow of
   ours. Google ships its PNG with transparent padding baked in, and — measured
   with canvas — the two locales bake DIFFERENT amounts (tr: 29px top/bottom and
   none at the sides; en: 41px on all four), so one CSS height would have drawn
   the badge at two different sizes depending on language. Both files are cropped
   to their own ink instead, which leaves the artwork untouched and lets a single
   height rule hold. The 12px .badges gap supplies the clear space Google's
   guidelines ask for (a quarter of the badge height). */
.badges { align-items: center; }
.badge { display: inline-flex; text-decoration: none; }
.badge img { display: block; }
.badge-apple img { height: 48px; width: auto; }
/* Measured with sharp at a common plate height: the white content fills 71.5% of
   Google's tr plate but only 58.5% of Apple's, so equal plates draw Google's
   lettering visibly larger. One 4px step down evens the optical weight and still
   satisfies Apple's rule that its badge not be smaller than another store's. */
.badge-play img { height: 44px; width: auto; }
.phone { border: 3px solid var(--ink); border-radius: 34px; overflow: hidden; background: #000;
         box-shadow: 8px 8px 0 var(--ink); width: 100%; }
.phone img { display: block; width: 100%; aspect-ratio: 414 / 900; }
.step { display: grid; grid-template-columns: 1fr 340px; gap: 48px; align-items: center;
        padding: 56px 0; border-top: 2px solid rgba(34,29,18,.12); }
.step.flip > .copy { order: 2; } .step.flip > .shot { order: 1; }
.step.flip { grid-template-columns: 340px 1fr; }
.step .copy { max-width: 44ch; }
.step.flip .copy { margin-left: auto; }
.num { display: inline-block; background: var(--orange); color: var(--ink); border: 2px solid var(--ink);
       border-radius: 99px; width: 34px; height: 34px; line-height: 30px; text-align: center;
       font-weight: 800; margin-bottom: 12px; }
.step h2 { font-size: 34px; margin: 0 0 12px; }
.step p { color: var(--muted); margin: 0 0 16px; }
.step ul { margin: 0; padding-left: 24px; color: var(--muted); }
.step li { margin: 8px 0; }
.ways { display: grid; gap: 12px; margin-top: 16px; }
.way { background: #fff; border: 2px solid var(--ink); border-radius: 16px; padding: 12px 16px;
       box-shadow: 4px 4px 0 var(--ink); cursor: pointer; transition: background .25s, color .25s; }
.way b { font-family: 'Bricolage Grotesque', sans-serif; font-size: 16px; display: block; margin-bottom: 4px; }
.way em { font-style: normal; font-size: 10px; font-weight: 700; background: var(--ink); color: #fff;
          border-radius: 99px; padding: 4px 8px; vertical-align: middle; margin-left: 4px; }
.way span { font-size: 14px; color: var(--muted); line-height: 1.45; }
.way.active { background: var(--orange); color: var(--ink); }
.way.active span { color: var(--ink); }
#step1shot { transition: opacity .3s; }
.chat { display: grid; gap: 8px; margin-top: 16px; }
.bubble { border: 2px solid var(--ink); border-radius: 16px; padding: 12px 16px; font-size: 15px;
          box-shadow: 4px 4px 0 var(--ink); }
.bubble.q { background: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.bubble.a { background: #DFD3F7; justify-self: start; border-bottom-left-radius: 4px; }
.more, .price { padding: 56px 0; border-top: 2px solid rgba(34,29,18,.12); }
.more h2, .price h2 { font-size: 30px; margin: 0; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 24px; }
.feat { border: 2px solid var(--ink); border-radius: 20px; padding: 20px; box-shadow: 4px 4px 0 var(--ink); }
.feat h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 18px; margin: 0 0 8px; }
.feat p { font-size: 15px; color: #5A5245; margin: 0; }
.tag { font-size: 11px; font-weight: 700; background: var(--ink); color: #fff; border-radius: 99px;
       padding: 4px 8px; vertical-align: middle; margin-left: 8px; }
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; max-width: 720px; }
.plan { background: #fff; border: 2px solid var(--ink); border-radius: 20px; padding: 24px;
        box-shadow: 4px 4px 0 var(--ink); }
.plan.pro { background: #FFD966; }
.plan h3 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 22px; margin: 0 0 4px; }
.plan .amt { font-size: 15px; color: #5A5245; margin-bottom: 12px; }
.plan ul { margin: 0; padding-left: 24px; font-size: 15px; }
@media (max-width: 820px) {
  .hero, .step, .step.flip { grid-template-columns: 1fr; gap: 32px; }
  .hero h1 { font-size: 38px; }
  .step.flip > .copy, .step.flip > .shot { order: 0; }
  .grid { grid-template-columns: 1fr 1fr; }
  .plans { grid-template-columns: 1fr; }
  .shot { max-width: 300px; }
}

/* ── Scroll reveal ────────────────────────────────────────────────────────
   Hidden only under .js, and .js is set ONLY after gsap + ScrollTrigger have
   actually parsed (see the landing head). So if either file 404s, fails to
   parse, or is blocked, the class never lands and every block stays visible —
   the page cannot be left blank by a missing animation library. Motion itself
   is GSAP's; CSS only owns the pre-paint hidden state, which is why there is
   no transition here. prefers-reduced-motion is handled in gsap.matchMedia. */
.js .reveal { opacity: 0; }
.js .wclip { display: inline-block; overflow: hidden; vertical-align: bottom; }
.js .w { display: inline-block; will-change: transform; }
.js .step .phone, .js .hero .phone { will-change: transform; }

/* Someone who asked for less motion should not be handed a scrolling animation
   either; the JS arm already skips every tween for them. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }