/* lucii.css — official brand palette (lucii logo.ai page 3 / palette_couleur.svg;
   docs/brand.md in the app repo). Bordeaux #6c3328 · orange #d56f1b =
   rgba(213,111,27,x) · near-black #0f0f0f · near-white #f5f5f5. Self-contained:
   no external requests, no webfonts. (--amber is a historical var name; it
   holds the brand orange.) */
:root{
  --bg:#f5f5f5; --surface:#ffffff; --text:#0f0f0f; --muted:#5f5f5f;
  --accent:#6c3328; --accent-strong:#52251c;
  --border:#e2e2e2; --border-soft:#ebebeb;
  --amber:#d56f1b;
  --glow:rgba(213,111,27,.16);
  --shadow-sm:0 1px 2px rgba(15,15,15,.05),0 2px 10px rgba(15,15,15,.06);
  --shadow-md:0 2px 4px rgba(15,15,15,.05),0 14px 34px -10px rgba(15,15,15,.20);
  --maxw:68ch; --radius:16px; --radius-lg:22px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,
         "Noto Sans","Noto Sans Arabic","Segoe UI Arabic",sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#0f0f0f; --surface:#1b1b1b; --text:#f5f5f5; --muted:#b3b3b3;
         --accent:#d56f1b; --accent-strong:#e58a3f;
         --border:#2e2e2e; --border-soft:#232323;
         --glow:rgba(213,111,27,.09);
         --shadow-sm:0 1px 2px rgba(0,0,0,.35),0 2px 10px rgba(0,0,0,.30);
         --shadow-md:0 2px 6px rgba(0,0,0,.35),0 16px 40px -10px rgba(0,0,0,.55); }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;color:var(--text);font-family:var(--font);
  line-height:1.65;font-size:1.05rem;text-underline-offset:.15em;
  background:radial-gradient(120ch 48ch at 50% -8ch,var(--glow),transparent 70%) no-repeat,var(--bg)}
img{max-width:100%;height:auto}
a{color:var(--accent);text-decoration-thickness:.08em}
a:hover{color:var(--accent-strong)}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px;border-radius:6px}
::selection{background:rgba(213,111,27,.35)}
.skip{position:absolute;inset-inline-start:-999px}
.skip:focus{position:static}

/* layout */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:1.15rem}
main{padding-block:1.2rem 3.5rem}
h1{font-size:clamp(2.05rem,5.2vw + .7rem,3rem);line-height:1.08;font-weight:800;
  letter-spacing:-.025em;margin-block:.25em .35em}
h2{font-size:clamp(1.22rem,1vw + 1.05rem,1.45rem);font-weight:700;letter-spacing:-.015em;
  margin-block:1.9em .45em}
h1,h2,h3{color:var(--text)}
p,li{max-width:65ch}
hr{border:0;border-top:1px solid var(--border-soft);margin-block:2rem}
small,.muted{color:var(--muted)}

/* header — slim, sticky, frosted */
.site-header{position:sticky;top:0;z-index:20;background:var(--bg);
  border-block-end:1px solid var(--border-soft)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .site-header{background:rgba(245,245,245,.75);
    -webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6)}
  @media (prefers-color-scheme:dark){.site-header{background:rgba(15,15,15,.72)}}
}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .9rem;
  padding-block:.6rem}
.brand{display:inline-flex;align-items:center;gap:.55rem;font-weight:800;
  letter-spacing:-.02em;color:var(--text);text-decoration:none;font-size:1.14rem}
.brand img{width:30px;height:30px}
nav.main{display:flex;flex-wrap:wrap;gap:.1rem;margin-inline-start:auto}
nav.main a{color:var(--text);text-decoration:none;padding:.34rem .55rem;font-size:.92rem;
  font-weight:500;border-radius:999px;transition:background .15s ease,color .15s ease}
@media (min-width:640px){
  nav.main a{padding:.4rem .72rem;font-size:.97rem}
}
nav.main a:hover{color:var(--accent);background:rgba(213,111,27,.12)}
nav.main a[aria-current="page"]{color:var(--accent);background:rgba(213,111,27,.15);font-weight:650}

/* language switcher — chip bar under the header */
.langbar{border-block-end:1px solid var(--border-soft)}
.langs{display:flex;gap:.35rem;font-size:.9rem;padding-block:.55rem;
  overflow-x:auto;scrollbar-width:none}
.langs::-webkit-scrollbar{display:none}
.langs a{color:var(--muted);text-decoration:none;white-space:nowrap;
  padding:.26rem .72rem;border-radius:999px;border:1px solid transparent;
  transition:background .15s ease,color .15s ease}
.langs a:hover{color:var(--accent);background:rgba(213,111,27,.10)}
.langs a[aria-current="true"]{color:var(--accent);font-weight:650;
  background:rgba(213,111,27,.13);border-color:rgba(213,111,27,.40)}
[lang]{unicode-bidi:isolate}

/* hero */
.hero{padding-block:2rem .4rem}
.hero .lede{font-size:clamp(1.08rem,.9vw + .95rem,1.24rem);color:var(--muted);max-width:58ch}
.wordmark{width:min(330px,76%);height:auto;margin-block:.5rem .9rem;
  filter:drop-shadow(0 6px 22px rgba(15,15,15,.20))}
@media (prefers-color-scheme:dark){
  .wordmark{filter:drop-shadow(0 8px 26px rgba(0,0,0,.55))}
}

/* feature cards */
.features{list-style:none;padding:0;margin:2rem 0;display:grid;gap:.85rem}
.features li{display:flex;gap:.9rem;align-items:flex-start;max-width:none;
  background:var(--surface);border:1px solid var(--border-soft);
  border-radius:var(--radius);padding:1rem 1.05rem;box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease}
.features li:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.features b{color:var(--accent)}
.ficon{flex:none;display:grid;place-items:center;width:42px;height:42px;
  border-radius:13px;background:rgba(213,111,27,.14);color:var(--accent)}
/* display:block — Safari baseline-aligns inline SVG, nudging it off-center */
.ficon svg{display:block;width:22px;height:22px}

/* how it works — the screenshot carousel: five raw app screenshots, one per
   slide, its caption below it. Replaces the parchment panorama strip
   (retired 2026-07-12 — the baked-in cream background clashed with dark
   mode); every color here comes from the theme variables, so the slides sit
   naturally on both schemes. ONE slide visible at a time (ratified
   2026-07-12 — no neighbor peek): every slide is the full track width, so
   the neighbors sit exactly one viewport away, and the image centers inside
   its slide at --slide-w (which also gives its shadow room — the track's
   overflow clip never touches it). Base layer is JS-free: the track is an
   x-mandatory scroll-snap scroller (scrollbar hidden, only the x axis
   overflows so vertical touch swipes still scroll the page) and the numbered
   dots are plain fragment anchors into it. assets/carousel.js unhides the
   arrows, adds the auto-advance tempo and keeps the active dot in sync.
   --slide-w lives on .carousel: the figure width AND the arrow positions
   derive from it. */
.how-it-works{margin-block:2rem 0}
.carousel{--slide-w:min(280px,72vw);position:relative;margin-block-start:1.2rem}
.car-track{list-style:none;display:flex;gap:0;padding:0;margin:0 auto;
  width:min(42rem,100%);
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
  scrollbar-width:none}
.car-track::-webkit-scrollbar{display:none}
/* scroll-margin: the no-JS dot anchors vertically reveal the jumped-to slide
   clear of the sticky header (vertical axis only — block-start) */
.car-slide{flex:none;width:100%;scroll-snap-align:center;max-width:none;
  scroll-margin-block-start:5.5rem}
.car-slide figure{margin:0;width:var(--slide-w);margin-inline:auto}
.car-slide img{display:block;width:100%;height:auto;border-radius:var(--radius-lg);
  border:1px solid var(--border);box-shadow:var(--shadow-md);background:var(--surface)}
.car-slide figcaption{color:var(--text);font-size:.92rem;line-height:1.45;
  text-align:center;padding:.65rem .4rem 0;text-wrap:balance}
/* prev/next arrows — ship [hidden], carousel.js reveals them. Vertically
   centered on the image (its height = width × 1434/660 ≈ 2.173 → half is
   1.086), horizontally straddling the centered slide's edges, clamped so
   they never leave the viewport on narrow screens. display:grid would
   override the hidden attribute's display:none — restore it explicitly. */
.car-arrow{position:absolute;top:calc(var(--slide-w)*1.086);transform:translateY(-50%);
  z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;
  border-radius:999px;border:1px solid var(--border);cursor:pointer;
  background:var(--surface);color:var(--accent);box-shadow:var(--shadow-sm);
  transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.car-arrow[hidden]{display:none}
.car-arrow:hover{color:var(--accent-strong);background:rgba(213,111,27,.10);
  box-shadow:var(--shadow-md)}
.car-arrow svg{width:22px;height:22px}
.car-prev{inset-inline-start:max(.25rem,calc(50% - var(--slide-w)/2 - 22px))}
.car-next{inset-inline-end:max(.25rem,calc(50% - var(--slide-w)/2 - 22px))}
/* numbered dot anchors — ≥44px tap targets around small visual chips;
   [aria-current] is the JS-painted "you are here" */
.car-dots{display:flex;justify-content:center;gap:.15rem;margin-block-start:.35rem}
.car-dots a{display:grid;place-items:center;min-width:44px;min-height:44px;
  text-decoration:none;color:var(--muted);font-size:.85rem;font-weight:650;
  border-radius:999px}
.car-dots a:hover{color:var(--accent);background:rgba(213,111,27,.10)}
.car-dots a[aria-current]{color:var(--accent);background:rgba(213,111,27,.15)}
@media (min-width:900px){
  .carousel{--slide-w:300px}
}

/* callout (privacy line) */
.callout{background:linear-gradient(0deg,rgba(213,111,27,.07),rgba(213,111,27,.07)),var(--surface);
  border:1px solid var(--border-soft);border-inline-start:4px solid var(--amber);
  border-radius:var(--radius);padding:1rem 1.15rem;margin-block:1.6rem;box-shadow:var(--shadow-sm)}

/* store badges */
.store{display:flex;flex-wrap:wrap;gap:.75rem;margin-block:1.2rem;align-items:center}
.store a{display:inline-flex;border-radius:11px;
  transition:transform .18s ease,filter .18s ease}
.store a:hover{transform:translateY(-2px);filter:drop-shadow(0 8px 18px rgba(15,15,15,.25))}
.store img{height:50px;width:auto}

/* tables (privacy coordinate-flow) */
.table-scroll{overflow-x:auto;margin-block:1.2rem;background:var(--surface);
  border:1px solid var(--border-soft);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:.95rem;min-width:36rem}
th,td{padding:.68rem .85rem;text-align:start;vertical-align:top;
  border-block-start:1px solid var(--border-soft)}
thead th{border-block-start:0;background:rgba(213,111,27,.10);color:var(--accent);
  font-size:.84rem;letter-spacing:.05em;text-transform:uppercase}
tbody tr:nth-child(even){background:rgba(213,111,27,.045)}

/* buttons */
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;
  padding:.6rem 1.2rem;border-radius:999px;font-weight:650;
  transition:transform .18s ease,background .15s ease}
.btn:hover{background:var(--accent-strong);color:#fff;transform:translateY(-1px)}

/* language banner (progressive enhancement) */
#lang-banner{display:none;background:var(--surface);border-block-end:1px solid var(--border-soft)}
#lang-banner .wrap{display:flex;gap:.8rem;align-items:center;justify-content:center;
  padding-block:.55rem;font-size:.95rem;flex-wrap:wrap}
#lang-banner button{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;
  text-decoration:underline}

/* footer */
.site-footer{border-block-start:1px solid var(--border-soft);color:var(--muted);
  font-size:.92rem;margin-block-start:1rem}
.site-footer .wrap{padding-block:1.8rem 2.4rem;display:grid;gap:.8rem}
.site-footer nav{display:flex;flex-wrap:wrap;gap:.4rem 1rem}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--accent)}
.site-footer .langs{padding-block:.1rem}

/* home landing — centered presentation, feature cards in one middle-aligned row */
main.home{text-align:center}
main.home .hero .lede,main.home .callout,main.home p{margin-inline:auto}
main.home .features li{text-align:start}
main.home .store{justify-content:center}
@media (min-width:640px){
  main{padding-block:1.8rem 4rem}
  .features{grid-template-columns:1fr 1fr}
  .store img{height:52px}
}
@media (min-width:900px){
  main.home{max-width:64rem}
  main.home .features{grid-template-columns:repeat(3,1fr);gap:1rem;
    width:min(58rem,100%);margin-inline:auto}
  main.home .features li{flex-direction:column;align-items:center;text-align:center;
    gap:.85rem;padding:1.5rem 1.15rem}
  main.home .callout{max-width:60ch}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
  .features li:hover,.store a:hover,.btn:hover{transform:none}
}