/* KulliQ — English pages (/en/…): left-to-right touches on top of the shared styles.css */
body { line-height: 1.65; }

/* home: hero */
.enHero { padding: 52px 0 26px; display: grid; gap: 16px; max-width: 780px; }
.enEyebrow {
  width: fit-content; font-size: .84rem; font-weight: 700; color: var(--primary); background: var(--primary-soft);
  border-radius: 99px; padding: .3rem .85rem;
}
.enHero h1 { margin: 0; font-size: clamp(2rem, 5.2vw, 3.2rem); line-height: 1.12; letter-spacing: -.02em; }
.enHero h1 em { font-style: normal; color: var(--primary); }
.enHero p { margin: 0; font-size: 1.12rem; color: var(--muted); max-width: 660px; }
.enCta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

/* home: the four tools */
.enTools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 16px 0 8px; }
.enTool {
  display: flex; gap: 16px; align-items: flex-start; padding: 22px; background: #fff; color: inherit; text-decoration: none;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.enTool:hover, .enTool:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #c9e2d9; outline: none; }
.enIcon { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.enIcon svg { width: 26px; height: 26px; }
.enBody { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.enTool h2 { margin: 0; font-size: 1.16rem; line-height: 1.3; }
.enTool p { margin: 0; color: var(--muted); font-size: .95rem; }
.enTag { width: fit-content; font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: #7a4d06; background: var(--gold-soft); border-radius: 99px; padding: .1rem .6rem; }
.enTool .go { margin-top: 8px; font-weight: 700; font-size: .92rem; color: var(--primary); }

/* home: why, and the Arabic-only sections */
.enWhy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 34px 0; }
.enWhy div { padding: 18px 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.enWhy b { display: block; margin-bottom: 4px; color: var(--primary); }
.enWhy span { color: var(--muted); font-size: .94rem; }
.enArabic { margin: 0 0 36px; padding: 22px 24px; border-radius: var(--radius); background: var(--gold-soft); }
.enArabic h2 { margin: 0; font-size: 1.15rem; }
.enArabic p { margin: 2px 0 12px; color: #6b5420; font-size: .94rem; }
.enChips { display: flex; flex-wrap: wrap; gap: 8px; }
.enChips a { text-decoration: none; color: var(--ink); background: #fff; border: 1px solid #f0dfb8; border-radius: 99px; padding: .35rem .9rem; font-weight: 600; font-size: .92rem; }
.enChips a:hover, .enChips a:focus-visible { border-color: var(--gold); outline: none; }
.formRow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* privacy and terms */
.doc { max-width: 780px; margin: 30px auto 10px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px, 4vw, 40px); }
.doc h1 { margin: 0 0 4px; font-size: 1.8rem; }
.doc h2 { font-size: 1.15rem; margin: 26px 0 6px; }
.doc p, .doc li { color: #3d4c49; }
.doc ul { padding-inline-start: 1.2rem; }
.doc .date { color: var(--muted); font-size: .9rem; margin: 0; }

@media (max-width: 760px) {
  .enTools, .enWhy { grid-template-columns: 1fr; }
  .enHero { padding-top: 30px; }
  .enTool { padding: 18px; }
}

/* home v3 (the shared .h* styles live in styles.css): left-to-right touches */
.hHero .heroSearch .searchResults { text-align: left; }
.hCard:hover .hGo { transform: translateX(3px); }
.hAr { font-style: normal; font-size: .66rem; font-weight: 800; letter-spacing: .02em; color: #6b5420; background: var(--gold-soft); border-radius: 99px; padding: .05rem .45rem; margin-inline-start: 6px; }
.hTiles a { position: relative; }
.hTiles a .hAr { position: absolute; top: -8px; inset-inline-end: 10px; margin: 0; border: 1px solid #f0dfb8; }
.hAllNote { margin: 14px 0 0; text-align: center; color: var(--muted); font-size: .88rem; }
.mSqueeze { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 800; }
.mSqueeze span { background: #fff; color: #13306b; border-radius: 12px; padding: .5rem .7rem; font-size: .95rem; box-shadow: 0 16px 34px rgba(0, 0, 0, .35); }
.mSqueeze span.s { font-size: .8rem; padding: .35rem .55rem; background: #dff3ea; color: #0b5a45; }
.mSqueeze b { font-size: 1.3rem; }
.mVid small { white-space: nowrap; }
@media (max-width: 760px) {
  .mVid { inset-inline-start: 8px; padding-inline-end: 7px; } .mVid small { font-size: .62rem; }
  .mSqueeze { gap: 4px; } .mSqueeze span { font-size: .78rem; padding: .4rem .5rem; } .mSqueeze span.s { font-size: .68rem; padding: .3rem .4rem; } .mSqueeze b { font-size: 1rem; }
}