/* AnotherMe: restrained, frosted glass. No geometry or viewport overrides. */
:root {
  --material-glass: linear-gradient(143deg, rgba(255,255,255,.48), rgba(255,255,255,.21) 56%, rgba(255,255,255,.32));
  --material-shadow-near: color-mix(in srgb, var(--accent) 12%, transparent);
  --material-shadow-far: color-mix(in srgb, var(--text) 21%, transparent);
  --material-edge-dark: color-mix(in srgb, var(--accent) 14%, transparent);
  --material-action: #252329;
}

/* Colored light behind the glass reveals translucency without adding imagery. */
.ambience {
  background:
    radial-gradient(ellipse at 5% 38%, color-mix(in srgb, var(--petal) 91%, transparent), transparent 53%),
    radial-gradient(ellipse at 94% 58%, color-mix(in srgb, var(--green) 42%, transparent), transparent 45%),
    radial-gradient(ellipse at 74% 86%, color-mix(in srgb, var(--rose) 37%, transparent), transparent 49%),
    radial-gradient(ellipse at 78% 8%, rgba(255,255,255,.94), transparent 48%), var(--cream);
}
.ambience::after {
  background: linear-gradient(122deg, transparent 19%, rgba(255,255,255,.36) 31%, transparent 45%, rgba(255,255,255,.21) 68%, transparent 82%);
  opacity: .64;
}

.redeem, .path, .page-glass {
  position: relative;
  isolation: isolate;
  background: var(--material-glass);
  border-color: rgba(255,255,255,.67);
  -webkit-backdrop-filter: blur(18px) saturate(112%);
  backdrop-filter: blur(18px) saturate(112%);
  box-shadow:
    0 2px 3px -2px var(--material-shadow-near),
    0 12px 25px -17px var(--material-shadow-far),
    0 26px 43px -30px var(--material-shadow-far),
    inset 0 1px 1px rgba(255,255,255,.92),
    inset 1px 0 1px rgba(255,255,255,.39),
    inset 0 -1px 1px var(--material-edge-dark),
    inset 0 -4px 8px -7px rgba(255,255,255,.95);
}
.redeem::before, .path::before, .page-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: linear-gradient(145deg, rgba(255,255,255,.96), rgba(255,255,255,.27) 32%, transparent 51%, rgba(255,255,255,.53) 78%, rgba(255,255,255,.8));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}
.redeem::after, .path::after, .page-glass::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  background: radial-gradient(ellipse at 9% 0, rgba(255,255,255,.21), transparent 57%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.31), inset 0 -1px 0 rgba(255,255,255,.18);
  pointer-events: none;
  z-index: -1;
}

/* An inset field reads as a recess in the panel rather than another flat card. */
.input-wrap {
  background: rgba(255,255,255,.36);
  border-color: rgba(255,255,255,.66);
  border-top-color: rgba(255,255,255,.31);
  box-shadow: inset 0 2px 5px -3px color-mix(in srgb, var(--text) 20%, transparent), 0 1px 0 rgba(255,255,255,.7);
}
.quiet-button, .page-secondary, .setting-row, .color-option, .page-tabs button {
  background: linear-gradient(150deg, rgba(255,255,255,.53), rgba(255,255,255,.24));
  border-color: rgba(255,255,255,.76);
  box-shadow: 0 5px 12px -10px var(--material-shadow-far), inset 0 1px 1px rgba(255,255,255,.82), inset 0 -1px 1px var(--material-edge-dark);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.color-option[aria-pressed=true] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), inset 0 1px 0 rgba(255,255,255,.8);
}
.page-tabs button[aria-selected=true] { background: rgba(255,255,255,.74); border-color: var(--accent); }

/* Keep a single clear action, with a soft shoulder and a short contact shadow. */
.primary {
  background: linear-gradient(175deg, #37343c, var(--material-action) 65%);
  color: #fff;
  box-shadow: 0 3px 5px -3px rgba(31,24,35,.26), 0 10px 18px -14px rgba(31,24,35,.4), inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.22);
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}
.primary:hover { filter: brightness(1.04); transform: translateY(-1px); }
.primary:active {
  transform: translateY(1.5px) scale(.994);
  filter: brightness(.98);
  box-shadow: 0 1px 3px -1px rgba(31,24,35,.18), inset 0 2px 4px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.08);
}
.path { transition: transform 170ms ease, box-shadow 170ms ease; }
.path:hover { background: var(--material-glass); transform: translateY(-2px); }
.path:active, .quiet-button:active, .page-secondary:active, .setting-row:active, .color-option:active, .page-tabs button:active { transform: translateY(1px) scale(.995); }
.primary:disabled { transform: none; filter: none; opacity: .62; }

.bottom-nav {
  background: rgba(255,255,255,.44);
  border-top-color: rgba(255,255,255,.83);
  -webkit-backdrop-filter: blur(20px) saturate(110%);
  backdrop-filter: blur(20px) saturate(110%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 -7px 24px -24px var(--material-shadow-far);
}
.modal {
  background: linear-gradient(150deg, rgba(255,255,255,.89), color-mix(in srgb, var(--cream) 86%, transparent));
  border-color: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(26px) saturate(108%);
  backdrop-filter: blur(26px) saturate(108%);
  box-shadow: 0 8px 18px -12px var(--material-shadow-far), 0 30px 70px -28px var(--material-shadow-far), inset 0 1px 1px #fff, inset 0 -1px 1px var(--material-edge-dark);
}
.modal::backdrop { background: rgba(40,30,45,.16); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }

@media (hover: none) {
  .path:hover, .primary:hover { transform: none; }
  .path:active { transform: translateY(1px) scale(.995); }
  .primary:active { transform: translateY(1.5px) scale(.994); }
}
@media (prefers-reduced-motion: reduce) {
  .path, .primary, .quiet-button, .page-secondary, .setting-row, .color-option, .page-tabs button { transition: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .redeem, .path, .page-glass { background: color-mix(in srgb, var(--cream) 91%, #fff); }
}
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  .redeem::before, .path::before, .page-glass::before { background: none; padding: 0; border: 1px solid rgba(255,255,255,.6); }
}

/* Only swap the two phone sections; preserve their sizes and the title's flow. */
@media(max-width:680px) {
  .home-content>.hero {order:1}
  .home-content>.explore {order:2}
}
.frame.phone .home-content>.hero {order:1}
.frame.phone .home-content>.explore {order:2}
/* Reset the old one-pixel stripe height so the masked rim follows all corners. */
.redeem::before {height:auto}

/* Reference composition: phone geometry only; retain every existing material/color. */
@media(max-width:680px) {
  .frame:not(.has-page) main,.frame.phone:not(.has-page) main {
    justify-content:flex-start;
    padding-top:clamp(24px,8.8cqh,74px);
    padding-bottom:20px;
    gap:16px;
  }
  .frame .paths,.frame.phone .paths {height:136px}
  .frame .path,.frame.phone .path {
    height:136px;min-height:0;padding:14px 10px;
    justify-content:flex-start;
  }
  .frame .path .path-label,.frame.phone .path .path-label {
    margin:0;font-size:clamp(14px,4.1cqw,16px);
  }
  .frame .path .path-symbol,.frame.phone .path .path-symbol {
    position:static;width:26px;height:26px;flex-shrink:0;
    margin:8px 0 6px;
  }
  .frame .path h3,.frame.phone .path h3 {margin:0}
}
@container(max-height:650px) {
  .frame:not(.has-page) main,.frame.phone:not(.has-page) main {padding-top:24px;padding-bottom:12px;gap:12px}
  .frame .paths,.frame.phone .paths,.frame .path,.frame.phone .path {height:122px}
  .frame .path,.frame.phone .path {padding-top:12px;padding-bottom:12px}
}
@container(max-height:520px) {
  .frame:not(.has-page) main,.frame.phone:not(.has-page) main {padding-top:4px;padding-bottom:6px;gap:7px}
  .frame .paths,.frame.phone .paths,.frame .path,.frame.phone .path {height:100px}
  .frame .path,.frame.phone .path {padding-top:8px;padding-bottom:8px}
  .frame .path .path-symbol,.frame.phone .path .path-symbol {width:20px;height:20px;margin:4px 0}
}