/* FrequentTap — shared styles. Design pass 2026-11-12: ink-plum + warm
   gradient system (amber → coral → violet), cream light bands alternating
   with deep ink bands, big display type, layered depth. Dependency-free:
   system fonts, no external assets, no scripts. */
:root{
  /* deep ink-plum family */
  --bg:#14091f;            /* page base */
  --bg-deep:#0d0516;       /* footer / darkest */
  --card:#201231;          /* card on dark */
  --card2:#2a1840;         /* raised card on dark */
  --ink:#171512;
  /* light family */
  --cream:#fdf6ec;
  --paper:#fff9ef;
  --sand:#e8d9c3;
  --dim:#b3a6c9;           /* muted text on dark */
  --dim-light:#6f5b80;     /* muted text on cream */
  /* warm gradient family */
  --amber:#ffb03a;
  --coral:#ff5e62;
  --coral-deep:#d63a4e;
  --violet:#8b5cf6;
  --violet-soft:#c084fc;
  --gold:#ffd97a;          /* reserved: stand motif highlights */
  --gold-deep:#b7791f;
  --gold-ink:#2a0a20;      /* text on warm gradient */
  --line:#3b2754;          /* hairline on dark */
  --line-light:#ecd9c4;    /* hairline on cream */
  --ink-text:#2a1838;      /* body text on cream */
  --ink-strong:#190a28;    /* headings on cream */
  --ok:#57c96f;
  --grad:linear-gradient(120deg, var(--amber), var(--coral) 58%, var(--violet));
  --grad-warm:linear-gradient(120deg, var(--amber), var(--coral));
  --radius:16px;
  --shadow-card:0 14px 34px rgba(6,2,14,.42);
  --shadow-lift:0 22px 44px rgba(6,2,14,.5);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:clip;}
body{
  background:var(--bg); color:var(--cream);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height:1.55; font-size:17px;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
::selection{background:var(--coral); color:#fff;}
a{color:var(--gold);}
a:focus-visible, .btn:focus-visible, summary:focus-visible{
  outline:3px solid var(--coral); outline-offset:2px; border-radius:6px;
}
img{max-width:100%;}
.wrap{max-width:1080px; margin:0 auto; padding:0 18px;}

/* gradient text helper */
.grad, .wordmark em, .kicker{
  background:linear-gradient(92deg, var(--amber), var(--coral) 55%, var(--violet-soft));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(16,7,27,.9); backdrop-filter:blur(10px);
}
.site-header::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--grad-warm); opacity:.85;
}
.site-header .wrap{display:flex; align-items:center; gap:18px; padding-top:12px; padding-bottom:12px;}
.wordmark{font-size:21px; font-weight:900; letter-spacing:-.01em; color:var(--cream); text-decoration:none; white-space:nowrap;}
.wordmark em{font-style:normal;}
.wordmark small{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim); -webkit-text-fill-color:var(--dim);
}
.main-nav{display:none; gap:20px; margin-left:auto;}
.main-nav a{color:var(--paper); text-decoration:none; font-size:15px; font-weight:600;}
.main-nav a:hover{color:var(--amber);}
.header-cta{margin-left:auto;}
@media (min-width:760px){ .main-nav{display:flex;} .header-cta{margin-left:0;} }

/* ---------- buttons ---------- */
.btn{
  display:inline-block; text-align:center;
  background:var(--grad-warm); color:var(--gold-ink);
  font-weight:800; text-decoration:none; border-radius:14px; border:1px solid rgba(255,176,58,.55);
  padding:16px 26px; font-size:17px; line-height:1.2;
  box-shadow:0 10px 26px rgba(255,94,98,.32), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn:hover{
  transform:translateY(-2px); filter:brightness(1.06);
  box-shadow:0 16px 34px rgba(255,94,98,.42), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn:active{transform:translateY(0);}
.btn.ghost{
  background:rgba(253,246,236,.05); color:var(--cream); border:1px solid rgba(253,246,236,.38);
  font-weight:700; box-shadow:none;
}
.btn.ghost:hover{border-color:var(--gold); color:var(--gold); filter:none;}
.btn.small{padding:10px 18px; font-size:15px; border-radius:11px;}
.btnrow{display:flex; flex-direction:column; gap:10px; margin:18px 0 6px;}
@media (min-width:560px){ .btnrow{flex-direction:row;} .btnrow .btn{flex:0 1 auto;} }

/* ---------- type ---------- */
.kicker{font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;}
h1{font-size:43px; line-height:1.04; font-weight:900; letter-spacing:-.03em; margin:14px 0 16px;}
h2{font-size:30px; line-height:1.14; font-weight:900; letter-spacing:-.022em; margin-bottom:10px;}
h3{font-size:18px; font-weight:800; margin-bottom:6px; color:var(--paper);}
p{margin:8px 0;}
.lede{font-size:19px; color:var(--paper); line-height:1.5;}
.dim{color:var(--dim); font-size:15px;}
section{padding:44px 0 8px; position:relative;}
.section-head{max-width:680px; margin-bottom:22px;}
ul.tight{margin:8px 0 8px 20px;}
ul.tight li{margin:5px 0;}
@media (min-width:880px){
  h1{font-size:66px;}
  h2{font-size:38px;}
}

/* ---------- full-bleed section bands (alternating rhythm) ---------- */
#how, #counters, #faq{
  z-index:0; padding:60px 0 54px; color:var(--ink-text);
}
#how::before, #counters::before, #faq::before{
  content:""; position:absolute; top:0; bottom:0; left:50%; width:100vw;
  transform:translateX(-50%); z-index:-1;
  background:
    radial-gradient(rgba(139,92,246,.07) 1.2px, transparent 1.6px) 0 0/22px 22px,
    linear-gradient(180deg, var(--cream), #fbeed9);
}
#how h2, #counters h2, #faq h2{color:var(--ink-strong);}
#how h3, #counters h3{color:#241331;}
#how .kicker, #counters .kicker, #faq .kicker{
  background:none; -webkit-text-fill-color:var(--coral-deep); color:var(--coral-deep);
}
#how .dim, #counters .dim, #faq .dim{color:var(--dim-light);}
#included{padding-top:56px;}
#pricing{padding-top:56px;}

/* ---------- hero ---------- */
.hero{padding:52px 0 62px; position:relative; z-index:0;}
.hero::before{
  content:""; position:absolute; top:0; bottom:0; left:50%; width:100vw;
  transform:translateX(-50%); z-index:-2;
  background:
    radial-gradient(560px 380px at 88% -6%, rgba(255,176,58,.34), transparent 62%),
    radial-gradient(520px 420px at 4% 16%, rgba(139,92,246,.32), transparent 62%),
    radial-gradient(640px 460px at 55% 112%, rgba(255,94,98,.26), transparent 64%),
    radial-gradient(rgba(253,246,236,.055) 1.2px, transparent 1.6px) 0 0/22px 22px,
    linear-gradient(168deg, #22103a 0%, #14091f 58%, #180b28 100%);
}
.hero::after{
  content:""; position:absolute; top:0; bottom:0; left:50%; width:100vw;
  transform:translateX(-50%); z-index:-1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.hero-grid{display:grid; gap:38px; align-items:center;}
@media (min-width:880px){ .hero-grid{grid-template-columns:1.05fr .95fr;} }
.hero .flow{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:22px 0 4px;}
.chip{
  background:rgba(253,246,236,.07); border:1px solid rgba(253,246,236,.22); border-radius:999px;
  padding:6px 13px; font-size:14.5px; font-weight:600; color:var(--paper); white-space:nowrap;
  backdrop-filter:blur(4px);
}
.arr{
  font-weight:900;
  background:var(--grad-warm); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* The counter-stand motif — now with dimension */
.stand{
  position:relative;
  background:linear-gradient(165deg,#3a1c5c,#1d0e33 55%,#150826);
  border:1px solid rgba(255,217,122,.4); border-radius:24px;
  padding:30px 22px 24px; text-align:center;
  transform:perspective(1100px) rotateX(4deg);
  box-shadow:
    0 34px 60px rgba(3,0,10,.6),
    0 6px 18px rgba(255,94,98,.16),
    inset 0 1px 0 rgba(253,246,236,.22),
    inset 0 -14px 30px rgba(0,0,0,.35);
  max-width:400px; margin:0 auto 26px;
}
.stand::before{ /* warm glow halo behind the stand */
  content:""; position:absolute; inset:-34px -22px; z-index:-1; border-radius:40px;
  background:radial-gradient(closest-side, rgba(255,176,58,.4), rgba(255,94,98,.2) 55%, transparent 75%);
  filter:blur(24px);
}
.stand::after{ /* counter base / plinth */
  content:""; position:absolute; left:7%; right:7%; bottom:-17px; height:20px;
  background:linear-gradient(180deg,#4a2a72,#24103f);
  clip-path:polygon(3% 0, 97% 0, 100% 100%, 0 100%);
  border-radius:0 0 10px 10px;
  box-shadow:0 20px 26px rgba(0,0,0,.55);
}
.stand .brandline{font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#d9c8f5;}
.stand .tap-target{
  position:relative;
  width:132px; height:132px; margin:22px auto 6px; border-radius:50%;
  border:3px solid var(--gold);
  background:radial-gradient(circle at 50% 42%, rgba(255,217,122,.34), rgba(255,217,122,.06) 62%, transparent 76%);
  display:flex; align-items:center; justify-content:center;
  font-size:46px; color:var(--gold);
  box-shadow:0 0 0 6px rgba(255,217,122,.08), 0 12px 30px rgba(0,0,0,.4), inset 0 0 24px rgba(255,217,122,.18);
  animation:target-pulse 2.8s ease-in-out infinite;
}
.stand .tap-target::before, .stand .tap-target::after{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  border:2px solid rgba(255,217,122,.75);
  animation:ripple 2.8s ease-out infinite;
}
.stand .tap-target::after{animation-delay:1.4s;}
@keyframes ripple{
  0%{transform:scale(1); opacity:.75;}
  70%{opacity:.12;}
  100%{transform:scale(1.62); opacity:0;}
}
@keyframes target-pulse{
  0%, 100%{transform:scale(1);}
  50%{transform:scale(1.035);}
}
.stand .place{
  font-size:32px; font-weight:900; letter-spacing:.01em; line-height:1.12; margin-top:14px; color:#fff;
  text-shadow:0 2px 18px rgba(255,176,58,.35);
}
.stand .offer{color:var(--sand); font-size:16px; margin-top:8px;}
.stand .thanks{
  font-family:Georgia, "Times New Roman", serif; font-style:italic;
  color:var(--gold); font-size:21px; margin-top:16px;
}
.stand .demo-tag{
  display:inline-block; margin-top:16px; font-size:11px; font-weight:800; letter-spacing:.14em;
  color:var(--gold-ink); background:var(--grad-warm); border-radius:999px; padding:3px 11px;
}

/* ---------- cards & grids ---------- */
.grid{display:grid; gap:14px;}
@media (min-width:680px){ .grid.cols2{grid-template-columns:1fr 1fr;} .grid.cols3{grid-template-columns:repeat(3,1fr);} .grid.cols4{grid-template-columns:repeat(2,1fr);} }
@media (min-width:980px){ .grid.cols4{grid-template-columns:repeat(4,1fr);} }
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow-card);
  transition:transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-lift);}
.card p{color:var(--cream); font-size:16px;}
/* cards on cream bands */
#how .card, #counters .card{
  background:#fff; border:1px solid var(--line-light);
  box-shadow:0 12px 28px rgba(64,32,96,.12);
}
#how .card:hover, #counters .card:hover{box-shadow:0 20px 38px rgba(64,32,96,.18);}
#how .card p, #counters .card p{color:#453257;}
.stepnum{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  background:var(--grad-warm); color:var(--gold-ink); font-weight:900; font-size:25px; margin-bottom:14px;
  box-shadow:0 10px 22px rgba(255,94,98,.35), inset 0 1px 0 rgba(255,255,255,.5);
  transform:rotate(-4deg);
}
.niche{position:relative; overflow:hidden; padding-top:26px;}
.niche::before{content:""; position:absolute; top:0; left:0; right:0; height:6px;}
.niche .tagline{font-weight:700; font-size:15px; margin-bottom:4px;}
#counters .niche:nth-child(1){background:linear-gradient(180deg,#fff6e6,#fff 58%);}
#counters .niche:nth-child(1)::before{background:linear-gradient(90deg, var(--amber), var(--coral));}
#counters .niche:nth-child(1) .tagline{color:#b06f00;}
#counters .niche:nth-child(2){background:linear-gradient(180deg,#fff0f1,#fff 58%);}
#counters .niche:nth-child(2)::before{background:linear-gradient(90deg, var(--coral), #f43f8e);}
#counters .niche:nth-child(2) .tagline{color:var(--coral-deep);}
#counters .niche:nth-child(3){background:linear-gradient(180deg,#f3efff,#fff 58%);}
#counters .niche:nth-child(3)::before{background:linear-gradient(90deg, var(--violet), var(--violet-soft));}
#counters .niche:nth-child(3) .tagline{color:#6d3fd4;}
.feature-ic{
  width:54px; height:54px; border-radius:16px; margin-bottom:12px;
  display:flex; align-items:center; justify-content:center; font-size:26px;
  background:rgba(255,176,58,.15); box-shadow:inset 0 0 0 1px rgba(255,176,58,.35);
}
#included .card:nth-child(3n+2) .feature-ic{background:rgba(255,94,98,.15); box-shadow:inset 0 0 0 1px rgba(255,94,98,.38);}
#included .card:nth-child(3n) .feature-ic{background:rgba(139,92,246,.18); box-shadow:inset 0 0 0 1px rgba(139,92,246,.42);}

/* ---------- pass mock ---------- */
.pass{
  background:linear-gradient(135deg,#3b1d63,#1d0e33 58%,#2a1140); color:#f7efdc; border-radius:20px; padding:20px;
  border:1px solid rgba(192,132,252,.35);
  box-shadow:0 24px 44px rgba(3,0,10,.55), inset 0 1px 0 rgba(253,246,236,.16);
  max-width:400px; margin:6px auto;
  animation:floaty 6s ease-in-out infinite;
}
@keyframes floaty{
  0%, 100%{transform:translateY(0) rotate(-.6deg);}
  50%{transform:translateY(-8px) rotate(-.6deg);}
}
.pass-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.pass-name{font-weight:800; font-size:18px;}
.pass-tag{font-size:11px; letter-spacing:.12em; color:#d8c493; text-transform:uppercase;}
.pass .demo-tag{
  font-size:10.5px; font-weight:800; letter-spacing:.14em; color:var(--gold-ink);
  background:var(--gold); border-radius:999px; padding:2px 9px; white-space:nowrap;
}
.stamps{display:flex; gap:10px; margin:20px 0 8px;}
.stamp{
  width:42px; height:42px; border-radius:50%; border:2px dashed #a9905f;
  display:flex; align-items:center; justify-content:center; font-size:17px; color:#c9ae74;
}
.stamp.filled{background:var(--gold-deep); border:2px solid var(--gold-deep); color:#fff; box-shadow:0 4px 12px rgba(183,121,31,.45);}
.pass-meta{display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--sand); margin-top:10px;}

/* ---------- pricing ---------- */
.price-card{
  position:relative; border-radius:20px; padding:28px 24px;
  border:2px solid transparent;
  background:
    linear-gradient(#241239, #1c0d2e) padding-box,
    var(--grad) border-box;
  box-shadow:0 26px 54px rgba(3,0,10,.55), 0 10px 38px rgba(255,94,98,.18);
}
.price-big{font-size:48px; font-weight:900; line-height:1; letter-spacing:-.02em; margin:8px 0 2px; color:#fff;}
.price-big span{font-size:18px; font-weight:700; color:var(--dim);}
table.prices{width:100%; border-collapse:collapse; margin:10px 0; font-size:16px;}
table.prices td{padding:10px 4px; border-bottom:1px solid var(--line); vertical-align:top;}
table.prices td:last-child{text-align:right; font-weight:800; color:var(--paper); white-space:nowrap;}
table.prices tr:last-child td{border-bottom:0;}
.money-note{
  background:linear-gradient(120deg, rgba(255,176,58,.13), rgba(255,94,98,.1));
  border:1px solid var(--line); border-left:4px solid var(--coral); border-radius:12px;
  padding:14px 16px; margin:14px 0; font-size:16px;
}
.money-note strong{color:var(--gold);}
.checklist{list-style:none; margin:10px 0;}
.checklist li{margin:7px 0; padding-left:26px; position:relative;}
.checklist li::before{content:"✓"; position:absolute; left:2px; color:var(--ok); font-weight:900;}

/* ---------- faq (on cream band) ---------- */
details.faq{
  background:#fff; border:1px solid var(--line-light); border-radius:14px;
  padding:4px 18px; margin:10px 0;
  box-shadow:0 10px 24px rgba(64,32,96,.1);
}
details.faq summary{
  cursor:pointer; font-weight:800; font-size:17px; color:var(--ink-strong);
  padding:13px 0; list-style:none;
}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:"+"; float:right; color:var(--coral-deep); font-weight:900;}
details.faq[open ] summary::after{content:"–";}
details.faq p{font-size:16px; padding-bottom:12px; color:#453257;}

/* ---------- cta band & footer ---------- */
.cta-band{
  position:relative; border-radius:22px; padding:34px 24px; text-align:center; margin:40px 0 8px;
  border:2px solid transparent;
  background:
    radial-gradient(420px 200px at 12% 0%, rgba(255,176,58,.22), transparent 65%),
    radial-gradient(420px 220px at 88% 100%, rgba(139,92,246,.28), transparent 65%),
    linear-gradient(#241239, #1a0b2c) padding-box,
    var(--grad) border-box;
  box-shadow:0 28px 56px rgba(3,0,10,.55), 0 10px 40px rgba(255,94,98,.16);
}
footer.site-footer{
  background:var(--bg-deep);
  border-top:2px solid transparent;
  border-image:linear-gradient(90deg, var(--amber), var(--coral), var(--violet)) 1;
  margin-top:52px; padding:30px 0 44px;
  color:var(--dim); font-size:14.5px;
}
footer.site-footer .cols{display:flex; flex-direction:column; gap:16px;}
@media (min-width:680px){ footer.site-footer .cols{flex-direction:row; justify-content:space-between;} }
footer.site-footer a{color:var(--sand); text-decoration:none;}
footer.site-footer a:hover{color:var(--gold);}
footer.site-footer nav{display:flex; gap:18px; flex-wrap:wrap;}
footer.site-footer .fineprint{margin-top:18px; font-size:13px; color:#8d7fa8;}

/* ---------- legal pages ---------- */
.legal-wrap{max-width:760px; margin:0 auto; padding:0 18px 20px; position:relative; z-index:0; line-height:1.68;}
.legal-wrap::before{ /* branded header band */
  content:""; position:absolute; top:0; left:50%; width:100vw; height:252px;
  transform:translateX(-50%); z-index:-1;
  background:
    radial-gradient(480px 220px at 85% 0%, rgba(255,176,58,.3), transparent 62%),
    radial-gradient(420px 220px at 8% 10%, rgba(139,92,246,.34), transparent 62%),
    radial-gradient(rgba(253,246,236,.05) 1.2px, transparent 1.6px) 0 0/22px 22px,
    linear-gradient(165deg, #2b1547, #14091f 78%);
  border-bottom:2px solid rgba(255,176,58,.45);
}
.legal-wrap h1{font-size:36px; letter-spacing:-.025em;}
.legal-wrap h2{
  font-size:22px; margin:32px 0 8px; position:relative; padding-left:15px;
}
.legal-wrap h2::before{
  content:""; position:absolute; left:0; top:4px; bottom:4px; width:4px; border-radius:4px;
  background:var(--grad-warm);
}
.legal-wrap h3{font-size:17px; margin:20px 0 6px;}
.legal-wrap p, .legal-wrap li{font-size:16px;}
.legal-wrap ul, .legal-wrap ol{margin:8px 0 8px 22px;}
.legal-wrap li{margin:5px 0;}
.legal-wrap table{width:100%; border-collapse:collapse; margin:12px 0; font-size:16px;}
.legal-wrap th, .legal-wrap td{border:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:top;}
.legal-wrap th{background:var(--card2); color:var(--paper);}
.callout{
  border-left:4px solid var(--coral); background:var(--card2);
  padding:12px 14px; margin:14px 0; border-radius:0 10px 10px 0; font-size:15.5px;
  box-shadow:var(--shadow-card);
}
.backlink{font-size:15px; font-weight:700; text-decoration:none;}
.meta-line{color:#cdbfe0; font-size:14.5px; margin-top:4px;}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .stand .tap-target, .stand .tap-target::before, .stand .tap-target::after, .pass{animation:none;}
  .btn, .card{transition:none;}
}

/* ---------- Blog index (SEO infra, 2026-11-12) ---------- */
#guides h1{
  font-size:clamp(32px, 6vw, 44px); letter-spacing:-.03em; line-height:1.08;
  color:var(--cream); margin:6px 0 10px;
}
.blog-soon{max-width:680px;}
.blog-soon h2{font-size:22px; margin-bottom:8px;}