/* Homepage only, linked after site.css and template.css by index.html.
   Mike's review, 21 September 2026; Sanil, 24 September 2026.

   The type scale, the section labels, the feature panels and the closing band moved to template.css on
   24 September, so that every page carries them. What is left here is the homepage's own furniture: the hero
   photograph, the moving strip and its voting panel, the WhatsApp comparison, the approval pipeline, the three
   benefits, the evidence grid and the zero-integration band.

   The hero phone mock-up keeps site.css sizes: its text is drawn to fit a phone screen. */

/* the label colours the homepage's own dark sections need */
#gap .lbl,#how > .sec > .head .lbl,#promise > .sec > .head .lbl{color:var(--acid)}
#book .close-in .lbl{color:var(--ink)}

/* ---------------------------------------------------------------- 1. one moving line: pictures and the voting box */
/* Mike, 22 Sept: the voting box sits in the same line as the pictures and moves with them, left to right.
   The set is written twice so the loop never shows a gap; the copy is hidden from screen readers. */
#showcards{overflow:hidden}
.sc{padding:clamp(8px,1vw,16px) 0 clamp(40px,4vw,72px)}
.sc-view{overflow:hidden}
.sc-track{display:flex;width:max-content;animation:scSlide 48s linear infinite;will-change:transform}
@keyframes scSlide{from{transform:translateX(-50%)}to{transform:translateX(0)}}
/* Larger than before: about two and a bit cards across a laptop screen. */
.sc-c{--cw:clamp(340px,46vw,780px);--pr:clamp(2px,.4vw,6px);margin:0;flex:none;width:var(--cw);height:calc((var(--cw) - var(--pr)) * .588);padding-right:var(--pr);position:relative}
.sc-c img{display:block;width:100%;height:100%;object-fit:contain}
/* Stops only while the pointer is on a picture or the voting box. */
.sc-track:has(.sc-c:hover),.sc.off .sc-track{animation-play-state:paused}

/* The voting panel sits under the moving pictures, full width, carrying every question (Mike, 23 Sept). */
.nvp{margin:clamp(24px,2.6vw,40px) 4% 0;background:var(--deep-2);border-radius:clamp(14px,1.6vw,20px);color:#fff;
  padding:clamp(20px,2.4vw,34px) clamp(18px,2.6vw,40px) clamp(6px,.8vw,12px)}
.nvp-hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;
  padding-bottom:clamp(14px,1.6vw,24px);border-bottom:1px solid rgba(255,255,255,.14)}
.nvp-hd h2{margin:0;font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-light);letter-spacing:var(--track);color:#fff}
.nvp-tot{display:flex;align-items:center;gap:8px;font-size:var(--fs-p);font-weight:var(--fw-medium);color:rgba(255,255,255,.78)}
.nvp-tot b{color:#fff;font-variant-numeric:tabular-nums}
.nvp-r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) auto;align-items:center;
  gap:12px clamp(20px,3vw,48px);padding:clamp(16px,1.7vw,24px) 0}
.nvp-r + .nvp-r{border-top:1px solid rgba(255,255,255,.12)}
.nvp-g{display:block;font-size:var(--fs-small);font-weight:var(--fw-medium);color:rgba(255,255,255,.72)}
.nvp-r h3{margin:6px 0 0;font-size:var(--fs-p-lg);line-height:var(--lh-title);font-weight:var(--fw-medium);color:#fff}
.nvp-bar{position:relative;height:10px}
.nvp-bar i{position:absolute;top:0;bottom:0;left:calc(var(--s) * 1%);width:calc(var(--f) * 1% - 3px);border-radius:2px;background:rgba(255,255,255,.32)}
.nvp-bar i:first-child{background:#fff}
.nvp-bar i:nth-child(2){background:rgba(255,255,255,.55)}
.nvp-k{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px;
  font-size:var(--fs-p);font-weight:var(--fw-medium);color:rgba(255,255,255,.85)}
.nvp-k b{color:#fff;font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
.nvp-n{font-size:var(--fs-p);color:rgba(255,255,255,.8);white-space:nowrap}
.nvp-n b{color:#fff;font-variant-numeric:tabular-nums}
.nvp-r.bump .nvp-n b{animation:nvpBump .6s ease}
@keyframes nvpBump{0%{transform:translateY(0)}35%{transform:translateY(-3px)}100%{transform:translateY(0)}}
@media (max-width:900px){
  .nvp{margin-left:6%;margin-right:6%}
  .nvp-r{grid-template-columns:1fr;gap:10px}
  .nvp-n{display:block}
}

@media (max-width:760px){
  .sc-c{--cw:88vw}
  .nvp-hd h2{font-size:var(--fs-h4)}
}
@media (prefers-reduced-motion:reduce){
  .sc-track{animation:none}
  .sc-view{overflow-x:auto;scroll-snap-type:x mandatory}
  .sc-c{scroll-snap-align:start}
  .sc-c[aria-hidden]{display:none}
}

/* ---------------------------------------------------------------- 2. who it's for: three things JiL provides */
.wfs{margin-top:clamp(40px,4.4vw,72px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,56px);
  border-top:1px solid var(--line);padding-top:clamp(28px,3vw,44px)}
.wf h3{margin:0 0 16px;font-size:var(--fs-h4);line-height:var(--lh-h4);font-weight:var(--fw-light);letter-spacing:var(--track);color:var(--ink)}
.wf h3 b{display:block;font-weight:var(--fw-bold);color:var(--blue)}
.wf p{margin:0;font-size:var(--fs-p-lg);line-height:var(--lh-body);color:var(--dim)}
@media (max-width:900px){ .wfs{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- 3. WhatsApp comparison: now, then how it changes */
/* The headline is a full sentence now, so it steps down from H2 to sit between H2 and H3 on the live scale,
   and takes a wider measure, instead of running to seven lines on desktop and eleven on a phone. */
#gap > .sec > .head h2{max-width:26ch;font-size:max(calc(1.734rem + .864vw),calc(1rem + 2.6vw));line-height:1}
@media (max-width:760px){ #gap > .sec > .head h2{font-size:var(--fs-h3);line-height:var(--lh-h3)} }
#gap > .sec > .head p.gap-then{font-size:var(--fs-h4);line-height:var(--lh-h4);font-weight:var(--fw-light);color:#fff;max-width:22ch}
.rc-cap{font-size:var(--fs-p-lg)}
.rc-t{font-size:var(--fs-md)}
.rc-note{font-size:var(--fs-p);line-height:var(--lh-body)}
.rc-src{display:block;margin-top:6px;color:rgba(255,255,255,.78)}
.rc-src a:hover{color:var(--acid)}

/* ---------------------------------------------------------------- 4. AI and editorial approval: four real headings */
/* Two by two instead of four narrow columns, so each step has room for its heading and its explanation. */
.pipe{grid-template-columns:repeat(2,minmax(0,1fr))}
.pn{padding:clamp(26px,2.6vw,40px) clamp(22px,2.6vw,40px);gap:16px;min-height:0}
.pn-n{
  font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-light);letter-spacing:var(--track);
  text-transform:none;color:var(--ink);display:flex;align-items:baseline;gap:.45em
}
.pn-n i{font-style:normal;font-size:var(--fs-p-lg);font-weight:var(--fw-medium);color:var(--blue);font-variant-numeric:tabular-nums}
.pn h4{font-size:var(--fs-p-lg);font-weight:var(--fw-medium);line-height:var(--lh-ui);color:var(--ink)}
.pn-f{font-size:var(--fs-p-lg);color:var(--dim)}
.rail b{font-size:var(--fs-p);text-transform:none;letter-spacing:normal}
.pipe-modes button{font-size:var(--fs-p-lg)}
.wd-n{font-size:var(--fs-p-lg);text-transform:none;letter-spacing:var(--track);color:var(--dim)}
.wd h4{font-size:var(--fs-h3);line-height:var(--lh-h3)}
.wd p{font-size:var(--fs-p-lg);line-height:var(--lh-body)}
.kicker-line{font-size:var(--fs-h3);line-height:var(--lh-h3)}
@media (max-width:760px){
  .pipe{grid-template-columns:minmax(0,1fr)}
  .pn-n{font-size:var(--fs-h4)}
}

/* ---------------------------------------------------------------- 5. the three benefits: large, full width, and they stay */
.emo{margin-top:clamp(48px,6vw,96px);display:flex;flex-direction:column;gap:clamp(6px,1vw,16px)}
.emo-l{margin:0;font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--track);font-weight:var(--fw-light);color:var(--acid)}
.emo-l b{font-weight:var(--fw-bold);color:#fff}
.emo-l + .emo-l{padding-top:clamp(6px,1vw,16px);border-top:1px solid rgba(255,255,255,.14)}

/* The feature panels and the closing band's paragraph are in template.css: how it works and solutions carry
   the same components, so they are shared rather than repeated here. The closing band's own heading stays a
   homepage rule, because only this one is written to run the full width. */
.close-in h2{max-width:none}
.close-in p.bk-lead{font-size:var(--fs-h3);line-height:var(--lh-h3);font-weight:var(--fw-light);color:var(--ink);max-width:28ch}
.close-in p.who-room{font-size:var(--fs-p)}

/* ---------------------------------------------------------------- evidence: the research figures, each with its source */
#evidence{background:var(--panel)}
.evs{margin-top:clamp(40px,4.4vw,72px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.ev-c{background:#fff;padding:clamp(22px,2.4vw,36px);display:flex;flex-direction:column;gap:12px}
.ev-n{font-size:var(--fs-stat);line-height:var(--lh-stat);letter-spacing:var(--track-stat);font-weight:var(--fw-bold);color:var(--blue)}
.ev-c p{margin:0;font-size:var(--fs-p-lg);line-height:var(--lh-ui);color:var(--ink)}
.ev-s{margin-top:auto;font-size:var(--fs-small);line-height:var(--lh-ui);color:var(--dim)}
.ev-src{margin:22px 0 0;font-size:var(--fs-p);line-height:var(--lh-body);color:var(--dim);max-width:90ch}
.ev-src a{color:inherit;font-weight:var(--fw-medium);text-decoration:underline;text-underline-offset:3px}
.ev-src a:hover{color:var(--blue)}
@media (max-width:1100px){ .evs{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .evs{grid-template-columns:1fr} }

/* ---------------------------------------------------------------- hero, Mike 22 Sept: letters must not touch */
/* site.css sets the headline at -0.02em tracking and 0.898 line height; at the heavy weight the letters and the
   two lines met. Open tracking, a little extra word space and a taller line keep every letter clear. */
.hero h1{letter-spacing:.005em;word-spacing:.06em;line-height:1.02}
.hero .say p b.say-h{display:block;margin-bottom:.45em;font-size:var(--fs-h4);line-height:var(--lh-h4);color:var(--acid)}

/* hero phone: Mike's reply to Dan, with its own avatar colour so the two speakers read apart */
.phone .chat .av.av-mk{background:var(--acid);color:var(--ink)}

/* who it's for, 22 Sept: the earlier row design with Mike's copy. Heading left, explanation right, arrow. */
.door.wfd{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) 44px;align-items:start;padding:clamp(28px,3vw,40px) 4px}
.door.wfd h3{margin:0;font-weight:var(--fw-light);color:var(--ink)}
.door.wfd p{margin:0;font-size:var(--fs-p-lg);line-height:var(--lh-body);color:var(--dim);max-width:52ch}
.door.wfd .go{align-self:center}
@media (max-width:900px){ .door.wfd{grid-template-columns:1fr;gap:14px} .door.wfd .go{align-self:start} }

/* ---------------------------------------------------------------- hero photo (Sanil, 23 Sept) */
/* The living-room photo from joininlive.ai, behind the hero. A blue wash keeps it firmly in brand and holds the
   headline's contrast: heaviest on the left, where the words are, lighter on the right, where the TV is. */
.hero{
  background-color:var(--blue);
  background-image:linear-gradient(100deg,rgba(50,41,224,.95) 0%,rgba(50,41,224,.88) 32%,rgba(50,41,224,.55) 62%,rgba(36,28,180,.38) 100%),
                   url("img/hero.webp");
  background-size:auto,cover;
  background-position:center,center 30%;
  background-repeat:no-repeat,no-repeat
}
@media (max-width:760px){
  /* On a phone the words fill the screen, so the photo sits further back. */
  .hero{background-image:linear-gradient(180deg,rgba(50,41,224,.93) 0%,rgba(50,41,224,.86) 50%,rgba(36,28,180,.7) 100%),url("img/hero.webp")}
}

/* ---------------------------------------------------------------- hero, Mike 23 Sept: wording moved up */
/* The hero opened with a deep band of empty blue above the label. The words now start near the top of the
   photo, which is what the arrow on Mike's mark-up asks for. */
/* site.css holds the words down with 112px of padding above them and pins the block to the bottom of the
   hero; both go, so the text starts near the top of the photo. */
/* the nav floats over the hero, so its 89px still has to be cleared */
.hero .top{padding-top:clamp(104px,11vh,124px)}
/* hero rhythm: a clear step from the headline to the lead, and from the lead to the button */
.hero .say{margin-top:clamp(28px,3.4vh,40px)}
.hero .ctas{margin-top:clamp(32px,4vh,44px)}
.hero-in{align-items:start}
.hero-art{align-items:flex-start}


/* ---------------------------------------------------------------- zero integration + 19 languages (Sanil, 23 Sept) */
/* These two facts sell the product on their own, so they get a band of their own straight under the hero,
   in the acid ground, at heading size. */
#zero{background:var(--acid);border-bottom:0}
#zero{--fs-2xs:var(--fs-small);--fs-xs:1rem;--fs-sm:1.0625rem;--fs-md:1.125rem;--fs-base:1.25rem}
.zb{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,4vw,80px);
  padding:clamp(44px,5vw,76px) 4%}
.zb-c{display:flex;flex-direction:column;align-items:flex-start}
.zb-n{font-size:var(--fs-h1);line-height:.9;letter-spacing:var(--track-stat);font-weight:var(--fw-bold);color:var(--blue)}
.zb-c h2{margin:.12em 0 0;font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--track);
  font-weight:var(--fw-light);color:var(--ink);max-width:16ch}
.zb-c p{margin:clamp(14px,1.4vw,22px) 0 0;font-size:var(--fs-p-lg);line-height:var(--lh-body);color:rgba(33,46,33,.82);max-width:46ch}
@media (max-width:900px){
  .zb{grid-template-columns:1fr;gap:38px;padding:clamp(40px,8vw,56px) 6%}
  .zb-c h2{max-width:none}
}


/* ================================================================ Mike's notes, 24 September 2026 */

/* ---------------------------------------------------------------- the hero phone, sized from the screen */
/* "The phone screen needs to be big to cover the screen. Also adapt based on resolution of the screen so the
   viewers should be able to see it in the viewport."

   The phone is drawn at 330px wide with its own radii, bars and labels in fixed pixels. Rather than re-draw
   all of it, the whole device is scaled as one, so every part grows or shrinks together and nothing has to be
   re-measured by hand. The scale (--ph-k) is worked out in the page, from the space between the nav and the
   bottom of the screen, because the phone's natural height depends on the font that actually loads; the
   script sits next to the hero and runs before the first paint. --ph-h is that natural height, and the
   margin below reserves the room the scaled phone takes up, so it never lands on the section underneath.

   Below 1001px the hero stacks and the phone keeps its existing behaviour, including the scroll spring. */
@media (min-width:1001px){
  .hero-art{
    --ph-k:1;
    width:calc(330px * var(--ph-k));
    margin-right:clamp(0px,3vw,64px);
  }
  .hero-art .phone{
    max-width:none;               /* the column shrinks with the scale, so 100% would squeeze the phone twice */
    transform:scale(var(--ph-k));
    transform-origin:top right;
    margin-bottom:calc(var(--ph-h,720px) * (var(--ph-k) - 1))
  }
  /* the hero photo fills the whole first screen, so nothing from the next band shows above the fold */
  .hero{min-height:100vh;min-height:100svh;align-items:stretch}
  .hero-in{padding-bottom:0}
  /* Both columns centre in the screen under the nav, with the same room above and below, so the words no
     longer press up against the nav or leave an empty band under the button. */
  .hero{--hero-pad:clamp(28px,5vh,56px)}
  .hero .top,.hero-art{align-self:center;padding-top:calc(89px + var(--hero-pad));padding-bottom:var(--hero-pad)}
}

/* ---------------------------------------------------------------- the problem, in one screen */
/* "The Problem section if possible should be visible fully in the viewport in some screens."

   Nothing is cut and no new size is introduced: the headline steps down to the live site's H3, which is what
   it already does on a phone, and the spacing inside the section is set from the height of the screen rather
   than fixed, so the section closes up on a laptop and opens out on a large monitor. */
@media (min-width:1001px){
  #gap > .sec{padding-top:clamp(32px,4vh,104px);padding-bottom:clamp(32px,4vh,104px)}
  #gap > .sec > .head{gap:clamp(8px,1.2vh,22px)}
  #gap > .sec > .head h2{font-size:var(--fs-h3);line-height:var(--lh-h3);max-width:34ch}
  #gap > .sec > .head p.gap-then{max-width:26ch}
  #gap .reclaim{margin-top:clamp(14px,2.2vh,48px)}
  #gap .rc-bar{padding-top:clamp(8px,1.1vh,18px);padding-bottom:clamp(8px,1.1vh,18px)}
  #gap .rc-stage{min-height:clamp(230px,30vh,380px)}
  #gap .rc-row{padding-top:clamp(5px,.8vh,18px);padding-bottom:clamp(5px,.8vh,18px)}
  #gap .rc-note{padding-top:clamp(8px,1vh,18px);padding-bottom:clamp(8px,1vh,18px)}
}
/* On a screen that is not tall enough for the section to clear the fixed nav, each row of the scoreboard
   puts its label and its examples on one line instead of two. Nothing is dropped and no size changes; the
   row simply takes one line less. On a tall monitor there is room, so the rows stay as they were. */
@media (min-width:1001px) and (max-height:1120px){
  #gap .rc-l u{display:inline;margin-right:.6em}
  #gap > .sec{padding-top:clamp(28px,3.4vh,104px);padding-bottom:clamp(28px,3.4vh,104px)}
  /* the question and its source run the width of the card rather than the reading measure, which puts each
     of them on one line instead of two */
  #gap .rc-note{padding-right:22px}
}

/* ---------------------------------------------------------------- "During the event" */
/* The line under the four features is a full sentence now, so it is given room and kept steady. */
/* The sentence is centred in the strip. The strip centres its three parts, so a one-line sentence sitting at
   the top of the box left the label and the override chip hanging below it. The height itself is held by the
   page script, which measures the longest of the four sentences at the current width. */
#pfWhy p{display:flex;align-items:center;flex-wrap:wrap;min-width:0}
@media (max-width:1000px){
  /* The middle column was being squeezed to five lines before the strip stacked. It now stacks while there
     is still room, so the label, the sentence and the override chip each get the full width. */
  .pf-why{grid-template-columns:1fr}
  .pf-why-o{justify-self:start}
}

/* ---------------------------------------------------------------- the smallest phones */
/* At 320px the two tabs in the problem section were 21px wider than the screen, which put a scrollbar on the
   whole page. This is not new, but the homepage is the page going live, so it is fixed here: below 360px the
   tabs take less padding and the "During the event" label is allowed to wrap. */
@media (max-width:360px){
  .rc-t{padding-left:12px;padding-right:12px;white-space:normal;font-size:var(--fs-p)}
  .pf-why-l{white-space:normal}
  .pf-why-o{white-space:normal}
}