/* Shift90 landing — v2.
   ---------------------------------------------------------------
   The page is built from the app's own two palettes, not from a
   mood board. Shift90 has exactly two colour states and they mean
   opposite things:

     ember  (#d1935c)  the churn you arrive with — the session
                       screen is a storm of warm motes
     aurora (#4ad6c0 → #7fb0ff)  the calm you leave with — the home
                       screen's luminous ring

   So the whole page runs that arc: the field behind the document
   starts ember and agitated at the top and ends aurora and still at
   the bottom (see field-v2.js). Cream (#f0ede4) appears exactly
   once, on the button — in the app, cream is the colour of the row
   you have chosen, so on the web it is the colour of committing.

   No cards, no gradients on text, no emoji, no external requests:
   display type is Didot / Bodoni 72 (present on every Apple device,
   which is the only platform this app ships on) with Georgia as the
   fallback, and Hiragino Mincho for kana.

   STAGED ROLLOUT — this sheet currently styles the Japanese home
   page only; the other seven locales still load site.css. When the
   port is finished and this file replaces site.css, the `.article`
   rules at the end of site.css MUST come with it, or
   /privacy and /en/privacy lose their typography.
   --------------------------------------------------------------- */

:root {
  --night: #06080e;
  --night-2: #0b0f18;

  --ember: #d1935c;
  --ember-deep: #8a5426;
  --aurora: #4ad6c0;
  --aurora-2: #7fb0ff;
  --cream: #f0ede4;

  --text: #e9eaee;
  --body: #aeb6c4;
  --muted: #838c9c;
  --faint: #58616f;
  --line: rgba(255, 255, 255, 0.08);
  --line-warm: rgba(209, 147, 92, 0.22);

  --display: "Didot", "Bodoni 72", Georgia, "Times New Roman", serif;
  --mincho: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
          "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", Meiryo, sans-serif;

  --gutter: clamp(1.4rem, 5vw, 4rem);
  --measure: 34rem;
}

/* Per-language serif. Hiragino Mincho carries kana and the Japanese
   glyph forms of the shared ideographs, so Simplified Chinese needs its
   own face or it renders in Japanese shapes; Korean needs one because
   Hiragino has no hangul at all. Latin pages fall through to the same
   stack and pick up Hiragino's Latin, which sits well beside Didot. */
html[lang="zh-Hans"] {
  --mincho: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif;
}
html[lang="ko"] {
  --mincho: "AppleMyungjo", "Nanum Myeongjo", "Noto Serif KR", "Source Han Serif K", serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

body {
  background: var(--night);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 2.05;
  letter-spacing: 0.015em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: rgba(209, 147, 92, 0.35); color: #fff; }
a { color: inherit; }

:focus-visible {
  outline: 1px solid var(--ember);
  outline-offset: 4px;
}

/* ---- the field ----------------------------------------------------
   One fixed canvas behind everything. Ember and turbulent at the top,
   aurora and still by the closing photograph. */

#field {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}

/* A vignette that keeps the field from competing with type. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(6, 8, 14, 0) 40%, rgba(6, 8, 14, 0.72) 100%);
}

/* ---- utility label ----
   Wide-tracked small caps. Lifted from the app, which labels its own
   menu list "CHOOSE YOUR RESET" in exactly this register. */

.label {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  line-height: 1.6;
  color: var(--faint);
  text-transform: uppercase;
}
.label--ja { text-transform: none; letter-spacing: 0.3em; }

/* ---- nav ---- */

.nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.7rem var(--gutter);
}
.nav .mark {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--text);
  text-decoration: none;
}
.nav .langs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.15rem 0.85rem;
  max-width: 62vw;
}
.nav .lang,
.nav .current {
  font-size: 0.73rem;
  letter-spacing: 0.13em;
  color: var(--faint);
  text-decoration: none;
  padding: 0.35rem 0.1rem;
}
.nav .lang:hover { color: var(--text); }
.nav .current { color: var(--muted); }

@media (max-width: 760px) {
  .nav { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .nav .langs { max-width: 100%; justify-content: flex-start; gap: 0.05rem 0.7rem; }
  .nav .lang, .nav .current { font-size: 0.69rem; letter-spacing: 0.1em; }
  /* the switcher wraps to two rows here, so the hero starts lower */
  .hero { padding-top: 9.5rem; }
}

/* ---- hero ---------------------------------------------------------
   The orb first, the words second. */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 4.6rem var(--gutter) 2.6rem;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* the orb: the app's own home screen made ambient. Not a diagram of
   anything — a soft body of light that breathes on the physiological
   sigh's cadence (two short draws, one long release). Everything is
   blurred on purpose; there is no edge to read. */
.orb {
  position: relative;
  width: clamp(142px, 23vw, 206px);
  aspect-ratio: 1;
  margin-bottom: clamp(1rem, 2.6vw, 1.6rem);
  display: grid;
  place-items: center;
}
.orb span {
  position: absolute;
  border-radius: 50%;
  display: block;
  animation: breathe 19s ease-in-out infinite;
}
/* the air around it */
.orb__halo {
  inset: -38%;
  background:
    radial-gradient(circle at 40% 36%, rgba(74, 214, 192, 0.16), rgba(74, 214, 192, 0) 60%),
    radial-gradient(circle at 66% 70%, rgba(127, 176, 255, 0.15), rgba(127, 176, 255, 0) 62%);
  filter: blur(30px);
}
/* the body: lit at the edge, hollow at the centre, so it reads as a
   sphere without ever drawing one */
.orb__body {
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(74, 214, 192, 0) 30%,
      rgba(74, 214, 192, 0.34) 58%,
      rgba(127, 176, 255, 0.30) 72%,
      rgba(127, 176, 255, 0) 84%);
  filter: blur(15px);
}
/* the crescent, low and to the right — the same highlight the app's
   home screen carries */
.orb__rim {
  inset: 0;
  background: radial-gradient(circle at 68% 74%, rgba(198, 244, 255, 0.55), rgba(198, 244, 255, 0) 30%);
  filter: blur(11px);
  animation-delay: -1.2s;
}

/* Two short draws, one long release — the app's own breath. */
@keyframes breathe {
  0%   { transform: scale(0.95); opacity: 0.74; }
  9%   { transform: scale(1.03); opacity: 0.94; }
  15%  { transform: scale(1.00); opacity: 0.87; }
  24%  { transform: scale(1.08); opacity: 1;    }
  100% { transform: scale(0.95); opacity: 0.74; }
}

/* no text-transform here: the literal string is "iOS アプリ", and
   uppercasing it would print Apple's mark as "IOS". */
.hero .eyebrow {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  color: var(--faint);
  margin-bottom: 1.1rem;
}
.hero h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.9rem, 7.6vw, 5.2rem);
  line-height: 0.94;
  letter-spacing: 0.005em;
  color: var(--text);
}
/* kana never falls through to Didot, so the tagline is sized and
   tracked on its own terms rather than sharing the wordmark's clamp */
.hero .tagline {
  font-family: var(--mincho);
  font-size: clamp(1.02rem, 2.9vw, 1.45rem);
  line-height: 1.85;
  letter-spacing: 0.1em;
  color: var(--text);
  margin-top: clamp(0.9rem, 2.4vw, 1.35rem);
}
.hero .lede {
  max-width: 30rem;
  margin: 1.3rem auto 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.95;
  text-align: left;
}

/* ---- call to action ---- */

.cta { margin-top: clamp(1.3rem, 3vw, 1.9rem); }
.btn {
  display: inline-block;
  padding: 1.05rem 2.5rem;
  border-radius: 999px;
  background: var(--cream);
  color: #14181f;
  font-size: 0.94rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.5s;
  box-shadow: 0 0 0 rgba(240, 237, 228, 0);
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(240, 237, 228, 0.13);
}
.cta .note {
  margin-top: 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--faint);
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}

/* ---- sections ---- */

main { position: relative; }

.sec {
  max-width: 70rem;
  margin: 0 auto;
  padding: clamp(3.6rem, 8vw, 6.5rem) var(--gutter);
}
.sec h2 {
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(1.5rem, 4.2vw, 2.35rem);
  line-height: 1.7;
  letter-spacing: 0.06em;
  color: var(--text);
  margin: 0.9rem 0 0;
  /* no text-wrap: balance — it balances by character count, which in
     Japanese splits a word from its particle (「あなたのもの / は、」).
     Line breaks in headings are set explicitly with <br> per locale. */
}
.sec p { max-width: var(--measure); }

/* ---- outcomes -----------------------------------------------------
   Not a numbered walkthrough. Each band is one thing you leave the
   ninety seconds with; the small label is the menu it comes from, so
   the product's real vocabulary carries the structure. */

.outcome {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  padding: clamp(2.4rem, 5.5vw, 4rem) 0;
  border-top: 1px solid var(--line);
}
.outcome:first-of-type { border-top: 0; }
.outcome__text h3 {
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(1.45rem, 3.9vw, 2.15rem);
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: var(--text);
  margin: 0.8rem 0 1.3rem;
}
.outcome__text p { color: var(--body); }
.outcome__fig {
  position: relative;
  min-height: clamp(10rem, 21vw, 15rem);
  display: grid;
  place-items: center;
  perspective: 800px;
}
.outcome__text .label { color: var(--muted); }

@media (max-width: 860px) {
  .outcome {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }
  .outcome__fig { max-width: 15rem; margin: 0 auto; order: -1; }
}

/* figure 1 — the wave passing: rings released outward, one per exhale */
.fig-exhale { position: absolute; inset: 0; display: grid; place-items: center; }
.fig-exhale span {
  position: absolute;
  width: 22%;
  aspect-ratio: 1;
  border: 1px solid var(--ember);
  border-radius: 50%;
  opacity: 0;
  animation: exhale 9s cubic-bezier(0.16, 0.8, 0.3, 1) infinite;
}
.fig-exhale span:nth-child(2) { animation-delay: 3s; }
.fig-exhale span:nth-child(3) { animation-delay: 6s; }
.fig-exhale em {
  position: absolute;
  width: 20%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(209, 147, 92, 0.55), rgba(209, 147, 92, 0) 70%);
}
@keyframes exhale {
  0%   { transform: scale(0.4); opacity: 0; border-color: rgba(209, 147, 92, 0.75); }
  12%  { opacity: 1; }
  100% { transform: scale(4.4); opacity: 0; border-color: rgba(74, 214, 192, 0.5); }
}

/* figure 2 — mental rotation, the かいてん menus made visible.
   A hairline solid turning on two axes: the thing the app asks you
   to hold in your head while the loop has nowhere to run. */
.fig-rotate {
  --d: clamp(5.5rem, 15vw, 9rem);
  position: relative;
  width: var(--d);
  height: var(--d);
  transform-style: preserve-3d;
  animation: tumble 26s linear infinite;
}
.fig-rotate i {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(209, 147, 92, 0.42);
  background: rgba(209, 147, 92, 0.03);
}
.fig-rotate i:nth-child(1) { transform: translateZ(calc(var(--d) * 0.5)); }
.fig-rotate i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--d) * 0.5)); }
.fig-rotate i:nth-child(3) { transform: rotateY(90deg)  translateZ(calc(var(--d) * 0.5)); }
.fig-rotate i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--d) * 0.5)); }
.fig-rotate i:nth-child(5) { transform: rotateX(90deg)  translateZ(calc(var(--d) * 0.5)); }
.fig-rotate i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--d) * 0.5)); }
@keyframes tumble {
  from { transform: rotateX(-18deg) rotateY(0deg) rotateZ(4deg); }
  to   { transform: rotateX(-18deg) rotateY(360deg) rotateZ(4deg); }
}

/* figure 3 — what stays: pins on your own map, weathering by the day */
.fig-pins { width: clamp(8.5rem, 19vw, 12.5rem); aspect-ratio: 1; }
.fig-pins circle { fill: var(--ember); }
.fig-pins path { fill: none; stroke: rgba(233, 234, 238, 0.18); stroke-dasharray: 2 6; }
.fig-pins .fresh { animation: settle-in 11s ease-in-out infinite; transform-origin: center; }
@keyframes settle-in {
  0%, 68% { opacity: 0.95; }
  84%     { opacity: 0.4; }
  100%    { opacity: 0.95; }
}

/* ---- why it works -------------------------------------------------
   An editorial two-column: the claim on the left, the reasoning on
   the right, hairline-ruled. */

.why { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(2rem, 6vw, 5rem); }
.why__head { position: sticky; top: 3rem; align-self: start; }
.why__head h2 { margin-top: 0.9rem; }
.why__body > div {
  padding: 2.1rem 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.4rem;
}
.why__body > div:first-child { border-top: 0; padding-top: 0; }
.why h3 {
  font-family: var(--mincho);
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.07em;
  color: var(--text);
  line-height: 1.9;
  margin-bottom: 0.2rem;
}
.why p { color: var(--body); max-width: 38rem; }

@media (max-width: 860px) {
  .why { grid-template-columns: 1fr; gap: 2.4rem; }
  .why__head { position: static; }
}

.smallprint {
  margin-top: 2.6rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  font-size: 0.83rem;
  line-height: 1.95;
  color: var(--faint);
  max-width: 38rem;
}

/* ---- what stays yours ---- */

.keeps { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 6vw, 5rem); }
.keeps__head h2 { margin-top: 0.9rem; }
.keeps ul { list-style: none; }
.keeps li {
  position: relative;
  padding: 1.15rem 0 1.15rem 1.9rem;
  border-top: 1px solid var(--line);
  color: var(--body);
  line-height: 1.95;
}
.keeps li:first-child { border-top: 0; }
.keeps li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.95rem;
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 1px solid var(--line-warm);
}
@media (max-width: 860px) { .keeps { grid-template-columns: 1fr; gap: 1.6rem; } }

.textlink {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid rgba(209, 147, 92, 0.5);
  padding-bottom: 2px;
  transition: border-color 0.4s;
}
.textlink:hover { border-color: var(--ember); }

/* ---- price --------------------------------------------------------
   The one place a screenshot appears, and it appears small: a glimpse
   of the object, not a feature tour. */

.price { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.price h2.price__line {
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.9vw, 2.25rem);
  line-height: 1.75;
  letter-spacing: 0.05em;
  color: var(--text);
  margin: 0.9rem 0 1.6rem;
}
.price p { color: var(--body); }
.glimpse {
  position: relative;
  justify-self: center;
  width: min(100%, 15rem);
}
.glimpse img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1.6rem;
  /* the screen fades out rather than ending in a hard edge, so it
     reads as a glimpse of the app instead of a pasted-in screen */
  -webkit-mask-image: radial-gradient(115% 78% at 50% 34%, #000 42%, transparent 88%);
          mask-image: radial-gradient(115% 78% at 50% 34%, #000 42%, transparent 88%);
  opacity: 0.92;
}
@media (max-width: 860px) {
  .price { grid-template-columns: 1fr; }
  .glimpse { width: min(100%, 12rem); }
}

/* ---- closing ---- */

.close {
  position: relative;
  isolation: isolate;
  min-height: 74svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(5rem, 12vw, 9rem) var(--gutter);
  overflow: hidden;
}
.close::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* the photograph's subject — Earth's limb, the city lights, the thin
     blue line of atmosphere — sits at the bottom of the frame, which is
     also where a thrown feeling lands. Anchor there, not at centre. */
  background: url(/assets/bg.jpg) center bottom / cover no-repeat;
  opacity: 0.9;
}
.close::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, var(--night) 0%, rgba(6, 8, 14, 0.14) 38%, rgba(6, 8, 14, 0.30) 70%, rgba(6, 8, 14, 0.88) 100%);
}
.close .ask {
  font-family: var(--mincho);
  font-size: clamp(1.5rem, 4.6vw, 2.5rem);
  line-height: 2;
  letter-spacing: 0.09em;
  color: var(--text);
}

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

footer {
  background: var(--night);
  border-top: 1px solid var(--line);
  padding: 3.4rem var(--gutter) 4rem;
  text-align: center;
  font-size: 0.82rem;
  color: var(--faint);
  line-height: 2.1;
}
footer .links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 2rem;
  margin-bottom: 1.6rem;
}
footer .links a { color: var(--muted); text-decoration: none; }
footer .links a:hover { color: var(--text); }
footer .trust { color: var(--faint); }

/* ---- reduced motion ----
   Everything that turns or breathes stops; nothing disappears. */

@media (prefers-reduced-motion: reduce) {
  .orb__halo,
  .orb__body,
  .orb__rim,
  .fig-rotate,
  .fig-pins .fresh { animation: none; }
  .fig-exhale span { animation: none; opacity: 0.5; }
  .fig-exhale span:nth-child(2) { transform: scale(2.2); opacity: 0.3; }
  .fig-exhale span:nth-child(3) { transform: scale(3.6); opacity: 0.16; }
}

/* ---- arrival ----
   The class is added by field-v2.js only when motion is welcome, so
   content is never hidden by CSS alone. */

.rise {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.1s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.rise--in { opacity: 1; transform: none; }

/* ---- article pages (privacy policy) ----
   Ported from site.css when the home pages moved to v2. These rules must
   stay in whatever stylesheet /privacy and /en/privacy load. */

.article {
  max-width: 40rem;
  margin: 0 auto;
  padding: 8rem var(--gutter) 5rem;
}
.article h1 {
  font-family: var(--mincho);
  font-weight: 400;
  font-size: clamp(1.7rem, 5vw, 2.2rem);
  letter-spacing: 0.09em;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 0.8rem;
}
.article .updated { font-size: 0.82rem; color: var(--faint); margin-bottom: 3.2rem; }
.article h2 {
  font-family: var(--mincho);
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.09em;
  color: var(--text);
  margin: 3rem 0 1rem;
  padding-top: 2.1rem;
  border-top: 1px solid var(--line);
}
.article p { font-size: 0.95rem; max-width: none; }
.article p + p { margin-top: 1.2em; }
.article ul { margin: 1.2em 0; padding-left: 1.4em; }
.article li { font-size: 0.95rem; margin: 0.5em 0; }
.article strong { color: var(--text); font-weight: 600; }
.article .lead { color: var(--body); }

/* ---- press kit ---- */

.factsheet {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: 0.92rem;
}
.factsheet th, .factsheet td {
  text-align: left;
  padding: 0.7em 1em 0.7em 0;
  border-top: 1px solid var(--line);
  vertical-align: top;
}
.factsheet tr:first-child th, .factsheet tr:first-child td { border-top: none; }
.factsheet th { color: var(--faint); font-weight: 400; white-space: nowrap; width: 11em; }
.factsheet td {
  color: var(--body);
  overflow-wrap: anywhere;
}
@media (max-width: 560px) {
  .factsheet,
  .factsheet tbody,
  .factsheet tr,
  .factsheet th,
  .factsheet td { display: block; width: 100%; }
  .factsheet th {
    padding: 0.9em 0 0.1em;
    white-space: normal;
  }
  .factsheet td {
    padding: 0 0 0.9em;
    border-top: 0;
  }
}

.press-shots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin: 1.6em 0;
}
.press-shots figure { margin: 0; }
.press-shots img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  display: block;
}
.press-shots figcaption { margin-top: 0.5em; font-size: 0.76rem; color: var(--faint); text-align: center; }
@media (max-width: 560px) { .press-shots { grid-template-columns: repeat(2, 1fr); } }

.press-icon {
  width: 112px;
  height: 112px;
  border-radius: 25px;
  display: block;
  margin: 1em 0 1.6em;
  border: 1px solid rgba(255, 255, 255, 0.13);
}