/* The front page's own styles (index.html, first drafted as draft.html), on top of styles.css. */

/* Header menu: from tablet width up; phones have the bar at the bottom instead */
.menu { display: none; gap: 4px; margin-left: auto; margin-right: 16px; }
.menu a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px; color: var(--ink); font: 600 16px/1 var(--font-heading); text-decoration: none; border-radius: 999px; }
.menu a:hover { background: var(--crimson-50); }
@media (min-width: 768px) { .menu { display: flex; } }

/* Figures and answers only Olivia can give */
.to-add { border: 2px dashed var(--gold); background: #fff8e1; color: var(--ink); }

/* The closing line on the dark panels */
.cost { margin-top: 26px; font: 700 clamp(18px, 2vw, 22px)/1.4 var(--font-heading); color: #fff; max-width: 30em; }
.cost strong { color: var(--pink); }

/* The hero's hive: the logo with each engine named in its cell (in place of the sticker and the plain mark).
   Above the heading on phones, to the right of it from tablet width. */
.hero-hive { position: relative; width: 260px; aspect-ratio: 1; margin: 0 auto 16px; }
@media (min-width: 768px) { .hero-hive { position: absolute; right: 40px; top: 50%; width: 300px; margin: 0; transform: translateY(-50%); } }
@media (max-width: 767px) { .hero h1 { margin-top: 0; } }
.hero-hive .hive-centre { color: #fff; }
.hero .hero-hive a { padding: 0 4px; font: 800 13px/1.1 var(--font-heading); text-decoration: none; }
@media (min-width: 768px) { .hero .hero-hive a { font-size: 14px; } }
.hero .hero-hive a:hover { transform: scale(1.06); }
.hero .hero-hive a:focus-visible { outline: none; transform: scale(1.06); text-decoration: underline 3px; text-underline-offset: 4px; filter: brightness(0.9); }

/* The hero's second line, and the longer paragraphs on dark panels */
.lede-small { position: relative; margin-top: 16px; max-width: 34em; font-size: 17px; }
@media (min-width: 768px) { .lede-small { max-width: calc(100% - 300px); } }
.imagine { margin-top: 20px; max-width: 38em; font-size: 18px; line-height: 1.6; }

/* The six engines laid out as the logo: six cells round the "O", placed by the logo's own
   100 by 100 drawing (each cell 33 wide and 28.58 tall, centred on the points below) */
.engine-tabs { position: relative; width: min(100%, 380px); aspect-ratio: 1; margin: 12px auto 0; }
@media (min-width: 768px) { .engine-tabs { width: 520px; } }
.engine-prompt { margin-top: 28px; text-align: center; font: 700 17px/1.3 var(--font-heading); color: var(--crimson); }
.hive-centre { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--ink); }
.cell-top { left: 33.5%; top: 5.71%; }
.cell-top-right { left: 59.48%; top: 20.71%; }
.cell-bottom-right { left: 59.48%; top: 50.71%; }
.cell-bottom { left: 33.5%; top: 65.71%; }
.cell-bottom-left { left: 7.52%; top: 50.71%; }
.cell-top-left { left: 7.52%; top: 20.71%; }
/* A cell of either hive: the hero's links and the tabs below. Each is its exact logo colour,
   and every name is white with a faint soft edge, so one colour reads on all six.
   (.hero in front so the hero's cells beat styles.css's white hero links.) */
.hero .hero-hive a, .engine-tabs button {
  position: absolute;
  width: 33%;
  height: 28.58%;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: var(--c);
  color: #fff;
  text-shadow: 0 0 1px rgba(39, 30, 36, 0.55), 0 1px 2px rgba(39, 30, 36, 0.35);
  transition: transform 160ms;
}
/* The site darkens teal elsewhere for white text; the hives use the logo's own */
.hero-hive .c-kitchen, .engine-tabs .c-kitchen { --c: var(--teal); }
@media (prefers-reduced-motion: reduce) { .hero-hive a, .engine-tabs button { transition: none; } }
/* The hero's lettering, a size up to suit the bigger hive */
.engine-tabs button { padding: 0 4px; border: 0; font: 800 15px/1.1 var(--font-heading); cursor: pointer; isolation: isolate; }
@media (min-width: 768px) { .engine-tabs button { font-size: 21px; } }
/* Every cell stays the logo's size and place; the open one gets a ring in a darker shade of its own colour */
.engine-tabs button[aria-selected="true"] { background: color-mix(in srgb, var(--c) 60%, #000); }
.engine-tabs button[aria-selected="true"]::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 5px 6px;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: var(--c);
}
.engine-tabs button:hover { filter: brightness(1.08); }
.engine-tabs button:focus-visible { outline: none; text-decoration: underline 3px; text-underline-offset: 4px; filter: brightness(0.9); }

/* The engine colours come from the hive's .c-* classes in styles.css; each panel adds its pale tint */
.c-sales { --tint: var(--crimson-50); }
.c-kitchen { --tint: var(--teal-50); }
.c-demand { --tint: var(--pink-50); }
.c-ops { --tint: var(--blue-50); }
/* The two new engines take the logo's last two cells, with ink text as white is too faint on them */
.c-people { --c: var(--orange); --t: var(--ink); --tint: #fff1e8; }
.c-insight { --c: var(--gold); --t: var(--ink); --tint: #fdf0c4; }

.engine-panel { margin-top: 20px; padding: 24px 20px; border-radius: 20px; background: var(--tint); border-top: 6px solid var(--c); }
@media (min-width: 768px) { .engine-panel { padding: 36px; } }
.pain-line { color: var(--muted); font-size: 16px; }
.promise { margin-top: 6px; font: 800 clamp(20px, 2.3vw, 26px)/1.2 var(--font-heading); color: var(--ink); max-width: 22em; }
.top-three { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 24px; }
@media (min-width: 768px) { .top-three { grid-template-columns: repeat(3, 1fr); } }
.top-three .shot { margin: 0 0 12px; }
.top-three strong { display: block; font: 700 17px/1.3 var(--font-heading); color: var(--ink); }
.also-label { margin-top: 28px; font: 700 14px/1 var(--font-heading); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.chips { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: #fff; color: var(--ink); font: 600 15px/1.3 var(--font-heading); }
.chips li::before { content: ""; width: 12px; height: 10px; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); background: var(--c); }
.engine-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 28px; }
.proof { flex: 1 1 280px; padding: 14px 18px; border-radius: 14px; font: 600 16px/1.4 var(--font-heading); }

/* Proof figures */
.stats { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 16px; clear: both; }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stats li { padding: 20px; border-radius: 16px; }
.stats strong { display: block; font: 800 32px/1 var(--font-display); color: var(--crimson); margin-bottom: 6px; }

/* How it works: three numbered cells */
.steps { list-style: none; counter-reset: step; margin: 32px 0 0; padding: 0; display: grid; gap: 20px; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { counter-increment: step; position: relative; padding: 76px 20px 20px; border-radius: 16px; background: var(--crimson-50); }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 20px;
  top: 20px;
  width: 46px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: var(--crimson);
  color: #fff;
  font: 800 20px/1 var(--font-heading);
}
.steps strong { display: block; margin-bottom: 4px; font: 700 18px/1.3 var(--font-heading); color: var(--ink); }

/* Questions owners ask */
.faq { margin-top: 28px; border-top: 3px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 54px; padding: 8px 0; font: 700 17px/1.3 var(--font-heading); color: var(--ink); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+" / ""; flex: none; font-size: 28px; color: var(--crimson); }
.faq details[open] summary::after { content: "\2212" / ""; }
.faq details p { padding: 0 0 18px; max-width: 40em; }
.faq details p.to-add { padding: 10px 14px; margin-bottom: 18px; border-radius: 10px; }

/* Two columns side by side from tablet width */
.two-up { display: grid; gap: 40px; margin-top: 32px; }
#safe .two-up { margin-top: 0; }
@media (min-width: 900px) { .two-up { grid-template-columns: 1fr 1fr; } }
.two-up h3, .marketplace h3 { margin: 0; font: 800 19px/1.25 var(--font-heading); color: var(--ink); }
.two-up .parts div { grid-template-columns: 1fr; gap: 4px; }
.two-up .parts dd { padding-left: 30px; }

/* The fun: live features in gold-edged cells */
.fun-list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.fun-list li { border: 2px solid var(--gold); border-radius: 16px; padding: 16px 18px; font-size: 16px; background: #fff; }
.fun-list strong { display: block; margin-bottom: 4px; font: 700 17px/1.3 var(--font-heading); color: var(--ink); }
.dice { margin-top: 24px; padding: 14px 18px; border-radius: 14px; max-width: 40em; }

/* Coming next: only the marketplace, as the next chapter of Demand (DEC-444) */
.marketplace { margin-top: 28px; padding: 24px 20px; border-radius: 20px; background: var(--pink-50); border-top: 6px solid var(--pink); }
.marketplace p:not(.actions) { margin-top: 10px; max-width: 40em; }
.marketplace .actions { margin-top: 20px; }
.marketplace .btn { padding-top: 12px; padding-bottom: 12px; line-height: 1.25; }
.btn-ghost { background: #fff; color: var(--crimson-hover); box-shadow: inset 0 0 0 2px var(--crimson); }
.btn-ghost:hover { background: var(--crimson-50); }

/* The close */
.close h2 { max-width: 18em; text-transform: none; }
.hero .actions > a:not(.btn), .close .actions a:not(.btn) { display: inline-flex; align-items: center; min-height: var(--tap); }

/* Phones: the demo one tap away at the bottom (instead of in the header), hidden once the form is on screen */
@media (max-width: 767px) { .top .btn-small { display: none; } }
.cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; justify-content: center; padding: 10px 16px; background: rgba(255, 255, 255, 0.96); border-top: 1px solid var(--line); }
.cta-bar .btn { width: 100%; justify-content: center; }
body { padding-bottom: 76px; }
@media (min-width: 768px) { .cta-bar { display: none; } body { padding-bottom: 0; } }
/* The demo form's error, in the brand red rather than the thank-you's teal */
.sent.failed { border-left-color: var(--crimson); }