/* Allioo Studio · what the design leaves out and the site needs. Loaded last. */

/* Phone menu: the design hides the links under 980px with nothing in their place. */
.menu-toggle{display:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--s2);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menu-toggle span{display:block;width:14px;height:1.5px;border-radius:2px;background:var(--ink);transition:transform .35s var(--ease)}
.menu-open .menu-toggle span:first-child{transform:translateY(3.25px) rotate(45deg)}
.menu-open .menu-toggle span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.phone-menu{display:none}
@media(max-width:980px){
  .menu-toggle{display:inline-flex}
  .phone-menu{display:flex;flex-direction:column;padding:6px 14px 14px}
  .phone-menu[hidden]{display:none}
  .phone-menu a:not(.b){display:flex;justify-content:space-between;align-items:center;padding:14px 8px;border-bottom:1px solid var(--line2);font-size:18px;font-weight:500;letter-spacing:-.02em;color:var(--ink)}
  .phone-menu-cta{justify-content:center;margin-top:14px}
  .nav.menu-open{border-radius:24px;background:var(--bg);backdrop-filter:blur(18px) saturate(1.4);border-color:var(--line2);box-shadow:0 18px 40px -20px rgba(0,0,0,.35)}
}
@media(max-width:560px){.nav-browse{display:none}}

/* Footer sign-up consent line (the Wix form's subscribe checkbox). */
.ftn-consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink2);line-height:1.4}
.ftn-consent input{margin-top:2px}
.mimg img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:inherit;display:block}

/* Mega menu: liquid glass. Translucent with a heavy blur so the page behind turns into a soft wash
   instead of competing with the menu text. */
.mgin{
  background:color-mix(in oklab,var(--bg) 84%,transparent);
  backdrop-filter:blur(32px) saturate(180%);
  -webkit-backdrop-filter:blur(32px) saturate(180%);
  border-color:rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 30px 70px -30px rgba(0,0,0,.35);
  isolation:isolate;
}
.mgin:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(150deg,rgba(255,255,255,.45),rgba(255,255,255,0) 38%,rgba(255,255,255,0) 62%,rgba(255,255,255,.2))}
[data-theme=dark] .mgin{background:color-mix(in oklab,var(--bg) 80%,transparent);border-color:rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 70px -30px rgba(0,0,0,.7)}
[data-theme=dark] .mgin:before{display:none}
@supports not (backdrop-filter:blur(1px)){.mgin{background:var(--bg)}}

/* Home catalog: new templates and the date of the latest one. */
.hs-h-r{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.hs-h-r .lead{margin:0}
.fresh{font-size:13.5px;color:var(--ink2)}

/* A backdrop-filter on the header itself makes it the backdrop for everything inside it, so the
   mega menu's own blur saw nothing. Put the header's glass on a pseudo-element instead. */
header.nav.stuck,header.nav.menu-open{backdrop-filter:none;-webkit-backdrop-filter:none;background:none}
header.nav.stuck:before,header.nav.menu-open:before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:color-mix(in oklab,var(--bg) 78%,transparent);
  backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);
}
header.nav.menu-open:before{background:var(--bg)}
/* Small text in the menu stays readable on glass (AA on the blurred backdrop). */
.mgin .mcol a span,.mgin .mh,.mgin .mfeat>span,.mgin .mnote span{color:var(--ink2)}
.mgin .mh{font-weight:500}

/* WCAG 2.2 AA: the design's --ink3 is 3.2:1 on white and 3.9:1 on its dark background; these are 5.5:1 and 5.8:1.
   The amber status pills (#A86512 on its tint) were 4.1:1. */
:root{--ink3:#666970}
[data-theme=dark]{--ink3:#898C93}
.hl-st.pe,.hs-p.wt,.hs-tile .tg span{color:#8A5009}
[data-theme=dark] .hl-st.pe,[data-theme=dark] .hs-p.wt,[data-theme=dark] .hs-tile .tg span{color:#E0A24A}

/* A visible keyboard focus everywhere (the design styles none; several inputs set outline:none). */
:focus-visible{outline:2px solid var(--blue)!important;outline-offset:2px}
.mega a:focus-visible{outline-offset:-2px}

/* Reduced motion: whatever the design's own rules missed settles at once. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
[data-theme=dark] .hs-p.bl{color:#8FAAFF}
[data-theme=dark] .cur b,[data-theme=dark] .sel .tb,[data-theme=dark] .shot.tag em{background:#3A5BE0}
/* Reflow at 320px: the footer's release-notes block was 36px wider than the screen (a grid item's min-width:auto). */
.ft1>*,.ftn{min-width:0}
.ftn .notify{min-width:0}

/* Mega menu featured template: only the hero of the page (the top of the capture), never the whole tall screenshot. */
.mimg{aspect-ratio:16/10;position:relative;overflow:hidden;display:block}
.mimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}

/* Menu labels: "New" pill (Builds) and "Coming soon" text (Services, footer). No dots. AA in both themes. */
.mcol b .new,.phone-menu .new,.fc .new{font-style:normal;font-size:11px;font-weight:500;letter-spacing:0;line-height:1.4;padding:2px 8px;border-radius:999px;background:var(--blueT);color:var(--blue)}
[data-theme=dark] .mcol b .new,[data-theme=dark] .phone-menu .new,[data-theme=dark] .fc .new{color:#8FAAFF}
.mcol a span .cs{font-style:normal;font-weight:500;color:var(--ink)}
.fc .cs,.phone-menu .cs{font-size:12px;font-weight:500;color:var(--ink2);margin-left:2px}
.phone-menu .cs{margin-left:10px}
/* Footer links on phones and tablets: no hover arrow taking space, labels never break; a "Coming soon" tag drops below its label when the column is narrow. */
@media(max-width:860px){.fc a{flex-wrap:wrap;column-gap:8px;row-gap:2px}.fc .far{display:none}.fc .cs{margin-left:0;white-space:nowrap}}

/* Latest template: a full-height column of the Templates menu with its own heading; the hero fills the column. */
.mlatest{width:340px;min-width:340px}
.mlatest .mfeat{flex:1;min-height:0;width:auto}
.mlatest .mimg{flex:1;aspect-ratio:auto;min-height:150px;margin-bottom:6px;container-type:size}
/* The image fills the column's full height but is scaled so only the hero shows: the capture is cut to about its top third. */
.mlatest .mimg img{position:absolute;top:0;left:0;width:100%;height:auto;max-width:none;object-fit:initial}
.mlatest .mfeat b{margin-top:0}

/* Header on smaller desktops: items stay on one line and tighten before they would wrap. */
.links .nl{white-space:nowrap}
@media(max-width:1240px){.links .nl{padding-inline:10px}.links{gap:0}}
@media(max-width:1100px){.links .nl{padding-inline:8px;font-size:14px}}
.ft4>a{color:var(--ink2)}.ft4>a:hover{color:var(--ink)}

/* More room under the content of every menu panel. */
.mp{padding-bottom:30px}

/* ==== Linear-inspired finish (linear.app homepage, 2026-10-30): palette, faint borders, subtle sheen, type ====
   Dark (the default theme) takes Linear's near-black, soft white and cool grays; cards become dark panels with a 1px
   border and a faint top sheen; corners a little tighter in both themes. No glows: every gradient is a few percent of
   white. Headlines use weight 510 with slightly looser tracking than before, body copy in the cooler gray. */
:root{--r:18px;--rl:26px}
[data-theme=dark]{--bg:#08090A;--s1:#0F1011;--s2:#141516;--s3:#1C1D1F;--ink:#F7F8F8;--ink2:#8A8F98;--ink3:#80858D;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.05);--btn:#F7F8F8;--btnT:#08090A;--sh:0 1px 2px rgba(0,0,0,.4),0 24px 60px -28px rgba(0,0,0,.9);--cardsh:0 18px 40px -26px rgba(0,0,0,.8)}
h1,h2,h3{font-weight:510}
h2{letter-spacing:-.04em}
/* panels: a 1px border and a faint sheen at the top */
[data-theme=dark] :is(.catc:not(.all),.bs-g,.pk-g,.hs-bn,.wc,.ft3,.hs-rv,.tier,.hs-pn){box-shadow:inset 0 0 0 1px var(--line);background-image:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 55%)}
[data-theme=dark] :is(.hs-g,.bs-bki .rw,.pk-ch button){box-shadow:inset 0 0 0 1px var(--line2)}
/* screenshots and windows: a border that fades diagonally, like Linear's frames */
[data-theme=dark] :is(.tpw,.bs-fr,.scw){border-color:rgba(255,255,255,.1)}
/* a soft light behind the hero headline */
[data-theme=dark] .hero{background-image:radial-gradient(60% 45% at 50% 0%,rgba(255,255,255,.055),rgba(255,255,255,0) 70%)}
/* dark-first: the blocks that invert in light mode (black panel, white text) become raised dark panels in dark mode
   instead of white slabs; swapping the two button colours locally keeps their own buttons white */
[data-theme=dark] :is(.own,.tier.hi){--btn:#141516;--btnT:#F7F8F8;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);background-image:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 60%)}
[data-theme=dark] .tier.hi{border-color:rgba(255,255,255,.16)}
[data-theme=dark] .ab-q4 .q.on{background:#1C1D1F;border-color:rgba(255,255,255,.28);color:var(--ink)}[data-theme=dark] .ab-q4 .q.on b{color:var(--ink)}
/* Dark theme contrast (Lighthouse, 2026-11-02): white on the dark-theme blue is 3.9:1 and blue text on its own tint is 4.1:1,
   both under AA for small text. Deeper fill for blue boxes with white text, lighter blue for small blue text. */
[data-theme=dark] .og-f,[data-theme=dark] .o-acc i{background:#3560E0}
[data-theme=dark] .og-f span:last-child{opacity:1}
[data-theme=dark] .opt,[data-theme=dark] .o-dom em,[data-theme=dark] .o-acc em,[data-theme=dark] .plg-r em{color:#7C9BFF}