.phone-preview-page{min-width:320px}
.phone-preview-main{width:min(100%,1260px);margin-inline:auto;padding:clamp(28px,5vw,72px) clamp(20px,4vw,56px) 70px;display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:clamp(28px,6vw,100px);align-items:center}
.phone-preview-intro{min-width:0}
.phone-preview-intro h1{font-size:clamp(42px,5vw,72px);line-height:1.05;letter-spacing:-.055em;margin:0}
.phone-preview-intro>p:not(.eyebrow){max-width:530px;color:var(--muted);font-size:17px;line-height:1.65;margin:23px 0 0}
.phone-back-link{display:flex;width:fit-content;gap:24px;align-items:center;margin-top:23px;color:#66500f;font-weight:700;text-underline-offset:5px}
.phone-font-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:25px}
.phone-font-controls label{display:flex;flex-direction:column;gap:7px;min-width:0;color:#697168;font:800 10px/1.2 Arial,Helvetica,sans-serif;text-transform:uppercase;letter-spacing:.11em}
.phone-font-controls select{appearance:none;width:100%;min-width:0;min-height:43px;padding:9px 29px 9px 12px;border:1px solid #d4d8cf;border-radius:999px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%235a6258' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;color:#2b302b;font:700 12px Arial,Helvetica,sans-serif;text-transform:none;letter-spacing:normal;cursor:pointer}
.phone-font-controls select:focus-visible{outline:2px solid #667868;outline-offset:2px}
.phone-display{display:flex;flex-direction:column;align-items:center;min-width:0}
.phone-device{width:422px;max-width:100%;height:min(84svh,905px);min-height:610px;padding:11px 10px 9px;display:flex;flex-direction:column;background:#212524;border:2px solid #565d59;border-radius:53px;box-shadow:0 30px 65px #1b241e30, inset 0 0 0 2px #0b0d0c;overflow:hidden}
.phone-status{height:37px;flex:none;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:0 23px;background:#fff;border-radius:39px 39px 0 0;color:#171b18;font:700 12px Arial,sans-serif}
.phone-island{justify-self:center;width:101px;height:25px;border-radius:18px;background:#1b1e1c}
.phone-signal{justify-self:end;font-size:10px;letter-spacing:1px}
.phone-screen{flex:1;min-height:0;overflow:hidden;background:#fff}
.phone-screen iframe{display:block;width:390px;height:100%;border:0;background:#fff}
.phone-home-indicator{height:26px;flex:none;position:relative;background:#fff;border-radius:0 0 42px 42px}
.phone-home-indicator:after{content:"";position:absolute;width:115px;height:5px;border-radius:5px;background:#222;left:50%;bottom:8px;transform:translateX(-50%)}
.phone-size{margin:16px 0 0;color:#7b8279;font:700 11px Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
@media(max-width:980px){.phone-preview-main{grid-template-columns:1fr;justify-items:center}.phone-preview-intro{width:min(100%,650px);padding:0}.phone-display{width:100%}}
@media(max-width:500px){.phone-preview-main{padding-inline:12px;gap:25px}.phone-preview-intro{padding-inline:8px}.phone-preview-intro h1{font-size:38px}.phone-device{width:100%;height:min(76svh,780px);min-height:530px;border-radius:42px}.phone-screen iframe{width:100%}.phone-status{border-radius:30px 30px 0 0}.phone-size{font-size:10px}}

/* Mobile-page picker beside the live phone preview. */
.phone-page-picker-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:30px 0 10px;color:#737a72;font:800 10px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.15em;text-transform:uppercase}
.phone-page-picker-header span:last-child{color:#a37d21}
.phone-page-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:600px}
.phone-page-card{appearance:none;display:grid;grid-template-columns:68px minmax(0,1fr);align-items:center;gap:12px;min-width:0;min-height:104px;padding:9px;text-align:left;border:1px solid #d9ddd5;border-radius:15px;background:#fff;color:#262b27;cursor:pointer;box-shadow:0 4px 14px #2633290b;transition:transform .2s,border-color .2s,box-shadow .2s,background-color .2s}
.phone-page-card:hover{transform:translateY(-2px);border-color:#bca24f;box-shadow:0 10px 20px #26332919}
.phone-page-card:focus-visible{outline:2px solid #667868;outline-offset:2px}
.phone-page-card[aria-pressed=true]{border-color:#d2a531;background:#fffaf0;box-shadow:inset 0 0 0 1px #eac870,0 6px 18px #8e741323}
.phone-page-card img{display:block;width:100%;height:84px;object-fit:cover;object-position:top center;border-radius:9px;border:1px solid #e1e3dd;background:#e8e7e1}
.phone-page-card-copy{min-width:0;display:block}
.phone-page-card strong{display:block;font:800 clamp(12px,1.25vw,15px)/1.2 Arial,Helvetica,sans-serif;letter-spacing:-.02em;overflow-wrap:anywhere}
.phone-page-card small{display:block;margin-top:8px;color:#737b70;font:700 10px/1.25 Arial,Helvetica,sans-serif;letter-spacing:.04em}
.phone-page-card-home{grid-column:1/-1;grid-template-columns:125px minmax(0,1fr);min-height:116px}
.phone-page-card-home img{height:96px;aspect-ratio:4/3}
.phone-page-card-home strong{font-size:20px}
@media(min-width:981px){.phone-display{position:sticky;top:22px}}
@media(max-width:500px){.phone-page-grid{gap:8px}.phone-page-card{grid-template-columns:50px minmax(0,1fr);gap:8px;min-height:92px;padding:7px;border-radius:12px}.phone-page-card img{height:76px;border-radius:7px}.phone-page-card strong{font-size:13px}.phone-page-card small{font-size:10px;margin-top:5px}.phone-page-card-home{grid-template-columns:95px minmax(0,1fr);min-height:105px}.phone-page-card-home img{height:88px}.phone-page-card-home strong{font-size:18px}.phone-page-picker-header{margin-top:28px}}
@media(max-width:360px){.phone-page-card:not(.phone-page-card-home){grid-template-columns:40px minmax(0,1fr);gap:6px}.phone-page-card:not(.phone-page-card-home) strong{font-size:11px}.phone-page-card:not(.phone-page-card-home) small{font-size:9px}.phone-page-card:not(.phone-page-card-home) img{height:70px}}
@media(prefers-reduced-motion:reduce){.phone-page-card{transition:none}}

@media(max-width:500px){.phone-font-controls{grid-template-columns:1fr;gap:10px}.phone-font-controls label{display:grid;grid-template-columns:85px minmax(0,1fr);align-items:center}.phone-font-controls select{min-height:40px}}

.phone-page-swipe{display:none}
@media(max-width:980px){
  .phone-page-count{display:none}
  .phone-page-swipe{display:inline}
  .phone-page-grid{display:flex;gap:9px;max-width:none;width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding-inline:1px;overscroll-behavior-inline:contain;padding:2px 2px 12px 1px;-webkit-overflow-scrolling:touch}
  .phone-page-card,.phone-page-card-home{grid-column:auto;flex:0 0 min(38vw,170px);grid-template-columns:42px minmax(0,1fr);gap:7px;min-height:108px;padding:7px;border-radius:12px;scroll-snap-align:start}
  .phone-page-card img,.phone-page-card-home img{width:42px;height:88px;aspect-ratio:auto;border-radius:7px}
  .phone-page-card strong,.phone-page-card-home strong{font-size:12px;line-height:1.17}
  .phone-page-card small{font-size:9px;line-height:1.15;margin-top:5px}
}
@media(max-width:500px){
  .phone-page-grid{gap:8px}
  .phone-page-card,.phone-page-card-home{grid-template-columns:39px minmax(0,1fr);gap:6px;min-height:104px;padding:6px}
  .phone-page-card img,.phone-page-card-home img{width:39px;height:88px}
  .phone-page-card strong,.phone-page-card-home strong{font-size:11px}
  .phone-page-card small{font-size:9px;margin-top:4px}
  .phone-page-picker-header{margin-top:24px}
}
@media(max-width:360px){
  .phone-page-card:not(.phone-page-card-home){grid-template-columns:39px minmax(0,1fr);gap:6px}
  .phone-page-card:not(.phone-page-card-home) strong{font-size:11px}
  .phone-page-card:not(.phone-page-card-home) small{font-size:9px}
  .phone-page-card:not(.phone-page-card-home) img{height:88px}
}

@media(min-width:981px){
  .phone-page-card:not(.phone-page-card-home){display:flex;align-items:center;min-height:0;padding:16px 24px}
  .phone-page-card:not(.phone-page-card-home) img{display:none}
}

@media(min-width:981px){
  .phone-page-card-home{grid-template-columns:75px minmax(0,1fr)}
  .phone-page-card-home img{width:75px;height:100px;aspect-ratio:3/4;object-fit:cover}
}