/* GXPOLISH-1025 · Hair Bar NYC Professional · G&C color page POLISH PASS (staging, Oct 25 2026).
   Loaded LAST in the page (after gc-color.css, gc-matcher.css and the inline flow CSS) by gc_polish.py.
   Brings the page in line with the locked franchise standard: Cormorant Garamond headings, Inter text,
   teal #00A8BC / #075760 with purple + pink only in gradients, 10px cards, soft teal shadows, pill buttons.
   Layout/type only. No wording, prices, claims, formulas or calculator logic touched. Every rule is scoped to #gcx. */
#gcx{--t:#00A8BC;--td:#075760;--tl:#DCEFED;--p:#075760;--pl:#DCEFED;--pv:#5b46c9;--pvl:#f3f0fe;--k:#0A0A0A;--g:#5d6a72;--l:#dcefed;--pk:#D80058;
 --serif:"Cormorant Garamond",Georgia,serif;--sans:Inter,"Helvetica Neue",Arial,sans-serif;
 --gtext:linear-gradient(100deg,#00A8BC 0%,#7359EA 55%,#F898B8 100%);
 --gbtn:linear-gradient(135deg,#075760,#075760);--gbtnh:linear-gradient(135deg,#7359EA,#075760);
 --gdark:radial-gradient(ellipse at top right,rgba(115,89,234,.35),transparent 50%),radial-gradient(ellipse at bottom left,rgba(0,168,188,.28),transparent 55%),#0A0A0A;
 --sh:0 20px 60px rgba(7,87,96,.07);--sh2:0 18px 40px rgba(7,87,96,.14);
 font-family:var(--sans);color:#14181b;-webkit-font-smoothing:antialiased}
#gcx button,#gcx input,#gcx select,#gcx textarea,#gcx summary,#gcx table,#gcx th,#gcx td{font-family:var(--sans)}

/* ---------- headings: serif, franchise weight, small gradient rule ---------- */
#gcx h1,#gcx h2{font-family:var(--serif);font-weight:600;letter-spacing:.003em;color:var(--k);text-wrap:balance}
#gcx .gx-hero h1{font-weight:500;font-size:clamp(42px,5.2vw,70px);line-height:1;letter-spacing:0}
#gcx .gx-hero h1 span{background:var(--gtext);-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic}
#gcx section>h2{font-size:clamp(32px,3.6vw,48px);line-height:1.05;margin-bottom:12px}
#gcx section>h2:before{content:"";display:block;width:46px;height:3px;border-radius:3px;background:var(--gtext);margin-bottom:18px}
#gcx .gx-close>h2:before{display:none}
#gcx .gx-sub{font-size:16.5px;color:var(--g);line-height:1.6}
#gcx section{padding:64px 0;border-bottom:1px solid var(--l)}
#gcx section.gx-hero{padding-top:40px}
#gcx h3,#gcx h4{font-family:var(--serif);font-weight:600;letter-spacing:.003em}
#gcx .gx-dv h3,#gcx #color-flow .gx-step h3{font-size:clamp(24px,2.2vw,28px);line-height:1.15;color:var(--k);font-weight:600}
#gcx .gx-dv .gx-px h4{font-weight:600;font-size:clamp(26px,2.5vw,32px)}
#gcx .gx-panel h3,#gcx .gx-out h3{font-size:24px}
#gcx .gx-punch{font-family:var(--sans);font-weight:700!important}
#gcx summary{font-weight:600}
#gcx #faq details>summary{font-family:var(--serif);font-size:21px;font-weight:600;padding:4px 0}
#gcx #faq details{border-radius:10px;padding:14px 18px;background:#fff;transition:border-color .2s,box-shadow .2s}
#gcx #faq details[open]{border-color:var(--t);box-shadow:var(--sh2)}

/* ---------- buttons: franchise pills ---------- */
#gcx .gx-btn{background:var(--gbtn);border-color:transparent;font-weight:600;letter-spacing:.02em;transition:background .3s,box-shadow .3s,transform .3s}
#gcx .gx-btn:hover{background:var(--gbtnh);border-color:transparent;box-shadow:0 12px 34px rgba(115,89,234,.28);transform:translateY(-1px)}
#gcx .gx-btn.alt{background:#fff;color:var(--k);border:1.5px solid var(--td)}
#gcx .gx-btn.alt:hover{background:var(--tl);color:var(--td);border-color:#7359EA;box-shadow:none}
#gcx .gx-close .gx-btn.alt,#gcx .gx-tray .gx-btn.alt{background:transparent;color:#fff;border-color:rgba(0,168,188,.7)}
#gcx .gx-close .gx-btn.alt:hover,#gcx .gx-tray .gx-btn.alt:hover{background:rgba(0,168,188,.15);color:#fff}
#gcx .gx-chip{border-color:var(--l);font-weight:500}
#gcx .gx-chip:hover{border-color:var(--t)}
#gcx .gx-chip[aria-pressed=true]{background:var(--gbtn);border-color:transparent}
#gcx .gx-tabs{border-bottom-color:var(--td)}
#gcx .gx-tab{border-color:var(--td);font-weight:600;border-radius:10px 10px 0 0}
#gcx .gx-tab[aria-selected=true]{background:var(--gbtn);border-color:var(--td)}

/* ---------- cards, panels, tables ---------- */
#gcx .gx-card,#gcx .gx-panel,#gcx .gx-dvcard,#gcx a.gx-dvcta,#gcx #color-flow .gx-step,#gcx .gx-sc{border-radius:10px}
#gcx .gx-dv .gx-px{border-radius:12px}
#gcx .gx-card{border:1px solid var(--l)}
#gcx .gx-card:hover{box-shadow:var(--sh2);transform:translateY(-3px)}
#gcx .gx-panel,#gcx .gx-dvcard,#gcx a.gx-dvcta{border:1px solid var(--l);box-shadow:var(--sh)}
#gcx .gx-dvcard{border-top:3px solid var(--t)}
#gcx .gx-dvproc{border-top-color:var(--td)}
#gcx .gx-dvn,#gcx .gx-stepn{background:var(--gbtn);font-family:var(--serif);font-weight:600;font-size:19px;box-shadow:0 4px 12px rgba(7,87,96,.25)}
#gcx .gx-dvproc .gx-dvn{background:var(--k)}
#gcx .gx-dvn-eq{background:#fff;color:var(--td);border:2px solid var(--t);box-shadow:none}
#gcx th,#gcx .gx-dvt th{background:var(--k);font-weight:600;letter-spacing:.08em;font-size:12px}
#gcx .gx-dvamt th{background:var(--td)}
#gcx .gx-out{border-radius:10px;background:linear-gradient(180deg,var(--tl),#F5FBFD)}
#gcx .gx-mosaic img{border-radius:8px}
#gcx .gx-close{background:var(--gdark);border-radius:10px;position:relative;overflow:hidden}
#gcx .gx-close:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(0,168,188,.05) 0 1px,transparent 1px 22px);pointer-events:none}
#gcx .gx-close>*{position:relative;z-index:1}
#gcx .gx-close h2{font-size:clamp(32px,3.6vw,46px)}

/* ---------- shade cards ---------- */
#gcx .gx-num{font-family:var(--serif);font-weight:600;font-size:26px;font-variant-numeric:lining-nums}
#gcx h1,#gcx h2,#gcx h3,#gcx h4,#gcx .gx-dvn,#gcx .gx-stepn{font-variant-numeric:lining-nums}
#gcx .gx-num small{font-family:var(--sans);font-size:12px}
#gcx .gx-name{font-weight:500;color:#2a3236}
#gcx .gx-tags{align-items:center;gap:5px}
#gcx .gx-tag{font-size:12px;font-weight:600;letter-spacing:.05em;border-radius:20px;padding:3px 9px;line-height:1.3}
#gcx .gx-tag.f{border-color:var(--td);color:var(--td)}
#gcx .gx-tag.s{background:var(--tl);color:var(--td)}
#gcx .gx-gray summary{color:var(--td);font-weight:600}
#gcx .gx-guide{font-size:12px}
#gcx .gx-approx:after{font-size:12px}
#gcx .gx-act a{font-size:13px;font-weight:600}
#gcx .gx-cmp{font-size:12.5px}

/* ---------- wheel: labels readable and no longer clipped at the edges ---------- */
#gcx svg.gx-wheel{overflow:visible;padding:0 26px;filter:drop-shadow(0 10px 24px rgba(7,87,96,.16))}
#gcx svg.gx-wheel text{font-size:13px!important;font-family:var(--sans);font-weight:600;fill:#2a3236}
#gcx svg.gx-wheel path.on{stroke:var(--td)}

/* ---------- labels under 12px (flow + matcher) ---------- */
#gcx .gx-eyebrow,#gcx .gx-earnk,#gcx .gx-dryer-k,#gcx .gx-pendtag,#gcx .gx-soon{font-size:12px}
#gcx .gx-flow i,#gcx .gx-flow small,#gcx .gx-copy small{font-size:12px}
#gcx .gm-eyebrow{font-size:12px}
#gcx .gx-pxk{font-size:12.5px}

/* ---------- phones ---------- */
@media (max-width:860px){
 #gcx section{padding:46px 0}
 #gcx section>h2{font-size:clamp(30px,8vw,38px)}
 #gcx svg.gx-wheel{padding:0 18px}
 #gcx svg.gx-wheel text{font-size:15px!important}
}
@media (max-width:600px){
 #gcx .gx-hero h1{font-size:clamp(38px,11vw,48px)}
 #gcx .gx-sw{aspect-ratio:1.7}
 #gcx .gx-b{padding:9px 9px 10px;gap:5px}
 #gcx .gx-num{font-size:23px}
 #gcx .gx-name{min-height:0}
 #gcx .gx-act{gap:4px 8px}
 #gcx .gx-gray{padding-top:3px}
 #gcx #faq details>summary{font-size:19px;padding:0}
 #gcx #faq details{padding:11px 14px;margin-bottom:7px}
 #gcx .gx-dv h3,#gcx #color-flow .gx-step h3{font-size:22px}
 #gcx .gx-dv .gx-px h4{font-size:24px}
 #gcx section>h2:before{margin-bottom:14px}
 #gcx .gx-tag{padding:2px 8px;letter-spacing:.03em}
}