/* Lengolo public site — loaded only on marketing, terms, privacy and install pages. */

.site{background:#fff}
.site-header{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 16px;background:var(--blue);color:#fff;
  border-bottom:3px solid var(--yellow);
}
.site-header .logo{font-family:var(--font-heading);font-size:17px;line-height:1.05}
.site-header .logo em{
  display:block;font-style:normal;font-size:8px;letter-spacing:.16em;
  text-transform:uppercase;opacity:.82;margin-top:2px;
}
.site-nav{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:700}
.site-nav a{color:#fff;text-decoration:none}
.site-nav a.quiet{opacity:.85;font-weight:600}
.site-cta{background:var(--yellow);color:var(--blue-ink);padding:8px 13px;border-radius:999px}
.site-main{max-width:560px;margin:0 auto}

/* hero */
.hero-band{
  padding:24px 18px 26px;background:#fff;
  display:grid;grid-template-columns:1fr;gap:16px;
}
.kicker{
  margin:0 0 9px;font-size:9px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue);
}
.hero-band h1{font-size:27px;line-height:1.12;letter-spacing:-.025em;color:var(--blue-ink);margin:0}
.lead{margin:11px 0 0;font-size:13.5px;line-height:1.55;color:#33424d}
.cta-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.btn.big{padding:11px 18px;font-size:13px;font-weight:700}
.promise{margin:11px 0 0;font-size:10.5px;color:var(--muted)}

/* the letter */
.letter{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:16px 16px 14px;transform:rotate(-1.4deg);
  box-shadow:0 14px 30px rgba(22,35,46,.12);position:relative;
}
.letter:before{
  content:"";position:absolute;inset:6px;border:1px dashed rgba(29,95,174,.35);
  border-radius:9px;pointer-events:none;
}
.letter .to{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.letter .addr{font-family:var(--font-heading);font-size:14px;line-height:1.45;margin:5px 0 10px;color:var(--ink)}
.letter .fine{
  font-size:9.5px;color:var(--muted);border-top:1px solid var(--line);
  padding-top:8px;display:flex;justify-content:space-between;gap:8px;
}

/* trust strip */
.trust{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.trust div{background:var(--paper);padding:10px 8px;text-align:center}
.trust b{display:block;font-size:11px;color:var(--blue-ink);font-family:var(--font-heading)}
.trust span{font-size:9px;color:var(--muted);line-height:1.35;display:block;margin-top:2px}

/* sections */
.section{padding:24px 18px;border-bottom:1px solid var(--line);scroll-margin-top:62px}
.section.alt{background:var(--paper)}
.section > h2{font-size:16px;color:var(--blue-ink);margin:0 0 4px;letter-spacing:-.01em}
.section > .sub{margin:0 0 14px;font-size:11.5px;color:var(--muted)}
.feature-grid{display:grid;grid-template-columns:1fr;gap:9px}
.feature{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 13px}
.section.alt .feature{background:#fff}
.feature h3{font-size:12.5px;margin:0 0 3px;color:var(--blue-ink)}
.feature p{margin:0;font-size:11.5px;line-height:1.5;color:#3f4c58}

/* pricing */
.plans{display:grid;grid-template-columns:1fr;gap:10px}
.plan{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px;
  display:flex;flex-direction:column;gap:2px;
}
.plan.is-featured{border-color:var(--blue);box-shadow:0 0 0 2px rgba(29,95,174,.12)}
.plan .name{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.plan .price{font-family:var(--font-heading);font-size:24px;color:var(--blue-ink);line-height:1.2;margin-top:4px}
.plan .price small{font-size:11px;font-weight:600;color:var(--muted)}
.plan .what{font-size:11px;color:#3f4c58;margin:2px 0 10px}
.plan .tag{
  align-self:flex-start;background:var(--yellow-chrome);color:var(--blue-ink);
  font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;
}
.plan .btn{align-self:flex-start;margin-top:auto}
.plan-note{margin:12px 0 0;font-size:10.5px;color:var(--muted)}
.plan.plan-wide{
  grid-column:1/-1;display:grid;grid-template-columns:1fr auto;
  align-items:start;gap:2px 12px;
}
.plan.plan-wide .name{grid-column:1;grid-row:1}
.plan.plan-wide .size{grid-column:1;grid-row:2}
.plan.plan-wide .price{grid-column:1;grid-row:3;margin:0 0 6px;text-align:left;font-size:12px;font-weight:800;color:var(--muted)}
.plan.plan-wide .what{grid-column:1;grid-row:4;margin:0}
.plan.plan-wide .letters{grid-column:1;grid-row:5}
.plan.plan-wide .btn{grid-column:2;grid-row:1 / span 5;align-self:center;margin:0}
.letters{
  display:block;font-size:10px;color:var(--muted);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.letters-why{
  margin:14px 0 0;padding:11px 13px;border-radius:11px;
  background:linear-gradient(180deg,#FFFFFF,#FFFDF2);
  border:1px solid #EAD99B;font-size:11px;line-height:1.55;color:#3f4c58;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(60,50,10,.06);
}

/* how it works */
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{
  position:relative;padding:9px 0 9px 32px;border-bottom:1px dashed var(--line);
  font-size:11.5px;line-height:1.5;color:#3f4c58;
}
.steps li:last-child{border-bottom:0}
.steps li:before{
  counter-increment:s;content:counter(s);position:absolute;left:0;top:8px;
  width:21px;height:21px;border-radius:999px;background:var(--blue);color:#fff;
  font-size:10.5px;font-weight:800;display:flex;align-items:center;justify-content:center;
}
.steps b{display:block;color:var(--blue-ink);font-size:12.5px}

/* FAQ */
.faq{margin:0;padding:0}
.faq details{border-bottom:1px solid var(--line);padding:11px 0}
.faq summary{
  cursor:pointer;font-size:12.5px;font-weight:700;color:var(--blue-ink);
  list-style:none;display:flex;justify-content:space-between;gap:10px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-size:15px;color:var(--blue);font-weight:700}
.faq details[open] summary:after{content:"–"}
.faq p{margin:8px 0 0;font-size:11.5px;line-height:1.55;color:#3f4c58}

/* band + footer */
.band{padding:26px 18px;background:var(--yellow-chrome);text-align:center}
.band h2{font-size:18px;color:var(--blue-ink);margin:0 0 4px}
.band p{margin:0 0 14px;font-size:12px;color:#3f4c58}
.site-footer{padding:18px;background:var(--blue);color:#fff;font-size:10px;line-height:1.6}
.site-footer a{color:#fff}
.site-footer .fine{display:block;opacity:.82;margin-top:6px}

@media (min-width:560px){
  .hero-band{grid-template-columns:1.05fr .95fr;align-items:center}
  .feature-grid{grid-template-columns:1fr 1fr}
  .plans{grid-template-columns:repeat(3,1fr)}
}
/* Lengolo public site — loaded only on marketing, terms and privacy pages. */
/* ---------- depth: layered light, no images, no JavaScript ---------- */
.site{
  background:
    radial-gradient(1200px 420px at 18% -8%, rgba(29,95,174,.07), transparent 62%),
    radial-gradient(900px 380px at 92% 4%, rgba(255,193,7,.16), transparent 60%),
    #fff;
}

/* header: a lit surface, not a colour block */
.site-header{
  background:linear-gradient(180deg,#2468BC 0%, #1D5FAE 58%, #1A57A0 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 -1px 0 rgba(0,0,0,.14) inset,
    0 6px 18px rgba(15,37,66,.18);
  border-bottom:3px solid var(--yellow);
}
.site-cta{
  background:linear-gradient(180deg,#FFD34D, #FFC107 62%, #F0B100);
  box-shadow:
    0 1px 0 rgba(255,255,255,.65) inset,
    0 -2px 0 rgba(0,0,0,.10) inset,
    0 4px 10px rgba(15,37,66,.22);
}
.site-cta:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 2px 6px rgba(15,37,66,.2)}

/* hero: soft paper sun behind the letter */
.hero-band{
  position:relative;overflow:hidden;
  background:
    radial-gradient(560px 300px at 84% 12%, rgba(255,193,7,.20), transparent 66%),
    radial-gradient(420px 240px at 8% 92%, rgba(29,95,174,.06), transparent 70%),
    #fff;
}
.hero-band h1{
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}

/* the letter sits above the page */
.letter{
  background:
    linear-gradient(180deg, #FFFDF2, #FFF8D6 70%, #FFF3C4);
  border:1px solid #EAD99B;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 3px rgba(80,60,10,.10),
    0 10px 24px rgba(80,60,10,.14),
    0 26px 48px rgba(80,60,10,.12);
}
.letter:after{
  content:"L";position:absolute;right:14px;top:12px;
  width:28px;height:22px;border:1px dashed rgba(29,95,174,.55);border-radius:2px;
  transform:rotate(7deg);background:rgba(255,255,255,.45);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);font-size:12px;color:var(--blue-ink);
  box-shadow:0 1px 2px rgba(80,60,10,.18);
}

/* trust strip: three little plates */
.trust{background:var(--line);box-shadow:inset 0 1px 0 rgba(0,0,0,.04)}
.trust div{
  background:linear-gradient(180deg,#FFFDF4,#FFF7DE);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

/* sections: a lit edge at the top */
.section{
  background:linear-gradient(180deg,#fff, #FEFCF2 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.section.alt{
  background:linear-gradient(180deg,#FFFDF3, #FFF8DC 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(0,0,0,.03);
}

/* cards lift off the page */
.feature,.plan{
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 1px 2px rgba(60,50,10,.06),
    0 6px 14px rgba(60,50,10,.07);
}
.feature{transition:box-shadow .18s ease, transform .18s ease}
.feature:hover{
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 4px rgba(60,50,10,.08),0 12px 24px rgba(60,50,10,.10);
}

/* pricing: the middle plan is raised */
.plan{transition:box-shadow .18s ease, transform .18s ease}
.plan .price{text-shadow:0 1px 0 rgba(255,255,255,.8)}
.plan.is-featured{
  transform:translateY(-3px);
  border-color:#1D5FAE;
  box-shadow:
    0 1px 0 rgba(255,255,255,.95) inset,
    0 0 0 1px rgba(29,95,174,.18),
    0 10px 22px rgba(29,95,174,.16),
    0 26px 46px rgba(29,95,174,.12);
}
.plan.is-featured .tag{
  background:linear-gradient(180deg,#FFD34D,#FFC107);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 2px 6px rgba(15,37,66,.18);
}



/* FAQ rows lift slightly when opened */
.faq details[open]{
  background:linear-gradient(180deg,#FFFFFF,#FFFDF4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}

/* closing band: a lit shelf */
.band{
  background:
    radial-gradient(520px 200px at 50% 0%, rgba(255,255,255,.55), transparent 70%),
    linear-gradient(180deg,#FFE79C,#FFD86B 70%,#F8C94E);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -2px 0 rgba(0,0,0,.05);
}
.band .btn.primary{box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 8px 20px rgba(80,50,10,.25)}

/* footer: recessed */
.site-footer{
  background:linear-gradient(180deg,#1A57A0,#143F73);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}

@media (prefers-reduced-motion: reduce){
  .feature,.plan,.btn{transition:none}
  .feature:hover,.plan.is-featured{transform:none}
}

/* sticky header should not cover an anchor target */
.section{scroll-margin-top:62px}

/* room for letters, shown as a figure rather than a promise */
.letters{
  display:block;font-size:10px;color:var(--muted);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
}
.letters-why{
  margin:14px 0 0;padding:11px 13px;border-radius:11px;
  background:linear-gradient(180deg,#FFFFFF,#FFFDF2);
  border:1px solid #EAD99B;font-size:11px;line-height:1.55;color:#3f4c58;
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(60,50,10,.06);
}

/* the business tier spans the row, because it is a different purchase */
.plan.plan-wide{
  grid-column:1/-1;display:grid;grid-template-columns:1fr auto;
  align-items:start;gap:2px 12px;
}
.plan.plan-wide .name{grid-column:1;grid-row:1}
.plan.plan-wide .size{grid-column:1;grid-row:2}
.plan.plan-wide .price{grid-column:1;grid-row:3;margin:0 0 6px;text-align:left;font-size:12px;font-weight:800;color:var(--muted)}
.plan.plan-wide .what{grid-column:1;grid-row:4;margin:0}
.plan.plan-wide .letters{grid-column:1;grid-row:5}
.plan.plan-wide .btn{grid-column:2;grid-row:1 / span 5;align-self:center;margin:0}

/* ---------- 3D: a vanishing point, and layers that sit in it ----------
   Technique after freefrontend.com/css-3d-transforms: perspective on the
   parent, preserve-3d on the object, translateZ on the layers. No JavaScript,
   no pointer tracking — hover only, and only where hovering exists. */

.scene{perspective:900px;perspective-origin:60% 40%}

.letter{
  transform-style:preserve-3d;
  transform:rotateX(5deg) rotateY(-9deg) translateZ(0);
  transition:transform .5s cubic-bezier(.2,.9,.3,1), box-shadow .4s ease;
  will-change:transform;
}
.letter .to,
.letter .addr,
.letter .fine{transform:translateZ(10px)}
.letter .addr{transform:translateZ(20px)}
.letter:after{transform:rotate(7deg) translateZ(40px)}

@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .letter:hover{
    transform:rotateX(2deg) rotateY(-3deg) translateY(-8px);
    box-shadow:
      0 1px 0 rgba(255,255,255,.95) inset,
      0 3px 5px rgba(80,60,10,.12),
      0 16px 30px rgba(80,60,10,.18),
      0 38px 60px rgba(80,60,10,.14);
  }
  .letter:hover .addr{transform:translateZ(34px)}
  .letter:hover:after{transform:rotate(9deg) translateZ(58px)}
  .letter:hover .fine{transform:translateZ(20px)}

  /* cards lean towards the reader, very slightly */
  .feature:hover{transform:perspective(760px) rotateX(2.2deg) rotateY(-1.2deg) translateY(-2px)}
  .plan.is-featured:hover{transform:perspective(900px) rotateX(1.6deg) translateY(-5px)}
  .trust div:hover{transform:translateY(-1px)}
}

/* small screens and reduced motion: flat, because a tilted card on a narrow
   screen just looks broken and costs compositing */
@media (prefers-reduced-motion:reduce){
  .scene{perspective:none}
  .letter,
  .letter .to,
  .letter .addr,
  .letter .fine{transform:none}
  .letter:after{transform:rotate(7deg)}
}

/* spacing: the tilted card looks further from the copy than it measures */
.hero-band .letter{margin:-3px 0 4px}

/* ---------- what the space holds: documents, not megabytes ---------- */
.plan{position:relative;padding-right:124px;min-height:158px}
.plan .name,.plan .price,.plan .what,.plan .letters,.plan .btn{position:relative;z-index:1}

.plan-art{position:absolute;right:18px;top:16px;width:88px;height:104px;pointer-events:none;z-index:0;overflow:visible}
.chip{
  position:absolute;right:0;width:58px;height:32px;border-radius:3px;
  background:#fff;border:1px solid var(--line);
  /* isometric slab: rotate + skew, thickness drawn by the pseudo-faces */
  transform:rotate(-16deg) skew(10deg);
  box-shadow:-3px 3px 0 rgba(255,255,255,.6), 0 3px 6px rgba(60,50,10,.14);
  font:800 7.5px/1 var(--font-ui);letter-spacing:.06em;color:#42525E;
  display:flex;align-items:center;justify-content:center;
}
.chip b{font-weight:800;transform:skew(-10deg) rotate(16deg)}
.chip:before{                   /* left face */
  content:"";position:absolute;left:-5px;top:2px;width:5px;height:100%;
  background:currentColor;opacity:.30;transform:skewY(-40deg);border-radius:2px 0 0 2px;
}
.chip:after{                    /* bottom face */
  content:"";position:absolute;bottom:-5px;left:-2px;width:100%;height:5px;
  background:currentColor;opacity:.22;transform:skewX(-40deg);border-radius:0 0 2px 2px;
}
.chip-pdf{color:#B3123F}
.chip-docx{color:#1D5FAE}
.chip-png{color:#0A7D4F}
.chip-xlsx{color:#8A6D1E}
.chip-zip{color:#6B5A66}

.plan-art .chip:nth-of-type(1){top:0;right:0;transform:rotate(-10deg) skew(10deg)}
.plan-art .chip:nth-of-type(2){top:18px;right:12px;transform:rotate(-16deg) skew(10deg)}
.plan-art .chip:nth-of-type(3){top:36px;right:0;transform:rotate(-22deg) skew(10deg)}
.plan-art .chip:nth-of-type(4){top:54px;right:14px;transform:rotate(-28deg) skew(10deg)}
.plan-art .chip:nth-of-type(5){top:70px;right:4px;transform:rotate(-34deg) skew(10deg)}\n.plan-art .chip:nth-of-type(6){top:74px;right:10px;transform:rotate(-3deg)}

/* the business box is locked: a padlock reads at 16 px, a key does not */
.lock{
  position:absolute;right:4px;top:-16px;width:15px;height:12px;display:block;
  background:#2C3D5C;border-radius:2px;
}
.lock:before{                    /* shackle */
  content:"";position:absolute;left:2.5px;top:-7px;width:10px;height:8px;
  border:2px solid #2C3D5C;border-bottom:0;border-radius:5px 5px 0 0;
  background:transparent;box-sizing:border-box;
}
.lock:after{                     /* keyhole */
  content:"";position:absolute;left:6px;top:4px;width:3px;height:4px;
  border-radius:1px;background:#FFFDF2;
}

.plan-wide .plan-art{position:static;width:auto;height:auto;display:flex;gap:6px;align-items:center;grid-column:1/-1}
.plan-wide .chip{position:static;width:auto;height:22px;padding:0 7px;font-size:7.5px;transform:none;align-items:center;justify-content:center;letter-spacing:.04em}
.plan-wide .chip:before{display:none}
.plan-wide .lock{position:relative;display:inline-block;width:15px;height:12px;margin-right:6px;top:4px;flex:0 0 auto}
.plan-wide{padding-right:14px}

@media (max-width:359px){
  .plan{padding-right:0;min-height:0}
  .plan-art{display:none}
}

/* ---------- storage is the headline; money is the footnote ---------- */
.plan .size{
  display:block;margin:2px 0 1px;
  font-family:var(--font-heading);font-size:34px;line-height:1.05;
  letter-spacing:-.02em;color:#123B6B;
  /* extruded 3D lettering: stacked shadows, no extra DOM */
  text-shadow:
    1px 1px 0 #FFFFFF,
    2px 2px 0 #E6D9A8,
    3px 3px 0 #D8C784,
    4px 5px 8px rgba(80,60,10,.28);
}
.plan .size small{font-size:15px;font-weight:700;letter-spacing:.04em;text-shadow:none;color:#3E4E63}
.plan .price{
  font-family:var(--font-ui);font-size:12px;font-weight:800;color:var(--muted);
  margin:0 0 8px;letter-spacing:.02em;
}
.plan .price small{font-size:10px;font-weight:600}
.plan.is-featured .size{color:#0F2547}
.plan.plan-wide .size{font-size:30px}
@media (max-width:359px){
  .plan .size{font-size:30px}
}

/* the analogy line: smaller than the letters figure, same tabular rhythm */
.books{
  display:block;margin-top:1px;font-size:9.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;letter-spacing:.03em;
}