/* Pickr site styles. Light concrete page, signage display type, amber beam. */
:root{
  --bg:#F4F3EF; --ink:#16150F; --amber:#FFB400; --amber-deep:#C98700; --muted:#6F6C62; --line:#D8D5CB; --card:#FFFFFF;
  --dark:#15130F; --dark-2:#1D1A15; --dark-3:#262219; --dark-line:#2E2A23; --dark-fg:#F3EEE4; --dark-muted:#9A9184;
  --display:'Barlow Condensed',Impact,'Arial Narrow',sans-serif; --body:'Familjen Grotesk','Helvetica Neue',Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg{max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
a{color:inherit}
h1,h2,h3{margin:0;line-height:.95;text-wrap:balance}
h1,h2{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.005em}
h3{font-weight:600;letter-spacing:-.015em;line-height:1.15}
p{margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--display);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.03em;padding:13px 22px;border:2px solid var(--ink);background:var(--ink);color:#fff;text-decoration:none;border-radius:6px;transition:transform .12s,background .15s;cursor:pointer;line-height:1.2;text-align:center}
.btn:hover{transform:translateY(-1px)}
.btn.amber{background:var(--amber);color:var(--ink);border-color:var(--amber)}
.btn.amber:hover{background:#FFC21A}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.light{background:var(--dark-fg);color:var(--ink);border-color:var(--dark-fg)}
.btn:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible{outline:3px solid var(--amber);outline-offset:3px}

/* Nav */
nav{position:sticky;top:0;background:var(--bg);z-index:5}
.nav{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:28px;text-decoration:none;letter-spacing:.02em}
.brand img{width:34px;height:34px;display:block}
.nav .links{display:flex;gap:24px;margin-left:auto;font-weight:500;font-size:15px;color:var(--muted)}
.nav .links a{text-decoration:none}
.nav .links a:hover{color:var(--ink)}
.nav .cta{display:flex;gap:10px;align-items:center}
.nav .cta .btn{font-size:17px;padding:8px 16px}
.hazard{height:8px;background:repeating-linear-gradient(135deg,var(--amber) 0 18px,var(--ink) 18px 36px)}
/* Language switcher: a details element, no script needed */
.lang{position:relative}
.lang summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;font-weight:600;font-size:14px;letter-spacing:.06em;padding:8px 10px;border:1px solid var(--line);border-radius:6px;color:var(--muted);text-transform:uppercase;user-select:none;line-height:1}
.lang summary::-webkit-details-marker{display:none}
.lang summary svg{width:16px;height:16px;flex:0 0 auto}
.lang summary:hover{color:var(--ink);border-color:var(--ink)}
.lang ul{position:absolute;right:0;top:calc(100% + 8px);margin:0;padding:6px;list-style:none;background:var(--card);border:2px solid var(--ink);border-radius:8px;min-width:170px;box-shadow:6px 6px 0 var(--amber);z-index:20}
.lang li a{display:block;padding:7px 10px;text-decoration:none;border-radius:4px;font-size:15px}
.lang li a:hover{background:var(--bg)}
.lang li a[aria-current]{font-weight:700;color:var(--amber-deep)}

/* Hero */
.hero{display:grid;grid-template-columns:1.1fr 400px;gap:56px;align-items:center;padding-block:72px 64px}
.hero .kicker{font-weight:600;color:var(--amber-deep);margin-bottom:18px}
.hero h1{font-size:clamp(64px,9vw,136px)}
.hero h1 span{display:block}
.hero .sub{font-size:20px;max-width:36ch;margin-top:26px;color:#2E2C25}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero .fine{margin-top:14px;font-size:15px;color:var(--muted)}
.hero .stores{display:flex;flex-wrap:wrap;gap:18px;margin-top:34px;font-size:14px;color:var(--muted);font-weight:500}
.hero .stores a{display:flex;align-items:center;gap:8px;text-decoration:none}
.hero .stores a:hover{color:var(--ink)}
.hero .stores i{width:8px;height:8px;border-radius:2px;background:var(--amber);display:inline-block}
.badges{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.badges a{display:inline-block;line-height:0;border-radius:6px}
.badges img{height:40px;width:auto}

/* Phone */
.phone{width:100%;max-width:400px;margin:0 auto;background:#0C0B08;border:2px solid var(--ink);border-radius:38px;padding:12px;box-shadow:0 40px 70px -30px rgba(22,21,15,.55)}
.screen{background:var(--dark-2);border-radius:28px;overflow:hidden;min-height:560px;display:flex;flex-direction:column;color:var(--dark-fg)}
.screen .band{background:var(--amber);color:var(--ink);padding:12px 18px 8px;display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-family:var(--display);font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:.04em}
.screen .band b{font-size:26px;font-weight:800}
.view{position:relative;margin:14px 14px 0;aspect-ratio:1/0.74;border-radius:16px;background:radial-gradient(120% 90% at 50% 40%,#2B2720 0,#14120E 70%);overflow:hidden;border:1px solid var(--dark-line)}
.view .corner{position:absolute;width:26px;height:26px;border:3px solid var(--amber);border-radius:4px}
.view .tl{top:14px;left:14px;border-right:0;border-bottom:0}.view .tr{top:14px;right:14px;border-left:0;border-bottom:0}
.view .bl{bottom:14px;left:14px;border-right:0;border-top:0}.view .br{bottom:14px;right:14px;border-left:0;border-top:0}
.view .code{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:2px;height:60px;opacity:.7}
.view .code i{display:block;background:#E8E2D4;width:3px}
.view .code i:nth-child(3n){width:5px}.view .code i:nth-child(4n){width:2px}.view .code i:nth-child(5n){width:6px}
.beam{position:absolute;left:10px;right:10px;height:2px;background:var(--amber);box-shadow:0 0 18px 3px rgba(255,180,0,.55);top:12%;animation:sweep 2.4s ease-in-out infinite}
@keyframes sweep{0%{top:12%}50%{top:88%}100%{top:12%}}
.match{margin:14px 14px 0;background:var(--dark-3);border:1px solid var(--dark-line);border-radius:14px;padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:center}
.match .sku{font-weight:600}
.match .name{color:var(--dark-muted);font-size:14px}
.match .loc{grid-column:1;font-family:var(--display);font-size:22px;font-weight:700;color:var(--amber);letter-spacing:.02em;margin-top:4px}
.match .qty{grid-row:1/4;font-family:var(--display);font-size:44px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.match .qty small{font-family:var(--body);font-size:14px;color:var(--dark-muted);font-weight:400}
.queue{margin:12px 14px 0;display:grid;gap:8px;font-size:14px;color:var(--dark-muted)}
.queue div{display:flex;justify-content:space-between;padding:10px 12px;border-radius:10px;border:1px solid var(--dark-line)}
.queue b{color:var(--dark-fg);font-weight:500}
.screen .bottom{margin-top:auto;padding:14px 14px 16px}
.screen .bottom .btn{width:100%;border-radius:12px;padding:13px;cursor:default}
.screen .bottom .btn:hover{transform:none}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.stats div{padding:22px 0;border-right:1px solid var(--line)}
.stats div:last-child{border-right:0}
.stats div + div{padding-left:28px}
.stats b{display:block;font-family:var(--display);font-size:50px;font-weight:800;line-height:1}
.stats span{color:var(--muted);font-weight:500;font-size:15px}

section{padding-block:88px}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;margin-bottom:48px}
.sec-head h2{font-size:clamp(44px,6vw,80px)}
.sec-head p{font-size:19px;max-width:44ch;color:#3A3830}

/* Feature band */
.band-dark{background:var(--dark);color:var(--dark-fg)}
.band-dark .sec-head p{color:var(--dark-muted)}
.spec{display:grid;grid-template-columns:1fr 1fr;gap:0 64px}
.spec dl{margin:0}
.spec .row{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--dark-line)}
.spec dt{font-family:var(--display);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.04em;color:var(--amber);padding-top:2px}
.spec dd{margin:0}
.spec dd b{display:block;font-weight:600;font-size:20px;letter-spacing:-.015em;margin-bottom:6px}
.spec dd p{color:var(--dark-muted);font-size:16px}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0 28px;counter-reset:s}
.steps div{padding:26px 0 0;border-top:3px solid var(--ink)}
.steps div::before{counter-increment:s;content:"0" counter(s);font-family:var(--display);font-weight:800;font-size:64px;line-height:1;color:var(--amber);-webkit-text-stroke:1.5px var(--ink);display:block;margin-bottom:14px}
.steps h3{font-size:22px;margin-bottom:8px}
.steps p{font-size:16px;color:#3A3830}

/* Pricing */
.pricing{display:grid;grid-template-columns:1fr 1.15fr;gap:32px;align-items:stretch}
.plan{border:2px solid var(--ink);border-radius:10px;padding:40px;background:var(--card);display:flex;flex-direction:column}
.plan.hot{background:var(--ink);color:#fff;box-shadow:10px 10px 0 var(--amber)}
.plan .name{font-family:var(--display);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.plan.hot .name{color:var(--amber)}
.plan .amount{font-family:var(--display);font-weight:800;font-size:clamp(72px,9vw,120px);line-height:.9;margin:14px 0 8px}
.plan.hot .amount{color:var(--amber)}
.plan .amount small{font-family:var(--body);font-size:17px;font-weight:500;color:var(--muted);letter-spacing:0;margin-left:.15em}
.plan.hot .amount small{color:#B9B6A9}
.plan .per{font-size:15px;color:var(--muted)}
.plan.hot .per{color:#B9B6A9}
.plan ul{list-style:none;padding:0;margin:26px 0 30px;display:grid;gap:11px;font-size:16px}
.plan li{display:flex;gap:12px;align-items:flex-start}
.plan li::before{content:"";flex:0 0 10px;height:10px;margin-top:8px;background:var(--amber);border-radius:2px}
.plan .btn{margin-top:auto}

/* FAQ */
.faq-section{display:grid;grid-template-columns:1fr 1.4fr;gap:40px 64px;align-items:start}
.faq-head{position:sticky;top:96px}
.faq-head h2{font-size:clamp(44px,6vw,80px)}
.faq{max-width:none}
.faq details{border-top:1px solid var(--line);padding:18px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;font-size:18px;list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--amber-deep);font-size:24px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{color:#3A3830;margin-top:10px;font-size:16px}

/* CTA band */
.cta-band{background:var(--amber);color:var(--ink);padding:64px 56px;border-radius:10px;border:2px solid var(--ink);display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
.cta-band h2{font-size:clamp(48px,7vw,96px)}
.cta-band p{margin-top:10px;font-size:18px;color:#4A3C0E}

/* Footer */
footer{border-top:2px solid var(--ink);padding-block:36px;display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;font-size:15px;color:var(--muted)}
footer .brand{font-size:22px;color:var(--ink)}
footer .brand img{width:26px;height:26px}
footer .links{display:flex;flex-wrap:wrap;gap:22px;margin-left:auto}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}

/* Secondary pages: a readable text column */
.page{max-width:74ch;padding-block:56px 96px}
.page .eyebrow{font-weight:600;color:var(--amber-deep);margin-bottom:14px}
.page h1{font-size:clamp(52px,8vw,96px);margin-bottom:12px}
.page .lede{font-size:20px;color:#3A3830;max-width:60ch}
.page h2{font-size:clamp(32px,4.5vw,44px);margin-top:56px;margin-bottom:14px;padding-top:22px;border-top:2px solid var(--ink)}
.page h3{font-size:21px;margin-top:30px;margin-bottom:8px}
.page p{margin:12px 0}
.page ul,.page ol{margin:12px 0;padding-left:24px}
.page li{margin:6px 0}
.page li::marker{color:var(--amber-deep);font-weight:700}
.page a{color:var(--ink);text-decoration-color:var(--amber);text-decoration-thickness:2px;text-underline-offset:3px}
.page a:hover{text-decoration-color:var(--ink)}
.page code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;background:#fff;border:1px solid var(--line);border-radius:4px;padding:1px 6px}
.page .table{overflow-x:auto}
.page table{width:100%;border-collapse:collapse;margin:16px 0;font-size:15px}
.page th,.page td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
.page th{font-family:var(--display);font-weight:700;font-size:17px;text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid var(--ink)}
.page .callout{border:2px solid var(--ink);border-left:10px solid var(--amber);border-radius:8px;padding:14px 18px;margin:20px 0;background:var(--card)}
.page .toc{columns:2;column-gap:40px;margin:28px 0 8px;padding:0;list-style:none;font-size:15px}
.page .toc li{break-inside:avoid;margin:4px 0}
.page .toc b{display:block;font-family:var(--display);font-weight:700;font-size:18px;text-transform:uppercase;letter-spacing:.04em;color:var(--amber-deep);margin:14px 0 4px}
.page .toc li:first-child b{margin-top:0}
.page .toc a{text-decoration:none}
.page .toc a:hover{text-decoration:underline}
.page .meta{color:var(--muted);font-size:15px}
.page .release{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
.page .release .date{font-family:var(--body);font-size:15px;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:500}
.page form{display:grid;gap:14px;margin:20px 0;max-width:560px}
.page label{display:block;font-family:var(--display);font-weight:700;font-size:17px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.page input,.page textarea,.page select{width:100%;font:inherit;font-size:16px;padding:10px 12px;border:2px solid var(--ink);border-radius:6px;background:var(--card);color:var(--ink)}
.page textarea{min-height:120px;resize:vertical}
.page form .btn{justify-self:start}
.page .status{font-weight:600;margin-top:8px}
.page .status[hidden]{display:none}
.page .success{border:2px solid var(--ink);border-left:10px solid var(--amber);border-radius:8px;padding:14px 18px;background:var(--card);font-weight:600}

/* 404 */
.oops{min-height:60vh;display:grid;place-items:center;text-align:center;padding-block:72px}
.oops h1{font-size:clamp(120px,28vw,260px);line-height:.85}
.oops h1 span{color:var(--amber);-webkit-text-stroke:2px var(--ink)}
.oops p{max-width:44ch;margin:18px auto 28px;color:#3A3830;font-size:18px}
.oops .actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

@media (max-width:960px){
  .hero,.sec-head,.spec,.pricing,.faq-section{grid-template-columns:1fr}
  .faq-head{position:static}
  .hero{gap:44px}
  .stats,.steps{grid-template-columns:1fr 1fr}
  .stats div:nth-child(2){border-right:0}
  .stats div:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .stats div:nth-child(3){padding-left:0}
  .nav .links{display:none}
  .nav .cta{margin-left:auto}
  .cta-band{grid-template-columns:1fr;padding:44px 28px}
  .page .toc{columns:1}
}
@media (max-width:560px){
  .stats,.steps{grid-template-columns:1fr}
  .stats div{border-right:0;border-bottom:1px solid var(--line)}
  .stats div + div{padding-left:0}
  .spec .row{grid-template-columns:1fr;gap:6px}
  .plan{padding:28px 22px}
  .plan.hot{box-shadow:6px 6px 0 var(--amber)}
  .nav{gap:14px}
  .nav .cta{gap:8px}
  .nav .cta .ghost{display:none}
  .nav .cta .btn{font-size:16px;padding:8px 12px}
  .lang summary{padding:8px}
  body{font-size:16px}
  section{padding-block:64px}
  .hero{padding-block:48px 56px}
  .page table{font-size:14px}
  .page th,.page td{padding:8px}
}
@media (prefers-reduced-motion:reduce){.beam{animation:none;top:50%}.btn{transition:none}}

.brand .mark{width:34px;height:34px;flex:0 0 auto}
footer .brand .mark{width:26px;height:26px}