/*
 * 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.png, a 10% margin built in): 28px puts the mark itself at ~22px. */
.nav__logo img { height: 28px; width: 28px; }
/* On the inverse ground the mark's deep faces would sink: it sits on a paper tile, as the app icon does. */
.footer .nav__logo img,
:root[data-theme="dark"] .nav__logo img { height: 32px; width: 32px; padding: 2px; background: var(--tile); border-radius: var(--r-sm); }
.slogan { display: block; margin-top: var(--s-2); font: 500 var(--t-label)/1.4 var(--font-mono); color: var(--muted); }

/* The language switcher: three small words in the bar, the current one in ink. */
.lang { display: inline-flex; align-items: center; gap: 2px; }
.lang__btn { min-width: 44px; min-height: 44px; padding: 0 var(--s-2); border: 0; border-radius: var(--r-sm); background: none;
  font: 500 var(--t-label)/1 var(--font-text); color: var(--muted); cursor: pointer; }
.lang__btn[aria-pressed="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }
.lang__btn:hover { color: var(--ink); }

/* 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): Propialab's teals instead of the
   dealt sand, the same on light and dark pages, as the kit's grounds are. AA: muted 5.1:1 on bg. */
html[data-ground="petrol"] { --ground-bg: #a9cfcb; --ground-surface: #d4e7e4; --ground-ink: #0f2b2e; --ground-muted: #34514f; --ground-accent: #06525c; }

/* 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: #f7f9f8; }

/* 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; } }

/* 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) {
  #features .panel { --p-h: 140px; }
  #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 billing line repeats the switch above the cards: 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-three: the switch beside the head; the cards' rows line up. */
.billing { display: inline-flex; gap: var(--s-2); align-self: end; }
.billing__tab { min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--line); border-radius: var(--r-btn, 999px); background: none;
  font: 500 var(--t-small)/1 var(--font-text); color: var(--muted); cursor: pointer; }
.billing__tab[aria-selected="true"] { border-color: var(--ink); color: var(--ink); }
.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: 168px; margin-top: var(--s-5); }
@media (max-width: 639px) {
  #contact .form { padding: var(--s-5); }
  /* 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); }