/* 2 MAN PIZZA: the public site's one stylesheet (homepage, 404, /privacy,
   /sms-terms).

   Carried over from the v1 site (2manpizza.com, src/app/globals.css at
   f660f2f) as it ships in production: the same tokens, the same one type
   size and weight, the same bars, loader and entrance. Only the rules these
   pages use are kept. Everything is Helvetica Neue: no webfonts are loaded,
   so there is nothing to licence and nothing to wait for.

   Every colour is one of the tokens below, so light mode is a block of
   overrides: prefers-color-scheme by default, :root[data-theme] when the
   visitor has chosen (set before first paint by /theme.js). */

:root{--bg:#050505;--text:#e6e6e6;--dim:#5e5e5e;--faint:#3f3f3f;--hair:#1e1e1e;--mark:#e03b21;--live:#36c96d;--size:13px;--tracking:.02em;--line:1.75;--gap:1.55rem;--pad:clamp(20px,4vw,40px);--sans:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif}
@media (prefers-color-scheme:light){
  :root:not([data-theme=dark]){--bg:#f2f1ee;--text:#0b0b0b;--dim:#6f6f6d;--faint:#a3a29e;--hair:#d9d7d1;--mark:#c8300f;--live:#1c8f4b}
}
:root[data-theme=light]{--bg:#f2f1ee;--text:#0b0b0b;--dim:#6f6f6d;--faint:#a3a29e;--hair:#d9d7d1;--mark:#c8300f;--live:#1c8f4b}
*,:after,:before{box-sizing:border-box;margin:0;padding:0}
::selection{background:var(--text);color:var(--bg)}
body,html{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:var(--size);font-weight:400;letter-spacing:var(--tracking);line-height:var(--line);text-transform:uppercase;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none}
button,input{font:inherit;letter-spacing:inherit;color:inherit}
canvas{display:block}
.t{font-size:var(--size);letter-spacing:var(--tracking);line-height:var(--line)}
.dim{color:var(--dim)}
.mark{color:var(--mark)}
.num{font-feature-settings:"tnum";font-variant-numeric:tabular-nums}
.stack{min-height:100%;justify-content:center;gap:var(--gap);padding:calc(var(--pad) * 2.6) var(--pad) calc(var(--pad) * 3.6);text-align:center}
.group,.stack{display:flex;flex-direction:column;align-items:center}
.clock,.foot{position:fixed;left:var(--pad);right:var(--pad);z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;grid-gap:1.5em;gap:1.5em;font-size:var(--size);line-height:var(--line);color:var(--dim)}
.clock{top:var(--pad);pointer-events:none}
.clock>:first-child{justify-self:start}
.clock>:last-child{justify-self:end}
.clock a{pointer-events:auto}
.link{position:relative;display:inline-block;transition:color .3s ease}
.link:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.link:hover{color:var(--text)}
.link:hover:after{transform:scaleX(1);transform-origin:left}
.brk{color:var(--dim);transition:transform .45s cubic-bezier(.2,.8,.2,1),color .3s}
.act{background:none;border:0;cursor:pointer;display:inline-flex;gap:.7em;padding:2px 0}
.act:hover .brk{color:var(--text)}
.act:hover .brk--l{transform:translateX(-4px)}
.act:hover .brk--r{transform:translateX(4px)}
.field{background:none;border:0;padding:9px 2px;outline:none;text-transform:none;letter-spacing:.04em;width:min(74vw,290px);text-align:center;transition:color .3s ease}
.field::placeholder{color:var(--dim);text-transform:uppercase;letter-spacing:var(--tracking);transition:color .3s ease}
.field:focus::placeholder{color:var(--faint)}
.err,.say{text-transform:none;letter-spacing:.005em}
.err{color:var(--text)}
.rise{animation:rise .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.stack>.rise:first-child{animation-delay:.02s}
.stack>.rise:nth-child(2){animation-delay:.09s}
.stack>.rise:nth-child(3){animation-delay:.16s}
.stack>.rise:nth-child(4){animation-delay:.23s}
.stack>.rise:nth-child(5){animation-delay:.3s}
.stack>.rise:nth-child(6){animation-delay:.37s}
.stack>.rise:nth-child(7){animation-delay:.44s}
#loader{position:fixed;inset:0;z-index:50;background:var(--bg);display:grid;place-items:center;transition:opacity .45s cubic-bezier(.4,0,.2,1)}
#loader[data-out="1"]{opacity:0;pointer-events:none}
.loader__canvas{width:min(58vmin,240px);aspect-ratio:1}
.loader__meta{position:fixed;left:50%;transform:translateX(-50%);bottom:clamp(26px,9vh,74px);display:flex;align-items:center;gap:1.1em;color:var(--dim);white-space:nowrap}
.foot{bottom:var(--pad)}
.foot>:first-child{justify-self:start}
.foot>:last-child{justify-self:end}
@media (max-width:560px){
  :root{--gap:1.35rem}
  .clock,.foot{font-size:11px;gap:.9em}
  .foot{gap:.75em}
  .foot>:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media (max-width:380px){
  .clock,.foot{font-size:10px;gap:.55em}
}
.clock,.foot,.stack>*{transition:opacity .55s ease}
.stack--tight{gap:1.05rem}
.stack--bare{gap:.62rem}
.stack{padding-top:calc(var(--pad) * 2.6);padding-bottom:calc(var(--pad) * 4.2)}
@media (max-width:560px){
  .stack{padding-bottom:calc(var(--pad) * 5.4)}
}
.clock:before,.foot:before{content:"";position:absolute;left:calc(var(--pad) * -1);right:calc(var(--pad) * -1);height:calc(100% + var(--pad) * 1.7);z-index:-1;pointer-events:none}
.clock:before{top:calc(var(--pad) * -1);background:linear-gradient(to bottom,var(--bg) 62%,transparent)}
.foot:before{bottom:calc(var(--pad) * -1);background:linear-gradient(to top,var(--bg) 62%,transparent)}
.makers{color:inherit;transition:color .3s ease}
.makers:hover{color:var(--text)}
.clock__end{display:inline-flex;align-items:baseline;gap:.75em;justify-self:end;pointer-events:auto}
.themer{position:relative;display:inline-flex;align-items:center;justify-content:center;width:10px;height:10px;color:var(--dim);background:none;border:0;padding:0;cursor:pointer;opacity:0;transition:opacity .3s ease,color .3s ease;transform:translateY(.08em)}
.themer:before{content:"";position:absolute;inset:-7px}
.clock__end:hover .themer,.themer:focus-visible{opacity:1}
.themer:hover{color:var(--text)}
@media (hover:none){
  .themer{opacity:.26}
  .themer:active{opacity:1}
}
.say--small{font-size:11px}
.vh{position:absolute;top:0;left:0;width:1px;height:1px;padding:0!important;margin:-1px!important;border:0;overflow:hidden;-webkit-clip-path:inset(50%);clip-path:inset(50%);white-space:nowrap}
.slice{aspect-ratio:1;display:block}
.lost{gap:1.15rem}
.lost .slice{margin:.2rem 0 .1rem}
.live{color:var(--live)}
.addr{text-transform:none;letter-spacing:.01em}
.agentnote{max-width:560px;margin:0 auto;padding:0 var(--pad) calc(var(--pad) * 4);font-size:11px;line-height:1.7;color:var(--faint);text-align:left}
.agentnote strong{font-weight:400;color:var(--dim)}
.agentnote a,.agentnote code{color:var(--dim);word-break:break-all;font-family:inherit}
.prose{max-width:620px;margin:0 auto;padding:calc(var(--pad) * 2.6) var(--pad) calc(var(--pad) * 4);display:flex;flex-direction:column;gap:1rem}
.prose h1,.prose h2{font-size:var(--size);font-weight:400;text-transform:uppercase;letter-spacing:var(--tracking)}
.prose h2{margin-top:1.2rem;color:var(--dim)}
.prose ul{padding-left:1.1em;display:flex;flex-direction:column;gap:.35rem}
.prose a{text-decoration:underline;-webkit-text-decoration-color:var(--hair);text-decoration-color:var(--hair);text-underline-offset:3px}
.askagent{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7em}
.askagent p{margin:0}
.invite__draft{max-width:34em;font-size:.85em;line-height:1.45;color:var(--dim);text-transform:none;letter-spacing:0;-webkit-user-select:text;user-select:text}
button.askagent__url{-webkit-user-select:none;user-select:none}
.askagent__url{display:inline-block;text-decoration:none;font:inherit;color:var(--text);background:none;cursor:pointer;border:1px solid var(--hair);border-radius:3px;padding:.15em .6em;text-transform:none;letter-spacing:.01em;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;transition:border-color .25s ease}
.askagent__url:focus-visible,.askagent__url:hover{border-color:var(--dim);outline:none}

/* ---------- v2: what the v1 components did inline ----------
   The pages are static HTML under a CSP with no 'unsafe-inline', so what
   v1 set with style props and React state lives here instead. */

[hidden]{display:none!important}

/* The loader exists only for script to run. /theme.js marks <html> with
   .js before first paint, and .seen once the loader has played in this
   session, so a page without script, or a second visit, never shows it. A
   last resort fades it out by itself if site.js never arrives. */
html:not(.js) #loader,html.seen #loader{display:none}
#loader{animation:loader-giveup .45s ease 6s forwards}
@keyframes loader-giveup{to{opacity:0;visibility:hidden;pointer-events:none}}

/* Notify me: one tap opens the field. Without script the field is simply
   there and posts as a plain form. */
html.js .notify:not(.is-open){display:none}
html:not(.js) .notify-open{display:none}
.notify{gap:.4rem}
.notify .field{padding:4px 2px;line-height:1.3}
.notify-row{display:flex;gap:2.2em;justify-content:center;align-items:baseline}
.notify-row[hidden]{display:none}
.notify-row a.act{text-transform:none}
.notify .act:disabled{cursor:default}
/* The honeypot: present for form fillers, absent for people. */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* The agent address must stay selectable when copying is not possible. */
.askagent__url{-webkit-user-select:text;user-select:text}

/* The 404's turning slice (v1 passed the width as a style prop). */
.slice{width:min(62vmin,280px)}

/* ---------- the policy pages ----------
   v1's .prose, plus the two things the v2 policy text has that v1's did
   not: the SMS summary box a campaign reviewer looks for, and a footer. */
.prose h1 a{text-decoration:none}
.prose strong{font-weight:500}
.prose code{font-family:inherit}
.prose .disclosure{border:1px solid var(--hair);padding:1rem 1.15rem}
.prose footer{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--hair);color:var(--dim)}
