/* ============================================================
   ontariocaptaincooks.casino — landing
   "Deep Current": colour is a role, never decoration.

   Standalone by design. The tokens, the button and the footer are the same as
   the casino's, copied rather than imported, because this folder has to open on
   a host where the main site does not exist. When a token changes there, change
   it here — the brand cannot be half-updated.

   Contents
     1. Tokens          8. Steps
     2. Base            9. Payments
     3. Backdrop       10. Regulation
     4. Strip          11. Control
     5. Masthead       12. Close
     6. Hero           13. Footer
     7. Sections       14. Gate, to-top
                       15. Breakpoints
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Surfaces — the water column of Lake Ontario */
  --abyss:#05202B;
  --deep:#0A3243;
  --mid:#0F4459;
  --shelf:#155870;
  --line:#1E6C86;
  --line-2:#2A8AA6;
  --ui:#4E93AC;              /* interactive borders, WCAG 1.4.11 */

  /* Colour is a role, never decoration */
  --c-play:#2FD6C3;          /* games, primary action        */
  --c-rg:#FF7A45;            /* responsible gambling          */
  --c-reg:#F2C14E;           /* regulator, legal, verified    */
  --c-pay:#8FC0FF;           /* payments                      */

  /* Text */
  --sand:#F4EBD8;
  --sand-2:#D3C9B6;
  --dim:#A9BDC6;
  --white:#FFFFFF;
  --on-accent:#04222C;

  --g-current:linear-gradient(96deg,var(--c-play) 0%,#4FE0A8 42%,var(--c-reg) 100%);
  --g-tile:linear-gradient(160deg,rgba(47,214,195,.10),rgba(47,214,195,0) 60%);
  --g-rings:repeating-radial-gradient(circle at 88% 92%,transparent 0 15px,rgba(42,138,166,.34) 15px 16px);

  --fd:"Sora","Trebuchet MS","Segoe UI",system-ui,sans-serif;
  --fb:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fm:ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace;

  --t-xs:.75rem; --t-sm:.875rem; --t-base:1rem; --t-md:1.125rem;
  --t-lg:1.375rem; --t-xl:1.75rem; --t-2xl:2.25rem; --t-3xl:3rem;

  /* 8px rhythm */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:56px; --s7:72px; --s8:96px;

  --r:14px; --r-sm:10px; --r-pill:999px;
  --sh:0 6px 22px rgba(2,16,22,.4);
  --sh-lift:0 14px 34px rgba(2,16,22,.5);

  --wrap:1240px;
  --header-h:76px;
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--abyss);color:var(--sand);
  font:400 var(--t-base)/1.65 var(--fb);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--fd);line-height:1.1;margin:0;letter-spacing:-.02em;color:var(--white);font-weight:700}
h1{font-size:clamp(2.1rem,5.4vw,3.6rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:800}
h3{font-size:var(--t-lg)}
h4{font-size:var(--t-md)}
p{margin:0 0 var(--s2)}
a{color:var(--c-play);text-underline-offset:3px}
a:hover{color:var(--white)}
/* Only where an unbreakable token can actually overflow: links (email
   addresses, URLs) and the footer address block. */
a,code,address{overflow-wrap:anywhere}
img,picture,svg{max-width:100%}
img{height:auto;display:block}
ul,ol{margin:0 0 var(--s2);padding-left:1.25em}
li{margin-bottom:.4em}
strong,b{color:var(--white);font-weight:700}
:focus-visible{outline:3px solid var(--c-play);outline-offset:2px;border-radius:4px}
::selection{background:var(--c-play);color:var(--on-accent)}

.wrap{width:min(var(--wrap),100% - 40px);margin-inline:auto}
.ic{width:1.25em;height:1.25em;flex:0 0 auto;vertical-align:-.22em}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Any class that sets `display` outranks the browser rule for [hidden] (0,1,0
   vs 0,0,1), so a hidden overlay keeps its layout box and swallows every click
   on the page while being invisible. This is the backstop. */
[hidden]{display:none !important}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--c-play);color:var(--on-accent);padding:12px 20px;font-weight:700;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

.snd{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.16em;color:var(--c-play);display:flex;align-items:center;gap:9px;margin-bottom:var(--s2);text-transform:uppercase}

.btn{display:inline-flex;align-items:center;gap:9px;border-radius:var(--r-sm);padding:13px 22px;font-weight:700;font-size:var(--t-base);text-decoration:none;border:1px solid transparent;cursor:pointer;position:relative;overflow:hidden;font-family:var(--fb);line-height:1.2;transition:transform .2s,box-shadow .2s,border-color .2s,color .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-p{background:var(--g-current);color:var(--on-accent);box-shadow:0 6px 22px rgba(47,214,195,.26)}
.btn-p:hover{color:var(--on-accent)}
.btn-g{border-color:var(--ui);color:var(--sand);background:rgba(255,255,255,.04)}
.btn-g:hover{border-color:var(--c-play);color:var(--white)}
.btn-sm{padding:11px 22px;font-size:var(--t-sm)}
.btn-lg{padding:16px 30px;font-size:var(--t-md)}

.age-mark{display:inline-flex;align-items:center;justify-content:center;width:2.5em;height:2.5em;border-radius:50%;border:2px solid currentColor;font-family:var(--fd);font-weight:800;font-size:.8rem;letter-spacing:-.02em;flex:0 0 auto}
.helpline{font-family:var(--fm);font-size:var(--t-base);color:var(--c-rg);font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.helpline:hover{color:var(--c-rg);text-decoration:underline}
.hl-note{display:block;color:var(--dim);font-size:var(--t-xs);margin-top:8px;line-height:1.6}

.pay-chip{display:inline-flex;align-items:center;justify-content:center;height:56px;background:var(--white);border-radius:var(--r-sm);padding:10px 14px;border:1px solid rgba(255,255,255,.14)}
.pay-chip img{max-height:26px;width:auto}
.pay-chip.pay-sq img{max-height:36px}
/* Marks that identify a body the copy already names — caption weight, never
   the weight of an award badge. */
.trust-mark{display:inline-block;height:auto;max-width:100%;opacity:.9}
.trust-mark.block{display:block;margin:0 0 var(--s2)}
.trust-mark.cx{display:block;margin:0 0 8px}

/* ---------- 3. Isobath backdrop (the brand's signature line-work) ---------- */
.soundings{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.45}
.soundings svg{width:130%;height:130%;position:absolute;top:-15%;left:-15%}
.soundings path{fill:none;stroke:var(--line);stroke-width:1}
.soundings path:nth-child(odd){stroke:var(--line-2);opacity:.55}
.shell{position:relative;z-index:1}

/* ---------- 4. Compliance strip ---------- */
.strip{background:var(--c-rg);color:#2A0E04;font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;position:relative;z-index:41}
.strip .wrap{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;padding:9px 0;text-align:center}
.strip b{background:#2A0E04;color:var(--c-rg);border-radius:4px;padding:2px 8px}
.strip a{color:#2A0E04;text-decoration:underline;display:inline-block;padding-block:6px}
.strip a:hover{color:#000}

/* ---------- 5. Masthead ---------- */
.mast{position:sticky;top:0;z-index:46;backdrop-filter:blur(12px);background:rgba(5,32,43,.9);border-bottom:1px solid var(--line)}
.mast .wrap{display:flex;align-items:center;gap:var(--s4);padding:var(--s2) 0;transition:padding .3s}
.mast.small .wrap{padding:10px 0}
.logo{text-decoration:none;line-height:1;display:block;flex:0 0 auto}
.logo .occ{display:block;width:104px;height:auto}

.mast-nav{display:flex;gap:var(--s3);margin-left:auto;font-size:var(--t-sm);font-weight:600}
.mast-nav a{color:var(--sand-2);text-decoration:none;position:relative;padding:6px 0;white-space:nowrap;transition:color .2s}
.mast-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--c-play);transition:right .28s}
.mast-nav a:hover{color:var(--white)}
.mast-nav a:hover::after{right:0}
.mast-cta{flex:0 0 auto;white-space:nowrap}
.cta-short{display:none}

/* ---------- 6. Hero ---------- */
.hero{position:relative;padding:var(--s8) 0 var(--s7);overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg picture,.hero-bg img{width:100%;height:100%;object-fit:cover}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,32,43,.55),rgba(5,32,43,.88))}
.hero-in{position:relative;z-index:1;max-width:840px}
.hero h1{margin-bottom:var(--s3)}
/* One accent phrase, gradient-filled: the single typographic flourish on the
   page, so it stays a signature rather than a habit. */
.hero h1 .accent{background:var(--g-current);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lede{color:var(--sand-2);font-size:var(--t-md);max-width:56ch;margin-bottom:var(--s4)}
.hero-acts{display:flex;gap:12px;flex-wrap:wrap}
.hero-facts{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
/* Two flex items per row and no more: icon plus one <span> of copy. A bare
   <b> or <a> loose in the row becomes its own item and the label separates
   from its value on a narrow column. */
.hero-facts li{display:flex;gap:10px;align-items:flex-start;margin:0;font-size:var(--t-sm);color:var(--sand-2);
  border-top:1px solid var(--line);padding-top:var(--s2)}
.hero-facts svg{width:18px;height:18px;color:var(--c-play);flex:0 0 auto;margin-top:2px}
.hero-facts b{display:block;color:var(--white)}

/* ---------- 7. Sections ---------- */
.sec{padding:var(--s7) 0;position:relative}
.sec-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.sec-bg picture,.sec-bg img{width:100%;height:100%;object-fit:cover}
.sec-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,32,43,.90),rgba(5,32,43,.96))}
.sec > .wrap{position:relative;z-index:1}
.sec .lede{color:var(--sand-2);font-size:var(--t-md);max-width:62ch;margin:var(--s2) 0 var(--s5)}

/* Shelves */
.shelves{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.shelf{display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--sand);
  background:linear-gradient(160deg,var(--deep),var(--mid));border:1px solid var(--line);
  border-radius:var(--r);padding:var(--s3);position:relative;overflow:hidden;
  transition:border-color .25s,transform .25s}
/* SIGNATURE — the isobath rings carry into every card, so open space reads as
   chart rather than as a hole. */
.shelf::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--g-rings);opacity:.55;transition:opacity .25s}
.shelf:hover::before{opacity:.9}
.shelf > *{position:relative;z-index:1}
.shelf:hover{border-color:var(--c-play);transform:translateY(-3px)}
.shelf-ic svg{width:28px;height:28px;color:var(--c-play)}
.shelf h3{font-size:var(--t-md)}
.shelf p{font-size:var(--t-sm);color:var(--sand-2);margin:0;flex:1}
.shelf-go{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--c-play);display:inline-flex;align-items:center;gap:6px}
.shelf-go svg{width:14px;height:14px;transition:transform .25s}
.shelf:hover .shelf-go svg{transform:translateX(4px)}

/* Catalogue tiles */
.strip-cap{font-family:var(--fm);font-size:var(--t-xs);color:var(--dim);letter-spacing:.04em;margin:var(--s5) 0 var(--s3)}
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;list-style:none;margin:0;padding:0}
.tiles li{margin:0}
.tile{display:block;text-decoration:none;color:var(--sand);border:1px solid var(--line);border-radius:var(--r);
  background:var(--deep);padding:10px;position:relative;transition:border-color .25s,transform .25s,box-shadow .25s}
.tile:hover{border-color:var(--c-play);transform:translateY(-4px);box-shadow:var(--sh-lift)}
.tile picture{display:block;aspect-ratio:1;border-radius:calc(var(--r) - 7px);overflow:hidden;background:var(--mid)}
.tile img{width:100%;height:100%;object-fit:cover}
.tile-meta{display:block;padding:12px 4px 4px}
.tile .nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font-family:var(--fd);font-size:.9rem;font-weight:700;color:var(--white);line-height:1.28;min-height:2.56em}
.tile .pv{display:block;font-family:var(--fm);font-size:.66rem;color:var(--dim);margin-top:7px;letter-spacing:.03em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 8. Payment chips (footer strip) ---------- */
.pay-strip{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:var(--s6)}

/* ---------- 9. Handover ---------- */
.close-acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:var(--s6)}

/* ---------- 10. Footer ---------- */
.foot{border-top:1px solid var(--line);background:rgba(4,26,35,.9);padding:var(--s7) 0 var(--s4);position:relative;z-index:1}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--s5);padding-bottom:var(--s5);border-bottom:1px solid var(--line)}
.foot-top > *{min-width:0}
.foot h3{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--c-play);font-weight:600;margin-bottom:var(--s2)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:10px}
.foot a{color:var(--sand-2);text-decoration:none;font-size:var(--t-sm)}
.foot a:hover{color:var(--c-play)}
/* The footer CTA is a button, not a footer link. .foot a and .btn-p carry the
   same specificity (0,1,0) and .foot a is declared later, so it was winning:
   sand text on the light aqua gradient, effectively unreadable. Restated at
   (0,2,0) so the button keeps its own ink in both states. */
.foot .btn-p,.foot .btn-p:hover{color:var(--on-accent)}
.foot .about p{font-size:var(--t-sm);color:var(--sand-2);max-width:46ch}
/* Width is set here rather than left to the img attributes: those carry the
   wordmark’s intrinsic 1017×449 so the box reserves the right aspect ratio,
   which is a good deal wider than the footer wants. */
.foot-logo{display:block;width:104px;max-width:60%;height:auto;margin-bottom:var(--s3)}


.foot-rg{display:flex;gap:var(--s3);align-items:flex-start;flex-wrap:wrap;padding:var(--s4) 0;border-bottom:1px solid var(--line)}
.foot-rg .age-mark{color:var(--c-rg);font-size:.95rem}
.foot-rg .txt{flex:1;min-width:260px}
.foot-rg .txt p{font-size:var(--t-sm);color:var(--sand-2);margin:0 0 8px}

/* Wide band for legal data — a narrow fourth column would overflow. */
.foot-legal{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s4);padding:var(--s5) 0;border-bottom:1px solid var(--line)}
.foot-legal > *{min-width:0}
.foot-legal .blk h4{font-family:var(--fm);font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:600;margin-bottom:10px}
.foot-legal address{font-style:normal;font-size:var(--t-sm);color:var(--sand-2);line-height:1.8}
.foot-legal address a{display:inline-block;padding-block:5px}

.foot-reg{padding-top:var(--s3)}
.foot-note{padding-top:var(--s4);font-family:var(--fm);font-size:var(--t-xs);line-height:2;color:var(--dim)}
/* The brief prescribes this line verbatim as "19+ | Ontario only | Play
   Responsibly" — rendered case is left alone so a visual audit matches it. */
.foot-note .b{color:var(--c-rg);font-weight:700;letter-spacing:.06em}

/* ---------- 11. Gate, to-top ---------- */
.gate{position:fixed;inset:0;z-index:90;background:rgba(3,18,25,.96);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:var(--s3)}
.gate[hidden]{display:none}
.gate .box{max-width:560px;width:100%;background:linear-gradient(160deg,var(--deep),var(--mid));border:1px solid var(--line);border-radius:var(--r);padding:var(--s5) var(--s4);text-align:center;box-shadow:var(--sh-lift)}
.gate .age-mark{color:var(--c-rg);font-size:1.1rem;margin-bottom:var(--s3)}
.gate h2{font-size:clamp(1.3rem,3vw,1.8rem);margin-bottom:var(--s2)}
.gate p{color:var(--sand-2);font-size:var(--t-sm)}
.gate .acts{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:var(--s4)}
.gate .acts .btn{min-width:170px;justify-content:center}
.gate .fine{font-family:var(--fm);font-size:var(--t-xs);color:var(--dim);margin:var(--s3) 0 0;line-height:1.7}

.totop{position:fixed;right:20px;bottom:20px;z-index:60;width:48px;height:48px;border-radius:50%;border:1px solid var(--ui);background:rgba(5,32,43,.92);color:var(--sand);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s,border-color .2s,transform .2s}
.totop.on{opacity:1;visibility:visible}
.totop:hover{border-color:var(--c-play);color:var(--c-play);transform:translateY(-3px)}

/* Scroll reveal. The visible state is the default, so a page with the script
   blocked shows everything; the class is only ever added by JS. */
.js .rv{opacity:0;transform:translateY(18px)}
.js .rv.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}

/* ---------- 12. Breakpoints ---------- */
@media(max-width:1100px){
  /* Six tiles, so the column counts divide it: 6 / 3 / 2 and never a ragged
     last row. */
  .tiles{grid-template-columns:repeat(3,1fr)}
  .shelves{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .mast-nav{display:none}
  .mast .wrap{justify-content:space-between}
  .hero-facts{grid-template-columns:1fr;gap:var(--s2)}
}
@media(max-width:860px){
  .foot-top{grid-template-columns:1fr 1fr;gap:var(--s4)}
  .foot-top .about{grid-column:1/-1}
}
@media(max-width:640px){
  :root{--s8:64px;--s7:56px;--s6:40px}
  .wrap{width:min(var(--wrap),100% - 28px)}
  .hero{padding:var(--s6) 0 var(--s5)}
  .tiles{grid-template-columns:repeat(2,1fr);gap:12px}
  .shelves{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr}
  .hero-acts .btn,.close-acts .btn{flex:1 1 100%;justify-content:center}
  .gate .acts .btn{width:100%}
  .totop{right:14px;bottom:14px}
  .logo .occ{width:84px}
  .mast .wrap{gap:var(--s2)}
  .mast-cta{padding:10px 14px}
  .cta-long{display:none}
  .cta-short{display:inline}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .js .rv{opacity:1 !important;transform:none !important}
  .btn:hover,.tile:hover,.shelf:hover,.totop:hover{transform:none}
}

/* ---------- Ontario body badges (footer) ----------
   iGaming Ontario and BetGuard replace the AGCO crest: a regulator's coat of
   arms in a trust strip reads as approval it does not give, while these two are
   bodies a player can actually act through. Neither publishes artwork in the
   client's library, so the mark is typographic — see logo.md. */
.foot-reg{display:flex;flex-wrap:wrap;gap:12px;padding-top:var(--s3)}
.tbadge{display:flex;align-items:center;gap:12px;min-height:44px;padding:10px 14px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(15,68,89,.35);
  text-decoration:none;transition:border-color .2s,background .2s}
.tbadge:hover{border-color:var(--c-play);background:rgba(15,68,89,.6)}
.tbadge-plate{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  height:40px;padding:0 12px;border-radius:6px;background:#fff}
.tbadge-plate img{display:block;max-width:100%}
.tbadge-mark{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  min-width:40px;height:26px;padding:0 8px;border-radius:4px;background:var(--c-play);
  color:var(--on-accent);font-family:var(--fm);font-weight:700;font-size:.7rem;letter-spacing:.06em}
.tbadge-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.tbadge-txt b{color:var(--white);font-size:var(--t-sm);font-weight:600}
.tbadge-txt i{color:var(--dim);font-size:var(--t-xs);font-style:normal;line-height:1.35}

/* ---------- Item 15: tap targets under 768px ----------
   Sixteen of the thirty-nine links and buttons in the header and the footer
   were shorter than 40px on one axis. The rule sets a floor rather than a size,
   so nothing that is already large changes; inline-flex is what makes
   min-height apply to an inline element at all. */
@media(max-width:768px){
  header a,
  footer a,
  .strip a,
  .cl label,
  .cookie-prefs label,
  .cookie .btn{min-height:44px;display:inline-flex;align-items:center}
  /* Labels wrap two lines of copy, so they align to the top rather than
     centring a paragraph against its checkbox. */
  .cookie-prefs label{align-items:flex-start}
  /* A link set in the middle of a sentence keeps display:inline — boxing one
     to 44px pushes the word onto its own line and tears the sentence in half.
     Vertical padding on an inline element does not change the line box but
     does enlarge the hit area, which is the part that actually matters, so
     these reach the same 44px without touching the typography. */
  footer p a:not(.helpline):not(.btn){min-height:0;display:inline;padding-block:12px}
  /* The strip sets its number in the small mono face, so it needs more padding
     than footer prose to clear 44px. */
  .strip span a{min-height:0;display:inline;padding-block:15px}
}

/* Item 12 — the hero facts row lost the registration plaque and is a pair now. */
.hero-facts.two{grid-template-columns:repeat(2,1fr)}