/* Luba landing. Pages are generated by scripts/luba/build.mjs. Same layout as
   the Cotizy landing (public/cotizy/assets/site.css), with Luba's colors and
   fonts: a dark band with the icon's green as a glow behind the phones, like
   Easy Thermal Print (orange) and Cotizy (blue), so the three look like one
   family (Luis, 2026-10-21; the icon's green over large areas tired the eye).
   The app's flour and coffee in the middle, Bricolage for titles and
   Atkinson for text. No text in capitals, as in the app. */

@font-face { font-family: "Atkinson"; src: url(fonts/atkinson-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url(fonts/atkinson-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url(fonts/bricolage-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url(fonts/bricolage-800.woff2) format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --band: #17161A;
  --band-2: #211F25;
  --band-line: rgba(255, 255, 255, .14);
  --glow: rgba(34, 197, 94, .30);
  --mark: #0E9E45;
  --bright: #3DCB74;
  --on-band: #FFFFFF;
  --on-band-muted: rgba(255, 255, 255, .86);
  --ink: #2B231D;
  --paper: #FBF8F3;
  --paper-2: #F3EEE6;
  --card: #FFFFFF;
  --line: #EAE3D9;
  --muted: #6B6058;
  --leaf: #15803D;
  --leaf-soft: #DCEFE2;
  --radius: 20px;
  --gutter: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 "Atkinson", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, .brand, .plan-price, .ticket-title, .steps li::before { font-family: "Bricolage", "Atkinson", system-ui, sans-serif; }
h1, h2, h3 { margin: 0; line-height: 1.1; letter-spacing: -.02em; font-weight: 800; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--bright); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; top: 16px; inset-inline-start: 16px; z-index: 10; background: var(--card); padding: 8px 14px; border-radius: 8px; transform: translateY(-300%); }
.skip:focus { transform: none; }

.ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.bar { width: 44px; height: 6px; border-radius: 3px; background: var(--mark); margin-bottom: 18px; }
.eyebrow { font-size: 15px; font-weight: 700; color: var(--leaf); margin-bottom: 10px; }
.section { padding: 88px 0; }
.section.flush { padding-top: 0; }
.section-head { max-width: 680px; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(30px, 4.2vw, 44px); }
.section-head p { margin-top: 16px; color: var(--muted); font-size: 18px; }

/* Header + hero share the dark band, with the green glow behind the phones */
.band { background: radial-gradient(55% 65% at 78% 45%, var(--glow), transparent 70%), var(--band); color: var(--on-band); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 18px; }
.brand { white-space: nowrap; display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 800; font-size: 22px; letter-spacing: -.01em; }
.brand img { width: 38px; height: 38px; border-radius: 10px; }
.top nav { display: flex; align-items: center; gap: 20px; font-size: 15px; font-weight: 700; }
.top nav a { text-decoration: none; color: var(--on-band-muted); }
.top nav a:hover { color: var(--on-band); }
.top nav .btn-sm { color: var(--ink); background: var(--on-band); padding: 8px 16px; border-radius: 999px; }
.top nav .btn-sm:hover { color: var(--ink); background: var(--paper); }
.langs { position: relative; }
.langs summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px; color: var(--on-band-muted); white-space: nowrap; }
.langs summary::-webkit-details-marker { display: none; }
.langs summary:hover, .langs[open] summary { color: var(--on-band); }
.langs summary .ico { width: 18px; height: 18px; }
.langs ul { position: absolute; top: calc(100% + 12px); inset-inline-end: 0; z-index: 20; min-width: 200px; margin: 0; padding: 8px; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 48px -16px rgba(43, 35, 29, .35); }
.top nav .langs a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--ink); }
.top nav .langs a:hover { background: var(--paper-2); }
.top nav .langs a[aria-current] { color: var(--leaf); }
.lang-hint { background: var(--band-2); border-bottom: 1px solid var(--band-line); font-size: 14px; line-height: 1.45; }
.lang-hint .wrap { display: flex; align-items: center; justify-content: center; gap: 8px; padding-top: 6px; padding-bottom: 6px; }
.lang-hint p { color: var(--on-band-muted); }
.lang-hint a { color: var(--bright); font-weight: 700; text-decoration: none; white-space: nowrap; }
.lang-hint a:hover { text-decoration: underline; }
.lang-hint button { flex: none; padding: 2px 8px; border: 0; background: none; color: var(--on-band-muted); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.lang-hint button:hover { color: var(--on-band); }

.hero { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 48px; padding-top: 40px; padding-bottom: 104px; }
.hero .eyebrow { color: var(--bright); }
.hero h1 { font-size: clamp(38px, 5.6vw, 62px); }
.hero .lead { margin-top: 22px; font-size: 19px; color: var(--on-band-muted); max-width: 560px; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 30px; }
.play { display: inline-block; line-height: 0; border-radius: 12px; }
.play img { width: 180px; height: 54px; }
.promise { font-size: 15px; font-weight: 700; color: var(--on-band); }
.promise span { color: var(--bright); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; padding: 0; list-style: none; }
.chips li { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; padding: 8px 14px; border: 1px solid var(--band-line); border-radius: 999px; color: var(--on-band); }
.chips .ico { width: 17px; height: 17px; color: var(--bright); }

.phone { position: relative; width: 100%; max-width: 270px; padding: 9px; border-radius: 42px; background: #0C0B10; box-shadow: 0 0 0 1px rgba(255, 255, 255, .09) inset, 0 40px 70px -30px rgba(0, 0, 0, .55); }
.phone img { width: 100%; aspect-ratio: 600 / 1300; border-radius: 33px; background: var(--paper); }
.hero-shots { position: relative; display: flex; justify-content: center; min-height: 560px; }
.hero-shots .phone:first-child { z-index: 2; margin-inline-end: 120px; }
.hero-shots .phone:last-child { position: absolute; top: 56px; inset-inline-start: 50%; margin-inline-start: -20px; transform: rotate(4deg); opacity: .97; }

/* Features */
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.card .tile { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--leaf-soft); color: var(--leaf); margin-bottom: 18px; }
.card h3 { font-size: 19px; letter-spacing: -.01em; }
.card p { margin-top: 8px; font-size: 15px; color: var(--muted); }

/* Screens */
.alt { background: var(--paper-2); }
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; justify-items: center; }
.shots figure { margin: 0; width: 100%; max-width: 270px; }
.shots figcaption { margin-top: 16px; text-align: center; font-weight: 700; font-size: 16px; }

/* Steps */
.steps-wrap { display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: center; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 28px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 56px 1fr; gap: 18px; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--band); color: var(--bright); font-weight: 800; font-size: 22px; }
.steps h3 { font-size: 21px; margin-top: 4px; }
.steps p { margin-top: 6px; color: var(--muted); }
.steps-wrap .phone { max-width: 250px; }

/* What it does and doesn't, printed as a receipt */
.compat { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.compat .section-head { margin-bottom: 0; }
.compat .note { margin-top: 24px; padding: 18px 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); font-size: 16px; }
.compat .note a { font-weight: 700; color: var(--leaf); }
.ticket-shadow { filter: drop-shadow(0 18px 30px rgba(43, 35, 29, .10)); }
.ticket { position: relative; background: var(--card); padding: 30px 28px 26px; margin-bottom: 10px; font-size: 15px; }
.ticket::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M0 0h16L8 10z' fill='%23fff'/%3E%3C/svg%3E") repeat-x; }
.ticket-title { text-align: center; font-weight: 800; font-size: 22px; letter-spacing: -.01em; }
.ticket-sub { text-align: center; color: var(--muted); font-size: 14px; margin-top: 2px; }
.ticket dl { margin: 18px 0 0; border-top: 2px dashed #D9CFC3; }
.ticket dl div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 12px 0; border-bottom: 2px dashed #D9CFC3; }
.ticket dt { font-weight: 700; }
.ticket dd { margin: 0; }
.ticket dd.no { color: #9A3F10; }

/* Pricing */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 900px; }
.plan { border-radius: 24px; padding: 32px; background: var(--card); border: 1px solid var(--line); }
.plan.pro { background: var(--band); color: var(--paper); border-color: var(--band); }
.plan-name { font-size: 17px; font-weight: 700; color: var(--leaf); }
.plan.pro .plan-name { color: var(--bright); }
.plan-price { font-size: 40px; font-weight: 800; letter-spacing: -.02em; margin-top: 8px; line-height: 1.1; }
.plan-note { color: var(--muted); font-size: 15px; margin-top: 6px; }
.plan.pro .plan-note { color: #D5CBC1; }
.plan ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.plan li { display: flex; gap: 12px; font-size: 16px; }
.plan li .ico { color: var(--leaf); margin-top: 2px; width: 20px; height: 20px; stroke-width: 2.4; }
.plan.pro li .ico { color: var(--bright); }

/* Privacy */
.privacy { display: flex; gap: 28px; align-items: flex-start; padding: 36px; border-radius: 24px; background: var(--card); border: 1px solid var(--line); }
.privacy .tile { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 18px; background: var(--band); color: var(--bright); }
.privacy .tile .ico { width: 30px; height: 30px; }
.privacy h2 { font-size: clamp(24px, 3vw, 30px); }
.privacy p { margin-top: 10px; color: var(--muted); max-width: 720px; }
.privacy a { color: var(--leaf); font-weight: 700; }

/* FAQ */
.faq { max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-weight: 700; font-size: 19px; line-height: 1.35; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--paper-2); font-size: 22px; font-weight: 400; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 24px; padding-inline-end: 52px; color: var(--muted); }

/* Closing CTA + footer */
.closing { text-align: center; padding-top: 88px; padding-bottom: 88px; }
.closing h2 { font-size: clamp(30px, 4.4vw, 46px); }
.closing p { margin-top: 14px; color: var(--on-band-muted); font-size: 18px; }
.closing .cta { justify-content: center; }
.foot { padding-top: 36px; padding-bottom: 44px; border-top: 1px solid var(--band-line); font-size: 14px; color: var(--on-band-muted); }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot a { color: var(--on-band); text-decoration: none; font-weight: 700; }
.foot a:hover { text-decoration: underline; }
.foot-langs { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; }
.foot .foot-langs a { font-weight: 400; color: var(--on-band-muted); }
.foot .foot-langs a[aria-current] { color: var(--on-band); font-weight: 700; }
.foot .legal { margin-top: 18px; font-size: 13px; }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; padding-top: 24px; gap: 40px; }
  .grid { grid-template-columns: repeat(2, 1fr); }
  .compat { grid-template-columns: 1fr; gap: 36px; }
  .steps-wrap { grid-template-columns: 1fr; }
  .steps-wrap .phone { display: none; }
}
@media (max-width: 720px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .section { padding: 64px 0; }
  .top nav .hide-sm { display: none; }
  .hero .lead { font-size: 17px; }
  .hero-shots { min-height: 0; }
  .hero-shots .phone:first-child { margin-inline-end: 0; max-width: 240px; }
  .hero-shots .phone:last-child { display: none; }
  .grid { grid-template-columns: 1fr; gap: 12px; }
  .card { display: grid; grid-template-columns: 48px 1fr; column-gap: 16px; padding: 20px; }
  .card .tile { margin: 0; grid-row: span 2; }
  .card p { margin-top: 4px; }
  /* A contained horizontal scroller, the page itself never scrolls sideways. */
  .shots { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; }
  .shots figure { flex: 0 0 72%; scroll-snap-align: center; }
  .ticket { padding: 24px 18px 20px; }
  .ticket dl div { grid-template-columns: 1fr; gap: 2px; }
  .plans { grid-template-columns: 1fr; }
  .plan { padding: 26px 22px; }
  .privacy { flex-direction: column; padding: 26px 22px; gap: 18px; }
  .faq summary { font-size: 17px; }
  .faq details p { padding-inline-end: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .faq summary::after { transition: none; }
}