/* Transcripts — the campaign/landing archetype for a single-language entry page.
   Shared by the pages under /he/ and /ar/. It sits on top of css/tokens.css and css/base.css and
   adds only what a marketing page needs that the app chrome does not: a sticky brand
   header, a hero, a step grid, an offer card and a footer row.

   It is a file rather than a <style> block because there is more than one such page now.
   The Hebrew home page and the Zoom campaign page are the same archetype, and two copies
   of this block would have drifted the way the token catalogue once did. */
a{color:var(--brand-deep); text-decoration:none;}
.campaignShell{width:min(100%,1040px); margin:0 auto; padding-inline:var(--shell-gutter);}

.campaignHeader{
  position:sticky; inset-block-start:0; z-index:var(--z-header);
  background:var(--header-bg); backdrop-filter:saturate(180%) blur(10px);
  border-block-end:1px solid var(--line);
}
.headerRow{
  min-height:64px; display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--space-2) var(--space-4); padding-block:var(--space-2);
}
.brandLink{
  min-height:44px; min-width:0; flex:1 1 150px; display:flex; align-items:center;
  gap:var(--space-3); color:var(--ink); border-radius:var(--radius-control);
}
.brandLink .logo{--logo-h:22px; flex:none;}
.brandName{font-weight:var(--weight-semi); overflow:hidden; text-overflow:ellipsis;}
.campaignNav{display:flex; flex:0 1 auto; flex-wrap:wrap; align-items:center; gap:var(--space-2);}
.campaignLink{
  min-height:44px; display:inline-flex; align-items:center; padding-inline:var(--space-3);
  border-radius:var(--radius-control); color:var(--muted); font-weight:var(--weight-medium);
}

.campaignHero{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:var(--space-10); align-items:center; padding-block:var(--space-16) var(--space-12);
}
.heroCopy{min-width:0;}
.eyebrow{
  display:inline-flex; align-items:center; min-height:32px; padding-inline:var(--space-3);
  border:1px solid var(--brand-line); border-radius:var(--radius-pill);
  background:var(--brand-tint); color:var(--brand-deep);
  font-size:var(--text-sm); font-weight:var(--weight-semi); margin:0 0 var(--space-4);
}
h1{
  font-size:var(--display-1); line-height:var(--leading-tight);
  font-weight:var(--weight-bold); margin:0 0 var(--space-4); text-wrap:balance;
}
.heroLede{
  max-width:54ch; color:var(--muted); font-size:var(--text-lg);
  line-height:var(--leading-read); margin:0 0 var(--space-6); text-wrap:pretty;
}
.heroActions{display:flex; flex-wrap:wrap; gap:var(--space-3);}
.heroActions .btn{flex:1 1 180px; min-width:0; white-space:normal; text-align:center;}
.campaignCta{box-shadow:var(--shadow-flat);}

.campaignCard{margin-top:0; padding:var(--space-6); border-radius:var(--radius-page);}
.sampleTitle{
  margin:0 0 var(--space-4); color:var(--brand-deep);
  font-size:var(--text-sm); font-weight:var(--weight-semi);
}
.sampleTranscript{
  padding:var(--space-5); border:1px solid var(--line); border-radius:var(--radius-card);
  background:var(--surface-sunk); font-family:'Noto Sans Hebrew','Noto Sans Arabic','Spline Sans',sans-serif;
}
.sampleTurn{margin:0 0 var(--space-5); font-size:var(--text-lg); line-height:var(--leading-read);}
.sampleTurn:last-child{margin-bottom:0;}
.sampleSpeaker{
  display:block; margin-block-end:var(--space-1); color:var(--brand-deep);
  font-size:var(--text-base); font-weight:var(--weight-bold);
}

.campaignSection{padding-block:var(--space-12);}
.sectionTitle{
  margin:0 0 var(--space-6); font-size:var(--display-2);
  line-height:var(--leading-tight); text-wrap:balance;
}
.journeyGrid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  gap:var(--space-4);
}
.journeyCard{margin-top:0; padding:var(--space-5);}
.stepNumber{
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:var(--brand-fill); color:var(--on-brand);
  font-weight:var(--weight-bold); margin-block-end:var(--space-4);
}
.journeyCard h3{font-size:var(--text-xl); line-height:var(--leading-tight); margin:0 0 var(--space-3);}
.journeyCard p{color:var(--muted); margin:0; line-height:var(--leading-read);}

.offerCard{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  align-items:center; gap:var(--space-6); margin-top:0; padding:var(--space-8);
  border-color:var(--brand-line); background:var(--brand-tint);
}
.offerCard h2{font-size:var(--display-2); line-height:var(--leading-tight); margin:0 0 var(--space-3);}
.offerCard p{margin:0; color:var(--muted); line-height:var(--leading-read);}
.offerAction{display:flex; justify-content:center;}
.offerAction .btn{width:min(100%,320px);}
.boundary{
  margin:var(--space-6) 0 0; padding:var(--space-4); border:1px solid var(--line);
  border-radius:var(--radius-control); color:var(--muted); background:var(--surface-sunk);
}

/* Native-language home pages share the same prose, FAQ and onward-navigation units. */
.faqList{display:grid; gap:var(--space-3);}
.faqItem{margin-top:0; padding:var(--space-5);}
.faqItem h3{font-size:var(--text-xl); line-height:var(--leading-tight); margin:0 0 var(--space-2);}
.faqItem p{margin:0; color:var(--muted); line-height:var(--leading-read);}
.proseCard{margin-top:0; padding:var(--space-6);}
.proseCard h2{font-size:var(--display-2); line-height:var(--leading-tight); margin:0 0 var(--space-3);}
.proseCard p{margin:0; color:var(--muted); line-height:var(--leading-read);}
.proseGrid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  gap:var(--space-4);
}
.readNext{display:flex; flex-wrap:wrap; gap:var(--space-3); margin:0;}

.campaignFooter{border-block-start:1px solid var(--line); margin-block-start:var(--space-12);}
.footerRow{
  min-height:76px; display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--space-2) var(--space-4); padding-block:var(--space-3);
}
.footerBrand{flex:1 1 180px; color:var(--muted);}
.brandLink:active,.campaignLink:active{background:var(--surface-pressed);}
@media (hover:hover){
  .brandLink:hover,.campaignLink:hover{background:var(--surface-hover); color:var(--ink);}
}