/* The home page as a story (E14.70): one day with a four-person team, an hour per screen, the price at the end.
   Loaded after style.css, which keeps the header, buttons, menu, plans, FAQ, footer and the shared vocabulary (E14.78). One font, the app's (E14.71):
   the hierarchy comes from size and weight. */

/* ---------- opening ---------- */
.open { padding: 56px 0 24px; text-align: left; }
.open .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.open-side { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
/* the phone talking to the AI: beside the title from 960 px, not shown on a phone so the day comes right after the button */
.open-shot { display: none; margin: 0; }
.open h1, .open .text, .open .btns { margin: 0; }
.open .btns { justify-content: flex-start; }
.open h1 { font-family: var(--font-display); font-weight: 750; font-size: clamp(34px, 9vw, 44px); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.open h1 em { font-style: normal; color: var(--green-hi); }
.open .text { max-width: 600px; }
.open .btns { margin-top: 4px; }
.open-note { font-size: 15px; line-height: 1.5; color: var(--dim); }
/* the four facts that matter to a European buyer, right under the button (E14.77) */
.open-trust { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 4px 0 0; }
.open-trust span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; font-size: 15px; color: var(--muted); }
.open-trust span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }

/* ---------- the day ---------- */
.day { padding-top: 24px; }
.hour { padding: 48px 0; border-top: 1px solid var(--line); }
.hour .wrap { display: flex; flex-direction: column; gap: 18px; }
.hour .when { font-size: clamp(64px, 20vw, 88px); color: var(--dim); }
.hour .when time { font-variant-numeric: tabular-nums; }
.hour h2 { font-size: clamp(28px, 7.2vw, 34px); }
.hour .text { max-width: 560px; }
/* two phones side by side (17:45) */
.shots-2 { display: grid; gap: 20px; justify-items: center; margin-top: 8px; }
.shots-2 .shot { margin: 0; width: min(300px, 100%); }
/* 09:15: the typed name, then the task in its place, once the picture is in view */
.typed { position: relative; }
.typed img + img { position: absolute; inset: 0; opacity: 0; }
.typed.in img + img, html:not(.reveals) .typed img + img { animation: typed 5s ease-out 1.2s forwards; }
@keyframes typed { 0%, 55% { opacity: 0; } 70%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .typed img + img { animation: none; opacity: 1; } }

/* ---------- the bill ---------- */
.bill { padding: 80px 0; text-align: center; border-top: 1px solid var(--line); }
.bill .wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.bill-lead { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 5.5vw, 28px); line-height: 1.25; color: var(--text); }
.bill-big { font-family: var(--font-display); font-weight: 750; letter-spacing: -0.045em; font-size: clamp(96px, 28vw, 260px); line-height: 1; color: var(--green-hi); white-space: nowrap; font-variant-numeric: lining-nums; }
.bill-sub { max-width: 520px; font-size: 17px; line-height: 1.6; color: var(--muted); }
.bill-sub strong { color: var(--text); }
.bill-more { font-size: 15px; color: var(--dim); }

/* ---------- plans: the price per person on each card, the AI as requests ---------- */

.plan-each { margin-top: -6px; font-size: 15px; font-weight: 650; color: var(--green-hi); }
.plan-facts dd small { display: block; font-size: 13px; font-weight: 400; color: var(--dim); }

/* ---------- questions and the end ---------- */

/* phone: the call to action stays at hand between the opening and the end */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: rgba(18, 20, 24, .94); border-top: 1px solid var(--line); }
.dock .btn { flex: 1; }
.dock[hidden] { display: none; }

@media (min-width: 600px) {
  .shots-2 { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; }
}
@media (min-width: 960px) {
  .dock { display: none !important; }
  .open { padding: 96px 0 40px; }
  .open .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 48px; }
  .open-side { gap: 24px; }
  .open-shot { display: block; justify-self: end; width: min(300px, 100%); }
  .open-shot img { width: 100%; height: auto; }
  .open h1 { font-size: clamp(56px, 5.4vw, 80px); max-width: 1040px; }
  .open .text { font-size: 20px; max-width: 680px; }
  .day { padding-top: 40px; }
  .hour { padding: 72px 0; }
  /* a wide screen (a list, the Gantt, the chat): the hour on the left, the sentence on the right, the picture full width under them.
     A narrow one (a task, a comment, a phone): text and picture side by side. */
  .hour .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px clamp(40px, 5vw, 80px); align-items: start; }
  .hour .stack { display: contents; }
  .hour .when { grid-column: 1; grid-row: 1 / span 3; margin: -14px 0 0 -6px; }
  .hour .stack > :not(.when) { grid-column: 2; max-width: 640px; }
  .hour .stack > h2 { margin-top: 10px; }
  .hour .shot { grid-column: 1 / -1; grid-row: 4; margin-top: 28px; }
  .hour .when { font-size: clamp(120px, 11vw, 168px); }
  .hour h2 { font-size: clamp(36px, 3.2vw, 46px); }
  .hour .text { font-size: 18px; }
  .hour.narrow .wrap { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; }
  .hour.narrow .stack { display: flex; flex-direction: column; gap: 18px; }
  .hour.narrow .stack > :not(.when) { max-width: 560px; }
  .hour.narrow .shot, .hour.narrow .shots-2 { grid-column: auto; grid-row: auto; margin-top: 0; }
  .hour.narrow .shots-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; justify-items: stretch; }
  .hour.narrow .shots-2 .shot { width: 100%; }
  .hour.narrow.flip .stack { order: 2; }
  .hour.narrow .when { margin: -10px 0 8px -6px; }
  .bill { padding: 140px 0 120px; }
  .bill-lead { font-size: 32px; }
  .bill-sub { font-size: 19px; max-width: 600px; }
  .plan-each { margin-top: -10px; }
}

/* ---------- ask the AI anything: what you say, what it does ---------- */
.pilot { padding: 72px 0 0; }
.pilot .wrap { display: flex; flex-direction: column; gap: 18px; }
.pilot-side { display: flex; flex-direction: column; gap: 16px; }
.pilot-shots { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.pilot-shots .shot { margin: 0; }
.pilot .asks li { font-size: 15.5px; padding: 10px 14px; }
.pilot h2 { font-size: clamp(30px, 7.5vw, 38px); }
.pilot .text { max-width: 640px; }
.asks { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.asks li { justify-self: start; max-width: 560px; padding: 12px 16px; border-radius: 16px 16px 16px 4px; background: var(--card-hi); border: 1px solid var(--border); font-size: 16.5px; line-height: 1.5; color: var(--text); }
.pilot-does { margin-top: 10px; font-size: 16.5px; line-height: 1.65; color: var(--muted); max-width: 720px; }
.pilot-does strong { color: var(--text); }

@media (min-width: 960px) {
  .pilot { padding-top: 120px; }
  .pilot .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(40px, 5vw, 80px); align-items: start; }
  .pilot-side { grid-column: 1; gap: 18px; }
  .pilot-shots { grid-column: 2; grid-row: 1; margin-top: 8px; gap: 20px; }
  .pilot h2 { font-size: 44px; }
  .pilot .text { font-size: 18px; }
  .asks { gap: 10px; }
  .asks li { font-size: 15.5px; padding: 10px 14px; }
}

/* ---------- switching tools: three steps and two arrows, in the style of the labels and rules of the page (E14.75) ---------- */
.flow { display: grid; gap: 6px; margin-top: 28px; }
.flow-node { padding: 14px 16px; border: 1px solid var(--border-hi); border-radius: 12px; background: var(--card); }
.flow-node strong { display: block; font-size: 17px; font-weight: 650; color: var(--text); }
.flow-node span { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.flow-node.now { border-color: var(--green-line); background: #182520; }
.flow-arrow { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: center; padding: 6px 0 6px 18px; }
.flow-line { position: relative; display: block; width: 2px; height: 40px; margin: 0 auto; background: var(--green); }
.flow-line::after { content: ''; position: absolute; left: -5px; bottom: -1px; width: 8px; height: 8px; border-right: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(45deg); }
.flow-arrow span { font-size: 15px; font-weight: 650; color: var(--green-hi); line-height: 1.35; }
.flow-arrow small { display: block; font-size: 14px; font-weight: 400; color: var(--dim); }

@media (min-width: 960px) {
  .flow { grid-template-columns: minmax(0, 1fr) minmax(150px, .8fr) minmax(0, 1fr) minmax(150px, .8fr) minmax(0, 1fr); gap: 0; align-items: center; margin-top: 40px; }
  .flow-node { padding: 18px 20px; }
  .flow-arrow { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 0 14px; text-align: center; }
  .flow-line { width: 100%; height: 2px; margin: 0; }
  .flow-line::after { left: auto; right: -1px; bottom: auto; top: -3px; width: 8px; height: 8px; border-right: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
}

/* motion of the home alone (the shared part is in style.css) */
.flow-node, .asks li { transition: transform .25s ease, border-color .25s ease; }
.flow-node:hover, .asks li:hover { transform: translateY(-3px); border-color: var(--border-hi); }
@media (prefers-reduced-motion: reduce) {
  .flow-node:hover, .asks li:hover { transform: none; }
  .typed img + img { animation: none; opacity: 1; }
}