/* Cram Brulee — shared marketing styles (landing + How it works / Pricing / FAQ) */
:root{
  --ink:#1A1410;            /* near-black warm */
  --muted:#7A6E5B;
  --muted-2:#9A8E78;
  --cream:#F7F1E4;          /* page background */
  --cream-soft:#FBF5EA;
  --cream-card:#FCF8F0;
  --card:#FFFFFF;
  --line:#EADFC8;
  --line-2:#F1E8D6;
  --amber:#E0962E;          /* primary accent */
  --amber-d:#C57C16;
  --amber-soft:#FBEED2;
  --amber-border:#EBD4A0;
  --brown:#3B2A19;
  --peach:#F3D9A4;
  --green:#16A35A;          /* semantic only */
  --radius:18px;
  --shadow-sm:0 1px 2px rgba(58,42,25,.05),0 10px 30px -20px rgba(58,42,25,.35);
  --shadow:0 2px 8px rgba(58,42,25,.05),0 36px 70px -40px rgba(58,42,25,.40);
  --shadow-card:0 40px 90px -30px rgba(58,42,25,.28),0 6px 24px rgba(58,42,25,.08);
  --font:'Plus Jakarta Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--cream);color:var(--ink);font-family:var(--font);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
img,svg{display:block;}
h1,h2,h3{font-family:var(--font);letter-spacing:-.02em;color:var(--ink);}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px;}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1.5px solid var(--line);
  border-radius:999px;padding:13px 24px;background:var(--card);color:var(--ink);font-size:15px;font-weight:700;
  min-height:48px;cursor:pointer;transition:transform .08s,box-shadow .16s,background .16s,border-color .16s;}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);}
.btn:active{transform:translateY(0);}
.btn-dark{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:0 8px 22px -10px rgba(26,20,16,.6);}
.btn-dark:hover{background:#000;border-color:#000;}
.btn-amber{background:var(--amber);border-color:var(--amber);color:#3a2a12;box-shadow:0 8px 22px -8px rgba(224,150,46,.6);}
.btn-amber:hover{background:var(--amber-d);border-color:var(--amber-d);color:#fff;}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink);}
.btn-hero{padding:16px 30px;min-height:56px;font-size:16px;}

/* ---- nav ---- */
.nav-wrap{position:sticky;top:0;z-index:200;background:rgba(247,241,228,.85);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.nav{height:78px;display:flex;align-items:center;gap:22px;}
.brand{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:800;letter-spacing:-.02em;}
.mark{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(155deg,#5B4126,#2E1F11);color:#fff;font-weight:800;font-size:20px;
  box-shadow:0 6px 16px -6px rgba(58,42,25,.6),inset 0 1px 0 rgba(255,255,255,.12);font-family:var(--font);}
.nav-links{display:flex;align-items:center;gap:36px;margin-left:auto;color:var(--muted);font-size:15px;font-weight:600;}
.nav-links a:hover{color:var(--ink);}
.nav-links a.active{color:var(--ink);}
.nav .btn{min-height:44px;padding:10px 24px;font-size:14.5px;}

/* ---- section heading ---- */
.sec-head{text-align:center;max-width:720px;margin:0 auto 54px;}
.sec-kicker{font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-d);}
.sec-head h1,.sec-head h2{margin:14px 0 0;font-size:46px;line-height:1.08;font-weight:800;letter-spacing:-.03em;}
.sec-head p{margin:16px 0 0;color:var(--muted);font-size:18px;}

/* ---- page hero band for subpages ---- */
.page-hero{padding:72px 0 20px;}

/* ---- how it works steps ---- */
.steps{padding:20px 0 40px;}
.step-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.step{position:relative;background:var(--cream-card);border:1px solid var(--line);border-radius:22px;padding:32px 28px;box-shadow:var(--shadow-sm);}
.step .num{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;
  font-weight:800;font-size:20px;color:#fff;margin-bottom:20px;background:var(--ink);}
.step:nth-child(2) .num{background:var(--amber);color:#3a2a12;}
.step:nth-child(3) .num{background:linear-gradient(155deg,#5B4126,#2E1F11);}
.step h3{margin:0 0 8px;font-size:22px;font-weight:800;}
.step p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6;}

/* ---- feature rows (how it works detail) ---- */
.feature-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:72px;align-items:center;padding:56px 0;}
.feature-row.flip .feature-copy{order:2;}
.feature-row.flip .feature-visual{order:1;}
.chip{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;padding:7px 14px;border-radius:999px;margin-bottom:16px;
  background:var(--amber-soft);color:var(--amber-d);border:1px solid var(--amber-border);}
.feature-copy h2{margin:0;font-size:34px;line-height:1.1;font-weight:800;letter-spacing:-.03em;}
.feature-copy p{margin:18px 0 0;color:var(--muted);font-size:17px;line-height:1.62;}
.feature-copy ul{margin:20px 0 0;padding:0;list-style:none;}
.feature-copy li{display:flex;align-items:flex-start;gap:10px;margin:11px 0;color:var(--ink);font-size:15.5px;font-weight:600;}
.feature-copy li svg{width:20px;height:20px;flex:0 0 auto;margin-top:1px;}
.scene{border-radius:28px;padding:36px;display:grid;place-items:center;box-shadow:var(--shadow-sm);border:1px solid var(--line);
  background:linear-gradient(160deg,#FBF1DC,#FCF8F0);}
.scene svg{width:100%;height:auto;max-width:420px;}

/* ---- pricing ---- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;max-width:1040px;margin:0 auto;}
.price{display:flex;flex-direction:column;background:var(--cream-card);border:1px solid var(--line);border-radius:24px;padding:34px 30px;box-shadow:var(--shadow-sm);}
.price.featured{background:#fff;border:2px solid var(--amber);box-shadow:0 30px 70px -34px rgba(224,150,46,.5);position:relative;}
.price .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--amber);color:#3a2a12;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:6px 14px;border-radius:999px;}
.price h3{margin:0;font-size:20px;font-weight:800;}
.price .desc{margin:6px 0 0;color:var(--muted);font-size:14.5px;min-height:42px;}
.price .cost{margin:22px 0 4px;font-size:46px;font-weight:800;letter-spacing:-.03em;line-height:1;}
.price .cost span{font-size:16px;font-weight:600;color:var(--muted);letter-spacing:0;}
.price ul{list-style:none;margin:22px 0 28px;padding:0;flex:1;}
.price li{display:flex;align-items:flex-start;gap:10px;margin:12px 0;font-size:15px;font-weight:500;color:var(--ink);}
.price li svg{width:19px;height:19px;flex:0 0 auto;margin-top:2px;}
.price .btn{width:100%;}

/* ---- faq ---- */
.faq-list{max-width:820px;margin:0 auto;}
details{border:1px solid var(--line);border-radius:16px;padding:22px 26px;margin-bottom:14px;background:var(--cream-card);transition:box-shadow .16s;}
details[open]{box-shadow:var(--shadow-sm);}
summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;
  font-size:18px;font-weight:700;}
summary::-webkit-details-marker{display:none;}
summary::after{content:"+";width:32px;height:32px;border-radius:999px;background:var(--amber-soft);color:var(--amber-d);
  display:grid;place-items:center;font-weight:700;flex:0 0 auto;transition:transform .18s;}
details[open] summary::after{content:"\2212";transform:rotate(180deg);}
details p{margin:14px 0 0;color:var(--muted);font-size:16px;}

/* ---- CTA band (subpage footers) ---- */
.cta-wrap{padding:60px 0 100px;}
.cta{position:relative;overflow:hidden;border-radius:34px;padding:64px 56px;text-align:center;
  background:linear-gradient(140deg,#2E1F11 0%,#4A331C 60%,#3B2A19 100%);color:#fff;
  box-shadow:0 40px 90px -40px rgba(58,42,25,.7);}
.cta::before{content:"";position:absolute;top:-120px;right:-80px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(224,150,46,.5),transparent 70%);}
.cta h2{margin:0;color:#fff;font-size:40px;line-height:1.1;font-weight:800;letter-spacing:-.03em;position:relative;}
.cta p{margin:16px auto 0;max-width:520px;color:rgba(255,255,255,.78);font-size:18px;position:relative;}
.cta .btn{margin-top:30px;position:relative;}

/* ---- footer ---- */
.foot{border-top:1px solid var(--line);padding:36px 0;color:var(--muted);font-size:14px;}
.foot .wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.foot .brand{font-size:16px;}
.foot a{font-weight:600;}
.foot a:hover{color:var(--ink);}
.foot .sp{margin-left:auto;}

@media(max-width:860px){
  .nav-links{display:none;}
  .step-grid{grid-template-columns:1fr;}
  .price-grid{grid-template-columns:1fr;max-width:460px;}
  .feature-row,.feature-row.flip{grid-template-columns:1fr;gap:30px;}
  .feature-row.flip .feature-copy,.feature-row.flip .feature-visual{order:initial;}
  .sec-head h1,.sec-head h2{font-size:32px;}
  .cta{padding:48px 28px;}
}
@media(max-width:520px){
  .wrap{padding:0 22px;}
  .sec-head h1,.sec-head h2{font-size:28px;}
  .feature-copy h2{font-size:26px;}
  .cta h2{font-size:28px;}
}