/* JEDA Journal — landing page. Own design tokens, separate from app/styles.css:
 * this is a public marketing page (no user data), the journal app is not. */
@import url('https://fonts.googleapis.com/css2?family=Literata:ital,opsz,wght@0,7..72,300..700;1,7..72,300..700&family=Be+Vietnam+Pro:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root{
  --canvas:#F1ECE9;
  --surface:#FFFDFC;
  --surface-blush:#F5D8D0;
  --surface-teal:#D8E6DF;
  --border:#DBD1CB;
  --text-primary:#241B26;
  --text-primary-hover:#3A2C3C;
  --text-secondary:#37564F;
  --text-inverse:#FFFDFC;
  --blush:#E3B5AC;
  --blush-deep:#8C3F52;
  --teal:#7FA096;
  --teal-deep:#2F6154;

  --font-serif:'Literata',Georgia,serif;
  --font-sans:'Be Vietnam Pro',sans-serif;
  --text-h3-size:1.25rem;
  --text-body-size:1rem;
  --text-label-size:0.875rem;
  --text-label-weight:500;
  --text-meta-size:0.8125rem;

  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;
  --shadow-1:0 1px 2px rgba(36,27,38,0.04), 0 8px 24px rgba(55,86,79,0.06);
  --duration-fast:160ms;--duration-slow:240ms;
  --ease-standard:cubic-bezier(0.4,0,0.2,1);
}

@media (prefers-reduced-motion: reduce){*{transition-property:opacity!important;animation:none!important}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--canvas);font-family:var(--font-sans);color:var(--text-primary)}
img{max-width:100%;display:block}
a{color:var(--teal-deep);text-decoration:none}
a:hover{color:var(--teal-deep);text-decoration:underline}
footer a:hover{color:var(--text-inverse)}
section[id]{scroll-margin-top:76px}

.ic{display:block;background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.5;background-image:repeating-linear-gradient(0deg,rgba(255,253,252,.05) 0 1px,transparent 1px 5px)}
.rings{position:absolute;pointer-events:none;border-radius:999px;border:1px solid rgba(255,253,252,.09)}
.panel{position:relative;border-radius:var(--radius-xl);padding:56px 40px;display:flex;justify-content:center;overflow:hidden}
.mock{width:352px;flex:none;background:var(--canvas);border:1px solid var(--border);border-radius:26px;overflow:hidden;box-shadow:var(--shadow-1)}

@media (prefers-reduced-motion:no-preference){
  .lift{transition:border-color var(--duration-fast) var(--ease-standard)}
  .lift:hover{border-color:var(--teal)}
}

/* Buttons — matches the design system's Button.jsx variants */
.btn{font-family:var(--font-sans);font-size:var(--text-label-size);font-weight:var(--text-label-weight);border:none;border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;transition:background-color var(--duration-fast) var(--ease-standard);display:inline-flex;align-items:center;justify-content:center}
.btn-primary{padding:14px 20px;min-height:48px;background:var(--text-primary);color:var(--text-inverse)}
.btn-primary:hover{background:var(--text-primary-hover)}
.btn-primary.btn-sm{padding:10px 16px;min-height:40px}
.btn-onhero{padding:14px 28px;min-height:48px;background:var(--canvas);color:var(--text-primary)}
.btn-onhero:hover{background:#FFFFFF}

/* Feature carousel */
.feature-track{position:relative;min-height:760px}
.feature-slide{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;gap:96px;align-items:center;opacity:0;transform:translateY(6px);pointer-events:none;transition:opacity 220ms cubic-bezier(.4,0,.2,1),transform 220ms cubic-bezier(.4,0,.2,1)}
.feature-slide.is-active{opacity:1;transform:translateY(0);pointer-events:auto}
.feature-dot{width:20px;height:6px;padding:0;border:none;border-radius:999px;background:var(--border);cursor:pointer;transition:all 200ms cubic-bezier(.4,0,.2,1)}
.feature-dot.is-active{width:32px;background:var(--blush-deep)}

@media (max-width:900px){
  .hero-grid,.feature-slide,.priv-grid,.pilot-grid{grid-template-columns:1fr!important;gap:48px!important}
  .feature-track{min-height:auto}
  .feature-slide{position:relative;inset:auto;opacity:1!important;transform:none!important;pointer-events:auto!important;display:none;grid-template-columns:1fr!important}
  .feature-slide.is-active{display:grid}
  nav.primary-nav a{display:none}
  h1{font-size:2.25rem!important}
}