/* עמוד הגג של agur.me: הבחירה היא הפעולה הראשית, והאימות נשאר במוצר שנבחר. */
html { background: #eee9e4; }
body { min-width: 20rem; min-height: 100svh; background: #eee9e4; color: #292421; }

.site {
  --home-clay: #a46544;
  --home-clay-deep: #82472a;
  --home-cream: #faf8f5;
  --home-ink: #292421;
  --home-muted: #716a64;
  --home-line: #e5ddd5;
  --home-community: #52715c;
  --home-community-soft: #eaf1e8;
  --home-host: #9d3f47;
  --home-host-deep: #7f2833;
  --home-host-soft: #fff8f7;
  direction: rtl;
  display: grid;
  grid-template-columns: minmax(20rem, .76fr) minmax(35rem, 1.24fr);
  gap: clamp(.7rem, 1.35vw, 1.3rem);
  min-height: 100svh;
  padding: clamp(.7rem, 1.35vw, 1.3rem);
}

.brand-panel,
.portal { min-width: 0; direction: rtl; }

.brand-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: clamp(1.6rem, 3vw, 3.1rem);
  border-radius: clamp(1.45rem, 2.8vw, 2.4rem);
  background: var(--home-clay);
  color: var(--home-cream);
}

.brand-panel::before,
.brand-panel::after {
  position: absolute;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.brand-panel::before { top: -16rem; right: -15rem; width: 31rem; height: 31rem; }
.brand-panel::after { bottom: -13rem; left: -14rem; width: 28rem; height: 28rem; border-color: rgb(255 255 255 / 10%); }

.lockup {
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: .8rem;
  color: inherit;
  text-decoration: none;
}
.lockup__mark { width: 2.8rem; height: 2.25rem; }
.lockup__name {
  direction: ltr;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: .22em;
  line-height: 1;
}
.brand-panel__intro {
  position: relative;
  z-index: 1;
  max-width: 21rem;
  margin-block: auto clamp(4.25rem, 9vh, 7.5rem);
}
.brand-panel__intro p { margin: 0; }
.brand-panel__intro p:first-child {
  color: #fff; /* 05.10 · ניגודיות: שמנת ב-88% על חימר = 3.78:1, לבן = 4.7:1 (WCAG AA לטקסט קטן: 4.5) */
  font-size: clamp(.82rem, 1.15vw, 1rem);
  font-weight: 750;
  letter-spacing: .08em;
}
.brand-panel__intro h1 {
  margin: .7rem 0 1.2rem;
  font-size: clamp(2.1rem, 3.5vw, 3.45rem);
  font-weight: 520;
  letter-spacing: -.065em;
  line-height: 1.04;
}
.brand-panel__intro p:last-child {
  max-width: 19rem;
  color: #fff;
  font-size: clamp(.97rem, 1.25vw, 1.1rem);
  line-height: 1.7;
}
.brand-panel__flight {
  position: absolute;
  z-index: 1;
  bottom: clamp(-4.5rem, -4vw, -2.5rem);
  left: clamp(-6rem, -4vw, -2.5rem);
  width: min(78%, 25rem);
  color: rgb(250 248 245 / 30%);
  transform: rotate(-9deg);
}
.brand-panel__flight svg { display: block; width: 100%; height: auto; }

.portal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: clamp(1.6rem, 3vw, 3.1rem);
  border-radius: clamp(1.45rem, 2.8vw, 2.4rem);
  background: var(--home-cream);
}
.portal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.portal-header__label {
  margin: 0;
  color: var(--home-muted);
  font-size: .86rem;
  font-weight: 750;
  letter-spacing: .04em;
}
.help {
  min-height: var(--tap);
  padding: .55rem .9rem;
  border: 1px solid var(--home-line);
  border-radius: 999px;
  color: var(--home-clay-deep);
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.help:hover { border-color: var(--home-clay); background: var(--home-clay); color: #fff; }

.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-self: center;
  gap: clamp(.85rem, 1.5vw, 1.15rem);
  width: min(100%, 46rem);
  margin: 1.5rem auto;
}
.product {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: clamp(17rem, 43vh, 24rem);
  padding: clamp(1.35rem, 2.2vw, 2rem);
  overflow: hidden;
  border: 1px solid var(--home-line);
  border-radius: clamp(1.3rem, 2.2vw, 1.7rem);
  background: #fff;
  color: var(--home-ink);
  text-decoration: none;
  transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.product::after {
  position: absolute;
  bottom: -6.5rem;
  left: -5rem;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.product > * { position: relative; z-index: 1; }
.product:hover { transform: translateY(-.3rem); box-shadow: 0 1.15rem 2.6rem rgb(62 43 30 / 13%); }

.product--community { border-color: #d1dfd1; background: linear-gradient(145deg, #fff 4%, var(--home-community-soft)); }
.product--community::after { border: 1px solid rgb(82 113 92 / 26%); background: rgb(82 113 92 / 10%); }
.product--community:hover { border-color: rgb(82 113 92 / 65%); }
.product--host { border-color: #ead9da; background: linear-gradient(145deg, #fff 5%, var(--home-host-soft)); }
.product--host::after { border: 1px solid rgb(157 63 71 / 25%); background: rgb(157 63 71 / 7%); }
.product--host:hover { border-color: rgb(157 63 71 / 62%); }

.product__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.product__name {
  direction: ltr;
  color: var(--home-community);
  font-size: .77rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.product--host .product__name { color: var(--home-host); }
.product__mark { width: 3.1rem; height: 2.45rem; color: var(--home-community); }
.product--host .product__mark { color: var(--home-host); }
.product__copy { align-self: center; }
.product__title { display: block; max-width: 8ch; font-size: clamp(1.8rem, 2.8vw, 2.55rem); font-weight: 500; letter-spacing: -.055em; line-height: 1.08; }
.product__description { display: block; max-width: 18ch; margin-top: .75rem; color: #536b58; font-size: 1rem; line-height: 1.55; }
.product--host .product__description { color: #78595b; }
.product__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgb(82 113 92 / 22%);
  color: var(--home-community);
  font-size: .95rem;
  font-weight: 800;
}
.product--host .product__action { border-color: rgb(157 63 71 / 20%); color: var(--home-host-deep); }
.product__arrow { font-size: 1.45rem; line-height: 1; transition: transform var(--dur-base) var(--ease); }
.product:hover .product__arrow { transform: translateX(-.25rem); }

.portal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  color: var(--home-muted);
  font-size: .8rem;
}
.portal-footer a { color: inherit; text-decoration: underline; text-underline-offset: .2em; }
.portal-footer a:hover { color: var(--home-clay-deep); }
.portal-footer span { width: .22rem; height: .22rem; border-radius: 50%; background: #cfc4bb; }

.help:focus-visible,
.product:focus-visible,
.lockup:focus-visible,
.portal-footer a:focus-visible { outline: 3px solid var(--home-clay); outline-offset: 4px; }

@media (max-width: 52rem) {
  html, body { background: #faf8f5; }
  .site { display: block; padding: 0; }
  .brand-panel { min-height: 24rem; padding: 1.6rem 1.5rem; border-radius: 0 0 2rem 2rem; }
  .brand-panel__intro { max-width: 21rem; margin-block: 3.1rem 4.4rem; }
  .brand-panel__intro h1 { font-size: clamp(2.15rem, 9vw, 3rem); }
  .brand-panel__flight { bottom: -3rem; left: -2.5rem; width: 15rem; }
  .portal { min-height: calc(100svh - 10rem); padding: 1.8rem 1.5rem; border-radius: 0; }
  .products { align-self: start; margin-block: 2rem; }
  .product { min-height: 17rem; }
}

@media (max-width: 33rem) {
  .portal { padding-inline: 1.15rem; }
  .products { grid-template-columns: 1fr; }
  .product { min-height: 14.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* עמוד הצהרת הנגישות (accessibility.html): מסמך קריאה אחד, כולו בטוקנים של @agur/ui — בלי ערכי צבע וגודל משלו (ui-tokens-only). */
.doc-body { background: var(--cream); color: var(--ink); font-size: var(--fs-body); }
.doc-top { direction: rtl; max-width: 46rem; margin: 0 auto; padding: var(--s4) var(--s4) 0; }
.doc-top__home { color: var(--brand-ink); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.doc {
  direction: rtl;
  max-width: 46rem;
  margin: var(--s4) auto var(--s7);
  padding: clamp(var(--s4), 4vw, var(--s6));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  line-height: 1.75;
}
.doc:focus { outline: none; }
.doc h1 { margin: 0 0 var(--s1); font-size: var(--fs-h1); line-height: 1.25; }
.doc h2 { margin: var(--s6) 0 var(--s2); font-size: var(--fs-h2); line-height: 1.35; }
.doc p { margin: var(--s2) 0; }
.doc ul { margin: var(--s2) 0; padding-inline-start: var(--s5); }
.doc li { margin: var(--s2) 0; }
.doc__meta { color: var(--muted); margin: 0 0 var(--s4); }
.doc a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: .2em; }
.doc a:focus-visible,
.doc-top__home:focus-visible { outline: 3px solid var(--brand-ink); outline-offset: 4px; }
.doc__back { margin-top: var(--s6); }