html {
  font-size: 14px;
  --bento-plum: #190019;
  --bento-deep-purple: #2B124C;
  --bento-purple: #522B5B;
  --bento-mauve: #854F6C;
  --bento-blush: #DFB6B2;
  --bento-cream: #FBE4D8;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 0;
}

.bento-home {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 100vh;
  background: var(--bento-plum);
  color: var(--bento-cream);
  font-family: "Segoe UI", Arial, sans-serif;
}

.bento-home > header,
.bento-home > footer {
  display: none;
}

.bento-home > .container {
  width: 100%;
  max-width: none;
  padding: 0;
}

.bento-home main {
  padding: 0;
}

.bento-board {
  --section-gap: 16px;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(9, minmax(0, 1fr));
  gap: var(--section-gap);
  width: calc(100% - (2 * var(--section-gap)));
  height: calc(100vh - (2 * var(--section-gap)));
  margin: var(--section-gap);
}

@media (min-width: 701px) {
  .bento-home {
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  .bento-board {
    height: calc(100dvh - (2 * var(--section-gap)));
  }
}

.bento-tile {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: var(--bento-purple);
  padding: 14px;
  box-shadow: 0 7px 18px rgba(25,0,25,.35);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.bento-tile::after {
  display: none;
}

.bento-tile:hover {
  z-index: 2;
  transform: translateY(-3px);
  filter: brightness(1.06);
  box-shadow: 0 10px 24px rgba(25,0,25,.5);
}

/* Top Left: chip, brand, and green status tile. Columns 1-3, row 1. */
.tile-chip { grid-column: 1 / 4; grid-row: 1; display: flex; align-items: center; gap: 8px; background: var(--bento-deep-purple); font-size: 11px; }
.tile-chip .eyebrow { position: absolute; top: 8px; left: 14px; font-size: 8px; }
.tile-chip strong { font-size: 15px; line-height: .85; }
.tile-chip strong b { font-size: 22px; }
.tile-chip small { margin-left: auto; color: #f4f5ff; line-height: 1.25; }
.chip-divider { height: 45px; border-left: 1px solid rgba(255,255,255,.5); }
.tile-green { background: var(--bento-mauve); }
/* Top Middle: recycling and feature indicators. Columns 4-8, row 1. */
.tile-recycle { grid-column: 4 / 9; grid-row: 1; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; text-align: center; }
.tile-recycle div { display: grid; gap: 3px; font-size: 12px; }
.feature-icon { font-size: 35px; line-height: .8; }
.tile-blue { background: var(--bento-deep-purple); }
/* Top Right: Windows tile. Columns 9-12, row 1. */
.tile-windows { grid-column: 9 / 13; grid-row: 1; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 21px; }
.windows-mark { font-size: 32px; }
/* Left Middle: display feature tile. Columns 1-3, rows 2-5. */
.tile-display { grid-column: 1 / 4; grid-row: 2 / 6; padding: 12px; background: var(--bento-purple); }
.display-copy { position: relative; z-index: 1; display: grid; gap: 3px; width: 55%; }
.display-copy strong { font-size: 17px; }
.display-copy strong b { font-size: 26px; }
.display-copy span { font-size: 31px; font-weight: 300; letter-spacing: -2px; }
.display-copy small { font-size: 11px; font-weight: 700; }
.display-copy em { margin-top: 16px; font-size: 10px; font-style: normal; }
.display-glow { position: absolute; top: 45px; right: -10px; width: 110%; height: 160px; transform: rotate(17deg); background: var(--bento-mauve); border-radius: 50% 10%; }
.display-badges { position: absolute; inset: auto 12px 12px; display: flex; justify-content: space-between; align-items: end; font-size: 8px; }
.display-badges > b { border-radius: 8px; padding: 6px 10px; background: #31bfd6; color: #fff; font-size: 19px; text-align: center; line-height: .8; }
.display-badges small { font-size: 7px; }
/* Center Feature: large hero and laptop tile. Columns 4-8, rows 2-6. */
.tile-hero { grid-column: 4 / 9; grid-row: 2 / 7; background: var(--bento-cream); color: var(--bento-plum); }
.hero-brand { display: block; text-align: center; font: italic 25px Georgia, serif; }
.hero-brand i { color: #9c9ca0; }
.laptop { position: absolute; left: 18%; width: 55%; height: 28%; transform: rotate(-16deg) skewY(10deg); border: 5px solid var(--bento-purple); background: var(--bento-blush); box-shadow: 15px 15px 8px rgba(25,0,25,.18); }
.laptop-back { top: 28%; border-radius: 7px; }
.laptop-front { top: 48%; left: 33%; width: 48%; height: 22%; transform: rotate(8deg) skewY(-6deg); background: var(--bento-deep-purple); }
.hero-footer { position: absolute; bottom: 14px; left: 12%; right: 12%; display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; }
.orange { color: #ec7c3c; }
/* Upper Right: memory tile. Columns 9-12, row 2. */
.tile-memory { grid-column: 9 / 13; grid-row: 2; display: flex; justify-content: center; align-items: center; gap: 8px; background: var(--bento-mauve); color: var(--bento-cream); }
.tile-memory strong { font-size: 25px; }
.tile-memory span { font-size: 10px; line-height: 1; }
/* Bottom Left: sustainability tile. Columns 1-3, rows 7-9. */
.tile-sustainability { grid-column: 1 / 4; grid-row: 7 / 10; background: var(--bento-deep-purple); }
.tile-sustainability strong { display: block; font-size: 20px; }
.tile-sustainability b { display: block; margin-top: 16px; font-size: 17px; line-height: 1.1; }
.tile-sustainability span { position: absolute; right: 13px; bottom: 5px; font-size: 90px; color: rgba(255,255,255,.12); }
/* Right Middle: standalone specification tiles, two columns across four rows. */
.spec-tile { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; background: var(--bento-blush); color: var(--bento-plum); text-align: center; }
.spec-tile-1 { grid-column: 9 / 11; grid-row: 3; }
.spec-tile-2 { grid-column: 11 / 13; grid-row: 3; }
.spec-tile-3 { grid-column: 9 / 11; grid-row: 4; }
.spec-tile-4 { grid-column: 11 / 13; grid-row: 4; }
.spec-tile-5 { grid-column: 9 / 11; grid-row: 5; }
.spec-tile-6 { grid-column: 11 / 13; grid-row: 5; }
.spec-tile-7 { grid-column: 9 / 11; grid-row: 6; }
.spec-tile-8 { grid-column: 11 / 13; grid-row: 6; }
.spec-tile strong { font-size: 20px; line-height: 1; }
.spec-tile span { font-size: 10px; line-height: 1.15; }
.spec-icon { font-size: 28px !important; }
/* Lower Left: packaging tile. Column 1, row 6. */
.tile-packaging { grid-column: 1 / 2; grid-row: 6 / 7; display: flex; flex-direction: column; justify-content: center; background: var(--bento-blush); color: var(--bento-plum); }
.tile-packaging strong { font-size: 28px; }
.tile-packaging span { font-size: 13px; font-weight: 600; }
/* Lower Left Middle: repair tile. Columns 2-3, row 6. */
.tile-repair { grid-column: 2 / 4; grid-row: 6 / 7; background: var(--bento-mauve); }
.tile-repair span { font-size: 11px; }
.tile-repair strong { display: block; font-size: 13px; }
.repair-line { position: absolute; right: 10%; bottom: 20%; width: 70%; height: 10px; transform: rotate(-12deg); background: #34343b; border-radius: 50%; }
/* Bottom Middle: pink and purple feature tile. Columns 4-8, rows 7-9. */
.tile-bottom-middle { grid-column: 4 / 9; grid-row: 7 / 10; display: flex; flex-direction: column; justify-content: center; background: var(--bento-purple); }
.tile-bottom-middle span { font-size: 10px; letter-spacing: 2px; }
.tile-bottom-middle strong { font-size: clamp(24px, 3vw, 42px); line-height: 1; }
.tile-bottom-middle small { max-width: 210px; margin-top: 10px; font-size: 11px; }
.tile-bottom-middle i { position: absolute; right: 12%; bottom: 5%; color: #ffd36e; font-size: 80px; font-style: normal; opacity: .75; }
/* Bottom Right: post and call-to-action tile. Columns 9-12, rows 7-9. */
.tile-post { grid-column: 9 / 13; grid-row: 7 / 10; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--bento-cream); color: var(--bento-plum); }
.tile-post span { font-size: 38px; color: #d1fff0; }
.tile-post strong { font-size: 12px; line-height: 1; }

@media (max-width: 700px) {
  .bento-board { --section-gap: 10px; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: none; width: calc(100% - (2 * var(--section-gap))); height: auto; min-height: 0; margin: var(--section-gap); gap: var(--section-gap); }
  .bento-tile { grid-column: auto; grid-row: auto; min-height: 125px; }
  .tile-chip, .tile-recycle, .tile-windows, .tile-display, .tile-hero, .tile-memory, .tile-sustainability, .spec-tile, .tile-packaging, .tile-repair, .tile-bottom-middle, .tile-post { grid-column: span 2; }
  .tile-display, .tile-hero { min-height: 300px; }
  .tile-chip, .tile-windows { grid-column: span 1; }
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}