/* Landing type & grey system (design system: Inter 400/500, LT Remark only
   for the one editorial line; white text, pure greys, Sage for tiny accents).
   One scale for every section so headings, labels and copy match. */
:root{
  --lt-white:#F5F5F5;        /* headings */
  --lt-soft:#DDDDDD;         /* emphasised copy */
  --lt-body:#A3A3A3;         /* descriptions, card copy, leads */
  --lt-muted:#8C8C8C;        /* eyebrows */
  --lt-accent:#A4BC80;       /* heading second line: brand Sage */
  --lt-faint:#767676;        /* notes, footnotes, meta */
  --lt-h2:clamp(38px,3.9vw,56px);
}

/* Section headings: one size, one weight; the second line is Sage. */
.landing-v2 main h2,
.landing-v2 .restored-title,.landing-v2 .solution-heading h2,.landing-v2 .how-heading h2,.landing-v2 .benefits-heading h2,
.landing-v2 .tour-heading h2,.landing-v2 .roles-heading h2,.landing-v2 .testimonials-head h2,.landing-v2 .lp-heading h2,.landing-v2 .landing-faq-heading h2{
  font-family:Inter,Arial,sans-serif;font-size:var(--lt-h2);font-weight:400;line-height:1.08;letter-spacing:-.045em;color:var(--lt-white)}
.landing-v2 main h2 span,.landing-v2 .tour-heading h2 span{color:var(--lt-accent);font-weight:400}
.landing-v2 #final h2{font-family:"LT Remark",Georgia,serif;letter-spacing:-.015em;line-height:1.12}
.landing-v2 .solution-audience{color:var(--lt-soft)}
.landing-v2 .solution-audience span{color:var(--lt-muted)}

/* Eyebrows: all "// label", 12px Inter, grey */
.landing-v2 .eyebrow,.landing-v2 .restored-label,.landing-v2 .tour-label,.landing-v2 .landing-faq-label{
  display:block;margin-bottom:20px;font:400 12px/1.4 Inter,Arial,sans-serif;letter-spacing:.06em;text-transform:none;color:var(--lt-muted)}
.landing-v2 .tour-label::before{content:none}
.landing-v2 .tour-label{justify-content:flex-end;text-align:right}

/* Leads under headings */
.landing-v2 .how-heading p,.landing-v2 .mk-hero-sub{color:var(--lt-body)}

/* Card titles: 22px / 500 across how-it-works and benefits */
.landing-v2 .how-approved-card h3,.landing-v2 .benefit-card h3{font:500 21px/1.25 Inter,Arial,sans-serif;letter-spacing:-.02em;color:var(--lt-white)}
.landing-v2 .lp-card h3{font-weight:500;letter-spacing:-.02em;color:var(--lt-white)}

/* Card and section copy: one body grey */
.landing-v2 .how-approved-card p,.landing-v2 .benefit-card p,.landing-v2 .landing-faq-answer p,.landing-v2 .lp-card header p,
.landing-v2 .restored-problem-stat-desc,.landing-v2 .role-outcomes p,#workspace-tour .tour-caption,.landing-v2 .tour-description{color:var(--lt-body)}
.landing-v2 .benefit-card p{font-size:14px;line-height:1.6}
.landing-v2 .role-outcomes p{font-size:13px}
.landing-v2 .problem-takeaway{color:var(--lt-soft)}
.landing-v2 .problem-takeaway span{color:var(--lt-muted)}

/* Small meta and notes: one faint grey */
.landing-v2 .how-step-label{color:var(--lt-muted)}
.landing-v2 .lp-period,.landing-v2 .lp-billing-note,.landing-v2 .lp-footnote,.landing-v2 .lp-comparison-note,.landing-v2 .testimonials-note,
.landing-v2 .restored-problem-stat-source,.landing-v2 .role-footer>span{color:var(--lt-faint)}

/* Sage stays for tiny accents only: the role name and the active marks */
.landing-v2 .role-name{color:#A4BC80}
#problem .restored-title,#problem h2{font-size:var(--lt-h2);line-height:1.08;letter-spacing:-.045em;color:var(--lt-white)}
#problem .restored-label{font-size:12px;letter-spacing:.06em;color:var(--lt-muted)}
.landing-v2 .how-step-label{font-size:11px;letter-spacing:.08em}
/* Roles: one quiet line under the block for calls outside the five roles. */
.landing-v2 #roles .roles-more{margin:22px 0 0;color:var(--lt-muted);font-size:15px;text-align:right}
@media(max-width:760px){.landing-v2 #roles .roles-more{text-align:left}}
/* How it works: the heading on one line, centred. */
.landing-v2 #capture .how-heading{max-width:none;text-align:center}
.landing-v2 #capture .how-heading h2{white-space:nowrap}
/* Down to tablets the size shrinks so the line still fits; on phones it would
   get too small, so there the second half goes to its own line at full size. */
.landing-v2 #capture .how-heading h2{font-size:min(var(--lt-h2),calc((100vw - 40px) / 17))}
@media(max-width:680px){.landing-v2 #capture .how-heading h2{white-space:normal;font-size:var(--lt-h2)}.landing-v2 #capture .how-heading h2 span{display:block}}
/* Problem heading: the whole title in white. */
.landing-v2 #problem-title span{color:var(--lt-white)}
/* Solution audience line: a Forest-to-Sage gradient across the line. */
.landing-v2 #solution .solution-audience .sa-line{color:#A4BC80;background:linear-gradient(95deg,#5E9C82 0%,#8DB58A 38%,#A4BC80 62%,#D6E6B0 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* Feature links under the benefit cards, and the section link. */
.lc-more,.lc-all,.lc-compare a{color:#e8e8e8;text-decoration:underline;text-decoration-color:#ffffff33;text-underline-offset:3px}
.lc-more:hover,.lc-all:hover,.lc-compare a:hover{text-decoration-color:currentColor}
.lc-more{display:inline-block;margin-top:14px;font-size:13px}
.lc-all{display:inline-block;margin-top:18px;font-size:14px}
.lc-compare{margin-top:14px;text-align:center;font-size:14px}
.lc-closing{margin:-6px 0 26px;color:#9a9a9a;font-size:15px;text-align:center}

/* ── Meetlens hub → "What is Meetlens" card (no button look) ────────── */
.integration-map .integration-hub{cursor:pointer;pointer-events:auto}
.integration-map .integration-hub:focus-visible{outline:1px solid #ffffff66;outline-offset:6px;border-radius:12px}
.integration-map{contain:layout}
.hub-card{position:absolute;left:50%;top:50%;z-index:5;width:min(460px,86vw);padding:24px 26px 22px;transform:translate(-50%,calc(-100% - 52px)) scale(.2);transform-origin:50% calc(100% + 52px);opacity:0;visibility:hidden;
  border:1px solid transparent;border-radius:12px;background:linear-gradient(150deg,#1b1b1bf2,#111111f2 52%,#151515f2) padding-box,linear-gradient(150deg,#5a5a5a,#262626 45%,#3a3a3a) border-box;backdrop-filter:blur(14px);box-shadow:0 30px 80px -20px #000,0 0 0 1px #0006;
  transition:transform .5s cubic-bezier(.2,.9,.25,1.05),opacity .3s,visibility 0s .5s}
.hub-open .hub-card{transform:translate(-50%,calc(-100% - 52px)) scale(1);opacity:1;visibility:visible;transition:transform .5s cubic-bezier(.2,.9,.25,1.05),opacity .3s,visibility 0s}
.hub-open .hub-card .lid-text span:nth-child(1){transition-delay:.25s}.hub-open .hub-card .lid-text span:nth-child(2){transition-delay:.5s}.hub-open .hub-card .lid-text span:nth-child(3){transition-delay:.75s}
.hub-card .lid-link{opacity:0;transition:opacity .4s 1s}.hub-open .hub-card .lid-link{opacity:1}
@media(max-width:600px){.hub-card{top:49%;width:calc(100vw - 28px)}}
@media(prefers-reduced-motion:reduce){.hub-card,.hub-card .lid-text span{transition:none}}
.lid-kicker{margin:0 0 10px;font:500 11px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#9a9a9a}
.lid-text{margin:0;font:400 16px/1.6 Inter,sans-serif;color:#e9e9e9;letter-spacing:-.005em}
.lid-link{display:inline-block;margin-top:14px;font-size:14px}
.lid-text a,.lid-link{color:#fff;text-decoration:underline;text-decoration-color:#ffffff40;text-underline-offset:3px}
.lid-text a:hover,.lid-link:hover{text-decoration-color:currentColor}
.lid-close{position:absolute;top:10px;right:10px;width:28px;height:28px;border:0;border-radius:50%;background:none;color:#9a9a9a;font-size:18px;cursor:pointer}
.lid-close:hover{color:#fff;background:#ffffff12}
.integration-map.hub-open{z-index:6}.integration-flow:has(.hub-open) .integration-value{opacity:0;transition:opacity .2s}

/* Testimonials: real reviews are longer than the prototype's one-liners, so
   the quote is body text and the cards grow to fit it. */
.landing-v2 .tc-grid{align-items:stretch;min-height:0}
.landing-v2 .tc-slot{display:flex}
.landing-v2 .tc-card,.landing-v2 .tc-slot:nth-child(2) .tc-card{flex:1;height:auto;min-height:0;padding-bottom:18px}
/* The source line sits midway between the divider and the card's bottom edge. */
.landing-v2 .tc-card footer{margin-top:auto;padding:18px 0 0}
.landing-v2 .tc-card blockquote{margin:14px 0 26px;color:var(--lt-soft);font:400 15.5px/1.62 Inter,Arial,sans-serif;letter-spacing:-.005em;text-wrap:pretty}
.landing-v2 .tc-card blockquote p{margin:0 0 .85em}
.landing-v2 .tc-card blockquote p:last-child{margin-bottom:0}
@media(max-width:680px){.landing-v2 .tc-card,.landing-v2 .tc-slot:nth-child(2) .tc-card{height:auto;min-height:0}.landing-v2 .tc-card blockquote{font-size:15px}}

/* Testimonials heading: label and title centred over the cards. */
.landing-v2 .testimonials-head{justify-content:center;text-align:center}
.landing-v2 .testimonials-head h2{margin-inline:auto}
/* Testimonial arrows: centred under the cards, the counter between them. */
.landing-v2 .tc-navigation{justify-content:center;align-items:center}
.landing-v2 .tc-navigation-actions{align-self:center}
.landing-v2 .tc-navigation [data-direction="previous"]{order:0}
.landing-v2 .tc-index{order:1;min-width:64px;margin:0 6px;text-align:center}
.landing-v2 .tc-navigation [data-direction="next"]{order:2}
/* Review source: a grey Chrome mark and "Chrome Web Store review". */
.landing-v2 .tc-card footer{justify-content:flex-start}
.landing-v2 .tc-person{display:flex;align-items:center;gap:10px}
.landing-v2 .tc-avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#ffffff0d;color:#9a9a9a;box-shadow:inset 0 0 0 1px #ffffff24}
.landing-v2 .tc-avatar svg{width:16px;height:16px}
.landing-v2 .tc-name{color:var(--lt-muted);font:400 12px/1.3 Inter,Arial,sans-serif;letter-spacing:0}
/* Problem stats: the source is plain text now, not a link. */
#problem span.restored-problem-stat-source,#problem span.restored-problem-stat-source:hover{text-decoration:none;color:var(--lt-faint);cursor:default}

/* Under the workspace tour: two install panels in the brand gradients
   (Tide for Chrome, Sky for the Mac app). */
.landing-v2 .tour-get{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.landing-v2 .tour-get-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:0;padding:22px 24px;border:1px solid #ffffff1a;border-radius:10px;overflow:hidden;isolation:isolate;color:#fff;text-decoration:none;transition:transform .35s cubic-bezier(.2,.9,.25,1)}
.landing-v2 .tour-get-card:hover{transform:translateY(-2px)}
.landing-v2 .tour-get-card:focus-visible{outline:1px solid #ffffff99;outline-offset:3px}
.landing-v2 .tgc-chrome{background:linear-gradient(135deg,#16453F 0%,#2E6660 55%,#4A7E78 100%)}
.landing-v2 .tgc-mac{background:linear-gradient(135deg,#1E2F44 0%,#334E70 55%,#4F7196 100%)}
.landing-v2 .tgc-k{font-size:11px;letter-spacing:.06em;color:#ffffffa6}
.landing-v2 .tgc-h{margin-top:6px;font-size:clamp(22px,2vw,28px);font-weight:400;letter-spacing:-.035em;line-height:1.1}
.landing-v2 .tgc-s{margin-top:6px;max-width:320px;font-size:13px;line-height:1.5;color:#ffffffb3}
.landing-v2 .tgc-btn{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:8px 13px;border-radius:6px;background:#F5F5F5;color:#111;font-size:13px;font-weight:500}
.landing-v2 .tgc-btn i{display:grid}
.landing-v2 .tgc-btn svg{width:16px;height:16px}
.landing-v2 .tgc-big{position:absolute;right:-22px;bottom:-30px;width:160px;height:160px;color:#ffffff14;z-index:-1}
.landing-v2 .tgc-big svg{width:100%;height:100%}
@media(max-width:700px){.landing-v2 .tour-get{grid-template-columns:1fr}}

/* FAQ heading: centred, two lines (questions / answers). */
.landing-v2 .landing-faq-heading{text-align:center}
.landing-v2 .landing-faq-heading h2 span{display:block}

/* Role panels: a plain Start free button, same as the rest of the page. */
.landing-v2 .role-footer .button{min-height:40px;padding:10px 18px;font-size:13px;font-weight:500}

/* Pricing cards: each plan gets its brand hue as a soft glow from the top
   and a gradient hairline (Free: Sky, Pro: Forest/Tide, Business: Iris).
   Pro, the popular plan, gets a 2px animated gradient ring, an outer glow
   and sits a little higher. */
.landing-v2 .lp-card{--lp-glow:#749AB7;--lp-edge1:#749AB7aa;--lp-edge2:#ffffff14;
  background:
    radial-gradient(ellipse 100% 60% at 50% -10%,color-mix(in srgb,var(--lp-glow) 38%,transparent),transparent 72%) padding-box,
    linear-gradient(160deg,#181818,#101010 60%,#131313) padding-box,
    linear-gradient(160deg,var(--lp-edge1),var(--lp-edge2) 55%,#ffffff10) border-box;
  transition:transform .4s cubic-bezier(.2,.9,.25,1),box-shadow .4s}
.landing-v2 .lp-card:hover{transform:translateY(-4px);box-shadow:0 30px 70px -40px color-mix(in srgb,var(--lp-glow) 70%,transparent)}
.landing-v2 .lp-card[data-tier="business"]{--lp-glow:#827696;--lp-edge1:#827696aa}
.landing-v2 .lp-card.lp-featured{--lp-glow:#588E88;
  border-width:2px;transform:translateY(-10px);
  background:
    radial-gradient(ellipse 100% 65% at 50% -10%,#588E8880,transparent 72%) padding-box,
    radial-gradient(ellipse 70% 40% at 50% 110%,#A4BC8022,transparent 70%) padding-box,
    linear-gradient(160deg,#1a1d1c,#101211 60%,#141615) padding-box,
    conic-gradient(from var(--lp-angle,0deg),#A4BC80,#588E88,#B9CCC3,#827696,#A4BC80) border-box;
  box-shadow:0 0 0 1px #A4BC8014,0 30px 90px -30px #588E8880,0 0 60px -20px #A4BC8040;
  animation:lp-spin 8s linear infinite}
.landing-v2 .lp-card.lp-featured:hover{transform:translateY(-14px)}
@property --lp-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes lp-spin{to{--lp-angle:360deg}}
.landing-v2 .lp-featured .lp-badge{border:0;background:linear-gradient(100deg,#A4BC80,#B9CCC3);color:#142D26;font-weight:600}
.landing-v2 .lp-card.lp-featured .lp-price{background:linear-gradient(95deg,#fff 30%,#D6E6B0);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@media(max-width:900px){.landing-v2 .lp-card.lp-featured{transform:none}.landing-v2 .lp-card.lp-featured:hover{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.landing-v2 .lp-card.lp-featured{animation:none}.landing-v2 .lp-card{transition:none}}
/* Pro badge centred on the card's top edge. */
.landing-v2 .lp-featured .lp-badge{left:50%;right:auto;transform:translateX(-50%);white-space:nowrap}

/* Motion (reveal.js): card rows below the first screen rise in as they come
   into view, from a faint state (never an empty hole), cards a beat apart.
   Hidden with no transition (nothing animates away on load); only the way in
   is animated. Standalone translate, so it never fights a card's own
   transform (hover lifts, the raised Pro card). */
.landing-v2.lr-on [data-lr="rise"]{opacity:.2;translate:0 18px}
.landing-v2.lr-on [data-lr].lr-in{opacity:1;translate:0 0;transition:opacity .5s ease-out,translate .6s cubic-bezier(.16,1,.3,1);transition-delay:var(--lr-delay,0ms)}
.landing-v2.lr-on [data-lr].lr-now{transition-duration:.25s,.3s;transition-delay:0ms}
@media(prefers-reduced-motion:reduce){.landing-v2.lr-on [data-lr]{opacity:1!important;translate:none!important;transition:none!important}}

/* FAQ: one centred column; the two halves stack in their original order. */
.landing-v2 .landing-faq-grid{grid-template-columns:1fr;gap:12px;max-width:680px;margin-inline:auto}

/* Benefit cards: titles line up across a row whatever the copy length (the
   prototype pushed the text to the bottom); the Learn more links share the
   bottom edge instead. */
.landing-v2 .benefit-card{justify-content:flex-start}
.landing-v2 .benefit-card>div{display:flex;flex:1;flex-direction:column;align-items:flex-start}
.landing-v2 .benefit-card .lc-more{margin-top:auto;padding-top:14px}
/* Reviews on phones: one card, swipe left or right to change it. No arrows. */
@media(max-width:680px){.landing-v2 .tc-grid{touch-action:pan-y}.landing-v2 .tc-slot{display:none}.landing-v2 .tc-slot:nth-child(2){display:flex}.landing-v2 .tc-navigation-actions button{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.landing-v2 .tc-navigation-actions button:focus-visible{position:static;width:42px;height:42px;margin:0;overflow:visible;clip:auto}.landing-v2 .tc-navigation-actions{align-self:center}.landing-v2 .tc-index{margin:0}}
/* Phones: the workspace heading reads left like its neighbours, not pinned right. */
@media(max-width:900px){.landing-v2 #workspace-tour .tour-heading,.landing-v2 #workspace-tour .tour-label{text-align:left;margin-left:0;justify-content:flex-start}}
/* Phones: the five role tabs in one row that scrolls sideways, not 3 + 2. */
@media(max-width:700px){.landing-v2 .roles-tabs{display:flex;flex-direction:row;gap:20px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}.landing-v2 .roles-tabs::-webkit-scrollbar{display:none}.landing-v2 .roles-tabs button{flex:none;width:auto;min-height:44px;padding:7px 0;white-space:nowrap;font-size:13px}.landing-v2 .roles-tabs button:hover{padding-left:0}}
/* Benefit cards: a still brand glow in each card, rising from the symbol
   corner, with a thin lit top edge. Each card takes its own brand hue. */
.landing-v2 .benefit-card{--bc-glow:#588E88;position:relative;isolation:isolate;overflow:hidden;transition:border-color .25s ease}
.landing-v2 .benefit-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--bc-glow) 22%,transparent),transparent 60%),radial-gradient(80% 70% at 100% 100%,color-mix(in srgb,var(--bc-glow) 8%,transparent),transparent 70%)}
.landing-v2 .benefit-card::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;background:linear-gradient(90deg,color-mix(in srgb,var(--bc-glow) 70%,transparent),transparent 65%)}
.landing-v2 .benefit-card:nth-child(2){--bc-glow:#749AB7}
.landing-v2 .benefit-card:nth-child(3){--bc-glow:#A4BC80}
.landing-v2 .benefit-card:nth-child(4){--bc-glow:#827696}
.landing-v2 .benefit-card:nth-child(5){--bc-glow:#749AB7}
.landing-v2 .benefit-card:nth-child(6){--bc-glow:#A4BC80}
.landing-v2 .benefit-card .benefit-symbol{border-color:color-mix(in srgb,var(--bc-glow) 35%,#ffffff1c)}
.landing-v2 .benefit-card:hover{border-color:color-mix(in srgb,var(--bc-glow) 40%,transparent)}

/* Phones: section headings at 30px with balanced lines, so a heading takes two or three
   even lines instead of four with a lone word. Chrome does not balance across a <br>, so
   the coloured second line becomes its own block and the <br> steps aside. */
@media(max-width:540px){
.landing-v2{--lt-h2:30px}
.landing-v2 main h2{font-size:30px}
.landing-v2 main :is(h1,h2),.landing-v2 main :is(h1,h2) span{text-wrap:balance}
.landing-v2 main h2>span{display:block}
.landing-v2 main h2 br{display:none}
.landing-v2 .mk-hero h1{font-size:30px}
}