/* ============================================================
   CLARIO — Starborn structure layer
   New section archetypes on top of clario-apple.css tokens
   ============================================================ */

/* ===== shared placeholder ===== */
.ph {
  position: relative;
  background-color: var(--bg-soft);
  background-image: repeating-linear-gradient(45deg, transparent 0, transparent 10px, rgba(11,13,16,.028) 10px, rgba(11,13,16,.028) 20px);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ph .ph-tag {
  font-family: var(--font-pixel); font-size: 8px; letter-spacing: 1px;
  color: var(--ink-3); background: var(--bg); border: 1px solid var(--line);
  padding: 7px 11px; border-radius: 7px; text-align: center; line-height: 1.6;
}
.ph.dark { background-color: var(--navy-dark); background-image: repeating-linear-gradient(45deg, transparent 0, transparent 10px, rgba(255,255,255,.035) 10px, rgba(255,255,255,.035) 20px); }
.ph.dark .ph-tag { color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }

/* ===== HERO framed panel (Instantly-style inset color block) ===== */
.hero.hero--framed {
  margin: clamp(82px, 9vh, 106px) clamp(16px, 2.4vw, 44px) clamp(16px, 2.4vw, 44px);
  border-radius: clamp(22px, 2vw, 34px);
  padding: clamp(132px, 16vh, 248px) 0;
}
@media (max-width: 760px) {
  .hero.hero--framed { margin: 74px 14px 14px; border-radius: 20px; padding: 72px 0; }
}

/* ===== HERO subline + in-hero logo strip (combined) ===== */
.hero .hero-sub { font-size: clamp(16px, 1.4vw, 18px); max-width: 580px; margin-bottom: 34px; }
.hero-logos { margin-top: clamp(40px, 5vw, 62px); display: flex; flex-direction: column; align-items: center; gap: 30px; }
.hl-label { font-family: var(--font-pixel); font-size: 10px; letter-spacing: 2.5px; color: var(--ink-3); }
.hl-row { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 4vw, 52px); flex-wrap: wrap; }
.hl-row img { height: 22px; width: auto; filter: brightness(0); opacity: .36; transition: opacity .3s ease; }
.hl-row img:hover { opacity: .62; }

/* ===== HERO audience rotator ===== */
.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: 2px;
  color: var(--navy); margin-bottom: 26px; text-transform: uppercase;
}
.hero-tag .rot {
  color: var(--gold); position: relative; display: inline-block;
  min-width: 6.5em; text-align: left;
}
.hero-tag .rot::after { content: ''; }
.rot-word { display: inline-block; animation: rotIn .5s cubic-bezier(.2,.7,.3,1); }
@keyframes rotIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ===== TRUST STATS (inline band) ===== */
.truststrip { background: var(--navy-dark); padding: 30px 0 0; }
.truststrip .lead {
  text-align: center; font-family: var(--font-pixel); font-size: 9px;
  letter-spacing: 2.5px; color: rgba(255,255,255,.5); margin-bottom: 24px;
}
.truststrip .partners-row { display: flex; align-items: center; justify-content: center; gap: clamp(28px,5vw,64px); flex-wrap: wrap; padding-bottom: 34px; }
.truststrip .partners-row img { height: 26px; width: auto; opacity: .72; filter: brightness(0) invert(1); transition: opacity .3s ease; }
.truststrip .partners-row img:hover { opacity: 1; }
.trust-stats {
  display: grid; grid-template-columns: repeat(3,1fr);
  border-top: 1px solid rgba(255,255,255,.10);
}
.trust-stats .ts { text-align: center; padding: 30px 20px; }
.trust-stats .ts + .ts { border-left: 1px solid rgba(255,255,255,.10); }
.trust-stats .ts .n { font-family: var(--font-pixel); font-size: clamp(20px,3vw,30px); color: var(--gold-light); line-height: 1; margin-bottom: 12px; }
.trust-stats .ts .l { font-size: 13px; color: rgba(255,255,255,.6); letter-spacing: .2px; }

/* ===== SOUND FAMILIAR (prose pains) ===== */
.familiar-body { max-width: 760px; margin: 44px auto 0; }
.familiar-body p {
  font-size: clamp(19px, 2.1vw, 26px); font-weight: 500;
  letter-spacing: -0.02em; line-height: 1.45; color: var(--ink);
  padding: 26px 0; border-bottom: 1px solid var(--line);
  text-wrap: pretty;
}
.familiar-body p:first-child { padding-top: 0; }
.familiar-body p .dim { color: var(--ink-3); }
.familiar-body p strong { color: var(--gold); font-weight: 600; }
.familiar-foot { max-width: 760px; margin: 30px auto 0; }
.familiar-foot p { font-size: 18px; color: var(--ink-2); }
.familiar-foot strong { color: var(--ink); }

/* ===== CASE STUDIES (metric receipts) ===== */
.cs2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,64px); align-items: center; }
.cs2 + .cs2 { margin-top: clamp(56px,7vw,100px); padding-top: clamp(56px,7vw,100px); border-top: 1px solid var(--line); }
.cs2--rev .cs2-media { order: 2; }
.cs2-label { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.cs2-label .idx { font-family: var(--font-pixel); font-size: 9px; letter-spacing: 1.5px; color: var(--gold); }
.cs2-label .cat { font-family: var(--font-pixel); font-size: 9px; letter-spacing: 1.5px; color: var(--ink-3); background: var(--bg-soft); border: 1px solid var(--line); padding: 6px 11px; border-radius: 999px; }
.cs2-text h3 { font-size: clamp(26px,3vw,38px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; margin-bottom: 26px; text-wrap: balance; }
.cs2-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 26px; }
.cs2-metric { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-softer); padding: 18px 14px; }
.cs2-metric .n { font-family: var(--font-pixel); font-size: clamp(16px,1.9vw,21px); color: var(--gold); line-height: 1.1; margin-bottom: 9px; }
.cs2-metric .l { font-size: 12px; color: var(--ink-2); line-height: 1.35; }
.cs2-who { display: flex; align-items: center; gap: 12px; }
.cs2-who .av { width: 40px; height: 40px; border-radius: 10px; background: var(--navy); color: #fff; font-family: var(--font-pixel); font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cs2-who .av svg { width: 21px; height: 21px; display: block; }
.cs2-who .av.av-li { background: #0A66C2; }
.cs2-who .av.av-x { background: #000; }
.cs2-who .nm { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.cs2-who .lnk { font-size: 13px; color: var(--gold); display: inline-flex; align-items: center; gap: 5px; }
.cs2-who .lnk:hover { text-decoration: underline; text-underline-offset: 3px; }
.cs2-media { position: relative; }
.cs2-shot { position: relative; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-md); background: var(--bg); }
.cs2-shot img { width: 100%; display: block; height: auto; }
.cs2-shot .ph { aspect-ratio: 1014/788; }
.cs2-cap { position: absolute; top: 14px; left: 14px; z-index: 2; font-family: var(--font-pixel); font-size: 8px; letter-spacing: 1px; color: var(--navy-dark); background: rgba(255,255,255,.92); backdrop-filter: blur(6px); padding: 6px 11px; border-radius: 8px; box-shadow: var(--shadow-sm); }

/* ===== CONTENT SHOWCASE (marquee) ===== */
.showcase { padding: clamp(64px,8vw,110px) 0; overflow: hidden; }
.showcase .sec-head { padding: 0 clamp(20px,4vw,40px); }
.marquee { display: flex; flex-direction: column; gap: 22px; margin-top: 52px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.marquee-row { display: flex; gap: 22px; width: max-content; align-items: flex-start; }
.marquee-row.r1 { animation: scrollL 56s linear infinite; }
.marquee-row.r2 { animation: scrollR 56s linear infinite; }
.marquee:hover .marquee-row { animation-play-state: paused; }
@keyframes scrollL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes scrollR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.post-shot {
  width: 300px; flex-shrink: 0; border-radius: var(--r-card);
  background: var(--bg); box-shadow: var(--shadow-md); overflow: hidden;
  border: 1px solid var(--line); align-self: flex-start;
}
.post-shot img { width: 100%; height: auto; display: block; }@media (prefers-reduced-motion: reduce){ .marquee-row.r1,.marquee-row.r2 { animation: none; } }

/* ===== OFFER (one system checklist) ===== */
.offer-wrap { max-width: 860px; margin: 48px auto 0; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--bg-softer); padding: clamp(32px,4vw,52px); }
.offer-wrap::before { content: ''; display: block; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--navy), var(--gold)); width: 64px; margin-bottom: 30px; }
.offer-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; }
.offer-list li { display: flex; gap: 13px; font-size: 16px; line-height: 1.45; color: var(--ink); align-items: flex-start; }
.offer-list li .ck { flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-family: var(--font-pixel); font-size: 9px; color: var(--green); background: rgba(31,157,87,.10); border: 1px solid rgba(31,157,87,.22); margin-top: 1px; }
.offer-cta { margin-top: 36px; display: flex; justify-content: center; }

/* ===== COMPARISON TABLE (4-way) ===== */
.cmp-table { border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; background: var(--bg); box-shadow: var(--shadow-sm); }
.cmp-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr; }
.cmp-row + .cmp-row { border-top: 1px solid var(--line); }
.cmp-cell { padding: 20px 18px; font-size: 14px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; }
.cmp-cell + .cmp-cell { border-left: 1px solid var(--line); }
.cmp-row.head .cmp-cell { padding: 26px 18px; align-items: flex-start; flex-direction: column; gap: 6px; }
.cmp-row.head .rowlabel { background: var(--bg-soft); }
.cmp-cell.rowlabel { font-weight: 600; color: var(--ink); background: var(--bg-softer); }
.cmp-row.head .opt-nm { font-family: var(--font-pixel); font-size: 11px; letter-spacing: .5px; color: var(--ink); }
.cmp-row.head .opt-tag { font-size: 12px; color: var(--ink-3); }
.cmp-row.head .opt-price { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.cmp-col-clario { background: rgba(176,129,11,.05); }
.cmp-row.head .cmp-col-clario { background: var(--navy-dark); }
.cmp-row.head .cmp-col-clario .opt-nm,
.cmp-row.head .cmp-col-clario .opt-tag,
.cmp-row.head .cmp-col-clario .opt-price { color: #fff; }
.cmp-row.head .cmp-col-clario .opt-nm { color: var(--gold-light); }
.cmp-mk { font-family: var(--font-pixel); font-size: 10px; width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cmp-mk.y { color: var(--green); background: rgba(31,157,87,.10); border: 1px solid rgba(31,157,87,.22); }
.cmp-mk.n { color: var(--ink-3); background: var(--bg-soft); border: 1px solid var(--line); }
.cmp-mk.s { color: var(--gold); background: var(--gold-soft); border: 1px solid rgba(176,129,11,.16); }
.cmp-col-clario .v { color: var(--ink); font-weight: 600; }
.cmp-note { margin-top: 22px; text-align: center; font-size: 13px; color: var(--ink-3); }

/* ===== PROCESS (5-step vertical) ===== */
.proc5 { max-width: 880px; margin: 52px auto 0; position: relative; }
.proc5::before { content: ''; position: absolute; left: 39px; top: 40px; bottom: 40px; width: 2px; background: repeating-linear-gradient(180deg, var(--gold) 0, var(--gold) 7px, transparent 7px, transparent 15px); opacity: .3; }
.proc5-step { display: grid; grid-template-columns: 80px 1fr; gap: 28px; align-items: start; padding: 22px 0; position: relative; }
.proc5-num { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; font-family: var(--font-pixel); font-size: 18px; color: var(--gold); border: 2px solid var(--line-2); border-radius: 18px; background: var(--bg); position: relative; z-index: 2; transition: all .4s ease; }
.proc5-step:hover .proc5-num { border-color: var(--gold); box-shadow: 0 0 28px rgba(176,129,11,.18); transform: scale(1.05); }
.proc5-body { padding-top: 8px; }
.proc5-body h3 { font-size: clamp(20px,2.2vw,26px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 9px; }
.proc5-body p { font-size: 16px; color: var(--ink-2); line-height: 1.6; max-width: 560px; }

/* ===== FOUNDER editorial ===== */
.operator { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(36px,5vw,68px); align-items: center; }
.operator-portraits { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.operator-text .fb { font-size: 16.5px; color: var(--ink-2); line-height: 1.75; margin-top: 18px; }
.operator-text .fb strong { color: var(--ink); font-weight: 600; }
.operator-cta { margin-top: 30px; }

/* ===== WHO THIS IS FOR ===== */
.fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 980px; margin: 48px auto 0; }
.fit { border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--bg); padding: 38px clamp(26px,3vw,40px); }
.fit.yes { border-color: var(--navy); box-shadow: 0 10px 40px rgba(23,55,89,.08); }
.fit-head { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.fit-head .tag { font-family: var(--font-pixel); font-size: 12px; letter-spacing: .5px; }
.fit.yes .fit-head .tag { color: var(--navy); }
.fit.no .fit-head .tag { color: var(--ink-3); }
.fit ul { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.fit li { display: flex; gap: 13px; font-size: 15.5px; line-height: 1.5; align-items: flex-start; }
.fit.yes li { color: var(--ink); }
.fit.no li { color: var(--ink-2); }
.fit li .mk { flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-family: var(--font-pixel); font-size: 10px; margin-top: 1px; }
.fit.yes li .mk { color: var(--green); background: rgba(31,157,87,.10); border: 1px solid rgba(31,157,87,.22); }
.fit.no li .mk { color: var(--ink-3); background: var(--bg-soft); border: 1px solid var(--line); }

/* ===== BOOKING (final step) ===== */
.booking { border-radius: var(--r-panel); overflow: hidden; background: var(--navy-dark); position: relative; }
.booking-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px,4vw,56px); padding: clamp(28px,3.4vw,48px); align-items: center; }
.booking .eyebrow { color: var(--gold-light); }
.booking .eyebrow::before { color: var(--green); }
.booking h2 { font-size: clamp(28px,3.2vw,42px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: #fff; margin: 14px 0 12px; text-wrap: balance; }
.booking-sub { font-size: 16px; color: rgba(255,255,255,.72); line-height: 1.55; margin-bottom: 24px; max-width: 420px; }
.booking-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.booking-meta .chip { font-family: var(--font-pixel); font-size: 8px; letter-spacing: 1px; color: rgba(255,255,255,.7); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); padding: 9px 13px; border-radius: 999px; }
.expect { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-card); padding: clamp(26px,3vw,38px); }
.expect .ex-lead { font-family: var(--font-pixel); font-size: 9px; letter-spacing: 1.5px; color: var(--gold-light); margin-bottom: 24px; }
.expect-step { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.expect-step + .expect-step { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.10); }
.expect-step .en { width: 44px; height: 44px; border-radius: 11px; border: 2px solid rgba(176,129,11,.45); color: var(--gold-light); font-family: var(--font-pixel); font-size: 12px; display: flex; align-items: center; justify-content: center; }
.expect-step h4 { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 5px; letter-spacing: -0.01em; }
.expect-step p { font-size: 14px; color: rgba(255,255,255,.66); line-height: 1.55; }
.booking-foot { margin-top: 32px; }
.expect-lite { margin-top: 30px; }
.expect-lite .el-lead { font-family: var(--font-pixel); font-size: 8px; letter-spacing: 1.5px; color: var(--gold-light); margin-bottom: 16px; }
.expect-lite ul { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.expect-lite li { display: flex; gap: 13px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.74); align-items: baseline; }
.expect-lite li span { font-family: var(--font-pixel); font-size: 9px; color: var(--gold-light); flex-shrink: 0; opacity: .85; }
.cal-embed {
  background: #fff;
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  align-self: center;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
.cal-embed > div { width: 100%; }
.booking-foot .by { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.booking-foot .by .av { width: 42px; height: 42px; border-radius: 11px; background: var(--gold); color: #fff; font-family: var(--font-pixel); font-size: 13px; display: flex; align-items: center; justify-content: center; }
.booking-foot .by .av.av-img { background: transparent; padding: 0; overflow: hidden; }
.booking-foot .by .av.av-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.booking-foot .by .nm { font-weight: 700; color: #fff; font-size: 15px; }
.booking-foot .by .rl { font-size: 13px; color: rgba(255,255,255,.6); }
.booking-foot .email { font-size: 14px; color: rgba(255,255,255,.6); }
.booking-foot .email a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .cs2, .cs2--rev, .operator { grid-template-columns: 1fr; gap: 32px; }
  .cs2--rev .cs2-media { order: 0; }
  .booking-grid { grid-template-columns: 1fr; }
  .fit-grid { grid-template-columns: 1fr; max-width: 540px; }
  .offer-list { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .trust-stats { grid-template-columns: 1fr; }
  .trust-stats .ts + .ts { border-left: none; border-top: 1px solid rgba(255,255,255,.10); }
  .cs2-metrics { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .cmp-table { overflow-x: auto; }
  .cmp-row { grid-template-columns: 130px 110px 110px 110px 110px; min-width: 570px; }
  .proc5::before { left: 31px; }
  .proc5-step { grid-template-columns: 64px 1fr; gap: 18px; }
  .proc5-num { width: 64px; height: 64px; font-size: 15px; }
  .operator-portraits { max-width: 360px; }
}
@media (max-width: 480px) {
  .cs2-metrics { grid-template-columns: 1fr; }
  .familiar-body p { font-size: 18px; }
}