/* ==========================================================================
   fb7771.homes - compact surface stylesheet
   Canvas: 320-430px mobile-first, centered phone canvas on wide screens
   Prefix contract: every class uses "frame4d614-", variables "--frame4d614-"
   Palette: #2C3E50 base / #A0522D accent / #FFE4B5 light / #DEB887 soft / #808080 muted
   Direction: mono accents + regular Bengali body, small radii, dense grid,
   image-plus-name-bar cards, lede-sectioned rhythm, drawer slide + card lift,
   full-width primary CTA.
   ========================================================================== */

:root {
  --frame4d614-ink: #2c3e50;
  --frame4d614-ink-deep: #1d2b3a;
  --frame4d614-ink-panel: #243447;
  --frame4d614-ink-raise: #2b3f56;
  --frame4d614-rust: #a0522d;
  --frame4d614-rust-hot: #b8602f;
  --frame4d614-rust-deep: #7e3f21;
  --frame4d614-sand: #ffe4b5;
  --frame4d614-sand-soft: #f5d9a8;
  --frame4d614-wood: #deb887;
  --frame4d614-wood-dim: #b39066;
  --frame4d614-fog: #808080;
  --frame4d614-fog-soft: #9aa5b1;
  --frame4d614-line: rgba(222, 184, 135, 0.22);
  --frame4d614-line-strong: rgba(222, 184, 135, 0.4);
  --frame4d614-glow: rgba(160, 82, 45, 0.45);
  --frame4d614-radius-xs: 3px;
  --frame4d614-radius-sm: 5px;
  --frame4d614-radius-md: 8px;
  --frame4d614-mono: "ui-monospace", "SFMono-Regular", "Cascadia Mono", "Menlo", "Consolas", monospace;
  --frame4d614-body: "Noto Sans Bengali", "Hind Siliguri", "SolaimanLipi", "Segoe UI", "Roboto", "Arial", sans-serif;
  --frame4d614-topbar-h: 58px;
  --frame4d614-tabbar-h: 64px;
}

/* ---------- reset + base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  background: #16212d;
  background-image:
    radial-gradient(circle at 12% 0%, rgba(160, 82, 45, 0.14), transparent 46%),
    radial-gradient(circle at 92% 100%, rgba(222, 184, 135, 0.08), transparent 42%);
  color: var(--frame4d614-sand);
  font-family: var(--frame4d614-body);
  font-size: 15px;
  line-height: 1.7;
  min-height: 100vh;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--frame4d614-wood);
  text-decoration: none;
}

a:hover {
  color: var(--frame4d614-sand);
}

button {
  font-family: inherit;
  cursor: pointer;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--frame4d614-body);
  color: var(--frame4d614-sand);
  line-height: 1.45;
  margin: 0 0 10px;
  text-wrap: balance;
}

:focus-visible {
  outline: 2px solid var(--frame4d614-sand);
  outline-offset: 2px;
  border-radius: var(--frame4d614-radius-xs);
}

/* ---------- phone canvas ---------- */

.frame4d614-shell {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--frame4d614-ink);
  box-shadow: 0 0 44px rgba(0, 0, 0, 0.55);
  overflow-x: clip;
}

.frame4d614-page {
  padding-bottom: calc(var(--frame4d614-tabbar-h) + 22px + env(safe-area-inset-bottom, 0px));
}

.frame4d614-skip {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 120;
  background: var(--frame4d614-rust);
  color: var(--frame4d614-sand);
  font-size: 13px;
  padding: 8px 14px;
  border-radius: var(--frame4d614-radius-sm);
  transition: top 0.18s ease;
}

.frame4d614-skip:focus {
  top: 6px;
}

/* ---------- mono utility ---------- */

.frame4d614-mono {
  font-family: var(--frame4d614-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--frame4d614-wood);
}

/* ---------- asymmetric top bar ---------- */

.frame4d614-topbar {
  position: sticky;
  top: 0;
  z-index: 90;
  min-height: var(--frame4d614-topbar-h);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 12px;
  background: linear-gradient(180deg, rgba(29, 43, 58, 0.98), rgba(36, 52, 71, 0.96));
  border-bottom: 1px solid var(--frame4d614-line-strong);
  backdrop-filter: blur(6px);
}

/* brand block deliberately wider than the action cluster (asymmetric split) */
.frame4d614-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-right: auto;
  min-width: 0;
}

.frame4d614-brand-logo {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: var(--frame4d614-radius-sm);
  border: 1px solid var(--frame4d614-wood-dim);
  background: var(--frame4d614-ink-deep);
  object-fit: cover;
}

.frame4d614-brand-name {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}

.frame4d614-brand-name b {
  font-family: var(--frame4d614-mono);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--frame4d614-sand);
}

.frame4d614-brand-name span {
  font-size: 10px;
  color: var(--frame4d614-fog-soft);
  letter-spacing: 0.14em;
}

.frame4d614-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

/* full-width-flavoured primary, compact on the bar */
.frame4d614-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--frame4d614-radius-sm);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.frame4d614-btn--register {
  background: linear-gradient(160deg, var(--frame4d614-rust-hot), var(--frame4d614-rust-deep));
  color: #fff4e2;
  border-color: rgba(255, 228, 181, 0.25);
  box-shadow: 0 3px 0 rgba(126, 63, 33, 0.6);
}

.frame4d614-btn--register:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(126, 63, 33, 0.6);
}

.frame4d614-btn--login {
  background: rgba(222, 184, 135, 0.08);
  color: var(--frame4d614-sand);
  border-color: var(--frame4d614-line-strong);
}

.frame4d614-btn--login:active {
  transform: translateY(1px);
}

.frame4d614-burger {
  width: 44px;
  height: 44px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(222, 184, 135, 0.08);
  border: 1px solid var(--frame4d614-line-strong);
  border-radius: var(--frame4d614-radius-sm);
}

.frame4d614-burger i {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--frame4d614-sand);
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.frame4d614-burger[aria-expanded="true"] i:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.frame4d614-burger[aria-expanded="true"] i:nth-child(2) {
  opacity: 0;
}

.frame4d614-burger[aria-expanded="true"] i:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ---------- stacked overlay menu ---------- */

.frame4d614-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  visibility: hidden;
  pointer-events: none;
}

.frame4d614-drawer[data-open="true"] {
  visibility: visible;
  pointer-events: auto;
}

.frame4d614-drawer-veil {
  position: absolute;
  inset: 0;
  background: rgba(13, 20, 28, 0.72);
  opacity: 0;
  transition: opacity 0.24s ease;
}

.frame4d614-drawer[data-open="true"] .frame4d614-drawer-veil {
  opacity: 1;
}

.frame4d614-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(84%, 320px);
  background: var(--frame4d614-ink-deep);
  border-left: 1px solid var(--frame4d614-line-strong);
  transform: translateX(102%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.34, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 16px 14px calc(var(--frame4d614-tabbar-h) + 20px);
}

.frame4d614-drawer[data-open="true"] .frame4d614-drawer-panel {
  transform: translateX(0);
}

.frame4d614-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--frame4d614-line);
}

.frame4d614-drawer-head img {
  width: 34px;
  height: 34px;
  border-radius: var(--frame4d614-radius-xs);
  border: 1px solid var(--frame4d614-wood-dim);
  object-fit: cover;
}

.frame4d614-drawer-head b {
  font-family: var(--frame4d614-mono);
  font-size: 16px;
  color: var(--frame4d614-sand);
}

.frame4d614-drawer-close {
  width: 44px;
  height: 44px;
  border-radius: var(--frame4d614-radius-sm);
  background: transparent;
  border: 1px solid var(--frame4d614-line-strong);
  color: var(--frame4d614-sand);
  font-size: 18px;
  line-height: 1;
}

.frame4d614-drawer-group {
  margin-top: 14px;
}

.frame4d614-drawer-group > p {
  margin: 0 0 6px;
  font-family: var(--frame4d614-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--frame4d614-fog);
}

.frame4d614-drawer-list {
  list-style: none;
  display: grid;
  gap: 4px;
}

.frame4d614-drawer-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--frame4d614-radius-sm);
  background: rgba(222, 184, 135, 0.05);
  border: 1px solid var(--frame4d614-line);
  color: var(--frame4d614-sand-soft);
  font-size: 14px;
  transition: background 0.16s ease, transform 0.16s ease;
}

.frame4d614-drawer-list a svg {
  flex: 0 0 auto;
  color: var(--frame4d614-wood);
}

.frame4d614-drawer-list a:hover,
.frame4d614-drawer-list a:focus-visible {
  background: rgba(160, 82, 45, 0.28);
  color: #fff4e2;
}

.frame4d614-drawer-list a:active {
  transform: translateX(2px);
}

/* ---------- hero carousel ---------- */

.frame4d614-hero {
  position: relative;
  margin: 12px 10px 0;
}

.frame4d614-hero-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--frame4d614-radius-md);
  border: 1px solid var(--frame4d614-line-strong);
  scrollbar-width: none;
}

.frame4d614-hero-track::-webkit-scrollbar {
  display: none;
}

.frame4d614-hero-slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: center;
  aspect-ratio: 10 / 7;
  overflow: hidden;
}

.frame4d614-hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame4d614-hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(29, 43, 58, 0.1) 30%, rgba(29, 43, 58, 0.88) 92%);
}

.frame4d614-hero-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 12px 14px 14px;
  display: grid;
  gap: 7px;
}

.frame4d614-hero-tag {
  justify-self: start;
  font-family: var(--frame4d614-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffd9ae;
  background: rgba(126, 63, 33, 0.85);
  border: 1px solid rgba(255, 228, 181, 0.35);
  border-radius: var(--frame4d614-radius-xs);
  padding: 3px 8px;
}

.frame4d614-hero-copy h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  color: #fff4e2;
}

.frame4d614-hero-copy p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--frame4d614-sand-soft);
}

.frame4d614-hero-cta {
  width: 100%;
  margin-top: 3px;
}

.frame4d614-hero-dots {
  position: absolute;
  right: 12px;
  bottom: 10px;
  z-index: 3;
  display: flex;
  gap: 6px;
}

.frame4d614-hero-dots button {
  width: 22px;
  height: 10px;
  min-height: 10px;
  padding: 0;
  border-radius: 5px;
  border: 1px solid rgba(255, 228, 181, 0.5);
  background: rgba(29, 43, 58, 0.55);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.frame4d614-hero-dots button[aria-current="true"] {
  background: var(--frame4d614-rust-hot);
  box-shadow: 0 0 8px var(--frame4d614-glow);
}

/* ---------- ticker strip ---------- */

.frame4d614-strip {
  margin: 10px 10px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px dashed var(--frame4d614-line-strong);
  border-radius: var(--frame4d614-radius-sm);
  background: rgba(29, 43, 58, 0.6);
  font-size: 12px;
  color: var(--frame4d614-wood);
}

.frame4d614-strip b {
  font-family: var(--frame4d614-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--frame4d614-rust-hot);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- page intro / lede rhythm ---------- */

.frame4d614-main {
  padding: 14px 12px 0;
}

.frame4d614-h1wrap {
  padding: 10px 2px 4px;
  border-bottom: 1px solid var(--frame4d614-line);
  margin-bottom: 10px;
}

.frame4d614-h1wrap h1 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.frame4d614-lede {
  margin: 0 0 6px;
  font-size: 14.5px;
  color: var(--frame4d614-sand-soft);
}

.frame4d614-section {
  margin-top: 22px;
}

.frame4d614-sechead {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.frame4d614-sechead .frame4d614-mono {
  color: var(--frame4d614-rust-hot);
  flex: 0 0 auto;
}

.frame4d614-sechead h2 {
  margin: 0;
  font-size: 17.5px;
  font-weight: 800;
}

.frame4d614-secnote {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--frame4d614-fog-soft);
}

/* ---------- game category blocks ---------- */

.frame4d614-cat {
  margin-top: 24px;
}

.frame4d614-cat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: linear-gradient(90deg, rgba(160, 82, 45, 0.34), rgba(160, 82, 45, 0.06));
  border-left: 3px solid var(--frame4d614-rust-hot);
  border-radius: var(--frame4d614-radius-xs);
}

.frame4d614-cat-head h2 {
  margin: 0;
  font-size: 16.5px;
  font-weight: 800;
  color: #fff4e2;
  flex: 1 1 auto;
}

.frame4d614-cat-count {
  font-family: var(--frame4d614-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--frame4d614-ink-deep);
  background: var(--frame4d614-wood);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

.frame4d614-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

/* image card with bottom name bar */
.frame4d614-gcard {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--frame4d614-ink-panel);
  border: 1px solid var(--frame4d614-line);
  border-radius: var(--frame4d614-radius-sm);
  overflow: hidden;
  text-align: center;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}

.frame4d614-gcard:hover,
.frame4d614-gcard:focus-visible {
  transform: translateY(-2px);
  border-color: var(--frame4d614-wood-dim);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

.frame4d614-gcard:active {
  transform: translateY(0);
}

.frame4d614-gcard figure {
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #101a24;
}

.frame4d614-gcard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame4d614-gcard figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 4px 4px 5px;
  background: #1b2836;
  border-top: 1px solid rgba(222, 184, 135, 0.14);
  font-size: 10.5px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--frame4d614-sand-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- steps (how to play) ---------- */

.frame4d614-steps {
  list-style: none;
  display: grid;
  gap: 8px;
  counter-reset: frame4d614-step;
}

.frame4d614-steps li {
  counter-increment: frame4d614-step;
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 11px;
  background: var(--frame4d614-ink-panel);
  border: 1px solid var(--frame4d614-line);
  border-radius: var(--frame4d614-radius-sm);
}

.frame4d614-steps li::before {
  content: counter(frame4d614-step, decimal-leading-zero);
  font-family: var(--frame4d614-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--frame4d614-rust-hot);
  border: 1px dashed var(--frame4d614-wood-dim);
  border-radius: var(--frame4d614-radius-xs);
  text-align: center;
  padding: 5px 0;
  background: rgba(160, 82, 45, 0.12);
}

.frame4d614-steps b {
  display: block;
  font-size: 14px;
  color: #fff4e2;
  margin-bottom: 2px;
}

.frame4d614-steps p {
  margin: 0;
  font-size: 12.5px;
  color: var(--frame4d614-fog-soft);
  line-height: 1.62;
}

/* ---------- winners rows ---------- */

.frame4d614-winners {
  border: 1px solid var(--frame4d614-line-strong);
  border-radius: var(--frame4d614-radius-sm);
  overflow: hidden;
}

.frame4d614-winners-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  padding: 9px 12px;
  background: var(--frame4d614-ink-panel);
  border-bottom: 1px solid var(--frame4d614-line);
}

.frame4d614-winners-row:last-child {
  border-bottom: 0;
}

.frame4d614-winners-row b {
  font-size: 13px;
  color: #fff4e2;
}

.frame4d614-winners-row span {
  grid-column: 1 / -1;
  font-size: 11.5px;
  color: var(--frame4d614-fog-soft);
}

.frame4d614-winners-row em {
  font-style: normal;
  font-family: var(--frame4d614-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--frame4d614-wood);
  white-space: nowrap;
}

.frame4d614-winners-note {
  margin: 8px 2px 0;
  font-size: 11px;
  color: var(--frame4d614-fog);
}

/* ---------- two-column compact tiles ---------- */

.frame4d614-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.frame4d614-tile {
  padding: 11px 12px;
  background: var(--frame4d614-ink-panel);
  border: 1px solid var(--frame4d614-line);
  border-radius: var(--frame4d614-radius-sm);
}

.frame4d614-tile h3 {
  margin: 0 0 4px;
  font-size: 13.5px;
  color: #fff4e2;
}

.frame4d614-tile p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--frame4d614-fog-soft);
}

.frame4d614-tile--rust {
  border-color: rgba(160, 82, 45, 0.55);
  background: linear-gradient(180deg, rgba(160, 82, 45, 0.2), rgba(36, 52, 71, 0.9));
}

/* ---------- comparison feature rows ---------- */

.frame4d614-feats {
  display: grid;
  gap: 6px;
}

.frame4d614-feat {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 9px;
  align-items: start;
  padding: 9px 11px;
  background: rgba(29, 43, 58, 0.55);
  border: 1px solid var(--frame4d614-line);
  border-radius: var(--frame4d614-radius-sm);
  font-size: 12.5px;
  color: var(--frame4d614-sand-soft);
  line-height: 1.6;
}

.frame4d614-feat svg {
  color: var(--frame4d614-wood);
  margin-top: 3px;
}

.frame4d614-feat b {
  color: #fff4e2;
}

/* ---------- scenario cards (use case guidance) ---------- */

.frame4d614-cases {
  display: grid;
  gap: 8px;
}

.frame4d614-case {
  padding: 11px 12px;
  border-radius: var(--frame4d614-radius-sm);
  background: var(--frame4d614-ink-panel);
  border: 1px solid var(--frame4d614-line);
  border-left: 3px solid var(--frame4d614-wood);
}

.frame4d614-case--rust {
  border-left-color: var(--frame4d614-rust-hot);
}

.frame4d614-case h3 {
  margin: 0 0 4px;
  font-size: 13.5px;
  color: #fff4e2;
}

.frame4d614-case p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.62;
  color: var(--frame4d614-fog-soft);
}

/* ---------- prose ---------- */

.frame4d614-prose {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.78;
  color: var(--frame4d614-sand-soft);
}

.frame4d614-prose + .frame4d614-prose {
  margin-top: 9px;
}

.frame4d614-prose b {
  color: #fff4e2;
}

.frame4d614-prose a {
  color: var(--frame4d614-wood);
  border-bottom: 1px dashed var(--frame4d614-wood-dim);
  padding-bottom: 1px;
}

.frame4d614-prose a:hover {
  color: #fff4e2;
  border-bottom-color: #fff4e2;
}

.frame4d614-sub {
  margin: 16px 0 6px;
  font-size: 14.5px;
  font-weight: 800;
  color: #fff4e2;
}

/* ---------- CTA band ---------- */

.frame4d614-band {
  margin: 26px 10px 4px;
  padding: 16px 14px;
  text-align: center;
  border-radius: var(--frame4d614-radius-md);
  border: 1px solid rgba(160, 82, 45, 0.6);
  background:
    radial-gradient(circle at 85% 12%, rgba(222, 184, 135, 0.14), transparent 40%),
    linear-gradient(170deg, rgba(160, 82, 45, 0.32), rgba(29, 43, 58, 0.92));
}

.frame4d614-band h2 {
  margin: 0 0 6px;
  font-size: 17px;
  color: #fff4e2;
}

.frame4d614-band p {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--frame4d614-sand-soft);
}

.frame4d614-band .frame4d614-btn {
  width: 100%;
}

.frame4d614-btn--wide {
  width: 100%;
  font-size: 15px;
  padding: 13px 16px;
}

/* ---------- extended footer ---------- */

.frame4d614-ext {
  margin-top: 30px;
  padding: 18px 12px 8px;
  border-top: 1px solid var(--frame4d614-line-strong);
  background: linear-gradient(180deg, rgba(29, 43, 58, 0.75), rgba(16, 26, 36, 0.95));
}

.frame4d614-ext-brand {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.frame4d614-ext-brand img {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: var(--frame4d614-radius-sm);
  border: 1px solid var(--frame4d614-wood-dim);
  object-fit: cover;
}

.frame4d614-ext-brand h2 {
  margin: 0 0 4px;
  font-size: 15px;
}

.frame4d614-ext-brand p {
  margin: 0;
  font-size: 12px;
  line-height: 1.66;
  color: var(--frame4d614-fog-soft);
}

.frame4d614-ext-block {
  margin-top: 18px;
}

.frame4d614-ext-block > h3 {
  margin: 0 0 8px;
  font-family: var(--frame4d614-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--frame4d614-wood);
}

.frame4d614-ext-dir {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.frame4d614-ext-dir a {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--frame4d614-sand-soft);
  background: rgba(222, 184, 135, 0.05);
  border: 1px solid var(--frame4d614-line);
  border-radius: var(--frame4d614-radius-xs);
  transition: background 0.16s ease, border-color 0.16s ease;
}

.frame4d614-ext-dir a svg {
  flex: 0 0 auto;
  color: var(--frame4d614-wood);
}

.frame4d614-ext-dir a:hover {
  background: rgba(160, 82, 45, 0.26);
  border-color: var(--frame4d614-wood-dim);
  color: #fff4e2;
}

.frame4d614-ext-promos {
  list-style: none;
  display: grid;
  gap: 7px;
}

.frame4d614-ext-promos button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  color: #fff4e2;
  background: linear-gradient(160deg, rgba(160, 82, 45, 0.5), rgba(126, 63, 33, 0.28));
  border: 1px solid rgba(255, 228, 181, 0.3);
  border-radius: var(--frame4d614-radius-sm);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.frame4d614-ext-promos button svg {
  flex: 0 0 auto;
  color: var(--frame4d614-sand);
}

.frame4d614-ext-promos button span {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.35;
}

.frame4d614-ext-promos button small {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--frame4d614-sand-soft);
}

.frame4d614-ext-promos button:hover {
  box-shadow: 0 0 14px var(--frame4d614-glow);
}

.frame4d614-ext-promos button:active {
  transform: translateY(1px);
}

.frame4d614-ext-note {
  margin: 14px 0 0;
  padding: 10px 12px;
  font-size: 11px;
  line-height: 1.7;
  color: var(--frame4d614-fog-soft);
  border: 1px dashed var(--frame4d614-line-strong);
  border-radius: var(--frame4d614-radius-sm);
  background: rgba(128, 128, 128, 0.08);
}

/* ---------- copyright footer ---------- */

.frame4d614-footer {
  padding: 14px 12px 10px;
  text-align: center;
  border-top: 1px solid var(--frame4d614-line);
}

.frame4d614-footer p {
  margin: 0;
  font-family: var(--frame4d614-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--frame4d614-fog);
}

/* ---------- bottom tab bar (segmented action bar) ---------- */

.frame4d614-tabbar {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: 430px;
  z-index: 95;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-height: var(--frame4d614-tabbar-h);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: linear-gradient(180deg, rgba(29, 43, 58, 0.97), rgba(16, 26, 36, 0.99));
  border-top: 1px solid var(--frame4d614-line-strong);
  backdrop-filter: blur(6px);
}

.frame4d614-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 44px;
  padding: 7px 2px 8px;
  font-family: var(--frame4d614-body);
  font-size: 10px;
  font-weight: 600;
  color: var(--frame4d614-fog-soft);
  background: transparent;
  border: 0;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.frame4d614-tab svg {
  color: var(--frame4d614-wood-dim);
  transition: color 0.18s ease, transform 0.18s ease;
}

.frame4d614-tab:hover svg {
  transform: translateY(-1px);
}

/* underline marker marks the active role */
.frame4d614-tab::after {
  content: "";
  position: absolute;
  top: 0;
  left: 26%;
  right: 26%;
  height: 2px;
  border-radius: 1px;
  background: transparent;
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.frame4d614-tab[aria-current="page"],
.frame4d614-tab[data-active="true"] {
  color: #fff4e2;
}

.frame4d614-tab[aria-current="page"]::after,
.frame4d614-tab[data-active="true"]::after {
  background: var(--frame4d614-rust-hot);
  box-shadow: 0 0 8px var(--frame4d614-glow);
}

.frame4d614-tab[aria-current="page"] svg,
.frame4d614-tab[data-active="true"] svg {
  color: var(--frame4d614-sand);
}

/* restrained glow feedback for promo tabs */
.frame4d614-tab--promo svg {
  color: var(--frame4d614-rust-hot);
}

.frame4d614-tab--promo:active svg {
  filter: drop-shadow(0 0 6px var(--frame4d614-glow));
}

/* ---------- responsive canvas steps ---------- */

@media (min-width: 360px) {
  .frame4d614-gcard figcaption {
    font-size: 11px;
  }

  .frame4d614-hero-slide {
    aspect-ratio: 5 / 3.4;
  }
}

/* denser grid on larger phones, still inside the phone canvas */
@media (min-width: 400px) {
  .frame4d614-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
  }

  .frame4d614-hero-copy h2 {
    font-size: 21px;
  }
}

/* 430px phone-canvas breakpoint: canvas stays, typography relaxes slightly */
@media (min-width: 430px) {
  .frame4d614-main {
    padding: 16px 16px 0;
  }

  .frame4d614-h1wrap h1 {
    font-size: 23px;
  }

  .frame4d614-sechead h2 {
    font-size: 18.5px;
  }

  .frame4d614-prose {
    font-size: 14px;
  }

  .frame4d614-hero-slide {
    aspect-ratio: 21 / 10;
  }
}

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .frame4d614-drawer-panel,
  .frame4d614-hero-track,
  .frame4d614-gcard,
  .frame4d614-btn,
  .frame4d614-tab svg {
    transition: none;
  }
}

/* ---------- help-page surfaces ---------- */

.frame4d614-help-callout,
.frame4d614-alert {
  margin: 12px 0 0;
  padding: 11px 12px;
  border-left: 3px solid var(--frame4d614-rust-hot);
  border-top: 1px solid var(--frame4d614-line);
  border-right: 1px solid var(--frame4d614-line);
  border-bottom: 1px solid var(--frame4d614-line);
  border-radius: var(--frame4d614-radius-sm);
  background: rgba(160, 82, 45, 0.16);
  color: var(--frame4d614-sand-soft);
  font-size: 13px;
  line-height: 1.7;
}

.frame4d614-help-callout b,
.frame4d614-alert .frame4d614-mono {
  color: #fff4e2;
}

.frame4d614-alert {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px;
  align-items: start;
  border-left-color: var(--frame4d614-wood);
  background: rgba(222, 184, 135, 0.1);
}

.frame4d614-alert p {
  margin: 0;
}

.frame4d614-help-map,
.frame4d614-help-qa,
.frame4d614-timeline,
.frame4d614-checklist,
.frame4d614-ticklist,
.frame4d614-compare {
  display: grid;
  gap: 8px;
}

.frame4d614-help-card {
  padding: 11px 12px;
  border: 1px solid var(--frame4d614-line);
  border-radius: var(--frame4d614-radius-sm);
  background: var(--frame4d614-ink-panel);
}

.frame4d614-help-card .frame4d614-mono {
  color: var(--frame4d614-rust-hot);
}

.frame4d614-help-card h3,
.frame4d614-timeline h3 {
  margin: 3px 0 3px;
  font-size: 14px;
  color: #fff4e2;
}

.frame4d614-help-card p,
.frame4d614-timeline p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--frame4d614-fog-soft);
}

.frame4d614-help-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.frame4d614-help-actions .frame4d614-btn {
  width: 100%;
  padding-left: 8px;
  padding-right: 8px;
}

.frame4d614-help-qa details {
  border: 1px solid var(--frame4d614-line);
  border-radius: var(--frame4d614-radius-sm);
  background: var(--frame4d614-ink-panel);
  overflow: hidden;
}

.frame4d614-help-qa summary {
  min-height: 44px;
  padding: 10px 12px;
  cursor: pointer;
  color: #fff4e2;
  font-size: 13px;
  font-weight: 700;
}

.frame4d614-help-qa details p {
  margin: 0;
  padding: 0 12px 11px;
  color: var(--frame4d614-fog-soft);
  font-size: 12.5px;
  line-height: 1.7;
}

.frame4d614-timeline article {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid var(--frame4d614-line);
  border-radius: var(--frame4d614-radius-sm);
  background: linear-gradient(100deg, rgba(160, 82, 45, 0.16), var(--frame4d614-ink-panel));
}

.frame4d614-timeline article > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px dashed var(--frame4d614-wood-dim);
  border-radius: 50%;
  color: var(--frame4d614-sand);
  font-family: var(--frame4d614-mono);
  font-weight: 700;
}

.frame4d614-checkrow {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 8px;
  padding: 9px 10px;
  border-bottom: 1px dashed var(--frame4d614-line);
  background: rgba(29, 43, 58, 0.62);
}

.frame4d614-checkrow b {
  color: var(--frame4d614-wood);
  font-size: 12.5px;
}

.frame4d614-checkrow span {
  color: var(--frame4d614-sand-soft);
  font-size: 12.5px;
  line-height: 1.6;
}

.frame4d614-ticklist {
  padding: 10px;
  border: 1px solid var(--frame4d614-line-strong);
  border-radius: var(--frame4d614-radius-sm);
  background: rgba(29, 43, 58, 0.62);
}

.frame4d614-ticklist label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  min-height: 34px;
  color: var(--frame4d614-sand-soft);
  font-size: 12.5px;
  line-height: 1.5;
}

.frame4d614-ticklist input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--frame4d614-rust-hot);
  flex: 0 0 auto;
}

.frame4d614-compare {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--frame4d614-line-strong);
  border-radius: var(--frame4d614-radius-sm);
}

.frame4d614-compare-head,
.frame4d614-compare-row {
  display: grid;
  grid-template-columns: 62px 1fr 1fr;
  gap: 7px;
  padding: 9px 8px;
  font-size: 11px;
  line-height: 1.45;
}

.frame4d614-compare-head {
  color: var(--frame4d614-ink-deep);
  background: var(--frame4d614-wood);
  font-family: var(--frame4d614-mono);
  font-size: 9px;
  text-transform: uppercase;
}

.frame4d614-compare-row {
  border-top: 1px solid var(--frame4d614-line);
  background: var(--frame4d614-ink-panel);
  color: var(--frame4d614-sand-soft);
}

.frame4d614-compare-row b {
  color: #fff4e2;
}

.frame4d614-compare-row em {
  color: var(--frame4d614-fog-soft);
  font-style: normal;
}

/* ---------- wide screens keep the phone canvas centered ---------- */

@media (min-width: 700px) {
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
      linear-gradient(rgba(222, 184, 135, 0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(222, 184, 135, 0.04) 1px, transparent 1px);
    background-size: 34px 34px;
    pointer-events: none;
  }
}

/* ---------- print ---------- */

@media print {
  .frame4d614-topbar,
  .frame4d614-tabbar,
  .frame4d614-drawer,
  .frame4d614-hero-dots {
    display: none;
  }

  body {
    background: #fff;
  }

  .frame4d614-shell {
    box-shadow: none;
    max-width: none;
  }
}