/* Fossick web. Colors and type measured from the shipping app (Oct 2026 build).
   Cream ground, ink type in Nunito, one oxblood action per screen, profit green only for money made,
   brass only as fills. Digger does the emotional work; one Digger per section. */
:root{
  --page:#F8F4EB; --panel:#FFFDF7; --hair:#D8D2C2; --ink:#2B2922; --muted:#68665B;
  --ox:#AE4029; --ox-dark:#933522; --blush:#F9E9E3; --profit:#34644B; --brass:#EBC474; --brass-text:#9A7526;
  --font:'Nunito',ui-rounded,'SF Pro Rounded',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:18px; --r-lg:28px; --max:1120px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:var(--ox);text-underline-offset:3px}
h1,h2,h3{font-weight:800;letter-spacing:-.02em;line-height:1.1;margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:3px solid var(--ox);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:max(20px,env(safe-area-inset-left,0px))}
.skip{position:absolute;left:12px;top:-60px;background:var(--ox);color:#fff;padding:10px 16px;border-radius:10px;font-weight:800;z-index:50}
.skip:focus{top:12px}
.kicker{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}

/* Header */
.top{position:sticky;top:0;z-index:20;background:rgba(248,244,235,.88);backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s}
.top.line{border-bottom-color:var(--hair)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:900;font-size:24px;letter-spacing:-.02em}
.logo img{width:34px;height:34px;border-radius:9px}
.top nav{display:flex;align-items:center;gap:26px;font-weight:700;font-size:15px}
.top nav a{color:var(--ink);text-decoration:none;white-space:nowrap}
.top nav a:not(.btn){display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.top nav a:hover{color:var(--ox)}
.top nav a[aria-current="page"]{color:var(--ox)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:14px;font-weight:800;font-size:16px;text-decoration:none;border:0;cursor:pointer;transition:transform .12s ease,background .15s}
.btn:active{transform:scale(.97)}
.btn-ox,.top nav a.btn-ox,.foot a.btn-ox{background:var(--ox);color:#fff}
.top nav a.btn-ox:hover,.foot a.btn-ox:hover{background:var(--ox-dark);color:#fff}
.btn-ox:hover{background:var(--ox-dark)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--hair)}
.btn-ghost:hover{border-color:var(--ink)}
.btn svg{width:20px;height:20px;fill:currentColor}
.btn-sm{min-height:42px;padding:0 16px;font-size:14px;border-radius:12px}

/* Hero: the painted scene from the app, alive. Copy sits on the open cream sky. */
.hero{position:relative;overflow:hidden;min-height:min(50vw,86svh,820px);display:flex;align-items:center}
.hero-art{position:absolute;inset:0;pointer-events:none}
.hero-art picture,.hero-art img,.hero-art video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
.hero-art video{opacity:0;transition:opacity 1s ease}
.hero-art video.on{opacity:1}
.hero-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(248,244,235,.96) 0%,rgba(248,244,235,.9) 30%,rgba(248,244,235,.55) 42%,rgba(248,244,235,0) 56%),linear-gradient(0deg,var(--page) 0%,rgba(248,244,235,0) 16%)}
.hero .wrap{position:relative;z-index:1}
.hero-copy{max-width:560px}
/* Hero (legacy grid kept for reference) */
.hero{padding:clamp(28px,6vw,72px) 0 clamp(40px,6vw,80px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,64px);align-items:center}
.hero h1{font-size:clamp(40px,6.2vw,72px);margin:14px 0 18px}
.hero h1 em{font-style:normal;color:var(--ox)}
.hero .lede{font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:34em}
.hero .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero .note{margin-top:14px;font-size:14px;color:var(--muted);font-weight:700}
.stage{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:520px}
.stage .digger{position:absolute;left:-4%;bottom:-6px;width:min(46%,260px);z-index:2;filter:drop-shadow(0 10px 18px rgba(43,41,34,.18))}

/* Phone frame around real screenshots */
.phone{position:relative;width:min(300px,78vw);aspect-ratio:640/1306;border-radius:44px;padding:10px;background:#1d1b17;box-shadow:0 30px 60px -30px rgba(43,41,34,.55),0 0 0 1px rgba(0,0,0,.4) inset}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:35px;background:var(--page)}
.phone.tilt{transform:rotate(2.5deg)}

/* Sections */
section{padding:clamp(56px,8vw,104px) 0}
section.alt{background:var(--panel);border-block:1px solid var(--hair)}
.head{max-width:760px;margin-bottom:clamp(28px,4vw,48px)}
.head h2{font-size:clamp(30px,4vw,46px);margin-top:10px}
.head p{margin-top:14px;color:var(--muted);font-size:18px}
.center{text-align:center;margin-inline:auto}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;list-style:none;margin:0;padding:0}
.steps li{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);padding:26px}
section.alt .steps li{background:var(--page)}
.steps .n{display:inline-flex;width:40px;height:40px;border-radius:12px;background:var(--blush);color:var(--ox);font-weight:900;align-items:center;justify-content:center;font-size:18px}
.steps h3{font-size:21px;margin:16px 0 8px}
.steps p{color:var(--muted)}

/* Guide art */
.g-art{margin:28px 0 8px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--hair);box-shadow:0 24px 50px -36px rgba(43,41,34,.45)}
.g-art{position:relative}
.g-art img{width:100%;height:auto}
.g-art video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.g-art video.on{opacity:1}
.card.has-art{padding:0;overflow:hidden}
.card.has-art>*:not(.card-media){margin-inline:22px}
.card.has-art .kicker{margin-top:18px}
.card.has-art .go{margin-bottom:22px}
.card-media{position:relative;display:block;border-bottom:1px solid var(--hair);overflow:hidden}
.card-art{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.card-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.card-media video.on{opacity:1}
.steps-v{grid-template-columns:1fr;gap:12px}
.steps-v li{display:flex;gap:16px;align-items:flex-start;padding:20px}
.steps-v h3{margin:4px 0 6px}
.how .stage{min-height:560px}

/* Example verdict ticket */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.ticket{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);padding:26px;box-shadow:0 20px 40px -28px rgba(43,41,34,.35);max-width:440px}
.ticket .label{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.ticket .label span:last-child{background:var(--blush);color:var(--ox);border-radius:999px;padding:4px 10px;letter-spacing:.08em}
.ticket h3{font-size:24px;margin:12px 0 16px}
.ticket .row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--hair);font-weight:700}
.ticket .row b{font-variant-numeric:tabular-nums}
.ticket .row.win b{color:var(--profit);font-size:20px}
.ticket .verdict{margin-top:14px;background:var(--profit);color:#fff;border-radius:12px;text-align:center;padding:12px;font-weight:900;letter-spacing:.04em}
.ticket .src{margin-top:12px;font-size:13px;color:var(--muted)}
.checks{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-weight:600}
.checks li::before{content:"";flex:none;width:22px;height:22px;margin-top:2px;border-radius:7px;background:var(--blush) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AE4029' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/14px no-repeat}

.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border-radius:999px;background:var(--panel);border:1px solid var(--hair);font-weight:700}
section.alt .chip{background:var(--page)}

/* Jackpot strip */
.jackpots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.jp{margin:0;background:var(--page);border:1px solid var(--hair);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:14px}
.jp-num{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.jp-num .paid{font-size:20px;color:var(--muted);text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--ox)}
.jp-num .arrow{color:var(--brass-text);font-size:18px}
.jp-num .sold{font-size:clamp(30px,3vw,38px);color:var(--profit);width:100%}
.jp figcaption{display:flex;flex-direction:column;gap:4px}
.jp strong{font-size:17px;line-height:1.3}
.jp span{color:var(--muted);font-size:14.5px}
.jp a{font-size:13px;color:var(--muted);margin-top:4px}

/* Pricing */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.plan{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;gap:6px}
.plan.best{border:2px solid var(--ox);background:var(--blush)}
.plan .tag{align-self:flex-start;background:var(--ox);color:#fff;border-radius:999px;font-size:12px;font-weight:800;padding:4px 12px;margin-bottom:8px}
.plan h3{font-size:20px}
.plan .price{font-size:42px;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin-top:8px}
.plan .per{color:var(--muted);font-weight:700}
.plan ul{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px}
.plan li{padding-top:8px;border-top:1px solid var(--hair);font-weight:600}
.fine{margin-top:20px;color:var(--muted);font-size:15px;max-width:60ch}

/* Why Fossick */
.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.why-i{background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);padding:24px;border-top:3px solid var(--ox)}
.why-i h3{font-size:20px;margin-bottom:8px}
.why-i p{color:var(--muted);font-size:15.5px}
@media (max-width:900px){.why{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.why{grid-template-columns:1fr}}

/* Guide cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.card{display:flex;flex-direction:column;gap:10px;background:var(--panel);border:1px solid var(--hair);border-radius:var(--r);padding:24px;text-decoration:none;color:var(--ink);transition:transform .15s,border-color .15s}
section.alt .card{background:var(--page)}
.card:hover{transform:translateY(-2px);border-color:var(--ink)}
.card h3,.card .card-h{font-size:20px;margin:0}
.card p{color:var(--muted);font-size:15.5px}
.card .go{margin-top:auto;color:var(--ox);font-weight:800;font-size:15px}

/* FAQ */
.faq{max-width:820px}
.faq details{border-top:1px solid var(--hair);padding:4px 0}
.faq details:last-child{border-bottom:1px solid var(--hair)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 0;font-weight:800;font-size:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:26px;line-height:1;color:var(--ox);font-weight:700;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 20px;color:var(--muted);max-width:64ch}

/* CTA band */
.band{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center;overflow:hidden;position:relative}
.band h2{font-size:clamp(28px,3.6vw,42px)}
.band p{color:#d9d4c7;margin-top:10px}
.band img{width:min(240px,40vw)}

/* Articles (guides + legal) */
.crumbs{font-size:14px;font-weight:700;color:var(--muted);margin:28px 0 0}
.crumbs a{color:var(--muted)}
article{max-width:760px;margin:0 auto;padding:8px 0 72px}
article h1{font-size:clamp(34px,5vw,52px);margin:14px 0 14px}
article .dek{font-size:19px;color:var(--muted)}
article .meta{margin-top:16px;font-size:14px;color:var(--muted);font-weight:700}
article h2{font-size:clamp(24px,3vw,30px);margin:44px 0 12px}
article h3{font-size:20px;margin:28px 0 8px}
article p{margin:14px 0}
article ul,article ol{padding-left:22px}
article li{margin:8px 0}
article .callout{background:var(--panel);border:1px solid var(--hair);border-left:4px solid var(--ox);border-radius:12px;padding:18px 20px;margin:22px 0}
article table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15.5px}
article th,article td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--hair);vertical-align:top}
article th{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
article td b{font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sources{font-size:14px;color:var(--muted)}
.sources li{margin:6px 0;word-break:break-word}
.inline-cta{display:flex;gap:16px;align-items:center;background:var(--blush);border-radius:var(--r);padding:20px;margin:32px 0}
.inline-cta img{width:96px;flex:none}
.inline-cta p{margin:0 0 10px;font-weight:700}

/* Motion control (WCAG 2.2.2) */
.motion{position:fixed;left:max(14px,env(safe-area-inset-left,0px));bottom:max(14px,env(safe-area-inset-bottom,0px));z-index:40;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border-radius:999px;border:1px solid var(--hair);background:rgba(255,253,247,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--ink);font:700 13px var(--font);cursor:pointer;box-shadow:0 6px 20px -10px rgba(43,41,34,.4)}
.motion[hidden]{display:none}
.motion svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}

/* Footer */
.foot{border-top:1px solid var(--hair);padding:44px 0 max(36px,env(safe-area-inset-bottom,0px));margin-top:24px}
.foot .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:28px}
.foot .fh,.foot h4{margin:0 0 10px;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.foot a{color:var(--ink);text-decoration:none;font-weight:700}
.foot a:hover{color:var(--ox)}
.foot .legal{grid-column:1/-1;border-top:1px solid var(--hair);padding-top:20px;font-size:13.5px;color:var(--muted)}

@media (max-width:900px){
  .hero .wrap,.split{grid-template-columns:1fr}
  .hero{display:block;min-height:0;padding-top:24px}
  .hero-art{position:relative;width:100%;aspect-ratio:16/10;margin-top:8px;order:2}
  .hero-art::after{background:linear-gradient(180deg,var(--page) 0%,rgba(248,244,235,0) 22%),linear-gradient(0deg,var(--page) 0%,rgba(248,244,235,0) 18%)}
  .hero{display:flex;flex-direction:column}
  .hero .wrap{order:1}
  .how .stage{min-height:0}
  .stage{min-height:0;padding-top:8px}
  .steps,.plans{grid-template-columns:1fr}
  .jackpots{grid-template-columns:1fr 1fr}
  .band{grid-template-columns:1fr}
  .band img{display:none}
  .foot .wrap{grid-template-columns:1fr 1fr}
  .foot .wrap>div:first-child{grid-column:1/-1}
}
@media (max-width:640px){
  .top nav .hide-sm,.top nav a.hide-sm:not(.btn){display:none}
  .top .logo{font-size:22px}
  .top nav{gap:16px}
  .hero h1{font-size:clamp(38px,11vw,52px)}
  .hero .acts .btn{flex:1 1 100%}
  .stage .digger{left:0;width:42%}
  .inline-cta{flex-direction:column;align-items:flex-start}
  .jackpots{grid-template-columns:1fr}
}
@media (max-width:420px){.top nav a[href="/guides/"]:not(.btn){display:none}.top nav{gap:10px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.cards-3{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cards-3{grid-template-columns:1fr}}