/* /lotto-software-canada — AISHTMLNEWDESIGN-365
Page-owned styles. EVERY selector is scoped to #page-lotto-software-canada or a
lsc- prefixed class: this sheet must never style body, a bare
element, #ais-header or #ais-footer. The document reset
(html,body{margin:0}) is owned by the shared layout sheet.
Font is Inter; no body/UI text below 16px.
VISUAL DIRECTION — "KIOSK COUNTER"
The retail lottery counter: a terminal readout in amber-on-charcoal, thermal
ticket stock, kraft counter laminate, validation-teal ink, and tear-off stubs
with punched notches and dashed perforation lines. Deliberately NOT a ruled
register (draw-registry), NOT ice/granite (curling-house), NOT spruce/glacier
(boreal-signal), and NOT the maple/aurora national shorthand.
Motifs: punched notch · dashed tear line · terminal readout panel · stub card.
Motion: hover/focus/press and the FAQ disclosure only — nothing self-starting. */
/* ---- tokens + own box model (no global box model exists) ---- */
#page-lotto-software-canada{
--lsc-ink:#17140f;
--lsc-ink-2:#241f18;
--lsc-ink-3:#332b21;
--lsc-paper:#faf6ee;
--lsc-kraft:#ece0cb;
--lsc-kraft-2:#e3d4b9;
--lsc-amber:#d9822b;
--lsc-amber-lt:#f2ab55;
--lsc-teal:#12655f;
--lsc-teal-dk:#0d4c47;
--lsc-text:#2a251d;
--lsc-text-2:#4a4237;
--lsc-line:#c9b795;
--lsc-line-dk:#3d3428;
--lsc-pad:clamp(56px,7vw,104px);
--lsc-gut:clamp(18px,4vw,40px);
font-family:"Inter",system-ui,sans-serif;
font-size:17px;
line-height:1.65;
color:var(--lsc-text);
background:var(--lsc-paper);
-webkit-font-smoothing:antialiased;
}
#page-lotto-software-canada,
#page-lotto-software-canada *,
#page-lotto-software-canada *::before,
#page-lotto-software-canada *::after{box-sizing:border-box;}
#page-lotto-software-canada img{max-width:100%;}
/* ---- shared shells ---- */
#page-lotto-software-canada .lsc-band{width:100%;padding:var(--lsc-pad) var(--lsc-gut);}
#page-lotto-software-canada .lsc-wrap{max-width:1160px;margin-inline:auto;}
#page-lotto-software-canada .lsc-wrap--tight{max-width:920px;}
#page-lotto-software-canada .lsc-band--paper{background:var(--lsc-paper);}
#page-lotto-software-canada .lsc-band--kraft{background:var(--lsc-kraft);}
#page-lotto-software-canada .lsc-band--ink{background:var(--lsc-ink);color:var(--lsc-paper);}
#page-lotto-software-canada .lsc-band--teal{background:var(--lsc-teal);color:#f2fbf9;}
#page-lotto-software-canada .lsc-h2{
font-size:clamp(29px,3.3vw,44px);line-height:1.16;letter-spacing:-.02em;
font-weight:800;margin:0 0 18px;text-wrap:balance;
}
#page-lotto-software-canada .lsc-band--ink .lsc-h2,
#page-lotto-software-canada .lsc-band--teal .lsc-h2{color:#fff;}
#page-lotto-software-canada .lsc-lede{font-size:clamp(17px,1.25vw,19px);margin:0 0 26px;color:var(--lsc-text-2);max-width:66ch;}
#page-lotto-software-canada .lsc-band--ink .lsc-lede,
#page-lotto-software-canada .lsc-band--teal .lsc-lede{color:rgba(255,255,255,.9);}
/* the tear line — a perforation, not a ruled register hairline */
#page-lotto-software-canada .lsc-tear{
height:0;border-top:3px dashed var(--lsc-line);margin:0 0 34px;
}
#page-lotto-software-canada .lsc-band--ink .lsc-tear{border-top-color:var(--lsc-line-dk);}
/* ---- CTA ---- */
#page-lotto-software-canada .lsc-btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;
min-height:52px;padding:14px 30px;border:0;border-radius:6px;
font-family:inherit;font-size:17px;font-weight:700;letter-spacing:.01em;
background:var(--lsc-amber);color:#1a1206;cursor:pointer;
box-shadow:0 2px 0 0 #a75e14;
transition:transform .14s ease,box-shadow .14s ease,background-color .14s ease;
}
#page-lotto-software-canada .lsc-btn:hover{background:var(--lsc-amber-lt);}
#page-lotto-software-canada .lsc-btn:focus-visible{outline:3px solid var(--lsc-teal);outline-offset:3px;}
#page-lotto-software-canada .lsc-band--ink .lsc-btn:focus-visible,
#page-lotto-software-canada .lsc-band--teal .lsc-btn:focus-visible{outline-color:#fff;}
#page-lotto-software-canada .lsc-btn:active{transform:translateY(2px);box-shadow:0 0 0 0 #a75e14;}
#page-lotto-software-canada .lsc-act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;}
/* Section CTAs added on request: one per section, each uniquely named.
.lsc-act--c adds ONLY centring. The base .lsc-act rule above is shared with
the teal collaborate banner, whose CTA must stay left-aligned inside its
split layout, so that rule is deliberately left untouched -- editing a
shared act selector is exactly how six CTAs were broken on a sibling page. */
#page-lotto-software-canada .lsc-act--c{justify-content:center;margin:clamp(26px,3vw,38px) 0 0;grid-column:1/-1;}
/* grid-column spans the intro band's 2-column grid, where the CTA would otherwise
be placed in column 1 and sit 310px left of centre. It is inert (ignored) in the
plain block parents the other six added CTAs sit in. */
/* in-copy links — the wrapper id is included on EVERY anchor rule so it
out-specifies the inline baseline `#page- a{color:inherit}` */
#page-lotto-software-canada a.lsc-inlink{
color:var(--lsc-teal);text-decoration:underline;text-underline-offset:3px;
text-decoration-thickness:2px;font-weight:600;border-radius:3px;
transition:color .14s ease,background-color .14s ease;
}
#page-lotto-software-canada a.lsc-inlink:hover{color:var(--lsc-teal-dk);background:#dff0ec;text-decoration:underline;}
#page-lotto-software-canada a.lsc-inlink:focus-visible{outline:3px solid var(--lsc-teal);outline-offset:2px;}
#page-lotto-software-canada .lsc-band--ink a.lsc-inlink,
#page-lotto-software-canada .lsc-band--teal a.lsc-inlink{color:var(--lsc-amber-lt);}
#page-lotto-software-canada .lsc-band--ink a.lsc-inlink:hover,
#page-lotto-software-canada .lsc-band--teal a.lsc-inlink:hover{color:#ffd39a;background:transparent;}
#page-lotto-software-canada .lsc-band--ink a.lsc-inlink:focus-visible,
#page-lotto-software-canada .lsc-band--teal a.lsc-inlink:focus-visible{outline-color:#fff;}
/* ---- breadcrumb rail (sits ABOVE the hero, outside it) ---- */
#page-lotto-software-canada .lsc-rail{
width:100%;background:var(--lsc-ink);padding:16px var(--lsc-gut) 0;
}
#page-lotto-software-canada .lsc-rail__in{
max-width:1160px;margin-inline:auto;display:flex;align-items:center;gap:8px;
font-size:16px;color:rgba(250,246,238,.72);
}
#page-lotto-software-canada a.lsc-crumb{
display:inline-flex;align-items:center;gap:8px;color:var(--lsc-amber-lt);
font-weight:600;padding:4px 8px;border-radius:5px;
transition:background-color .14s ease;
}
#page-lotto-software-canada a.lsc-crumb:hover{background:rgba(242,171,85,.14);}
#page-lotto-software-canada a.lsc-crumb:focus-visible{outline:3px solid #fff;outline-offset:2px;}
#page-lotto-software-canada .lsc-crumb__ico{filter:brightness(0) saturate(100%) invert(78%) sepia(46%) saturate(830%) hue-rotate(334deg) brightness(101%) contrast(92%);}
#page-lotto-software-canada .lsc-rail__here{color:#fff;font-weight:600;}
/* ---- HERO — rule 24: full-bleed, image-free, static gradient, centred column ---- */
#page-lotto-software-canada .lsc-hero{
width:100%;
padding:clamp(56px,7vw,104px) var(--lsc-gut) clamp(64px,8vw,112px);
background:linear-gradient(178deg,var(--lsc-ink) 0%,var(--lsc-ink-2) 58%,#2b2418 100%);
color:var(--lsc-paper);
border-bottom:4px solid var(--lsc-amber);
}
#page-lotto-software-canada .lsc-hero__inner{max-width:900px;margin-inline:auto;text-align:center;}
#page-lotto-software-canada .lsc-hero h1{
font-size:clamp(37px,5vw,64px);line-height:1.06;letter-spacing:-.028em;
font-weight:900;margin:0 0 24px;color:#fff;text-wrap:balance;
}
#page-lotto-software-canada .lsc-hero__copy{
font-size:clamp(17px,1.35vw,20px);line-height:1.7;margin:0 auto 26px;
max-width:780px;color:rgba(250,246,238,.9);
}
#page-lotto-software-canada .lsc-hero__tags{
list-style:none;margin:0 0 30px;padding:0;
display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
}
#page-lotto-software-canada .lsc-hero__tags li{
padding:9px 18px;border-radius:5px;font-size:16px;font-weight:600;
background:rgba(250,246,238,.08);border:1px solid rgba(250,246,238,.18);
color:#f4ede0;
}
/* ---- intro band: ticket-framed visual + prose ---- */
#page-lotto-software-canada .lsc-intro__grid{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
gap:clamp(28px,4vw,60px);align-items:center;
}
#page-lotto-software-canada .lsc-ticket{
position:relative;background:var(--lsc-paper);border:1px solid var(--lsc-line);
border-radius:12px;padding:14px;box-shadow:0 14px 34px rgba(35,26,10,.13);
/* Stacked cap. Uncapped, the frame filled the single-column track: at a 960px
viewport the art rendered 853x830 above a 168px prose block -- a worse
imbalance than the two-column case. Does not bind at 390px, where the
column is already narrower than this, so phone layout is unchanged. */
max-width:420px;margin-inline:auto;
}
#page-lotto-software-canada .lsc-ticket::before,
#page-lotto-software-canada .lsc-ticket::after{
content:"";position:absolute;top:50%;width:24px;height:24px;border-radius:50%;
background:var(--lsc-kraft);border:1px solid var(--lsc-line);
transform:translateY(-50%);
}
#page-lotto-software-canada .lsc-ticket::before{left:-13px;clip-path:inset(0 0 0 50%);}
#page-lotto-software-canada .lsc-ticket::after{right:-13px;clip-path:inset(0 50% 0 0);}
#page-lotto-software-canada .lsc-ticket img{display:block;width:100%;height:auto;border-radius:6px;}
#page-lotto-software-canada .lsc-intro__prose p{margin:0;font-size:clamp(17px,1.25vw,19px);color:var(--lsc-text);}
#page-lotto-software-canada .lsc-intro__prose p + p{margin-top:16px;}
/* ---- hire band: readout panel + figure ---- */
#page-lotto-software-canada .lsc-hire__grid{
display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
gap:clamp(28px,4vw,56px);align-items:center;
}
#page-lotto-software-canada .lsc-hire__fig{margin:0;}
#page-lotto-software-canada .lsc-hire__fig img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--lsc-line-dk);}
/* ---- stub list (certified experts) ---- */
#page-lotto-software-canada .lsc-stubs{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;
}
#page-lotto-software-canada .lsc-stubs>li:first-child{grid-column:1/-1;}
#page-lotto-software-canada .lsc-stub{
position:relative;background:#fff;border:1px solid var(--lsc-line);
border-left:4px solid var(--lsc-amber);border-radius:10px;
padding:26px 28px 26px 30px;height:100%;
transition:transform .16s ease,box-shadow .16s ease;
}
#page-lotto-software-canada .lsc-stub:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(35,26,10,.12);}
#page-lotto-software-canada .lsc-stub__h{
display:flex;align-items:center;gap:12px;margin:0 0 12px;
font-size:21px;font-weight:800;letter-spacing:-.01em;color:var(--lsc-ink);
}
#page-lotto-software-canada .lsc-stub__h img{width:22px;height:22px;flex:0 0 auto;}
#page-lotto-software-canada .lsc-stub p{margin:0;color:var(--lsc-text-2);}
/* ---- readout panels (why businesses choose) ---- */
#page-lotto-software-canada .lsc-panels{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
}
#page-lotto-software-canada .lsc-panel{
background:var(--lsc-ink);color:#f4ede0;border-radius:12px;height:100%;
padding:28px 28px 30px;border:1px solid var(--lsc-ink-3);
transition:border-color .16s ease,transform .16s ease;
}
#page-lotto-software-canada .lsc-panel:hover{border-color:var(--lsc-amber);transform:translateY(-3px);}
#page-lotto-software-canada .lsc-panel__h{
margin:0 0 14px;padding:0 0 12px;border-bottom:2px dashed var(--lsc-line-dk);
font-size:20px;font-weight:800;color:var(--lsc-amber-lt);
letter-spacing:.02em;text-transform:uppercase;
}
#page-lotto-software-canada .lsc-panel p{margin:0;color:rgba(250,246,238,.86);}
/* ---- collaborate band ---- */
#page-lotto-software-canada .lsc-collab{
display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
gap:clamp(28px,4vw,56px);align-items:center;
}
#page-lotto-software-canada .lsc-collab__fig{margin:0;}
#page-lotto-software-canada .lsc-collab__fig img{
display:block;width:100%;height:auto;border-radius:12px;
border:3px solid rgba(255,255,255,.22);
}
/* ---- editorial (top-notch) ---- */
#page-lotto-software-canada .lsc-ed{max-width:900px;}
#page-lotto-software-canada .lsc-ed p{
margin:0 0 22px;font-size:clamp(17px,1.25vw,19px);color:var(--lsc-text);
padding-left:22px;border-left:3px solid var(--lsc-kraft-2);
}
#page-lotto-software-canada .lsc-ed p:first-of-type{border-left-color:var(--lsc-teal);font-weight:500;}
#page-lotto-software-canada .lsc-ed p:last-child{margin-bottom:0;}
/* ---- FAQ ---- */
#page-lotto-software-canada .lsc-faq{max-width:900px;margin-inline:auto;}
#page-lotto-software-canada .lsc-faq details{
border:1px solid var(--lsc-ink-3);border-radius:10px;background:var(--lsc-ink-2);
margin:0 0 14px;overflow:hidden;
}
#page-lotto-software-canada .lsc-faq details[open]{border-color:var(--lsc-amber);}
#page-lotto-software-canada .lsc-faq summary{
display:flex;align-items:flex-start;gap:16px;cursor:pointer;list-style:none;
padding:20px 24px;min-height:52px;transition:background-color .14s ease;
}
#page-lotto-software-canada .lsc-faq summary::-webkit-details-marker{display:none;}
#page-lotto-software-canada .lsc-faq summary:hover{background:var(--lsc-ink-3);}
#page-lotto-software-canada .lsc-faq summary:focus-visible{outline:3px solid var(--lsc-amber);outline-offset:-3px;}
#page-lotto-software-canada .lsc-faq__q{margin:0;font-size:19px;font-weight:700;color:#fff;flex:1;line-height:1.45;}
#page-lotto-software-canada .lsc-faq__sign{
flex:0 0 auto;width:26px;height:26px;margin-top:2px;border-radius:5px;
background:var(--lsc-amber);color:#1a1206;font-size:20px;font-weight:800;
line-height:26px;text-align:center;
}
#page-lotto-software-canada .lsc-faq details[open] .lsc-faq__sign{background:var(--lsc-paper);}
#page-lotto-software-canada .lsc-faq__a{margin:0;padding:0 24px 22px 66px;color:rgba(250,246,238,.86);}
/* ---- stories ---- */
#page-lotto-software-canada .lsc-stories{
list-style:none;margin:0 0 26px;padding:0;
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
}
#page-lotto-software-canada .lsc-story{
background:#fff;border:1px solid var(--lsc-line);border-radius:12px;
overflow:hidden;height:100%;display:flex;flex-direction:column;
}
#page-lotto-software-canada .lsc-vid{
position:relative;display:block;width:100%;padding:0;border:0;
background:var(--lsc-ink);cursor:pointer;aspect-ratio:16/10;
}
#page-lotto-software-canada .lsc-vid img{
display:block;width:100%;height:100%;object-fit:cover;
transition:opacity .16s ease;
}
#page-lotto-software-canada .lsc-vid:hover img{opacity:.8;}
#page-lotto-software-canada .lsc-vid:focus-visible{outline:3px solid var(--lsc-teal);outline-offset:-3px;}
#page-lotto-software-canada .lsc-vid__play{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:58px;height:58px;border-radius:50%;background:var(--lsc-amber);
color:#1a1206;display:flex;align-items:center;justify-content:center;
box-shadow:0 6px 18px rgba(0,0,0,.4);transition:background-color .16s ease;
}
#page-lotto-software-canada .lsc-vid:hover .lsc-vid__play{background:var(--lsc-amber-lt);}
#page-lotto-software-canada .lsc-story__frame{display:block;width:100%;aspect-ratio:16/10;border:0;}
#page-lotto-software-canada .lsc-story blockquote{
margin:0;padding:22px 24px 26px;color:var(--lsc-text-2);flex:1;
border-top:2px dashed var(--lsc-line);
}
#page-lotto-software-canada .lsc-more{font-size:17px;margin:0;}
/* ---- area we serve ---- */
#page-lotto-software-canada .lsc-places{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;
}
#page-lotto-software-canada .lsc-place{
background:var(--lsc-paper);border:1px solid var(--lsc-line);border-radius:10px;
padding:24px 22px;height:100%;
}
#page-lotto-software-canada .lsc-place__h{
display:flex;align-items:center;gap:10px;margin:0 0 10px;
font-size:18px;font-weight:800;letter-spacing:.06em;color:var(--lsc-ink);
}
#page-lotto-software-canada a.lsc-place__tel{
display:inline-block;margin:0 0 10px;font-size:17px;font-weight:700;
color:var(--lsc-teal);text-decoration:underline;text-underline-offset:3px;
transition:color .14s ease;
}
#page-lotto-software-canada a.lsc-place__tel:hover{color:var(--lsc-teal-dk);text-decoration:underline;}
#page-lotto-software-canada a.lsc-place__tel:focus-visible{outline:3px solid var(--lsc-teal);outline-offset:2px;}
#page-lotto-software-canada .lsc-place p{margin:0;font-size:16px;color:var(--lsc-text-2);}
/* ---- CTA modal ---- */
#page-lotto-software-canada .lsc-modal{
position:fixed;inset:0;z-index:2147483000;display:none;
align-items: flex-start;justify-content:center;padding:100px 20px 20px 20px; overflow-y: auto;
background:rgba(15,12,8,.72);
}
#page-lotto-software-canada .lsc-modal.is-open{display:flex;}
#page-lotto-software-canada .lsc-modal__box{
position:relative;width:100%;max-width:640px;max-height:92vh;overflow:auto;
background:var(--lsc-paper);border-radius:14px;padding:46px 12px 12px;
box-shadow:0 26px 70px rgba(0,0,0,.5);
}
#page-lotto-software-canada .lsc-modal__x{
position:absolute;top:10px;right:10px;width:40px;height:40px;
display:flex;align-items:center;justify-content:center;
border:1px solid var(--lsc-line);border-radius:8px;background:#fff;
color:var(--lsc-ink);cursor:pointer;transition:background-color .14s ease;
}
#page-lotto-software-canada .lsc-modal__x:hover{background:var(--lsc-kraft);}
#page-lotto-software-canada .lsc-modal__x:focus-visible{outline:3px solid var(--lsc-teal);outline-offset:2px;}
#page-lotto-software-canada .lsc-modal iframe{
display:block;width:100%;min-height:860px;border:0;background:var(--lsc-paper);
}
/* ---- responsive ---- */
/* Intro art sized against the copy beside it, not against its grid track.
The frame inherited the full 540px column, rendering the art 511x497 next to
a 252px-tall, 102-word prose column -- 1.97x the height of its own content.
Scoped to min-width:981px on purpose: below that the grid collapses to one
column, the art stacks ABOVE the prose, and there is no adjacent content to
balance against -- capping it there would shrink an image that was never the
problem. */
@media (min-width:981px){
#page-lotto-software-canada .lsc-ticket{max-width:clamp(260px,30vw,340px);margin-inline:auto;}
}
@media (max-width:980px){
#page-lotto-software-canada .lsc-intro__grid,
#page-lotto-software-canada .lsc-hire__grid,
#page-lotto-software-canada .lsc-collab{grid-template-columns:minmax(0,1fr);}
#page-lotto-software-canada .lsc-places{grid-template-columns:repeat(2,minmax(0,1fr));}
#page-lotto-software-canada .lsc-stories{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:720px){
#page-lotto-software-canada .lsc-stubs,
#page-lotto-software-canada .lsc-panels{grid-template-columns:minmax(0,1fr);}
#page-lotto-software-canada .lsc-stubs>li:first-child{grid-column:auto;}
#page-lotto-software-canada .lsc-btn{width:100%;}
#page-lotto-software-canada .lsc-act{gap:16px;}
#page-lotto-software-canada .lsc-faq__a{padding-left:24px;}
#page-lotto-software-canada .lsc-ticket::before,
#page-lotto-software-canada .lsc-ticket::after{display:none;}
}
@media (max-width:480px){
#page-lotto-software-canada .lsc-places{grid-template-columns:minmax(0,1fr);}
#page-lotto-software-canada .lsc-ed p{padding-left:16px;}
#page-lotto-software-canada .lsc-modal__box{padding:44px 6px 6px;}
}
@media (prefers-reduced-motion:reduce){
#page-lotto-software-canada *,
#page-lotto-software-canada *::before,
#page-lotto-software-canada *::after{transition-duration:.01ms !important;}
}
/* ── Built visual replacing collaborate-bg.webp ───────────────────────────
The figure has no fixed aspect ratio, so the stock backdrop collapsed to a
6px-tall sliver at desktop width — which is why the section read as broken.
An inline SVG with a viewBox scales correctly at every width. */
#page-lotto-software-canada .lsc-art{ display:block; width:100%; height:auto; }