/* ASSJET stream site: layout on top of the brand's brand.css */
.hero { padding: 56px 0 48px; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; align-items: center; }
.lead { font-size: var(--step-1); max-width: 28em; margin: 20px 0 0; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 26px 0 0; }
.hero-pic { position: relative; }
.hero-pic .sun { position: absolute; right: -4%; top: 2%; width: 78%; aspect-ratio: 1; border-radius: 50%; background: var(--orange); }
.hero-pic { aspect-ratio: 1 / 1; }
.hero-pic img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: 28% 62%; filter: drop-shadow(10px 10px 0 var(--brand)); }
.plain { padding: 56px 0; }
.narrow { max-width: 720px; }
.oath { padding: 64px 20px; }
.oath .cert { background: #fbf7ee; color: var(--brand); border: 3px solid var(--brand); box-shadow: 8px 8px 0 var(--lime); padding: 30px 24px; text-align: center; font-family: Georgia, "Times New Roman", serif; margin: 22px 0 26px; }
.oath .cert h3 { font: italic 700 var(--step-3)/1.05 Georgia, serif; text-transform: none; letter-spacing: 0; margin: 12px 0; transform: none; }
.oath .cert p { font-size: var(--step-1); line-height: 1.35; margin: 0; }
.oath form label { display: block; font-weight: 700; margin: 0 0 14px; color: var(--on-plum); }
.oath form input { display: block; width: 100%; margin-top: 6px; }
.oath .fine { font-size: var(--step-0); color: var(--on-plum-2); margin: 16px 0 0; }
details { border-top: 2px solid var(--line); padding: 16px 0; }
details:last-of-type { border-bottom: 2px solid var(--line); }
summary { cursor: pointer; font-weight: 800; font-size: var(--step-1); list-style: none; min-height: 44px; display: flex; align-items: center; justify-content: space-between; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: inherit; font-weight: 900; color: var(--orange-ink); }
details[open] summary::after { content: "–"; }
details p { margin: 8px 0 0; color: var(--ink-2); }
.aj-band .kit-field, .aj-band input { background: #3b1458; color: #fff; border-color: #6a3a8c; }
@media (max-width: 760px) { .hero-grid { grid-template-columns: 1fr; } .hero { padding-top: 36px; } .hero-pic { max-width: 440px; } .cta-row .btn { width: 100%; } }

/* fixes from the first look: the oath card is cream, so its text is plum; kit text on plum is light */
.oath .cert h3, .oath .cert p, .oath .cert small { color: var(--brand); }
.aj-band .kit-consent, .aj-band [data-kit-consent] { color: var(--on-plum-2); }
.aj-band .kit-consent a, .aj-band [data-kit-consent] a { color: var(--on-plum); }
.oath form input { background: #3b1458; color: #fff; border: 2px solid #8a5aaa; border-radius: 12px; padding: 14px; font: 500 var(--step-0) "Hanken Grotesk", sans-serif; }
.oath form input::placeholder { color: #b9a2cc; }
.oath [data-kit-done] h3 { color: var(--lime); }
.oath [data-kit-done] p { color: var(--on-plum); }
.oath [data-kit-done] a { color: var(--lime); font-weight: 700; text-decoration-color: var(--orange); }
.lead-dark { font-size: var(--step-1); max-width: 30em; margin: 18px 0 26px; }
.aj-page form label { display: block; font-weight: 700; margin: 0 0 16px; }
.aj-page form input, .aj-page form textarea { display: block; width: 100%; margin-top: 6px; background: #fff8f1; color: var(--ink); border: 2px solid var(--brand); border-radius: 12px; padding: 14px; font: 500 var(--step-0) "Hanken Grotesk", sans-serif; }
.aj-page [data-kit-done] h2 { color: var(--brand); font-size: var(--step-2); transform: none; }

/* desktop: use the width. Help and 404 get the product beside the words; the quiz gets it beside the flow */
.pageside { display: none; }
@media (min-width: 1000px) {
  .aj-page.has-side .aj-wrap { max-width: 1080px; display: grid; grid-template-columns: minmax(0, 560px) 1fr; gap: 56px; align-items: center; }
  .pageside { display: block; position: relative; aspect-ratio: 1 / 1; }
  .pageside .sun { position: absolute; right: 0; top: 4%; width: 80%; aspect-ratio: 1; border-radius: 50%; background: var(--orange); }
  .pageside img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: 28% 62%; filter: drop-shadow(10px 10px 0 var(--brand)); }
}

.aj-band .punch, .quizpage .punch { color: var(--lime); }
.sample { padding: 56px 0; }
.sample-grid { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 40px; align-items: center; }
.sample img { width: 100%; height: auto; border: 3px solid var(--brand); box-shadow: 8px 8px 0 var(--orange); border-radius: 6px; }
@media (max-width: 760px) { .sample-grid { grid-template-columns: 1fr; gap: 24px; } .sample img { max-width: 340px; } }