/* Onestop phone screens for the website.
   A scoped port of the approved design/screens/phone-set-v2 system (base.css, screens.css,
   complaint.css; checkpoint 2 approved 10 Oct 2026). Same measurements; every rule lives under
   .ios so it cannot leak into the page. Icons: Lucide (ISC).
   12 Oct 2026: iPhone 18 Pro screen (402x874 pt, Apple spec) inside Apple's official product bezel
   (static/img/iphone-18-pro-black.webp, 1350x2760 @3x = 450x920 pt; screen at 24,23 pt).
   Status bar: Apple's own glyphs at Apple's positions (static/img/ios-status-*.png). */

.ios{--plum:#55466e;--ink:#242129;--muted:#665e70;--bubble:#ece5f3;--surface:#f7f6f9;
  position:relative;width:402px;height:874px;background:var(--surface);color:var(--ink);overflow:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;text-align:left;
  -webkit-font-smoothing:antialiased}
.ios *{box-sizing:border-box}
.ios-framed{border-radius:62px}
.ios .icon{width:20px;height:20px;flex-shrink:0}

/* Status bar: 62 pt (iPhone 18 Pro safe area). Glyph boxes in pt, measured from Apple's screenshot. */
.ios .status{height:62px;position:relative;color:#000}
.ios .status i{position:absolute;display:block;background:currentColor;-webkit-mask:no-repeat center/100% 100%;mask:no-repeat center/100% 100%}
.ios .status .sb-time{left:58.33px;top:26.33px;width:37.33px;height:16px;-webkit-mask-image:url(/static/img/ios-status-time.png);mask-image:url(/static/img/ios-status-time.png)}
.ios .status .sb-icons{right:38.67px;top:25.67px;width:88px;height:16.67px;-webkit-mask-image:url(/static/img/ios-status-icons.png);mask-image:url(/static/img/ios-status-icons.png)}
.ios .home{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:132px;height:5px;border-radius:5px;background:#16141a;z-index:7}

/* Chat header and conversation */
.ios .profile{height:124px;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:4px}
.ios .avatar-crop{width:78px;height:78px;border-radius:50%;overflow:hidden;clip-path:circle(50%);background:#fcfaf6;flex-shrink:0}
.ios .avatar{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.15);transform-origin:50% 35%}
.ios .profile strong{font-size:18px;letter-spacing:-.3px;font-weight:600}
.ios .conversation{padding:24px 16px 0;display:flex;flex-direction:column;gap:16px}
.ios .message{font-size:16px;line-height:21px;letter-spacing:-.18px;padding:8px 12px;border-radius:19px;width:fit-content;max-width:285px}
.ios .traveller{align-self:flex-end;background:var(--bubble);border-bottom-right-radius:10px}
.ios .assistant{align-self:flex-start;background:#fff;border-bottom-left-radius:10px;box-shadow:0 3px 8px #00000006}
.ios .reacted-message{position:relative;align-self:flex-end;margin-bottom:16px;width:fit-content;max-width:285px}
.ios .reacted-message .message{max-width:none}
.ios .reaction-wrap{position:absolute;right:8px;bottom:-16px;z-index:1}
.ios .reaction{border:0;background:#fff;border-radius:20px;min-width:38px;min-height:32px;display:grid;place-items:center;font-size:19px;cursor:pointer;box-shadow:0 3px 9px #0000000a;padding:0 6px;font-family:inherit}
.ios .reaction:hover{background:#f0e8f8}
.ios .reaction-picker{position:absolute;bottom:41px;right:0;display:flex;padding:5px;gap:3px;background:#fff;border-radius:24px;box-shadow:0 6px 20px #00000018;z-index:2}
.ios .reaction-picker[hidden]{display:none}
.ios .reaction-option{border:0;background:transparent;width:42px;height:42px;border-radius:50%;font-size:23px;cursor:pointer;font-family:inherit}
.ios .reaction-option:hover{background:var(--bubble)}
.ios .draft-group{display:flex;flex-direction:column;gap:8px;align-self:flex-start;width:327px;max-width:100%}

/* Artifact card (email, call summary, post) */
.ios .card{background:#fff;border-radius:23px;overflow:hidden;box-shadow:0 9px 22px #00000010;width:100%}
.ios .card-top{display:flex;align-items:center;gap:10px;padding:15px 16px 12px;color:var(--muted);font-size:12px}
.ios .app-icon{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;color:#fff}
.ios .app-icon .icon{width:19px;height:19px}
.ios .app-icon.mail{background:linear-gradient(155deg,#30b4fb,#0872e7)}
.ios .app-icon.mail .icon{width:22px;height:22px}
.ios .app-icon.call{background:linear-gradient(155deg,#5fdc72,#25b146)}
.ios .app-icon.call .icon{fill:currentColor;stroke-width:1.5}
.ios .app-icon.x{background:#0f0f10}
.ios .app-icon.x svg{width:16px;height:16px;fill:#fff}
.ios .card-meta{display:flex;flex-direction:column;gap:4px}
.ios .card-meta strong{font-size:13px;color:var(--ink);font-weight:600}
.ios .subject{margin:0;padding:0 16px;font-size:16px;font-weight:600;line-height:1.35;letter-spacing:-.2px}
.ios .excerpt{height:35px;overflow:hidden;margin:9px 16px 0;font-size:12px;line-height:18px;color:#706778}
.ios .excerpt p{margin:0}
.ios .card-footer{padding:12px 14px 14px}
.ios .review{width:100%;display:flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:12px;background:#efe8f7;color:#453354;min-height:43px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background .16s}
.ios .review:hover{background:#e4d7f0}
.ios .review .icon{width:15px;height:15px;stroke-width:2.4}
.ios .card-rows{margin:10px 16px 0;display:flex;flex-direction:column}
.ios .card-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;border-top:1px solid #f1edf5;font-size:13px;line-height:18px}
.ios .card-row:first-child{border-top:0;padding-top:2px}
.ios .card-row span{color:#706778}
.ios .card-row strong{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.ios .post-text{margin:0 16px;font-size:14px;line-height:20px;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ios .mention{color:#1d6fd6}

/* Composer, inside the phone */
.ios .compose-area{position:absolute;left:11px;right:11px;bottom:40px;z-index:2}
.ios .composer{height:65px;border-radius:34px;background:#fff;display:flex;align-items:center;gap:16px;padding:8px 9px 8px 21px;box-shadow:0 6px 18px #0000000d}
.ios .composer .plus{width:22px;height:22px;color:#4c4555;opacity:.8}
.ios .typed-message{font-size:21px;letter-spacing:-.3px;color:var(--ink);font-weight:600;flex:1}
.ios .typed-message .caret{display:inline-block;height:24px;width:2px;vertical-align:-4px;background:var(--plum);margin-left:3px;animation:ios-caret 1.2s step-end 5}
.ios .placeholder{font-size:17px;letter-spacing:-.2px;color:#857c8f;flex:1}
.ios .send{background:#e5d9f2;width:47px;height:47px;border-radius:50%;display:grid;place-items:center;color:#2b2233;flex-shrink:0}
.ios .send .icon{width:22px;height:22px;stroke-width:2.4}
.ios .send.idle{background:#f0ebf6}
.ios .send.idle .icon{opacity:.38}
@keyframes ios-caret{50%{opacity:0}}

.ios button:focus-visible{outline:2px solid var(--plum);outline-offset:3px}

/* ---------- Screen 3: the official complaint form in a live browser (film v3, 0:52-1:01) ---------- */
.ios .browser-bar{display:flex;align-items:center;gap:11px;padding:4px 18px 12px}
.ios .globe-tile{width:36px;height:36px;border-radius:10px;background:#3b3846;display:grid;place-items:center;flex-shrink:0;color:#fff}
.ios .globe-tile .icon{width:19px;height:19px}
.ios .browser-bar strong{display:block;font-size:14px;font-weight:600;letter-spacing:-.2px}
.ios .browser-state{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-top:1px}
.ios .browser-state i{width:7px;height:7px;border-radius:50%;background:#a99bd0;animation:ios-pulse 1.1s ease-in-out infinite}
.ios .browser-state.waiting i{background:#f0b84a}
.ios .browser-state.done i{background:#2f9e6a;animation:none}
.ios .browser-state.paused i{background:#8a8392;animation:none}
@keyframes ios-pulse{50%{opacity:.35}}
/* The website itself: deliberately a plainer typeface and palette than Onestop. */
.ios .webview{position:absolute;top:114px;bottom:88px;left:10px;right:10px;border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 6px 18px #0000000d;border:1px solid #ebe7f0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#172036}
.ios .gov{height:54px;background:#1f2b46;color:#fff;display:flex;align-items:center;gap:10px;padding:0 14px;position:relative;z-index:2}
.ios .gov .icon{width:18px;height:18px}
.ios .gov b{display:block;font-size:13.5px;letter-spacing:-.1px}
.ios .gov small{display:block;font-size:10px;color:#c6cede;margin-top:1px}
.ios .page-viewport{position:absolute;top:54px;bottom:0;left:0;right:0;overflow:hidden}
.ios .formbody{padding:14px 16px 28px;transition:transform .45s cubic-bezier(.4,0,.2,1)}
.ios .formbody h2{font-size:16.5px;margin:0;letter-spacing:-.2px}
.ios .lede{font-size:11px;color:#5d6577;margin:4px 0 6px;line-height:1.4}
.ios .fsec{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#5d6577;margin:14px 0 0}
.ios .fld{margin-top:9px;position:relative}
.ios .fld .lbl{display:block;font-size:11px;font-weight:700;color:#2b3348;margin-bottom:4px}
.ios .inp{height:32px;border:1px solid #c9cfdb;border-radius:6px;padding:0 9px;display:flex;align-items:center;font-size:12.5px;background:#fff;transition:border-color .15s,box-shadow .15s;white-space:nowrap;overflow:hidden}
.ios .inp.area{height:78px;align-items:flex-start;padding-top:7px;white-space:normal;line-height:1.4;display:block}
.ios .inp.focus{border-color:#1f2b46;box-shadow:0 0 0 2px #1f2b4626}
.ios .inp .ph{color:#8b93a5}
.ios .inp .chev{margin-left:auto;width:13px;height:13px;opacity:.55}
.ios .inp .caret{display:none;width:1.5px;height:14px;background:#1f2b46;margin-left:1px;animation:ios-blink 1s steps(1) infinite;flex-shrink:0}
.ios .inp.area .caret{vertical-align:-2px}
.ios .inp.focus .caret{display:inline-block}
@keyframes ios-blink{50%{opacity:0}}
.ios .frow{display:flex;gap:10px}
.ios .frow .fld{flex:1}
.ios .menu{position:absolute;left:0;right:0;top:54px;background:#fff;border:1px solid #c9cfdb;border-radius:6px;box-shadow:0 8px 20px #1f2b4622;z-index:3;padding:3px 0;display:none}
.ios .menu.open{display:block}
.ios .menu div{font-size:12.5px;padding:6px 9px}
.ios .menu div.hl{background:#e8ecf5}
.ios .att{display:none;align-items:center;gap:7px;height:30px;border:1px solid #e1e5ec;border-radius:6px;padding:0 9px;font-size:11.5px;margin-top:5px;position:relative;overflow:hidden}
.ios .att.show{display:flex}
.ios .att > .icon{width:12px;height:12px;opacity:.6}
.ios .att .ok{margin-left:auto;display:flex;align-items:center;gap:4px;color:#2f8a5f;font-weight:700;font-size:11px;opacity:0;transition:opacity .15s}
.ios .att .ok .icon{width:11px;height:11px;stroke-width:3}
.ios .att.done .ok{opacity:1}
.ios .att .bar{position:absolute;left:0;bottom:0;height:2px;background:#1f2b46;width:0}
.ios .cbx{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:11.5px;color:#2b3348}
.ios .cbx .box{width:16px;height:16px;border:1.5px solid #9aa2b4;border-radius:4px;display:grid;place-items:center;transition:background .15s,border-color .15s;color:#fff}
.ios .cbx .box .icon{width:11px;height:11px;stroke-width:3.2;opacity:0}
.ios .cbx.on .box{background:var(--plum);border-color:var(--plum)}
.ios .cbx.on .box .icon{opacity:1}
.ios .gov-submit{margin-top:14px;height:36px;width:150px;border-radius:6px;background:#1f2b46;color:#fff;font-size:12.5px;font-weight:700;display:grid;place-items:center}
.ios .browser-controls{position:absolute;bottom:34px;left:0;right:0;display:flex;justify-content:center;gap:10px}
.ios .browser-controls button{height:40px;padding:0 16px;border-radius:20px;border:0;font-family:inherit;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.ios .browser-controls .icon{width:15px;height:15px}
.ios .take{background:#3b3846;color:#fff}
.ios .stop{background:#fff;color:#242129;box-shadow:0 2px 8px #0000000f}
.ios .stop .icon.fill{fill:currentColor}
.ios [hidden]{display:none!important}
.ios .ok-sheet{position:absolute;left:10px;right:10px;bottom:22px;background:#fff;border-radius:28px;padding:18px 18px 16px;box-shadow:0 14px 40px #2a1e4033;transform:translateY(calc(100% + 40px));transition:transform .5s cubic-bezier(.2,.9,.25,1.05);z-index:5}
.ios .ok-sheet.up{transform:none}
.ios .ok-who{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--muted)}
.ios .ok-who .avatar-crop{width:36px;height:36px}
.ios .ok-q{font-size:19px;font-weight:700;letter-spacing:-.4px;line-height:1.2;margin:12px 0 0}
.ios .ok-d{font-size:13px;line-height:1.4;color:var(--muted);margin:6px 0 0}
.ios .ok-btns{display:flex;gap:10px;margin-top:16px}
.ios .ok-btns button{flex:1;min-height:46px;border:0;border-radius:23px;font-family:inherit;font-size:16px;font-weight:600;cursor:pointer}
.ios .ok-btns .not-now{background:#efe8f7;color:#453354}
.ios .ok-btns .submit{background:var(--plum);color:#fff}
.ios .ok-btns .submit:hover{background:#45385a}
.ios .filed{position:absolute;top:62px;left:0;right:0;bottom:0;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;z-index:6;opacity:0;pointer-events:none;transition:opacity .3s;padding-bottom:62px}
.ios .filed.show{opacity:1;pointer-events:auto}
.ios .filed .check{width:64px;height:64px;border-radius:50%;background:#2f9e6a;display:grid;place-items:center;margin-bottom:6px;color:#fff}
.ios .filed .check .icon{width:30px;height:30px;stroke-width:3}
.ios .filed strong{font-size:26px;letter-spacing:-.6px}
.ios .filed span{font-size:13px;color:var(--muted)}
.ios .filed button{margin-top:14px;border:0;background:#efe8f7;color:#453354;border-radius:18px;height:36px;padding:0 14px;font-family:inherit;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.ios .filed button .icon{width:14px;height:14px}

@media (prefers-reduced-motion:reduce){
  .ios .formbody,.ios .ok-sheet,.ios .filed,.ios .inp{transition:none}
  .ios .browser-state i,.ios .caret{animation:none}
}