@import url("code-review.css");
.phone-guide .cr-hero{max-width:850px}
.phone-guide .cr-hero h1{font-size:clamp(2.7rem,6vw,4.6rem);line-height:1.04}
.phone-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.phone-guide .guide-shot{margin:24px 0}
.phone-guide .guide-shot img{display:block;width:100%;height:auto;border-radius:10px;border:1px solid var(--line)}
.phone-guide .guide-shot figcaption{margin-top:10px;font-size:.88rem;line-height:1.6;color:var(--muted)}
/* real photos of the phone and its screens are tall, so they sit side by side */
.phone-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:24px 0}
.phone-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.phone-grid .guide-shot{margin:0}
.phone-note{margin:26px 0;padding:20px 24px;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;background:var(--card);line-height:1.7;max-width:78ch}
.phone-table{overflow-x:auto;margin:24px 0}
.phone-table table{width:100%;border-collapse:collapse;font-size:.94rem;line-height:1.65}
.phone-table th,.phone-table td{text-align:left;vertical-align:top;padding:14px 16px;border:1px solid var(--line)}
.phone-table th{background:var(--card)}
.phone-table td:first-child{min-width:140px;font-weight:600}
.phone-guide pre{max-width:78ch;overflow-x:auto;border:1px solid var(--line);border-radius:10px;padding:14px 16px;background:var(--card);font-size:.86rem;line-height:1.6}
.phone-guide code{overflow-wrap:anywhere;background:var(--bg2);padding:1px 6px;border-radius:4px;font-size:.88em}
.phone-guide pre code{overflow-wrap:normal;background:none;padding:0;font-size:inherit}
@media(max-width:800px){.phone-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.phone-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.phone-grid .wide-on-phone{grid-column:1/-1}.phone-note{padding:16px}.phone-table th,.phone-table td{padding:10px}}