/*
  Shared OUA tool shell.
  This file owns the fold menu, OUA marks, footer and page entrance for every tool page.
  Tool-specific CSS should not redefine these selectors going forward.
*/
:root{
  --black:#050505;
  --white:#f5f2ea;
  --orange:#ff8440;
  --teal:#0b7f82;
  --teal-deep:#086f72;
  --footer-reveal:118px;
  /* One geometry system for the exposed menu on home + every tool page. */
  --oua-menu-logo-top:clamp(20px,3vw,42px);
  --oua-menu-logo-right:clamp(22px,4vw,64px);
  --oua-menu-logo-width:clamp(74px,7vw,108px);
  --oua-menu-top:clamp(132px,15vh,174px);
  --oua-menu-gap:clamp(16px,2.35vh,28px);
  --oua-cat-height:clamp(128px,16vh,172px);
  --oua-cat-font:clamp(72px,8.6vw,150px);
  --oua-menu-pad:clamp(30px,5.5vw,96px);
}

html,body{scrollbar-width:none;overscroll-behavior-y:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}
body.oua-tool-page{margin:0;min-height:100svh;overflow-x:hidden;background:var(--black);overscroll-behavior-y:none}

/* Prevent a first-paint flash of the raw tool markup before the deferred shell
   script has moved it into .tool-cover. Once JS replaces this wrapper, the
   actual tool content is visible normally inside the animated cover. */
body[data-oua-shell="tool"] > #ouaToolContent{opacity:0!important;pointer-events:none!important}
body.oua-tool-page::before,body.oua-tool-page::after{display:none!important}
body.tool-launching{overflow:hidden}

.oua-tool-scene{position:fixed;inset:0;overflow:hidden;isolation:isolate;z-index:2;background:var(--orange);will-change:transform}
.oua-tool-scene.menu-live .fold-menu,.oua-tool-scene.menu-live .menu-home-brand{pointer-events:auto}
.oua-scroll-track{height:calc(100svh + 430px);pointer-events:none}

.menu-underlay{position:absolute;inset:0;z-index:1;overflow:hidden;background:var(--orange)}
.menu-underlay::after,.tool-cover::after{content:"";position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
.menu-underlay::after{opacity:.065}


/* When a tool is entered from the homepage, the destination first inherits
   the homepage menu palette. The incoming tool cover closes over this layer;
   only once the cover is fully shut does JS remove this class and expose the
   normal orange tool-menu palette underneath. */
.oua-tool-scene.menu-home-colors .menu-underlay{background:var(--teal)}
.oua-tool-scene.menu-home-colors .menu-home-brand{color:var(--orange)}
.oua-tool-scene.menu-home-colors .fold-category-toggle{color:var(--orange)}
.oua-tool-scene.menu-home-colors .fold-category-toggle:hover,
.oua-tool-scene.menu-home-colors .fold-category-toggle:focus-visible,
.oua-tool-scene.menu-home-colors .fold-category.is-open .fold-category-toggle{background:var(--orange);color:var(--teal-deep)}
.oua-tool-scene.menu-home-colors .fold-category-panel-inner{background:var(--orange)}
.oua-tool-scene.menu-home-colors .fold-app-link,
.oua-tool-scene.menu-home-colors .fold-app-empty{border-top-color:rgba(11,127,130,.22);background:var(--orange);color:var(--teal-deep)}
.oua-tool-scene.menu-home-colors .fold-app-link:hover,
.oua-tool-scene.menu-home-colors .fold-app-link:focus-visible{color:var(--teal-deep)}
.oua-tool-scene.menu-home-colors .fold-app-empty{color:rgba(11,127,130,.72)}

.menu-home-brand{position:absolute;top:var(--oua-menu-logo-top);right:var(--oua-menu-logo-right);z-index:4;display:grid;place-items:center;width:var(--oua-menu-logo-width);height:auto;margin:0;padding:0;border:0;background:transparent;color:var(--teal-deep);text-decoration:none;cursor:pointer;pointer-events:none;opacity:1;transition:opacity .16s ease}
.menu-home-brand-svg{display:block;width:100%;height:auto;overflow:visible;fill:currentColor;stroke:none}
.menu-home-brand:hover,.menu-home-brand:focus-visible{color:var(--teal-deep);opacity:.72}
.menu-home-brand:focus-visible{outline:2px solid var(--white);outline-offset:8px}

/* Anchor the menu below the OUA mark. Opening a category must never recenter
   the whole stack upward; its tray expands downward and pushes later categories. */
.fold-menu{position:absolute;left:0;right:0;top:var(--oua-menu-top);z-index:2;transform:none;display:flex;flex-direction:column;gap:var(--oua-menu-gap);width:100%;pointer-events:none;transition:none}
.fold-menu.has-open{transform:none}
.fold-category{width:100%;background:transparent}
.fold-category-toggle{display:flex;align-items:center;justify-content:flex-end;width:100%;min-height:var(--oua-cat-height);margin:0;padding:0 var(--oua-menu-pad);border:0;color:var(--teal-deep);background:transparent;cursor:pointer;text-align:right;font-family:"Arial Black","Avenir Next Heavy","Helvetica Neue",Arial,sans-serif;font-size:var(--oua-cat-font);font-weight:950;line-height:.80;letter-spacing:-.066em;text-transform:uppercase;transition:background .16s ease,color .16s ease}
.fold-category-toggle:hover,.fold-category-toggle:focus-visible,.fold-category.is-open .fold-category-toggle{background:var(--teal-deep);color:var(--orange)}
.fold-category-toggle:focus-visible{outline:2px solid var(--white);outline-offset:-2px}
.fold-category-panel{height:0;overflow:hidden;transition:height .28s cubic-bezier(.2,.8,.2,1)}
.fold-category-panel-inner{height:auto;background:var(--teal-deep)}
.fold-app-link,.fold-app-empty{display:flex;align-items:center;justify-content:flex-end;width:100%;min-height:58px;padding:13px clamp(28px,5.5vw,92px) 14px;border-top:1px solid rgba(255,132,64,.28);background:var(--teal-deep);color:var(--orange);text-align:right;text-decoration:none;font-family:"Arial Black","Avenir Next Heavy","Helvetica Neue",Arial,sans-serif;font-size:clamp(15px,1.55vw,23px);font-weight:900;letter-spacing:-.025em;text-transform:uppercase}
.fold-app-link{transition:opacity .16s ease,color .16s ease}
.fold-app-link:hover,.fold-app-link:focus-visible{color:var(--orange);opacity:.72}
.fold-app-link:focus-visible{outline:2px solid var(--white);outline-offset:-2px}
.fold-app-empty{color:rgba(255,132,64,.78)}

/* Homepage exposed menu: deliberately use the exact same geometry as the
   tool-page underlay. This removes the old almost-matching centered layout. */
.oua-home-scene .menu-home-brand{color:var(--orange)}
.oua-home-scene .menu{position:absolute;left:0;right:0;top:var(--oua-menu-top);z-index:2;transform:none;display:flex;flex-direction:column;gap:var(--oua-menu-gap);width:100%;pointer-events:none;transition:none}
.oua-home-scene.menu-live .fold-menu,.oua-home-scene.menu-live .menu-home-brand{pointer-events:auto}
.oua-home-scene .menu.has-open{transform:none}
.oua-home-scene .category-toggle{min-height:var(--oua-cat-height);padding-left:var(--oua-menu-pad);padding-right:var(--oua-menu-pad);font-size:var(--oua-cat-font)}


/* Home and tool category rows now share the same physical element geometry.
   The homepage DOM also carries the fold-* classes, so these values cannot drift. */
.fold-category,
.oua-home-scene .category-block{width:100%;background:transparent}

.fold-category-toggle,
.oua-home-scene .category-toggle{
  appearance:none;
  -webkit-appearance:none;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  width:100%;
  height:var(--oua-cat-height);
  min-height:var(--oua-cat-height);
  margin:0;
  padding:0 var(--oua-menu-pad);
  border:0;
  box-sizing:border-box;
  text-align:right;
  font-family:"Arial Black","Avenir Next Heavy","Helvetica Neue",Arial,sans-serif;
  font-size:var(--oua-cat-font);
  font-weight:950;
  line-height:.80;
  letter-spacing:-.066em;
  text-transform:uppercase;
}

/* Same geometry, opposite homepage palette. */
.oua-home-scene .fold-category-toggle{color:var(--orange);background:transparent}
.oua-home-scene .fold-category-toggle:hover,
.oua-home-scene .fold-category-toggle:focus-visible,
.oua-home-scene .fold-category.is-open .fold-category-toggle{background:var(--orange);color:var(--teal)}
.oua-home-scene .fold-category-panel-inner{background:var(--orange)}
.oua-home-scene .fold-app-link,
.oua-home-scene .fold-app-empty{background:var(--orange);color:var(--teal);border-top-color:rgba(11,127,130,.22)}
.oua-home-scene .fold-app-link:hover,
.oua-home-scene .fold-app-link:focus-visible{color:var(--teal)}

/* Tool -> Home handoff. The home scene begins completely offscreen over the
   same orange/teal menu field the tool just exposed. Only after the black home
   cover is fully shut does JS remove this state and return Home to teal. */
html.oua-arrive-tool .oua-home-scene,
.oua-home-scene.home-tool-colors{background:var(--orange)}
html.oua-arrive-tool .oua-home-scene .underlay,
.oua-home-scene.home-tool-colors .underlay{background:var(--orange)}
html.oua-arrive-tool .oua-home-scene .menu-home-brand,
.oua-home-scene.home-tool-colors .menu-home-brand{color:var(--teal-deep)}
html.oua-arrive-tool .oua-home-scene .category-toggle,
.oua-home-scene.home-tool-colors .category-toggle{color:var(--teal-deep)}
html.oua-arrive-tool .oua-home-scene .category-toggle:hover,
html.oua-arrive-tool .oua-home-scene .category-toggle:focus-visible,
html.oua-arrive-tool .oua-home-scene .category-block.is-open .category-toggle,
.oua-home-scene.home-tool-colors .category-toggle:hover,
.oua-home-scene.home-tool-colors .category-toggle:focus-visible,
.oua-home-scene.home-tool-colors .category-block.is-open .category-toggle{background:var(--teal-deep);color:var(--orange)}
html.oua-arrive-tool .oua-home-scene .category-panel-inner,
.oua-home-scene.home-tool-colors .category-panel-inner{background:var(--teal-deep)}
html.oua-arrive-tool .oua-home-scene .app-link,
html.oua-arrive-tool .oua-home-scene .app-empty,
.oua-home-scene.home-tool-colors .app-link,
.oua-home-scene.home-tool-colors .app-empty{border-top-color:rgba(255,132,64,.28);color:var(--orange)}
html.oua-arrive-tool .oua-home-scene .app-name,
.oua-home-scene.home-tool-colors .app-name{color:var(--orange)}
html.oua-arrive-tool .oua-home-scene .app-desc,
.oua-home-scene.home-tool-colors .app-desc{color:rgba(255,132,64,.72)}
html.oua-arrive-tool .oua-home-scene .app-empty .app-name,
.oua-home-scene.home-tool-colors .app-empty .app-name{color:rgba(255,132,64,.78)}
html.oua-arrive-tool .oua-home-scene .cover{transform:rotateZ(-90deg)}

.tool-cover{position:absolute;left:-2px;top:-2px;width:205vw;height:calc(100% + 4px);z-index:10;overflow:hidden;transform-origin:2px calc(100% - 2px);will-change:transform;backface-visibility:hidden;background:var(--teal);box-shadow:0 34px 60px rgba(0,0,0,var(--cover-shadow,0)),0 10px 22px rgba(0,0,0,var(--cover-shadow-soft,0))}
.tool-cover::after{z-index:0;opacity:.06}
.tool-cover-inner{position:relative;z-index:1;width:100vw;height:100%;overflow:hidden;background:transparent}
.tool-cover-edge{position:absolute;left:0;bottom:0;z-index:12;width:100%;height:2px;pointer-events:none;background:rgba(245,242,234,.08);box-shadow:0 28px 54px 16px rgba(0,0,0,var(--shadow-alpha,0));opacity:var(--edge-opacity,0)}

.oua-shell-brand{position:absolute!important;left:clamp(20px,3.2vw,48px)!important;top:clamp(18px,2.6vw,34px)!important;right:auto!important;bottom:auto!important;z-index:80!important;display:grid!important;place-items:center!important;width:78px!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;color:var(--orange)!important;cursor:pointer!important;pointer-events:auto!important;line-height:0!important}
.oua-shell-brand .brand-svg{display:block!important;width:100%!important;height:auto!important;overflow:visible!important;fill:currentColor!important;stroke:none!important}
.oua-shell-brand:hover,.oua-shell-brand:focus-visible{color:var(--orange)!important;opacity:.78}
.oua-shell-brand:focus-visible{outline:2px solid var(--white)!important;outline-offset:8px!important}

.oua-footer{position:fixed;left:0;right:0;bottom:0;z-index:0;height:var(--footer-reveal);display:flex;align-items:center;justify-content:flex-end;padding:0 clamp(28px,5.5vw,92px);background:var(--black);border-top:1px solid rgba(255,255,255,.07)}
.oua-footer a{color:var(--white);text-decoration:none;font-size:clamp(16px,1.6vw,24px);font-weight:700;letter-spacing:-.025em}
.oua-footer a:hover,.oua-footer a:focus-visible{color:var(--orange)}
.oua-footer a:focus-visible{outline:2px solid var(--orange);outline-offset:7px}
/* Four familiar tool categories in the reveal footer, not a second list of
   unrelated Home/tool links. The links are in native, crawlable <details> menus. */
.footer.oua-footer,.oua-footer{
  justify-content:space-between;
  gap:clamp(12px,2vw,28px);
}
/* Normally the footer sits behind the folding scene. Raise it only while a
   visitor has expanded a category, so its dropdown can appear above the scene
   without changing the existing reveal/cover behavior. */
.footer.oua-footer:has(.oua-footer-category[open]),
.oua-footer:has(.oua-footer-category[open]){z-index:5}
.oua-footer .oua-footer-tools{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:clamp(10px,1.9vw,28px);
  min-width:0;
}
.oua-footer .oua-footer-category{position:relative;min-width:0}
.oua-footer .oua-footer-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  list-style:none;
  width:max-content;
  max-width:100%;
  cursor:pointer;
  color:var(--white);
  font-family:Inter,ui-sans-serif,system-ui,sans-serif;
  font-size:clamp(12px,1.1vw,16px);
  font-weight:750;
  letter-spacing:-.015em;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.oua-footer .oua-footer-toggle::-webkit-details-marker{display:none}
.oua-footer .oua-footer-toggle::marker{content:''}
.oua-footer .oua-footer-toggle::after{
  content:'+';
  color:var(--orange);
  font-size:1.18em;
  font-weight:700;
  transition:transform .18s ease;
}
.oua-footer .oua-footer-category[open] .oua-footer-toggle,
.oua-footer .oua-footer-toggle:hover{color:var(--orange)}
.oua-footer .oua-footer-category[open] .oua-footer-toggle::after{transform:rotate(45deg)}
.oua-footer .oua-footer-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:5px;border-radius:2px}
.oua-footer .oua-footer-panel{
  position:absolute;
  left:0;
  bottom:calc(100% + 18px);
  z-index:7;
  display:flex;
  flex-direction:column;
  width:max-content;
  min-width:210px;
  max-width:min(300px,calc(100vw - 32px));
  max-height:min(50svh,380px);
  overflow:auto;
  padding:10px;
  border:1px solid rgba(255,132,64,.55);
  border-radius:12px;
  background:var(--black);
  box-shadow:0 15px 44px rgba(0,0,0,.5);
}
.oua-footer .oua-footer-category:nth-child(3) .oua-footer-panel{left:50%;right:auto;transform:translateX(-50%)}
.oua-footer .oua-footer-category:nth-child(4) .oua-footer-panel{left:auto;right:0}
.oua-footer .oua-footer-panel a,
.oua-footer .oua-footer-panel .oua-footer-empty{
  display:block;
  padding:10px 11px;
  color:var(--white);
  font-size:clamp(13px,1.05vw,16px);
  font-weight:700;
  line-height:1.3;
  letter-spacing:0;
  text-decoration:none;
  white-space:normal;
}
.oua-footer .oua-footer-panel a:hover,
.oua-footer .oua-footer-panel a:focus-visible{color:var(--orange);background:rgba(255,132,64,.09);border-radius:5px}
.oua-footer .oua-footer-panel .oua-footer-empty{color:rgba(245,242,234,.6);font-weight:550}
.oua-footer .oua-footer-meta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-shrink:0;
  gap:clamp(12px,1.5vw,22px);
}
.oua-footer .oua-footer-privacy{font-size:clamp(11px,1vw,15px);font-weight:650;letter-spacing:0}
.oua-footer .oua-footer-contact{white-space:nowrap}
@media(max-width:980px){
  .footer.oua-footer,.oua-footer{flex-direction:column;align-items:flex-start;justify-content:center;gap:10px}
  .oua-footer .oua-footer-tools{gap:clamp(12px,3vw,22px)}
  .oua-footer .oua-footer-meta{gap:16px}
  .oua-footer .oua-footer-contact{font-size:clamp(15px,3.2vw,19px)}
}
@media(max-width:400px){
  .oua-footer .oua-footer-tools{gap:clamp(8px,2.3vw,12px)}
  .oua-footer .oua-footer-toggle{font-size:12px;gap:3px}
  .oua-footer .oua-footer-panel{min-width:190px}
}

body.tool-launching .oua-tool-scene,body.tool-launching .oua-footer{pointer-events:none}

@media(max-width:900px){.tool-cover{width:230vw}}
@media(max-width:760px){
  :root{
    --oua-menu-logo-top:18px;
    --oua-menu-logo-right:20px;
    --oua-menu-logo-width:72px;
    --oua-menu-top:clamp(104px,13vh,132px);
    --oua-menu-gap:14px;
    --oua-cat-height:clamp(96px,13.5vh,118px);
    --oua-cat-font:clamp(48px,14vw,72px);
    --oua-menu-pad:22px;
  }
  .tool-cover{width:255vw}
  .oua-shell-brand{left:18px!important;top:16px!important;width:62px!important}
  .fold-menu{transform:none}
  .fold-menu.has-open{transform:none}
  .fold-category-toggle{letter-spacing:-.058em}
  .oua-home-scene .category-toggle{letter-spacing:-.058em}
  .fold-app-link,.fold-app-empty{min-height:52px;padding:11px 22px 12px;font-size:14px}
  .oua-footer{padding-left:22px;padding-right:22px}
}
@media(prefers-reduced-motion:reduce){.tool-cover,.fold-menu,.fold-category-panel{transition:none!important}}