@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. */
.phone-screen{position:relative;background:var(--paper);border-radius:18px;height:460px;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 ------------------------------------------------
   Both sections are honest "nothing here yet" states -- Jaay+ is
   pre-launch, so no fabricated quotes or press logos, just a plain
   note and a way to reach out (a real testimonial/press mention gets
   swapped in here once one exists, same class names, no other change
   needed). */
.testimonials{padding:70px 0;background:var(--paper)}
.testimonials-placeholder{max-width:560px;margin-top:20px;padding:28px 26px;border-radius:var(--radius);background:var(--white);border:1px dashed var(--line)}
.testimonials-placeholder p{color:var(--muted);font-size:15px;line-height:1.6;margin:0}
.testimonials-cta{margin-top:14px !important}
.testimonials-cta a{color:var(--green-deep);font-weight:600}

.press{padding:60px 0}
.press-cta{margin-top:22px}

/* ---- 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:420px}
  .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}
}
@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}
}