/*
 * Phone screens, drawn in HTML and CSS with the same tokens as the app.
 * Values come from the approved canvas (Main.dc.html for Soft, Bold.dc.html
 * for Bold) and src/theme/v2/skins.ts. Every colour is a variable, so the
 * screens change with the look and colour picked on the page.
 *
 * A phone is drawn at 360 x 780 px and shrunk with `zoom` to the width of its
 * slot (container queries, steps of 2.5 per cent), so no script is needed.
 */

.phone-slot {
  container-type: inline-size;
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
}

.phone {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 360px;
  height: 780px;
  margin-inline: auto;
  overflow: hidden;
  border-radius: 46px;
  background-color: var(--c-bg);
  background-image: radial-gradient(380px 240px at 90% -6%, var(--glow) 0%, transparent 72%);
  box-shadow: var(--sh-phone);
  color: var(--c-text);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
}

.phone p {
  text-wrap: wrap;
}

.ph-screen-phone {
  height: 720px;
}

[data-look="bold"] .phone {
  border: 3px solid var(--c-ink);
  border-radius: 38px;
  background-image: radial-gradient(var(--dot) 1.3px, transparent 1.5px);
  background-size: 16px 16px;
}

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

.ph-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 26px 14px 12px;
  border-bottom: 1px solid var(--c-line);
}

[data-look="bold"] .ph-head {
  padding: 24px 12px 12px;
  border-bottom: 2.5px solid var(--c-ink);
  background: var(--c-surface);
}

.ph-back {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 44px;
  color: var(--c-text);
}

.ph-back .ic {
  width: 22px;
  height: 22px;
}

[data-look="bold"] .ph-back .ic {
  stroke-width: 3;
}

.ph-avwrap {
  position: relative;
  flex: none;
  width: 42px;
  height: 42px;
}

.ph-online {
  position: absolute;
  right: -1px;
  bottom: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c-online);
  box-shadow: 0 0 0 2.5px var(--c-bg);
}

.ph-who {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.ph-name {
  color: var(--c-text);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
}

[data-look="bold"] .ph-name {
  font-size: 17px;
  font-weight: 700;
}

.ph-status {
  display: flex;
  align-items: center;
  color: var(--c-online-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

[data-look="bold"] .ph-status {
  color: var(--c-text-2);
}

.ph-online-sq {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border: 1.5px solid var(--c-ink);
  border-radius: 3px;
  background: var(--c-online);
}

.ph-info {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  color: var(--c-text-2);
}

[data-look="bold"] .ph-info {
  border: 2.5px solid var(--c-ink);
  border-radius: 12px;
  background: var(--c-surface);
  color: var(--c-text);
}

/* ---------- Chat ---------- */

.ph-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 16px;
}

[data-look="bold"] .ph-body {
  gap: 11px;
}

.ph-day {
  align-self: center;
  padding: 2px 0 6px;
  color: var(--c-muted);
  font-size: 12px;
  font-weight: 700;
}

[data-look="bold"] .ph-day {
  padding: 2px 12px;
  border: 2px solid var(--c-ink);
  border-radius: 8px;
  background: var(--c-accent);
  color: var(--c-on-accent);
  transform: rotate(-2deg);
}

.bub {
  max-width: 76%;
  margin: 0;
  padding: 11px 14px;
  border-radius: 22px 22px 22px 8px;
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 15px;
  line-height: 1.45;
  box-shadow: 0 6px 16px -14px var(--c-shadow);
  align-self: flex-start;
}

.bub--me {
  align-self: flex-end;
  border-radius: 22px 22px 8px 22px;
  background: var(--c-own);
  color: var(--c-on-own);
  box-shadow: none;
}

[data-look="bold"] .bub {
  max-width: 78%;
  padding: 11px 13px;
  border: 2.5px solid var(--c-ink);
  border-radius: 18px 18px 18px 4px;
  line-height: 1.42;
  box-shadow: 3px 3px 0 var(--c-ink);
}

[data-look="bold"] .bub--me {
  margin-right: 3px;
  border-radius: 18px 18px 4px 18px;
  box-shadow: 3px 3px 0 var(--c-ink);
}

.ph-seen {
  align-self: flex-end;
  padding-right: 4px;
  color: var(--c-muted);
  font-size: 11px;
  font-weight: 600;
}

[data-look="bold"] .ph-seen {
  color: var(--c-text-2);
  font-weight: 700;
}

/* ---------- Composer ---------- */

.ph-composer {
  padding: 8px 12px 20px;
}

.ph-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 54px;
  padding: 6px 6px 6px 8px;
  border-radius: 27px;
  background: var(--c-surface);
  box-shadow: 0 10px 26px -18px var(--c-shadow);
}

[data-look="bold"] .ph-composer {
  padding: 10px 12px 16px;
  border-top: 2.5px solid var(--c-ink);
  background: var(--c-surface);
}

[data-look="bold"] .ph-pill {
  min-height: 0;
  gap: 8px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ph-plus {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--c-text-2);
}

[data-look="bold"] .ph-plus {
  display: none;
}

.ph-input {
  flex: 1;
  min-width: 0;
  color: var(--c-text);
  font-size: 15px;
}

[data-look="bold"] .ph-input {
  display: flex;
  align-items: center;
  min-height: 46px;
  padding: 0 12px;
  border: 2.5px solid var(--c-ink);
  border-radius: 13px;
  background: var(--c-bg);
}

.ph-input--hint {
  color: var(--c-muted);
}

[data-look="bold"] .ph-input--hint {
  color: var(--c-text-2);
}

.ph-deuxbtn,
.ph-send {
  display: grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 21px;
}

.ph-deuxbtn {
  background: var(--c-deux-fill);
}

.ph-deuxbtn .dx {
  width: 30px;
  height: 21px;
}

.ph-send {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

.ph-send .ic {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

[data-look="bold"] .ph-deuxbtn,
[data-look="bold"] .ph-send {
  width: 46px;
  height: 46px;
  border: 2.5px solid var(--c-ink);
  border-radius: 13px;
  box-shadow: 2px 2px 0 var(--c-ink);
}

[data-look="bold"] .ph-deuxbtn {
  background: var(--c-deux);
}

[data-look="bold"] .ph-deuxbtn .dx {
  width: 32px;
  height: 23px;
}

[data-look="bold"] .ph-send .ic {
  width: 20px;
  height: 20px;
  stroke-width: 3;
}

/* ---------- The Deux sheet ---------- */

.ph-scrim {
  position: absolute;
  inset: 0;
  background: var(--c-scrim);
}

.ph-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 18px 24px;
  border-radius: 32px 32px 0 0;
  background: var(--c-surface);
  box-shadow: 0 -20px 40px -24px var(--c-shadow);
}

[data-look="bold"] .ph-sheet {
  padding: 10px 16px 20px;
  border-top: 3px solid var(--c-ink);
  border-radius: 26px 26px 0 0;
  box-shadow: none;
}

.ph-handle {
  align-self: center;
  width: 38px;
  height: 5px;
  border-radius: 3px;
  background: var(--c-line);
}

[data-look="bold"] .ph-handle {
  width: 46px;
  height: 6px;
  background: var(--c-ink);
}

.ph-sheet-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

[data-look="bold"] .ph-sheet-head .dx {
  width: 50px;
  height: 36px;
}

.ph-sheet-name {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.ph-sheet-title {
  color: var(--c-text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
}

[data-look="bold"] .ph-sheet-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
}

.ph-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--c-deux-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.ph-badge .ic {
  width: 12px;
  height: 12px;
  stroke-width: 2.6;
}

[data-look="bold"] .ph-sheet-name {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

[data-look="bold"] .ph-badge {
  flex: none;
  padding: 3px 9px;
  border: 2px solid var(--c-ink);
  border-radius: 8px;
  background: var(--c-deux);
  color: var(--c-on-deux-fill);
  transform: rotate(3deg);
}

.ph-x {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  background: var(--c-surface-alt);
  color: var(--c-text-2);
}

.ph-x .ic {
  width: 18px;
  height: 18px;
  stroke-width: 2.4;
}

[data-look="bold"] .ph-x {
  border: 2.5px solid var(--c-ink);
  border-radius: 12px;
  background: var(--c-surface);
  color: var(--c-text);
}

[data-look="bold"] .ph-x .ic {
  stroke-width: 3;
}

.ph-h3 {
  margin: 2px 0 0;
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.4px;
  line-height: 1.2;
}

[data-look="bold"] .ph-h3 {
  font-size: 25px;
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.ph-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 20px;
  background: var(--c-surface-alt);
}

.ph-tile {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
}

.ph-tile .ic {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}

.ph-choice--a .ph-tile { background: var(--c-accent-soft); color: var(--c-on-accent-soft); }
.ph-choice--b .ph-tile { background: var(--c-calm); color: var(--c-on-calm); }
.ph-choice--c .ph-tile { background: var(--c-deux-fill); color: var(--c-deux-text); }

.ph-ctext {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ph-ctitle {
  color: var(--c-text);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
}

.ph-cdesc {
  color: var(--c-text-2);
  font-size: 13px;
  line-height: 1.35;
}

.ph-chev {
  width: 18px;
  height: 18px;
  color: var(--c-muted);
  stroke-width: 2.2;
}

[data-look="bold"] .ph-choice {
  padding: 11px;
  border: 2.5px solid var(--c-ink);
  border-radius: 16px;
  box-shadow: 4px 4px 0 var(--c-ink);
}

[data-look="bold"] .ph-choice--a { background: var(--c-accent); transform: rotate(-0.8deg); }
[data-look="bold"] .ph-choice--b { background: var(--c-calm); transform: rotate(0.7deg); }
[data-look="bold"] .ph-choice--c { background: var(--c-warm); transform: rotate(-0.5deg); }

[data-look="bold"] .ph-tile {
  width: 42px;
  height: 42px;
  border: 2.5px solid var(--c-ink);
  border-radius: 11px;
  background: var(--c-surface);
  color: var(--c-text);
}

[data-look="bold"] .ph-choice--a .ph-tile,
[data-look="bold"] .ph-choice--b .ph-tile,
[data-look="bold"] .ph-choice--c .ph-tile {
  background: var(--c-surface);
  color: var(--c-text);
}

[data-look="bold"] .ph-tile .ic {
  stroke-width: 2.6;
}

[data-look="bold"] .ph-ctitle {
  color: var(--c-on-accent);
  font-size: 17px;
  font-weight: 700;
}

[data-look="bold"] .ph-cdesc {
  color: var(--c-on-accent);
  font-weight: 500;
}

.ph-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding-top: 2px;
  color: var(--c-muted);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}

.ph-foot .ic {
  width: 12px;
  height: 12px;
  stroke-width: 2.6;
}

[data-look="bold"] .ph-foot {
  color: var(--c-text-2);
  font-weight: 600;
}

.ph-foot--end {
  margin-top: auto;
}

/* ---------- Full-screen Deux screens (Say it better, What do they mean?) ---------- */

.ph-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: 18px 18px 22px;
}

[data-look="bold"] .ph-main {
  padding: 18px 16px 20px;
}

.ph-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ph-h3--grow {
  flex: 1;
  min-width: 0;
  font-size: 22px;
}

[data-look="bold"] .ph-h3--grow {
  font-size: 24px;
  letter-spacing: -0.6px;
}

.ph-title-row .ph-x {
  background: var(--c-surface);
}

.ph-note {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--c-surface-alt);
}

[data-look="bold"] .ph-note {
  padding: 10px 12px;
  border: 2.5px dashed var(--c-ink);
  border-radius: 14px;
  background: var(--c-surface);
}

.ph-lab {
  color: var(--c-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

[data-look="bold"] .ph-lab {
  color: var(--c-text-2);
  font-weight: 700;
}

.ph-note-t {
  color: var(--c-text-2);
  font-size: 15px;
}

[data-look="bold"] .ph-note-t {
  color: var(--c-text);
}

.ph-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 16px;
  background: var(--c-surface);
}

[data-look="bold"] .ph-tabs {
  gap: 10px;
  padding: 0;
  background: transparent;
}

.ph-tab {
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--c-text-2);
  font: 800 14px/1 var(--font-text);
  cursor: pointer;
}

.ph-tab[aria-selected="true"] {
  background: var(--c-accent);
  color: var(--c-on-accent);
}

[data-look="bold"] .ph-tab {
  height: 44px;
  border: 2.5px solid var(--c-ink);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 15px;
  font-weight: 700;
}

[data-look="bold"] .ph-tab[aria-selected="true"] {
  box-shadow: 3px 3px 0 var(--c-ink);
  color: var(--c-on-accent);
}

[data-look="bold"] .ph-tab[data-tone="calm"][aria-selected="true"] { background: var(--c-calm); }
[data-look="bold"] .ph-tab[data-tone="warm"][aria-selected="true"] { background: var(--c-warm); }
[data-look="bold"] .ph-tab[data-tone="direct"][aria-selected="true"] { background: var(--c-accent); }

.ph-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  background: var(--c-surface);
  box-shadow: 0 18px 36px -26px var(--c-shadow);
}

[data-look="bold"] .ph-card {
  gap: 12px;
  padding: 22px 16px 16px;
  border: 2.5px solid var(--c-ink);
  border-radius: 18px;
  box-shadow: 6px 6px 0 var(--c-ink);
}

.ph-card--tones {
  min-height: 176px;
}

[data-look="bold"] .ph-card--tones {
  min-height: 190px;
}

.ph-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

[data-look="bold"] .ph-panel {
  gap: 12px;
}

.ph-result {
  margin: 0;
  color: var(--c-text);
  font-size: 17px;
  line-height: 1.55;
}

[data-look="bold"] .ph-result {
  line-height: 1.5;
}

.ph-txt {
  margin: 0;
  color: var(--c-text);
  font-size: 15px;
  line-height: 1.5;
}

.ph-why {
  margin: 0;
  color: var(--c-text-2);
  font-size: 13px;
  line-height: 1.5;
}

[data-look="bold"] .ph-why {
  color: var(--c-text);
}

.ph-sec {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ph-rule {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--c-line);
}

[data-look="bold"] .ph-rule {
  height: 0;
  border-top: 2px dashed var(--c-ink);
  background: transparent;
}

.ph-sticker {
  position: absolute;
  left: 14px;
  top: -14px;
  padding: 2px 10px;
  border: 2px solid var(--c-ink);
  border-radius: 8px;
  color: var(--c-on-accent);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  transform: rotate(-3deg);
}

.ph-sticker--calm { background: var(--c-calm); }
.ph-sticker--warm { background: var(--c-warm); }
.ph-sticker--direct { background: var(--c-accent); }
.ph-sticker--private { background: var(--c-deux); color: var(--c-on-deux-fill); }

.ph-private {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--c-deux-text);
  font-size: 12px;
  font-weight: 700;
}

.ph-private .ic {
  width: 12px;
  height: 12px;
  stroke-width: 2.6;
}

.ph-actions {
  display: flex;
  gap: 10px;
}

.ph-btn {
  display: grid;
  place-items: center;
  height: 50px;
  padding: 0 20px;
  border-radius: 25px;
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 15px;
  font-weight: 700;
}

.ph-btn--primary {
  flex: 1;
  background: var(--c-accent);
  color: var(--c-on-accent);
  font-weight: 800;
  box-shadow: 0 14px 26px -16px var(--c-accent);
}

[data-look="bold"] .ph-btn {
  padding: 0 18px;
  border: 2.5px solid var(--c-ink);
  border-radius: 14px;
  font-size: 16px;
}

[data-look="bold"] .ph-btn--primary {
  box-shadow: 4px 4px 0 var(--c-ink);
}

/* ---------- Talk to Deux ---------- */

.ph-head--deux .ph-status--deux {
  gap: 4px;
  color: var(--c-deux-text);
  font-weight: 700;
}

.ph-head--deux .ph-status .ic {
  width: 12px;
  height: 12px;
  stroke-width: 2.6;
}

.ph-head--deux .ph-name {
  font-weight: 800;
}

[data-look="bold"] .ph-head--deux .ph-status--deux {
  align-self: flex-start;
  margin-top: 4px;
}

[data-look="bold"] .ph-sticker-line {
  padding: 3px 9px;
  border: 2px solid var(--c-ink);
  border-radius: 8px;
  background: var(--c-deux);
  color: var(--c-on-deux-fill);
  font-size: 12px;
  font-weight: 700;
  transform: rotate(3deg);
}

.ph-body--coach {
  gap: 12px;
  padding-top: 18px;
}

.bub--coach {
  max-width: 86%;
}

.bub--deux {
  align-self: flex-start;
  background: var(--c-deux-fill);
  color: var(--c-on-deux-fill);
  border-radius: 22px 22px 22px 8px;
}

[data-look="bold"] .bub--deux {
  border-radius: 18px 18px 18px 4px;
}

.ph-copy {
  align-self: flex-start;
  padding: 0 4px;
  color: var(--c-accent-text);
  font-size: 12px;
  font-weight: 700;
}

.ph-composer--coach {
  margin-top: auto;
}

.ph-disclosure {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0 8px;
  color: var(--c-muted);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
}

.ph-disclosure .ic {
  width: 12px;
  height: 12px;
  margin-top: 2px;
  stroke-width: 2.6;
}

[data-look="bold"] .ph-disclosure {
  color: var(--c-text-2);
  font-weight: 500;
}

/* ---------- A pointer on the hero chat: where the Deux button is ---------- */

.ph-callout {
  position: absolute;
  right: 30px;
  bottom: 92px;
  z-index: 2;
  max-width: 176px;
  text-wrap: balance;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--c-surface);
  color: var(--c-text);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
  box-shadow: 0 14px 30px -14px var(--c-shadow), 0 0 0 1px var(--c-line);
}

.ph-callout::after {
  content: "";
  position: absolute;
  right: 46px;
  bottom: -8px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 9px solid var(--c-surface);
}

[data-look="bold"] .ph-callout {
  bottom: 88px;
  padding: 8px 12px;
  border: 2.5px solid var(--c-ink);
  border-radius: 12px;
  background: var(--c-deux);
  color: var(--c-on-deux-fill);
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--c-ink);
  transform: rotate(-2deg);
}

[data-look="bold"] .ph-callout::before,
[data-look="bold"] .ph-callout::after {
  content: "";
  position: absolute;
  right: 43px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
}

[data-look="bold"] .ph-callout::before {
  bottom: -14px;
  border-top: 12px solid var(--c-ink);
}

[data-look="bold"] .ph-callout::after {
  right: 43px;
  bottom: -9px;
  border-top: 10px solid var(--c-deux);
}

/* ---------- Scale to the slot ---------- */

@container (max-width: 359.98px) { .phone { zoom: 0.975; } }
@container (max-width: 350.98px) { .phone { zoom: 0.95; } }
@container (max-width: 341.98px) { .phone { zoom: 0.925; } }
@container (max-width: 332.98px) { .phone { zoom: 0.9; } }
@container (max-width: 323.98px) { .phone { zoom: 0.875; } }
@container (max-width: 314.98px) { .phone { zoom: 0.85; } }
@container (max-width: 305.98px) { .phone { zoom: 0.825; } }
@container (max-width: 296.98px) { .phone { zoom: 0.8; } }
@container (max-width: 287.98px) { .phone { zoom: 0.775; } }
@container (max-width: 278.98px) { .phone { zoom: 0.75; } }
@container (max-width: 269.98px) { .phone { zoom: 0.725; } }
@container (max-width: 260.98px) { .phone { zoom: 0.7; } }
@container (max-width: 251.98px) { .phone { zoom: 0.675; } }
@container (max-width: 242.98px) { .phone { zoom: 0.65; } }
@container (max-width: 233.98px) { .phone { zoom: 0.625; } }
@container (max-width: 224.98px) { .phone { zoom: 0.6; } }
@container (max-width: 215.98px) { .phone { zoom: 0.575; } }
@container (max-width: 206.98px) { .phone { zoom: 0.55; } }
@container (max-width: 197.98px) { .phone { zoom: 0.525; } }
@container (max-width: 188.98px) { .phone { zoom: 0.5; } }
@container (max-width: 179.98px) { .phone { zoom: 0.475; } }
@container (max-width: 170.98px) { .phone { zoom: 0.45; } }