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

/* ---- Tokens -----------------------------------------------------------
   Same type pairing and green as admin/mobile (brand cohesion), but a
   warm paper background instead of admin's cool grey -- this is the
   public, ledger-and-market side of the brand, not the ops console. */
:root{
  --ink:#17231d;
  --paper:#f7f1e3;
  --paper-deep:#eee2c4;
  --green:#1f7a4d;
  --green-deep:#123f27;
  --amber:#c9862c;
  --muted:#6e6353;
  --line:#e2d5b3;
  --white:#fffdf7;
  --radius:10px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'DM Sans',sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.5;
}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;margin:0;line-height:1.05}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* ---- Buttons ------------------------------------------------------- */
.btn{
  display:inline-block;
  font-weight:600;
  font-size:15px;
  padding:13px 22px;
  border-radius:8px;
  text-decoration:none;
  border:1px solid transparent;
  transition:transform 160ms cubic-bezier(0.23,1,0.32,1), background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
/* Lift only where hover is real (mouse) -- on touch, :hover sticks after a
   tap and would leave the button stuck raised. Press feedback (scale) is
   for every input type: it confirms the button heard you. */
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-1px)}
}
.btn:active{transform:scale(0.97)}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--green-deep)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--green);color:var(--green-deep)}
.btn-block{display:block;text-align:center;width:100%}
.btn-large{font-size:18px;padding:18px 32px}

/* ---- Header ---------------------------------------------------------- */
.site-header{position:sticky;top:0;background:rgba(247,241,227,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);z-index:20}
.header-row{display:flex;align-items:center;justify-content:space-between;padding:16px 24px}
.brand{display:flex;align-items:center;gap:10px;font:600 19px 'Space Grotesk';text-decoration:none;color:var(--ink)}
.brand-mark{width:32px;height:32px;background:var(--green-deep);border-radius:8px;display:grid;place-items:center}
.brand-plus{color:var(--amber)}
.site-nav{display:flex;align-items:center;gap:28px;font-size:15px}
.site-nav a{text-decoration:none;color:var(--muted)}
.site-nav a:hover{color:var(--ink)}
.nav-cta{background:var(--green);color:#fff !important;padding:9px 16px;border-radius:7px;font-weight:600}
.nav-cta:hover{background:var(--green-deep)}
.nav-toggle{display:none;background:none;border:0;font-size:22px;color:var(--ink);cursor:pointer;padding:4px 8px}

/* ---- Hero -------------------------------------------------------------
   The one orchestrated motion moment on the page lives here (chat
   bubbles fading in in sequence) -- nothing else animates on scroll. */
.hero{padding:64px 0 40px}
.hero-row{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.eyebrow-plain{font-size:14px;color:var(--green-deep);font-weight:600;margin:0 0 14px}
.hero-copy h1{font-size:clamp(32px,4.4vw,50px);letter-spacing:-.01em;max-width:15ch}
.hero-lede{margin-top:20px;font-size:17px;color:var(--muted);max-width:46ch}
.hero-actions{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}

.hero-visual{display:flex;justify-content:center}
.phone-mock{
  width:300px;
  background:var(--green-deep);
  border-radius:32px;
  padding:14px 12px 18px;
  box-shadow:0 30px 60px -20px rgba(18,63,39,.45);
}
.phone-notch{width:70px;height:6px;background:rgba(255,255,255,.25);border-radius:4px;margin:0 auto 12px}

/* The phone screen cycles through real screenshots of the app (not
   stylized mockups) -- one per major feature -- so the hero visual
   shows the actual product. Slides are absolutely positioned and
   crossfaded via the .active class, driven by app.js; falls back to
   showing just the first slide, statically, with no JS. */
/* Height matches assets/screenshots/*.png's own aspect ratio (1206x2000
   -- cropped from a raw 1206x2392 device capture, see that crop's own
   note below) at this frame's inner width (300px phone-mock minus its
   12px side padding = 276px) -- object-fit:cover below was previously
   cropping a real chunk off the bottom of every screenshot because a
   flat 460px didn't come close to that ratio. Keep this in sync with
   .phone-mock's width, the mobile override below, and the screenshot
   files' own aspect ratio if any of those change.
   The crop itself (not just this sizing) mattered too: a raw simulator
   capture of a scrollable page ends wherever the bottom tab bar happens
   to be, which can slice straight through whatever card was scrolled
   halfway into view right above it (unreadable half-cut amounts) --
   cropped to end on the last FULLY visible card instead. */
.phone-screen{position:relative;background:var(--paper);border-radius:18px;height:458px;overflow:hidden}
.app-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .5s ease, transform .5s ease;
  pointer-events:none;
}
/* The first slide already carries class="app-slide active" straight
   in the markup, so it renders correctly with zero JS -- no separate
   :first-child fallback needed (an earlier version of this rule kept
   the first slide visible even after JS moved .active elsewhere,
   which stacked two slides on top of each other). */
.app-slide.active{opacity:1;transform:translateY(0);pointer-events:auto}
/* object-position:top so the screenshot's own header/most-informative
   content stays visible even though a real device screenshot's aspect
   ratio doesn't exactly match this frame -- cover crops the bottom,
   never squashes the image. */
.app-slide img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}

.phone-dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
.phone-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3)}
.phone-dot.active{background:#fff}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  /* Fewer and gentler, not zero: keep the crossfade and colour changes,
     drop the movement. */
  .btn,.btn:hover,.btn:active{transform:none}
  .app-slide{transform:none;transition:opacity .3s ease}
}

/* ---- Context statement band -------------------------------------------
   A quiet palate-cleanser between hero and features -- deep green, pale
   text, no card, no button. The one deliberate color inversion on the
   page besides the ledger section below. */
.context{background:var(--green-deep);padding:52px 0}
.context-row{max-width:820px;margin:0 auto}
.context-text{color:#e7f1ea;font-size:19px;line-height:1.6;text-align:center}

/* ---- Accessibility / "simple to start, complete to grow" -------------
   Two plain columns, not cards -- this section's whole point is that
   nothing here is complicated, so it shouldn't look more elaborate than
   the features section right after it. Left column carries the brand
   green (the same color used for "OK"/positive states elsewhere on the
   page), right column the amber used for "Pro"/growth elsewhere (the
   plan-recommended badge, the low-stock badge) -- reusing those two
   accents here instead of inventing new ones keeps "simple" and "grows
   with you" reading as the same two ideas wherever they show up on the
   page. */
.access{padding:70px 0 76px}
.access-grid{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.access-col{padding:26px 24px;border-radius:var(--radius);background:var(--white);border:1px solid var(--line)}
.access-kicker{font:700 13px 'Space Grotesk';letter-spacing:.04em;text-transform:uppercase;color:var(--green-deep);margin:0 0 16px}
.access-kicker-amber{color:var(--amber)}
.access-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.access-list li{position:relative;padding-left:22px;font-size:15px;color:var(--ink);line-height:1.45}
.access-list li::before{content:"✓";position:absolute;left:0;top:0;font-weight:700;color:var(--green)}
.access-col-pro .access-list li::before{content:"↗";color:var(--amber)}

/* ---- Features ----------------------------------------------------------
   Alternating accent-bar rows -- a ledger-line rhythm rather than
   identical shadowed cards. */
.features{padding:76px 0}
.section-title{font-size:clamp(24px,3vw,32px);max-width:20ch}
.section-sub{color:var(--muted);margin-top:8px;font-size:15px}
.feature-list{margin-top:40px;display:flex;flex-direction:column}
.feature-row{
  padding:26px 0 26px 22px;
  border-top:1px solid var(--line);
  border-left:3px solid var(--green);
  max-width:640px;
}
.feature-row.feature-reverse{border-left-color:var(--amber);margin-left:auto;text-align:right;padding-left:0;padding-right:22px;border-left:none;border-right:3px solid var(--amber)}
.feature-row:last-child{border-bottom:1px solid var(--line)}
.feature-row h3{font-size:19px;font-weight:600}
.feature-row p{margin-top:8px;color:var(--muted);font-size:15px;max-width:52ch}
.feature-row.feature-reverse p{margin-left:auto}

/* ---- Offers / "ledger page" ---------------------------------------------
   The one bold visual moment: a torn ledger page. Perforated top edge
   via a repeating radial gradient mask, deeper paper tone, plans pinned
   to it rather than floating as generic shadowed SaaS cards. */
.offers{background:var(--paper-deep);padding:80px 0 70px;position:relative}
.ledger{position:relative;margin-top:44px}
.ledger-perf{
  height:14px;
  margin-bottom:8px;
  background-image:radial-gradient(circle at 10px 7px, var(--paper) 6px, transparent 7px);
  background-size:24px 14px;
  background-repeat:repeat-x;
}
.ledger-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.plan{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:26px 22px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.plan-recommended{border-color:var(--amber);border-width:2px;transform:translateY(-8px)}
.plan-badge{color:var(--amber);font-weight:700;font-size:13px;margin:0}
.plan h3{font-size:18px}
.plan-price{font:600 30px 'Space Grotesk';margin:0}
.plan-price span{font:400 13px 'DM Sans';color:var(--muted)}
.plan-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14px;color:var(--muted);flex-grow:1}
.plan-list li{padding-left:16px;position:relative}
.plan-list li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--green)}

/* ---- Formation -----------------------------------------------------------
   A real numbered sequence (app tour -> WhatsApp onboarding call ->
   ongoing support -> on-site, in that order), so numbering earns its
   place here unlike a generic feature list -- a vertical connecting
   line ties the four steps together the way a timeline would. */
.formation{padding:76px 0 70px}
.formation-steps{list-style:none;margin:40px 0 0;padding:0;max-width:640px}
.formation-step{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:18px;
  position:relative;
  padding-bottom:34px;
}
.formation-step:last-child{padding-bottom:0}
/* The connecting line -- drawn behind the number circle, stopping short
   of the last step. */
.formation-step:not(:last-child)::before{
  content:"";
  position:absolute;
  left:21px;
  top:44px;
  bottom:-2px;
  width:2px;
  background:var(--line);
}
.formation-num{
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--green);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font:700 17px 'Space Grotesk';
  z-index:1;
}
.formation-step h3{font-size:17px;font-weight:600;margin-bottom:6px}
.formation-step p{color:var(--muted);font-size:14.5px;line-height:1.6;max-width:52ch}
.formation-cta{margin-top:38px}

/* ---- Testimonials / Press ------------------------------------------------
   Jaay+ is pre-launch -- no real testimonials or press mentions exist
   yet. The cards/logos below are a LAYOUT PREVIEW only: a generic
   silhouette icon standing in for a photo, "Nom du client"/"Nom du
   média" placeholders, and a .mockup-flag note make that unmistakable
   rather than reading as a real (if generic) customer or outlet. Swap
   each card's content for a real one as it comes in -- same
   markup/classes, no other change needed. */
.testimonials{padding:70px 0;background:var(--paper)}
.mockup-flag{max-width:560px;margin-top:10px;font-size:13px;font-style:italic;color:var(--muted)}
.testimonial-grid{margin-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.testimonial-card{display:flex;flex-direction:column;gap:16px}
/* Speech-bubble quote (taptapsend.com-style) -- the ::after triangle
   points down toward the photo below it. */
.testimonial-bubble{position:relative;padding:22px 22px 24px;border-radius:16px;background:var(--white);border:1px dashed var(--line)}
.testimonial-bubble::after{
  content:"";
  position:absolute;
  left:34px;
  bottom:-9px;
  width:18px;
  height:18px;
  background:var(--white);
  border-right:1px dashed var(--line);
  border-bottom:1px dashed var(--line);
  transform:rotate(45deg);
  border-bottom-right-radius:3px;
}
.testimonial-quote{color:var(--ink);font-size:15px;line-height:1.6;font-style:italic;margin:0}
.testimonial-person{display:flex;align-items:center;gap:12px;padding-left:4px}
.testimonial-photo{
  flex:none;
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--paper-deep);
  color:var(--muted);
  border:1px solid var(--line);
}
.testimonial-photo svg{width:26px;height:26px}
.testimonial-name{font-weight:600;color:var(--ink)}
.testimonial-role{margin-top:1px;font-size:13px;color:var(--muted)}
.testimonials-cta{margin-top:32px !important}
.testimonials-cta a{color:var(--green-deep);font-weight:600}

.press{padding:60px 0;overflow:hidden}
.press .wrap .section-sub{margin-top:26px}
.press-cta{margin-top:22px}

/* Full-bleed sliding "as seen in" strip -- .press-track holds the logo
   list TWICE back to back (see the markup) so animating translateX
   from 0 to -50% loops with no visible seam/jump. Each logo is its
   own link straight to the article once one exists. */
.press-marquee{margin-top:26px;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
.press-track{display:flex;width:max-content;gap:16px;animation:press-scroll 26s linear infinite}
.press-marquee:hover .press-track{animation-play-state:paused}
.press-logo{
  flex:none;
  padding:16px 28px;
  border-radius:var(--radius);
  background:var(--paper-deep);
  border:1px dashed var(--line);
  color:var(--muted);
  font-weight:600;
  font-size:14px;
  text-decoration:none;
  transition:border-color .15s ease,color .15s ease;
}
.press-logo:hover{border-color:var(--green);color:var(--green-deep)}
@keyframes press-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .press-track{animation:none}
}

/* ---- About / Contact / Footer ------------------------------------------ */
.about{padding:70px 0}
.about-row{max-width:680px}
.about p{margin-top:16px;color:var(--muted);font-size:16px;line-height:1.7}

.contact{background:var(--green);padding:64px 0}
.contact-row{display:flex;justify-content:space-between;align-items:flex-start;gap:48px;flex-wrap:wrap}
.contact-intro{max-width:320px}
.contact .section-title,.contact p{color:#fff}
.contact p{color:#dcf0e2;margin-top:8px}
.contact .btn-primary{background:#fff;color:var(--green-deep)}
.contact .btn-primary:hover{background:#eef7f0}

.contact-form{display:flex;flex-direction:column;gap:14px;width:100%;max-width:400px}
.contact-field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600;color:#dcf0e2}
.contact-field input,.contact-field textarea{
  font:15px 'DM Sans',sans-serif;
  padding:11px 13px;
  border-radius:8px;
  border:1px solid transparent;
  background:#fff;
  color:var(--ink);
  resize:vertical;
}
.contact-field input:focus,.contact-field textarea:focus{outline:2px solid var(--green-deep);outline-offset:1px}
.contact-fallback{font-size:13px;color:#dcf0e2;margin-top:2px}
.contact-fallback a{font-weight:600;text-decoration:underline}

.site-footer{padding:26px 0;border-top:1px solid var(--line)}
.footer-row{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.footer-note a{color:var(--muted);text-decoration:underline;margin-left:2px}
.footer-note a:hover{color:var(--green-deep)}

/* ---- Legal (privacy / terms) ---------------------------------------
   Plain long-form reading content -- no cards, no color inversion,
   just the same paper background and type scale as the rest of the
   site so it doesn't feel like a bolted-on lawyer page. */
.legal{padding:64px 0 80px}
.legal-page{max-width:760px}
.legal-page h1{font-size:clamp(28px,4vw,40px);margin:10px 0 18px}
.legal-lede{color:var(--muted);font-size:16px;line-height:1.6;margin-bottom:8px}
.legal-page h2{font-size:19px;margin:34px 0 10px}
.legal-page p{color:var(--ink);font-size:15px;line-height:1.7;margin:10px 0}
.legal-page ul{margin:10px 0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.legal-page li{color:var(--ink);font-size:15px;line-height:1.6}
.legal-page a{color:var(--green-deep);text-decoration:underline}

/* ---- Responsive ---------------------------------------------------- */
@media (max-width:860px){
  .hero-row{grid-template-columns:1fr;gap:40px}
  .hero-visual{order:-1}
  .phone-mock{width:260px}
  .phone-screen{height:391px} /* same 1206:2000 ratio at this width's 236px inner frame */
  .ledger-plans{grid-template-columns:1fr}
  .plan-recommended{transform:none}
  .feature-row,.feature-row.feature-reverse{text-align:left;margin-left:0;padding:22px 0 22px 18px;border-left:3px solid var(--green);border-right:none}
  .access-grid{grid-template-columns:1fr}
  .testimonial-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .site-nav{position:fixed;inset:60px 16px auto 16px;background:var(--white);border:1px solid var(--line);border-radius:12px;flex-direction:column;align-items:flex-start;padding:16px;gap:14px;box-shadow:0 18px 40px rgba(23,35,29,.15);display:none}
  .site-nav.open{display:flex}
  .nav-toggle{display:block}
  .contact-row{flex-direction:column;align-items:flex-start}
}