/*
 * Propialab's landing: the page CSS the taste kit leaves to the page (references/system.md,
 * sections-library.md). Everything else is the kit's system (assets/system.css and friends).
 */

/* The wordmark: "propia" in ink, "lab" in the accent, in the display face. */
.wordmark { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: -0.02em; }
.wordmark > span { color: var(--accent); }
/* The isotype (images/logo.svg, a vector with no margin): drawn for dark and light grounds alike. */
.nav__logo img { height: 24px; width: auto; }
.slogan { display: block; margin-top: var(--s-2); font: 500 var(--t-label)/1.4 var(--font-mono); color: var(--muted); }

/* The language picker, as the app's: a hairline pill with a globe and the code; its menu lists the
   three languages by name, the current one on the surface step. In the phone sheet (its actions sit at
   the screen's foot) the menu opens upwards. */
.lang { position: relative; display: inline-flex; }
.lang__toggle { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line-strong);
  border-radius: 999px; background: none; color: var(--ink); font: 500 var(--t-label)/1 var(--font-text); cursor: pointer; }
.lang__toggle:hover, .lang__toggle[aria-expanded="true"] { background: var(--surface); }
.lang__menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 152px; margin: 0; padding: 4px;
  list-style: none; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-md);
  box-shadow: 0 12px 32px -12px rgb(0 0 0 / 0.35); }
.lang__btn { display: flex; width: 100%; min-height: 40px; align-items: center; padding: 0 12px; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--ink); font: 400 var(--t-small)/1 var(--font-text); text-align: left; cursor: pointer; }
.lang__btn:hover, .lang__btn[aria-pressed="true"] { background: var(--surface); }
.lang__btn[aria-pressed="true"] { font-weight: 500; }
.nav.is-open .lang { justify-self: start; }
.nav.is-open .lang__menu { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; }

/* The nav's links glide to their section instead of jumping (the kit leaves scroll-behavior on auto);
   with reduced motion the kit's own rule forces auto again. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* A section is one or two screens (the kit's rhythm), but grows past them instead of laying its last rows
   over the next one: the kit does it from 640 to 1279px; a long language (English, Russian) or a short
   screen needs it at every width. The hero keeps its screen. */
/* The hero too: at least the first screen, longer when its words need it (Russian on a short screen),
   the way the kit lets it grow on a phone; its grid keeps the product window filling the screen. */
@media (min-width: 640px) {
  main > :is(.hero, .section--hero) { height: auto; min-height: 100vh; min-height: 100svh; }
  main > :is(.hero, .section--hero):has(> :is(.wrap, .container)) { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; }
  main > :is(.hero, .section--hero) > :is(.wrap, .container) { height: auto; }
}
@media (min-width: 1280px) {
  main > :is(section, .section):not(.hero, .section--hero), footer.closing {
    height: auto; min-height: calc(var(--h, 1) * 100vh); min-height: calc(var(--h, 1) * 100svh);
  }
  :where(main > :is(section, .section):not(.hero, .section--hero), footer.closing) { display: flex; flex-direction: column; }
  main > :is(section, .section):not(.hero, .section--hero) > :is(.wrap, .container), footer.closing > .wrap { flex: 1 0 auto; height: auto; min-height: 0; }
}

/* The light/dark switch (theme.js), beside the languages: the moon offers the dark mode, the sun the light one. */
.theme__btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-sm);
  background: none; color: var(--muted); cursor: pointer; }
.theme__btn:hover { color: var(--ink); }
.theme__sun, :root[data-theme="dark"] .theme__moon { display: none; }
:root[data-theme="dark"] .theme__sun { display: block; }

/* The lit ground behind the product's windows (the kit's data-ground): the brand's sky blue instead of
   the dealt sand, the same on light and dark pages, as the kit's grounds are. Every pair AA. */
html[data-ground="cornflower"] { --ground-bg: #9ccbf2; --ground-surface: #d3e8fa; --ground-ink: #0f1522; --ground-muted: #2f4257; --ground-accent: #08507d; }

/* The hero's lit ground hands its fragments the ground's surface, ink and accent (layout.css) but not its
   grey or the text on the accent, which stayed the page's: light on a dark page, unreadable on the ground. */
.hero__art { --fx-muted: var(--ground-muted); --fx-accent-ink: #ffffff; }

/* The hero: the result card on the window's lower-left corner; the proof line. */
.hero__art > .ly-piece--note { left: var(--s-6); bottom: var(--s-6); width: 300px; z-index: 2; }
.hero__art > .ly-piece--note > .ui-notify { width: 100%; }
.hero__proof { font-size: var(--t-small); color: var(--muted); }
.ly-piece--main .ui-win { width: 100%; }
.ly-piece--main .ui-win__main { padding-right: var(--ly-cut-room, 48px); }
@media (max-width: 1023px) { .hero__art > .ly-piece--note { left: var(--s-4); bottom: var(--s-4); width: 270px; } }
/* the window's last column ("2 min") on one line, never broken under its number */
.hero__art .ui-win__age { white-space: nowrap; }
/* A phone gets its own version of the hero's picture (the kit shows the window alone in a 190px strip,
   two rows cut): a taller frame, the leads window at the top and, over its foot, the newest two of the
   notifications across the frame, the way a phone shows them. Both move (motion-phone.js). */
@media (max-width: 639px) {
  .hero__art { min-height: 0; height: 368px; flex: none; }
  .hero__art .ui-win__row:nth-child(n+4) { display: none; }
  .hero__art > .ly-piece.ly-piece--note { display: block; left: var(--s-4); right: var(--s-4); bottom: var(--s-4); width: auto; --fx-bg: var(--ground-surface); }
  .hero__art > .ly-piece--note .ui-note:nth-child(n+3) { display: none; }
}

/* app-frame (sections-library.md): the inbox's list beside the open conversation, one window. */
.app.ui { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--s-7); background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--u-shadow); }
.app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.app > .app__pane + .app__pane { border-left: 1px solid var(--u-line); }
.app > .app__pane > .ui-panel { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
.app > .app__pane::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, var(--u-bg)); pointer-events: none; }
@media (min-width: 1024px) and (max-width: 1279px) { .app.ui { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
@media (max-width: 1023px) {
  .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .app > .app__pane--list { max-height: 252px; }
  .app > .app__pane--list::after { display: none; }
  .app .ui-win__side { display: none; }
  .app .ui-win__body { grid-template-columns: minmax(0, 1fr); }
  .app > .app__pane + .app__pane { border-left: 0; border-top: 1px solid var(--u-line); }
}
@media (max-width: 639px) {
  .app.ui { grid-template-rows: minmax(0, 1fr); }
  .app > .app__pane--list { display: none; }
  .app > .app__pane + .app__pane { border-top: 0; }
}

/* features-2x2 on the dark band: one panel height for the group; the marquee row under it. */
#features .panel { --p-h: 300px; }
#features .marquee { min-width: 0; max-width: 100%; margin-top: var(--s-8); }
#features .group { min-width: 0; }
/* the second screen's cards run down to the marquee, as the first screen's run to its foot */
@media (min-width: 1024px) { #features .group > .grid { flex: 1 1 auto; min-height: 0; } }
/* body copy on the dark band in its ink (7:1), never the band's grey */
#features .card > p { color: var(--ink); }
@media (max-width: 639px) {
  /* a phone's version of the four panels: tall enough for the whole window, which starts near the top and
     takes the panel's width (the desktop's anchors, inline, crop it to a 140px strip) */
  #features .panel { --p-h: 300px; }
  #features .panel .at-rise { --ay-sm: 24px !important; }
  #features .marquee { margin-top: var(--s-6); }
  /* the hero's frame gives up a little height so the button and the frame fit the first screen */
  .hero__art { min-height: 190px; }
  /* the trial line under the price: a phone leaves it out */
  #plans .card--plan > .t-small { display: none; }
  /* a phone: the plans keep their first four lines; the reviews and the contact take two screens */
  #plans { --hm: 2; }
  #plans .checks li:nth-child(n+5) { display: none; }
  #testimonials, #contact { --hm: 2; }
}

/* pricing: the cards' rows line up (plans.js draws them). Without plans the section and its
   links stay hidden: `hidden` must win over the kit's display rules. */
#plans[hidden], [data-plans-link][hidden] { display: none !important; }
.plans .price .t-stat { font-family: var(--font-display); }

.plan__badge { margin: 0; }
/* plans and the reviews stack to two screens on a tablet held upright */
@media (min-width: 640px) and (max-width: 1023px) { #plans { --h: 2; } }

/* The reviews as a still grid: two quotes a row, each with its face. */
/* the quotes run down to the section's foot: each face sits at the foot of its quote, under it on the text's line */
#testimonials .quotes { row-gap: var(--s-8); flex: 1 1 auto; align-content: stretch; }
.quotes .quote { display: flex; flex-direction: column; }
.quotes .quote .person { margin-top: auto; flex-direction: column; align-items: flex-start; padding-top: var(--s-4); }
.quotes .person > span { display: flex; flex-direction: column; }
.quotes .quote blockquote { font-size: var(--t-card); }
.stars { margin: 0 0 var(--s-3); letter-spacing: 2px; color: var(--accent); font-size: var(--t-small); }

/* Contact: the facts as rows on the left; the form on the alternative ground on the right. */
.contact-rows { margin-top: var(--s-4); }
#contact .form { padding: var(--s-7); border-radius: var(--r-lg); background: var(--g-alt, var(--surface)); }
#contact .contact-visual { --p-h: 188px; margin-top: var(--s-5); }
/* its notifications are cards on the lit ground: white, with the ground's ink, grey and accent. The kit
   derives a fragment's card from the page's (--card), which on a dark page put the ground's dark ink on a
   dark card */
#contact .contact-visual { --card: var(--ground-surface); --accent: var(--ground-accent); --accent-ink: #ffffff; }
@media (max-width: 639px) {
  #contact .form { padding: var(--s-5); }
  /* a phone: the two notifications wrap to two lines each, so the frame grows to hold them whole */
  #contact .contact-visual { --p-h: 220px; }
  /* a phone: each fact's value under its name (the address never runs past the screen); the form runs down to the
     section's foot, its message field taking what is left */
  .contact-rows > li { grid-template-columns: minmax(0, 1fr); }
  .contact-rows .rows__value { grid-column: 1; grid-row: auto; text-align: left; max-width: none; overflow-wrap: anywhere; }
  #contact .wrap > .grid { flex: 1 1 auto; grid-template-rows: auto minmax(0, 1fr); }
  #contact .form { display: flex; flex-direction: column; }
  #contact .form .field:has(textarea) { flex: 1 1 auto; display: flex; flex-direction: column; }
  #contact .form textarea { flex: 1 1 auto; }
}

/* The newsletter in the footer: one field and its button. */
.newsletter { gap: var(--s-3); margin-top: var(--s-3); }