/* The product page (tools/build_site.py catalogue_page_html): the home page proposals' components laid
   out one section per tab of the account's product page. The components bring their own looks, so this
   sheet only joins them: the back link over the hero, the facts strip, the overview, the price band,
   the examples' ask tile and the closing line. Colours come from the site's tokens, so the four themes
   follow. */

.pp-hero { position: relative; padding-top: clamp(12px, 2vw, 24px); }
.pp-back { position: relative; z-index: 1; }
.pp-back .btn { margin: 0; }
.pp-hero andy-float-hero { background: transparent; }
.pp-hero andy-float-hero::part(hero) { padding-inline: 0; padding-block: clamp(20px, 4vw, 56px) clamp(28px, 5vw, 72px); }
.pp-hero andy-float-hero::part(scene) { max-width: 520px; }
.pp-hero andy-float-hero > h1 { font-size: clamp(2.8rem, 6.6vw, 6rem); font-weight: var(--sc-head-weight, 700); line-height: .95; letter-spacing: -.045em; text-wrap: balance; }
.pp-hero andy-float-hero > p { font-size: clamp(1.05rem, 1.4vw, 1.25rem); }

/* The three facts a buyer looks for first, under the hero: price, group and what it is made with. */
.pp-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0 0 clamp(24px, 4vw, 48px); border-block: var(--rule-w, 1px) solid var(--rule); }
.pp-facts > div { padding: 18px 0; min-width: 0; }
.pp-facts > div + div { border-top: var(--rule-w, 1px) solid var(--rule); }
.pp-facts dt { margin: 0 0 6px; color: var(--ink-3); font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.pp-facts dd { margin: 0; color: var(--ink); font-size: 1.05rem; font-weight: 600; line-height: 1.4; }
.pp-facts dd small { display: block; margin-top: 4px; color: var(--ink-2); font-size: .9rem; font-weight: 400; }
.pp-facts a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pp-facts .pp-fact-price { font-size: clamp(1.6rem, 2.6vw, 2.2rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.pp-facts .pp-fact-price a { text-decoration: none; }
@media (min-width: 760px) {
  .pp-facts { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, 1fr); }
  .pp-facts > div { padding: 22px clamp(16px, 2.4vw, 32px); }
  .pp-facts > div:first-child { padding-left: 0; }
  .pp-facts > div + div { border-top: 0; border-left: var(--rule-w, 1px) solid var(--rule); }
}

/* Overview: the rest of the story beside who it is for. */
.pp-overview-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
@media (min-width: 960px) { .pp-overview-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.pp-story p { margin: 0 0 1.1em; max-width: 60ch; color: var(--ink-2); font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.65; }
.pp-story p:first-child { color: var(--ink); }
.pp-for h2 { margin: 0 0 20px; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: var(--sc-head-weight, 700); line-height: 1.05; letter-spacing: -.035em; }
.pp-for ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pp-for li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 18px 20px; border-radius: 18px; color: var(--ink); font-size: 1.05rem; font-weight: 600; line-height: 1.4;
  background: color-mix(in srgb, var(--pp-tone) 12%, var(--paper));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pp-tone) 24%, transparent);
  transition: translate .3s cubic-bezier(.34, 1.56, .64, 1);
}
.pp-for li:nth-child(3n + 1) { --pp-tone: var(--slot-0, #23b5c9); }
.pp-for li:nth-child(3n + 2) { --pp-tone: var(--slot-1, #f44e5d); }
.pp-for li:nth-child(3n + 3) { --pp-tone: var(--slot-2, #ffa931); }
.pp-for li:hover { translate: 6px 0; }
.pp-for-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--pp-tone); color: #fff; }
.pp-for-mark i { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .pp-for li { transition: none; } .pp-for li:hover { translate: none; } }

/* What you get and the steps: the components draw themselves; only the step label is ours. */
.pp-gets andy-callouts > h2 { margin-bottom: 0; }
.pp-step { display: block; margin-bottom: 6px; color: var(--sc-hue, var(--accent)); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

/* Examples: five tiles that turn over and a sixth that asks. */
.pp-note { max-width: 56ch; margin-inline: auto; color: var(--ink-2); }
.pp-flips { align-items: stretch; }
.pp-ask-tile {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; min-width: 0;
  padding: clamp(24px, 3vw, 36px); border-radius: 24px; background: var(--tile-dark); color: #B4B8C6;
}
.pp-ask-tile .sc-eyebrow { margin: 0; color: var(--slot-2, #ffa931); }
.pp-ask-tile h3 { margin: 0; color: #F5F5F7; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.pp-ask-tile p { margin: 0; line-height: 1.55; }
.pp-ask-tile .btn { margin-top: 8px; }

/* The price on a dark band, with what can raise it. */
.pp-price-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: end; }
@media (min-width: 900px) { .pp-price-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.pp-price .pp-price-big { margin: 0 0 .2em; color: #F5F5F7; font-size: clamp(3.4rem, 9vw, 8rem); font-weight: var(--sc-head-weight, 700); line-height: .9; letter-spacing: -.05em; }
.pp-price-tag p:last-child, .pp-price-grid p { color: var(--ink-2); max-width: 46ch; line-height: 1.6; }
.pp-price-h { margin: 0 0 .5em; font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1.08; letter-spacing: -.03em; }
.pp-price .btn-primary { background: #F5F5F7; border-color: #F5F5F7; color: #0B0C10; }
.pp-price .btn-primary:hover { background: #fff; }
.pp-more-h { margin: clamp(48px, 7vw, 88px) 0 20px; font-size: 1.25rem; }
.pp-more { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pp-more li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 20px; border-radius: 18px; background: var(--paper-2); box-shadow: 0 0 0 1px var(--rule); }
.pp-more li > i { width: 20px; height: 20px; margin-top: 2px; color: var(--slot-2, #ffa931); }
.pp-more h4 { margin: 0 0 6px; color: #F5F5F7; font-size: 1.02rem; line-height: 1.3; }
.pp-more p { margin: 0; color: var(--ink-2); font-size: .95rem; line-height: 1.5; }

.pp-faq .faq { max-width: 1100px; margin-inline: auto; }

/* The rest of the group: the home page's columns, under a heading of their own. */
.pp-related { padding-bottom: 0; }

.pp-ask-after { margin: 20px 0 0; text-align: center; color: var(--ink-2); line-height: 1.6; }
.pp-ask-after strong { color: var(--ink); font-weight: 600; }

/* The ask dialog: one e-mail field, then "Sent!". */
.pp-dialog {
  width: min(100% - 32px, 480px); padding: 0; border: 0; border-radius: 24px;
  background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px rgb(0 0 0 / .3);
}
.pp-dialog::backdrop { background: rgb(11 12 16 / .55); backdrop-filter: blur(4px); }
.pp-dialog-ask, .pp-dialog-done { padding: clamp(24px, 5vw, 40px); }
.pp-dialog-x { position: absolute; z-index: 1; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); font-size: 26px; line-height: 1; cursor: pointer; }
.pp-dialog-x:hover { background: var(--paper-2); color: var(--ink); }
.pp-dialog .sc-eyebrow { margin: 0 0 8px; }
.pp-dialog h2 { margin: 0 0 10px; padding-right: 32px; font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.08; letter-spacing: -.03em; }
.pp-dialog p { margin: 0 0 18px; color: var(--ink-2); line-height: 1.55; }
.pp-dialog-field { display: grid; gap: 6px; margin-bottom: 8px; font-weight: 600; }
.pp-dialog-field input {
  min-height: 52px; padding: 0 16px; border: var(--rule-w, 1px) solid var(--rule); border-radius: 14px;
  background: var(--paper-2); color: var(--ink); font: inherit; font-weight: 400;
}
.pp-dialog-field input:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.pp-dialog-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pp-dialog-status { min-height: 1.5em; margin: 0 0 10px !important; font-size: .92rem; }
.pp-dialog-status[data-kind="bad"] { color: var(--danger, #c0392b); }
.pp-dialog .btn-primary { width: 100%; justify-content: center; }
.pp-dialog-done { text-align: center; padding-top: clamp(40px, 7vw, 56px); }
.pp-dialog-ok { min-height: 44px; padding: 0 22px; border: var(--rule-w, 1px) solid var(--rule); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.pp-dialog-ok:hover { background: var(--paper-2); }
.pp-dialog .pp-dialog-big { margin: 0 0 6px; color: var(--ink); font-size: clamp(2.6rem, 8vw, 3.6rem); font-weight: 700; letter-spacing: -.04em; line-height: 1; }