/* copy-site kit file */
/* cl-pages.css: the client's copied pages (templates/site/*: Our Story, FAQ, Warranty, Disclaimer, Technical Videos,
   Contact, Technical Support) and the store policies (policy.html), linked by base.html on every page.
   The copied pages are built by hand in XClutch's look from their pages measured at 1440 and in the 390 stage
   (review/pages/pages-*.json): one 920px column of Oswald capitals over Outfit text, the story's photo bands,
   the FAQ's folds, the video grid and the two forms.
   Every rule sits in @layer site (cl-site.css: the layer order). */
@layer base, kit, site;

@layer site {

/* ---------- the policies ---------- */
.cl-policy__body { max-width: 732px; margin: 0 auto; padding: 0 20px 80px; font: 400 16px/1.7 var(--site-font-body); color: var(--site-fg); }
.cl-policy__h { margin: 40px 0 12px; font: 700 22px/1.3 var(--site-font-heading); }
.cl-policy__p { margin: 0 0 16px; }
.cl-policy__list { margin: 0 0 16px; padding-left: 22px; list-style: disc; }
.cl-policy__list li + li { margin-top: 6px; }
.cl-policy__action { margin: 8px 0 24px; }
/* a policy's links (/terms' list of the other policies): a 40px tap target each, full contrast */
.cl-policy__list a { display: inline-flex; align-items: center; min-height: 40px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cl-policy__list li:has(> a) + li { margin-top: 0; }

/* ---------- the copied pages: one 920px column, their Oswald heading and 18px Outfit text ---------- */
.cl-pg { color: var(--site-fg); }
.cl-pg__col { max-width: calc(920px + 2 * var(--site-pad)); margin: 0 auto; padding: 75px var(--site-pad) 80px; }
.cl-pg__col--center { text-align: center; }
.cl-pg__col + .cl-pg__col { padding-top: 0; }
.cl-pg__h1, .cl-pg__h2 { font: 400 28.05px/1 var(--site-font-heading); letter-spacing: normal; text-transform: uppercase; }
.cl-pg__h2 { margin-top: 75px; }
.cl-pg__h3 { margin-top: 50px; font: 700 18px/25.2px var(--site-font-body); letter-spacing: 0.45px; }
.cl-pg__h1 + *, .cl-pg__h2 + *, .cl-pg__h3 + * { margin-top: 30px; }
.cl-pg__h3 + * { margin-top: 25px; }
.cl-pg__lede { font: 300 23.4px/32.76px var(--site-font-body); letter-spacing: 0.45px; }
.cl-pg__text { font: 300 18px/25.2px var(--site-font-body); letter-spacing: 0.45px; }
.cl-pg__text > * + * { margin-top: 25px; }
.cl-pg a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--site-muted); text-underline-offset: 5px; }
.cl-pg a:not([class]):hover { text-decoration-color: var(--site-accent); text-decoration-thickness: 2px; }
/* the warranty's numbered terms and the failure lists under them */
.cl-pg__ol { padding-left: 28px; list-style: decimal; }
.cl-pg__ol > li { padding-left: 4px; }
.cl-pg__ol > li + li { margin-top: 25px; }
.cl-pg__ol > li > * + * { margin-top: 12px; }
.cl-pg__ul { padding-left: 22px; list-style: disc; }
.cl-pg__ul > li + li { margin-top: 2px; }

/* ---------- Our Story: the photo bands, their words white over the darkened photo ---------- */
.cl-story-band {
  display: flex; align-items: center; min-height: 450px; color: #FFFFFF;
  background: var(--site-night) var(--band-pos, center) / cover no-repeat;
  background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), var(--band-image);
}
.cl-story-band__in { flex: 1; max-width: calc(var(--site-max) + 2 * var(--site-pad)); margin: 0 auto; padding: 40px var(--site-pad); }
.cl-story-band--right .cl-story-band__in { text-align: right; }
.cl-story-band__h { font: 400 var(--band-h, 62px)/1 var(--site-font-heading); letter-spacing: normal; text-transform: uppercase; }
.cl-story-band__h span { display: block; }
.cl-story-band__text { margin-top: 5px; font: 300 23.4px/32.76px var(--site-font-body); letter-spacing: 0.45px; }
.cl-story-band--hero .cl-story-band__h { --band-h: 80px; }
.cl-story-band--hero .cl-story-band__text { margin-top: 15px; }
.cl-story-band--track { --band-h: 63px; background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.15) 60%), var(--band-image); }
/* the research and development row: the words on the left, the workshop on the right */
.cl-story-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 682px); align-items: center; gap: 60px;
  max-width: calc(var(--site-max) + 2 * var(--site-pad)); margin: 0 auto; padding: 75px var(--site-pad); }
.cl-story-row__body { max-width: 455px; justify-self: center; }
.cl-story-row__h { font: 400 33px/1 var(--site-font-heading); letter-spacing: normal; text-transform: uppercase; }
.cl-story-row__body .cl-pg__text { margin-top: 15px; }
.cl-story-row__img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--site-radius); }
/* the closing reel: their banner video, playable, in the near-black band it filled */
.cl-story-reel { background: var(--site-night); }
.cl-story-reel__box { max-width: 800px; margin: 0 auto; aspect-ratio: 16 / 9; }

/* ---------- a YouTube embed, 16:9 (the story's reel, the technical videos) ---------- */
.cl-yt { position: relative; aspect-ratio: 16 / 9; background: var(--site-night); border-radius: var(--site-radius); overflow: hidden; }
.cl-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- FAQ: a heading a group, each question a fold with their round chevron ---------- */
.cl-faq__group { margin-top: 75px; }
.cl-faq__h.cl-pg__h2 { margin-top: 0; }
.cl-faq__list { margin-top: 38px; }
.cl-faq__item > summary { display: flex; align-items: center; gap: 14px; min-height: 47px; padding: 4px 0; font: 400 18px/25.2px var(--site-font-body); letter-spacing: 0.45px; }
.cl-faq__item > summary:hover { color: var(--site-accent-strong); }
.cl-faq__item > summary:focus-visible { outline: 2px solid var(--site-fg); outline-offset: 2px; }
.cl-faq__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--site-line); border-radius: 50%; transition: transform 0.2s ease, background-color 0.2s ease; }
.cl-faq__icon svg { width: 10px; height: auto; }
.cl-faq__item[open] .cl-faq__icon { transform: rotate(180deg); background: var(--site-accent); border-color: var(--site-accent); color: #FFFFFF; }
.cl-faq__a { padding: 8px 0 22px 40px; }
.cl-faq__a.cl-pg__text > * + * { margin-top: 16px; }

/* ---------- Technical Videos: three across, each title centred under its video ---------- */
.cl-vids { max-width: calc(var(--site-max) + 2 * var(--site-pad)); margin: 0 auto; padding: 0 var(--site-pad) 80px; }
.cl-videos__head { padding-bottom: 75px; }
.cl-vids__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 22px; }
.cl-vids__title { margin-top: 18px; padding: 0 9px; text-align: center; font: 300 20px/28px var(--site-font-body); letter-spacing: 0.45px; }

/* ---------- Contact and Technical Support: the form in their bordered box ---------- */
.cl-form { max-width: 600px; margin: 75px auto 0; padding: 35px; border: 2px solid var(--site-line); border-radius: var(--site-radius); text-align: left; }
.cl-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
.cl-form__field + .cl-form__field, .cl-form__row + .cl-form__field { margin-top: 22px; }
.cl-form__row > .cl-form__field { margin-top: 0; }
.cl-form__label { display: block; margin-bottom: 8px; font: 400 14px/1.3 var(--site-font-body); letter-spacing: 1px; }
.cl-form__input {
  display: block; width: 100%; min-height: 44px; padding: 10px 12px;
  background: var(--site-field-bg); color: var(--site-fg); border: 1px solid var(--site-muted); border-radius: var(--site-radius);
  font: 300 16px/1.4 var(--site-font-body); letter-spacing: 0.45px;
}
.cl-form__input:focus { outline: 2px solid var(--site-accent); outline-offset: 0; border-color: var(--site-accent); }
textarea.cl-form__input { min-height: 140px; resize: vertical; }
.cl-form__send { width: 100%; margin-top: 30px; }
.cl-form__sent { max-width: 600px; margin: 75px auto 0; padding: 24px; border: 2px solid var(--site-accent); border-radius: var(--site-radius); text-align: center; font: 400 20px/28px var(--site-font-body); }
.cl-form__mail { margin-top: 50px; }
.cl-form__mail strong { font-weight: 600; }

/* ---------- phones: the 390 stage, a 16px gutter, no text under 13px ---------- */
@media (max-width: 979.98px) {
  .cl-pg__col { padding: 40px var(--site-pad) 50px; }
  .cl-pg__h1, .cl-pg__h2 { font-size: 24px; line-height: 1; }
  .cl-pg__h2 { margin-top: 40px; }
  .cl-pg__h3 { margin-top: 36px; font-size: 16.5px; line-height: 23px; }
  .cl-pg__h1 + *, .cl-pg__h2 + * { margin-top: 26px; }
  .cl-pg__h3 + * { margin-top: 16px; }
  .cl-pg__lede { font-size: 21.5px; line-height: 30px; }
  .cl-pg__text { font-size: 16.5px; line-height: 23.2px; }
  .cl-pg__text > * + * { margin-top: 16px; }
  .cl-pg__ol { padding-left: 24px; }
  .cl-pg__ol > li + li { margin-top: 16px; }

  .cl-story-band { min-height: 250px; }
  .cl-story-band__in { padding: 24px var(--site-pad); }
  .cl-story-band__h { font-size: calc(var(--band-h, 62px) / 2); }
  .cl-story-band__text { font-size: 18px; line-height: 25px; }
  .cl-story-band--hero .cl-story-band__h { font-size: 40px; }
  .cl-story-band--hero .cl-story-band__text { margin-top: 10px; }
  .cl-story-row { grid-template-columns: 1fr; gap: 24px; padding: 40px var(--site-pad); }
  .cl-story-row__body { max-width: none; justify-self: stretch; }
  .cl-story-row__h { font-size: 28px; }
  .cl-story-reel__box { max-width: none; }

  .cl-faq__group { margin-top: 40px; }
  .cl-faq__list { margin-top: 20px; }
  .cl-faq__item > summary { align-items: flex-start; min-height: 0; padding: 10px 0; font-size: 16.5px; line-height: 23.2px; }
  .cl-faq__icon { margin-top: -1px; }
  .cl-faq__a { padding: 4px 0 18px 40px; }

  .cl-vids { padding-bottom: 50px; }
  .cl-vids__grid { grid-template-columns: 1fr; gap: 32px; }
  .cl-vids__title { margin-top: 12px; padding: 0; font-size: 18px; line-height: 25px; }

  .cl-form { margin-top: 32px; padding: 20px 16px; }
  .cl-form__row { grid-template-columns: 1fr; gap: 22px; }
  .cl-form__sent { margin-top: 32px; font-size: 18px; line-height: 25px; }
  .cl-form__mail { margin-top: 32px; }
}

}