/* Final invitation: keep the action in the same column as its message. */
.reference-final { display:block; min-height:320px; padding:32px; }
.reference-final .final-copy { max-width:480px; }
.reference-final h2 { margin:0; line-height:1.04; }
.reference-final p { margin:14px 0 0; font-size:11px; }
.reference-final .btn-primary { margin:20px 0 0; padding:15px 22px; font-size:12px; gap:25px; }
@media(max-width:700px) {
  .reference-final { padding:24px; min-height:345px; }
  .reference-final .final-copy { max-width:100%; }
  .reference-final .btn-primary { margin-top:20px; }
}

/* Photo framing and the editorial capabilities section. */
.result-photo { left:50%; width:auto; max-width:59%; top:16px; height:calc(100% - 32px); object-fit:contain; object-position:center; transform:translateX(-50%) scaleX(-1); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.reference-result:after { background:linear-gradient(90deg,#f0e7df 17%,#f0e7df00 32%,#ebe1d600 76%,#ebe1d6 86%); }
.matched-analysis-photo { background:#e6ddd3; }
.matched-analysis-photo img { width:100%; height:100%; object-fit:cover; object-position:center 28%; }
.matched-analysis-photo .analysis-mesh { display:block; position:absolute; inset:0; width:100%; height:100%; opacity:1; }
.editorial-features .features-heading { text-align:left; max-width:680px; margin-bottom:32px; }
.editorial-features .section-label { justify-content:flex-start; }
.editorial-features .section-title { margin-bottom:15px; }
.capabilities-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:18px; }
.capability { position:relative; border:1px solid #e5d9ce; border-radius:17px; padding:29px; background:linear-gradient(135deg,#fffdf9,#f6efe8); overflow:hidden; min-width:0; }
.capability-index { display:block; color:#a57558; font-size:9px; letter-spacing:1.7px; margin-bottom:22px; }
.capability h3 { font:400 34px/1.08 'Cormorant Garamond',Georgia,serif; letter-spacing:-.6px; margin:0 0 15px; }
.capability p { font-size:12px; color:#7a6c61; line-height:1.8; max-width:360px; }
.capability-analysis { grid-column:span 7; display:grid; grid-template-columns:1fr .9fr; gap:24px; min-height:335px; padding:0; }
.capability-analysis .capability-copy { padding:29px 0 27px 29px; }
.capability-photo { position:relative; background:#e8ddd1; overflow:hidden; margin:14px 14px 14px 0; border-radius:12px; }
.capability-photo img { width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.portrait-corners { position:absolute; inset:13% 12%; border:1px solid #fff8; border-radius:16px; }
.capability-detail { display:flex; align-items:center; gap:8px; border-top:1px solid #e9ded3; padding-top:16px; margin-top:22px; font-size:9px; color:#7a6c61; }
.detail-dot { width:5px; height:5px; border-radius:50%; background:#bf704b; flex-shrink:0; }
.capability-products { grid-column:span 5; }
.capability-product-list { margin-top:18px; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.capability-product-list>div { display:flex; align-items:center; gap:10px; padding:12px 8px; background:#f0e7de80; border-radius:8px; font-size:9px; min-width:0; }
.capability-product-list .product-mini { transform:scale(.75); }
.capability-small { grid-column:span 4; min-height:335px; display:flex; flex-direction:column; }
.ritual-week { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; margin-top:auto; padding-top:24px; }
.ritual-week>div { text-align:center; }
.ritual-week small { display:block; font-size:8px; color:#897669; margin-bottom:10px; }
.ritual-week span { display:grid; place-items:center; height:30px; border:1px solid #e8ddd2; border-radius:7px; color:#98867a; font-size:9px; background:#faf6f0; }
.ritual-week span.checked { background:#e8eee8; color:#789483; border-color:#dbe5db; }
.ritual-caption { display:flex; justify-content:space-between; padding-top:14px; margin-top:14px; border-top:1px solid #e9ddd2; font-size:10px; color:#a57558; }
.ritual-notice { display:flex; align-items:center; gap:10px; background:#fffaf4; border:1px solid #eadbd0; border-radius:10px; margin-top:24px; padding:12px 10px; box-shadow:0 5px 16px #60442605; }
.ritual-notice>span { font-size:22px; color:#b57c59; }
.ritual-notice strong { font-size:9px; font-weight:500; display:block; }
.ritual-notice small { font-size:8px; color:#9d8a7b; display:block; margin-top:4px; }
.ritual-notice i { width:5px; height:5px; border-radius:50%; background:#b58869; margin-left:auto; }
.evening-notice { margin-top:8px; background:#f2eae2; }
.journal-preview { margin-top:auto; padding-top:23px; color:#827061; font-size:10px; }
.journal-preview header { display:flex; justify-content:space-between; padding-bottom:12px; border-bottom:1px solid #e5d8cc; }
.journal-preview header span { font-size:8px; color:#ae9a8a; }
.journal-preview>div { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid #eee3d9; }
.journal-preview>div span { color:#b68a6d; }
.capability-progress { grid-column:span 7; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:22px; min-height:280px; }
.capability-chart { min-width:0; background:#f6eee680; padding:15px; border-radius:12px; border:1px solid #eee1d5; }
.chart-caption { display:flex; justify-content:space-between; gap:8px; color:#8a7769; font-size:8px; margin-bottom:15px; }
.chart-caption span { color:#a3826c; }
.capability-chart svg { width:100%; display:block; }
.chart-labels { display:flex; justify-content:space-between; color:#ac9785; font-size:7px; padding-top:10px; }
.capability-memory { grid-column:span 5; }
.skin-profile { margin:20px 0 0; }
.skin-profile>div { display:flex; justify-content:space-between; gap:10px; border-top:1px solid #e7dace; padding:10px 0; font-size:10px; }
.skin-profile dt { color:#978171; }
.skin-profile dd { margin:0; color:#736354; text-align:right; }
@media(max-width:1050px) { .capability { padding:23px; } .capability h3 { font-size:29px; } .capability-analysis { padding:0; gap:12px; } .capability-analysis .capability-copy { padding:25px 0 25px 23px; } .capability-products .capability-product-list { grid-template-columns:1fr; } .capability-products .capability-product-list>div { padding:5px 9px; } .capability-progress { grid-template-columns:1fr; gap:20px; } .capability-chart { padding:12px; } .capability-chart svg { max-height:130px; } .capability-small { min-height:330px; } }
@media(max-width:700px) { .result-photo { left:auto; right:0; width:auto; max-width:80%; top:12px; height:405px; object-position:right center; transform:scaleX(-1); } .reference-result:after { background:linear-gradient(90deg,#f0e7df 4%,#f0e7df00 50%); } .capabilities-grid { grid-template-columns:1fr; gap:14px; } .capability,.capability-analysis,.capability-small,.capability-progress,.capability-memory,.capability-products { grid-column:auto; } .capability-analysis { min-height:330px; grid-template-columns:1fr .8fr; } .capability h3 { font-size:32px; } .capability p { font-size:11px; } .capability-index { font-size:8px; letter-spacing:1.2px; } .capability-analysis .capability-copy { padding:25px 0 25px 20px; } .capability-photo { margin-right:10px; } .capability-product-list,.capability-products .capability-product-list { grid-template-columns:1fr 1fr; } .capability-small { min-height:290px; } .capability-progress { grid-template-columns:1fr; } .editorial-features .section-title { font-size:39px; } }

/* Hero framing and a consistent line-icon system for the creator journey. */
.scan-portrait>img { position:absolute; left:-3%; top:-4%; width:88%; height:118%; max-width:none; object-fit:cover; object-position:center 32%; mask-image:linear-gradient(90deg,transparent,#000 8%,#000 94%,transparent); }
.scan-portrait { background:linear-gradient(110deg,#ebe4da,#e4dbd0); }
.challenge-flow li { gap:8px; }
.challenge-flow .challenge-icon { display:grid; place-items:center; width:34px; height:34px; flex-shrink:0; border:1px solid #e6d9cc; border-radius:50%; background:linear-gradient(145deg,#fffdf9,#f3eae1); color:#745c4a; box-shadow:0 2px 5px #6a4c3210; }
.challenge-icon svg { width:20px; height:20px; }
.challenge-cards a>span small { display:flex; align-items:center; gap:4px; }
.challenge-cards small svg { width:11px; height:11px; flex-shrink:0; }
@media(max-width:1100px) { .challenge-flow .challenge-icon { width:29px; height:29px; } .challenge-icon svg { width:17px; height:17px; } .challenge-flow li { gap:5px; } }
@media(max-width:700px) { .scan-portrait>img { left:-8%; width:104%; top:-3%; height:106%; } .challenge-flow li { display:flex; flex-direction:column; gap:5px; align-items:center; } .challenge-flow li span { margin-top:0; } .challenge-flow .challenge-icon { width:32px; height:32px; } }

/* Keep labels clear of the adjacent panels. */
.scan-portrait .tag-pigment { left:40%; top:55%; }
.result-tags .tag-pigment { left:65%; top:48%; }
/* Arrows are anchored to the photo row, rather than the whole step height. */
.reference-steps { --step-height:clamp(210px,20vw,280px); --step-gap:44px; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--step-gap); align-items:start; }
.reference-steps article { position:relative; display:grid; grid-template-rows:30px var(--step-height) auto; gap:10px; min-width:0; }
.reference-steps header { margin:0; }
.reference-steps .step-photo,.reference-steps .step-plan { height:var(--step-height); }
.reference-steps article:not(:last-child):after { content:''; position:absolute; left:100%; top:calc(40px + var(--step-height)/2); width:var(--step-gap); border-top:1px dashed #c47c58; }
.reference-steps article:not(:last-child):before { content:''; position:absolute; left:calc(100% + var(--step-gap) - 5px); top:calc(38px + var(--step-height)/2); width:5px; height:5px; border-top:1px solid #c47c58; border-right:1px solid #c47c58; transform:rotate(45deg); }
/* Creator connectors run from one icon edge to the next. */
.challenge-flow { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.challenge-flow li { position:relative; display:flex; flex-direction:column; align-items:center; gap:7px; }
.challenge-flow li span { margin-top:0; white-space:nowrap; }
.challenge-flow li+li:before { content:none; }
.challenge-flow li:not(:last-child):after { content:''; position:absolute; top:17px; left:calc(50% + 21px); width:calc(100% - 32px); border-top:1px dashed #c47c58; }
.challenge-flow li:not(:last-child):before { content:''; display:block; position:absolute; top:15px; left:calc(150% - 15px); width:5px; height:5px; border-top:1px solid #c47c58; border-right:1px solid #c47c58; transform:rotate(45deg); }
.pricing-card { display:flex; flex-direction:column; }
.pricing-card .btn-pricing { margin-top:auto; min-height:46px; align-items:center; }
@media(min-width:1300px) { .reference-steps { --step-height:clamp(230px,20vw,280px); } }
@media(max-width:1100px) { .reference-steps { --step-gap:36px; } .challenge-flow .challenge-icon { width:34px; height:34px; } }
@media(max-width:700px) { .reference-steps { grid-template-columns:1fr; gap:22px; --step-height:180px; } .reference-steps article { grid-template-columns:1fr 1fr; grid-template-rows:30px auto; gap:10px; align-items:center; } .reference-steps article:after,.reference-steps article:before { display:none!important; } .scan-portrait .tag-pigment { left:36%; top:53%; } .challenge-flow .challenge-icon { width:32px; height:32px; } .challenge-flow li:not(:last-child):after { top:16px; } .challenge-flow li:not(:last-child):before { top:14px; } }

/* Expanded portrait includes the complete head, shoulders and upper arms. */
.reference-result .result-photo { left:0; top:0; width:100%; max-width:none; height:100%; object-fit:contain; object-position:center; transform:scaleX(-1); mask-image:none; }
.reference-result:after { background:linear-gradient(90deg,#f0e7df 13%,#f0e7df00 34%,#ebe1d600 73%,#ebe1d6 90%); }
@media(max-width:700px) { .reference-result .result-photo { left:0; right:auto; top:0; width:100%; max-width:none; height:430px; object-fit:cover; object-position:center top; } }

.reference-result .result-tags .tag-pigment { top:40%; }
.reference-result .result-tags .tag-hydration { top:55%; }
.reference-result .result-tags .zone-two { top:31%; }

/* Skin markers share the photograph's coordinate system. */
.hero-portrait-layer { position:absolute; left:-3%; top:-4%; width:88%; height:118%; transform:scaleX(-1); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 94%,transparent); }
.hero-portrait-layer>img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-skin-zones { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.scan-portrait .tag-pigment { left:2%; top:46%; }
.result-skin-zones { position:absolute; inset:0; width:100%; height:100%; transform:scaleX(-1); pointer-events:none; z-index:1; }
@media(max-width:700px) { .hero-portrait-layer { left:-8%; top:-3%; width:104%; height:106%; } .scan-portrait .tag-pigment { left:2%; top:46%; } .result-skin-zones { height:430px; } }

.result-zones-mobile { display:none; }
.reference-result .result-tags .tag-texture { left:18%; top:23%; }
@media(max-width:700px) { .result-zones-desktop { display:none; } .result-zones-mobile { display:block; } }

.reference-steps .step-plan .care-rows { display:flex; flex-direction:column; height:100%; }
.reference-steps .step-plan .care-row { flex:1; min-height:0; }
@media(max-width:700px) { .reference-steps .step-plan .care-row { padding:3px 0; } .reference-steps .step-plan .product-mini { transform:scale(.8); } }

/* Keep result copy separate from the face on phones. */
.result-portrait { position:absolute; inset:0; }
@media(max-width:700px) {
  .reference-result { display:grid; grid-template-columns:minmax(0,1fr); min-height:0; gap:12px; }
  .result-copy { display:contents; }
  .result-copy h2 { grid-row:1; margin:0; }
  .result-copy>p { grid-row:2; margin:0; }
  .result-portrait { position:relative; inset:auto; grid-row:3; height:clamp(280px,85vw,360px); margin:6px 0; border-radius:12px; overflow:hidden; }
  .reference-result .result-photo { height:100%; object-fit:cover; object-position:center top; }
  .reference-result .result-skin-zones { height:100%; }
  .reference-result:after { display:none; }
  .result-copy .result-score { grid-row:4; margin:0; width:100%; }
  .result-plan { grid-row:5; margin-top:8px; width:100%; }
  .result-tags { display:none; }
}

@media(max-width:700px) {
  .reference-result { grid-template-columns:minmax(0,1fr)!important; }
  .result-copy>h2,.result-copy>p,.result-portrait,.result-copy .result-score,.result-plan { grid-column:1!important; width:100%; max-width:none; min-width:0; }
  .result-copy>p { font-size:12px; }
}

/* Homepage: four text-only article previews; the full archive stays in /blog. */
.home-blog-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin:32px 0; }
#blog a.home-blog-card { min-width:0; border:1px solid var(--border); border-radius:20px; padding:24px; color:var(--text); text-decoration:none; }
#blog a.home-blog-card h3 { overflow-wrap:break-word; }
@supports(grid-template-rows:subgrid) {
  #blog a.home-blog-card { display:grid!important; grid-template-columns:minmax(0,1fr); grid-template-rows:subgrid; grid-row:span 4; row-gap:0; }
  #blog a.home-blog-card>span:first-child { align-self:start; }
  #blog a.home-blog-card>h3,#blog a.home-blog-card>p { align-self:start; }
  #blog a.home-blog-card>span:last-child { margin-top:0; align-self:end; }
}
@media(max-width:1050px) { .home-blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .home-blog-grid { grid-template-columns:minmax(0,1fr); } }