:root {
  --ink:#071642;
  --blue:#0060ff;
  --muted:#3b5274;
  --yellow:#ffe14b;
  --paper:#fbfaf7;
  --shell:1370px
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:auto;
  scroll-padding-top:96px
}

body {
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:"Pretendard","Noto Sans KR","Malgun Gothic",Arial,sans-serif;
  -webkit-font-smoothing:antialiased
}

a {
  color:inherit;
  text-decoration:none
}

button {
  font:inherit
}

h1,h2,p,figure {
  margin:0
}

em {
  font-style:normal;
  color:var(--blue)
}

a,button {
  -webkit-tap-highlight-color:transparent
}

a:focus-visible,button:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:5px
}

.page-shell {
  width:85%;
  max-width:var(--shell);
  margin-inline:auto
}

.sr-only,.icon-definitions {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0)
}

.skip-link {
  position:fixed;
  left:16px;
  top:-70px;
  z-index:20;
  padding:14px;
  background:white
}

.skip-link:focus {
  top:12px
}

.icon {
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}

.site-header {
  position:absolute;
  inset:0 0 auto;
  z-index:10;
  height:96px
}

.nav-shell {
  height:100%;
  display:flex;
  align-items:center;
  gap:35px
}

.brand {
  display:flex;
  align-items:center;
  gap:20px;
  white-space:nowrap;
  font-size:21px;
  letter-spacing:-.6px
}

.brand strong {
  font-size:23px;
  font-weight:850;
  letter-spacing:-.5px
}

.brand>span {
  border-left:1px solid #92a0b5;
  padding-left:20px;
  font-weight:650
}

.site-nav {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:38px;
  margin-left:auto;
  font-size:14px;
  font-weight:600;
  white-space:nowrap
}

.site-nav a:hover {
  color:var(--blue)
}

.header-login {
  min-width:142px;
  text-align:center;
  padding:10px 20px;
  border:1px solid #71809a;
  border-radius:5px;
  font-size:14px;
  font-weight:650;
  margin-left:40px
}

.header-login:hover {
  background:white
}

.nav-toggle {
  display:none
}

.photo-section {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:#fbfaf7
}

.product-scene {
  position:absolute;
  inset:auto 0 0;
  width:100%;
  aspect-ratio:2;
  z-index:-1;
  container-type:inline-size;
  pointer-events:none
}

.scene-photo {
  display:block;
  width:100%;
  height:100%
}

.photo-layout {
  position:relative;
  min-height:inherit;
  display:flex;
  align-items:center
}

.hero {
  min-height:min(52vw,850px)
}

.hero-copy {
  padding-top:50px;
  width:49%
}

.eyebrow {
  color:var(--blue);
  font-size:clamp(13px,1.3vw,20px);
  font-weight:750;
  letter-spacing:.01em;
  margin-bottom:20px
}

h1 {
  font-size:clamp(35px,4.45vw,72px);
  line-height:1.23;
  font-weight:850;
  letter-spacing:-.075em;
  white-space:nowrap
}

.hero-description {
  margin-top:25px;
  font-size:clamp(17px,1.85vw,28px);
  line-height:1.6;
  font-weight:450;
  letter-spacing:-.04em
}

.hero-actions {
  display:flex;
  gap:20px;
  margin-top:37px
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  min-height:56px;
  padding:13px 28px;
  border-radius:6px;
  font-size:17px;
  font-weight:750;
  line-height:1.4;
  white-space:nowrap;
  transition:background .2s,box-shadow .2s
}

.button-primary {
  background:var(--blue);
  color:white;
  border:1px solid var(--blue);
  box-shadow:0 8px 24px #0060ff18
}

.button-primary:hover {
  background:#004fd6
}

.button-secondary {
  background:#ffffffd9;
  border:1px solid #6480a4
}

.button-secondary:hover {
  background:white
}

/* Screen inset follows the photographed display;
hardware remains photographic. */
.screen-plane {
  position:absolute;
  left:50.2%;
  top:14.05%;
  width:20.48%;
  height:56.6%;
  transform-origin:0 0;
  transform:matrix(1,0,-.033,1,0,0);
  border-radius:.35cqw;
  overflow:hidden;
  background:#e7f3fe
}

.screen-content {
  height:100%;
  padding:1.05cqw .88cqw .6cqw;
  font-size:.83cqw;
  color:#122c58;
  display:flex;
  flex-direction:column;
  line-height:1.5
}

.app-brand {
  display:flex;
  align-items:center;
  gap:.43cqw;
  font-size:1.08cqw
}

.app-mark {
  display:grid;
  place-items:center;
  border-radius:.35cqw;
  background:var(--blue);
  color:#fff;
  font-size:1.6cqw;
  width:1.8cqw;
  height:1.8cqw;
  line-height:1
}

.app-brand>.icon {
  width:1cqw;
  height:1cqw;
  margin-left:auto
}

.call-status {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.67cqw;
  margin-top:.9cqw
}

.call-status i {
  display:inline-block;
  width:.43cqw;
  height:.43cqw;
  border-radius:50%;
  background:#0aba83;
  margin-right:.25cqw
}

.call-modes {
  display:flex;
  gap:.45cqw;
  margin-block:.75cqw
}

.call-modes span {
  flex:1;
  text-align:center;
  background:#d7eaff;
  padding:.4cqw;
  border-radius:.3cqw;
  font-size:.7cqw;
  font-weight:700
}

.call-modes .active {
  background:#ffe46c
}

.conversation {
  flex:1;
  min-height:0;
  padding:.4cqw .45cqw;
  background:#d9eaf8;
  border-radius:.55cqw;
  display:flex;
  flex-direction:column;
  gap:.6cqw
}

.message {
  max-width:91%;
  align-self:flex-start
}

.message small {
  display:block;
  font-size:.6cqw;
  color:#526a8f;
  margin:0 0 .2cqw .2cqw
}

.message p {
  padding:.5cqw .65cqw;
  background:white;
  border-radius:.1cqw .65cqw .65cqw;
  font-size:.77cqw;
  line-height:1.65;
  letter-spacing:-.035em
}

.message time {
  display:block;
  text-align:right;
  font-size:.5cqw;
  color:#526a8f;
  margin-top:.1cqw
}

.message.mine {
  align-self:flex-end
}

.message.mine p {
  background:#ffe77b;
  border-radius:.65cqw .1cqw .65cqw .65cqw
}

.message.mine small {
  text-align:right
}

.message.ai small {
  color:#0060ff;
  font-weight:700
}

.translation {
  display:block;
  border-top:1px solid #55779925;
  margin-top:.35cqw;
  padding-top:.3cqw;
  font-size:.69cqw
}

.call-controls {
  display:flex;
  justify-content:space-around;
  margin-top:.55cqw;
  text-align:center
}

.call-controls>span {
  display:grid;
  justify-items:center;
  gap:.3cqw;
  color:var(--blue)
}

.call-controls .icon {
  width:1.65cqw;
  height:1.65cqw;
  padding:.34cqw;
  border-radius:50%;
  background:#d3eaff
}

.call-controls .hangup .icon {
  color:#fff;
  background:#ff4354;
  transform:rotate(135deg)
}

.call-controls small {
  font-size:.53cqw;
  color:#19365f
}

.experience-intro {
  text-align:center;
  padding:76px 24px 24px;
  background:linear-gradient(#fff,#fcfdfd)
}

.experience-intro h2 {
  font-size:clamp(30px,3.35vw,51px);
  line-height:1.35;
  font-weight:850;
  letter-spacing:-.065em
}

.intro-rule {
  display:block;
  width:40px;
  height:2px;
  background:#8796b1;
  margin:28px auto 0
}

.feature-chapter {
  min-height:min(44vw,720px)
}

.feature-chapter .product-scene {
  bottom:-2.5vw;
  mask-image:linear-gradient(to bottom,transparent,#000 12%)
}

.feature-copy {
  width:47%;
  padding:50px 0 35px
}

.chapter-number {
  display:block;
  font-size:clamp(17px,1.6vw,24px);
  font-weight:700;
  color:var(--blue);
  margin-bottom:12px
}

.feature-copy h2 {
  font-size:clamp(38px,4.15vw,64px);
  line-height:1.2;
  font-weight:850;
  letter-spacing:-.07em
}

.feature-description {
  font-size:clamp(17px,1.85vw,28px);
  line-height:1.65;
  letter-spacing:-.04em;
  margin-top:25px;
  color:#284670
}

.flow-list {
  display:flex;
  align-items:flex-start;
  justify-content:space-around;
  gap:12px;
  list-style:none;
  padding:20px 12px;
  margin:28px 0 0;
  border:1px solid #dbe8fa;
  border-radius:11px;
  background:#fffffff0;
  max-width:580px
}

.flow-list li {
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  white-space:nowrap
}

.flow-list li+li:before {
  content:"→";
  position:absolute;
  left:-15px;
  top:22px;
  color:#6f8eb9;
  font-size:20px
}

.flow-icon {
  width:68px;
  height:68px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#edf5ff;
  color:var(--blue)
}

.flow-icon .icon {
  width:34px;
  height:34px;
  stroke-width:2
}

.flow-list strong {
  font-size:clamp(12px,1.24vw,19px);
  letter-spacing:-.05em
}

.feature-reverse {
  background:#fcfbf8
}

.feature-reverse .product-scene {
  left:-41%;
  mask-image:linear-gradient(to right,#000 87%,transparent 100%)
}

.feature-reverse .photo-layout {
  justify-content:flex-end
}

.feature-reverse .feature-copy {
  width:41%
}

.feature-ai .flow-list {
  gap:10px;
  margin-left:-15px;
  padding:20px 10px
}

.feature-ai .flow-list strong {
  font-size:clamp(11px,1.06vw,16px)
}

.feature-ai .flow-icon {
  width:60px;
  height:60px
}

.management {
  overflow:hidden;
  background:radial-gradient(ellipse at 30% 100%,#08497755,transparent 55%),#071a2b;
  color:#fff
}

.management-layout {
  display:grid;
  grid-template-columns:35% 65%;
  align-items:center;
  gap:25px;
  height:min(24vw,365px);
  min-height:280px
}

.management-copy h2 {
  font-size:clamp(27px,2.65vw,40px);
  line-height:1.4;
  letter-spacing:-.06em
}

.button-dark {
  border:1px solid #b1c5d8;
  color:white;
  min-height:45px;
  font-size:15px;
  border-radius:5px;
  margin-top:27px;
  padding:10px 20px
}

.button-dark:hover {
  background:#ffffff15
}

.dashboard-frame {
  border:2px solid #697e90;
  border-radius:30px 30px 0 0;
  padding:12px 13px 0;
  background:linear-gradient(120deg,#304557,#07121c);
  align-self:end;
  height:92%;
  box-shadow:0 0 0 3px #05111c,0 15px 70px #003f9960;
  transform:translateY(10px)
}

.dashboard {
  display:grid;
  grid-template-columns:23% 42% 35%;
  height:100%;
  padding:21px 16px;
  gap:12px;
  border-radius:18px 18px 0 0;
  background:#081827;
  color:#e6eff9;
  font-size:13px
}

.dashboard aside {
  display:flex;
  flex-direction:column;
  gap:15px
}

.dashboard aside>strong {
  font-size:16px
}

.dashboard aside>small {
  font-size:9px;
  margin-top:-13px;
  color:#9fafbf
}

.dashboard aside>span {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  white-space:nowrap
}

.dashboard aside .selected {
  background:#104b82;
  border-radius:4px;
  padding:8px;
  margin-left:-7px
}

.dashboard .icon {
  width:14px;
  height:14px
}

.dashboard-main,.dashboard-history {
  background:#102333;
  border-radius:8px;
  padding:15px;
  min-width:0
}

.dashboard-heading {
  display:flex;
  justify-content:space-between;
  gap:10px
}

.dashboard-heading>span {
  font-size:9px;
  color:#859ab1
}

.dashboard-stats {
  display:flex;
  gap:28px;
  margin-top:16px
}

.dashboard-stats small {
  display:block;
  color:#8bacc8;
  font-size:9px
}

.dashboard-stats b {
  font-size:23px;
  display:block;
  margin-top:3px
}

.chart {
  height:80px;
  display:flex;
  align-items:flex-end;
  gap:6px;
  margin-top:12px;
  background:repeating-linear-gradient(to top,#7397af15 0 1px,transparent 1px 25px)
}

.chart i {
  height:var(--bar);
  flex:1;
  background:linear-gradient(#078fff,#0462d7);
  border-radius:2px 2px 0 0
}

.chart-labels {
  display:flex;
  justify-content:space-between;
  margin-top:5px;
  font-size:8px;
  color:#738fa5
}

.dashboard-history>div {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:23px
}

.dashboard-history>div>.icon {
  width:25px;
  height:25px;
  padding:5px;
  background:#344d64;
  border-radius:50%
}

.dashboard-history p {
  font-size:11px
}

.dashboard-history small {
  display:block;
  color:#849caf;
  font-size:8px;
  margin-top:6px
}

.contact-section {
  padding:16px 20px 0
}

.contact-panel {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:radial-gradient(ellipse at 72% 45%,#002751,#071a2b 58%);
  border-radius:27px;
  padding:56px max(40px,calc((100vw - 1370px)/2 - 20px));
  color:white;
  min-height:300px;
  display:flex;
  align-items:center
}

.contact-copy h2 {
  font-size:clamp(31px,3.3vw,51px);
  line-height:1.3;
  font-weight:800;
  letter-spacing:-.06em
}

.contact-copy h2 em {
  color:#1681ff
}

.contact-copy p {
  margin-top:16px;
  font-size:clamp(15px,1.5vw,23px);
  color:#e1e9f4;
  letter-spacing:-.03em
}

.button-yellow {
  margin-top:25px;
  background:var(--yellow);
  color:#09182d;
  min-height:48px;
  padding:12px 28px
}

.button-yellow:hover {
  background:#ffec85
}

.sound-wave {
  position:absolute;
  inset:0 5% 0 auto;
  width:42%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  z-index:-1
}

.sound-wave:before {
  content:"";
  position:absolute;
  inset:5% 0;
  background:radial-gradient(ellipse at center,#0064eb55,transparent 63%);
  filter:blur(18px)
}

.sound-wave i {
  height:var(--wave);
  width:2px;
  max-height:90px;
  background:#8cbcff8c;
  z-index:1
}

.site-footer {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:20px 4%;
  font-size:11px;
  color:#6d7a8c
}

@media(min-width:1775px) {
  .hero {
    min-height:52vw
  }
  .feature-chapter {
    min-height:44vw
  }
  .hero-copy {
    width:55%
  }
}

@media(max-width:1200px) {
  .site-header {
    height:76px
  }
  .nav-shell {
    gap:18px
  }
  .brand {
    gap:14px;
    font-size:17px
  }
  .brand strong {
    font-size:19px
  }
  .brand>span {
    padding-left:14px
  }
  .site-nav {
    gap:24px;
    font-size:12px
  }
  .header-login {
    min-width:106px;
    margin-left:10px;
    font-size:12px
  }
  .hero-copy {
    padding-top:35px
  }
  .eyebrow {
    margin-bottom:14px
  }
  .hero-description {
    margin-top:20px
  }
  .hero-actions {
    gap:14px;
    margin-top:27px
  }
  .button {
    min-height:48px;
    padding:11px 21px;
    font-size:14px
  }
  .experience-intro {
    padding-top:55px
  }
  .feature-copy {
    padding-block:35px
  }
  .feature-description {
    margin-top:21px
  }
  .flow-list {
    padding:16px 8px;
    gap:10px;
    margin-top:23px
  }
  .flow-icon {
    width:54px;
    height:54px
  }
  .flow-icon .icon {
    width:28px;
    height:28px
  }
  .flow-list li+li:before {
    top:14px;
    left:-12px;
    font-size:17px
  }
  .feature-ai .flow-icon {
    width:50px;
    height:50px
  }
  .dashboard {
    padding:18px 12px;
    gap:8px
  }
  .dashboard-history {
    padding:12px 10px
  }
  .contact-panel {
    padding:42px 5.5%
  }
  .management-layout {
    min-height:260px
  }
}

@media(max-width:900px) {
  html {
    scroll-padding-top:24px
  }
  .site-header {
    height:68px
  }
  .site-nav {
    display:none;
    position:absolute;
    left:4%;
    right:4%;
    top:62px;
    background:#fffffff5;
    border:1px solid #dce5ee;
    border-radius:12px;
    padding:22px;
    box-shadow:0 16px 32px #16345718;
    gap:24px;
    align-items:flex-start
  }
  .site-header.nav-open .site-nav {
    display:flex;
    flex-direction:column;
    font-size:15px
  }
  .nav-toggle {
    display:flex;
    margin-left:auto;
    flex-direction:column;
    justify-content:center;
    gap:6px;
    background:none;
    border:0;
    min-height:44px;
    min-width:44px;
    padding:10px;
    color:var(--ink)
  }
  .nav-toggle>span:not(.sr-only) {
    display:block;
    width:22px;
    height:2px;
    background:currentColor
  }
  .header-login {
    margin-left:0;
    min-width:90px
  }
  .hero-actions {
    gap:10px
  }
  .button {
    font-size:13px;
    padding:10px 17px;
    min-height:43px
  }
  .hero h1 {
    font-size:4.35vw
  }
  .hero-description {
    font-size:1.83vw
  }
  .eyebrow {
    font-size:1.4vw
  }
  .feature-copy h2 {
    font-size:4.3vw
  }
  .feature-description {
    font-size:1.95vw
  }
  .feature-copy {
    width:47%
  }
  .flow-list {
    padding:13px 6px
  }
  .flow-list li {
    gap:8px
  }
  .flow-list strong {
    font-size:1.4vw
  }
  .flow-icon {
    width:43px;
    height:43px
  }
  .flow-icon .icon {
    width:24px;
    height:24px
  }
  .flow-list li+li:before {
    top:11px;
    left:-9px;
    font-size:13px
  }
  .feature-ai .flow-list {
    margin-left:-12px
  }
  .feature-ai .flow-icon {
    width:40px;
    height:40px
  }
  .feature-ai .flow-list strong {
    font-size:1.22vw
  }
  .management-layout {
    min-height:230px;
    gap:17px
  }
  .management-copy h2 {
    font-size:2.9vw
  }
  .management-copy .button {
    font-size:12px;
    padding:8px 12px;
    min-height:38px;
    margin-top:20px
  }
  .dashboard-frame {
    padding:8px 8px 0;
    border-radius:20px 20px 0 0
  }
  .dashboard {
    grid-template-columns:24% 42% 34%;
    gap:5px;
    padding:16px 8px
  }
  .dashboard aside {
    gap:15px
  }
  .dashboard aside>strong {
    font-size:11px
  }
  .dashboard aside>small {
    font-size:7px
  }
  .dashboard aside>span {
    font-size:8px;
    gap:4px
  }
  .dashboard .icon {
    width:11px;
    height:11px
  }
  .dashboard-main,.dashboard-history {
    padding:10px 7px;
    font-size:10px
  }
  .dashboard-stats {
    gap:16px
  }
  .dashboard-stats b {
    font-size:18px
  }
  .dashboard-history p {
    font-size:8px
  }
  .dashboard-history small {
    font-size:7px
  }
  .dashboard-history>div {
    gap:4px
  }
  .dashboard-history>div>.icon {
    width:19px;
    height:19px;
    padding:4px
  }
  .chart {
    height:64px;
    gap:4px
  }
  .contact-panel {
    min-height:265px
  }
  .contact-copy h2 {
    font-size:3.8vw
  }
  .contact-copy p {
    font-size:1.7vw
  }
}

@media(max-width:600px) {
  .page-shell {
    width:88%
  }
  .site-header {
    height:72px;
    background:#ffffffb3
  }
  .nav-shell {
    gap:5px
  }
  .brand {
    gap:10px;
    font-size:14px;
    letter-spacing:-.4px
  }
  .brand strong {
    font-size:15px
  }
  .brand>span {
    padding-left:10px
  }
  .header-login {
    font-size:11px;
    min-width:65px;
    padding:8px 10px
  }
  .nav-toggle {
    min-width:39px;
    width:39px;
    padding:9px
  }
  .hero {
    min-height:0;
    padding-top:110px;
    display:flex;
    flex-direction:column
  }
  .hero .photo-layout {
    display:block;
    order:0
  }
  .hero-copy {
    width:100%;
    padding:0
  }
  .eyebrow {
    font-size:12px;
    margin-bottom:14px
  }
  .hero h1 {
    font-size:clamp(30px,8.1vw,48px);
    line-height:1.24;
    letter-spacing:-.07em
  }
  .hero-description {
    font-size:16px;
    line-height:1.7;
    margin-top:20px
  }
  .hero-actions {
    margin-top:24px;
    gap:12px
  }
  .button {
    font-size:14px;
    min-height:47px;
    padding:11px 20px
  }
  .hero .product-scene {
    position:relative;
    order:1;
    width:195%;
    margin-top:4px;
    margin-left:-92%;
    inset:auto;
    flex:none;
    mask-image:linear-gradient(to bottom,transparent 0%,#000 9%);
    z-index:-1
  }
  .experience-intro {
    padding:58px 20px 8px
  }
  .experience-intro h2 {
    font-size:28px;
    line-height:1.4
  }
  .intro-rule {
    width:28px;
    margin-top:23px
  }
  .feature-chapter {
    min-height:0;
    display:flex;
    flex-direction:column;
    background:#fbfaf7
  }
  .feature-chapter .photo-layout {
    order:0;
    display:block
  }
  .feature-copy,.feature-reverse .feature-copy {
    width:100%;
    padding:42px 0 0
  }
  .chapter-number {
    font-size:16px;
    margin-bottom:10px
  }
  .feature-copy h2 {
    font-size:36px;
    line-height:1.3
  }
  .feature-description {
    font-size:17px;
    line-height:1.7;
    margin-top:17px
  }
  .flow-list,.feature-ai .flow-list {
    margin:25px 0 0;
    padding:17px 10px;
    gap:12px;
    max-width:none
  }
  .flow-list li {
    gap:10px
  }
  .flow-list strong {
    font-size:13px
  }
  .flow-icon {
    width:52px;
    height:52px
  }
  .flow-icon .icon {
    width:28px;
    height:28px
  }
  .flow-list li+li:before {
    top:15px;
    left:-13px;
    font-size:17px
  }
  .feature-ai .flow-list {
    gap:8px;
    padding:16px 6px
  }
  .feature-ai .flow-list strong {
    font-size:10px
  }
  .feature-ai .flow-icon {
    width:42px;
    height:42px
  }
  .feature-ai .flow-list li+li:before {
    font-size:13px;
    left:-10px;
    top:11px
  }
  .feature-chapter .product-scene,.feature-reverse .product-scene {
    position:relative;
    order:1;
    width:185%;
    inset:auto;
    margin-left:-83%;
    margin-top:0;
    mask-image:linear-gradient(to bottom,transparent,#000 9%)
  }
  .feature-reverse .photo-layout {
    justify-content:normal
  }
  .management-layout {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    height:auto;
    min-height:0;
    padding-top:43px;
    gap:32px
  }
  .management-copy h2 {
    font-size:30px;
    line-height:1.4
  }
  .management-copy .button {
    font-size:13px;
    padding:10px 17px;
    margin-top:22px
  }
  .dashboard-frame {
    height:250px;
    width:114%;
    align-self:center;
    padding:8px 8px 0
  }
  .dashboard {
    grid-template-columns:22% 40% 38%;
    font-size:10px;
    padding:16px 12px
  }
  .dashboard-main,.dashboard-history {
    padding:12px 9px
  }
  .dashboard aside>strong {
    font-size:12px
  }
  .dashboard aside>span {
    font-size:9px
  }
  .dashboard-history p {
    font-size:9px
  }
  .chart {
    height:70px
  }
  .contact-section {
    padding:12px 12px 0
  }
  .contact-panel {
    padding:35px 23px 40px;
    min-height:0;
    border-radius:20px;
    display:block
  }
  .contact-copy h2 {
    font-size:29px
  }
  .contact-copy p {
    font-size:14px;
    line-height:1.7;
    max-width:260px;
    margin-top:16px
  }
  .button-yellow {
    margin-top:23px;
    font-size:14px
  }
  .sound-wave {
    width:62%;
    right:-15%;
    opacity:.4;
    top:8%;
    bottom:0
  }
  .site-footer {
    flex-direction:column;
    gap:7px;
    font-size:10px;
    padding:20px 6%
  }
}

@media(max-width:360px) {
  .brand { gap:8px; font-size:13px; }
  .brand strong { font-size:14px; }
  .brand>span { padding-left:8px; }
  .header-login { min-width:57px; }
  .hero-actions { gap:10px; }
  .hero-actions .button { font-size:13px; padding-inline:15px; }
}

/* Keep illustration values in this stylesheet: production CSP rejects style attributes. */
.chart i:nth-child(1) { --bar:30%; }
.chart i:nth-child(2) { --bar:45%; }
.chart i:nth-child(3) { --bar:37%; }
.chart i:nth-child(4) { --bar:66%; }
.chart i:nth-child(5) { --bar:28%; }
.chart i:nth-child(6) { --bar:53%; }
.chart i:nth-child(7) { --bar:43%; }
.chart i:nth-child(8) { --bar:81%; }
.chart i:nth-child(9) { --bar:48%; }
.chart i:nth-child(10) { --bar:64%; }
.chart i:nth-child(11) { --bar:52%; }
.chart i:nth-child(12) { --bar:90%; }
.sound-wave i:nth-child(1) { --wave:4%; }
.sound-wave i:nth-child(2) { --wave:7%; }
.sound-wave i:nth-child(3) { --wave:10%; }
.sound-wave i:nth-child(4) { --wave:7%; }
.sound-wave i:nth-child(5) { --wave:20%; }
.sound-wave i:nth-child(6) { --wave:36%; }
.sound-wave i:nth-child(7) { --wave:13%; }
.sound-wave i:nth-child(8) { --wave:22%; }
.sound-wave i:nth-child(9) { --wave:9%; }
.sound-wave i:nth-child(10) { --wave:12%; }
.sound-wave i:nth-child(11) { --wave:8%; }
.sound-wave i:nth-child(12) { --wave:20%; }
.sound-wave i:nth-child(13) { --wave:30%; }
.sound-wave i:nth-child(14) { --wave:53%; }
.sound-wave i:nth-child(15) { --wave:43%; }
.sound-wave i:nth-child(16) { --wave:23%; }
.sound-wave i:nth-child(17) { --wave:13%; }
.sound-wave i:nth-child(18) { --wave:18%; }
.sound-wave i:nth-child(19) { --wave:8%; }
.sound-wave i:nth-child(20) { --wave:27%; }
.sound-wave i:nth-child(21) { --wave:17%; }
.sound-wave i:nth-child(22) { --wave:7%; }
.sound-wave i:nth-child(23) { --wave:8%; }
.sound-wave i:nth-child(24) { --wave:5%; }
.sound-wave i:nth-child(25) { --wave:12%; }
.sound-wave i:nth-child(26) { --wave:8%; }
.sound-wave i:nth-child(27) { --wave:5%; }
.sound-wave i:nth-child(28) { --wave:4%; }
.sound-wave i:nth-child(29) { --wave:3%; }

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  * {
    transition:none!important
  }
}