/* The coming-soon page at 3dbuzz.in until go-live (D-261), mock B, "On the print bed", in
docs/design/mocks/coming-soon/. Wide screens: the words on the dotted print bed, "soon." in the
dashed selection box, the shop "printing". Phones have a page of their own in the phone
home's language: the stacked headline, the print bed as a card where a nozzle lays the shop
down layer by layer, the tilted band of what we print, and Chat on WhatsApp held at the
thumb. Everything that moves stands still under reduced motion. The site's colours (02 §2),
written here: this page has no build. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/fonts/bricolage-grotesque.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url('/fonts/dm-sans.woff2') format('woff2-variations');
}
:root {
  --ink: #1c1a17;
  --ink-2: #4a4540;
  --ink-3: #6b645c;
  --paper: #fff8f1;
  --card: #ffffff;
  --line: #efe8df;
  --sand: #f3ece2;
  --buzz: #f47a2a;
  --buzz-deep: #a8420c;
  --peach: #ffe6d4;
  --peach-2: #ffd9bf;
  --night: #26231f;
  --display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --shadow: 0 1px 2px rgb(28 26 23 / 0.06), 0 4px 14px rgb(28 26 23 / 0.06);
  --gutter: 16px;
}
@media (min-width: 768px) {
  :root {
    --gutter: 60px;
  }
}
* {
  box-sizing: border-box;
  margin: 0;
}
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.6 var(--sans);
  overflow-x: clip;
}
a {
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--buzz);
}

/* the app's Logo: 28px in the header, the boxed 3D a little apart from buzz */
.logo {
  font: 800 28px/1 var(--display);
  letter-spacing: -0.04em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.logo .three {
  position: relative;
  display: inline-block;
  padding: 0 0.06em;
  margin-right: 0.12em;
}
.logo svg {
  position: absolute;
  top: -0.08em;
  left: -0.1em;
  width: calc(100% + 0.2em);
  height: calc(100% + 0.2em);
  transform: rotate(-4deg);
  overflow: visible;
}
.logo rect {
  width: 100%;
  height: 100%;
  rx: 0.16em;
  fill: none;
  stroke: currentColor;
  stroke-width: max(0.028em, 1.3px);
  stroke-dasharray: 0.16em 0.08em;
  stroke-linecap: round;
}
.logo .buzz {
  color: var(--buzz-deep);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s;
}
.btn svg,
.icon-btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Google's own four-colour G, the file the admin's Google sign-in uses */
.btn svg.g {
  stroke: none;
}
.btn-ink {
  background: var(--ink);
  color: #fff;
}
.btn-ink:hover {
  background: var(--night);
}
.btn-card {
  background: var(--card);
  box-shadow: var(--shadow);
}
.btn-card:hover {
  background: var(--sand);
}
.btn-sm {
  min-height: 44px;
  padding: 0 18px;
  font-size: 14px;
}
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.eyebrow {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.bed-dots {
  background-color: var(--peach);
  background-image: radial-gradient(
    color-mix(in oklab, var(--ink) 13%, transparent) 1.2px,
    transparent 1.2px
  );
  background-size: 26px 26px;
}
.selected {
  position: relative;
  display: inline-block;
}
.selected svg {
  position: absolute;
  inset: -0.06em -0.12em -0.1em;
  width: calc(100% + 0.24em);
  height: calc(100% + 0.16em);
  transform: rotate(-2deg);
  overflow: visible;
  color: var(--ink);
}
.selected rect {
  width: 100%;
  height: 100%;
  rx: 0.12em;
  fill: none;
  stroke: currentColor;
  stroke-width: 3px;
  stroke-dasharray: 12 8;
  stroke-linecap: round;
}
.bar {
  height: 8px;
  border-radius: 999px;
  background: var(--sand);
  overflow: hidden;
}
.bar i {
  display: block;
  height: 100%;
  width: 87%;
  border-radius: inherit;
  background: var(--buzz);
}
@keyframes march {
  to {
    stroke-dashoffset: -40;
  }
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
@keyframes lay {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@keyframes travel {
  from {
    left: 0;
  }
  to {
    left: 100%;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .selected rect {
    animation: march 1.6s linear infinite;
  }
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px var(--gutter) 0;
}
.phone {
  display: none;
}
main {
  flex: 1;
  display: grid;
}

/* wide screens, as approved */
main > div.wide {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 32px var(--gutter) 40px;
  display: grid;
}
.wide .bed {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  gap: 22px;
  padding: 80px 32px;
  border-radius: 40px;
}
.wide .selected {
  margin-left: 0.14em;
}
.wide h1 {
  font: 800 clamp(4.25rem, 13vw, 10.5rem)/0.9 var(--display);
  letter-spacing: -0.05em;
}
.wide .lead {
  font: 700 clamp(1.375rem, 2.6vw, 2rem)/1.2 var(--display);
  letter-spacing: -0.02em;
  margin-top: 6px;
}
.printing {
  display: grid;
  gap: 8px;
  width: min(100%, 22rem);
  margin-top: 8px;
  padding: 14px 18px;
  border-radius: 20px;
  background: var(--card);
  box-shadow: var(--shadow);
  text-align: left;
  font-size: 14px;
}
.printing p {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.printing strong {
  font-weight: 700;
}
.printing span {
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.wide .body {
  max-width: 36rem;
  color: var(--ink-2);
  font-size: 17px;
}
.wide .actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
}

/* phones: a page of their own */
@media (max-width: 767px) {
  .wide {
    display: none !important;
  }
  .phone {
    display: block;
  }
  header {
    padding: 14px var(--gutter) 0;
  }
  header .icon-btn {
    display: inline-grid;
  }

  main > div.phone {
    display: grid;
    gap: 28px;
    padding: 26px 0 8px;
    overflow-x: clip;
  }
  .hero {
    display: grid;
    gap: 14px;
    padding: 0 var(--gutter);
  }
  .hero h1 {
    display: grid;
    justify-items: start;
    font: 800 4.75rem/0.9 var(--display);
    letter-spacing: -0.055em;
  }
  .hero .selected {
    margin: 0.08em 0 0 0.06em;
  }
  .hero .selected svg {
    transform: rotate(-3deg);
  }
  .hero .lead {
    font: 700 1.625rem/1.12 var(--display);
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  .card-bed {
    margin: 0 var(--gutter);
    padding: 18px 18px 20px;
    border-radius: 28px;
    display: grid;
    gap: 18px;
  }
  .card-bed .label {
    justify-self: start;
    padding: 6px 14px;
    border: 1.5px solid var(--ink);
    border-radius: 999px;
    background: var(--card);
    font-size: 14px;
    font-weight: 600;
    transform: rotate(-2deg);
  }
  /* the shop printing: a nozzle over a block laid down layer by layer on the bed */
  .print {
    position: relative;
    display: grid;
    justify-items: center;
    padding-top: 34px;
  }
  .block {
    width: 70%;
    display: grid;
    gap: 3px;
  }
  .block i {
    display: block;
    height: 13px;
    border-radius: 5px;
    background: var(--buzz);
  }
  .block i:nth-child(even) {
    background: color-mix(in oklab, var(--buzz) 88%, var(--buzz-deep));
  }
  .block .top {
    position: relative;
    height: 13px;
  }
  .block .top i {
    width: 62%;
  }
  .nozzle {
    position: absolute;
    bottom: 11px;
    left: 62%;
    width: 30px;
    height: 38px;
    transform: translateX(-50%);
  }
  .nozzle::before {
    content: '';
    position: absolute;
    inset: 0 0 12px;
    border-radius: 7px;
    background: var(--ink);
  }
  .nozzle::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 12px;
    height: 12px;
    transform: translateX(-50%);
    background: var(--ink);
    clip-path: polygon(0 0, 100% 0, 60% 100%, 40% 100%);
  }
  .plate {
    width: 86%;
    height: 6px;
    margin-top: 4px;
    border-radius: 999px;
    background: var(--ink);
  }
  @media (prefers-reduced-motion: no-preference) {
    .block .top i {
      animation: lay 2.8s linear infinite;
    }
    .nozzle {
      animation: travel 2.8s linear infinite;
    }
  }
  .progress {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 18px;
    background: var(--card);
    box-shadow: var(--shadow);
    font-size: 14px;
  }
  .progress p {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }
  .progress strong {
    font-weight: 700;
  }
  .progress span {
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
  }

  .band {
    margin: 6px -12px;
    padding: 14px 0;
    background: var(--ink);
    color: #fff;
    transform: rotate(-3deg);
    overflow: hidden;
    font: 700 1.25rem/1 var(--display);
    letter-spacing: -0.01em;
    white-space: nowrap;
  }
  .band .row {
    display: flex;
    gap: 14px;
    width: max-content;
    padding-left: 24px;
  }
  .band b {
    color: var(--buzz);
    font-weight: 700;
  }
  @media (prefers-reduced-motion: no-preference) {
    .band .row {
      animation: marquee 32s linear infinite;
    }
  }

  .till {
    display: grid;
    gap: 12px;
    padding: 0 var(--gutter);
  }
  .till h2 {
    font: 800 2rem/1.02 var(--display);
    letter-spacing: -0.035em;
  }
  .till p {
    color: var(--ink-2);
  }
  .till .pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 6px;
  }
  .till .pair .btn {
    padding: 0 12px;
  }
  .till > .btn {
    width: 100%;
  }

  /* the last thing on the page, held at the bottom of the screen while scrolling */
  .float {
    position: sticky;
    z-index: 10;
    bottom: calc(16px + env(safe-area-inset-bottom));
    margin: 0 var(--gutter) calc(16px + env(safe-area-inset-bottom));
    display: flex;
    box-shadow: 0 10px 30px rgb(28 26 23 / 0.22);
    border-radius: 999px;
  }
  .float .btn {
    flex: 1;
    min-height: 56px;
    font-size: 17px;
  }
}

/* a legal page or the FAQ: one readable column (D-263) */
.doc {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 56px var(--gutter) 64px;
  display: grid;
  align-content: start;
  gap: 18px;
}
/* the chips' row scrolls within the column rather than widening it */
.doc > * {
  min-width: 0;
}
.doc h1 {
  font: 800 clamp(2.75rem, 6vw, 4.25rem) / 0.95 var(--display);
  letter-spacing: -0.045em;
}
.doc .updated,
.doc .lead-in {
  color: var(--ink-3);
  font-size: 14px;
}
.doc .lead-in {
  color: var(--ink-2);
  font-size: 17px;
}
.markdown {
  color: var(--ink-2);
}
.markdown > :first-child {
  margin-top: 0;
}
.markdown h2,
.markdown h3,
.markdown h4 {
  color: var(--ink);
  font-family: var(--display);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 1.6em 0 0.4em;
}
.markdown h2 {
  font-size: 1.5rem;
  font-weight: 800;
}
.markdown h3,
.markdown h4 {
  font-size: 1.15rem;
  font-weight: 700;
}
.markdown p,
.markdown ul,
.markdown ol,
.markdown blockquote {
  margin: 0.8em 0;
}
.markdown ul,
.markdown ol {
  padding-left: 1.3em;
}
.markdown blockquote {
  padding-left: 14px;
  border-left: 3px solid var(--line);
  color: var(--ink-3);
}
.markdown a {
  color: var(--buzz-deep);
}
.faq-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 10px;
  padding: 0;
  list-style: none;
}
.faq-chips a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.faq-chips a:hover {
  background: var(--sand);
}
.faq-group {
  display: grid;
  gap: 4px;
  margin-top: 18px;
  scroll-margin-top: 24px;
}
.faq-group h2 {
  font: 800 1.5rem / 1.15 var(--display);
  letter-spacing: -0.02em;
  padding-bottom: 6px;
}
.faq-group details {
  border-bottom: 1px solid var(--line);
}
.faq-group details:first-of-type {
  border-top: 1px solid var(--line);
}
.faq-group summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 0;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq-group summary::-webkit-details-marker {
  display: none;
}
.faq-group summary::before {
  content: '';
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-left: 6px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  transform: translateY(-1px);
}
.faq-group details[open] summary::before {
  transform: translateY(-1px) rotate(90deg);
}
.faq-group details .markdown {
  padding: 0 0 18px 18px;
}
.wonder {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin-top: 28px;
  padding: 28px;
  border-radius: 28px;
  background: var(--card);
}
.wonder h2 {
  font: 800 1.5rem / 1.15 var(--display);
  letter-spacing: -0.02em;
}
.wonder p {
  color: var(--ink-2);
}
.wonder .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}
@media (max-width: 767px) {
  .doc {
    padding-top: 28px;
    padding-bottom: 32px;
  }
  .faq-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter));
    padding: 2px var(--gutter);
    scrollbar-width: none;
  }
  .faq-chips li {
    flex-shrink: 0;
  }
  .wonder {
    padding: 22px;
  }
  .wonder .actions {
    display: grid;
    width: 100%;
  }
}

/* The footer, as the app's (04, SiteFooter): on wide screens "Got an idea? Let's print it." with
   its two buttons over a rule, the pages on the left and the contact line on the right, then the
   giant wordmark; on phones the "bzzz." sign-off, the contact line and the pages. Its pages are
   the coming-soon page's own (D-263, D-264). */
footer {
  overflow: hidden;
  padding: clamp(3.5rem, 2.2rem + 5.333vw, 7rem) var(--gutter) 0;
}
footer div.wide {
  max-width: 82.5rem;
  margin: 0 auto;
}
.foot-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 32px;
  border-bottom: 2px solid var(--ink);
}
.foot-cta h2 {
  font: 800 2.5rem / 1.25 var(--display);
  letter-spacing: -0.04em;
}
.foot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.btn-lg {
  min-height: 54px;
  padding: 0 28px;
  font-size: clamp(1rem, 0.977rem + 0.095vw, 1.0625rem);
}
.foot-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0;
  color: var(--ink-2);
  font-size: clamp(0.8125rem, 0.789rem + 0.095vw, 0.875rem);
}
.links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.links a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition:
    color 0.18s,
    text-decoration-color 0.18s;
}
.links a:hover {
  color: var(--buzz-deep);
  text-decoration-color: currentColor;
}
.links a[aria-current='page'] {
  color: var(--ink);
  font-weight: 600;
}
/* decoration: its letters' box reaches over the row above, so clicks go through it (Q35) */
.giant {
  margin: 0;
  color: var(--buzz-deep);
  font: 800 clamp(7.5rem, 21vw, 18.75rem) / 0.78 var(--display);
  letter-spacing: -0.04em;
  text-align: center;
  user-select: none;
  pointer-events: none;
}
@media (max-width: 767px) {
  footer {
    padding-top: clamp(3.5rem, 2.2rem + 5.333vw, 7rem);
  }
  footer div.phone {
    display: grid;
    justify-items: center;
    gap: 12px;
    padding-bottom: 24px;
    text-align: center;
  }
  footer .bzzz {
    color: var(--buzz-deep);
    font: 800 4.75rem / 0.85 var(--display);
    letter-spacing: -0.05em;
  }
  footer .phone .contact {
    color: var(--ink-3);
    font-size: clamp(0.6875rem, 0.664rem + 0.095vw, 0.75rem);
  }
  footer .phone .links {
    justify-content: center;
    color: var(--ink-2);
    font-size: clamp(0.8125rem, 0.789rem + 0.095vw, 0.875rem);
  }
}

/* "we take orders on WhatsApp", marked as if by hand (D-264): marker strokes in the brand's orange
   behind the words, wherever they wrap (each line's part gets its own); drawn in once from the
   left, still under reduced motion */
.scribble {
  color: var(--ink);
  background: url('/scribble.svg') left center / 100% 100% no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0.05em 0.18em;
  margin: 0 -0.18em;
}
@keyframes scribble-in {
  from {
    background-size: 0% 100%;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .scribble {
    animation: scribble-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
  }
}