/* Corral — cleanique.ca
   Dark, quiet, high-contrast. The product screenshots are loud and colourful, so the page around
   them is deliberately not: near-black, one accent, generous space, and type doing the work. */

:root{
  --bg:#08090e;
  --bg-2:#0d0f16;
  --bg-3:#12151e;
  --line:#1e2230;
  --line-2:#2a3040;
  --ink:#f2f4f8;
  --ink-2:#aeb6c8;
  --ink-3:#7d869c;
  /* Taken from the app icon: light gold at the top of the tile, deep amber at the bottom, and the
     icon's own near-black plate for text that sits ON the accent. Sampled, not eyeballed. */
  --brand:#e89b38;
  --brand-2:#f7c67d;
  --brand-ink:#211710;
  --warn:#ffc86e;
  --bad:#ff8caf;
  --r:14px;
  --r-lg:22px;
  --wrap:1180px;
  --pad:clamp(20px,4vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}

body{
  margin:0;background:var(--bg);color:var(--ink);
  font:400 17px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.14;letter-spacing:-.02em;margin:0 0 .5em;font-weight:650}
h1{font-size:clamp(2.4rem,6vw,4.2rem);letter-spacing:-.033em}
h2{font-size:clamp(1.9rem,3.8vw,2.9rem);letter-spacing:-.028em}
h3{font-size:1.16rem}
p{margin:0 0 1.1em}
.wrap{width:min(var(--wrap),100% - var(--pad)*2);margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--brand);color:var(--brand-ink);
  padding:10px 16px;border-radius:8px}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}

/* ---------------------------------------------------------------- nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(8,9,14,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s,background .2s}
.nav.scrolled{border-bottom-color:var(--line);background:rgba(8,9,14,.92)}
.nav-in{display:flex;align-items:center;gap:20px;height:68px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;
  letter-spacing:.14em;font-size:.95rem}
.brand:hover{text-decoration:none}
/* The app's own icon, not an abstract bar. It is what people will look for in their Start menu and
   on their taskbar, so the site should teach it. Sized to the cap height of the wordmark beside it. */
/* The app's own icon, not an abstract bar — it is what people will look for on their taskbar, so the
   site should teach it. Width AND height are pinned: the icon is square, and the rule this replaced
   was 9x26, which squashed it into a sliver for anyone holding the old stylesheet in cache. */
.brand-mark{width:32px;height:32px;min-width:32px;flex:none;display:block;
  object-fit:contain;border-radius:0;background:none;box-shadow:none}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav-links a{color:var(--ink-2);font-size:.95rem;font-weight:500}
.nav-links a:hover{color:var(--ink);text-decoration:none}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;padding:10px;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0;border-radius:2px;
  transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:860px){
  .nav-toggle{display:block}
  .nav-links{position:fixed;inset:68px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg-2);border-bottom:1px solid var(--line);padding:8px 0;
    max-height:0;overflow:hidden;transition:max-height .25s ease}
  .nav-links.open{max-height:70vh}
  .nav-links a{padding:14px var(--pad);font-size:1.05rem}
  .nav-links .btn{margin:10px var(--pad) 14px;text-align:center}
}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--brand);color:var(--brand-ink);font-weight:650;font-size:1rem;
  padding:14px 26px;border-radius:999px;border:0;cursor:pointer;white-space:nowrap;
  box-shadow:0 8px 30px rgba(232,155,56,.22);transition:transform .15s,box-shadow .15s,filter .15s}
.btn:hover{text-decoration:none;transform:translateY(-1px);filter:brightness(1.05);
  box-shadow:0 12px 38px rgba(232,155,56,.32)}
.btn:active{transform:translateY(0)}
/* TEXT ON THE ACCENT IS NEAR-BLACK, and stated with element+class specificity so nothing can win it.
   `a{color:var(--brand)}` earlier in this file targets every anchor, and a solid amber button with
   amber-on-amber or inherited white text is the one place on the site where contrast actually fails.
   #14100a on #e89b38 is ~11:1 — comfortably past WCAG AA for body text, let alone a large button. */
a.btn, button.btn, .btn{color:#14100a}
a.btn:hover, button.btn:hover, .btn:hover{color:#14100a}
.btn-ghost, a.btn-ghost, button.btn-ghost{color:var(--ink)}
.btn-sm{padding:9px 18px;font-size:.92rem;box-shadow:none}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line-2);box-shadow:none}
.btn-ghost:hover{border-color:var(--ink-3);filter:none}
.btn-block{display:flex;width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* ---------------------------------------------------------------- hero */
.hero{position:relative;padding:clamp(56px,9vw,110px) 0 clamp(40px,6vw,72px);overflow:hidden}
.hero::before{content:"";position:absolute;inset:-30% -20% auto;height:820px;
  background:radial-gradient(60% 60% at 50% 0,rgba(232,155,56,.16),transparent 70%);
  pointer-events:none}
.hero-in{position:relative;text-align:center;max-width:860px;margin-inline:auto}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:.83rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--brand);
  border:1px solid rgba(232,155,56,.3);background:rgba(232,155,56,.07);
  padding:7px 15px;border-radius:999px;margin-bottom:26px}
.hero p.lede{font-size:clamp(1.08rem,2.1vw,1.3rem);color:var(--ink-2);max-width:640px;
  margin:0 auto 32px}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.trust{display:flex;gap:10px 26px;justify-content:center;flex-wrap:wrap;color:var(--ink-3);
  font-size:.9rem;margin:0}
.trust span{display:inline-flex;align-items:center;gap:8px}
.trust span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand);flex:none}

.shot{margin-top:clamp(34px,5vw,58px);position:relative}
.shot img,.shot video{width:100%;border-radius:var(--r-lg);border:1px solid var(--line);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.03) inset}
.shot::after{content:"";position:absolute;inset:auto 8% -30px;height:60px;
  background:radial-gradient(50% 100% at 50% 0,rgba(232,155,56,.16),transparent 70%);
  filter:blur(12px);pointer-events:none}

/* ---------------------------------------------------------------- sections */
section{padding:clamp(58px,8vw,104px) 0}
.sec-head{max-width:680px;margin-bottom:clamp(30px,4vw,52px)}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head p{color:var(--ink-2);font-size:1.06rem;margin:0}
.kicker{display:block;font-size:.8rem;font-weight:650;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);margin-bottom:14px}

.alt{background:linear-gradient(180deg,transparent,var(--bg-2) 12%,var(--bg-2) 88%,transparent)}

/* feature rows */
.row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.row + .row{margin-top:clamp(48px,7vw,96px)}
.row.flip .row-media{order:-1}
.row-copy h3{font-size:clamp(1.5rem,2.6vw,2.05rem);letter-spacing:-.02em}
.row-copy p{color:var(--ink-2)}
.row-media img,.row-media video{border-radius:var(--r);border:1px solid var(--line);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.95)}
@media (max-width:820px){.row{grid-template-columns:1fr}.row.flip .row-media{order:0}}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:18px}
.card{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;
  transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--line-2);transform:translateY(-2px)}
.card h3{margin-bottom:.4em}
.card p{color:var(--ink-2);font-size:.97rem;margin:0}
.card .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;margin-bottom:16px;
  background:rgba(232,155,56,.1);border:1px solid rgba(232,155,56,.24);color:var(--brand);
  font-size:1.05rem}

/* the four-up promise strip */
.promise{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.promise div{background:var(--bg-2);padding:26px 24px}
.promise strong{display:block;font-size:1.02rem;margin-bottom:6px}
.promise p{color:var(--ink-3);font-size:.93rem;margin:0}

/* ---------------------------------------------------------------- pricing */
.price-card{max-width:520px;margin-inline:auto;background:var(--bg-3);border:1px solid var(--line-2);
  border-radius:var(--r-lg);padding:clamp(30px,4vw,44px);text-align:center;position:relative;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9)}
.price-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(160deg,rgba(232,155,56,.55),transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.price{font-size:clamp(3rem,8vw,4.4rem);font-weight:700;letter-spacing:-.04em;line-height:1;
  margin:6px 0 4px}
.price small{font-size:1rem;font-weight:500;color:var(--ink-3);letter-spacing:0}
.price-note{color:var(--ink-2);margin-bottom:26px}
.price-list{list-style:none;margin:0 0 28px;padding:0;text-align:left;display:grid;gap:11px}
.price-list li{display:flex;gap:11px;color:var(--ink-2);font-size:.98rem}
.price-list li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;
  background:rgba(232,155,56,.14);border:1px solid rgba(232,155,56,.4);
  background-image:linear-gradient(45deg,transparent 44%,var(--brand) 44% 56%,transparent 56%),
                   linear-gradient(-45deg,transparent 44%,var(--brand) 44% 56%,transparent 56%);
  background-size:9px 9px;background-repeat:no-repeat;background-position:4px 6px,4px 6px}
.price-fine{color:var(--ink-3);font-size:.86rem;margin:16px 0 0}

/* ---------------------------------------------------------------- faq */
.faq{max-width:820px;margin-inline:auto}
details{border-bottom:1px solid var(--line);padding:4px 0}
details summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;
  font-weight:600;font-size:1.05rem}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details p{color:var(--ink-2);margin:0 0 20px;max-width:70ch}

/* ---------------------------------------------------------------- panels (auth/dashboard) */
.panel-wrap{min-height:calc(100vh - 68px);display:grid;place-items:center;padding:60px 0}
.panel{width:min(520px,100% - var(--pad)*2);background:var(--bg-3);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:clamp(28px,4vw,40px)}
.panel h1{font-size:1.75rem;margin-bottom:.35em}
.panel-sub{color:var(--ink-2);margin-bottom:26px}
.panel.wide{width:min(860px,100% - var(--pad)*2)}
label{display:block;font-size:.9rem;font-weight:600;color:var(--ink-2);margin:0 0 7px}
input[type=email],input[type=password],input[type=text]{
  width:100%;padding:13px 15px;border-radius:10px;border:1px solid var(--line-2);
  background:var(--bg);color:var(--ink);font:inherit;font-size:1rem;margin-bottom:18px}
input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(232,155,56,.15)}
.flash{padding:13px 16px;border-radius:10px;margin:0 0 20px;font-size:.95rem}
.flash-ok{background:rgba(232,155,56,.10);border:1px solid rgba(232,155,56,.35);color:#f6d8a8}
.flash-bad{background:rgba(255,140,175,.09);border:1px solid rgba(255,140,175,.35);color:#ffc9d9}
.flash-info{background:rgba(247,198,125,.08);border:1px solid rgba(247,198,125,.30);color:#fbe3bd}
.panel-foot{margin:22px 0 0;font-size:.92rem;color:var(--ink-3);text-align:center}

.dl{display:flex;align-items:center;gap:20px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--r);padding:22px 24px;margin:8px 0 20px;flex-wrap:wrap}
.dl-meta{flex:1;min-width:180px}
.dl-meta strong{display:block;font-size:1.1rem}
.dl-meta span{color:var(--ink-3);font-size:.9rem}
.kv{width:100%;border-collapse:collapse;margin:6px 0 0}
.kv th,.kv td{text-align:left;padding:11px 0;border-bottom:1px solid var(--line);font-size:.95rem;
  vertical-align:top}
.kv th{color:var(--ink-3);font-weight:500;width:40%}
code.pw{display:inline-block;background:var(--bg);border:1px solid var(--line-2);border-radius:8px;
  padding:4px 10px;font-family:ui-monospace,Consolas,monospace;letter-spacing:.06em}

/* ---------------------------------------------------------------- footer */
.foot{border-top:1px solid var(--line);background:var(--bg-2);padding:clamp(44px,6vw,68px) 0 26px;
  margin-top:clamp(40px,6vw,80px)}
.foot-in{display:grid;grid-template-columns:1.2fr 2fr;gap:40px}
.foot-brand{display:flex;gap:13px;align-items:flex-start}
.foot-brand strong{font-size:1.05rem}
.foot-brand p{color:var(--ink-3);margin:2px 0 0;font-size:.94rem}
.foot-links{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.foot-links h3{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:13px}
.foot-links a{display:block;color:var(--ink-2);font-size:.95rem;padding:4px 0}
.foot-base{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-base p{color:var(--ink-3);font-size:.87rem;margin:0}
@media (max-width:760px){.foot-in{grid-template-columns:1fr}.foot-links{grid-template-columns:repeat(2,1fr)}}

/* ---------------------------------------------------------------- misc */
.center{text-align:center}
.muted{color:var(--ink-3)}
.nowrap{white-space:nowrap}
.mt{margin-top:28px}
.legal{max-width:78ch;margin-inline:auto}
.legal h2{font-size:1.4rem;margin-top:2em}
.legal pre{white-space:pre-wrap;word-wrap:break-word;color:var(--ink-2);font-size:.94rem;
  line-height:1.7;font-family:inherit}
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ---------------------------------------------------------------- utilities
   These exist so no page needs an inline style="" attribute. The CSP sets
   style-src 'self', which blocks inline styles outright — weakening it to
   'unsafe-inline' for a handful of one-off rules would be the wrong trade. */
.h-page{font-size:clamp(2rem,4.6vw,2.8rem)}
.h-page-sm{font-size:clamp(1.8rem,4vw,2.4rem)}
.h-page-lg{font-size:clamp(2rem,4.6vw,3rem)}
.h-sub{font-size:1.25rem;margin-top:40px}
.narrow{max-width:820px}
.narrow-sm{max-width:760px}
.narrow-xs{max-width:520px;margin:0 auto 28px}
.tc{text-align:center}
.flush-top{padding-top:0}
.gap-top{margin-top:26px}
.m0{margin:0}
.nudge-up{margin-top:-14px}
.hash{font-size:.86rem;word-break:break-all}
.steps{line-height:2}
.panel-wrap.tight{min-height:auto;padding-top:56px}