/* ============================================================
   SPF — shared brand styles for blog, guides & tools
   Brand tokens locked to match the main lander (Figma source).
   ============================================================ */
:root{
  --brown:#4B3621;            /* primary text */
  --brown-soft:#6F5E4D;       /* secondary text */
  --orange:#EC7E27;           /* primary brand */
  --orange-deep:#E5802A;
  --amber:#FEB544;            /* gold accent */
  --amber-2:#FFB745;
  --cream:#FFEFE0;            /* peach surface */
  --cream-2:#FFFCFA;
  --paper:#FFFFFF;
  --green:#34C759;
  --blue:#0088FF;
  --shadow-brown:rgba(75,54,33,.08);
  --shadow-brown-2:rgba(75,54,33,.14);
  --glow:rgba(236,126,39,.40);
  --round: ui-rounded, 'SF Pro Rounded', 'Nunito', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --maxw:760px;               /* article measure */
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--round);
  color:var(--brown);
  background:#FFF7EE;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  line-height:1.6;
}
img{max-width:100%;display:block;}
a{color:var(--orange-deep);text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:2px;}

/* warm page background to match the lander */
.spf-page{position:relative; min-height:100dvh; overflow:hidden; isolation:isolate;}
.spf-page::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(120% 60% at 78% -8%, #FFD9A6 0%, rgba(255,217,166,0) 48%),
    radial-gradient(110% 50% at 12% 2%, #FFE6C9 0%, rgba(255,230,201,0) 42%),
    linear-gradient(180deg, #FFF3E4 0%, #FFF8F1 40%, #FFFCFA 100%);
}

.wrap{max-width:1160px; margin:0 auto; padding:0 22px;}
.narrow{max-width:var(--maxw); margin:0 auto; padding:0 22px;}

/* ---------- Top nav ---------- */
.nav{display:flex; align-items:center; justify-content:space-between; padding:16px 22px 6px;}
.nav .brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; letter-spacing:.2px; color:var(--brown);}
.nav .brand img{width:38px; height:38px; border-radius:10px; box-shadow:0 4px 12px var(--glow);}
.nav .brand:hover{text-decoration:none;}
.nav .nav-links{display:flex; align-items:center; gap:18px; font-weight:700; font-size:14.5px;}
.nav .nav-links a{color:var(--brown-soft);}
.nav .nav-links a:hover{color:var(--orange-deep); text-decoration:none;}
.nav .nav-links a.nav-cta, .nav .nav-links a.nav-cta:hover{display:inline-flex; align-items:center; gap:7px;
  background:linear-gradient(180deg,#F79338 0%, var(--orange) 52%, #E0731C 100%); color:#fff;
  padding:9px 16px; border-radius:12px; font-weight:800; font-size:13.5px; box-shadow:0 6px 16px var(--glow);}
.nav .nav-links a.nav-cta:hover{text-decoration:none; filter:brightness(1.06);}
@media(max-width:620px){ .nav .nav-links a:not(.nav-cta){display:none;} }

/* ---------- Buttons / App Store badge ---------- */
.btn-appstore{display:inline-flex; align-items:center; justify-content:center; gap:13px;
  background:#0b0b0d; color:#fff; border-radius:18px; padding:16px 26px; cursor:pointer;
  box-shadow:0 10px 24px rgba(75,54,33,.22), inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .14s ease, filter .14s ease;}
.btn-appstore:hover{transform:translateY(-2px); filter:brightness(1.15); text-decoration:none;}
.btn-appstore:active{transform:translateY(0) scale(.99);}
.btn-appstore .apple{width:27px; height:27px; flex:none;}
.btn-appstore .ba-text{display:flex; flex-direction:column; line-height:1; text-align:left;}
.btn-appstore .ba-text small{font-size:12.5px; font-weight:600; opacity:.92; margin-bottom:3px;}
.btn-appstore .ba-text b{font-size:23px; font-weight:700; letter-spacing:-.3px;}

.stars{display:inline-flex; gap:3px; color:var(--amber); font-size:15px; line-height:1; vertical-align:middle;}
.stars .half{position:relative; color:rgba(236,126,39,.28);}
.stars .half span{position:absolute; left:0; top:0; width:60%; overflow:hidden; color:var(--amber);}

/* ---------- Article header ---------- */
.post-head{padding:14px 0 6px;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13px; letter-spacing:.3px;
  color:var(--orange-deep); background:rgba(255,255,255,.7); border:1px solid rgba(236,126,39,.22);
  padding:7px 14px; border-radius:999px; box-shadow:0 4px 14px var(--shadow-brown); margin-bottom:18px;}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(52,199,89,.18);}
h1.post-title{font-size:clamp(30px,6vw,46px); font-weight:800; line-height:1.04; letter-spacing:-.01em; margin:0 0 14px; text-wrap:balance;}
.post-meta{display:flex; align-items:center; gap:12px; flex-wrap:wrap; color:var(--brown-soft); font-weight:600; font-size:14px;}
.post-meta .pill{background:rgba(255,255,255,.66); border:1px solid rgba(75,54,33,.08); border-radius:999px; padding:5px 12px;}
.hero-img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; border-radius:26px; margin:22px 0 8px;
  box-shadow:0 24px 60px -20px var(--shadow-brown-2); border:1px solid rgba(255,255,255,.6);}

/* ---------- Article body ---------- */
.article{max-width:var(--maxw); margin:0 auto; padding:14px 22px 10px; font-size:17.5px; color:#3f2e1c;}
.article > *{max-width:var(--maxw); margin-left:auto; margin-right:auto;}
.article h2{font-size:clamp(23px,4.5vw,30px); font-weight:800; line-height:1.12; letter-spacing:-.01em; color:var(--brown); margin:42px 0 14px;}
.article h3{font-size:clamp(19px,3.5vw,22px); font-weight:800; color:var(--brown); margin:30px 0 10px;}
.article p{margin:0 0 18px;}
.article ul,.article ol{margin:0 0 20px; padding-left:22px;}
.article li{margin:0 0 9px;}
.article strong{color:var(--brown); font-weight:800;}
.article a{font-weight:700; text-decoration:underline; text-underline-offset:2px;}
.article .lead{font-size:20px; font-weight:600; color:var(--brown); line-height:1.5; margin-bottom:26px;}

/* TL;DR / answer box — optimized for featured snippets & AI answers */
.answer-box{background:rgba(255,255,255,.72); border:1.5px solid rgba(236,126,39,.22); border-radius:20px;
  padding:20px 22px; margin:8px auto 30px; box-shadow:0 10px 30px var(--shadow-brown);}
.answer-box .ab-label{display:inline-flex; align-items:center; gap:7px; font-weight:800; font-size:12.5px;
  letter-spacing:.4px; text-transform:uppercase; color:var(--orange-deep); margin-bottom:9px;}
.answer-box p{margin:0; font-size:17px; font-weight:600; color:var(--brown);}

/* Callout / tip */
.callout{display:flex; gap:14px; background:linear-gradient(160deg,#FFF6EC,#FFEAD2); border-radius:18px;
  padding:18px 20px; margin:8px auto 26px; border:1px solid rgba(236,126,39,.16); box-shadow:0 8px 22px var(--shadow-brown);}
.callout .ci{font-size:24px; flex:none; line-height:1.2;}
.callout p{margin:0; font-weight:600; font-size:15.5px; color:var(--brown);}

/* Data table (e.g. UV index -> tan time) */
.table-card{overflow-x:auto; border-radius:20px; box-shadow:0 12px 30px var(--shadow-brown);
  border:1px solid rgba(75,54,33,.06); margin:10px auto 30px; background:#fff;}
table{border-collapse:collapse; width:100%; font-size:15.5px;}
thead th{background:linear-gradient(180deg,#FBA94A,var(--orange)); color:#fff; font-weight:800; text-align:left;
  padding:14px 16px; white-space:nowrap;}
tbody td{padding:13px 16px; border-top:1px solid rgba(75,54,33,.08); font-weight:600; color:var(--brown);}
tbody tr:nth-child(even){background:#FFF9F2;}

/* ---------- Inline CTA card ---------- */
.cta-card{background:linear-gradient(165deg,#FBA94A 0%, var(--orange) 55%, #E0731C 100%); color:#fff;
  border-radius:26px; padding:30px 26px; margin:34px auto; text-align:center; max-width:var(--maxw);
  box-shadow:0 24px 60px -20px var(--glow); position:relative; overflow:hidden;}
.cta-card::after{content:""; position:absolute; inset:0;
  background:radial-gradient(70% 60% at 80% -10%, rgba(255,255,255,.35), transparent 60%); pointer-events:none;}
.cta-card h3{color:#fff; font-size:clamp(22px,4.5vw,28px); font-weight:800; margin:0 0 8px; position:relative;}
.cta-card p{color:rgba(255,255,255,.94); font-weight:600; font-size:16px; margin:0 0 20px; position:relative;}
.cta-card .btn-appstore{position:relative; background:#0b0b0d;}
.cta-card .cta-rate{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px;
  font-weight:700; font-size:13px; color:rgba(255,255,255,.95); position:relative;}
.cta-card .cta-rate .stars{color:#fff;}
.cta-card .cta-rate .stars .half{color:rgba(255,255,255,.4);}
.cta-card .cta-rate .stars .half span{color:#fff;}

/* ---------- Related posts ---------- */
.related{padding:10px 0 6px;}
.related h2{font-size:24px; font-weight:800; margin:0 0 16px; text-align:center;}
.card-grid{display:grid; gap:18px; grid-template-columns:1fr;}
@media(min-width:680px){ .card-grid{grid-template-columns:repeat(3,1fr);} }
.pcard{background:#fff; border-radius:22px; overflow:hidden; box-shadow:0 12px 30px var(--shadow-brown);
  border:1px solid rgba(75,54,33,.05); transition:transform .16s ease, box-shadow .16s ease;}
.pcard:hover{transform:translateY(-3px); box-shadow:0 20px 44px -12px var(--shadow-brown-2); text-decoration:none;}
.pcard .pc-img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; background:linear-gradient(160deg,#FFE6C6,#FFD09A);}
.pcard .pc-body{padding:16px 18px 20px;}
.pcard .pc-cat{font-weight:800; font-size:11.5px; letter-spacing:.3px; text-transform:uppercase; color:var(--orange-deep);}
.pcard .pc-title{font-weight:800; font-size:17px; color:var(--brown); line-height:1.22; margin-top:6px;}

/* ---------- Blog index ---------- */
.blog-hero{text-align:center; padding:30px 0 18px;}
.blog-hero h1{font-size:clamp(32px,7vw,52px); font-weight:800; letter-spacing:-.01em; margin:0 0 12px; text-wrap:balance;}
.blog-hero p{font-size:18px; font-weight:600; color:var(--brown-soft); max-width:46ch; margin:0 auto;}
.feature-row{display:grid; gap:18px; grid-template-columns:1fr; margin:26px 0 8px; align-items:start;}
@media(min-width:760px){ .feature-row{grid-template-columns:1.4fr 1fr;} }
.fcard{display:block; border-radius:26px; overflow:hidden; background:#fff;
  box-shadow:0 18px 44px -14px var(--shadow-brown-2); border:1px solid rgba(75,54,33,.05);
  transition:transform .16s ease, box-shadow .16s ease;}
.fcard img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block;}
.fcard .fc-in{padding:18px 22px 20px;}
.fcard .fc-cat{font-weight:800; font-size:12px; letter-spacing:.4px; text-transform:uppercase; color:var(--orange-deep);}
.fcard .fc-title{font-weight:800; font-size:clamp(20px,3vw,26px); line-height:1.12; margin-top:6px; color:var(--brown);}
.fcard:hover{text-decoration:none; transform:translateY(-3px); box-shadow:0 26px 54px -16px var(--shadow-brown-2);}

.section-label{font-weight:800; font-size:13px; letter-spacing:.4px; text-transform:uppercase; color:var(--brown-soft); margin:38px 0 14px;}

/* ---------- Footer ---------- */
.site-foot{text-align:center; padding:48px 0 40px; color:var(--brown-soft); font-weight:600; font-size:13.5px;}
.site-foot .fbrand{display:inline-flex; align-items:center; gap:8px; font-weight:800; color:var(--brown); margin-bottom:10px; font-size:15px;}
.site-foot .fbrand img{width:28px; height:28px; border-radius:7px;}
.site-foot a{color:var(--brown-soft); text-decoration:underline; text-underline-offset:2px;}
.site-foot .fnav{margin:6px 0 12px; display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

/* ---------- Tool: Tan Time Calculator ---------- */
.tool-wrap{max-width:680px; margin:0 auto; padding:0 22px;}
.calc{background:#fff; border-radius:28px; padding:26px 24px; box-shadow:0 22px 54px -18px var(--shadow-brown-2);
  border:1px solid rgba(75,54,33,.05); margin:8px 0 18px;}
.calc .field{margin-bottom:20px;}
.calc .field > label{display:block; font-weight:800; font-size:14.5px; color:var(--brown); margin-bottom:10px;}
.calc .opts{display:flex; flex-wrap:wrap; gap:9px;}
.calc .opt{flex:1 1 auto; min-width:64px; text-align:center; padding:12px 10px; border-radius:14px; cursor:pointer;
  font-weight:800; font-size:14px; color:var(--brown); background:#FBF4EC; border:1.5px solid rgba(75,54,33,.08);
  transition:all .12s ease; user-select:none;}
.calc .opt small{display:block; font-weight:600; font-size:11px; color:var(--brown-soft); margin-top:3px;}
.calc .opt:hover{border-color:rgba(236,126,39,.4);}
.calc .opt.on{background:linear-gradient(180deg,#F79338,var(--orange)); color:#fff; border-color:transparent; box-shadow:0 6px 14px var(--glow);}
.calc .opt.on small{color:rgba(255,255,255,.9);}
.calc .uv-slider{width:100%; accent-color:var(--orange); height:6px;}
.calc .uv-readout{display:flex; align-items:baseline; justify-content:space-between; margin-top:8px;}
.calc .uv-readout .uvn{font-weight:800; font-size:28px; color:var(--orange-deep); line-height:1;}
.calc .uv-readout .uvl{font-weight:700; font-size:13px; color:var(--brown-soft);}
.result{background:linear-gradient(165deg,#FFF6EC,#FFE7CC); border-radius:24px; padding:26px 22px; text-align:center;
  border:1px solid rgba(236,126,39,.18); box-shadow:0 14px 36px var(--shadow-brown);}
.result .r-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:6px;}
.result .r-stat .rn{font-weight:800; font-size:clamp(30px,8vw,42px); color:var(--brown); line-height:1; letter-spacing:-1px;}
.result .r-stat .rl{font-weight:700; font-size:13px; color:var(--brown-soft); margin-top:6px;}
.result .r-stat.burn .rn{color:var(--orange-deep);}
.result .r-note{font-weight:600; font-size:14px; color:var(--brown-soft); margin:14px 0 0;}