/* PCE Store, 390px mobile welcome screen.
   Values come from the approved Welcome Screen spec. Bump ASSET_REV in
   templates/default/experience/pages/pceStoreLayout.isml after editing. */

:root {
  --ps-blue: #094DB0;
  --ps-green: #126C28;
  --ps-ink: #0B1B2E;
  --ps-text: #3B4C5E;
  --ps-slate: #304654;
  --ps-bg: #F2F6F8;
  --ps-line: #E1E9EE;
  --ps-outline: #CBD8E1;
  --ps-tile-blue: #EAF1FB;
  --ps-tile-green: #E7F1E9;
  --ps-tile-grey: #E4EBF0;
  /* side padding of the page content; components that go edge to edge undo it */
  --ps-gutter: 18.75px;
  --ps-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ps-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --ps-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
}

/* Screens that sit on white rather than the grey surface. Set by the layout. */
html.ps-surface--white { --ps-bg: #FFFFFF; }

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

html, body {
  margin: 0;
  padding: 0;
  background: #FFFFFF;
  font-family: var(--ps-sans);
  -webkit-text-size-adjust: 100%;
}

a { text-decoration: none; }

/* ---------- Screen frame ---------- */

.ps-screen {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 390px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  /* Keeps the last control clear of the home indicator. The PCE app passes
     the exact inset as --ps-safe-bottom; a browser falls back to its own. */
  padding-bottom: var(--ps-safe-bottom, env(safe-area-inset-bottom, 0px));
  background: var(--ps-bg);
}

@media (min-width: 480px) {
  .ps-screen {
    box-shadow: 0 25px 50px -12px rgba(11, 27, 46, 0.25);
  }
}

/* Page Designer wraps every region and component in a div. Let the main
   region grow so the footer stays at the bottom of the screen. */
.ps-main {
  flex: 1 0 auto;
  display: block;
  padding: 20px var(--ps-gutter) 24px;
}

/* ---------- Header ---------- */

.ps-header {
  display: block;
  width: 100%;
  background: var(--ps-blue);
}

.ps-brandrow {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 19px;
}

.ps-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: inherit;
}

.ps-brand__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 4px 9px 5px;
  height: 33px;
  background: #FFFFFF;
  border-radius: 3px;
}

.ps-brand__word {
  font-family: var(--ps-sans);
  font-style: italic;
  font-weight: 700;
  font-size: 24px;
  line-height: 24px;
  letter-spacing: 0.01em;
  color: var(--ps-blue);
}

.ps-brand__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ps-brand__name {
  font-weight: 600;
  font-size: 15px;
  line-height: 17px;
  color: #FFFFFF;
}

.ps-brand__descriptor {
  font-family: var(--ps-mono);
  font-weight: 400;
  font-size: 10px;
  line-height: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #EAF1FB;
}

/* ---------- Spacing between main components ---------- */

.ps-space--none   { margin-top: 0; }
.ps-space--small  { margin-top: 8px; }
.ps-space--snug   { margin-top: 12px; }
.ps-space--medium { margin-top: 16px; }
.ps-space--large  { margin-top: 20px; }
.ps-space--extra-large { margin-top: 68px; }

/* ---------- Benefits card ---------- */

.ps-card {
  padding: 20px 18.75px;
  background: linear-gradient(108.43deg, #EAF1FB 0%, #E7F1E9 100%);
  border: 1.25px solid var(--ps-line);
  border-radius: 17.5px;
}

.ps-card__heading {
  /* narrow enough to break after "needs", as in the design */
  max-width: 215px;
  margin: 0 auto;
  font-family: var(--ps-serif);
  font-weight: 500;
  font-size: 25px;
  line-height: 29px;
  letter-spacing: -0.375px;
  text-align: center;
  color: var(--ps-ink);
}

/* The grid is a little wider than the heading so each column is 110px and
   the tiles centre on the design's x positions. */
.ps-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 17.5px;
  margin: 20px -7.8px 0;
}

.ps-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7.5px;
  color: inherit;
}

.ps-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 57.5px;
  height: 57.5px;
  border-radius: 16.25px;
}

.ps-tile__icon svg { width: 28.75px; height: 28.75px; }

.ps-tile__icon--blue       { background: var(--ps-tile-blue);  color: var(--ps-blue); }
.ps-tile__icon--green      { background: var(--ps-tile-green); color: var(--ps-green); }
.ps-tile__icon--grey-green { background: var(--ps-tile-grey);  color: var(--ps-green); }
.ps-tile__icon--grey       { background: var(--ps-tile-grey);  color: var(--ps-slate); }

.ps-tile__label {
  font-weight: 600;
  font-size: 12.5px;
  line-height: 14px;
  text-align: center;
  color: var(--ps-text);
}

/* ---------- Button ---------- */

.ps-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7.5px;
  width: 100%;
  height: 50px;
  border-radius: 5px;
  /* the design draws the depth edge as a 3.75px #0B1B2E strip */
  box-shadow: inset 0 -3.75px 0 var(--ps-ink);
  font-weight: 600;
  font-size: 17.5px;
  line-height: 18px;
  letter-spacing: 0.0875px;
  color: #FFFFFF;
  -webkit-tap-highlight-color: transparent;
}

.ps-btn--primary  { background: var(--ps-blue); }
.ps-btn--positive { background: var(--ps-green); }

/* The 48px size for task screens: smaller label, softer depth edge. */
.ps-btn--regular {
  height: 48px;
  border-radius: 4px;
  box-shadow: inset 0 -3px 0 rgba(11, 27, 46, 0.22);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.07px;
}

/* Dark supporting action. */
.ps-btn--secondary {
  height: 48px;
  border-radius: 4px;
  background: var(--ps-ink);
  box-shadow: inset 0 -3px 0 rgba(11, 27, 46, 0.25);
  font-size: 14px;
  line-height: 14px;
  letter-spacing: 0.07px;
}

/* A label on its own, for the least prominent action on a screen. */
.ps-btn--text {
  height: 44px;
  border-radius: 4px;
  background: none;
  box-shadow: none;
  font-size: 14px;
  line-height: 14px;
  letter-spacing: 0.07px;
  color: var(--ps-blue);
}

/* Flat secondary action: no depth edge, smaller label. */
.ps-btn--outline {
  height: 48px;
  border: 1px solid var(--ps-blue);
  border-radius: 4px;
  background: #FFFFFF;
  box-shadow: none;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.07px;
  color: var(--ps-blue);
}

.ps-btn--outline .ps-btn__icon svg { width: 20px; height: 20px; }

.ps-btn:active { transform: translateY(1px); }
.ps-btn:focus-visible,
.ps-inline__link:focus-visible,
.ps-legal a:focus-visible,
.ps-bio:focus-visible,
a.ps-tile:focus-visible { outline: 2px solid var(--ps-blue); outline-offset: 2px; }

.ps-btn__icon { display: flex; flex: none; }
.ps-btn__icon svg { width: 22.5px; height: 22.5px; stroke-width: 2; }

/* ---------- Inline action and helper text ---------- */

.ps-inline,
.ps-helper {
  margin-bottom: 0;
  font-weight: 400;
  font-size: 12.5px;
  line-height: 18px;
  text-align: center;
  color: var(--ps-text);
}

.ps-inline__prompt { margin-right: 5px; }

.ps-inline__link {
  font-weight: 600;
  color: var(--ps-blue);
}

/* ---------- Biometric hint ---------- */

.ps-bio-wrap { text-align: center; }

.ps-bio {
  display: inline-flex;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  justify-content: center;
  gap: 11px;
  color: inherit;
}

.ps-bio__box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 47.5px;
  height: 47.5px;
  background: var(--ps-bg);
  border: 1.875px solid var(--ps-outline);
  border-radius: 13.75px;
  color: var(--ps-blue);
}

.ps-bio__box svg { width: 25px; height: 25px; stroke-width: 1.9; }

.ps-bio__text {
  font-weight: 400;
  font-size: 12.5px;
  line-height: 18px;
  color: var(--ps-text);
}

.ps-bio[aria-busy="true"] { opacity: 0.6; }

.ps-bio__status {
  min-height: 18px;
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 18px;
  color: var(--ps-text);
}

.ps-bio__status:empty { display: none; }

/* ---------- Legal links ---------- */

.ps-legal {
  flex: none;
  margin: 0 18.75px;
  /* sits at the very bottom of the screen with a small margin */
  padding: 16px 0;
  border-top: 1.25px solid var(--ps-line);
}

.ps-legal__links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 400;
  font-size: 12.5px;
  line-height: 18px;
  color: var(--ps-text);
}

.ps-legal__links a { color: var(--ps-text); }
.ps-legal__sep { width: 14px; text-align: center; }

/* ---------- Press feedback ---------- */

.ps-btn,
.ps-tile__icon,
.ps-bio__box {
  transition: transform 90ms ease-out, filter 90ms ease-out, background-color 90ms ease-out;
}

.ps-btn:active { filter: brightness(0.92); }
.ps-btn--outline:active { filter: none; background: var(--ps-tile-blue); }
.ps-btn--secondary:active { filter: none; background: #1D3049; }
.ps-btn--text:active { filter: none; opacity: 0.55; }
a.ps-tile:active .ps-tile__icon,
.ps-bio:active .ps-bio__box { transform: scale(0.94); }
.ps-inline__link:active,
.ps-legal a:active { opacity: 0.55; }

/* ---------- App mode ----------
   Set by pce-store-app.js, and by the PCE app itself before first paint, when
   the site is embedded in the app. The page then fills the screen and behaves
   like an app view rather than a document. */

html.pce-app,
html.pce-app body {
  height: 100%;
  background: var(--ps-bg);
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: default;
}

/* Text fields stay selectable, or typing and pasting would break. */
html.pce-app input,
html.pce-app textarea,
html.pce-app [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

/* The phone is the frame, so the page drops its own. */
html.pce-app {
  --ps-gutter: max(18.75px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}

html.pce-app .ps-screen {
  max-width: none;
  min-height: 100%;
  box-shadow: none;
  overflow-x: hidden;
}

/* Screens slide like a native navigation stack: forward comes in from the
   right, back from the left. The brand header stays put, as a nav bar does. */
html.pce-app .ps-main,
html.pce-app .ps-legal {
  animation: ps-screen-fade 220ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

html.pce-app[data-ps-nav="forward"] .ps-main,
html.pce-app[data-ps-nav="forward"] .ps-legal {
  animation: ps-screen-push 300ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

html.pce-app[data-ps-nav="back"] .ps-main,
html.pce-app[data-ps-nav="back"] .ps-legal {
  animation: ps-screen-pop 300ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

html.pce-app .ps-brandrow {
  padding-left: max(19px, env(safe-area-inset-left, 0px));
  padding-right: max(19px, env(safe-area-inset-right, 0px));
}

html.pce-app .ps-legal {
  margin-left: 0;
  margin-right: 0;
  padding-left: var(--ps-gutter);
  padding-right: var(--ps-gutter);
}

html.pce-app.pce-app--leaving .ps-main,
html.pce-app.pce-app--leaving .ps-legal {
  animation: none;
  opacity: 0;
  transform: translateX(-18%);
  transition: opacity 160ms ease-in, transform 160ms ease-in;
}

html.pce-app.pce-app--leaving[data-ps-nav="back"] .ps-main,
html.pce-app.pce-app--leaving[data-ps-nav="back"] .ps-legal {
  transform: translateX(18%);
}

html.pce-app :focus-visible { outline: none; }

@keyframes ps-screen-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ps-screen-push {
  from { opacity: 0; transform: translateX(32%); }
  to   { opacity: 1; transform: none; }
}

@keyframes ps-screen-pop {
  from { opacity: 0; transform: translateX(-32%); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.pce-app .ps-main,
  html.pce-app .ps-legal { animation: none !important; transition: none !important; transform: none !important; }
  .ps-btn, .ps-tile__icon, .ps-bio__box { transition: none; }
}