/* NailFlowApp – shared additions (2026-10-22): nav, footer, inner pages, features grid, contact. Loaded after style.css. */
:root{--nf-blue:#2467ef;--nf-navy:#0f1f4d;--nf-ink:#102044;--nf-muted:#4d5b74;--nf-line:#e3e9f6;--nf-soft:#f4f7ff;--nf-pink:#db2777}
#links a.cur{color:var(--nf-blue)}
#links .btn{color:#fff}
/* ---------- features grid ---------- */
.fx{padding:96px 0;background:#fff}
.fxgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.fxc{background:var(--nf-soft);border:1px solid var(--nf-line);border-radius:22px;padding:26px 24px;min-width:0}
.fxc i{font-style:normal;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:#fff;font-size:26px;box-shadow:0 8px 20px #193a7112}
.fxc h3{font-family:Manrope,sans-serif;font-size:21px;letter-spacing:-.02em;margin:16px 0 8px;color:var(--nf-ink)}
.fxc p{margin:0;color:var(--nf-muted);font-size:16.5px;line-height:1.6}
.fxc ul{margin:10px 0 0;padding-left:18px;color:var(--nf-muted);font-size:15.5px;line-height:1.6}
.fxc.hl{background:linear-gradient(135deg,#0f1f4d,#1e40af);border:0;color:#fff}
.fxc.hl h3{color:#fff}.fxc.hl p,.fxc.hl ul{color:#dbe6ff}.fxc.hl i{background:#ffffff26;box-shadow:none}
.fxnote{text-align:center;color:#6b7891;font-size:15px;margin-top:26px}
@media(max-width:1000px){.fxgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.fxgrid{grid-template-columns:1fr}.fx{padding:64px 0}}
/* ---------- contact block on home ---------- */
.cgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:6px}
.cbox{background:#ffffff14;border:1px solid #ffffff2e;border-radius:18px;padding:18px 20px;min-width:0}
.cbox small{display:block;color:#b0c9ff;font-weight:800;letter-spacing:1.5px;font-size:12px}
.cbox a,.cbox span{display:block;color:#fff;font-weight:700;font-size:17px;margin-top:6px;overflow-wrap:anywhere}
.contact .actions2{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
@media(max-width:900px){.cgrid{grid-template-columns:1fr}}
/* ---------- footer ---------- */
footer.nf{background:#0b1638;color:#c9d5f0;padding:56px 0 28px}
footer.nf .wrap{display:block}
footer.nf .fcols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
footer.nf .logo{color:#fff!important;font-size:24px!important}
footer.nf .logo span{color:#7fa6ff}
footer.nf p{color:#c9d5f0!important;font-size:15px!important;line-height:1.65;margin:12px 0 0}
footer.nf h4{color:#fff;font:800 13px 'DM Sans',sans-serif;letter-spacing:1.6px;margin:4px 0 12px}
footer.nf ul{list-style:none;margin:0;padding:0}
footer.nf li{margin:0 0 9px}
footer.nf a{color:#c9d5f0!important;font-size:15px!important}
footer.nf a:hover{color:#fff!important}
footer.nf .fbot{border-top:1px solid #ffffff1f;margin-top:36px;padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:#93a3c7}
footer.nf .fbot a{font-size:14px!important}
@media(max-width:900px){footer.nf .fcols{grid-template-columns:1fr 1fr}}
@media(max-width:620px){footer.nf .fcols{grid-template-columns:1fr}footer.nf{padding:44px 0 24px}}
/* ---------- inner pages ---------- */
.phero{background:radial-gradient(ellipse at 85% 80%,#ffe2ed,transparent 45%),radial-gradient(ellipse at 0 0,#e6efff,transparent 55%),#fff;padding:70px 0 54px;border-bottom:1px solid #e9edf5}
.phero .label{font-size:13px!important}
.phero h1{font-size:clamp(38px,5vw,60px);margin:14px 0 12px}
.phero p{font-size:20px;color:#4d5b74;line-height:1.6;max-width:760px;margin:0}
.pbody{padding:56px 0 80px;background:#fff}
.doc{max-width:860px;margin:0 auto;font-size:17.5px;line-height:1.7;color:#24324f}
.doc h2{font-size:clamp(24px,2.6vw,30px);letter-spacing:-.03em;margin:40px 0 10px;color:var(--nf-ink)}
.doc h3{font-family:Manrope,sans-serif;font-size:20px;margin:26px 0 6px;color:var(--nf-ink)}
.doc p{margin:0 0 14px}
.doc ul{margin:0 0 16px;padding-left:22px}
.doc li{margin:0 0 8px}
.doc a{color:var(--nf-blue);font-weight:700}
.doc .meta{background:var(--nf-soft);border:1px solid var(--nf-line);border-radius:16px;padding:16px 20px;font-size:16px;margin-bottom:28px}
.doc .toc{background:#fff;border:1px solid var(--nf-line);border-radius:16px;padding:16px 22px;margin:0 0 30px;font-size:16px}
.doc .toc ol{margin:6px 0 0;padding-left:20px;columns:2;column-gap:28px}
.doc .toc li{margin:0 0 6px;break-inside:avoid}
@media(max-width:620px){.doc .toc ol{columns:1}.phero{padding:48px 0 40px}.pbody{padding:40px 0 60px}}
.pcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:8px 0 30px}
.pcard{background:var(--nf-soft);border:1px solid var(--nf-line);border-radius:20px;padding:22px;min-width:0}
.pcard i{font-style:normal;font-size:28px}
.pcard h3{margin:10px 0 6px!important;font-size:20px}
.pcard p{margin:0;font-size:16px;color:var(--nf-muted)}
.pcard a{overflow-wrap:anywhere}
.pcards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.pcards,.pcards.two{grid-template-columns:1fr}}
.story{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}
.story .quote{background:linear-gradient(135deg,#9d174d,#db2777 60%,#f472b6);color:#fff;border-radius:24px;padding:30px;font-size:20px;line-height:1.55;box-shadow:0 24px 50px #9d174d33}
.story .quote b{display:block;margin-top:14px;font-size:15px;opacity:.9;letter-spacing:.5px}
@media(max-width:900px){.story{grid-template-columns:1fr}}
.facts2{display:grid;grid-template-columns:200px 1fr;border:1px solid var(--nf-line);border-radius:18px;overflow:hidden;margin:10px 0 24px}
.facts2 dt,.facts2 dd{margin:0;padding:13px 18px;border-bottom:1px solid #eef1f7;font-size:16.5px}
.facts2 dt{font-weight:800;color:var(--nf-blue);background:#f3f7ff}
.facts2 dt:last-of-type,.facts2 dd:last-of-type{border-bottom:0}
@media(max-width:620px){.facts2{grid-template-columns:1fr}.facts2 dt{border-bottom:0;padding-bottom:2px}.facts2 dd{padding-top:2px}}
/* ---------- "needs Logan's confirmation" marks (staging only – hidden on the live site by .live) ---------- */
.cf{background:#fff3b0;border-bottom:2px dashed #e0a800;border-radius:3px;padding:0 2px}
.cf::after{content:" ⚠";color:#b45309;font-size:.8em}
body.live .cf{background:none;border:0;padding:0}
body.live .cf::after{content:none}
.stgbar{position:sticky;top:0;z-index:50;background:#7c2d12;color:#fff;font:700 14px 'DM Sans',sans-serif;padding:8px 16px;text-align:center}
body.live .stgbar{display:none}

/* ---------- audit 23/10/2026: contrast + heading order ---------- */
footer.nf .fh{color:#fff;font:800 13px 'DM Sans',sans-serif;letter-spacing:1.6px;margin:4px 0 12px}
.tech .hi .h4x{margin:0;font-size:17px;font-weight:800}
.pay .box .h6x{margin:0 0 6px;font-size:9px;letter-spacing:1px;color:#374151;font-weight:800}
.lead,.heading p,.price p,.split p,.card p,.mini small{color:#4d5b74}
.note,.fine,.mocknote,.preview{color:#5f6b80!important}
.screen>small,.stats small,.cal .days small{color:#4b5563}
.desk .srch{color:#4b5563!important}
.tech .chip.off i{color:#b91c1c}
.cal .days .sel{background:#e5e7eb}

/* ---------- 23/10/2026: iPhone hero ---------- */
.hero .tag.herotag{background:linear-gradient(135deg,#2F5BEA,#7B4FE0);color:#fff;border:0;box-shadow:0 14px 30px -14px rgba(47,91,234,.75);font-size:clamp(20px,2.4vw,30px)!important;letter-spacing:.05em!important;line-height:1.25;padding:12px 20px!important}
.hero .owner-line.heroown{background:linear-gradient(135deg,#E0457B,#B8306A);color:#fff;border:0;box-shadow:0 14px 30px -14px rgba(184,48,106,.75);font-size:clamp(18px,2vw,24px)!important;font-weight:800;line-height:1.3;padding:12px 20px!important}
.hero .actions{gap:14px;flex-wrap:wrap}
.hero .actions .btn2{display:inline-block;border-radius:12px;padding:15px 20px;font-weight:800;font-size:16px;color:#2467ef;background:#fff;border:1px solid #cfdcfb}
@media(max-width:620px){
 .hero-grid{padding-top:22px!important;gap:10px}
 .hero .tag.herotag{font-size:14px!important;letter-spacing:.06em!important;padding:8px 14px!important;border-radius:999px}
 .hero .owner-line.heroown{font-size:15px!important;padding:8px 14px!important;margin-top:8px!important;border-radius:999px}
 .hero h1{font-size:44px;margin:18px 0 12px}
 .hero .lead{font-size:18px!important;line-height:1.6;margin:0}
 .hero .actions{margin-top:20px}
 .hero .actions a{flex:1 1 100%;text-align:center}
 .hero .note{margin-top:16px}
}