/* THE LANDING ON THE METALLIC GREY (the owner, 5 November 2026: "the dark area in the general surface can be made metallic
   grey (again grained like in the green section and shades of grey kind of)"; "the landing page looks a bit too dark"). The
   sheet itself is css/site-metal.css, every public page's; this file, after landing.css, keeps what is the landing's own:
   its words stepped up to read on the grey, the hero's study, its door, the first carousel's stage. */
:root {
    --bg-primary: #3a3e43;
    --bg-secondary: rgba(255, 255, 255, 0.05);
    --bg-card: rgba(22, 25, 29, 0.62);
    --text-secondary: #e4e7ea;
    --text-tertiary: #d2d6da;
    --text-muted: #c8ccd1;
    --card-border: rgba(255, 255, 255, 0.16);
}
/* the sections carried their own near-black grounds: gone, the sheet shows through (a section is the page's width, so a
   shade on one drew a box) */
.section, .tour-section, .timetravel, .final-cta, .footer { background: transparent; }
.tour-row { border-top-color: rgba(255, 255, 255, 0.12); }
/* the carousel's frame: a darker bay in the metal, so the screens stand out */
.coverflow {
    background: linear-gradient(180deg, rgba(14, 16, 19, 0.46), rgba(14, 16, 19, 0.62));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.cf-card { box-shadow: 0 18px 44px -12px rgba(0, 0, 0, 0.62); }
.tour-row-cta { border-color: rgba(255, 255, 255, 0.3); color: #ffffff; }

/* THE STUDY IN THE HERO, BIGGER (the owner: "the space we use to display the study on the hero section is for some reason
   a bit too small"; his sketch fills the green band down to the pills). The buttons now stand in the left column with
   the words, so the study has the column's whole height, and on a wide screen it reaches past the page's rail. */
.hero-inner { grid-template-columns: 1fr 1.2fr; gap: 44px; }
.hero .hero-ways { max-width: none; margin: 26px 0 0; padding: 0; }
.hero-tagline { margin-bottom: 30px; font-size: 1.36rem; }
.hero-latest .hs-card { box-shadow: 0 22px 54px -18px rgba(0, 0, 0, 0.6); border-color: rgba(255, 255, 255, 0.18); }
@media (min-width: 1460px) {
    .hero-latest { margin-right: -56px; }
}
@media (max-width: 1100px) {
    .hero-inner { grid-template-columns: 1fr; }
}

/* THE FIRST CAROUSEL'S STAGE: its screens are what the lab is today, big enough to read */
#cf-primitives { height: 490px; }
#cf-primitives .cf-card { width: 760px; height: 428px; margin: -214px 0 0 -380px; }
#cf-primitives .cf-card img { object-fit: cover; }
@media (max-width: 900px) {
    #cf-primitives { height: 56vw; min-height: 220px; }
    #cf-primitives .cf-card { width: 88vw; height: 49.5vw; margin: -24.75vw 0 0 -44vw; }
}

/* THE DOOR (his look at the hero: "can we make this button more prominent"): as wide as the two pills under it, the one big
   white thing on the green. */
.hero-doors { display: block; max-width: 434px; }
.hero-door:not(.hero-film) {
    display: flex; justify-content: center; width: 100%; gap: 14px;
    padding: 18px 26px; border: 0; border-radius: 16px;
    font-size: 1.36rem; font-weight: 600; letter-spacing: -0.01em;
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6), 0 0 0 5px rgba(255, 255, 255, 0.18);
}
.hero-door:not(.hero-film) img { width: 32px; height: 32px; }
.hero-door:not(.hero-film)::after { content: '\2192'; font-size: 1.5rem; line-height: 1; transition: transform .16s ease; }
.hero-door:not(.hero-film):hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 46px -12px rgba(0, 0, 0, 0.65), 0 0 0 6px rgba(178, 223, 204, 0.55);
}
.hero-door:not(.hero-film):hover::after { transform: translateX(5px); }
.hero .hero-ways { margin-top: 16px; }
.hero .hero-ways .use-with { max-width: 434px; flex-wrap: nowrap; }
@media (max-width: 480px) {
    .hero .hero-ways .use-with { flex-wrap: wrap; }
}

/* THE LANDING'S PICTURES ARE DOORS (T2, 9 November 2026): a hand over each picture of the strip and a small "Open this in
   the lab" while the pointer is on it; a tap on a phone opens it the same */
.cf-card .cf-door { position: relative; display: block; width: 100%; height: 100%; cursor: pointer; }
.cf-card .cf-door img { display: block; }
.cf-door-hint { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 7px 14px;
  border-radius: 999px; background: rgba(6, 22, 15, .84); color: #ffffff; font-size: 13px; line-height: 1.2;
  white-space: nowrap; opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.cf-card .cf-door:hover .cf-door-hint, .cf-card .cf-door:focus-visible .cf-door-hint { opacity: 1; }

/* THE GENTLE STEP (the owner on staging, 10 November 2026: "a confirmation can be asked, Open it in the lab and
   'continue' then it does what it does, a gentle middle step"): the window a picture that plays a test opens first */
/* the owner, 10 November 2026, on its first look: "this explanation text really not necessary, open in the chat is
   enough and why it is so dark ... can look more friendly with lighter matching color to our chat color": the question
   alone, on the Chat's own green field (LabChat's .pr-chat.full: #1e3a2f and hero-field-2026-10-07.jpg), the page behind
   it only lightly dimmed */
.cf-ask { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(6, 22, 15, .22); }
.cf-ask[hidden] { display: none; }
.cf-ask-box { width: min(380px, 100%); padding: 24px 24px 22px; border-radius: 16px; box-sizing: border-box;
  background: #1e3a2f url(/static/landing/img/hero-field-2026-10-07.jpg) 44% center / cover no-repeat;
  border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 22px 54px -18px rgba(0, 0, 0, .55); color: #ffffff;
  text-align: center; }
.cf-ask-box h3 { margin: 0 0 18px; font-size: 21px; font-weight: 600; line-height: 1.3; color: #ffffff; }
.cf-ask-row { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; }
.cf-ask-go { display: inline-block; padding: 10px 24px; border-radius: 999px; background: #ffffff; color: #12352a;
  font-weight: 600; font-size: 15px; text-decoration: none; }
.cf-ask-go:hover, .cf-ask-go:focus-visible { background: #e3f4ec; outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }
.cf-ask-no { padding: 10px 20px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .45);
  color: #ffffff; font: inherit; font-size: 15px; cursor: pointer; }
.cf-ask-no:hover, .cf-ask-no:focus-visible { background: rgba(255, 255, 255, .16); border-color: #ffffff; outline: none; }