/* ===== Content pages (FAQ, Learn, Scalp Analysis), the Hair Lab questionnaire and the thank you page.
   Loaded after site.css on new pages only. Uses the live site's fonts, gold tokens and cream paper. ===== */
.cp-page{background:#FBF8F1;color:#1f1b18}
.cp{max-width:768px;margin:0 auto;padding:clamp(104px,11vw,138px) clamp(20px,5vw,32px) clamp(56px,7vw,88px)}

/* breadcrumb */
.cp-crumbs ol{list-style:none;margin:0;padding:0;font-size:11px;line-height:1.8;letter-spacing:.16em;text-transform:uppercase;color:#7a7268}
.cp-crumbs li{display:inline}
.cp-crumbs li+li::before{content:"/";margin:0 10px;color:rgba(138,109,31,.55)}
.cp-crumbs a{color:#8a6d1f;text-decoration:none;border-bottom:.5px solid rgba(201,162,75,.6);display:inline-block;padding:6px 0 4px}
.cp-crumbs a:hover{color:#1f1b18}
.cp-crumbs [aria-current]{color:#5e564f}

/* header */
.cp-eyebrow{margin-top:30px;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:#8a6d1f;font-weight:600}
.cp h1{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(38px,5.4vw,62px);line-height:1.05;
  letter-spacing:.005em;color:#0A0A0A;margin-top:12px}
.cp-head.no-eyebrow h1{margin-top:30px}
.cp-answer{margin-top:26px;font-size:18px;line-height:1.72;color:#3a332c;border-left:2px solid #C9A24B;padding:2px 0 2px 20px}

/* sections and text */
.cp-sec h2{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(28px,3.6vw,40px);line-height:1.14;
  color:#0A0A0A;margin-top:clamp(46px,6vw,62px);padding-top:clamp(24px,3vw,30px);border-top:.5px solid rgba(201,162,75,.42);
  scroll-margin-top:96px}
.cp-sec h3{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(22px,2.4vw,25px);line-height:1.25;color:#1f1b18;scroll-margin-top:96px}
/* every heading id on a content page (sections, FAQ questions, the Learn hub articles) clears the fixed nav (Q120) */
.cp h2[id],.cp h3[id]{scroll-margin-top:96px}
.cp-sec p,.cp-sec li{font-size:16px;line-height:1.75;color:#4a433b}
.cp-sec>p{margin-top:16px}
.cp-sec ul,.cp-sec ol{list-style:none;margin:16px 0 0;padding:0}
.cp-sec ul li{position:relative;padding:6px 0 6px 26px}
.cp-sec ul li::before{content:"";position:absolute;left:5px;top:17px;width:6px;height:6px;border-radius:50%;background:#C9A24B}
.cp-sec ol{counter-reset:cpol}
.cp-sec ol li{position:relative;padding:8px 0 8px 44px;counter-increment:cpol}
.cp-sec ol li::before{content:counter(cpol);position:absolute;left:0;top:7px;width:30px;text-align:center;
  font-family:'Cormorant Garamond',serif;font-size:25px;line-height:1.2;color:#C9A24B}
.cp-sec strong{color:#1f1b18;font-weight:600}
.cp-answer a,.cp-sec p a:not(.btn-pill),.cp-sec li a,.cp-sec td a,.cp-note a,.qf-legal a,.qf-consent a{color:#8a6d1f;
  text-decoration:underline;text-decoration-color:rgba(201,162,75,.65);text-underline-offset:3px}
.cp-answer a:hover,.cp-sec p a:not(.btn-pill):hover,.cp-sec li a:hover,.cp-sec td a:hover,.cp-note a:hover{color:#1f1b18}
.cp a:focus-visible,.qf button:focus-visible{outline:2px solid #8a6d1f;outline-offset:3px;border-radius:3px}

/* question and answer blocks (always visible, no accordion) */
.cp-qa{margin-top:26px;padding:22px 24px;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(74,52,38,.06)}
.cp-qa h3{margin:0}
.cp-qa p{margin-top:8px}

.cp-note{margin-top:20px;font-size:13px;line-height:1.65;color:#6f675d;border-left:2px solid #C9A24B;background:rgba(201,162,75,.07);padding:12px 16px}
.cp-sec p.cp-note{font-size:13px;line-height:1.65;color:#6f675d}

.cp-table-wrap{margin-top:20px;overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(74,52,38,.06)}
.cp-sec table{width:100%;border-collapse:collapse;min-width:460px}
.cp-sec th{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#8a6d1f;text-align:left;padding:14px 16px;font-weight:600;
  border-bottom:1px solid rgba(201,162,75,.45);vertical-align:bottom}
.cp-sec td{font-size:14.5px;line-height:1.55;color:#4a433b;padding:12px 16px;border-top:.5px solid rgba(0,0,0,.07);vertical-align:top}
.cp-sec tr:first-child td{border-top:none}
/* Tables on phones (Q108): below 600px each row becomes a full width card of label and value pairs, so no column is
   cut off and nothing needs a sideways swipe. The label is the column header, written into data-label by the build.
   The header row stays in the markup for assistive tech, visually hidden. Desktop keeps the normal table. */
@media(max-width:599.98px){
  .cp-table-wrap{overflow:visible;background:none;box-shadow:none;border-radius:0}
  .cp-sec table,.cp-sec tbody,.cp-sec tr,.cp-sec td{display:block;width:100%}
  .cp-sec table{min-width:0}
  .cp-sec thead{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .cp-sec tbody tr{margin-top:12px;padding:6px 18px;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(74,52,38,.06)}
  .cp-sec tbody tr:first-child{margin-top:0}
  .cp-sec td,.cp-sec tr:first-child td{padding:11px 0 12px;border-top:.5px solid rgba(0,0,0,.08);overflow-wrap:anywhere}
  .cp-sec td:first-child,.cp-sec tr:first-child td:first-child{border-top:none}
  .cp-sec td:first-child{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:600;line-height:1.25;color:#1f1b18}
  .cp-sec td[data-label]::before{content:attr(data-label);display:block;margin-bottom:4px;font:600 10.5px/1.4 'Inter',sans-serif;
    letter-spacing:.16em;text-transform:uppercase;color:#7a5f17}
}

.cp-sec .cp-cta{margin-top:26px}
.cp-cta .btn-pill{color:#1f1b18;text-decoration:none}

.cp-reviewed{margin-top:clamp(44px,6vw,64px);font-size:12px;letter-spacing:.08em;color:#6b6359}

/* related pages */
.cp-related{margin-top:16px;padding-top:24px;border-top:.5px solid rgba(201,162,75,.42)}
.cp-related h2{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:26px;color:#0A0A0A}
.cp-related ul{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.cp-related a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:12px 18px;background:#fff;
  border-radius:12px;box-shadow:0 8px 24px rgba(74,52,38,.06);text-decoration:none;color:#1f1b18;font-size:15px;transition:box-shadow .3s,transform .3s}
.cp-related a::after{content:"\203A";color:#C9A24B;font-size:22px;line-height:1}
.cp-related a:hover{box-shadow:0 16px 36px rgba(74,52,38,.13);transform:translateY(-2px)}

/* hub: list of articles */
.cp-hub{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:16px}
.cp-hub a{display:block;background:#fff;border-radius:14px;border-top:2px solid #C9A24B;padding:24px 26px 22px;text-decoration:none;
  box-shadow:0 10px 30px rgba(74,52,38,.07);transition:box-shadow .3s,transform .3s}
.cp-hub a:hover{box-shadow:0 18px 40px rgba(74,52,38,.13);transform:translateY(-2px)}
.cp-hub h2{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(24px,2.8vw,29px);line-height:1.18;color:#1f1b18;margin:0;padding:0;border:0}
.cp-hub p{margin-top:8px;font-size:15px;line-height:1.65;color:#5e564f}
.cp-hub .cp-more{display:inline-block;margin-top:12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8a6d1f;font-weight:600}

/* ===== Hair Lab questionnaire ===== */
.qf-wrap{margin-top:30px;background:#fff;border:.75px solid #E8E1D4;border-top:2px solid #C9A24B;border-radius:16px;
  padding:clamp(22px,4vw,38px);box-shadow:0 16px 40px rgba(74,52,38,.07)}
.qf{margin:0}
.qf-hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.qf-step[hidden],.qf [hidden]{display:none!important}
.qf-progress{display:none;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#8a6d1f;font-weight:600;margin:0 0 16px}
.qf-js .qf-progress{display:block;scroll-margin-top:96px}
.qf fieldset{border:0;margin:0 0 26px;padding:0;min-width:0}
.qf legend{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(23px,2.7vw,28px);line-height:1.22;color:#1f1b18;margin:0 0 14px;padding:0}
.qf-opts{display:grid;gap:10px}
.qf-opt{display:flex;align-items:center;gap:14px;min-height:56px;padding:12px 18px;border:1px solid #E3D9C5;border-radius:12px;
  background:#FBF8F1;cursor:pointer;font-size:16px;line-height:1.35;color:#1f1b18;transition:border-color .2s,background .2s,box-shadow .2s}
.qf-opt:hover{border-color:#C9A24B}
.qf-opt input{width:20px;height:20px;margin:0;flex:0 0 auto;accent-color:#8a6d1f}
.qf-opt:has(input:checked){border-color:#C9A24B;background:rgba(201,162,75,.13);box-shadow:inset 0 0 0 1px #C9A24B}
.qf-opt:focus-within{outline:2px solid #8a6d1f;outline-offset:2px}
.qf-field{margin:0 0 16px}
.qf-field label{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#6a5d39;font-weight:600;margin-bottom:8px}
.qf-field input{display:block;width:100%;min-height:52px;padding:12px 16px;border:1px solid #D9CDB4;border-radius:10px;background:#fff;
  font:400 16px/1.3 'Inter',sans-serif;color:#1f1b18;-webkit-appearance:none;appearance:none}
.qf-field input:focus{outline:2px solid #8a6d1f;outline-offset:1px;border-color:#C9A24B}
/* phone check message (Q123), written by questionnaire.js; 7.6:1 on white */
.qf-msg{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:#9b2c14}
.qf-msg:empty{display:none}
.qf-field input[aria-invalid="true"]{border-color:#9b2c14;box-shadow:inset 0 0 0 1px #9b2c14}
.qf-consent{display:flex;gap:12px;align-items:flex-start;margin:20px 0 8px}
.qf-consent input{width:22px;height:22px;margin:1px 0 0;flex:0 0 auto;accent-color:#8a6d1f;cursor:pointer}
.qf-consent label{font-size:13px;line-height:1.6;color:#5e564f;cursor:pointer}
.qf-legal{font-size:13px;line-height:1.6;color:#5e564f;margin:0 0 6px 34px}
/* Q112: on phones and touch screens the Privacy Policy and SMS Terms links get a 44px tall tap area. The padding is
   cancelled by an equal negative margin, so the text size and the line layout stay the same; the extra top margin of
   the line keeps the tap area clear of the consent box above it. */
@media (max-width:860px),(pointer:coarse){
  .qf-legal{margin-top:14px}
  .qf-legal a{display:inline-block;padding:14px 0;margin:-14px 0}
}
.qf-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:22px}
.qf-submit,.qf-next{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;padding:0 30px;border:none;border-radius:30px;
  background:var(--gold,#C9A24B);color:#1f1b18;font:600 12.5px/1 'Inter',sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background .25s}
.qf-submit:hover,.qf-next:hover{background:var(--goldb,#E8C070)}
.qf-back{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border:1px solid #C9A24B;border-radius:30px;background:none;
  color:#8a6d1f;font:500 12px/1 'Inter',sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.qf-back:hover{background:rgba(201,162,75,.12)}
.qf-after{margin-top:18px;font-size:14px;line-height:1.6;color:#5e564f;text-align:center}
@media(max-width:560px){
  .qf-actions{flex-direction:column-reverse;align-items:stretch}
  .qf-submit,.qf-next,.qf-back{width:100%}
  .qf-legal{margin-left:0}
}

.cp-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== Thank you page ===== */
.cp-thanks .cp-answer{font-size:19px}
.cp-thanks .cp-related{margin-top:40px}