/* reka.re/yara: the shared look for /yara/ and /yara/how-it-works/, taken from the new REKA site (prototype/reka-on-clay).
   Paper and ink; Poppins and JetBrains Mono; 12px buttons, rounded sheets, dotted canvases and floating cards.
   Only presentation lives here: each page keeps its own words, scripts and section-level styles.

   Product pages on reka.re: 70% the product's own colours, 30% REKA orange (owner, 12 Oct 2026).
   The --product-* tokens carry the 70%: headline highlights, primary buttons, links, labels, chips, icon tiles,
   step numbers, selected states, focus rings, tinted sections and the dark sheets.
   The --reka-* tokens carry the 30%: the REKA logo, the header call to action, the footer band and box,
   and a few small REKA moments. For another product, swap only the --product-* values (from the AntaraX brand kit,
   tokens/product-palettes.css) and keep every rule below. */
:root{
  /* the product: Yara (AntaraX brand kit, product-palettes.css: --yara-*) */
  --product:#098284;          /* action: primary button fill, large highlights (white text on it passes AA) */
  --product-hover:#05686A;    /* action hover */
  --product-accent:#08B0B3;   /* accent: bullets, markers, text and lines on the dark sheets */
  --product-ink:#05686A;      /* small text and links on paper, oat and tints (AA on all of them) */
  --product-tint:#EEF9F9;     /* tinted sections and selected rows */
  --product-subtle:#DAF3F3;   /* a second, deeper tint */
  --product-border:#B3E6E7;   /* borders on tints, canvas dots */
  --product-1:#82D5D6;--product-2:#08B0B3;--product-3:#098284;--product-4:#05686A;--product-5:#B3E6E7; /* tile shades */
  --product-dark:#0B1B4F;     /* secondary navy: the dark sheets */
  --product-dark-card:#16275E;--product-dark-line:#2C3D78;--product-dark-text:#C9D1EA;
  --on-product:#FFFFFF;
  /* REKA */
  --reka:#FB9800;             /* the REKA orange: logo, header call to action, footer band, markers */
  --reka-hover:#FFA826;
  --reka-ink:#B84A00;         /* orange text that must pass AA (4.8:1 on paper and the footer box; #C24E00 is 4.4:1) */
  --reka-tint:#FBF4EA;        /* the footer box */
  --on-reka:#0B0B0C;
  /* neutrals */
  --paper:#F7F6F3;--white:#FFFFFF;--ink:#1D1D1D;--ink-2:#3A3936;--muted:#565656;--muted-2:#6B6964;
  --oat:#EFEEEA;--oat-1:#F9F8F6;--oat-btn:#E5E4E1;--line:#E5E4E1;--line-2:#D3D1CC;--line-3:#E6E3DC;
  /* roles the page styles use */
  --focus:var(--product-ink);
  --dark:var(--product-dark);--dark-card:var(--product-dark-card);--dark-line:var(--product-dark-line);--dark-text:var(--product-dark-text);
  --c1:var(--product-1);--c2:var(--product-2);--c3:var(--product-3);--c4:var(--product-4);--c5:var(--product-5);
  --sans:'Poppins',system-ui,'Helvetica Neue',Arial,sans-serif;--mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --dots:radial-gradient(circle,var(--product-border) 1.1px,transparent 1.4px);
  --dots-dark:radial-gradient(circle,rgba(255,255,255,.12) 1px,transparent 1.2px);
  --node-shadow:0 10px 24px -16px rgba(0,0,0,.35);
  --gut:24px;--max:1184px;--nav-h:64px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video,iframe{display:block;max-width:100%}
img{height:auto}
picture{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3{margin:0;color:var(--ink);letter-spacing:-.03em;line-height:1.08;font-weight:500;text-wrap:balance}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
::selection{background:var(--product-subtle);color:var(--ink)}
.mono{font-family:var(--mono)}

/* eyebrow: the new site's small uppercase label, in the product colour */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 12px/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--product-ink)}

/* buttons: 12px corners; the product colour leads, a hairline secondary */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border:0;border-radius:12px;font:500 16px/1.4 var(--sans);letter-spacing:-.01em;text-align:center;cursor:pointer;text-decoration:none;transition:transform .2s var(--ease),background .2s,box-shadow .2s,color .2s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.btn-primary{background:var(--product);color:var(--on-product)}
.btn-primary:hover{background:var(--product-hover)}
.btn-outline,.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn-outline:hover,.btn-ghost:hover{background:var(--product-tint)}

/* ---------- header: the new site's floating card, one design for every product page ----------
   Markup: header.nav > .nav-card > .nav-inner > a.nav-brand (REKA lockup) + nav.nav-links + a.nav-cta + button.mobile-menu.
   The menu opens with .open on the nav (/yara/) or on the header (/yara/how-it-works/); both get the same sheet. */
.nav{position:sticky;top:0;z-index:50;height:var(--nav-h);pointer-events:none}
.nav-card{pointer-events:auto;margin:0 36px;height:var(--nav-h);background:var(--paper);border-radius:0 0 24px 24px;box-shadow:0 1px 2px rgba(29,29,29,.06),0 8px 24px -12px rgba(29,29,29,.25);transition:box-shadow .3s var(--ease)}
.nav.scrolled .nav-card{box-shadow:0 1px 2px rgba(29,29,29,.08),0 12px 28px -12px rgba(29,29,29,.35)}
.nav-inner{position:relative;height:100%;display:flex;align-items:center;gap:8px;padding:0 12px 0 22px}
.nav-brand{display:flex;align-items:center;height:100%;flex:none;border-radius:8px}
.nav-brand .logo{height:20px;width:auto}
.nav-links{display:flex;align-items:center;gap:2px;margin-left:20px}
.nav-side{display:contents}
.nav-links a{font:500 14px/1 var(--sans);padding:10px;border-radius:10px;color:var(--ink);transition:background .2s,color .2s}
.nav-links a:hover{background:var(--product-tint);color:var(--product-ink)}
.nav-cta{margin-left:auto;min-height:40px;padding:8px 16px;font-size:14px;background:var(--reka);color:var(--on-reka)}
.nav-cta:hover{background:var(--reka-hover)}
.mobile-menu{display:none;position:relative;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:var(--oat);color:var(--ink);font-size:0;line-height:0;cursor:pointer}
/* three bars, drawn the same whether the button holds a glyph (/yara/) or three spans (/yara/how-it-works/) */
.mobile-menu span{display:block;width:18px;height:2px;margin:4px auto;background:currentColor;border-radius:2px;transition:transform .3s var(--ease),opacity .2s}
.mobile-menu[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mobile-menu[aria-expanded="true"] span:nth-child(2){opacity:0}
.mobile-menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-menu:not(:has(span))::before,.mobile-menu:not(:has(span))::after{content:"";position:absolute;left:13px;top:21px;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease),box-shadow .2s}
.mobile-menu:not(:has(span))::before{box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
.mobile-menu:not(:has(span))::after{opacity:0}
.mobile-menu:not(:has(span))[aria-expanded="true"]::before{box-shadow:none;transform:rotate(45deg)}
.mobile-menu:not(:has(span))[aria-expanded="true"]::after{opacity:1;transform:rotate(-45deg)}
.mobile-menu[aria-expanded="true"]{background:var(--ink);color:var(--paper)}
@media (max-width:1000px){.nav-card{margin:0 12px}}
@media (max-width:980px){
  .nav-links{display:none;position:fixed;top:calc(var(--nav-h) + 8px);left:12px;right:12px;bottom:12px;margin:0;flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 96px;overflow-y:auto;background:var(--paper);border-radius:24px;box-shadow:0 30px 80px -20px rgba(0,0,0,.45);counter-reset:navnum;z-index:60}
  .nav-links.open,.nav.open .nav-links{display:flex}
  .nav-links a{counter-increment:navnum;display:grid;grid-template-columns:2.4rem 1fr auto;align-items:center;gap:.4rem;padding:16px 4px;font:500 20px/1.2 var(--sans);letter-spacing:-.02em;border-radius:0;border-bottom:1px solid var(--line)}
  .nav-links a::before{content:"0" counter(navnum);font:500 12px/1 var(--mono);color:var(--product-ink)}
  .nav-links a::after{content:"\2192";font:400 16px/1 var(--mono);color:var(--muted-2)}
  .nav-links a:hover{background:transparent;color:var(--product-ink)}
  .mobile-menu{display:block;margin-left:auto}
  .nav-cta{display:none}
  .nav-links.open~.nav-cta,.nav.open .nav-cta{display:inline-flex;position:fixed;left:32px;right:32px;bottom:calc(32px + env(safe-area-inset-bottom,0px));z-index:61;min-height:48px;font-size:16px}
}

/* footer: the new site's box under a warm band, in REKA's colours */
.foot{position:relative;background:var(--paper);color:var(--muted)}
.foot-land{height:240px;background:linear-gradient(180deg,var(--paper) 0%,#F8E7C9 45%,#F3CF95 100%)}
.foot-box{position:relative;z-index:1;width:min(1280px,calc(100% - 2 * var(--gut)));margin:-150px auto 0;background:var(--reka-tint);border-radius:48px 48px 0 0;padding:48px 48px 0}
.foot-box h3{font:600 12px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin:0 0 16px}
.foot-box a{color:var(--muted);transition:color .2s}
.foot-box a:hover{color:var(--reka-ink)}
.foot-box :focus-visible{outline-color:var(--reka-ink)}
.foot-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;border-top:1px solid #EAD9BF;margin-top:48px;padding:28px 0 calc(28px + env(safe-area-inset-bottom,0px));font-size:14px;line-height:20px}
@media (max-width:900px){.foot-box{padding:32px 24px 0;border-radius:32px 32px 0 0}}

@media (max-width:640px){:root{--gut:16px}.foot-land{height:200px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}